Dan Fergus Design > Student Resources > Syllabus > Class Schedule > Exercise: Navbars

VCA222 Web Design

Exercise: Navbars

Assignment

Create two versions of a navigation menu ("navbar") —one vertcal, and one horizontal.

Menu 1: Vertical

The first navbar will be vertical and look like this:

  1. Launch Dreamweaver and create a new html document. Save it as yourName_navbars.html.
  2. In the body, create an unordered list with the following items: Home, What's New, About Us, FAQ , and Contact. Highlight each item in turn and turn it into a 'dummy' link (<a href="#">). Surround the list with a <div> tag called "navigation." This will become the navigation menu. It should look something like this:

    3. <div id="navigation">

    <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">What's New</a></li>
    <li><a href="#">About Us</a></li>
    <li><a href="#">FAQ</a></li>
    <li><a href="#">Contact</a></li>

    </ul>

    </div>

     

  3. In the head portion of your document add the <style> tags:

    4. <style type="text/css">
    <!--

    -->

    </style>

     

  4. Copy the CSS code below and put it into the head of your html document between the comment tags (<!-- and -->):

    5. #navigation{
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 0.8em;
    font-weight: bold;
    width: 8em;
    border-right: 1px solid #333;

    }

     

    #navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;

    }

     

    #navigation ul li {
    margin: 0;

    }

     

    #navigation ul li a {
    display: block;
    padding: .2em .2em .2em .4em;
    border-top: 1px solid #003;
    border-left: 1px solid #369;
    border-right: 1px solid #69C;
    border-bottom: 1px solid #369;
    background-color: #036;
    color: #fff;
    text-decoration: none;
    width: 100%;

    }

     

    html>body #navigation ul li a {
    width: auto;

    }

     

    #navigation ul li a:hover {
    background-color: #69F;

    }

     

  5. Save it and test it. Does it work?
  6. Customize. Try altering the colors, fonts, sizes, etc.

Menu 2: Horizontal

The second navbar will look like this:

  1. Make a new list below your first list/navbar. You can use the same code as in Menu 1 above, except change the ID name in the <div> tag to "navigation2." It should look like this:

    2. <div id="navigation2">

    <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">What's New</a></li>
    <li><a href="#">About Us</a></li>
    <li><a href="#">FAQ</a></li>
    <li><a href="#">Contact</a></li>

    </ul>

    </div>

     

  2. Add the following code to the CSS section:

    3. #navigation2 {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 0.8em;
    font-weight: bold;
    padding: 0;

    }

     

    #navigation2 ul {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    background-color: #036;
    float:left; /* This is needed to keep the list element from collapsing */
    }

     

    #navigation2 ul li {
    float:left;
    margin: 0;
    }

     

    #navigation2 ul li a {
    display: block;
    margin: 0;
    padding: 0 2em;
    line-height: 1.8em;
    color: #fff;
    text-decoration: none;
    }

     

    #navigation2 ul li a:hover {
    background-color: #69F;
    }

     

  3. Don't worry if it looks funny in Dreamweaver; it should work in a browser. Save it and test it. Does it work?
  4. Customize. Try altering the colors, fonts, sizes, etc.

Deliverables

Upon completion, give me a copy of your html file.

Deadline

Week 7: Due, beginning of class.

Point Breakdown

4 pts

Went well above and beyond and created something special.

3 pts

Customized both navbars.

2 pts

Customized one of the navbars or did very little on both.

1 pts

Completed both navbars, but did no customization.

0 pts

Incomplete.

Class schedule

Syllabus

Student resource index