Different path types

A path is a description of the route from one file to another. For example, if you link page A to page B, the path for that link is the piece of code on page A that instructs the browser how to find page B. Image files for the pictures on a page are also referenced with a path. There are three kinds of paths:

• Document-relative paths.
• Site root-relative paths.
• Absolute paths.
  

Document-relative
A document-relative path describes the location of the file you're going to (the destination file) by describing the route the browser must take from the file you're starting with (the source file).

Here are some examples of document-relative paths: image1.gif

This path means that the image file image1.gif is located in the same folder as the page displaying the image. In simpler terms, the path translates to: "Find a file called image1.gif".

images/image1.gif

This path means that, in the same folder as your page, there is an images subfolder, in which the image is located. In simpler terms, the path translates to: 1 Go to a folder called images (images/).

2 Find a file called image1.gif (image1.gif).

../images/image1.gif

This path means that you have a folder which contains two subfolders. In the first subfolder is your page, and in the second (named images) is your image. In simpler terms, the path translates to: 1 Go up one folder to get out of the folder containing the page (../).
2 Go to a folder named images (images/).

3 Find a file called image1.gif (image1.gif).

Site root-relative
A site root-relative path describes the location of the destination file by describing the route the browser must take from the Web site's root folder (top level in the folder structure).

For example, a site root-relative path to an image may appear as:

/html/images/image1.gif

The "/" at the beginning means the path is site root-relative and indicates to the browser reading the path that it must start from the Web site's root folder.

In simpler terms, the path translates to: 1 Go to the root directory (/).
2 Go to the html folder (html/).

3 Go to the images folder (images/).

4 Find the file image1.gif (image1.gif).

Absolute
An absolute path describes the physical location of a file on a machine or the exact location of a file on the Internet. An absolute path on your hard drive might appear as:

file:///c:\sites\mycoolsite\html\images\image1.gif

An absolute path on the Internet might appear as:

http://www.mysite.com/html/images/image1.gif

In simpler terms, this path would translate to: 1 Go to the web site called www.mysite.com (http://www.mysite.com/).
2 Go to a folder called html (html/).

3 Go to a folder called images (images/).

4 Find a file called image1.gif (image1.gif).

Which type of path should I use?

Introduction
Dreamweaver can create links in two ways, site root-relative or document-relative. This TechNote will outline the major advantages and disadvantages of each type. For a description of both, see Different path types (TechNote 15595).

Note: If you're unsure, we recommend using document-relative paths, which is the Dreamweaver default. Document-relative paths are arguably easier to manage.

Document Relative

Advantages Document relative paths preview better locally. For more information, see Why do my links stop working after previewing the first page? (TechNote 15625).

The levels of the folder structure above the two files can be changed, and the paths will still work. This means you can take a site that is completely contained within a folder, and move it to another folder. All the paths within such a self-contained site will still work.

Disadvantages
If either the source or destination file is moved, the path is broken.

Site Root Relative

Advantages
If the source file is moved, the path remains intacts. Moving the destination file, of course, will still break the path.

Disadvantages Site root-relative paths do not preview perfectly locally.

There is no 'site root' locally, so to preview site root-relative paths in the browser, Dreamweaver simulates a site root by passing additional information to the browser. Issues with this simulation, which is necessarily limited, are described in: Why do my links stop working after previewing the first page? (TechNote 15625).

The entire folder structure on the server (up to the site root) must remain unchanged, or paths will break.