Einführung in den Frame-losen Skin-Editor

In jeder Webhilfeausgabe, z. B. responsives HTML5 oder Frame-los, erhalten Sie eine Erfahrung, die jedem Portal eng entspricht und Navigation, Suche und andere Funktionen enthält. Die Ausgabe hat ein Look-and-Feel, das ein Benutzer gemäß Firmen-Branding oder anderen Richtlinien anpassen kann.

Zum Beispiel können Sie die Skin anpassen. Neben der Definition des visuellen Stils legt die Skin auch das Layout fest. Beispielsweise kann das Inhaltsverzeichnis eine Dropdown-Liste anstatt einer Baumstruktur sein.  RoboHelp wird standardmäßig mit verschiedenen Skins bereitgestellt. Mit dem Skin-Editor können Sie jede Skin nach Ihren Bedürfnissen anpassen.

Sie können alle Skins in Ihrem Projekt im Bereich „Skins“ auf der Registerkarte „Ausgabe“ anzeigen.

Skin-Editor
RoboHelp-Skin-Editor

Durch Doppelklick auf eine Skin wird der Skin-Editor geöffnet. Der Skin-Editor des Typs „Responsives HTML5“ unterscheidet sich vom Typ „Frame-los“. 

Die meisten Skins haben zwei Arten von Seiten, die Startseite und die Themenseite. Die Startseite verfügt über ein Hero Image, eine Suchleiste, Inhaltsverzeichniskacheln und andere optionale Inhalte. Die Startseite ist optional und in einigen Skins nicht enthalten. Die Themenseite enthält den eigentlichen Inhalt, die Navigation, die Suche und andere Widgets.

Echtzeitansicht

Der Skin-Editor bietet eine interaktive Echtzeitansicht von Beispielinhalten. Bearbeitungen im Skin-Editor sind sofort in der Vorschau sichtbar. Sie können die Vorschau in der Desktop- oder mobilen Ansicht über die Symbolleiste umschalten. 

Echtzeitansicht
Optionen für die Echtzeitansicht anzeigen

Die Vorschau enthält auch eine hilfreiche Hervorhebung mit einem dicken roten Rand. Wenn Sie eine Klasse im Skin-Editor auswählen, wird dieser Bereich in der Vorschau hervorgehoben. Sie können die Hervorhebung in der Symbolleiste ausschalten.

So passen Sie die Skin an

Die Skin definiert das Ausgabeerlebnis. Die Eingabe stammt aus drei verschiedenen Quellen: 

 Alle Zeichenfolgen stammen aus der sprachspezifischen Beschriftungsdatei im Bereich Ausgabe > Beschriftungen. Die Beschriftungsdatei enthält Zeichenfolgen für alle Vorgaben, die Sie in den entsprechenden Abschnitten bearbeiten.

Anpassen einer Skin
Anpassen einer Skin

Mit den Einstellungen in der Ausgabevorgabe können Sie die Startseite, den Fußzeileninhalt, benutzerdefinierten Inhalt auf der Startseite, die PDF-Downloadschaltfläche usw. anzeigen.

Mit dem Skin-Editor können Sie entscheiden, ob Sie die Skin responsiv machen oder das Cookie-Annahmedialogfeld anzeigen möchten. In diesem Dokument wird die Anpassung im Skin-Editor behandelt. Dabei wird bei Bedarf auf die Ausgabevorgabe und den Abschnitt „Beschriftungen" verwiesen.

Allgemeine Einstellungen

Dieser Abschnitt befasst sich mit einigen allgemeinen Eigenschaften und dem Verhalten der Skin. Der Stil von Startseite und Themenseiten wird in den folgenden Abschnitten behandelt.

Responsive Einstellung

Alle Skins sind responsiv und passen sich basierend auf der Bildschirmauflösung an Desktop- und mobile Ansichten an. Sie können die Bildschirmauflösung steuern, bei der der Modus vom Desktop zur mobilen Ansicht wechseln muss. Sie können den Wert im Feld  Layout > Allgemein > Maximale Mobilbreite festlegen. Sie können die responsive Einstellung unter  Layout > Allgemein > Interaktiv deaktivieren. 

Responsive Einstellung
Festlegen der Bildschirmauflösung und Deaktivieren der responsiven Einstellung

DSGVO-Konformität

Die Datenschutz-Grundverordnung (DSGVO) schreibt vor, dass Services die ausdrückliche Erlaubnis eines Benutzers einholen müssen, bevor sie Daten oder Cookies im lokalen Speicher des Browsers speichern.  

