Homework Assignment 6

Due Monday, November 13

1. Create a new directory (folder) within your personal folder on Crow. Name this directory framework. All work for this homework assignment must be stored in this directory. Inside the directory framework create another new directory called images. All your graphics files for this assignment must be stored in this directory. You will be penalized if you don't observe these specifications.



2. Within the main directory (framework), set up a page called index.htm. In the markup for this page, define a frameset with two columns, one 200 pixels wide and the other 400 pixels wide. You may suppress borders or leave them visible as you prefer. Do not disable scrolling in either frame. Name your frames "left" and "right". The SRC of the left frame should be set to "links.htm". The SRC of the right frame should be "content1.htm".



3. Choose five images about which you have something interesting to say. These might be scanned personal snapshots, reproductions of paintings, or graphics you've found on the Web (we'll suspend copyright considerations for this assignment). Make sure the graphics are saved in GIF or JPEG format. They should be sized appropriately for a Web page, but width in each case should be considerably larger than 150 pixels. (Images wider than they are long will work best for this assignment.) Place the five graphics files in the images subdirectory of your framework directory.



4. Open each of your five images in Photoshop or another appropriate graphics program (you may use the Graphics Lab if you don't have such a program at home). Re-size each image so that its maximum width is 150 pixels. Do not save the resized image under its original name, but rather as "thumbnail1" plus the appropriate file extension (.gif or .jpg). Repeat this procedure for your other four images, numbering them appropriately ("thumbnail2","thumbnail3", etc.). Store the reduced images in images within framework.



5. Within the framework directory, set up a Web page named links.htm. Use a table to limit the width of this page to 200 pixels. Within the table, create IMG tags to include each of your five thumbnail graphics, stacked vertically.



6. Place an anchor container around the first IMG tag. Set the HREF in the initial anchor tag to "content1.htm". Set the TARGET attribute so that the link targets the righthand frame. Repeat this step for the four other IMG tags, linking them to "content2.htm", "content3.htm", and so forth. Target the right frame for each link.



7. Within the framework directory create a new Web page called content1.htm. Place an IMG tag on this page to include the first of your five images--that is, the full-size image, not the thumbnail. Write about a paragraph of text commenting on this image. Coordinate the image and the accompanying text in some visually interesting way, either by aligning the IMG or by using an embedded table.



8. Repeat the previous step for your other four full-size images, naming the resulting pages content2.htm, content3.htm, etc.



9. Test your work. When clicked, the thumbnail graphics in the lefthand frame should call in the content pages containing the full-size versions and their associated comments.

This homework assignment also constitutes Lab 9 and will be demonstrated in class.