Lecture

บทที่7 การออกแบบเว็บไซต์ให้เหมาะสมกับสิ่งแวดล้อม
( Design for a variety of Web Environments )

ปัจจัยหลักที่เกี่ยวข้องกับการท่องเว็บไซต์
1. เบราเซอร์ที่ใช้
2. ระบบปฏิบัติการของคอมพิวเตอร์
3. ความละเอียดของหน้าจอ
4. จำนวนสีที่จอของผู้ใช้สามารถแสดงได้
5. ชนิดของตัวอักษรที่มีอยู่ในเครื่องของผู้ใช้
6. ความเร็วในการเชื่อมต่ออินเตอร์เน็ต
7. ขนาดหน้าต่างเบราเซอร์
8. ความสว่างและค่าความต่างของโทนสี
1.เบราเซอร์ที่ใช้เบราเซอร์ที่ได้รับความนิยม Internet Explorer,Netscape Navigator,
The World,Opera,Mozilla,Firefox
การออกแบบเว็บไซต์ตามคุณสมบัติของเบราเซอร์
- เว็บไซต์สำหรับเบราเซอร์ทุกรุ่น
- เว็บไซต์สำหรับเบราเซอร์รุ่นล่าสุด
- เว็บไซต์ตามความสามารถของเบราเซอร์
- เว็บไซต์ที่มีหลายรูปแบบ
2. ระบบปฏิบัติการระบบปฏิบัติการเป็นปัจจัยที่มีผลต่อการทำงานของเบราเซอร์มาก
โดยแต่ละระบบปฏิบัติการจะมีความแตกต่างกันในเรื่องของชนิด และรุ่นของเบราเซอร์
ที่ใช้ ระดับความระเอียดของหน้าจอ เป็นต้น
3. ความละเอียดของหน้าจอ
ความละเอียด 640*480 หมายถึง หน้าจอมีจุดพิกเซลเรียงตัวตามแนวนอน
640 พิกเซล และตามแนวตั้ง 480 พิกเซล ความละเอียดหน้าจอจะไม่ขึ้นอยู่
กับขนาดของมอนิเตอร์ที่ใช้ แต่จะขึ้นอยู่กับประสิทธิภาพของการ์ด
4. จำนวนสีที่จอของผู้ใช้สามารถแสดงได้- มอนิเตอร์สามารถแสดงสีที่แตกต่างกัน
อยู่กับประสิทธิภาพของการ์ดจอ
- หน่วยความจำในการ์ดจอที่มากขึ้นจะทำให้สามารถแสดงสีได้มากขึ้น
5. ชนิดของตัวอักษรที่มีอยู่ในเครื่องของผู้ใช้
เบราเซอร์จะแสดงฟอนต์ที่กำหนดไว้ในเว็บเพจได้ก้ต่อเมื่อคอมพิวเตอร์เครื่องนั้นมี
ฟอนต์เหล่านั้นติดตั้งอยู่ในเครื่อง MS Sans Serif VS Microsoft Sans Serif
-MS Sans Serif เป็นฟอนต์แบบบิตแมพที่ออกแบบขึ้นจากจุดของพิกเซล โดยมี
การออกแบบแต่ละตัวอักษรไว้เป็นขนาดที่แน่นอน
- Microsoft Sans Serif เป็นฟอนต์ที่มีโครงสร้างของอักขระแบบเวคเตอร์หรือลายเส้น
โดยมีการออกแบบเอาท์ไลน์ไว้เพียงแบบเดีแต่สามารถปรับขนาดได้อย่างไม่จำกัด
ข้อดี
สามารถกำหนดลักษณะของตัวอักษรได้อย่างแน่นอน ทั้งขนาด สี และชนิด
ผู้ชมทุกคนจะมองเห็นเหมือนกันหมด
ข้อเสีย
ใช้เวลาในการโหลดมากกว่า
ลำบากในการแก้ไขและเปลี่ยนแปลง
6. ความเร็วในการเชื่อมต่ออินเตอร์เน็ต
ความเร็วของเน็ตจะมีผลต่อการแสดงผลของเว็บ ซึ่งจะมีหลายระดับ
- ผู้ใช้ตามบ้านส่วนใหญ่จะใช้ความเร็ว 5 kbps
- ในหน่วยงานบางแห่งอาจจะใช้อินเตอร์เน็ตความเร็วสูง เข่น ADSL,
Cable modem ซึ่งมีความเร็วตั้งแต่ 128 Kbps ถึง 10 Mbps
7. ขนาดหน้าต่างเบราเซอร์
ขนาดหน้าต่างของเบราเซอร์มีโอกาสที่จะถูกปรับเปลี่ยนเป็นเท่าไหร่ก็ได้ตามความต้องการของผู้ใช้

