ดาวน์โหลดงานนำเสนอ
งานนำเสนอกำลังจะดาวน์โหลด โปรดรอ
1
การออกแบบและพัฒนาเว็บไซต์
สำหรับการบริการสารสนเทศ WEBPAGE DESIGN AND DEVELOPMENT FOR INFORMATION SERVICES
2
Review Internet vs Web site
3
Internet - ความหมาย - ISP - สถาปัตยกรรม Client-Server
Review Internet - ความหมาย - ISP - สถาปัตยกรรม Client-Server
4
Web site - Web browser - URL - Hypertext transfer protocol - Domain name - IP address
Review
5
Web site (cont.) - Web site - Web page - Home page
Review
6
Hypertext Markup Language (HTML) - ลักษณะเด่น คือ <คำสั่ง> เรียกว่า tag ตัวอย่าง เช่น <strong> อักษรตัวหนา </strong> <p align=“left”> ประโยคข้อความ </p> Review attribute tag
7
Review โครงสร้างพื้นฐาน <html> <head> <title> Web title </title> </head> <body> Web content </body> </html>
8
Review การแสดงผล <html> <head> <title> Web title </title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> <strong>Hello World</strong> </body> </html>
9
Review การแสดงผล <html> <head> <title> Web title </title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> <strong>Hello World</strong> </body> </html>
10
Review การแสดงผล <html> <head> <title> Web title </title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> <strong>Hello World</strong> </body> </html>
11
Review การแสดงผล <html> <head> <title> Web title </title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> <strong>Hello World</strong> </body> </html>
12
องค์ประกอบพื้นฐานของการออกแบบเว็บไซต์
1. ความเรียบง่าย (Simplicity) - มีรูปแบบที่เรียบง่าย ไม่ซับซ้อนและใช้งานได้อย่างสะดวก สื่อสารเนื้อหาถึงผู้ใช้โดยมีเฉพาะองค์ประกอบ เสริมที่จำเป็นเท่านั้น
13
Chaos design
14
Chaos design
15
Chaos design
16
Bad design
17
Simplicity design
18
Simplicity design
19
Simplicity design
20
องค์ประกอบพื้นฐานของการออกแบบเว็บไซต์
2. ความสม่ำเสมอ (Consistency) - สร้างความสม่ำเสมอให้กับเว็บไซต์โดยใช้รูปแบบเดียวกันตลอดทั้งเว็บไซต์ ทั้งในส่วนของรูปแบบหน้า สไตล์ของกราฟิก ระบบเนวิเกชัน และโทนสี * หากลักษณะของเว็บเพจแต่ละหน้าในเว็บไซต์เดียวกัน มีความแตกต่างกัน อาจทำให้ผู้ใช้เกิดความสับสนได้
21
องค์ประกอบพื้นฐานของการออกแบบเว็บไซต์
3. ความเป็นเอกลักษณ์ (Identity) การออกแบบต้องคำนึงถึงลักษณะขององค์กร รูปแบบของเว็บไซต์สามารถสะท้อนถึงเอกลักษณ์ขององค์กร
22
Bad Identity
23
Bad Identity
24
Good Identity
25
Good Identity
26
องค์ประกอบพื้นฐานของการออกแบบเว็บไซต์
4. เนื้อหาที่มีประโยชน์ (Useful Content) ควรจัดเตรียมเนื้อหาและข้อมูลที่ผู้ใช้ต้องการให้ถูกต้องและสมบูรณ์ ควรมีการปรับปรุงและเพิ่มเติมให้ทันต่อเหตุการณ์อยู่เสมอ
27
องค์ประกอบพื้นฐานของการออกแบบเว็บไซต์
5.ระบบเนวิเกชันที่ใช้งานง่าย (User-Friendly Naviagtion) - ระบบเนวิเกชันจะต้องออกแบบให้ผู้ใช้เข้าใจง่ายและใช้งานสะดวก โดยใช้กราฟิกที่สื่อความหมายร่วมกับคำอธิบายอย่างชัดเจน มีรูปแบบและลำดับของรายการอย่างสม่ำเสมอ
28
โครงสร้างเว็บเพจ (Web Page Structure)
29
Bad Navigation
30
Bad Navigation
31
Good Navigation
32
Good Navigation
33
องค์ประกอบพื้นฐานของการออกแบบเว็บไซต์
6. มีลักษณะที่น่าสนใจ (Visual Appeal) ความน่าสนใจของเว็บไซต์จะมีความสัมพันธ์กับคุณภาพขององค์ประกอบต่าง ๆ เช่น คุณภาพของกราฟิก การใช้ชนิดตัวอักษร การใช้โทนสี เป็นต้น
34
องค์ประกอบพื้นฐานของการออกแบบเว็บไซต์
7. การใช้งานอย่างไม่จำกัด (Compatibility) ควรออกแบบเว็บไซต์ให้ครอบคลุมกับผู้ใช้ส่วนใหญ่มากที่สุด ไม่ควรมีการติดตั้งโปรแกรมเพิ่มเติม หรือเลือกใช้เบราเซอร์ชนิดใดชนิดหนึ่ง สามารถแสดงผลได้ทุกระบบปฏิบัติการและที่ความละเอียดหน้าจอต่าง ๆ กันได้อย่างไม่มีปัญหา
41
Web safe area for Screen Resolution 1024 x 768
42
Other Screen Resolution
Web safe area for Other Screen Resolution Or searching with keyword : “web safe area”
43
องค์ประกอบพื้นฐานของการออกแบบเว็บไซต์
8. ระบบการใช้งานที่ถูกต้อง (Functional Stability) ระบบการทำงานต่าง ๆ ในเว็บไซต์จะต้องมีความแน่นอนและทำหน้าที่ได้อย่างถูกต้อง เช่น การกรอกข้อมูล การเชื่อมโยง เป็นต้น ควรมีการตรวจสอบการทำงานอยู่เสมอ
44
9. คุณภาพในการออกแบบ (Design Stability) ควรมีมาตรฐานการออกแบบและการจัดระบบข้อมูลให้มีลักษณะเป็นไปในทิศทางเดียวกันทั้งเว็บไซต์ องค์ประกอบพื้นฐานของการออกแบบเว็บไซต์
45
Web Gallery http://www. dbcut. com http://www. rookienet
46
Web design and Development Resources www.smashingmagazine.com
47
ตัวอักษรบนเว็บ Typography on the Web
48
รูปแบบการใช้งาน heading content list
49
ควรเลือกใช้รูปแบบตัวอักษร(font)ที่เครื่องคอมพิวเตอร์ทุกเครื่องมีการใช้งาน
Web Safe font
งานนำเสนอที่คล้ายกัน
