Casa Social media Come creare un'immagine di rollover semplice in Dreamweaver - dummies

Come creare un'immagine di rollover semplice in Dreamweaver - dummies

Video: Creare immagine Rollover su DreamWeaver 2025

Video: Creare immagine Rollover su DreamWeaver 2025
Anonim

I rollover sono una caratteristica così popolare che Dreamweaver include una finestra di dialogo speciale solo per i rollover: la finestra di dialogo Inserisci immagine di rollover. Le immagini di rollover, come suggerisce il nome, sono progettate per reagire quando qualcuno fa scorrere un cursore su un'immagine. L'effetto può essere drammatico come l'immagine di un cane che viene sostituito da un'immagine di un leone o sottile come il colore di una parola che cambia.

È possibile creare effetti di rollover più complessi con l'opzione Scambia immagine dal pannello Comportamenti. L'opzione Scambia immagine consente di modificare più immagini contemporaneamente.

Per creare un semplice effetto di rollover con due immagini utilizzando la finestra di dialogo Inserisci immagine di rollover di Dreamweaver, seguire questi passaggi:

  1. Posizionare il cursore sulla pagina in cui si desidera visualizzare il rollover.

    Gli effetti di rollover richiedono almeno due immagini: una per lo stato iniziale e una per lo stato di rollover. Puoi utilizzare due immagini diverse o due simili, ma entrambe dovrebbero avere le stesse dimensioni. Altrimenti, si vedono strani effetti di ridimensionamento perché entrambe le immagini devono essere visualizzate esattamente nello stesso spazio sulla pagina.

  2. Scegli Inserisci → Immagine → Immagine di rollover.

    In alternativa, è possibile utilizzare l'elenco a discesa disponibile dall'icona Immagini nel pannello Inserimento comune e selezionare Immagine di rollover.

    Viene visualizzata la finestra di dialogo Inserisci immagine di rollover.

  3. Nella casella Nome immagine, assegna un nome all'immagine.

    Prima di poter applicare un comportamento a un elemento, ad esempio un'immagine, l'elemento deve avere un nome in modo che lo script di comportamento possa fare riferimento a esso. Puoi dare un nome agli elementi che ti piacciono purché non utilizzi spazi o caratteri speciali.

  4. Nella casella Immagine originale, specificare la prima immagine che si desidera visualizzare. Utilizzare il pulsante Sfoglia per individuare e selezionare l'immagine.

    Se le immagini non sono già nella cartella del sito locale, Dreamweaver le copia nel sito quando si crea il rollover.

  5. Nella casella Immagine rollover, inserire l'immagine che si desidera rendere visibile quando un visitatore sposta il cursore sulla prima immagine.

    Anche in questo caso, è possibile utilizzare il pulsante Sfoglia per individuare e selezionare l'immagine.

  6. Seleziona la casella di controllo Immagine di rollover pre-caricamento per caricare tutte le immagini di rollover nella cache del browser quando la pagina viene caricata per la prima volta.

    Se non si sceglie di eseguire questo passaggio, i visitatori potrebbero subire un ritardo poiché la seconda immagine non verrà scaricata fino a quando non viene spostato un cursore sull'immagine originale.

  7. Nel campo Testo alternativo, inserire una descrizione delle immagini.

    Il testo alternativo è facoltativo ma consigliato poiché l'uso di parole chiave può migliorare l'ottimizzazione dei motori di ricerca.Allo stesso modo, il testo alternativo è una parte fondamentale dell'accessibilità del Web perché questo testo viene letto ad alta voce da speciali browser chiamati screen reader, che vengono utilizzati da persone non vedenti e altri con vista o mobilità limitata. Il testo alternativo viene visualizzato solo nel browser se le immagini non sono visibili.

  8. Nella casella Quando fatto clic, vai all'URL, inserisci qualsiasi indirizzo web o naviga per individuare un'altra pagina nel tuo sito a cui desideri collegare.

    Se non si specifica un URL, Dreamweaver inserisce automaticamente il simbolo # come segnaposto nel codice.

    Il simbolo # è una tecnica comune per la creazione di collegamenti che non si collegano da nessuna parte. Poiché le immagini di rollover che non si collegano a un'altra pagina hanno molti grandi usi, questa tecnica è utile. Ricorda che se vuoi che il tuo rollover si colleghi, devi sostituire il simbolo # con un link a un'altra pagina.

  9. Fare clic su OK.

    Le immagini vengono impostate automaticamente come rollover.

  10. Per visualizzare il rollover in azione, salvare il file e fare clic sull'icona del globo nella parte superiore dell'area di lavoro per visualizzare l'anteprima della pagina in un browser Web.

Puoi vedere come funziona il rollover nella vista Progettazione di Dreamweaver o utilizzando l'opzione Vista live. Quando fai clic sul pulsante Live nella parte in alto a sinistra dell'area di lavoro, in pratica trasforma Dreamweaver in un browser Web che visualizza pagine molto simili al browser Chrome.

