Erfahren Sie mehr über das Anzeigen einer Vorschau für Webseiten auf mehreren Geräten, Bootstrap-Integration, Verbesserungen bei der Codeansicht und neue Funktionen in Dreamweaver.

Der Schwerpunkt beim Release 2015 von Dreamweaver CC liegt auf Responsive Webdesign, Verbesserungen der Codebearbeitungsfunktionen, einer optimierten Vorschau von Webseiten auf Geräten sowie der Stapelverarbeitung beim Extrahieren von weboptimierten Bildern mit mehreren Auflösungen aus Photoshop-Kompositionen. Die Integration in das Bootstrap-Framework unterstützt Sie beim Erstellen von Responsive-Websites mit Priorisierung von Mobilgeräten. Visuelle Medienabfragen ergänzen die Funktionen für Responsive Webdesign, indem Sie Ihr Design an unterschiedlichen Haltepunkten visualisieren und ändern können. 

Dieses Release umfasst auch einige Verbesserungen an den Bearbeitungsfunktionen in der Live-Ansicht und im CSS Designer. In diesem Artikel werden diese neuen Funktionen und Verbesserungen vorgestellt. Außerdem finden Sie hier Links zu weiteren Hilfe- und Trainingsressourcen.

download

Mit dem Patch für den Release 2015 von Dreamweaver CC, der im Juli veröffentlicht wurde, ist es möglich, in Dreamweaver die Proxyserver-Einstellungen zu verwenden, die im Adobe Creative Cloud-Client angegeben wurden. Weitere Informationen finden Sie unter Proxyserver-Einstellungen festlegen.


Gerätevorschau

Mit Dreamweaver können Sie jetzt ihre produktionsreifen Webseiten auf mehreren Geräten gleichzeitig testen. So können Sie die Darstellung Ihrer Webseite mit unterschiedlichen Formfaktoren prüfen und interaktive Funktionen auf Ihren Seiten testen. Hierzu müssen Sie weder eine mobile App installieren noch eine physische Verbindung der Geräte mit Ihrem Desktop herstellen. Scannen Sie einfach den automatisch generierten QR-Code mit Ihren Geräten, um eine Vorschau Ihrer Webseiten anzuzeigen.

Wenn Sie die Live-Überprüfung auf dem Desktop aktivieren, werden Änderungen auf allen verbundenen Geräten übernommen und Sie können verschiedene Elemente überprüfen oder das Design nach Bedarf anpassen.

Ausführliche Informationen finden Sie unter Webseitenvorschau und -prüfung auf mehreren Geräten.

Visuelle Medienabfragen

Die Leisten für visuelle Medienabfragen sind eine visuelle Darstellung der auf einer Seite vorhandenen Medienabfragen. Mit diesen Leisten können Sie Ihre Webseite an verschiedenen Haltepunkten und das Layout unterschiedlicher Komponenten der Webseite in verschiedenen Viewports darstellen. Während Sie die Seite in verschiedenen Viewports anzeigen, können Sie Änderungen am Design vornehmen, die für einen Viewport spezifisch sind, ohne das Seitendesign in anderen Viewports zu beeinflussen.

Visuelle Medienabfragen bestehen aus drei horizontalen Leisten, die jeweils eine Kategorie von Medienabfragen darstellen:

  •  Grün: Medienabfragen mit max-width-Bedingungen
  •  Blau: Medienabfragen mit min-width- und max-width-Bedingungen
  •  Lila: Medienabfragen mit min-width-Bedingungen
Visuelle Medienabfragen
Visuelle Medienabfragen

Weitere Informationen finden Sie unter Visuelle Medienabfragen.

Unterstützung für Code-Linting

In dieser neuen Version von Dreamweaver können Sie jetzt mithilfe von Linting häufige Fehler im Code ermitteln. Als Linting wird das Analysieren von Code bezeichnet, um potenzielle Fehler und verdächtige Codeabschnitte zu kennzeichnen. In Dreamweaver kann das Linting von HTML-, CSS- und JavaScript-Dateien ausgeführt werden, wenn sie geladen, gespeichert oder bearbeitet werden. Anschließend werden die Fehler und Warnungen im Ausgabe-Bedienfeld aufgeführt.

Weitere Informationen finden Sie unter Code-Linting.

