บทที่ 1 รู้จักกับการออกแบบเว็บไซท์
(Introduction to Web Design) |
| |
ก้าวสู่ยุคอินเตอร์เน็ต
ความสำคัญของการออกแบบเว็บไซท์
สร้างความได้เปรียบเหนือคู่แข่ง
การออกแบบเว็บไซท์ที่ดี
ออกแบบให้ตรงกับเป้าหมายและลักษณะของเว็บไซท์
องค์ประกอบของการออกแบบเว็บไซท์อย่างมีประสิทธิภาพ
ออกแบบเพื่อความสำเร็จของเว็บ
เริ่มต้นออกแบบเว็บไซท์
ทีมงานพัฒนาเว็บไซท์
โปรแกรมช่วยในการสร้างเว็บ
ความผิดพลาดในการออกแบบเว็บไซท์10 อันดับแรก
ปรับปรุงเว็บไซท์ให้ก้าวหน้าอยู่เสมอ
กรณีศึกษา: การพัฒนาเว็บไซท์ อย.
รู้จักคำศัพท์พื้นฐาน
|
บทที่ 2 กระบวนการพัฒนาเว็บไซท์
(Web Development Processes) |
| |
เริ่มต้นสร้างเว็บไซท์
จัดระบบโครงสร้างข้อมูล (Information Architecture)
กระบวนการ 13 ขั้นตอนในการพัฒนาเว็บไซท์
| Phase I. สำรวจปัจจัยสำคัญ (Research) |
| |
1. รู้จักตัวเอง - กำหนดเป้าหมายและสำรวจความพร้อม
2. เรียนรู้ผู้ใช้ - ระบุกลุ่มผู้ใช้และศึกษาความต้องการ
3. ศึกษาคู่แข่ง - สำรวจการแข่งขันและเรียนรู้คู่แข่ง |
| Phase II. พัฒนาเนื้อหา (Site Content) |
| |
4. สร้างกลยุทธ์การออกแบบ
5. หาข้อสรุปขอบเขตเนื้อหา |
| Phase III. พัฒนาโครงสร้างเว็บไซท์ (Site Structure) |
| |
6. จัดระบบข้อมูล
7. จัดทำโครงสร้างข้อมูล
8. พัฒนาระบบเนวิเกชัน |
| Phase IV. ออกแบบและพัฒนาหน้าเว็บ (Visual design) |
| |
9. ออกแบบลักษณะหน้าตาเว็บเพจ
10. พัฒนาเว็บต้นแบบและข้อกำหนดสุดท้าย |
| Phase V. พัฒนาและดำเนินการ (Production and Operation) |
| |
11. ลงมือพัฒนาเว็บเพจ
12. เปิดตัวเว็บไซท์
13. ดูแลและพัฒนาต่อเนื่อง
|
|
บทที่ 3 ออกแบบเพื่อผู้ใช้ (Designing
for Users) |
| |
กำหนดเป้าหมายของเว็บไซท์
กำหนดกลุ่มผู้ใช้เป้าหมาย
กำหนดกลุ่มเป้าหมายอย่างเฉพาะเจาะจง
นึกถึงผู้ใช้เป้าหมายหลายๆกลุ่ม
เรียนรู้ผู้ใช้
เข้าใจประสบการณ์ของผู้ใช้
จำลองสถานการณ์ (Scenarios)
สิ่งที่ผู้ใช้ต้องการจากเว็บไซท์
ข้อมูลหลักที่ควรมีอยู่ในเว็บไซท์
ออกแบบตามความต้องการของผู้ใช้
ออกแบบเพื่อผู้ใช้ทุกระดับ
|
บทที่ 4 จัดระบบข้อมูลในเว็บไซท์
(Organizing Information) |
| |
ความจำเป็นในการจัดระบบข้อมูล
ความท้าทายในการจัดระบบข้อมูล |
| |
|
ปัญหาความคลุมเครือของกลุ่มข้อมูล
การจัดกลุ่มสิ่งที่มีความแตกต่างกัน
เกณฑ์ความสัมพันธ์ขึ้นอยู่กับแนวคิด
ไม่มีเกณฑ์มาตรฐานในการจัดระบบ
ความแตกต่างของแนวคิด |
| การจัดระบบข้อมูลในเว็บไซท์ |
| |
แบบแผนระบบข้อมูล (Organizational Schemes) |
| |
|
แบบแผนระบบข้อมูลแบบแน่นอน (Exact Organizational
Schemes)
แบบแผนระบบข้อมูลแบบไม่แน่นอน (Ambiguous Organizational Schemes)
แบบแผนระบบข้อมูลแบบผสม (Hybrid Schemes) |
| |
โครงสร้างระบบข้อมูลในเว็บไซท์ (Organizational Structures) |
| |
|
โครงสร้างระบบข้อมูลแบบลำดับชั้น (Hierarchy)
โครงสร้างระบบข้อมูลแบบไฮเปอร์เท็กซ์ (Hypertext)
โครงสร้างข้อมูลแบบฐานข้อมูล (Database Model) |
| |
การสร้างระบบข้อมูลอย่างเหมาะสม |
| |
|
ตัวอย่างการจัดระบบข้อมูล
|
|
บทที่ 5 ออกแบบระบบเนวิเกขันสำหรับเว็บ
(Designing Web Navigation) |
| |
ท่องไปในโลกอินเตอร์เน็ต
ความสำคัญของระบบเนวิเกชัน
คุณสมบัติการนำทางของบราวเซอร์
รูปแบบของระบบเนวิเกชัน
| |
ระบบเนวิเกชันแบบลำดับชั้น (Hierarchical) |
| |
ระบบเนวิเกชันแบบโกลบอล (Global) |
| |
ระบบเนวิเกชันแบบโลโคล (Local) |
| |
ระบบเนวิเกชันเฉพาะที่ (Ad Hoc) |
องค์ประกอบของระบบเนวิเกชัน (Main Navigation Elements)
| |
เนวิเกชันบาร์ (Navigation Bar) |
| |
เนวิเกชันบาร์ระบบเฟรม (Frame-Based) |
องค์ประกอบของระบบเนวิเกชันเสริม (Supplement Navigation Elements)
| |
ระบบสารบัญ (Table of Contents) |
| |
ระบบดัชนี (Index System) |
| |
แผนที่เว็บไซท์ (Site Map) |
| |
ไกด์ทัวร์ (Guided Tour) |
การออกแบบระบบเนวิเกชันของเว็บไซท์
สร้างระบบเนวิเกชันหลัก
สร้างระบบเนวิเกชันเสริม
เนวิเกชันแบบกราฟิก vs ตัวอักษร
เนวิเกชันแบบกราฟิกพร้อมคำอธิบาย
คำอธิบายของเนวิเกชัน
พื้นฐานของระบบเนวิเกชัน
สร้างสิ่งแวดล้อมที่สื่อความหมาย
เพิ่มความคล่องตัวในการเคลื่อนที่
คุณสมบัติสำคัญของระบบเนวิเกชัน
|
บทที่ 6 ออกแบบหน้าเว็บ (Page Design) |
| |
แนวคิดในการออกแบบหน้าเว็บ
| |
เรียนรู้จากเว็บไซท์ต่างๆ |
| |
ประยุกต์รูปแบบจากสิ่งพิมพ์ |
| |
ใช้แบบจำลองเปรียบเทียบ (Metaphor) |
หลักการออกแบบหน้าเว็บ
| |
สร้างลำดับชั้นความสำคัญขององค์ประกอบ (Visual Hierachy) |
| |
สร้างรูปแบบ บุคลิก และสไตล์ |
| |
สร้างความสม่ำเสมอตลอดทั่วทั้งไซท์ |
| |
สร้างจุดสนใจด้วยความแตกต่าง |
| |
จัดแต่งหน้าเว็บให้เป็นระเบียบและเรียบง่าย |
| |
ใช้กราฟิกอย่างเหมาะสม |
| |
เข้าใจลักษณะการใช้งานของเว็บเพจ |
ออกแบบหน้าเว็บสำหรับการพิมพ์
รูปแบบโครงสร้างของหน้าเว็บ
ส่วนประกอบของหน้าเว็บ
เทคนิคการจัดโครงสร้างของหน้า
| |
จัดโครงสร้างของหน้าโดยใช้ตาราง |
| |
จัดโครงสร้างของหน้าโดยใช้เฟรม (Frame) |
| |
กำหนดพื้นที่ว่างโดยใช้กราฟิกใส (Single-pixel spacer) |
ออกแบบหน้าโฮมเพจ (Home Page Design)
หน้าก่อนโฮมเพจ (Splash and Utility Page)
ออกแบบหน้าแบบฟอร์ม (Form page Design)
เทคนิคการออกแบบเว็บเพจให้แสดงผลได้รวดเร็ว
| |
ใช้ตัวอักษรและลิงค์แบบ HTML |
| |
ใช้ไฟล์กราฟิกให้ถูกประเภท |
| |
กำหนดค่า width และ height ของกราฟิก |
| |
กำหนดค่า lowsrc และ alt |
| |
นำกราฟิกกลับมาใช้ใหม่ในหน้าอื่นๆ (Recycling graphic) |
| |
ใช้ Style Sheep (CSS) ในการออกแบบ |
ข้อแนะนำในการออกแบบหน้าเว็บเพจ (Page Design Tips)
ออกแบบโครงสร้างของหน้าโดยใช้โปรแกรมกราฟิก
กำหนดชื่อของเว็บให้สื่อความหมาย (HTML Page Title)
|
บทที่ 7 ออกแบบเว็บไซท์ให้เหมาะกับสิ่งแวดล้อม
(Design for a Variety of Web Environments) |
| |
แหล่งข้อมูลสถิติ
ระบบปฏิบัติการ (Operating Systems)
ความละเอียดหน้าจอ (Monitor resolution) |
| |
เลือกขนาดความละเอียดหน้าจอในการออกแบบ
ข้อมูลช่วยในการตัดสินใจ
ทดสอบขนาดเว็บเพจที่ความละเอียดต่างๆ |
ความสามารถในการแสดงสีของมอนิเตอร์ (Monitor color
depth)
บราวเซอร์ (Browsers) |
| |
ออกแบบเว็บไซท์สำหรับบราวเซอร์ที่แตกต่างกัน
สถิติการใช้บราวเซอร์
พื้นที่ว่างในหน้าต่างบราวเซอร์
พื้นที่ขอบภายในบราวเซอร์ (Margin)
ออกแบบเว็บไซท์ตามคุณสมบัติของบราวเซอร์ |
|
ออกแบบเว็บเพจโดยคำนึงถึงการเปลี่ยนแปลงขนาดของบราวเซอร์ |
| |
การออกแบบเว็บเพจให้มีการเปลี่ยนแปลงขนาดได้ (Flexible
Design)
การออกแบบเว็บเพจให้มีขนาดคงที่ (Fixed Design)
เว็บเพจแบบร่วม ระหว่างแบบขนาดคงที่ กับแบบขนาด เปลี่ยนแปลงได้ |
ทดสอบการแสดงผลในบราวเซอร์รุ่นต่างๆ
ความเร็วในการรับส่งข้อมูล (Connection speed)
โปรแกรมเสริมสำหรับบราวเซอร์ (Browser Plug-ins)
|
|
บทที่ 8 เลือกใช้สีสำหรับเว็บไซท์
(Designing Web Colors) |
| |
ประโยชน์ของสีในเว็บไซท์
ความรู้เบื้องต้นเกี่ยวกับสี |
| |
การผสมสี (Color Mixing)
วงล้อสี (Color Wheel)
สีที่เป็นกลาง (Neutral Colors)
ความกลมกลืนของสี (Color Harmony)
รูปแบบชุดสีพื้นฐาน (Simple Color Schemes)
ผลทางจิตวิทยาที่มีต่อสี (Color Psychology)
สีกับอาคมณ์ ความรู้สึก และความสัมพันธ์กับสิ่งต่างๆ
ข้อคิดการใช้สีในเว็บไซท์ |
ระบบสีในเว็บไซท์
ระบบสีในจอมอนิเตอร์ |
| |
บิตเด็ป (Bit Depth) ของหน้าจอมอนิเตอร์
ค่าแกมม่า (Gamma) ของหน้าจอมอนิเตอร์
ระบบสี RGB
พิกเซลและสี |
ระบบสีของบราวเซอร์
ระบบสีในไฟล์ HTML
ออกแบบโดยใช้ชุดสีสำหรับเว็บ |
| |
ชุดสีสำหรับเว็บ ( Web Palette)
สีกับโปรแกรมช่วยสร้างเว็บ
|
|
บทที่ 9 ออกแบบกราฟิกสำหรับเว็บไซท์
(Designing Web Graphics) |
| |
รูปแบบกราฟิกสำหรับเว็บ (GIF, JPEG, และ PNG)
ระบบการวัดขนาดของรูปภาพ
ระบบการวัดความละเอียดของรูปภาพ
ความละเอียดของรูปภาพ
ปัญหาเกี่ยวกับขนาดไฟล์ของกราฟิก
ลดขนาดไฟล์กราฟิกสำหรับเว็บ (Optimizing Web Graphics)
โปรแกรมกราฟิกสำหรับเว็บ
กราฟิกรูปแบบ GIF |
| |
GIF87a และ GIF89a
ระบบสีแบบอินเด็กซ์ 8 บิต (Eight-Bit Indexed Color)
ระบบการบีบอัดข้อมูลของ GIF (GIF Compression)
เมื่อไหร่ถึงจะใช้ GIF
คุณสมบัติ Interlacing (Interlaced GIF)
ลักษณะโปร่งใส (Transparent GIF)
วิธีป้องกันการเกิดขอบของสีที่ไม่พึงประสงค์ (Halo หรือ Fringe)
คุณสมบัติการเคลื่อนไหว (Animated GIF)
การลดขนาดไฟล์ GIF
ชุดสีสำหรับกราฟิก (Color Palette) |
| กราฟิกรูปแบบ JPEG |
| |
ระบบสีขนาด 24 บิต
ระบบการบีบอัดข้อมูลของ JPEG
การขยายข้อมูลของ JPEG
การสูญเสียคุณภาพ
เมื่อไหร่ถึงจะใช้ JPEG
Progressive JPEG (Pro JPEG/ P-JPEG)
การสร้างกราฟิกในรูปแบบ JPEG
การลดขนาดไฟล์ JPEG |
คำแนะนำในกระบวนการออกแบบกราฟิกสำหรับเว็บ
| |
ออกแบบกราฟิกโดยใช้ชุดสีสำหรับเว็บ (Web Palette หรือ
Web-Sefe Color) |
| |
ทำงานในระบบสีแบบ RGB |
| |
ใช้ตัวอักษรแบบ anti-aliased |
| |
เลือกใช้รูปแบบกราฟิกให้เหมาะสม |
คำสั่งเกี่ยวกับรูปภาพในภาษา HTML
สร้างลิงค์ให้กับกราฟิกด้วย Image Map
ตัดแบ่งกราฟิกออกเป็นส่วนย่อย (Slices)
|
|
บทที่ 10 จัดรูปแบบตัวอักษรสำหรับเว็บไซท์
(Typography for the Web) |
| |
ส่วนประกอบของตัวอักษร
ระบบการวัดขนาดตัวอักษร
รูปแบบตัวอักษร
ชนิดและตระกูลของตัวอักษร
ตัวอักษรประเภท Serif และ Sans serif
รูปแบบที่หลากหลายของตัวอักษร
ความสะดวกในการอ่าน (Legibility)
จัดข้อความในหน้าเว็บ
ความแตกต่างระหว่างหน้ากระดาษและหน้าเว็บ
การจัดตำแหน่ง (Alignment)
ช่องว่างระหว่างตัวอักษร (Tracking) และช่องว่างระหว่างคำ
ระยะห่างระหว่างบรรทัด (Leading)
ความยาวของบรรทัด
ความยาวของหน้าเว็บ
ขนาดของตัวอักษร
การเน้นข้อความให้เด่นชัด
การสร้างความสมดุลในหน้าเว็บ
การใช้สีกับตัวอักษร
การกำหนดขอบแบบ Aliasing และ Anti-aliasing
เบื้องหลังการปรับปรุงคุณภาพของตัวอักษรขนาดเล็ก ที่มีความละเอียดต่ำ
|
|
บทที่ 11 ปัญหาการใช้ตัวอักษรในเว็บเพจ
(และแนวทางแก้ไข) |
| |
การแก้ปัญหาเรื่องตัวอักษร
| |
เลือกชนิดตัวอักษรมาตรฐาน (Browser-Safe Font)
ระบุชนิดตัวอักษรให้ครอบคลุม
กำหนดลักษณะของตัวอักษรที่อยู่ในทุกช่องของตาราง
เลือกใช้ตัวอักษรหลักสำหรับเว็บจากไมโครซอฟท์
ใช้ตัวอักษรที่เป็นกราฟิกแทน |
ขนาดตัวอักษร
ระบุขนาดตัวอักษร
Cascading Style Sheets (CSS)
Embedded Font Technology
ตัวอักษรภาษาไทย
การเลือกใช้รหัสอักษรเพื่อการแสดงผลภาษาไทยบนหน้าเว็บ อย่างถูกต้อง
รหัสมาตรฐานสำหรับอักษรภาษาไทย TIS 620
รายละเอียดการสนับสนุนภาษาไทยของบราวเซอร์
การติดตั้งรหัสอักษร charset ในโปรแกรมสร้างเว็บ |
