inizio
Il mio sito web
Cosa serve:
 Un progetto
 Un editor web
 Un Provider per la pubblicazione
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.
L’estrema 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
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
Il Progetto


Uno schema semplice
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 d’ingresso 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 all’indirizzo del
dominio viene aggiunta la pagina richiamata: www.ilmiosito.it/pagina2.htm
Il Progetto

Uno schema complesso
In questo schema le pagine, pur mantenendo uno schema ad albero,
condividono diversi oggetti
home
sfondo
1° soggetto
suo
ni
1° fav 2° fav 3° fav
2°
soggetto
1° fav
2° fav
3°
soggetto
1° fav
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
dell’interfaccia
La mia prima pagina





E’ un’area di lavoro che
riempio di testo e
immagini.
Costruiamo il 1° livello
del diagramma
Realizziamo l’homepage
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
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ù
d’ispezione) 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ù InserisciInserisci pulsante flash –
seleziono un pulsante- testo
pulsante: benvenuti
Testo pulsante
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.
La pagina con i frames


Per realizzare questa pagina usiamo
um modello di frame.
Dal menù File – Nuovo – Set di frame
(scegliamo un modello)
Struttura
principale
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
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 un’immagine 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
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-
La pagina con i frame
Creiamo l’intestazione 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
nell’intera cella.
Click
Le tabelle sul web non servono solo
per archiviare dati ma soprattutto per
controllare porzioni di video
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
La pagina con i frame
Ecco il risultato.
Avendo aggiunto delle voci all’indice esse non vengono visualizzate. E’
necessario attivare al frame la barra di scorrimento verticale. Per fare ciò attivo la
finestra Proprietà con ALT+click 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 dell’indice cambio colore e corpo usando le Proprietà
dei caratteri
Le pagine dell’indice: news; biblioteca; cd-rom; orari; personale; recapiti
Collego le voci del mio
sommario al frame
principale così da
sfogliare le categorie,
lasciando inalterato
l’elenco del frame di
sinistra.
Creiamo tante pagine quante sono le voci dell’indice
Per primo creiamo il file news con in testa un indice da cui sfogliamo i
documenti che compongono la pagina.
Per creare l’indice usiamo le tabelle (1 riga per 5 colonne) ed in ogni
cella inseriamo una voce.
Appena sotto creiamo un’altra tabella con 1 riga e due colonne.
Le pagine dell’indice: news; biblioteca; cd-rom; orari; personale; recapiti
Prima di scrivere in alto l’intestazione 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.
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.
Fogli di stile da collegare
Un foglio di stile si può associare a più pagine web e si salva
come file con l’estensione 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.
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 nell’area 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 l’operazione 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 sull’icona “Ancora” (si visualizza dal
pannello Inserisci- Comune) e
assegno un nome all’ancora “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 l’operazione con gli
altri titoli assegnando al collegamento preceduto da # il nome dell’ancora corrispondente.
Nella navigazione, per risalire “all’indice” con top, creo sui titoli della tabella in alto un’ancora e il corrispondente collegamento
con # da top.
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
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 l’abbiamo
precedentemente creata la possiamo creare
adesso, dopo aver attivato sfoglia.
Procedura: Apri-Selezione
Spuntiamo la cache
Definire il sito
Clicca qui
per
selezionare
una cartella
locale
Definire il sito
Seleziono la categoria:
informazioni su remoto.
In questa categoria devo
assegnare le specifiche che
mi vengono fornite dal
Provider: la modalità
d’accesso (tipicamente
FTP), il nome o l’IP
dell’Host, 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
Definire il sito


Le altre categorie non
mi servono per
questo progetto e
chiudo la finestra con
ok e fine.
In questo menù
Adesso è attiva la posso
selezionare la
cartella locale e
cartella locale
remota
oppure la
cartella remota
Questa
freccia attiva
il
trasferimento
dalla cartella
locale al
remoto del
sito ovvero
dei file
selezionati
Questa
freccia
attiva il
trasferime
nto dal
remoto al
locale
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
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.asp.
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 l’elenco degli autori
presenti
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.
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 un’altra classe di stile e l’aggiungo 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 un’altra 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
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.
Nell’area del livello posssiamo inserire testo,
immagini, tabelle ecc. Se non appare l’icona
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) dell’area e il secondo -Vis- è la
possibilità di rendere invisibile il livello, ovvero
renderlo visibile a seguito di un’azione.
I livelli