Das Ausgabe-Bedienfeld mit Linting-Ergebnissen
Das Ausgabe-Bedienfeld mit Linting-Ergebnissen

Emmet-Unterstützung

Gehören Sie zu den Entwicklern, die viel Code in Dreamweaver von Hand eingeben? Mit Emmet-Abkürzungen für Code können Sie Zeit sparen. Diese Abkürzungen sind leicht zu merken und einzugeben und werden in der Codeansicht zu vollständigem Code erweitert, sobald Sie die Tabulatortaste drücken.

Ausführliche Informationen finden Sie unter Code mit Emmet einfügen.

Vorschau in der Codeansicht

Wenn Sie in der geteilten Ansicht arbeiten, können Sie alle Änderungen an Bildern oder Farben sofort in der Live-Ansicht oder Entwurfsansicht sehen. Wenn Sie nur in der Codeansicht arbeiten möchten, werden die Bilder nur als Dateinamen dargestellt und sind daher meistens nicht auf einen Blick zu erkennen. Farben (mit Ausnahme vordefinierter Farben) werden ebenfalls als unverständliche Zahlenfolgen dargestellt. In dieser Version von Dreamweaver können Sie schnell eine Vorschau von Bildern und Farben direkt in der Codeansicht anzeigen lassen. Dank dieser Funktion werden Dateinamen von Bildern und Farbformate visuell durch die tatsächlichen Bilder und Farben dargestellt. So können Sie Designentscheidungen schneller treffen und die Entwicklungsdauer erheblich verkürzen.

Weitere Informationen finden Sie unter Vorschau für Bilder und Farben in der Codeansicht.

Bildvorschau in der Codeansicht
Bildvorschau in der Codeansicht

Farbvorschau in der Codeansicht
Farbvorschau in der Codeansicht

In der Codeansicht wird auch eine Fehlervorschau angezeigt. Die Nummer der Zeile mit dem fehlerhaften Code wird rot hervorgehoben. Wenn Sie mit der Maus auf die Zahl zeigen, wird eine kurze Beschreibung des Fehlers eingeblendet.

Hinweis: Es wird nur der erste Fehler in der Zeile angezeigt. Wenn die Zeile nur eine Warnung enthält, wird eine Beschreibung der Warnung angezeigt. Wenn die Zeile eine Warnung und einen Fehler enthält, wird nur die Fehlerbeschreibung angezeigt.

Neue Codefragmente

Fragmente sind Teile von Code, die Sie in Projekten immer wieder verwenden können. Diese Version von Dreamweaver bietet neue und aktualisierte Codefragmente:

  • Boostrap-Codefragmente
  • CSS-Animationen und -Übergänge
  • CSS-Effekte
  • CSS-Codefragmente
  • HTML-Codefragmente
  • JavaScript-Codefragmente (aktualisiert)
  • PHP-Codefragmente
  • Präprozessor-Codefragmente
  • Responsive Design-Codefragmente

Weitere Informationen zur Verwendung von Codefragmenten finden Sie unter Mit Codefragmenten arbeiten.

Außerdem haben Sie jetzt die Möglichkeit, Codefragmente mithilfe der Cloud-Synchronisationsfunktion in allen Dreamweaver-Installationen auf dem neuesten Stand zu halten. Weitere Informationen zum Synchronisieren von Codefragmenten mit Creative Cloud und Ihren anderen Dreamweaver-Installationen finden Sie unter Synchronisieren von Dreamweaver-Einstellungen mit Creative Cloud.

Bootstrap-Integration

Bootstrap ist das am häufigsten verwendete kostenlose HTML-, CSS- und JavaScript-Framework zum Entwickeln von Responsive-Websites mit Priorisierung von Mobilgeräten. Das Framework enthält Responsive-CSS- und -HTML-Vorlagen für Schaltflächen, Tabellen, Navigation, Bildkarussells und andere Elemente, die Sie auf der Webseite verwenden können. Es sind auch einige optionale JavaScript-Plug-ins verfügbar, die selbst Entwicklern mit lediglich grundlegenden Codierungskenntnissen das Entwickeln großartiger Responsive-Websites ermöglichen.

