Publishing with XML - Herong's Tutorial Examples - v4.02, by Dr. Herong Yang
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
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
►Adding a Frame for the Center Area
Controlling Web Page Appearance with CSS
Sharing HTML Codes with JavaScript Files
Generating Web Pages with hyPub
Formatting Printable Documents with XSL-FO