บทที่ 9 การใส่รูปภาพ (Image).

งานนำเสนอเรื่อง: "บทที่ 9 การใส่รูปภาพ (Image)."— ใบสำเนางานนำเสนอ:

1 บทที่ 9 การใส่รูปภาพ (Image)

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

3 ประเภทของรูปภาพ .JPG ย่อมาจาก The Joint Photographic Experts Group (JPEG) เป็นไฟล์ที่เหมาะสมสำหรับรูปถ่ายที่อาศัยหลายโทนสีหลายโทรสีและการไล่สีหลายระดับ ซึ่งไฟล์จะถูกจัดเก็บไว้ในโหมด RGB สามารถแสดงสีได้สูงสุด 16.7 ล้านสี นอกจากนี้ยังเป็นไฟล์สกุลที่สามารถสนับสนุนการทำงานด้วยโค้ดแบบ HTML และข้อดีอีกจุดคือ สามารถบีบอัดไฟล์ให้มีขนาดเล็กลงได้ โดยอาศัยการขจัดข้อมูลบางอย่างที่ไม่จำเป็นหรือสิ่งที่มองไม่เห็นด้วยตาเปล่าออกไป ซึ่งไฟล์ JPEG ที่บีบอัดแล้วเมื่อเปิดกลับขึ้นมาใหม่จะไม่เหมือนกับภาพต้นฉบับ 2. .GIF ย่อมาจาก Graphics Instruction Format เป็นไฟล์ที่นิยมใช้โหมดสี Indexed Color ซึ่งเป็นสีประเภทตัวอักษรหรือกราฟิกที่สร้างขึ้นเอง และใช้สีไม่มากนัก ซึ่งเป็นภาพที่นิยมนำมาใช้ในการสร้างเว็บเพจ เพราะขนาดไฟล์เล็กมาก การบันทึกไฟล์ในรูปแบบ GIF จะมีตัวเลือก (Option) ในการ Interface

4 ประเภทของรูปภาพ ทำให้ภาพที่ส่งทางอินเตอร์เน็ตมีรูปให้ดูก่อนแบบหยาบ แล้วค่อยๆ ละเอียดขึ้น ถึงแม้การโหลดรูปจะไม่ครบหรือสมบูรณ์แบบก็จะสามารถเดารูปได้ นอกจากนี้สำหรับการทำเว็บเพจ แบบมี Background ควรทำการจัดเก็บแบบ GIF89a Export ซึ่งเป็นการจัดเก็บไฟล์แบบโปร่งแสงหรือ Transparent area เหมาะสำหรับการนำไปเป็นเว็บเพจพื้นหลังไม่ใช่สีขาว แต่จะต้องปรับโหมดสีให้อยู่ในโหมด RGB ก่อน ซึ่งจะทำให้ขนาดไฟล์ใหญ่กว่าแบบ .GIF 3. .SWF ย่อมาจาก Shockwave Flash เป็นไฟล์ภาพเคลื่อนไหว โดยทำจากโปรแกรม Flash หรือ Swish

5 กิจกรรมที่ 9.1 ให้เปิดไฟล์ชื่อ star1.html แล้วสร้างตารางต่อไปนี้
R=3, C=3, W=60%, B=0, P=0, S=0 กำหนด Align = Center

6 การใส่รูปภาพที่มีนามสกุล .GIF และ .JPG
1. คลิกที่ตำแหน่งที่ต้องการวางรูป ในที่นี้ให้คลิกที่แถว 2 2. คลิกที่รูปที่เครื่องมือ Insert Image 3. เลือกแหล่งที่เก็บรูปภาพไว้ในช่อง Look in 4. คลิกชื่อไฟล์รูปภาพที่ต้องการ (จะสังเกตเห็นตัวอย่าง รูปในช่อง Image Preview พร้อมทั้งขนาด ของรูปและเวลาในการโหลดรูปภาพ)

7 การใส่รูปภาพที่มีนามสกุล .GIF และ .JPG
5. คลิกที่ปุ่ม OK 6. คลิก Yes 7. ดูที่ช่อง Save in ตรวจสอบ ให้แน่ใจว่าเป็นโฟลเดอร์ที่สร้างสำหรับ เก็บงานเว็บเพจ

8 การใส่รูปภาพที่มีนามสกุล .GIF และ .JPG
8. คลิกที่ปุ่ม Save 9. จะปรากฏกรอบ Image Tag ในที่นี้ ให้คลิก OK 10. ชื่อไฟล์รูปภาพจะปรากฏอยู่ในกรอบ Site ด้วย

