Progettazione multimediale Dreamweaver L’interfaccia Progettazione Multimediale – www.pinocappellano.it

Progettazione Multimediale – www.pinocappellano.it Obiettivi Cos’è Dreamweaver L’interfaccia di Dreamweaver Realizzare una pagina HTML Progettazione Multimediale – www.pinocappellano.it

Progettazione Multimediale – www.pinocappellano.it Cos’è Dreamweaver Dreamweaver è un software di editing HTML cosiddetto WYSIWYG (what you see is what you get = ciò che vedi è ciò che otterrai) Attraverso Dreamweaver si può realizzare una pagina Web senza mettere mano direttamente al codice HTML. Gli strumenti messi a disposizione da Dreamweaver permettono la realizzazione di un intero sito Web in modo efficace. Progettazione Multimediale – www.pinocappellano.it

Progettazione Multimediale – www.pinocappellano.it Cos’è Dreamweaver Dreamweaver è un prodotto della Macromedia che è stata totalmente acquisita da Adobe nel 2005. La versione che si utilizzerà è Dreamweaver MX. In Dreamweaver, premendo il tasto F1, si accede all’utilissima guida integrata. Un buona guida on-line è all’indirizzo: www.html.it/dreamweaver/ Progettazione Multimediale – www.pinocappellano.it

Progettazione Multimediale – www.pinocappellano.it Cos’è Dreamweaver Come in ogni programma vi sono differenti modi per operare e per ottenere identici risultati. Uno stesso comando, per esempio, può essere dato con un’opzione di menù principale, con un’opzione di menù contestuale o con una combinazione di tasti. E’ cura e interesse dell’utente sperimentare e trovare il modo più comodo e più consono alle proprie esigenze. Progettazione Multimediale – www.pinocappellano.it

L’interfaccia di Dreamweaver Dreamweaver è un programma pieno di menù, di strumenti e di pannelli con diverse utilità. Si possono distinguere cinque parti. Progettazione Multimediale – www.pinocappellano.it

L’interfaccia di Dreamweaver 1. La barra del menù principale Progettazione Multimediale – www.pinocappellano.it

L’interfaccia di Dreamweaver 2. Le barre degli strumenti Progettazione Multimediale – www.pinocappellano.it

L’interfaccia di Dreamweaver 3. Area Vista del Documento Progettazione Multimediale – www.pinocappellano.it

L’interfaccia di Dreamweaver 4. Il pannello delle Proprietà (e altri) Progettazione Multimediale – www.pinocappellano.it

L’interfaccia di Dreamweaver 5. Il gruppo di pannelli Progettazione Multimediale – www.pinocappellano.it

L’interfaccia di Dreamweaver Per iniziare è conveniente configurare l’interfaccia solo con i principali pannelli e le principali barre. Barra del Menù Principale Barra degli strumenti: Visualizza > Barre degli strumenti > Documento Visualizza > Barre degli strumenti > Standard NO: Finestra > Inserisci Area Vista del Documento Pannello delle Proprietà Pannelli Chiudere tutti i pannelli tranne: Sito > File del sito Finestra > Altri > Cronologia Progettazione Multimediale – www.pinocappellano.it

L’interfaccia di Dreamweaver La barra del menù principale Ogni voce del menù permette di gestire le barre e i pannelli e di svolgere, praticamente, tutte le operazioni. Progettazione Multimediale – www.pinocappellano.it

L’interfaccia di Dreamweaver La barra degli strumenti Standard Permette di svolgere operazioni sul file e sul documento: Nuovo documento Apri un documento esistente Salva (salva il documento aperto) Salva con nome (salva come nuovo file) Taglia (Ctrl-x) Copia (Ctrl-c) Incolla (Ctrl-v) Annulla-Ripristina ultima operazione Progettazione Multimediale – www.pinocappellano.it

L’interfaccia di Dreamweaver Anteprima nel browser (F12) Titolo del documento (quello posto all’interno del Tag <title> ) Solo Vista Struttura Vista Codice e Vista Struttura Solo Vista Codice La barra degli strumenti Documento Progettazione Multimediale – www.pinocappellano.it

L’interfaccia di Dreamweaver Area Vista del Documento Progettazione Multimediale – www.pinocappellano.it

L’interfaccia di Dreamweaver E’ sufficiente cliccare con il mouse su di un elemento, sia nella Vista Codice e sia nella Vista Struttura, che - automaticamente - il pannello delle Proprietà visualizza quelle che sono le specifiche proprietà con i relativi valori attribuiti di quell’elemento. Chiaramente, dette proprietà possono essere modificate. Il pannello delle Proprietà Progettazione Multimediale – www.pinocappellano.it

L’interfaccia di Dreamweaver Riproduce visivamente il file system del sito (sul proprio disco fisso) con le gerarchie di cartelle e file. Con un doppio-clic un file viene aperto in una nuova finestra. Si può effettuare qualsiasi operazione sul file (sposta, cancella, duplica…). In caso di spostamento di uno o più file Dreamweaver si occupa, automaticamente, di aggiornare il codice HTML dei link. Il pannello Files Progettazione Multimediale – www.pinocappellano.it

L’interfaccia di Dreamweaver Visualizza, in ordine, le operazioni effettuate. L’ultima operazione può essere annullata trascinando il cursore posto a sinistra. Non si può annullare un’operazione intermedia senza annullare anche quelle che la seguono. Il pannello Crolologia (History) Progettazione Multimediale – www.pinocappellano.it

L’interfaccia di Dreamweaver Il nome del file su cui si sta lavorando. Un asterisco posto accanto indica che il file ha subito modifiche e che “necessita” di essere salvato. In Dreamweaver si possono aprire più file. Quello su cui si lavora è quello che viene visualizzato; gli altri occupano finestre sottostanti (visualizzabili mediante clic del mouse) Progettazione Multimediale – www.pinocappellano.it

L’interfaccia di Dreamweaver Un utilissimo strumento di Dreamweaver è quello posto alla base dell’area Vista, nella cosiddetta Barra di Stato. Si tratta del selettore di Tag Esso indica, in linea gerarchica, tutti i Tag che sono utilizzati nel documento, a partire dall’elemento “in cui ci si trova”. Quelli più “a monte” sono, chiaramente, o <head> o <body>. Con un semplice clic su un selettore si evidenziano, sia nella vista Codice e sia nella vista Struttura tutto il codice e tutti gli elementi inclusi in un Tag. Progettazione Multimediale – www.pinocappellano.it

L’interfaccia di Dreamweaver Con un clic del tasto destro del mouse si apre un menù contestuale che contiene diverse opzioni. Il menù è differente a seconda del punto in cui si fa clic. Progettazione Multimediale – www.pinocappellano.it

Realizzare una pagina HTML Quando si apre Dreamweaver esso presenta un nuovo documento. Questo può essere utilizzato o può essere chiuso per aprirne un altro. Per aprire un file con estensione .htm (o .html): File > Apri Per aprire un documento presente nel pannello Files: doppio-clic-sn del mouse ( oppure clic-dx > menù contestuale > Apri ) Progettazione Multimediale – www.pinocappellano.it

Realizzare una pagina HTML Per utilizzare Dreamweaver per la realizzazione di un intero sito è necessario definirlo (Sito > Nuovo sito ) con l’indicazione: del nome (che serve per individuarlo all’interno del programma) e della posizione della cartella (che conterrà tutti i files) nel proprio disco fisso Altre operazioni saranno necessarie quando le stesse cartelle saranno caricate su un server (upload) per pubblicare il sito. Progettazione Multimediale – www.pinocappellano.it

Realizzare una pagina HTML Quando si crea una nuova pagina se ne definiscono le proprietà generali ( Elabora > Proprietà di pagina ) che non sono altro che proprietà del Tag <body>. Le principali: Si definisce il titolo ( <title> ) Lo sfondo (colore o immagine) I colori dei link: come appaiono (Link), quando sono stati visitati (Visited Links) e quando sono attivi (Active Links) Il colore del testo Progettazione Multimediale – www.pinocappellano.it