Come Creare 1 Template [Splinder/In generale]
-beginner mode-

.Occorrente
1) un programma di grafica (che sia photoshop o paint shop pro o paint nn fà differenza XD)
2) il fido blocco note, ma va bene anche altervista o anche il vostro blog su splinder, nhè xD
3) un'hoster d'immagini (imageshack, hostfiles o il cacchio che vi pare, bast che vi dà l'indirizzo dell'immagine xD)
4) forbici dalla punta arrotondata... portano fortuna <3


partiamo subito dal presupposto che ci vuole 1 immagine XD prendiam, ad esempio, quetta e modifichiamola a photoshop. dal momento che questa è 1 guida per beginner, faremo le cose semplici e dettagliate (non prendetevi paura se il tutorial è lungo... ho cercato di spiegare le cose nel + chiaro dei modi)


1) apriamo l'immagine a photoshop e ritagliamone 1 parte; poi apriamo 1 documento 800x600 con sfondo bianco e incolliamo l'immagine con ctrl+c [IMAGE]
2) applicate l'effeto che vi pare all'imma, 1 scritta o ghirigori vari. salvate l'immagine nel formato che ti pare. [IMAGE] (<-- fà proprio cagare, ma nn mi andava di fare chissàcosa... è solo 1 esempio del resto o.o)

3) aprite il vostro editor di testo e iniziamo a trafficare con l'html xD questo è il codice base:

in cui:
-HTML: è la sintassi del linguaggio
-head: testata XD
-title: il titolo della pagina che appare in alto
-body: il corpo della pagina
-style: lo stile, in CSS (l'ho messo perchè sempre + spesso lo si mette)

4) iniziamo dunque a editare la base °v° inanzitutto tra i tag title e /title inseriamo il nome del blog (nel caso in qui si faccia 1 template x splinder, inserite il tag <$BlogTitle$>), dopodichè iniziamo ad editare lo style... tra questi tag và utilizzato il linguaggio del css, che ci servirà semplicemente a definire come sarà il testo del nostro blog, i titoli, i colori eccetera °v° un modo facile per iniziare è usare gli h1, h2 eccetera, ma io preferisco dare un nome personale ai p (paragrafi). ma andiamo con ordine....

inanzitutto, fra i tag dello style, definiamo come vorremo rappresentare le cose basilari della pagina (sfondo, colore delle scritte, grandezze e font desiderato). ecco 1 codice molto semplice:

in cui:
-background color è il colore di sfondo... se volete 1 immagine potete scrivere background-color: url('url dell'immagine')
-font-family è lo stile del font (che sia times new roman, arial o tahoma è indifferente, quella è 1 scelta personale... ma occhio, non tutti i font vanno bene: io consiglio quelli base)
-font-size è la grandezza del font (normalmente stà tra i 9 ed i 10 pixel (px))
-color è il colore del font

consiglio personale: di solito assieme al body definisco anche p e div, e quindi scrivo body, p, div e relativo code. IMPORTANTE: le parentesi graffe sono importantissime e vanno messe preferibilmente SOLO nel codice css, poichè servono a definirlo.

5) bene! ora abbiamo definito il colore dello sfondo, del font, la sua grandezza e il suo stile. ora è il momento di definire i nostri paragrafi (che per convenzione chiamerò titoli). un'altro codice, sempre molto semplice:

il punto davanti alla parola titolo stà ad indicare che si tratta di 1 paragrafo, come vedremo + avanti. non è necessario scrivere titolo; potete mettere la parola che vi pare, basta che serva ad identificare che quel paragrafo è destinato a far da titolo o meno.
se vogliamo fare 1 distinzione tra la colonna dei post e quella delle info, possiamo avvalerci dei paragrafi. come abbiamo fatto sopra (ma cambiando la parola "titoli" nella più ovvia, "post"):

in cui:
-text-align è l'allineamento del testo (destra, centro, sinistro, giustificato): và scritto in inglese ovviamente (left, center, right, justify)

avremo così definito:
-il body
-i titoli
-i post

6) passiamo ora a definire i link (argh! ndUnpòtutti). non è difficile come sembra, tranquilli xD solito code esempio:

in cui:
-text-decoration serve a definire un effetto (none in questo caso elimina gli effetti disponibili, che sono underline (sottolineato), overline (la sottolineatura è in alto), line-through (barrato) e blink (lampeggiante))
A:link serve a definire i ghirigori vari nel momento in cui vediamo 1 normalissimo link. quando vogliamo cambiare effetti quando ci si passa sopra il mouse, definiamo 1 nuovo ordine. si tratta dell'A:hover.

...infine, se vogliamo che dopo aver cliccato sul link cambi nuovamente aspetto, abbiamo l'A:visited.


ricapitolando, A:link serve a definire le impostazioni di un normale link (non ancora visitato); A:hover a definire le impostazioni quando andiamo a passare sul link; A:visited a definire le impostazioni dopo che si è cliccato sul link.

a questo punto, il codice css è terminato e possiamo chiudere il tag <style>.

---

Fino ad ora ci siamo impegnati a definire colori, forme e caratt. delle scritte e della pagina. è arrivato il momento di passare al codice html per creare il corpo della pagina (appunto il body). ricordiamo che il codice html differisce un pò dal css.
passiamo quindi a scrivere tra i tag <body> e </body>.

1) ci occorrerà creare 1 nuovo div (ossia 1 sorta di livello, come quelli di photoshop). posizioniamo inanzitutto la nostra immagine: ecco un piccolo esempio.

in cui, nel div:
-style serve a definire i seguenti comandi:
left (distanza dal lato destro della pagina)
top (distanza dalla cima della pagina)
width (la larghezza del div, nel caso si tratti di 1 immagine trattata nel div (come adesso) servirà a far vedere l'immagine in tutta la sua larghezza)
height (l'altezza del div, stessa cosa che vale per il widht)
e nell'img:
-src: l'url dell'immagine

i div dove viene messa 1 immagine sono messi prima per convenzione, ma l'ordine è relativo: di solito io non lo chiudo mai, perchè nn credo serva.

2) possiamo aprire il primo div per il testo; mettiamo caso che si tratti del div per la colonna dei post. possiamo scrivere:

(i valori sono casuali, se nn si fosse capito xD)
se vogliamo che il div non abbia 1 altezza specifica possiamo anche non metterla; in caso si voglia fare 1 div con delle scroll aggiungeremo dentro a style

overflow è appunto il comando che serve a creare le scroll dopo che si è superata l'altezza consentita. io consiglio di mettere auto, perchè così se si supera anche la larghezza non vi saranno problemi nemmeno con quella.

tra i tag del e div ho scritto blablabla, ma ovviamente lì ci vanno i paragrafi dei titoli e del post (du iù rimember? XD)... ora che abbiamo scelto tutto, è uno scherzo metterli.
quindi, se vogliamo definire il titolo scriveremo:

class determina la classe del paragrafo (quindi quelle col punto davanti nel css, nel nostro caso o .titoli o .post); dopo di che scriviamo

in mezzo al paragrafo scriveremo quindi il nostro post.
nota: dal momento che è per splinder metteremi classici tag <$BlogItemTitle$>, <$BlogItemComments$> eccetera: scegliete voi.

3) bon. abbiamo definito quindi il nostro div per il post. ora possiamo fare la stessa cosa anche per la colonna delle info, sempre rispettando le varie distanze ed i vari paragrafi. un esempio ultraveloce:


4) se non avete altri div da aggiungere, potete chiudere il tag del body, ed a questo punto avrete finito :3 (nn te l'aspettavi eh xD)

come vedete è semplicissimo, nn bisogna impazzirci... per chi è alle prime armi sì può sembrare difficile, ma allenandovi, variando codici e via dicendo vedrete che sarà facile. questo template è stato il primo che ho fatto, 8 mesi fà; stento a credere che sia mio dato il livello a cui sono arrivata xD come vedete tutto è possibile xD
in ogni caso se avete dubbi riguardo css e cose così, potete consultare questa utile guida.

spero di avervi quantomeno chiarito le cose.

~ Guidastra by Koory; provate a riprodurre questo template altrove senza il mio consenso e giuro che vi ammazzo <3 «

Edited by Koory - 16/3/2008, 17:41