So far we have been concerned only on the various elements of a web page. In this section we will see the various ways of
laying out your page in its entirety. As a matter of fact there is no rule to layout your page, you can place an image here and
a text there. Especially if you use styles, you can position the elements anywhere on the screen, even ovelap them. This is
ok if it is a personal page, but if you want regular visitors to your web site it certainly will be more of a visitor repelent
than attractor even if you present the best content on the subject.
Web Page Layout Using Tables
Although modern web design practices disapprove of its use in favor of CSS layout, table layout is still wery widely used,
even more than CSS layout, because of its simplicity and its capability to adjust to content size.
Essentially, the container table will be composed of just three rows, one for ech section. Then each section can contain other
tables or DIVs, as the case may be. The content section would certainly be contained in an inner table if one wants to include
a navigation column and an additional column.
The skeleton of the centered-page layout is shown below.
<table align="center">
<tr><td> - Header contents - </td></tr>
<tr><td> - Main content - </td></tr>
<tr><td> - Footer contents - </td></tr>
</table>
The same skeletal layout with a width of 990 and with a top menu row added below the header, and the main content made of an
inner table with three cells for three columns, where the left column is set to 200px wide and the right to 160px, would be,
<table align="center" width="990">
<tr><td> - Header contents - </td></tr>
<tr><td> - Top navigation menu - </td></tr>
<tr><td>
<table><tr>
<td width="200"> - Left side column - </td>
<td> - Content - </td>
<td width="160"> - Right side column - </td>
</tr></table>
</td></tr>
<tr><td> - Footer contents - </td></tr>
</table>
Either one or both of the added columns can be removed just by removing the cell without affecting the overall structure.
A crude sample can be viewed here
TOP
Web Page Layout Using CSS
A page layout with Cascading Style Sheets (CSS) makes use of structurally arranged DIV tags with ID's, whose properties are
specified in a style sheet.
The following is the skeleton of a CSS layout. The main content can be made to contain the side columns, as done in the case
of the table layout, or the columns can be laid out as separate elments. We have choosen the latter since we don't have any
special propery to be defined for the entire middle cntent.
<div id="main-container">
<div id="header"> - Header contents - </div>
<div id="left-side"> - Left-side column - </div>
<div id="content"> - Main content - </div>
<div id="right-side"> - Right-side column - </div>
<div id="footer"> - Footer contents - </div>
</div>
The heart of CSS web page layout is the style sheet, which defines how each DIV is positioned (among other properties).
There are a number of problems associated with CSS layout which have to be tacked with some tricks, one of which is centering
the entire content on the window. For some browsers setting the left and right margin to auto works, but not to others.
Therefore, we have to define the propery "text-align:center" for the BODY in addition to setting the margin. Since this aligns
everything to the center, the main container has to specify "text-align:left" to return the rest of the document to the default
left-alignment. Another issue is that all widths of the elements have to be specified if that element used the float property;
and indeed this is the property that is widely used to position the DIVS. Here are the principal style sheet components for the
layout.
#main-container {
width:990px;
margin:0 auto;
background-color:#ffffff;
text-align:left
}
#header {
background-color:#4b7aa4;
color:white;
font-size:24px
}
#left-side {
background-color:#d1d2ad;
text-align:center;
float:left;
width:200px;
}
#content {
float:left;
width:630px;
}
#right-side {
float:right;
background-color:#d1d2ad;
text-align:center;
width:160px
}
#footer {
clear:left;
background-color:#b8c7c3;
text-align:center;
}
TOP
