Programmierumgebung in Dreamweaver

Wenn Sie in Dreamweaver mit Code arbeiten möchten, können Sie den Arbeitsbereich für Entwickler verwenden. In diesem Arbeitsbereich wird standardmäßig die Codeansicht angezeigt und auf der linken Seite des Bildschirms sind nur die Bedienfelder „Dateien“ und „Codefragmente“ angedockt.

Wenn Sie weitere Funktionen benötigen, wählen Sie im Menü „Fenster“ das entsprechende Bedienfeld aus.

In Dreamweaver gibt es verschiedene Möglichkeiten, um mit Code zu arbeiten:

• Codeansicht: Klares, minimalistisches Layout, in dem Sie ausschließlich mit Code arbeiten können, ohne zusätzliche Bedienfelder oder Fenster. Weitere Informationen finden Sie unter Code im Dokumentfenster anzeigen.
• Geteilte Ansicht: In dieser Ansicht ist sowohl die Code- als auch die Live- oder Entwurfsansicht sichtbar, sodass Sie die Änderungen, die Sie beim Programmieren vornehmen, gleich umgesetzt sehen. Weitere Informationen finden Sie unter Seite im Dokumentfenster gleichzeitig programmieren und bearbeiten – Geteilte Ansicht.

Sie können zwischen den verschiedenen Ansichten wechseln, indem Sie oben im Arbeitsbereich auf die Schaltflächen „Code“, „Teilen“ und „Entwurfsansicht“/„Live-Ansicht“ klicken.

Sie können auch den Codeinspektor verwenden, um HTML in einem unverankerten Fenster anzuzeigen. Mit dem Codeinspektor können Sie Ihr Website-Design und den Code gleichzeitig sehen, ohne die Ansicht in zwei Hälften zu teilen. Weitere Informationen finden Sie unter Code in einem separaten Fenster mit dem Codeinspektor anzeigen.

Code im Dokumentfenster anzeigen – Codeansicht

Seite im Dokumentfenster gleichzeitig programmieren und bearbeiten - Geteilte Ansicht

Code in einem separaten Fenster mit dem Codeinspektor anzeigen

Mithilfe des Codeinspektors können Sie, ebenso wie in der Codeansicht, in einem separaten Codefenster arbeiten.

Schneller in Dreamweaver programmieren

Die Codeansicht in Dreamweaver bietet programmierfreundliche Funktionen, die die Designer unterstützen, wenn sie beginnen in der Codeansicht zu entwickeln sowie visuelle Hilfsmittel für erfahrene Programmierer wie automatischer Einzug, farbige Codehervorhebung und skalierbare Schriften, durch die sich Fehler reduzieren und die Lesbarkeit erhöhen lassen.

Im Folgenden werden einige der Funktionen von Dreamweaver erläutert.

Codehinweise und Codevervollständigung

Über die Funktion Codehinweise (oder Codevervollständigung) in Dreamweaver können Sie während der Eingabe Tags, Attribute und CSS-Stile aus einem Popupmenü auswählen. Mithilfe dieser automatischen Codevervollständigung können Sie schneller und mit weniger Fehlern programmieren.

Das folgende Beispiel zeigt, wie dies in HTML-Code funktioniert: 

Sobald Sie „<“ eingeben, öffnet Dreamweaver ein Popup-Menü mit allen verfügbaren HTML-Tags. Während Sie mit der Eingabe des Tags fortfahren, aktualisiert Dreamweaver automatisch die verfügbaren HTML-Tags und erlaubt Ihnen die Auswahl des passenden Tags. Wenn Sie die Eingabetaste drücken, fügt Dreamweaver das Tag ein. Anschließend wird ein zweites Popupmenü mit allen verfügbaren Eigenschaften des betreffenden Tags angezeigt.

Codehinweise sind auch für CSS, JavaScript und PHP (PHP-Versionen 5.6 und 7.1) verfügbar. 

Weitere Informationen finden Sie unter Codehinweise und Codevervollständigung.

Unterstützung für PHP-Versionen 5.6 und 7.1

Dreamweaver unterstützt die Versionen 5.6 und 7.1 von PHP. 

Sie können im Dialogfeld „Site-Definition“ für jede Site einzeln oder in den Applikationsvoreinstellungen für alle PHP-Dateien, die Sie außerhalb von Dreamweaver-Sites öffnen, auswählen, ob die PHP-Dateien Ihrer Site mit der PHP-Version 5.6 oder 7.1 kompiliert werden sollen. Codehinweise und Linting-Prüfungen werden dann für die ausgewählte PHP-Sprachversion in Dreamweaver eingerichtet.

