การทำ POP-UP MENU ด้วยการวาด layer
1. เตรียมภาพที่เราต้องการ สร้างเมนู ขึ้นมา เป็นจุดเริ่ม
2. วาดเลเยอร์ไปใกล้ๆ แล้วนำ Table มาแบ่ง จำนวนเมนูขึ้นอยู่กับจำนวนเมนู
3. ใช้ Rollover Image ในการทำ เทคนิค ช่วยเปลี่ยน รูปแบบ ของภาพ
>>
>>
4. จากนั้นให้กำหนดค่าเริ่มต้นของ layer ที่สร้างให้เป็นแบบ hidden เพื่อกการซ่อน Layer จาก properties (กำหนดตรง Vis ให้เป็น hidden) และกำหนดชื่อของ layer เช่นตั้งชื่อเป็น pop
5. จากนั้นไปที่ Menu ที่เราสร้าง จากนั้น เปิด Tag Inspectoc > Behavions
6. กด เครื่องหมาย + และเลือก Show - Hide Layers
7. จะได้ Menu นี้ขึ้นมา ซึ่งชื่อว่า หน้าต่าง Menu ว่า Show-Hide Layer ในขั้นตอนแรกให้เราเลือกไปที่ชื่อ Layer ที่เราได้ทำการตั้งชื่อไว้(POP) แล้วให้เลือกไปที่ปุ่ม Show ดังรูป จากนั้นให้เราทำการคลิ๊กที่ OK ไปก่อน 1 ครั้ง
8. ทำอย่างเดิมอีกครั้ง แล้ว แต่ ครั้งที่ 2 เลือกปุ่ม Hide จากนั้น เปลี่ยน Events
ครั้งที่ทำ อันแรก Show ให้ Events เป็น onMouseOver
ครั้งที่ 2 Hide ให้ Events เป็น OnMouseOut
2. วาดเลเยอร์ไปใกล้ๆ แล้วนำ Table มาแบ่ง จำนวนเมนูขึ้นอยู่กับจำนวนเมนู
3. ใช้ Rollover Image ในการทำ เทคนิค ช่วยเปลี่ยน รูปแบบ ของภาพ
>>
>>
4. จากนั้นให้กำหนดค่าเริ่มต้นของ layer ที่สร้างให้เป็นแบบ hidden เพื่อกการซ่อน Layer จาก properties (กำหนดตรง Vis ให้เป็น hidden) และกำหนดชื่อของ layer เช่นตั้งชื่อเป็น pop
5. จากนั้นไปที่ Menu ที่เราสร้าง จากนั้น เปิด Tag Inspectoc > Behavions
6. กด เครื่องหมาย + และเลือก Show - Hide Layers
7. จะได้ Menu นี้ขึ้นมา ซึ่งชื่อว่า หน้าต่าง Menu ว่า Show-Hide Layer ในขั้นตอนแรกให้เราเลือกไปที่ชื่อ Layer ที่เราได้ทำการตั้งชื่อไว้(POP) แล้วให้เลือกไปที่ปุ่ม Show ดังรูป จากนั้นให้เราทำการคลิ๊กที่ OK ไปก่อน 1 ครั้ง
8. ทำอย่างเดิมอีกครั้ง แล้ว แต่ ครั้งที่ 2 เลือกปุ่ม Hide จากนั้น เปลี่ยน Events
ครั้งที่ทำ อันแรก Show ให้ Events เป็น onMouseOver
ครั้งที่ 2 Hide ให้ Events เป็น OnMouseOut
สร้างรูปภาพให้ผู้ชมเว็บสามารถจับเคลื่อนย้ายไปมาได้
การประยุกต์ใช้งาน Layer อีกรูปแบบหนึ่งที่ตัวโปรแกรม Dreamweaver มีมาให้เราเรียกใช้งาน ให้ได้ทดลองทำการ Click Mouse ที่รูปรถ ตุ๊ก ด้านบน แล้วลองจับลากไปมาครับ เพื่อความเข้าใจมากยิ่งขึ้น ..
:: วิธีการทำ ::
1. ให้เราทำการวาด Layer ลงไปบน Document Window พร้อมทั้งทำการ Insert รูปภาพเข้าไปยัง Layer ที่ทำการวาดไว้ ดังรูป
2. จากนั้นให้ทำการ Click เลือกที่ Selector TAG ของ <body> ไว้ ดังรูป
3. เมื่อเลือกไปที่เมนูดังกล่าวแล้ว จะปรากฏหน้าต่างใหม่ขึ้นมา ดังรูป
ที่หน้าต่าง Drag Layer นี้ เราสามารถกำหนดคุณสมบัติของขอบเขตการลาก (Drag) เลเยอร์ที่ต้องการได้ ซึ่งมี 2 Tab ให้เราเลือกใช้งาน คือ
- Basic สำหรับการกำหนดคุณสมบัติในแบบเบื้องต้นที่ไม่ซับซ้อนมากนัก
- Advanced สำหรับการกำหนดคุณสมบัติเพิ่มเติมในแบบที่ซับซ้อนมากขึ้น
- Advanced สำหรับการกำหนดคุณสมบัติเพิ่มเติมในแบบที่ซับซ้อนมากขึ้น
ให้เราเลือกไปที่ Tab Basic แล้วทำการกำหนดคุณสมบัติเบื้องต้น ดังนี้
Layer ให้เราเลือกไปที่ Layer ID ที่เราต้องการจะทำการกำหนด Behaviors ในการ Drag นี้
Movement ให้เราทำการเลือกไปที่ Option ที่เราต้องการ ซึ่งจะมีอยู่ 2 option ดังนี้
Unconstrained เลือกค่านี้หากคุณไม่ต้องการบังคับขอบเขตของการ Drag Layer ที่ต้องการ
Constrained เลือกค่านี้ หากคุณต้องการกำหนดขอบเขตของการ Drag Layer ที่ต้องการ ( หาก เลือกที่ค่านี้ จะต้องทำการกำหนดค่าต่าง ๆ เพิ่มเติม )
ในรูปเลือกไปที่ Constrained
Layer ให้เราเลือกไปที่ Layer ID ที่เราต้องการจะทำการกำหนด Behaviors ในการ Drag นี้
Movement ให้เราทำการเลือกไปที่ Option ที่เราต้องการ ซึ่งจะมีอยู่ 2 option ดังนี้
Unconstrained เลือกค่านี้หากคุณไม่ต้องการบังคับขอบเขตของการ Drag Layer ที่ต้องการ
Constrained เลือกค่านี้ หากคุณต้องการกำหนดขอบเขตของการ Drag Layer ที่ต้องการ ( หาก เลือกที่ค่านี้ จะต้องทำการกำหนดค่าต่าง ๆ เพิ่มเติม )
ในรูปเลือกไปที่ Constrained
4. เมื่อเราได้ทำการกำหนดคุณสมบัติต่าง ๆ ตามที่ต้องการแล้ว จากนั้น Click ที่ปุ่ม OK
5. ให้เราไปที่ Panel ที่ชื่อว่า Behaviors อีกครั้งเพื่อตรวจสอบ Events ที่ได้จากการสร้าง หาก Event ที่ปรากฏใน Behaviors ไม่ใช่ OnLoad ให้เราทำการเปลี่ยนเป็น OnLoad นะครับ โดยการ Click ไปที่เครื่องหมายรูปสามเหลี่ยม ดังรูป
5. ให้เราไปที่ Panel ที่ชื่อว่า Behaviors อีกครั้งเพื่อตรวจสอบ Events ที่ได้จากการสร้าง หาก Event ที่ปรากฏใน Behaviors ไม่ใช่ OnLoad ให้เราทำการเปลี่ยนเป็น OnLoad นะครับ โดยการ Click ไปที่เครื่องหมายรูปสามเหลี่ยม ดังรูป
6. เป็นอันเสร็จสิ้นการใช้งาน Drag Layer ในเบื้องต้นครับ สำหรับรายละเอียดอื่น ๆ ให้คุณทำการทดสอบกำหนดค่าต่าง ๆ แล้วดูผลลัพธ์กับ Browser ตามที่ต้องการ
การใส่เสียงเพลงใน Dreamweaver
1. เตรียมไฟล์เพลงที่ต้องการ นำมาวางในโฟลเดอร์เดียวกับไฟล์เว็บไซต์ หรือจะสร้างโฟลเดอร์ใหม่สำหรับเก็บเพลงก็ได้ แต่ต้องอยู่ในโฟล์เดอร์ของเว็บไซต์ ซึ่งไฟล์เพลงต้องมีนามสุกล เป็น .wav หรือ .mid หรือ .mp3 แต่นามสกุล .mp4 รู้สึกยังมีปัญหาอาจต้องแทรกแบบวิดีโอแทน
2. เรียกแสดงหน้าต่าง Behaviors ให้ปรากฎขึ้นมาโดยคลิกเมนู Windows--> Behaviors ดังภาพ
3. จะปรากฎหน้าต่างดังกล่างทางด้านขวามือ ดังภาพ ให้คลิกปุ่มเครื่องหมายบวกเพื่อเพิ่มรายการ
4. คลิกเลือก รายการ Play Sound
5. จะปรากฎหน้าต่างให้เลือกเสียง คลิกปุ่ม Browse... เพื่อเลือกเสียงที่ต้องการให้คลิก OK
6. ที่พื้นที่ออกแบบเว็บไซต์จะปรากฎสัญลักษณ์ดังภาพ และที่รายการ Behaviors จะปรากฎเหตุการณ์ Play Soundแสดงว่าได้แทรกรายการเล่นเพลงได้แล้ว ให้บันทึกงาน และดูตัวอย่างเว็บไซต์ โดยกดปุ่ม F12 เสียงเพลงจะเล่นอัตโนมัติ
7. หากต้องการตั้งค่าเกี่ยวกับการเล่น สามารถคลิกเลือกตั้งค่าได้จากปุ่ม Parameters ดังภาพ
8. จบขั้นตอนการใส่เสียงเพลงประกอบ
9. หากต้องการลบรายการเล่นเพลงออกจากเว็บให้คลิกรายการก่อนแล้วคลิกเครื่องหมาย ลบ ดังรูป
* หมายเหตุ ไฟล์เพลงบางนามสกุล ที่เปิดในแต่ละ Browser อาจมีการแจ้งเตือนให้ดาวน์โหลดเพลงที่เราใส่ไว้ ลงในเครื่องก่อน อันนี้แล้วแต่ว่าเครื่องไหนลงโปรแกรมดาวน์โหลดไว้หรือเปล่า บางเครื่องก็สามารถฟังได้เลย
