Recomendados
Más contenido relacionado
Similar a หน่วยที่ 8
หน่วยที่ 8
- 2. รู้จักกับภาพการฟิกชนิดต่างๆ ภาพกราฟิกมีรูปแบบการจัดเก็บหลายชนิด โดยแต่ละชนิดมีความแตกต่างกันในเรื่องของขนาดไฟล์ที่ใช้ในการภาพและ จานวนสีที่แสดงได้สาหรับการสร้างเว็บเพจนั้นการฟิกที่ใช้ส่วนใหญ่เป็นชนิด GIF และ JPEG นั้นมีข้อดีและข้อเสียต่อไปนี้จะ กล่าวถึงการเลือกชนิดของการฟิกที่เหมาะสมในกานสร้างเว็บเพจ โดยทั่วไปเราจะพบว่าการผสานระหว่างกันจะให้ผลลัพธ์ที่ดีที่สุด ภาพชนิด GIF การฟิก เป็นรูปแบบที่คิดค้นเพื่อใช้กับคอมพิวเตอร์ต่างแบบต่างๆรุ่นได้ ทาให้เหมาะสมสาหรับการนามาใช้ในเว็บเพจเพราะ ต้องแสดงได้เครื่องที่แตกต่างกัน แต่ข้อจากัดกัดคือ สามารถใช้สีได้สูงสุดเพียงครั้งละ 256 สีเท่านั้น ชนิดของภาพ JPEG การฟิก ถูกพัฒนาเป็นการฟิกที่สามารถทางานกับเครื่องต่างแบบต่างรุ่นได้เช่นกัน ข้อดีของกราฟิกชนิดนี้ คือสามารถแสดงสีได้ สูงสุดถึง16.7 ล้านสี อย่างไรก็ตามจะมีการสูญเสียรายละเอียดบ้าง ซึ่งเป็นผลจากการบีบอักข้อมูล เพื่อลดขนาดภาพให้มีขนาด ใหญ่จนเกินไป
- 3. แสดงภาพบนเว็บ <img> หลังจากนั้นที่เราได้เตรียมภาพที่จะนามาใส่ในเว็บเพจแล้ว ต่อไปเป็นการนาภาพมาแสดง
- 4. การใส่ข้อความกากับภาพ เราควรใส่ข้อความกากับภาพ เพราะว่ามีผู้ใช้อินเทอร์เน็ตกลุ่มหนึ่งใช้บราวเซอร์ที่แสดงเฉพาะตัวอักษร และไม่สามารถโหลด ภาพบนเว็บมาดูได้หรือในกรรีผู้ใช้กับกาหนดบราวเซอร์ไม่โหลดภาพมาแสดงเพราะต้องการอ่านเฉาพะข้อความ ข้อความนี้จะกากับ แทนภาพซึ่งแม้กับผู้จะไม่เห็นภาพในเว็บเพจ แต่ก็สามารถอ่านคาบรรยายจากภาพเพื่อว่าทราบว่าภาพนั้นคืออะไรดีที่จริงแล้วการใช้ ข้อความกากับภาพที่มีประโยชน์สาหรับผู้ใช้บราวเซอร์ธรรมดาด้วย เพราะข้อความกากับภาพจะปรากฏในขณะภาพที่กาลังโหลดอยู่ สาหรับการแทรกข้อความกากับภาพทาได้โดยใช้แอตทริบิวต์alt ตัวอย่างการใส่ข้อความกากับภาพ
- 5. ปรับขนาดรูปภาพ ถ้าภาพที่เราไปแสดงในเว็บเพจมีขนดเล็กหรือใหญ่เกินไป เราสามารถกาหนดใหม่ได้กับภาพ โดยระบุความกว้างและความยาวที่ ต้องการ ตัวอย่างการปรับขนาดภาพของรูปภาพ การกาหนดของรุปภาพ หากกาหนดเพียงด้านเดียว อีกด้านหนึ่งจะเปลี่ยนไปตามด้วย อัตราส่วนที่เท่ากัน แต่ถ้าเรากาหนดขนาด ทั้งสองด้านจะทาให้อัตราของภาพผิดเพี้ยนได้
- 8. เพิ่มระยะห่างรูปภาพกับข้อความ ภาพนั้นโดยปกติจะถูกวางชิดติดกับข้อความ เราสามารถเพิ่มระยะห่างเพื่อความสวยงามได้โดยใช้แอตทริบิวต์ กาหนดระยะห่าง แนวตั้ง ด้านบนและล่าง กาหนดระยะห่างแนวนอน ด้านซ้ายและขวา ตัวอย่างการเพิ่มระยะห่างรูปกับข้อความ
- 9. การทิ้งระยะข้อความให้พ้นขอบเข๖รูป <br> การจัดรูปภาพร่วมกับข้อความ ส่วนของข้อความจะถูกพิมพ์ต่อเนื่องไปเรื่อยๆ ซึ่งบางครั้งดูไม่งามเท่าไร เราสามารถแก้ไขได้ โดยทิ้งระยะห่างข้อความให้พ้นขอบเขตรูปภาพ แล้วจึงเริ่มพิมพ์ข้อความในส่วนต่อไป ซึ่งเราจะใช้แอตทริบิวต์ ตัวอย่างการใช้งานแท็ก br
- 10. แสดงภาพเป็นฉากหลัง <body> เราสามารถแต่งเว็บเพจให้มีภาพเป็นพื้นหลังได้โดยกาหนดภาพเล็กๆ หนึ่งภาพที่จะถูกจัดเรียงซ้ากันเพื่อสร้างพื้นหลังให้กับ เว็บเพจในลักษณะเดียวกันกับแผ่นกระเบื้อง และภาพที่ใช้ควรมรสีจางไม่ซับซ้อน เพราะจะทาให้ความในข้อความหน้าเว็บเพจนั้น อ่านยาก ตัวอย่างการแสดงภาพเป็นฉากหลังเว็บเพจ
- 11. แสดงภาพฉากหลังอยู่กับที่ นอกจากเราจะใช้ภาพมาเป็นฉากหลังแล้ว เรายังสามารถเพิ่มลุกเล่นให้กับภาพฉากหลังนี้โดยขณะที่เราเลื่อนแถบเลื่อนลงไป เรื่อยๆ ภาพที่เราใช้เป็นฉากหลังก็อยู่กับที่ ไม่เคลื่อนไม่ไปตามที่เลื่อน ตัวอย่างการกาหนดฉากหลังอยู่กับที่
- 12. ลูกเล่นเกี่ยวกับชนิดของGFI ถึงแม้การใช้การฟิกจะถูกจากัดด้วยจานวนสีที่ใช้ได้เพียง 256 สี แต่ละการฟิกชนิดนี้มีลูกเล่นที่เราสามารถนามาใช้เพื่อเสริม ความโดดเด่นของเว็บเพจได้นั้นคือเทคนิค Interlacing และ Transparency การใช้ Interlacing ถ้าเว็บเพจของเรามีภาพขนาดใหญ่หรือมีภาพจานวนมากผู้ใช้ที่เชื่อมต่ออินเทอร์เน็ตด้วยความเร็วไม่สูงจะใช้เวลานานในการ ดาวน์โหลดภาพ วึ่งอาจทาให้ต้องคอยจนเปลี่ยนใจไปเปิดดุเว็บเพจอื่นก็ได้ วิธีหนึ่งที่สามารถแก้ปัญหานี้ได้คือการใช้การฟิกชนิด GIF ภาพชนิดนี้จะถูกโหลดโดยบราวเซอร์ขึ้นมาอย่างรวดเร็วแบบไม่ชัดก่อน และค่อยๆ ชัดขึ้นตามลาดับ ผู้ใช้จะสามารถเห็นภาพ หยาบๆ ของภาพสมบรูณ์ที่กาลังใช้เวลาโหลดขึ้นมาได้ทาให้รู้ไม่หงุดหงิดในการรอ
- 13. วิธีการสร้างภาพชนิด GIF ได้โดยการเปิดภาพที่ต้องการนามาใช้ในโปรแกรมแตกต่างภาพ Photoshop และสั่ง Save for web รูปเป็นชนิด GIF และนาภาพ ที่บันทึกมาแสดงในเว็บเพจ
- 14. การใช้ Transparency การทา Transparency คือการกาหนดสีใดสีหนึ่งในรูป ให้เป็นสีที่ไม่ถูกนามาแสดงบนบราวเซอร์ เช่นเราอาจกาหนดสีพื้นหลังของ รุปให้ใสเพื่อให้สีหรือรูปภาพที่ใช้เป็นฉากหลังของเว็บเพจปรากฏแทนที่ การใช้เทคนิค Transparency จะทาให้ภาพดูกลมกลืนกับพื้น หลังของเว็บเพจ
- 15. ลุกเล่นที่เกี่ยวกับภาพชนิด JPG ในส่วนของภาพ JPG ก็มีวิธีให้ผู้เยี่ยมชมเว็บสามารถดูภาพได้เร็วขึ้นเช่นเดียวกัน เราเรียกเทคนิคนี้ว่า Slicing การใช้ Slicing เป็นอีกเทคนิคหนึ่งในการเพิ่มลูกเล่นให้กับภาพ JPG เวลาที่เราโหลดภาพบนอินเทอร์เน็ต โดยลักษณะการโหลดภาพประเภท Slicing ก็คือรูปจะถูกโหลดเข้ามาแปะบนเว็บเพจที่ละชิ้นจนครบทั้งรูปภาพคล้ายจิ๊กซอว์ วิธีสร้างภาพแบบ JPG แบบ Slicing สาหรับขั้นตอนการทา Slicing นั้นสามารถทาได้ง่าย โดยใช้โปรแกรม Photoshop ซึ่งมีขั้นตอนดังนี้
- 16. การสร้างภาพเคลื่อนไหว GIFAnimation การเคลื่อนไหวแบบ GIF Animation เกิดจากการนาภาพหลายรูปที่เป็นภาพนิ่งมาเรียงต่อกันแล้วนามาแสดงผลตามลาดับ ทา ให้ภาพที่ดูเหมือนกับเคลื่อนไหวได้ ดาวน์โหลดโปรแกรม GIF Construction สาหรับโปรแกรมรวมภาพเป็น GIF Construction มีอยู่ด้วยกันหลายตัว ในหนังสือเล่มนี้จะใช้โปรแกรมที่มีชื่อว่า GIF Construction Set Professional สามารถดาวน์โหลดมาทดลองใช้ได้ที่ http://www.mindworkshop.com/alchemy/gifcon.html การสร้าง GIF Animation ก่อนสร้างภาพเคลื่อนไหว เราต้องเตรียมภาพนิ่งทีละเฟรม ที่ละช่องขึ้นมาก่อน ในที่นี้เราจะสร้างภาพนิ่ง 5 รูปดังนี้
- 17. การรวมภาพเพื่อสร้างภาพเคลื่อนไหว เมื่อได้ภาพนิ่งแล้วเราจะใช้โปรแกรมรวมภาพนิ่งคือ โปรแกรม GIF Construction Set เพื่อรวมภาพนิ่งเหล่านั้นให้กลายเป็น ภาพเคลื่อนไหว กาหนดรายละเอียดภาพเคลื่อนไหว จากภาพเคลื่อนไหวที่เรากาหนดได้จะเห็นว่าภาพแสดงอย่างรวดเร็วมองไม่ทัน เราต้องแก้ไขโดยการกาหนดรายละเอียดของ แต่ละภา บันทึกภาพเคลื่อนไหว เมื่อเราทดลองการแสดงผลของภาพเคลื่อนไหวจนพอใจแล้ว ที่นี่เราก็จะจับบันทึกไฟล์ GIF Animation นี้ไปใช้กับหน้าของเรา การแสดงภาพเคลื่อนไหวในหน้าเว็บเพจ การแสดงภาพเคลื่อนไหวในหน้าเว็บเพจเหมือนกับการแสดงภาพทั่วไป พนิ่ง