Portfolio: Building the Shell

Inserting Site Title and Formatting Footer Content

In this exercise, you will insert a title for the site so the title will appear in the browser menu, and you will format the footer content with copyright information and an email link.

Inserting a Site Title

  1. In the Title Box, insert your first and last name, and "Portfolio"

Formatting Footer Content

The footer is a useful place for any disclaimers to protect your intelectual property. It's also a great place to add contact information.

Inserting Special Characters

  1. Delete the text "Content for id "footer" goes here"
  2. Type "All Rights Reserved" and insert a space after "Reserved"
  3. Select Insert from the top menu
  4. Select HTML > Special Characters > Copyright
  5. After you insert the copyright symbol, hit the return/enter to drop down one line

Inserting an Email Link

  1. In the line below the copyright informaiton, type your first and last name
  2. Next, highlight your name with the cursor
  3. Select insert > Email Link from the top menu
  4. type your student email address in the Email box
  5. Click OK
  6. Your footer should look like the image below

Styling the Email Link

We're going to give the email a bit of "interactive" flair. When a user hovers over the email link with his/her mouse, the link will "do something."

  1. Place your cursor somewhere inside the email link you just created
  2. At the bottom of the document screen, you will see a bar with a list of tags. This bar is called the "Tag Selector" and is very handy when it comes to selecting specific elements or tags in the html document
  3. Click the <a> tag – you will note that the <a> appears to be selected in a bubble. You will also note that the email link in the document is also selected
  4. Click the New CSS Rule button in the CSS Styles Panel
  5. The New CSS Rule Dialogue box opens
  6. Make sure you see the settings in the image below
  7. Click OK
  8. The CSS Rule Definition dialogue box opens
  9. Select the Type property if isn't already
  10. Change the color of the link by clicking on the Color Picker box – choose one of your liking
  11. Check "none" under Text Decoration
  12. Click OK

Adding Link Interactivity with the Hover Psuedo-class

We want to take our design to another level by adding some interactivity to our links. To do this, we will add the hover psuedo-class to our email link.

  1. Place your cursor somewhere inside the email link in the footer <div>
  2. In the Tag Selector, click the <a> tag
  3. Click the New CSS Rule button
  4. The New CSS Rule Dialogue box opens
  5. The div tags in the Selector Name box should look familiar from the previous step
  6. Place your cursor after #footer p a
  7. Type a colon (:) followed by the word "hover" right after the "a" (see image below)
  8. Click OK
  9. The CSS Rule Definition for #footer p a:hover dialogue box opens
  10. Under the Text Decoration property, check "underline"
  11. Click OK
  12. You won't see anything different in the index.html document until you preview or see it in Live View
  13. Click the Live View Button at the top of the document window, then hover the mouse over the email link – you should see the email link underline as you hover over it!

Next Steps

In the next exercise, you will learn how create a list-style navigation system by using CSS to style the list to look like a navigation menu.

Click here for the next tutorial