Dieser Artikel enthält Links zu den neuesten und archivierten Versionen von RoboHelp-Bildschirm-Layouts und Profilen. Sie können diese Bildschirm-Layouts und Profile herunterladen, in Ihrem RoboHelp-Projekt verwenden und Responsive HTML- oder MultiScreen HTML5-Ausgabe generieren.

Laden Sie die Responsive-Bildschirmlayout aus der Liste unten herunter, ändern Sie die Dateinamenerweiterung von .zip zu .slz und importieren Sie diese dann in Ihr Projekt. Weitere Kontextinformationen finden Sie unter Bildschirmlayouts im RoboHelp Benutzerhandbuch.

Das Responsive Layout gibt jedem Gerät automatisch ein optimiertes Bild. Mit dem Responsive Layout können Sie Ihren Hilfeinhalt auf allen Geräten wie Desktop, Tablett oder Mobiltelefon gleichzeitig verwenden.

Benutzerdefinierte Layouts

Hinweis:

Um Layouts anzupassen, müssen Sie SCSS-, CSS- und JavaScript-Technologien verstehen. SCSS ist eine Erweiterung von CSS, mit der Sie Variablen, Mixins, verschachtelte Regeln und andere einfache Programmiergrundlagen verwenden können, um ein CSS zu erstellen.

Sie können ein Responsive-Layout auf zwei Arten anpassen:

  • Passen Sie das Aussehen der Ausgabe mithilfe von Stylesheets an
  • Passen Sie das Verhalten, wie z. B. Bearbeiten der Suche auf eine bestimmte Art von JavaScript an

In den folgenden Abschnitten werden diese beiden Methoden der Anpassung des Layouts erläutert.

Anpassung von Stylesheets

  1. Laden Sie den Inhalt der Datei scss-files.zip herunter.

    Hinweis:

    Die Datei scss-files.zip enthält die .scss-Dateien für azurblaue und dunkelgraue Layouts. Außerdem finden Sie andere Konfigurationsdateien, die von diesen Layouts verwendet werden, z. B. Layout-Konfigurationen von rechts nach links.

  2. Ändern Sie die.scss-Datei des Layouts, das Sie verwenden möchten.

    Hinweis:

    Wenn Sie beispielsweise das Azurblau-Layout ändern möchten, ändern Sie die layout.scss-Datei, die im Ordner scss-files\scss\Azure_Blue verfügbar ist.

  3. Verwenden Sie einen beliebigen.scss-Dateicompiler, um eine CSS-Datei aus der aktualisierten .scss-Datei zu generieren.

    Hinweis:

    Die CSS-Dateien, die mit RoboHelp-Layouts gebündelt werden, wurden mit einem Drittanbieter-Werkzeug namens Koala kompiliert. Sie können entweder Koala oder ein anderes Werkzeug verwenden, um die .scss-Datei zu kompilieren.  

    Hinweis:

    Wenn Sie die RTL CSS generieren möchten, öffnen Sie diescss-files\scss\_rtl.scss-Datei in einem Texteditor. Setzen Sie$if-rtl auf true, benennen Sie dann die erstelltelayout.css in layout_rtl.css um.

  4. Extrahieren Sie den Inhalt der Layout-Zip-Datei (Azure_Blue.zip oder Charcoal_Grey.zip) und ersetzen Sie ihn durch dielayout.css-Datei in der Zip mit der aktualisierten .css-Datei, die Sie in Schritt 3 erstellt haben.  

    Hinweis:

    Die layout.css-Datei ist unter dem Stammordner der Layout-Zip-Datei verfügbar. Beispiel: Für das dunkelgraue Layout ist der Speicherort der CSS-Dateiscss-files\scss\Charcoal_Grey\layout.css.

  5. Erstellen Sie die ZIP-Datei mit der aktualisiertenlayout.css neu.

  6. Benennen Sie die ZIP-Datei in.slz und importieren Sie sie erneut in das Projekt.

JavaScript-Anpassung

