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.
