Prima di cominciare
Strumenti
Per creare un template da zero sono fondamentali e indispensabili alcuni elementi/programmi:
1) uno spazio web in cui caricare le immagini, personalmente consiglio Photobucket;
2) un programma di editor grafica, (io uso Photoshop e nel tutorial faccio riferimento ai suoi comandi);
3) le immagini che vogliamo utilizzare per la grafica, ricordando dove le abbiamo prese;
4) un programma di editor html - non è indispensabile, ma diciamo che
aiuta perchè solitamente evidenza le parole chiave del linguaggio html
con colori differenti. Se non lo avete va benissimo il blocco note.
La grafica
Premessa
Prima di cominciare
teniamo ben presente una cosa: il computer è nostro amico, ma fino ad
un certo punto.. succede sempre mentre stiamo facendo un qualche lavoro
che:
- si impalla, e ci tocca riavviare;
- salta la corrente perchè qualcuno ha deciso di far partir la lavatrice proprio mentre andava anche la lavastoviglie;
- siamo distratti e pigiamo sulla X lassù a destra invece che sul trattino..
morale della favola in nostro sudato lavoro va a ramengo e noi [io specialmente] lividi di rabbia
piantiamo lì tutto.
Salvare spesso, quando state facendo un lavoro di grafica, è un MUST!!!
Cominciamo
Apriamo l'editor grafico e creiamo un nuovo
file di larghezza massima 778pixel. Perchè questa misura? Un buon
template deve essere correttamente visualizzabile sia dagli utenti che
adottano una risoluzione 1024x768 sia per coloro che usano quella
800x600. Una grafica con un'immagine troppo grande crea per gli utenti
800x600 la fastidiosissima barra di scorrimento orizzontale.
Io ho scelto questa immagine che era 800x600 e l'ho adattata a 778x584.
A questo punto dobbiamo considerare due cose:
1) abbiamo bisogno della parte dove scrivere i post;
2) una o due parti in cui scrivere le altre cose, tipo chi siamo, cosa ci piace, i link ai blog amici e via dicendo.
Valutiamo la nostra immagine e scegliamo dove potrebbero essere messi
senza alterare troppa la fisionomia dell'immagine. Per questa che ho
scelto pensavo di mettere la colonna delle info sulla sinistra, tra il
bordo e i capelli della fata, mentre quella dei post sotto alla fata
stessa.
Seleziono
Immagine->Dimensione quadro e modifico l'altezza dell'immagine
facendola diventare 600 in modo da avere una barra non colorata sul
fondo. Questo spazio ci servirà in seguito.
Ora creo un nuovo livello su cui andrò a lavorare. E' importante non
lavorare direttamente sull'immagine in modo da poter tornare indietro
se quello che abbiamo aggiunto non ci piace oppure per spostare le cose
in un punto diverso dello spazio.
Con lo strumento contagocce scegliamo un colore chiaro che sia presente
nell'immagine e usando lo strumento rettangolo arrotondato creiamo sul
nuovo livello un rettangolo come questo.
Il rettangolo copre anche la parte senza colore, ma come si può notare non ha gli angoli in basso.
Adesso modifichiamo le caratteristiche del livello in questo modo
ottenendo questo risultato
Il rettangolo si vede ancora, ma è diventato molto chiaro e non nasconde l'immagine sottostante.
Clicchiamo sul livello 1, quello con l'immagine, e con lo strumento selezione prendiamo una porzione
di immagine larga quanto il rettangolo giallo ma più bassa, perchè vogliamo fargli riempire la banda bianca sotto.
Facciamo copia e incolla e la spostiamo a coprire il bianco.
Per riempire gli spazi bianchi rimasti utilizzate i colori più adatti
oppure, come ho fatto io, copiate una striscia lunga quanto l'immagine
dal fondo, ed incollatela in un nuovo livello. Poi spostate questo
livello sotto a quello che contiene il pezzettino di prima.
Creiamo un nuovo livello, sopra a tutti gli altri, e armati di matita
creiamo una specie di "greca". Usiamo la fantasia e i colori che
riteniamo più adatti. Io ho deciso di usare i colori dei capelli della
fata e ne ho fatta una molto semplice
Ho poi riempito la parte in cui voglio scrivere, quella sotto le gambe della fata, tutta dello stesso colore.
Non ci resta che inserire il titolo o una scritta, sempre se vogliamo,
oppure i classici "Post" e "About me" in testa alle rispettive colonne.
Per questo template ho deciso di non inserire nessuna parola.
La parte grafice è quesi finita. Salviamo tutto con formato .jpg e poi selezioniamo un'intera striscia di immagine,
facendo attenzione a non prendere la parte alta della nostra cornice, ma solo i lati verticali.
Selezioniamo Modifica->Copia elementi uniti ed incolliamo questa
striscia in un nuovo file che chiameremo riga e salveremo in formato
gif. Questa ci servirà per far si che il nostro blog abbia lo stesso
sfondo anche per i post molto lunghi.
La parte prettamente grafica è terminata.. ora passiamo alla creazione del codice per Splinder.
Il codice
Lo scheletro
Per prima cosa una pagina html è composta da alcuni tag che non possono
essere eliminati, altrimenti non funziona nulla del codice che
inseriremo dopo.
Una pagina vuota si presenta in questo modo
<html>
<head>
<title>Documento senza titolo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
</body>
</html> |
Il tag <html></html> è un tag indispensabile che deve racchiudere
TUTTO il codice che intendiamo scrivere;
il tag <title></title>
racchiude il titolo della pagina, è quello che vedete apparire in alto
sulla barra della finesta accando al simbolo del vostro browser;
il tag <head>/</head>
racchiude il codice che si riferisce agli elementi di stile e alle "caratterizzazioni" della pagina;
il tag <body></body> racchiude il corpo vero e proprio della pagina.
Come poteta notare il tag <title> sta all'interno di quello
<head> perchè è una caratterizzazione della pagina stessa.
Lo sfondo
L'immagine che abbiamo creato prima con tanta fatica è la prima
cosa da inserire. Ci portiamo nella parte di codice in cui c'è scritto <body> e nella riga sotto scriviamo questo
<div id="immagine" style="position: absolute; top: 0px; left:0px;"><img src="sfondo.jpg" border="0"></div>
<html>
<head>
<title>Documento senza titolo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<div id="immagine" style="position: absolute; top: 0px; left:0px;"><img src="sfondo.jpg" border="0"></div>
</body>
</html> |
In questo modo abbiamo creato un livello che si chiama immagine (id=immagine) che sta nella pagina a partire dal primissimo
pixel in alto a sinistra (top:0; left:0;) e che contiene il nostro sfondo (img src="sfondo.jpg").
Questa parte di codice sarà cambiata nel momento in cui caricheremo l'immagine nel server, per ora la teniamo
così in modo da poter vedere l'anteprima. Salviamo il file con estensione .htm o .html
Se ora apriamo il file salvato vediamo che l'immagine è
posizionata nell'angolo in alto a sinistra e che parti della pagina
risultano bianche. Dobbiamo "colorarle" col colore più adatto alla
grafica. Io ho scelto uno dei tanti verdi dello sfondo.
Nella parte di codice appena sopra alla parola </head> scriviamo
<style>
body {
background-color: 7ECF79;
background-image: url('riga.gif');
background-repeat: repeat-y;
}
</style>
<html>
<head>
<title>Documento senza titolo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body {
background-color: 7ECF79;
background-image: url('riga.gif');
background-repeat: repeat-y;
}
</style>
</head>
<body>
<div id="immagine" style="position: absolute; top: 0px; left:0px;"><img src="sfondo.jpg" border="0"></div>
</body>
</html> |
La prima riga indica il colore dello sfondo, la seconda indica
l'immagine per lo sfondo e la terza fa in modo che lo sfondo si ripeta
solo in verticale.
Ricordatevi di salvare spesso per evitare di perdere il lavoro.
A questo punto dovreste avere nella pagina l'immagine di sfondo, il
colore scelto che riempie le parti che prima erano bianche nella pagina
(sulla destra) ed la riga, ripetuta in verticale, al di sotto della
vostra immagine.
Attenzione:
un problema che capita molto di frequente è quello di non riuscire a vedere la riga.
1. la parola url non va cancellata. Non è lì nel codice perchè vi indica "qui ci va l'url dell'immagine", è lì perchè serve!
2. gli apici, anche quelli non sono lì per bellezza ma sono indispensabili!
3. l'immagine è stata salvata in una cartella differente da quella in
cui avete salvato il file html e quindi la riga non si vede.. basta
spostarla nella cartella giusta et voilà.
Le colonne
A questo punto dobbiamo inserire gli spazi in cui andranno le parole.
E' importante dare dei nomi significativi ai livelli in modo da capire
subito in che parte del codice siamo se dobbiamo modificare qualcosa
che non ci piace.
Posizioniamoci sempre all'interno del tag <body> e scriviamo
<div id="colonna-sinistra" style="position: absolute; top: 94px; left: 42px; width: 245px; height: 506px;">
<p>bla bla bla bla </p>
</div>
<html>
<head>
<title>Documento senza titolo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body {
background-color: 7ECF79;
background-image: url('riga.gif');
background-repeat: repeat-y;
}
</style>
</head>
<body>
<div id="immagine" style="position: absolute; top: 0px; left:0px;"><img src="sfondo.jpg" border="0"></div>
<div id="colonna-sinistra" style="position: absolute; top: 94px; left: 42px; width: 245px; height: 506px;">
<p>bla bla bla bla </p>
</div>
</body>
</html> |
Abbiamo appena creato un nuovo livello partendo dalla colonna sinistra:
id indica il nome del livello, top: 94px indica a quanti pixel
dall'alto sta e left: 42px a quanti pixel di distanza da sinistra,
width:245 è la larghezza del livello e infine height l'altezza.
Quest'ultimo è opzionale e io non lo metto quasi mai, adesso c'è giusto
per completezza d'informazione. Il tag
<p></p> racchiude il testo. Nel vostro template appariranno quindi le parole bla bla bla bla.
Ripetiamo il procedimento ma questa volta inseriamo la colonna che
servirà a contenere i post del nostro blog. Va inserita sempre
all'interno del <body> e dovrà avere un nome e una posizione
differenti.
<html>
<head>
<title>Documento senza titolo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body {
background-color: 7ECF79;
background-image: url('riga.gif');
background-repeat: repeat-y;
}
</style>
</head>
<body>
<div id="immagine" style="position: absolute; top: 0px; left:0px;"><img src="sfondo.jpg" border="0"></div>
<div id="colonna-sinistra" style="position: absolute; top: 94px; left: 42px; width: 245px; height: 506px;">
<p>bla bla bla bla </p>
</div> <div id="post" style="position:absolute; left:329px; top:593px; width:434px; height:81px; z-index:1">
<p>qui finiranno i post del blog</p>
</div>
</body>
</html> |
Se avete bisogno della terza colonna non vi resta che ripetere il procedimento appena fatto utilizzando un nome differente
per il campo id e posizionando la colonna nel posto in cui preferite.
Le parti del blog
Un blog di splinder è diviso in 2 parti ben definite, il blocco del post e la/le colonne.
Per essere chiari, se volete che quello che scrivete appaia nel vostro
blog il blocco del post è indispensabile, mentre la o le colonne sono
del tutto
superflue. Non mi è mai capitato di vederne, ma voi potreste creare un
blog che contenga solo il blocco del post.
I tag del post
Per prima cosa dobbiamo scrivere il tag che dice a splinder "questo è
il blocco del post". Lo facciamo inserendo nella colonna del post il
tag <Blogger></Blogger>.
<html>
<head>
<title>Documento senza titolo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body {
background-color: 7ECF79;
background-image: url('riga.gif');
background-repeat: repeat-y;
}
</style>
</head>
<body>
<div id="immagine" style="position: absolute; top: 0px; left:0px;"><img src="sfondo.jpg" border="0"></div>
<div id="colonna-sinistra" style="position: absolute; top: 94px; left: 42px; width: 245px; height: 506px;">
<p>bla bla bla bla </p>
</div> <div id="post" style="position:absolute; left:329px; top:593px; width:434px; height:81px; z-index:1">
<Blogger><!-- nn cancellare questa riga -->
</Blogger><!-- nn cancellare questa riga -->
</div>
</body>
</html> |
Ho levato la scritta "qui finiranno i post del blog" altrimenti ce la ritroviamo ripetuta per ogni post,
ma ho aggiunto il commento di non levare la riga. I commenti si scrivono racchiusi tra
<!--
e
-->
Di
seguito trovate una serie di tag che possono essere utilizzati all'interno del blocco del post
con le relative spiegazioni
<BlogDateHeader></BlogDateHeader> -> apertura del blocco che racchiude i post dello stesso giorno.
Se utilizzate questo tag tutti i post scritti lo stesso giorno verranno catalogati insieme, mi spiego meglio:
avrete la data in alto una sola volta e sotto tutti i post
scritti quel giorno. Qui trovate un esempio dell'effetto.
<BlogDateFooter></BlogDateFooter>
-> chiusura del blocco che racchiude i post dello stesso giorno. E'
il gemello del tad di sopra e vanno inseriti entrambi se vogliamo che
funzionino.
Come usarli: per esempio potreste volere che tutti i post dello stesso
giorno vengano incorniciati, in questo caso vi servirà una tabella di
cui sfrutterete
i bordi come cornice.
Scriviamo
<BlogDateHeader>
<table border="1" bordercolor="#000000"><tr><td>
</BlogDateHeader>
..... tag del post .....
<BlogDateFooter>
</td></tr></table>
</BlogDateFooter>
In questo modo ho creato una tabella di una colonna e una riga al cui
interno finiranno i miei post. Lo spessore del bordo è 1 ed è di colore
nero.
<$BlogDateHeaderDate$> -> inserisce la data del post;
<$BlogItemTitle$> -> inserirsce il titolo del post, controllate di aver abilitato i titoli nelle impostazioni di splinder;
<$BlogItemBody$> -> testo del post, questo comando non può essere omesso se volete che si vedano i vostri post;
<$BlogItemDateTime$> -> inserisce l'ora di pubblicazione del post, il formato dell'ora può essere modificato nelle impostazioni di splinder;
<$BlogItemNumber$> -> inserisce il numero identificativo del post;
<$BlogItemAuthor$> -> inserisce il nome dell'autore del post - molto utile in caso di blog con più autori;
<$BlogItemAuthorEmail$> -> inserisce l'email dell'autore del post;
<$BlogItemAuthorURL$> -> inserisce l'homepage dell'autore del post;
<$BlogItemPermalink$> -> inserisce il permalink del post,
cioè l'url che apre direttamente il post ;
<$BlogItemComments$>
-> inseriesce il link ai commenti del post (aperti in finestra
popup). La finestra dei commenti mostra i commenti ordinati per data
decrescente, cioè dal più recente al più vecchio; consente di
cancellare i commenti e visualizzare l'IP dei commenti anonimi (solo
per il proprietario del blog); inoltre viene mostrata una casella di
testo per scrivere un nuovo commento (solo se l'utente è autorizzato a
commentare sul blog). ;
<$BlogItemCommentLink$> -> inserisce il link ai commenti del post (aperti nella stessa pagina).
Richiede la presenza del tag <$BlogItemCommentList$>, altrimenti i commenti non vengono visualizzati ;
<$BlogItemCommentList$> -> inserisce la lista dei commenti sotto il post.
La lista dei commenti consente anche di cancellare i commenti dall'editor e visualizzare l'IP dei commenti anonimi
(solo per il proprietario del blog); inoltre viene mostrata una casella di testo per scrivere un nuovo commento (solo se
l'utente è autorizzato a commentare sul blog). ;
<$BlogItemCategories$> -> inserisce le categorie
associate al post, facendo clic su una categoria vengono mostrati tutti
i post associati a quella categoria.
Ecco come potrebbe essere il nostro codice dopo aver inserito i tag necessari
<html>
<head>
<title>Documento senza titolo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body {
background-color: 7ECF79;
background-image: url('riga.gif');
background-repeat: repeat-y;
}
</style>
</head>
<body>
<div id="immagine" style="position: absolute; top: 0px; left:0px;"><img
src="sfondo.jpg" border="0"></div>
<div id="colonna-sinistra" style="position: absolute; top:
94px; left: 42px; width: 245px; height: 506px;">
<p>bla bla bla bla </p>
</div>
<div id="post" style="position:absolute; left:329px; top:593px;
width:434px; height:81px; z-index:1">
<Blogger><!-- nn cancellare questa riga -->
<$BlogItemTitle$>
<$BlogItemBody$>
Scritto da <$BlogItemAuthorNickname$> alle <$BlogItemDateTime$>
per la categoria <$BlogItemCategories$><br>
Grazie per i <$BlogItemComments$>
</Blogger><!-- nn cancellare questa riga -->
<br><$BlogPager$>
</div>
</body>
</html> |
<br> è il tag che impone al testo di andare a capo.
Ok, direi che per il post abbiamo detto quasi tutto. Manca l'ultimo tocco
ovvero la
paginazione.
La paginazione è un particolare tag che fa si che alla fine della colonna
dei post appaiano i numeri delle pagine o meglio i link per far si che il
lettore possa andare a leggere i post passati. Ogni blog ha impostato un
numero fisso di post che vengono visualizzati nella stessa pagina, nel momento
in cui abbiate superato quel numero i vostri vecchi post finiscono nella
pagina dopo. Per poterli vedere è necessaria la paginazione.
E' decisamente un tag particolare perchè possiamo considerarlo parte dei tag
del blog, ma va fuori dal tag <Blogger></Blogger>. Solitamente
si mette subito dopo e il tag è
<$BlogPager$>.
I tag delle colonne
All'interno delle colonne possiamo inserire quello che più ci pare,
parti di testo, immagini, adesivi, link e tag. Splinder mette a disposizione
i tag di uso comune personalizzabili dal pannello di controllo di splinder,
per esempio ci sono tag per inserire un contatore visite, per inserire una
lista di link a siti esterni, per i commenti recenti o per l'archivio di
tutti i post da voi scritti.
Ecco qui una spiegazione molto semplice di alcuni dei tag disponibili:
<$BlogAboutMe$> mostra le informazioni inserite
nel vostro profilo. Se hai scelto di non mostrare il profilo dalle opzioni
il tag non produce alcuna informazione.
<$BlogCounter$> mostra quante persone hanno visitato
il tuo blog.
<$BlogItemCategories$> mostra tutti le categorie in
cui sono divisi i post del tuo blog, cliccando sulla categoria appariranno
tutti i post ad essa associata.
<$BlogArchive$> mosta la cronoligia di tutti i post.
Solitamente appare il giorno attuale e poi le indicazioni dei mesi passati.
<$BlogLinkOut$> mostra l'elenco dei link ad altri siti
o blog, inseriti nella pagina Pannello di controllo » Strumenti » Link.
<$BlogRecentComments$> mostra i link degli ultimi commenti
scritti sul blog, con autore e post a cui il commenti si riferisce.
<$BlogButtons$> mostra una serie di bottoni che favoriscono
il contatto tra gli utenti e la diffusione dei blog nella community Splinder.
I bottoni mostrati sono:
* Contattami (apertura del popup di contatto)
* Il mio profilo (apertura del popup del profilo utente)
* Linkami (apertura del Pannello di controllo per inserire rapidamente un
link al blog)
* Iscriviti (apertura del Pannello di controllo per inserire rapidamente
il blog nei preferiti)
Ecco come potrebbe diventar il vostro blog dopo aver aggiunto i tag della colonna.
<html>
<head>
<title>Documento senza titolo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body {
background-color: 7ECF79;
background-image: url('riga.gif');
background-repeat: repeat-y;
}
</style>
</head>
<body>
<div id="immagine" style="position: absolute; top: 0px; left:0px;"><img
src="sfondo.jpg" border="0"></div>
<div id="colonna-sinistra" style="position: absolute; top:
94px; left: 42px; width: 245px; height: 506px;">
<p>
<h1>Qualcosa di me</h1>
<$BlogAboutMe$>
<h1>Blog che leggo</h1>
<$BlogLinkOut$>
<h1>Catalogando i miei pensieri</h1>
<$BlogCategories$>
<h1>Archivio</h1>
<$BlogArchive$>
<h1>Passati di qui</h1>
<$BlogCounter$>
</p>
</div>
<div id="post" style="position:absolute; left:329px; top:593px;
width:434px; height:81px; z-index:1">
<Blogger><!-- nn cancellare questa riga -->
<$BlogItemTitle$>
<$BlogItemBody$>
Scritto da <$BlogItemAuthorNickname$> alle <$BlogItemDateTime$>
per la categoria <$BlogItemCategories$><br>
Grazie per i <$BlogItemComments$>
</Blogger><!-- nn cancellare questa riga -->
<br><$BlogPager$>
</div>
</body>
</html> |
Avrete notato che ho scritto alcune parole comprese tra <h1>e</h1>,
vi spiegherò il perchè nel prossimo "capitolo",
per ora vi basti sapere che è importante che i titoli delle varie
sezioni che volete nella vostra colonna siano scritti all'interno di questo
tag. Se per esempio volessimo aggiungere la sezione "amo" e quella
"odio" ognuna col rispettivo titolo dovremmo aggiungere nel codice:
<h1>Amo</h1>
Qui scrivo quello che amo.<br>
<h1>Odio</h1>
Qui scrivo quello che odio.<br>
I colori del testo
Se avete salvato e provato ad aprire il file htm creato potrete notare
che il testo inserito nella pagina è decisamente sgraziato..Tutte le parole scritte all'interno del tag <h1>..</h1> sono
in grassetto e decisamente più grandi del resto del testo.
Questo accade perchè nel linguaggio html il tag <h1>
</h1> indica un titolo. Noi dobbiamo fare in modo che tutti
i titoli diventino del carattere, della dimensione e del colore di nostro
gradimento. Dopo faremo lo stesso per tutto il resto del testo e per i link.
I Titoli e il testo
Portiamoci nella parte alta del nostro codice, all'interno dei tag <head></head>
e più precisamente all'interno del tag <style>.
<html>
<head>
<title>Documento senza titolo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body {
background-color: 7ECF79;
background-image: url('riga.gif');
background-repeat: repeat-y;
}
h1 {
font-family: Verdana;
font-size: 11px;
color: #DC0814;
text-decoration: none;
}
</style>
</head>
<body>
<div id="immagine" style="position: absolute; top: 0px; left:0px;"><img
src="sfondo.jpg" border="0"></div>
<div id="colonna-sinistra" style="position: absolute; top: 94px;
left: 42px; width: 245px; height: 506px;">
<p>
<h1>Qualcosa di me</h1>
<$BlogAboutMe$>
<h1>Blog che leggo</h1>
<$BlogLinkOut$>
<h1>Catalogando i miei pensieri</h1>
<$BlogCategories$>
<h1>Archivio</h1>
<$BlogArchive$>
<h1>Passati di qui</h1>
<$BlogCounter$>
</p>
</div>
<div id="post" style="position:absolute; left:329px; top:593px;
width:434px; height:81px; z-index:1">
<Blogger><!-- nn cancellare questa riga -->
<$BlogItemTitle$>
<$BlogItemBody$>
Scritto da <$BlogItemAuthorNickname$> alle <$BlogItemDateTime$>
per la categoria <$BlogItemCategories$><br>
Grazie per i <$BlogItemComments$>
</Blogger><!-- nn cancellare questa riga -->
<br><$BlogPager$>
</div>
</body>
</html> |
Quello che ho scritto si può tradurre in questo modo:
h1 { - indica come si chiama il tag di cui vogliamo impostare
le caratteristiche. Queste andranno scritte all'interno delle parentesi
graffe (per chi non le ha disegnate sulla tastiera si ottengono premendo
alt+123 e alt+125) ;
font-family: Verdana; - indica il nome del font che vogliamo
usare. Se si usa un font particolare, che non è detto che tutti abbiano
installato sul proprio pc, solitamente si scrive anche un font secondario
mettendo font-family: nomeFont, nomefont; Nel mio caso
non è necessario perchè il verdana è un font presente su tutti i pc.
font-size: 11px; - indica la dimensione del font, più
il numero digitato è grande, più sarà grande il carattere.
color: #DC0814; - indica il colore del font. Possiamo esprimere
i colori o con il loro nome in inglese o con la loro codifica esadecimale.
Programmi come photoshop e paintshop pro vi indicano chiaramente il codice
del colore che state usando
text-decoration: none; - indica che il testo non avrà
alcuna decorazione. Al posto di none possiamo usare anche bold (grassetto),
underline (sottolineato) e overline (sopralineato).
Non dimentichiamoci la parentesi alla fine }
Attenzione: i ;
non sono opzionali, sono indispensabili affichè il codice abbia un
senso.
Se ora andiamo nuovamente ad aprire il nostro file vedremo che tutti le
parole racchiuse nel tag <h1></h1> hanno ubbidito alle nostre
istruzioni cambiando colore, carattere e dimensione.
Facciamo la stessa cosa per quello che riguarda il resto del testo scrivendo
p, body, td, tr, div {
font-family: Verdana;
font-size: 10px;
color: #000000;
}
In questo modo non solo quello compreso tra i tag <p></p> ma
anche quello che abbiamo scritto al di fuori di tag specifici assumerà
il colore nero (#000000), il carattere Verdana di dimensione 10.
C'è un altra cosa utile da sapere per quello che riguarda lo stile
del testo, il comando text-align. Lo possiamo usare per
definire l'allineamento del testo ed ha quattro possibilità: center, left,
right e justify. Se vogliamo definire l'allineamento del testo basta inserire
text-align: allineamentoScelto; all'interno della parentesi,
se non scrivete nulla il testo si allinea automaticamente a sinistra.
Lo stile dei link
Anche i link hanno bisogno di essere regolamentati, per farlo ci sono dei
modi precisi. Per prima cosa dobbiamo distingurere tra link mai visitati,
link visitati e link su cui passiamo il mouse.
In linea di massima i link funzionano esattamente come il testo, solo che
hanno dei nomi precisi: i link non visitati si indicanon con A:link,
quelli visitati con A:visited e il passoggio del mouse
con A:hover.
E' sempre bene specificare questi campi all'interno dei tag di stile altrimenti
il browser userà i colori che ha impostati di default che, diciamocelo,
sono orrendi:
<html>
<head>
<title>Documento senza titolo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body {
background-color: 7ECF79;
background-image: url('riga.gif');
background-repeat: repeat-y;
}
h1 {
font-family: Verdana;
font-size: 11px;
color: #DC0814;
text-decoration: none;
}
p, body, td, tr, div {
font-family: Verdana;
font-size: 10px;
color: #000000;
}
A:link{
text-decoration:none;
color: 000000;
}
A:visited {
text-decoration:none;
color: 000000;
}
A:hover {
text-decoration:none;
color: #FECC29;
}
</style>
</head>
<body>
<div id="immagine" style="position: absolute; top: 0px; left:0px;"><img
src="sfondo.jpg" border="0"></div>
<div id="colonna-sinistra" style="position: absolute; top: 94px;
left: 42px; width: 245px; height: 506px;">
<p>
<h1>Qualcosa di me</h1>
<$BlogAboutMe$>
<h1>Blog che leggo</h1>
<$BlogLinkOut$>
<h1>Catalogando i miei pensieri</h1>
<$BlogCategories$>
<h1>Archivio</h1>
<$BlogArchive$>
<h1>Passati di qui</h1>
<$BlogCounter$>
</p>
</div>
<div id="post" style="position:absolute; left:329px; top:593px;
width:434px; height:81px; z-index:1">
<Blogger><!-- nn cancellare questa riga -->
<$BlogItemTitle$>
<$BlogItemBody$>
Scritto da <$BlogItemAuthorNickname$> alle <$BlogItemDateTime$>
per la categoria <$BlogItemCategories$><br>
Grazie per i <$BlogItemComments$>
</Blogger><!-- nn cancellare questa riga -->
<br><$BlogPager$>
</div>
</body>
</html> |
I credits
Cosa sono? e perchè metterli?
Apro una grossa parentesi per parlare dei credits. Prima di tutto cosa
sono? Semplice, è l'ammissione da parte vostra che alcune delle componenti
del vostro blog, siano esse grafiche o testuali, non sono state create da
voi, e quindi riconoscete il merito di quella parte alla persona che l'ha
effettivamente creata.
E' importante dare il giusto merito a chi ha creato l'immagine che state
usando, che sia essa un'immagine di base e che voi avete rielaborato, o
che sia già l'immagine "definitiva" che avete deciso di
usare, perchè questa persona ha speso tempo e fatica nella sua creazione.
Se ha deciso di pubblicarla da qualche parte e condividerla con voi non
significa che voi abbiate il diritto di usarla a vostro piacimento e senza
ritegno. Vi piacerebbe se dopo aver passato almeno un paio d'ore a creare
la vostre grafica personale e personalizzata per il blog la ritrovaste a
soli 10 minuti dalla pubblicazione sul blog di qualcun altro? e magari con
scritte cose del tipo "fatta da me"?? penso proprio di no!
Posso usare qualsiasi immagine?
Direi proprio che la risposta è no! Quando spulciate il web alla ricerca
di un'immagine da utilizzare dovete fare attenzione a come l'autore ha disposto
possa venire usate. Direi che per il 99% di esse è vietato uno scopo
commerciale, quindi sognatevi di utilizzarle per fare il logo della vostra
ditta o cose simili.
In alcuni casi trovate nei siti in cui sono pubblicate le immagini le condizioni
sotto le quali utilizzare. Possono essere scritte in diversi modi.
© Pincopallino 2008 - In questo caso per esempio
non è chiaro come e se potete usare l'immagine. E' buona norma contattare
l'autore che vi dirà se e in che modo potete usarla.
Esempio pratico: Questa è l'immagine di una mia vecchia grafica
Quando l'ho vista ho detto "è lei, è perfetta" e
ho cominciato a immaginare come avrei potuto fare il blog. Mando una mail
all'autrice e le spiego che mi piace tantissimo, che vorrei poterla usare
come immagine principale per la grafica del mio blog, che intendo riconoscerle
ogni merito per lo scatto e che non intendo modificarla nei suoi colori.
Molto gentilmente Donia accetta e mi chiede di inserire nei credits che
ho avuto un suo permesso scritto per usare quella foto, e me ne manda una
copia senza il copyright stampato nel centro (click)
Licenze Creative Commons - le trovate tutte ben spiegate
in italiano qui
e in dichiarano chiaramente cosa potete e cosa non potete fare con una certa
opera. Questo tipo di licenze esistono anche per opere diverse da quelle
grafiche.
Licenze esplicite - sono quelle scritte chiaramente affianco
ad una o piu immagini.
E per questa guida?
In passato ho notato che molte persone che hanno utilizzato o utilizzano
questo tutorial per creare il loro primo template o che continuano ad usare
il mio codice html come guida misteriosamente si SCORDANO
di citarlo nei CREDITS.
Questa cosa non mi piace per nulla, non tanto perchè sono alla ricerca
di pubblicità, ma è giusto che venga riconosciuto il mio lavoro
e che questa guida possa essere utile anche ad altri e non solo a voi...
La cosa mi infastidisce ancor di più quando poi mi arrivano splinder-mail
o messaggi perchè qualcosa non va come dovrebbe nella creazione del
vostro template! Se volete delle risposte da me citatemi nei credits.
Quando linkate fatelo direttamente a questa pagina citandomi come Gloriapuffo
o Gloria.
Ecco un possibile codice da inserire:
Template Tutorial © <a href="http://www.arimi.altervista.org/templateTut/tutorial.htm">Gloriapuffo</a>
Dove metterli
E' buona norma inserire i credits in una delle vostre colonne secondarie
perchè se li inserite nel corpo centrale del post rischiate che questi
si ripetano ad ogni post - direi poco piacevole come cosa.
Starà poi a voi scegliere a che altezza metterli, se a destra o sinistra,
e in che ordine.
La messa online
Caricare le immagini
Abbiamo quasi finito. Dobbiamo caricare nel nostro spazio web tutte li
immagini che ci servono per il blog. Quando dico tutte non intendo solo quelle che servono per la grafica,
ma anche tutti i vari adesivi, banner e ammennicoli che vogliamo piazzare nel nostro blog.
Nel mio caso, per esempio, ho dovuto caricare anche tutte e 52 le immagini quadrate che ci sono nella colonnina delle
fanlist.
Questa è decisamente una fase pallosa, perchè dipende da fattori esterni a noi, come la velocità della connessione che
abbiamo ad internet e la possibilità dello spazio web che abbiamo scelto di farci caricare più immagini contemporaneamente.
Portete pazienza e ricordatevi di caricare tutto.
Cambiare i riferimenti
Una volta che abbiamo caricato tutto dobbiamo cambiare i riferimenti alle
immagini che abbiamo usato fino ad ora. Questo perchè così splinder potrà
andare a recuperare le immagini dove le abbiamo caricate. Se avete scelto
photobucket come spazio web capire quale sia il link della vostra immagine
è molto facile, vi si presentano 3 tipi di link sotto all'immagine
caricata, uno dei quali si chiama direct, è proprio quello che dovete
scegliere. Copiate il link e incollatelo nel codice.
<html>
<head>
<title>Documento senza titolo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body {
background-color: 7ECF79;
background-image: url('http://arimi.altervista.org/_altervista_ht/t34/riga.gif');
background-repeat: repeat-y;
}
h1 {
font-family: Verdana;
font-size: 11px;
color: #DC0814;
text-decoration: none;
}
p, body, td, tr, div {
font-family: Verdana;
font-size: 10px;
color: #000000;
}
A:link{
text-decoration:none;
color: 000000;
}
A:visited {
text-decoration:none;
color: 000000;
}
A:hover {
text-decoration:none;
color: #FECC29;
}
</style>
</head>
<body>
<div id="immagine" style="position: absolute; top: 0px; left:0px;">
<img src="http://arimi.altervista.org/_altervista_ht/t34/sfondo.jpg"
border="0">
</div>
<div id="colonna-sinistra" style="position: absolute; top: 94px;
left: 42px; width: 245px; height: 506px;">
<p>
<h1>Qualcosa di me</h1>
<$BlogAboutMe$>
<h1>Blog che leggo</h1>
<$BlogLinkOut$>
<h1>Catalogando i miei pensieri</h1>
<$BlogCategories$>
<h1>Archivio</h1>
<$BlogArchive$>
<h1>Passati di qui</h1>
<$BlogCounter$>
</p>
</div>
<div id="post" style="position:absolute; left:329px; top:593px;
width:434px; height:81px; z-index:1">
<Blogger><!-- nn cancellare questa riga -->
<$BlogItemTitle$>
<$BlogItemBody$>
Scritto da <$BlogItemAuthorNickname$> alle <$BlogItemDateTime$>
per la categoria <$BlogItemCategories$><br>
Grazie per i <$BlogItemComments$>
</Blogger><!-- nn cancellare questa riga -->
<br><$BlogPager$>
</div>
</body>
</html> |
Direi proprio che abbiamo fatto tutto quello che dovevamo fare per creare
un template per il nostro blog, non ci resta che caricarlo su splinder.
Cliccate sul nome del vostro blog e scegliete la targhetta Template.
A questo punto vedrete il codice del blog che avete al momento in uso. Vi
suggerisco di copiarlo tutto e di incollarlo e salvarlo in un file di testo,
perchè può tornare molto utile nel caso abbiate delle immagini o
adesivi che potreste voler copiare nel nuovo blog.
Una volta salvato il vecchio blog cancellate tutto il codice presente nel
riquadro "Template del blog" ed incollateci quello che avete appena
creato. Il codice va incollato tutto da <html> a </html>. Prima
di salvare le modifiche fate un click su Anteprima del template, giusto
per verificare che sia tutto come volete e poi salvate.
Adesso che abbiamo salvato il template su splinder abbiamo proprio finito.
Spero che questa guida vi sia stata utile, se ci sono problemi non fatevi
scrupoli e contattatemi via splinder o tramite l'apposito post sul mio blog.
Mi raccomando, datemi del tu.
Una precisazione per chi avesse bisogno di aiuto per il blog: quando mi
mandate il link del blog io posso vedere solo il codice già elaborato
da splinder. Se volete che veda proprio il codice scritto da voi dovete
includerlo nella mail come allegato in un file txt.
Attenzione: non incollate
il codice direttamente nella mail altrimenti splinder lo interpreta facendomi
vedere il risultato e non il codice.
Per la cronaca, qui
trovate il mio template completo usato per fare la guida
Ciao a tutti, Gloria
Domande frequenti e risposte
Nel tuo tutorial allinei tutta la grafica a sinistra,
come faccio a spostarmi un po' più al centro?
Per ognuno dei div all'interno del codice ci sono dei campi precisi che
indicano la posizione. Faccio l'esempio col div dell'immagine ma vale per
tutti.
<div id="immagine" style="position: absolute; top: 0px; left:0px;"><img
src="sfondo.jpg" border="0"></div>
top indica quanti pixel deve avere di distanza l'immagine dal bordo superiore
del browser, left quanti pixel deve avere di disanza dal bordo sinistro
del browser. Attualmente l'immagine è a 0 pixel dall'alto e 0 da
sinistra. Basta cambiare i numeri e di conseguenza si sposterà l'immagine.
Una volta trovata la posizione giusta dell'immagine basterà centrare
di conseguenza i div del testo.
La barra di splinder risulta nascosta dalla grafica,
come faccio a metterla a posto?
Come per la domanda precedente basta modificare il campo top del div dell'immagine.
Per essere precisi bisogna mettere top:33px; in questo
modo la barra di splinder risulterà sopra a tutta la grafica che
abbiamo creato.
Se ti dico come lo voglio, puoi creare tu il template
per il mio blog?
E' una domanda un po' spinosa. Io ho veramente poco tempo da dedicare alla
creazione completa di un template, e quando si tratta di una cosa non per
me è anche difficile capirci esattamente, specialmente per la parte grafica.
In linea di principio la risposta è no, anche se possono esserci delle eccezioni.
Nel web ci sono vari siti di grafica che consentono di prelevare gratuitamente
template per splinder, ti rimando al mio GT