MAT 125: Exercises & Projects

Exercise 7: Simple Page Layout & Simple Rollover Navigation

This exercise covers use of some more HTML5 Elements that work more specifically with page layout. They probably originally were commonly used as id names used with DIV tags. Because of common usage, they were moved up in status to become tags or elements in their own right with their own default styling. Use these tags to organize your pages into sections and give them CSS styling that works with your ideas for your page layout.

These tags are:

• header - for the head of your document
• nav - for your main navigation
• main - for the main content area
• aside - content related to the main, sitting next to it
• footer - the content at the foot of the page

For this exercise, use these 5 tags to help you design a two column page layout.

Exercise Requirements

Watch: the step by step Videos Lectures for Exercise 7.
Read: Chapter 5 - pages 82-84 for information on the tags we are covering in this exercise. Read Chapter 14 in the Book to build on your understanding of how padding, margin and borders work.

Folder Name: Ex7

Minimum Number of Pages/Documents Required for Exercise: 4

All Pages in the Exercise Must Link Together.

Use Brackets HTML Editor to create your pages.

Page Content:

Topic for this exercise: Your Favorite Artist. Do a little research into them and use that to make the one page of content required for this exercise.

Use at least one image in the Main area of your page.

You will use the same content on the first three pages. Page 4 will be your Artist Statement.

1. Index.html Natural Flow

   Create a page of content for each area using all the new tags listed in this exercise. Write your content in "Natural Flow" or the order it should be read. DO Not add CSS styles to this page. Be sure to add at least one image.

2. Page2.html Adding CSS Styling

   Using the same content as your index page - add your own styling to the CSS Document Styles (in the head of the document). Experiment adjusting the padding, margin and borders. Use the aside and main tags to create two side by side columns. Be sure to choose widths that will allow the content fit next to each other and not have one go below the other. Think about the width of the content + the margin + padding of each piece so it fits within your wrapper width.

3. Page3.html Create Simple Rollover Navigation

   Use the same content (and styles) from your 2nd page. Add the simple CSS styles to create Simple CSS Navigation. See the Demo pages.

4. Page4.html Artist Statement

Plan your pages out. Create a wireframe of your page layout. Develop a color palette and choose your fonts. Take this information and build out your Artist Statement page. Explain each piece of your design thoughts as if presenting this to a client.

Review the Exercise 7 demo pages and video pages for more information.

Points: 30

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), could 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.