บทที่ 5 ออกแบบระบบเนวิเกชั่น Designing
Web Navigation
ความสำคัญ
ช่วยให้ผู้ใช้ท่องเว็บได้อย่างคล่องตัวโดยไม่หลงทาง
โดยทำให้ผู้ใช้สามารถรู้ได้ว่าตัวเองกำลังอยู่ที่ไหน
ได้ผ่านที่ใดมาบ้างและควรจะไปทางไหนต่อ
วัตถุประสงค์
-ผู้ชมกำลังอยู่ส่วนใดของเว็บ
-สามารถเข้าถึงข้อมูลที่ต้องการได้อย่างไร
-สามารถกลับไปยังหน้าเว็บเดิมได้อย่างไร
-หน้าเว็บเพจใดที่ได้เยี่ยมชมข้อมูลแล้ว
รูปแบบของเนวิเกชัน แบ่งเป็น4รูปแบบ
-สามารถกลับไปยังหน้าเว็บเดิมได้อย่างไร
-หน้าเว็บเพจใดที่ได้เยี่ยมชมข้อมูลแล้ว
รูปแบบของเนวิเกชัน แบ่งเป็น4รูปแบบ
1. ระบบเนวิเกชันแบบลำดับขั้น
2. ระบบเนวิเกชันแบบโกลบอล
3. ระบบเนวิเกชันแบบโลคอล
4. ระบบเนวิเกชันเฉพาะที่
องค์ประกอบของระบบเนวิกเกชันหลัก (Main Navigation Elements)
ระบบเนวิกเกชันที่สำคัญและพบได้มากที่สุดคือ เนวิเกชันที่อยู่ในหน้าเดียวกับเนื้อหา ไม่ใช่เนวิกเกชันที่อยู่ในหน้าแรก เนื่องจากเมื่อผู้ใช้ผ่านหน้าแรกเข้าไปสู่ภายในเว็บไซท์แล้ว ก็ไม่อยากจะกลับมาเริ่มต้นใหม่ที่หน้าแรกทุกครั้งก่อนจะเข้าไปดูเนื้อหาในส่วนอื่นๆต่อ ระบบเนวิเกชันหลักทั้งแบบโกบอลและแบบโลคอล จึงช่วยให้ผู้ใช้สามารถย้ายจากหน้าใดๆ ไปสู่ส่วนอื่นในเว็บไซท์ได้อย่างคล่องตัว องค์ประกอบของเนวิกเกชันมีได้หลายรูปแบบ ได้แก่ เนวิเกชั่นบาร์ เนวิกเกชันเฟรม Pull down, menu, pop-up menu, image map และ search box
2. ระบบเนวิเกชันแบบโกลบอล
3. ระบบเนวิเกชันแบบโลคอล
4. ระบบเนวิเกชันเฉพาะที่
องค์ประกอบของระบบเนวิกเกชันหลัก (Main Navigation Elements)
ระบบเนวิกเกชันที่สำคัญและพบได้มากที่สุดคือ เนวิเกชันที่อยู่ในหน้าเดียวกับเนื้อหา ไม่ใช่เนวิกเกชันที่อยู่ในหน้าแรก เนื่องจากเมื่อผู้ใช้ผ่านหน้าแรกเข้าไปสู่ภายในเว็บไซท์แล้ว ก็ไม่อยากจะกลับมาเริ่มต้นใหม่ที่หน้าแรกทุกครั้งก่อนจะเข้าไปดูเนื้อหาในส่วนอื่นๆต่อ ระบบเนวิเกชันหลักทั้งแบบโกบอลและแบบโลคอล จึงช่วยให้ผู้ใช้สามารถย้ายจากหน้าใดๆ ไปสู่ส่วนอื่นในเว็บไซท์ได้อย่างคล่องตัว องค์ประกอบของเนวิกเกชันมีได้หลายรูปแบบ ได้แก่ เนวิเกชั่นบาร์ เนวิกเกชันเฟรม Pull down, menu, pop-up menu, image map และ search box
บทที่ 6 ออกแบบหน้าเว็บ Page Design
หลักสำคัญในการออกแบบหน้าเว็บ
หลักการออกแบบหน้าเว็บ
1. สร้างลำดับชั้นความสำคัญขององค์ประกอบ2. สร้างรูปแบบ บุคลิก สไตล์
3. สร้างความสม่ำเสมอตลอดทั่วทั้งไซต์
4. จัดวางองค์ประกอบที่สำคัญไว้ในส่วนบนของหน้า
5. สร้างจุดสนใจด้วยความแตกต่าง
6. จัดแต่งหน้าเว็บให้เป็นระเบียบและเรียบง่าย
7. ใช้กราฟิกอย่างเหมาะสม
รูปแบบโครงสร้างหน้าเว็บ แบ่งเป็น 4 รูปแบบ
1. โครงสร้างหน้าเว็บในแนวตั้ง ได้รับความนิยมมากที่สุด เพราะมีรูปแบบที่ง่ายในการพัฒนาและมีขข้อจำกัดน้อยสุดเมื่อเทียบกับรูปแบบอื่น
2. โครงสร้างหน้าเว็บในแนวนอน ต้องอาศัยความคิดสร้างสรรค์และความพยายามมากกว่าปรกติ เนื่องจากมีข้อจำกัดและสิ่งที่ต้องระวังค่อนข้างมาก
3. โครงสร้างหน้าเว็บที่พอดีหน้าจอ รูปแบบนี้ใช้พื้นที่น้อวกว่าเว็บทั่วไปและมักจะจัดอยู่ตรงกึ่งกลางของหน้าจอ จะไม่มี Scroll Bar
4. โครงสร้างหน้าเว็บแบบสร้างสรรค์ รูปแบบนี้อยู่เหนือกฏเกณฑ์ มักมีรูปแบบและการจัดวางองค์ประกอบเฉพาะตัวที่คาดไม่ถึง มักจะเป็นเว็บของศิลปิน นักออกแบบ บริษัทโฆษณา
ส่วนประกอบของหน้าเว็บ แบ่งเป็น 3 ส่วน
1. ส่วนหัว (Page Header)
2. ส่วนเนื้อหา (Page Body)
3. ส่วนท้าย (Page Footer)
บทที่ 7 การออกแบบเว็บไซต์ให้เหมาะกับสิ่งแวดล้อม
(Design for a variety of Web Environments)
ปัจจัยหลักที่เกี่ยวข้องกับการท่องเว็บไซต์
1.เบราเซอร์ที่ใช้
2.ระบบปฏิบัติการของคอมพิวเตอร์
3.ความละเอียดของหน้าจอ
4.จำนวนสีที่จอของผู้ใช้สามารถแสดงได้
5.ชนิดของตัวอักษรที่มีอยู่ในเครื่องของผู้ใช้
6.ความเร็วในการเชื่อมต่ออินเตอร์เน็ต
7.ขนาดหน้าต่างเบราเซอร์
8.ความสว่างและค่าความต่างของโทนสี
1.เบราเซอร์ที่ใช้
เบราเซอร์ที่ได้รับความนิยม Internet
Explorer,Netscape Navigator,The World,Opera,Mozilla,Firefox
การออกแบบเว็บไซต์ตามคุณสมบัติของเบราเซอร์
- เว็บไซต์สำหรับเบราเซอร์ทุกรุ่น
- เว็บไซต์สำหรับเบราเซอร์รุ่นล่าสุด
- เว็บไซต์ตามความสามารถของเบราเซอร์
- เว็บไซต์ที่มีหลายรูปแบบ
2. ระบบปฏิบัติการ
ระบบปฏิบัติการเป็นปัจจัยที่มีผลต่อการทำงานของเบราเซอร์มาก
โดยแต่ละระบบปฏิบัติการจะมีความแตกต่างกันในเรื่องของชนิด
และรุ่นของเบราเซอร์ที่ใช้ ระดับความระเอียดของหน้าจอ เป็นต้น
3. ความละเอียดของหน้าจอ
ความละเอียด 640*480 หมายถึง
หน้าจอมีจุดพิกเซลเรียงตัวตามแนวนอน 640 พิกเซล
และตามแนวตั้ง 480 พิกเซล ความละเอียดหน้าจอจะไม่ขึ้นอยู่กับขนาดของมอนิเตอร์ที่ใช้
แต่จะขึ้นอยู่กับประสิทธิภาพของการ์ด
4. จำนวนสีที่จอของผู้ใช้สามารถแสดงได้
- มอนิเตอร์สามารถแสดงสีที่แตกต่างกัน นอยู่กับประสิทธิภาพของการ์ดจอ
- มอนิเตอร์สามารถแสดงสีที่แตกต่างกัน นอยู่กับประสิทธิภาพของการ์ดจอ
- หน่วยความจำในการ์ดจอที่มากขึ้นจะทำให้สามารถแสดงสีได้มากขึ้น
- จำนวนสีที่การ์ดจอสามารถแสดงได้
ขึ้นอยู่กับค่าความละเอียดของสีที่เรียกว่า bit depth หรือ color
depth
ชุดสีสำหรับเว็บ หมายถึงชุดสีจำนวน 216 สีที่มีอยู่เหมือนกันในระบบปฏิบัติการ Windows และMac
5. ชนิดของตัวอักษรที่มีอยู่ในเครื่องของผู้ใช้
เบราเซอร์จะแสดงฟอนต์ที่กำหนดไว้ในเว็บเพจได้ก้ต่อเมื่อคอมพิวเตอร์เครื่องนั้นมีฟอนต์เหล่านั้นติดตั้งอยู่ในเครื่อง
เบราเซอร์จะแสดงฟอนต์ที่กำหนดไว้ในเว็บเพจได้ก้ต่อเมื่อคอมพิวเตอร์เครื่องนั้นมีฟอนต์เหล่านั้นติดตั้งอยู่ในเครื่อง
-MS Sans Serif VS Microsoft Sans Serif
-MS Sans Serif เป็นฟอนต์แบบบิตแมพที่ออกแบบขึ้นจากจุดของพิกเซล
โดยมีการออกแบบแต่ละตัวอักษรไว้เป็นขนาดที่แน่นอน
- Microsoft Sans Serif เป็นฟอนต์ที่มีโครงสร้างของอักขระแบบเวคเตอร์หรือลายเส้นโดยมีการออกแบบเอาท์ไลน์ไว้เพียงแบบเดีแต่สามารถปรับขนาดได้อย่างไม่จำกัด
ข้อดี
-สามารถกำหนดลักษณะของตัวอักษรได้อย่างแน่นอน ทั้งขนาด สี และชนิด
-สามารถกำหนดลักษณะของตัวอักษรได้อย่างแน่นอน ทั้งขนาด สี และชนิด
-ผู้ชมทุกคนจะมองเห็นเหมือนกันหมด
ข้อเสีย
-ใช้เวลาในการโหลดมากกว่า
-ลำบากในการแก้ไขและเปลี่ยนแปลง
6. ความเร็วในการเชื่อมต่ออินเตอร์เน็ต
ความเร็วของเน็ตจะมีผลต่อการแสดงผลของเว็บ ซึ่งจะมีหลายระดับ
ความเร็วของเน็ตจะมีผลต่อการแสดงผลของเว็บ ซึ่งจะมีหลายระดับ
-ผู้ใช้ตามบ้านส่วนใหญ่จะใช้ความเร็ว 5
kbps
-ในหน่วยงานบางแห่งอาจจะใช้อินเตอร์เน็ตความเร็วสูง เข่น ADSL,
Cable modem ซึ่งมีความเร็วตั้งแต่ 128 Kbps ถึง 10
Mbps
7. ขนาดหน้าต่างเบราเซอร์
ขนาดหน้าต่างของเบราเซอร์มีโอกาสที่จะถูกปรับเปลี่ยนเป็นเท่าไหร่ก็ได้ตามความต้องการของผู้ใช้
ขนาดหน้าต่างของเบราเซอร์มีโอกาสที่จะถูกปรับเปลี่ยนเป็นเท่าไหร่ก็ได้ตามความต้องการของผู้ใช้
