during lab

Linking

Creating links is a simple, and very important, task when creating a web page.

You will learn how to create internal, external, and e-mail links in lab. Linking is extremely important for web design - luckily it is also extremely easy to make links. Regardless of the type of link you wish to create, the person browsing your web site will need something on which to click! You can use words or images to create links.

External Links

To use text as an external link, simply type out some words, highlight the words you wish to use as a link, and then place your insertion point into the link box of the property inspector at the bottom of Dreamweaver. If you cannot find the property inspector, use the keyboard combination of CRTL-F3 to open it. When typing in an external link you need to type in (or copy and paste in) the entire URL including the http:// protocol.

To use an image as an external link, click once on any image to select the image, place your insertion point in the link box found in the property inspector, and type in the full URL to which you wish to link.

Internal Links

The creation of internal links was discussed in lab 2 when you created a link from your index page to your resume. Here is a quick review of the three ways to create an internal link:

Linking using the file pointer:

When you highlight text on the screen, the properties box will allow you to set a link for the highlighted text by dragging your mouse from the point to file icon to the file you to which you are linking. The image below has the point to file icon highlighted in a yellow box, and the image is showing how your screen will appear while using the point to file icon. Remember - you must highlight the text before using the point to file icon.

link using the point to file icon

Linking using the folder icon:

Another way to create a link to your resume is to use the folder icon. The folder icon is found to the right of the point to file icon. This method still requires the user to first highlight the text that will become the link. Then, the user will click on the folder icon and search inside the site folder for the file he/she must link. Double clicking on the file will create the link.

Linking by typing in the path and file name:

In the image above, you can see how using the "point to file" method will automatically type in the file name in the link box. This is also true for the folder icon method mentioned in the above section. Using the two methods above are recommended because Dreamweaver types in the file name and path to the file for you, eliminating all risk of user error. However, if you wish to type in the file name and path yourself, you are able to do so. Simply highlight the text that will become a link and type in the correct file name and path, hitting the Enter key to complete the process.

All three methods will work - use the method that is easiest for you!

lookout Note: If you did everything correctly and your link still does not work, check the following:

1. If you typed in the link yourself, check for spelling and a correct path - when creating a link, everything is case sensitive. Try using the point to file or the folder icon method to create your link.

2. If your link still does not work, make sure you do not have a / in front of your file name in your link box. Having a / in front of your file name indicates that your internal (relative) links are set up relative to the site root instead of relative to your current document. To fix this problem, highlight the link, click on the folder icon, and in the select file dialog box change the option at the bottom from "Relative to site root" to "Relative to document". Save your page and test your link. If it still does not work, please contact your lab instructor for additional help.

E-mail Link

E-mail links are designed to facilitate contact between you and your web site visitors. Visitors should be able to click on an e-mail link and have their default e-mail program open up with your e-mail address typed into the "to:" line of the e-mail.

You can use text or images to create an e-mail link. Insert your text or image, select the text or image, and then click on insert...e-mail link using your menu bar. Once the e-mail link dialog box opens, type in the e-mail address you wish to have e-mail sent to when the link is clicked. Hit OK and the link is complete.

Your lab instructor will demonstrate each of the links discussed above and your lab book goes into great detail using images and examples in its explanation.

Using Images to Create Links

To use an image as an internal link, click once on any image to select the image, and then use any of the above techniques to set the link for the image. Images can be used to create external, internal, and e-mail links.