CS110 Introduction syllabus assignments documentation project

Resources

 You may find the following useful:

Assignment

The purpose of this assignment is to a) enhance your home page from assignment 1 by adding CSS; b) use both CSS and tables for page layout; c) resize and crop images in Fireworks and d) practice relative and absolute links. This assignment will link to your previous assignments (see below).

Turning it in

Check that your pages are properly uploaded. Properly uploading your files and checking that they are properly uploaded is a key part of the assignment. If your files don't properly appear on the web, you will receive no credit. We hate doing that, so just check to make sure your stuff is there. Thanks!

http://cs.wellesley.edu/~youraccount/protected/hw3/assign3.html

Requirements

Old File Structure New File Structure
old nav tree   new nav tree
  1. Create a new folder called hw3 (you will upload this folder into your protected folder). Within your hw3 folder, create a sub-folder named graphics. All your image files for assignment 3 (.jpg and .gif) should go within the graphics folder. See New File Structure diagram above.
  2. Move your whole hw2 folder from the protected folder into the public_html folder. See New File Structure diagram above. This allows your schedule and course pages from assignment 2 to be accessible from your assignment 3 page.
  3. Add CSS to customize your assign1.html in the hw1 folder. Be creative!
    NOTE: For those of you who already used CSS in your home page for assignment 1 (bravo), you can choose to add more CSS or leave your page as is. You don't need to do more if your assign1.html already has CSS.
  4. Create an HTML page called assign3.html (in your hw3 folder). In assign3.html, you will use CSS for overall page layout, and a table for image layout. Your assign3.html must include the following:
    • A comment at the top of the page, telling us how long this assignment took to complete (e.g. assign3.html took me 2.5 hours)
    • Two identified DIVs to create a layout of your page that is divided into two vertical sections (see schematic and page snapshot below):

      div layout of assign3 page    sample assign3.html

    • In the navigation part of your page (indicated by nav in the schematic diagram above), create a text navigation bar with these links:
      1. A link to your (now enhanced with CSS) assign1.html page
      2. A relative link to your schedule.html page in your hw2 folder that you moved (see #2 above) into your public_html folder
      3. A link to the CS110 syllabus page
      4. A link to the Wellesley College home page
      5. A link to a web site of your choice
    • In the main content part of your page (indicated by main in the schematic diagram above), you will create a 2x2 grid of images (you create/select your own four images), roughly like this: sample 2x2 image grid

      Your images might be scanned art (Mac scanning directions and PC scanning directions), clipped from the web, digital photos, or art created from programs such as Fireworks.

      Here are the constraints on your 2x2 grid of images:

      • Each image must have a caption
      • Use a table for layout of the images and captions
        There are many different ways to use a table to layout the four images, choose the one that seems most natural to you
      • Each of the four images must be the same size
        You may start with four images of various sizes, but need to crop or resize each one so that the images you use in your page are all the same width and height, preserving the original aspect ratio. Click here for an example.
      • The 2x2 grid must be completely visible within a 800 pixel wide browser window without scrolling
      • Each images must have an ALT attribute (not just for this assignment, but for all homeworks and project pages for cs110). Here are the lecture notes on ALT.

Due Date/Time

Assignments may not be turned in late. They are due at the day and time specified on the syllabus. Furthermore, remember that this policy means that once you have turned something in, you should not modify it, so that when we grade it, it's still exactly what you turned in.

Back to the top of the page

© Computer Science 110 Staff
Date Created: June 1998
Date Modified: Spring 2008