Benutzerhandbuch Abbrechen

Codehinweise und Codevervollständigung

 

 

Beschleunigen Sie mit den Dreamweaver-Funktionen Codehinweise und Codevervollständigung die Programmierung.

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

Unterstützte Sprachen und Technologien

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

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.

Voreinstellungen für Codehinweise
Voreinstellungen für Codehinweise

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.

Grundlegende HTML-Codehinweise
Grundlegende HTML-Codehinweise

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 zu Attributnamen
Codehinweise zu Attributnamen

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. 

Beispiel für statische Codehinweise zu Attributwerten
Beispiel für statische Codehinweise zu Attributwerten

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.

Dynamische Codehinweise für „src“
Dynamische Codehinweise für „src“

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.

Einschließen eines Elements aus CC Libraries in den Code
Einschließen eines Elements aus CC Libraries in den Code

Hinweis:

In den Codehinweisen können nur 50 Elemente aus CC Libraries angezeigt werden. Diese Codehinweise werden in alphabetischer Reihenfolge angezeigt.

Hinweis:

Das Einfügen von Remote-Elementen aus CC Libraries in Dreamweaver-Code wird nicht unterstützt.

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 „href“
Dynamische Codehinweise für „href“

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.

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

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

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

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.

Codehinweise für @-Regeln in CSS
Codehinweise für @-Regeln in CSS

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. 

Codehinweise und Hilfe zu CSS-Eigenschaften
Codehinweise und Hilfe zu CSS-Eigenschaften

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.

CSS-Codehinweise für Farben
CSS-Codehinweise für Farben

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

Farbfelder aus CC Libraries werden durch das Cloud-Symbol angegeben.
Farbfelder aus CC Libraries werden durch das Cloud-Symbol angegeben.

Hinweis:

In den Codehinweisen können nur 50 Elemente aus CC Libraries angezeigt werden. Diese Codehinweise werden in alphabetischer Reihenfolge 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.

Codehinweise für Pseudoselektoren
Codehinweise für Pseudoselektoren

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.

Codehinweise für Pseudoelemente
Codehinweise für Pseudoelemente

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
Codehinweise für die CSS-Eigenschaft „background“
Codehinweise für die CSS-Eigenschaft „background“

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.

Tipps zu CSS-Eigenschaften
Tipps zu CSS-Eigenschaften

JavaScript-Codehinweise

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

Das Codefragment im folgenden Beispiel gibt den Typ an.

JavaScript-Codehinweise
JavaScript-Codehinweise

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. 

Hinweis:

Diese automatische Aktualisierung erfolgt jedoch nur, wenn Sie die JavaScript-Dateien in Dreamweaver bearbeiten.

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.

Codehinweis mit Angabe des Variablentyps
Codehinweis mit Angabe des Variablentyps

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.

PHP 7-Codehinweise
PHP 7-Codehinweise

Beispiel für Codehinweise für PHP-Objekte
Beispiel für Codehinweise für PHP-Objekte

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: 

  1. Beenden Sie Dreamweaver.

  2. Öffnen Sie „brackets.json“ an folgendem Speicherort in einem Texteditor:

    • Windows: %appdata%\Adobe\Dreamweaver CC 2017\<Gebietsschema>\Configuration\Brackets\
    • macOS: ~/Library/Application Support/Adobe/Dreamweaver CC 2017/<Gebietsschema>/Configuration/Brackets/
  3. Klicken Sie in der rechten oberen Ecke des Dialogfelds auf die Schaltfläche „Struktur speichern“.

    Fügen Sie in der JSON-Datei nach dem letzten Name-Wert-Paar ein Komma hinzu.

    Fügen Sie die folgende Zeile mit der gewünschten Verzögerungszeit in Millisekunden hinzu: "delayInPHPHint": <Zeit in Millisekunden>. Beispiel: "delayInPHPHint": 200.

  4. Speichern Sie die Datei und starten Sie Dreamweaver.

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.

Hinweis:

