Spry-Widgets verwenden (allgemeine Anweisungen)



    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-Widget einfügen

     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

     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

     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.

    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.

     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. Wählen Sie im Dialogfeld „Site-Definition“ 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.