Sie können diese Konformität über die Einstellung „Layout“ > „Allgemein“ > „DSGVO-Konformität“ aktivieren. Einige Funktionen wie Favoriten, Inhaltsverzeichnisstatus und Breadcrumbs funktionieren ohne diese Einwilligung möglicherweise nicht optimal.

DSGVO
Ansicht zur Aktivierung der DSGVO-Konformität

Designeinstellungen

Der Skin-Editor ermöglicht Ihnen die allgemeine Kontrolle über einige Aspekte des Stils. Sie können sie bei Bedarf lokal überschreiben. Definieren Sie die Schriftfamilie mit Layout > Allgemein > Layoutschriftart. Verwenden Sie Layout > Allgemein > Themenfarbe , um die Farbe für Text und Symbole festzulegen.

Designeinstellungen
Festlegen einer Schriftfamilie

Die Änderungen gelten nicht für Symbole und Text, die nicht der Designfarbe folgen. Verwenden Sie Layout > Allgemein > Textfarbe für Suchhervorhebung und Layout > Allgemein > Hintergrundfarbe für Suchhervorhebung, um die Hervorhebungsfarbe der Suchbegriffe und die Hintergrundfarben zu definieren. 

Barrierefreiheit

Alle Skins sind barrierefrei. Sie können eine Bildschirmsprachausgabe, Tastenkombinationen usw. für die Barrierefreiheit verwenden. Beim Navigieren mit der Tastatur wird der Fokusbereich mit einem Rahmen hervorgehoben. 

Sie können die Rahmenfarbe mit der Einstellung Layout > Allgemein > Fokuskonturfarbe steuern.

Benutzerassets

Beim Anpassen der Skin benötigen Sie oft keine zusätzlichen Dateien. Es gibt aber auch einige erweiterte Änderungen, beispielsweise wenn Sie eine benutzerdefinierte Aktion für eine Schaltfläche festlegen und eine JavaScript-Funktion aufrufen müssen. Dann müssen Sie die JavaScript-Datei zur Skin hinzufügen und unter Layout > Benutzerassets die Schaltfläche Asset hinzufügen verwenden. Sie können alle explizit hinzugefügten Assets im Bereich Layout > Benutzerassets verwalten. 

Startseite

Beim Anpassen der Skin benötigen Sie oft keine zusätzlichen Dateien. Es gibt aber auch einige erweiterte Änderungen, beispielsweise wenn Sie eine benutzerdefinierte Aktion für eine Schaltfläche festlegen und eine JavaScript-Funktion aufrufen müssen. Dann müssen Sie die JavaScript-Datei zur Skin hinzufügen und unter Layout > Benutzerassets die Schaltfläche Asset hinzufügen verwenden. Sie können alle explizit hinzugefügten Assets im Bereich Layout > Benutzerassets verwalten.


Die Startseite besteht aus vier Abschnitten. Der obere Bereich enthält das Logo, Links, die Hauptsuchleiste und das Hero Image. Der Kachelbereich enthält die Kacheln gemäß dem Inhaltsverzeichnis. Darauf folgen die benutzerdefinierte Startseite
und die Fußzeilenabschnitte. 

Oberer Abschnitt

Der obere Abschnitt besteht aus verschiedenen Teilen, z. B. Logo, Titel, Kopfzeilenlinks, Filter und Favoriten. Der Abschnitt ähnelt der Themenseite. Sie können die Kopfzeilenlinks auf der Startseite über das Kontrollkästchen Startseite > Kopfzeilenlinks aktivieren. Die folgende Abbildung zeigt Details zur Klassenzuordnung als Hilfe für die Formatierung.

Oberer Abschnitt
Details zum oberen Abschnitt

Element Wert
1 Oberer Abschnitt > container
2 Oberer Abschnitt > logo 
3 Oberer Abschnitt > title
4 Schaltflächen > button-1
5 Oberer Abschnitt > caption 
6 Suchfeld > inner-box 
7 Filter > filter-selected

Suche

Die Suche auf der Startseite funktioniert genauso wie auf der Themenseite. Das Suchfeld verfügt über eine Such- und eine Löschschaltfläche. Die Suchvorschläge und Suchergebnisse werden ähnlich angezeigt. Die folgende Abbildung zeigt Details zur Klassenzuordnung als Hilfe für die Formatierung. 

Suchvorschläge
Ansicht der Suchvorschläge

Element Wert
1 Suchfeld > icon
2 Suchfeld > text-field 
3 Suchfeld > clear-icon
4 Suchergebnisse > close-icon 
5 Suchergebnisse > results-header-label 
6 Suchergebnisse > result-item-title 
7 Suchergebnisse > result-item-summary 
8 Suchergebnisse > result-item-path 

