Arbeiten mit Spry-Widgets (allgemeine Anweisungen)

Suchen
Adobe Dreamweaver Benutzerhandbuch

Auf dieser Seite

Gilt für: Adobe Dreamweaver

某些 Creative Cloud 应用程序、服务和功能在中国不可用。

Hinweis:

Spry-Widgets werden ab Dreamweaver CC durch jQuery-Widgets ersetzt. Sie können zwar vorhandene Spry-Widgets auf der Seite noch ändern, aber Sie können keine neuen Spry-Widgets hinzufügen.

Spry-Widgets

Bei einem Spry-Widget handelt es sich um ein interaktives Seitenelement, das dem Anwender ein höherwertigeres Erlebnis durch Benutzerinteraktion bietet. Es besteht aus folgenden Elementen:

Widget-Struktur

Ein HTML-Codeblock zur Definition der strukturellen Zusammensetzung des Widgets.

Widget-Verhalten

JavaScript zur Steuerung des Widget-Verhaltens bei Benutzeraktionen.

Widget-Stil

CSS zur Bestimmung des Erscheinungsbilds.

Das Spry-Framework unterstützt einen Satz wiederverwendbarer, in standardmäßigem HTML, CSS und JavaScript geschriebener Widgets. Diese Widgets lassen sich kinderleicht einfügen (der Code ist einfaches HTML und CSS) und mit eigenem Stil anpassen. Die Verhalten im Framework beinhalten Funktionen, mit denen Benutzer Seiteninhalte ein- bzw. ausblenden, das Erscheinungsbild (wie die Farbe) ändern oder mit Menüs interagieren können und vieles mehr.

Alle Widgets im Spry-Framework sind mit eindeutigen CSS- und JavaScript-Dateien verknüpft. Die CSS-Datei enthält alles Notwendige für den Widget-Stil, während die JavaScript-Datei ihre Funktionalität bestimmt. Wenn Sie ein Widget über die Dreamweaver-Benutzeroberfläche einfügen, verknüpft Dreamweaver diese Dateien automatisch mit Ihrer Seite. Ihr Widget erhält dadurch Funktionalität und Stil.

Die mit einem Widget verknüpften CSS- und JavaScript-Dateien werden nach dem Widget benannt. So wissen Sie immer, welche Dateien zu welchem Widget gehören (So heißen die mit dem Akkordeon-Widget verknüpften Dateien folgerichtig „SpryAccordion.css“ und „SpryAccordion.js“). Wenn Sie ein Widget in eine gespeicherte Seite einfügen, erstellt Dreamweaver einen Ordner mit Namen „SpryAssets“ auf Ihrer Site, in dem die dazugehörigen JavaScript- und CSS-Dateien gespeichert werden.

Spry-Widgets - Ressourcen und Tutorials

Die folgenden Online-Ressourcen enthalten weiterführende Informationen zum Anpassen von Spry-Widgets.

Spry widget samples (Beispiele für Spry-Widgets)

Customizing Spry Menu Bars in Dreamweaver (Spry-Menüleisten in Dreamweaver anpassen)

Spry Validation widgets (Spry-Überprüfungs-Widgets) - Video-Tutorial

Spry-Widget einfügen

  1. Wählen Sie „Einfügen“ > „Spry“ und dann das einzufügende Widget aus.

Bei diesem Vorgang fügt Dreamweaver beim Speichern der Seite automatisch die benötigten Spry-JavaScript- und -CSS-Dateien hinzu.

Hinweis:

Sie können Spry-Widgets auch über die Kategorie „Spry“ im Bedienfeld „Einfügen“ hinzufügen.

Spry-Widget auswählen

  1. Zeigen Sie mit dem Mauszeiger auf das Widget. Daraufhin wird sein blau gestrichelter Rahmen angezeigt.
  2. Klicken Sie oben links auf das Widget-Register.

Spry-Widget bearbeiten

  1. Wählen Sie das zu bearbeitende Widget aus und nehmen Sie Ihre Änderungen im Eigenschafteninspektor („Fenster“ > „Eigenschaften“) vor.

Genaue Informationen zum Bearbeiten bestimmter Widgets finden Sie im jeweiligen Abschnitt.

Stil eines Spry-Widgets festlegen

  1. Suchen Sie nach der CSS-Datei Ihres Widgets im Ordner „SpryAssets“ für Ihre Site und bearbeiten Sie sie nach Ihren Vorstellungen.

Genaue Informationen zum Stil bestimmter Widgets finden Sie im jeweiligen Abschnitt.

Hinweis:

Sie können das Format eines Widgets auch anpassen, indem Sie ihn über das Bedienfeld „CSS“ bearbeiten, genau so, wie Sie das für andere Seitenelemente tun würden.

Weitere Widgets

Neben den mit Dreamweaver installierten Spry-Widgets sind viele weitere Web-Widgets verfügbar. Adobe Exchange bietet Web-Widgets, die von anderen kreativen Profis entwickelt wurden.

  1. Wählen Sie im Menü „Dreamweaver erweitern“ der Anwendungsleiste die Option „Web-Widgets suchen“ aus.

Ein Video des Dreamweaver-Entwicklungsteams mit einem Überblick über die Verwendung von Web-Widgets finden Sie unter www.adobe.com/go/dw10widgets_de.

Standardordner für Spry-Elemente ändern

Wenn Sie ein Spry-Widget, einen Datensatz oder einen Effekt in eine gespeicherte Seite einfügen, erstellt Dreamweaver auf Ihrer Site einen Ordner mit dem Namen „SpryAssets“, in dem die dazugehörigen JavaScript- und CSS-Dateien gespeichert werden. Sie können diesen Standardspeicherort für Spry-Elemente ändern, wenn Sie ihn an anderer Stelle bevorzugen.

  1. Wählen Sie „Sites“ > „Sites verwalten“ aus.
  2. Wählen Sie im Dialogfeld „Sites verwalten“ die gewünschte Site aus und klicken Sie dann auf „Bearbeiten“.
  3. Erweitern Sie im Dialogfeld „Site-Definition“ die Option „Erweiterte Einrichtungen“ und wählen Sie die Kategorie „Spry“ aus.
  4. Geben Sie den Pfad des Ordners an, in dem Sie die Spry-Elemente speichern möchten, und klicken Sie dann auf „OK“. Sie können diesen Ordner auch mithilfe des Ordnersymbols suchen.