Codehinweise und Codevervollständigung

Mit den intelligenten Dreamweaver-Funktionen Codevervollständigung und Codehinweise können Sie Tippfehler und andere Fehler vermeiden, um Code schnell einzufügen und zu bearbeiten.

Codehinweise bieten Ihnen außerdem folgende Informationen:

• Verfügbare Attribute für ein Tag
• Verfügbare Parameter für eine Funktion oder
• Verfügbare Methoden für ein Objekt

Dreamweaver unterstützt Codehinweise für die folgenden Sprachen und Technologien:

• HTML
• CSS
• JavaScript 
• PHP

Im Folgenden erfahren Sie, wie Codehinweise und Codevervollständigung bei diesen Sprachen funktionieren.

Codehinweise aktivieren

Klicken Sie zum Aktivieren von Codehinweisen auf Bearbeiten > Voreinstellungen > Codehinweise und wählen Sie die Option Code-Hinweise aktivieren. Zum Deaktivieren von Codehinweisen deaktivieren Sie das Kontrollkästchen Code-Hinweise aktivieren.

Um das automatische Einfügen von Klammern und Anführungszeichen zu aktivieren, wählen Sie Klammern automatisch einfügen bzw. Anführungszeichen automatisch einfügen.

Damit in Codehinweisen Beschreibungen angezeigt werden, wählen Sie Beschreibungs-QuickInfos aktivieren. Anschließend sehen Sie die Beschreibungen in den Codehinweisen.

HTML-Codehinweise

Für HTML-Code sind die folgenden Typen von Codehinweisen verfügbar:

• Hinweise zu Tags
• Hinweise zu Attributnamen
• Codehinweise zur Attributwerten

Hinweise zu Tags

Drücken Sie die <-Taste auf der Tastatur, um mit der Eingabe des Codes zu beginnen. Während der Eingabe werden gültige HTML-Tags angezeigt. Wenn die eingegebene Zeichenfolge im Menü angezeigt wird, führen Sie einen Bildlauf zu ihr durch und drücken Sie die Eingabetaste, um die Eingabe zu vervollständigen.

Wenn Sie beispielsweise „<“ eingeben, wird in einem Popup-Menü eine Liste mit Tag-Namen angezeigt. Anstatt den Rest des Tag-Namens einzugeben, können Sie das Tag im Menü auswählen, um es in den Text einzufügen.

Die Hinweise zu HTML-Tags enthalten ggf. auch eine kurze Beschreibung des Tags.

Hinweise zu Attributnamen

Beim Programmieren in Dreamweaver werden die entsprechenden Attribute für Tags angezeigt. Geben Sie einen Tag-Namen ein und drücken Sie die Leertaste, um die gültigen Attributnamen anzuzeigen, die Sie verwenden können.

Codehinweise zur Attributwerten

Der Hinweistext zu Attributwerten kann statisch oder dynamisch sein (da die in den Codehinweisen angezeigten Werte auf dem
Inhalt der entsprechenden Dateien basieren). 

Die meisten Codehinweise zu Attributwerten sind statisch. Beispielsweise ist der Wert des Attributs „target“ statisch und daher sind die entsprechenden Codehinweise ebenfalls statisch. 

In Dreamweaver werden dynamische Codehinweise für die Attributwerte angezeigt, die dies erfordern, z. B. „id“, „target“, „href“ und „class“.

Die folgenden Beispiele veranschaulichen dynamisch angezeigte Codehinweise. 

Dynamische Codehinweise für „src“

Wenn Sie in diesem Beispiel „src“ eingeben, werden gültige Attributwerte angezeigt, und wenn Sie „images“ auswählen, werden gültige Bilder angezeigt, die im Bildordner vorhanden sind. Sie können dann einen Bildlauf nach unten durchführen und das gewünschte Bild auswählen.

Wenn Sie über Elemente in CC Libraries verfügen, werden bei der Eingabe von „scr“ diese Elemente ebenfalls angezeigt. Diese Elemente in CC Libraries sind mit einem Cloud-Symbol gekennzeichnet.

Wenn Sie ein Element aus CC Libraries auswählen, wird ein Popup-Menü angezeigt, in dem Sie die Bildgröße neu auflösen und das Bildformat ändern können.

Dynamische Codehinweise für „href“

Wenn Sie „href“ eingeben, zeigt Dreamweaver eine Liste mit Dateien im Ordner an und bietet Ihnen die Möglichkeit, die Datei zu suchen und auszuwählen, die das Ziel das Hyperlinks sein soll.

Dynamische Codehinweise für „id“ und „style“

Wenn Sie in den CSS-Dateien IDs definiert haben und in den HTML-Dateien „id“ eingeben, werden alle verfügbaren IDs angezeigt.

