Quelltext der Seite Benutzer:Maria Eirich/Vorlagen

== Vorlage: Box ==

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

'''Ein Beispiel'''
<div class="grid">
<div class="width-1-2">
'''Das schreibt man:'''
<pre>{{Box|Hier ist die Überschrift|Hier steht der Inhalt, der in der Box angezeigt wird.|Merksatz}}</pre>
</div>
<div class="width-1-2">
'''Das sieht man:'''
{{Box|Hier ist die Überschrift|Hier steht der Inhalt, der in der Box angezeigt wird.|Merksatz}}
</div>
</div>


Verkürzt wird die Vorlage so verwendet:
<pre>{{Box|<Überschrift>|<Inhalt>|<Klasse>}}</pre>
:... 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. 

{{Box|1=Mögliche Probleme|2=
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

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

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:

{{(!}} class="wikitable"
{{!+}} Eine Tabellenüberschrift
{{!}} 
! Spaltenkopf A 
! Spaltenkopf B
{{!-}}
! Zeilenkopf 
{{!}} Zelle 1A 
{{!}} Zelle 1B
{{!-}}
{{!}}  
{{!}} Zelle 2A 
{{!}} Zelle 2B
{{!-}}
{{!}}
{{!}} Das Zeichen <nowiki>{|</nowiki> für den Tabellenstart wird durch die Vorlage <pre>{{(!}}</pre> ersetzt.
{{!}} Das Zeichen <nowiki>|}</nowiki> für das Tabellenende wird durch die Vorlage <pre>{{!)}}</pre> ersetzt. 
{{!-}}
{{!}}
{{!}} Das Zeichen <nowiki>|-</nowiki> für den Zeilenstart wird durch die Vorlage <pre>{{!-}}</pre> ersetzt.
{{!}} Das Zeichen <nowiki>|</nowiki> für den Zellenstart wird durch die Vorlage <pre>{{!}}</pre> ersetzt. 
{{!-}}
{{!}}  
{{!}} colspan="2" {{!}} eine Zelle die über mehrere Spalten ausgedehnt ist.
{{!)}}




|3=Hervorhebung2}}

Die Namen der Klassen und das Aussehen aller Varianten, sowie die alternative Nutzungsmöglichkeit, findet man auf der Seite&nbsp;→&nbsp;[[Vorlage:Box|'''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.

→ [[Chemie-Buch I zum Lehrplan in Rheinland-Pfalz/Ein erster Blick in die Atome - Eigenschaften der Salzartigen Verbindungen erklären|Beispiel-Seite]] mit vielen - auch ineinander verschaltelten "Boxen"

==Wie man Lösungen versteckt==

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

<div class="grid">
 <div class="width-1-2">
'''Das schreibt man:'''
:<pre>{{Lösung versteckt|Text zum Verstecken|Label fürs Anzeigen|Label fürs Verbergen}}</pre> 
</div>
 <div class="width-1-2">
'''Das sieht man:'''
{{Lösung versteckt|Text zum Verstecken|Label fürs Anzeigen|Label fürs Verbergen}}</div>
</div>

... oder ...

<div class="grid">
<div class="width-1-2">
'''Das schreibt man:'''
:<pre>{{Lösung versteckt|1=Text zum Verstecken|2=Label fürs Anzeigen|3=Label fürs Verbergen}}</pre> 
''Diese Schreibweise braucht man, wenn der "Text zum Verstecken" ein Gleichheitszeichen oder ein senkrechte Line <nowiki>|</nowiki> enthält.''
</div>
<div class="width-1-2">
'''Das sieht man:'''
{{Lösung versteckt|Text zum Verstecken|Label fürs Anzeigen|Label fürs Verbergen}}</div>
</div>

... oder ...

<div class="grid">
 <div class="width-1-2">
'''Das schreibt man:'''
:<pre>{{Lösung versteckt|Text zum Verstecken}}</pre> 
''Wenn man als Label "Lösung anzeigen/Lösung verstecken" verwenden will, kann man die zweite und dritte Option in der Vorlage weglassen.''
</div>
 <div class="width-1-2">
'''Das sieht man:'''
{{Lösung versteckt|Text zum Verstecken}}</div>
</div>

== 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. 

<syntaxhighlight lang="html5">
<div class="grid">
 <div class="width-1-3">...</div>
 <div class="width-1-3">...</div>
 <div class="width-1-3">...</div>
</div>
</syntaxhighlight>

<div class="grid">
 <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 class="width-1-3"><div style="background: #eee; padding: 3rem"><code>.width-1-3</code></div></div>
</div>

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

<div class="grid">
 <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>

<syntaxhighlight lang="html5">
<div class="grid">
 <div class="width-1-4">...</div>
 <div class="width-3-4">...</div>
</div>
</syntaxhighlight>

<div class="grid">
 <div class="width-1-6"><div style="background: #eee; padding: 3rem"><code>.width-1-6</code></div></div>
 <div class="width-5-6"><div style="background: #eee; padding: 3rem"><code>.width-5-6</code></div></div>
</div>

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

* [[:Vorlage:Weiter]]
* [[:Vorlage:Fortsetzung]] (ermöglicht einen Vor- und Zurück-Link, sowie einen zentrierten Link zu einer Übersichtsseite