DIGI 110 Lab
Design and Positioning
Due Before Next Class
STANDARD (75% marks):
By completing this lab students will demonstrate:
- Use HEX or RGB codes for all colors.
- Use relative and float style positioning using HTML5 compliant sections
ADVANCED (+25% Marks):
This Lab includes an optional Advanced section where students:
- Complete a second design of the webpage with menu along the top.
- Open your index page. We will modify it today.
- Using the "4096 Color Wheel" or other web tools, replace all your CSS colors and background-colors with Hexadecimal notation.
If you want to add transparency to your background color, you can add a 4th value in RGB notation. So if regular red was #ff3333 or rgb(255,100,100) the half transparent red would be rgba(255,100,100,0.5).
Preparing your Page for movement
We are going to make a page that looks like this:
- Split your webpage into 3 sections that we can then position with CSS.
- Insert an open <header> tag right before your first <h1>. We will make this your top full width banner area.
- Insert a closing </header> tag right after the closing tag of your first <h1> element. Your banner heading should now be "wrapped" in the header tag
- Now wrap all of the rest of your content, except your list of links, in another element called <article>.
- Finally, wrap your list of links in a third element <nav>
- Validate! http://validator.w3.org/nu/ and http://jigsaw.w3.org/css-validator/
- Once both are green, move on.
Position - Lets get Floating!
- CHECK THIS: HTML order matters for floats to work. Your blocks should be in the order "header", "nav", then "article". You might need to move them around.
- Reference each new element you made in CSS and position them with nav on left, header on top, and article in middle.
To Get started you'll need a CSS rule for each element that looks like this:
width: 1000px; (omit this, or use 100% to take the whole screen)
border: 10px solid green;
This will be your starting place. You want a design that has a banner at the top, content in the middle and menu on the left
- Add the property float:left; to your nav style. This will make your article "float" up beside it!
- Your article will also need a new property called "margin-left" to push it over from the left. Make other adjustments to your width and height properties to make them look nice.
- That's it! Use the HTML and CSS validators to make sure your code is good!
Almost done! Apply it to everything!
- Finally, apply the same styles to all your other Webpages so that they all match. Copy and Paste are your Friend. But do it wisely.
Make sure your code is PERFECT (no validation errors) before you use it somewhere else!
- Remember: you will need to recreate the new header, article and nav elements on each page too.
ADVANCED: A 2nd Design!
Modify your design on index.html so the page looks like this:
Hint: It only requires 1 additional CSS rule with three properties.
YOU MADE IT! Submit your Lab...
- Compress or Zip the DIGI110 folder. (Right-click on the folder--> Compress) Don't worry, it will compress everything inside!
- Submit it to the Dropbox