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:
- 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 print
ing.
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
Produced by Yehuda Shiran and Tomer Shiran
All Rights Reserved. Legal Notices.
Created: July 30, 2001
Revised: July 30, 2001
URL: https://www.webreference.com/js/column89/3.html