Creare un template table-less per il nostro Blog

Creare un semplice template table-less per il nostro Blog



Introduzione

La moda dei blog dilaga sempre di più su Internet e, a livello di design, lo stile pulito, leggero e senza troppi fronzoli è diventato quasi uno standard per i diari del Web.

Allo scopo vedremo in questo articolo come creare da soli un semplice template HTML per il nostro blog, utilizzando un layout table-less ed i CSS per posizionare gli elementi.

Nelle prossime righe, quindi, passeremo in rassegna l'intera struttura di un ipotetico layout al fine di comprenderne l'anatomia e le caratteristiche peculiari.

Prima di passare oltre, infine, segnalo ai più pigri che su questo sito è disponibile una sezione con diversi templates già pronti da scaricare ed utilizzare per il proprio blog e/o sito.

Il template del blog

Prima di passare all'analisi della questione e scrivere codice, capiamo bene quale sarà il risultato finale e che aspetto avrà il template del nostro blog. Vediamo uno screenshot:




Sottolineo che l'aspetto del nostro template è stato testato e verificato dal sottoscritto sia con Internet Explorer che con Firefox.

Iniziamo con l'elencare di seguito i diversi elementi strutturali di cui si compone il nostro template:
•logo - contiene l'immagine rappresentante il logo del sito;
•titolo - contiene il titolo del sito o della pagina in un tag A-h1-K;
•corpo - contiene, a seconda della pagina, l'elenco dei messaggi piuttosto che l'intero messaggio nella pagina di dettaglio;
•menu - contiene link, archivi, sommario ed altri elementi di ricerca e navigazione;
•firma - contiene la firma del sito con copyright, nome del sito, autore e quant'altro.
Tutti questi elementi, all'infuori del titolo, sono contenuti all'interno di A-div-K con degli identificativi (ID) a cui potremo accedere con i CSS ed eventualmente con Javascript (quest'ultimo aspetto non è oggetto di questo articolo).

Struttura HTML di base

Concentriamoci adesso sulla struttura HTML di base, tralasciando intestazioni e contenuti vari; insomma vediamo lo scheletro del BODY della nostra pagina:

LOGO

TITOLO

CORPO

MENU

FIRMA

Si noti che i tutto è contenuto all'interno di un A-div-K che allinea al centro il template; poi troviamo il A-div-K principale contenitore del template a cui abbiamo assegnato l'identificativo BLOG.

Gli altri A-div-K sono quelli recensiti in precedenza, il cui reale contenuto e modalità di stilizzazione saranno oggetto dei prossimi paragrafi di questo articolo.

Stile di base del template

Come vedremo in seguito, lo stile del template sarà gestito da un foglio di stile CSS esterno a cui assegneremo il nome style.css, il cui codice di base per i tag principali è il seguente:
body
{
background: #CCCCCC;
color: #000000;
margin: 0px 0px 0px 0px;
}
div, h1, h2, h3
{
font-size: 11px;
font-family: verdana;
}
h1
{
background: #CCDDEE;
padding: 5px 0px 5px 5px;
margin: 0px 0px 0px 0px;
}
h2, h3, p
{
margin: 0px 0px 10px 0px;
}
span
{
color: #AAAAAA;
}
a
{
color: #336699;
text-decoration: underline;
}
a:hover
{
color: #336699;
text-decoration: none;
}
In sostanza abbiamo stilizzato il corpo della pagina impostando i colori di base ed i margini dai bordi del browser ed in seconda battuta stilizziamo, a più riprese, gli elementi testuali ed i titoli ed infine i link l'elemento A-span-K a cui assegnamo un colore grigio chiaro che ci servirà per scrivere la data ed eventualmente l'autore, i click, ed altre informazioni inerenti al messaggio che non vanno otticamente confuse col corpo del messaggio stesso.

Codice HTML completo della pagina

Passiamo adesso al codice HTML completo della pagina, aggiungendo all'esempio di base visto in precedenza anche le intestazioni, il richiamo del foglio di stile esterno ed i contenuti della pagina:
html-head-
-title-Titolo del Blog-title-KIUSO
APERTO-link rel="stylesheet" type="text/css" href="style.css"-KIUSO

A-head-K A-body-K

Titolo del Blog

Titolo del messaggio

Corpo del messaggio...
bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla...

Scritto in data 13/03/2008 16.18

Leggi tutto...

Titolo del messaggio

Corpo del messaggio...
bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla...

Scritto in data 13/03/2008 16.18

Leggi tutto...

Titolo del messaggio

Corpo del messaggio...
bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla...

Scritto in data 13/03/2008 16.18

Leggi tutto...

Archivio Blog

:: Titolo del messaggio

:: Titolo del messaggio

:: Titolo del messaggio

:: Titolo del messaggio

:: Titolo del messaggio

(C) Nome del Sito - Tutti i diritti riservati

A-body-K A-html-K
Oltre al richiamo del foglio di stile esterno, introdotto in precedenza, notiamo l'utilizzo dei commenti condizionali CSS.

E' noto che le condizioni nei fogli di stile CSS si utilizzano per ovviare alle solite fastidiose incompatibilità tra IE e gli altri browser (FF, Safari, Opera, ecc.): nel caso specifico l'utilizzo del commento condizionale è stato reso necessario da un problema di larghezza del box contenente la firma finale.

Se non si desidera tenere il codice CSS direttamente all'interno del codice HTML è possibile creare il file ie.css e corredarlo del codice:
#FIRMA
{
width: 750px;
}
Modificare poi di conseguenza il codice HTML del commento condizionale come riportato nel seguente esempio:



Stilizzazione degli elementi del template

Abbiamo visto in precedenza come stilizzare gli elementi di base della pagina HTML. Vediamo adesso come stilizzare, via CSS, gli elementi proprietari del template del blog, ovvero quelli a cui abbiamo assegnato gli ID esaminati nella prima parte dell'articolo.

Segue il codice CSS:
#BLOG
{
background: #FFFFFF;
text-align: left;
width: 750px;
}
#LOGO
{
background: #336699;
}
#CORPO
{
background: #FFFFFF;
float: left;
width: 490;
padding: 5px 5px 5px 5px;
}
#MENU
{
background: #FFFFFF;
float: left;
width: 245;
padding: 5px 5px 5px 0px;
}
#FIRMA
{
background: #336699;
color: #FFFFFF;
clear: left;
width: 740px;
padding: 5px 5px 5px 5px;
}
Il contenitore principale, identificato come BLOG, assegna il colore di sfondo al template, allinea a sinistra tutti gli elementi (per far fronte all'allineamento centrale di tutto il blog specificato direttamente via HTML) ed assegna le dimensioni in larghezza a tutto il layout.

Il logo, identificato come LOGO, assegna semplicemente il colore di sfondo al box contenente il logo del sito che sarà uguale al colore di sfondo dell'immagine, anche se, a questo punto, si consiglia di creare un'immagine GIF trasparente.

Il corpo della pagina, identificato come CORPO, specifica il colore di sfondo, le dimensioni, il padding ed il non-ritorno a capo.

Il menu della pagina, identificato come MENU, si comporta esattamente come il corpo.

La firma della pagina, identificata come FIRMA, oltre a tutte le stilizzazioni del caso come lo sfondo, il colore del testo, il padding e quant'altro, elimina l'effetto non-ritorno a capo.

Conclusione personale

In questo articolo abbiamo visto come costruire un semplice layout table-less per il nostro blog, abbiamo visto come ovviare ad eventuali incompatibilità tra IE e gli altri browser... benissimo! ma permettetemi, in conclusione, di esprimere una considerazione personale ed assolutamente opinabile: com'erano comode le buone vecchie tabelle ;-)
.

. -

.