การเรียนการสอนบนเว็บ

1. การเรียนการสอนบนเว็บ ระบบการเรียนอิเล็กทรอนิกส์

2. เทคโนโลยีสารสนเทศ ประเภทของ e-Learning คอร์สแวร์ 1 5 การเรียนการสอนผ่านเว็บ 2 การจัดการเรียนการสอนในลักษณะ e-Learning 3 องค์ประกอบของ e-Learning ระบบบริหารจัดการรายวิชา 4 6 การจัดการเรียนการสอนโดยใช้เครือข่ายอินเทอร์เน็ต 2

3. การออกแบบโครงสร้างเว็บไซต์การออกแบบโครงสร้างเว็บไซต์ การออกแบบทางทัศนะ 10 8 การออกแบบ e-Learning คอร์สแวร์ การออกแบบส่วนนำทาง ฮาร์ดแวร์และซอฟต์แวร์ที่ใช้ในการสร้างบทเรียน 11 9 7 การจัดการเรียนการสอนโดยใช้เครือข่ายอินเทอร์เน็ต 3

4. 1. การเรียนการสอนผ่านเว็บ 2.1 ความหมายการเรียนการสอนผ่านเว็บ ราชบัณฑิตสถานได้บัญญัติคำศัพท์ "Web-Based Instruction" ไว้ว่า "การสอนโดยใช้เว็บเป็นฐาน" หรือ "การสอนบนเว็บ" เนื่องจากคำว่า "การสอนบนเว็บ" เป็นคำที่นิยมใช้กันมาก สรรรัชต์ ห่อไพศาล (2544) กล่าวว่า “เป็นการนำเอาระบบอินเทอร์เน็ตมาออกแบบ เพื่อใช้ในการศึกษาการจัดการเรียนการสอนผ่านเว็บ (Web-Based Instruction)” 4

5. การนำเสนอ (Presentation) การเรียนการสอนผ่านเว็บ จะต้องอาศัยคุณลักษณะของอินเทอร์เน็ต 3 ประการ การสื่อสาร (Communication) การก่อเกิดปฏิสัมพันธ์ 5

6. 1 3 2 การเรียนการสอนสามารถเข้าถึงทุกหน่วยงานที่มีอินเทอร์เน็ตติดตั้งอยู่ การเรียนการสอนกระทำได้โดยผู้เข้าเรียนไม่ต้องทิ้งงานประจำเพื่อมาเข้าชั้นเรียน 2.2 ประโยชน์ของการเรียนการสอนผ่านเว็บ ไม่ต้องเสียค่าใช้จ่ายในการเรียนการสอน เช่น ค่าที่พัก ค่าเดินทาง 6

7. 4 5 6 ประโยชน์ของการเรียนการสอนผ่านเว็บ การเรียนการสอนกระทำได้ตลอด 24 ชั่วโมง การจัดสอนหรืออบรมมีลักษณะที่ผู้เข้าเรียนเป็นศูนย์กลาง การเรียนรู้เกิดกับผู้เข้าเรียนโดยตรง การเรียนรู้เป็นไปตามความก้าวหน้าของผู้รับการเรียนการสอนเอง 7

8. 1 2 3 เว็บสนับสนุนรายวิชา (Web Supported Courses) เว็บทรัพยากรการศึกษา (Web Pedagogical Resources) 2.3 ประเภทของการเรียนการสอนผ่านเว็บ เว็บรายวิชา (Stand-alone Courses) 8

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

10. - e-Learning, คอมพิวเตอร์ช่วยสอน (CAI) และการสอนบนเว็บ (WBI) ในปัจจุบันมีคาศัพท์ต่าง ๆ ที่เกี่ยวข้องกับการเรียนจากสื่ออิเล็กทรอนิกส์อยู่มากมาย อาทิเช่น คอมพิวเตอร์ช่วยสอน (CAI) • e-Learning กับ CAI (Computer-Assisted Instruction) บทเรียนคอมพิวเตอร์ช่วยสอนหรือ CAI ย่อมาจาก Computer-Assisted Instruction ภาษาไทยเรียกว่า "คอมพิวเตอร์ช่วยสอน" CAI • e-Learning กับ WBI ทั้ง e-Learning และ WBI ต่างก็เป็นผลจากการผสมผสานระหว่างเว็บเทคโนโลยีกับกระบวนการออกแบบการเรียนการสอน เพื่อเพิ่มประสิทธิภาพทางการเรียนรู้และแก้ปัญหาในเรื่องข้อจากัดทางด้านสถานที่และเวลาในการเรียน 10

11. มิติการนำ เสนอเนื้อหา มิติเกี่ยวกับผู้เรียน มิติการนำไปใช้ใน การเรียนการสอน การถ่ายทอดเนื้อหา การนำ e-Learning ไปใช้ประกอบการเรียน ตอบสนองการเรียน บริบทที่เกี่ยวกับ e-Learning 11

12. 3) e-Learning ช่วยทำให้ผู้เรียนสามารถควบคุมการเรียนของตนเองได้ 2) e-Learning ช่วยทำให้ผู้สอนสามารถตรวจสอบความก้าวหน้าพฤติกรรมการเรียนของผู้เรียนได้อย่างละเอียดและตลอดเวลา 1) e-Learning ช่วยให้การจัดการเรียนการสอนมีประสิทธิภาพมากยิ่งขึ้น ข้อได้เปรียบของ e-Learning 12

13. ลักษณะสำคัญ 1) Anywhere,Anytime 2) Multimedia 3) Non–linear 4) Interaction 5) Intermediate Response ลักษณะสำคัญของ e-Learning e-Learning ที่ดีควรประกอบด้วย 13

14. ผู้สอนที่นำ e-Learning ไปใช้ในลักษณะของสื่อเสริม โดยไม่มีการปรับเปลี่ยนวิธีการสอนเลย 1 ผู้สอนจะต้องเปลี่ยนจากบทบาทการเป็นผู้ให้ (impart) เนื้อหาแก่ผู้เรียนมาเป็น ผู้ช่วยเหลือ (facilitator) 2 การลงทุนในด้านของ e-Learning ต้องคลอบคลุมถึงการจัดการให้ผู้สอนและผู้เรียนสามารถเข้าถึงเนื้อหา 3 ข้อพึงระวัง 14

15. แนวคิดเกี่ยวกับ e-Learning e-Learning เป็นรูปแบบการเรียนที่เกิดขึ้นเพื่อตอบสนองการเรียน ในลักษณะทางไกล (Distance Learning) เพื่อลดปัญหาในด้าน ต้นทุน การเรียนการสอนและการอบรม โดยผู้เรียนจะต้องศึกษา เนื้อหาจาก e-Learning คอร์สแวร์ (Courseware) ซึงหมายถึงสื่อ การสอนทางคอมพิวเตอร์ที่ได้รับการออกแบบและพัฒนาอย่างมี ประสิทธิภาพเพื่อใช้ในการนำเสนอเนื้อหา 15

16. ความรู้ เน้นข้อความ เน้นสื่อประสม อย่างง่าย ความรู้ ซึ่งแบ่งได้เป็น 3 ลักษณะ เน้นความเป็น มัลติมีเดีย เชิงโต้ตอบ 16

17. แบบฝึกหัด เนื้อหา โหมดการติดต่อสื่อสาร ระบบบริหารจัดการรายวิชา 4. องค์ประกอบของ e-Learning 17

18. 4.1 เนื้อหา องค์ประกอบของ e-Learning โฮมเพจ หรือเว็บเพจแรกของเว็บไซต์ หน้าแสดงรายชื่อวิชา เว็บเพจแรกของแต่ละวิชา 18

19. 4.2 ระบบบริหารจัดการรายวิชา องค์ประกอบที่สำคัญมากสำหรับ e-Learning ได้แก่ ระบบบริหารจัดการรายวิชา ซึ่งเป็นเสมือนระบบที่รวบรวมเครื่องมือซึ่งออกแบบไว้เพื่อให้ความสะดวกแก่ผู้ใช้ในการจัดการกับการเรียนการสอนออนไลน์นั่นเอง ซึ่งผู้ใช้ในที่นี้อาจแบ่งได้เป็น 3 กลุ่ม ได้แก่ ผู้สอน (instructors)ผู้เรียน (students) และผู้บริหารระบบเครือข่าย (network administrators) 19

