2.0 Web page layouts
As hopefully should be clear by now, web page content is written using HTML and styled using CSS, preferably using an external stylesheet rather than inline.
There are endless possible layouts available for web pages depending upon a designer or site owner's requirements, but one of the most useful and common web page layouts is the three column layout with header and footer, shown on the left. Here the main content of the web page is written into the middle column, while the flanking left and right columns can be used to contain site navigation, secondary page content, other links or even adverts. The header and footer sections can contain site banners, introductions, search bars and closeout information etc. This very popular layout can be achieved using CSS by defining boxes for these areas using div and id selectors, with minimul markup being required in the actual HTML web pages.
The body section of the HTML pages could go like this:
<body> <div id="wrap"> <div id="header"> Content goes here... </div> <div id="content"> Content goes here... </div> <div id="rightbox"> Content goes here... </div> <div id="leftbox"> Content goes here... </div> <div id="footer"> </div> </div> </body>
Here we have a box called "wrap" in which all the other boxes are contained. The header box is brought in first and then the other boxes are floated left into this same box. As the header is the full width of the wrap, the following boxes will spill down and sit below it. Note that the content box is loaded into the page prior to the right and left boxes, regardless of where the boxes are finally positioned, to ensure that the content, the most important stuff, is accessed by search engine spiders before the less important stuff. The final positioning of leftbox, content, rightbox, can be achieved by setting margins in the stylesheet later.
There are many variations available for the above even to achieve a similar layout, and this can depend on many factors including which dimenionsing approach is used. There are three basic approaches for designing web page layouts:
These will be discussed in detail over the next few pages.