1077448

Adobe Dreamweaver CS5.5

13.07.2011 | 09:47 Uhr |

Bei der neuen Version des Webeditors Dreamweaver konzentriert sich Adobe auf HTML5, CSS 3 und das mobile Web. Wir testen ob und für wen sich der halbe Versionssprung bei Dreamweaver lohnt.

Langjährige Adobe-Kunden erinnern sich gut an die CS-5-Versionen bei Illustrator , Premiere , Photoshop & Co.: Seit dem Zusammenlegen aller Tools in der Creative Suite bringt Adobe volle Versionsupdates im 18-Monats-Rhythmus. Nun will der Hersteller wieder längere Updatezyklen verfolgen, aber dennoch auf aktuelle Trends reagieren. Im Webdesign hat sich viel getan: HTML 5 und CSS 3 werden immer populärer (die Unterstützung dafür wurde dafür bei Dreamweaver CS 5 etwas halbherzig nach dem Erscheinen per Update nachgeliefert) und das mobile Web boomt: Smartphones und Tablets sollen schon bald das stationäre Web überholen. So ist immer heute häufiger die Anpassung an verschiedene Endgeräte und Bildschirmgrößen die Herausforderung für Webdesigner. Adobe fasst diesen Trend unter dem Begriff "Multiscreen" zusammen. Dabei soll auch künftig das Motto "Create once, publish anywhere" dank Adobe Tools möglich sein. Wir testen, wie gut das tatsächlich klappt.

Dreamweaver CS 5.5.: Fit für Smartphones, Tablets und PC

Mit CSS 3 Media Queries können verschiedene Stylesheets für Smartphone-, Tablet- und PC-Bildschirme zugewiesen werden.
Vergrößern Mit CSS 3 Media Queries können verschiedene Stylesheets für Smartphone-, Tablet- und PC-Bildschirme zugewiesen werden.

Der größte Zeitfresser beim Design ist das ständige Anpassen und Testen des Layouts auf die unterschiedlichen Bildschirmgrößen von verschiedenen Geräten. Dreamweaver 5.5 will es einfacher machen: Mit der neuen Multiscreen-Vorschau ist es möglich, gleichzeitig drei verschiedene Pixelgrößen, etwa passend für Smartphone, Tablet und den Webbrowser auf dem Mac zu betrachten. Dank der neuen CSS3-Media Queries-Unterstützung können drei Stylesheets, je eines für jedes Gerät, zugewiesen werden. Über eine Palette legt man Bedingungen für die Auswahl der Stilvorlagen fest: Zum Beispiel mindestens 801 Pixel für den Desktop-Computer oder bis 800 Pixel für Tablet und maximal 400 für Smartphones. Je nach ermittelter Bildschirmgröße des Endgeräts wird so automatisch die richtige Vorlage ausgewählt, die das Layout dann für den Platz auf den Bildschirm neu anordnet. Ruft man dann die neue Multiscreen-Vorschau auf, wird der Inhalt der Seite mit allen drei Stylesheets nebeneinander in einem unterteilten Fenster für verschiedene Geräte angezeigt. Änderungen im Quellcode werden dann nach Drücken des Buttons zum neu Laden sofort angezeigt. So fällt das bisher mühsame Feintuning von Menüs, Textblöcken etcetera deutlich einfacher und man spart viel Zeit.

Die Multiscreen-Vorschau zeigt Layouts für drei Endgeräte nebeneinander.
Vergrößern Die Multiscreen-Vorschau zeigt Layouts für drei Endgeräte nebeneinander.

Wer tiefer in das Thema CSS 3 einsteigen will, bekommt in Dreamweaver CS 5.5 Unterstützung. Das beliebte und von Vorgängern bekannte Code-Hinting, unterstützt mit Auto-Vervollständigung, Hinweisen und Vorschlägen für passende Werte jetzt neue CSS3-Eigenschaften. Die interaktiven Vorschläge machen es einfacher sich in die Möglichkeiten mit CSS3 vertraut zu machen. Die neuen Eigenschaften können wie gewohnt über die CSS-Palette ausgewählt und angepasst werden. So werden Gestaltungsmöglichkeiten wie per CSS abgerundete Ecken für Menüs und Boxen auch für Neulinge verständlich.

Mit CSS3-Unterstützung lassen sich in Dreamweaver schnell und einfach früher aufwändige Elemente für Benutzeroberflächen gestalten - zum Beispiel abgerundete Ecken.
Vergrößern Mit CSS3-Unterstützung lassen sich in Dreamweaver schnell und einfach früher aufwändige Elemente für Benutzeroberflächen gestalten - zum Beispiel abgerundete Ecken.

Dreamweaver hat auch in Sachen jQuery dazugelernt. Die verbreitete Javascript-Klassenbibliothek wird durch Code-Hinweise und mitgelieferte gebrauchsfertige Layouts für mobile Geräte unterstützt. Mit den Layoutvorlagen lassen sich Seiten für das Touch-optimierte Framework jQuery mobile mit animierten Menüs in wenigen Minuten erzeugen und mit gebrauchsfertigen Komponenten wie zum Beispiel Listenansichten und Menüelementen verfeinern. Die so zusammengestellten Mini-Webapplikationen sind auf iOS , Android , Blackberry und weiteren Plattformen lauffähig.

0 Kommentare zu diesem Artikel
1077448