Come standard Web muovono in avanti, la creazione di disegni tableless è una competenza fondamentale per i Web designer che desiderano sfruttare appieno le potenzialità di Internet. disegni tableless consentono la separazione del contenuto e il layout, l'apertura di un nuovo mondo di possibilità. Gli utenti hanno un enorme controllo sulla propria esperienza di navigazione, se si sceglie di utilizzare i fogli di stile personalizzato. Gli sviluppatori web possono facilmente modificare il contenuto, e progettisti possono cambiare completamente un layout da una posizione comoda.

istruzione

1 Disegnare un quadro di come la pagina Web ha bisogno di guardare. CSS utilizza un approccio chiamato il box model, in cui gli elementi sono costituiti da scatole rettangolari con proprietà quali margini e padding. Disegnare ogni elemento come una scatola e calcolare le proprietà appropriate. Si prevede di utilizzare l'elemento div per formattare la maggior parte del layout di pagina. Dati Gruppo insieme in modo logico, notando dove ogni div andrà nella pagina. Assegnare un nome a ciascuna sezione e scrivere sulla parte appropriata del quadro.

2 Crea il tuo modello di sito web utilizzando XHTML. Assicurati di scrivere codice corretto che passa il test di validazione W3C. Il codice deve essere pulita e semplice. Aggiungere un attributo id per ciascuno dei vostri div, assegnando loro i nomi che corrispondono a quelli sopra l'immagine che avete disegnato. I suoi div possono essere in qualsiasi ordine, ma si potrebbe desiderare di metterli in ordine di importanza per l'ottimizzazione dei motori di ricerca. Creare un foglio di stile per posizionare gli elementi. È possibile gestire il posizionamento di un certo numero di modi. Il modo più semplice si chiama posizionamento assoluto. Aggiungere un "position: absolute;" dichiarazione per ciascun blocco selettore. Specificare l'esatto posizionamento di ogni elemento, usando affermazioni come "top: 50px;" o "di sinistra: 10px ;." Ecco un esempio di come per lo stile un div con il posizionamento assoluto:

LeftCol {

position: absolute;

top: 50px;

sinistra: 10px;

}

Un altro modo per posizionare div è di galleggiare. Un div galleggiava si sposta al lato specificato del suo contenitore. Ecco un esempio:

LeftCol {

float: left;

}

rightcol {

float: right;

}

3 Testare il layout per assicurarsi che visualizza correttamente in tutti i browser. Trovare un elenco dei browser Web più diffusi e testare il sito in diverse risoluzioni in ciascuno di essi. A giugno del 2010, alcuni dei browser più popolari sono Internet Explorer 6, Internet Explorer 7, Internet Explorer 8, Firefox, Safari, Opera e Chrome. Modifica il tuo CSS se si nota un errore di visualizzazione con qualsiasi browser. A volte è necessario essere creativi con il modo in cui si scrive il codice. Ripetere il processo di testare e ottimizzare il codice fino a quando non viene visualizzato correttamente in ogni browser.