Transcript Document

IT 117 - Introduction to
Website Development
Welcome!
Welcome to Unit 8!
More About CSS
This week’s reading:

Review lesson 3 Topic “Style Sheets”. Also, read the PDF files
Special CSS Reading and review Formatting and CSS,
originally covered in Unit 4.
Introduction

In this Unit you will learn more about using CSS to format your
Web site. For your unit project, you will add a CSS navigation
bar to your site. This is a custom unit of study, so make sure
you read the special PDF handout located in the reading
section for this unit. The material presented here is not fully
covered in your textbook.
To-Do-List





Review Key Terms
On the Reading page
Read Assigned Text
On the Reading page
Respond to the Discussion Board
30 Points
Web site Navigation
Complete the unit project and upload to assignment dropbox for
grading
50 Points
On the Assignment page
Attend the Weekly Seminar or complete the FLA quiz
20 Points
Log in from Student's Home page
Seminar Overview

This week’s Seminar session is about adding a navigation bar to your
Web site using CSS.

Remember, directions for accessing your Seminar can be found in
the Course FAQs tab under Course Home.
Unit 8 Review
Navigation Bars in HTML

In the past, navigation bars were typically added in Web
pages by creating a table to hold links. The Web designer
might also add images to the table to create a more
professional look (for example, tab images to make the
navigation bar look like the tabs you might see in a binder). In
XHTML, tables are meant for tabular data only so it doesn’t
make sense to house the site’s navigation in tables for an
XHTML site. In addition, the old tabular navigation bars were
copied and pasted into each page on a site so, if the
navigation changed, the Web designer had to revise each
page individually.
Unit 8 Review
Navigation Bars in CSS

To create a navigation bar using CSS, instead of creating a
table, we’ll create an unordered list and apply a style to it so it
looks like a navigation bar. We will do this by creating a
unique id tag for the navigation. We’ll apply the navigation id
(or nav id) to an unordered list. Unordered lists are ideal for
this because the id can be applied to the ul tag and inherited
by the li tags (meaning you don’t need to specify the id for the
list items once you’ve specified the id for the unordered list as
a whole).
Unit 8 Review
The Code

To create our navigation bar, we’ll create a new CSS external
style sheet (or edit an existing one) for our site. To start, we’ll
set padding and margin rules for the list, then remove the
bullets and set a width, like the code shown below:
ul#list-nav {
margin:20px;
padding:0;
list-style:none;
width:525px;
}
Unit 8 Review

To break this down, ul indicates we’re adding style rules to the
unordered list tag. The pound or number sign (#) indicates
we’re creating a unique id, in this case the id is named listnav. The first curly bracket ({) indicates the beginning of our
CSS rule. Then, we create the rule with standard CSS
property:value pairs (margin, padding, list-style, and width).

The next step is to add a style rule to the list item tag to format
them inline, or horizontal, rather than vertical, as shown below:
ul#list-nav li {
display:inline
}
Unit 8 Review
For the links on our navigation bar, we’ll take out the
underline, add a little padding, give the links a
background color (in this example, green) and text
color (in this example, white).
We’ll also give the links a width and use 100 pixels for
each link. The key this time will be in positioning the
links by floating each one left. We’ll also center the
text and add a border (in this example, white)
between each link.
Unit 8 Review
ul#list-nav li a {
text-decoration:none;
padding:5px 0;
width:100px;
background:#485e49;
color:#eee;
float:left;
text-align:center;
border-left:1px solid #fff;
}
Unit 8 Review
And, finally, we’ll add a rollover effect. To do this, we’ll
apply a style rule using a for anchor, which is the
tag used for links, and hover, which is the effect
shown when the mouse is hovered over the link
(a:hover). We’ll change the color of the background
and the color of the text when the mouse is hovered
over the link.
ul#list-nav li a:hover {
background:#a2b3a1;
color:#000000 }
Unit 8 Review
All of these style rules will be applied simply by calling the
list-nav id in our XHTML. The xhtml code to create our
navigational links and apply the stylesheet we created is
below: (this goes into the web page, not the CSS file).
<ul id="list-nav">
<li><a href="index.html">Home</a></li>
<li><a href="bio.htm">Bio</a></li>
<li><a href="career.htm">Career</a></li>
<li><a href="links.htm">Links</a></li>
<li><a href="contact.htm">Contact</a></li>
</ul>
Unit 8 Review
Along with the link tag in the head section of your html
page to call your external stylesheet, the code
above is what you’ll add to each page on your site.
In this unit, you will add the navigation bar code to
your external style sheet, change the colors to
match your site, and create a simple contact page
with your contact information.
Project 8
Outcomes addressed in this activity:
Unit Outcomes:

Create a CSS navigation bar for the Web site
Course Outcome:

IT117-4: Create cascading style sheets for Web sites.
Project
Remember: All of your Web pages should include the DOCTYPE
statement above the opening html tag, like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
All your Web pages are also required to contain the <title> tag
pair within the head section, like this:
<html>
<head>
<title>Your Name, Career Information</title>

Project

Complete your Contact Page.
1. You created a file named contact.htm in the previous unit. Now,
you will add content to complete that same page. The page
should contain:

A title

A heading

Your contact information (can be fictitious)

Your unordered list for your navigation bar

Your email link (you already added this when you
completed project 7).
Project
2. Open externalstylesheet.css in Notepad.
3. Add the required code for a navigation bar (see the PDF file
“Special reading on CSS for Unit 8” in the reading section
for this unit for full instructions.)
4. Change the background and text colors for the navigation bar
and the rollover effect.
5. Feel free to add additional CSS rules on
externalstylesheet.css as you wish to enhance the
appearance of your Web pages.
Project
6. Save your changes to externalstylesheet.css.
7. Ensure the link tag to externamstylesheet.css exist in the head
section of all five of your Web pages. (this should already be in place
but double check).
8. Add the HTML code for the navigation bar unordered list (as described
in the PDF file “Special reading on CSS for Unit 8”) to each of the
five pages on your Web site.
9. Upload all of your Web pages and externalstylesheet.css to your
Web server to implement all your changes.
10. Test all links on all of your pages.
Project 8 - Grading Rubrics

1. Correctly added CSS code to externalstylesheet.css to format a
functioning Nav Bar. : 0-10;

2. Correctly added the XHTML ul code to all five web pages of the
Website, to apply the CSS Nav Bar formatting and attributes by
calling the correct CSS ID. : 0-10;

3. All CSS navigational links on all pages work. : 0-10;

4. Navigation bar text and background colors have been changed
from the sample provided. : 0-10;

5. Navigation bar rollover effect works : 0-10.
Thank you!

Feel free to contact me with any questions!
[email protected]

Use the Virtual Office to post questions throughout the week,
as well as to upload your zipped folder if you need me to look
at the code!