Overview of some templates used on this site


These are a set of general-purpose templates based on simple CSS positioning. (They are not true Dreamweaver templates). Each layout relies on a combination of specific mark-up and specific styles. There is a single stylesheet used by all of these layouts. Each document has an outer-<div> with an "id" that specifies which layout-specific styles are to be used. So this page, which has the form "vertical line with leftbar" (see below) uses <div id="twoleftvertical">.

These templates have a set of colour schemes. Any colour scheme can be used with any template. Colour schemes are controlled in a way described below.

The current templates are as follows. (This page uses the "vertical line with leftbar" layout).

Feel free to use these templates. If possible, acknowledge where you got them.

Colour schemes

A colour scheme comprises background colours for the page and the content area, border colours, header colours, and the (undifferentiated) button to be used for site navigation. A colour scheme is specified by an "id" in the <body> thus: <body id="yellow">. (This page uses the "yellow" colour scheme).

The current colour schemes (identified by the page's background colour) are: red, green, blue, cyan, magenta, yellow, grey, and black.

I am developing a set of different "button hover" background images according to colour scheme (photograph colour) and layout (subject direction). This is still "work in progress".

"2 columns with leftbar"

This is a conventional 2 column layout, with the fixed-width leftbar starting below the page header. (This avoids the leftbar taking priority over the page header).

"2 columns with rightbar"

This is a conventional 2 column layout, with the fixed-width rightbar starting at the top of the display. (Given typical left-to-right reading, the rightbar will not take priority over the page header).

"Vertical line with leftbar"

This is another variant on the "2 columns with leftbar" layout, with a vertical line separating the 2 columns as a design feature.

Optional extras

Within each layout, there are some "optional extras", for example to treat the main article as "sort of" 2 columns, and/or to indent sections of content to make the structure easier to read.