Un title page
Thainextstep.com สอนทำเว็บไซต์ด้วย Dreamweaver Photoshop  PHP & MySql และ การทำ SEO  
Un title page
Thainextstep.com สอน HTML บทความ Dreamweaver สอน Photoshop บทความ PHP & MySql Web Tips SEO Guide
Un title page
สอน Dreamweaver
  ทำความรู้จัก Dreamweaver
  การสร้าง Site
  การกำหนดคุณสมบัติพื้นฐาน
  การสร้าง CSS Style
  การเรียกใช้งาน CSS Style
  การใส่สี Background
  การใส่ลิงค์ข้อความและรูป
  การสร้างตาราง
  การปรับแต่งตาราง
  การใส่คำอธิบายให้รูปภาพ
  การเพิ่มอักขระพิเศษ
  การทำภาพ Swap Image
 


  เทคนิคการทำภาพ Swap Image
 

สำหรับบทความนี้ เราจะมาทำเทคนิคการ Swap Image เพื่อเพิ่มความน่าสนใจให้กับการลิงค์รูปภาพบนเว็บ นอกจากนี้สามารถนำไปประยุกต์ ทำให้เว็บไซต์ดูดี แต่จะประยุกต์แบบไหน ดูไอเดียการทำได้ที่นี่ค่ะ

     
 
 
     

เทคนิคนี้ทได้ไม่อยากค่ะ เพราะเป็นการใช้เทคนิคลูกเล่นที่มีอยู่ในโปรแกรม Dreamweaver ... เราจะทำเทคนิคนี้ได้นั้น ก่อนอื่นต้องเตรียมไฟล์รูปภาพไว้ก่อน 2 ภาพค่ะ ในบทความนี้ Webmaster เตรียมภาพไว้ 2 ภาพตามรูปด้านบนค่ะ

จากนั้นเมื่อเราได้รูปภาพมา 2 รูปแล้ว เราก็จะมาเริ่มทำกันเลยค่ะ

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

 
 
     

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

 
 
     

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

 
 
     

ขั้นตอนที่ 5 ทำการบัญทึกหน้าเว็บเพจ เป็นเอกสาร .html หรือ .htm แค่นี้ก็เสร็จเรียบร้อยแล้วค่ะ

ลองเรียกไฟล์ที่บันทึกไว้ มาดูสิค่ะ ว่าได้ผลลัพธ์อย่างไร...?

 

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

ในเว็บไซต์ www.thainextstep.com ก็ได้ใช้เทคนิคนี้เช่นกันค่ะ ... ลองทายดู... ตอบละกันนะค่ะ ก็คือเทคนิคเดียวกันกับที่ทำเมนูด้านบนที่เปลี่ยนสีเมื่อเอาเมาส์ไปชี้นะแหล่ะค่ะ

 
   
   
   
วันที่บทความ : 30 ต.ค. 2550              ที่มา : Webmaster

สอนทำเว็บไซต์   |   สอนภาษา HTML   |   สอน Dreamweaver   |   สอน Photoshop   |   สอนภาษา PHP & MySql   |   รวมทิป เทคนิคการทำเว็บไซต์   |   สอนการทำ SEO
:: Copyright © 2005 by Chatta design. All rights reserved. Do not duplicate or redistribute in any form.::