บทท่ี 1 ลูกเลนใน Dreamweaver 8 ลูกเลนที่นาสนใจอยางเชน การที่นําเมาสไปวางบนปุมก็มีเมนูเล่ือนลงมา หรือวางเมาสบนรูปนี้แตรูปอ่ืนมีการเปลี่ยนแปลง หรือมีหนาตาง Pop-up แสดงขอความที่นาสนใจเมือ่คลิก ลูกเลนเหลานี้สามารถสรางขึ้นในเว็บเพจของเราเองไดโดยใชคณุสมบัติของ Dreamweaver 8 หรือ Behavior Behavior คืออะไร Behavior พูดงายๆก็คือ javaScript สําเร็จรูปที่ Dreamweaver 8 สรางไวใหสามารถนําไปใชไดเลยโดยทีไ่มตองเขียนคําส่ังเอง ซ่ึง Behavior จะประกอบไปดวย Event และ Action จึงจะทํางานได ซ่ึงทั้ง2สวนนีม้ีความหมายดงันี้

- Event หรือ Behavior (เกิดขึ้นเมื่อไร) หมายถึง เหตุการณหรือลูกเลนที่เราสรางนั้นตองการใหเกิดขึ้นเมื่อไร

- Action ( เกดิอะไร ) หมายถึง ผลที่ตองการใหเกิดขึ้นเมื่อมี Event กําหนดไว เม่ือทํา ผลลัพธท่ีเกิดขึ้น ตัวอยาง Event ตัวอยาง Action คลิกเมาส หนาตางใหมเปดขึ้นมาทันท ีนําเมาสไปวางบนปุม เมนูแบบ Pop-up เล่ือนลงมา นําเมาสออกจากปุม รูปบางบริเวณในเว็บเพจมีการเปลี่ยนแปลง เปดเขามาในโฮมเพจ หนาตาง Pop-up แสดงโปรโมชันหรือโฆษณาขึ้นมา การจะเลือกใช Behavior ใดนั้นเราตองกําหนดกอนวา Event หรือเหตกุารณเปนอยางไรจึงจะเกิด Action ที่ตองการขึ้น เชน เราจะสราง Behavior ใหเกิด Action นี้ก็อาจจะมีแค

1. เมื่อคลิกเมาส หรือ 2. เมื่อนําเมาสไปวางบนปุมใดปุมหนึง่ ใหเลือก Event ที่คิดวาเหมาะสมกับเว็บเพจของเรามากที่สุด

ลูกเลน Dream 8 โดย. จ.ส.อ.พงศกร บายเที่ยง สังกัด กสสท.ศทท.

การเปดพาเนล Behaviors กอนจะลงมือสราง Behaviors เราจะทําการเปดพาเนล Behaviorsขึ้นมากอนเพื่อเพิ่มความสะดวกมากยิ่งขึ้น โดยเปด พาเนล Behaviors ดังแสดงตอไปนี ้

1. คลิกเมนู Window > Behaviorsเพื่อเปดพาเนล Behaviors หรือจะกดปุม <Shift+F4> ก็ไดเชนกัน

ภาพประกอบที่ 1. 1

2. ทางดานขวาจะปรากฏพาแนล Behaviors เพิ่มขึ้นมา หนาตาดังภาพ

ภาพประกอบที่ 1. 2

ซ่ึงจะชวยใหเราสราง Behaviors ตางๆ รวมถึงกําหนด Event และ Action สะดวกมากขึ้น

2

การทําเมนู Pop-up คือเมนูที่เมื่อนาํเมาสไปวางแลวจะมีเมนูยอยปรากฏขึ้นมาขั้นตอนการทาํ Pop-up แสดงไดดังนี ้

1. คลิกเลือกจุดตนทางของเมนู Pop-up โดยจดุตนทางนี้อาจจะเปนรูปหรือลิงคขอความก็ไดแตจะตองเปนลิงคขอความเทานั้นถาเปนขอความธรรมดาไมสามารถนํามาเปนจุดตนทางของมนู Pop-up ได

