Transcript ส่วนที่ 3 Page Design

Web Design
การออกแบบเว็บไซต์
Web design
โดย
: นางสาวปนิตา มักประเสริฐ
รหัสประจาตัว : 44530275
สาขา
: วิทยาการคอมพิวเตอร์ ชั้นปี 4 ( ภาคพิเศษ)
อาจารย์ทปี่ รึกษา : อาจารย์ สุรางคนา ธรรมลิขิต
…สัมมนาทางคอมพิวเตอร์ (310492)…
หน้า1
หัวข้ อหลักในการสัมนา
 ส่ วนที่ 1 Process [กระบวนการพัฒนาเว็บไซต์ ]
 ส่ วนที่ 2 Interface Design
[การออกแบบส่ วนติดต่ อกับผู้ใช้ ]
 ส่ วนที่ 3 Page Design [การออกแบบหน้ าเว็บ]
 ส่ วนที่ 4 Site Design [การออกแบบโครงสร้ างไซต์ ]
Web design
…สัมมนาทางคอมพิวเตอร์ (310492)…
หน้า2
Web site คืออะไร
Website (เว็บไซต์ ) หมายถึง กลุ่มของเว็บเพจทีเ่ กีย่ วข้ องสั มพันธ์ กนั
ในการอ้ างถึงเว็บไซต์ เราจะใช้ ที่อยู่บนอินเตอร์ เน็ตเรี ยกว่ า URL ( Uniform
Resource Locator ) ซึ่งผู้ใช้ อนิ เตอร์ เน็ตสามารถระบุในบราวเซอร์ เพือ่ เปิ ด
เข้ ามาดูเว็บไซต์ ได้ ภายในเว็บไซต์ นอกจากเว็บเพจหรือไฟล์ HTML แล้ ว ยัง
ประกอบด้ วยไฟล์ ชนิดอื่น ๆ เช่ น รู ปภาพ , ไฟล์ มัลติมีเดีย , ไฟล์ Style Sheet
และอืน่ ๆ ที่จาเป็ นในการสร้ างหน้ าเว็บ
Web design
…Computer Seminar (310492)…
หน้า3
ความสาคัญของการออกแบบเว็บไซต์
 เว็บไซต์ เป็ นสื่ อทีอ่ ยู่ในความควบคุมของผู้ใช้ เพราะผู้ใช้ มีโอกาสที่จะเลือกคลิก
