Esercitazione 11-2013-14

+
Strumenti digitali per la comunicazione A.A 2013/14
Esercitazione n. 11: Sito web con Kompozer
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, secondo la struttura riportata nella figura successive.
Le pagine del sito web che si dovrebbero ottenere (in termini di forma e contenuti) sono mostrate nel documento pdf
“Esercitazione11-Svolgimento.pdf” che si trova nella cartella “MaterialeEsercitazione11” Scaricabile dalla pagina del corso di
UnitusMoodle.
A - Creazione del sito web e della pagina iniziale (home page)
1. Crea una directory di lavoro sul disco fisso EsercitazioniKompozer. All’interno di questa directory,
crea una sotto-directory Championzone e all’interno una cartella immagini.
2. Recupera dalla pagina del corso su Digirome i file necessari per l’esercitazione:
materialeEs11.zip (file compresso contenente il materiale di base, testi ed immagini per realizzare
il sito web). Salva il file compresso nella cartella EsercitazioniKompozer ed estrai qui dentro tutti i
file contenuti.
3. Copia tutti file immagini forniti nella cartella immagini (copiare tutti i file con estensione .jpg
e .gif).
4. Spostare i file Prod_1.htm e Prod_2.htm nella cartella Championzone.
5. Avvia KompoZer e posiziona la finestra di “gestione Siti” sulla cartella Championzone, cliccando
sul pulsante
tramite il pulsante “Selezione cartella”
6. Salvare la pagina corrente. Il sistema chiederà di assegnare un nome alla
pagina. Ricordarsi che il nome assegnato è della pagina Web (comparirà
nella finestra del browser e nei segnalibri) e non del file. Digitare
“Benvenuti in Championzone”. Nella schermata successiva salvare il file con il nome index.html
nella cartella Championzone.
7. Inserisci nella pagina una tabella di 3 righe e 2 colonne (tabella> inserisci>tabella velocemente >
selezionare le caselle necessarie). Impostare i bordi della tabella a 0 pixel e i margini (pixel fra i
bordi e i contenuti della cella) a 5 pixel (tabella>proprietà tabella> tabella, impostare i valori
della larghezza bordo a 0 e margini a 5)
8. Inserisci nella cella a sinistra l’immagine contenuta nel file czlogo.gif (file fornito all’interno del
materiale di partenza): menù Inserisci > Immagine> quindi seleziona il file czlogo.gif (che si
trova nella cartella EsercitazioniKompozer/immagini). In alternativa, è possibile trascinare il file
direttamente dalla finestra “gestione siti” nella home page. Inserire il testo alternativo “logo”.
Ripeti la procedura per inserire nella cella di destra della prima riga, l’immagine contenuta nel file
FrontPage.gif (logo di FrontPage).
9. Crea un collegamento ipertestuale dall’immagine appena inserita: clic con il tasto destro
sull’immagine; nel menù contestuale fai clic su Collegamento, quindi nel campo Indirizzo
inserisci www.microsoft.com/frontpage (nota che KompoZer aggiunge automaticamente il prefisso
http). Premi il pulsante OK per confermare e tornare alla home page.
10. Unisci le celle della terza riga (seleziona le due celle utilizzando il tasto Ctrl, Tabella> unisci
celle selezionate) e nella cella così ottenuta digita il seguente testo “Benvenuti in Championzone!
Strumenti digitali per la comunicazione A.A 2012/13
2
Esplorate il nostro sito per conoscere i nostri articoli sportivi, visionate i nostri prodotti e visitate la
nostra raccolta fotografica”. Posiziona tutto il testo della pagina al centro: allinea al centro.
B - Creazione della struttura del sito web complessivo
11. Creare 4 pagine secondo il seguente schema riportato in figura, come descritto nel punto 6
(File>Nuovo). Salvare le pagine assegnando i seguenti nomi file e nomi delle pagine:
chisiamo.html-> “Chi Siamo”; prodotti.html-> Prodotti; raccoltafoto.html-> Raccolta foto;
collegamenti.html->Collegamenti.
12. In ognuna delle pagine digita il titolo del documento uguale al titolo della pagina.
C - Inserimento dei contenuti nelle pagine
13. Inserisci il contenuto del file Informazioni.txt nella pagina Chi siamo (apri il file con Blocco Note
e poi Copia ed Incolla in Kompozer)
14. Inserisci il contenuto del file Infoprodotti.rtf nella pagina Prodotti (apri il file con Microsoft Word e
poi Copia-Incolla senza formattazione in Kompozer).
15. Inserisci nella pagina Prodotti le due immagini contenute nei file FPTutor001.jpg e
FPTutor002.gif (nella posizione indicata nel fac-simile della pagina). Posiziona le immagini nella
pagina, allineandole sulla destra rispetto al testo (pulsante destro del mouse sull’immagine >
proprietà immagine> aspetto > allineamento del testo rispetto all’immagine> selezionare
“inserisci a sx”). Per ciascuna immagine inserire un testo alternativo a piacere.
16. Eseguire il programma GIMP (per la gestione delle immagini) ed aprire il file mappa.jpg, Cliccare
su Filtri, Web e poi su Mappa immagine. Ora si aprirà una nuova finestra:
Strumenti digitali per la comunicazione A.A 2012/13
3
17. A sinistra vediamo le tre sagome che servono per “ritagliare” una parte della foto: il rettangolo, il
cerchio, oppure un poligono. Cliccare sulla sagoma del rettangolo e disegnare il rettangolo attorno
al rettangolo “Home page”. Disegnato il rettangolo, fare un bel clic. Si aprirà allora una nuova
finestra:
18. Nella finestra rettangolare (URL da attivare ) scrivere il nome del file index.html che verrà aperto
(cercarlo cliccando sul simbolo della cartella). Cliccare ora su “Applica” e poi su OK. Si tornerà
alla finestra precedente. Mappare tutte le altre parti dell’albero con altre pagine del sito ripetendo i
passaggi già descritti.
19. Cliccare ora su File e su Salva come: si vedrà proposto un file chiamato, in questo caso,
mappa.jpg.map. Scegliere dove salvare e cliccare su Salva. Aprendo con Blocco note il file
mappa.jpg.map, si otterrà il codice sorgente da copiare e poi incollare nella pagina Web.
<img
src="immagini/Mappa.jpg"
usemap="#map" />
width="569"
height="307"
border="0"
<map name="map">
<!-- #$-:Image map file created by GIMP Image Map plug-in -->
<!-- #$-:GIMP Image Map plug-in by Maurits Rijk -->
<!-- #$-:Please do not edit lines starting with "#$" -->
<!-- #$VERSION:2.3 -->
<!-- #$AUTHOR:Paola -->
<area shape="rect" coords="234,12,340,72" href="index.html" />
<area shape="rect" coords="17,123,119,185" href="Chisiamo.html" />
<area shape="rect" coords="156,124,265,184" href="prodotti.html" />
<area shape="rect" coords="302,124,414,182" href="Collegamenti.html" />
<area shape="rect" coords="455,127,545,184" href="raccoltafoto.html" />
</map>
20. In Kompozer e visualizzare il sito in modalità “Sorgente”, ed incollare il testo copiato, posizionando
il testo prima dei tag </body> </html>
.
Strumenti digitali per la comunicazione A.A 2012/13
4
D - Inserimento di hyperlink e componenti nella pagina Prodotti
NOTA: per lo svolgimento dei passi contenuti in questa sezione D, si suggerisce di aiutarsi con lo
schema della pagina riportato di seguito e con le relative didascalie.
21. Copia il file catalogo.doc (creato con Microsoft Word) nella cartella contenete il sito.
22. Realizza nella seconda riga della pagina un hyperlink al file catalogo.doc inserendo un pulsante
(inserisci>modulo>crea pulsante... selezionare “pulsante”).
23. Collega il pulsante al file catalogo.doc (Seleziona il pulsante> Inserisci> Collegamento> nella
casella di testo digitare catalogo.doc)
Strumenti digitali per la comunicazione A.A 2012/13
5
24. 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 in fondo con un’ancora (seleziona il testo
quindi menù Inserisci > ancora, dai un nome all’ancora quindi clic su OK). Seleziona ora la
seconda riga della pagina Prodotti, quindi menù Inserisci > Collegamento. All’interno della
finestra d’impostazione del collegamento, selezionare l’ancora appena creata.
25. Nell’ultima riga della pagina, aggiungi un hyperlink ad un messaggio di posta elettronica: seleziona
il testo desiderato, poi menù Inserisci> Collegamento; nella finestra di impostazione, inserire un
indirizzo di posta elettronica e selezionare l’opzione “E’ un indirizzo di posta elettronica”.
Strumenti digitali per la comunicazione A.A 2012/13
6
26. Crea due collegamenti ipertestuali per collegare il punto elenco Borsone della squadra con la
pagina Prod_1 ed il punto elenco Pallone della squadra con la pagina Prod_2: seleziona il testo
desiderato, quindi menù Inserisci > Collegamento, all’interno della finestra delle impostazioni
seleziona il file html desiderato.
E - Raccolta fotografica nella pagina Raccolta foto
27. Apri la pagina Raccolta foto in visualizzazione Disegno, digita il testo Foto sportive e sotto la frase
Visitate la Raccolta di foto sportive e… buon divertimento!
28. Inserire una tabella, senza bordi, con una distanza del contenuto dal bordo pari a 10 pixel,
spaziatura pari a 5 pixel, larghezza pari al 90% della pagina, centrata (cfr. pt.6). In ciascuna cella
inserire una foto fra quelle contenute nei file immagine FPTutor003.jpg, FPTutor004.jpg,
FPTutor005.jpg, FPTutor006.jpg. Le foto devono essere centrate nella cella sia orizzontalmente
sia verticalmente (doppio click sulla cella oppure mouse destro > proprietà cella >allineamento
contenuto> selezionare verticale e orizzontale al centro)
F - Pagina Collegamenti
29. Aprire la pagina Collegamenti e sotto il titolo “Collegamenti” digita “Collegamenti a siti sportivi”.
30. Sotto al titolo della pagina, inserisci alcuni collegamenti ipertestuali ai seguenti siti esterni:
a. Federazione Internazionale Football Association (www.fifa.com);
b. National Basketball Association (www.nba.com );
c. Formula 1 (www.formula1.com);
d. Yahoo sport (www.sports.yahoo.com).
G - Formattazione degli stili di paragrafo
31. Nella home page applica lo stile Titolo 1 al titolo “Home page” e centralo nella riga.
32. Nelle altre pagine del sito, applica lo stile Titolo 2, centrato, al titolo di ogni documento (prima
riga).
33. Applica un font comune (Verdana) al testo di ciascuna pagina.
34. Trasforma l’elenco nella pagina Prodotti in un elenco puntato.
35. Trasforma l’elenco nella pagina Collegamenti in un elenco numerato.
36. Inserire una linea orizzontale sotto ogni titolo.
H - Aggiunta dei menù di navigazione
37. Nella Home page, unisci le celle nella seconda riga ed inserisci centrato, il menù di navigazione
come mostrato nel fac simile del risultato finale, ([Home] [Chi Siamo] [Prodotti] [Collegamenti]
[Raccolta Foto]). Utilizzare lo stile Titolo 2, centrato.
38. Collega ciascuna voce, eccetto la Home, con la relativa pagina (inserisci> Collegamento).
39. Copia il menù sotto la riga orizzontale di tutte le altre pagine del sito, eccetto prod_1.htm e
prod_2.htm, facendo attenzione a disattivare il collegamento alla pagina in cui è copiato ed attivare
il collegamento alla home.
I - Verifica finale del sito
40. Verifica la correttezza del sito visualizzandolo dal browser e verifica
41. 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 riportate di seguito.
Strumenti digitali per la comunicazione A.A 2012/13
7
Strumenti digitali per la comunicazione A.A 2012/13
8
Strumenti digitali per la comunicazione A.A 2012/13
9
Strumenti digitali per la comunicazione A.A 2012/13
10