Applicare effetti Spry in Dreamweaver

Cerca
Nota:

I widget Spry sono stati sostituiti con i widget jQuery in Dreamweaver CC e versioni successive. Anche se è ancora possibile modificare i widget Spry esistenti in una pagina, non potete aggiungere nuovi widget Spry.

Panoramica sugli effetti Spry

Gli effetti Spry sono nuove caratteristiche visive che possono essere applicate a quasi tutti gli elementi presenti nelle pagine HTML utilizzando JavaScript. Spesso gli effetti vengono impiegati per evidenziare informazioni, creare transizioni animate o modificare visivamente un elemento della pagina per un dato periodo di tempo. Potete applicare effetti agli elementi HTML senza dover aggiungere alcun tag personalizzato.

Nota:

per applicare un effetto a un elemento, questo deve essere selezionato o deve disporre di un ID. Ad esempio, per poter applicare l'evidenziazione a un tag div attualmente non selezionato, esso deve avere un valore di ID valido. In caso contrario, sarà necessario aggiungere un ID al codice HTML.

Gli effetti possono alterare opacità, scala, posizione e proprietà dello stile (ad esempio il colore di sfondo) di un elemento. Per creare effetti visivi interessanti, potete combinare due o più proprietà.

Poiché questi effetti sono basati su Spry, quando l'utente fa clic su un elemento a cui è associato un effetto, solo questo elemento viene aggiornato in modo dinamico, senza causare l'aggiornamento dell'intera pagina HTML.

Spry include i seguenti effetti:

Dissolvenza in entrata/in uscita

Visualizza o nasconde l'elemento.

Evidenziazione

Modifica il colore di sfondo dell'elemento.

Veneziane

Simula il movimento di una finestra con veneziane che si muovono verso l'alto o il basso per nascondere o visualizzare l'elemento.

Sposta

Sposta l'elemento verso l'alto o verso il basso.

Estensione/Riduzione

Aumenta o riduce le dimensioni dell'elemento.

Scossa

Simula lo scuotimento dell'elemento da sinistra a destra.

Spremuto

Fa sparire l'elemento nell'angolo in alto a sinistra della pagina.

Nota:

quando usate un effetto, nella vista Codice vengono aggiunte alcune righe di codice al file. Una riga identifica il file SpryEffects.js, che è necessario per poter includere gli effetti. Non rimuovete questa riga dal codice; in caso contrario, gli effetti non potranno funzionare.

Per una panoramica più dettagliata degli effetti Spry disponibili nel framework Spry, visitate www.adobe.com/go/learn_dw_spryeffects_it.

Applicare un effetto Dissolvenza in entrata/in uscita

Nota:

questo effetto può essere utilizzato con qualsiasi elemento HTML, ad eccezione di applet, body, iframe, object, tr, tbody o th.

  1. (Opzionale) Selezionate l'elemento di contenuto o layout a cui desiderate applicare l'effetto.
  2. Nel pannello Comportamenti (Finestra > Comportamenti), fate clic sul pulsante con il segno più (+) e selezionate Effetti > Dissolvenza in entrata/in uscita dal menu.
  3. Selezionate l'ID dell'elemento dal menu dell'elemento di destinazione. Se l'elemento è già stato selezionato, scegliete <Selezione corrente>.
  4. Nella casella Durata effetto, definire l'intervallo di tempo desiderato per l'esecuzione dell'effetto in millisecondi.
  5. Selezionate l'effetto da applicare tra Dissolvenza in entrata e Dissolvenza in uscita.
  6. Nella casella Dissolvenza in uscita da, definire la percentuale di opacità che l'effetto deve avere alla sua comparsa.
  7. Nella casella Dissolvenza in uscita fino a, definite la percentuale di opacità che desiderate raggiungere.
  8. Selezionate Alterna effetto per rendere reversibile l'effetto, passando così da dissolvenza in uscita a dissolvenza in entrata e viceversa a ogni clic successivo.

Applicare un effetto Veneziane

Nota:

questo effetto può essere utilizzato solo con gli elementi HTML address, dd, div, dl, dt, form, h1, h2, h3, h4, h5, h6, p, ol, ul, li, applet, center, dir, menu o pre.

  1. (Opzionale) Selezionate l'elemento di contenuto o layout a cui desiderate applicare l'effetto.
  2. Nel pannello Comportamenti (Finestra > Comportamenti), fate clic sul pulsante con il segno più (+) e selezionate Effetti > Veneziane dal menu.
  3. Selezionate l'ID dell'elemento dal menu dell'elemento di destinazione. Se l'elemento è già stato selezionato, scegliete <Selezione corrente>.
  4. Nella casella Durata effetto, definire l'intervallo di tempo desiderato per l'esecuzione dell'effetto in millisecondi.
  5. Selezionate l'effetto da applicare tra Veneziane in alto e Veneziane in basso.
  6. Nella casella Veneziane in alto da/Veneziane in basso da, definire il punto di inizio dello scorrimento della veneziana come percentuale o come numero di pixel. Questi valori vengono calcolati a partire dalla parte superiore dell'elemento.
  7. Nella casella Veneziane in alto fino a/Veneziane in basso fino a, definire il punto di fine dello scorrimento della veneziana come percentuale o come numero di pixel. Questi valori vengono calcolati a partire dalla parte superiore dell'elemento.
  8. Selezionate Alterna effetto se desiderate che l'effetto sia reversibile, scorrendo verso l'alto e verso il basso a ogni clic successivo.

Applicare un effetto Estensione/Riduzione

Nota:

questo effetto può essere utilizzato con gli elementi HTML address, dd, div, dl, dt, form, p, ol, ul, applet, center, dir, menu o pre.

  1. (Opzionale) Selezionate l'elemento di contenuto o layout a cui desiderate applicare l'effetto.
  2. Nel pannello Comportamenti (Finestra > Comportamenti), fate clic sul pulsante con il segno più (+) e selezionate Effetti > Estensione/Riduzione dal menu a comparsa.
  3. Selezionate l'ID dell'elemento dal menu a comparsa dell'elemento di destinazione. Se l'elemento è già stato selezionato, scegliete <Selezione corrente>.
  4. Nel campo Durata effetto, definire l'intervallo di tempo desiderato per l'esecuzione dell'effetto in millisecondi.
  5. Selezionate l'effetto da applicare tra Estensione e Riduzione.
  6. Nella casella Estensione/Riduzione da, definite le dimensioni dell'elemento all'inizio dell'effetto come percentuale delle sue dimensioni o come valore in pixel.
  7. Nella casella Estensione/Riduzione fino a, definite le dimensioni dell'elemento alla fine dell'effetto come percentuale delle sue dimensioni o come valore in pixel.
  8. Se scegliete un valore in pixel per entrambe le caselle, risulta visibile il campo Larghezza/altezza. A seconda dell'opzione scelta, l'elemento viene esteso o ridotto proporzionalmente.
  9. Selezionate se desiderate che l'elemento sia esteso o ridotto verso l'angolo in alto a sinistra della pagina o verso il suo centro.
  10. Selezionate Alterna effetto se desiderate che l'effetto sia reversibile, estendendo e riducendo l'oggetto a ogni clic successivo.

Applicare un effetto Evidenziazione

Nota:

questo effetto può essere utilizzato con tutti gli elementi HTML, ad eccezione di applet, body, frame, frameset o noframes.

  1. (Opzionale) Selezionate l'elemento di contenuto o layout a cui desiderate applicare l'effetto.
  2. Nel pannello Comportamenti (Finestra > Comportamenti), fate clic sul pulsante con il segno più (+) e selezionate Effetti > Evidenziazione dal menu.
  3. Selezionate l'ID dell'elemento dal menu dell'elemento di destinazione. Se l'elemento è già stato selezionato, scegliete <Selezione corrente>.
  4. Nella casella Durata effetto, specificate la durata dell'effetto in millisecondi.
  5. Selezionate il colore con cui deve iniziare l'evidenziazione.
  6. Selezionate il colore con cui deve terminare l'evidenziazione. Questo colore rimane visualizzato solamente per il tempo specificato in Durata effetto.
  7. Selezionate il colore dell'elemento al termine dell'evidenziazione.
  8. Selezionate Alterna effetto se desiderate che l'effetto sia reversibile, passando attraverso i colori di evidenziazione a ogni clic successivo.