และไม่ คลิกทีใ่ ดก็ได้ ตามต้ องการ สามารถไปยังทุกหนแห่ งได้ อย่ างง่ ายดายด้ วย
การใช้ เมาส์ คลิกไปตามลิงค์ ต่าง ๆ ผู้ใช้ จึงมักไม่ ค่อยมีความอดทนกับอุปสรรค
และปั ญ หาที่ เ กิ ด จากการออกแบบผิ ด พลาด หากผู้ ใ ช้ ไ ม่ ส ามารถมองเห็ น
ประโยชน์ จากเว็บไซต์ หรื อไม่ เข้ าใจว่ าใช้ งานอย่ างไร ก็มักจะเปลี่ ยนไปยัง
เว็บไซต์ อนื่ ได้ อย่างรวดเร็ว
Web design
…Computer Seminar (310492)…
หน้า4
ส่ วนที่ 1 Process
[กระบวนการพัฒนาเว็บไซต์ ]
Web design
…Computer Seminar (310492)…
หน้า5
ส่ วนที่ 1 Process
Phase 1 :: สารวจปัจจัยสาคัญ (Research)
1. รู้ จักตนเอง
2. เรียนรู้ ผ้ ใู ช้
3. ศึกษาคู่แข่ ง
สิ่ งที่ได้ รับ
1. เป้ าหมายหลักของเว็บไซต์
2. ความต้ องการของผู้ใช้
3. กลยุทธ์ ในการแข่ งขัน
Web design
…Computer Seminar (310492)…
หน้า6
ส่ วนที่ 1 Process
ตัวอย่ าง เรียนรู้ ผ้ ูใช้
National Geographic ได้ พฒ
ั นาเว็บไซต์ Fantastic Forest
(www.nationalgeographic.com/forest/) ซึ่งมีเนือ้ หาเกีย่ วกับการสารวจป่ าสาหรับเด็ก
นักเรียนเกรด 12 โดยใช้ รูปแบบเป็ นเกมส์ ผจญภัย ร่ วมกับภาพประกอบที่เข้ าใจง่ ายและเสี ยง
ภายในป่ า เพือ่ สร้ างความเพลิดเพลินให้ กบั เด็กในการเรียนรู้ ป่า
Web design
…Computer Seminar (310492)…
หน้า7
ส่ วนที่ 1 Process
ตัวอย่ าง www.nationalgeographic.com/forest/
Web design
…Computer Seminar (310492)…
หน้า8
ส่ วนที่ 1 Process
ตัวอย่ าง ศึกษาคู่แข่ ง
นอกเหนือจากการแข่ งขันในตลาดรถยนต์ แล้ ว ผู้ผลิตรถยนต์ ยงั ต้ องมาแข่ งยันกันเพือ่ เป็ น
ผู้นาในสื่ ออินเตอร์ เน็ต เว็บไซต์ ที่น่าสนใจของบริษัททั้งสองคือ Volvo และ Toyota
ต่ างก็มคี ุณสมบัติในการสารวจรายละเอียดของรถทั้งรถโดยรู ปภาพและวิดโี อที่สามารถ
หมุนได้ รอบตัว (360 องศา) เหมือนกัน
Web design
…Computer Seminar (310492)…
หน้า9
ส่ วนที่ 1 Process
ตัวอย่ าง www.volvo.com และ www.toyota.com
Web design
…Computer Seminar (310492)…
หน้า10
ส่ วนที่ 1 Process
Phase 2 :: พัฒนาเนือ้ หา (Site Content)
4. สร้ างกลยุทธ์ การออกแบบ
5. หาข้ อสรุ ปขอบเขตเนือ้ หา
สิ่ งที่ได้ รับ
1. แนวทางการออกแบบเว็บไซต์
2. ขอบเขตและเนือ้ หาการใช้ งาน
3. ข้ อมูลทีถ่ ูกจัดอย่ างเป็ นระบบ
Web design
…Computer Seminar (310492)…
หน้า11
ส่ วนที่ 1 Process
ตัวอย่ าง สร้ างกลยุทธ์ การออกแบบ
เว็บไซต์ ของผลิตภัณฑ์ Powerbar (www.powerbar.com)
สร้ างภาพลักษณ์ ของอาหารเสริมทีใ่ ห้ พลังงานแก่ นักกีฬาได้ อย่ างน่ าสนใจ
Web design
…Computer Seminar (310492)…
หน้า12
ส่ วนที่ 1 Process
ตัวอย่ าง สร้ างกลยุทธ์ การออกแบบ
Alcatel (www.alcatel.com) แสดงลักษณะเด่ นของโทรศัพท์ มือถือรุ่นใหม่
อย่ างละเอียดและน่ าสนใจ เพือ่ ให้ ผู้ชมได้ เห็นถึงข้ อดีและมั่นใจในคุณภาพ
Web design
…Computer Seminar (310492)…
หน้า13
ส่ วนที่ 1 Process
Phase 3 :: พัฒนาโครงสร้ างเว็บไซต์
(Site Structure)
6. จัดระบบข้ อมูล
7. จัดทาโครงสร้ างข้ อมูล
8. พัฒนาระบบเนวิเกชัน
สิ่ งที่ได้ รับ
1. แผนผังโครงสร้ างข้ อมูล
2. แนวทางการท่ องเว็บ
3. ระบบเนวิเกชัน
Web design
…Computer Seminar (310492)…
หน้า14
ส่ วนที่ 1 Process
ตัวอย่ าง จัดทาแผนผังโครงสร้ างข้ อมูล
Web design
…Computer Seminar (310492)…
หน้า15
ส่ วนที่ 1 Process
ตัวอย่ าง พัฒนาระบบเนวิเกชัน
(www.peachpit.com) สามารถกดปุ่ มเนวิเกชันทางด้ านบน เพือ่ ไปยังส่ วนหลัก
ของเว็บได้ โดยตรง ส่ วนรู ปโลโก้ ทางด้ านมุมซ้ าย จะนาคุณกลับไปยังโฮมเพจ
Web design
…Computer Seminar (310492)…
หน้า16
ส่ วนที่ 1 Process
Phase 4 :: ออกแบบและพัฒนาหน้ าเว็บ (Visual design)
9. ออกแบบลักษณะหน้ าตาเว็บเพจ
10. พัฒนาเว็บต้ นแบบและ
ข้ อกาหนดสุ ดท้ าย
สิ่ งที่ได้ รับ
1.
2.
3.
4.
Web design
ลักษณะหน้ าตาของเว็บไซต์
เว็บเพจต้ นแบบทีจ่ ะใช้ ในการพัฒนา
รู ปแบบโครงสร้ างของเว็บไซต์
ข้ อกาหนดในการพัฒนาเว็บไซต์
…Computer Seminar (310492)…
หน้า17
ส่ วนที่ 1 Process
ตัวอย่ าง ออกแบบโครงร่ างหน้ าเว็บ
Web design
…Computer Seminar (310492)…
หน้า18
ส่ วนที่ 1 Process
ตัวอย่ าง แผนผังโครงสร้ างหน้ าเว็บไซต์
Web design
…Computer Seminar (310492)…
หน้า19
ส่ วนที่ 1 Process
ตัวอย่ าง ออกแบบลักษณะหน้ าตาเว็บเพจ
ลักษณะหน้ าตาของเว็บทีเ่ หมาะสมช่ วยส่ งเสริมให้ เนือ้ หาน่ าสนใจยิ่งขึน้
www.wimbledon.com ทีอ่ อกแบบกราฟิ กและสี สอดคล้ องกับกีฬาเทนนิส
Web design
…Computer Seminar (310492)…
หน้า20
ส่ วนที่ 1 Process
Phase 5 :: พัฒนาและดาเนินการ
(Production and Operation)
11. ลงมือพัฒนาเว็บเพจ
12. เปิ ดตัวเว็บไซต์
13. ดูและและพัฒนาอย่ างต่ อเนื่อง
สิ่ งที่ได้ รับ
1. เว็บไซต์ ทสี่ มบูรณ์
2. เปิ ดตัวเว็บไซต์ และทาให้ เป็ นทีร่ ้ ู จัก
3. แนวทางการดูและและพัฒนาต่ อไป
Web design
…Computer Seminar (310492)…
หน้า21
ส่ วนที่ 1 Process
ตัวอย่ าง ลงมือพัฒนาเว็บเพจ
สร้ างเทมเพลตสาหรับหน้ าเว็บ
Web design
…Computer Seminar (310492)…
หน้า22
ส่ วนที่ 1 Process
ตัวอย่ าง ลงมือพัฒนาเว็บเพจ
สร้ างเทมเพลตสาหรับหน้ าเว็บ
Web design
…Computer Seminar (310492)…
หน้า23
ส่ วนที่ 2 Interface Design
[การออกแบบส่ วนติดต่ อกับผ้ ใู ช้ ]
Web design
…Computer Seminar (310492)…
หน้า24
ส่ วนที่ 2 Interface Design
หลักการออกแบบส่ วนติดต่ อกับผู้ใช้
 กาหนดเป้ าหมายของเว็บไซต์
 ให้ ความสาคัญกับการออกแบบเว็บไซต์
 หาจุดเด่ นของเว็บไซต์
 ผู้ใช้ เป็ นศูนย์ กลางในการออกแบบ (User-centered design)
