2. การพัฒนาเว็บไซต์ Website Development
ผู้จัดทำ
ปิยะนันท์ เสนำวงค์
ประวรรณญำ ภูโค
พรพัชรำ ทองทำ
อำนวยพร รำชำชัย
ผู้สอน
อำจำรย์ปวริศ สำรมะโน
Web Programming for Education
สำขำคอมพิวเตอร์ศึกษำ
คณะครุศำสตร์
มหำวิทยำลัยรำชภัฏมหำสำรคำม

3. กลุ่ม 6
ผู้จัดทา
นายปิยะนันท์ เสนาวงค์ ID533410080438
นางสาวประวรรณญา ภูโค ID 533410080413
นางสาวพรพัชรา ทองทา ID 533410080416
นางสาวอานวยพร ราชาชัย ID 533410080434
คอมพิวเตอร์ศึกษา คณะครุศาสตร์
มหาวิทยาลัยราชภัฏมหาสารคาม

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

5. บรรณานุกรม
ชลิตำ ไวรักษ์. กำรพัฒนำเว็บไซต์เพื่อประชำสัมพันธ์องค์กร :
กรณีศึกษำสโมสรทำร์ซำน ฮัท เพนท์ บอล เชียงใหม่.
วิทยำนิพนธ์ศิลปศำสตรมหำบัณฑิต.มหำวิทยำลัยเชียงใหม่
,กันยำยน 2551.
เติมโชค มำนิตสกุล. กำรพัฒนำเว็บไซต์; พำณิชย์อิเล็กทรอนิกส์;
แ เว็บไซต์ -- กำรออกแบบ. วิทยำนิพนธ์ศิลปศำสตรมหำ
บั บัณฑิต. มหำวิทยำลัยเชียงใหม่ , 2554
Padoungkiat.(2554).ทฤษฎีกำรออกแบบเว็บไซต์.
ค้ ค้นเมื่อ 27 กรกฎำคม 2556 จำก
http://patamweb.blogspot.com.

6. สารบัญ
ควำมหมำยของเว็บไซต์……………………………………………….1
หลักกำรออกแบบเว็บไซต์…………………………………………….2
องค์ประกอบกำรออกแบบเว็บไซต์…………………………………4
กำรออกแบบพัฒนำเว็บไซต์………………………………………….13
- กำรออกแบบหน้ำเว็บไซต์…………………………….13
- ข้อคำนึงในกำรออกแบเว็บไซต์…………………..…14
- กำรออกแบบโคร้ำงสร้ำงเว็บไซต์…………………....16
- รูปแบบของโครงสร้ำงเว็บไซต์…………………….….17
- ทฤษฎีกำรใช้สี……………………………………………..18
ประเภทของเว็บไซต์……………………………………………………22
ส่วนประกอบของเว็บไซต์…………………………………………….29
กำรประเมินเว็บไซต์……………………………………………………37
สรุปผล……………………………………………………………………..38
บรรณำนุกรม

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

8. 1
การพัฒนาเว็บไซต์
ความหมายของเว็บไซต์
เว็บไซต์ (อังกฤษ: website, web site, Web site)
หมำยถึง หน้ำเว็บเพจหลำยหน้ำ ซึ่งเชื่อมโยงกันผ่ำนทำงไฮเปอร์
ลิงก์ ส่วนใหญ่จัดทำขึ้นเพื่อนำเสนอข้อมูลผ่ำนคอมพิวเตอร์ โดย
ถูกจัดเก็บไว้ในเวิลด์ไวด์เว็บ หน้ำแรกของเว็บไซต์ที่เก็บไว้ที่ชื่อ
หลักจะเรียกว่ำ โฮมเพจ เว็บไซต์โดยทั่วไปจะให้บริกำรต่อผู้ใช้ฟรี
แต่ในขณะเดียวกันบำงเว็บไซต์จำเป็นต้องมีกำรสมัครสมำชิกและ
เสียค่ำบริกำรเพื่อที่จะดูข้อมูล ในเว็บไซต์นั้น ซึ่งได้แก่ข้อมูลทำง
วิชำกำร ข้อมูลตลำดหลักทรัพย์ หรือข้อมูลสื่อต่ำงๆ ผู้ทำเว็บไซต์
มีหลำกหลำยระดับ ตั้งแต่สร้ำงเว็บไซต์ส่วนตัว จนถึงระดับ
เว็บไซต์สำหรับธุรกิจหรือองค์กรต่ำงๆ กำรเรียกดูเว็บไซต์โดย
นิยมเรียกดูผ่ำนซอฟต์แวร์ในลักษณะของเว็บเบรำว์เซอร์

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

10. 37
การประเมินเว็บไซต์
แนวกำรประเมินเว็บไซต์
1. หน้ำที่ของเว็บไซต์ (Authority) เกี่ยวกับหน้ำที่ของ
เว็บที่สร้ำงขึ้นนั้นต้องดูว่ำใครหรือผู้ใช้เว็บนี้ อะไรคือควำมถูกต้อง
เหมำะสม ชอบธรรม ระหว่ำงควำมสัมพันธ์ของเรื่อง และ กำร
รับประกันคุณภำพของเว็บเพจนี้ที่มีต่อผู้ชม
2. ควำมถูกต้อง (Accuracy) แหล่งข้อมูลและ
ข้อเท็จจริงที่นำมำสร้ำงเว็บสำมำรถแยกแยะเป็นประเด็นรำยกำร
ต่ำงๆ สำมำรถตรวจสอบย้อนหลังได้หรือไม่

11. 36
3. จุดประสงค์ (Objective) จุดมุ่งหมำยในกำรสร้ำง
ชัดเจนและบอกควำมสัมพันธ์ของสิ่งที่ต้องกำรนั้นชัดเจน
4. ควำมเป็นปัจจุบัน (Currency) เว็บเพจที่สร้ำงขึ้นนั้น
ต้องแสดงวันที่ที่เป็นปัจจุบันด้วย เช่น บอกว่ำสร้ำงเมื่อใด และมี
กำรแก้ไขครั้งหลังสุดเมื่อใด
5. ควำมครอบคลุม (Coverage) กำรสร้ำงเว็บไซต์ต้อง
ให้ตรงกับจุดสนใจ หัวเรื่องมีควำมชัดเจน เหมำะกับรูปภำพ
โครงเรื่องและเนื้อหำสำระวิธีกำรค้นหำข้อมูลในเว็บไซต์ชัดเจน

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

13. 4
องค์ประกอบของการออกแบบเว็บไซต์
กำรออกแบบเว็บไซต์ที่มีประสิทธิภำพนั้นต้องคำนึงถึง
องค์ประกอบสำคัญดังต่อไปนี้
1. ควำมเรียบง่ำย (Simplicity)
หมำยถึง กำรจำกัดองค์ประกอบเสริมให้เหลือเฉพำะ
องค์ประกอบหลัก กล่ำวคือในกำรสื่อสำรเนื้อหำกับผู้ใช้นั้น เรำ
ต้องเลือกเสนอสิ่งที่เรำต้องกำรนำเสนอจริง ๆ ออกมำในส่วนของ
กรำฟิก สีสัน ตัวอักษรและภำพเคลื่อนไหว ต้องเลือกให้
พอเหมำะ ถ้ำหำกมีมำกเกินไปจะรบกวนสำยตำและสร้ำงควำม
คำรำญต่อผู้ใช้ตัวอย่ำงเว็บไซต์ที่ได้รับกำรออกแบบที่ดี ได้แก่
เว็บไซต์ของบริษัทใหญ่ ๆ อย่ำงเช่น Apple Adobe Microsoft
หรือ Kokia ที่มีกำรออกแบบเว็บไซต์ในรูปแบบที่เรียบง่ำย ไม่
ซับซ้อน และใช้งำนอย่ำงสะดวก

14. 35
Footer
คือส่วนล่ำงสุดของหน้ำเว็บไซต์ ส่วนใหญ่จะเก็บลิงค์
ต่ำงๆเอำไว้ หรือเป็นเนื้อหำที่เกี่ยวกับเว็บไซต์เช่นลิขสิทธิ์ต่ำงๆ
ถำมว่ำจำเป็นต้องมีหรือไม่ บอกได้ว่ำจำเป็นอย่ำงยิ่ง footer จะ
เป็นตัวบอกผู้ชมว่ำส่วนนี้คือล่ำงสุดของหน้ำที่กำลังแสดงอยู่แล้ว
นะ ไม่มีเนื้อหำเพิ่มเติมแล้ว ทำไม่ต้องบอกเนื่องจำกกำรแสดง
เว็บไซต์ในบำงครั้งนั้นหน้ำนั้นอำจโหลดได้ไม่หมด อำจแสดงได้
แค่เนื้อหำภำยใน หำกเรำออกแบบให้มี footer ตั้งแต่แรก
ผู้ใช้งำนก็จะรู้ได้ทันทีว่ำหน้ำที่แสดงผลนี้อำจแสดงได้ไม่สมบูรณ์
เพรำะยังไม่เห็น footer และยังมีผลต่อภำพลักษณ์ของเว็บไซต์
โดยตรง

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

16. 5
2. ควำมสม่ำเสมอ ( Consistency)
หมำยถึง กำรสร้ำงควำมสม่ำเสมอให้เกิดขึ้นตลอดทั้ง
เว็บไซต์ โดยอำจเลือกใช้รูปแบบเดียวกันตลอดทั้งเว็บไซต์ก็ได้
เพรำะถ้ำหำกว่ำแต่ละหน้ำในเว็บไซต์นั้นมีควำมแตกต่ำงกันมำก
จนเกินไป อำจทำให้ผู้ใช้เกิดควำมสับสนและไม่แน่ใจว่ำกำลังอยู่
ในเว็บไซต์เดิมหรือไม่ เพรำะฉะนั้นกำรออกแบบเว็บไซต์ในแต่ละ
หน้ำควรที่จะมีรูปแบบ สไตล์ของกรำฟิก ระบบเนวิเกชั่น
(Navigation) และโทนสีที่มีควำมคล้ำยคลึงกันตลอดทั้งเว็บไซต์

17. 6
3. ควำมเป็นเอกลักษณ์ (Identity)
ในกำรออกแบบเว็บไซต์ต้องคำนึงถึงลักษณะขององค์กร
เป็นหลัก เนื่องจำกเว็บไซต์จะสะท้อนถึงเอกลักษณ์และลักษณะ
ขององค์กร กำรเลือกใช้ตัวอักษร ชุดสี รูปภำพหรือกรำฟิก จะมี
ผลต่อรูปแบบของเว็บไซต์เป็นอย่ำงมำก ตัวอย่ำงเช่น ถ้ำเรำต้อง
ออกแบบเว็บไซต์ของธนำคำรแต่เรำกลับเลือกสีสันและกรำฟิก
มำกมำย

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

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

20. 7
4. เนื้อหำ (Useful Content)
ถือเป็นสิ่งสำคัญที่สุดในเว็บไซต์ เนื้อหำในเว็บไซต์ต้อง
สมบูรณ์และได้รับกำรปรับปรุงพัฒนำให้ทันสมัยอยู่เสมอ
ผู้พัฒนำต้องเตรียมข้อมูลและเนื้อหำที่ผู้ใช้ต้องกำรให้ถูกต้องและ
สมบูรณ์ เนื้อหำที่สำคัญที่สุดคือเนื้อหำที่ทีมผู้พัฒนำสร้ำงสรรค์
ขึ้นมำเอง และไม่ไปซ้ำกับเว็บอื่น เพรำะจะถือเป็นสิ่งที่ดึงดูดผู้ใช้
ให้เข้ำมำเว็บไซต์ได้เสมอ แต่ถ้ำเป็นเว็บที่ลิงค์ข้อมูลจำกเว็บอื่น ๆ
มำเมื่อใดก็ตำมที่ผู้ใช้ทรำบว่ำ ข้อมูลนั้นมำจำกเว็บใด ผู้ใช้ก็ไม่
จำเป็นต้องกลับมำใช้งำนลิงค์เหล่ำนั้นอีก

