CS-081 Assignment 2

This assignment is an exercise in using headings, text, lists, links, and images.

Set Up the Project

Your assignment is to build a photo gallery web site. To start, create a directory named “Assignment_02” under your “My Web Pages” directory. Copy your course_template.php file into this directory, and rename it index.php. Create a subdirectory of Assignment_02 named “images”, and copy a few images into that directory. I am providing images for you to use, but you may include some of your own, provided yours (a) include both JPEG and PNG formats and (b) include files with image sizes and aspect ratios. My images are in a Zip file that is quite large because it includes a Flash movie as well as JPEGs and a PNG. Because my images are so large, I have put copies of the zip file in the C:\Downloads\CS-081 directory of the computers in A-205, as well as some of the other computers in the TREE domain (Peach, Mimosa, ...). You can just unzip the local copy into your project’s “images” directory.

Separate Web Page for Each Image

Make a copy of the course template for each image in the images directory. Give each one a name that matches the image name, but with an extension of .php. For example, one if the images I am providing is named peaches.jpg, so the corresponding web page would be peaches.php. Be sure the Assignment_02 directory contains only .php files, and the images directory contains only .jpg, .png, and .swf files.

Create a Photo Gallery

NOTE: Do not do anything with the presentation features of the web pages for this assignment. That is, do nothing to try to make the pages look “good.” We’ll take care of that when we start working with CSS. Do not use any CSS in this assignment!

Make the default page of your site (index.php )have a meaningful title in the title bar and the same title in an H1 element at the top of the page. Put in an unordered list, with each list item being a link to one of the images. The text of each link should be the image’s file name with no extension. Edit each of the other pages so that the title and H1 element are the name of the image. Display the image on the page, and make the image be a link to the next image in your gallery. The last image should link to the first one. Put a link back to the index page below the image on each page.

Add Pop-ups To The Index Page

Nobody likes pop-ups, but you need to know how to make them anyway!

For each item in the list on the index page, add a second link named “thumbnail.” Create a second subdirectory named “scripts” under Assignment_02, and put a file named popup.js in it. The contents of this file should be the definition of the newWindow() function given in Example 3-9 of the textbook, but without the <script> and </script> tags. Make the title bar of the popup match the image name. Put the link to your popup.js in the head of your index file, as shown in Example 3-10 of the text. The line of XHTML at the bottom of page 43 shows how to make the links invoke the pop-ups. Don’t bother to create a pop-up for your .swf image(s).

Test this version of your project both with Javascript enabled and disabled.

Be sure to check that your project functions correctly, make sure you have green checkmarks from TIDY and Firebug, that the W3C gives all your pages a green “This page is Valid XHTML 1.1!” bar (except the pop-ups, and the movies if you use the <embed> tag.)

When everything has been tested, send me email with “CS-081 Assignment 2” in the Subject line and your name (and anything else you want to mention) in the message body.