Nuovi Strumenti e Tecnologie Interattive per la Didattica – Istituto A. De Pace, Lecce 1 Corso di Formazione PON 1.1 per l’ISTITUTO A.DE PACE, Lecce “ Nuovi Strumenti e Tecnologie Interattive per la Didattica” INTRODUZIONE A FRONT PAGE Realizzazione siti web e strumenti a supporto Dott.ssa Antonella Dell’Aquila, Area Sistemi Informativi e Knowledge Management, Consorzio Cetma

Nuovi Strumenti e Tecnologie Interattive per la Didattica – Istituto A. De Pace, Lecce 2 CHE COS’E’ FRONT PAGE Front Page è un editor html, che fa parte del pacchetto degli applicativi OFFICE di Microsoft. E’ un editor che adotta la modalità WYSIWYG, cioè mostra le pagine come poi saranno visualizzate dal browser. In pratica, consente di editare una pagina html senza sapere nulla di questo linguaggio, in quanto il programma stesso provvede a tradurre la pagina che noi prepariamo come se si trattasse di un documento Word.

Nuovi Strumenti e Tecnologie Interattive per la Didattica – Istituto A. De Pace, Lecce 3 PER INIZIARE… AVVIARE FRONT PAGE Dal menu START selezionare PROGRAMMI, e poi doppio clic su FRONT PAGE.

Nuovi Strumenti e Tecnologie Interattive per la Didattica – Istituto A. De Pace, Lecce 4 LOCALIZZARE UN SITO È importante localizzare esattamente il sito, cioè stabilire dove le pagine e tutti gli elementi che inseriremo saranno salvati. Questo consentirà al browser di ritrovarli, una volta pubblicato il sito o quando avremo distribuito l’ipertesto. Ecco la procedura: Menu FILE -> NUOVO -> WEB

Nuovi Strumenti e Tecnologie Interattive per la Didattica – Istituto A. De Pace, Lecce 5 Apparirà questa finestra: Qui sceglieremo il modello di sito che vogliamo realizzare Selezioniamo con un clic, ed immettiamo la directory dove il il sito verrà salvato, ed il nome del sito. N.B: Se non diversamente specificato, F. P. crea in modo automatico una cartella WEB/mioweb in C. Confermare con OK

Nuovi Strumenti e Tecnologie Interattive per la Didattica – Istituto A. De Pace, Lecce 6 A questo punto, avremo la nostra cartella, in cui sarà allocato il nostro sito. In essa, F. P. crea automaticamente altre due cartelle, PRIVATE (in cui verranno salvati tutti i file che non saranno visualizzati) e IMAGES (dove potremo salvare tutte le immagini del nostro sito). Volendo, possiamo creare altre cartelle (per esempio, SUONI). Front Page avrà provveduto a creare automaticamente anche la prima pagina del nostro sito, denominandola INDEX (ma, volendo, possiamo rinominarla). Questa è la prima pagina che dovremo preparare. Per aprirla, si procede così: Menu FILE -> APRI

Nuovi Strumenti e Tecnologie Interattive per la Didattica – Istituto A. De Pace, Lecce 7 Si aprirà questa finestra: Ecco la cartella “mioweb” con le sue sottocartelle e la pagina “index”. Basta selezionare INDEX e confermare con APRI.

Nuovi Strumenti e Tecnologie Interattive per la Didattica – Istituto A. De Pace, Lecce 8 Se precedentemente avremo scelto di costruire interamente il nostro sito, e quindi avremo selezionato “web vuoto”, la pagina “index” ci apparirà completamente bianca. Se, invece, avremo scelto un modello, per esempio “Web personale”, la pagina ci apparirà così: Ovviamente, modificheremo questa pagina secondo le nostre esigenze!

Nuovi Strumenti e Tecnologie Interattive per la Didattica – Istituto A. De Pace, Lecce 9 Supponiamo di avere scelto di lavorare su un Web vuoto, e di dover costruire interamente in nostro sito, cominciando dalla home page (pagina iniziale). Ci si propongono due alternative: a) applicare un tema b) fare tutto da soli. Ecco come fare nel primo caso: Menu FORMATO -> TEMA

Nuovi Strumenti e Tecnologie Interattive per la Didattica – Istituto A. De Pace, Lecce 10 Ecco la finestra per il settaggio del tema: Si può scegliere il tema, a quali pagine applicarlo, alcune caratteristiche, se apportare eventuali modifiche. Alla fine, confermare con OK.