20. เครื่องมือที่ e-Learning ควรจัดหาให้ผู้เรียน ไปรษณีย์ อิเล็กทรอนิกส์ การประชุมทางคอมพิวเตอร์ 4.3 โหมดการติดต่อสื่อสาร (Modes of Communication) 20

21. 4.4 แบบฝึกหัด / แบบทดสอบ การจัดให้มีแบบฝึกสำหรับผู้เรียน แบบฝึกหัด / แบบทดสอบ การจัดให้มีแบบทดสอบผู้เรียน 21

22. 5. ประเภทของ e-Learning คอร์สแวร์ 1. กระบวนการในการเรียนการสอน ถนอมพร เลาหจรัสแสง (2545) ได้กล่าวเกี่ยวกับการออกแบบการเรียนการสอนทางคอมพิวเตอร์ว่าคล้ายกันกับการออกแบบการเรียนการสอนในชั้นเรียนนั่นเอง กล่าวคือ จะต้องประกอบด้วยขั้นตอนต่าง ๆ ซึ่งคอยช่วยผู้เรียนแต่ละคนให้เกิดการเรียนรู้ตามวัตถุประสงค์ที่ได้มีการกำหนดไว้ 22

23. ประเภทของ e-Learning คอร์สแวร์ 2. รูปแบบของ e-Learning คอร์สแวร์ e-Learning คอร์สแวร์สามารถแบ่งออกคร่าว ๆ ได้เป็น 4 ประเภท ได้แก่ ประเภทเรียงลำดับการนำเสนอ แบบฝึกหัด การทดลองเสมือนจริง และเกม ดังนี้ (ถนอมพร เลาหจรัสแสง 2545) การเรียงลำดับการนำเสนอ (Presentation Sequence)ความหมาย คอร์สแวร์การเรียงลำดับการนำเสนอ หมายถึงคอร์สแวร์ที่ออกแบบในลักษณะที่ผู้เรียนศึกษาเนื้อหาโดยการอ่าน ฟัง และสังเกต การบรรยาย และ/หรือการสาธิตต่าง ๆ ตามเวลาและจังหวะการเรียนของตน เนื้อหาที่เหมาะสม การเรียงลำดับการนำเสนอเหมาะสำหรับการจัดเนื้อหาการบรรยาย (Lecture) ในลักษณะคุณภาพสูงที่มีความคงที่สำหรับผู้เรียนทุกคน 23

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

25. 1) ให้ผู้เรียนเป็นผู้ควบคุมการนำเสนอ 4) เชื่อมโยงมากกว่าการเขียน 5) ออกแบบให้อ่านง่าย คำแนะนำสำหรับการออกแบบ 2) ออกแบบให้ผู้เรียนมีความกระตือรือร้น 3) เลือกใช้สื่อที่หลากหลาย 25

26. แบบฝึกหัด (Drill and Practice) คอร์สแวร์แบบฝึกหัด หมายถึงคอร์สแวร์ที่อนุญาตให้ผู้เรียนฝึกฝนซ้าแล้วซ้าอีกเพื่อประยุกต์ใช้ความรู้ใดความรู้หนึ่ง หรือทักษะใดทักษะหนึ่ง โดยความรู้และทักษะนั้น ๆ จะเป็นความรู้และทักษะขั้นพื้นฐาน เช่น คอร์สแวร์ฝึกการคำนวณอย่างง่าย โครงสร้างของคอร์สแวร์จะคล้ายกับวงจรแบบทดสอบ (testing cycle) นั่นเอง กล่าวคือจะเริ่มด้วยการนำเสนอปัญหาหรือคำถามให้ผู้เรียนตอบ 26

