10. Adding Links



In HTML you can assign links both to images and text. Dreamweaver makes this a very simple task. So let's see how to add/modify links.

Open the file index.html from template/html/html_version.

Preview the page in a web browser by pressing the F12 key. And notice the links in this page:

We have both text and image links. The image links have a rollover effect, they are not simply image links (image that has a link but don't changes its appearance when you place your mouse over it).

Now let's add an image link. Do to that click on an image and go to the Properties palette to add the desired link:

Above you have the Properties palette and here you'll find the link option and the target option. You can add a link directly writing the path to your desired file (for example: "welcome.html" if the page is part of the web site or "" if the page is external) or you can browse to the desired file or you can drag a link directly to that file if you have the Files palette visible to the right of the Dreamweaver desktop.

Writing a link in the blank space automatically enables the Target option. Here you have 5 possibilities as described in the Dreamweaver Help:

  • _blank loads the linked file in a new, unnamed browser window.
  • _parent loads the linked file in the parent frameset or window of the frame that contains the link. If the frame containing the link is not nested, the linked file loads into the full browser window.
  • _self loads the linked file in the same frame or window as the link. This target is implied, so you generally don’t need to specify it.
  • _top loads the linked file in the full browser window, thereby removing all frames.

The fifth possibility is to leave the Target option blank and then the new page will open in the same window replacing the current page.

Now let's select a text and add a link to it using the Properties palette.

Here you have the same options as for adding a link to an image only that the Properties palette is a little bit different. So write a link in the Link area and press Enter to apply it. If you don't press Enter the link will not be applied.

As you can see after defining a link the text changes its appearance:

That's because we have defined a style to apply to any text link. Actually in our styles.css file we have defined more than one style for the text links. But we will discuss this in the next tutorial.