Hilfe:Tabellen

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

• Erste Schritte
• Inhaltliche Richtlinien
• Wartung und Pflege
• Kategorien
• Hilfe zum Zitieren

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