Exercise 1

FOCUS Web page design

PURPOSE Show your highest level of skill in creating a single page using only the assets supplied to you.

VALUE 2 points (see Grading): 1 point for originality and the overall appearance, 1 point for your CSS and XHTML. Note: 1 point will be deducted if your page looks significantly different in Firefox 3 and IE (7 or 8).

DETAILS You will find one image and one text file in this folder. You must use all of the text, and you must use that image. In Photoshop, do anything you like to the image (experiment with filters!). Colors and fonts are your choice. You may use one additional image if you create it yourself. Your mission is to create the best-looking page you can, using ONLY XHTML/CSS and Photoshop.

Deadlines for all assignments are on the Week pages. For example, see Week 2.


TEST your finished page in BOTH Firefox 3.0 (or later) AND IE 7 (or later). If the page looks wildly different in one or the other -- you lose one point! Mac users: You MUST test on Windows. Windows users: You are not required to test on a Mac, but it would be a wise thing to do. I will view all your work on BOTH Mac OS X and Windows XP Pro.

Use an external style sheet. Do not include the styles in the same XHTML document with Abe.


The first example below would get 2 points. Notice that "filling" the 1024 x 768 window does NOT mean that things need to touch the edges. Use space intelligently in your page design. The use of "whitespace" in design is covered here (in case you don't know what it is). Also note that this example is not wildly creative. I encourage you to be more original. The word "Gettysburg" is a background image (optional).

Good Example

The following example would get 0 points.

Bad Example

Notice that in the poor example, the image is so tall that the top of it scrolls off the screen (scrollbar visible at right). The use of space is very awkward. The text rams against the left and right sides, but a large amount of emptiness gapes above and below the text. This is a poor use of whitespace.

If I see a scrollbar anywhere, you automatically lose 1 point.

Both screenshots shown above are from a monitor at 1024 x 768 resolution (Firefox 1.5 at full-screen, Windows XP Professional).

How to Hand It In (and Meet the Deadline)

When you finish creating the page and editing the image, upload the HTML file, the CSS file and the image file to a Web server. Then send the URL for the Web page to me via e-mail BEFORE the deadline.

If you do not have a Web host of your own, then use Plaza (Gatorlink).

If you have never uploaded files with Dreamweaver before, then read Dreamweaver Basics (PDF, 403 KB). You do not need to use Dreamweaver; it's just a suggestion.

If you don't know how to FTP, see this tutorial.

DO NOT send the files to me. I want a URL, not the files.

A complete URL begins with http://

If you do not send me a working URL by your deadline, you earn 0 points for this assignment.