Web design
…Computer Seminar (310492)…
หน้า25
ส่ วนที่ 2 Interface Design
ตัวอย่ าง ให้ ความสาคัญของการออกแบบเว็บไซต์
ตัวอย่ างเว็บไซต์ ทอี่ อกแบบได้ สวยงาม เน้ นความเป็ นไทย
(www.shoppingthai.com)
Web design
…Computer Seminar (310492)…
หน้า26
ส่ วนที่ 2 Interface Design
ตัวอย่ าง การหาจุดเด่ นของเว็บไซต์
ร้ านค้ าออนไลน์ ทอี่ อกแบบให้ เห็นชัดถึงสิ นค้ าและบริการ (www.thaigem.com)
Web design
…Computer Seminar (310492)…
หน้า27
ส่ วนที่ 2 Interface Design
หลักการออกแบบส่ วนติดต่ อกับผู้ใช้ (ต่ อ)
 ไม่ มหี น้ าสุ ดท้ าย (No dead-end pages)
 เข้ าถึงข้ อมูลโดยตรง (Direct Access)
 ความเรียบง่ าย (Simplicity)
 ความสม่าเสมอ (Consistency)
Web design
…Computer Seminar (310492)…
หน้า28
ส่ วนที่ 2 Interface Design
ตัวอย่ าง ความสม่าเสมอ
สามารถสร้ างความสม่าเสมอให้ กบั เว็บไซต์ ได้ โดยใช้ รูปแบบเดียวกัน
ตลอดทั้งไซต์ (www.adobe.com)
Web design
…Computer Seminar (310492)…
หน้า29
ส่ วนที่ 2 Interface Design
ตัวอย่ าง ความสม่าเสมอ ความเรียบง่ าย ระบบเนวิเกชัน
เนือ้ หาทีม่ ีประโยชน์ (www.macromedia.com)
Web design
…Computer Seminar (310492)…
หน้า30
ส่ วนที่ 2 Interface Design
หลักการออกแบบส่ วนติดต่ อกับผู้ใช้ (ต่ อ)
 ความเป็ นเอกลักษณ์ (Identity)
 เนือ้ หาทีม่ ีประโยชน์ (Useful Content)
 คุณภาพในการออกแบบ (Design Stability)
 มีลกั ษณะทีน่ ่ าสนใจ (Visual Appeal)
