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

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


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.


PER INIZIARE…

AVVIARE FRONT PAGE

Dal menu START selezionare PROGRAMMI, e poi doppio clic su FRONT PAGE.


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


Apparirà questa finestra:

Qui sceglieremo il modellodi 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 inmodo automatico una cartella WEB/mioweb in C.

Confermare con OK


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


Si aprirà questa finestra:

Ecco la cartella “mioweb” con le sue sottocartelle e la pagina “index”.Basta selezionare INDEX e confermarecon APRI.


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 paginasecondo le nostre esigenze!


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


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.


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


In alternativa, possiamo impostare tutte queste proprietà dal menu FORMATO -> CARATTERE e FORMATO -> PARAGRAFO


APPLICARE UNO SFONDOPer 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


Ecco la finestra che verrà visualizzata:

Da qui è possibile settare:

Colore dello sfondo

Colore del testo

Colori dei collegamenti

Alla fine, confermare con OK.


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”


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.


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.


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


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


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


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.


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


Si apre la finestra dalla quale possiamo settare le proprietà della tabella: numero di righe e colonne, larghezza, layaut.

Confermare infine con OK


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


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.


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.


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.


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


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


Ecco il file selezionat

ocon un clic

Ecco il file selezionat

ocon un clic

Ecco la destinazione del link nel

campoindirizzo


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).


E se invece il link punta ad un file sterno al Web, o ad altro sito web, o ad un indirizzo e-mail?

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.


Trovato il file o l’indirizzo che ci interessa, si seleziona con un clic, si conferma con OK, ed il collegamento è realizzato.


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 e-mail 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.


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.

Il pulsante CARTELLE ci consente di vedere tutte le cartelle ed i file del nostro Web e di organizzarli come ci pare.

Il pulsante REPORT ci consente di analizzare il Web e di gestirlo.

Il pulsante STRUTTURA ci permette di creare la struttura del Web (una sorta di mappa).

Il pulsante COLLAGAMENTI ci permette di controllare i collegamenti del nostro Web.

Il pulsante ATTIVITA’ ci permette di gestire delle attività legate al Web.


Il mio web in visualizzazione pagina


Tutte le cartelle ed i file del mio web


Ecco il report del mio web


Ecco la struttura del mio web


Ecco i collegamenti della mia pagina index(si visualizzano i collegamenti da e per la pagina

selezionata)


Nel mio web non è impostata nessuna attività!


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.


Questo è il mio nuovo web (mioweb1) in visualizzazione struttura. Come si vede, è presente solo la pagina index.


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


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”.


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).


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).


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).


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.

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


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.


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.


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.


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.


E questa è l’anteprima della pagina index del mio web, con i collegamenti a tutte le pagine di 1° livello.


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.


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!

e-mail: [email protected]

Materiale tratto da http://www.achindamo.net/materiali.htm CIRCOLO DIDATTICO “G. LOMBARDO RADICE” CATONA DI REGGIO CALABRIA

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

Documents

Transcript of Nuovi Strumenti e Tecnologie Interattive per la Didattica – Istituto A. De Pace, Lecce 1 Corso di...