1Introduction

This website is an explanatory text on how this website has been designed, how it works and how it can be adapted for use elsewhere.

The site is divided into the following sections:

	Section	Name	Purpose
	1	Introduction	This section, an introduction to the website and what it’s for
	2	Fairfax WTW An example document	A worked example showing an extract from a typical engineering document and how it will appear
	3	Grids, fonts & responsive design	An explanation of how the website is designed, it includes the Gerstner gird and an analysis of fonts
	4	Getting started	Setting up the website: folder structures, where to keep things and naming conventions
	5	HTML & CSS: the basics	An introduction to HTML and CSS, what they can do and how to use them
	6	CSS box model	The fundamental structure that underpins the website and everything within it
	7	Website preliminaries	Establishes the common elements of the website and provides commonality across browsers
	8	Grids & columns	Construction of the columnar arrangements of the web page with responsive elements
	9	Fonts, web fonts & text	Build web fonts, add them to a website and have responsive text scaling
	Appendices	Glossary, references and appendices	Defines common terms, references to other websites and other useful supporting information
	Table 1.1   Document sections

Those of you who are new to this website, I suggest you start with section 2, this is a short section and will give you an idea of what a website created with this template will look like.

If you know what you are after, you will probably find it in section xxx, this contains a full set of examples that you can take and use.

Section 3 explains (in some detail) how the web page layout is derived from the Karl Gerstner grid, how fonts and line spacing are to be used and what size everything should be.

Section 4 sets out the conventions and mannerisms that should be followed when building a website.

Section 5 & section 6 are an introduction to HTML and CSS, these sections cover the basics for those who have not used HTML and CSS before. Section 6 discusses how CSS is used to provide layout arrangements (the box model) and how this arrangement relates to this website.

Section 7 sets up the basic website with default properties, a folder structure to keep things in and a style sheet to compensate for the differences between browsers.

Section 8 & section 9 explain individual components of the website construction: responsive gird, web fonts, sections, figures sidebars &c.

The appendices explain everything else.

Oh, and there is an index (man, was that hard to do).