Setzen Sie die Einfügemarke in den Code.
Zuletzt aktualisiert am
27. April 2021
Hier erfahren Sie, wie Sie mit der Codeansicht arbeiten und die Programmierfunktionen von Dreamweaver optimal nutzen.
Es gibt mehrere Möglichkeiten, wie du mit Code in Dreamweaver arbeiten kannst.
Du kannst eine neue Code-Datei mit dem Dialogfeld Neues Dokument öffnen und deinen Code eingeben.
Während der Eingabe werden Codehinweise eingeblendet, die Ihnen bei der Codeauswahl helfen und mit denen Sie Tippfehler verhindern können. Erhalte Hilfe zu CSS, wenn du sie benötigst, mit Dreamweavers hilfreichen Quick Docs.
Du kannst auch Code mit dem Einfügen-Bedienfeld einfügen oder Coding-Tastaturkürzel wie Emmet-Abkürzungen verwenden.
Wenn du dabei ertappst, dass du dasselbe Code-Stück mehrfach kopierst und einfügst, dann probiere diese zeitsparenden Features:
- Das Snippets-Bedienfeld ist unschätzbar, um schnell vorformatierte Code-Snippets zu erstellen und in deinen Code einzufügen.
- Mehrere Cursor ermöglichen es dir, mehrere Code-Zeilen gleichzeitig zu erstellen und zu bearbeiten.
Dreamweaver bietet auch eine starke Sammlung von Bearbeitungs-Tools, die das Navigieren durch und das Ändern deines Codes zu einem reibungslosen Prozess machen.
- Verwende die Suchen und Ersetzen-Funktion von Dreamweaver, um nach Tags, Attributen 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. Noch besser: Verwende die Quick Edit-Funktion, um Code in zugehörigen Dateien zu bearbeiten, ohne die Datei in einem neuen Tab zu öffnen.
- Klicke mit der rechten Maustaste auf den Code, um ein einfaches, relevantes Kontextmenü aufzurufen, mit dem du den Code direkt bearbeiten kannst.
- Verwende Wrap Tag, um Text mit Tags zu umschließen.
Lies jetzt weiter, um mehr Informationen zu all diesen Codefunktionen zu erhalten.
Code über das Bedienfeld „Einfügen“ einfügen
Wählen Sie im Bedienfeld „Einfügen“ die entsprechende Kategorie aus.
Klicke auf eine Schaltfläche im Einfügen-Bedienfeld oder wähle ein Element
aus einem Popup-Menü im Einfügen-Bedienfeld aus.
Wenn du auf ein Symbol klickst, erscheint der Code sofort auf deiner Seite oder es erscheint ein Dialogfeld, das nach weiteren Informationen fragt, um den Code zu vervollständigen.
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 werden in CSS-, LESS-, SASS-, SCSS-Seiten oder innerhalb des Style-Tags auf einer HTML-Seite erweitert.
Im Folgenden finden Sie einige Beispiele, die veranschaulichen, wie Sie Emmet-Abkürzungen in der Codeansicht verwenden können. Weitere Informationen und Referenzen findest du in der Emmet-Dokumentation.
Anmerkung
Dreamweaver unterstützt derzeit Emmet 1.2.2-Abkürzungen.
Beispiel 1: HTML-Code mit Emmet einfügen
Um schnell HTML-Code für eine ungeordnete Liste mit drei Elementen hinzuzufügen, öffne die HTML-Datei und gib die folgende Emmet-Abkürzung in der Code-Ansicht innerhalb von <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 wähle die gesamte Abkürzung aus und drücke dann die Eingabetaste.
Die Abkürzung wird zu folgendem Code erweitert:
<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: CSS-Code mit Emmet einfügen
Um CSS-Code zum Erstellen von Rahmenradius mit Vendor-Präfixen einzufügen, öffne deine CSS-Datei und gib die folgende Emmet-Abkürzung innerhalb einer Klasse ein:
-bdrs
Wenn du Tab drückst, erweitert sich die Abkürzung zu folgendem Code:
-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 in einem Browser nicht sichtbar.
Kommentare zum Code hinzufügen
Um Kommentare hinzuzufügen, geben Sie zunächst den Kommentartext ein. Du kannst dann deinen Cursor an der Einfügestelle platzieren und das Einfügen-Symbol aus der Symbolleiste anklicken, 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 einen Kommentarblock eingefasst.
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. Du musst nur deinen Kommentartext eingeben.
Du kannst auch den Tastaturbefehl Strg+/ (unter Windows) oder Cmd+/ (auf dem Mac) verwenden, um Kommentare hinzuzufügen.
Wenn Sie den Tastaturbefehl verwenden, ohne Text auszuwählen, wird der Kommentar auf die aktuelle Zeile angewendet. Wenn du Text auswählst und den Tastaturbefehl verwendest, wird der 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“.Du kannst auch die Tastenbefehle Strg+/ (unter Windows) oder Cmd+/ (unter Mac) verwenden, um Kommentare zu entfernen.
Codekommentare ein-/ausblenden
Um zwischen dem Anzeigen und Ausblenden von Kommentaren in der Codeansicht zu wechseln, drücke einfach Strg+/ unter Windows oder Cmd+/ auf dem Mac für den ausgewählten Kommentar oder die ausgewählte Zeile.
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.
Anmerkung
Kopieren und Einfügen sowie Suchen und Ersetzen funktionieren nicht mit mehreren Cursorn oder mehreren Auswahlen.
Mehrere Cursors oder Mehrfachauswahl hinzufügen
Du kannst mehrere Cursor auf verschiedene Weise hinzufügen, je nach deinen Anforderungen.
Wenn du denselben Text an mehreren Stellen hinzufügen möchtest, ohne vorhandenen Text zu ersetzen, füge mehrere Cursor hinzu.
Wenn Sie den vorhandenen Text ersetzen möchten, können Sie die Mehrfachauswahl verwenden. Du kannst fortlaufende Textzeilen oder nicht fortlaufende Textzeilen oder beides auswählen und Cursor hinzufügen.
So fügst du mehrere Cursor oder mehrere Auswahlen in derselben Spalte über fortlaufende Zeilen hinzu:
Halten Sie die Alt-Taste gedrückt und ziehen Sie dann bei gedrückter Maustaste vertikal. Wenn du vertikal ziehst, werden Cursor zu jeder Zeile hinzugefügt, über die du ziehst.
Wenn Sie zusammenhängende Textzeilen auswählen möchten, drücken Sie die Alt-Taste und ziehen Sie die Maus diagonal. Wenn du diagonal ziehst, wählt Dreamweaver einen rechteckigen Textblock innerhalb dieser Auswahl aus.
Anmerkung
Um schnell Cursor hinzuzufügen oder mehrere Zeilen in eine Auswahl einzubeziehen, verwende die Tastenkombination Umschalt+Alt+Nach-oben oder Nach-unten.
Sobald du die Cursor (oder den ausgewählten Text) an mehreren Stellen hinzugefügt hast, fange an zu tippen.
Wenn du mehrere Cursor hast, wird neuer Text hinzugefügt.
Wenn du Inhalte in mehreren Textzeilen ausgewählt hast, wird der ausgewählte Text durch den neuen Text ersetzt, den du eingibst.
So fügst du mehrere Cursor in verschiedenen Spalten über Zeilen hinzu:
Um Cursor zu nicht fortlaufenden Textzeilen hinzuzufügen, halte einfach die Strg-Taste gedrückt und klicke auf die verschiedenen Zeilen, wo du den Cursor platzieren möchtest.
Um nicht fortlaufende Textzeilen auszuwählen, wähle Text aus, halte dann die Strg-Taste (Windows) oder Cmd-Taste (Mac) gedrückt und führe weitere Auswahlen durch.
So fügst du Cursor am Anfang oder Ende jeder Zeile hinzu:
Wähle mehrere Textzeilen aus und drücke die Pfeiltasten Links oder Rechts.
So fügst du Cursor in vorhergehenden oder folgenden Zeilen für eine Auswahl hinzu:
Drücke Umschalt+Alt+Pfeiltasten nach oben/nach unten und dann die rechte Pfeiltaste.
So wählst du fortlaufende und nicht fortlaufende Textzeilen aus:
Du kannst diese Techniken kombinieren, um sowohl fortlaufende als auch separate Textzeilen in einer Auswahl auszuwählen.
Wähle zuerst die nicht fortlaufenden Textzeilen aus, drücke dann Strg+Alt (unter Windows) oder Cmd+Alt (unter Mac) und ziehe, um eine Reihe von Zeilen zu den bestehenden mehreren Auswahlen hinzuzufügen.
Über die Schnelldokumentation in Dreamweaver Hilfe zu CSS anzeigen
Beim Arbeiten mit CSS-, LESS- oder SCSS-Dateien in Dreamweaver kannst du schnell weitere Informationen über CSS-Eigenschaften oder Werte erhalten.
Platziere deinen Cursor innerhalb einer Eigenschaft oder eines Werts und drücke Strg + K. Dreamweaver öffnet die Dokumentation vom Web Platform Docs Projekt.
Sie können gleichzeitig mehrere Inline-Editoren und Dokument-Viewer öffnen.
Um einen einzelnen Inline-Editor oder Dokument-Viewer zu schließen, klicke auf das „X" links oben oder drücke die Escape-Taste, während Quick Docs im Fokus ist.
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 (Analyse von Code auf potenzielle Fehler) 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 angezeigt, um zu signalisieren, dass sie Fehler enthält. Wenn du mit der Maus darüberfährst, wird eine kurze Beschreibung des Fehlers angezeigt.
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 Design- oder Live-Ansicht kannst du diese Funktion verwenden, um Objekte mit einem Tag zu versehen.
Wähle Text in der Code-Ansicht oder ein Objekt in der Design-Ansicht aus und drücke Strg+T auf deiner Tastatur.
Ein Popup erscheint, in dem du aus einer Anzahl von HTML-Tags auswählen kannst.
Wähle einen Tag aus dem Menü aus.
Wenn Sie in der Codeansicht arbeiten, wird der ausgewählte Text in dieses Tag eingeschlossen. Wenn du in der Design- oder Live-Ansicht arbeitest, wird das ausgewählte Objekt mit dem Tag umhüllt.
Code mit dem Coding-Kontextmenü bearbeiten
Verwende Dreamweavers Kontextmenü, um schnelle Bearbeitungen an deinem Code vorzunehmen.
Um das Kontextmenü zu öffnen, klicken Sie mit der rechten Maustaste (Windows) bzw. klicken bei gedrückter Befehlstaste (Mac). Die folgenden Optionen stehen dir 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 findest du unter Schnellbearbeitung.
„Ausschneiden“, „Kopieren“, „Einfügen“
Klicke auf diese Optionen, um Text schnell auszuschneiden, zu kopieren und einzufügen, ohne auf das Menü Bearbeiten zugreifen zu müssen.
„Suchen und ersetzen“, „Weitersuchen“, „Weitersuchen (rückwärts)“
Klicke auf diese Optionen, um Text schnell zu finden und zu ersetzen, ohne das Menü „Suchen" aufrufen zu müssen.
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 im Abschnitt Mit Codefragmenten arbeiten.
Zugehörige Datei öffnen
Führe einen Rechtsklick auf einen Link/Skript-Tag aus und klicke auf „Zugehörige Datei öffnen", um die Datei zu öffnen.
Stylesheet anfügen
Füge ein vorhandenes CSS-Stylesheet zu deiner Seite hinzu.
Auswahl
Das Menü Auswahl enthält verschiedene Code-Bearbeitungsoptionen, die du für ausgewählte Codeteile verwenden kannst, wie das Ein- und Ausschalten von Zeilen- und Blockkommentaren, Erweitern und Reduzieren der Auswahl, Konvertieren von Inline-CSS zu 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
Das Menü Codehinweis-Tools bringt den Farbwähler, URL-Browser und die Schriftliste direkt an deine Fingerspitzen.
Codeblöcke einrücken
Während du Code in der Code-Ansicht oder im Code-Inspektor schreibst und bearbeitest, kannst du den Einzug eines ausgewählten Codeblocks oder einer Codezeile ändern und ihn um einen Tabulator nach rechts oder links verschieben.
Ausgewählte Codeblöcke einrücken
- Drücke Tab, oder
- Drücke Strg+], oder
- Wählen Sie „Bearbeiten“ > „Code einrücken“.
Einzug des ausgewählten Codeblocks verringern
- Drücke Umschalt+Tab, oder
- Drücke 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 Dreamweaver-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 in Dreamweaver angezeigt.
Du kannst auf den Code-Navigator in den Ansichten Design, Code und Teilen zugreifen sowie über den Code-Inspektor.
Eine Videoübersicht vom Dreamweaver-Entwicklerteam zur Arbeit mit dem Code-Navigator findest du unter www.adobe.com/go/dw10codenav.
Ein Video-Tutorial zur Arbeit mit der Live-Ansicht, verwandten Dateien und dem Code-Navigator findest du unter www.adobe.com/go/lrvid4044_dw.
Code-Navigator öffnen
Alt+Klick (Windows) oder Befehl+Wahl+Klick (Macintosh) irgendwo auf der Seite. Der Code-Navigator zeigt Verknüpfungen zu dem Code an, der den angeklickten Bereich beeinflusst.
Klicken Sie auf eine Stelle außerhalb des Code-Navigators, um diesen zu schließen.
Anmerkung
Du kannst den Code-Navigator auch öffnen, indem du auf die Code-Navigator-Anzeige 
klickst. Diese
Anzeige erscheint in der Nähe der Einfügemarke auf deiner Seite, wenn die Maus
2 Sekunden lang inaktiv war.
Navigiere zum Code mit dem Code-Navigator
Öffne den Code-Navigator über den Seitenbereich, der dich interessiert.
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“.
Anmerkung
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, wenn du zwischen vielen Regeln unterscheiden möchtest, die denselben Namen haben.
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 die Code Navigator-Anzeige wieder zu aktivieren, Alt+Klicke (Windows) oder Befehl+Wahl+Klicke (Macintosh), um den Code Navigator zu öffnen und deaktiviere die Option Anzeige deaktivieren.
Zu JavaScript- oder VBScript-Funktion wechseln
In der Codeansicht und dem Code-Inspektor kannst du eine Liste aller JavaScript- oder VBScript-Funktionen in deinem Code anzeigen und zu einer beliebigen Funktion springen.
Zeige das Dokument in der Codeansicht an (Ansicht >
Code) oder im Code-Inspektor (Fenster > Code-Inspektor).
Führen Sie einen der folgenden Schritte aus:
Klicken Sie in der Codeansicht mit der rechten Maustaste (Windows) bzw. bei gedrückter Ctrl-Taste (Macintosh) an einer beliebigen Stelle und wählen Sie das Untermenü „Funktionen“ im Kontextmenü aus.
Anmerkung
Das Untermenü „Funktionen“ wird in der Entwurfsansicht nicht angezeigt.
Wenn der Code JavaScript- oder VBScript-Funktionen enthält, werden diese im Untermenü aufgeführt.
Anmerkung
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 (Macintosh) in der Codeansicht und wählen Sie das Untermenü „Funktionen“.
- Klicke im Code-Inspektor auf den Code-Navigation-Button ({ }) in der Symbolleiste.
Wähle einen Funktionsnamen aus, um in deinem Code zu der 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.
Beachte die folgenden Einschränkungen des JavaScript Extractor, bevor du ihn verwendest:
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 Dreamweaver-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.
Eine Videoübersicht vom Dreamweaver-Entwicklungsteam zur JavaScript-Unterstützung in Dreamweaver findest du unter www.adobe.com/go/dw10javascript.
Verwenden des JavaScript Extractor:
Öffne eine Seite, die JavaScript enthält.
Klicke auf Tools > Externalize JavaScript.
Bearbeite im Dialogfeld JavaScript externalisieren bei Bedarf die Standardauswahl.
Wähle nur JavaScript externalisieren aus, wenn du möchtest, dass Dreamweaver JavaScript in eine externe Datei verschiebt und auf diese Datei im aktuellen Dokument verweist. Diese Option belässt Event-Handler wie onclick und onload im Dokument und lässt Verhalten im Verhalten-Bedienfeld sichtbar.
Wähle JavaScript externalisieren und unaufdringlich anhängen aus, wenn du möchtest, dass Dreamweaver 1) JavaScript in eine externe Datei verschiebt und darauf im aktuellen Dokument verweist und 2) Event-Handler aus dem HTML entfernt und sie zur Laufzeit mit JavaScript einfügt. Wenn du diese Option auswählst, kannst du Verhalten nicht mehr im Verhalten-Bedienfeld bearbeiten.
Deaktiviere in der Spalte Bearbeiten alle Änderungen, die du nicht vornehmen möchtest, oder wähle Änderungen aus, die Dreamweaver standardmäßig nicht ausgewählt hat.
Standardmäßig listet Dreamweaver die folgenden Änderungen auf, wählt sie aber nicht aus:
Skriptblöcke im Kopf des Dokuments, die document.write()- oder document.writeln()-Aufrufe enthalten.
Skriptblöcke im Kopf des Dokuments, die Funktionssignaturen im Zusammenhang mit EOLAS-Behandlungscode enthalten, von dem bekannt ist, dass er document.write() verwendet.
Skriptblöcke im Textkörper des Dokuments, außer die Blöcke enthalten nur Spry-Widget- oder Spry-Datensatz-Konstruktoren.
Dreamweaver weist Elementen, die noch keine IDs haben, automatisch IDs zu. Wenn dir diese IDs nicht gefallen, kannst du sie ändern, indem du die ID-Textfelder bearbeitest.
Klicken Sie auf „OK“.
Der Zusammenfassungsdialog bietet eine Zusammenfassung der Extraktionen. Überprüfen Sie die Extrahierungen 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
Anstatt deine Coding-Umgebung mit vielen Bedienfeldern und Symbolen zu überladen, platziert der Schnellbearbeitung-Modus in Dreamweaver kontextspezifischen Code und Tools inline und ermöglicht es dir, schnell zu dem benötigten Codeabschnitt zu gelangen.
Du kannst den Schnellbearbeitung-Modus aufrufen, indem du:
- Mit der rechten Maustaste auf einen Code-Ausschnitt klickst und Schnellbearbeitung aus dem erscheinenden Kontextmenü auswählst
- Drücke Strg + E (unter Windows) oder Cmd+E (auf 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. Du kannst diese Regeln direkt inline bearbeiten, ohne jemals den Kontext der HTML-Datei zu verlassen.
Wenn mehrere Regeln übereinstimmen, navigiere zwischen ihnen mit der Liste auf der rechten Seite (oder verwende Alt-Hoch/Runter).
Um eine CSS-Regel direkt aus dem Inline-Editor zu erstellen, klicke auf Neue Regel oder drücke Strg-Alt-N (unter Windows) oder Cmd-Opt-N (auf Mac).
Schnellbearbeitungsmodus mit JavaScript-Dateien verwenden
Platzieren Sie den Cursor in einer JavaScript-Datei auf einem Funktionsnamen. Schnellbearbeitung zeigt dir den Funktionskörper (auch wenn er in anderen Dateien vorhanden ist, auf die durch eine require()-Anweisung verwiesen wird).
Verwendung des Schnellbearbeitung-Modus mit CSS-, SCSS- oder LESS-Dateien
Wenn du Schnellbearbeitung mit dem Cursor innerhalb eines Farbwerts aufrufst, kannst du auf den Farbwähler zugreifen und die in deinem CSS-Code verwendeten Farben schnell ändern.
Platziere in einer CSS-, LESS- oder SCSS-Datei den Cursor auf eine cubic-bezier()- oder steps()-Übergangszeitfunktion und Schnellbearbeitung zeigt einen grafischen Übergangskurven-Editor an.
Auch die vordefinierten Zeitfunktionen „ease“, „ease-in“, „ease-out“, „ease-in-out“, „step-start“ und „step-end“ sind zulässige Ausgangspunkte.
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.
Mit JavaScript-Refactoring kannst du Funktionen umbenennen und den Umfang einer Variable festlegen, sodass du sie innerhalb eines Codeblocks aufrufen kannst, in dem sie definiert ist.
Anmerkung
Code-Refactoring ist jetzt nur in .js-Dateien verfügbar.
JavaScript-Refactoring
Refactoring ist bei Code in HTML-, PHP- und JavaScript-Dokumenten möglich. Wenn du mit der rechten Maustaste auf den Codebereich in Dreamweaver klickst, erscheint die Option Refactor im Dropdown-Menü. Refactor besteht aus den folgenden Optionen:
- Umbenennen
- In Variable extrahieren
- In Funktion extrahieren
- In Try-Catch einschließen
- In Bedingung einschließen
- In Pfeilfunktion konvertieren
- Getter/Setter erstellen
Um die Funktionalität jeder Refactoring-Option zu verstehen, lies die folgenden Abschnitte:
Umbenennen
Mit der Option „Umbenennen“ werden sämtliche Vorkommen eines Variablennamens oder Funktionsnamens in JavaScript-Code geändert. Die Auswahl einer Variable durch Klicken und Ziehen ist für das Refactoring nicht erforderlich.
Führe die folgenden Schritte aus, um in JavaScript umzubenennen:
Markiere oder platziere den Textcursor im Code, der geändert werden muss.
Klicke mit der rechten Maustaste auf den ausgewählten Text und wähle dann Refactor > Rename. Du kannst auch die Tastenkombination Ctrl + Alt + R unter Windows oder Command + Option + R unter macOS verwenden, um umzubenennen.
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. Retype einen eindeutigen Variablen- oder Funktionsnamen, um den aktuellen Namen zu ersetzen.
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. Du kannst auch Ctrl + Alt + V unter Windows OS und Cmd + Alt + V unter 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 innerhalb des Funktionskörpers initialisiert oder über Funktionsaufrufe übergeben werden.
Führe die folgenden Schritte aus, um mit Extract to Function zu refactorieren:
Wähle einen beliebigen Ausdruck oder eine Gruppe von Ausdrücken in JavaScript aus.
Klicke mit der rechten Maustaste und wähle Refactor > Extract to Function. Du kannst auch Ctrl + Alt + M unter Windows OS oder Cmd + Alt + M unter Mac OS verwenden.
Wähle den Zielumfang aus, um die Funktion aus dem Popup-Menü zu extrahieren, das auf dem Bildschirm angezeigt wird.
Die Ausgabe hängt vom ausgewählten Zielbereich aus. Beispielsweise kann der Zielumfang ein Konstruktor, die ausgewählte Klasse oder eine globale Funktion sein.
Die Eigenschaften von Extract to function sind:
- Es identifiziert die zu übergebenden Parameter basierend auf Identifizierungen, die in der Auswahl oder im extrahierten Umfang verfügbar sind.
- Es identifiziert die Rückgabeparameter, die von der Funktion zurückgegeben werden sollen, basierend auf Identifizierungen, deren Werte in der Auswahl geändert werden.
- Es erstellt auch eine Funktion mit einem eindeutigen Namen.
Die folgenden Screenshots zeigen die Ausgabe basierend auf dem jeweiligen ausgewählten Zielumfang.
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. Dieser Codeblock wird als Ausnahme markiert, während das Programm ausgeführt wird.
Wähle aus oder platziere den Cursor im Code, klicke mit der rechten Maustaste und wähle Refactor > Wrap in Try Catch. Wenn du den Cursor an einer Position platzierst, findet es die umgebenden Anweisungen, andernfalls überprüft es, ob der Code aus Anweisungen besteht oder nicht. Wenn es Anweisungen gibt, dann umschließt es den Code in einem Try-Catch-Block.
In Bedingung einschließen
Verwende In Bedingung einbetten, um einen Ausdruck in einem Code nur für eine bestimmte Bedingung zu kompilieren.
Wähle einen Ausdruck im Code aus, klicke mit der rechten Maustaste und wähle Refaktorieren > In Bedingung einbetten.
In Pfeilfunktion konvertieren
Eine Pfeilfunktion ist ein Ausdruck, der keine eigenen Funktionsausdrücke wie this, arguments, super oder new.target hat. Diese Funktionsausdrücke sind für Ausdrücke bestimmt, die keine Methoden sind, und können nicht als Konstruktor verwendet werden.
Platziere den Cursor in einer Funktion, klicke mit der rechten Maustaste und wähle Refaktorieren > In Pfeilfunktion konvertieren.
Anmerkung
- Wenn die ausgewählte Anweisung einen Parameter hat, dann erscheint die Parameterstruktur als param => {statements}.
- Wenn die ausgewählte Anweisung null oder mehr als einen Parameter hat, wie param (param1, param2), dann erscheint die Parameterstruktur als param (param1, param2) => {statements}.
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. Du kannst keinen Setter für eine Eigenschaft anlegen, die einen tatsächlichen Wert hat.
Platziere den Cursor bei einem Mitglied eines Objektausdrucks, klicke mit der rechten Maustaste und wähle Refaktorieren > Getter/Setter anlegen.
Tipps zur Fehlerbehebung
Die folgende Tabelle bietet Lösungstipps für entsprechende Fehlermeldungen, die auf dem Bildschirm angezeigt werden, aufgrund einer falschen Auswahl von Code:
|
Funktionsname |
Fehlermeldung |
Tipp zur Problembehebung |
|---|---|---|
|
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
Du kannst die Such- und Ersetzungsfunktionen von Dreamweaver verwenden, um nach jeder Art von Text, Code oder Leerzeichen in deiner Site oder deinem Ordner zu 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 Ersetzungsvorgänge verwenden.
Ist der Text gefunden, können Sie ihn wahlweise durch einen bestimmten Text, Code oder Leerraum ersetzen.
Weitere Informationen finden Sie unter Suchen und Ersetzen von Text.
Vorschau von Bildern und Farben in der Code-Ansicht
Nach dem Einfügen des relevanten Codes für Bilder und Farben kannst du sie direkt in der Code-Ansicht als Vorschau anzeigen.
Bildvorschau
Bewegen Sie die Maus über eine Bild-URL, um eine Vorschau des Bilds in der Codeansicht anzuzeigen. Du kannst Bilder als Vorschau anzeigen, die als eines der folgenden referenziert werden:
- url();
- data-uri()
- Src-Attributwert des img-Tags
In Dreamweaver können auch Bilder auf Remote-Hosts in der Vorschau angezeigt werden,
Falls Dreamweaver die Vorschau für Remote-Pfade nicht anzeigen kann, wird die Meldung „Bild kann nicht geladen werden" angezeigt.
Du kannst die folgenden Bildtypen in der 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 Formate sind:
- 3- und 6-stellige hexadezimale Farbwerte: #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, red.
Die Farbvorschau ist in allen Dokumenttypen für die oben genannten Farbformate verfügbar.
Klicke mit der rechten Maustaste auf einen Wert und wähle Schnellbearbeitung aus, um den Farbwähler zu öffnen und eine andere Farbe auszuwählen.
Anmerkung
Um Vorschauen für Bilder und Farben zu deaktivieren, deaktiviere die Option Ansicht > Code-Ansicht-Optionen > Asset-Vorschau.
Code drucken
Du kannst deinen Code drucken, um ihn offline zu bearbeiten, zu archivieren oder zu verteilen.
Öffnen Sie eine Seite in der Codeansicht.
Wählen Sie „Datei“ > „Code drucken“.
Gib die Druckoptionen an und klicke dann auf OK (Windows)
oder Drucken (Macintosh).
Erstellen ansprechender Websites in Dreamweaver
Entwirf, code und verwalte dynamische Websites mit einem leistungsstarken All-in-one-Tool.
