Top Banner
กลุ่มสาระ : การงานอาชีพและเทคโนโลยี ชื่อวิชา : การสร้างเว็บไซต์ รหัสวิชา 23203 หัวข้อ : หน่วยที9 ารสร้างมัลติมีเดียบนเว็บเพจ ใบเนื้อหา หน้าทีแผ่นที: หน่วยที9 การสร้างมัลติมีเดียบนเว็บเพจ สาระการเรียนรู9.1 ลักษณะของมัลติมีเดียบนเว็บเพจ 9.2 การแทรกไฟล์งาน SWF 9.3 การแทรกไฟล์งาน Shockwave 9.4 การแทรกไฟล์งาน Flash Video (FLV) 9.5 การแทรกไฟล์เสียงในเว็บเพจ วัตถุประสงค์เชิงพฤติกรรม 9.1 บอกลักษณะของมัลติมีเดียบนเว็บเพจได้ 9.2 อธิบายการแทรก SWF ได้ 9.3 อธิบายการแทรก Shockwave ได้ 9.4 อธิบายการแทรก Flash Video (FLV)ได้ 9.5 อธิบายการแทรกไฟล์เสียงในเว็บเพจได้
9

07 ใบเนื้อหา หน่วยที่ 9

Jun 19, 2015

Download

Documents

Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: 07 ใบเนื้อหา หน่วยที่ 9

กลุ่มสาระ : การงานอาชีพและเทคโนโลยี ชื่อวิชา : การสร้างเว็บไซต์ รหัสวิชา ง 23203 หัวข้อ : หน่วยที่ 9 การสร้างมัลติมีเดียบนเว็บเพจ

ใบเนื้อหา หน้าท่ี

แผ่นที่ :

หน่วยที่ 9 การสร้างมัลติมีเดียบนเว็บเพจ

สาระการเรียนรู้ 9.1 ลักษณะของมัลตมิีเดียบนเว็บเพจ 9.2 การแทรกไฟล์งาน SWF 9.3 การแทรกไฟล์งาน Shockwave 9.4 การแทรกไฟล์งาน Flash Video (FLV) 9.5 การแทรกไฟล์เสียงในเว็บเพจ

วัตถุประสงค์เชิงพฤติกรรม 9.1 บอกลักษณะของมัลติมีเดียบนเวบ็เพจได้ 9.2 อธิบายการแทรก SWF ได้ 9.3 อธิบายการแทรก Shockwave ได้ 9.4 อธิบายการแทรก Flash Video (FLV)ได ้ 9.5 อธิบายการแทรกไฟล์เสียงในเว็บเพจได ้

Page 2: 07 ใบเนื้อหา หน่วยที่ 9

กลุ่มสาระ : การงานอาชีพและเทคโนโลยี ชื่อวิชา : การสร้างเว็บไซต์ รหัสวิชา ง 23203 หัวข้อ : หน่วยที่ 9 การสร้างมัลติมีเดียบนเว็บเพจ

ใบเนื้อหา หน้าท่ี

แผ่นที่ : การสรา้งเว็บเพจนอกจากจะใช้ข้อความ ภาพประกอบ ตาราง และองค์ประกอบอ่ืนๆ ตามที่ได้ศึกษามาแล้วนั้น ยังสามารถสร้างภาพเคลื่อนไหว เสยีง และกราฟิกต่างๆ ทัง้แบบ 2 มิต ิและ 3 มิต ิ ซึ่งรวมเรียกว่า “มัลติมีเดีย” ได้อีกด้วย ซึ่งจะช่วยให้เว็บเพจน่าสนใจมากยิ่งข้ึน การใช้มัลติมเีดียต้องใช้เทคโนโลยสี าคัญ ได้แก ่Flash, Java, Java applet, Shockwave, Plug in และ ActiveX Control ซึ่งปัจจุบันกลายเป็นมาตรฐานส าหรับสร้างเว็บเพจทั่วไป Flash เป็นไฟล์ภาพเคลื่อนไหวที่เกิดจากโปรแกรม Macromedia Flash ขนาดไฟล์ค่อนข้างเล็กเพราะเป็นภาพแบบ Vector-Based ใช้ลายเส้นสร้างภาพ มีนามสกุลไฟล์แบบ .swf โดยผู้ใช้ต้องติดตั้งโปรแกรม Flash Player กับเว็บเบราเซอร์ก่อน จึงจะใช้งานได ้ Shockwave เกิดจากการแปลงไฟล์จากโปรแกรม Macromedia Director และ Authorware เพื่อให้ไฟล์มีขนาดเล็กลงเหมาะกับการแสดงบนเว็บเพจ โดยโปรแกรม Director เหมาะกับการสร้างเกมส ์ และงานมลัติมเีดียพรีเซนเตชัน ส่วนโปรแกรม Authorware เหมาะส าหรับสร้างงานมัลติมเีดียช่วยสอน หรือ CAI (Computer Aids Instruction) Java เป็นภาษาคอมพิวเตอร์ที่ใช้เขียนโปรแกรมขนาดเล็กเพื่อท างานร่วมกับเว็บเพจ Java Script เป็นค าสั่งภาษา Java ขนาดสั้นเหมาะส าหรับสร้างลูกเล่นให้เว็บเพจ เช่น สร้างฟอร์มติดต่อกับผู้ใช้งาน น ามาสร้างเว็บเพจได้นอกเหนือจากภาษา HTML Java Applet เป็นโปรแกรมขนาดเล็กสรา้งเกมส์ทีส่รา้งด้วยภาษา Java ท าหน้าทีเ่ฉพาะเจาะจง เช่น ภาพเคลื่อนไหว เกมส ์ฯลฯ ActiveX เป็นโปรแกรมขนาดเล็กซึ่งเรียกว่า “ คอนโทรล (Control) ” ท าหน้าที่เฉพาะตามที่เขียนในโปรแกรมไว ้ ถูกเรียกใช้โดยดาวน์โหลดจากเว็บเซิร์ฟเวอรม์าท างานบนเครื่องอัตโนมัต ิเช่น การแสดงภาพ 3 มิต ิการหมุนภาพแบบ 360 องศา ฯลฯ Plugin เป็นโปรแกรมเสริมที่ท างานร่วมกับเว็บเบราว์เซอร์ SWF คือ โปรแกรมส าหรับสร้างภาพเคลื่อนไหวประกอบเว็บเพจขนาดเล็กดาวโหลดได้รวดเร็วและใช้งานได้กับทุกบราวเซอร์ การน าไฟล์ SWF มาใช้บนเว็บเพจ มีวิธีการดังนี ้ 1. ไฟล์ SWF ที่เตรียมไว้น าเข้าเว็บเพจโดยการเลือกเมน ูInsert > Media > SWF

9.1 ลักษณะของมัลติมีเดียบนเว็บเพจ

9.2 การแทรกไฟล์งาน SWF

Page 3: 07 ใบเนื้อหา หน่วยที่ 9

กลุ่มสาระ : การงานอาชีพและเทคโนโลยี ชื่อวิชา : การสร้างเว็บไซต์ รหัสวิชา ง 23203 หัวข้อ : หน่วยที่ 9 การสร้างมัลติมีเดียบนเว็บเพจ

ใบเนื้อหา หน้าท่ี

แผ่นที่ : 2. จะปรากฏหน้าต่าง Select File ส าหรับเลือกไฟล์ SWF คลิกเลือกไฟล์ที่ต้องการ แล้วกด OK

3. จะปรากฏไอคอน ขึ้นมา ปรับย่อ/ขยายภาพ วางต าแหน่งหรือเพิ่มไฟล์ swf บนเว็บเพจได้ตามความต้องการ

แสดงผลบนบราวเซอร์

Page 4: 07 ใบเนื้อหา หน่วยที่ 9

กลุ่มสาระ : การงานอาชีพและเทคโนโลยี ชื่อวิชา : การสร้างเว็บไซต์ รหัสวิชา ง 23203 หัวข้อ : หน่วยที่ 9 การสร้างมัลติมีเดียบนเว็บเพจ

ใบเนื้อหา หน้าท่ี

แผ่นที่ : Shockwave คือ ไฟล์งานมัลติมีเดีย บทเรยีนคอมพิวเตอร์ช่วยสอน จากโปรแกรม Director Authoware ที่ถูกแปลงไฟล์เป็น .swf และการแปลงไฟล์เอกสารทั่วไป เช่น Word Excel เป็นตน้ มีลักษณะคล้ายไฟล์ .pdf ซึ่งเวลาเล่นไฟลด์ังกล่าวจะต้องใช้โปรแกรม Shockwave การน าไฟล์ Shockwave มาใช้บนเว็บเพจ มีวิธีการดังนี้ 1. น าไฟล์ที่เตรียมไว้เข้าเว็บเพจ คลิกต าแหน่งท่ีต้องการวาง เลือกเมนู Insert > Media > Shockwave จะปรากฏหน้าตา่ง

3. เลือกไฟล์ Shockwave ที่เตรียมไว้ ก าหนดคา่ความสูงและความกว้างของพื้นที่แสดงผลในเว็บเพจ จากนั้นคลิก OK

4. ตั้งช่ือในช่อง Title แล้วคลิก OK

9.3 การแทรกไฟล์งาน Shockwave

Page 5: 07 ใบเนื้อหา หน่วยที่ 9

กลุ่มสาระ : การงานอาชีพและเทคโนโลยี ชื่อวิชา : การสร้างเว็บไซต์ รหัสวิชา ง 23203 หัวข้อ : หน่วยที่ 9 การสร้างมัลติมีเดียบนเว็บเพจ

ใบเนื้อหา หน้าท่ี

แผ่นที่ : 5. จะปรากฏไฟล์ Swf ในเว็บเพจ

6. ดูผลลัพธ์ที่เว็บบราวเซอร ์

Page 6: 07 ใบเนื้อหา หน่วยที่ 9

กลุ่มสาระ : การงานอาชีพและเทคโนโลยี ชื่อวิชา : การสร้างเว็บไซต์ รหัสวิชา ง 23203 หัวข้อ : หน่วยที่ 9 การสร้างมัลติมีเดียบนเว็บเพจ

ใบเนื้อหา หน้าท่ี

แผ่นที่ : Flash Video (FLV) เป็นไฟล์วดีิโอท่ีสร้างขึ้นแล้วแปลงให้เป็น Flash ไฟล์ เพื่อให้มีขนาดเล็กลงสามารถน ามาแสดงบนเว็บได้โดยไม่เปลืองพื้นที่หน่วยความจ าและสามารถดาวโหลดได้อย่างรวดเร็ว 1. ไฟล์ FLV ที่เตรียมไว้น าเข้าเว็บเพจ คลิกต าแหน่งที่ต้องการวาง เลือกเมนู Insert > Media > FLV จะปรากฏหน้าต่าง

Video tyes เลือกชนิดของวีดิโอซึ่งมีให้เลือก 2 แบบ คือ - Progressive Download Video หมายถึง ดาวโหลดครบ 100% ก่อนจึงจะสามารถชมได ้ - Streaming Video หมายถึง รับชมวีดิโอบางส่วนไปพร้อมๆกับการดาวน์โหลดส่วนท่ีเหลือ 2. ก าหนดรายละเอียดต่างๆ แล้วคลิก OK

9.4 การแทรกไฟล์งาน Flash Video (FLV)

Video type

เลือกไฟล์วีดิโอ

เลือกปุ่มควบคุมการเล่น Video

การคงขนาดไฟล์ ก าหนดความกวา้งและความสูงไฟล์

Auto play ก าหนดให้เล่นทันท ีAuto Rewind เล่นไฟล์ซ้ า

Page 7: 07 ใบเนื้อหา หน่วยที่ 9

กลุ่มสาระ : การงานอาชีพและเทคโนโลยี ชื่อวิชา : การสร้างเว็บไซต์ รหัสวิชา ง 23203 หัวข้อ : หน่วยที่ 9 การสร้างมัลติมีเดียบนเว็บเพจ

ใบเนื้อหา หน้าที ่

