Designing Website File Structure

The final aspect of design Web developers have to deal with is the organisation of the files making up the website. This is particularly important if, as is typical, the website is to be developed by multiple individuals, and maintained until some future date. Web designers need to be familiar with the directory structure that a Web server assumes, and what the URLs mean in these terms.

To Do

Read up on Web servers' directory structures in your Web design book, and then go on to read about what an URL means with respect to these structures.

Recall the abstract information architecture of a website, which we explored using the example of a company that sells software development services and programming language implementations:

How would you implement this structure on a Web server? The most obvious way might be to locate the files related to individual pages in their own directories — one directory for the home page components, one for pages A1, A2, A3, B1, and so on. However, this may be excessive and lead to relative addressing mistakes. More importantly, such a design does not anticipate change. If the information architecture reflects departments of a business — department A, department B, etc. — then changes within the departments could cause a large maintenance overhead. A preferable structure might have directories for the main departments only:

The folder for Department A would contain all the files for A1, A2 and A3 — both the HTML and image files (and maybe even the JavaScript files, QuickTime files, etc.). With this structure a link from A1 to A3 might occur as follows:

 <A HREF="A3.HTM#pricelist">See price list for chairs</A>
    

On the other hand, a link from A1 to C2 would have to include a relative file path, as in:

 <A HREF="../DepartmentD/C2.HTM#configurations">See computer 
 configurations</A>
    

In fact, you will discover as you browse websites and develop your own, that it is useful to have a separate set of folders for generally useful components. For example, an Assets folder could contain files for GIF buttons, GIF or JPEG icons, JavaScript programmes, Acrobat PDF documents, and JPEG photographs: