CS-081 Assignment 4

This assignment continues your work with backgrounds. In this case, you will create a background image to create a “sidebar” for your blog page, and you will practice working with the CSS box model to manage the appearance and positioning of some of the elements on the page.

In the previous assignment, you practiced assigning different background colors to various elements of your pages. Since the goal was to practice specifying colors in a variety of ways rather than to use color to help tie the elements of the pages together, the result for most everyone was a visual hodge-podge. So start this assignment by erasing everything in your all-styles.css stylesheet!

With this assignment, we assume your blog web page is structured like the following diagram:

HTML HEAD TITLE … /TITLE LINK (stylesheet) /LINK /HEAD BODY H1 … /H1 OL (blog entry list) LI (blog entry) H2 … /H2 P (dateline) /P P … /P P … /P /LI LI (blog entry) H2 … /H2 P (dateline) /P P … /P P … /P /LI LI (blog entry) H2 … /H2 P (dateline) /P P … /P P … /P /LI /OL DIV (links) … /DIV /BODY /HTML

There might be other elements in your blog page, but it must include an ordered list of blog entries, and each entry must start with an h2 element for the blog title, followed by a paragraph for the entry’s date line, and two or more paragraphs of lorem ipsum text. If there are other elements in addition to the ones in the diagram, you will probably have to adjust the following instructions in order to get your page to work correctly. It is up to you to decide how to do that.

1. Create a background image for the blog entry list.

   Use Fireworks, Inkscape (both are installed in the lab; Inkscape is also available as a free download from inkscape.org), or any other drawing program you might already have available to create a PNG image file 2,000 pixels wide and 20 pixels high with a transparent background. Save the file in your site’s images directory; name it 2000x20_400_left_fill.png. This name is supposed to describe the image in the file: 2,000 pixels wide, 20 pixels high, and with a solid fill color in the leftmost 400 pixels. (You will add the “left fill” next.) Image files tend to proliferate in web projects, and experience shows that it is better to use file names that describe the images rather than ones that give their intended use. (blogListBackground.png, for example, would be a poor choice because you might want to try different images as the blog list background as you refine the design and you would need different file names for the different versions.) And remember: never put spaces in the names of files that will be used on the web.

   Edit your image to create a rectangle with a solid background color that covers the leftmost 400 pixels (20% of 2,000) of the image. That is, the rectangle has pixel dimensions of 400 × 20 and is positioned in the upper left corner, coordinates (0,0), of the image. Create a rectangle 20 pixels square and position it immediately to the right of the first rectangle. Create a gradient for this rectangle that goes from black on the left to transparent on the right, to create a drop shadow effect as demonstrated in class.

   Insert a CSS rule in your stylesheet to use your image file as the background image for the blog entry list. Make the image repeat in the Y direction; it does not matter whether the attachment property is scroll or fixed because of this repeat setting. The important thing is to position the image so the point 20% in from the left edge of the image lines up with the point 20% in from the left edge of the containing box (the blog entry list element). Verify that your blog list has a colored sidebar with a drop shadow on the right edge, and that the sidebar takes up 20% of the width of the browser window no matter how narrow or wide you make the window.

   Give the blog entry list a colored background that both complements the color of the sidebar and provides good contrast with the text in the blog entries. Make sure the drop shadow effect on the sidebar blends into the background color smoothly. Edit the background image as necessary.

2. Position the blog entry list.

   Use CSS to adjust the margin, border, and padding settings for the blog entry list so that the content is positioned to the right of the colored sidebar column. Include enough padding so the text is pulled in somewhat from the left and right edges of the space available. Since the blog entry list is an ordered list, you will see the list item numbers, which you will remove later. For now, make the item numbers line up, more or less, with the drop shadow on the right side of the sidebar column.

3. Adjust margins, paddings, and borders for a “pleasing” appearance.

   To make sure your pages start off with the same settings for all browsers, add the following rule to all-media.css:

   html, body { margin: 0; padding: 0; }

   It will not show up on (much of) your blog entry page, but you should add a background color to the html and body elements for the sake of your home page.

   Add rules to adjust the margins, borders, and padding for list items, paragraphs, and subheadings to help make the blog visually appealing. Do not do anything with typeography (fonts) yet; that comes later.

4. Adjust colors and backgrounds to enhance the viewer’s pleasure.

   Do something “interesting” with the h1 element to make it serve as a visual design element of the web pages. Think in terms of colors, margins, borders, and padding. Again, leave the typography alone for now: you will deal with that in a later assignment. You may add a background image if you want to: feel free to experiment.

   Do something to li elements inside the blog entry list to make individual blog entries visually separate on the screen. Think in terms of margins and backgrounds.

5. Test your pages.

   You should have been doing this as you went along, but do a final check to be sure your blog page is valid XHTML and has all valid CSS rules. Check to be sure your home and blog page look approximately the same in all browsers. Verify that nothing stops working when you copy your site to the server’s DocumentRoot (C:\htdocs).

Because I will check your assignment by copying it from Maple to Babbage, all you have to do to submit the assignment is to send me an email saying you have finished it. Send your email to me by midnight on the due date (October 21). My email address is:

The Subject Line of your email must say CS-081 Assignment 4, exactly like that, in order to avoid my spam filters.

Be sure to sign your email so I know who sent it!