Unofficial WebSite X5

Categoria generale => FAQ - HowTo - Tutorials => Topic aperto da: milux - 19 Dicembre, 2011, 09:31:48

Titolo: Cartina d'Italia
Inserito da: milux - 19 Dicembre, 2011, 09:31:48
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 (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..)


[attach=1]

nel caso aveste problemi potete scaricare qui la parte da inserire (formato txt)


[attachurl=3]

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 :


[attach=2]


8 ) Adesso dobbiamo allegare o mettere in rete le immagini contenute nella cartella /img.


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 :


[attach=4]


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 (http://www.3md.it/mappe/mappa-italia.html)
Titolo: Re:Cartina d'Italia
Inserito da: milux - 05 Novembre, 2012, 09:52:14
Sulla base dell'esercizio precedente è stata introdotta una variante e cioè la possibilità di avere l'elenco delle provincie cliccando sulla regione. Ovviamente cliccando sulla provincia scelta si accede alla pagina corrispondente..


Il procedimento è identico al precedente salvo alcune righe di codice in più che dovremmo aggiungere.


codice javascript da inserire nella sezione esperto della pagina prima del tag /HEAD


Codice:
Only registered users can see contents. Please click here to Register or Login.

Nella pagina il codice html da inserire che dovrà essere completato con le pagine corrispondenti..


[attachurl=1]


Un grazie a Stesil per il contributo alla modifica del codice.




qui la pagina di prova (http://www.3md.it/mappe/italia-e-province.html)

Titolo: Re:Cartina d'Italia
Inserito da: ale_dj - 20 Gennaio, 2014, 08:41:15
buongiorno ma il link sopra non funziona più come faccio per reperire la pagina???

Titolo: Re:Cartina d'Italia
Inserito da: milux - 20 Gennaio, 2014, 10:09:29
se ti riferisci a flepstudio effettivamente sembra essere offline..
Titolo: Re:Cartina d'Italia
Inserito da: ale_dj - 20 Gennaio, 2014, 10:26:30
Si Milux... volevo sapere dove poter trovare una cartina per ricreare una lista di rivenditori...
Titolo: Re:Cartina d'Italia
Inserito da: Topografo - 30 Aprile, 2014, 22:02:37
Era una cosa che interessava pure a me... non si trova più ne il file zippato nè il sito con l'esempio.
... :?
Titolo: Re:Cartina d'Italia
Inserito da: lemonsong - 30 Aprile, 2014, 23:53:09
Non ho capito se ti riferisci a questo esempio allegato.

[attachurl=1]
Titolo: Re:Cartina d'Italia
Inserito da: ale_dj - 01 Maggio, 2014, 00:52:33
si esatto... ma come faccio ad inserire i css??? non ci capisco nulla!!!ihihihihih
Titolo: Re:Cartina d'Italia
Inserito da: Topografo - 01 Maggio, 2014, 01:31:39
Si, Lemonsong... proprio a quell'allegato.
Ma che fine ha fatto la pagina http://www.3md.it/mappe/italia-e-province.html per vedere come veniva?
Titolo: Re:Cartina d'Italia
Inserito da: milux - 01 Maggio, 2014, 08:54:57
Si, Lemonsong... proprio a quell'allegato.
Ma che fine ha fatto la pagina http://www.3md.it/mappe/italia-e-province.html per vedere come veniva?


ho il server giù , a breve dovrebbe tornare on-line
Titolo: Re:Cartina d'Italia
Inserito da: lemonsong - 01 Maggio, 2014, 10:55:38
In attesa che il server torni up, linko l'esempio di stesil: http://stesil.altervista.org/cartina/ (http://stesil.altervista.org/cartina/)

Non so se è simile all'esempio di milux; qui il topic di riferimento: http://www.unofficialwsx5.com/index.php?topic=1069.0 (http://www.unofficialwsx5.com/index.php?topic=1069.0)


Titolo: Re:Cartina d'Italia
Inserito da: Topografo - 01 Maggio, 2014, 12:22:05
Perfetto, grazie a tutti e due :)
Ho implementato tutto in una pagina di un sito che stò provando a fare (ma c'è solo un template) e non viene nulla... :D

Ok, magari deve essere un progetto a se stante.
O più facilmente quando ho inserito i file nella sezione esperto ho sbagliato qualcosa.... :( (in effetti si, se si inseriscono i files da "sezione esperto" la cartella non è img/ ma files/

E poi devo creare sicilia.html... :O

Visto che ho dormito 3 ore torno a letto in attesa del pranzo :)

inorridite! :D

http://veronacitysera01.altervista.org/veronacity/mappa.html
Titolo: Re:Cartina d'Italia
Inserito da: lemonsong - 01 Maggio, 2014, 13:41:05
Controlla bene e decidi quale esempio seguire, hai dimenticato alcuni CSS.

Inoltre hai inserito i tag <style type="text/css"> </style> all'interno del file pcss/mappa.css... non è corretto.
Titolo: Re:Cartina d'Italia
Inserito da: Topografo - 02 Maggio, 2014, 07:15:48
Ok, avevo dimenticato qualcosa... la parte di Milux
Ho levato dalla sezione esperto i css, li ho messi tutti in proprietà della pagina prima del tag </head> e qualcosa migliora
Ma qualcosa no... mi sà che lo riguardo stanotte.

http://veronacitysera01.altervista.org/Veronacity/mappa.html

Titolo: Re:Cartina d'Italia
Inserito da: lemonsong - 02 Maggio, 2014, 16:46:31
Se hai scelto l'esempio di milux devi prendere anche i CSS di milux: http://www.3md.it/mappe/pcss/italia-e-province.css (http://www.3md.it/mappe/pcss/italia-e-province.css)

Ovviamente inserendoli nel modo corretto (come già stato scritto).


Titolo: Re:Cartina d'Italia
Inserito da: Topografo - 02 Maggio, 2014, 20:13:07
Grazie!  :D
Ok, ora funziona (ero gnocco, mi ero incaponito) ma la soluzione me l'avevate detta letteralmente. Io la interpretavo :D
Ora devo solo modificare la mappa e al posto delle regioni devono venirci dentro i quartieri di Verona :D
Titolo: Re:Cartina d'Italia
Inserito da: lemonsong - 02 Maggio, 2014, 21:57:50
Ora devo solo modificare la mappa e al posto delle regioni devono venirci dentro i quartieri di Verona :D

Cioè, se ti serve un fiammifero vai nel bosco e tagli una quercia?  :))
Titolo: Re:Cartina d'Italia
Inserito da: Topografo - 02 Maggio, 2014, 23:57:41
No, mi serviva una mappa cliccabile e mettere i quartieri o le regioni è uguale, no?
Una volta usavo le aree sui disegni per figure semplici, ma i quartieri sono molto irregolari... o ci sono altre soluzioni?
Titolo: Re:Cartina d'Italia
Inserito da: lemonsong - 03 Maggio, 2014, 00:11:29
Per quel tipo di lavoro ti consiglio la mappatura classica, l'esempio da te scelto ti darebbe più lavoro che fare tutto da zero.

Con il nick che ti ritrovi hai problemi con le mappe?  ;)


