25.1
Web template contents
You can download the full website template here.
This will give you a zipped file called web-template.zip. Extract it all and copy them to your web folder (somewhere on your local machine).
The template is equipped with eight web pages installed by default, these are accompanied by the various default directories and supporting CSS, JavaScript and jQuery files. To summarise it contains the following:
| File | Page | Description | |
|---|---|---|---|
| index.html | Landing page | This section is the first page of the website, it is the landing page for the domain | |
| 01-00-intro.html | Introduction | A basic introduction to the template, a summary of its contents and a brief guide to using the template | |
| 01-02-intro.html | Introduction | An introduction to the online guide explaining the construction and workings of the template | |
| 02-00-example.html | Example page 1 | An example page showing a formally populated chapter part 1 | |
| 02-02-example.html | Example page 2 | An example page showing a formally populated chapter part 2 | |
| 80-00-finally.html | Contacts, legal &c. | The finals section: contacts, acknowledgements, colophon, legal, licence and privacy &c. | |
| 98-00-blank.html | An empty section | An empty section that can be copied and reused as required | |
| 99-00-typicals.html | Typical examples | Typical examples of the different components that can be used within the website: figures, lightbox, tables, formula, code &c. | |
| Table 25.1 Web template basic pages | |||
The other files included with the web template are all the other files we have either used or developed in the course of this discussion:
| File | Location | Description | ||
|---|---|---|---|---|
| style.css | 11-resources/01-css | The main style CSS file | ||
| grid.css | 11-resources/01-css | The responsive grid CSS file | ||
| script.js | 11-resources/05-js | The sticky navigation jQuery file | ||
| end-mark.svg/png | 11-resources/01-css/01-css-images | The Yorkshire Rose flourish |  |
|
| flourish.svg/png | 11-resources/01-css/01-css-images | Dividing flourish |  |
|
| Table 25.2 Common Practical Series files | ||||
Common third party files:
| File | Location | Description | |
|---|---|---|---|
| normalise.css | 21-global/01-css | The Normalise CSS file (standardises the appearance across browsers) | |
| lightbox.css | 21-global/01-css | The Lightbox styling CSS file | |
| jquery.waypoints.min.js | 21-resources/05-js | Waypoint software (used for sticky navigation) | |
| hypenator.js | 21-resources/05-js | Hyphenation tool | |
| lightbox.js | 21-resources/05-js | Lightbox application | |
| run_prettify.js | 21-resources/05-js | Google prettify application | |
| prettify.css | 21-resources/05-js/google-prettify | Google prettify styles | |
| lang-*.js | 21-resources/05-js/google-prettify | Google prettify language files (58 files) | |
| Table 25.3 Common Practical Series files | |||
Common font files:
| Woff file | Location | Description | |
|---|---|---|---|
| anda-ca-r. woff | 21-global/03-font/woff | Andada — small caps, regular | |
| carr-c3-r. woff | 21-global/03-font/woff | Carrois Gothic — small caps | |
| pmon-t4-r. woff | 21-global/03-font/woff | PT Mono — regular | |
| ps-icon.woff | 21-global/03-font/woff | Practical Series icon font | |
| ps-index.woff | 21-global/03-font/woff | Practical Series index font | |
| pser-ta-r.woff | 21-global/03-font/woff | PT Serif — regular | |
| pser-ta-b.woff | 21-global/03-font/woff | PT Serif — bold | |
| pser-ta-i.woff | 21-global/03-font/woff | PT Serif — italic | |
| pser-ta-bi.woff | 21-global/03-font/woff | PT Serif — bold, italic | |
| ssan-t2-r.woff | 21-global/03-font/woff | Source San Pro — light | |
| ssan-t3-r.woff | 21-global/03-font/woff | Source San Pro — regular | |
| ssan-t3-b.woff | 21-global/03-font/woff | Source San Pro — bold | |
| ssan-t4-r.woff | 21-global/03-font/woff | Source San Pro — semi-bold | |
| ps-fonts.css | 21-global/03-font/ | Practical Series font loading file | |
| Table 25.4 Common font files | |||
Page Specific Practical Series files:
| File | Location | Description | Page | |
|---|---|---|---|---|
| fig-00-01.svg/png | 01-pages/00-00-index/02-images | Cover image (2 images) | index | |
| 00-00-scroll.js | 01-pages/00-00-index/05-js | Slow scroll jQuery file | index | |
| fig-01-xx.svg/png | 01-pages/01-00-intro/02-images | Section images (18 images) | 01-00-intro | |
| 01-00-scroll.js | 01-pages/01-00-intro/05-js | Slow scroll jQuery file | 01-00-intro | |
| 01-02-scroll.js | 01-pages/01-02-intro/05-js | Slow scroll jQuery file | 01-02-intro | |
| fig-02-xx.svg/png | 01-pages/02-00-example/02-images | Section images (2 images) | 02-00-example | |
| 02-00-scroll.js | 01-pages/02-00-example/05-js | Slow scroll jQuery file | 02-00-example | |
| fig-02-xx.svg/png | 01-pages/02-02-example/02-images | Section images (3 images) | 02-02-example | |
| 02-02-scroll.js | 01-pages/02-02-example/05-js | Slow scroll jQuery file | 02-02-example | |
| fig-80-xx.svg/png | 01-pages/80-00-finally/02-images | Section images (2 images) | 80-00-finally | |
| 80-00-scroll.js | 01-pages/80-00-finally/05-js | Slow scroll jQuery file | 80-00-finally | |
| 98-00-codeline.css | 01-pages/98-00-blank /01-css | Code fragment css file | 98-00-blank | |
| fig-98-xx.svg/png | 01-pages/98-00-blank/02-images | Section images (8 images) | 98-00-blank | |
| code-98-02.zip | 01-pages/98-00-blank/04-data | Code fragment download | 98-00-blank | |
| 98-00-scroll.js | 01-pages/98-00-blank/05-js | Slow scroll jQuery file | 98-00-blank | |
| 99-00-codeline.css | 01-pages/99-00-typicals/01-css | Code fragment css file | 99-00-typicals | |
| fig-99-xx.svg/png | 01-pages/99-00-typicals/02-images | Section images (19 images) | 99-00-typicals | |
| code-99-02.zip | 01-pages/99-00-typicals/04-data | Code fragment download | 99-00-typicals | |
| 99-00-scroll.js | 01-pages/99-00-typicals/05-js | Slow scroll jQuery file | 99-00-typicals | |
| Table 25.5 Page specific files | ||||
There is also a template cc-ss-pagename folder that can be replicated and used for each new page you add, it contains:
| File | Location | Description | |
|---|---|---|---|
| cc-ss-codelines.css | 01-pages/cc-ss-typicals/01-css | Code fragment css file | |
| cc-ss-scroll.js | 01-pages/cc-ss-typicals/05-js | Slow scroll jQuery file | |
| Table 25.6 Template page name folder | |||
In total there are 274 files and 67 directories.
- There are a number of files called .gitkeep. These are placeholders (dummy) files that are used in folders that would otherwise be empty (they are very small files).
The reason I’ve done this, is, if you use Git or GitHub, empty directories will be stripped out of the repository and this can be very annoying if you’ve spent ages setting up a directory structure. Hence, I’ve put a .gitkeep file in each folder (so it won’t, be empty anymore) it is just a text file with a few explanatory words in it.
If you intend to use Git or GitHub for version control, you will thank me.
If you do not intend to use Git or GitHub, you can either just ignore the files, or search for them and delete them all. They don’t do anything.
The template also has two other Word files in the root folder (where index.html is). These are:
ps-html-conversion.docm
ps-website-content.docx
The conversion document is the one we used for code conversion in § 21.3.2, this is useful for any site, see the next section.
The content document is a word document with various styles setup to match the <span> inline text styles used on the website. I’ve included it so you have a document to start writing your website content. The document is not entirely empty, it contains some instructions and a few of my thoughts about the world in general.
