Publishing with XML - Herong's Tutorial Examples - v4.02, by Dr. Herong Yang
Suggested CSS Definitions for Book Web Pages
This section describes how CSS is used in hyPub to support the default Web page layouts.
hyPub does include a CSS file called _hypub.css that contains a number of interesting settings to support the default Web page layout.
1. CSS properties assigned to the "body" element to set a dark background color; align the border layout to the center of the window; select verdana as the font; set the font size to 12px. I used px as the fond size instead of pt.
body {background-color: #a0a0a0; margin: 0px;
font-family: 'verdana'; font-size: 12px;
text-align: center;}
2. In order to put my book Web pages on the center of the browser window, I used a "div" element right inside the "body" element as <body><div class="body"> ... </div></body>. This "div" element is assigned with the following CSS properties to move the page to the center of the window and a witdh of 780 pixels:
div.body {margin: auto; width: 780px;}
3. hyPub uses "p" elements to define variables. We need to hide those elements on Web pages using this CSS setting:
p.variable {display: none;}
4. hyPub provides a default layout called border layout using a "table" element. Here are the CSS properties to control how each area will look like in the border layout:
table.frame {width: 750px; height: 100px;
border: 0px solid transparent; margin-left: 0px;
padding: 0px; background-color: transparent;}
td.frameTop {border-width: 0px; background-color: #a0a0a0;}
td.frameLeft {background-color: #fbfbfb; vertical-align: top;}
td.frameCenter {border-width: 0px; background-color: #a0a0a0;
vertical-align: top; width: 650px; height: 200px;}
td.frameRight {background-color: #fbfbfb; vertical-align: top;}
td.frameBottom {border-width: 0px; background-color: #a0a0a0;}
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
►Controlling Web Page Appearance with CSS
►Suggested CSS Definitions for Book Web Pages
Assigning CSS Files to Web Pages
Sharing HTML Codes with JavaScript Files
Generating Web Pages with hyPub
Formatting Printable Documents with XSL-FO