Corso di Formazione PON 1.1 per l’ISTITUTO A.DE PACE, Lecce
“ Nuovi Strumenti e Tecnologie Interattive per la Didattica”
Realizzazione siti web e strumenti a supporto
INTRODUZIONE A
FRONT PAGE
Dott.ssa Antonella Dell’Aquila, Area Sistemi Informativi e Knowledge Management, Consorzio Cetma
Nuovi Strumenti e Tecnologie Interattive per la Didattica – Istituto A. De Pace, Lecce
1
CHE COS’E’ FRONT PAGE
Front Page è un editor html, che fa parte del
pacchetto degli applicativi OFFICE di Microsoft.
E’ un editor che adotta la modalità WYSIWYG,
cioè mostra le pagine come poi saranno
visualizzate dal browser. In pratica, consente di
editare una pagina html senza sapere nulla di
questo linguaggio, in quanto il programma stesso
provvede a tradurre la pagina che noi prepariamo
come se si trattasse di un documento Word.
Nuovi Strumenti e Tecnologie Interattive per la Didattica – Istituto A. De Pace, Lecce
2
PER INIZIARE…
AVVIARE
FRONT PAGE
Dal menu START
selezionare
PROGRAMMI,
e poi doppio clic su
FRONT PAGE.
Nuovi Strumenti e Tecnologie Interattive per la Didattica – Istituto A. De Pace, Lecce
3
LOCALIZZARE UN SITO
È importante localizzare
esattamente il sito, cioè
stabilire dove le pagine e
tutti gli elementi che
inseriremo saranno salvati.
Questo consentirà al browser di
ritrovarli, una volta pubblicato il sito o
quando avremo distribuito l’ipertesto.
Ecco la procedura:
Menu FILE -> NUOVO -> WEB
Nuovi Strumenti e Tecnologie Interattive per la Didattica – Istituto A. De Pace, Lecce
4
Apparirà questa finestra:
Qui sceglieremo il modello
di sito che vogliamo realizzare
Selezioniamo con un clic,
ed immettiamo la directory
dove il il sito verrà salvato,
ed il nome del sito.
N.B: Se non diversamente
specificato, F. P. crea in
modo automatico una
cartella WEB/mioweb in C.
Confermare con OK
Nuovi Strumenti e Tecnologie Interattive per la Didattica – Istituto A. De Pace, Lecce
5
A questo punto, avremo la nostra cartella, in cui sarà allocato il
nostro sito.
In essa, F. P. crea automaticamente altre due cartelle,
PRIVATE (in cui verranno salvati tutti i file che non saranno
visualizzati) e IMAGES (dove potremo salvare tutte le immagini
del nostro sito). Volendo, possiamo creare altre cartelle (per
esempio, SUONI).
Front Page avrà provveduto a creare automaticamente anche la
prima pagina del nostro sito, denominandola INDEX (ma,
volendo, possiamo rinominarla).
Questa è la prima pagina che dovremo preparare.
Per aprirla, si procede così:
Menu FILE -> APRI
Nuovi Strumenti e Tecnologie Interattive per la Didattica – Istituto A. De Pace, Lecce
6
Si aprirà questa finestra:
Ecco la cartella “mioweb” con le sue
sottocartelle e la pagina “index”.
Basta selezionare INDEX e confermare
con APRI.
Nuovi Strumenti e Tecnologie Interattive per la Didattica – Istituto A. De Pace, Lecce
7
Se precedentemente avremo scelto di costruire interamente il
nostro sito, e quindi avremo selezionato “web vuoto”, la pagina
“index” ci apparirà completamente bianca.
Se, invece, avremo scelto un modello,
personale”, la pagina ci apparirà così:
per
esempio
“Web
Ovviamente, modificheremo questa pagina
secondo le nostre esigenze!
Nuovi Strumenti e Tecnologie Interattive per la Didattica – Istituto A. De Pace, Lecce
8
Supponiamo di avere scelto di lavorare su un Web vuoto, e di
dover costruire interamente in nostro sito, cominciando dalla
home page (pagina iniziale).
Ci si propongono due alternative: a) applicare un tema
b) fare tutto da soli.
Ecco come fare nel primo caso:
Menu FORMATO -> TEMA
Nuovi Strumenti e Tecnologie Interattive per la Didattica – Istituto A. De Pace, Lecce
9
Ecco la finestra per il settaggio del tema:
Si può scegliere il tema,
a quali pagine applicarlo, alcune caratteristiche,
se apportare eventuali modifiche. Alla fine, confermare con OK.
Nuovi Strumenti e Tecnologie Interattive per la Didattica – Istituto A. De Pace, Lecce
10
Prendiamo in considerazione il secondo caso: vogliamo fare tutto da soli.
Ecco la nostra pagina “index” vuota:
Dobbiamo scegliere:
lo stile del paragrafo
il tipo di carattere
le dimensioni
lo stile carattere (grassetto, corsivo,sottolineato)
l’allineamento
il colore del carattere
Nuovi Strumenti e Tecnologie Interattive per la Didattica – Istituto A. De Pace, Lecce
11
In alternativa, possiamo impostare tutte queste proprietà dal
menu FORMATO -> CARATTERE e FORMATO -> PARAGRAFO
Nuovi Strumenti e Tecnologie Interattive per la Didattica – Istituto A. De Pace, Lecce
12
APPLICARE UNO SFONDO
Per rendere la nostra home page più accattivante, possiamo
decidere di applicare uno sfondo.
Possiamo scegliere se colorarlo semplicemente, oppure se
inserire come sfondo una bella immagine.
Ecco come procedere nei due casi:
Menu FORMATO -> SFONDO
In alternativa:
Clic destro ->Proprietà pagina
-> sfondo
Nuovi Strumenti e Tecnologie Interattive per la Didattica – Istituto A. De Pace, Lecce
13
Ecco la finestra che verrà visualizzata:
Da qui è
possibile
settare:
Colore dello
sfondo
Colore del
testo
Colori dei
collegamenti
Alla fine,
confermare
con OK.
Nuovi Strumenti e Tecnologie Interattive per la Didattica – Istituto A. De Pace, Lecce
14
Se, invece, vogliamo scegliere come sfondo un’immagine,
possiamo farlo sempre dalla medesima finestra
Segno di spunta qui
(clic nel quadretto)
Quindi, clic
su “sfoglia”
Nuovi Strumenti e Tecnologie Interattive per la Didattica – Istituto A. De Pace, Lecce
15
Da questa finestra possiamo selezionare la nostra immagine.
Se l’immagine è già presente nel nostro
sito, basta fare doppio clic sulla cartella
“images” e selezionare il file che ci
interessa.
Nuovi Strumenti e Tecnologie Interattive per la Didattica – Istituto A. De Pace, Lecce
Se invece
l’immagine si
trova altrove,
occorre cliccare
sul pulsante di
ricerca.
16
Si apre la finestra che ci consente di selezionare la directory e la
cartella in cui si trova l’immagine che vogliamo inserire come sfondo.
Nuovi Strumenti e Tecnologie Interattive per la Didattica – Istituto A. De Pace, Lecce
17
INSERIRE UN SUONO DI
SOTTOFONDO
E se, oltre ad uno sfondo gradevole, volessimo inserire un
file musicale come sottofondo?
Bisogna sempre accedere alle proprietà pagina:
Clic destro -> Proprietà pagina - Generale
Nuovi Strumenti e Tecnologie Interattive per la Didattica – Istituto A. De Pace, Lecce
18
Digitare il
percorso o
fare clic sul
pulsante
SFOGLIA per
aprire la
finestra di
ricerca file
Settare la
modalità di
esecuzione
(numero di
cicli o ciclo
continuo)
Confermare
con OK
Nuovi Strumenti e Tecnologie Interattive per la Didattica – Istituto A. De Pace, Lecce
19
INSERIRE IMMAGINI
A questo punto la nostra pagina “index” è bene impostata:
possiamo scrivere il nostro testo e, volendo, possiamo anche
inserire delle immagini o delle clip-art. Vediamo come.
Menu INSERISCI -> Immagine -> da file ( o clip art)
Nuovi Strumenti e Tecnologie Interattive per la Didattica – Istituto A. De Pace, Lecce
20
Se si vuole inserire un’immagine da file, si apre la finestra di
selezione immagine (come per l’inserimento dell’immagine di
sfondo). Se invece si desidera cercare una clip art, si apre la
finestra della raccolta clip art, dove potremo cercare quella che
ci interessa.
Nuovi Strumenti e Tecnologie Interattive per la Didattica – Istituto A. De Pace, Lecce
21
INSERIRE UNA TABELLA
Se vogliamo inserire una tabella (potremmo farlo anche solo
per organizzare meglio il contenuto della nostra pagina!) ecco
come dobbiamo procedere:
Menu TABELLA -> INSERISCI-> TABELLA
Nuovi Strumenti e Tecnologie Interattive per la Didattica – Istituto A. De Pace, Lecce
22
Si apre la finestra dalla quale possiamo settare le proprietà
della tabella: numero di righe e colonne, larghezza, layaut.
Confermare infine con OK
Nuovi Strumenti e Tecnologie Interattive per la Didattica – Istituto A. De Pace, Lecce
23
MODIFICARE UNA TABELLA
Inserita una tabella, noi possiamo:
♦ renderla invisibile (settando a 0 la dimensione bordo)
♦ modificare dimensioni e colore dei bordi
♦ colorare lo sfondo o inserire un’immagine di sfondo
♦ dividere o unire le celle
♦ convertire la tabella in testo
Per le prime tre operazioni
dobbiamo accedere alla
finestra della proprietà tabella.
Menu TABELLA -> PROPRIETÀ ->
TABELLA
Nuovi Strumenti e Tecnologie Interattive per la Didattica – Istituto A. De Pace, Lecce
24
Da qui possiamo
modificare la
nostra tabella
come ci pare.
Allo stesso modo
possiamo
intervenire su una
cella.
In questo caso,
dobbiamo aprire la
finestra delle
proprietà cella.
Nuovi Strumenti e Tecnologie Interattive per la Didattica – Istituto A. De Pace, Lecce
25
Per dividere o unire le celle di una tabella, occorre selezionare le
celle su cui si intende agire, poi accedere al menu TABELLA e
selezionare UNISCI CELLE oppure DIVIDI CELLE, e settare poi il
numero di righe o colonne che si vogliono creare.
Nuovi Strumenti e Tecnologie Interattive per la Didattica – Istituto A. De Pace, Lecce
26
Per convertire la tabella in testo, con il cursore del mouse dentro la
tabella, si agisce sul menu TABELLA -> CONVERTI-> TABELLA IN
TESTO
Con lo stesso procedimento, si può convertire in tabella un testo selezionato.
Nuovi Strumenti e Tecnologie Interattive per la Didattica – Istituto A. De Pace, Lecce
27
I COLLEGAMENTI IPERTESTUALI
Ora vediamo come inserire in una pagina un
ipertestuale, cioè un link ad un altro documento.
collegamento
Supponiamo che questa sia la
mia pagina index. Voglio
inserire un link alla pagina
seconda (che avrò già
provveduto a salvare nel mio
web).
Prima di tutto, occorre
selezionare la parola (o anche
l’immagine) da cui deve
partire il collegamento.
Quindi, andare al menu
INSERISCI ->
collegamento ipertestuale
Nuovi Strumenti e Tecnologie Interattive per la Didattica – Istituto A. De Pace, Lecce
28
Si apre la finestra del collegamento.
Se il collegamento
deve portare ad un
altro file presente
nel mio Web – ad
esempio, pagina
seconda – basta fare
clic sul file, ed il
percorso apparirà nel
campo indirizzo.
Non resta che
confermare con OK
Nuovi Strumenti e Tecnologie Interattive per la Didattica – Istituto A. De Pace, Lecce
29
Ecco il file
selezionato
con un clic
Ecco la
destinazione
del link nel
campo
indirizzo
Nuovi Strumenti e Tecnologie Interattive per la Didattica – Istituto A. De Pace, Lecce
30
Il collegamento ipertestuale è stato inserito. La parola da cui parte il
link cambia colore, ed il cursore del mouse, passando sopra di essa,
si trasforma in manina (si può controllare visualizzando l’anteprima).
Nuovi Strumenti e Tecnologie Interattive per la Didattica – Istituto A. De Pace, Lecce
31
E se invece il link punta ad un file sterno al Web, o ad altro sito web,
o ad un indirizzo e-mail?
Osserviamo la finestra del collegamento:
Se si conosce il
percorso del file, o
l’indirizzo del sito,
basta digitarlo
qui.
In caso contrario,
si agisce su
questi pulsanti:
Per esplorare il Web
con il browser
Per cercare un file
nel nostro computer
Per inserire un
indirizzo e.mail
Per creare una nuova
pagina ed un
collegamento ad essa.
Nuovi Strumenti e Tecnologie Interattive per la Didattica – Istituto A. De Pace, Lecce
32
Trovato il file o l’indirizzo che ci interessa, si seleziona con un
clic, si conferma con OK, ed il collegamento è realizzato.
Nuovi Strumenti e Tecnologie Interattive per la Didattica – Istituto A. De Pace, Lecce
33
ATTENZIONE!!!
Naturalmente, il collegamento ad un sito Web funziona solo se si è
connessi alla rete Internet.
Per il collegamento ad un file presente nel nostro Web o ad un
indirizzo e-mail non ci sono problemi.
Quando, invece, ci colleghiamo ad un altro file presente nel computer
locale, dobbiamo ricordare che il link funziona solo con il nostro
computer; quando il sito sarà in rete (o l’ipertesto sarà distribuito,
per esempio, su CD ROM), il link non funzionerà più, poiché il browser
non riuscirà a trovare il file a cui il collegamento punta.
Cosa fare, allora? Semplice: se vogliamo collegarci ad un file già
presente nel nostro HD, basta avere l’accortezza di copiarlo e salvarlo
nella cartella del nostro web, e poi procedere creando un collegamento
ad un file interno.
Nuovi Strumenti e Tecnologie Interattive per la Didattica – Istituto A. De Pace, Lecce
34
LA BARRA DELLE VISUALIZZAZIONI
Questa è la barra delle visualizzazioni del nostro web, che
possiamo vedere a sinistra della nostra pagina.
Il pulsante PAGINA ci consente di visualizzare sullo
schermo la pagina che ci interessa.
Il pulsante CARTELLE ci consente di vedere tutte le
cartelle ed i file del nostro Web e di organizzarli come
ci pare.
Il pulsante REPORT ci consente di analizzare il Web e di
gestirlo.
Il pulsante STRUTTURA ci permette di creare la
struttura del Web (una sorta di mappa).
Il pulsante COLLAGAMENTI ci permette di controllare i
collegamenti del nostro Web.
Il pulsante ATTIVITA’ ci permette di gestire delle
attività legate al Web.
Nuovi Strumenti e Tecnologie Interattive per la Didattica – Istituto A. De Pace, Lecce
35
Il mio web in visualizzazione pagina
Nuovi Strumenti e Tecnologie Interattive per la Didattica – Istituto A. De Pace, Lecce
36
Tutte le cartelle ed i file del mio web
Nuovi Strumenti e Tecnologie Interattive per la Didattica – Istituto A. De Pace, Lecce
37
Ecco il report del mio web
Nuovi Strumenti e Tecnologie Interattive per la Didattica – Istituto A. De Pace, Lecce
38
Ecco la struttura del mio web
Nuovi Strumenti e Tecnologie Interattive per la Didattica – Istituto A. De Pace, Lecce
39
Ecco i collegamenti della mia pagina index
(si visualizzano i collegamenti da e per la pagina selezionata)
Nuovi Strumenti e Tecnologie Interattive per la Didattica – Istituto A. De Pace, Lecce
40
Nel mio web non è impostata nessuna attività!
Nuovi Strumenti e Tecnologie Interattive per la Didattica – Istituto A. De Pace, Lecce
41
LA STRUTTURA
Delle visualizzazioni possibili, quelle che ci interessano di più sono la
visualizzazione PAGINA – che normalmente adoperiamo per lavorare
sulle nostre pagine web – e la visualizzazione STRUTTURA, che ci
consente di progettare il nostro sito, creando automaticamente le
pagine che lo compongono.
Vediamo ora come si fa a creare una struttura.
Passo 1 – Localizzare il sito web – In tal modo Front Page crea
automaticamente la prima pagina o home page o index.
Passo 2 – Aprire il Web e porsi in visualizzazione STRUTTURA.
Nuovi Strumenti e Tecnologie Interattive per la Didattica – Istituto A. De Pace, Lecce
42
Questo è il mio nuovo web (mioweb1) in visualizzazione struttura. Come si
vede, è presente solo la pagina index.
Nuovi Strumenti e Tecnologie Interattive per la Didattica – Istituto A. De Pace, Lecce
43
Dobbiamo ora creare la struttura, cominciando dalle pagine di 1° livello,
cioè le pagine collegate direttamente alla home page.
Ecco la procedura:Menu FILE -> NUOVO -> PAGINA
Nuovi Strumenti e Tecnologie Interattive per la Didattica – Istituto A. De Pace, Lecce
44
Ed ecco che la nostra struttura si è arricchita
di una nuova pagina.
Per creare altre pagine di 1° livello, basta
ripetere l’operazione.
Lo stesso risultato si
ottiene puntando il mouse
dentro la pagina index,
facendo clic col pulsante dx
e selezionando dal menu
contestuale “Nuova Pagina”.
Nuovi Strumenti e Tecnologie Interattive per la Didattica – Istituto A. De Pace, Lecce
45
Ed ecco la nostra struttura con la home page ed una serie di
pagine di 1° livello, che andranno rinominate secondo le nostre
esigenze (clic destro nella pagina e selezionare dal menu
contestuale RINOMINA, quindi nel campo nome divenuto attivo
digitare il nuovo nome della pagina).
Nuovi Strumenti e Tecnologie Interattive per la Didattica – Istituto A. De Pace, Lecce
46
Come si può notare, durante la creazione di pagine di 1° livello la home page
risulta selezionata, perché ad essa si collegheranno le pagine create.
Per creare pagine di 2° livello, dovremo selezionare di volta in volta la pagina di
1° livello a cui esse dovranno collegarsi ( o puntare il mouse nella pagina, se
vogliamo utilizzare il tasto dx).
Nuovi Strumenti e Tecnologie Interattive per la Didattica – Istituto A. De Pace, Lecce
47
Ed ecco il nostro Web con tutte le pagine che Front Page ha provveduto a creare
intanto che noi le includevamo nella struttura (Per visualizzare l’elenco dei file,
basta fare clic sul pulsante “Elenco cartelle” nella barra degli strumenti).
Nuovi Strumenti e Tecnologie Interattive per la Didattica – Istituto A. De Pace, Lecce
48
La struttura andrebbe creata come prima operazione, dopo aver
localizzato il web, perché è buona norma pianificare chiaramente come il
nostro sito (o il nostro ipertesto) dovrà essere composto.
Tuttavia, è possibile creare la struttura anche dopo aver creato le pagine
del web.
Questa operazione è necessaria nel caso in cui volessimo usare i BORDI
CONDIVISI e fare in modo che F. P. crei in automatico i pulsanti di
spostamento fra le pagine.
Ecco come si fa:
In visualizzazione struttura e con l’elenco dei file visualizzato, fare clic
su ciascuna pagina e trascinarla nel campo struttura, esattamente sotto
la pagina a cui dovrà essere collegata (nel caso di pagine di 1° livello, ad
esempio, trascineremo il file e rilasceremo il pulsante del mouse sotto
home page).
VEDI IMMAGINE
Nuovi Strumenti e Tecnologie Interattive per la Didattica – Istituto A. De Pace, Lecce
49
Nuovi Strumenti e Tecnologie Interattive per la Didattica – Istituto A. De Pace, Lecce
50
I BORDI CONDIVISI
I bordi condivisi sono delle aree
delle nostre pagine Web,
collocate lungo i bordi (superiore,
inferiore, sinistro o destro, a
nostra scelta) che contengono i
pulsanti di spostamento ed altri
elementi che noi desideriamo far
apparire in tutte le pagine senza
doverli inserire ogni volta.
Tali elementi vengono, appunto,
condivisi.
Per inserire i bordi condivisi,
occorre agire sul menu
FORMATO->BORDI CONDIVISI
in visualizzazione PAGINA.
Nuovi Strumenti e Tecnologie Interattive per la Didattica – Istituto A. De Pace, Lecce
51
Si apre la finestra di dialogo, da cui possiamo scegliere a quali pagine applicare
i bordi, la collocazione del bordo (o dei bordi) e se vogliamo che F. P. inserisca
in automatico i pulsanti di spostamento (cioè i link alle altre pagine).
Quest’ultima opzione, però,è possibile solo se precedentemente avremo creato
una struttura.
Nuovi Strumenti e Tecnologie Interattive per la Didattica – Istituto A. De Pace, Lecce
52
Supponiamo di voler inserire in tutte le pagine del nostro Web il bordo
sinistro, e voler includere i pulsanti di spostamento.
Dopo aver operato il settaggio ed aver confermato con OK, nella mia
pagina appare il bordo con una scritta:
Per modificare le
proprietà della barra di
spostamento,
selezionare la scritta
con un clic, fare clic col
pulsante dx del mouse e
dal menu contestuale
scegliere Proprietà
barra di spostamento.
Nuovi Strumenti e Tecnologie Interattive per la Didattica – Istituto A. De Pace, Lecce
53
Si aprirà questa finestra di dialogo:
Da qui si può
scegliere a quali
pagine devono
condurre i pulsanti,
nonché l’aspetto
degli stessi.
Io ho scelto di far
apparire in
ciascuna pagina le
pagine figlie, cioè
le pagine che
dipendono da essa.
Nuovi Strumenti e Tecnologie Interattive per la Didattica – Istituto A. De Pace, Lecce
54
E questa è l’anteprima della pagina index del mio web, con i collegamenti a
tutte le pagine di 1° livello.
Nuovi Strumenti e Tecnologie Interattive per la Didattica – Istituto A. De Pace, Lecce
55
Volendo, si può scegliere di non includere i pulsanti di spostamento,
e personalizzare i bordi con l’inserimento di elementi e testo a
nostra scelta.
Nuovi Strumenti e Tecnologie Interattive per la Didattica – Istituto A. De Pace, Lecce
56
IN CONCLUSIONE…
Dovremmo essere in condizione di realizzare il nostro primo,
semplice sito web.
Certo, il programma è molto più complesso ed include funzioni
che qui non prenderemo in considerazione (form, fogli di stile,
altri componenti come database, pulsanti e immagini rollover,
applet Java…)
GRAZIE A TUTTI PER L’ATTENZIONE!
e-mail: [email protected]
Materiale tratto da http://www.achindamo.net/materiali.htm CIRCOLO DIDATTICO “G. LOMBARDO RADICE” CATONA DI REGGIO CALABRIA
Nuovi Strumenti e Tecnologie Interattive per la Didattica – Istituto A. De Pace, Lecce
57