Come centrare un layout di pagina con margini CSS in Dreamweaver - dummies

Dreamweaver consente di centrare il layout utilizzando i margini CSS. Molti progetti di pagine Web sono centrati sulla pagina in modo che sembrino fluttuare tra i lati della finestra del browser, a prescindere da quanto ampia o stretta diventi la finestra. Ciò aiuta a creare l'illusione che il disegno riempia la pagina, anche se la finestra del browser è molto più ampia rispetto al design della pagina.

La maggior parte delle progettazioni di pagine Web create con CSS ottengono questo effetto creando un tag che circonda tutti i contenuti della pagina e quindi applicando uno stile a quel tag che include una regola di stile che centra quel tag. Come scopri nelle seguenti istruzioni dettagliate, creare uno stile per centrare un tag non è così ovvio come potresti immaginare, ma è facile da implementare.

È prassi comune utilizzare uno stile ID per il tag che centra il tuo progetto e nominarlo # wrapper o # container.

Se la tua pagina non è già impostata con un tag intorno a tutti i tuoi contenuti, ecco un consiglio per aggiungerne uno. Prima fai clic e trascina per selezionare tutto il testo, le immagini e altri contenuti nella pagina. Quindi selezionare Inserisci → Oggetti layout → Tag div. Nella finestra di dialogo Inserisci tag div, assicurarsi che l'opzione Wrap around selection sia selezionata dall'elenco a discesa Inserisci.

Lascia vuoto il resto dei campi e fai clic su OK per aggiungere un tag a tutto il contenuto della pagina e sei pronto per i passaggi successivi.

Per centrare il design di un'intera pagina, assicurati che un tag circonda tutti i contenuti della pagina e segui questi passaggi:

1. Fai clic sul segno più nel pannello Selettori CSS Designer.

   A seconda di ciò che è presente sulla pagina, un nuovo nome di stile o un campo vuoto in cui è possibile inserire un nome di stile viene aggiunto al pannello Selettori.

2. Fare doppio clic per selezionare il nome che Dreamweaver ha aggiunto al pannello e modificarlo con il nome desiderato per il nuovo stile, oppure fare clic per selezionare il campo vuoto e immettere un nome.

   Se non viene aggiunto alcun nome, inserire il nome desiderato nel campo vuoto. Puoi dare un nome allo stile tutto ciò che desideri, ma assicurati di inserire un punto prima del nome se crei uno stile di classe o un segno # per uno stile ID.

3. Nel pannello Proprietà, specificare larghezza, margini e qualsiasi altra impostazione di formattazione che si desidera definire.

   La larghezza per il tag contenitore è impostata su 980 pixel. Ecco il trucco per centrare un tag come questo: Imposta i margini sinistro e destro su Auto. In questo modo, un browser aggiunge automaticamente una quantità uguale di spazio marginale a ciascun lato del tag, centrandolo efficacemente sulla pagina.

   

4. Seleziona l'ID che circonda tutto il contenuto della pagina.

   Per assicurarti di aver selezionato il tag giusto, fai clic per posizionare il cursore ovunque nella parte principale della pagina, quindi fai clic sul tag elencato all'estrema sinistra nel selettore di tag rapido nella parte inferiore dell'area di lavoro.

5. Con il tag selezionato, selezionare il nome dello stile creato dall'elenco a discesa ID nella finestra di ispezione Proprietà.

   Le regole di stile che hai definito quando hai creato lo stile vengono automaticamente applicate al tag. In questo esempio, il risultato è che la dimensione del tag è stata modificata in 980 pixel e il tag e tutti i suoi contenuti sono centrati sulla pagina.

Non tutte le funzioni funzionano quando Dreamweaver è impostato su Live view. Sebbene la visualizzazione live sia un ottimo modo per visualizzare in anteprima l'aspetto dei disegni di pagina nella maggior parte dei browser Web moderni, l'uso della funzione di visualizzazione live rende inutilizzabili molti degli strumenti di modifica di Dreamweaver. Se, ad esempio, la finestra di ispezione Proprietà appare inattiva quando si desidera utilizzarla, assicurarsi che il pulsante Live sia deselezionato.