Titolo: Re:Cartina d'Italia
Inserito da: Topografo - 03 Maggio, 2014, 12:42:37
Dici qualcosa del genere?
http://www.zspace.it/kolasim/wsx5_v8/mappaturaOOo/mappatura_K_1.html (http://www.zspace.it/kolasim/wsx5_v8/mappaturaOOo/mappatura_K_1.html) (preso da "Il cacciatore di Nuvole"), al limite reinstallo un vecchio dreamweaver e faccio la mappa lì.
Perchè da quanto ricordo non si possono mappare le immagini direttamente con WS5

Non pratico più quel mestiere dal 1999, ma usavo Autocad :D

Titolo: Re:Cartina d'Italia
Inserito da: lemonsong - 03 Maggio, 2014, 14:03:07
Dici qualcosa del genere?
http://www.zspace.it/kolasim/wsx5_v8/mappaturaOOo/mappatura_K_1.html (http://www.zspace.it/kolasim/wsx5_v8/mappaturaOOo/mappatura_K_1.html)


Sì, quello è uno dei modi.
Prova a leggere anche qui http://www.essedi.altervista.org/_sito/mappatura-immagine.html (http://www.essedi.altervista.org/_sito/mappatura-immagine.html) e su Google  :)
Titolo: Re:Cartina d'Italia
Inserito da: Topografo - 04 Maggio, 2014, 00:54:53
Si, su google ci sono gli esempi di codice, la seccatura è fare la mappa :D
Pensavo di usare dreamweaver ma vedo che anche Gimp (che non ho) lo fa...
Magari lo provo :)

Bello il tuo sito (e utile)
Titolo: Re:Cartina d'Italia
Inserito da: lemonsong - 04 Maggio, 2014, 12:39:58
Bello il tuo sito (e utile)

Più che un sito è un "promemoria"... comunque grazie  :)