Lecture

 

บทที่ 6   การออกแบบหน้าเว็บ  Page Design

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

แนวคิดในการออกแบบหน้าเว็บ มี  4   เทคนิค

1.             เรียนรู้จากเว็บไซต์ต่าง ๆ  ( สิ่งที่ได้คือรูปแบบและเทคนิคใหม่ ๆ )

2.              ประยุกต์รูปแบบจากหนังสือพิมพ์

3.             ใช้แบบจำลองเปรียบเทียบ  (metaphor )

4.             ออกแบบอย่างสร้างสรรค์

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

การใช้แบบจำลองมีด้วยกัน  3 ประเภท

1.             แบบจำลองการจัดระบบ ( Organizational metaphor)   คือใช้ประโยชน์จากความคุ้นเคยของการจัดระบบที่คุ้นเคยเพื่อให้ผู้ใช้เข้าถึงโครงสร้างในระบบใหม่ได้ เช่น  เว็บร้ายขายหนังสือ สามารถจำลองการแบ่งหมวดหมู่หนังสือได้ตามที่ใช้ในร้านหนังสือจริง

2.             แบบจำลองการใช้งาน ( Functional metaphor )   คือเชื่อมโยงการใช้งานที่สามารถทำได้จริงในชีวิตจริงกับการใช้งานบนเว็บ   เช่น เว็บโรงภาพยนตร์  ที่ควรให้ผู้ใช้สามารถดูโปรแกรมหนัง   จองที่นั่งล่วงหน้าได้เหมือนกับโรงภาพยนตร์จริง

3.             แบบจำลองลักษณะที่มองเห็น  (Visual metaphor )   คือวิธีนี้จะเกี่ยวข้องกับสิ่งที่มีลักษณะคุ้นเคยกับคนทั่วไป  เช่น เว็บไซต์ที่เกี่ยวกับดนตรี ที่ให้บริการฟังเพลงบนเว็บได้  การนำปุ่มเล่นเพลง ปิดเพลง ที่ทุกคนรู้จักจากเครื่องเสียงมาใช้ ให้เข้าใจง่ายและรวดเร็ว

หลักการออกแบบหน้าเว็บ  มี  7 หลักการ

1.             สร้างลำดับชั้นความสำคัญขององค์ประกอบ (Visual Hierarchy)    คือ

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

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

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

2.              สร้างรูปแบบ   บุคลิกและสไตล์

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

·       บุคลิก  การมีบุคลิกของเว็บที่เหมาะสมกับเนื้อหาย่อมทำให้ผู้ใช้เข้าถึงเนื้อหาได้ดีขึ้น

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

 

3.              สร้างความสม่ำเสมอตลอดทั่วทั้งไซต์

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

4.              จัดวางองค์ประกอบที่สำคัญไว้ในส่วนบนของหน้าเสมอ

ส่วนบนของหน้า หมายถึงส่วนแรกของหน้าที่จะปรากฏขึ้นในหน้าบราวเซอร์โดยที่ยังไม่มีการเคลื่อนไหวหน้าจอใด ๆ  ประกอยด้วย

·       ชื่อของเว็บ  เพื่อให้ผู้ใช้รู้ว่ากำลังอยู่ในเว็บอะไร

·       ชื่อหัวเรื่อง  หรือชื่อแสดงหมวดหมู่ของเนื้อหาที่ปรากฏ

·       สิ่งสำคัญ  ที่เราต้องการโปรโมตเว็บ

·       ระบบเนวิเกชัน  เพื่อให้ผู้ใช้คลิกส่วนที่ต้องการได้ทันที

 

5.              สร้างจุดสนใจด้วยความแตกต่าง

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

 

6.              จัดแต่งหน้าเว็บให้เป็นระเบียบและเรียบง่าย

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

7.              ใช้กราฟิกอย่างเหมาะสม

·       ควรใช้การฟิกที่เป็นไอค่อน  ปุ่ม  ลายเส้น  และสิ่งอื่น ๆ  ตามความเหมาะสมและไม่มากจนเกินไป  เพื่อหลีกเลี่ยงโครงสร้างของหน้าที่ยุ่งเหยิงและไม่เป็นระเบียบ

