Web site style guide

This style guide provides recommendations for contributors and authors to ensure that the site content is presented in a consistent manner. As this guide is intended to highlight how the page controls will look on the page it does not use proper headings except when providing examples to the reader.

Page structure

Your page can be broken into headings and sub-headings by making use of the standard H1, H2 and H3 HTML tags. These can be selected in the page editor menu bar as Heading 1, Heading 2 and Heading 3 from the drop down list on the left.

The style and layout of each heading is shown below, with some standard paragraph text below each heading.

Standard paragraph text should be tagged with the html tag p and is selected in the page editor menu bar as Normal from the drop down list on the left.

Heading 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Heading 2

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Heading 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

 

Please note: Marking up paragraph content with these style settings is not recommended for the following reasons:

  • It makes content difficult to read
  • The content will not be consistent on the site
  • Automated readers such a readers for the visually impaired use such markup and will not read this content properly.

The these reasons normal paragraph content should never be marked up using the heading tags.

 

Strong and Emphasised content

If you wish to emphasis content then you can make it strong or emphasised it by selecting the B or I button in the editor. You can also make it strong and emphasised by selecting B and I in the editor.

Although it is possible to also do this with headings (H1, H2, H3)  it is recommended that authors reserve the use of these emphases to normal paragraph text only to ensure that headings are presented consistently across the site.

 

Ordered and unordered lists

To create an ordered list use the ordered list button in the editor (the one with tiny numbers next to lines on it to the right of the I button. An ordered list will be presented thus:

  1. First list item
  2. List item two
  3. List item 3 that is very long and wraps across the line. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
  4. Last list item

To create an unordered list use the unordered list button next to the ordered list button. An unordered list will be presented thus:

  • First list item
  • List item two
  • List item 3 that is very long and wraps across the line. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
  • Last list item

 

Adding HTML links

It is good practice to give a description to a linked item of content rather than cut and paste the Web address itself. use the links button (two chain links) on the page editor menu to do this.

Here are some example of good an bad links in a page:

  • A well linked item which describes the content being linked - Visit our school home page to see what we are doing.
  • A poorly linked item with no embedded link - Visit our school at http://www.deanvalley.cheshire.sch.uk/. See how this forces the reader to cut and paste the link, and how it messes up the layout of the paragraph.

If you wish to add a link to an external site or to internal content which is in PDF format then it is good practice to open the link up in the new window. To do this just use the link button in the menu and then set Target: New window on the correct tab. It should then behave link this:

  • A link to the Woodlands Junior School Resources external Web site. Notice that a new window is opened up which means the visitor remains on the Dean Valey Web site.

 

Adding non-HTML content

The editor supports the addition of any file types including PDF, Word, Excel and others. However, it is recommnded that only PDF documents are linked on the site as PDF is designed for Web publication, is a well supported format and minimises the risk of passing viruses or other security threats onto readers.

Many viewers to the site, particularly those that are security aware will reject opening of Word, Excel or Publisher content from the Web as they can contain viruses.

So, wherever possible convert your Word, Excel or Publisher document into PDF format and link that instead.

 

Adding pictures

If you add a picture to your page it is good practice to optimise it for Web viewing. This generally means creating a smaller version of your image rather than loading up the 5MB image taken by your camera.

It is also good practice (and in some cases a legal requirement) to label (add using Alternative Text in the editor) your image to ensure that visually impaired readers can understand what the image represents when using a Web reader.

Contact the School

Dean Valley Primary School

Albert Road
Bollington
Macclesfield
Cheshire
SK10 5HS

Email: admin@deanvalley.cheshire.sch.uk

Tel: 01625 572767
Fax: 01625 574522
admin@deanvalley.cheshire.sch.uk