Hilfe:Tabellen: Unterschied zwischen den Versionen
deutsch-lernen>FrauSchütze (Die Seite wurde neu angelegt: „{{Hilfe Navigation}} == Intelligente Spalten == Die Spalten ordnen sich bei schmalem Display, aber auch bei geringer Auflösung (z.B. am Beamer), untereinan…“) |
(Änderung 42569 von Karl Kirst (Diskussion) rückgängig gemacht.) Markierung: Rückgängigmachung |
||
| (11 dazwischenliegende Versionen von 3 Benutzern werden nicht angezeigt) | |||
| Zeile 1: | Zeile 1: | ||
{{Hilfe | == Tabellen == | ||
== | |||
Die Spalten ordnen sich bei schmalem Display, aber auch bei geringer Auflösung (z.B. am Beamer), untereinander an. | {{Box|Achtung|Der Einsatz von Tabellen in ''ZUM Deutsch Lernen'' ist weiterhin, so wie es auf im ZUM-Wiki auf der Seite [https://wiki.zum.de/wiki/Hilfe:Tabellen Hilfe:Tabellen] ausführlich erklärt wird. | ||
Allerdings sollten Tabellen '''nur für tabellarische Daten''' und nicht zur Gestaltung von Webseiten dienen.|Hervorhebung2}} | |||
== 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 === | |||
[[Vorlage:2Spalten]] | |||
;So sieht's aus: | |||
Die Hintergrundfarben dienen nur der Veranschaulichung. | |||
{{Vorlage:2Spalten | |||
|{{Box-spezial | Titel = Spalte 1 | Inhalt = |Rahmen = 0| Hintergrund = {{Farbe | primär | 1}} }} | |||
|{{Box-spezial | Titel = Spalte 2 | Inhalt = |Rahmen = 0| Hintergrund = {{Farbe | sekundär-links | 1}}}} | |||
}} | |||
;Syntax: | |||
<nowiki>{{2Spalten| | |||
Spalte 1 | |||
| | |||
Spalte 2 | |||
}} | |||
</nowiki> | |||
=== 3-Spalten === | |||
Die Vorlage erlaubt es 3 Spalten zu erzeugen. | |||
'''So sieht's aus:''' Die Hintergrundfarben dienen nur der Veranschaulichung. | |||
{{Vorlage:3Spalten | |||
|{{Box-spezial | Titel = Spalte 1 | Inhalt = |Rahmen = 0| Hintergrund = {{Farbe | primär | 1}} }} | |||
|{{Box-spezial | Titel = Spalte 2 | Inhalt = |Rahmen = 0| Hintergrund = {{Farbe | sekundär-links | 1}}}} | |||
|{{Box-spezial | Titel = Spalte 3 | Inhalt = |Rahmen = 0| Hintergrund = {{Farbe | sekundär-rechts | 1}}}} | |||
}} | |||
;Syntax: | |||
<nowiki>{{3Spalten| | |||
Spalte 1 | |||
| | |||
Spalte 2 | |||
| | |||
Spalte 3 | |||
}} | |||
</nowiki> | |||
Für spezielle Anforderungen gibt es noch 2 weitere Features: [[Vorlage:3Spalten]] | |||
=== NSpalten === | |||
… 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. | |||
<nowiki>{{nSpalten|4| | |||
* text | |||
* text | |||
* text | |||
}}</nowiki> | |||
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. | |||
[[Vorlage:NSpalten]] | |||
=== 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. | 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. | |||
<syntaxhighlight lang="html5"> | <syntaxhighlight lang="html5"> | ||
| Zeile 17: | Zeile 80: | ||
<div class="width-1-3"><div style="background: #eee; padding: 3rem"><code>.width-1-3</code></div></div> | <div class="width-1-3"><div style="background: #eee; padding: 3rem"><code>.width-1-3</code></div></div> | ||
</div> | </div> | ||
<syntaxhighlight lang="html5"> | <syntaxhighlight lang="html5"> | ||
| Zeile 29: | Zeile 93: | ||
<div class="width-1-2"><div style="background: #eee; padding: 3rem"><code>.width-1-2</code></div></div> | <div class="width-1-2"><div style="background: #eee; padding: 3rem"><code>.width-1-2</code></div></div> | ||
</div> | </div> | ||
<syntaxhighlight lang="html5"> | <syntaxhighlight lang="html5"> | ||
| Zeile 41: | Zeile 106: | ||
<div class="width-5-6"><div style="background: #eee; padding: 3rem"><code>.width-5-6</code></div></div> | <div class="width-5-6"><div style="background: #eee; padding: 3rem"><code>.width-5-6</code></div></div> | ||
</div> | </div> | ||
{{Hilfe Navigation}} | |||
Aktuelle Version vom 10. September 2021, 20:40 Uhr
Tabellen
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
- So sieht's aus
Die Hintergrundfarben dienen nur der Veranschaulichung.
- Syntax
{{2Spalten|
Spalte 1
|
Spalte 2
}}
3-Spalten
Die Vorlage erlaubt es 3 Spalten zu erzeugen.
So sieht's aus: Die Hintergrundfarben dienen nur der Veranschaulichung.
- Syntax
{{3Spalten|
Spalte 1
|
Spalte 2
|
Spalte 3
}}
Für spezielle Anforderungen gibt es noch 2 weitere Features: Vorlage:3Spalten
NSpalten
… 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
Hilfeseiten zu den Vorlagen
- Boxen
- Farben
- Mehrspaltenlayout
- Icons
- Vorlagen für Lernpfade
- Navigation
- Verstecken
- Fortsetzung
Multimedia
- Einbinden von Medien (Bilder, Youtube, Geogebra, etc.)
- Einbinden von externen Tools (Mentimeter, Padlet, Quizlet, AnswerGarden)
- Interaktive Übungen einbinden oder erstellen
- Links als Buttons anzeigen
