Web Standards at the Open University
Styles and Standards for a unified OU web interface
Please note: This site has been replaced with a newer version. It remains here for historical reference only.
This tutorial will teach you how to build a very simple website using the OUICE framework.
This tutorial is aimed at web designers and developers who are familiar with building web sites. Those new to web design and development are likely to struggle with the information found here.
At the end of this tutorial you'll have a fully working, basic OUICE website.
You don't need to do this if working on an OU development server. But if you're working locally you'll need these files to make your site work properly.
Create a new folder on your webserver for your site. If using WAMP. Put it somewhere like:
C:\wamp\www\ouice
You'll notice that your site has automatically brought in the standard OU header and footer.
Visit the OUICE style library and and add any snippets of HTML code you'd like to play with.
Have a play with the different layouts OUICE has on offer. To do this, simply change the body class to the appropriate layout.
e.g
would result in the design taking on the "wrapped" layout design.
Add another class to the body element to toggle a pre-configured colour scheme. e.g.
would apply the standard OU pink colour scheme to the site.
That's it!
There's a lot more to explore. Have a look at the styles, layouts, colours, templates and themes.
Submit any questions to the OU web developers group.