บทความนี้จะมาตอบคำถามของหลายท่านที่สอบถามกันเข้ามา กับคำถามที่ว่า ออกแบบเว็บไซต์ คืออะไร ? ทำอย่างไร ? จะเริ่มตรงไหน ? ทำอย่างไรให้ถูกหลัก SEO ทั้งหลายทั้งปวงที่เอ่ยมา ฟังแล้วไม่น่ายาก แต่ไม่ง่ายแน่นอน ทุกส่วนมีความสำคัญ เพราะก่อนที่เราจะลงมือจัดทำ ออกแบบเว็บไซต์ เราต้องรู้ว่าเราจะทำอะไร จะเริ่มแบบไหน ซึ่งจะกล่าวเป็นข้อ ๆ ดังนี้

1. ทำเว็บไซต์เกี่ยวกับอะไร ?
เราต้องมีเป้าหมายว่าเว็บไซต์ที่เราจะทำ เราทำเว็บเกี่ยวกับอะไร เช่น เว็บขายเสื้อผ้า, เว็บขายรองเท้า, เว็บขายหนังสือ อื่น ๆ

2. สีเว็บไซต์
เรื่องของสีนั้นถือว่าสำคัญทีเดียว เพราะมันอาจส่งผลเสียต่อธุรกิจของเราได้ หากคุณทำเว็บขายชุดแต่งงาน แต่ดันใช้สีดำ ซึ่งเว็บไซต์ส่วนใหญ่มักหลีกเลี่ยง ซึ่งบางทีความชอบโดยส่วนตัว บางครั้งเราก็ควรมองถึงความเหมาะสมด้วย

3. โลโก้เว็บไซต์
เว็บไซต์ที่ดีควรมีสัญลักษณ์ หรือโลโก้ของเว็บไซต์ เพื่อให้ดูเป็นทางการ สร้างความโดดเด่นอย่างมีเอกลักษณ์ ซึ่งเราอาจจะใช้ชื่อเว็บไซต์มาเป็นโลโก้เว็บไซต์ก็ได้ โดยการใช้อักษรตัวแรกของชื่อเว็บไซต์ เช่น เว็บไซต์ของเรามีชื่อว่า Faodoo.com เราก็อาจเอาตัว F และ D มาดัดแปลงดีไซน์เป็นโลโก้เว็บไซต์ก็ได้

4. สโลแกนเว็บไซต์
การคิดสโลแกนที่ดี ควรมีคำ หรือประโยคที่เกี่ยวข้องกับสิ่งที่เราทำอยู่ด้วย เช่น เราทำเว็บไซต์ขายชุดชั้นใน เราก็อาจจะตั้งสโลแกนประจำเว็บไซต์ว่า “ชุดชั้นใน นุ่ม กระชับ ต้องชุดชั้นใน…” ตรง … ก็ใส่ชื่อยี่ห้อลงไปก็ได้

5. รูปแบบเว็บไซต์
รูปแบบของเว็บไซต์ การจัดวางองค์ประกอบ เพื่อให้เหมาะสมกับสิ่งที่เราทำอยู่ ถือเป็นหัวใจสำคัญของการทำเว็บไซต์ ต้องมีจินตนาการ หัวคิดริเริ่มพอสมควร และถ้าคุณมีหัวศิลป์ คุณก็จะได้เว็บไซต์ที่แตกต่าง แต่ต้องลงตัว ขอย้ำว่า ‘หัวศิลป์’ ไม่ใช่ ‘หัวศิลปะ’ นะครับ การมีหัวศิลป์จะช่วยให้เราแบ่งสัดส่วน จัดวาง ลำดับความสำคัญได้ดี คล้าย ๆ กับการออกแบบวางโครงสร้างในการสร้างบ้านนั่นแหละครับ เช่น หากเราทำเว็บไซต์ขายเสื้อผ้า เราก็ต้องอธิบายรายละเอียดสำคัญ ๆ ลงไป เสื้อผ้ายี่ห้ออะไร ? ใช้ผ้าอะไร ? จุดเด่นที่แตกต่างคืออะไร ? ซึ่งในส่วนรูปแบบของเว็บไซต์นี้ การจัดวางหน้าแรก หรือโฮมเพจของเว็บไซต์นั้นสำคัญมาก ๆ เพราะส่งผลในการทำ SEO

