Felix Englisch am 3. Dezember 2020 um 11:08 Uhr

2020-12-03T11:08:22Z

← Nächstältere Version		Version vom 3. Dezember 2020, 13:08 Uhr
Zeile 1:		Zeile 1:
			{{Anleitung aus Lünepedia}}

	{{#seo:		{{#seo:
	\|title=Gitter (Anleitung)		\|title=Gitter (Anleitung)

Felix Englisch: Die Seite wurde neu angelegt: „{{#seo: |title=Gitter (Anleitung) |description=Die Unterteilung der Bildschirmbreite in Spalten ermöglicht die übersichtliche Darstellung deiner Inhalte.}} D…“

2020-12-03T11:07:05Z

Die Seite wurde neu angelegt: „{{#seo: |title=Gitter (Anleitung) |description=Die Unterteilung der Bildschirmbreite in Spalten ermöglicht die übersichtliche Darstellung deiner Inhalte.}} D…“

Neue Seite

{{#seo:
|title=Gitter (Anleitung)
|description=Die Unterteilung der Bildschirmbreite in Spalten ermöglicht die übersichtliche Darstellung deiner Inhalte.}}
Die Verwendung eines oder mehrerer Gitter in einem Wiki-Artikel ermöglicht es, die Bildschirmfläche in beliebig viele Abschnitte zu unterteilen. So können die Text- beziehungsweise Medieninhalte übersichtlich und ästhetisch strukturiert werden. Jede der Spalten kann eine Überschrift haben, gegebenenfalls auch mit einem Icon. Der Inhalt einer Gitterspalte mit allen verfügbaren Wiki-Inhalten gefüllt werden, also neben normalem Text und Links auch mit [[Projekt:Formatierung und Medien#Bilder|Bildern]], [[Projekt:Formatierung und Medien#Videos|Videos]] und [[Projekt:Formatierung und Medien#Karten|Karten]] oder sogar weiteren Gittern und Tabs. Dabei lässt sich genau festlegen, wie die Unterteilung auf kleinen Bildschirmen, also auf Tablets und Smartphones, aussehen soll.

Der einfachste Weg, ein Gitter einzufügen, ist über die '''Werkzeugleiste''' im Bearbeitungsmodus. Unter [[Datei:Erweitert.png|x22px]] befindet sich rechts die Dropdown-Liste [[Datei:Gitter.png|x22px]], um 2er- oder 3er-Gitter mit oder ohne Überschrift hinzuzufügen. Für individuell anpassbare Gitter erklärt diese Anleitung, welche Code-Segmente ihr in einen Artikel eingeben müsst und wie diese aussehen können.

== Allgemeines ==
Für ein Gitter wird die Bildschirmfläche in 12 gleich breite Einheiten unterteilt, woraus individuell anpassbare Spalten gebildert werden können. Man könnte den Bildschirm zum Beispiel in 12 (sehr schmale) Spalten mit gleicher Breite unterteilen, oder auch in zwei Spalten, die jeweils eine Breite von 6 Einheiten haben. Ungleichmäßige Verteilungen, also zum Beispiel drei Spalten mit einer Breite von 5, 3 und 4 Einheiten sind auch möglich, solange sie in der Summe 12 Einheiten ergeben.

Gitter werden mit Hilfe der Programmiersprache [https://de.wikipedia.org/wiki/Hypertext_Markup_Language HTML <span class="fa fa-external-link fa-lg small-icon"></span>] (Hypertext Markup Language) erstellt. Es sind jedoch keinerlei Kenntnisse in dieser oder anderen Programmiersprachen notwending, da es völlig ausreicht, die gewünschten Code-Segmente aus diesem Artikel herauszukopieren und sie im eigenen Artikel geringfügig anzupassen.

== Gleichmäßige Spalten ==
Achtung: Die folgenden Beispiele werden nur auf dem Desktop mit der entsprechenden Unterteilung angezeigt. Die Code-Segmente erzeugen in der mobilen Ansicht Spalten, die jeweils die ganze Breite des Bildschirmes einnehmen und untereinander angeordnet sind. Diese Darstellung ist empfohlen, kann aber auch geändert werden (siehe [[Projekt:Gitter#Mobile Ansicht|Mobile Ansicht]]).

=== Zwei Spalten (6 - 6) ===

<poem style="border: 2px solid #008d8d; background-color: #008d8d14; padding: 1em">
''Was du eingibst:''

<code><nowiki><div class="row"></nowiki></code>
<code><nowiki><div class="large-6 columns"></nowiki></code>
Textinhalt der ersten Spalte (könnte auch Links, Bilder, Videos, Karten, Tabs oder weitere Gitter enthalten)
<code><nowiki></div></nowiki></code>
<code><nowiki><div class="large-6 columns"></nowiki></code>
Textinhalt der ersten Spalte (könnte auch Links, Bilder, Videos, Karten, Tabs oder weitere Gitter enthalten)
<code><nowiki></div></nowiki></code>
<code><nowiki></div></nowiki></code>
----
''Wie es aussieht:''
<div class="row"><div class="large-6 columns">
Textinhalt der ersten Spalte (könnte auch Links, Bilder, Videos, Karten, Tabs oder weitere Gitter enthalten)
</div><div class="large-6 columns">
Textinhalt der ersten Spalte (könnte auch Links, Bilder, Videos, Karten, Tabs oder weitere Gitter enthalten)
</div>
</div>
</poem>

=== Drei Spalten (4 - 4 - 4) ===

<poem style="border: 2px solid #008d8d; background-color: #008d8d14; padding: 1em">
''Was du eingibst:''

<code><nowiki><div class="row"></nowiki></code>
<code><nowiki><div class="large-4 columns"></nowiki></code>
Inhalt der 1. Spalte
<code><nowiki>[[Datei:DEU Lüneburg COA.svg|200px|mini|links]</nowiki></code>
<code><nowiki></div></nowiki></code>
<code><nowiki><div class="large-4 columns"></nowiki></code>
Inhalt der 2. Spalte
<code><nowiki>{{#ev:youtube|https://youtu.be/cKSRp9VTjQ8}}</nowiki></code>
<code><nowiki></div></nowiki></code>
<code><nowiki><div class="large-4 columns"></nowiki></code>
Inhalt der 3. Spalte
<code><nowiki>{{#display_map:Lüneburg|height=200px|width=300px}}</nowiki></code>
<code><nowiki></div></nowiki></code>
<code><nowiki></div></nowiki></code>
----
''Wie es aussieht:''
<div class="row"><div class="large-4 columns">
Inhalt der 1. Spalte
[[Datei:DEU Lüneburg COA.svg|200px|mini|links]]
</div><div class="large-4 columns">
Inhalt der 2. Spalte
{{#ev:youtube|https://youtu.be/cKSRp9VTjQ8}}
</div><div class="large-4 columns">
Inhalt der 3. Spalte
{{#display_map:Lüneburg|height=200px|width=300px}}
</div>
</div>
</poem>

== Ungleichmäßige Spalten ==
Spalten mit ungleicher Breite lassen sich auf dieselbe Weise erstellen wie gleichmäßige Spalten. Bei den obigen Beispielen ist die Breite der Spalten jeweils auf 6 beziehungsweise auf 4 gesetzt (<code><nowiki><div class="large-6 columns"></nowiki></code> oder <code><nowiki><div class="large-4 columns"></nowiki></code>). Die Werte müssen aber nicht für alle Spalten innerhalb eines Gitters gleich sein, solange sie in der Summe 12 ergeben. Die Anzahl der Spalten wird dadurch bestimmt, wie viele <code><nowiki><div class="large-? columns"></nowiki></code>Text...<code><nowiki></div></nowiki></code> du zwischen <code><nowiki><div class="row">...</div></nowiki></code> einfügst. Ein Gitter mit vier ungleichmäßigen Spalten kann zum Beispiel so aussehen:

<poem style="border: 2px solid #008d8d; background-color: #008d8d14; padding: 1em">
<code><nowiki><div class="row"></nowiki></code>
<code><nowiki><div class="large-2 columns"></nowiki></code>
2 Einheiten
<code><nowiki></div></nowiki></code>
<code><nowiki><div class="large-3 columns"></nowiki></code>
3 Einheiten
<code><nowiki></div></nowiki></code>
<code><nowiki><div class="large-3 columns"></nowiki></code>
3 Einheiten
<code><nowiki></div></nowiki></code>
<code><nowiki><div class="large-4 columns"></nowiki></code>
4 Einheiten
<code><nowiki></div></nowiki></code>
<code><nowiki></div></nowiki></code>
----
''Wie es aussieht:''
<div class="row">
<div class="large-2 columns">
2 Einheiten
</div><div class="large-3 columns">
3 Einheiten
</div><div class="large-3 columns">
3 Einheiten
</div><div class="large-4 columns">
4 Einheiten
</div></div>
</poem>

== Überschriften ==
Spaltenüberschriften können den Inhalt zusammenfassen und zudem ein stilvolles Element sein, da sie mit dem dem Lünepedia-Blaugrün hinterlegt sind. Als Überschrift werden sie auch im Inhaltsverzeichnis angezeigt; dies lässt sich nicht verhindern.

<poem style="border: 2px solid #008d8d; background-color: #008d8d14; padding: 1em">
''Was du eingibst:''

<code><nowiki><div class="row"></nowiki></code>
<code><nowiki><div class="large-4 columns"></nowiki></code>
<code><nowiki><h3 class="subheader"></nowiki></code>Beispielüberschrift<code><nowiki></h3></nowiki></code>
Inhalt der 1. Spalte
<code><nowiki></div></nowiki></code>
<code><nowiki><div class="large-4 columns"></nowiki></code>
<code><nowiki><h3 class="subheader"></nowiki></code>Beispielüberschrift<code><nowiki></h3></nowiki></code>
Inhalt der 2. Spalte
<code><nowiki></div></nowiki></code>
<code><nowiki><div class="large-4 columns"></nowiki></code>
<code><nowiki><h3 class="subheader"></nowiki></code>Beispielüberschrift<code><nowiki></h3></nowiki></code>
Inhalt der 3. Spalte
<code><nowiki></div></nowiki></code>
<code><nowiki></div></nowiki></code>
----
<div class="row">
<div class="large-4 columns">
<h3 class="subheader">Beispielüberschrift</h3>Inhalt der 1. Spalte
</div><div class="large-4 columns">
<h3 class="subheader">Beispielüberschrift</h3>Inhalt der 2. Spalte
</div><div class="large-4 columns">
<h3 class="subheader">Beispielüberschrift</h3>Inhalt der 3. Spalte
</div></div>
</poem>

== Icons ==
Unser Layout unterstützt die Einbindung von Icons aus [https://fontawesome.com/v4.7.0/icons/ Font Awesome 4 <span class="fa fa-external-link fa-lg small-icon"></span>] (die aktuelle Edition Font Awesome 5 wird nicht unterstützt!). Bis auf das <span class="fa fa-external-link fa-lg small-icon"></span> Icon als Hinweis auf externe Links sollte auf die Verwendung in Artikeln verzichtet werden. In Überschriften von Gitterspalten bieten sie sich hingegen an. Dafür muss lediglich folgendes Sement eingefügt werden: <code><nowiki><span class="fa fa-name-des-icons fa-lg"></span></nowiki></code>

Icons können in der Bibliothek von Font Awesome 4 gesucht und der Name von dort kopiert werden. Der Name des Puzzlestück-Icons lautet zum Beispiel "<code>puzzle-piece</code>".

<poem style="border: 2px solid #008d8d; background-color: #008d8d14; padding: 1em">
<div class="row"><div class="large-6 columns">''Was du eingibst:''
<code><nowiki><span class="fa fa-puzzle-piece fa-lg"></span></nowiki></code>
</div><div class="large-6 columns">''Was du siehst:''
<span class="fa fa-puzzle-piece fa-lg"></span>
</div></div>
</poem>
----
In Überschriften von Gitterspalten kann das wie folgt aussehen

<poem style="border: 2px solid #008d8d; background-color: #008d8d14; padding: 1em">
<div class="row"><div class="large-6 columns">''Was du eingibst:''

<code><nowiki><div class="row"></nowiki></code>
<code><nowiki><div class="large-12 columns"></nowiki></code>
<code><nowiki><h3 class="subheader"></nowiki></code><br><code><nowiki><span class="fa fa-paw fa-lg"></span></nowiki></code> Überschrift mit Icon<code><nowiki></h3></nowiki></code>
Inhalt der Spalte
<code><nowiki></div></nowiki></code>
<code><nowiki></div></nowiki></code>
</div>
<div class="large-6 columns">
''Was du siehst:''
<div class="row"><div class="large-12 columns"><h3 class="subheader"> <span class="fa fa-paw fa-lg"></span> Überschrift mit Icon</h3>Inhalt der Spalte
</div>
</div></div></div>
</poem>

== Mobile Ansicht ==
Die bisher verwendeten Code-Segmente führen zu einer Darstellung auf Smartphones und Tablets, bei denen jede Spalte jeweils die volle Bildschirmbreite einnimmt und diese untereinander angeordnet sind. Diese Darstellung ist empfohlen, weil eine Unterteilung schmaler Handybildschirme in noch schmalere Spalten schnell zur Unleserlichkeit führen kann. Es lässt sich jedoch individuell festlegen, wie Spalten auf kleinen Bildschirmen angezeigt werden sollen. Dazu wird bei der Zeile <code><nowiki><div class="large-? columns"></nowiki></code> der Befehl <code><nowiki>small-?</nowiki></code> ergänzt, sodass es zum Beispiel heißt:

<code><nowiki><div class="small-6 large-4 columns"></nowiki></code>

Diese Spalte nimmt auf großen Bildschirmen 4 Einheiten ein, als ein Drittel der Fläche, und auf kleinen Bildschirmen 6 Einheiten, als die Hälfte. Ein vollständiges Gitter kann zum Beispiel so aussehen:

<poem style="border: 2px solid #008d8d; background-color: #008d8d14; padding: 1em">
<div class="row"><div class="small-6 large-4 columns"><h3 class="subheader">Überschrift</h3>Inhalt der 1. Spalte
</div><div class="small-6 large-4 columns"><h3 class="subheader">Überschrift</h3>Inhalt der 2. Spalte
</div><div class="small-12 large-4 columns"><h3 class="subheader">Überschrift</h3>Inhalt der 3. Spalte
</div>
</div>
</poem>

Der Unterschied wird erst auf kleinen Bildschirmen erkennbar oder wenn man die Breite des Browserfensters verringert.

== Weblinks ==
* MediaWiki Pivot Skin: [https://pivot.wikiproject.net/wiki/Grid Grid]

[[Kategorie:Anleitung]]

Projekt:Gitter - Versionsgeschichte

Felix Englisch am 3. Dezember 2020 um 11:08 Uhr

Felix Englisch: Die Seite wurde neu angelegt: „{{#seo: |title=Gitter (Anleitung) |description=Die Unterteilung der Bildschirmbreite in Spalten ermöglicht die übersichtliche Darstellung deiner Inhalte.}} D…“