Benutzerhandbuch Abbrechen

Schreiben und Bearbeiten von Code

Suchen

Zuletzt aktualisiert am 1. Mai 2021

Dreamweaver

App öffnen

Hier erfahren Sie, wie Sie mit der Codeansicht arbeiten und die Programmierfunktionen von Dreamweaver optimal nutzen.

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

Sie können im Dialogfeld „Neues Dokument“ eine neue Codedatei öffnen und damit beginnen, Code zu schreiben.

Neue Codedateien in Dreamweaver erstellen

Während der Eingabe werden Codehinweise eingeblendet, die Ihnen bei der Codeauswahl helfen und mit denen Sie Tippfehler verhindern können. Die nützliche Schnelldokumentation von Dreamweaver unterstützt Sie bei CSS.

Sie können Code auch über das Bedienfeld „Einfügen“ oder mithilfe von Tastaturbefehlen für die Programmierung wie Emmet-Abkürzungen einfügen.

Wenn Sie einen bestimmten Codeausschnitt mehrfach kopieren und einfügen, sollten Sie diese zeitsparenden Funktionen ausprobieren:

Das Bedienfeld „Codefragmente“ ist äußerst nützlich, um vorformatierte Codefragmente schnell zu erstellen und in Ihren Code einzufügen.
Mehrere Cursors ermöglichen es Ihnen, mehrere Codezeilen gleichzeitig zu erstellen und zu bearbeiten.

Mit den leistungsstarken Bearbeitungswerkzeugen von Dreamweaver wird das Navigieren im Code und das Ändern von Code erleichtert.

Verwenden Sie die Dreamweaver-Funktion für das Suchen und Ersetzen, um Tags, Attribute oder Text im Code zu suchen.
Mit dem Code-Navigator können Sie innerhalb und außerhalb der aktuellen Datei zu zugehörigem Code navigieren. Oder noch besser: Verwenden Sie die Funktion der Schnellbearbeitung, um Code in zugehörigen Dateien zu bearbeiten, ohne die entsprechende Datei in einer neuen Registerkarte öffnen zu müssen.
Klicken Sie mit der rechten Maustaste auf den Code, um ein übersichtliches, relevantes Kontextmenü zu öffnen, in dem Sie den Code direkt bearbeiten können.
Mithilfe der Option „Tag um Objekt legen“ können Sie Text in Tags einschließen.

Im Folgenden finden Sie weitere Informationen zu diesen Codefunktionen.

Code über das Bedienfeld „Einfügen“ einfügen

Setzen Sie die Einfügemarke in den Code.
Wählen Sie im Bedienfeld „Einfügen“ die entsprechende Kategorie aus.
Klicken Sie im Bedienfeld „Einfügen“ auf eine Schaltfläche oder wählen Sie in einem Popupmenü des Bedienfelds eine Option aus.

Wenn Sie auf ein Symbol klicken, wird der Code entweder sofort auf der Seite angezeigt oder Sie werden in einem Dialogfeld dazu aufgefordert, weitere Informationen einzugeben, damit der Code vervollständigt werden kann.

Die Anzahl und Art der im Bedienfeld „Einfügen“ verfügbaren Schaltflächen hängt vom aktuellen Dokumenttyp ab. Darüber hinaus spielt es eine Rolle, ob Sie in der Codeansicht oder der Entwurfsansicht arbeiten.

Emmet-Toolkit mit Dreamweaver verwenden

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

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.

Im Folgenden finden Sie einige Beispiele, die veranschaulichen, wie Sie Emmet-Abkürzungen in der Codeansicht verwenden können. Ausführliche Informationen und eine Referenz finden Sie in der Emmet-Dokumentation.

Hinweis:

Dreamweaver unterstützt zurzeit Emmet 1.2.2-Abkürzungen.

Beispiel 1: Einfügen von HTML-Code mit Emmet

Um schnell HTML-Code für eine ungeordnete Liste mit drei Elementen hinzuzufügen, öffnen Sie die HTML-Datei und geben in der Codeansicht die folgende Emmet-Abkürzung in <body></body> ein:

div>(ul>li*3>{Lorem Ipsum})+p*4>lorem

Stellen Sie jetzt sicher, dass sich der Cursor direkt hinter der Emmet-Abkürzung befindet, und drücken Sie die Tabulatortaste, um die Abkürzung zu erweitern. Alternativ können Sie die gesamte Abkürzung auswählen und dann die Eingabetaste drücken.

Statt der Abkürzung wird der folgende Code angezeigt:

<div>
    <ul>
        <li>Lorem Ipsum</li>
        <li>Lorem Ipsum</li>
        <li>Lorem Ipsum</li>
    </ul>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe, voluptatum, perferendis ad impedit iste assumenda et laborum doloribus optio molestiae perspiciatis modi quaerat corrupti velit cupiditate eligendi tempora temporibus vel.</p>
    <p>Ipsa, distinctio, eveniet ad numquam libero quam doloremque culpa illo ex possimus eligendi amet nesciunt provident inventore rerum facere ea veritatis itaque? Suscipit rem asperiores excepturi sapiente enim architecto esse.</p>
    <p>Harum, ad porro molestiae corporis natus aut non fugit. Recusandae, reprehenderit, voluptate voluptas reiciendis voluptatum tempora vero vel libero facere fuga maiores ratione eaque ad illum porro dignissimos sit eos.</p>
    <p>Dignissimos, molestiae, quis ducimus ratione temporibus sed accusamus libero consequuntur ex velit maiores illum repudiandae cum! Dolorum, dolore, pariatur, incidunt in saepe laudantium consequatur provident totam vero velit nobis accusantium!</p>
</div>

Beispiel 2: Einfügen von CSS-Code mit Emmet

