Publishing Books Using XML Technologies
Dr. Herong Yang, Version 4.01

Adding a Frame for the Center Area

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>

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

 PDF Printing Version

Dr. Herong Yang, updated in 2007
Adding a Frame for the Center Area