Questo tutorial vi spiega uno dei tanti sistemi possibili per creare una cartina cliccabile. In rete ci sono tantissimi esempi e quello che abbiamo trovato è forse uno dei più semplici e immediati da utilizzare.
Tutti i files che vi servono li trovate qui :
http://css.flepstudio.org/css-menu/css-mappa-italia-8.html ; scaricate il file .zip e decomprimetelo in una cartella a vostro piacere.
All'interno della cartella troverete un file index.html e una cartella /img che contiene le immagini necessarie.
1) Creiamo quindi con Website X5 versione 9 un nuovo progetto , utilizzando un semplice modello predefinito.
2) andiamo al passo 2 e creiamo una pagina (il nome lo lasciamo alla vostra fantasia) in cui inseriremo il codice hmtl necessario. Nel nostro caso l'abbiamo chiamata Mappa ITALIA
3) Con un editor di testo (personalmente uso PSPAD) apriamo il nostro file index.html che abbiamo precedentemente scaricato. Il file contiene anche la parte relativa al CSS che noi dovremo suddividere.
4) Ritorniamo a WSX5 e all'interno della nostra pagina inseriamo l'oggetto "codice HTML" e clicchiamo sopra l'oggetto per aprirlo.
5) con l'editor copiamo (ctrl+c) dalla pagina index.html tutta la parte compresa tra i <div id="contenitore"> e </ div>
6) con la funzione incolla (ctrl+v) riportiamo il contenuto nell'oggetto html di WSX5; il risultato è questo (non si vede tutto il codice perchè ci sono molte righe..)
[ Guests cannot view attachments ]
nel caso aveste problemi potete scaricare qui la parte da inserire (formato txt)
[ Guests cannot view attachments ]
7) sempre con l'editor di testo selezioniamo dal file index.html la parte relativa al CSS e la riportiamo nella sezione Esperto del codice HTML che abbiamo inserito. Risultato finale :
[ Guests cannot view attachments ]
8 ) Adesso dobbiamo allegare o mettere in rete le immagini contenute nella cartella /img.
- Metodo A) Possiamo utilizzare il caricamento dei files dalla sezione Esperto dell'Oggetto HTML. Per selezionare più files contemporaneamente usare il tasto CTRL e cliccando sui var files. Nota: questa modalità di esecuzione non sembra funzioni su tutti i sistemi operativi e/o PC. Dovete quindi provare e nel caso non funzionasse la selezione multipla, dovete fare l'inserimento per singolo file o passare al metodo B. Questo metodo ha anche un'altro svantaggio è cioè che ogni volta che fate un aggiornamento del vs sito internet, farà comunque l'ftp degli allegati.
- Metodo B) Upload della cartella con i contenuti. Lo potete eseguire con il vostro programma preferito di FTP o altri tipi di procedure. Personalmente è la procedura che preferisco in quanto.
9) Adesso con Website creiamo le varie pagine dedicate ad ognuna delle regioni : nel nostro caso abbiamo creato ad esempio la Lombardia dove abbiamo inserito una semplice immagine e un testo. Il nome del file lo lasciamo di default e nel nostro caso si chiama lombardia.html ; per poter aprire la pagina dalla nostra cartina dobbiamo specificare il nome del file. Riapriamo il nostro oggetto html della pagina Mappa ITALIA e modifichiamo inserendo il nome del file :
[ Guests cannot view attachments ]
Il procedimento è da ripetere per ogni pagina che andrete a creare.
A questo punto se avete fatto tutto correttamente , fate l'esportazione del progetto e verificate che sia tutto corretto. Il resto lo lasciamo alla vostra fantasia.
Qui potete vedere il lavoro finito :
CARTINE
