Assignment 2

Home Lecture Notes References Course Software Assignments

 Useful Links

This assignment is due November 4, by 1:30pm. All files must be uploaded at this time and you will turn in a paper version of your assignment in class.

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 paper 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 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. See the example .html and .css files from October 7 on the lecture notes page. The HTML is identical in all 4 pages, only the stylesheets have been modified. This is what you need to do.

    3. 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
    3. You must add a link to the homepage of assignment 2 in you "index.html" file. Do not delete the link to assignment 1.
    4. You will also provide links to your two separate external style sheets. To do this provide a relative URL with the name of the style sheet. For example: "assignment2/greenStyle.css"

    HTML and CSS Requirements

    1. Your page must validate XHTML 1.0 Strict. This means that you cannot use deprecated tags and attributes. There is a blank xhtml1.0 strict file on the assignments page of the course site.
    2. Validate your page with the W3C validator and add the html they provide for valid sites to the end of your page so that the little hyperlink graphic is displayed. Do this for each of your pages separately.
    3. Your CSS files must validate with the CSS validator available on the assignments page.
    4. Text in .html and .css files must be indented properly
    5. 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 slectors dealing with lists should follow one another in the page. Another example would be to have all of the border properties in a #header selector grouped together.
    6. You cannot use tables for layout purposes. Tables can only contain tabular data. Use CSS instead
    7. You must give titles to your style sheets
    8. 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.

      9. Website Requirements

      1. You must create a company/business logo
      2. Your website must have at least 3 pages (more is fine)
      3. You must sell at least 3 separate products
        • Could be 3 different colored papers
        • Could be bronze cleaning services, silver services, and gold services

      Submission

      1. All of your files must be uploaded to the cmpt165 server at cmpt165.cs.sfu.ca
      2. You will also submit the zipped file of the assignment2 folder to the submission server (just as in assignment 1)
      3. You will also hand in a paper version of your assignment. This version should contain printed copies of your two stylesheets. You do not need to print out your HTML. The paper version must contain screenshots of each of your web pages. There should be 2 screenshots per webpage, one for each of the two style sheets. These screenshots do not have to be in color. There should be no more than 6 per page, as large as possible while still leaving room to write around the pictures. Double-sided printing is fine. Further, this document, on the front, should have your name, userid, student number, and the url of your index.html file. Make this large enough to easily read. You will also attach a copy of the marking form to the back of the document.

      Tips, Tricks, Hints