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 unordered lists to create navigation.

Use Exercise 8 to test out some possible page layouts for Project 2. Try several different pages, experiment with your navigation, photo positioning, text size, padding, margin and borders.

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>

Exercise Requirements

This exercise may take several classes to complete. All work from this exercise must be linked together and turned in. Experiment with 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

Working on Navigation

  • 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). Try a page that uses both types on one page.

Design Process

  • Create a project folder named "Ex8"
  • Follow the usual procedure for making HTML documents.
  • Write and link an external style sheet. For this exercise they can be different ones for each page.
  • Link all pages together
  • 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 the FireFox browser. Right click each page and correct HTML errors that show up in red.


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 .. >>