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:
- Create a directory for this project in
~/public_html/cs312/.
- Copy the files from
~/public_html/cs312/project 2 directory/ into the newly created project 3 directory.
- Create a new file for the CSS rules named
ddd.css (for Dan's Disco Discs) in the project 3 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.
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!
