File Organisation

1Based on my earlier experience with Microsoft Frontpage, the issue of hierarchical containment of all source files required by the website, as a whole, was considered as another fundamental design decision. In practice, a single webpage may now comprise of a 'collage' of many types of files, i.e.

  • Hyper Text Markup Language
  • Cascaded Style Sheets
  • Javascript
  • Potable Document Formats
  • Java
  • Images
  • Equations
  • Animation
  • Video
  • Audio

While you might put all these files in a single folder, this will quickly lead to naming issues in that each 'collage' of page files needs some common link to bind them, while being sufficiently different to uniquely identify each page within a website, which may consist of hundreds or possibly thousands of page files. However, organising these files into some hierarchical folder arrangement, e.g. based on topic, can be equally as problematic when it comes to re-positioning pages within the hierarchy of an existing website.

So what approach was taken by this website?

To some extent the solution adopted was actually driven by the navigational tree being developed and, as such, each page was assigned a unique numeric reference plus some descriptive label, e.g. 26.files. Where this webpage sits within the hierarchy of the website is determined by its position within the navigational tree structure, e.g.

;0;1;Home;Website-2 Home Page;
   ;1;22;MyWeb;The MySearch Website & Forum;
      ;2;23;Design;Web Design;MySearch,Web,Design;
      ;2;24;Content;Content Development;
      ;2;25;Navigation;Web Navigation;
      ;2;26;Files;File Organisation;
      ;2;27;Updates;Update Automation;
      ;2;28;Javascripts;Javascript Automation;
         ;3;29;TopMenu;Top Menu;
        ;3;30;TreeMenu;Tree Menu;
        ;3;31;PageMenu;Page Menu;
        ;3;32;Sitemap;Sitemap Menu;
     ;2;33;Forum;Server-Side Forum;

In this illustrative example, the first number defines the hierarchical level of the page within the website, e.g. 2, while the second number, e.g. 26, is the unique numeric reference followed by a descriptive label, e.g. Files. As shown, the numeric reference does not define the position within the hierarchy, as this is actually determined by the position of the line within the tree structure definition file, as illustrated above, which is discussed further under the heading Update Automation.

So how does this help determine the file organisation?

Each file, associated with a given webpage, has a common numeric reference, irrespective of type, which is then followed by some suitable descriptive label for that file type. As such, all the file types as defined in the list above can reside in a single folder reserved for that file type. This means that the complexity of the webpage hierarchy changing over time imposes no overheads on the underlying file structure.

Are there any run-time implications associated with this file structure?

Again, as an illustrative example of the HTML source, the following code contains the <title> of the webpage in tags within the <head> section of the file. This <title> tag is then displayed by most browsers in a tab so that the page can be identified and then easily located within the HTML file folder.

<html>
<head>
<title>26.Files</title>
</head>
<body>
<div id="content">
<h1>File Organisation</h1>
Content text with following image embedded
<img height="634" src="../images/pictures/26.1.jpg" width="270">
</div>
</body>
</html>

Likewise, any file associated with this webpage, e.g. 26.1.jpg, is also prefixed with the same unique numeric reference, which can then be located in its appropriate file folder. Clearly, this approach can be extended to all file types linked to a single webpage. Of course, some files, such as style sheets and javascripts, can be shared by multiple webpages, such that they do not required a unique numeric reference, only a unique descriptive label. To-date, this scheme has worked very well in the face of many hierarchical changes to the overall website. How these changes are managed is discussed under the heading Update Automation