Tutorial: Adattare le skin del web a Jimdo. Per postare questo tutorial su altri blog/siti/forum inviatemi una o un pm

Transcript

1 Tutorial: Adattare le skin del web a Jimdo Tutorial creato da: marte9020 Tutorial creato per: Programma utilizzato: Google Chrome (Qualsiasi Browser va bene) Per postare questo tutorial su altri blog/siti/forum inviatemi una o un pm In questa guida impareremo ad adattare le skin (o template) che possiamo trovare gratuitamente nel web al nostro sito Jimdo. Come già abbiamo potuto vedere nella guida Creare una skin di base in CSS la piattaforma di Jimdo adotta un linguaggio particolare richiedendo obbligatoriamente l inserimento nel codice HTML di parti prestabilite che sono Content, Sidebar, Navigation e Footer. Purtroppo essendo Jimdo un circuito relativamente giovane per il web troviamo pochissimi siti web che forniscono delle skin adattate a questa piattaforma, mentre invece ne troviamo a migliaia per altri, però con un po di pazienza possiamo comunque andare ad adattare template nati ad esempio per Wordpress a Jimdo Per prima cosa è fondamentale ricordare che i template applicabili a Jimdo sono solo quelli che ci forniscono codici HTML e CSS da inserire nel nostro sito web. Iniziamo andando in un sito che fornisce questo genere di servizi, nella sezione apposita di Jimding3 potete trovare un elenco di siti che offrono gratuitamente templates gratuiti, nel caso del tutorial però il sito utilizzato è 1 Tutorial: Adattare Skin a Jimdo Creato da marte9020 per per informazioni contattate dozy3@hotmail.it

2 Scegliamo dal menù del sito web la categoria più indicata, nel mio caso ho optato per la XHTML-CSS Scarichiamo ora la skin adatta nel nostro computer, nel caso ho scelto la skin Vertebrata 2 Tutorial: Adattare Skin a Jimdo Creato da marte9020 per per informazioni contattate dozy3@hotmail.it

3 Scompattiamo il file.rar contenente la skin ed apriamone la cartella contestuale Clicchiamo con il tasto destro del mouse sul file HTML (generalmente chiamato INDEX ), selezioniamo Apri con e da lì scegliamo il Blocco note 3 Tutorial: Adattare Skin a Jimdo Creato da marte9020 per per informazioni contattate dozy3@hotmail.it

4 Copiamo ora l intero contenuto del documento Apriamo ora il nostro sito web Jimdo ed entriamo in modalità di modifica del sito 4 Tutorial: Adattare Skin a Jimdo Creato da marte9020 per per informazioni contattate dozy3@hotmail.it

5 Andiamo nel menù Layout e selezioniamo Proprio Layout Incolliamo ora nella parte HTML il contenuto della pagina del Blocco Note 5 Tutorial: Adattare Skin a Jimdo Creato da marte9020 per per informazioni contattate dozy3@hotmail.it

6 Premiamo ora sul pulsante XHTML per eliminare le parti inutili del documento e per verificarne la correttezza lessicale Ora è il momento di andare a modificare materialmente il codice, al momento il vostro sito web non può essere attivato perchè mancano le aree fondamentali come dicevo sopra, ma se venisse attivato risulterebbe identico all immagine di presentazione del templates, compreso nei testi presenti, nel caso della skin Vertebrata avrebbe questo aspetto e riporterebbe gli stessi testi 6 Tutorial: Adattare Skin a Jimdo Creato da marte9020 per per informazioni contattate dozy3@hotmail.it

7 Iniziamo a modificare per prima cosa l area del contenuto o Content, per farlo indentifichiamo nel documento la zona in cui compaiono le scritte che vedete nell immagine di anteprima, nel mio caso Welcome to vertebrata, generalmente chi fornisce i tempate suddivide in partenza le zone e quindi potreste essere facilitati in questo, però laddove non fosse presente questa suddivisione identificare i testi è il modo migliore Ora che la zona è identificata eliminiamola completamente premendo CANC o Backspace dalla tastiera 7 Tutorial: Adattare Skin a Jimdo Creato da marte9020 per per informazioni contattate dozy3@hotmail.it

8 Al posto del codice rimosso inseriamo questa voce <div id= content ><var>content</var></div> Passiamo ora a modificare la Sidebar, cioè l area contenente la pubblicità di Jimdo, come prima indentifichiamo l area ed eliminiamone il contenuto 8 Tutorial: Adattare Skin a Jimdo Creato da marte9020 per per informazioni contattate dozy3@hotmail.it

9 Incolliamo ora questo tipo di codice <div id= sidebar ><var>sidebar</var></div> Passiamo ora alla zona successiva, cioè il FOOTER, generalmente all interno trovare i crediti di chi ha creato la skin, in quest area lasceremo quindi tutto inalterato per rispetto a chi ha fatto il lavoro per noi, l unica aggiunta quindi è quella di posizionarsi all interno delle voci <div id= footer > contenuto </div> e di premere il pulsante Footer. Ovviamente possiamo anche modificare la parte in cui è scritto Copyright Sitename.com andando a cambiare sitename.com con il nome del nostro sito 9 Tutorial: Adattare Skin a Jimdo Creato da marte9020 per per informazioni contattate dozy3@hotmail.it