Um CSS-Code zum Erstellen des Rahmenradius mit Herstellerpräfixen einzufügen, öffnen Sie die CSS-Datei und geben die folgende Emmet-Abkürzung in einer Klasse ein:

-bdrs

Wenn Sie die Tabulatortaste drücken, wird statt der Abkürzung der folgende Code angezeigt:

-webkit-border-radius: ;
 
-moz-border-radius: ;
 
border-radius: ;

Mit Codekommentaren arbeiten

Ein Kommentar ist Text, den Sie als Beschreibung oder Zusatzinformation in HTML-Code einfügen. Die Kommentare werden lediglich in der Codeansicht angezeigt und sind im Browser nicht sichtbar.

Kommentare zum Code hinzufügen

Um Kommentare hinzuzufügen, geben Sie zunächst den Kommentartext ein. Dann können Sie den Cursor an der Einfügemarke platzieren und in der Symbolleiste auf das Symbol „Einfügen“ klicken, um das Untermenü „Kommentar anwenden“ zu öffnen.

Sie können den Text auch auswählen und als Kommentar festlegen. Der ausgewählte Text wird in einem Kommentarblock eingeschlossen.

Für das Hinzufügen von Kommentaren sind verschiedene Syntaxoptionen verfügbar. Wählen Sie die gewünschte Syntax aus und Dreamweaver fügt die Tags automatisch hinzu. Sie müssen nur noch den Kommentartext eingeben.

Mit den Tastaturbefehlen Strg+/ (Windows) bzw. Befehl+/ (Mac) können Sie ebenfalls Kommentare hinzufügen.

Wenn Sie den Tastaturbefehl verwenden, ohne Text auszuwählen, wird der Kommentar auf die aktuelle Zeile angewendet. Wenn Sie Text auswählen und den Tastaturbefehl verwenden, wird den Kommentar auf den ausgewählten Text angewendet.

Kommentare aus dem Code entfernen

Um Codekommentare zu entfernen, wählen Sie den Code aus und klicken Sie anschließend in der Symbolleiste auf das Symbol „Kommentar entfernen“. Mit den Tastaturbefehlen Strg+/ (Windows) bzw. Befehl+/ (Mac) können Sie ebenfalls Kommentare entfernen.

Codekommentare ein-/ausblenden

Wenn Sie Kommentare in der Codeansicht ein- bzw. ausblenden möchten, drücken Sie einfach für den ausgewählten Kommentar oder die ausgewählte Zeile Strg+/ (Windows) bzw. Befehl+/ (Mac).

Mehrere Cursors zum Hinzufügen oder Ändern von Text an mehreren Stellen verwenden

Mithilfe der Dreamweaver-Funktion für mehrere Cursors fügen Sie Cursors an mehreren Stellen hinzu oder wählen mehrere Codefragmente aus und bearbeiten sie gleichzeitig.

Hinweis:

Vorgänge zum Kopieren und Einfügen sowie zum Suchen und Ersetzen können nicht mit mehreren Cursors oder der Mehrfachauswahl verwendet werden.

Mehrere Cursors oder Mehrfachauswahl hinzufügen

Je nach Ihren Anforderungen stehen verschiedene Möglichkeiten zur Verfügung, um mehrere Cursors hinzuzufügen.

Wenn Sie einen Text an mehreren Stellen einfügen möchten, ohne den vorhandenen Text zu ersetzen, fügen Sie mehrere Cursors hinzu.

Wenn Sie den vorhandenen Text ersetzen möchten, können Sie die Mehrfachauswahl verwenden. Sie können zusammenhängende oder nicht zusammenhängende Textzeilen auswählen oder beides und diesen Zeilen Cursors hinzufügen.

Gehen Sie wie folgt vor, um mehrere Cursors oder eine Mehrfachauswahl in einer Spalte über zusammenhängende Zeilen hinweg hinzuzufügen:

Halten Sie die Alt-Taste gedrückt und ziehen Sie dann bei gedrückter Maustaste vertikal. Beim vertikalen Ziehen werden jeder Zeile, über die Sie die Maus ziehen, Cursors hinzugefügt.

Text, der an den Cursorpositionen über mehrere Zeilen hinweg hinzugefügt wird

Wenn Sie zusammenhängende Textzeilen auswählen möchten, drücken Sie die Alt-Taste und ziehen Sie die Maus diagonal. Beim diagonalen Ziehen der Maus wählt Dreamweaver einen rechteckigen Textblock innerhalb dieser Auswahl aus.

Mehrere Textzeilen gleichzeitig auswählen und aktualisieren

Hinweis:

Um Cursors schnell hinzufügen oder mehrere Zeilen in eine Auswahl einzuschließen, verwenden Sie den Tastaturbefehl Umschalt+Alt+Nach-oben-Taste/Nach-unten-Taste.

Nachdem Sie die Cursors (oder den ausgewählten Text) an mehreren Stellen hinzugefügt haben, können Sie mit der Eingabe beginnen.

Wenn mehrere Cursors vorhanden sind, wird der neue Text hinzugefügt.

Wenn Sie Inhalte in mehreren Textzeilen ausgewählt haben, wird der ausgewählte Text durch den neu eingegebenen Text ersetzt.

So fügen Sie mehrere Cursors in verschiedenen Spalten über mehrere Zeilen hinweg hinzu:

Wenn Sie verschiedenen Textzeilen Cursors hinzufügen möchten, drücken Sie die Strg-Taste und klicken Sie auf die verschiedenen Zeilen an, für die der Cursor an der Stelle platziert werden soll.

Cursors zu mehreren nicht zusammenhängenden Textzeilen hinzufügen

Um nicht zusammenhängende Textzeilen auszuwählen, wählen Sie einen Textabschnitt aus, drücken Sie dann die Strg-Taste (Windows) bzw. die Befehlstaste (Mac OS) und erstellen Sie eine weitere Auswahl.