21. 8
5. ระบบเนวิเกชั่น (User-Friendly Navigation)
เป็นส่วนประกอบที่มีควำมสำคัญต่อเว็บไซต์มำก
เพรำะจะช่วยไม่ให้ผู้ใช้เกิดควำมสับสนระหว่ำงดูเว็บไซต์
ระบบเนวิเกชั่นจึงเปรียบเสมือนป้ำยบอกทำง ดังนั้นกำร
ออกแบบเนวิเกชั่น จึงควรให้เข้ำใจง่ำย ใช้งำนได้สะดวก ถ้ำมีกำร
ใช้กรำฟิกก็ควรสื่อควำมหมำย ตำแหน่งของกำรวำงเนวิเกชั่นก็
ควรวำงให้สม่ำเสมอ เช่น อยู่ตำแหน่งบนสุดของทุกหน้ำซึ่งถ้ำ
จะให้ดี

22. 31
Containing block
โดยปรกติเรำจะเขียน <div> หรือ <table> ต่อจำก
<body> เพื่อเอำไว้เก็บเนื้อหำทั้งหมดของเว็บไซต์ก่อน เพื่อ
เอำไว้เป็นกล่องในกำรเก็บเนื้อหำทั้งหมด โดยกล่องของเรำจะมี
ข้อดีอยู่ตรงที่ สำมำรถทำให้ปรับเปลี่ยนขนำดในกำรแสดงผลของ
เนื้อหำได้ หรือตำแหน่งกำรแสดงผลของเว็บไซต์ได้เช่น จัดกลำง
ชิดซ้ำย หรือชิดขวำ หำกนึกภำพไม่ออก ลองเขียนเว็บไซต์โดย
เริ่มที่ใส่ตัวหนังสือลงไปก่อน จำกนั้นหำกต้องกำรจัดตัวหนังสือ
เหล่ำนั้นจะทำได้ยำกมำก ดังนั้นทุกครั้งที่ออกแบบเว็บไซต์อย่ำง
ลืมที่จะสร้ำง containing block เอำไว้ใส่เนื้อหำทั้งหมดก่อน
เพื่อควำมสะดวกของเรำเอง

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

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

25. 10
7. ควำมสะดวกของกำรใช้ในสภำพต่ำง ๆ
(Compatibility)
กำรใช้งำนของเว็บไซต์นั้นไม่ควรมีขอบจำกัด กล่ำวคือ
ต้องสำมำรถใช้งำนได้ดีในสภำพแวดล้อมที่หลำกหลำย ไม่มีกำร
บังคับให้ผู้ใช้ต้องติดตั้งโปรแกรมอื่นใดเพิ่มเติม นอกเหนือจำก
เว็บบรำวเซอร์ ควรเป็นเว็บที่แสดงผลได้ดีในทุกระบบปฏิบัติกำร
สำมำรถแสดงผลได้ในทุกควำมละเอียดหน้ำจอ ซึ่งหำกเป็น
เว็บไซต์ที่มีผู้ใช้บริกำรมำกและกลุ่มเป้ำหมำยหลำกหลำยควรให้
ควำมสำคัญกับเรื่องนี้ให้มำก

26. 29
ส่วนประกอบของเว็บไซต์
สำหรับคนที่เริ่มต้นออกแบบเว็บไซต์ในครั้งแรกไม่รู้ว่ำ
จะเริ่มอย่ำงไรดี บทควำมนี้จะแนะนำวิธีกำรในกำรออกแบบ
เว็บไซต์ที่เว็บทั่วไปควรมี ดังรูปที่เห็นด้ำนบนเป็นโครงสร้ำงของ
เว็บไซต์โดยจะมีส่วนหลักๆอยู่ด้วยกันทั้งหมด 6 ส่วนดังนี้

27. 28
7. เว็บไซต์ที่จากัดเฉพาะสมาชิก
(Regis rational website)
เป็นเว็บไซต์ที่บริกำรเฉพำะสมำชิกเท่ำนั้น ผู้ที่จะใช้ต้อง
ลงทะเบียนตำมรำคำที่กำหนดโดยบัตรเครดิต หรือผ่ำนธนำคำร
ผู้ให้บริกำรจึงจะให้หมำยเลขสมำชิกและรหัสผ่ำน แต่กำรขำย
สินค้ำหรือบริกำรใดๆ ของเว็บไซต์เหล่ำนี้จะเชิญชวนผู้ที่สนใจ
โดยมีตัวอย่ำงสินค้ำหรือบริกำรให้ศึกษำบำงส่วนจนพอใจด้วย

