Portfolio: Inserting and Styling Content

Creating and Inserting a Graphic for the Home Page

To add some visual interest and personalization to the home page of our portfolio, we will create a unique graphic representative of you and your interests.

Create a Unique Graphic in Photoshop

Depending on which course you are enrolled in, follow along with the below tutorials to create your own graphic-style image. Note: make sure you follow the size and save procedures below before inserting the graphic in our home page.

Sizing Procedure

  1. Open the .psd file of the graphic
  2. Click Image > Image size
  3. Change the value type from "inches" to "pixels"
  4. Type 200 in the Width box
  5. click OK

Saving Procedure

  1. Click File > Save as
  2. Type "profile_graphic" in the File name box
  3. Select "JPEG (.JPG, .JPEG, JPE)" from the Format drop down menu
  4. Navigate to the "images" folder in your portfolio folder in your U drive by clicking the "Save in" drop down menu
  5. The JPEG Options dialogue box opens
  6. Select "medium" quality
  7. Click OK

Insert the Graphic on the Home Page

  1. If you don't have the index.html file open, Open the "index.html" file by double-clicking on the file in the Files panel
  2. Place your cursor BEFORE the heading "Profile"
  3. Insert Image
  4. Click Insert > Image
  5. Navigate to the "images" folder inside your portfolio folder
  6. Select your poster graphic
  7. Click OK
  8. File Select Dialogue Box
  9. The Image Tag Accessability Attributes (Alt) dialogue box opens
  10. Type in an approopiate name for the Alt tag
  11. Alt Tag Big Poster
  12. Click OK
  13. You should see the "Go Big" graphic inserted to the left of the heading "Profile" similar to the image below – we will fix the formatting of this in the next step
  14. Go Big Poster Inserted
  15. Right-click on the image to bring up a set of formatting options
  16. Select Align > right
  17. Align Right Menu
  18. The graphic should snap to the right of the Profile bullet points
  19. If you don't have enough text to fill out the length of the image like in the example below,we will fix this in a later step
  20. Go Big Poster Inserted Right

Styling the <img> Tag

For images inserted in our content <div> tag, we want to add a bit of padding around the image to space other elements, such as text, away from the image

  1. Click the graphic we just inserted
  2. Tag Selector Img
  3. Make sure the <img> tag is selected in the Tag Selector
  4. Click the New CSS Rule button
  5. New CSS Rule Button
  6. The New CSS Rule dialogue box opens
  7. Click the Less Specific button one (1) time
  8. If you ended up with an "h1" in your selector name, i.e. #content h1 img, delete the "h1" and the extra space so your selector name looks like the image below
  9. New CSS Rule Img
  10. Click OK
  11. The CSS Rule Definition for #content img dialogue box opens
  12. Select the Box property in the Category column
  13. In the Padding property section, Type in 5 for all four sides (leave the "same for all" box checked) and leave the value type as pixels (px)
  14. Click OK
  15. You should see additional padding around the image like in the example
  16. Go Big Poster Styled


Note: If your graphic is longer than your profile points, move to the next step


Creating a "Clear" Class Optional Step for Long Graphic

If the bulleted list is shorter than the graphic, the graphic will appear to fall outside of the content area. This is because the content <div> only expands to fit text, not images. If we leave the page in this way, in the next tutorial we will have problems inserting the Goals section as a nested <div> tag.

We're going to fix this issue by creating a useful class called "clear" which essentially makes a point in our document that acts as a new starting point in our content <div> tag.

    New CSS Rule Button
  1. First, click the New CSS Rule button
  2. The New CSS Rule dialogue box opens
  3. Change the Selector Type to Class in the drop down menu
  4. Type "clear" in the Selector Name box
  5. click OK
  6. The CSS Rule Definition for .clear dialogue box opens
  7. Select the Box propety in the Category column
  8. In the drop down menu for the Clear property, select "both"
  9. In the Padding property section, type 0 for all four (4) sides (leave the "same for all" box checked) and leave the value type as pixels (px)
  10. In the Margin property section, type 0 for all four (4) sides (leave the "same for all" box checked) and leave the value type as pixels (px)
  11. Click OK
  12. Make sure you have inserted at least one (1) extra space beneath the bulleted list by hitting the enter/return key 2 times at the end of the last bullet point
  13. View Options
  14. Place the cursor in the extra space
  15. Switch to Code View by clicking the "Code" button in the View menu
  16. Find where your cursor is placed – it should be in the same location where you placed it in design view in the empty paragraph
  17. Note: depending on how much content you have at this point, the corresponding line numbers in your document may different than the example
  18. Hit the enter/return key one (1) time after the closing </p> tag so you have a new line
  19. Hit the "<" on your keyboard
  20. The Code Hinting window pops up with a list of all the tags
  21. Code Hint Windwow
  22. Type "br" – the Code Hinting box "jumps" to the br tag
  23. Hit the enter/return to confirm selection of the <br> tag
  24. Hit the spacebar on your keyboard
  25. The Code Hinting window pops up again, but this time displays attribute options
  26. Code Hinting Window Attributes
  27. Type "cl" – the Code Hinting box jumps to tags that start with "cl"
  28. Select the class attribute
  29. Code Hinting Class Attribute
  30. The Code Hinting box changes to a list of created classes
  31. Select "clear"
  32. Code Hinting Class Clear
  33. Hit the ">" key on your keyboard to automatically close the tag to read <br class="clear" /> like in example below
  34. Code View Br Class Clear
  35. Switch back to Design View by clicking the Design button in the View menu
  36. Your graphic should now fit nicely in the content <div> tag
  37. Finished View

Next Steps

In the next exercise, we are going to create a nested <div> region to house the Goals section.

Click here for the next tutorial