Tutorial Template [CSS + HTML]

Due parole prima di iniziare:

In questo topic cercherò di spiegare come si crea il codice di un template (è il primo tutorial che faccio, abbiate pietà.. Spero riusciate a capire, anche solo un po' >_<). NON spaventatevi per la lunghezza. E' dovuta al fatto che odio le persone che danno le cose per scontato, quindi ho spiegato tutto nei minimi dettagli, cercando di non essere pesante ^^
Leggete tutto per bene, non saltate neanche una riga, se no non capirete nulla (sarà già difficile capire leggendo tutto... temo).
Nb.: tutte (o quasi) le cose che ho scritto in CSS e HTML sono prese da QUESTO mio template (che è un po' brutto ma amen ò.o XD).. Vedere come viene fuori può aiutarvi. ^^

Fine delle due parole.

Allooora.. Cominciamo col dire che il codice di un template si divide in 2parti:
- il CSS (Cascading Style Sheets), ossia la personalizzazione degli stili (che sarebbe poi la personalizzazione dei vari tipi di testo).
- l' HTML (Hyper Text Mark-Up Language), che si basa sulla creazione dei livelli e sul loro riempimento (dopo vedremo meglio cosa sono).

Ora prendiamo uno "scheletro" del codice, ossia le sue fondamenta, che non vanno modificate (titolo a parte):


E ora cominciamo a riempirlo.
Partiamo con il CSS, che va infilato fra < style > e < / style >.
La struttura del CSS è molto semplice; se dovessimo scriverla in italiano, verrebbe fuori una cosa del genere:

Il tutto tradotto in CSS diventa:

NB: I duepunti, così come le parentesi graffe e i punti e virgola NON sono messi per bellezza, sono parti essenziali, se dimenticate di trascriverle il pc non capirà più cosa volete modificare (e di fatto NON lo modificherà XD).

Ora vi trascrivo qua le opzioni che io ho personalizzato nel mio template (e che voi, a vostra volta, trascriverete nello scheletro^^), con a fianco una breve "traduzione" in arancio di quel che vi è scritto (mi raccomando la traduzione si legge e basta, non è da trascrivere O_O).
Se vi è chiaro l' esempio che ho fatto prima, avrete perlomeno intuito che la parte da modificare è solitamente "l' effettiva modifica", ossia quel che sta dopo i due punti.









Per tutti i vari tipi di links, quelle che avete visto sopra sono le opzioni di base, però poi si possono aggiungere vari effetti. Ne scrivo un po' qua:


E ora vi faccio notare un paio di cose:
1. potete mettere più effetti insieme, non dovete sceglierne per forza uno solo \°O°/
2. se in a:link non vengono specificati [cioè non vengono scritti] misura, font e colore del testo, verranno automaticamente gli stessi del body. Se in a:hover non vengono specificati misura, font e colore del testo, verranno gli stessi di a:link. Stesso discorso per il cursore.

Gli effetti molto spesso vengono utilizzati anche per i cosiddetti "titoletti", che sono la nostra ultima tappa del CSS. Questo è l' esempio di titoletto del mio template, voi sbizzarritevi come volete >__</:



Ora che abbiamo finito il CSS, il nostro scheletro iniziale dovrebbe essere diventato più o meno così:


Avete capito? Siete ancora vivi?
Allora si passa all' HTML \*____*/

Prima abbiamo detto che in un template l' HTML "si basa sulla creazione dei livelli". Ma che cosa sono i livelli?
(se lo usate) pensate a Photoshop. Quando create una Sign (per esempio), create un livello per l' immagine, uno per lo sfondo, uno per il bordino, uno per il testo e così via. Nell' html creeremo un livello per ogni colonna, più un livello per l' immagine di sfondo.
Come si scrive un livello?
Ecco qua:

E ora vi spiego cosa significa, perchè così sembra arabo (ma in realtà è solo html xD):
div= livello, per l' appunto
id="sinistra"= l' id sarebbe il nome del livello. Mettere un nome non è fondamentale, serve principalmente a voi stessi, per ricordarvi qual è il livello su cui state lavorando; io per esempio ho scritto sinistra perchè quello è il livello della colonna di sinistra, ma potete scrivere qualsiasi cosa, anche i peggio insulti, al pc non importa minimamente XDD
style= inizia la modifica degli stili del livello ^O^ E voi direte: ma la modifica degli stili non era il CSS? Sì, ma il livello fa parte dell' html è_é Che poi, volendo, i livelli possono essere scritti in css, ma è più semplice fare come vi sto spiegando ^___^
position:absolute; -> posizione assoluta. Niente da spiegare, lasciate così com è.XD
top: 160px; -> quanto dista il livello (ossia la colonna) dall' alto. ALLORA. Se usate programmi come front page o simili (cosa che io non ho mai fatto) PENSO (e dico penso appunto perchè non l ho mai fatto, quindi non ne ho la certezza) che vi dica in automatico quanti pixel (px) dovete lasciare.. Io faccio sempre ad occhio XDD Col tempo ci prenderete l' abitudine ed azzeccherete quasi subito. Per rendervi più semplice la cosa, pensate a un icon, che è grande 100px. Quante icons ci stanno, partendo dall' alto, fino all' inizio della colonna? Muahahahahah, provate a scrivere un numero e vedrete se siete bravi ad indovinare o meno! XDDD
left: 192px; -> quanto dista il livello (ossia la colonna) dall' estrema sinistra. Stesso discorso di prima.
width: 165px; -> quanto è largo il livello (ossia la colonna)? Un altro indovinello per voi! XD

Se volete mette la scrollbar al livello [come ad esempio in QUESTO mio template], basta aggiungere queste due cosine:
height: 123px; -> quanto mai sarà alta la colonna XD??!!
overflow: auto; -> nulla da dire, lasciatelo così com è XD
Nb.: la scroll della colonna di quel template di esempio è a sinistra. A voi NON verrà a sinistra, ma a destra. Per farla a sinistra ci vuole na roba aggiuntiva, che per ora a voi non interessa (se poi vorrete saperla, lo spiegherò).

La prossima domanda è: nel nostro scheletro, dove bisogna posizionare il livello?
Subito dopo < body > ^^
Ora che avete una spiegazione "generale" su cosa è un livello e su come si scrive, passiamo ai dettagli.
Il 1° LIVELLO che dovrete mettere è quello per l' immagine. Ecco quello del mio template:

NB.: il top è messo a 33px perchè 33 è l' altezza di quella merda di sbarra di Splinder =__='
NB2.: L' avete notato < /div > alla fine? Cosa sarà mai? E' la chiusura del livello, indica che finisce lì. Ricordatevi SEMPRE di chiudere i livelli perchè, se IE ve la fa passare liscia, Firefox vi punisce e incasina tutto il template! XD

Il 2° livello che potete fare è quello della colonna "Menu". Il mio è così:


NB: fra tutte le cose che ci sono scritte, l' avete notato < p class="title" > < /p > ?
Non guardatelo male, PARLIAMONE.
Vi ricordate quando nel CSS avete creato il "titoletto"? Per farlo comparire nel template, dovrete scrivere < p class="title" > all inizio e < /p > alla fine delle parole che volete che abbiano le proprietà del titoletto^^

Comunque!! Per finire, ecco l' ultimo livello, quello dei post:

Per quanto mi riguarda, potete copiare e incollare quello che vi è all interno del livello (ossia da < Blogger > in poi), perchè quelle sono le scritte "base" che Splinder ha impostato per far visualizzare i post, l' autore, la data e i commenti.

Se avete seguito tutto, il vostro codice finale sarà molto simile a quello che vedrete andando sul mio template e cliccando Visualizza -> Sorgente Pagina (oppure Visualizza -> HTML, se usate Internet Explorer).

La spiegazione è finita *applausi*, spero sia stato comprensibile >_< Se avete domande, non vi resta che chiedere L°_°

Il tutorial è stato creato da ~ Ai_Chan ed è sotto copyright: vietato spacciarlo per proprio o copiarlo altrove senza permesso!

Edited by ~ Ai_Chan - 16/8/2008, 19:20

grazie mille ai chan sta notte me la studio questa cosetta *______*

OMG
°__________° è spiegato da dio Ai.

Ora tutto sta a vedere se IO ci arrivo a farne uno X°°°

grazie a tutte *___* poi fatemi sapere se vi è servito! >///<

ecco bisogna vedere se ci arrivo anche io >_<

bravissima ai-chan *_*
se ci sono riuscita io ad imparare 'ste cose potrete riuscirci anche voi u.u