1564045

Adobe Dreamweaver CS 6 im Test

29.08.2012 | 13:26 Uhr |

Adobes Webeditor steht mit neuen Technologien wie HTML5, CSS3 und dem Boom der Mobilgeräte neuen Herausforderungen gegenüber. Wir testen, ob das Programm die richtige Antwort darauf hat.

Die große Kunst im Webdesign bestand schon immer darin, Inhalte und Layouts für die Anzeige auf verschiedenen Bildschirmgrößen zu optimieren. Früher waren es die unterschiedlichen Browser und Betriebssysteme, heute gilt es, die Seiten zusätzlich so zu optimieren, dass sie auch auf Smartphones und Tablets gut aussehen und bequem bedienbar sind. Zum Glück sind nicht nur die Herausforderungen größer, sondern auch die Webtechnologien vorangeschritten. HTML5 und CSS3 bieten viele Möglichkeiten, Layouts auf kleinen und großen Bildschirmen anzupassen und lebendiger werden zu lassen.

Die Unterstützung für beide Technologien sah in der letzten Dreamweaver-Version noch halbherzig aus, jetzt sind die wichtigen Trends bei Adobes Webeditor angekommen. Doch schafft es Dreamweaver, den nicht ganz einfachen Umgang mit HTML5 und CSS3 in gewohntem Stil, also mit visuellen Bearbeitungsmöglichkeiten und gleichzeitigem, vollem Zugriff auf den Quellcode, zu servieren?

Flüssige Layouts für alle Bildschirme


Die vielleicht wichtigste Neuheit in Dreamweaver CS6 zeigt sich beim Anlegen eines neuen Dokuments. Beim Layouten gibt es ein Element, genannt „fließendes Rasterlayout“, als Alternative zum gewöhnlichen Startbefehl unter „Datei > Neu ...“. Mit fließenden Rasterlayouts legt man eine Website an, die von vorne herein auf drei verschiedene Darstellungsgrößen ausgelegt ist. Mobil mit 480 Pixel, für Tablets mit 768 Pixel und für den Desktop-PC mit 1232 Pixel Breite. Im Dialog lässt sich die Anzahl der Spalten für die Geräte festlegen und wie viel Prozent der Inhalt in der Breite einnimmt. Dreamweaver kümmert sich neben dem HTML5-Dokument auch gleich um die zugehörige Javascript- und CSS-Datei im Hintergrund. Die beiden Dateien kümmern sich später mithilfe von Media Queries um das Umschalten des Layouts auf die jeweils zum Zielgerät passende Layoutvariante.


Die Arbeit mit dem neuen Layouttyp fordert von Dreamweaver-Veteranen keine große Umstellung, die Bedienung gleicht den bisherigen Tags. Mithilfe von Anfassern können die Container auf dem Layout verschoben und skaliert werden. So entstehen die typischen Seitenbereiche einer Website, wie Kopfleiste (Header), Inhalt, Fußleiste (Footer) wie gewohnt in der Live-Ansicht mit visueller Bearbeitung. Der Quellcode bleibt dabei Dreamweaver-typisch in dem geteilten Fenster immer im Blick. Drei neue Knöpfe am unteren Fensterrand schalten schnell zwischen der Darstellung für die verschiedenen Gerätetypen um. Die auf Webkit basierende, überarbeitete Live-Ansicht rendert die Seite zügig in den verschiedenen Größen. Zusätzlich können die Seiten im Desktop-Webbrowser getestet werden. Zum Ausprobieren in den verschiedenen Bildschirmgrößen skaliert man dabei manuell das Fenster. So lässt sich in wenigen Schritten ein flexibles Weblayout anlegen. Zuvor und ohne Dreamweaver CS6 war dies nur mit viel Grundwissen und Handarbeit möglich.

Webinhalte mit Dreamweaver CS6 in Apps verpacken

Das mobile Web findet heute nicht nur in Webseiten statt, die für mobile Browser optimiert sind. 
Viel wichtiger sind Apps, die Inhalte schick im Erscheinungsbild des Anbieters verpacken und dem Nutzer viel Komfort für die Touchscreen-optimierten Bedienelemente anbieten. Dreamweaver reagiert auf den wichtigen Trend mit neuen Werkzeugen, die Webapplikationen in mobile Apps verpacken. Dabei kann der Webdesigner sein Vorwissen nutzen, um auch App-Entwicklung anzubieten. Er gestaltet zunächst wie gewohnt eine Smartphone-Website in Sachen HTML, CSS und Javascript in Dreamweaver. Die Umwandlung in nativen Code für die Zielgeräte erledigt das Phone-Gap-Framework . Statt auf einen Webserver werden die mobilen Apps per Menübefehl direkt aus Dreamweaver an den PhoneGap-Server geladen. Vorher ist eine Registrierung beim Dienst nötig, die aber schnell erledigt und kostenlos ist. Aus einer einmal gestalteten, zentralen Webapplikation kann der Cloudservice vollautomatisch native Apps für iOS, Android, Blackberry & Co, genannt Builds, erzeugen. Die Apps können auf den Desktop simuliert oder per QR-Code direkt auf ein Smartphone zum Testen geladen werden.

Dynamisch Gestalten mit CSS-Übergängen


