สร้างจุด 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

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

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

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

วิธีการนำรูปภาพเข้ามาใช้งานใน Web Page ด้วย Dreamweaver

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

การใส่เสียงเพลงประกอบเว็บเพจ หรือไฟล์ Audio ให้กับเว็บ (HTML5)

เรื่อง : วิธีการใส่เสียงเพลง (Audio) ประกอบหน้าเว็บด้วยโปรแกรม Dreamweaver CC บางครั้งเราอาจจะมีความต้องการดึงดูดผู้ที่เข้...  

วิธีการสร้างตาราง (Table) ให้แก่เว็บเพจ

เรื่อง : การสร้างตาราง (Table) ด้วย Dreamweaver การสร้างตาราง หรือ Table สำคัญ และมีความจำเป็นอย่างมากในการสร้างเว็บเพ...