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

1. __NOTOC__
2. __NOEDITSECTION__
3. <div id="NameDerSeiteOhneLeerzeichen">
4. {| width="100%" cellspacing="0" cellpadding="0" border="0"
5. | width="50%" style="vertical-align:top;" |
6.  
7. <div class="spalte-links">
8. <!-- Darstellender Bereich der linken Spalte -->
9. </div>
10.  
11. | width="50%" style="vertical-align:top;" |
12.  
13. <div class="spalte-rechts">
14. <!-- Darstellender Bereich der rechten Spalte -->
15. </div>
16.  
17. |-
18. |}
19. </div>

Layout #2 mit Unterteilung obere, linke und rechte Spalte

Code zum zweiten Layout:

1. __NOTOC__
2. __NOEDITSECTION__
3. <div id="NameDerSeiteOhneLeerzeichen">
4. {| width="100%" cellspacing="0" cellpadding="0" border="0"
5. | colspan="2" |
6.  
7. <!-- Darstellender Bereich der oberen Spalte -->
8. <div class="spalte-oben">
9. <!-- Darstellender Bereich der rechten Spalte -->
10. </div>
11.  
12. |-
13. | width="50%" style="vertical-align:top;" |
14.  
15. <div class="spalte-links">
16. <!-- Darstellender Bereich der linken Spalte -->
17. </div>
18.  
19. | width="50%" style="vertical-align:top;" |
20.  
21. <div class="spalte-rechts">
22. <!-- Darstellender Bereich der rechten Spalte -->
23. </div>
24.  
25. |-
26. |}
27. </div>

Layout #3 mit Unterteilung linke, rechte und untere Spalte

Code zum dritten Layout:

1. __NOTOC__
2. __NOEDITSECTION__
3. <div id="NameDerSeiteOhneLeerzeichen">
4. {| width="100%" cellspacing="0" cellpadding="0" border="0"
5. | width="50%" style="vertical-align:top;" |
6.  
7. <div class="spalte-links">
8. <!-- Darstellender Bereich der linken Spalte -->
9. </div>
10.  
11. | width="50%" style="vertical-align:top;" |
12.  
13. <div class="spalte-rechts">
14. <!-- Darstellender Bereich der rechten Spalte -->
15. </div>
16.  
17. |-
18. | colspan="2" |
19.  
20. <!-- Darstellender Bereich der unteren Spalte -->
21. <div class="spalte-unten">
22. <!-- Darstellender Bereich der rechten Spalte -->
23. </div>
24. |-
25. |}
26. </div>

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

Code zum vierten Layout:

1. __NOTOC__
2. __NOEDITSECTION__
3. <div id="NameDerSeiteOhneLeerzeichen">
4. {| width="100%" cellspacing="0" cellpadding="0" border="0"
5. | colspan="2" |
6.  
7. <!-- Darstellender Bereich der oberen Spalte -->
8. <div class="spalte-oben">
9. <!-- Darstellender Bereich der rechten Spalte -->
10. </div>
11.  
12. |-
13. | width="50%" style="vertical-align:top;" |
14.  
15. <div class="spalte-links">
16. <!-- Darstellender Bereich der linken Spalte -->
17. </div>
18.  
19. | width="50%" style="vertical-align:top;" |
20.  
21. <div class="spalte-rechts">
22. <!-- Darstellender Bereich der rechten Spalte -->
23. </div>
24.  
25. |-
26. | colspan="2" |
27.  
28. <!-- Darstellender Bereich der unteren Spalte -->
29. <div class="spalte-unten">
30. <!-- Darstellender Bereich der rechten Spalte -->
31. </div>
32. |-
33. |}
34. </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

1. __NOTOC__
2. __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 __NOEDITSECTION__ blendet die Bearbeitungslinks aus, welche automatisch neben jeder Überschrift platziert werden.

Zeile 4, 5, 12, 13, 32 und 33

...
{| width="100%" cellspacing="0" cellpadding="0" border="0"
| colspan="2" |
...
|-
| width="50%" style="vertical-align:top;" |
...
|-
|}
...