Mit Dreamweaver können Sie Bootstrap-Dokumente erstellen und außerdem vorhandene Webseiten bearbeiten, die mit Bootstrap erstellt wurden. Verwenden Sie eine der Bootstrap-Startvorlagen im Dialogfeld „Neues Dokument“ („Startvorlagen“ > „Bootstrap-Vorlagen“), um mit dem Erstellen einer neuen Bootstrap-Website zu beginnen. 

  • Bootstrap – Agentur
  • Bootstrap – eCommerce
  • Bootstrap – Portfolio
  • Bootstrap – Produkt
  • Bootstrap – Immobilien
  • Bootstrap – Lebenslauf

Sie können auch ein benutzerdefiniertes Bootstrap-Dokument im Dialogfeld „Neues Dokument“ erstellen („Neues Dokument“ > „Bootstrap“). Anschließend erstellen Sie die Website Stück für Stück durch Zusammenstellen der gewünschten Bootstrap-Komponenten, wie z. B. Akkordeons und Karussells, über das Bedienfeld „Einfügen“ in Dreamweaver. Wenn Sie mit Photoshop-Kompositionen arbeiten, können Sie mit Extract Bilder, Schriften, Stile, Text und weitere Inhalte in das Bootstrap-Dokument einfügen.

Bootstrap-Dokumente erstellen
Bootstrap-Dokumente erstellen

In Dreamweaver können Sie fertige Bootstrap-Dateien und noch nicht abgeschlossene Designs bearbeiten und dabei nicht nur Codeänderungen vornehmen, sondern auch visuelle Bearbeitungsfunktionen verwenden, z. B. die Bearbeitung in der Live-Ansicht, den visuellen CSS-Designer, visuelle Medienabfragen und „Extract“, um Änderungen am Design vorzunehmen. 

Hinweis:

Für Websites, die mit einem Bootstrap-Framework vor Version 3 erstellt wurden, sind in Dreamweaver keine visuellen Bearbeitungswerkzeuge zum Ausblenden und Einblenden von Elementen und zum Bearbeiten von Zeilen und Spalten (Einfügen, Größe ändern, Offset) verfügbar.

Ausführliche Informationen finden Sie unter Arbeiten mit Bootstrap-Dateien.

Unterstützung für das Bearbeiten von Tabellen in der Live-Ansicht

Sie können Tabellen in der Live-Ansicht schnell und bequem mit einer oder mehreren der folgenden Optionen bearbeiten:

  • Formatierungsoptionen in der Elementanzeige
  • Menü „Modifizieren“ > „Tabelle“
Hinweis: Das Menü „Modifizieren“ ist jetzt in der Live-Ansicht aktiviert.
Tabellen in der Live-Ansicht bearbeiten
Tabellen in der Live-Ansicht bearbeiten


Weitere Informationen finden Sie unter Größe von Tabellen ändern und Tabellen und Zellen formatieren.

Neue Menüs in der Live-Ansicht

Die Bearbeitungsfunktionen in der Live-Ansicht wurden um die folgenden Menüs erweitert:

  • Modifizieren
  • Format
  • Befehle
  • Site
  • Option „Inhalte einfügen“ im Menü „Bearbeiten“ und im Kontextmenü

Unterstützung für jQuery UI-Elemente in der Live-Ansicht

Mit dem Bedienfeld „Einfügen“ können Sie jQuery-Widgets jetzt direkt in der Live-Ansicht einfügen. Ziehen Sie das gewünschte Element aus dem Bedienfeld „Einfügen“ in die Live-Ansicht und halten Sie die Maustaste gedrückt, um die folgenden Einfügefunktionen zu nutzen:

  • Live-Hilfslinien: Diese Hilfslinien werden angezeigt, wenn Sie mit dem Mauszeiger auf die Elemente in der Live-Ansicht zeigen, nachdem Sie das gewünschte Element aus dem Bedienfeld „Einfügen“ gezogen haben. Mit den Live-Hilfslinien können Sie Elemente oben oder unten bzw. links oder rechts von einem Element einfügen, das den Fokus besitzt.
  • DOM-Symbol: Das DOM-Symbol wird angezeigt, wenn Sie den Mauszeiger für einen Moment nicht bewegen, während die Live-Hilfslinien angezeigt werden. Klicken Sie auf das Symbol, um die DOM-Struktur in einem Popup anzuzeigen, und legen Sie das Element dann präzise an einer bestimmten Position in der Dokumentstruktur ab.
  • Positionierungsassistent: Mit dem Positionierungsassistenten können Sie das einzufügende Element vor oder hinter dem Element positionieren, das in der Live-Ansicht den Fokus besitzt, oder es darin verschachteln.

