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

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

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

Review

Review

Review

Review

Review

Review

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

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

Review Web Safe font

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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