Inhaltsverzeichniskacheln

Die Kacheln auf der Startseite entsprechen den Elementen im ausgewählten Inhaltsverzeichnis für die Ausgabegenerierung. Die Startseite enthält Kacheln für Abschnitte und Seiten. Mit der Option Layout > Startseite > Drilldown-Inhaltsverzeichnis können Sie steuern, ob Kacheln nur für die oberste Ebene oder für jede Ebene im Inhaltsverzeichnis angezeigt werden sollen.

Drilldown-Inhaltsverzeichnis
Ansicht zum Anzeigen jeder Ebene im Inhaltsverzeichnis

Jede Kachel besteht aus drei Teilen: Bild, Beschreibung und Titel. Sie können im Skin-Editor eine Reihe von Bildern definieren, die für die Kacheln verwendet werden sollen. Alternativ können Sie die Option Layout > Startseite > Kacheln des Inhaltsverzeichnisses verwalten  aktivieren, um die Bilder im Inhaltsverzeichnis für jeden Abschnitt und jede Seite zu definieren. Diese Option bietet Ihnen mehr Flexibilität bei der Verwaltung der Kacheln. Wenn Sie eine bestimmte Kachel nicht wünschen, geben Sie das Bild nicht an. Der Titel ist derselbe wie im Inhaltsverzeichnis.

Das Beschreibungsfeld muss mit der Option Layout > Startseite > Kachelbeschreibung aktiviert werden. Der Wert der Beschreibung ergibt sich aus dem, was Sie in den Themeneigenschaften definieren.

Die folgende Abbildung zeigt Details zur Klassenzuordnung als Hilfe für die Formatierung. Beispiel: Sie möchten überhaupt keine Inhaltsverzeichniskacheln auf der Startseite anzeigen. Navigieren Sie in diesem Fall zu Startseite > Inhaltsverzeichniskacheln > container > Layout > Anzeigen, und wählen Sie Keine im Dropdown-Menü aus.

Container für Inhaltsverzeichniskacheln
Containeransicht

Kachelansicht
Ansicht der Inhaltsverzeichniskacheln

Element Wert
1 Inhaltsverzeichniskacheln > container 
2 Inhaltsverzeichniskacheln > tile-box 
3 Inhaltsverzeichniskacheln > image-box
4 Inhaltsverzeichniskacheln > title
5 Inhaltsverzeichniskacheln > description 

Themenbereich

Der Themenbereich ist ein Platzhaltercontainer in Inhaltsverzeichniskacheln, wenn Sie zusätzlichen Inhalt hinzufügen möchten. Manchmal möchten Sie möglicherweise den Bereich „Inhaltsverzeichniskacheln“ ausschalten und nur benutzerdefinierte Inhalte verwenden. Um Ihre Inhalte im Themenbereich anzuzeigen, wählen Sie das HTML-Thema mit dem Inhalt im Feld Layout > Startseite der Ausgabevorgabe aus.

Themenbereich
Anzeigen von Inhalt im Themenbereich

Fußzeile

Um die Fußzeile auf der Startseite anzuzeigen, müssen Sie ein HTML-Thema mit dem Fußzeileninhalt auswählen. Geben Sie das Thema im Feld Layout > Fußzeileninhalt der Ausgabevorgabe an.

Themenseite

Die Themenseite enthält drei Bereiche: Kopfzeile, Textkörper und Fußzeile. Der Kopfzeilenbereich enthält ein Logo, einen Titel, Links auf oberster Ebene und ein Suchfeld. Der Textkörperbereich enthält einen linken, einen mittleren und einen rechten Abschnitt. Der linke Abschnitt enthält die Bereiche „Inhaltsverzeichnis“, „Index“ und „Glossar“. Der mittlere Abschnitt verfügt über einen Symbolleistenbereich und den Themeninhaltsbereich. Im rechten Abschnitt befinden sich die Bereiche „Inhaltsverzeichnis des Themas“, „Favoriten“ und „Dynamische Filter“.

Hinweis:

Die Layouts verschiedener Skins unterscheiden sich. Die Abbildungen in dieser Dokumentation verwenden die Skin „Orange“. Sie sind auch für die anderen Skins relevant. Ebenso unterscheiden sich die Desktop- und die mobile Ansicht. Dieses Dokument behandelt die Desktopansicht.

Kopfzeile

Die Kopfzeile enthält mehrere Abschnitte. Sie können die Stile und das Layout mit den jeweiligen Klassen steuern. Um beispielsweise die Höhe zu vergrößern, bearbeiten Sie das Feld Themenseite > Kopfzeile > container > LAYOUT > Höhe