เข้าใจลักษณะการใช้งานหน้าเว็บ   เราสามารถใช้ประโยชน์จากเว็บได้  2   ทาง

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

ออกแบบหน้าเว็บให้มีความยาวเหมาะสม

หน้าเว็บที่ไม่ยาวนักทำให้ดูน่าอ่าน   เหมาะสำหรับ

·       หน้าโฮมเพจหรือหน้าที่เป็นแหล่งรวมลิงค์จำนวนมาก

·       หน้าเว็บที่คาดว่าจะอ่านบนหน้าจอ

·       หน้าเว็บที่มี่ขนาดกราฟิกใหญ่มาก

  ส่วนหน้าเว็บที่ยาวเหมาะสำหรับ

·       ความสะดวกในการดาวน์โหลดหรือการพิมพ์

·       ความสะดวกในการจัดการกับจำนวนไฟล์และลิ้งที่น้อยลง

·       โครงสร้างของเนื้อหาจะได้ไม่ถูกตัดแบ่งออกจากกัน

ในบางครั้งเราอาจอำนวยความสะดวกให้แก่ผู้ใช้   โดยการจัดทำเว็บสำหรับพิมพ์แยกคนละชุดกันสำหรับอ่านบนหน้าจอ   โดยมีวิธีการดังนี้

1)            แบ่งเนื้อหาออกเป็นส่วนย่อย ๆ ส่วนละประมาณ  2-3  หน้าจอเพื่อนำไปสร้างหน้าเว็บ  พร้อมกับสร้างลิงค์เชื่อมโยงเข้าด้วยกัน  เพื่อให้ได้เว็บที่มีหน้าไม่ยาวนัก   เหมาะกับการอ่านบนหน้าจอ

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

รูปแบโครงสร้างของหน้าเว็บ  มี  4   รูปแบบ

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

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

3)            โครงสร้างหน้าเว็บที่พอดีกับหน้าจอ  โดยจะออกแบบให้หน้าจอไม่มีสกรอบาร์ปรากฏ  ข้อดีคือผู้ใช้จะมองเห็นข้อมูลทุกส่วนของหน้าได้

4)            โครงสร้างหน้าเว็บแบบสร้างสรรค์   รูปแบบนี้อยู่นอกเหนือกฎเกณฑ์ใด ๆ มักมีรูปแบบและการจัดวางองค์ประกอบเฉพาะตัวที่คาดไม่ถึง  เป็นเว็บของศิลปิน  นักออกแบบ  บริษัทโฆษณา  เนื่องจากเป็นเว็บที่สื่อถึงฝีมือและความสามารถในการออกแบบอย่างสร้างสรรค์ได้เต็มที่

ส่วนประกอบของหน้าเว็บ  แบ่งเป็นส่วนประกอบหลัก   3   ส่วน

1)            ส่วนหัว ( Page Header )

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

2)            ส่วนเนื้อหา (Page Body )

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

3)            ส่วนท้าย (Page Footer )

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

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

ออกแบบหน้าโฮมเพจ (Home Page )  โฮมเพจที่ดีควรมีลักษณะ  ดังนี้

1.             แสดงถึงภาพรวมและสิ่งที่เป็นประโยชน์ในเว็บ

2.             ดูน่าสนใจและมีลักษณะที่สัมพันธ์กับเนื้อหา

3.             มีลิงค์ที่สามารถเชื่อมโยงไปสู่ส่วนหลัก ๆ ของเว็บ

4.             แสดงผลได้อย่างรวดเร็ว   โดยใช้รูปกราฟิกอย่างจำกัด

5.             แสดงถึงเอกลักษณ์ของเว็บด้วยการแสดงชื่อเว็บ

6.             แสดงถึงสิ่งที่ปรับเปลี่ยนใหม่  เพื่อให้ผู้ใช้เข้าใจว่ามีการเปลี่ยนแปลงของเนื้อหาภายใน

7.             แสดงวันที่ปัจจุบัน

8.             เปลี่ยนแปลงรูปกราฟิกเป็นประจำทุกวัน   สัปดาห์หรือเดือน

9.             แสดงข่าวหรือข้อมูลความเคลื่อนไหวใหม่ ๆ ให้ผู้ใช้ได้รับรู้ในหน้าแรก

10.      สร้างส่วนของเนื้อหาที่แสดงถึงสิ่งใหม่ ๆ ในเว็บ

หน้าก่อนหน้าโฮมเพจ  (Splash page)

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

ข้อแนะนำในการออกแบบโฮมเพจ

1.             ออกแบบโครงสร้างของหน้าโดยใช้โปรแกรมกราฟิก

2.             กำหนดชื่อของเว็บให้สื่อความหมาย

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

4.             เลือกใช้รูปพื้นหลังที่เหมาะสม

5.             หลีกเลี่ยงการใช้เทคโนโลยีขั้นสูง

6.             อย่าใช้ภาพเคลื่อนไหวมากจนเกินไป

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

(Design for a variety of the Web Environments)

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

1.             บราวเซอร์ที่ใช้

2.             ระบบปฏิบัติการของคอมพิวเตอร์

3.             ความละเอียดของหน้าจอ

4.             จำนวนสีที่หน้าจอของผู้ใช้สามารถมองเห็นได้

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

6.             ความเร็วในการเชื่อมต่ออินเตอร์เน็ต

7.             ขนาดหน้าต่างของบราวเซอร์

8.             ความสว่างและค่าความต่างของโทนสี

บราวเซอร์ที่ใช้

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

การออกแบบเว็บไซต์ตามคุณสมบัติของบราวเซอร์  มี  4  วิธี

1.             เว็บไซต์สำหรับบราวเซอร์ทุกรุ่น

2.             เว็บไซต์สำหรับบราวเซอร์รุ่นล่าสุด

3.             เว็บไซต์ตามความสามารถของบราวเซอร์

4.             เว็บไซต์ที่มีหลายรูปแบบ

ระบบปฏิบัติการ

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

                การแสดงผลของ  Windows จะมีขนาดใหญ่กว่า Mac
                ความสว่างของหน้าจอ  Mac  จะมากกว่า Windows

ความละเอียดของหน้าจอ

                ขนาดของจอมอนิเตอร์มีหลายขนาด เช่น  15,17,21 และอื่น ๆ  ความละเอียดของหน้าจอมีหน่วยเป็น Pixel  ความละเอียด 640 x 480  หมายถึง หน้าจอมีจุดพิกเซลเรียงตัวตามแนวนอน  640  พิกเซล และตามแนวตั้ง 480  พิกเซล 

                ในการออกแบบเว็บเพจ  หากทราบว่ากลุ่มผู้ใช้เป้าหมายใช้ความละเอียดที่เท่าไหร่  ก็พัฒนาเว็บให้รองรับกับกลุ่มผู้ใช้นั้น  หากไม่มีข้อมูลที่ชัดเจน  แนวทางที่ดีที่สุด คือ ศึกษาข้อมูลจากแหล่งสถิติผู้ใช้ทั่วไป  ในสมัยก่อนถือความละเอียดที 640 x 480  ต่อมาก็เปลี่ยนมาที่  800 x 600 ปัจจุบันอยู่ที่  1024 x 768

จำนวนสีที่จอของผู้ใช้สามารถแสดงได้

                มอนิเตอร์มีความสามารถแสดงสีที่แตกต่างกันขึ้นอยู่กับประสิทธิภาพของการ์ดจอ (vide card)  หน่วยความจำในที่การ์ดจอที่มากขึ้นจะทำให้แสดงสีได้มากขึ้น  จำนวนสีที่การ์ดจอสามารถแสดงได้นั้น  ขึ้นอยู่กับค่าความละเอียดของสี  ที่เรียกว่า bit depth หรือ color depth  ซึ่งก็คือจำนวนบิตที่ใช้เก็บแต่ละพิกเซล

ตารางแสดงระดับความละเอียดของสีกับจำนวนสีสูงสุดที่สามารถแสดงได้

