CSS  »  Articoli  »  CSS Template e layout 

È importante che sia perfettamente centrato, altrimenti quando andremo a mettere lo sfondo nella pagina potrebbe risultare sfalsato rispetto al resto del documento. Per esserne sicuri lo proviamo subito:

Per la creazione dell'artwork non ci sono altre regole da seguire, se non quella di rimanere il più possibile fuori dalla sagoma del wrapper (lavorare sullo spazio "verde"), specialmente ai lati.

Ecco come si presenta il nostro esempio sviluppato:

Figura 6 - Screenshot del nostro layout (click per ingrandire)

Come si può notare, l'artwork utilizzato va a sovrapporsi alla sagoma del wrapper, e quindi quando viene applicato al body del documento il layout propriamente costruito risulterà  sovrapposto. Per risolvere basta aumentare il margine superiore nella regola #wrapper:

Ecco il layout corretto:

Figura 7 - Screenshot dell'esempio completo e corretto (click per ingrandire)

Conclusioni, approfondimenti e ottimizzazione

La costruzione del layout portata avanti in questo articolo è solo un esempio delle mille possibili realizzazioni. L'obiettivo di questa tecnica è quello di realizzare layout molto complessi superando i limiti imposti dai CSS attraverso la grafica. Ricordate sempre che la vostra realizzazione risulterà  funzionante soltanto quando non si noterà  il punto di unione tra la struttura realizzata con fogli di stile e lo sfondo grafico.

Lo scopo di questo articolo era quello di dare una visione d'insieme delle varie fasi di realizzazione, e quindi l'artwork portato come esempio è stato scarsamente ottimizzato (e si vede).

In realtà i layout realizzati attraverso gli sfondi grafici sono molto pesanti: è quindi obbligatorio tenere sotto controllo l'ottimizzazione dello sfondo sia durante la sua realizzazione (attraverso gli strumenti inclusi in qualsiasi programma di grafica raster) sia durante la sua implementazione, ricorrendo magari a tecniche efficaci come quella degli sprite.

Se siete in cerca di approfondimenti, il miglior modo di imparare ad affinare la tecnica rimane quello di osservare il lavoro altrui: se vi imbattete in un sito come Web Designer Wall, non c'è niente di meglio che osservarne il codice e guardare come è stato realizzato l'artwork.

Tutto il materiale proposto è disponibile per il download.

Altri articoli

Altre guide

Altre newsletter