Gehen Sie wie folgt vor, um Cursors am Anfang/Ende jeder Zeile hinzuzufügen:

Wählen Sie mehrere Textzeilen aus und drücken Sie dann die linke oder die rechte Pfeiltaste.

Gehen Sie wie folgt vor, um Cursors in vorausgehenden oder nachfolgenden Zeilen für eine Auswahl hinzuzufügen:

Drücken Sie Umschalt+Alt+Nach-oben-Taste/Nach-unten-Taste und dann die rechte Pfeiltaste.

Gehen Sie wie folgt vor, um zusammenhängende und nicht zusammenhängende Textzeilen auszuwählen:

Sie können diese Vorgehensweisen kombinieren, um sowohl zusammenhängende als auch einzelne Textzeilen innerhalb einer einzelnen Auswahl auszuwählen.

Wählen Sie zunächst die nicht zusammenhängenden Textzeilen aus, drücken Sie dann Strg+Alt (Windows) bzw. Befehl+Alt (Mac) und ziehen Sie anschließend die Maus, um der vorhandenen Mehrfachauswahl eine Reihe von Zeilen hinzuzufügen.

Sowohl zusammenhängende als auch nicht zusammenhängende Textzeilen auswählen

Über die Schnelldokumentation in Dreamweaver Hilfe zu CSS anzeigen

Beim Arbeiten mit CSS-, LESS- und SCSS-Dateien in Dreamweaver können Sie schnell Informationen zu CSS-Eigenschaften oder -Werten abrufen.

Platzieren Sie den Cursor in einer Eigenschaft oder in einem Wert und drücken Sie Strg+K. Dreamweaver öffnet nun Dokumentationen vom Projekt „Web Platform Docs“.

Sie können gleichzeitig mehrere Inline-Editoren und Dokument-Viewer öffnen.

Um einen einzelnen Inline-Editor oder Dokument-Viewer zu schließen, klicken Sie oben links auf das „x“ oder drücken die Esc-Taste, während die Schnelldokumentation den Fokus hat.

Um alle Inline-Editoren und Dokumente zu schließen, setzen Sie den Cursor wieder in den äußeren Hauptcodeeditor und drücken die ESC-Taste:

Code analysieren

Dreamweaver unterstützt Linting (Überprüfung von Code auf potenzielle Fehler hin) für HTML, CSS und JavaScript.

Beim Linting erkannte Fehler und Warnungen werden im Ausgabe-Bedienfeld aufgeführt. Weitere Informationen finden Sie unter Code-Linting.

Außerdem wird in Dreamweaver in der Spalte mit den Zeilennummern für die Zeile mit dem Fehler eine kurze Vorschau auf den Fehler angezeigt. Die Zeilennummer wird rot dargestellt, um auf Fehler in dieser Zeile hinzuweisen. Wenn Sie die Maus über die Zeilennummer bewegen, wird eine kurze Beschreibung des Fehlers eingeblendet.

Hinweis: Es wird nur der erste Fehler in der Zeile angezeigt. Wenn die Zeile nur eine Warnung enthält, wird eine Beschreibung der Warnung angezeigt. Wenn die Zeile eine Warnung und einen Fehler enthält, wird nur die Fehlerbeschreibung angezeigt.

Text mit „Tag um Objekt legen“ im Code einschließen

Verwenden Sie „Tag um Objekt legen“ in der Codeansicht, um bestimmte Textzeilen in ein Tag einzuschließen. In der Entwurfs- oder Live-Ansicht können Sie diese Funktion verwenden, um Objekte in ein Tag einzuschließen.

Wählen Sie Text in der Codeansicht oder ein Objekt in der Entwurfsansicht aus und drücken Sie Strg+T.

Es wird ein Popupfenster eingeblendet, in dem Sie einige HTML-Tags auswählen können.
Wählen Sie im Menü ein Tag aus.

Wenn Sie in der Codeansicht arbeiten, wird der ausgewählte Text in dieses Tag eingeschlossen. Bei Verwendung der Entwurfs- oder Live-Ansicht wird das ausgewählte Objekt in dieses Tag eingeschlossen.

Code über das Kontextmenü „Kodierung“ bearbeiten

Verwenden Sie das Dreamweaver-Kontextmenü für eine schnelle Bearbeitung von Code.

Um das Kontextmenü zu öffnen, klicken Sie mit der rechten Maustaste (Windows) bzw. klicken bei gedrückter Befehlstaste (Mac). Die folgenden Optionen stehen Ihnen zur Verfügung:

Schnellbearbeitung

Klicken Sie auf diese Option, um in den Schnellbearbeitungsmodus zu wechseln. In diesem Modus stellt Dreamweaver kontextspezifischen Code und kontextspezifische Werkzeuge inline bereit, sodass Sie schnell zum gewünschten Codefragment gelangen. Weitere Informationen finden Sie unter Schnellbearbeitung.

„Ausschneiden“, „Kopieren“, „Einfügen“

Klicken Sie auf diese Optionen, um Text schnell auszuschneiden, zu kopieren und einzufügen, ohne das Menü „Bearbeiten“ zu öffnen.

„Suchen und ersetzen“, „Weitersuchen“, „Weitersuchen (rückwärts)“

Klicken Sie auf diese Optionen, um Text schnell zu suchen und zu ersetzen, ohne das Menü „Suchen“ zu öffnen.

Neues Codefragment erstellen

Verwenden Sie diese Option, um Codefragmente zu erstellen, die Sie zur späteren Verwendung speichern können. Wählen Sie den Code aus und klicken Sie auf „Neues Codefragment erstellen“, um aus dem ausgewählten Code ein Fragment zu erstellen. Weitere Informationen finden Sie unter Mit Codefragmenten arbeiten.

Zugehörige Datei öffnen

