MAT 125: Web Design 1: Fundamentals : EXERCISES

Exercise 8:
CSS : Using DIVs for Layout
Creating Navigation Using Lists

CSS allows us to take more control over positioning and styles on our pages.Use DIVs for layout and unorderedl lists to create navigation.

CSS: Page Layout Utilizing DIVs

Use Divs to break pages up into sections and IDs to define the areas more precisely.

HTML Elements

  • #idname {property: value;}
    • <div id="x">

CSS: Style Unordered Lists into Navigation

Use IDs to further style unordered lists. Create horizontal or vertical navigation or a combination of both.

HTML Elements

  • <ul>
  • <li>

In Class Exercise Requirements

This exercise takes 2 to 3 classes to complete. All class work from this exercise must be linked together and turned in. We will use external style sheets, DIVs for layout, IDs and Classes for styling, and CSS Rollover Navigation.

Visit CSS Zen Garden to see how divs and ids can be used for placement.


  • Optional - try as a background image

Exercise Part Two

  • Use lists to create navigation. Make a page that uses horizontal navigation (top nav bar) and then a page with vertical navigation (side bar navigation)

Design Process

  • Create a project folder named "Ex8"
  • Follow the usual procedure for making HTML documents.
  • Write and link an external style sheet.
  • Save all HTML docs and images into your project folders.
  • Review your work in a browser before uploading to the server

Final Presentation

  • Upload your HTML documents to the server and view them in a browser.


This exercise is worth 30 points.

  • Coding (6)
  • Functionality (6)
  • Meeting project requirements (6)
  • Your effort (6)
  • Creativity (6)
  • Points will be deducted for late work
Item/Points 1 - 2 3 - 4 5 - 6
Coding Some Most All correct
Function Some Most All
Requirements Some Most All
Effort Minimal Basic Requirements Above & Beyond
Creativity Minimal Some Above & Beyond

Due Date

Text Reference

  • Chapter 15: pg 341-369
  • Chapter 16: pg 373-395

Online Demos

<< .. Go to .. MAT .. Class Demos .. Previous Exercise < .. > Next Exercise .. >>