SlideShare a Scribd company logo
1 of 10
Personalizzare un templatePersonalizzare un template
Con i propri contenuti
Il templateIl template
Un template contiene:
1. Il file index.html e/o altre pagine web
2. Una cartellina con le immagini “images”
3. Una cartellina con i fogli di stile “CSS”
4. Una cartellina con i programmi javascript “js”
Nascondere le parti inutiliNascondere le parti inutili
Non tutto il template ci sarà utile. Alcune parti possono non
piacerci o non servirci. In questo caso non le cancelleremo
per paura di compromettere la pagina. Ci limiteremo a
nascondere il codice tra due tags commento.
<!--
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas pellentesque justo ac
velit facilisis convallis vel id nisi. Morbi hendrerit ac tellus eu luctus. Vestibulum
ullamcorper elit eu eleifend posuere. Proin imperdiet nisl eu est vulputate, vel tincidunt
lacus pretium.</p>
-->
Tag di apertura
Tag di chiusura
Posso modificare i testi del file html sostituendo quelli preesistenti
con quelli miei. (L’operazione può essere fatta con un semplice editor di testo come il
blocco note di windows o un altro editor html)
Importante! Fate attenzione a non cancellare i tags!
Esempio:
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas pellentesque justo ac velit
facilisis convallis vel id nisi. Morbi hendrerit ac tellus eu luctus. Vestibulum ullamcorper elit eu
eleifend posuere. Proin imperdiet nisl eu est vulputate, vel tincidunt lacus pretium.</p>
<p>Il nostro hotel si trova a pochi passi dal centro storico circondato dai monumenti più famosi
della città.</p>
Modificare i testiModificare i testi
Testo preesistente
Testo modificato
tag
tag
tag
tag
Sostituire le immagini
Nella cartellina “images” sono contenute le immagini del
template. Suggeriamo di sostituirle con le proprie
osservando scrupolosamente queste condizioni:
1. Non cambiare il nome e l’estensione dell’immagine (di
norma jpg)
2. Inserire la nuova immagine rispettando il formato
(larghezza X altezza) e la risoluzione.
Salvare le immagini
Le immagini scattate con la vostra macchina fotografica e/o
telefonino dovranno essere salvate nel formato jpg. Inoltre
dovranno essere aperte con un programma che vi permetta di
modificare la risoluzione e il formato come quelli delle
immagini del template che sostituite
Formato: = dimensioni larghezza X altezza
Risoluzione = numero di pixel per pollice
Risoluzione e formatoRisoluzione e formato
Finestre di
Photoshop usate per
modificare il
formato e la
risoluzione
• Se non avete esperienza
nel modificare i fogli di
stile vi consigliamo di
limitare le modifiche ai
colori e agli sfondi.
• Cambiare posizioni e
dimensioni degli
elementi potrebbe
compromettere la
grafica del template
Modificare il foglio di stileModificare il foglio di stile
modifica
modifica
pericoloso
I programmi javascriptI programmi javascript
Sono contenuti nella cartellina “images” e il loro codice
non va toccato.
Uno script javascript è un piccolo programma con una
o più funzioni che vengono richiamate dal file html
attraverso una dichiarazione contenuta nei metatag e
una chiamata a funzione contenuta nel codice del body
Le chiamate javascript
Esecuzione della funzione
apri all’interno del <body>
Funzione javascript
scritta nell’head del
file html
Chiamata della funzione
apri contenuta nella
cartellina “js” nei metatag

More Related Content

Viewers also liked (17)

торты и пирожные без выпекания
торты и пирожные без выпеканияторты и пирожные без выпекания
торты и пирожные без выпекания
 
Ubiquitin proteasome pathway and plant development
Ubiquitin proteasome pathway and plant developmentUbiquitin proteasome pathway and plant development
Ubiquitin proteasome pathway and plant development
 
Questionnaire
QuestionnaireQuestionnaire
Questionnaire
 
resume 2016
resume 2016resume 2016
resume 2016
 
IADC Sept 2015 -RCM-Print PDF
IADC Sept 2015 -RCM-Print PDFIADC Sept 2015 -RCM-Print PDF
IADC Sept 2015 -RCM-Print PDF
 
Candidatos ayuntamiento
Candidatos ayuntamientoCandidatos ayuntamiento
Candidatos ayuntamiento
 
Why Mulesoft ?
Why Mulesoft ?Why Mulesoft ?
Why Mulesoft ?
 
Material de apoio logica 2010 01
Material de apoio logica 2010 01Material de apoio logica 2010 01
Material de apoio logica 2010 01
 
