Das CSS-Generator-Starterpack

Sie können CSS-Formatierungen per Hand codieren - Sie können aber auch JavaScript die Codierung überlassen. Unser CSS-Generator zeigt am Beispiel der Schriftformatierung, wie Quellcode automatisch generiert werden kann.

Für das Generieren von Internetseiten braucht man bekanntlich keine komplexen oder gar teuren Werkzeuge. Selbst die komplizierteste Internetseite kann mit dem Editor von Windows geschrieben werden. Die auf dem Markt erhältlichen WYSIWYG-Editoren erlauben es zwar, Seiten zu gestalten, ohne tiefe Kenntnisse von HTML zu besitzen, wenn Sie aber Erfahrung mit der Seitenbeschreibungssprache haben, dann erweist sich die Codierung per Hand als wesentlich schneller als die ständigen Einstellungen von Optionen und Parametern über Dialogboxen und Eingabefenster.

Bei der Codierung von CSS-Formaten ist das ähnlich, allerdings hilft beim Experimentieren mit Farben und Formen eine Eingabeebene, die eine Vorschau der Gestaltung zeigt, schon sehr. Nennen wir diese Eingabeebene CSSGenerator und programmieren sie selbst. Der Vorteil: Sie können den CSS-Generator auf einen Webserver legen und ihn von beliebigen Rechnern im Internet aufrufen und gleich damit arbeiten, zusätzliche Software wird nicht mehr benötigt.

Textgestaltung

Einer der wesentlichen Punkte beim Aufbau einer Internetseite ist die Gestaltung des Textes. Der Text transportiert den Großteil der Informationen und sollte vom Besucher der Webseite schnell und unkompliziert aufgenommen werden können. Unser beispielhafter CSS-Generator konzentriert sich deshalb auf die Gestaltung des Textes. Die Verfahren und Funktionen, die hier eingesetzt werden, erlauben aber eine einfache Umsetzung auch auf alle anderen Bereiche der CSS-Gestaltungen.

Seitenaufbau

Der CSS-Generator präsentiert sich im Browser in drei verschiedenen Bereichen. Im Eingabebereich finden Sie Listenfelder, in denen die möglichen Einstellungen verschiedener Parameter aufgelistet sind. Ob Schriftart oder Zeilenabstand, alle wichtigen CSS-Parameter sind hier per Mausklick aufzurufen.

Das Vorschaufenster enthält einen Beispieltext. Nach jeder Änderung im Eingabefenster wird dieser Vorschautext mit den gewählten Parametern formatiert und dargestellt. Sie können die Auswirkungen der Einstellungen sofort erkennen und bewerten.

Das Quellcode-Fenster schließlich listet den CSS-Quellcode auf, der für die Formatierung des Textes im Vorschaufenster benutzt wird. Auch dieser Quellcode ändert sich mit jeder neuen Einstellung im Eingabefenster. Er ist immer aktuell. Wenn Sie mit einer Textgestaltung zufrieden sind, können Sie den Quellcode direkt im Browserfenster markieren und über die Zwischenablage in Ihren HTML-Editor übertragen. Sie müssen lediglich den Namen der Klasse, der hier als "Beispielklasse" deklariert ist, verändern.

Um die drei Bereiche auf der Seite zu positionieren, werden drei DIVs eingesetzt. Jedes DIV ist mit einer CSS-Klasse verknüpft, die über eine absolute Positionierung für die Verankerung auf der Seite sorgt. Sie können die Größen oder Positionen dieser Bereiche natürlich beliebig verändern, indem Sie die Parameter in den Klassen "vorschau", "quellcode" und "eingabe" entsprechend anpassen. Der Vorschaubereich ist unbedingt mit dem CSS-Parameter "overflow : auto;" zu versehen. Da Sie die Schriftgröße beim Experimentieren sehr groß einstellen können, ist für die Darstellung dieser großen Schriften nicht genügend Raum im Vorschaubereich. Die Regelung des Overflows sorgt dafür, dass notfalls ein Rollbalken in das DIV integriert wird. Ohne Overflow würde der Text einfach nach unten über den Rand des Vorschaubereichs laufen und in diesem Beispiel den Quelltext überdecken.

Das Speichern der CSSParamater

