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

Webseitenbewertung mit Seitenreport 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.

Erster Advent 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.

Dritter Advent 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: