Publishing with XML - Herong's Tutorial Examples

∟Designing Web Page Layouts with Tables

∟Border Layout for Web Pages

This section describes the border layout implemented in HTML tables and used as the default Web page layout in hyPub.

Border Layouts

I designed the border layout to be used as the default Web page layout in hyPub based on the BorderLayout class in Java Swing package. A border layout has 5 regions placed as shown below:

------------------------------------
|               Top                |
|----------------------------------|
|   |                          |   |
|   |                          |   |
|   |                          |   |
|   |                          |   |
| L |                          | R |
| e |                          | i |
| f |          Center          | g |
| t |                          | h |
|   |                          | t |
|   |                          |   |
|   |                          |   |
|   |                          |   |
|----------------------------------|
|              Bottom              |
------------------------------------

The border layout seems to be the most flexible layout for a simple Web page. Here are some ideas of how I used the border layout for my book Web pages:

• The top area can be used for a Web site banner.
• The bottom area can be used for copyright, disclaimer and other foot notes.
• The left area can be used for Web site navigation menu.
• The right area can be used for promotion items.
• Of course, the center area is for the book content.
• All areas, except the center area, are optional. If you don't enter any text in an area, that area will not show up.

Implementing the Border Layout as a Table

Implementing the border layout as a table is so easy. Here is my HTML code for the border layout:

<table class="frame" cellspacing="0" cellpadding="0">

<tr><td class="frameTop" colspan="3">
Top area
</td></tr>

<tr><td class="frameLeft">
Left area
</td>
<td class="frameCenter">

Center area

</td>
<td class="frameRight">
Right area
</td></tr>

<tr><td class="frameBottom" colspan="3">
Bottom area
</td></tr>

</table>

Notice that:

• "colspan" is used to merge 3 columns for form the top and bottom areas.
• "class" is used name each areas so that I can refer to them in CSS file to control their formatting properties.
• "cellspacing" and "cellpadding" are used to remove the spacing effects on each area in the layout.

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

Border Layout for Web Pages - Updated in 2021, by Dr. Herong Yang