2. คลิกปุม Show Popup Menu

ภาพประกอบที่ 1. 3

3. หลังจากนัน้หนาตาง Show Pop-up Menu จะปรากฏขึ้นมาดังภาพ

3

ภาพประกอบที่ 1. 4

4. Tap Content เปนการกําหนดขอมูลของเมนูยอย ใหพิมพช่ือเมนูและกําหนดการลิงคตามตองการ ถาตองการสรางเมนูเพิ่มใหคลิก เครื่องหมาย 5. Tab Appearance เปนการกําหนดรูปแบบของเมน ู

ภาพประกอบที่ 1. 5

กําหนดวาเมนจูะ Pop-up ในแนวนอน (Horizontal menu) หรือ แนวตั้ง (Vertical menu) กําหนดแบบอกัษร ขนาด และสีของเมนูโดย

Up state คือสีของขอความและสีพื้นเมือ่มีการเลือกเมนูปกต ิ Over state คือสีของขอความและสีพื้นเมือ่ช้ีเมาสที่เมนู

4

6. Tab Advanced เปนการกําหนดคาความกวางของกรอบ สี แสงเงา และเวลาในการแสดง (menu delay)

ภาพประกอบที่ 1. 6

7. Tab Position เปนการกําหนดตําแหนงของเมนูที่ตองการ Pop-up

ภาพประกอบที่ 1. 7

8. คลิกปุม OK 9. save ไฟลเว็บเพจแลวทดสอบผลของ Action บนหนาบราวเซอร

5

บทท่ี 2 เมนู Pop-up หลายชั้น เปนการทําในกรณีที่ตองการใหมีเมนยูอยลงไปอีก (มีเมนูยอยซอนอยูในเมนหูลัก) ทําไดดังนี ้1. คลิกเลือกจุดตนทางของเมนู Pop-up

2. คลิกปุม Show Popup Menu ดังภาพที่ 1

ภาพประกอบที่ 2. 1

3. คลิกเลือกรายการที่จะสรางเมนูยอย

ภาพประกอบที่ 2. 2

4. คลิกปุม เพื่อเพิ่มเมนูยอยลําดับแรกลงไป

6

5. พิมพช่ือเมนยูอยลงไปในชอง และพิมพเวบ็เพจปลายทางที่จะใหลิงคไป เมื่อคลิกเมนยูอยนี้ลงในชอง Link

ภาพประกอบที่ 2. 3

6. คลิกเมนูยอยทีส่รางขึ้น 7. คลิกปุม เพื่อใหเมนูนัน้กลายเปนเมนูยอยของเมนูที่อยูขางบน ดังภาพที่ 4

ภาพประกอบที่ 2. 4

จากตัวอยางนี้ การใช wireless -lan คือเมนูยอยของ สาระนารู 8. ถาตองการเพิ่มอีกใหคลิกปุม เพื่อสรางเมนูยอยลงไปเพิม่ตอทายเมนยูอยลําดับแรก

จนกวาจะครบตามที่ตองการ 9. คลิกปุม OK 10. save ไฟลเว็บเพจแลวทดสอบผล บนหนาบราวเซอรจะได ดังภาพที่ 5

ภาพประกอบที่ 2. 5

7

บทท่ี 3 แกไข Action ตามตองการ รายการของแตละ Behavior ที่สรางขึ้นจะประกอบดวย 2 คอลัมนคือ Action ทางซายมือสวนทางขวามอืจะแสดง Event ที่เกิดขึ้นเมือ่มีการทําตาม Action ที่กําหนด เมื่อเราสราง Behavior ใดๆก็ตาม โปรแกรม Dream จะเลือก Action ที่เหมาะกับ Event นั้นใหโดยอัตโนมัตแิตถาเราไมตองการ Action ที่โปรแกรมเลือกใหสามารถเปลี่ยนไดดังตอไปนี ้

