Come modificare gli stili in un layout CSS in Dreamweaver - dummies

Dopo aver creato una nuova pagina con un layout CSS in Dreamweaver, hai un numero apparentemente infinito di opzioni per modificarlo, ma prima devi determinare quali stili nel foglio di stile corrispondono agli elementi che vuoi modificare.

Come puoi immaginare, puoi modificare gli stili in un layout CSS in molti modi per creare i tuoi disegni.

Dopo aver regolato gli stili esistenti per ottenere il design di base della pagina nel modo desiderato, puoi creare tutti gli stili aggiuntivi che desideri.

Come verificare gli stili disponibili e apportare modifiche di base

È possibile utilizzare le stesse istruzioni di base con qualsiasi layout CSS incluso in Dreamweaver. Per modificare gli stili in un layout CSS, seguire questi passaggi:

Aprire un file di paging basato su un layout CSS di Dreamweaver e scegliere Finestra → Stili CSS (o fare clic sulla scheda Progettazione CSS per espandere il pannello).

Il pannello Designer CSS si apre o si espande.
Fare clic per selezionare il nome del foglio di stile nel pannello Sorgenti nella parte superiore di CSS Designer.

Tutti gli stili associati alla nuova pagina sono elencati nel pannello Selettori.
Seleziona il nome di qualsiasi stile elencato nel pannello Selettori CSS Designer.

Le corrispondenti regole CSS definite per lo stile vengono visualizzate nel pannello Proprietà, nella parte inferiore del pannello Designer CSS. Fare clic sull'elenco di stili e rivedere le loro regole corrispondenti è un buon modo per ottenere una rapida panoramica del design e per vedere dove sono archiviate le varie opzioni di formattazione della pagina.

L'intestazione HTML5,. i tag nav e footer controllano le sezioni principali della pagina. Ad esempio, lo stile di intestazione include una regola che rende il colore di sfondo verde. Pertanto, per modificare il colore dell'area dell'intestazione nella parte superiore della pagina, si modifica l'impostazione del colore di sfondo nella regola dell'intestazione.

Come modificare le impostazioni a livello di pagina

Per modificare le impostazioni a livello di pagina, come il colore di sfondo della pagina o il carattere principale, le dimensioni e il colore del testo utilizzato nella pagina, attenersi alla seguente procedura:

Nel pannello Selettori designer CSS, selezionare lo stile denominato corpo.

Le proprietà definite nella regola di stile selezionata vengono visualizzate nel pannello Proprietà.
Fare clic sull'icona T nella parte superiore del pannello Proprietà e modificare o aggiungere il carattere desiderato e altre impostazioni di testo.

È possibile modificare il carattere, la dimensione, lo stile e il peso del carattere. Per cambiare lo spazio tra le righe di testo, modifica l'altezza della linea.
Scorri verso il basso fino all'area Sfondo del pannello Proprietà e usa il riquadro dei colori nel campo Colore sfondo per specificare un colore per l'intero sfondo della pagina.

In alternativa, è possibile immettere qualsiasi codice colore esadecimale nel campo Colore sfondo o utilizzare il contagocce per campionare qualsiasi colore. Per aggiungere un'immagine di sfondo, fare clic nel campo URL nella sezione Sfondo e quindi fare clic sul pulsante Sfoglia che appare e selezionare l'immagine che si desidera servire come sfondo. Usa le icone Sfondo-Ripeti per specificare come deve essere ripetuta l'immagine di sfondo sulla pagina.
Apporta qualsiasi altra modifica o aggiunta alla regola di stile.

Le modifiche alle regole di stile nel pannello Proprietà vengono automaticamente salvate e applicate al contenuto formattato con la regola.

Come personalizzare le aree di contenuto

Per modificare la larghezza o altre impostazioni delle aree del contenuto principale, che controllano la dimensione complessiva della pagina e l'intestazione, il piè di pagina e la barra laterale, segui questi passaggi:

Per cambiare la larghezza dell'intera area di progetto principale:
1. Fare clic su. stile contenitore nel pannello Selettori del pannello Designer CSS.
  
  Le proprietà del. la regola di stile del contenitore viene visualizzata nel pannello Proprietà, in cui è anche possibile modificare lo stile.
2. Modificare le dimensioni nel campo Larghezza o digitare un nuovo numero per la larghezza della pagina desiderata.
  
  La larghezza del design della pagina viene automaticamente modificata in base alla dimensione immessa. Quando si modifica la larghezza del. stile contenitore, si modifica la larghezza dell'intero disegno perché tutti i tag e altri elementi sono contenuti nel formato con. stile contenitore - e sono tutti impostati per espandersi per riempire il. contenitore.
Per modificare la dimensione dell'area di contenuto della pagina, selezionare lo stile chiamato. contenuto e specificare la dimensione e le altre opzioni desiderate nel pannello Proprietà.

Se si modifica la larghezza dell'area del contenuto in un layout che include una barra laterale, è necessario modificare anche la larghezza della barra laterale.
Per cambiare il colore di sfondo di qualsiasi stile sulla pagina, fare clic sul nome dello stile corrispondente e modificare le impostazioni nella sezione Sfondo del pannello Proprietà.

Ad esempio, nei layout CSS in Dreamweaver, la barra laterale è definita in uno stile chiamato. sidebar1. Pertanto, per cambiare il colore di sfondo, si farebbe clic. barra laterale1 nel pannello Selettori, selezionare la categoria Sfondo nel pannello Proprietà e selezionare il colore desiderato. Allo stesso modo, per modificare il colore di sfondo dell'intestazione, seleziona lo stile denominato intestazione nel pannello Selettori e utilizza il riquadro dei colori.
Per aggiungere un'immagine all'intestazione:
1. Selezionare l'immagine segnaposto con etichetta Inserisci logo e premere il tasto Canc o Backspace.
2. Scegli Inserisci → Immagine → Immagine e seleziona un'immagine usando la finestra di dialogo Seleziona origine immagine.
Sostituisci il testo e inserisci le immagini nella barra laterale e nelle aree del contenuto principale.

Puoi aggiungere o sostituire testo e inserire immagini in qualsiasi pagina creata da un layout CSS, proprio come faresti in qualsiasi altra pagina web.
Scegli File → Salva tutto per salvare la pagina e gli stili.