Print Templates, Part I: Creating a Master Page - Doc JavaScript | WebReference

Print Templates, Part I: Creating a Master Page - Doc JavaScript


Print Templates, Part I

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:

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

http://www.internet.com


Produced by Yehuda Shiran and Tomer Shiran
All Rights Reserved. Legal Notices.
Created: July 30, 2001
Revised: July 30, 2001

URL: http://www.webreference.com/js/column89/3.html