Haupt / Rezension

Adobe Dreamweaver CS6-Test

Unser Urteil

Dreamweaver ist für viele Unternehmen zum Standardwerkzeug für Webdesign und -entwicklung geworden, und Dreamweaver CS6 musste auf die Art und Weise reagieren, wie sich das Web verändert hat und wie es sich verändert. HTML5 entwickelt sich noch weiter, aber viele seiner Standardfamilien werden bereits verwendet. Aus diesem Grund ist es gut zu sehen, dass die erweiterten Funktionen von CSS3 in Dreamweaver reichlich unterstützt werden - einschließlich CSS-Übergänge. Trotz der Verbesserungen bei der CSS-Unterstützung bleibt Dreamweavers minimalistischer Ansatz für JavaScript-Bibliotheken ein Problem, insbesondere angesichts der zunehmenden Bedeutung kombinierter Skript- und CSS-Frameworks. Obwohl es viele neue Funktionen gibt, ist dies immer noch der bekannte Dreamweaver, sodass ein Upgrade von CS5 oder CS5.5 mit wenig oder keiner Lernkurve einfach ist. Wenn Sie mit HTML5 oder mit Websites arbeiten, die auf mehreren Geräten bereitgestellt werden müssen, sollten Sie ein Upgrade durchführen. Für andere Benutzer ist es möglicherweise schwieriger zu rechtfertigen, aber wir empfehlen ein Upgrade nur zur Verbesserung der CSS-Unterstützung, da Technologien wie CSS-Transformationen und Fluid Grids dazu beitragen, die von den Benutzern erwarteten modernen Designs bereitzustellen.

Zum

Da sich das Web auf immer mehr Geräte verlagert, ist die Unterstützung für ein einfaches Layout - und Testen - von Fluid Grids und CSS3-Übergängen gut zu sehen
HTML5-Unterstützung
Werkzeuge zum Aufbau geräteübergreifender Flüssigkeitsgitter
Anpassbarer Arbeitsbereich
CSS3-Übergänge
Wir freuen uns auch, dass Adobe die kürzlich erfolgte Übernahme von PhoneGap mit der Integration des Cloud-Dienstes PhoneGap Build begrüßt, um die Konvertierung mobiler HTML5-Anwendungen in native Apps zu beschleunigen

Gegen

Business Catalyst ist nicht die beste Option für das Hosting von Websites, und wir hätten gerne mehr Unterstützung für andere Hosting-Unternehmen und -Dienste gesehen
Business Catalyst-Integration
Fehlende Unterstützung für CSS- und JavaScript-Frameworks
Fehlende Auflösungsoptionen für Flüssigkeitsgitter
CSS und JavaScript bieten mehr als JQuery, und wir hätten uns mehr Flexibilität bei den unterstützten JavaScript-Frameworks gewünscht, insbesondere bei der Unterstützung von Canvas und anderen wichtigen HTML5-Standards

Entdecken Sie in unserem Test, was die letzte Box-Version von Dreamweaver für Webdesigner bereithält. Das Web bleibt nicht still und neue Browser und neue Technologien bedeuten Änderungen an Ihren Websites. Mit der Explosion beim mobilen Surfen sind diese Änderungen jetzt größer als je zuvor. Trotzdem ist Dreamweaver CS6 immer noch die vertraute App mit der gleichen Mischung aus Design und Code und unterstützt nahezu jede erdenkliche Web-Authoring-Technologie.

Die Herausforderung für Dreamweaver CS6

Die Rückkehr der Browserkriege hat die Entwicklung des Webs beschleunigt. Chrome, Firefox, Safari und Internet Explorer konkurrieren um den schnellsten und leistungsstärksten HTML5-Browser. Das bedeutet, dass Dreamweaver CS6 die neuesten HTML-, JavaScript- und CSS-Funktionen unterstützen muss - und gleichzeitig die Komplexität auf ein Minimum beschränken muss. Das Erstellen einer modernen Webseite erfordert eine Mischung aus Design- und Programmierkenntnissen, und Adobe Dreamweaver CS6 muss ein vielfältiges Publikum von Designern und Entwicklern unterstützen. Das ist eine schwierige Aufgabe, da beide unterschiedliche Bedürfnisse haben und auf sehr unterschiedliche Weise arbeiten.

Die Dreamweaver CS6-Oberfläche

Wenn Sie frühere Versionen von Dreamweaver verwendet haben, ist CS6 mit seiner großen Designoberfläche und der Palette an Werkzeugen sehr vertraut

Benutzeroberfläche und Erfahrung in Dreamweaver CS6

Öffnen Sie Adobe Dreamweaver CS6 und Sie werden direkt in die vertraute Dreamweaver-Erfahrung eingeführt. Nach wie vor können Sie Ihren Arbeitsbereich anpassen, obwohl Adobe jetzt elf vorkonfigurierte Umgebungen bereitstellt, um den Einstieg zu beschleunigen - darunter eine für die Verwendung mit zwei Bildschirmen. Es gibt auch zahlreiche Optionen zum Erstellen neuer Seiten und Dokumente, einschließlich der Verwendung von Dreamweaver als JavaScript-Entwicklungsumgebung. Dies hilft Entwicklern bei der Arbeit mit neuen Webtechnologien wie node.js. Mit anderen Optionen können Sie mit gängigen serverseitigen Technologien wie PHP und ASP.NET arbeiten und sogar Flash-Entwickler mit Dreamweaver CS6 ihren ActionScript-Code bearbeiten.

Der Dreamweaver CS6-Code-Editor

Designer oder Entwickler, Sie müssen Code bearbeiten. Der Code-Editor von Dreamweaver verarbeitet HTML, JavaScript und so ziemlich jede serverseitige Skriptumgebung, die Sie wahrscheinlich verwenden

Systemressourcen

Wenn auf Ihrem PC oder Mac bereits Dreamweaver CS5 oder 5.5 ausgeführt wird, läuft Dreamweaver CS6 einwandfrei. Es sind keine zusätzlichen Systemressourcen erforderlich. Eine aktualisierte WebKit-Engine verbessert die HTML5- und JavaScript-Unterstützung in Live View, während eine integrierte Verbindung zu vorhanden ist Adobe BrowserLab Wenn Sie Seiten in mehr als einem Browser testen müssen. Es gibt einige interessante kleine Berührungen der Benutzeroberfläche, die es einfacher machen, eine benutzerdefinierte Erfahrung zu erstellen, die zu Ihrer Arbeitsweise passt. Zum Beispiel gibt es die Möglichkeit, zwischen farbigen und monochromen Symbolen zu wechseln.

Dreamweaver CS6 Live View

Layouts und Code zeigen nicht, wie eine Site für Ihre Benutzer aussehen wird. Die Live-Ansicht von Dreamweaver ist eine integrierte WebKit-Engine, die Alter und Skripte rendert und ausführt

Verbesserte Layouts in Dreamweaver CS6

Entwickler behalten ihre Code-First-Ansicht bei, während Designer verbesserte Layout-Tools erhalten, die mit einer Reihe moderner Webtechnologien arbeiten. Das Ergebnis bleibt flexibel und es ist für Designer und Entwickler einfach, einen Arbeitsbereich gemeinsam zu nutzen. Es gibt jedoch immer noch wenig oder keine Unterstützung für Code-Repositorys und andere Teamarbeitsfunktionen. Dreamweaver CS6 ist immer noch für den einzelnen Designer / Entwickler gedacht, was sich in der heutigen Welt der großen Teams von Designern und Entwicklern, die alle auf derselben Website zusammenarbeiten, zunehmend fehl am Platz anfühlt.

Dreamweaver Design Ansicht

In der Entwurfsansicht von Dreamweaver können Sie Bilder und Komponenten per Drag & Drop auf eine Seite ziehen und Code und Stile hinzufügen, um eine Seite bereitzustellen

Fluid / Responsive Grids in Adobe Dreamweaver CS6