28. 11
8. ควำมคงที่ในกำรออกแบบ (Design Stability)
ถ้ำต้องกำรให้ผู้ใช้งำนรู้สึกว่ำเว็บไซต์มีคุณภำพ ถูกต้อง
และเชื่อถือได้ ควรให้ควำมสำคัญกับกำรออกแบบเว็บไซต์เป็น
อย่ำงมำก ต้องออกแบบวำงแผนและเรียบเรียงเนื้อหำอย่ำง
รอบคอบ ถ้ำเว็บที่จัดทำขึ้นอย่ำงลวก ๆ ไม่มีมำตรฐำนกำร
ออกแบบและระบบกำรจัดกำรข้อมูล ถ้ำมีปัญหำมำกขึ้นอำจ
ส่งผลให้เกิดปัญหำและทำให้ผู้ใช้หมดควำมเชื่อถือ

29. 12
9. ควำมคงที่ของกำรทำงำน (Function Stability)
ระบบกำรทำงำนต่ำง ๆ ในเว็บไซต์ควรมีควำมถูกต้อง
แน่นอน ซึ่งต้องได้รับกำรออกแบบสร้ำงสรรค์และตรวจสอบอยู่
เสมอ ตัวอย่ำงเช่น ลิงค์ต่ำง ๆ ในเว็บไซต์ ต้องตรวจสอบว่ำยัง
สำมำรถลิงค์ข้อมูลได้ถูกต้องหรือไม่ เพรำะเว็บไซต์อื่นอำจมีกำร
เปลี่ยนแปลงได้ตลอดเวลำ ปัญหำที่เกิดจำกลิงค์ ก็คือ ลิงค์ขำด
ซึ่งพบได้บ่อยเป็นปัญหำที่สร้ำงควำมรำคำญกับผู้ใช้เป็นอย่ำงมำก

30. 27
6. เว็บไซต์เพื่อการสอน (Instructional website)
เป็นเว็บที่สร้ำงขึ้นเป็นกำรสอนโดยเฉพำะเป็นรำยวิชำ (Course)
อำจแยกย่อยเป็นหัวเรื่องเรื่องย่อยๆ ก็ได้สำหรับเว็บไซต์ประเภท
นี้จะจำกัดผู้ใช้เฉพำะรำย

31. 26
5. เว็บไซต์ที่สร้างขึ้นเพื่อชักชวนหรือโฆษณาชวนเชื่อ
(Persuasive website)
เป็นเว็บที่เชิญชวนหรือชักนำให้เห็นคล้อยตำมในเรื่องที่
ผู้สร้ำงต้องกำร

32. 13
การออกแบบและพัฒนาเว็บไซต์
ออกแบบหน้าเว็บไซต์ (Page Design)
หน้ำเว็บเป็นสิ่งแรกที่ผู้ใช้จะได้เห็นขณะที่เปิดเข้ำสู่
เว็บไซต์ และยังเป็นสิ่งแรกที่แสดงถึงประสิทธิภำพในกำร
ออกแบบเว็บไซต์อีกด้วย หน้ำเว็บจึงเป็นสิ่งสำคัญมำก เพรำะ
เป็นสื่อกลำงให้ผู้ชมสำมำรถใช้ประโยชน์จำกข้อมูลของระบบงำน
ของเว็บไซต์นั้นได้ โดยปกติ
โดยมีเป้ำหมำยสำคัญเพื่อกำรสื่อควำมหมำยที่ชัดเจน
และน่ำสนใจ บนพื้นฐำนของควำมเรียบง่ำยและควำมหน้ำเว็บจะ
ประกอบด้วย รูปภำพ ตัวอักษร สีพื้น ระบบเนวิเกชั่น และ
องค์ประกอบอื่น ๆ ที่ช่วยสื่อควำมหมำยของเนื้อหำและอำนวย
ควำมสะดวกต่อกำรใช้งำน
หลักสำคัญในกำรออกแบบหน้ำเว็บก็คือ กำรใช้รูปภำพ
และองค์ประกอบต่ำง ๆ ร่วมกันเพื่อสื่อควำมหมำย เกี่ยวกับ
เนื้อหำหรือลักษณะสำคัญของเว็บไซต์ สะดวกของผู้ใช้

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

