Redesign Your Basic Website Using CSS

Your next project is to apply what you have been learning about style sheets to do a complete overhaul of your website. You will end up with a professional looking portfolio of your work this year.

The general look of your website should be that you have a main starting page (index.htm) with a variety of links to other pages. You may have as many links as you like, but you need links for your Flash animations, class projects, future career possiblilties, other classes, photos, and favorite links.

You will present your new website to the class during finals week. Here is a checklist of everything you need to include in this project.

Take a look at this website full of free examples to use:
www.maxdesign.com.au/presentation/page_layouts

You should pick one type of layout (from above) that you like and work with it. Here is an example of a three column web page that you could use to get started. You can view source, and copy this code into a new blank text file. Be sure you save it under a new name so that you don't accidentally erase your old web page.

html page with three columns

Below you will find the code for the style sheet. Copy it into a new text file that you will save as the name: 3col.css. These two files are already linked together. I've given you the basic structure of code, but you must tweak it, change the colors and so on.

#container
{
	margin: 0 auto;
	width: 1000px;
	background: #fff;
}

#header
{
	background: #99ccff;
	padding: 20px;
}

#header h1 { margin: 0; }

#navigation
{
	float: left;
	width: 1000px;
	background: #333;
}

#navigation ul
{
	margin: 0;
	padding: 0;
}

#navigation ul li
{
	list-style-type: none;
	display: inline;
}

#navigation li a
{
	display: block;
	float: left;
	padding: 5px 10px;
	color: #fff;
	text-decoration: none;
	border-right: 1px solid #fff;
}

#navigation li a:hover { background: #383; }

#content-container
{
	float: left;
	width: 1000px;
	background: #ffffcc;

	
}

#section-navigation
{
	float: left;
	width: 160px;
	padding: 20px 0;
	margin: 0 20px;
	display: inline;

}

#section-navigation ul
{
	margin: 0;
	padding: 0;
}

#section-navigation ul li
{
	margin: 0 0 1em;
	padding: 0;
	list-style-type: none;
}

#content
{
	float: left;
	width: 500px;
	padding: 20px 0;
	margin: 0 0 0 30px;
}

#content h2 { margin: 0; }

#aside
{
	float: right;
	width: 200px;
	padding: 20px 0;
	margin: 0 20px 0 0;
	display: inline;
}

#aside h3 { margin: 0; }

#footer
{
	clear: left;
	background: #ffff99;
	text-align: right;
	padding: 20px;
	height: 1%;
}

<< Back to Skyline