Web design
…Computer Seminar (310492)…
หน้า31
ส่ วนที่ 2 Interface Design
ตัวอย่ าง ความเป็ นเอกลักษณ์
เว็บไซต์ ทอี่ อกแบบและเน้ นถึงความเป็ นเอกลักษณ์ องค์ กร
(www.thaiairways.com)
Web design
…Computer Seminar (310492)…
หน้า32
ส่ วนที่ 2 Interface Design
หลักการออกแบบส่ วนติดต่ อกับผู้ใช้ (ต่ อ)
 การใช้ งานอย่างไม่ จากัด (Compatibility)
 ระบบเนวิเกชั่นที่ใช้ งานง่ าย (User-Friendly Navigation)
 ระบบการใช้ งานทีถ่ ูกต้ อง (Functional Stability)
 ความเร็วของการส่ งข้ อมูล (Bandwidth and interaction)
Web design
…Computer Seminar (310492)…
หน้า33
ส่ วนที่ 2 Interface Design
ตัวอย่ าง ระบบเนวิเกชัน
เว็บไซต์ ทอี่ อกแบบมาดี มีระบบเนวิเกชันทีด่ แี ละใช้ งานง่ าย
(www.apple.com)
Web design
…Computer Seminar (310492)…
หน้า34
ส่ วนที่ 2 Interface Design
ตัวอย่ าง ความเร็วของการส่ งข้ อมูล (Bandwidth and interaction)
ถึงแม้ ว่าเว็บนีจ้ ะใช้ รูปในการตกแต่ งมาก แต่ กส็ ามารถแสดงผลได้ รวดเร็ว
(www.shoppingthai.com)
Web design
…Computer Seminar (310492)…
หน้า35
ส่ วนที่ 3 Page Design
[การออกแบบหน้ าเว็บ]
Web design
…Computer Seminar (310492)…
หน้า36
ส่ วนที่ 3 Page Design
ส่ วนประกอบของหน้ าเว็บ
 ส่ วนหัวของหน้ า
(Page Header)
 ส่ วนของเนือ้ หา
(Page Body)
 ส่ วนท้ ายของหน้ า
(Page Footer)
Web design
…Computer Seminar (310492)…
หน้า37
ส่ วนที่ 3 Page Design
แนวคิดในการออกแบบหน้ าเว็บ
 ศึกษาและเรียนรู้ จากเว็บไซต์ ต่าง ๆ
 ประยุกต์ รูปแบบจากสิ่ งพิมพ์
 ใช้ แบบจาลองเปรียบเทียบ
 ออกแบบอย่างสร้ างสรรค์ และลงตัว
Web design
…Computer Seminar (310492)…
หน้า38
ส่ วนที่ 3 Page Design
ตัวอย่ าง ประยุกต์ รูปแบบจากสิ่ งพิมพ์
เว็บไซต์ เหล่ านีจ้ ะมีสีสันและรู ปแบบเหมือนกับแมกกาซีนฉบับปัจจุบัน
(www.cosmopolitan.com) และ (www.elle.com)
Web design
…Computer Seminar (310492)…
หน้า39
ส่ วนที่ 3 Page Design
ตัวอย่ าง ออกแบบอย่ างสร้ างสรรค์ และลงตัว
เว็บไซต์ นีอ้ อกแบบด้ วยกราฟิ ก เรียบง่ ายแต่ ดูคลาสิ ก
(www.magnet.co.th) และ (www.kmx-designs.de)
Web design
…Computer Seminar (310492)…
หน้า40
ส่ วนที่ 3 Page Design
หลักการออกแบบหน้ าเว็บ
 สร้ างลาดับชั้นความสาคัญขององค์ ประกอบและเนือ้ หา
 สร้ างรู ปแบบ บุคลิก และสไตล์
 สร้ างความสม่าเสมอตลอดทัว่ ทั้งไซต์
 จัดวางองค์ ประกอบที่สาคัญไว้ ในส่ วนบนของหน้ าเสมอ
Web design
…Computer Seminar (310492)…
หน้า41
ส่ วนที่ 3 Page Design
ตัวอย่ าง สร้ างรู ปแบบ บุคลิก และสไตล์
เว็บไซต์ ของผลิตภัณฑ์ เครื่องเสี ยงของไทย นาเอาลักษณะปุ่ มและสี เครื่องเสี ยงมา
ประยุกต์ ใช้ ในการออกแบบหน้ าเว็บ (www.magnet.co.th)
Web design
…Computer Seminar (310492)…
หน้า42
ส่ วนที่ 3 Page Design
ตัวอย่ าง สร้ างความสม่าเสมอ
(www.paragraffix.com)
Web design
…Computer Seminar (310492)…
หน้า43
ส่ วนที่ 3 Page Design
ตัวอย่ าง สร้ างความสม่าเสมอ
(www.kmx-designs.de)
Web design
…Computer Seminar (310492)…
หน้า44
ส่ วนที่ 3 Page Design
ตัวอย่ าง จัดวางองค์ ประกอบทีส่ าคัญไว้ ในส่ วนบนของหน้ าเสมอ
เว็บไซต์ นีจ้ ะนาชื่อบริษัทและระบบเนวิเกชันซึ่งถือว่ าเป็ นส่ วนสาคัญมากไว้ ส่วน
บนของหน้ าเว็บเพจ (www.siamruby.com)
Web design
…Computer Seminar (310492)…
หน้า45
ส่ วนที่ 3 Page Design
หลักการออกแบบหน้ าเว็บ (ต่ อ)
 สร้ างจุดสนใจด้ วยความแตกต่ าง
 จัดแต่ งหน้ าเว็บให้ เป็ นระเบียบและเรียบง่ าย
 ใช้ กราฟิ กอย่างเหมาะสม
 เข้ าใจลักษณะการใช้ งานของเว็บเพจ
Web design
…Computer Seminar (310492)…
หน้า46
ส่ วนที่ 3 Page Design
ตัวอย่ าง จัดแต่ งหน้ าเว็บให้ เป็ นระเบียบและเรียบง่ าย
เว็บไซต์ ทจี่ ัดวางรู ปภาพและข้ อความอย่ างเรียบง่ าย
(www.microsoft.com) และ (www.macromedia.com)
Web design
…Computer Seminar (310492)…
หน้า47
ส่ วนที่ 3 Page Design
ตัวอย่ าง ใช้ กราฟิ กอย่ างเหมาะสม
ไม่ มากเกินไปจนทาให้ แสดงผลช้ าและน้ อยเกินไปจนดูราบเรียบเกิน
(www.kmx-design.de) และ (www.toyota.com)
Web design
…Computer Seminar (310492)…
หน้า48
ส่ วนที่ 4 Site Design
[การออกแบบโครงสร้ างไซต์ ]
Web design
…Computer Seminar (310492)…
หน้า49
ส่ วนที่ 3 Site Design
การออกแบบไซต์ เป็ นการกาหนดโครงสร้ างของข้ อมูลที่อยู่ภายใน
เว็บไซต์ ในส่ วนการออกแบบนีอ้ าจจะตัดสิ นใจว่ าผู้ใช้ ต้องการอะไรจากเว็บไซต์
สิ่ งใดทีผ่ ้ ูพฒ
ั นาเว็บไซต์ อยากแสดงให้ ผ้ ใู ช้ ได้ ทราบ และทาอย่ างไรจึงจะจัดเรียง
เนือ้ หาได้ ตรงกับทีผ่ ้ ใู ช้ ต้องการ
Web design
…Computer Seminar (310492)…
หน้า50
ส่ วนที่ 3 Site Design
การจัดระบบข้ อมูลในเว็บไซต์ => แบบแผนระบบข้ อมูล
 แบบแผนระบบข้ อมูลแบบแน่ นอน (Exact Organizational Schemes)
 แบบแผนระบบข้ อมูลแบบไม่ แน่ นอน
