Dreamweaver: Hyperlinks

Links

Dreamweaver gives the designer the ability to create links easily and quickly. Links can be created with the Properties Toolbar by simply entering the URL of the page you would like to link to.

Text Links

To create a text link, type the text you would like to use as the link and highlight it.

Once it is highlighted, bring up the Properties toolbar and enter the url of the page you would like to link to in the Link field.

Once you have entered the url, simply hit enter and the link has been created.

To create links to documents within your site you can use 'relative urls', which we mentioned in an earlier part of this tutorial. Instead of entering a full web address (http://www), you can enter the filename relative to where your document is. For example, if the file is in the same directory, you can enter the filename. If the file is in a subfolder, you must link to the folders name, followed by a / slash, and then the filename: images/image.gif.

If you wish to link to another document on the web, you must enter the full web address: http://www.domainname.com/filename.html. If you leave off the 'http://' the browser will not know that you are linking to an external document. Instead it will look for the file in your local directory.

Image Links

The process for creating a link with an image is similar to creating a text link. Simply select the image with your mouse, and enter the url in the Link field of the Properties Toolbar.

You can have your link open in a new window by using the 'Target' field of the Properties Toolbar:

All you have to do is enter a value (type anything) and your link will open in a new window. The 'target' attribute is used often in Framesets, which we will cover later in the tutorial.

Looking to Different parts of the Page (Anchors)

You have probably seen web pages with links to the Top, Bottom or Middle of the page. This can also be accomplished easily in Dreamweaver by using the Named Anchor.

Bottom

Find the section of your document you would like to link to and place your cursor there. Then go to the Insert Menu and select 'Named Anchor'. You will then be prompted for the name of your anchor.

If you have configured Dreamweaver to view Invisible Elements (from the View Menu), you will see a small icon that will represent your anchor.

Now all you have to do is create a link to that anchor. This is done with the Properties Toolbar as you would normally do, only now you will use the # Pound sign, followed by the name of the anchor.

When the user clicks on your link, the screen will jump to your Named Anchor. This can be useful on longer pages where you wish to eliminate the need to scroll.

You can link to the same anchor from another document by appending the #name to the end of the filename. This can be done with both relative and absolute urls. For example, you could link to the following: /about/index.html#names. This would take users to the names section of the document.

The Rollover Wizard

A rollover image is an image that changes when the mouse moves over it. Dreamweaver has a wizard that makes it simple to create a rollover image. This wizard can be accessed by going to the Insert Menu and selecting 'Rollover Image'.

Before you insert your rollover onto the page, you must first create the original image as well as the mouseover image. Use your graphics program of choice and create two images at the same size. It's a good idea to name the images so that you can easily find them and know their purpose.

The first image was 100 x 20 pixels. It was named 'image'. The second image had the same pixel dimensions, used the same font (with a different color), and was named 'imageover.'

After you have created the images, you are ready to insert them into the wizard. Select Rollover Image from the Insert Menu

You must first assign the Rollover a name in the 'Name' field. This is helpful if you plan on modifying the rollover later. You must then find the Original Image. You can browse for it on your local computer. Dreamweaver will link to it as it would if you inserted an image in the normal fashion. Once you have the path to your original image, you must do the same with the 'Rollover' image. It is recommended that you leave the 'Preload Rollover Image' checked. This way the browser will download the image when the page loads. If this is unchecked, the browser will download the image when the mouse is moved over it. This could cause a delay until the image is downloaded which would usually lose the effect.

You can also have your rollover go to a certain URL by entering the URL in the last field of the dialog box. In the example above, we used '#' as the url.

Click on OK and you should see the original image on your page. From there you can move it to wherever you would like and can further modify it. You can select the image and have all the standard image options in the Properties Toolbar. You can change the 'Link' field to a new URL. You can add Alt text, a border, change the alignment, assign a target value, etc.

This is not the only way or the best way to insert a rollover into Dreamweaver, but it is the easiest way. We will be looking at a more advanced means of inserting Rollovers when we talk about Behaviors later in the tutorial.