Lecture

บทที่ 7 การออกแบบเว็บไซต์ให้เหมาะกับสภาพแวดล้อม

ปัจจัยหลักที่เกี่ยวข้องกับการท่องเว็บไซต์

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. จำนวนสีที่จอของผู้ใช้สามารถแสดงได้

- มอนิเตอร์สามารถแสดงสีที่แตกต่างกัน นอยู่กับประสิทธิภาพของการ์ดจอ

- หน่วยความจำในการ์ดจอที่มากขึ้นจะทำให้สามารถแสดงสีได้มากขึ้น

- จำนวนสีที่การ์ดจอสามารถแสดงได้ ขึ้นอยู่กับค่าความละเอียดของสีที่เรียกว่า bit depth หรือ color depth

ชุดสีสำหรับเว็บ หมายถึงชุดสีจำนวน 216 สีที่มีอยู่เหมือนกันในระบบปฏิบัติการ Windows และ Mac

5. ชนิดของตัวอักษรที่มีอยู่ในเครื่องของผู้ใช้

เบราเซอร์จะแสดงฟอนต์ที่กำหนดไว้ในเว็บเพจได้ก้ต่อเมื่อคอมพิวเตอร์เครื่องนั้นมีฟอนต์เหล่านั้นติดตั้งอยู่ในเครื่อง

     MS Sans Serif  VS Microsoft Sans Serif

-MS Sans Serif เป็นฟอนต์แบบบิตแมพที่ออกแบบขึ้นจากจุดของพิกเซล โดยมีการออกแบบแต่ละตัวอักษรไว้เป็นขนาดที่แน่นอน

-  Microsoft Sans Serif เป็นฟอนต์ที่มีโครงสร้างของอักขระแบบเวคเตอร์หรือลายเส้นโดยมีการออกแบบเอาท์ไลน์ไว้เพียงแบบเดีแต่สามารถปรับขนาดได้อย่างไม่จำกัด

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

สีสันในเว็บเพจเป็นสิ่งที่สำคัญมากในการดึงดูดความสนใจของผู้ใช้ เนื่อง

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

ประโยชน์ของสีในเว็บไซต์ 
•  สามารถชักนำสายตาผู้อ่านให้ไปยังทุกบริเวณในเว็บเพจ
•  สีช่วยเชื่อมโยงบริเวณที่ได้รับการออกแบบเข้าด้วยกัน
•  สีสามารถนำไปใช้ในการแบ่งบริเวณต่างๆออกจากกัน
•  สีสามารถใช้ในการดึงดูดความสนใจของผู้อ่าน
• สีสามารถสร้างอารมณ์โดยรวมของเว็บเพจ
•  ช่วยสร้างระเบียบให้กับข้อความต่างๆ เช่น ใช้สีแยกระหว่างหัวเรื่องกับเนื้อหา
•  สามารถส่งเสริมเอกลักษณ์ขององค์กรหรือหน่วยงานนั้นๆ
การผสมสี มี 2 แบบ คือ 
         1. การผสมสีแบบบวก(Addittive mixing)
จะเป็นรูปแบบการผสมของแสง ไม่ใช่การผสมของวัตถุที่มีสีบนกระดาษ
การนำไปใช้ จะนำๆผใช้ในสื่อต่างๆ ที่ใช้แสงส่องออกมาเช่นโปรเจ๊กเตอร์
ทีวี และจอมอนิเตอร์
          2. การผสมสีแบบลบ (Subtractive mixing)
การผสมสีแบบนี้ไม่เกี่ยวข้องกับแสง แต่เกี่ยวเน่องกับการดูดกลืนและ
สะท้อนแสงของวัตถุต่างๆ การนำไปใช้ จะนำไปใช้ในสื่อที่เกี่ยวข้องกับ
การใช้วัตถุมีสี เช่นภาพวาดของศิลปิน รูปปั้นและสิ่งพิมพ์ต่างๆ
  
สีอ่อน  สีเข้ม และโทนสี (Tint,Shade and Tone)
         ** ในการผสมสีกลางเข้ากับสีบริสุทธิ์ จะเกิดเป็นสีต่างๆจำนวนมากมาย
              - สีบริสุทธิ์ผสมกับสีขาว จะได้เป็นสีอ่อน
              - สีบริสุทธิ์ผสมกับสีเทา จะได้เป็นโทนสีระดับต่างๆ
              - สีบริสุทธิ์ผสมกับสีดำ จะได้เป็นสีเข้ม
         ** สีอ่อน สีเข้มและโทนสีมีประโยชน์อย่างมากในการจัดชุดของสี
เพราะทำให้สีสีหนึ่งสามารถแสดงออกและให้ความรู้สึกได้หลายแบบยิ่งขึ้น
  
ความกลมกลืนของสี (Color Harmony) 
        ** ความเป็นระเบียบของสี ที่ทำให้ผู้ชมรู้สึกถึงสมดุลและความสวยงาม
