Hilfe:Mehrspaltenlayout: Unterschied zwischen den Versionen
KKeine Bearbeitungszusammenfassung Markierung: 2017-Quelltext-Bearbeitung |
(Vorlage "NSpalten" entfernt, da nicht vorhanden) Markierung: 2017-Quelltext-Bearbeitung |
||
| Zeile 48: | Zeile 48: | ||
}} | }} | ||
</pre> | </pre> | ||
===HTML-Markup=== | ===HTML-Markup=== | ||
Aktuelle Version vom 6. April 2020, 20:52 Uhr
Hilfen im Grundschullernportal
Hilfeseiten zu den Vorlagen
- Boxen
- Farben
- Mehrspaltenlayout
- Icons
- Vorlagen für Lernpfade
- Navigation
- Verstecken
- Fortsetzung
Multimedia
- Einbinden von Medien (Youtube, Geogebra, etc.)
- Interaktive Übungen (Learning Apps, H5P, R-Quizze)
- Links als Buttons anzeigen
- Fachbezogene Vorlagen (Sicherheitsinfos, etc.)
Tabellen
Der Einsatz von Tabellen im Grundschullernportal ist möglich und wird im ZUM-Wiki auf Hilfe:Tabellen ausführlich erklärt.
Mehrspaltenlayout
Es gibt Vorlagen für ein Mehrspalten-Layout auf großen Bildschirmen. Die Spalten ordnen sich bei schmalem Display, aber auch bei geringer Auflösung (z.B. am Beamer), untereinander an.
2 Spalten
Nähere Informationen und weitere Features findet man auf der Vorlagenseite unter: Vorlage:2Spalten
Das sieht man:
Die Hintergrundfarben dienen nur der Veranschaulichung.
Das schreibt man:
{{2Spalten|
Spalte 1
|
Spalte 2
}}
3 Spalten
Nähere Informationen und weitere Features findet man auf der Vorlagenseite unter: Vorlage:3Spalten
Das sieht man:
Die Hintergrundfarben dienen nur der Veranschaulichung.
Das schreibt man:
{{3Spalten|
Spalte 1
|
Spalte 2
|
Spalte 3
}}
HTML-Markup
Als Basis gibt es -1, -2, -3, -4 und -6 Breiten, wobei sich width-2-6 identisch verhält wie width-1-3.
Um die Inhalte in einer Spalte anzuordnen, schreibt man sie an die Stelle der drei Punkte (...) in den folgenden Beispielen. Dabei kann man auch Absätze, Listen, Tabellen etc. verwenden.
<div class="grid">
<div class="width-1-3">...</div>
<div class="width-1-3">...</div>
<div class="width-1-3">...</div>
</div>
.width-1-3.width-1-3.width-1-3
<div class="grid">
<div class="width-1-2">...</div>
<div class="width-1-2">...</div>
</div>
.width-1-2.width-1-2
<div class="grid">
<div class="width-1-4">...</div>
<div class="width-3-4">...</div>
</div>
.width-1-6.width-5-6
