หน่วยการเรียนรู้ที่ 7 การแทรกไฟล์มัลติมีเดียและการสร้างการเชื่อมโยง

การแทรกไฟล์มัลติมีเดียและการสร้างการเชื่อมโยง การใส่ไฟล์มัลติมีเดีย เช่น ไฟล์เสียง
เพลง, Video,  Flashเราสามารถใส่ไฟล์เพลง, ไฟล์ video หรือไฟล์ flash ลงไปในหน้าเว็บ
เพจได้ด้วยคำสั่งเป็นคำสั่งแสดงการทำงานของโปรแกรม plug-in โดยนำไปผนวกกับ
เอกสาร HTML และอาจใส่ tag <noembed>ควบคู่ไปด้วย เผื่อเว็บเบราเซอร์รุ่นเก่า
ที่ยังไม่ support tag นี้

โครงสร้างของคำสั่งการแทรกไฟล์ Multimedia
 
http://url%20ไฟล์
<noembed><img src=”url ไฟล์รูปภาพที่ให้แสดงเมื่อใช้ embed ไมได้” ></noembed>
</embed>

คำสั่งเสริม สำหรับ
– src=”url”   url ของไฟล์ที่จะให้เล่น ได้แก่ ไฟล์เสียง (เช่น .mid, .wav, .mp3) 
ไฟล์ vedio(เช่น .avi, wmv, mov, mpeg) และไฟล์ Flash movie ( .swf)
– width=”no”   กำหนดขนาดความกว้างของตัว player
– height=”no”  กำหนดขนาดความสูงของตัว player
– align=”top | middle | bottom | left | right”   จัดวางตำแหน่งให้กับวัตถุ ที่
อยู่ข้างๆ ตัว player
– name=”ชื่อ”   ชื่ออ้างอิงของวัตถุ
– autostart=”true | false”   เมื่อโหลดเว็บเพจแล้ว ให้เล่นอัตโนมัติหรือไม่
– loop=”true | false | number”  กำหนดเป็น true เมื่อต้องการให้เล่นซ้ำไปเรื่อยๆ
หรือกำหนดเป็นตัวเลข จำนวนรอบที่ต้องการให้เล่นซ้ำ
– playcount=”no”  จำนวนรอบที่ให้เล่น (ใช้ได้เฉพาะ IE)
– hidden=”true | false”   ให้ซ่อน หรือแสดงตัว player
– volume=”0 ถึง 100″   กำหนด volume ของเสียง (ใช้ได้เฉพาะ Netscape)

การแทรกไฟล์เสียง
ตัวอย่างการใช้คำสั่ง  เล่นไฟล์เสียง

http:// รักแท้ดูแลไม่ได้.mp3
<noembed><img src=”nosupport.gif” ></noembed>
</embed>

แบบกำหนดตัวเชื่อม
<A HREF=”ชื่อไฟล์.นามสกุล”>คำอธิบาย</A>

                                    

เป็นการใส่เพลงโดยการกำหนดตัวเชื่อม ในช่องว่าง ๆให้ใส่ตำแหน่งไฟล์เสียง
ลงไป ส่วนตรง “คำอธิบาย” ให้ใส่ข้อความที่สื่อความหมายให้รู้ว่า ตัวเชื่อมนี้ เป็น
ไฟล์เพลง เช่น “เพลงแสนสนุก”
ตัวอย่าง

<A HREF=”รักแท้ดูแลไม่ได้.mp3″> คลิกเพื่อเชื่อมไปยังเพลงนี้ </a>

การแทรกวีดิโอใส่ไฟล์วีดิโอให้เว็บเพจ (สำหรับ Internet Explorer)
<IMG DYNSRC=”…..” SRC=”……” ALT=”……”
LOOP=n START=FILEOPEN/MOUSEOVER >
เป็นรูปแบบการใส่ไฟล์วีดิโอของ
 Internet Explorer โดยมีลักษณะคำสั่งดังนี้
– DYNSRC=”……” ให้ใส่ชื่อไฟล์วีดิโอลงไป เช่น video.avi
– SRC=”……” ให้ใส่ไฟล์รูปภาพ ไว้ เป็นตัวแทน ไฟล์วีดิโอนั้น ๆ เมื่อบราวเซอร์
ผู้ใช้ไม่สนับสนุน
– ALT=”……” ใส่ข้อความใด ๆ ก็ได้ลงไปเพื่อ ให้ผู้ใช้ที่ ไม่สามารถดูวีดิโอ สามารถ
รู้ข้อมูลได้
– LOOP=n กำหนดจำนวนครั้งที่จะให้วีดิโอเล่น ใส่เป็นตัวเลขหรือ infinite ก็ได้
– START=FILEOPEN/MOUSEOVER โดย fileopen เป็นการกำหนด ให้เริ่มเล่นทันที
ที่ไล์วีดีโอโหลดเสร็จ (ปกติแล้ววีดิโอจะถูกเล่น ทันทีที่ดาวน์โหลดเสร็จ
ดังนั้น –STRAT=FILEOPEN จึงไม่ต้องใส่ก็ได้) mouseover เป็นการกำหนด ให้เล่น
วีดิโอ เมื่อเอาเมาส์ไปวางบนวีดีโอนั้น ๆ
ตัวอย่าง

