Programmierumgebung in Dreamweaver

  1. Dreamweaver-Benutzerhandbuch
  2. Einführung
    1. Grundlagen von responsivem Webdesign
    2. Neue Funktionen in Dreamweaver
    3. Web-Entwicklung mit Dreamweaver – Überblick
    4. Dreamweaver/Häufige Fragen
    5. Tastaturbefehle
    6. Dreamweaver – Systemanforderungen
    7. Übersicht über die Funktionen
  3. Dreamweaver und Creative Cloud
    1. Dreamweaver-Einstellungen mit Creative Cloud synchronisieren
    2. Creative Cloud-Bibliotheken in Dreamweaver
    3. Photoshop-Dateien in Dreamweaver verwenden
    4. Mit Adobe Animate und Dreamweaver arbeiten
    5. Web-optimierte SVG-Dateien aus Bibliotheken extrahieren
  4. Arbeitsbereiche und Ansichten in Dreamweaver
    1. Der Dreamweaver-Arbeitsbereich
    2. Dreamweaver-Arbeitsbereich für die visuelle Entwicklung optimieren
    3. Dateien anhand von Dateinamen oder Inhalten suchen | Mac OS
  5. Sites einrichten
    1. Dreamweaver-Sites
    2. Lokale Version Ihrer Site einrichten
    3. Verbindung mit einem Publishing Server herstellen
    4. Testserver einrichten
    5. Site-Einstellungen importieren und exportieren
    6. Vorhandene Websites von einem Remote-Server in Ihren lokalen Site-Stammordner kopieren
    7. Barrierefreie Funktionen in Dreamweaver
    8. Erweiterte Einstellungen
    9. Site-Voreinstellungen für die Übertragung von Dateien festlegen
    10. Proxyserver-Einstellungen in Dreamweaver festlegen
    11. Dreamweaver-Einstellungen mit Creative Cloud synchronisieren
    12. Git in Dreamweaver verwenden
  6. Dateien verwalten
    1. Dateien öffnen und erstellen
    2. Dateien und Ordner verwalten
    3. Dateien vom Server abrufen/auf dem Server bereitstellen
    4. Dateien einchecken und auschecken
    5. Dateien synchronisieren
    6. Dateien auf Unterschiede vergleichen
    7. Dateien und Ordner in Ihrer Dreamweaver-Site von Operationen ausschließen (Cloaking)
    8. Design Notes für Dreamweaver-Sites aktivieren
    9. Potenzielle Gatekeeper-Angriffe verhindern
  7. Layout und Entwurf
    1. Visuelle Hilfsmittel für das Layout verwenden
    2. CSS für das Seitenlayout verwenden
    3. Responsive-Websites mit Bootstrap entwerfen
    4. Medienabfragen in Dreamweaver erstellen und verwenden
    5. Inhalte in Tabellen darstellen
    6. Farben
    7. Responsive Design mithilfe von fließenden Rasterlayouts
    8. Extract in Dreamweaver
  8. CSS
    1. Grundlegendes zu Cascading Stylesheets
    2. Gestalten von Seitenlayouts mit CSS Designer
    3. CSS-Präprozessoren in Dreamweaver verwenden
    4. Voreinstellungen für CSS-Stile in Dreamweaver festlegen
    5. CSS-Regeln in Dreamweaver verschieben
    6. Inline-CSS in Dreamweaver in eine CSS-Regel umwandeln
    7. Mit div-Tags arbeiten
    8. Verläufe auf den Hintergrund anwenden
    9. CSS3-Übergangseffekte in Dreamweaver erstellen und bearbeiten
    10. Code formatieren
  9. Seiteninhalt und Elemente
    1. Seiteneigenschaften festlegen
    2. CSS-Eigenschaften von Überschriften und Links festlegen
    3. Mit Text arbeiten
    4. Text, Tags und Attribute suchen und ersetzen
    5. DOM-Bedienfeld
    6. In der Live-Ansicht bearbeiten
    7. In Dreamweaver die Kodierung von Dokumenten festlegen
    8. Elemente im Dokumentfenster auswählen und anzeigen
    9. Texteigenschaften im Eigenschafteninspektor festlegen
    10. Rechtschreibprüfung für Web-Seiten durchführen
    11. Horizontale Linien in Dreamweaver verwenden
    12. Schriftkombinationen in Dreamweaver hinzufügen und ändern
    13. Mit Elementen arbeiten
    14. Datumsangaben in Dreamweaver einfügen und aktualisieren
    15. In Dreamweaver Favoritenelemente erstellen und verwalten
    16. Bilder in Dreamweaver einfügen und bearbeiten
    17. Medienobjekte hinzufügen
    18. Videos in Dreamweaver einfügen
    19. HTML5-Videos einfügen
    20. SWF-Dateien einfügen
    21. Audioeffekte hinzufügen
    22. In Dreamweaver HTML5-Audiodateien einfügen
    23. Mit Bibliothekselementen arbeiten
    24. Arabischen und hebräischen Text in Dreamweaver verwenden
  10. Hyperlinks und Navigation
    1. Allgemeines zu Hyperlinks und Navigation
    2. Hyperlinks erstellen
    3. Imagemaps
    4. Fehler in Hyperlinks beheben
  11. jQuery-Widgets und -Effekte
    1. jQuery UI- und Mobile-Widgets in Dreamweaver verwenden
    2. jQuery-Effekte in Dreamweaver verwenden
  12. Websites programmieren
    1. In Dreamweaver programmieren
    2. Programmierumgebung in Dreamweaver
    3. Voreinstellungen für Code festlegen
    4. Codehervorhebung anpassen
    5. Code schreiben und bearbeiten
    6. Codehinweise und Codevervollständigung
    7. Code aus- und einblenden
    8. Code mit Codefragmenten wiederverwenden
    9. Code-Linting
    10. Code optimieren
    11. Code in der Entwurfsansicht bearbeiten
    12. Mit den Head-Inhalten von Seiten arbeiten
    13. Server-Side Includes in Dreamweaver einfügen
    14. Tag-Bibliotheken in Dreamweaver verwenden
    15. Benutzerdefinierte Tags in Dreamweaver importieren
    16. JavaScript-Verhalten (allgemeine Anweisungen)
    17. Integrierte JavaScript-Verhalten anwenden
    18. XML und XSLT
    19. Server-seitige XSL-Transformationen in Dreamweaver durchführen
    20. Client-seitige XSL-Transformationen in Dreamweaver durchführen
    21. Zeichenentitäten für XSLT in Dreamweaver einfügen
    22. Code formatieren
  13. Produktübergreifende Arbeitsabläufe
    1. Erweiterungen für Dreamweaver installieren und verwenden
    2. In-App-Updates in Dreamweaver
    3. Microsoft Office-Dokumente in Dreamweaver einfügen (nur Windows)
    4. Mit Fireworks und Dreamweaver arbeiten
    5. Mithilfe von Contribute Inhalte in Dreamweaver-Sites bearbeiten
    6. Dreamweaver-Business Catalyst-Integration
    7. Personalisierte E-Mail-Kampagnen erstellen
  14. Vorlagen
    1. Dreamweaver-Vorlagen
    2. Vorlagen und vorlagenbasierte Dokumente erkennen
    3. Dreamweaver-Vorlagen erstellen
    4. Bearbeitbare Bereiche in Vorlagen erstellen
    5. Wiederholende Bereiche und Tabellen in Dreamweaver erstellen
    6. Optionale Bereiche in Vorlagen verwenden
    7. Bearbeitbare Tag-Attribute in Dreamweaver definieren
    8. Verschachtelte Vorlagen in Dreamweaver erstellen
    9. Vorlagen bearbeiten, aktualisieren und löschen
    10. XML-Inhalte in Dreamweaver exportieren und importieren
    11. Vorlage auf ein vorhandenes Dokument anwenden oder aus dem Dokument entfernen
    12. Inhalte in Dreamweaver-Vorlagen bearbeiten
    13. Syntaxregeln für Vorlagen-Tags in Dreamweaver
    14. Markierungseinstellungen für Vorlagenbereiche festlegen
    15. Vorteile von Vorlagen in Dreamweaver
  15. Mobilgeräte und Multiscreen
    1. Medienabfragen erstellen
    2. Seitenausrichtung für Mobilgeräte ändern
    3. Mit Dreamweaver Web-Anwendungen für Mobilgeräte erstellen
  16. Dynamische Websites, Seiten und Web-Formulare
    1. Grundlegendes zu Web-Anwendungen
    2. Computer für die Entwicklung von Anwendungen einrichten
    3. Fehlerbehebung bei Datenbankverbindungen
    4. Verbindungsskripts in Dreamweaver entfernen
    5. Dynamische Seiten entwerfen
    6. Quellen für dynamischen Inhalt – Überblick
    7. Quellen für dynamische Inhalte definieren
    8. Dynamische Inhalte in Seiten einfügen
    9. Dynamischen Inhalt in Dreamweaver ändern
    10. Datenbankdatensätze anzeigen
    11. Live-Daten in Dreamweaver bereitstellen und Fehlerbehebung bei der Anzeige
    12. Benutzerdefinierte Serververhalten in Dreamweaver hinzufügen
    13. Formulare mit Dreamweaver erstellen
    14. Formulare zum Sammeln von Benutzerinformationen verwenden
    15. ColdFusion-Formulare in Dreamweaver erstellen und aktivieren
    16. Web-Formulare erstellen
    17. Verbesserte HTML5-Unterstützung für Formularelemente
    18. Formularentwicklung mit Dreamweaver
  17. Visuelles Entwickeln von Anwendungen
    1. Master- und Detailseiten in Dreamweaver erstellen
    2. Such- und Ergebnisseiten erstellen
    3. Datensatz-Einfügeseiten erstellen
    4. Datensatz-Aktualisierungsseiten in Dreamweaver erstellen
    5. Datensatz-Löschseiten in Dreamweaver erstellen
    6. ASP-Befehle zum Ändern von Datenbanken in Dreamweaver verwenden
    7. Registrierungsseiten erstellen
    8. Anmeldeseiten erstellen
    9. Seiten erstellen, auf die nur autorisierte Benutzer zugreifen können
    10. Ordner in ColdFusion mit Dreamweaver schützen
    11. ColdFusion-Komponenten in Dreamweaver verwenden
  18. Websites testen, in der Vorschau anzeigen und veröffentlichen
    1. Seitenvorschau
    2. Dreamweaver-Web-Seitenvorschau auf mehreren Geräten
    3. Dreamweaver-Site testen

 

