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.
- Type "Tuition and Living Expenses" in the empty space you left under "Academics" section
- Highlight the text you just typed and apply the "Heading 2" format in the Properties Inspector
- Hit the enter/return key to drop down a line
- Type the following headings:
- Budget Outline
- Paying for School
- Investing in My Education
- Highlight each of these sub-headings, and apply the "heading 3" format in the Properties Inspector
- The formatting should look similar to the example below
- Place the cursor at the end of the "Budget Outline" sub-heading and hit the enter/return key
- We're going to use another table to display the budget information
- Select Insert > Table
- Type "6" in the Row box
- Type "2" in the Column Box
- Type "350" in the Width box and change the value type to pixels (px)
- Type "1" for Border Thickness
- Type "0" in the Cell Padding and Cell Spacing boxes
- Under the Header section, Click the Left format
- Click OK
- If you ended up with an extra space underneath the table, place the cursor in the space and hit the backspace/delete key
- 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
- Highlight the left column cells from "Tuition" to "Other Essentials"
- In the Properties Inspector, select "Left" in the Horizontal Alignment drop down menu
- Place the cursor in the "Total" cell and select "Right" in the Horizontal Alignment drop down menu
- The table should look similar to the example below
- Highlight all the cells in the right column, then select "Right" in the Horizontal Alignment drop down menu in the Properties Inspector
- Fill in the appropriate values for each of the cells so your table looks similar to the example below
- We're going to apply some specific styling to this table by creating a new ID and apply it to the table
- Click the New CSS Rule Button in the CSS Styles panel
- The New CSS Rule dialogue box opens
- Change the selector to "ID" by clicking the Selector Type drop down menu
- Type "budget" in the Selector Name box
- Click OK
- The CSS Rule Definition for #admissions dialogue box opens
- Select the Box property in the Category column
- In the Margin property section, type "5" for all four sides and leave the value type as pixels (px)
- Select the Border property in the Category column
- In the Style section, select "solid" fromt the drop down menu for all four (4) sides
- In the Size section, type "4" and leave the value type as pixels (px)
- 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
- Click OK
- Now we need to apply the ID to the table
- 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
- In the Properties Inspector, click inside the ID box and select "admissions"
- By applying the ID "budget", the table should look similar to the image below
- Place the cursor in the bottom right cell with the added total value of the cost to attend
- In the Properties Inspector, change the background color to something that compliments your design
- You are free to add additional styling to this table as you see fit; we will leave our table as the image shows below
Inserting Remaining Content Information for Tuition and Living Expenses
- Copy the individual information that applies to each of the remaining sub-headings
- Select Edit > Paste Special, or ctrl + shift + v, and click the "Text Only" radio button
- Clean up the text as needed
- Apply the "paragraph" format in the Properties Inspector where needed so the Tutition and Living Expenses section looks similar to the image below
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.
- 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
- Select Insert > Image
- Navigate to the images folder inside the portfolio folder
- Select an image and click OK
- The Image Accessability Attributes (alt tag) dialogue box opens
- Type an appropriate name for the image
- Click OK
- Align the image appropriately by right-clicking on the image and selecting align
- We chose to align the image to the right to flow with the text like the finished example below
- Hit enter/return at the end of the last line to create an empty space to enter content for the next exercise
- 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