Unofficial WebSite X5
Categoria generale => FAQ - HowTo - Tutorials => Topic aperto 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.
- 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 :
[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)
-
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
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)
-
buongiorno ma il link sopra non funziona più come faccio per reperire la pagina???
-
se ti riferisci a flepstudio effettivamente sembra essere offline..
-
Si Milux... volevo sapere dove poter trovare una cartina per ricreare una lista di rivenditori...
-
Era una cosa che interessava pure a me... non si trova più ne il file zippato nè il sito con l'esempio.
... :?
-
Non ho capito se ti riferisci a questo esempio allegato.
[attachurl=1]
-
si esatto... ma come faccio ad inserire i css??? non ci capisco nulla!!!ihihihihih
-
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?
-
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
-
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)
-
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
-
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.
-
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
-
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).
-
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
-
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? :))
-
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?
-
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? ;)
-
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
-
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 :)
-
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)
-
Bello il tuo sito (e utile)
Più che un sito è un "promemoria"... comunque grazie :)