Web templates for Departments

Introduction

Design concept

The concept is that a home page sits as a unique page in the site and a number of different templates for second-level pages sit underneath it. All pages include both global and local elements. The unifying themes that run through all of these pages are:

  • the University identifier and Department name
  • standard palette of colours
  • global navigation links, including search box
  • breadcrumb trail navigation
  • a standard footer

What's provided

When unpacked the contents of the archive will be as follows:

  • admissions [directory]
  • favicon.ico
  • global [directory]
  • webguidelines-v4.pdf [this document]
  • icons.html
  • index-logo.html
  • index-logo-teal.html
  • index-project.html
  • index-project-teal.html
  • index-tabbed.html
  • index-tabbed-teal.html
  • index-dept.html
  • index-dept-teal.html
  • research [directory]

There are four variations on the index page, with two colour schemes offered here; the standard colour scheme and 'teal' as an alternative (if you want to use a different alternative colour scheme, replace the link to teal.css with the styelsheet you want to use). On the basic index page, index.html, there are links to two directories with content; admissions and research. These contain several different page types to give the range of templates available to you, and are described in later pages (If you want to use a different alternative colour scheme, how to add a link to the other templates will be covered then.).

Global files

The top-level directory called global, has within it three subdirectories: js, images and style.

  • Within js sits the file that controls the minimum and maximum width of the pages. This is needed because not all browsers observe the styles that would normally do the work.
  • Within images sits a number of images that are mainly called from the style sheets to provide icons on the pages.
  • Within style sits a number of stylesheets, some of which are optional. Should you require local additions, add another stylesheet so you know where all the changes and additions are.

In the template files provided, the references to the global directory are relative, since it is then simple for you to view the files. When installed onto a web server it is better to place global/ at the root level of the web server, so you are able to refer to it as /global/ from any pages.

The global navigation in the sample files all refer to the a-z, email and phone search and contact files at http://www.cam.ac.uk/ - if you choose to install local versions that replace these, copy the pages from the live server and edit them into your templates.

[top]

The title of this document is: Use of University of Cambridge web design: Design concept
URL: http://www.cam.ac.uk/about/webstyle/intro.html

Last updated: 12 April 2010