Links are ways to connect to other parts of a page, other parts of a site, or other sites. These connections are called navigation.
Different elements of a page can be made into links, including text, images, flash buttons, and ready-mades such as Spry widgets.
Site visitors are used to seeing links and look out for them, especially text links which are usually blue and underlined and change to magenta when they have been visited. Links are often written in a horizontal list (see them on the top and bottom of this page) when they usually have a pipe symbol (|) between them. The pipe symbol is on your keyboard.
You can change link properties (from blue and underlined) but it is best not to as site visitors may not recognise them. Conversely: because people expect links to be underlined and blue do not use underlining or blue colour for other text.
Inserting links:
To make a link, first select the text or image that will be the link.
Then see the links section of the Properties Inspector bar:
![]()
To link to a file in your files list: click on the link icon
and drag to the file name - the link appears in writing in the box.
To link to another file: use the browse icon to find the file to link to: ![]()
You can also write in the file name in the link box. The downward arrow to the right of the links box leads to a selection of the most recent links made.
Remember that when you make links they do not work on the Dreamweaver page - you have to Preview in Browser to check that they work. Use the icon: ![]()
See also anchor links instructions page; how to format links to look like buttons instruction page and jump menus instructions page.
To undo a link:
Select the link on the page (the text or image) and delete all the wording in the link box. Notice that the text is no longer blue or underlined.
Phases of links
DW code calls links in general <a> The four phases are:
a:link - the link when set up, by default it is underlined and blue
a:visited - the link when it has been used by a visitor, by default it is underlined and magenta
a:hover - the link as the mouse is pointed over it
a:active - the link when the mouse is clicked on it
It is important that this order is kept in the CSS listing as this is then the order in Code. Links do not work properly in any other order. Note that CSS lists stylings in the order you do them but that they can be dragged to a different order.
Kinds of Links
Internal links - within the same web site:
These are called relative links.
text links: to turn words into a link to another page: select the word(s) then in the links section of the Properties Inspector bar drag the target icon to the file that you want to link to in the files list on the right of your screen. A dotted line follows you. The words change to blue and underlined. Check in Preview.
image links: are made in the same way as text links: select the image and put in the linking connection. Indicate to your site visitors that this is a link.
When you make an image a link DW will put a blue border round the image. If you want to remove the border do it in the Properties Inspector bar: select the image and put a zero in the border box.
You can also make different parts of an image into different links: see image map page.
anchor links: these take you around a long page or to a specific place on another page. See anchor links instructions page
Spry widgets giving menus, etc. see Spry Widgets page.
jump menus: these offer choices that take the visitor to different pages. See details on jump menus page
External links
These are links to other web sites. Insert (top menu) → hyperlink and complete the menu box. The web site address must be in full including http: etc. so it is best to actually go to the web site and copy the full address and paste it into the link menu box. This is called an absolute path. Or you can select the text and paste the full address into the Link box on the Properties Inspector bar.
Email links
These are links to your email address so site visitors can send an email to you.
In the place you want the link, select Insert from top bar → E-mail link. Complete the box. Text: is the words that will appear on the DW page, E-mail: is the email address.
Dummy Links
It is sometimes useful to put in a dummy link when designing a page or trying out formatting. If you are not ready to make the actual link but want to remind yourself to do so later, a dummy will indicate that a link should be there by looking like one (but not working).
Select the word to form the link and in the link box on the Properties Inspector Bar (bottom of page) insert a # sign.
(Mac: alt+3) DW then treats this word as a link (but it will not lead anywhere)
You can turn it into a real link when you are ready, as above.
Note: the correct method of putting in a dummy link is to put javascript:; in the link box (the word javascript followed by a colon and a semicolon) This works in the same way as the hash sign.
To check your links before you publish your page
To check a page: File → check page → links
to check the whole site: Site → Check Links Site wide.
The results appear in the Results bar below the Properties Inspector bar. They report on:
broken links: ones that no longer have anywhere to go
orphaned files: ones that no longer have a link coming to them
external links: what external links you have set up on your site
top of page [this is an anchor link]