2. ทฤษฏีการออกแบบเว็บไซต์
สมาชิกในกลุ่มที่ 9
นางสาวจิราวรรณ ผกาเชิด รหัสนักศึกษา 533410080505
นางสาวนัฐิยา ดอนปรีชา รหัสนักศึกษา 533410080519
นางสาวนันท์หทัย แสนโสภา รหัสนักศึกษา 533410080510
นายยุทธภูมิ จันทยุทธ์ รหัสนักศึกษา 533410080542
เสนอ
อาจารย์ปวริศ สารมะโน
รายวิชาโปรแกรมสร้างเวปเพื่อการศึกษา (Web Programmin for Education)
ภาคเรียนที่ 1 สาขาวิชาคอมพิวเตอร์ศึกษา คณะครุศาสตร์
มหาวิทยาลัยราชภัฏมหาสารคาม
พ.ศ. 2556

3. คานา
หนังสือเล่มเล็กนี้เป็นส่วนหนึ่งของรายวิชา 1193524 โปรแกรมสร้างเว็บเพื่อ
การศึกษา (Web Programming for Education) โดยมีจุดประสงค์เพื่อการศึกษาหา
ความรู้ได้จากเรื่อง การพัฒนาเว็บไซต์จากแหล่งความรู้ และงานวิจัยที่เกี่ยวข้องกับการ
พัฒนาเว็บไซต์ องค์ประกอบของเว็บไซต์ ซึ่งรายงานนี้มีเนื้อหาเกี่ยวกับ หลักการและ
ทฤษฎีการสื่อสาร การประชาสัมพันธ์ การจัดการเรียนการสอนผ่านเว็บ ความหมายของ
เว็บไซต์ การออกแบบและการพัฒนา ขั้นตอนการพัฒนา การออกแบบโครงสร้าง
เว็บไซต์ ส่วนประกอบของเว็บไซต์ กระบวนการพัฒนา ประเภทของเว็บไซต์ การ
ประเมินเว็บไซต์ และการโปรเมทเว็บไซต์ (Promote wed)
ผู้จัดทาได้เลือกหัวข้อนี้ในการทารายงาน เนื่องมาจากเป็นเรื่องที่น่าสนใน ตรงกับ
จุดประสงค์ในการเรียนในรายวิชา 1193524 โปรแกรมสร้างเว็บเพื่อการศึกษา (Web
Programming for Education) ผู้จัดทาจะต้องขอขอบคุณ ท่าน อาจารย์ปวริศ สารมะ
โน ผู้ให้ความรู้และแนวทางการศึกษา เพื่อน ๆ ทุกคนที่ให้ความช่วยเหลือมาโดยตลอด
ผู้จัดทาหวังว่ารายงานฉบับนี้จะให้ความรู้ และเป็นประโยชน์แก่ทุก ๆ ท่าน
คณะผู้จัดทา
จิราวรรณ ผกาเชิดและคณะ

4. สารบัญ
เรื่อง หน้า
การพัฒนาเว็บไซต์
บทที่ 1 หลักการและทฤษฎีการสื่อสาร…………………………………………..… 1
บทที่ 2 การประชาสัมพันธ์……………………………………………………………... 2
บทที่ 3 การจัดการเรียนการสอนผ่านเว็บ………………………………………… 4
บทที่ 4 ความหมายของเว็บไซต์…………………………………………………….…. 7
บทที่ 5 การออกแบบและการพัฒนาเว็บไซต์ ……………………………………. 8
บทที่ 6 ขั้นตอนการพัฒนา……………………………………………………………… 11
บทที่ 7 การออกแบบโครงสร้างเว็บไซต์…………………………………….……… 13
บทที่ 8 ส่วนประกอบของเว็บไซต์…………………………………………….……… 20
บทที่ 9 กระบวนการพัฒนาเว็บไซต์……………………………….………………… 22
บทที่ 10 ประเภทของเว็บไซต์……………………………………………………….… 23
บทที่ 11 การประเมินเว็บไซต์…………………………………………………….…… 28
บทที่ 1 การโปรโมทเว็บไซต์…………………………………………………………… 29
บทที่ 1 องค์ประกอบของเว็บไซต์……………………………………..…………….. 30
บทที่ 1 องค์ประกอบของการจัดทาเว็บเพจ……………………………………... 31
บทที่ 1 ขั้นตอนการจัดทาเว็บเพจ………………………………………………….… 32
บทที่ 1 หลักการออกแบบเว็บเพจที่ดี…………………………………………….… 33
บรรณานุกรม

5. บทที่ 1 หลักการและทฤษฎีการสื่อสาร
ทฤษฎีการสื่อสารก็คือการอธิบายการสื่อสารในด้านความหมาย กระบวนการ
องค์ประกอบ หลักการ วิธีการ บทบาทหน้าที่ ผล อิทธิพล การใช้ การควบคุม ปรากฏการณ์ที่
เกี่ยวกับการสื่อสาร สภาพปัญหา และแนวโน้มในอนาคต รวมทั้งการอธิบายแนวคิดของศาสตร์
ต่าง ๆ ที่เกี่ยวกับการสื่อสาร
เราอาจจาแนกทฤษฎีการสื่อสารออกได้เป็น 3 ประเภทใหญ่ ๆ คือ (1) ทฤษฎีการสื่อสาร
แนวปฏิบัติ ที่พัฒนามาจากทฤษฎีเพื่อการสื่อสาร (2) ทฤษฎีการสื่อสารแนวปรัชญาวิทยาศาสตร์
ที่พัฒนามาจากทฤษฎีของการสื่อสาร และ (3) ทฤษฎีการสื่อสารแนววิพากษ์ ที่พัฒนามาจาก
ทฤษฎีเกี่ยวกับการสื่อสาร
คือ การถ่ายทอดข้อมูลข่าวสารจากบุคคลฝ่ายหนึ่งที่เรียกว่าผู้ส่งสารไปยังยังบุคคลอีกฝ่าย
หนึ่งที่เรียกว่าผู้รับสารโดยผ่านช่องทางในการสื่อสาร โดยมีองค์ประกอบที่สาคัญคือ ผู้ส่งสาร
(Sender) สาร(Message) ช่องทาง(Channel) และตัวผู้รับสาร(Reciever) ซึ่งมักเรียกกันว่า
SMC
การสื่อสารในชีวิตของแต่ละบุคคลนั้นล้วนมีวัตถุประสงค์ที่แตกต่างกันออกไป และส่งผล
ต่อการดาเนินชีวิตได้คือ ทาให้ไม่รู้สึกโดดเดี่ยว ทาให้ทราบการเปลี่ยนแปลงที่เกิดขึ้น สร้าง
ความสัมพันธ์ทางสังคม ทาให้เกิดการแสดงออก ทาให้เกิดการพักผ่อนหย่อนใจ ทาให้เกิดการ
เรียนรู้ ทาให้เกิดกาลังใจ(หาภาพประกอบแต่ละประเภท)
บทที่ 1 หลักการและทฤษฎีการสื่อสาร
ความหมายของการสื่อสาร
วัตถุประสงค์ของการสื่อสาร
1

6. บทที่ 2 การประชาสัมพันธ์
การมีเว็บไซต์สิ่งแรกที่ทุกคนต้องการคือมีผู้เข้าชม การจะทาให้เว็บเป็นที่รู้จักนอกจาก
เนื้อหา การประชาสัมพันธ์คงเป็นสิ่งแรกที่ต้องทา เพราะมีของดีแล้วไม่มีใครรู้ก็เป็นเรื่องที่น่า
เสียดาย สาหรับการแนะนาเว็บไซต์ให้เป็นที่รู้จัก มีหลากหลายรูปแบบ แต่ในส่วนนี้แนะนาพื้นฐาน
ที่ทุกคนสามารถทาได้โดยไม่มีค่าใช้จ่ายใดๆ คือ
1. Search Engine การประชาสัมพันธ์เว็บผู้ใช้งานอินเทอร์เน็ตส่วนใหญ่เมื่อต้องการ
ค้นหาข้อมูล คงหนีไม่พ้นเข้าไปยังผู้ให้บริการค้นหาเว็บไซต์หรือ Search Engine ถ้าจะทาให้เว็บ
เป็นที่รู้จักก็ต้องให้เว็บของเราเข้าไปอยู่ในฐานข้อมูลของผู้ให้บริการเหล่านั้น โดยผู้ให้บริการ
Search Engine จะมีส่วนบริการที่ให้เข้าไปเพิ่มเว็บไซต์ (Add URL) พร้อมแนะนาข้อมูลเบื้องต้น
หรือให้เพิ่มเฉพาะ URL ของเว็บไซต์อย่างเดียว ตามแต่ระบบของผู้ให้บริการดังนี้
- Google
- Yahoo
- MSN
โดยผู้ให้บริการ Search Engine แต่ละรายจะส่ง Robot หรือเครื่องมืออัตโนมัติ
เข้ามายังเว็บไซต์เพื่อเก็บเนื้อหา คาต่างๆเข้าไปทาดัชนียังฐานข้อมูล เมื่อผู้ใช้อินเทอร์เน็ตค้นหา"
คา" ที่ตรงกับเนื้อหากับเว็บไซต์ของเราก็จะถูกแสดงให้ผู้ใช้งานอินเทอร์เน็ตได้เลือกเข้าชม
2.หมวดหมู่เว็บ (Directory) เป็นอีกช่องทางในการประชาสัมพันธ์เว็บไปยังผู้ให้บริการ
รวมลิงค์ต่างๆ เพราะจะเป็นแหล่งที่มีผู้ใช้อินเทอร์เน็ตเข้าไปหาข้อมูลเป็นจานวนมาก มีการจัดแบ่ง
เว็บไซต์ไว้เป็นหมวดหมู่ง่ายต่อการเข้าชม
บทที่ 2 การประชาสัมพันธ์
2