Nuovi Strumenti e Tecnologie Interattive per la Didattica – Istituto A. De Pace, Lecce 11 Prendiamo in considerazione il secondo caso: vogliamo fare tutto da soli. Ecco la nostra pagina “index” vuota: Dobbiamo scegliere: lo stile del paragrafo il tipo di carattere le dimensioni lo stile carattere (grassetto, corsivo,sottolineato) l’allineamento il colore del carattere

Nuovi Strumenti e Tecnologie Interattive per la Didattica – Istituto A. De Pace, Lecce 12 In alternativa, possiamo impostare tutte queste proprietà dal menu FORMATO -> CARATTERE e FORMATO -> PARAGRAFO

Nuovi Strumenti e Tecnologie Interattive per la Didattica – Istituto A. De Pace, Lecce 13 APPLICARE UNO SFONDO Per rendere la nostra home page più accattivante, possiamo decidere di applicare uno sfondo. Possiamo scegliere se colorarlo semplicemente, oppure se inserire come sfondo una bella immagine. Ecco come procedere nei due casi: Menu FORMATO -> SFONDO In alternativa: Clic destro ->Proprietà pagina -> sfondo

Nuovi Strumenti e Tecnologie Interattive per la Didattica – Istituto A. De Pace, Lecce 14 Ecco la finestra che verrà visualizzata: Da qui è possibile settare: Colore dello sfondo Colore del testo Colori dei collegamenti Alla fine, confermare con OK.

Nuovi Strumenti e Tecnologie Interattive per la Didattica – Istituto A. De Pace, Lecce 15 Se, invece, vogliamo scegliere come sfondo un’immagine, possiamo farlo sempre dalla medesima finestra Segno di spunta qui (clic nel quadretto) Quindi, clic su “sfoglia”

Nuovi Strumenti e Tecnologie Interattive per la Didattica – Istituto A. De Pace, Lecce 16 Da questa finestra possiamo selezionare la nostra immagine. Se l’immagine è già presente nel nostro sito, basta fare doppio clic sulla cartella “images” e selezionare il file che ci interessa. Se invece l’immagine si trova altrove, occorre cliccare sul pulsante di ricerca.

Nuovi Strumenti e Tecnologie Interattive per la Didattica – Istituto A. De Pace, Lecce 17 Si apre la finestra che ci consente di selezionare la directory e la cartella in cui si trova l’immagine che vogliamo inserire come sfondo.

Nuovi Strumenti e Tecnologie Interattive per la Didattica – Istituto A. De Pace, Lecce 18 INSERIRE UN SUONO DI SOTTOFONDO E se, oltre ad uno sfondo gradevole, volessimo inserire un file musicale come sottofondo? Bisogna sempre accedere alle proprietà pagina: Clic destro -> Proprietà pagina - Generale

Nuovi Strumenti e Tecnologie Interattive per la Didattica – Istituto A. De Pace, Lecce 19 Digitare il percorso o fare clic sul pulsante SFOGLIA per aprire la finestra di ricerca file Settare la modalità di esecuzione (numero di cicli o ciclo continuo) Confermare con OK

Nuovi Strumenti e Tecnologie Interattive per la Didattica – Istituto A. De Pace, Lecce 20 A questo punto la nostra pagina “index” è bene impostata: possiamo scrivere il nostro testo e, volendo, possiamo anche inserire delle immagini o delle clip-art. Vediamo come. Menu INSERISCI -> Immagine -> da file ( o clip art) INSERIRE IMMAGINI

Nuovi Strumenti e Tecnologie Interattive per la Didattica – Istituto A. De Pace, Lecce 21 Se si vuole inserire un’immagine da file, si apre la finestra di selezione immagine (come per l’inserimento dell’immagine di sfondo). Se invece si desidera cercare una clip art, si apre la finestra della raccolta clip art, dove potremo cercare quella che ci interessa.

Nuovi Strumenti e Tecnologie Interattive per la Didattica – Istituto A. De Pace, Lecce 22 INSERIRE UNA TABELLA Se vogliamo inserire una tabella (potremmo farlo anche solo per organizzare meglio il contenuto della nostra pagina!) ecco come dobbiamo procedere: Menu TABELLA -> INSERISCI-> TABELLA

Nuovi Strumenti e Tecnologie Interattive per la Didattica – Istituto A. De Pace, Lecce 23 Si apre la finestra dalla quale possiamo settare le proprietà della tabella: numero di righe e colonne, larghezza, layaut. Confermare infine con OK

