Übersicht über die neuen Funktionen

Die letzten Updates für Release 2014 von Dreamweaver CC umfassen die Integration von Extract für die Erstellung von Websites für Mobilgeräte und Desktops aus einer PSD-Komposition direkt in Dreamweaver. Neue Live-Hilfslinien erleichtern Ihnen die präzise Platzierung und Neuanordnung von HTML-Elementen. Mithilfe der verbesserten Bearbeitung in der Live-Ansicht können Änderungen in Echtzeit vorgenommen werden.

In diesem Artikel werden diese neuen Funktionen und einige weitere Verbesserungen vorgestellt. Außerdem finden Sie hier Links zu weiteren Hilfe- und Trainingsressourcen.

Neuer Begrüßungsbildschirm

Sie verwenden Dreamweaver zum ersten Mal? Oder kennen Sie Dreamweaver bereits, möchten Ihre Kenntnisse aber auffrischen? Möchten Sie wissen, was sich in der aktuellen Version gegenüber der Vorversion geändert hat? Direkt auf dem Begrüßungsbildschirm finden Einsteiger ebenso wie Experten und Benutzer, die die neue Dreamweaver-Version testen, alle wichtigen Trainingsressourcen.

Das aktuelle Update für Release 2014 von Dreamweaver CC ermöglicht vom Begrüßungsbildschirm aus den schnellen Zugriff auf Videos (auch zu neuen Funktionen), praktische Übungen, Tipps und Techniken und vieles mehr.

Verbesserungen am Bedienfeld „Extract“

Live-Hilfslinien und das Symbol „Elementschnellansicht“ werden jetzt in der Live-Ansicht angezeigt, wenn Sie Bilder aus dem Bedienfeld „Extract“ ziehen. Mit diesen visuellen Hilfsmitteln können Sie das Bild schnell und präzise am gewünschten Ort platzieren.

Verbesserungen bei der Bearbeitung in der Live-Ansicht

Verschieben von Elementen mit Drag & Drop

Sie haben jetzt die Möglichkeit, Elemente in der Live-Ansicht zu verschieben, indem Sie den zugeordneten Tag-Namen ziehen. Wenn Sie mit dem Mauszeiger auf einen Tag-Namen zeigen, wird der Hand-Cursor angezeigt, um darauf hinzuweisen, dass das Element mit dem Mauszeiger verschoben werden kann. Sie können das Element mithilfe der Live-Hilfslinien ablegen, die die Platzierung des Elements beim Ablegen angeben.

Auswahlrechteck

Sie können jetzt Text, Bilder oder andere Elemente in einem Tag auswählen, indem Sie auf eine beliebige Stelle in einem Tag (Auswahlrechteck) klicken und das Element mit dem Mauszeiger verschieben. Das Auswahlrechteck vereinfacht das Auswählen mehrerer Elemente in einem Tag.

Verbesserungen an der Elementanzeige

In der Elementanzeige wird jetzt der Tipp „Klasse/ID“ als deutlicher Hinweis auf die Möglichkeit, eine Klasse oder ID anzugeben, angezeigt.

Außerdem werden in der Elementanzeige vorgenommene Änderungen gespeichert, wenn Sie auf „+“ klicken. Wie in früheren Dreamweaver-Versionen können Sie auch die Eingabetaste drücken, um Änderungen zu speichern. 

Neue Themen für die Codeansicht

In der Codeansicht sind zehn neue Farbthemen hinzugekommen:

• RecognEyes
• Havenjark
• Solarized Dark
• Solarized Light
• Wombat
• Monaki
• Schuss
• Tango
• Cool Light
• Roboticket

Weitere Informationen über Themen für die Codeansicht finden Sie unter Farbthema für die Codeansicht festlegen.

Verbesserungen beim CSS Designer

Dieses Update umfasst einige Änderungen an der Benutzeroberfläche des CSS-Designers und eine Änderung an der Standardeinstellung für das Kontrollkästchen „Nur verwendete“.

Beim Start ist das Kontrollkästchen „Nur verwendete“ standardmäßig aktiviert und die Änderungen an dieser Option werden über Dreamweaver-Sitzungen hinweg beibehalten. Wenn Sie diese Option zum Beispiel deaktivieren, wird die Einstellung in der nächsten Dreamweaver-Sitzung beibehalten und die Option bleibt deaktiviert.

Die folgenden Änderungen wurden an der Benutzeroberfläche vorgenommen:

• Bildlauf im Bedienfeld „CSS-Designer“ beim Hinzufügen einer Eigenschaft: Wenn Sie im Abschnitt „Eigenschaften“ auf „+“ klicken, wird im Bedienfeld ein Bildlauf ausgeführt, sodass sich die Zeile „Eigenschaft hinzufügen“ fast in der Mitte des Bedienfelds „Eigenschaften“ befindet. Wenn der Abschnitt „Eigenschaften“ zu klein ist, wird im Bedienfeld ein Bildlauf zur Zeile „Eigenschaft hinzufügen“ am Ende des Abschnitts durchgeführt.
• Hintergrundhervorhebung: Wenn das Textfeld „Neue Eigenschaft“ den Fokus besitzt, wird die Zeile durch einen grauen Hintergrund hervorgehoben. 
• Position der Schaltflächen „+“ und „-“: Die Schaltflächen „+“ und „-“, die in jedem Abschnitt des Bedienfelds „CSS-Designer“ („Quelle“, „Selektoren“, „Medienabfrage“ und „Eigenschaften“) angezeigt wird, wurden von ganz rechts nach links verschoben, damit sie besser sichtbar sind.
• Die Kategorie „Benutzerdefiniert“ heißt jetzt „Mehr“.

Remote-Debugging der Live-Ansicht

Sie können mit den Entwicklertools von Google Chrome ein Remote-Debugging von Dreamweaver-Dokumenten durchführen, die in der Live-Ansicht geöffnet sind. Verwenden Sie in Google Chrome Port 5471, den Sie mit den folgenden Schritten aktivieren können:

Weitere Verbesserungen

Änderungen am Arbeitsablauf zum Zurücksetzen der Voreinstellungen

Wenn Sie die Voreinstellungen über die Tastaturbefehle zurücksetzen, erstellt Dreamweaver jetzt eine Sicherungskopie der Voreinstellungen im Ordner „Adobe Dreamweaver CC 2014.1 Backups“. Dieser Ordner wird automatisch im gleichen Ordner wie der ursprüngliche Ordner für Dreamweaver-Einstellungen unter Windows und Mac erstellt.

Der vollständige Pfad des Sicherungsordners wird im Dialogfeld „Voreinstellungen zurücksetzen“ angezeigt.

Änderung am Ansichtsmodus für dynamische Dokumente

Dynamische Dokumente wie PHP, CFM und ASP werden nicht mehr standardmäßig in der Codeansicht geöffnet. Stattdessen werden sie im gleichen Modus (Code/Live-Ansicht/Teilen) wie das zuletzt geschlossene Dokument oder das Dokument geöffnet, das zuletzt den Fokus besaß.

Adobe Dreamweaver CC 2014.1 (Oktober 2014)

Extract in Dreamweaver

Dank der Integration von Extract in Dreamweaver können Web-Designer und Entwickler Designinformationen aus Photoshop-Dokumenten übernehmen und weboptimierte Elemente direkt in die Codeumgebung extrahieren. Extract bietet eine komplette, eigenständige Lösung für die Extrahierung von Stilinformationen und Elementen aus PSD-Kompositionen, sodass Sie nicht ständig zwischen Photoshop und Dreamweaver hin und her wechseln müssen.

Mit dem Bedienfeld „Extract“ in Dreamweaver können Sie CSS-Code, Bilder, Schriften, Farben, Verläufe und Elementabstände direkt in Ihre Webseite extrahieren. Neben diesen vorrangigen Extract-Funktionen bietet Dreamweaver auch die folgenden einmaligen Funktionen:

• Direkter Zugriff auf Ihre eigenen PSD-Dateien in Creative Cloud sowie auf PSD-Dateien, die andere in einem gemeinsamen Ordner für Sie freigegeben haben
• Kontextbedingte Codehinweise, die das Definieren von Schriften, Farben und Verläufen in Ihrem CSS erleichtern
• Erstellen von Bild-Tags aus PSD-Ebenen per Drag & Drop
• Einfügen von Stilen direkt in die Live-Ansicht (zum Beispiel in den CSS Designer oder die Elementanzeige)

Der Standardarbeitsbereich in Dreamweaver (mit dem Namen „Extract“) zeigt links das Bedienfeld „Extract“ an, damit Sie gleich loslegen können. Beim ersten Start von Dreamweaver wird im Bedienfeld „Extract“ ein einfaches Tutorial angezeigt, das Ihnen die Arbeitsabläufe für Extract vermittelt. Klicken Sie auf „Jetzt beginnen“, um sich mit Extract vertraut zu machen.

Weitere Informationen zu Extract-Arbeitsabläufen in Dreamweaver finden Sie unter Integration von Adobe Extract in Dreamweaver.

64-Bit-Architektur

Die 64-Bit-Version von Dreamweaver ist jetzt verfügbar. Sie unterstützt alle Funktionen der 32-Bit-Version. Sie können die folgenden Dreamweaver-Builds mit dem Adobe Creative Cloud-Client herunterladen:

Häufige Fragen

• Kann eine 64-Bit-Anwendung auf einer 32-Bit-Version von Windows ausgeführt werden? - Nein
• Kann ich sowohl die 32-Bit- als auch die 64-Bit-Version auf demselben Windows-Computer installieren? - Nein
  
• Wie kann ich überprüfen, ob auf meinem System die 32- oder 64-Bit-Version von Dreamweaver ausgeführt wird?
  • Windows: Starten Sie Dreamweaver. Öffnen Sie den Task-Manager und suchen Sie nach dem Dreamweaver-Prozess. Wurde die 64-Bit-Version des Dreamweaver-Builds gestartet, lautet der Name des Prozesses „Dreamweaver.exe“. Wurde die 32-Bit-Version des Dreamweaver-Builds gestartet, lautet der Name des Prozesses „Dreamweaver.exe *32“.
    
  • Mac: Öffnen Sie die Aktivitätsanzeige und wählen Sie „Ansicht“ > „Spalten“ > „Typ“. Suchen Sie in der Aktivitätsanzeige nach „Dreamweaver“ und beachten Sie den Wert in der Spalte „Typ“. Bei der 64-Bit-Version von Dreamweaver enthält die Spalte „Typ“ den Eintrag „64 Bit“.
    

Installieren der 64-Bit-Version von Dreamweaver

Verbesserungen an der Live-Ansicht

• Live-Hilfslinien
• Präzises Einfügen von Strukturelementen
• Kontextmenü in der Live-Ansicht
• Änderungen an der Elementanzeige
• Elemente in der Live-Ansicht verschieben
• Tastaturnavigation in der Live-Ansicht
• Quick Tag Editor in der Live-Ansicht

Live-Hilfslinien

Live-Hilfslinien sind ein visuelles Feedback in der Live-Ansicht, die in den folgenden Szenarien die möglichen Positionen anzeigen, wo Sie ein Element einfügen können:

• Elemente aus dem Bedienfeld „Einfügen“ ziehen
• Elemente aus dem Bedienfeld „Elemente“ ziehen
• Elemente innerhalb der Live-Ansicht ziehen (verschieben)

Live-Hilfslinien werden eingeblendet, wenn Sie mit der Maus auf verschiedene Elemente der Seite zeigen, bevor Sie das Element ablegen. Die Hilfslinien können über, unter, links oder rechts von dem Element erscheinen, auf das die Maus zeigt.

• Oberhalb/unterhalb. Beim Zeigen auf Elemente oder Tags außer Inline-Tags wird die Hilfslinie ober- oder unterhalb eingeblendet. Wenn Sie mit der Maus auf eine Stelle in der oberen Hälfte des Elements zeigen, wird eine Hilfslinie über dem betreffenden Element angezeigt. Wenn Sie mit der Maus auf eine Stelle in der unteren Hälfte des Elements zeigen, wird die Hilfslinie unter dem betreffenden Element angezeigt.

• Links/rechts: Die Hilfslinie wird beim Zeigen auf Inline-Tags wie z. B. <a> oder <span> eingeblendet oder beim Zeigen auf Tags, für die die Eigenschaft „float“ aktiviert wurde.

Elemente innerhalb der Dokumentstruktur platzieren

Wenn Sie in der Elementschnellansicht mit Live-Hilfslinien arbeiten, lassen sich HTML-Elemente in Relation zur Dokumentstruktur einfügen.  

Wenn Sie kurz warten, bevor Sie das Element ablegen, wird das Symbol für die Elementschnellansicht (</>) angezeigt. Wenn Sie dann mit der Maus auf dieses Symbol zeigen, wird die Elementschnellansicht geöffnet und Sie können das Objekt innerhalb der Elementschnellansicht ablegen.

Kontextmenü in der Live-Ansicht

Jetzt können Sie unter Verwendung des über die rechte Maustaste angezeigten Kontextmenüs Elemente in der Live-Ansicht ausschneiden, kopieren, einfügen und löschen. Sie können in der Live-Ansicht auch Elemente duplizieren oder das übergeordnete Tag oder das untergeordnete Element unter Verwendung des Kontextmenüs auswählen.

Wählen Sie zuerst in der Live-Ansicht ein Element aus, damit die Elementanzeige aktiviert wird. Klicken Sie dann innerhalb des Tag-Bereichs mit der rechten Maustaste, sodass die obigen Kontextmenüoptionen eingeblendet werden. Auf Tag-Ebene sind die Optionen funktional. 

Änderungen an der Elementanzeige

Sie können jetzt nicht nur Selektoren auf ein Element anwenden, sondern mit der Elementanzeige auch einen Selektor in der gewünschten CSS-Quelle erstellen und eine Medienabfrage zuweisen. Wenn Sie einen Selektor eingeben, der in keinem Stylesheet vorhanden ist, und die Eingabetaste drücken, werden in der Elementanzeige die Optionen zum Auswählen einer CSS-Quelle und einer Medienabfrage angezeigt.

Wenn Sie keine CSS-Quelle oder Medienabfrage wählen möchten, drücken Sie die Esc-Taste, um die Optionen auszublenden.

Sie haben jetzt auch die Möglichkeit, mit der rechten Maustaste auf einen angewendeten Selektor zu klicken, um zum entsprechenden Code zu springen (Option „Gehe zu Code“) oder kopierte Formate einzufügen („Stile einfügen“).

Elemente in der Live-Ansicht verschieben

In der Live-Ansicht unterstützt Dreamweaver jetzt das Verschieben von Elementen (auf Tag-Ebene). Sie können ein Element in der Live-Ansicht auswählen und es dann per Drag & Drop an eine andere Position verschieben.

Wenn Sie kurz warten, bevor Sie das Element ablegen, wird das Symbol für die Elementschnellansicht (</>) angezeigt. Wenn Sie dann mit der Maus auf dieses Symbol zeigen, wird die Elementschnellansicht geöffnet und Sie können das Objekt innerhalb der Elementschnellansicht ablegen. 

Tastaturnavigation in der Live-Ansicht

Für Benutzer, die schneller mit der Tastatur arbeiten, unterstützt Dreamweaver jetzt die Navigation von Seitenelementen mithilfe der Tastatur. Sie haben folgende Möglichkeiten:

• Die Nach-oben- und Nach-unten-Tasten, um die verschiedenen Elemente der Seite zu aktivieren. Durch die Tastaturnavigation können Sie leichter auf verschachtelte und umschlossene Elemente zugreifen.
• Mit der Tabulatortaste können Sie die verschiedenen Selektoren der Elementanzeige durchlaufen

Weitere Informationen finden Sie unter Tastaturnavigation in der Live-Ansicht.

Quick Tag Editor in der Live-Ansicht

Wenn Sie in der Live-Ansicht unter Windows Strg+T bzw. auf dem Mac Befehl+T drücken, wird jetzt ein Quick Tag Editor für das ausgewählte Element angezeigt. Der Quick Tag Editor besitzt drei verschiedene Modi: „Tag bearbeiten“, „Tag um Objekt legen“ und „HTML einfügen“. Mit Strg/Befehl+T können Sie zwischen diesen Modi wechseln.

Änderungen am Dreamweaver-Arbeitsbereich

Änderungen an der Dokumentsymbolleiste

Die Dokumentsymbolleiste wurde geändert, um die Anwendung zu vereinfachen.

• Die Optionen der Entwurfs- und Live-Ansicht wurden in einem einzigen Steuerelement (einer Dropdownliste) zusammengeführt.

• Das Feld „Dokumenttitel“ befindet sich jetzt im Eigenschafteninspektor.

• Die Schaltflächen „Überprüfen“ und „Live-Code“ wurden durch Symbole ersetzt.

• Die Optionen „Zurück“, „Vorwärts“ und „Aktualisieren“ wurden in einer Gruppe mit der Adressleiste in der Mitte der Dokumentsymbolleiste platziert.

• Die Symbole „Vorschau/Debug im Browser“, „Live-Ansicht-Optionen“ und „Dateiverwaltung“ wurden auf der rechten Seite der Dokumentsymbolleiste zu einer Gruppe zusammengefasst.

Änderungen am Standardarbeitsbereich

An den standardmäßig in Dreamweaver verfügbaren Arbeitsbereichen wurden folgende Änderungen vorgenommen:

• Code
• Entwurf
• Extract

Der Standardarbeitsbereich ist jetzt „Extract“. In diesem Arbeitsbereich werden links das Bedienfeld „Extract“ und rechts die Webseite angezeigt. Beim ersten Start von Dreamweaver wird im Bedienfeld „Extract“ ein einfaches Tutorial angezeigt, das Ihnen die Arbeitsabläufe für Extract vermittelt. Klicken Sie auf „Jetzt beginnen“, um sich mit Extract vertraut zu machen.

Als Standardansicht für HTML-Dokumente wird jetzt die geteilte Ansicht verwendet, bei der das Fenster horizontal zwischen Live-Ansicht und Codeansicht geteilt ist. Dynamische Dateien wie die unten aufgeführten werden standardmäßig in der Vollbild-Codeansicht geöffnet. Wenn Sie die Ansicht teilen, werden diese Dokumente in der Entwurfs- und Codeansicht angezeigt.

• PHP
• PHP-Vorlage (Beispiel.dwt.php)
• ASP
• ASP-Vorlage (Beispiel.dwt.asp)
• JSP
• JSP-Vorlage (Beispiel.dwt.jsp)
• CFM
• CFM-Vorlage (Beispiel.dwt.php)

Tipp: Klicken Sie in die Dropdown-Liste neben „Live“ und klicken Sie auf „Entwurf“, um zur Entwurfsansicht zu wechseln. Um die horizontal geteilte Ansicht zu einer vertikal geteilten Ansicht zu machen, wählen Sie „Ansicht“ > „Vertikal teilen“. Jetzt wird die Live-/Entwurfsansicht auf der linken Seite angezeigt. Um die Live-/Entwurfsansicht auf der rechten Seite anzuzeigen, heben Sie die Markierung von „Ansicht“ > „Live-Ansicht links“ oder „Entwurfsansicht links“ auf.

Dreamweaver merkt sich jetzt den Status der Live-Ansicht, den Sie für ein HTML-Dokument wählen, und wendet dann dieselbe Ansicht auf alle HTML-Dokumente an, die Sie später öffnen. Angenommen, Sie öffnen zunächst das Dokument „HTML1“. Das Dokument wird in der geteilten Code- und Live-Ansicht angezeigt. Sie wechseln für dieses Dokument zur Vollbild-Live-Ansicht. Wenn Sie als Nächstes das Dokument „HTML2“ öffnen, wird es ebenfalls in der Vollbild-Live-Ansicht angezeigt.  

