i fogli di stile a cascata (CSS) consentono di creare un layout per i vostri siti web senza l'utilizzo di tabelle. Le tabelle sono ancora utilizzati in alcuni layout web, ma il CSS di progettazione "div" è preferito. Il tag div sostituisce le righe e le colonne in una tabella, e le etichette sono semplici da creare nel layout HTML. È possibile creare cinque colonne CSS utilizzando questi tag div, che forniscono un design segmentato per le pagine web. Creazione di un layout CSS per il vostro sito web richiede solo poche righe di codice.

istruzione

1 Aprire il file HTML in qualsiasi editor. HTML viene modificato in formato testo, in modo un editor semplice come Notepad permette di creare una pagina web CSS.

2 Crea il tuo tag div. Ogni tag div si crea rappresenta una colonna nella tua pagina. Dal momento che l'obiettivo è quello di fare cinque colonne, avete bisogno di cinque tag div:

<Div id = "Colonna1"> </ div>
<Div id = "Column2"> </ div>
<Div id = "column3"> </ div>
<Div id = "column4"> </ div>
<Div id = "Column5"> </ div>

3 Creare il "wrapper". Div L'involucro contiene ciascuna delle colonne sulla vostra pagina. Il codice seguente avvolge le colonne in un div principale:

<Div id = "wrapper">
<Div id = "Colonna1"> </ div>
<Div id = "Column2"> </ div>
<Div id = "column3"> </ div>
<Div id = "column4"> </ div>
<Div id = "Column5"> </ div>
</ Div>

4 Mettere alcuni contenuti nelle colonne CSS. È alla fine di inserire immagini e contenuti nelle vostre colonne, ma questo permette di testare il layout di colonna e visualizzare nel browser:

<Div id = "wrapper">
<Div id = "column1"> Colonna 1 </ div>
<Div id = "Column2"> Colonna 2 </ div>
<Div id = "column3"> colonna 3 </ div>
<Div id = "column4"> colonna 4 </ div>
<Div id = "Column5"> colonna 5 </ div>
</ Div>

5 Salvare il file HTML e aprirlo nel browser web. Vedi il tuo nuovo layout HTML per testare il codice.