Hinweis:

Die Anzeige der oben genannten Funktionen ist abhängig von dem Element, das Sie einfügen möchten.

Weitere Informationen finden Sie unter Elemente direkt in die Live-Ansicht einfügen.

DOM-Bedienfeld

Die Elementschnellansicht wurde durch das DOM-Bedienfeld ersetzt („Windows“ > „DOM“). Das DOM-Bedienfeld bietet die gleichen Funktionen wie die Elementschnellansicht sowie weitere Optionen. Dieses Bedienfeld ist in allen Arbeitsbereichen verfügbar und wird dauerhaft angezeigt. Sie können also zwei Dokumente öffnen und gleichzeitig auf die zugehörigen DOM-Bedienfelder zugreifen.

Im DOM-Bedienfeld können Sie folgende Aktionen ausführen:

  • Ziehen Sie Elemente aus dem Bedienfeld „Einfügen“, um sie in der Dokumentstruktur präzise einzufügen.
  • Sie können Strukturelemente im Dokument kopieren, einfügen, duplizieren, verschieben oder löschen.
  • Zeigen Sie jedes Element auf der Seite im Kontext in der Dokumentstruktur an. Das Element, das den Fokus besitzt, wird im DOM-Bedienfeld hervorgehoben.

Ausführliche Informationen zur Verwendung des DOM-Bedienfelds und zum Bearbeiten der HTML-Struktur mithilfe des Bedienfelds finden Sie unter DOM-Bedienfeld.

DOM-Bedienfeld
DOM-Bedienfeld

SVG-Codehinweise in HTML-Dokumenten

In HTML-Dokumenten werden jetzt Codehinweise für alle SVG-Elemente und -Attribute unterstützt. Mit diesen Codehinweisen können Sie jetzt SVG-Elemente in der Codeansicht von HTML-Dokumenten hinzufügen, genau wie in einem SVG-Dokument.

Technologievorschau

Ab diesem Release bietet das Dreamweaver-Team eine Vorschau bestimmter Funktionen, um Feedback von den Kunden zu erhalten. Auf Grundlage des Feedbacks werden diese Funktionen weiter verbessert und als zentrale Funktionen in Dreamweaver übernommen. Sie können auf diese Funktionen über die Kategorie „Technologievorschau“ im Dialogfeld „Voreinstellungen“ zugreifen.

Die Vorschaufunktion in dieser Version ist die Codehervorhebung. Mit dieser Funktion werden alle Instanzen eines ausgewählten Texts in der Codeansicht hervorgehoben.

Führen Sie die folgenden Schritte aus, um diese Funktion zu verwenden:

  1. Wählen Sie „Voreinstellungen“ > Technologievorschau“.

  2. Aktivieren Sie „Codehervorhebung“. Klicken Sie auf „Anwenden“ und schließen Sie das Dialogfeld „Voreinstellungen“.

  3. Öffnen Sie das Dokument, in dem Sie die Codehervorhebung verwenden möchten. Sie können die Codehervorhebung in allen Dokumenttypen verwenden, z. B. HTML, JS, CSS und LESS.

  4. Doppelklicken Sie in der Codeansicht auf den Text (Tag, Wort oder Ausdruck), der hervorgehoben werden soll. 

    Alle Instanzen des ausgewählten Texts werden in der Codeansicht hervorgehoben.

Sie können zwischen den hervorgehobenen Textbereichen mit den folgenden Tastaturbefehlen navigieren:

  • Nächstes Vorkommen auswählen: F3 (Windows), Befehl+G (Mac)
  • Voriges Vorkommen auswählen: Umschalt+F3 (Windows), Befehl+Umschalt+G (Mac)

Benutzerdefinierte Vorschau in der Codeansicht mit der ShowPreview-API

