December 10
Alla fine del 1990, utilizzando le tabelle per creare un layout sito web è stato popolare perché era l'unica opzione reale. Tuttavia, è stato anche un hack problematico: le tabelle HTML non sono mai stati pensati per creare layout di pagina con, e, di conseguenza, il codice ottenuto inutilmente complicate molto rapidamente. Oggi, c'è un modo migliore, e una volta a ottenere il blocco di esso, scoprirete che è molto più semplice e più intuitivo.
Utilizzando un layout di tabella, il codice per il layout semplice nella foto sarebbe simile a questa:
<Table border = "1">
<Tr>
<Td colspan = "2"> Intestazione </ td>
</ Tr>
<Tr>
<Td width = "65%"> Content </ td>
<Td width = "35%"> Sidebar </ td>
</ Tr>
<Tr>
<Td colspan = 2 "> Piè di pagina </ td>
</ Table>
Invece di rompere le pagine in righe e colonne, separare il contenuto semanticamente utilizzando <div> tag. Div sono sezioni semplicemente generiche che si può nome mediante l'attributo "id". Lo stesso layout di sopra utilizzando div sarebbe simile a questa:
<Div id = "header"> Intestazione </ div>
<Div id = "content"> Content </ div>
<Div id = "sidebar"> Sidebar </ div>
<Div id = "footer"> Piè di pagina </ div>
Per organizzare i vostri div in modo da guardare a destra, è necessario aggiungere un foglio di stile alle vostre pagine HTML. Un foglio di stile è un elenco di regole che descrivono lo stile e il layout delle pagine. I fogli di stile vanno nella sezione <head> delle tue pagine e sono racchiusi con i tag <style> in questo modo:
<Head>
<Title> Titolo della pagina </ title>
<Style type = "text / css">
... Foglio di stile va qui ...
</ Style>
</ Head>
I fogli di stile utilizzare un certo numero di regole diverse, scritto con il semplice linguaggio CSS, per controllare l'aspetto delle vostre pagine. Andremo in regola "galleggiare" in basso, ma per saperne di più, controllare un tutorial CSS (vedi Risorse per il link).
Dal momento che hai già "nominato" ciascuno dei tuoi div, creando regole nel foglio di stile che dettare come saranno utilizzati ciascuno di essi non è difficile. La chiave per la creazione di layout con i fogli di stile è la regola "galleggiare". Inserire il seguente tra i due tag di stile:
div # body {
width: 65%;
float: left;
}
div # sidebar {
width: 35%;
float: right;
}
La regola galleggiante è un po 'un concetto difficile, in modo che aiuta a sperimentare un po'. L'idea di base è che div siano "elementi block-level", che significa che normalmente, nessun altro elemento è permesso di apparire alla loro destra o sinistra. Tuttavia, quando si dichiara "float: left" per un div, stai dicendo che gli altri elementi sono autorizzati a comparire alla destra di esso, e viceversa. Così, mentre il div "header" e "footer" soggiorno div sulla propria linea, il "corpo" e "div barra laterale" sono improvvisamente in grado di apparire uno accanto all'altro.
È possibile anche div annidare dentro l'altro per ottenere così complicato un layout di cui hai bisogno. Ad esempio, supponiamo che il tuo div "content" ha avuto altri due div al suo interno:
<Div id = "content">
<Div> </ div>
<Div> </ div>
</ Div>
Utilizzando il foglio di stile sopra, il div "content" sarebbe ancora appare alla sinistra del div "barra laterale" come prima. Ma ora avete altri due div all'interno del div "content", che, per impostazione predefinita, saranno impilati uno sopra l'altro.