บทที่ 7 การออกแบบเว็บไซด์ให้เหมาะสมกับสิ่งแวดล้อม
ปัจจัยหลักที่เกี่ยวกับการท่องเว็บไซต์
1.เบราเซอร์ที่ใช้ เช่น IE,Opera,Mozilla,Firefox การออกแบบเว็บไซต์ตามคุณสมบัติของเบราเซอร์ ต้องรองรับเยราเซอร์ทุกรุ่น
2.ระบบปฏิบัติการของคอมพิวเตอร์ จะมีความแตกต่างกันในเรื่องของชนิดและรุ่นของเบราเซอร์ที่ใช้ได้ ระดับความละเอียดของหน้าจอ ชุดสีของระบบ และชนิดของตัวอักษร
3.ความละเอียดของหน้าจอ มีหน่วยความจำเป็น pixel ความละเอียดของหน้าจอ 640*480 หมายถึง หน้าจอมีจุดพิกเซลเรียงตัวตามแนวนอน 640 จุด พิกเซลตามแนวตั้ง 480 จุด ความละเอียดของหน้าจอไม่ขึ้นอยู่กับขนาดมอนิเตอร์ แต่จะขึ้นอยู่กับการ์ดแสดงผลว่าทำได้ละเอียดแค่ไหน
4.จำนวนสีที่จอของผู้ใช้สามารถแสดงได้
5.ชนิดของตัวอักษรที่มีอยู่ในเครื่องผู้ใช้ เบราเซอร์ จะแสดง font ที่กำหนดไว้ใน web page ได้ก็ต่อเมื่อ เครื่องคอมนั้นมี font อยู่
6.ความเร็วในการเชื่อมต่ออินเตอร์เน็ต ต้องทำให้ไฟล์มีขนาดเล็กสุดจะได้โหลดได้เร็ว
7.ขนาดหน้าต่างเบราเซอร์
- ออกแบบเว็บเพจให้เปลี่ยนแปลงขนาดได้ องค์ประกอบทั้งหมดจะมีการจัดเรียงตัวใหม่
- ออกแบบเว็บเพจให้มีขนาดคงที่
บทที่ 8 เลือกใช้สีสำหรับเว็บไซต์
ประโยชน์ของสีในเว็บไซต์
1.นำสายตาผู้อ่านไปยังทุกบริเวณในหน้าเว็บเพจ2.ช่วยเชื่อมโยงบริเวณที่ได้รับการออกแบบเข้าด้วยกัน3.นำไปใช้ในการแบ่งบริเวณต่างๆ ออกจากกัน4.สร้างอารมณ์โดยรวมของเว็บเพจ5.เสริมเอกลักษณ์ขององค์กรหรือหน่วยงานนั้นๆ
การผสมสีมี 2 แบบ
1.การผสมสีแบบบวก เป็นรูปแบบการผสมของแสง ไม่ใช่การผสมของวัตถุที่มีสีบนกระดาษ แม่สี ( เขียว แดง น้ำเงิน )2.การผสมสีแบบลบ ไม่เกี่ยวข้องกับแสง แต่เกี่ยวกับการดูดกลืนและสะท้อนแสงของวัตถุต่างๆ แม่สี (แดง เหลือง น้ำเงิน )
วงล้อสี
เป็นรูปแบบในการจัดเรียงสีทั้งหมดไว้ในวงกลมและเป็นการจัดลำดับเกี่ยวกับเฉดสีอย่างมีเหตุผลและง่ายต่อการนำไปใช้
สีอ่อน สีเข้ม โทนสี
มีประโยชน์อย่างมากในการจัดชุดสี เพราะทำให้สีสามารถแสดงออกและให้ความรู้สึกได้หลายแบบยิ่งขึ้น
ความกลมกลืนของสี
ความเป็นระเบียบของสี ทำให้ผู้ชมรู้สึกถึงสมดุลและความสวยงาม
รูปแบบชุดสีพื้นฐาน
1.ชุดสีร้อน ประกอบด้วยสีครึ่งหนึ่งของวงล้อสี สร้างความอบอุ่น สบาย รู้สึกต้อนรับแก่ผู้ชม2.ชุดสีเย็น ตรงกันข้ามกับสีร้อน สร้างความรู้สึกเย็นสบาย สุภาพ เรียบร้อย3.ชุดสีแบบเดียว มีค่าบริสุทธิ์เพียงสีเดียว เพิ่มความหลากหลายโดยการเพิ่มความเข้มอ่อนในระดับต่างๆ
4.ชุดสีแบบสามเส้า เป็นชุดสีอยู่ที่มุมสามเหลียมด้านเท่าทั้งสาม เป็นสีที่มีระยะห่างในวงล้อเท่ากัน มีประสิทธิภาพมากที่สุดคือ แม่สี5.ชุดสีที่คล้ายคลึงกัน เอาสี 2 หรือ 3 สี ที่ติดกันในวงล้อ หรือเพิ่มเป็น4 หรือ 5 ก็ได้6.ชุดสีที่ตรงกันข้าม สีคู่ที่อยู่ตรงข้ามกันในวงล้อสี เมื่อใช้คู่กันจะทำให้สีทั้งสองมีความสว่างและสดใสมากขึ้น7.ชุดสีตรงกันข้ามข้างเคียง เปลี่ยนแปลงมาจากชุดสีตรงข้าม ชุดสีแบบนี้เพิ่มความหลากหลาย มีความสดใส ความสะดุดตา ความเข้ากันลดลง8.ชุดสีตรงกันข้ามข้างเคียงทั้ง 2 ด้าน ดัดแปลงมาจากชุดสีตรงกันข้ามเช่นกัน ถูกแบ่งแยกเป็นสีด้านข้างทั้ง 2ด้าน ชุดสีแบบนี้เพิ่มความหลากหลาย มีความสดใส ความสะดุดตา แต่ความเข้ากันลดลง
ผลทางจิตวิทยาที่มีต่อสี
มนุษย์ตอบสนองต่อสีด้วยจิตใจ ไม่ใช่สมอง ดังนั้นหากเราเลือกสีอย่างรอบคอบ และเข้าใจเกี่ยวกับจิตวิทยาของสีเบื้องต้นก็จะทำให้เราเลือกใช้ชุดสีได้อย่างเหมาะสมกับอารมณ์เนื้อหาของเว็บไซต์
ข้อคิดเกี่ยวกับการใช้สีในเว็บไซต์
1.ใช้สีอย่างสม่ำเสมอ2.ใช้สีเพื่อสื่อความหมาย3.ใช้สีอย่างเหมาะสม
บทที่ 9 ออกแบบกราฟฟิกสำหรับเว็บไซต์
รูปแบบกราฟฟิกสำหรับเว็บ (GIF,JPG,PNG)
1.GIF ย่อมาจาก Graphic Interchange Format
· ได้รับความนิยมสูงสุด· มีระบบสีแบบ Index มีข้อมูลสีขนาด 8 บิต มีสีมากสุด 256 สี· มีการบีบอัดข้อมูลตามแนวของพิกเซล เหมาะสำหรับกราฟิกที่ประกอบด้วยสีพื้น
2.JPG ย่อมาจาก Joint Photographic Experts Group
· มีข้อมูลสีขนาด 24 บิต สามารถแสดงสีได้ 16.7 ล้านสี· ใช้ระบบการบีบอัดที่มีลักษณะสูญเสีย· ควรนำไปใช้กับรูปถ่ายหรือกราฟิกที่มีการไล่ระดับสีอย่างละเอียด
3.PNG ย่อมาจาก Portable Network Graphic
· สามารถสนับสนุนระบบสีได้ทั้ง 8 บิต 16 บิต 24 บิต· มีการบีบอัดแบบ Deflate ที่ไม่เกิดการสูญเสีย· มีการควบคุมค่าแกมม่าและความโปร่งใสในตัวเอง
โปรแกรมกราฟิกสำหรับเว็บ
· Adobe Photoshop เป็นโปรแกรมที่ได้รับความนิยมตั้งแต่อดีตถึงปัจจุบัน· Adobe Image Ready ลักษณะหน้าตาและเครื่องมือจะคล้ายคลึงกับ Photoshop แต่ถูกพัฒนาขึ้นเพื่องานกราฟิกโดยเฉพาะเพิ่มความสามารถในการสร้า animation ได้· Macromedia Firework มีคุณสมบัติในการตกแต่งตัวอักษรกราฟิกที่เห็นผลทันที การแสดงค่าของสีในระบบเลขฐาน 16
กราฟิกรูปแบบ GIF
ลักษณะเด่น คือ ไม่ขึ้นกับระบบปฏิบัติการใดๆ สามารถนำไปใช้กับเบราเซอร์ทุกชนิด โดยไม่ต้องคำนึงกับ version ใดๆ· มีคุณสมบัติในการเคลื่อนไหว· มีระบบสีแบบ index เก็บข้อมูลได้สูงสุด 8 บิต· คุณสมบัติ Interlacing คือการบันทึกไฟล์ GIF เป็น 4 ระดับ คือที่คุณภาพที่ 12.5%,25%,50%,100% ตามลำดับระบบการบีบอัดของ GIF· ไม่มีการสูญเสียข้อมูลภาพจาการบีบอัด· ใช้การบีบอัดที่เรียกว่า LZW(Lempel Ziv-Welch) ซึ่งเป็นแบบเดียวกับที่ใช้ในโปรแกรม Zip โดยใช้ประโยชน์จากความซับซ้อนของข้อมูลคุณสมบัติการเคลื่อนไหวของ GIF· รูปแบบที่ประกอบด้วยหลายๆเฟรมในรูปเดียวกัน เมื่อมีการแสดงผลจะเห็นรูปมีการเปลี่ยนแปลงตามเฟรมต่างๆที่มีอยู่อย่างต่อเนื่อง· สามารถใช้ได้ในหลายโปรแกรมเช่น Image Ready , Firework , GifBuilder· ค่าต่างๆ ที่สามารถกำหนดได้ในการออกแบบ Animated จำนวนรอบของการแสดงผล เวลาที่ใช้ในแต่ละเฟรม ชุดสีที่ใช้ ความโปร่งใส ลักษณะการแสดงรูปเป็นลำดับขั้นการลดขนาดของไฟล์ GIF
1.จำกัดขนาดของกราฟิก
· พยายามลดขนาดรูปหรือกราฟิกให้เล็กลงเสมอ· ตัดบางส่วนที่ไม่มีความจำเป็นออกไป· ใช้กราฟิกขนาดเล็กหลายๆรูปรวมกัน แทนที่จะใช้กราฟิกขนาดใหญ่เพียงรูปเดียว
2.ออกแบบโดยใช้สีพื้นๆเข้าไว้
· เลือกใช้สีพื้นๆที่ไม่ซับซ้อน· จำกัดปริมาณของส่วนที่มีลักษณะของรูปภาพในไฟล์
3.ออกแบบลวดลายตามแนวนอน
กราฟิกแบบ JPEG
· ใช้การบีบอัดแบบ JFIF( JPEG File Interchange Format )· ไม่ยึดติดกับระบบปฏิบัติการใดๆ· ใช้ระบบสีขนาด 24 บิต ให้สีสมจริงมากถึง 16.7 ล้านสี ทำให้รูปมีคุณภาพสูง
ระบบการบีบอัดข้อมูลในไฟล์ JPEG· สูญเสียรายละเอียดบางส่วนของภาพไป· ปริมาณการสูญเสียบางครั้งอาจมองไม่เห็น· ใช้วิธีการเก็บข้อมูลความสัมพันธ์ของสีและความสว่างในรูปเหลี่ยมขนาด8*8 pixel ให้อยู่ในรูปแผนภาพความถี่ โดยมีระบบ Discrete Cosine Transform(DTC)แบ่งแยกข้อมูลที่มีความถี่สูงและต่ำออกจากกัน· ประสิทธิภาพขึ้นอยู่กับการรวมกลุ่มของรายละเอียดในรูป ความถี่ข้อมูลต่ำ จะได้รับการบีบอัดได้ดีกว่าความถี่สูง· บีบอัดข้อมูลในระดับสูงตั้งแต่ 10:1 จนถึง 20:1 โดยที่สายตามนุษย์ไม่อาจมองเห็นคุณภาพที่ลดลงแต่อย่างใดการขยายข้อมูลของ JPEG