In dieser Version von Dreamweaver können Sie ein Popup mit einer benutzerdefinierten Vorschau generieren, das angezeigt wird, wenn Sie mit dem Mauszeiger auf den Code in der Codeansicht zeigen. Zum Implementieren der benutzerdefinierten Vorschau verwenden Sie die neue showPreview-API sowie die vorhandene mm:browsercontrol-API. Sie können mit diesen APIs z. B. alle Parameter einer JavaScript-Funktion in der Vorschau anzeigen, wenn Sie mit dem Mauszeiger auf den Namen der Funktion zeigen.

Weitere Informationen finden Sie unter Dreamweaver-API-Referenz: Funktionen für die Codeansicht.

Codefaltung

In vorherigen Versionen von Dreamweaver mussten Sie Codeblöcke in der Codeansicht markieren und dann ausblenden. Ab dieser Version können Sie Codeblöcke ausblenden, indem Sie einfach mit der Maus auf die Zeilennummern zeigen und auf das angezeigte Dreieck klicken.

Codefaltung (Ausblenden) ist in HTML-, CSS-, LESS-, Sass-, SCSS-, JS-, PHP-, XML- und SVG-Dateien auf Grundlage von Tagblöcken verfügbar.

Beim Kopieren, Ausschneiden, Einfügen und bei Drag & Drop bleibt der Codefaltungszustand erhalten. Wenn Sie beispielsweise einen ausgeblendeten Codeblock kopieren und einfügen, wird der kopierte Text als ausgeblendeter Block eingefügt.

Im Gegensatz zur früheren Codefaltungsfunktion schließt der ausgeblendete Inhalt bei HTML-Dateien jetzt das schließende Tag mit ein und wird daher anders gerendert. Außerdem wird jetzt eine größere Anzahl der Zeichen im ausgeblendeten Codeblock angezeigt. Dies erleichtert Ihnen die ggf. Vorschau der ersten Attribute.

Ausführliche Informationen finden Sie unter Code ausblenden.

Verbesserungen bei Extract

Extract für Geräte

Geräte unterscheiden sich nicht nur in ihrer Größe, sondern auch in der Auflösung. Ihre Planung für Responsive Webdesign muss Bildversionen für mehrere Auflösungen berücksichtigen, damit diese korrekt auf unterschiedlichen Geräten gerendert werden. Es kann jedoch schwierig sein, für alle Bilder in Ihrem Projekt so viele Versionen in unterschiedlichen Auflösungen zu erstellen.

Mit Extract in Dreamweaver wird diese Aufgabe erheblich vereinfacht. Beim Extrahieren eines Bilds aus Ihrer Photoshop-Komposition im Release 2015 von Dreamweaver können Sie angeben, dass auch Versionen mit unterschiedlichen Auflösungen extrahiert werden sollen. Das Bild in Photoshop wird beim Extrahieren automatisch auf verschiedene vordefinierte Auflösungen skaliert.

Sie können diese Bilder dann in JavaScript oder Medienabfragen aufrufen, um sie abhängig vom Gerät, auf dem sie angezeigt werden, anzuzeigen. Für ein HD-Retina-Display können Sie z. B. die 2X-Version des Bildes verwenden. 

Weitere Informationen finden Sie unter Bilder aus PSD-Dateien extrahieren.

Mehrere Versionen eines Bildes mit verschiedenen Auflösungen extrahieren
Versionen mit mehreren Auflösungen eines Bildes extrahieren

Unterstützung für %-Einheiten

Im Bedienfeld „Extract“ können Sie jetzt die Breite und Höhe von Bildern in Pixel sowie in %-Werten anzeigen. Außerdem können Sie die Maße in % anzeigen.

Wenn Sie im Bedienfeld „Extract“ auf ein Element klicken, wird ein Popup angezeigt, in dem Sie zwischen Pixel und % wechseln können. Die in diesem Popup ausgewählte Einheit wird beim Anzeigen von Maßen in unterschiedlichen Elementen beibehalten.

Option „Prozent“
Option „Prozent“

Maßangaben in Prozent
Maßangaben in Prozent


Verbesserungen bei der Bearbeitung in der Live-Ansicht

Verschachteltes Einfügen in der Live-Ansicht

Sie können jetzt Elemente innerhalb anderer Elemente in der Live-Ansicht einfügen. Wenn Sie Elemente aus dem Bedienfeld „Einfügen“, dem Bedienfeld „Elemente“ oder innerhalb der Live-Ansicht ziehen und mit dem Mauszeiger auf verschiedene Elemente auf der Seite zeigen, wird jetzt zusätzlich zu Positionshilfslinien auch ein visuelles Feedback zum Verschachteln von Elementen angezeigt.

  • Positionshilfslinien: Bewegen Sie den Mauszeiger über die oberen oder die unteren 30 % des Elements.
  • Feedback zum Verschachteln: Bewegen Sie den Mauszeiger über die mittleren 40 % des Elements.
Visuelles Feedback (blau, schattierte Hervorhebung) für verschachteltes Einfügen
Visuelles Feedback (blau, schattierte Hervorhebung) für verschachteltes Einfügen

Direktes Bearbeiten von Selektoren in der Elementanzeige

Sie können jetzt einfach in der Elementanzeige auf den Namen des Selektors klicken, um ihn zu bearbeiten. Die Änderungen werden übernommen, sobald Sie auf eine beliebige Stelle auf der Seite klicken.

Änderungen an der Code-Symbolleiste

In der Code-Symbolleiste wurden die folgenden Optionen zum Ausblenden von Code entfernt:

  • Vollständiges Tag ausblenden
  • Auswahl ausblenden
Hinweis: Diese Optionen wurden aus dem Kontextmenü sowie aus dem Menü „Bearbeiten“ entfernt.
 
Sie können jetzt Code ausblenden, indem Sie mit der Maus auf die Zeilennummer zeigen und auf das angezeigte Dreieck klicken.
 
Außerdem sind die folgenden Optionen für HTML-, CSS- und JS-Dateien nicht mehr verfügbar:
  • Ungültigen Code hervorheben
  • Syntaxfehlermeldungen auf der Statusleiste
Sie können jetzt mit Linting Fehler im Code suchen. Die Linting-Ergebnisse werden im Ausgabe-Bedienfeld angezeigt.

Verbesserter CSS Designer

Modus „Alle“ und Modus „Aktuell“

CSS Designer bietet jetzt zwei unterschiedliche Modi für die Vorschau und Bearbeitung von CSS-Eigenschaften:

  • Alle: In diesem Modus werden der gesamte CSS-Code, alle Medienabfragen und Selektoren im aktuellen Dokument aufgeführt. In diesem Modus wird die Auswahl in der Entwurfs- oder Live-Ansicht nicht berücksichtigt.

Dieser Modus ist ideal, wenn Sie CSS, Medienabfragen oder Selektoren erstellen möchten.

  • Aktuell: In diesem Modus werden berechnete Stile für alle in der Entwurfs- oder Live-Ansicht ausgewählten Elemente aufgeführt. Wenn in einer CSS-Datei der Fokus auf einem Selektor liegt, werden in diesem Modus die Eigenschaften dieses Selektors angezeigt.
Dieser Modus ist ideal, wenn Sie die Eigenschaften von Selektoren bearbeiten möchten, die dem im Dokument ausgewählten Element zugeordnet sind.
Modus „Alle“ und Modus „Aktuell“ im CSS Designer
Modus „Alle“ und Modus „Aktuell“ im CSS Designer

Hinweise für Eigenschaftswerte

In Dreamweaver werden jetzt wie in der Codeansicht Codehinweise im CSS Designer angezeigt, mit denen Sie neue Eigenschaften festlegen können.

Codehinweise im CSS Designer
Codehinweise im CSS Designer

Farbcodierung für Medienabfragen

Medienabfragen im Bedienfeld „CSS Designer“ sind jetzt farbcodiert und entsprechen visuellen Medienabfragen.

  •  Grün: Medienabfragen mit max-width-Bedingungen
  •  Blau: Medienabfragen mit min-width- und max-width-Bedingungen
  •  Lila: Medienabfragen mit min-width-Bedingungen
Farbcodierung für Medienabfragen im CSS Designer
Farbcodierung für Medienabfragen im CSS Designer

