ใบเนื้อหา 10

วชิ า การสรา้ งเวบ็ ไซต์ รหัสวชิ า 2204-2009 หน่วยที่ 10 การใช้มัลติมเี ดยี บนเว็บ ครูผู้สอน ศริ ินภา บตุ ะเขยี ว แผนกวิชาคอมพิวเตอร์ธรุ กิจวทิ ยาลยั เทคนิคกาญจนาภเิ ษก สมทุ รปราการ

ใบเน้ือหา หน่วยที่ 10 การใช้มัลตมิ เี ดยี บนเว็บเนอ้ื หาสาระการสอน/การเรยี นรู้• ด้านความรู้(ทฤษฎี) 1. การแทรก Flash ลงเวบ็ เพจ เราสามารถแทรกไฟล์ทส่ี รา้ งจากโปรแกรม Flash ไมว่ ่าจะเปน็ ปา้ ยโฆษณาแบนเนอร์ต่าง ๆ หรอืแมแ้ ต่รปู ภาพเคล่อื นไหวลงไปในเวบ็ เพจไดด้ ้วยขน้ั ตอนดังต่อไปน้ี 1. สร้างไฟล์ HTML ขน้ึ มาใหม่ แล้วบันทกึ ช่ือไฟล์ testFlash.html 2. วางเคอร์เซอรต์ รงตาแหนง่ ท่ีจะแทรกไฟล์ Flash 3. เลอื กคาส่ัง SWF บนแท็บ Common ของ Insert Bar เพอ่ื แทรกไฟล์ Flash จากนัน้ หน้าตา่ ง Select Flie จะปรากฏข้นั มาใหเ้ ลอื กไฟล์ Flash ที่ตอ้ งการแทรกในเว็บเพจ 4. คลิกเลอื กโฟลเดอร์เก็บไฟล์ Flash

5. คลกิ เลือกไฟล์ Flash ท่ตี ้องการแทรก 6. คลกิ ปมุ่ Save จากนนั้ ถ้าต้องการก็อบปีภ้ าพมาไว้ในโฟลเดอร์เวบ็ ไซต์ก็ให้กาหนดโฟลเดอร์และไฟล์ที่ต้องการจัดเกบ็ เมอ่ื เสรจ็ แลว้ สามารถทดลองเลน่ ไฟล์ Flash กอ่ นได้ โดยการคลกิ ปุม่ Play จากนนั้ ไฟล์ Flash จะแสดงบนพ้นื ที่สรา้ งงานทว่ี างเคอรเ์ ซอร์ไว้ ถา้ ต้องการหยุดเลน่ ไฟล์ Flash ให้ คลิกปุม่ Stop 2. การแทรกไฟล์ .FLV ยอดนิยม Flash Video หรือไฟลน์ ามสกลุ .flv เปน็ ไฟลว์ ดี โี ออกี รปู แบบทกี่ าลังไดร้ ับความนิยม อย่างมากในปัจจบุ ัน เนือ่ งจากเปน็ ไฟลท์ ม่ี ีขนาดเล็ก สามารถเลน่ บนเว็บเพจไดด้ ว้ ยโปรแกรม Flash Player ซึง่ เป็นโปรแกรมทมี่ ักตดิ ต้ังไว้ในเครื่องคอมพวิ เตอร์ โดยมีขั้นตอนการแทรกไฟล์ Flash Viedo ดังน้ี 1. สร้างไฟล์ HTML ขน้ึ มาใหม่แลว้ บันทกึ ช่ือไฟล์ testFlv.html 2. วางเคอรเ์ ซอรต์ รงตาแหนง่ ทต่ี ้องการจะวางไฟล์วีดีโอ 3. เลือกคาสง้ั FLV บนแทบ็ common ของ Insert Bar (หรอื คลิกเมนู Insert > Media >FlashVideo) เพื่อแทรกไฟล์ Flash Video