Seiten, die interaktiv auf Mausberührung Elemente ein- oder ausblenden oder Bilder animiert ein- oder ausblenden sind modern und beliebt – erfordern aber normalerweise einiges Wissen in Sachen CSS. Dreamweaver CS6 erledigt das Schreiben von Code im Hintergrund. Der Webdesigner ruft zunächst die neue CSS-Übergänge-Palette auf. Darin definiert er zwei Zustände in den Stylesheets und legt einen Übergang zwischen beiden fest – zum Beispiel Infos, die erscheinen, sobald der Besucher mit dem Mauszeiger ein Bild berührt.

Die Regel wendet man auf eine bestimmte Klasse an und was sich bei welchem Ereignis (zum Beispiel „hover“ für Mausberührung) verändern soll (zum Beispiel, dass ein Element mit einer bestimmten Position sichtbar wird). Neben Sichtbarkeit und Positionierung ist es auch möglich, die Schriftgröße zu verändern. Zudem kann eine Dauer des Übergangs zwischen den Zuständen festgelegt werden. Das Eingeben eines Wertes reicht für eine Verzögerung. Das Ergebnis lässt sich in der Live-Vorschau anzeigen und schnell auf andere DIV-Objekte übertragen. So ist es möglich, Effekte auszuprobieren ohne ständig zwischen Editor und Webbrowser zu wechseln.


Das alles könnte auch per Hand im Code gestaltet werden – aber der einfache Weg über die Palette spart eine Menge Mühe und Zeit. Vor allem für Einsteiger werden so komplexe Gestaltungseffekte zugänglich und flexibel anpassbar. Die CSS-Übergänge funktionieren in allen aktuellen Browsern und auf Mobilgeräten, nur Internet Explorer 6 hat teilweise Probleme bei der Darstellung.

Oberflächen von Webapps leichter anpassen


jQuery Mobile ist eine der populärsten Bibliotheken für die Entwicklung mobiler Webapplikationen und wurde in CS5.5 schon unterstützt. In CS6 geht Adobe einen großen Schritt weiter. Wollte man bisher die Optik einer Benutzeroberfläche verändern, musste man im Code arbeiten. In Dreamweaver CS6 wird es dank der Unterstützung von Jquery-Mobile-Farbfeldern einfacher. Man ruft nur noch die gleichnamige Palette auf, die gebrauchsfertige Themen bereit hält. Zuweisen erfolgt mit einem Klick, schon ändern sich Farben von Menüs, Listen, Knöpfen und anderen Bedienelementen. Dreamweaver kommt mit einer Reihe von Themen, weitere lassen sich aus dem Web laden. Genauso einfach ist es, die komplette Optik einer Webapp selbst zu gestalten, indem man mit Fireworks die Optik der Bedienelemente wie gewünscht verändert und komplett als neues Thema speichert (siehe Fireworks CS 6 im Test ). Die neue Möglichkeit spart viel Handarbeit und macht es möglich, mobile Oberflächen schnell optisch an Corporate Designs anzupassen oder neu aufzubauen.

Starthilfe für Webhosting


Um Kunden Entwürfe zu zeigen, nutzen die meisten Webdesigner einen Testserver. Dafür und auch zur Veröffentlichung des eigenen Auftritts hat Adobe seinen Hosting-Service Business Catalyst eingebaut. Dreamweaver kommt mit einer Palette, die sich direkt mit Business Catalyst verbindet und eine Testsite samt Domain (domainname.businesscatalyst.com) anlegt und anbietet, das aktuelle Projekt hochzuladen. Seiten für den Service lassen sich mit Modulen leicht mit Funktionen wie Facebook-Like-Knöpfen, Suchfeldern, Formularen für E-Commerce und mehr füllen. Dream­weaver kümmert sich dabei um den Quellcode. Für Einsteiger sicher keine schlechte Option, ob Adobe damit Entwickler locken kann, die schon andere Hosting-Angebote oder Plattformen im Einsatz haben, ist zweifelhaft. Besonders da der Business-Catalyst-Code nicht übertragbar ist.

 
Empfehlung Dreamweaver CS6 eröffnet oder vereinfacht mit HTML5, CSS3, Phone-Gap und jQuery Mobile viele interessante Möglichkeiten und verfolgt mit seinen an verschiedene Bildschirmgrößen fließend anpassbaren Layouts die richtige Strategie. Trotzdem ist es gelungen, die typische visuelle Arbeitsweise beizubehalten. Das Upgrade lohnt sich besonders für alle, die einen Riesenschritt in Richtung dynamisches und geräteübergreifendes Webdesign schaffen wollen, und die sich bislang vom nötigen technischen Grundwissen oder dem Aufwand beim manuellen Coden abschrecken ließen.

Hersteler

Adobe

Preis

€ 535

CHF 630

Upgrade ab:

€ 150

CHF 176

Note:

1,4 sehr gut

Leistung

50%

1,3

Ausstattung

20%

1,6

Handhabung

20%

1,3

Dokumentation

10%

1,5

Vorteile:

Klasse Werkzeuge für flexible Multi-Bildschirmlayouts, höhere Geschwindigkeit auf dem Mac dank Cocoa-Native-Programmierung, mehr Interaktivität mit CSS-Übergängen für jedermann, HTML5-Unterstützung stark ausgebaut, gelungene Phone-Gap-Integration, einfache Gestaltung mobiler Oberflächen mit jQuery Mobile Themen

Nachteile:

Direkte Hosting-Unterstützung nur mit proprietärer Business-Catalyst-Plattform

Alternative:

Rapidweaver 5

Systemvoraussetzungen:

Ab OS X 10.6

0 Kommentare zu diesem Artikel
1564045