Weitere Änderungen

  • Option „Nur verwendete“: Das Kontrollkästchen „Nur verwendete“ im Abschnitt „Eigenschaften“ ist jetzt beim ersten Start von Dreamweaver standardmäßig aktiviert. Alle Änderungen an dieser Option (Aktivieren oder Deaktivieren) bleiben in späteren Dreamweaver-Sitzungen erhalten.
  • Bildlauf im Bedienfeld zum Anzeigen von „Eigenschaft hinzufügen“ in der Mitte: Wenn Sie im Abschnitt „Eigenschaften“ auf „+“ klicken, wird im Bedienfeld ein Bildlauf ausgeführt, sodass sich die Zeile „Eigenschaft hinzufügen“ in der Mitte des Bedienfelds befindet. Wenn der Abschnitt „Eigenschaften“ zu klein ist, wird die Zeile „Eigenschaft hinzufügen“ unten im Bedienfeld angezeigt.
  • Hintergrundhervorhebung beim Hinzufügen einer neuen Eigenschaft: Wenn das Textfeld „Neue Eigenschaft“ den Fokus besitzt, wird die Zeile durch einen grauen Hintergrund hervorgehoben.
  • Änderung der Position der Schaltflächen „+“ und „-“: Die Schaltflächen „+“ und „-“, die in jedem Abschnitt des Bedienfelds „CSS-Designer“ angezeigt werden, wurden von ganz rechts nach links verschoben, damit sie besser sichtbar sind.
  • Umbenennung der Kategorie „Benutzerdefiniert“: Der Kategorienname für benutzerdefinierte Eigenschaften lautet jetzt „Mehr“.

Änderungen beim Testserver-Arbeitsablauf

Durch die verbesserten Arbeitsabläufe für Testserver in diesem Release wird die Bearbeitung von Dokumenten mit serverseitigem Code in der Live-Ansicht einfacher und nahtlos gestaltet.

Änderungen beim Server-Setup

Im Gegensatz zu früheren Versionen von Dreamweaver können Sie jetzt einen bestimmten Server entweder als Testserver oder als Remote-Server festlegen. Eine Zuweisung beider Rollen ist nicht mehr möglich. Die Kontrollkästchen in der Benutzeroberfläche des Server-Setups wurden durch Optionsschaltflächen ersetzt, um eine Spezifizierung der Server zu erzwingen.

Wenn Sie eine Site öffnen oder Einstellungen einer Site importieren, die in einer früheren Version von Dreamweaver erstellt wurde, und der gleiche Server für die Site als Test- und Remote-Server festgelegt ist, wird ein doppelter Eintrag für den Server erstellt. Anschließend wird ein Server als Remote-Server (mit dem Suffix „_remote“) und der andere als Testserver (mit dem Suffix „_testing“) gekennzeichnet.

Automatische Übertragung von dynamischen Dateien

Dreamweaver synchronisiert jetzt automatisch dynamische Dokumente mit dem Testserver, wenn Sie dynamische Dokumente öffnen, erstellen oder Änderungen an diesen Dokumenten speichern. Bei Testserver-Arbeitsabläufen in Dreamweaver werden die Dialogfelder zum Aktualisieren des Testservers und zum Übertragen von abhängigen Dateien nicht mehr angezeigt.

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

Änderungen an der Business Catalyst-Integration

Die Business Catalyst-Erweiterung wird nicht mehr weiterentwickelt und ist in Dreamweaver CC, Release 2015 und höher, nicht mehr verfügbar. Der letzte mit der Business Catalyst-Erweiterung kompatible Release ist Dreamweaver CC 2014.1.1.

Wenn Sie Business Catalyst zusammen mit Dreamweaver CC, Release 2015 und höher, verwenden möchten, verwenden Sie die SFTP-Verbindungsoption in Dreamweaver. Weitere Informationen finden Sie in der Dokumentation zu Business Catalyst.

Die offizielle Ankündigung dieser Änderung finden Sie auf der Business Catalyst-Website

Weitere Änderungen

  • Das Bedienfeld „Einfügen“ wurde umstrukturiert. Alle Optionen aus den Kategorien „Allgemein“, „Layout“ und „Medien“ wurden unter der neuen Kategorie „HTML“ zusammengefasst.
  • Die Videos mit einem Kurzüberblick zu den verschiedenen Funktionen und der Link zum Aufrufen der Videos über das Hilfemenü wurden entfernt. Außerdem ist diese Option nur für englische Gebietsschemas verfügbar.
  • Die Optionen in der Dropdown-Liste der Dokumentsymbolleiste am Ende einer Seite wurden überarbeitet. Folgende Optionen sind jetzt verfügbar: „Ausrichtung“, „Volle Größe“ und „Größen bearbeiten“.

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