Nuovi Strumenti e Tecnologie Interattive per la Didattica – Istituto A. De Pace, Lecce 24 MODIFICARE UNA TABELLA Inserita una tabella, noi possiamo: ♦ renderla invisibile (settando a 0 la dimensione bordo) ♦ modificare dimensioni e colore dei bordi ♦ colorare lo sfondo o inserire un’immagine di sfondo ♦ dividere o unire le celle ♦ convertire la tabella in testo Per le prime tre operazioni dobbiamo accedere alla finestra della proprietà tabella. Menu TABELLA -> PROPRIETÀ -> TABELLA

Nuovi Strumenti e Tecnologie Interattive per la Didattica – Istituto A. De Pace, Lecce 25 Da qui possiamo modificare la nostra tabella come ci pare. Allo stesso modo possiamo intervenire su una cella. In questo caso, dobbiamo aprire la finestra delle proprietà cella.

Nuovi Strumenti e Tecnologie Interattive per la Didattica – Istituto A. De Pace, Lecce 26 Per dividere o unire le celle di una tabella, occorre selezionare le celle su cui si intende agire, poi accedere al menu TABELLA e selezionare UNISCI CELLE oppure DIVIDI CELLE, e settare poi il numero di righe o colonne che si vogliono creare.

Nuovi Strumenti e Tecnologie Interattive per la Didattica – Istituto A. De Pace, Lecce 27 Per convertire la tabella in testo, con il cursore del mouse dentro la tabella, si agisce sul menu TABELLA -> CONVERTI-> TABELLA IN TESTO Con lo stesso procedimento, si può convertire in tabella un testo selezionato.

Nuovi Strumenti e Tecnologie Interattive per la Didattica – Istituto A. De Pace, Lecce 28 I COLLEGAMENTI IPERTESTUALI Ora vediamo come inserire in una pagina un collegamento ipertestuale, cioè un link ad un altro documento. Supponiamo che questa sia la mia pagina index. Voglio inserire un link alla pagina seconda (che avrò già provveduto a salvare nel mio web). Prima di tutto, occorre selezionare la parola (o anche l’immagine) da cui deve partire il collegamento. Quindi, andare al menu INSERISCI -> collegamento ipertestuale

Nuovi Strumenti e Tecnologie Interattive per la Didattica – Istituto A. De Pace, Lecce 29 Si apre la finestra del collegamento. Se il collegamento deve portare ad un altro file presente nel mio Web – ad esempio, pagina seconda – basta fare clic sul file, ed il percorso apparirà nel campo indirizzo. Non resta che confermare con OK

Nuovi Strumenti e Tecnologie Interattive per la Didattica – Istituto A. De Pace, Lecce 30 Ecco il file selezionato con un clic Ecco il file selezionato con un clic Ecco la destinazione del link nel campo indirizzo

Nuovi Strumenti e Tecnologie Interattive per la Didattica – Istituto A. De Pace, Lecce 31 Il collegamento ipertestuale è stato inserito. La parola da cui parte il link cambia colore, ed il cursore del mouse, passando sopra di essa, si trasforma in manina (si può controllare visualizzando l’anteprima).

Nuovi Strumenti e Tecnologie Interattive per la Didattica – Istituto A. De Pace, Lecce 32 E se invece il link punta ad un file sterno al Web, o ad altro sito web, o ad un indirizzo ? Osserviamo la finestra del collegamento: Se si conosce il percorso del file, o l’indirizzo del sito, basta digitarlo qui. In caso contrario, si agisce su questi pulsanti: Per esplorare il Web con il browser Per cercare un file nel nostro computer Per inserire un indirizzo e.mail Per creare una nuova pagina ed un collegamento ad essa.

Nuovi Strumenti e Tecnologie Interattive per la Didattica – Istituto A. De Pace, Lecce 33 Trovato il file o l’indirizzo che ci interessa, si seleziona con un clic, si conferma con OK, ed il collegamento è realizzato.

Nuovi Strumenti e Tecnologie Interattive per la Didattica – Istituto A. De Pace, Lecce 34 ATTENZIONE!!! Naturalmente, il collegamento ad un sito Web funziona solo se si è connessi alla rete Internet. Per il collegamento ad un file presente nel nostro Web o ad un indirizzo non ci sono problemi. Quando, invece, ci colleghiamo ad un altro file presente nel computer locale, dobbiamo ricordare che il link funziona solo con il nostro computer; quando il sito sarà in rete (o l’ipertesto sarà distribuito, per esempio, su CD ROM), il link non funzionerà più, poiché il browser non riuscirà a trovare il file a cui il collegamento punta. Cosa fare, allora? Semplice: se vogliamo collegarci ad un file già presente nel nostro HD, basta avere l’accortezza di copiarlo e salvarlo nella cartella del nostro web, e poi procedere creando un collegamento ad un file interno.

