หนังสือเล่มเล็ก หลักการออกแบบเว็บไซต์

1. บทนำ
จากกระแสของสังคมที่ได้รับผลกระทบของความก้าวหน้าทางเทคโนโลยีเครื่องมือ
สื่อสาร ตลอดจนสารสนเทศออนไลน์ต่างๆ นั้นทาให้เกิดการเปลี่ยนแปลงในการดาเนิน
ชีวิตการทางาน และการเรียนรู้ของเราจะเห็นได้ว่าการเรียนรู้ของเรานั้นได้พึ่งสารสนเทศ
ออนไลน์ต่างๆ มากยิ่งขึ้น ดังเช่นการใช้เทคโนโลยีในการเรียนการสอนปัจจุบันที่หลาคน
เชื่อว่าจะเข้ามาตอบโจทย์ ในเรื่องของการจัดการเรียนให้มีประสิทธิภาพอย่างสูงสุดสื่อ
การเรียนการสอนมีอยู่หลายประเภทด้วยกัน ไม่วาจะเป็นสื่อพื้นฐาน สื่อคอมพิวเตอร์
ช่วยสอนหรือสื่อเว็บไซต์ทางการศึกษาที่หลายๆคนเชื่อว่าจะเข้ามาช่วยเสริมในเรื่องของ
ข้อจากัดของเวลาและสถานที่ที่จะเอื้อให้ผู้เรียนสามารถเข้ามาศึกษาหาความรู้ ที่ไหและ
เวลาใดก็ได้
โดยสื่อเว็บไซต์ทางการศึกษาถือ ว่าเป็นสื่อการเรียนการสอนที่สนับสนุนให้ผู้เรียน
ได้ศึกษาเรียนรู้ด้วยตนเอง ส่งเสริมปฏิสัมพันธ์ผ่านเครือข่ายออนไลน์ทั้งกับผู้เรียนด้วยกัน
เอง และระหว่างผู้เรียนกับผู้สอน ด้วยแนวคิดที่ว่าการเรียนการสอนในลักษณะนี้จนาไปสู่
การสร้างองค์ความรู้ ใหม่ๆ ด้วยตนเองผ่านสังคมแห่งการเรียนรู้ออนไลน์
นอกจากนี้ในปัจจุบัน จะเห็นได้ ว่าคุณประโยชน์ของเว็บไซต์ ที่เป็นแหล่งเก็บ
รวบรวมข้อมูลทุกชนิดได้มากมายมหาศาล ร่วมกับอิทธิพลของอินเทอร์เน็ตที่มีต่อ
การศึกษาโดยเฉพาะในเรื่องของการขยายโอกาสทาง
ฉะนั้นรูปแบบของการเรียนการสอนควรเน้นสอนวิธีการเรียนให้ผู้เรียน ไม่ใช่สอน
แต่เนื้อหาวิชาเพียงอย่างเดียว (Teaching how to learn - not what to learn) และ
การเรียนการสอนในรูปแบบนี้ยังเป็นการส่งเสริมทักษะการเรียนรู้ตลอดชีวิต (Lifelong
learning) อีกด้วย
ดังนั้น อาจเรียกได้ว่า เว็บไซต์ทางการศึกษาที่มีคุณภาพย่อมส่งผลให้ผู้เรียน
ประสบความสาเร็จและมีคุณภาพในการเรียนรู้เช่นกัน โดยเว็บไซต์ทางการศึกษาได้
อธิบายรายละเอียดเกี่ยวกับความเป็นมา ความหมาย ทฤษฎีการศึกษาและหลักการ
พื้นฐานสาหรับการออกแบบและพัฒนาเว็บไซต์ทางการศึกษา องค์ประกอบ ขั้นตอนการ
ออกแบบและ พัฒนาเว็บไซต์ทางการศึกษา โครงสร้างเว็บไซต์ทางการศึกษา และศึกษา
การออกแบบเว็บไซต์ทางการศึกษา ดังต่อไปนี้

2. บทที่ 1
ควำมหมำยเว็บไซต์ทำงกำรศึกษำ
การนาเว็บไซต์ทางการศึกษาไปใช้ในการเรียนการสอนนั้นจะมีการใช้ในรูปแบบที่
ต่างๆกัน ไม่ว่าจะเป็นการใช้เป็นสื่อเสริมในการเรียนการสอนแบบใช้เว็บช่วยการใช้เป็น
สื่อหลักในการเรียนการสอนแบบออนไลน์และการเรียนการสอนแบบผสมผสาน
การศึกษาออนไลน์ในสหรัฐอเมริกา พ.ศ. 2548” (Growing by Degrees: Online
Education in the United States, 2005) ของสมาคมสโลน คอนซอร์เทียม (Sloan
Consortium Foundation)
สรุปได้ว่า ความเป็นมาของการเรียนการสอนอีเลิร์นนิ่ง เริ่มจากวิวัฒนาการ 5 ยุค
ของการศึกษาทางไกล ซึ่งเริ่มตั้งแต่ยุคของการใช้ชุดเอกสารส่งผ่านทางไปรษณีย์ จากนั้น
เป็นช่วงของการเผยแพร่สื่อต่างๆทางรายการโทรทัศน์การใช้จานดาวเทียมเพื่อส่ง
สัญญาณต่อมาเป็นยุคของการเรียนแบบใช้บทเรียนการเรียนการสอนโดยใช้คอมพิวเตอร์
ช่วยสอน (Computer-Assisted Instruction: CAI) บทเรียนการเรียนการสอนบนเว็บ
(Web-Based Instruction: WBI) จนถึงในยุคปัจจุบัน ซึ่งเน้นที่การเรียนการสอนผ่าน
เว็บหรือ อีเลิร์นนิง ที่เน้นในเรื่องของการเรียนการสอนแบบ Anyone from Anywhere
and at Anytime ที่ไม่มีข้อจากัดของเวลาและสถานที่ เน้นในเรื่องของเทคโนโลยี WEB
2.0 Technology ที่เน้นการปฏิสัมพันธ์ระหว่างกันมากขึ้น และเรื่องของ Online
Learning Community หรือสังคมแห่งการเรียนรู้อีกด้วย

3. ทฤษฎีทำงกำรศึกษำและหลักกำรพื้นฐำนสำหรับกำรออกแบบและพัฒนำเว็บไซต์ทำง
กำรศึกษำ
ประกอบด้วย 5 ส่วนหลักคือ
(1) ทฤษฎีการเรียนรู้
(2) ทฤษฎีระบบ
(3) ทฤษฎีการติดต่อสื่อสาร
(4) รูปแบบการเรียนการสอน
(5) การศึกษาทางไกล
1) ทฤษฎีกำรเรียนรู้
ทฤษฎีพฤติกรรมนิยม (Behaviorist Theory)
นักจิตวิทยาการศึกษา ได้แก่ Thorndike (1913) Pavlov (1927) และ
Skinner(1974) เชื่อว่าการเรียนรู้คือการเปลี่ยนแปลงพฤติกรรมที่สามารถสังเกตเห็นได้
เกิดจากการให้สิ่งเร้าจากภายนอกในสภาพแวดล้อมการเรียนรู้ นักจิตวิทยากลุ่มนี้เชื่อว่า
พฤติกรรมที่สังเกตเห็นได้เป็นการบ่งชี้อย่างชัดเจนของการเรียนรู้ที่เกิดขึ้น ไม่ใช่สิ่งที่อยู่
ในความคิดของผู้เรียน
ดังนั้น แนวทางปฏิบัติของการนาแนวคิดของนักจิตวิทยากลุ่มพฤติกรรมนิยมไปใช้
คือควรมีการแจ้งให้ทราบว่าวัตถุประสงค์ของการเรียนการสอนคืออะไร เพื่อให้ผู้เรียน
เกิดความเข้าใจและตั้งความคาดหวัง จนสามารถประเมินตนเองว่าจะสามารถได้รับผล
การเรียนรู้ประจาบทเรียนนั้นๆหรือไม่ ผู้เรียนจะต้องได้รับการประเมินผลการเรียนการ
สอนเพื่อให้ทราบว่า ตนเองมีผลการเรียนรู้
เป็นไปตามที่กาหนดไว้หรือไม่ ทั้งนี้อาจมาจากการให้ข้อมูลป้อนกลับที่เหมาะสมทั้งใน
ภาพรวมและในทุกๆ ขั้นตอนของการเรียนการสอน เพื่อให้ผู้เรียนสามารถ
ตรวจสอบได้ว่าตนเองกาลังเกิดการเรียนรู้ที่ถูกต้องหรือไม่
2

4. ทฤษฎีพุทธิปัญญำ (Cognitive Theory)
นักจิตวิทยาและนักการศึกษากลุ่มพุทธิปัญญา เชื่อว่าการเรียนรู้บางเรื่องไม่
สามารถสังเกตเห็นได้จากพฤติกรรมที่แสดงออกและการเรียนรู้ที่เกิดขึ้นมีมากกว่าการวัด
ด้วยพฤติกรรมที่เปลี่ยนแปลง นักจิตวิทยาและนักการศึกษากลุ่มนี้จึงศึกษาเกี่ยวกับการ
เรียนรู้ที่เกี่ยวข้องกับการใช้ความจา แรงจูงใจ และการคิดตลอดจนการสะท้อนที่แสดงให้
เห็นถึงกระบวนการเรียนรู้ของผู้เรียน ซึ่งนักจิตวิทยากลุ่มนี้พิจารณาว่าการเรียนรู้เป็น
กระบวนการที่เกิดขึ้นภายในของผู้เรียน ตามความสามารถในการเรียนรู้ของแต่ละบุคคล
ปริมาณความสามารถ ความพยายามที่ทุ่มเทระหว่างกระบวนการเรียนรู้ และความ
ซับซ้อนของการประมวลผล ตลอดจนโครงสร้างความรู้เดิมของผู้เรียน
ดังนั้น แนวทางปฏิบัติของการนาแนวคิดของนักจิตวิทยาและนักการศึกษากลุ่ม
พุทธิปัญญาไปใช้ได้คือ การใช้กลวิธีที่ให้ผู้เข้ารับการเรียนการสอนได้เข้าถึงสื่อการเรียน
ได้มากที่สุด เพื่อให้ผู้เข้ารับการเรียนการสอนสามารถถ่ายโอนสิ่งที่ได้รับผ่านประสาท
สัมผัสไปยังหน่วยความจาระยะสั้น เช่น การอ่าน การมอง และการสัมผัส นอกจากนี้การ
จัดลาดับเนื้อหาอย่างเป็นระบบเรียงลาดับจากง่ายไปยากและแสดงถึงความเชื่อมโยง
เช่น การใช้ผังความคิดล่วงหน้า (Advanced Organizer) จะช่วยให้ผู้เข้ารับการเรียน
การสอนเกิดการจดจาและระลึกถึงข้อมูลนั้นๆ ได้ดียิ่งขึ้น
ทฤษฎีคอนสตรัคติวิสต์ (Constructivist Theory)
นักทฤษฎีกลุ่มคอนสตรัคติวิสต์มีความคิดเห็นในเรื่องการเรียนรู้ของผู้เรียน โดย
นักทฤษฎีกลุ่มนี้เห็นว่าผู้เรียนแต่ละคนมีการแปลความหมายของข้อมูลที่ได้รับและการ
แปลความสิ่งที่อยู่รอบตัวตามการรับรู้ของแต่ละบุคคล ซึ่งมีผู้สอนทาหน้าที่เป็นผู้ช่วย
สนับสนุนการเรียนรู้ และให้คาแนะนาสนับสนุนการเรียนรู้ (facilitator, coach) โดย
ผู้สอนจะเป็นผู้ให้คาแนะนามากกว่าเป็นผู้ถ่ายทอดความรู้ กิจกรรมการเรียนจึงเน้น
สถานการณ์การเรียนรู้ ซึ่งผู้เรียนจะต้องประยุกต์ใช้ ความรู้ในการแก้ปัญหา
ดังนั้น การประยุกต์ใช้ทฤษฎีคอนสตรัคติวิสต์สาหรับการเรียนการสอน คือการ
จัดการเรียนรู้ที่ให้ผู้เข้ารับการเรียนการสอนมีส่วนร่วมและวิทยากร
ตั้งคาถามหรือเสนอสถานการณ์ปัญหากระตุ้นให้ผู้เข้ารับการเรียนการสอนคิดวิเคราะห์
และคิดแก้ปัญหา วิทยากรในฐานะที่เป็นผู้สนับสนุนการเรียนรู้จะต้องจัดเตรียม
3