Kopfzeilenhöhe
Ansicht zum Festlegen der Kopfzeilenhöhe

Kopfzeilenabschnitte
Ansicht der Kopfzeilenabschnitte

Element Wert
1 Kopfzeile > container
2 Kopfzeile > logo-box 
3 Kopfzeile > logo
4 Kopfzeile > title 
5 Kopfzeilenlinks > container
6 Kopfzeilenlinks > list 
7 Kopfzeilenlinks > item
8 Kopfzeilenlinks > icon-000N 
9 Suchfeld > search
10 Suchfeld > search-icon 

Logo

Um ein Logo festzulegen, navigieren Sie zum Feld Themenseite > Kopfzeile > logo > HINTERGRUND > Bildpfad.

Logo
So legen Sie ein Logo fest

Klicken Sie auf die Schaltfläche „Durchsuchen“, um das Bild für das Logo auszuwählen. Eine Kopie des Bildes wird im Skin-Ordner erstellt, wenn Sie das Bild von außen auswählen. Verwenden Sie die Felder „Höhe“ und „Breite“, um die Größe des Bildes zu ändern. 

Hinweis:

Für die Startseite und die Themenseiten muss das Logo separat angegeben werden. Überprüfen Sie auch, ob das Logo in der mobilen Ansicht angemessen angezeigt wird. 

Titel

Der Text für den Titel stammt aus dem Feld Titel in der Ausgabevorgabe. Sie können die Größe, die Schriftart, die Textgröße und andere Attribute über den Skin-Editor steuern. Wählen Sie Themenseite > Kopfzeile > title > SCHRIFT aus, um Schriftfamilie, Schriftgröße und andere Eigenschaften festzulegen. 

Titelfeld
Ansicht für Titelfeld

Wählen Sie Themenseite > Kopfzeile > title > LAYOUT aus, um die Breite zu steuern. Verwenden Sie linken Abstand oder einen linken Rand, um den Abstand zum Logo zu verwalten, usw.

Verwenden Sie Layout > Allgemein, um eine gemeinsame Schriftfamilie und -farbe für die gesamte Skin festzulegen.

Hinweis:

Zeigen Sie eine Vorschau in der mobilen Ansicht an, um zu bestimmen, ob Anpassungen für Mobilgeräte erforderlich sind.

Kopfzeilenlinks

Kopfzeilenlinks werden auf der rechten Seite der Kopfzeile angezeigt. Beim Erstellen einer Skin gibt es keine Kopfzeilenlinks. Sie können die Links im Abschnitt Layout > Kopfzeilenlinks definieren. Führen Sie folgende Schritte durch.

  1. Klicken Sie auf die Schaltfläche Link hinzufügen, um Links zu erstellen.

  2. Links werden als Link1, Link2, ... LinkN erstellt. Sie können sie mit dem Griff auf der linken Seite neu anordnen.

    Kopfzeilenlinks
    Ansicht für Kopfzeilenlinks

  3. Um die Details eines Links anzugeben, wählen Sie ihn in der Dropdown-Liste Link auswählen aus. 

  4. Legen Sie im Abschnitt „ALLGEMEIN“ den Titel, die URL und die QuickInfo für jeden Link fest.

  5. Die ID wird automatisch von RoboHelp zugewiesen und dient dazu, das Symbol für die Links zu definieren. Sie sehen die Verwendung unten. 

Sie können jeden Link auf der Registerkarte Themenseite formatieren. Sie sehen das Layout der Felder oben in der Kopfzeilenabbildung. Verwenden Sie Themenseite > Kopfzeilenlinks > item, um die Links mit Schriftgröße, Textfarbe, Textformatierung usw. zu formatieren. Um das Symbol für einen beliebigen Link festzulegen, wählen Sie Themenseite > Kopfzeilenlinks > icon-000N aus, und führen Sie die folgenden Schritte aus. (Hinweis: N steht für die Symbolnummer, die in Schritt 5 oben definiert wurde.)

Symbol festlegen
Festlegen des Symbols in Kopfzeilenlinks

  1. Legen Sie die Höhe und die Breite in der Gruppe „LAYOUT“ fest.

  2. Wählen Sie ein Hintergrundbild in der Gruppe „HINTERGRUND“ aus.

Hinweis:

In der mobilen Ausgabe sehen diese Links anders aus. Wählen Sie oben eine mobile Ansicht aus, und legen Sie dann die relevanten Elemente aus der Gruppe „Kopfzeilenlinks“ fest. 

Suche

Die Suche hat viele Komponenten und eine komplexe Struktur. Sie können allgemeine Teile wie Symbolfarbe und Schriftfamilie mit den Designeinstellungen auf der Registerkarte Layout ändern. Im folgenden Screenshot mit Beschriftungen sehen Sie jedoch, dass Sie die meisten Komponenten anpassen können.

