Dreamweaver - CS3

Lesson 15: Links (2)

15/58 Lessons 

Linking to another site

To add a link to text in your document, first select the text in the document and type the entire address in the “link” starting with http:// and so on.

If you want to open a page on a particular site, you would type for example: http://www.swotster.com/swotster/English/Access2007/Security_features_access_2007.html

The best thing you can do here is to surf to this page on the Internet and copy it from the browser address bar to the “links” box in Dreamweaver. This avoids typing errors.

By clicking on the downward pointing arrow next to the “Target” box, you select the target where you want to open the link.

_blank: opens the link in a new browser window.

_parent, _self and _top are only applicable when working with frames. More on this later when I get to this in this course.

Just leave this box empty, the link will open in the same browser window.


Image link

We can not only add a link to text on our page, but can also add it to an image or any other object in our page.

To do this, select the object in the page, in this case the image “TOMTOM_GPD_Go_920.jpg”.
Click and drag the “Point to file” next to the “link” box, to the file that you want to link. Or click the “Search for file” button.
Exactly the same as you are linking to a text.

By default, an image appears with a blue border when a link is added to this image.
If you want to remove that, type 0 in the “Border” in “Properties Window”.

If the image selected in your document, you can see the “Link” to the above “Src” box, which stands for “Source”.
This is also, as mentioned earlier, a link, a link to the source of your file.

So you see in the picture above that the photo “TOMTOM_GPD_Go_920.jpg” in the subdirectory “small”, which is a subfolder of the folder “images”, which is a subfolder of the folder “GPS” (GPS / images/small/TOMTOM_GPS_Go_920.jpg).

You should really see an image in your page as a reference to the source where you can find this image.

Switch over to the “split” view in Dreamweaver you can see the source code for both links.

The first is the link to the page:
<a href=”GPS/TOMTOM_Go_920.html”>
The second is the link (ie reference) to the image:
<img src=”GPS/images/small/TOMTOM_GPS_Go_920.jpg” width=”75″ height=”55″ /></a>

A “link” is mentioned between tags.
But now I’m already working on the HTML code, a little knowledge of this is never good, but actually this is not meant for this course.

I think it is necessary that you know more about this course, I will mention this. But normally you can do everything, or almost everything, in “Design View”, without ever typing a line of code in “Code View”.

If you want to know more about HTML or XHTML, I suggest you google for this on the Internet.


You've completed Lesson 15