Corso su Frontpage
Costruire
Sviluppare
Manutenere
un sito Web
Dispensa web a cura di Raffaele Principe
1° lezione: dal progetto
all’implementazione


Progettare delle pagine multimediali
significa utilizzare più strumenti ed
oggetti: immagini, icone, suoni ecc. in
modalità ipertestuale. Modalità che ci
consente di collegare i diversi oggetti e
pagine progettate.
Innanzitutto è bene definire il progetto
nelle sue linee essenziali, cominciando
dalla home page e definendo i diversi
livelli che intendiamo implementare: la
cosiddetta story board.
1° lezione: dal progetto
all’implementazione


Uno schema tipo può essere il seguente:
Questo è uno schema gerarchico ad albero
che, partendo da un file (index), si dirama
su più livelli orizzontali e verticali.
1° lezione: dal progetto
all’implementazione


Per sviluppare il
progetto utilizziamo
FrontPage XP
(Procedura: start
– programmifrontpage)
Creiamo il nostro
web (Procedura:
File – Nuovo –
pagina o web –web
vuoto; oppure click
su web vuoto)
1° lezione: dal progetto
all’implementazione


Decidiamo
dove salvare il
nostro lavoro
e diamo un
nome al
nostro web
che apriremo
ogni volta che
vogliamo
aggiungere o
modificare
delle pagine
Procedura:
(web a pagina
singola –
Opzioni c:\nome_web –
Ok)
1° lezione: dal progetto
all’implementazione


Sul nostro
schermo appare
il web da noi
creato, due
cartelle ed il file
index.htm che
sarà la nostra
home page
Procedura: click
index.htm
1° lezione: dal progetto
all’implementazione
Al centro del rigo scriviamo il titolo
del web: Assessorato a ….
(Provincia di … oppure Regione…
…………..)
Click (on)
sull’icona
puntatore
e scriviamo il
testo che appare a fianco.
Se non ci serve più il puntatore
lo chiudiamo (off) cliccando
sopra l’icona puntatore
Adesso provate a dare uno
sfondo alla pagina.
Procedura: Formato – Tema Pagine selezionate (scegliamo
un tema) -OK
Se per oggi abbiamo finito,
salviamo il lavoro e usciamo
da FrontPage
Procedura: File - Salva
(oppure click sull’icona)- File Esci
2° lezione: i frames e i link


Apriamo Frontpage (Procedura: start – programmi-frontpage)
Costruiamo altre pagine (2° livello)
Presentazione
Progetti
Organizzazione
Servizi
Ubicazione uffici
2° lezione: i frames e i link




Creiamo le nuove pagine usando i frames
Procedura: file – nuovo – pagine o webModelli di pagina
Sciegliamo un modello semplice che divide
la mia pagine in due frames
Procedura: click su: Pagina con frameIntestazione-ok
2° lezione: i frames e i link




Impostiamo il Frame superiore e
inferiore
Procedura: Nuova pagina
Nel frame superiore scriviamo:
Assessorato ……………………….
Nel frame inferiore scriviamo la
Presentazione
Formattiamo i frame e aggiungiamo uno sfondo
alla pagina:
Procedura: Formato – tema (selezione) -ok
2° lezione: i frames e i link
Dopo aver descritto la Presentazione,
salviamo la nuova pagina creata.

Procedura: File – Salva con nome:
presentazione_index, click salva;

FP ci chiede di salvare il frame
superiore
Procedura: nome file: intestazione,
salva
FP ci chiede di salvare il frame inferiore
Procedura: nome file:
presentazione_home, salva
2° lezione: i frames e i link


Per salvare la pagina con frames, abbiamo
salvato prima “la cornice” e poi l’oggetto
(frame) superiore e quello inferiore. La
pagina viene gestita come un puzzle che
contiene diversi oggetti, usabili anche in
altri contesti.
Per richiamare la pagina dobbiamo cliccare
sul file: presentazione_index.htm. Provate
a richiamare, invece i due oggetti:
intestazione.htm e
presentazione_home.htm
2° lezione: i frames e i link




Adesso costruiamo la seconda pagina: Organizzazione e personale
Ripetiamo la procedura precedente
Procedura: file – nuovo – pagine o web-Modelli di pagina- pagina con frame intestazione– Ok
Questa volta nel frame superiore selezioniamo imposta pagina iniziale perché
vogliamo utilizzare il file Intestazione.htm
Dall’elenco dei files selezioniamo il file:
intestazione.htm- ok
Al frame inferiore selezioniamo: nuova
pagina
2° lezione: i frames e i link





