ใบความรู้
การแทรกรูปภาพและมัลติมีเดีย
1. การนำเสนอรูปภาพบนเว็บ
การเขียนเว็บเพจในรุ่นแรกๆ นั้นจะใช้ตัวอักษรและข้อความเป็นหลักในการนำเสนอ แต่ในช่วงเวลาไม่นานได้มีการพัฒนาใส่ภาพนิ่ง ภาพเคลื่อนไหว ใส่เสียง ทำให้เว็บเพจมีความน่าสนใจและสื่อความหมายต่างๆ ได้ ประเภทของไฟล์รูปภาพที่นิยมมาใช้มีอยู่ 3 ประเภทคือ
1. ไฟล์ประเภท GIF (Graphic Interchange Format)
2. ไฟล์ประเภทJPEG หรือ JPG(Joint Photographics Expert Group)
3. ไฟล์ประเภทPNG(Portable Network Graphic)
2. การเปลี่ยนพื้นหลังเว็บเพจให้เป็นรูปภาพ
2. การเปลี่ยนพื้นหลังเว็บเพจให้เป็นรูปภาพ
การเปลี่ยนพื้นหลังเว็บเพจให้เป็นรูปภาพ ใช้คำสั่งแอตทริบิวต์ background โดยมีรูปแบบการใช้คำสั่งดังนี้
รูปแบบ <body background=" ชื่อไฟล์รูปภาพ" หรือ ชื่อ "path(ที่เก็บรูปภาพ)/ชื่อไฟล์"
หรือ "image URL"> การใส่รูปภาพ นั้น การระบุตำแหน่งที่เก็บรูปภาพ (folder) นี้ เป็นจุดสำคัญมาก ถ้าระบุที่เก็บ (path)ผิด รูปภาพจะไม่ปรากฎขึ้น สังเกตที่ path จะใช้เครื่องหมาย สแลช (/) ถ้าใส่เครื่องหมายผิดก็จะไม่แสดงภาพเช่นกัน เพราะอ้างอิงผิดนั่นเอง ระบุชื่อรูปภาพ ตัวอย่างการใช้งาน <body background=" images.jpg"> ระบุpathที่เก็บรูปภาพ ตัวอย่างการใช้งาน <body background="picture/images.jpg"> 
3. การแทรกรูปภาพในเอกสาร
การใส่รูปภาพในเว็บเพจใช้แท็ก <img src> (Image Source) ในการควบคุม
รูปแบบ <img src=" ชื่อไฟล์รูปภาพ" หรือ ชื่อ "path(ที่เก็บรูปภาพ)/ชื่อไฟล์"หรือ "image URL">
การใส่รูปภาพนั้นการระบุตำแหน่งที่เก็บรูปภาพ (folder) นี้ เป็นจุดสำคัญมาก ถ้าระบุที่เก็บ (path)ผิด รูปภาพจะไม่ปรากฎขึ้น จะแสดงผลเป็นกรอบรูปภาพเล็ก ๆ แล้วมีเครื่องหมายกากบาท (x)หรือ ? กำกับ
สังเกตที่ path จะใช้เครื่องหมาย สแลช (/) ถ้าใส่เครื่องหมายผิดก็จะไม่แสดงภาพเช่นกัน เพราะอ้างอิงผิดนั่นเอง 
ตัวอย่างการใช้งาน ดังนี้
4. การจัดวางตำแหน่งรูปภาพ
การกำหนดคุณลักษณะพิเศษเพื่อกำหนดตำแหน่งของรูปภาพ เราสามารถกำหนดตำแหน่งของรูปภาพด้วยคำสั่งแอตทริบิวต์ align โดยมีรูปแบบการใช้งานดังนี้ ตำแหน่งของข้อความกับการแสดงผลของรูปภาพ align="top" เป็นการกำหนดข้อความให้อยู่ด้านบนของรูปภาพ align="middle" เป็นการกำหนดข้อความให้อยู่กึ่งกลางของรูปภาพ align="bottom" เป็นการกำหนดข้อความให้อยู่ด้านล่างของรูปภาพ align="left" เป็นการกำหนดข้อความให้อยู่ด้านซ้ายของรูปภาพ align="right" เป็นการกำหนดข้อความให้อยู่ด้านขวาของรูปภาพ
ตัวอย่างการใช้งาน ดังนี้
5. การใส่ข้อความอธิบายรูปภาพ
การกำหนดข้อความอธิบายรูป เป็นการกำหนดให้ในกรณีเมื่อนำเมาส์มาวางบนตำแหน่งรูปภาพ จะปรากฏข้อความแสดงออกมา ดังนั้นการใส่ข้อความอธิบายรูปภาพ สามารถทำได้โดยการใส่คำสั่งแอตทริบิวต์ alt ซึ่งมีรูปแบบการใช้คำสั่งดังนี้
รูปแบบ <img src=" path(ที่เก็บรูปภาพ)/ชื่อไฟล์" alt ="ข้อความอธิบายรูปภาพ">
ตัวอย่างการใช้งาน ดังนี้
6. การปรับขนาดรูปภาพ การกำหนดลักษณะพิเศษเกี่ยวกับการปรับขนาดรูปภาพให้มีขนาดตามความต้องการในกรณีที่รูปภาพมีขนาดเล็กหรือใหญ่เกินไป สามารถกำหนดความกว้างและความสูงของรูปภาพได้ โดยกำหนดค่าเป็นพิกเซล(Pixel) หรือกำหนดเป็นเปอร์เซ็นต์ของจอภาพ คำสั่งการกำหนดขนาดของรูปภาพ
- width เป็นการกำหนดความกว้างของรูปภาพ - height เป็นการกำหนดความสูงของรูปภาพ รูปแบบ <img src=" path(ที่เก็บรูปภาพ)/ชื่อไฟล์" width="ความกว้าง" height="ความสูง">
ตัวอย่างการใช้งาน ดังนี้
7. การกำหนดระยะห่างระหว่างภาพกับข้อวาม สามารถกำหนดได้ 2 ลักษณะ คือระยะห่างในแนวตั้ง และระยะห่างในแนวนอน
1. คำสั่ง vspace(Vertical Space) เป็นการเว้นช่องว่างระหว่างรูปภาพกับข้อความทางด้านแนวตั้ง เพื่อไม่ให้ข้อความที่อยู่ด้านบนและด้านล่างของรูปภาพนั้น อยู่ติดกับรูปภาพมากเกินไป สามารถทำได้โดยการใช้คำสั่งแอตทริบิวต์ vspace รูปแบบ <img src=" path(ที่เก็บรูปภาพ)/ชื่อไฟล์" vspace="ระยะห่างของรูปภาพกับข้อความ"> ตัวอย่างการใช้งาน <img src=" picture/images1.jpg " vspace="50">
2. คำสั่ง hspace(Horizontal Space) เป็นการกำหนดระยะสำหรับเว้นช่องว่างระหว่างรูปภาพกับตัวอักษรทางด้านแนวนอน เพื่อไม่ให้ข้อความที่อยู่ด้านข้างของรูปภาพนั้นอยู่ติดกับรูปภาพมากเกินไป สามารถกำหนดลักษณะพิเศษด้วยคำสั่ง hspace
รูปแบบ <img src=" path(ที่เก็บรูปภาพ)/ชื่อไฟล์" vspace="ระยะห่างของรูปภาพกับข้อความ">
ตัวอย่างการใช้งาน <img src=" picture/images1.jpg " hspace ="50">
8. การใส่กรอบรูปภาพ เพื่อความสวยงามหรือทำให้รูปภาพโดดเด่นมากยิ่งขึ้น โดยใช้คำสั่งแอตทริบิวต์ border
รูปแบบ <img src=" path(ที่เก็บรูปภาพ)/ชื่อไฟล์" border="ขนาดของกรอบ"> ตัวอย่างการใช้งาน <img src=" picture/images1.jpg " border ="5">
9. การเพิ่มมัลติมีเดียในเว็บเพจ - การแทรกเสียงเป็นพื้นหลังเว็บ ประเภทของไฟล์เสียงที่สามารถนำมาประกอบเว็บเพจ รูปแบบของไฟล์เสียงมีดังนี้ - ไฟล์ชนิด .au (audio)
- ไฟล์ชนิด .snd (sound)
- ไฟล์ชนิด .wav (wave form-audio)
- ไฟล์ชนิด .aif f(audio interchange file format)
- ไฟล์ชนิด .mid .midi (musical instrument digital interface)
การกำหนดให้มีเสียงแสดงผลเมื่อเปิดเว็บเพจขึ้นมา สามารถทำได้โดยใช้คำสั่งแอตทริบิวต์ bgsound รูปแบบ รูปแบบ <bgsound src=" path(ที่เก็บเสียง)/ชื่อไฟล์" loop="จำนวนครั้งที่เล่นซ้ำ"> การกำหนดคำสั่งแอตทริบิวต์ภายใน<bgsound> แทรกเสียง ได้แก่ src คือ กำหนดตำแหน่งและชื่อไฟล์ที่ทำการเล่น loop คือ กำหนดจำนวนในการเล่น delay คือ กำหนการหน่วงระยะเวลาการเล่น ตัวอย่างการใช้งาน <bgsound src=" sound/ยิ่งรู้จักยิ่งรักเธอ. mp3" border ="2">
หรือ <bgsound src=" ยิ่งรู้จักยิ่งรักเธอ.mp3" border ="2">
 รูปแบบ <embed src= path(ที่เก็บเสียง)/ชื่อไฟล์"> การกำหนดคำสั่งแอตทริบิวต์ภายในแท็ก<embed> แทรกเสียงได้แก่ src คือ กำหนดตำแหน่งและชื่อไฟล์ที่ทำการเล่น width คือ ความกว้างของไฟล์มัลติมีเดีย height คือ ความสูงของไฟล์มัลติมีเดีย autostart คือ เปิดมาเริ่มเล่นเลย หรือ ไม่ กำหนดค่า true/false loop คือ กำหนดจำนวนรอบในการเล่น
ตัวอย่างการใช้งาน <embed src=" sound/ยิ่งรู้จักยิ่งรักเธอ.mp3" autostart ="ture"> หรือ <embed src=" sound/ยิ่งรู้จักยิ่งรักเธอ.mp3" autostart ="false">
การแสดงไฟล์ประเภทมัลติมีเดีย ซึ่งประเภทมัลติมีเดียสามารถนำมาประกอบเว็บเพจ รูปแบบของไฟล์ดังนี้
- ไฟล์ชนิด .avi (Audio-Vidio Interleaved) - ไฟล์ชนิด .mpeg (Moving picture Expert Group) - ไฟล์ชนิด .wmv (Windows Media Vedio)  |
วันพุธที่ 6 กรกฎาคม พ.ศ. 2559
บทที่ 4 การแทรกรูปภาพและมัลติมีเดีย
สมัครสมาชิก:
ส่งความคิดเห็น (Atom)
ไม่มีความคิดเห็น:
แสดงความคิดเห็น