Wechseln zu: Navigation, Suche

Hilfe:Portalseiten anlegen: Unterschied zwischen den Versionen

(Verschiedene Layouts für die Startseite des Portals)
(Verschiedene Layouts für die Startseite des Portals)
Zeile 18: Zeile 18:
  
 
In einer Skizze dargestellt unterteilen die Layoutvorlagen eine Portalstartseite also wie folgt:
 
In einer Skizze dargestellt unterteilen die Layoutvorlagen eine Portalstartseite also wie folgt:
<gallery>
+
<gallery class="center"  style="text-align:center">
Layout_lr.jpg|Layout mit Unterteilung in linke und rechte Spalte.
+
Layout_lr.jpg|Layout mit linker und rechter Spalte.
Layout_olr.jpg|Layout mit Unterteilung in obene Spalte und eine darunterliegende Spalte mit Aufteilung in linke und rechte Spalte.
+
Layout_olr.jpg|Layout mit obere, linke und rechte Spalte.
Layout_lru.jpg|Layout mit Unterteilung in eine Spalte mit Aufteilung in linke und rechte Spalte und einer darunterliegenenden überspannende Spalte.
+
Layout_lru.jpg|Layout mit linke, rechte und untere Spalte.
Layout_olru.jpg|Layout mit horizontaler Unterteilung in die Spalten oben, mitte und unten, wobei die mittlere Spalte in eine linke und rechte Spalte aufgeteilt ist.
+
Layout_olru.jpg|Layout obere, linke, rechte und untere Spalte.
 
</gallery>
 
</gallery>
  
<pre>
+
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 [[Hilfe:Vorlagen|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 ====
 +
 
 +
 
 +
==== Layout #2 mit Unterteilung obere, linke und rechte Spalte ====
 +
 
 +
 
 +
==== Layout #3 mit Unterteilung linke, rechte und untere Spalte ====
 +
 
 +
 
 +
==== Layout #4 mit Unterteilung obere, linke, rechte und untere Spalte ====
 +
 
 +
<syntaxhighlight lang="html5">
 
<div id="NameDerSeiteOhneLeerzeichen">
 
<div id="NameDerSeiteOhneLeerzeichen">
 
{| width="100%" cellspacing="0" cellpadding="0" border="0"
 
{| width="100%" cellspacing="0" cellpadding="0" border="0"
Zeile 60: Zeile 77:
 
  __NOTOC__
 
  __NOTOC__
 
__NOEDITSECTION__
 
__NOEDITSECTION__
</pre>
+
</syntaxhighlight>
 +
 
 +
 
 +
==== Erklärung zu den einzelnen Elementen im Layout ====
 +
Am Beispiel des vierten Layouts sollen die einzelnen Codezeilen kurz aufgeschlüsselt werden. Dies dient nur dem Verständnis und kann übersprungen werden.
  
 
== Boxen mit Inhalten ==
 
== Boxen mit Inhalten ==

Version vom 2. August 2014, 14:36 Uhr

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:

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

Layout #2 mit Unterteilung obere, linke und rechte Spalte

Layout #3 mit Unterteilung linke, rechte und untere Spalte

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

<div id="NameDerSeiteOhneLeerzeichen">
{| width="100%" cellspacing="0" cellpadding="0" border="0"
| colspan="2" |
 
<div class="div-boxes">
<!-- Darstellender Bereich der oberen Spalte -->
</div>
 
|-
| width="60%" style="vertical-align:top;" |
 
<div class="spalte-links">
<!-- Darstellender Bereich der linken Spalte -->
</div>
 
| width="50%" style="vertical-align:top;" |
 
<div class="spalte-rechts">
<!-- Darstellender Bereich der rechten Spalte -->
</div>
 
|-
| colspan="2" |
 
<div class="div-boxes">
<!-- Darstellender Bereich der unteren Spalte -->
</div>
 
|-
|}
</div>
 
 __NOTOC__
__NOEDITSECTION__


Erklärung zu den einzelnen Elementen im Layout

Am Beispiel des vierten Layouts sollen die einzelnen Codezeilen kurz aufgeschlüsselt werden. Dies dient nur dem Verständnis und kann übersprungen werden.

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">
<!-- Kommentar mit einer kurzen Bemerkung über den bereitgestelten Inhalt innerhalb dieser Box -->
== Ü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>