Portfolio: Inserting and Styling Content

Inserting "Resume Profile" for the Home Page

As we complete pages for the portfolio, we will start to see less and less styling required for each page. This is because we've already created styling for most elements, and as we get to them all, you will notice many elements are already styled.

Insert the "Profile" Heading

  1. Open "index.html" by double-clicking on the file in the Files Panel
  2. Select the text "Content for id "content" goes here"
  3. Delete the text
  4. Type "Profile
  5. In the Properties Inspector panel, change the format from a paragraph to a Heading 1
  6. Since we styled the <h1> tag in the Resume, the "Profile" heading should be styled the same way
  7. You should see the "Profile" text size change and notice the text is spaced away from the top and left borders
  8. Place the cursor after the "Profile" text
  9. Hit the return/enter key to drop down a line

Insert the Profile Bullet Points

Next, we need to insert the Resume Profile points from the Resume.

  1. Open your "Resume Profile" or your "Resume" in Word
  2. Highlight your Profile points, then ctrl c or right-click copy the points
  3. Back in Dreamweaver, place your cursor beneath the "Profile" heading
  4. Click Edit > Paste Special; the Paste Special dialogue box opens
  5. Select the second option "Text with Structure"
  6. Click OK
  7. If you've styled the <ul> and <li> tags correctly in the Resume page, you should see your bulleted list appear styled like the image below.
    8. Profile Sentences Styled
  8. Before we go on to the next step, hit the return/enter key two (2) times to create additional space below the unordered list. When you hit the return/enter key once, it creates another bullet point – when you hit return/enter key a second time, it drops the bullet point and makes the line a <p> paragraph. We'll need this space to insert the goals <div>

If your bullet points are not styled because you inserted your profile points as a paragraph or there is some other reason, you may need to style your bullet points. Follow the steps below to style your bullet points if they are NOT style already.

Styling the Profile Bullet Points

  • In the Tag Selector, click the <ul> tag
  • Click the New CSS Rule button
  • The New CSS Rule Dialogue box opens
  • Click the Less specific button one (1) time so only "#content ul" appears in the Selector Name box
  • Click OK
  • The CSS Rule Definition for #content ul dialogue box opens
  • Select the box property in the Category column
  • In the Padding Section, Type .25 for all four sides and change the unit from px (pixels) to em
  • In the Margin section, UNCHECK the "same for all" box
  • Type 3 in the left box and change the unit from px (pixels) to em
  • Select the List property in the category column
  • For unordered lists, you only have three (3) different styles for bullets – choose one for your preference – leaving the box blank automatically defaults to disc
  • Click OK
  • Your Profile sentences should like the image below
  • Next, place your cursor in any one of the profile sentences
  • Click the <li> tag in the Tag Selector
  • Click the New CSS Rule button
  • The New CSS Rule Dialogue box opens
  • Click the Less specific button one (1) time so only "#content ul li" appears in the Selector Name box
  • Click OK
  • Select the Box property in the Category column
  • We only need to create a bit of padding between each list item for readability, so UNCHECK the "same for all" box in the Padding section
  • In the top box type .15 and change the unit from px (pixels) to em
  • In the bottom box type .15 and change the unit from px (pixels) to em
  • Click OK
  • You should notice a bit more padding between each list item
  • Before we go on to the next step, hit the return/enter key two (2) times to create additional space below the unordered list. When you hit the return/enter key once, it creates another bullet point – when you hit return/enter key a second time, it drops the bullet point and makes the line a <p> paragraph. We'll need this space to insert the goals <div>

    • Next Steps

    In the next exercise, we will insert your goals by creating a new <div> tag and nesting it inside of the content <div> below the bullet points.

    Click here for the next tutorial