dreamweaver.training - Anchors

Hi Simon,

The term 'anchor' originally meant anything that the user can click on. That's why the <A> tag is that, it's short for anchor.

However, the term 'anchor' now usually refers to a 'bookmark' or place on the page that can be jumped to. You may be familiar with this if you've ever clicked on a link, and are taken to another part of the page. Or clicked on a 'back to top' link and be taken to the top of the page.

The way these are set up, are 'anchors' can be placed anywhere in the code. In Dreamweaver design view, they are shown as little yellow shields with an anchor in the middle. The code for an anchor looks like this:
<A NAME="products"></A> where 'products' can be substituted for a name or number more relevant to your page.

You would then have the ability to link to this anchor, also using the A tag like this:
<A HREF="#products">Click here to jump to products</A>
Note the use of the hash (#) which indicates to the browser that this is not a different web page, but an anchor on the current page.

You can have as many anchors as you like. Another tip is that if you link to simply a hash (#) like this:
<A HREF="#">Back to top</A>
the link will jump the visitor to the top of the page.

If you use the properties panel on Dreamweaver, you can simply type a hash and then the name of the anchor to link to an anchor. You can also use the target dragger, to click, drag onto an anchor (yellow shield) and let go.

I hope this helps you, Simon. And I hope you enjoy your Dreamweaver training with us today.

Regards, Rich