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
  5. Click the New CSS Rule button
  6. A new CSS Rule dialogue box appears
  7. Click OK
  8. The CSS Rule Definition for #navbar dialogue box opens
  9. 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.
  10. Click the browse button
  11. Navigate to the images folder inside the "lastname_firstname_portfolio" folder
  12. Select "navbar_bg.jpg"
  13. In the Background-repeat drop down menu, select "repeat-x"
  14. In the Background-position (x) drop down menu, select "left"
  15. In the Background-position (y) drop down menu, select "top"
  16. Rule Define Navbar
  17. Next, select the Box property in the category column
  18. Type 900 in the width box and leave the unit at "px" (pixels)
  19. Type 25 in the height box and leave the unit at "px" (pixels)
  20. Rule Define Navbar
  21. Select the border property in the category column
  22. We're only going to use a border on the bottom, so UNCHECK the "Same for all" box
  23. For the bottom border, Select solid from the "Style" drop down menu
  24. Type 2 in the "width" box and leave "px" (pixels) for the unit
  25. Click the "color picker" box and select the black swatch
  26. Rule Define Navbar
  27. Click OK
  28. The Insert Div Tag dialogue box re-appears
  29. Click OK again
  30. In the index.html document, you should see the banner image followed by the navbar with the text "Content for id "navbar" goes here"
  31. 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