Navigando nel web si possono trovare diverse guide per realizzare un layout per un sito. Il problema è che, di solito, il risultato finale è un layout che sì, sarà ben fatto, ma sarà anche molto semplicistico a livello grafico.
Ho pensato sarebbe stato più utile imparare a prendere un layout realizzato con un programma di grafica e “scomporlo” per inserirlo nelle parti giuste di codice.
Questa è l’immagine di partenza realizzata con Corel Draw.
Questo è il risultato finale.
Ora vediamo come arrivare a quella pagina.
Premesse:
- sono richieste un minimo di conoscenze html e css, perché non starò a spiegare punto per punto ogni riga di codice che inserirò;
- questo che ci accingiamo a realizzare è un layout fisso, cioè la sua larghezza non varia a seconda della risoluzione del computer da cui l’utente lo sta guardando, ma viene stabilita dal programmatore;
- il layout è ottimizzato per la visione su Opera 9, Mozilla Firefox 1.0.7, Internet Explorer 7.
1 – BOX FONDAMENTALI
Per prima cosa decidiamo quanti e quali box creare.
Lavorando con un layout fisso, bisogna stabile subito un box che conterrà tutti gli altri.
#container{
width:800px;
margin-left:auto;
margin-right:auto;
border:3px solid #79c4ee;
}
Ho deciso di impostare la larghezza (width) a 800 pixel per permettere anche a chi utilizza la risoluzione 800x600 (ancora molto diffusa) di poter vedere il sito senza dover usare la barra di scorrimento. I due margini sono impostati su auto per spostare il box al centro della pagina. Il bordo l'ho messo per abbellire un po' il tutto^^.
Poi, abbiamo sicuramente bisogno di un box che contenga il menu laterale.
#menu{
float:left;
width:180px;
margin-left:10px;
}
C’è solo un modo per mettere due box uno affianco all’atro, ed è rendere float uno dei due. Float indica che il box si piazzerà, letteralmente, sopra a tutto quello che, nel body dell’html, verrà inserito dopo di lui.
Infine è necessario un box per i contenuti.
#content{
margin-right:10px;
margin-left:200px;
}
Il margine sinistro è impostato a 200 pixel: 180 sono necessari affinché il box si possa vedere per intero, in quanto quei primi pixel sono occupati dal menu. I restanti sono stabiliti secondo i gusti.
2- TAGLIARE IL LAYOUT
Ora bisogna scegliere come tagliare l’immagine creata per il layout. Io ho deciso di prendere solo l’immagine della farfalla e di utilizzarla come sfondo del container. Bisogna tener presente che ci sono molti modi differenti per tagliare l’immagine di partenza, questo è quello per cui ho optato io, che non è né più giusto, né più sbagliato degli altri.
#container{
width:800px;
margin-left:auto;
margin-right:auto;
border:3px solid #79c4ee;
background-image: url(immagini/farfalla.jpg);
background-repeat:no-repeat;
background-position:top;
padding-top:430px;
}
Il padding serve per spostare in basso il menu e il content, in modo che non si sistemino soprano l'immagine, che è stata posizionata in alto e le è stato imposto di non ripeterisi.
Per quel che riguarda il content, possiamo vedere dal layout terminato che ho pastato all'inizio, che il testo deve essere contenuto all’interno della cornicetta verde. Il problema è che non possiamo semplicemente mettere l’immagine come sfondo, perché se noi vogliamo inserire all’interno un testo lungo, verrebbe fuori una cosa inguardabile, come si può vedere qua.
Per risolvere il problema, e quindi fare il modo che il bordo si adatti a qualunque tipo di testo, dobbiamo scomporlo in tre parti.
Parte sopra
Parte centrale
Parte sotto
Cominciamo inserendo la parte centrale come sfondo del content.
#content{
margin-right:10px;
margin-left:200px;
background-image: url(immagini/cornicecenter.jpg);
background-repeat:repeat-y;
background-position:top;
}
Col comando repeat-y l’immagine verrà ripetuta verticalmente fino alla fine del box.
Per inserire le altre due parti, creiamo altri due box:
#top{
margin-right:10px;
margin-left:200px;
background-image: url(immagini/cornicetop.jpg);
background-repeat:no-repeat;
background-position:top;
height:34px;
}
#bottom{
margin-right:10px;
margin-left:200px;
background-image: url(immagini/cornicebottom.jpg);
background-repeat:no-repeat;
background-position:top;
height:34px;
}
Ovviamente dovranno avere gli stessi margini del content, per fare in modo che le immagini risultino allineate e non si noti, così, che siano distinte. È importante impostare l’altezza (height) che deve corrispondere almeno a quella dell'immagine. Se non si indica tale valore, il box, non contenendo nulla, sarà come se non fosse stato inserito. All'interno del body dell'html, sarà sufficientemente inserire:
<div id="top"></div>
<div id="content">--testo--</div>
<div id="bottom"></div>
Ecco il risultato.
Occupiamoci ora del menu.
Ogni petalo rappresenta un link, per cui dobbiamo creare un box da ripetere ogni volta che inseriamo una nuova voce.
.immymenu{
background-image: url(petalo.jpg);
background-position:center;
background-repeat:no-repeat;
height:56px;
}
Come attributi inseriamo l’immagine del petalo. Anche in questo caso abbiamo inserito un’altezza fissa per fare in modo che il petalo si veda per intero. Io ho poi deciso di posizionare l'immagine al centro del box solo per scelata personale^^.
L’ultima cosa che ci manca da sistemare, è l’immagine di sfondo con le bollicine.
Quella la inseriamo all’interno del body.
body{
background-image:url(immagini/bolle.jpg);
}
Ora abbiamo sistemato tutte le immagini, per completare il layout basterà dare una ritoccatina qua e là per sistemare l’inserimento delle parole, aggiungendo i font, lo stile del testo, e i vari padding per organizzarle al meglio.
Qui potete trovare uno zip con all'interno il css e l'html.