รูปแบบของเว็บเพจ

รูปแบบของเว็บเพจ 1. เว็บเพจในแนวตั้ง

รูปแบบของเว็บเพจ 2. เว็บเพจในแนวนอน

รูปแบบของเว็บเพจ 3. เว็บเพจที่พอดีกับหน้าจอ

การกำหนดพื้นที่การแสดงผล การกำหนดพื้นที่เว็บเพื่อนำเสนอทางหน้าจอคอมพิวเตอร์ ภายในขนาด 760 x 420 Pixels การกำหนดพื้นที่เว็บเพื่อพิมพ์ออกมาทางเครื่องพิมพ์ ภายในขนาด 595 x 842 Pixels

พื้นที่เว็บเพื่อนำเสนอทางหน้าจอคอมพิวเตอร์

พื้นที่เว็บเพื่อพิมพ์ออกมาทางเครื่องพิมพ์

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

ชื่อเว็บไซด์หรือชื่อบทเรียน

ลิงค์เชื่อมโยงไปยังส่วนต่างๆ

ประกาศ/คำแนะนำทางการเรียนเบื้องต้น

ระบบลงทะเบียน / ระบบเข้าออกชั้นเรียน

ชื่อผู้สอน หน่วยงาน การติดต่อกับผู้รับผิดชอบ

รายละเอียดเกี่ยวกับโปรแกรมที่เกี่ยวข้องและการตั้งค่า

วันเวลาที่ทำการปรับปรุงแก้ไขเว็บไซด์ล่าสุด

เคาน์เตอร์สำหรับนับจำนวนผู้เข้าใช้เว็บไซด์

ตำแหน่งและส่วนประกอบของ เว็บเพจ ชื่อเว็บหรือชื่อบทเรียน ชื่อหัวข้อหรือชื่อของเนื้อหา ในหน้านั้นๆ เลขหน้าหรือเฟรม ระบบเนวิเกชัน ส่วนนำเสนอเนื้อหา ส่วนล่าง

ตำแหน่งและส่วนประกอบของ เว็บเพจ ชื่อเว็บหรือชื่อบทเรียน ชื่อหัวข้อหรือชื่อของเนื้อหา ในหน้านั้นๆ เลขหน้าหรือเฟรม ระบบเนวิเกชัน ส่วนนำเสนอเนื้อหา ส่วนล่าง

ตำแหน่งและส่วนประกอบของ เว็บเพจ ชื่อเว็บหรือชื่อบทเรียน ชื่อหัวข้อหรือชื่อของเนื้อหา ในหน้านั้นๆ เลขหน้าหรือเฟรม ระบบเนวิเกชัน ส่วนนำเสนอเนื้อหา ส่วนล่าง

ตำแหน่งและส่วนประกอบของ เว็บเพจ ชื่อเว็บหรือชื่อบทเรียน ชื่อหัวข้อหรือชื่อของเนื้อหา ในหน้านั้นๆ เลขหน้าหรือเฟรม ระบบเนวิเกชัน ส่วนนำเสนอเนื้อหา ส่วนล่าง

ตำแหน่งและส่วนประกอบของ เว็บเพจ ชื่อเว็บหรือชื่อบทเรียน ชื่อหัวข้อหรือชื่อของเนื้อหา ในหน้านั้นๆ เลขหน้าหรือเฟรม ระบบเนวิเกชัน ส่วนนำเสนอเนื้อหา ส่วนล่าง

ตำแหน่งและส่วนประกอบของ เว็บเพจ ชื่อเว็บหรือชื่อบทเรียน ชื่อหัวข้อหรือชื่อของเนื้อหา ในหน้านั้นๆ เลขหน้าหรือเฟรม ระบบเนวิเกชัน ส่วนนำเสนอเนื้อหา ส่วนล่าง

ตำแหน่งและส่วนประกอบของ เว็บเพจ ชื่อเว็บหรือชื่อบทเรียน ชื่อหัวข้อหรือชื่อของเนื้อหา ในหน้านั้นๆ เลขหน้าหรือเฟรม ระบบเนวิเกชัน ส่วนนำเสนอเนื้อหา ส่วนล่าง

หลักการใช้สื่อสำหรับเว็บ ตัวอักษร (Text) ภาพกราฟิก (Graphic) ภาพเคลื่อนไหว (Animation) เสียง (Audio) และวีดิทัศน์ (Video)

ตัวอักษร (Text) ใช้ฟอนต์ที่มีอยู่ในเครื่องทั่วไป และไม่ควรจะมีตัวอักษรเกินกว่า 2 แบบ ใช้ตัวอักษรหลายขนาดเพื่อสร้างลำดับความสำคัญของข้อมูล แต่ก็ไม่ควรจะมีหลายขนาดเกินไป หลักเลี่ยงตัวอักษรตัวเอน เพราะอ่านยาก ใช้อักษรตัวหนาเพื่อเน้นประเด็นสำคัญๆ เท่านั้น ไม่ควรใช้ตัวขีดเส้นใต้สำหรับการเน้นข้อความ การจัดข้อความตัวอักษร ควรจัดแบบชิดซ้ายเพราะทำให้การอ่านสะดวกมากที่สุด ความยาวของข้อความแต่ละบรรทัดนั้น ไม่ควรยาวหรือสั้นเกินไป ภาษาไทย (55 - 60 ตัวอักษรหรือ 9 - 10 คำต่อบรรทัด) ภาษาอังกฤษ (28 ตัวอักษรหรือ 12 คำต่อบรรทัด) ไม่ควรใช้สีเกินกว่า 3 สีในแต่ละหน้า

2. ภาพกราฟิก (Graphic) ใช้ภาพให้เหมาะสมกับประเภทของไฟล์ ไฟล์กราฟิกประเภท GIF (Graphic Interchange Format) ให้ข้อมูลสีจำนวน 256 สี เหมาะกับกราฟิกที่ประกอบด้วยสีพื้นๆ และไม่ซับซ้อน ไฟล์กราฟิกประเภท JPEG (Joint Photographic Exports Group) ให้ข้อมูลสีได้มากถึง 16.7 ล้านสี เหมาะกับกราฟิกที่มีความละเอียดสูง GIF JPEG

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

4. เสียง (Audio) และวีดิทัศน์ (Video) เนื่องจากปัญหาในเรื่องของการโหลดข้อมูลที่ต้องใช้เวลานาน ฉะนั้นหากไม่มีความจำเป็นจริงๆ ก็ควรหลีกเลี่ยงที่จะใช้และหาวิธีอื่นนำเสนอแทน ในบางกรณีที่ต้องใช้ก็ควรจะต้องใช้เสียงหรือภาพที่เหมาะสม น่าสนใจ เปิดโอกาสให้ผู้เรียนสามารถเลือกที่จะหยุดหรือเล่นใหม่ได้

การใช้สีสำหรับเว็บ

การออกแบบระบบเนวิเกชัน เข้าใจง่าย ชัดเจน มีความสม่ำเสมอตลอดทั้งเว็บไซด์ มีการตอบสนองผู้ใช้ โดยมีระบบที่ช่วยให้ผู้ใช้ทราบว่าตอนนี้ตนเองอยู่ในตำแหน่งใด ตำแหน่งของเนวิเกชันควรอยู่ในที่ๆ มองเห็นได้ชัดเจน

สรุปหลักในการออกแบบเว็บ ให้มีประสิทธิภาพ โครงสร้างที่ชัดเจนและมีระบบ เนวิเกชันที่มีประสิทธิภาพ ความเหมาะสมของเว็บเพจ ความสม่ำเสมอ ความรวดเร็ว