Salviamo la pagina come abbiamo
fatto precedentemente.
Procedura: File, Salva con nome,
nome file: Organizzazione_index, ok
Salviamo di nuovo il frame inferiore,
mentre non ci viene richiesto di
salvare il frame superiore perché già
esistente
Procedura: nome file:
Organizzazione_home, ok
Ripetiamo questa procedura per le
altre tre pagine rimanenti
2° lezione: i frames e i link




I Link
Attivare dei link significa che rendiamo
“sensibile” una parola o immagine e che
cliccandoci sopra si attiva il
collegamento alla pagina che si vuole
visualizzare. Come l’indice del libro ci
indica dove si trova un capitolo o una
pagina, il link è una modalità
ipertestuale di indicizzare nel testo un
documento.
Proviamo a linkare i titoli dell’index con
le pagine costruite al 2° livello.
Selezioniamo dall’elenco cartelle il file:
index.htm
Per creare un link attivare la
Procedura: Selezioniamo il 1° titolo:
Presentazione, attiviamo l’icona
e dal
box visualizzato selezioniamo:
Presentazione_-index.htm– Ok
Ripetiamo la procedura per tutti gli altri
titoli dell’index.htm selezionando i rispettivi
files: Organizzazone_index.htm;
servizi_index.htm; Ubicazione_index.htm;
Progetti_index.htm:
2° lezione: i frames e i link
Come noterete, abbiamo
creare molti files. E’
importante notare la
differenza con word che
in un singolo file può
contenere molte pagine,
immagini ecc., mentre il
web, come dicevamo, è
costruito assemblando e
collegando vari oggetti
come in un puzzle.
Pertanto è bene
classificare i files con
ordine e con titoli
significativi
Proviamo come sarà
visualizzato sul browser
tramite anteprima di FP
2° lezione: i frames e i link

Come avrete notato,
attivato un collegamento
presente nel file
index.htm, non abbiamo
modo di ritornare
all’indice, se non con le
icone indietro o avanti
della barra di explorer.
Adesso vediamo come
tramite un bottone che
chiameremo back noi
attiveremo il collegamento
alla pagina index.htm
Procedura: aprire una pagina del 2° livello,
incollare un bottone back.gif, selezionarlo e
attivare il collegamento
selezionare il file
index.htm, selezionare il frame di destinazione,
scegliere: tutta la pagina
Ripetiamo la procedura per tutte le altre
pagine …._index

2° lezione: i frames e i link

Adesso costruiamo i collegamenti fra il 2° e il 3° livello
Costruiamo le pagine del 3° livello
Procedura: modelli di pagina, pagina vuota
Procedura: nuova pagina, (costruzione della pagina di descrizione
del 1° dipartimento. In questi casi non abbiamo bisogno di
costruire la pagina con frame perché la richiameremo nel frame
inferiore, tenendo fermo il frame con l’intestazione, come
vedremo in seguito), Salvare la pagina
Ripetiamo la procedura per tutti gli altri dipartimenti

Costruiamo le altre pagine del terzo livello




2° lezione: i frames e i link



Adesso dobbiamo costruire
i link fra il 2° e il 3° livello
e su ogni pagina del 3°
livello mettiamo un
bottone back, che può
essere lo stesso già usato,
per ritornare alla pagina
del 2° livello
Procedura: dal 2° al 3°
livello; (per ogni
dipartimento: attivare
collegamento )
dipartimento1_home.htm,
frame di destinazione:
principale
In tal modo decidiamo che
il file collegato sia
visualizzato nel frame
inferiore, mentre lasciamo
inalterato il frame
superiore (intestazione).
Provate il risultato con
anteprima.
3° lezione: le tabelle e le immagini








Finora abbiamo visto come suddividere
una pagina in frames.
Adesso vediamo come utilizzare le
tabelle non solo per inserire dati, ma
anche per comporre ulteriore un singolo
frame o pagina.
Esempio. Proviamo ad accostare al testo
un’immagine che migliori e completi
l’informazione che vogliamo
comunicare. Nel frame che descrive il 1°
dipartimento mettiamo una sua
fotografia. Creiamo due celle nel frame:
una con l’immagine e l’altra con la
descrizione.
Creiamo una pagina nuova
Procedura: file – nuovo – pagina vuota
In questo frame scriviamo al centro: 1°
Dipartimento: bilancio e risorse.
Inseriamo una tabella di una riga e due
colonne.
Procedura: menù tabella – inserisci –
tabella - ok
Possiamo anche formattare le
singole celle o l’intera tabella.
Procedura: selezionare la cella o
l’intera tabella. –Menù Tabella –
Proprietà – Cella ( o tabella) –ok
Clicchiamo dentro la 1 cella e
inseriamo un’immagine da
selezionare dall’archivio
3° lezione: le tabelle e le immagini
Possiamo inserire più
immagini nella stessa
cella, oppure crearne
di nuove. Le celle ci
aiutano a collocare
meglio più oggetti
sulla stessa pagina.
Ogni singola cella
può essere formattata
in modo diverso, col
tasto destro
(d’ispezione)
attiviamo proprietà e
ne definiamo gli
attributi.
Le immagini, a
differenza del testo,
vanno create
separatamente e
inserite in una cella o
3° lezione: le tabelle e le immagini






