|
Copyright © 1999 by Bonnie Skaalid |
. |
The screen grid can be used as a way of ensuring consistency between pages in a site [1]. The grid can be used to establish that certain areas of the screen are to be used for specific purposes (eg. navigation buttons or hyperlinks are found on the top,bottom or left side of the page, text information is placed in the center half of the screen with white space found on either side). Since HTML makes no allowances for margins or white space, other means such as tables with invisible borders are used to provide designers with the means of implementing their ideas [2]. Implementing a screen grid using tables can cause problems if the designer is unaware of the limitations. Layout for this SiteThis web site is implemented using a table with 3 columns. The first column contains the top level navigation elements (the dark blue colored box to the left), the second column is a spacer so that text does not overwrite the colored section of the background graphic, and the third column is where the information from each page is located. The navigation box with the colored edge at the bottom is another table. I have made the borders for all the tables on this page visible so you can see the page grid.
[1] Lynch, P. & Horton, S. (1997). Web style manual, 2nd ed. Yale Center for Advanced Instructional Media. [Online]. Available: http://info.med.yale.edu/caim/manual/contents.html [2] Siegel, D. (1996) Creating killer web sites. IN: Hayden Books. Screen
Research:
[Screen
Grid and Layout
[
[Line
Length]
[Screen
Density]
[Font
Selection &
Leading]
[Icons,
Buttons, &
Menus][Color] Page
Design:[Multimedia
& Web Page Design
Principles]
[Screen
Design
Research]
[Screen
Resolution &
Size]
[Writing
Style] Main
Level: [Home
Page]
[Design
Theory][Site
Design]
[Page
Design]
[MultiMedia]
[Teacher
Resources]
[Table
of
Contents] |
