Tillämpa Spry-effekter i Dreamweaver

Sök
Obs!

Spry-widgetar ersätts med jQuery-widgetar i Dreamweaver CC och senare. Du kommer även fortsättningsvis att kunna ändra befintliga Spry-widgetar på din sida, men du kan inte lägga till nya.

Spry-effekter, översikt

Spry-effekter är synliga förbättringar som du kan lägga till i nästan vilket element som helst på en HTML-sida med JavaScript. Effekter används ofta för att markera information, skapa animerade övergångar eller ändra ett sidelement visuellt under en tidsperiod. Du kan lägga till effekter i HTML-element utan ytterligare egna taggar.

Obs!

Om du vill lägga till en effekt i ett element måste det vara markerat eller så måste det ha ett ID. Om du t.ex. markerar en div-tagg som för närvarande inte är markerad måste diven ha ett giltigt ID-värde. Om elementet inte redan har det måste du lägga till ett i HTML-koden.

Effekter kan ändra ett elements opacitet, skala, position och formateringsegenskaper som t.ex. bakgrundsfärg. Du kan skapa spännande visuella effekter genom att kombinera två eller flera egenskaper.

Eftersom dessa effekter är Spry-baserade uppdateras endast elementet dynamiskt när en användare klickar på ett element med en effekt, utan att hela HTML-sidan uppdateras.

Spry innehåller dessa effekter:

Visa/tona

Gör att ett element visas eller tonas ned.

Färgmarkera

Ändrar bakgrundsfärgen i ett element.

Rullgardin

Simulerar en rullgardin som går upp eller ned för att dölja eller visa elementet.

Glid

Flyttar elementet uppåt eller nedåt.

Utvidga/krymp

Ökar eller minskar storleken på elementet.

Skaka

Simulerar att elementet skakas från vänster till höger.

Tryck ihop

Gör att elementet försvinner till översta vänstra hörnet på sidan.

Obs!

När du använder en effekt läggs flera olika rader med kod till i filen i kodvyn. En rad identifierar filen SpryEffects.js som behövs för att inkludera effekterna. Ta inte bort den här raden från koden eftersom effekterna då inte kommer att fungera.

En utförlig översikt över Spry-effekterna i Spry framework finns på www.adobe.com/go/learn_dw_spryeffects_se.

Lägga till en Visa/tona-effekt

Obs!

Du kan använda den här effekten med alla HTML-element utom applet, body, iframe, object, tr, tbody och th.

  1. (Valfritt) Markera innehållet eller layoutelementet som du vill lägga till en effekt i.
  2. Klicka på plustecknet (+) på funktionspanelen (Fönster > Funktioner) och välj Effekter > Visa/tona på menyn.
  3. Markera elementets ID på menyn för målelementet. Om du redan har markerat ett element väljer du <Aktuell markering>.
  4. Ange den tid det tar för effekten att ske, i millisekunder, i rutan Effektens varaktighet.
  5. Markera effekten som du vill lägga till. Tona eller Visa.
  6. I rutan Tona från anger du hur många procent opacitet du vill att effekten ska ha när den visas.
  7. Ange hur många procent opacitet du vill tona till i rutan Tona till.
  8. Välj Växla effekt på/av om du vill att effekten ska vara vändbar, gå från tonad till att visas och sedan tillbaka igen med successiva klick.

Lägga till en rullgardinseffekt

Obs!

Du kan bara använda den här effekten med följande HTML-element: address, dd, div, dl, dt, form, h1, h2, h3, h4, h5, h6, p, ol, ul, li, applet, center, dir, menu och pre.

  1. (Valfritt) Markera innehållet eller layoutelementet som du vill lägga till en effekt i.
  2. Klicka på plustecknet (+) på funktionspanelen (Fönster > Funktioner) och välj Effekter > Rullgardin på menyn.
  3. Markera elementets ID på menyn för målelementet. Om du redan har markerat ett element väljer du <Aktuell markering>.
  4. Ange den tid det tar för effekten att ske, i millisekunder, i rutan Effektens varaktighet.
  5. Markera effekten som du vill lägga till. Fäll upp rullgardin eller Fäll ned rullgardin.
  6. I rutan Fäll upp rullgardin från/dra ned rullgardin från anger du startpunkten för rullgardinsrullningen i procent eller pixlar. Dessa värden beräknas överst i elementet.
  7. I fältet Dra upp rullgardin till/dra ned rullgardin från anger du slutpunkten för rullgardinsrullningen i procent eller antal pixlar. Dessa värden beräknas överst i elementet.
  8. Välj Växla effekt på/av om du vill att effekten ska vara vändbar, bläddra uppåt och nedåt med successiva klick.

Lägga till en Utvidga/krymp-effekt

Obs!

