Download Web Support Documentation - Oxford Brookes University

WEB SUPPORT
DOCUMENTATION
Using the Flat HTML templates
Date: 1 October 2011
Author: Creative Services web team
Contact: [email protected]
Version: 4.0 - 1 October 2011
Last updated by: Bryan Day, 25 October 2011
This document should be used in conjunction with the other web branding documentation and design templates
available at: www.brookes.ac.uk/about/identity/digital/
Please keep the Creative Services web team up to date with any web staff changes in your department or
directorate. Email: [email protected]
Contents
1. Why use HTML templates?
2. Who are these templates for?
3. Can I change or edit the templates?
4. Can I use my own stylesheets (CSS)?
5. Where can I download templates?
6. How many template layouts are there?
7. Required template changes
8. Optional template changes
1. Why use HTML templates?
HTML templates are used to help establish a consistent look and feel to the Oxford Brookes University website
using the new visual identity.
2. Who are these templates for?
These templates are for users who have more than a basic understanding of HTML and CSS. .
3. Can I change or edit the Dreamweaver templates?
Please DO NOT change the HTML in the <div id=”header”> and <div id="globalnav"> as these contain global links
to other pages on the Oxford Brookes University website. If you change the layout, you may be asked to make
changes to your templates so they display the visual identity correctly. If you need any help or have questions
please contact the web team in Creative Services. [email protected]
4. Can I use my own stylesheets (CSS)?
The links to the default stylesheets should not be changed. You may add your own CSS by adding a link to your
own .css file after the default links for the screen and print CSS.
5. Where can I download templates?
Download template zip files from www.brookes.ac.uk/about/identity/digital/templates. If you need software to unzip
the files, you can download 7-Zip for free or download WinZip here.
6. How many template layouts are there?
There are four template layouts used on the Oxford Brookes University website.

Section homepage – section.html
This is a main section page with a deep image, sidebar and two content columns, e.g. the International section
homepage, www.brookes.ac.uk/international.

Sub section page – subsection.html
This is similar to the main section page but a shallower image, sidebar and content column, e.g. the ‘Contact
and meet us’ page in the ‘Studying at Brookes’ section, www.brookes.ac.uk/studying/contact.

Three column page – 3_col.html
This is a three-column page and the preferred use for most pages, e.g. the ‘Accommodation’ page in the
‘Studying at Brookes’ section, www.brookes.ac.uk/studying/accommodation.

Two column page – 2_col.html
This is a basic two-column page, e.g. the ‘Facts and achievements’ page in ‘About Brookes section’,
www.brookes.ac.uk/about/facts.
7. Required template changes
The following changes are compulsory and MUST be changed with each page you create:

<title>
<title>Undergraduate - Courses - Oxford Brookes University</title>
<meta name="description" content="Undergraduate courses at Oxford Brookes University" />
<meta name="keywords" content="" />
<meta name="author" content="Joan Smith" />
Here you MUST add a title for the page. The best convention would be Sub-section – Section - Oxford Brookes
University e.g. Undergraduate – Courses – Oxford Brookes University.
You MUST add the description for the page:
The description, will be used by search engines like Google and Yahoo
The keywords metadata is not supported by most of the main search engines. Your keywords should be
included in the text of your page instead.
The author of the page is optional.

<div class="section-header"> or <div class="subsection-header"> (section homepage and sub
section page templates only)
You MUST change the heading <h1></h1> to something more appropriate for the page. This is hidden on
the section homepage (but not to search engines); and on the sub section page it is displayed over the top
of the background image.
<div id="section-header ">
<h1>Department of English and Modern Languages</h1>
</div>
To add an image to the section and sub-section page you need to edit the stylesheet info. The image will
be displayed in the background. The section homepage image is 770 pixels wide by 170 pixels high and
the sub section page is 770 pixels wide by 120 pixels high.
.section-header {
background-image: url(http://www.brookes.ac.uk/template/images/your_pic.gif);
…
}

<style type="text/css" media="screen">
<style type="text/css" media="screen">
@import url("http://www.brookes.ac.uk/portal_skins/custom/ver3/screen-new-vi.css");
</style>
Here you can add your own screen styles. DO NOT remove the link to the default screen stylesheet. You
MUST add a background image with CSS to this editable region as in the example above or add it to an
external stylesheet. This will be displayed in the background. The section homepage image is 770 pixels
wide by 170 pixels high and the sub section page is 770 pixels wide by 120 pixels high.

<div id="content">
<div id="content">
<p>Content</p>
</div>
This is where your main content is entered.

<ul id="mainnav">
<ul id="mainnav">
<li> <a class="head" href="/department/"> Department of Planning </a> <!-- class="head" makes top level link
large box -->
<ul>
<li><a href="#">Lorem ipsum</a></li>
<li><a href="#">Dolor sit</a></li>
<li><a href="#">Amet</a></li
<li><a href="#">Consectetuer</a></li>
<li><a href="#">Adipiscing</a></li>
<li><a href="#">Elit</a>
<ul>
<li><a href="#" class="current">Nonummy</a></li><!-- class="current" makes background
active -->
</ul>
</li>
</ul>
</li>
</ul>
The left-hand navigation
A Section ID image is used as a background for the first item in the list. This will usually be the name of the
Department or Directorate. If you need a Section ID image, please contact the web team in Creative
Services. [email protected]
This can also be the name of an institute, group or other specific body, subject to it being a sub-brand
approved by Executive Board. In these cases, please contact us to create a new image or supply a
Fireworks template.
The first item link MUST have class="head”. CSS will hide the text and replace it with the Section ID
background image. For example, if you will need to add something like the following to your own stylesheet
(see above).
body.your-new-section #mainnav li a.head {
background-image: url (/path_to_images/your-image.gif) ;
}
In your web page you need to add the name of the new section to the class in the body tag. Leave the first
value as is.
<body id="default" class="two-col-page your-new-section">
Add class="current" to the current page link, this will make the background an active colour.
…
<li><a href="/about/department/" class="current">About the Department</a></li>

<div id="portal-column-two"> (3 column and sub section pages only)
Sidebar for extra information, links, etc
8. Optional template changes

<style type="text/css" media="print">
<style type="text/css" media="print">
@import url("http://www.brookes.ac.uk/template/css/ver3/print.css");
</style>
Styles for print. DO NOT remove the link to the default print stylesheet. If you want to hide parts of the
page add the class or id and element you want to hide. For example:
<style type="text/css" media="print">
@import url("http://www.brookes.ac.uk/template/css/ver3/print.css");
#searchbox {display: none;}
</style>

<div id="footer" class="clearfix">
<div id="footer" class="clearfix">
<div class="c16-i12" class="footer-left">
<p>&copy; 2011 Oxford Brookes University, Headington Campus, Gipsy Lane, Oxford OX3 0BP, UK - Tel:
+44 (0)1865 741111</p>
</div>
<div class="c16-i4 last" class="footer-right">
<p><a href="http://www.brookes.ac.uk/about/structure/policies/">Policies and disclaimers</a> | <a
href="http://www.brookes.ac.uk/about/structure/policies/privacy">Privacy</a> | <a
href="http://www.brookes.ac.uk/about/structure/policies/cookies">Cookies</a></p>
</div>
</div><!—END FOOTER -->
Legal bit - Leave this as is unless you have important links to add here (Don’t add too many links or text
will flow over to two lines).
Address - Leave this as is unless your Department or Directorate is situated on a different campus.
This document should be used in conjunction with the other web branding documentation and
design templates available at: www.brookes.ac.uk/about/identity/digital/
Please keep the Creative Services web team up to date with any web staff changes in your
school or directorate. Email: [email protected]