Für neue Sites in Dreamweaver wird der Standard-PHP-Compiler auf die unter Bearbeiten > Voreinstellungen > PHP angegebene Version festgelegt.

Weitere Informationen zur PHP-Unterstützung in Dreamweaver finden Sie unter:

• PHP-Voreinstellungen festlegen
• PHP-Codehinweise

Allgemeine Informationen zu den PHP-Versionen 5.6 und 7.1 finden Sie in den folgenden Ressourcen:

• Migration von PHP 5.6.x zu PHP 7.0.x: http://php.net/manual/de/migration70.php
• Migration von PHP 7.0.x zu PHP 7.1: http://php.net/manual/de/migration71.php
• Weitere Informationen zu PHP 7.1: http://php.net/releases/7_1_0.php

Codehinweise für JavaScript-Objekte

Dreamweaver unterstützt Codehinweise auch für JavaScript. Es werden Codehinweise für grundlegende JavaScript-Objekte wie arrays, dates, numbers und strings eingeblendet. 

Zudem verfolgt Dreamweaver, welche JavaScript-Funktionen Sie erstellen und stellt Codehinweise mit Ihren eigenen Funktionsnamen bereit.

Weitere Informationen finden Sie unter Codehinweise und Codevervollständigung.

JavaScript-Code-Refactoring

Dreamweaver unterstützt das Refactoring von Code. Code-Refactoring bezeichnet das Umstrukturieren von vorhandenem Computercode, ohne dass dabei sein externes Verhalten verändert wird. Der Code wird lesbarer und leichter verständlich. Dies spart Zeit beim Debuggen von Code durch kleinere Funktionen und ordnungsgemäße Ersetzung. Beim JavaScript-Refactoring können Sie Funktionen und Variablen mit Erkennung des Gültigkeitsbereichs umbenennen.

Weitere Informationen finden Sie unter Code schreiben und bearbeiten

Farbige Codehervorhebung für unterschiedliche Dateitypen

Dreamweaver unterstützt die farbige Codehervorhebung 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.

Mehrere Cursors bei wiederkehrenden Aufgaben

Schreiben Sie mehrere Codezeilen gleichzeitig, um schnell z. B. Aufzählungslisten zu erstellen, eine Reihe von Strings zu aktualisieren und mehrere Bearbeitungen gleichzeitig vorzunehmen.

Mit dieser Funktion arbeiten Sie sehr viel effektiver, da Sie dieselbe Codezeile nicht mehrmals schreiben müssen. Dies wird für Sie durch die verschiedenen Cursors erledigt.

Beim Bearbeiten von Code, haben Sie folgende Vorteile:

• Sie können mehrere Cursors hinzufügen, um neuen Inhalt an mehreren Stellen einzufügen.
• Wenn Sie Text an mehreren Stellen auswählen, lässt sich dieselbe Änderung auf verschiedene Teile Ihres Dokuments anwenden.

Weitere Informationen finden Sie unter Hinzufügen von mehreren Cursors oder Mehrfachauswahl.

Schnelle Bearbeitung zugehöriger Codedateien

Um schnelle Ä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.

Fallbeispiel

Stellen Sie sich das folgende Szenario vor:

Sie bearbeiten eine HTML-Datei und stellen fest, dass in der Live-Ansicht etwas falsch aussieht. Dann wechseln Sie in die Codeansicht und erkennen, dass Sie auch eine zugehörige Datei (etwa eine CSS-Datei) ändern müssen, um das Problem zu beheben. 

Anstatt die Registerkarte zu wechseln, klicken Sie mit der rechten Maustaste auf den entsprechenden Code oder verwenden einen Tastaturbefehl und Dreamweaver öffnet innerhalb der HTML-Datei den entsprechenden Codeabschnitt in der zugehörigen CSS-Datei.

Sie können nun den CSS-Code bearbeiten ohne navigieren oder die Registerkarten wechseln zu müssen. Die Änderungen werden in der CSS-Datei automatisch aktualisiert.

Weitere Informationen finden Sie unter Schnellbearbeitung.

Kontextabhängige CSS-Dokumentation

Schnelldokumente bieten eine Dokumentation von CSS-Eigenschaften direkt in der Codeansicht.

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

Weitere Informationen finden Sie unter  Mit Schnelldokumenten Hilfe zu CSS in Dreamweaver erhalten.