27. รูปแบบการเรียนที่เหมาะสมรูปแบบการเรียนที่เหมาะสม รูปแบบการเรียนที่เหมาะสม คอร์สแวร์ประเภทแบบฝึกหัดจะเริ่มจากการนำเข้าสู่บทเรียน ซึ่งรวมถึงการต้อนรับผู้เรียนเข้าสู่เนื้อหา และอธิบายวิธีการที่ผู้เรียนต้องปฏิบัติ รวมทั้งวัตถุประสงค์ของการเรียน หลังจากนั้นจะมีการเสนอคำถาม ผู้เรียนจะคอยตอบคำถามและได้รับผลป้อนกลับ หลังจากได้ผลป้อนกลับก็จะมีข้อคำถามนำเสนอต่อไปเรื่อย ๆ จนกระทั่งครบทุกข้อ 27

28. คำแนะนำสำหรับนักออกแบบคำแนะนำสำหรับนักออกแบบ คำแนะนำ • สร้างคลังคำถาม • /คำตอบ 2) จัดให้มีคำถามที่มี ระดับความง่าย– ความยาก 28

29. การทดลองเสมือนจริง (Virtual Lab) ความหมาย การทดลองเสมือนจริงเป็นคอร์สแวร์ประเภทหนึ่งซึ่งเป็นการนำเสนอการจำลองบนหน้าจอ (on-screen simulator) ผู้เรียนสามารถใช้การทดลองเสมือนจริงในการทดสอบสมมติฐานที่ได้ตั้งไว้ รวมทั้งสังเกตผลที่ได้จากการทดสอบ เนื้อหาที่เหมาะสม คอร์สแวร์ในลักษณะการทดลองเสมือนจริง 29

30. คำแนะนำสำหรับนักออกแบบคำแนะนำสำหรับนักออกแบบ • เน้นในสิ่งที่ต้องการสอน ในการ • ออกแบบคอร์สแวร์ คำแนะนำ 2) ใช้การทดลองเสมือนจริง ในหลาย ๆ กิจกรรม 30

31. 6. ระบบบริหารจัดการรายวิชา 6.1 ความหมายของระบบบริหารจัดการรายวิชา ระบบบริหารจัดการรายวิชาหมายถึงระบบที่ได้รวบรวมเครื่องมือหลาย ๆ ประเภทที่เกี่ยวกับกระบวนการเรียนการสอนออนไลน์เข้าไว้ด้วยกัน โดยมีจุดประสงค์เพื่อช่วยสนับสนุนผู้ใช้ 3 กลุ่ม ได้แก่ ผู้เรียน ผู้สอน และผู้เชี่ยวชาญด้านเทคนิค 31

32. 6.2ส่วนประกอบหลักของระบบบริหารจัดการรายวิชา6.2ส่วนประกอบหลักของระบบบริหารจัดการรายวิชา 6.2.1 ส่วนในการใส่เนื้อหาการบรรยายของผู้สอน (Slots for lecture note) 6.2.2 กระดานข่าวเพื่อการอภิปราย (Asynchronous bulletin board) 6.2.3 ห้องสนทนา (Synchronous chat) 6.2.4 การทดสอบออนไลน์ (Online testing) 6.2.5 อิเล็กทรอนิกส์เมล์ (Electronics mails) 6.2.6 การจัดการแฟ้มข้อมูล (File management) 32

33. 6.3 ส่วนประกอบรองของระบบบริหารจัดการรายวิชา 6.3.1 ส่วนประกอบพิเศษอื่น (Many other tools) 6.3.2 ส่วนจัดการการลงทะเบียนของผู้เรียน (Manage student enrollment) 6.3.3 ส่วนของการเรียกดูและบันทึกคะแนนของผู้เรียนโดยผู้สอน (View and record student score – faculty) 6.3.4 ส่วนของการเรียกดูคะแนนของผู้เรียนโดยผู้เรียน (View student score – individual student) 6.3.5 ส่วนของการเรียกดูสถิติการเข้าเรียน (View student progress tracking) 33

