October 1
Creazione di un layout funzionale per il vostro sito web senza l'utilizzo di tabelle di solito è fatto con i fogli di stile a cascata (o CSS), l'elemento "div" di HTML, e lo stile speciale "galleggiare". Dopo una certa pratica, scoprirete presto che la creazione di schemi in questa maniera, non importa quanto sia complicato, è molto più flessibile e versatile rispetto all'utilizzo di tabelle.
1 Creare il quadro per un documento HTML che si compone di una sezione "testa", in cui il vostro foglio di stile andrà, e una sezione di "corpo", in cui la struttura della pagina andrà. Esso dovrebbe essere simile a questo:
<Html>
<Head>
<Title> Il mio 5-Layout colonne </ title>
<Style type = "text / css">
<! - Foglio di stile va qui ->
</ Style>
</ Head>
<Body>
<! - Struttura della pagina va qui ->
</ Body>
</ Html>
2 Aggiungere una serie di elementi "div" all'interno della sezione del corpo. Ogni "div" rappresenterà una diversa sezione della pagina. Questa pagina sarà composto da una sezione di intestazione, cinque colonne al centro, ed una sezione piè.
<Div id = "header"> </ div>
<Div class = "colonna"> </ div>
<Div class = "colonna"> </ div>
<Div class = "colonna"> </ div>
<Div class = "colonna"> </ div>
<Div class = "colonna"> </ div>
<Div id = "footer"> </ div>
Usiamo l'attributo "id" per etichettare l'intestazione e piè di pagina, perché gli ID possono essere utilizzati quando vi è una sola istanza del elemento della pagina. C'è più di una colonna, quindi per quegli elementi che usiamo l'attributo "class". Così ora abbiamo diviso la pagina in sette sezioni, ma finora non c'è layout.
3 Aggiungere le seguenti regole di stile tra i tag "stile" nella sezione "testa".
div {border: 1px nero solido; }
div.column {float: left; width: 200px; altezza: 400px; }
La prima linea darà ogni sezione "div" della pagina di un bordo di base in modo che sia più facile da individuare le modifiche che stai facendo.
La seconda linea darà ad ogni "div" che ha la "colonna" di classe una larghezza di 200 pixel, un'altezza di 400 pixel, e le istruzioni di galleggiare sinistra.
L'elemento "float" è la più confusa. Di solito, gli elementi "div" sono elementi a livello di blocco, nel senso che occupano un'intera linea in modo che nulla può apparire accanto a loro. A "div" che è flottato a sinistra, tuttavia, è un "div" che consente ad altri elementi visualizzate a destra di essa. Specificando "float: right;" sarebbe ottenere lo stesso effetto, salvo che gli elementi sarebbero autorizzati a galleggiare a fianco di esso.
Il risultato finale è che tutte le cinque colonne si allineano in fila, perché ognuno permette il prossimo ad apparire accanto ad esso.
4 Aggiungere la seguente riga sotto le due precedenti regole di stile:
div # footer {clear: both; }
Dal momento che tutte le colonne sono galleggiare a sinistra, per default la sezione "footer" sembrerebbe il diritto delle colonne. Utilizzando il "clear: both;" regola, appare il piè di pagina su una riga sotto le colonne facendo elementi che nessun galleggiavano appaiono accanto ad essa.
5 Personalizzare il layout in base alle proprie esigenze. Modificare le misure di larghezza e altezza e utilizzare il "margine" e "imbottitura" regole CSS troppo separano le colonne gli uni dagli altri e assicurarsi che il testo all'interno di ogni colonna non appare a filo con il bordo.
Se si desidera che le colonne di avere larghezze variabili, utilizzare l'attributo "id" per dare ogni colonna un nome individuale (come "colonna-2"), e poi aggiungere un'altra regola CSS nel foglio di stile:
div # column-2 {width: 500px; }
Infine, se si desidera che il layout di avere una larghezza complessiva specifica in modo che non si estende per l'intera lunghezza dello schermo del computer, racchiude tutte e sette le sezioni "div" in una confezione "div", e dare che una larghezza fissa "div" :
div # wrapper {width: 1000 px; margin: 0 auto; }
Il "margin: 0 auto;" regola centrare il layout dello schermo.