Übersicht über die neuen Funktionen

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.

Ü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

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.

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.

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.

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.

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.

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, so dass 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 berechneten Zeile weist Sie beim Überprüfen auf die für Sie am besten geeignete Registerkarte hin. 

Weitere Informationen finden Sie unter Festlegen der Rahmeneigenschaften.

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: 

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

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. 

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.

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.  

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.

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.

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 zum Publishing Server herstellen. Durch 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.

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.  

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.

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

Um in der 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.

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.

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.

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
  

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.

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.

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: 

Auslöser:

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

Meldung:

Auslöser:

• Bearbeiten einer ID im Eigenschafteninspektor der Entwurfsansicht

Meldung:

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

Auslöser:

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

Meldung:

Auslöser:

• Einfügen eines Bilds > Bearbeiten der Bildeinstellungen

Meldung:

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.

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.