Web templates for Departments
Index page templates
Changing appearance to an alternate style
If you wish to use one of the alternate styles supplied (and viewable at http://web-support.csx.cam.ac.uk/newdept-live/) start with the index-dept-teal.html template, look for the following line in the <head> part of the file:
<link rel="stylesheet" href="global/style/teal.css" type="text/css" media="all" />
The href link to the style sheet should be changed to the one you want to use (the location of the required stylesheet is one the page referenced above).
index-dept.html
This is the 'standard' index page with the department name within a bar below the University global bar. [The alternative version (index-dept-teal.html) is similar but introduces a different colour scheme by way of an extra stylesheet.] In the example given the department has a two-line bar (consisting of h1 and h2 headings) but the bar works well with only one line (see index-tabbed.html for example). You may introduce more than two lists of links in the main panel (see index-project.html for example) by using an additional style.
index-logo.html
This variant uses the standard University identifier and shows the placement for a departmental logo as well as the departmental name bar. [The alternative version (index-logo-teal.html) is similar but introduces a different colour scheme by way of an extra stylesheet.] It also shows a slightly different use of the right-hand side of the page. There is a style block in the <head> part of the template that allows adjustment of the positioning of the additional logo next to the University identifier. Always ensure there is 1em space between them (the left padding measurement) but adjust the other padding measurements to align the logos. If your logo image includes white space around it you may need to adjust this.
index-project.html
This variant is for projects that have a logo for identification and don't need a bar for the department name. [The alternative version (index-project-teal.html) is similar but introduces a different colour scheme by way of an extra stylesheet.] It also features the use of several lists in the main content area rather than just the two. As with index-logo, you may need a style block in the <head> part of the template that allows adjustment of the positioning of the additional logo next to the University identifier. Always ensure there is 1em space between them (the left padding measurement) but adjust the other padding measurements to align the logos. If your logo image includes white space around it you may need to adjust this. There is an additional stylesheet for this template, which adds the thick coloured line below the logos - if you change the colour scheme from teal you will need to alter project-teal.css.
index-tabbed.html
This is otherwise similar to index-logo.html but features a tabbed site navigation. [The alternative version (index-tabbed-teal.html) is similar but introduces a different colour scheme by way of an extra stylesheet.] This type of navigation features heavily in some University sites so was added on request. You are advised to look carefully at the alternative stylesheets using this template as the colours added make the colour schemes look quite different from when there are no navigation tabs.
The title of this document is:
Use of University of Cambridge web design: Index page templates
URL:
http://www.cam.ac.uk/about/webstyle/top.html
Last updated: 12 April 2010