<< Go Back

        นอกจากข้อความและภาพนิ่งแล้ว ใน Dreamweaver เรายังนำไฟล์สื่อประสมที่เรียกว่า มัลติมีเดีย Multimedia เข้ามาเพื่อแสดงผลร่วมกันในเว็บเพจไฟล์มัลติมีเดียเหล่านี้ ได้แก่ ภาพเคลื่อนไหวหรือภาพยนตร์ ซึ่งถูกสร้างจากโปรแกรมต่าง ๆ เช่น Macromedia Flash , Shockwave Movies , Java Applets , Quick Time
การใส่มัลติมีเดียลงในเว็บเพจ
        1. คลิกเมาส์ลงบนตำแหน่งที่จะทำการใส่สื่อ มัลติมีเดีย
        2. คลิกเมาส์ที่เมนูคำสั่ง Insert เลือกคำสั่ง Media


หรือคลิกที่แถบ Insert เลือกแท็บ Common แล้วคลิกที่ออบเจ็ค เลือกตามชนิดที่ต้องการ

          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 ได้
ขั้นตอนการใส่ Flash Movie (*.swf)
          1. คลิกเมาส์ลงบนตำแหน่งที่จะทำการใส่สื่อ มัลติมีเดีย Flash Movie
          2. คลิกเมาส์ที่เมนูคำสั่ง Insert เลือกคำสั่ง Media เลือกคำสั่ง Flash หรือคลิกที่แถบ Insert เลือกแท็บ Media แล้วคลิกที่ปุ่ม จะปรากฏหน้าต่าง Select File ให้เราทำการเลือกไฟล์ Flash ที่ต้องการแทรกเข้ามาในเว็บเพจ

          3. หากไฟล์นั้นไม่ได้อยู่ในโฟลเดอร์ของเว็บไซต์ให้คลิกที่ปุ่ม Yes เพื่อคัดลอกมาไว้ แล้วตั้งชื่อไฟล์


          4. ทำการตั้งชื่อไฟล์ที่แทรกเข้ามา

          5. เราสามารถปรับแต่ง Flash ที่แทรกเข้ามาได้โดยคลิกที่ Flash ตัวที่แทรกเข้ามาใน เว็บเพจ แล้วทำการปรับแต่งค่าต่าง ๆ พาเนล Properties

          6. คลิกที่ปุ่ม เพื่อดูการแสดงผลของ Flash Movie ที่แทรกเข้ามาในเว็บเพจ หรือกดปุ่ม F 12 เพื่อเพื่อดูในเว็บบราวเซอร์

ขั้นตอนการใส่ Flash Video (*.flv)
         
1. คลิกเมาส์ลงบนตำแหน่งที่จะทำการใส่สื่อ มัลติมีเดีย Flash Video
          2. คลิกเมาส์ที่เมนูคำสั่ง Insert เลือกคำสั่ง Media เลือกคำสั่ง FLV… หรือคลิกที่แถบ Insert เลือกแท็บ Media แล้วคลิกที่ปุ่ม

          3. จะปรากฏหน้าต่าง Select File ให้เราทำการเลือกไฟล์ Flash Video ที่ต้องการแทรกเข้ามาในเว็บเพจ โดยคลิกที่ปุ่ม Browse เพื่อเลือกไฟล์ *.FLV ที่ต้องการ

          4. โปรแกรมจะให้เราทำการ Save ไฟล์ดังกล่าวให้อยู่ใน Site งานที่กำหนด

          5. โปรแกรมจะให้เราทำการเลือก Skin สำหรับปุ่ม Control และปรับในส่วนของความกว้างความสูงของการแสดงภาพ Video รวมทั้งการปรับแต่งให้เล่น Video อัตโนมัติ และการเล่น Video ซ้ำ


           ไฟล์เสียงที่สามารถนำมาใช้ได้มีอยู่ด้วยกันหลายชนิด ซึ่งแต่ละชนิดก็จะมีข้อดีข้อเสียในการนำมาใช้ในเว็บเพจต่างกัน อีกทั้งยังต้องการ โปรแกรมเสริม Plug in ในการแสดงผลในรูปแบบของไฟล์เสียงที่ต่างกันด้วย
การใส่ไฟล์เสียงลงในเว็บเพจ
           1. คลิกเมาส์ลงบนตำแหน่งที่จะทำการแทรก
           2. คลิกที่เมนูคำสั่ง Insert เลือกคำสั่ง Media เลือกคำสั่ง Plugin หรือคลิกที่แถบ Insert เลือกแท็บ Common แล้วคลิกที่ปุ่ม

           3. โปรแกรมจะให้เราทำการเลือกไฟล์เสียงที่เราต้องการแทรกเข้ามาในเว็บเพจ


           4. เมื่อเลือกไฟล์ที่ต้องการได้แล้วคลิกที่ปุ่ม OK รูปแบบไฟล์ที่เราเลือกก็จะปรากฏบน หน้าเว็บเพจโดยที่เราสามารถคลิกที่ปุ่ม ในส่วนของ Properties เพื่อดูการแสดงไฟล์ตัวอย่าง

