1. Startseite
  2. Inhaltsverzeichnis
  3. Glossar
  4. Hilfe
  5. Weitere Services...
  1. Barrierefrei
  2. Grundlagen
  3. Umsetzung
  4. Marketing
  5. Suchdienste
  6. Templates

Template 2.1: Zwei-Zeiler mit jeweils einer Spalte im Kopf- und Inhaltsbereich

Sie sind hier: StartseiteTemplatesTemplate 2.1

Die Web-Templates ermöglichen ein zügiges Erstellen von Website-Seitengerüsten und bilden in der Praxis häufig benötigte Layout-Varianten ab. Über die Formatzuweisungen der externen CSS-Datei können Anpassungen in Farbe und Form ohne großen Aufwand umgesetzt werden. Dieser Artikel stellt das Template 2.1 vor, ein Zwei-Zeiler mit jeweils einer Spalte im Kopf- und Inhaltsbereich.
Stand 05.03.2009

Inhaltsübersicht:

  1. Vorschau auf Template 2.1
  2. Template 2.1: Quelltext (angepasster Ausschnitt)
  3. Template 2.1: Download

Vorschau auf Template 2.1

Das Template 2.1 ist ein Zwei-Zeiler mit jeweils einer Spalte im Kopf- und Inhaltsbereich. Eine mögliche Nutzungsvariante ist z.B. oben die Navigation und unten der Inhalt.

Bildschirmfoto des Template 2.1

Bildbeschreibung "Bildschirmfoto des Template 2.1": Zwei-Zeiler mit jeweils einer Spalte im Kopf- und Inhaltsbereich

Vorschau Quelltexte

Die Seitenvorlagen sind in XHTML 1.0 Strict umgesetzt und die Layout-Zuweisungen in einer externen CSS-Datei festgelegt:

  1. Vorschau XHTML-Quelltext: XHTML zu Template 2.1
  2. Vorschau CSS-Quelltext: CSS zu Template 2.1

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).

Seitenanfang

Template 2.1: 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 zwei Container erzeugt, die untereinander (in zwei Zeilen) ausgerichtet sind. Der erste Container enthält hier die horizontale Navigation (id="header"), der zweite Container den eigentlichen Inhalt (id="content").

Beispiel XHTML-Datei - Aufbau des Template 2.1 (Ausschnitt):

<!-- Begin Header-Container --> <div id="header">
[Hier könnte eine horizontale Navigation hin.]
<!-- End Header-Container --> </div>
<!-- Begin Content-Container --> <div id="content">
[Hier könnte Ihr Inhalt hin.]
<!-- End Content-Container --> </div>

Den gesamten Quelltext der XHTML- und CSS-Datei finden Sie als ausgelagerte Dateien weiter oben auf dieser Seite (siehe Vorschau Quelltexte).

Seitenanfang

Template 2.1: 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.

Skizzenhafte Darstellung der Seitenvorlage Dateiart: zip
Dateigröße: ca. 4 KB
Download Template 2.1

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.

Seitenanfang

Tastaturkürzel:

  • 1: Startseite
  • 2: Barrierefrei
  • 3: Grundlagen
  • 4: Umsetzung
  • 5: Marketing
  • 6: Suchdienste
  • 7: Templates
  • 8: Inhaltsverzeichnis
  • 9: Hilfe
  • 0: Kontakt

Hinweis zur Verwendung:

  • Internet Explorer:
    [Alt + Zahl] + Enter
  • Firefox:
    [Umschalt + Alt + Zahl]
  • Opera:
    [Umschalt + Esc] + Zahl
  • Safari:
    [Alt + Zahl]
  • Tasten in Klammern müssen gleichzeitig gedrückt werden.
  • Macintosh-Nutzer nutzen bitte Strg statt Alt.

Layout:

Service-/Hilfsnavigation:

  1. Startseite
  2. Kontakt
  3. Kontaktformular
  4. Datenschutz
  5. Impressum
  6. Aktuelles
  7. Archiv
  8. Inhaltsverzeichnis
  9. Glossar
  10. Hilfe
  11. Suche