Hilfe:Portalseiten anlegen

Als Portalseiten werden seperat eingerichtete Namensräume wie jene der Lokalgruppen oder einiger Dauerprojekte verstanden. Erkennbar sind diese anhand des Seitennamens die im Muster Namensraumname:Artikelname aufgebaut sind. Dabei ist der Namensraumname durch den entsprechenden Namensraum und Artikelname durch den entsprechenden Artikel zu setzen.

Ein Beispiel ist Hilfe:Start. Hier setzt sich der Seitenname aus dem Namen des Namensraum Hilfe und den Artikelname Start zusammen und führt auf die Startseite des Help-Centers.

Weitere Informationen hierzu findet ihr in den Help-Center Artikeln Namensräume (engl. Namespaces) und Artikel anlegen (Allgemein).

Aufbau einer Portalseite

Portalseiten können natürlich auch einfach so eingerichtet werden. Es bietet sich aber wegen der Übersichtlichkeit und Strukturierung an für entsprechende Portale vorab einen Namensraum einzurichten.

Ein Portal benötigt eine Startseite, welche als Einsprungspunkt für das Portal dient, und sollte der Einheitlichkeit wegen mit dem Artikel Start beginnen. Entsprechend würde der Einsprungspunkt dann Portalname:Start heißen. Wie diese Startseite gestaltet ist bleibt letztendlich der jeweiligen Betreuergruppe überlassen.

Sollen mehrere verschiedene Informationen auf der Startseite untergebracht werden können die unten stehenden Layoutvorlagen beim Aufbau und der Layoutgestaltung hilfreich sein.

Verschiedene Layouts für die Startseite des Portals

Für die Portalstartseite stehen vier verschiedene Layoutvorlagen zur Verfügung. Diese Layoutvorlagen basieren auf ein klassisches zweigeteiltes Layout mit einer linken und rechten Spalte und unterscheiden sich ausschließlich darin, ob diese einen oberen und/oder unteren über die gesamte Breite der Seite spannenden Bereich aufweisen.

In einer Skizze dargestellt unterteilen die Layoutvorlagen eine Portalstartseite also wie folgt:

Layout mit linker und rechter Spalte.
Layout mit obere, linke und rechte Spalte.
Layout mit linke, rechte und untere Spalte.
Layout obere, linke, rechte und untere Spalte.

Diese Layouts dienen als Basis für die Ausgestaltung der Portalstartseite. Ob und inwiefern dieses Layout dann bei Unterseiten weiter beibehalten wird muss von der für das Portal zuständigen Gruppe entschieden werden. Das Layoutgrundgerüst würde dann entsprechend bei jeder einzelnen Unterseite bei behalten werden.

Codevorlagen für die Grundlayouts

Im folgenden ist nun das Codegrundgerüst für die jeweiligen Layouts aufgeführt. Der Code des gewünschen Layouts wird schlicht via Copy-Past in den jeweiligen Artikel eingefügt und die Inhaltsbereiche bearbeitet. Für das Einbinden der Inhalte ins Layout empfiehlt es sich generell mit entsprechenden Vorlagen zu arbeiten, den Inhalt in diesen zu platzieren und diese wiederum ins Layout einzubinden. Näheres zum Einbinden und Nutzen von Vorlagen ist dem entsprechenden Artikel zu entnehmen.

Layout #1 mit Unterteilung linke und rechte Spalte

Code zum ersten Layout

__NOTOC__
__NOEDITSECTION__
<div id="NameDerSeiteOhneLeerzeichen">
{| width="100%" cellspacing="0" cellpadding="0" border="0"
| width="50%" style="vertical-align:top;" |
<div class="spalte-links">
</div>
| width="50%" style="vertical-align:top;" |
<div class="spalte-rechts">
</div>
|-
|}
</div>

Layout #2 mit Unterteilung obere, linke und rechte Spalte

Code zum zweiten Layout:

__NOTOC__
__NOEDITSECTION__
<div id="NameDerSeiteOhneLeerzeichen">
{| width="100%" cellspacing="0" cellpadding="0" border="0"
| colspan="2" |
<div class="spalte-oben">
</div>
|-
| width="50%" style="vertical-align:top;" |
<div class="spalte-links">
</div>
| width="50%" style="vertical-align:top;" |
<div class="spalte-rechts">
</div>
|-
|}
</div>

Layout #3 mit Unterteilung linke, rechte und untere Spalte

Code zum dritten Layout:

__NOTOC__
__NOEDITSECTION__
<div id="NameDerSeiteOhneLeerzeichen">
{| width="100%" cellspacing="0" cellpadding="0" border="0"
| width="50%" style="vertical-align:top;" |
<div class="spalte-links">
</div>
| width="50%" style="vertical-align:top;" |
<div class="spalte-rechts">
</div>
|-
| colspan="2" |
<div class="spalte-unten">
</div>
|-
|}
</div>

Layout #4 mit Unterteilung obere, linke, rechte und untere Spalte

Code zum vierten Layout:

__NOTOC__
__NOEDITSECTION__
<div id="NameDerSeiteOhneLeerzeichen">
{| width="100%" cellspacing="0" cellpadding="0" border="0"
| colspan="2" |
<div class="spalte-oben">
</div>
|-
| width="50%" style="vertical-align:top;" |
<div class="spalte-links">
</div>
| width="50%" style="vertical-align:top;" |
<div class="spalte-rechts">
</div>
|-
| colspan="2" |
<div class="spalte-unten">
</div>
|-
|}
</div>

Erklärung zu den einzelnen Elementen im Layout

Am Beispiel des vierten Layouts sollen die Codezeilen kurz aufgeschlüsselt werden. Dies dient nur dem Verständnis und kann übersprungen werden. Wer bereits über einige Kenntnisse zu CSS und HTML verfügt wird sehr wahrscheinlich hier keine neuen Erkenntnisse gewinnen.

Zeile 1 und 2

__NOTOC__
__NOEDITSECTION__

Hierbei handelt es sich um sogenannte magische Befehle des mediaWikis. __NOTOC__ sorgt dafür, dass auf der Seite kein Inhaltsverzeichnis ausgegeben wird. Dies ist dann notwendig wenn Überschriften benutzt werden und was bei diesen Layouts der Fall ist. Der magische Befehl blendet die Bearbeitungslinks aus, welche automatisch neben jeder Überschrift platziert werden.

===== Zeile

Boxen mit Inhalten

Um Informationen auch optisch voneinander abheben zu können empfiehlt sich der Einsatz sogenannter DIV-Boxen. Dies sind Bereiche in welchen Informationen leichter gruppiert und durch die vordefinierten Einstellungen optisch abgegrenzt werden können. Der Aufbau einer solchen Box sieht wie folgt aus:

<div class="div-boxes">
== Überschrift der Box bzw. Name des in der Box dargestellten Inhalts ==
<div class="div-boxes-content">
{{Vorlage:Vorbereiteter Inhalt zur Darstellung innerhalb der Box}}
</div>
</div>