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
  5. The Insert DIV Tag dialogue box opens
  6. Leave the Insert point as "At insertion point"
  7. In the ID box, type "essayContainer" like in the image below
    8. Insert DIV Essay Container
  8. Click the New CSS Rule button
  9. The New CSS Rule dialogue box opens for the ID "essayContainer"
  10. Click OK
  11. The CSS Rule Definition dialogue box opens for ID "essayContainer"
  12. Select the Box property in the Category columnn
  13. 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
  14. In the Margin property section, uncheck the "same for all" box
  15. Type "10" in the top and bottom boxes and leave the value type as pixels (px)
  16. For the left and right margins, select auto from the drop down menu
    17. CSS Rule Define Essay Container
  17. Select the Border property in the Category column
  18. Select solid in the Style category for all four (4) sides
  19. Type "4" in the size box for all four (4) sides; leave the value type set to pixels (px)
  20. 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
    21. CSS Rule Define Essay Container
  21. Click OK
  22. Click OK again
  23. You should see a <div> tag inserted like in the example below
    24. 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
  3. In the Properties Inspector, change the format to a Heading 1
  4. Then, with the cursor placed in the title, right-click and select align > center
    5. Paragraph Align
  5. Your heading should look similar to the image below
    6. Screen Shot Essay Container Heading
  6. Hit the enter/return key at the end of the title to create a new line below the title
    7. Format P
  7. Change the format to a Paragraph in the Properties Inspector
  8. 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
    9. Paragraph Align
  9. In the Word document with your essay, highlight the essay – DO NOT INCLUDE THE PART II REFLECTION – and select Edit > Copy or ctrl + c
  10. In Dreamweaver, select Edit > Paste Special
  11. Check the button for "Paste with Structure"
    12. Past Special
  12. Double-check your document to make sure it pasted correctly – your essay should look similar below
    13. Career Intro Writing Complete
  13. 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