Please note: This site has been replaced with a newer version. It remains here for historical reference only.

Create a website

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.

What you'll need

  1. A webserver. Preferably Apache running PHP 5+. All OU webservers (Windows and Linux) are capable of running OUICE. Contact AACS-COMPUTER-CENTRE to get access to a development area. Alternatively you could download the free one-click install WAMP server (Windows) or MAMP (Mac OS-X)
  2. A code editor such as Dreamweaver, ConTEXT, Coda or TextWrangler.
  3. Good HTML, CSS and Javascript knowledge. Get up to speed at HTMLdog.com.

What you'll get

At the end of this tutorial you'll have a fully working, basic OUICE website.

Step zero!: Put the standard OU header and footer on your web server

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.

  1. Create a folder in your web root called "includes" if working in WAMP this will be somewhere like: C:\wamp\www\includes
  2. Download the standard OU header and footer files and put them in this folder.
    1. header-centre-09.html
    2. footer-09.html
    3. oulogo_hor.gif
    4. audio-left.gif
    5. audio-right.gif

Step one: Create a folder for your site

Create a new folder on your webserver for your site. If using WAMP. Put it somewhere like:

C:\wamp\www\ouice

Step two: Create the homepage

  1. In your text editor of choice, create a new HTML file.
  2. Copy the code from the OUICE anatomy and paste it into this file.
  3. Save it as "index.php" (UTF-8 encoding if asked)
  4. You should now be able to view this page in your web browser. If using a localhost like WAMP make sure your server is turned on and browse to http://localhost/ouice/

You'll notice that your site has automatically brought in the standard OU header and footer.

Step three: Add OUICE furniture

Visit the OUICE style library and and add any snippets of HTML code you'd like to play with.

Step four: change the layout

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

  1. <body class="wrapped">

would result in the design taking on the "wrapped" layout design.

Step five: change the colour scheme

Add another class to the body element to toggle a pre-configured colour scheme. e.g.

  1. <body class="wrapped pink">

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.

Any questions?

Submit any questions to the OU web developers group.

Start here
  • Create a website