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 (X)HTML.
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. 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 Dreamweaver and Photoshop.
Deadline dates are always on the Schedule page. For an exact time, see the Week page.
Requirements
- The text must be HTML text. Do not make any of the text provided into an image.
- Use the photograph of Abe on the page (using an IMG tag) rather than as a background image (a background image would not be viewed by users who do not have CSS). You must use Abe as a non-background image.
- Your page must fill a 1024 x 768 browser window and not require any scrolling at that screen resolution. Hint: In my Firefox browser, I have 588 pixels of viewable height at that resolution.
- Do not use any <font> tags. Use only CSS for fonts and colors.
- Do not use any HTML tables. Use only CSS for positioning.
- Do not use any spacer GIFs.
- Copying HTML or CSS from other sites or pages is not acceptable and may result in a failing grade. You are expected to do your own work and be able to explain the details of your HTML and CSS on demand.
- Link the text for the image source credit. (The URL is provided in the text file.) Note: Do not make the URL visible on your page.
TEST your finished page in BOTH Firefox 1.5 (or later) AND IE 6 (or later). If the page looks wildly different in one or the other -- no points!
I would prefer that you use an external style sheet, but for this one assignment, if you don't know how to do that, you may include the styles on the same HTML page with Abe.
Examples
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 space in design is covered in your textbook by White, pp. 13 - 47. Also note that this example is not wildly creative. I encourage you to be more original.
The following example would get 0 points.
Notice that in the poor example, the image is so tall that the top of it scrolls off the screen. 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 white space.
Both screenshots 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 and the image file to a Web server. Then send the URL for that page to me via e-mail BEFORE the deadline. If you do not have a Web site already, then use Plaza (Gatorlink). If you have never uploaded files with Dreamweaver before, then read Dreamweaver Basics (PDF, 403 KB).
DO NOT send the files to me. I want a URL, not the files.
If you do not send me a working URL by your deadline, you earn zero points for this assignment.