The purpose of this project is for you to create a real, standards-compliant website for a real organization, applying all the major website technologies and design techniques you have learned in this course; in particular, the website will feature client-side dynamic functionality, and database interactivity on the server side. The project is to be done in groups of four people. Each group member must submit a Confidential Peer Evaluation form. Your individual grade for the group project will depend partially on your group grade, and also on how your peers evaluate you. So be a team player!

The entire website should use a simulated frame-based navigation system, similar to what you created for assignment two. However, you will create three separate stylesheets and give your user the choice of presentation format in which they would like to view the website. See the section below on viewer preferences for more details on this specification.

Specific page requirements

Home page

Your home page <index.html> should be an introduction to the entire website, and could be a brief summary of all your major sections. One required feature of this page is that it must display dynamic images. That is, either randomly-generated pictures that are different each time the viewer visits the page; or rotating images that rotate with a delay of a few seconds each while your visitor is on the page.

About us/Organizational background

This page should tell visitors about your organization itself. Web visitors always need to know who is behind a website, so this page should give that basic information. You can also briefly give the history of the organization here, and include information about affiliate organizations, and so on.

People

You should list at least three personal profiles of key people affiliated to the organization. It would be nice to include pictures of them, but of course this depends on how comfortable the organization feels with this; so pictures are not required.

Background information

This page gives background information relative to the product or service or the organization's industry. It is different from the About page, which is specific about your own organization—the information on this page will be very general, with the goal of educating users so that they can interact better with you. For copyright reasons, and since most organizations might not have this sort of information already at hand, you might want to copy (and cite) one or more Wikipedia articles to provide information for this section. In any case, this page should have at least 1,500 words.

Product/service catalog

This page or section (group of pages, if necessary) describes and presents your organization's product or services. The nature of the content, of course, depends on the nature of the organization. Clarify with me that what you have chosen here is appropriate.

The products or services here must be implemented in a database, no matter how few they are, and will be dynamically served server-side to the page. You must display an appropriate image for each product/service; however, if you have many products to list, then you may include an image for each product category (discuss this with me).

Contact

This page lists the pertinent contact information--physical addresses, phone and fax numbers, maps of directions, and so on. If permitted, you may also list e-mail addresses (though this is guaranteed to attract spam).

Regardless, this page should include a contact form, whose action is to e-mail the submitted information to an appropriate e-mail address. For the purposes of this assignment, set the address to send e-mail to <desc384@okoli.org>. (You should change this to a real organizational e-mail address after the assignment is done.) At the least, this contact form should ask visitors for their name, e-mail address, comments, and whether they expect a response to their comments. You can add other information as appropriate.

Visitor survey

This page uses a form to survey visitors for information of interest to you. It should be a separate page from the contact feedback form, as it serves a separate purpose. You might ask about comments on the products or services, you might ask about your visitors' needs and preferences, or any other information that would be useful to the organization to know about its website visitors.

You may submit this form either by e-mail (preferred, since this is easier for small organizations to handle) or to a database.

Style sheets

This website gives viewers a choice of at least two style sheets to use to view the site. The style sheets dynamically arrange rearrange not only the colour patterns of your website, but they should also rearrange even the basic structural format.

For consistency across the different style sheets, all your stylesheets should have a header section, a menu section, and a main text body. (You may have other sections, such as a footer, if you like). In both stylesheets, the header should appear on top. In one of the two, the menu should be placed vertically either on the right or on the left of the window. In the other style, the menu should be placed horizontally in one or two rows right under the header. Each style should use significantly different colour combinations for the following items, to give the site a different appearance:

1. Main text colour
2. Font family (e.g. serif or sans-serif—don't specify actual fonts)
3. Main background colour
4. Colours for section heading labels (<H1>, <H2>, <H3>, etc.)
5. Header and menu section background colours
6. Header and menu text colour

Some of these options may stay the same across different stylesheets (for example, if you like, they can all use black text with white backgrounds), but the overall effect should look quite different with the single change of a stylesheet.

Viewer preferences

This page lets viewers set their personal preferences for viewing the site. It gives them the option to select one of the three stylesheets you have created, and also the option to customize any of the six items listed above so that they can view your site in their own preferred colours.

The viewer's preferences should be saved in a cookie, and read from there. This means that each page on your site must read your viewer's cookies to determine what stylesheet to use. If the viewer has cookies turned off, then set your preferred stylesheet to be the default.

Summary of specific requirements

1. Create two CSS-based templates for viewing the site.
2. Visitors can choose a style and save their choice to a cookie.
3. Home page with dynamic images.
4. About us, people, and background information pages.
5. Product/service catalog.
6. Contact page.
7. Visitor survey.

General requirements

1. For this project, you may use any HTML editor, including advanced ones like Dreamweaver and FrontPage. However, you are not permitted to use automatic templating functions that these editors might provide (it is quite evident from their code).
2. You must use valid XHTML 1.1, with no styles or formatting other than <strong> and <em>. I strongly recommend that you use Firefox's HTML Validator extension to view all your pages to make sure they are valid— this is exactly what I will do myself.
3. You must use valid CSS2 for all styles and formatting. Before submitting your assignment, you are required to validate all your CSS code (both external and embedded stylesheets) using the W3C CSS 1.1 validator.
4. All your pages must work properly in both Internet Explorer 6.0 and Firefox.
5. Copying/citation requirements::
   • All text and XHTML in the website must be your own original work—no copy-and-paste, with or without citation. Of course, looking at models in the book or on the Web and imitating them is perfectly OK.
   • For this project, you are free to copy CSS, JavaScript, and PHP that are freely made available as samples from the Web. You must properly cite all your borrowed or modified code by including a comment within the code that lists the source's author and website.

Submission instructions

1. You MUST publish the pages onto any web server of your choice.
2. You must submit your completed website assignment to me by 5:00 pm FRIDAY DECEMBER 9. The submission consists of two parts:
   • Submit to me a CD-ROM with the entire source code of the website. Drop this in my mailbox (opposite GM 209-23) labeled with your group member's names
   • Also by the deadline time, e-mail me the link of your website in the form of <http://jmsb.concordia.ca/>, or whatever address you have. When I click on that link, it must go straight to your website.