Named Anchors in Dreamweaver CS4
There will be times during your websites development when you will want or need to create a link to a certain part or section of a webpage and not just have it load from the top as usual. If you have a very long page and would like to draw someone’s attention to a particular part of it half way down the page, then you can create a unique named anchor link to that section of the page. So to accomplish this we can use named anchors which as the name suggests are links anchored to a specific place in your destination web page.
You can apply a named anchor link from one page to another or from say a link at the top of the page down to the middle of a web page or vica versa. Here is an example of an Anchor text link on my contact form page.
Why dont you click on this link to my contact form to see how the page loads about 400 pixels down the page. It's Anchored so that the page displays the whole contact form area and I use the Anchor text link to make the page more accessible to my users. Did you notice anything else about the link? Well, at the end of the link it had #form at the end of the extension:
# Signifies that it is an anchor and I named the anchor: '#form.' The anchor link now has the trigger it needs to find the anchor point.
Here is what the named anchor link looks like in code view:
It has a link name and an ID of form and its the ID that we target with the '#form.'
You might also see named anchors being used at the bottom of a web page with the words ‘back to top.’ I am going to insert an named anchor text link at the bottom of the page too and I will set it to bring you back to the top of the page. Not to the very top but instead I'll set the Anchor link to bring you to the top of the article so be sure to click on the link to test it out!
Why not create an ordinary link instead of an Anchored Text Link?
Why not just create an ordinary link? You might ask. Well, because the web page will have already been cached in a browser, adding a named anchor link will not require the page to be reloaded and will be instantaneous. But, if a normal link is specified then the browser will have to reload the page and that will take longer especially if there are a lot of images and other media on the page.
How to add a Named Anchor Link in Dreamweaver
- On the web page, you want to add the named anchor, left click to place your cursor at the anchor point.
- Click Insert > Named Anchor and enter a unique case sensitive name for you anchor:
- All you do now is click ok! and you are finished. But you still need to create a link for it to work and you add the unique anchor text name to the end of the anchor link:
So write the anchor text by typing 'back to top.' Highlight the text and then type the link in the link box of the properties inspector. In my case ill type: #articletop. This is what it will look like in code view:
Ok try this link now: Back to Top
Did you use the 'back to bottom' anchor text link to get you back here?
Named Anchor Links to other pages in your site
To make a named anchor link to another page in your site you need to insert a named anchor link in the destination page and give it a unique name. This shouldn't matter much if there are no other anchored links on that page.
Then simply write some text in the page you want to link from, highlight it and use the point to file icon to drag the arrow into your files panel to the web page. Then you will need to add the extension onto the end of the link in the properties inspector. So, If I wanted to add a link to my contact page which had a unique anchor link in it called '#form' I would write the following link extension:
Hand Coding Anchor Text Links in Dreaweaver
This code makes the anchor link In the same page:
<a name="samename" id="sameID"></a>
now reference the anchor text link here:
<a href="#sameID">Back to Top</a>
Link anchor text to another page use the same anchor link but add the URL i.e.:
<a href="www.dreamweavertutorial.co.uk/contact.htm#form">contact form</a>
Share this Article
Related Dreamweaver Links:
Email Links in Dreamweaver CS4 - Dreamweaver Article
Image Map Hotspots in Dreamweaver CS4 - Dreamweaver Article
Links and Hyperlinks for Beginners in Dreamweaver CS4 - Dreamweaver Article