6. จัดเตรียมไฟล์ประกอบงาน
จัดการเตรียมไฟล์ภาพที่จะใช้ในการออกแบบเว็บไซต์ เช่น การนำรูปภาพรองเท้าขายดี หรือชุดเสื้อผ้าที่เข้ากับรูปแบบเว็บไซต์ที่เราต้องการ

7. เขียนแบบร่างคร่าว ๆ ใส่กระดาษ A4
เมื่อเราได้ส่วนประกอบทั้ง 6 ข้อข้างต้นแล้ว ต่อมาให้ลองร่างรูปแบบหน้าตาเว็บไซต์ออกมาคร่าว ๆ เพื่อจะได้เห็นภาพโดยรวมของหน้าตาเว็บไซต์ที่เราจินตนาการไว้ในหัว

8. ลงมือทำ
คราวนี้ก็ถึงเวลาลงมือปฏิบัติ โดยการใช้โปรแกรมใด ๆ ก็ตามที่เราถนัดมากที่สุดในการออกแบบเว็บไซต์ หากใครไม่รู้ว่าจะใช้โปรแกรมอะไร แนะนำให้ลองศึกษาโปรแกรมโฟโต้ชอป (Photoshop) เพราะถือเป็นพื้นฐานสำหรับการใช้งานในทุก ๆ ด้าน และหากเข้าใจการใช้งานโปรแกรมโฟโต้ชอป เราก็จะสามารถประยุกต์นำมาใช้งานได้อย่างมีประสิทธิภาพ และยิ่งไปกว่านั้น หากคุณใช้โปรแกรมโฟโต้ชอปเป็น คุณก็จะสามารถออกแบบเว็บไซต์ด้วยระบบเว็บไซต์สำเร็จรูปกับเราได้หลากหลายขึ้น

9. การใส่คีย์เวิร์ด คำ ประโยค เพื่อ SEO
หลังจากการออกแบบเว็บไซต์เสร็จสิ้นแล้ว ต่อมาเป็นขั้นตอนการจัดวางคีย์เวิร์ด คำ หรือประโยค และต้องเป็นประโยคที่มีความหมาย อ่านแล้วเข้าใจ ซึ่งเราอาจใส่ไว้ในส่วนท้ายของเว็บไซต์ (Footer) และส่วนหัวเว็บไซต์ (Header) เช่น “จำหน่ายเสื้อผ้าแฟชั่น เสื้อผ้าสตรี เสื้อผ้าบุรุษ รับตัดเย็บ ดีไซน์ชุดทำงานทุกรูปแบบ” และด้วยระบบเว็บไซต์สำเร็จรูปของเรารองรับ SEO ด้วยแล้ว คุณจึงไม่ต้องปรับแต่งอะไรให้ยุ่งยากมาก ให้เข้าไปเพิ่มคีย์เวิร์ดในส่วนนี้ก็พอแล้ว

ทั้งนี้ การออกแบบเว็บไซต์ ยังมีส่วนย่อยลงไปอีก ซึ่งก็ขึ้นอยู่กับงานนั้น ๆ และนี่ก็เป็นพื้นฐานเบื้องต้นที่ทุกคนสามารถนำไปประยุกต์ใช้งานได้จริง โชคดีครับ.

CSS ย่อมาจากคำว่า Cascading Style Sheets บางทีอาจจะเรียกว่า Style Sheets หรือ CSS ซึ่งจริงๆ แล้วมันคือตัวเดียวกัน

 

การทำงานของ CSS จะทำงานร่วมกับ HTML ใช้กำหนดการแสดงผลของสิ่งต่างๆ บนเว็บ เช่น สีอักษร สีพื้นหลัง ขนาดตัวอักษร จัดการเลย์เอ้าท์ (Layout) ให้สวยงามและอื่นๆ

 

ประโยชน์ของ CSS

 

