Creating a Master Page
The DeviceRect behavior defines the master template of all pages. Use it to place your company logo, to change the background color, or to decorate your margins with a special pattern. You define the master page with a regular <STYLE> element. Of course, you can have a different master page for every rendered page. Suppose we want to define a master page with the following attributes:
- 8.5 inch wide
- 11 inch tall
- Yellow background color
- 1 pixel wide solid black left border
- 1 pixel wide solid black top border
- 4 pixels wide solid black right border
- 4 pixels wide solid black bottom border
- 10 pixels wide margin on all sides
We define a style called masterstyle as follows:
<STYLE TYPE="text/css">
.masterstyle
{
width:8.5in;
height:11in;
background:#FFFF99;
border-left:1 solid black;
border-top:1 solid black;
border-right:4 solid black;
border-bottom:4 solid black;
margin:10px;
}
</STYLE>
Here is the complete HTML code that displays all master pages:
<HTML XMLNS:IE>
<HEAD>
<?IMPORT NAMESPACE="IE" IMPLEMENTATION="#default">
<STYLE TYPE="text/css">
.masterstyle
{
width:8.5in;
height:11in;
background:#FFFF99;
border-left:1 solid black;
border-top:1 solid black;
border-right:4 solid black;
border-bottom:4 solid black;
margin:10px;
}
</STYLE>
</HEAD>
<BODY>
<IE:DEVICERECT ID="page1" CLASS="masterstyle" MEDIA="print">
</IE:DEVICERECT>
<IE:DEVICERECT ID="page2" CLASS="masterstyle" MEDIA="print">
</IE:DEVICERECT>
</BODY>
</HTML>
We have included two DeviceRect elements. You need to include one DeviceRect element per page. If you have 100 pages, you need to include 100 DeviceRect tags. Don't panic. We'll show you in an upcoming column how to create them automatically, on the fly. Notice the few parameters we specified for these DeviceRect elements. The ID attributes should be unique per page. The CLASS attribute specifies the STYLE definition, masterstyle, to be used for the page. The MEDIA attribute tells the browser that the final target of this template is for printing.
Notice also the first few lines of the code:
<HTML XMLNS:IE>
<HEAD>
<?IMPORT NAMESPACE="IE" IMPLEMENTATION="#default">
The first line specifies the XML namespace. The third line imports the default behaviors. We need the following behaviors: DeviceRect, LayoutRect, TemplatePrinter, and HeaderFooter. See what the master page looks like.
  
Next: How to use the LayoutRect behavior
| 
