Portfolio: Inserting and Styling Content

Inserting the "About" Content for the Education Research Page

Before we get into inserting content for the Edcuation Research page, take time to collect images directly related to the school you researched. Gather a variety of images to create visual interest to accompany the research. Below is a list of suggestions:

Create a new folder in the images folder to house all the images for the Education Research page – title it with an appropriate, descriptive name.

Required Content for First Year Students

First year students are responsible for completing and inserting the required content from the Education Research assignment, as well as appropriate images of the institution.

Required Content for Second Year Students

The content for this page will depend on which option you selected for the Edcuation Research assignment. You MUST include the research about the school/institution outlined under the "First Years – So, You Want to be a(n)..." section. You are free to use the same design/format from last year's portfolio if your educational interests didn't change; however, if your interests did change, then your page should include only the new research you conducted based on your shift in interest.

If your educational interest(s) didn't change and you are using the research from last year, then you MUST include one of the following required assignments:

Inserting the "About" Research Content

While you might think about copying and pasting the entire Word document with your research, I recommend you copy and paste sections at-a-time to minimize the amount of "clean up" in formatting. You are welcome to experiment and/or use your own method for inserting content for this page; however, the instructions outlined in this tutorial will be based on copying and pasting sections from an example document.

Note: you are free to format this page according to your own style; however, you will be responible for presenting the information in a clean, organized way and MUST include sub-headings to break up and organize the page effectively.

  1. Open all the necessary Word files with the research content and/or reflection essays
  2. In Dreamweaver, open "education_research.html" by double-clicking on the file in the Files Panel
  3. Delete the text "Education Research" and most or all of the extra spaces we inserted previously
  4. Type an appropriate title for this page – be descriptive, be creative. Titles like "My Education Plan" or "Education Research" will automatically earn you a "1" for this page. Appropriate suggestions include:
    • "Edcuation Research: Research for Tomorrow"
    • "The Most Important Research Assignment of My Young Adult Life"
    • "I see a Duck in the Future"
    • "Beaver Tracks: My Path to College"
    Format H1
  5. Hightlight the text you just typed in, and apply the "heading 1" format in the Properties Inspector
  6. Since we've already styled the <h1> tag, we shouldn't need to adjust the styling of this heading
  7. Type "About insert name of school here" – i.e. "About the University of Oregon"
    8. Format H2
  8. Highlight the text you just typed and apply the "heading 2" format in the Properties Inspector
  9. Since we've already styled the <h2> tag, we shouldn't need to adjust the styling of this heading
  10. Copy the description sentence(s) of the university, vocational, or technical school you researched
  11. Back in Dreamweaver, select Edit > Paste Special
  12. Click the radio button for "Text Only"
    13. Paste Special Text Only
  13. Click OK
    14. Format p
  14. Highlight the text just you just pasted, then apply the "paragraph" format in the Properties Inspector if it doesn't have the <p> tag applied to it already
    • Important note: if your sentence is formatted as a numbered list or bullet point in Word, you may need to delete the point. We will use paragraphs for the majority of the formatting for this tutorial
  15. Your page should look similar to the example below
    16. Screen Shot University Description
  16. Type the following sub-headings for this section:
    • Vision Statement or Mission Statement
    • The City of insert name of city where the school is located
    • Student-to-Teacher Ratio
    • Student Demographics
    Format H3
  17. Highlight each of these sub-headings, and apply the "heading 3" format in the Properties Inspector
  18. Place your cursor in one of these sub-headings with the <h3> tag applied
    19. Tag Selector H3
  19. Click the <h3> tag in the Tag Selector so it appears "bubbled" and highlights the sub-heading
    20. New CSS Rule Button
  20. Click the New CSS Rule button
  21. The New CSS Rule dialogue box opens
  22. Click the Less specific button one (1) time so the Selector Name read "#content h3" like the image below
    23. New CSS Rule content h3
  23. Click OK
  24. The CSS Rule Definition for #content h3 dialogue box opens
  25. With the Type property selected in the Category column, Type "1.15" in the Font Size box, then change the value type from pixels (px) to ems (em) in the drop down menu
  26. Select "Uppercase" from the Text Transform drop down menu
  27. Select a different shade of color for the font by clicking the Color Picker box – we chose a medium gray (#666)
    28. CSS Rule Define h3 Type
    • Note: you do not need to adhere to all the styling settings shown above – you are free to style this heading to fit your design
  28. Next, select the Box property in the Category column
  29. In the Padding property section, type 5 for all four (4) sides
    30. CSS Rule Define h3 Box
  30. Click OK
  31. Note the changes to the <h3> tag
    32. Screen Shot About Sub-headings styled
  32. Copy the content for the Vision/Mission Statement from your Word document
  33. In Dreamweaver, click Edit > Paste Special (ctrl + shift + v) and make sure the radio button for "Text Only" is checked
  34. Click OK
    35. Format p
  35. Apply the <p> tag to the text where appropriate
  36. Repeat the procedure to complete the remaining content for the "About" section
    37. Screen Shot About Info Filled

Inserting Images in the About Section

To add some visual interest to our page, we will add images related to the "About" section. Consider using images such as a school logo, school mascott, or of the city where the school is located.

Important note: you may need to resize the images you want to use in Photoshop first to make them work for this section. DO NOT resize the images in Dreamweaver!

    Image Insert
  1. Place the cursor to the left of the "About" heading
  2. Click insert > image
  3. Navigate to the images folders and select the image you want to use
  4. Click OK
  5. The Image Tag Accessability Attributes dialogue box opens
  6. Type an appropriate name for this image – i.e., "University of Oregon Logo"
    7. Alt Tag dialogue box
  7. Click OK
  8. The image will be placed to the left of the heading "About ..." – we will adjust the alignment of the image in the next step
    9. Screen Shot Image Insert Seal Unformatted
  9. Right-click on the image, select align > right to position the image to the right inline with the text
    10. Image Align Right
  10. You should see the image align to the right of the text
    11. Screen Shot Image Insert Seal Formatted
  11. Add another image or two (depending on the amount of space and size of images you have) by repeating the procedure above
  12. You are free to experiment with the image placement in the text – like in the example below
    13. About Complete
  13. Leave a blank line at the bottom of the About section to insert the next sub-heading "Academics"
  14. Select File > Save All

Next Steps

In the next exercise, we will insert the content from the "Academics" section of the Educuation Research assignment.

Click here for the next tutorial