Versionen von Dreamweaver CC 2015
Übersicht über die neuen Funktionen

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.

Adobe Dreamweaver CC, Version 2015.3

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 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.
Zusammenhängende Auswahl im DOM-Bedienfeld
Zusammenhängende Auswahl im DOM-Bedienfeld

Nicht zusammenhängende Auswahl im DOM-Bedienfeld
Nicht zusammenhängende Auswahl im DOM-Bedienfeld


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 (#).

Bearbeiten von Tags im DOM-Bedienfeld
Bearbeiten von Tags im DOM-Bedienfeld

Bearbeiten oder Hinzufügen von Klassen im DOM-Bedienfeld
Bearbeiten oder Hinzufügen von Klassen im DOM-Bedienfeld

Bearbeiten und Hinzufügen von IDs im DOM-Bedienfeld
Bearbeiten und Hinzufügen von IDs im DOM-Bedienfeld

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“.
Ein div-Platzhalter-Tag wird eingefügt und im Bearbeitungsmodus angezeigt. Sie können den gewünschten Tag-Namen anstelle des div-Tags eingeben.
Einfügeoptionen im DOM-Bedienfeld
Einfügeoptionen im DOM-Bedienfeld

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

Hellblau unterlegter untergeordneter Knoten bei ausgewähltem übergeordnetem Knoten
Hellblau unterlegter untergeordneter Knoten bei ausgewähltem übergeordnetem Knoten

Untergeordneter Knoten mit gleicher Farbe wie der übergeordnete
Untergeordneter Knoten mit gleicher Farbe wie der übergeordnete


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.

Bestätigungsmeldung für das Laden von Bibliotheken von Drittanbietern
Bestätigungsmeldung für das Laden von Bibliotheken von Drittanbietern

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.

Festlegen der Einheit beim Hinzufügen einer Medienabfrage
Festlegen der Einheit beim Hinzufügen einer Medienabfrage

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.

Dialogfeld „Neu auflösen“ in Dreamweaver CC 2015.2
Dialogfeld „Neu auflösen“ in Dreamweaver CC 2015.2

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.

Neue E-Mail-Startvorlagen in Dreamweaver CC 2015.2
Neue E-Mail-Startvorlagen in Dreamweaver CC 2015.2

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.

Bearbeitungsoptionen für Tabellenzellen in der Live-Ansicht
Bearbeitungsoptionen für Tabellenzellen in der Live-Ansicht

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:

Begrüßungsbildschirm in Dreamweaver CC 2015.2
Begrüßungsbildschirm in Dreamweaver CC 2015.2

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. 

Bedienfeld „CC Libraries“ in Dreamweaver
Bedienfeld „CC Libraries“ in Dreamweaver

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.

Bilder auf Adobe Stock suchen und kaufen
Bilder auf Adobe Stock suchen und kaufen

Verbesserungen beim Responsive Design

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.

Hinweis:

Mit der Option zum Hinzufügen von Zeilen oder Spalten wird die Zeile bzw. Spalte mit den Klassen, aber ohne den Inhalt dupliziert.

Option zum Duplizieren von Zeilen und Spalten in Bootstrap-Dokumenten
Option zum Duplizieren von Zeilen und Spalten in Bootstrap-Dokumenten

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

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.

Aktive Medienabfragen und inaktive Medienabfragen (oben hervorgehoben)
Aktive Medienabfragen und inaktive Medienabfragen (oben hervorgehoben)

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. 

Änderungen beim Hinzufügen von Medienabfragen
Änderungen beim Hinzufügen von Medienabfragen

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.

Haltepunktwert „768px“ im Bearbeitungsmodus mit einem orangefarbenen Rahmen
Haltepunktwert „768px“ im Bearbeitungsmodus mit einem orangefarbenen Rahmen

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.

Zeilennummern für den zugehörigen Code von visuellen Medienabfragen
Zeilennummern für den zugehörigen Code von visuellen Medienabfragen

Verbesserungen bei Extract

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

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.

  1. Wählen Sie die Tabelle aus, um die Elementanzeige mit dem Ordnersymbol anzuzeigen.

  2. Klicken Sie auf das Ordnersymbol, um in den Modus zur Formatierung von Tabellen zu wechseln.

  3. Bewegen Sie den Mauszeiger über die Zeile oder Spalte, die Sie auswählen möchten. Zeigen Sie mit dem Mauszeiger auf den äußersten Rand der Zeile bzw. Spalte, sodass ein Pfeil angezeigt wird. Dieser gibt an, dass Sie zum Auswählen jetzt klicken können.

  4. Klicken Sie, um die Zeile oder Spalte auszuwählen.

    Auswählen einer Tabellenzeile in der Live-Ansicht
    Auswählen einer Tabellenzeile in der Live-Ansicht

    Auswählen einer Tabellenspalte
    Auswählen einer Tabellenspalte in der Live-Ansicht

  5. Bearbeiten Sie die Zeile oder Spalte nach Bedarf mithilfe des Kontextmenüs.

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.

  1. Wählen Sie die Tabelle aus, um die Elementanzeige mit dem Ordnersymbol anzuzeigen.

  2. Klicken Sie auf das Ordnersymbol, um in den Modus zur Formatierung von Tabellen zu wechseln.

  3. Ziehen Sie den Mauszeiger, um die gewünschten Zeilen und Spalten auszuwählen.

    Auswählen mehrerer Zellen durch Ziehen
    Auswählen mehrerer Zellen durch Ziehen

  4. Bearbeiten Sie die Zeile oder Spalte nach Bedarf mithilfe des Kontextmenüs.

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.

Direkt-Eigenschafteninspektor für Text
Direkt-Eigenschafteninspektor für Text

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

Direkt-Eigenschafteninspektor für Text in Bootstrap-Dokumenten
Direkt-Eigenschafteninspektor für Text in Bootstrap-Dokumenten

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

Direkt-Eigenschafteninspektor für Text in Bootstrap-Dokumenten
Direkt-Eigenschafteninspektor für Text in Bootstrap-Dokumenten

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

Voreinstellungen für In-App-Updates
Voreinstellungen für 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.

Automatische Übertragung von dynamischen Dateien deaktivieren
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
Wenn Sie einen Codeblock auswählen, wird die Option, den Code auszublenden, wie folgt angezeigt:
Ausgewählten Code ausblenden
Per Klick auf „-“ wird der Code ausgeblendet

Ausgewählten Code ausblenden
Per Klick auf „+“ wird der Code eingeblendet


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

Klicken Sie zum Ausblenden des Codes auf „-“. Um einen ausgeblendeten Bereich des Codes zu erweitern, klicken Sie auf „+“. 
Klicken Sie zum Ausblenden des Codes auf „-“. Um einen ausgeblendeten Bereich des Codes zu erweitern, klicken Sie auf „+“. 
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

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

Anordnen von Selektoren in CSS Designer
Anordnen von Selektoren in CSS Designer

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.

Hinweis:

Wenn Sie die Stile des Bootstrap-Dokuments bearbeiten möchten, erstellen Sie eine andere CSS-Datei, in der Sie die vorhandenen Stile überschreiben, und fügen die Datei an das Dokument an.

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:

  1. Klicken Sie auf „Bearbeiten“ > „Voreinstellungen“ (Windows) bzw. „Dreamweaver“ > „Voreinstellungen“ (Mac).

  2. Aktivieren Sie in der Kategorie „Allgemein“ unter „Bearbeitungsoptionen“ die Option „Rückgängigmachen auf das aktive Dokument beschränken“.

    Rückgängig und Wiederholen auf das aktive Dokument beschränken
    Rückgängig und Wiederholen auf das aktive Dokument beschränken

  3. Klicken Sie auf „Anwenden“ und schließen Sie dann das Dialogfeld „Voreinstellungen“.

  4. Starten Sie Dreamweaver neu, damit die Änderungen wirksam werden.

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.

Hinweis:

Nur aus dem DOM-Bedienfeld kopierte Tags können in einem anderen DOM-Bedienfeld eingefügt werden. Wenn Sie ein Tag in der Live-Ansicht kopieren, kann es nur in der Live-Ansicht und nicht im DOM-Bedienfeld eingefügt werden.

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.

 

  1. Klicken Sie auf „Hilfe“ > „Anleitungen für neue Funktionen zurücksetzen“. Das Dialogfeld „Voreinstellungen“ wird angezeigt.

  2. Wählen Sie nach Bedarf die Option „Zurücksetzen“ für Funktions-Popups und/oder kontextbezogene Funktionstipps.

  3. Schließen Sie die Voreinstellungen und beenden Sie Dreamweaver.

  4. Starten Sie Dreamweaver neu. Die Anleitungen für neue Funktionen werden jetzt wieder angezeigt.

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:

Wert Beschreibung
Ohne HTML- oder XML-Parser je nach „Content-Type“
xml XML-Parser, externe Entitys werden nicht geladen
xmldtd XML-Parser, externe Entitys werden geladen
html HTML-Parser, Konfiguration je nach „doctype“.
html5 HTML-Parser im Modus „HTML5“
html4 HTML-Parser im Modus „HTML4 strict“
html4tr HTML-Parser im Modus „HTML4 transitional“

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.

Voreinstellungen für die W3C-Überprüfung
Voreinstellungen für die W3C-Überprüfung

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.

SVG-Elemente im Bedienfeld „Elemente“
SVG-Elemente im Bedienfeld „Elemente“

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

Menü „Ansicht“ vor Dreamweaver CC 2015.1
Menü „Ansicht“ vor Dreamweaver CC 2015.1

Menü „Ansicht“ in Dreamweaver CC 2015.1
Menü „Ansicht“ in Dreamweaver CC 2015.1


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

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