5. แหล่งข้อมูลให้เพียงพอต่อการเรียนรู้ของผู้เข้ารับการเรียนการสอน อันจะนาไปสู่
การสร้างองค์ความรู้ใหม่ตามความเข้าใจของผู้เรียน นอกจากนี้การเรียนแบบร่วมมือ
(Collaborative learning) ยังช่วยกระตุ้นให้ผู้เข้ารับการเรียนการสอนแลกเปลี่ยนความ
คิดเห็นและร่วมกันทางานให้เสร็จตามที่ได้รับมอบหมาย และมีปฏิสัมพันธ์กับผู้อื่น ซึ่งจะ
นาไปสู่การเรียนรู้เพื่อส่งเสริมการเรียนรู้ขั้นสูง (higher order learning) และเกิดชุมชน
แห่งการเรียนรู้ (learning community) อีกด้วย
สรุปได้ว่ำ การใช้ความรู้ของทฤษฎีการเรียนรู้ทั้ง 3 กลุ่ม ได้แก่
พฤติกรรมนิยม พุทธิปัญญา และคอนสตรัคติวิสต์ ล้วนมีวัตถุประสงค์เดียวกัน
คือเพื่อให้ผู้เรียนบรรลุเป้าหมายการเรียนรู้ที่ได้กาหนดไว้ ตามด้วยลักษณะของความรู้
และวัตถุประสงค์ที่ต่างกัน ทฤษฎีทั้ง 3 นี้จึงเหมาะสมในสถานการณ์ที่แตกต่างกันไป
เช่น
ทฤษฎีกลุ่มพฤติกรรมนิยมจะเหมาะกับการเรียนการสอนที่เน้นข้อเท็จจริง
ในขณะที่หลักการจาก
ทฤษฎีพุทธิปัญญาจะเหมาะกับการเรียนการสอนที่เน้นหลักการและกระบวนการ
และหลักการ
ทฤษฎีคอนสตรัคติวิสต์จะเหมาะกับการเรียนการสอนที่เน้นทักษะการคิดระดับสูง
(Ally, 2006; Waterhouse, 2005)
2) ทฤษฎีระบบ (Systems Theory)
ประกอบด้วยองค์ประกอบ 2 ส่วนคือSystemic เชื่อว่าผู้เรียนสามารถเรียนรู้ได้ดี
ที่สุดผ่านการออกแบบการสอนอย่างเป็นระบบ(organized approach) นาไปสู่
นวัตกรรมการสอน (instruction innovation) ซึ่งอาจอยู่ในรูปแบบของผลงานใน
ภาพรวมหรือกระบวนการ ในขณะที่ Systematic พิจารณาแนวคิดจากนวัตกรรมซึ่งอาจ
อยู่ในรูปของผลงาน กฎเกณฑ์ หรือกระบวนการที่ได้นาไปเผยแพร่หรือปรับใช้ในองค์กร
โดยเน้นที่ผลลัพธ์ที่ได้จากนวัตกรรมนั้นๆ
4

6. 3) ทฤษฎีกำรติดต่อสื่อสำร (Communication Theory)
ถือเป็นองค์ประกอบสาคัญองค์ประกอบหนึ่งซึ่งจะเน้นในเรื่องของกระบวนการ
ส่งผ่านและถ่ายโอนข้อมูล (Message) ให้มีประสิทธิภาพสูงสุดจากผู้ส่งสาร (Sender)
ไปยังผู้รับสาร (Receiver) และผลย้อนกลับ (Feedback) จากผู้รับสารมายังผู้ส่งสาร
และการลดสิ่งแทรกแซง (noise) ให้ได้มากที่สุด เพื่อให้ผู้รับสารได้รับข้อมูลที่กระจ่าง
และถูกต้องที่สุด ดังนั้น การออกแบบสาร (Message Design) จึงถือเป็นองค์ประกอบ
สาคัญในการออกแบบการสอนแบบออนไลน์ไม่ว่าจะเป็นในเรื่องของการออกแบบหน้า
เว็บที่เหมาะสม (webpage layout) การประยุกต์ใช้หลักการติดต่อสื่อสาร
(Communication principle) เพื่อสร้างระบบนาทางที่เหมาะสม (Navigation) ด้วย
การใช้ปุ่ม (buttons) สัญลักษณ์รูป (icon) และการเชื่อมโยง (hypermedia) ด้วย
ข้อความ (text) และสื่อรูปแบบต่างๆ เช่น เสียง (audio) วีดีทัศน์ (video) และสื่อ
ประสม(multimedia) โดยแนวคิดการออกแบบสารต่างๆ เหล่านี้จะช่วยเพิ่มการส่งสาร
และการแลกเปลี่ยนข้อมูลให้มีประสิทธิภาพยิ่งขึ้น
4) รูปแบบกำรเรียนกำรสอน (ID Models)
แบบจาลองการออกแบบการสอน ADDIE ซึ่งถือว่าเป็นแบบจาลองแรกเริ่มและ
เป็นรากฐานที่สาคัญ (Generic Model) ซึ่งนาไปสู่แบบจาลองอื่นๆ ที่นิยมในปัจจุบัน
เช่น Dick and Carey Model, Kemp Model, Gagne Model เป็นต้น
แบบจาลอง ADDIE ย่อมาจาก Analysis Design Development
Implementation Evaluation โดยหลักการนาไปใช้คือผลลัพธ์ที่ได้ในแต่ละขั้น จะ
นาไปสู่การดาเนินงานในขั้นต่อๆไป โดยขั้นตอนของการวิเคราะห์ (Analysis) จะเน้นที่
วัตถุประสงค์ของกลุ่มผู้ชม/เป้าหมาย และเนื้อหา การออกแบบ(Design) จะเน้นที่ความ
สอดคล้องกับวัตถุประสงค์ของกลุ่มผู้ชม/เป้าหมาย พื้นฐานของผู้เรียน วัตถุประสงค์ของ
บทเรียนและเนื้อหา การพัฒนา (Development) เป็นการกาหนดแผนการดาเนินงาน
ผลิตอย่างเป็นขั้นตอนเพื่อตอบสนองวัตถุประสงค์ของเนื้อหา บทเรียนและการ
ประเมินผล และรูปแบบที่ได้ออกแบบไว้ การนาไปใช้(Implementation) คือการนา
ผลงานไปใช้งานจริงหลังจากที่ได้มีการทดลองนาไปใช้กับกลุ่มเป้าหมายและได้ปรับแก้
ตามข้อเสนอแนะแล้ว นอกจากนี้อาจรวมถึงการตรวจสอบและขอคาแนะนาจาก
ผู้เชี่ยวชาญด้านการออกแบบบทเรียน สุดท้ายคือ การวัดผลและการประเมิน
(Evaluation) ที่จะต้องทาอย่างมีระบบ โดยการประเมินประกอบด้วย 2 ส่วนที่สาคัญคือ
5

7. การประเมินผลระหว่างขั้นตอนพัฒนา (Formative Evaluation) เพื่อนาไปปรับปรุง
แก้ไขในการดาเนินงานขั้นต่อๆไป และการประเมินผลเมื่อพัฒนาบทเรียนเรียบร้อยแล้ว
(Summative Evaluation) เพื่อเป็นการเปิดโอกาสสาหรับความคิดเห็นจากผู้ใช้งาน
และการประเมินจากผลสัมฤทธิ์ของผู้เรียน
5) กำรศึกษำทำงไกล (Distance Education)
เป็นการศึกษาซึ่งส่งเสริมให้ผู้เรียนที่มีข้อจากัดในเรื่องของเวลาและสถานที่ได้มี
โอกาสศึกษาเล่าเรียน โดยการศึกษาทางไกลสามารถจาแนกออกได้เป็น 3 ประเภทคือ
(1) การเรียนที่ผู้เรียนอยู่ต่างสถานที่และเข้าเรียนต่างเวลา e-mail และกระดาน
สนทนาจึงถูกใช้เป็นเครื่องมือหลักในการติดต่อสื่อสาร
(2) การเรียนที่การติดต่อสื่อสารระหว่างผู้เรียนและผู้สอนเกิดขึ้นในเวลาเดียวกัน
(Synchronous Communication) แต่ต่างสถานที่
เช่น การเรียนผ่านทางระบบ teleconference การใช้ chat
เพื่อการสนทนาโต้ตอบ
(3) การเรียนแบบไม่ประสานเวลา (Asynchronous) ที่ผู้เรียนและผู้สอนเข้าร่วม
การเรียนการสอนต่างเวลากันปัจจัยพื้นฐานที่สาคัญสาหรับการจัดการเรียนรู้แบบอีเลิร์
นนิงทั้ง 5 ส่วนนี้ล้วนมีความสาคัญอย่างยิ่ง ซึ่งถ้าผู้สอนหรือผู้ออกแบบบทเรียนสามารถ
ออกแบบได้ครอบคลุมทั้ง 5 ส่วน จะทาให้การจัดการเรียนรู้ในรูปแบบนี้ประสบผลสาเร็จ
ยิ่งขึ้น
ข้อดีของกำรจัดกำรเรียนรู้ในรูปแบบอีเลิร์นนิง
คือการใช้ประโยชน์ของสารสนเทศบนฐานข้อมูลอินเทอร์เน็ตและการสร้างโอกาส
ในการศึกษา อย่างไรก็ตามการจัดการเรียนรู้ในปัจจุบันนี้ยังเป็นการเน้นที่ปฏิสัมพันธ์
ระหว่างผู้เรียนกับบทเรียน และผู้เรียนกับผู้สอนเป็นส่วนใหญ่ โดยปฏิสัมพันธ์ระหว่าง
ผู้เรียนด้วยกันเองยังมีข้อจากัด อีกทั้งเครื่องมือที่ใช้ในการปฏิสัมพันธ์ระหว่างการเรียน
ทั้ง แบบประสานเวลาและไม่ประสานเวลาก็ยังเป็นปัญหาอยู่
ดังนั้น จะเห็นได้ว่าแนวโน้มในอนาคตจะมีการนาเทคโนโลยีเว็บ 2.0 มาช่วยเสริม
และตอบโจทย์ในเรื่องของข้อจากัดของเครื่องมือที่ใช้ในกาปฏิสัมพันธ์ระหว่างการเรียน
6

8. เช่น บล็อก(Blog) สารานุกรมเสรี (Wikipedia) และการสัมมนาออนไลน์ (Webinar) จะ
เห็นได้ว่าเครื่องมือดังกล่าวจะเริ่มเข้ามามีบทบาทและเป็นเครื่องมือสาคัญที่ทาให้การ
จัดการเรียนรู้มีประสิทธิภาพและประสบความสาเร็จยิ่งขึ้น โดยเฉพาะในเรื่องของการ
เรียนรู้ การใฝ่รู้ และการแลกเปลี่ยนเรียนรู้ในสังคมออนไลน์ (Online Learning
Community)โดยสรุปการจัดการเรียนรู้แบบอีเลิร์นนิง ผู้สอนควรให้ความสาคัญกับ
ศาสตร์ด้านการศึกษา โดยเน้นการจัดการเรียนรู้ที่อาศัยทฤษฎีการเรียนรู้ ทฤษฎีการ
ติดต่อสื่อสาร และรูปแบบการจัดการเรียนรู้ที่ส่งเสริมให้ผู้เรียนสร้างความรู้โดยการ
ค้นคว้าและลงมือปฏิบัติด้วยตนเองตามความสนใจ ความถนัด และความสามารถของ
ผู้เรียน โดยใช้เครื่องมือการติดต่อสื่อสารบนออนไลน์ช่วยในการจัดกิจกรรม ซึ่งนอกจาก
จะช่วยให้ผู้เรียนได้พัฒนาตนเองตามวัตถุประสงค์การเรียนรู้ที่กาหนดไว้แล้ว ยังช่วย
พัฒนาการคิด และทักษะการสื่อสารและการมีปฏิสัมพันธ์กับเพื่อนและผู้สอนออนไลน์
ด้วย
องค์ประกอบของเว็บไซต์ทำงกำรศึกษำ
ประกอบด้วย 3 องค์ประกอบพื้นฐาน โดยมีรายละเอียดดังนี้
1) บทเรียนอิเล็กทรอนิกส์ (courseware)เป็นเนื้อหาสาระที่นาเสนอในรูปแบบ
อิเล็กทรอนิกส์ ซึ่งส่วนใหญ่มีลักษณะเป็นสื่อประสม โดยเน้นการออกแบบที่ใช้วิธีการ กล
ยุทธ์ และการให้ข้อมูลป้อนกลับแก่ผู้เรียนโดยทันทีในการนาเสนอ ที่กระตุ้นให้ผู้เรียน
เกิดการเรียนรู้ตามวัตถุประสงค์ที่กาหนดไว้ ซึ่งผู้เรียนสามารถเข้าถึงเนื้อหาได้ตามความ
ต้องการ ตลอดจนอาจมีแบบฝึกหัดหรือแบบทดสอบเพื่อให้ผู้เรียนสามารถตรวจสอบ
ความเข้าใจ ทั้งนี้อาจยึดแนวทางของ learning object
บทเรียนอิเล็กทรอนิกส์ (Courseware) ในรูปแบบของ Learning Objects เป็น
สื่อการสอนในลักษณะบทเรียนอิเล็กทรอนิกส์ที่มีขนาดเล็ก สามารถนากลับมาใช้ใหม่
โดยการจัดเรียงลาดับเนื้อหาใหม่ เกิดเป็นบทเรียนใหม่ โดยมีองค์ประกอบสาคัญในแต่
ละ Learning Object คือ
(1) วัตถุประสงค์การเรียนรู้
(2) หน่วยการเรียน
(3) แบบทดสอบ
7

