Spry-effecten toepassen in Dreamweaver

Zoeken
Opmerking:

In Dreamweaver CC en hoger zijn Spry-widgets vervangen door jQuery-widgets. U kunt de bestaande Spry-widgets op uw pagina nog steeds wijzigen, maar u kunt geen nieuwe Spry-widgets toevoegen.

Spry-effecten, overzicht

Spry-effecten zijn visuele uitbreidingen die u op nagenoeg elk element op een HTML-pagina kunt toepassen met JavaScript. Effecten worden dikwijls gebruikt om informatie te markeren, bewegende overgangen te maken, of een pagina-element gedurende een bepaalde tijd visueel te wijzigen. U kunt effecten op HTML-elementen toepassen zonder extra aangepaste tags toe te voegen.

Opmerking:

Als u een effect op een element wilt toepassen, moet het element zijn geselecteerd of moet het een id hebben. Als u bijvoorbeeld markering wilt toepassing op een div-tag die niet is geselecteerd, moet de div een geldige id-waarde hebben. Als het element nog geen id heeft, moet u er een toevoegen aan de HTML-code.

Met effecten kunt u de doorzichtigheid, schaal, positie en opmaakeigenschappen, zoals de achtergrondkleur, van een element wijzigen. U kunt interessante visuele effecten maken door twee of meer eigenschappen te combineren.

Omdat deze effecten zijn gebaseerd op Spry, wordt alleen dat element dynamisch bijgewerkt wanneer een gebruiker op een element met een effect klikt. De rest van de HTML-pagina hoeft niet te worden vernieuwd.

Spry bevat de volgende effecten:

Verschijnen/Vervagen

Hiermee laat u een element verschijnen of vervagen.

Markeren

Hiermee verandert u de achtergrondkleur van een element.

Verduisteren

Hiermee simuleert u een verduisteringsgordijn dat omhoog of omlaag wordt getrokken om het element te verbergen of weer te geven.

Schuiven

Hiermee verschuift u een element naar boven of beneden.

Vergroten/Verkleinen

Hiermee maakt u het element groter of kleiner.

Schudden

Hiermee simuleert u het van links naar rechts schudden van het element.

Soppen

Hiermee laat u het element in de linkerbovenhoek van de pagina verdwijnen.

Opmerking:

Wanneer u een effect gebruikt, worden in de codeweergave verschillende regels code aan het bestand toegevoegd. Eén regel identificeert het bestand SpryEffects.js, dat nodig is om de effecten op te nemen. Verwijder deze regel niet uit de code, anders werken de effecten niet.

Voor een uitgebreid overzicht van de Spry-effecten die beschikbaar zijn in het Spry-framework gaat u naar www.adobe.com/go/learn_dw_spryeffects_nl.

Het effect Verschijnen/Vervagen toepassen

Opmerking:

Dit effect kunt u met elk HTML-element gebruiken, behalve met applet, body, iframe, object, tr, tbody of th.

  1. (Optioneel) Selecteer het inhouds- of indelingselement waarop u het effect wilt toepassen.
  2. Klik in het deelvenster Gedrag (Venster > Gedrag) op de Plusknop (+) en kies Effecten > Verschijnen/Vervagen in het menu.
  3. Selecteer de id van het element in het menu met doelelementen. Als u al een element hebt geselecteerd, kiest u <Huidige selectie>.
  4. Definieer in het vak Duur van effect hoelang (in milliseconden) het effect moet duren.
  5. Selecteer het effect dat u wilt toepassen: Vervagen of verschijnen.
  6. Definieer in het vak Vervagen vanaf het doorzichtigheidspercentage dat het effect moet hebben wanneer het verschijnt.
  7. Definieer in het vak Vervagen tot het doorzichtigheidspercentage tot waar u wilt vervagen.
  8. Selecteer Effect in-/uitschakelen als u wilt dat het effect omkeerbaar is, dus met opeenvolgende klikken verandert van vervagen in verschijnen en weer terug.

Het effect Verduisteren toepassen

Opmerking:

