Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

Link zu dieser Vergleichsansicht

Beide Seiten der vorigen RevisionVorhergehende Überarbeitung
Nächste Überarbeitung
Vorhergehende Überarbeitung
de:create:layout [02.01.2015 16:11] adminde:create:layout [25.09.2022 10:53] (aktuell) – [Vollständige Anpassung] admin
Zeile 29: Zeile 29:
   * Ä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.
Zeile 51: Zeile 52:
 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.
Zeile 65: Zeile 66:
 |''%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.|
Zeile 73: Zeile 75:
 |''%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.
de/create/layout.1420211490.txt.gz · Zuletzt geändert: 02.01.2015 16:11 von admin
 
Falls nicht anders bezeichnet, ist der Inhalt dieses Wikis unter der folgenden Lizenz veröffentlicht: CC Attribution-Share Alike 4.0 International
Driven by DokuWiki