CBTE 162: Web Page Creation : Exercises

Exercise 7: CSS : Using DIVs for Layout Creating Navigation Using Lists

CSS allows us to take more control over positioning and styles on our pages.Use DIVs for layout and unordered lists to create navigation.

Use Exercise 7 to test out some possible page layouts for Project 2. Try several different pages, experiment with your navigation, photo positioning, text size, padding, margin and borders.


CSS: Page Layout Utilizing DIVs

Use Divs to break pages up into sections and IDs to define the areas more precisely.

HTML Elements

  • #idname {property: value;}
    • <div id="x">

CSS: Style Unordered Lists into Navigation

Use IDs to further style unordered lists. Create horizontal or vertical navigation or a combination of both.

HTML Elements

  • <ul>
  • <li>

Design Process

  • Create a project folder named "Ex7"
  • 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.
  • CONTENT: Write your content in natural flow (the order that can be read with no formatting and make sense). Format your pages using the steps listed below. Link all pages together.
  • Index page: Create content that can break into individual areas including a Banner, Navigation, left and right column and footer. Use this content on all pages. On the index page don't add any formatting - allow the content to be seen in "Natural Flow"
  • Page 2: Use the same content you have written for you index page and begin adding formatting to give your page some shape. Be sure to use an overall wrapper div.
  • Page 3: Resave the page as a new name and add more CSS styles
  • Page 4: Resave the page again as a new name and work on your navigation. Add lists to build out the horozontal navigation
  • Page 5: Resave the page again and center your navigation that you made using lists. Try adding a background image for the hover state
  • Page 6: Resave the page again. Add sidebar navigation that is either your main navigation or use as sub navigation.

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