ในเวลาเดียวกัน การใช้สีที่จืดชืดเกินไป จะทำให้เกิดความรู้สึกที่น่าเบื่อและ
ไม่สามารถดึงดูดความสนใจจากผู้ชมได้ การใช้สีที่มากเกินไป ก็จะดูวุ่นวาย
ขาดระเบียบและอาจสร้างความสับสนให้กับผู้ชม         ** เป้าหมายในเรื่องสี คือการนำเสนอเว็บไซต์โดยใช้ชุดสีในรูปแบบที่
เข้าใจได้ง่าย น่าสนใจ และสื่อความหมายได้อย่างเหมาะสม

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

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

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

รูปแบบตัวอักษร แบ่งเป็น 2 ประเภทใหญ่ๆ

1. ตัวอักษรที่มีขนาดสัมพันธ์กับรูปร่าง หรือตัวอักษรที่มีขนาดไม่คงที่

- ตัวอักษรแต่ละตัวมีพื้นที่ตามแนวนอนไม่เท่ากัน ขึ้นกับรูปร่างของตัวอักษรนั้น

 - สิ่งพิมพ์ที่ผลิตด้วยคอมพิวเตอร์ส่วนใหญ่จะใช้ตัวอักษรนี้เพื่อให้ดูเหมาะสมและอ่านง่าย

2. ตัวอักษรที่มีขนาดคงที่

- มีพื้นที่ตามแนวนอนเท่ากันหมด เป็นรูปแบบที่เรียบง่าย คล้ายตัวพิมพ์ดีด

ตัวอักษรประเภท serif และ sans-serif

ตัวอักษรประเภท serif  

- มีลายเส้นเพิ่มขึ้นที่ส่วนปลาย  

- เช่น Times New Roman , Garamond, Georgia เป็นต้น  

- เหมาะจะใช้ในส่วนที่เป็นรายละเอียดเนื้อหา ไม่เหมาะกับการใช้เป็นตัวหนา

ตัวอักษรประเภท sans-serif

- ไม่มีลายเส้นตกแต่งติดอยู่กับตัวอักษร

- เช่น Arial, Verdana, Geneva

- เหมาะที่จะใช้กับหัวข้อหรือตัวอักษรขนาดใหญ่

 - ไม่เหมาะกับลักษณะเอียงเพราะจะทำให้รูปร่างเปลี่ยนไปมาก

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

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

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

- ใช้ตัวพิมพ์ใหญ่สำหรับตัวอักษรแรกของแต่ละคำในประโยค ควรใช้อย่างจำกัด

- สิ่งที่ไม่ควรทำคือการแบ่งครึ่งตัวอักษร เพราะจะทำให้ภาพรวมของตัวอักษรขาดหายไป และ ยากต่อการอ่าน

 การจัดข้อความในหน้าเว็บ

การจัดตำแหน่ง -

 ในภาษา HTML สามารถจัดตำแหน่งตัวอักษรได้ด้วยคำสั่ง Align และสามารถเลือกค่าเป็น left, right, center, justify ช่วงว่างระหว่างตัวอักษร และช่วงว่างระหว่างคำ

 - ตัวอักษรบางคู่ที่อยู่ติดกันอาจมีระยะที่ไม่เหมาะสม จึงต้องมีการ Kerning เพื่อที่สายตาจะได้

- การจัดตำแหน่งแบบ justify ทำให้เกิดช่องว่างที่ไม่สวยงามได้ ระยะห่างระหว่างบรรทัด

- เนื้อหาที่มีปริมาณมาก ควรมีระยะห่างระหว่างบรรทัดมาก เพื่อเพิ่มความสะดวกในการอ่านเป็น เวลานาน

ความยาวหน้าเว็บ

 - หน้าเว็บที่ยาวมากๆ จะทำให้ผู้ชมรู้สึกเหนื่อยล้าที่จะอ่าน

- ควรจัดแบ่งเป็น paragraph หรือตัดแบ่งเป็นหลายๆหน้า

ขนาดของตัวอักษร

- ใช้ตัวอักษรหลายขนาดเพื่อสร้างลำดับความสำคัญของข้อมูล  

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

การเน้นข้อความให้เด่นชัด

- ใช้ขนาดและน้ำหนักของตัวอักษร การทำตัวเอียง ขีดเส้นใต้ ตำแหน่งของตัวอักษร แนวทาง ของตัวอักษร พื้นที่ว่าง

การใช้สีกับตัวอักษร

- กำหนดสีหลักสำหรับเว็บ

- ใช้สีของตัวอักษรอย่างมีความหมายสม่ำเสมอ

- ใช้สีที่แตกต่างกันในแต่ละส่วนของข้อมูล

- กำหนดสีของ link ให้เหมาะสม

การกำหนดขอบแบบ Aliased และ Anti-aliased

- Aliased คือลักษณะขอบที่เป็นรอยหยักๆ

- Anti-aliased ใช้เทคนิคของโทนสีเข้ามาช่วย ด้วยการเพิ่มสีที่อยู่ระหว่างสีของตัวอักษรจะทำให้ ขอบดูเรียบขึ้น

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

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