Mappa immagine
Download
1 / 17

MAPPA IMMAGINE - PowerPoint PPT Presentation


  • 145 Views
  • Uploaded on

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.

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about ' MAPPA IMMAGINE' - fleur


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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
Mappa immagine

MAPPA IMMAGINE

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


Immagini attive
IMMAGINI ATTIVE

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


Mappa immagine1
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.


Come realizzare una mappa immagine
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


  • 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


Creazione dei punti attivi
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


  • 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


  • Proprietà puntatore) - 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


Elementi
ELEMENTI puntatore)

  • 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


  • 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


Comportamento dei livelli
COMPORTAMENTO DEI LIVELLI gli strumenti relativi nella finestra

Collegare al passaggio del puntatoresu un punto attivo la visione del testo corrispondente


Comportamento dei livelli1
COMPORTAMENTO DEI LIVELLI gli strumenti relativi nella finestra

  • Finestra - Comportamenti

  • Selezionare il primo punto attivo

  • Clic sul pulsante + sul pannello Comportamenti

  • Clic Mostra-nascondielementi


  • Nella finestra gli strumenti relativi 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



Sovrapporre gli elementi
SOVRAPPORRE GLI ELEMENTI rivolta verso il basso.

  • 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



Nascondere gli elementi
NASCONDERE GLI ELEMENTI rivolta verso il basso.

  • 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


ad