Skip to content The Open University

The other way

The steps

  1. Create index.php, add the initial content. Example.
  2. Add the OU header and footer. Example.
  3. Devise naming conventions and apply initial classes and IDs to <div> elements. Example.
  4. Create some CSS style sheets for screen, print, mobile, ie and ie6, you'll add your style rules from now on.
  5. Decide on fonts, sizes, line-spacing (leading) for paragraphs, headings, blockquotes, tables, forms, ordered lists, unordered lists and all the other HTML elements. Example.
  6. Create a layout. Example.
  7. Apply background colours. Example.
  8. Remove the bullett points and reduce margin and padding in the navigation menu. Example.
  9. Set link colours on the navigation menu.
  10. Create background images for the navigation menu.
  11. Create hover style for the links in the navigation menu.
  12. Set border, padding, margins and background images for navigation menu.
  13. Add additional divs with classes to enhance the layout.
  14. Refine the heading and all HTML font sizes.
  15. ..and so it goes on..

Return to the main OU ICE documentation site