หน้าเว็บ

Lecture

     1.จัดระบบโครงสร้างข้อมูบ (Information Architecture)
จะมีข้อมูลและการทำงานใดบ้าง โดยเริ่มจากการกำหนดเป้าหมาย กลุ่มผู้ใช้เป้าหมาย เนื้อหาและการใช้งานที่จำเป็น นำมาจัดกลุ่มให้เป็นระบบ
Phase 1 : สำรวจปัจจัยสำคัญ (Research)
1.รู้จักตัวเอง - กำหนดเป้าหมายและสำรวจความพร้อม
2.เรียนรู้ผู้ใช้ - ระบุกลุ่มผู้ใช้และศึกษาความต้องการ
3.ศึกษาคู่แข่ง - สำรวจการแข่งขันและการเรียนรู้คู่แข่ง
Phase 2: พัฒนาเนื้อหา (Site Content)
4.สร้างกลยุทธ์การออกแบบ
5.หาข้อสรุปขอบเขตเนื้อหา
Phase 3: พัฒนาโครงสร้างเว็บไซท์ (Site Structure)
6.จัดระบบข้อมูล
7.จัดทำโครงสร้างข้อมูล
8.พัฒนาระบบเนวิเกชัน
Phase 4: ออกแบบและพัฒนาหน้าเว็บ (Visual Design)
9.ออกแบบลักษณะหน้าตาเว็บ
10.พัฒนาเว็บต้นแบบและข้อกำหนดสุดท้าย
Phase 5: พัฒนาและดำเนินการ (Production & Operation)
11.ลงมือพัฒนาเว็บ
12.เปิดเว็บไซท์
 13.ดูแลและพัฒนาต่อเนื่อง




Designing  Web  Navigation
ความสำคัญของระบบเนวิเกชั
     ระแบบเนวิเกชันอาจประกอบด้วยองค์ประกอบหลายอย่าง เช่น เนวิเกชันบาร์
หรือ pop-up   menu ซึ่งจะอยู่ในทุกหน้าของเว็บเพจ และอาจอยู่ในหน้าเฉพาะที่มีรูปแบบ
เป็นระบบสารบัญ ระบบดัชนี ที่สามารถให้ผู้ใช้คลิกผ่านโครงสร้างข้อมูลไปยังส่วนอื่นได้
รูปแบบเนวิเกชัน แบ่งออกเป็น 4 รูปแบบ
1.ระบบเนวิเกชันลำดับขั้น  (Hierarchical)
2.ระบบเนวิเกชันแบบโกลบอล (Global)
3.ระบบเนวิเกชันแบบโลคอล (Local)
4.ระบบเนวิเกชันเฉพาะที่ (Ad  Hoc)
องค์ประกอบของระบบเนวิเกชันหลัก
     ระบบเนวิเกชันที่สำคัญและพบมากที่สุด คือ เนวิเกชันที่อยู่ในหน้าเดียวกับเนื้อหา ไม่ใช่เนวิเกชัน
ที่อยู่ในหน้าแรก เนื่อกจากเมื่อผู้ใช้ผ่านหน้าแรกเข้าไปสู่ภายในเว็บแล้ว ก็ไม่อยากจะกลับมาเริ่มต้นใหม่ที่หน้าแรกทุกครั้งก่อนจะเข้าไปดูเนื้อหาในส่วนอื่น ๆ ต่อ มีหลายรูปแบบ ได้แก่ เนวิเกชันบาร์ , pop-up menu  , image map และ search  box
 1.วิเกชันบาร์ 
ระแบบเนวิเกชันบาร์เป็นพื้นฐานที่ใช้ได้หลายรูปแบบ ทั้ง แบบลำดับขั้น แบบโกลบอล และแบบโลคอล
2.Pull Down Menu
เป็นส่วนประกอบของฟอร์มที่มีลักษณะเด่นคือ มีรายการให้เลือกมากมายแต่ใช้พี้นที่น้อยเมื่อเทียบองค์ประกอบชนิดอื่น ๆ วิธีจะช่วยให้ผู้ใช้เลือกรายการย่อยเข้าไปสู่เป้าหมายได้อย่างสะดวก
3.Pop up Menu
เป็นเมนูอีกรูปแบบหนึ่งที่มีลักษณะคล้าย Pull down menu แต่รายการย่อยของเมนูจะปรากฏขึ้นเองเมื่อผู้ใช้นำเมาส์ไปวางเหนือตำแหน่งของรายการในเมนูหลัก
4. Image Map
การใช้รูปกราฟิกเป็นลิงค์ในแบบ image map ได้รับความนิยมนำมาใช้กับระบบเนวิเกชันมากขึ้นโดยบางบริเวณของกราฟิกจะถูกกำหนดให้เป็นลิงค์ไปยังส่วนต่าง ๆ
5.Search Box
การจัดเตรียมระบบสืบค้นข้อมูล(search)ภายในเว็บ เป็นระบบเนวิเกชันสำหรับที่มีข้อมูลปริมาณมาก ทำให้ผู้ใช้ค้นหาสิ่งที่ต้องการได้อย่างรวดเร็วโดยระบุคีย์เวิร์ดที่สนใจ





Design for a variety of Web Environments
     ผู้ใช้แต่ละคนมีสภาวะแวดล้อมทางเทคนิคแตกต่างกันไป ตั้งแต่ระบบปฏิบัติการของคอมพิวเตอร์ เบราเซอร์ที่ใช้ ความละเอียดของหน้าจอ และอื่น ๆ อีกมากมาย
เบราเซอร์
คือโปรแกรมที่ใช้เรียกดูเว็บเพจ โดยสามารถแสดงผลได้ทั้งรูปแบบตัวอักษร , รูปภาพ และภาพเคลื่อนไหว
มีเบราเซอร์หลายชนิดที่ได้รับความนิยม เช่น
Internet  Explorer
Netscape Navigator
The World
Opera
Firefox
ความละเอียดของหน้าจอ
ขนาดของจอมอนิเตอร์มีหลายขนาด เช่น 15" , 17" , 21" และอื่น ๆ ความละเอียดของหน้าจอ (monitor resolution) มีหน่วยเป็น  Pixel ความละเอียด 640x480 หมายถึง หน้าจอมีจุดพิกเซลเรียงตัวตามแนวนอน 640 พิกเซล และตามแนวตั้ง 480 พิกเซล
ชนิดของตัวอักษรที่มีอยู่ในเครื่องของผู้ใช้
MS Sans Serif VS Microsoft Sans Serif
MS sans Serif เป็นฟอนต์แบบบิตแมพ (bitmapped funt)ที่ออกแบบขึ้นจากจุดของพิกเซล
Microsoft Sans Serif เป็นฟอนต์ที่มีโครงสร้างของอักขระเป็นแบบเวคเตอร์ และออกแบบเอาท์ไลน์ไว้เพียงแบบเดียว แต่สามารถปรับขนาดได้อย่างได้ไม่จำกัด