Benutzerhandbuch Abbrechen

Creative Cloud Libraries in Dreamweaver

 

 

Sie können kreative Elemente durchsuchen, verwalten und darauf zugreifen: in Dreamweaver-Projekten mit Adobe Stock sowie in anderen Adobe-Anwendungen.

Über Creative Cloud Libraries haben Sie von überall aus Zugriff auf Ihr Arbeitsmaterial. Sie können Bilder, Farben, Textstile u. v. m. in verschiedenen Creative Cloud-Desktop-Applikationen und Apps erstellen und erfassen. Greifen Sie dann in einem nahtlosen Arbeitsablauf aus anderen Desktop-Applikationen und Apps bequem darauf zu.

Sie können direkt in Dreamweaver auf CC Libraries zugreifen, um vorhandene Farben und Grafiken in Ihren Webseiten erneut zu verwenden. Außerdem können Sie Grafiken als „verknüpfte“ Elemente einfügen, sodass sie automatisch mit der Version in der Cloud aktualisiert werden und immer auf dem neuesten Stand sind.

Im Folgenden finden Sie weitere Informationen zur Verwendung von CC Libraries in Dreamweaver.

Das Bedienfeld „CC Libraries“

Das Bedienfeld „CC Libraries“ („Fenster“ > „CC Libraries“) ist der zentrale Zugangspunkt zu Ihren in der Creative Cloud gespeicherten Elementen. Im Bedienfeld können Sie auch nach Elementen in Adobe Stock suchen.

Bedienfeld „CC Libraries“
Bedienfeld „CC Libraries“

In diesem Bedienfeld können Sie folgende Aktionen ausführen:

  • Durchsuchen einer bestimmten Bibliothek nach Elementen, die in der Bibliothek gespeichert sind
  • Erstellen einer Bibliothek
  • Anzeigen einer Vorschau von Elementen in der ausgewählten Bibliothek
  • Verschieben oder Kopieren von Elementen, die auf Ihre Webseite eingefügt werden sollen
  • Eingeben eines Suchbegriffs, z. B. des vollständigen oder unvollständigen Namens eines Bildes, nach dem Adobe Stock durchsucht werden soll

Erste Schritte

Site in Dreamweaver definieren

Eine Site in Dreamweaver ist ein Ordner, in dem alle Bilder, Videos, Skripts, Stylesheets und andere Dateien für Ihre Webseiten gespeichert werden. Wenn Sie eine Site im Voraus definieren, können Sie die Elemente, die Sie aus CC Libraries auf die Site importieren, einfacher speichern. Stellen Sie sicher, dass die Webseite, in die Sie Elemente aus CC Libraries importieren möchten, auch im Site-Ordner gespeichert ist.

Weitere Informationen zum Erstellen von Sites finden Sie unter Einrichten einer lokalen Version Ihrer Site.

Elemente zu CC Libraries hinzufügen

Indem Sie sicherstellen, dass alle erforderlichen Elemente in Creative Cloud verfügbar sind, sorgen Sie dafür, dass die Elemente schnell in Ihre Webseite in Dreamweaver importiert werden können.

Wenn Sie auf der Suche nach Bildern sind, werfen Sie einen Blick auf die riesige Auswahl von Adobe Stock. Ausführliche Informationen finden Sie unter Elemente aus Adobe Stock abrufen.

Grafiken und Farben, die Sie aus verschiedenen Apps und Desktop-Applikationen von Adobe erfasst oder erstellt haben, können in Creative Cloud gespeichert und in Ihre Webseiten importiert werden. Dies kann z. B. eine Vektorgrafik sein, die mit Adobe Shape CC erstellt wurde, oder ein in Photoshop verarbeitetes Bild. Über Creative Cloud können Sie außerdem mit Ihrem Team zusammenarbeiten, eigene Elemente freigeben und Elemente von anderen Kreativen wiederverwenden.

Weitere Informationen zu Creative Cloud Libraries finden Sie unter Creative Cloud Libraries.

Elemente aus Adobe Stock abrufen

Adobe Stock ist eng in Creative Cloud Libraries integriert. Sie können nach Bildern suchen und sie auf eine der folgenden Arten in eine Ihrer CC-Bibliotheken einfügen:

  • Direkt von der Adobe Stock-Website aus
  • Mithilfe des Dreamweaver-Bedienfelds „CC Libraries“
  • Mithilfe des Bedienfelds „CC Libraries“ in einer anderen Adobe-Anwendung wie Photoshop oder Illustrator.