9 การใส่รูปภาพที่มีนามสกุล .GIF และ .JPG
ถ้าต้องการให้อยู่กึ่งกลาง ให้คลิกบริเวณด้านข้างของรูปเพื่อให้จุดที่รูปภาพหายไปแล้วคลิกที่ปุ่ม Center ของกรอบ Properties ในกรณีที่ตารางเปลี่ยนรูปแบบ ให้จัดให้ถูกต้อง

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

11 การใส่รูปภาพที่มีนามสกุล .GIF และ .JPG
หมายเหตุ 1. รูปภาพที่นำมาใช้ในเว็บ ห้ามใช้ใช้ชื่อไฟล์เป็นภาษาไทย และต้องไม่มีวงเล็บอยู่ท้าย ชื่อ เช่น nong [1] เป็นต้น เพราะการคัดลอกรูปภาพจากเว็บต่างๆ นั้น บางครั้งจะมีเครื่องหมายวงเล็บโดยอัตโนมัติ จึงควรเปลี่ยนชื่อไฟล์ใหม่ก่อนก่อนที่จะนำเว็บมาใช้เว็บ นอกจากนี้รูปภาพที่นำมาใช้ในเว็บไม่ควรมีขนาดเนื้อที่ของไฟล์ใหญ่เกินไป เพราะจะทำให้ใช้เวลานานในการโหลด 2. ถ้า Copy รูปภาพมาไว้ใน Folder ที่สร้างเว็บก่อน จะสะดวกในการนำรูปภาพมาใช้

12 กิจกรรมที่ 9.2 เปิดไฟล์ชื่อ star2.html แล้วสร้างตารางต่อไปนี้
R=4, C=2, W=60%, B=1, P=0, S=0 กำหนด Align = Center พิมพ์ข้อความแล้วใส่รูปภาพตามตัวอย่าง เสร็จแล้วใส่สีพื้นและเส้นตาราง การปรับขนาดรูปภาพ 1. คลิกรูปภาพที่ต้องการ 2. กำหนดขนาดตามที่ต้องการตรงกรอบ Properties เพื่อให้รูปภาพมีนาดเท่ากัน

13 การสร้างกรอบรูปภาพ 1. คลิกบริเวณรูปภาพที่ต้องการ
2. กำหนด Border ในกรอบ Properties ให้เท่ากับ 1 ขึ้นไป ในที่นี้ กำหนดเป็น 3 3. ปฏิบัติให้ครบทุกรูป

14 การสร้างคำอธิบายรูปภาพ
1. คลิกบริเวณรูปภาพที่ต้องการ 2. พิมพ์ข้อความที่ต้องการในช่อง Alt ของกรอบ Properties 3. กด F12 เพื่อ Preview แล้วนำเมาส์ ไปวางไว้ที่รูป จะปรากฏข้อความที่กำหนด เสร็จแล้วกำหนด Title หน้าเว็บนี้เป็นดาราหญิง

15 กิจกรรมที่ 9.3 เปิดไฟล์ชื่อ index.html แล้วสร้างตารางต่อจากตารางแรก ให้เว้นระยะห่างประมาณ 2 บรรทัด โดยกำหนดดังนี้ R=4, C=2, W=40%, B=1, P=0, S=0 กำหนด Align = Center แล้วทำการบันทึกพร้อมทั้งนำรูปภาพมาใส่ไว้ตามตัวอย่าง

16 กิจกรรมที่ 9.3 เมื่อครบถ้วนแล้ว จะสังเกตว่าส่วน Panel ด้านขวามือ จะปรากฏชื่อไฟล์ทั้งหมด

17 การใส่รูปภาพที่มีนามสกุล .SWF
1. คลิกตำแหน่งที่ต้องการวางรูป 2. คลิกที่รูปเครื่องมือ Insert Flash 3. คลิกที่แหล่งที่เก็บรูปภาพ Look in 4. คลิกชื่อไฟล์รูปภาพที่ต้องการ 5. คลิกที่ปุ่ม Select 6. คลิก Yes

18 การใส่รูปภาพที่มีนามสกุล .SWF
7. ดูที่ช่อง Save in ตรวจสอบให้แน่ใจว่าเป็นโฟลเดอร์ที่สร้างขึ้นสำหรับเก็บงานเว็บเพจ 8. คลิกที่ปุ่ม Save 9. จะปรากฏรูปดังรูป 10. กด F12 เพื่อดูใน Browser จึงจะแสดงภาพที่แท้จริง

19 The End