บทที่8 เลือกใช้สีสำหรับเว็บไซต์

( Designing Web Colors )

เลือกใช้สีสำหรับเว็บไซต์
-สีสันในเว็บเพจเป็นสิ่งที่สำคัญมากในการดึงดูดความสนใจของผูใช้ เนื่องจาก
สิ่งแรกที่ผู้ใช้มองเห็นจากเว็บก็คือสี ซึ่งเป็นสิ่งกำหนดบรรยากาศและความรู้สึก
โดยของเว็บไซต์

-เราสามารถใช้สีได้กับทุกองค์ประกอบของเว็บเพจ ตั้งแต่ รูปภาพ ตัวอักษร
สีพื้นหลังการใช้สีที่เหมาะสมจะช่วยในการสื่อความหมายของเนื้อหา

การใช้สีพื้นใกล้เคียงกับสีตัวอักษร บางครั้งอาจสร้างความลำบากในการอ่าน

การใช้สีที่มากเกินความจำเป็นอาจสร้างความสับสนให้กับผู้อ่านได้

การใช้สีที่กลมกลืนกันช่วยให้เว็บไซต์น่าดูชมมากยิ่งขึ้น

การผสมสี มี2แบบ
-การผสมสีแบบบวก (Additive mixing) จะเป็นรูปแบบการผสมของแสง
ไม่ใช่การผสมของวัตถุที่มีสีบนกระดาษ

-การผสมสีแบบลบ (Subtractive mixing) การผสมสีแบบนี้ไม่เกี่ยวข้องกับแสงแต่
เกี่ยวเนื่องกับการดูดกลืนและสะท้อนแสงองวัตถุต่างๆ

ประโยชน์ของสีในเว็บ
-สามารถชักนำสายตาผู้อ่านให้ไปยังทุกบริเวณในหน้าเว็บเพจที่เราต้องการได้
เช่น ข้อมูลใหม่หรือโปรแกรมพิเศษ
-สีช่วยเชื่อมโยงบริเวณที่ได้รับการออกแบบเข้าด้วยกัน
-สีสามารถนำไปใช้ในการแบ่งบบริเวณต่างๆออกจากกัน
-สีสามารถใช่ในการดึงดูดความสนใจของผู้อ่าน
-สีสามารถสร้างอารมณ์โดยรวมของเว็บเพจ
-ช่วยสร้างระเบียบให้กับข้อความต่างๆ เช่น ใช้สีแยกระหว่างหัวเรื่องกับเนื้อเรื่อง
-สามารถส่งเสริมเอกลักษณ์ขององค์กรหรือหน่วยงานนั้นๆ

วงล้อสี (Color Wheel)

เป็นรูปแบบหนึ่งในการจัดเรียงสีทั้งหมดไว้ในวงกลม และเป็นการจัด
ลำดับเฉดสีอย่างมีเหตุผลและง่ายต่อการนำไปใช้

สีกับอารมณ์ ความรู้สึก เเละความสัมพันธ์กับสิ่งต่างๆ
สีเเดง เเสดงถึง พลัง อำนาจความโมโห ความก้าวร้าว
สีน้ำเงิน เเสดงถึง ความซื่อสัตย์ ความมั่นคง ปลอดภัย
สีเขียว เเสดงถึง ธรรมชาต สุขภาพ ความยินดี
สีเหลือง เเสดงถึง ความสดใส ร่าเริง การมองโลกในเเง่ดี ความหวัง ความอบอุ่น