1. CSS มีคุณสมบัติมากกว่า tag ของ html เช่นการกำหนดกรอบให้ข้อความ รวมทั้งสีรูปแบบของข้อความ
2. ทำให้ขนาดไฟล์แต่ละหน้าเล็กลงกว่าเดิม เพราะใช้โค้ดน้อยกว่า
3. มีความยืดหยุ่นสูง… ในการปรับแต่งแก้ไขในอนาคต
4. สามารถกำหนดแยกไว้ต่างหากจากไฟล์เอกสาร html และสามารถนำมาใช้ร่วมกับเอกสารหลายไฟล์ได้
5. การแก้ไขไฟล์เพียงจุดเดียว แต่ส่งผลกับเอกสารทั้งหมดได้ ไม่ต้องไล่ตามแก้ tag ต่างๆ ทั่วทั้งเอกสาร
6. สามารถจัดการเลย์เอ้าท์ได้อย่างละเอียด แม่นยำ
7. ง่ายในการเรียกดู Source
8. ใช้ดีกับระบบเสิร์ชเอ็นจิ้น (search engine) ต่างๆ
9. CSS จะช่วยให้งานที่มีขนาดใหญ่ควบคุมได้ง่ายดาย
10. และอื่นๆ

 

 

ตัวอย่างการใช้งาน

 

การสร้าง Style Sheet ทำได้โดยใช้แท็ก <STYLE TYPE=”text/css”>…</STYLE> และภายในแท็กเราก็ใส่ Style Sheet ของเราลงไป

 

ตัวอย่างโค้ด

 

<STYLE TYPE=”text/css”>
body {background:black; color:red }
h1 { font-size:15pt; font-family:tahoma }

</STYLE>

 

จากตัวอย่างข้างต้น selector ตัวแรกคือ body มีการกำหนด property 2 ตัวคือ background และ color และ selector อีกตัวคือ h1 ที่ถูกกำหนดฟอนต์ และขนาด

 

ข้อควรระวังในการใช้ CSS

 

โปรแกรมเบราว์เซอร์ (Browser) บางค่ายอาจไม่สามารถรองรับคำสั่ง CSS ได้ ดังนั้น ก่อนใช้งาน CSS จึงควรมีการทดสอบทุกครั้ง เพื่อให้ได้งานตามต้องการ

 

เกร็ดความรู้

 

ต้องระวังเคาะเว้นวรรคในตอนประกาศค่า value ด้วย ถ้าเกิดเราประกาศค่าตามนี้

 

โค้ด
p {margin-left: 20px}

 

โค้ดด้านบนนี้เป็นการประกาศที่ถูกต้อง ซึ่งจะมีผลทำให้โค้ดนี้ทำงานได้กับทุกเบราว์เซอร์ แต่ถ้าเราเผลอไปเว้นวรรคในส่วนของหน่วย ซึ่งในที่นี่เป็น px มันก็จะทำให้เกิดข้อแตกต่างทันที

 

โค้ด
p {margin-left: 20 px}

 

โค้ดด้านบนนี้จะทำงานแค่กับ IE เท่านั้น แต่จะไม่ทำงานกับ Firefox และ Netscape จึงต้องระวังการเคาะเว้นวรรคให้ดี…

เปิดโปรแกรม Photoshop ขึ้นมา ดูตามตัวอย่างในรูปด้านล่าง

p1

p2

2. Name ตั้งชื่อไฟล์ที่เราต้องการ

3. Width กำหนดความกว้าง Height กำหนดความสูง

4. Background Contents กำหนดสีให้กับพื้นหลัง

5. เมื่อตั้งค่าเสร็จแล้ว กด OK

p3

6. คลิกเลือกที่ Horizontal Type Tool

p4

p5

9. คลิกที่ Move Tool (V)

p6

p7

 

p8

p9

p10

เท่านี้เราก็จะได้ตัวอักษรในรูปแบบ Style ตามต้องการแล้ว

 

ตัวอักษรแบบ Style สามารถนำไปปรับใช้งานได้จริงกับเว็บไซต์ของเรา…

หลายๆคนกำลังศึกษา webpage อยู่และศึกษาการสร้างเว็บไซด์ซึ่งไฟล์หลักๆของเว็บไซด์นั้นคือ html ซึ่งเป็นขั้นตอนแรกที่ควรศึกษาเกี่ยวกับ html เบื้องต้น เพราะว่าถ้าหากว่าขาดความรู้เบื้องต้นของ htmlก็จะทำให้เรานั้นไม่สามารถพัฒนาตัวเองได้ดังนั้นถ้าหากมีความคิดอยากจะสร้างและพัฒนาเว็บไซด์ควรที่จะมีการศึกษาเกี่ยวกับ html เบื้องต้นดังต่อไปนี้

