Skip to main content

HTML-Styling Workflow

Um HTML-Ausgaben anzupassen und zu gestalten, verwenden Sie ein CSS-Stylesheet. Es gibt auch einige allgemeine Einstellungen im HTML-Layout, die sich auf die Ausgabe als Ganzes auswirken.

Wir empfehlen Ihnen, die folgenden Schritte zu befolgen, um Ihr HTML zu gestalten:

  1. Erstellen Sie Ihre Inhalte in Paligo-Topics und fügen Sie diese einer Publikation hinzu. Einige Teile des Inhalts können mit Attributen formatiert werden, z. B. die Größe von Bildern. Sie werden jedoch den Großteil des Stylings im HTML-Layout und in einem CSS-Stylesheet anwenden.

  2. Erstellen Sie ein HTML5-Layout (oder einfaches HTML) oder bearbeiten Sie ein vorhandenes Layout.

  3. Verwenden Sie die Layouteinstellungen, um Ihre Publikationseinstellungen auszuwählen. Hierbei handelt es sich um „übergreifende“ Einstellungen, die für den gesamten Inhalt gelten. Sie können im Layout keine Stile wie Überschriften, Schriftgrößen, Schriftfarben usw. festlegen. Für HTML definieren Sie diese in einem CSS-Stylesheet, das Sie dann in Ihr Layout hochladen können.

  4. Verwenden Sie einen Code- oder Texteditor, um eine CSS-Datei zu erstellen. Geben Sie ihr einen passenden Namen und speichern Sie sie mit der Erweiterung .css.

  5. Geben Sie Ihrem CSS zu Beginn eine einfache Regel, damit die Datei nicht leer ist. Die Regel muss noch kein Styling enthalten, Sie könnten zum Beispiel Folgendes hinzufügen:

    body {
}

  6. Hochladen benutzerdefinierter CSS.

    Anmerkung

    Sie können auch JavaScript verwenden, um Ihre veröffentlichte Ausgabe anzupassen. Sie können Ihr eigenes JavaScript auch in das HTML-Layout hochladen.

  7. Drücken Sie Speichern.

  8. Veröffentlichen Sie eine beliebige Publikation, die ein Beispiel für den Inhalt enthält, den Sie gestalten möchten. Verwenden Sie beim Veröffentlichen das HTML-Layout, das Sie in den Schritten 2 bis 7 bearbeitet haben.

  9. Wenn Ihr Inhalt veröffentlicht ist, entpacken Sie die heruntergeladene Zipdatei in Ihrem Browser.

  10. Öffnen Sie die Datei index.html, um Ihre HTML-Ausgabe anzuzeigen.

  11. Gehen Sie in den entpackten Dateien zum Ordner out/en/css, um die benutzerdefinierte CSS-Datei zu finden, die in Ihr Layout hochgeladen wurde. Wenn die Option Persistenter CSS-Dateiname für Ihr Layout aktiviert ist, heißt die Datei „layout-custom-style.css“, andernfalls hat sie eine zufällige ID als Namen.

    Anmerkung

    en ist der Ordner für englische Inhalte. Für andere Sprachen gelten andere Sprachcodes, deren Namen den jeweiligen ISO-Sprachcodes entsprechen („de“ für Deutsch).

  12. Öffnen Sie die CSS-Datei in einem Text- oder Quellcode-Editor und fügen Sie Regeln in das CSS ein. Aktualisieren Sie dann Ihren Browser, um die Auswirkungen auf Ihre Hilfeausgabe zu sehen.

    Tipp

    Verwenden Sie die Browser-Tools, um Elemente zu überprüfen und Stiländerungen direkt im Browser zu testen, bevor Sie Stile zu Ihrer CSS-Datei hinzufügen. Tipps zur Verwendung der Browser-Tools finden Sie unter Formatieren mit CSS.

  13. Wenn Sie mit Ihrem Styling zufrieden sind, laden Sie Ihre angepasste CSS-Datei wieder in Ihr Layout hoch. Paligo wendet Ihre neuen Stile an, wenn Sie das nächste Mal veröffentlichen.

Tipp

Tipps zum Styling eines HTML5-Helpcenters finden Sie unter HTML5-Helpcenter-Gestaltung.