CMPT 165 Assignment 2

Assignment Description

For this assignment, you must create a website for a fictional business. You can choose the type of business and what products this business sells, but you must sell something. Some simple examples include: selling home cleaning services, homemade ice cream, etc. Your site should look professional and be easy to navigate. Choose wisely, as you will have an opportunity to build on this site in future assignments.

This assignment is two fold:

  1. Create a the site using HTML files and a single external style sheet.

  2. Modify the style sheet to create a second style sheet to produce an entirely different look for your site. Do not simply change colors and fonts. The two style sheets must produce significantly different looking sites.

General Requirements

  1. You must have all of your files for assignment 2 in a folder called "assignment2".

  2. Your pictures should be in a separate subdirectory of the assignment2 folder.

HTML and CSS Requirements

  1. Your page must validate XHTML 1.0 Strict. This means that you cannot use deprecated tags and attributes.

  2. Validate your page with the W3C XHTML validator.

  3. Your CSS files must validate with the CSS validator available in the Technical link.

  4. Your style sheet should be organized such that related selectors follow one an another, and related properties should be also grouped in the style sheet. For example, all selectors dealing with lists should follow one another in the page.

  5. You must give titles to your style sheets.

  6. Use the <link> tag in your pages to link both of the stylesheets you create. One will be the default stylesheet and the other will be an alternate stylesheet. This can be done in the following manner:

    <link rel = "stylesheet" href = "carbusinessGreen.css" type = "text/css" title = "green" />

    <link rel = "alternate stylesheet" href = "carbusinessBlue.css" type = "text/css" title = "blue" />

    Now to view the different styles sheets in Firefox go to: "View -> Page Style ->" Then select either "no style", "green", or "blue". Obviously, the "green" and "blue" will change depending on the titles of your style sheets. This is how we will view your pages.

  7. You must create a company/business logo.

  8. Your website must have at least 3 pages (more is fine).

  9. You must sell at least 3 separate products:

    • Could be 3 different colored papers

    • Could be bronze cleaning services, silver services, and gold services

  10. All of your files must be uploaded to the cmpt165 server at cmpt165.csil.sfu.ca.

  11. You will be required to submit via the submission server a single text file containing the following information:

    • Your name and student number

    • Your user account ID

    • The URLs for the front page of your site

Tips, Tricks, & Hints

  • Remember if you change any colors, you must specify all 5: background-color, color, a:link, a:visited, and a:active, even if you simply specify the color as black.

  • When using thumbnails, do not simply make the thumbail a link to the large picture. Make it a separate html page with product information, etc. Use the same layout as the rest of your site.

  • A logo does not need to be some fancy picture you draw. A creative font with the name of the company is sufficient. Be sure the make the logo a picture, however, as most people (including those who mark your assignment), will not have the same font you used installed.

  • When modifying the style sheet to produce your second style sheet, you can not only change the values of the properties, but you can add new properties and delete unused ones. You can even remove all of the properties for a selector if you wish.

  • A simple website could consist of a welcome page with information about the company and what you sell, a page with products on it, and perhaps a contact/about page with information about the company (fake information of course).

  • If you have long pages of information, be sure to use fragments and a navigation system which will allow users to "jump" to the relevant portion of the page.

  • Make the color scheme appropriate to the product. Just because you like black, white, and gray does not mean that it's right for the product or the company you're creating the site for.

  • Be creative! Part of your assignment mark is for creativity. This does not mean you have to go overboard, but creating an ultra-simple black and white page with minimal layout will lose you marks. Put some effort into choosing colors, a logo, and a layout.

  • Make sure to keep in mind the design principles discussed in class!