Layout Tables 2

Overview

Once again, we'll be working with a draft of a page for the Stony Creek Historical Museum. This time, we'll do a page for youth, working from screen shots and a computer-drawn comp.

Save your XHTML template file as youth-page.htm, and title the page, "Sarah Strong Museum Youth Page" (changing Sarah Strong to your own name). Make sure your name is listed as author.

Here are links to the three versions of the screen shots:

• Microsoft Internet Explorer 6.0
• Netscape Navigator 4.7
• Opera 7.0

And here is a computer-drawn comp; colors identify the different tables, but do not represent final colors.

Here are some procedural tips from your more experienced colleague:

1. Start by copying the text description in the box below and pasting it into the body of your file, youth-page.htm. Indent each line according to standard guidelines (see module X11d if you're not sure).
2. Make each line a comment by putting comment markers <!-- and --> in front and behind each line.
3. Create each table separately, with its rows and cells. Don't nest them - create each one on its own. Give each a border (1 pixel) so you can tell if they come out right.
4. Put the text and links in the cells, but not the nested tables. Instead, put in a place-marking paragraph to shown which table goes where.
5. View your tables in a browser. They won't look right, but you'll be able to tell if the spanning cells are correct or not.
6. Validate your file, and make any changes necessary.
7. Finally put the nested table code in. You'll probably need to debug more after that.
8. When the tables look right, go through and set the borders to zero so they'll disappear.

Here is the description of each table:

STONY CREEK HISTORICAL MUSEUM YOUTH PAGE
TABLE 1: MAIN LAYOUT has 8 rows, 5 cols
T1 ROW 1
T1 R1 CELL A spans 4 cols, contains running head (H2); width is 60%
T1 R1 CELL E spans 4 rows, contains "What They're Saying about Us" (H3), T7
T1 ROW 2
T1 R2 CELL A spans 4 cols contains main head (H1)
T1 ROW 3
T1 R3 CELL A spans 4 cols spacer, height 20px
T1 ROW 4
T1 R4 CELL A spans 3 rows, contains T2
T1 R4 CELL B spans 3 rows, spacer: width 20px
T1 R4 CELL C spans 3 rows, contains T3
T1 R4 CELL D spans 3 rows, spacer: width 20px
T1 ROW 5
T1 R5 CELL E spacer, height 20px
T1 ROW 6
T1 R6 CELL E, contains "Wanna Get Involved?" (H3), T8
T1 ROW 7
T1 R7 CELL A spans 5 cols, spacer height 20px
T1 ROW 8
T1 R8 CELL A spans 5 cols, contains copyright statement. Use CSS class copyright. The copyright symbol is coded &copy;

TABLE 2: LEFT NAVIGATION in T1 4A, has 11 rows, 1 col, contains list of navigation links to:
Latest News
Volunteer Scheduling
Youth Activities (no link on this entry - use CSS class current)
School Trips
Argricultural Tools
Carpentry Tools
Other Tools
Geneology
Early Settlers
Crops
Animal Husbandry

TABLE 3: YOUTH ACTIVITIES in T1 4C, has 7 rows, 1 col
T3 ROW 1: "Youth Activities" (H3)
T3 ROW 2: "January" (H4)
T3 ROW 3: Table 4
T3 ROW 4: "February" (H4)
T3 ROW 5: Table 5
T3 ROW 6: "March" (H4)
T3 ROW 7: Table 6

TABLE 4: in T3 3A, has 1 row, 1 col
Contains activities list (3 bulleted items, filler text - copied or made up)

TABLE 5: in T3 5A, has 1 row, 1 col
Contains activities list (3 bulleted items, filler text - copied or made up)

TABLE 6: in T3 7A, has 1 row, 1 col
Contains activities list (3 bulleted items, filler text - copied or made up)

TABLE 7: in T1 2E, has 1 row, 1 col; centered, width 80%, background color #ffddbb
Contains quotes from people (3 paragraphs, filler text - copied or made up; use CSS class quote)

TABLE 8: in T1 6E, has 1 row, 1 col; centered, width 80%, background color #ffcc99
Contains 2 paragraphs (filler text - copied or made up; use CSS class quote) and 1 link to the volunteer page

Tips:

• Empty cells are not shown correctly by most browsers, so fill each empty cell with non-breaking space, &nbsp;
• Links: All links should point to your INP 150 home page.
• About height:
  • Remember that to specify height, only table cells (not rows or the table itself) can have a height= parameter.
  • Cell height can be specified in pixels (the default: no px on the number) but cannot be specified as a percentage. For example: <td height="20">
  • In cells intended for text (that is, in the ones that are not spacers) you may use <br /> tags to fill in space.

Put CSS in the head:

Body

Set the color to dark red #600 and the background color to tan #fed

Table data cells

Set the font family to Garamond, Georgia, or serif; the font size to 12 pixels; and (again) set the color to #600

Links

Remove the text decoration (underline) from all link-states; change the background colors this way: normal link #ff9, visited #ff6, hover #ffc, and active #ff0

Paragraphs

Verdana or sans-serif font, size 18 pixels

Headings

• h1 24 pixel "Lucida Handwriting", "Brush Script MT", "comic sans ms", script; colored #ff0 with black background
• h2 18 pixel Garamond, Georgia, serif; using the default color
• h3 16 pixel "Lucida Handwriting", "Brush Script MT", "comic sans ms", script; with a background color of #fcc
• h4 14 pixel "Lucida Handwriting", "Brush Script MT", "comic sans ms", script; using the default color

Class for youth activities

Create a class for the table that will have current youth activities, giving it 14 pixel Garamond, Georgia or serif font and a yellow background. Tip: specify that this class and the two that follow occurs in a table data cell - this is necessary for some browsers

Class for copyright information

Create a class to apply to the table data cell with copyright information, using 14 pixel Garamond, Georgia, or serif font on a #c90 background

Class for quotes

Create a class for the kids' quotes, to in the "What They're Saying About Us" table. It should have 14 pixel Garamond, Georgia or serif font.

When you're done, double-check that the assignment is valid, meets the specifications above, and that all links are functional.

Upload to your work to your WCC student Website, and send email to the instructor with the URI. Be sure your email meets the formal requirements: name, class, section and exercise (W24o), and that it follows standard business-email practice.