9. โดยคุณลักษณะเด่นของ Learning Objects คือเนื้อหาเป็นอิสระภายในตัวเอง
สะดวกต่อการนาไปใช้และการปรับแก้ (content updated) สามารถใช้ซ้า (reusable)
แบ่งปันแลกเปลี่ยนเนื้อหาระหว่างกัน (repository) ได้ผ่านระบบบริหารการเรียนการ
สอน (Learning Management System) อีกทั้งยังเป็นการลดปัญหาไฟล์ขนาดใหญ่
และการปรับปรุงแก้ไขเนื้อหาบทเรียนได้ยาก (Davidson-Shivers, 2006;
Waterhouse, 2005; ใจทิพย์ ณ สงขลา, 2550; Khan, 2005)
งำนวิจัยในประเทศที่เกี่ยวกับรูปแบบเว็บไซต์ทำงกำรศึกษำ
ชื่อผู้วิจัย : เจนจิรา อนันตกาล
ปีที่ทำกำรวิจัย : 2548
วิจัยเรื่อง : รูปแบบโฮมเพจเว็บไซต์ทางด้านการศึกษา ระดับอุดมศึกษา
รูปแบบกำรออกแบบ
: มัลติมีเดีย
: มีความน่าเชื่อถือ
ผลกำรวิจัย
รูปแบบโฮมเพจเว็บไซต์ทางด้านการศึกษาระดับ อุดมศึกษา พบว่า
1. ควำมน่ำเชื่อถือของโฮมเพจทางด้านการศึกษาควรมีความยาวของโฮมเพจ
เมื่อเทียบกับจอภาพมีความยาวเหมาะสมกับเนื้อหา มีโครงสร้างเป็นแนวตั้ง สัญลักษณ์
สถาบันอยู่ด้านบนกึ่งกลางหน้ามีแนวการวางเมนูหลักแบบทั้งแนวตั้งและแนวนอนโดย
แนวตั้ง อยู่ด้านซ้ายและแนวนอนอยู่ด้านบน มีเมนูหลักเป็นแบบ Pop-up Menu และ
ใช้สีแสดงสถานะ การเชื่อมโยงจากเมนูหลักไปสู่เนื้อหา
2. ด้ำนเนื้อหำ จัดวางเนื้อหาแบบจัดกลาง และแสดงเนื้อหาแบบคอลัมน์เดียว
จัดวางองค์ประกอบในลักษณะมีพื้นที่ส่วนบนและใช้พื้นที่ด้านซ้ายแคบกว่าพื้นที่ด้านขวา
3. ด้ำนสี ผู้ใช้เว็บไซต์ทางด้านการศึกษาให้ความสาคัญในเรื่องการใช้สีสวยงาม
สบายตา และสื่อความหมายได้ตรงตามจุดประสงค์ และเห็นว่าลักษณะพื้นหลังสีอ่อน
ตัวอักษรสีเข้ม ใช้โทนสีเย็นเหมาะสมสาหรับเว็บไซต์ทางด้านการศึกษา
4. ด้ำนตัวอักษร ผู้ใช้ให้ความสาคัญกับตัวอักษรที่เป็นแบบที่อ่านง่าย ชัดเจน
กลมกลืนกับทุกๆหน้า
8

10. ขนาดตัวอักษรภาษาไทยของหัวเรื่องเป็น 24 point ตัวหนา ขนาดของเนื้อหา
16point ตัวปกติ ส่วนหัวเรื่องที่เป็นภาษาอังกฤษใช้รูปแบบตัวอักษรแบบลายมือ
5. ด้ำนภำพประกอบ ใช้เพื่ออธิบายเพิ่มเติมจากตัวอักษรตามความเหมาะสมของ
เนื้อหา
6. ด้ำนเสียงประกอบ ใช้เสียงประกอบสอดคล้องสมจริงเข้ากับเนื้อหาและ
ต้องการให้โฮมเพจมีเสียงดนตรีประกอบ
ชื่อผู้วิจัย : ณัฐพล ราไพ
ปีที่ทำกำรวิจัย : 2548
วิจัยเรื่อง : รูปแบบของเว็บเพจที่มีต่อผลสัมฤทธิ์ทางการเรียน
รูปแบบกำรออกแบบ
: ส่วนต่อประสาน
: ระบบนาทาง
ผลกำรวิจัย
1. กำรเชื่อมโยง
1.1 การเชื่อมโยงที่ดี ไฮเพอร์เท็กซ์ที่ใช้ควรจะมีลักษณะที่อยู่ในรูปแบบที่เป็น
มาตรฐานทั่วไป
1.2 คาที่ใช้สาหรับการเชื่อมโยงจะต้องเข้าใจง่าย มีความชัดเจน และไม่สับสน
จนเกินไป
1.3 แต่ละเว็บเพจควรมีจุดเชื่อมโยงกลับมายังหน้าแรกของเว็บไซต์ที่กาลังใช้งาน
อยู่ด้วย
1.4 ควรกาหนดให้ผู้เรียนได้เข้าสู่หน้าจอแรกที่มีคาอธิบายเบื้องต้นมีการแสดง
โครงสร้าง ภายในเว็บ
ซึ่งอาจอยู่ในลักษณะของสารบัญหรือรายการเพื่อผู้เรียนจะได้ทราบถึงขอบเขตที่จะ
สืบค้น
9

11. 2. ระบบนำทำง
เน้นการใช้งานที่เข้าถึงง่าย จะช่วยให้ผู้เรียนรู้สึกสบายใจต่อการเรียนและสามารถ
ทาความเข้าใจกับเนื้อหาได้อย่างเต็มที่ ควรกาหนดปุ่มการใช้งานที่ชัดเจน เหมาะสม
โดยเฉพาะปุ่มควบคุม เส้นทางการเข้าสู่เนื้อหา (Navigation) ไม่ว่าจะเป็นเดินหน้า ถอย
หลังรวมทั้งอาจมีการแนะนาว่าผู้เรียนควรจะเรียนอย่างไร ขั้นตอนใดก่อนหรือหลังควร
เพิ่มความยืดหยุ่นให้ผู้เรียนสามารถกาหนดเส้นทางการเรียนรู้ได้เอง
เช่น การใช้แผนผังของเว็บไซต์ (site map) ที่ช่วยให้ผู้เรียนทราบว่าตอนนี้อยู่ ณ
จุดใด หรือเครื่องมือสืบค้นที่ช่วยในการค้นหาหน้าที่ต้องการ
ชื่อผู้วิจัย : สรวงสุดา ปานสกุล
ปีที่ทำกำรวิจัย : 2545
วิจัยเรื่อง : รูปแบบการเรียนรู้กระบวนการแก้ปัญหาเชิงสร้างสรรค์แบบร่วมมือในองค์กร
บนอินเทอร์เน็ต
รูปแบบกำรออกแบบ
: มัลติมีเดีย
: เนื้อหา
: ระบบนาทาง
ผลกำรวิจัย
1. ด้ำนมัลติมีเดีย
1.1 หลีกเลี่ยงการใช้กราฟิกที่ไม่ก่อให้เกิดประโยชน์เพราะถึงแม้จะดูสวยงาม แต่
จะทาให้ผู้เรียนเสียเวลาในการรับข้อมูลที่ต้องการ แต่หากต้องมีการใช้ภาพประกอบ ก็
ควรใช้เฉพาะที่มีความสัมพันธ์กับเนื้อหาเท่านั้น
1.2 การใช้รูปภาพเพื่อเป็นพื้นหลัง ไม่ควรเน้นสีสันที่ฉูดฉาด เพราะอาจจะไปลด
ความเด่นชัดของเนื้อหาลง ควรใช้ภาพที่มีสีอ่อนๆ ไม่สว่างเกินไป รวมไปถึงการใช้เทคนิค
ต่างๆ
เช่น ภาพเคลื่อนไหว หรือตัวอักษรวิ่ง (Marquees) ซึ่งอาจจะเกิดการรบกวนการ
อ่านได้ ควรใช้เฉพาะที่จาเป็นจริงๆเท่านั้น
10

12. 1.3 ตัวอักษรที่นามาแสดงบนจอภาพ ควรเลือกขนาดที่อ่านง่าย ไม่มีสีสันหรือ
ลวดลายมากเกินไป
1.4 ควรออกแบบหน้าเว็บเพจให้เป็นมาตรฐานเดียวกันตลอดทั้ง เว็บไซต์ เพราะ
ความสม่าเสมอจะช่วยให้ผู้เรียนรู้สึกคุ้นเคยและสามารถคาดการณ์ลักษณะล่วงหน้าของ
เว็บได้ จะช่วยให้การใช้งานบทเรียนเป็นไปอย่างสะดวก แต่มีข้อควรระวังคือความ
สม่าเสมอนี้ อาจนามาซึ่งความน่าเบื่อได้
แนวทำงแก้ไข คือ สร้างความแตกต่างที่น่าสนใจในแต่ละหน้าโดยใช้
องค์ประกอบที่คล้ายคลึงกัน แต่มีสีหรือลักษณะแตกต่างกันไปเล็กน้อยเพื่อทาให้เกิด
ลักษณะพิเศษเฉพาะหน้านั้นๆ แต่ยังคงความสม่าเสมอของเว็บไซต์ได้
2. กำรออกแบบเนื้อหำ
ควรกระชับและทันสมัย หลีก เลี่ยงการใช้เว็บเพจที่มีลักษณะการเลื่อนขึ้นลง แต่
ถ้าจาเป็นควรจะให้ข้อมูลที่มีความสาคัญอยู่บริเวณด้านบนสุดของหน้าจอ
3. กำรออกแบบระบบนำทำง
3.1 ควรจัดโครงสร้างหรือจัดระเบียบของข้อมูลที่ชัดเจนมาตรฐานเดียวกัน จะ
ช่วยให้น่าใช้งานและง่ายต่อการใช้งาน
3.2 ควรเพิ่มความยืดหยุ่นให้ผู้เรียนโดยการให้อิสระในการเข้าถึงเนื้อหาผ่าน
ระบบนาทางที่มีประสิทธิภาพจะทาให้เข้าใจเนื้อหาได้อย่างเต็มที่โดยไม่ต้องเสียเวลาอยู่
กับการทาความเข้าใจการใช้งานที่สับสน
ชื่อผู้วิจัย : จิตเกษม พัฒนาศิริ
ปีที่ทำกำรวิจัย : 2539
รูปแบบกำรออกแบบ
: มัลติมีเดีย
: ส่วนต่อประสาน
: เนื้อหา
: ระบบนาทาง
: การเข้าถึงข้อมูล
ผลกำรวิจัย
11