Gestire la posta
Gestire la postaGestire la posta
Gestire la posta
 
Inserire servizi
Inserire serviziInserire servizi
Inserire servizi
 
Carrello
CarrelloCarrello
Carrello
 
PayPal Presentation
PayPal PresentationPayPal Presentation
PayPal Presentation
 
Wordpress: Guida all'uso (avanzato)
Wordpress: Guida all'uso (avanzato)Wordpress: Guida all'uso (avanzato)
Wordpress: Guida all'uso (avanzato)
 
WordPress 101 – Freelance Day - 24 ottobre 2015
WordPress 101 – Freelance Day - 24 ottobre 2015WordPress 101 – Freelance Day - 24 ottobre 2015
WordPress 101 – Freelance Day - 24 ottobre 2015
 
Wordpress + WooCommerce: Guida alla configurazione (free webinar)
Wordpress + WooCommerce: Guida alla configurazione (free webinar)Wordpress + WooCommerce: Guida alla configurazione (free webinar)
Wordpress + WooCommerce: Guida alla configurazione (free webinar)
 
Risorse e metodi per imparare a usare WordPress
Risorse e metodi per imparare a usare WordPressRisorse e metodi per imparare a usare WordPress
Risorse e metodi per imparare a usare WordPress
 
Pay pal
Pay palPay pal
Pay pal
 

Similar to Modificare un template

Come usare e ottimizzare le immagini per il web
Come usare e ottimizzare le immagini per il webCome usare e ottimizzare le immagini per il web
Come usare e ottimizzare le immagini per il webSiteGround.com
 
4 dw parte2-modifiche
4 dw parte2-modifiche4 dw parte2-modifiche
4 dw parte2-modificheLab Nova
 
CSS corso base (classi seconde, mod 1)
CSS corso base (classi seconde, mod 1)CSS corso base (classi seconde, mod 1)
CSS corso base (classi seconde, mod 1)Matteo Ziviani
 
Come fare a impostazioni iniziali symwriter2
Come fare a   impostazioni iniziali symwriter2Come fare a   impostazioni iniziali symwriter2
Come fare a impostazioni iniziali symwriter2Centro studi inbook
 
Guida pratica-html-e-css
Guida pratica-html-e-cssGuida pratica-html-e-css
Guida pratica-html-e-cssnickyes
 
Guida pratica-html-e-css
Guida pratica-html-e-cssGuida pratica-html-e-css
Guida pratica-html-e-cssnickyes
 
Guida all'utilizzo di PowerPoint
Guida all'utilizzo di PowerPointGuida all'utilizzo di PowerPoint
Guida all'utilizzo di PowerPointDaniele Cogo
 
Gmail sponsored promotions guida (italiano)
Gmail sponsored promotions   guida (italiano)Gmail sponsored promotions   guida (italiano)
Gmail sponsored promotions guida (italiano)Domenico Sacchi
 
Realizzare manuali di istruzioni in HTML5, e-manual e digital documentation d...
Realizzare manuali di istruzioni in HTML5, e-manual e digital documentation d...Realizzare manuali di istruzioni in HTML5, e-manual e digital documentation d...
Realizzare manuali di istruzioni in HTML5, e-manual e digital documentation d...KEA s.r.l.
 
Corso immagini
Corso immaginiCorso immagini
Corso immaginidax
 
Verifica finale
Verifica finaleVerifica finale
Verifica finalegianter62
 
WordPress 4.6 Corso Bacic
WordPress 4.6 Corso BacicWordPress 4.6 Corso Bacic
WordPress 4.6 Corso BacicRenato Gelforte
 
Html e Css - 3 | WebMaster & WebDesigner
Html e Css - 3 | WebMaster & WebDesignerHtml e Css - 3 | WebMaster & WebDesigner
Html e Css - 3 | WebMaster & WebDesignerMatteo Magni
 
Come realizzare da Argo CMS manuali e documentazione tecnica in HTML da pubbl...
Come realizzare da Argo CMS manuali e documentazione tecnica in HTML da pubbl...Come realizzare da Argo CMS manuali e documentazione tecnica in HTML da pubbl...
Come realizzare da Argo CMS manuali e documentazione tecnica in HTML da pubbl...KEA s.r.l.
 
Verifica finale
Verifica finaleVerifica finale
Verifica finalegianter62
 
DNM19 Sessione2 Orchard Temi e Layout (Ita)
DNM19 Sessione2 Orchard Temi e Layout (Ita)DNM19 Sessione2 Orchard Temi e Layout (Ita)
DNM19 Sessione2 Orchard Temi e Layout (Ita)Alessandro Giorgetti
 
