บทที่ 7 การออกแบบเว็บไซต์ให้เหมาะกับสิ่งแวดล้อม
ปัจจัยหลักที่เกี่ยวข้องกับการท่องเว็บไซต์
1. เบราเชอร์ที่ใช้ คือโปรแกรมที่ใช้เรียกดูเว็บเพจ
ซึ่งที่ได้รับความนิยมในปัจจุบันคือ Chrome,Firefox,Opera,IE เป็นต้น
ซึ่งควรออกแบบให้รองรับได้ทุกเบราเชอร์,ทุกรุ่น
และทุกรูปแบบ
2. ระบบปฎิบัติการ เป็นปัจจัยทีมีผลต่อการทำงานของเบราเชอร์
ดังนั้นจึงควรออกแบบให้อิงกับผู้ใช้งานส่วนใหญ่
3. ความละเอียดของหน้าจอ ความละเอียดของหน้าจอจะไม่ขึ้นกับขนาดที่ใช้
แต่ขึ้นการ์ดจอที่มีอยู่
โดยการออกแบบตามละเอียดของหน้าจอก็ขึ้นกับผู้ออกแบบว่าจะเลือกใช้รูปแบบใดๆ
โดยมี 3 รูปแบบด้วยกัน คือ
- 640x840 px ผู้ใช้ส่วนใหญ่จะได้เห็นหน้าเว็บที่สมบูรณ์
- 800x600 px ผู้ใช้ส่วนใหญ่จะได้เห็นเนื้อหาทั้งหมดในหน้าจอ
- 1024x768px ผู้ใชจำนวนน้อยที่สามารถดูเนื้อหาได้อย่างเหมาะสม
Trip & Trick ออกแบบโดยใช้ 800x600 แต่จัดเนื้อหาไว้ใน
640x480
4. จำนวนสีที่จอของผู้ใช้สามารถแสดงได้ ขึ้นอยู่กับการ์ดจอของผู้ใช้
ซึ่งขึ้นอยู่กับค่า bit depth หรือ color depth คือจำนวนบิตที่ใช้ในการเก็บข้อมูลแต่ละพิกเซล
5. ชนิดของตัวอักษรที่มีอยู่ในเครื่องของผู้ใช้
จะแสดงผมก็ต่อเมื่อเครื่องผู้ใช้มีฟอร์นชนิดเดียวกัน
6. ความเร็วในการเชื่อมต่ออินเตอร์เน็ต
มีผลต่อเวลาที่ใช้ในการแสดงผลชอบเว็บ ผู้ออกแบบจึงควรพัฒนาเว็บให้สวยงาม น่าสนใจ
และดาวโหลดได้เร็วที่สุด
7. ขนาดหน้าต่างบราวเซอร์ ควรออกแบบให้เปลี่ยนแปลงขนาดได้ (Flexible
design)
8. ความสว่างและค่าความต่างของสี ควรใช้โทนสีต่างกันพอสมควร ไม่สว่างและมืดจนเเกินไป
บทที่8 การเลือกใช้สีสำหรับเว็บไซต์
การเลือกใช้สีสำหรับเว็บไซต์
สีสันในเว็บเพจเป็นสิ่งที่สำคัญมากในการดึงดูดความสนใจของผู้ใช้ เราสามารถใช้สีได้ทุกองค์ประกอบของเว็บเพจ ตั้งแต่รูปภาพ ตัวอีกษร สีพื้นหลัง การใช้สีที่่เหมาะสมจะช่วยสื่อความหมายของเนื้อหา
สีสันในเว็บเพจเป็นสิ่งที่สำคัญมากในการดึงดูดความสนใจของผู้ใช้ เราสามารถใช้สีได้ทุกองค์ประกอบของเว็บเพจ ตั้งแต่รูปภาพ ตัวอีกษร สีพื้นหลัง การใช้สีที่่เหมาะสมจะช่วยสื่อความหมายของเนื้อหา
ประโยชน์ของสีในเว็บไซต์
สามารถชักนำสายตาผู้อ่านไปยังทุกบริเวณในหน้าเว็บเพจ ช่วยเชื่อมโยงบริเวณที่ได้รับการออกแบบเข้าด้วยกัน สามารถนำไปใช้ในการดึงดูดความสนใจของผู้อ่าน
และใช้ในการแบ่งความสนใจของผู้อ่าน สร้างอารมณ์โดยรวมของเว็บเพจ สร้างระเบียบให้ข้อความต่างๆ
และที่สำคัญช่วยส่งเสริมเอกลักษณ์ขององค์กรหรือหน่วยงานนั้นๆ
ความรู้เบื้องต้นเกี่ยวกับสี
การผสมสี (Color Mixing) มี 2 แบบ
การผสมสีแบบบวก (Addtitive Mixing) เป็นรูปแบบการผสมของแสง
จะนำไปใช้ในสื่อที่ใช้แสงส่องออกมา เช่น จอโปรเจคเตอร์
ทีวี หรือจอมอนิเตอร์
การผสมสีแบบลบ (Subtractive Mixing) เป็นการดูดกลืนและสะท้อนแสงของวัตถุต่างๆ จะนำไปใช้วัตถุมีสี เช่น ภาพวาดของศิลปิน รูปปั้นหรือ สิ่งพิมพ์ต่างๆ
วงล้อสี (Color Wheel)
วงล้อสีอแบบลบ
วงล้อสีแบบบวก
สีที่เป็นกลาง
คือสีกลุ่มที่ไม่ได้ถูกบรรจุไว้ในวงล้อสี
เพราะเป็นสีที่ไม่ได้รับอิทธิพลมาจากสีอื่น ซึ่งก็คือสีเทา,ขาว,ดำ
- ในการผสมสีกลางเข้ากับสีบริสุทธิ์ จะเกิดเป็นสี่ต่างๆ จำนวนมากมาย
- สีบริสุทธิ์ผสมสีขาว จะได้เป็นสีอ่อน (tint of the hue)
- สีบริสุทธิ์ผสมสีเทา จะได้เป็นโทนสีระดับต่างๆ (tone of the hue)
- สีบริสุทธิ์ผสมสีดำ จะได้เป็นสีเข้ม (shad of the hue)
- ชุดสีร้อน
- ชุดสีเย็น
- ชุดสีแบบเดียว
- ชุดสีแบบสามเส้า
- ชุดสีที่คล้ายคลึง
- ชุดสีตรงข้าม
- ชุดสีตรงข้ามข้างเคียง
- ชุดสีตรงข้ามข้างเคียงทั้ง 2 ข้าง
บทที่ 9 การออกแบบกราฟฟิกสำหรับเว็บดีไซต์
รูปแบบกราฟฟิกสำหรับเว็บ (GIF, JPG และPNG)GIF ย่อมาจากGraphic Interchange Format -ได้รับความนิยมในยุคแรก -
มีระบบสีแบบ index ซึ่งมีข้อมูลสีขนาด 8
บิต ทำให้มีสีมากสุดถึง 256 สี - มีการบีบอัดข้อมูลตามแนวของพิกเซล
เหมาะสำหรับกราฟฟิกที่ประกอบด้วยสีพื้นกราฟฟิกรูปแบบ GIF- มีไฟล์นามสกุลเป็น
.gif- ลักษณะเด่นของ GIF คือการไม่ขึ้นกับระบบปฏิบัติการใดๆ-
เป็นกราฟฟิกประเภทเดียวที่สามารถใช้ได้ทุกเบราเซอร์- มีคุณสมบัติในการแสดงภาพเคลื่อนไหว JPG ย่อมาจาก
Joint Photographic Experts Group- มีข้อมูลสีขนาด 24
บิต(True Color) สามารถแสดงสีมากได้ถึง 16.7
ล้านสี- ใช้ระบบการบีบอัดที่มีลักษณะที่สูญเสีย
(lossy)- ไฟล์ประเภทนี้ควรนำไปใช้กับรูปภ่ายหรือกราฟฟฟิกที่มีการไล่สีระดับสีอย่างละเอียด กราฟฟิกรูปแบบ JPG- มีไฟล์นามสกุลเป็น .jpg หรือ .jpeg- ใช้วิธีการบีบอัดข้อมูลแบบ JFIF
(JPEG File interchange format)- ไฟล์ประเภทนี้ไม่ยึดติดกับระบบปฏิบัติการใดๆPNG
ย่อมาจาก Portable Network Graphic- สามารถสนับสนุนระบบสีได้ทั้ง
8 บิต16 บิต 24 บิต-
มีระบบการบีบอัดแบบ Deflate ที่ไม่ทำให้เกิดการสูญเสีย
(lossless)- มีระบบการควบคุมค่าแกมม่า (Gamma) และความโปร่งใส (Transparency) ในตัวเอง-
ปัจจุบันมีโปรแกรมหลายประเภทที่นำมาใช้ในการสร้างกราฟฟิกสำหรับเว็บ-
Adobe Photoshop- Firework- Gimp- ค่าพื้นฐานที่สามารถเลือกปรับได้คือ
รุปแบบไฟล์,ชุดสีที่ใช้,จำนวนสี,ระดับความสูญเสีย,ความโปร่งใส และสีพื้นหลัง
ไม่มีความคิดเห็น:
แสดงความคิดเห็น