ค่าความละเอียดของสี	จำนวนสี
8  บิต	256
16  บิต	65,535
24  บิต	16.7  ล้าน
32  บิต	16.7  ล้าน

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

                บราวเซอร์จะแสดงฟอนต์ที่กำหนดไว้ในเว็บเพจได้ก็ต่อเมื่อ   คอมพิวเตอร์เครื่องนั้นมีฟอนต์เหล่านั้นติดตั้งอยู่ในเครื่อง   ชนิดอักษรที่อยู่ในเครื่องของผู้ใช้สามารถตรวจสอบได้โดยเข้าไปในไฟลเดอร์  C:\Windows\Fonts

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

1.             MS Sans Serif   VS Microsoft Sans Serif 

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

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

2.             ตัวอักษรแบบกราฟิก  (Graphic Text)

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

                ข้อเสียคือ  ใช้เวลาในการ  download มากกว่า  ลำบากในการแก้ไขและเปลี่ยนแปลง  และข้อความที่เป็นกราฟิกจะไม่สามารถค้นหาได้ด้วย search engine

ความเร็วในการเชื่อมต่ออินเตอร์เน็ต

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

จำนวนผู้ชมที่รอการแสดงผล	เวลาที่ใช้ในการดาวน์โหลด
84%	10  วินาที
51%	15  วินาที
26%	20  วินาที
5%	30  วินาที

ขนาดหน้าต่างบราวเซอร์

                ขนาดหน้าต่างบราวเซอร์มีโอกาสที่ถูกปรับเปลี่ยนเป็นขนาดเท่าไหร่ก็ได้ตามความประสงค์ของผู้ใช้งาน   ซึ่งมีอยู่  2  ประเภท

1)            ออกแบบเว็บเพจให้เปลี่ยนแปลงขนาดได้ (Flexible Design)

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

<Table border = 1 width = 100%>
                <tr>
                                <td width = 25%> left column </td>
                                <td width = 75%> right column</td>
                </tr>
                </Table>

2)            ออกแบบเว็บเพจให้มีขนาดคงที่ (Fixed Design)

รูปแบบนี้เหมาะสำหรับการควบคุมโครงสร้างของหน้าเว็บให้คงที่เสมอ  ข้อดีคือ  เว็บจะปรากฏต่อสายตาผู้ใช้ในรูปแบบเดียวกันเสมอ  สามารถควบคุมความยาวของตัวอักษรในบรรทัดได้ดี  ข้อเสียคือ  ต้องอาศัย  scroll bar ในการเลื่อนดูข้อมูล  ตัวอย่าง HTML ที่ใช้ในตาราง

<Table border = 1 width = 600>
                <tr>
                                <td width = 150> left column </td>
                                <td width = 450> right column</td>
                </tr>
                </Table>

ตัวอย่างคำสั่ง  HTML   ที่ใช้ในตารางโดยให้ขนาดของคอลัมน์ทางซ้ายคงที่  แต่ทางขวาสามารถเปลี่ยนแปลงได้

<Table border = 1 width = 100%>
                <tr>
                                <td width = 150> left column </td>
                                <td > right column</td>
                </tr>
                </Table>

ความสว่างและค่าความต่างของโทนสี

นอกเหนือจากค่าแกมม่าที่มีผลต่อความสว่างของหน้าจอแล้ว  ตัวผู้ใช้เองก็สามารถปรับความสว่าง (Brightness) และความต่างของโทนสี (Contrast) จากมอนิเตอร์ได้  ผู้ออกจะต้องระวังไม่ให้หน้าเว็บมีโทนสีมืดหรือสว่างจนเกินไป  และควรใช้โทนสีที่ต่างกันพอสมควร

 

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

 

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

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

ความรู้เบื้องต้นเกี่ยวกับสี    

 

 

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

1.             การผสมแบบบวก (Additive mixing)   จะเป็นรูปแบบการผสมของแสง  ไม่ใช่การผสมของวัตถุที่มีสีบนกระดาษ  การนำไปใช้งาน  จะนำไปใช้ในสื่อใด ๆ ที่ใช้แสงออกมา เช่น โปรเจคเตอร์  ทีวี  หรือจอมอนิเตอร์

 

