Lab - Week 8 - Layout Practice for Final Project

[ This lab is for practice. It will not be graded. ]

Due Date: Wednesday, March 7, 2007 by 10:00 PM (week 9)

This lab is an opportunity to try different page layouts and color schemes in anticipation of the upcoming Final Project. The goal is to experiment with different types of layout and to practice applying background color in various ways to find something you might like to use for the Final Project. This is a way to play with some of the basic aspects of page design without having to work around the specific content requirements of the Final Project.

Lab Guidelines

• Use (and know) the XHTML Basic Template found on COIN 65 Resources page. Be sure to use the XHTML 1.0 Strict DOCTYPE.
• Validate your work using an HTML validator (see Resources page).
• Put any images into a folder called images.
• Be sure to test your work. We will be testing your work in Firefox, Netscape 7.X and/or Safari. We strongly suggest you upgrade to the most recent browser(s).
• Do NOT name any file you upload this quarter index.html. We need to be able to look in your directory and see the files and dates/times the files are uploaded.

Specifics

There are four weeks left until the Final Project is due (March 28th). This lab will give you a chance to start working on the basic aspects of your Final Project page.

• Name your Lab file layout_practice_lab.html. You may use either a linked or embedded style sheet for this exercise. If you use a linked style sheet name it layout_practice_lab.css. Put the Lab file(s) in your week_8 folder along with your week_8 homework assignment.
• The first goal of this assignment is to try out the different methods of creating columns that are covered in this week's lecture, both absolutely positioned and floated.
• The second goal of this assignment is to think about and experiment with web site color schemes. Keep the subject matter of the Final Project in mind while exploring color but you are welcome to use any color scheme you want for the Lab. (Just keep in mind that you can save some time and effort by focusing on the Final Project color scheme now.)
• Copy the source code from either this Two-Column Markup file or this Three-Column Markup file as the foundation for your experimentation. You may alter the HTML tags as you see fit.
• You may rearrange, increase, or decrease the amount of text in either of these files. A quantity of text has been provided for your convenience.
• If you wish to experiment with colored "faux column" background images you may use the one from the "Two-Column Float with Header/Footer" lecture or create your own.
• For color scheme ideas, visit Bjorn Tipling's Color Tool web site. You can either create your own scheme or use one that has been posted there by someone else.
• Do not be concerned about styling navigation elements. A simple unordered list is provided in each of the markup files if you want to use it in one of the columns in your document.
• Do not be concerned about styling text elements other than applying color that will correspond with appropriate contrast against any background colors you might be using.
• Be sure to test your work in all browsers that are available to you. I recommend that you also expand and contract the browser window to be sure the columns behave as expected at all viewport sizes. If you have the option to change your monitor's screen resolution you may want to experiment with that as well.
• Keep in mind that this will not be a 'beautiful' document. Remember, the two goals of this exercise are to experiment with layout columns and color schemes.

Turning in the Assignment:

• Validate your work.
• Put all files into your week_8 folder.
• Upload the finished files to your web space.
• Create a link(s) to the Lab file(s) from your Home page.