En Vogue 1.0
Cascading Style Sheets können auf dem Atari derzeit nicht angezeigt werden, da noch kein Browser HTML 4 darstellen kann. Trotzdem gibt es bereits einen komfortablen Editor für CSS-Dateien. Wir schauten uns En Vogue für Sie an.
Cascading Style Sheets auf dem Atari
In der Welt des Webdesigns wird heute mehr und mehr auf die CSS-Technologie gesetzt. CSS steht für "Cascading Style Sheets" und erlaubt dem Gestalter, die Darstellung von HTML-Seiten in weiten Teilen selbst zu definieren. Hierbei können Schriftarten, Farben, Abstände, Umrandungen und weitere Elemente eingestellt werden. Es sei an dieser Stelle hingewiesen, dass CSS erst ab HTML 4 offiziell unterstützt wird. Allgemein erlaubt es CSS, Dokumente mit bestimmten Ausgabe-Stile zu versehen. Dabei muss es sich nicht zwingend um die Bildschirmausgabe handeln, sondern man kann per CSS auch die gesprochene oder gedruckte Ausgabe eines Dokuments festsetzen (ab CSS level 2). Es ist denkbar, dass nicht nur HTML-Dokumente per CSS Stilelemente erhalten können, sondern auch andere Datei-Formate, wie zum Beispiel XML-basierte Daten.
Technisches
In HTML-Dateien können Stile auf verschiedene Arten eingebaut werden. Die erste Möglichkeit besteht darin, bestehenden HTML-Elementen eine eigene Stildefinition zuzuweisen. Da Child-Elemente automatisch den Stil des Parent-Objekts erben, könnte man theoretisch die Schriftart einer ganzen HTML-Seite ändern, indem man nur für das Tag <body> eine selber definierte Schriftart einstellt.
body { font-family: Geneva, Helvetica }
Ohne CSS müssten für dasselbe Ergebnis je nach Komplexität des Dokuments dutzende von -Tags eingesetzt werden. Um sich Schreibarbeit zu ersparen, können pro Stildefinition mehrere Tags angegeben werden. Gruppierungen werden folgendermaßen angegeben:
body, td, th { font-family: Geneva, Helvetica }
"Klassen" sind eine weitere Möglichkeit, um Elemente mit einem bestimmten Stil zu versehen. Dazu kann zu jedem HTML-Objekt eine bestimmte Klasse zugewiesen werden, die folgendermaßen definiert wird:
.myclass { font-family: fantasy; color: blue }
Um einen Paragraphen die Klasse "myclass" anzuhängen, schreibt man einfach <p class="myclass">. Zusätzlich zu Klassen
lassen sich auch sogenannte ID-Stile definieren, jedem HTML-Element lässt sich über das Attribut "ID" eine eindeutige Bezeichnung zuordnen, die über CSS eine eigene Stildefinition erhalten kann:
#myid { font-family: fantasy; color: red }
Spätestens hier wundert sich der Leser, wo die Stile definitiert werden. Auch hier sind mehrere Lösungen vorgesehen, wovon aber die Auslagerung in eine externe Datei am sinnvollsten ist. Im
-Bereich der HTML-Datei kann über das Element eine externe CSS-Datei referenziert werden:<link rel="stylesheet" href="style.css" type="text/css">
Somit genügt es, für eine komplette Website eine einzige CSS Datei erstellen, die von allen Seiten genutzt wird. Bei jeder Änderung der CSS-Datei profitiert die ganze Website davon, ohne das der Anwender ein einzelnes Zeichen im HTML-Code der Seiten ändern müsste. Es können pro Seite auch mehrere CSS-Dateien referenziert werden.
Für Stildefinitionen, die nur auf einer Seite genutzt werden, können im <head>-Bereich einer HTML-Datei direkt Stildefinitionen vorgenommen werden. Dazu benötigt man das Element <style>.
<style media="Screen" type = "text/css">< !-
td { font-family: Arial, Geneva, Helvetica }
-></style>
En Vogue
Das Programm En Vogue von Matthias Jaap (HomePage Pinguin, HTML-Help usw.) eignet sich speziell um externe CSS-Dateien zu erstellen. Es besteht aus einem Hauptfenster, in dem sich alle Stildefinitionen zentral vornehmen lassen. Dieses ist in zwei Spalten unterteilt, wobei in der linken Spalte die verschiedenen Selektoren angegeben werden können, die bestimmte Stilelemente erhalten sollen. Unter einem Selektor versteht man HTML-Tags, Klassen oder ID-Stile. En Vogue bietet vordefinierte Selektoren zur Auswahl, der Benutzer kann jedoch auch eigene angeben. Somit können auch Gruppierungen angegeben werden. Zu jedem Selektor können nun verschiedene Stil-Arten angegeben werden, die in der rechten Spalte des Fensters aufgelistet sind. Es können über ein Popup verschiedene Werte, die ein bestimmtes Stilelement annehmen kann, gewählt werden. Dabei erkennt En Vogue, welches Element man gewählt hat und bietet dementsprechend sinnvolle Werte zur Auswahl.
Will man jedoch alle Möglichkeiten von CSS nutzen, so bleibt der Griff zum ASCII-Editor nicht erspart, da die Unterstützung für einige Features von CSS fehlen, wie z.B. die Befehle "@import" oder "@media".
Dateien
Hat man alle benötigten Stile festgelegt, so lässt sich eine CSS-Datei speichern, die später auch wieder zur Nachbearbeitung geladen werden kann. Als Kontrolle, ob die gewählten Stildefinitionen der Vorstellung entsprechen, kann En Vogue seit Version 1.0 eine HTML-Datei speichern, die alle Stildefinitionen enthält und übersichtlich darstellt.
Wizard
Eine weitere Neuerung der Version 1.0 ist der Wizard, der es erlaubt, ohne Vorkenntnisse einfache CSS Dateien zu erstellen. Die Erstellung einer CSS-Datei kann über drei Dialoge gesteuert werden, in denen Schriftart, Farbe und Abstand eingestellt werden können. Für alle drei Schritte stehen verschiedene vordefinierte Sammlungen zur Auswahl, man kann aber nicht eigene Angaben machen. Zur visuellen Unterstützung zeigt En Vogue bei der Farb- und Schriftauswahl eine Voransicht. Will man weitere Definitionen einbauen, so lässt sich die automatisch erstellte Datei weiter verarbeiten. Leider wird sie von En Vogue nicht gleich geöffnet.
Mängel
Zwar handelt es sich bei En Vogue um Freeware, doch es fehlen grundlegende Funktionen, die bei modernen Programmen zum Standard gehören sollten. So vermisst man die Unterstützung der Tastenkombinationen [Control-Q] oder [Control-U] und die Möglichkeit, Dateien per VA_START zu öffnen. Zudem wäre ein integrierter Aufruf des ST-Guide nützlich, da im Hypertext zu En Vogue einige grundlegende Informationen zu CSS vorzufinden sind. Schließlich möchte jeder Benutzer wissen, welche Datei er gerade bearbeitet, doch En Vogue macht keine Angaben, welche Datei momentan geladen ist.
Fazit
En Vogue ist ein nützliches Tool, das für die Erstellung von einfachen CSS-Dateien bestens geeignet ist. Leider kann man zur Zeit auf der Atari-Plattform das graphische Ergebnis von HTML-Dateien mit Stilelementen nicht betrachten, da kein einziger Atari-Browser in der Lage ist, CSS-Definitionen zu interpretieren. Mit einer nächsten Version von Adamas könnte sich das aber möglicherweise ändern.
Will man in den Genuss von CSS kommen, so bleibt zur Zeit nichts anderes übrig, als auf andere Plattformen wie MacOS, Linux oder Windows auszuweichen. Gute CSS-Implementationen bieten zur Zeit der Internet Explorer, Netscape 6, Opera oder bald iCab.
Joachim Fornallaz