intro | design software | page elements | site structure | measurements | fonts | images | colours | layout | tables | templates

the studyzone | web design | course tasks: 1 | 2 | 3

the basic principles

how pages make a web site

site structure

This is all about how the individual pages relate to each other. Some will need to link to many pages, some just to one or two. There will be main pages, perhaps called 'first level' pages and then sub-pages or 'second level' pages. There may be groups that just cover a particular topic and single pages like a site index or a global contact page.

A common site structure would be a single home page which leads to all the first level pages and then each of those may have second level pages with more information or illustrations about the content of the first level page they relate to. There may even be an album page, for example, which might be a third level page relating to one of the second level pages.

This can be represented as a tree, with the home page at the top and other levels spreading out as lower branches.

Visitors would be able to go fom page to page by following links. A home page may have links to all the first level, or main pages, but not to lower level pages. A lower level page would have links to the main pages, usually, and always links to its sub-pages but seldom to another page's sub-pages.

File and folder names

Although you can call pages almost anything you like, you can make life a lot easier for yourself and for visitors by being smart with names and deciding these before you start wherever possible.

A web site comprises web pages (sometimes called html pages) and images. There may also be a few other types of file but we can leave those for now. All these files need to go in a single folder. That folder can then be moved from computer to computer and the site will remain intact. In fact, you could preview a site on any computer in a browser without using the internet. If everything looks good and links work locally then you can be more confident that they'll do the same when viewed on the internet by others.

If you have lots of pages then it makes a lot of sense to group them in folders or sub-folders. So if you have a product area on your site then you might have a products folder containing all the pages with product information. All your images should be in a folder called images too, possibly with sub-folders where appropriate. For a small site, just an images folder will do.

Choose sensible names for folders and don't use spaces or capital letters. The same for files. If a page is about products, call it products.htm (most software will add the .htm bit). If the page is about courses, call it courses.htm. If you have two pages about courses, call them courses1.htm and courses2.htm or, better still, courses-intro.htm and courses-advanced.htm or whatever suits.

Let's say you have lots of courses with the topics flowers, cars, dogs, cats etc. You could have the pages in a folder called courses and name the pages flowers.htm, cars.htm, dogs.htm, cats.htm etc.

On the web site, the address of these pages would then be something like yoursite.com/courses/flowers.htm etc which sort of makes sense. People know where they are and smart users may even be able to guess some addresses which will be helpful in future and, in particular, they are easy for you to remember if you want to give someone a direct link to a page.

If you use space, browsers will insert %20 instead of the space in the address. So a page you called dogs and cats.htm would appear as dogs%20and%20cats.htm. Yuck!

There is one special page file name you need to know too. It's called index.htm. That is the name you must give to the home page of your web site. So when people go to yoursite.com they arrive automatically, thanks to browser technology, at yoursite.com/index.htm which is your home page! If you call it anything else they will get horrid Page Not Found error messages or worse and you may never see them again. More to the point, they won't see your site.

The index file name can also be very useful in sub-folders. In the courses folder, for example, you could have an index.htm page too which might have a summary of all that's available and links to course pages. The web address of that index or courses home page would be yoursite.com/courses. Lovely. Nice and simple. People don't have to type the file name at all.

There are other possible names for home pages like index.html or index.php or similar. Some would only be used for particular types of web site construction and aren't covered here. You may need to know about index.html though. Some web servers, the place where all your site files are stored, need to have a file called that and may not recognise the .htm version alone. The domain or web space instructions will tell you about this and, if you are unsure then a good trick is to make a home page and save it twice - once as index.htm and again as index.html. It may be frowned on by the purists but it works. Alternatively you could use the .html suffix for all your pages. Some software will do that by default anyway. The version of Dreamweaver on this course, though, doesn't. You get .htm unless you type the longer suffix.

You'll also see that I've used lower case letters througout. This is not absolutely essential but I do recommend it for an easy life. If you are consistent then you won't have problems. Most browsers will treat Courses as being different to courses so if you mix them up you'll find links don't work and it may not be very obvious why not. This applies to folders as well as file names.

You'll notice that web addresses are always lower case so it seems sensible to me to keep the folder and file names that way too. Occasionally, you'll see addresses with capitals in print or in page content - like YourSite.com or FredAdams.co.uk. This is purely a visual thing and, in the latter case, is helping to make it clear that it's not FredaDams.co.uk! The actual address on the web will still be all lower case - the Fred and Freda addresses being identical as to where they go.