Portfolio: Building the Shell

Inserting the Navbar

  1. Click the Insert Div Tag button
  2. Change the insert point to "after tag," and select <div id="header"> in the drop down menu to the right
    • If you don't see these options, make sure your cursor is inside the header <div>
  3. Type "navbar" in the ID box
    4. Insert div Tag
  4. Click the New CSS Rule button
  5. A new CSS Rule dialogue box appears
  6. Click OK
  7. The CSS Rule Definition for #navbar dialogue box opens
  8. Select the Background property in the Category column
    • I've provided a background image for you. Note the size of this image: it's 5px x 25px; however, our navbar will be 900px by 25px. Dreamweaver, by default, repeats a background image until it fills up the space it's designated for. A nice feature we will take advantage of by repeating our image on the x-axis. This will reduce our image file size significantly. You'll change this later after you've designed your own.
  9. Click the browse button
  10. Navigate to the images folder inside the "lastname_firstname_portfolio" folder
  11. Select "navbar_bg.jpg"
  12. In the Background-repeat drop down menu, select "repeat-x"
  13. In the Background-position (x) drop down menu, select "left"
  14. In the Background-position (y) drop down menu, select "top"
    15. Rule Define Navbar
  15. Next, select the Box property in the category column
  16. Type 900 in the width box and leave the unit at "px" (pixels)
  17. Type 25 in the height box and leave the unit at "px" (pixels)
    18. Rule Define Navbar
  18. Select the border property in the category column
  19. We're only going to use a border on the bottom, so UNCHECK the "Same for all" box
  20. For the bottom border, Select solid from the "Style" drop down menu
  21. Type 2 in the "width" box and leave "px" (pixels) for the unit
  22. Click the "color picker" box and select the black swatch
    23. Rule Define Navbar
  23. Click OK
  24. The Insert Div Tag dialogue box re-appears
  25. Click OK again
  26. In the index.html document, you should see the banner image followed by the navbar with the text "Content for id "navbar" goes here"
  27. Delete the text from the navbar

Note: we will be inserting and styling the actual navigation menue in a later exercise

Next Steps

In the next exercise, you will continue building the layout for your portfolio.

Click here for the next tutorial