CS/CIS 330 Spring 2004, Homework 1b:

CS/CIS 330 Spring 2004, Homework 1b:

Cascading Style Sheets (CSS)

This assignment is due on February 9 at 23:59pm via the course management system. You must perform this assignment individually; groups are not permitted.

Project Description

In this homework assignment, you are asked to create a CSS file for an website that we provide. You will also need to modify parts of each HTML page provided so that it references the stylesheet. The focus of the assignment is to get you familiar with some of the HTML tools you will have at your disposal when designing dynamic content web pages later on in the semester.

CSS StyleSheets

Cascading Style Sheets (CSS) is relatively new technology that has been shown to be quite powerful and useful in practical web development. A cascading stylesheet is reference file for text, layout, and spacing multiple HTML pages share that allows for simpler and cleaner HTML design, as well as easier updates and modifications of existing web pages. Most modern browsers including IE5 and Netscape7 support CSS. Please refer to http://www.w3.org/Style/CSS/ for more information on browser support.

Part 1: The Basics

CSS can be embedded in the header of an HTML page, or referenced as a separate file. For the purposes of this assignment, we want you to write the stylesheet as an external file. For the HTML page to use the stylesheet, you simply need to declare so in the header of the HTML document with the line:

For this declaration, the web browser will assume that a CSS file called style.css exists in the same relative location as the HTML file. The path to the CSS file can be relative or absolute, but for this assignment we require you to use the relative link as above. You can create a very simple stylesheet with a browser containing the following information:

body {

background-color: #FFFFFF;

color: #000000;

font-size: 10pt;

font-weight: regular;

font-family: serif;

}

a:link {

color: #FF0000;

text-decoration: none;

}

a:visited {

color: #FF0000;

text-decoration: none;

}

a:active {

color: #FF0000;

text-decoration: none;

}

a:hover {

color: #FF0000;

text-decoration: underline;

}

.sidebarText {

text-align: center;

font-size: 12pt;

font-family: Verdana;

color: #009900;

}

a.sidebarText:link {

color: #009900;

text-decoration: underline;

}

a.sidebarText:visited {

color: #009900;

text-decoration: underline;

}

a.sidebarText:active {

color: #009900;

text-decoration: underline;

}

a.sidebarText:hover {

color: #009900;

font-style: italic;

text-decoration: underline;

}

With the exception of the ‘sidebarText‘ class, the declaration is consistent with the information you would normally set in the <BODY> of an HTML page. Sections are divided into Classes, like the ‘sidebarText‘ class, and always begin with a period and the title of the class with brackets enclosing the class information. The four segments after the ‘sidebarText‘ class declaration define what to do for links that reference this class. Note that these segments override the normal link behavior. They do not, and often should not, be set for all classes since you have the default linking behavior to go on.

In this example stylesheet, HTML pages that reference it would have black ‘serif’ text with a white background, and links in red that become underlined only when you dragged your mouse over them. The sidebar would use the ‘Verdana’ font in green letters. If there were any links in the sidebar that referenced the class they would always be underlined in green and become italicized when you dragged your mouse over them.

If you are new to HTML colors, there are a set of 216 web-safe colors you are expected to use for this assignment and in the real world of web design. They are all made up of a 6 hexadecimal string that is represented as #RRGGBB where RR is the red component, GG is the green component, and BB is the component. Each component can be one of six values listed here in increasing strength: 00, 33, 66, 99, CC, FF. So if you wanted the brightest pure blue possible you would use #0000FF. For white, you would use #FFFFFF. Or for a mix of blue and red you would use #990099. If this is too confusing, there are plenty of lookup tables on the web you can use to pick your colors. You are not permitted to use colors like #0323EE since these are not considered web-safe.

Now that we have set you up with the basics, we expect you to use the vast resources of the web to help accomplish the rest of the assignment. There are plenty of pages and tutorials on CSS that you can go to for help. Exactly how you go about modifying the page is up to you, for example what class names your CSS will have, but it must conform to the following guidelines:

The stylesheet must be called style.css and the path must be relative to the current directory location. For clarity, simply use this line to call the CSS file in each HTML file:

You do not need to use the link index.html since that is a frame file that does not require a stylesheet.

HTML tags can only be used in the following format: where classname is the name of a CSS class. No other use of  tags are acceptable.
HTML , , and tags are only permitted around isolated words appearing in text. For example, a single word or phrase in a line of text can be underlined, but if the object being underlined was more standard, like a book title, you would want to define a class so that all book titles would be properly underlined.
Only web-safe colors are allowed of the format #RRGGBB where RR, GG, and BB are one of the following 6 values: 00, 33, 66, 99, CC, FF.
You are not permitted to modify the <BODY> of any HTML page. Everything can be done in the Stylesheet.

Part 2: FictionBooks.com

FictionBooks.com is in the process of creating a new layout for their website. They have written a very simple HTML design using frames and want you to create a new CSS for it as well as modify the HTML pages to fit the CSS. Their specifications are as follows:

The default page information should be set as follows for all pages using the CSS:

The background color should be teal (#669999)
The default font should be regular Georgia, 10pt in white (#FFFFFF)
The page scrollbar ‘face’ and ‘track’ colors should be light blue (#0000CC). The ‘shadow’ color should be white (#FFFFFF) and the ‘highlight’ color should be silver (#CCCCCC).
Links should be in a light blue (#333399) and should only be underlined when a user moves the mouse over them.

The font for the Title, header.html, of the page should be Impact, 20pt in black (#000000)
The Left Menu Bar, sidebar.html, should be defined as follows:

First make a general class for the menu bar with a background color of silver (#CCCCCC), and font of regular Verdana, 12pt in brown/orange (#FF9900). Give this class a left margin of 10px.
Links should be in brown (#CC6600), never underlined, and bolded only when a user moves over them.
Next, apply this class to the table and each row of the left menu bar except “Results 1”, “Results 2”, and “Help”
Now, create 2 new classes identical to the first class with the following changes:

When a use moves over “Help”, the mouse becomes a ‘help’ cursor instead of a ‘hand’ cursor.
“Results 1” and “Results 2” are italicized and have a margin of 30px. They should still have the same linking behavior of the original class.

The Footer, footer.html, should be made up one class and set as follows:

The text should be aligned with the center of the screen
The background of the entire horizontal bar should be dark blue (#000066)
The font should be regular Courier, 10pt in silver (#CCCCCC).
Links should be in white (#FFFFFF) and should only be underlined only when a user moves over them.

The rest of the HTML pages should all reference the stylesheet.
(Optional, but fun) A new feature in many browsers is to support a “Favorite’s Icon” for an entire website. When a user bookmarks your page, an Icon is downloaded from the server and used in the Icon name. In most recent versions of Netscape, you actually see the Icon to the left of the URL. As an added task, add such an icon to this site. Hint: Search the Web for information on how to do this. Another Hint: Focus on getting it working in Netscape 7 or similar, since not many versions of IE handle this correctly.

When complete, your version should look something like:

Afterwards, compare the website with the original you started with and notice how different the page looks with very little change to the actual HTML page. That is part of the power of CSS.

What to Submit

In a zip file called A1b.zip submit:

1 text file containing your stylesheet called style.css
All the HTML pages, modified or otherwise, for the website with their original names.

Like all assignments, you must submit your solutions via the course management system. Last year, many students waited till the last minute to get their account set up. Unless you are a late arrival to the class whose account might not be set up in time, no assignments will be accepted by TA's via e-mail. Please contact a TA at least 24 hours before an assignment is due if you are experiencing technical difficulties so that we can be sure to get back to you in time.