Hier erfahren Sie, wie Sie mithilfe der Programmierumgebung in Dreamweaver schneller Code schreiben können.

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.

Hinweis:

Wenn keiner der vorkonfigurierten Arbeitsbereiche Ihren Anforderungen entspricht, können Sie das Arbeitsbereichlayout entsprechend anpassen. Öffnen und verankern Sie Bedienfelder an der gewünschten Position und speichern Sie dann den Arbeitsbereich als benutzerdefinierten Arbeitsbereich. Weitere Informationen finden Sie unter Benutzerdefinierte Arbeitsbereiche erstellen.

Mit Code in Dreamweaver arbeiten

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

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

Wählen Sie „Ansicht“ > „Code“.

Seite im Dokumentfenster gleichzeitig programmieren und bearbeiten - Geteilte Ansicht

  1. Wählen Sie „Ansicht“ > „Code und Entwurf“.

    Der Code erscheint im oberen Bereich und die gestaltete Seite wird im unteren Bereich angezeigt.

  2. Um die Seite im Vordergrund anzuzeigen, wählen Sie in der Dokumentsymbolleiste die Ansichtsoption „Entwurfsansicht oben“ aus.
  3. Um die Größe der Bereiche im Dokumentfenster anzupassen, ziehen Sie die Trennleiste auf die gewünschte Position. Die Trennleiste befindet sich zwischen den beiden Bereichen.

    Die Codeansicht wird automatisch aktualisiert, wenn Sie in der Entwurfsansicht Änderungen vornehmen. Nach Änderungen in der Codeansicht müssen Sie das Dokument in der Entwurfsansicht manuell aktualisieren, indem Sie in den Entwurfsbereich klicken oder F5 drücken.

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.

  1. Wählen Sie „Fenster“ > „Codeinspektor“. Die Symbolleiste umfasst die folgenden Optionen:

    Dateiverwaltung:

    Zum Bereitstellen und Abrufen der Datei.

    Vorschau/Debug im Browser:

    Zur Vorschau bzw. Fehlersuche Ihres Dokuments in einem Browser.

    Entwurfsansicht aktualisieren:

    Aktualisiert das Dokument in der Entwurfsansicht, sodass Änderungen, die Sie im Code vorgenommen haben, widergespiegelt werden. Im Code vorgenommene Änderungen werden nicht automatisch in der Entwurfsansicht angezeigt, sondern erst dann, wenn Sie bestimmte Aktionen durchführen, z. B. die Datei speichern oder auf diese Schaltfläche klicken.

    Liste aller Funktionen:

    Ermöglicht eine schnelle Navigation im Code. Weitere Informationen finden Sie unter Zu JavaScript- oder VBScript-Funktionen navigieren.

    Ansichtsoptionen:

    Hier können Sie festlegen, wie der Code angezeigt wird. Weitere Informationen finden Sie unter Erscheinungsbild des Codes festlegen.

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:

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

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.

Hinweis:

Die Option zum Hervorheben von ungültigem Code in der Codeansicht ist standardmäßig deaktiviert. Um sie zu aktivieren, wechseln Sie in die Codeansicht („Ansicht“ > „Code“) und wählen dann „Ansicht“ > „Codeansichtsoptionen“ > „Ungültigen Code hervorheben“.

Sie können auch Voreinstellungen festlegen, damit verschiedene Arten von ungültigem Code automatisch umgeschrieben werden, wenn Sie ein Dokument öffnen.

Weitere Informationen über Code-Voreinstellungen finden Sie unter Festlegen von Voreinstellungen für Code.

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.

  1. Wählen Sie „Bearbeiten“ > „Voreinstellungen“ (Windows) bzw. „Dreamweaver“ > „Voreinstellungen“ (Mac).
  2. Wählen Sie links die Kategorie „Dateitypen/Editoren“ aus.
  3. Geben Sie im Feld „In Codeansicht öffnen“ die Erweiterungen der Dateitypen ein, die automatisch in der Codeansicht geöffnet werden sollen.

    Geben Sie zwischen den einzelnen Dateinamenerweiterungen ein Leerzeichen ein. Sie können beliebig viele Erweiterungen eintragen.

Adobe-Logo

Bei Ihrem Konto anmelden