Mit Elementen arbeiten

Zuletzt aktualisiert am 25. April 2024

Im Bedienfeld „Elemente“ in Dreamweaver können Sie die Elemente in der aktuellen Site verwalten.

Mithilfe von Adobe Dreamweaver können Sie die auf der Site gespeicherten Elemente, z. B. Bilder, Filme, Farben, Skripts und Hyperlinks, verwalten und in der Vorschau anzeigen. Sie können ein Element auch durch Ziehen direkt in einer Seite des aktuellen Dokuments einfügen.

Sie können Elemente aus unterschiedlichen Quellen verwenden. Du kannst zum Beispiel Assets in einer Anwendung wie Adobe Photoshop oder Adobe Animate erstellen oder sie von einem Kollegen erhalten oder sie von einer Clip-Art-CD oder einer Website kopieren.

In Dreamweaver haben Sie außerdem Zugriff auf zwei spezielle Arten von Elementen: Bibliotheken und Vorlagen. Bei beiden handelt es sich um verknüpfte Elemente: Wenn Sie Bibliothekselemente oder Vorlagen bearbeiten, werden in Dreamweaver alle Dokumente aktualisiert, in denen diese Elemente verwendet werden. Bibliothekselemente sind im Allgemeinen kleine Designelemente, beispielsweise das Logo einer Site oder Copyright-Hinweise. Mithilfe von Vorlagen können Sie größere Designbereiche verwalten.

Im Bedienfeld „Elemente“ („Fenster“ > „Elemente“) können Sie die Elemente in der aktuellen Site verwalten. Im Bedienfeld „Elemente“ werden Elemente der Site angezeigt, die zu dem im Dokumentfenster aktiven Dokument gehört.

Anmerkung

Sie müssen eine lokale Site definieren, bevor Sie Elemente im Bedienfeld „Elemente“ anzeigen können.

Bedienfeld „Elemente“ in der Live-Ansicht
Bedienfeld „Elemente“ in der Live-Ansicht

Bedienfeld „Elemente“ in der Entwurfs- und Codeansicht

Das Assets-Panel bietet verschiedene Möglichkeiten, Assets anzuzeigen:

Siteliste

Zeigt alle Assets deiner Website an, einschließlich Farben und URLs, die in jedem Dokument deiner Website verwendet werden.

Favoritenliste

Zeigt nur die Elemente an, die Sie ausdrücklich ausgewählt haben.

Um zwischen diesen beiden Ansichten zu wechseln, wähle entweder das Optionsfeld Bereich oder Favoriten über dem Vorschaubereich aus.(Diese beiden Ansichten sind für die Kategorien Vorlagen und Bibliothek nicht verfügbar.)

Anmerkung

Die meisten Vorgänge im Bedienfeld „Elemente“ können in beiden Listen durchgeführt werden. Einige Aufgaben können jedoch nur in der Favoritenliste ausgeführt werden.

In beiden Listen sind Elemente einer der folgenden Kategorien zugeordnet:

Bilder

Grafikdateien in GIF-, JPEG- oder PNG-Formaten.

Farben

Farben, die in Dokumenten und Stylesheets verwendet werden, einschließlich Farben von Text, Hintergründen und Links.

URLs

Externe Links in deinen aktuellen Bereichsdokumenten, einschließlich FTP-, Gopher-, HTTP-, HTTPS-, JavaScript-, E-Mail-(mailto) und lokale Datei-(file://) Links.

Medien

Mediendateien wie Adobe Flash (nur SWF)-Dateien, Adobe Shockwave-Dateien, QuickTime- oder MPEG-Dateien.

Skripts

JavaScript- oder VBScript-Dateien. Skripts in HTML-Dateien (im Gegensatz zu unabhängigen JavaScript- oder VBScript-Dateien) werden im Bedienfeld „Elemente“ nicht angezeigt. Diese Kategorie ist nur in der Code- und Designansicht verfügbar.

Vorlagen

Masterseiten-Layouts, die auf mehreren Seiten verwendet werden. Beim Ändern einer Vorlage werden automatisch alle mit der Vorlage verbundenen Seiten geändert. Diese Kategorie ist nur in der Code- und Designansicht verfügbar.

Bibliothekselemente

Designelemente, die auf mehreren Seiten verwendet werden. Wenn Sie Änderungen an einem Bibliothekselement vornehmen, werden alle Seiten aktualisiert, die dieses Element enthalten. Diese Kategorie ist nur in der Code- und Designansicht verfügbar.

Anmerkung

Damit eine Datei im Bedienfeld „Elemente“ angezeigt wird, muss sie einer dieser Kategorien angehören. Einige andere Dateitypen werden zwar manchmal auch als Elemente bezeichnet, werden jedoch nicht im Bedienfeld „Elemente“ angezeigt.

Standardmäßig werden Assets in einer Kategorie alphabetisch nach Namen aufgelistet, aber du kannst sie nach Typ und verschiedenen anderen Kriterien sortieren.Du kannst auch eine Vorschau von Assets anzeigen und die Spalten und den Vorschaubereich in der Größe ändern.

Das Creative Cloud-Symbol in der Spalte „Typ“ gibt an, dass die entsprechenden Elemente aus den Creative Cloud-Bibliotheken importiert werden. Sie können auf das Creative Cloud-Symbol doppelklicken, um das entsprechende Element neu aufzulösen. Weitere Informationen zur Wiederverwendung von Assets in Creative Cloud Libraries findest du unter Creative Cloud Libraries in Dreamweaver.

Elemente im Vorschaubereich anzeigen

Wählen Sie das entsprechende Element im Bedienfeld „Elemente“ aus.

Elemente in einer Kategorie anzeigen

Klicke auf ein Kategoriesymbol auf der linken Seite des Assets-Bedienfelds.

Elemente sortieren

Klicken Sie auf eine Spaltenüberschrift.

Um beispielsweise die Liste der Bilder nach Typ zu sortieren (sodass alle GIF-Bilder zusammen, alle JPEG-Bilder zusammen und so weiter sind), klicke auf die Spaltenüberschrift Typ.

Größe von Spalten ändern

Ziehe die Linie, die zwei Spalten überschriften trennt.

Größe des Vorschaubereichs ändern

Ziehe die Teilerlinie (zwischen dem Vorschau bereich und der Liste der Assets) nach oben oder unten.

Bedienfeld „Elemente“ aktualisieren

Es kann einige Sekunden dauern, die Bereichsliste zu erstellen, da Dreamweaver zuerst den Bereichs-Cache lesen muss.

Bestimmte Änderungen werden nicht sofort im Bedienfeld „Elemente“ angezeigt. Beim Hinzufügen oder Entfernen eines Elements auf einer Site werden die Änderungen im Bedienfeld „Elemente“ beispielsweise erst angezeigt, wenn Sie die Siteliste aktualisieren, indem Sie auf die Schaltfläche „Siteliste aktualisieren“ klicken. Wenn du ein Asset außerhalb von Dreamweaver hinzufügst oder entfernst – zum Beispiel mit Windows Explorer oder dem Finder – musst du den Site-Cache neu erstellen, um das Assets-Panel zu aktualisieren.

Wenn Sie die einzige Instanz einer bestimmten Farbe oder URL aus einer Site entfernen oder eine neue Datei speichern, die eine bisher nicht verwendete Farbe oder URL enthält, werden die Änderungen im Bedienfeld „Elemente“ erst wirksam, wenn Sie die Siteliste aktualisieren.

  • Um die Bereichsliste manuell zu aktualisieren, klicke auf den Button Bereichsliste aktualisieren .Dreamweaver erstellt den Bereichs-Cache oder aktualisiert ihn nach Bedarf.
  • Um die Bereichsliste zu aktualisieren und den Bereichs -Cache manuell neu zu erstellen, klicke mit der rechten Maustaste (Windows) oder Command-Klick (Macintosh) in die Assets-Liste und wähle dann Bereichsliste aktualisieren aus.

Elemente in ein Dokument einfügen

Sie können die meisten Elemente in ein Dokument einfügen, indem Sie sie mit der Maus in die Live-, Code- oder Entwurfsansicht des Dokumentfensters ziehen oder indem Sie im Bedienfeld auf die Schaltfläche „Einfügen“ klicken. Du kannst die Assets sowohl aus der Listenansicht als auch aus dem Vorschaubereich des Assets-Bedienfelds ziehen.

Hinweis: Das Ziehen aus dem Vorschaubereich wird nur auf Mac unterstützt.

Farben und URLs können in der Entwurfs- und in der Live-Ansicht eingefügt werden. In der Designansicht kannst du Farben und URLs auf ausgewählte Elemente anwenden.

 

Platziere im Dokument die Einfügemarke an der Stelle, an der das Asset erscheinen soll.

Wähle im Assets-Bedienfeld aus den Asset-Kategorie-Buttons links aus.
Anmerkung

Sie können jede Kategorie mit Ausnahme von „Vorlagen“ auswählen. Eine Vorlage wird auf ein ganzes Dokument angewendet; sie kann nicht in ein Dokument eingefügt werden.

Wähle entweder Bereich oder Favoriten oben im Bedienfeld aus, dann wähle das Asset aus.

Es gibt keine Site- oder Favoritenlisten für Bibliothekselemente; überspringe diesen Schritt, wenn du ein Bibliothekselement einfügst.

Führen Sie einen der folgenden Schritte aus:
  • Ziehen Sie das Element aus dem Bedienfeld in das Dokument. Du kannst sowohl aus der Listenansicht als auch aus dem Vorschaubereich ziehen.

    Hinweis: Unter Windows kannst du keine Assets aus dem Vorschaubereich ziehen.

    Skripts können in den head-Inhaltsbereich des Dokumentfensters gezogen werden. Wenn dieser Bereich nicht angezeigt wird, wählen Sie „Ansicht“ > „Head-Inhalt“ aus.

  • Wählen Sie im Bedienfeld das entsprechende Element aus und klicken Sie auf „Einfügen“.

    Wenn es sich bei dem eingefügten Element um eine Farbe handelt, wird diese auf den hinter der Einfügemarke angezeigten Text angewendet.

Farbe auf Text mit dem Assets-Bedienfeld anwenden

Das Assets-Bedienfeld zeigt die Farben, die du bereits auf verschiedene Elemente angewendet hast, wie Text, Tabellenrahmen, Hintergründe und so weiter.

Führe in der Designansicht die folgenden Schritte aus:

Wählen Sie den Text im Dokument aus.

Wähle im Assets-Bedienfeld die Kategorie Farben aus.

Wähle die gewünschte Farbe aus und klicke auf Anwenden.

Führe in der Live-Ansicht die folgenden Schritte aus:

Wähle im Assets-Bedienfeld die Kategorie Farben aus.

Führen Sie einen der folgenden Schritte aus:

  • Klicken Sie mit der rechten Maustaste im Bedienfeld „Elemente“ auf die Farbe und klicken Sie auf „Farbwert kopieren“. Der Farbwert wird in Ihre Zwischenablage kopiert. Du kannst jetzt den Farbwert (Strg+V, Cmd+V) in CSS Designer einfügen.
  • Ziehen Sie die Farbe aus der Vorschau und schieben Sie die Maus über die Elemente in der Live-Ansicht. Wenn du die Farbe ablegst, erscheint das Dialogfeld Neue CSS-Regel und wenn du auf OK klickst, wird die Farbe auf das ausgewählte Element angewendet.
  • Klicken Sie im Bedienfeld „Elemente“ auf „Anwenden“. Das Dialogfeld Neue CSS-Regel erscheint und wenn du auf OK klickst, wird die Farbe auf das ausgewählte Element angewendet.

URLs zu Bildern oder Text zuweisen

Führe in der Designansicht die folgenden Schritte aus:

Wähle den Text oder das Bild aus.

Wähle im Assets-Bedienfeld die Kategorie URLs entweder in der Bereiche- oder Favoriten-Ansicht aus, je nachdem, wo die URL gespeichert ist.

Anmerkung

URLs für die Dateien Ihrer Site werden standardmäßig in der Sites-Ansicht gespeichert.Die Favoriten-Ansicht enthält URLs, die du selbst hinzugefügt hast.

Wählen Sie die gewünschte URL aus.
Führen Sie einen der folgenden Schritte aus:
  • Ziehe die URL aus dem Bedienfeld auf die Auswahl in der Entwurfsansicht.

  • Wählen Sie die URL aus und klicken Sie dann auf die Schaltfläche „Einfügen“.

Führe in der Live-Ansicht die folgenden Schritte aus:

Wähle im Assets-Bedienfeld die URLs-Kategorie entweder in der Sites- oder Favoriten-Ansicht aus, je nachdem, wo die URL gespeichert ist.

Führen Sie einen der folgenden Schritte aus:

  • Ziehen Sie die URL aus der Vorschau oder aus der Listenansicht heraus. Schieben Sie die Maus über Elemente in der Live-Ansicht. Wenn du die URL loslässt, umschließt <a> das in der Live-Ansicht hervorgehobene Element.
  • Klicken Sie in der Live-Ansicht auf das benötigte Element. Wählen Sie im Bedienfeld „Elemente“ die URL aus und klicken Sie auf „Anwenden“. Das ausgewählte Element wird mit dem <a>-Tag umschlossen.

Elemente auswählen und bearbeiten

Das Assets-Bedienfeld ermöglicht es dir, mehrere Assets gleichzeitig auszuwählen. Außerdem können Sie über das Bedienfeld „Elemente“ schnell Elemente bearbeiten.

Mehrere Elemente auswählen

Wählen Sie im Bedienfeld „Elemente“ ein Element aus.
Führen Sie dann einen der folgenden Schritte aus, um weitere Elemente auszuwählen:
  • Umschalt-Klicke, um eine aufeinanderfolgende Serie von Assets auszuwählen.

  • Strg-Klicke (Windows) oder Befehl-Klicke (Macintosh), um ein einzelnes Asset zur Auswahl hinzuzufügen (unabhängig davon, ob es benachbart zur bestehenden Auswahl ist oder nicht). Strg-Klicke oder Befehl-Klicke auf ein ausgewähltes Asset, um es abzuwählen.

Elemente bearbeiten

Wenn du ein Asset im Assets-Panel bearbeitest, variiert das Verhalten je nach Asset-Typ.Für einige Assets, wie beispielsweise Bilder, verwendest du einen externen Editor, der sich automatisch öffnet, wenn du einen Editor für diesen Asset-Typ definiert hast.Du kannst Farben und URLs nur in der Favoritenliste bearbeiten. Wenn du Vorlagen und Bibliothekselemente bearbeitest, nimmst du die Änderungen in Dreamweaver vor.

Führe im Assets-Bedienfeld einen der folgenden Schritte aus:
  • Doppelklicken Sie auf das gewünschte Element.

  • Wähle das Asset aus und klicke dann auf die Schaltfläche Bearbeiten.

Anmerkung

Wenn das Element in einem externen Editor bearbeitet werden muss und der Editor nicht automatisch geöffnet wird, wählen Sie „Bearbeiten“ > „Voreinstellungen“ (Windows) bzw. „Dreamweaver“ > „Voreinstellungen“ (Macintosh) und anschließend die Kategorie „Dateitypen/Editoren“ aus. Stellen Sie dann sicher, dass für diese Elementart ein externer Editor definiert ist.

Nehmen Sie die gewünschten Änderungen vor.
Führen Sie abschließend einen der folgenden Schritte aus:
  • Wenn es sich bei dem Element um eine Datei handelt (alle Elemente außer Farben und URLs), speichern und schließen Sie die Datei mit dem entsprechenden Editor.

  • Wenn das Element eine URL ist, klicken Sie im Dialogfeld „URL bearbeiten“ auf „OK“.

Anmerkung

Wenn das Element eine Farbe ist, wird der Farbwähler nach der Auswahl einer Farbe automatisch geschlossen. Wenn Sie den Farbwähler schließen möchten, ohne eine Farbe auszuwählen, drücken Sie die Esc-Taste.

Elemente auf anderen Sites wiederverwenden

Das Assets-Panel zeigt alle Assets (erkannter Typen) deiner aktuellen Site an.Um ein Asset aus der aktuellen Site in einer anderen Site zu verwenden, musst du es in die andere Site kopieren. Du kannst ein einzelnes Asset, mehrere einzelne Assets oder einen gesamten Favoriten-Ordner auf einmal kopieren.

Möglicherweise musst du die Datei im Dateien-Bedienfeld suchen, die einem Asset im Assets-Bedienfeld entspricht, bevor du das Asset zu deiner Remote- Site überträgst oder von ihr überträgst.

Anmerkung

Das Dateien-Bedienfeld zeigt möglicherweise eine andere Site an als diejenige, die das Assets-Bedienfeld anzeigt. Das liegt daran, dass das Assets-Bedienfeld mit dem aktiven Dokument verknüpft ist.

Eine Asset-Datei im Dateien- Bedienfeld suchen

Wähle im Assets-Bedienfeld die Kategorie des Assets aus, das du finden möchtest.
Klicke mit der rechten Maustaste (Windows) oder bei gedrückter Ctrl-Taste (Macintosh) auf den Namen oder das Symbol des Assets im Assets-Bedienfeld und wähle dann Im Site-Bereich suchen aus dem Kontextmenü aus.
Anmerkung

Locate In Site ist für Farben und URLs nicht verfügbar, die keinen Dateien auf der Website entsprechen.

Das Bedienfeld Dateien wird geöffnet und die Asset-Datei ist ausgewählt. Der Befehl Locate In Site findet die Datei, die dem Asset selbst entspricht; er findet keine Dateien, die dieses Asset verwenden.

Assets aus dem Assets-Panel auf eine andere Site kopieren

Wähle im Asset-Bedienfeld die Kategorie des Assets aus, das du kopieren möchtest.
Klicke mit der rechten Maustaste (Windows) oder mit gedrückter Ctrl-Taste (Macintosh) auf ein oder mehrere Assets in der Bereichsliste oder der Favoritenliste, wähle Auf Bereich kopieren aus und wähle den Namen des Zielbereichs aus dem Untermenü aus, das alle von dir definierten Bereiche auflistet.
Anmerkung

In der Favoritenliste kannst du einen Favoritenordner sowie einzelne Assets kopieren.

Die Assets werden an ihre entsprechenden Speicherorte in der Ziel-Site kopiert.Dreamweaver legt neue Ordner in der Hierarchie des Zielbereichs nach Bedarf an.Die Assets werden auch zur Favoritenliste der Ziel-Site hinzugefügt.

Anmerkung

Wenn das Asset, das du kopiert hast, eine Farbe oder eine URL ist, erscheint es nur in der Favoritenliste der Ziel-Site.Da Farben und URLs nicht mit Dateien verknüpft sind, gibt es keine Datei, die in den anderen Bereich kopiert werden könnte.