Suchkomponenten
Ansicht von Suchkomponenten

Element Wert
1 Suchfeld > search-selected
2 Suchfeld > searchbar
3 Suchfeld > search-icon
4 Suchfeld > search-textfield
5 Suchfeld > clear-icon
6 Suchfeld > predictions-box 
7 Suchfeld > prediction-item 
8 Suchergebnisse > results-outer-box 
9 Suchergebnisse > results-inner-box 
10 Suchergebnisse > results-header
11 Suchergebnisse > results-close
12 Suchergebnisse > results-header-label 
13 Suchergebnisse > result-item 
14 Suchergebnisse > result-item-title
15 Suchergebnisse > result-item-summary
16 Suchergebnisse > result-item-path 
17 Suchergebnisse > results-footer 
18 Suchergebnisse > paginator
19 Suchergebnisse > prev-page 
20 Suchergebnisse > paginator-label
21 Suchergebnisse > next-page

Statische Kopf- und Fußzeile

Die Funktion fixiert die Kopf- und Fußzeile auf der Ausgabe, selbst beim Scrollen. Die Kopf- oder Fußzeile ist immer auf dem Bildschirm sichtbar. Wir haben zwei Umschalter in den Abschnitten „Startseite“ und „Themenseite“ im Skin-Editor bereitgestellt.

  1. Klicken Sie auf die Registerkarte Ausgabe.Klicken Sie im linken Bereich unter „Ausgabe“ auf Skins.

  2. Wählen Sie aus der Liste der Skins eine Skin aus, die Sie ändern möchten.

  3. Fügen Sie eine neue rahmenlose Skin hinzu, indem Sie auf das Symbol + in Skins klicken.

  4. Wählen Sie eine Skin aus und klicken Sie auf Fertig.

  5. Sie können statische Kopf- oder Fußzeilen sowohl für Die Startseite als auch für die Themenvorlagenseite aktivieren oder deaktivieren.

    • Um eine statische Fußzeile für die Startseite zu aktivieren, wählen Sie unter Layout die Option Startseite aus. Klicken Sie hier, um die Umschaltfläche für Statische Fußzeile zu aktivieren.
    • Um eine statische Kopf- und Fußzeile für die Themenseite zu aktivieren, wählen Sie unter „Layout“ „Themenseite“ aus. Klicken Sie hier, um die Umschaltfläche für Statische Kopfzeile und Statische Fußzeile zu aktivieren.

    Vorhandene Skin

    Die Optionen „Statische Kopfzeile“ und „Statische Fußzeile“ sind für eine vorhandene Skin standardmäßig deaktiviert. Sie können die Option aktivieren, indem Sie die obigen Schritte ausführen.

    Neue Skin

    Die statische Kopfzeile ist standardmäßig aktiviert und die statische Fußzeile ist standardmäßig deaktiviert.

Textkörper

Der Textkörper befindet sich im mittleren Teil der Themenseite. Der Textkörper besteht aus vier Teilen: Symbolleiste, linker Bereich, Themeninhaltsbereich und rechter Bereich.

Symbolleiste

Jede Skin verfügt über Symbolleistenschaltflächen für verschiedene Benutzeraktionen. Sie finden die Liste im Abschnitt Themenseite Schaltflächen. Sie können Elemente in der Liste umbenennen, neu anordnen und löschen. Klicken Sie auf Schaltfläche hinzufügen, um eine neue Schaltfläche hinzuzufügen. Um die Eigenschaften einer Schaltfläche zu definieren, wählen Sie sie in der Dropdown-Liste Schaltfläche auswählen aus. Sie können die folgenden Eigenschaften angeben.

  • ID: Die ID wird automatisch generiert, um jeder Schaltfläche einen eindeutigen Wert zu verleihen.Themenseite > Abschnitt „Schaltflächen“ verwendet diese ID, um die Einstellungen für eine bestimmte Schaltfläche zu bearbeiten. 
  • Titel: Der Titel wird als QuickInfo der Schaltfläche angezeigt. Die Schaltfläche zeigt nur das Symbol an. Verwenden Sie die Option Layout > Themenseite > Schaltflächenname, um den Namen auf den Schaltflächen anzuzeigen. Der Wert des Namens der Schaltfläche ist mit dem Titel identisch.
  • Statustitel umschalten: Wenn eine Schaltfläche den Status ändert, können Sie einen anderen Titel für den umgeschalteten Status angeben. Beispiel: Schaltfläche Alle einblenden/ausblenden.
  • URL: Geben Sie die URL an, die bei einem Klick auf eine Schaltfläche ausgelöst werden soll. Dabei kann es sich um ein beliebiges lokales Thema, einen Weblink oder einen E-Mail-Link handeln. 
  • JavaScript: Fortgeschrittene Benutzer können ihren JavaScript-Funktionsnamen für verschiedene Statuswerte der Schaltfläche angeben. Benutzerdefinierte JavaScript-Dateien können über den Abschnitt Layout > Benutzerassets an die Skin angehängt werden.

