Die letzten Updates für Release 2014 von Dreamweaver CC bieten 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.

Adobe Dreamweaver CC 2014.1.1 (Februar 2015)

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 Anfänger 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.

Startbildschirm
Startbildschirm

Hinweis:

Dieser neue Begrüßungsbildschirm steht nur Benutzern mit englischem Gebietsschema zur Verfügung. Bei Benutzern mit anderen Gebietsschemas wird der Begrüßungsbildschirm und der Kurzüberblick über die neuen Funktionen in Dreamweaver CC 2014.1 angezeigt.

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.

Bedienfeld „Extract“
Bedienfeld „Extract“

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.

Hinweis:

Nur die Vorgänge, die vom Browser unterstützt werden, werden auch für das Auswahlrechteck in der Live-Ansicht unterstützt.

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 am 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:

  1. Starten Sie Dreamweaver, indem Sie folgenden Befehl ausführen:

    • Windows: <Installationspfad> -enableRemoteDebugging
    • Mac: open <Installationspfad> --args -enableRemoteDebugging

    Hinweis: Geben Sie vor „args“ zwei Bindestriche ein.

  2. Sie werden in einem Dialogfeld darauf hingewiesen, dass Port 5471 zum Debuggen aktiviert wurde. Klicken Sie im Dialogfeld auf „OK“.

    Dreamweaver wird gestartet.

    Klicken Sie im Dialogfeld auf „OK“, um Dreamweaver zu starten.
    Klicken Sie im Dialogfeld auf „OK“, um Dreamweaver zu starten.

  3. Öffnen Sie die Dokumente in der Live-Ansicht, die Sie debuggen möchten.

  4. Um mit dem Debuggen zu beginnen, öffnen Sie Google Chrome und rufen „localhost:5471“ auf. Es wird eine Liste mit Hyperlinks zu allen in Dreamweaver geöffneten Dokumenten angezeigt. 

    Hinweis: Da der neue Begrüßungsbildschirm und das Bedienfeld „Extract“ das Chromium Embedded Framework (CEF) verwenden, werden auch Einträge für diese Funktionen angezeigt.

    Sie können jetzt die Entwicklertools von Google Chrome für das Debuggen der erforderlichen Dokumente verwenden.

  5. Um das Debuggen zu beenden und Dreamweaver im normalen Modus zu öffnen, beenden Sie Dreamweaver und starten Sie die Anwendung erneut.

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.

Einstellungen und Voreinstellungen zurücksetzen
Einstellungen und Voreinstellungen zurücksetzen

Ä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 Webdesigner 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.

Bedienfeld „Extract“ Standardarbeitsbereich
Bedienfeld „Extract“

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 64-Bit-Dreamweaver-Builds von der Adobe Creative Cloud herunterladen:

OS Standardinstallationspfad Ordner für die Anwendungsvoreinstellungen
Windows 32 Bit C:\Programme\Adobe\Adobe Dreamweaver CC 2014.1 %appdata%/Adobe/Adobe Dreamweaver CC 2014.1
Windows 64 Bit C:\Programme\Adobe\Adobe Dreamweaver CC 2014.1 %appdata%/Adobe/Adobe Dreamweaver CC 2014.1
Mac 64 Bit /Applications/Adobe Dreamweaver CC 2014.1 ~/Library/Application Support/Adobe/Adobe Dreamweaver CC 2014.1

Häufig gestellte 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

  1. Stellen Sie sicher, dass auf Ihrem Computer ein 64-Bit-Betriebssystem ausgeführt wird:

    Um dies zu überprüfen, führen Sie die folgenden Schritte aus:

  2. Laden Sie die 64-Bit-Version von Dreamweaver aus Creative Cloud herunter und installieren Sie den Build.

Verbesserungen 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)

Hinweis:

In Dokumenten mit fließendem Rasterlayout werden Live-Hilfslinien nicht unterstützt.

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.
Live-Hilfslinien über und unter dem Element
Live-Hilfslinien über und unter dem Element

  • 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.
Live-Hilfslinien rechts und links vom Element
Live-Hilfslinien rechts und links vom Element

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.

Symbol für die Elementschnellansicht
Das Elementschnellansichtsymbol unterstützt Sie beim präzisen Einfügen von Objekten

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.

Hinweis:

Sie können in der Live-Ansicht auch Tastaturbefehle verwenden (z. B. unter Windows Strg+x, Strg+c, Strg+v, Strg+d und die Entf-Taste).

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.

Optionen für CSS-Quelle und Medienabfrage in der Elementanzeige
Optionen für CSS-Quelle und Medienabfrage in der Elementanzeige

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“).

Optionen „Gehe zu Code“ und „Stile einfügen“ in der Elementanzeige
Optionen „Gehe zu Code“ und „Stile einfügen“ in der Elementanzeige

Hinweis:

Die Option „Gehe zu Code“ zeigt Unteroptionen an, wenn mehreren Medienabfragen derselbe Selektor hinzugefügt wird. Die Option „Stile einfügen“ zeigt Unteroptionen an, wenn es sich bei den kopierten Selektoren um Pseudo- oder zusammengesetzte Selektoren handelt.

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.

  1. Klicken Sie auf das Element, das Sie verschieben wollen. Sobald die Elementanzeige erscheint (das Element hat einen blauen Rahmen), ziehen Sie das Element auf eine andere Position. Beim Ziehen nimmt der Mauszeiger eine andere Form an, um zu kennzeichnen, dass das Element jetzt verschoben werden kann.

  2. Die Referenzelemente (bezüglich derer das gezogene Objekt eingefügt werden soll) sind durch einen blauen Rahmen gekennzeichnet. Live-Hilfslinien (in Grün) zeigen an, wo das Element in Bezug auf das Referenzelement abgelegt werden kann.

Hinweis:

Nur statische Elemente können in der Live-Ansicht verschoben werden. Tags mit dynamischem Inhalt, z. B. PHP-Tags, können nicht verschoben werden.

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. Verwenden Sie:

  • 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.

Quick Tag Editor in der Live-Ansicht
Quick Tag Editor in der Live-Ansicht

Ä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.
Die Optionen für die Entwurfs- und Live-Ansicht in Dreamweaver CC (Oktober 2014)
Die Optionen für die Entwurfs- und Live-Ansicht im aktuellen Update für Dreamweaver CC (Oktober 2014)

Die Schaltflächen für Entwurfs- und Live-Ansicht auf der Dokumentsymbolleiste in früheren Versionen
Die Schaltflächen für Entwurfs- und Live-Ansicht auf der Dokumentsymbolleiste in früheren Versionen

  • Das Feld „Dokumenttitel“ befindet sich jetzt im Eigenschafteninspektor.
Dokumentsymbolleiste in Dreamweaver CC (Oktober 2014)
Dokumentsymbolleiste im aktuellen Update für Dreamweaver CC (Oktober 2014)

Feld „Dokumenttitel“ in den Eigenschafteninspektor in Dreamweaver CC (Oktober 2014) verschoben
Im aktuellen Update für Dreamweaver CC (Oktober 2014) wurde das Feld „Dokumenttitel“ in den Eigenschafteninspektor verschoben.

Feld „Titel“ auf der Dokumentsymbolleiste in früheren Versionen
Feld „Titel“ auf der Dokumentsymbolleiste in früheren Versionen

  • Die Schaltflächen „Überprüfen“ und „Live-Code“ wurden durch Symbole ersetzt.
Die Symbole „Live-Code“ und „Überprüfen“ in Dreamweaver CC (Oktober 2014)
Die Symbole „Live-Code“ und „Überprüfen“ im aktuellen Update für Dreamweaver CC (Oktober 2014)

Die Schaltflächen „Live-Code“ und „Überprüfen“ in früheren Versionen
Die Schaltflächen „Live-Code“ und „Überprüfen“ in früheren Versionen

  • Die Optionen „Zurück“, „Vorwärts“ und „Aktualisieren“ wurden in einer Gruppe mit der Adressleiste in der Mitte der Dokumentsymbolleiste platziert.
Adressleiste mit den Optionen „Zurück“, „Vorwärts“ und „Aktualisieren“ in Dreamweaver CC (Oktober 2014)
Adressleiste mit den Optionen „Zurück“, „Vorwärts“ und „Aktualisieren“ im aktuellen Update für Dreamweaver CC (Oktober 2014)

Adressleiste mit den Optionen „Zurück“, „Vorwärts“ und „Aktualisieren“ in früheren Versionen
Adressleiste mit den Optionen „Zurück“, „Vorwärts“ und „Aktualisieren“ in früheren Versionen

  • Die Symbole „Vorschau/Debug im Browser“, „Live-Ansicht-Optionen“ und „Dateiverwaltung“ wurden auf der rechten Seite der Dokumentsymbolleiste zu einer Gruppe zusammengefasst.
Die Symbole „Vorschau/Debug im Browser“, „Live-Ansicht-Optionen“ und „Dateiverwaltung“ in Dreamweaver CC (Oktober 2014)
Die Symbole „Vorschau/Debug im Browser“, „Live-Ansicht-Optionen“ und „Dateiverwaltung“ im aktuellen Update für Dreamweaver CC (Oktober 2014)

Die Symbole „Vorschau/Debug im Browser“, „Live-Ansicht-Optionen“ und „Dateiverwaltung“ in früheren Versionen
Die Symbole „Vorschau/Debug im Browser“, „Live-Ansicht-Optionen“ und „Dateiverwaltung“ in früheren Versionen

Änderungen am Standardarbeitsbereich

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

  • Code
  • Entwurf
  • Extract
Arbeitsbereiche
Arbeitsbereiche

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.

Arbeitsbereich „Extract“
Arbeitsbereich „Extract“

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)
Standardansicht für HTML-Dokumente mit Live- und Codeansicht
Standardansicht für HTML-Dokumente mit Live- und Codeansicht

Standardansicht für dynamische Dokumente mit Vollbild-Codeansicht
Standardansicht für dynamische Dokumente mit Vollbild-Codeansicht

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:

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.

Optionen für fließende Rasterlayouts in früheren Versionen
Optionen für fließende Rasterlayouts in früheren Versionen

Optionen für fließende Rasterlayouts zusammen mit der Elementanzeige in Dreamweaver CC (Oktober 2014)
Optionen für fließende Rasterlayouts im aktuellen Update für Dreamweaver CC (Oktober 2014)


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.

Dokumentsymbolleiste in Dreamweaver CC (Oktober 2014)
Dokumentsymbolleiste im aktuellen Update für Dreamweaver CC (Oktober 2014)

Dokumentsymbolleiste in einem Dokument mit fließendem Rasterlayout in früheren Versionen
Dokumentsymbolleiste in einem Dokument mit fließendem Rasterlayout in früheren Versionen

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. 

Die Option „Ausgeblendete Elemente verwalten“ im Kontextmenü in Dreamweaver CC (Oktober 2014)
Die Option „Ausgeblendete Elemente verwalten“ im Kontextmenü im aktuellen Update für Dreamweaver CC (Oktober 2014)

Das Augensymbol für die Verwaltung von ausgeblendeten Elementen in früheren Versionen
Das Augensymbol für die Verwaltung von ausgeblendeten Elementen in früheren Versionen

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
Die Themen „Klassisch“, „Raven“, „Schiefer“, „Blanche“ und „Genf“
Die Themen „Klassisch“, „Raven“, „Schiefer“, „Blanche“ und „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.

Hinweis:

Mit der Option „Einstellungen synchronisieren“ in „Voreinstellungen“ können Sie die zwischen Ihren Dreamweaver-Instanzen benutzerdefinierten Codethemen beibehalten. Weitere Informationen finden Sie unter Synchronisieren von Dreamweaver-Einstellungen mit Creative Cloud.

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.

Hinweis:

Bei Änderungen im JavaScript-Code muss die Seite komplett aktualisiert oder neu geladen werden, damit sie in der Live-Ansicht widergespiegelt werden. 

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.

Hinweis:

 

  • Da die Kategorien „Skripts“, „Vorlagen“ und „Bibliothek“ in der Codeansicht wichtiger sind, wurden sie im Bedienfeld „Elemente“ der Live-Ansicht ausgeblendet.
  • In dieser Version von Dreamweaver CC wurden die Kategorien „Flash“ und „Filme“ in der Kategorie „Medien“ zusammengefasst.
         

Bedienfeld „Elemente“ in der Live-Ansicht
Bedienfeld „Elemente“ in der Live-Ansicht

Bedienfeld „Elemente“ in der Entwurfs- und Codeansicht
Bedienfeld „Elemente“ in der Entwurfs- und Codeansicht


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
Neue Responsive-Startvorlagen
Neue Responsive-Startvorlagen

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:

Voreinstellungen zurücksetzen
Voreinstellungen zurücksetzen

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

Hinweis:

Verwenden Sie die Option zum Zurücksetzen der Voreinstellungen mit Bedacht. Wenn Sie die Einstellungen und Voreinstellungen zurücksetzen, gehen alle benutzerdefinierten Einstellungen für Arbeitsbereich, Tastaturbefehle, Erweiterungen und Anwendungsvoreinstellungen verloren.

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:

  1. Wechseln Sie zum Installationsordner und klicken Sie auf die Datei „Dreamweaver.exe“.

  2. Halten Sie Windows-Taste+Strg+Umschalt gedrückt und doppelklicken Sie auf „Dreamweaver.exe“.

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.

Einstellungen aus früheren Versionen von Dreamweaver importieren
Einstellungen aus früheren Versionen von Dreamweaver importieren

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 ab dem 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. Weitere Informationen finden Sie unter PhoneGap Build mit dem aktuellen Update für die Version 2014 von Dreamweaver CC verwenden.

Dieses Werk unterliegt den Bedingungen der Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License.  Twitter™- und Facebook-Beiträge fallen nicht unter die Bedingungen der Creative Commons-Lizenz.

Rechtliche Hinweise   |   Online-Datenschutzrichtlinie