GoLive CS

CSS in CS

(msc) Das CS in Adobe GoLive steht zwar für Creative Suite und ist nicht das Kürzel für eine Technologie, sondern ein Versprechen von Adobe an die User. Es wird sich aber nicht vermeiden lassen, dass viele Webgestalter bei CS unwillkürlich an CSS, die Cascading Style Sheets denken. Somit konnte es sich Adobe gar nicht leisten, GoLive CS ohne massiv verbesserte CSS-Fähigkeiten auszuliefern. Und zum Glück hat man diese Verpflichtung ernst genommen.

In Adobe GoLive CS kann man zum ersten Mal wirklich komfortabel mit dieser ausserordentlich wichtigen Webtechnologie arbeiten (siehe im Vergleich dazu den Web-Publishing-Tipp «Zuweisungen im CSS-Editor» im Publisher 1-2004). Die Neuerungen werten zum einen den CSS-Editor auf: Die Komponente zum Einrichten von Stilen ist vom schmürzeligen Fensterchen zum gut ausgestatteten Bearbeitungsprogramm gereift, das dank einer Live-Vorschau Zeit sparen hilft: Man sieht sofort, wie sich eine Einstellung auswirkt, selbst wenn eine Definition noch nicht zugewiesen ist.

Wer seine Stildateien gern im Quellcode schreibt, wird sich über die Code-Vervollständigung freuen: Beim Tippen blendet GoLive im Text eine Liste mit den passenden Eigenschaften ein: Hat man «fo…» getippt, erscheint eine Liste mit font, font-family, font-size etc. Auf analoge Weise gibt man Attribute hinzu: Wählt man aus der Code­vervollständigungsliste per Pfeiltasten etwa «font-family» und drückt «Enter», erscheint eine Liste mit den Schriftnamen, aus denen man die «Arial» oder «Verdana» wählt.

Häufig gebrauchte Elemente offeriert GoLive im Flyout-Menü des Editors: In diesem wählt man den Befehl «Neuer Stil» und das gewünschte Element, z.B. «h1» oder «table». Über den Befehl «Stilbeispiele bearbeiten» lässt sich die Vorlage-Datei den eigenen Wünschen anpassen, sodass GoLive auch gleich die passenden Attribute mitliefert. Die Vorlagedatei selbst ist unter «..\Adobe GoLive CS\Settings\MarkupBasics\exampleStyles.css» gespeichert – bei Bedarf kann man also eine kleine Batchdatei programmieren, die je nach Projekt die passende Vorlage unter diesem Namen dort deponiert.

Nicht nur beim Definieren, auch bei der Arbeit mit Stilen darf man sich über mehr Unterstützung freuen. Eine markante Verbesserung betrifft die Darstellung der Stylesheets: Während sich die Layout-Darstellung von GoLive 6 um Platzierungsangaben in der CSS-Datei foutiert und bei manchen Seiten nacktes Chaos produziert, erhält man von GoLive CS eine adäquatere Anzeige.

Die Palette «CSS» hat nun einen Reiter namens Stilinfo, der die Formate zeigt, die auf ein markiertes Element wirken. Hat man also einen Text markiert, könnte man zum Beispiel in der oberen Hälfte der Palette sehen, dass dieser Text Formatierungen vom body-Elementstil und einem div- und p-Tag bezieht. In der unteren Hälfte sind die Eigenschaften wie Farbe, Grösse, Abstand etc. angegeben. Allerdings sieht man nur die Eigenschaften mit der höchsten Priorität, also in aller Regel das P-Tag oder ein Klassenstil. Das ist schade – es wäre praktisch, könnte man alle Eigenschaften einblenden. Das würde helfen, Widersprüchen in den Definitionen auf die Spur zu kommen.

Die letzte grosse Verbesserung betrifft das Zuweisen von Formaten. Der Reiter «Stilanwendung» der «CSS»-Palette ist neu kontextsensitiv. Die Palette, wie sie in GoLive 6 zu finden ist, erlaubt die Zuweisung nur per span (inline, d.h. in einem Abschnitt gelegener Bereich), par (Abschnitt) oder div (freies Blockelement). Die gleiche Palette von GoLive CS berücksichtigt, was im Layoutfenster markiert ist: Hat man etwa einen Hyperlink angewählt, erscheint im «Stilanwendungs»-Reiter das a-Tag, sodass man leichter als bisher Links mit Formatierungen und Pseudoformaten ausstatten kann.

Das ist praktisch, aber noch nicht ganz ausgereift, wie sich bei den Tabellen zeigt: Hat man eine Zelle markiert, dann kann man die Zelle (td) mit einem Klassenattribut versehen. Leider fehlt die Tabelle (table) selbst, ebenso wie die Reihe (tr). Möchte man beispielsweise der Reihe eine andere Farbe zuweisen, dann muss man das wie bei GoLive 6 entweder über den Quellcode tun, oder über die Statusleiste: Hier kann man wie bis anhin in der Gliederung der Tags auf den tr-Tag rechtsklicken und aus dem Kontextmenü den Befehl «CSS-Stil anwenden» benutzen.

Praktisch ist auch die Vorschau: Belässt man den Mauszeiger im «Stilanwendung»-Reiter für eine kurze Zeit über einem Klassenattribut, dann erscheint ein Vorschau-Fenster mit der entsprechenden Formatierung – allerdings nicht im Kontext. Um zu sehen, wie sämtliche auf die markierte Stelle einwirkenden CSS-Eigenschaften aussehen, muss man die Zuweisung vornehmen.

Der neue CSS-Editor von GoLive CS zeigt eine Vorschau der Stylesheet-Formate.

Stile lassen sich in GoLive CS einfacher zuweisen und verwalten.