• Assigned: W 9/19
• Due: W 9/26
• Possible points: 4

Description

Now that you have mastered formatting lists, its time to put this to work. In this assignment, we will start developgin a tab based interface. In this first version, we will write the CSS (and HTML) to properly format tabs. After we get some Javascript under our belt, we will add tab behavior to the page we create in this assignment. Do a good job. You will reuse this assignment in a few weeks.

The Formatting Lists exercise has taught you everything you need to know to nicely format tabs. Use the link to "4 reasons why I love tabs" for guidelines. The tabs should be nicely styled (use border-radius: 5px) and spaced, the active tab clearly identified, mouse over an inactive tab highlight it, and the tab should "pop out". Note that you will probably not be able to get the tab and the tab contents contiguous as in the guidelines on page 82. It looks like this requires images and not just CSS. Your page should look like this.

Requirements

Use only CSS and HTML (no images), use the :hover pseudo-class, and display: block/none. By default the first tab should be selected. Your CSS rules should be as specific as possible, but don't just assign an id to every element. For example, the selector 'a'(all anchors) is very general, '#nav a' (all anchors withing the element with id=nav) is much more specific. Even better is 'div#nav a'. Even though the 'div' is unnecessary (since ids must be unique), it tells the human reader how the 'nav' id is being used (for a 'div' that creates a navigation panel on the page).

Turn in the following in the following order:

1. Cover page. Your name, date, assignment name.
2. Screen shot of your web page
3. Printout of your code.

Grading

• 45% aaa
• 35% bbb
  10% ccc
  
• 10% Good programming style - indentation, clarity, descriptive names, simplicity, etc.

Objectives