7. บทที่ 2 การประชาสัมพันธ์
3. แลกเปลี่ยนลิงค์ (banner exchange) การแลกเปลี่ยนลิงค์เป็นอีกช่องทางในการ
แนะนาเว็บไซต์ให้เป็นที่รู้จัก เว็บไซต์ที่รับแลกเปลี่ยนลิงค์จะประกาศแจ้งไว้ หรือหากไม่มีก็สามารถ
ส่งอีเมล์ไปสอบถามหรือขอแลกเปลี่ยนได้เช่นกัน อาจดูจากความใกล้เคียงของเนื้อหาหรือ
กลุ่มเป้าหมาย การแลกลิงค์มีทั้งแบบลิงค์ข้อความ หรือแบนเนอร์ ตกลงกันได้ตามความพอใจ
1. เมื่อออกแบบเว็บไซต์เสร็จเรียบร้อยแล้ว ให้ทาการอับโหลดเว็บไซต์ให้สามารถเผยแพร่
สู่โลกอินอินเทอร์เน็ตได้
2. ต้องทาการประชาสัมพันธ์เว็บไซต์ มีวิธีการประชาสัมพันธ์ให้ตรงกับกลุ่มเป้าหมาย มี 2
แบบให้เลือกคือ
2.1 แบบไม่เสียค่าบริการ
2.2 แบบเสียค่าบริการ
3. ต้องทา SEO (Search Engine Optimization)มาจากคาเต็มๆ ว่า Search Engine
Optimization ความหมายคือ การปรับแต่งเว็บไซต์ และกระบวนการต่างๆ ของเว็บไซต์ตั้งแต่การ
ออกแบบเขียนโปรแกรม และการโปรโมทเว็บ เพื่อให้ติดอันดับต้นๆ ของ Search Engine
(เครื่องมือค้นหาเว็บไซต์ต่างๆ เช่น Google, MSN, Yahoo, AOL เป็นต้น)
ขั้นตอนการประชาสัมพันธ์
เว็บไซต์
3

8. บทที่ 3 การจัดการเรียนการสอนผ่านเว็บ
การใช้เว็บเพื่อการเรียนการสอน เป็นการนาเอาคุณสมบัติของอินเทอร์เน็ตมาออกแบบเพื่อ
ใช้ในการศึกษาด้วยการใช้อินเทอร์เน็ตเป็นสื่อกลางในการเรียนการสอนระหว่างผู้เรียนและผู้สอน
ซึ่งการจัดการเรียนการสอนผ่านเว็บมีชื่อเรียกหลายลักษณะ เช่น การจัดการเรียนการสอนผ่านเว็บ
(Web-based Instruction) เว็บการเรียน (Web-based Learning) เว็บฝึกอบรม (Web-
basedTraining) อินเทอร์เน็ตฝึกอบรม (Internet-based Training) อินเทอร์เน็ตช่วยสอน
(InternetbasedInstruction) เวิลด์ไวด์เว็บฝึกอบรม (WWW-based Training) และเวิลด์ไวด์เว็บ
ช่วยสอน(WWW-based Instruction)
การเรียนการสอนผ่านเว็บ (Web-based Instruction) หมายถึง การจัดการเรียนการสอน
ทั้งกระบวนการหรือบางส่วนผ่านบริการเวิลด์ไวด์เว็บในเครือข่ายอินเทอร์เน็ต มีการออกแบบ
บทเรียนในลักษณะโปรแกรมแบบไฮเปอร์มีเดีย โดยอาศัยประโยชน์จากคุณลักษณะและทรัพยากร
บนเวิล์ดไวด์เว็บมาจัดสภาพแวดล้อมที่ส่งเสริมและสนับสนุนการเรียนการสอน ร่วมกับทฤษฎีการ
เรียนรู้และหลักการออกแบบการเรียนการสอน เพื่อสนับสนุนผู้เรียนให้เรียนรู้อย่างมีความหมาย
การเรียนการสอนผ่านเว็บจึงถือเป็นวิธีการใหม่ที่ช่วยส่งเสริมพัฒนาให้เกิดการเรียนรู้ และช่วยขจัด
อุปสรรคของการเรียนการสอนทางด้านสถานที่และเวลา
บทที่ 3 การจัดการเรียนการสอนผ่าน
เว็บ
การออกแบบบทเรียนผ่านเว็บ
ความหมายของการเรียนการสอน
ผ่านเว็บ
1. การสร้างแรงจูงใจให้กับผู้เรียน (Motivating the
Learned)ActiveInvolvement)
2. บอกวัตถุประสงค์ของการเรียน (Identifying What is to be
Learned)
4

9. บทที่ 3 การจัดการเรียนการสอนผ่านเว็บ
การจัดการเรียนการสอนผ่านเว็บมีลักษณะการเรียนการสอนที่แตกต่างไปจากการเรียน
การสอนในชั้นเรียนปกติที่คุ้นเคยกันดี ซึ่งการจัดการเรียนการสอนแบบดั้งเดิมในชั้นเรียนส่วนใหญ่
จะมีลักษณะที่เน้นให้ผู้สอนเป็นผู้ป้อนความรู้ให้แก่ผู้เรียน ทาให้ผู้เรียนไม่ใฝ่ที่จะหาความรู้เพิ่มเติม
ส่วนการจัดการเรียนการสอนผ่านเว็บจะมีวิธีการจัดที่แตกต่างไปจากการจัดการเรียนการสอน
ตามปกติ เพราะคุณลักษณะและรูปแบบของเว็บเป็นสื่อที่มีลักษณะเฉพาะของตนเอง ซึ่งแตกต่าง
ไปจากการจัดการเรียนการสอนด้วยสื่อแบบอื่นๆ จึงต้องคานึงถึงการออกแบบระบบการสอนที่
สอดคล้องกับคุณลักษณะของเว็บ
5
การจัดการเรียนการสอนผ่านเว็บ
5. ให้คาแนะนาและให้ข้อมูลย้อนกลับ (Providing Guidance and
Feedback)
6. ทดสอบความรู้ (Testing)
4. ผู้เรียนต้องมีความกระตือรือร้นที่จะเรียนรู้ (Requiring
ActiveInvolvement)
7. การนาความรู้ไปใช้ (Providing Enrichment and Remediation)
3. ทบทวนความรู้เดิม (Reminding Learners of Past Knowledge
ActiveInvolvement)

10. บทที่ 3 การจัดการเรียนการสอนผ่านเว็บ
1. การสอนบนเว็บเป็นการเปิดโอกาสให้ผู้เรียนที่อยู่ห่างไกล หรือไม่มีเวลาในการมาเข้าชั้น
เรียนได้เรียนในเวลาและสถานที่ ๆ ต้องการ
2. การสอนบนเว็บยังเป็นการส่งเสริมให้เกิดความเท่าเทียมกันทางการศึกษา
3. การสอนบนเว็บนี้ ยังช่วยส่งเสริมแนวคิดในเรื่องของการเรียนรู้ตลอดชีวิต
4.การสอนบนเว็บ ช่วยทลายกาแพงของห้องเรียนและเปลี่ยนจากห้องเรียนสี่เหลี่ยมไปสู่
โลกกว้างแห่งการเรียนรู้ เปิดโอกาสให้ผู้เรียนสามารถเข้าถึงแหล่งข้อมูลต่างๆได้อย่างสะดวกและมี
ประสิทธิภาพ
5. การสอนบนเว็บเป็นวิธีการเรียนการสอนที่มีศักยภาพ เนื่องจากที่เว็บได้กลายเป็นแหล่ง
ค้นคว้าข้อมูลทางวิชาการรูปแบบใหม่ครอบคลุมสารสนเทศทั่วโลกโดยไม่จากัดภาษา
6. การสอนบนเว็บจะช่วยสนับสนุนการเรียนรู้ที่กระตือรือร้น
7. การสอนบนเว็บเอื้อให้เกิดการปฏิสัมพันธ์ คือปฏิสัมพันธ์กับผู้เรียนด้วยกันและ/หรือ
ผู้สอน ปฏิสัมพันธ์กับบทเรียนในเนื้อหาหรือสื่อการสอนบนเว็บ
8. การสอนบนเว็บยังเป็นการเปิดโอกาสสาหรับผู้เรียนในการเข้าถึงผู้เชี่ยวชาญสาขาต่าง
ๆ ทั้งในและนอกสถาบันจากในประเทศและต่างประเทศทั่วโลก
9. การสอนบนเว็บเปิดโอกาสให้ผู้สอนสามารถปรับปรุงเนื้อหาหลักสูตร ให้ทันสมัยได้
อย่าง สะดวกสบาย
10. การสอนบนเว็บเปิดโอกาสให้ผู้เรียนได้มีโอกาสแสดงผลงานของตน สู่สายตาผู้อื่น
อย่างง่ายดาย
ประโยชน์การเรียนการสอนผ่านเว็บ
6

11. บทที่ 4 ความหมายของเว็บไซต์
ธวัชชัย ศรีสุเทพ (2544,หน้า) ได้กล่าวถึงความหมายของเว็บไซต์ว่าเป็นกลุ่มของเว็บเพจที่
หน่วยงานเดียวกันเชื่อมโยงกันด้วยระบบไฮเปอร์ลิงค์ ในเว็บไซต์หนึ่งจึงประกอบด้วยเว็บเพจ
หลายๆ หน้า
ยืน ภู่วรวรรณ (2544, หน้า 66-70) ในการออกแบบเว็ไซต์ว่า ควรออกแบบให้ดูน่าเชื่อถือ
ออกแบบอย่างประณีต และการทดสอบการทางานของลิงค์ต่างๆ ทั้งภายในและภายนอกนั้นมีการ
เปลี่ยนแปลงอย่างไรหรือไม่ จึเป็นสิ่งจาเป็น
อเนก ปิ่นศรี (2552: 9) กล่าวว่า “เว็บไซต์ หมายถึง แหล่งที่เก็บรวบรวมข้อมูลเอกสาร
และสื่อประสมต่างๆ เช่น ภาพ เสียง ข้อความ เป็นต้น ของแต่ละหน่วยงานบนอินเทอร์เน็ต”
เว็บไซต์ (Web Site) คือเว็บเพจอย่างน้องสองหน้าที่มีลิงค์ถึงกัน มี บรรยากาศ
สภาพแวดล้อม เช่น สีพื้นและโครงสร้างเว็บเพจคล้ายคลึงกัน อย่างไรก็ตาม ในทางปฏิบัติแล้วคา
ว่าเว็บไซท์จะใช้เฉพาะกับผู้มีคอมพิวเตอร์เซิร์ฟเวอร์เป็นของตนเอง และจดทะเบียนขึ้นชื่อเว็บไซท์
ของตนไว้เรียบร้อย อย่างที่เรียกกันว่า โดเมนเนม (Domain Name) เช่น CNN.COMเป็นต้น
สรุป เว็บไซต์ หมายถึง หน้าเว็บเพจหลายหน้า ซึ่งเชื่อมโยงผ่านทางไฮเปอร์ลิงค์ ส่วนใหญ่
จัดทาขึ้นเพื่อนาเสนอข้อมูลผ่านคอมพิวเตอร์ โดยถูกจัดเก็บไว้ใน www
ภาพส่วนประกอบของเว็บไซต์
บทที่ 4 ความหมายของเว็บไซต์
7

12. บทที่ 5 การออกแบบและการพัฒนาเว็บไซต์
การออกแบบเว็บไซต์ เป็นการกาหนดรูปแบบการนาเสนอเนื้อหาของเว็บไซต์ สามารถ
ดาเนินได้ดังนี้
หลักการออกแบบหน้าเว็บไซต์
1. สร้างลาดับชั้นความสาคัญขององค์ประกอบ (Visual Hierarchy) การสร้างลาดับชั้น
ความสาคัญขององค์ประกอบต่างๆภายในเว็บ เพื่อเน้นให้เห็นว่าอะไรเป็นเรื่องสาคัญมาก สารอง
ลงไปหรือสาคัญน้อยตามลาดับการจัดระเบียบขององค์ประกอบอย่างเหมาะสม จะช่วยแสดงถึง
ความสัมพันธ์ระหว่างองค์ประกอบอย่างเหมาะสม
บทที่ 5 การออกแบบและการพัฒนาเว็บไซต์
1. การออกแบบโฮมเพจ (Homepage)
2. การออกแบบเว็บเพจ (Wedpage)
3. องค์ประกอบภายในเว็บเพจ)
4. การเชื่อมโยง
การออกแบบเว็บไซต์
8

13. บทที่ 5 การออกแบบและการพัฒนาเว็บไซต์
2. ตาเเหน่งและลาดับขององค์ประกอบ แสดงถึงลาดับความสาคัญของข้อมูลที่คุณต้องการ
ให้ผู้ใช้ได้รับ
3. สีและความแตกต่างของสี แสดงถึงความสาคัญและความสัมพันธ์ของสิ่งต่างๆภายใน
หน้าสีที่เด่นชัดเหมาะสมสาหรับองค์ประกอบที่มีความสาคัญมาก
4. ภาพเคลื่อนไหว เป็นสิ่งที่ดึงดูดความสนใจได้เป็นอย่างดี
การวางองค์ประกอบที่สาคัญไว้ในส่วนบนของหน้าเสมอสิ่งที่อยู่ในบริเวณนี้จึงควรเป็นสิ่งที่
สาคัญและสามารถดึงดูดความสนใจจากผู้ใช้ได้ โดยปกติแล้วส่วนบนสุดนี้ควรประกอบด้วย
-ชื่อของเว็บไซต์ เพื่อให้ผู้ใช้รู้ได้ทีนทีว่ากาลังอยู่ในเว็บอะไร
-ชื่อหัวเรื่องหรือชื่อแสดงหมวดหมู่ของเนื้อหา ช่วยให้ผู้ใช้รู้ถึงส่วนของเนื้อหา
ที่ปรากฎอยู่
สิ่งสาคัญที่คุณต้องการโปรโมทในเว็บไซต์ เพราะเป็นบริเวณที่ผู้ใช้ทุกคนจะได้เห็น
เลือกใช้สีสาหรับเว็บไซต์ (Designing Wed Colors) สีสันในหน้าเว็บเพจ เป็นสิ่งที่มีความสาคัญ
มากในการดึงดูดความสนใจของผู้ใช้ เนื่องจากสิ่งแรกที่พวกเขามองเห็นจากเว็บเพจก็คือ สี ซึ่งเป็น
สิ่งกาหนดบรรยากาศและความรูสึกโดยรวมของเว็บไซต์
ข้อคิดในเกี่ยวกับการใช้สีในเว็บไซต์
1. ใช้สีอย่างสม่าเสมอ
2. ใช้สีอย่างเหมาะสม
3. ใช้สีเพื่อสื่อความหมาย
ตัวอย่างเว็บไซต์ที่มีการใช้ทฤษฎีสีเป็นตัวสื่อความหมาย
9

14. บทที่ 5 การออกแบบและการพัฒนาเว็บไซต์
การพัฒนาเว็บไซต์ เป็นการกาหนดโครงสร้างหลักที่ใช้ในการพัฒนาเว็บไซต์ ที่
ประกอบด้วยข้อความ เสียง ภาพนิ่ง ภาพวีดิทัศน์ ในเครือข่ายซึ่งประกอบด้วยการเชื่อมโยง
ภายในเว็บเพจเดียวกัน การเชื่อมโยงกับเว็บเพจอื่นที่อยู่ภายในเว็บไซต์เดียวกัน การเชื่อมโยงไปยัง
เว็บไซต์อื่นๆ ในส่วนของเสียง และวีดิทัศน์ใช้โปรแกรมเรียลเพล-เยอร์ในการเปิดฟังหรือชมโดยมี
ขั้นตอนในการพัฒนาเว็บไซต์ ดังนี้
1. การกาหนดแหล่งเก็บข้อมูล สาหรับเว็บไซต์ที่สร้างขึ้นผู้วิจัยกาหนดให้จัดเก็บไว้ที่ตัว
บริการเว็บของสานักการศึกษาต่อเนื่อง และส่วนกลางของมหาวิทยาลัยสุโขทัยธรรมาธิราช
2. การกาหนดโฟล์เดอร์ (Folder) สาหรับจัดเก็บข้อมูล และกาหนดประเภทแฟ้ม
ข้อมูล (File) ที่ใช้ในการพัฒนาเว็บไซต์
3. การกาหนดรูปแบบของคาสั่งหลักที่ใช้ในการพัฒนาเว็บไซต์ ได้แก่
3.1) อินคลูด (Includes) ใช้ในการจัดการกับเมนูหลัก เมนูย่อย และส่วนท้าย
(Footer)ของทุกๆ เว็บเพจซึ่งมีข้อดีคือ ช่วยให้การบริหารจัดการเว็บไซต์ง่ายและสะดวก ลดการ
ซ้าซ้อนในการทางานลดความผิดพลาดในการเขียนคาสั่ง การแก้ไขสามารถทาได้ง่ายและรวดเร็ว
(รุจกา สุภาพันธ์ 2543 : 71)
3.2) แผ่นแบบ (Cascading style sheets หรือ CSS) ใช้ในการกาหนดการแสดงผล
ของตัวอักษรให้มีรูปแบบและขนาดเหมือนๆ กัน ซึ่งมีข้อดีคือ ผู้ดูแลเว็บไซต์สามารถควบคุม
รูปแบบของตัวอักษรให้เป็นมาตรฐานเดียวกันทั้งเว็บไซต์ ทาให้ไม่ต้องเสียเวลาในการดาวน์โหลด
เว็บเพจนาน และสามารถจัดรูปแบบการแสดงผลภายในเว็บเพจได้ตามที่ออกแบบไว้ (อติพงศ์ จุล
โพธิ 2545 : 156-157)
4. โปรแกรมในการพัฒนาเว็บเพจ เป็นการสร้างเว็บเพจหน้าต่างๆ โดยการนาเนื้อหาที่
ทาการศึกษาและรวบรวม มาสร้างเว็บเพจตามรูปแบบที่กาหนดด้วยโปรแกรมแมโครมีเดีย ดรีมวีพ
เวอร์(Macromedia Dreamweaver) และโปรแกรมแมโครมีเดียแฟลช (Macromedia flash)
การพัฒนาเว็บไซต์
10

