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
	10	Body text, sections & headings	Responsive body text and building document chapters sections, subsection and the heading they use
	11	Headers, footers & basic navigation	The heading with its title, the navigations bar, table of contents and a footer with common elements
	12	List & notes	Number lists, unnumbered lists and hanging indents
	13	Links	Links to other websites, different pages in this website and to a particular point on a page
	14	Tables & footnotes	How to build various types of tables (standard, dense and incidental) and how to use footnotes
	15	Basic figures	Adding figures to a website in various different configurations
	16	Introducing JavaScript & jQuery	What these things are and how to configure the website to use them
	17	Slow scrolling	How to implement slow scrolling within a web page
	18	Sticky navigation	Making the navigation bar sticky, and the JavaScript needed to implement it
	19	Hyphenation & Hyphenator	Understanding, configuring and implementing hyphenation on the web page using Hyphenator.js
	20	Lightbox	How to make images use a “lightbox” gallery to display larger versions of the image as an overlay
	21	Displaying code fragments	How to use Google Prettify to display code fragments
	22	Equations & MathJax	How to display proper equations on a website using MathJax and AsciiMath notation
	23	Landing pages	Explains the differences between landing pages and normal web pages
	24	Publishing a website	How to acquire a domain name, get a web server and publish (upload) a website to the internet
	25	Using the web template	Some notes and guidance about using the web template and building your own website
	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 sections 10-22, these contain 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.

Sections 5 & 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.

Sections 8-15 explain individual components of the website construction: responsive gird, web fonts, sections, figures, sidebars, lists, tables &c.

Section 16 is an introduction to JavaScript and jQuery, what it does and how to install and use them.

Sections 17-22 explain all the things I do with JavaScript and jQuery: slow scrolling, sticky navigation, hyphenation, lightbox images, code fragments and displaying equations properly

Section 23 explains the differences with landing pages and how they compare to normal pages

Section 24 explains how to get a website and have it hosted. It also explains the different security options and how to tell Google about your website and employ Google analytics

Section 25 gives my thoughts on how to write a website and convert it to html using Word. — Oh, and some pictures of the dogs, sorry.