Dreamweaver Tutorials back to dreamweaver tutorials home pagee contact form tutorial page
A value is required.Invalid format.A value is required.Invalid format.
Social Networks Our YouTube.com Channel Facebook Page

Named Anchors in Dreamweaver CS4

back to bottom

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.

example of anchor text link in Dreamweaver

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:

named anchor in brower

# 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:

named anchor link in code viewIt 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:

insert anchor text

  • 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:

writing the anchor

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:

properties inspector named anchor to another page

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

blog comments powered by Disqus

Dreamweaver Website Templates

Web Hosting Plans That I Use

  • GoDaddy.com Hosting Plans!Godaddy Hosting
  • Unlimited Hosting at HostGatorHostGator Hosting
  • JustHost.com Unlimited DomainsJustHost Hosting
  • Hosting just $4.88/month! - PowwebPow Web Hosting

PHP Luxury Contact Form Tutorial

Great Premium Shopping Cart

  • BigCommerce makes it easy to sell online. Click here to try it free!BigCommerce

    I highly reccommend this product for people who want to create an online store. it's easy to set-up and add products to and easy to manage back-of-house. Can also be used as an Ebay store.

Email Marketing - Recommended links

CSS Drop Down Menu - Dreamweaver

Floating Menu - Dreamweaver

Tabbed Navigation Menu

CSS Text Boxes in Dreamweaver

CSS 3 in Dreamweaver

J Query in Dreamweaver

Transparent Overlays Dreamweaver

CSS in Adobe Dreamweaver

All Types of Links In Dreamweaver

Positioning Elements in Dreamweaver

Unordered List Images Dreamweaver

Create an RSS Feed in Dreamweaver

Website Typography in Dreamweaver

Expanding Text Boxes - Dreamweaver

Make a Donation

Donate for Dreamweaver Tutorials