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:
- Create a directory for this project in
~/public_html/cs312/.
- Copy the files from
~/public_html/cs312/project 3 directory/ into the newly created project 4 directory.
- Make sure that the directory and file permissions allow anyone to view the files.
Description
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.
Requirements
- 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:
Submission
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!