Best practices per lo sviluppo Frontend
Best practices per lo sviluppo FrontendBest practices per lo sviluppo Frontend
Best practices per lo sviluppo FrontendCristiano Rastelli
 
The CSS Survival Manual - Giovanni Buffa (2014)
The CSS Survival Manual - Giovanni Buffa (2014)The CSS Survival Manual - Giovanni Buffa (2014)
The CSS Survival Manual - Giovanni Buffa (2014)Giovanni Buffa
 

Similar to Modificare un template (20)

Lezione 7
Lezione 7Lezione 7
Lezione 7
 
Html
HtmlHtml
Html
 
Come usare e ottimizzare le immagini per il web
Come usare e ottimizzare le immagini per il webCome usare e ottimizzare le immagini per il web
Come usare e ottimizzare le immagini per il web
 
4 dw parte2-modifiche
4 dw parte2-modifiche4 dw parte2-modifiche
4 dw parte2-modifiche
 
CSS corso base (classi seconde, mod 1)
CSS corso base (classi seconde, mod 1)CSS corso base (classi seconde, mod 1)
CSS corso base (classi seconde, mod 1)
 
Come fare a impostazioni iniziali symwriter2
Come fare a   impostazioni iniziali symwriter2Come fare a   impostazioni iniziali symwriter2
Come fare a impostazioni iniziali symwriter2
 
Guida pratica-html-e-css
Guida pratica-html-e-cssGuida pratica-html-e-css
Guida pratica-html-e-css
 
Guida pratica-html-e-css
Guida pratica-html-e-cssGuida pratica-html-e-css
Guida pratica-html-e-css
 
Guida all'utilizzo di PowerPoint
Guida all'utilizzo di PowerPointGuida all'utilizzo di PowerPoint
Guida all'utilizzo di PowerPoint
 
Gmail sponsored promotions guida (italiano)
Gmail sponsored promotions   guida (italiano)Gmail sponsored promotions   guida (italiano)
Gmail sponsored promotions guida (italiano)
 
Realizzare manuali di istruzioni in HTML5, e-manual e digital documentation d...
Realizzare manuali di istruzioni in HTML5, e-manual e digital documentation d...Realizzare manuali di istruzioni in HTML5, e-manual e digital documentation d...
Realizzare manuali di istruzioni in HTML5, e-manual e digital documentation d...
 
Corso immagini
Corso immaginiCorso immagini
Corso immagini
 
Verifica finale
Verifica finaleVerifica finale
Verifica finale
 
WordPress 4.6 Corso Bacic
WordPress 4.6 Corso BacicWordPress 4.6 Corso Bacic
WordPress 4.6 Corso Bacic
 
Html e Css - 3 | WebMaster & WebDesigner
Html e Css - 3 | WebMaster & WebDesignerHtml e Css - 3 | WebMaster & WebDesigner
Html e Css - 3 | WebMaster & WebDesigner
 
Come realizzare da Argo CMS manuali e documentazione tecnica in HTML da pubbl...
Come realizzare da Argo CMS manuali e documentazione tecnica in HTML da pubbl...Come realizzare da Argo CMS manuali e documentazione tecnica in HTML da pubbl...
Come realizzare da Argo CMS manuali e documentazione tecnica in HTML da pubbl...
 
Verifica finale
Verifica finaleVerifica finale
Verifica finale
 
DNM19 Sessione2 Orchard Temi e Layout (Ita)
DNM19 Sessione2 Orchard Temi e Layout (Ita)DNM19 Sessione2 Orchard Temi e Layout (Ita)
DNM19 Sessione2 Orchard Temi e Layout (Ita)
 
Best practices per lo sviluppo Frontend
Best practices per lo sviluppo FrontendBest practices per lo sviluppo Frontend
Best practices per lo sviluppo Frontend
 
The CSS Survival Manual - Giovanni Buffa (2014)
The CSS Survival Manual - Giovanni Buffa (2014)The CSS Survival Manual - Giovanni Buffa (2014)
The CSS Survival Manual - Giovanni Buffa (2014)
 

More from Scuola Media Galileo Galilei Mira

More from Scuola Media Galileo Galilei Mira (20)

collaborareaConUnaPresentazioneAdistanza.pptx
collaborareaConUnaPresentazioneAdistanza.pptxcollaborareaConUnaPresentazioneAdistanza.pptx
collaborareaConUnaPresentazioneAdistanza.pptx
 
Il verbo.pptx
Il verbo.pptxIl verbo.pptx
Il verbo.pptx
 
Creare un avideoclip con FilmForth
Creare un avideoclip con FilmForthCreare un avideoclip con FilmForth
Creare un avideoclip con FilmForth
 
Il lavoro di Gruppo
Il lavoro di GruppoIl lavoro di Gruppo
Il lavoro di Gruppo
 
I Movimenti del pianeta Terra
I Movimenti del pianeta TerraI Movimenti del pianeta Terra
I Movimenti del pianeta Terra
 
La torre Eiffel
La torre EiffelLa torre Eiffel
La torre Eiffel
 
La miniera del sale di Salisburgo
La miniera del sale di SalisburgoLa miniera del sale di Salisburgo
La miniera del sale di Salisburgo
 
La Lapponia
La LapponiaLa Lapponia
La Lapponia
 
Alcuni monumenti della Grecia
Alcuni monumenti della GreciaAlcuni monumenti della Grecia
Alcuni monumenti della Grecia
 
Amsterdam
AmsterdamAmsterdam
Amsterdam
 
Il Muro di Berlino
Il Muro di BerlinoIl Muro di Berlino
Il Muro di Berlino
 
Rivoluzionefrancese
RivoluzionefranceseRivoluzionefrancese
Rivoluzionefrancese
 
Germania
GermaniaGermania
Germania
 
Avverbio
AvverbioAvverbio
Avverbio
 
Monti valli pianure
Monti valli pianureMonti valli pianure
Monti valli pianure
 
Monti Valli pianure mari e coste
Monti  Valli pianure mari e costeMonti  Valli pianure mari e coste
Monti Valli pianure mari e coste
 
Francia
FranciaFrancia
Francia
 
L' Avverbio
L' AvverbioL' Avverbio
L' Avverbio
 
Il 600 e l'assolutismo
Il 600 e l'assolutismoIl 600 e l'assolutismo
Il 600 e l'assolutismo
 
Federazione Russa
Federazione  RussaFederazione  Russa
Federazione Russa
 

Recently uploaded

Lorenzo D'Emidio- Lavoro sulla Bioarchittetura.pptx
Lorenzo D'Emidio- Lavoro sulla Bioarchittetura.pptxLorenzo D'Emidio- Lavoro sulla Bioarchittetura.pptx
Lorenzo D'Emidio- Lavoro sulla Bioarchittetura.pptxlorenzodemidio01
 
Lorenzo D'Emidio_Vita e opere di Aristotele.pptx
Lorenzo D'Emidio_Vita e opere di Aristotele.pptxLorenzo D'Emidio_Vita e opere di Aristotele.pptx
Lorenzo D'Emidio_Vita e opere di Aristotele.pptxlorenzodemidio01
 
Quadrilateri e isometrie studente di liceo
Quadrilateri e isometrie studente di liceoQuadrilateri e isometrie studente di liceo
Quadrilateri e isometrie studente di liceoyanmeng831
 
Presentazioni Efficaci e lezioni di Educazione Civica
Presentazioni Efficaci e lezioni di Educazione CivicaPresentazioni Efficaci e lezioni di Educazione Civica
Presentazioni Efficaci e lezioni di Educazione CivicaSalvatore Cianciabella
 
Lorenzo D'Emidio_Francesco Petrarca.pptx
Lorenzo D'Emidio_Francesco Petrarca.pptxLorenzo D'Emidio_Francesco Petrarca.pptx
Lorenzo D'Emidio_Francesco Petrarca.pptxlorenzodemidio01
 
Lorenzo D'Emidio_Vita di Cristoforo Colombo.pptx
Lorenzo D'Emidio_Vita di Cristoforo Colombo.pptxLorenzo D'Emidio_Vita di Cristoforo Colombo.pptx
Lorenzo D'Emidio_Vita di Cristoforo Colombo.pptxlorenzodemidio01
 
Confronto tra Sparta e Atene classiche.ppt
Confronto tra Sparta e Atene classiche.pptConfronto tra Sparta e Atene classiche.ppt
Confronto tra Sparta e Atene classiche.pptcarlottagalassi
 

Recently uploaded (7)

Lorenzo D'Emidio- Lavoro sulla Bioarchittetura.pptx
Lorenzo D'Emidio- Lavoro sulla Bioarchittetura.pptxLorenzo D'Emidio- Lavoro sulla Bioarchittetura.pptx
Lorenzo D'Emidio- Lavoro sulla Bioarchittetura.pptx
 
Lorenzo D'Emidio_Vita e opere di Aristotele.pptx
Lorenzo D'Emidio_Vita e opere di Aristotele.pptxLorenzo D'Emidio_Vita e opere di Aristotele.pptx
Lorenzo D'Emidio_Vita e opere di Aristotele.pptx
 
