La presentazione è in caricamento. Aspetta per favore

La presentazione è in caricamento. Aspetta per favore

V.1 Progettazione Multimediale – www.pinocappellano.it 1 Progettazione multimediale Linterfaccia.

Presentazioni simili


Presentazione sul tema: "V.1 Progettazione Multimediale – www.pinocappellano.it 1 Progettazione multimediale Linterfaccia."— Transcript della presentazione:

1 v.1 Progettazione Multimediale – 1 Progettazione multimediale Linterfaccia

2 v.1 Progettazione Multimediale – 2 Obiettivi Cosè Dreamweaver Linterfaccia di Dreamweaver Realizzare una pagina HTML

3 v.1 Progettazione Multimediale – 3 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.

4 v.1 Progettazione Multimediale – 4 Cosè Dreamweaver Dreamweaver è un prodotto della Macromedia che è stata totalmente acquisita da Adobe nel La versione che si utilizzerà è Dreamweaver MX. In Dreamweaver, premendo il tasto F1, si accede allutilissima guida integrata. Un buona guida on-line è allindirizzo:

5 v.1 Progettazione Multimediale – 5 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 unopzione di menù principale, con unopzione di menù contestuale o con una combinazione di tasti. E cura e interesse dellutente sperimentare e trovare il modo più comodo e più consono alle proprie esigenze.

6 v.1 Progettazione Multimediale – 6 Linterfaccia di Dreamweaver Dreamweaver è un programma pieno di menù, di strumenti e di pannelli con diverse utilità. Si possono distinguere cinque parti.

7 v.1 Progettazione Multimediale – 7 Linterfaccia di Dreamweaver 1. La barra del menù principale

8 v.1 Progettazione Multimediale – 8 Linterfaccia di Dreamweaver 2. Le barre degli strumenti

9 v.1 Progettazione Multimediale – 9 Linterfaccia di Dreamweaver 3. Area Vista del Documento

10 v.1 Progettazione Multimediale – 10 Linterfaccia di Dreamweaver 4. Il pannello delle Proprietà (e altri)

11 v.1 Progettazione Multimediale – 11 Linterfaccia di Dreamweaver 5. Il gruppo di pannelli

12 v.1 Progettazione Multimediale – 12 Linterfaccia di Dreamweaver Per iniziare è conveniente configurare linterfaccia solo con i principali pannelli e le principali barre. 1. Barra del Menù Principale 2. Barra degli strumenti: Visualizza > Barre degli strumenti > Documento Visualizza > Barre degli strumenti > Standard NO: Finestra > Inserisci 3. Area Vista del Documento 4. Pannello delle Proprietà 5. Pannelli Chiudere tutti i pannelli tranne: Sito > File del sito Finestra > Altri > Cronologia

13 v.1 Progettazione Multimediale – 13 Linterfaccia 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.

14 v.1 Progettazione Multimediale – 14 Linterfaccia 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

15 v.1 Progettazione Multimediale – 15 Anteprima nel browser (F12) Titolo del documento (quello posto allinterno del Tag ) Solo Vista Struttura Vista Codice e Vista Struttura Solo Vista Codice Linterfaccia di Dreamweaver La barra degli strumenti Documento

16 v.1 Progettazione Multimediale – 16 Linterfaccia di Dreamweaver Area Vista del Documento

17 v.1 Progettazione Multimediale – 17 Linterfaccia 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 quellelemento. Chiaramente, dette proprietà possono essere modificate.

18 v.1 Progettazione Multimediale – 18 Linterfaccia 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.

19 v.1 Progettazione Multimediale – 19 Linterfaccia di Dreamweaver Il pannello Crolologia (History) Visualizza, in ordine, le operazioni effettuate. Lultima operazione può essere annullata trascinando il cursore posto a sinistra. Non si può annullare unoperazione intermedia senza annullare anche quelle che la seguono.

20 v.1 Progettazione Multimediale – 20 Linterfaccia 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)

21 v.1 Progettazione Multimediale – 21 Linterfaccia di Dreamweaver Un utilissimo strumento di Dreamweaver è quello posto alla base dellarea 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 dallelemento in cui ci si trova. Quelli più a monte sono, chiaramente, o o. 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.

22 v.1 Progettazione Multimediale – 22 Linterfaccia 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.

23 v.1 Progettazione Multimediale – 23 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 )

24 v.1 Progettazione Multimediale – 24 Realizzare una pagina HTML Per utilizzare Dreamweaver per la realizzazione di un intero sito è necessario definirlo (Sito > Nuovo sito ) con lindicazione: del nome (che serve per individuarlo allinterno 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.

25 v.1 Progettazione Multimediale – 25 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. Le principali: Si definisce il titolo ( ) 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


Scaricare ppt "V.1 Progettazione Multimediale – www.pinocappellano.it 1 Progettazione multimediale Linterfaccia."

Presentazioni simili


Annunci Google