การออกแบบและพัฒนาเว็บไซต์

งานนำเสนอเรื่อง: "การออกแบบและพัฒนาเว็บไซต์"— ใบสำเนางานนำเสนอ:

1 การออกแบบและพัฒนาเว็บไซต์
สำหรับการบริการสารสนเทศ WEBPAGE DESIGN AND DEVELOPMENT FOR INFORMATION SERVICES

2 Review องค์ประกอบพื้นฐานของการออกแบบเว็บไซต์ 1. ความเรียบง่าย (Simplicity) 2. ความสม่ำเสมอ (Consistency) 3. ความเป็นเอกลักษณ์ (Identity) 4. เนื้อหาที่มีประโยชน์ (Useful Content) 5.ระบบเนวิเกชันที่ใช้งานง่าย (User-Friendly Naviagtion)

3 Review องค์ประกอบพื้นฐานของการออกแบบเว็บไซต์(ต่อ) 6. มีลักษณะที่น่าสนใจ (Visual Appeal) 7. การใช้งานอย่างไม่จำกัด (Compatibility)

4 Review

5 Review

6 Review

7 Review

8 Review

9 Review

10 Review องค์ประกอบพื้นฐานของการออกแบบเว็บไซต์(ต่อ) 8. ระบบการใช้งานที่ถูกต้อง (Functional Stability) 9. คุณภาพในการออกแบบ (Design Stability)

11 รูปแบบการใช้งานตัวอักษรบนเว็บเพจ
Review รูปแบบการใช้งานตัวอักษรบนเว็บเพจ heading content list

12 Review Web Safe font

13 การวางเลย์เอาท์(Layout) สำหรับเว็บเพจ

14 1. เครื่องมือ Table 2. เครื่องมือ Layout 3. เครื่องมือ Layer
เครื่องมือที่ใช้ 1. เครื่องมือ Table 2. เครื่องมือ Layout 3. เครื่องมือ Layer

15 โครงสร้างของเว็บเพจ Header Footer Content Navigator(Menu) Sidebar

16 โครงสร้างของตาราง

17 โครงสร้างของตาราง(ต่อ)

18 โครงสร้างของตาราง(ต่อ)

19 โครงสร้างของตาราง(ต่อ)

20 โครงสร้างของตาราง(ต่อ)
cellspacing คือ ระยะห่างระหว่างช่องเซลล์ cellpadding คือ ระยะห่างเนื้อหา(content)กับเซลล์

21 ขั้นตอนการใช้เครื่องมือ Table

22 ขั้นตอนการใช้เครื่องมือ Table 1
ขั้นตอนการใช้เครื่องมือ Table 1. วิเคราะห์จำนวนแถว (row)และคอลัมภ์(column)

23 ขั้นตอนการใช้เครื่องมือ Table 1
ขั้นตอนการใช้เครื่องมือ Table 1. วิเคราะห์จำนวนแถว (row)และคอลัมภ์(column)

24 ขั้นตอนการใช้เครื่องมือ Table
row = 4 column = 1

25 ขั้นตอนการใช้เครื่องมือ Table 2
ขั้นตอนการใช้เครื่องมือ Table 2. เลือกเครื่องมือ Table กำหนดจำนวนแถวในช่อง row และกำหนดจำนวนคอลัมภ์ในช่อง column

26 ขั้นตอนการใช้เครื่องมือ Table 3. ปรับขนาดของตารางและช่องเซลล์ให้เหมาะสม

27 ขั้นตอนการใช้เครื่องมือ Layout

28 ขั้นตอนการใช้เครื่องมือ Layout 1. เข้าสู่โหมด Layout

29 ขั้นตอนการใช้เครื่องมือ Layout 2. วาดกรอบนอก

30 ขั้นตอนการใช้เครื่องมือ Layout 2. วาดช่องเซลล์

31 ขั้นตอนการใช้เครื่องมือ Layout 2. วาดช่องเซลล์

32 ขั้นตอนการใช้เครื่องมือ Layout 2. วาดช่องเซลล์

33 ขั้นตอนการใช้เครื่องมือ Layout 2. วาดช่องเซลล์

34 ขั้นตอนการใช้เครื่องมือ Layout 3. กลับสู่โหมดมาตรฐาน

35 ขั้นตอนการใช้เครื่องมือ Layer

36 ขั้นตอนการใช้เครื่องมือ Layer 1. เลือกเครื่องมือ Layer

37 ขั้นตอนการใช้เครื่องมือ Layer 1. เลือกเครื่องมือ Layer

38 ขั้นตอนการใช้เครื่องมือ Layer 2. วาด Layer กรอบนอก

39 ขั้นตอนการใช้เครื่องมือ Layer 2
ขั้นตอนการใช้เครื่องมือ Layer 2. กด alt ค้างไว้ขณะวาด Layer ใหม่ เพื่อเป็นช่องเซลล์

40 ขั้นตอนการใช้เครื่องมือ Layer 3. วาดจนครบทุกช่อง