Die folgende Abbildung veranschaulicht alle Klassen für die Symbolleiste. 

Symbolleiste
Symbolleistenansicht

Element Wert
1 Symbolleiste > toolbar-box 
2 Symbolleiste > panel-hide
3 Symbolleiste > panel-show 
4 Schaltflächen > button-0
5 Schaltflächen > button-icon 

Teilen in sozialen Medien

Die Schaltfläche zum Teilen auf der Symbolleiste zeigt die Liste der Optionen an, die beim Klicken angezeigt werden. Jede Skin verfügt über eine vordefinierte Liste von Freigabeoptionen. Verwenden Sie den Abschnitt Layout > Freigabeoptionen, um die Liste anzupassen. Klicken Sie auf die Schaltfläche Freigabeoption hinzufügen, um eine neue Option hinzuzufügen. 

Freigabeoptionen
Ansicht der Freigabeoptionen

Wählen Sie die Option in der Dropdown-Liste Option auswählen aus, um sie zu ändern. Führen Sie für die Anpassung folgende Schritte durch: 

  • ID: Diese ID wird automatisch generiert, um jeder Schaltfläche einen eindeutigen Wert zu verleihen. Sie wird beim Bearbeiten der Einstellungen im Abschnitt Themenseite > Freigabeschaltflächen verwendet. 
  • Titel: Definiert die Beschriftung der Schaltfläche.
  • URL: Der Link, der beim Klicken auf die Schaltfläche ausgelöst wird. Dienstanbieter nutzen feste URLs für Social-Media-Schaltflächen.
  • QuickInfo: Definiert die QuickInfo der Schaltfläche. 

Die folgende Abbildung veranschaulicht alle Klassen für das Freigabe-Widget. 

Freigabe-Widget
Ansicht des Freigabe-Widgets

Element Wert
1 Freigabeschaltflächen > container 
2 Freigabeschaltflächen > list 
3 Freigabeschaltflächen > button
4 Freigabeschaltflächen > button-icon 

Linke Bereiche

Auf der linken Seite befinden sich die Bereiche „Inhaltsverzeichnis“, „Index“ und „Glossar“. Der Bereich „Inhalt“ ist obligatorisch. Index und Glossar sind optional. Sie können die Bereiche „Index“ und „Glossar“ im Abschnitt Layout > Themenseite ein- und ausschalten. Außerdem können Sie den Bereich steuern, der zuerst für Benutzer angezeigt wird. Wenn Sie in der Ausgabevorgabe nicht Index- und Glossarinhalt auswählen, wird der entsprechende Bereich nicht angezeigt.

Die Namen der Bereichsregisterkarten stammen aus Beschriftungen. Wechseln Sie zur Registerkarte „Ausgabe“ der Anwendung, und öffnen Sie den Bereich „Beschriftungen“ in der linken Symbolleiste. Wählen oder erstellen Sie eine Beschriftungsdatei für die gewünschte Sprache. Wenn Sie die Datei zur Bearbeitung öffnen, finden Sie auf der Registerkarte „Frame-los“ alle relevanten Zeichenfolgen für die Ausgabe.

Die folgende Abbildung veranschaulicht alle Klassen zum Formatieren des Inhaltsverzeichnisbereichs.

Inhaltsverzeichnisbereich
Ansicht der Formatierung für den Inhaltsverzeichnisbereich

Element Klasse
1 Linker Bereich > container
2 Linker Bereich > tab-list 
3 Linker Bereich > tab
4 Linker Bereich > selected-tab 
5 Linker Bereich > toc 
6 Linker Bereich > title-level-0 
7 Linker Bereich > collapse-icon
8 Linker Bereich > selected-title
9 Linker Bereich > selected-icon 
10 Linker Bereich > expand-icon
11 Linker Bereich > topic-icon

Die folgende Abbildung veranschaulicht alle Klassen zum Formatieren des Indexbereichs. 

Indexbereich
Ansicht der Formatierung für den Indexbereich

Element Klasse
1 Index > search-box 
2 Index > textfield
3 Index > keyword-level-0
4 Index > selected-keyword

