Dreamweaver CC 2017 (November 2016)

Dreamweaver wurde im Hinblick auf die Anforderungen von Webdesignern, die Code schreiben, überarbeitet. Dreamweaver ist jetzt übersichtlicher, effizienter und schneller als jemals zuvor – mit einem völlig neuen Code-Editor, einer intuitiveren Benutzeroberfläche mit einem frei wählbaren dunklen Farbthema und verschiedenen Verbesserungen, einschließlich der Unterstützung für neue Arbeitsabläufe wie CSS-Präprozessoren.

Im Folgenden finden Sie einen kurzen Überblick über diese neuen Funktionen und Verbesserungen.

Einen Überblick über die Funktionen, die in früheren Versionen von Dreamweaver CC eingeführt wurden, finden Sie unter Übersicht über die neuen Funktionen | Versionen von Dreamweaver CC 2015.


Völlig neuer Code-Editor

Am Code-Editor von Dreamweaver wurden verschiedene Produktivitätsverbesserungen vorgenommen, die Ihnen ein schnelles und effizientes Programmieren ermöglichen.

Codehinweise helfen Einsteigern beim Erlernen von HTML, CSS und anderen Webstandards. Visuelle Hilfen, z. B. automatischer Einzug, farbige Codehervorhebung und skalierbare Schriften, machen den Code leichter lesbar und helfen Ihnen, Fehler zu vermeiden. 

Codehinweise

Die Codehinweise in Dreamweaver wurden verbessert und bieten jetzt hilfreichere Informationen für den ausgewählten Code.

Wenn Sie in früheren Versionen von Dreamweaver eine öffnende spitze Klammer eingegeben haben, wurde eine Dropdown-Liste mit relevantem Code angezeigt.

In dieser Version erhalten Sie nicht nur den relevanten Code, sondern auch zusätzliche Informationen, die Ihnen helfen, innerhalb von Dreamweaver schnell HTML, CSS und andere Webtechnologien zu verwenden. 

Verbesserte Codehinweise
Verbesserte Codehinweise

Weitere Informationen finden Sie unter Codehinweise und Codevervollständigung.

Verbesserungen der Codeanzeige

Die allgemeine Darstellung von Code wurde jetzt verbessert, um ihn übersichtlicher zu gestalten. Sie werden Verbesserungen bei der Codeformatierung, der farbigen Codehervorhebung und beim Ändern der Schriftgröße feststellen. 

Codeformatierung

Beim Schreiben von Code wird dieser in Dreamweaver automatisch eingerückt, um falsches manuelles Einrücken zu verhindern und die Lesbarkeit zu verbessern. 

Farbige Codehervorhebung

Dreamweaver unterstützt jetzt die farbige Codehervorhebung für weitere Dateitypen.

Die farbige Codehervorhebung wird jetzt für HTML, JS, CSS, PHP, XML, LESS, Sass, SCSS, SVG, Bash, C, C#, C++, clojure, CoffeeScript, Dart, Diff, EJS, Embedded Ruby, Groovy, Handlebars, Haskell, Haxe, Java, JSON, Lua, Markdown, Markdown (GitHub), Perl, Properties, Python, RDF Turtle, Ruby, Scala, SQL, Stylus, Text, VB, VBScript, XML und YAML unterstützt. 

Sie können die Syntaxhervorhebung für unterschiedliche Dateitypen direkt über die Statusleiste in der Codeansicht ändern.

Ändern der Schriftgröße

Mit den folgenden Tastaturbefehlen können Sie die Schrift vergrößern oder verkleinern, ohne die Codeansicht zu verlassen:

  • Strg++ (Windows) bzw. Befehl++ (Mac): Schrift vergrößern
  • Strg+– (Windows) bzw. Befehl+– (Mac): Schrift verkleinern
  • Strg+0 (Windows) bzw. Befehl+0 (Mac): Wieder auf die Standardschriftgröße zurücksetzen

Weitere Informationen zu diesen Verbesserungen finden Sie unter Programmierumgebung in Dreamweaver.

Unterstützung von CSS-Präprozessoren

Dreamweaver unterstützt jetzt verbreitete CSS-Präprozessoren wie Sass, Less oder SCSS mit farbiger Codehervorhebung, umfassenden Codehinweisen und Kompilierung. So sparen Sie Zeit und erstellen leichter fehlerfreien Code.

Unterstützung von CSS-Präprozessoren
Unterstützung von CSS-Präprozessoren

