ITEC 745 - CSS Exercise

Exercise 1: Separating Structure and Presentation Example

1. Start by opening a New Blank HTML page in Dreamweaver.

2. Copy the following code into a new blank page (copy over existing HTML code)
(the page should look like this):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Bob Student - Home</title>
</head>

<p><font size="6" face="Courier New, Courier, mono">Bob Student's Home Page</font></p>
<table width="770" border="1" cellspacing="0" cellpadding="4">
<tr>
<td width="145" valign="top" bgcolor="#000000"><p><font size="4" face="Courier New, Courier, mono"><strong>Home</strong></font></p>
<p><strong><font size="4" face="Courier New, Courier, mono"><a href="#">About Me</a></font></strong></p>
<p><strong><font size="4" face="Courier New, Courier, mono"><a href="#">Assignments</a></font></strong></p>
<p><strong><font size="4" face="Courier New, Courier, mono"><a href="#">Great Links</a></font></strong></p>
<p> </p></td>
<td width="625" valign="top"><p><font size="2" face="Courier New, Courier, mono">Here's
my home page with information about me and all that other stuff. </font></p>
<p><font size="2" face="Courier New, Courier, mono">I hope you like it.</font></p></td>
</tr>
</table>
<p><font size="1" face="Courier New, Courier, mono">Last Updated:
September 21, 2003
| Contact <a href="mailto:%20bob@bob.com">Webmaster</a></font></p>
</body>
</html>

STRIP HTML PRESENTATION

3. This page has been constructed without a style sheet. Our goal is to remove any deprecated tags or any tags which are purely for presentation and replace the desired presentation style with style sheet elements. We will want to remove the following elements:

