Portfolio: Building the Shell

Inserting the Header

  1. Click the Insert Div Tag button
  2. With your cursor still inside the wrapper <div>, we can set the insert point to "at insertion point"
    • Alternative – select "after start of tag" from the insert drop down menu
    • You will note that drop down menu to the right will become active and displays "body". Select <div id="wrapper"> from this drop down menu
  3. Type "header" in the ID box
  4. Click the New CSS Rule button
  5. A new CSS Rule dialogue box appears
  6. Click OK
  7. The CSS Rule Definition for #header dialogue box opens
  8. Slect the Background property in the Category column
    • I've provided a background image for you for now so you can see how to insert a background image. You'll change this later after you've designed your own header
  9. Click the browse button
  10. Navigate to the images folder inside the "lastname_firstname_portfolio" folder
  11. Select "banner_bg.jpg"
  12. Next, select the Box property
  13. Type 900 in the width box and leave the unit at "px" (pixels)
  14. Type 125 in the height box and leave the unit at "px" (pixels)
  15. Click OK
  16. The Insert Div Tag dialogue box re-appears
  17. Click OK again
  18. In the index.html document, you should see the banner image with the text "Content for id "header" goes here"
  19. Delete the text from the header

Next Steps

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

Click here for the next tutorial