Costruiamo la pagina della
biografia di un
autore:Tolstoj.htm e inseriamo
due livelli (uno che contiene
l’immagine dell’autore e l’altro
una sintesi dell’opera 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 sull’icona inserita nel
testo.
Per far ciò abbiamo bisogno
di attivare dei comportamenti
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
l’elenco dei comportamenti (eventi)
attivabili (in grassetto) alla selezione
effettuata sull’area di lavoro. Altri
comportamenti (in grigio) pur presenti
non sono associabili alla selezione
Selezionando il bottone a fianco
dell’autore attiviamo un pop up che ci
dica in quale secolo è vissuto
Attivare i comportanti

Selezioniamo la parola
tolstoj (facciamo
attenzione che nel rigo
Collegamenti ci sia scritto
javascript:) e attiviamo il
comportamento Mostranascondi 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 l’operazione con
l’icona per la quale non è
necessario scrivere nel rigo
collegamento: javascript
Selezioniamo il 1° livello e nel
rigo Vis attiviamo hidden.
Ripetiamo l’operazione anche per
il 2° livello
Attivare i comportanti



Le pagine delle biografie degli autori
facciamo in modo che siano aperte
come nuove finestre all’attivazione del
relativo collegamento.
Selezioniamo il nome dell’autore e
attiviamo il comportamento: Apri
finestra browser. Nell’url 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 dell’opera: Anna
Karenina e anche questa pagina la
visualizziamo in una nuova finestra
che riporta la sintesi dell’opera.
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)
Didascalia che
affianca
l’immagine
Testo affiancato
usando i livelli
-Spazio O –
(assegniamo un
valore in pixel che
distanzia ciò che
scriviamo
dall’immagine.
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
tutt’uno.
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 sull’icona –mostra
codice -per far apparire nell’area di
lavoro.
Il codice è formato da una serie di tag e
script
La procedura normalmente viene
inserita fra i tag <head> </head> e
richiamata da una riga inserita nel
<body> … <a href="#"
onClick="Javascript:printit()">stampa</
a> …….</body>. A video compare la
parola stampa con colore blu e con un
collegamento attivato (manina)
<head>
<script language="javascript">
<!-function printit() {
parent.window.print();
}
//-->
</script>
<title>biografia di Tolstaj</title>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
</head>
Procedure Javascript

Possiamo
attivare un
evento
all’apertura della
pagina, facendo
eseguire una
procedura
javascript.
Questa a fianco
fa apparire l’ora
che si aggiorna
in continuo in un
rigo che
decidiamo noi,
nella pagina
richiamata.
<HEAD>
timeValue += ((seconds < 10) ? ":0" : ":") + seconds
<SCRIPT LANGUAGE="JavaScript">
timeValue += (hours >= 12) ? " p.m." : " a.m."
var timerID = null;
document.clock.face.value = timeValue;
var timerRunning = false;
// you could replace the above with this
function stopclock (){
// and have a clock on the status bar:
if(timerRunning)
// window.status = timeValue;
clearTimeout(timerID);
timerID = setTimeout("showtime()",1000);
timerRunning = false;
}
timerRunning = true;
}
function showtime () {
function startclock () {
var now = new Date();
// Make sure the clock is stopped
var hours = now.getHours();
stopclock();
var minutes = now.getMinutes();
var seconds = now.getSeconds()
var timeValue = "" + ((hours >12) ? hours -12 :hours)
timeValue += ((minutes < 10) ? ":0" : ":") + minutes
showtime();
}
</SCRIPT>
</HEAD>
<BODY bgcolor="white" onLoad="startclock()
; timerONE=window.setTimeout">
<form name="clock" onSubmit="0">
<input type="text" name="face" size=13 value="">
</font>
</body>
Procedure Javascript





<script
language="Javascript">
// script per pop up
newwindow=window.open
(‘popup.htm', '',
'width=420,height=320,scroll
bars=yes')
window.opener=self
</script>
La procedura sopra
riportata, inserita in una
pagina attivata con un
collegamento, alla sua
apertura apre un pop up
(popup.asp)
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 l’immagine nella riga dei
collegamenti scrivere il nome del
documento con l’estensione e il
relativo percorso, se esso risiede in
una cartella diversa, ovvero usare
l’icona 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
l’applicativo che l’ho ha generato,
altrimenti mi ritorna errore
Visualizzare files di applicativi


Se invece vogliamo che il
documento appaia in pagina web
bisogna salvare il documento,
aprendolo con l’applicativo che lo
ha generato, e salvare con
l’estensione web.
Nel caso di documenti adobe
acrobat bisogna aver installato sul
proprio pc il reader
File word
in
formato
web
File pdf
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 l’altro 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
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