34. 7. การออกแบบ e-Learning คอร์สแวร์ 7.1 ความหมายของคอร์สแวร์ ถนอมพร เลาหจรัสแสง (2545) กล่าวถึงความหมายของคอร์สแวร์ไว้ว่า หมายถึงสื่ออิเล็กทรอนิกส์ (คอมพิวเตอร์) ซึ่งเป็นการแลกเปลี่ยนรูปแบบการนำเสนอบทเรียนจากเอกสารตำราให้อยู่ในรูปของสื่อการเรียนการสอนทางคอมพิวเตอร์ 7.2 การออกแบบและพัฒนา e-Learning คอร์สแวร์ รูปแบบการเรียนการสอนที่เหมาะสมได้แก่ รูปแบบการออกแบบการเรียนการสอนในลักษณะพัฒนาชุดการเรียนและในลักษณะเชิงระบบเนื่องจากเหตุผลสำคัญคือ เป็นรูปแบบซึ่งเหมาะสำหรับงานซึ่งใช้วิธีการในการออกแบบพัฒนาสื่อขึ้นมาใหม่ 34

35. การออกแบบคอร์สแวร์ e-Learning ประกอบด้วย 7 ขั้น ดังนี้ ขั้นที่ 1 ขั้นเตรียมตัว ขั้นที่ 2 ขั้นเลือกเนื้อหา ขั้นที่ 7 : ขั้นบำรุงรักษา ขั้นที่ 3 : ขั้นการวิเคราะห์หลักสูตร ขั้นที่ 6 : ขั้นการประเมินผล ขั้นที่ 4 : ขั้นออกแบบหลักสูตร ขั้นที่ 5 : ขั้นการพัฒนาการเรียนการสอน 35

36. 8. การออกแบบโครงสร้างเว็บไซต์ การออกแบบโครงสร้างเว็บไซต์ ผู้ออกแบบเว็บส่วนใหญ่จะมีรูปแบบการสร้างที่แตกต่างกัน โดยทั่วไปจะขึ้นอยู่กับความถนัด และความพอใจของตนเป็นหลัก (Arvanistis, 1997 อ้างจาก ถนอมพร เลาหจรัสแสง 2545) โดยไม่ได้คำนึงถึงหลักในการออกแบบที่ถูกต้อง เท่าที่ควร ลินช์และฮอร์ตัน (Lynch and Horton, 1999 อ้างจากถนอมพร เลาหจรัสแสง 2545) จึงได้เสนอแนวคิดสำหรับการออกแบบเว็บไซต์ ว่า การออกแบบเว็บไซต์ที่ดีควรจะต้องวางโครงสร้างให้มีความสมดุล มีการเชื่อมต่อสัมพันธ์กัน ระหว่างรายการ (Menu)หรือโฮมเพจ กับหน้าเนื้อหาอื่น ๆ 36

37. โครงสร้างของเว็บสรุปออกเป็น 4 รูปแบบใหญ่ ๆ ได้ดังนี้ 8.1 เว็บที่มีโครงสร้างแบบเรียงลำดับ (Sequential Structure) 37

38. โครงสร้างของเว็บสรุปออกเป็น 4 รูปแบบใหญ่ ๆ ได้ดังนี้ 8.2 เว็บที่มีโครงสร้างแบบลำดับขั้น (Hierarchical Structure) 38

39. โครงสร้างของเว็บสรุปออกเป็น 4 รูปแบบใหญ่ ๆ ได้ดังนี้ 8.3 เว็บที่มีโครงสร้างแบบตาราง (Grid Structure) 39

40. โครงสร้างของเว็บสรุปออกเป็น 4 รูปแบบใหญ่ ๆ ได้ดังนี้ 8.4 เว็บที่มีโครงสร้างแบบใยแมงมุม (Web Structure) 40

41. 9. การออกแบบส่วนนำทาง 9.1 การนำทาง (Navigation) 9.2 การใช้ไอคอนและเมนูเพื่อการนำทาง 9.3 พฤติกรรมการใช้เว็บกับการออกแบบเว็บไซต์ 9.4 หลักการในการออกแบบส่วนต่อประสานกับผู้ใช้ 41

