CSS Layout Generator
Der CSS Layout Generator ist ein Online Web 2.0 Werkzeug zur Erstellung von HTML & CSS Templates (Layouts).
Merkmale des CSS Layout Generators
Wie man bereits an der Startseite sieht, bietet der Generator Vielzahl von Optionen an. In einigen Fällen werden bei Aktivierung einer Option weitere Auswahlmöglichkeiten aktiviert. Die folgenden Optionen stehen zur Auswahl:
- Wahl des DOCTYPES (HTML 4.01 Strict, XHTML 1.0 Transitional, ,XHTML 1.0 Strict und HTML 5
- Einbindung einer CSS-Reset-Datei (3 unterschiedliche Varianten)
- Auswahl zwischen fester Breite des Layouts (mit Festlegung der Gesamtbreite) und variabler Breite des Layouts (mit Festlegung der minimalen und maximalen Gesamtbreite)
- Kopf- und Fußbereich können mit Höhenangabe optional hinzugefügt werden
- Auswahl zwischen ein-,zwei- oder dreispaltigem Layout. Position und Breite der zusätzlichen Spalten kann gewählt werden
- optional kann festgelegt werden, ob alle Spalten immer gleich hoch sein sollen oder ob der Fußbereich immer ganz am unteren Rand des Browserfensters gezeigt werden soll.
Bereits während der Auswahl der einzelnen Optionen und der Festlegung einzelner Werte kann man sich anhand eines kleinen Vorschaubildes einen Eindruck vom Aussehen des Templates verschaffen.
Nach Abschluss der Einstellungen wird der Code generiert. Man kann den generierten Code, versehen mit etwas Beispieltext, im Vollbild sehen und dann das zip-Archiv mit einer HTML- und einer CSS-Datei auf dem PC speichern.
Den CSS Layout Generator findet man hier: CSS Layout Generator.
Mit dem CSS Layout Generator erzeugtes Beispiel
Eine mit diesem Generator erzeugt Vorlage kann man sich hier ansehen. Dieses Beispiel wurde als HTML5-Dokument erzeugt. Es wurde nicht nur der entsprechende DOCTYPE eingefügt sondern es werden auch HTML5-typische Tags wie <header>
, <section>
, <aside>
oder <footer>
verwendet.
Zur Unterstützung älterer Browser (insbesondere Internet Explorer) wird automatisch html5shiv.js
eingebunden.
Weitere Generatoren
Weitere Layout-Generatoren sind: