Crea sito

Creare un template splinder

 

LEZIONE 1 - L'organizzazione del template
LEZIONE 2 - Parte grafica
LEZIONE 3 - Scrivere il codice HTML
LEZIONE 4 - I tag di splinder
LEZIONE 5 - Gli stili
LEZIONE 6 - Pubblicare il template - siti di hosting
LEZIONE 7 - Allineare il template, a sinistra, a destra, al centro
LEZIONE 8 - Abbellire il testo, gli stili guida completa
Template splinder personalizzabile

 

Prima di iniziare a sfogliare la guida vi avverto che in questa pagina è disattivata la possibilità di selezionare il codice, per evitare "copia e incolla" da persone che non capiscono il lavoro e l'impegno messo nel compilare la guida. Mi dispiace per il disagio. Ma qui potete scaricare il codice finale in formato .txt (è zippato, scompatatelo per usare il file).

Se vuoi puoi usare la stella per non perdere il segno mentre segui il tutorial. Usa il mouse per muovere la stella.

star

 

Un template si suddivide sostanzialmente di 4 parti:
1) L'header (costituisce l'immagine di testata appunto);
2) La parte in cui si scriveranno i post;
3) La parte relativa ai box laterali;
4) Lo sfondo (che può essere un colore o anche un'immagine)
queste 4 parti, come vedremo verranno trattate separatamente nel codice html, ma è necessario crearle insieme quando lo facciamo sul programma di grafica.

Innanzitutto è utile scegliere:
- un tema per il template;
- le palletes dei colori (cioè i colori che utilizzeremo), per ispirazione ecco questo sito utilissimo CLICK

Fatto ciò via al template.



Prima di "scervellarvi" nella realizzazione della vostra pagina html, è necessario aprire il vostro amatissimo programma di grafica


Scelto il vostro tema, quindi le vostre immagini, e i colori base (che vi serviranno anche per la formattazione del testo) possiamo iniziare.


Il mio consiglio iniziale è di non esagerare con la dimensione dell'immagine, perchè più è grande più sarà maggiore il tempo per visualizzarla . Quindi sbizzaritevi ma senza esagerare ^_^


Il tutorial vi aiuterà a creare un template come questo CLICK
1) Aprite una tela a sfondo trasparente, di dimensioni 800x1000 px:
-la larghezza di 800px è scelta per permettere di adattare la vostra opera anche sugli schermi con risoluzione minima
-l'altezza di 1000px non è obbligata, potete benissimo farla più piccola o più grande.


2) HEADER: Create l'header del vostro template (cioè l'immagine princiale), dando sfogo a tutta la vostra fantasia, il mio è:
header


3) SFONDO: Create un nuovo livello e portatelo in basso nell'ordine di visualizzazione. Decidete se mettere un pattern, un semplice colore. Io ho scelto il colore #3e569c, utilizzando un effetto nappa (Effetti --> Effetti di Trama --> Nappa ed assegnando dei valori a mio piacimento)
sfondo


4) BOX MESSAGGI: E' utile, anche visivamente, dividere la zona dedicata ai messaggi, che si scriveranno nel blog, dal resto del template. Nell'esempio ho deciso di crearlo utilizzando lo strumento rettangolo (colore di sfondo #c98bc0 mentre per il bordo ho usato una linea tratteggiata di spessore 3px e colore #3e569c).
box
Ho assegnato la dimensione e ho portato il livello al di sotto dell'header (come ordine di visualizzazione).


5) BOX LATERALE: Per i boxes laterali ho deciso di utilizzare la stessa grafica del box dei messaggi, ovviamente di larghezza più piccola:
boxlat

Allo stesso modo ho portato il livello al di sotto dell'header (come ordine di visualizzazione).
Ecco il vostro template è pronto per essere trascritto in html.

 

Adesso inizia la parte più complessa, per chi non ha mai avuto a che fare con i codici HTML. Ma non vi allarmate per la lunghezza del tutorial, questa procedura serve per farvi capire cosa state facendo, una volta pronto il vostro codice di base non ci vorrà molto ri-adattarlo al vostro nuovo template. Potete usare un editor testuale o visuale, noi utilizzaremo il semplice blocco note ^_^.

Aprite un nuovo documento e salvatelo con estensione .html:

1) File --> Salva con nome

2) Al Nome File scrivete "template.html" (senza virgolette), facendo attenzione a non dimenticare il punto prima di html.

In questo modo potete visualizzare la vostra opera anche se non siete connessi ad internet. Per modificare il codice (e quindi riaprirlo in blocco note)

3) Cliccate con il pulsante destro sul file da voi creato in HTML

4)Scegliete apri con --> blocco note.

E' utile, comunque, fare i dovuti preamboli.

Per capire al meglio tutto ciò che segue vi consiglio di copiare ogni codice nel vostro blocco note nel corso delle lezioni. Ogni pagina HTML ha una struttura portante che non può essere cambiata:

<html>
<head>
<title>TITOLO</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
</style>
</head>

<body>
</body>
</html>

Una volta salvato il vostro file in .html, copiate il codice sopra ed incollatelo nel vostro file, File-->Salva.
Si sottolinea che in questo caso non verrà fatta alcuna distinzione tra la pagina HTML e i fogli di stile (CSS), per facilitare la realizzazione del template per chi è alle prime armi.

i tag <html></html>

Osservate che l'intero codice è racchiuso tra i tag <html></html>, necassario per identificare il tipo di linguaggio usato. La pagina è poi suddivisa in due parti: la testata (<head></head>) ed il corpo (<body></body>).

i tag <head></head>

Nei tag <head><head> saranno specificati:

