1. การใส่สื่อแบบ Multimedia
นอกจากข้อความและภาพนิ่งแล้ว ใน Dreamweaver เรายังนาไฟล์สื่อประสมที่เรียกว่า มัลติมีเดีย
Multimedia เข้ามาเพื่อแสดงผลร่วมกันในเว็บเพจไฟล์มัลติมีเดียเหล่านี้ ได้แก่ ภาพเคลื่อนไหวหรือ
ภาพยนตร์ ซึ่งถูกสร้างจากโปรแกรมต่าง ๆ เช่น Macromedia Flash , Shockwave Movies , Java
Applets , Quick Time
การใส่มัลติมีเดียลงในเว็บเพจ
1. คลิกเมาส์ลงบนตาแหน่งที่จะทาการใส่สื่อ มัลติมีเดีย
2. คลิกเมาส์ที่เมนูคาสั่ง Insert เลือกคาสั่ง Media
การใส่สื่อแบบ Multimedia และ
การสร้าง Interactive
2. 149
หรือคลิกที่แถบ Insert เลือกแท็บ Common แล้วคลิกที่ออบเจ็ค เลือกตามชนิดที่
ต้องการ
การใส่ Flash Movie
Macromedia Flash เป็นโปรแกรมที่ใช้ในการสร้างและแสดงผล ภาพกราฟิคและ
ภาพเคลื่อนไหวชั้นเยี่ยมที่กาลังเป็นที่นิยมใช้กันในเว็บเพจ โปรแกรม Dreamweaver สามารถแสดงผล
ไฟล์ที่ถูกสร้างจากโปรแกรม Flash ได้ทันทีโดยไม่ต้องมีโปรแกรม Flash ติดตั้งอยู่ในเครื่อง
ไฟล์ที่มาจากโปรแกรม Flash มีอยู่ด้วยกัน 3 ชนิดคือ
1. ไฟล์ Flash (.fla)
เป็นไฟล์ที่ถูกสร้างขึ้นในโปรแกรม Flash จะต้องเปิดใช้หรือแก้ไขด้วยโปรแกรม flash เท่านั้น
ไม่สามารถเปิดบน Dreamweaver หรือเว็บบราวเซอร์ได้
2. ไฟล์ Flash Movie (.swf)
เป็นไฟล์ Flash (.swf) ที่ถูกบีบอัดเพื่อนาไปใช้แสดงผลบนเว็บบราวเซอร์ ซึ่ง
สามารถแสดงผลใน Dreamweaver ได้ แต่ไฟล์ชนิดนี้ไม่สามารถแก้ไขใน โปรแกรม Flash ได้
3. ไฟล์ Falsh Template (.swt)
เป็นไฟล์ Flash ที่สามารถแก้ไขได้ มักใช้เป็นไฟล์แม่แบบ แต่ไฟล์ชนิดนี้ไม่สามารถใช้ใน
Dreamweaver ได้
3. 150
ขั้นตอนการใส่ Flash Movie (*.swf)
1. คลิกเมาส์ลงบนตาแหน่งที่จะทาการใส่สื่อ มัลติมีเดีย Flash Movie
2. คลิกเมาส์ที่เมนูคาสั่ง Insert เลือกคาสั่ง Media เลือกคาสั่ง Flash
หรือคลิกที่แถบ Insert เลือกแท็บ Media แล้วคลิกที่ปุ่ม จะปรากฏหน้าต่าง Select File ให้เราทา
การเลือกไฟล์ Flash ที่ต้องการแทรกเข้ามาในเว็บเพจ
3. หากไฟล์นั้นไม่ได้อยู่ในโฟลเดอร์ของเว็บไซต์ให้คลิกที่ปุ่ม Yes เพื่อคัดลอกมาไว้
แล้วตั้งชื่อไฟล์
เลือกไฟล์ Flash ที่ต้องการแทรก
เข้ามาในเว็บเพจ
เลือกไฟล์ที่ต้องการได้
แล้วคลิกที่ปุ่ม OK
5. 152
ขั้นตอนการใส่ Flash Video (*.flv)
1. คลิกเมาส์ลงบนตาแหน่งที่จะทาการใส่สื่อ มัลติมีเดีย Flash Video
2. คลิกเมาส์ที่เมนูคาสั่ง Insert เลือกคาสั่ง Media เลือกคาสั่ง FLV…
หรือคลิกที่แถบ Insert เลือกแท็บ Media แล้วคลิกที่ปุ่ม
3. จะปรากฏหน้าต่าง Select File ให้เราทาการเลือกไฟล์ Flash Video ที่ต้องการแทรกเข้ามา
ในเว็บเพจ โดยคลิกที่ปุ่ม Browse เพื่อเลือกไฟล์ *.FLV ที่ต้องการ
เลือกไฟล์ *.Flv
ที่ต้องการ
6. 153
4. โปรแกรมจะให้เราทาการ Save ไฟล์ดังกล่าวให้อยู่ใน Site งานที่กาหนด
5. โปรแกรมจะให้เราทาการเลือก Skin สาหรับปุ่ม Control และปรับในส่วนของความกว้าง
ความสูงของการแสดงภาพ Video รวมทั้งการปรับแต่งให้เล่น Video อัตโนมัติ และการเล่น Video ซ้า
โปรแกรมจะแสดงเนื้อหาของ Video ในมุมมอง Preview in Browser
เลือก Skin สาหรับ
ปุ่ม Control
ปรับในส่วนของ
ความกว้างความสูง
ของการแสดงภาพ
Video
กาหนดเล่น Video
อัตโนมัติ และการ
เล่น Video ซ้า
คลิกที่ปุ่ม Detect Size เพื่อให้โปรแกรม
คานวณพื้นที่แสดงของ Video เองอัตโนมัติ
9. 156
การสร้าง Interactive Image
Interactive Image เป็นเทคนิคที่ทาให้รูปภาพธรรมดา ๆ มีชีวิตขึ้นมา เช่น สามารถเปลี่ยนรูป
ไปเป็นรูปอื่นได้เมื่อผู้ชมนาเมาส์ชี้ที่รูปดังกล่าว ซึ่งเรียกว่า โรลโอเวอร์ Rollover หรือ ใช้รูปภาพนั้น
เป็นจุดเชื่อมโยงไปยังที่ต่าง ๆ เมื่อผู้ชมคลิกที่รูปภาพนั้น ที่เรียกว่า ฮอตสปอต Hotspot และ อิมเมจแมป
Image map เป็นต้นนอกจากนี้ยังสามารถนามาสร้างเป็นแถบของปุ่มเพื่อให้ผู้ชมคลิกเลือกไปยังส่วนต่าง ๆ
ที่เรียกว่า นาวิเกชั่นบาร์ Navigation Bar ได้อีกด้วย
การสร้างอิมเมจแมป (Image map)
อิมเมจแมป (image map) เป็นรูปภาพที่ถูกกาหนดให้บางส่วนของภาพมีสิ่งใดสิ่งหนึ่งเกิดขึ้นเมื่อ
ผู้ชมคลิกที่ส่วนนั้น พื้นที่ของส่วนที่ถูกกาหนดนี้เรียกว่า ฮอตสปอต Hotspot ซึ่งโดยทั่วไปแล้ว เรา
มักจะใช้ฮอตสปอตนี้ในการสร้างจุดเชื่อมโยงไปยังเว็บเพจหรือเว็บไวต์ต่าง ๆ
การสร้างฮอตสปอต
1. สร้างหน้าเว็บเพจขึ้นมาพร้อมกับแทรกรูปภาพที่ต้องการจะนามาทาฮอตสปอต
10. 157
2. ขยายขนาดของ Properties ให้มีขนาดเต็ม 4 แถวเพื่อให้สามารถแสดงในส่วน
ของ Map image ได้อย่างครบถ้วน
3. ตั้งชื่อให้กับ Map Image หากในหน้าเว็บเพจมีหลาย Map Image ต้องตั้งชื่อไม่ให้ซ้ากัน
4. เลือกเครื่องมือในการสร้าง Hotspot โดยมีรูปแบบของเครื่องมือให้เลือกใช้งาน 3
อย่างด้วยกัน
รูปแบบของเครื่องมือในการสร้าง Hotspot
Rectangle hotspot tool สาหรับสร้าง Hotspot รูปสี่เหลี่ยม
Oval hotspot tool สาหรับสร้าง Hotspot รูปวงกลม
Polygon hotspot tool สาหรับสร้าง Hotspot รูปหลายเหลี่ยม
การสร้างฮอตสปอตรูปสี่เหลี่ยมและวงกลม
Rectangle Hotspot Tool
หรือ
Oval Hotspot Tool
ให้นาเมาส์คลิกที่รูปภาพตรงตาแหน่ง
ที่ต้องการสร้าง hotspot จากนั้นทาการดรากส์เมาส์
ค้างไว้ลากคุมพื้นที่เฉพาะส่วนที่ต้องการทาเป็น hotspot
เมื่อได้พื้นที่ที่ต้องการเรียบร้อยแล้วให้ปล่อยเมาส์
ตั้งชื่อ Map
Image
11. 158
การสร้างฮอตสปอตรูปหลายเหลี่ยม
Polygon Hotspot Tool
ให้นาเมาส์คลิกที่รูปภาพตรงตาแหน่ง
ที่ต้องการสร้าง Hotspot จากนั้นคลิกเมาส์เป็นจุด
ครอบคลุมพื้นที่ที่เราต้องการไปเลื่อยๆ จนได้พื้นที่
ตามต้องการเรียบร้อยแล้วให้ดับเบิ้ลคลิกเพื่อทาการ
ปิดขอบเขตของ Hotspot
5. กาหนดค่าการเชื่อมโยงไปยังเว็บไซต์ หรือหน้าเว็บเพจที่ต้องการ ในหน้าต่าง Properties ของ
Hotspot
กาหนดไฟล์หรือเว็บไซต์ที่ต้องการเชื่อมโยงไปถึง
กาหนดการแสดงเป้าหมาย
ข้อความแสดงเมื่อนาเมาส์
มาวางบนพื้นที่ Hotspot
12. 159
การทารูปภาพแบบโรลโอเวอร์ (Rollover Image)
การใส่เทคนิคโรลโอเวอร์ให้กับรูปภาพนั้น จะเป็นการกาหนดให้รูปภาพที่แสดงบนเว็บ
บราวเซอร์มีการเปลี่ยนรูปไปเป็นอีกรูปหนึ่งที่กาหนดไว้ได้ เมื่อผู้ชมเลื่อนเมาส์พอยน์เตอร์มาวางบนรูปนั้น
ดังนั้นการทาโรลโอเวอร์นี้ จะประกอบด้วยรูปภาพ 2 รูปภาพเพื่อใช้เปลี่ยนสลับกัน ซึ่งภาพทั้งสองจะต้อง
มีขนาดเท่ากัน ถ้าหากรูปภาพขนาดไม่เท่ากัน โปรแกรมจะทาการปรับให้เท่ากันโดยยึดขนาดของภาพแรก
เป็นหลัก ซึ่งอาจทาให้ภาพที่ถูกปรับขนาดเสียสัดส่วนของภาพไปได้
รูปภาพแบบโรลโอเวอร์นี้จะถูกกาหนดด้วยอีเว็นต์ Onmouseover และแอ็คชั่น Swap Image
เองโดยอัตโนมัติ
การทารูปภาพแบบโรลโอเวอร์ จะกระทาได้ดังนี้
1. ให้นาเมาส์คลิกตาแหน่งที่ต้องการสร้างภาพ แบบโรลโอเวอร์ Rollover
2. คลิกที่เมนูคาสั่ง Insert เลือกคาสั่ง Image Object เลือกคาสั่ง Rollover Image หรือ คลิก
ที่แถบ Insert ในแท็บ Common จากนั้นคลิกที่ปุ่ม
3. เลือกเมนูคาสั่ง File เลือกคาสั่ง Preview In Browser หรือกดปุ่ม F 12 เพื่อดูผลใน
บราวเซอร์เนื่องจาก Rollover Image จะแสดงผลได้เฉพาะเว็บบราวเซอร์เท่านั้นไม่สามารถดูผลใน
Dreamweaver ได้
ตั้งชื่อให้กับรูปภาพ
แทรกรูปภาพที่
1 และ 2
ข้อความที่ต้องการให้
แสดงแทนรูปภาพ
กาหนดไฟล์หรือเว็บไซต์ที่ต้องการเชื่อมโยงไปถึง
หากไม่กาหนดโปรแกรมจะใส่เครื่องหมาย #
เพื่อให้ Rollover ทางานได้