42. 10. การออกแบบทางทัศนะ 10.1 ความหมายของการออกแบบทางทัศนะ การออกแบบทางทัศนะ (Visual Design) หมายถึง การออกแบบภาพและสีสันบนหน้าจอ ซึ่งคำว่าภาพในที่นี้ไม่จำกัดเฉพาะภาพถ่าย ภาพ กราฟิก 3D แอนิเมชัน หรือ วีดิทัศน์ เท่านั้นแต่รวมถึงข้อความ แผนที่ กราฟ ฯลฯ ที่ปรากฏบนหน้าเว็บด้วย (ถนอมพร เลาหจรัสแสง 2545) 42

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

44. 10. การออกแบบทางทัศนะ 10.3 ความหมายของ Functional Areas Functional Areasคือ การแบ่งส่วนติดต่อระหว่างโปรแกรมกับผู้ใช้ออกเป็นส่วน ๆ อย่างชัดเจนตามหน้าที่การทางานของมัน เพื่อให้ง่ายต่อการทาความเข้าใจของผู้ใช้ (ถนอมพร เลาหจรัสแสง 2545) 44

45. 10. การออกแบบทางทัศนะ 10.4 การออกแบบ Functional Areas ถนอมพร เลาหจรัสแสง (2545) ได้เสนอวิธีการออกแบบFunctional area ไว้ดังนี้ 10.4.1 ผู้ออกแบบควรออกแบบชื่อหัวข้อบริเวณส่วนบนของหน้าจอ 10.4.2 การออกแบบ Functional Areas ที่ดีนั้นต้องเน้นในเรื่องของความชัดเจนและความสหม่ำเสมอ (Clarity and Consistency) 45

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

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

48. 10. การออกแบบทางทัศนะ 10.7 หลักการสำหรับการออกแบบกราฟิกบนเว็บเพจ ในการออกแบบต้อง คำนึงถึงปัจจัย 2 ข้อ คือ (ถนอมพร เลาหจรัสแสง 2545) 1. ขนาดของ จอคอมพิวเตอร์ที่ใช้ในการแสดงผลซึ่งมีความละเอียดที่ 800x600 pixels 2) หากต้องการให้ผู้ใช้พิมพ์หน้าจอลงบนกระดาษในการออกแบบต้องให้อยู่ใน พื้นที่ 595x842 pixels ซึ่งพื้นที่ในการแสดงผลที่มากที่สุดในการออกแบบ กราฟิก คือ 760x420 pixels 48

49. 10. การออกแบบทางทัศนะ 10.8 การออกแบบตัวเพื่อการอ่านที่ชัดเจน (Readability)ข้อควรพิจารณาที่สำคัญที่สุดในการออกแบบและพัฒนาส่วนต่อประสานและการออกแบบทางทัศนะ ได้แก่ ความสามารถในการอ่านเนื้อหาของผู้เรียน (readability) เพราะการจัดเนื้อหาบทเรียนให้แก่ผู้เรียนเป็นประเด็นหนึ่ง แต่การชักชวนให้ผู้เรียนอ่านเนื้อหาบทเรียนนั้น ๆ เป็นอีกประเด็นหนึ่ง ดังนั้นจึงเป็นสิ่งสำคัญมากสำหรับเว็บไซต์เพื่อการเรียนการสอนที่จะต้องออกแบบให้อยู่ในรูปที่อ่านได้ง่ายและชัดเจนที่สุดเท่าที่จะทำได้ (ถนอมพร เลาหจรัสแสง 2545) 49

50. 10. การออกแบบทางทัศนะ 10.9 เทคนิคในการเพิ่มศักยภาพในการอ่านของผู้เรียน มีเทคนิคบาง ประการที่มีส่วนช่วยในการเพิ่มศักยภาพในการอ่านของผู้เรียน เทคนิค เหล่านั้น ได้แก่ (ถนอมพร เลาหจรัสแสง 2545) 10.9.1 ตัวพิมพ์ (Typeface) 10.9.2 ฟอนต์และตัวอักษรใหญ่-เล็ก (Font and Case) 10.9.3 การจัดความ (Justification) 10.9.4 ความยาวของข้อความแต่ละบรรทัด (Line Length) 10.9.5 ความตัดกัน (Contrast) 10.9.6 การเบี่ยงเบนสมาธิของผู้เรียน (Distractions) 50