Änderungen an Dokumenten mit fließendem Rasterlayout

Unterstützung der Bearbeitung in der Live-Ansicht

In der vorherigen Version von Dreamweaver CC wurden bereits neue Bearbeitungsfunktionen für die Live-Ansicht eingeführt. In dieser Version stehen diese Live-Ansicht-Bearbeitungsfunktionen nun auch für Dokumente mit fließendem Rasterlayout zur Verfügung. Dank der Live-Ansicht-Bearbeitung können Sie fließende Webseiten viel schneller entwickeln, da Sie beim Bearbeiten sofort eine Vorschau der Änderungen anzeigen können.

Anhand der folgenden Funktionen lassen sich Dokumente mit fließendem Rasterlayout in der Live-Ansicht bearbeiten:

• Elementanzeige
• Schnellansicht-Eigenschafteninspektor
• Live-Ansicht-Eigenschafteninspektor
• Elemente direkt in die Live-Ansicht einfügen und bearbeiten

Mit der Elementschnellansicht können Sie jetzt auch die HTML DOM-Struktur eines Fluid Grid-Dokuments anzeigen. 

Hinweis: In der Elementschnellansicht in Fluid Grid Layouts können Sie die HTML-Elemente nicht kopieren, einfügen, duplizieren oder neu anordnen.

Die Benutzeroberfläche zum Anzeigen und Bearbeiten von Dokumenten mit fließendem Rasterlayout wurde geändert, um die Bearbeitungsfunktionen in der Live-Ansicht einzuschließen. Wenn Sie jetzt ein Element in einem Dokument mit fließendem Rasterlayout auswählen, wird die Elementanzeige zusammen mit anderen Steuerelementen wie „Elemente ausblenden“ oder „Beginnt neue Zeile“ angezeigt.

Auch Dokumente mit fließendem Rasterlayout werden jetzt direkt in der Live-Ansicht geöffnet. Dokumente mit fließendem Rasterlayout können nicht mehr in der Entwurfsansicht angezeigt oder bearbeitet werden.

Weitere Informationen zu Dokumenten mit fließendem Rasterlayout finden Sie unter Responsive Design mithilfe von fließenden Rasterlayouts.

Änderungen am Arbeitsablauf zum Einfügen von Elementen

Das Dialogfeld „Einfügen“ enthält bei Dokumenten mit fließendem Rasterlayout jetzt einen „Positionierungsassistenten“. Mit dem Positionierungsassistenten können Sie das einzufügende Element vor oder hinter dem Element einfügen, das in der Live-Ansicht den Fokus besitzt, oder es darin verschachteln. Weitere Informationen zum Einfügen von Elementen für fließende Rasterlayouts finden Sie unter Einfügen von fließenden Rasterelementen.

Änderung an der Option „Ausgeblendete Elemente verwalten“

Die Option „Ausgeblendete Elemente verwalten“ (die Schaltfläche mit dem Auge auf der Dokumentsymbolleiste) wurde in das Kontextmenü für Dokumente mit fließendem Rasterlayout verlagert.

Um ausgeblendete Elemente zu verwalten, klicken Sie mit der rechten Maustaste auf die Seite mit dem fließenden Rasterlayout, und wählen „Ausgeblendete Elemente verwalten“. Um diese Elemente auszublenden, können Sie im HUD auf das Augensymbol klicken. 

Vordefinierte Farbthemen für die Codeansicht

Folgende vordefinierte Farbthemen stehen Ihnen jetzt in der Codeansicht zur Verfügung:

• Klassisch (Standard; genauso wie in früheren Dreamweaver-Versionen)
• Raven
• Schiefer
• Blanche
• Genf

