Understanding Links and File Structure

The links that you create depend on the file and folder structure of your site. It is good to understand how the paths work when creating links. The following illustration is an example of a possible site structure.

When you create a link to any document that exists outside the folder in which the current document is located, the path for the link will include the characters ../ preceding the filename. ../ is a command that tells the browser to go up one folder level from the current location. Each instance of ../ indicates moving up one folder level; you might have something similar to ../../filename.html to link to a document that is located two folder levels above the current directory. For instance, in the previous example, the path of a link from the books.html page to the about.html page would be ../../about.html. In Dreamweaver, you do not need to use the ../ characters unless you are inserting links by typing them directly into the link text field. If you are not sure of the proper path, you should browse to select the desired file. Dreamweaver will determine the appropriate path for you.

You'll also notice that there are multiple index.html files in the preceding sample site structure. The filename index is a standard name for the default file of a folder or directory on many servers. These default files do not need to be specified in the URL. The visitor is automatically taken to the default file of a folder if no file is specified. In the previous example, a user could simply type the domain name followed by /gardens to get to the index page inside of the gardens folder. The filename index.html is the most common, but other names for default files include default.html and home.html. Many types of extensions can be used, but your server might need to be configured to recognize index files with extensions other than .html or .htm. Check with your server or host to find out how it is configured.

When you link to a document that exists in the same folder as the current document, the path for the link will be the name of the linked document. When you link to a document that exists in a folder inside the one in which the current document is located, the path for the link includes foldername/ preceding the filename. foldername/ tells the browser to look in the specified folder, and that folder is located inside of the current directory.

As you develop your site, you might find it necessary to move files or even entire folders to different locations. Using the preceding example, suppose you move containers.html into the indoors folder. Any links or other paths that are included in the containers.html document need to be updated, as do any links from other files to that document. If those paths are not updated, the paths are "broken," meaning that links and images no longer work. As you move files, Dreamweaver automatically updates the paths for all links, images, and other media in your site as long as you make all changes within the Dreamweaver Files panel. If you make any changes outside of Dreamweaver, such as through Mac OS X's Finder or Windows Explorer, Dreamweaver has no way to track or maintain your files.

Tip

Macintosh users can Command+click on the filename in the title bar of the document to view the hierarchy of folders from the hard disk to the file.