U kunt dit effect alleen met de volgende HTML-elementen gebruiken: address, dd, div, dl, dt, form, h1, h2, h3, h4, h5, h6, p, ol, ul, li, applet, center, dir, menu of pre.

  1. (Optioneel) Selecteer het inhouds- of indelingselement waarop u het effect wilt toepassen.
  2. Klik in het deelvenster Gedrag (Venster > Gedrag) op de Plusknop (+) en kies Effecten > Verduisteren in het menu.
  3. Selecteer de id van het element in het menu met doelelementen. Als u al een element hebt geselecteerd, kiest u <Huidige selectie>.
  4. Definieer in het vak Duur van effect hoelang (in milliseconden) het effect moet duren.
  5. Selecteer het effect dat u wilt toepassen. Omhoog verduisteren of Omlaag verduisteren
  6. Definieer in het vak 'Omhoog verduisteren/Omlaag verduisteren vanaf' het beginpunt van de verduistering als een percentage of als een pixelwaarde. Deze waarden worden berekend vanaf de bovenkant van het element.
  7. Definieer in het vak 'Omhoog verduisteren/Omlaag verduisteren tot' het eindpunt van de verduistering als een percentage of als een aantal pixels. Deze waarden worden berekend vanaf de bovenkant van het element.
  8. Selecteer Effect in-/uitschakelen als u wilt dat het effect omkeerbaar is, dus dat het met een klik verandert van omhoog verduisteren in omlaag verduisteren, en omgekeerd.

Het effect Vergroten/Verkleinen toepassen

Opmerking:

U kunt dit effect gebruiken met de volgende HTML-elementen: address, dd, div, dl, dt, form, p, ol, ul, applet, center, dir, menu of pre.

  1. (Optioneel) Selecteer het inhouds- of indelingselement waarop u het effect wilt toepassen.
  2. Klik in het deelvenster Gedrag (Venster > Gedrag) op de Plusknop (+) en kies Effecten > Vergroten/Verkleinen in het pop-upmenu.
  3. Selecteer de id van het element in het pop-upmenu met doelelementen. Als u al een element hebt geselecteerd, kiest u <Huidige selectie>.
  4. Definieer in het veld Duur van effect hoelang (in milliseconden) het effect moet duren.
  5. Selecteer het effect dat u wilt toepassen. Vergroten of Verkleinen
  6. Definieer in het vak 'Vergroten/Verkleinen vanaf' de grootte van het object wanneer het effect begint. Dit is een percentage van de grootte of een pixelwaarde.
  7. Definieer in het vak 'Vergroten/Verkleinen tot' de grootte van het element wanneer het effect eindigt. Dit is een percentage van de grootte of een pixelwaarde.
  8. Als u voor de vakken Vergroten/Verkleinen vanaf of tot een pixelwaarde opgeeft, wordt het veld breed/hoog weergegeven. Afhankelijk van de optie die u kiest, wordt het element proportioneel vergroot of verkleind.
  9. Selecteer of u wilt dat het element wordt vergroot of verkleind naar de linkerbovenhoek van de pagina toe of in het midden van de pagina.
  10. Selecteer Effect in-/uitschakelen als u wilt dat het effect omkeerbaar is, dus dat het met een klik verandert van vergroten in verkleinen, en omgekeerd.

Het effect Markeren toepassen

Opmerking:

Dit effect kunt u met elk HTML-element gebruiken, behalve met applet, body, frame, frameset of noframes.

  1. (Optioneel) Selecteer het inhouds- of indelingselement waarop u het effect wilt toepassen.
  2. Klik in het deelvenster Gedrag (Venster > Gedrag) op de Plusknop (+) en kies Effecten > Markeren in het menu.
  3. Selecteer de id van het element in het menu met doelelementen. Als u al een element hebt geselecteerd, kiest u <Huidige selectie>.
  4. Definieer in het vak Duur van effect hoelang (in milliseconden) het effect moet duren.
  5. Selecteer de kleur waarmee de markering moet starten.
  6. Selecteer de kleur waarmee de markering moet eindigen. Deze kleur duurt zolang als de tijd die u in Duur van effect hebt gedefinieerd.
  7. Selecteer de kleur die het element moet krijgen nadat de markering is voltooid.
  8. Selecteer Effect in-/uitschakelen als u wilt dat het effect omkeerbaar is, dus bij elke klik een andere markeringskleur wordt gebruikt.

