What You Will Learn

The following tutorial walks you through the concepts needed to understand how to indicate path names when creating links to images and to the .js script file. It discusses site root-relative and document-relative path names and how they are used in PluginLab extensions.

When an image does not display or a menu does not work, it is often because the image or the script file cannot be found at the location indicated in the link.

Understanding path names, especially relative path names, can help you troubleshoot problems with your menus.

Before You Start

• If you are not familiar with PluginLab tools, read the tutorial Understand the PluginLab Interface.
• If you have not defined a site in Dreamweaver, read Define a site in Dreamweaver.

 

1. Why are path names important?

Whenever you create a link, add an image, or refer to a file in HTML, you have to define the location of the file. This location is referred to as a "path name" or "address."

How you indicate the path to a specific file when creating a link in HTML can affect whether a Web browser is able to locate and display the object you want it to display.

If you have a different folder structure on your local computer than you do on your Web server, using the wrong path names produces a variety of problems.

The critical piece of information needed to determine a correct path name to a file is the name of the site root folder for the Web site.

In this illustration, we see the local view of a Web site in the Dreamweaver Files panel.

In the following illustration, we see the remote view of that same Web site on the Web server.

The Web site in the illustrations is on a hosted Web server shared with many other Web sites. Rather than an absolute path name at the top of the site, you see the relative path name to this individual Web site. If your Web server is on your local network, then the Remote view may include an absolute path name for that server.

In both cases the site root folder, Pluginlab, is below a folder named "test" (which is the site name) and has the same relationship to all of the site folders and files below the root folder.

If the root folder name and the file structure below the root folder is not identical for both the local files and the Web server files, then you must pay very careful attention to how you use path names and how you upload files from the local computer to the Web server.

Dreamweaver can handle all of the path names in your site automatically if you make all changes to file locations and names in the Dreamweaver Files panel, and if you set up your site definition to do all of the uploading and downloading of site files automatically.

In the example below, we see the folder structure on a local computer for a Web site whose URL is http://www.mywebsite.com.

The page "index.html" and the folders "pages" and "SiteImages" are one level below the root folder, which is "mywebsite."

We will use this site example as we talk about each of the three types of path names used in HTML.

 

2. Choose the Right Path Name

There are two primary types of path names: absolute path names and relative path names.

An absolute path name is a fully-qualified URL, such as:

http://www.mywebsite.com

The drive path on a computer hard drive or area network is also an absolute path, such as:

C:\mywebsite\SiteImages\sitelogo.gif

You use an absolute path to link to something outside your Web site. For example, a link from mywebsite.com to the PluginLab Web site is the absolute path (URL):

http://www.pluginlab.com

In the picture to the right, you see how an absolute path for a hyperlink appears in the code view of Dreamweaver.

A relative path name is one in which the path below the root folder or between the documents and folders within the root folder does specify the absolute path, but only indicates the relationship between the documents or folders.

There are two relative paths commonly used in Dreamweaver, PluginLab extensions, and HTML: site root-relative paths and document-relative paths.

 

3. About Site Root-Relative Paths

A Site root-relative path indicates the link target is in a location relative to the top-most (root) folder of the Web site.

Site root-relative paths are most useful when you are working on a large Web site that has files on multiple servers or when your Web site is on a server that hosts more than one Web site.

If you frequently move HTML files from one folder to another within your site, using site root-relative path names means you needn't change the path names each time you move the file.

Use the Dreamweaver Files panel to rename and move files and Dreamweaver automatically checks all of the links in your site and changes path names as needed.

 

4. Writing Site Root-Relative Path Names

In our example, "mywebsite" is the root folder on a local computer for files used in a Web site.

If we wanted to use a site root-relative path to the image file "sitelogo.gif, " which is in the folder "SiteImages" one level below the root folder, you would write the path name like this:

<img src="/SiteImages/sitelogo.gif">

A site root-relative path is always preceded with a forward slash (/).

 

5. About Document-Relative Paths

A document-relative path indicates the link target is in a location relative to the document containing the link tag. As long as documents maintain their relationship to one another, path names using document-relative paths will always work.

If a file containing a document-relative path name is moved from a folder one level below the root to a folder two levels below the root, the path names in that document must be changed, since the relationship of that document to the link targets has changed.

Use the Dreamweaver Files panel to rename and move files and Dreamweaver automatically checks all of the links in your site and changes path names as needed.

For most Web sites, using document-relative path names causes fewer linking problems than using site root-relative path names.

 

6. Writing Document-Relative Path Names

A document-relative hyperlink to "products.html" from "services.html," which is in the same folder, uses only the file name:

<a href="products.html">

A document-relative link from "index.html" to "products.html" needs to indicate that "products.html" is in a folder below "index.html". This is done by including the folder name and a forward slash in the path name:

<a href="pages/products.html">

A document-relative link from "products.html" to "index.html" needs to indicate that "index.html" is in a folder above "products.html". This is done by putting two periods before a forward slash -../ - to show the target page is one level above the current page

<a href="../index.html">