แผ่นที่ : 3. จะได้กรอบส าหรับวางต าแหน่งวีดิโอในเว็บเพจ

4. ทดสอบการแสดงผลเว็บเพจด้วยบราวเซอร ์

Page 8: 07 ใบเนื้อหา หน่วยที่ 9

กลุ่มสาระ : การงานอาชีพและเทคโนโลยี ชื่อวิชา : การสร้างเว็บไซต์ รหัสวิชา ง 23203 หัวข้อ : หน่วยที่ 9 การสร้างมัลติมีเดียบนเว็บเพจ

ใบเนื้อหา หน้าท่ี

แผ่นที่ :

9.5.1 รูปแบบไฟล์เสียงที่นิยมน ามาใช้ในเว็บไซต์มีดังนี้ 1. ไฟล์เสยีง .mid (Musical Instrument Digital Interface) คุณภาพเสยีงดีมาก ใช้ไดก้ับทุกเว็บเบราว์เซอร์ นิยมน ามาใช้กับเพลงบรรเลง 2. ไฟล์เสยีง .wav (Wavefrom Extension) เป็นไฟลเ์สียงขนาดใหญ่ คุณภาพเสยีงดี ใช้ได้กับทุกเว็บเบราว์เซอร์ 3. ไฟล์เสยีง MP3 (.mp3) เป็นที่นิยมมากในหมู่นักฟังเพลงทั่วไปในปัจจุบัน คณุภาพเสียงของไฟล์ประเภทนี้ท่ีบีบอัดข้อมูลไม่มากนัก มีคุณภาพดีนิยมในการส่งไฟล์นี้ผา่นระบบอินเตอรเ์น็ต 4. ไฟล์เสยีง WMA (.wma) คิดขึ้นมาให้ท างานร่วมกับโปรแกรม Windows Media Player ของระบบวินโดว์ สามารถฟังเสียงผ่านระบบ streaming ได้ คือ ดาวน์โหลดข้อมูลไปด้วย พร้อมกับถอดรหัสเสียงให้ฟังไปพร้อมๆกัน โดยไม่ต้องรอให้ดาวนโ์หลดครบ 100% ส่วนคุณภาพเสยีงน้ันมีความละเอียดสูงไม่แพ้ mp3 128 Kbps แต่จะมีขนาดเล็กกว่า mp3 ที่ความละเอียดเสียงเท่าๆกัน 5. ไฟล์เสยีง Real Audio (.ra) เป็นไฟล์เสียงท่ีท างานคู่กับโปรแกรม Real Player เน้นการท างานแบบ Streaming สามารถฟังเสียงและดูภาพขณะก าลังดาวน์โหลดข้อมูลได้พร้อมๆกัน มีหลายความละเอียดใหเ้ลือกหลายระดบั เป็นท่ีนิยมในหมู่นักดูหนังฟังเพลงในอินเตอร์เน็ตมาก 6. ไฟล์เสยีง Audio Streaming Format (.asf) เป็นไฟล์เสยีงหน่ึงที่มีรูปแบบ Streaming ที่เน้นส่งข้อมูลเสียงแบบ real time ใช้กันมากในการฟังวิทยุออนไลน์บนอินเตอร์เนต็ 9.5.2 การแทรกไฟล์เสียงลงในเว็บเพจ มีวิธีการ ดังนี้ 1. คลิกต าแหน่งที่ต้องการวาง เลือกเมนู Insert > Media > Pligin

2. จะแสดงหน้าต่าง Select File ให้เลือกไฟลเ์สยีงท่ีตอ้งการ

9.5 การแทรกไฟล์เสียงในเว็บเพจ

Page 9: 07 ใบเนื้อหา หน่วยที่ 9

กลุ่มสาระ : การงานอาชีพและเทคโนโลยี ชื่อวิชา : การสร้างเว็บไซต์ รหัสวิชา ง 23203 หัวข้อ : หน่วยที่ 9 การสร้างมัลติมีเดียบนเว็บเพจ

ใบเนื้อหา หน้าท่ี

แผ่นที่ : 3. ทดสอบการแสดงผลเว็บเพจด้วยบราวเซอร์