Vorlagen für HTML-Seite

Erfahren Sie, wie Sie mit der Lösung für die Veröffentlichung in Adobe FrameMaker eine HTML-Seitenvorlage erstellen können, um Ihr Seitenlayout anzupassen.

In diesem Thema

Einführung
Vorlage für eine HTML-Seite erstellen
Mini-Inhaltsverzeichnis definieren
Breadcrumb definieren Navigation
Kopf- und Fußzeilen definieren
Inhalt des Haupttexts definieren
Beispielvorlage für HTML-Seite

Einführung

Mit der Lösung für die Veröffentlichung in Adobe FrameMaker können Sie eine HTML-Seitenvorlage erstellen, um Ihr Seitenlayout anzupassen. Mit der Seitenvorlage können Sie die folgenden Komponenten zur Veröffentlichungsausgabe hinzufügen.

Mini-Inhaltsverzeichnis: Fügen Sie ein Inhaltsverzeichnis der Abschnitte innerhalb des aktuellen Themas hinzu.
Breadcrumb: Fügen Sie eine Navigationsleiste des aktuellen Themas hinzu.
Kopf- und Fußzeile: Fügen Sie Kopf- und Fußzeile mit dynamischen Inhalten hinzu, die durch Variablen in der FrameMaker-Quelle definiert sind.

Zum Ausprobieren dieser Beispiele können Sie ein FrameMaker-Dokument mithilfe der standardmäßigen Vorlage erstellen. Diese Vorlage verwendet die Absatzstile- und -variablen, die in den Beispielen in diesem Thema verwendet werden.

Nachdem Sie die HTML-Seitenvorlage erstellt haben, können Sie die HTML-Seitenvorlage in der Registerkarte „ Ausgabe “ für alle verfügbaren Ausgaben festlegen (siehe Ausgabeeinstellungen).

Important: Alle Komponenten in der Vorlage für die HTML-Seite sind optional. Sie können eine Seitenvorlage mit einer beliebigen Komponentenkombination definieren.

Vorlage für eine HTML-Seite erstellen

Um eine Seitenvorlage zu erstellen, erstellen Sie eine Datei mit .htt-, .htm- oder .html -Erweiterung und öffnen Sie die Datei in einem beliebigen Texteditor.

Fügen Sie den folgenden HTML-Inhalt in die Textdatei ein:

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

Um dynamischen Inhalt einer Kopfzeile hinzuzufügen, geben Sie das HTML-Seitenvorlagenattribut „ @data-type “ als fm_variable an.

Um eine Kopfzeile zu definieren, die die benutzerdefinierte FrameMaker-Variable Kapitelname verwendet, fügen Sie das folgende <p> -Element nach dem öffnenden <body> -Element hinzu:
```
<p data-type="fm_variable">Chapter Title Name</p>
```
Mit dem HTML-Seitenvorlagenattribut @data-type wird der Inhaltstyp identifiziert, der vom einschließenden Element beschrieben wird. Im obigen Beispiel enthält das <p> -Element eine FrameMaker-Variable.
Um der Ausgabe eine Navigationsleiste hinzuzufügen, geben Sie das Attribut für die Vorlage für die HTML-Seite data-type als breadcrumbs an.

Fügen Sie nach dem öffnenden <body> -Tag Folgendes hinzu:
```
<p data-type="breadcrumbs">
<a data-type="home_link" href="#">Home</a>
<span data-type="separator">:&gt;</span>
</p>
```
Geben Sie im obigen Beispiel das Zeichen an (in diesem Fall das als HTML-Entität geschriebene Symbol „größer als“ &gdd;), das die Elemente des Breadcrumbs voneinander trennt. Die äußeren Teile der Definition sind für die Veröffentlichungslösung erforderlich, damit Breadcrumbs erstellt werden können.

Weitere Informationen und Breadcrumb-Optionen finden Sie unter Breadcrumb definieren Navigation.
Zum Definieren eines Mini-Inhaltsverzeichnisses fügen Sie nach dem Breadcrumb (wie im vorherigen Schritt beschrieben) Folgendes hinzu:
```
<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>
```
Beim Definieren des Mini-Inhaltsverzeichnisses müssen Sie als Attribut für den Datentyp „minitoc“ angeben. Verwenden Sie für jede Ebene das spezifische Attribut @data-type . Geben Sie den erforderlichen FrameMaker-Absatzstilnamen an, der auf der entsprechenden Ebene des Mini-TOC angezeigt werden soll.

