Wechseln zu: Navigation, Suche

Hilfe:Portalseiten anlegen: Unterschied zwischen den Versionen

(Die Seite wurde neu angelegt: „Verschiedene Layouts <pre> <div id="hauptseite"> {| width="100%" cellspacing="0" cellpadding="0" border="0" | colspan="2" | <!-- Willkommen --> <div id="haupt…“)
 
Zeile 1: Zeile 1:
Verschiedene Layouts
+
Als Portalseiten werden seperat eingerichtete Namensräume wie jene der Lokalgruppen oder einiger Dauerprojekte verstanden. Erkennbar sind diese anhand des Seitennamens die im Muster <kbd>Namensraumname:Artikelname</kbd> aufgebaut sind. Dabei ist der <kbd>Namensraumname</kbd> durch den entsprechenden Namensraum und <kbd>Artikelname</kbd> durch den entsprechenden Artikel zu setzen.
  
<pre>
+
Ein Beispiel ist <kbd>Hilfe:Start</kbd>. Hier setzt sich der Seitenname aus dem Namen des Namensraum <kbd>Hilfe</kbd> und den Artikelname <kbd>Start</kbd> zusammen und führt auf die Startseite des Help-Centers.
<div id="hauptseite">
+
{| width="100%" cellspacing="0" cellpadding="0" border="0"
+
| colspan="2" |
+
<!-- Willkommen -->
+
<div id="hauptseite-willkommen" class="div-boxes">
+
== Willkommen auf der Seite von Blue Engineering ==
+
  
<div align="center">
+
Weitere Informationen hierzu findet ihr in den Help-Center Artikeln [[Hilfe:Namensräume | Namensräume (engl. Namespaces)]] und [[Hilfe:Artikel anlegen | Artikel anlegen (Allgemein)]].
Blue Engineering setzt sich aus einer Gruppe von Menschen zusammen die das gemeinsame Ziel verfolgen, andere Menschen für ihre soziale und ökologische Verantwortung zu sensibilisieren und möchte diese Ziele unter anderem in das Bewusstsein angehender Ingenieurinnen und Ingenieure rücken.
+
  
<div class="intern">
 
[[Kontakt|Kontakt]]&nbsp;·
 
[[Spezial:Statistik|Statistik]]&nbsp;·
 
[[Hilfe:Ich möchte mich beteiligen|Ich möchte mich beteiligen]]
 
</div>
 
  
</div>
+
== Aufbau einer Portalseite ==
</div>
+
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 <kbd>Portalname:Start</kbd> heißen. Wie diese Startseite gestaltet ist bleibt letztendlich der jeweiligen Betreuergruppe überlassen.
| width="60%" style="vertical-align:top;" |
+
<!-- Neuigkeiten -->
+
<div class="spalte-links">
+
  
<div id="neuigkeiten" class="div-boxes">
+
Sollen mehrere verschiedene Informationen auf der Startseite untergebracht werden können die unten stehenden Layoutvorlagen beim Aufbau und der Layoutgestaltung hilfreich sein.
== Neuigkeiten ==
+
  
<div class="div-boxes-content">
 
{{News:Start}}
 
----
 
<!--div class="mehr">[[{{LOCALDAY}}. {{LOCALMONTHNAME}}|Weitere Ereignisse]]&nbsp;· <span class="icon">[[Datei:Feed-icon.svg|12px|alt=|link=//de.wikipedia.org/w/api.php?action=featuredfeed&feed=onthisday&feedformat=atom|RSS-Feed]]</span>&nbsp;<span class="plainlinks">[//de.wikipedia.org/w/api.php?action=featuredfeed&feed=onthisday&feedformat=atom RSS-Feed]</span></div-->
 
<div>
 
  
<div>
+
== 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.
  
<div>
+
In einer Skizze dargestellt unterteilen die Layoutvorlagen eine Portalstartseite also wie folgt:
 +
<gallery>
 +
Layout_lr.jpg|Layout mit Unterteilung in linke und rechte Spalte.
 +
Layout_lro.jpg|Layout mit Unterteilung in obene Spalte und eine darunterliegende Spalte mit Aufteilung in 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_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.
 +
</gallery>
  
| width="50%" style="vertical-align:top;" |
+
<pre>
 
+
<div id="NameDerSeiteOhneLeerzeichen">
<div class="spalte-rechts">
+
{| width="100%" cellspacing="0" cellpadding="0" border="0"
 +
| colspan="2" |
  
 
<div class="div-boxes">
 
<div class="div-boxes">
<!-- Faktenkarte -->
+
<!-- Darstellender Bereich der oberen Spalte -->
== Faktenkarte der Woche ==
+
<div class="div-boxes-content">
+
{{Vorlage:Faktenkarte_der_Woche}}
+
 
</div>
 
</div>
  
<div align="center">
+
|-
[[:Kategorie:Faktenkarten|Mehr Faktenkarten]]
+
| width="60%" style="vertical-align:top;" |
 +
 
 +
<div class="spalte-links">
 +
<!-- Darstellender Bereich der linken Spalte -->
 
</div>
 
</div>
  
 +
| width="50%" style="vertical-align:top;" |
 +
 +
<div class="spalte-rechts">
 +
<!-- Darstellender Bereich der rechten Spalte -->
 
</div>
 
</div>
 +
 +
|-
 +
| colspan="2" |
  
 
<div class="div-boxes">
 
<div class="div-boxes">
<!-- Artikelauswahl -->
+
<!-- Darstellender Bereich der unteren Spalte -->
== Artikel der Woche ==
+
<div class="div-boxes-content">
+
{{Vorlage:Artikel der Woche}}
+
 
</div>
 
</div>
  
<div align="center">
+
|-
[[:Kategorie:Bausteine|Bausteine]]&nbsp;·
+
|}
[[:Kategorie:Wissensspeicher|Wissensspeicher]]&nbsp;
+
 
</div>
 
</div>
  
</div>
+
__NOTOC__
 +
__NOEDITSECTION__
 +
</pre>
 +
 
 +
 
 +
== 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:
  
 +
<pre>
 
<div  class="div-boxes">
 
<div  class="div-boxes">
<!-- Termine -->
+
<!-- Kommentar mit einer kurzen Bemerkung über den bereitgestelten Inhalt innerhalb dieser Box -->
== Anstehende Termine ==
+
== Überschrift der Box bzw. Name des in der Box dargestellten Inhalts ==
 
<div class="div-boxes-content">
 
<div class="div-boxes-content">
{{Vorlage:Anstehende Termine}}
+
{{Vorlage:Vorbereiteter Inhalt zur Darstellung innerhalb der Box}}
 
</div>
 
</div>
 
</div>
 
</div>
 
</div>
 
|-
 
|}
 
 
 
<!-- Wird über einen Eintrag in der common.css ausgeblendet -->
 
__NOTOC__
 
__NOEDITSECTION__
 
 
</pre>
 
</pre>

Version vom 2. August 2014, 13:20 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:

<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__


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>