Web templates for Departments

Second level pages

These are a number of possible templates for second-level and subsequent pages, intended for different content. In each case the global navigation bar and header are the same as the home page templates, and the breadcrumb trail is extended so that on second-level and subsequent pages (as the content is placed deeper in the website) there is always a link back to the departmental home page and there are also links to suitable landmark pages between that page and the directory the user is currently in. The div.sub-brand section should define the current section of the site, and h1 heading in the page content and the title of the page should reflect the content of the page.

Checklist for changes

If you are using one of these templates, you will need to do the following (from the top):

  • Change the title
  • Add metadata description and keywords, and remove comment tags
  • Either add character information or organise that your web server does it for you
  • Add locations for the links from the global navigation buttons
  • Add your department name in the header section and choose whether to make it a link
  • Adjust the breadcrumb trail navigation so the last entry points to the page logically above the current one, and to interim suitable pages between that and the department home page
  • Adjust the content in the middle part of the page
  • Adjust footer information - link to your privacy and accessibility policies
  • Validate the xhtml code and check accessibility compliance level

Below you will find a grid for the page structure. This is to give you an idea of how the framework of the page works. To have three columns, as well as the content of the columns being present and marked correctly, the body tag needs to be <body class="three-col">: for two columns it should be <body class="two-col">: for one column, <body class="one-col">


admissions/index.html


This template is intended for use with pages that introduce a content area of a site, in this case 'Courses and admissions', which is used as the section title. The right hand 'Quicklinks' is intended to allow you an opportunity to make links outside this content, and the left-hand navigation is to move around content in this directory, for instance to the following page:

admissions/clinical.html


You can see that the page that is being read is identified by the left hand navigation link being a different colour (orange) and a white background. This is accomplished by adding the class="active" to the list item for that page. A second level of navigation is available (known as child navigation), which allows an active link into a page in a subdirectory, as shown in the following example:


(http://www.cam.ac.uk/cs/pwf/gettingstarted/basicmac.html)

When adding images, it is suggested that you stick with images that are either 200px wide or 200px square. When adding an image in the content area of the page, by default it will be floated right, it will gain a border and some added space to set it off from the text. There are two classes that you can add to an image to make it behave differently:

  • class="left" will format the image in the same way but will float it to the left
  • class="inline" will position the image inline with the text (as seen for the apple logo in the example page above)

Additionally, if you position an image between two paragraphs it will not assume a border or spacing, and if you add class="centre", it will be centred and allocated some space above and below.

Look at the coding on the first two example pages to see the following:

  • how to use the body style 'three-col' for a three column page
  • how to use the body style 'two-col' for a two column page
  • how to mark up the left hand navigation,
  • how to add pictures,
  • how to add a right hand quicklink

research/investigators/index.html


This template is for one column pages that are needed for special purposes, so the layout could be immensely variable - in this case it is serving as an index page for the researchers in the department. The page uses the 'one-col' body style and has a local extra style sheet (research.css) for special purposes. Most of the pages linked from this page have been removed in order to make this package smaller. This additional style sheet is used throughout the directory on each investigator page, of which here is an example:

research/investigators/barnard.html


Additional styles look after the appearance and positioning of the portrait and research pictures and headings. The title at the top of the left-hand navigation is built into the standard style sheet for optional use in a situation such as this - add class="title" to the first list item to make it look like this. Most of the pages linked from this page have been removed in order to make this package smaller.

Adding tables

The vanilla table style (some extra spacing added and <th> cells being emboldened) - add style="" tags to add widths, etc.:

Lapwing Institutional setup1 £100.00
Annual Recurrent per Access Point (first 10)2 £180.00
Non CS AP Recurrent (by negotiation)3 £40.00
Power Injector4 £25.00
Site Suitability Check(first AP)5 £60.00
Full Site Survey (approx first 4 hours) £250.00

Table style using the class="data" will make tables stretch to 100% although you can add style="" tags to alter this (for instance style="width:80%;") - this table format is preferred:

Lapwing Institutional setup1 £100.00
Annual Recurrent per Access Point (first 10)2 £180.00
Non CS AP Recurrent (by negotiation)3 £40.00
Power Injector4 £25.00
Site Suitability Check(first AP)5 £60.00
Full Site Survey (approx first 4 hours) £250.00

There is a style <tr class="alt"> to make a row have a grey background, which is useful to add for aiding tracking in complicated tables - this is added to the top row of the table shown above.

List styles

Standard lists are already styled. For arrows rather than bullets in an unordered list, add the following classes:

For alpha ordered list, add class="alpha" to <ol>; for roman ordered, add class="roman".

The title of this document is: Use of University of Cambridge web design: Second level pages
URL: http://www.cam.ac.uk/about/webstyle/second.html

Last updated: 12 April 2010