Photoshop / Web Page Combination Assignment
In this assignment you will use what you have done in the first web page lab as well as what you did in the Photoshop / GIMP lab
You will combine these efforts to build a simple website:
  1. Make 5 copies of your first web page. Put them in a different folder and name them
    • index.html
    • image1.html
    • image2.html
    • image3.html
    • image4.html
  2. Change the picture featured on the new index.html to the collage from your Photoshop / GIMP lab
  3. Change the picture featured on each of the image(x).html files to be the four individual images from your Photoshop / GIMP lab
    (**NOTE: If you did not save the individual images, you can recreate them from your collage)
  4. Turn the collage on the index.html page into an image map that navigates to the other 4 pages using the following code:
    • <img src="your_collage.jpg" border="0" usemap="#photos">
    • <map name="photos">
    • <area shape="rect" href="image1.html" coords="0,0,CtrX,CtrY">
    • <area shape="rect" href="image2.html" coords="CtrX,0,MaxX,CtrY">
    • <area shape="rect" href="image3.html" coords="0,CtrY,CtrX,MaxY">
    • <area shape="rect" href="image4.html" coords="CtrX,CtrY,MaxX,Maxy">
    • </map>
    • Use Photoshop or GIMP to determine the center point of your collage (shown in the image to the left as CtrX,CtrY) and the lower right edge of your image (shown in the image to the left as MaxX,MaxY)
    • Replace the CtrX, CtrY, MaxX and MaxY variables in the code above with the values you got in the previous step
  5. Provide a "Home" link on each of the 4 subordinate pages back to the index.html page
  6. Add a paragraph under each image explaining how you created it
Once completed, zip up all of your files and images and email your .zip file to me as an attachment to your email with
'CIS 110 - Lab 9 ' as the subject.
Return to Assignment Index