Introduction Site Structure Navigation Page Layout Page Length and Width Color Formatting Text Images Multimedia HTML Code Bibliography

Page Layout 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: tables, by default, are created without borders empty cells are permitted tables can be defined in pixels or as a percentage of the total screen width; cell width and height can be defined in pixels <table width=500> or <table border=0 width=80%> <tr> <td width=100> <br></td> <td width=400>Body text goes here.</td> </tr> </table> cell padding and spacing can be used to create white space (see Figure 5, Cell Padding and Spacing) a table cell may span more than one column or row tables can be nested, that is, you can create a table within a table Figure 5: Cell Padding and Spacing Cell 1-A Cell 1-B Cell 2-A Cell 2-B Cell Spacing (space between cell walls) Cell Spacing=12 Cell 1-A Cell 1-B Cell 2-A Cell 2-B Cell Padding (space between cell wall and cell contents) Cell Spacing=12 Cell 1-A Cell 1-B Cell 2-A Cell 2-B Cell Padding = 12 Cell Spacing=12 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.