<IMG DYNSRC=”SPORT.AVI” SRC=PICTURE.GIF ALT=”ทดสอบการ
ใช้ไฟล์วีดีโอ(IE)” LOOP=”2″>
การแทรกไฟล์ Flash 
   วิธีการแทรกไฟล์เฟลชนั้นจะใช้คำสั่งแบบเดียวกับการแทรกไฟล์เสียง โดยการใช้คำ
สั่ง ไฟล์เฟลชส่วนใหญ่จะเป็นไฟล์ในลักษณะของเกมส์จะมีนามสกุลไฟล์เป็น .SWF
ตัวอย่าง
   
<noembed><img src=”nosupport.gif” ></noembed></embed>
การใส่รูปภาพลงในเว็บเพจ
ก่อนนำรูปภาพมาใส่ในเว็บเพจ ควรเตรียมไฟล์รูปภาพที่จะใช้ก่อนโดยนาไฟล์รูปภาพที่
เตรียมไว้ มารวมไว้ในโฟลเดอร์ที่เก็บรูปภาพเพื่อความสะดวกในการใช้งาน เช่นนารูปภาพ
มาไว้ในโฟลเดอร์ images ซึ่งอยู่ในไซต์ MySite
1. คลิกวางเคอร์เซอร์ตรงตำแหน่งที่ต้องการวางรูปภาพ
2. คลิกที่เมนู Insert แล้วเลือก Image
3. หรือ คลิกที่แถบ Insert ให้เลือก Common
4. คลิกแล้วเลือก Image


https://sites.google.com/site/dreamweavercs6byjatuporn/_/rsrc/1538122858094/kar-si-rupphaph-lng-ni-webphec/Picture2.png

5. เลือกโฟลเดอร์ที่เก็บรูปภาพ
6. เลือกรูปภาพ ซึ่งจะแสดงภาพตัวอย่างด้านขวามือ
7. คลิกปุ่ม OK 
https://sites.google.com/site/dreamweavercs6byjatuporn/_/rsrc/1538122858094/kar-si-rupphaph-lng-ni-webphec/Picture3.png?height=319&width=400

8. ใส่คำอธิบายรูปภาพ (ไม่ใส่ก็ได้)
9. คลิกปุ่ม OK
10. รูปภาพที่เลือกจะถูกนำมาแสดงในเว็บเพจ และจัดเก็บไฟล์รูปภาพในโฟลเดอร์
ที่ใช้ในเว็บไซต์ ดังรูป
https://sites.google.com/site/dreamweavercs6byjatuporn/_/rsrc/1538122858094/kar-si-rupphaph-lng-ni-webphec/Picture4.png?height=219&width=400

https://sites.google.com/site/dreamweavercs6byjatuporn/_/rsrc/1538122858094/kar-si-rupphaph-lng-ni-webphec/Picture5.png?height=240&width=400

พื้นหลังของเว็บที่ดี จะช่วยส่งเสริมให้เว็บของเราดูดีมากขึ้น และทำให้การอ่านเนื้อหา
ในเว็บทำได้ง่ายยิ่งขึ้น แต่ถ้าเราเลือกสีพื้นหลังไม่ดี หรือไม่เข้ากับสีของตัวอักษรก็จะให้
เกิดอุปสรรคในการอ่านเนื้อหาทันที เช่นการใช้ตัวอักษรโทนสีสว่าง พร้อมกับภาพพื้นหลัง
โทนสว่าง หรือใช้ภาพที่มีลวดลาดมากจนยุ่งเหยิง
   ภาพพื้นหลังนั้นเรานิยมใช้ภาพขนาดเล็ก นำมาเรียงต่อกันจนเต็มเว็บเพจ เพื่อความ
รวดเร็ว|ในการแสดงผลเว็บเพจด้วย ดังตัวอย่างพื้นหลังด้านล่าง

รูปที่ใช้ทำพื้นหลัง
https://www.hellomyweb.com/media/uploads/legacy/57/1.gif