ภาษา html เบื้องต้น

1.ภาษาเบื้องต้นที่ควรรู้คือ คำสั่ง <br/> <hr> และ <p> คำสั่งเหล่านี้เป็นคำสั่งสำหรับการเว้นวรรค การขีดเส้น และการขึ้นย่อหน้า ซึ่งตามความหมายของคำว่า <br/> หรือ <br> นั้นเมื่อใส่คำสั่งเหล่านี้ลงไปใน html เช่น

<html>สวัสดีพี่น้องชาว html <br>

ยินดีที่ได้รู้จัก </html>

เมื่อเราใส่คำเหล่านี้ตามลงไปผลจะออกมาเป็น

สวัสดีครับพี่น้องชาว html

ยินดีที่ได้รู้จัก

ซึ่งมีการใส่ข้อมูลคำสั่ง <br> ลงไปทำให้มีการขึ้นบรรทัดใหม่และถ้าหากว่าเราตัดคำว่า <br> ออกไป ผลลัพธ์จะแสดงออกมาดังนี้

สวัสดีครับพี่น้องชาว html ยินดีที่ได้รู้จัก

ดังนั้นคำสั่ง html เบื้องต้นจึงสำคัญเป็นอย่างมากในการทำเว็บไซด์และคำสั่งที่ต่อไปคือคำสั่ง <p> ใช้แทนความหมายของคำว่าขึ้นบรรทัดใหม่รวมทั้งเป็นย่อหน้าซึ่งถ้าสังเกตดูดีๆ เว้นวรรคของ <p> จะแสดงผลบรรทัดมากกว่า <br> นิดหนึ่ง ซึ่งในส่วนใหญ่แล้วจะใช้คำสั่ง <p>เป็นตัวหลักและ <br> จะอยู่ภายใน <p> อีกทีเช่น

<html><p>สวัสดีพี่น้องชาว html <br>

ยินดีที่ได้รู้จัก<p/> </html>

ซึ่งถ้าหากว่าเราต้องการที่จะมีการขีดเส้นใต้เข้ามาด้วยให้ลองเพิ่มคำสั่ง <hr> ลงไปจะเป็นการขึ้นบรรทัดใหม่และมีเส้นขีดระหว่างกลางด้วย เปรียบเสมือนคำสั่ง <br> แต่เปลี่ยนตรงที่ว่า <hr> จะมีการขีดเส้นลงไปด้วย

2.ภาษาที่น่ารู้เกี่ยวกับ text คือ <center> <font color=””> <b> <u> และ <l> เมื่อเราได้รู้จักการใช้ html ในการเว้นวรรคแล้ววิธีการต่อไปที่จะศึกษาคือการศึกษาคำสั่งเกี่ยวกับการแสดงผลต่างๆเช่นถ้าหากว่าเราครอบคลุมคำพูดโดยใช้คำสั่ง <center></center> ลงไปจะทำให้ข้อความเหล่านั้นที่อยู่ภายในไปอยู่ตรงกลาง ซึ่งจะจัดตำแหน่งให้อยู่กึ่งกลางหน้ากระดาษที่เราทำเอาไว้รวมถึงมีการกำหนดตัวแบบอักษร <font color=””></font> ถ้าหากว่ายังอยู่ในเบื้องต้นเราใส่ <font color=”red”>สวัสดีครับ</font> ตัวหนังสือที่จะแสดงผลจะเป็น สีแดงแต่ถ้าหากว่ามีการพัฒนาและมีการเลือกสีที่หลากหลายสามารถนำสีจากรหัสต่างๆได้ใช้ <font color=”FF0000”></font> หมายความว่าสีภายในคำสั่งนี้จะเป็นสีแดง และคำสั่งที่ใช้สำหรับตัวหน้า ตัวขีดเส้นและตัวเอียงจะได้แก่ <b> คือตัวหน้า <u> คือตัวขีดเส้นใต้และ <l>ตัวเอียง

