In order to use OU ICE on your site you'll need to include a number of CSS and Javascript files. You'll also need to use some standard HTML markup in your template. The first step is to download the core core below.
The OU ICE templates depend on the OU header and footer files. All OU servers host these files already. If you want to develop a site locally then your web server will need to host these files too. You can grab the OU header and footer files here.
There are four server side includes called by OU ICE:
This server side include contains links to all the OU ICE CSS files and all the javascripts that must be called in the <head> of the HTML document.
Please note that the reference to the jQuery library has been removed from this include as the OU Drupal theme already calls the library. If you are not already calling jQuery then you will need to make sure you do if you want to use the ou-foot.html.
This is the official OU header. There is now just one header include. Different states are toggled using body classes.
The official OU footer. Again, a single include for all sites with different states being toggled via body classes.
Contains links to all other OU ICE Javascripts.
Note that the ou-foot.html include also requires that you include the jQuery library somewhere in the <head>. If you are not using jQuery then do not include ou-foot. If you include ou-foot.html but not the jQuery library you will get error warnings.
This is the hierarchical HTML structure of OU ICE. Some insignificant elements have been removed for clarity. The ideas behind some of the elements are detailed below.
Required. If your site uses a different language, please tell the browser about it by replacing "en" with whatever language the page uses. You can also set lang values at an HTML object level within the page. Find out more.
Required.
Required. The contained text string follows the following format: page title - site title - Open University
Required.
OU ICE refers to 5 CSS files:
Required. Ensures that the mobile version of the website is optimised for the device it is being viewed one. Find out more.
Required. A hard working element that carries a number of optional combinations of class attributes. The IA class attribute is required in order to select the correct OU header and footer instances.
Required. Comes as part of the OU header. The main wrapper div. Contains all other parts of OU ICE.
Required. Comes as part of the OU header. The OU header wrapper.
Required. Comes as part of the OU header. Link to the #ou-content anchor. For improved accessibility. This link is invisible until the user tabs to it. It is first in the tab index.
Required. Comes as part of the OU header. The link that wraps the OU logo.
Required. Comes as part of the OU header. The first line of the OU header. Contains role-based links. These include StudentHome, TutorHome, IntranetHome, the user's name and ID.
Required. Comes as part of the OU header. The second line of the OU header. Contains links to the OU home page, Study at the OU, Learning, Research, Community and About.
The wrapper for everything between the OU header and footer.
Site specific header. Optional.
Wrapper for the main content area.
Sub-wrapper for the main content area.
Optional. Typically used as a banner across the top of the page. For promotional features.
The main content region wrapper.
Breadcrumb trail.
Required anchor point for the skip link in the header.
Secondary content region. Usually contains site navigation.
Optional site specific footer area.
Link to the top of the page.
The OU footer wrapper.
Only seen on the OU home page.
For all scripts that can be loaded after the HTML.
If you're new to OU ICE you might find this quick step by step tutorial useful.
If you're new to OU ICE you might find this quick step by step tutorial useful.