<font>
bgcolor and background attributes anywhere they appear (body, table, td, etc.)
align or valign attributes
any <body> attributes
<table> attributes of width, border, cellpadding (don't remove the <table> tags, just attributes)

There are a couple ways to do this which will make it easy even if you do not 'know the code". However, we will be forced to do some of this by hand.

3a. Switch to "Split" view at the top of your Document Window.

3b. Let's start by selecting the first block of text at the top of the page, the header of the document which reads "Bob Student's Home Page".

3c. Notice the Tag Selector at the bottom of the Document Window. This shows you the array of HTML tags that are currently selected. You can see that one of those tags is "<font>". In the Tag Selector, right-click on the <font> tag. In the list menu that appears (see below), select "Remove Tag". This works well for removing the elements. For our purposes, we will use this to clean up <font> tags.

3d. Removing attributes, which are values of HTML tags (things like "width="50%""), are a little different. You will need to use the "Edit Tag" feature (see below). When selecting this, an "Edit Tag" window pops-up which allows you to hand-edit attributes within the tag and just that tag. It's nicer for the HTML uninitiated since you don't have to sift through all of the code, but only the code that you wish to edit.

Select the code you wish to remove, click Delete or Backspace and be sure to remove any extra spaces and leave the tag in a proper fomat (ie: <body> NOT <body >).

The web page will look like this when upon removal of these elements and attributes.

4a. Rebuild <body>Tag:
Now you will need to begin rebuilding the look of this very plain web page so it looks as close to the original as possible using style sheets.

We will start by creating an external style sheet for this page which will contain the styles we will be creating for this page.

Once the style sheet is created, we'll start by rebuilding the <body> tag. Here is how it looked in the original code and we can see that it is creating the background color, standard text color, and link text color for unvisited and visited links.

<body bgcolor="#FFFFCC" text="#666666" link="#FF0000" vlink="#FF6600">

We can handle the background color and standard text color by creating a "Tag" in the style sheet window and creating a Style for the <body> tag. The other two attributes (link and vlink which affect link colors) will be handled in another way (in 4b.).

New CSS Style window

Using the Style Definition window, we will start by addressing the Font Color in the <body> tag (represented by the attribute "text='#666666'"). To do this, select the "Type" Category. Using the "Color" item, select the color "#666666"

CSS Style Definition Window

Next, select the "Background" Category and using the "Background Color" item, select the "#FFFFCC" color from the pick list.

4b. Rebuild <body>Tag Continued:
To address the attributes affecting link color (link="#FF0000" vlink="#FF6600"), we will use the Advanced Selector in the New CSS Style window.

Click the "New CSS Style" button and in the "New CSS Style" window, select the "Advanced" type and from the tag window, select the "a:link" tag. This will allow us to start by creating the tag color for the link tags. Click OK and the "CSS Style Definition" window will appear. Under the "Type" category, change the color to match the "#FF0000" as defined in the "link="#FF0000" attribute.

Now, repeat the action, this time selecting "a:visited" from the "Advanced" drop down menu. This time, in the "CSS Style Definition" window, select the "#FF6600" color as defined in the vlink="#FF6600" attribute.

5. Rebuild <table> Tag:
We will now address some of the <table> attributes that were removed. Below is the <table> element with attributes from the original document before it was stripped. We will need to rebuild the width, border and cellpadding (cellspacing we'll leave since replacement support for this is bad).

<table width="770" border="1" cellspacing="0" cellpadding="4">

We should keep in mind that while this particular page only has one table in its construction, many sites make use of multiple tables and there are also many more pages within the site that would refer to this style sheet. So in the case of this style sheet, we'd want a global rule that meant by default, all tables in the site would be 770 pixels.

When creating a style sheet rule for <table>, you should keep in mind the HTML Redefinition rules will affect all instances of the tag. Therefore, when creating an HTML Redefintion for a tag, the initial tag should be setup with attributes that most of the <table> tags within the page will use. You will also need to create id selectors (Advanced) which will allow you to create alternative <table> tags which can be applied to specific <table> tags but we will not need to do this in this exercise.

Let's start by selecting the "New CSS Style" button and selecting the "Tag" option and select "<table>" from the drop down menu. In the "CSS Style Definition" window, we'll select the "Box" Category. Under "Width" we'll enter "770" pixels to match the original attribute of the <table> tag.

With the "CSS Style Definition" window still open, we'll select the "Border" category. Under "Style" select "Solid" (note: make sure the "Same For All" item is checked) and select "1 pixel" under "Width". Under "Color", select the appropriate color you'd like your border to be.

We'll deal with the "cellspacing" at the cell <td> level in the next step.

6a. Rebuild <td> Attributes:
We will now deal with attributes associated with <td> (Table Cells). If you see the examples of the two <td> references from our document, you'll want to compare what common attributes they share, and what attributes are different. The attributes they share can be applied to a general <td> HTML Redefinition and the differences can be addressed with Selector tags.

The two attributes they have in common are that both refer to "valign="top" and, from our <table> tag, they both have a "cellpadding="4"" reference.

We'll start by selecting the "New CSS Style" button and selecting the "Tag" option and select "<td>" from the drop down menu. In the "CSS Style Definition" window, to recreate the "valign="top"", we'll select the "Block" category and under "Vertical Alignment" we'll select "Top" from the drop down menu. To recreate the "cellpadding="4"", we'll select the "Box" category and under "Padding", select "4 pixels".

Next, we'll need to deal with our exceptions to the <td> tag. In the first case, both have different widths. Secondly, the first <td> has an attribute of bgcolor.

6b. Rebuild <td> Nav Area:

We'll start with the first <td> tag. To create an exception or different version of the <td> Redefined tag, we'll create a CSS Selector. Select the "New CSS Style" button and select the "Advanced" option. In the "Name" entry, delete whatever tag may be showing up there, if any, and type the following: "td.nav". This signifies a new variation of the <td> tag and we'll call it "nav" because it's to create attributes for the navigation portion of our page.
In the "CSS Style Definition" window which will then appear, to recreate the bgcolor attribute, we'll go to the "Background" category and select the appropriate color (#000000). To recreate the "width", select the "Box" category, enter "145 pixels" under the "Width" entry.
Lastly, to recreate the "Border between to the two Table cells (which didn't get added when we applied the border to the <table> tag) go to the "Border" category and uncheck the "Same For All" box at the top of each item. Next, in the "Right" section, select "Solid" for Border, "1 pixel" for Width and "black" for Color.

Now, in order to apply this new Advanced style to the correct <td> cell, we'll have to select the appropriate <td> cell in our page. The best way to do this is to click your mouse within the table cell we wish to affect, in this case, the one with the navigation. To make sure you've indeed selected the <td> tag, go to the "Tag Selector" at the bottom of the design window (the horizontal list of tags going along the page) and select the closest <td> tag. Check the design window to make sure the proper cell is selected. Next, select the "Style" drop-down menu from the Property Inspector. You should see "nav" tag showing up (and nothing else because Redefined HTML tags will not show up there -- they need not be applied because they automatically affect the tag itself). Select the "nav" and that Selector style will be applied to the navigation cell.

6c. Rebuild <td> for Content Area:

Next, we'll do the same for our content area which merely needs the "width" attribute recreated. Go through the steps above to create an Advanced Selector but this time, name the selector "td.content". In the "CSS Style Definition" window which will then appear, to recreate the width tag, select the "Box" category, enter "625 pixels" under the "Width" entry.

Then, as described above, select the appropriate <td> cell for the content area, and then, under the Property Inspector "Style" menu, you will see a "content" tag (in addition to the "nav" tag). Select the "content" tag and the width should take on the cell.

7. Rebuild <font> Tag:
Our last step will be to apply the proper styles to recreate the <font> element.

7a. Rebuild Font <body> Reference:
We have four different <font> references throughout this page. The common attribute throughout these references is the "face="Courier New, Courier, mono"". Everything else is particular to each reference.

To recreate this, we'll assign this font style to the <body> HTML Redefined tag which we've already created. Go to the "CSS Styles" window, locate the "body" style, right-click on it and select the "Edit" from the menu that appears. This will open the "CSS Style Definition" window. Under the "Text" category, select "Courier New, Courier, mono" from the "Font" drop down menu. Click OK. You should now notice all of the text in the Design window change to the appropiate font face.

7b. Rebuild Title Text:
<font size="6" face="Courier New, Courier, mono">Bob Bitchin's Home Page</font>

The above reference is to the large title text at the top of the page. Structurally, that would probably be best served with an <h1> tag. However, we don't need to create a style for the <h1> tag since it will inherit the "face" properties for Courier, etc. from the <body> tag (done earlier) and it's inherent sizing will replace the "size" attribute.

7c. Rebuild the Nav Text Sizing:
<strong><font size="4" face="Courier New, Courier, mono"><a href="#">About Me</a></font></strong>

The above reference is part of the navigation. It contains a particular font size and is also surrounded by the <strong> or bold tag. The <strong> tag is acceptable but we will have to reproduce the size style.

So we'll Make a "Class" to deal with the sizing of the navigation text which has a size of "4". Select the "New CSS Style" button and select the "Class" option. In the entry window, delete whatever appears there and type "navtext" (we want to name it differently from our earlier Selector item). You will merely have to provide a new size and you'll find that "18 pixels" works well.

To apply this Class style, go ahead and select the entire navigation text, go to the Property Inspector, selec the Style menu and select the "navtext" item on the list. You should notice the style become applied to the text. You can now also add the "<strong>" tag by selecting "B" button from the Property menu at the bottom of the page.

7d. Rebuild the Content Area Text Sizing:
<font size="2" face="Courier New, Courier, mono">I hope you like it.</font>

The above reference has yet another size attribute for the content area. So, we'll do the same for the other cell (content) text which is sized at "2". Follow the same steps, this time, naming the Class "contenttext". You'll find that "14 pixels" should work fine.

7e. Rebuild the Footer Text Sizing:
<font size="1" face="Courier New, Courier, mono">Last Updated: September 21, 2003| Contact <a href="mailto:%20bob@bob.com">Webmaster</a></font>

The above reference has yet another size attribute, this time for the footer line. So, we'll recreate the proper sizing for the footer which was sized at "1". Follow the same steps as above, this time, namgin the Custom Style "footertext". You'll find that "9 pixels" works well.

Your page should now look like this.

Compare to the original.