This is sort of a follow up to my previous article, No Broken Links. There I discussed the external presentation of a website. Here I'll go over the slightly less important internal layout of a site. By that I mean, the files that aren't directly linked, but are still page requisites. That is the images, style sheets, any files required to display the page.

I say this is less important. In one way, presenting consistent, persistent, links, it is totally unimportant. But in creating a site that is easy to maintain, this bit of planning can play a big role.

First a quick review of absolute verses relative links within a site. Absolute links will start with a slash, (i.e. href="/..."). They will always point to a file off of the root of your site. You should use them sparingly, only when you don't know where inrelation to your current directory the file you are trying to reference is located. That brings us to relative links. Most of the time they will just name a file in the current directory, (i.e. href="file"). But they can be to a file in a sub-directory (href="subdirectory/file"). There is a special set of characters that also allows you to talk about the directory above your present one, that is a double dot, (href="../directory_beside_current"). You can use any combination of these you need to select just the right file (including multiple double dots "../../" to go up two directories or more).

So now you can select your files no matter where you place them. But that's just it, where do you put them? I'll use an external style sheet as an example. If you want every page on your site to look the same the easiest way to do it is to have them all use the same style sheet. You'd place a line like: <link rel="stylesheet" type="text/css" href="/style/default.css" title="Default" /> in the head of your HTML document. The important part is of course the href. You can see I'm using an absolute reference here. That is because I want to use the same line on every page, no matter if they are in the root of the site, or twenty directories deep. You can also see that the file "default.css" is in a directory called "style". This is one of the little things that doesn't effect how a site works at all, but makes it easier to maintain. Style sheets allow one to totally redesign the look of a site by just editing one file. Simple styles will only use colors, fonts, and spacing to do the layout, but more complicated ones will load background images for various elements. It is nice if you can keep all those graphics together. So what I do, is create a subdirectory of the style directory with the same name as the CSS file, minus the .css extension. So in this case, beside my default.css file, I also have a directory called "default", that holds the files referenced in the style. So I can have two different styles both with files named "background.jpeg" and not have them conflict with eachother, as they are safely stored in their own seperate directories.

The other directory I some times create off of the root is "images", here I will put any image that is needed by mutliple pages all over the site. Navigation arrows would be an example. So no matter what page in what directory, I can always make the absolute reference to "/images/left.png", and get my left pointing arrow. As for images that are unique to one page, if you followed my advise from No Broken Links, you'll notice an added bonus gained by creating a directory for every page. If you have a page that has some graphs or just pictures that will not be used anywhere else on the site, you have a perfect place to store them. Right there in the directory containing the default index file. That way you can load your graphic, with a simple, relative href="graphic".

To wrap up. If you have generic files that need to be loaded anywhere in the site, group them together in the root of your site, and use an absolute link to them. Otherwise stash the unique files right in the directory you made for the file that calls them.