Dreamweaver+-+Barra+di+navigazione+verticale+con+i+CSS

=Costruiamo una barra di navigazione verticale con Dreamweaver:=

Dopo aver aperto una pagina HTML vuota in **Dreamweaver** nel nostro sito di prova, salviamo subito nella nostra cartella di lavoro con il nome barra_orizzontale.html e scriviamo il **codice HTML**: per farlo velocemente scriviamo il titolo e la lista non numerata come usando un normale elaboratore di testi. Cambiamo il primo paragrafo in h3. Selezionamo le voci di menù e applichiamo il //**link HTML "vuoto"**// scrivendo il carattere **#** ("cancelletto" o "number") nella casella link della barra proprietà.

Otteniamo in vista progettazione:

Barra di navigazione
 * Home
 * Novità
 * Prodotti
 * Servizi
 * Dove Siamo
 * Contatti

con il seguente codice

code CODICE HTML:

Barra di navigazione  Home Novità Prodotti Servizi</li> <a href="#">Dove Siamo</a></li> <a href="#">Contatti</a></li> </ul> code

selezioniamo tutto e racchiudiamo in un blocco div con l'**id "barranav"**. Per far ciò diamo il comando //**Inserisci -> Oggetti layout -> Blocco Div**// (in inglese //**Insert -> Layout Object -> Div Tag**//) e scriviamo **barranav** nella maschera **Id**. Ecco il nuovo codice HTML

code CODICE HTML:

Barra di navigazione <ul> <a href="#">Home</a></li> <a href="#">Novità</a></li> <a href="#">Prodotti</a></li> <a href="#">Servizi</a></li> <a href="#">Dove Siamo</a></li> <a href="#">Contatti</a></li> </ul>

code

Procediamo ora a scrivere il **codice CSS**, per semplicità andremo a scrivere uno stile intagrato nella nostra pagina. Lasciamo il selettore nella barra di navigazione e, dal pannello **Stili CSS (//CSS styles//)** diamo il comando nuova regola CSS (l'iconcina in basso a destra con il più e il nuovo foglio). Scegliamo la voce selettore Avanzato/Composto e scriviamo nella maschera

code div#barranav code

il nostro selettore CSS per cambiare le caratteristiche della barra.

Ora scegliamo l'opzione //**solo in questo documento /this document only**// per scrivere il nostro CSS integrato nella pagina. Dalle schede che seguono scegliamo le opzioni **sfondo/background** e settiamo un colore di sfondo nel mio esempio **#066**. Poi da **Elementi di Pagina /Box** settiamo la larghezza della nostra barra dalla proprietà //**width**//. Nel mio esempio ho messo //**width:180px.**//

Resettiamo i margini e i padding dando il comando **nuova regola CSS** e scrivendo il selettore //composto **#barranav h3,#barranav ul,#barranav li**// applicandovi le proprietà di **Elementi di Pagina /Box** //**margin:0px**// e //**padding:0px**//

Formattiamo il titolo della nosra barra con il selettore //**#barranav h3**//. Io ho centrato il titolo, cambiato il colore e il font, fissato l'alrezza a //**25px**// e l'altezza di linea (//**line-height**//) per centrare il testo in verticale.

Cambiamo poi il link nella lista (selettore //**#barranav ul li a**// o equivalente e più semplice //**#barranav a**//) è __importante__ qui dare la proprietà //**display:block**// in questo modo il link occuperà tutto il blocco e potremo cambiare il colore di sfondo del nostro elemento della barra.

L'ultimo selettore CSS da elaborare sarà la pseudoclasse //**#barranav ul a:hover**// (o l'equivalente semplificata //**#barranav a:hover**// ) dove metteremo le modifiche che vogliamo dare al roll-over (nel mio caso ho cambiato colore, sfondo e spostatoi l testo a destra cambiando il padding-sinistro)

Ecco il codice ottenuto (che troveremo in vista codice in DreamWeaver nel **head** dell'html all'interno del tag //**style**// (ho aggiunto dei commenti):

code CODICE CSS

div#barranav { width: 160px; font-size: 14px; }/*larghezza della barra di navigazione e dimensione carattere */

margin: 0px; padding: 0px; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; list-style-type: none; }/*reset padding e margin, eliminato il punto di elenco */
 * 1) barranav h3, #barranav ul, #barranav li {

text-align: center; color: #CCC; background-color: #063; font-size: 14px; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #999; line-height: 25px; height: 25px; }/*altezza del blocco, colore, sfondo e bordo inferiore punteggiato */
 * 1) barranav h3 {

color: #696; background-color: #033; display: block; border-bottom-width: 1px; border-bottom-style: dotted; border-bottom-color: #CCC; text-decoration: none; height: 25px; line-height: 25px; padding-left: 9px; }/* aspetto del link: importante! metto il display:block per occupare tuttoi l blocco, fisso colore, altezza, bordo inferiore */
 * 1) barranav ul li a {

color: #9F0; background-color: #036; padding-left: 20px; }/* setto il roll-over: cambio colore e sposto il testo al passaggio del mouse */ code
 * 1) barranav ul a:hover {

Ed ecco la barra risultante: