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

Print - Admin

Announcements

Staff

  • 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

Schedule

Syllabus (pdf)

Useful Links

Project 3: Adding Images and CSS Styling

Assigned: Thursday, October 15, 2009
Due: Tuesday, October 20, 2009 before class

Setting Up | Description | Requirements | Submission

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

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 2 directory/ into the newly created project 3 directory.
  3. Create a new file for the CSS rules named ddd.css (for Dan's Disco Discs) in the project 3 directory.
  4. 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.

Recall the site map and sample page layout:

In this assignment, you will be adding basic CSS styling to all of the pages and adding content to the inventory page.

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.

CSS Design

  • The CSS rules should go in ddd.css.
  • Choose a color palette for the website.
  • Using the color palette you chose, create CSS style rules to configure the following:
    • background color
    • default text color
    • h2 text color
    • h4 text color
  • Create CSS style rules to configure the following:
    • default text font should be Arial, Helvetica, or any sans-serif font
    • dd selector should be italic, size 0.9em, and have a 200% line height
  • Create CSS style rules for the following areas on the page:
    • a class named logo with background and text color using your color palette
    • a navigation area (use an id named navBar) that displays text in bold, large (1.2em) font
      • a class named nav for formatting the navigation links that colors the hyperlinks differently than the normal text
      • a.nav:hover that reverses the hyperlink text when the mouse moves over it (link background becomes text color, link text color becomes background)
    • a class named contact with bold, 0.9em font, using Times New Roman or any serif font
    • a page footer area (use an id named footer) with small font (0.6em), italic text, and a top padding of 1.5em.

Home Page

  • Insert the <link /> element to associate the web page with the ddd.css style file.
  • Configure the logo area.
  • Configure the navigation area.
    • Replace the <p> with a <div>.
    • Assign the <div> to the id navBar.
    • Add the nav class to the navigation links.
    • Remove the <strong> element.
  • Configure the paragraph with address and phone information.
    • Assign this area to the contact class.
    • Remove the <small> element.
  • Configure the page footer area.
    • Replace the <p> elements with the <div> element.
    • Assign this area to the footer id.
    • Remove the <small> and <em> elements.
  • The home page should look something like this (your colors should be different):

Inventory Page

  • Edit this page in a similar manner as the home page so that it uses the CSS styles.
  • Create a single 2-column table to hold the list of available albums.
    • The artist, title, and year of the album should be in an <h4> element that spans both columns.
    • The cover art image should be in the first column with a height of 125.
    • The released tracks information should be in the second column. The tracks should be listed using an unordered list.
    • You must include the ABBA and Love Tracks albums, but you may include other albums as well.
  • The inventory page should look something like this:

Disco Info and Contact Pages

  • Edit these pages in a similar manner as the home page so that they use the CSS styles.

Submission

Go to the Project 3 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!