Die Codehinweise, die Sie erstellen, gelten speziell für die im Dreamweaver-Bedienfeld „Dateien“ ausgewählte Site. Damit die Codehinweise angezeigt werden, muss sich die Seite, die Sie bearbeiten, in der aktuell ausgewählten Site befinden.

  1. Wählen Sie Site > Site-Optionen > Site-spezifische Code-Hinweise.

    Die Funktion „Site-spezifische Code-Hinweise“ analysiert automatisch Ihre Site, um festzustellen, welches CMS-Framework (Content Management System) Sie verwenden. Dreamweaver unterstützt standardmäßig die drei Frameworks Drupal, Joomla und WordPress.

    Über die vier Schaltflächen rechts neben dem Popup-Menü „Struktur“ können Sie Framework-Strukturen importieren, speichern, umbenennen oder löschen.

    Hinweis:

    Die vorhandenen Framework-Standardstrukturen können Sie nicht löschen oder umbenennen.

  2. Geben Sie im Textfeld „Ordner im Stammordner“ den Ordner im Stammordner an, in dem Sie die Framework-Dateien speichern. Sie können auf das Ordnersymbol neben dem Textfeld klicken, um zum Verzeichnis der Framework-Dateien zu wechseln.

    In Dreamweaver wird eine Dateistruktur der Ordner angezeigt, die Ihre Framework-Dateien enthalten. Wenn alle Ordner und Dateien, die Sie analysieren möchten, angezeigt werden, klicken Sie auf „OK“, um die Analyse durchzuführen. Wenn Sie die Analyse anpassen möchten, fahren Sie mit den nächsten Schritten fort.

  3. Klicken Sie auf die Schaltfläche mit dem Pluszeichen (+) über dem Fenster „Dateien“, um eine Datei oder einen Ordner auszuwählen, die bzw. den Sie der Analyse hinzufügen möchten. Im Dialogfeld „Datei/Ordner hinzufügen“ können Sie bestimmte Dateierweiterungen angeben, die in die Analyse einbezogen werden sollen.

    Hinweis:

    Durch die Angabe einer bestimmten Dateierweiterung wird die Analyse beschleunigt.

  4. Wenn Sie Dateien aus der Analyse entfernen möchten, wählen Sie die entsprechenden Dateien aus und klicken Sie dann auf die Schaltfläche mit dem Minuszeichen (-) über dem Fenster „Dateien“.

    Hinweis:

    Wenn als Framework Drupal oder Joomla ausgewählt ist, wird im Dialogfeld „Site-spezifische Code-Hinweise“ ein zusätzlicher Pfad zu einer Datei im Dreamweaver-Konfigurationsordner angezeigt.

    Löschen Sie diese Datei nicht, sie ist bei Verwendung dieser Frameworks zwingend erforderlich.

  5. Um festzulegen, wie eine bestimmte Datei oder ein bestimmter Ordner mithilfe der Funktion „Site-spezifische Code-Hinweise“ verarbeitet wird, wählen Sie die Datei bzw. den Ordner in der Liste aus und führen einen der folgenden Schritte aus:

    • Wählen Sie „Diesen Ordner analysieren“ aus, um den ausgewählten Ordner in die Analyse einzubeziehen.
    • Wählen Sie „Rekursiv“ aus, um alle Dateien und Unterordner in einem ausgewählten Verzeichnis einzubeziehen.
    • Klicken Sie auf die Schaltfläche „Erweiterungen“, um das Dialogfeld „Erweiterung(en) suchen“ zu öffnen, in dem Sie die Dateierweiterungen angeben können, die für eine bestimmte Datei oder einen bestimmten Ordner in die Analyse einbezogen werden sollen.

Site-Struktur speichern

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

  1. Beenden Sie Dreamweaver.

  2. Schritttext
  3. Erstellen Sie die gewünschte Struktur mit Dateien und Ordnern, indem Sie Dateien und Ordner nach Bedarf hinzufügen und löschen.

  4. Geben Sie einen Namen für die Site-Struktur an und klicken Sie auf „Speichern“.

Hinweis:

Wenn der angegebene Name bereits vorhanden ist, werden Sie aufgefordert, einen anderen Namen einzugeben oder zu bestätigen, dass Sie die Struktur mit dem gleichen Namen überschreiben möchten. Die Framework-Standardstrukturen können jedoch nicht überschrieben werden.

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.

  1. Zeigen Sie die Struktur an, die Sie umbenennen möchten.

  2. Klicken Sie auf die Symbolschaltfläche „Struktur umbenennen“ oben rechts im Dialogfeld.

  3. Geben Sie einen neuen Namen für die Struktur an und klicken Sie auf „Umbenennen“.

Hinweis:

Wenn der angegebene Name bereits vorhanden ist, werden Sie aufgefordert, einen anderen Namen einzugeben oder zu bestätigen, dass Sie die Struktur mit dem gleichen Namen überschreiben möchten. Die Framework-Standardstrukturen können jedoch nicht überschrieben werden.

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. 

  1. Klicken Sie auf die Schaltfläche mit dem Pluszeichen (+) über dem Fenster „Dateien“, um das Dialogfeld „Datei/Ordner hinzufügen“ zu öffnen.

  2. Geben Sie im Textfeld „Datei/Ordner hinzufügen“ den Pfad zu der Datei oder dem Ordner ein, die bzw. den Sie hinzufügen möchten. Sie können auch auf das Ordnersymbol neben dem Textfeld klicken, um zu einer Datei oder einem Ordner zu wechseln.

  3. Klicken Sie auf die Schaltfläche mit dem Pluszeichen (+) über dem Fenster „Erweiterungen“, um die Dateierweiterungen der Dateien anzugeben, die analysiert werden sollen.

    Hinweis:

    Durch die Angabe einer bestimmten Dateierweiterung wird die Analyse beschleunigt.

  4. Klicken Sie auf „Hinzufügen“.

Site nach Dateierweiterungen durchsuchen

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

  1. Klicken Sie im Dialogfeld „Site-spezifische Code-Hinweise“ auf die Schaltfläche „Erweiterungen“.

    Im Dialogfeld „Erweiterung(en) suchen“ sind die aktuellen durchsuchbaren Erweiterungen aufgeführt.

  2. Wenn Sie der Liste eine andere Erweiterung hinzufügen möchten, klicken Sie auf die Schaltfläche mit dem Pluszeichen (+) über dem Fenster „Erweiterungen“.

  3. Zum Löschen einer Erweiterung in der Liste klicken Sie auf die Schaltfläche mit dem Minuszeichen (-).

Schneller und einfacher Hilfe erhalten

Neuer Benutzer?