Site Organization

The Need to Organize Site Files

we have placed all our site files into the main (root) website folder.  As a website becomes larger and more sophisticated, a single folder becomes too cluttered to manage effectively.
organize

Relative Paths

Once we move site files to subfolders, we need a way to tell the browser where to find them.  To do this, we use relative paths:
relative-path

Absolute Paths

A common mistake committed by novice web designers is to copy and paste the full path to a local file in their markup:
absoluth-path
This can be a frustrating error, as the browser on our own computer can locate and display the image.  But when the site is uploaded to a live web server, the image won’t appear, since the location is no longer valid.

External CSS Style Sheets

Our earlier example of an external CSS style sheet assumed the actual CSS file was in the same directory as the XHTML file.  Now that we are better organizing our site, we should move the CSS file to its own folder:
ext-path

Relative Paths in Style Sheets

As we know, CSS style sheets can set background images for elements.  Now that the style sheet is in its own folder, we need a way to point the CSS file to an image that is located up one folder level and then down into a different subfolder:
relative-path-style

Advertisements