CBTE 162: Web Page Creation : Exercises

Exercise 6: Padding, Margin, Borders & Simple Navigation

In this exercise we will design multiple web pages working through the Box Model and understanding how to develop our own amount of padding, margin and borders to utilize on our web pages to develop good page design.


1. Understanding The Box Model

2. Simple Rollover Navigation


Use an external style sheet, link it to all your pages to solidify the design for your entire website.

1. The Box Model

To better understand the use of borders, padding and margin, this exercise will require you to work through the process step by step.

First we will how these relate to the web elements and study the default amount.
Then we will go through the process to remove them by adding this code to our CSS Document styles:
* {padding: 0; margin: 0; border: 0; }
The final step will be adding in the amount that helps us develop our page content into an effective web page design .


2. CSS Rollover Navigation

Use CSS styles to create rollover effects in a simple horizontal navigation bar.
Use additional CSS design elements to make it more dynamic looking.


Design Process

  • Create a project folder named "Ex6"
  • Name your first page named index.html.
  • Save all HTML docs and images in your project folder.
  • Review your work in a browser before uploading to the server, view source in FireFox to see HTML errors and correct
  • Submit your Ex6 folder with your HTML documents and image folder

Adding Developer Tools to FireFox

  • You can add developer tools to your FireFox Browser
  • Be sure to include the Outline option - as this allows you to highlight the outline of your Block Level Elements among other items

Exercise Requirements

  • This is a 6 page exercise! All pages must link together.
  • Read about the Box Model in the book or online
  • CONTENT: Write several paragraphs about the Box Model and the use of padding, margin and borders. Use this content on pages 2 - 6. Format your pages using the steps listed below. Link all pages together.
  • Index page: Create a simple box model example page first. Choose one element (an image works well for the first example). Add the individual parts that make up the box model, border, padding and margin one piece at a time. (see demos) Plus try one with varying sizes on each side.
  • Page 2: Use the content you have written about the Box Model and create a page with several sizes of Header tags and paragraphs of text. Use other basic HTML tags as well. Include the anchor tag to link your pages together. Add an image or two. Do not use the br tag to create space between elements.
  • Page 3: Resave the page as a new name and use CSS to add a background color to each block level tag. This will help you see where the default padding ends and the margin begins. OR use the developer tools in FireFox and choose OUTLINE BLOCK ELEMENTS.
  • Page 4: Resave the page again as a new name and zero out the padding and the margin for all the HTML tags you used. Check out the demo to see how this is done. Right click the page, choose View Page Source, to see the coding. Add this CSS to the top of your Document styles:
    * {margin:0; padding: 0; border: 0;}
  • Page 5: Resave the page again (with the zeroed out padding and margin) and use the CSS techniques we covered to add some style. What margin and padding amounts make the page look best? Experiment with various amounts of padding, margin and border sizes to see how you can change the page layout.
  • Page 6: Resave the page again. Your final page should include the simple rollover navigation and be a well designed page. Take a look at real websites to get ideas.

Exercise Six 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 Basic Requirements Above & Beyond

Evaluation

This exercise is worth 30 points.

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


Useful Links

Basic CSS Styles

List of Supported HTML Color Names with hex codes included.