1. คลิกเลือก Action ที่ตองการเปลี่ยน ทายชองของ Action จะปรากฏปุม ขึ้นมา

ภาพประกอบที่ 3. 1

2. คลิกเลือก Action ใหมที่ตองการ โปรแกรมจะแสดงเฉพาะ Action ที่สามารถกําหนดใหกับEvent นั้นได

ภาพประกอบที่ 3. 2

8

บทท่ี 4 สรางหนาตาง Pop-up หนาตาง Pop-up ก็คือหนาตางเล็กๆแสดงขอความ (สวนใหญเปนโฆษณาหรือโปรโมชัน) หนาตางนีจ้ะขึน้มาทันทีที่โฮมเพจเปดขึน้เมื่อเราเขาเว็บไซต เพื่อดึงความสนใจจากผูเขาชมเว็บไซต เราเองก็สามารถสรางหนาตาง Pop-up ไดเชนกนั ดังแสดงตามขั้นตอนตอไปนี้

1. สรางเว็บเพจตามขนาดของ Pop-up ตามที่เราตองการ โดยใชวิธีการสรางตารางใหญตามขนาดที่ตองการ เพื่อควบคุมรายละเอียดในเว็บเพจไมใหเกินขอบเขตทีก่ําหนดไวในที่นี้ตองการขนาด 510x241 เมื่อสรางเสร็จทําการบันทึกไวเปนเว็บเพจของหนาตาง Pop_up

ภาพประกอบที่ 4. 1

2. เปดเว็บเพจตนทาง หนาที่เราจะใหแสดงหนาตาง Pop-up ขึ้นมาทันทีที่เปดเว็บเพจหนานี้ ซ่ึงสวนใหญแลวจะใชหนาโฮมเพจหรือ index.html

3. คลิกแท็ก <body> ที่ Tag Selector มุมลางซายของพื้นทีส่รางงาน

9

4. คลิกปุม แลวเลือกคําส่ัง Open Browser Window เพื่อสรางหนาตาง Pop-up

เปดเว็บเพจตนทาง

ภาพประกอบที่ 4. 2

เลือกคําสั่ง คลิกแท็ก<body>

5. คลิกปุม Browse… และคลกิเลือกเว็บเพจตามที่ตองการ(เว็บเพจที่สรางขึ้นเพื่อนํามาทําเปน Pop-up) พิมพขนาดความกวางของPop-up ลงในชอง Window width ขนาดความสูงลงที่ชอง Window hight ขนาดที่ใสนัน้คือขนาดตามเว็บเพจที่สรางขึ้นเพื่อทําเปน Pop-up และคลิกปุม OK

ภาพประกอบที่ 4. 3

10

6. save ไฟลเว็บเพจแลวทดสอบผลบนหนาบราวเซอร จะไดดังภาพ

ภาพประกอบที่ 4. 4

11

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

1. คลิกปุมที่ตองการสรางหนาตางแสดงขอความ

2. คลิกปุม เลือกคําส่ัง Pop-up Message ดังภาพที่ 1

ภาพประกอบที่ 5. 1

3. หลังจาเลือกคาํส่ัง Pop-up Message จะมหีนาตางแสดงขอความขึ้น ดงัภาพที่ 2

ภาพประกอบที่ 5. 2

พิมพขอความที่ตองการแสดงบนหนาตางลงในชอง Message และคลิกปุม OK

12

4. save ไฟลเว็บเพจแลวทดสอบผลบนหนาบราวเซอร จะไดดังภาพ

ภาพประกอบที่ 5. 3

13

บทท่ี 6 Rollover แบบเปลี่ยนปลายทาง Rollover แบบเปลี่ยนปลายทางนั้นคือเมื่อเรานําเมาสไปวางบนรูป ไมจําเปนที่รูปในตําแหนงนั้นจะตองเปลี่ยน แตอาจจะกําหนดใหรูปในตําแหนงอ่ืนเกิดการเปลี่ยนแปลงแทนหรือเกิดการเปลี่ยนแปลงมากกวา1รูป 1 ตําแหนงกไ็ดเชนกัน ในการสราง Rollover image แบบเปลี่ยนปลายทาง ทําไดดังนี ้

