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

End flourish image