จากนัน้ หนา้ ตา่ ง Insert FLV จะปรากฏข้ึนมา ใหเ้ ลือกไฟล์ Flash Video ท่ีต้องการแทรกในเว็บเพจและกาหนดต่าง ๆ 4. เลอื กวธิ แี สดงวีดโี อ - Progressive Download Video ไฟล์ Flash Video จะถูกดาวนโ์ หลดไปเก็บไวท้ ่เี ครื่องของผ้ชู มในขณะทเ่ี ลน่ ไปด้วย ซ่ึงสามารถเผยแพรไ่ ฟลว์ ีดีโอได้จากเซริ ฟ์ เวอรท์ ่ัวไปได้ - Streming Video ไฟล์ Flash Video จะไม่ถกู ดาวน์โหลดไปเกบ็ ไว้เหมือนกบั วิธแี รกซึ่งการเผยแพร่ไฟลว์ ดี ีโอประเภทนีจ้ ะต้องใชเ้ ว็บเซิร์ฟเวอร์ท่ตี ดิ ต้ังโปรแกรมโดยเฉพาะเท่านน้ั 5. คลิกปมุ่ Browse…เพ่ือเลอื กไฟล์ Flash จากนัน้ ถ้าต้องการกอ็ บปีภ้ าพมาไวใ้ นโฟลเดอร์เวบ็ ไซตก์ ็ให้กาหนดโฟลเดอรแ์ ละไฟล์ที่ตอ้ งการจัดเก็บ 6. กาหนดคุณสมบตั ติ า่ ง ๆ ให้ไฟลว์ ดี ีโอตามตอ้ งการ - Skin เลอื กรปู แบบของแผงควบคุมการเล่นวีดีโอ ซ่ึงจะแสดงตวั อย่างแผงควบคุมเม่ือเลอื ก - Width / Height กาหนดความกว้างและความสงู ของวีดีโอ - Constrain รกั ษาสดั สว่ นของวีดีโอไวเ้ ม่ือปรับความกวา้ งหรือความสงู - Auto play เริ่มเลน่ วดี โี ออัตโนมตั ิเม่อื เวบ็ เพจถูกเปิด - Prompt users to download… ในกรณีท่เี ครื่องของผู้ชมไมส่ ามารถรับชมได้ใหไ้ ปยังเว็บสาหรบั ดาวน์โหลดหรืออัพเกรดโปรแกรม Flash Player 7. คลิกปมุ่ OK หลังจากนน้ั จะปรากฏไอคอนไฟล์ .flv ในพนื้ ที่สรา้ งงานตรงตาแหน่งที่วางเคอร์เซอร์ไว้ดงั รปู

