รายวิชา คอมพิวเตอร์ (การเขียนเว็บไซต์โดยใช้โปรแกรม Deramweaver  MX)
เรื่อง ตกแต่งเว็บเพจให้สวยงามด้วยรูปแบบต่างๆ

1. เพิ่มลูกเล่นบนหน้าเว็บด้วย Behaviors
       การใช้ Behaviors เป้นส่วนสำคัญในการดึงดูดความสนใจของผู้เยี่ยมชมเว็บเพจ ซึ่งจะเป็นการทำ
ภาพเคลื่อนไหว ซ่อน/แสดงรูปภาพ แทรกลูกเล่นเอฟเฟ็คต่างๆ บนหน้าเว็บเพจได้ Behaviors ประกอบด้วยส่วนอีเว็นต์ (เหตุการณ์บางอย่างที่เกิดจากผู้ใช้) และส่วนแอ็คชั่น (การโต้ตอบเหตุการณ์นั้น) เช่น ถ้าเราเลื่อนเมาส์อยู่เหนือปุ่มคำสั่งและทำให้ปุ่มคำสั่งเปลี่ยนสี หมายความว่าอีเว็นต์ที่ทำให้เกิดการโต้ตอบคือการเลื่อนเมาส์อยู่เหนือปุ่ม และแอ็คชั่นที่เป็นการโต้ตอบต่ออีเว็นต์นั้นคือการเปลี่ยนสี ซึ่งในส่วนแอ็กชั่นเป็นชุดคำสั่ง JavaScript ที่ถูกสร้างๆไว้แล้วให้ทำหน้าที่บางอย่างเจาะจง
       การเรียกใช้หน้าต่าง Behaviors
              เราสามารถกำหนด Behaviors ได้โดยใช้หน้าต่าง Behaviors (หากยังไม่เปิดให้ใช้คำสั่ง
Window> Behaviors)
              หน้าต่าง Behaviors จะมีปุ่ม และ ไว้สำหรับเพิ่ม/ลบแอ็คชั่นได้ โดยเมื่อเราคลิกที่ปุ่ม ก็จะแสดงแอ็คชั่นต่างๆ ที่เราสามารถกำหนดได้ ซึ่งมีตั้งแต่แอ็คชั่นที่เกิดเมื่อผู้ใช้เปิดหน้าเว็บเพจหรือเกิดเมื่อผู้ใช้ Click mouse เลือกองค์ประกอบบางอย่างในหน้าเว็บ เช่น Click เลือกเลเยอร์ เลือกข้อความ หรือรูปภาพ

 
              เมื่อเราเลือกแอ็คชั่นที่ต้องการแล้ว ก็จะปรากฏชื่อแอ็คชั่นนั้นในช่อง Action โดยอีเว็นต์ที่ทำให้เกิดแอ็คชั่นนี้จะปรากฏในช่อง Events ซึ่งเราเปลี่ยนได้โดย Click เลือกอีเว็นต์อื่นได้จากรายการ
ดังที่กล่าวไปแล้วว่า Behaviors ประกอบด้วยชุดคำสั่ง JavaScript ซึ่งบราวเซอร์แต่ละรุ่นจะสนับสนุนคุณสมบัติ JavaScript ที่แตกต่างกัน ดังนั้นในการกำหนด Behaviors เราจึงต้องระบุรุ่นบราวเซอร์ที่ต้องการให้ Behaviors ใช้งานได้ในช่อง Events for ซึ่งมีให้เลือกตั้งแต่บราวเซอร์รุ่น 3.0 ขึ้นไป หรือเจาะจงค่ายบราวเซอร์ได่ว่าจะให้ใช้ได้กับ Internet Explorer หรือ Netscape
       เทคนิคการสลับภาพโดยใช้ Behaviors
              ตัวอย่างต่อไปนี้เป็นการกำหนด Behaviors ที่จะทำให้เกิดการสลับภาพจากภาพหนึ่งเป็นอีกภาพหนึ่ง เมื่อมีการเลื่อนเมาส์ไปอยู่เหนือภาพนั้น และเมื่อเลื่อนเมาส์ออกจากภาพก็จะกลับไปแสดงภาพเดิม ขั้นตอนการสลับภาพที่แสดงมีดังนี้
              1. กำหนดรูปภาพเริ่มต้นในหน้าเว็บเพจและคลิกเมาส์เลือกรูปภาพเพื่อกำหนด Behaviors ให้ทำงานกับรูปนี้
              2. เปิดหน้าต่าง Behaviors และ Click mouse ปุ่ม และเลือก Swap Image เพื่อกำหนด Behaviors
              3. Click mouse ปุ่ม Browse เพื่อเลือกรูปภาพที่จะนำมาสลับกับรูปนี้
              4. Click mouse ที่ปุ่ม OK จะแสดงอีเว็นต์ให้สลับภาพเมื่อมีการเลื่อนเมาส์มาอยู่เหนือรูป(MouseOver) และเมื่อมีการเลื่อนเมาส์ออกจากรูป (onMouseOut) จะกลับไปรูปเดิม
2. เมนูกราฟิกแบบ Rollover Image
       เมนูกราฟิกแบบ Rollover Image เป็นเทคนิคหนึ่งที่นิยมใช้สำหรับเว็บเทคนิคหนึ่ง เนื่องจากมีจุดเด่นคือ เมื่อนำเมาส์ไปวางไว้เหนือปุ่มกราฟิกที่กำหนด ปุ่มกราฟิกนั้นจะเปลี่ยนไปเป็นภาพอื่นๆ ตามที่กำหนดไว้ในโปรแกรม และเมื่อนำเมาส์เลื่อนออกจากปุ่มกราฟิก ปุ่มกราฟิกนั้นก็จะคืนสู่สภาพเดิม ซึ่งโดยปกติการสร้างเมนูกราฟิกลักษณะนี้ จำเป็นจะต้องอาศัยภาษา Java หรือ JavaScript มาช่วย แต่โปรแกรม Dreamweaver อำนวยความสะดวกให้กับผู้ใช้
ตัวอย่างของ Rollover Image
              1. เตรียมภาพปุ่มกราฟิก รายการละ 2 ภาพ ภาพหนึ่งจะเป็นภาพต้นฉบับ อีกภาพจะเป็นภาพที่
สามารถปรับเปลี่ยนได้ โดยควรมีขนาดเท่ากัน แต่แตกต่างกันเรื่องสี หรือ Effect
              2. คลิกเมาส์ ณ ตำแหน่งที่ต้อง
              3. การวางภาพปุ่มกราฟิก คลิกเลือกเครื่องมือ Insert Rollover Image จากแถบ Object
              4. ปรากฏหน้าต่างควบคุมการทำงาน ดังนี้
              5. กำหนดชื่อไฟล์ภาพที่เป็นภาพต้นฉบับ (ภาพแรก) ในรายการ Original Image
              6. กำหนดชื่อไฟล์ภาพที่สอง ในรายการ Rollover Image โดยคลิกที่ปุ่ม Browse แล้วเลือกไฟล์ภาพที่ต้องการ จากนั้นจึงคลิกปุ่ม Select
              7. กำหนดชื่อไฟล์ หรือชื่อเรียกเว็บไซต์ (URL) ในรายการ When Clicked, Go to URL:
              8. เมื่อกำหนดรายการต่างๆ ครบแล้วก็คลิกที่ปุ่ม OK