Hilfe:Tabellen

Hilfen im ZUM-Unterrichten: Vorlagen, allgemeine Hilfeseiten

Einstieg

Inhalte erstellen
Erste Schritte, Seiten anlegen, Links anlegen
Anforderungen an Seiten im ZUM-Unterrichten
Mindestumfang, gewünschte Artikel, Kategorien, Didaktik
Medien einbinden
Bilder, Videos, Geogebra, ZUMPad, etc., Lizenzen
Interaktive Übungen einbinden
H5P, Learningapps, R-Quiz

Vorlagen

Lernpfade
Navigation, Lösung verstecken, Unterseiten
Kästen
Kästen für verschiedene Anwendungsfälle
Überblick
Überblick über weitere Hilfen

Wartung und Pflege

Wartung und Pflege
Spezialseiten, unbenutzte Kategorien, gesuchte Seiten

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

.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