Portfolio: Building the Shell

Inserting the Content Area

  1. Click the Insert Div Tag button
  2. Change the insert point to "after tag," and select <div id="navbar"> in the drop down menu to the right
    • If you don't see these options, make sure your cursor is inside the wrapper <div> somewhere – either in the header or the navbar will do
  3. Type "content" 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 #content dialogue box opens
  8. Select the box property in the category column
  9. Type 900 in the width box and leave the unit at "px" (pixels)
  10. We will leave the height box blank so as we fill the content <div> with content, it will expand to fit the contents
  11. Click OK
  12. The Insert Div Tag dialogue box re-appears
  13. Click OK again
  14. In the index.html document, you should see the content <div> below the navbar with the text "Content for id "content" goes here"
  15. Instead of deleting the text in the content <div>, place the cursor right after the text, and hit the enter/return key a few times – note how the content <div> expands
    16. Content Goes Here

Next Steps

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

Click here for the next tutorial