CS-081 Assignment 3

For this assignment, you are to use a stylesheet and an image to customize the look of your course home page.

1. Get rid of the JavaScript alert.

   Edit your template.js file, and remove the alert() statement. This assignment does not use any JavaScript.

2. Make sure your Firefox extensions are up to date.

   Start Firefox, select Tools→Extensions, and click the Find Updates button. Click any Update Now buttons, close the Extensions panel, exit Firefox, and start it up again.

3. Use Firebug to examine the current structure of your home page.

   At this point, your home page consists of header, content, and footer divs. The only thing in the header is a h1 tag, and the only thing in the content is a h2 tag. View your home page in Firefox, and open up the Firebug extension. You can do this any of three ways: press F12, click on the smaller green circle with a checkmark in it at the bottom of the browser window, or use the Tools→Firebug menu.

   Select the Inspect tab in the Firebug panel, and open up the DOM tree view so you can see both the head and content div tags and the heading tags inside them. Hover over the all four elements, observe the outline boxes in the page itself, and verify that the headings occupy exactly the same space on the web page as the div elements that contain them. We will start updating the page by adding some space below the headings so you can add some formatting to the divisions that won’t be covered up by the headings.

   Unfortunately, to do this you need to use code based on topics covered in Chapter 11, which has not officially been assigned yet. Here is what you need to add to your screen.css file:

   Sample Code

   h1, h2 {
     padding:          0 0 0.5em 0.5em;
     }
   
   #header, #content {
     padding:          0.5em 0 0.5em 0;
     }
               

   Briefly, what you are doing here is adding a half em of space on the bottom and the left of each heading, and a half em of space to the top and bottom of the two divs. Use Firebug to verify that there is space between the headings and the divs that contain them.

4. Add some dummy content.

   To evaluate the visual effects that you are going to add, it will help to have more of a page to work with. Use a common technique for adding ummy text to a web page: go to Lorem Ipsum and have it generate five paragraphs of Latin text for you. Just click the “Generate Lorem Ipsum” button, and paste the paragraphs into your web page right under the h2 element in the content div. Surround each paragraph with p and /p tags, and adjust the formatting of the source code to maintain proper indentation if necessary. Add another h2 element between the second and third paragraphs that you just entered. Use Lorem Ipsum again to generate a few words for the content of the new heading, and again to change the content of the original h2 element. View the web page to make sure it looks right.

5. Apply different background colors to headings and paragraphs.

   Add three css rules to screen.css, one each for h1, h2, and p tags. Select a harmonious set of three color for the backgrounds of these three sets of elements. Be sure to select an equally harmonious set of contrasting colors for the text in each set of elements alse. Actually, all you really need to do is to make sure the color differences are easy to see and that the text remains easy to read. Be sure the three colors are clearly different from the htmb/body background color for the page.

6. Create background gradients for headings and paragraphs.

   This part of the assignment is an exercise in working with images and opacity. There are several programs you could use to complete this part of the assignment, such as InkScape, Fireworks, and Photoshop together with its companion, ImageReady. InkScape is free software available from Inkscape.org; it is already installed on the computers in the lab. (The icon looks like a black blob, representing an inkblot.) Fireworks is part of Macromedia Studio, and is also installed on the computers in the lab. There are old versions of Photoshop and ImageReady installed in the lab, but we do not have current, licensed, versions installed yet.

   Work through the Using Inkscape web page to create three different gradients, one for h1 elements, one with a different color for h2 elements, and a third one for paragraphs. Edit your screen.css style sheet so that all headings and paragraphs have their respective background images. Be sure to set them up so each image repeats in the y direction only. Set the background color of first level headings to something different from the page background and the gradient color so you can see the effect illustrated in the Using Inkscape introduction.

When you have completed the assignment, send me an email message that says “CS-081 Assignment 3” in the subject line and that contains your real name and account name in the message body. I will get a copy of your work from maple to look at.