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
 


  การใส่ลิงค์ให้ข้อความและรูปภาพ
 

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

     
 
 
     

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

ขั้นตอนที่ 2 เราจะมาเริ่มใส่ลิงค์ให้กับข้อความและรูปภาพกันค่ะ ก่อนอื่น้เรามาทำลิงค์แบบรูปภาพกันก่อนค่ะ เริ่มต้นก็คลิกที่ภาพที่เราจะทำลิงค์ตามตำแหน่งที่ 1 ของรูปที่ 1 จากนั้นลองสังเกตบริเวณด้านล่างของโปรแกรม Dreamweaver ในส่วนของ Properties สังเกตบริเวณช่องที่มีชื่อว่า Link ตามภาพที่ 2 ในตำแหน่ง 1.1 หากต้องการลิงค์ไฟล์เอกสารเราสามารถลิงค์ได้โดยคลิกที่รูปแฟ้ม (ภายในวงกลม) เพื่อ Select File ที่ต้องการลิงค์ไปหา หรือหากเราจะลิงค์แบบลิงค์เว็บไซต์ เราก็สามารถพิมพ์ URL ของเว็บไซต์นั้น ๆ ลงในช่อง Link นี้ได้เลย ดังที่เห็นในภาพที่ 2 ซึ่งเป็นการลิงค์แบบลิงค์ไปเว็บไซต์ โดยตามตัวอย่างจะลิงค์ไปที่ http://www.thainextstep.com

 
 
     

แบบที่ 2 การลิงค์แบบลิงค์ข้อความ หลังจากที่เราพิมพ์ข้อความแล้ว ให้เราทำการแด็กเมาส์ที่บริเวณข้อความที่เราต้องการทำลิงค์ ตามภาพที่ 1 ตำแหน่งที่ 2

 
 
     

เมื่อแด็กเมาส์ที่ข้อความแล้ว สังเกตบริเวณด้านล่างของโปรแกรม Dreamweaver ในส่วนของ Properties ตามภาพที่ 2.1 ซึ่งจะมีช่องที่ชื่อว่า Link อยู่เหมือนกัน วิธีการทำลิงค์ก็เหมือนกันกับแบบลิงค์ภาพค่ะ ซึ่งก็จะมีช่องให้ใส่ลิงค์ และปุ่มให้ Select File

 
 
     

เพียงแค่นี้ ก็เสร็จแล้วค่ะ ลองเซฟไฟล์แล้วลอง test กันดูค่ะ ... เวลาเราเอาเมาส์ Over บนรูปและลิงค์ เมาส์พอยเตอร์ก็จะเปลี่ยนไป จากเป็นลูกศรก็จะกลายเป็นรูปมือแทน ถ้าได้ตามนี้ก็ลิงค์สำเร็จแล้วค่ะ

 

เออ...เกือบลืมในส่วนของตำแหน่ง 1.2 และะ 2.2 ซึ่งในส่วนนี้จะเป็น Attribute หนึ่งของการลิงค์ ที่เรียกว่า Target ซึ่งจะเป็นตัวกำหนดรายละเอียดของการลิงค์เช่นเลือก _blank สำหรับให้เปิดหน้า Window ใหม่เป็นต้น

 
   
   
   
วันที่บทความ : 07 ก.พ. 2552              ที่มา : Webmaster

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