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

Tasti di scelta rapida per Microsoft Office 2007 - dummies

Tasti di scelta rapida per Microsoft Office 2007 - dummies

Microsoft Office 2007 è pieno di scorciatoie da tastiera per risparmiare tempo. Comprimi i componenti di Office 2007 - Word, Excel, Outlook, PowerPoint e Access - utilizzando i tasti di scelta rapida utili della seguente tabella. Con poco sforzo, puoi aprire file, trovare contenuti, modificare quel contenuto e altro! Funzione Ctrl Copia Ctrl + C Taglia Ctrl + X Trova Ctrl + F Vai ...

Vantaggi di Lync Online - dummies

Vantaggi di Lync Online - dummies

Lync Online è disponibile sia in ambito professionale sia in piccole imprese (P) e aziendali (E ) piani in Office 365. Le funzionalità includono messaggistica istantanea (IM), chiamate audio e video, presenza, riunioni online, presentazioni online e la possibilità di connettersi con i contatti di Windows Live Messenger e altri utenti esterni che eseguono Lync. La tecnologia è integrata in tutto ...

Come avviare una conversazione con Lync Online - dummies

Come avviare una conversazione con Lync Online - dummies

La scheda di contatto di Lync Online è un ottimo modo per avviare una conversazione con un collega o i membri del tuo team. Oltre alle note personali, alla presenza e alla posizione, vengono visualizzate anche le informazioni sulla tua organizzazione come il titolo e i numeri di telefono. Per visualizzare la scheda di contatto, passa con il mouse sopra l'immagine di una persona e fai clic sul gallone ...

Scelta dell'editore

Come scegliere un'immagine di sfondo Twitter per Visual Social Marketing - dummies

Come scegliere un'immagine di sfondo Twitter per Visual Social Marketing - dummies

Quando si imposta su un account Twitter per il social marketing visivo, un tipo di immagine che è richiesto per il tuo profilo è l'immagine di sfondo - viene visualizzata dietro il profilo Twitter. Nella parte superiore della schermata Impostazioni disegno, Twitter ti consente di scegliere tra una serie di temi premade. Un tema premade applica un ...

Come scegliere un buon nome utente Twitter - dummy

Come scegliere un buon nome utente Twitter - dummy

Su Twitter, il tuo nome utente, o handle, è il tuo identità. Se puoi, iscriviti a Twitter usando il tuo nome o una variante di esso come nome utente (supponendo che qualcun altro non lo stia già utilizzando). Ad esempio, se il tuo nome è John Ira, potresti scegliere un nome utente Twitter come @johnira o ...

Come personalizzare il tuo profilo Twitter - dummies

Come personalizzare il tuo profilo Twitter - dummies

La tua pagina pubblica su Twitter, noto anche come profilo, è la prima impressione che gli altri utenti di Twitter hanno di te, e può fare una grande differenza nel decidere se seguirti. Personalizzare la tua pagina del profilo Twitter in modo che rifletta te o la tua azienda fa la differenza quando si tratta di persone ...

Scelta dell'editore

Perché avresti bisogno di più profili utente per Dragon Professional Individuale - manichini

Perché avresti bisogno di più profili utente per Dragon Professional Individuale - manichini

Drago Individuo professionale capisce solo quelli che si sono presentati ufficialmente come utenti e hanno creato un profilo utente. Ecco quattro motivi per cui potresti voler creare più di un profilo utente: usi diversi vocabolari o stili di scrittura per compiti diversi. Si utilizzano diversi microfoni per compiti diversi. Volete ...

Lavorare con fogli di calcolo Usare NaturallySpeaking - dummies

Lavorare con fogli di calcolo Usare NaturallySpeaking - dummies

Utilizzando fogli di calcolo con versioni precedenti di NaturallySpeaking era difficile perché non si poteva indirizzare direttamente i nomi delle celle. Volevi dire qualcosa come "Cella A5" o "Seleziona Colonna C." Ma (sospiro), niente dado. Il tuo assistente non aveva idea di cosa stavi parlando. Bene, il tuo assistente ha "up-leveled" le sue abilità! Ora è possibile ...

Su Evernote's Passcode Lock - dummies

Su Evernote's Passcode Lock - dummies

Abbonati premium e business che utilizzano determinati dispositivi ora possono bloccare l'app Evernote con un blocco Passcode . Ogni volta che torni all'app, ti viene chiesto di inserire il tuo codice. Un blocco passcode è un'ottima opzione se condividi il tuo telefono o tablet con altre persone e vuoi impedire loro di accedere a ...