didattico TITOLO Spunti di lavoro con Dreamwever MX Creare...

TITOLO

autore

!

K Tdidattico

che cos’è?

pieg

are

e in

colla

re

Per insegnanti / studenti

© Tutti i diritti riservati [email protected]

Creare un sito webSpunti di lavoro con Dreamwever MX

Alberto Pian

Didattica

In questo Kit proponiamo un metodo di lavoro alla portata di tutti gli insegnanti e gli studenti, per realizzare un sito Internet con Dreamweaver MX. Questo Kit è articolato in lezioni che guidano nei passi fondamentali per un primo approccio tecnicamente efficace.

INDICE CAPITOLI: 1. creare il sito 2. creare la home page 3. creare le pagine web 4. colleghiamo le pagine 5. ordine e bellezza 6. effetti speciali 7. semplificazioni 8. sul web NOTE: Totale pagine: 25. L’impaginazione è realizzata per essere stampata su carta A4; stampata su lucido per lavagne luminose; proiettata dal computer; inserita nel web. Si consiglia di piegare le schede lungo la linea e di plastificarle per garantire un uso senza usura.

cartelle delle sezioni

pagine indice delle sezioni

index.html

pagine contenute in ciascuna sezione

!

K Tdidattico

2

dr

ea

we

av

er

dr

ea

mw

ea

ve

r

© Tutti i diritti riservatiwww.didanext.com

Dreamweaver consente di impostare un sito com-pleto, di realizzarlo e di pubblicarlo in Internet.

1. creare il sito

gli strumenti...

Pagina Web (spazio per crearla)

Qui si sinseriscono i titoli, i testi, le immagini e tutti i contenuti che devono essere visualizzati sulla pagina Internet...Con la palette “Proprietà” (vedi qui sotto la pagina bianca), si controllano gli oggetti inseriti nella pagina: testi, immagini, e oggetti multimediali.Il riquadro a fianco visualizza la struttura del sito sul nostro hard disk (destra) e sul web (sinistra).A destra una serie di palette permette di controllare il lavoro offrendo diverse funzioni.

palette proprietà: serve per formattare il testo, creare collegamenti, lavorare con le immagini e le tabelle.

!

K Tdidattico

3

dr

ea

we

av

er

dr

ea

mw

ea

ve

r


1. CREARE IL SITO

la cartella del sito

La creazione del sito è automatica. Bisogna rispondere alle richieste che Dreamweaver propone nelle sue schermate di dialogo. Dal menu Sito scegliere Nuovo sito e quindi procedere utilizzando i pulsanti Indietro e Avanti. Le scelte da fare sono indicate nelle illustrazioni qui a fianco. Quando si giunge alla richiesta “Come effettuare la connessione con il server remoto”, indicare Nessuno. Apriremo alla fine una sessione FTP per caricare il sito in Internet.

!

K Tdidattico

4

dr

ea

we

av

er

dr

ea

mw

ea

ve

r


2. CREARE la home pageil frameset della pagina index.html

Un framset è una pagina speciale, un contenitore, suddiviso in più parti che si chiamano frame. Ciascuna di queste parti, può contenere una pagina web. Il framset è il contenitore, il frame è il contenuto. La prima pagina di un sito che viene visualizzata attraverso Internet si chiama index.hml, oppure home.html.

Creiamo un framset che abbia uno di questi nomi, e che sia diviso in due frame: nella parte superiore potremo inserire una barra di navigazione che conterrà dei collegamenti alle diverse sezioni del sito. Potremmo anche stabilire che queste pagine web delle sezioni, siano visualizzate nel frame posto al di sotto.

In questo modo ogni volta che si accede a una pagina la barra di navigazione resterà sempre al suo posto, in alto, mentre cambieranno le pagine sottostanti.

Dal menu File scegliere Nuovo: apparirà la finestra di dialogo qui sotto, dalla quale sceglie lʼopzione Set di frame.

Il framset

Il frame superiore

Il frame inferiore

!

K Tdidattico

5

dr

ea

we

av

er

dr

ea

mw

ea

ve

r


2. CREARE la home pageil frameset della pagina index.html

A questo punto Dreamweaver ha creato una frameset che, come si vede, è diviso in due parti. Salviamo il framset: dal menu File - Salva set di frame e gli diamo il nome index.html.

