Template 3.3: Drei-Zeiler mit jeweils drei Spalten im Kopf-, Inhalts- und Fußbereich
Sie sind hier: Startseite › Templates › Template 3.3
Inhaltsübersicht:
Vorschau auf Template 3.3
Das Template 3.3 ist ein Drei-Zeiler mit jeweils drei Spalten im Kopf-, Inhalts- und Fußbereich. Eine mögliche Nutzungsvariante ist z.B. oben links ein Logo, oben mittig eine primäre, horizontale Navigation, oben rechts eine Suchen-Box, mittig links eine sekundäre, vertikale Navigation, mittig der eigentliche Inhalt, mittig rechts aktuelle Mitteilungen, unten links ein Verweis auf das Impressum, unten mittig Adressdaten und unten rechts ein Verweis auf eine Kontaktmöglichkeit.
Bildbeschreibung "Bildschirmfoto des Template 3.3": Drei-Zeiler mit jeweils drei Spalten im Kopf-, Inhalts- und Fußbereich
Vorschau Quelltexte
Die Seitenvorlagen sind in XHTML 1.0 Strict umgesetzt und die Layout-Zuweisungen in einer externen CSS-Datei festgelegt:
- Vorschau XHTML-Quelltext: XHTML zu Template 3.3
- Vorschau CSS-Quelltext: CSS zu Template 3.3
Kontrastreiches Farbschema
Die farbliche Gestaltung aller
Template-Varianten
unterliegt einem einheitlichen Farbschema. Die
eingesetzten Farbkombinationen der Farben Weiß
(#ffffff), Grau (#f0eeeb), Schwarz
(#000000), Hellblau (#efefff), Blau
(#0000a3), Violett (#5d005d) und Rot
(#b80000) bieten auch bei Farbfehlsichtigkeit
ausreichende Kontraste (siehe Farbschema).
Template 3.3: Quelltext (angepasster Ausschnitt)
Durch umfangreiche Kommentare ist der Quelltext 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.
Dieses Seitengerüst wird durch zwölf
Container erzeugt. Drei Container sind untereinander (in drei
Zeilen) ausgerichtet: einer oben (id="header"),
einer mittig (id="main") und einer unten
(id="footer"). Alle drei Container enthalten
wiederum drei Container, die nebeneinander (in jeweils drei Spalten)
ausgerichtet sind: oben links (id="header_left"),
oben mittig (id="navigation") und oben rechts
(id="header_right") bilden "Zeile eins",
mittig links (id="subnavigation"),
mittig (id="content") und mittig rechts
(id="services") bilden "Zeile zwei",
unten links (id="footer_left"),
unten mittig (id="footer_center") und unten rechts
(id="footer_right") bilden "Zeile drei".
Dabei werden jeweils die ersten zwei Container zusätzlich durch
einen Layout-Container
gebündelt: die ersten zwei oben (id="innerheader"),
die ersten zwei mittig (id="innermain") und die
ersten zwei unten (id="innerfooter").
Beispiel XHTML-Datei - Aufbau des Template 3.3 (Ausschnitt):
<!-- Begin Header-Container -->
<div id="header">
<!-- Begin Inner-Header-Container -->
<div id="innerheader">
<!-- Begin Left-Header-Container -->
<div id="header_left">
[Hier könnte ein Logo mit Verweis zur Startseite hin.]
<!-- End Left-Header-Container -->
</div>
<!-- Begin Navigation-Container -->
<div id="navigation">
[Hier könnte eine horizontale Navigation hin.]
<!-- End Navigation-Container -->
</div>
<!-- End Inner-Header-Container -->
</div>
<!-- Begin Right-Header-Container -->
<div id="header_right">
[Hier könnte eine seiteninterne Suchen-Box hin.]
<!-- End Right-Header-Container -->
</div>
<!-- End Header-Container -->
</div>
<!-- Begin Main-Container -->
<div id="main">
[Hier könnte ein Brotkrumenpfad hin.]
<!-- Begin Inner-Main-Container -->
<div id="innermain">
<!-- Begin Subnavigation-Container -->
<div id="subnavigation">
[Hier könnte eine vertikale Navigation hin.]
<!-- End Subnavigation-Container -->
</div>
<!-- Begin Content-Container -->
<div id="content">
[Hier könnte Ihr Inhalt hin.]
<!-- End Content-Container -->
</div>
<!-- End Inner-Main-Container -->
</div>
<!-- Begin Services-Container -->
<div id="services">
[Hier könnten aktuelle Mitteilungen hin.]
<!-- End Services-Container -->
</div>
<!-- End Main-Container -->
</div>
<!-- Begin Footer-Container -->
<div id="footer">
<!-- Begin Inner-Footer-Container -->
<div id="innerfooter">
<!-- Begin Left-Footer-Container -->
<div id="footer_left">
[Hier könnte ein Verweis zum Impressum hin.]
<!-- End Left-Footer-Container -->
</div>
<!-- Begin Center-Footer-Container -->
<div id="footer_center">
[Hier könnten Adressdaten hin.]
<!-- End Center-Footer-Container -->
</div>
<!-- End Inner-Footer-Container -->
</div>
<!-- Begin Right-Footer-Container -->
<div id="footer_right">
[Hier könnte ein Verweis zum Kontaktformular hin.]
<!-- End Right-Footer-Container -->
</div>
<!-- End Footer-Container -->
</div>
Den gesamten Quelltext der XHTML- und CSS-Datei finden Sie als ausgelagerte Dateien weiter oben auf dieser Seite (siehe Vorschau Quelltexte).
Template 3.3: Download
Das Template kann kostenfrei genutzt und an die eigenen Bedürfnisse angepasst werden. Zur Nutzung werden grundlegende Kenntnisse in den Technologien XHTML und CSS vorausgesetzt.
Das Template
steht als komprimierte Datei (Dateiendung *.zip) zur
Verfügung und enthält einen Ordner, in dem eine
XHTML-Datei
sowie eine CSS-Datei
bereitgestellt werden. Die XHTML-Datei
enthält die Struktur, das Seitengerüst. Über die
CSS-Datei
werden alle enthaltenen Elemente formatiert.
Dateiart: zip
Dateigröße: ca. 4 KB
Download Template 3.3
Der Dokumentenkopf der XHTML-Datei
enthält Informationen zur inhaltlichen Analyse sowie Angaben
für Suchdienst-Systeme. Zum Dokumentenkopf gehören alle
Angaben zwischen dem öffnenden und schließenden
Tag
des <head>-Elementes. Der im
Browser sichtbare Inhalt steht
zwischen dem öffnenden und schließenden
Tag des <body>-Elementes.
Die Formatzuweisungen erfolgen in der CSS-Datei.
Beschreibungen zu den Angaben im Kopfbereich (z.B.
Seitentitel, Metadaten und seiteninterne Verweise), zu einzelnen
Elementen im Dokumentenkörper (z.B.
Überschriften, Absätze und Listen) sowie zur Formatierung
der Elemente (z.B.
Textgrößen, Verweise und Navigationsleisten) befinden
sich im Bereich Umsetzung.