Author :: อาจารย์สุธารัตน์ ชาวนาฟาง NPRU Open Courseware more info :: http://courseware.npru.ac.th/index.php

1. บทที่ 2
หลักการออกแบบเว็บไซต์ (Web Design)
Webpage Design and Programming Workshop (7152306)
อาจารย์สุธารัตน์ ชาวนาฟาง
สาขาวิศวกรรมซอฟต์แวร์ มหาวิทยาลัยราชภัฏนครปฐม

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

3. ตัวอย่าง

4. คาศัพท์เบื้องต้นเกี่ยวกับเว็บไซต์
Home Page คาที่ใช้เรียกหน้าแรกของเว็บไซต์ เปรียบเสมือนกับเป็นสารบัญและคานา
Web Page หน้าหนึ่งๆ ของเว็บไซต์
Website หน้าเว็บเพจหลายหน้าซึ่งเชื่อมโยงกันผ่านทาง Hyperlink เปรียบเสมือนหนังสือหนึ่งเล่ม
WWW เปรียบเสมือนเป็นห้องสมุดขนาดใหญ่ที่รวบรวมข้อมูลที่มากที่สุดในโลกก็ว่าได้
HTML เป็นภาษาที่ใช้ในการพัฒนาเว็บเพจ
โปรโตคอล
HTTP
(Hypertext
Transfer
Protocol)
เป็นโปรโตคอลที่ทางานร่วมกันของข้อมูลที่ในอยู่ในรูปสื่อที่สามารถเชื่อมโยงถึงกันได้
เนื่องจากโปรโตคอล HTTP สามารถที่จะใช้ในการรับส่งข้อมูลที่เป็นข้อความ รูปภาพหรือ
ภาพเคลื่อนไหว จึงทาให้แหล่งข้อมูลส่วนใหญ่ใน WWW อนุญาตให้เข้าถึงได้โดยผ่าน
โปรโตคอล HTTP
URL ตัวบ่งบอกข้อมูลหรือที่อยู่ (Address) ของไฟล์หรือเว็บไซต์
เช่น http://www.google.co.th

5. คาศัพท์เบื้องต้นเกี่ยวกับเว็บไซต์
DNS-
Domain
Name System
หมายเลขประจาเครื่อง ซึ่งหมายเลขนี้ เรียกว่า IP โดยการที่จะจดจาหมายเลขประจา
เครื่องนั้นทาได้ยาก จึงมีวิธีการตั้งชื่อให้จดจาและใช้งานง่าย เช่น http://www.npru.ac.ac.
Web Browser โปรแกรมคอมพิวเตอร์ที่ผู้ใช้สามารถดูข้อมูลและโต้ตอบกับข้อมูลสารสนเทศ เช่น IE,
Google Chrome, Safari เป็นต้น
Web server เครื่องคอมพิวเตอร์ที่ทาหน้าที่ให้บริการข้อมูลใน www ซึ่งเก็บ Web page และโปรแกรม
จัดการบริการ
Upload เมื่อสร้าง Web page แล้วต้องส่งข้อมูลไปเก็บไว้ที่ Web Server โดยอาศัยโปรแกรม FTP
เป็นต้น
Search
engine
เครื่องมือหรือโปรแกรมในการค้นหาเว็บต่างๆ เช่น google.com, yahoo.com, bing.com
เป็นต้น

6. ลักษณะเด่นของการนาเสนอข้อมูลเว็บเพจ
The Web is a Graphical HyperText
Information System
The Web is Cross-Platform.
The Web is distributed
The Web is interactive

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

8. แนะนาการออกแบบเว็บไซต์
2. เป้ าหมายของเว็บไซต์
เว็บไซต์แต่ละประเภทต่างมีเป้ าหมายและลักษณะที่แตกต่างกัน เช่น
• เว็บไซต์ที่เป็น Search Engine
• เว็บเพื่อความบันเทิงหรือเกี่ยวข้องกับศิลปะ
• เว็บไซต์ขององค์กรธุรกิจที่มีเป้ าหมายเพื่อขายสินค้าหรือ
บริการ

9. แนะนาการออกแบบเว็บไซต์
3. สิ่งที่ผู้ใช้ต้องการจากเว็บ
• การออกแบบเว็บไซต์เพื่อดึงดูดผู้ใช้งานให้ได้นานที่สุด ด้วยการสร้าง
สิ่งที่น่าสนใจเพื่อดึงดูดผู้ใช้โดยทั่วไปแล้วสิ่งที่ผู้ใช้คาดหวังจากการเข้า
ชมเว็บไซต์หนึ่ง ได้แก่ ข้อมูลและการใช้งานที่เป็นประโยชน์, ข่าวและ
ข้อมูลที่น่าสนใจ, การตอบสนองต่อผู้ใช้, ความบันเทิง และของฟรี

10. แนะนาการออกแบบเว็บไซต์
4. ข้อมูลหลักที่ควรมีอยู่ในเว็บไซต์
• การออกแบบเว็บไซต์ให้มีข้อมูลที่ผู้ใช้ต้องการ ซึ่งข้อมูลต่อไปนี้ เป็นสิ่งที่ผู้ใช้
ส่วนใหญ่คาดหวังจะได้รับเมื่อเข้าไปชมเว็บไซต์ เช่น
o ข้อมูลเกี่ยวกับเจ้าของเว็บไซต์ (บริษัท องค์กร หน่วยงาน บุคคล)
o รายละเอียดของเนื้ อหา (ตามจุดประสงค์ของเว็บ เช่น องค์ความรู้ ผลิตภัณฑ์)
o ข่าวความคืบหน้าและข่าวจากสื่อมวลชนที่เกี่ยวข้อง น่าสนใจ
o คาถามยอดนิยมของผู้ชม หรือที่เกี่ยวข้องกับจุดประสงค์ของเว็บไซต์
o ข้อมูลในการติดต่อกับผู้จัดทา หน่วยงาน องค์กร เจ้าของเว็บไซต์

11. องค์ประกอบของการออกแบบเว็บไซต์
1. ความเรียบง่าย (Simplicity)
2. ความสม่าเสมอ (Consistency)
3. ความเป็นเอกลักษณ์ (Identity)
4. เนื้ อหา (Useful Content)
5. ระบบเนวิเกชั่น (User-Friendly Navigation)
6. คุณภาพของสิ่งที่ปรากฏให้เห็นในเว็บไซต์ (Visual Appeal)
7. การใช้งานอย่างไม่จากัด (Compatibility)
8. ความคงที่ในการออกแบบ (Design Stability)
9. ความคงที่ของการทางาน (Function Stability)

12. หลักการออกแบบเว็บไซต์
กาหนดโครงสร้างของเว็บไซต์
การอัพโหลดเว็บไซต์
การสร้างเว็บเพจแต่ละหน้า
กาหนดการเชื่อมโยงระหว่างเว็บเพจ
การออกแบบเว็บเพจแต่ละหน้า
การลงทะเบียนขอพื้นที่เว็บไซต์
1
2
3
4
5
6

13. หลักการออกแบบเว็บไซต์
1. กาหนดโครงสร้างของเว็บไซต์

14. หลักการออกแบบเว็บไซต์
1. กาหนดโครงสร้างของเว็บไซต์

15. หลักการออกแบบเว็บไซต์
2. กาหนดการเชื่อมโยงระหว่างเว็บเพจ
 การกาหนดการเชื่อมโยงให้เว็บเพจแต่ละหน้าเชื่อมโยงถึงกัน
เพื่อให้กลับไปกลับมาระหว่างหน้าต่าง ๆ ได้
 แต่ละไฟล์ที่มีการเชื่อมโยงสัมพันธ์กัน

16. หลักการออกแบบเว็บไซต์
2. กาหนดการเชื่อมโยงระหว่างเว็บเพจ

17. หลักการออกแบบเว็บไซต์
3. การออกแบบเว็บเพจแต่ละหน้า
 ในขั้นตอนการออกแบบนี้ อาจเรียกว่าการออกแบบเลย์เอาท์
(Lay Out)
 สามารถทาได้โดยการเขียนลงในกระดาษ หรือใช้โปรแกรม
คอมพิวเตอร์ช่วยในการออกแบบก็ได้ดังภาพ

19. หลักการออกแบบเว็บไซต์
4. การสร้างเว็บเพจแต่ละหน้า
สร้างโดยใช้ภาษา html หรืออาจใช้โปรแกรมสาเร็จรูป เช่น
Macromedia Dreamweaver หรือโปรแกรมสาเร็จรูปอื่น ๆ

20. หลักการออกแบบเว็บไซต์
5. การลงทะเบียนขอพื้นที่เว็บไซต์
เป็นการเผยแพร่เว็บไซต์ที่สร้างเสร็จแล้วเข้าสู่ระบบเครือข่าย
อินเทอร์เน็ต เพื่อให้บุคคลอื่นๆ สามารถเข้าชมเว็บไซต์ของเราได้
วิธีการก็คือนาเว็บไซต์ที่เราสร้างขึ้ นไปไว้บนพื้ นที่ที่ให้บริการ
(Web Hosting) ซึ่งมีพื้นที่ที่ให้บริการฟรีและแบบที่ต้องเสีย
ค่าบริการ

21. หลักการออกแบบเว็บไซต์
5. การลงทะเบียนขอพื้นที่เว็บไซต์

22. หลักการออกแบบเว็บไซต์
6. การอัพโหลดเว็บไซต์
 การคัดลอกข้อมูลจากเครื่องเราไปเก็บไว้ใน
เครื่อง Server เรียกว่า Upload หลังจากสร้าง
เว็บไซต์และลงทะเบียนขอพื้นที่สาหรับฝาก
เว็บไซต์แล้วให้ใช้โปรแกรมสาหรับอัปโหลด
(Upload)
 เช่น โปรแกรม CuteFTP, WinSCP, WS_FTP
เพื่อให้คนทั่วโลกสามารถเข้าชมเว็บไซต์ของ
เราผ่านทางระบบเครือข่ายอินเทอร์เน็ตได้

23. องค์ประกอบภายในเว็บเพจ
ข้อความ (Text) ตัวอักษร อักขระ สัญลักษณ์
กราฟิก (Graphic) รูปภาพ ลายเส้น ลายพื้นต่าง ๆ ภายในเว็บเพจ
สื่อประสม (Multimedia) ภาพเคลื่อนไหวและเสียงต่าง ๆ
การเชื่อมโยง (Link) เป็นส่วนที่ใช้ในการเชื่อมโยงไปยังเว็บเพจอื่นๆ ทั้งที่เป็นเว็บ
เพจของตนเอง หรือเว็บเพจของผู้อื่น
ฟอร์ม (Form) เป็นแบบฟอร์มที่ให้ผู้เข้าเยี่ยมชมเว็บเพจได้กรอกข้อมูล
เฟรม (Frame) คือการแบ่งจอภาพออกเป็นส่วน ๆ โดยในแต่ละส่วนนั้นจะ
แสดงข้อมูลที่แตกต่างกันกันออกไป
สคริปต์ (Script) เป็นสิ่งที่แสดงให้เห็นถึงปฏิกิริยาโต้ตอบกันของผู้ใช้งานกับ
ผู้สร้างเว็บเพจอันได้แก่สมุดเยี่ยม และเว็บบอร์ด เป็นต้น

24. การออกแบบโครงสร้างเว็บไซต์ (Flow Chart)
คือ การวางแผนการจัดลาดับ เนื้ อหาสาระของเว็บไซต์ ออกเป็น
หมวดหมู่ เพื่อจัดทาเป็นโครงสร้างในการจัดวางหน้าเว็บเพจทั้งหมด
เปรียบเสมือนแผนที่ที่ทาให้เห็นโครงสร้างทั้งหมดของเว็บไซต์
ช่วยในนักออกแบบเว็บไซต์ไม่ให้หลงทาง การจัดโครงสร้างของ
เว็บไซต์
มีจุดมุ่งหมายสาคัญคือ การที่จะทาให้ผู้เข้าเยี่ยมชมสามารถค้นหา
ข้อมูลในเว็บเพจได้อย่างเป็นระบบ

25. การออกแบบโครงสร้างเว็บไซต์ (Flow Chart)
1. หลักในการออกแบบโครงสร้างเว็บไซต์ ควรพิจารณาดังนี้
1.1 กาหนดวัตถุประสงค์
1.2 ศึกษาคุณลักษณะของผู้ที่เข้ามาใช้ว่ากลุ่มเป้ าหมายใด
1.3 วางแผนเกี่ยวกับการจัดรูปแบบโครงสร้าง ต้องมีการจัดโครงสร้างหรือจัด
ระเบียบข้อมูลที่ชัดเจน ควรออกแบบให้มีลักษณะที่ชัดเจนแยกย่อยออกเป็น
ส่วนต่างๆ จัดหมวดหมู่ในเรื่องที่สัมพันธ์กัน
1.4 กาหนดรายละเอียดให้กับโครงสร้าง เช่น ผู้ใช้ควรทาอะไรบ้าง จานวนหน้า
ควรมีเท่าใด มีการเชื่อมโยงมากน้อยเพียงใด
1.5 สร้างเว็บไซต์แล้วนาไปทดลองเพื่อหาข้อผิดพลาดและทาการแก้ไข
ปรับปรุง แล้วจึงนาเข้าสู่เครือข่ายอินเทอร์เน็ต

26. การออกแบบโครงสร้างเว็บไซต์ (Flow Chart)
2.1 เว็บที่มีโครงสร้างแบบเรียงลาดับ (Sequential Structure)
มีลักษณะเป็นเรื่องราวตามลาดับของเวลา
เช่น การเรียงลาดับตามสารานุกรม
เหมาะกับเว็บไซต์ที่มีขนาดเล็ก เนื้ อหาไม่ซับซ้อน
ใช้การลิงก์ไปทีละหน้า ทิศทางของการเข้าสู่เนื้ อหาภายในเว็บจะเป็น
การดาเนินเรื่องในลักษณะเส้นตรง โดยมีปุ่มเดินหน้า-ถอย
ข้อเสียคือ ผู้ใช้ไม่สามารถกาหนดทิศทางการเข้าสู่เนื้ อหาของตนเองได้
ทาให้เสียเวลาเข้าสู่เนื้ อหา

27. การออกแบบโครงสร้างเว็บไซต์ (Flow Chart)
2.2 เว็บที่มีโครงสร้างแบบลาดับขั้น (Hierarchical Structure)
เป็นวิธีที่ดีที่สุดวิธี เหมาะสาหรับโครงสร้างที่มีความซับซ้อนของข้อมูล
มีจุดเริ่มต้นที่จุดร่วมจุดเดียว นั่นคือ โฮมเพจและเชื่อมโยงไปสู่เนื้ อหา
ในลักษณะเป็นลาดับจากบนลงล่างเป็นกิ่งก้านแตกแขนงต่อเนื่อง
เปรียบได้กับต้นไม้กลับหัว

28. การออกแบบโครงสร้างเว็บไซต์ (Flow Chart)
2.3 เว็บที่มีโครงสร้างแบบตาราง (Grid Structure)
การออกแบบเพิ่มความยืดหยุ่นให้แก่การเข้าสู่เนื้ อหาของผู้ใช้
เหมาะแก่การแสดงให้เห็นความสัมพันธ์กันของเนื้ อหา การเข้าสู่เนื้ อหาของ
ผู้ใช้จะไม่เป็นลักษณะเชิงเส้นตรง เนื่องจากผู้ใช้สามารถเปลี่ยนทิศทางการ
เข้าสู่เนื้ อหาของตนเองได้

29. การออกแบบโครงสร้างเว็บไซต์ (Flow Chart)
2.4 เว็บที่มีโครงสร้างแบบใยแมงมุม (Web Structure)
 เป็นโครงสร้างที่มีความยืดหยุ่นมากที่สุด
 ทุกหน้าในเว็บสามารถจะเชื่อมโยงไปถึงกันได้หมด เป็นการสร้าง
รูปแบบการเข้าสู่เนื้ อหาที่เป็นอิสระ
 การเชื่อมโยงเนื้ อหาแต่ละหน้าในลักษณะของไฮเปอร์เท็กซ์หรือ
ไฮเปอร์มีเดีย โครงสร้างลักษณะนี้ จัดเป็นรูปแบบที่ไม่มีโครงสร้างที่
แน่นนอนตายตัว (Unstructured)

30. ข้อแนะนาในการทาเว็บไซต์
1. รูปแบบหน้าของเว็บไซต์
ส่วนใหญ่จะมีโครงสร้างที่ยอมรับว่าเป็นมาตรฐานอยู่ 3 แบบ คือ

31. ข้อแนะนาในการทาเว็บไซต์
2. การจัดรูปแบบเอกสารเว็บเพจ (Page Design)
 ส่วนหัว (Page Header)
อยู่ตอนบนสุดของหน้า เป็นบริเวณที่สาคัญที่สุดเนื่องจากผู้ใช้จะมองเห็นก่อน
บริเวณอื่น ส่วนใหญ่นิยมใช้วางเครื่องหมายสัญลักษณ์ โลโก้ของเว็บไซต์ ลิงค์
สาหรับการติดต่อ ระบบนาทาง (Navigation) เป็นต้น

32. ข้อแนะนาในการทาเว็บไซต์
2. การจัดรูปแบบเอกสารเว็บเพจ (Page Design)
ส่วนของเนื้ อหา (Page Body) อยู่ตอนกลางหน้า เป็นส่วนที่จะแสดง
รายละเอียดของเนื้ อหาแต่ละเรื่องสัมพันธ์กับเมนูซึ่งอาจประกอบไปด้วย
ข้อความ, ภาพกราฟิก, ตารางข้อมูลและอื่นๆ
ส่วนท้าย (Page Footer) อยู่ด้านล่างสุดของหน้า ส่วนใหญ่จะนิยมใช้วาง
ระบบนาทางภาพในเว็บไซต์แบบที่เป็นข้อความง่าย ๆ นอกจากนี้ อาจจะ
มีชื่อของเจ้าของข้อความลิขสิทธิ์ และอีเมลล์แอดเดรสของผู้ดูแลเว็บไซต์

33. ข้อแนะนาในการทาเว็บไซต์
3. ขนาดเว็บเพจ
ขนาดของเว็บเพจที่ใช้กันทั่วไปจะมี 3 ขนาดด้วยคือ
ขนาด 640 x 489 Pixel ความละเอียดต่า
ขนาด 800 x 600 Pixel ความละเอียดปานกลางมาตรฐานทั่วไป
ขนาด 1024 x 768 Pixel ความละเอียดสูง

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

35. ข้อแนะนาในการทาเว็บไซต์
6. ความเร็วในการโหลดเว็บไซต์
ปัจจัยที่จะกระทบต่อความเร็ว ได้แก่ ขนาดของรูปภาพ, จานวนของรูปภาพ,
ปริมาณของตัวอักษรที่อยู่บนหน้านั้นๆ และความเร็วในการโหลดเว็บไซต์อาจอยู่
ที่ Server ที่เว็บไซต์นั้น ๆ เป็นต้น
7. ความง่ายในการค้นหาข้อมูล
ปัจจัยหลักนั้นขึ้นอยู่กับโครงสร้างของเว็บไซต์ตั้งแต่ตอนแรก และปัจจัยอื่นๆ อีก
เช่น Navigator bar ในทุกๆ หน้าของเว็บไซต์ หรือการให้บริการ Search และ
Sitemap ได้ก็จะเป็นสิ่งที่จะช่วยให้ค้นหาข้อมูลได้ง่ายยิ่งขึ้น
8. สามารถดูเว็บไซต์ได้ในหลายบราวเซอร์
การทาเว็บไซต์ควรจะทาเพื่อให้สามารถดูได้จากทุก ๆ Version ของ Software
ต่าง ๆ

36. ข้อแนะนาในการทาเว็บไซต์
9. ตัวอักษร, ฉากหลังและสี
รูปแบบที่นิยมใช้คือ ตัวอักษรสีดาบนฉากหลังขาว
10. รูปภาพ
ไฟล์ที่ใช้ คือ GIF หรือ JPEG และควรจะมีการคะเนขนาดของรูปภาพ
ที่จะใส่บนเว็บไซต์ก่อนเพื่อจะได้ใช้ขนาด และอัตราส่วนที่พึงพอใจมากที่สุด
11. ส่วนประกอบที่ขาดไม่ได้ของเว็บไซต์
เช่น หัวข้อที่เกี่ยวกับผู้จัดทาอาจเป็นประวัติความเป็นมา และ/หรือข้อมูล
ปัจจุบัน, แถบนาทาง, Search, Sitemap, ข้อเสนอแนะ และคาถามที่ถูกถามบ่อย
เป็นต้น

37. ข้อผิดพลาดในการออกแบบเว็บไซต์
1. ใช้โครงสร้างหน้าเว็บเป็นระบบเฟรม การใช้กรอบ (Frame)
2. ใช้เทคโนโลยีขั้นสูงโดยไม่จาเป็น
3. ใช้ตัวหนังสือหรือภาพที่เคลื่อนไหวตลอดเวลา
4. มีที่อยู่เว็บไซต์ที่ซับซ้อน (URL) ยากต่อการจดจา/พิมพ์
5. ไม่มีการแสดงชื่อและที่อยู่ของเว็บไซต์ในหน้าเว็บเพจ
6. มีความยาวของหน้ามากเกินไป
7. ขาดระบบเนวิเกชันที่มีประสิทธิภาพ
8. ใช้สีของลิงก์ไม่เหมาะสม
9. ข้อมูลเก่าไม่มีการปรับปรุงให้ทันสมัย
10. เว็บเพจแสดงผลช้า