Lecture

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

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

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

                 1.สามารถชักนำสายตาผู้อ่านไปยังทุกบริเวณในหน้าเว็บเพจที่เราต้องการได้ เช่นข้อมูลใหม่

                    หรือโปรโมชั่นพิเศษ

                2. สามารถส่งเสริมเอกลักษณ์ขององค์กรหรือหน่วยงานนั้นๆ

                3. สีสามารถนำไปใช้ในการแบ่งบริเวณต่างๆ  ออกจากกัน 

- การผสมสี (Color Mixing)  มี 2 แบบ

                1. การผสมแบบบวก (Additive mixing)  จะเป็นรูปแบบการผสมของแสงสี  ไม่ใช่การผสม

                    ของวัตถุที่มีสีบนกระดาษ

               2. การผสมแบบลบ (Subtractive mixing)  การผสมสีแบบนี้ไม่เกี่ยวข้องกับแสง  แต่เกี่ยวเนื่อง

                   กับการดูดกลืนและสะท้อนแสงของวัตถุต่าง ๆ

-  วงล้อสี  (Color Wheel) 

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

               และง่ายต่อการนำไปใช้

          วงล้อสีแบบบวก

        

วงล้อแบบลบ

         สีกับอารมณ์ ความรู้สึก และความสัมพันธ์กับสิ่งต่างๆ

สีเเดง     เเสดงถึงพลัง อำนาจความโมโห ความก้าวร้าว

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

บทที่ 9  ออกแบบกราฟิกสำหรับเว็บไซต์

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

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

   
 - รูปแบบกราฟฟิกสำหรับเว็บ

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

               ได้รับความนิยมในยุคแรก  มีระบบสีแบบ Index  ซึ่งมีข้อมูลสีขนาด 8 บิต 

               ทำให้มีสีมากสุดมากสุด 256 สี   มีการบีบอัดข้อมูล

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

           # JPG ย่อมาจาก Joint Photographic Experts Group
               มีข้อมูลสีขนาด 24 บิต (True  Color)  สามารถแสดงสีได้ถึง 16.7 ล้านสี  

               ใช้ระบบการบีบอัดที่มีลักษณะที่สูญเสีย  (lossy) ไฟล์ประเภทนี้

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

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

               สามารถสนับสนุนระบบสีได้ทั้ง 8 บิต  และ 24 บิต  มีระบบการบีบอัด

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

              มีระบบการควบคุมค่าแกมม่า (Gamma) และความโปร่งใส 

              (Transparency)  ในตัวเอง 

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

            ใช้ตามขนาดตามหน้าจอมอนิเตอร์  มีหน่วยเป็นพิกเซล

 

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

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

      
 @descender : ส่วนล่างของตัวอักษรพิมพ์เล็กที่ต่ำกว่าเส้น baselin
 @baseline : เส้นสมมติที่ตัวอักษรส่วนใหญ่ตั้งอยู่

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

 @x-height : ความสูงของตัวอักษร x ในแบบพิมพ์เล็ก  ซึ่งมักใช้อ้างถึงความสูงของตัวอักษรที่ไม่รวม  ascender และ descender
 @point size : ระยะความสูงทั้งหมดวัดจากส่วนบนสุดถึงส่วนล่างสุด ของตัวอักษร

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

     - รูปแบบตัวอักษร แบ่งได้ 2 ประเภทใหญ่

         
         1.ตัวอักษรที่มีขนาดสัมพันธ์กับรูปร่าง (Proportional Font)

              หรือตัวอักษรที่มีขนาดไม่คงที่

              @ตัวอักษรแต่ละตัวมีพื้นที่ตามแนวนอนไม่เท่ากัน

                ขึ้นกับรูปร่างของตัวอักษรนั้น

              @สิ่งพิมพ์ต่างๆ ที่ผลิตด้วยคอมพิวเตอร์ส่วนใหญ่จะถูกออกแบบ 

                โดยใช้ตัอักษรแบบนี้  เพื่อให้ดูเหมาะสมและอ่านง่าย

           2.ตัวอักษรที่มีขนาดคงที่ (Fixed - width Font)

              จะเป็นตัวอักษรที่มีพื้นที่ตามแนวนอนเท่ากันหมด 

              ซึ่งเป็นรูปแบบที่เรียบง่าย และมีลักษณะคล้ายตัวพิมพ์ดีด

 

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

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

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

           @การจัดตำแหน่งแบบ justify ทำให้ช่องว่างของแต่ละคำแตกต่างไปในแต่ละบรรทัด  ซึ่งอาจทำให้เกิดช่องว่างที่ไม่สวยงามได้

           @ระยะห่างระหว่างบรรทัด

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

           @ขนาดหน้าเว็บ

           @ดึงดูดความสนใจด้วยตัวอักษรขนาดใหญ่

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

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

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

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

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