Centratura di una pagina Web in Dreamweaver comporta l'uso di un div contenitore per contenere la pagina, che ha una larghezza fissa assegnata. Di impostare i margini sinistro e destro uguale, si crea un divario uguale su entrambi i lati del div contenitore, che centra la pagina. Come non si conosce la larghezza del browser del visitatore, non è possibile impostare un valore fisso per i margini sinistro e destro, al variare della larghezza necessaria a seconda della larghezza del browser. Utilizzare la proprietà di auto-margine di Dreamweaver CS4 CSS per creare i margini corretti e centrare la pagina automaticamente.

Istruzioni

1

Avviare Dreamweaver CS4 e aprire una nuova pagina HTML.

2

Fare clic su "Inserisci" dal menu principale nella parte superiore dello schermo, quindi fare clic su "Oggetti" e "Div Tag." Questo consente di inserire un elemento div HTML che contiene il contenuto principale della pagina. Digitare "pagina" per l'ID nella finestra di dialogo che appare.

3

Clicca sul pulsante "Nuova regola CSS" sotto il campo ID nella finestra di dialogo. Il selettore "#page" viene immesso automaticamente per voi. Fare clic sul pulsante "OK" nell'angolo superiore destro della finestra di dialogo al fine di iniziare a immettere le proprietà CSS per centrare la pagina.

4

Fare clic su "Box" nel menu "Categoria" sul lato sinistro della finestra di proprietà CSS. Questo consente di modificare le dimensioni e i margini per la "pagina" div. tipo "960" nella casella "Larghezza" e assicurarsi che sia selezionato "px" dal menu a discesa unità. Questo imposta la larghezza della pagina a 960 pixel.

5

Deselezionare la casella di controllo "Uguale per tutti" nell'area di "Margine", quindi selezionare "auto" dai menu a discesa per i margini sinistro e destro. Impostazione del margine sinistro e destro su "auto" fornisce una distanza uguale per i margini sinistro e destro, che viene calcolata dal browser per assicurarsi che la pagina viene centrata. Fare clic sul pulsante "OK" per aggiungere gli stili alla pagina.

6

Fare clic su "OK" per chiudere la finestra di dialogo "Inserisci Div tag" e aggiungere il tag div nella pagina. Passare alla visualizzazione di "Progettazione" in Dreamweaver per vedere che la pagina viene automaticamente centrato ed è pronta per aggiungere contenuto all'interno del div "pagina".

Consigli & Avvertenze

• Una volta che sei felice con la tua nuova pagina, è possibile trasformarlo in un modello da utilizzare come base per le pagine di future.