(VHPSLR: Creazione di un sito web con FrontPage
Nota: I file per
l’esercitazione si trovano
nel file
“FPTutor2002.zip”
Scopo: Creare un sito Web
che fornisce informazioni su
un negozio di articoli sportivi
chiamato Championzone.
Oltre alla home page, il sito
conterrà sei pagine, con la
struttura a lato.
C – Inserimento dei contenuti nelle pagine
Home page
Chi siamo
Prodotti
Collegamenti
Raccolta
foto
D – Inserimento della mappa del sito nella pagina Home
Prodotto_1
Prodotto_2
A – Creazione del sito web e della pagina iniziale (home page)
1.
2.
3.
4.
5.
6.
7.
8.
12. Inserisci il contenuto del file Informazioni.txt nella pagina Chi siamo (menù Inserisci > File,
opzione Paragrafi normali, oppure Copia-Incolla). Inserisci il contenuto del file Infoprodotti.rtf
nella pagina Prodotti (menù Inserisci > File, oppure Copia-Incolla).
13. Aggiungi al sito web corrente tutti i file immagine forniti: in visualizzazione Cartelle, clic sulla
cartella Images, menù File > Importa > Aggiungi File (seleziona tutti i file .gif e .jpg forniti
tranne quelli già inseriti). In alternativa, usa le funzioni di Copia-Incolla file. Al termine
dell’operazione, tutti i file .gif e .jpg necessari sono contenuti nella cartella Images del sito web.
14. Inserisci nella pagina Prodotti le due immagini contenute nei file FPTutor001.jpg e
FPTutor002.gif. Posiziona le immagini nella pagina, allineandole sulla destra rispetto al testo
(menù Formato > Posizione, oppure richiama direttamente la barra degli strumenti Posizione).
Crea una directory di lavoro sul disco fisso C:\Esercitazione_Fpage. All’interno di questa
directory, crea una sotto-directory Championzone, la quale conterrà il sito web da realizzare.
Avvia FrontPage e crea un nuovo web (menù File > Nuovo > Pagina o Web). Tra i modelli
proposti, scegli il modello Web a pagina singola. Specifica la posizione del web, impostando la
directory web C:\Esercitazione_Fpage\Championzone (creata nel punto precedente).
Assicurati che il pulsante Elenco Cartelle sia selezionato, per vedere l’elenco delle cartelle del sito.
Fai doppio clic sul file index.htm per aprirlo in visualizzazione Pagina. Inserisci nella prima riga
l’immagine contenuta nel file czlogo.gif (logo della ditta): menù Inserisci > Immagine> Da File,
quindi seleziona il file czlogo.gif. Ripeti la procedura, per inserire sulla parte destra della prima
riga, l’immagine contenuta nel file FrontPage.gif (logo di FrontPage).
Crea un collegamento ipertestuale dall’immagine appena inserita: seleziona il logo di FrontPage
facendo clic su di esso, quindi menù Inserisci > Collegamento Ipertestuale. Nella finestra di
impostazione del collegamento, scegli File Esistente o Pagina Web, quindi nel campo Indirizzo
inserisci www.microsoft.com/frontpage (FrontPage aggiunge automaticamente il prefisso http).
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.
[vedi esempio nel secondo foglio dell’esercitazione]
Posiziona tutto il testo della pagina al centro: allinea al centro.
Salva la pagina nella directory web Championzone (menù File > Salva con Nome, nome file
index.htm); assegna un titolo a piacere alla pagina (pulsante Cambia titolo); quando ti viene
richiesto, salva i file immagine incorporati nella home page nella cartella Images.
B – Creazione della struttura del sito web complessivo
9. In visualizzazione Struttura, crea la struttura del sito: fai clic sull’icona 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 destro su ogni
pagina, quindi Rinomina), come segue: Chi siamo, Prodotti, Raccolta foto e Collegamenti
10. Fai doppio clic sulla pagina Chi siamo in visualizzazione struttura: vengono salvati tutti i file e si
passa in visualizzazione Pagina. Rinomina eventuali file e pagine che hai dimenticato di nominare.
11. Importa nel sito web le pagine html fornite (file Prod_1.htm e Prod_2.htm): menù File >
Importa, quindi seleziona i due file, ciccando su Aggiungi. Dopo averli importati, inserisci i due
file nella struttura del sito, sotto la pagina Prodotti.
15. 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.
16. Inserisci sull’immagine alcune aree sensibili (un collegamento ipertestuale per ciascuna pagina
contenuta nella mappa), mediante i pulsanti della barra degli strumenti Immagine.
E – Inserimento di differenti tipi di hyperlink e componenti nella pagina Prodotti
17. Importa nel sito il file catalogo.doc (Microsoft Word): menù File > Importa > Aggiungi File
(seleziona il file in oggetto). In alternativa, usa le funzioni di Copia-Incolla file.
18. 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: 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.
19. Crea un hyperlink interno, che parta dalla terza riga della pagina e faccia saltare alla riga in fondo
Inviateci i vostri commenti : identifica quest’ultima riga con un segnalibro (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.
All’interno della finestra di impostazione del collegamento, fai clic su Inserisci all’interno del
documento, quindi seleziona il segnalibro creato in precedenza.
20. Nell’ultima riga della pagina, aggiungi un hyperlink ad un 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).
21. 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 Ipertestuale, all’interno della finestra di
impostazione, scegli File Esistente o Pagina Web, quindi seleziona il file html desiderato.
F – Creazione di una raccolta fotografica nella pagina Raccolta foto
22. In visualizzazione Pagina, digita il testo “Foto sportive” e sotto la frase “Visitate la Raccolta di
foto sportive e… buon divertimento! Fate clic sulle miniature per vedere le immagini a dimensioni
intere; potrete poi tornare a questa pagina utilizzando il pulsante Indietro del vostro browser Web”.
23. 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, FPTutor004, FPTutor005, FPTutor006, quindi conferma l’inserimento. Al
termine, salva le modifiche alla pagina Raccolta foto.
G – Realizzazione della pagina Collegamenti con effetti dinamici DHTML
24. In visualizzazione Pagina, digita Collegamenti a siti sportivi. Seleziona il testo inserito e scegli
menù Formato > Effetti DHTML. Scegli l’evento Caricamento pagina e l’effetto hop.
25. Sotto al titolo della pagina, inserisci alcuni collegamenti ipertestuali ai seguenti siti esterni:
Federazione Internazionale Football Association (www.fifa.com); National Basketball Association
(www.nba.com); Formula 1 (www.formula1.com); Yahoo sport (www.sports.yahoo.com).
H – Formattazione degli stili di paragrafo
26.
27.
28.
29.
Nella home page, applica lo stile Titolo 1 alla prima riga.
Nelle altre pagine del sito, applica lo stile Titolo 2 alla prima riga di ogni pagina.
Applica un font comune (Verdana) al testo di ciascuna pagina.
Trasforma l’elenco nella pagina Prodotti in un elenco puntato.
I – Inserimento di testo scorrevole nella home page
30. 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 contenente l’indirizzo del negozio di articoli sportivi e i numeri di telefono.
L – Aggiunta di bordi condivisi e barre di navigazione
31. In visualizzazione Struttura, scegli menù Formato > Bordi condivisi.
32. Nella finestra successiva, seleziona per tutte le pagine il bordo superiore e includi
i pulsanti di spostamento. Dopo la conferma, FrontPage crea, per tutte le pagine,
bordi condivisi e barre di spostamento (nota che nel bordo condiviso superiore
viene inserito anche il titolo della pagina, come fosse un’intestazione).
33. 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 oppure doppio clic), ed imposta i link alle pagine figlie
della home page; seleziona anche la casella Home Page sulla destra.
34. 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.
35. Aggiungi una barra di navigazione nel bordo condiviso sinistro delle pagine
Prodotto_1 e Prodotto_2: posiziona il cursore all’interno del bordo condiviso
sinistro di una delle due pagine, quindi clic su Inserisci > Barra di navigazione.
Nella finestra di proprietà della barra di navigazione, imposta i link alle Pagine
stesso livello; seleziona anche la casella Pagina Superiore sulla destra.
M – Verifica finale del sito
36. Verifica la correttezza del sito tramite le visualizzazioni Cartelle, Report, Struttura
e Collegamenti. Richiama l’anteprima del sito nel browser (menù File >
Anteprima nel browser) e verifica la corretta visualizzazione di tutte le pagine
ed il corretto funzionamento dei collegamenti ipertestuali. L’aspetto delle pagine
create e la struttura del sito dovrebbero risultare come nelle figure seguenti.
Coll. interno