Understand how the Adobe FrameMaker publishing solution allows you to create an HTML page template to customize your page layout.
The Adobe FrameMaker publishing solution allows you to create an HTML page template to customize your page layout. The page template allows you to add the following components to the published output:
Add a table of contents of the sections within the current topic.
Add a navigation trail of the current topic.
Add headers and footers that contain dynamic content defined by variables in the FrameMaker source.
To try out the examples in this topic, create a FrameMaker document using the standard template. This template uses the paragraph styles and variables used in the samples in this topic.
After you create the HTML page template, you can set the HTML Page template in the Output tab for any of the available outputs (see Output settings).
To create a page template, create a file with a .htt, .htm, or .html extension and open the file in any text editor.
Paste the following HTML content into the text file:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
</body>
</html>
To add dynamic content to a page header, specify the HTML
page template attribute @data-type
as fm_variable
.
To
define a header that uses the FrameMaker user-defined variable Chapter
Title Name
, add the following <p>
element
after the opening <body>
element:
<p data-type="fm_variable">Chapter Title Name</p>
The
HTML page template attribute @data-type
is used
to identify the type of content described by the enclosing element.
In the above example, the <p>
element contains
a FrameMaker variable.
To add a navigation trail to the output, specify the HTML
page template attribute data-type
as breadcrumbs
.
Add
the following after the opening <body>
tag:
<p data-type="breadcrumbs">
<a data-type="home_link" href="#">Home</a>
<span data-type="separator">:></span>
</p>
In the above example, specify the character
(in this case, the greater than symbol written as the HTML entity >
)
that separates each item of the breadcrumb. The other parts of the
definition are required by the publishing solution to create the
breadcrumb.
For details and more options in the breadcrumb, see Define a breadcrumb navigation.
To define a mini TOC, add the following after the breadcrumb described in the previous step:
<div data-type="minitoc">
<p data-type="minitoc-level1">
<span data-type="minitoc-selector">'H1_Heading1'</span>
</p>
<p data-type="minitoc-level2">
<span data-type="minitoc-selector">'H2_Heading2'</span>
</p>
</div>
To define the mini TOC, specify the data-type
attribute as minitoc. For each level, use the attribute @data-type
for
the specific level. Specify the required FrameMaker paragraph style
name to display at the corresponding level of the min TOC.
You can create multi-level mini TOCs of up to 20 levels. For more details, see Define a mini TOC.
To specify the location where the FrameMaker source content
is displayed, use a <div>
element with the @data-type
attribute
set to body
. Add the following after the mini TOC:
<div data-type="body"></div>
To define a footer, add the following before the closing
tag </body>
:
<p data-type="fm_variable">Creation Date (Long)</p>
Creation
Date (Long)
is the name of a variable defined in the document.
For more details, see Define a header and footer.
After you create the page template, you need to include the template in the Outputs tab of the Publish Settings dialog. The publish procedure then creates the mini TOC in the specified output.
To
define a mini TOC, use a <div>
element with
the @data-type
attribute with value minitoc
:
<div data-type="minitoc"></div>
Use
the @data-type-after
attribute to specify the location
of the mini TOC in the published output. For example, the following @data-type-after
definition
specifies that the mini TOC will appear after the first occurrence
of a H1_Heading
paragraph in the published output.
<div data-type="minitoc" data-type-after="H1_Heading1"></div>
Specify
multiple paragraphs in the @data-type-after
attribute
for a mini TOC. The following sample will publish the mini TOC after
the first occurrence of an H1_Heading1
style or H2_Heading2
style, whichever
appears first in the source. Define multiple paragraphs if, for
example, the book contains multiple documents. Where documents can
start with a different heading paragraph style.
<div data-type="minitoc"
data-type-after="H1_Heading1 H2_Heading2">
</div>
To specify data-type-after paragraphs:
Enclose the paragraph(s) in double quotes
Separate multiple paragraphs with commas or spaces
Use the backslash escape character if a paragraph name contains a single of double quote.
If a paragraph and a character style have the same name, fully qualify the style name using p and span, respectively.
<div data-type="minitoc"
data-type-after="p.H1_Heading1 p.H2_Heading2">
</div>
To define an element in the mini TOC,
add a <p>
or <div>
element
with the attribute @data-type
to specify the level
of the element inside the element <div>
.
For example, to define a two-level mini TOC:
<div data-type="minitoc">
<p data-type="minitoc-level1"></p>
<p data-type="minitoc-level2"></p>
</div>
You can create a multi-level mini TOC of up to 20 levels. Also, the levels in the mini TOC must be placed in ascending order.
You can add a caption at the top of the mini
TOC that contains a specific literal value. To add the caption “This
section covers the following:”, add a <p>
or <div>
element
with @data-type
minitoc-caption
at
the top of the mini TOC definition:
<div data-type="minitoc">
<p data-type="minitoc-caption">This section covers the following:</p>
<p data-type="minitoc-level1"></p>
<p data-type="minitoc-level2"></p>
<p data-type="minitoc-level3"></p>
</div>
To specify the paragraph to be displayed
at a level of the mini TOC, add an element with the data-type
attribute
and the value minitoc-selector
:
<div data-type="minitoc">
<p data-type="minitoc-caption">
This section covers the following:
</p>
<p data-type="minitoc-level1">
<span data-type="minitoc-selector">'H2_Heading2'</span>
</p>
<p data-type="minitoc-level2">
<span data-type="minitoc-selector">'H3_Heading3'</span>
</p>
<p data-type="minitoc-level3">
<span data-type="minitoc-selector">'H4_Heading4'</span>
</p>
</div>
You can specify multiple paragraphs at the same level of the mini TOC:
<p data-type="minitoc-level1">
<span data-type="minitoc-selector">'H2_Heading2' 'H3_Heading3'</span>
</p>
If you specify multiple paragraphs at the same level of the mini TOC:
The published content displays the paragraph that was found.
If multiple paragraphs are found, the published content displays the paragraphs at the same level.
To place the FrameMaker topic content
dynamically in the published output, define an element <div>
and
with the attribute @data-type
with the value body
.
For example, to create a template with a header, the body, and then
a footer:
<p data-type="fm_variable">Chapter Title Name</p>
<div data-type="body">[The FrameMaker topic content will be placed here]</div>
<p>Last modified date: <span data-type="fm_variable">Modification Data (Short)</span></p>
The following sample HTML page template defines the following components:
A header at the top of the page body
A breadcrumb trail
A mini TOC
The topic content
A footer after the topic content
To try out this sample, create a document using the Reference Card standard FrameMaker template.
<html>
<body>
<!-- Header using FM variable -->
<p data-type="fm_variable">Chapter Title Name</p>
<!-- Breadcrumb -->
<p data-type="breadcrumbs">Start of Breadcrumb:
<a data-type="home_link" href="#">Home</a>
<span data-type="separator">:></span></p>
<!-- mini TOC -->
<div data-type="minitoc">
<p data-type="minitoc-caption">This section covers the following:</p>
<p data-type="minitoc-level1"><span data-type="minitoc-selector">'H2_Heading2'</span></p>
<p data-type="minitoc-level2"><span data-type="minitoc-selector">'H3_Heading3'</span></p>
<p data-type="minitoc-level3"><span data-type="minitoc-selector">'H4_Heading4'</span></p>
</div>
<!-- Footer using FM variable -->
<p>Last modified date: <span data-type="fm_variable">Modification Date (Short)</span></p>
</body>
</html>