v.1 progettazione multimediale – 1 progettazione multimediale linterfaccia
Post on 02-May-2015
239 Views
Preview:
TRANSCRIPT
Progettazione Multimediale – www.pinocappellano.it
1v.1
Progettazione multimedialeProgettazione multimediale
L’interfaccia
Progettazione Multimediale – www.pinocappellano.it
2v.1
ObiettiviObiettivi
Cos’è Dreamweaver
L’interfaccia di Dreamweaver
Realizzare una pagina HTML
Progettazione Multimediale – www.pinocappellano.it
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.
Progettazione Multimediale – www.pinocappellano.it
4v.1
Cos’è DreamweaverCos’è 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
5v.1
Cos’è DreamweaverCos’è 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
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.
Progettazione Multimediale – www.pinocappellano.it
7v.1
L’interfaccia di DreamweaverL’interfaccia di Dreamweaver
1. La barra del menù principale
Progettazione Multimediale – www.pinocappellano.it
8v.1
L’interfaccia di DreamweaverL’interfaccia di Dreamweaver
2. Le barre degli strumenti
Progettazione Multimediale – www.pinocappellano.it
9v.1
L’interfaccia di DreamweaverL’interfaccia di Dreamweaver
3. Area Vista del Documento
Progettazione Multimediale – www.pinocappellano.it
10v.1
L’interfaccia di DreamweaverL’interfaccia di Dreamweaver
4. Il pannello delle Proprietà (e altri)
Progettazione Multimediale – www.pinocappellano.it
11v.1
L’interfaccia di DreamweaverL’interfaccia di Dreamweaver
5. Il gruppo di pannelli
Progettazione Multimediale – www.pinocappellano.it
12v.1
L’interfaccia di DreamweaverL’interfaccia di Dreamweaver
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
Progettazione Multimediale – www.pinocappellano.it
13v.1
L’interfaccia di DreamweaverL’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
14v.1
L’interfaccia di DreamweaverL’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
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
L’interfaccia di DreamweaverL’interfaccia di Dreamweaver
La barra degli strumenti Documento
Progettazione Multimediale – www.pinocappellano.it
16v.1
L’interfaccia di DreamweaverL’interfaccia di Dreamweaver
Area Vista del Documento
Progettazione Multimediale – www.pinocappellano.it
17v.1
L’interfaccia di DreamweaverL’interfaccia di Dreamweaver
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.
Progettazione Multimediale – www.pinocappellano.it
18v.1
L’interfaccia di DreamweaverL’interfaccia di Dreamweaver
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.
Progettazione Multimediale – www.pinocappellano.it
19v.1
L’interfaccia di DreamweaverL’interfaccia di Dreamweaver
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.
Progettazione Multimediale – www.pinocappellano.it
20v.1
L’interfaccia di DreamweaverL’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
21v.1
L’interfaccia di DreamweaverL’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 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.
Progettazione Multimediale – www.pinocappellano.it
22v.1
L’interfaccia di DreamweaverL’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
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 )
Progettazione Multimediale – www.pinocappellano.it
24v.1
Realizzare una pagina HTMLRealizzare 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
25v.1
Realizzare una pagina HTMLRealizzare 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
top related