13. 1. ด้ำนมัลติมีเดีย
1.1 การใส่ภาพประกอบ จะต้องเลือกรูปภาพที่ทาหน้าที่แทนคาบรรยายที่
ต้องการ ควรใช้รูปภาพที่สามารถสื่อความหมายกับผู้ใช้ได้ตรงตามวัตถุประสงค์
1.2 รูปภาพที่นามาประกอบ ไม่ควรมีขนาดใหญ่หรือจานวนมากเกินไป เพราะ
อาจทาให้สาระของเว็บเพจถูกลดความสาคัญลง
1.3 การใช้ รูปภาพเพื่อเป็นพื้นหลัง ไม่ควรเน้นสีสันที่ฉูดฉาด เพราะอาจไปลด
ความเด่นชัดของเนื้อหา ควรใช้ภาพที่มีสีอ่อนๆ ไม่สว่างจนเกินไป
1.4 ตัวอักษร ควรเลือกขนาดที่อ่านง่าย ไม่มีสีสันและลวดลายมากเกินความ
จาเป็น
2. กำรออกแบบส่วนต่อประสำน
2.1 เชื่อมโยงข้อมูลไปยังเป้าหมายได้ตรงกับความต้องการมากที่สุดถ้าข้อมูลที่นา
มาแสดงมีเนื้อหาสาระมากเกินไป เว็บเพจไม่สามารถนาข้อมูลทั้งหมดมาแสดงได้ ควรนา
แหล่งข้อมูลนั้น มาเขียนเป็นตัวเชื่อมโยง ผู้ใช้จะได้สามารถค้นหาข้อมูลได้อย่างถูกต้อง
และกว้างขวางยิ่งขึ้น
2.2 การสร้างตัวเชื่อมโยงจะสร้างในรูปของตัวอักษรหรือรูปภาพก็ได้
แต่ควรที่จะแสดงจุดเชื่อมโยงให้ผู้ใช้สามารถเข้าใจได้ง่าย ที่นิยมสร้างกันส่วนใหญ่เมื่อมี
เนื้อหาตอนใดเอ่ยถึงชื่อที่เป็นรายละเอียดเกี่ยวเนื่องกันก็จะสร้างจุดเชื่อมโยงทันที
2.3 ในแต่ละเว็บเพจควรมีจุดเชื่อมโยงกลับไปยังหน้าแรกของเว็บไซต์ที่กาลังใช้
งานอยู่ ทั้งนี้เผื่อว่าผู้ใช้หลงทางและไม่ทราบว่าจะทาอย่างไรต่อไปก็จะสามารถกลับมาสู่
จุดเริ่มต้นใหม่
3. กำรออกแบบเนื้อหำ
3.1 เนื้อหากระชับ สั้นและทันสมัย
3.2 เนื้อหาควรเป็นเรื่องที่สาคัญ หรืออยู่ในความสนใจของผู้คนหรือเป็นเรื่องที่
ต้องการให้ผู้ใช้ทราบ และควรปรับปรุงให้ทันสมัยอยู่เสมอ
3.3 ควรเป็นมาตรฐานเดียวกัน โดยอาจแบ่งเนื้อหาออกเป็นส่วนๆ หรือจัดกลุ่ม
เป็นหมวดหมู่
4. กำรออกแบบระบบนำทำง
4.1 ควรมีรายการสารบัญ (Index) แสดงรายละเอียดของเว็บเพจ
12

14. การที่ผู้ใช้จะเข้าไปค้นหาข้อมูลได้ ผู้สร้างควรแสดงรายการทั้งหมดที่เว็บเพจนั้น มีอยู่ให้
ผู้ใช้ทราบ โดยอาจทาอยู่ในรูปแบบของสารบัญหรือตัวเชื่อมโยง (links) จะทาให้สามารถ
หาข้อมูลได้อย่างรวดเร็ว
4.2 เมื่อใดเนื้อหาตอนใดเอ่ยถึงชื่อที่เป็นรายละเอียดที่เกี่ยวเนื่องกันให้สร้าง
ตัวเชื่อมทันที
5. กำรเข้ำถึงข้อมูล
5.1 ใช้งานง่าย เนื่องจากอะไรก็ตามถ้ามีความง่ายในการใช้งานแล้วโอกาสที่ผู้ชม
สนใจเว็บไซต์ย่อมสูงตามลาดับ
5.2 สามารถโต้ตอบกับผู้ใช้ได้อย่างทันท่วงที
5.3 ควรกาหนดจุดที่ผู้ใช้สามารถแสดงความคิดเห็นหรือให้คาแนะนากับผู้สร้างได้
เช่น ใส่ e-mail ลงในเว็บเพจ ในตาแหน่งที่เขียนควรอยู่บนสุดหรือล่างสุดของเว็บเพจ
ไม่ควรเขียนแทรกไว้ที่ตาแหน่งใดๆ ของจอภาพ เพราะผู้ใช้อาจหา e-mail ไม่พบก็ได้
ชื่อผู้วิจัย : ปทีป เมธาคุณวุฒิ
ปีที่ทำกำรวิจัย : 2544
รูปแบบกำรออกแบบ
: มัลติมีเดีย
: ส่วนต่อประสาน
: เนื้อหา
: การทดสอบความน่าเชื่อถือ
ผลกำรวิจัย
1.ด้ำนมัลติมีเดีย
การจัดทาข้อความและภาพจะต้องมีวัตถุประสงค์ มีการจัดเตรียมวางแบบและ
ขนาดของตัวอักษร สี การกาหนดปุ่มต่างๆ และการใช้เนื้อที่และภาพที่ใช้ต้องไม่ใหญ่
เกินไปและต้องไม่ใช้ เวลานานในการเชื่อมโยงมาสู่บทเรียน
2. ควรมีกำรจัดหน้ำจอภำพให้เหมำะสม
13

15. น่าอ่านและใช้การเชื่อมต่อไปยังหน้าถัดไปมากกว่าที่จะใช้การเลื่อนหน้าจอภาพ
และถ้ามีการเชื่อมโยงกับภายนอกจะต้องมีข้อความบอกไว้ว่ามีการเชื่อมโยงกับสิ่งใด
3. หลีกเลี่ยงกำรทำเนื้อหำที่ยำว
ต้องแบ่งสาระอย่างเหมาะสมหรือมีการจัดทาเป็นกลุ่ม
4. กำรทดสอบกำรใช้งำน ควรมีการประเมิน
4.1 กำรประเมินลักษณะเว็บไซต์ ควรจะทราบได้ทันทีว่าเมื่อเปิดเข้าไปแล้ว
เกี่ยวข้องกับเรื่องใด ควรบอกลักษณะและรายละเอียดของเว็บนั้น
4.2 กำรประเมินภำรกิจ (Authority) จะต้องบอกขนาดของเว็บและ
รายละเอียดโครงสร้างของเว็บ เช่น แสดงที่อยู่และเส้นทางภายในเว็บและชื่อผู้ออกแบบ
เว็บ
4.3 ประเมินกำรจัดรูปแบบและกำรออกแบบ ความซับซ้อน เวลารูปแบบที่เป็น
ที่ต้องการของผู้ใช้
4.4 ประเมินกำรเชื่อมโยง (Links) เป็นสิ่งที่จาเป็นและมีผลต่อการใช้ การเพิ่ม
จานวนเชื่อมโยงโดยไม่จาเป็นไม่เป็นประโยชน์ต่อผู้ใช้ ควรใช้เครื่องมือสืบค้นแทนการ
เชื่อมโยงที่ไม่จาเป็น
4.5 กำรประเมินเนื้อหำ (Content) เนื้อหาที่เป็นข้อความ ภาพ หรือเสียง
จะต้องเหมาะสมกับเว็บ และให้ความสาคัญกับองค์ประกอบทุกส่วนเท่าเทียมกัน
4.6 กำรประเมินผลกำรเรียน สามารถประเมินผลระหว่างเรียน การประเมินรวม
หลังเรียน เพื่อดูผลที่มีต่อผู้เรียนและดูผลที่คาดหวังไว้ ซึ่งจะนาไปปรับปรุงการสอนอย่าง
ต่อเนื่อง
5. ควำมน่ำเชื่อถือ
ควรมีการจัดทาส่วนท้ายของบทเรียนมีชื่อผู้จัดทา และอีเมล์ ที่จะติดต่อได้ วันที่
จัดทา /แก้ไขเปลี่ยนแปลง แนวการเลือกต่างๆ เพื่อให้สามารถเห็นภาพรวมทั้งหมด และ
จานวนหน้าที่มีการจัดทาและต้องไม่ยาวเกินไปหรือสั้นเกินไป และมีการปรับปรุงเว็บเพจ
อยู่เสมอ
14

16. งำนวิจัยต่ำงประเทศที่เกี่ยวกับรูปแบบเว็บไซต์ทำงกำรศึกษำ
ชื่อผู้วิจัย : Bi
ปี (ค.ศ.) : 2000
กำรออกแบบ
รูปแบบของเว็บไซต์เพื่อการศึกษามีความสัมพันธ์กับการออกแบบการสอน การ
พัฒนาเนื้อหาวิชา การส่งข้อมูลและการส่งเสริมด้านการจัดการ ส่วนประกอบของการ
ออกแบบเว็บไซต์เพื่อการศึกษา คือต้องมีการทางานเป็นทีม ผลสัมฤทธิ์ของการใช้
เทคโนโลยีเว็บขึ้น อยู่กับความสามารถตอบสนองวัตถุประสงค์การสอนและประโยชน์ที่
ต้องการจากการเรียน ส่วนทางด้านนักเรียนที่เรียนทางไกลต้องการผลย้อนกลับจาก
ผู้สอนระหว่างเรียนและผลสัมฤทธิ์ทางการสอนด้วยเทคโนโลยีขึ้น อยู่กับปฏิสัมพันธ์ที่
หลากหลาย
ชื่อผู้วิจัย : Paolo et al
ปี (ค.ศ.) : 2003
กำรออกแบบ
เสนอแนวทางในการเปลี่ยนแปลงเว็บเพจที่มีเนื้อหาที่คงที่และรวมอยู่ในที่
เดียวกัน ซึ่งเดิมหากต้องการที่จัดทาหน้าเว็บเพจที่มีความคล้ายคลึงกัน ทาการคัดลอก
หน้าเพจซ้าๆกัน เมื่อต้องการปรับปรุงเนื้อหาและโครงสร้างของเว็บเพจ ก็จะต้องตามไป
แก้ไขในทุกๆ หน้าที่มีผลกระทบ ซึ่งทาให้เกิดความยุ่งยาก ดังนั้น การเปลี่ยนให้เป็นเว็บ
เพจที่มีความยืดหยุ่นในการแก้ไข โดยจะมีนาเอาเทคนิคของการทาคลัสเตอร์ (Cluster)
จะสามารถดึงดูดความสนใจของผู้ชมได้ กล่าวคือเป็นการแยกโครงสร้างเว็บเพจที่มี
ลักษณะคล้ายคลึงกันออกมาเป็นกลุ่มๆ เพื่อใช้เป็นโครงสร้างหลักหรือเทมเพลทที่จะใช้
ร่วมกันและใช้เป็นตัวกาหนดรูปแบบของส่วนที่แสดงเป็นเว็บเพจ ส่วนค่าตัวแปรต่างๆ
และค่าของข้อมูลที่ต้องการแสดงบนหน้าเว็บที่นั้น จะจัดเก็บไว้ในฐานข้อมูล พร้อมทั้งมี
ส่วนของแอพลิเคชั่น ซึ่งอยู่ที่เซิร์ฟเวอร์ (Server) เพื่อทาการดึงข้อมูลขึ้นมาจาก
ฐานข้อมูลและทาการรวมกับโครงสร้างแล้วแปลงให้เป็นหน้าเว็บเพจที่สามารถแสดงบน
บราวเซอร์ (Browser) ได้ ทาให้การทางานมีความเป็นอัตโนมัติเพิ่มมากขึ้น และหากจะ
มีการเปลี่ยนแปลงจะเป็นเพียงการเพิ่ม แก้ไข และลบข้อมูลในฐานข้อมูลเท่านั้น
15

17. บทควำมในประเทศที่เกี่ยวกับรูปแบบเว็บไซต์ทำงกำรศึกษำ
ชื่อผู้เขียน/ ผู้แต่ง : สมคิด อเนกทวีผล
ปี : 2550
กำรออกแบบ : เว็บ 2.0
รำยละเอียด
1. Google Adsense ระบบโฆษณาเป็นลิงค์ตามแต่คาที่ผู้ใช้ค้นหา
2. flickr.com เว็บอัลบั้ม เก็บและแชร์รูปออนไลน์ที่มีการโยงเป็นชุมชน ส่งต่อ
รูปกันง่าย Bit Torrent ระบบที่ผู้ใช้ต่างก็ดาวน์โหลดไฟล์จากกันและกันเอง
3. wikipedia.com เว็บสารานุกรมที่ผู้ใช้บัญญัติคากันเอง ให้ความหมายกันเอง
และแก้ไขคาของคนอื่นได้ตลอดเวลา
4. Blog เขียนง่าย ใส่รูป เสียง คลิปได้ง่ายๆ เหมือนส่งเมล์ เผยแพร่ส่งต่อได้
กว้างขวาง
5. SEO (Search Engine Optimization) ลงทุนกับเทคนิคทาให้ลิงค์เว็บบริษัท
ตัวเองได้อยู่หน้าแรกบนๆ ใน Google, เสิร์ชอื่นๆ
ชื่อผู้เขียน/ ผู้แต่ง : สุนิตย์ เชรษฐาและ ชิตพงษ์ กิตตินราดร
ปี : (ม.ป.ป.)
กำรออกแบบ : เว็บ 2.0
รำยละเอียด
1. Wikipedia เป็นสารานุกรม Online ขนาดใหญ่ที่สุด ไม่ว่าใครก็ได้สามารถ
สร้าง แก้ไข และปรับปรุงเนื้อหาอย่างแทบไม่มีขีดจากัด
2. flickr.com ซึ่งเป็นเว็บไซต์ที่เปิดให้ผู้ใช้สามารถส่งรูปภาพอะไรก็ได้ขึ้นระบบ
3. Blog คือเว็บไซต์ส่วนตัวสาเร็จรูป ที่ผู้ใช้เพียงสมัครสมาชิกกับผู้ให้บริการและ
เขียนข้อความที่ต้องการลงไป พร้อมให้ใครก็ได้เข้ามาอ่านทันที
4. Feed คือระบบที่ส่งข้อมูลขึ้น หน้าจอคอมพิวเตอร์อย่างอัตโนมัติทุกครั้งที่มี
การเพิ่มเติมหรือเปลี่ยนแปลงข้อมูล
5. digg สามารถให้คะแนนเนื้อหาที่ผู้ใช้คนอื่นส่งขึ้นระบบได้อย่างอิสระ
16

