Übersicht über die Funktionen | Dreamweaver CC | Versionen 2015.x

Adobe Dreamweaver CC 2015.1, 2015.2 und 2015.3 stellen eine Revolution beim Entwerfen und Erstellen von Websites in Dreamweaver dar. Creative Cloud Libraries und Adobe Stock sind jetzt direkt aus Dreamweaver heraus zugänglich, sodass Sie Entwurfselemente und Stile von Adobe-Desktop-Applikationen und -Apps sowie hochwertige Bilder und Videos einbinden können. Creative Cloud-Funktionen für die Zusammenarbeit bieten einfache Arbeitsabläufe für Teams aus Designern und Entwicklern.

Diese Version umfasst zudem Verbesserungen im Hinblick auf das DOM-Bedienfeld, Responsive Webdesign, Extract, Bearbeitung in der Live-Ansicht und andere Verbesserungen, die von Benutzern wie Ihnen vorgeschlagen wurden. In diesem Artikel werden diese neuen Funktionen und Verbesserungen vorgestellt. Außerdem finden Sie hier Links zu weiteren Hilfe- und Trainingsressourcen.

Diese Version von Dreamweaver bietet eine Lösung für ein Problem auf Windows-Computern, bei dem der Computer nicht in den Energiesparmodus wechseln kann, wenn Dreamweaver noch ausgeführt wird (Reaktivierungszeitgeberproblem). 

Weitere Informationen finden Sie unter Computer cannot sleep if Dreamweaver is running | Windows.

Adobe Dreamweaver CC 2015.2 (März 2016)

Verbesserungen im DOM-Bedienfeld

Durch Unterstützung der Mehrfachauswahl, des Bearbeitens von Tags, Klassen und IDs und des Einfügens neuer Elemente können Sie jetzt den größten Teil Ihrer Webseite über das DOM-Bedienfeld gestalten.

Im Folgenden erfahren Sie mehr über diese Verbesserungen im DOM-Bedienfeld:

• Unterstützung der Auswahl mehrerer Elemente
• Bearbeiten von Tags, Klassen und IDs im DOM-Bedienfeld
• Einfügen von Elementen im DOM-Bedienfeld
• Visuelles Feedback für untergeordnete Knoten

Unterstützung der Auswahl mehrerer DOM-Elemente 

Sie können jetzt im DOM-Bedienfeld eines Dokuments mehrere Tags auswählen, um sie gleichzeitig zu bearbeiten oder andere Operationen in einem Schritt auf diese Tags anzuwenden.

• Um eine zusammenhängende Auswahl zu treffen, halten Sie die Umschalttaste gedrückt und klicken auf das erste und letzte Tag.
• Um eine nicht zusammenhängende Auswahl zu treffen, halten Sie die Strg-Taste gedrückt und klicken auf die gewünschten Tags.

Eine Mehrfachauswahl im DOM-Bedienfeld hat folgende Auswirkungen:

• Der Eigenschafteninspektor und der CSS Designer sind deaktiviert.
• Die Tag-Hierarchie unten auf der Seite wird nicht mehr angezeigt.
• In der Codeansicht ist die Einfügemarke nicht aktiv.

Bearbeiten von Tags, Klassen und IDs im DOM-Bedienfeld

Sie können Tags, Klassen und IDs bearbeiten, indem Sie im DOM-Bedienfeld darauf doppelklicken. Außerdem können Sie zusätzliche Klassen oder IDs hinzufügen, indem Sie sie durch ein Leerzeichen trennen. Bei Tags, die keiner Klasse oder ID zugeordnet sind, können Sie den Namen der Klasse oder ID eingeben, nachdem Sie auf das Tag doppelgeklickt haben.