Weitere Informationen zur Unterstützung von CSS-Präprozessoren in Dreamweaver finden Sie unter CSS-Präprozessoren.

Echtzeitvorschau im Browser

Sie können in Echtzeit eine Vorschau Ihrer Codeänderungen in einem Browser anzeigen, ohne die Browseranzeige manuell aktualisieren zu müssen. Dreamweaver stellt jetzt eine Verbindung zum Browser her, sodass Änderungen sofort und ohne erneutes Laden der Seite angezeigt werden. 

Echtzeitvorschau von Änderungen im Browser
Echtzeitvorschau von Änderungen im Browser

Weitere Informationen finden Sie unter Echtzeitvorschau.

Schnelles Bearbeiten zugehöriger Codedateien

Um schnell Änderungen an Ihrem Code vorzunehmen, setzen Sie den Cursor auf bestimmte Codefragmente und verwenden das Kontextmenü oder drücken Strg+E (Windows) bzw. Befehl+E (Mac), um auf die Schnellbearbeitung zuzugreifen.

Dreamweaver bietet Ihnen kontextspezifische Code-Optionen und Werkzeuge direkt im Code.

Weitere Informationen finden Sie unter Schnellbearbeitung.

Schnellbearbeitung von zugehörigem Code ohne Öffnen mehrerer Dateien oder Registerkarten
Schnellbearbeitung von zugehörigem Code ohne Öffnen mehrerer Dateien oder Registerkarten

Kontextabhängige CSS-Dokumentation

Dreamweaver bietet eine kontextabhängige Dokumentation zu CSS-Eigenschaften direkt in der Codeansicht.

Sie müssen jetzt nicht mehr außerhalb von Dreamweaver eine Webseite mit Informationen oder einer Referenz zu bestimmten CSS-Eigenschaften öffnen. Drücken Sie einfach Strg+K (Windows) bzw. Befehl+K (Mac), um die CSS-Hilfe anzuzeigen.

Hilfe durch Schnelldokumente für CSS in der Codeansicht von Dreamweaver
Hilfe durch Schnelldokumente für CSS in der Codeansicht von Dreamweaver

Weitere Informationen finden Sie unter Kontextabhängige CSS-Dokumentation.

Code mithilfe mehrerer Cursors schreiben und bearbeiten

Durch den Einsatz mehrerer Cursors können sie verschiedene Codezeilen gleichzeitig schreiben. 

Mit dieser Funktion arbeiten Sie sehr viel effektiver, da Sie dieselbe Codezeile nicht mehrmals schreiben müssen.

Wenn Sie mehrere Cursors verwenden möchten, gehen Sie wie folgt vor:

  • Um Cursors zu mehreren, aufeinander folgenden Zeilen hinzuzufügen, halten Sie die Alt-Taste gedrückt und ziehen Sie dann bei gedrückter Maustaste vertikal. 
  • Um Cursors zu mehreren, nicht zusammenhängenden Zeilen hinzuzufügen, halten Sie die Strg-Taste gedrückt und klicken Sie auf die verschiedenen Zeilen, um dort einen Cursor zu platzieren.
  • Um Text in mehreren, aufeinander folgenden Zeilen auszuwählen, halten Sie die Alt-Taste gedrückt und ziehen Sie dann bei gedrückter Maustaste diagonal.
  • Um Text in mehreren, nicht zusammenhängenden Zeilen auszuwählen, markieren Sie einen Textabschnitt, drücken Sie dann die Strg-Taste (Windows) bzw. die Befehlstaste (Mac OS) und nehmen Sie eine weitere Auswahl vor. 

Weitere Informationen finden Sie unter Mit mehreren Cursors Ihre Programmiergeschwindigkeit erhöhen.

Moderne Benutzeroberfläche

Die überarbeitete Benutzeroberfläche von Dreamweaver lässt sich intuitiver verwenden und stärker anpassen, bietet einfacheren Zugriff auf Menüs und Bedienfelder sowie eine kontextabhängige und konfigurierbare Symbolleiste, auf der nur die benötigten Werkzeuge angezeigt werden.

Für die neue Benutzeroberfläche gibt es außerdem vier Kontraststufen von hell bis dunkel, die das Lesen und Bearbeiten von Code erleichtern.

Hier sehen Sie Vorher-/Nachher-Screenshots der neuen Benutzeroberfläche:

Benutzeroberfläche – Dreamweaver 2015

