Mr. O'Connell's Technology Home Page
home web design business and personal finance biography links2

Web Page Design
Personal Website: Div Project

The goal of this project is to create a place for your navigation, title, an image, and body text on all six pages of your website. You will use a combination of Div Tags and Tables to do this. When the project is complete, you should have an identical layout on all six pages of your site. In later projects, you will add an image and text.

Please refer back to these directions often, as I will be revising the instructions as the project unfolds.

Here's a sample of what a page might look with the three divs, a table, an image, and some placeholder text added::

Important: Make sure that you insert each DIV only once on each page. Check your DIVS for doubles before you submit your work. If you did put the same DIV in more than once, figure out which of the two DIVS you aren't using, and delete it.

 

Insert a Div Tag for your navigation

  • Click at the top left of the page
    • Insert<Div
    • Insert<at insertion point
    • ID: nav
  • Click New CSS Rule
    • Under Rule Definition, confirm that This document only is selected in the drop-down menu at the bottom of the dialog box.
    • Click OK
  • On the left side of the CSS Rule Definition dialog box, click Background
    • Choose a NEW background color  
    • Select the hexadecimal value (the 6 numbers/letters) and copy (ctrl+C)
      • You will use the same color on all 6 pages by pasting this value
  • Click Box
  • In the Box dialog box, enter the following:
    • Width: 840
    • Height: 80
    • Margin (remove check mark on Same for All)
      • Left<set drop-down menu to Auto
      • Right<set drop-down menu to Auto
    • Click Okay
  • Do not delete the placeholder text at this time.

Repeat this process on all 6 pages

Insert a new Div Tag for your Title

  • Click at the top left of the page
  • Insert<Div
    • Insert<after tag
    • In the drop-down menu, choose #nav
    • ID: title
  • Click New CSS Rule
    • Under Rule Definition, confirm that This document only is selected in the drop-down menu at the bottom of the dialog box.
    • Click Okay
  • On the left side of the CSS Rule Definition dialog box, click Background
    • Choose a NEW background color  
    • Select the hexadecimal value (the 6 numbers/letters) and copy (ctrl+C)
      • You will use the same color on all 6 pages by pasting this value
  • Click Box
    • In the Box dialog box, enter the following:
      • Width: 840
      • Height: 80
      • Margin (remove check mark on Same for All)
        • Left<set drop-down menu to Auto
        • Right<set drop-down menu to Auto
    • Click OK
  • Cut and paste your title into the div
    • Format as Heading 1
  • Do not delete the placeholder text at this time.

Repeat this process on all 6 pages

 

Insert a new Div Tag and Table for the image and body text

  • Click at the top left of the page
  • Insert<Div
    • Insert<after tag
    • In the drop-down menu, choose #title
    • ID: body
  • Click New CSS Rule
    • Under Rule Definition, confirm that This document only is selected in the drop-down menu at the bottom of the dialog box.
    • Click Okay
  • On the left side of the CSS Rule Definition dialog box, click Background
    • Choose a NEW background color  
    • Select the hexadecimal value (the 6 numbers/letters) and copy (ctrl+C)
      • You will use the same color on all 6 pages by pasting this value
  • Click Box
    • In the Box dialog box, enter the following:
      • Width: 840
      • Height: 400
      • Margin (remove check mark on Same for All)
        • Left<set drop-down menu to Auto
        • Right<set drop-down menu to Auto
    • Click OK
  • Click to the right of the placeholder text, and hit Enter
  • Insert a table (Ctrl+Alt+T)
  • Table settings:
    • Rows: 1
    • Columns: 2
    • Table width: 840
    • Border thickness: 0
    • Cell Padding: 0
    • Cell spacing: 0
    • Click OK
  • Do not delete the placeholder text at this time.

Repeat this process on all 6 pages

When you're done, turn in your work through Google Classroom. Attach all six of your web pages.

In Google Classroom

  • Add<File<Select files from your computer
  • Navigate to your personal website folder
  • Ctrl click all six HTML pages
  • Upload
  • Turn In

 

F.A.Q.

Q: My DIV didn't work right, so I deleted it and tried to do it again. Now there are two DIVS by that same name. What should I do?

A: Before you try again, delete the DIV from both the page AND the CSS Designer<Selector panel. Save, and then try again.