Die Werte der verschiedenen CSS-Parameter, mit denen der Beispieltext formatiert wird, sind in einem Array abgelegt. Es ist für die Arbeit im Quellcode nötig, dass Sie die Variablen schnell erkennen. Das ist mit normalen Arrays nicht elegant lösbar, da sich die verschiedenen Werte hinter den Indexziffern der Array-Elemente verstecken. Sie müssten eine zusätzliche Liste führen, die Ihnen Auskunft darüber gibt, dasssich hinter Index 1 die Schriftart oder Index 5 die Laufweite verbirgt. Um die Lesbarkeit des Quelltextes hier deutlich zu verbessern, wird ein assoziatives Array eingesetzt.

Assoziative Arrays sind Feldvariablen wie normale Arrays. Der Unterschied liegt im Aussehen des Indexes. Die üblichen Ziffern werden hier durch Begriffe ersetzt. Der Nachteil ist, dass solche Arrays nicht mit einer for-Schleife durchgearbeitet werden können, bei der einfach die Laufvariable als durchlaufender Indexwert eingesetzt werden kann. Der Vorteil ist, dass Sie an der Indexbezeichnung den Inhalt der Feldvariablen sofort erkennen können.

Solche assoziativen Arrays werden mit der Methode "new Object()" deklariert. In unserem Beispiel wird die Variable "stand" (für Stand der Dinge) als neues Objekt eingeführt. Die klartextsprachlichen Indexbezeichnungen listen Sie dann wie in einem normalen Array als Variablendefinition untereinander auf. Die Funktionen, die die Parameter der CSS-Formatierungen ändern, arbeiten später mit den Indexwerten dieses assoziativen Arrays. So kann mit einer allgemeinen Funktion für die Einstellung beliebig gearteter Formatierungszuweisungen gearbeitet werden.

Alle für die Textformatierung notwendigen Parameter sind zu Beginn des Skripts auf diese Weise gespeichert. Sie finden in den Definitionen die üblichen Standardeinstellungen einer Times-Schrift.

Natürlich können Sie durch beliebige Veränderungen dieser Parameter auch eine völlig anders aussehende Grundeinstellung des Beispieltextes definieren. Zusätzlich muss das Skript wissen, welche Werte den unterschiedlichen CSS-Befehlen zugewiesen werden dürfen. Gäbe der Benutzer diese Werte in einfachen Texteingabefeldern ein, so müsste das Skript für jede Eingabe eine mehr oder weniger komplizierte Plausibilitätsprüfung durchführen.

Jeder kleine Tippfehler sprengte die Darstellung des Beispieltextes und führte mitunter zu Fehlern im Programmablauf. Besser ist es aus diesem Grunde, die möglichen Eingabewerte in einer Liste zu führen, deren Inhalte bereits vorgegeben sind. Eingabefehler werden auf diese Weise unmöglich gemacht. Das verlangt natürlich, dass die erlaubten Werte einmal erfasst werden. In den Arrays "schriften" (Schriftarten), "stile" (kursiv), "laufweite" (Laufweite der Schrift) und "fett" (verschiedene Fettvarianten) sind alle sinnvollen CSS-Werte aufgelistet. Zu jedem Array gehört eine Längenvariable, die die Anzahl der gespeicherten Elemente in den Arrays ermittelt und später als Basis für verschiedene Laufanweisungen genutzt wird.

Sie können daher die Inhalte dieser Arrays beliebig erweitern oder kürzen, ohne dass Sie die Anzahl der Elemente des entsprechenden Arrays manuell bestimmen müssen. Achten Sie darauf, dass bei einer vollständigen Erfassung der CSS-Werte je nach Browser nicht alle Einstellungen im Eingabefenster auch zu direkten Auswirkungen auf den Beispieltext führen. Manche Browser sind nicht in der Lage, alle CSS-Formatierungen zu interpretieren. Das führt nicht zu Fehlern, diese Einstellungen werden einfach ignoriert.

Auf ähnliche Weise sind auch die Farben in einem Array "farben" erfasst. Zwar gibt es neben den hier gespeicherten 16 Standardfarben eine weitaus größere Zahl an Farben, die über CSS mit einem Namen zugewiesen werden können, eine vollständige Erfassung würde aber die Übersicht der Farbtabelle zerstören. Damit später trotzdem jede nur denkbare Farbe auch zugewiesen werden kann, ist ein letztes Array namens "hexa" im Quellcode zu finden. Dieses Array beinhaltet lediglich die Ziffern des hexadezimalen Zahlensystems - die Wahl der Werte wird dadurch programmiertechnisch im Laufe des Skripts sehr vereinfacht.