คลิกรูป

พิมพช่ือรูป

1. ตองทําการตั้งชื่อรูปทุกรูปที่มีผลในการทํา Rollover image คร้ังนี้ทําโดย คลิกรูปที่จะตัง้ชื่อ และพิมพช่ือรูปในหนาตาง Properties Inspector ดังภาพที่ 1

ภาพประกอบที่ 6. 1

2. เมื่อตั้งชื่อรูปที่เกี่ยวของ ครบทุกรูปแลว คลิกที่รูปตนทางที่จะทําใหเกดิการเปลี่ยนแปลง

เมื่อนําเมาสไปวางบนรูปนัน้

14

3. คลิกปุม และเลือกคําส่ัง Swap Image

ภาพประกอบที่ 6. 2

4. หนาตาง Swap Image จะปรากฎขึ้น โดยในชอง Images จะแสดงชื่อรูปทั้งหมดที่อยูในเว็บเพจหนานั้น ใหคลิกชื่อรูปปลายทางที่จะเปลี่ยนแปลงเมือ่นําเมาสไปวางบนรูปตนทางและคลิกปุม Browse… และเลือกรูปที่ตองการใหเปนผลลัพธปลายทางเมื่อนําเมาสไปวางบนรูปตนทาง และจะไดดังภาพ ภาพปลายทางหลังเลือกภาพที่ตองการใหเปนผลลัพธแลวที่ช่ือของภาพปลายทางนั้นจะมี เครื่องหมาย * ขึ้นอยู ดังภาพที่ 3

ภาพประกอบที่ 6. 3

15

5. จากนั้นคลิกปุม OK ( ถาตองการใหตําแหนงอ่ืนเกดิการเปลี่ยนแปลงเพิม่อีก ก็ทําตามขั้นตอนในขอ 4 จนกวาจะครบทุกรูปตามที่ตองการ และคลิกปุม OK หลังจากที่ไดเลือกปลายทางที่จะใหเกิดการเปลีย่นแปลงครบแลว )

6. save ไฟลเว็บเพจแลวทดสอบผลบนหนาบราวเซอร จะไดดังภาพ * ภาพนี้เปนภาพที่แสดงกอนนําเมาสไปวางบนรปูตนทาง รูปตนทาง

ภาพประกอบที่ 6. 4

* ภาพแสดงหลังการนําเมาสมาวางบนรูปตนทาง (สังเกตรูปปลายทางจะเปลี่ยนไป)

รูปภาพที ่1

บทท่ี 7 ใสวันที่อัพเดตโดยอตัโนมตั ิ

16

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

1. วางเคอรเซอรตรงตําแหนงทีจ่ะแทรกวนัทีอั่พเดต 2. พิมพขอความ Last updated เพื่ออธิบายวาสวนนีเ้ปนการแสดงวันที่อัพเดตครั้งลาสุด

ของเว็บเพจ 3. คลิก Tab Common บนแถบ Insert Bar 4. คลิกปุม เพื่อแทรกวันที่อัพเดตลาสุดจะมหีนาตาง แสดงขึ้นมาดังภาพ

ภาพประกอบที่ 7. 1

- คลิกเลือกรูปแบบการแสดงชื่อวัน ในชอง Day format ในที่นี้จะเลือกใหแสดงเปนตัวยอ

- คลิกเลือกรูปแบบการแสดงวันที่ เดือน ป ในชอง Date format - คลิกชอง Update automatically on save เพือ่ใหมีการเปลีย่นแปลงวันทีแ่ละเวลาทุก

คร้ังที่มีการบันทึกเพจหนานี้ (ถาตองการแสดงเวลาที่อัพเดตลาสุดดวย ใหเลือกรูปแบบการแสดงผลของเวลาที่ชอง Time format )

5. คลิกปุม OK และปรับแตงรูปแบบฟอนตและสีของขอความแสดงการอัพเดตตามตองการ

6. save ไฟลเว็บเพจแลวทดสอบผลบนหนาบราวเซอร จะไดดังภาพ

17

ภาพประกอบที่ 7. 2

บทท่ี 8 เพิ่มสีสันดวยการใสเสียง

18

การเพิ่มเสียงในเว็บไซตจะชวยสรางความบันเทิงใหกับผูที่เขามาเยี่ยมชมไดมากขึ้น สําหรับไฟลเสียงที่สามารถนําเขามาใสในเว็บเพจไดนัน้มีดังตัวอยางตอไปนี ้

1. .midi หรือ .mid เปนรูปแบบไฟลที่ใหคณุภาพเสียงดีมาก สามารถแสดงเสียงไดบนบราวเซอรสวนใหญโดยไมตองใชโปรแกรมเสริม และมีขนาดไฟลเล็ก

2. .wav เปนรูปแบบไฟลที่ใหคณุภาพเสียงดี สามารถแสดงเสียงไดบนบราวเซอรสวนใหญโดยไมตองใชโปรแกรมเสริมเชนกัน แตขนาดไฟลคอนขางใหญ

3. .aif เปนรูปแบบไฟลที่มีคุณสมบัติเหมือนกับ .wav แตเปนไฟลเสียงที่ใชกับระบบปฏิบัติการ Macintosh จึงตองใช Plug-in เพิ่มเติมในการแสดงเสยีง

4. .mp3 เปนรูปแบบไฟลเสียงทีเ่กิดจากการบบีอัดเพื่อใหขนาดไฟลเล็กลง คุณภาพเสียงดีมาก ในการแสดงเสียงที่เครื่องของผูชมตองติดตั้งโปรแกรมสําหรับเลนเสียงดวย

5. .ra,.ram,.rpm หรือ Real Audio เปนรูปแบบไฟลที่มีคุณสมบัติคลายกับ .mp3 แตมีขนาดเล็กกวา ในการแสดงเสียงที่เครื่องของผูชมตองติดตั้งโปรแกรม RealPlayer เอาไว

นอกจากการซอนหนาปดดังกลาวแลว เรายังสามารถกําหนดพารามิเตอรอ่ืนๆ เพิ่มลงไปได

อีก ดังแสดงตอไปนี ้

Parameter Value ความหมาย hidden True

false ซอนหนาปดควบคุมการเลนเสียง แสดงหนาปดควบคุมการเลนเสียง

loop True false

เลนเสียงวนไปเรื่อยๆ เลนเสียงแครอบเดียว

Volume ตัวเลข 0-100 กําหนดความดังของเสียง Playcount autostart

ตัวเลข True false

จํานวนรอบในการแสดงเสยีง แสดงเสียงอัตโนมัติทันทีที่เปดเว็บเพจขึ้นมา แสดงเสียงตามปกติ ไมอัตโนมัติ

วิธีแทรกเสียงลงในเว็บเพจ

19

วิธีแทรกเสียงลงในเว็บเพจแบบฝงไฟลเสียงไวในหนาเวบ็เพจ แสดงไดดังนี ้1. วางเคอรเซอรตรงตําแหนงทีต่องการวางหนาปดควบคุมการเลนเสียง 2. คลิก เพื่อแทรกไฟลเสียงลงในเว็บเพจหนาตาง Select File จะปรากฎขึน้มาใหเรา

เลือกไฟลเสียง

ภาพประกอบที่ 8. 1

3. คลิกเลือกไฟลเสียงที่ตองการ และคลิกปุม OK 4. เมื่อทําการแทรกไฟลเสียงแลวจะมีไอคอน Plug-in แสดงอยูตรงตําแหนงที่วางเคอรเซอร

