ebook5

หน่วยที่ 5.การตกแต่งเวบ็ ไซตด์ ้วยมลั ติมเี ดยี

หน่วยท่ี 5. การตกแตง่ เว็บไซต์ดว้ ยมลั ติมเี ดีย 5.1 การแทรกรูปภาพให้เว็บไซตเ์ ว็บไซต์ลกั ษณะของมลั ตมิ ีเดยี บนเว็บไซต์ การใช้มลั ติมเี ดยี ตอ้ งใช้เทคโนโลยสี าคัญ ได้แก่ swf, Fla, Applet, Shockwave และ Pluginซ่ึงปจั จบุ ันได้กลายเป็นมาตรฐานสาหรบั สรา้ งเวบ็ ไซตท์ วั่ ไป SWF เปน็ ไฟลภ์ าพเคลื่อนไหวทเี่ กดิ จากโปรแกรม Flash และ Shockwave เปน็ ไฟล์ที่ไมส่ ามารถแก้ไขไดด้ ว้ ยโปรแกรม Flash ขนาดไฟล์คอ่ นขา้ งเลก็ เพราะเปน็ ภาพแบบ Vector - Based ใชล้ ายแสน้ สรา้ งภาพ มนี ามสกลุ ไฟล์แบบ .swf โดยผใู้ ชต้ อ้ งตดิ ตั้งโปรแกรม Flash Player กบั เวบ็ เบราวเ์ ซอร์กอ่ นจงึ จะใชงานได้ Flash Paper เป็นไฟลเ์ อกสารทสี่ ร้างดว้ ยโปรแกรม Flash Player ซ่ึงมีนามสกลุ ไฟล์ .swfสามารถนาไฟลเ์ อกสารใดๆ เชน่ word , excel ฯลฯ มาแปลงเปน็ ไฟล์ .swf แล้วนาไปวางบนเวบ็ ไซต์ สามาระเปิดอา่ นเอกสารดว้ ยโปรแกรม Flash Player Flv เป็นไฟลท์ ่ีใชอ้ ยา่ งแพรห่ ลายบนเว็บไซตท์ ใี่ หบ้ รกิ ารวีดิโอผ่านเวบ็ ไซต์ ซงึ่ FLV คือไฟล์วีดโิ อท่ีสรา้ งจากโปรแกรม Adobe Flash เปน็ ไฟล์ทมี่ ขี นาดเล็ก แตค่ ณุ ภาพท่ดี กี ว่าไฟล์ 3gp สามารถเปดิ ดไู ดจ้ ากโปรแกรม Adobe Flash หรือ Quick Time จากแอปเปลิ กไ็ ด้ ทาให้หลายเวบ็ นยิ มแปลงไฟลใ์ หเ้ ป็น Flv เพอ่ืง่ายตอ่ การชมผ่านเว็บไซต์ โดดยเษพาะเกมคอมพิวเตอรท์ ั่วไป และการเผยแพรผ่ ่าน Youtube ก็ใช้ไฟล์ flvเป็นหลกั Shockwave เกดิ จากการแปลงไฟลจ์ ากโปรแกรม Macromedia Director และ Authorwareเพ่ือให้ไหลม์ ีขนาดเลก็ ลงเหมาะกบั การแสดงบนเว็บไซต์ โดยโปรแกรม Director เหมาะกบั การสร้างเกม และงานมลั ตมิ เี ดยี พรีเซนเตชนั สว่ นโปรแกรม Authorware เหมาะสาหรบั สร้งงานมัลตมิ เี ดียชว่ ยสอน หรอื CAI เม่ือแปลงเปน็ ไฟล์ Shockwave แลว้ จะตอ้ งติดตัง้ โปรแกรม Shockwave Player กับเวบ็เบราวเ์ ซอร์ก่อนจึงจะใช้งานได้ Flash เปน็ โปรแกรมทมี่ ีความสามารถในการสรา้ งภาพน่ิง ภาพเคล่อื นไหว ไฟลว์ ดิ โี อ ฯลฯ ซง่ึสามารถนาผลงานทส่ี รา้ งไวเ้ ขา้ มาประกอบบนหนา้ เวบ็ ไซต์ได้ อีกทัง้ โปรแกรม Dreamweaver ยงั ไดเ้ ตรยี มSpry ซึง่ เป็นป่มุ เครอื่ งมือพเิ ศษท่จี ะช่วยใหก้ ารนาเสนอข้อมลู เปน็ ไปด้วยความสวยงามและสะดวกรวดเร็วมากยิ่งข้ึน โดยสามารถนาเสนอขอ้ มูลผ่านเมนู แท็บ แถบเล่อื น พาเนล ฯลฯ ได้ภายในหน้าเวบ็ ไซตเ์ ดียว ซึง่ มีวธิ ีการดงั น้ี