(Ambiguous Organizational Schemes)
 แบบแผนข้ อมูลแบบผสม (Hybrid Schemes)
Web design
…Computer Seminar (310492)…
หน้า51
ส่ วนที่ 3 Site Design
แบบแผนระบบข้ อมูลแบบแน่ นอน (Exact Organizational Schemes)
การจัดเรียงข้ อมูลตามลาดับตัวอักษร
Web design
…Computer Seminar (310492)…
หน้า52
ส่ วนที่ 3 Site Design
แบบแผนระบบข้ อมูลแบบแน่ นอน (Exact Organizational Schemes)
Web design
การจัดเรียงข้ อมูลตามลาดับเวลา
มีการรวบรวมข้ อมูลเป็ นรายเดือนง่ ายต่ อการค้ นหา
…Computer Seminar (310492)…
หน้า53
ส่ วนที่ 3 Site Design
แบบแผนระบบข้ อมูลแบบแน่ นอน (Exact Organizational Schemes)
การจัดเรียงข้ อมูลตามพืน้ ที่
Web design
…Computer Seminar (310492)…
หน้า54
ส่ วนที่ 3 Site Design
แบบแผนระบบข้ อมูลแบบไม่ แน่ นอน
(Ambiguous Organizational Schemes)
Web design
จัดกลุ่มข้ อมูลตามหัวข้ อ
…Computer Seminar (310492)…
หน้า55
ส่ วนที่ 3 Site Design
แบบแผนระบบข้ อมูลแบบไม่ แน่ นอน
(Ambiguous Organizational Schemes)
จัดกลุ่มข้ อมูลตามผู้ใช้
Web design
…Computer Seminar (310492)…
หน้า56
ส่ วนที่ 3 Site Design
แบบแผนระบบข้ อมูลแบบไม่ แน่ นอน
(Ambiguous Organizational Schemes)
จัดกลุ่มข้ อมูลตามผู้ใช้
Web design
…Computer Seminar (310492)…
หน้า57
ส่ วนที่ 3 Site Design
แบบแผนระบบข้ อมูลแบบไม่ แน่ นอน
(Ambiguous Organizational Schemes)
 จัดกลุ่มข้ อมูลตามการทางาน
 จัดกลุ่มข้ อมูลตามแบบจาลอง
Web design
…Computer Seminar (310492)…
หน้า57
ส่ วนที่ 3 Site Design
แบบแผนข้ อมูลแบบผสม
(Hybrid Schemes)
จัดกลุ่มข้ อมูลแบบผสม
Web design
…Computer Seminar (310492)…
หน้า58
ส่ วนที่ 3 Site Design
โครงสร้ างระบบข้ อมูลในเว็บไซต์ (Organizational Structure)
 โครงสร้ างข้ อมูลแบบลาดับชั้น (Hierachy)
 โครงสร้ างข้ อมูลแบบไฮเปอร์ เท็กซ์ (Hypertext)
 โครงสร้ างข้ อมูลแบบฐานข้ อมูล (Database Model)
Web design
…Computer Seminar (310492)…
หน้า59
ส่ วนที่ 3 Site Design
โครงสร้ างข้ อมูลแบบลาดับชั้น (Hierachy)
Web design
…Computer Seminar (310492)…
หน้า60
ส่ วนที่ 3 Site Design
หลักการออกแบบโครงสร้ างข้ อมูลแบบลาดับชั้น (Hierachy)
 แต่ ละกลุ่มข้ อมูลควรแยกจากกันอย่ างชัดเจน
 พิจารณาถึงความกว้ างและความลึกของโครงสร้ างระบบข้ อมูล หาก
โครงสร้ างข้ อมูลแคบและลึกมาก ผู้ใช้ อาจต้ องคลิกหลายครั้งกว่ าจะเข้ าถึง
สิ่ งทีต่ ้ องการ แต่ ถ้าโครงสร้ างระบบข้ อมูลมีลกั ษณะกว้ างและตืน้ มาก
ผู้ใช้ ต้องเผชิญกับรายการทีม่ ใี ห้ เลือกจานวนมากในแต่ ละเมนู
Web design
…Computer Seminar (310492)…
หน้า61
ส่ วนที่ 3 Site Design
หลักการออกแบบโครงสร้ างข้ อมูลแบบลาดับชั้น (Hierachy)
โครงสร้ างข้ อมูลแคบและลึก
Web design
…Computer Seminar (310492)…
หน้า62
ส่ วนที่ 3 Site Design
หลักการออกแบบโครงสร้ างข้ อมูลแบบลาดับชั้น (Hierachy)
โครงสร้ างข้ อมูลแบบกว้ างและตืน้
Web design
…Computer Seminar (310492)…
หน้า63
ส่ วนที่ 3 Site Design
โครงสร้ างข้ อมูลแบบไฮเปอร์ เท็กซ์ (Hypertext)
ไฮเปอร์ เท็กซ์ เป็ นโรงสร้ างระบบข้ อมูลคล้ ายเครือข่ ายโยงใย โครงสร้ าง
ระบบนีป้ ระกอบด้ วยองค์ ประกอบ 2 ส่ วน คือ รายการหรือกลุ่มข้ อมูลทีถ่ ูกลิงค์
กับลิงค์ ทเี่ ชื่อมโยงข้ อมูลเหล่ านั้น
Web design
…Computer Seminar (310492)…
หน้า64
ส่ วนที่ 3 Site Design
โครงสร้ างข้ อมูลแบบฐานข้ อมูล (Database Model)
ใช้ สาหรับเว็บไซต์ ทมี่ กี ารปรับเปลีย่ นเนือ้ หาอยู่บ่อย ๆ มีการใช้ ระบบฐาน
ข้ อมูลเข้ ามาช่ วย ด้ วยการแยกส่ วนของเนือ้ หาออกจากส่ วนของการนาเสนอ
โดยเนือ้ หาแต่ ละเรื่องจะถูกแยกเก็บเป็ นส่ วนของหัวข้ อ ตัวเรื่อง รูปภาพ ซึ่งตัว
เนือ้ หาเองนั้นจะถูกเก็บอยู่ในฐานข้ อมูลในรู ปแบบตัวหนังสื อธรรมดา ซึ่งไม่ ต้อง
จัดรู ปแบบอะไรมาก เมือ่ ผู้ใช้ คลิกเลือกทีล่ งิ ค์ ของเนือ้ หา ระบบก็จะไปดึงข้ อมูล
ของเนือ้ หาจากฐานข้ อมูลมารวมกับเทมเพลตทีม่ ีอยู่แล้ วได้ เป็ นเว็บเพจทีด่ ูเหมือน
กับหน้ า HTML ปกติ
Web design
…Computer Seminar (310492)…
หน้า65
ส่ วนที่ 3 Site Design
โครงสร้ างข้ อมูลแบบฐานข้ อมูล (Database Model)
ตัวอย่ างเว็บไซต์ ทใี่ ช้ โครงสร้ างข้ อมูลแบบฐานข้ อมูล
Web design
…Computer Seminar (310492)…
หน้า66
เอกสารอ้ างอิง
http://www.webstyleguide.com/
ธวัชชัย ศรี สุเทพ
คัมภีร์ Web Design .- กรุงเทพ ฯ: โปรวิชั่น , 2544
 ดวงพร เกีย๋ งคา
ค่ มู ือสร้ างเว็บไซต์ ด้วยตนเอง ฉบับสมบูรณ์ – กรุงเทพ ฯ : โปรวิชั่น , 2546
Web design
…Computer Seminar (310492)…
หน้า67
ขอบคณ
ุ ท่ านผ้ ฟู ังทุกท่ าน
Web design
…Computer Seminar (310492)…
หน้า68