Sie können das Verhalten bestimmter Ereignisse in Ihrem Layout auch ändern, indem Sie die zugehörigen JavaScript-Dateien anpassen. Wenn Sie beispielsweise einen Fehler, der mit JavaScript zu tun hat, sehen, können Sie den JavaScript-Code ändern, um das Problem zu beheben.  

Führen Sie zur Anpassung des Layouts mithilfe von JavaScripts folgende Schritte aus:

  1. Laden Sie den Inhalt der Datei scss-files.zip -Datei herunter und extrahieren Sie ihn.

    Hinweis:

    Die ZIP-Datei enthält vier Dateien: common.js, layout.js, rh.js und topic.js. Jede dieser JavaScript-Dateien enthält Code, der das Verhalten der verschiedenen Komponenten in Ihrem Layout steuert.

  2. Ändern Sie die .js-Dateien gemäß Ihren Anforderungen.

  3. Benennen Sie die geänderte Datei in<Dateiname>.min.js um. Benennen Sie zum Beispiel diecommon.js-Datei in common.min.jsum.

    Hinweis:

    Anstatt die.js-Dateien manuell in.min.js umzubenennen,, wird empfohlen, ein Minimierungswerkzeug (wie z. B.JavaScript minifier) zu verwenden, um die aktualisierten.js-Dateien zu aktualisieren.

  4. Ersetzen Sie die JavaScript-Dateien in Ihrem vorhandenen Projektordner (Azurblau oder Dunkelgrau) durch die aktualisierten JavaScript-Dateien. Der Speicherort zum Speichern der aktualisierten JavaScript-Dateien lautet:

    <Projektordner>\template\scripts

In diesem Abschnitt werden die Responsive HTML5-Layouts, die Sie in Ihrem RoboHelp 11-Projekte verwenden können, aufgeführt.  

Theme_1 Standard

Das Responsive Layout gibt jedem Gerät automatisch ein optimiertes Bild. Mit dem Responsive Layout können Sie alle Geräten gleichzeitig verwenden.

Herunterladen

Design eins

Theme 2_Government layout

Ein formal klassisches Format mit dunklen meergrünen und grauen Akzenten für Banner und Überschriften.

Herunterladen

Design zwei

Theme_3 Black

Ein formal klassisches Format mit schwarzen Akzenten für Banner und Überschriften.

Herunterladen

Design 3

In diesem Abschnitt werden die Responsive HTML5-Layouts, die Sie in Ihrem RoboHelp (2015 release) oder 11-Projekte verwenden können, aufgeführt.  

Desktop-Layouts

  • Desktop-Layout: Ein grau-brauner Stil kann einfach navigiert werden, mit dem Inhaltsverzeichnis, Index und Glossar auf der linken Seite. Dieses Layout für den Desktop ist Teil einer Familie, die auch gebrauchsfertige Layouts für folgende Bildschirme beinhaltet: iPhone, iPad, Android-Telefon, Tablet und Kindle Fire.

Herunterladen

Desktop-Bildschirm-Layout
Desktop-Bildschirm-Layout

  • Katalog: Tiefe Türkisbanner und Schlagschatten-Bedienfelder für Produkte und Dienste. Ungewöhnliche Anzeige des Inhaltsverzeichnisses, des Index und des Glossars, wird linksseitig angezeigt. Es kann mühelos ausgeblendet werden, wenn der Benutzer mehr Anzeigefläche haben möchte.

Herunterladen

Bildschirm-Layout für Desktop-Katalog
Bildschirm-Layout für Desktop-Katalog

  • Katalog mit Homepage:Tiefe Türkisbanner und Schlagschatten-Bedienfelder für Produkte und Dienste. Ungewöhnliche Anzeige des Inhaltsverzeichnisses, des Index und des Glossars, wird linksseitig angezeigt. Es kann mühelos ausgeblendet werden, wenn der Benutzer mehr Anzeigefläche haben möchte.

Herunterladen

Bildschirm-Layout für Desktop-Katalog mit Startseite
Bildschirm-Layout für Desktop-Katalog mit Startseite

  • Regierung: Ein formal klassisches Format mit dunklen meergrünen und grauen Akzenten für Banner und Überschriften.

Herunterladen

