ใบงานบทที่ 4

การใช้ภาพกราฟิกในเว็บเพจ

ตอนที่ 1 

 2. ให้ค้นหาภาพเคลื่อนไหว .gif ในอินเทอร์เน็ตมา 5 ภาพ แล้วส่งอีเมลให้ครูผู้สอน

1.

2.

3.

4.

5.

 3.อธิบายลักษณะของภาพต่อไปนี้

  3.1. ภาพ .gif 

ตอบ   ย่อมาจาก Graphic Interchange Format เป็นรูปแบบไฟล์ภาพพัฒนาขึ้นโดย CompuServeสำหรับบีบอัดข้อมูลภาพลายเส้น กำหนดสีได้สูงสุด 256 สี มีคุณลักษณะโปร่งแสงและสร้างภาพเคลื่อนไหวได้

  3.2. ภาพ .jpeg

ตอบ ย่อมาจาก Joint Photographic Experts Group เป็นรูปแบบไฟล์ที่บีบอัดข้อมูลให้เล็กลง หลังการบีบอัดยังคงแสดงสีได้สูงถึง 16.7 ล้านสี แต่ถ้าบีบอัดมากๆคุณภาพจะเสียไป ไฟล์ที่บีบอัดทำให้เล็กลงกว่าภาพ .gif ก็ได้ สามารถดาวน์โหลดได้เร็ว แต่เมื่อนำมาแสดงผลก็อาจจะช้าบ้าง เพราะต้องการขยายไฟล์ขณะแสดงผล

3.3. ภาพ .png

ตอบย่อมาจาก Portable Network Graphic เป็นรูปแบบไฟล์บีบอัดข้อมูลได้ดีกว่า .gif 20-30 เปอร์เซ็นต์ พัฒนาโดย Thomas Boutell และ Tom Lane สำหรับทำงานข้ามระบบไฟล์ขนาดใหญ่ แต่แสดงผลได้เร็วกว่า JPEG สามารถทำภาพโปร่งแสงได้

    4.อธิบายขั้นตอนการใช้ภาพประกอบเว็บเพจ

      4.1. ขั้นตอนการแทรกภาพ

ตอบ  การแทรกภาพ

                1.คลิกคำสั่ง Insert > Image

                2.หรือ คลิกที่ทูลบาร์              (Image)

                3.หรือ ใช้แป้น <Ctrl> + <Alt> + <I> จะได้หน้าต่าง Selection Image Source ดังนี้

4.เลือกโฟลเดอร์ในช่อง Look in เลือกไฟล์ภาพที่ต้องการแล้วคลิกปุ่ม OK

      4.2. ขั้นตอนการปรับขนาดรูปภาพ

ตอบ   ภาพที่แทรกในเว็บเพจ อาจมีขนาดใหญ่หรือเล็กลงจนเกินไป สามารถปรับขนาดใหม่ได้ด้วยการใช้ จุดยึด (Handle) และ Property Inspector ดังนี้

                1.คลิกที่รูปภาพแล้วคลิกที่จุดยึดหรือแฮนเดิล ลากเมาส์ย่อหรือขยายขนาดภาพ

                2.เปลี่ยนขนาดด้วย Property Inspector โดยความกว้าง และ สูง ของภาพ

      4.3. ขั้นตอนการวางตำแน่งรูปภาพ

ตอบการวางตำแหน่งรูปภาพ

                การวางตำแหน่งรูปภาพในเว็บเพจเป็นการจัดการให้ภาพวาง ณ จุดต่างๆบนเว็บเพจ แบ่งเป็น จัดชิดซ้าย ชิดขวา กึ่งกลาง ทำได้โดยใช้ Property Inspector

      4.4. ขั้นตอนการนำรูปภาพมาเป็นภาพพื้นหลัง

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

                1.เลือกคำสั่ง Modify > Page Properties…

                2.หรือ ใช้แป้น <Ctrl> + <J>

      4.5. ขั้นตอนการจองพื้นที่วางภาพบนหน้าเว็บเพจ

ตอบ  การจองพื้นที่วางภาพบนหน้าเว็บเพจ

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

                1.คลิกเลือกตำแหน่งที่จะวางภาพ

                2.เลือกคำสั่ง Insert > Image Object > Image Placeholder หรือคลิกที่ทูลบาร์Image แล้วเลือกคำสั่งย่อย Image Placeholder