Sie können Mini-Inhaltsverzeichnisse mit mehreren Ebenen (bis zu 20 Ebenen) erstellen. Weitere Informationen finden Sie unter Mini-Inhaltsverzeichnis definieren.
Um den Speicherort anzugeben, an dem der FrameMaker-Quellinhalt angezeigt wird, verwenden Sie das <div> -Element, wobei das @data-type -Attribut auf body festgelegt ist. Fügen Sie nach dem Mini-Inhaltsverzeichnis Folgendes hinzu:
```
<div data-type="body"></div>
```
Um eine Fußzeile zu definieren, fügen Sie vor dem schließenden Tag </body>Folgendes hinzu:
```
<p data-type="fm_variable">Creation Date (Long)</p>
```
Erstellungsdatum(lang) ist der Name einer im Dokument definierten Variable. Weitere Informationen finden Sie unter Kopf- und Fußzeilen definieren.
Nachdem Sie die Seitenvorlage erstellt haben, müssen Sie die Vorlage in der Registerkarte „ Ausgabe “ des Dialogfelds „ Einstellungen für Veröffentlichungen “ einfügen. Im Veröffentlichungsprozess wird dann ein Mini-Inhaltsverzeichnis in der angegebenen Ausgabe erstellt.

Important: Alle Komponenten für die Seitenvorlage sind innerhalb von HTML-Tags definiert. Das heißt, dass Sie jeder beliebigen Komponente CSS-Stile (mithilfe von Stil- oder Klassen-Tags) hinzufügen können.

Mini-Inhaltsverzeichnis definieren

Um ein Mini-Inhaltsverzeichnis zu definieren, verwenden Sie ein <div> -Element, wobei das @data-type -Attribut mit dem Wert minitoc:

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

Geben Sie mit dem @data-type-after -Attribut die Position des Mini-Inhaltsverzeichnisses in der veröffentlichten Ausgabe an. Beispielsweise gibt die folgende Definition von @data-type-after an, dass das Mini-Inhaltsverzeichnis nach der ersten Instanz eines H1_Heading-Absatzes in der veröffentlichten Ausgabe angezeigt wird.

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

Geben Sie mehrere Absätze im @data-type-after -Attribut für ein Mini-Inhaltsverzeichnis an. Im folgenden Beispiel wird das Mini-Inhaltsverzeichnis nach der ersten Instanz eines Stils H1_Heading1 oder H2_Heading2 veröffentlicht, je nachdem, welcher zuerst in der Quelle erscheint. Definieren Sie mehrere Absätze, wenn das Buch beispielsweise mehrere Dokumente beinhaltet. Dokumente können mit einem unterschiedlichen Überschriftenabsatzstil beginnen.

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

Definieren eines Absatzes „data-type-after“:

Setzen Sie Abschnitte in doppelte Anführungszeichen
Trennen Sie mehrere Absätze durch Kommas oder Leerzeichen
Verwenden Sie das Zeichen „Umgekehrter Schrägstrich“ und das Escapezeichen, wenn ein Absatzname einzelne oder doppelte Anführungszeichen beinhaltet.
Wenn ein Absatz und ein Zeichenstil denselben Namen haben, ändern Sie den Stilnamen mithilfe von p und „span“.
```
<div data-type="minitoc"
     data-type-after="p.H1_Heading1 p.H2_Heading2">
</div>
```

Note: Das Attribut „data-type-after“ ist optional. Wenn Sie das Attribut nicht angeben, wird das Mini-Inhaltsverzeichnis an der Stelle in der Ausgabe angezeigt, an der es in der Vorlage definiert ist.

Um ein Element im Mini-Inhaltsverzeichnis zu definieren, fügen Sie ein <p> - oder <div> -Element mit dem @data-type -Attribut hinzu, um die Ebene des Elements innerhalb des Elements <div>anzugeben.

Beispiel: Definieren eines Mini-Inhaltsverzeichnisses mit zwei Ebenen:

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