18. บทควำมต่ำงประเทศที่เกี่ยวกับรูปแบบเว็บไซต์ทำงกำรศึกษำ
ชื่อผู้เขียน/ผู้แต่ง : Khan
ปี : 2005
กำรออกแบบ
: ส่วนต่อประสาน
: เนื้อหา
: ระบบนาทาง
: การเข้าถึงข้อมูล
: การทดสอบ
ผลกำรศึกษำ
1. กำรออกแบบส่วนต่อประสำน
1.1 หน้าจอเว็บไซต์แสดงผลปกติหรือไม่เมื่อเปิดใช้กับโปรแกรมค้นหาเว็บ
(Internet Explorer, Netscape หรือโปรแกรมค้นหาอื่นๆ)
1.2 องค์ประกอบต่อไปนี้ที่ช่วยให้เนื้อหาบทเรียนมีความสมบูรณ์ (ระบุทุก
องค์ประกอบที่ช่วยให้เนื้อหาบทเรียนสมบูรณ์ ได้แก่ ภาพและวัตถุ เสียง วีดิโอ
ภาพเคลื่อนไหว)
1.3 ควรเว้นช่องว่างอย่างเหมาะสมหรือประมาณ 20% เพื่อช่วยให้ผู้อ่านผ่อน
คลายสายตาในขณะอ่าน
1.4 หน้าหลัก/โปรแกรมน่าสนใจและดึงดูดด้วยภาพหรือเสียง (แต่ละคนอาจชอบ
สีและรูปแบบอักษรต่างกัน)
1.5 ข้อความในเว็บไซต์อ่านได้ง่ายและชัดเจน
1.6 สีพื้นหลังและสีส่วนหน้าที่ใช้ในการนาเสนอเว็บไซต์กลมกลืนกัน
1.7 เว็บไซต์มีรูปแบบการนาเสนอเหมือนเอกสารประกอบบทเรียนจะทาให้
ผู้เรียนสามารถเชื่อมโยงระหว่างบทเรียนออนไลน์และเอกสารประกอบบทเรียน
1.8 องค์ประกอบในการนาเสนอ เช่น ชื่อเรื่อง เนื้อหา การเชื่อมโยงและอื่นๆ ใช้
รูปแบบเดียวกัน
17

19. 1.9 ใช้รูปแบบอักษรมาตรฐานทั่วไป โดยแบบอักษรจะไม่เปลี่ยนแปลงเมื่อ
แสดงผลบนจอคอมพิวเตอร์หรือโปรแกรมค้นหาเว็บอื่นๆ (เช่น Arial สาหรับ
ภาษาอังกฤษ)
1.10 มีโครงสร้างการใช้สี ตาแหน่งการวางชื่อเรื่องและเนื้อหารูปแบบเดียวกัน
1.11 ภาพและวัตถุช่วยให้ผู้เรียนบรรลุวัตถุประสงค์ของบทเรียน
1.12 ความเร็วในการแสดงข้อมูลและแสดงผลบนหน้าจอ (ภาพหรือวัตถุขนาด
ใหญ่ใช้เวลานานในการดาวน์โหลดและแสดงผลบนหน้าจอ นอกจากนี้ในการถ่ายข้อมูล
และแสดงผลแตกต่างกันไปตามความเร็วของอินเทอร์เน็ตของผู้ใช้งาน)
1.13 มีการอ้างอิงผู้ออกแบบและพัฒนาบทเรียน
1.14 มีการเชื่อมโยงเว็บไซต์ไปยังเว็บไซต์ของหน่วยงานอื่นๆ
1.15 เว็บไซต์มีการเชื่อมโยงไปยังหน้าประวัติของผู้สอน
1.16 ภาพและวัตถุที่มีสีสันต่างๆ มีความชัดเจนเมื่อพิมพ์แบบขาว-ดา1.17 แต่ละ
หน้าสามารถพิมพ์ออกมาได้ขนาดพอดีในหนึ่งหน้าเอกสาร
2. กำรออกแบบเนื้อหำ
2.1 บทเรียนใช้กลวิธีเพื่อกระตุ้นความสนใจของผู้เรียน ได้แก่ ภาพเคลื่อนไหว
(ภาพเหตุการณ์สั้นๆ) วัตถุเคลื่อนไหว (เช่น วัตถุสกุล .gif) ภาพประกอบ ความแตกต่าง
ระหว่างวัตถุและส่วนประกอบอื่นๆ ใช้สี เสียงและสัญลักษณ์ที่เกี่ยวข้องกับเนื้อหา
2.2 ในบทเรียนมีการใช้กลวิธีเพื่อพัฒนาความคงทนในการเรียน
ได้แก่ หน้าจอการนาเสนอจัดเป็นลาดับ เนื้อหา จัดเป็นระบบ เกี่ยวข้องกันอย่างมี
ความหมาย มีบทเกริ่นนาเข้าสู่เนื้อหา ใช้รูปแบบโครงสร้างการนาเสนอเดียวกันของแต่
ละหน้าการนาเสนอ เช่น การวางชื่อเรื่อง ภาพ บทความและส่วนประกอบอื่นๆ มี
เครื่องมือที่แบ่งเนื้อหาออกเป็นส่วนๆอย่างเหมาะสม มีคานาและบทสรุป
2.3 บทเรียนนาเสนอใจความสาคัญเพียงประเด็นเดียวในหนึ่งย่อหน้า
2.4 บทความแบ่งออกเป็นช่วงๆ และสามารถอ่านแบบกวาดสายตาเพื่อความ
เข้าใจ (หัวข้อหลักและหัวข้อย่อยในบทเรียนควรสั้น กะทัดรัดและสอดคล้องกันอย่างมี
ความหมายเพื่อให้ผู้อ่านอ่านกวาดสายตาหาใจความสาคัญได้)
18

20. 2.5 บทเรียนใช้องค์ประอบของสื่อประสม ได้แก่ ข้อความ ภาพและวัตถุ ภาพ
เคลื่อนไหว เสียง วีดีโอ และการผสมผสานของสื่อประสมเอื้อให้ เกิดการเรียนรู้บทเรียน
ได้ อย่างมีประสิทธิภาพ
2.6 สื่อประสมที่ใช้ในบทเรียนมีประสิทธิภาพในการสร้างการเรียนรู้อย่างมี
ความหมายมากน้อยเพียงใด
2.7 บทเรียนมีการนาเสนอองค์ประกอบทางภาษาอย่างถูกต้อง
(ไวยากรณ์ เครื่องหมายวรรคตอน การสะกดคา)
2.8 บทเรียนมีการนาเสนอองค์ประกอบสื่อประสมอย่างเหมาะสมและสอดคล้อง
กัน (ข้อความ ภาพและวัตถุ ภาพเคลื่อนไหว เสียง วีดีโอ)
2.9 บทเรียนสามารถพิมพ์สาหรับผู้เรียนและผู้สอนได้สะดวก
3. กำรออกแบบระบบนำทำง
3.1 บทเรียนมีโครงสร้างเนื้อหา เช่น หน่วยการเรียนรู้ สาระความรู้ กิจกรรมการ
เรียนรู้และอื่นๆ เพื่อนาทางให้ผู้เรียนศึกษาบทเรียน
3.2 บทเรียนมีแผนผังเว็บไซต์ เช่น ภาพรวมของบทเรียนเพื่อนาทางให้ผู้เรียน
ศึกษาบทเรียน
3.3 บทเรียนควรถามให้ผู้เรียนถ่ายโอนข้อมูลขนาดใหญ่ เช่น เสียง วีดีโอ และ
ภาพขนาดใหญ่ลงในหน่วยความจาหลักก่อน เพื่อหลีกเลี่ยงปัญหาติดขัดขณะเรียน
3.4 การเชื่อมโยงมีสัญลักษณ์และบอกจุดหมายในการเชื่อมโยงแก่ผู้เรียนเพื่อให้
ผู้เรียนตัดสินใจในการเลือกการเชื่อมโยง
3.5 บทเรียนที่มีการเชื่อมโยงภายในเว็บไซต์มากเกินไปอาจทาให้ผู้เรียนสับสน
3.6 บทเรียนที่มีการเชื่อมโยงภายนอกมากเกินไปอาจทาให้ผู้เรียนสับสน
3.7 เลือกใช้สัญลักษณ์ที่ผู้เรียนคุ้นเคย มีความชัดเจนสอดคล้องกับเนื้อหาที่
ต้องการเชื่อมโยง
3.8 มีการใช้สีรูปแบบเดียวกันเพื่อแสดงการเชื่อมโยงที่ผู้เรียนได้เข้าถึงและยัง
ไม่ได้เข้าถึง สีมาตรฐานในการแสดง การเชื่อมโยง สีฟ้าสาหรับการเชื่อมโยงที่ผู้เรียนยัง
ไม่ได้เข้าถึง และสีแดงหรือสีม่วงสาหรับการเชื่อมโยงที่ผู้เรียนได้เข้าถึงแล้ว
3.9 บทเรียนมีความยืดหยุ่นในการเรียนผ่านคาสั่งในบทเรียน โดยผู้เรียนมี
ทางเลือกต่างๆ ในการศึกษาบทเรียน
19

21. 3.10 บทเรียนมีการแนะนาแนวทางการเรียน (ผู้เรียนมักจะดาเนินการศึกษา
บทเรียนตามการเชื่อมโยงที่ปรากฏในบทเรียน
ดังนั้น ควรมีการวางแผนการเชื่อมโยงหลายมิติอย่างมีประสิทธิ ภาพเพื่อเป็น
แนวทางแนะนาการศึกษาบทเรียนแก่ผู้เรียน
3.11 ควรมีการนาทางเข้าสู่บทเรียนที่ง่าย ผู้เรียนสามารถเชื่อมโยงหน้าต่างๆ ได้
สะดวก ไม่สับสนหรือหลงทาง
3.12 ควรหลีกเลี่ยงการเชื่อมโยงบทเรียนไปยังเว็บไซต์ที่ไม่สมบูรณ์
3.13 ควรมีช่องทางการค้นหาข้อมูลทั้งภายในเว็บไซต์และภายนอกเว็บไซต์
3.14 ควรใช้รูปแบบสัญลักษณ์และคาเดียวกันเพื่อช่วยนาทางในบทเรียน
3.15 ทุกหน้าควรมีการเชื่อมโยงกลับมายังหน้าหลัก
3.16 การเชื่อมโยงภายในบทเรียนควรมีการเชื่อมโยงไปยังหน้าต่างๆ ที่ถูกต้อง
3.17 การเชื่อมโยงภายนอกบทเรียนควรมีการเชื่อมโยงที่ถูกต้อง
3.18 ไม่ควรมีการเชื่อมโยงหลายมิติในบทเรียนมากเกินไป
3.19 คุณภาพระบบเสียงและวีดีโอโดยตรงจากเว็บไซต์ควรมีประสิทธิภาพ
4. กำรทดสอบกำรใช้งำน
4.1 ทดลองใช้กับกลุ่มผู้เรียนกลุ่มตัวอย่าง
4.2 ผู้เรียนตอบคาถามต่างๆ ในบทเรียนได้ภายในเวลาที่กาหนด
4.3 ผู้เรียนรู้ว่ากาลังอยู่ตาแหน่งใดในบทเรียนและนาทางการเรียนได้โดยไม่ต้อง
คาดเดา
4.4 การใช้คาศัพท์เฉพาะในบทเรียนสามารถทาความเข้าใจได้ง่าย
4.5 ผู้เรียนเห็นตัวอย่างบทเรียนที่จะศึกษา
4.6 เว็บไซต์ออกแบบมาเพื่ออานวยความสะดวกให้ผู้เรียนเข้าถึงเนื้อหาเฉพาะที่
ต้องการได้อย่างสะดวก ภายในการเชื่อมโยงไม่เกิน 3 ครั้ง
5. กำรเข้ำถึงข้อมูล
5.1 เว็บไซต์ออกแบบมาให้ผู้เรียนจานวนมากเข้าถึงบทเรียนได้มากน้อยเพียงใด
20

22. 5.2 บทเรียนควรมีข้อความสารองอธิบายภาพและวัตถุ (ข้อความสารองอาจไม่ใช่
ข้อความตัวอักษร สามารถใช้โปรแกรมถ่ายทอดข้อมูลได้ด้วยเสียง ซึ่งเป็นสิ่งจาเป็น
สาหรับผู้บกพร่องทางการมองเห็น)
5.3 บทเรียนควรมีข้อความบรรยายประกอบการฟัง (ผู้บกพร่องทางการได้ยิน
สามารถอ่านข้อความบรรยายประกอบการฟังได้)
5.4 หน้าจอสามารถปรับขนาดให้เหมาะกับผู้บกพร่องทางสายตา
5.5 สามารถมองเห็นความแตกต่างของสีที่ใช้ในการนาเสนอบทเรียนอย่างชัดเจน
เพื่ออานวยความสะดวกแก่ ผู้บกพร่องทางสายตา
5.6 ผู้เรียนสามารถใช้แป้นพิมพ์อักษรแทนการใช้เมาส์ หรืออุปกรณ์เคลื่อน
ตาแหน่งในการนาทางศึกษาบทเรียน
2) กำรติดต่อสื่อสำร (Communication)
เครื่องมือในการติดต่อสื่อสารเป็นเครื่องมือที่ช่วยให้ผู้เรียนได้ติดต่อสอบถาม
ปรึกษาหารือ และแลกเปลี่ยนความคิดเห็นระหว่างผู้เรียนและผู้สอน และระหว่างผู้เรียน
กับเพื่อนร่วมชั้นเรียนคนอื่นๆ โดยเครื่องมือที่ใช้ในการติดต่อสื่อสารอาจแยกได้เป็น 2
ประเภท คือ
แบบประสำนเวลำ (Synchronous)
แบบไม่ประสำนเวลำ (Asynchronous)
เครื่องมือพื้นฐานที่ใช้ในการติดต่อสื่อสารออนไลน์ที่เป็นที่นิยมกันอย่างแพร่หลาย
ตั้งแต่อดีตและยังคงได้รับความนิยมอย่างแพร่หลายในปัจจุบัน ได้แก่ แชทไปรษณีย์
อิเล็กทรอนิกส์ กระดานอภิปรายและกระดานประกาศ ภายหลังได้รับอิทธิพลด้วย
เครื่องมือติดต่อสื่อสารต่างๆของ WWW 2.0 เทคโนโลยี เช่น
บล็อก วิกิ ทาให้การติดต่อสื่อสารมีความเป็นพลวัฒน์ (Dynamic) มากยิ่งขึ้น
รายละเอียดต่างๆ ดังนี้ (จินตวีร์ คล้ายสังข์ และประกอบ กรณีกิจ, 2552)
แช็ท (Chat) เป็นการสื่อสารแบบประสานเวลา ซึ่งเหมาะกับการแลกเปลี่ยน
สารสนเทศในกลุ่มเดียวกัน และสามารถทบทวนไฟล์การสนทนาของกลุ่มได้
ไปรษณีย์อิเล็กทรอนิกส์ (e-mail) เป็นการสื่อสารแบบไม่ประสานเวลา ซึ่งเป็น
เครื่องมือที่ช่วยให้ผู้เรียนสามารถติดต่อสื่อสารกับผู้สอนหรือเพื่อนร่วมชั้น เรียนได้โดยส่ง
21

23. ข้อความในรูปจดหมาย พร้อมทั้ง แนบไฟล์ไปยังพื้น ที่ส่วนตัวของผู้รับ จึง
สามารถนาไปประยุกต์ใช้ได้กับการปรึกษารายบุคคล การส่งงานและการให้ข้อมูล
ป้อนกลับแก่ผู้เรียน
กระดำนอภิปรำยและกระดำนประกำศ (Discussion Board and Bulletin
Board) เป็นการสื่อสารแบบไม่ประสานเวลา ซึ่งสนับสนุนให้ผู้สอนและผู้เรียนประกาศ
ข้อความ ไฟล์ และสารสนเทศ ในพื้นที่ที่ผู้สอนเตรียมไว้ให้และผู้สอนและผู้เรียนสามารถ
โต้ตอบหรือดาวน์โหลดไฟล์เหล่านั้นได้ ซึ่งผู้เรียนสามารถติดตามการสนทนาโต้ตอบใน
ประเด็นที่ต้องการได้
บล็อก (Blog) เป็นการสื่อสารแบบไม่ประสานเวลา ซึ่งสนับสนุนให้ผู้เรียนเขียน
บันทึกการเรียนรู้ประจาวัน และเปิดโอกาสให้ผู้สอนและเพื่อนร่วมชั้น เรียนสามารถให้
ข้อมูลป้อนกลับ เสนอข้อคิดเห็นหรือคาแนะนาแนบไปกับบันทึกนั้นได้
วิกิ (Wiki) เป็นการสื่อสารแบบไม่ประสานเวลา โดยสนับสนุนให้ผู้เรียนและกลุ่ม
สามารถสร้างและแก้ไขเอกสารร่วมกัน ซึ่งสนับสนุนการเรียนแบบร่วมมือ ทั้งนี้กลุ่ม
ผู้เรียนสามารถบันทึกและร่วมกันทางานในพื้นที่ส่วนกลางร่วมกัน โดยผู้สอนอาจใช้
เครื่องมือการติดต่อสื่อสารอื่นร่วมด้วย เพื่อให้สมาชิกในกลุ่มได้ร่วมอภิปรายและตกผลึก
ความคิดได้
บทควำมต่ำงประเทศที่เกี่ยวกับรูปแบบเว็บไซต์ทำงกำรศึกษำ
ชื่อผู้เขียน/ ผู้แต่ง : Tim and John
ปี (ค.ศ.) : 2009
กำรออกแบบ : เว็บ 2.0
รำยละเอียด
Google AdSense, Flickr, Bit Torrent, Napster, blogging, upcoming.org
and EVDB, search engine optimization, cost per click, web services,
participation, wikis, tagging ("folksonomy"), syndication
ชื่อผู้เขียน/ ผู้แต่ง : Paul
ปี (ค.ศ.) : 2006
22

24. กำรออกแบบ : เว็บ 2.0
รำยละเอียด
Flickr, YouTube, MySpace, Wikipedia, and the entire blogosphere,
share digital
การพัฒนาเว็บไซต์สาหรับการเรียนการสอน ตามแนวทางของ ADDIE Instructional
Design Model ซึ่งประกอบด้วยขั้น ตอนดังนี้
1) กำรวิเครำะห์ (Analysis)
ฝ่ายผู้ผลิต/ผู้ดูแลเว็บไซต์ (Webmaster) : การวิเคราะห์วัตถุประสงค์ของเว็บไซต์
กลุ่มผู้ชม/เป้าหมาย เนื้อหา และศึกษาแหล่งข้อมูลต่างๆ
ฝ่ายผู้สอนและ/หรือนักออกแบบการเรียนการสอน : การวิเคราะห์ (Analysis)
คือการวิเคราะห์วัตถุประสงค์ของบทเรียนผู้เรียนพื้นฐานของผู้เรียน เนื้อหา แหล่งความรู้
และสื่อที่เหมาะสม
2) กำรออกแบบ (Design)
ฝ่ายผู้ผลิต/ผู้ดูแลเว็บไซต์ (Webmaster) : การออกแบบ (Design) คือการ
กาหนดโครงสร้างเว็บไซต์ (Site Structure) รายละเอียดหน้าเว็บเพจ ทั้งนี้ เพื่อให้
สอดคล้องกับวัตถุประสงค์ของเว็บไซต์ กลุ่มผู้ชม/เป้าหมาย และเนื้อหา โดยพิจารณาถึง
การจัดระบบข้อมูลสารสนเทศ (Chunking information) เพื่อเอื้อ
แก่ผู้เข้าชมเว็บไซต์และ/หรือผู้เรียน เว็บไซต์ส่วนใหญ่จะมีการจัดลาดับเนื้อหาโดย
เรียงลาดับตามความสาคัญมากไปน้อย หรือหลักการโดยภาพรวมลงไปสู่รายละเอียด
ปลีกย่อย (hierarchy of importance) ในอีกลักษณะหนึ่งคือรูปแบบการจัดลาดับตาม
ความสัมพันธ์ (Relations) โดยนาเสนอข้อมูล สารสนเทศจากการคาดเดาใจผู้เข้าชมว่า
อะไรคือสิ่งที่ผู้ชมคาดหวังว่าจะเจอก่อนหลัง อาจเริ่มจากข้อมูลที่ผู้เข้าชม/ผู้เรียนมี
ความคุ้นเคยมากไปน้อย เพื่อให้ผู้ชมสามารถเข้าถึงข้อมูลที่ต้องการได้
23

25. บทที่ 2
หลักกำรออกแบบเว็บไซต์ทำงกำรศึกษำ
หลักการพื้นฐานในการออกแบบจึงเข้ามามีบทบาทสาคัญที่ผู้ออกแบบเว็บไซต์
ทางการศึกษาควรพิจารณา คือ การเน้นข้อความสาคัญความตรงกันข้าม ความสมดุล
การวางแนว การทาซ้า การเลือกใช้สี และการเลือกใช้ภาพนอกจากหลักการออกแบบใน
ข้างต้นแล้วยังมีข้อควรพิจารณา คือ หลักการเพิ่มเติมสาหรับการออกแบบเว็บไซต์ทาง
การศึกษา ได้แก่ ความเรียบง่าย ความสม่าเสมอ ระบบนาทางคุณภาพในการออกแบบ
การออกแบบหน้าจอ ความละเอียดของจอภาพ และการนาเสนอเนื้อหา
1. หลักกำรพื้นฐำนในกำรออกแบบเว็บไซต์ทำงกำรศึกษำ
1.1 กำรเน้นข้อควำมสำคัญ แนวทางในการพิจารณาการเน้นข้อความสาคัญคือ
ให้ผู้ออกแบบถามตนเองดังนี้
1). ส่วนใดที่เราดูเป็นส่วนแรก ส่วนที่สอง ส่วนที่สาม
2). การที่เราดูสิ่งนั้น ก่อนเป็นเพราะอะไร
3). ผู้ออกแบบมีเทคนิควิธีอะไรในการจัดลาดับองค์ประกอบต่างๆในหน้ากระดาษ
เช่น
- สี
- ขนำดพื้นผิว
- ตำแหน่ง
4). จะเน้นการจัดข้อมูลให้เป็นระเบียบอย่างไร
เนื่องจากการเน้นเข้ามามีบทบาทสาคัญในการออกแบบเพื่อให้ผู้อ่าน/ผู้เข้าชม
เว็บไซต์เข้าใจง่ายขึ้น เน้นความสาคัญของส่วนประกอบสาคัญ ทาให้เป็นจุดสนใจของผู้
เข้าชมเว็บไซต์ และทาให้ผู้อ่านเข้าใจในสิ่งที่เราต้องการสื่อได้ง่าย สามารถดึงดูดผู้อ่าน
ได้มากที่สุดหลังจากนั้น เน้นคาหรือประโยคที่คิดว่ามันสามารถดึงดูดความสนใจของ
ผู้อ่านได้ โดยการกาหนลาดับของการมอง ส่วนประกอบสาคัญในการมองคือสิ่งกระตุ้น

