Deadline: Wednesday, October 17th, 2007, 11:59PM

Create A Web Site about Orion

In this assignment, you're required to design a web site which talks about the giant huntsman of Greek mythology - Orion.

What's given to you

A zip file which contains the text content and images you'll use in this assignment. The zip file contains following files:

intro.txt
legends.txt
cult.txt
interpretations.txt
reference.txt
menu.txt
bgd.png
bottom.jpg
top.jpg

Another zip file is given to which contains screen shots of the completed web site.

You can use the following CSS rule to set all the padding and margin to zero. This is very useful especially if you're trying to design a web page which displays exactly the same in all browsers.

	* {
		margin: 0;
		padding: 0;
	}

You can customize the <a> tag in CSS using

	a {
		declaration blocks...
	}
	a:hover {
		declaration blocks...
	}

where rule "a" defines the style of a link displayed normally, and "a:hover" defines the style of the when mouse is over it. For this project, the background color of the link is #D6A78D in the case of a:hover.

The rule in the above example will apply to all the links in the web page. But if you wish to apply different styles to links in different parts of your web page, then you can use different selectors for different rules. For example, you want to display the links contained inside a list item tag (<li>) to be red color, and links contained inside a paragraph tag to be a green color, then you can define CSS rules as following:

	li a {
		color: red;
	}
	p a {
		color: green;
	}

You can do the same thing for "a:hover".

The color value of the menu items is: #CC3333.

What you need to do

1. Create a directory structure as following:

2. Put all the images you use in the "images" folder; all the css files in the "css" folder; and put all the web pages under the "Assignment3" folder.

3. You need to create 5 XHTML pages with names (your's should be exactly the same as what I showed below)

"index.html" whose content is in the "intro.txt",
"legends.html" whose content is in the "legends.txt",
"cult.html" whose content is in the "cult.txt",
"interpret.html" whose content is in the "interpretations.txt", and
"reference.html" whose content is in the "reference.txt".

4. You need to create an external stylesheet "style.css" in "css", and all the stylesheet rules you used throught the whole website should be placed in the stylesheet file.

5. You should have titles for each web page.

6. Your web page should pass W3C validation.

6. Screen shots of the different pages are given below, and some of the details are explained.

Screen shot of the page

index.html

Dimension of different frames and text sizes:

footer

hover effect

<back to top>