Quadrilateri e isometrie studente di liceo
Quadrilateri e isometrie studente di liceoQuadrilateri e isometrie studente di liceo
Quadrilateri e isometrie studente di liceo
 
Presentazioni Efficaci e lezioni di Educazione Civica
Presentazioni Efficaci e lezioni di Educazione CivicaPresentazioni Efficaci e lezioni di Educazione Civica
Presentazioni Efficaci e lezioni di Educazione Civica
 
Lorenzo D'Emidio_Francesco Petrarca.pptx
Lorenzo D'Emidio_Francesco Petrarca.pptxLorenzo D'Emidio_Francesco Petrarca.pptx
Lorenzo D'Emidio_Francesco Petrarca.pptx
 
Lorenzo D'Emidio_Vita di Cristoforo Colombo.pptx
Lorenzo D'Emidio_Vita di Cristoforo Colombo.pptxLorenzo D'Emidio_Vita di Cristoforo Colombo.pptx
Lorenzo D'Emidio_Vita di Cristoforo Colombo.pptx
 
Confronto tra Sparta e Atene classiche.ppt
Confronto tra Sparta e Atene classiche.pptConfronto tra Sparta e Atene classiche.ppt
Confronto tra Sparta e Atene classiche.ppt
 

Modificare un template

  • 1. Personalizzare un templatePersonalizzare un template Con i propri contenuti
  • 2. Il templateIl template Un template contiene: 1. Il file index.html e/o altre pagine web 2. Una cartellina con le immagini “images” 3. Una cartellina con i fogli di stile “CSS” 4. Una cartellina con i programmi javascript “js”
  • 3. Nascondere le parti inutiliNascondere le parti inutili Non tutto il template ci sarà utile. Alcune parti possono non piacerci o non servirci. In questo caso non le cancelleremo per paura di compromettere la pagina. Ci limiteremo a nascondere il codice tra due tags commento. <!-- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas pellentesque justo ac velit facilisis convallis vel id nisi. Morbi hendrerit ac tellus eu luctus. Vestibulum ullamcorper elit eu eleifend posuere. Proin imperdiet nisl eu est vulputate, vel tincidunt lacus pretium.</p> --> Tag di apertura Tag di chiusura
  • 4. Posso modificare i testi del file html sostituendo quelli preesistenti con quelli miei. (L’operazione può essere fatta con un semplice editor di testo come il blocco note di windows o un altro editor html) Importante! Fate attenzione a non cancellare i tags! Esempio: <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas pellentesque justo ac velit facilisis convallis vel id nisi. Morbi hendrerit ac tellus eu luctus. Vestibulum ullamcorper elit eu eleifend posuere. Proin imperdiet nisl eu est vulputate, vel tincidunt lacus pretium.</p> <p>Il nostro hotel si trova a pochi passi dal centro storico circondato dai monumenti più famosi della città.</p> Modificare i testiModificare i testi Testo preesistente Testo modificato tag tag tag tag
  • 5. Sostituire le immagini Nella cartellina “images” sono contenute le immagini del template. Suggeriamo di sostituirle con le proprie osservando scrupolosamente queste condizioni: 1. Non cambiare il nome e l’estensione dell’immagine (di norma jpg) 2. Inserire la nuova immagine rispettando il formato (larghezza X altezza) e la risoluzione.
  • 6. Salvare le immagini Le immagini scattate con la vostra macchina fotografica e/o telefonino dovranno essere salvate nel formato jpg. Inoltre dovranno essere aperte con un programma che vi permetta di modificare la risoluzione e il formato come quelli delle immagini del template che sostituite Formato: = dimensioni larghezza X altezza Risoluzione = numero di pixel per pollice
  • 7. Risoluzione e formatoRisoluzione e formato Finestre di Photoshop usate per modificare il formato e la risoluzione
  • 8. • Se non avete esperienza nel modificare i fogli di stile vi consigliamo di limitare le modifiche ai colori e agli sfondi. • Cambiare posizioni e dimensioni degli elementi potrebbe compromettere la grafica del template Modificare il foglio di stileModificare il foglio di stile modifica modifica pericoloso
  • 9. I programmi javascriptI programmi javascript Sono contenuti nella cartellina “images” e il loro codice non va toccato. Uno script javascript è un piccolo programma con una o più funzioni che vengono richiamate dal file html attraverso una dichiarazione contenuta nei metatag e una chiamata a funzione contenuta nel codice del body
  • 10. Le chiamate javascript Esecuzione della funzione apri all’interno del <body> Funzione javascript scritta nell’head del file html Chiamata della funzione apri contenuta nella cartellina “js” nei metatag