TECH & TIPS

เขย่าภาพเมื่อเมาส์อยู่เหนือภาพ

1. เลือกภาพที่ต้องการเขย่า และตั้งชื่อ ดังตัวอย่างจะตั้งชื่อให้ภาพว่า shake


2. จากนั้นเลือกไปที่ window > behaviors หรือ Shift + F4 เพื่อเปิดหน้าต่าง Behaviors ขึ้นมาดังรูป



3. เลือกภาพที่ต้องการให้เขย่า จากนั้นคลิกที่ปุ่ม  จะมีหน้าต่างดังนี้ขึ้นมา ให้เราเลือกที่ Effect > Shake 


4. จะมีหน้าต่างขึ้นมาดังรูป ให้เลือกชื่อรูปที่ตั้งไว้ตั้งแต่หัวข้อที่ 1


5. เมื่อคลิก ok แล้วจะหน้าต่าง Behaviors จะเป็นดังรูป ให้เราเลือก onMouseOver เพื่อให้ภาพเขย่าเมื่อมีเมาส์อยู่เหนือภาพ

6. เปิดดูผลนี้ใน Browser จะเห็นว่าภาพของเราสามารถเขย่าได้เมื่อเรานำเมาส์ไปอยู่เหนือภาพ 



เทคนิคการทำภาพ Swap Image
       
เทคนิคการ Swap Image เพื่อเพิ่มความน่าสนใจให้กับการลิงค์รูปภาพบนเว็บ นอกจากนี้สามารถนำไปประยุกต์ ทำให้เว็บไซต์ดูดีได้อีกด้วย เป็นการใช้เทคนิคลูกเล่นที่มีอยู่ในโปรแกรม Dreamweaver
ขั้นตอนที่ 1 เตรียมไฟล์รูปภาพ 2 ภาพ
ขั้นตอนที่ 2 ให้ทำการดึงรูปเข้ามาในโปรแกรม โดยการที่ตำแหน่ง A ตามภาพค่ะ จากนั้นจะมีไดอะล็อกบ็อก Select Image Source ตามรูปด้านล่าง ให้ทำการเลือกไฟล์ภาพแรกที่เตรียมไว้ จากนั้นกดปุ่ม OK ตามตำแหน่ง C


ขั้นตอนที่ 3 เมื่อได้รูปมาแล้ว ให้ทำการคลิกที่รูป จากนั้นสังเกตที่ Panel Group ทางด้านขวามือของโปรแกรม เลือกแท็บ Behaviors (หากไม่มี Panel Group Behaviors ให้ทำการเรียกใช้งาน โดยการเลือกคำสั่ง Window จากเมนูบาร์ด้านบน
แล้วเลือก
Behaviors) จากนั้นคลิกที่รูปเครื่องหมายบวก ตามตำแหน่ง A แล้วเลือก Swap Image

ขั้นตอนที่ 4 จะปรากฏไดอะล็อกบ็อก Swap Image ให้ทำการคลิก Browse... ตามตำแหน่งที่ A จากนั้นจะปรากฏไดอะล็อกบ็อก Select Image Source ตามรูปด้านล่าง ให้ทำการเลือกไฟล์ภาพอีกภาพที่เตรียมไว้ จากนั้นกดปุ่ม OK
ตามตำแหน่ง
B จะกลับมาที่ ไดอะล็อกบ็อก Swap Image จากนั้นกด OK ที่ตำแหน่งที่ C


ขั้นตอนที่ 5 ทำการบันทึกหน้าเว็บเพจ เป็นเอกสาร .html หรือ .htm เปิดดูผลนี้ใน Browser


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

สำหรับตัวอย่างอักขระที่เราจะมาลองใส่กันวันนี้ ก็คือ Copyright ที่มีลักษณะตามภาพฝั่งซ้ายมือ ก่อนอื่นพิมพ์ข้อความก่อน  จากนั้นให้วางเคอเซอร์ตรงตำแหน่ง X

จากนั้นไปที่เมนูบาร์ เลือกใช้คำสั่ง Insert -->HTML--> Special Characters --> Copyright


ได้ผลลัพธ์ตามภาพด้านล่าง

สำหรับ Special Characters นั้นมีอยู่หลาย ๆ ตัวเหมือนกันที่เราใช้กันอยู่บ่อย ๆ ซึ่งจะมีให้เห็นอยู่ตามภาพด้านบน หรือหากต้องการใช้อักขระพิเศษตัวอื่น ๆ ก็คลิกที่ Other ที่บริเวณด้านล่างสุด ซึ่งจะมี Special Characters ให้เลือกใช้อีกหลาย ๆ ตัว



ไม่มีความคิดเห็น:

แสดงความคิดเห็น