Hinzufügen von Spry-Effekten

Suchen
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.

Überblick über die Spry-Effekte

Spry-Effekte sind optische Verbesserungen, die Sie mithilfe von JavaScript auf praktisch alle Elemente einer HTML-Seite anwenden können. Solche Effekte werden oft zum Hervorheben von Informationen, Erstellen von animierten Übergängen oder temporäre Änderungen des Erscheinungsbilds eines Seitenelements verwendet. Sie können Effekte auf HTML-Elemente anwenden, ohne spezielle zusätzliche Tags zu benötigen.

Hinweis:

Um einen Effekt auf ein Element anwenden zu können, muss dieses ausgewählt sein oder eine ID besitzen. Wenn Sie beispielsweise ein nicht ausgewähltes div-Tag markieren möchten, muss dieses einen gültigen ID-Wert besitzen. Wenn das Element nicht schon eines besitzt, müssen Sie eines zum HTML-Code hinzufügen.

Effekte können die Transparenz, Skalierung, Position oder Stil, z. B. die Hintergrundfarbe, eines Elements beeinflussen. Durch die Kombination zweier oder mehrerer Effekte lassen sich interessante optische Effekte erzielen.

Da diese Effekte auf Spry basieren, wird beim Klicken auf ein Objekt, auf das ein Effekt angewendet wurde, nur das Objekt und nicht die gesamte HTML-Seite aktualisiert.

Spry verfügt über folgende Effekte:

Einblenden/Ausblenden

Blendet Elemente ein oder aus.

Markieren

Ändert die Hintergrundfarbe eines Elements.

Jalousie

Simuliert eine Fensterjalousie, die das Element beim Öffnen bzw. Schließen verbirgt oder zeigt.

Schieben

Verschiebt das Element nach oben bzw. unten.

Vergrößern/Verkleinern

Vergrößert bzw. verkleinert das Element.

Schütteln

Simuliert das Schütteln eines Elements von links nach rechts.

Quetschen

Lässt das Element an der oberen linken Seitenecke verschwinden.

Hinweis:

Wenn Sie Effekte verwenden, werden mehrere Zeilen Code zu Ihrer Datei in der Codeansicht hinzugefügt. Eine Zeile steht für die Datei „SpryEffects.js“, die für das Hinzufügen von Effekten erforderlich ist. Wenn Sie diese Zeile entfernen, können die Effekte nicht funktionieren.

Einen umfassenden Überblick über die Effekte des Spry-Frameworks finden Sie unter www.adobe.com/go/learn_dw_spryeffects_de.

Ein-/Ausblendeffekte anwenden

Hinweis:

Sie können diesen Effekt mit allen HTML-Elementen außer applet, body, iframe, object, tr, tbody und th verwenden.

  1. Optional: Wählen Sie den Inhalt oder das Layoutelement aus, auf den bzw. das Sie den Effekt anwenden möchten.
  2. Klicken Sie im Bedienfeld „Verhalten“ („Fenster“ > „Verhalten“) auf das Plussymbol (+) und wählen Sie im Menü „Effekte“ > „Einblenden/Ausblenden“ aus.
  3. Wählen Sie im Menü „Zielelement“ die ID des Elements aus. Wenn bereits ein Element ausgewählt wurde, wählen Sie „<Aktuelle Auswahl>“ aus.
  4. Legen Sie im Feld „Effektdauer“ die Zeitverzögerung in Millisekunden für den Effektstart fest.
  5. Wählen Sie den anzuwendenden Effekt aus, also „Einblenden“ oder „Ausblenden“.
  6. Legen Sie im Feld „Ausblenden von“ den Prozentsatz für die Transparenz fest, den der Effekt bei seiner Aktivierung haben soll.
  7. Im Feld „Ausblenden bis“ bestimmen Sie den Prozentsatz für die Transparenz, auf den ausgeblendet werden soll.
  8. Wählen Sie die Option „Effekt umkehren“, wenn der Effekt umkehrbar sein soll, also bei wiederholtem Klicken ein- bzw. ausgeblendet wird.

Jalousieeffekte anwenden

Hinweis:

