Hilfe:Tabellen: Unterschied zwischen den Versionen

Version vom 20. August 2019, 10:18 Uhr

Hilfen in "ZUM Deutsch Lernen": Vorlagen, allgemeine Hilfeseiten

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
- Learning Apps
- H5P
- R-Quiz
Links als Buttons anzeigen

Hilfeseiten

Tabellen

Der einsatz von Tabellen im ZUM-Unterrichten-Wiki ist weiterhin möglich und wird auf Hilfe:Tabellen ausführlich erklärt.

Achtung

Allerdings sollten Tabellen nur für tabellarische Daten und nicht zur Gestaltung von Webseiten dienen.

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.

Spalte 1

Spalte 2

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.

Spalte 1

Spalte 2

Spalte 3

Syntax

 {{3Spalten|
  Spalte 1
  |
  Spalte 2
  |
  Spalte 3
  }}

Für spezielle Anforderungen gibt es noch 2 weitere Features: Vorlage:3Spalten

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

<div class="grid">
 <div class="width-1-2">...</div>
 <div class="width-1-2">...</div>
</div>

.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

@@ Zeile 1: / Zeile 1: @@
 {{Hilfe Navigation}}
-== Flexible Spalten ==
+== Tabellen ==
-Die Spalten ordnen sich bei schmalem Display, aber auch bei geringer Auflösung (z.B. am Beamer), untereinander an.
+Der einsatz von Tabellen im ZUM-Unterrichten-Wiki ist weiterhin möglich und wird auf [https://wiki.zum.de/wiki/Hilfe:Tabellen Hilfe:Tabellen] ausführlich erklärt.
+{{Box|Achtung|
+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]]
+=== 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.