หลายๆคนคงสงสัยและได้ยินคุ้นหูมาเลยว่า เว็บดีไซเนอร์คืออะไร แต่ว่ามีแต่คนที่ได้ยินและคุ้นหูแต่ว่า น้อยคนมากที่จะรู้จักคำว่าเว็บดีไซเนอร์จริงๆ ซึ่งเว็บดีไซเนอร์นั้นมีหน้าที่องค์ประกอบหลายๆอย่างไม่ใช่เพียงแค่ออกแบบเว็บไซด์และจบลงเพียงเท่านั้นยังต้องศึกษาและมีการแก้ไขปัญหาต่างๆและมีการเพิ่มเติมในส่วนต่างๆ ซึ่งเว็บดีไซเนอร์ที่ถูกต้องนั้นมีอะไรบ้างเราจะมาแนะนำให้ดูในบทความนี้

ในคำว่า ดีไซน์นั้น สะกดเป็นภาษาอังกฤษได้ว่า Design ซึ่งมีความหมายว่าออกแบบ แต่ว่าความหมายของคำว่าออกแบบนั้นไม่ได้มีเพียงแค่ความสวยงามเท่านั้นแต่ว่าการทำงานกันเป็นทีมคือมีทั้ง Project Manager ซึ่งจะบอกกับทีมที่ทำกันว่าจะทำอย่างไรและได้ส่งต่อให้ ดีไซเนอร์ออกแบบมาอีกที ซึ่งการออกแบบของดีไซเนอร์นั้นต้องเข้ากับทีมและให้ติดความน่ารักที่เป็นที่นิยมของปัจจุบันไม่ตกเทรนอีกด้วยซึ่งในส่วนใหญ่ แล้วคำว่าออกแบบที่ดีนั้นและเป็นนักดีไซเนอร์มืออาชีพจริงๆแล้วต้องออกแบบมาเพื่อเหมาะกับเว็บไซด์และเหมาะกับเทรนในช่วงนั้นทำให้มีความแปลกใหม่และความสวยงามที่จะทำให้ทั้งผู้เข้าชมและผู้ที่ต้องการใช้เว็บไซด์นั้นพึงพอใจที่ได้รับงานที่มีความเป็นมืออาชีพ

การออกแบบนั้นคือการแก้ไขปัญหา

การออกแบบเว็บไซด์ก็เหมือนการแก้ไขปัญหาเนื่องจากว่า ถ้าหากว่ามีการออกแบบและมีผู้ที่จ้างเข้ามาเพื่อทำการดีไซเนอร์นั้นคนที่ออกแบบจะต้องตอบโจทย์ปัญหากับตนเองว่าผู้ที่จ้างงานมาให้ทำนั้นชอบในลักษณะใดและต้องการในแบบใดและจะทำอย่างไรถึงจะสวยงามและเป็นที่ต้องตาต้องใจของผู้ที่จ้างงานมา

ซึ่งจุดนี้เป็นจุดที่ดีของนักดีไซเนอร์ที่ดีนั่นเป็นเพราะว่านักดีไซเนอร์ที่ดีคือได้รับงานมาแล้วทำงานได้ส่งผลที่ดีที่สุดต่อผู้จ้างงานไม่ไดเพียงแค่ออกแบบเว็บไซด์ให้ขอไปที

ซึ่งก่อนที่จะออกแบบเว็บไซด์ได้นั้นนักดีไซเนอร์จำเป็นที่ต้องมีการวางแผนมาอย่างดีก่อนที่จะทำเพื่อที่ว่าการทำงานให้ดีนั้นจำเป็นอย่างมากที่จะต้องมีการวิเคราะห์โจทย์และการตามเทรนต่างๆภายในปัจจุบันว่าได้มีการก้าวหน้าไปอย่างไรบ้างและออกแบบมาให้ถูกหลักกับผู้จ้างงานและทีมที่ต้องการซึ่งนักดีไซเนอร์นั้นมีหลายองค์ประกอบไม่ว่าจะเป็นการออกแบบเว็บไซด์สำหรับหน้ารองรับ PHP รองรับ Html ซึ่งมีหลายประเภท ดังนั้นดีไซเนอร์นั้นไม่ใช่อาชีพที่ใครอยากจะเป็นก็เป็นได้ต้องอาศัยความชำนาญและความเก่งมากพอสมควร ถึงจะเรียกว่า ดีไซเนอร์มืออาชีพ

