May 16, 2008, 9:56 am

Website Design

File Structure, Naming Conventions and Paths

 

It is vitally important to carefully consider the logical storage of any files held on a web server. Inevitably, a site will grow and making the correct choices now will save work later on.

Naming Files and Folders

Currently this site is housed on a single server. The file storage structure and the file-naming convention reflects my need to group documents covering four distinct subject areas.

The home page is the top level page and it is named index.php. I am using PHP, but if I was serving an html file, this would be named index.htm, or index.html. In the case of this website, when a user enters http://jmcsweeney.co.uk into a browser, it is the index.php file that is found and served. Consequently, one file at the top level must be named index.php, or whatever file extension is appropriate.

The horizontal navigation bar on that page holds links to five distinct sections The folders used to hold each set of relevant files are named:

• painting
• computing
• webdesign
• misc
• search

I use the following naming convention for all files and folders:

• Lowercase for all alphabetic characters.
• The first character is non-numeric.
• No spaces, underscores are employed to "divide" words. I could have named one folder web_design instead of webdesign

The following illustration shows how I organise the file structure for this site. The diagram is simplifed and omits several folders. e.g. the t171 folder, which is nested inside computing. I have also omitted the search folder.

Nesting Folders

• I created one folder and named it images. This is the single instance of an images folder that is not nested inside any other folder. It contains any graphics used in the headers throughout the site. I am currently rotating (by use of some PHP scripting) snippets of some recent pictures.
• Some folders hold other folders e.g. computing contains one folder for each OU course, named m150, m206, t171 (omitted from the above diagram).
• In each content folder I have created another file named index.php. This acts as an introduction page for the relevant section. Again, if I was serving html files, this file would be named index.htm or index.html
• For each category I have created another images folder; computing is slightly different since there is no images folder at the top level - any images folder is nested at the course content level (see diagram above).
• Any php (or html) files are added at the same level as the index.php pages for each specific category.

Paths

One of the most common errors committed when writing HTML, or any kind of Web programming, is the incorrect naming of paths linking files and documents. There are many reasons for requiring the use of path names, but most common are those written for hyperlinks and importing image files to a document. The result of an error in the path name in these instances, will be either a broken link, or a blank space.

To reference the index.php pages, used for each content section (again the search section is omitted here), from a hyperlink on the home page, I use the following naming procedure:

• painting/index.php
• computing/index.php
• webdesign/index.php
• misc/index.php

Conversely, for any index.php page in one of the content sections (or any other page at the same level) to reference the home page, it must "climb" the file structure. This where the use of ../ naming convention comes into play. The following references should, hopefully, make this clearer:

• For the painting/index.php page to reference the home page, the hyperlink must contain this reference,
  ../index.php
  The same applies for webdesign/index.php
• However, for the m150/index.php or m206/index.php pages to reference the home page, the hyperlink must contain this reference,
  ../../index.php
  since in both cases the hyperlink is required to follow a path up two levels

Now for the tricky part. Given the structure in the above diagram, how do I reference, from a hyperlink say on webdesign/index.php, a page that is nested in another directory, say m206/index.php? To implement this, the path name in webdesign/index.php must climb up one level and then descend two levels with:
../computing/m206/index.php

Conversely, for a hyperlink on m206/index.php to reference webdesign/index.php, the path name must climb two levels and descend one with:
../../webdesign/index.php

One final tip when writing path names. Use a relative path, ../../webdesign/index.php, rather than an absolute reference, which requires the writing of a URI (Uniform Resource Identifier)- http://jmcsweeney.co.uk/webdesign/index.php.

A URI specifies a single resource on a specified machine linked to the Internet; relative path names do not. Providing documents with relative path names ensures portability if and when those documents are transfered to another server. The exception to this rule, of course, is when a URI is required to reference an external file stored on another server.

Next page » Browsers

Previous page « Usability Guidelines

Copyright © 2008 John McSweeney