Site Design for a larger site using folders

This Page's Contents

Lesson Introduction

Site Design: Folder Layout

Exercise 1

Exercise 2

Navigation

JavaScript Navigation

Site Navigation Position

Page Navigation

Lesson Introduction - 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.
Often when a folder is introduced it is to hold the graphic files, and popular names for the folder are either graphics or images.

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

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.

Larger Sites

Large sites require an organised structure using folders within the site. These are used very similar to folders on your hard drive.

The layout of all the files in a large site need to be planned and placed in a logical folder layout.

Site Design: 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.

Exercise 1

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.

1. Open Windows Explorer in the left pane
2. If there is a + sign icon along side the (C:) click the + sign to open up the C: drive. Look at all the folders (Yellowish folder icon) show underneath.
3. Note how some of these folders have + sign icon along side them. This means that there are additional folders within that folder.
4. In the menu bar, Click View. In the centre of the drop down menu there is a section, with the following choices: Large Icons, Small Icons, List, Details. You may wish to note the one that is currently selected so that you can change back, if you wish.
5. Select Details
6. Click View again, Folder options, select the View Tab
7. Ensure there is a tick in the box Display the full path in the title bar and no tick in the box Hide file extensions for known file types.
8. Click OK
   
9. This setup allows you to see the file information that is useful to an up and coming web master. Note your HTML editor may also provide similar information.
   

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.
Does the layout look logical
Look at the pattern of folders and sub folders.
Visually think of replacing the the actual names with suitable names of your website.

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.
Assume you have decided to do a web site describing how all the programs on your computer worked. You have decided that for each program you would have several pages and lots of graphics.

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.

utilities
programming
ms_applications
web_tools
graphic_programs
browsers
html_editors
etc.

Spaces CAN NOT be used in file names, folder names, URLs, id names, & anchor names

It is common practice to use one of the following methods to replace the space in
html editors :

• Replaced spaces with an underscore _  e.g., html_editors
• Replaced spaces with a minus sign -    e.g., html-editors
• Just remove the space                       e.g., htmleditors
• If you want the appearance of a space you can hard code it in using %20, e.g., html%20editors

Exercise 2
Prepare a layout of folders and files for your site.

Do this either using paper and pencil, word processor or spreadsheet. You need to be able to indent your work.
You may have learnt how handy Web pages are for taking notes. Indentation is not as easy to do as in the other mediums suggested.
Use indentation for your folders and sub folders
Remember that all of them will be placed within 1 folder your root folder, you will give this a name suitable to what you are doing, like my_church_web_site, for simplicity I will use mywebsite The name does not matter, it is only going to be used on your hard drive. If you have obtained a domain name, mydomain.com, you could use mydomain for you folder, but as I say it does not matter. If you are doing many web sites then using mydomain for the mydomain.com website makes things easier to find.

All these steps are done using Pen and paper, Word processor or even a spread sheet
Note how I do not use spaces in the names, and use lowercase. This can prevent possible problems on certain servers.
When you do these steps use names that are relevant to your site, put keep the names short.

Step1. -
Write down the name of your root folder and place your home page in that folder. It is normal to use index.htm for your home page. I will place (folder) to indicate a folder. Your home page will contain links to take you into the site.

mywebsite (folder)

index.htm

Step 2.
Add the names of your major folders, I will call these Projects.

mywebsite (folder)

index.htm
project1 (folder)

    index.htm
project2 (folder)
    index.htm
etc.

Step 3
Enter the pages into the folders, note each folder shown have an index.htm file in it. This prevents users from seeing your sites directory, which is possible on some servers.

mywebsite (folder)

index.htm

project1 (folder)

index.htm
p1page1.htm
p1page2.htm

project2 (folder)

index.htm
p1page1.htm
p1page2.htm
etc.

Step 4.
Decide where you are going to place your graphic files, this may depend on the number of files.

You could place them all in the root folder.

mywebsite (folder)

index.htm
image1.gif
image2.gif

You could place them all in graphic folder in the root folder.

mywebsite (folder)

index.htm

graphic (folder)

image1.gif
image2.gif

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.
If a site has 1000s of images then you may like to give a graphic folder sub directories. May be for Navigation images (rollovers), Family photos, City photos

mywebsite (folder)

index.htm

graphic (folder)

graphic (folder)
navpics (folder)
famypics (folder)
citypics (folder)

When you are happy with your layout you can start to put it into practice. But do this in small easy stages, so that you can check out that links and images are working.

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)
Place the graphic files in the correct folder as decided.

Create your root index.htm file and when you save it make sure it is saved to the correct folder.
IMPORTANT Your site will contain several index.htm files it is easy to overwrite the wrong one, destroying a lot of hard work. When you save you may like to save a backup file with a different name may be indexroot.htm indexproj1.htm.

If you put the HTML pages and the images in separate folders how does the web server find them?
You do not need to worry about this. Because when you upload your local site you upload the same folder structure as on your hard drive, so everything within your mywebsite folder is uploaded, usually in stages as you create it. The root folders name mywebsite is not uploaded.

When inserting images your editor should place the correct relative address, usually using a browse option.
Check the source code if you have any reference starting C: you have done it wrong
Because you are using folders you will probably find some thing like ../
this means up one level in the folder structure
To go down a level the folder name must be added. So your link to p1page1.htm from the index.htm file in the root folder would look like
"project1/p1page1.htm"
to go in the opposite direction
"../index.htm"

The location of the file you want is relative to the location of the current file that contains the reference. Hence the term relative addressing

Navigation

Without navigation links users will be unable to move around 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.

JavaScript Navigation

The rollover images of JavaScript Navigation can look nicer than plain text navigation, but there are two things that you should bear in mind.

1. Page download time is increased.
2. If javascript is disabled, you do not have javascript navigation, a text navigation version should also be on your page.

Site Navigation Position

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. Alternatively the navigation at the page head is repeated.

Page Navigation

On long pages such as this one it is usual to have a page navigation system, separate 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.