HOME © Michael Thompson

[ Color Tool ]     [ Choosing Colors ]    [ HTML Colors ]    [ Netscape Colors ]    [ Web Page Layouts ]

Web Page Layouts
Fig 1. Three Common Web Page Layouts
BOTTOM INDEX
Heading/BANNER
Body...
Index... / Trailer...
TOP INDEX
BANNER
Index...
Body...

Trailer...
LEFT INDEX
Index... BANNER

Body...

Trailer...

Most web pages are variations of these three layouts. This page itself is an example of a 'BOTTOM INDEX' layout.

Layout selection is often made based on the type of information to be presented. For example, the 'TOP INDEX' layout lends itself to presenting a large number of links to other sites. If the content of the page deals mostly with a single topic a 'BOTTOM INDEX' layout prevents things such as links to related documents or a main index from being a distraction. Wider screen resolutions have helped make the 'LEFT INDEX' layout very popular as it provides ease of navigation without cluttering the page's main presentation.

One award-winning site split the main index on either side of a centrality.
SPLIT INDEX
Index... BANNER
Body...
Index...
Trailer...
ALTERNATING INDEX
text/index... IMAGE
IMAGE ...text/index
Trailer...
The alternating layout shown on the left is in common use for pages displaying images of merchandise accompanied by descriptive text, price and so on.

Of course these layouts are far from exhaustive. We are limited only by our imaginations.