10 Ora dobbiamo andare a modificare il menù di navigazione, per farlo andiamo a cercare l area chiamata menu o a volte Navigation Come potete vedere all interno sono già presenti delle voci, andiamo a posizionarci subito dopo l ultima di queste e premiamo il pulsante Navigation, inseriamo però questa voce all interno del codice <div id= navigation ></div>, in questo modo poi potremo nasconderlo tramite il CSS 10 Tutorial: Adattare Skin a Jimdo Creato da marte9020 per per informazioni contattate dozy3@hotmail.it

11 Adesso ci troviamo davanti ad una scelta. Generalmente questo genere di menù importa direttamente le voci presenti adattandole alla struttura di base, il problema è che spesso e volentieri le sottosezioni vengono visualizzate come sezioni principali. Possiamo quindi eliminare semplicemente le voci già presenti all interno del codice fornito dal sito lasciando la navigazione del nostro sito Jimdo, oppure eliminare le voci già presenti per sostituirle a delle voci alternative che fungeranno da menù. In questo tutorial vedremo come modificare le voci già presenti a questo scopo. Iniziamo quindi andando nella prima voce HOME e modificando il campo # inserendoci l indirizzo della pagina a cui vogliamo collegarlo, nel caso l home page del nostro sito web Modifichiamo le altre voci presenti collegandole a delle pagine del nostro sito web. Ovviamente possiamo modificarne il nome andando ad inserire il nome corretto al posto della parola presente (Blog, Photos, ecc...). Per aggiungere nuove voci ci basta aggiungere e modificare questo tipo di codice <li><a href= # >nome menu</a> 11 Tutorial: Adattare Skin a Jimdo Creato da marte9020 per per informazioni contattate dozy3@hotmail.it

12 Scegliendo questa opzione le sottocategorie non verranno visualizzate, quindi per visualizzare una sottopagina dovrete inserire voi dei collegamenti testuali o in formato immagine nell area del contenuto. Ovviamente nel web trovate anche dei menù HTML/CSS adatti allo scopo, nella sezione apposita di Jimding3 trovate una lista dei siti gratuiti che li forniscono, inoltre a questo indirizzo ne trovate alcuni compresa una guida per modificarli Ora che la parte del codice HTML è conclusa andiamo a copiare il codice CSS fornito per la skin, generalmente il file si chiama Style, o comunque è l unico ad essere in formato CSS 12 Tutorial: Adattare Skin a Jimdo Creato da marte9020 per per informazioni contattate dozy3@hotmail.it

13 Incolliamo il testo del documento nella parte CSS del nostro sito web Scorriamo fino alla fine del codice ed aggiungiamo questa voce #navigation {display:none;}, in questo modo il menù di base di Jimdo non verrà visualizzato 13 Tutorial: Adattare Skin a Jimdo Creato da marte9020 per per informazioni contattate dozy3@hotmail.it

14 Torniamo ora all inizio del foglio CSS ed andiamo ad analizzare il contenuto cercando i collegamenti alle immagini, infatti dobbiamo modificarli, generalmente gli indirizzi presenti sono del tipo images/img02.jpg, visto che caricheremo le immagini tramite il modulo dati però dobbiamo andare ad eliminare la voce images/ lasciando solo il nome Ora andiamo nel menù Dati e carichiamo in rete le immagini fornite per la skin 14 Tutorial: Adattare Skin a Jimdo Creato da marte9020 per per informazioni contattate dozy3@hotmail.it

15 Torniamo quindi nel menù HTML e premiamo Salvare, durante l analisi del codice potrebbero emergere degli errori, in questo caso premiamo semplicemente il pulsante Correzione automatica che apparirà Una volta attivato il templates potrebbe essere necessario aggiornare la pagina per visualizzarlo correttamente 15 Tutorial: Adattare Skin a Jimdo Creato da marte9020 per per informazioni contattate dozy3@hotmail.it

16 Ovviamente poi possiamo andare a modificare anche altre parti del codice e possiamo anche inserire altri elementi. Comunque per far apparire il nome del nostro sito al posto di Vertebrata dobbiamo semplciemente sostituorie la parola Vertebrata con il nome del sito nel foglio HTML nella parte relativa all header Detto questo non mi resta che agurarvi buon lavoro, ricordatevi sempre di non eliminare i crediti nel rispetto di chi ha creato questi layout. Per eventuali domande potete contattarmi a dozy3@hotmail.it Per altre guide utili sul tuo sito Jimdo e altro materiale visita Ti interessano tutorial per Photoshop o Gimp? Cerchi materiale grafico? Visita 16 Tutorial: Adattare Skin a Jimdo Creato da marte9020 per per informazioni contattate dozy3@hotmail.it