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:
|1||Introduction||This section, an introduction to the website and what it’s for|
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|
|17||Slow scrolling||How to implement slow scrolling within a web page|
|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 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.