15. บทที่ 6 ขั้นตอนการพัฒนาเว็บไซต์
การพัฒนาเว็บไซต์และนาเว็บไซต์เข้าสู่ระบบ www ให้บุคคลอื่นเข้ามาเยี่ยมชมได้นั้น
กระบวนการพัฒนาเว็บไซต์สามารถจาแนกได้3ขั้นตอน ดังนี้ (ประไพ ศรีสะอาด, 2549 : 22-26)
1. การเตรียมการและการวางแผนงาน(pre-production) เปรียบเสมือนเข็มทิศที่จะ
ชี้นาทางหรือบ่งบอกให้ผู้พัฒนาเว็บไซต์ทราบว่า ควรจะต้องเดินทางไปในทิศทางใด ซึ่งขั้นตอนนี้
จะประกอบด้วย การเตรียมก่อนการดาเนินการ การวางแผนการดาเนินการ รวมทั้งการรวบรวม
และวิเคราะห์โครงสร้าง
1.1 การเตรียมก่อนการดาเนินการ ประกอบด้วย
1.1.1 กาหนดวัตถุประสงค์และเป้าหมายของเว็บไซต์ เพื่อให้เห็นภาพที่ชัดเจน
1.1.2 กาหนดชื่อเว็บไซต์ และชื่อยูอาร์แอล
1.1.3 กาหนดกลุ่มเป้าหมายที่จะให้เข้าชมเว็บไซต์ เพื่อจะได้ทราบว่าผู้ที่จะเข้าชมเว็บ
คือใคร จะได้ดาเนินการออกแบบและดาเนินการจัดทาเว็บไซต์ เพื่อให้ตอบสนองความต้องการ
ผู้ชมกลุ่มนั้นได้ทากที่สุด
1.1.4 ศึกษากลุ่มคู่แข่ง
1.2 การวางแผนการดาเนินการ หลังการเตรียมก่อนการดาเนินการ ควรมีการวางแผนไว้
ล่วงหน้า เพื่อให้การพัฒนาเว็บไซต์มีแนวทางที่ชัดเจน
1.3 การรวบรวมและวิเคราะห์โครงสร้าง
2. การทางานจริงในการออกแบบและพัฒนาเว็บเพจ(on- production) แบ่งได้เป็น 2
ส่วน คือ
2.1 การออกแบบเว็บเพจนับเป็นขั้นตอนในการออกแบบรูปร่าง โครงสร้างและ
ลักษณะทางด้านกราฟิกทางหน้าเว็บเพจ โดยโปรแกรมที่นิยมนามาใช้ในการออกแบบคือ โฟ
โต้ชอป หรือ ไฟล์เวิร์ก ซึ่งจะช่วยในการสร้างเค้าโครงของหน้าเว็บและองค์ประกอบต่างๆ เช่น ชื่อ
เว็บไซต์ โลโก้ รูปไอคอน ภาพเคลื่อนไหว แบรนเนอร์โฆษณา เป็นต้น
บทที่ 6 ขั้นตอนการพัฒนาเว็บไซต์
11

16. บทที่ 6 ขั้นตอนการพัฒนาเว็บไซต์
3.1 การทดสอบและปรับปรุงเว็บไซต์ หมายถึง การทดสอบเว็บเพจที่สร้างขึ้นแบบ
ออฟไลน์ โดยยังไม่ได้มีการนาเว็บไซต์เข้าสู่อินเทอร์เน็ต แต่ก็สามารถแสดงผลได้เหมือนจริงผ่าน
เว็บเบราว์เซอร์ เช่น ใช้โปรแกรมอินเทอร์เน็ตเอ็กซ์พลอเรอร์ ตรวจสอบตัวอย่างเว็บเพจหน้าต่างๆ
ที่สร้างไว้ เช่น ขนาดตัวอักษร ขนาดรูปภาพ เสียง การใช้สี ตาราง เป็นต้น ว่ามีความเหมาะสม
หรือไม่ พร้อมกับทาการแก้ไขปรับปรุงจนเป็นที่น่าพอใจ
3.2 การเผยแพร่เว็บไซต์ เมื่อทดสอบเว็บไซต์จนสมบูรณ์แล้ว ขั้นตอนในการเผยแพร่
ผ่านเว็บไซต์
3.3 การบารุงรักษาเว็บไซต์ เป็นการปรับปรุงเนื้อหา ภาพประกอบ หรือการปรับปรุง
เว็บไซต์ให้เป็นปัจจุบัน ซึ่งถือเป็นขั้นตอนที่สาคัญ เพราะในโลกอินเทอร์เน็ตมีการเปลี่ยนแปลง
อย่างรวดเร็วอยู่ตลอดเวลา ผู้เข้าชมเว็บมักใช้เวลาในการค้นหาและเปิดผ่านเว็บไซต์ต่างๆอย่าง
รวดเร็ว หากพบว่าเว็บไซต์ที่ผู้สร้างนาเสนอไม่ได้มีการปรับปรุงเปลี่ยนแปลงหรือมีข้อมูลใหม่ๆ
เพิ่มขึ้นเลย ผู้เข้าชมเว็บก็อาจลดจานวนลงเรื่อยๆ จนกลายเป็นเว็บที่ไม่มีคนเข้ามาเยี่ยมชมเลย
หรือเป็นเว็บที่ตายแล้ว
ดังนั้น การปรับปรุงเว็บไซต์อยู่เสมอ โดยมีการเพิ่มข้อมูลข่าวสารใหม่ๆอยู่เป็นประจา ก็จะ
ทาให้เว็บไซต์ทันสมัย มีผู้ชมเข้าชมเป็นประจาและมากขึ้น จนพัฒนาเป็นเว็บไซต์ยอดนิยมได้ใน
ที่สุด
ภาพอธิบายของขั้นตอนพัฒนาเว็บไซต์
12

17. บทที่ 7 การออกแบบโครงสร้างเว็บไซต์
ประสาน จันทะคาม(2552 :12) กล่าวว่า “การออกแบบโครงสร้างเว็บไซต์ คือ การ
วางแผนการจัดลาดับ เนื้อหาสาระของเว็บไซต์ ออกเป็นหมวดหมู่ เพื่อจัดทาเป็นโครงสร้างในการ
จัดวางหน้าเว็บเพจทั้งหมด เปรียบเสมือนแผนที่ ที่ทาให้เห็นโครงสร้างทั้งหมดของเว็บไซต์ ช่วยใน
นักออกแบบเว็บไซต์ไม่ให้หลงทาง การจัดโครงสร้างของเว็บไซต์ มีจุดมุ่งหมายสาคัญคือ การที่จะ
ทาให้ผู้เข้าเยี่ยมชม สามารถค้นหาข้อมูลในเว็บเพจได้อย่างเป็นระบบ ซึ่งถือว่าเป็นขั้นตอนที่สาคัญ
ที่สามารถสร้างความสาเร็จให้กับผู้ที่ทาหน้าที่ในการออกแบบและพัฒนาเว็บไซต์ (Webmaster)
การออกแบบโครงสร้างหรือจัดระเบียบของข้อมูลที่ชัดเจน แยกย่อยเนื้อหาออกเป็นส่วนต่าง ๆ ที่
สัมพันธ์กันและให้อยู่ในมาตรฐานเดียวกัน จะช่วยให้น่าใช้งานและง่าย ต่อการเข้าอ่านเนื้อหาของ
ผู้ใช้เว็บไซต์”
โครงสร้างเว็บไซต์สามารถแบ่งได้4ประเภท ดังนี้ (วิชาการพัฒนางานบนเว็บ, 2551:
ไม่ปรากฏหน้า)
2.1 โครงสร้างเว็บไซต์แบบเรียงลาดับ มีลักษณะเป็นโครงสร้างแบบธรรมดาที่นิยมใช้
กันมากที่สุด เนื่องจากง่ายต่อการจัดระบบข้อมูล เป็นโครงสร้างที่ใช้เก็บข้อมูลที่เป็นเรื่องราว
ตามลาดับเวลา หรือดาเนินเนื้อหาไปตามลาดับ หรือดาเนินเนื้อหาจากเรื่องทั่วๆไป กว้างๆ ไปสู่
เรื่องที่จาเพาะเจาะจงมากขึ้นหรือมีรายละเอียดมากขึ้น หรือการเรียงลาดับตามตัวอักษร เช่น
ดรรชนี สารานุกรม หรืออภิธานศัพท์ เป็นต้น
บทที่ 7 การออกแบบโครงสร้างเว็บไซต์
1.ความหมายของโครงสร้างเว็บไซต์
2. ประเภทของโครงสร้างเว็บไซต์
13

