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
Definieren Breadcrumb-Navigation
Definieren eine Kopf- und Fußzeile
Definieren Inhalt des Haupttexts
Beispiel Vorlage 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 (sieheAusgabeeinstellungen).

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 zu einer Kopfzeile hinzuzufügen, geben Sie den HTML Seitenvorlagenattribut @data-type as fm_variable.

Funktion Definieren eines Headers, der die benutzerdefinierte FrameMaker-Variable verwendet Kapitel TitelnameFolgendes hinzu: <p> Element nach dem Öffnen <body> -Element hinzu:
```
<p data-type="fm_variable">Kapitelname</p>
```
Die HTML - Seitenvorlagenattribut @data-type wird verwendet , um den vom einschließenden Element beschriebenen Inhaltstyp zu identifizieren. Im obigen Beispiel enthält das <p> -Element enthält einer FrameMaker-Variablen.
Um der Ausgabe eine Navigationsleiste hinzuzufügen, geben Sie die HTML an Seitenvorlagenattribut data-type as Breadcrumbs.

Hinzufügen nach dem Öffnen <body> -Tag Folgendes hinzu:
```
<p data-type="breadcrumbs">
<a data-type="home_link" href="#">Start</a>
<span data-type="separator">:></span>
</p>
```
Geben Sie im obigen Beispiel das Zeichen (in diesem Fall das als HTML-Entity geschriebene Symbol "größer als" &gdd;) , das jedes Element des Breadcrumbs trennt. Die anderen Teile der von der Veröffentlichungslösung erforderlich sind, um das Breadcrumb.

Weitere Informationen und Breadcrumb-Optionen: siehe Definieren Breadcrumb-Navigation.
Zum Definieren eines Mini-Inhaltsverzeichnisses fügen Sie nach dem Breadcrumb Folgendes hinzu wie im vorherigen Schritt beschrieben:
```
<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>
```
Geben Sie zum Definieren des Mini-Inhaltsverzeichnisses den Datentyp -Attribut als minitoc an. Verwenden Sie für jede Ebene das spezifische Attribut @data-type für die spezifische Ebene. Angeben des erforderlichen FrameMaker-Absatzstils Name, der auf der entsprechenden Ebene des Mini-Inhaltsverzeichnisses angezeigt werden soll.

Sie können Mini-Inhaltsverzeichnisse mit mehreren Ebenen (bis zu 20 Ebenen) erstellen. Weitere Informationen: siehe Mini-Inhaltsverzeichnis definieren.
So geben Sie den Speicherort des FrameMaker-Quellinhalts an angezeigt wird, verwenden Sie ein <div> -Element, wobei das @data-type beimessen eingestellt auf body. Fügen Sie nach dem Mini-Inhaltsverzeichnis Folgendes hinzu:
```
<div data-type="body"></div>
```
Um eine Fußzeile zu definieren, fügen Sie Folgendes vor dem Schließen hinzu Anhänger </body>Folgendes hinzu:
```
<p data-type="fm_variable">Erstellungsdatum (Lang)</p>
```
Erstellung Datum (Lang) ist der Name einer im Dokument definierten Variable. Weitere Informationen finden Sie unter Definieren eine Kopf- und Fußzeile.
Nachdem Sie die Seitenvorlage erstellt haben, müssen Sie die Vorlage in der Ausgabe “ des Dialogfelds „ Publish Einstellungen . Im Veröffentlichungsprozess wird dann die Datei Mini-Inhaltsverzeichnis in der angegebenen Ausgabe.

Important: Alle Seitenvorlagenkomponenten sind innerhalb von HTML-Tags definiert. Dies bedeutet, dass Sie CSS-Stile (mithilfe von Stil- oder Klassen-Tags) zu oder einer beliebigen Komponente.

Mini-Inhaltsverzeichnis definieren

Funktion Mini-Inhaltsverzeichnis definieren, verwenden Sie ein <div> -Element mit der @data-type Attribut mit Wert Minitoc:

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

Verwendung der @data-type-after , um den Speicherort anzugeben des Mini-Inhaltsverzeichnisses in der veröffentlichten Ausgabe. Beispielsweise gibt die folgende Definition von @data-type-after Definition gibt an, dass das Mini-Inhaltsverzeichnis nach der ersten Instanz angezeigt wird eines H1_Heading in der veröffentlichten Ausgabe.

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

Angeben Mehrere Absätze in der @data-type-after beimessen für ein Mini-Inhaltsverzeichnis. Im folgenden Beispiel wird das Mini-Inhaltsverzeichnis nach dem das erste Auftreten eines H1_Heading1 Stil oder H2_Heading2 Stil, je nachdem wird zuerst in der Quelle angezeigt. Definieren Sie mehrere Absätze, wenn ein Buch mehrere Dokumente enthält. Dokumente können mit einem anderen Ü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 eine einfache Anführungszeichen.
Wenn ein Absatz und ein Zeichenstil denselben Namen haben, Qualifizieren Sie den Stilnamen mit p bzw. span.
```
<div data-type="minitoc"
     data-type-after="p.H1_Heading1 p.H2_Heading2">
</div>
```

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

So definieren Sie ein Element im Mini-Inhaltsverzeichnis: ein <p> - oder <div> Element mit dem Attribut @data-type , um die Stufe anzugeben des Elements im Element <div>anzugeben.