การแทรกรปู ภาพให้เว็บไซต์ขน้ั ตอนท่ี 1 เปดิ โปรแกรม Adobe Dreamweaver ขึ้นมาสร้างตารางตามทตี่ อ้ งการ รปู ท่ี 5.1 แสดงหน้าสร้างตาราง (ทม่ี า : นางวาสนา สุขใจ ,2559)ข้ันตอนท่ี 2 นาภาพที่ตอ้ งการมาใสใ่ นตาราง รปู ที่ 5.2 แสดงหน้านาภาพทตี่ อ้ งการมาใสใ่ นตาราง (ทมี่ า : นางวาสนา สขุ ใจ ,2559)

5.2 การปรับแตง่ คุณสมบัตขิ องภาพเดียวกนั เวบ็ ไซต์เครอ่ื งมอื ท่ีใช้ปรับแต่งภาพของ Dreamweaverเครอื่ งมือใหม่ของ Dreamwerver ทีเ่ กีย่ วกบั การจัดการรูปนัน้ ไดเ้ พิ่มขึ้นมากมาก เช่น ปรับขนาดภาพ , ปรบั ความคมชดั ของภาพ , ปรบั แสง และเครอื่ งมือที่ใช้ในการบบี อัดไฟลร์ ูป ซง่ึ ทาใหเ้ ราสามารถจัดการกบั รูปได้ ง่ายยง่ิ ขนึ้ และเสียเวลานอ้ ยลงอยา่ งมาก เครอื่ งมือทใ่ี ช้จดั การกับรูปจะอยทู่ ี่ Property inspector โดยจะแสดงเมอ่ื เราคลกิ ทร่ี ูปภาพ ดังตวั อยา่ ง ด้านลา่ ง รูปท่ี 5. 3 เครอ่ื งมือทีใ่ ช้ปรับแตง่ ภาพของ Dreamweaver(ที่มา : http://www.hellomyweb.com/index.php/main/content/56,2559)เครือ่ งมอื ท่ใี ช้ในการตัดภาพ เครอื่ งมอื นใ้ี ชใ้ นการตัดภาพเอาเฉพาะสว่ นที่เราต้องการเทา่ น้ัน โดยวธิ ีการดังรายละเอยี ดด้านลา่ งการแก้ไขไฟลร์ ูปของ Dreamwer จะแกไ้ ขท่ไี ฟลต์ น้ ฉบับ ถ้าเราไม่ต้องการให้แกไ้ ขไฟล์ตน้ ฉบบั ก็ให้ copy ไฟล์นน้ั และใช้ไฟลท์ ี่ copy มาแทน จะเป็นทางเลอื กทดี่ ีกว่าเพราะป้องกันความผดิ พลาดหรอื อาจตอ้ งการใชไ้ ฟล์นัน้ อีกครัง้ 1.เลือกรปู ที่ตอ้ งการตัด 2.ไปที่ Property inspector เลอื กเคร่อื งมอื ทใ่ี ช้ตดั 3.เมื่อเลอื กเครื่องมอื ท่ีใชต้ ดั แล้วจะมหี น้าต่างคาเตอื นข้นึ มาวา่ การแกไ้ ขไฟล์จะทาทไี่ ฟล์ ตน้ ฉบบั ใหเ้ ราคลิก OK 4.เมื่อคลกิ OK ก็จะมกี ล่องขนึ้ มาในรปู เราสามารถเลอื กปรับขนาดพื้นท่ี ของรปู ทเี่ ราตอ้ งการใหอ้ ยู่ในกลอ่ งนั้น

5.เมอ่ื ปรับขนาดเสรจ็ แลว้ ให้ ดับเบลิ คลกิ ในกล่องการตดั ภาพก็จะเสรจ็ สมบรูณ์ รปู ที่ 5. 4 เคร่ืองมอื ท่ใี ช้ในการตัดภาพ (ท่มี า : http://www.hellomyweb.com/index.php/main/content/56,2559)ตัวอย่างขน้ั ตอนการปรบั แต่งคณุ สมบัติของภาพขัน้ ตอนท่ี 1 แทรกรปู ที่ต้องการ รปู ท่ี 5.5 แสดงหนา้ แทรกรูปที่ตอ้ งการ (ทม่ี า : นางวาสนา สขุ ใจ ,2559)

ข้นั ตอนท่ี 2 กดคยี ์ Shift แลว้ คลิกลากแฮนเดลิ เพอื่ ปรับขนาดภาพ รปู ท่ี 5.6 แสดงหนา้ ปรับขนาดภาพ (ท่มี า : นางวาสนา สขุ ใจ ,2559) 5.3 การแทรกไฟล์มัลติมเี ดยี การแทรกไฟลว์ ดิ โี อ และไฟลเ์ สยี งนั้นทาเหมอื นกัน แตส่ าคญั ตรงทีจ่ ะตอ้ งรดู้ ้วยว่าไฟลท์ ี่แทรกน้ันสามารถเปิดได้ด้วยโปรแกรมอะไร มิฉะนนั้ ไฟล์ทแี่ นบไปก็ไมแ่ สดงผลทเ่ี คร่ืองผรู้ บั เนอ่ื งจากไมม่ โี ปรแกรมที่สามารถเปิดได้ขัน้ ตอนท่ี 1 คลกิ แทบ็ Media ในหนา้ ต่าง Insert รปู ที่ 5.7 แสดงหนา้ การแทรกไฟลม์ ลั ติมีเดยี (ท่มี า : นางวาสนา สุขใจ ,2559)

ขน้ั ตอนที่ 2 เลอื กวดี โี อท่ตี อ้ งการแทรก รูปที่ 5.8 แสดงหน้าการแทรกไฟล์วีดโี อ (ท่ีมา : นางวาสนา สุขใจ ,2559)ข้ันตอนท่ี 3 คลิกโอเค จะมหี นา้ ต่างดงั ภาพ รูปท่ี 5.9 แสดงหนา้ ไอคอน (ท่ีมา : นางวาสนา สุขใจ ,2559) การแทรกไฟล์วดิ ีโอ หรอื เสยี ง ในเวบ็ ไซต์นัน้ ถา้ ไมใ่ ชไ่ ฟล์ flash(flv) โปรแกรม Dreamweaver จะไม่รู้ขนาดทใ่ี ชใ้ นการแสดง ทาใหเ้ ราจะต้องกาหนดขนาดทเ่ี ราตอ้ งการใหแ้ สดงเอง ตามวธิ ดี ังน้ี รปู ท่ี 5.10 แสดงหนา้ ตา่ งการปรบั ขนาดท่ใี ชใ้ นการแสดง (ท่มี า : นางวาสนา สขุ ใจ ,2559)

5.4 การสรา้ งเอฟเฟกตส์ ลบั ภาพเมือ่ ชเ้ี มาส์เว็บไซต์ Rollover Image เปน็ การสร้างเอฟเฟค็ ตใ์ ห้กบั รปู ภาพคือลกั ษณะของการสลบั รปู ภาพเมอื่ นาเมาส์ไปชี้ทีร่ ูปภาพนัน้ ๆ จะเปลีย่ นจากรูปหนึ่งเปน็ อีกรปู หนึ่งทันทีโดยไม่ตอ้ งใชโ้ ค้ด Java Script อกี ท้ังยงั สามารถใช้ Rollover เป็นจดุ เชื่อมโยงไดอ้ กี ด้วย แตก่ อ่ นทจี่ ะแทรกรปู ภาพแบบ Rollover Image นน้ั จะต้องมีการเตรียมรูปภาพไว้ 2 รูปและมขี นาดท่เี ท่ากันเพอื่ ความสวยงามในขณะเปล่ยี นรปู ภาพ สาหรับการแทรกรปู ภาพแบบ Rollover Image มวี ิธีการดงั นี้ 1. คลกิ เมาสเ์ ลอื กตาแหน่งทต่ี ้องการวางรปู ภาพ 2. คลกิ เลอื กเครอื่ งมือ Rollover Image ซึง่ อยบู่ น Insert bar อยู่ในกล่มุ Common จะปรากฏหน้าต่าง Insert Rollover Image ขน้ึ มา 3. ใหท้ าการกาหนดตวั เลือกตามที่ตอ้ งการ - Image name เป็นการตง้ั ชอ่ื ให้กบั รปู ภาพ (ถา้ ไมต่ ัง้ ชือ่ โปรแกรมจะมีใหแ้ ล้ว) - Original image กาหนดภาพแรกเปน็ ภาพแรกเม่อื แสดงผล โดยการกดปมุ่ Browse.. - Rollover image กาหนดภาพทสี่ องซ่งึ เปน็ ภาพทแี่ สดงผลเมอื่ นาเมาส์ไปช้ีบริเวณรปู ภาพ โดยการกดปมุ่ Browse.. - Preload rollover image เป็นการกาหนดใหร้ ูปภาพทสี่ องโหลดไว้ล่วงหนา้ (ควรจะต้องเลอื กไว้) - Alternate text เปน็ การใสข่ อ้ ความอธบิ ายรปู ภาพทแ่ี ทรกมา - When clicked, Go to URL เป็นการกาหนดจุดเชอ่ื มโยงใหก้ บั รปู ภาพ(ในกรณีทต่ี อ้ งการให้รปู ภาพเป็นจุดเชือ่ มโยง) ทาโดบคลิกปุม่ Browse.. เลือกเวบ็ เพจที่ต้องการหรอื ทาการพมิ พ์ URL ทต่ี อ้ งการ 4. เม่ือกาหนดตัวเลอื กทีต่ อ้ งการเรยี บรอ้ ยแลว้ กดป่มุ OK จะได้ผลลัพธด์ ังรปู รปู ท่ี 5.11 แสดงหน้าตา่ งการสรา้ งเอฟเฟกตส์ ลบั ภาพเมอื่ ชเี้ มาส์ (ท่ีมา : นางวาสนา สุขใจ ,2559)

ผลลพั ธ์จากการแสดงบนโปรแกรมเวบ็ บราวเซอร์ เม่อื นาเมาส์ไปช้ีทรี่ ปู ภาพ รูปท่ี 5.12 ผลลัพธจ์ ากการแสดงบนโปรแกรมเว็บบราวเซอร์ เม่อื นาเมาสไ์ ปช้ี (ที่มา : นางวาสนา สขุ ใจ ,2559)