เว็บเพจที่ใส่พื้นหลังเรียบร้อยแล้ว
https://www.hellomyweb.com/media/uploads/legacy/57/3.gif
ใส่ภาพพื้นหลัง ให้เว็บเพจ
1. เปิดหน้าเว็บเพจที่ต้องการปรับแต่ง
2. ไปที่ Menu เลือก Modify > Page Properties
3. จะมีหน้าต่างขึ้นมาดังรูปด้านล่าง
4. ที่ categoty ทางซ้ายมือเลือก appearance จะมีหน้าจอให้ปรับดังรูป
https://www.hellomyweb.com/media/uploads/legacy/57/2.gif
5. Background image ใช้กำหนดภาพพื้นหลังของเว็บเพจ โดยคลิกที่ Browse จะมีหน้า
ต่างให้เลือกภาพที่จะใช้แสดงเป็นพื้นหลัง
6. Repeat ใช้กำหนดการแสดงผลของภาพพื้นหลัง โดยมีคำสั่งดังนี้
1.no-repeat ให้แสดงผลภาพพื้นหลังเพียงครั้งเดียว
2.repeat ให้แสดงผลภาพพื้นหลังซ้ำกันหลายๆครั้งจะเต็มพื้นที่เว็บเพจ
3.repeat-x ให้แสดงผลภาพพื้นหลังซ้ำกันเฉพาะในแนวนอนเท่านั้น
4.repeat-y ให้แสดงผลภาพพื้นหลังซ้ำกันเฉพาะในตั้งนอนเท่านั้น
ถ้าไม่กำหนดในหัวข้อ Repeat ภาพพื้นหลังจะแสดงผลเต็มพื้นที่เว็บเพจอัตโนมัติ

องค์ประกอบของการเชื่อมโยง
การเชื่อมโยงหรือไฮเปอร์ลิงค์ (Hyperlink) หรือเรียกสั้น ๆ ว่า ลิงค์ (Link) คือ การเชื่อม
โยงกันระหว่างเว็บเพจ จากหน้าหนึ่งไปยังอีกหน้าหนึ่ง หรือจากจุดหนึ่งภายในหน้า
เดียวกัน การเชื่อมโยงมีองค์ประกอบอยู่ 2 ส่วนด้วยกัน คือ ต้นทาง และปลายทาง
ดังนี้
1. ต้นทาง
         ต้นทาง คือ ออบเจ็ค (Object) ใด ๆ บนเว็บเพจที่เป็นจุดเชื่อมโยง ซึ่งเมื่อผู้ชมเว็บ
คลิกเมาส์จะทำให้เอกสารหรือข้อมูลปลายทางถูกเรียกขึ้นมาแสดง ต้นทางนี้อาจจะเป็น
ข้อความ ภาพกราฟิก หรือออบเจ็คชนิดอื่นก็ได้
2. ปลายทาง
         ปลายทางอาจจะเป็นไฟล์เอกสารหรือแหล่งข้อมูลใด ๆ บนอินเทอร์เน็ต โดยแบ่งเป็น
ประเภทหลัก ๆ ดังนี้
                1. เว็บเพจหรือเว็บไซต์ ส่วนมากแล้วลิงค์บนเว็บเพจจะใช้สาหรับเปิดไปยัง
เว็บเพจอื่นภายในเว็บไซต์เดียวกันหรือเปิดไปยังเว็บไซต์อื่น ซึ่งถ้าหากไม่ระบุชื่อไฟล์ก็
จะเป็นการเปิดโฮมเพจของเว็บไซต์นั้น
                2. ตำแหน่งเฉพาะบนเว็บเพจ (Named Anchor) เป็นการสั่งให้บราวเซอร์เปิดเว็บ
เพจพร้อมทั้งเลื่อนไปยังตำแหน่งที่ระบุทันที (ตามปกติบราวเซอร์จะเริ่มแสดงเว็บเพจที่
ตำแหน่งบนสุด)
                3. คำสั่งให้ส่งอีเมล (Email Link) เป็นการสั่งให้เปิดโปรแกรมอีเมลดีฟอลต์บน
