Modèles de page HTML

Découvrez comment la solution de publication Adobe FrameMaker vous permet de créer un modèle de page HTML pour personnaliser votre mise en page.

Dans ce sujet

Introduction
Créer un modèle de page HTML
Définition d'une mini table des matières
Définir un chemin de navigation navigation
Définir un en-tête et un pied de page
Définir le contenu de l’attribut body
Exemple de modèle de page HTML

Introduction

La solution de publication Adobe FrameMaker vous permet de créer un modèle de page HTML pour personnaliser votre mise en page. Cette fonction vous permet d’ajouter les composants suivants à la sortie de publiée :

Mini-table des matières: Ajout d’une table des matières des sections dans la rubrique sélectionnée.
Chemin de navigation: Ajout d’une piste de navigation de la rubrique actuelle.
En-tête et pied de page: Ajout d’en-têtes et de pieds de page comportant du contenu dynamique défini par des variables dans la source FrameMaker.

Pour tester les exemples de cette rubrique, créez un document FrameMaker à l’aide du modèle standard. Ce modèle est configuré avec les styles et variables de paragraphe utilisés dans les exemples de cette rubrique.

Une fois que vous avez créé le modèle de page HTML, vous pouvez définir le modèle de page HTML dans l’onglet Sortie pour n’importe quelle sortie disponible (voir Paramètres de sortie).

Important: Tous les composants du modèle de page HTML sont facultatifs. Vous pouvez définir un modèle de page avec n’importe quelle combinaison de composants.

Créer un modèle de page HTML

Pour créer un modèle de page, créez un fichier avec l’extension .htt, .htm, ou .html et ouvrez le fichier dans un éditeur de texte.

Collez le contenu HTML suivant dans le fichier texte :

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"> 
<body> 
</body> 
</html>

Pour ajouter du contenu dynamique à un en-tête de page, définissez l’attribut de modèle de page HTML @data-type sur fm_variable.

Pour définir un en-tête qui utilise la variable FrameMaker Nom du titre de chapitre définie par l'utilisateur, ajoutez l’élément <p> suivant après l’élément d’ouverture <body> :
```
<p data-type="fm_variable">Chapter Title Name</p>
```
L’attribut du modèle de page HTML @data-type est utilisé pour identifier le type de contenu décrit par l’élément englobant. Dans l’exemple ci-dessus, l’élément <p> contient une variable FrameMaker.
Pour ajouter une piste de navigation à la sortie, définissez l’attribut du modèle de page HTML data-type sur breadcrumbs.

<Ajoutez l’élément suivant après la balise d’ouverture:>
```
<p data-type="breadcrumbs">
<a data-type="home_link" href="#">Home</a>
<span data-type="separator">:&gt;</span>
</p>
```
Dans l’exemple ci-dessus, spécifiez le caractère (dans ce cas, le symbole supérieur écrit sous la forme de l’entité HTML >) qui sépare chaque élément du fil d’Ariane. Les autres éléments de la définition sont requises par la solution d’édition pour créer le chemin de navigation.

Pour plus de détails et les options disponibles pour le chemin de navigation, voir Définir un chemin de navigation navigation.
Pour définir une mini table des matières, insérez le code suivant après le chemin de navigation indiqué à l’étape précédente :
```
<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>
```
Pour définir la mini table des matières, définissez l’attribut data-type sur minitoc. Pour chaque niveau, utilisez l’attribut @data-type du niveau spécifique. Spécifiez le nom du style de paragraphe FrameMaker requis à afficher au niveau correspondant de la mini-table des matières.

La mini table des matières que vous créez peut comporter jusqu’à 20 niveaux. Pour plus d’informations, voir Définition d'une mini table des matières.
Pour spécifier l’emplacement d’affichage du contenu source FrameMaker, utilisez une balise <div> avec l’attribut @data-type défini sur body. Ajoutez le code suivant après la mini-table des matières :
```
<div data-type="body"></div>
```
Pour définir un pied de page, ajoutez le code suivant avant la balise de fermeture </body> :
```
<p data-type="fm_variable">Creation Date (Long)</p>
```
Date de création (Longue) est le nom d’une variable définie dans le document. Pour plus d’informations, voir Définir un en-tête et un pied de page.
Après avoir créé le modèle de page, vous devez inclure le modèle dans l’onglet Sorties de la boîte de dialogue Paramètres de publication. La procédure de publication crée ensuite la mini table des matières dans la sortie spécifiée.

Important: Tous les composants du modèle de page sont définis dans des balises HTML. Cela signifie que vous pouvez ajouter le style CSS (à l’aide de balises de style ou de classe) aux composants de votre choix.

Définition d'une mini table des matières

Pour définir une mini table des matières, utilisez une balise <div> avec l’attribut @data-type avec la valeur minitoc :

<div data-type="minitoc"></div>

Utilisez l’attribut @data-type-after pour spécifier l’emplacement de la mini table des matières dans la sortie publiée. Par exemple, la définition de l’attribut @data-type-after suivante signifie que la mini table des matières s’affichera après la première occurrence du paragraphe H1_Heading dans la sortie publiée.

<div data-type="minitoc" data-type-after="H1_Heading1"></div>

@Spécifiez plusieurs paragraphes dans l’attribut data-type-after d’une table des matières. Dans l’exemple suivant, la mini-table des matières sera affichée après la première occurrence d’un style H1_Heading1 ou H2_Heading2, quelle que soit la première à apparaître dans la source. Définissez plusieurs paragraphes si le livre contient plusieurs documents, par exemple. Ces documents peuvent commencer avec un style de paragraphe d’intitulé différent.