18. บทที่ 7 การออกแบบโครงสร้างเว็บไซต์
2.1.1 ประโยชน์ของเว็บไซต์แบบเรียงลาดับ ผู้ออกแบบเว็บไซต์ออกแบบได้ง่ายในการ
จัดระบบโครงสร้าง และง่ายต่อการปรับปรุงแก้ไข เนื่องจากมีโครงสร้างที่ไม่ซับซ้อน การ
เพิ่มเติมเนื้อหาเข้าไปสามารถทาได้ง่าย เพราะมีผลกระทบต่อบางส่วนของโครงสร้าง
เท่านั้น แต่ข้อเสียของโครงสร้างระบบนี้คือ ผู้ใช้ไม่สามารถกาหนดทิศทางการเข้าสู่เนื้อหา
ของตนเองได้
2.1.2 การนาเว็บไซต์แบบเรียงลาดับไปใช้ โครงสร้างนี้เหมาะกับเว็บที่มีขนาดเล็ก เนื้อหาไม่
ซับซ้อน เหมือนการอ่านหนังสือเรียงลาดับไปแต่ละหน้า ดังภาพ
ภาพ ตัวอย่างเว็บไซต์แบบเรียงลาดับที่มีการเพิ่มเนื้อหาย่อย
2.2 โครงสร้างเว็บไซต์แบบลาดับขั้น
เป็นโครงสร้างที่ดีวิธีหนึ่งในการจัดระบบโครงสร้างที่มีความซับซ้อนของข้อมูล โดยแบ่งเนื้อหา
ออกเป็นส่วนต่างๆ และมีรายละเอียดย่อยๆลดหลั่นกัน โดยใช้แนวคิดเดียวกันกับแผนภูมิองค์กร
2.2.1 ประโยชน์ของเว็บไซต์แบบลาดับชั้น คือ ผู้ชมเว็บไซต์สามารถแยกแยะเนื้อหาได้ง่าย และ
สะดวกต่อการจัดระบบข้อมูลของผู้ออกแบบ นอกจากนี้ผู้ดูแลเว็บไซต์สามารถดูแลและปรับปรุง
แก้ไขเว็บไซต์ได้ง่าย
2.2.2 การนาเว็บไซต์แบบลาดับชั้นไปใช้ โครงสร้างแบบนี้เหมาะกับเว็บไซต์ที่มีขนาดใหญ่ มี
เนื้อหามาก แต่มีโครงสร้างไม่ซับซ้อน ส่วนใหญ่จะใช้กับเว็บไซต์การเรียนการสอน
14

19. บทที่ 7 การออกแบบโครงสร้างเว็บไซต์
2.3 โครงสร้างเว็บไซต์แบบตาราง มีความซับซ้อนมากกว่ารูปแบบที่ผ่านมา การออกแบบเพิ่ม
ความยืดหยุ่นให้แก่การเข้าสู่เนื้อหาของผู้ใช้ โดยเพิ่มการเชื่อมโยงซึ่งกันและกัน ระหว่างเนื้อหาแต่
ละส่วน เหมาะแก่การแสดงให้เห็นถึงความสาพันธ์กันของเนื้อหา การเข้าสู่เนื้อหาของผู้ใช้จะไม่
เป็นลักษณะเชิงเส้นตรง เนื่องจากผู้ใช้สามารถเปลี่ยนทิศทางการเข้าสู่เนื้อหาของตนเองได้
2.3.1 ประโยชน์ของเว็บไซต์แบบตาราง โครงสร้างแบบตาราง เป็นโครงสร้างที่มีความยืดหยุ่น
สาหรับผู้ใช้ ทุกๆเนื้อหามีความสาคัญเท่าๆกัน และมีลักษณะร่วมกัน ดังนั้น ทุกๆเนื้อหาจึงสามารถ
เชื่อมโยงถึงกันได้ ตามที่ผู้ใช้ต้องการ
2.3.2 การนาเว็บไซต์แบบตารางไปใช้ โครงสร้างแบบนี้เหมาะกับเว็บไซต์ที่มีขนาดใหญ่ มีเนื้อหา
จานวนมากและมีโครงสร้างซับซ้อน ในการจัดระบบโครงสร้างแบบนี้ เนื้อหาที่นามาใช้แต่ละส่วน
ควรมีลักษณะที่เหมือนกัน และสามารถใช้รูปแบบร่วมกัน2.4 โครงสร้างเว็บไซต์แบบใยแมงมุม
มีความยืดหยุ่นมากที่สุด ทุกหน้าในเว็บสามารถจะเชื่อมโยงไปถึงกันได้หมด เป็นการสร้างรูปแบบ
การเข้าสู้เนื้อหาที่เป็นอิสระ ผู้ใช้สามารถกาหนดวิธีการเข้าสู่เนื้อหาได้ด้วยตนเอง การเชื่อมโยงแต่
ละหน้าอาศัยการโยงใยข้อความที่มีมโนทัศน์เหมือนกัน
2.4.1 ประโยชน์ของเว็บไซต์แบบใยแมงมุม คือ ง่ายต่อผู้ใช้ในการท่องเที่ยวบนเว็บ โดยผู้ใช้
สามารถกาหนดทิศทางการเข้าสู่เนื้อหาได้ด้วยตนเอง แต่ข้อเสีย คือ ถ้ามีการเพิ่มเนื้อหาใหม่ๆอยู่
เสมอ
2.4.2 การนาเว็บไซต์แบบใยแมงมุมไปใช้ เนื่องจากโครงสร้างแบบใยแมงมุม เป็นโครงสร้างที่มี
ความยืดหยุ่นมากที่สุด จึงนิยมใช้ในแวดวงธุรกิจเพื่ออานวยความสะดวกแก่ผุ้เยี่ยมชม หรือผู้ที่คาด
ว่าจะเป็นลูกค้าอย่างเต็มที่
15

20. บทที่ 7 การออกแบบโครงสร้างเว็บไซต์
ควรพิจารณาดังนี้ (รัตน์สุดา ประกะสา, 2547 : 21)
3.1 กาหนดวัตถุประสงค์ โดยพิจารณาว่าเป้าหมายของการสร้างเว็บไซต์นี้ทาเพื่ออะไร
3.2 ศึกษาคุณลักษณะของผู้ที่เข้ามาใช้ว่ากลุ่มเป้าหมายใดที่ผู้สร้างต้องการสื่อสาร ข้อมูลอะไรที่
พวกเขาต้องการโดยขั้นตอนนี้ควรปฏิบัติควบคู่ไปกับขั้นตอนที่หนึ่ง
3.3 วางแผนเกี่ยวกับการจัดรูปแบบโครงสร้างเนื้อหาสาระ การออกแบบเว็บไซต์ต้องมีการจัด
โครงสร้างหรือจัดระเบียบข้อมูลที่ชัดเจน การที่เนื้อหามี ความต่อเนื่องไปไม่สิ้นสุดหรือกระจาย
มากเกินไป อาจทาให้เกิดความสับสนต่อผู้ใช้ได้
3.4 กาหนดรายละเอียดให้กับโครงสร้าง ซึ่งพิจารณาจากวัตถุประสงค์ที่ตั้งไว้ โดยตั้งเกณฑ์ในการ
ใช้ เช่น ผู้ใช้ควรทาอะไรบ้าง จานวนหน้าควรมีเท่าใด มีการเชื่อมโยง มากน้อยเพียงใด
3.5 หลังจากนั้น จึงทาการสร้างเว็บไซต์แล้วนาไปทดลองเพื่อหาข้อผิดพลาดและทาการแก้ไข
ปรับปรุง แล้วจึงนาเข้าสู่เครือข่ายอินเทอร์เน็ตเป็นขั้นสุดท้าย
การออกแบบโครงสร้างเว็บไซต์ (Site Design) เป็นสิ่งสาคัญประการหนึ่งในการพัฒนามัลติมีเดีย
บนเว็บ เพราะช่วยทาให้มองเห็นความสัมพันธ์ของข้อมูลที่มีอยู่ในโครงสร้าง สะดวกต่อการจัดการ
กับการไหลของข้อมูลมัลติมีเดีย ช่วยในการจัดการกับแฟ้ม HTML และแหล่งข้อมูลต่างๆ ทาให้ง่าย
ต่อการค้นหาข้อมูลเหล่านั้น และนากลับมาแก้ไขได้อย่างเป็นระบบความสัมพันธ์ของข้อมูลที่มีอยู่ใน
โครงสร้างเว็บไซต์แยกออกเป็นระดับต่างๆ แต่ละระดับมีรูปสัญลักษณ์ที่ใช้เพื่อแสดงการจัดระดับใน
เว็บไซต์ ดังต่อไปนี้
3. หลักในการออกแบบโครงสร้าง
เว็บไซต์
4. การออกแบบโครงสร้างเว็บไซต์
16

