What is this?

Note that this is just HTML, with a simple stylesheet attached to give it some style, to outline blocks, and to move some blocks into position. Take a look at the CSS file now.

And Now For Something Completely Different

And here is some content. And here is some content. And here is some content. And here is some content. And here is some content. And here is some content. And here is some content. And here is some content. And here is some content. And here is some content. And here is some content. And here is some content. And here is some content. And here is some content. And here is some content. And here is some content. And here is some content. And here is some content. And here is some content. And here is some content. And here is some content. And here is some content. And here is some content. And here is some content. And here is some content. And here is some content. And here is some content. And here is some content. And here is some content. And here is some content. And here is some content. And here is some content. And here is some content. And here is some content. And here is some content. And here is some content.

Notice What Looks Wrong

Several things could be better about this page. As an in-class exercise, I will walk through identifying some of the things that are wrong with or could be changed in this page. I will also fix at least one thing in front of you in class. At that point...

In-Class Exercise: Basic Tasks

Grab this HTML file and the CSS file it calls, and place copies of them both in a sub-directory on gibson.rit.edu under your 409 materials. Now add a link to the HTML file to your course webpage exercises list. Leave the HTML alone after you save it to your web-space. You are just going to work on the CSS file.

For the following tasks, you can only change the CSS.

  1. Make the navigation list to the left have an even amount of space all the way around the list-text. Make the list run down the center of the navigation display area, and change or eliminate the bullets.
  2. Make the text within the contents area stop flowing below the navigation area, and make the navigation and contents areas go side by side all the way down the display area. In other words, make this into a classic "two-column layout".
  3. Put some more space between the header at the top and the mainArea.
  4. Make the borders and colors more æsthetically pleasing.

In-Class Exercise: Advanced Tasks

For the following tasks, you can change the HTML & the CSS.

The layout and design of this page were chosen because they were simple and easy to understand. A "C" student would accomplish the above tasks. A "B" or "A" student would show they are thinking about the medium and they are doing more experimentation.

The layout is pretty clunky, the colors are pretty boring, the text is ho-hum, and the navigation is terrible. At this point, we have a boring, ugly-duckling web page. This could be a pleasing web page, but it is not. Think about what is unique to this expressive medium we call the Web browser and how that could be applied to this page. What could you do to make this a better Web page?

Think about how your ideas about this expressive medium could be applied to this whole lesson. Think about the design & usability materials you have been reading in the context of this lesson. How could this series of Web pages be made "better" as a lesson?

Grab this HTML file or files you are going to work on, and the CSS file(s) called. Place copies of whatever you need in another sub-directory on gibson.rit.edu under your 409 materials. Now add a link to your work to your course Web page. Modify the HTML and CSS all you want after you save it to your Web space.