Klicken Sie mit der rechten Maustaste auf ein link-/script-Tag und klicken Sie auf eine geöffnete zugehörige Datei, um diese zu öffnen.

Stylesheet anfügen

Fügen Sie ein vorhandenes CSS-Stylesheet an Ihre Seite an.

Auswahl

Das Untermenü „Auswahl“ umfasst mehrere Codebearbeitungsoptionen, die Sie für einen ausgewählten Codeausschnitt verwenden können, z. B. Umschalten von Zeile- und Blockkommentaren, Ein- und Ausblenden der Auswahl, Konvertierung von Inline-CSS in Regeln, Verschieben von CSS-Regeln und Drucken von Code.

Code-Navigator

Klicken Sie auf diese Option, um zu zugehörigen Codequellen zu navigieren, beispielsweise zu internen und externen CSS-Regeln, Server-Side Includes, externen JavaScript-Dateien, übergeordneten Vorlagendateien, Bibliotheksdateien und iframe-Quelldateien. Weitere Informationen finden Sie unter Zugehörigen Code anzeigen.

Codehinweiswerkzeuge

Über das Untermenü „Codehinweiswerkzeuge“ können Sie den Farbwähler, den URL-Browser und die Werkzeuge für Schriftenlisten schnell öffnen.

Codeblöcke einrücken

Beim Schreiben und Bearbeiten von Code in der Codeansicht oder im Codeinspektor können Sie die Einrückungsstufe eines ausgewählten Codeblocks oder einer Codezeile ändern und den Code so um einen Tabulator nach rechts oder links verschieben.

Ausgewählte Codeblöcke einrücken

Drücken Sie die Tabulatortaste oder
Drücken Sie Strg+] oder
Wählen Sie „Bearbeiten“ > „Code einrücken“.

Ausgewählte Codeblöcke ausrücken

