CS-081 Assignment 4

In this assignment, you are to take exactly the same set of xhtml files as you used in CS-081 Assignment 3, but use CSS to give the page a totally different appearance.

1. Set up the assignment directory.

   Create a new subdirectory of your web site, and name it Assignment_04. Duplicate each of the xhtml files from Assignment 3, and move the copies into the Assignment_04 subdirectory. Duplicate the stylesheet for Assignment 3, and change the name of copy to assignment_04.css. Change the stylesheet links in each of the xhtml files for this assignment so they point to this new stylesheet. Finally, go into this new stylesheet and remove all the rules except for the one at the beginning for “html, body.”

2. Float the Navigation and Content divs.

   Use CSS rules to float the navigation list div to the left and the content div to the right. Give each one a width in percentages such that the sum is 100%. Note that for this to work correctly in Internet Explorer the sum must be slightly less than 100%. Verify that the two divs display side-by-side. Apply the proper clear property to the footer so that it appears below both the navigation list and the content.

3. Create a background image to create a faux-column for the navigation links.

   There will appear to be empty space below the navigaion links because the content has been floated right and given a width that leaves space down the left side of the page. But the navigation list is not tall enough to fill up this space, so applying a background color to it will not fill the open space. Rather, use Fireworks to create a background image for the whole page that will put a colored background down the left side, but which will have no effect on the right side.

   The strategy here is to create an image that is wider than anyone’s screen. These days, 2,000 pixels should suffice, but to “future-proof” your site, you might want to make it even wider; an Apple 30" display, for example has a maximum resolution of 2560×1600. (If you would like to donate one of these $1,800 monitors to the department, I would be more than happy to use it to evaluate your assignment.) You will tile the image vertically, so its height doesn’t matter; it could be as little as 1 pixel tall, leading to a small file size for downloading. But to be able to see what you are doing I suggest that you might make it taller, such as 100 pixels.

   Open Fireworks and tell it to create a new document with the dimensions you decided on. Be sure the resolution is no larger than necessary; the normal Web resolution is 72 dpi. If you were trying to future-proof your site and were going to create a complicated graphic, you might use a higher resolution, but that won’t be necessary here. Multiply the percentage you used for the width of the navigation div times the width of the image to calculate the number of pixels on the left side of this image that will get the background color. Draw a rectangle wide enough to cover that much of the left side of your image and fill it with whatever color you want to use for the background of the faux column on the left side of the page. Save the image as a PNG file in your site’s images directory using “indexed transparency” (not alpha transparency). A certain unnamed browser has trouble with PNGs that use alpha transparency, but not with indexed transparency. (Fireworks is one of the few image editing programs that lets you save PNG files using indexed transparency, by the way.) Leave the entire right side of the image transparent. That way, you can specify the background color for the right side of the page using CSS without having to re-draw the image.

   Be sure to use a meaningful name for the file so you will know what it is without having to open it up. Image files tend to proliferate, and using good file names makes it easier to manage them all.

   Use your image as the background for the entire page by specifying it for the body element. For now, it might extend into the header and footer regions, but if it is on the left side of the page and occupies the same proportion of the width no matter how the page is resized, it’s set up correctly. You will need to use the horizontal background-position property to get the image positioned properly. You should also set the background-repeat property to repeat-y, but the effect should actually work with the default value of repeat (meaning repeat in both the x and y directions) because you made the image so wide that it will never repeat horizontally on any current monitors.

   Go back to the background image and add a rectangle that starts at the right end of the colored box and that extends several pixels to the right. Fill the box with a black gradient that fades to transparent, which should create a “drop shadow” effect on the right side of the navigation column.

4. Style The Document

   Style the navigation list somewhat the way you did for Assignment 3, except you do not need to use any background images for the anchors or links if you don’t want to. The ones from Assignment 3 will not work for this assignment because the list is to be displayed vertically. But do get rid of the bullets (or numbers), do provide a hover effect, and style the link for the current page differently from the others.

   Style the header and footer so that none of the body’s background image shows through them. Use margins, padding, borders, line height, letter spacing, fonts, and colors to make the pages look “good.”

Before you submit the assignment, be sure you perform the following four tests:

1. Publish your page and all the style sheets to the server’s document root

   Verify that everything looks right.

2. Perform a link check on your site to make sure there are no mistakes due to capitalization problems.

   (Remember, you checked the "case-sensitive link checking" option when setting up your site.) Right click on the site folder in Dreamweaver, and select “check links”. If there are any problems, they will show up in a separate window. Fix them and do another check until there are no problems left.

3. Validate the XHTML.

   You should have been looking at the TIDY and Firebug icons in the Firefox status bar as you were testing your code to be sure they both are green circles with white checkmarks inside them. Now, click on the XHTML link in the footer of your web page to get a full W3C validation check. Fix any warnings (or errors) that the validator reports.

4. Validate the CSS.

   Once the XTML validates successfully, check the CSS using the other link in the footer of your page. Again, fix any warnings or errors that the validator reports.

A final check before you submit your assigment is to view the page using Internet Explorer instead of Firefox to make sure there are no problems when using that browser. You should also check the page using Opera and Safari. You may ignore minor differences, but correct any big discrepancies.

Once you have completely tested and fixed your web page, send me an email message telling me it is ready for me to review. I will get a copy of your entire site from the copy of your profile that is saved on maple, so there is no need to tell me which computer you were working on. Just tell me that the site is ready for me to look at.

Send your email to me by midnight of the due date. My email address is: vickery at babbage.cs.qc.edu.

You must use exactly this Subject line for your email to be sure I actually receive it: CS-081 Assignment 4. (Include the "CS-081" part in the subject line of all messages you send to me this semester.)

If you do not receive an “OK, I’ll check it out!” reply from me within a day or two of submitting the assignment, it means I did not receive it. But I will be sending that acknowledgement manually, so don’t resubmit the assignment until I have had a chance to reply to the first one.