Testo Esercitazione

Versione 6 - 18/05/2010
Versione 6 - 18/05/2010
Capitolo XI
Esercitazione n. 11: Creazione di un sito web con FrontPage
Scopo GHOO¶HVHUFLWD]LRQH: Creare un sito Web che fornisce informazioni su un negozio di articoli sportivi chiamato Championzone.
Oltre alla home page, il sito conterrà sei pagine, secondo la struttura
riportata nella figura successiva.
Home page
PAGINA LASCIATA BIANCA INTENZIONALMENTE
Chi siamo
Prodotto_1
)
Prodotti
Collegamenti
Raccolta
foto
Prodotto_2
Le pagine del sito web che si dovrebbero ottenere (in termini di forma e contenuti) eVHJXHQGRO¶HVHUFLWD]LRQHVRQRULSRUWDWHDOO¶LQWHUQRGHOFDSLWRORGHLUiVXOWDWL&RQWUROODOHHXWLOL]]DOHFRPHULIHULPHQWRGXUDQWHO¶HVHUFLWD]LRQH
A ± Creazione del sito web e della pagina iniziale (home page)
1.
106
Crea una directory di lavoro sul disco fisso C:\EsercFpage.
$OO¶LQWHUQR GL TXHVWD GLUHFWRU\ FUHD XQD VRWWR-directory
Championzone.
107
Versione 6 - 18/05/2010
2.
5HFXSHUD GDO VLWR L ILOH QHFHVVDUL SHU O¶HVHUFLWD]LRQH FRPH Gescritto nel capitolo introduttivo: materiale es11.zip (file compresso contenente il materiale di base ± testi ed immagini ± per
realizzare il sito web). Salva il file compresso nella cartella
C:\EsercFpage ed estrai qui dentro tutti i file contenuti.
3.
Avvia FrontPage e crea un nuovo web (menù File > Nuovo >
Pagina o Web).
ATTENZIONE DOO¶DYYLR FrontPage riapre il sito web della precedente sessione di lavoro (se la cartella web è stata spostata o rimossa,
FrontPage mostrerà un messaggio di errore). In tal caso, chiudi il sito
tramite menù File > Chiudi Web
4.
$OO¶LQWHUQR GHO ULTXDGUR DWWLYLWj SRVWR VXOOD VLQLVWUD GHOOD
schermata principale, seleziona Modelli sito web, quindi tra i
modelli proposti, scegli il modello Web a pagina singola.
5.
Scegli la posizione di salvataggio del web, specificando la
directory web C:\EsercFpage\Championzone\ (creata nel
punto precedente), eventuDOPHQWHFRQO¶DLXWRGHOSXOVDQWHSfoglia (posizionato sulla parte destra della finestra).
Alla pressione del tasto OK, FrontPage trasformerà la
108
Versione 6 - 18/05/2010
directory Championzone in una cartella web e creerà al suo
interno la home page (file index.htm), identificatDGDXQ¶LFRQD
con il simbolo della casa. Dopo il salvataggio, il titolo della finestra di FrontPage deve contenere il nome ed il percorso del
sito web creato.
6.
Assicurati che il pulsante Elenco Cartelle sia
selezionato, per vederHO¶HOHQFRGHOOHFDUWHOOHGHO
sito nella parte centrale.
La finestra iniziale di FrontPage, relativa al sito
appena creato, deve apparire come nella figura successiva.
NOTA: Nel riquadro Elenco cartelle viene mostrata la struttura della cartella web associata al sito in lavorazione, delle sue sottocartelle e dei file contenuti nel sito. Eseguendo in questo riquadro le operazioni di spostamento
file, copia file, ridenominazione file, FrontPage aggiorna automaticamente
tutti i collegamenti ed i riferimenti nel sito in lavorazione. Inoltre tali modifiche sono direttamente riflesse nel File System.
109
Versione 6 - 18/05/2010
7.
1HOO¶Elenco cartelle, fai doppio clic sulO¶LFRQD del file index.htm per aprirlo in visualizzazione Pagina (questa visualizzazione consente di modificare la pagina).
,QVHULVFL QHOOD SULPD ULJD O¶LPPDJLQH FRQWHQXWD QHO ILOH czlogo.gif (ILOHIRUQLWRDOO¶LQWHUQRGHOPDWHULDOHGLSDUWHQ]D): menù
Inserisci > Immagine> Da File, quindi seleziona il file czlogo.gif (che si trova nella cartella C:\EsercFpage) Ripeti la
procedura, per inserire sulla parte destra della prima riga,
O¶LPPDJLQH FRQWHQXWD QHO ILOH FrontPage.gif (logo di
FrontPage).
ATTENZIONE: le due immagini devono essere posizionate sulla
stessa riga, la prima allineata a sinistra, la seconda allineata a destra.
Per ottenere ciò, occorre modificare opportunamente la disposizione
delle immagini (clic con il tasto destro sulla prima immagine > nel
menù contestuale fai clic su Proprietà immagine > imposta la Disposizione testo VXOO¶RS]LRQH A sinistra 5LSHWL O¶RSHUD]LRQH SHU O¶DOWUD
LPPDJLQHVFHJOLHQGRO¶RS]LRQHA destra).
8.
&UHDXQFROOHJDPHQWRLSHUWHVWXDOHGDOO¶LPPDJLQHDSSHQDLQVerita: seleziona il logo di FrontPage facendo clic su di esso,
quindi menù Inserisci > Collegamento Ipertestuale. Nella finestra di impostazione del collegamento, scegli File o Pagina
Web Esistente, quindi nel campo Indirizzo inserisci
www.microsoft.com/frontpage (nota che FrontPage aggiunge
automaticamente il prefisso http). Premi il pulsante OK per
confermare e tornare alla home page.
110
Versione 6 - 18/05/2010
9.
Digita il seguente testo Benvenuti in Championzone! Esplorate il nostro sito per conoscere i nostri articoli sportivi, visionate i nostri prodotti e visitate la nostra raccolta fotografica.
10.
Posiziona tutto il testo della pagina al centro: allinea al centro.
11.
Salva la pagina nella directory web Championzone (menù File
> Salva o Salva con Nome, nome file index.htm)
ATTENZIONE: per un corretto funzionamento, il nome del file contenente la home page di un sito di FrontPage deve obbligatoriamente
essere index.htm.
11a.
assegna un titolo a piacere alla pagina (utilizzando il pulsante Cambia titolo)
11b.
quando ti viene richiesto, salva i file immagine già incorporati nella home page (logo Championzone e logo
FrontPage) nella sotto-cartella Images.
B ± Creazione della struttura del sito web complessivo
12.
Passa alla visualizzazione Struttura, facendo clic sul relativo
pulsante nella barra delle visualizzazioni (posta nella
parte sinistra della finestra) e crea la struttura del sito:
IDL FOLF VXOO¶LFRQD Nuova pagina sulla barra degli
strumenti standard. FrontPage crea una nuova pagina denominata Nuova pagina 1 posizionandola sotto la pagina index.htm (home page).
Ripeti altre
tre volte per
creare le altre tre pagine
del sito. Rinomina tutte
le
pagine
create (clic
con il tasto
111
Versione 6 - 18/05/2010
Versione 6 - 18/05/2010
O¶RSHUD]LRQHSHULOVHFRQGRILOH. Se hai eseguito correttamente
questa operazione, nella visualizzazione Struttura risulta lo
stesso schema del sito mostrato alla pagina 1 GHOO¶HVHUFLWD]LRQH.
destro su ogni pagina, quindi Rinomina), come segue: Chi
siamo, Prodotti, Raccolta foto e Collegamenti
C ± Inserimento dei contenuti nelle pagine
13.
14.
Fai doppio clic sulla pagina Chi siamo in visualizzazione
Struttura: con questa operazione vengono salvati tutti i file
(con un nome corrispondente al titolo inserito al passo precedente) e si passa automaticamente in visualizzazione Pagina.
Controlla che i file creati e salvati nella cartella web abbiano i
QRPLFRUUHWWLYHULILFDDOO¶LQWHUQRGHOO¶Elenco cartelle che ogni
file sia correttamente nominato e che ci sia corrispondenza tra i
nomi dei file e le varie pagine). Rinomina eventuali file e pagine che hai dimenticato di nominare.
Importa nel sito web le pagine html fornite nel materiale di partenza (file Prod_1.htm e Prod_2.htm): menù File > Importa
> Aggiungi file, quindi seleziona i due file nella cartella
C:\EsercFpage, e poi clicca su OK. I file vengono aggiunti
QHOODOLVWDGHOO¶Elenco cartelle.
Inserisci i due file nella struttura del sito, sotto la pagina Prodotti: torna alla visualizzazione Struttura, seleziona il file
prod_1.htm QHOO¶Elenco cartelle e trascinalo con il mouse in
una posizione sottostante alla pagina Prodotti (ripeti
112
15.
Inserisci il contenuto del file Informazioni.txt nella pagina
Chi siamo (apri la pagina Chi Siamo in visualizzazione Pagina, quindi menù Inserisci > File, opzione Paragrafi normali,
oppure apri il file con Blocco Note e poi Copia-Incolla).
16.
Inserisci il contenuto del file Infoprodotti.rtf nella pagina
Prodotti (menù Inserisci > File, oppure apri il file con
Microsoft Word e poi Copia-Incolla).
17.
Aggiungi al sito web corrente tutti i file immagine forniti: passa alla visualizzazione Cartelle, clic sulla cartella Images, menù File > Importa > Aggiungi File (seleziona tutti i file .gif e
.jpg forniti nel materiale di partenza tranne quelli già inseriti).
In alternativa, usa le funzioni di Copia-Incolla file. Al termine
GHOO¶RSHUD]LRQH controlla che tutti i file .gif e .jpg necessari
siano contenuti nella cartella Images del sito web.
18.
Inserisci nella pagina Prodotti le due immagini contenute nei
file FPTutor001.jpg e FPTutor002.gif (nella posizione indica-ta nel fac-simile della pagina). Posiziona le immagini nella
pagina, allineandole sulla destra rispetto al testo (inserisci
O¶LPPDJLQH VHOH]LRQDOD TXLQGL PHQ Formato > Posizione,
SRL VHOH]LRQD O¶RS]LRQH Disposizione testo A destra; in alternativa, richiama direttamente la finestra Proprietà immagine
VHOH]LRQDO¶LPPDJLQHTXLQGLWDVWRGHVWURPHQ3URSULHWjLmPDJLQH TXLQGL LPSRVWD O¶RS]LRQH Disposizione testo A destra.
113
Versione 6 - 18/05/2010
Versione 6 - 18/05/2010
D ± Inserimento della mappa del sito nella pagina Home
19.
20.
Aggiungi la mappa del sito alla fine della home page: menù Inserisci > Immagine> Da File, poi seleziona nella directory Images il file immagine mappa.jpg. In alternativa, è possibile
GDOO¶Elenco cartelle trascinare il file mappa.jpg dalla sottocartella Images direttamente sulla posizione della pagina Home in
FXLVLYXROHLQVHULUHO¶LPPDJLQH
Pulsante attivato
al passaggio del
mouse
(passo 22.)
,QVHULVFLVXOO¶LPPDJLQHdella mappa le aree sensibili (aggiungi
XQ¶DUHD VHQVLELOH VX RJQL UHWWDQJROR GHOOD PDSSD H DVVRFLD DG
ognuna un collegamento ipertestuale alla pagina corrispondente), mediante i pulsanti della barra degli strumenti Immagine.
Pulsanti aree
sensibili
Esempio: clicca sul pulsante Area Rettangolare e traccia
XQ¶DUHD VHQVLELOH UHWWDQJRODUH VXO UHWWDQJROR GHOOD PDSSD FRQ LO
testo Chi siamo; al rilascio del pulsante del mouse, si apre la finestra di impostazione del collegamento ipertestuale: imposta
come indirizzo la pagina web Chi Siamo.
Segnalibro
Collegamento
interno (passo
23.)
Hyperlink a posta
elettronica
(passo 24.)
E ± Inserimento di hyperlink e componenti nella pagina Prodotti
NOTA: per lo svolgimento dei passi contenuti in questa sezione E, si
suggerisce di aiutarsi con lo schema della pagina c (riportato nella pagina successiva) e con le relative didascalie.
21.
Importa nel sito il file catalogo.doc (creato con Microsoft
Word): menù File > Importa > Aggiungi File (seleziona il file
in oggetto). In alternativa, usa le funzioni di Copia-Incolla file
mediante Esplora risorse SRVL]LRQDQGR LO ILOH DOO¶LQWHUQR del
riquadro Elenco Cartelle del sito.
114
22.
Realizza nella seconda riga della pagina un hyperlink al file catalogo.doc inserendo il componente web pulsante attivato al
passaggio del mouse, per consentire di aprire o scaricare il file
(vedi didascalie della figura precedente per chiarimenti): accedi
al menù Inserisci > Componente web, seleziona il componente richiesto, poi imposta le proprietà del componente a piacere
(testo e colori pulsante, effetto), poi collega il pulsante al file
catalogo.doc (segui le impostazioni visualizzate nella finestra
successiva)
115
Versione 6 - 18/05/2010
Versione 6 - 18/05/2010
F ± Raccolta fotografica nella pagina Raccolta foto
23.
Crea un hyperlink interno, che parta dalla terza riga della pagina e faccia saltare alla riga in fondo Inviateci i vostri commentiLGHQWLILFDTXHVW¶XOWLPDULJDFRQXQsegnalibro (seleziona
il testo quindi menù Inserisci > Segnalibro, dai un nome al segnalibro quindi clic su Aggiungi). Seleziona ora la seconda riga della pagina Prodotti, quindi menù Inserisci > Collegamento Ipertestuale$OO¶LQWHUQRGHOODILQHVWUDGLLPSRVWD]LRQH
del collegamento, fai clic su ,QVHULVFL DOO¶LQWHUQR GHO GRFumento (o in alternativa clic sul pulsante Segnalibro sulla parte
destra della finestra), quindi seleziona il segnalibro creato in
precedenza.
24.
1HOO¶XOWLPD ULJD GHOOD SDJLQD DJJLXQJL XQ K\SHUOLQN DG XQ
messaggio di posta elettronica: seleziona il testo desiderato, poi
menù Inserisci> Collegamento Ipertestuale; nella finestra di
impostazione, clic su Indirizzo di posta elettronica e inserisci
dati a piacere (indirizzo di posta e oggetto mail).
25.
Crea due collegamenti ipertestuali per collegare il punto elenco
Borsone della squadra con la pagina Prodotto_1 ed il punto
elenco Pallone della squadra con la pagina Prodotto_2: seleziona il testo desiderato, quindi menù Inserisci > Collegamento IpertestualeDOO¶LQWHUQRGHOODILQHVWUDGLLPSRVWD]LRQHVFegli File Esistente o Pagina Web, quindi seleziona il file html
desiderato.
116
26.
Apri la pagina Raccolta foto in visualizzazione Pagina, digita
il testo Foto sportive e sotto la frase Visitate la Raccolta di foto
spRUWLYH H« EXRQ GLYHUWLPHQWR )DWH FOLF VXOOH PLQLDWXUH SHU
vedere le immagini a dimensioni intere; potrete poi tornare a
questa pagina utilizzando il pulsante Indietro del vostro
browser Web.
27.
Nella riga successiva, inserisci il componente web Raccolta
foto (menù Inserisci > Componente web > Raccolta foto), e
scegli il layout orizzontale. Nella finestra di proprietà, aggiungi
i file immagine FPTutor003.jpg, FPTutor004.jpg, FPTutor005.jpg, FPTutor006.jpg, e coQIHUPD O¶LQVHULPHQWR $O
termine, salva le modifiche alla pagina Raccolta foto.
117
Versione 6 - 18/05/2010
G ± Pagina Collegamenti con effetti dinamici DHTML
28.
In visualizzazione Pagina, digita Collegamenti a siti sportivi.
Seleziona il testo inserito e scegli menù Formato > Effetti
DHTML6FHJOLO¶HYHQWRCaricamento pagina HO¶HIIHWWRhop,
mediante la barra Effetti DHTML.
Versione 6 - 18/05/2010
H ± Formattazione degli stili di paragrafo
30.
Nella home page, applica lo stile Titolo 1 alla prima riga.
31.
Nelle altre pagine del sito, applica lo stile Titolo 2 alla prima
riga di ogni pagina.
32.
Applica un font comune (Verdana) al testo di ciascuna pagina.
33
7UDVIRUPDO¶HOHQFRQHOODSDJLQDProdotti in un elenco puntato.
I ± Inserimento di testo scorrevole nella home page
34.
29.
Nella home page, in visualizzazione Pagina, inserisci sotto il
logo Championzone, il componente web Testo scorrevole
(menù Inserisci > Componente web). Imposta le proprietà del
componente a piacere (direzione, velocità, scorrimento, colori
di sfondo del componente); inserisci come testo una frase conWHQHQWHO¶LQGLUL]]RGHOQHJR]LRHLQXPHULGLWHOHIRQR
Sotto al titolo
della pagina,
inserisci alcuni
collegamenti
ipertestuali ai
seguenti siti esterni:
Federazione Internazionale
Football Association
National
Basketball
Association
(www.fifa.com);
(www.nba.com); Formula 1 (www.formula1.com); Yahoo
sport (www.sports.yahoo.com).
118
119
Versione 6 - 18/05/2010
L ± Aggiunta di bordi condivisi e barre dei collegamenti
35.
Versione 6 - 18/05/2010
re doppio clic), HVHOH]LRQDO¶RS]LRQH Pagine figlie della home
page e spunta la casella Home Page sulla destra.
In visualizzazione Struttura, scegli menù Formato > Bordi
condivisi.
NOTA: I bordi condivisi sono aree comuni a più (a tutte le ) pagine del
sito, aree cioè che vengono ripetute su tutte le pagine selezionate: inserendo in esse opportuni collegamenti ipertestuali o addirittura barre dei
collegamenti, è possibile visualizzare i collegamenti nelle relative pagine (in tutte le pagine). I bordi condivisi possono essere disposti su tutti
e quattro i lati della pagina web.
36.
37.
Nella finestra successiva, seleziona le opzioni Tutte le pagine,
Bordo superiore e Includi pulsanti di spostamento (queste opzioni corrispondono DOO¶LQVHULPHQWR GL XQD EDUUD GHL FROOHJamenti nel bordo superiore). Dopo la conferma, FrontPage crea,
per tutte le pagine, un bordo condiviso superiore e barre dei
collegamenti (nota che nel bordo condiviso superiore viene inVHULWRDQFKHLOWLWRORGHOODSDJLQDFRPHIRVVHXQ¶LQWHVWD]LRQH.
Personalizza la barra dei collegamenti del bordo superiore: dalla home page, richiama le proprietà della barra dei collegamenti del bordo superiore (clic semplice con tasto destro oppu-
120
NOTA: la barra dei collegamenti è un elemento di FrontPage, in cui
vengono inseriti (ed aggiornati automaticamente) i collegamenti iperteVWXDOL FRUULVSRQGHQWL DOO¶RS]LRQH VHOH]LRQDWD QHOOD ILQHVWUD Proprietà
barra dei collegamenti e generati rispettando la gerarchia con cui la pagina ± che contiene la barra dei collegamenti ± è posizionata nella struttura del sito (definita nella visualizzazione Struttura); esempi:
pagine livello superiore: sono le pagine situate al livello immediatamente superiore alla pagina considerata;
pagine stesso livello: sono le pagine che si trovano allo stesso
livello di quella presa in considerazione;
pagine precedente e successiva: sono le pagine adiacenti sullo stesso livello di quella presa in considerazione;
pagine figlie: sono le pagine che si trovano nel livello immediatamente sottostante alla pagina attiva;
pagine globali: sono le pagine che si trovano sullo stesso livello della Home page;
121
Versione 6 - 18/05/2010
pagine figlie della home page: sono le pagine di primo livello, ossia quelle che si trovano al livello immediatamente sottostante alla Home page (nel nostro caso sono le 4 pagine: Chi
siamo, Raccolta foto, Collegamenti, Prodotti)
NOTA: se la barra dei collegamenti è inserita in un bordo condiviso,
tutte le pagine in cui il bordo condiviso è attivo contengono lo stesso
insieme di collegamenti ipertestuali secondo le opzioni impostate.
(VHPSLR VHOH]LRQDQGR O¶RS]LRQH Pagine figlie, ogni pagina conterrà
nel bordo condiviso i collegamenti alle pagine che si trovano nel livello
immediatamente sottostante ad essa (nel caso di pagine situate
VXOO¶XOWLPROLYHOORLQIHULRUHODEDUUDGHLFROOHJDPHQWLULVXOWHUjYXRWDLQ
TXDQWRSHUTXHOOHSDJLQHQRQHVLVWRQRSDJLQH³ILJOLH´
38.
Personalizza le pagine Prodotto_1 e Prodotto_2: dalla pagina
Prodotto_1, richiama menù Formato > Bordi condivisi , seleziona Pagina corrente, rimuovi il bordo condiviso superiore e
aggiungi il bordo condiviso sinistro; ripeti lo stesso procedimento per la pagina Prodotto_2.
39.
Aggiungi una barra dei collegamenti nel bordo condiviso sinistro delle pagine Prodotto_1 e Prodotto_2: posiziona il cursoUHDOO¶LQWHUQRGHOERUGRFRQGLYLVRVLQLVWURGLXQDGHOOHGXHSagine, quindi clic su Inserisci > Spostamento, poi Barra basata sulla struttura del sito. Scegli il tema per la barra dei collegamenti ed il layout verticale, quindi nella successiva finestra
imposta i link alle Pagine stesso livello; seleziona anche la casella Pagina Superiore sulla destra.
Versione 6 - 18/05/2010
Appendice
Risultati delle esercitazioni
Nelle pagine successive sono riportati, in sequenza, i risultati delle
seguenti esercitazioni:
- Esercitazione 3 (5 pagine)
- Esercitazione 4 (5 pagine)
- Esercitazione 5 (2 pagine)
- Esercitazione 6 (1 pagina)
- Esercitazione 7 (3 pagine)
- Esercitazione 8 (3 pagine)
- Esercitazione 9 (3 pagine)
- Esercitazione 10-web (2 pagine)
- Esercitazione 11-web (3 pagine)
M ± Verifica finale del sito
40.
Verifica la correttezza del sito tramite le visualizzazioni Cartelle, Report, Struttura e Collegamenti5LFKLDPDO¶DQWHSULPDGHO
sito nel browser (menù File > Anteprima nel browser) e verifica la corretta visualizzazione di tutte le pagine ed il corretto
IXQ]LRQDPHQWR GHL FROOHJDPHQWL LSHUWHVWXDOL /¶DVSHWWR GHOOH
pagine create e la struttura del sito dovrebbero risultare come
nelle figure contenute in Appendice.
122
123