Drücken Sie Umschalt+Tab oder
Drücken Sie Strg+[ oder
Wählen Sie „Bearbeiten“ > „Code ausrücken“.

Zugehörigen Code anzeigen

Im Code-Navigator wird eine Liste mit Codequellen für eine bestimmte Auswahl auf der Seite angezeigt. Mithilfe des Code-Navigators können Sie zu zugehörigen Codequellen navigieren, beispielsweise zu internen und externen CSS-Regeln, Server-Side Includes, externen JavaScript-Dateien, übergeordneten Vorlagendateien, Bibliotheksdateien und iframe-Quelldateien. Wenn Sie auf einen Hyperlink im Code-Navigator klicken, wird die Datei mit dem entsprechenden Codesegment geöffnet. Die Datei wird im Bereich für zugehörige Dateien angezeigt, wenn dieser aktiviert ist. Wenn der Bereich für zugehörige Dateien nicht aktiviert ist, wird die ausgewählte Datei als gesondertes Dokument im Dokumentfenster geöffnet.

Wenn Sie im Code-Navigator auf eine CSS-Regel klicken, wechseln Sie direkt zu dieser Regel. Wenn die Regel in die Datei integriert ist, wird sie in der geteilten Ansicht angezeigt. Wenn es sich bei der Regel um eine externe CSS-Datei handelt, wird die Datei geöffnet und die Regel im Bereich für zugehörige Dateien über dem Hauptdokument angezeigt.

Sie können den Code-Navigator in der Entwurfs-, Code- und geteilten Ansicht sowie über den Codeinspektor öffnen.

Ein Video des Dreamweaver-Entwicklungsteams mit einem Überblick über die Arbeit mit dem Code-Navigator finden Sie unter www.adobe.com/go/dw10codenav.

Ein Video-Tutorial zum Verwenden der Live-Ansicht sowie zu zugehörigen Dateien und zum Code-Navigator finden Sie unter www.adobe.com/go/lrvid4044_dw.

Code-Navigator öffnen

Klicken Sie bei gedrückter Alt-Taste (Windows) oder bei der Tastenkombination Befehlstaste+Wahltaste (Mac) auf eine Stelle auf der Seite. Im Code-Navigator werden Hyperlinks zum Code für den Bereich angezeigt, auf den Sie geklickt haben.

Klicken Sie auf eine Stelle außerhalb des Code-Navigators, um diesen zu schließen.

Hinweis:

Sie können den Code-Navigator auch öffnen, indem Sie auf den entsprechenden Indikator klicken. Dieses Anzeigeelement wird neben der Einfügemarke auf der Seite angezeigt, wenn die Maus zwei Sekunden lang nicht bewegt wird.

Mithilfe des Code-Navigators zu Code navigieren

Öffnen Sie den Code-Navigator für den gewünschten Bereich auf der Seite.
Klicken Sie auf das entsprechende Codesegment.

Die zugehörigen Codequellen werden im Code-Navigator nach Dateien gruppiert und die Dateien sind in alphabetischer Reihenfolge aufgeführt. Beispiel: CSS-Regeln in drei externen Dateien wirken sich auf die Auswahl in Ihrem Dokument aus. In diesem Fall sind diese drei Dateien und die für die Auswahl relevanten CSS-Regeln im Code-Navigator aufgeführt. Bei CSS-Regeln, die sich auf eine bestimmte Auswahl beziehen, funktioniert der Code-Navigator wie das Bedienfeld „CSS-Stile“ im Modus „Aktuell“.

Hinweis:

Wenn Sie den Mauszeiger über Hyperlinks zu CSS-Regeln bewegen, werden im Code-Navigator QuickInfos zu den Eigenschaften der Regeln angezeigt. Diese QuickInfos sind nützlich bei der Unterscheidung mehrerer Regeln mit dem gleichen Namen.

Anzeigeelement für den Code-Navigator deaktivieren

Öffnen Sie den Code-Navigator.
Aktivieren Sie in der unteren rechten Ecke die Option zum Deaktivieren des Indikators.
Klicken Sie auf eine Stelle außerhalb des Code-Navigators, um diesen zu schließen.

Um den Indikator für den Code-Navigator erneut zu aktivieren, klicken Sie bei gedrückter Alt-Taste (Windows) oder bei gedrückter Tastenkombination Befehlstaste+Wahltaste (Mac) mit der linken Maustaste, um den Code-Navigator zu öffnen. Heben Sie dann die Auswahl der Option zum Deaktivieren des Indikators auf.

Zu JavaScript- oder VBScript-Funktionen navigieren

Sie können in der Codeansicht und im Codeinspektor eine Liste aller im Code enthaltenen JavaScript- oder VBScript-Funktionen anzeigen und zu einer beliebigen Funktion springen.

Zeigen Sie das Dokument in der Codeansicht („Ansicht“ > „Code“) oder im Codeinspektor („Fenster“ > „Codeinspektor“) an.
Führen Sie einen der folgenden Schritte aus:
- Klicken Sie in der Codeansicht mit der rechten Maustaste (Windows) bzw. bei gedrückter Ctrl-Taste (Mac) an einer beliebigen Stelle und wählen Sie das Untermenü „Funktionen“ im Kontextmenü aus.
Hinweis:

Das Untermenü „Funktionen“ wird in der Entwurfsansicht nicht angezeigt.

Wenn der Code JavaScript- oder VBScript-Funktionen enthält, werden diese im Untermenü aufgeführt.

Hinweis:

Um die Funktionen in alphabetischer Reihenfolge anzuzeigen, klicken Sie bei gedrückter Strg-Taste mit der rechten Maustaste (Windows) bzw. bei gedrückter Tastenkombination Wahl+Ctrl (Mac) in der Codeansicht und wählen Sie das Untermenü „Funktionen“.
- Klicken Sie im Codeinspektor in der Symbolleiste auf die Schaltfläche „Liste aller Funktionen“ ({ }).
Wählen Sie einen Funktionsnamen aus, um in Ihrem Code zu dieser Funktion zu springen.

JavaScript extrahieren

Mit dem JavaScript Extractor (JSE) wird der JavaScript-Code vollständig oder größtenteils aus einem Dreamweaver-Dokument entfernt, in eine externe Datei exportiert sowie eine Verknüpfung zwischen der externen Datei und dem Dokument erstellt. Mit dem JSE können zudem Event-Handler wie onclick und onmouseover aus dem Code entfernt und der mit diesen Handlern verknüpfte Code als Unobtrusive JavaScript an das Dokument angefügt werden.

Beachten Sie vor der Verwendung die folgenden Beschränkungen des JavaScript Extractor:

Mit dem JSE werden keine Skript-Tags im Body-Bereich des Dokuments extrahiert (mit Ausnahme von Spry-Widgets). Es ist möglich, dass das Externalisieren dieser Skript-Tags zu unerwarteten Ergebnissen führt. Standardmäßig sind diese Skript-Tags in Dreamweaver im Dialogfeld „JavaScript externalisieren“ aufgeführt, sie werden jedoch nicht zur Extraktion ausgewählt. (Bei Bedarf können Sie sie manuell auswählen.)
Mit dem JSE wird JavaScript-Code nicht aus bearbeitbaren Bereichen von DWT-Dateien (Dreamweaver-Vorlagendateien), aus nicht bearbeitbaren Bereichen von Vorlageninstanzen oder aus Dreamweaver-Bibliothekselementen extrahiert.
Nach dem Extrahieren von JavaScript über die Option „JavaScript externalisieren und als "unauffälliges (unobtrusive) JavaScript" anfügen“ können Dreamweaver-Verhalten nicht mehr im Bedienfeld „Verhalten“ bearbeitet werden. Das Bedienfeld „Verhalten“ kann nicht überprüft und mit Verhalten gefüllt werden, die unauffällig angefügt wurden.
Nach dem Schließen der Seite können Sie Ihre Änderungen nicht mehr rückgängig machen. Sie können die Änderungen jedoch während derselben Bearbeitungssitzung jederzeit rückgängig machen. Wählen Sie dazu „Bearbeiten“ > „Rückgängig“ > „JavaScript externalisieren“.
Einige komplexe Seiten werden möglicherweise nicht wie erwartet ausgeführt. Bedenken Sie dies beim Extrahieren von JavaScript aus Seiten mit document.write() im body-Bereich und mit globalen Variablen.

Ein Video des Dreamweaver-Entwicklungsteams mit einem Überblick über die JavaScript-Unterstützung in Dreamweaver finden Sie unter www.adobe.com/go/dw10javascript.

Verwenden des JavaScript Extractor:

Öffnen Sie eine Seite, die JavaScript enthält.
Klicken Sie auf „Werkzeuge“ > „JavaScript externalisieren“.
Bearbeiten Sie im Dialogfeld „JavaScript externalisieren“ gegebenenfalls die Standardoptionen.
- Wählen Sie „Nur JavaScript externalisieren“ aus, wenn JavaScript in eine externe Datei verschoben und im aktuellen Dokument auf diese Datei verwiesen werden soll. Mit dieser Option werden Event-Handler wie onclick und onload im Dokument beibehalten und Verhalten im Bedienfeld „Verhalten“ bleiben sichtbar.
- Wählen Sie „JavaScript externalisieren und als "unauffälliges (unobtrusive) JavaScript" anfügen“ aus, wenn 1) JavaScript in eine externe Datei verschoben und im aktuellen Dokument auf diese Datei verwiesen werden soll und 2) Event-Handler aus dem HTML-Code entfernt und zur Laufzeit mithilfe von JavaScript eingefügt werden sollen. Wenn Sie diese Option auswählen, können Sie im Bedienfeld „Verhalten“ keine Verhalten mehr bearbeiten.
- Heben Sie in der Spalte „Bearbeiten“ die Auswahl der Änderungen auf, die Sie nicht vornehmen möchten, oder wählen Sie Änderungen aus, die in Dreamweaver nicht standardmäßig ausgewählt sind.
  In Dreamweaver sind standardmäßig die folgenden Änderungen aufgeführt, jedoch nicht ausgewählt:
  
  Skriptblöcke im Head-Tag des Dokuments mit Aufrufen von document.write() oder document.writeln()
  
  Skriptblöcke im Head-Tag des Dokuments mit Funktionssignaturen für EOLAS-Verarbeitungscode, bei dem in der Regel document.write()-Aufrufe verwendet werden
  
  Skriptblöcke im Body-Tag des Dokuments – mit Ausnahme von Skriptblöcken, die nur Konstruktoren für Spry-Widgets oder Spry-Datensätze enthalten
