inizio

1
inizio
Progettare e realizzare un sito web con
dreamweaver
2
Il mio sito web

• Cosa serve
• Un progetto
• Un editor web
• Un Provider per la pubblicazione

3
Il Progetto

• Prima di accingersi a costruire delle pagine web
  è bene disegnare, anche se per grandi linee, il
  progetto di comunicazione che si vuole
  realizzare. Ciò evita in seguito di perdere il
  filo del progetto e facilita gli aggiornamenti e
  le modifiche.
• Lestrema flessibilità delle tecnologie web non
  ci deve indurre costruire le nostre pagine alla
  rinfusa, perché dopo un po ci accorgeremmo di
  sapere come evolve il progetto e cosa sono tutti
  quei files e oggetti che compaiono nella lista
  del nostro sito.
• Fate attenzione a nominare i files creati,
  evitate nomi generici tipo pag1,pag2 ecc. Il
  nome del file è come il titolo di un libro ne
  deve riassumere il contenuto. E bene anche
  costruire un archivio di cartelle che ci
  permettono di individuare velocemente la
  struttura del nostro progetto
• Uno schema semplice
• Uno schema complesso

4
Il Progetto

• Realizziamo il nostro progetto web
• La 1 pagina
• La pagina con i frames
• I fogli di stile
• Collegamenti e ancore
• Visualizzare nuove pagine
• I livelli e i comportamenti
• Procedure javascript
• Visualizzare documenti di applicativi
• Usare la barra di navigazione
• The end

5
Uno schema semplice
Il Progetto

• Questo schema di progetto, abbastanza intuitivo,
  ha una struttura ad albero con una root
  iniziale da cui si diramano una serie di pagine
  concatenate fra di loro in modo gerarchico.
• La prima pagina (homepage) è quella dingresso e
  normalmente viene chiamata index.htm o
  default.htm. Ciò consente di non dichiararla
  quando si apre un sito www.ilmiosito.it, mentre
  quando navighiamo nelle pagine allindirizzo del
  dominio viene aggiunta la pagina richiamata
  www.ilmiosito.it/pagina2.htm

6
Uno schema complesso
Il Progetto

• In questo schema le pagine, pur mantenendo uno
  schema ad albero, condividono diversi oggetti

7
DREAMWEAVER MX
Dreamweaver MX è un editor professionale con il
quale possiamo costruire non solo semplici pagine
web, ma un vero progetto anche usando
database. Ai classici menù a tendina e ai tools
ad icone, sono aggiunti dei pannelli che
racchiudono comandi e funzioni per tipologia
comportamenti server, comportamenti, fogli stile
ecc. Descrizione dellinterfaccia
8
La mia prima pagina

• E unarea di lavoro che riempio di testo e
  immagini.
• Costruiamo il 1 livello del diagramma
• Realizziamo lhomepage su una pagina vuota. Dal
  menù File nuovo pagina di base html
• Questa è la mia pagina homepage che andrò a
  salvare col nome index.htm
• Procedura menù- File salva con nome index.htm

selezionare
Clicco qui
9
Formattiamo la 1 pagina
Ciò che ho scritto lo seleziono per formattarlo,
assegnando alcuni attributi per renderlo più
presentabile. Procedura con il cursone dentro il
foglio clicco il tasto destro del mouse (menù
dispezione) e seleziono proprietà di pagina.
Seleziono un colore per lo sfondo e uno per il
testo. Per il tipo e corpo del carattere posso
definirli dalla barra degli strumenti, oppure
apro il menù Formato e seleziono
carattere. Aggiungo un bottone per il
collegamento. Procedura menù Inserisci-
Inserisci pulsante flash seleziono un pulsante-
testo pulsante benvenuti
Testo pulsante
10
Formattiamo la pagina

• La maniglia ti consente di nascondere i pannelli
• Sul bottone flash attiviamo il collegamento
  ipertestuale alla pagina frameset_principale.htm
  che creeremo in seguito.

11
La pagina con i frames
Struttura principale

• Per realizzare questa pagina usiamo um modello di
  frame.
• Dal menù File Nuovo Set di frame (scegliamo
  un modello)

intestazione
sommario
principale
Un Frameset è costituito da una cornice che
richiama i frames che a loro volta sono singoli
oggetti (files). Il modello scelto è costituito
da 4 oggetti il frameset e 3 frames
12
La pagina con i frames