Het effect Schudden toepassen

Opmerking:

U kunt dit effect gebruiken met de volgende 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 of table.

  1. (Optioneel) Selecteer het inhouds- of indelingselement waarop u het effect wilt toepassen.
  2. Klik in het deelvenster Gedrag (Venster > Gedrag) op de Plusknop (+) en kies Effecten > Schudden in het menu.
  3. Selecteer de id van het element in het menu met doelelementen. Als u al een element hebt geselecteerd, kiest u <Huidige selectie>.

Het effect Schuiven toepassen

Het effect Schuiven werkt alleen correct als het doelelement is verpakt in een containertag met een unieke id. De containertag waarmee u het doelelement verpakt, moet een tag blockquote, dd, form, div of center zijn.

De tag van het doelelement moet een van de volgende zijn: blockquote, dd, div, form, center, table, span, input, textarea, select of image.

  1. (Optioneel) Selecteer de containertag van de inhoud waarop u het effect wilt toepassen.
  2. Klik in het deelvenster Gedrag (Venster > Gedrag) op de Plusknop (+) en kies Effecten > Schuiven in het menu.
  3. Selecteer de id van de containertag in het menu met doelelementen. Als de container als is geselecteerd, kiest u <Huidige selectie>.
  4. Definieer in het veld Duur van effect hoelang (in milliseconden) het effect moet duren.
  5. Selecteer het effect dat u wilt toepassen. Omhoog schuiven of Omlaag schuiven
  6. Definieer in het vak 'Omhoog schuiven vanaf' het beginpunt van de verschuiving als een percentage of als een pixelwaarde.
  7. Definieer in het vak 'Omhoog schuiven tot' het eindpunt van de verschuiving als een percentage of als een positief aantal pixels.
  8. Selecteer Effect in-/uitschakelen als u wilt dat het effect omkeerbaar is, dus dat het met een klik verandert van omhoog schuiven in omlaag schuiven, en omgekeerd.

Het effect Soppen toepassen

Opmerking:

U kunt dit effect alleen met de volgende HTML-elementen gebruiken: address, dd, div, dl, dt, form, img, p, ol, ul, applet, center, dir, menu of pre.

  1. (Optioneel) Selecteer het inhouds- of indelingselement waarop u het effect wilt toepassen.
  2. Klik in het deelvenster Gedrag (Venster > Gedrag) op de Plusknop (+) en kies Effecten > Soppen in het menu.
  3. Selecteer de id van het element in het menu met doelelementen. Als u al een element hebt geselecteerd, kiest u <Huidige selectie>.

Een aanvullend effect toevoegen

U kunt meer effectgedragingen aan hetzelfde element koppelen, wat interessante resultaten kan opleveren.

  1. (Optioneel) Selecteer het inhouds- of indelingselement waarop u het effect wilt toepassen.
  2. Klik in het deelvenster Gedrag (Venster > Gedrag) op de Plusknop (+) en kies een effect in het menu Effecten.
  3. Selecteer de id van het element in het menu met doelelementen. Als u al een element hebt geselecteerd, kiest u <Huidige selectie>.

Een effect verwijderen

U kunt een of meer effecten uit een element verwijderen.

  1. (Optioneel) Selecteer het inhouds- of indelingselement waarop u het effect wilt toepassen.
  2. Klik in het deelvenster Gedrag (Venster > Gedrag) op het effect dat u uit de lijst met gedragingen wilt verwijderen.
  3. Voer een van de volgende handelingen uit:

    • Klik op de knop Gebeurtenis verwijderen op de titelbalk van het subpaneel (-).

    • Klik met de rechtermuisknop (Windows) of houd de Control-toets ingedrukt (Macintosh) terwijl u klikt en kies Gedrag verwijderen.

Adobe-logo

Aanmelden bij je account

Snelle koppelingen

Al je lidmaatschappen weergeven Je lidmaatschappen beheren

Juridische kennisgevingen    |    Online privacybeleid