
1. เลือกภาพที่ต้องการเขย่า และตั้งชื่อ ดังตัวอย่างจะตั้งชื่อให้ภาพว่า shake
2. จากนั้นเลือกไปที่ window
> behaviors หรือ Shift + F4 เพื่อเปิดหน้าต่าง
Behaviors ขึ้นมาดังรูป
3. เลือกภาพที่ต้องการให้เขย่า
จากนั้นคลิกที่ปุ่ม
จะมีหน้าต่างดังนี้ขึ้นมา
ให้เราเลือกที่ Effect > Shake

4. จะมีหน้าต่างขึ้นมาดังรูป
ให้เลือกชื่อรูปที่ตั้งไว้ตั้งแต่หัวข้อที่ 1
5. เมื่อคลิก ok แล้วจะหน้าต่าง Behaviors จะเป็นดังรูป ให้เราเลือก onMouseOver
เพื่อให้ภาพเขย่าเมื่อมีเมาส์อยู่เหนือภาพ
6. เปิดดูผลนี้ใน Browser จะเห็นว่าภาพของเราสามารถเขย่าได้เมื่อเรานำเมาส์ไปอยู่เหนือภาพ

เทคนิคการ Swap Image เพื่อเพิ่มความน่าสนใจให้กับการลิงค์รูปภาพบนเว็บ นอกจากนี้สามารถนำไปประยุกต์ ทำให้เว็บไซต์ดูดีได้อีกด้วย เป็นการใช้เทคนิคลูกเล่นที่มีอยู่ในโปรแกรม Dreamweaver
ขั้นตอนที่ 1 เตรียมไฟล์รูปภาพ
2 ภาพ
ขั้นตอนที่ 2 ให้ทำการดึงรูปเข้ามาในโปรแกรม โดยการที่ตำแหน่ง A ตามภาพค่ะ จากนั้นจะมีไดอะล็อกบ็อก Select
Image Source ตามรูปด้านล่าง ให้ทำการเลือกไฟล์ภาพแรกที่เตรียมไว้
จากนั้นกดปุ่ม OK ตามตำแหน่ง C
ขั้นตอนที่ 3 เมื่อได้รูปมาแล้ว
ให้ทำการคลิกที่รูป จากนั้นสังเกตที่ Panel Group ทางด้านขวามือของโปรแกรม
เลือกแท็บ Behaviors (หากไม่มี Panel Group Behaviors
ให้ทำการเรียกใช้งาน โดยการเลือกคำสั่ง Window จากเมนูบาร์ด้านบน
แล้วเลือก Behaviors) จากนั้นคลิกที่รูปเครื่องหมายบวก ตามตำแหน่ง A แล้วเลือก Swap Image
แล้วเลือก Behaviors) จากนั้นคลิกที่รูปเครื่องหมายบวก ตามตำแหน่ง A แล้วเลือก Swap Image
ขั้นตอนที่ 4 จะปรากฏไดอะล็อกบ็อก
Swap Image ให้ทำการคลิก Browse... ตามตำแหน่งที่ A จากนั้นจะปรากฏไดอะล็อกบ็อก Select Image Source ตามรูปด้านล่าง
ให้ทำการเลือกไฟล์ภาพอีกภาพที่เตรียมไว้ จากนั้นกดปุ่ม OK
ตามตำแหน่ง B จะกลับมาที่ ไดอะล็อกบ็อก Swap Image จากนั้นกด OK ที่ตำแหน่งที่ C
ตามตำแหน่ง B จะกลับมาที่ ไดอะล็อกบ็อก Swap Image จากนั้นกด OK ที่ตำแหน่งที่ C
ขั้นตอนที่ 5 ทำการบันทึกหน้าเว็บเพจ
เป็นเอกสาร .html หรือ .htm เปิดดูผลนี้ใน Browser

ในการทำเว็บเพจ บางครั้งเราอาจจะต้องใส่อักขระพิเศษต่าง ๆ ซึ่งทาง Dreamweaver มีการเตรียมเครื่องมือในส่วนนี้ไว้ให้เราใช้แล้ว

สำหรับตัวอย่างอักขระที่เราจะมาลองใส่กันวันนี้ ก็คือ
Copyright
ที่มีลักษณะตามภาพฝั่งซ้ายมือ ก่อนอื่นพิมพ์ข้อความก่อน จากนั้นให้วางเคอเซอร์ตรงตำแหน่ง X
จากนั้นไปที่เมนูบาร์ เลือกใช้คำสั่ง Insert -->HTML--> Special
Characters --> Copyright
ได้ผลลัพธ์ตามภาพด้านล่าง
สำหรับ Special Characters นั้นมีอยู่หลาย ๆ ตัวเหมือนกันที่เราใช้กันอยู่บ่อย ๆ
ซึ่งจะมีให้เห็นอยู่ตามภาพด้านบน หรือหากต้องการใช้อักขระพิเศษตัวอื่น ๆ ก็คลิกที่
Other ที่บริเวณด้านล่างสุด ซึ่งจะมี Special
Characters ให้เลือกใช้อีกหลาย ๆ ตัว
ไม่มีความคิดเห็น:
แสดงความคิดเห็น