- Il titolo del blog o del template (a vostro piacere), inserito nei tag <title></title>
- i metatags (per ulteriori informazioni sul significato cliccate QUI, ma per adesso non vi serve conoscere altro per realizzare il vostro template);
- gli stili della pagina (racchiusi nei tag <style></style>, dopo i metatags, che assegna alla nostra pagina web i colori e/o l'immagine di sfondo, la formattazione del testo (tipo di font, colore ecc) e dei link (tipo di font, colore ecc)

i tag <body></body>

Nei tag<body></body> saranno specificati:
- la posizione e il link dell'immagine dell'header da voi creata;
- la posizione e le dimensioni dei box dei messaggi e dei boxes laterali;
- nel caso dei template splinder, anche i tag usati dalla piattaforma di splinder per identificare nick autore messaggio, data pubblicazione messaggio e così via.

Costruire la "struttura" del nostro template

Prepariamo:
1) il file immagine che conterrà l'header (l'imagine che abbiamo preparato) in formato jpg o png o gif;
2) il file immagine per lo sfondo (è sufficiente avere un'immagine piccola, che poi verrà ripetuta più volte), nel caso del template di esempio lo sfondo sarà questo, che ripetuto più volte in verticale, sembrerà un elemento unico.

Inserire lo sfondo

nei tag <style></style> inseriremo:

body {
background-color: #3e569c;
background-image: url('immaginesfondo.png');
background-repeat: repeat-y;
}

dove:
background-color: indica il valore esagesimale del colore di sfondo, è utile inserire questo valore, per assicurarci che lo sfondo del tamplate non sia visto bianco da chi ha una risoluzione dello schermo maggiore.

background-image: inseriamo il link della nostra immagine (possiamo anche inserire la posizione della nostra immagine sul computer C:Documenti ecc ecc, se non abbiamo a disposizione internet, il link giusto lo modificheremo in seguito).

background-repeat
: indica se l'immagine dell sfondo deve essere ripetuta, nel caso dell'esempio sarà ripetuta nella direzione verticale (y).

Se adesso salvate e cliccate sul file due volte per aprirlo con il vostro browser potrete vedere la vostra pagina HTML con il solo sfondo.

Inserire l'immagine di testata

Potete finalmente inserire l'immagine che avete creato con tanto amore, inserendo nei tag <body></body> questo codice:

<div id="header" style="position: absolute; top: 0px; left:85px;"><img src="ImmagineHeader.png" border="0"></div>

dove:

il tag <div></div>= significa division e divide la pagina in sezioni logiche, in questo caso lo usiamo per identificare la posizione della nostra immagine;

id= identifica l'oggetto tra virgolette "",io l'ho chiamato header, ma potete dargli il nome che preferite;

style= indica lo stile da assegnare al nostro div;

position= può avere 4 valori (static, abosolute, relative, fixed), se uso la dicharazione absolute decido in che posizione nello schermo devo inserire la mia immagine (top e left);

top= distanza dal bordo esterno alto della schermata dell'immagine;

left= distanza dal bordo esterno sinistro della schermata dell'immagine;

<img src="">=è il tag per richiamare l'immagine, anche in questo caso si inserisce il link dell'immagine, ma possiamo anche inserire la posizione della nostra immagine sul computer C:Documenti ecc ecc, se non abbiamo a disposizione internet, il link giusto lo modificheremo in seguito.

Ecco il vostro layout è pronto, non rimane che inserire il "contenitore per le parole" ^_^. A questo punto il vostro codice sarà:

<html>
<head>
<title>TITOLO</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>

body {
background-color: #3e569c;
background-image: url('immaginesfondo.png');
background-repeat: repeat-y;
}

</style>
</head>

<body>

<div id="header" style="position: absolute; top: 0px; left:85px;"><img src="ImmagineHeader.png" border="0"></div>

</body>
</html>


Manca soltanto la parte relativa ai box. In questo caso dobbiamo lavorare sia nel tag <style></style>; che nel tag <body></body>

Posizionare i box laterali

Come per l'immagine dell'header, utilizziamo il tag <div> per decidere dove inserire i nostri box:

<div id="colonna-destra" style="position: absolute; top: 500px; left: 500px; width: 185px; height:">BOX LATERALI</div>

il tag <div></div> = significa division e divide la pagina in sezioni logiche, in questo caso lo usiamo per identificare la posizione della nostra immagine;
id = identifica l'oggetto tra virgolette "",io l'ho chiamato header, ma potete dargli il nome che preferite;
style= indica lo stile da assegnare al nostro div;
position= può avere 4 valori (static, abosolute, relative, fixed), se uso la dicharazione absolute decido in che posizione nello schermo devo inserire la mia immagine (top e left);
top= distanza dal bordo esterno alto della schermata dell'immagine;
left= distanza dal bordo esterno sinistro della schermata dell'immagine;
width=indica la larghezza del box;
height=indica l'altezza, in questo caso non è necessario specificarlo, perchè voglio che la lunghezza della pagina sia automatica, ma l'ho messo solo per farvelo vedere.

Cosa scrivere al posto di BOX LATERALI? Vi sono dei box predefiniti, se così possiamo dire, per splinder:

Qualcosa di me
<$BlogAboutMe$>

Blog Amici
<$BlogLinkOut$>

Categorie
<$BlogCategories$>

Archivio
<$BlogArchive$>

Sono passati di qui
<$BlogCounter$>

Bottoni
<$BlogButtons$>

è facile capire il significato dei tag splinder dal titolo di ogni box, ovviamente voi vedrete questi parole senza senso, ma una volta che il template viene utilizzando sulla piattaforma splinder quelle strane parole scompariranno e si visualizzaranno i valori corretti.

Posizionare il box messaggi

dopo il tag <div> dei box laterali:

<div id="post" style="position:absolute; top:500px; left:110px; width:330px; height:;">

BOX MESSAGGI

</div></textarea>

Anche in questo caso al posto di BOX MESSAGGI inseriremo:

<Blogger>

<$BlogItemTitle$>
<br>
<$BlogItemComments$>
<br>
<$BlogItemBody$>
MessaggioInviato da <$BlogItemAuthorNickname$> alle <$BlogItemDateTime$>
<br>
<$BlogItemCategories$>
</Blogger>
<br><$BlogPager$>

Anche in questo caso i tag che vedete sono propri di splinder, e funzionano solo se inseriti sulla piattaforma splinder. Il loro significato:<br>

<blogger></blogger> = questo tag deve racchiudere tutto il post altrimenti il messaggio non viene visualizzato;
<$BlogItemComments$> = link alla pagina dei commenti;
<$BlogItemBody$> = il corpo del messaggio;
<$BlogItemAuthorNickname$> = Nick dell'autore;
<$BlogItemDateTime$> = data di pubblicazione del post;
<$BlogItemCategories$> = racchiude i tag che si associano ad un messaggio;
<$BlogPager$> = questo inserito dopo , dà la possibilità di sfogliare le pagine del vostro blog.

Quindi il codice alla fine di questa lezione è:

<html>
<head>
<title>TITOLO</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>

body {
background-color: #3e569c;
background-image: url('immaginesfondo.png');
background-repeat: repeat-y;
}

</style>
</head>

<body>

<div id="header" style="position: absolute; top: 0px; left:85px;"><img src="ImmagineHeader.png" border="0"></div>

<div id="colonna-destra" style="position: absolute; top: 500px; left: 500px; width: 185px; height:">
Qualcosa di me
<$BlogAboutMe$>
Blog Amici
<$BlogLinkOut$>
Categorie
<$BlogCategories$>
Archivio
<$BlogArchive$>
Sono passati di qui
<$BlogCounter$>
Bottoni
<$BlogButtons$>
</div>

<div id="post" style="position:absolute; top:500px; left:110px; width:330px; height:;">
<Blogger>
<$BlogItemTitle$>
<br>
<$BlogItemComments$>
<br>
<$BlogItemBody$>
MessaggioInviato da <$BlogItemAuthorNickname$> alle <$BlogItemDateTime$>
<br>
<$BlogItemCategories$>
</Blogger>
<br><$BlogPager$>
</div>

</body>
</html>


E adesso vi chiederete: ma perchè è ancora così brutto il mio template!? Non vi preoccupate, è necessario adesso formattare il testo. Ciò significa indicare il tipo di font, la dimensione del carattere i colori e così via.
Si potrebbe inserire il tutto nel tag <body></body>, ma ciò non conviene. Per svariati motivi: perchè il browser firefox non sempre legge tutti i tag presenti in body, perchè è molto più facile cambiare gli stile di più parole contemporaneamente con una sola azione ^^ .
Di seguito vi do le impostazioni che si usano più frequentemente:

h1 {
font-family: Tahoma;
font-size: 15px;
color: #ffffff;
text-decoration: bold;
}

p, body, div {
font-family: Tahoma;
font-size: 12px;
color: #ffffff;
}

a:link {
color: #ffffff;
text-decoration: underline;
cursor: hand;
}

a:visited {
color: #ffffff;
text-decoration: underline;
}

a:hover {
color: #ffffff;
text-decoration: overline;
}

dove:

h1 = è il selettore che formatta gli stili dei titoli, per far sì che una parola assuma gli stili di un titolo di tipo h1 bisogna chiuderlo tra i tag <h1></h1>, ad esempio

<h1>Categorie</h1>


p, body, div = sono i selettore che formattano gli stili di tutto il testo racchiuso nel tag <body></body>, <p></p>; e <div></div>;
a:link = formattazione del testo in cui c'è un link;
a:visited = formattazione del testo in cui c'è un link visitato<br>
a:hover = formattazione del testo in cui c'è un link al passaggio del mouse.

Per chi non sapesse come linkare un testo ecco il codice:

<a href="http://imaginationart.altervista.org/">ImaginationART</a>

Per conoscere altri codici per migliorare gli stili del proprio testo:
- xxx
- xxx
- xxx
Quindi il codice del vostro template è:

<html>
<head>
<title>TITOLO</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>

body {
background-color: #3e569c;
background-image: url('immaginesfondo.png');
background-repeat: repeat-y;
}

h1 {
font-family: Tahoma;
font-size: 15px;
color: #ffffff;
text-decoration: bold;
}

p, body, div {
font-family: Tahoma;
font-size: 12px;
color: #ffffff;
}

a:link {
color: #ffffff;
text-decoration: underline;
cursor: hand;
}

a:visited {
color: #ffffff;
text-decoration: underline;
}

a:hover {
color: #ffffff;
text-decoration: overline;
}

</style>
</head>

<body>

<div id="header" style="position: absolute; top: 0px; left:85px;"><img src="ImmagineHeader.png" border="0"></div>

<div id="colonna-destra" style="position: absolute; top: 500px; left: 500px; width: 185px; height:">
<h1>Qualcosa di me</h1>
<$BlogAboutMe$>
<h1>Blog Amici</h1>
<$BlogLinkOut$>
<h1>Categorie</h1>
<$BlogCategories$>
<h1>Archivio</h1>
<$BlogArchive$>
<h1>Sono passati di qui</h1>
<$BlogCounter$>
<h1>Bottoni</h1>
<$BlogButtons$>
</div>

<div id="post" style="position:absolute; top:500px; left:110px; width:330px; height:;">
<Blogger>
<$BlogItemTitle$>
<br>
<$BlogItemComments$>
<br>
<$BlogItemBody$>
MessaggioInviato da <$BlogItemAuthorNickname$> alle <$BlogItemDateTime$>
<br>
<$BlogItemCategories$>
</Blogger><!-- -->
<br><$BlogPager$>
</div>

</body>
</html>


Finita la lezione 5 adesso avete il vostro bel template in un file html sul vostro computer...vi chiederete: ma come faccio a pubblicarlo?

Per prima cosa dovete hostare le vostre immagini su un sito di hosting come Libero oppure semplicemente tinypic. Sostituite i link delle immagini nel vostro template in html.

Andate su splinder ed una volta registrati in edita template inserite l'intero codice che avete scritto.

Adesso potete scrivere tranquillamente i vostri dati ed i vostri messaggi!

Indipendentemente dal codice che avete usato per creare il vostro template è possibile allineare l'intero template creando un semplice container. Ecco come fare:


ALLINEAMENTO DEL CORPO TEMPLATE A SINISTRA:
Tra i tag:

<style>
</style>

inserite

#container {
       float: left;
       margin-left: 0px;
}

e dopo il tag

<body>

inserite

<div id="container">

prima del tag

</body>

inserite

</div>

il container racchiuderà tutto il contenuto del vostro template

ALLINEAMENTO DEL CORPO TEMPLATE A DESTRA:
Tra i tag:

<style>
</style>

inserite

#container {
       float: right;
       margin-right: 0px;
}

e dopo il tag

<body>

inserite

<div id="container">

prima del tag

</body>

inserite

</div>

ALLINEAMENTO DEL CORPO TEMPLATE AL CENTRO:
Tra i tag:

<style>
</style>

inserite

#container {
       margin: auto;
}

e dopo il tag

<body>

inserite

<div id="container">

prima del tag

</body>

inserite

</div>

 

Nella lezione 5 si è introdotto il concetto di stili, ma non ho approfonsito l'argomento. Per conoscere tutte le personalizzazioni del testo nel linguaccio html consultate questa guida.

Per facilitare la compilazione del vostro codice ho deciso di inserire una base per template splinder già pronta. Cliccate qui per consultare e per capire come modificarla.