Module W24p

Layout Tables 3

Contents

Review

About this Document

Audience and Objectives

Overview

In this final exercise dealing with tables and layout, we'll take a look at some award-winning Websites to see how "the masters" do it. Studying their strategy and tactics, we can learn how to achieve great results.

So the first step is to explore, and the second is to emulate...

Explore!

to Top 		to Top

Carefully examine these Webby Award Nominee pages. Sketch their layout, with special reference to how elements are placed and separated from one another. Examine the code to determine not only what methods they use, but exactly how their effects are coded:

  1. http://www.nationalgeographic.com/
  2. http://www.burningman.com/
  3. http://www.kazaa.com/us/index.php
  4. http://www.bthere.tv/
  5. http://www.idealist.org/
  6. http://www.exploratorium.edu/
  7. http://www.enature.com/
  8. http://www.10kwizard.com/
  9. http://www.financialengines.com/
  10. http://www.nasa.gov/
  11. http://lcweb.loc.gov/
  12. http://www.bcaction.org/
  13. http://www.greenhome.com/
Follow in the Footsteps of the Great

to Top 		to Top

Use a technique used by art students: copy the work of the masters.

  1. If working in a class, your instructor will assign you a Web page to work with.
  2. Carefully analyze the page.
  3. Create a layout on paper that can be used to develop tables. Show the layout to your instructor.
  4. Use an HTML editor to type in comments detailing the tables, rows, and cells needed.
  5. Write your own valid XHTML code to create a wireframe of the page structure. Tempting as it may seem to use "copy-and-paste" techniques, you will learn more- and may even find it easier - to write your own code.
  6. Use generic names - do not actually use registered trademarks of the site you are imitating.
  7. For images, use files from free image Websites.
  8. For links, link to your class home page.

Submitting the Assignment

to Top

 to Top

When you're done, double-check that the assignment 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 (W24p), and that it follows standard business-email practice.

 

to Top About This Document
Audience

to Top

This exercise is for people who are familiar with the technique of creating nested tables with widths set in various ways, and are ready to put that technique into practice. For background, see modules W24c, W24d, and W24f.

 
Objectives

On successful completion of this module, you will be able to:

  1. Observe in detail the layout techniques used by award-winning Websites.
  2. Create precisely specified amounts of space around Web page elements, from flush abutment (zero spacing) to arbitrarily large sizes, that are rendered as specified in designated browsers.
  3. Create non-rectangular effects by combining graphic images in tables.
Module W24p: Layout Tables 3
This document is part of a modular instruction series in Computer Instruction. For more information, see the overview or the list of modules in this series, W: World Wide Web. This document has been used in the following classes: INP 270.
History:
Original: 11 February 2003, by Laurence J. Krieg
Last modification: Monday, 31-Aug-2009 11:48:06 EDT
Copyright
Copyright © 2003, Laurence J. Krieg, Washtenaw Community College
Instructors: You may point to this file in your Web-based materials; however, its location may change without notice.
Students: You are welcome to make a copy for your personal use.
All other uses: Please contact the author, Laurence J. Krieg, for permission: krieg@ieee.org.