Using the Layout Available at (And the Style Sheet at ), You Will Pick a General Layout

A New Layout

Using the layout available at (and the style sheet at ), you will pick a general layout that you would like to use for your web site. The first layout is called a “vertical” layout because the menu is on the left-hand side; the second layout is called a “horizontal” layout because the menu is along the top, beneath the title.

1. Copy “experiment.html” to your computer so that you can use some of these layouts. You can copy “experiment.html” by right-clicking on the page and viewing the “source”. Copy all of the source. Create a new file named “experiment.html” in PSPad and paste it into the new file.
2. Copy “experiment.css” to your computer. Select all of the text, and then copy it. Create a new file named “experiment.css” in PSPad and paste into the new file.
3. You will change my layout to be like your page. Start with changing the content (meaning, the words, the menu selections, etc.) in “experiment.html”. Change the title to be your title, change the menu to be your menu and change the content to be your content.
4. Change the color scheme, including background images, to match the colors that you would like to have on your web site.
5. Change widths, paddings, margins, fonts and font sizes, but make sure to look at your page after any change that you make. You may be changing something that has an unintended effect!
6. You can get rid of any components of these layouts that you would like, but this is a good place to start!
7. Check your layout in all five browsers – you will see some differences that you may need to fix. If you can’t figure out how to fix them, use some Google searches to help you out, because you aren’t the first one to have these problems! Usually, Internet Explorer is the most difficult browser to get a page working in, so get your pages working in all of the other ones first.