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>

This is a link to Yahoo

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 2 steps.

Create the Named Anchor 

  Locate your cursor to the linking point

• Hit Control + Alt + A or from the menu Insert > Invisible Tags > Named Anchor
• Create an intuitive name i.e. Top

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

Test this link to move the page to the start of the Named Anchors section.

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. Make sure to click the example links at the left!

To: This email address is being protected from spam bots, you need Javascript enabled to view it
Subject: This email address is being protected from spam bots, you need Javascript enabled to view it ?subject=This Text will appear in the Subject line.
CC: This email address is being protected from spam bots, you need Javascript enabled to view it ?cc= This email address is being protected from spam bots, you need Javascript enabled to view it
BCC: This email address is being protected from spam bots, you need Javascript enabled to view it ?bcc= This email address is being protected from spam bots, you need Javascript enabled to view it
Body: This email address is being protected from spam bots, you need Javascript enabled to view it ?body=I would like information regarding the new Dreamweaver Tutorials and Templates.

And of course you can combine these by using an "&" like this:

This email address is being protected from spam bots, you need Javascript enabled to view it ?subject=Dremweaver&body=Please send me some Dreamweaver Templates.