Posted in 3523 Adv Web Design - S09
Thursday, April 16th, 2009 at 6:11 am

Design 3

Due in class Thursday, April 23.

This design should incorporate the elements from Design 2 and the work we have done since then. Thus, the list of requirements now includes:

Basic Requirements

  1. Use a fixed-width layout with two or three columns. (A fluid design is acceptable, but not required.) BE SURE TO USE A LAYOUT METHOD RECOMMENDED BY BUDD. (The two and three-column layout we have used in class follows his approach.
  2. Employ professional-grade design techniques (such as pleasing gradients, flexible boxes, etc.).
  3. Turn the design into a complete website with 4-7 pages.
  4. Be sure that your pages include text, images, links, etc. (Links may be “dummy” links, using “#” for the href.)
  5. In addition, include at least one PDF download and one link to an external website. Using CSS attribute selectors and background images, make these links indicate what they are.
  6. Use the Gilder/Levin replacement (Budd page 65) method for at least one element in the page — probably the site logo.
  7. Use the pixy rollover method (Budd page 79) for at least one element in the page.
  8. Create main navigation that is visually appealing, with hover effects. (A horizontal nav bar, such as in the Complete version of the Exam 2 practice files, or in Budd pages 91-93.)
  9. Using body id or class and contextual selectors, set the main navigation to indicate which page the user is on.
  10. Ensure that one of your pages contains a contact form. This page should end with “.php” and contain a version of the functioning e-mail form, as described here.
  11. Create and integrate a favicon into your site. (See the how-to here.)

Validate XHTML/CSS and Optimize for Internet Explorer

In addition to the above, you also need to:

  1. Update the code at the top of your HTML and PHP pages to meet the full XHTML Strict specification. Use this code: 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
</head>
  2. Validate your XHTML and fix as many true errors as possible. (Use Tools / Validate HTML in the Web Developer’s Toolbar for Firefox, OR use this page at W3.org.)
  3. Validate your CSS and fix as many true errors as possible. (Use Tools / Validate CSS in the Web Developer’s Toolbar for Firefox, OR use this page at W3.org.)
  4. Test your site in Internet Explorer 7.
  5. Create an ie7.css stylesheet, which enables you to add tweaks for IE 7. Use the IE conditional comment (Budd page 157) to import that stylesheet. That code would look like: 
    <!-- [if IE 7] <style type="text/css"> @import ("ie7.css"); </style> -->

    Be sure to place this in the head of the document, AFTER your link to your main stylesheet.

  6. Consult Budd pages 168 to 184 to try to identify any bugs that may be creating problems in IE 7. Fix these in your ie7.css stylesheet.

Submission

Bring your folder, named Yourlastname-Design3, containing the following files and folders:

  1. index.html with your markeup
  2. style.css with your stylesheet
  3. images folder with your final images used in the web page
  4. PSD folder with your mockup and any other design files

Leave a Reply