How to use this website

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).

End flourish image