Wenn Sie beginnen, den Namen des Tags, der Klasse oder der ID einzugeben, werden Codehinweise angezeigt. Wenn Sie die Hinweise auf Klassen einschränken möchten, beginnen Sie die Eingabe mit einem Punkt. Wenn nur IDs in den Hinweisen angezeigt werden sollen, beginnen Sie die Eingabe mit einer Raute (#).

Um ein Tag zu entfernen, klicken Sie im DOM-Bedienfeld mit der rechten Maustaste auf das Tag und wählen „Tag entfernen“.

Einfügen von Elementen im DOM-Bedienfeld

Sie haben jetzt folgende Möglichkeiten, um über das DOM-Bedienfeld neue Elemente in Ihre Webseite einzufügen:

• Drücken Sie die Leertaste oder klicken Sie auf das Symbol neben dem gewünschten Element im DOM-Bedienfeld. Klicken Sie im daraufhin angezeigten Popupmenü auf eine der Optionen. Wenn Sie mehrere Elemente mit einem Tag umschließen möchten, wählen Sie die gewünschten Elemente aus und wählen dann in den Einfügeoptionen „Tag um Objekt legen“.

• Klicken Sie im Bedienfeld „Einfügen“ auf das gewünschte Element und ziehen Sie es in das DOM-Bedienfeld. Live-Hilfslinien werden angezeigt, um anzugeben, wo das Element eingefügt wird. Legen Sie das Element an der gewünschten Position ab.

Wenn Sie Tags mithilfe des DOM-Bedienfelds einfügen, werden auch Standardtext (Platzhalter) und die für die Tags erforderlichen Attribute eingefügt:

• Wenn Sie eines der folgenden Tags einfügen und die Änderungen bestätigen, wird in die Code-, Live- und Entwurfsansicht Standardtext eingefügt:
  div, header, nav, aside, article, section, footer, h1-h6 und hgroup
• Wenn Sie ein table-Tag einfügen und die Änderungen bestätigen, wird eine Tabelle mit drei Spalten und drei Zeilen eingefügt.
• Wenn Sie ein embed- oder img-Tag einfügen und die Änderungen bestätigen, erscheint das Dialogfeld „Datei auswählen“, damit Sie die entsprechende Datei auswählen können.
• Wenn Sie ein meta-Tag einfügen und die Änderungen bestätigen, wird in der Codeansicht der folgende Code hinzugefügt: <meta name="" content="">
• Wenn Sie ein figure-Tag einfügen und die Änderungen bestätigen, wird ein figure-Tag mit verschachteltem figcaption-Tag eingefügt.
• Wenn Sie ein ul- oder ol-Tag einfügen und die Änderungen bestätigen, wird ein ol/ul-Tag mit verschachteltem li-Tag eingefügt.

Visuelles Feedback für untergeordnete Knoten

Wenn im DOM-Bedienfeld ein Knoten ausgewählt ist, werden die untergeordneten Knoten in hellblau angezeigt.

Sind jedoch die untergeordneten Knoten selbst ausgewählt, sind sie nicht mehr hellblau unterlegt.

Sicherheitsverbesserungen zum Verhindern potenzieller Gatekeeper-Angriffe

Gatekeeper ist eine integrierte Funktion zur Erkennung von Malware in Mac OS X 10.7 und höher. Diese Funktion prüft Anwendungen auf gültige Entwickler-ID-Signaturen, bevor Sie auf dem Mac installiert werden. Allerdings erkennt oder blockiert Gatekeeper keine Anwendungen, die von Anwendungen mit gültigen Signaturen dynamisch geladen werden. Wenn Sie Dreamweaver von nicht autorisierten Quellen erworben haben, kann dieser Schwachpunkt in Gatekeeper genutzt werden, um schädliche Plug-Ins in das Dreamweaver-Installationspaket einzubinden. 

Um potenzielle Angriffe zu verhindern, fordert Dreamweaver Sie jetzt auf, das Laden von Drittanbieter-Plug-Ins zu bestätigen, wenn sie nicht im Verzeichnis „Programme“ installiert werden.

Ausführliche Informationen erhalten Sie unter Verhindern von potenziellen Gatekeeper-Angriffen.

CEF-Integration

Dreamweaver hat das Framework CEF3 2357 integriert. In der Live-Ansicht können CSS3-3D-Übergänge,
Animationen und Transformationen gerendert werden.

Weitere Informationen finden Sie unter CEF-Integration.

Verbesserungen bei der visuellen Medienabfrage

In der Leiste für visuelle Medienabfragen können Sie jetzt beim Hinzufügen von Medienabfragen eine Einheit auswählen – px, em oder rem. Wenn Sie einen Wert in einer bestimmten Einheit angeben und anschließend die Einheit ändern, wird der Wert automatisch in die neu ausgewählte Einheit umgewandelt.

Weitere Informationen finden Sie unter Visuelle Medienabfragen.

Verbesserungen bei CC Libraries

Änderungen im Dialogfeld „Neu auflösen“

Im Dialogfeld „Bildoptimierung“ wurde die UI-Bezeichnung „Größe ändern in“ zu „Neu auflösen zu“ geändert.

Und wenn Sie für ein Bild aus dem Bedienfeld „CC Libraries“ die Auflösung ändern, wird auf dem Bild ein Kreisel angezeigt, bis der Vorgang abgeschlossen ist.

Weitere Informationen finden Sie unter Creative Cloud Libraries in Dreamweaver.

Extrahieren von weboptimierten SVG-Dateien aus CC Libraries

Wenn Sie in Ihren Creative Cloud-Bibliotheken lizenzierte Adobe Stock-Bilder gespeichert haben, können Sie sie als weboptimierte SVG-Dateien in Ihren Dreamweaver-Webseiten extrahieren. Wenn Sie die Illustrator-Grafiken aus dem Bedienfeld „CC Libraries“ auf Ihre Webseiten ziehen, werden sie standardmäßig als SVG-Dateien eingefügt.

Wenn Sie die Eigenschaften von SVG-Dateien anpassen möchten, können Sie die Einstellungen in der Datei options.json ändern.

Weitere Informationen finden Sie unter Extrahieren von weboptimierten SVG-Dateien aus CC Libraries.

Neue Startvorlagen

In diesem Build wurden drei neue E-Mail-Vorlagen hinzugefügt: „E-Mail – fließend“, „E-Mail – hybrid“, „E-Mail – Responsive“.

Diese Vorlagen erreichen Sie, wenn Sie „Datei“ > „Neu“ > „Startvorlagen“ > „E-Mail-Vorlagen“ wählen.

Verbesserungen bei der Bearbeitung von Tabellen in der Live-Ansicht

Neue Bearbeitungsoptionen für Zeilen und Spalten

In der Live-Ansicht sind jetzt für Tabellen die folgenden Bearbeitungsoptionen verfügbar:

• Löschen mithilfe der Entf-Taste oder Rücktaste
• Ausschneiden über das Kontextmenü, das Menü „Bearbeiten“ oder die entsprechende Tastenkombination
• Kopieren über das Kontextmenü, das Menü „Bearbeiten“ oder die entsprechende Tastenkombination
• Einfügen über das Kontextmenü, das Menü „Bearbeiten“ oder die entsprechende Tastenkombination
• Kopieren und Ersetzen anderer Zeilen und Spalten mithilfe der Kontextmenüoption „Ausgewählte Zellen ersetzen“

Um diese Optionen anzuzeigen, aktivieren Sie den Tabellenformatierungsmodus, indem Sie die Tabelle auswählen und in der Elementanzeige auf das Ordnersymbol klicken. Anschließend wählen Sie die gewünschte(n) Zelle(n) aus und klicken mit der rechten Maustaste.

Navigation zwischen Zeilen und Spalten

In der Live-Ansicht können Sie jetzt mithilfe der linken und rechten Pfeiltasten zwischen den Zellen einer Tabelle navigieren. Klicken Sie auf eine Zelle in der Tabelle. Um den Curser in die nächste Zelle zu setzen, drücken Sie die rechte Pfeiltaste und um ihn in die vorherige Zelle zu setzen, drücken Sie die linke Pfeiltaste.

Änderungen am Begrüßungsbildschirm

Der Begrüßungsbildschirm wurde in dieser Dreamweaver-Version geändert:

Adobe Dreamweaver CC 2015.1 (November 2015)

Integration mit Creative Cloud Libraries

Die neue Unterstützung für Creative Cloud Libraries ermöglicht das gemeinsame Arbeiten und das Freigeben von Grafiken und Farbpaletten, die in anderen Anwendungen wie Photoshop, Illustrator oder in Apps erstellt wurden. Sie können kreative Elemente aus verschiedenen Dreamweaver-Projekten durchsuchen, verwalten und auf diese zugreifen, wann immer Sie sie benötigen. 

Wenn Sie Elemente aus Creative Cloud Libraries einfügen, können Sie angeben, dass die Verknüpfung zwischen dem Element und der Quelle beibehalten werden soll, sodass Ihre Elemente immer auf dem aktuellen Stand sind.

Im neuen Bedienfeld „CC Libraries“ von Dreamweaver können Sie die Elemente in Ihren Creative Cloud-Bibliotheken anzeigen und in Ihre Webseiten einfügen. Fügen Sie die Elemente in der Live-Ansicht oder über Codehinweise direkt in der Codeansicht ein.

Ausführliche Informationen finden Sie unter Creative Cloud Libraries in Dreamweaver.

Integration mit Adobe Stock

Durch die Integration mit Adobe Stock können Sie kostenlose Bilder, Vektorgrafiken und Videos direkt in Creative Cloud Libraries hineinladen und Ihre Adobe Stock-Inhalte von Dreamweaver aus verwalten und wiederverwenden.

Finden Sie die perfekten Bilder, Grafiken und Videos in Adobe Stock, um Ihrer Webseite ein optisches Erscheinungsbild zu verleihen, das Ihre Zielgruppe anspricht – direkt aus Dreamweaver heraus.

Verbesserungen beim Responsive Design

• Bootstrap-Verbesserungen
• Verbesserungen bei der visuellen Medienabfrage

Bootstrap-Verbesserungen

Unterstützung für Bootstrap, Version 3.3.5

Die in Dreamweaver verwendete Bootstrap-Version wurde auf 3.3.5 aktualisiert. Daher liegen Bootstrap-Komponenten, -Snippets sowie -Startvorlagen jetzt in Version 3.3.5 vor. 

Die jQuery-Version wurde ebenfalls auf 1.11.3 aktualisiert.

Zeilen und Spalten duplizieren

Zusätzlich zu den Funktionen zum Hinzufügen von Spalten und Zeilen für Bootstrap-Dokumente in der Live-Ansicht unterstützt Dreamweaver jetzt auch das Duplizieren von Zeilen und Spalten.

Sie können eine ausgewählte Zeile oder Spalte duplizieren, indem Sie unten rechts auf das Symbol zum Duplizieren () klicken. Die gesamte Zeile bzw. Spalte wird zusammen mit ihrem Inhalt kopiert.

Verbesserungen beim Bootstrap-Arbeitsablauf für die Dokumenterstellung

Unabhängig davon, ob Sie ein Bootstrap-Dokument über das Dialogfeld „Neues Dokument“ oder aus einer Startvorlage erstellen, verläuft der Arbeitsablauf jetzt nahtlos. Im Gegensatz zu früheren Versionen von Dreamweaver, werden keine Dialogfelder („Abhängige Dateien kopieren“ und „Vorhandene Dateien überschreiben“) mehr angezeigt.

Wenn Sie ein Bootstrap-Dokument an einem bestimmten Speicherort erstellen und speichern, werden auch die abhängigen Dateien automatisch an diesem Speicherort gespeichert.

Verbesserungen bei der visuellen Medienabfrage

• Markierung der aktuellen Haltepunktwerte
• Verbesserungen beim Arbeitsablauf zum Hinzufügen von Medienabfragen
• Verbesserungen bei der Bearbeitung von Haltepunkten

Markierung der aktuellen Haltepunktwerte

In Dreamweaver werden die Medienabfragen, die mit der aktuellen Anzeigengröße verbunden sind, jetzt hervorgehoben, damit Sie sie schnell erkennen können. Die Markierung erfolgt in Form von dunkleren Pfeilen und einem dunklen Hintergrund für die Haltepunktwerte der Medienabfragen.

Verbesserungen beim Arbeitsablauf zum Hinzufügen von Medienabfragen

Wenn Sie jetzt in der Leiste für visuelle Medienabfragen auf „+“ klicken, werden Sie nicht von Dreamweaver aufgefordert, auf die Option „max-width“ oder „min-width“ zu klicken. Stattdessen wird das Popup zum Hinzufügen der Medienabfrage sofort angezeigt. 

Im Popup ist außerdem standardmäßig die Option „max-width“ ausgewählt. In einer neuen Dropdownliste können Sie die Option in „min-width“ oder „min-max“ ändern. 

Verbesserungen bei der Bearbeitung von Haltepunkten

Sie können die Medienabfragewerte jetzt bearbeiten, indem Sie auf der Leiste für visuelle Medienabfragen auf die Haltepunktwerte doppelklicken. Wenn Sie auf einen Haltepunktwert doppelklicken, wird ein orangefarbener Rahmen angezeigt und die Einfügemarke befindet sich innerhalb des Rahmens.

Nachdem Sie die neuen Werte (in Pixel) eingegeben haben, drücken Sie die Eingabetaste, um die Änderungen zu bestätigen, oder drücken die Esc-Taste, um sie zu verwerfen.

Anzeige der Zeilennummer bei der Option „Gehe zu Code“

Im Kontextmenü von „Visuelle Medienabfragen“ wird nun bei der Option „Gehe zu Code“ die Zeilennummer angezeigt, sodass Sie den zugehörigen Code schneller finden können.

Verbesserungen bei Extract

• Unterstützung für mehrere Zeichenflächen
• Unterstützung für das Extrahieren von Schlagschatten
• Tipps zum Arbeiten mit nicht unterstützten Ebenenstilen

Unterstützung für mehrere Zeichenflächen

Sie können im Bedienfeld „Extract“ in Dreamweaver jetzt PSD-Dateien mit mehreren Zeichenflächen öffnen, um Elemente zu extrahieren. Jede Zeichenfläche wird als Ordner im Ebenenbereich angezeigt. Sie können den Ordner erweitern oder reduzieren, um den Inhalt anzuzeigen oder auszublenden.

Wenn Sie eine bestimmte Zeichenfläche vergrößern möchten, klicken Sie einfach auf den Namen der Zeichenfläche.

Doppelklicken Sie oben im Bedienfeld auf „Anpassen“, um die Zeichenfläche zu verkleinern und die PSD-Datei in die aktuelle Ansicht einzupassen.

Unterstützung für das Extrahieren von Schlagschatten

Wenn Sie CSS-Code aus einer PSD-Datei mit der Schlagschatteneigenschaft extrahieren, wird die Eigenschaft jetzt als „box-shadow“ in CSS extrahiert.

Tipps zum Arbeiten mit nicht unterstützten Ebenenstilen

In vielen Fällen erstellen Sie mehrere Ebenenstile in einer PSD-Datei, die jeweils einzeln funktionieren, nicht jedoch in Kombination miteinander. Extract überprüft derartige Fälle und bietet Vorschläge zum Umgang mit diesen Ebenenstilen.

Extract erkennt die folgenden Fälle:

• Szenario 1: Mehrere Instanzen von Eigenschaften, die in Hintergrundfarben übersetzt werden. Beispiel: Zwei Farbüberlagerungen oder zwei Verlaufsüberlagerungen, die in der PSD-Datei definiert sind.
• Szenario 2: Eine Farbüberlagerung mit einer Deckkraft von weniger als 100 % wird über einer Verlaufsüberlagerung platziert oder der Ebene wird eine Hintergrundfarbe zugewiesen. In einem solchen Fall ist es schwierig, die gemischte endgültige Farbe zu bestimmen.
  
• Szenario 3: Eine Verlaufsüberlagerung hat eine Deckkraft von weniger als 100 % und der Ebene wurde eine Hintergrundfarbe zugewiesen. In einem solchen Fall ist es ebenfalls schwierig, die gemischte endgültige Farbe zu bestimmen.
  

Wenn diese Fälle erkannt werden, zeigt Extract ein Warnsymbol über der Ebenenminiatur im Bedienfeld „Extract“ an. Die folgende Warnung wird im Popup für die Ebenenminiatur und im CSS für diese Ebene angezeigt:

„Diese Ebene enthält mehrere Ebenenstile, die in CSS nicht dargestellt werden können. Verwenden Sie die Farbauswahl oder extrahieren Sie die Ebene als Bild.“

Außerdem werden in Fällen, in denen eine halbtransparente Hintergrundfarbe eine andere Hintergrundfarbe überlagert (Szenario 2 und 3 oben), die Werte für alle Hintergrundfarben im CSS angezeigt. Sie können dann den erforderlichen Wert extrahieren.

Verbesserungen bei der Bearbeitung in der Live-Ansicht

• Verbesserungen beim Bearbeiten von Tabellen
• Direkt-Eigenschafteninspektor für Text
• Änderungen am Direkt-Eigenschafteninspektor für Bilder

Verbesserungen beim Bearbeiten von Tabellen

Zeilen oder Spalten mit einem Klick auswählen

Sie können jetzt in der Live-Ansicht die Zeilen und Spalten einer Tabelle mit nur einem Mausklick auswählen. Es wurde ein neues Pfeilsymbol hinzugefügt (ähnlich wie in der Entwurfsansicht). Klicken Sie auf dieses Symbol, um eine Zeile oder Spalte auszuwählen.

Auswählen mehrerer Zellen durch Ziehen

Sie können jetzt mehrere Zellen, Zeilen oder Spalten durch Ziehen auswählen. Klicken Sie in eine Zelle und ziehen Sie dann den Mauszeiger über weitere Zellen, Zeilen oder Spalten, um diese auszuwählen.

Zeilen oder Spalten mit der Entf-Taste löschen

Sie können nun Zeilen oder Spalten löschen, indem Sie sie auswählen und anschließend die Entf-Taste oder die Rücktaste drücken.

Direkt-Eigenschafteninspektor für Text

Sie können den Direkt-Eigenschafteninspektor für Text jetzt in der Live-Ansicht verwenden, um Text schnell zu formatieren, einzurücken und Links zu erstellen. Der Direkt-Eigenschafteninspektor wird angezeigt, wenn Sie auf das Ordnersymbol für die Textelemente h1-h6, pre oder p klicken.

• Mit der Formatoption können Sie das Elementtag schnell auf eines der folgenden Tags festlegen: h1-h6, p und pre. 
• Mit der Verknüpfungsoption können Sie einen Hyperlink für den Text festlegen. 
• Mit den Symbolen für fett und kursiv können Sie dem Textelement die Tags <strong> und <em> hinzufügen.
• Die Symbole für Blockquotes helfen Ihnen beim Festlegen oder Entfernen von Texteinrückungen. Das zugehörige Tag wird dabei in den Code eingefügt bzw. entfernt.
  

In Bootstrap-Dokumenten können Sie mit dem Direkt-Eigenschafteninspektor für Text Textelemente auch ausrichten und transformieren.

• Ausrichten: Hiermit werden Bootstrap-Textelemente linksbündig, zentriert, rechtsbündig oder im Blocksatz ausgerichtet, indem die entsprechenden Klassen angewendet werden.
• Transformieren: Hiermit wird die Groß-/Kleinschreibung eines Elements geändert, indem Klassen für Kleinbuchstaben, Großbuchstaben oder gemischte Groß- und Kleinschreibung angewendet werden.

Änderungen am Direkt-Eigenschafteninspektor für Bilder

Der Direkt-Eigenschafteninspektor für Bilder enthält jetzt Optionen, mit denen Sie Bilder in den Bootstrap-Dokumenten anpassen können.

• Auf Form beschränken: Klicken Sie hier, um die Ecken von Bildern so anzupassen, dass sie eine bestimmte Form aufweisen, z. B. kreisförmig, mit abgerundeten Ecken oder als Miniaturbild.
• Bild responsiv machen: Klicken Sie hier, um Responsive-Bilder zu erstellen, sodass sie automatisch an verschiedene Bildschirmgrößen angepasst werden.

In-App-Updates

Adobe stellt regelmäßig Updates bereit, um Dreamweaver auf dem aktuellen Stand hinsichtlich sich ständig weiterentwickelnder Technologien zu halten, z. B. durch Updates der Bootstrap-Bibliotheken oder Startvorlagen.

Sie können In-App-Updates automatisch oder manuell herunterladen und installieren. Sie können diese auch deaktivieren oder deinstallieren und Dreamweaver bei Bedarf auf den Zustand der letzten Installation oder Aktualisierung über den Adobe Creative Cloud-Client zurücksetzen. Verwenden Sie das Dreamweaver-Dialogfeld „Voreinstellungen“, um den Modus „Aktualisieren“, „Deaktivieren“ oder „Zurücksetzen“ für In-App-Updates festzulegen.

Weitere Informationen zu In-App-Updates finden Sie unter In-App-Updates.

Verbesserter Arbeitsablauf für Testserver

In der vorigen Version (Dreamweaver CC 2015) wurde die automatische Übertragung von Dateien auf den Testserver eingeführt, damit dynamische Dokumente in der Live-Ansicht nahtlos bearbeitet werden können. Auf Wunsch vieler Benutzer wurde eine neue Voreinstellung hinzugefügt, mit der diese Funktion deaktiviert werden kann. Diese Option finden Sie im Dialogfeld „Site-Definition“.

Weitere Informationen finden Sie unter Automatische Übertragung von dynamischen Dateien deaktivieren.

Ausgewählten Code ausblenden

Es ist nun wieder möglich, ausgewählte Codeblöcke auszublenden. Sie haben jetzt folgende Möglichkeiten:

• Sie können Code auf Tagebene ausblenden wie in der vorigen Version von Dreamweaver und/oder
• Sie können einen Teil des Codes ausblenden, indem Sie diesen auswählen

Klicken Sie zum Ausblenden des Codes auf „-“. Um einen ausgeblendeten Bereich des Codes zu erweitern, klicken Sie auf „+“.

Weitere Informationen zum Ausblenden von Code finden Sie unter Code ausblenden.

Verbesserungen beim CSS Designer

• Anordnen von Selektoren
  
• Bereiche im CSS Designer behalten benutzerdefinierte Größen bei
• Eigenschaften-Bedienfeld für Bootstrap-Dateien deaktiviert
• Veraltete APIs

Anordnen von Selektoren

Sie können Selektoren im Bereich „Selektoren“ jetzt neu anordnen, indem Sie sie an die gewünschte Position im Bereich ziehen.

Bereiche im CSS Designer behalten benutzerdefinierte Größen bei

Wenn Sie die Bereiche im CSS Designer reduzieren oder erweitern, werden die Größen der Bereiche für die Dauer einer Sitzung gespeichert. Quell- und Medienbereich behalten die benutzerdefinierten Größen bei, bis Sie die Größen wieder ändern.

Eigenschaften-Bedienfeld für Bootstrap-Dateien deaktiviert

In Bootstrap-Dateien, in denen Stile in schreibgeschützten Bootstrap-CSS-Dateien definiert sind, wird das Eigenschaftenfenster im CSS Designer deaktiviert.

Rückgängig/Wiederholen für das aktive Dokument

Die Aktionen „Rückgängig“ und „Wiederholen“ können jetzt auf aktive Dokumente beschränkt werden.

Standardmäßig betreffen die Aktionen „Rückgängig“ und „Wiederholen“ das aktuell aktive Dokument und alle damit verbundenen Dateien, z. B. die zugehörigen CSS-Dateien. Wenn Sie die Aktionen „Rückgängig“ und „Wiederholen“ auf das aktive Dokument beschränken, wird „Rückgängig“ bzw. „Wiederholen“ nur auf die Änderungen in der Datei angewendet, die gerade den Fokus besitzt. Beispielsweise wirken sich die Aktionen „Rückgängig“/„Wiederholen“ in einer HTML-Datei nur auf Änderungen aus, die Sie in der HTML-Datei und nicht in der zugehörigen CSS-Datei vorgenommen haben. Um Änderungen, die Sie an einer zugehörigen CSS-Datei vorgenommen haben, rückgängig zu machen bzw. zu wiederholen, müssen Sie zunächst zu der CSS-Datei wechseln.

Wenn der Fokus auf der Live- oder Entwurfsansicht liegt, wird „Rückgängig“/„Wiederholen“ nur für die Änderungen angewendet, die den HTML-Code betreffen. Angenommen, Sie bearbeiten eine Bootstrap-Seite in der Live-Ansicht. Sie ändern Text und die Größe der Medienabfrage in der Leiste für visuelle Medienabfragen. Sie können nur die Textbearbeitung rückgängig machen und nicht die Medienabfrageänderungen, da diese Änderungen in einer zugehörigen Datei und nicht in der HTML-Datei erfolgt sind. Sie können jedoch zur entsprechenden CSS-Datei wechseln und die Änderungen dort rückgängig machen.

Um die Aktionen „Rückgängig“ und „Wiederholen“ auf das aktuelle Dokument zu beschränken, führen Sie die folgenden Schritte aus:

Verbesserungen beim DOM-Bedienfeld

Sie können jetzt über das Kontextmenü im Bedienfeld ein Tag im DOM-Bedienfeld eines Dokuments kopieren und in das DOM-Bedienfeld eines anderen Dokuments einfügen.

Option zum Zurücksetzen der Anleitungen für neue Funktionen

Anleitungen für neue Funktionen – Funktions-Popups und kontextbezogene Funktionstipps – werden nach dem Update beim ersten Start von Dreamweaver automatisch angezeigt. Über Funktions-Popups lernen Sie neue Funktionen im Update kennen. In kontextbezogenen Funktionstipps erhalten Sie Hinweise auf neue Arbeitsabläufe und verbesserte Funktionen.

Nach dem ersten Start von Dreamweaver werden diese Anleitungen für neue Funktionen unterdrückt und standardmäßig nicht angezeigt. Um sie wieder anzuzeigen, verwenden Sie die Option „Zurücksetzen“ in den Dreamweaver-Voreinstellungen.

Update für die W3C-Überprüfung

Dreamweaver verwendet jetzt den neuen Überprüfungsdienst des W3C, der auch HTML5 umfasst: https://validator.w3.org/nu/. Der bisherige Überprüfungsdienst validator.w3.org wird nicht mehr verwendet.

Der neue Überprüfungsdienst unterstützt die folgenden Parser:

Wie in der vorigen Version von Dreamweaver können Sie den Ersatzparser angeben, der von Dreamweaver verwendet wird, wenn der Parser nicht anhand des Inhaltstyps des Dokuments oder der DTD ermittelt werden kann. Mit der neuen Überprüfung hat sich nur die Liste der verfügbaren Parser geändert.

Weitere Informationen finden Sie unter Dokumente mit der W3C-Überprüfung überprüfen.

Unterstützung für SVG-Dateien im Bedienfeld „Elemente“

Im Bedienfeld „Elemente“ werden jetzt alle SVG-Elemente der Dreamweaver-Site angezeigt, die dem jeweils aktiven Dokument zugeordnet sind. Wie für jedes andere Element im Bedienfeld „Elemente“ können Sie für SVG-Elemente verschiedene Aktionen ausführen wie beispielsweise Bearbeiten, Zuweisen von URLs und Wiederverwenden von Elementen in anderen Dokumenten und Sites.

Änderungen bei den Zoomoptionen

Die folgenden Zoomaktionen sind in der Live-Ansicht und der Entwurfsansicht von Dreamweaver nicht mehr verfügbar:

Windows

• Drehen des Mausrads bei gedrückter Strg-Taste
• Bildlauf auf dem Trackpad bei gedrückter Strg-Taste

Mac

• Drehen des Mausrads bei gedrückter Befehlstaste
• Bildlauf auf dem Trackpad bei gedrückter Befehlstaste

Die anderen Zoomfunktionen für Dokumente haben sich nicht geändert: Strg-/Befehlstaste+„+“ oder Strg-/Befehlstaste+„–“ sowie Zoomen über das Menü „Ansicht“ > „Vergrößerung“.

Änderungen im Menü „Ansicht“

Die Option „Split Code“ im Menü „Ansicht“ wurde in „Teilen“ umbenannt und die Option „Code und Live“ in „Codeteilung“. Sie haben dieselbe Funktion wie die entsprechenden Optionen in der Dokumentsymbolleiste.

Schnellere Synchronisierung von Dreamweaver-Einstellungen mit Creative Cloud

Durch verschiedene Leistungsverbesserungen bei den Synchronisierungsfunktionen können Sie nun schneller als je zuvor Einstellungen zwischen Dreamweaver-Instanzen und Creative Cloud synchronisieren.  

Ehemaliges Bedienfeld „CSS-Stile“ und veraltete APIs

Das frühere Bedienfeld „CSS-Stile“ wurde aus Dreamweaver entfernt. Daher wurden auch die zugehörigen APIs entfernt.

Die folgenden grundlegenden APIs sind nach wie vor verfügbar:

• dreamweaver.cssRuleTracker.newRule()

• dreamweaver.cssStylePalette.getStyles()

• dreamweaver.cssStylePalette.editStyleSheet()

• dreamweaver.cssStylePalette.attachStyleSheet()

• dreamweaver.cssStylePalette.getMediaType()

• dreamweaver.cssStylePalette.setMediaType()

• dreamweaver.cssStylePalette.getDisplayStyles()

• dreamweaver.cssStylePalette.setDisplayStyles()

• dreamweaver.cssStylePalette.newStyle()

Die folgenden APIs werden in Zukunft nicht mehr unterstützt:

• dreamweaver.cssRuleTracker.editSelectedRule()

• dreamweaver.cssRuleTracker.canEditSelectedRule()

• dreamweaver.cssStylePalette.getSelectedStyle()

• dreamweaver.cssStylePalette.editSelectedStyle()

• dreamweaver.cssStylePalette.editSelectedStyleInCodeview()

• dreamweaver.cssStylePalette.renameSelectedStyle()

• dreamweaver.cssStylePalette.applySelectedStyle()

• dreamweaver.cssStylePalette.duplicateSelectedStyle()

• dreamweaver.cssStylePalette.deleteSelectedStyle()

• dreamweaver.cssStylePalette.canEditSelectedStyle()

• dreamweaver.cssStylePalette.canEditSelectedStyleInCodeview()

• dreamweaver.cssStylePalette.canRenameSelectedStyle()

• dreamweaver.cssStylePalette.canDuplicateSelectedStyle()

• dreamweaver.cssStylePalette.canDeleteSelectedStyle()

• dreamweaver.cssStylePalette.canApplySelectedStyle()

• dreamweaver.canDisableSelectedStyle()

• dreamweaver.canEnableAllDisabled()

• dreamweaver.canDeleteAllDisabled()

• dreamweaver.getSelectedStyleIsDisabled()

• dreamweaver.setSelectedStyleIsDisabled()

• dreamweaver.enableAllDisabled()

• dreamweaver.deleteAllDisabled()