21. บทที่ 7 การออกแบบโครงสร้างเว็บไซต์
(1) ระดับก่อนหน้าโฮมเพจ (Home Splash Page) ใช้สัญรูป
ภาพรูปแทนระดับก่อนหน้าโฮมเพจ
(2) ระดับที่ 1 เป็นระดับของหน้าโฮมเพจแสดงส่วนต่างๆของเนื้อหาสาระซึ่งเป็นระดับของหัวข้อ
หลักเช่นเดียวกับหัวข้อหลักในส่วนต่างๆของหนังสือวารสารนิตยสารหรือหนังสือพิมพ์มีสัญรูปที่
แสดงว่าเป็นเว็บไซต์ระดับที่ 1
ภาพ สัญรูปแทนระดับที่ 1 หรือระดับของหน้าโฮมเพจ
(3) ระดับที่ 2 เป็นระดับที่เป็นข้อมูล (data) จัดเป็นระดับที่เพิ่มรายละเอียดของเนื้อหาเป็น
เสมือนบทแต่ละบท (chapter) ของเว็บไซต์ในแต่ละส่วนนั้นมีสัญรูปเป็นรูปหกเหลี่ยม
ภาพ สัญรูปแทนระดับที่ 2 หรือระดับข้อมูล
(4) ระดับที่ 3 เป็นระดับของแหล่งข้อมูล (resource) เป็นระดับที่แสดงรายละเอียดของข้อมูล
มีสัญรูปเป็นรูปสี่เหลี่ยม
ภาพสัญรูปแทนระดับที่เป็นแหล่งข้อมูล
17

22. บทที่ 7 การออกแบบโครงสร้างเว็บไซต์
(1) โครงสร้างเป็นแนวเส้นตรง (linear design) เมื่อต้องการให้มีการนาเสนอข้อมูลจากส่วนที่
หนึ่งไปส่วนที่สองและส่วนที่สามตามลาดับโดยแต่ละส่วนก็จะมีบทแต่ละบทเรียงลาดับกันพร้อม
รายละเอียดของข้อมูลในแต่ละบทนั้น
ภาพ แสดงโครงสร้างเว็บไซต์เป็นแนวเส้นตรง
(2) โครงสร้างเป็นลาดับชั้น (hierarchical structure) เมื่อมีข้อมูลสัมพันธ์กันที่แยกออกได้เป็น
แต่ละส่วนและแต่ละส่วนนั้นไม่จาเป็นต้องเรียงไปตามลาดับจะไปยังส่วนใดก่อนก็ได้และในแต่ละ
ส่วนเองก็จะมีทางเลือกให้ไปยังบทหรือหัวข้อที่ต้องการเพื่อเข้าสู่รายละเอียดของเนื้อหาในแต่ละ
บทหรือหัวข้อนั้น
ภาพแสดงโครงสร้างเว็บไซต์เป็นลาดับชั้น
18

23. บทที่ 7 การออกแบบโครงสร้างเว็บไซต์
(3) โครงสร้างปิรามิด (pyramidal structure) เป็นโครงสร้างที่จัดวางแหล่งข้อมูลระดับที่ 3 ไว้ใน
ระดับเดียวกันเพื่อใช้งานโครงสร้างลักษณะนี้มีความเหมาะสมเมื่อทุกส่วนของเว็บไซต์ใช้ข้อมูล
ร่วมกันได้แก่เสียงภาพนิ่งภาพเคลื่อนไหววีดิทัศน์เป็นต้น
ภาพแสดงโครงสร้างเว็บไซต์แบบปิรามิด
(4) โครงสร้างเป็นขั้ว (polar structure) เป็นโครงสร้างที่มีความเหมาะสมต่อการนามาใช้เมื่อมี
การจัดแหล่งข้อมูลที่อยู่ในระดับที่ 3 ให้พร้อมใช้งานได้โดยทั่วไปหัวข้อที่อยู่ในระดับที่ 2 และ
ข้อมูลในระดับที่ 3 นั้นเป็นข้อมูลที่เกี่ยวข้องเชื่อมโยงโดยตรงกับหัวข้อในระดับที่ 2
ภาพแสดงโครงสร้างเว็บไซต์เป็นขั้ว
19

24. บทที่ 8 ส่วนประกอบของเว็บไซต์
ส่วนประกอบของเว็บไซต์ที่ดีสาหรับคนที่เริ่มต้นออกแบบเว็บไซต์ในครั้งแรกไม่รู้ว่าจะเริ่มอย่างไรดี
บทความนี้จะแนะนาวิธีการในการออกแบบเว็บไซต์ที่เว็บทั่วไปควรมี ดังรูปที่เห็นด้านบนเป็น
โครงสร้างของเว็บไซต์โดยจะมีส่วนหลักๆอยู่ด้วยกันทั้งหมด 6 ส่วนดังนี้
1. Containing block โดยปรกติเราจะเขียน<div>หรือ<table>ต่อจาก<body>เพื่อ
เอาไว้เก็บเนื้อหาทั้งหมดของเว็บไซต์ก่อน เพื่อเอาไว้เป็นกล่องในการเก็บเนื้อหาทั้งหมด
2. Logo เป็นสัญลักษณ์ที่แสดงถึงตัวตนของเรา
ส่วนประกอบของเว็บไซต์
บทที่ 8 ส่วนประกอบของเว็บไซต์
20

25. บทที่ 8 ส่วนประกอบของเว็บไซต์
3. Navigation เป็นส่วนที่จะนาผู้เข้าชมเว็บไซต์ไปยังส่วนต่างของเว็บไซต์ โดยสามารถทา
ให้อยู่ในแนวนอน หรือแนวตั้งก็ได้
4. Content ส่วนเนื้อหาของเว็บไซต์ เป็นส่วนที่สาคัญมากที่สุด หากผู้ใช้งานไม่สามารถ
เข้าถึงได้โดยง่ายผู้ใช้งานจะเปลี่ยนไปชมเว็บใหม่ทันที ตาแหน่งที่ควรวางเนื้อหาไว้คือสีแดง หรือ
ตาแหน่งอื่นๆที่คิดว่าจะทาให้ผู้หาเจอได้โดยไม่ลาบาก หากสังเกตดูจะพบว่าเว็บไซต์บางเว็บไซต์มี
โฆษณาที่มากจนเกินไป ทาให้ผู้ใช้งานหาเนื้อหาไม่เจอ นั่นถือเป็นการออกแบบที่ผิดพลาด
5. Footer คือส่วนล่างสุดของหน้าเว็บไซต์ ส่วนใหญ่จะเก็บลิงก์ต่างๆเอาไว้ หรือเป็น
เนื้อหาที่เกี่ยวกับเว็บไซต์เช่นลิขสิทธิ์ต่างๆ
6. Whitespace พื้นที่ว่างในเว็บไซต์ คนส่วนใหญ่มักไม่เห็นความสาคัญของการเว้นพื้นที่
ว่างไว้ในเว็บไซต์ เรามักจะใส่ภาพหรือตัวหนังสือเข้าไปให้มากที่สุดเพราะคิดว่าจะทาให้เว็บดู
สวยงามขึ้น
21

26. บทที่ 9 กระบวนการพัฒนา
ธวัชชัยศรีสุเทพ (2544) สรุปกระบวนการพัฒนาเว็บไซต์ออกมาเป็น 13 ขั้นตอนดังภาพ
ขั้นตอนที่ 1สารวจปัจจัยสาคัญ (Research)
1. รู้จักตัวเอง-กาหนดเป้าหมายและสารวจความพร้อม
2. เรียนรู้ผู้ใช้-ระบุกลุ่มผู้ใช้และศึกษาความต้องการ
3.ศึกษาคู่แข่ง-สารวจการแข่งขันและเรียนรู้คู่แข่ง
ขั้นตอนที่ 2พัฒนาเนื้อหา (Site Content)
4.สร้างกลยุทธ์การออกแบบ
5.หาข้อสรุปขอบเขตเนื้อหา
ขั้นตอนที่ 3พัฒนาโครงสร้างเว็บไซต์ (Site Structure)
6.จัดระบบข้อมูล
7.จัดทาโครงสร้างข้อมูล
8. พัฒนาระบบเนวิเกชั่น
ขั้นตอนที่ 4ออกแบบและพัฒนาหน้าเว็บ(Visualdesign)
9.ออกแบบลักษณะหน้าตาเว็บเพจ
10.พัฒนาเว็บต้นแบบและข้อกาหนดสุดท้าย
ขั้นตอนที่ 5 พัฒนาและดาเนินการ(Production and Operation)
11.ลงมือพัฒนาเว็บเพจ
12 .เปิดตัวเว็บไซต์
13. ดูแลและพัฒนาต่อเนื่อง
บทที่ 9 กระบวนการพัฒนา
22

