CSS modifica del layout in Adobe CS5 Dreamweaver - dummies

Abode Creative Suite 5 (Adobe CS5) Dreamweaver offre diversi modi per modificare il layout di una pagina Fogli di stile CSS. Un layout CSS è completamente controllato dalle regole del foglio di stile, quindi è possibile modificare l'aspetto della pagina direttamente dal pannello Stili CSS e dalla finestra di ispezione Proprietà.

Ogni colonna, riquadro e spazio sulla nuova pagina vengono posizionati e ridimensionati utilizzando le regole e le proprietà CSS, che è possibile regolare dalla finestra di ispezione Proprietà (nel pannello Stili CSS) o dal pannello Definizione regola CSS.

1. Se il pannello Stili CSS non è già aperto, scegli Finestra → Stili CSS per aprirlo.

2. Seleziona la scheda Tutto per visualizzare il foglio di stile e le sue regole.

   Il foglio di stile interno è mostrato come in alto. Fai clic sulla freccia alla sua sinistra per espanderla e mostrare tutte le regole che contiene. I layout che utilizzano un foglio di stile (esterno) allegato visualizzano il nome del foglio di stile (come gli stili.css) invece del tag.

3. Seleziona la regola del corpo.

   Questo stile basato su tag controlla la formattazione generale dell'intera pagina (tutto all'interno del tag).

4. Fare clic sul campo accanto alla regola dello sfondo per modificarlo; piuttosto che mantenere l'impostazione # 4E5869 (grigio medio), digitare un colore esadecimale (come # CC0000 per rosso) per cambiare il colore di sfondo della pagina.

5. Fare clic sul campione accanto alla regola dei colori per aprire il pannello Campioni; scegli un nuovo colore di tipo predefinito per il testo sulla tua pagina.

6. Nella parte superiore del pannello Stili CSS, selezionare un altro stile (ad esempio, lo stile.conContenuto dueColElstHdr) per visualizzarne le proprietà.

   Il. twoColHybLtHdr #container ID style controlla la dimensione e l'aspetto del contenitore di layout principale sulla pagina.

7. Nella finestra di ispezione Proprietà, modificare le proprietà per modificare l'aspetto dello stile.

   Ad esempio, è possibile modificare la larghezza della regola inserendo un nuovo numero nella casella di testo Regola di larghezza. Se inserisci 95% , ad esempio, ingrandisci l'intero layout.

Ogni colonna e sezione che comprende il layout è controllata da uno degli stili ID elencati nel pannello Stili CSS. La maggior parte degli stili di ID presenta una proprietà di larghezza che è possibile utilizzare per modificare le dimensioni delle diverse aree della pagina.

Continua a modificare i vari stili elencati nel pannello Stili CSS e osserva in che modo influiscono sui diversi elementi della pagina. Prova a cambiare il tipo di colore, la famiglia di caratteri e altre proprietà, come il riempimento e il colore di sfondo.

Per capire esattamente quale ID controlla quale colonna o sezione, fare clic all'interno dell'area della pagina e guardare il selettore di tag nella parte inferiore della finestra del documento.L'ultimo tag alla fine della catena mostra il contenitore in cui ti trovi e il suo ID corrispondente nel pannello Stili CSS (ad esempio,).