Come costruire il primo layout HTML e CSS - WeSchool


Se conoscete il funzionamento di una griglia CSS quello che vi resta da apprendere è come poter costruire il vostro primo layout! Ed è proprio quello che andremo a fare insieme in questa lezione.
 
Lo scopo di questa lezione è andare a creare un layout che rappresenti i seguenti elementi
 attraverso la struttura HTML:
 






















Videolezione "Breve panoramica introduttiva sull'utilizzo avanzato dei CSS"

























    const isRelatedVideo = 1;

 
Sono sicuro che avete già visto moltissimi siti che hanno questa struttura e sperimentando con il box model avete iniziato a chiedervi come tutto questo fosse possibile. Uno dei vari modi per realizzare un layout riguarda quello di affidarsi alle griglie CSS che faciliteranno il nostro lavoro e lo renderanno compatibile con i vari browser senza alcuno sforzo da parte nostra.
 
Ma prima di andare a vedere come questo sia possibile diamo prima uno sguardo alla struttura HTML della nostra pagina:
 
 
Come potete vedere all’interno dell’elemento body sono presenti diversi div, il primo con id 
#contenitore
 è, appunto, il contenitore di tutti gli elementi della nostra pagina che grazie alla classe 
.container_12
 e al foglio di stile scaricato da 960.gs permette di impostare le dimensioni della nostra griglia.
 Costruiamo il Layout 
Come già visto un una altra lezione, non ci è sufficiente dichiarare la classe per il nostro contenitore, ma dobbiamo specificare anche le classi per i vari elementi che vogliamo andare a posizionare.
 
 
Nell’esempio presentato sopra possiamo capire come ci basti delle semplici classi per poter creare il nostro primo layout. In questo caso abbiamo creato un layout di due colonne, una per i contenuti principali (
#main
) mentre un altra per la navigazione secondaria (
#sidebar
). 
 
Ricordandovi che la somma delle colonne utilizzate per definire i nostri contenitori, saresti in grado di sviluppare un layout con 3 colonne?

