| Beide Seiten der vorigen RevisionVorhergehende ÜberarbeitungNächste Überarbeitung | Vorhergehende ÜberarbeitungLetzte ÜberarbeitungBeide Seiten der Revision |
| de:create:layout [19.11.2014 09:23] – [Erweiterte Anpassungen] admin | de:create:layout [24.05.2022 18:00] – [Vollständige Anpassung] admin |
|---|
| * Falls Sie mehrere Layouts erstellt oder aktiviert haben, wird standardmäßig jenes Layout verwendet, das als //Standard-Layout// markiert ist. Sie können jedes Layout als //Standard// auswählen und mit dem Knopf //Ausgewähltes Layout als Standard festlegen// speichern. | * Falls Sie mehrere Layouts erstellt oder aktiviert haben, wird standardmäßig jenes Layout verwendet, das als //Standard-Layout// markiert ist. Sie können jedes Layout als //Standard// auswählen und mit dem Knopf //Ausgewähltes Layout als Standard festlegen// speichern. |
| * Falls Sie mit mehreren Fragebögen arbeiten, können Sie unter **Fragebogen zusammenstellen** -> Karteireiter //Einstellungen// das Layout auswählen, das jeweils verwendet werden soll. Speichern nicht vergessen. | * Falls Sie mit mehreren Fragebögen arbeiten, können Sie unter **Fragebogen zusammenstellen** -> Karteireiter //Einstellungen// das Layout auswählen, das jeweils verwendet werden soll. Speichern nicht vergessen. |
| * Falls Sie im Fragebogen für eine einzelne Seite ein anderes Layout verwenden möchten, steht dafür die Funktion ''[[:de:create:functions-output#option|option('layout', ...)]]'' zur Verfügung. In Verbindung mit der Layout-Vorlage "SoSci Stimulus Presenter" kann beispielsweise ein Stimulus ohne Fragebogen-Rahmen präsentiert werden. | * Falls Sie im Fragebogen für eine einzelne Seite ein anderes Layout verwenden möchten, steht dafür die Funktion ''[[:de:create:functions:option|option('layout', ...)]]'' zur Verfügung. In Verbindung mit der Layout-Vorlage "SoSci Stimulus Presenter" kann beispielsweise ein Stimulus ohne Fragebogen-Rahmen präsentiert werden. |
| |
| ===== Layout-Vorlagen verwenden ===== | ===== Layout-Vorlagen verwenden ===== |
| * Ändern Sie die Breite, indem Sie den Wert bei //Basisbreite des Layouts// anpassen. | * Ändern Sie die Breite, indem Sie den Wert bei //Basisbreite des Layouts// anpassen. |
| * Falls Sie die Schriftart ändern möchten, beachten Sie bitte, dass standardmäßig nur wenige Schriftarten für das Internet geeignet sind (d.h., auf den meisten Browsern funktionieren), u.a. Arial, Verdana, Times New Roman und Courier New, s. [[http://www.webmasterpro.de/design/news/2009/02/02/verbreitung-von-schriftarten-im-web.html|Verbreitung von Schriftarten bei Web-Usern]]). Daher werden hier jeweils mehrere Schriftarten durch Kommata getrennt angegeben -- und zuletzt jeweils eine abstrakte Angabe wie (''serif'' oder ''sans-serif'', s. [[http://de.selfhtml.org/css/eigenschaften/schrift.htm#font_family|SelfHTML: font-family]]. | * Falls Sie die Schriftart ändern möchten, beachten Sie bitte, dass standardmäßig nur wenige Schriftarten für das Internet geeignet sind (d.h., auf den meisten Browsern funktionieren), u.a. Arial, Verdana, Times New Roman und Courier New, s. [[http://www.webmasterpro.de/design/news/2009/02/02/verbreitung-von-schriftarten-im-web.html|Verbreitung von Schriftarten bei Web-Usern]]). Daher werden hier jeweils mehrere Schriftarten durch Kommata getrennt angegeben -- und zuletzt jeweils eine abstrakte Angabe wie (''serif'' oder ''sans-serif'', s. [[http://de.selfhtml.org/css/eigenschaften/schrift.htm#font_family|SelfHTML: font-family]]. |
| | * Wählen Sie bei //Art der Auswahlfelder// ggf. ein anderes Design für die Felder, die für einfache Auswahlfragen und Mehrfachauswahlen angezeigt werden (s. auch [[:de:create:layout-inputs]]). |
| * Speichern Sie das Layout mit //OK//. | * Speichern Sie das Layout mit //OK//. |
| * Nach dem Speichern sehen Sie unten in der Vorschau, wie das Layout aussehen wird. | * Nach dem Speichern sehen Sie unten in der Vorschau, wie das Layout aussehen wird. |
| 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. |
| |''%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. |
