Adding a Frame for the Center Area

<< Designing Web Page Layouts with Tables

<< Publishing Books Using XML Technologies

This section describes how to add a dark frame to the center area of the border layout. The frame can be added as a table with a dot image.

Stretching Images

We all know that images can be included on Web pages by using the "img" elements. But some of you may not know that image's size can be stretched out with the "width" and "height" attributes.

If you stretch an image of a single dot, it becomes a line. The two "img" elements below will create a vertical line and a horizontal line:

<img height="100" width="1" src="_dot.gif"/>
<img height="1" width="200" src="_dot.gif"/>

Creating a Frame with a Table and Dot Images

By stretching dot images in a table, we can easily create a frame around an area. Here is the HTML code that I used on my book Web site to create a thin frame around the center area in my border layout. This makes the center area looks like a real paper.

<table class="pageBorder" cellspacing="0" cellpadding="0">
<tr><td colspan="3" height="1">
<img height="1" width="100%" src="_dot.gif"/>
</td></tr>

<tr>
<td width="1" rowspan="1">
<img height="100%" width="1" src="_dot.gif"/>
</td>
<td>

(... Book contents here ...) 

</td>
<td width="1" rowspan="1">
<img height="100%" width="1" src="_dot.gif"/>
</td>
</tr>

<tr><td colspan="3" height="1">
<img height="1" width="100%" src="_dot.gif"/>
</td></tr>
</table>

Sections in This Chapter

Using "table" Elements for Page Layouts

Border Layout for Web Pages

Adding a Frame for the Center Area

Adding Headers and Footers