Assignment 2: Web Design with CSS and Dreamweaver

100 points

IMPORTANT NOTICE : SUBMITTED ASSIGNMENTS THAT DO NOT USE VALID XHTML AND CSS CODE WILL BE RETURNED TO THE STUDENT UNGRADED. Only HTML files that are validated as "This Page is Valid XHTML 1.1" at http://validator.w3.org and CSS files validated as "Congratulations! No Error Found" at http://jigsaw.w3.org/css-validator WILL BE GRADED.

This project involves creating a professional-grade multi-page Web site on a topic of your choice. Your Web site will need to contribute something useful to the Web community. It may be a personal Web site about you, or a business or organization Web site, or a Web site dedicated to a subject of interest on which you are an authority, Check with your instructor to see if what you have planned is acceptable.

Please recall from the syllabus that assignments containing content that anyone would find offensive (including profanity, vulgarity, insults, violence, or sexually explicit language or images), or links to any such content will receive a zero and the student responsible may be brought up on charges of violating FSU's Conduct Code.

PART I (20 points): Graphics

Create graphics for your Web site using Macromedia Fireworks or some other similar graphics application. You may create an attractive banner to place at the top of your Web pages, buttons for your navigation menu, bullets for lists, a background image, some other decoration, or any combination of these.

Grading criteria: In your graphics design you must prove your knowledge of the following skills (worth 2 points each):

  • using shapes
  • use of color for fill and lines
  • using text
  • using effects on shapes or text (drop shadow, glow, etc)
  • arranging objects on the canvas
  • cropping the image
  • using a gradient fill
  • appropriately sizing image files
  • exporting for Web (files must be .jpg or .gif)
  • creating fast loading graphics

PART II (60 points):External Style Sheet Design, Navigation Menu, and Template

One sign of a professionally designed Web site is when all the pages in the Web site have the same visual style: fonts, colors, and layout. Web designers typically start a project by creating a template for the the pages in the Web site. The template is an html file that links to a Style Sheet that defines font types, sizes, and colors for various tags, and propreties of the body such as background color or image, and page margins. The template html file then lays out the components common to all pages, such as title, graphics, navigation menu, footer, etc, using either a table, or CSS layers.

Once the developer has created a template that is satisfactory, he or she can make copies of the template using the filenames for Web pages in the Web site, and edit each file to contain unique content.

  • View the demo Website created from the above template at http://garnet.acns.fsu.edu/~kbaldauf/CGS3066/A2/home.html
    • notice that the demo Web site uses three basic colors in its design (olive, teal, & red)
    • notice the use of font types and styles
    • notice the use of a table to layout the content
    • notice the demo Web site uses a graphics image across the top as a banner (JON DUPONTE in gradient font with a white line through it)
    • notice that all pages in the site use the same styles

Your mission is to create a Web site of at least the same level of quality as the demo Web site. The demo Web site is not perfect (it was created in an hour just as an example). A Web site of this quality should earn an "A" just the same. Note that the demo Web site was created from a Dreamweaver CSS template (File > New > CSS Style Sheets). You can do the same if you wish, or find some other template or style elsewhere that you like, or start from scratch. If you do start from a template, you need to alter it considerably from its original design in order to make it your own. You can do so, by editing the colors and fonts in the CSS file. You should also provide credit to the original designer in your footer. The demo Web site is pretty conservative. Yours doesn't need to be as conservative, but the style should be appropriate for the subject matter and the people you wish to view it.

For this part of the assignment, create your template and linked CSS file.

Grading criteria for CSS file: Your style sheet should impact (at least) the following aspects of your Web site to provide a professional and tasteful appearance that looks good in any browser (worth 3 points each):

  • <body> background color or image, margins, box for content
  • <h1> font type, size, and color, and margin
  • same for any other heading <h> sizes that you use
  • <p> font type, size, and color, and margin
  • <li> font type, size, and color, and margin (bullet graphic if desired)
  • <th> font type, size, and color, background color and padding
  • <td> font type, size, and color, background color and padding,
  • <a> font type, size, and color, decoration
  • a:hover font type, size, and color, decoration
  • other

VALIDATE YOUR CSS FILE AT http://jigsaw.w3.org/css-validator/

Grading criteria for template: Your template should include (5 points each)

  1. link to your style sheet
  2. a tasteful use of your original artwork from Part 1
  3. a tasteful layout of page elements using a table or CSS layers (no horizontal scrolling should be required to view content)
  4. a professional looking navigation menu (Optional: consider using CSS to create your menu like those at http://e-lusion.com/design/menu)
  5. a header (content that appears at the top of all your pages) that includes your Web site name and the page title
  6. and a footer (content that appears at the bottom of all your pages) that includes copyright info, your name, and email address

VALIDATE YOUR TAMPLATE PAGE AT at http://validator.w3.org

PART III (20 points): Content

Finally, create the content of your Web pages to complete your Web site. Upload your Web site to your A2 folder on garnet.

Grading criteria: The content of your Web pages will be subjectively graded on the value it contributes to the global community. It should also be organized logically into pages that are not overly lengthy, but at least enough to fill on browser window vertically. Your content should be accessible to all using any browser software (see http://www.fsu.edu/redesign/accessibility.html for accessibility guidelines). There should be a minimum of four .html files in your Web site.

VALIDATE YOUR PAGES AT at http://validator.w3.org


Make sure to check your page and links from http://garnet.acns.fsu.edu prior to submitting the assignment form indicating that you have finished.