Sobald Sie die Bilder einer CC-Bibliothek hinzugefügt haben, folgen Sie den Anweisungen im Thema In CC Libraries gespeicherte Grafiken wiederverwenden, um diese Bilder in Ihre Webseiten einzubinden.

Wenn Sie noch nicht sicher wissen, ob Sie die Stock-Bilder gleich kaufen wollen, können Sie erst einmal mit Wasserzeichen versehene Stock-Bilder (Vorschau) in Ihre Bibliothek einfügen und diese Bilder als Platzhalter verwenden. Später können Sie diese Bilder direkt im Bedienfeld „CC Libraries“ in Dreamweaver und anderen Anwendungen oder über die Adobe Stock-Website erwerben. 

Suche nach Bildern auf Adobe Stock mit dem Bedienfeld „CC Libraries“
Suche nach Bildern auf Adobe Stock mit dem Bedienfeld „CC Libraries“

Wenn Sie ein Bild lizenzieren, werden alle Instanzen der mit Wasserzeichen versehenen Elemente in geöffneten Dokumenten auf die hochauflösende Version des lizenzierten Bilds aktualisiert.

In CC Libraries gespeicherte Farben und Farbthemen wiederverwenden

Farben und Farbthemen in der Live-Ansicht wiederverwenden

Von Anwendungen wie Illustrator, Photoshop oder Adobe Color CC aus können Sie Farben und Farbthemen in Ihren Creative Cloud-Bibliotheken speichern. Über das Bedienfeld „CC Libraries“ in Dreamweaver können Sie diese Farben und Farbthemen in Ihre Webseite importieren, indem Sie die folgenden Schritte ausführen:

  1. Führen Sie im Bedienfeld „CC Libraries“ eine der folgenden Aktionen durch:

    • Klicken Sie auf die gewünschte Farbe bzw. das Farbthema. Der Wert der Farbe bzw. des Farbthemas wird in die Zwischenablage kopiert.
    • Klicken Sie mit der rechten Maustaste auf die gewünschte Farbe oder das Farbthema und anschließend auf „RGB-Wert kopieren“ oder „HEX-Wert kopieren“. 
  2. Fügen Sie den Farbwert in der Codeansicht oder im CSS Designer ein.

Farben in der Codeansicht wiederverwenden

In Creative Cloud gespeicherte Farben stehen in der Codeansicht als Codehinweise zur Verfügung. Wählen Sie beim Verfassen von Code in der Codeansicht die gewünschten Farben in den Codehinweisen aus. Ein Creative Cloud-Symbol neben der Farbe in den Codehinweisen zeigt an, dass diese Farben in der Creative Cloud gespeichert sind.

Anzeige von Farben aus der Creative Cloud-Bibliothek in den Codehinweisen
Anzeige von Farben aus der Creative Cloud-Bibliothek in den Codehinweisen

In den Codehinweisen werden Farben angezeigt, die in der momentan im Bedienfeld „CC Libraries“ geöffneten Bibliothek verfügbar sind. In der Abbildung oben werden Farben aus der Bibliothek „Meine Bibliothek“ als Codehinweise zur Verfügung gestellt. Wenn Sie Farben aus einer anderen Creative Cloud-Bibliothek in den Codehinweisen anzeigen möchten, öffnen Sie im Bedienfeld „CC Libraries“ die gewünschte Bibliothek und setzen Sie dann Ihre Arbeit in der Codeansicht fort.

In CC Libraries gespeicherte Grafiken wiederverwenden

 Die Funktion zum Extrahieren des SVG-Formats aus einem Illustrator-Element in Dreamweaver wurde am 16. November 2021 eingestellt. Es wird empfohlen, diesen Workaround zu verwenden, um die Option „Bildformat“ zu aktivieren und Illustrator-Elemente (.ai) in die Formate PNG 32/PNG 24/PNG 8/JPEG zu konvertieren. Alternativ können Benutzer Illustrator-Elemente aus der Illustrator-Anwendung in das SVG-Format exportieren.

Sie können die mit Apps und Desktop-Applikationen von Adobe wie Photoshop, Adobe Illustrator, Adobe Shape CC oder Adobe Sketch CC erstellten Grafiken in Creative Cloud Libraries speichern. Über das Bedienfeld „CC Libraries“ können Sie Grafiken in der Live-Ansicht einfügen und mithilfe der Codehinweise können Sie Grafiken direkt in Ihren Code einfügen.

Sie können Grafiken aus CC Libraries einfügen als:

  • Verknüpfte Elemente: Wenn Sie Grafiken als verknüpfte Elemente einfügen, wird in der Live-Ansicht auf dem Element in der Ecke rechts unten ein kleines Cloud-Symbol angezeigt. Dies weist darauf hin, dass das Element mit dem ursprünglichen Element in der Cloud verknüpft ist. Das Cloud-Symbol wird auch im Bedienfeld „Elemente“ neben dem Element angezeigt.
  • Elemente ohne Verknüpfung: Elemente können als lokale Kopie in Webseiten eingefügt werden. Klicken Sie in der Live-Ansicht im Bedienfeld „CC Libraries“ mit der rechten Maustaste auf das gewünschte Element und wählen Sie „Ohne Verknüpfung einfügen“. Wenn Sie eine Kopie einer Grafik einfügen, wird das Element auf den lokalen Computer kopiert und nicht mit dem ursprünglichen Element in der Cloud verknüpft. Dies bedeutet, dass Änderungen und Aktualisierungen am Element in der Cloud keine Auswirkungen auf das Element in Dreamweaver haben.

Sie können auch mehrere Elemente gleichzeitig herunterladen und auf Ihrem Computer für die spätere Verwendung speichern.

Grafiken in der Live-Ansicht wiederverwenden

  1. Führen Sie einen der folgenden Schritte aus:

    1. Ziehen Sie die Grafik aus dem Bedienfeld „CC Libraries“ auf die Seite in der Live-Ansicht.

      Hinweis: : Wenn Sie Grafiken aus dem Bedienfeld „CC Libraries“ in die Live-Ansicht ziehen, wird diese als „verknüpfte“ Grafik eingefügt (wenn Sie eine Site definiert haben).

      Illustrator-Dateien werden standardmäßig als weboptimierte SVG-Dateien eingefügt. Wenn Sie die Eigenschaften von SVG-Dateien anpassen möchten, können Sie die Einstellungen in der Datei options.json ändern. Weitere Informationen finden Sie unter Extrahieren von weboptimierten SVG-Dateien aus CC Libraries.

    2. Klicken Sie in der Live-Ansicht im Bedienfeld „CC Libraries“ mit der rechten Maustaste auf das gewünschte Element und wählen Sie eine der folgenden Optionen:

      • „Mit Verknüpfung einfügen“, um die Grafik als verknüpftes Element einzufügen. Dadurch bleibt der Verweis auf das entsprechende Element in der Cloud erhalten. Jede Änderung am Element in der Cloud wirkt sich auch auf das verknüpfte Element in Dreamweaver aus.
      • „Ohne Verknüpfung einfügen“, um die Grafik als nicht verknüpftes Element einzufügen.
  2. Das Dialogfeld „Sampling“ wird angezeigt. Geben Sie darin den Dateinamen und die Abmessungen des Bilds an. Ausführliche Informationen finden Sie unter Auflösungsoptionen für Grafiken angeben.

Grafiken in der Codeansicht wiederverwenden

In Ihren Creative Cloud-Bibliotheken gespeicherte Grafiken stehen in der Codeansicht als Codehinweise zur Verfügung. Öffnen Sie zunächst die erforderliche Bibliothek, indem Sie sie im Bedienfeld „CC Libraries“ auswählen. Wechseln Sie dann in die Codeansicht und wählen Sie beim Eingeben des Codes die erforderliche Grafik aus den Codehinweisen aus. Ein Creative Cloud-Symbol neben der Grafik in den Codehinweisen zeigt an, dass die Grafik in Creative Cloud gespeichert ist.

Anzeige von Grafiken aus CC Libraries in den Codehinweisen
Anzeige von Grafiken aus CC Libraries in den Codehinweisen

Hinweis: Wenn Sie mithilfe von Codehinweisen Grafiken einfügen, so werden sie als Grafiken ohne Verknüpfung eingefügt.

Wenn Sie Farben aus einer anderen Creative Cloud-Bibliothek in den Codehinweisen anzeigen möchten, öffnen Sie im Bedienfeld „CC Libraries“ die gewünschte Bibliothek und setzen Sie dann Ihre Arbeit in der Codeansicht fort.

Auflösungsoptionen für Grafiken angeben

Über die Felder „Höhe“ und „Breite“ können Sie das Element mithilfe des Bildoptimierungsmoduls von Dreamweaver neu auflösen lassen. Außerdem können Sie den Formattyp wählen, mit dem das Element platziert werden soll. Mit dem Symbol für die Cloud-Aktivierung wird angegeben, dass das Element als verknüpftes Element platziert wird. Nachdem Sie den Dateinamen und die Auflösungsoptionen festgelegt haben, drücken Sie die Eingabetaste, um das Element einzufügen.

Bildauflösung neu berechnen
Bildauflösung neu berechnen

 Hinweis:

  • Die SVG-Option ist nur für AI-Dateien aus Illustrator verfügbar, es ist die Standardeinstellung für Dateien dieses Formats. Sie können das Format dieser Dateien in der Dropdownliste im Dialogfeld „Neuberechnen“ in „JPEG“ ändern.
  • JPEG-Dateien können nur als JPEG-Dateien eingefügt werden, daher ist für solche Dateien kein anderes Format verfügbar.

Grafiken bearbeiten

Über das Bedienfeld „CC Libraries“ können Sie InDesign- und Illustrator-Elemente schnell in den entsprechenden Anwendungen öffnen und bearbeiten. Klicken Sie hierzu im Bedienfeld „CC Libraries“ mit der rechten Maustaste auf ein Element und klicken Sie dann auf „Bearbeiten“.

Stellen Sie sicher, dass die nativen Anwendungen (InDesign bzw. Illustrator) auf demselben Computer wie die verwendete Dreamweaver-Instanz installiert sind. Achten Sie außerdem darauf, dass Sie die aktuellen Updates für diese Anwendungen von Creative Cloud heraus installiert haben.

Elementverknüpfungen aufheben und verknüpfte Grafiken neu auflösen oder umbenennen

Sie können den Namen und die Größe von Bildern ändern, die aus CC Libraries mit einer der folgenden Optionen in Ihre Webseite importiert worden ist, oder die Bilder neu berechnen:

  • Klicken Sie in der Live-Ansicht auf das Element und klicken Sie dann auf das Cloud-Symbol. 
  • Klicken Sie mit der rechten Maustaste auf das Element und dann auf „Optionen für verknüpfte Elemente“.
  • Doppelklicken Sie im Bedienfeld „Elemente“ neben dem Elementnamen auf das Cloud-Symbol.

Das Dialogfeld „Neuberechnen“ wird angezeigt, in dem Sie die erforderlichen Eigenschaften ändern können. Um die Verknüpfung des Elements mit seiner Quelle in CC Libraries aufzuheben, klicken Sie im Dialogfeld „Neuberechnen“ auf das Cloud-Symbol.

Wenn Sie die Verknüpfung eines Elements aufheben, werden Änderungen an der Originaldatei in Creative Cloud nicht im Bild auf Ihrer Webseite widergespiegelt.

Grafiken herunterladen

Sie können mehrere Grafiken gleichzeitig als verknüpfte Elemente aus CC Libraries herunterladen und zu einem späteren Zeitpunkt in Ihr Projekt einfügen. Wenn Sie diese Elemente in Ihren Projekten verwenden, bleibt die Verknüpfung mit dem entsprechenden Bibliothekselement erhalten. 

  • Verknüpft: Klicken Sie im Bedienfeld „CC Libraries“ mit der rechten Maustaste auf ein Element und wählen Sie „Verknüpfte Elemente herunterladen“, um Grafiken als verknüpfte Elemente herunterzuladen. Es wird ein Popupfenster mit Optionen für den Dateinamen und zur Berechnung der Auflösung angezeigt. Geben Sie einen Dateinamen und die Optionen für die Auflösung an und drücken Sie anschließend die Eingabetaste, um das Element in Ihrem Site-Ordner zu speichern.
  • Ohne Verknüpfung: Klicken Sie im Bedienfeld „CC Libraries“ mit der rechten Maustaste auf das gewünschte Element und wählen Sie „Kopie herunterladen“, um Grafiken ohne Verknüpfung herunterzuladen. Es wird ein Popupfenster mit Optionen für den Dateinamen und zur Berechnung der Auflösung angezeigt. Geben Sie einen Dateinamen und die Optionen für die Auflösung an und drücken Sie anschließend die Eingabetaste, um das Element in Ihrem Site-Ordner zu speichern.

Schneller und einfacher Hilfe erhalten

Neuer Benutzer?