Working With Links in Dreamweaver

This work is licensed under a Creative Commons License.

Working With Links in Dreamweaver

Why are there so many different types of links out there? What's an anchor and how does it differ from a script link? This tutorial will tell you what the different types of links in Dreamweaver mean and how to use them effectively.

Links or if you prefer, hyperlinks, create connections to many types of files including html pages, movies, PDFs, sound, etc. Other types of links include Anchors, Null links, and email links.

Links can be created a number of ways in Dreamweaver, i.e. the Site window, Document window or via the Property inspector.

In this tutorial we will explore the different types of links, if you are interested in how to create links using Dreamweaver make sure to check out that tutorial next.

Hyperlinks in Dreamweaver

In HTML, hypertext links are represented by an anchor tag
<a xhref="http://www.yahoo.com">This is a link to Yahoo</a>

You can link to documents within your website using Document-relative or Root-relative paths. Important: If you are linking to a site outside of your website, you must use the Absolute path including the protocol http:// , for example http://www.yahoo.com/

The Target drop down box specfies how the link will open:

_blank loads the linked document in a new, unnamed browser window

_parent loads the linked document in the parent frame or parent window of the frame that contains the link. If the frame containing the link is not nested, then the linked document loads in the full browser window

_self loads the linked document in the same frame or window as the link. This target is the default, so you usually don't have to specify it

_top loads the linked document in the full browser window, thereby removing all frames

Named Anchors in Dreamweaver

Named Anchors allow you to link to a specific place in a document. Often times you will see a FAQ that will have linked questions listed at the top of the page, and when you click the link, it will take you to the answer somewhere down the page. Usually there will be a link that will take you back to the questions. This is an example of a Named Anchor.

I frequently use named anchors to allow visitors to return to the top of the page, specifically if there is a very long page.

This requires two steps.

Create the Named Anchor

Locate your cursor to the linking point

Position your cursor where you would like the anchor

Hit Control + Alt + A or from the menu Insert > Invisible Tags > Named Anchor

Create an intuitive name i.e. Top...don't use any special characters.

If you are working with Show Visual Aids on (Control + Shift + I), you will be able to see your named anchor.

Link to the Named Anchor

Select the text or image that will trigger the link

In the Property Inspector, type a pound sign # and the name of the anchor (these are case sensitive) i.e. #Top

Note: you can also link to Named Anchors in other pages by providing the name of the page i.e. services.htm#Top

Learn how to create Null and Script links next!

Null and Script links in Dreamweaver

Null and Script links are also very useful when building pages in Dreamweaver.

Null Links - An undesignated link that you can use to attach behaviors to. For example, when using Dreamweaver Pop Up Windows feature, a Null link is used to launch the Pop Up window (This will be a future tutorial). I often use null links when I create mock up websites to be able to view the link properties (colors of links, css rollovers, etc.)

Type a pound sign # in the Property Inspector's Link field to create a Null link.

Script Links- Execute JavaScript code or call a specific JavaScript function. The back link and image at the bottom of this page is a script link. Here is a look at the Property Inspector with the JavaScript.

Next stop, email links...

Email Links in Dreamweaver

Creating an email link (mailto: link) is very simple, and with a little magic, you can take the email link much further. An email link will launch a user default email program will the email address already insert in the new message. Beware some visitors do not have email clients configured correctly, potentially causing a problem in not actually sending the email message. Use forms to capture data when possible.

From the Common pallet on the Objects Tools, click the Envelop icon.

Create the text for the link, and enter the email address that will be used.

Basically what happens, is Dreamweaver turns the above info into a mailto: link with the information you provided. Let's take it a step further and see what happens.

To give your page a cleaner look then use a name such as I did in the text box above, and reserve the actual eMail address for the E-Mail text box.

Top