Eine der größten Änderungen in Dreamweaver CS6 und eine, die Auswirkungen hat, die über das Web hinausgehen, ist die Einführung von Tools zum Erstellen und Verwalten von Layouts für flüssige Gitter. Fluid Grids sind eine wichtige Kombination von CSS3-Funktionen, mit denen Sie Medienabfragen verwenden können, um flexible Layouts bereitzustellen, die automatisch angepasst werden, um Inhalte bereitzustellen, die für verschiedene Geräteklassen geeignet sind.

Adobe unterstützt derzeit gängige Smartphone-, Tablet- und Desktop-Auflösungen mit Dreamweavers Fluid Grids, mit denen Sie Vorlagen für Layoutseiten für jede der drei Bildschirmauflösungen erhalten. Es besteht auch die Möglichkeit, Code auszuschneiden und einzufügen und eigene zusätzliche Raster für verschiedene Bildschirmauflösungen zu erstellen - möglicherweise Ansichten für Fernsehbildschirme oder Heimmedienkonsolen oder für Seiten, die Bildschirmdrehungen auf Tablets verarbeiten.

Auf Flüssigkeit reagierende Gitter in Dreamweaver CS6

Das Erstellen von Fluid Grids für PCs, Tablets und Telefone ist jetzt so einfach wie das Auswählen eines Layouts und das Definieren der verwendeten Spalten

Dreamweaver bearbeitet die Medienabfragen

Das Arbeiten mit Fluid Grids ähnelt dem Arbeiten mit den Template-Tools von Dreamweaver CS6. Nachdem Sie ein Rasterlayout geöffnet haben, müssen Sie lediglich die entsprechenden Seitenbereiche mithilfe von DIV-Tags definieren. Regionen werden dann mithilfe der Spaltengitter von Dreamweaver ausgerichtet, und Sie können abhängig von der Auflösung des Bildschirms eines Benutzers auswählen, welche Regionen wo angezeigt werden. Wenn ein Element mit einer bestimmten Auflösung nicht benötigt wird, kann es ausgeblendet und nicht angezeigt werden. Es ist eine überraschend einfache Lösung für ein relativ komplexes Problem: Dreamweaver bearbeitet die Medienabfragen und Sie müssen lediglich die entsprechenden Seitenlayouts und -designs erstellen. Ein weiterer Vorteil der Verwendung der Fluid Grid-Tools von Dreamweaver besteht darin, dass sie auch zum Erstellen von HTML 5-Benutzeroberflächen für Windows 8 Metro-Anwendungen verwendet werden können.

Bei flüssigen Layouts müssen Sie in der Lage sein, eine Vorschau Ihrer Arbeit anzuzeigen, ohne sie auf den entsprechenden Geräten zu veröffentlichen. Die WebKit-basierten Live View-Tools von Dreamweaver CS6 enthalten jetzt einen Auflösungsumschalter, mit dem Sie schnell vom Smartphone- zum Tabellen- und Desktop-Browser wechseln können. Seiten können auch in einem Standard-Desktop-Browser getestet werden, wobei nur die Größe geändert wird, um die entsprechenden Ansichten zu erhalten.

CSS-Übergänge

Eine Reihe von Verknüpfungen stammt aus dem Bedienfeld „CSS-Übergänge“, das das Hinzufügen animierter Effekte zu einer Seite vereinfacht. CSS-Übergänge können zu jedem CSS-Element hinzugefügt und an jedes Ereignis gebunden werden. Sie können Übergänge verwenden, um Popups anzuzeigen, Aktionen hervorzuheben oder einfach nur auf einen Link oder ein Menü aufmerksam zu machen. Es wird kein Code benötigt, da alles von CSS verarbeitet wird. Sie können Ihre Übergangseffekte in der Live-Ansicht von Dreamweaver testen, indem Sie den integrierten WebKit-Browser verwenden, um die CSS-Effekte anzuzeigen, ohne Ihr Design zu verlassen. Übergänge erleichtern das Hinzufügen von Effekten zu einer Seite.

