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
 


  การทำลิงค์แบบ Named Anchor
 

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

     
 
 
     

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


 
 

ขั้นตอนที่ 1 เปิดโปรแกรม Dreamweaver ขึ้นมา และได้สร้างชิ้นงานใหม่ เมื่อเรามีข้อมูลในหน้านั้น ๆ แล้ว แต่ต้องการลิงค์แบบใช้ Named Anchor ในที่นี้ขอสมมุติว่าในเพจของเรามีข้อมูลอยู่เยอะเกิน 1 Screen หน้าจอ (ในที่นี้ขอสมมุติข้อมูลจำนวน 10 บรรทัด แทนจำนวนข้อมูลของเพจ) แ้ล้วเราต้องการทำปุ่มลิงค์ Go to Top ที่บริเวณล่างสุดของเพจ เพื่ออำนวยประโยชน์ให้คนเข้าเว็บได้ใช้ส่วนนี้เพื่อลิงค์กลับขึ้นมาด้านบน ของเพจ (ไม่ต้องเสียเวลาเลื่อน Scrollbar)

ดังนั้นเราจะต้องมีการสร้างจุดอ้างอิงค์เสียก่อน ในที่นี้จุดอ้างอิงของเราก็คือส่วนบนสุดของเพจ (เพราะเราจะให้ลิงค์แล้วแสดงส่วนบนของเพจ) ให้เราสร้าง Named Anchor ที่บริเวณนี้ โดยวาง Cursor ที่จุดบริเวณด้านบนสุดของเพจ จากนั้นใช้คำสั่ง Insert ---> Named Anchor ซึ่งจะมีหน้าต่างดังภาพในตำแหน่งที่ 1 ปรากฏขึ้น เพื่อให้เราสร้างชื่อจุดอ้างอิงของ Named Anchor ที่เราจะสร้าง ซึ่งควรตั้งชื่อให้เหมาะสมตามจุดประสงค์ของการใช้งาน ในที่นี้ขอตั้งชื่อว่า "top" (เพราะเป็นจุดอ้างอิงค์ด้านบน) ซึ่งจะได้สัญลักษณ์ Named Anchor ตามภาพที่ 2

 
 

 
   
 
 
     

ขั้นตอนที่ 2 วิธีการลิงค์ Named Anchor

2.1 สำหรับการลิงค์ในหน้าเดียวกัน เช่น การสร้างปุ่ม Go to Top ให้เราสร้างข้อความหรือรูปที่จะทำปุ่มลิงค์ที่ด้านล่างสุดของเพจ จากนั้นลิงค์ไปหา Named Anchor ที่เราได้สร้างไว้ในขั้นตอนที่ 1

วิธีการใ่ส่ลิงค์ภายในหน้าเดียวกัน คือใส่ #ตามด้วยชื่อ Named Anchor ตามตัวอย่างนี้ก็จะสามารถระบุลิงค์เป็น #top ตามภาพตำแหน่งที่ 2

2.2 สำหรับการลิงค์ข้ามเพจ เช่น ในหน้านี้เราทำลิงค์เรื่องการสอน Dreamweaver ไว้ เพื่อลิงค์ไปหน้้าชื่อ dreamweaver.html ซึ่งในหน้านั้นจะมีข้อมูลหัวข้อต่าง ๆ มากมายเกี่ยวกับการสอน Dreamweaver รวมทั้งมีหัวข้อเกี่ยวกับสี ซึ่งเราจะลิงค์ไปหน้า Dreamweaver ในเรื่องของสี เราก็สามารถสร้าง Named Anchor ชื่อ color ไว้ในหน้า Dreamweaver ในบริเวณหน้าที่เป็นเนื้อหาหัวข้อเรื่องสี จากนั้นเราก็มาทำลิงค์ในหน้าที่เราต้องการ ตามตัวอย่างในภาพตำแหน่งที่ 3

 
 
     

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

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

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