In den Voreinstellungen für Codefarben können Sie ein Thema für die Codeansicht festlegen. Sie können das Thema anpassen, indem Sie andere Farbschemata für Hintergründe, Vordergründe und verborgene Zeichen auswählen.

Für jeden aufgelisteten Dokumenttyp können Sie die Farben für verschiedene Tag- und Codeelementkategorien, wie z. B. Formular-Tags oder JavaScript-Bezeichner, anpassen. Nachdem das Thema „Raven“ auf alle Dokumenttypen angewendet wurde, können Sie beispielsweise festlegen, dass nur in HTML-Dokumenten formularbezogene Tags eine blaue Farbe erhalten.

Alle selbst definierten Einstellungen in einem Thema werden gespeichert, wenn Sie auf „Anwenden“ klicken. Danach ist dieses benutzerdefinierte Thema in jeder Dreamweaver-Sitzung verfügbar.

Weitere Informationen finden Sie unter Farbthema für die Codeansicht festlegen.

Synchronisation zwischen Code- und Live-Ansicht

Durch die Synchronisation zwischen Code- und Live-Ansicht können Sie in der Live-Ansicht sofort eine Vorschau der Änderungen anzeigen, die Sie im Code vornehmen. Anders als in früheren Versionen von Dreamweaver müssen Sie nicht erst auf „Aktualisieren“ klicken, damit eine Vorschau der Änderungen in der Live-Ansicht angezeigt wird.

In den folgenden Arbeitsabläufen können Sie sehen, wie die Synchronisation zwischen Code- und Live-Ansicht funktioniert (wenn die Codeansicht den Fokus hat):

• Textoperationen wie Ausschneiden/Kopieren/Einfügen/Löschen oder Rückgängig/Wiederholen.
• Verschieben von Elementen in der Elementschnellansicht, wenn die Codeansicht den Fokus hat.
• Eingaben in der Codeansicht.
• Löschen/Duplizieren/Kopieren/Einfügen in der Elementschnellansicht (Kontextmenüoptionen).
• Vorgänge im Eigenschafteninspektor, etwa das Ändern von Schriftauszeichnungen Fett/Kursiv, Ändern der Klasse, ID, des Formats, der Seiteneigenschaften und dem Zuweisen von Schriftarten.
• Hinzufügen/Löschen von Klassen oder IDs mithilfe der Codehinweise in der Codeansicht.
• Einfügen von Elementen wie div-, Bild-, Hyperlink- und strukturelle Elemente aus dem Bedienfeld „Einfügen“ in die Codeansicht.
• Hinzufügen/Bearbeiten von CSS-Stilen im <style>-Tag. 
• Bearbeiten von Code in CSS-Dateien.

Bedienfeld „Elemente“ in der Live-Ansicht

Das Bedienfeld „Elemente“ („Fenster“ > „Elemente“) ist jetzt auch in der Live-Ansicht verfügbar. Mithilfe des Bedienfelds “Elemente“ ist es ein Leichtes, die folgenden Aufgaben zu verwalten:

• Verschieben oder Einfügen von Elementen (Bilder, URLs, Farben oder Medien) aus dem Vorschaufeld oder der Listenansicht des Bedienfelds „Elemente“.

Hinweis: Elemente können nur auf dem Mac aus dem Vorschaufeld herausgezogen werden.

• Kopieren eines Farbwerts und Einfügen dieses Farbwerts in ein beliebiges Textfeld in Dreamweaver, etwa in die Eigenschaften im CSS Designer, in die Codeansicht, in die Farbauswahl oder auch in andere Anwendungen, z. B. in einen Texteditor.
  

Eine ausführliche Anleitung dazu, wie Sie mit dem Bedienfeld „Elemente“ arbeiten, finden Sie unter Verwenden von Elementen.

Neue Startvorlagen

Dreamweaver enthält jetzt neue Responsive-Startvorlagen, mit denen Sie schnell in die Erstellung von Responsive-Websites einsteigen können. Sie können im Dialogfeld „Neues Dokument“ („Datei“ > „Neu“ > „Startvorlagen“) eine der folgenden Vorlagen auswählen:

• Infoseite
• Blog-Beitrag
• E-Commerce
• E-Mail
• Portfolio

Wenn Sie eine Vorlage auswählen und im Dialogfeld „Neues Dokument“ auf „Erstellen“ klicken, werden Sie von Dreamweaver aufgefordert, das neue Dokument zu speichern. Beim Speichern des Dokuments erstellen Sie eine Kopie der Vorlage, die Sie später entsprechend Ihrer Anforderungen anpassen können.

Voreinstellungen beim Start zurücksetzen

Bei Fehlerbehebungen in Dreamweaver ist es manchmal erforderlich, den Voreinstellungsordner zu löschen, der alle benutzerdefinierten Einstellungen enthält. Vor dieser Programmversion mussten Sie manuell zum Voreinstellungsordner auf Ihrem Computer navigieren und den Ordner löschen. In dieser Version haben Sie die Möglichkeit, die Voreinstellungen mithilfe eines Dialogfelds mit nur einem Klick zu löschen:

Sie können das Dialogfeld „Voreinstellungen zurücksetzen“ öffnen, indem Sie beim Start von Dreamweaver die folgenden Tastaturbefehle gedrückt halten:

• (Windows) Windows-Taste+Strg+Umschalt
• (Mac) Befehl+Wahl+Umschalt

Halten Sie auf dem Mac beim Start von Dreamweaver (durch Klicken auf das Dreamweaver-Symbol im Dock) Befehl+Wahl+Umschalt gedrückt.

Unter Windows führen Sie die folgenden Schritte aus:

Stellen Sie sicher, dass Sie die oben genannten Tasten für Tastaturbefehle auch dann gedrückt halten, wenn das Dialogfeld Benutzerkontensteuerung (UAC, User Account Control) angezeigt wird. 

Weitere Verbesserungen

Änderungen an den Synchronisationseinstellungen

Es ist jetzt möglich, über das Dialogfeld „Voreinstellungen“ Einstellungen aus früheren Dreamweaver-Versionen zu importieren, die in Creative Cloud gespeichert wurden. Die aus der Cloud importierten Einstellungen überschreiben alle lokalen Einstellungen und werden beim nächsten Start von Dreamweaver angewendet.

Ab dieser Version werden neben den Einstellungen, die in früheren Versionen synchronisiert wurden, auch die folgenden Einstellungen mit Creative Cloud synchronisiert:

• Neu hinzugefügte Code-Farbthemen
• Einstellungen für die Anwendungsleiste und den Anwendungsrahmen auf dem Mac

Änderungen am CSS Designer

In dieser Version von Dreamweaver wurde die Benutzerfreundlichkeit von CSS Designer in verschiedener Hinsicht verbessert. Das Bedienfeld „CSS Designer“ enthält außerdem ein Einführungstutorial, um Sie schnell mit den Arbeitsabläufen vertraut zu machen.

Änderungen am Begrüßungsbildschirm

Die Option „Sitevorlagen“ auf dem Begrüßungsbildschirm wurde durch „Startvorlagen“ ersetzt. Die Option „Sitevorlagen“ finden Sie im Dialogfeld „Neues Dokument“ („Datei“ > „Neu“).

jQuery-Versionsaktualisierungen

Dreamweaver enthält jetzt folgende aktualisierte jQuery-Bibliotheken:

• jQuery 1.8.3 auf jQuery 1.11.1
• jQuery UI 1.9.2 auf jQuery UI 1.10.4

jQuery-Starterseiten wurden entfernt. 

PhoneGap-Update

Die direkte PhoneGap Build-Integration in Dreamweaver zum Erstellen von Anwendungspaketen wird im aktuellen Update für Release 2014 von Dreamweaver CC (Oktober 2014) nicht mehr unterstützt.

Sie können jedoch den Online-PhoneGap Build-Dienst mit den neuesten Funktionsupdates verwenden, um Pakete Ihrer Webanwendungen als native mobile Apps zu erstellen.