CS 312 - Internet Concepts
Fall 2009: Tues/Thurs 11am-12:15pm, MGB 0129

Print - Admin



  • Dr. Michele Weigle
  • mweigle at cs.odu.edu
  • E&CS 3214
  • Office Hours: MW 2:30-4pm
  • Grader: Hui Shi
  • hshi at cs.odu.edu


Syllabus (pdf)

Useful Links

Project 4: Adding CSS Two-Column Layout

Assigned: Tuesday, Oct 20, 2009
Due: Tuesday, Oct 27, 2009 before class (due at midnight -MCW)

Setting Up | Description | Requirements | Submission

The goal of this assignment is to improve the look of the company website you created in Projects 2 and 3.

Setting Up

Here are the steps to get started:

  1. Create a directory for this project in ~/public_html/cs312/.
  2. Copy the files from ~/public_html/cs312/project 3 directory/ into the newly created project 4 directory.
  3. Make sure that the directory and file permissions allow anyone to view the files.


Recall the scenario: You are in charge of designing a website for Dan's Disco Discs. As the name implies, they specialize in selling disco CDs. The company wants a home page, an inventory page, a disco information page, and a contact page.

There is a new page layout:

In this assignment, you will be designing a logo image and implementing the two-column CSS layout.


  • Edit your web pages with a simple text editor (no Word or any other fancy tools allowed).
  • Use XHTML 1.0 Transitional. Your pages must pass validation.
  • Your CSS must also pass validation.

Logo Image Design

  • Design a logo for the website that includes the company name.
    • You may want to create the logo in Powerpoint, MS Paint, or some other image editing software package.
    • Save the image as a JPEG.
    • The maximum width of the logo image should be 680 pixels.
    • Upload the image to ~/public_html/cs312/project 4 directory/.
      • Make sure that file permissions allow anyone to view the file.

CSS Design

  • Create a new container id to hold the page content.
    • The area should have a width of 680 pixels, a minimum width of 680 pixels, a left padding of 10 pixels, and a margin of 0 and centered (margin: 0 auto).
      • The auto property means that the browser will select the margin. With the top margin of 0 and the remaining margins set by the browser, the page will be centered.
  • Configure the left column area as a leftcolumn id that floats to the left and is 150 pixels wide.
  • Edit the style for the navigation links (nav) to allow each element to be displayed as a block element with a 15 pixel right, bottom, and left margin.
  • Configure the right column area as a rightcolumn id that has a 150 pixel left margin and 20 pixel right and bottom padding.
  • Edit the style for the logo so that the colors go with your image and enforcing a width of 680 pixels.

Home Page

  • Add the <div id="container"> element around everything inside the <body> tags.
  • Configure the logo area, adding your image.
  • Configure the left column, enclosing the navigation area.
  • Configure the right column, enclosing the content and footer areas.
  • The home page should look something like this (your colors and logo should be different):

Inventory, Disco Info, and Contact Pages

  • Edit these pages in a similar manner as the home page so that it uses the two-column CSS layout and new logo.
  • Here's the example of the disco info page:


Go to the Project 4 Submission page, and enter your name and the URL of your webpage.

  • Make sure that the URL works and has been validated before you submit it.
  • Only submit your URL once!