Adding Headers and Footers

<< Designing Web Page Layouts with Tables

<< Publishing Books Using XML Technologies

This section describes how to add a header and a footer in the center area of the border layout. The header and footer make the center area look like a page in a real book.

To add a header and a footer to a page, you can simple create a table with several rows as what I did for my book Web pages:

<table cellspacing="0" cellpadding="0" border="0">

<tr><td aligh="left" colspan="3">Header line 1</td></tr>

<tr><td align="left">Line 2 Left</td>
<td align="center">Line 2 Center</td>
<td align="right">Line 2 Right</td></tr>

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

<tr><td class="body" colspan="3">

(... Body of the page ...)

</td></tr>

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

<tr><td align="left">Line 1 Left</td>
<td align="center">Line 1 Center</td>
<td align="right">Line 1 Right</td></tr>

<tr><td aligh="left" colspan="3">Footer Line 2</td></tr>

</table>

Notice that:

• I added two lines in the header and the footer.
• I offered 3 fields in the header and the footer to give you different alignments.
• Dot images are stretched again to create graphical lines to separate the header and the footer from the page body area.

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