Diesen Effekt können Sie nur mit den folgenden HTML-Elementen verwenden: address, dd, div, dl, dt, form, h1, h2, h3, h4, h5, h6, p, ol, ul, li, applet, center, dir, menu und pre.

  1. Optional: Wählen Sie den Inhalt oder das Layoutelement aus, auf den bzw. das Sie den Effekt anwenden möchten.
  2. Klicken Sie im Bedienfeld „Verhalten“ („Fenster“ > „Verhalten“) auf das Plussymbol (+) und wählen Sie im Menü „Effekte“ > „Jalousie“ aus.
  3. Wählen Sie im Menü „Zielelement“ die ID des Elements aus. Wenn bereits ein Element ausgewählt wurde, wählen Sie „<Aktuelle Auswahl>“ aus.
  4. Legen Sie im Feld „Effektdauer“ die Zeitverzögerung in Millisekunden für den Effektstart fest.
  5. Wählen Sie den anzuwendenden Effekt aus, also „Jalousie nach oben“ oder „Jalousie nach unten“.
  6. Legen Sie mit der Option „Jalousie nach oben von“ bzw. „Jalousie nach unten von“ den Startpunkt der Jalousie in Prozent bzw. Pixel fest. Diese Werte werden ab dem Anfangspunkt des Elements berechnet.
  7. Legen Sie mit der Option „Jalousie nach oben bis“ oder „Jalousie nach unten bis“ den Endpunkt der Jalousie in Prozent oder Pixel fest. Diese Werte werden ab dem Anfangspunkt des Elements berechnet.
  8. Wählen Sie die Option „Effekt umkehren“, wenn der Effekt umkehrbar sein soll, also die Jalousie bei wiederholtem Klicken auf-/zugezogen wird.

Vergrößern/Verkleinern-Effekte anwenden

Hinweis:

Diesen Effekt können Sie mit den folgenden HTML-Elementen verwenden: address, dd, div, dl, dt, form, p, ol, ul, applet, center, dir, menu und pre.

  1. Optional: Wählen Sie den Inhalt oder das Layoutelement aus, auf den bzw. das Sie den Effekt anwenden möchten.
  2. Klicken Sie im Bedienfeld „Verhalten“ („Fenster“ > „Verhalten“) auf das Plussymbol (+) und wählen Sie im Menü „Effekte“ > „Vergrößern/Verkleinern“ aus.
  3. Wählen Sie im Popupmenü „Zielelement“ die ID des Elements aus. Wenn bereits ein Element ausgewählt wurde, wählen Sie „<Aktuelle Auswahl>“ aus.
  4. Legen Sie im Feld „Effektdauer“ die Zeitverzögerung in Millisekunden für den Effektstart fest.
  5. Wählen Sie den anzuwendenden Effekt aus, also „Vergrößern“ bzw. „Verkleinern“.
  6. Legen Sie im Feld „Vergrößern von“ oder „Verkleinern von“ die Größe des Elements am Anfang des Effekts fest. Zur Auswahl stehen Prozent und Pixel.
  7. Legen Sie im Feld „Vergrößern auf“ oder „Verkleinern auf“ die Größe des Elements am Ende des Effekts fest. Zur Auswahl stehen Prozent und Pixel.
  8. Wenn Sie für eine der Optionen den Pixelwert auswählen, wird ein Feld mit den Optionen „breit“ bzw. „hoch“ angezeigt. Je nach der gewählten Option wird das Element proportional verkleinert bzw. vergrößert.
  9. Entscheiden Sie, ob Sie das Element zur oberen linken Ecke oder zur Mitte der Seite hin vergrößern bzw. verkleinern möchten.
  10. Wählen Sie die Option „Effekt umkehren“, wenn der Effekt umkehrbar sein soll, also bei wiederholtem Klicken verkleinert bzw. vergrößert wird.

Hervorhebungseffekte anwenden

Hinweis:

Dieser Effekt kann mit allen HTML-Elementen außer applet, body, frame, frameset oder noframes verwendet werden.

  1. Optional: Wählen Sie den Inhalt oder das Layoutelement aus, auf den bzw. das Sie den Effekt anwenden möchten.
  2. Klicken Sie im Bedienfeld „Verhalten“ („Fenster“ > „Verhalten“) auf das Plussymbol (+) und wählen Sie im Menü „Effekte“ > „Hervorheben“ aus.
  3. Wählen Sie im Menü „Zielelement“ die ID des Elements aus. Wenn bereits ein Element ausgewählt wurde, wählen Sie „<Aktuelle Auswahl>“ aus.
  4. Legen Sie im Feld „Effektdauer“ die Dauer des Effekts in Millisekunden fest
  5. Wählen Sie die Farbe, mit der die Hervorhebung beginnen soll.
  6. Wählen Sie die Farbe, mit der die Hervorhebung enden soll. Die Farbdarstellung währt nur für den unter „Effektdauer“ gewählten Zeitraum.
  7. Wählen Sie die Farbe des Elements nach dem Ende der Hervorhebung aus.
  8. Wählen Sie die Option „Effekt umkehren“, wenn der Effekt umkehrbar sein soll, also dass bei wiederholtem Klicken durch die Hervorhebungsfarben gewechselt wird.

Schütteleffekte anwenden

Hinweis:

Diesen Effekt können Sie mit den HTML-Elementen address, blockquote, dd, div, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, iframe, img, object, p, ol, ul, li, applet, dir, hr, menu, pre und table verwenden.

  1. Optional: Wählen Sie den Inhalt oder das Layoutelement aus, auf den bzw. das Sie den Effekt anwenden möchten.
  2. Klicken Sie im Bedienfeld „Verhalten“ („Fenster“ > „Verhalten“) auf das Plussymbol (+) und wählen Sie im Menü die Option „Effekte“ > „Schütteln“ aus.
  3. Wählen Sie im Menü „Zielelement“ die ID des Elements aus. Wenn bereits ein Element ausgewählt wurde, wählen Sie „<Aktuelle Auswahl>“ aus.

Verschiebungseffekte anwenden

Damit Verschiebungseffekte korrekt ausgeführt werden können, muss das Zielelement in einem Container-Tag mit einer eindeutigen ID eingeschlossen sein. Bei dem Container-Tag, in den das Zielelement eingeschlossen ist, muss es sich um ein blockquote-, dd-, form-, div- oder center-Tag handeln.

Beim Tag für das Zielelement muss es sich um eines der folgenden Tags handeln: blockquote, dd, div, form, center, table, span, input, textarea, select oder image.

  1. Optional: Wählen Sie das Container-Tag des Inhalts aus, auf den der Effekt angewendet werden soll.
  2. Klicken Sie im Bedienfeld „Verhalten“ („Fenster“ > „Verhalten“) auf das Plussymbol (+) und wählen Sie im Menü die Option „Effekte“ > „Schieben“ aus.
  3. Wählen Sie im Menü des Zielelements die ID des Container-Tags aus. Wenn das Container-Tag bereits ausgewählt wurde, wählen Sie „<Aktuelle Auswahl>“ aus.
  4. Legen Sie im Feld „Effektdauer“ die Zeitverzögerung in Millisekunden für den Effektstart fest.
  5. Wählen Sie den anzuwendenden Effekt aus, also „Nach oben schieben“ oder „Nach unten schieben“.
  6. Legen Sie im Feld „Nach oben schieben von“ den Startpunkt der Verschiebung in Prozent oder Pixel fest.
  7. Legen Sie im Feld „Nach oben schieben bis“ den Endpunkt der Verschiebung in Prozent oder Pixel (positiver Wert) fest.
  8. Wählen Sie die Option „Effekt umkehren“, wenn der Effekt umkehrbar sein soll, also bei wiederholtem Klicken nach oben bzw. unten verschoben werden soll.

Quetscheffekte anwenden

Hinweis:

Diesen Effekt können Sie nur mit den HTML-Elementen address, dd, div, dl, dt, form, img, p, ol, ul, applet, center, dir, menu und pre verwenden.

  1. Optional: Wählen Sie den Inhalt oder das Layoutelement aus, auf den bzw. das Sie den Effekt anwenden möchten.
  2. Klicken Sie im Bedienfeld „Verhalten“ („Fenster“ > „Verhalten“) auf das Plussymbol (+) und wählen Sie im Menü die Option „Effekte“ > „Quetschen“ aus.
  3. Wählen Sie im Menü „Zielelement“ die ID des Elements aus. Wenn bereits ein Element ausgewählt wurde, wählen Sie „<Aktuelle Auswahl>“ aus.

Zusätzliche Effekte hinzufügen

Sie können mehrere Effektverhalten auf ein und dasselbe Element anwenden, was zu interessanten Resultaten führen kann.

  1. Optional: Wählen Sie den Inhalt oder das Layoutelement aus, auf den bzw. das Sie den Effekt anwenden möchten.
  2. Klicken Sie im Bedienfeld „Verhalten“ („Fenster“ > „Verhalten“) auf das Plussymbol (+) und wählen Sie im Menü „Effekte“ den gewünschten Effekt aus.
  3. Wählen Sie im Menü „Zielelement“ die ID des Elements aus. Wenn bereits ein Element ausgewählt wurde, wählen Sie „<Aktuelle Auswahl>“ aus.

Effekte löschen

Sie können ein oder mehrere Effektverhalten aus einem Element entfernen.

  1. Optional: Wählen Sie den Inhalt oder das Layoutelement aus, auf den bzw. das Sie den Effekt anwenden möchten.
  2. Klicken Sie im Bedienfeld „Verhalten“ („Fenster“ > „Verhalten“) auf den Effekt, den Sie aus der Liste der Verhalten entfernen möchten.
  3. Führen Sie einen der folgenden Schritte aus:

    • Klicken Sie auf die Schaltfläche mit dem QuickInfo „Ereignis entfernen“ (-) oberhalb der Effektliste.

    • Klicken Sie mit der rechten Maustaste (Windows) bzw. bei gedrückter Ctrl-Taste (Macintosh) und wählen Sie „Verhalten löschen“.

Adobe-Logo

Bei Ihrem Konto anmelden

Hilfreiche Links

Alle Ihre Abos anzeigen Abos verwalten

Rechtliche Hinweise    |    Online-Datenschutzrichtlinie