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
  3. Click Insert > Image
  4. Navigate to the "images" folder inside your portfolio folder
  5. Select your poster graphic
  6. Click OK
    7. File Select Dialogue Box
  7. The Image Tag Accessability Attributes (Alt) dialogue box opens
  8. Type in an approopiate name for the Alt tag
    9. Alt Tag Big Poster
  9. Click OK
  10. 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
    11. Go Big Poster Inserted
  11. Right-click on the image to bring up a set of formatting options
  12. Select Align > right
    13. Align Right Menu
  13. The graphic should snap to the right of the Profile bullet points
  14. 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
    15. 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
  2. Make sure the <img> tag is selected in the Tag Selector
  3. Click the New CSS Rule button
    4. New CSS Rule Button
  4. The New CSS Rule dialogue box opens
  5. Click the Less Specific button one (1) time
  6. 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
    7. New CSS Rule Img
  7. Click OK
  8. The CSS Rule Definition for #content img dialogue box opens
  9. Select the Box property in the Category column
  10. 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)
  11. Click OK
  12. You should see additional padding around the image like in the example
    13. 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
  13. Place the cursor in the extra space
  14. Switch to Code View by clicking the "Code" button in the View menu
  15. Find where your cursor is placed – it should be in the same location where you placed it in design view in the empty paragraph
  16. Note: depending on how much content you have at this point, the corresponding line numbers in your document may different than the example
  17. Hit the enter/return key one (1) time after the closing </p> tag so you have a new line
  18. Hit the "<" on your keyboard
  19. The Code Hinting window pops up with a list of all the tags
    20. Code Hint Windwow
  20. Type "br" – the Code Hinting box "jumps" to the br tag
  21. Hit the enter/return to confirm selection of the <br> tag
  22. Hit the spacebar on your keyboard
  23. The Code Hinting window pops up again, but this time displays attribute options
    24. Code Hinting Window Attributes
  24. Type "cl" – the Code Hinting box jumps to tags that start with "cl"
  25. Select the class attribute
    26. Code Hinting Class Attribute
  26. The Code Hinting box changes to a list of created classes
  27. Select "clear"
    28. Code Hinting Class Clear
  28. Hit the ">" key on your keyboard to automatically close the tag to read <br class="clear" /> like in example below
  29. Code View Br Class Clear
  30. Switch back to Design View by clicking the Design button in the View menu
  31. Your graphic should now fit nicely in the content <div> tag
    32. 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