การใช้งาน Behaviors และ Timelines

สําหรับการสร้างหน้าเว็บเพจขั้นพื้นฐานอาจจะดูธรรมดาเกินไป ดังนั้นจึงควรสร้างความน่าสนใจเพิ่มขึ้นโดยการใส่ลูกเล่นหรือความสามารถเพิ่มเติมให้กับออบเจ็กต์ หรือส่วนประกอบต่างๆ ในเว็บเพจ นําเมาส์ไปวางหรือเมื่อคลิกเมาส์เป็นต้น ซึ่งในบทนี้จะเป็นเรื่องของการเพิ่มลูกเล่น และความสวยงามให้กับหน้าเว็บเพจ

การเปลี่ยนรูปเมื่อวางเมาส์

การสร้างลูกเล่นแบบแรกก็คือ การสับเปลี่ยนรูปภาพเมื่อนําเมาส์ไปวาง โดยเมื่อนําเมาส์ออกจากรูปก็ให้เปลี่ยนรูปภาพกลับมาเป็นรูปเดิมซึ่งมีขั้นตอนการสร้าง
ดังนี้

1. คลิกรูปภาพที่ต้องการให้เปลี่ยน เมื่อนําเมาส์ไปวาง

2. คลิกเมนู Window > Behaviors

จากนั้นหน้าต่าง Behaviors จะเป็ดขึ้นมาทางด้านขวา

3. คลิกปุ่ม จะเห็นได้ว่ามีคําสั่งต่างๆแสดงขึ้นมามากมาย

4. คลิกเลือกคําสั่ง Swap Image โดยจะปรากฏ หน้าต่าง Swap Image ขึ้นมา

5. คลิกปุ่ม ที่ช่อง Set Source to :

เพื่อเลือกไฟล์ภาพที่จะให้แสดงเมื่อนําเมาส์ไปวาง โดยหน้าต่าง Select Image Source จะปรากฏขึ้นมา

6. คลิกเลือกไฟล์ภาพที่ต้องการ

7. คลิกปุ่ม

เมื่อกลับมาที่หน้าต่าง Swap Image อีกครั้ง จะสังเกตได้ว่าชื่อไฟล์ภาพที่เราเลือกปรากฏขึ้นมาที่ช่อง Set Source to :

8. คลิกปุ่ม

9. กดปุ่ม <F 12 > ที่คีย์บอร์ด เพื่อดูผลลัพธ์ผ่านทางบราวเซอร์

10. นําเมาส์ไปวางที่รูปภาพ รูปภาพนั้นก็จะเปลี่ยนไปเป็นรูปภาพที่กําหนดไว้ทันที โดยเมื่อเลื่อนเมาส์ ออกจะกลับไปเป็นรูปภาพเดิม

11. ปิดหน้าต่างบราวเซอร์

การใช้ Timelines

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

1. เปิดไฟล์เว็บเพจที่ต้องการจะสร้าง Timelines ขึ้นมา โดยหน้าเว็บเพจดังกล่าวจะต้องใช้เลเยอร์เป็นส่วน ประกอบอยู่ด้วย

2. คลิกเมนู Window > Others > Timelines จะ ปรากฏหน้าต่าง Timelines ขึ้นมา

3. คลิกรูปภาพ โดยรูปภาพนี้จะต้องสร้างไว้ใน เลเยอร์