Site Design for a larger site using folders.
Page Contents - Site Design
Up to now you have only used a few web pages and image files. As you move away from a very small site you come into a small to medium site size.
Small to medium site size
As more and more pages and graphics files are added to your
site you may wish to place some of your files into a folder,
to help with the site management.
If you are going to place photographs on your site you will find that these are very large files with long download times. A popular way is there fore to have a page of small thumb nail photograph, which download much faster. The user can then select any thumbnail that they wish to view and this links to a full size version. In this case usually 1 folder contains the thumbnails, and another the full size files. Folders could be given names such as thumbs and photos. The better authoring packages will do this all automatically for you.
This site falls into this category of a small to medium site. If you look at the URL for this page you can obtain information on the sites structure.
Large sites require an organised structure using folders within the site. These are used very similar to folders on your hard drive.
but they can be used your own sites on either your OU homesite or on web sites that you create on third party servers.
The layout of all the files in a large site need to be planned and placed in a logical folder layout.
You need to jot down either using paper and pencil, word processor or spreadsheet your site file layout. Changing this on paper is easy. A trial and error layout done straight to your web site is time consuming to yourself, and annoying to your users, if changes have to be made later. Basically because all links will have to be changed. Remember that your users may have bookmarked some of your pages, these bookmarks will then get a 404 - not found etc. if the layout is changed later.
There will be many possible good layouts for any given set of files.
This is an exercise to see how folders are used on your hard drive. If you are used to using Windows Explorer for say moving files around your system you can quickly read through this exercise without having to do it. If you are a new PC user then do this exercise.
Imagine trying to find some file whose name you are not sure of if ALL files were in a single folder.
Now look at the Windows folder, see how Microsoft has split
the contents into sub folders, many of which intern have further
sub folders etc.
Another interesting folder to look at is the program files
folder. If you have loaded loads of programs this folder may
have become excessively long and perhaps unwieldy.
You could could have a folder structure the same as that within the program files folder, or on the other hand you may decide to decrease the length of this folder and increase the depth.
You could achieve this by categorising the program files and place groups of them into separate folders such as.
Note how I have replaced spaces with an underscore.
Do this either using paper and pencil, word processor or spreadsheet.
You need to be able to indent your work.
All these steps are done using Pen and paper, Word processor
or even a spread sheet
You could place them all in the root folder.
You could place them all in graphic folder in the root folder.
The above 2 possibilities are ideal for all images that appear on several pages or there are not to many graphic files.
Images that are only going to be used in HTML files within
a particular project folder can be placed in that folder, or
in a graphic folder within that folder.
Your HTML editor will probably allow you to create folders, if you are using notepad as your editor then you will have to create them using Windows explorer.
At this stage I suggest you just do the root, project1 folder
and graphic folder (if required)
Create your root index.htm file and when you save it make sure
it is saved to the correct folder.
When inserting images your editor should place the correct
relative address, usually using a browse option.
The location of the file you want is relative to the location
of the current file that contains the reference. Hence the term
Without navigation links users will be unable to move arround your site. Thought should go into your sites navigation. Your aim should be to allow your user to reach any page on your site in 3 or less clicks.
By default navigation text links are blue and underlined, changing to a maroon shade when used. Because of this it is normal for designers not to use underlined words, and to emphasise text in some other way.
Users are used to these default colours, and changes to this default colour must be considered with care.
The normal positions of your navigation is near the top of the page, and / or down the left side. This is not a hard ans fast rule, but is done in these positions by convention.
At the foot of the page
it is usual to have a link to the previous and next page in the series of pages. Alternativly the navigation at the page head is repeated.
On long pages such as this one it is usual to have a page navigation system, seperate from the site navigation system. You should make it clear to the user in some way that this navigation area is for the page.
Long pages often have links to the top of the page. It may be desirable to have these links at regular intervals.
Leisure Time - book your holiday or flights with our UK sponsors
Leeds my home town
Copyright © John McGuinn 2001-03