Klicken Sie in den Text oder wählen Sie ein Objekt auf der Seite aus.
Zuletzt aktualisiert am
27. April 2021
In diesem Thema erfahren Sie, wie Sie in Adobe Dreamweaver mithilfe des Eigenschafteninspektors Code in der Entwurfsansicht bearbeiten können.
Dreamweaver ermöglicht es dir, Web-Seiten visuell zu erstellen und zu bearbeiten, ohne dir Gedanken über den zugrunde liegenden Quellcode machen zu müssen. Es gibt jedoch Situationen, in denen du den Code bearbeiten musst, um mehr Kontrolle zu haben oder Probleme mit deiner Web-Seite zu beheben. Dreamweaver ermöglicht es dir, Code zu bearbeiten, während du in der Designansicht arbeitest.
Dieser Abschnitt richtet sich an Personen, die bevorzugt in der Designansicht arbeiten, aber auch schnellen Zugriff auf den Code wünschen.
In der Entwurfsansicht untergeordnete Tags auswählen
Wenn du ein Objekt in der Designansicht auswählst, das untergeordnete Tags enthält – beispielsweise eine HTML-Tabelle –, kannst du schnell das erste untergeordnete Tag dieses Objekts auswählen, indem du Bearbeiten > Untergeordnetes Element auswählen wählst.
Anmerkung
Dieser Befehl ist nur in der Entwurfsansicht verfügbar.
Beispielsweise hat das <table>-Tag normalerweise <tr>-Tags als untergeordnete Elemente. Wenn du ein <table>-Tag im Tag-Selektor auswählst, kannst du die erste Zeile in der Tabelle auswählen, indem du Bearbeiten > Untergeordnetes Element auswählen wählst. Dreamweaver wählt das erste <tr>-Tag im Tag-Selektor aus. Da das <tr>-Tag selbst untergeordnete Tags hat, nämlich <td>-Tags, wählt die erneute Auswahl von Bearbeiten > Untergeordnetes Element auswählen die erste Zelle in der Tabelle aus.
Code im Eigenschafteninspektor bearbeiten
Du kannst den Eigenschafteninspektor verwenden, um Eigenschaften von Text oder Objekten auf deiner Seite zu überprüfen und zu bearbeiten. Die Eigenschaften, die im Eigenschafteninspektor angezeigt werden, entsprechen in der Regel Attributen von Tags. Das Ändern einer Eigenschaft im Eigenschafteninspektor hat normalerweise denselben Effekt wie das Ändern des entsprechenden Attributs in der Codeansicht.
Anmerkung
Der Tag-Inspektor und der Eigenschafteninspektor ermöglichen es dir beide, die Attribute eines Tags anzuzeigen und zu bearbeiten. Der Tag-Inspektor ermöglicht es dir, jedes Attribut anzuzeigen und zu bearbeiten, das mit einem bestimmten Tag verknüpft ist. Der Eigenschafteninspektor zeigt nur die häufigsten Attribute an, bietet aber umfangreichere Steuerungen zum Ändern der Werte dieser Attribute und ermöglicht es dir, bestimmte Objekte (wie Tabellenspalten) zu bearbeiten, die nicht spezifischen Tags entsprechen.
Der Eigenschafteninspektor für den Text oder das Objekt wird unterhalb des Dokumentfensters angezeigt. Wenn der Eigenschafteninspektor nicht sichtbar ist, wähle Fenster > Eigenschaften.
Nehmen Sie im Eigenschafteninspektor die gewünschten Attributänderungen vor.
CFML-Code im Eigenschafteninspektor bearbeiten
Verwende den Eigenschafteninspektor, um ColdFusion-Markup in der Designansicht zu überprüfen und zu ändern.
Klicke im Eigenschafteninspektor auf den Button Attribute,
um die Attribute des Tags zu bearbeiten oder neue hinzuzufügen.
Wenn das Tag Content zwischen seinen öffnenden und schließenden
Tags enthält, klicke auf den Button Content, um den Inhalt zu bearbeiten.
Der Button Content wird nur angezeigt, wenn das ausgewählte Tag kein leeres Tag ist (das heißt, wenn es sowohl ein öffnendes als auch ein schließendes Tag hat).
Wenn das Tag einen bedingten Ausdruck enthält, nimm Änderungen
daran im Feld Ausdruck vor.
Überblick über den Quick Tag Editor
Du verwendest den Schnell-Tag-Editor, um HTML-Tags schnell zu überprüfen, einzufügen und zu bearbeiten, ohne die Designansicht zu verlassen.
Wenn du ungültiges HTML im Schnell-Tag-Editor eingibst, versucht Dreamweaver, es für dich zu korrigieren, indem es schließende Anführungszeichen und schließende spitze Klammern nach Bedarf einfügt.
Um die Optionen des Schnell-Tag-Editors festzulegen, öffne den Schnell-Tag-Editor durch Drücken von Strg+T (Windows) oder Befehl+T (Macintosh).
Im Quick Tag Editor stehen drei verschiedene Modi zur Verfügung:
- Im HTML-Einfügemodus können Sie neuen HTML-Code einfügen.
- „Tag bearbeiten“ dient zur Bearbeitung vorhandener Tags.
„HTML einfügen“ wird zum Einfügen von neuem HTML-Code verwendet
„Tag bearbeiten“ dient zur Bearbeitung vorhandener Tags.
Im Modus „Tag um Objekt legen“ können Sie ein neues Tag um die aktuelle Auswahl legen.
Anmerkung
In welchem Modus der Quick Tag Editor geöffnet wird, hängt von der aktuellen Auswahl in der Entwurfsansicht ab.
In allen drei Modi ist die grundlegende Vorgehensweise für die Verwendung des Quick Tag Editor dieselbe: Zuerst öffnen Sie den Editor, anschließend können Sie Tags und Attribute eingeben oder bearbeiten und dann schließen Sie den Editor.
Sie können zwischen den Modi umschalten, indem Sie Strg+T (Windows) bzw. Befehl+T (Mac) drücken, während der Quick Tag Editor aktiv ist.
Code im Quick Tag Editor bearbeiten
Mit dem Quick Tag Editor („Bearbeiten“ > „Quick Tag Editor“ können Sie HTML-Tags schnell überprüfen, einfügen und bearbeiten ohne die Entwurfsansicht zu verlassen.
HTML-Tags einfügen
Klicke in der Designansicht auf die
Seite, um die Einfügemarke an der Stelle zu platzieren, an der du Code einfügen möchtest.
Drücken Sie Strg+T (Windows) bzw. Befehl+T (Mac).
Der Quick Tag Editor wird im HTML-Einfügemodus geöffnet.
Geben Sie das HTML-Tag ein und drücken Sie die Eingabetaste.
Das Tag wird in deinen Code eingefügt, zusammen mit einem passenden schließenden Tag, falls zutreffend.
Drücken Sie die Esc-Taste, um den Modus zu beenden, ohne Änderungen vorzunehmen.
HTML-Tags bearbeiten
Wählen Sie in der Entwurfsansicht ein Objekt aus.
Du kannst auch den Tag auswählen, den du bearbeiten möchtest, über die Tag-Auswahl am unteren Rand des Dokument-Fensters. Weitere Informationen findest du unter Code mit der Tag-Auswahl bearbeiten.
Drücken Sie Strg+T (Windows) bzw. Befehl+T (Mac).
Der Quick Tag Editor wird im Tag-Bearbeitungsmodus geöffnet.
Gib neue Attribute ein, bearbeite vorhandene Attribute oder bearbeite
den Namen des Tags.
Drücke die Tab-Taste, um von einem Attribut zum nächsten zu wechseln;
drücke Umschalt+Tab, um zurückzugehen.
Anmerkung
Standardmäßig werden Änderungen auf das Dokument angewendet, wenn du Tab oder Umschalt+Tab drückst.
Um den Schnell-Tag-Editor zu schließen und alle Änderungen anzuwenden,
drücke die Eingabetaste.
Um den Modus zu beenden, ohne weitere Änderungen vorzunehmen, drücken Sie die Esc-Taste.
Die aktuelle Auswahl mit HTML-Tags umschließen
Wähle unformatierten Text
oder ein Objekt in der Entwurfsansicht aus.
Anmerkung
Wenn Sie Text oder ein Objekt mit einem öffnenden oder schließenden HTML-Tag auswählen, wird der Quick Tag Editor im Modus „Tag bearbeiten“ statt im Modus „Tag um Objekt legen“ geöffnet.
Drücke Strg+T (Windows) oder Befehl+T (Macintosh) oder
klicke auf den Schnell-Tag-Editor-Button im Eigenschafteninspektor.
Der Quick Tag Editor wird im Modus „Tag um Objekt legen“ geöffnet.
Gib einen einzelnen öffnenden Tag ein, wie strong,
und drücke die Eingabetaste (Windows) oder Return (Macintosh).
Das Tag wird am Anfang der aktuellen Auswahl eingefügt, und ein entsprechendes schließendes Tag wird am Ende eingefügt.
Um den Modus zu beenden, ohne Änderungen vorzunehmen, drücken Sie die Esc-Taste.
Das Hinweise-Menü im Schnell-Tag-Editor verwenden
Der Schnell-Tag-Editor enthält ein Attribut-Hinweise-Menü, das alle gültigen Attribute des Tags auflistet, den du bearbeitest oder einfügst.
Du kannst auch das Hinweise-Menü deaktivieren oder die Verzögerung anpassen, bevor das Menü im Schnell-Tag-Editor erscheint.
Um ein Hinweise-Menü zu sehen, das gültige Attribute für einen Tag auflistet, pausiere kurz beim Bearbeiten eines Attributnamens im Schnell-Tag-Editor. Ein Hinweise-Menü erscheint und listet alle gültigen Attribute für den Tag auf, den du bearbeitest.
Um ein Hinweise-Menü zu sehen, das gültige Tag-Namen auflistet, pausiere kurz beim Eingeben oder Bearbeiten eines Tag-Namens im Schnell-Tag-Editor.
Anmerkung
Die Codehinweis-Einstellungen des Schnell-Tag-Editors werden durch die normalen Codehinweis-Einstellungen gesteuert. Weitere Informationen findest du unter Codehinweis-Einstellungen festlegen.
Führen Sie einen der folgenden Schritte aus:
Beginnen Sie damit, einen Tag- oder Attributnamen einzugeben. Die Auswahl im Codehinweis-Menü springt zum ersten Element, das mit den Buchstaben beginnt, die du eingegeben hast.
Wählen Sie ein Element mit der Pfeil-nach-oben- bzw. Pfeil-nach-unten-Taste aus.
Verwenden Sie den Rollbalken, um ein Element zu finden.
Drücke die Eingabetaste, um das ausgewählte Element einzufügen, oder doppelklicke
auf ein Element, um es einzufügen.
Um das Hinweise-Menü zu schließen, ohne ein Element einzufügen, drücke
Escape oder tippe weiter.
Das Hinweise-Menü deaktivieren oder die Verzögerung vor dem Erscheinen ändern
Wähle Bearbeiten > Einstellungen
(Windows) oder Dreamweaver > Einstellungen (Macintosh)
und wähle Codehinweise.
Das Voreinstellungsdialogfeld für Codehinweise wird angezeigt.
Um das Hinweise-Menü zu deaktivieren, deaktiviere die Option Codehinweise aktivieren.
Code mit dem Tag-Selektor bearbeiten
Mit dem Tag-Selektor können Sie Tags auswählen, bearbeiten oder entfernen ohne die Entwurfsansicht zu verlassen. Der Tag-Selektor befindet sich in der Statusleiste unten im Dokumentfenster und zeigt eine Reihe von Tags an.
Tags bearbeiten oder löschen
Klicken Sie in das Dokument.
Die Tags, die an der Einfügemarke gelten, werden in der Tag-Auswahl angezeigt.
Klicke mit der rechten Maustaste (Windows) oder bei gedrückter Ctrl-Taste (Macintosh) auf ein
Tag in der Tag-Auswahl.
Um ein Tag zu bearbeiten, wählen Sie im Menü die Option „Tag bearbeiten“ Nimm deine
Änderungen im Quick Tag Editor vor.Weitere Informationen findest du unter Code mit dem Quick Tag Editor bearbeiten.
Um ein Tag zu löschen, wählen Sie im Menü die Option „Tag entfernen“.
Wähle ein Objekt aus, das einem Tag entspricht
Klicken Sie in das Dokument.
Die Tags, die an der Einfügemarke gelten, werden im Tag-Selektor angezeigt.
Klicken Sie im Tag-Selektor auf ein Tag.
Das durch das Tag repräsentierte Objekt wird auf der Seite ausgewählt.
Anmerkung
Verwende diese Technik, um einzelne Tabellenzeilen (tr Tags) oder Zellen (td Tags) auszuwählen.
Schreibe und bearbeite Skripte in der Designansicht
Du kannst mit Client-seitigen JavaScripts und VBScripts sowohl in der Code- als auch in der Design-Ansicht auf folgende Weise arbeiten:
Schreibe ein JavaScript- oder VBScript-Skript für deine Seite, ohne die Design-Ansicht zu verlassen.
Erstelle einen Link in deinem Dokument zu einer externen Skript-Datei, ohne die Design-Ansicht zu verlassen.
Bearbeite ein Skript, ohne die Design-Ansicht zu verlassen.
Wähle vor dem Start Ansicht > Visuelle Hilfen > Unsichtbare Elemente aus, um sicherzustellen, dass Skript-Markierungen auf der Seite angezeigt werden.
Clientseitige Skripts schreiben
Setze
den Einfügepunkt an die Stelle, an der du das Skript einfügen möchtest.
Wählen Sie „Einfügen“ > „HTML“ > „Skript“.
Wählen Sie im Dateiauswahlfenster das Skript aus.
Anmerkung
Sie brauchen die öffnenden und schließend Skript-Tags nicht einzufügen.
Das Skript-Tag für die ausgewählte Datei wird in das Dokument eingefügt.
Skripte bearbeiten
Wählen Sie die Skriptmarkierung aus.
Klicken Sie im Eigenschafteninspektor auf die Schaltfläche „Bearbeiten“.
Das Skript wird im Dialogfeld „Skripteigenschaften“ angezeigt.
Wenn du eine Verknüpfung zu einer externen Skriptdatei erstellt hast, öffnet sich die Datei in der Codeansicht, wo du deine Bearbeitungen vornehmen kannst.
Anmerkung
Wenn sich Code zwischen den Skript-Tags befindet, öffnet sich das Dialogfeld Skript-Eigenschaften, auch wenn eine Verknüpfung zu einer externen Skript-Datei vorhanden ist.
Gib im Feld Sprache entweder JavaScript oder VBScript
als Sprache des Skripts an.
Gib im Popup-Menü Typ den Typ des Skripts an,
entweder Client-seitig oder Server-seitig.
(Optional) Gib im Feld Quelle eine extern verknüpfte
Skript-Datei an.
Klicken Sie auf das Ordnersymbol oder auf die Schaltfläche „Durchsuchen“, um die Datei auszuwählen, oder geben Sie den Pfad ein.
Bearbeiten Sie das Skript und klicken Sie auf „OK“.
Bearbeite ASP Server-seitige Skripts in der Designansicht
Verwende den ASP-Skript-Eigenschafteninspektor, um ASP Server-seitige Skripts in der Designansicht zu überprüfen und zu ändern.
Wähle in der Designansicht das visuelle Symbol
des Server-Sprache-Tags aus.
Klicke im ASP-Skript-Eigenschafteninspektor auf den Button
Bearbeiten.
Bearbeiten Sie das serverseitige ASP-Skript und klicken Sie auf „OK“.
Bearbeite Skripts auf der Seite mit dem Eigenschafteninspektor
Wähle im Eigenschafteninspektor die
Scripting-Sprache aus dem Popup-Menü Sprache aus oder gib einen Sprachnamen
im Feld Sprache ein.
Anmerkung
Wenn du JavaScript verwendest und dir nicht sicher bist, welche Version du nutzt, wähle JavaScript anstatt JavaScript1.1 oder JavaScript1.2.
Gib im Popup-Menü Typ den Skript-Typ an,
entweder Client-seitig oder Server-seitig.
Optional: Geben Sie im Feld „Quelle“ eine extern verknüpfte Skriptdatei an. Klicken Sie auf das Ordnersymbol, um die Datei auszuwählen, oder geben Sie den Pfad ein.
Klicken Sie auf „Bearbeiten“, um das Skript zu ändern.
JavaScript-Verhalten verwenden
Du kannst JavaScript (Client-seitig) Verhalten ganz einfach an Seitenelemente anhängen, indem du die Registerkarte Verhalten des Tag-Inspektors verwendest. Weitere Informationen findest du unter Anwenden integrierter JavaScript-Verhaltensweisen in Dreamweaver.
Erstellen ansprechender Websites in Dreamweaver
Entwirf, code und verwalte dynamische Websites mit einem leistungsstarken All-in-one-Tool.
