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
- 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
- Delete the text "Content for id "footer" goes here"
- Type "All Rights Reserved" and insert a space after "Reserved"
- Select Insert from the top menu
- Select HTML > Special Characters > Copyright
- After you insert the copyright symbol, hit the return/enter to drop down one line
Inserting an Email Link
- In the line below the copyright informaiton, type your first and last name
- Next, highlight your name with the cursor
- Select insert > Email Link from the top menu
- type your student email address in the Email box
- Click OK
- 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."
- Place your cursor somewhere inside the email link you just created
- 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
- 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
- Click the New CSS Rule button in the CSS Styles Panel
- The New CSS Rule Dialogue box opens
- Make sure you see the settings in the image below
- Click OK
- The CSS Rule Definition dialogue box opens
- Select the Type property if isn't already
- Change the color of the link by clicking on the Color Picker box – choose one of your liking
- Check "none" under Text Decoration
- 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.
- Place your cursor somewhere inside the email link in the footer <div>
- In the Tag Selector, click the <a> tag
- Click the New CSS Rule button
- The New CSS Rule Dialogue box opens
- The div tags in the Selector Name box should look familiar from the previous step
- Place your cursor after #footer p a
- Type a colon (:) followed by the word "hover" right after the "a" (see image below)
- Click OK
- The CSS Rule Definition for #footer p a:hover dialogue box opens
- Under the Text Decoration property, check "underline"
- Click OK
- You won't see anything different in the index.html document until you preview or see it in Live View
- 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