Testo Esercitazione
Transcript
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