CS-081 Assignment 5

Finally, it’s time to start using CSS to control the appearance (“presentation”) of your web pages!

From now on you are to set up your assignments a little differently. Create a project directory named Assignment_05 . Create subdirectories for your scripts, your images, and your stylesheets for the assignment. Name them scripts , images , and css respectively. There won’t be any scripts for this assignment, so that directory will remain empty. But future assignments will have scripts, so this remains the basic structure for all the remaining assignments in the course. In a real web site, you would probably put the scripts , images , and css directories in the Document Root, but we need to keep each assignment’s files separate from one another and will put them under the assignment directory instead.

Look at your course_template.php file and observe that the head section contains links to three sytlesheets and that they are all use relative hrefs into the css subdirectory. Until now, none of these stylesheets have existed, but that fact hasn’t prevented your web pages from validating.

Copy your index.php file from Assignment 3 (the one with your table of media) into your Assignment_05 directory. Create a stylesheet for the “all” media type; you should be able to figure out what file name to use from the links in your course template. Add the following code to the beginning of your stylesheet, and verify that the page now shows up with a red background:

Once you have the assignment page set up and you have verified that you are linking to a stylesheet successfully, make the following changes to the content for this assignment: Add one paragraph of Lorem Ipsum text above the table, and five more paragraphs of Lorem Ipsum text below the table. Assign the attribute value “odd” to all the odd numbered rows in the table. Verify that the page looks the same except for the extra paragraphs of text. The table’s appearance should not have changed. Now close index.php. You won’t be making any more changes to it because everything for this assignment is to be done using only the stylesheet.

Here are the requirements for this assignment:

1. Change the background color of the page to something less saturated than pure red, and set the foreground color of the page (the color property for the html and body tags) to something that contrasts enough so that the text is clear and easy to read.
   But how to pick these colors? To get started, visit the color schemes generator at wellstyled.com. This is an interactive site that has many options you can explore. Try the following: decide whether you want a “warm” or a “cool” color scheme, and click around the circle on the top left to pick a basic color you would like to work with. This assignment calls for you to pick foreground and background colors that contrast with each other enough to be visible, so select the “contrast” box under the color wheel so that you get two sets of colors. Try clicking on the six variations buttons (Default, Pastel, etc.) to find a combination of colors you like. (You will not be graded on your taste in colors!) You will see two sets of colors listed on the right, used to color various backgrounds, tabs, and text in the sample area. You can click the up arrow buttons next to the colors to get different ones used for various parts of the sample area. Once you have a combination that looks good, click the drop down list that starts out showing “Normal vision” and check that your color scheme still looks okay for color blind people (deuteranopes and protanopes in particular), copy down the hex values of the colors you want to use, and use them to set the background-color and color properties of your web page.
   Another tool you should look at is Colour Scheme Chooser at Site Pro Central. I like the interactivity of this page better, but it doesn’t give you the color-blind simulation. Click the question mark in the upper right corner of the display for help.
2. Now pick an image to use as the background for the <h1> element of your web page. You can use one of the images I supplied for Assignment 2, or one of your own. Make the image tile in the X direction behind the level-one heading. Be sure the text color contrasts with the image enough so that the text is legible. Pick a lighter or darker color from the set given by the color scheme page if necessary to make the text legible. Hint: pick a backgound image that is uniformly light or dark so you can use a single contrasting color for the text.
3. Use another image as the background for the <h2> element. Make it appear just once and on the right side of the heading.
4. Set separate background and foreground colors for the table as a whole, for the table caption, and for table heading elements (<th>).
5. Make the odd numbered rows of the table slightly lighter in color than the others.
6. Add a background image to the bottom of the page that does not scroll with the page. For your convenience, here is a version of the “rocks” image with a transparent background you might like to use. Alternatively, you might try a GIF version of the same images to see if you can see what the difference is between GIF and PNG images. (Hint: It’s a browser issue.)

Due Date and Submission

Be your web page passes both XHTML and CSS validation now. Be careful: the CSS Validator will say a page is valid even if there are warnings for the page. For this course, you must get no errors and no warnings for all of your validation reports.

Test your web page using Firefox, Opera, and Internet Explorer. Note any differences among them that you observe in the email you send me to let me know the assignment is ready for grading.

Due March 28. Note, however, that much of this material will be on the exam on March 24th, so do the assignment before then, if possible, to help prepare for the exam.