34. 25
4. เว็บไซต์ส่งเสริมการบริการเป็นสื่อกลางของข้อมูล (Share
Information website)
เป็นเว็บที่มีจุดประสงค์ที่จะใช้เป็นกำรแลกเปลี่ยนข้อมูล
ตำมกลุ่มสนใจ เช่น แบ่งตำมอำชีพ ตำมงำนอดิเรก เป็นต้น

35. 24
3. เว็บไซต์ที่เสนอข่าวประจาวัน (Current website)
เป็นเว็บที่เสนอข้อมูลประเภทข่ำว ซึ่งจะเปลี่ยนไปเป็น
ประจำวัน เช่น เว็บไซต์ของหนังสือพิมพ์ไทยรัฐ เดลินิวส ์ เป็นต้น

36. 15
5. ระบบเนวิเกชันที่ใช้งำนง่ำย ต้องออกแบบให้ผู้ใช้เข้ำใจ
ง่ำยและใช้งำนสะดวก ใช้กรำฟิกที่สื่อควำมหมำยร่วมกับ
คำอธิบำยที่ชัดเจน
6. ลักษณะที่น่ำสนใจ หน้ำตำของเว็บไซต์จะต้องมี
ควำมสัมพันธ์กับคุณภำพขององค์ประกอบต่ำงๆ เช่น คุณภำพ
ของกรำฟิกที่จะต้องสมบูรณ์ กำรใช้สี กำรใช้ตัวอักษรที่อ่ำนง่ำย
สบำยตำ กำรใช้โทนสีที่เข้ำกันลักษณะหน้ำตำที่น่ำสนใจนั้น
ขึ้นอยู่กับควำมชอบของแต่ละบุคคล
7. กำรใช้งำนอย่ำงไม่จำกัด ผู้ใช้ส่วนใหญ่สำมำรถเข้ำถึงได้
มำกที่สุดเลือกใช้บรำวเซอร์ชนิดใดก็ได้ในกำรเข้ำถึงเนื้อหำ
8. คุณภำพในกำรออกแบบ กำรออกแบบและเรียบเรียง
เนื้อหำอย่ำงรอบคอบ สร้ำงควำมรู้สึกว่ำเว็บไซต์มีคุณภำพ
ถูกต้อง และเชื่อถือได้

37. 16
การออกแบบโครงสร้างเว็บไซต์
(Site Structure Design)
โครงสร้ำงเว็บไซท์ ( Site Structure ) เป็นแผนผังของ
กำรลำดับเนื้อหำหรือกำรจัดวำงตำแหน่งเว็บเพจทั้งหมด ซึ่งจะ
ทำให้เรำรู้ว่ำทั้งเว็บไซท์ประกอบไปด้วยเนื้อหำอะไรบ้ำง และมี
เว็บเพจหน้ำไหนที่เกี่ยวข้องเชื่อมโยงถึงกัน ดังนั้นกำรออกแบบ
โครงสร้ำงเว็บไซท์จึงเป็นเรื่องสำคัญ เพรำะจะทำให้เรำมองเห็น
หน้ำตำของเว็บไซท์เป็นรูปธรรมมำกขึ้น สำมำรถออกแบบ
ระบบเนวิเกชั่นได้เหมำะสม และเป็นแนวทำงกำรทำงำนที่ชัดเจน
สำหรับขั้นตอนต่อๆไป นอกจำกนี้โครงสร้ำงเว็บไซท์ที่ดียังช่วยให้
ผู้ชมไม่สับสนและค้นหำข้อมูลที่ต้องกำรได้อย่ำงรวดเร็ว
วิธีกำรจัดโครงสร้ำงเว็บไซท์สำมำรถทำได้หลำยแบบ แต่แนวคิด
หลักๆที่นิยมใช้กันมีอยู่ 2 แบบคือ
จัดตำมกลุ่มเนื้อหำ ( Content-based Structure )
จัดตำมกลุ่มผู้ชม ( User-based Structure )

