Esercitazione n. 11: Sito web con Kompozer

Transcript

1 + 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

2 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 (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

3 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

4 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" width="569" height="307" border="0" usemap="#map" /> <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

5 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

6 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

7 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 ( b. National Basketball Association ( ); c. Formula 1 ( d. Yahoo sport ( 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

8 Strumenti digitali per la comunicazione A.A 2012/13 8

9 Strumenti digitali per la comunicazione A.A 2012/13 9

10 Strumenti digitali per la comunicazione A.A 2012/13 10