Portfolio: Inserting and Styling Content

Inserting Second-Year's Additional Content for the Education Research Page

If you are a Second Year student and completed either the "Crater Foundation Scholarship Essay" or the "Internship Reflection", then continue with the tutorial exercise below.

If you are a First Year student or a Second Year student who did not complete the above two options because your plans changed and you completed the Education Research for a different college/university, then begin the next exercise Inserting Content for the Career Exploration Page.

Inserting Essay Content

To offset and bring attention to the essay from the rest of the education research content, we're going to nest a <div> inside the content <div> so it appears like a "typed" paper.

  1. Open your essay in Word
  2. Open the "edcuation_research.html" file by double-clicking the file in the Files panel
  3. Place the cursor in an empty space below the research content – if you don't have an empty space, create one by placing the cursor at the end of the last line and hitting the enter/return key
  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 Tag
  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 Inserted
  29. With the "Content for ID essayContainer goes here" highlighted, Type the title of your essay
  30. Highlight the title you just typed
  31. Format Heading 1
  32. In the Properties Inspector, change the format to a Heading 1
  33. Then, with the cursor placed in the title, right-click and select align > center
  34. Paragraph Align
  35. Your heading should look similar to the image below
  36. Screen Shot Essay Container Heading
  37. Hit the enter/return key at the end of the title to create a new line below the title
  38. Change the format to a Paragraph in the Properties Inspector
  39. Format P
  40. 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
  41. In the Word document with your essay, highlight the essay and select Edit > Copy or ctrl + c
  42. In Dreamweaver, select Edit > Paste Special
  43. Check the button for "Paste with Structure"
  44. Paste Special Structure
  45. Double-check your document to make sure it pasted correctly – your essay should look similar below
  46. Essay Container complete
  47. Select File > Save All

Next Steps

In the next exercise, you will insert content for the Career Exploration page

  • Click here for the next tutorial