Nuovi Strumenti e Tecnologie Interattive per la Didattica – Istituto A. De Pace, Lecce 35 LA BARRA DELLE VISUALIZZAZIONI Questa è la barra delle visualizzazioni del nostro web, che possiamo vedere a sinistra della nostra pagina. Il pulsante PAGINA ci consente di visualizzare sullo schermo la pagina che ci interessa.PAGINA Il pulsante CARTELLE ci consente di vedere tutte le cartelle ed i file del nostro Web e di organizzarli come ci pare.CARTELLE Il pulsante REPORT ci consente di analizzare il Web e di gestirlo.REPORT Il pulsante STRUTTURA ci permette di creare la struttura del Web (una sorta di mappa).STRUTTURA Il pulsante COLLAGAMENTI ci permette di controllare i collegamenti del nostro Web.COLLAGAMENTI Il pulsante ATTIVITA’ ci permette di gestire delle attività legate al Web.ATTIVITA’

Nuovi Strumenti e Tecnologie Interattive per la Didattica – Istituto A. De Pace, Lecce 36 Il mio web in visualizzazione pagina

Nuovi Strumenti e Tecnologie Interattive per la Didattica – Istituto A. De Pace, Lecce 37 Tutte le cartelle ed i file del mio web

Nuovi Strumenti e Tecnologie Interattive per la Didattica – Istituto A. De Pace, Lecce 38 Ecco il report del mio web

Nuovi Strumenti e Tecnologie Interattive per la Didattica – Istituto A. De Pace, Lecce 39 Ecco la struttura del mio web

Nuovi Strumenti e Tecnologie Interattive per la Didattica – Istituto A. De Pace, Lecce 40 Ecco i collegamenti della mia pagina index (si visualizzano i collegamenti da e per la pagina selezionata)

Nuovi Strumenti e Tecnologie Interattive per la Didattica – Istituto A. De Pace, Lecce 41 Nel mio web non è impostata nessuna attività!

Nuovi Strumenti e Tecnologie Interattive per la Didattica – Istituto A. De Pace, Lecce 42 LA STRUTTURA Delle visualizzazioni possibili, quelle che ci interessano di più sono la visualizzazione PAGINA – che normalmente adoperiamo per lavorare sulle nostre pagine web – e la visualizzazione STRUTTURA, che ci consente di progettare il nostro sito, creando automaticamente le pagine che lo compongono. Vediamo ora come si fa a creare una struttura. Passo 1 – Localizzare il sito web – In tal modo Front Page crea automaticamente la prima pagina o home page o index. Passo 2 – Aprire il Web e porsi in visualizzazione STRUTTURA.

Nuovi Strumenti e Tecnologie Interattive per la Didattica – Istituto A. De Pace, Lecce 43 Questo è il mio nuovo web (mioweb1) in visualizzazione struttura. Come si vede, è presente solo la pagina index.

Nuovi Strumenti e Tecnologie Interattive per la Didattica – Istituto A. De Pace, Lecce 44 Dobbiamo ora creare la struttura, cominciando dalle pagine di 1° livello, cioè le pagine collegate direttamente alla home page. Ecco la procedura:Menu FILE -> NUOVO -> PAGINA

Nuovi Strumenti e Tecnologie Interattive per la Didattica – Istituto A. De Pace, Lecce 45 Ed ecco che la nostra struttura si è arricchita di una nuova pagina. Per creare altre pagine di 1° livello, basta ripetere l’operazione. Lo stesso risultato si ottiene puntando il mouse dentro la pagina index, facendo clic col pulsante dx e selezionando dal menu contestuale “Nuova Pagina”.

Nuovi Strumenti e Tecnologie Interattive per la Didattica – Istituto A. De Pace, Lecce 46 Ed ecco la nostra struttura con la home page ed una serie di pagine di 1° livello, che andranno rinominate secondo le nostre esigenze (clic destro nella pagina e selezionare dal menu contestuale RINOMINA, quindi nel campo nome divenuto attivo digitare il nuovo nome della pagina).

Nuovi Strumenti e Tecnologie Interattive per la Didattica – Istituto A. De Pace, Lecce 47 Come si può notare, durante la creazione di pagine di 1° livello la home page risulta selezionata, perché ad essa si collegheranno le pagine create. Per creare pagine di 2° livello, dovremo selezionare di volta in volta la pagina di 1° livello a cui esse dovranno collegarsi ( o puntare il mouse nella pagina, se vogliamo utilizzare il tasto dx).

