Adding Headers and Footers

Publishing with XML - Herong's Tutorial Examples

∟Adding Headers and Footers

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.

Table of Contents

About This Book

Ideas on Publishing Books using XML

Overview of hyPub - A Simple XML Publishing Tool

Writing Book Contents in XHTML Source Files

Transforming Book Source Files with XSL Technology

►Designing Web Page Layouts with Tables

Using "table" Elements for Page Layouts

Border Layout for Web Pages

Adding a Frame for the Center Area

►Adding Headers and Footers

Controlling Web Page Appearance with CSS

Sharing HTML Codes with JavaScript Files

Generating Web Pages with hyPub

Formatting Printable Documents with XSL-FO

Generating PDF Documents with hyPub

Areas of Future Improvements

References

Full Version in PDF/ePUB