สีม่วง แสดงถึง ความสูงส่ง ความสร้างสรรค์ ความรอบรู้ ความแปลกใหม่
สีส้ม เเสดงถึง กำลังความสามารถ ความเข้มเเข็ง กระตือรือร้น

สีน้าตาล เเสดงถึง ความเรียบง่าย ความสะดวกสบาย ความมั่นคง เชื่อถือได้
สีเทา แสดงถึง ความสุภาพ ความเป็นไปได้ ความมั่นคง

สีขาว เเสดงถึง ความบริสุทธฺ์ ความไร้เดียงสา ความรัก ความฉลาด
สีดำ แสดงถึง อำนาจ ความฉลาด ความเป็นเลิศ ความสุขม รอบคอบ

บทที่ 10 การจัดรูปแบบตัวอักษรสำหรับเว็บไซต์

ส่วนประกอบของตัวอักษร

ในแต่ละตัวอักษรประกอบด้วยส่วนต่าง ๆ ที่เราน่าจะรู้จักไว้ เพื่อที่จะใช้

ประโยชน์เมื่อต้องการเปรียบเทียบลักษณะของตัวอักษณแต่ละชนิดได้

ส่วนประกอบหลัก ๆ ที่ควรรู้จัก มีดังนี้

• Ascender

ส่วนบนของตัวอักษรพิมพ์เล็ก ที่สูงกว่าความสูง x-height ของตัวอักษร

• Descender

ส่วนล่างของตัวอักษรพิมพ์เล็กที่ต่ำกว่าเส้น baseline ของตัวอักษร

• Baseline

เส้นสมมุติที่ตัวอักษรส่วนใหญ่ตั้งอยู่

• Cap height

ความสูงจากเส้น baseline ไปถึงส่วนบนสุดของตัวอักษรพิมพ์ใหญ่

• x-height

หมายถึง ความสูงของตัวอักษร x ในแบบพิมพ์เล็ก ซึ่งมักจะใช้อ้างถึง

ความสูงของตัวอักษรที่ไม่รวมส่วนบนและส่วนล่าง
• point size

ระยะความสูงทั้งหมดวัดจากส่วนบนสุดถึงส่วนล่างสุดของตัวอักษร

ช่องว่างระหว่างตัวอักษร (Tracking) และช่องว่างระหว่างคำ

ความรู้สึกของตัวอักษรอาจจะเป็นผลมาจากพื้อที่ว่างโดยรอบ ที่อยู่ระหว่างตัวอักษร

ระหว่างคำ หรือระหว่างบรรทัด คุณสามารถปรับระยะของช่องว่างเหล่านี้เพื่อให้อ่าน

ได้ง่ายขึ้น แม้ว่าตัวอักษรจะถูกออกแบบมาให้มีระยะห่างที่เหมาะสมอยู่แล้ว แต่ใน

บางสถานการณ์ อาจมีความต้องการให้ตัวอักษรดูแน่นหรือหลวมเป็นพิเศษอย่างเช่น

ตัวอักษีที่ใช้ ตัวพิมพ์ใหญ่ทั้งหมด (UPPERCASE) จะดูค่อนข้างแน่นเพราะถูกออก

แบบให้ใช้ร่วมกับตัวพิมพ์เล็กดังนั้นคุณควรเพิ่มช่องว่างระหว่างตัวอักษรให้มากขึ้น

เล็กน้อย สำหรับคำที่ใช้ตัวพิมพ์ใหญ่ทั้งหมด

ตัวอักษรบางคู่ที่อยู่ติดกันอาจมีระยะห่างไม่เหมาะสม จำเป็นต้องทำการปรับ

แต่งที่เรียกว่า Kerning เป็นการปรับระยะห่างระหว่างคู่ของตัวอักษร ซึ่งจะมีความ

สำคัญมากเมื่อใช้ตัวอักษรขนาดใหญ่หรือตัวอักษรที่ใช้เป็นหัวข้อหลัก เพราะเมื่อ

ตัวอักษรใหญ่ขึ้นก็จะเกิดช่องว่างที่มากขึ้นด้วย จุดประสงค์ของการทำ kerning คือ

การปรับระยะห่างของตัวอักษรให้เท่ากันโดยตลอด เพื่อที่สายตาจะได้เคลื่อนที่

