Planning Your Site Structure

Make sure that you can see all the files and their extensions
(you will not be able to do this on the college machines)

Open Windows Explorer from the Start / Programs menu. When it has loaded choose 'View' from the top pull-down menu and select the 'Details' option. Again choose 'View' from the top line and select 'Folder Options' at the bottom of the pull-down. When this has loaded, click the 'View' tab and check / uncheck the following boxes :

Files and Folders settings : check 'Show all files', uncheck 'Hide file extensions for known file types'

This will enable you to see ALL of the files in a directory, along with their file extensions. BEWARE! You will now be able to see, and delete system files. If you delete system files you may cause your computer to crash.

Create a Projects Folder for your work

To make your web site transferable you should keep all of the files together in one folder. In the following example I have created a folder on the C drive (primary hard drive) called 'Projects'. In this folder I have my list of current projects (!?) as sub-folders. In each of these sub-folders I have put further sub-folders to hold relevant files to the project. The most important to us at the moment is the 'Fluffy Kittens/site' folder. This is the 'root' folder for the site. EVERYTHING NEEDED FOR YOUR SITE TO RUN MUST BE IN THIS FOLDER OR ITS SUB-FOLDERS. This means that when you upload the site you can transfer the contents of the 'site' folder as a whole.

Notice that as soon as we get to web site folders, 'site' onwards, I use smaller case names with underscores instead of spaces. The exception is an .apj  file which is required by Allaire Homesite to maintain the project. This file will not be uploaded to the web site, though it would not matter if it was, as it is not used by browsers (neither is the ws_ftp.log  file).

Windows Explorer tree of folders for 'C:\Projects\Fluffy Kittens\site\'

NOTE : There is no problem with creating a project folder on the desktop, or anywhere else on a drive. Just remember where it is. You can create a shortcut to a folder and place it on the desktop to make finding it easy.

Root of site
REMEMBER : The first file the browser will look for in a site is called index.htm, or index.html (we can safely forget about the 'default.htm' & '.html' files, as they have fallen out of use and favour).

Keep the contents of the web site folder to as few files as possible. If this folder becomes cluttered with gifs and jpegs, along with all the HTML files for every single page of your site, it will become hard to manage. Consider using sub-folders, e.g. products or technical, splitting the site up as you do on the site planning tree. Once these sub-folders are created, you should consider sub-folders within them for things like images and pdf (portable document file) files.

For example :

images/
Logos, pictures &: buttons, used in a small site of 6 pages or so.

products/
All pages relating to the products branch of your site tree.

products/images/
All logos, pictures &: buttons, used in the products section.

Here's a few other guidelines for the site architecture, just to keep things tidy :

  1. All filenames and file extensions (.html) should be lowercase alphabet and numbers. There should be no use of spaces, but where necessary, these should be replaced with the underscore '_' character. Names should be descriptive, but fairly short and concise. (eg product_spec.html or prodspecs.jpg). This is to make the site totally transportable from host server to host server. Some web servers cannot handle upper case letters, and so convert the case of the filename on upload. Since the web is case sensitive wrt filenames, if this happens, your browser will not be able to find the file.

  2. All NEW file extensions for HTML should be .html. Some files you find will still have the old DOS .htm extension. You can safely assume that your web site will not be hosted on a DOS server. Other applications will keep their recognised file type extensions (eg .swf for shockwave flash).

  3. All Java Applets and Flash files etc. must be embedded into an HTML document at some point (though Flash movies may be embedded into other Flash files!). This is to enable control and meta-tagging of the pages. It will also allow Flash plug-in download if someone accesses the site by any other means than the main navigation.

  4. If another application e.g. Adobe Acrobat is used, the .pdf files can be opened into a separate window with a suitable target name, e.g., 'acrobat'. This is added at the <a href="catalog.pdf" target="acrobat"> stage.

Tree, linear and mesh models to follow...

Back

Back to Home