Dreamweaver HTML-Editor von Adobe
15. Juli 2021
Dreamweaver ist der HTML-Editor von Adobe an ( ursprünglich von einer Macromedia entwickelt), der eine sinnvolle Kombination aus einem sogenannten WYSIWYG-Editor mit parallelem Quellcode-Editor ist. Der Editor wird aufgrund seiner Komplexität, seines großen Funktionsumfangs und seines moderaten Preises eher von professionellen Anwendern genutzt. Dreamweaver funktioniert derzeit sowohl auf macOS- als auch auf Windows-Plattformen. Nach Angaben des Herstellers hat die Software weltweit über viereinhalb Millionen registrierte Nutzer.
Dreamweaver eignet sich für die grafische Bearbeitung von Webseiten und bietet Funktionen wie Einfärbung und Autovervollständigung für HTML-Code und Skriptsprachen wie PHP und JavaScript.
„Adobe Dreamweaver CC“ (ehemals „Adobe Dreamweaver CS6“) ist ein professioneller HTML-Editor für die Gestaltung, Entwicklung und Verwaltung von Webseiten und Webanwendungen. Die Software bietet eine WYSIWYG-Benutzeroberfläche und eine übersichtliche Programmierumgebung mit Syntaxhervorhebung und Autovervollständigung. Neben den neuesten Versionen von JavaScript oder CMS unterstützt das Programm auch die Sprachen Philippe und JavaScript. Aufgrund seiner Komplexität und des größeren Funktionsumfangs ist es eher für fortgeschrittene Anwender gedacht.
Vor- und Nachteile
Adobe Dreamweaver ist ein leistungsstarker Editor. Er bietet seinen Anwendern eine Vielzahl von Funktionen, die das Programmieren erleichtern. So verfügt er neben dem WYSIWYG-Editor über Syntax-Highlighting, Code-Autokomplettierung und Vorschaufunktionen über den Browser. Das macht e s einfacher, aber die Programmierung bleibt mühsam. Für Neueinsteiger ist das Programm daher nicht zu empfehlen. Hier sind umfangreiche Erfahrungen in der gewünschten Programmierung erforderlich. Adobe Dropweaver unterstützt alle Internetstandards von (!) PHP bis Java und von ASP bis XML. Auch CSS-Präprozessoren werden akzeptiert. Die möglichen Funktionen sind umfangreich und auf das ausgerichtet, was eine funktionierende Website braucht. Dies spiegelt sich auch in den Preisen der Softwarelizenzen wider.
Besondere Eigenschaften
Dreamweaver kann mit der typischen Adobe-Benutzeroberfläche punkten, die den Anwendern von Photoshop, InDesign, Ilustrator und Co. sehr vertraut ist. Der Funktionsumfang des HTML-Editors, der sich als das Maß aller Dinge in Sachen WYSIWYG präsentiert, ist vor allem nach dem Release der Creative Cloud extrem gewachsen, was das Schreiben von Quellcode zu einer Kleinigkeit macht. So können z. B. alle Änderungen in Echtzeit eingesehen werden, ohne dass die Seite neu geladen werden muss, oder auch CSS-Code kann mit einem Inline-Editor (!) in der jeweiligen html-Datei selbst geändert werden. Darüber hinaus sorgt das implementierte Coding-System für sauberen Programmtext, wobei Snippets über die Emmet-Unterstützung automatisch vervollständigt werden, eine automatische Einrückung erfolgt und zusammengehörige Ereignisse farblich hervorgehoben werden. Dreamweaver bietet außerdem Funktionen wie
- Code-Überprüfung
- Unterstützung für CSS-Präprozessoren (Sass, less)
- Unterstützung für PHP (ab PHP 5..).
- Mehrere Cursor zum gleichzeitigen Schreiben und Bearbeiten anderer Codezeilen
- Integriertes neues CSS-Framework bootstrap für Responsive Design im Web.
- Zugriff auf lizenzfreie Bilder und Vektorgrafiken aus Adobe Stock
- Einfacher Zugriff auf Ihre eigenen Grafiken, Designs – und andere Assets aus Creative Cloud
Erfahrungsbericht
Erstanwender stehen vor einer steilen Lernkurve, aber wenn Sie bereits Erfahrung mit Photoshop – oder Illustrator – haben, sollten Sie in der Lage sein, es recht schnell zu meistern. Wenn Sie, wie ich, auf dem Weg zu einer Funktion, die Sie nicht verstehen, verwirrt sind, kann die Hilfe Sie zu genau dem Menüpunkt führen, den Sie gesucht haben, selbst wenn er in den hintersten Ecken des Menüs liegt. Dreamweaver verwendet die Standard-Benutzeroberfläche von Adobe: ein Haupt-Editor-Fenster, umgeben von einer Werkzeugleiste auf der linken Seite und Informationsfeldern mit verschiedenen Registerkarten auf der anderen Seite. Wenn Sie kein praktizierender Programmierer sind und diese Werkzeuge und Schaltflächen auf Ihrem Bildschirm nicht wirklich benötigen, sollten Sie nicht planen, Dayweaver auf Ihrem kleinen Laptop zu starten. Diese Anwendung nimmt so viel Platz auf dem Bildschirm ein, wie Sie ihr geben können.
Wenn Sie eine typische, relativ einfache Webseite bearbeiten, haben Sie mindestens vier Dokument-Registerkarten geöffnet, eine für die aktuelle Seite, eine für die CSS- und JavaScript-Dateien und eine Informationstafel – mit mindestens sechs weiteren Registerkarten für die Anzeige der Dokumente oder ( Creative Cloud) und HTML-Tags, die Sie in Dateien ziehen können, einem vollständigen Satz von CSS-Steuerelementen, einem Baum des Dokumentenobjektmodells (DOM), einer Übersicht über die Assets eines Projekts (sortiert nach URLs, Fotos, Medien und anderen Dingen) und einer großen Liste von vorgefertigten und benutzerdefinierten Snippets. Wenn man dazu noch eine anpassbare Menüleiste in der lokalen Ecke und ein sehr umfangreiches Menü im Programmkopf hinzufügt, hat man eine der kompliziertesten Benutzeroberflächen, die es je für Anwendungen gab, übertroffen nur von anderer Entwicklungssoftware wie Visual Studio.
Glücklicherweise können Sie, wenn Sie ein erfahrener Programmierer sind oder wenn Sie ein möglichst geräumiges WYSIWYG-Fenster wünschen, alles ausblenden, außer dem Hauptbearbeitungsfenster von Dayweaver. Und das ist ein chamäleonartiges Wunderwerk der Flexibilität. Zu den Ansichtsoptionen für jedes Fenster gehört eine reine Codeansicht mit der für Codefenster typischen Einrückung und Farbcodierung, die den Umriss Ihres gesamten Projekts zeigt.
Ansichten
Sie können zwischen zwei Arten von WYSIWYG-Ansichten wählen.
Die erste ist eine Echtzeitansicht, ähnlich der Ansicht, die Sie normalerweise in einem Browser sehen würden, in der die Elemente des aktuellen Dokuments zur besseren Lesbarkeit umrandet sind und es Schaltflächen gibt, mit denen Sie die Variablen für einzelne Symbole („Tags“) per Mausklick ändern können.
Die übrigen Ansichten sind Design-Ansichten, die alle gestalteten Elemente einer der Seiten zeigen, auch die, die in einem WWW-Browser nicht sichtbar sind, bis Sie sie anklicken. Schließlich können Sie das Fenster teilen: Ein Panel zeigt das Programm, das „“live““ oder „Design“ – oder es enthält den Code in zwei verschiedenen Panels, so dass man zwei verschiedene Teile des Softcodes gleichzeitig sehen kann. Mehrere Optionen erlauben es, Ihre Änderungen auf der Workstation mit dem Quellcode auf einem externen Webserver zu vergleichen.