file structure : 

stay organized

When building a web site, it's essential to create a folder/directory structure on your computer (or zip disk) to accommodate your whole project. Inside this master directory structure (which has more than will be on the web server) there will be folders for master art files (e.g. Photoshop docs), flash files, sound files, etc. In addition, there will be a folder that only contains the html files, GIF files, and JPEG files that are part of the web pages--this sub-folder will mirror the structure on the web server. You must keep your files separated into different folders so that files stay organized and easily accessed, and so that extraneous files do not get uploaded to the server. Photoshop files should never be uploaded to the server.

To start the project, create a new folder, and then create several new folders inside this main project folder. A typical folder structure is like the following (the brackets "[]" indicate a folder/directory):

• [] project0
  • [] proj0_site_v1
    • index.html
    • products.html
    • [] images
      • grape_leaves.jpg
      • sub_head.gif
      • title.gif
  • [] source_files
    • breakdown.psd

It is critical that you set up this empty directory structure before you start working on your web site. If you attempt to organize your files after you've made the site, you will, in all likelihood, break the links in your web pages.

File references in web pages are used for links among web pages, and for placing images in a web page. The file references can either be absolute or relative to the current document. Absolute file references include the complete path to the image, and will work regardless of the relationship of the web page to the file. Here is an example of an absolute file referece:

http://mdp.artcenter.edu/~vanallen/index.html

In most cases, you should NOT use absolute file references. Instead, relative file references should be used. These depend on the relationship of the web page to the file being referenced. For example if a web page were in the same directory as the web page with the link, then the link would be like this:

products.html

If the link is to an image in an "images" directory below the refering web page, the relative file reference must include the directory name. For example:

images/grape_leaves.jpg

Finally, if an image is above, or in a parallel directory next to the refering web page, two periods ".." must be used in the path to indicate "go up" one directory. For example, assume a directory structure like the following:

• [] proj0_site_v1
  • index.html
  • [] products
    • index.html
    • products_info.html
    • [] images
      • grape_leaves.jpg
      • sub_head.gif
      • title.gif
  • [] sales
    • index.html
    • sales_info.html
    • [] images
      • logo.jpg

Suppose the sales_info.html file needed link to products_info.html in the products directory. The file reference needs to go up one directory from sales.html (using the ".."), then down to the products directory and the file itself. The file reference would like this:

../products/products_info.html

The ".." changes the starting point to the proj0_site_v1 directory.

It is best to use relative file references for the following reasons:

• If the web site is moved to a different location--either to a different directory, or to a different server completely--the relative file references make the transition simple. Since the files are moved together, their relationships are maintained and no changes to the HTML are required.
• The file references are shorter.

Note: Sometimes Dreamweaver puts absolute file references into your code. For example, if your page reference files on a different disk drive, or if you haven't yet saved the page (always save first before making any links or inserting images!), or when saving the web page to another disk drive. These absolute file references will never work when the site is placed on the server.

If you need to move a web site, say from your hard drive to a Zip disk, do not move the files in Dreamweaver. Instead, exit Dreamweaver and copy the entire site directory to your Zip.

If you find that all your images and links suddently stop working, it is likely that your file references are broken. To check, click on the link or image, and look at the file reference in the Property Inspector. If it has a long file reference that is likely the problem. You can use Edit>Find and Replace (select Source Code) to get rid of all the extra references and leave just the relative references. For example, change:

file:///BigDisk/Library/WebServer/Documents/images/apache_pb.gif
--TO--
images/apache_pb.gif

By finding "file:///BigDisk/Library/WebServer/Documents" and replacing it with nothing.

all materials on this web site © copyright 2003, Philip van Allen