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 Vorlage für HTML-Seiten erstellt haben, können Sie auf der Registerkarte „Ausgabe“ die Vorlage für HTML-Seiten für jedes der verfügbaren Ausgabeformate 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

Für die Erstellung einer Seitenvorlage müssen Sie eine Datei mit einer .htt-, .htm- oder .html-Erweiterung erstellen und sie in einem beliebigen Texteditor öffnen.

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 zu einer Kopfzeile hinzuzufügen, müssen Sie das HTML-Seitenvorlagenattribut @data-type als fm_variable angeben.

Um eine Überschrift 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>
```
Das Attribut @data-type für die HTML-Seitenvorlage wird verwendet, um den Inhaltstyp zu identifizieren, der vom einschließenden Element beschrieben wird. In dem vorangegangenen 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 Folgendes nach dem öffnenden <body>-Tag 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 Größer-als-Zeichen >), das die einzelnen 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 Attribut @data-type für die angegebene Ebene. 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.
Verwenden Sie zur Angabe der Position, an welcher der FrameMaker-Quellinhalt angezeigt wird, das Element <div> mit dem Attribut @data-type, das 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 im Dialogfeld „Einstellungen für Veröffentlichungen“ auf der Registerkarte „Ausgaben“ einbeziehen. 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

Verwenden Sie zum Definieren eines Mini-Inhaltsverzeichnisses ein <div>-Element mit dem Attribut @data-type mit dem Wert minitoc:

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

Legen Sie mithilfe des Attributs @data-type-after die Position des Mini-Inhaltsverzeichnisses in der veröffentlichten Ausgabe fest. In der folgenden Definition von @data-type-after wird beispielsweise angegeben, dass das Mini-Inhaltsverzeichnis nach dem ersten Auftreten eines Abschnitts mit H1_Heading in der veröffentlichten Ausgabe angezeigt wird.

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

@Geben Sie mehrere Absätze im Attribut „data-type-after“ 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.

Fügen Sie zum Definieren eines Elements im Mini-Inhaltsverzeichnis das Element <p> oder <div> mit dem Attribut @data-type hinzu, um die Ebene des Elements im Element <div> festzulegen.

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 oben in der Definition des Mini-Inhaltsverzeichnisses ein Element <p> oder <div>@ mit dem data-type-Attribut „mintoc-caption“ 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 vom Typ <div> und mit dem Attribut @data-type sowie dem Wert value. 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>