1 / 17

MAPPA IMMAGINE

MAPPA IMMAGINE. Imparare a realizzare una mappa immagine e a creare/gestire i livelli. IMMAGINI ATTIVE. Si possono rendere delle immagini “attive” con degli opportuni strumenti e sfruttandole in modo interattivo. MAPPA IMMAGINE.

fleur
Download Presentation

MAPPA IMMAGINE

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. MAPPA IMMAGINE Imparare a realizzare una mappa immagine e a creare/gestire i livelli.

  2. IMMAGINI ATTIVE • Si possono rendere delle immagini “attive” con degli opportuni strumenti e sfruttandole in modo interattivo.

  3. MAPPA IMMAGINE • Utilizzando una singola immagine è possibile realizzare dei collegamenti da specifiche aree dell’immagine a ulteriori pagine, file o indirizzi e-mail. • Dopo aver reso un’immagine attiva il visitatore può far clic su un punto attivo dell’immagine per visualizzare le informazioni.

  4. COME REALIZZARE UNA MAPPA IMMAGINE • Aprire Dreamweaver • File - Aprire una pagina .html (es. Dove siamo.html) • Pannello Inserisci - scheda Comune - pulsante Immagini • All’apertura della finestra Seleziona file di origine immagine indica il percorso dell’immagine nel campo Cerca in e premi OK

  5. All’apertura della finestra Attributi di accessibilità tag dell’immagine - inserisci nel campo Testo alternativo una breve descrizione dell’immagine (Mappa-Riccione.jpg) - OK • Aprendo la cartella immagini essa contiene il file dell’immagine Mappa-Riccione.jpg • Ora è pronta per essere elaborata

  6. CREAZIONE DEI PUNTI ATTIVI • Selezionare l’immagine facendo clic su di essa per renderla attiva • La finestra Proprietà contiene tre pulsanti per la definizione dei punti attivi (selezionare uno di essi): • Strumento punto attivo Rettangolo: punto attivo di forma rettangolare • Strumento punto attivo Ovale: punto attivo di forma ovale • Strumento punto attivo Poligono: forma irregolare

  7. Spostare il cursore sull’immagine (assume la forma di un puntatore) • Tracciare il contorno dell’immagine • Proprietà - Clic sul pulsante Strumento punto attivo Puntatore • Clic sull’immagine in un punto esterno dell’area attiva per deselezionarla • Fare la stessa operazione per creare un’altra area attiva

  8. Proprietà - campo Mappa - assegnare nome alla Mappa (es. Map) • Selezionare un’area attiva - Proprietà - campo Alt (testo alternativo) e digitare il nome corrispondente (il testo inserito verrà visualizzato nel browser quando il cursore passerà sopra l’area attiva) • Ripetere le stesse operazioni per le altre figure • Salva la pagina e visualizza l’anteprima nel browser

  9. ELEMENTI • Aprire la pagina Dove siamo.html • Inserisci - scheda Layout - Disegna div PA • Posizionare il pulsante alla destra dell’immagine per creare un livello rettangolare come in figura • Clic all’interno del livello - inserire del testo che riporti delle informazioni sul punto attivo

  10. Clic sulla linguetta per selezionare il livello e visualizza gli strumenti relativi nella finestra Proprietà • Campo Elemento CSS-P il nome dell’elemento (es. infospedale) • Proprietà - Col sfondo - scegli un colore da assegnare allo sfondo del livello • Ripetere la stessa operazione anche per gli altri punti attivi collocando il livello di fianco al primo • Salvare la pagina e visualizzare l’anteprima del browser

  11. COMPORTAMENTO DEI LIVELLI Collegare al passaggio del puntatoresu un punto attivo la visione del testo corrispondente

  12. COMPORTAMENTO DEI LIVELLI • Finestra - Comportamenti • Selezionare il primo punto attivo • Clic sul pulsante + sul pannello Comportamenti • Clic Mostra-nascondielementi

  13. Nella finestra Mostra-nascondi elementi - selezionareinfospedale - pulsante Mostra - OK • Pannello Comportamenti - aonMouseOvercorrisponde l’azione Mostra livello (es. livello infospedale) • Seleziona il punto attivo dell’immagine - clic sul pulsante + - Mostra-nascondi elementi • Mostra-nascondi elementi -infospedale- Nascondi- OK

  14. Selezionare la voce da modificare - Clic sulla freccia rivolta verso il basso. • All’apertura del menù selezionare la voce onMouseOut. • Ripetere le operazione per tutti gli altri punti attivi.

  15. SOVRAPPORRE GLI ELEMENTI • Menù Visualizza - Griglia - Mostra Griglia • Verificare segno di spunta accanto alla Griglia calamitata • Il documento presenterà una griglia comportandosi come una calamita • Clic sulla linguetta del primo livello di informazioni spostandolo vicino alle linee della griglia

  16. Trascinare il secondo livello sul piano sopra il primo • Gli elementi sono sovrapposti • Per ridimensionare un livello è necessario visualizzarlo Finestra - Elementi PA – Clic sul nome da visualizzare

  17. NASCONDERE GLI ELEMENTI • Clic - voce infospedale(presente nel pannello PA) • Proprietà - campo Vis (visibilità) - voce hidden(per nascondere l’elemento) • Ripetere le stesse operazione per gli altri elementi • Salvare la pagina e visualizzare l’anteprima del browser

More Related