27. บทที่ 10 ประเภทของเว็บไซต์
ประเภทของเว็บไซต์มี 9 ประเภทดังนี้
1. Online Store :เว็บจาหน่ายสินค้า เช่นเว็บไซต์ http://www.chulabook.com/ ขาย
หนังสือของสานักพิมพ์จุฬาลงกรณ์วิทยาลัย
ภาพของหน้าเว็บไซต์ Online Store
2. Online service provider :ให้บริการออนไลน์ เช่น
http://www.thaitravelcenter.com ให้บริการด้านการท่องเที่ยวและอานวยความสะดวกด้าน
การจองที่พักออนไลน์
ภาพของหน้าเว็บไซต์ Online service provider
บทที่ 10 ประเภทของเว็บไซต์
23

28. บทที่ 10 ประเภทของเว็บไซต์
3. Online Brochure &Catalog :เว็บให้ข้อมูลองค์กร สินค้าบริษัท เช่น
http://www.seacon.co.th/ ให้ข้อมูลองค์กรว่าเป็นบริษัทรับสร้างบ้าน
ภาพของหน้าเว็บไซต์ Online Brochure &Catalog
4. Portal Website :เว็บท่ารวมบริการต่างๆ สาระบันเทิง http://sanook.com/
เว็บไซต์ที่รวมบริการและความบันเทิงต่างๆ
ภาพของหน้าเว็บไซต์ Portal Website
24

29. บทที่ 10 ประเภทของเว็บไซต์
5. Online Publisher/Content site :เว็บข้อมูลที่เป็นประโยชน์
http://www.tourthailands.com/ บริการด้านข้อมูลท่องเที่ยวให้แก่ผู้ที่สนใจ
ภาพของหน้าเว็บไซต์ Online Publisher/Content
6. Online mall :แหล่งซื้อขายสินค้า รายได้จากคอมมิชชั่น ค่าประกาศ และโฆษณา
http://www.weloveshopping.com/ เว็บไซต์ที่ประกาศขายสินค้า และโฆษณาของสมาชิก
ภาพของหน้าเว็บไซต์ Online mall
25

30. บทที่ 10 ประเภทของเว็บไซต์
7. Online Community :เว็บชุมชนออนไลน์http://www.pantipmarket.com/ ชุมชน
ที่มีการแลกเปลี่ยนความคิดเห็นในเรื่องต่างๆตามที่สนใจ
ภาพของหน้าเว็บไซต์ Online Community
8. Affiliate Marketer :เว็บที่สร้างรายได้จากการเป็นนายหน้าออนไลน์
http://webhostinggeeks.com/ เว็บไซต์ที่จาหน่าย web hosting
ภาพของหน้าเว็บไซต์ Online Community
26

31. บทที่ 10 ประเภทของเว็บไซต์
9. Social Media Website :เว็บสังคมออนไลน์รุ่นใหม่http://www.facebook.com/
ภาพของหน้าเว็บไซต์ Social Media Website
27

32. บทที่ 11 การประเมินเว็บไซต์
แนวทางในการประเมินเว็บไซต์มีดังนี้ (prachyanun, 2552 :ไม่ปรากฏหน้า)
1. หน้าที่ของเว็บไซต์ (Authority)เกี่ยวกับหน้าที่ของเว็บที่สร้างขึ้นนั้นต้องดูว่าใครหรือผู้ใช้เว็บ
นี้ อะไรคือความถูกต้อง เหมาะสม ชอบธรรม ระหว่างความสัมพันธ์ของเรื่อง และ การรับประกัน
คุณภาพของ
เว็บเพจนี้ที่มีต่อผู้ชม
2. ความถูกต้อง (Accuracy)แหล่งข้อมูลและข้อเท็จจริงที่นามาสร้างเว็บสามารถแยกแยะเป็น
ประเด็นรายการต่างๆ สามารถตรวจสอบย้อนหลังได้หรือไม่
3. จุดประสงค์ (Objective)จุดมุ่งหมายในการสร้างชัดเจนและบอกความสัมพันธ์ของสิ่งที่
ต้องการนั้นชัดเจน
4. ความเป็นปัจจุบัน (Currency)เว็บเพจที่สร้างขึ้นนั้นต้องแสดงวันที่ที่เป็นปัจจุบันด้วย เช่น
บอกว่าสร้างเมื่อใด และมีการแก้ไขครั้งหลังสุดเมื่อใด
5. ความครอบคลุม (Coverage)การสร้างเว็บไซต์ต้องให้ตรงกับจุดสนใจ หัวเรื่องมีความชัดเจน
เหมาะกับรูปภาพ โครงเรื่องและเนื้อหาสาระวิธีการค้นหาข้อมูลในเว็บไซต์
ชัดเจนฯ
บทที่ 11 การประเมินเว็บไซต์
28

33. บทที่12 การโปรโมทเว็บไซต์
การโปรโมทเว็บไซต์ คือ การโฆษณาเผยแพร่เว็บไซต์ที่เราสร้างขึ้นให้เป็นที่รู้จักอย่างทั่วถึง
โดยเฉพาะให้เป็นที่รู้จักของผู้ที่ใช้อินเทอร์เน็ต ถือเป็นกลยุทธ์อย่างหนึ่งสาหรับใช้แจ้งข่าวสาร
เพื่อเชิญชวนให้นักท่องเว็บได้เข้ามาเยี่ยมชมเว็บไซต์ของตน
โดยทั่วไปแล้วนักท่องเว็บมักจะทาการค้นหาข้อมูลของเว็บไซต์ผ่านทางเครื่องมือ
ประเภทเว็บไดเรกทอรี่ และ Search Engine จึงสามารถนามาใช้เป็นช่องทางในการโปรโมท
เว็บไซต์
1. การโปรโมทเว็บไซต์แบบออฟไลน์เป็นการโฆษณาผ่านทางสื่อหนังสือพิมพ์โดยการลง
โฆษณาในหนังสือพิมพ์ทั่วๆไป
2. การโปรโมทเว็บไซต์แบบออนไลน์
วิธีการโฆษณาแบบออนไลน์
การลงโฆษณาในเว็บไซต์ดังๆ เช่น Sanook.com , Pantip.com , Thai2hand.com เป็น
ต้น
โดยการเข้าไปโพสท์หรือลงประกาศในเว็บบอร์ดต่างๆของหลายๆเว็บไซต์ที่มีบอร์ดสาหรับ
ประกาศซื้อขายหรือลงโฆษณา ซึ่งเป็นบริการฟรี
โดยการแลกลิ้งค์กับพันธมิตร โดยเฉพาะเว็บไซต์หรือบล็อกที่มีเนื้อหาเกี่ยวข้องกับเรา จะ
ช่วยให้มีคนมาเยี่ยมชมในระดับหนึ่งได้
การโปรโมทเว็บไซต์ผ่าน Search Engine การโปรโมทประเภทนี้จะให้ผลตรงจุดมากที่สุด
ผู้คนในโลกออนไลน์ในปัจจุบันนิยมค้นหาข้อมูลต่างๆ
ภาพของเว็บไซต์ที่ใช้ Search Engine
บทที่12 การโปรโมทเว็บไซต์
29

34. บทที่ 13. องค์ประกอบของเว็บไซต์
สามารถแบ่งออกเป็น 4 ส่วน ได้แก่
- ส่วนหัวของหน้า(Page Header)
- ส่วนของเนื้อหา(Page Content)
- ส่วนคอลัมน์การเชื่อมโยง(Page Sidebar)
- ส่วนท้ายของหน้า(Page Footer)
- ความเรียบง่าย
- ความสม่าเสมอ
- ความเป็นเอกลักษณ์
- เนื้อหาที่มีประโยชน์
- ระบบเนวิเกชั่นที่ใช้งานง่าย
- มีลักษณะที่สวยงามน่าดึงดูดใจ
- การใช้งานอย่างไม่จากัด
- คุณภาพในการออกแบบ
- ระบบการใช้งานที่ถูกต้อง
บทที่ 13 องค์ประกอบของเว็บไซต์
องค์ประกอบของเว็บไซต์
องค์ประกอบของเว็บไซต์ที่ดี
30

