Hilfe:Mehrspaltenlayout: Unterschied zwischen den Versionen
KKeine Bearbeitungszusammenfassung Markierung: 2017-Quelltext-Bearbeitung |
KKeine Bearbeitungszusammenfassung Markierung: 2017-Quelltext-Bearbeitung |
||
| Zeile 20: | Zeile 20: | ||
}} | }} | ||
====Das schreibt man:==== | ====Das schreibt man:==== | ||
< | <pre>{{2Spalten| | ||
Spalte 1 | Spalte 1 | ||
| | | | ||
Spalte 2 | Spalte 2 | ||
}} | }} | ||
</ | </pre> | ||
===3 Spalten=== | ===3 Spalten=== | ||
| Zeile 40: | Zeile 40: | ||
====Das schreibt man:==== | ====Das schreibt man:==== | ||
< | <pre>{{3Spalten| | ||
Spalte 1 | Spalte 1 | ||
| | | | ||
| Zeile 47: | Zeile 47: | ||
Spalte 3 | Spalte 3 | ||
}} | }} | ||
</ | </pre> | ||
===N Spalten=== | ===N Spalten=== | ||
| Zeile 53: | Zeile 53: | ||
Die Vorlage erwartet 2 Parameter. Als ersten die Spaltenanzahl und als zweiten den Text: | Die Vorlage erwartet 2 Parameter. Als ersten die Spaltenanzahl und als zweiten den Text: | ||
< | <pre>{{nSpalten|4| | ||
* text | * text | ||
* text | * text | ||
* text | * text | ||
}}</ | }}</pre> | ||
Optional lässt sich die Mindestbreite über den Parameter <code>min-width</code> verändern. Möchte man beispielsweise beliebig viele schmale Spalten, lässt sich das über eine große Angabe für die Spaltenanzahl steuern. | Optional lässt sich die Mindestbreite über den Parameter <code>min-width</code> verändern. Möchte man beispielsweise beliebig viele schmale Spalten, lässt sich das über eine große Angabe für die Spaltenanzahl steuern. | ||
Version vom 6. April 2020, 12:44 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
}}
N Spalten
Erzeugt eine Darstellung in n Spalten, die jeweils eine Mindestbreite von 20em haben. Sinnvoll ist dies vor allem für längere Aufzählungen. Gegenüber der Vorlage 2Spalten hat sie den Vorteil, dass man sich nicht händisch um die Verteilung des Inhalts in die Spalten zu kümmern braucht. Allerdings können einige ältere Browser damit nicht umgehen und stellen als Fallback nur eine Spalte dar.
Die Vorlage erwartet 2 Parameter. Als ersten die Spaltenanzahl und als zweiten den Text:
{{nSpalten|4|
* text
* text
* text
}}
Optional lässt sich die Mindestbreite über den Parameter min-width verändern. Möchte man beispielsweise beliebig viele schmale Spalten, lässt sich das über eine große Angabe für die Spaltenanzahl steuern.
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
