Layout Tables 1

Overview

In this assignment, you'll be taking a draft image of a Web page and making a real page that matches it.

You'll be taking on the role of Web designer working under contract with the Stony Creek Historical Museum (SCHM). Together, your supervisor and SCHM management have produced a rough image, or "comp", of what they want the welcome-page to look like. Your task is now to translate that into HTML in draft, or "wireframe" form.

Your first step in creating the HTML verison will be to study the draft images of the page. Images were made in three browsers for comparison. You'll then look over the hints and suggestions from a senior colleague on the team (the instructor, actually!) and produce the page in HTML.

Save your XHTML template file as w24n.htm, and title the page, "Sarah Strong Layout Tables 1" (changing "Sarah Strong" to your own name).

Take a look at each of these images to get an idea of what the page should look like in various browsers:

• Netscape Navigator 7.1
• Netscape Navigator 4.7
• Microsoft Internet Explorer 6
• Opera 7.54

You're mainly on your own to figure this out, but here are some ideas from a more experienced Web designer:

• There are three main tables, centered, and 750 pixels wide so they'll fit nicely at 800 x 600 resolution
• There are two invisible tables used for controlling the space above and below the middle table. They are each 10 pixels high, which you can set by using the height attribute in the data cell (you only need one cell in each table) and setting the cellpadding to 5. In order to insure these tables are rendered correctly, they need to have the invisible character   in the cell.
• You will not need to use nested tables for this assignment
• You will need to use horizontal and vertical alignment
• In at least one place you'll need to span a cell over more than one row
• The normal text font is "Verdana, Helvetica, Arial, sans-serif"
• Font-size on most of the page is "12px". In order for this to work in all browsers, the CSS rule needs to be entered for the table entity rather than the body entity.
• Heading tags are appropriate for the two larger type areas, but without controlling their margins or sizes they take up too much room
  • For all headings, the font-family is
    'Old Town', 'CASLONOPENFACE-Thin', Garamond, serif;
  • For "Stony Creek Historical Museum" in the upper left, <h1>
    • font-size 34px
    • margin-top 3px
    • margin-bottom 3px
  • For "Welcome to Stony Creek Historical Museum", <h2>
    • font-size 30px
    • margin-top 2px
    • margin-bottom 4px
  • For "Museum News" and "Quick Links", <h3>
    • font-size 28px
    • margin-top 3px
    • margin-bottom 3px
• The "Museum News" cell's width-request is 150 pixels, the "Welcome..." cell is 450 pixels, and the "Quick Links" cell is also 150. However, note that not all browsers give the width request equal weight.
• All the links can simply point back to your own class home page, home.htm.
• For the copyright symbol, the code is &copy;
• The color of the shaded sections is #FFCC99

Remember that coding "best practice", including indenting and comments, is required for full credit on this assignment (as on all assignments). But the main point of putting them in is to help you do your coding more quickly and accurately, so the best time to put them in is when you start coding, not when you're done!

Validate your file when you're done; correct as necessary.

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

Upload 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 (W24n), and that it follows standard business-email practice.