26. หรือดึงดูดความสนใจของผู้อ่านมากที่สุดหรือไม่ มีการกาหนดกลุ่มเป้าหมายที่ชัดเจนคือ
กลุ่มผู้ที่สนใจศึกษาเกี่ยวกับการเรียนการสอนอีเลิร์นนิงด้านบนในส่วนของแบนเนอร์
(ส่วนที่สาคัญที่สุด) มีชื่อของมหาวิทยาลัยชัดเจน ในเว็บไซต์มีการเชื่อมโยงไปยัง
แหล่งข้อมูล update ต่างๆ และบทเรียนให้ผู้เยี่ยมชมสามารถเข้ามาศึกษาได้ นอกจากนี้
ยังมีระบบ log-in สาหรับสมาชิกเพื่อเข้าไปศึกษา และแลกเปลี่ยนความรู้ (ส่วนไอคอน
ต่างๆ เป็นส่วนที่สาคัญที่ 2 ส่วนใหญ่คือคอลัมน์ซ้ายของหน้าจอ) ส่วนกลางของหน้าจอมี
การโพสต์ประกาศสาคัญและประชาสัมพันธ์ต่างๆ อาจกล่าวได้ว่าวิธีการเน้นสามารถทา
ได้หลายวิธี เช่น ทาให้มีขนาดใหญ่ ทาให้หนา ทาให้สว่าง การเพิ่มลักษณะพิเศษให้กับ
ส่วนประกอบสาคัญ เช่น การใส่รูปแบบที่แตกต่างจากข้อความในหน้านั้นๆ เช่น การเพิ่ม
เงาและความหนานูน (Shadow & Bevel) ในกรณีที่เป็นภาพ การเน้นภาพให้เด่นด้วย
การวางภาพบนพื้นขาว การใช้สีตรงกันข้าม การเพิ่มเงา ทาให้เอียงเมื่อส่วนประกอบ
สาคัญอื่นเป็นแนวนอน ทาให้เข้มเมื่อทุกสิ่งรอบๆ เป็นสีจางทาให้สว่างถ้าทุกสิ่งทุกอย่าง
มืด ทาให้ชัดถ้าทุกสิ่งทุกอย่างไม่ชัด เป็นต้น
ดังนั้น อาจสรุปได้ว่า หลักการของการเน้น คือ การตัดสินใจเลือกข้อมูลที่สาคัญ
ที่สุดของสารนั้นๆ ซึ่งในที่นี้คือเว็บไซต์ และนามาทาให้เด่นชัดที่สุด ในกรณีที่มีส่วน
สาคัญของข้อมูลมากกว่าหนึ่ง จะต้องมีการวางแผนการกาหนดลาดับขั้นการมอง
กาหนดส่วนที่สาคัญที่สุด กาหนดส่วนที่สาคัญรองลงมา หลังจากนั้น ทาการเน้น
ความสาคัญตามลาดับ
ข้อดีของการใช้การเน้นความสาคัญในงานคือ การช่วยให้ข้อมูลเด่นชัดขึ้นและเอื้อ
กับความสะดวกในการใช้งานของผู้ใช้
1.2 ควำมตรงกันข้ำม แนวทางในการพิจารณาความตรงกันข้ามคือ
1). การเน้นความแตกต่างระหว่างองค์ประกอบทางสายตา
2). ความตรงกันข้ามของขนาด สี พื้นผิว น้าหนัก (ตัวหนา,ตัวบาง) โดยหลักความ
ตรงกันข้ามเป็นอีกหนึ่งหนทางที่ง่ายที่สุด และเร็วที่สุดในการดึงความสนใจของผู้อ่าน
มายังสารนั้นๆ (หน้าเว็บเพจ) หลักความตรงกันข้ามนามาใช้ร่วมกับหลักการเน้นย้า
25

27. (The principle of Emphasis) เพื่อจัดองค์ประกอบของหน้าเว็บเพจไม่ให้ดู
เหมือนกันมากจนเกินไป และใช้หลักการเน้นย้าตามองค์ประกอบทางสายตา เมื่อทุก
อย่างบนหน้าเว็บเพจดูเหมือนกัน เพราะถ้าขาดการเน้นย้า และความตรงกันข้าม หน้า
เว็บเพจก็ดูเหมือนขาดรสชาติ น่าเบื่อ และขาดแบบแผนอันเป็นระบบที่ชัดเจน และเมื่อ
ทุกอย่างดูมีความสาคัญเท่ากัน
ผู้ดูผู้ชมจะทราบถึงองค์ประกอบที่สาคัญและสิ่งแรกที่ต้องมองก่อนได้อย่างไร
ความตรงกันข้ามเกิดขึ้น เมื่อมีสององค์ประกอบหรือมากกว่าแตกต่างจากอีกอันหนึ่ง
หนทางที่จะเกิดความตรงกันข้ามประกอบ คือ การเน้นความแตกต่างระหว่าง
องค์ประกอบทางสายตา เช่น การวางองค์ประกอบเล็กๆ พร้อมกับองค์ประกอบใหญ่
เช่นตัวอักษรตัวเล็กกับตัวอักษรตัวใหญ่ หรือรูปภาพเล็กกับรูปภาพใหญ่ การใช้สีโทน
ร้อนกับสีโทนเย็น รูปทรงเรขาคณิต หรือพื้นผิวมองทะลุผ่านพื้นสีเดียวกัน การใช้
ตัวอักษรที่มีลูกเล่นอยู่ติดกับตัวอักษรเรียบๆพื้นๆ การใช้ตัวอักษรตัวหนาหรือมีเส้นกับ
ตัวอักษรปกติหรือมีเส้น โดยการใช้หลักการเน้นย้า ช่วยคุณจัดข้อมูลให้เป็นระบบ
ระเบียบ และเริ่มทาให้เกิดความแตกต่างตามที่ปรากฏแก่สายตา ในขณะที่การใช้
หลักการตรงกันข้ามจะเน้นความแตกต่างทางสายตาระหว่างองค์ประกอบทางสายตา
สรุปได้ว่า หลักการเน้นย้า และหลักการตรงกันข้ามมักจะใช้ควบคู่กันเสมอ
1.3 ควำมสมดุล แนวทางในการพิจารณาความสมดุลคือ
1). หลีกเลี่ยงการปล่อยพื้นที่ในหน้ากระดาษบางส่วนให้ว่างเปล่า หรือใส่อะไร
ต่างๆ ที่มากเกินความจาเป็น
2). การจัดสมดุลแบบสมมาตร (Symmetrical Balance) และแบบไม่สมมาตร
(Asymmetrical Balance)
3). พยายามจัดองค์ประกอบให้ balance ซ้าย กลาง ขวา
4). การเลือกรูปภาพมาใส่ให้ส่งเสริมข้อความ
5). การใส่เงาหลังองค์ประกอบต่างๆ จะช่วยให้งานมีมิติขึ้นได้
6). การบิดหรือหมุนภาพหรือข้อความต่างๆ ช่วยเพิ่มชีวิตชีวาให้กับงานได้
26

28. ทั้งนี้ การออกแบบที่สมดุล คือ การที่น้าหนักทางสายตาขอองค์ประกอบภายในหนึ่งหน้า
มีการจัดวางอย่างเท่ากัน น้าหนักทางสายตาคือ สิ่งที่แสดงถึงน้าหนักทางกายภาพภายใน
หน้าหนึ่งๆ
ตัวอย่างเช่น หัวข้อที่เป็นตัวหนา ก็จะมีน้าหนักทางสายตามากกว่าข้อความที่มี
ขนาดเล็กในบรรทัดอื่นๆ หรือรูปสีแดงสดก็จะมีน้าหนักทางสายตาที่มากกว่ารูปเดียวกัน
แต่เป็นสีเทา ในขณะเดียวกัน รูปภาพที่น่าสนใจต่างๆก็จะมีน้าหนักทางสายตาที่มากกว่า
ตัวอักษรล้วนๆ เนื่องจากคนเรามีแนวโน้มที่จะดูรูปภาพก่อนที่จะไปดูที่ตัวอักษร โดยไม่
ว่าจะเป็นขนาด สี หรือลวดลายขององค์ประกอบต่างๆ ก็ล้วนมีผลต่อการรับรู้ค่าน้าหนัก
ทางสายตาทั้งสิ้น
ก่อนที่เราจะสามารถจัดสมดุลได้ดีนั้น เราจะต้องเลือกว่าคา ข้อความ หรือรูปภาพ
ใด ที่เราควรจะเน้น และส่วนใดควรจะจัดเอาไว้ด้วยกัน จัดสิ่งที่เกี่ยวข้องกันเอาไว้
ด้วยกัน เมื่อเราได้จัดข้อมูลเอาไว้ด้วยกันชุดหนึ่งแล้ว สิ่งที่จะต้องทาก็คือการสร้างสมดุล
ในส่วนอื่นๆ ของหน้าด้วยข้อมูลหรือองค์ประกอบอื่นๆ โดยรูปแบบการจัดวางที่เป็นแบบ
สมดุลที่สมมาตรกัน
แบบสมดุลที่สมมาตรกัน (Symmetrical Balance)จะเป็นรูปแบบที่มี
องค์ประกอบทางสายตาจะสมมาตรกัน ไม่ว่าจะเป็นด้านข้างทั้งสอง หรือด้านบนและ
ด้านล่าง เราสามารถสร้างรูปแบบของการสมดุลที่สมมาตรกันได้โดยการสร้างเส้นสมมติ
(เส้น Guide & Grid) ขึ้นที่กึ่งกลางของหน้า จากนั้น จึงจัดวางองค์ประกอบที่มีความ
คล้ายกันลงไป จัดให้อยู่กลางหน้าโดยอาศัยไกด์จากเส้นสมมติที่สร้างขึ้น ซึ่ง วิธีนี้เป็น
วิธีการออกแบบง่ายๆ ที่นักออกแบบมือใหม่นิยมใช้ ซึ่งก็ไม่ถือว่าผิดแต่อย่างใด
อย่างไรก็ตามการจัดวางหน้าเช่นนี้จะทาให้ชิ้นงานของเราดูเป็นทางการ เรียบ
และแข็งจนเกินไป ขาดอารมณ์ของการเคลื่อนไหวและพลังทางสายตา การออกแบบโดย
การจัดสมดุลแบบสมมาตรนั้น เหมาะกับงานที่ค่อนข้างทางการ และเรียบๆ ในทาง
ตรงกันข้าม หากเราต้องการงานที่ดูมีชีวิตชีวามากขึ้น เราอาจจะต้องหันไปใช้การ
ออกแบบโดยการจัดสมดุล
แบบไม่สมมาตร (Asymmetrical Balance) โดยในการจัดสมดุลแบบไม่สมมาตร
นั้น คาประโยคและรูปภาพต่างๆ จะไม่ถูกจัดวางให้เท่ากันในแต่ละด้านของเส้นสมมติ
ตรงจุดแกนกลาง ในการจัดBalanceแบบสมมาตรนั้น หากตรงมุมล่างซ้ายของหน้ามี
รูปภาพอยู่ ทางด้านขวาก็จะถูกจัดให้เกิดการสมดุลขึ้น โดยการวางรูปภาพขนาดเดียวกัน
27

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

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

31. สีเหลือง จะให้ความรู้สึกแจ่มใส ความสดใสร่าเริง สีทอง แสดงถึงความหรูหรา
และสีเงิน แสดงถึงเทคโนโลยีสมัยใหม่
ดังนั้น การออกแบบเว็บไซต์และการเลือกใช้สีนั้น จึงควรคานึงถึงกลุ่มเป้าหมาย
และวัตถุประสงค์ของเว็บไซต์ด้วย เมื่อพิจารณาจากโทนสีร้อน (แดง ม่วงแกมแดง ส้ม
เหลือง และเขียวอมเหลือง) สีเหล่านี้จะสร้างความรู้สึกอบอุ่น (ต้อนรับผู้เข้าชม)
สะดวกสบาย และดึงดูดความสนใจ ในทางตรงกันข้าม โทนสีเย็น (ม่วง น้าเงิน ฟ้า น้า
เงินแกมเขียว และเขียว) สีเหล่านี้จะสร้างความรู้สึกสบาย สุภาพเรียบร้อย มีความ
ชานาญ (Professional look) แต่อาจขาดความดึงดูดความสนใจ และรู้สึกหดหู่ ซึมเศร้า
ภำพที่ 3 เว็บไซต์โทนสีร้อน
ภำพที่ 4 เว็บไซต์โทนสีเย็น
30