2.             การผสมแบบลบ (Subtractive mixing)  การผสมสีแบบนี้เกี่ยวข้องกับแสง   แต่เกี่ยวเนื่องกับการดูดกลืนและสะท้อนแสงของวัตถุต่าง ๆ การนำไปใช้งาน  จะนำไปใช้ในสื่อที่เกี่ยวข้องกับการใช้วัตถุมีสี  เช่น  ภาพวาดของศิลปิน   รูปปั้น  หรือสิ่งพิมพ์ต่าง ๆ

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

 

สีที่เป็นกลาง (Neutral Colors)   คือสีที่ไม่ได้ถูกบรรจุไว้ในวงล้อสีเพราะเป็นสีที่ไม่ได้รับอิทธิพลมาจากสีอื่น ได้แก่สีเทา สีขาว และสีดำ

สีอ่อน สีเข้ม และโทนสี (Tint, Shade and Tone) 

·       สีอ่อน (tint of the hue) เกิดจากการผสมสีบริสุทธิ์กับสีขาว

·       สีเข้ม (shade of the hue) เกิดจากการผสมสีบริสุทธิ์กับสีดำ

·       โทนสีระดับต่าง ๆ (tone of the hue) เกิดจากการผสมสีเทากับสีบริสุทธิ์

ความกลมกลืนของสี (Color Harmony)   เป็นระเบียบของสีที่ทำให้ผู้ชมรู้สึกถึงความสมดุลและความสวยงามในเวลาเดียวกัน  การใช้สีที่จืดชืดเกินไป  จะทำให้เกิดความรู้สึกที่น่าเบื่อและไม่สามารถดึงดูดความสนใจจากผู้ชมได้  การใช้สีที่มากเกินไป ก็จะดูวุ่นวาย  ขาดระเบียบและอาจสร้างความสับสนให้กับผู้ชม

รูปแบบชุดสีมาตรฐาน (Simple Color Schemes)

1.             ชุดสีร้อน  ประกอบด้วยสีม่วงแกมแดง  แดงแกมม่วง   แดง  ส้ม  เหลือง   เขียวอมเหลือง   สีเหล่านี้ ให้ความรู้สึกอบอุ่นสบาย  และรู้สึกต้อนรับแก่ผู้ชม

2.             ชุดสีเย็น  ประกอบด้วยสีม่วง  น้ำเงิน  น้ำเงินอ่อน  ฟ้า  น้ำเงินแกมเขียว  เขียว  ชุดสีนี้ให้ความรู้สึก

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

4.              ชุดสีแบบสามเศร้า  เป็นชุดสีที่อยู่ที่มุมของสามเหลี่ยมด้านเท่าทั้งสาม  ซึ่งเป็นสีที่มีระยะห่างในวงล้อสีเท่า ๆ กัน จึงมีความเข้ากันอย่างลงตัว

5.              ชุดสีที่คล้ายคลึงกัน  ประกอบด้วยสี 2 หรือ 3 สีที่อยู่ติดกันในวงล้อ  สามารถเพิ่มเป็น 4 หรือ 5 สีได้แต่อาจส่งผลให้ขอบเตของสีกว้างไป

6.              ชุดสีตรงข้าม  คือสีคู่ที่อยู่ตรงกันข้ามในวงล้อสี  เมื่อนำสีทั้งสองมาใช้คู่กันจะทำให้สีทั้งสองมีความสว่างและสดใสมากขึ้น

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

8.              ชุดสีตรงข้ามข้างเคียงทั้ง 2 ด้าน  ดัดแปลงมาจากชุดสีตรงข้าม  แต่สีตรงข้ามทั้งสองสีถูกแบ่งแยกเป็นสีด้านข้างทั้งสองด้าน  ชุดสีแบบนี้มีความหลากหลายของสีเพิ่มขึ้น  แต่จะมีความสดใสและความกลมกลืนของสีลดลง