Beide Seiten der vorigen RevisionVorhergehende ÜberarbeitungNächste Überarbeitung | Vorhergehende Überarbeitung |
de:create:layout [02.01.2015 16:11] – admin | de:create:layout [25.09.2022 10:53] (aktuell) – [Vollständige Anpassung] admin |
---|
* Ä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. |
|''%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. |