MAT 125: Web Design 1: Fundamentals : EXERCISES

Exercise 8: Simple Page Layout & Simple Rollover Navigation

This exercise covers use of some newer HTML5 Elements that work with page layout.

Specifically these tags:

We will use the newer HTML tags and use CSS styles to create simple 2 column page layouts and simple rollover navigation.


Read in Text Book: Chapter 14 and follow along in the Demos for Exercise 8. Be sure to experiment.

By Due Date:

This is a multiple page exercise. Create a minimum three HTML pages using Brackets.
Use the same content and tags on all three pages.
Save into your folder - Ex8.

Folder Name: Ex8

Opening Page Name: index.html

Have All Pages Link Together

Post your questions online or email them to me


New HTML Elements

  • <header> </header>

Use to set and style a specific header or banner area on your page. Add a logo or logo text and tagline

  • <nav> </nav>

Use to contain your main navigation

  • <main> </main>

For your main content area

  • <aside> </aside>

Add a small amount of content as a column to be positioned to the left or right of the main content area. The aside could be used for secondary navigation, to add an image, or for minor text.

  • <footer> </footer>

At the bottom of the page. Use clear: both; in your CSS styles to have it end up where you want it to. Holds content like copyright info, contact information (phone, address, email), can have secondary set of navigation.

CSS: Rollover Navigation Styles

  • nav

Add CSS properties & values that set font-family, font-style, font-weight, font-size. Add background-color, color (for your font). Add more styles as needed.

  • nav a:link, nav a:visited

Add CSS properties and values that could include a different background-color or color. If the links now look more like "buttons" you can also remove the undeline by adding the CSS style
text-decoration: none;

  • nav a:hover

Add a different background-color or color (for the font) to clearly show these are links by using the hover state.


Exercise Eight A Grading Rubric
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

Evaluation

This exercise is worth 30 points.

Coding (6)
Functionality (6)
Meeting project requirements (6)
Your effort (6)
Creativity (6)


Due Date

Text Reference

Online Demos