Portfolio: Inserting and Styling Content

Inserting the "Tuition and Living Expenses" Content for the Education Research Page

Continuing on with inserting the content for the Education Research page, open your Education Research Word document if it's not open already.

    Heading 2 Format
  1. Type "Tuition and Living Expenses" in the empty space you left under "Academics" section
  2. Highlight the text you just typed and apply the "Heading 2" format in the Properties Inspector
  3. Hit the enter/return key to drop down a line
  4. Type the following headings:
    • Budget Outline
    • Paying for School
    • Investing in My Education
    Heading 3
  5. Highlight each of these sub-headings, and apply the "heading 3" format in the Properties Inspector
  6. The formatting should look similar to the example below
  7. Screen Shot Sub Headings Inserted
  8. Place the cursor at the end of the "Budget Outline" sub-heading and hit the enter/return key
  9. Insert Table
  10. We're going to use another table to display the budget information
  11. Select Insert > Table
  12. Type "6" in the Row box
  13. Type "2" in the Column Box
  14. Type "350" in the Width box and change the value type to pixels (px)
  15. Type "1" for Border Thickness
  16. Type "0" in the Cell Padding and Cell Spacing boxes
  17. Under the Header section, Click the Left format
  18. Table Dialogue Box
  19. Click OK
  20. If you ended up with an extra space underneath the table, place the cursor in the space and hit the backspace/delete key
  21. Screen Shot Expenses Table Unstyled
  22. Type the following headings for each of the left cells in the table and adjust the column width to fit the content better like the image below:
    • Tuition (specify Resident or Non-Resident)
    • Books and Supplies
    • Housing (specify campus, apartment, home, fraternity)
    • Food
    • Other Essentials
    • Total
    Screen Shot Table Headings Inserted
  23. Highlight the left column cells from "Tuition" to "Other Essentials"
  24. Properties Inspector Table Cell Align
  25. In the Properties Inspector, select "Left" in the Horizontal Alignment drop down menu
  26. Place the cursor in the "Total" cell and select "Right" in the Horizontal Alignment drop down menu
  27. Properties Inspector Table Cell Align
  28. The table should look similar to the example below
  29. Screen Shot Budget Table Headings
  30. Highlight all the cells in the right column, then select "Right" in the Horizontal Alignment drop down menu in the Properties Inspector
  31. Properties Inspector Table Cell Align
  32. Fill in the appropriate values for each of the cells so your table looks similar to the example below
  33. Screen Shot Table Values Filled
  34. We're going to apply some specific styling to this table by creating a new ID and apply it to the table
  35. New CSS Rule Button
  36. Click the New CSS Rule Button in the CSS Styles panel
  37. The New CSS Rule dialogue box opens
  38. Change the selector to "ID" by clicking the Selector Type drop down menu
  39. Type "budget" in the Selector Name box
  40. New CSS Rule Budget
  41. Click OK
  42. The CSS Rule Definition for #admissions dialogue box opens
  43. Select the Box property in the Category column
  44. In the Margin property section, type "5" for all four sides and leave the value type as pixels (px)
  45. CSS Rule Define Budget
  46. Select the Border property in the Category column
  47. In the Style section, select "solid" fromt the drop down menu for all four (4) sides
  48. In the Size section, type "4" and leave the value type as pixels (px)
  49. In the Color section, select a color from the color picker box that complements your color scheme – I chose the same color I used for the previous Admissions table
  50. New CSS Rule Budget
  51. Click OK
  52. Now we need to apply the ID to the table
  53. Select the table by clicking on the edge of the border – you will know it's selected if the <table> tag is selected in the Tag Selector
  54. Tag Selector Table
  55. In the Properties Inspector, click inside the ID box and select "admissions"
  56. Properties Inspector
  57. By applying the ID "budget", the table should look similar to the image below
  58. Screen Shot Budget Border Styled
  59. Place the cursor in the bottom right cell with the added total value of the cost to attend
  60. In the Properties Inspector, change the background color to something that compliments your design
  61. Properties Inspector Table BG
  62. You are free to add additional styling to this table as you see fit; we will leave our table as the image shows below
  63. Screen Shot Budget Complete

Inserting Remaining Content Information for Tuition and Living Expenses

  1. Copy the individual information that applies to each of the remaining sub-headings
  2. Select Edit > Paste Special, or ctrl + shift + v, and click the "Text Only" radio button
  3. Clean up the text as needed
  4. Properties Inspector p
  5. Apply the "paragraph" format in the Properties Inspector where needed so the Tutition and Living Expenses section looks similar to the image below
  6. Screen Shot tuition complete

Inserting Images for the Tuition and Living Expenses Content

Insert an image or two to add visual interest to this section – use your best judgement about size and placment.

    Image Insert
  1. Place the cursor in the location you would like to add an image – in this case, we will insert an image at the same level as the first sub-heading "Budget" so we placed the cursor at the beginning of this heading
  2. Select Insert > Image
  3. Navigate to the images folder inside the portfolio folder
  4. Select an image and click OK
  5. The Image Accessability Attributes (alt tag) dialogue box opens
  6. Type an appropriate name for the image
  7. Alt Tag
  8. Click OK
  9. Align the image appropriately by right-clicking on the image and selecting align
  10. Image Align
  11. We chose to align the image to the right to flow with the text like the finished example below
  12. Screen shot image inserted
  13. Hit enter/return at the end of the last line to create an empty space to enter content for the next exercise
  14. Select File Save all

Next Steps

If you are a first-year student, you will move on to inserting content for the Career Exploration page; however, if you are second-year student, you may need to insert the additional content outlined in the Education Research assignment

Click here for inserting content for the Ed Expoloration page tutorial

Click here if you are a second-year student and need to insert the additional content for the Ed Research page