Establishing a Page Layout Grid
A page layout grid defines the appearance of the page, that is, the placement of key elements such as a title banner, body copy, images, navigation aids, white space (blank or empty space), identifying logos, etc. If you develop a page grid and use it consistently, you will create a unified site that enables users to quickly and easily identify the content of individual pages and the organization of information on the page. Because no one grid is likely to accommodate all content throughout the site, it may be necessary to modify the basic page grid or layout to meet specific needs.
Design and test your page layout grid using a representative sample of your content including all key elements. Constructing a table to contain your page elements allows for a more elaborate or complex page layout. The following features of tables may be used to provide greater flexibility in page layout:
<table width=500> or
Figure 5: Cell Padding and Spacing
Figure 6 illustrates the Newfoundland and Labrador Heritage site page layout grid. This site uses a 585 pixel wide table with three columns. Column 1 is 150 pixels wide and contains a content list, callouts, and small images. Column 2 is 20 pixels wide and is left blank to provide a margin of white space. Column 3 is 415 pixels wide and contains all the body copy and major images. A 585 pixel wide navigation bar is located at the top and bottom of the table and the site logo is at the lower right.
Figure 6: Page Layout Grid for Newfoundland and Labrador Heritage Web Site
For greater control of white space in your layout use the "single-pixel-GIF" trick. Create a transparent, single pixel GIF image. Define horizontal and vertical space around this "single-pixel-GIF" image to create an area of white space and to force elements to where you want them on the page. For example, to provide more vertical white space between two blocks of text:
… end of first block of text.
<p><img src="single-pixel.gif" vspace="25" hspace="0"><br>
Beginning of second block of text. …
To create and indented paragraph:
<p><img src="single-pixel.gif" vspace="0" hspace="15">Text goes here. …
Note that horizontal and vertical space is added in both directions—top and bottom, left and right—so you actually get two times the amount of space specified.