Oltre alle immagini, possiamo inserire
anche video e suono. Anch’essi sono
oggetti che devono essere presenti sul
server web, come vedremo più avanti,
altrimenti possono non essere
visualizzati e lo spazio da essi
occupato sulla pagina risultare vuoto.
Costruire pagine web significa non solo
conoscere un editor web come
FrontPage, ma anche saper usare altri
applicativi come paint per creare o
modificare immagini. Uno dei formati
più usati sul web è gif perché è il
“meno pesante” in rapporto alla
qualità dell’immagine creata.
Adesso vediamo come possiamo
modificare immagini esistenti o crearne
di nuove usando Paint.
Senza chiudere Frontpage attiviamo
Paint.
Procedura: Start –Programmi –Accessori
–Paint
Procedura: File – Apri – Cerca in – D –
nostro-nome (cartella del nostro Web) –
images – arcnavhh - apri
Dopo aver incollato il arcnahhh.gif con
il secchiello trasformiamo lo sfondo in
bianco, attiviamo inserimento testo e
scriviamo back. Salviamo il file nella
cartella images del nostro web per poi
utilizzarlo in tutte le pagine che
riterremo di farlo. Basta trascinare il
file sulla pagina, oppure attiviamo
inserisci immagine
4° lezione: segnalibro, mail, URL


Normalmente quando
attiviamo un collegamento, la
pagina ci viene visualizzata
dal suo inizio, ma nel caso di
documenti lunghi, può essere
utile che venga visualizzata a
partire da una data posizione.
Per far ciò attiviamo un
collegamento ad un
segnalibro che avremo
marcato sulla pagina da
richiamare.
Costruiamo una pagina che
contenga lo statuto dell’Ente e
vogliamo che attivando il
collegamento venga
visualizzato il capitolo che
parli dell’assessorato che
stiamo descrivendo.
4° lezione: segnalibro, mail, URL







Attivare un segnalibro
Costruiamo la pagina Statuto.htm
con pagina vuota, ovvero con un
solo frame, vi inseriamo il testo e
attiviamo il segnalibro al capitolo
che parla dell’assessorato ….
Procedura: selezione testo, menù
inserisci, segnalibro, ok
Salviamo la pagina, statuto.htm
Ritorniamo alla pagina
Dipartimento1_home.htm
Procedura: attiviamo
collegamento, selezioniamo
Statuto.htm, click su segnalibro,
selezioniamo il segnalibro: articolo
100, ok, selezioniamo il frame di
destinazione: nuova finestra
(provate anche le altre opzioni)
Provate in anteprima il risultato
4° lezione: segnalibro, mail, URL




Finora abbiamo visto come si
attiva un collegamento ad un
documento.
Adesso impariamo ad attivare un
collegamento ad un programma
di posta elettronica come outlook
per ricevere mail da chi visita le
nostre pagine.
Creiamo o recuperiamo
un’immagine (clip_mail.gif) e
scriviamo a fianco scrivi al
webmaster. Procedura:
Selezionare: clip+scritta, attivare
collegamento , cliccare
sull’icona - digitare l’indirizzo di
mail ( per esempio:
[email protected]) - Ok –Ok
Salvare le modifiche fatte.
4° lezione: segnalibro, mail, URL





