Computer Science 180
Web Design

Fall 2011, Siena College

Home     Syllabus     Schedule

In this week's lab, you will learn more about editing with Dreamweaver and designing HTML tables, and you will use your skills to create a page containing a resume that makes use of HTML tables to create a nice layout.

You may work alone or with a partner for the in-lab exercises, but you must develop and publish your own resume page.

In Lab: Working with Dreamweaver

During the first part of the lab, we will look at some of the features of Dreamweaver. In particular, we will look at Dreamweaver's WYSWYG editing capabilities. Due to space limitations, most of you will need to work with a partner.

Practice with Tables

We have seen the most common attributes used in constructing HTML tables. To reinforce the attributes you have seen and to introduce you to the one you have not, we will make use of some of the examples from w3schools.com.

On your own or working with a partner, start at the w3schools.com page on HTML Tables and work through the examples. Be sure to visit each example and experiment with the table elements and attributes.

Pay special attention to these four table attributes that we did not consider in class: cellpadding, cellspacing, frame, and rules.

Once you are comfortable with these examples, develop a HTML documents that use one or more tables to display the information for each of the following. You may work alone or with a partner on these tasks.

1. A baseball scoreboard, such at the one below at Yankee Stadium.

   
   Photo by James D. Teresco.

   Fonts and colors are not important, but the alignment of all information should match the scoreboard image.

2. The following table of simple mathematical data.
   

   Pay special attention to alignment, spacing, and rules in and around the table.

3. A fast food menu, along the lines of the Five Guys menu shown below.

   
   Photo adapted from http://en.wikipedia.org/wiki/File:2008-0830-UVA-FiveGuys.jpg by Bobak Ha'Eri.

   The details are not important - in fact you can make up your own menu items and prices. The main requirement is that you have a number of "panels," each of which has some information about part of the menu. At least one panel must span from the top of the menu all the way to the bottom, and at least one must span two or more other panels. Again, the details are not important, nor are the fonts or colors. Focus on table layouts.

Laying out a Resume

Construct a resume in an HTML document using at least some HTML tables for formatting. This may be your own resume or one for a ficticious person. Each of you should do this individually.

Submitting Your Work

Before 1:30 PM, Monday, September 26, 2011, submit your files for grading. There are three things you need to do to complete the submission: (i) make sure your page is uploaded properly to the class web space and is available at your URL, (ii) update your main index on the class web space to have links to all documents you have created for this lab, and (iii) email a copy of your files to me at jteresco AT siena.edu. If you worked with a partner on the first few items, you need only upload to the account of one of the team members, but each team member should link to the pages on his or her own main index.

Grading Sheet

This lab is worth 30 points, which are distributed as follows: