Website Design Principals

Website Anatomy

Firstly, an apology for the silly title of this section but Anatomy is the best word I can think of to describe this section.

Most web sites are made up of three sections. Just like letters and other business documents they are made up of a header, showing the company name and logo. columns of information in the body of the page, and finally a footer section showing other important information we want to convey to our visitors.

The sections in the webpage can be set to expand to fill the whole page or can be a fixed centered size. The default style of this site centers the main information columns and expands the header and footer columns to the size of the visitor's browser screen. If you are using Firefox or another good browser that supports style switching, have a look at any of our pages using the alternative styles provided.

Every page in this site is designed using this structure:

Header

  • Column1
  • Column 2
  • Column 3

Footer

Using CSS style sheets, some of the pages are displayed as three side by side columns:

3 Column Side by side web design example

Some of the pages are set up as single columns

Single Column web design example

Some pages are displayed as three columns.

2 Column web design example

We can also use combinations of the above layouts. If all three columns are used in the underlying XHTML document, we could use CSS style sheets to position the columns underneath each other like the example below.

3 Column stacked web design example

About Style Switching

W3C Validated Website