Dreamweaver MX - Territorio Scuola

KT
che cos’è?
!
didattico
TITOLO
Creare un sito web
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.
Spunti di lavoro con Dreamwever MX
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
INDICE CAPITOLI:
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.
Alberto Pian
autore
Per insegnanti / studenti
pagine indice delle sezioni
piegare e incollare
Didattica
index.html
www.didanext.com
[email protected]
cartelle delle sezioni
pagine contenute in ciascuna sezione
© Tutti i diritti riservati
1. creare il sito
gli strumenti...
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.
pleto, di realizzarlo e di pubblicarlo in Internet.
2
dreamweaver
palette proprietà: serve per formattare
il testo, creare collegamenti, lavorare
con le immagini e le tabelle.
KT
!
dreaweaver
Pagina Web (spazio per crearla)
Dreamweaver consente di impostare un sito com-
didattico
www.didanext.com
© Tutti i diritti riservati
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
FTP per caricare il sito in Internet.
3
KT
!
dreaweaver
Nessuno. Apriremo alla fine una sessione
dreamweaver
connessione con il server remoto”, indicare
didattico
www.didanext.com
© Tutti i diritti riservati
2. CREARE la home page
il frameset della pagina
index.html
Un framset è una pagina speciale, un contenitore,
suddiviso in più parti che si chiamano frame.
Dal menu File scegliere Nuovo:
apparirà la finestra di dialogo
qui sotto, dalla quale sceglie
lʼopzione Set di frame.
Ciascuna di queste parti, può contenere una
Il frame
superiore
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.
4
Il frame
inferiore
Il framset
Creiamo un framset che abbia uno di questi nomi,
dreamweaver
e che sia diviso in due frame: nella parte superiore
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.
KT
!
dreaweaver
potremo inserire una barra di navigazione che
didattico
www.didanext.com
© Tutti i diritti riservati
2. CREARE la home page
il 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.
dreaweaver
5
dreamweaver
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.
KT
!
didattico
www.didanext.com
© Tutti i diritti riservati
2 CREARE la home page
salvare i singoli frame
Che cosa è successo? Abbiamo
creato tre documenti:
index.html (il frameset che
funziona da home page del sito)
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.
6
Possiamo vedere il risultato nella finesta Sito (dal
menu Finestra - Sito).
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
dreamweaver
KT
!
dreaweaver
Collochiamo il mouse nel frame superiore e quindi
dal menu File - Salva frame gli assegnamo il nome
indexnavigazione.html
indexnavigazione.html (la
pagina web che contiene la
barra di navigazione e che verrà
visualizzata nel frame superiore di
index.html)
didattico
www.didanext.com
© Tutti i diritti riservati
3 CREARE le pagine web
spiegazione 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.
Così, ogni volta che scriveremo una lezione, la
aggiungeremo come pagina web a se stante.
indexpagina.html
lezioniIndice.html
altre sezioni...
Galileo.html
quanti.html
KT
!
dreaweaver
Questo vale per tutte le sezioni del
sito!
dreamweaver
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.
Immaginiamo di fare una lezione di fisica
A mano a mano che aggiungeremo lezioni
avremo anche diverse pagine web e quindi
diversi collegamenti alla pagina indice.
7
Queste pagine rimanderanno ai contenuti che
aggiungeremo di volta in volta a ogni sezione.
Facciamo un esempio.
quantistica e di chiamarla quanti.html:
nella pagina indice della sezione lezioni
(lezioniIndice.html), creeremo un collegamento a
questa pagina quanti.html.
didattico
www.didanext.com
© Tutti i diritti riservati
3 CREARE le pagine web
creiamo 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.
- 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.
8
dreaweaver
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?
dreamweaver
Dal menu File - Nuovo
e quindi nella Categoria
scegliamo: Pagina di base HTML.
Ora svolgiamo le seguenti operazioni:
KT
!
didattico
www.didanext.com
© Tutti i diritti riservati
3 CREARE le pagine web
tutte le pagine
Possiamo verificare il nostro lavoro aprendo la
finestra Sito dal menu Visualizza.
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.
index.html
Salviamo ogni pagina con il suo nome.
9
dreamweaver
La finestra Sito.
pagine indice delle sezioni
cartelle delle sezioni
pagine contenute in ciascuna sezione
KT
!
dreaweaver
Ecco dunque la struttura del sito così come
lʼabbiamo progettata.
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.
didattico
www.didanext.com
© Tutti i diritti riservati
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.
dreaweaver
pagine indice delle sezioni
dalla palette delle Proprietà, tiriamo
(letteralmente, vedi figura sotto), un collegamento
fino allʼicona del documento index.html nella
finestra Sito.
10
dreamweaver
index.html
- selezioniamo il primo indice index:
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)
Infine, dato che vogliamo che la pagina
collegata compaia nel frame sottostante
(il frame indexPagina), allora nella
casella Dest (destinazione) selezioniamo
mainFrame.
KT
!
4 colleghiamo le pagine
tracciamo i collegamenti
da un testo
didattico
www.didanext.com
© Tutti i diritti riservati
4 colleghiamo le pagine
creiamo i collegamenti da
un testo e proviamoli!
Ricordarsi
sempre la
destinazione:
mainFrame!
(dalla palette
Proprietà,
agire sulle
frecce della
casella Dest).
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!
11
dreamweaver
KT
!
dreaweaver
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.
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.).
didattico
www.didanext.com
© Tutti i diritti riservati
4 colleghiamo le pagine
creare aree calde dalle
immagini
12
dreamweaver
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.
KT
!
dreaweaver
Possiamo inserire immagini e creare aree calde (cioè
collegamenti ipertestuali), al loro interno. Importiamo
in una pagina web unʼimmagine: dal menu InserisciImmagine. Se lʼimmagine non si trova nella cartella
del sito, Dreamweaver la copia automaticamente:
questa è una funzione molto importante!
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à.
didattico
www.didanext.com
© Tutti i diritti riservati
4 colleghiamo le pagine
i 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”.
Dal menu Inserisci, scegliamo
Inserisci ancoraggio con nome.
Nella finestra di dialogo scriviamo
il nome dellʼancora: movimento.
13
dreaweaver
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.
dreamweaver
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).
KT
!
didattico
www.didanext.com
© Tutti i diritti riservati
La palette Proprietà
5. ordine e bellezza
testo 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.
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..
dreaweaver
Evidenziamo
un testo con
il mouse e
stabiliamo
la sua
grandezza.
Assegnamo dei
colori al testo!
Si può operare una
scelta, limitata, di
font (non tutti i font
vengono visualizzati
sul Web!
dreamweaver
14
Se si colloca il
mouse allʼinterno
di un paragrafo,
questo può
assumere delle
caratteristichge
spcifiche, per
esempio relative
alla grandezza del
titolo.
Inseriamo dei filetti
tra i vari capitoli per
separarli meglio: dal
menu Inserisci Filetto orizzontale.
KT
!
La palette Proprietà ha
tutti gli strumenti per
formattare il testo!
didattico
www.didanext.com
© Tutti i diritti riservati
La palette Proprietà
5 ordine e bellezza
immagini in forma
Dare un
nome.
Controllare le
dimensioni.
Per creare le
aree calde
(collegamenti).
dreaweaver
Una cornice intorno
allʼimmagine: si
digita il numero
per stabilrne la
grandezza.
Ripristina le
dimensioni originali
dellʼimmagine.
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....
Agendo sulle
maniglie si può
cambiare la
dimensione e
anche la forma
dellʼimmagine.
La palette Proprietà ha
tutti gli strumenti per
lavorare con le immagini!
dreamweaver
15
Apre
lʼapplicazione
Fireworks per
modificare
lʼimmagine.
KT
!
Apriamo una pagina web e lavoriamo
sulle immagini. Selezioniamo
lʼimmagine con il mouse e usiamo la
palette Proprietà dal menu Visualizza.
didattico
www.didanext.com
© Tutti i diritti riservati
5 ordine e bellezza
tabelle!
Ricordiamo
che possiamo
unire le celle
e lavorare
sulla tabella,
sempre
utilizzando il
menu Elabora
- Tabella.
16
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.
www.didanext.com
dreamweaver
dreaweaver
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.
Per allargare o
diminuire lʼampiezza delle celle o della
tabella, afferrare le colonne con il mouse
e trascinarle, come nella fig. sotto.
Per aggiungere o
sopprimere righe o colonne
della tabella, utilizziamo
sempre il menu Elabora Tabella - ...
© Tutti i diritti riservati
KT
!
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.
didattico
5 ordine e bellezza
tabelle: la palette proprietà
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.
Stabiliamo la largezza a
750 pixel: così la pagina ha
sempre questa dimensione
adatta ai monitor in
circolazione.
La tabella vista da un browser (navigatore): si inseriscono anche le
immagini e tutta la pagina web assume unʼaria più ordinata e pulita.
Pulsanti per
lavorare
sulla
larghezza e
sullʼaltezza
delle
celle della
tabella.
La distanza, in pixel,
del testo dai bordi
delle celle (MargCel)
e delle celle fra di
loro (SpazCel).
Assegnamo dei
colori alle celle,
alle colonne, a
tutta la tabella,
ai bordi...
Bisogna sempre
collocare il mouse
sullʼelemento che
si vuole colorare.
Si può inserire na
immagine come sfondo, in
tutta la tabella, oppure in
una sua cella.
www.didanext.com
© Tutti i diritti riservati
dreamweaver
17
Inoltre, dal menu Elabora - Tabella
si possono effettuare numerose altre operazioni.
dreaweaver
Per evidenziare il bordo
della tabella e la sua
dimensione (inserire un
numero: 0 = nessun bordo).
KT
!
La palette Proprietà (dal menu Visualizza), permette
di controllare anche le tabelle.
Allieneamento
della tabella nella
pagina.
didattico
6. effetti speciali
barra 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!
dreaweaver
Creiamo il testo Flash
per Presentazione.
Scegliamo il colore
di avvio e quello di
pulsante attivo.
Il nome del pulsante
che verrà mostrato.
www.didanext.com
Il pulsante attiva
un collegamento a
presentazioneIndice.html
che si apre in
“mainFrame”: così viene
visualizzato nel frame
sottostante.
Assegnare il nome al
pulsante.
KT
!
Il risultato finale: al posto del semplice testo
della barra di navigazione (ricordate?), ora
abbiamo dei pulsanti e dei testi colorati e
interattivi!
dreamweaver
18
Assegnare il nome al
pulsante.
didattico
© Tutti i diritti riservati
6. effetti speciali
barra 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.
Aggiungi e rimuovi i
pulsanti con i bottoni
+eLe diverse immagini
assegnate al pulsante
Lezioni.
Stiamo
lavorando
sul pulsante
Lezioni.
Stabilisci
lʼordine di
successione
dei pulsanti.
19
Dal menu Inserisci Barra di navigazione.
Il collegamento
interattivo del
pulsante alla pagina
lezioniIndice.html.
Carica tutte le
immagini in
memoria così la
loro esecuzione è
rapida!
La pagina
lezioniIndice.html si apre
in mainFraime, nel frame
sottostante la pagina
idex.html.
KT
!
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!
dreamweaver
dreaweaver
Però, per creare questa barra, occorre prima
predisporre le immagini dei pulsanti, anzi, le
immagini per ogni stato di ciascun pulsante.
didattico
www.didanext.com
© Tutti i diritti riservati
6. effetti speciali
pulsanti rollower e filmati quickTime
Stiamo
lavorando
sul pulsante
Lezioni.
Immagine relativa al
passaggio del mouse.
Immagine
dello stato di
quiete.
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.
20
Esempio di immagine di
rollower: stato di quiete e
quando il mouse vi passa sopra.
Il collegamento
interattivo del
pulsante alla pagina
lezioniIndice.html.
dreamweaver
Carica le immagini
in memoria così la
loro esecuzione è
rapida!
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).
KT
!
dreaweaver
Dal menu Inserisci - Immagini interattive
- Immagine di rollover.
didattico
www.didanext.com
© Tutti i diritti riservati
6. effetti speciali
animare un livello
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.
21
Frame (fotogramma).
Canali di animazione.
Esegui lʼanimazione
allʼapertura della
pagina web.
Tracciato
dellʼanimazione.
Canale dei
comportamenti (linea
B).
KT
maniglia del livello
!
www.didanext.com
Esegui lʼanimazione
in continuazione.
dreamweaver
dreaweaver
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.
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.
didattico
© Tutti i diritti riservati
6. effetti speciali
animazioni 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).
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!
dreaweaver
dreamweaver
22
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.
Pannello dei comportamenti
KT
!
didattico
www.didanext.com
© Tutti i diritti riservati
7. semplificazioni
gli 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.
23
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.
dreamweaver
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.
KT
!
dreaweaver
Bisogna creare un foglio di stile esterno,
affinchè possa essere associato alle pagine web.
didattico
www.didanext.com
© Tutti i diritti riservati
7. semplificazioni
i modelli
I modelli funzionano come delle pagine già
impostate che si possono riutilizzare per creare
nuove pagine web.
24
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.
dreamweaver
KT
!
dreaweaver
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.
Creiamo la
pagina e poi
associamo
alle varie
aree la
caratteristica
di essere
modificabili
(tranne,
ovviamente,
quelle che
devono
rimanere
fisse come i
marchi.
didattico
www.didanext.com
© Tutti i diritti riservati
8. sul web
caricare 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..
Collegamento al
server remoto.
Riapri il
collegamento.
25
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).
I dati richiesti per caricare il sito sul web tramite FTP.
La finestra Sito: da lì
si lavora e si controlla
completamente il sito.
Carica i
documenti
selezionati dal
server remoto al
tuo computer.
Carica i
documenti
selezionati sul
server remoto.
dreamweaver
Eʼ bene sapere che
se 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.
KT
!
dreaweaver
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.
didattico
www.didanext.com
© Tutti i diritti riservati