Pulic_Access_Page Dreamweaver 4.0 Tutorial

Lesson Three-Developing Site Content

Understanding Link Categories

Dreamweaver 4.0 permits three categories of links:

  • Absolute paths
  • Document-relative paths
  • Root-relative paths

Absolute Paths

An absolute path provides the complete URL (Uniform Resource Locator) path and includes the protocol to use, such as the following:

http://www.macromedia.com/support/dreamweaver/contents.html

Using an absolute path is necessary when a document resides on another server than your own. While you can use the absolute paths for local links, you will have problems if you move the site's domain. The absolute-path links will break when the site moves. For that reason, document-relative paths and root-relative paths become very useful techniques.

Document-Relative Paths

A document relative path is most useful for local links in your Web site. These paths omit a part of the URL. The following document-relative path is an example:

dreamweaver/contents.html

This link is a document-relative path because the link is internal to a document. If the document moves to a new location, the links can remain unbroken as long as all the links remain unmodified. Document-relative paths usually reside in the same folder.

  • To link to a file in the same folder as your current document you use the file name.
  • To link to a file in a subfolder as your current document you use the name of the subfolder, then a forward slash (/), and then the file name.
  • To link to a file in a parent folder of your document, precede the file name with ../ (the double period means one level up in the folder's directory tree).

Example: Your site folder is the yellow folder. The lavender folder is your current document. You want to create a document-relative path from the lavender folder to the lime green folder. Use the following convention:

../limegreen/skyblue/lavender.html


Figure 14-Document-relative paths of site folders.

Root-Relative Paths

A root-relative path is useful if your Web site is large and you are working with several servers, or a server hosting several different sites.

A root-relative path begins with a forward slash (/), meaning the site root folder. (/skyblue/lavender.html is a root-relative path to a file, lavender.html, in the skyblue subfolder of the site's root folder.)

These types of paths provide the best technique in specifying links to a Web site that you need to frequently move HTML files from one folder to another.

To use root-relative paths, first define your local site in Dreamweaver 4.0 by choosing a local root folder to serve as the equivalent of the document root on a server.

Note: Servers interpret root-relative links, not browsers. You might open a local page that uses local root-relative paths in your browser only to find the links do not work. Use the Preview in Browser command to preview a document that uses root-relative links. Dreamweaver 4.0 temporarily converts those links to absolute file paths (://).

If you are uncertain about using these links, stick to document-relative paths and absolute paths.

Creating an Image Link

In Lesson Two (Page Design Basics, How to Insert an Image), you learned how to insert an image into your Web page. Now we are going to use that same image you inserted into the "Dreamweaver Tutorial Documentation Page" once again. You can link the image in two ways:

  • Select the entire image and link it to another file
  • Hotspot part of the image to link it to another file

First, you will open the "Dreamweaver Tutorial Documentation Page."

1. Click on the STC Logo image to select it.

2. Click on the Modify menu.

3. Click on the Make Link (Ctr+L)


Figure 15-Modify menu with
Make Link command highlighted.

The Select File dialog box appears.

Figure 16-The Select File dialog box.

4. In the Look in: list box, select "About the Society for Technical Communication" folder.

5. In the files box below the Look in: list box, click on Image page.htm file.

6. Click on the Select button.

Your link to the Image page.htm is complete.

Test Your New Image Link

You can test your link two ways.

1a. Press the F12 button to launch your browser.

or

1b. Open the File menu and click on the Preview in Browser command.
(Select the browser you prefer to use with this command.)

2. Click the STC Logo image.

3. After testing your image link, close your browser, and return to the tutorial to learn about Hotspots.

Removing an Image Link

1. Click on the STC Logo image to select it.

2. Click on the Modify menu.

3. Click on the Remove Link (Ctr+Shift+L) command.


Figure 17-The Modify menu
with the Remove Link
command highlighted.

How to Create a Hotspot

A Hotspot is an area you select on an image and then link to a file.

Take note of the Property Inspector panel below. When you select the STC Logo, the Property Inspector gives you a thumbnail of the image, the width and height in pixels, source folder information, as well as other, useful information that you can edit.

1. Click the STC Logo to select the image.

Figure 18-The Property Inspector panel with hotspot tools under the Map text box.

Creating a Rollover Image

Rollover images are images that change when your mouse pointer moves over the image. An image of an adult may become an image of a baby.

To_Glossary Glossary of Terms

Go to: Getting Started | Part 1 | Part 2 | Part 3 | Part 4 | Part 5 | Part 6 | Lesson 1 | Lesson 2 | Lesson 3 | Lesson 4 | Lesson 5 | Lesson 6 | Home Page | About | Administrative | Activities | Constitution | Program | Professional | Treasurer's | How to Join | How to Contribute | .

Copyright © 2001 Chico STC Chapter. Send comments to (jjayj@mail.csuchico.edu). Last Updated: 13 June 2001.