สร้างจุด Link ภายในเว็บเพจเดียวกัน (Named Anchor) [Article ID : 117]

เรื่อง : การสร้างจุด Link ภายในเว็บเพจเดียวกันด้วย Dreamweaver

Web Page เราสามารถกำหนดจุด หรือตำแหน่งที่จะให้แสดงได้ โดยไม่จำเป็นต้องแสดงที่ด้านบนสุดของ Web Page ทุกครั้งเสมอไป ยกตัวอย่างเช่น การสร้างจุด Top ไว้ พอผู้ใช้งานเว็บอ่านเว็บเพจไปจนสุดหน้าเพจ ผู้สร้างเว็บอาจจะสร้างจุด Link ที่มีทำว่า Top แล้วให้ผู้ใช้งาน Click ที่ข้อความนี้ จากนั้นเว็บเพจจะวิ่งขึ้นมายังจุด Top โดยอัตโนมัติโดยที่ผู้ใช้เว็บไม่ต้องทำการ Scroll ขึ้นมาด้วยตนเองแต่อย่างไร ครั้งนี้เราจะมาลองสร้างกันดู

วิธีการสร้างลิงค์ภายในเว็บเพจเดียวกัน

เปิดเว็บเพจ หรือสร้างไฟล์เพจใหม่ขึ้นมากับโปรแกรม Dreamweaver จากนั้นปฏิบัติตามขั้นตอนต่าง ๆ ดังนี้

มาร์คจุดไว้ก่อน

ขั้นแรกให้เราทำการสร้างจุดมาร์คไว้ก่อนโดยใช้ Named Anchor ดังนี้

1. นำ Cursor ไปวางไว้ในตำแหน่งที่เราจะเชื่อมโยงไป หรือตำแหน่งบนเพจที่จะให้แสดง
2. จากนั้น Insert -> Common -> Named Anchor ดังรูป 3. เมื่อเลือกที่ Icon ดังกล่าว แล้วจะได้หน้าต่างใหม่ ดังรูป Anchor name : top *หรือชื่ออื่นตามต้องการ
จากนั้นกดปุ่ม OK

4. โปรแกรมแสดงเครื่องหมายสมอเรือ ดังรูป

สร้างลิงค์ไปยังจุดที่มาร์คไว้

จาก 4 ขั้นตอนข้างต้น เป็นการมาร์คจุดเพื่อจะสร้างลิงค์ไปหา เมื่อสร้างไว้แล้ว ต่อมาทำการสร้างลิงค์ไปยังจุดนั้น ดังนี้

5. เลือกข้อความ หรือรูปภาพที่จะสร้างเป็นลิงค์ (link)
6. จากนั้นที่ช่อง Link ในส่วนของ Properties Panel ทำการพิมพ์ #top ดังรูป *top คือ ชื่อที่กำหนดไว้ในข้อ 3 ที่ผ่านมา

เป็นอันเสร็จสิ้นการสร้างจุดลิงค์ภายในเพจเดียวกันหรือเราเรียกกันว่า Named Anchor ครับ
หากต้องการดูลักษณะการทำงานของ Named Anchor ท่านสามารถ คลิกที่นี้

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

<a href="category.html#cate2">หมวดสินค้าที่ 2</a>

About the Author

Mr.Sittichai Raksasuk

Sittichai is a Web Developer and Web Technology Instructor for over 10 yrs. He is also a webmaster of dwthai.com and author jQuery with Dreamweaver (2010). DwThai.Com is a website for web developer using Adobe Dreamweaver.

Contact with him : dwthai@gmail.com

บทความอื่นที่คุณอาจสนใจ

การปรับแต่งแก้ไขรูปภาพด้วย Dreamweaver

เรื่อง : การตบแต่งแก้ไขรูปภาพด้วยโปรแกรม Dreamweaver Dreamweaver มี Option ที่จะทำให้เราสามารถทำการแก้...  

การตั้งไซต์งานใหม่ (New Site, Site Setup)

เรื่อง : เริ่มต้นใช้งานโปรแกรม Dreamweaver ต้องทำ Site Setup ก่อน ก่อนที่เราจะใช้งานโปรแกรม Dreamweaver...  

การสร้างจุด Link ด้วยรูปภาพ (Image Link)

เรื่อง : การสร้าง Link ในแบบ Image Link ในบทความก่อนได้แนะนำการสร้างลิงค์ด้วยข้อความกันไปแล้ว มาในบทความนี้ จะมาแนะนำการ...  

การทำ Rollover Image (เปลี่ยนรูปภาพเมื่อ MouseOver)

เรื่อง : การทำ Rollover Image กับโปรแกรม Dreamweaver หลายท่านคงเคยพบหรือเคยใช้งานเทคนิคที่เราเรียกกันว่า Rollov...