Third Assignment: Graphics-Rich Web Site

In this assignment, you will copy the files from your last project into your project2 directory, and enhance it with images appropriate to the web, including JPEGs, GIFs, and animations. Your navigation should be accomplished with a frameset that includes a rollover-based navigation bar.

The project is due on Saturday, November 15th at 2pm. (We'll run a program then that checks everyone's directories and creates file listings for each student.)

Here are the general requirements for the site:

• All images must be stored in your media directory, and relative references must be used for all links and image references within your site.
• All images should have relevance to your site content, and should be designed and placed to enhance rather than distracting from the content.
• All pages must have clean, valid HTML and CSS code
  • Clean means that it is easy to read, has sufficient white space, uses relative URLs wherever possible, doesn't include unnecessary tags, and uses CSS appropriately to streamline formatting
  • Valid means that it passes through the W3C HTML and CSS validators without errors.
• You should demonstrate your command of basic design principles ("C.R.A.P."), and use of type and color, to enhance the delivery of your content. All of your pages should share a common design look and feel.

Here are the specific requirements for graphics on this site:

• All steps that you take to create graphics for the site should be recorded and posted to a "Resources and Methods" page (the "how I did it page"). Use a table to lay out the content, with the image on the left and the description of what you did and why on the right. Make sure that a link to this page is included in your navigation bar.
• Your site must use a navigation bar with rollover buttons or navigational elements. The navbar should be in a frame that remains visible when other content pages are displayed.
• A logo-type graphic must appear on your site (it can be stand-alone, or it can be incorporated into the navigation bar). The graphic must include:
  • One or more words from your paper title
  • Your name
  • Shapes made with the vector tools (rectangles, circles, etc) and transformed in some way.
• You must create a composite image using at least three different source images. One of these should be a photographic image related to the topic of your paper. On your sources page, provide the original versions of all source images, and describe the steps you took to create the composite.
• At least one element in your site must be thumbnail-sized image that is based upon a larger photographic quality image (e.g. a nicely rendered 3d scene would be acceptable, but a cartoon graphic would not; a photographic portrait would be acceptable, but a black and white caricature would not). Clicking on the thumbnail should call a javascript behavior that opens a new window with the original large image inside it. load a page with the original larger image inside it. You should also modify the thumbnail image in some way--correcting/changing colors, combining items from more than one image, etc. Document this process on your Resources & Methods page.
• At least one element in your site (other than the logo or navigation bar) must be animated (using GIF animation).
• All images should be appropriately anti-aliased and optimized. Steps taken to accomplish this should be documented.

Your site will be graded using the criteria below. The assignment is worth up to 32 points (although the weight of the assignment is 15% of your final grade); total points for each component are shown below.

Last Project Posted

I’ve posted the details for the final assignment. Let me know if you have questions, or find inconsistencies in it.

Exam Dates and Times

As a reminder, the final practical exam will be given in class on the last day of classes, November 12th. The final written exam will be during exam week. Happily, we’ve gotten an early slot—Monday, November 17th, 12:30-2:30pm, in 70-3435.