Esempio di impostazione di un sito web responsive - Layout con Grid View a 12 colonne

Utilizzo di un container che riempie tutto lo schermo e di una Grid View a 12 colonne

Facendo ancora riferimento al progetto GigaWebIIIBI realizzato in una classe terza informatica dell'ITIS Alessandrini di Teramo, propongo un secondo esempio di un sito web responsive con un layout, basato su una Grid View (griglia) a 12 colonne (utilizzata in tantissimi siti web) che, allargandosi e restringendosi, si adatta alle dimensioni dello schermo e permette di posizionare facilmente gli elementi sulla pagina.

Dell'esempio di sito qui proposto sono state sviluppate due pagine: la Home page e la pagina "Che facciamo". Quando si utilizza un dipositivo mobile, uno smartphone o un piccolo tablet, viene disabilitato il menù tradizionale e viene abilitato il menù "smartmenu" che, grazie ad un piccolo script JQuery, si apre e si chiude cliccando sulla classica icona con 3 barre orizzontali. La grafica del sito è essenziale e codice HTML e costrutti CSS sono volutamente semplici e didattici.

L'analisi del codice e del layout di esempio scelto per popolare i contenuti delle due pagine, fanno capire come la Grid View rappresenti uno strumento semplice e versatile per creazione di layout belli e moderni e nei quali in cui la struttura si separa completamente dai contenuti. Gli studenti più motivati, una volta acquisite le competenze per impostare correttamente un sito web responsive, potranno modificare le impostazioni tipografiche o aggiungere gli effetti grafici e di animazione desiderati. Sicuramente saranno in grado di adoperare al meglio i tanti template e framework per il responsive design, disponibili sul web e generalmente freeware ed open-source.

 

Prova il codice con un qualsiasi dispositivo

Scarica il file rar

Pagina Download