Sie können ein Mini-Inhaltsverzeichnis mit mehreren Ebenen (bis zu 20 Ebenen) erstellen. Die Ebenen im Mini-Inhaltsverzeichnis müssen in aufsteigender Reihenfolge platziert werden.

Sie können eine Beschriftung oben im Mini-Inhaltsverzeichnis hinzufügen, die einen bestimmten Literalwert enthält. Um die Beschriftung „Dieser Abschnitt behandelt Folgendes:“ hinzuzufügen, fügen Sie ein <p> - oder <div> -Element mit @data-type minitoc-caption oben in der Mini-Inhaltsverzeichnis-Definition hinzu:

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

Um anzugeben, dass der Absatz auf einer Ebene des Mini-Inhaltsverzeichnisses angezeigt werden soll, fügen Sie ein Element mit dem Attribut data-type und dem Wert minitoc-selector hinzu:

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

Sie können mehrere Absätze auf derselben Ebene des Mini-Inhaltsverzeichnisses angeben:

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

Wenn Sie mehrere Absätze auf derselben Ebene des Mini-Inhaltsverzeichnisses angeben:

Der veröffentlichte Inhalt zeigt den gefundenen Absatz an.
Wenn mehrere Absätze gefunden werden, zeigt der veröffentlichte Inhalt die Absätze auf derselben Ebene an.

Important: Fügen Sie den HTML-Tags, die in der Definition des Mini-Inhaltsverzeichnisses verwendet werden, CSS-Stile hinzu, indem Sie den Stil der Klassenattribute verwenden.

Breadcrumb definieren Navigation

Um einen Breadcrumb zu definieren, verwenden Sie das Attribut „data-type“ als Breadcrumbs. Beispiel:

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

Sie können statischen Text hinzufügen, der am Beginn des Breadcrumb angezeigt wird. Wenn Sie beispielsweise “Beginn des Breadcrumb: ” anzeigen wollen:

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

Geben Sie mit dem Ankerelement (a) den Speicherort des Breadcrumb an. Sie können jeden statischen Text als Anker-Text angeben.

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

Außer dem Text des Ankers müssen die anderen Attribute und Werte, wie oben definiert, hinzugefügt werden. Der „Publisher“ verwendet die exakten Attribute und Werte, um ein Breadcrumb zu erstellen.

Definieren Sie das Trennzeichen, das zwischen den Elementen der Breadcrumbs angezeigt werden soll. Verwenden Sie dafür das Attribut data-type als separator. Im folgenden Beispiel ist das Trennzeichen das Symbol „größer als“ (>).

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

Sie können auch einen statischen Text am Ende des Breadcrumb hinzufügen. Wenn Sie beispielsweise “ :Ende des Breadcrumb” anzeigen wollen:

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

Kopf- und Fußzeilen definieren

Verwenden Sie FrameMaker-Variablen zum Definieren von Kopf- und Fußzeilen in der HTML-Ausgabe.

Um eine Kopf- oder Fußzeile zu definieren, verwenden Sie ein HTML-Element mit dem Attribut @data-type mit dem Wert fm_variable. Beispiel: Definieren einer Kopfzeile mit der Kapitelnamenvariable:

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

Sie können auch statischen Text und Variablen in einer Kopf-/Fußzeile kombinieren. Im folgenden Beispiel wird das Datum der letzten Änderung des aktuellen Dokuments angezeigt.

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

Inhalt des Haupttexts definieren

Um den FrameMaker-Themeninhalt dynamisch in der veröffentlichten Ausgabe zu platzieren, definieren Sie ein Element <div> mit dem Attribut @data-type mit dem Wert body. Erstellen einer Vorlage mit einer Kopfzeile, einem Haupttext und einer Fußzeile:

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

Beispielvorlage für HTML-Seite

Die folgende Beispielvorlage für HTML-Seite definiert folgende Komponenten:

Kopfzeile oben im Haupttext der Seite
Breadcrumb-Navigationsleiste
Ein Mini-Inhaltsverzeichnis
Themeninhalt
Fußzeile nach dem Themeninhalt

Um dieses Beispiel auszuprobieren, erstellen Sie ein Dokument mithilfe der standardmäßigen FrameMaker-Vorlage für die Referenzkarte.

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