Applicare un effetto Scossa

Nota:

questo effetto può essere utilizzato con gli elementi HTML 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 o table.

  1. (Opzionale) Selezionate l'elemento di contenuto o layout a cui desiderate applicare l'effetto.
  2. Nel pannello Comportamenti (Finestra > Comportamenti), fate clic sul pulsante con il segno più (+) e selezionate Effetti > Scossa dal menu.
  3. Selezionate l'ID dell'elemento dal menu dell'elemento di destinazione. Se l'elemento è già stato selezionato, scegliete <Selezione corrente>.

Applicare un effetto Scorrimento

Affinché l'effetto Scorrimento funzioni correttamente, l'elemento di destinazione deve essere inserito in un tag contenitore con un ID univoco. Il tag contenitore in cui inserite l'elemento di destinazione deve essere un tag blockquote, dd, form, div o center.

Il tag dell'elemento di destinazione deve essere uno dei seguenti: blockquote, dd, div, form, center, table, span, input, textarea, select o image.

  1. (Opzionale) Selezionate il tag contenitore del contenuto a cui volete applicare l'effetto.
  2. Nel pannello Comportamenti (Finestra > Comportamenti), fate clic sul pulsante con il segno più (+) e selezionate Effetti > Scorrimento dal menu.
  3. Selezionate l'ID del tag contenitore dal menu dell'elemento di destinazione. Se il contenitore è già selezionato, scegliete <Selezione corrente>.
  4. Nel campo Durata effetto, definire l'intervallo di tempo desiderato per l'esecuzione dell'effetto in millisecondi.
  5. Selezionate l'effetto da applicare tra Scorrimento in alto e Scorrimento in basso.
  6. Nella casella Scorrimento in alto da, definite il punto di inizio dello scorrimento come percentuale o come numero di pixel.
  7. Nella casella Scorrimento in alto fino a, definite il punto di fine dello scorrimento come percentuale o come numero positivo di pixel.
  8. Selezionate Alterna effetto se desiderate che l'effetto sia reversibile, scorrendo verso l'alto e verso il basso a ogni clic successivo.

Applicare un effetto Spremuto

Nota:

questo effetto può essere utilizzato solo con gli elementi HTML address, dd, div, dl, dt, form, img, p, ol, ul, applet, center, dir, menu o pre.

  1. (Opzionale) Selezionate l'elemento di contenuto o layout a cui desiderate applicare l'effetto.
  2. Nel pannello Comportamenti (Finestra > Comportamenti) fate clic sul pulsante con il segno più (+) e selezionate Effetti > Spremuto dal menu.
  3. Selezionate l'ID dell'elemento dal menu dell'elemento di destinazione. Se l'elemento è già stato selezionato, scegliete <Selezione corrente>.

Aggiungere un effetto aggiuntivo

A uno stesso elemento potete associare più comportamenti, producendo così risultati visivi interessanti.

  1. (Opzionale) Selezionate l'elemento di contenuto o layout a cui desiderate applicare l'effetto.
  2. Nel pannello Comportamenti (Finestra > Comportamenti), fate clic sul pulsante con il segno più (+) e selezionate un effetto dal menu Effetti.
  3. Selezionate l'ID dell'elemento dal menu dell'elemento di destinazione. Se l'elemento è già stato selezionato, scegliete <Selezione corrente>.

Eliminare un effetto

Potete rimuovere uno o più comportamenti di effetto da un elemento.

  1. (Opzionale) Selezionate l'elemento di contenuto o layout a cui desiderate applicare l'effetto.
  2. Nel pannello Comportamenti (Finestra > Comportamenti), fate clic sull'effetto da eliminare dall'elenco dei comportamenti.
  3. Effettuate una delle operazioni seguenti:

    • Fate clic sul pulsante Rimuovi evento nella barra del titolo del sottopannello (-).

    • Fate clic con il pulsante destro del mouse (Windows) o fate clic tenendo premuto il tasto Ctrl (Macintosh) sul comportamento, quindi selezionate Elimina comportamento.

Logo Adobe

Accedi al tuo account

Collegamenti rapidi

Visualizza tutti i tuoi piani Gestione dei piani

Note legali    |    Informativa sulla privacy online