35. บทที่ 14 องค์ประกอบของการจัดทาเว็บเพจ
1. ข้อมูล(data) เป็นข้อเท็จจริงต่างๆที่ได้จากการดาเนินการ ซึ่งจะช่วยในการตัดสินใจ
การรวบรวมข้อมูลข่าวสารและการเขียนเว็บเพจผู้เขียนจาเป็นต้องเรียนรู้การเขียน โดยเฉพาะ
HTML ซึ่งเป็นภาษาสากลสาหรับเขียนเว็บ
2. การกาหนดขนาดของแต่ละละหน้าเอกสารในเว็บเพจ
3. การกาหนดสีของตัวอักษรและสีพื้น การใช้สีตัวอักษรกับสีพื้นทาให้อ่านง่าย ควรมีการ
จัดคู่สีตัวนี้ อักษรขาว พื้นสีน้าเงิน อักษรเหลืองพื้นสีน้าเงิน อักษรเขียวพื้นสีม่วง อักษรเหลือง
พื้นสีเขียว
4. การใช้ตัวอักษรในเว็บเพจ การเลือกตัวอักษรแบบเรียบสุภาพ หรือดูเด่นสะดุดตา
สอดคล้องกับองค์ประกอบอื่น ๆ และเนื้อหา ตลอดจนจุดประสงค์ของเว็บเพจนั้น ๆ
5. ลักษณะโครงสร้างของตัวอักษร ตัวอักษรที่อ่านได้ง่าย คือ อักษรตัวหนาและมีหัว เช่น
มานพ 2 จากการที่มีความแตกต่างระหว่างแต่ละตัวอักษรอย่างชัดเจน
6. สิ่งที่ช่วยอานวยความสะดวก
7. รูปแบบที่เป็นสากล เนื่องจากการเผยแพร่ข้อมูลบนเครือข่ายเวิลด์ไวด์เว็บ มีผู้อ่าน
หลายเชื้อชาติภาษา ดังนั้นจึงควรเลี่ยงคาเฉพาะที่ไม่เป็นที่เข้าใจ โดยทั่วไปหรือตัวย่อที่คลุมเครือ
บทที่ 14 องค์ประกอบของการจัดทาเว็บ
เพจ
31

36. บทที่ 15 ขั้นตอนการจัดทาเว็บเพจ
ธวัชชัย ศรีสุเทพ (2544,หน้า 31) ได้กล่าวถึงกระบวนการพัฒนาเว็บไซต์ โดยที่
กระบวนการพัฒนาเว็บไซต์นั้น จะต้องมีกระบวนการ13 ขั้นตอน ดังนี้
1. กาหนดจุดเป้าหมายและสารวจความพร้อม
2. ระบุกลุ่มผู้ใช้และศึกษาความต้องการ
3. สารวจการแข่งขันและเรียนรู้ผู้แข่ง
4. สร้างกลยุทธ์การออกแบบ
5. หาข้อสรุปขอบเขตเนื้อหา
6. จัดระบบข้อมูล
7 . จัดทาโครงสร้างข้อมูล
8. พัฒนาระบบเนวิเกชั่น
9. ออกแบบลักษณะหน้าตาเว็บไซต์
10. พัฒนาเว็บต้นแบบและข้อกาหนดสุดท้าย
11. ลงมือพัฒนาเว็บไซต์
12. เปิดตัวเว็บไซต์
13. ดูแลและพัฒนาอย่างต่อเนื่อง
บทที่ 15 ขั้นตอนการจัดทาเว็บเพจ
32

37. บทที่16 หลักการออกแบบเว็บเพจที่ดี
หลักการออกแบบเว็บเพจที่ดีมีดังต่อไปนี้
1. ความเป็นเอกลักษณ์ (Identity)
2. ความน่าเชื่อถือ
3. ความเป็นเอกภาพ (Unity)
4. ลักษณะน่าสนใจ (Visual Appeal)
5. ความสมดุล (Balancing)
6. ความแตกต่าง (Contrast)
7. ความกลมกลืน(Harmony)
8. ความเรียบง่าย (Simplicity)
9. ความสมบูรณ์ขั้นสาเร็จ (Finish)
บทที่16 หลักการออกแบบเว็บเพจที่ดี
33

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

39. บรรณานุกรม
กฤณัฐ สัตยสุนทร .(2552). การออกแบบเว็บไซต์การศึกษาสาหรับการเรียนรู้
ประวัติศาสตร์ซ : กรณีศึกษางานวิจัยแวดเวียงเชียงใหม่ .วิทยานิพนธ์ศิลปสตรมหาบัณทิต
มหาวิทยาลัยเชียงใหม่.
การศึกษาประสิทธิภาพการเรียนการสอนผ่านเว็บเพจของนักศึกษาวิทยาลัยพยาบาลที่
สังกัดกระทรวงสาธารณสุข. (2543, หน้า 18-21).
จิราภรณ์ หนูสวัสดิ์. (2554). การพัฒนารูปแบบการเรียนการสอนแบบบูรณาการผ่าน
เว็บตามแนวทฤษฎีการขยายความคิดเพื่อส่งเสริมผลสัมฤทธิ์ทางการเรียน ความสามารถ
ในการแก้ปัญหาและการถ่ายโยงการเรียนรู้ของผู้เรียนในระดับอุดมศึกษา. วิทยานิพนธ์ดุษฎี
บัณฑิต มหาวิทยาลัยเทคโนโลยีพระจอมเกล้าพระนครเหนือ.
ใจทิพย์ ณสงขลา. (2542). การสอนผ่านเครือเครือเวิลด์ไวด์เว็บ. กรุงเทพ: จุฬาลงกรณ์
มหาวิทยาลัย.
ณรงค์ชัย บุญศรี (2550) การพัฒนาเว็บไซต์สถาบันอินทรีจันทรสถิตย์เพื่อการค้นคว้าและ
พัฒนาพืชศาสตร์มหาวิทยาลัยเกษตรศาสตร์. วิทยานิพนธ์ศึกษาศาสตรมหาบัณฑิต คณะ
ศึกษาศาสตร์.
นัฐพงษ์ เจนวีรวัฒน์.(2546).การพัฒนาเว็บไซต์ของบัณวิทยาลัย มหาวิทยาลัยบูรพา.
วิทยานิพนธ์หลักสูตรปริญญาการศึกษามหาบัณฑิต สาขาวิชาเทคโนโลยีทางการศึกษาบัณฑิต
มหาวิทยาลัยบรูพา.
ประชาสัมพันธ์เว็บไซต์. ค้นเมื่อ 29มิถุนายน 2556. จาก
http://www.iwebpack.com/tutor.php?id=26

40. บรรณานุกรม (ต่อ)
พงศ์ศักดิ อภิลักขิตพงศ์. 2552. สร้างเว็บไซต์ในพริบตาด้วยJoomla! ฉบับสมบูรณ์.
สานักพิมพ์ซีเอ็ดยูเคชัน , กรุงเทพฯ.
มหาวิทยาลัยเกษตรศาสตร์วิทยาลัยสารพัดช่างพระนคร. (2549). โครงสร้างเว็บไซต์.ค้น
เมื่อ29มิถุนายน 2556. จาก
http://202.29.42.235/~eleaning/index.php?option=com_content&view.
ศิริพร มณีจันทร์, (2549). การพัฒนาเว็บไซต์. กรุงเทพฯ:เธิร์ดเอ็ดยูเคชั่น.
ส่วนประกอบของเว็บไซต์ที่ดี. ค้นเมื่อวันที่8 กรากฎาคม 2556 . จาก
http://www.hellomyweb.com/index.php/main/content/134
สุพล กิตติเพิ่มพูนวงศ์ .(2546).การพัฒนาเว็บไซต์เพื่อเผยแพร่ความรู้ด้านวิทยาศาสตร์และ
เทคโนโลยีบนเครือข่ายอินเทอร์เน็ต .วิทยานิพนธ์หลักสูตรปริญญาการศึกษามหาบัณฑิต
มหาวิทยาลัยบรูพา.
สาวิตรี ลุ่มงาม. (2554). แนวทางการพัฒนาเว็บไซต์.ค้นเมื่อ 29มิถุนายน 2556. จาก
http://www.cybered.co.th/warnuts/wbi/index3.htm.
เสถียร พลวงศ์. (2549). ความหมายของสี.ค้นเมื่อ 29มิถุนายน 2556. จาก
http://www.pointstudio.Net/wpoint/content/View/17/28.
หัสนัย ริยาพันธ์. (2554, หน้า 11-14). การพัฒนาเว็บไซต์ศาลาพุ่มข้าวบิณฑ์
มหาวิทยาลัยสุโขทัยธรรมาธิราช (The Development of WebSite on Sala Phum Khao Bin,
Sukhothai Thammathirat Open University).
อเนก ปิ่นศรี.(2552). ความรู้เบื้องต้นเกี่ยวกับการออกแบบเว็บไซต์.กรุงเทพฯ: เคทีพี.
Hellomyweb. (2554). ส่วนประกอบของเว็บไซต์ที่ดี.ค้นเมื่อ29มิถุนายน 2556. จาก
เอก บารุงศรี.(2549).การพัฒนารูปแบบเว็บไซต์มหาวิทยาลัย กรณีศึกษา เว็บไซต์ภาค
วิทยาการคอมพิวเตอร์ มหาวิทยาลัยสยาม .วิทยานิพนธ์ปริญญาครุศาสตร์อสาหกรรมบัณฑิต
มหาวิทยาลัยเทคโนโลยีพระจอมเก้าธนบุรี.