When you think of a webpage, think of it as print medium akin to magazines and newspapers. These mediums use grids to organize page content. A grid is composed of visually structured areas that the eye can put together. Think in columns and rows; in other words....tables. Your goal is to arrange the content so that the eyes of the viewer are lead to the most important content. Then the next most important and so on down the line.


A common webpage layout has four blocks of information. A top block containing the title some color and possibly some navigation. The second block goes down the left side containing links. A center block usually containing the page contents, and the fourth block along the bottom for footer information, copyright and possibly some navigation.





Some websites use a variation of this with another block down the right side containing more links.





Some websites will use an opening page to create an impression and offer the key links





This layout uses the triple backgrounds:



Code for above tables:Click


All of these layouts are based on the classic newspaper; magazine style. This style works well with a wide variety of content types. The actual content being buried at least one layer down.


There can be problems with this grid style. Postioning can be tricky as all content must fit in the table layout and not all browsers see the same standards....For example some browsers automatically add a line under text or images, others do not.


The newest in web page layout is based on the same print media layouts but allows the webmaster to break away from the grid when needed. This is done using cascading stylesheets (CSS). These sheets store directions for where to place content. This allows the content to be more freeform and the change of the stylesheet can completely alter the appearance of a site.


The grid will always be with us but with CSS positioning and stylesheets the content can be more easily organized for better visitor communication.