บทที่ 5 ออกแบบระบบเนวิเกชั่น Designing Web Navigation
ระบบเนวิเกชั่น
ความสำคัญ
ช่วยให้ผู้ใช้ท่องเว็บได้อย่างคล่องตัวโดยไม่หลงทาง โดยทำให้ผู้ใช้สามารถรู้ได้ว่าตัวเองกำลังอยู่ที่ไหน ได้ผ่านที่ใดมาบ้างและควรจะไปทางไหนต่อ
วัตถุประสงค์
-ผู้ชมกำลังอยู่ส่วนใดของเว็บ
-สามารถเข้าถึงข้อมูลที่ต้องการได้อย่างไร
-สามารถกลับไปยังหน้าเว็บเดิมได้อย่างไร
-หน้าเว็บเพจใดที่ได้เยี่ยมชมข้อมูลแล้ว
รูปแบบของเนวิเกชัน แบ่งเป็น4รูปแบบ
1.ระบบเนวิเกชันแบบลำดับขั้น
2.ระบบเนวิเกชันแบบโกลบอล
3.ระบบเนวิเกชันแบบโลคอล
4.ระบบเนวิเกชันเฉพาะที่
องค์ประกอบของระบบเนวิกเกชันหลัก (Main Navigation Elements)
ระบบเนวิกเกชันที่สำคัญและพบได้มากที่สุดคือ เนวิเกชันที่อยู่ในหน้าเดียวกับเนื้อหา ไม่ใช่เนวิกเกชันที่อยู่ในหน้าแรก เนื่องจากเมื่อผู้ใช้ผ่านหน้าแรกเข้าไปสู่ภายในเว็บไซท์แล้ว ก็ไม่อยากจะกลับมาเริ่มต้นใหม่ที่หน้าแรกทุกครั้งก่อนจะเข้าไปดูเนื้อหาในส่วนอื่นๆต่อ ระบบเนวิเกชันหลักทั้งแบบโกบอลและแบบโลคอล จึงช่วยให้ผู้ใช้สามารถย้ายจากหน้าใดๆ ไปสู่ส่วนอื่นในเว็บไซท์ได้อย่างคล่องตัว องค์ประกอบของเนวิกเกชันมีได้หลายรูปแบบ ได้แก่ เนวิเกชั่นบาร์ เนวิกเกชันเฟรม Pull down, menu, pop-up menu, image map และ search box
เนวิเกชันบาร์ (Nevigation Bar)
เนวิเกชันบาร์เป็นระบบพื้นฐานที่ใช้ได้หลายรูปแบบทั้งแบบลำดับชั้น แบบโกลบอล และแบบโคบอล โดยทั่วไปเนวิเกชันบาร์จะประกอบด้วยกลุ่มของลิงค์ต่าง ๆ ที่อยู่รวมกันในบริเวณหนึ่งของหน้าเว็บ โดยอาจจะเป็นตัวหนังสือหรือกราฟิกก็ได้ และถือเป็นรูปแบบของระบบเนวิเกชันที่ได้รับความนิยมมากที่สุด เนวิเกชันบาร์ระบบเฟรม (Frame-Based)
การสร้างเนวิเกชันบาร์โดยใช้ระบบเฟรมเป็นอีกวิธีที่ทำให้ผู้ใช้เข้าถึงเนวิเกชันได้ง่าย และสม่ำเสมอ คุณสมบัติของเฟรมจะทำให้คุณสามารถแสดงเว็บหลาย ๆ หน้าไว้ในหน้าต่างบราวเซอร์เดียวกัน โดยที่แต่ละหน้ายังเป็นอิสระต่อกัน
……………………………………………………………………………
บทที่ 6 ออกแบบหน้าเว็บ Page Design
หลักสำคัญในการออกแบบหน้าเว็บ
คือ การใช้รูปภาพและองค์ประกอบต่างๆ ร่วมกัน เพื่อสื่อความหมายเกี่ยวกับเนื้อหาหรือลักษณะสำคัญของเว็บให้น่าสนใจ บนพื้นฐานของความเรียบง่ายและสะดวกของผู้ใช้
หลักการออกแบบหน้าเว็บ
1.สร้างลำดับชั้นความสำคัญขององค์ประกอบ
2.สร้างรูปแบบ บุคลิก สไตล์
3.สร้างความสม่ำเสมอตลอดทั่วทั้งไซต์
4.จัดวางองค์ประกอบที่สำคัญไว้ในส่วนบนของหน้า
5.สร้างจุดสนใจด้วยความแตกต่าง
6.จัดแต่งหน้าเว็บให้เป็นระเบียบและเรียบง่าย
7.ใช้กราฟิกอย่างเหมาะสม
เราสามารถใช้ประโยชน์จากเว็บได้2แนวทาง
1.การใช้เป็นสื่อโดยตรงให้อ่านบนหน้าจอ
2.การใช้เป็นสื่อกลางในการพิมพ์ข้อมูลลงในหน้ากระดาษเพื่อเก็บรวบรวมหรืออ่านภายหลัง
รูปแบบโครงสร้างหน้าเว็บ แบ่งเป็น 4 รูปแบบ
1.โครงสร้างหน้าเว็บในแนวตั้ง ได้รับความนิยมมากที่สุด เพราะมีรูปแบบที่ง่ายในการพัฒนาและมีขข้อจำกัดน้อยสุดเมื่อเทียบกับรูปแบบอื่น
2.โครงสร้างหน้าเว็บในแนวนอน ต้องอาศัยความคิดสร้างสรรค์และความพยายามมากกว่าปรกติ เนื่องจากมีข้อจำกัดและสิ่งที่ต้องระวังค่อนข้างมาก
3.โครงสร้างหน้าเว็บที่พอดีหน้าจอ รูปแบบนี้ใช้พื้นที่น้อวกว่าเว็บทั่วไปและมักจะจัดอยู่ตรงกึ่งกลางของหน้าจอ จะไม่มี Scroll Bar
4.โครงสร้างหน้าเว็บแบบสร้างสรรค์ รูปแบบนี้อยู่เหนือกฏเกณฑ์ มักมีรูปแบบและการจัดวางองค์ประกอบเฉพาะตัวที่คาดไม่ถึง มักจะเป็นเว็บของศิลปิน นักออกแบบ บริษัทโฆษณา
ส่วนประกอบของหน้าเว็บ แบ่งเป็น 3 ส่วน
1.ส่วนหัว (Page Header)
2.ส่วนเนื้อหา (Page Body)
3.ส่วนท้าย (Page Footer)
หลักสำคัญในการออกแบบหน้าเว็บ
คือ การใช้รูปภาพและองค์ประกอบต่างๆ ร่วมกัน เพื่อสื่อความหมายเกี่ยวกับเนื้อหาหรือลักษณะสำคัญของเว็บให้น่าสนใจ บนพื้นฐานของความเรียบง่ายและสะดวกของผู้ใช้
หลักการออกแบบหน้าเว็บ
1.สร้างลำดับชั้นความสำคัญขององค์ประกอบ
2.สร้างรูปแบบ บุคลิก สไตล์
3.สร้างความสม่ำเสมอตลอดทั่วทั้งไซต์
4.จัดวางองค์ประกอบที่สำคัญไว้ในส่วนบนของหน้า
5.สร้างจุดสนใจด้วยความแตกต่าง
6.จัดแต่งหน้าเว็บให้เป็นระเบียบและเรียบง่าย
7.ใช้กราฟิกอย่างเหมาะสม
เราสามารถใช้ประโยชน์จากเว็บได้2แนวทาง
1.การใช้เป็นสื่อโดยตรงให้อ่านบนหน้าจอ
2.การใช้เป็นสื่อกลางในการพิมพ์ข้อมูลลงในหน้ากระดาษเพื่อเก็บรวบรวมหรืออ่านภายหลัง
รูปแบบโครงสร้างหน้าเว็บ แบ่งเป็น 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. ขนาดหน้าต่างเบราเซอร์
ขนาดหน้าต่างของเบราเซอร์มีโอกาสที่จะถูกปรับเปลี่ยนเป็นเท่าไหร่ก็ได้ตามความต้องการของผู้ใช้