Nuovi Strumenti e Tecnologie Interattive per la Didattica – Istituto A. De Pace, Lecce 48 Ed ecco il nostro Web con tutte le pagine che Front Page ha provveduto a creare intanto che noi le includevamo nella struttura (Per visualizzare l’elenco dei file, basta fare clic sul pulsante “Elenco cartelle” nella barra degli strumenti).

Nuovi Strumenti e Tecnologie Interattive per la Didattica – Istituto A. De Pace, Lecce 49 La struttura andrebbe creata come prima operazione, dopo aver localizzato il web, perché è buona norma pianificare chiaramente come il nostro sito (o il nostro ipertesto) dovrà essere composto. Tuttavia, è possibile creare la struttura anche dopo aver creato le pagine del web. Questa operazione è necessaria nel caso in cui volessimo usare i BORDI CONDIVISI e fare in modo che F. P. crei in automatico i pulsanti di spostamento fra le pagine.BORDI CONDIVISI Ecco come si fa: In visualizzazione struttura e con l’elenco dei file visualizzato, fare clic su ciascuna pagina e trascinarla nel campo struttura, esattamente sotto la pagina a cui dovrà essere collegata (nel caso di pagine di 1° livello, ad esempio, trascineremo il file e rilasceremo il pulsante del mouse sotto home page). VEDI IMMAGINE

Nuovi Strumenti e Tecnologie Interattive per la Didattica – Istituto A. De Pace, Lecce 50

Nuovi Strumenti e Tecnologie Interattive per la Didattica – Istituto A. De Pace, Lecce 51 I BORDI CONDIVISI I bordi condivisi sono delle aree delle nostre pagine Web, collocate lungo i bordi (superiore, inferiore, sinistro o destro, a nostra scelta) che contengono i pulsanti di spostamento ed altri elementi che noi desideriamo far apparire in tutte le pagine senza doverli inserire ogni volta. Tali elementi vengono, appunto, condivisi. Per inserire i bordi condivisi, occorre agire sul menu FORMATO->BORDI CONDIVISI in visualizzazione PAGINA.

Nuovi Strumenti e Tecnologie Interattive per la Didattica – Istituto A. De Pace, Lecce 52 Si apre la finestra di dialogo, da cui possiamo scegliere a quali pagine applicare i bordi, la collocazione del bordo (o dei bordi) e se vogliamo che F. P. inserisca in automatico i pulsanti di spostamento (cioè i link alle altre pagine). Quest’ultima opzione, però,è possibile solo se precedentemente avremo creato una struttura.

Nuovi Strumenti e Tecnologie Interattive per la Didattica – Istituto A. De Pace, Lecce 53 Supponiamo di voler inserire in tutte le pagine del nostro Web il bordo sinistro, e voler includere i pulsanti di spostamento. Dopo aver operato il settaggio ed aver confermato con OK, nella mia pagina appare il bordo con una scritta: Per modificare le proprietà della barra di spostamento, selezionare la scritta con un clic, fare clic col pulsante dx del mouse e dal menu contestuale scegliere Proprietà barra di spostamento.

Nuovi Strumenti e Tecnologie Interattive per la Didattica – Istituto A. De Pace, Lecce 54 Si aprirà questa finestra di dialogo: Da qui si può scegliere a quali pagine devono condurre i pulsanti, nonché l’aspetto degli stessi. Io ho scelto di far apparire in ciascuna pagina le pagine figlie, cioè le pagine che dipendono da essa.

Nuovi Strumenti e Tecnologie Interattive per la Didattica – Istituto A. De Pace, Lecce 55 E questa è l’anteprima della pagina index del mio web, con i collegamenti a tutte le pagine di 1° livello.

Nuovi Strumenti e Tecnologie Interattive per la Didattica – Istituto A. De Pace, Lecce 56 Volendo, si può scegliere di non includere i pulsanti di spostamento, e personalizzare i bordi con l’inserimento di elementi e testo a nostra scelta.

Nuovi Strumenti e Tecnologie Interattive per la Didattica – Istituto A. De Pace, Lecce 57 IN CONCLUSIONE… Dovremmo essere in condizione di realizzare il nostro primo, semplice sito web. Certo, il programma è molto più complesso ed include funzioni che qui non prenderemo in considerazione (form, fogli di stile, altri componenti come database, pulsanti e immagini rollover, applet Java…) GRAZIE A TUTTI PER L’ATTENZIONE! Materiale tratto da CIRCOLO DIDATTICO “G. LOMBARDO RADICE” CATONA DI REGGIO CALABRIAhttp://