Si potrebbe pensare, dato che il layout è la struttura portante di un sito internet, che sia la prima cosa di cui ci si debba preoccupare durante la fase di progettazione. La prima fase dovrebbe invece essere l'organizzazione dei contenuti, ancora meglio se con carta e penna: basterà semplicemente individuare le principali sezioni della home page o di una pagina tipo. Fatto questo, si potrà procedere alla decisione del layout da utilizzare, pensando a come si potrebbero disporre queste sezioni all'interno di un layout. A parere mio, ogni webdesigner dovrebbe seguire fin da subito una strategia di sviluppo per un sito table-less.
Una volta pianificati i contenuti, si penserà al layout da utilizzare, considerando che layout a due e tre colonne implicano differenti codifiche html a seconda che siano realizzate con i float o i posizionamenti assoluti. Fatto ciò si può procedere a scrivere l'html minimale senza contenuti testuali, ossia quello che definisce la struttura portante del sito. Questo file verrà salvato come modello, di modo da poter essere utilizzato per tutte le pagine del sito.
Successivamente si può procedere a scrivere la parte del foglio di stile relativa al layout. Infine resta solo da riempire le pagine con i contenuti e aggiungere le regole del foglio di stile necessarie. In questa parte la strategia da utilizzare è a discrezione del webdesigner: si potrà adottare una codifica parallela di html e css, oppure una codifica sequenziale (prima l'html, poi il css).
Bordi multipli con 'box-shadow' di CSS3Il modo più rapido e semplice per circondare un box con più bordi di... |
Sfumature lineari su IE6-9, linear-gradient CSS3 e un po' di SVGUtilizzare la funzione linear-gradient CSS per creare sfumature... |
Stili specifici per l'orientamento dell'iPad con le Media QueriesGestire con gli stili e le media queries le modalità di... |
Campo per la ricerca con i CSSDedicare la giusta attenzione al modulo per le ricerche, componente... |
Box model 'naturale' con border-boxDimenticare per sempre i problemi legati al box model grazie ad un... |
Guida CSS3Scoprire e usare al meglio tutte le novità dell'ultima versione dei... |
Guida CSS Tecniche essenzialiTesto, immagini, layout, form, liste, tabelle: soluzioni pronte per... |
Guida CSS di baseI CSS servono per gestire tutto il layout di un sito Web. E'... |
Ogni mercoledì, direttamente nella tua e-mail: guide, articoli, tutorial, FAQ e approfondimenti tecnici su CSS e Web Design.
Iscriviti alla newsletter
|
|
Corso Webmaster base18 Giugno 2012 a Milano |
|
|
Corso Google AdWords Base25 Giugno 2012 a Milano |
|
|
Corso Google AdWords Base05 Giugno 2012 a Roma |
|
|
Corso Webmaster base11 Giugno 2012 a Roma |