This site applies only to CMPT 165 (Distance Ed) in Summer 2016. See the CMPT 165 sections page for other sections.

  1. In this question, you will be coming up with CSS colour codes for some specified colours. Of course, there are no unique correct answers. Try to get the right colours by using what you know about working with three-character colour codes (like #f70), not by looking up colours in a reference.

    Start by saving the sample colour XHTML file and the partial CSS file. Fill in the colours in the style sheet so the colours match the words. For example, you'll probably want to change the style for the first colour block to this:

    #a { background-color: #f00; }

  2. For this question, you will need a bitmap image editing program. If you have Photoshop, Photo Paint, or a similar program, you can use that. If not, you can download and install the GIMP for free (see instructions for using GIMP). Microsoft Paint is not appropriate, since it doesn't support the formats you need to use for web work.

    Start by saving two images: this photograph, and the the SFU logo. *

    Open each in a photo editor. Save each one with each of the common web graphics formats: GIF, PNG, and JPEG. Compare the file size and quality of the resulting images. Some notes:

    • GIF images can only handle 8-bit colour, so the image will have to be converted before saving. You may want to try both a 24-bit and 8-bit PNG image as well.
    • JPEG images cannot handle transparency, so the logo must be converted when saved. Your image editor will probably deal with this for you.

    Create an XHTML page with a summary of what you found. This doesn't have to be an essay or anything: just quickly indicate what was good and bad for each image. Which one would you choose if you were putting that image on a web page?

    Don't upload the images—they will just take up space on the server, and we already know what they look like.

When you're done, upload the files from this lab to the course web server. Submit the URLs of the pages you created to CourSys.

* The photo was taken by Greg Baker; the SFU logo was converted from an EPS file available online.