Dies sind ebenfalls Befehle aus dem mediaWiki-Befehlssatz und erzeugen eine Tabelle. Näheres zum Aufbau von Tabellen im mediaWiki und der Bedeutung der einzelnen Attribute (es handelt sich bei diesen um Attribute aus der HTML Syntax) ist im Artikel [[Hilfe:Tabellen|Tabellen] beschrieben.

Zeile 3 und 34, 8 und 10, 15 und 17, 21 und 23 sowie 29 und 31

...
<div id="NameDerSeiteOhneLeerzeichen">
...
<div class="spalte-oben">
<!-- Darstellender Bereich der rechten Spalte -->
</div>
...
<div class="spalte-links">
<!-- Darstellender Bereich der linken Spalte -->
</div>
...
<div class="spalte-rechts">
<!-- Darstellender Bereich der rechten Spalte -->
</div>
...
<!-- Darstellender Bereich der unteren Spalte -->
<div class="spalte-unten">
<!-- Darstellender Bereich der rechten Spalte -->
</div>
...
</div>

In den benannten Zeilen sind die sogenannten DIV-Boxen definiert. Diese gruppieren die Elemente in rechteckige Kästen und erleichtern das Platzieren und Gestalten von Inhalten mittels CSS. Da DIV-Boxen in HTML als Container beschrieben sind und Container-Elemente sich durch öffnende und schließende Befehle auszeichnen, sind die zusammenhängenden Zeilen entsprechend benannt. Demnach öffnet die DIV-Box in Zeile 3 ein größeren Kasten welcher dann in Zeile 34 wieder geschlossen wird. Alles was sich innerhalb dieser Zeilen befindet ist somit innerhalb dieses größeren Kastens eingebettet und wird dementsprechend mit von diesem beeinflusst. Die Angabe von

id="NameDerSeiteOhneLeerzeichen"

ist im Übrigen ebenfalls optional und kann bei Bedarf weggelassen werden.

Die DIV-Boxen in Zeile 8 bis 10, 15 bis 17, 21 bis 23 und 29 bis 31 gliedern dabei die Inhalte in den jeweiligen Bereichen. Diese sollten beibehalten werden, da die Definitionen bzgl. des Aussehens anhand dieser Boxen definiert sind und dessen fehlen somit auch Auswirkungen in der Darstellung haben. Innerhalb dieser Boxen können dann aber entsprechend die anzuzeigenden Inhalte platziert werden. Sollen diese Inhalte optisch voneinander abgegrenzt werden können dazu wiederum DIV-Boxen verwendet werden. Ein Beispiel ist im nachfolgenden Abschnitt definiert.

Es empfiehlt sich die Inhalte über entsprechende Vorlagen einzubinden, da dies die Pflege erleichtert und das Layout dann soweit geschützt werden kann, dass Unbefugte dies nicht ohne weiteres ändern können.

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:

1. <div  class="div-boxes">
2. <!-- Kommentar mit einer kurzen Bemerkung über den bereitgestelten Inhalt innerhalb dieser Box -->
3. == Überschrift der Box bzw. Name des in der Box dargestellten Inhalts ==
4. <div class="div-boxes-content">
5. {{Vorlage:Vorbereiteter Inhalt zur Darstellung innerhalb der Box}}
6. </div>
7. </div>

Hierbei handelt es sich um eine verschachtelte DIV-Boxen-Anordnung. Die erste Div-Box definiert den äußeren Kasten (Zeile 1 und 7) und bekommt mit der Zuweisung class="div-boxes" vorgegeben, dass diese DIV-Box optisch sich entsprechend der CSS-Definitionen div-boxes zu verhalten hat. Innerhalb dieser Definition ist unter anderem festgelegt, dass die DIV-Box blau umrandet wird.

<!-- Kommentar mit einer kurzen Bemerkung über den bereitgestelten Inhalt innerhalb dieser Box --> gibt einen einfachen Kommentar in HTML an und sollte aus Gründen der Wartbarkeit beibehalten werden. Anhand dieses Kommentars sollte es auch neu dazustoßende Gruppenmitglieder möglich sein sich in die Struktur einzuarbeiten ohne direkt das komplette Codegerüst durchgehen zu müssen. Auch erleichtert es einem selbst später sich im Code zurecht zu finden. Kommentare werden in der Ausgabe des Browsers nicht angezeigt.

Mittels == Überschrift der Box bzw. Name des in der Box dargestellten Inhalts == wird die Überschrift bzw. der Name der DIV-Box gesetzt welcher angezeigt werden soll. Diese wird nach dem Anfang der äußeren DIV-Box und vor dem Anfang der inneren DIV-Box eingefügt!

Die innere DIV-Box, in welcher dann der eigentliche Inhalt platziert wird, ist zwischen den Zeilen 4 bis 6 beschrieben. Dabei leitet <div class="div-boxes-content"> den Bereich ein und in Zeile 6 wird diese Box mittels </div> wieder geschlossen. In Zeile 5 kann dann entsprechend der Inhalt platziert werden. In diesem Beispiel wird ein bestehender Artikel mittels {{Vorlage:Vorbereiteter Inhalt zur Darstellung innerhalb der Box}} eingebunden. Diese vorgehensweise empfiehlt sich auf Grund der einfachen Wartbarkeit!