CSS-Übergänge in Dreamweaver CS6

CSS-Übergänge vereinfachen das Hinzufügen von Spezialeffekten zu einer Seite. Wo früher Code geschrieben werden musste, können Sie jetzt schnell CSS konfigurieren und auf Seitenelemente anwenden

Mobile Entwicklung und Site-Hosting

Im mobilen Web geht es nicht nur um Browser, und Adobe Dreamweaver CS6 bietet Tools zum Arbeiten PhoneGap , Das Adobe-Tool zum Packen von Webanwendungen in Apps, die auf den wichtigsten Telefonplattformen ausgeführt werden. Anstatt auf einem Webserver zu veröffentlichen, können mobile Anwendungen an den PhoneGap Build-Clouddienst von Adobe gesendet werden. Sie können steuern, für welche Plattformen Sie erstellen, indem Sie das PhoneGap Build-Bedienfeld in Dreamweaver verwenden, das den Build-Status für jede Plattform angibt, auf die Sie abzielen. Sobald ein Build abgeschlossen ist, müssen Sie lediglich Ihre App von der PhoneGap-Website herunterladen, um sie zu testen und schließlich in einem App Store zu veröffentlichen. Es besteht sogar die Möglichkeit, einen QR-Code zu verwenden, um eine App direkt von der PhoneGap Build-Site auf ein Gerät zu laden, und Sie können einen verwenden, um Clients zur Genehmigung ihrer App an eine öffentliche Seite zu senden.

Adobe

Der PhoneGap Build-Dienst von Adobe verpackt Webanwendungen als native mobile Anwendungen. Melden Sie sich einfach an und veröffentlichen Sie in der Cloud

jQuery Mobile-Elemente

Mobile Entwickler erhalten außerdem Zugriff auf eine Reihe von jQuery Mobile-Elementen, sodass sie schnell interaktive Websites erstellen können, ohne Zeit für die Einrichtung eines Code-Frameworks aufwenden zu müssen. Komponenten können per Drag & Drop auf Seiten gezogen und Themen im laufenden Betrieb angewendet werden. Sie können diese Elemente auf eine ganze Site oder auf ein einzelnes Element anwenden. Es besteht auch die Möglichkeit, eigene Designs in Fireworks CS6 zu erstellen und diese als Themenfelder für CSS- und Sprite-Blätter bereitzustellen.

jQuery Mobile in Dreamweaver CS6

Wenn Sie eine mobile Site erstellen, unterstützt Dreamweaver 6 JQuery Mobile mit einer Bibliothek von Komponenten, die zu jeder Seite hinzugefügt werden können

Business Catalyst und Dreamweaver CS6

Wenn Sie Ihren Kunden Live-Site-Designs zeigen möchten, hat Adobe Unterstützung für diese hinzugefügt Geschäftskatalysator Site-Hosting-Service. Mit den integrierten CMS- und E-Commerce-Tools können Sie Websites mit eigenen Domänen hosten. Dreamweaver unterstützt die Module von Business Catalyst und fügt die entsprechenden Tags in Ihre Seiten ein. Für Dreamweaver-Benutzer steht eine kostenlose Testwebsite zur Verfügung, auf der Sie Websites testen und Prototypen oder fertige Websites schnell mit Kunden teilen können. Wir sind uns immer noch nicht sicher, ob Business Catalyst ein Tool für die meisten Entwickler ist, die wahrscheinlich über eigene Staging-Server oder Hosting-Beziehungen verfügen - insbesondere, da benutzerdefinierter Code verwendet wird, der nicht besonders portabel ist.

Preis

Volle £ 302 (ohne MwSt.), Upgrade £ 95 (ohne MwSt.), £ 38,11 / Monat als Teil des jährlichen Creative Cloud-Abonnements und £ 57,17 / Monat als Teil des monatlichen Creative Cloud-Abonnements. Einzelheiten zum Kauf finden Sie auf der Adobe Store .