definire un sito con Dreamweaver

Ecco un piccolo riepilogo (flash) su come si definisce in sito con Dreamweaver 8 e come dare un titolo ad una pagina html.

menu di navigazione orizzontale

Per realizzare un menu di navigazione orizzontale utilizzando le liste occorre aggiungere al vostro foglio di stile un selettore che identifichi il menu (ad esempio #navmenu).

Per l’elemento ul (unordered list) presente nel menu bisogna aggiungere una regola CSS che rimuova il punto dalla lista e setti i margini a zero per l’intera lista.
#navmenu ul {margin: 0; padding: 0; list-style-type: none; list-style-image: none; }

Il passo successivo è quello di disporre orizzontalmente gli elementi delle lista (li-list item)
#navmenu li {display: inline; }

Ora non resta altro che passare al file HTLM:
<div id="navmenu">
<ul>
<li>home</li>
<li>programma</li>
<li>materiale didattico</li>
<li>esami</li>
</ul>
</div>

Ovviamente potete personalizzare ulteriormente il menu aggiungendo altre regole… ad esempio:
#navmenu li {
display: inline;
background-color: #CCCCCC;
padding: 3px;
}

Questo è il risultato:

Testo intorno all’immagine

…praticamente quello che succede in questo post!
Il primo passo è definire un selettore di tipo class a cui associamo un nome, ad esempio image_sx, ed attribuirgli un float a sinistra e un margine di 3 pixel (per distanziare l’immagine dal testo):
.image_sx {float: left; margin: 3px;}
Il secondo passo è associare all’immagine presente nel documento HTLM la classe creata:<img src="immagine.gif" alt="descrizione immagine" class="image_sx"/>
Ovviamente se desiderate posizionare l’immagine a destra basta cambiare il valore left con right
.image_dx {float: right; margin: 3px;}

Vi ricordo che la sintassi per definire un selettore CSS da usare come nome di una classe richiede l’uso di un “.” (punto) immediatamente prima di tale nome. Al contrario, la sintassi per la definizione di selettori di tipo id richiede l’uso di un “#” (cancelletto, sharp), al posto del “.” .

Per chi usa Dreamweaver
Inserite un’immagine all’interno del documento (inserisci > immagine).
Create una nuova regola CSS (testo>stili CSS> nuovo), controllate che il selettore CLASSE sia selezionato, attribuite il nome e fate click su ok.
Ora non vi resta che associare la classe all’immagine: selezionate l’immagine e dalla finestra CLASSE all’interno del box PROPRIETÀ scegliete la classe da associare.

Spero sia tutto chiaro…

Progetti su Google Map

Su questa mappa di Google Maps ho inserito le strade che avete scelto per il vostro progetto finale.
Al momento ci sono dodici 12 gruppi… anche se dal mio elenco cartaceo dovreste essere diciassette 17!
Invito quelli che non si ritrovano sulla mappa ad inviarmi una mail o a lascire un commento a questo post!

Ci si vede domani!

Aggiornamento: Ho appena ricevuto un alertbox di Jakob Nielsen in cui si suggerisce di scrivere online i numeri con i numeri in modo da aiutare gli utenti quando con gli occhi scannerizzano le pagine web… E se lo dice Jakob io obbedisco! Sperando di attirare la vostra attenzione…

Aggiornamento bis: ora ci siete quasi tutti on the map… mancano solo due gruppi che non hanno ancora deciso che strada prendere…

Libro di testo per i non corsisti

Il libro di testo per quest’anno accademico è
Web Usability 2.0 L’usabilità che conta
di Jakob Nielsen – Hoa Loranger, edito da Apogeo (capitoli 5 e 9 esclusi).