Il sistema di 960 griglia è un framework di layout di pagina Web comunemente utilizzata si basa su un 960 pixel vasta DIV contenitore diviso in 12 o 16 unità di colonna. Le larghezze di colonna e i margini vengono definiti utilizzando il codice CSS che divide uniformemente l'elemento DIV ampio contenitore 960 pixel. Combinando il 12 o 16 unità di colonna in una due o più colonne, è possibile creare un layout di sito Web che include un'area di contenuto principale e una o più barre laterali. Con poche righe di codice CSS, è possibile creare un layout di 960 griglia che può essere utilizzato più volte.

Istruzioni

1

Aprire il documento di pagina Web in un editor di testo o HTML. Per utilizzare l'editor di testo di Windows nativo, fare clic destro il documento, quindi fare clic su "Apri con". Fare clic per selezionare "Blocco note" o "WordPad" dall'elenco delle applicazioni, quindi fare clic su "OK".

2

Fare clic per posizionare il cursore tra le "< head >" e "< / head >" tag nella parte superiore del documento di pagina Web.

3

Tipo "< style type = ' text/css' >" creare CSS tag script di apertura.

4

Tipo ".wrapper {width: 960px;}" e premere "Invio" per definire la classe del contenitore DIV principale che conterrà la griglia 960.

5

Tipo "Column {margin: 10px 0 10px 0; float: left; } "per creare la classe predefinita per le colonne. Ogni unità di colonna nella griglia 960 ha un margine sinistro e destro di 10 pixel e viene spostato sul lato sinistro del contenitore DIV "wrapper".

6

Digitare "< / stile" > creare CSS script tag di chiusura.

7

Posizionare il cursore tra le "< body >" e "< body >" tag del documento della pagina Web.

8

Tipo "< div class = 'wrapper' >" e premere "Enter" per creare il contenitore DIV principale tag di apertura.

9

Dividere il contenitore 960 griglia mentalmente in 12 o 16 unità di colonne. Se dividere la griglia 960 in 12 unità di colonna, ogni unità è 60 pixel di larghezza. (60 pixel moltiplicata per colonna 12 unità, meno il 10 pixel a sinistra e destra margini per ciascuna colonna, pixel totali 960). Per un layout di colonna di 12 unità, le opzioni di larghezza di colonna pixel hai disponibili sono 940, 860, 780, 700, 620, 540, 460, 380, 300, 220, 140 e 60. Se dividere la griglia 960 in 16 unità di colonna, ogni unità è 40 pixel di larghezza. (40 pixel moltiplicata per colonna 16 unità, meno il 10 pixel a sinistra e a destra i margini per ciascuna colonna, pixel totali 960). Per un layout di colonna di 16 unità, le opzioni di larghezza di colonna pixel hai disponibili sono 940, 880, 820, 760, 700, 640, 580, 520, 460, 400, 340, 280, 220, 160, 100 e 40.

10

Inserire due o più contenitori DIV utilizzando la classe di colonna secondo la larghezza delle colonne nel passaggio precedente. La larghezza delle colonne deve aggiungere fino a 960 pixel, tra cui la larghezza del margine sinistro e destro di 10 pixel per ogni colonna. Per un esempio di un layout di colonna di 12 unità con due colonne, digitare "< div class = 'colonna' style = 'Larghezza: 700px;' >< / div >< div class = 'colonna' style = 'width: 200px;' >< / div > ". Per un esempio di un layout di colonna di 16 unità con tre colonne, digitare "< div class = 'colonna' style = 'width: 220px;' >< / div >< div class = 'colonna' style = 'Larghezza: 460px;' >< / div >< div class = 'colonna' style = 'width: 220px;' >< / div > ".

11

Tipo "< / div >" per creare il contenitore DIV principale tag di chiusura.

12

Fare clic sul menu "File", quindi fare clic su "Salva".