3. การเล่นเพลงในเวบ็ เพจดว้ ย Plugin นอกจากปมุ่ ข้อความ และภาพเคล่ือนไหวท่ีเปน็ ไฟล์ Flash แลว้ เราสามารถเพ่มิ เสียงดนตรใี นเวบ็เพจได้ สาหรบั ไฟล์เสยี งท่ีจะนามาใส่ในเวบ็ เพจนัน้ มีอยดู่ ้วยกันหลายรูปแบบ ดังน้ี 1. ไฟลเ์ สยี ง .midi (Musical Instrument Digital) คุณภาพเสียงดีมาก ใช้ได้กบั ทกุ เวบ็ บราวเซอร์นิยมใชก้ ับเพลง 2. ไฟลเ์ สียง .wav (Waveform Extension) เป็นไฟล์เสยี งขนาดใหญ่ คณุ ภาพเสียงดใี ชไ้ ดก้ ับทุกเว็บบราวเซอร์ 3. ไฟล์เสยี ง .aif หรือ aiff (Audio Interchange File Format) คล้ายกบั ไฟล์ .wav คณุ ภาพเสียงดี แต่มขี นาดใหญ่ ใช้ได้กบั ทุกเว็บบราวเซอร์ ไมต่ ้องใช้โปรแกรมเสริม 4. ไฟล์เสียง .mp3 หรอื .mpeg (Motion Picture Expert Group Audio – Audio Layer 3) เป็นไฟล์ท่ีถกู บบี อดั ให้มขี นาดเล็กลง แตค่ ณุ ภาพเสยี งดีมาก ตอ้ งใชโ้ ปรแกรมเสรมิ เวลาแสดงเสียง เชน่ MediaPlayer, Real Player, และ Quicktime เป็นต้น 5. ไฟลเ์ สียง .ra .ram .rpm (Real Audio) เปน็ ไฟล์เสยี งท่ีถูกบีบอัดให้เล็กกวา่ MP3 แต่คุณภาพเสียงลดกว่า MP3 ตอ้ งใชโ้ ปรแกรมเสรมิ ในการเล่นเช่นเดียวกัน อาทิ Media Player, Real Player, และQuicktime เป็นตน้ สาหรับวิธีการใสเ่ สียงในเวบ็ เพจสามารถทาได้ 2 วิธีคือ แบบแรกสร้างลิงก์ไฟลเ์ สียงเพ่ือใหผ้ ชู้ มเลือกคลกิ ฟังเสยี งเอง สว่ นแบบท่สี องจะเป็นการฝงั ไฟล์เสียงลงในเว็บเพจ เมอ่ื ผชู้ มเปดิ เวบ็ เพจนน้ั กส็ ามารถฟงั เสียงไดท้ ันที ซึ่งสามารถทาได้ดังนี้ 1. สรา้ งไฟล์ HTML ขน้ึ มาใหม่ แลว้ บนั ทกึ ชือ่ ไฟล์ testMusic.html

2. วางเคอร์เซอร์ตรงตาแหน่งทต่ี ้องการวางแผนควบคมุ การเล่นเสียง3. เลอื กคาสั่ง Plugin บนแทบ็ Common ของ Insert Bar เพ่อื แทรกไฟล์เสียงลงเว็บเพจจากนน้ั หน้าตา่ ง Select File จะปรากฏขนึ้ มาใหเ้ ลอื กไฟล์เสยี งทีต่ อ้ งการแทรกในเว็บเพจ4. คลกิ เลอื กโฟลเดอร์ทเี่ ก็บไฟล์เสียง5. คลกิ เลือกไฟล์เสยี งทตี่ ้องการแทรก6. คลิกปุ่ม OK

จากนั้นถ้าต้องการก็อบป้ีไฟล์มาไว้ในโฟลเดอร์เว็บไซต์ก็ให้กาหนดโฟลเดอร์และไฟลท์ ี่ต้องการจดั เกบ็ 7. กาหนดขนาดของ Windows Media Player ทีใ่ ชเ้ ล่นบนเว็บเพจที่ชอ่ ง W (ความกว้าง) และ H(ความสงู ) ซง่ึ สามารถเลือกกาหนดขนาดได้ ดังน้ี เม่อื เสรจ็ เรยี บรอ้ ยแล้วจะแสดงไอคอนของไฟลด์ งั รูป สามารถทดลองเลน่ ไฟลเ์ สียงไดโ้ ดยคลิกปมุ่Play บน Properties Inspector 4. การปรบั แต่งการเลน่ ไฟลเ์ สยี ง เราสามารถปรับแต่งการเล่นไฟล์เสยี งได้ เชน่ ซ่อมแผงควบคมุ การเลน่ เสยี ง หรือกาหนดจานวนรอบในการเลน่ เสยี ง เป็นต้น

ซงึ่ สามารถปรับแตง่ การเลน่ เสียงไดโ้ ดยคลกิ ปุ่ม Parameters… บน Properties Inspector จากน้นัจะปรากฏหนา้ ตา่ ง Parameters ข้นึ มาเพ่อื ให้กาหนดคา่ Parameters และ Value ตามตอ้ งการ เมื่อกาหนดเสรจ็ แลว้ ใหค้ ลิกปุ่ม OK โดยสามารถเลือกกาหนด Parameters และ Value ได้ดังนี้