Dreamweaver CS5 bringt mehr Komfort fürs CSS-Coding

Die neue Version von Dreamweaver bringt nicht viele neue Features mit sich. Statt dessen glänzt sie mit der Integration bestehender Tools und Online-Dienste aus der Produktfamilie Adobe CS Live – zum Beispiel BrowserLab. Für CSS-Designer haben es diese Neuerungen in sich.

Erst vor kurzem hat Dr. Web einen Workshop zu Adobe Browserlab (Link) veröffentlicht. Das ist einer der neuen CS-Live-Dienste, mit denen Adobe versucht, die Kunden auf Dauer an sich zu binden und gleichzeitig Neugeschäfte mit Software als Service zu erzeugen. Browserlab ist insofern ein gutes Beispiel, als die Grundnutzung des Dienstes Jedermann (noch) kostenlos zur Verfügung steht. Man braucht nur eine Adobe-ID. Zur vollen Entfaltung kommt Browserlab allerdings erst im Zusammenspiel mit Dreamweaver.

Der integrierte Browser in der Live-Ansicht spart das Umschalten zu Firefox, Safari oder IE.

Die Integration des Online-Dienstes in das Werkezug ist recht stromlinienförmig. Natürlich arbeiten professionelle Webdesigner nicht mit einem reinen Online-Werkzeug. Das wäre zu umständlich und es soll noch Arbeitsplätze geben (Deutsche Bahn), wo die Netzabdeckung nicht vollständig ist.

Der User nimmt also Dreamweaver zur Seitengestaltung und den Adobe Online Service BrowserLab für das Testen. Die mächtige Anwendung, die Screenshots einer Site mit einer Reihe verschiedener Browser und Betriebssysteme macht, benötigt gewaltige Rechenleistung und muß auch ständig gepflegt werden, wenn neue Browser oder OS auf den Markt kommen. By the way: Es wäre Adobe anzuraten, dort schnell einen iPhone-Screenshotservice zu installieren. Das wäre ein Killerfeature.

Vorschau unter Live-Bedingungen

Die Zusammenarbeit beider Werkzeuge leistet eine Funktion, die so anders nicht realisierbar ist. Dreamweaver verfügt seit der letzten Version über einen integrierten Webkit-Browser, der sich unter dem LiveView-Button verbirgt. Damit wird es möglich, selbst komplexe CSS-Layouts originalgetreu als Vorschau anzuzeigen. Und das Beste: Links und Interaktionen funktionieren. In der neuesten Version von Dreamweaver kann LiveView sogar mit einem PHP-Server kommunizieren.

Der Druck auf die Taste „F6“ deaktiviert JavaScript auch mitten in der Anwendung.

Freeze – kritische Stellen “einfrieren” und testen

Schnell kommt man zu der Idee, dass man auch interaktive Elemente mit verschiedenen Browsern testen muss, um zu sehen, ob das Layout „hält“. Und genau das geht. Rollt man über eine Grafik (bei CSS-Hover funktioniert es nicht) und drückt nach dem Austauschen des Bildes die Taste „F6“, friert Dreamweaver den Code ein und deaktiviert JavaScript und damit die Erkennung eines „RollOut“. Nun kann man den Code exakt dieser eingefrorenen Seite an BrowserLab schicken und sich Screenshots anfertigen lassen.

In der letzten Beta fehlte die feste Integration von Browserlab, wie sie hier zu Demonstrationszwecken montiert wurde.

Ironischerweise fehlt das Feature in der letzten Beta-Version der CS5-Suite. Sollte es in der endgültig verkauften Fassung nicht drin sein, so kann man es wie bereits mit Dreamweaver CS4 über den Extension Manager installieren.

CSS deaktivieren
Das Prinzip des LiveView spiegelt sich auch in dem Feature LiveCode wieder, in dem die Veränderungen im Code unmittelbar zu sehen sind, auch wenn sie von externer Quelle ausgelöst werden. Der Ansichtsmodus wird vor allem beim Debuggen von Seiten seine Anhänger finden.

Ein simpler Rechtsklick deaktiviert einzelne CSS-Stile

Dem gleichen Zweck dient auch das selektive Deaktivieren einzelner CSS-Befehle. Das ist eine sehr starke Funktion. Jeder einzeln definierte Parameter wird per Rechtsklick ausgesetzt und die Seite daraufhin aktualisiert. Der Nutzer erkennt also sofort, was eine Vränderung der CSS-Stile bewirkt und ob sie überhaupt etwas bewirkt.

CSS-Vorschau beschleunigt die Suche nach Elementen

Im Bereich CSS sind die wichtigsten Änderungen von Dreamweaver CS5 angesiedelt. Eine CSS-Vorschau zeigt bei jedem Container die darauf angewendeten Stile an. Das macht das Auffinden und Bearbeiten einzelner Elemente wesentlich schneller.

Und nicht zuletzt sollte erwähnt sein, dass die Templates mit vorgefertigten CSS-Musterentwürfen neu gestaltet wurden. Für Einsteiger sind tatsächlich ein paar ansehnliche Vorgaben dabei.

Fazit

Dreamweaver CS5 ist nicht der große Wurf. Wer CS4 besitzt, für den tut sich hier kein gravierender Grund auf, das Tool zu aktualisieren. Wer mit PHP arbeitet, wird die volle PHP-Unterstützung im Coding mögen. Und wer für die Zukunft gerüstet sein will, wird den Export als HTML-5-Dateien goutieren (zu finden über „File/Convert“).

Den HTML5-Export würde man vor allem auch Flash wünschen

CSS-Einsteiger sind allerdings bei der neuen Version bestens aufgehoben. So deutlich hat noch kein Werkzeug gezeigt, was CSS-Stile machen und was nicht. Das ständige Hin- und Herschalten zwischen Dreamweaver und Browser gehört der Vergangenheit an.

(mm),

Weitere Beiträge:

• 5 Ideen wie Sie wiederkehrende Arbeitsschritte & Marketingprozesse gewinnbringend im Internet automatisieren! Ein Gastbeitrag von Robert Nabenhauer.
• Wachstum durch Facebook-Gewinnspiele: Wie Sie über Facebook virale Gewinnspiele & eine schnell wachsende Fangemeinde aufbauen
• Wie Sie aufmerksamkeitsstarke Prelaunch-, Launch- und Relaunch-Szenarien aufbauen und dabei Viralität, Spannung & Kaufkraft erzeugen
• Wie Sie waschechte Iphone-Apps mit PhoneGAP entwickeln, um am lukrativen App-Markt mitzumischen
• Wie Sie Ihr Shop-Sortiment so präsentieren, dass der Kunde in Zukunft mehr findet und eher kauft! Ein Gastbeitrag von Nicolas Schmidt-Voigt.
• 11 faszinierende BuddyPress-Plugins, um kostenlos aus WordPress ein soziales Netzwerk zu zaubern
• Die Vorboten einer neuen Internet-Industrie! Ein exklusiver Rückblick & Blick hinter die Kulissen der Clickbank-Exchange 2011 in New York.