V.1 Progettazione Multimediale – 1 Progettazione multimediale Linterfaccia.

Progettazione Multimediale – www.pinocappellano.it

1v.1

Progettazione multimedialeProgettazione multimediale

L’interfaccia


2v.1

ObiettiviObiettivi

Cos’è Dreamweaver

L’interfaccia di Dreamweaver

Realizzare una pagina HTML


3v.1

Cos’è DreamweaverCos’è 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.


4v.1


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/


5v.1


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.


6v.1

L’interfaccia di DreamweaverL’interfaccia di Dreamweaver

Dreamweaver è un programma pieno di menù, di strumenti e di pannelli con diverse utilità.

Si possono distinguere cinque parti.


7v.1


1. La barra del menù principale


8v.1


2. Le barre degli strumenti


9v.1


3. Area Vista del Documento


10v.1


4. Il pannello delle Proprietà (e altri)


11v.1


5. Il gruppo di pannelli


12v.1


Per iniziare è conveniente configurare l’interfaccia solo con i principali pannelli e le principali barre.

1. Barra del Menù Principale2. Barra degli strumenti:

• Visualizza > Barre degli strumenti > Documento• Visualizza > Barre degli strumenti > Standard• NO: Finestra > Inserisci

3. Area Vista del Documento4. Pannello delle Proprietà5. Pannelli

• Chiudere tutti i pannelli tranne:• Sito > File del sito• Finestra > Altri > Cronologia


13v.1


La barra del menù principale

Ogni voce del menù permette di gestire le barre e i pannelli e di svolgere, praticamente, tutte le operazioni.


14v.1


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


15v.1

• 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


16v.1


Area Vista del Documento


17v.1


Il pannello delle Proprietà

• 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.


18v.1


Il pannello Files

• 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.


19v.1


Il pannello Crolologia (History)

• 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.


20v.1


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)


21v.1


Un utilissimo strumento di Dreamweaver è quello posto alla base dell’area Vista, nella cosiddetta Barra di Stato.

Si tratta del selettore di TagEsso 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.


22v.1


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.


23v.1

Realizzare una pagina HTMLRealizzare 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 )


24v.1


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.


25v.1


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

V.1 Progettazione Multimediale – 1 Progettazione multimediale Linterfaccia.

Documents

Transcript of V.1 Progettazione Multimediale – 1 Progettazione multimediale Linterfaccia.