Neue Benutzeroberfläche – Dreamweaver CC 2017


Änderungen an Menüs, Arbeitsbereichen und Symbolleisten

Die Menüs, Arbeitsbereiche und Symbolleisten von Dreamweaver wurden für diese Version überarbeitet. Im Folgenden erfahren Sie mehr über diese Änderungen.

Änderungen an Arbeitsbereichen

Die Benutzeroberfläche von Dreamweaver wurde optimiert und enthält standardmäßig die folgenden Arbeitsbereiche:

  • Entwickler-Arbeitsbereich

Dieser Arbeitsbereich ist minimal. Standardmäßig enthält er nur die Bedienfelder, die für Entwickler, die Websites kodieren, am wichtigsten sind, z. B. die Bedienfelder „Dateien“ und „Codefragmente“.

  • Standard-Arbeitsbereich 

Dieser Arbeitsbereich enthält alles, was Sie benötigen, wenn Sie mit Code- und Entwurfselementen arbeiten – z. B. die Bedienfelder „Dateien“, „CC Libraries“, „CSS Designer“, „Einfügen“, „DOM“, „Elemente“ und „Codefragmente“.

Hinweis:

Wenn Sie sich für einen Arbeitsbereich entschieden haben, können Sie diesen anpassen, indem Sie Bedienfelder hinzufügen oder entfernen. Weitere Informationen finden Sie unter Benutzerdefinierte Arbeitsbereiche erstellen.

Im Folgenden finden Sie eine Zusammenfassung der Unterschiede zwischen den Arbeitsbereichen in Dreamweaver CC 2015 und Dreamweaver CC 2017.

Dreamweaver CC 2015

  • Einsteiger
  • Code
  • Standard
  • Entwurf
  • Extract

Dreamweaver CC 2017

  • Entwickler
  • Standard

Weitere Informationen zu diesen Änderungen finden Sie unter Der Dreamweaver-Arbeitsbereich.

Änderungen an den Menüs

Wir haben selten verwendete Menüelemente aus dem Applikationsmenü entfernt. Bei anderen Menüelementen wurde die Position angepasst, um den Zugriff intuitiver zu gestalten.

Eine ausführliche Beschreibung der Änderungen am Applikationsmenü von Dreamweaver finden Sie unter Umgestaltete Menüs.

Änderungen an der Symbolleiste

Alle Ansichten verwenden jetzt dieselbe Symbolleiste. Die Symbolleiste enthält nur noch diejenigen Werkzeuge, die innerhalb der Ansicht, in der Sie arbeiten, erforderlich sind.

Sie können die Symbolleiste allerdings anpassen, sodass Sie den von Ihnen benötigten Werkzeugsatz enthält. 

Weitere Informationen finden Sie unter Überblick über die Symbolleiste.

Änderungen der Statusleiste

Die Statusleiste zeigt jetzt hilfreiche Informationen an, wenn Sie in der Codeansicht arbeiten. 

Sie haben jetzt folgende Möglichkeiten:

  • Wechseln zwischen dem Einfüge- und Überschreibmodus
  • Anzeigen der Zeilen- und Spaltennummern am unteren Rand des Bildschirms. Diese Nummern zeigen an, in welcher Zeile und Spalte sich der Mauszeiger befindet.
  • Auswählen einer gewünschten farbigen Codehervorhebung für unterschiedliche Typen von Codedateien.

Weitere Informationen finden Sie unter Überblick über die Statusleiste.

Änderungen im Bedienfeld „Codefragmente“

Das Bedienfeld „Codefragmente“ verfügt jetzt über eine übersichtlichere Darstellung und wurde überarbeitet, um das Einfügen von Codefragmenten zu vereinfachen.

In der folgenden Abbildung werden die wichtigsten Änderungen am Bedienfeld „Codefragmente“ aufgezeigt:

Änderungen der Benutzeroberfläche im Bedienfeld „Codefragmente“
Änderungen der Benutzeroberfläche im Bedienfeld „Codefragmente“

In früheren Versionen von Dreamweaver mussten Codefragmente mithilfe von Tastaturbefehlen eingefügt werden.

Dies war aus den folgenden Gründen keine effektive Arbeitsweise:

  • Es war erforderlich, nicht intuitive Tastaturbefehle im Gedächtnis zu behalten.
  • Potenzielle Konflikte mit Tastaturbefehlen für produktspezifische Schlüsselwörter.

