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

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

การสร้าง Form และ Input สำหรับกรอกข้อมูล

เรื่อง : การสร้าง Form และ Input เพื่อให้ผู้ใช้เว็บกรอกข้อมูลโดยใช้ Dreamweaver Form หรือ ฟอร...  

การติดตั้ง Extension (How to install extension)

เรื่อง : การติดตั้ง Extension ให้กับโปรแกรม Dreamweaver Dreamweaver Extension คือ โปรแกรมช่วยเสริมและขยา...  

การกำหนด Properties หรือคุณสมบัติของตาราง

เรื่อง : การกำหนดคุณสมบัติ หรือ Properties ให้แก่ตาราง (Table) ในบทก่อนได้กล่าวถึงการสร้างตารางไปแล้ว และได้อธิบายถึงกา...  

วิธีการใช้ Properties Panel และการกำหนดคุณสมบัติให้แก่ข้อความ

เรื่อง : การใช้ Properties Panel และการกำหนดคุณสมบัติข้อความเบื้องต้น Properties Panel เป็นส่วนที่ใช้ใ...