• Questa pagina (frameset) assembla 3 frames. Il
  frames superiore lo usiamo come titolo delle
  nostre pagine, il frame di sinistra come sommario
  dei nostri servizi, il frame al centro dove
  visualizzeremo le pagine dei nostri servizi

Nel file superiore abbiamo inserito una tabella
costituita da 1 riga e due colonne. Dal menù
Inserisci Tabella Essa ci serve per meglio
posizionare il contenuto della nostra
intestazione. A sinistra inseriamo unimmagine
che
abbiamo costruito con un programma grafico e a
destra scriviamo il titolo Trascinando la
maniglia che separa le celle determiniamo la
larghezza delle celle
13
La pagina con i frame

• Per attivare il collegamento dalla homepage
  (modalità ipertestuale), dobbiamo costruire la
  pagina di destinazione. Questa pagina la
  costruiamo utilizzando i frame

Per creare i frame seleziono un modello fra
quelli proposti. Per creare i frame posso usare
il menù File oppure dal pannello inserisci
seleziono frame e un modello Procedura Menù
File Nuovo Set di frame (scegli il modello)
crea Alla successiva schermata ok-
14
La pagina con i frame
Creiamo lintestazione della pagina con il logo a
sinistra e una scritta a destra. Per meglio
controllare il logo e la scritta attiviamo dentro
il frame una cartella con 2 colonne e una riga.
Nelle prima cella metto il logo, nella seconda la
scritta. Procedura Menù Inserisci Tabella
(inserisco i valori che mi servono 1 riga e 2
colonne e seleziono la larghezza a 100
percentuale, ovvero determino che la tabella sia
visualizzata a tutto monitor clicco ok (ancora
ok- alla finestra successiva Seleziono e
formatto le due celle separatamente, ovvero
seleziono un sfondo per ognuna e ciò vale
soprattutto per la seconda, perchè il logo faccio
in modo di farlo rientrare nellintera cella. Le
tabelle sul web non servono solo per archiviare
dati ma soprattutto per controllare porzioni di
video
Click
15
La pagina con i frame
Per selezionare il frameset (il contenitore dei
frame) basta fare clic sul bordo tra due frame e
appare la finestra delle Proprietà che mi
consentirà di assegnare una serie di
attributi. Per far comparire la Finestra delle
proprietà di un Frame, posiziono il cursone nel
frame e faccio click tenendo premuto il tasto
ALT. Posizionandomi sul bordo di due frame posso
trascinare (allungare o restringere) il frame
stesso. Sul frame sx definisco un indice delle
categorie che illustrerò nel sito Nel frame
principale inserisco una tabella per posizionare
un
immagine e una breve presentazione. Ho costruito
una tabella con due righe e due colonne e ho
compilato anche la didacalia che appare sopra. Ho
unito le due celle sottostanti dove ho scritto la
mia breve presentazione. Procedura (seleziono le
due celle adiacenti), Menù Elabora Tabella
Unisci celle Ho formattato il testo e dato uno
sfondo usando la finestra Proprietà sottostante
16
La pagina con i frame
Ecco il risultato. Avendo aggiunto delle voci
allindice esse non vengono visualizzate. E
necessario attivare al frame la barra di
scorrimento verticale. Per fare ciò attivo la
finestra Proprietà con ALTclick dentro il
frame. Attivo lo scorrimento Automatica e spunto
Non ridimensionare. Click in una zona vuota della
finestra ed ecco il risultato
Se vogliamo possiamo anche cambiare qualche
attributo ad un blocco di testo su cui abbiamo
applicato una classe di stile, ma attenzione
perché ciò può creare intrecci fra stili il cui
risultato non è detto sia quello atteso. Alla 1
voce dellindice cambio colore e corpo usando le
Proprietà dei caratteri
17
Le pagine dellindice news biblioteca cd-rom
orari personale recapiti
Collego le voci del mio sommario al frame
principale così da sfogliare le categorie,
lasciando inalterato lelenco del frame di
sinistra.
Creiamo tante pagine quante sono le voci
dellindice Per primo creiamo il file news con
in testa un indice da cui sfogliamo i documenti
che compongono la pagina. Per creare lindice
usiamo le tabelle (1 riga per 5 colonne) ed in
ogni cella inseriamo una voce. Appena sotto
creiamo unaltra tabella con 1 riga e due
colonne.
18
Le pagine dellindice news biblioteca cd-rom
orari personale recapiti
Prima di scrivere in alto lintestazione delle
news definisco una classe di stile
titolo_h1.css, ridefinendo il tag h1 Dal Menù
Testo Stili CSS Nuovo Seleziono il tag h1
(che assegna il formato ai titoli) e scelgo alla
schermata successiva gli attributi del carattere.
Nella Finestra Proprietà - Formato seleziono
Titolo1 e scrivo in alto nella pagina News che
viene visualizzato applicando automaticamente gli
attributi assegnati nella creazione di
titolo_h1.css.
19
I fogli di stile
Per dare un aspetto più gradevole al nostro testo
finora abbiamo utlizzato o il menù Formato oppure
gli attributi della finestra Proprietà
sottostante. Può essere utili definire delle
classi di stili e dei fogli di stile che posso
assegnare ad una pagina ovvero ad una selezione
di pagina. Procedura Menù Testo Stili CSS .
Chiamo questa classe stile1 e la definisco solo
per questo documento. Nella finestra successiva
definisco gli attributi per le categorie che mi
interessano. In particolare Tipo, Sfondo e Blocco
di testo.
Seleziono il blocco di testo dove voglio
applicare la classe di stile e dal pannello
Progettazione Stili CSS Applica Stili cattura
Stile1. Posso selezionare la classe di stile1
anche dal menù Testo Stile CSS Stile1
Per aggiungere altri caratteri, basta
selezionarli da Modifica elenco caratteri.
20
Fogli di stile da collegare
Un foglio di stile si può associare a più pagine
web e si salva come file con lestensione
css. Dal Menù Testo Stili CSS Nuovo stile
CSS Lo chiamo fogliostile1 (da distinguerlo da
stile1), seleziono Nuovo file....-ok- salvo il
file Fogliostile1.css Assegno alle varie
categorie diversi attributi. Esso viene aggiunto
al pannello Progettazione Stili CSS. Questo
file lo posso associare a qualsiasi pagina e a
tutti i tag definiti vengono assegnati gli
attributi scelti.
Come possiamo notare i fogli di stile ci
consentono di assegnare allo stesso tag molti più
attributi altrimenti utilizzabili dalla barra
degli strumenti e dalla finestra proprietà. Pur
avendo associato un foglio di stile alla pagina,
posso comunque cambiare la formattazione ad un
blocco di testo, ma devo far attenzione perchè
potrei mischiare le assegnazioni degli attributi
e il risultato non essere quello atteso.
21
Fogli di stile e ancora
Creo una nuova classe di stile per i titoli delle
news e un altro per i sotottitoli. Scelgo, per
ogni classe, un nuovo carattere e anche un suo
background. Creo una tabella con una sola riga,
senza didascalia, a 5 colonne. In ogni colonna
metto il titolo di una news. Inserisco un Filetto
orizzontale (menù Inserisci) e nellarea
sottostante creo una tabella con 5 righe e 2
colonne. Scrivo (copio/incollo) la prima news,
senza preoccuparmi di definirne la formattazione,
nella prima cella a sx, e scrivo top nella cella
adiacente. Ripeto loperazione per tutte e cinque
le righe. Alla fine seleziono i blocchi di testo
e applico gli stili di classe che ho
creato. Seleziono il primo titolo che sta in
testa alla news e clicco sullicona Ancora (si
visualizza dal pannello Inserisci- Comune) e
assegno un nome allancora progetto. Ripeto le
operazioni per le altre news. Seleziono il primo
titolo nella tabella in alto. Mi posiziono nella
riga collegamento e scrivo -progetto ripeto
loperazione con gli altri titoli assegnando al
collegamento preceduto da il nome dellancora
corrispondente. Nella navigazione, per risalire
allindice con top, creo sui titoli della
tabella in alto unancora e il corrispondente
collegamento con da top.
22
Fogli di stile modifiche
Effettivamente i miei titoli sono troppo
sgargianti e allora decido di cambiarne aspetto.
Precedentemente avevo creato 4 classi di stile
con le quali avevo formattato il titolo della
pagina, la tabella in alto, i titoli e i
sottotitoli delle news. I titoli delle news sono
stati formattati da classe2 che fa parte ddello
stile classe2.css Cambio lo sfondo e la
spaziatura sia delle parole che delle lettere,
provo diverse soluzioni tramite il bottone
Applica e quando mi ritengo soddisfatto -ok
23
Definire il sito

• Per poter pubblicare il sito ho bisogno di
  utilizzare uno spazio su un Server Web che
  tipicamente viene gestito da un Provider. Solo
  dopo aver pubblicato le pagine su un server web
  esse sono visibili da Internet
• Procedura menù Sito Gestiti sito nuovo sito
• Ho due scelte la finestra generali e avanzate
  che fanno la stessa cosa. La prima è guidata, la
  seconda ha un menù di scelta.

Scegliamo avanzate. Attiviamo la categoria
informazioni locali. Diamo un nome al sito
locale citicord(n) Scegliamo la cartella locale
su cui andremo a salvare il tutto. Se non
labbiamo precedentemente creata la possiamo
creare adesso, dopo aver attivato sfoglia.
Procedura Apri-Selezione Spuntiamo la cache
24
Definire il sito
Clicca qui per selezionare una cartella locale
25
Definire il sito
Definire il sito
Seleziono la categoria informazioni su remoto.
In questa categoria devo assegnare le specifiche
che mi vengono fornite dal Provider la modalità
daccesso (tipicamente FTP), il nome o lIP
dellHost, come è stata chiamata la cartella
remota, il nome utente e la password. Dunque ho
bisogno di una cartella locale, che gestisco io,
e di una cartella remota (lo spazio web
assegnatomi dal provider) dentro la quale vado a
trasferire i files con FTP Spunta Usa FTP passivo
26
Definire il sito

• Le altre categorie non mi servono per questo
  progetto e chiudo la finestra con ok e fine.
• Adesso è attiva la cartella locale e remota

Questa freccia attiva il trasferimento dalla
cartella locale al remoto del sito ovvero dei
file selezionati
Questa freccia attiva il trasferimento dal remoto
al locale
In questo menù posso selezionare la cartella
locale oppure la cartella remota
27
Definire il sito
Seleziono Server di prova. Se non ripropone gli
stessi valori de Informazioni su remoto li
correggo. Con questa modalità utilizzo la
cartella remota per provare le mie pagine. Questa
modalità mi garantisce che ciò che vedo io vede
chiunque naviga in internet per visitare il sito
28
Un nuovo frameset per i servizi di biblioteca
Creiamo un nuovo file e selezioniamo set di
frame. Anche per questo frameset scelgo tre
frame intestazione_biblioteca.htm
sommario_bibblioteca.htm principale_biblioteca.as
p. Collego ogni singola voce del sommario al
mainframe in modo tale che la navigazione rimane
nella pagina. Ho diviso la narrativa in italiani
e stranieri (la stessa cosa la ripeto per gli
altri generi) e faccio in modo che cliccando su
italiani/stranieri mi compaia nel frame
principale lelenco degli autori presenti
29
La tabella degli autori
Innanzitutto creiamo dei collegamenti sui titoli
delle opere che si apriranno in una nuova pagina
sovrapposta (per ottenere ciò selezioniamo
_blanck nella pannello Proprietà dest dopo aver
definito il file di collegamento nel rigo
collegam. Creiamo nuove classi di stile da
applicare a questa pagina e a quelle ad essa
collegate.
30
Fogli di stile nuove classi
Se ho bisogno di aggiungere degli altri formati
perchè mi sono accorto che tra quelli che ho
creato non ve ne sono che mi soddisfano per
formattare un blocco di testo (nel caso i titoli
diversi dagli autori) creo unaltra classe di
stile e laggiungo al foglio di stile
stile_autore.css. Menù Testo Stili CSS Nuovo
Assegno un nome alla classe titoli_opere,
seleziono Crea stile ..., lo definisco in
stile_autore.css ok Creo anche unaltra classe
di stile per le biografie degli autori e una per
il sunto delle opere
Classi di stile aggiunte a stile_autore.css Per
aggiungere una classe posizioinandosi con il
cursore vicino al foglio di stile e cliccare il
tasto dx del mouse
31
I livelli

• I livelli ci consentono di controllare
  agevolmente una porzione di video e possono
  essere anche nidificati. Ai livelli viene
  assegnato un id che possiamo richiamare per
  attivare una serie di comportamenti come vedremo
  in seguito.
• Per attivare un livello dal Menù
  Inserisci-Livello. Nellarea del livello
  posssiamo inserire testo, immagini, tabelle ecc.
  Se non appare licona bisogna verificare
  dal Menù Modifica- Preferenze Livelli
  Visibilità-Default
• Al livello possiamo assegnare vari attributi che
  compaiono nel pannello Proprietà (in fondo alla
  pagina). E bene dargli un nome significativo
  cambiando quello generico che appare sotto ID
  livello
• Nel pannello proprietà, oltre agli attributi che
  abbiamo avuto modo già di incontrare, ve ne sono
  due che ci serviranno in seguito. Il 1 -ordine-
  è la profondità (rilievo) dellarea e il secondo
  -Vis- è la possibilità di rendere invisibile il
  livello, ovvero renderlo visibile a seguito di
  unazione.

32
I livelli

• Costruiamo la pagina della biografia di un
  autoreTolstoj.htm e inseriamo due livelli (uno
  che contiene limmagine dellautore e laltro una
  sintesi dellopera Anna Karenina. Facciamo in
  modo che abbiamo le stesse dimensioni. Diamo due
  nomi diversi agli ID livello
• Selezioniamo Tolstoj e nella riga Comportamenti
  del Pannello Proprietà scriviamo javascript
• Il nostro obiettivo è di far apparire e
  scomparire questi riquadri (livelli) al passaggio
  o al click del mouse sulla parola Tolstoj e
  sullicona inserita nel testo.
• Per far ciò abbiamo bisogno di attivare dei
  comportamenti

33
Attivare i comportanti

• Il pannello comportamenti (Menù finestra
  Comportamenti) ci consente di attivare una serie
  di eventi alla selezione attivata sulla pagina
  corrente. Dreamweaver automaticamente inserisce
  delle procedure javascript che vengono richiamate
  al click o al passaggio del mouse.
• Cliccando su ci viene mostrato lelenco dei
  comportamenti (eventi) attivabili (in grassetto)
  alla selezione effettuata sullarea di lavoro.
  Altri comportamenti (in grigio) pur presenti non
  sono associabili alla selezione
• Selezionando il bottone a fianco dellautore
  attiviamo un pop up che ci dica in quale secolo
  è vissuto

34
Attivare i comportanti

• Selezioniamo la parola tolstoj (facciamo
  attenzione che nel rigo Collegamenti ci sia
  scritto javascript) e attiviamo il comportamento
  Mostra-nascondi livelli. La finestra di dialogo
  ci elenca tutti i livelli presenti nella pagina.

• Selezioniamo tolstoj e clicchiamo sul bottone
  Mostra. Riattiviamo Comportamenti e
  riselezioniamo tolstoj. Ma questa volta
  clicchiamo sul bottone Nascondi.
• Ripetiamo loperazione con licona per la quale
  non è necessario scrivere nel rigo collegamento
  javascript
• Selezioniamo il 1 livello e nel rigo Vis
  attiviamo hidden. Ripetiamo loperazione anche
  per il 2 livello

35
Attivare i comportanti

• Le pagine delle biografie degli autori facciamo
  in modo che siano aperte come nuove finestre
  allattivazione del relativo collegamento.
• Selezioniamo il nome dellautore e attiviamo il
  comportamento Apri finestra browser. Nellurl di
  destinazione selezioniamo il file che abbiamo
  precedentemente costruito e assegniamo-variamo i
  parametri presenti, mentre nella finestra
  Proprietà al rigo collegamenti scriviamo
  javascript
• Selezioniamo il titolo dellopera Anna Karenina
  e anche questa pagina la visualizziamo in una
  nuova finestra che riporta la sintesi dellopera.

36
Inserire immagini con contorno

• Quando inseriamo un immagine e poi vi dobbiamo
  aggiungere una didascalia a fianco, possiamo
  assegnare due attributi nella finestra proprietà
• Allinea- ( Centro per centrare la didascalia)
• Spazio O (assegniamo un valore in pixel che
  distanzia ciò che scriviamo

Didascalia che affianca limmagine
Testo affiancato usando i livelli
dallimmagine. Se vogliamo che il testo contorni
la figura abbiamo due strumenti le tabelle
oppure i livelli che ci consentono di sezionare
la pagina e di conseguenza il testo, ma che a
video sembra un tuttuno.
37
Procedure Javascript

• Finora abbiamo inserito diverse procedure
  javascript, ma vi ha provveduto automaticamente
  dreamweaver.
• Proviamo adesso ad inserire noi delle semplici
  procedure che possiamo recuperare da internet.
• Essendo degli script devono essere inseriti
  direttamente nel codice, pertanto bisogna
  cliccare sullicona mostra codice -per far
  apparire nellarea di lavoro.
• Il codice è formato da una serie di tag e script
• La procedura normalmente viene inserita fra i tag
  ltheadgt lt/headgt e richiamata da una riga inserita
  nel ltbodygt lta href"" onClick"Javascriptprin
  tit()"gtstampalt/agt .lt/bodygt. A video compare la
  parola stampa con colore blu e con un
  collegamento attivato (manina)

ltheadgt ltscript language"javascript"gt lt!-- functi
on printit() parent.window.print() //--gt lt/s
criptgt lttitlegtbiografia di Tolstajlt/titlegt ltmeta
http-equiv"Content-Type" content"text/html
charsetiso-8859-1"gt lt/headgt
38
Procedure Javascript
ltHEADgt ltSCRIPT LANGUAGE"JavaScript"gt var
timerID null var timerRunning
false function stopclock ()
if(timerRunning)
clearTimeout(timerID) timerRunning
false function showtime () var
now new Date() var hours
now.getHours() var minutes
now.getMinutes() var seconds
now.getSeconds() var timeValue ""
((hours gt12) ? hours -12 hours)
timeValue ((minutes lt 10) ? "0" "")
minutes

• Possiamo attivare un evento allapertura della
  pagina, facendo eseguire una procedura
  javascript. Questa a fianco fa apparire lora che
  si aggiorna in continuo in un rigo che decidiamo
  noi, nella pagina richiamata.

timeValue ((seconds lt 10) ? "0" "")
seconds timeValue (hours gt 12) ? "
p.m." " a.m." document.clock.face.value
timeValue // you could replace the
above with this // and have a clock on
the status bar // window.status
timeValue timerID setTimeout("showtime
()",1000) timerRunning
true function startclock () //
Make sure the clock is stopped
stopclock() showtime() lt/SCRIPTgt lt
/HEADgt ltBODY bgcolor"white" onLoad"startclock()
timerONEwindow.setTimeout"gt ltform
name"clock" onSubmit"0"gt ltinput type"text"
name"face" size13 value""gt lt/fontgt lt/bodygt
39
Procedure Javascript

• ltscript language"Javascript"gt
• // script per pop up
• newwindowwindow.open (popup.htm', '',
  'width420,height320,scrollbarsyes')
• window.openerself
• lt/scriptgt

La procedura sopra riportata, inserita in una
pagina attivata con un collegamento, alla sua
apertura apre un pop up (popup.asp)
40
Visualizzare files di applicativi

• Per visualizzare dei documenti creati in word,
  excel, power point, acrobat ecc., ovvero creati
  con un programma applicativo che genera
  documenti, basta creare un collegamento al
  documento stesso. Selezionando il testo o
  limmagine nella riga dei collegamenti scrivere
  il nome del documento con lestensione e il
  relativo percorso, se esso risiede in una
  cartella diversa, ovvero usare licona cerca
  file.
• Quando si attiva il collegamento ci viene
  mostrata la finestra qui a fianco che ci chiede
  se vogliamo salvare il file o aprirlo. Ovviamente
  se decidiamo di aprirlo immediatamente bisogna
  avere installato sul proprio computer
  lapplicativo che lho ha generato, altrimenti mi
  ritorna errore

41
Visualizzare files di applicativi

• Se invece vogliamo che il documento appaia in
  pagina web bisogna salvare il documento,
  aprendolo con lapplicativo che lo ha generato, e
  salvare con lestensione web.
• Nel caso di documenti adobe acrobat bisogna aver
  installato sul proprio pc il reader

File word in formato web
File pdf
42
Usare la barra di navigazione

• Adesso vediamo una modalità diversa di
  visualizzare le biografie degli autori in
  catalogo
• Apriamo un nuovo foglio formato da due frame uno
  superiore e uno inferiore. Nel frame superiore
  mettiamo la barra di navigazione. Dal Menù
  Inserisci Immagini interattive barra di
  navigazione
• Creiamo tre bottoni e per ognuno usiamo due
  bottoni uno che sarà visualizzato in posizione
  di riposo e laltro quando vi passiamo sopra
  con il mouse. Questo secondo conterrà anche una
  scritta che riassume il periodo di appartenenza
  degli autori

Il frame inferiore sarà quello di destinazione
dove verranno visualizzate le biografie
43
Usare la barra di navigazione

• I singoli bottoni possono essere collegati
  direttamente ad un file, ma possiamo anche
  attivarvi dei comportamenti.
• Useremo il comportamento Mostra menu popup che ci
  consente di assegnare al bottone selezionato
  diversi eventi (files) e di definire la
  posizione, colore e aspetto del menù che
  comparirà passando sopra il bottone

44
the end