Adesso che abbiamo crato il nostro documento index.hml, inseriamo una barra di navigazione nel frame superiore. La barra di navigazione servirà per accedere alle diverse parti del sito.Nella parte inferiore (il frame in basso) scriviamo un messaggio di benvenuto e un testo che annuncia i nuovi documenti che saranno inseriti.In un secondo momento sostituiremo i semplici testi che abbiamo scritto nella barra di navigazione con dei pulsanti interattivi (pulsanti Flash).Ora dobbiamo salvare i singoli frame.

!

K Tdidattico

6

dr

ea

we

av

er

dr

ea

mw

ea

ve

r


2 CREARE la home pagesalvare i singoli frame

Collochiamo il mouse nel frame superiore e quindi dal menu File - Salva frame gli assegnamo il nome indexnavigazione.html

Ripetiamo le stesse operazioni per il frame sottostante. Collochiamo il mouse nel frame inferiore e poi dal menu File -Salva frame assegnamo il nome indexpagina.html

Che cosa è successo? Abbiamo creato tre documenti:

index.html (il frameset che funziona da home page del sito)

indexnavigazione.html (la pagina web che contiene la barra di navigazione e che verrà visualizzata nel frame superiore di index.html)

indexpagina.html (la prima vera e propria pagina del sito, che verrà visualizzata nel frame inferiore di index.html e che contiene le prime informazioni di benvenuto.

Possiamo vedere il risultato nella finesta Sito (dal menu Finestra - Sito).

!

K Tdidattico

7

dr

ea

we

av

er

dr

ea

mw

ea

ve

r


3 CREARE le pagine webspiegazione necessaria

Ora che abbiamo la nostra home page, come si dice nel gergo di Internet, cioè la pagina che verrà caricata dal programma di navigazione (Explorer, Netscape, Mozilla, Safari, Opera, ecc.), dobbiamo inserire nel sito le altre pagine. Anzi, dovremmo inserire le prime pagine di ciascuna sezione.

Queste pagine rimanderanno ai contenuti che aggiungeremo di volta in volta a ogni sezione.

Facciamo un esempio.

Poniamo di realizzare la pagina iniziale della sezione lezioni, che chiamiamo lezioniIndice.html. Questa prima pagina dovrà rimandare alle informazioni che riguardano questa sezione, cioè a tutti i documenti che della sezione “lezioni” in modo che chi si collegherà al sito le potrà visualizzare.

Così, ogni volta che scriveremo una lezione, la aggiungeremo come pagina web a se stante.

Immaginiamo di fare una lezione di fisica

quantistica e di chiamarla quanti.html: nella pagina indice della sezione lezioni (lezioniIndice.html), creeremo un collegamento a questa pagina quanti.html.

A mano a mano che aggiungeremo lezioni avremo anche diverse pagine web e quindi diversi collegamenti alla pagina indice.

Questo vale per tutte le sezioni del sito!

indexpagina.html

quanti.html

Galileo.html

altre sezioni...

lezioniIndice.html

!

K Tdidattico

8

dr

ea

we

av

er

dr

ea

mw

ea

ve

r


3 CREARE le pagine webcreiamo le pagine indice delle sezioni del sito

Benissimo, non ci resta che creare le pagine indice di ciascuna sezione del sito. Poi creremo le cartelle di ogni sezione che conterrà i documenti che, di volta in volta, saranno aggiunti. Le pagine indice, invece, le teniamo fuori dalle cartelle.

Dal menu File - Nuovo e quindi nella Categoria scegliamo: Pagina di base - HTML.

Ora svolgiamo le seguenti operazioni:

- inseriamo il nome della pagina nella casella del Titolo;

- scriviamo il titolo della pagina nella pagina stessa;

- scriviamo anche due parole di spiegazione; e una frase per rimandare il navigatore alla lezione dei quanti.

Quindi salviamo la pagina web con il nome: lezioniIndice.html.

Sezione Lezioni

Questa pagina contiene l’elenco delle lezioni disponibili sul sito.

La prima lezione che abbiamo a disposizione riguarda la fisica dei quanti. La vuoi vedere?

!

K Tdidattico

9

dr

ea

we

av

er

dr

ea

mw

ea

ve

r


3 CREARE le pagine webtutte le pagine

Ripetiamo le operazioni di creazione della pagina lezioniIndice.html, per tutte la pagine che devono svolgere il compito di fornire lʼindice di ciascuna sezione del nostro sito: presentazione.html, lezioni.html, verifiche.html, varie. html.

Ecco dunque la struttura del sito così come lʼabbiamo progettata.

cartelle delle sezioni


index.html

pagine contenute in ciascuna sezione

Possiamo verificare il nostro lavoro aprendo la finestra Sito dal menu Visualizza.

La finestra Sito è un indispensabile strumento di lavoro: lasciamola tranquillamente aperta sul nostro monitor! Da lì potremo aprire ogni pagina web facendo doppio clic sulla sua icona.

La finestra Sito.

Salviamo ogni pagina con il suo nome.

!

K Tdidattico

10

dr

ea

we

av

er

dr

ea

mw

ea

ve

r


4 colleghiamo le paginetracciamo i collegamenti da un testo

Ripetiamo le operazioni di creazione della pagina lezioniIndice.html, per le pagine indice di ciascuna sezione: presentazione.html, lezioni. html, verifiche.html, varie. html.

Ora dobbiamo collegare la pagina index.html a ciascuna pagina creata.


index.html

Si tratta di creare dei collegamenti ipertestuali. Creiamo il collegamento index:

- apriamo la pagina index.html facendo doppio clic nella finestra Sito (dal menu Visualizza)

- apriamo la palette delle Proprietà (dal menu Visalizza)

- selezioniamo il primo indice index:

Infine, dato che vogliamo che la pagina collegata compaia nel frame sottostante (il frame indexPagina), allora nella casella Dest (destinazione) selezioniamo mainFrame.

dalla palette delle Proprietà, tiriamo (letteralmente, vedi figura sotto), un collegamento fino allʼicona del documento index.html nella finestra Sito.

!

K Tdidattico

11

dr

ea

we

av

er

dr

ea

mw

ea

ve

r


4 colleghiamo le paginecreiamo i collegamenti da un testo e proviamoli!

Un altro modo per creare un collegamento è quello di agire sullʼicona della cartellina posta di fianco alla casella Collegam (collegamento) della palette Proprietà e quindi di utilizzare la finestra di dialogo che si apre.

Ricordarsi sempre la destinazione: mainFrame! (dalla palette Proprietà, agire sulle frecce della casella Dest).

Ora proviamo a vedere se ciò che abbiamo fatto funziona. In gergo si dice: proviamo l’anteprima. Se non lo abbiamo già fatto, apriamo index.html (dalla finestra Sito, dal menu Visualizza), e facciamo clic sullʼicona del mondo: il programma apre la pagina index.html nel navigatore predefinito (Explorer, Netscape, Safari, ecc.).

Ora possiamo vedere che cosa succede quando facciamo clic sulle parole calde della barra di navigazione: che nella parte sottostante compaiono le pagine che sono richiamate da ciascun collegamento!

!

K Tdidattico

12

dr

ea

we

av

er

dr

ea

mw

ea

ve

r


4 colleghiamo le paginecreare aree calde dalle immagini

Possiamo inserire immagini e creare aree calde (cioè collegamenti ipertestuali), al loro interno. Importiamo in una pagina web unʼimmagine: dal menu Inserisci- Immagine. Se lʼimmagine non si trova nella cartella del sito, Dreamweaver la copia automaticamente: questa è una funzione molto importante!

Ora selezioniamo lʼimmagine facendo clic con il mouse. Usiamo la palette Proprietà (dal menu Visualizza), se necessario allarghiamola agendo sulla freccetta a destra. Selezioniamo lo strumento rettangolo punto attivo (oppure: poligono, ovale) , e tracciamo un quadrato sullʼimmagine stessa.

Creiamo il collegamento con unʼaltra pagina web che abbiamo creato: movimentoQuanti.html Il collegamento si produce nel solito modo: lo tracciamo, oppure usiamo lʼicona cartellina nella palette Proprietà.

!

K Tdidattico

13

dr

ea

we

av

er

dr

ea

mw

ea

ve

r


4 colleghiamo le paginei collegamenti interni alla pagina

E se volessimo creare dei collegamenti all’interno di una stessa pagina? Niente di più semplice: basta creare delle ancore e stabilire dei collegamenti da un testo o dallʼarea calda dellʼimmagine, a una delle ancore create.

Aggiungiamo del testo a una pagina web: vogliamo modificare lʼarea calda dellʼimmagine per fare in modo che ci porti al testo sottostante “Il movimento”.

Per inserire un’ancora portiamo il mouse alla parola movimento.

Creiamo il collegamento all’ancora: selezioniamo lʼarea calda dellʼimmagine e poi agiamo nel solito modo: lo tracciamo, oppure usiamo lʼicona cartellina nella palette Proprietà. Lo stesso sistema funziona con i collegamenti dai testi (parole calde).

Dal menu Inserisci, scegliamo Inserisci ancoraggio con nome. Nella finestra di dialogo scriviamo il nome dellʼancora: movimento.

Il collegamento è stabilito dallʼarea calda dellʼimmagine allʼancora semplicemente tirando un filo. Ciò vale anche per i testi. I collegamenti interni si usano quando la pagina web contiene molto testo, o molte immagini.

!

K Tdidattico

14

dr

ea

we

av

er

dr

ea

mw

ea

ve

r


5. ordine e bellezzatesto in forma

Apriamo una pagina web e rendiamola bella. Cominciamo dal testo: usiamo la palette Proprietà dal menu Visualizza, per rendere più gradevoli i testi e i titoli. In questo caso Dreamweaver è molto simile a unʼapplicazione di videoscrittura.

Se si colloca il mouse allʼinterno di un paragrafo, questo può assumere delle caratteristichge spcifiche, per esempio relative alla grandezza del titolo.

Evidenziamo un testo con il mouse e stabiliamo la sua grandezza.

Inseriamo dei filetti tra i vari capitoli per separarli meglio: dal menu Inserisci - Filetto orizzontale.

Evidenziamo un testo con il mouse e creiamo degli elenchi puntati o numerati mettiamo al centro e di lato un paragrafo, assegnamo il grassetto o il corsivo..

Assegnamo dei colori al testo!

Si può operare una scelta, limitata, di font (non tutti i font vengono visualizzati sul Web!

La palette Proprietà ha tutti gli strumenti per formattare il testo!

La palette Proprietà

!

K Tdidattico

15

dr

ea

we

av

er

dr

ea

mw

ea

ve

r


5 ordine e bellezzaimmagini in forma

Apriamo una pagina web e lavoriamo sulle immagini. Selezioniamo lʼimmagine con il mouse e usiamo la palette Proprietà dal menu Visualizza. Una cornice intorno

allʼimmagine: si digita il numero per stabilrne la grandezza.

Le opzioni di allineamento delle immagini sono notevoli: per esempio le voci A sinistra o A destra, dispongono il testo intorno allʼimmagine. Però questi allineamenti sofisticati sono mal visualizzati dai browser. Meglio stare sul classico: al centro, in alto, in basso....

Per creare le aree calde (collegamenti).

La palette Proprietà ha tutti gli strumenti per lavorare con le immagini!

La palette Proprietà

Apre lʼapplicazione Fireworks per modificare lʼimmagine.

Dare un nome.

Ripristina le dimensioni originali dellʼimmagine.

Agendo sulle maniglie si può cambiare la dimensione e anche la forma dellʼimmagine.

Controllare le dimensioni.

!

K Tdidattico

16

dr

ea

we

av

er

dr

ea

mw

ea

ve

r


5 ordine e bellezzatabelle!

Le tabelle sono uno strumento molto importante. Non solo ci aiuta a mettere in ordine un testo, ma anche a tenere in ordine una intera pagina web. Impariamo che è meglio inserire tutta la pagina web (testo, immagini, filmati, ecc.) allʼinterno di una tabella che abbia dimensioni predefinite.

Abbiamo inserito tutti i testi della pagina lezioniIndice.html, compresi i titoli, le immagini e i collegamenti ipertestuali, allʼinterno di una tabella.

Nella finestra di dialogo inserire il numero di righe e di colonne e stabilire la larghezza in 750 pixel (che si adatta a uno schermo da 17”), per mostrare il bordo della tabella, inserire un numero nella casella bordo.

Per portare il titolo della pagina allʼinterno della tabella, selezioniamo con il mouse le celle della prima riga (vdi fig. in alto), e quindi dal menu Elabora scegliamo Tabella - Unisci celle. Quindi possiamo copiare e incollare (oppure scrivere), i titoli della pagina allʼinterno di questa cella.

Ricordiamo che possiamo unire le celle e lavorare sulla tabella, sempre utilizzando il menu Elabora - Tabella.

Per aggiungere o sopprimere righe o colonne della tabella, utilizziamo sempre il menu Elabora - Tabella - ...

Per allargare o diminuire lʼampiezza delle celle o della tabella, afferrare le colonne con il mouse e trascinarle, come nella fig. sotto.

!

K Tdidattico

17

dr

ea

we

av

er

dr

ea

mw

ea

ve

r


5 ordine e bellezzatabelle: la palette pro-prietà

La palette Proprietà (dal menu Visualizza), permette di controllare anche le tabelle.

Bisogna ricordarsi che per lavorare con le tabelle occorre selezionare con il mouse le celle e le colonne che si intende modificare, o collocarsi al loro interno.

Inoltre, dal menu Elabora - Tabella si possono effettuare numerose altre operazioni.

Per evidenziare il bordo della tabella e la sua dimensione (inserire un numero: 0 = nessun bordo).

Allieneamento della tabella nella pagina.

Pulsanti per lavorare sulla larghezza e sullʼaltezza delle celle della tabella.

La tabella vista da un browser (navigatore): si inseriscono anche le immagini e tutta la pagina web assume unʼaria più ordinata e pulita.

Stabiliamo la largezza a 750 pixel: così la pagina ha sempre questa dimensione adatta ai monitor in circolazione.

La distanza, in pixel, del testo dai bordi delle celle (MargCel) e delle celle fra di loro (SpazCel).

Si può inserire na immagine come sfondo, in tutta la tabella, oppure in una sua cella.

Assegnamo dei colori alle celle, alle colonne, a tutta la tabella, ai bordi... Bisogna sempre collocare il mouse sullʼelemento che si vuole colorare.

!

K Tdidattico

18

dr

ea

we

av

er

dr

ea

mw

ea

ve

r


6. effetti specialibarra di navigazione flash

Una bella barra di navigazione interattiva è sempre meglio di alcune parole ipertestuali. Dreamweaver permette di creare dei simpatici pulsanti utilizzando la tecnologia Macromedia Flash. Dal menu Inserisci - Immagini interattive - Pulsanti Flash oppure Testo Flash.

Creiamo il pulsante Flash per Index.

Nome del pulsante.

Font e grandezza.

Il pulsante attiva un collegamento a index.html che si apre in una pagina bianca e non in “mainFrame”, altrimenti tutta la pagina index.html si aprirebbe al suo stesso interno!Assegnare il nome al

pulsante.

Creiamo il testo Flash per Presentazione.

Scegliamo il colore di avvio e quello di pulsante attivo.

Il nome del pulsante che verrà mostrato.

Il pulsante attiva un collegamento a presentazioneIndice.html che si apre in “mainFrame”: così viene visualizzato nel frame sottostante.

Assegnare il nome al pulsante.

Il risultato finale: al posto del semplice testo della barra di navigazione (ricordate?), ora abbiamo dei pulsanti e dei testi colorati e interattivi!

!

K Tdidattico

19

dr

ea

we

av

er

dr

ea

mw

ea

ve

r


6. effetti specialibarra di navigazione con pulsanti rollower

Questo punto è una variante del precedente ed è anche molto più difficile da realizzare. Dreamweaver permette di creare una barra di navigazione interattiva in modo che tutti i pulsanti siano uniti fra loro e sianoi attivi quando il mouse ci passa sopra, li prema, torni su e poi esca dallʼarea del pulsante.

Però, per creare questa barra, occorre prima predisporre le immagini dei pulsanti, anzi, le immagini per ogni stato di ciascun pulsante.

In relazione al mouse ogni pulsante ha quattro stati: dentro, giù, su, fuori. In Dreawever si chiamano Immagine alzata, Immagine di rollower, Immagine abbassata, Immagine di rollower abbassata. Per ogniuno di questi stati, il pulsante cambia rapidamente la sua immagine producendo un effetto di animazione. Se per ogni pulsante ocorrono quattro immagini, dovremmo elaborare in tutto 20 immagini! Facciamo finta di averlo fatto, e vediamo come si crea questa barra!

Dal menu Inserisci - Barra di navigazione.

Aggiungi e rimuovi i pulsanti con i bottoni + e - Stabilisci

lʼordine di successione dei pulsanti.Stiamo

lavorando sul pulsante Lezioni.

Le diverse immagini assegnate al pulsante Lezioni.

Il collegamento interattivo del pulsante alla pagina lezioniIndice.html.

La pagina lezioniIndice.html si apre in mainFraime, nel frame sottostante la pagina idex.html.

Carica tutte le immagini in memoria così la loro esecuzione è rapida!

!

K Tdidattico

20

dr

ea

we

av

er

dr

ea

mw

ea

ve

r


6. effetti specialipulsanti rollower e fil-mati quickTime

Più semplice è inserire un pulsante rollower, cioè che cambia aspetto quando il mouse vi passa sopra. Qui servono solo due immagini: per lo stato di quiete e per il passaggio del mouse.

Dal menu Inserisci - Immagini interattive - Immagine di rollover.

Immagine relativa al passaggio del mouse.

Immagine dello stato di quiete.Stiamo

lavorando sul pulsante Lezioni.

Il collegamento interattivo del pulsante alla pagina lezioniIndice.html.

Carica le immagini in memoria così la loro esecuzione è rapida!

Esempio di immagine di rollower: stato di quiete e quando il mouse vi passa sopra.

Per inserire un filmato QuickTime basta selezionare dalla barra dei menu la voce Inserisci - Oggetto multimediale - Plugin. Dalla finestra di dialogo che si apre si sceglie il filmato. Dalla solita palette delle Proprietà (menu Visualizza), si possono controllare la dimensione del filmato e i suoi parametri (per esempio autoplay).

!

K Tdidattico

21

dr

ea

we

av

er

dr

ea

mw

ea

ve

r


6. effetti specialianimare un livello

Dreamweaver può impiegare in una pagina web dei livelli collocabili ovunque, all’interno dei quali si possono inserire testi, immagini, pulsanti, animazioni, ecc. I livelli possono essere utili per presentare in modo più “grafico” alcuni elementi, ma sono interessanti soprattutto quando si anima un livello. Per esempio quando si inserisce unʼimmagine al suo interno e si assegna un percorso al livello stesso, cosi da farlo muovere quando si apre la pagina web.

Dalla Palette Inserisci (menu Visalizza), oppure dal menu Inserisci - Livello, inseriamo un livello nella pagina web.Prendiamo il livello per la maniglia in alto a sinistra e sistemiamolo sulla nostra pagina, dove più ci piace.Quindi inseriamo al suo interno unʼimmagine (menu Inserisci - Immagine).E ora proviamo ad animare questo livello facendogli fare un percorso sulla pagina.

maniglia del livello

Dal menu Visualizza, aprire il pannello Linee temporali. Collocarsi su un frame e quindi dal menu Elabora scegliere Linea temporale - Registra percorso di livello.A questo punto prendere il livello per la sua maniglia e trascinarlo nella pagina fino al punto desiderato.Provare lʼanteprima per verificare lʼanimazione: il livello si muoverà lungo il percorso stabilito.

Frame (fotogramma).Esegui lʼanimazione allʼapertura della pagina web.

Esegui lʼanimazione in continuazione.

Tracciato dellʼanimazione.

Canali di animazione. Canale dei comportamenti (linea B).

!

K Tdidattico

22

dr

ea

we

av

er

dr

ea

mw

ea

ve

r


6. effetti specialianimazioni più complesse

Una linea temporale è formata da ben 32 canali, ognuno dei quali può contenere unʼanimazione! Si può utilizzare un canale per ciascun livello. Per aggiungere un livello a un canale di animazione, dalla barra dei menu scegliere Elabora - Linea temporale - Aggiungi oggetto alla linea temporale. Si possono anche utilizzare più canali temporali e più canali per ciascuna linea temporale. Per aggiungere una linea temporale basta scegliere dalla barra dei menu Elabora - Linea temporale - Aggiungi linea temporale, oppure utilizzare il menu Opzioni del pannello Linee temporali (che si apre dal solito menu Visualizza).

Inoltre, tramite i Comportamenti possiamo stabilire che, giunto a un certo frame, il livello esegua qualche azione stabilita: lanciare un suono, cambiare immagine, lanciare unʼaltra animazione, ecc.

Apriamo il pannello Comportamenti (dal menu Visualizza - Comportamenti) e fare clic su + per aggiungere un comportamento.Collochiamoci al fotogramma 5 nel canale dei comportamenti (linea B), della linea temporale e quindi facciamo clic su + dal pannello dei Comportamenti e scegliamo Imposta testo - Messaggio di popoup. Nella finestra scriviamo “Benvenuto nel sito!!).Ora andiamo al fotogramma 30 dal solito pannello dei Comportamenti, scegliamo Imposta testo - Imposta testo della barra di stato. Scriviamo “Avete fatto i compiti?”.Infine selezioniamo il fotogramma 60 e aggiungiamo il comportamento Imposta testo del frame: scriviamo un testo e vediamo con lʼanteprima, quante interazioni abbiamo costruito!

Pannello dei comportamenti

!

K Tdidattico

23

dr

ea

we

av

er

dr

ea

mw

ea

ve

r


7. semplificazionigli stili css

I fogli di stile (CSS) permettono di controllare lʼaspetto grafico delle pagine web in modo tale che se impostiamo dei fogli di stile e li associamo ai testi, ai titoli, ecc. questi assumono le caratteristiche previste nei fogli di stili.

Il tutto funziona un poʼ come negli stili di Word o di altri programmi di videoscrittura.

Bisogna creare un foglio di stile esterno, affinchè possa essere associato alle pagine web.

Scegliere dal menu Testo - Stili CSS - Nuovo stile CSS... e quindi determinare le impostazioni nella finestra di dialogo che si apre. Una volta che il foglio di stile è salvato, sarà rintracciabile nella cartella del sito con lʼestenzione .css.

Dunque sarà a disposizione di tutte le pagine alle quali lo si vorrà associare. Per associarlo a una pagina basta aprire la pagina web e scegliere dal menu Testo - Stili CSS - Associa foglio di stile...

I fogli di stile permettono una impaginazione molto accurata.

!

K Tdidattico

24

dr

ea

we

av

er

dr

ea

mw

ea

ve

r


7. semplificazionii modelli

Creiamo la pagina e poi associamo alle varie aree la caratteristica di essere modificabili (tranne, ovviamente, quelle che devono rimanere fisse come i marchi.

I modelli funzionano come delle pagine già impostate che si possono riutilizzare per creare nuove pagine web.

La prima cosa da fare è creare una pagina web standard con i titoli, le immagini, le tabelle, ecc. Quando la pagina ha raggiunto la perfezione desiderata, allora la possiamo salvare come modello, per essere riutilizzata da altre pagine del sito.

Prima però occorre indicare quali sono le aree modificabili allʼinterno del modello, altrimenti non si potranno inserire testi e immagini... Selezioniamo sulla pagina, una per volta, le aree modificabili (per esempio quella dei titoli di pagina, poi quella delle immagini e così via), e ogni volta scegliamo dalla barra dei menu Inserisci - Oggetti modelli - Area modificabile. Lʼarea verrà etichettata e considerata come modificabile.

Per salvare una pagina come modello scegliere dal menu File - Salva come modello.

Per associare un modello a una pagina, si sceglie dal menu File - Nuovo e quindi la sezione Modelli dalla finestra di dialogo.

!

K Tdidattico

25

dr

ea

we

av

er

dr

ea

mw

ea

ve

r


8. sul webcaricare il sito

Ora che abbiamo creato il sito occorre caricarlo sul web.

Per fare questo bisogna iscriversi a un provider, avere uno spazio sul server remoto del provider e avere dal provider stesso i dati necessari per completare la finestra di dialogo che si apre da Sito - Modifica siti..

Il sito si controlla dalla finestra Sito dal menu Visalizza. Basta fare clic sullʼicona della freccia in su, affinché il sito venga di volta in volta caricato sul web, oppure basta selezionare un documento, o più di uno, e faredi nuovo clic sulla freccia: i documenti selezionati saranno caricati sul web.

Collegamento al server remoto.

Riapri il collegamento.

Carica i documenti selezionati sul server remoto.

Carica i documenti selezionati dal server remoto al tuo computer.

Eʼ bene sapere chese si sposta un documento utilizzando la cartella sito, Dreamweaver ristabilisce tutti i collegamenti, ipertestuali compresi.Inoltre dal menu Comandi e dal menu Sito, ci sono interessanti procedure per ottimizzare lʼhtml, per verificare tutti collegamenti, ecc.

La finestra Sito: da lì si lavora e si controlla completamente il sito.

I dati richiesti per caricare il sito sul web tramite FTP.

A questo punto scegliere il sito e andare avanti con le schermate fino a quella che richiede le impostazioni FTP, quindi inserire i dati (vedi sotto).

didattico TITOLO Spunti di lavoro con Dreamwever MX Creare...

Documents

Transcript of didattico TITOLO Spunti di lavoro con Dreamwever MX Creare...