This project funded by Leonardo da Vinci has been carried out with the support of the European Community. The content of this project does not necessarily reflect the position of the European Community or the National Agency, nor does it involve any responsibility on their part. 7 REALIZZARE UNA PAGINA WEB CON FRONTPAGE Microsoft FrontPage 2000 è un programma completo per la creazione e la gestione di siti web. Offre un WYSIWYG (what-you-see-is-what-you-get, ovvero quello che vedi è quello che otterrai) l'ambiente per creare i siti senza necessariamente saper programmare. Aiuta gli utenti a creare e siti web più professionali, permette di aggiornarli con facilità, di monitorare e gestire i siti web sia di Internet sia della Intranet. 7.1 AVVIARE MICROSOFT FRONTPAGE FrontPage può essere avviato nei seguenti modi: Scegliere Programmi -> Microsoft FrontPage dal menù Avvio; Click (doppio click) sull icona di Microsoft FrontPage. Aprire qualunque pagina web cliccando sulla pagina col tasto destro del mouse e scegliendo Modifica dalla menù contestuali 7.2 STRUTTURA DI UNA FINESTRA FRONTPAGE La finestra di FrontPage è costituita dalle seguenti parti: la barra di titolo la barra dei menù la barra strumenti standard la barra degli strumenti di formattazione le barre di scorrimento barra delle visualizzazioni l'elenco delle cartelle l area del documento le schede di visualizzazione delle pagine la barra di stato. Quando si avvia FrontPage per la prima volta, i menù e la barra degli strumenti mostrano le voci di comando e i pulsanti per le funzionalità di base. L'illustrazione seguente è della finestra di FrontPage. 1
Figura 7.2.1 Finestra di FrontPage 7.2.1. Barra dei menù La barra dei menù contiene un elenco di menù che aiutano a creare e formattare gli elementi ed i documenti. Ogni opzione può mostrare più scelte, a seconda dei casi. I menù in FrontPage mostrano soltanto i comandi usati recentemente. Per osservare tutte le opzioni in ogni menù, è necessario cliccare le frecce doppie nella parte inferiore del menù. 7.2.2. Barra degli strumenti standard La barra degli strumenti standard contiene dei pulsanti che le permettono un accesso rapido alle più comuni funzioni di FrontPage, come apri, salva, e stampa. 7.2.3. Barra di Formattazione La Barra di Formattazione contiene la raccolta di pulsanti per modificare facilmente le caratteristiche degli elementi del documento. 2
7.2.4. La barra di Visualizzazione La Barra di Visualizzazione contiene varie opzioni: Visualizzazione Pagina : fornisce un editor WYSIWYG Visualizzazione Struttura Cartelle: consente di gestire facilmente file e cartelle Visualizzazione Report: consente di analizzare la correttezza dei contenuti del sito Visualizzazione Struttura: consente di progettare la struttura di navigazione del sito Visualizzazione Collegamenti Ipertestuali: consente di gestire i link delle pagine web Visualizzazione Attività: consente di gestire le varie attività Queste opzioni forniscono diverse modalità di organizzazione delle informazioni della pagina o del sito web. Si può cambiare la visualizzazione scegliendo un'icona di Visualizzazione diversa. Si può passare da una visualizzazione all'altra scegliendola sul menù di Visualizzazione. Visualizzazione Pagina La visualizzazione di Pagina è la visualizzazione standard, dove si può lavorare usando tre schede diverse disponibili nella parte inferiore della finestra: Normale, HTML, Anteprima. La scheda Normale nella visualizzazione di Pagina è rivolta agli sviluppatori inesperti di siti che non conoscono l'html. Proprio in questa modalità che si può sfruttare a pieno la modalità di WYSWYG. Visualizzazione HTML Nel caso in cui il programmatore sia esperto può editare i propri script direttamente nella modalità HTML scegliendo la scheda HTML Visualizzazione Anteprima E' possibile vedere in anteprima la pagina così come apparirà ad un visitatore del sito scegliendo la modalità Anteprima con l apposita scheda. Comunque, non tutto viene mostrato correttamente. Se si vuole vedere come la pagina verrà caricata nel browser, è necessario scegliere l anteprima con il pulsante di anteprima nel Browser. Se si crea e redige una pagina web con i Frame, sulla visualizzazione di Pagina sono disponibili due schede addizionali: Nessun Frame e Pagina con Frame. Nella scheda Nessuna Frame si può modificare il messaggio che sarà mostrato nel browser Web se il browser non supporta i Frames. La scheda Pagina con frame mostrano l'html per le pagine con frame. Visualizzazione Report La visualizzazione Report fornisce informazioni sul sito attuale. In questa modalità, è possibile vedere in anteprima un sommario del sito, tutti i file del sito, i file aggiunti recentemente, i file recentemente modificati, i file più vecchi, i file che hanno collegamenti senza destinazione e le pagine pesanti che rallentano il caricamento. Nella visualizzazione Report si possono verificare anche i collegamenti ipertestuali. 3
Visualizzazione Navigazione La visualizzazione Navigazione mostra una rappresentazione grafica della struttura del sito WEB. Figura 7.2.2 Struttura del sito web In questa modalità, si può dare al sito una struttura gerarchica, come si può osservare. FrontPage consente di creare delle ramificazioni automatiche seguendo la gerarchia fra le pagine del sito. Per esempio, per la Home page è necessario avere i collegamenti ipertestuali con Photo Album, Interest e Favorites. E necessario aprire la Home Page con un doppio-click sull'icona di Home page (la Home page si apre nella scheda Visualizzazione Pagina), scegliere Inserisci -> Barra di Navigazione sulla barra dei menù e scegliere l'opzione desiderata nella finestra di dialogo delle Proprietà della Barra di Navigazione. Figura 7.2.3. Le Proprietà della Barra di Navigazione In questo caso, scelto il livello di dipendenza, il programma imposta automaticamente dei collegamenti ipertestuali alle pagine dipendenti definendone il titolo (Photo Album, Interests e Favorites). La figura seguente mostra il risultato 4
Figura 7.2.4. I collegamenti ipertestuali creati con la barra di navigazione Visualizzazione Collegamenti Ipertestuali La visualizzazione dei Collegamenti Ipertestuali consente di organizzare gli Hyperlink delle pagine web. Questa visualizzazione fornisce una "mappa" visuale dei collegamenti ipertestuali sia in arrivo che in uscita verso qualunque altra pagina del sito. Si può personalizzare la Visualizzazione dei Collegamenti Ipertestuali per vedere i titoli delle pagine, i links sia in arrivo che in uscita verso le immagini e cosí via (cliccare il pulsante destro del mouse sullo sfondo, e poi cliccare su Mostra Titoli di Pagina, Collegamenti Ipertestuali alle immagini o altre opzioni sul menù di scelta rapido). Nella Visualizzazione Collegamenti Ipertestuali FrontPage mostra anche i collegamenti ipertestuali senza destinazione. Figura 7.2.5. Visualizzazione Collegamenti Ipertestuali Visualizzazione Attività La Visualizzazione delle Attività è utile per vari tipi di utenti che lavorano sul sito. In questa visualizzazione, è possibile aggiungere al sito dei commenti che altri utenti devono sapere. Se l attività è conclusa, si può contrassegnare l attività come completata (selezionare l'attività completata, cliccare sul pulsante destro del mouse e, nel menù contestuali, selezionare la voce Segna come Completato). Per creare una nuova attività, cliccare sull'area generale con il pulsante destro del mouse e scegliere Nuovo Incarico nel menù contestuali. 7.2.5. Menù contestuali I menù contestuali consentono di accedere ai vari comandi di FrontPage più velocemente rispetto ad usare le opzioni sulla barra dei menù. I menù contestuali appaiono quando su qualunque elemento della pagina viene fatto clic con il tasto destro del mouse. Le opzioni di questo menù varieranno a seconda dell elemento cliccato. 5
7.2.6. Barra degli strumenti Formattazione Per redigere e formattare in modo rapido e semplice è possibile mostrare una barra degli strumenti aggiuntiva selezionando Visualizza-> Barra degli strumenti dalla barra dei menù. La barra degli strumenti che sono già visibili sullo schermo, sono evidenziate con il segno di spunta. Selezionare il nome della barra degli strumenti desiderata nel caso in cui non sia attiva, per renderla disponibile. 7.3. OPERAZIONI CON LA PAGINA WEB 7.3.1. Creare una pagina web nuova Selezionare il pulsante di Nuova Pagina sulla barra degli strumenti Standard o scegliere la voce File->Nuovo->Pagina sulla barra dei menù, selezionare la scheda Generale, effettuare quindi doppio clic sull'icona di Pagina Normale. Figura 7.3.1. Finestra di dialogo Nuovo 7.3.2. Aprire un documento esistente Scegliere il pulsante Apri sul menù File, selezionare il pulsante Apri strumenti Standard. Poi selezionare il documento che si vuole aprire. sul barra degli 6
7.3.3. Salvare una pagina web Cliccare il pulsante Salva sulla barra degli strumenti Standard o scegliere il File-> Salva (sulla barra dei menù). Se si vuole salvare la nuova pagina web, digitare nella casella Nome del file il nome della pagina e premere su Salva. Se si vuole salvare la pagina web con un altro nome o in un altro formato, sceglie il File-> Salva come sulla barra dei menù. Se si vuole salvare una pagina web affinché sia utilizzabile con un altro programma, specificare il formato di file che è compatibile con l'altro programma nella casella del Tipo di File. 7.3.4. Modelli (Template) Il Modello o Template è una pagina pre-disegnata che può avere già alcune impostazioni di pagina, di formattazione e degli elementi di pagina. FrontPage fornisce una varietà di modelli pagina, da cui creare le proprie pagine personali. Si può scegliere un modello creando una pagina nuova (File->Nuovo->Pagina ). Sulla scheda Generale nella finestra di dialogo Nuovo, scegliere il Modello Standard (la Pagina Normale) o Altri (la Bibliografia, la Pagine di Ricerca, ecc.) Nella stessa linguetta Generale si può creare una pagina usando l auto-composizione guidata. Se si vuole creare il proprio modello di pagina, è possibile realizzare una pagina base con gli elementi e le impostazioni desiderate quindi salvarla come modello. Quando il modello è completato selezionare Salva Come sul menù File e, nella casella del tipo di file cliccare Modello di Front Page (*.tem) quindi premere salva. Nella finestra di dialogo Salva come Modello, digitare il titolo, il nome e la descrizione. Successivamente, quando si crea una pagina nuova, nella scheda Generale sulla finestra di dialogo Nuovo, il nuovo modello sarà mostrato insieme agli altri modelli. 7.3.5. Temi Un tema è una serie uniformata di elementi di progetto e schemi di colore che possono essere applicati a tutte le pagine del sito. I temi rendono piú semplice la formattazione dell'aspetto di un sito web conferendogli anche una veste uniforme. Si possono usare molti temi predefiniti e modificarli facilmente alle proprie esigenze. Si può applicare un tema a una pagina specifica o a tutte le pagine del sito. Quando si sceglie un tema per tutte le pagine del sito, il tema sarà applicato a tutte le pagine esistenti e alle pagine nuove che verranno aggiunte in seguito. I temi esistenti possono essere cambiati e possono essere personalizzati selezionando Modifica nella finestra di dialogo di Tema. La finestra di dialogo Tema può essere aperta scegliendo il Formato-> Tema sulla barra dei menù oppure cliccando il tasto destro del mouse sulla pagina che si sta editando nella visualizzazione Pagina. Si possono cambiare i colori del tema, le opzioni di grafica e testo. Si può creare anche un proprio nuovo tema. Si può rimuovere il tema applicato ad una pagina selezionata o a tutte le pagine del sito (nella finestra di dialogo Temi scegliere Nessuno Tema). 7
Figura 7.3.2. Finestra di dialogo Temi 7.3.6. I Frame Si possono avere due o più pagine combinate e mostrate in una unica finestra del browser simultaneamente usando i riquadri o frames. Per fare ciò, si deve creare una pagina con i Frame. La pagina Frame di per sé non ha alcun contenuto visibile. Serve solo a specificare come dividere la finestra del browser in frame aree diverse, ciascuna delle quali mostra una pagina diversa. Se si vuole creare una pagina nuova (File->Nuovo->Pagina ), cliccare Pagine con Frames nella finestra di dialogo Nuova e scegliere il modello di Frame desiderato (per esempio, Contents). La finestra aperta sarà divisa in due aree. Si può creare una pagina nuova per ogni Frame nella pagina (selezionare il pulsante di Nuova Pagina) o inserire una pagina già esistente (selezionare il pulsante Pagina Iniziale ). L'immagine seguente illustra una finestra di Frame fatta di due Frame. Per esempio, sulla parte sinistra ci sono dei collegamenti ipertestuali che cambieranno la pagina mostrata sulla destra. 8
Figura 7.3.3. Pagina con Frame Con l'aiuto di finestra a Frame, si può fare quanto segue: Si possono aggiungere frame nel frame esistente. Per dividere li Frame in colonne o righe, scegliere il frame che si vuole dividere, scegliere Frame-> Dividi Frame sulla barra dei menù 7.3.4 Finestra di dialogo di Dividi Frame Si può cancellare il Frame scegliendo il Frame che si vuole cancellare, scegliere Frame -> Cancella Frame sulla barra dei menù. Si può ridimesionare il frame trascinando il bordo con il mouse. Si possono cambiare le proprietà del frame selezionando il frame e cliccando con il pulsante destro del mouse sul frame stesso. Scegliere le Proprietà del Frame dal menù contestuale e cambiare le opzioni che si vuole. 9
7.3.7.Le proprietà della pagina Si possono Impostare le proprietà di pagina scegliendo la Pagina-> Proprietà sulla barra dei menù o cliccando con il pulsante destro e scegliendo Proprietà di Pagina nel menù contestuale. Sulla scheda Generale, si può cambiare il titolo della pagina che appare nella barra del titolo e in quelle di scorrimento create da FrontPage, come pure nei Browser web (la barra di titolo). Notare che cambiando il titolo non significherà cambiare il nome di file. Se non si usa un tema specifico, si può scegliere un colore o scegliere un'immagine per lo sfondo. Se si seleziona Consenti gli effetti di rollover sui link, si possono aggiungere degli effetti ai collegamenti ipertestuali: l'aspetto dell ipertesto cambierà quando il cursore del mouse è posizionato su di esso. I colori dei collegamenti ipertestuali possono essere cambiati. Si possono scegliere tre colori da usare per tre collegamenti ipertestuali diversi: un colore per il collegamento ipertestuale che non è stato scelto, un colore per il collegamento ipertestuale visitato ed un colore per il collegamento ipertestuale attivo. Sulla scheda Margini, si può regolare in pixel la misura del margine superiore e del margine sinistro della pagina. 7.3.8. I collegamenti ipertestuali I collegamenti ipertestuali possono essere dei testi o delle immagini che e ciccati, porteranno l utente ad un'altra pagina web. Si possono usare dei collegamenti ipertestuali per collegare altre pagine, immagini, indirizzi di posta elettronica e altri file o programmi. Per creare un collegamento ipertestuale evidenziare del testo o un immagine, cliccare Inserisci -> Collegamento Ipertestuale sulla barra dei menù e dalla finestra di dialogo Crea collegamento selezionare la pagina nell'elenco (se il link condurrà a una pagina interna al proprio sito) o digitare l'url voluto (Uniform Resource Locator l'indirizzo di Internet, che indica dove una risorsa di Internet è localizzata). Per creare un collegamento ipertestuale ad un indirizzo di e-mail, selezionare Inserisci-> Collegamento Ipertestuale sulla barra dei menù, dalla finestra di dialogo Crea Collegamento Ipertestuale cliccare sul pulsante E-Mail e nella finestra di dialogo aperta Crea il Collegamento Ipertestuale digitare l'indirizzo di e-mail 10
Figura 7.3.5. Creare il Collegamento Ipertestuale all E-Mail 7.3.9. Immagini e grafica Nella pagina web, si possono inserire delle immagini, GIF animate o altri elementi, come i simboli, i video, elementi di un modulo, etc. Per inserire un'immagine o un elemento grafico, selezionare Inserisci -> Immagine-> da File (se l'immagine è in un file sul disco rigido) o Inserisci -> Immagine -> da Clip l'art (se l'immagine è nella raccolta Clip Art). Si possono cambiare le proprietà dell'immagine scegliendo Formato -> Proprietà sulla barra dei menù (oppure selezionare l immagine e con il clic destro scegliere Proprietà Immagine nel menù contestuale). Nella scheda Generale è possibile digitare la descrizione dell immagine (la descrizione nella casella di Testo sotto la voce Rappresentazioni Alternative). Sulla scheda Aspetto, è possibile cambiare l'allineamento, variare lo spessore del bordo, o definire le proporzioni dell immagine. 7.3.10. Web Publishing pubblicare sul WEB Quando il sito, che è stato sviluppato e archiviato sul computer locale, è testato e pronto per essere mostrato sul World Wide Web, deve essere pubblicato, cioè copiato sul server, affinché gli utenti di Internet lo possano consultare. Il Provider di Servizi Internet (ISP) deve fornire le informazioni riguardo l indirizzo del Server Web (che preferibilmente abbia installate le Estensioni del Server per Front Page), il nome e la password dell utente. Per pubblicare un sito, scegliere il File-> Pubblica Sito sulla barra dei menù. Sulla finestra di dialogo Pubblica Sito, specificare l indirizzo dove pubblicare il sito. Se l ISP non fornisce lo spazio web ed il servizio, si possono trovare dei Fornitori di Spazio WEB (WPPs, le società 11
che forniscono il servizio di storaggio (Hosting) del sito web) selezionando il pulsante WPP s. Sul browser si aprirà una pagina dove si può scegliere un Fornitore di Servizi Web dall'elenco o ricercare altri WPPs che permetteranno di risolvere questo problema. Figura 7.3.6. Finestra di dialogo Pubblica sul Web Se si ha la necessità di pubblicare soltanto le pagine modificate in locale dall ultima pubblicazione effettuata, selezionare il pulsante Opzioni e scegliere Pubblica Solo Pagine Modificate. Figura 7.3.7. Finestra di dialogo Pubblica sul Web con le opzioni BIBLIOGRAFIA 1. Activeeducation. Microsoft FrontPage 2000 Step by Step. Microsoft Press, 1999.- 275 p. 2. Buyens. Microsoft FrontPage Version 2002 Inside Out. Microsoft Press, 2001.- 1264 p. 3. Online Training Solutions Inc. Microsoft FrontPage Version 2002 Step by Step. Microsoft Press, 2001.- 368 p. 12