More Projects

PROJECT 2: TABLES AND CSS

This project has two parts.

Part 1.

Modify your web page for assignment 1 by using style sheets. Pay attention to consistent design of the home page. Try to avoid using physical markup -- use CSS instead. In subsequent assignments, always avoid using physical markups when you repeat the same style multiple times. You can choose to create a standalone CSS document to include or add CSS definition to the beginning of each web page.

Part 2. Add three more pages to your web site, and link to them from the first page that you designed in your project 1. These three pages belong to an online-store where the users can make purchases of movies.

The page should have three areas. The following picture shows its structure:

This is the top area (referred as the TopArea from now on). This is the area to place some general information of your online store. You can place the store name, any promotions, and ads, and any other interesting decorations here. You can design any patterns you like.
This is the command area (referred to as CommandArea from now on). This is the area to place your command buttons (or links). In this assignment, you will place at least two buttons (or links) here: 'browse' and 'view cart'.	This is the main area (referred to as the MainArea from now on). This area has a table and two buttons (or links) labeled 'previous movies' and 'next movies'. Clicking them will lead to the previous movie table or next movie table. In this assignment, you need to build three pages to fit in here; each contains a movie table containing five movies in stock

Following is an example page

Title	Category	Image	Price	Stock Count
GLADIATOR	1		19.99	50
X-MEN	1		15.99	50
THE REPLACEMENT	1		14.99	50
PERFECT STORM	1		15.99	50
BIG MOMMA'S HOUSE	1		14.99	50

You can design the other two pages using the same format, and choose the movies, as you like. Just fill in a reasonable price and stock count (>0) for each movie. You can decide your own category values to denote different types of movies ( for example, you can use “action” “romance” instead of integer codes.) Later, we will use each table to denote results from a user query.

An example screen shot is like the following:

:

The user will first see the above page. They then can use the 'next movies' and 'previous movies' buttons to jump to any one of the three movie tables. Although the above picture shows frames, in your project PLEASE DON'T USE FRAMES! You can use tables to get the above effects.

More Projects