In dieser Version von Dreamweaver können Sie zum Einfügen von Codefragmenten Auslöserkürzel verwenden.

Bei Auslöserkürzeln handelt es sich um einfache Textzeichenfolgen, die Codefragmenten zugewiesen sind. Für ein Codefragment beispielsweise, das einen mailto-Hyperlink erstellt, können Sie „mailto“ eingeben – dies ist dann das Auslöserkürzel.

Nachdem Sie ein Auslöserkürzel zugewiesen haben, können Sie den Cursor im Dokument platzieren, „mailto“ eingeben und die Tab-Taste drücken. Das entsprechende Codefragment wird dann von Dreamweaver in das Dokument eingefügt.

Weitere Informationen über das Bedienfeld „Codefragmente“ erhalten Sie unter Wiederverwenden von Code mit Codefragmenten.

Änderungen im Bedienfeld „Dateien“

Das Bedienfeld „Dateien“ wurde umgestaltet, um die Verwendung und Bedienung zu vereinfachen.

In der einfachsten Form wird im Bedienfeld „Dateien“ lediglich eine Liste der lokalen Dateien auf Ihrem Computer angezeigt. Wenn Sie das Bedienfeld „Dateien“ intensiver verwenden, zum Beispiel eine Site einrichten, Verbindungen zu Remote-Servern herstellen und das Ein- und Auschecken aktivieren, werden mehr Optionen angezeigt.

Weitere Informationen zu diesen Änderungen finden Sie unter Umgestaltetes Bedienfeld „Dateien“.

Änderungen am Begrüßungsbildschirm und Einführungstutorial

Ein neuer Startarbeitsbereich wird angezeigt, wenn Sie Dreamweaver starten oder alle Dreamweaver-Dokumente schließen. Über den Startarbeitsbereich haben Sie bequem Zugriff auf Ihre zuletzt verwendeten Dateien, Bibliotheken und Startvorlagen.

Wenn Sie die früheren Dialogfelder bevorzugen, können Sie Strg/Befehl+O drücken, um das Dialogfeld „Öffnen“ aufzurufen, oder zum Zugriff auf das Dialogfeld „Neues Dokument“ Strg/Befehl+N eingeben.

Wenn Sie sich die Neuerungen am Arbeitsbereich von Dreamweaver CC 2017 schnell zu eigen machen möchten, können Sie unser Einführungstutorial absolvieren. Dieses bietet einen Schnellüberblick über die Anpassungsmöglichkeiten, sodass Sie den für Sie richtigen Arbeitsbereich und passende Themenoptionen finden. 

Weitere Informationen finden Sie unter Der Dreamweaver-Arbeitsbereich.

Live-Hervorhebung beim Suchen und Ersetzen

Die neue unaufdringliche Symbolleiste „Suchen und ersetzen“ befindet sich am oberen Rand des Fensters, ohne einen Teil des Bildschirms zu blockieren.

Die Funktion „Suchen und ersetzen“ wird im Allgemeinen schneller und effizienter als in früheren Versionen von Dreamweaver ausgeführt. Während Sie im Suchbedienfeld den Suchtext eingeben, sucht Dreamweaver nach dieser Zeichenfolge und hebt alle Übereinstimmungen der Zeichenfolge im aktuellen Dokument hervor. 

Weitere Informationen finden Sie unter Suchen und Ersetzen von Text.

Neuerungen bei Creative Cloud Assets

Alle in Creative Cloud gespeicherten Assets – z. B. Dateien in Ihren Creative Cloud-Bibliotheken, mit Desktop-Produkten erstellte Inhalte oder Projekte mit Adobe-Apps – können Sie archivieren, wiederherstellen und mit Kommentaren versehen. Sie können außerdem einen Versionsverlauf anzeigen.

Automatische Wiederherstellung von Dateien nach einem Absturz

Wenn Dreamweaver aufgrund von Systemfehlern, Stromausfall oder anderen Problemen unerwartet abstürzt, können Sie nicht gespeicherte Änderungen an den Dateien, die Sie gerade bearbeitet haben, wiederherstellen.

Weitere Informationen finden Sie unter Automatische Wiederherstellung von Dateien.

Dieses Werk unterliegt den Bedingungen der Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License.  Twitter™ und Facebook-Beiträge fallen nicht unter die Bedingungen der Creative Commons-Lizenz.

Rechtliche Hinweise   |   Online-Datenschutzrichtlinie