38. 23
2. เว็บไซต์เพื่อธุรกิจการค้า (Promotional website)
เว็บไซต์นี้มีจุดประสงค์ เพื่อกำรค้ำขำยสินค้ำกำรโฆษณำ
สินค้ำ กำรส่งเสริมกำรขำย ในเว็บไซต์จะมีข้อมูลของสินค้ำ รำคำ
และกำรบริกำรต่ำงๆ ซึ่งในปัจจุบันตลำดประเภทนี้กำลังใช้กัน
มำกขึ้น

39. 22
ประเภทของเว็บไซต์
ในอินเตอร์เน็ตมีเว็บไซต์ที่สร้ำงขึ้นเพื่อจุดประสงค์ต่ำงๆ
หลำยประเภทซึ่งพอจะแยกเว็บไซต์ได้7ประเภท ดังนี้
1. เว็บไซต์ส่วนตัว (Personal website)
เป็นเว็บที่สร้ำงขึ้นเพื่อเผยแพร่ข้อมูลส่วนตัว เช่น ข้อมูลเกี่ยวกับ
ส่วนตัว กำรศึกษำ กำรงำน ควำมสนใจ เป็นต้น

40. 17
รูปแบบของโครงสร้างเว็บไซต์
เรำสำมำรถวำงรูปแบบโครงสร้ำงเว็บไซท์ได้หลำยแบบ
ตำมควำมเหมำะสม เช่น
แบบเรียงลำดับ ( Sequence ) เหมำะสำหรับเว็บไซท์ที่
มีจำนวนเว็บเพจไม่มำกนัก
แบบระดับชั้น ( Hierarchy ) เหมำะสำหรับเว็บไซท์ที่มี
จำนวนเว็บเพจมำกขึ้น เป็นรูปแบบที่เรำจะพบได้ทั่วไปแบบผสม
(Combination) เหมำะสำหรับเว็บไซท์ที่ซับซ้อน เป็นกำรนำ
ข้อดีของรูปแบบทั้ง 2 ข้ำงต้นมำผสมกัน

41. 18
ทฤษฎีการใช้สี
ตาราง คู่สีของตัวอักษรและพื้นหลังที่นิยมใช้
ที่มำ : ถนอมพร เลำหจรัสแสง, หลักกำรออกแบบและกำรสร้ำง
เว็บเพื่อกำรเรียน กำรสอน :Designing e-Learning (กรุงเทพฯ :
สำนักพิมพ์แห่งจุฬำลงกรณ์มหำวิทยำลัย, 2545), 170.
สีตัวอักษร สีพื้นหลัง
ขำว ฟ้ำ แดง เขียว ชมพู (Magenta)
เหลือง ฟ้ำ ดำ
ฟ้ำอมเขียว (Cyan) ขำว ฟ้ำ
เขียว ขำว เหลือง
ชมพู (Magenta) ขำว ฟ้ำ
แดง ขำว เหลือง ฟ้ำอมเขียว เขียว
ฟ้ำ ขำว ดำ
ดำ ขำว เหลือง

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

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

44. 19
สี เหลือง
ความหมายในเชิงบวก ควำมสดใสร่ำเริง ควำมหวังควำมอบอุ่น
ควำมร่ำรวย กำรมองโลกในแง่ดี ควำมสุขปรัชญำ ควำมคิดฝัน
ความหมายในเชิงลบ ควำมไม่ซื่อสัตย์ กำรทรยศควำมขลำด
กลัว ควำมอิจฉำควำมไม่แน่นอน อำกำรป่วย
สัญลักษณ์ สิ่งของที่เกี่ยวข้อง แสงอำทิตย์ ฤดูร้อนทอง ศำสนำ
ปรัชญำอุดมคติสัญญำณเตือนภัย
สี เขียว
ความหมายในเชิงบวก ธรรมชำติ สุขภำพ กำรรักษำควำม
รื่นรมย์ยินดี ควำมหวังกำรเริ่มต้น ควำมภักดี ควำมเป็นอมตะ
ควำมปลอดภัยควำมอุดมสมบูรณ์ ควำมร่ม
ความหมายในเชิงลบ ควำมอิจฉำ ควำมเบื่อหน่ำยกำรขำด
ประสบกำรณ์
สัญลักษณ์ สิ่งของที่เกี่ยวข้อง ต้นไม้ สิ่งแวดล้อมศำสนำ วัยรุ่น
สัญญำณปลอดภัย