ไว ซ่ึงไอคอนนี้ก็คือ ตําแหนงของหนาปดควบคุมการแสดงเสียง

ภาพประกอบที่ 8. 2

20

ซ่ึงขนาดเต็มของหนาปดคือ 280 x 42 พิกเซล แตขนาดของไอคอนนั้นจะเล็กกวาหนาปด เราจําตองทําการแกไขขนาดของไอคอนใหเทากับขนาดของหนาปดไดดังนี ้

5. คลิกไอคอนแสดงหนาปดควบคุมการแสดงผลดังรูป

ภาพประกอบที่ 8. 3

6. พิมพขนาดความกวางเปน 280 ที่ชอง W และความสูงเปน 42 ที่ชอง H

ภาพประกอบที่ 8. 4

7. save ไฟลเว็บเพจแลวทดสอบผลบนหนาบราวเซอร จะไดดังภาพ

ภาพประกอบที่ 8. 5

21

ซอนหนาปดควบคุมการแสดงเสียง ในกรณีที่ไมตองการใหหนาปดควบคุมการแสดงเสียงขึน้มาใหเราเห็นเราสามารกําหนดคา

เพื่อซอนหนาปดดังกลาวไดดังนี ้1. คลิกหนาปดควบคุมการแสดงเสียง จากนัน้ในหนาตาง Properties Inspector จะ

แสดงคุณสมบตัิขึ้นมาใหปรับแตงคา

ภาพประกอบที่ 8. 6

2. คลิกปุม จะแสดงหนาตางขึน้มาดังภาพ

ภาพประกอบที่ 8. 7

- พิมพคาพารามเิตอรเปน hidden ในชอง Parameter - กําหนดคาเปน true ในชอง Value เพื่อซอนหนาปดควบคุมการแสดงเสียง และคลิก

ปุม OK จากนัน้ save ไฟลเวบ็เพจแลวทดสอบผลบนหนาบราวเซอร จะไมมหีนาปดควบคุมการแสดงเสียงปรากฏขึ้นมาแตการแสดงเสียงเพลงจะเลนตามปกต ิ

22

บทท่ี 9 สรางปุม Flash งายๆ ดวย Dreamweaver 8 เราสามารถสรางปุม Flash ที่มีการเคลื่อนไหวตอบโตกับผูชมแทนปุมเรียบๆ ธรรมดา ไดโดยวิธีที่แสดงดังนี ้

1. วางเคอรเซอรตรงตําแนงที่จะสรางปุม flash

2. คลิกลูกศรขางปุม แลวคลิกเมนู Flash Buttonดังภาพที่ 1 จากนั้นจะมหีนาตาง Insert Flash Button จะปรากฎขึ้นมา ดังภาพที่ 2

ภาพประกอบที่ 9. 1

ภาพประกอบที่ 9. 2

23

- ใหคลิกเลือกรปูแบบของปุม จากชอง Style โดยในสวน Sample ทางดานบนจะแสดงรูปตวัอยางใหด ู

- พิมพคําที่จะใหแสดงบนปุม ในชอง Button text - คลิกเลือกฟอนต ที่จะใชแสดงคําบนปุมทีช่อง Font - กําหนดขนาดฟอนตที่แสดงบนปุม ที่ชอง Size - กําหนดเว็บเพจปลายทางที่จะใหลิงคไปเมือ่คลิกปุม ในชอง Link - คลิกเลือกสี Background ของปุม Bg color - ตั้งชื่อไฟลของปุม ที่ชอง Save as โดยช่ือปุมตองมีนามสกุล .swf และอยู

ภายในโฟลเดอรเดียวกับเว็บเพจ - คลิกปุม OK

3. หลังจากนัน้จะมีหนาตางสําหรับกําหนดคณุสมบัติเพิ่มเติมของปุมปรากฏขึ้นมาดังภาพ ใหคลิก cancel เพื่อปดหนาตาง

ภาพประกอบที่ 9. 3

4. คลิกปุม ในหนาตาง Properties Inspector เพื่อดูการแสดงผลของปุม

Flash

ภาพประกอบที่ 9. 4

24

5. ทดลองนําเมาสไปวางบนปุม เพื่อดูการเคลื่อนไหวตอบโตของปุม ถาหากตองการหยุดการแสดงผลของปุมใหคลิก < stop > ในหนาตาง Properties Inspector และ save ไฟลเว็บเพจแลวทดสอบผลบนหนาบราวเซอร จะไดดังภาพ

ภาพประกอบที่ 9. 5

วิธีแทรกไฟล Flash ลงในหนาเว็บเพจ ถาเราตองการนําไฟลที่สรางจากโปรแกรม Macromedia Flash ( แบนเนอรหรือลูกเลนอ่ืนๆ) มาแสดงบนเว็บเพจเราก็สามารถทําไดโดย วิธีดังนี้

1. วางเคอรเซอรตรงตําแหนงทีจ่ะแทรกไฟล Flash

2. คลิกลูกศรขางปุม แลวคลิกเมนู Flash 3. จากนั้นหนาตาง Select File จะปรากฎขึ้นมา ดังภาพที่ 1 ใหเราเลือกไฟล Flash ที่จะ

แทรกลงในเวบ็เพจ > คลิกเลือกโฟลเดอร ที่เก็บflash ไว > คลิกเลือก flash ที่จะแทรกลงเว็บเพจ > คลิกปุม OK

25

ภาพประกอบที่ 9. 6

4. จากนั้นคลิป Flash จะถูกแทรกลงในเว็บเพจ ใหคลิกปุม เพื่อทดสอบแสดงผลไฟล Flash ที่แทรกลงในเว็บเพจ

ภาพประกอบที่ 9. 7

26

ภาพประกอบที่ 9. 8

5. จากนั้น save ไฟลเว็บเพจแลวทดสอบผลบนหนาบราวเซอร ดังภาพที่ 4

ภาพประกอบที่ 9. 9

27

บทท่ี 10 ใสคลิปวิดีโอในหนาเว็บเพจ ไฟลวิดีโอท่ีสามารถแทรกลงในเว็บเพจมหีลายชนิด แตละชนิดกจ็ะมรูีปแบบเฉพาะแตกตางกันไปแลวแตคายที่ผลิต ดังแสดงตอไปนี ้

- .avi เปนรูปแบบไฟลวิดีโอของระบบปฏิบัติการ Windows - .mav เปนรูปแบบไฟลวิดีโอของระบบปฏิบัติการ Macintosh - .wmv เปนรูปแบบไฟลวดิีโอของระบบปฏิบัติการ Windows

ไฟลวิดีโอแตละชนิดจําเปนตองใชโปรแกรมหรือ Plug-in ในการเปดดแูตกตางกันไป ดังนั้นจึงตองแปลงไฟลวิดีโอใหเปน Flash Video หรือ ไฟล .flv กอน แลวจํานํามาแทรกในเว็บเพจเพราะเครื่องของผูชมสวนใหญในปจจุบนัมีการติดตั้งโปรแกรม Flash Media Player หรือ Macromedia Flash ไวอยูแลวจึงสามารถเลนไฟลของ Flash Video ไดโดยไมมีปญหา แปลงไฟลวิดีโอใหเปน Flash Video การแปลงไฟลวิดีโอใหเปน Flash Video สามารถทําไดดงันี้

1. คลิกปุม > Programs > Macromedia > Macromedia Flash 8 Video Encoder เพื่อเรียกโปรแกรมแปลงไฟลวิดีโอข้ึนมา

28

2. หนาตางของโปรแกรม Flash 8 Video Encode จะปรากฎขึ้นมา คลิกปุม Add… เพื่อเลือกไฟลวิดีโอเขามาแปลง > คลิกเลือกโฟลเดอรที่เก็บไฟลวดิีโอ > คลิกเลือกไฟลวิดีโอที่ตองการ > คลิกปุม Open

3. เมื่อกลับมาที่หนาตาง Flash 8 Video Encoder จะปรากฎรายชื่อของไฟลวิดีโอท่ีเราเลือก คลิกไฟลวิดีโอที่จะแปลง

4. คลิกปุม Start Queue เพื่อเร่ิมการแปลงไฟล ในระหวางที่โปรแกรมกําลังดําเนินการแปลงไฟล

5. เมื่อแปลงไฟลเสร็จแลว ใหสังเกตที่ทายชือ่ไฟลจะปรากฏไอคอนรูปเครื่องหมายถูกสเีขียว

คลิกปุม เพื่อปดหนาตาง Flash 8 Video Encoder วิธีแทรก Flash Video ลงในเว็บเพจ เมื่อแปลงไฟลวิดีโอใหเปน Flash Video เรียบรอยแลวขัน้ตอนตอไปกค็ือ การแทรกไฟล Flash Video ลงในตําแหนงทีต่องการในหนาเว็บเพจ ซ่ึงมีวิธีการแสดงดงัตอไปนี ้

1. วางเคอรเซอรตรงตําแหนงทีจ่ะแสดงวิดีโอ 2. คลิกแท็บ Common เพื่อเปดแถบเครื่องมือมาตรฐานขึ้นมา

3. คลิกปุมลูกศรขางๆปุม แลวคลิกเมนู Flash Video และจะปรากฏหนาตาง Insert Flash Video ขึ้นมาดังภาพ

ภาพประกอบที่ 10. 1

คลิกปุม เพื่อเลือกไฟลวิดีโอ และทําการเลือกไฟลวิดีโอที่ตองการนํามาวาง

ที่หนาเว็บเพจ และคลิกปุม OK > คลิกเลือกรูปแบบของหนาปดควบคมุการแสดงผล ที่

29

ชอง Skin คลิกปุม เพื่อใหโปรแกรมเลือกขนาดของหนาตางแสดงผลใหพอดีกับขนาดไฟลวิดีโอ > คลิกปุม OK เพื่อแทรกไฟลวิดีโอในเว็บเพจ

4. คลิกไอคอนของไฟลวิดีโอ ที่ปรากฎอยูในหนาเว็บเพจ หนาตาง Properties Inspector

ทางดานลางจะแสดงคณุสมบัติของไฟลวดิีโอข้ึนมาใหปรับแตงคา

ภาพประกอบที่ 10. 2

5. ทําการบันทึกและทดลองเรยีกดกูารแสดงผลวิดีโอบนบราวเซอร

ภาพประกอบที่ 10. 3

30

สารบัญ

บทที่ 1 ลูกเลนใน DREAMWEAVER 8 1

Behavior คืออะไร 1

การเปดพาเนล Behaviors 2

การทําเมนู Pop-up 3

บทที่ 2 เมนู POP-UP หลายชั้น 6

บทที่ 3 แกไข ACTION ตามตองการ 8

บทที่ 4 สรางหนาตาง POP-UP 9

บทที่ 5 หนาตางแจงขอความพิเศษทันทีที่คลิก 12

บทที่ 6 ROLLOVER แบบเปล่ียนปลายทาง 14

บทที่ 7 ใสวันที่อัพเดตโดยอัตโนมัต ิ 16

บทที่ 8 เพ่ิมสีสันดวยการใสเสียง 18

วิธีแทรกเสียงลงในเว็บเพจ 19

ซอนหนาปดควบคมุการแสดงเสยีง 22

บทที่ 9 สรางปุม FLASH งายๆ ดวย DREAMWEAVER 8 23

วิธีแทรกไฟล FLASH ลงในหนาเว็บเพจ 25

บทที่ 10 ใสคลิปวิดีโอในหนาเว็บเพจ 28

แปลงไฟลวิดีโอใหเปน Flash Video 28

วิธีแทรก Flash Video ลงในเว็บเพจ 29

32