Der neue Release 2014 von Dreamweaver CC enthält mehrere Verbesserungen für die Live-Ansicht und den CSS Designer, die die Erstellung und Aktualisierung von Web- und mobilen Inhalten vereinfachen. Die neue Elementschnellansicht erlaubt die schnelle Anzeige, Navigation und Bearbeitung des HTML-Codes.

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

In der neuen Elementschnellansicht können Sie die Markups in Ihrem Dokument überprüfen. Die Elementschnellansicht besteht aus einer interaktiven HTML-Baumstruktur mit den aktuellen statischen und dynamischen Inhalten. Die Struktur des statischen Inhalts lässt sich direkt im HTML-Baum ändern. 

Die Elementschnellansicht („Ansicht“ > „Elementschnellansicht“) wurde eingeführt, um den Entwicklungsprozess zu beschleunigen. In früheren Versionen von Dreamweaver mussten Sie die HTML-Elemente in der Live-Ansicht markieren, dann in die Codeansicht wechseln und die Elemente dort bearbeiten. Nach der Bearbeitung mussten Sie wieder in die Live-Ansicht wechseln, um eine Vorschau der Änderungen anzuzeigen. In der Elementschnellansicht können Sie jetzt alle Elemente auf Ihrer Seite in einer einzigen, übersichtlichen Ansicht darstellen und statischen Inhalt direkt aus dieser Ansicht heraus bearbeiten.

Weitere Informationen finden Sie unter Elementschnellansicht.

Neue Bearbeitungsfunktionen in der Live-Ansicht

Überprüfen und ändern Sie die Eigenschaften der HTML-Elemente direkt in der Live-Ansicht und sehen Sie das Resultat, ohne die Ansicht aktualisieren zu müssen. 

• Schnellansicht-Eigenschafteninspektor
• Elementanzeige
• Live-Textbearbeitung
• Live-Ansicht-Eigenschafteninspektor

Schnellansicht-Eigenschafteninspektor

In der Live-Ansicht wird jetzt ein Schnellansicht-Eigenschafteninspektor für HTML-Elemente auf Ihren Seiten angezeigt. Mit dem Schnellansicht-Eigenschafteninspektor können Sie Attribute und Text des ausgewählten HTML-Elements direkt in der Live-Ansicht bearbeiten.

Weitere Informationen finden Sie unter Schnellansicht-Eigenschafteninspektor.

Elementanzeige

Mit der neuen Elementanzeige können Sie HTML-Elementen direkt in der Live-Ansicht Klassen und IDs zuweisen. Die verfügbaren Klassen und IDs werden in der Elementanzeige als Hinweise angegeben, damit Sie die benötigte Option ganz einfach auswählen können.

Weitere Informationen finden Sie unter HTML-Elemente mit Klassen und IDs verknüpfen.

Live-Textbearbeitung

Sie können Text jetzt direkt in der Live-Ansicht bearbeiten und die Änderungen in einer Vorschau anzeigen, ohne zwischen verschiedenen Ansichten wechseln zu müssen.

Doppelklicken Sie in der Live-Ansicht auf das Textelement, um in den Bearbeitungsmodus zu wechseln. Weitere Informationen finden Sie unter Text direkt in der Live-Ansicht bearbeiten.

Live-Ansicht-Eigenschafteninspektor

In der Live-Ansicht steht Ihnen jetzt ein Eigenschafteninspektor zur Verfügung, um schnell Änderungen an der Seite vorzunehmen, ohne zur Entwurfs- oder Codeansicht wechseln zu müssen.

Weitere Informationen finden Sie unter Live-Ansicht-Eigenschafteninspektor.

Einfügen in die Live-Ansicht

In dieser Version können Sie über das Bedienfeld „Einfügen“ HTML-Elemente direkt in der Live-Ansicht hinzufügen. Die Elemente werden in Echtzeit eingefügt, ohne dass Sie den Modus wechseln müssen. Sie können die Änderungen auch sofort in der Vorschau anzeigen. 

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

Verbesserungen beim CSS Designer

Verbesserte Benutzeroberfläche zur Einstellung von Rahmeneigenschaften