<div data-type="minitoc"
     data-type-after="H1_Heading1 H2_Heading2">
</div>

Pour spécifier des paragraphes avec l’attribut data-type-after :

Placez le(s) paragraphe(s) entre guillemets doubles
Séparez les paragraphes à l’aide de virgules ou d’espaces
Utilisez le caractère d’échappement barre oblique inversée si le nom du paragraphe contient déjà un guillemet simple ou double.
Si un style de paragraphe et un style de caractère ont le même nom, qualifiez entièrement le nom du style avec les préfixes p et span, respectivement.
```
<div data-type="minitoc"
     data-type-after="p.H1_Heading1 p.H2_Heading2">
</div>
```

Note: L’attribut data-type-after est facultatif. Si vous ne spécifiez pas l’attribut, la mini table des matières s’affiche à l’emplacement de la sortie défini dans le modèle.

Pour définir un élément dans la mini-table des matières, ajoutez la balise <p> ou <div> avec l’attribut @data-type pour spécifier le niveau de l’élément dans l’élément <div>.

Par exemple, pour définir une mini table des matières à deux niveaux :

<div data-type="minitoc">
  <p data-type="minitoc-level1"></p>
  <p data-type="minitoc-level2"></p>
</div>

La mini table des matières que vous créez peut avoir jusqu’à 20 niveaux. Les niveaux dans la mini table des matières doivent être placés par ordre croissant.

Vous pouvez ajouter une légende dans la partie supérieure de la mini table des matières qui contient une valeur littérale spécifique. Pour ajouter la légende « Cette section aborde les sujets suivants : », ajoutez une balise <p> ou <div>@ avec l’attribut data-type défini sur minitoc-caption dans la partie supérieure de la définition de la mini table des matières :

<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>

Pour spécifier le paragraphe à afficher à un niveau spécifique de la mini-table des matières, ajoutez un élément avec l’attribut data-type et la valeur 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>

Vous pouvez spécifier plusieurs paragraphes sur un même niveau dans la mini table des matières :

<p data-type="minitoc-level1">
<span data-type="minitoc-selector">'H2_Heading2' 'H3_Heading3'</span>
</p>

Si vous spécifiez plusieurs paragraphes sur le même niveau dans la mini table des matières :

Le contenu publié affiche le paragraphe qui a été trouvé.
Si plusieurs paragraphes sont détectés, le contenu publié affiche les paragraphes au même niveau.

Important: Ajoutez des styles CSS à n’importe quelle balise HTML utilisée dans la définition de la mini table des matières à l’aide des attributs de style de classe.

Définir un chemin de navigation navigation

Pour définir un chemin de navigation, définissez l’attribut data-type sur breadcrumbs. Exemple :

<p data-type="breadcrumbs"></p>

Vous pouvez ajouter du texte statique à afficher au début du chemin de navigation. Par exemple, pour afficher « Début du chemin de navigation : » :

<p data-type="breadcrumbs">Start of Breadcrumb: </p>

Utilisez l'élément d’ancrage (a) pour spécifier l’emplacement d’origine du chemin de navigation. Vous pouvez spécifier n’importe quel texte statique comme texte de l’ancrage.

<p data-type="breadcrumbs">Start of Breadcrumb: <a data-type="home_link" href="#">Home</a></p>

En outre le texte de l’ancrage, les autres attributs et valeurs doivent être ajoutés comme indiqué ci-dessus. L’éditeur utilise les attributs et les valeurs exactes pour créer le chemin de navigation.

Définissez le caractère de séparation à afficher entre les éléments du chemin de navigation à l’aide de l’attribut data-type défini sur separator. Dans l’exemple suivant, le séparateur est le symbole supérieur à (>).

<p data-type="breadcrumbs">Start of Breadcrumb: <a data-type="home_link" href="#">Home</a>
<span data-type="separator">:&gt;</span></p>

Comme pour le texte du début, vous pouvez ajouter du texte statique à la fin du chemin de navigation. Par exemple, pour afficher « : Fin de chemin de navigation » :

<p data-type="breadcrumbs">Start of Breadcrumb: <a data-type="home_link" href="#">Home</a>
<span data-type="separator">:&gt;</span> :End of Breadcrumb</p>

Définir un en-tête et un pied de page

Utilisez les variables FrameMaker pour définir des en-têtes et des pieds de page dans la sortie HTML.

Pour définir un en-tête ou un pied de page, utilisez un élément HTML avec l’attribut @data-type avec la valeur fm_variable. Par exemple, pour définir un en-tête avec la variable Nom du titre de chapitre :

<p data-type="fm_variable">Chapter Title Name</p>

Vous pouvez également fusionner du texte statique et des variables dans un en-tête ou un pied de page. L’exemple suivant affiche la date de la dernière modification du document en cours.

<p>Last modified date: <span data-type="fm_variable">Modification Date (Short)</span></p>

Définir le contenu de l’attribut body

Pour positionner le contenu de rubrique FrameMaker de façon dynamique dans la sortie publiée, définissez un élément <div> et avec l’attribut @data-type avec la valeur body. Par exemple, pour créer un modèle avec un en-tête, le corps puis un pied de page :

<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>

Exemple de modèle de page HTML

L’exemple suivant de modèle de page HTML défini les composants suivants :

Un en-tête dans la partie supérieure du corps de page
Une piste de navigation
Une mini table des matières
Le contenu de la rubrique
Un pied de page après le contenu de la rubrique

Pour tester cet exemple, créez un document à l’aide du modèle FrameMaker de carte de référence.

<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">:&gt;</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>