อย่างราบเรียบและสม่ำเสมอ

ช่องว่างระหว่างคำสำหรับภาษาอังกฤษ หรือ ช่องว่างระหว่างคำในภาษาไทย

เป็นสิ่งที่ควรจะเท่ากันเสมอ ไม่ว่าจะเป็นการจัดตำแหน่งแบบ Justify ช่องว่างของ

แต่ละคำจะแตกต่างกันไปในแต่ละบรรทัด เพื่อช่วยให้ขอบซ้ายและขวาเท่ากัน

คุณอาจต้องใช้เครื่องหมายยัติภังค์ (-) มาช่วยแยกคำให้อยู่คนละบรรทัด หรือปรับ

เปลี่ยนการเว้รวรรคใหม่ เพื่อไม่ให้มีช่องว่างมากเกินไป

การจัดตำแหน่ง (Alignmen)

การจำตำแหน่งของตัวอักษรในแต่ละส่วนมีผลต่อความรู้สึกของเอกสาร โดยที่

การจัดตำแหน่งแต่ละแบบจะให้ความรู้สึกที่ต่างกัน ตัวอักษรที่ถูกจัดให้ชิดขอบ

ด้านซ้ายโดยที่ปล่อยให้ด้านขวามีลักษณะไม่สม่ำเสมอ จะให้ความรู้สึกไม่เป็น

ทางการ และจะอ่านได้ง่ายกว่าการจัดชิดขอบขวา โดยทั่วไปแล้วพยายามหลีก

เลี่ยงการจัดชิดขวา ยกเว้นเมื่อมีความเหมาะสมกับรูปแบบจริงๆ ส่วนตัวอักษรที่มี

การปรับระยะให้ชิดขอบทั้งซ้ายและขวา (Justify) เป็นที่นิยมใช้ในหนังสือพิมพ์

และจุลสาร พร้อมกับให้คามรู้สึกที่เป็นทางการอีกด้วย

ความสะดวกในการอ่าน (Legibility)

- หลีกเลี่ยงการใช้คำที่เป็นตัวพิมพ์ใหญ่ทั้งหมด เพราะจะทำให้อ่านยาก
และลดความสะดุดตาลง
- การใช้ตัวพิมพ์เล็กทั้งหมดในประโยค จะสร้างความรู้สึกไม่เป็นทางการ
และแสดงถึงความไม่สมบูรณ์ของเนื้อหา
- การใช้ตัวพิมพ์ใหญ่สำหรับตัวอักษรตัวแรกของแต่ละคำในประโยค ควรใช้อย่าง
จำกัดเพราะเป็นการรบกวนรูปแบบโดยรวมของคำ ส่งผลให้อ่านยากขึ้น
-ไม่ควรแบ่งครึ่งสีตัวอักษรเพราะทำให้ภาพรวมของตัวอักษรขาดหายไป

สิ่งที่ควรคำนึงในการจัดข้อความให้หน้าเว็บ

• การจัดตำแหน่ง (Alignment)
• ช่องว่างระหว่างตัวอักษร และช่องว่างระหว่างคำ
• การจัดตำแหน่งแบบ justify ทำให้เกิดช่องว่างของแต่ละคำ
• ระยะห่างระหว่างบรรทัด
• ความยาวของหน้าเว็บ
• ขนาดของตัวอักษร
• ดึงดูดความสนใจด้วยอักษรตัวใหญ่
• การเน้นข้อความให้เด่นชัด
• การใช้สีกับตัวอักษร
• การกำหนดขอบแบบ Aliased และ Anti-aliased

คำแนะนำในการใช้ตัวอักษรในหน้าเว็บ

• ไม่ควรใช้ตัวอักษรชนิดที่หายากหรือไม่ได้มาพร้อมกับโปรแกรม

ต่างๆหรือเครื่องคอมฯ

• ระบุชนิดตัวอักษรให้ครอบคลุม
• กำหนดลักษณะของตัวอักษรที่อยู่ในทุกช่องของตาราง
• ระบุขนาดของตัวษรเสมอ
• ใช้ CSS ในการควบคุมรูปแบบการแสดงผล