Hilfe:Mehrspaltenlayout: Unterschied zwischen den Versionen

Aus ZUM Grundschullernportal
(angelegt)
Markierung: 2017-Quelltext-Bearbeitung
 
(Code aufgeräumt)
Markierung: 2017-Quelltext-Bearbeitung
Zeile 1: Zeile 1:
{{Hilfe Navigation}}
{{Hilfe Navigation}}
==Tabellen==
==Tabellen==
Der Einsatz von Tabellen in ZUM-Unterrichten ist weiterhin möglich und wird im ZUM-Wiki auf [https://wiki.zum.de/wiki/Hilfe:Tabellen Hilfe:Tabellen] ausführlich erklärt.
Der Einsatz von Tabellen im Grundschullernportal ist möglich und wird im ZUM-Wiki auf [https://wiki.zum.de/wiki/Hilfe:Tabellen Hilfe:Tabellen] ausführlich erklärt.


{{Box|Achtung|
{{Box|Achtung|
Zeile 9: Zeile 10:
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.
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===
===2 Spalten===
[[Vorlage:2Spalten]]
Nähere Informationen und weitere Features findet man auf der Vorlagenseite unter: [[Vorlage:2Spalten]]
 
;So sieht's aus:


====Das sieht man:====
Die Hintergrundfarben dienen nur der Veranschaulichung.
Die Hintergrundfarben dienen nur der Veranschaulichung.
{{Vorlage:2Spalten
{{Vorlage:2Spalten
|{{Box-spezial | Titel = Spalte 1 | Inhalt = |Rahmen = 0| Hintergrund = {{Farbe | primär | 1}} }}
|{{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 2 | Inhalt = |Rahmen = 0| Hintergrund = {{Farbe | sekundär-links | 1}}}}
}}
}}


;Syntax:
====Das schreibt man:====
 
<nowiki>{{2Spalten|
  <nowiki>{{2Spalten|
  Spalte 1
  Spalte 1
  |
  |
Zeile 30: Zeile 28:
  </nowiki>
  </nowiki>


===3-Spalten===
===3 Spalten===
Die Vorlage erlaubt es 3 Spalten zu erzeugen.
Nähere Informationen und weitere Features findet man auf der Vorlagenseite unter: [[Vorlage:3Spalten]]


'''So sieht's aus:''' Die Hintergrundfarben dienen nur der Veranschaulichung.
====Das sieht man:====
Die Hintergrundfarben dienen nur der Veranschaulichung.
{{Vorlage:3Spalten
{{Vorlage:3Spalten
|{{Box-spezial | Titel = Spalte 1 | Inhalt = |Rahmen = 0| Hintergrund = {{Farbe | primär | 1}} }}
|{{Box-spezial | Titel = Spalte 1 | Inhalt = |Rahmen = 0| Hintergrund = {{Farbe | primär | 1}} }}
Zeile 40: Zeile 39:
}}
}}


;Syntax:
====Das schreibt man:====


  <nowiki>{{3Spalten|
<nowiki>{{3Spalten|
   Spalte 1
   Spalte 1
   |
   |
Zeile 50: Zeile 49:
   }}   
   }}   
  </nowiki>
  </nowiki>
Für spezielle Anforderungen gibt es noch 2 weitere Features: [[Vorlage:3Spalten]]


===NSpalten===
===N Spalten===
&hellip; erzeugt eine Darstellung in n Spalten, die jeweils eine Mindestbreite von 20em haben. Sinnvoll ist dies vor allem für längere Aufzählungen. Gegenüber der Vorlage 2Spalten hat sie den Vorteil, dass man sich nicht händisch um die Verteilung des Inhalts in die Spalten zu kümmern braucht. Allerdings können einige ältere Browser damit nicht umgehen und stellen als Fallback nur eine Spalte dar.
Erzeugt eine Darstellung in n Spalten, die jeweils eine Mindestbreite von 20em haben. Sinnvoll ist dies vor allem für längere Aufzählungen. Gegenüber der Vorlage ''2Spalten'' hat sie den Vorteil, dass man sich nicht händisch um die Verteilung des Inhalts in die Spalten zu kümmern braucht. Allerdings können einige ältere Browser damit nicht umgehen und stellen als Fallback nur eine Spalte dar.


Die Vorlage erwartet 2 Parameter. Als ersten die Spaltenanzahl und als zweiten den Text.
Die Vorlage erwartet 2 Parameter. Als ersten die Spaltenanzahl und als zweiten den Text:
  <nowiki>{{nSpalten|4|
  <nowiki>{{nSpalten|4|
   * text
   * text
Zeile 63: Zeile 61:


Optional lässt sich die Mindestbreite über den Parameter <code>min-width</code> verändern. Möchte man beispielsweise beliebig viele schmale Spalten, lässt sich das über eine große Angabe für die Spaltenanzahl steuern.
Optional lässt sich die Mindestbreite über den Parameter <code>min-width</code> verändern. Möchte man beispielsweise beliebig viele schmale Spalten, lässt sich das über eine große Angabe für die Spaltenanzahl steuern.
[[Vorlage:NSpalten]]


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


<syntaxhighlight lang="html5">
<syntaxhighlight lang="html5">
Zeile 84: Zeile 80:
  <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>
</div>


<syntaxhighlight lang="html5">
<syntaxhighlight lang="html5">
Zeile 97: Zeile 92:
  <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>
</div>


<syntaxhighlight lang="html5">
<syntaxhighlight lang="html5">

Version vom 6. April 2020, 12:41 Uhr



Hilfen im Grundschullernportal

Hilfeseiten zu den Vorlagen

Multimedia

Hilfeseiten


Tabellen

Der Einsatz von Tabellen im Grundschullernportal ist möglich und wird im ZUM-Wiki 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

Nähere Informationen und weitere Features findet man auf der Vorlagenseite unter: Vorlage:2Spalten

Das sieht man:

Die Hintergrundfarben dienen nur der Veranschaulichung.

Spalte 1
Spalte 2

Das schreibt man:

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

3 Spalten

Nähere Informationen und weitere Features findet man auf der Vorlagenseite unter: Vorlage:3Spalten

Das sieht man:

Die Hintergrundfarben dienen nur der Veranschaulichung.

Spalte 1
Spalte 2
Spalte 3



Das schreibt man:

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

N Spalten

Erzeugt eine Darstellung in n Spalten, die jeweils eine Mindestbreite von 20em haben. Sinnvoll ist dies vor allem für längere Aufzählungen. Gegenüber der Vorlage 2Spalten hat sie den Vorteil, dass man sich nicht händisch um die Verteilung des Inhalts in die Spalten zu kümmern braucht. Allerdings können einige ältere Browser damit nicht umgehen und stellen als Fallback nur eine Spalte dar.

Die Vorlage erwartet 2 Parameter. Als ersten die Spaltenanzahl und als zweiten den Text: 

{{nSpalten|4|
  * text
  * text
  * text
  }}

Optional lässt sich die Mindestbreite über den Parameter min-width verändern. Möchte man beispielsweise beliebig viele schmale Spalten, lässt sich das über eine große Angabe für die Spaltenanzahl steuern.

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
Abgerufen von „https://grundschullernportal.zum.de/index.php?title=Hilfe:Mehrspaltenlayout&oldid=16378“