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