Die folgende Abbildung veranschaulicht alle Klassen zum Formatieren des Glossarbereichs.

Glossarbereich
Ansicht der Formatierung für den Glossarbereich

Element Klasse
1 Glossar > search-clear-icon
2 Glossar > glossary
3 Glossar > definition 

Themenbereich

Der Themenbereich besteht aus drei Teilen:

  • Oben befinden sich Breadcrumbs.
  • Themeninhalte stehen in der Mitte.
  • Unten sehen Sie die Suchabfolge.

Verwenden Sie eine Formatvorlage, um den Themeninhalt zu formatieren. Sie können die Masterseite verwenden, um die Formatvorlage zum Zeitpunkt der Ausgabegenerierung zu überschreiben.

Breadcrumbs oben zeigen die Hierarchie des aktuellen Themas gemäß dem Inhaltsverzeichnis an. Sie können am Anfang eine Beschriftung aufweisen, die als Link zum Standardthema fungieren kann. Der Text dieser Beschriftung stammt aus dem Feld Ausgabe Beschriftungen > (Sprachdatei) > FRAME-LOS BreadcrumbStart in der sprachspezifischen Beschriftungsdatei. Verwenden Sie das Kontrollkästchen Layout > Themenseite > Breadcrumbs-Startseiten-Hyperlink, um die Beschriftung statisch zu machen oder nicht.

Die meisten Skins zeigen am unteren Rand eine Suchabfolge an. Verwenden Sie die Option Layout > Themenseite > Abfolge im rechten Fenster, um sie an den unteren Rand des rechten Bereichs zu verschieben. Einige Skins zeigen sie oben an.

Die folgende Abbildung veranschaulicht alle Klassen zum Formatieren des Themenbereichs.

Themenbereich
Ansicht der Formatierung für den Themenbereich

Element Klasse
1 Breadcrumbs > container 
2 Breadcrumbs > label 
3 Breadcrumbs > breadcrumbs-separator
4 Breadcrumbs > active-topic 
5 Mittlerer Bereich > topic-box 
6 Suchabfolge > container
7 Suchabfolge > prev-box 
8 Suchabfolge > next-box:after 

Rechter Bereich

Der rechte Bereich enthält verschiedene Funktionen wie Mini-Inhaltsverzeichnis, Favoriten, dynamischer Filter und Freigabeoptionen. Er enthält auch eine Symbolleiste mit Schaltflächen und einige Schaltflächen am unteren Rand. Sie können den rechten Bereich ausblenden. Verwenden Sie die Einstellung Layout > Themenseite > Rechter Bereich, um den Bereich auszublenden. Fügen Sie die Schaltflächen des rechten Bereichs der Hauptsymbolleiste hinzu, falls Sie den rechten Bereich ausblenden möchten.

Es gibt drei Schaltflächen oben und zwei unten. Optional können Sie die Navigation durch die Suchabfolge zusammen mit den Schaltflächen mit der Option Layout > Themenseite > Abfolge im rechten Fenster unten anzeigen lassen. 

Schaltflächen und Mini-Inhaltsverzeichnis

Das Mini-Inhaltsverzeichnis oder das Themen-Inhaltsverzeichnis wird standardmäßig im rechten Bereich angezeigt. Verwenden Sie die Einstellung Layout > Mini-Inhaltsverzeichnis, um die Überschriftenebenen zu steuern. Die folgende Abbildung veranschaulicht alle Klassen zum Formatieren der Symbolleiste und des Mini-Inhaltsverzeichnisses.

Symbolleiste und Mini-Inhaltsverzeichnis
Formatieren von Symbolleiste und Mini-Inhaltsverzeichnis

Element Klasse
1 Rechter Bereich > container 
2 Rechter Bereich > fav-button 
3 Rechter Bereich > print-button
4 Rechter Bereich > highlight-remove-button 
5 Mini-Inhaltsverzeichnis > caption
6 Mini-Inhaltsverzeichnis > selected-item
7 Mini-Inhaltsverzeichnis > item
8 Rechter Bereich > pageup-button 
9 Rechter Bereich > fullscreen-button

Favoriten

Benutzer können jedes Thema als Favoriten markieren und die Liste später erneut aufrufen. Die Liste wird auf der rechten Seite angezeigt, wenn der Benutzer in der Hauptsymbolleiste auf die Schaltfläche „Favoriten“ klickt. Benutzer können jeden Favoriten löschen, indem sie auf die Bleistiftschaltfläche klicken, um in den Bearbeitungsmodus zu gelangen, und dann die Änderungen vornehmen. Die folgende Abbildung veranschaulicht alle Klassen zum Formatieren des Favoritenbereichs.

