by William Robert Stanek
After learning what the FrontPage Developer's Kit contains and how you can use it, you should be ready to create your own templates. There are three types of templates in FrontPage: page templates, Web templates, and frameset templates. Although page
templates and Web templates are discussed in many chapters of this book, frameset templates are only discussed in this chapter. As you will see, creating frameset templates is a rather advanced subject.
Most template basics you already know. Page templates usually create a single page. Web templates usually create a set of related pages. Frameset templates create a frame-enhanced page. Any page created by a template can contain
images, WebBots, references to multimedia objects and links.
The way you access a template depends on the type of template you want to use. To create a new page based on a page template, you select New from the File menu in the FrontPage Editor. To create a new Web based on a Web template, you select New Web
from the File menu in the FrontPage Explorer. To create a frame-enhanced page, you will use the FrontPage Editor's Frames Wizard, which can be started by selecting New from the File menu and then clicking Frames Wizard in the New Page dialog box.
All templates are stored in special directories on your hard drive. When you installed FrontPage, you had to select a base installation directory. The template directories are in this base installation. The default path to the
FrontPage base installation directory is Program Files\Microsoft FrontPage.
If you change to the FrontPage base installation directory or examine this directory with Windows Explorer, you will find a directory called pages. This directory is used to store the page templates and wizards used by the
FrontPage Editor. As you can see from Figure 25.1, all page templates are stored in separate subdirectories under the pages directory.
Figure 25.1. Page templates are stored in separate directories.
The FrontPage base installation directory also contains a directory called webs. This directory is used to store the Web templates and wizards used by the FrontPage Explorer. As you can see from Figure 25.2, all Web
templates are stored in separate subdirectories under the webs directory.
Figure 25.2. Web Templates Are Stored in Separate Directories
In Figures 25.1 and 25.2, note the naming structure for page and Web templates. All page and Web template directories are named with a .tem extension, such as normal.tem and glossary.tem. If you examine the template directories, you will find that all templates are defined by HTML pages named with an .htm extension and a parameter file named with an .inf extension.
The directory and naming structure for frameset templates is different from the directory and naming structure for pages and Webs. Because frameset templates are used only by the Frames Wizard, they are in the pages\framewiz.wiz directory. All frameset templates are defined in a single frame definition file that ends with a .frm extension. Frame definition files are discussed in the section titled
"Creating Templates for Frames."
All templates for pages and Webs must have a parameter file. This file is a plain ASCII text file that ends with the .inf extension and is formatted similarly to a Windows INI file.
NOTE
When you create parameter files in a word processor, be sure to save the file in ASCII text format.
Because of the way FrontPage looks for parameter files, the parameter file must use the base name of the template directory. If your template is stored in a directory named mytemplate.tem, for example, the parameter file
for this template must be in a file named mytemplate.inf.
As with Windows INI files, your parameter files are broken down into several sections. Each section is named with an identifier set off by square brackets. For example, a section containing information about the template is in a
section with the identifier [info].
Template parameters are placed after section identifiers, with one parameter on each line, and are entered as name-value pairs. Each name-value pair identifies a parameter by name and the value associated with the parameter separated by an equal sign
(=), such as title=Sample template. Parameter files can have four sections: info, FileList, MetaInfo, and TaskList. Only the info section is mandatory for all parameter files. Additionally, because the
FrontPage Editor does not refer to the optional sections, you should only use them for Web templates used by the FrontPage Explorer.
The information section of the parameter file has the identifier [info]. This section is used to specify general information about the template including the title, description, and indexing information.
Whenever you open the New Page dialog box in the FrontPage Editor, FrontPage reads the information section of all page templates in order to provide you with a title and description of the page templates. Similarly, when you open the
New Web dialog box in the FrontPage Explorer, FrontPage reads the information section for all Web templates in order to provide you with a title and description of the Web templates. If, for some reason, FrontPage cannot find the parameter file, FrontPage
displays the base name of the directory in which the template is stored.
The information parameters are designated by the following names:
title | This parameter is the title of the template, such as Normal Web. |
description | This parameter is the description of the template, such as Creates a new Web with a single page that is based on the Normal page template. |
NoIndexRenaming | This parameter tells FrontPage not to rename index files published on external servers. If you do not set this value, files called index.htm are renamed automatically to the name used for index files on the external server, such as welcome.htm. To disable index renaming, set this parameter as NoIndexRenaming=1. |
NOTE
Generally, index files are used when users point their browsers to a directory instead of a page. Because FrontPage renames index files automatically, you should not reference index files directly. Instead of using the index file name of index.htm in your links, use the link ./, which forces the server to serve the renamed index document to the user.
The following is a sample information section for a parameter file:
[info] title=Internet Resource Web description=Create a Web designed to showcase Internet resources NoIndexRenaming=1
By default, when a new Web is created in the FrontPage Explorer, all files in the Web template directory are used to create the Web. All you have to do is move the files you want to include on the Web into the Web template directory,
and they will be used to create the Web. Generally, all file names are converted to lowercase. Additionally, the URL to these files matches their filenames.
Using the optional FileList section of the parameter file, you can selectively include files from the template directory and specify the URL for the files, which can be different from the filename. Another use for the FileList section is to enable you
to include files that are in subdirectories of the Web template, such as files you've placed in the Web's _private or cgi-bin directory. If you do not make specific entries for files in template
subdirectories, the files will not be included in any Webs based on your template.
NOTE
Only valid Web subdirectories can be used. Valid subdirectories for Webs include _private for hidden files, cgi-bin for CGI scripts, and images for images used in the Web.
You enter files in the FileList section one per line in the form filename=URL. When you specify only the filename, the file URL will be the same as the filename. The only exception to this rule is that images with
the .gif, .jpg, and .jpeg extensions are generally stored in a subdirectory called images, which means the URL path to images on most newly
created Webs is images/filename.
CAUTION
When you include the directory structure in the file name, you use the backslash as the directory separator. However, when you include the directory structure in the URL, you use the forward slash as the directory separator.
The following is a sample FileList section that uses the concepts discussed in this section:
[FileList] pageone.htm= pagetwo.htm= pagethree.htm= pagefour.htm= header.htm=_private/header.htm footer.htm=_private/footer.htm images\newpage.gif=images/house.gif images\newtext.gif=images/new.gif
The meta-information section of the parameter file has the identifier [MetaInfo]. Using this optional section, you can specify meta-information parameters for Webs created with your template. The primary use for
meta-information parameters is for configuration variables, yet these parameters can also be used to set variables used by the Substitution WebBot.
To make handling meta-information easier, the parameter names are not case-sensitive. The parameter name WEB_HOST is interpreted the same as the parameter name web_host or Web_Host. All parameter names beginning with the prefix vti_ are reserved for Web administration.
The following is a sample meta-information section for a parameter file:
[MetaInfo] WebMaster=william@tvp.com ContactEMail=info@tvp.com CompanyName=TVP, Inc.
Whenever you create complex Web templates, you will probably want to provide the user with pointers as to how they can best use the Web based on the template. One way to do this is to provide a series of tasks that the user can
perform after creating the new Web. Using the TaskList section of the parameter file, you can assign tasks to the To Do list.
Each task you assign can have six attributes:
As with other parameters, you enter tasks one per line. Each task must be identified by a unique task number, such as Task01 or Task02. Attributes for a task are separated by the vertical bar character (|) and must be entered in the
following form:
TaskNum=TaskName|Priority|CreatedBy|URL|Cookie|Comment
Even if you do not use an attribute, you must account for it. For example, most tasks will not use the Cookie attribute. Here is the form for tasks that do not use the Cookie attribute:
TaskNum=TaskName|Priority|CreatedBy|URL||Comment
The following is a sample TaskList section for a parameter file:
[TaskList] task1=Replace Banner Image|1|Internet Resource Web|_private/logo.htm||replace ¬the temporary image on this page with your banner task2=Customize Home Page|1|Internet Resource Web|index.htm||custominze the ¬headings and text to meet your needs task3=Add Link|1|Internet Resource Web|index.htm|#resources|update the bookmark
The easiest template to create is a page template. You create new templates in the FrontPage Editor by using an existing page as the basis for the template. Start by opening the page you want to use as the basis for your template, and then select Save
As from the File menu. In the Save As dialog box, click the As Template button. This action opens the dialog box shown in Figure 25.3.
As you can see in Figure 25.3, the Save As Template dialog box has three fields: Title, Name, and Description. You use the Title field to enter a title for the template. The FrontPage Editor displays this title in the New Page dialog box. By default,
the template is named after the template the current page is based on. You must change the template name in the Name field to create a new template. In the Description field, enter a description of the template. The template description is visible in the
New Page dialog box when a user clicks on the template title.
Figure 25.3. Creating a new page template with the Save As Template dialog box.
When you use the Save As Template option of the FrontPage Editor, the page template and its parameter file are created automatically. All images, HTML pages, and miscellaneous files associated with the page template are stored in the same directory.
The name of the directory is based on the template name with the .tem extension. After creating a page with the template, users can save the page to the current Web or to a file. If the page is saved to the current Web, the
FrontPage Editor will update the page so that the image links point to the images subdirectory and will place images in this subdirectory.
Although creating page templates with the FrontPage Editor is very easy, sometimes you might want to create your templates by hand. One reason that you might want to do this is to practice with a simple page template before you try to create a more
advanced Web template.
To create a page template by hand, change to the FrontPage base installation directory, which is usually Program Files\Microsoft FrontPage, and then change to the pages directory. In the pages directory, create a subdirectory for your new template with the .tem extension. Keep in mind that template names are based on the name of their related directories, which don't have the .tem extension.
Next, move your template page and associated files to the directory you just created. Finally, create a parameter file with the .inf extension. Parameter files for pages only have an info section, so a sample parameter file
for a page is as follows:
[info] title=Internet Resource Page description=Create a page that has links to useful Internet resources.
Although creating a Web template can be a lot of work, it is also very rewarding. After you create a Web template exactly as you like it, the template is available to anyone authoring Webs on your
server. You could also distribute your custom Web to others. With the FrontPage Developer's Kit installed on your system, you can create Web templates by hand or by using the Web Template Maker.
The easiest way to create Web templates is to use the Web Template Maker utility. This utility was discussed in Chapter 24, "Introducing the FrontPage Developer's Kit." When you use the Web Template Maker, you are basing the Web template
entirely on a Web you created in FrontPage. The utility does the following tasks:
Generating a Web template automatically is a definite time-saver. Keep in mind that before you can generate a template, you must create a Web to base the template on. Additionally, before you use the Web Template Maker, you must perform these steps:
Sometimes after you create a template with the Web Template Maker, you might want to customize the parameter file. Therefore, even if you plan to use the Web Template Maker, you should read the next section on creating Web templates by hand.
When you create a Web template by hand, you have complete control over what is in the Web and how parameters for the Web are defined. To create a Web template, change to the FrontPage base installation directory, which is usually Program Files\Microsoft FrontPage, and then change to the webs directory.
In the webs directory, create a subdirectory for your new template with the .tem extension. Template names are based on the name of their related directory. The structure of files and
subdirectories within the template directory should follow the structure of FrontPage Webs.
The next step is to change to the template directory and create subdirectories for images, CGI scripts, and private files as necessary. The subdirectory for images should be called images. The subdirectory for CGI scripts
should be called cgi-bin. The subdirectory for private or hidden files should begin with the underscore character and is usually called _private. After the directory structure for template files is
in place, you can move files into the appropriate directories.
To find pages you created in FrontPage, change to the base installation directory for Web content, which is, by default, FrontPage Webs\content. Then change to the Web directory containing the file you want to move. Figure
25.4 shows the contents of a Web called custsupp on my file system.
As you can see in the figure, the path to this Web is FrontPage Webs\content\custsupp. Note also that the Web has many subdirectories and that you would not move any files from most of the
subdirectories. In particular, you should only move files in the _private, cgi-bin, images, and _vti_shm directories. Also, you do not want
to move any access control files (#haccess.ctl) that might be in these directories.
Figure 25.4. Locating Web files on your file system.
The main problem you face when moving files created in FrontPage is that pages with WebBots are saved in two forms: source and HTML. The source document for pages with WebBots is the one you want to move into the appropriate template
directory. This document references the WebBots in a usable form. You will use the source document in place of the HTML document that lacks the WebBot information.
TIP
One way to deal with WebBot files is to think of the source files as dynamic files and the HTML files as static files. When you copy files from existing Web directories, you copy all static files to the template directories first. Then you copy the dynamic files from the appropriate _vti_shm directory into the template directories, which effectively overwrites the static files.
You will find the WebBot source documents in a private directory called _vti_shm. When you move the source document to the Web template directory, do not place it in a directory called _vti_shm.
Instead, place the source file in the same directory you would have placed the HTML document the source file is used with.
After you move all the necessary files to template directories, create the parameter file. The key to creating the parameter file is to ensure all references to files in subdirectories are entered in the parameter file appropriately. To demonstrate
this process, suppose you created a template called sample.tem. If you move a file called header.htm to the sample.tem\_private directory, the entry in the parameter
file for the header document should read as follows:
_private\header.htm=_private/header.htm
Parameter files for Web templates should have the following sections:
info
FileList
Parameter files for Web templates can include these sections as well:
MetaInfo
TaskList
The Frames Wizard is used to create frame-enhanced pages from frameset templates. Although frameset templates contain definitions for the layout of frames within a page, they do not contain detailed content as standard HTML pages do. Instead, frameset
pages include default text based on the way you created the frameset. Figure 25.5 shows the default text for the banner page that is created by the Banner with Nest Table of Contents frameset template.
Figure 25.5. Banner page created by the Banner with Nest Table of Contents frameset template.
The first line of text on the banner page is the title of the page:
Banner Frame in New Frameset
The second line of text is the description as entered into the frameset template:
This frame should contain the main navigation links. It causes changes in the Table of Contents frame.
The third line of text is generated automatically to show how the page was created:
This page was generated from a template by the FrontPage Frames Wizard.
The last line of text is entered when you set a target for the page:
The page's default target frame is set to 'contents'. When the user clicks on a link in this frame, the browser will load the referenced page into the target frame. To change the default target, edit the page's properties. To override the default target for a particular link, edit the link's properties.
When you install FrontPage, there are only a few banner templates. These templates are located in the directory associated with the Frames Wizard. To find this directory, change to the FrontPage base installation directory, which is usually Program Files\Microsoft FrontPage, and then change to the pages directory. The pages directory contains a directory called FrameWiz.wiz. This
directory contains the available frameset templates and is where you must store your frameset templates.
If you examine the contents of the FrameWiz.wiz directory, you will find that framesets are not placed in separate directories. Each frameset is defined in a single parameter file that ends with the .frm extension. As with other parameter files used in FrontPage, the frameset parameter file follows the format of Windows INI files.
Frameset parameter files have two types of sections. The first section is always an information section with the identifier [info]. Other sections in the parameter file relate to the frames used in the frameset. Each frame
in the frameset must have a section that describes it. This section is identified by the frame name used in the layout specification for the frameset.
The information section of the frameset file has the identifier [info]. This section specifies information about the frameset including the title, description, and layout. Whenever you start the Frames Wizard and decide to
create a frame-enhanced page based on a template, the Frames Wizard reads the information section for all frameset templates to provide the title, description, and layout information for the page.
The information parameters are designated by the following names:
title | This parameter is the title of the frameset, such as Banner with TOC. |
description | This parameter is a full description of the frameset, such as Creates a frame-enhanced page with a banner and sidebar. |
noframesURL | This parameter assigns an alternate page for browsers that do not support frames. Although your frameset file must contain this parameter, you cannot assign it a value. The Frames Wizard assigns this value if necessary. |
layout | This parameter specifies the layout of the frameset using a special notation described in the section "Defining the Frameset Layout." |
The following code is a sample information section for a frameset template:
[info] title=Banner with Sidebar description=Creates a frame-enhanced document with a banner and sidebar noframesURL= layout=[R(15%,85%)F("banner",[C(20%,80%)F("sidebar","main")])]
The Frames Wizard uses the layout parameter to display a preview graphic with the frame names displayed. After you define the information section, you need to create a section for each frame used by the frameset. Section names must match the frame
names. In the sample information section, three frames are identified: banner, sidebar, and main. The section identifiers for the sample frames would be [banner], [sidebar], and [main].
All sections that describe the individual frames use the following parameters:
title | This parameter is the title of the frame, such as Banner. |
description | This parameter is a full description of the frame, such as A page on which you can place your banner. |
URL | This parameter is the page URL for the frame. Although you must include this parameter, you cannot assign it a value. The Frames Wizard assigns this value dynamically when the page is created. |
marginwidth | This parameter specifies the width of the frame's margin. If you do not specify a value, FrontPage uses the default value of 1. When the frame-enhanced page is created, this value can be overridden. |
marginHeight | This parameter specifies the height of the frame's margin. If you do not specify a value, FrontPage uses the default value of 1. When the frame-enhanced page is created, this value can be overridden. |
scrolling | This parameter specifies whether scroll bars are displayed. If you do not specify a value, FrontPage uses the default value of auto, which means scroll bars are used if necessary. A value of Yes means scroll bars are always displayed. A value of No means scroll bars are never displayed. When the frame-enhanced page is created, this value can be overridden. |
noresize | This parameter turns off the capability to resize the frame. If you do not specify a value, FrontPage uses the default value of False, which means the frame can be resized. |
target | This parameter is the name of the frame to target when a user clicks on a link in this frame. |
The following section defines a frame:
[banner] title=Page Banner description=This frame should contain a banner for the page. It causes ¬changes in the sidebar frame. URL= marginWidth=1 marginHeight=1 scrolling=auto noresize=False target=sidebar
The most difficult frameset task is building the layout notation. As you saw in the previous section, the layout notation can seem confusing. What does the following code tell you?
layout=[R(15%,85%)F("banner",[C(35%,65%)F("contents","main")])]
To understand this notation, consider that frames are organized much like tables, with each window divided into one or more rows and columns. You count the rows for a window as the number of horizontal frame partitions. You count the columns for a
window as the number of vertical frame partitions. The square brackets in the layout notation are used to identify the major sections for rows and columns. The definitions for rows and columns are entered in the way the frames divide the main window.
Using the rows attribute R, you can define the number and size of the rows to display in the browser window. The vertical size of a row is expressed as a percentage of the window size with multiple row assignments separated
commas. The number of rows is equal to the number of items in the comma-separated list, which is enclosed in parentheses. In the example, two rows are defined with the notation R(15%,85%).
Using the columns attribute C, you can define the number and size of the columns to display in the browser window. The size of a column is expressed as a percentage of the window size, with multiple column assignments
separated by commas. The number of columns is equal to the number of items in the comma-separated list, which is enclosed in parentheses. In the example, two columns are defined with the notation C(35%,65%).
NOTE
The size of the browser window can vary substantially, depending on the display mode and sizing being used. By expressing the size of frames as a percentage of the total window size, you are ensuring that all of the window is filled. To ensure your frames work well on other systems, view the frame-enhanced document with different frame-capable browsers and at various display modes.
The values you assign for rows and columns should be between 1 and 100. Always follow the value with a percent sign. If the total of all percentages assigned is greater than 100, the values are scaled down to 100. If the total of all percentages
assigned is less than 100, the relative sizes are scaled up to 100.
The frames attribute, F, always follows a row or column size assignment, and the frames it deals with are enclosed within parentheses. All frame assignments for a row or column are made within the open and close
parentheses. Each frame assignment is separated by a comma. The example includes two frame assignment sets. The first assignment set pertains to the rows: [R(15%,85%)F("frame1","frame2")]. The second assignment set pertains to the columns: [C(35%,65%)F("frame1","frame2")].
Any of the row assignments can be substituted with a new column assignment. Similarly, any column assignment can be substituted with a new row assignment. This is why the column assignment in the example can replace the assignment for the second row's
frame. The following code is a generalized format for the sample frameset layout:
[R(15%,85%)F("r1frame1",[C(35%,65%)F("c1frame1","c2frame2")])]
Now that you know the frameset notation, you can read the layout of the sample frameset:
R(15%,85%)
In this code, the window is divided into two rows. The first row is assigned 15 percent of the screen area. The second row is assigned 85 percent of the screen area.
F("banner",[C(35%,65%)F("contents","main")])
The frame definition states that the first row has only one frame named banner and that the second row has multiple columns. These columns are defined as follows:
C(35%,65%) | The second frame has two columns. The column row is assigned 35 percent of the total area for the frame. The second column is assigned 65 percent of the total area for the frame. |
F("contents","main") | The frame definition states that the first column has a frame called contents and the second column has a frame called main. |
Understanding the frameset layout notation is not an easy thing. The examples in this section should help you better understand the notation and ensure that you can create your own custom framesets.
The way columns and rows of frames are displayed depends on how you make row and column assignments. Each column assignment you make after your row assignments will divide successive rows of frames into columns. Conversely, each row assignment you make
after your column assignments will divide successive columns of frames into rows.
In the example that follows, three rows are defined. The second row is divided by two columns of equal size. The other two rows extend across the entire width of the screen. Figure 25.6 shows how the following sample layout is displayed:
layout=[R(25%,50%,25%)F("main",[C(50%,50%)F("logo1","logo2")],"footer")]
Figure 25.6. Creating frames using the layout notation.
By changing the order of the column and row assignments, you create an entirely different window. The next example has two columns of equal size. The first column is divided by three rows. The second column extends down the full length of the window.
Figure 25.7 shows how this sample layout is displayed:
layout=[C(50%,50%)F([R(25%,50%,25%)F("logo1","main","footer")],"logo2")]
Figure 25.7. A new window created by reversing column and row frames.
Use the examples in this chapter to help you create customized templates. You can create templates for pages, Webs, and framesets. Although page templates are the easiest to create, you can, with practice, create templates for Webs and framesets. After
you create a template, be sure to move it to the appropriate directory.