Benutzer:Maria Eirich/Vorlagen

Aus ZUM-Unterrichten
Wechseln zu: Navigation, Suche

Vorlage: Box

Für das einheitliche Hervorheben von ähnlichen Inhalten soll möglichst die Vorlage "Box" verwendet werden.

Ein Beispiel

Das schreibt man:

{{Box|Hier ist die Überschrift|Hier steht der Inhalt, der in der Box angezeigt wird.|Merksatz}}

Das sieht man:

Hier ist die Überschrift
Hier steht der Inhalt, der in der Box angezeigt wird.


Verkürzt wird die Vorlage so verwendet:

{{Box|<Überschrift>|<Inhalt>|<Klasse>}}
... wobei die Klasse angibt, welche Farbe und welches Icon verwendet wird.

Bisher gibt es die Klassen

  • Hervorhebung1,
  • Hervorhebung2,
  • Zitat,
  • Arbeitsmethode,
  • Unterrichtsidee,
  • Meinung,
  • Lernpfad,
  • Experimentieren,
  • Lösung,
  • Üben,
  • Merksatz

Im Prinzip kann man die Klassen und ihr Aussehen beliebig benutzen, da die Überschrift beliebig verwendet werden kann. Die Icons sind aber vorgegeben.


Mögliche Probleme

Es gibt verschiedene Gründe, warum das Box_Design nicht richtig verwendet wird. Grund sind bestimmte Symbole, die die Vorlage verwirren, das kann z.B. bei Links der Fall sein. Das Problem umgehen kann man, indem man vor dem Inhalt schreibt "2=" und für die Kategorie "3=". Meist muss beides kombiniert werden, wenn scheinbar die Kategorie als Inhalt genommen wird.

Weiterhin machen Tabellen in dem Inhalt ein Problem. Bei diesem und allen anderen Problemen gibt es eine alternative Möglichkeit, wie man diese "Box" erzeugen kann.

Man schreibt also

{{Box|1=<Überschrift>|2=<Inhalt>|3=<Klasse>}}

Wenn möglich sollte man auf die Verwendung von Tabellen verzichten. Falls das nicht möglich ist gibt es einige Vorlagen die man für Tabellen innerhalb einer Box verwenden kann. Es ist darauf zu achten, dass die Zeichen (Vorlagen) für die Tabellenerstellung jeweils am Anfang einer Zeile stehen.

Hier das Beispiel einer einfachen Tabelle in der Box:

Zelle 1A Zelle 1B
Zelle 2A Zelle 2B

Hier ein komplizierteres Beispiel:

Eine Tabellenüberschrift
Spaltenkopf A Spaltenkopf B
Zeilenkopf Zelle 1A Zelle 1B
Zelle 2A Zelle 2B
Das Zeichen {| für den Tabellenstart wird durch die Vorlage
{{(!}}
ersetzt.
Das Zeichen |} für das Tabellenende wird durch die Vorlage
{{!)}}
ersetzt.
Das Zeichen |- für den Zeilenstart wird durch die Vorlage
{{!-}}
ersetzt.
Das Zeichen | für den Zellenstart wird durch die Vorlage
{{!}}
ersetzt.
eine Zelle die über mehrere Spalten ausgedehnt ist.

Die Namen der Klassen und das Aussehen aller Varianten, sowie die alternative Nutzungsmöglichkeit, findet man auf der Seite → Vorlage mit verschiedenen Kästen

Wenn die Auswahl nicht ausreicht gibt es mit der Vorlage:Box-spezial die Möglichkeit viele Parameter der Vorlage beim Einbinden selbst anzupassen.

Beispiel-Seite mit vielen - auch ineinander verschaltelten "Boxen"

Wie man Lösungen versteckt

Zu versteckende Inhalte müssen in einer Vorlage eingesetzt werden.

Das schreibt man:

{{Lösung versteckt|Text zum Verstecken|Label fürs Anzeigen|Label fürs Verbergen}}

Das sieht man:

Text zum Verstecken

... oder ...

Das schreibt man:

{{Lösung versteckt|1=Text zum Verstecken|2=Label fürs Anzeigen|3=Label fürs Verbergen}}

Diese Schreibweise braucht man, wenn der "Text zum Verstecken" ein Gleichheitszeichen oder ein senkrechte Line | enthält.

Das sieht man:

Text zum Verstecken

... oder ...

Das schreibt man:

{{Lösung versteckt|Text zum Verstecken}}

Wenn man als Label "Lösung anzeigen/Lösung verstecken" verwenden will, kann man die zweite und dritte Option in der Vorlage weglassen.

Das sieht man:

Text zum Verstecken

Intelligente Spalten

Die Spalten ordnen sich bei schmalem Display, aber auch bei geringer Auflösung (z.B. am Beamer), untereinander an. Als Basis gibt es -1, -2, -3, -4 und -6 Breiten, wobei sich width-2-6 identisch verhält wie width-1-3.

<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

Navigations-Links

Manchmal ergibt sich die Notwendigkeit auf (Vorgänger- oder) Folgeseiten zu verweisen: