Dan Fergus Design > Student Resources > Syllabus > Class Schedule > Project: Web Page Layout

VCA222 Web Design

Project: Page Layout using CSS

Assignment

Using CSS, create an original web page by adding a multi-column structure and design to the provided mark-up.

Procedure

1. Open the provided html file and save it to your computer.
2. Place the file in a folder called yourName_layout.
3. Here are some images you can use in a zip file.
4. Open the html file in a text editor or Dreamweaver. Note the structure: the page is divided into 5 sections called "site ID," "main," "sideBar," "navigation," and "footer." These represent the primary parts of this web page. When designing a web page from scratch you have some latitude as to which elements to include and where they could go. However, for this project you must follow the prescribed structure:



5. The first step then is to set up the columns with style sheets. While there are numerous ways to do this, for this project I want you to use the method described below:

Whenever we are dealing with three columns, we need to combine two of the columns into a single element that we can float either left or right. In this case, we will wrap both main and sidebar in a div tag with an id name of wrapper (so put <div id="wrapper"> in front of <div id="main"> and put the closing </div> tag after the Sidebar's closing </div>).

6. Now we can add some styles. Either create a style section in the head, or create a separate style sheet document. Write the following style rules:

body {
width: 800px;
}

#wrapper {
float: right;
width: 640px;
}

#wrapper #main {
float: left;
width: 430px;
}

#wrapper #sideBar {
float: right;
width: 200px;
}

#navigation {
float: left;
width: 150px;
}

#footer {
clear: both;
}

 

This will create three columns in the middle with a ten pixel gap between each.

The widths specified above are not magical sizes; you can customize your layout and make the columns any size you want with a few qualifications:

• The combined width of "main" and "sideBar" must not exceed the width of "wrapper."
• The combined width of "wrapper" and "navigation" must not exceed the width of the whole body.
• Don't add margins or padding to the styles that specify widths (in this case; body, #wrapper, #main, #sidebar, and #navigation). This is because these measurements will be added to their widths (by Safari & Firefox) and could break the layout. If you allow for the added margin/padding amounts you'll find the design will break in Explorer, which (incorrectly) subtracts margins & padding from element widths. Best to avoid the problem altogether by putting margins and widths in styles that don't specify measurements (so, you could add padding to the headings, paragraphs, and lists instead).
7. Customize your layout. Even though we now have three columns, a site ID and a footer, it's pretty dull. Write styles to add some "flair." Possibilities include:
• Alter the sizes (widths) of the columns;
• Specify fonts families, font colors & sizes;
• Adjust the padding & margins for headings & paragraphs & lists;
• Add background colors and/or images to the various sections;
• Add borders;
• Add bird and/or feeder related pictures (either using <img> tags or backgrounds). You can use the ones I gave you and/or feel free to search for other pictures (try Google image search);
• Create a cool site ID graphic.

Hints

• To write a style that will apply only to a specific section (navigation, main, footer, etc.), start with the id name, followed by the tag(s) you want to style. For example, to write a style that would apply to paragraphs in the main section only you would begin the style rule with :

#main p {

• You can remove the bullets from the navigation menu with the following style rule:

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

• To get rid of the indent in the navigattion list, set the margin and padding for the ul to 0:

#navigation ul {
list-style-type: none;
margin: 0;
padding:0;
}

• If you want to create text "runarounds" around pictures, create a class style like this one and apply it to the <img> tags:

.leftFloat {
float: left;
}

• To center the entire page, specify a left and right margin amount of auto to the body tag:

body {
width: 800px;
margin-left: auto;
margin-right: auto;
}

Deliverables

1. Print out both a copy of the HTML/CSS code (from Text Edit) and a version of the formatted page (from a browser), staple them together and give them to me (make sure you put your name on them).
2. Give me a copy of the HTML file.

Deadline

Week 6: Due, beginning of class.

Class schedule

Syllabus

Student resource index