Come centrare pagine Web orizzontalmente in Dreamweaver CS4

March 5

Centrare una pagina Web in Dreamweaver coinvolge usando un div contenitore per contenere pagina, che ha una larghezza fissa assegnato. Impostando i margini destro e sinistro uguali, si crea un divario pari su entrambi i lati del div contenitore, che centra il pagina. Come non si conosce la larghezza del browser del visitatore, non è possibile impostare un valore fisso per i margini destro e sinistro, in quanto le necessarie modifiche di larghezza a seconda della larghezza del browser. Utilizzare la proprietà di auto-margine di Dreamweaver CS4 CSS per creare automaticamente i margini corretti e centrare la pagina.

istruzione

1 Avviare Dreamweaver CS4 e aprire una nuova pagina HTML.

2 Fai clic su "Inserisci" dal menu principale lungo la parte superiore dello schermo, quindi fare clic su "oggetti del formato" e "Tag Div." Ciò consente di inserire un div HTML che contiene il contenuto principale della pagina. Tipo "pagina" per l'ID nella finestra di dialogo che appare.

3 Fare clic 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 in alto a destra della finestra di dialogo, al fine di iniziare a inserire le proprietà CSS per centrare la pagina.

4 Clicca su "Box" nel menu "Categoria" sul lato sinistro della finestra delle proprietà CSS. Ciò consente di modificare le dimensioni e margini per il div "pagina". Digitare "960" nella casella "Larghezza" e assicurarsi che "px" viene selezionato dal menu a discesa unità. Questo imposta la larghezza della pagina a 960 pixel.

5 Deselezionare la casella "Stesso tutto per" casella di controllo nella zona "Margine", quindi selezionare "auto" dal menu a discesa per i margini destro e sinistro. Impostare il margine sinistro e destro su "auto" fornisce una distanza uguale per l'margini sinistro e destro, che viene calcolato dal browser al fine di garantire che la pagina è centrata. Fare clic sul pulsante "OK" per aggiungere gli stili alla pagina.

6 Fai clic su "OK" per chiudere la finestra di dialogo "tag Inserisci Div" e aggiungere il div alla pagina. Passare a "Design" vista in Dreamweaver per vedere che la pagina è centrata automaticamente e pronto per aggiungere contenuti all'interno della "pagina" div.

Consigli e avvertenze

  • Una volta che si è soddisfatti con la nuova pagina, trasformarlo in un modello da utilizzare come base per le pagine future.

Articoli Correlati