The Page Layout

An attractive page layout is essential. If you want your visitors to stay and look through your pages, you've got to make each page easy to read and make your guests want to read them. All this is very much a question of personal taste, and I've tried to lay out below the things that I think are important -- you can take it or leave it because your opinion is likely to be as valid as my own.

Navigation

Getting from page to page on your site should not involve the user in using the Back button on his/her browser. Each page should provide a method of connecting to all the other pages which are likely to be of interest to a person reading the page. Don't rely just on links within the text. The user will have to read all through the document to find these links. Provide a menu somewhere on the page -- this can be at the top or bottom, or on one of the sides of the page.

There are several ways of providing a menu. A simple text menu may do the trick -- you could lay it out like the one at the side of this site's Home Page or perhaps put it at the bottom or top of the document like the one at the bottom of this page.

Another popular way of providing the menu is to use an imagemap. This is a single image on which the user can click to navigate around your site. The image is divided into "zones", and each zone can be allocated an individual link. It is possible to create imagemaps manually (but it makes your ears curl and your hair drop out!), but it's much easier to use a program like Map This which is specially designed for the job. Map This is a free program and you can download it via the Download Page.

Once you have created the zoned image you need to insert it into your page like a normal image but with an extra piece placed inside the <IMG> tag like this (the extra part is shown in bold below):

<IMG SRC="nav2.gif" WIDTH=122 HEIGHT=600 BORDER=0 USEMAP="#Nav2">

The links are placed in your document in the manner shown below using the <AREA SHAPE...> tags worked out by Map This:

An alternative to the image map you can use separate images as links, like the ones used at the top left of this document.

Whichever method you choose, make sure that all the links work and that they are relevent to the page being viewed -- don't, for instance, include a link to the current page!

Columns and Margins

While you can (and in a few cases should) lay your page out as a single-column document, it adds interest to a page if it is laid out in columns. It might be a simple two-column layout like the one used here with the navigation links in the left-hand column and the document itself in a larger right-hand column, or you could divide the text itself into several columns. This latter arrangement often works well where you have a number of small illustrations scattered throughout the document.

The easiest way to put text or images into a column format is to use a table to contain them. The table is also useful because you can put a small (blank) column on the left and right of the page to provide page margins. Adding margins can make a huge difference to the appearance of your page.

The Foot of the Page

This is purely my own personal preference, but I like to place a standard piece at the bottom of each page. If you look at the end of this page you will see that I have put there, among other things, my copyright notice (a bit of vanity on my part -- who'd want to copy them?). The copyright notice also provides an e-mail link to me.

More importantly I have put a note of the date that the page was last updated. This can be important if your pages contain information which might get out of date. There's nothing worse than getting information from a web page only to find that it's more than a year out of date.

I also like to give the full URL of the page. If your visitor has reached the page by an unusual route they may not be able to bookmark the page in the normal way. If you show the full URL they will know where they are. Also, if the user prints the page, the URL will automatically be included (although most browsers now put this information in the printout themselves).

Many companies that provide web space make it a condition of using their servers that you include an acknowledgement of their service and a link to their home page. The foot of the page is a convenient place to put this.

Continue now to the next section of this tutorial to find out about Being Nice to Your Visitors.

[Next page] [Previous page] [Contents] [Home Page]

Top of Page

This page hosted by

Get your own
Free Home Page

Terry Franks
is a member of