หรือ กดปุ่ม F12 เพื่อดูผลในเว็บบราวเซอร์





        Interactive Image เป็นเทคนิคที่ทำให้รูปภาพธรรมดา ๆ มีชีวิตขึ้นมา เช่น สามารถเปลี่ยนรูปไปเป็นรูปอื่นได้เมื่อผู้ชมนำเมาส์ชี้ที่รูปดังกล่าว ซึ่งเรียกว่า โรลโอเวอร์ Rollover หรือ ใช้รูปภาพนั้นเป็นจุดเชื่อมโยงไปยังที่ต่าง ๆ เมื่อผู้ชมคลิกที่รูปภาพนั้น ที่เรียกว่า ฮอตสปอต Hotspot และ อิมเมจแมป Image map เป็นต้นนอกจากนี้ยังสามารถนำมาสร้างเป็นแถบของปุ่มเพื่อให้ผู้ชมคลิกเลือกไปยังส่วนต่าง ๆ ที่เรียกว่า นาวิเกชั่นบาร์ Navigation Bar ได้อีกด้วย
การสร้างอิมเมจแมป (Image map)
            อิมเมจแมป (image map) เป็นรูปภาพที่ถูกกำหนดให้บางส่วนของภาพมีสิ่งใดสิ่งหนึ่งเกิดขึ้นเมื่อผู้ชมคลิกที่ส่วนนั้น พื้นที่ของส่วนที่ถูกกำหนดนี้เรียกว่า ฮอตสปอต Hotspot ซึ่งโดยทั่วไปแล้ว เรามักจะใช้ฮอตสปอตนี้ในการสร้างจุดเชื่อมโยงไปยังเว็บเพจหรือเว็บไวต์ต่าง ๆ
การสร้างฮอตสปอต
            1. สร้างหน้าเว็บเพจขึ้นมาพร้อมกับแทรกรูปภาพที่ต้องการ จะนำมาทำฮอตสปอต

            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 เมื่อได้พื้นที่ที่ต้องการเรียบร้อยแล้วให้ปล่อยเมาส์

การสร้างฮอตสปอตรูปหลายเหลี่ยม

          Polygon Hotspot Tool ให้นำเมาส์คลิกที่รูปภาพตรงตำแหน่ง ที่ต้องการสร้าง Hotspot จากนั้นคลิกเมาส์เป็นจุด ครอบคลุมพื้นที่ที่เราต้องการไปเลื่อยๆ จนได้พื้นที่ ตามต้องการเรียบร้อยแล้วให้ดับเบิ้ลคลิกเพื่อทำการ ปิดขอบเขตของ Hotspot

        5. กำหนดค่าการเชื่อมโยงไปยังเว็บไซต์ หรือหน้าเว็บเพจที่ต้องการ ในหน้าต่าง Properties ของ Hotspot

        การใส่เทคนิคโรลโอเวอร์ให้กับรูปภาพนั้น จะเป็นการกำหนดให้รูปภาพที่แสดงบนเว็บ บราวเซอร์มีการเปลี่ยนรูปไปเป็นอีกรูปหนึ่ง ที่กำหนดไว้ได้ เมื่อผู้ชมเลื่อนเมาส์พอยน์เตอร์มาวางบนรูปนั้น ดังนั้นการทำโรลโอเวอร์นี้ จะประกอบด้วยรูปภาพ 2 รูปภาพเพื่อใช้เปลี่ยนสลับกัน ซึ่งภาพทั้งสองจะต้องมีขนาดเท่ากัน ถ้าหากรูปภาพขนาดไม่เท่ากัน โปรแกรมจะทำการปรับให้เท่ากัน โดยยึดขนาดของภาพแรกเป็นหลัก ซึ่งอาจทำให้ภาพที่ถูกปรับขนาดเสียสัดส่วนของภาพไปได้
          รูปภาพแบบโรลโอเวอร์นี้จะถูกกำหนดด้วยอีเว็นต์ Onmouseover และแอ็คชั่น Swap Image เองโดยอัตโนมัติ
การทำรูปภาพแบบโรลโอเวอร์ จะกระทำได้ดังนี้
          1. ให้นำเมาส์คลิกตำแหน่งที่ต้องการสร้างภาพ แบบโรลโอเวอร์ Rollover
          2. คลิกที่เมนูคำสั่ง Insert เลือกคำสั่ง Image Object เลือกคำสั่ง Rollover Image หรือ คลิกที่แถบ Insert ในแท็บ Common จากนั้นคลิกที่ปุ่ม

          3. เลือกเมนูคำสั่ง File เลือกคำสั่ง Preview In Browser หรือกดปุ่ม F 12 เพื่อดูผลในบราวเซอร์เนื่องจาก Rollover Image จะแสดงผลได้เฉพาะเว็บบราวเซอร์เท่านั้นไม่สามารถดูผลใน Dreamweaver ได้

                

                

                


 

<< Go Back