Wenn Sie CSS-Stile definiert haben und in den HTML-Dateien „style“ eingeben, werden alle verfügbaren Stile angezeigt.

CSS-Codehinweise

Codehinweise werden bei den folgenden CSS-Typen unterstützt:

• @-Regeln
• Eigenschaften
• Pseudoselektoren und Pseudoelemente
• Kurzschrift

Zusätzlich zu Codehinweisen sind für CSS-Eigenschaften auch Tipps verfügbar.

Codehinweise für CSS-@-Regeln

In Dreamweaver werden Codehinweise für alle @-Regeln zusammen mit einer Beschreibung der CSS-Regel angezeigt, wie hier dargestellt.

Hinweise zu CSS-Eigenschaften

Wenn Sie bei der Eingabe von CSS-Eigenschaften einen Doppelpunkt eingeben, werden Codehinweise angezeigt, die Ihnen helfen, einen gültigen Wert auszuwählen.

Im folgenden Beispielcode werden bei der Eingabe von font-family: gültige Schriftfamilien angezeigt.

Sie können eine der Schriftfamilien auswählen oder in den Hinweisen das Dialogfeld Schriften verwalten öffnen und die bevorzugten Schriften festlegen. 

Auch wenn Sie in CSS mit Farben arbeiten, erhalten Sie hilfreiche Codehinweise. Wenn Sie bei der Eingabe der Eigenschaft für eine Farbe (z. B. die Rahmenfarbe oder Hintergrundfarbe) einen Doppelpunkt eingeben, wird in den Codehinweisen eine Liste von Farben angezeigt. Sie können eine Farbe aus der Liste auswählen oder in den Codehinweisen den Farbwähler öffnen und die gewünschte Farbe festlegen.

Wenn Sie über Farbfelder in CC Libraries verfügen, werden in den Codehinweisen auch diese Farbfelder angezeigt.

Hinweise für Pseudoselektoren und Pseudoelemente

Sie können einem Selektor einen CSS-Pseudoselektor hinzufügen, um einen bestimmten Status des Elements zu definieren. Wenn Sie beispielsweise „:hover“ verwenden, wird der Stil angewendet, wenn der Benutzer mit der Maus auf das im Selektor angegebene Element zeigt.

Sobald Sie „:“ eingeben, wird eine Liste gültiger Pseudoselektoren in Dreamweaver angezeigt, sofern sich der Cursor im richtigen Kontext befindet.

Sobald Sie „::“ eingeben, wird eine Liste gültiger Pseudoelemente (dienen zur Formatierung bestimmter Teile eines Elements) in Dreamweaver angezeigt, sofern sich der Cursor im richtigen Kontext befindet.

Hinweise zur CSS-Kurzschrift

Kurzschrifteigenschaften sind CSS-Eigenschaften, mit denen Sie die Werte verschiedener anderer CSS-Eigenschaften gleichzeitig festlegen können. Beispiele für CSS-Kurzschrifteigenschaften sind Hintergrund- und Schriftarteigenschaften.

Wenn Sie zum Beispiel ein Leerzeichen und dann eine CSS-Kurzschrifteigenschaft (wie „background“) eingeben, wird Folgendes in Dreamweaver angezeigt:

• Geeignete Eigenschaftswerte in der Reihenfolge ihrer Relevanz
• Obligatorische Werte, die verwendet werden müssen (bei „font“ z. B. sind „font-size“ und „font-family“ obligatorisch)
• Browsererweiterung für diese Eigenschaft

Wenn Sie die CSS-Kurzschrifteigenschaften ausgefüllt haben, werden in den Codehinweisen auch die von Ihnen eingegebenen Eigenschaftswerte angezeigt.

Tipps zu CSS-Code

Bei einigen CSS-Eigenschaften (z. B. „box-shadow“ und „text-shadow“) zeigt Dreamweaver Tipps an, die darauf hinweisen, welche Werte folgen müssen und welche Werte obligatorisch sind (durch ein Sternchen gekennzeichnet). 

Außerdem können Sie sehen, wie der Browser den CSS-Code interpretiert.

JavaScript-Codehinweise

Dreamweaver bietet in JavaScript-Dateien Codehinweise für Variablen und Funktionsparameter. 

Das Codefragment im folgenden Beispiel gibt den Typ an.

Beim Bearbeiten von JavaScript-Dateien wird die Liste der verfügbaren Codehinweise in Dreamweaver automatisch aktualisiert. Beispiel: Sie bearbeiten eine HTML-Datei und wechseln zu einer JavaScript-Datei, um eine Änderung vorzunehmen. Die in der JavaScript-Datei vorgenommen Änderung ist in der Liste der Codehinweise aufgeführt, wenn Sie wieder zur HTML-Datei wechseln. 