Direkte Emmet-Unterstützung

Emmet ist ein Plug-in zum schnellen Schreiben von Code und Generieren von HTML- und CSS-Code.

Das Emmet-Plugin ist in Dreamweaver integriert, sodass Sie Emmet-Abkürzungen verwenden können, ohne extra das Plugin installieren zu müssen.

In der Codeansicht oder im Codeinspektor von Dreamweaver können Sie Emmet-Abkürzungen verwenden und die Tabulatortaste drücken, um anstelle der Abkürzungen den vollständigen HTML- bzw. CSS-Code einzufügen.

HTML-Abkürzungen können in HTML- und PHP-Seiten verwendet werden.

CSS-Abkürzungen können in CSS-, Less-, Sass- und SCSS-Seiten oder im style-Tag auf einer HTML-Seite verwendet werden.

Weitere Informationen zur Verwendung von Emmet finden Sie unter Verwenden des Emmet-Toolkits mit Dreamweaver.

Code ausblenden

In Dreamweaver können Sie Codeabschnitte ausblenden und sich damit besser auf die Bereiche konzentrieren, die Sie gerade bearbeiten. 

Sie können Code auf Grundlage von Tags oder Klammern oder abhängig von einer Markierung ausblenden. 

Weitere Informationen finden Sie unter Code aus- und einblenden.

Codeüberprüfung

Für die Fehlersuche in Ihrem Code bietet Dreamweaver die Linting-Funktionalität. 

Der Code wird analysiert und potenzielle Fehler oder eine verdächtige Codeverwendung werden gekennzeichnet. Durch das Linting werden in Dreamweaver beispielsweise HTML-Syntaxfehler, Analysefehler in CSS oder Warnungen in JavaScript-Dateien gekennzeichnet.

Weitere Informationen zum Codelinting in Dreamweaver finden Sie unter Code-Linting.

Wenn Sie mit PHP arbeiten und Ihr Dokument ungültigen Code enthält, wird dieser in der Entwurfsansicht angezeigt (wenn sie geöffnet ist) und in der Codeansicht hervorgehoben (abhängig von Ihren Voreinstellungen).

Wenn Sie den Code in einer Ansicht auswählen, wird im Eigenschafteninspektor angezeigt, warum der Code ungültig ist und wie das Problem behoben werden kann.

Unterstützung von CSS-Präprozessoren

Dreamweaver unterstützt jetzt häufig eingesetzte CSS-Präprozessoren wie SASS, Less oder SCSS, mit vollständiger farbiger Code-Hervorhebung, Codehinweisen und Kompilierung. 

Durch die Unterstützung von CSS-Präprozessoren können Sie Zeit sparen, wenn Sie mit großen Sites mit komplizierten Stylesheets arbeiten.

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

Codefragmente speichern und wiederverwenden

Im Bedienfeld „Codefragmente“ können Sie häufig verwendete Codeblöcke als Codefragmente speichern. Diese Codeblöcke können Sie dann auf mehreren Seiten einfügen.

Im Bedienfeld „Codefragmente“ gespeicherte Codefragmente sind nicht sitespezifisch und können daher für verschiedene Sites wiederverwendet werden.

Mithilfe der Synchronisationseinstellungen können Sie Codefragmente auch auf unterschiedlichen Geräten und auch in verschiedenen Dreamweaver-Versionen verwenden.

Weitere Informationen finden Sie unter Wiederverwenden von Code mit Codefragmenten.

Echtzeitvorschau im Browser

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

Weitere Informationen finden Sie unter Echtzeitvorschau im Browser.

Tastaturbefehle anpassen

Sie können in Dreamweaver Ihre bevorzugten Tastaturbefehle verwenden. Wenn Sie an bestimmte Tastaturbefehle gewöhnt sind, z. B. Umschalt+Eingabe für das Hinzufügen eines Zeilenumbruchs oder Strg+G, um eine bestimmte Position im Code anzusteuern, können Sie sie in Dreamweaver mithilfe des Tastaturbefehleditors hinzufügen.

Erläuterungen hierzu finden Sie unter Tastaturbefehle anpassen.

Dateien standardmäßig in der Codeansicht öffnen

Wenn Sie einen Dateityp öffnen, der normalerweise keinen HTML-Code enthält (z. B. eine JavaScript-Datei), wird diese Datei nicht in der Entwurfs- sondern in der Codeansicht (oder im Codeinspektor) geöffnet. Sie können festlegen, welche Dateitypen in der Codeansicht geöffnet werden.