DreamweaverMX Tutorials

3. Site Management

3.4 Path Structure

There are two ways to write the path (URL) to a file or element, either relative or absolute. Most Web developers prefer relative paths because they are easier to manage for testing and when sites change.

An absolute, or full, path looks something like this:
/dmwork/dw/3_site_mgmt/4.html

In this instance, we are specifying the path, beginning at "root" -- it's ideal for the Web path and local path to "match."

site panel showing path

Relative paths describe where a file lives "in relation" to other files in the site.

Path Notation
document.gif	No forward slash (/) or dots (..) indicates this file is inside the same folder as the referring HTML file.
images/document.gif	The forward slash (/) indicates this file is inside the images folder; the file is located one level below the referring HTML file.
../images/document.gif	The two dots (..) indicate this images folder is located one level above the referring HTML file.

Next: Accessing the Web server

this lesson

Exploring paths
1. Open lesson_2_property.html in DreamweaverMX. Select Code view. Scan the document, looking at the various relative paths -- which files (links - hrefs or images) live "above" this document? Do any live below it?
2. Open in Dreamweaver. Select Design view. Use the Property Inspector to determine paths to images and hyperlinks.
Creating new folders
1. Using the DreamweaverMX Site Panel, create a new folder inside your local site; name it 03_media
2. Right click on these two images and download to your desktop: image 1 and image 2
3. Browse your hard drive with the DreamweaverMX browser. From the Site Panel, click the Desktop (win) or Computer (mac) icon. Click and drag the images onto the local root folder at the top of the Site panel, then release the mouse. DreamweaverMX will copy the images.
4. Now open the local root folder. Click and drag the images into the new 03_media folder.