Bildschirmlayout für Regierung
Bildschirmlayout für Regierung

  • Regierung mit Startseite: Ein formal klassisches Format mit dunklen meergrünen und grauen Akzenten für Banner und Überschriften. Die Startseite enthält Platzhalter für neue Elemente, die Sie für Ihren eigenen Text anpassen können.

Herunterladen

Bildschirm-Layout für Regierung mit Startseite
Bildschirm-Layout für Regierung mit Startseite

  • Wissen: Weiche hellbraune Hintergrundfarben mit hellgrauen Symbolen und Akzenten. Verwendet ein horizontales Inhaltsverzeichnis, einen Index und ein Glossar, die sich auf der linken Seite befinden. Müheloser Zugriff auf „Suche“.

Herunterladen

Bildschirm-Layout für Wissen
Bildschirm-Layout für Wissen

  • Wissen mit Startseite: Weiche hellbraune Hintergrundfarben mit hellgrauen Symbolen und Akzenten. Verwendet ein horizontales Inhaltsverzeichnis, einen Index und ein Glossar, die sich auf der linken Seite befinden. Müheloser Zugriff auf „Suche“.

Herunterladen

Bildschirm-Layout für Wissen mit Startseite
Bildschirm-Layout für Wissen mit Startseite

  • Sozial: Ein farbiges soziales Layout mit Vorgabe-Code für Echtzeit-Facebook-Likes und Twitter-Follower. Es verwendet ein horizontales Navigations-Bedienfeld mit Akkordeon-Stil für das Inhaltsverzeichnis, den Index und das Glossar. Dieses Layout hat separate Seiten für das Thema und die Suchergebnisse.

Herunterladen

Bildschirm-Layout für sozial
Bildschirm-Layout für sozial

  • Sozial mit Startseite: Ein farbiges soziales Layout mit Vorgabe-Code für Echtzeit-Facebook-Likes und Twitter-Follower. Es verwendet ein horizontales Navigations-Bedienfeld mit Akkordeon-Stil für das Inhaltsverzeichnis, den Index und das Glossar. Dieses Layout hat separate Seiten für das Thema und die Suchergebnisse.

Herunterladen

Bildschirm-Layout für sozial mit Startseite
Bildschirm-Layout für sozial mit Startseite

  • Pharmazeutisch: Laborgeräte bieten ein modernes Motiv für dieses klassische Thema in Lavendelfarbtönen. Dieses Design ist Teil einer Familie von bereits vorbereiteten Layouts, die auch iPhone pharmazeutisch und iPad pharmazeutisch enthalten. Sie befinden sich in der Galerie. Sie können die Bildschirmgröße an Ihr Gerät anpassen.

Herunterladen

Bildschirm-Layout für pharmazeutisch
Bildschirm-Layout für pharmazeutisch

  • Pharmazeutisch mit Startseite: Laborgeräte bieten ein modernes Motiv für dieses klassische Thema in Lavendelfarbtönen. Die Startseite bietet Platzhalter für Ihre neuen Produkte oder Dienste in einer benutzerfreundlichen Einstellung. Dieses Layout ist Teil einer Familie von bereits vorbereiteten Layouts, die auch iPhone pharmazeutisch und iPad pharmazeutisch enthalten. Sie können die Bildschirmgröße an Ihr Gerät anpassen.
Bildschirm-Layout für pharmazeutisch mit Startseite
Bildschirm-Layout für pharmazeutisch mit Startseite

Smartphone-Layouts

  • iPhone: Ein hellblaues und graues Design, das hell ist und in dem leicht navigiert werden kann mit Inhaltsverzeichnis, Index und Glossar und immer verfügbarer Suche. Dieses Layout für iPhone ist Teil einer Familie, die auch gebrauchsfertige Layouts für folgende Bildschirme beinhaltet: Desktop, iPhone, iPad, Android-Telefon, Tablet und Kindle Fire.

Herunterladen