- In Dreamweaver werden Elementen, die über keine ID verfügen, automatisch IDs zugewiesen. Sie können diese IDs im jeweiligen Textfeld „ID“ ändern.
Klicken Sie auf „OK“.

Im Dialogfeld „Zusammenfassung“ wird eine Übersicht über die Extraktionen angezeigt. Überprüfen Sie die Extraktionen und klicken Sie dann auf „OK“.
Speichern Sie die Seite.

In Dreamweaver werden die Datei „SpryDOMUtils.js“ und eine weitere Datei erstellt, die den extrahierten JavaScript-Code enthält. Die Datei „SpryDOMUtils.js“ wird im Ordner „SpryAssets“ in der Site gespeichert und die zweite Datei auf der gleichen Ebene wie die Seite, aus der der JavaScript-Code extrahiert wurde. Denken Sie daran, dass beim Hochladen der Ausgangsdatei auf den Webserver auch diese abhängigen Dateien hochgeladen werden müssen.

Schnellbearbeitung

Statt die Codeumgebung mit vielen Bedienfeldern und Symbolen zu überladen, stellt der Schnellbearbeitungsmodus von Dreamweaver kontextspezifischen Code und kontextspezifische Werkzeuge inline bereit, sodass Sie schnell zum gewünschten Codeabschnitt gelangen.

Sie können den Schnellbearbeitungsmodus wie folgt öffnen:

Klicken Sie mit der rechten Maustaste auf ein Codefragment und wählen Sie im eingeblendeten Kontextmenü die Option „Schnellbearbeitung“ aus.
Drücken Sie Strg+E (Windows) bzw. Befehl+E (Mac).

Schnellbearbeitungsmodus mit HTML-Dateien verwenden

Platzieren Sie den Cursor in einer HTML-Datei innerhalb einer Klasse oder in einem id-Attribut (Name oder Wert) oder im Tag-Namen. In der Schnellbearbeitung werden alle übereinstimmenden CSS-, SCSS- und LESS-Regeln in Ihrem Projekt angezeigt. Sie können diese Regeln direkt inline bearbeiten, ohne den Kontext der HTML-Datei zu verlassen.

Wenn mehrere Regeln passen, können Sie anhand der Liste auf der rechten Seite (oder mit Alt+Nach-oben-Taste/Nach-unten-Taste) zwischen den Regeln navigieren.

Um eine CSS-Regel direkt im Inline-Editor zu erstellen, klicken Sie auf „Neue Regel“ oder drücken Sie Strg+Alt+N (Windows) bzw. Befehl+Wahl+N (Mac).

Schnellbearbeitungsmodus mit JavaScript-Dateien verwenden

Platzieren Sie den Cursor in einer JavaScript-Datei auf einem Funktionsnamen. Die Schnellbearbeitung zeigt den Hauptteil der Funktion an (auch wenn sich dieser in anderen Dateien befindet und durch eine require()-Anweisung darauf verwiesen wird).

Schnellbearbeitungsmodus mit CSS-, SCSS- oder LESS-Dateien verwenden

Wenn Sie die Schnellbearbeitung mit dem Cursor innerhalb eines Farbwerts aufrufen, können Sie auf den Farbwähler zugreifen und die im CSS-Code verwendeten Farben rasch bearbeiten.

Wenn Sie den Cursor in einer CSS-, LESS- oder SCSS-Datei auf einer cubic-bezier()- oder steps()-Übergangszeitfunktion platzieren, zeigt die Schnellbearbeitung einen grafischen Übergangskurveneditor an.

Auch die vordefinierten Zeitfunktionen „ease“, „ease-in“, „ease-out“, „ease-in-out“, „step-start“ und „step-end“ sind zulässige Ausgangspunkte.

Bézier-Kurven mithilfe der Schnellbearbeitung bearbeiten

Code-Refactoring

Code-Refactoring bezeichnet das Umstrukturieren von vorhandenem Computercode, ohne dass sein externes Verhalten verändert wird. Dabei wird der Code lesbarer sowie leichter verständlich und er kann besser verwaltet und debuggt werden. Dieses Verfahren empfiehlt sich, wenn der Code doppelte Codeelemente, lange Methoden oder große Klassen enthält. Dies spart Zeit beim Debuggen von Code durch kleinere Funktionen und ordnungsgemäße Ersetzung.

Beim JavaScript-Refactoring können Sie Funktionen umbenennen und den Gültigkeitsbereich einer Variablen festlegen, sodass Sie sie in einem Codeblock aufrufen können, in dem sie definiert ist.

Hinweis:

Code-Refactoring ist jetzt ausschließlich in JS-Dateien verfügbar.

JavaScript-Refactoring

Refactoring ist bei Code in HTML-, PHP- und JavaScript-Dokumenten möglich. Wenn Sie in Dreamweaver mit der rechten Maustaste auf den Codebereich klicken, wird im Dropdown-Menü die Option Refactoring angezeigt. Das Refactoring umfasst die folgenden Optionen:

Umbenennen
In Variable extrahieren
In Funktion extrahieren
In Try-Catch einschließen
In Bedingung einschließen
In Pfeilfunktion konvertieren
Getter/Setter erstellen

Die Funktion der einzelnen Refactoring-Optionen wird in den folgenden Abschnitten beschrieben:

Umbenennen

Mit der Option „Umbenennen“ werden sämtliche Vorkommen eines Variablennamens oder Funktionsnamens in JavaScript-Code geändert. Das Auswählen einer Variablen per Klicken und Ziehen ist für das Refactoring nicht erforderlich.

Führen Sie zum Umbenennen in JavaScript die folgenden Schritte aus:

Markieren oder platzieren Sie den Text-Cursor in dem Code, der geändert werden muss.
Klicken Sie mit der rechten Maustaste auf den ausgewählten Text und wählen Sie anschließend Refactoring > Umbenennen aus. Sie können zum Umbenennen auch die Tastaturbefehle Strg+Alt+R (Windows) bzw. Befehl+Wahl+R (macOS) verwenden.
Eine Ansicht mit mehreren Cursors wird auf dem Bildschirm geöffnet, in der Sie alle Vorkommen der Variablen ändern können. Durch die verbesserte Funktion für mehrere Cursors wird das nächste Vorkommen der aktuellen Auswahl ausgewählt. Geben Sie einen eindeutigen Variablen- oder Funktionsnamen ein, durch den der aktuelle Name ersetzt werden soll.

Vorher: Umbenennen

Nachher: Umbenennen

In Variable extrahieren

Ersetzen Sie mithilfe von In Variable extrahieren einen Ausdruck durch eine Variable, lokale Variable oder Konstante in JavaScript, indem Sie einen Ausdruck auswählen und mit der rechten Maustaste darauf klicken. Wählen Sie anschließend Refactoring > In Variable extrahieren aus. Sie können auch die Tastaturbefehle Strg+Alt+V (Windows) und Befehl+Alt+V (macOS) verwenden.

In Funktion extrahieren

Ersetzen Sie mithilfe von In Funktion extrahieren einen Ausdruck in den Aufrufen einer Funktion innerhalb eines Parameters. Der Standardwert des neuen Parameters kann im Funktionstext initialisiert oder über Funktonsaufrufe übergeben werden.

Führen Sie zum Refactoring mithilfe von In Funktion extrahieren die folgenden Schritte aus:

Wählen Sie einen Ausdruck oder eine Reihe von Ausdrücken in JavaScript aus.

Auswahl eines Ausdrucks
Klicken Sie mit der rechten Maustaste und wählen Sie Refactoring > In Funktion extrahieren aus. Sie können auch die Tastaturbefehle Strg+Alt+M (Windows) oder Befehl+Alt+M (Mac OS) verwenden.
Wählen Sie im angezeigten Popup-Menü den Zielbereich zum Extrahieren der Funktion aus.

Typen von Gültigkeitsbereichen
Die Ausgabe hängt vom ausgewählten Zielbereich aus. Beim Zielbereich kann es sich beispielsweise um einen Konstruktor, die ausgewählte Klasse oder eine globale Funktion handeln.

In Funktion extrahieren weist die folgenden Merkmale auf:
- Die zu übergebenden Parameter werden anhand der in der Auswahl oder im extrahierten Gültigkeitsbereich verfügbaren Bezeichner identifiziert.
- Die von der Funktion zurückzugebenden Rückgabeparameter werden anhand von Bezeichnern bestimmt, deren Werte in der Auswahl geändert wurden.
- Zudem wird eine Funktion mit einem eindeutigen Namen erstellt.
In den folgenden Screenshots wird die Ausgabe entsprechend dem vom Benutzer ausgewählten Zielbereich dargestellt:
Konstruktor

Klasse

Global

In Try-Catch einschließen

Verwenden Sie In Try-Catch einschließen für eine Ausnahme in einem Codeblock, die nach dem Kompilieren des Programms als Fehler angezeigt wird. Diese Funktion schließt den Codeblock in einen Try-Catch-Block ein. Der Codeblock wird beim Ausführen des Programms als Ausnahme markiert.

Wählen Sie den Code aus bzw. platzieren Sie den Cursor im Code und wählen Sie Refactoring > In Try-Catch einschließen aus. Wenn Sie den Cursor an einer Position platzieren, werden die umgebenden Anweisungen automatisch ermittelt, andernfalls wird geprüft, ob der Code aus Anweisungen besteht oder nicht. Sind Anweisungen vorhanden, wird der Code in einen Try-Catch-Block eingeschlossen.

In Bedingung einschließen

Verwenden Sie In Bedingung einschließen für einen Ausdruck im Code, der nur unter einer bestimmten Bedingung kompiliert werden soll.

Wählen Sie einen Ausdruck im Code aus, klicken Sie mit der rechten Maustaste darauf und wählen Sie Refactoring > In Bedingung einschließen aus.

In Pfeilfunktion konvertieren

Eine Pfeilfunktion ist ein Ausdruck, der über keine eigenen Funktionsausdrücke wie this, arguments, super oder new.target verfügt. Diese Funktionsausdrücke sind Ausdrücke, die keine Methoden darstellen, und sie können nicht als Konstruktor verwendet werden.

Platzieren Sie den Cursor in einer Funktion, klicken Sie mit der rechten Maustaste und wählen Sie Refactoring > In Pfeilfunktion konvertieren aus.

Hinweis:

Verfügt die ausgewählte Anweisung über einen Parameter, wird die Parameterstruktur param => {anweisungen} verwendet.
Weist die ausgewählte Anweisung keine oder mehrere Parameter wie „param (param1, param2)“ auf, wird die Parameterstruktur param (param1, param2) => {anweisungen} verwendet.

