CS-081 Assignment 6

For this assignment, you are going to modify your Assignment 2 Photo Gallery so that it looks more like a real web page. You will change the list of image names into a list of thumbnails, learn to create your own background images, and generally let your creative juices start flowing.

Make the navigation list into a clickable set of thumbnails

Start by creating a new project directory named Assignment_06 , and create css , images , and scripts directories under it. Copy the images from Assignment 2 into the images directory, and copy all the .php files from Assignment 2 into the project directory. There is no need to copy the script file from Assignment 2 because you won’t be using it for this assignment. You do need to create a stylesheet for the assignment (css/style-all.css ) and either create empty versions of the other two style sheets or remove the links to them from index.php . Be sure all your .php files include a link to your stylesheet.

Make sure all image file names, web pages, and links to images and web pages match each other with regard to upper/lower case letters. For example, in Assignment 2, several people used “Rocks.png” and/or “Rocks.php” for file names, but had “rocks.png” and/or “rocks.php” in their <a> or <img> tags. It doesn’t matter on Windows computers, which can’t tell the difference between letter cases, but it does matter on the Unix computer where I grade your assignments.

In Assignment 2 you used an unordered list, with each list item containing two links: one to the page that displayed the picture, and one that used Javascript to generate a pop-up window containing the picture. For this assignment, you will use the same list, but with two differences: (i) the body of the link is to be a copy of the image itself, and (ii) there will be no pop-up link. So edit the list to replace the text inside each link to a .php with an <img> tag, and remove the links to the popups. For the Flash movies, it is all right if you just leave the link contents as the text name of the movie. (If you do make a thumbnail of the Numa Numa Guy, be sure you set the movie not to play when the page loads!) Use a stylesheet rule to make all the <img> tags (and <object> tags if you are putting in thumbnails for the movies) have a height of 4 ems.

At this point, you should have a bullet list of clickable thumbnails for each of your picture pages. Make sure your page validates, looks something like the screenshot to the right, and is working correctly (clicking on a thumbnail should bring up the page that displays the full-sized image) before proceeding.

The goal now is to make no more changes to index.php ; all further changes are to be done only by editing the stylesheet.

The first issue is to convert the list of thumbnails into a horizontal list with no bullets. You can do this by setting two property values for <li> elements: set the display property to inline to convert the list items from block to inline, and set the list-style to none to change the marker symbols from bullets to nothing. Add padding and/or margins to the list items to get them spaced the way you like.

Next, add some feedback for the user that shows when thumbnails are selected and ready to be clicked on. To do this, set the outline property of the list items so there is a solid border of some color and width of your choosing. But the outline should appear only when the mouse hovers over the list item. You do this using the “:hover” pseudo-selector for the list items (li:hover instead of just li).

Add an attractive colored background for the page and you’re ready for the next step!

Create a gradient background for the page heading

For this part of the assignment, you are to give the page heading a little bit pizazz. Specifically, we’re going for an effect like this:

You can come close to this effect by simply setting the background color of the <h1> element to a dark color and the text to a light color. (I made the text color match the background color of the page.) But the effect we’re after uses a color gradient for the background. The gradient starts with the dark color on the left, and fades to transparent (which becomes the page background color) on the right. We’ll use a PNG image for this, which will work in all browsers except Internet Explorer versions earlier than 7. This approach would not be appropriate where older browsers have to be supported. But for this assignment we’ll assume “everyone” uses Firefox, Opera, or IE7.

There are several ways to create images you can use on web pages; we’ll use the free tool available in the lab, Inkscape. It’s the program with the black “inkblot” icon on the desktop in the lab. You can download it for free from inkscape.org if you want to install it on another computer.

Start Inkscape, and try some of the tutorials under the Help menu if you would like to explore how the program works. When you are ready to work on the assignment, create a new drawing. From the File->New menu, you can select web_banner_468x60 or web_banner_728x90. The numbers are the width and height of the image you will create, in pixels. You can also use File->Document Preferences to set the image size. The actual dimensions don’t matter much so long as the image is wide enough to cover the width of the text in the heading and tall enough to cover the entire heading bounding box. Excess size will be clipped to fix the heading on the screen.

Use the rectangle tool (the blue box on the left) to draw a rectangle that covers the entire image. It’s better to make the rectangle a little larger than the image rather than smaller. The rectangle will show up filled with some color. Use the gradient tool, the one just above the eyedropper on the left, to create a color gradient across the image. Just click on the left end, and again on the right.

Open the Object->Fill and Stroke menu, and edit the fill color. You can edit the RGB mix, use a “color wheel” or use the Cyan-Magenta-Yellow-Black or the Hue-Saturation-Lightness tabs to pick the color any way you like. You will also see an “A” slider for setting the opacity of your fill color. (Opacity is conventionally known as the alpha channel; hence the A abbreviation.) Move the color editor panel so you can see your image, and adjust the parameters until you get the gradient appearance you want.

Save your drawing. I suggest putting it in your images directory. It will have an extension of .svg , which stands for Scalable Vector Graphics. Although all browsers (except IE6) can display SVG images, they don’t display them as background images. For that, you will need to convert the SVG file into a PNG, which you can do using Inkscape’s File->Export Bitmapmenu item. Be sure the “Drawing” button is selected so you will generate a PNG with the correct dimensions. The PNG file should definitely be saved in your assignment’s images directory so you can link to it from your stylesheet.

Feel free to adjust the style of anything in your web page, but be sure as a minimum that your final version has a list of clickable thumbnails arranged across the page, and be sure the background of the page heading is a gradient image.

Bonus: You can get a “good” for this assignment instead of just “ok” if the images on the separate pages are larger than the thumbnails on the index page and if they are centered on the page. I encourage you to use the Discussion Forum for the course as you work on trying to figure this out.

Make sure your page passes both XHTML and CSS validation with no errors and no warnings (you have to check the CSS validator’s output carefully to check for warnings).

I do not expect your assignment to work properly in IE6, although it should function properly; it just won’t look right because of the lack of support for transparent PNGs.

Send me email when your assignment is ready for grading by midnight of the due date: April 11.