Portfolio: Inserting and Styling Content

Inserting the Career intro Writing for First-Year Students

To start off our Career Exploration page, we will insert the Career Intro Writing assignment as an introduction to the career research dream job assignment. To make this a bit more visual, we will insert a nested <div> tag so the intro writing appears as an essay.

Creating and Styling a Nested <div> Tag

Open your Career Intro Writing assignment.

  1. Open the "career_exploration.html" file by double-clicking on the file in the Files Panel
  2. Delete the filler text "Career Exploration", but leave at least TWO (2) extra spaces
  3. Make sure you place the cursor in the first (top) space – this will save you a headache later
  4. Click the Insert DIV Tag button in the Insert panel
  5. Insert DIV Tag
  6. The Insert DIV Tag dialogue box opens
  7. Leave the Insert point as "At insertion point"
  8. In the ID box, type "essayContainer" like in the image below
  9. Insert DIV Essay Container
  10. Click the New CSS Rule button
  11. The New CSS Rule dialogue box opens for the ID "essayContainer"
  12. Click OK
  13. The CSS Rule Definition dialogue box opens for ID "essayContainer"
  14. Select the Box property in the Category columnn
  15. Type "872" in the Width property box and leave the value type as pixels (px)
    • Why 872px? First, I wanted 10 pixels of spacing between the left and right sides (20px total), and we will be adding a 4px border (8px total) in the next step, so 900 - 20 - 8 = 872
  16. In the Margin property section, uncheck the "same for all" box
  17. Type "10" in the top and bottom boxes and leave the value type as pixels (px)
  18. For the left and right margins, select auto from the drop down menu
  19. CSS Rule Define Essay Container
  20. Select the Border property in the Category column
  21. Select solid in the Style category for all four (4) sides
  22. Type "4" in the size box for all four (4) sides; leave the value type set to pixels (px)
  23. Select a color by clicking on the color picker – we chose the same color we used for previous borders for this page to compliment our design
  24. CSS Rule Define Essay Container
  25. Click OK
  26. Click OK again
  27. You should see a <div> tag inserted like in the example below
  28. Screen Shot Essay Container

Inserting the Career Intro Writing Essay

  1. With the "Content for ID essayContainer goes here" highlighted, Type the title of your essay
  2. Highlight the title you just typed
  3. Format Heading 1
  4. In the Properties Inspector, change the format to a Heading 1
  5. Then, with the cursor placed in the title, right-click and select align > center
  6. Paragraph Align
  7. Your heading should look similar to the image below
  8. Screen Shot Essay Container Heading
  9. Hit the enter/return key at the end of the title to create a new line below the title
  10. Format P
  11. Change the format to a Paragraph in the Properties Inspector
  12. If your cursor is still centered instead of aligned to the left, right-click and select align > left to align the paragraph to the left
  13. Paragraph Align
  14. In the Word document with your essay, highlight the essay – DO NOT INCLUDE THE PART II REFLECTION – and select Edit > Copy or ctrl + c
  15. In Dreamweaver, select Edit > Paste Special
  16. Check the button for "Paste with Structure"
  17. Past Special
  18. Double-check your document to make sure it pasted correctly – your essay should look similar below
  19. Career Intro Writing Complete
  20. Select File > Save All

Next Steps

In the next exercise, you will insert content for the Career Exploration Dream Job research assignment.

Click here for the next tutorial