DIGI 110 Lab
Design and Positioning

Due Before Next Class

Go Back to Labs Page

STANDARD (75% marks):

By completing this lab students will demonstrate:

ADVANCED (+25% Marks):

This Lab includes an optional Advanced section where students:

STANDARD: Prepare...

  1. Open your index page. We will modify it today.

The Work...

  1. 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:
an example of a 2 column page design with menu on the left and a full width banner header on top

  1. Split your webpage into 3 sections that we can then position with CSS.
  2. Insert an open <header> tag right before your first <h1>. We will make this your top full width banner area.
  3. 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
  4. Now wrap all of the rest of your content, except your list of links, in another element called <article>.
  5. Finally, wrap your list of links in a third element <nav>
  6. Validate! http://validator.w3.org/nu/ and http://jigsaw.w3.org/css-validator/
  7. Once both are green, move on.

Position - Lets get Floating!

  1. 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.
  2. 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:

    header {
    width: 1000px; (omit this, or use 100% to take the whole screen)
    height: 200px;
    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

  3. Add the property float:left; to your nav style. This will make your article "float" up beside it!
  4. 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.
  5. That's it! Use the HTML and CSS validators to make sure your code is good!

Almost done! Apply it to everything!

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

  2. 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:
an example of a 2 column page design with menu on the left and a full width banner header on top
Hint: It only requires 1 additional CSS rule with three properties.

YOU MADE IT! Submit your Lab...

  1. Compress or Zip the DIGI110 folder. (Right-click on the folder--> Compress) Don't worry, it will compress everything inside!
  2. Submit it to the Dropbox

Go Back to Labs Page

Checked HTML5

Valid CSS!