Assignment 7.... Accessibility!

Assignment 7.1: Project 1: Recipes From My Friends (Part 5)

Overview
We have been writing HTML and CSS from the very beginning of the course. We have also been learning about the Web as a unique design environment. In this project we are going to bring them all together to create a website. All of you have put together a recipe for your demonstration files. For this site you will collect all the recipes from your fellow students and collect them into a finished website. Your site will include the following pages:

Home Page Recipe Pages (one from each person in the class) Table of Measurements You will need to organize all of these pages into a maintainable website. I recommend that you keep the folder structure simple. Place all the HTML pages into a folder with an assets folder for the images. Your sites will require navigation. In the modules we use a two-column layout with utility links at the top and local navigation on the left. You can stick with this system or come up with one of your own.
The look and feel is also up to you. You can re-shape and re-design the recipes that you get from other students. Feel free to experiment with imagery, icons, colors, and typography. CSS is to be used for all styling and positioning. Tables may be used for tabular data only.
One of the big issues you will need to resolve is how to handle the background image. In my example, I used a head of cabbage. Obviously, this will not be appropriate for many recipes. There are many design solutions here. You could have:
A unique background image for each recipe
One graphic that reflects the site as a whole
A watermark
No background image
Unique illustrative graphics for each page
A strip graphic
Graphic buttons
Some combination of the above -- the possibilities are endless!
Project Breakdown
Module 3: Collect, proof, customize and refine all the recipes from your classmates.
Module 4: Begin designing the look and feel of your recipe site.
Module 5: Rework the look and feel of the recipe site and begin roughing out code. Externalize the CSS.
Module 6: Make the Comparative Table of Measurements and refine the CSS. Add navigation and link the pages.
Module 7: Finish the code and clean up any remaining details.
Description
Make the Comparative Table of Measurements. Add navigation to all your pages. Link all your pages. Continue to refine your CSS. Finish preparing graphics. Begin page clean up.
Purpose
Learn to manage a multi-page website.
Design a functioning navigation.
Use CSS to control the layout of multiple pages.
Prepare and use appropriate graphics.
Tools
Mac: TextWrangler or your preference
PC: Notepad ++ or your preference
Recipes from Module 3
If you want to include an image, use the image editor of your choice -- Fireworks or Photoshop

Due Date
This assignment is due by next class.

Submission Directions
Put your files in a folder. Name your folder "project1_yourlastname". Upload your folder to your server. ZIP the local copy of your folder. Post the URL to the appropriate Discussion topic and attach the ZIP of the folder.

Throughout the semester you will be building demonstration files. By the end of the semester you will have a sizable collection of pages demonstrating different skills. For your Midterm you will collect all the demonstration files from the first half of the course into a single site. Your site will need a home page that describes and links to every demonstration. The individual demonstrations need not link to each other.
You home page must include:


Your name
A paragraph about you
A photo/portrait of you
The name of every demonstration file with a description
A link to every demonstration file
Organize your demonstrations into folders. Organize the folders in a way that makes sense to you. I suggest you keep your folder structure as flat as you can.

Use HTML and CSS to make your page. Design your page and make it into something special! Don't be afraid to have fun with it. You can add thumbnails, background images, personal logos, icons, wacky colors, goofy type -- just so long as it's legible. Have fun.

Validate your code. Make the necessary corrections. Upload your recipe to your web server space and post the URL to your Demonstration Library in the Discussion.
You will be updating this page again at the end of the course. As part of the Final you will be collecting and adding all the demonstrations from the second half of the semester.
Purpose
To gain practical experience working with structured content and using HTML to express the structure.

Submission Directions
Put your files in a folder. Name your folder "demo_library_yourlastname". Upload your folder to your server. ZIP the local copy of your folder. Post the URL to the appropriate Discussion topic and attach the ZIP of the folder.
Summary
This module highlighted the importance of accessibility when it comes to web design. The Web Content Accessibility Guidelines 2.0 outline the four main principles: that websites should be built in such a way as to be perceivable, operable, understandable and robust for those with and without disabilities.
Assignments
Assignment 7.1: Project 1: Recipes From My Friends (Part 5)
Assignment 7.2: Project 2: Demonstration Library