25Using the web template


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 Upload button
flourish.svg/png 11-resources/01-css/01-css-images Dividing flourish Upload button
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.

End flourish image