Quando si visualizza in anteprima una pagina sul computer che include un'immagine di rollover, alcuni browser Web visualizzeranno un avviso che indica che è necessario consentire ai controlli ActiveX di visualizzare la pagina. Questo è un avviso di sicurezza che appare solo quando la pagina viene aperta sullo stesso computer in cui la pagina viene salvata.

Se pubblichi la pagina su un server web e la visualizzi su una connessione Internet, tu e i visitatori del tuo sito non vedrai questo errore.

Credito: opera di istockphoto. com

Come creare un'immagine di rollover semplice in Dreamweaver - dummies

Scelta dell'editore

Il programma in cinque passaggi per superare la menopausa - dummy

Il programma in cinque passaggi per superare la menopausa - dummy

Alcune donne capiscono a malapena che la menopausa è loro. Altre donne, tuttavia, sono meno fortunate. Se sei uno di questi, prendi in mano questi pochi modi per rendere la tua esperienza più facile per te stesso: capisci e accetta che stai attraversando una transizione naturale, proprio come la pubertà. Fortunatamente, sei più vecchio e più saggio di te ...

Menopausa For Dummies Cheat Sheet (edizione UK) - dummies

Menopausa For Dummies Cheat Sheet (edizione UK) - dummies

Menopausa segna la fine della fase riproduttiva della tua vita e così è un momento significativo di cambiamento fisico, emotivo e mentale per molte donne ma, per generazioni, donne di tutte le età hanno vagato alla cieca in menopausa senza sapere cosa aspettarsi. Qui puoi scoprire alcune delle nozioni di base.

Perimenopausa: facilitare la transizione dalle mestruazioni alla menopausa - manichini

Perimenopausa: facilitare la transizione dalle mestruazioni alla menopausa - manichini

Mestruazioni e menopausa sono ben noti biologici pietre miliari nella vita di una femmina. Contrariamente al pensiero popolare, la menopausa non è il periodo di mesi o anni in cui una donna sta "attraversando il cambiamento". "Questo lasso di tempo è chiamato perimenopausa. La menopausa è una data effettiva nel tempo. In particolare, è il 12 ° anniversario dell'ultimo ciclo mestruale di una donna. ...

Scelta dell'editore

Come utilizzare il filtro automatico personalizzato su una tabella di Excel - dummies

Come utilizzare il filtro automatico personalizzato su una tabella di Excel - dummies

È Possibile creare un filtro automatico personalizzato . Per fare ciò, seleziona il comando Filtro testo dal menu della tabella e scegli una delle opzioni di filtro del testo. Indipendentemente dall'opzione di filtro del testo selezionata, Excel visualizza la finestra di dialogo Filtro automatico personalizzato. Questa finestra di dialogo consente di specificare con estrema precisione quali record si desidera ...

Come utilizzare la funzione DPRODUCT in un database Excel - dummies

Come utilizzare la funzione DPRODUCT in un database Excel - dummies

DPRODUCT moltiplica i valori che corrispondono al criterio in un database Excel. Questo è potente ma anche in grado di produrre risultati che non sono l'intenzione. In altre parole, è una cosa da aggiungere e ricavare una somma. Questa è un'operazione comune su un set di dati. Osservando la seguente figura, è possibile ...

Come utilizzare la funzione DPRODUCT in Excel - dummy

Come utilizzare la funzione DPRODUCT in Excel - dummy

La funzione DPRODUCT in Excel è strana. La funzione DPRODUCT moltiplica i valori nei campi da un elenco di database in base ai criteri di selezione. Perché vorresti farlo? Chissà. La funzione utilizza la sintassi = DPRODUCT (database, campo, criteri) in cui il database è un riferimento all'intervallo alla tabella di Excel che contiene il valore desiderato ...

Scelta dell'editore

Programmazione con Java: riutilizzo dei nomi nella tua app per Android - dummies

Programmazione con Java: riutilizzo dei nomi nella tua app per Android - dummies

Ci sono un paio di cose a cui vuoi pensare quando riutilizzi i nomi nella tua app per Android. È possibile dichiarare due variabili Java - bag1 e bag2 - per fare riferimento a due diversi oggetti BagOfCheese. Va bene. Ma a volte, avere solo una variabile e riutilizzarla per il secondo oggetto funziona altrettanto bene, ...

Java: Mettere a frutto l'uso della classe - dummies

Java: Mettere a frutto l'uso della classe - dummies

La classe Employee nell'elenco non ha alcun metodo principale , quindi non c'è un punto di partenza per l'esecuzione del codice. Per risolvere questo problema, il programmatore scrive un programma separato con un metodo principale e utilizza tale programma per creare istanze Employee. Questo elenco di codici mostra una classe con un metodo principale - uno che inserisce il ...

Classi wrapper java - dummies

Classi wrapper java - dummies

La differenza tra tipi primitivi e tipi di riferimento è una delle funzionalità più controverse di Java e gli sviluppatori si lamentano spesso sulle differenze tra valori primitivi e valori di riferimento. Ogni tipo primitivo viene cotto nella lingua. Java ha otto tipi primitivi. Ogni tipo di riferimento è una classe o un'interfaccia. È possibile definire il proprio ...