การออกแบบเว็บไซด์ ยังไงให้สวยนั้นขึ้นอยู่กับว่าเรามีพื้นฐานมามากน้อยแค่ไหนถ้าหากว่าพึ่งเริ่มต้นไม่มีใครเก่งตั้งแต่เริ่ม ก็อาจจะมีพลาดบ้างไม่สวยงามมั่งแต่ถ้าหากว่าเรามีความฝึกฝนและความขยันนั้นย่อมสามารถที่จะทำให้เรานั้นก้าวหน้าฝีมือเพื่อเพิ่มระดับให้ตัวเองนั้นทำได้สวยกว่าเดิมเป็นอย่างมากซึ่งการทำเว็บนั้นอาศัยสองโปรแกรมหลักของพื้นฐานคือการใช้โปรแกรม Adobe Dreamweaver และ Adobe Photoshop ซึ่งถ้าหากเราสามารถใช้โปรแกรม Adobe Photoshop คล่องแล้วเราก็สามารถที่จะทำเว็บไซด์ให้ออกมาตามที่ใจเราต้องการได้ และวิธีที่จะทำให้สวยงามนั้นมีหลากหลายวิธีมากมายดังนี้

วิธีการออกแบบเว็บไซด์ ยังไงให้สวย

การออกแบบเว็บไซด์ให้สวยนั้นในปกติแล้วรูปลักษณะของเว็บนั้น ต้องอาศัยความสวยงามและสีสันต่างๆซึ่งข้อนี้ต้องขึ้นอยู่กับแนวของเว็บไซด์ด้วยว่าทำเว็บไซด์ในแนวไหน เป็นแนวเรียบง่าย แนวหนัง แนวเร้าใจ หรือแนวเกม ซึ่งเราต้องมีการวางแผนก่อนว่าเราจะทำเว็บไซด์ประเภทอะไร ซึ่งในส่วนใหญ่แล้วก่อนที่จะทำเราต้องมีไอเดียเป็นสิ่งที่สำคัญโดยการที่มองดูจากเว็บไซด์อื่นๆที่เป็นพวกเดียวกันแต่ไม่ได้หมายความว่าให้ Copy นะครับ

แต่ความหมายคือให้ตรวจสอบดูว่ามันสำคัญอย่างไรและมันสวยงามตามที่เราชอบไหมและเป็นแนวเราไหมและค่อยพิจารณาว่าเค้าใช้เทคนิคอะไรในการทำเว็บไซด์เว็บนี้ขึ้นมา ซึ่งถ้าหากว่าเราสามรถวิเคราะห์ได้เราก็สามารถที่จะทำเว็บไซด์ของตนเองและเริ่มพัฒนาเพื่อก้าวเดินต่อไปได้ ซึ่งในส่วนใหญ่แล้วการทำเว็บนั้นจะเซฟเป็นไฟล์ที่นมยมคือ ไฟล์ JPEG

ซึ่งไฟล์ JPEG หรือย่อมาก .JPG เป็นไฟล์ที่ให้เนื้อภาพที่ชัดเจนสวยงามแต่มีข้อเสียคือถ้าหากเราใช้พื้นหลังเป็นภาพโปร่งใสเราจะไม่สามารถทำได้กับนามสกุลไฟล์ JPEG จึงได้มีการพัฒนาและมีนามสกุล .PNG เข้ามาแทนที่ซึ่งไฟล์ .PNG นั้นมีภาพที่คมชัดและสวยงามและคงรูปลักษณะสีสันไว้พอๆกับ JPEG เลยก็ว่าได้ และจุดนี้เป็นจุดเริ่มต้นที่ดีในการสร้างไฟล์ .PNG และเริ่มพัฒนาเพื่อว่าบางปุ่มนั้นต้องการแสดง Background ต้องการทำให้มีมุมและมีลูกเล่นจึงเหมาะสมกับการใช้ ไฟล์ .PNG

และสิ่งที่สำคัญคือการกำหนดขนาดความกว้างและความสูงของเว็บไซด์ควรเผื่อไว้ให้พอดีกับเว็บไซด์แต่ขนาดความกว้างนั้นควรเป็น 1000 ในส่วน LOGO และเมนูต่างๆสามารถวัดได้เองจากขนาดและความพอเหมาะของเว็บไซด์ การออกแบบเว็บไซด์ยังไงให้สวยนั้นไม่ใช่เรื่องยากเลย