Seitenvorlagen
Sie sind hier: Startseite › Templates › Seitenvorlagen
Inhaltsübersicht:
- Templates zur freien Verwendung
- Umsetzung und Aufbau der Templates
- Zusätzliche Eigenschaften der Templates
Templates zur freien Verwendung
Web-Templates (dt. Seitenvorlagen) sind Dateien, die das Grundgerüst einer Webseite abbilden und somit das Erstellen einer Website erleichtern. Zur Unterstützung des ITIB-Alltagsgeschäftes wurden Web-Templates in verschiedenen Layout-Varianten entwickelt, auf die nachfolgend näher eingegangen wird. Sie setzen sich aus Zeilen, einer horizontalen Aufteilung in verschiedene Bereiche, und Spalten, einer vertikalen Aufteilung in verschiedene Bereiche, zusammen. Die entwickelten Templates bilden zwölf Seitengerüste ab, die in der Praxis häufig benötigt werden.
Bildbeschreibung "Skizzenhafte Darstellung der entwickelten Templates": Skizzierte Abbildung des Aufbaus der Seitenvorlagen im Ein-Zeilen-, Zwei-Zeilen- und Drei-Zeilen-Layout.
Einzeiler
Das einzeilige Ein-Spalten-Layout wird hier vernachlässigt. Ein solches Layout wird meist genutzt, um Besuchern mitzuteilen, dass eine Webseite gerade überarbeitet wird oder die Website sich erst im Aufbau befindet. Im "Ein-Zeilen"-Layout stehen daher nur zwei Template-Varianten zur Verfügung (siehe nachfolgendes Bild, von links nach rechts):
- Template 1.1
Ein-Zeiler mit zwei Spalten: z.B. links Navigation, rechts Inhalt (ausführliche Beschreibung siehe Template 1.1)
- Template 1.2
Ein-Zeiler mit drei Spalten: z.B. links Navigation, mittig Inhalt, rechts aktuelle Mitteilungen (ausführliche Beschreibung siehe Template 1.2)
Bildbeschreibung "Templates im Ein-Zeilen-Layout" (von links nach rechts): Abbildung der Seitenaufteilung für Template 1.1 (Ein-Zeiler mit zwei Spalten) und Template 1.2 (Ein-Zeiler mit drei Spalten).
Zweizeiler
Das "Zwei-Zeilen"-Layout wird in sechs Template-Varianten abgebildet. Der obere Bereich (Zeile 1, Kopfbereich) kann für ein Logo, ein Bild oder Adressdaten genutzt werden, der untere Bereich (Zeile 2, Inhaltsbereich) für die Navigation und den Inhalt (siehe nachfolgendes Bild, von links nach rechts):
- Template 2.1
Zwei-Zeiler mit jeweils einer Spalte im Kopf- und Inhaltsbereich: z.B. oben Navigation, unten Inhalt (ausführliche Beschreibung siehe Template 2.1)
- Template 2.2
Zwei-Zeiler mit einer Spalte im Kopfbereich und zwei Spalten im Inhaltsbereich: z.B. oben Bildelement, unten links Navigation, unten rechts Inhalt (ausführliche Beschreibung siehe Template 2.2)
- Template 2.3
Zwei-Zeiler mit einer Spalte über zwei Zeilen links und zwei Zeilen als Kopf- und Inhaltsbereich rechts: z.B. links Navigation, oben rechts Adressdaten, unten rechts Inhalt (ausführliche Beschreibung siehe Template 2.3)
- Template 2.4
Zwei-Zeiler mit jeweils zwei Spalten im Kopf- und Inhaltsbereich: z.B. oben links Logo, oben rechts Bildelement, unten links Navigation, unten rechts Inhalt (ausführliche Beschreibung siehe Template 2.4)
- Template 2.5
Zwei-Zeiler mit drei Spalten im Kopfbereich und zwei Spalten im Inhaltsbereich: z.B. oben links Logo, oben mittig primäre Navigation, oben rechts Adressdaten, unten links sekundäre Navigation, unten rechts Inhalt (ausführliche Beschreibung siehe Template 2.5)
- Template 2.6
Zwei-Zeiler mit einer Spalte im Kopf- und drei Spalten im Inhaltsbereich: z.B. oben Grafikelement, unten links Navigation, unten mittig Inhalt, unten rechts aktuelle Mitteilungen (ausführliche Beschreibung siehe Template 2.6)
- Template 2.7
Zwei-Zeiler mit jeweils drei Spalten im Kopf- und Inhaltsbereich: z.B. oben links Logo, oben mittig primäre Navigation, oben rechts Adressdaten, unten links sekundäre Navigation, unten mittig Inhalt, unten rechts aktuelle Mitteilungen (ausführliche Beschreibung siehe Template 2.7)
Bildbeschreibung "Templates im Zwei-Zeilen-Layout" (von links nach rechts): Abbildung der Seitenaufteilung für Template 2.1 (Zwei-Zeiler mit jeweils einer Spalte im Kopf- und Inhaltsbereich), Template 2.2 (Zwei-Zeiler mit einer Spalte im Kopfbereich und zwei Spalten im Inhaltsbereich), Template 2.3 (Zwei-Zeiler mit einer Spalte über zwei Zeilen links und zwei Zeilen als Kopf- und Inhaltsbereich rechts), Template 2.4 (Zwei-Zeiler mit jeweils zwei Spalten im Kopf- und Inhaltsbereich), Template 2.5 (Zwei-Zeiler mit drei Spalten im Kopfbereich und zwei Spalten im Inhaltsbereich), Template 2.6 (Zwei-Zeiler mit einer Zeile über drei Spalten im Kopfbereich und drei Spalten im Inhaltsbereich) und Template 2.7 (Zwei-Zeiler mit jeweils drei Spalten im Kopf- und Inhaltsbereich).
Dreizeiler
Im "Drei-Zeilen"-Layout stehen drei Template-Varianten zur Verfügung. Der obere Bereich (Zeile 1, Kopfbereich) bietet Platz für ein Logo, ein Bildelement oder Adressdaten, der mittlere Bereich (Zeile 2, Inhaltsbereich) für die Navigation und den Inhalt, der untere Bereich (Zeile 3, Fußbereich) für den Impressum-Verweis und spezielle Verweise, z.B. Seitenanfang, Startseite und Kontakt (siehe nachfolgendes Bild, von links nach rechts):
- Template 3.1
Drei-Zeiler mit jeweils einer Spalte im Kopf-, Inhalts- und Fußbereich: z.B. oben Navigation, mittig Inhalt, unten Adressdaten (ausführliche Beschreibung siehe Template 3.1)
- Template 3.2
Drei-Zeiler mit jeweils zwei Spalten im Kopf-, Inhalts- und Fußbereich: z.B. oben links Logo, oben rechts Bildelement, mittig links Navigation, mittig rechts Inhalt, unten links Verweis auf Impressum, unten rechts Adressdaten (ausführliche Beschreibung siehe Template 3.2)
- Template 3.3
Drei-Zeiler mit jeweils drei Spalten im Kopf-, Inhalts- und Fußbereich: z.B. oben links Logo, oben mittig primäre Navigation, oben rechts Suchen-Box, mittig links sekundäre Navigation, mittig Inhalt, mittig rechts aktuelle Mitteilungen, unten links Verweis auf Impressum, unten mittig Adressdaten, unten rechts Verweis auf Kontakt (ausführliche Beschreibung siehe Template 3.3)
Bildbeschreibung "Templates im Drei-Zeilen-Layout" (von links nach rechts): Abbildung der Seitenaufteilung für Template 3.1 (Drei-Zeiler mit jeweils einer Spalte im Kopf-, Inhalts- und Fußbereich), Template 3.2 (Drei-Zeiler mit jeweils zwei Spalten im Kopf-, Inhalts- und Fußbereich) und Template 3.3 (Drei-Zeiler mit jeweils drei Spalten im Kopf-, Inhalts- und Fußbereich).
Umsetzung und Aufbau der Templates
Die Seitenvorlagen sind in XHTML 1.0 Strict umgesetzt und die Layout-Zuweisungen in einer externen CSS-Datei festgelegt. Jede XHTML-Datei besteht aus einem Dokumentenkopf und einem Dokumentenkörper. Der Dokumentenkopf enthält Metadaten, die im Browser größtenteils nicht sichtbar sind, der Dokumentenkörper die sichtbaren Kopf-, Navigations-, Inhalts- und Fußbereiche mit den pro Template verschiedenen Aufteilungen in Zeilen und Spalten.
Je nach Aufbau des Template entstehen z.B. Bereiche für Logo, Hauptnavigation, Unternavigation, Hilfsnavigation, Adresse, Inhalt und aktuelle Mitteilungen. Durch umfangreiche Kommentare sind die Quelltexte der Templates in Abschnitte gegliedert. Gekennzeichnet sind Beginn und Ende eines jeden Bereiches, die in Containern umgesetzt sind. Diese Gestaltung ermöglicht eine Modularisierung und damit komfortable Nutzung innerhalb von Content Management Systemen.
Beispiel XHTML-Datei - Beispielhafter Aufbau eines 3-Zeilen-Template (Ausschnitt):
<!-- Begin Page-Container -->
<div id="top">
<!-- Begin Header-Container -->
<div id="header">
[Platzhalter für den Kopfbereich (Zeile 1)]
<!-- End Header-Container -->
</div>
<!-- Begin Main-Container -->
<div id="main">
[Platzhalter für den Inhaltsbereich (Zeile 2)]
<!-- End Main-Container -->
</div>
<!-- Begin Footer-Container -->
<div id="footer">
[Platzhalter für den Fußbereich (Zeile 3)]
<!-- End Footer-Container -->
</div>
<!-- End Page-Container -->
</div>
Zusätzliche Eigenschaften der Templates
Die Templates sind so
konzipiert, dass bis zu einer minimalen Auflösung von
800 × 600 px alle Bereiche
sichtbar bleiben, ohne dass ein horizontaler Scrollbalken entsteht.
Bei allen höheren Auflösungen erfolgt eine zentrierte
Positionierung der Seite mit einer maximalen Breite
von 65em. Dabei entstehende Ränder links
und rechts werden farblich abgesetzt.
Beispiel XHTML-Datei - Positionierung der Seite:
<body>
<!-- Begin Page-Container -->
<div id="top">
[Webseite zentriert positionieren.]
<!-- End Page-Container -->
</div>
</body>
Für Liebhaber der Tastatursteuerung und Nutzer eines Screenreader sind in den Templates zu Beginn des Quelltextes "unsichtbare Sprungnavigatoren", auch Skip-Links genannt, hinterlegt. Diese geben die Möglichkeit die Navigation zu beschleunigen, bestimmte Bereiche der Seite zu überspringen und direkt zu wesentlichen Stellen der Seite zu navigieren (z.B. direkt zur Navigation oder zum eigentlichen Inhalt der Seite zu springen).
Beispiel XHTML-Datei - Einbindung von Sprungmarken:
<!-- Begin Page-Container -->
<div id="top">
<!-- Skip-Navigation -->
<ol id="skip">
<li><a href="#navigation"
title="zur Hauptnavigation springen">zur Hauptnavigation</a></li>
<li><a href="#subnavigation"
title="zur Unternavigation springen">zur Unternavigation</a></li>
<li><a href="#content"
title="zum Inhalt springen">zum Inhalt</a></li>
</ol>
[...]
Über die in den CSS-Dateien hinterlegten Formatierungsanweisungen werden diese Skip-Links nur bei Fokus sichtbar.
Beispiel CSS-Datei - Einbindung von Sprungmarken (Ausschnitt):
/* Liste mit Skip-Navigation:
Verweis generell */
ol#skip a:link,
ol#skip a:visited,
ol#skip a:hover {
/* Positionierung: links ausserhalb des Anzeige-Bereiches */
left: -400em;
/* Positionierung: absolut */
position: absolute;
}
/* Liste mit Skip-Navigation:
Verweis bei Fokus */
ol#skip a:active,
ol#skip a:focus {
/* Positionierung: links oben */
left: 0;
/* Horizontale Ausrichtung: zentriert */
text-align: center;
/* Breite: 20em */
width: 20em;
}
Weiterhin ist in jedem Template
ein Absatz mit einem Verweis zum Seitenanfang hinterlegt
(<p class="up">). Als Sprung-Ziel dient
der allgemeine Seiten-Container <div id="top">.
Durch das Anbieten solcher Skip-Links
innerhalb des eigentlichen Inhaltes hat der Nutzer die
Möglichkeit, nach längeren Textpassagen ohne langwieriges
Scrollen zurück zum Seitenanfang zu gelangen.
Beispiel XHTML-Datei - Einbindung eines Sprungs zum Seitenanfang:
<p class="up"><a href="#top"
title="zum Seitenanfang dieser Seite
springen">zum Seitenanfang</a></p>
Als kleine Beigabe wurde bereits ein Favicon in
die Templates eingebunden
(favicon.ico). Ein Favicon ist ein Symbol, das
in der Browser-Adresszeile vor
der Webadresse angezeigt wird. Auch beim Setzen von Lesezeichen
wird dieses Symbol mit aufgenommen.
Beispiel XHTML-Datei - Einbindung eines Favicon:
<link rel="shortcut icon"
href="favicon.ico" />
Bei mehrstufigen Navigationsebenen ist das
Einbinden eines sog.
Brotkrumenpfades empfehlenswert. Dieser gibt dem Nutzer
die Möglichkeit, durch die Hierarchien bis zurück zur
Startseite zu navigieren. In einigen Templates,
die auf die Nutzung mehrstufiger Navigationshierarchien deuten,
ist ein solcher Brotkrumenpfad beispielhaft hinterlegt
(<p id="breadcrumb">).
Beispiel XHTML-Datei - Einbindung eines Brotkrumenpfades:
<p id="breadcrumb">Sie befinden sich hier:
<a href="index.html">Startseite</a>
> <a href="navi5.html">Primär 5</a>
> Sekundär 5.5</p>