Überblick über die neuen Funktionen – Mai 2015

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. Linting bezeichnet das Ausführen eines Programms zum Ermitteln potenzieller Fehler im Code. 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.

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.

CSS-Präprozessoren

Bild- und Farbvorschau in der Codeansicht

Bildvorschau

In Dreamweaver können Sie jetzt Vorschaubilder in der Codeansicht anzeigen, indem Sie mit der Maus auf die Bild-URL zeigen.

Die Bildvorschau ist jetzt für Remote-Bildpfade wie <img src="https://a2.behance.net/img/profile/no-image-138.jpg?cb=1816124956" /> aktiviert.

Wenn Dreamweaver die Vorschau für Remote-Pfade nicht anzeigen kann, wird die Meldung „Bild kann nicht geladen werden“ angezeigt.

Sie können eine Vorschau für die folgenden Bilddateitypen anzeigen:

JPEG
JPG
PNG
GIF
BMP
SVG

Die Bildvorschau wird in den folgenden Fällen angezeigt, wenn Sie mit der Maus auf die URLs zeigen:

• url( );
• data-uri( )
• src-Attributwert des img-Tags

Farbvorschau

Die Elementvorschau in der Codeansicht wurde weiter verbessert. In Dreamweaver können Sie jetzt die Farbvorschau in der Codeansicht anzeigen, indem Sie mit der Maus auf die Farbwerte zeigen. Die folgenden Formate werden unterstützt:

Hexadezimale Farbwerte mit 3 und 6 Ziffern: #ff0000;
RGB: rgb(0, 0, 0);
RGBA: rgba(0, 255, 228,0.5);
HSL: hsl(120, 100%, 50%);
HSLA: hsla(120, 60%, 70%, 0.3);
Vordefinierte Farbnamen: „olive“, „teal“, „red“ usw.

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_Snippets
• CSS_Animation_And_Transitions
• CSS_Effects
• CSS_Snippets
• HTML_Snippets
• JavaScript-Codefragmente (aktualisiert)
• PHP_Snippets
• Preprocessor_Snippets
• Responsive_Design_Snippets

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

Bootstrap-Integration

Sie können jetzt mit dem Bootstrap-Framework (Version 3 und höher) erstellte Websites in Dreamweaver öffnen und die Seite im Code oder mit grafischen Designfunktionen bearbeiten. Dreamweaver erkennt die zugehörigen CSS-Dateien, wenn die Dateinamen „bootstrap“ enthalten. 

Sie können in Dreamweaver auch Bootstrap-Komponenten hinzufügen (Bedienfeld „Einfügen“) und durch schnelles und einfaches Bearbeiten der Raster das Design für verschiedene Viewports ändern.

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

Bootstrap-Startvorlagen

Dreamweaver enthält jetzt Bootstrap-Vorlagen, mit denen Sie schnell in die Erstellung von Responsive-Designs einsteigen können. Im Dialogfeld „Neues Dokument“ finden Sie die folgenden Bootstrap-Vorlagen:

• Bootstrap-eCommerce
• Bootstrap-One PageBootstrap-Portfolio
• Bootstrap-The Agency
• Bootstrap-The Grid

Codefaltung

Codefaltung ist jetzt in HTML-, CSS-, LESS-, Sass-, SCSS-, JS-, PHP-, XML- und SVG-Dateien auf Grundlage von Tagblöcken möglich. Wenn Sie mit der Maus auf die Spalte für die Zeilennummern zeigen, wird in der Codeansicht neben den Zeilennummern ein kleines Dreieck angezeigt, auf das Sie klicken können, um die Codeblöcke einzublenden bzw. auszublenden. Diese neue Codefaltungsfunktion ersetzt die vorhandene Funktion, die auf der Markierung basiert.

Für alle Tagblöcke in der Codeansicht, die mehr als zwei Codezeilen enthalten, werden Codefaltungssymbole (umgekehrtes Dreieck) angezeigt.

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

Codefaltung in HTML-Dateien

Im Gegensatz zur früheren Codefaltungsfunktion enthält der ausgeblendete Inhalt jetzt das schließende Tag. Er wird daher anders als in der früheren Implementierung gerendert.

Im ausgeblendeten Codeblock wird jetzt eine größere Anzahl von Zeichen angezeigt. Dies erleichtert Ihnen ggf. die Vorschau des ersten Attributs/der ersten Attribute im ausgeblendeten Tagblock. Wenn z. B. das ausgeblendete div-Tag id- und class-Attribute aufweist, sieht der ausgeblendete Block wie folgt aus:

Unter Windows können Sie den Code in einem ausgeblendeten Block anzeigen, indem Sie mit der Maus auf den ausgeblendeten Code zeigen. Der ausgeblendete Block wird automatisch eingeblendet, wenn der Code im ausgeblendeten Block durch „Tag-Selektor“, „Suchen und ersetzen“, „Gehe zu Zeile“, „Elementschnellansicht“, „Live-Ansicht“ oder „Rückgängig/Wiederherstellen“ den Fokus erhält. Sobald der Codeblock nicht mehr den Fokus besitzt, wird er automatisch ausgeblendet.

Codefaltung in CSS-, LESS-, Sass-, SCSS- und JS-Dateien

In geschweifte Klammern eingeschlossene Codeblöcke in CSS-, LESS-, Sass-, SCSS- und JS-Dateien können jetzt ausgeblendet werden.

Zeigen Sie mit der Maus auf den Codeausblendungsbereich in einer beliebigen Zeile, die die öffnende geschweifte Klammer „{“ enthält.

Durch Klicken auf „Ausblenden“ wird der Inhalt zwischen dem geschweiften Klammerpaar ausgeblendet und als Vorschau wird „{...}“ angezeigt.

Codefaltung in PHP-Dateien

In PHP-Dateien können zusätzlich zu PHP-Codeblöcken auch HTML-Elemente sowie CSS- und JS-Codeblöcke ausgeblendet werden.

Jeder PHP-Block, der mit „<?php“ beginnt und mit „?>“ endet, kann ausgeblendet werden.

Zeigen Sie mit der Maus in einem Codeausblendungsbereich auf eine beliebige Zeile, die „<?php“ enthält, und klicken Sie auf das Symbol „Ausblenden“, um den Codeblock auszublenden.