Modèles de page HTML

La solution de publication 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 sous rubriques 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 FrameMaker standard de la carte de référence. 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 sorties).

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

1)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.

2)Collez le contenu HTML suivant dans le fichier texte :

3)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 la balise p suivante après la balise body d’ouverture (<body>)°:

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

important : L’attribut de modèle de page HTML du type de données est utilisé par la solution d’édition pour identifier le type de contenu décrit par la balise englobante. Dans l’exemple ci-dessus, la balise p contient une variable FrameMaker.

Pour plus d’informations, voir Définir un en-tête et un pied de page.

4)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 (<body>) :

Dans l’exemple ci-dessus, spécifiez le caractère (dans ce cas, le symbole supérieur à) qui sépare chaque élément du chemin de navigation. 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.

5)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.

6)Pour spécifier l’emplacement d’affichage du contenu source FrameMaker, utilisez une balise div avec l’attribut data-type sur corps. Ajoutez le code suivant après la mini table des matières :

7)Pour définir un pied de page, ajoutez le code suivant avant la balise de fermeture body (</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.

8)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 défini sur minitoc :

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.

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.

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.

remarque : 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 à l’intérieur de la balise minitoc div.

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

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 une balise avec l’attribut data-type défini sur 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

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

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

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">:></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">:></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 une balise HTML avec l’attribut data-type défini sur 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 une balise div et utilisez l’attribut data-type défini sur 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>

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

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

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

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