CSS  »  Articoli  »  CSS Template e layout 

Per ottenere un design ad alto impatto grafico si è soliti ricorrere ad un massiccio uso della proprietà background dei fogli di stile.

In particolare, un metodo molto di moda è quello di applicare un grande sfondo grafico al body del documento in modo tale che risulti un'estensione del layout propriamente costruito secondo i classici canoni di sviluppo (codice HTML e CSS). Evangelista storico di questa tecnica è stato, e tuttora è, Nick La -- autore di nDesign Studio e Web Designer Wall. Come al solito, uno screenshot vale più di mille parole:

Figura 1 - Screenshot dal sito Web Designer Wall (click per ingrandire)

Figura 2 - Screenshot dal sito N Design Studio (click per ingrandire)

Vediamo come è possibile ottenere tale risultato.

Il layout, requisiti e sviluppo

Prima fase del progetto è lo sviluppo del layout. Visto che lo scopo sarà  quello di integrare visivamente uno sfondo grafico con la struttura, quest'ultima dovrà  sottostare ad un indispensabile requisito: dovendo "unirsi" ad un'immagine, dovrà  essere obbligatoriamente di dimensione fissa. Di conseguenza tutti i posizionamenti (posizione rispetto al viewport, posizione di elementi interni come box e barre laterali etc...) dovranno essere calcolati in pixel (px).

Durante la progettazione di un layout si è soliti predisporre un elemento, in genere chiamato wrapper, che funga da contenitore per tutti gli altri elementi: anche se è una tecnica largamente diffusa, è possibile che in alcune situazioni essa non debba essere necessariamente utilizzata. Nel nostro caso però, la presenza di un wrapper semplificherà  enormemente il lavoro di dimensionamento e posizionamento e quindi il suo utilizzo è obbligatorio.

Impostiamo la dimensione del layout con un po' di CSS:

Altri articoli

Altre guide

Altre newsletter