In einem neuen Steuerelement mit mehreren Registerkarten können Sie auf einfache und intuitive Weise die Eigenschaften aller vier Rahmen festlegen.

• Da die Eigenschaften auf fünf Registerkarten aufgeteilt sind, werden weniger Werte auf einmal angezeigt, sodass Sie den Überblick behalten.
• Intuitive und benutzerfreundliche Symbole, die auch Anfänger verstehen.
• Zwei Symbole kennzeichnen nicht eingestellte/gelöschte und deaktivierte Eigenschaften.
• Eine spezielle Registerkarte für Alle Seiten, um die Eigenschaften aller vier Rahmenseiten gleichzeitig einzustellen.
• Eine berechnete Zeile weist Sie beim Überprüfen auf die für Sie am besten geeignete Registerkarte hin. 

Weitere Informationen finden Sie unter Rahmeneigenschaften festlegen.

Kopieren und Einfügen von Stilen

Sie können Stile jetzt aus einem Selektor kopieren und in einen anderen einfügen. Sie können alle Stile kopieren oder nur bestimmte Stilkategorien wie Layout, Text und Rahmen.

Klicken Sie mit der rechten Maustaste auf den Selektor und wählen Sie eine der folgenden Optionen aus:  

• Wenn ein Selektor keine Stile besitzt, sind „Kopieren“ und „Alle Stile kopieren“ deaktiviert.
• „Stile einfügen“ ist bei Remote-Sites, die nicht bearbeitet werden können, deaktiviert. „Kopieren“ und „Alle Stile kopieren“ ist jedoch verfügbar.
  
• Das Einfügen von Stilen, die zum Teil bereits in einem Selektor vorhanden sind (Überlappung), ist ebenso möglich. Es wird die Gesamtmenge aller Selektoren eingefügt.
  
