Lecture

บทที่8 

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

 Designing Web Colors

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

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

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

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

ประโยชน์ของสีในเว็ปไซต์

ใช้สีโทนน้ำตาล แต่นำสีฟ้ามาเป็นสีที่ดึงความน่าสนใจ

ใช้สีในการแบ่งแยกบริเวณต่างๆออกจากกัน

ใช้สีที่เป็นสัญลักษณ์มาเป็นสีหลักของเว็ปต์

สีกับอารมณ์ ความรู้สึกต่างๆ

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

บทที่ 9

ออกแบบกราฟฟิกสำหรับเว็ปไซต์

Designing Web Graphics

รายละเอียดของกราฟฟิกรูปแบบหลัก 2 ประเภทคือ GIF และ JPF

• คุณสมบัติสำคัญ

• วิธีบีบอัดข้อมูล

• การนำไปใช้

• การลดขนาด

• แนะนำโปรแกรมที่ใช้ในการสร้างและออกแบบ

แนะให้รู้ถึงลักษณะเด่นของกราฟฟิก PNG ด้วย

รูปแบบกราฟฟิกสำหรับเว็บ ( GIF, JPG ,PNG )

GIF ย่อมาจาก Graphic Interchange Format 

• ได้รับความนิยมในยุคแรก

• มีระบบสีแบบ Index ซึ่งมีข้อมูลสีขนาด 8 บิต ทำให้มีสีมากที่สุด 256 สี

• มีการบีบอัดข้อมูลตามแนวของพิกเซล เหมาะสำหรับกราฟฟิกที่ประกอบด้วยสีพื้น

JPG ย่อมาจาก Joint Photographic Experts Group

• มีข้อมูลสีขนาด 24 บิต (True Color) สามารถแสดงสีได้ถึง 16.7 ล้านสี

• ใช้ระบบการบีบอัดที่มีลักษณะที่สูญเสีย (lossy)

• ไฟล์ประเภทนี้ควรนำไปใช้กับรูปถ่ายหรือกราฟฟิกที่มีการไล่ระดับสีอย่างละเอียด

PNG ย่อมาจาก Portable Network Graphic

• สามารถสนับสนุนระบบสีได้ทั้ง 8 บิต 16 บิต 24 บิต

• มีระบบการบีบอัดแบบ Deflate ที่ไม่ทำให้เกิดความสูญเสีย (lossless)

• มีระบบการคุมค่าแกมม่า (Gamma) และความโปร่งใส (Transparency) ในตัวเอง

ระบบการวัดขนาดรูปภาพ


          รูปภาพที่ใช้หน่วยวัดขนาดตามหน้าจอมอนิเตอร์ คือ หน่วยพิกเซล(Pixel) ซึ่งมีประโยชน์ในการเปรียบเทียบขนาดของกราฟฟิกกับองค์ประกอบอื่นๆในหน้าเว็บ รวมถึงขนาดของหน้าต่างบราวเซอร์ด้วย

ระบบการวัดความละเอียดของรูปภาพ


          ระบบความละเอียดของรูปภาพที่แสดงผลบนจอมอนิเตอร์ควรใช้หน่วย Pixel per inch(ppi) แต่ในทางการใช้งานจะนำหน่วย dot per inch(dpi) ซึ่งเป็นหน่วยวัดความละเอียดของสิ่งพิมพ์มาใช้แทนโดยความละเอียดของรูปภาพที่ใช้ควรมีความละเอียดแค่ 72 ppi ก้อเพียงพอแล้ว

คำแนะนำในการออกแบบกราฟฟิกสำหรับเว็ป

• ออกแบบกราฟฟิกโดยใช้ชุดสีสำหรับเว็ป (Web Palette)

• เลือกใช้แบบกราฟฟิกที่เหมาะสม GIF หรือ JPEG

• ตัดแบ่งกราฟฟิกออกเป็นส่วนย่อย (Slices)

บทที่ 10  

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

(Typography on the Web)

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

ตัวอักษรมีความสำคัญในการสื่อข้อความถึงผู้ใช้

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

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

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

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

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

X-height :              ความสูงของตัวอักษร x ในแบบพิมพ์เล็ก ซึ่งมักใช้อ้างถึงความสูงของตัวอักษรที่ไม่ 

                                 รวม ascender  และ descender  

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

ค่าความสูง x-height : จะมีผลต่อภาพรวมของตัวอักษรและความยากง่ายในการอ่าน

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

•  หลีกเลี่ยงการใช้คำที่เป็นตัวพิมพ์ใหญ่ทั้งหมด เพราะจะทำให้อ่านยาก และลดความสะดุดตาลง

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

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

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

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

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

• ใช้ CSS ในการควบคุมรูปแบบการแสดงผล