Preparation
If you have not finished reading chapters 1 and 2 of “HTML Dog” yet, now is the time to catch up. If your eyes glazed over when you read the parts on stylesheets in chapter 1 the first time, you should go back and read them again now, armed with the knowledge that the only technique we will use for adding CSS to our web pages is through the use of external stylesheets. And we will be using link elements. You are free to use the @import construct instead, but to reduce complexity, we’ll concentrate on just the one technique.
This assignment is due at the same time as Assignment 1. If you wish, you can submit both assignments at the same time. If this assignment is correct, you will get retroactive credit for Assignment 1 without having to submit it separately.
The Assignment
-
Activate your firefox plugins.
If you haven’t already done so, activate your Firefox plugins. The issue is that we installed the plugins you need for the course (Firebug, YSlow, Web Developer’s Toolbar, Tidy, and MeasureIt), but we haven’t figured out how to make them show up when you log in. So that leaves you with the job of activating them manually. We found that you can do that simply by installing any plugin yourself, and when you restart Firefox, all of them will become active.
In class I demonstrated installing a new plugin, and chose the “Download Statusbar” plugin. But you can install any plugin you like, even one that is already installed. For example, type “measureit” into the google search box, and the first search result will be for the MeasureIt plugin that is already installed. Click the big green “Install Now” button, follow the instructions, and when Firefox restarts you will be good to go. Let me know if you have any problems with this.
You won’t actually be using any of the plugins for this assignment. This step is just to get your site set up properly for future assignments.
-
Link a stylesheet to your site’s index page.
Right click on the css in your site (while in Dreamweaver), and select “New File” from the drop-down menu. The initial name for that file will be untitled.xhtml; change the name to assignment_02.css.
Link this new stylesheet to your site’s index page. The textbook tells you how to do this using a link tag on page 34. But, as demonstrated in class, Dreamweaver will generate this code for you automatically. All you have to do is drag assignment_02.css from the file browser into the code for your index page. It goes inside the head element. Initially, your page’s head element should look something like this:
<head> <title>My Fabulous CS-081 Web Site</title> <meta http-equiv="Content-Type" content="<?php echo $content_type;?>; charset=UTF-8" /> </head>Afterwards, it should look like this:
<head> <title>My Fabulous CS-081 Web Site</title> <meta http-equiv="Content-Type" content="<?php echo $content_type;?>; charset=UTF-8" /> <link rel="stylesheet" type="text/css" href="css/assignment_02.css" /> </head>Now edit the stylesheet to incorporate the following:
-
Set up a rule so that any h1 elements have colors you choose for
the text and the background of the element. There is exactly one h1
tag on the page, so the rule should affect that element. I’ll give you the code for the rule
to get you started, but you should pick your own colors.
h1 { color:orange; background-color:purple; }
I tried to pick an ugly color combination here so that you will be motivated to pick better ones! If you know about other ways to specify colors, or want to use Dreamweaver’s “color picker” tool to pick your colors, feel free to do so instead of using color names.
- Now set a background color for the entire web page. The rule should select the body element of the page. You can use any color you like, including the color or background-color you used for the heading. Just be sure that all the text on the page, including the two validation links, remains easy to read.
-
Set up a rule so that any h1 elements have colors you choose for
the text and the background of the element. There is exactly one h1
tag on the page, so the rule should affect that element. I’ll give you the code for the rule
to get you started, but you should pick your own colors.
-
Validate your XHTML and CSS code.
You should be watching the validator icons provided by the Tidy and Web Developer’s Toolbar while testing your code in Firefox to be sure they give green circles all the time. (The Tidy icon is the one in the bottom status bar; the Web Developer’s Toolbar actually has three separate ones, which are located at the right end of the toolbar, just above the browser’s viewport. (The viewport is the part of the browser window where web pages are displayed.)
But the final validation test is provided by the external validators. While viewing your web page (in any browser), click the two validation links to make sure your XHTML and CSS code are both perfect. There must be no warnings and no errors from either validator.
-
Do a link check.
Even it your site works and validates, it’s still possible to have broken links that won’t show up until I copy your site to babbage, where directory and filenames are case-sensitive. Since we set up Dreamweaver to do case-sensitive link checking, you can use Dreamweaver to be sure you have no broken links in your site. Just right-click anywhere in the Files panel on the left, and select “Check Links” -> “Entire Local Site.” A panel will show up that tells you about any broken links. It should be empty. The F7 key will get rid of the panel (or bring it back.)
Submit
When you are ready for me to look at your assignment, simply send me an email message to let me know. I’ll copy your entire web site to my computer (babbage) and check it out. The full pathname to your web site on babbage will be http://babbage.cs.qc.cuny.edu/Grading/cs081/ followed by your account name.
Send your email message to me at: vickeryatbabbage.cs.qc.cuny.edu by midnight of the due date.
The Subject line of your email message must be: “CS-081 Assignment 2.”
Don’t forget to put your name in your email message!