• Kopieren und Einfügen von Stilen funktioniert auch bei unterschiedlichen Verknüpfungen von CSS-Dateien – (Import, Verknüpfung, Inline-Stile.
  

Schnellbearbeitungs-Textfelder

Dreamweaver verfügt jetzt über Schnellbearbeitungs-Textfelder, in denen Sie Kurzschriftcodes für Eigenschaften wie Rand, Auffüllung, Rahmen und Rahmenradius angeben können. Diese Änderung wurde für Benutzer geschaffen, die beim Festlegen von Eigenschaften lieber Code festlegen als die Maus oder Tastatur zu verwenden. 

Verbesserungen im Arbeitsablauf für benutzerdefinierte Eigenschaften

Früher mussten Sie im Eigenschaftenfenster des CSS Designers auf „+“ klicken, um andere (oder benutzerdefinierte) Eigenschaften hinzuzufügen. Nun stehen gleich am Ende der Eigenschaftenliste zwei Textfelder – für den Namen und Wert – zur Verfügung. Direkt in diese Textfelder können Sie den Namen und Wert einer Eigenschaft eingeben, ohne erst auf „+“ klicken zu müssen.

Um eine weitere Zeile für eine benutzerdefinierte Eigenschaft hinzuzufügen, drücken Sie jeweils die Tabulatortaste.

Der Name der Eigenschaftengruppe „Andere“ wurde in „Benutzerdefiniert“ geändert.

Tastaturbefehle

Sie können jetzt mithilfe von Tastaturbefehlen CSS-Selektoren und Eigenschaften hinzufügen oder löschen. Die nachfolgende Tabelle beschreibt, wie Sie zwischen den Eigenschaftsgruppen im Eigenschaftenfester navigieren.  

Mehr/weniger Selektordetails

Ab dieser Version unterstützt Dreamweaver beim Hinzufügen eines Selektors bis zu drei Regelhinweise. Mithilfe der Nach-oben- und Nach-unten-Taste können Sie mehr oder weniger Details zu einer Regel einblenden.

Bildlauf zur Kategorie

Wenn Sie früher im Eigenschaftenfenster des CSS Designers auf die Kategorie Hintergrund oder Andere geklickt haben, wurden diese Kategorien zwar ins Fenster „geladen“, aber nicht im oberen Teil des Fensters angezeigt.

Jetzt werden die Kategorien Hintergrund und Andere (bzw. jetzt Benutzerdefiniert) oben im Fenster angezeigt, wenn Sie darauf klicken.

Unterstützung für SFTP-Verbindungen mit Identitätsdatei

Im Release 2014 von Dreamweaver CC können Sie über SFTP und unter Verwendung von Privat/Öffentlich-Schlüsselpaaren und Identitätsschlüsseln (mit und ohne Passphrase) eine Verbindung mit dem Publishing Server herstellen. Dank dieser Dreamweaver-Erweiterung steht Ihnen ein breiteres Angebot an Web-Hosting-Dienstanbietern zur Verfügung – Sie können sich bei jedem Dienstanbieter anmelden, der Privat/Öffentlich-Schlüsselpaare für die Authentifizierung verwendet.

Weitere Informationen finden Sie unter SFTP-Verbindungen.

Verbesserungen an der Funktion „Rückgängig/Wiederherstellen“

Wenn Sie bisher einen im CSS Designer vorgenommenen Arbeitsschritt rückgängig machen oder wiederherstellen wollten, mussten Sie (in den zugehörigen Dateien) auf die CSS-Datei klicken und dann den Vorgang rückgängig machen bzw. wiederherstellen. 

Mit den neuen Verbesserungen beim Rückgängig machen/Wiederherstellen können Sie einem Vorgang direkt von der Live-Ansicht eines Dokuments oder vom CSS Designer aus rückgängig machen bzw. wiederholen. Diese Änderungen werden anschließend automatisch in der entsprechenden CSS-Datei widergespiegelt. Um Sie darüber zu informieren, dass die zugehörige Datei geändert wurde, wird die Registerkarte der betroffenen Datei für einige Zeit (ca. 8 Sekunden lang) hervorgehoben.

• Wenn Sie einen Vorgang vom Bedienfeld „CSS Designer“ aus rückgängig machen oder wiederherstellen, wird die Live-Ansicht automatisch aktualisiert.
• Wenn Sie das Dokument anhand des Quellcodes bearbeiten und die Änderungen von der Live-Ansicht aus rückgängig machen, wird die geteilte Ansicht angezeigt und der zugehörige Quellcode erhält den Fokus.

Alle Rückgängig/Wiederherstellen-Vorgänge werden auf HTML-Datei-Ebene aufgezeichnet. Das heißt, jede manuelle Änderung an einer CSS-Datei kann von JEDER zugehörigen Datei aus rückgängig gemacht werden. Stellen Sie sich beispielsweise vor, dass die Dateien „style1.css“ und „style2.css“ zur HTML-Datei „index.html“ gehören. Wenn Sie nun Stile für „.h1“ in „style1.css“ einfügen und dann von „style2.css“ aus die Option „Rückgängig“ wählen, wird der Stil „.h1“ aus „style1.css“ gelöscht.  

Änderungen an Business Catalyst- und PhoneGap Build-Arbeitsabläufen

Business Catalyst und PhoneGap Build sind jetzt als Zusatzprogramme zu Dreamweaver verfügbar. Sie müssen zunächst Business Catalyst und PhoneGap Build als Erweiterungen installieren. Anschließend können Sie diese Dienste wie gewohnt verwenden.

Um die Business Catalyst- und PhoneGap Build-Erweiterungen zu installieren, wählen Sie „Verwalten“ > „Zusatzprogramme durchsuchen“, suchen nach den Erweiterungen und installieren sie.

Änderungen am Zugriff auf Erweiterungen für Dreamweaver

Sie können Dreamweaver-Erweiterungen jetzt über Adobe Creative Cloud anzeigen und installieren. Erweiterungen werden jetzt als „Zusatzprogramme“ bezeichnet.

Um in Adobe Creative Cloud nach Zusatzprogrammen zu suchen, klicken Sie in Dreamweaver auf „Fenster“ > „Zusatzprogramme durchsuchen“. Die Adobe Creative Cloud-Seite für Zusatzprogramme wird angezeigt. 

Weitere Informationen zum Installieren der Zusatzprogramme finden Sie unter Zusatzprogramme.

Änderungen an den Synchronisationseinstellungen

Die Funktion für die Synchronisation von Einstellungen in Dreamweaver ermöglicht es Ihnen, Ihre Einstellungen mit Dreamweaver-Instanzen auf Ihren Computern und mit Creative Cloud zu synchronisieren. Release 2014 von Dreamweaver CC erkennt automatisch, wenn Sie die Synchronisationseinstellungen in der Vorversion von Dreamweaver aktiviert hatten, sodass Sie diese Einstellungen aus Creative Cloud importieren können.

Wenn Sie Release 2014 von Dreamweaver CC nach der Installation zum ersten Mal starten, wird das folgende Dialogfeld angezeigt: 

• Zum Importieren in Creative Cloud gespeicherter Einstellungen klicken Sie auf Synchronisationseinstellungen importieren. 

Hinweis: Diese Option ist später nicht mehr verfügbar. 

• Wenn Sie die Einstellungen in der aktuellen Dreamweaver-Instanz mit Creative Cloud synchronisieren möchten, klicken Sie auf Lokal syn.
  
• Damit die Einstellungen automatisch synchronisiert werden, wählen Sie Einstellungen immer automatisch synchronisieren.
• Zum Anzeigen der erweiterten Optionen für die Synchronisationseinstellungen klicken Sie auf Erweitert.

Senden von Bugs/Funktionsanforderungen direkt aus Dreamweaver

Sie können jetzt direkt aus Dreamweaver über „Hilfe“ > „Bug senden/Funktionsanforderung“ auf Formulare zugreifen, mit denen Sie Vorschläge einreichen und Fehler melden können.

Help Center

Lernen Sie im neuen Help Center, wie Sie die neuen Funktionen verwenden und wie Sie häufige Aufgaben in Dreamweaver am besten angehen. 

Im Gegensatz zu früheren Versionen können Sie jetzt neue Funktionen und effektive Arbeitsabläufe in Dreamweaver gleich beim ersten Start des Programms entdecken. Sie können die Kurzüberblickstour über die neuen Funktionen überspringen oder die integrierten Hilfemeldungen jederzeit deaktivieren. Bei Bedarf können Sie sie wieder aktivieren.

• Kurzüberblick über die neuen Funktionen
• Integrierte Meldungen
• In-Produkt-Meldungen
• Deaktivieren oder Zurücksetzen von integrierten Meldungen und In-Produkt-Meldungen
  

Kurzüberblick über die neuen Funktionen

Dreamweaver enthält jetzt einen Kurzüberblick über die neuen Funktionen, der zum Lieferumfang der neuesten Version gehört.
Zusätzlich zu einer Einführung in die neuen Funktionen führt Sie dieser Kurzüberblick auch zu einer Galerie mit Videos, in denen Sie die neuen Funktionen in der Praxis erleben können.

Diesen Kurzüberblick über die neuen Funktionen können Sie schon beim Start von
Dreamweaver aufrufen. Sie können die Kurzüberblickstour auch überspringen und
Ihre Arbeit vom Begrüßungsbildschirm aus fortsetzen.

Hinweis: Der Kurzüberblick über die neuen Funktionen wird angezeigt, wenn Sie
Dreamweaver installieren oder aktualisieren oder wenn Sie Voreinstellungen löschen und Dreamweaver neu starten.

Es folgt eine Zusammenfassung dessen, was in dem Kurzüberblick über die neuen Funktionen angezeigt wird:

• Begrüßungsmeldung. Sie werden zudem aufgefordert anzugeben, ob Sie bereits mit Dreamweaver CC gearbeitet haben, damit die Übersicht entsprechend angepasst werden kann.
• Einführung in die einzelnen Funktionen und eine kurze Beschreibung (sowie die Möglichkeit, die Kurzüberblickstour zu überspringen).
• Videogalerie mit Videos, die mit den neuen Funktionen zusammenhängen.

Videogalerie

Am Ende des Kurzüberblicks über die neuen Funktionen wird die Videogalerie angezeigt. Diese enthält Videos zu den neuen Funktionen.
Wenn Sie Ihre Maus über die Miniaturen halten, wird eine kurze Beschreibung des jeweiligen Videos eingeblendet.

Integrierte Meldungen

Dreamweaver gibt Ihnen jetzt Tipps, wie Sie Ihre Produktivität steigern können, während Sie an Ihren Projekten arbeiten.
Diese Tipps sollen Ihnen helfen, die Aufgabe, die Sie gerade ausführen, auf effizientere Weise durchzuführen.

Die Tipps erscheinen aufgrund bestimmter „Auslöser“ in Dreamweaver. Wenn Sie beispielsweise auf Tag-Selektoren in einer Ansicht klicken oder mit der rechten Maustaste auf ein Element klicken, um es zu überprüfen, erscheint ein Tipp zur Arbeit mit der Elementschnellansicht.

Die Elementschnellansicht ist eine brandneue Funktion, mit der Sie HTML-Markup leichter anzeigen und bearbeiten können als mit den anderen Methoden (den Auslösern).

Wenn Sie einmal gemäß einer Empfehlung gehandelt haben, wird die integrierte Meldung für diesen
Auslöser nicht mehr angezeigt. Die Tipps zu den anderen Auslösern werden jedoch noch angezeigt.

Sie können die Anzeige dieser integrierten Meldungen in den Voreinstellungen deaktivieren. Weitere
Informationen finden Sie unter Deaktivieren oder Zurücksetzen von integrierten Meldungen und In-Produkt-Meldungen. 

Beispiele für integrierte Meldungen: 

Elementschnellansicht

Auslöser:

• Klick auf Tag-Selektoren (in allen Ansichten)
• Live + Prüfmodus oder Rechtsklick + Auswahl von Überprüfen

Meldung:

Live-Ansicht-Eigenschafteninspektor für Klassen und IDs 

Auslöser:

• Bearbeiten einer ID im Eigenschafteninspektor der Entwurfsansicht

Meldung:

In-Produkt-Meldungen

Dreamweaver integriert sich nahtlos in viele andere Creative Cloud-Anwendungen und In-Produkt-Meldungen stellen Ihnen solche integrativen Arbeitsabläufe vor.
Wenn Sie diese
Arbeitsabläufe verwenden, können Sie Adobe Creative Cloud und ihre Angebote besser nutzen.

In-Produkt-Meldungen werden aufgrund identifizierter „Auslöser“ angezeigt. Wenn Sie beispielsweise
versuchen, CSS-Übergänge zu verwenden, so wird von der In-Produkt-Meldung der Edge Animate-Arbeitsablauf vorgeschlagen.

Eine In-Produkt-Meldung enthält eine kurze Beschreibung des alternativen (oder besseren) Arbeitsablaufs, den Sie in einem bestimmten Szenario verwenden können.
Sie enthält auch eine Video-Miniaturansicht, auf die Sie klicken können, um ein Video anzuzeigen, das den Arbeitsablauf erläutert.
Die Schaltfläche Weitere Informationen verweist Sie auf einen Artikel/Blog, der weiterführende Informationen enthält.


In-Produkt-Meldungen werden nur einmal angezeigt, wenn der identifizierte Auslöser auftritt.

Beispiele für In-Produkt-Meldungen: 

Edge Animate

Auslöser:

• Klick auf CSS-Übergang und anschließend Klick auf +

Meldung:

Parfait

Auslöser:

• Einfügen eines Bilds > Bearbeiten der Bildeinstellungen

Meldung:

Deaktivieren oder Zurücksetzen von integrierten Meldungen und In-Produkt-Meldungen

Wählen Sie „Bearbeiten“ > Voreinstellungen > Eingabehilfen und gehen Sie vor wie folgt:

• Um die Meldungen zu deaktivieren, deaktivieren Sie das Kontrollkästchen Integrierte Hilfe anzeigen.

Wenn Sie die Meldungen wieder aktivieren, werden die zuvor angezeigten Meldungen nicht mehr angezeigt.
Nur die Meldungen, die zuvor noch nicht angezeigt worden sind, werden angezeigt.

• Damit auch die zuvor angezeigten Meldungen noch einmal angezeigt werden, klicken Sie auf Zurücksetzen.

Änderungen am Menü „Hilfe“

Das Menü „Hilfe“ wurde neu strukturiert, um den schnellen Zugriff auf den Kurzüberblick über die neuen Funktionen, die Videogalerie, die Hilfe und Trainingsressourcen sowie Formulare zum Einreichen von Vorschlägen und Melden von Fehlern zu ermöglichen.