Bildschirmlayout für iPhone
Bildschirmlayout für iPhone

  • Android: Ein blaugrünes und schwarzes Farbschema, so vorkonfiguriert, dass es auf Android-Telefone mit gängigen Größen angezeigt werden kann. Dieses Layout ist Teil einer Familie, die auch gebrauchsfertige Layouts für folgende Bildschirme beinhaltet: Desktop, iPhone, iPad, Android-Tablet und Kindle Fire.

Herunterladen

Bildschirm-Layout für Android-Smartphone
Bildschirm-Layout für Android-Smartphone

  • Pharmazeutisch mit Startseite: Laborgeräte bieten ein modernes Motiv für dieses klassische Thema in Lavendelfarbtönen. Die Startseite bietet Platzhalter für Ihre neuen Produkte oder Dienste in einer benutzerfreundlichen Einstellung. Dieses Layout ist Teil einer Familie von bereits vorbereiteten Layouts, die auch iPhone pharmazeutisch und iPad pharmazeutisch enthalten. Sie können die Bildschirmgröße an Ihr Gerät anpassen.

Herunterladen

Bildschirm-Layout für pharmazeutisch mit Startseite (Bildschirm-Layout für Smartphone)
Bildschirm-Layout für pharmazeutisch mit Startseite (Bildschirm-Layout für Smartphone)

Tablet-Layouts

  • Android: Ein blaugrünes und schwarzes Farbenschema, so vorkonfiguriert, dass es auf Android-Tablets mit gängigen Größen angezeigt werden kann. Dieses Layout ist Teil einer Familie, die auch gebrauchsfertige Layouts für folgende Bildschirme beinhaltet: Desktop, iPhone, iPad, Android-Telefon und Kindle Fire.

Herunterladen

Android-Tablet-Layout
Android-Tablet-Layout

  • iPad: Ein grau-brauner Stil kann einfach navigiert werden, mit Inhaltsverzeichnis, Index und Glossar und immer zugreifbarer Suche. Dieses Layout für iPhone ist Teil einer Familie, die auch gebrauchsfertige Layouts für folgende Bildschirme beinhaltet: Desktop, iPhone, Android-Telefon, Android-Tablet und Kindle Fire.

Herunterladen

Bildschirmlayout für iPad
Bildschirmlayout für iPad

  • Kindle Fire: Ein blaugrünes und schwarzes Farbschema, so vorkonfiguriert, dass es auf Kindle Fire angezeigt werden kann. Dieses Layout ist Teil einer Familie, die auch gebrauchsfertige Layouts für folgende Bildschirme beinhaltet: Desktop, iPhone, iPad, Android-Telefon und Android-Tablet.

Herunterladen

Bildschirm-Layout für Kindle Fire
Bildschirm-Layout für Kindle Fire

  • Pharmazeutisch mit Startseite: Laborgeräte bieten ein modernes Motiv für dieses klassische Thema in Lavendelfarbtönen. Die Startseite bietet Platzhalter für Ihre neuen Produkte oder Dienste in einer benutzerfreundlichen Einstellung. Dieses Layout ist Teil einer Familie von bereits vorbereiteten Layouts, die auch iPhone pharmazeutisch und Desktop pharmazeutisch enthalten. Sie können die Bildschirmgröße an Ihr Gerät anpassen.

Herunterladen

Pharmazeutisch mit Startseite (Tablet-Bildschirm-Layout)
Pharmazeutisch mit Startseite (Tablet-Bildschirm-Layout)

Laden Sie die predefined_screens.zip-Datei herunter, die Bildschirmprofile für verschiedene Geräte umfasst. Die ZIP-Datei enthält eine XML-Datei - predefined_screens.xml. Speichern Sie die XML-Datei in den folgenden zwei Ordnern:

  • AppData\Roaming\Adobe\RoboHTML\<Rh-Version>
  • < Rh-Installationsordner> \RoboHTML\presets

RoboHelp aktualisiert die Liste vordefinierter Bildschirmprofile für Ihr Projekt.

Herunterladen

Herunterladen

Dieses Werk unterliegt den Bedingungen der Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License.  Twitter™- und Facebook-Beiträge fallen nicht unter die Bedingungen der Creative Commons-Lizenz.

Rechtliche Hinweise   |   Online-Datenschutzrichtlinie