เครื่องของผู้ชม  เช่น Windows Mail หรือ Outlook Express เพื่อเตรียมเขียนข้อความและ
ส่งอีเมล
                4. โปรแกรมที่ทำงานบนเซิร์ฟเวอร์ (Server-side Script หรือ Web Application
 เพื่อใช้สร้างเว็บเพจที่มีการเปลี่ยนแปลงเนื้อหาตามเงื่อนไข หรือเพื่อสืบค้นข้อมูลจากฐาน
ข้อมูลเป็นต้น
                5. คำสั่งรันโปรแกรม JavaScript หรือ VBScript เพื่อให้ทำงานบางอย่าง เช่น
สร้างการโต้ตอบบนเว็บเพจ เปิดลิงค์เป็นวินโดว์ใหม่แบบปฺอปอัพและปิดวินโดว์
บราวเซอร์
                6. ไฟล์ประเภทต่างๆ วิธีทำงานของบราวเซอร์จะขึ้นกับประเภทของไฟล์นั้น
เช่น มัลติมีเดียบางชนิดบราวเซอร์อาจจะเล่นได้เองหากเป็นไฟล์ที่บราวเซอร์ไม่รู้จักแต่
เครื่องของผู้ที่มีโปรแกรมเสริมที่เกี่ยวข้องติดตั้งอยู่โปรแกรม
นั้นก็จะถูกเรียกขึ้นมาแสดง และหากเป็นไฟล์อื่นบราวเซอร์ จะให้เลือกดาวน์โหลดหรือ
เปิดด้วยโปรแกรมดีฟอลต์สำหรับไฟล์ประเภทนั้น
การเชื่อมโยง (Link)
1. การเชื่อมโยง (Links) 
      การเชื่อมโยง  (Links)  เป็นการกำหนดตำแหน่งต้นทางและปลายทางไว้เพื่อให้ผู้
ใช้สามารถกระโดดข้ามไปยังส่วนที่เลือกไว้ซึ่งเป็นการ Links ภายในเว็บเพจ 
และในอินเตอร์เน็ตเข้าด้วยกัน เป็นสิ่งที่ทำให้เว็บเพจมีความ แตกต่างจากเอกสาร
ธรรมดา เพราะมันทำให้ผู้ใช้ไม่ต้องเปิดดูตั้งแต่หน้าแรกแต่สามารถคลิกเมาส์ 
เปิดดูเฉพาะหน้าเว็บเพจที่สนใจได้ สำหรับในบทนี้เราจะกล่าวถึงการเชื่อมโยงข้อมูล
ในเว็บเพจเข้า ด้วยกัน
2.  การเชื่อมโยงแบบต่าง ๆ 
      การเชื่อมโยงบนเว็บเพจมีด้วยกันหลายรูปแบบ อาจแบ่งตามการใช้งาน หรือตาม
ลักษณะของการเชื่อมโยงก็ได้ ถ้าแบ่งตามลักษณะการเชื่อมโยงจะแบ่งการเชื่อมโยง
ออกเป็น 2 ประเภทคือ การเชื่อมโยงภายในเว็บเพจ และการเชื่อมโยงภายนอกเว็บเพจ
แต่ถ้าแบ่งตามวัตถุประสงค์
ของรูปแบบการใช้งานจะแบ่งการเชื่อมโยงบนเว็บเพจ ออกเป็นประเภทต่าง ๆ
ดังต่อไปนี้ 
       1. การเชื่อมโยงภายในเว็บเพจหน้าเดียวกัน
       2. การเชื่อมโยงภายในเว็บเพจเดียวกัน
       3. การเชื่อมโยงไปยังเว็บไซต์อื่น
       4. การเชื่อมโยงด้วยอีเมล์
       5. การเชื่อมโยงด้วย Map Link
3.  กำหนดลักษณะของเพจใหม่ที่เชื่อมโยง 
      เมื่อมีการ Click ที่ Link เราสามารถกำหนดการเปิดหน้าเว็บที่เชื่อมโยงได้ เช่น
ให้แสดงหน้าเว็บที่เชื่อมโยงในหน้าต่างบราวเซอร์ใหม่ หรือให้แสดงแทนหน้าเพจ
เดิม โดยกำหนด
ได้จากส่วนของ Target ที่แถบ Properties หรือเลือกได้จากเมนู Modify > Link Target
ดังนี้

รูปแบบ

ลักษณะที่ปรากฎ

_blank

ให้เปิดเพจที่เชื่อมโยงในหน้าต่างบราวเซอร์ใหม่อีกหน้าต่าง

_parent

ให้เปิดเพจที่เชื่อมโยงในหน้าต่างบราวเซอร์เดิม

_self

ให้เปิดเพจที่เชื่อมโยงในเฟรมเดิม

_top

ให้เปิดเพจที่เชื่อมโยง ในหน้าต่างบราวเซอร์เดิม โดยจัดให้เต็มเฟรม















การเชื่อมโยงในหน้าเว็บเพจเดียวกัน 
        การเชื่อมโยงภายในเว็บเพจหน้าเดียวกัน เหมาะสำหรับเว็บเพจนั้น ๆ มีขนาด
ข้อมูลยาวมาก เวลาดูข้อมูลต้องใช้เมาส์คลิกเลื่อนแถบ Scrollbar เราสามารถกำหนดจุด
ลิงค์ได้ โดยคลิกที่ข้อความข้างบน แล้วกระโดดไปหาข้อมูลที่อยู่ด้านล่าง หรือส่วนใด
ส่วนหนึ่งของเว็บได้ ดังตัวอย่าง เราจะใช้ข้อความเป็นตัวลิงค์  โดยเมื่อเราคลิกที่
คำว่า "การจัดตำแหน่งของรูปภาพ" ก็จะกระโดดไปที่ข้อมูลเรื่อง "การจัดตำแหน่งของ
รูปภาพ