Getter/Setter erstellen

In JavaScript kann mit einem Setter eine Funktion ausgeführt werden, mit der eine angegebene Eigenschaft geändert wird. Setter werden meist zusammen mit Gettern verwendet, um eine Art Pseudoeigenschaft zu erstellen. Sie können keinen Setter für eine Eigenschaft erstellen, die einen tatsächlichen Wert aufweist.

Platzieren Sie den Cursor auf einem Element eines Objektausdrucks, klicken Sie mit der rechten Maustaste und wählen Sie Refactoring > Getter/Setter erstellen aus.

Tipps zur Fehlerbehebung

In der folgenden Tabelle finden Sie Tipps zur Fehlerbehebung für entsprechende Fehlermeldungen, die wegen inkorrekter Auswahl von Code angezeigt werden:

Funktionsname	Fehlermeldung	Tipp zur Fehlerbehebung
Umbenennen	Kein Ausdruck an der angegebenen Position	Platzieren Sie den Cursor auf oder vor einem Variablen- oder Funktionsnamen.
In Variable extrahieren	Die Auswahl bildet keinen Ausdruck.	Wählen Sie vor dem Refactoring des Codes einen Ausdruck im Code aus.
In Funktion extrahieren	Der ausgewählte Block muss eine Reihe von Anweisungen oder einen Ausdruck darstellen.	Stellen Sie sicher, dass Sie einen Block mit einer Reihe von Anweisungen oder einem Ausdruck auswählen.
In Try-Catch einschließen	Wählen Sie gültigen Code zum Einschließen in einen Try-Catch-Block aus.	Vergewissern Sie sich, dass Sie vor dem Anwenden der Refactoring-Option „In Try-Catch einschließen“ Code ausgewählt haben.
In Bedingung einschließen	Wählen Sie gültigen Code zum Einschließen in einen Bedingungsblock aus.	Vergewissern Sie sich, dass Sie vor dem Anwenden der Refactoring-Option In Bedingung einschließen einen Ausdruck ausgewählt haben.
In Pfeilfunktion konvertieren	Setzen Sie den Cursor in einen Funktionsausdruck.	Vergewissern Sie sich, dass Sie vor dem Anwenden der Refactoring-Funktion den Cursor in einem Funktionsausdruck platziert haben.
Getter/Setter erstellen	Setzen Sie den Cursor auf das Element eines Objektausdrucks.	Vergewissern Sie sich, dass Sie vor dem Anwenden der Refactoring-Option „Getter/Setter erstellen“ den Cursor auf ein Element eines Objektausdrucks gesetzt haben.

Text suchen und ersetzen

Mithilfe der Funktionen zum Suchen und Ersetzen in Dreamweaver können Sie nach jeder Art von Text, Code oder Leerraum auf Ihrer Site oder in den Ordnern suchen.

Sie können das gesamte Markup durchsuchen oder die Suche nur auf den gerenderten Text in der Entwurfsansicht oder nur auf den Code beschränken.

Sie können auch leistungsstarke Mustererkennungsalgorithmen (reguläre Ausdrücke) für anspruchsvolle Such- und Ersetzvorgänge verwenden.

Ist der Text gefunden, können Sie ihn wahlweise durch einen bestimmten Text, Code oder Leerraum ersetzen.

Weitere Informationen finden Sie unter Text suchen und ersetzen.

Vorschau für Bilder und Farben in der Codeansicht

Nachdem Sie Code für Bilder oder Farben eingefügt haben, können Sie diese direkt in der Codeansicht in einer Vorschau anzeigen lassen.

Bildvorschau

Bewegen Sie die Maus über eine Bild-URL, um eine Vorschau des Bilds in der Codeansicht anzuzeigen. Die Vorschau ist bei Bildern möglich, auf die wie folgt verwiesen wird:

url();
data-uri()
src-Attributwert des img-Tags

In Dreamweaver können auch Bilder auf Remote-Hosts in der Vorschau angezeigt werden,

Wenn eine Vorschau für Remote-Pfade in Dreamweaver nicht möglich ist, wird die Meldung „Bild kann nicht geladen werden“ angezeigt.

Sie können die folgenden Bildtypen in einer Vorschau anzeigen:

JPEG
JPG
PNG
GIF
SVG

Farbvorschau

Bewegen Sie die Maus über Farbwerte, um Farben in der Codeansicht in einer Vorschau anzuzeigen. Unterstützte Dateiformate:

hexadezimale Farbwerte mit drei und sechs Ziffern: #ff0000;
RGB: rgb(0, 0, 0);
RGBA: rgba(0, 255, 228, 0.5);
HSL: hsl(120, 100%, 50%);
HSLA: hsla(120, 60%, 70%, 0.3);
vordefinierte Farbnamen wie „olive“, „teal“ oder „red“

Die Farbvorschau ist jetzt in allen Dokumenttypen für die oben genannten Farbformate verfügbar.

Klicken Sie mit der rechten Maustaste auf einen Wert und wählen Sie Schnellbearbeitung, um den Farbwähler zu öffnen und eine andere Farbe auszuwählen.

Hinweis:

Um die Vorschau für Bilder und Farben zu deaktivieren, deaktivieren Sie die Option Ansicht > Codeansichtsoptionen > Elementvorschau.

Code drucken

Sie können den Code drucken, um ihn offline zu bearbeiten, zu archivieren oder Dritten zur Verfügung zu stellen.

Öffnen Sie eine Seite in der Codeansicht.
Wählen Sie „Datei“ > „Code drucken“.
Geben Sie die Druckoptionen an und klicken Sie dann auf „OK“ (Windows) bzw. „Drucken“ (Mac).

Adobe

Schneller und einfacher Hilfe erhalten

Neuer Benutzer?