Favoritenbereich
Formatierung für den Favoritenbereich

Element Klasse
1 Favoriten > label
2 Favoriten > edit-button
3 Favoriten > close-button 
4 Favoriten > item 
5 Favoriten > delete-button

Dynamischer Inhaltsfilter

Dynamische Inhaltsfilteroptionen sind nur sichtbar, wenn für Ihre Inhalte ein Filter definiert ist. Diesen können Sie über die Ausgabevorgabe definieren. Die Symbolleiste enthält eine Schaltfläche zum Anzeigen der Filteroptionen im rechten Bereich. Benutzer können auf dieselbe Schaltfläche klicken, um sie auszublenden. Ausgewählte Filter werden oben über dem Themenbereich angezeigt. Der Filtertext stammt aus dem, was Sie im Bereich „Dynamischer Inhaltsfilter“ angegeben haben. Der Rest des Textes stammt aus dem Abschnitt „Frame-los“ der Beschriftungsdatei. 

Die folgende Abbildung veranschaulicht alle Klassen für dynamische Inhaltsfilter.

Dynamischer Inhalt
Ansicht dynamischer Inhaltsfilter

Element Klasse
1 Filter > caption
2 Filter > group-label
3 Filter > resetall
4 Filter > filter-selected 
5 Filter > filter-selected-remove 

Fußzeile

Sie können die Fußzeile für die Startseite und die Themenseiten als beliebiges HTML-Thema definieren. Geben Sie die Datei im Feld Layout > Fußzeileninhalt der Ausgabevorgabe an. Sie können das Feld für den Fußzeilenbereich mit der Klasse Themenseite > Fußzeile > Container formatieren.

Dialogfeld für die Annahme von Cookies

DSGVO steht für Datenschutz-Grundverordnung. Sie ist der Kern der europäischen Gesetzgebung zum digitalen Datenschutz. Die DSGVO und einige andere Vorschriften schreiben vor, dass Benutzer ihre ausdrückliche Einwilligung erteilen, bevor Daten oder Cookies im lokalen Speicher des Browsers gespeichert werden. Mit der Einstellung Layout > Allgemein > DSGVO-Konformität können Sie diese Konformität aktivieren. Dem Benutzer wird beim ersten Besuch ein Cookie-Annahmedialogfeld angezeigt. Dort kann er Cookies akzeptieren oder ablehnen. Der für die Annahme bereitgestellte Standardtext erklärt, warum die Cookies benötigt werden. Sie können den Text über die Beschriftungen anpassen. Die folgende Abbildung veranschaulicht alle Klassen zum Formatieren dieses Dialogfelds.

Annahme von Cookies
Formatieren des Dialogfelds für die Annahme von Cookies

Elemente Klasse
1 Cookie-Dialogfeld > browser-cookies-allowed
2 Cookie-Dialogfeld > allow-body 
3 Cookie-Dialogfeld > reject-button
4 Cookie-Dialogfeld > accept-button 

Erweiterte Bearbeitung

Der Skin-Editor ist in den meisten Anwendungsfällen ausreichend, um die Skin anzupassen. Wenn Sie sich gut damit auskennen und erweiterte Anpassungen vornehmen möchten, sind die folgenden Details hilfreich.

  • Beim Erstellen einer Skin werden nur wenige Dateien in den Projektordner kopiert. Klicken Sie mit der rechten Maustaste auf die Skin, und wählen Sie In Explorer anzeigen aus, um den Ordner zu öffnen. 
  • Die Vorlagendateien homepage.ejs und topicpage.ejs enthalten das Layout der Seite. Sie können diese Dateien wie eine HTML-Datei bearbeiten. Wenn Adobe ein Update veröffentlicht, werden diese Dateien möglicherweise überschrieben.
  • Die Datei layoutDiff.css enthält alle CSS-Klassen zum Ändern des Stils. Alle Änderungen, die im Skin-Editor vorgenommen werden, werden darin gespeichert. Sie können Änderungen direkt in dieser Datei vornehmen, dürfen die Struktur der Datei aber nicht ändern. 

 Adobe

Schneller und einfacher Hilfe erhalten

Neuer Benutzer?

Adobe MAX 2024

Adobe MAX
Die Konferenz für Kreative

14. bis 16. Oktober in Miami Beach und online

Adobe MAX

Die Konferenz für Kreative

14. bis 16. Oktober in Miami Beach und online

Adobe MAX 2024

Adobe MAX
Die Konferenz für Kreative

14. bis 16. Oktober in Miami Beach und online

Adobe MAX

Die Konferenz für Kreative

14. bis 16. Oktober in Miami Beach und online