Du kan använda den här effekten med följande HTML-element: address, dd, div, dl, dt, form, p, ol, ul, applet, center, dir, menu och pre.

  1. (Valfritt) Markera innehållet eller layoutelementet som du vill lägga till en effekt i.
  2. Klicka på plustecknet (+) på funktionspanelen (Fönster > Funktioner) och välj Effekter > Utvidga/krymp på menyn.
  3. Markera elementets ID på snabbmenyn för målelementet. Om du redan har markerat ett element väljer du <Aktuell markering>.
  4. Ange den tid det tar för effekten att ske, i millisekunder, i fältet Effektens varaktighet.
  5. Markera effekten som du vill lägga till. Utvidga eller Krymp.
  6. Ange elementets storlek när effekten slutar i rutan Utvidga/krymp från. Detta är procentdelen av storleken eller ett pixelvärde.
  7. Ange elementets storlek när effekten börjar i rutan Utvidga/krymp till. Detta är procentdelen av storleken eller ett pixelvärde.
  8. Om du väljer pixlar för antingen rutorna Utvidga från/till eller Krymp från/till blir fältet bred/hög synligt. Beroende på vilket alternativ du väljer kommer elementet att utvidgas eller krympa proportionerligt.
  9. Välj om du vill att elementet ska utvidgas eller krympas till det övre vänstra hörnet på sidan eller till sidans mitt.
  10. Välj Växla effekt på/av om du vill att effekten ska vara vändbar, utvidga och krympa med successiva klick.

Lägga till en markeringseffekt

Obs!

Du kan använda den här effekten med alla HTML-element utom applet, body, frame, frameset och noframes.

  1. (Valfritt) Markera innehållet eller layoutelementet som du vill lägga till en effekt i.
  2. Klicka på plustecknet (+) på funktionspanelen (Fönster > Funktioner) och välj Effekter > Markera på menyn.
  3. Markera elementets ID på menyn för målelementet. Om du redan har markerat ett element väljer du <Aktuell markering>.
  4. Ange hur länge du vill att effekten ska vara, i millisekunder, i rutan Effektens varaktighet.
  5. Välj den färg som du vill att markeringen ska börja med.
  6. Välj den färg som du vill att markeringen ska sluta med. Den här färgen varar endast så länge som den varaktighet du angivit i Effektens varaktighet.
  7. Välj färgen för elementet efter att markeringen är avslutad.
  8. Välj Växla effekt på/av om du vill att effekten ska vara vändbar, växla mellan markeringsfärgerna med successiva klick.

Lägga till en skakeffekt

Obs!

Du kan använda den här effekten med följande HTML-element: 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 och table.

  1. (Valfritt) Markera innehållet eller layoutelementet som du vill lägga till en effekt i.
  2. Klicka på plustecknet (+) på funktionspanelen (Fönster > Funktioner) och välj Effekter > Skaka på menyn.
  3. Markera elementets ID på menyn för målelementet. Om du redan har markerat ett element väljer du <Aktuell markering>.

Lägga till en glideffekt

För att glideffekten ska fungera måste målelementet kapslas in i en behållartagg som har ett unikt ID. Behållartaggen som du kapslar in målelementet i måste vara en blockquote-, dd-, form-, div- eller center-tagg.

Målelementtaggen måste vara någon av följande: blockquote, dd, div, form, center, table, span, input, textarea, select eller image.

  1. (Valfritt) Välj behållartagg för innehållet som du vill använda effekten på.
  2. Klicka på plustecknet (+) på funktions-panelen (Fönster > Funktioner) och välj Effekter > Glid på menyn.
  3. Markera behållartaggens ID på menyn för målelementet. Om behållaren redan har valts väljer du <Aktuell markering>.
  4. Ange den tid det tar för effekten att ske, i millisekunder, i fältet Effektens varaktighet.
  5. Markera effekten som du vill lägga till. Glid uppåt eller Glid nedåt.
  6. I rutan Glid uppåt från anger du startpunkten för glidningen i procent eller pixlar.
  7. I rutan Glid uppåt till anger du slutpunkten för glidningen i procent eller antal pixlar.
  8. Välj Växla effekt på/av om du vill att effekten ska vara vändbar, glida uppåt och nedåt med successiva klick.

Lägga till en Tryck ihop-effekt

Obs!

Du kan bara använda den här effekten med följande HTML-element: address, dd, div, dl, dt, form, img, p, ol, ul, applet, center, dir, menu och pre.

  1. (Valfritt) Markera innehållet eller layoutelementet som du vill lägga till en effekt i.
  2. Klicka på plustecknet (+) på funktionspanelen (Fönster > Funktioner) och välj Effekter > Tryck ihop på menyn.
  3. Markera elementets ID på menyn för målelementet. Om du redan har markerat ett element väljer du <Aktuell markering>.

Lägga till en ytterligare effekt

Du kan koppla flera effekter till samma element för att skapa spännande resultat.

  1. (Valfritt) Markera innehållet eller layoutelementet som du vill lägga till en effekt i.
  2. Klicka på plustecknet (+) på funktionspanelen (Fönster > Funktioner) och välj en effekt på menyn Effekter.
  3. Markera elementets ID på menyn för målelementet. Om du redan har markerat ett element väljer du <Aktuell markering>.

Ta bort en effekt

Du kan ta bort en eller flera effekter från ett element.

  1. (Valfritt) Markera innehållet eller layoutelementet som du vill lägga till en effekt i.
  2. Klicka på effekten som du vill ta bort från listan med funktioner på funktions-panelen (Fönster > Funktioner).
  3. Gör något av följande:

    • Klicka på knappen Ta bort händelse i namnlisten i underpanelen (-).

    • Högerklicka (Windows) eller Kontroll-klicka (Macintosh) på funktionen och välj Ta bort funktion.

Adobes logotyp

Logga in på ditt konto

Snabblänkar

Visa alla dina planer Hantera dina planer

Juridiska meddelanden    |    Onlinesekretesspolicy