32. สีและคอมพิวเตอร์
สีมีความสัมพันธ์กับคอมพิวเตอร์ เนื่องจากการออกแบบบนหน้าคอมพิวเตอร์ สีที่
ปรากฏให้เห็นบนหน้าจอเป็นการผสมสีโดยใช้ระบบ RGB ซึ่งเป็นระบบที่ใช้กันทั่วไปใน
จอคอมพิวเตอร์ จะทางานได้ดีและมองดูเป็นธรรมชาติ ประกอบด้วย 3 สี คือ แดง
เขียว น้ำเงิน
ซึ่งแตกต่างจากการออกแบบสาหรับงานพิมพ์ต่างๆ ใช้สีระบบ CMYK
ประกอบด้วย Cyan (สีฟ้ำ) Magenta (สีแดง) Yellow (สีเหลือง) Black (สีดำ)
เทคนิคของการใช้สีควรใช้สีที่ดึงดูดความสนใจเพื่อสร้างความสาคัญให้กับข้อความหรือ
ภาพนั้น การเลือกสีที่เข้ากับหัวข้อในการออกแบบงานชิ้นนั้นการดึงความสนใจจากผู้อ่าน
ให้เห็นความสาคัญของข้อมูลบนหน้ากระดาษ สามารถทาได้โดยใช้สีที่สว่าง ในกรณีที่
งานที่ใช้กระดาษหลายๆหน้า เช่น เว็บไซต์ ควรใช้สีที่ใช้แต่ละคอลัมน์เป็นสีเดิม เช่น ใช้
Banner เป็นสีเดียวกัน การเลือกใช้ภาพสีสว่างเป็นภาพพื้นหลังเพื่อเพิ่มความน่าสนใจ
ให้กับชิ้นงาน สาหรับผู้ที่เริ่มต้น ควรศึกษาการเลือกใช้สีที่อยู่ในธีม (theme) เดียวกัน
เช่น การศึกษา website ของ Adobe Kuler (http://kuler.adobe.com) สาหรับการ
เลือกใช้สีสาหรับเว็บไซต์ VisiBone Web Design Color References
(http://www.visibone.com/color) เป็นเว็บรูปแบบสีที่ช่วยออกแบบเว็บไซต์
Colourlovers Website (http://www.colourlovers.com/about) สาหรับช่วยใน
การไล่เฉดสีในการออกแบบ และสุดท้ายคือการเรียนรู้จากผู้อื่นว่ามีวิธีการใช้สีในงาน
อย่างไร
ภำพที่ 5 Adobe Kuler (http://kuler.adobe.com)
31

33. คุณภำพในกำรออกแบบ
เว็บจะมีคุณภาพ และน่าเชื่อถือได้นั้น ควรให้ความสาคัญกับการออกแบบอย่าง
มาก เช่นเดียวกับสื่อประเภทอื่นๆ ที่ต้องออกแบบและเรียบเรียงเนื้อหาอย่างรอบคอบ
เว็บที่ทาขึ้นอย่างลวก ไม่มีมาตรฐานการออกแบบและการจัดระบบข้อมูลนั้น เมื่อมี
ข้อมูลเพิ่มขึ้นเรื่อยๆ ก็จะเกิดปัญหาและไม่สามารถสร้างความเชื่อถือจากผู้ใช้ได้
กำรออกแบบหน้ำจอ
การออกแบบหน้าจอที่สมดุลกันระหว่างเมนู รายการเลือก เนื้อหา ภาพประกอบ
จะช่วยให้ผู้ใช้สนใจเนื้อหาได้มาก โดยมากมักจะแบ่งจอภาพเป็นส่วนๆ ได้แก่
- ส่วนแสดงหัวเรื่อง
- ส่วนแสดงข้อควำมประชำสัมพันธ์
- ส่วนแสดงเนื้อหำ
- ส่วนแสดงภำพประกอบ
- ส่วนประกอบเสริมอื่นๆ (โดยเฉพำะเว็บไซต์สำหรับ E-Learning)
เช่น
- ส่วนควบคุมบทเรียน
- ส่วน log-in
- หมำยเลขเฟรมลำดับเนื้อหำ เป็นต้น
ควำมละเอียดของจอภำพ
ปัจจุบันความละเอียดของจอภาพที่นิยมใช้ จะมีสองค่า คือ 800x600 pixel และ
1024 x 768 pixel ดังนั้น ควรพิจารณาถึงความละเอียดที่จะดีที่สุด เพราะหาก
ออกแบบหน้าจอ สาหรับจอภาพ 1024 x 768 pixel แต่นามาใช้กับจอภาพ 800x600
pixel จะทาให้เนื้อหาตกขอบจอได้ แต่ถ้าหากจัดทาด้วยค่า 800x600 pixel หากนา
เสนอผ่านจอ 1024 x 768 pixel จะปรากฏพื้นที่ว่างรอบเฟรมเนื้อหาที่นาเสนอ การ
นาเสนอเนื้อหา การนาเสนอเนื้อหาที่เป็นข้อความ สิ่งที่ควรคานึงถึงคือ ฟอนต์ที่นามาใช้
งาน ควรเป็นฟอนต์มาตรฐาน
(ถ้าเป็นภาษาอังกฤษ นิยมใช้ Sans Serifs เช่น Arial Cordia News และหลีกเลี่ยง
ตัวอักษรแบบ Serifs เช่น Times New Roman) และตัวอักษรควรมีรูปแบบที่ชัดเจนมี
32

34. การกาหนดขนาดที่เหมาะสมกับกลุ่มเป้าหมาย นาเสนอด้วยข้อความนาแบบสั้นๆ
เพื่อดึงเข้าเนื้อ หาจริง หลีกเลี่ยงการนาเสนอแบบจัดกึ่งกลาง ควรนาเสนอภาพ
พอประมาณ ไม่มากหรือน้อยเกินไป จุดเน้นให้ใช้การตีกรอบสี หรือเน้นด้วยสีตัวอักษร
ด้วยสีโทนร้อน
33

35. บทสรุป
การออกแบบเว็บไซต์สาหรับการเรียนการสอนนั้น นอกจากการคานึงถึง
กลุ่มเป้าหมาย ความสะดวกในการใช้งานของผู้ใช้แล้วนั้น ความสวยงามและสุนทรียภาพ
ของเว็บไซต์ก็มีความสาคัญเช่นกัน ดังนั้น หลักการออกแบบ (Design Principles) จึง
เข้ามามีบทบาทสาคัญที่ผู้ออกแบบเว็บไซต์ควรพิจารณา กล่าวคือ
1). กำรเน้นข้อควำมสำคัญ (Emphasis)
2). ควำมตรงกันข้ำม (Contrast)
3). ควำมสมดุล (Balance)
4). กำรวำงแนว (Alignment)
5). กำรทำซ้ำ (Repetition)
6). กำรเลือกใช้สี (Colors)
7). กำรเลือกใช้ภำพ (Images)
นอกจากหลักการออกแบบดังกล่าวแล้ว ยังมีข้อควรพิจารณาเพิ่มเติมสาหรับการ
ออกแบบเว็บไซต์ทาง
การศึกษาคือความเรียบง่าย (Simplicity) ความสม่าเสมอ (Consistency) ระบบนาทาง
ที่ใช้งานง่าย (User-Friendly Navigation) คุณภาพในการออกแบบ (Design Stability)
การออกแบบหน้าจอ (Screen Design)
รวมถึงความละเอียดของจอภาพและการนาเสนอเนื้อหาด้วย

36. บรรณำนุกรม
กรมวิชาการ. (2544). ควำมรู้เกี่ยวกับสื่อมัลติมีเดียเพื่อกำรศึกษำ. กรุงเทพฯ: ศูนย์พัฒนา
หนังสือ, กรมวิชาการ กระทรวงศึกษาธิการ.
จิตเกษม พัฒนาศิริ. (2539). เริ่มสร้ำงโฮมเพจด้วย HTML. กรุงเทพฯ: วิตตี้กรุ๊ป.
จินตวีร์ มั่นสกุล. (2551). เอกสำรประกอบกำรสอนวิชำกำรออกแบบเว็บไซต์สำหรับอีเลิร์นนิง.
หลักสูตรผู้เชี่ยวชาญอีเลิร์นนิง. โครงการมหาวิทยาลัยไซเบอร์ไทย สานักงาน
คณะกรรมการอุดมศึกษา กระทรวงศึกษาธิการ.
จินตวีร์ คล้ายสังข์ และประกอบ กรณีกิจ. (2552). PEDAGOGY-BASED HYBRID
LEARNING: จำกแนวคิดสู่กำรปฏิบัติ. วารสารครุศาสตร์ (ผ่านการพิจารณาจาก
ผู้ทรงคุณวุฒิแล้ว อยู่ในระหว่างตีพิมพ์)
จินตวีร์ คล้ายสังข์. (2553). โครงกำรวิจัยรูปแบบเว็บไซต์และรูปแบบบทเรียนอิเล็กทรอนิกส์
ที่เหมำะสมสำหรับกำรเรียนกำรสอนแบบอีเลิร์นนิงในระดับอุดมศึกษำ.
สานักงานคณะกรรมการการอุดมศึกษา กระทรวงศึกษาธิการ.
เจนจิรา อนันตกาล. (2548). กำรศึกษำรูปแบบโฮมเพจเว็บไซต์ทำงด้ำนกำรศึกษำระดับ
อุดมศึกษำที่ตรงตำมควำมต้องกำรของผู้ใช้. วิทยานิพนธ์ปริญญามหาบัณฑิต
สาขาวิชาคอมพิวเตอร์และเทคโนโลยีสารสนเทศ คณะครุศาสตร์อุตสาหกรรม
และเทคโนโลยี มหาวิทยาลัยเทคโนโลยีพระจอมเกล้าธนบุรี.
ใจทิพย์ ณ สงขลา. (2547). กำรออกแบบกำรเรียนกำรสอนบนเว็บในระบบกำรเรียน
อิเล็กทรอนิกส์. กรุงเทพฯ: ศูนย์ตาราและเอกสารทางวิชาการ คณะครุศาสตร์
จุฬาลงกรณ์มหาวิทยาลัย.
_____________. (2550). วิธีวิทยำกำรออกแบบกำรเรียนกำรสอนอิเล็กทรอนิกส์. กรุงเทพฯ:
โรงพิมพ์แห่งจุฬาลงกรณ์มหาวิทยาลัย.
ณัฐพล ราไพ. (2548). รูปแบบของเว็บเพจที่มีต่อผลสัมฤทธิ์ทำงกำรเรียนของนักศึกษำ
ระดับปริญญำตรี. วิทยานิพนธ์ปริญญามหาบัณฑิต สาขาเทคโนโลยีการศึกษา
มหาวิทยาลัยเกษตรศาสตร์.
ถนอมพร เลาหจรัสแสง. (2545). Designing e-learning หลักกำรออกแบบและกำรสร้ำงเว็บ
เพื่อกำรเรียนกำรสอน. เชียงใหม่ : องค์การค้าครุสภา.
ปราวีณยา สุวรรณณัฐโชติ และจินตวีร์ มั่นสกุล. 2550. กำรจัดกำรเรียนกำรสอนแบบ
ผสมผสำนด้วยระบบบริหำรจัดกำรเรียนรู้ Blackboard ของสำขำวิชำเทคโนโลยี
กำรศึกษำสำหรับนิสิตระดับปริญญำตรี คณะครุศำสตร์. เอกสารประกอบ
การประชุมวิชาการคณะครุศาสตร์ วันที่ 10 - 11 กรกฎาคม 2550
ปทีป เมธาคุณวุฒิ. (2544). เทคโนโลยีสำรสนเทศเพื่อกำรบริหำรสถำบันอุดมศึกษำ.
กรุงเทพฯ: โรงพิมพ์แห่งจุฬาลงกรณ์มหาวิทยาลัย.

37. ปิยพจน์ ตัณฑะผลิน . (2009). Web 2.0 tools. (ออนไลน์). เข้าถึงใน
http://lms.thaicyberu.go.th/officialtcu/main/advcourse/presentstu/course/
bm521/kurokung_2/kurokung-web2/index.html (20 มีนาคม 2553).
ไพฑูรย์ ศรีฟ้า. (2542). Webpage. วำรสำรเทคโนโลยีสื่อสำรกำรศึกษำ. 6(4)(พฤษภาคม) :
หน้า 97-99.
สรวงสุดา ปานสกุล. (2545). กำรนำเสนอรูปแบบกำรเรียนรู้กระบวนกำรแก้ปัญหำเชิง
สร้ำงสรรค์แบบร่วมมือในองค์กรบนอินเทอร์เน็ต. วิทยานิพนธ์ปริญญาดุษฎีบัณฑิต
สาขาวิชาเทคโนโลยีและสื่อสารการศึกษา จุฬาลงกรณ์มหาวิทยาลัย.
สุนิตย์ เชรษฐาและชิตพงษ์ กิตตินราดร. Web 2.0 กับกำรกำรเรียนรู้เพื่อสร้ำงปัญญำ
สำธำรณะ. Thai RuralNet (TRN). [ออนไลน์]. เข้าถึงใน
http://www.trnlab.org/data/web2.0-whitepaper.pdf. (20 มีนาคม 2553).