| Beide Seiten der vorigen RevisionVorhergehende ÜberarbeitungNächste Überarbeitung | Vorhergehende Überarbeitung |
| de:create:layout [14.02.2017 13:21] – [Einfache Anpassungen] admin | de:create:layout [25.09.2022 10:53] (aktuell) – [Vollständige Anpassung] admin |
|---|
| Im Karteireiter //%%HTML-Vorlage des Layouts%%// kann der zugrundeliegende HTML-Code für das Layout angepasst oder komplett neu erstellt werden. Dabei sollten folgende Vorgaben beachtet werden: | Im Karteireiter //%%HTML-Vorlage des Layouts%%// kann der zugrundeliegende HTML-Code für das Layout angepasst oder komplett neu erstellt werden. Dabei sollten folgende Vorgaben beachtet werden: |
| |
| * Der DOCTYPE sollte HTML 4 entsprechen, diese HTML-Version verwendet SoSci Survey für die Darstellung von Fragen. | * SoSci Survey verwendet HTML 5 für die Darstellung von Fragen. |
| * Zu Beginn des Kopfbereichs ''<head>'' sollte der Platzhalter ''%head%'' platziert werden -- an dieser Stelle fügt SoSci Survey etwa den CSS-Code für das Layout der Fragen ein. | * Zu Beginn des Kopfbereichs ''<head>'' sollte der Platzhalter ''%head%'' platziert werden -- an dieser Stelle fügt SoSci Survey etwa den CSS-Code für das Layout der Fragen ein. |
| * Im Inhalt des Fragebogens ''<body>'' muss der Platzhalter ''%questionnaire%'' vorkommen (an dieser Stelle wird der Inhalt der jeweiligen Fragebogen-Seite eingefügt), die Platzhalter ''%logo%'', ''%progress%'' und ''%imprint%'' sollten ebenfalls an geeigneter Stelle platziert werden. | * Im Inhalt des Fragebogens ''<body>'' muss der Platzhalter ''%questionnaire%'' vorkommen (an dieser Stelle wird der Inhalt der jeweiligen Fragebogen-Seite eingefügt), die Platzhalter ''%logo%'', ''%progress%'' und ''%imprint%'' sollten ebenfalls an geeigneter Stelle platziert werden. |
| |''%color.1%'' bis ''%color.8%''|Farben aus dem Farbschema (s. oben)| | |''%color.1%'' bis ''%color.8%''|Farben aus dem Farbschema (s. oben)| |
| |''%width%'', ''%width-80%''|Die für das Layout eingestellte Basis-Breite (Pixel, ''px''). Falls hinter dem ''width'' ein Plus (''+'') oder Minus (''-'') angegeben wird, gibt der Platzhalter die Basis-Breite zu-/abzügliches dieses Wertes an.| | |''%width%'', ''%width-80%''|Die für das Layout eingestellte Basis-Breite (Pixel, ''px''). Falls hinter dem ''width'' ein Plus (''+'') oder Minus (''-'') angegeben wird, gibt der Platzhalter die Basis-Breite zu-/abzügliches dieses Wertes an.| |
| | |''%header.image%''|Dateiname einer Bilddatei, welche im Layout als "Kopfbild" festgelegt werden kann.| |
| |''%button.next%''|Platzhalter für den "Weiter"-Knopf. Falls der Platzhalter nicht verwendet wird, wird der Knopf automatisch bei ''%button.submit%'' platziert.| | |''%button.next%''|Platzhalter für den "Weiter"-Knopf. Falls der Platzhalter nicht verwendet wird, wird der Knopf automatisch bei ''%button.submit%'' platziert.| |
| |''%button.back%''|Platzhalter für den "Zurück"-Knopf. Falls der Platzhalter nicht verwendet wird, wird der Knopf automatisch bei ''%button.submit%'' platziert.| | |''%button.back%''|Platzhalter für den "Zurück"-Knopf. Falls der Platzhalter nicht verwendet wird, wird der Knopf automatisch bei ''%button.submit%'' platziert.| |
| |''%button.screenreader%''|Knopf zum Verlassen des barrierefreien Screenreader-Modus, falls dieser aktiviert wurde. Falls der Platzhalter nicht verwendet wird, wird der Knopf bei ''%button.control%'' platziert.| | |''%button.screenreader%''|Knopf zum Verlassen des barrierefreien Screenreader-Modus, falls dieser aktiviert wurde. Falls der Platzhalter nicht verwendet wird, wird der Knopf bei ''%button.control%'' platziert.| |
| |''%button.control%''|Platzhalter für die Kontroll-Knöpfe (s. oben), wird der Platzhalter nicht verwendet, werden die Knöpfe unter dem Fragebogen platziert.| | |''%button.control%''|Platzhalter für die Kontroll-Knöpfe (s. oben), wird der Platzhalter nicht verwendet, werden die Knöpfe unter dem Fragebogen platziert.| |
| | |
| | **Tipp:** Für Arbeiten an der HTML-Vorlage des Layouts sind die [[:de:general:browser-tools]] ein sehr hilfreiches Werkzeug. |