Link a URL (sito)
Adesso proviamo a creare un
collegamento ad un sito web
Aggiungiamo alla nostra home
page un link alla Presidenza
dell’Ente
Procedura: selezionare l’oggetto
da collegare: Presidenza dell’Ente
– attivare collegamento digitare sulla riga indirizzo il sito
che si vuole collegare: (per
esempio:
http://www.provincia.roma.it/ Se
non compare la riga dell’indirizzo
selezionare: file di pagina ..
tornare a Frontpage per provare
la modifica in anteprima
Pubblicare il sito per internet




Finora abbiamo provato le nostre
pagine in anteprima, ovvero in off line.
Adesso vediamo come attivare la
procedura per pubblicare il nostro sito
per Internet, affinchè le nostre pagine
siano visitabili da tutto il mondo.
Per far ciò abbiamo bisogno di un
Provider che ospiti le nostre pagine e
ci assegni uno spazio (cartella) dentro
cui noi trasferiamo i nostri files per
essere visitabili in internet.
Avendo aperto un sito web (su una
unità C o D della nostra macchina), FP
ci consente di pubblicare le pagine
senza aver bisogno di un programma
FTP con cui trasferire i files al Provider
Procedura: (salviamo tutti i files aperti
che abbiamo modificato. Appare un
asterisco a fianco al nome del file) File,
Pubblica web, digitare l’indirizzo del
Provider (fornito dall’amministratore),
assegnare lo user name e password,
cliccare su pubblica
5° lezione: i moduli


I moduli servono per
raccogliere informazioni
che i visitatori delle nostre
pagine vogliono
trasmetterci. Per esempio
nome e cognome,
residenza, età, iscrizione
ad una mailing list ecc.
Prima di iniziare a costruire
un modulo, creiamo un
semplice file grazie.htm
che utilizzeremo in seguito.
Nella pagina inseriamo un
bottone home sul quale
costruiamo un link, a tutta
pagina, all’home page del
sito (index.htm).
5° lezione: i moduli








A questo punto costruiamo un
semplice esempio di pagina con
modulo.
Procedura: inserisci – modulo –
modulo
Inseriamo delle righe vuote con il
tasto invio
Creiamo i campi del modulo
Procedura: Inserisci – modulo –
casella di testo a riga singola;
Inserisci – modulo –casella di
testo a riga singola;
Inserisci – modulo –casella di
testo a riga singola;
Inserisci – modulo –casella di
testo a scorrimento;
Accanto ad ogni casella scriviamo
una didascalia di orientamento
Didascalie delle
caselle di testo
5° lezione: i moduli






Per poter ricevere le informazioni
raccolte, possiamo utilizzare un
indirizzo di posta elettronica che
ci farà avere una mail per ogni
modulo riempito.
Con il cursore dentro il modulo ..
Procedura: Inserisci – modulo –
proprietà modulo –Invia a –
Indirizzo di posta elettronica:
[email protected] –ok
Se vogliamo rendere più
accattivante la risposta usiamo il
file grazie.htm di risposta
automatica all’invio del modulo.
Attiviamo il bottone Opzioni
Procedura: opzioni –pagina di
conferma, grazie.htm – ok
5° lezione: i moduli


All’apparire di questa
finestra rispondiamo
con un click su No
Salviamo la pagina
che chiameremo
modulo.htm
Ovviamente dobbiamo creare
un link su una pagina da cui
richiamare modulo.htm. Per
esempio possiamo
aggiungerlo alla pagina
organizzazione_home.htm,
ricordandoci di scegliere
come frame di destinazione:
principale
I moduli per verificare se
funzionano devono essere
prima pubblicati sullo spazio
5° lezione: i linguaggi html e javascript




Finora per scrivere le nostre
pagine abbiamo usato Frontpage,
che è un editor web, che per noi
scrive in Html, linguaggio che
viene interpretato dal browers di
internet.
Ecco il listato del nostro file
index.htm che possiamo
visualizzare da Frontpage
cliccando sul menù in basso html,
oppure in Explorer selezionando
dal menù Visualizza, HTML.
Per scrivere pagine web
complesse usiamo non solo html,
ma anche molti altri linguaggi di
programmazione. Essi devono
essere comunque compatibili con
l’html ed essere integrabili in
esso.
Uno dei linguaggi più utilizzati è
Javascript
5° lezione: i linguaggi html e javascript


Creiamo una pagina: privacy.htm
che contenga il richiamo al
rispetto dei dati personali. Tale
pagina verrà visualizzata in una
nuova finestra cliccando su
trattamento dati personali che
inseriremo nel file modulo.htm
Dopo aver scritto il
testo,visualizziamo la pagina in
html ed aggiungiamo una
semplice procedura in javascript
per chiudere la finestra. Salviamo
la pagina.
<p><a ref= "javascript: onClick =
close();" STYLE="font:16px
Garamond,Times Nev Roman,
Palatino; font-style:italic;"><font
size="2">Chiudi
la finestra </font></a> </p>
5° lezione: i linguaggi html e javascript


Richiamiamo il file modulo.htm ed
inseriamo il bottone trattamento
dati personali che abbiamo creato
con paint. Nello script del file
inseriamo due semplici procedure
in javascript per visualizzare la
pagina privacy.htm in una finestra
senza le barre degli strumenti.
All’inizio del listato html
aggiungiamo la procedura in
javascript che definisce la funzione
di apertura della finestra; dove
collochiamo il bottone scriviamo la
funzione di chiamata del file
privacy.htm
<script language="Javascript">
function apri2(){
nuova=open ("privacy.htm","",
"width=350,height=300")
}
</script>
<p><img
src=images/tratt_dati_pers3.gif"
width="142" height="20" border="0"
onClick="apri2()"
alt="privacy"></p>