Assignment 2
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:
- Create a the site using a single external style sheet
- 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.
General Requirements
- You must have all of your files for assignment 2 in a folder called "assignment2"
- Your pictures should be in a separate subdirectory of the assignment2 folder
- You must add a link to the homepage of assignment 2 in you "index.html" file.
Do not delete the link to assignment 1.
- 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
- 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.
- 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.
- Your CSS files must validate with the CSS validator available on the assignments page.
- Text in .html and .css files must be indented properly
- 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.
- You cannot use tables for layout purposes. Tables can only contain tabular data. Use CSS instead
- You must give titles to your style sheets
- 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.
Website Requirements
- You must create a company/business logo
- Your website must have at least 3 pages (more is fine)
- 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
- All of your files must be uploaded to the cmpt165 server at cmpt165.cs.sfu.ca
- You will also submit the zipped file of the assignment2 folder to the submission server (just as in assignment 1)
- 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
- 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 minimial layout will lose you marks. Put some effort into choosing colors, a logo, and a layout.
- Don't forget prices!