Live-Objekt-Prüfung

Außerdem werden Codehinweise zu JavaScript-Typen in Dreamweaver automatisch aktualisiert.

Wenn Sie beispielsweise eine Variable als Zahl definiert haben, merkt sich Dreamweaver diese Informationen. Wenn Sie später im Code auf diese Variable verweisen, wird ihr Typ angezeigt.

Wenn Sie den Variablentyp ändern (z. B. in eine Zeichenfolge), wird automatisch in den Dreamweaver-Codehinweisen angegeben, dass die Variable eine Zeichenfolge ist.

Dynamisch eingebundene Dokumentation

Wenn Sie Kommentare zu einer bestimmten Funktion hinzugefügt haben und für diese Funktion ein Hinweis aufgerufen wird, wird in Dreamweaver auch die Dokumentation zu dieser Funktion angezeigt. 

PHP-Codehinweise

Dreamweaver unterstützt Codehinweise für die PHP-Versionen 5.6 und 7.1. Diese Codehinweise für PHP-Code sind site-spezifisch und umfassen alle wichtigen Funktionen, Klassen und Konstanten.

Weitere Informationen zu den PHP-Versionen 5.6 und 7.1 finden Sie im PHP-Handbuch.

Weitere Informationen zu Site-spezifischen Codehinweisen finden Sie unter Site-spezifische Codehinweise.

Eine hilfreiche Funktion der Codehinweise für PHP-Code ist die automatische Vervollständigung von Variablen.

Wenn Sie ein Dollarzeichen ($) eingeben, wird im aktuellen Skript eine Liste aller Variablen angezeigt. Wählen Sie die gewünschte Variable aus und drücken Sie die Eingabetaste. Variablen aus zugehörigen Dateien werden ebenfalls aufgelistet. Dies verhindert, dass die gleiche Variable für einen anderen Zweck wiederverwendet wird.

Wenn PHP 7.1 als Standard festgelegt ist, werden PHP 7.1-spezifische Codehinweise in Dreamweaver angezeigt.

Verzögerungseinstellungen für PHP-Codehinweise bearbeiten

Um die Codeeingabe in PHP-Dateien zu verbessern, bietet Dreamweaver ab Version 2017.5 eine zusätzliche Verzögerung für PHP-Codehinweise. Bei der Eingabe von PHP-Code werden die Hinweise in Dreamweaver nach einer Verzögerung von 400 ms angezeigt. Wenn Sie die Verzögerungseinstellungen für PHP-Code ändern möchten, gehen Sie wie folgt vor: 

Site-spezifische Codehinweise

In Dreamweaver können Entwickler mithilfe von Joomla, Drupal, WordPress oder anderen Frameworks beim Programmieren in der Codeansicht PHP-Codehinweise anzeigen. Um diese Codehinweise anzeigen zu können, müssen Sie im Dialogfeld „Site-spezifische Code-Hinweise“ zunächst eine Konfigurationsdatei erstellen. Die Konfigurationsdatei beschreibt, an welcher Stelle Dreamweaver die für Ihre Site spezifischen Codehinweise finden kann.

Ein Video-Tutorial zum Arbeiten mit Site-spezifischen Codehinweisen finden Sie unter www.adobe.com/go/learn_dw_comm13_de.

Konfigurationsdatei erstellen

Erstellen Sie im Dialogfeld „Site-spezifische Code-Hinweise“ die Konfigurationsdatei, die zum Anzeigen von Codehinweisen in Dreamweaver erforderlich ist.

Die Konfigurationsdatei wird in Dreamweaver standardmäßig im Verzeichnis „Adobe Dreamweaver CS5\configuration\Shared\Dinamico\Presets“ gespeichert.

Site-Struktur speichern

Sie können benutzerdefinierte Site-Strukturen im Dialogfeld „Site-spezifische Code-Hinweise“ speichern.

Site-Strukturen umbenennen

Beachten Sie beim Umbenennen der Site-Struktur, dass Sie die Namen der drei Framework-Standardstrukturen sowie das Wort „custom“ nicht verwenden können.

Einer Site-Struktur Dateien und Ordner hinzufügen

Sie können der Site-Struktur alle Dateien oder Ordner hinzufügen, die mit Ihrem Framework verknüpft sind. Nachdem Sie Dateien oder Ordner hinzugefügt haben, können Sie die Dateierweiterungen der Dateien angeben, die analysiert werden sollen. 

Site nach Dateierweiterungen durchsuchen

Im Dialogfeld „Erweiterung(en) suchen“ können Sie Dateierweiterungen anzeigen oder bearbeiten, die in die Site-Struktur eingebunden sind.