Für Beispiel zum 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 erstellen: bis zu 20 Ebenen. Außerdem müssen die Ebenen im Mini-Inhaltsverzeichnis in aufsteigende Reihenfolge.

Sie können eine Beschriftung oben im Mini hinzufügen. Inhaltsverzeichnis, das einen bestimmten Literalwert enthält. So fügen Sie die Beschriftung "This umfasst Folgendes:", fügen Sie eine <p> - oder <div> Element mit @data-type minitoc-caption bei ganz oben in der Definition des Mini-Inhaltsverzeichnisses:

<div data-type="minitoc">
  <p data-type="minitoc-caption">Dieser Abschnitt behandelt Folgendes:</p>
  <p data-type="minitoc-level1"></p>
  <p data-type="minitoc-level2"></p>
  <p data-type="minitoc-level3"></p>
</div>

So geben Sie den anzuzeigenden Absatz an auf einer Ebene des Mini-Inhaltsverzeichnisses, fügen Sie ein Element mit dem data-type beimessen und der Wert minitoc-selector:

<div data-type="minitoc">
  <p data-type="minitoc-caption">
     In diesem Abschnitt werden folgende Themen behandelt:
  </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 im Dialogfeld " gleiche Ebene des Mini-Inhaltsverzeichnisses:

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

Wenn Sie mehrere Absätze auf der gleiche Ebene des Mini-Inhaltsverzeichnisses:

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

Important: Hinzufügen CSS-Stile für alle HTML-Tags, die in der Definition des Mini-Inhaltsverzeichnisses verwendet werden indem Sie den Stil von Klassenattributen verwenden.

Definieren Breadcrumb-Navigation

Um einen Breadcrumb zu definieren, verwenden Sie den Befehl data-type-Attribut als Breadcrumbs an. Beispiel:

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

Sie Sie können statischen Text hinzufügen, der am Anfang des Breadcrumbs angezeigt wird. Für Wenn Sie beispielsweise "Beginn des Breadcrumb:" anzeigen wollen:

<p data-type="breadcrumbs">Beginn des Breadcrumb: </p>

Verwendung der Anker (a), um den Speicherort anzugeben des Breadcrumb. Sie können jeden statischen Text als Anker-Text angeben.

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

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

Definieren der Trennlinie zwischen den Elementen des Breadcrumbs anzuzeigen, indem Sie der data-type -Attribut als Trennzeichen. Im folgenden Beispiel ist das Trennzeichen das Symbol „größer als“ (>).

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

Like den Text am Anfang einzufügen, können Sie auch einen statischen Text am Ende des Breadcrumb. Wenn Sie beispielsweise “ :Ende des Breadcrumb” anzeigen wollen:

<p data-type="breadcrumbs">Beginn des Breadcrumb: <a data-type="home_link" href="#">Start</a>
<span data-type="separator">:></span> :Ende des Breadcrumb</p>

Definieren eine Kopf- und Fußzeile

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

So definieren Sie eine Kopfzeile oder footer ein HTML-Element mit dem Attribut @data-type mit der Wert fm_variable. Um z. B. ein mit der Kapitelnamenvariable:

<p data-type="fm_variable">Kapitelname</p>

Sie Sie können auch statischen Text und Variablen in einer Kopf- oder Fußzeile kombinieren. Die Das folgende Beispiel zeigt das Datum der letzten Änderung des aktuellen Dokument.

<p>Datum der letzten Änderung: <span data-type="fm_variable">Änderungsdatum (Kurz)</span></p>

Definieren Inhalt des Haupttexts

So platzieren Sie den FrameMaker-Themeninhalt Definieren Sie dynamisch in der veröffentlichten Ausgabe ein Element <div> und mit dem Attribut @data-type mit dem Wert body. Wenn Sie beispielsweise eine Vorlage mit einer Kopfzeile erstellen möchten, wird der Haupttext und eine Fußzeile:

<p data-type="fm_variable">Kapitelname</p> 
<div data-type="body">[Der FrameMaker-Themeninhalt wird hier platziert]</div> 
<p>Datum der letzten Änderung: <span data-type="fm_variable">Änderungsdaten (Kurz)</span></p>

Beispiel Vorlage für HTML-Seite

Die folgende Beispiel-Vorlage für HTML-Seiten definiert die folgenden Komponenten:

Eine Kopfzeile am Seitenanfang
Breadcrumb-Navigationsleiste
Ein Mini-Inhaltsverzeichnis
Themeninhalt
Fußzeile nach dem Themeninhalt

So probieren Sie aus In diesem Beispiel erstellen Sie ein Dokument mit dem Standard für die Referenzkarte. FrameMaker-Vorlage.

<html> 
<body> 
<!— Kopfzeile mit FM-Variable —> 
<p data-type="fm_variable">Kapitelname</p> 
<!— Breadcrumb —> 
<p data-type="breadcrumbs">Beginn des Breadcrumb:
<a data-type="home_link" href="#">Start</a>
<span data-type="separator">:></span></p>
<!— Mini-Inhaltsverzeichnis —>
<div data-type="minitoc">
  <p data-type="minitoc-caption">Dieser Abschnitt behandelt Folgendes:</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> 
<!— Fußzeile mit FM-Variable —> 
<p>Datum der letzten Änderung: <span data-type="fm_variable">Änderungsdatum (Kurz)</span></p> 
</body> 
</html>