(livello: Dreamweaver intermedio - CSS Buono)

Occorrente: Dreamweaver 8, anche in versione di prova, già configurato con un sito di lavoro.

• Apriamo Dreamweaver e creiamo un nuovo documento (pagina Base HTML) nel nostro sito di lavoro
• Iniziamo a scrivere  il codice che ci servirà per l’esercizio: diamo il comando inserisci layout -> tag DIV (insert ->Layout ->Div Tag) e immettiamo il nostro primo blocco DIV. Nella maschera scriviamo l’ID del nostro Tag: barranav. Questo sarà il contenitore principale della nostra barra di navigazione.
• Dreamweaver ci mette automaticamente il segnaposto per il contenuto del nostro blocco, scriviamo la prima label della nostra barra (“home”) poi diamo il tasto invio. Automaticamente viene creato un paragrafo. Scriviamo le label successive (nel mio esempio, "primo", “secondo”, “terzo” e “ultimo”
• Trasformiamo i paragrafi realizzati in una bella lista HTML non numerata: selezioniamo tutte le quattro righe e dal pannello proprietà in basso clicchiamo sull’icona lista non numerata.
• Impostiamo gli elementi della lista come link. Utilizzeremo la scrittura corretta HTML di un link a se stesso utilizzando pro-forma il carattere # (number o cancelletto). Ovviamente quando personalizzeremo il menù o lo utilizzeremo in un vero sito dovremo settare ogni singolo link correttamente. Proseguiamo, dunque, evidenziando, in vista design, ogni singola label (doppio click del mouse su home, per esempio) e inserendo nella maschera delle proprietà, in basso, nella maschera Link, il carattere #. Confermiamo con invio.Al termine avremo il codice e la vista design come indicato a seguire.
  


• codice ottenuto:

  <div id="barranav">
  <ul>
  <li><a href="#">home</a></li>
  <li><a href="#" >primo</a></li>
  <li><a href="#" >secondo</a></li>
  <li><a href="#" >terzo</a></li>
  <li><a href="#">ultimo</a></li>
  </ul>
  </div>

• nella visualizzazione design
  • home
  • primo
  • secondo
  • terzo
  • ultimo

  
  
• È il momento di salvare il nostro file: per non perdere le buone abitudini modifichiamo il titolo HTML del nostro documento (per esempio da modifica -> proprietà di pagina) e salviamo il file con il nome menuorizzontale.html nella cartella di lavoro.
• Iniziamo a scrivere il nostro codice CSS. Nella palette dei CSS premiamo in basso il tasto "Nuova Regola CSS" (new css rule) scegliamo il tipo di selettore avanzato e scriviamo nella maschera selettore (o modifichiamo quanto ci viene proposto): #barranav in questo modo verranno create le regole di comportamento del blocco che racchiude la barra di navigazione. Diamo anche "Definisci in un nuovo foglio esterno" per creare un foglio di stile esterno che conterrà le istruzioni per la nostra barra. Salviamo nella cartella di lavoro con il nome stile_barra_orizzontale.css .

segue