Dispensa web a cura di Raffaele Principe Corso su Frontpage Costruire Sviluppare Manutenere un sito Web Dispensa web a cura di Raffaele Principe

1° lezione: dal progetto all’implementazione Progettare delle pagine multimediali significa utilizzare più strumenti ed oggetti: immagini, icone, suoni ecc. in modalità ipertestuale. Modalità che ci consente di collegare i diversi oggetti e pagine progettate. Innanzitutto è bene definire il progetto nelle sue linee essenziali, cominciando dalla home page e definendo i diversi livelli che intendiamo implementare: la cosiddetta story board.

1° lezione: dal progetto all’implementazione Uno schema tipo può essere il seguente: Questo è uno schema gerarchico ad albero che, partendo da un file (index), si dirama su più livelli orizzontali e verticali.

1° lezione: dal progetto all’implementazione Per sviluppare il progetto utilizziamo FrontPage XP (Procedura: start – programmi-frontpage) Creiamo il nostro web (Procedura: File – Nuovo –pagina o web –web vuoto; oppure click su web vuoto)

1° lezione: dal progetto all’implementazione Decidiamo dove salvare il nostro lavoro e diamo un nome al nostro web che apriremo ogni volta che vogliamo aggiungere o modificare delle pagine Procedura: (web a pagina singola – Opzioni - c:\nome_web – Ok)

1° lezione: dal progetto all’implementazione Sul nostro schermo appare il web da noi creato, due cartelle ed il file index.htm che sarà la nostra home page Procedura: click index.htm

1° lezione: dal progetto all’implementazione Al centro del rigo scriviamo il titolo del web: Assessorato a …. (Provincia di … oppure Regione… …………..) Click (on) sull’icona puntatore e scriviamo il testo che appare a fianco. Se non ci serve più il puntatore lo chiudiamo (off) cliccando sopra l’icona puntatore Adesso provate a dare uno sfondo alla pagina. Procedura: Formato – Tema - Pagine selezionate (scegliamo un tema) -OK Se per oggi abbiamo finito, salviamo il lavoro e usciamo da FrontPage Procedura: File - Salva (oppure click sull’icona)- File - Esci

2° lezione: i frames e i link Apriamo Frontpage (Procedura: start – programmi-frontpage) Costruiamo altre pagine (2° livello) Presentazione Organizzazione Servizi Ubicazione uffici Progetti

2° lezione: i frames e i link Creiamo le nuove pagine usando i frames Procedura: file – nuovo – pagine o web- Modelli di pagina Sciegliamo un modello semplice che divide la mia pagine in due frames Procedura: click su: Pagina con frame-Intestazione-ok

2° lezione: i frames e i link Impostiamo il Frame superiore e inferiore Procedura: Nuova pagina Nel frame superiore scriviamo: Assessorato ………………………. Nel frame inferiore scriviamo la Presentazione Formattiamo i frame e aggiungiamo uno sfondo alla pagina: Procedura: Formato – tema (selezione) -ok

2° lezione: i frames e i link Dopo aver descritto la Presentazione, salviamo la nuova pagina creata. Procedura: File – Salva con nome: presentazione_index, click salva; FP ci chiede di salvare il frame superiore Procedura: nome file: intestazione, salva FP ci chiede di salvare il frame inferiore Procedura: nome file: presentazione_home, salva

2° lezione: i frames e i link Per salvare la pagina con frames, abbiamo salvato prima “la cornice” e poi l’oggetto (frame) superiore e quello inferiore. La pagina viene gestita come un puzzle che contiene diversi oggetti, usabili anche in altri contesti. Per richiamare la pagina dobbiamo cliccare sul file: presentazione_index.htm. Provate a richiamare, invece i due oggetti: intestazione.htm e presentazione_home.htm

2° lezione: i frames e i link Adesso costruiamo la seconda pagina: Organizzazione e personale Ripetiamo la procedura precedente Procedura: file – nuovo – pagine o web-Modelli di pagina- pagina con frame -intestazione– Ok Questa volta nel frame superiore selezioniamo imposta pagina iniziale perché vogliamo utilizzare il file Intestazione.htm Dall’elenco dei files selezioniamo il file: intestazione.htm- ok Al frame inferiore selezioniamo: nuova pagina

2° lezione: i frames e i link Salviamo la pagina come abbiamo fatto precedentemente. Procedura: File, Salva con nome, nome file: Organizzazione_index, ok Salviamo di nuovo il frame inferiore, mentre non ci viene richiesto di salvare il frame superiore perché già esistente Procedura: nome file: Organizzazione_home, ok Ripetiamo questa procedura per le altre tre pagine rimanenti

2° lezione: i frames e i link Attivare dei link significa che rendiamo “sensibile” una parola o immagine e che cliccandoci sopra si attiva il collegamento alla pagina che si vuole visualizzare. Come l’indice del libro ci indica dove si trova un capitolo o una pagina, il link è una modalità ipertestuale di indicizzare nel testo un documento. Proviamo a linkare i titoli dell’index con le pagine costruite al 2° livello. Selezioniamo dall’elenco cartelle il file: index.htm Per creare un link attivare la Procedura: Selezioniamo il 1° titolo: Presentazione, attiviamo l’icona e dal box visualizzato selezioniamo: Presentazione_-index.htm– Ok Ripetiamo la procedura per tutti gli altri titoli dell’index.htm selezionando i rispettivi files: Organizzazone_index.htm; servizi_index.htm; Ubicazione_index.htm; Progetti_index.htm:

2° lezione: i frames e i link Come noterete, abbiamo creare molti files. E’ importante notare la differenza con word che in un singolo file può contenere molte pagine, immagini ecc., mentre il web, come dicevamo, è costruito assemblando e collegando vari oggetti come in un puzzle. Pertanto è bene classificare i files con ordine e con titoli significativi Proviamo come sarà visualizzato sul browser tramite anteprima di FP

2° lezione: i frames e i link Come avrete notato, attivato un collegamento presente nel file index.htm, non abbiamo modo di ritornare all’indice, se non con le icone indietro o avanti della barra di explorer. Adesso vediamo come tramite un bottone che chiameremo back noi attiveremo il collegamento alla pagina index.htm Procedura: aprire una pagina del 2° livello, incollare un bottone back.gif, selezionarlo e attivare il collegamento selezionare il file index.htm, selezionare il frame di destinazione, scegliere: tutta la pagina Ripetiamo la procedura per tutte le altre pagine …._index

2° lezione: i frames e i link Adesso costruiamo i collegamenti fra il 2° e il 3° livello Costruiamo le pagine del 3° livello Procedura: modelli di pagina, pagina vuota Procedura: nuova pagina, (costruzione della pagina di descrizione del 1° dipartimento. In questi casi non abbiamo bisogno di costruire la pagina con frame perché la richiameremo nel frame inferiore, tenendo fermo il frame con l’intestazione, come vedremo in seguito), Salvare la pagina Ripetiamo la procedura per tutti gli altri dipartimenti Costruiamo le altre pagine del terzo livello

2° lezione: i frames e i link Adesso dobbiamo costruire i link fra il 2° e il 3° livello e su ogni pagina del 3° livello mettiamo un bottone back, che può essere lo stesso già usato, per ritornare alla pagina del 2° livello Procedura: dal 2° al 3° livello; (per ogni dipartimento: attivare collegamento ) dipartimento1_home.htm, frame di destinazione: principale In tal modo decidiamo che il file collegato sia visualizzato nel frame inferiore, mentre lasciamo inalterato il frame superiore (intestazione). Provate il risultato con anteprima.

3° lezione: le tabelle e le immagini Finora abbiamo visto come suddividere una pagina in frames. Adesso vediamo come utilizzare le tabelle non solo per inserire dati, ma anche per comporre ulteriore un singolo frame o pagina. Esempio. Proviamo ad accostare al testo un’immagine che migliori e completi l’informazione che vogliamo comunicare. Nel frame che descrive il 1° dipartimento mettiamo una sua fotografia. Creiamo due celle nel frame: una con l’immagine e l’altra con la descrizione. Creiamo una pagina nuova Procedura: file – nuovo – pagina vuota In questo frame scriviamo al centro: 1° Dipartimento: bilancio e risorse. Inseriamo una tabella di una riga e due colonne. Procedura: menù tabella – inserisci –tabella - ok Possiamo anche formattare le singole celle o l’intera tabella. Procedura: selezionare la cella o l’intera tabella. –Menù Tabella – Proprietà – Cella ( o tabella) –ok Clicchiamo dentro la 1 cella e inseriamo un’immagine da selezionare dall’archivio

3° lezione: le tabelle e le immagini Possiamo inserire più immagini nella stessa cella, oppure crearne di nuove. Le celle ci aiutano a collocare meglio più oggetti sulla stessa pagina. Ogni singola cella può essere formattata in modo diverso, col tasto destro (d’ispezione) attiviamo proprietà e ne definiamo gli attributi. Le immagini, a differenza del testo, vanno create separatamente e inserite in una cella o frame.

3° lezione: le tabelle e le immagini Oltre alle immagini, possiamo inserire anche video e suono. Anch’essi sono oggetti che devono essere presenti sul server web, come vedremo più avanti, altrimenti possono non essere visualizzati e lo spazio da essi occupato sulla pagina risultare vuoto. Costruire pagine web significa non solo conoscere un editor web come FrontPage, ma anche saper usare altri applicativi come paint per creare o modificare immagini. Uno dei formati più usati sul web è gif perché è il “meno pesante” in rapporto alla qualità dell’immagine creata. Adesso vediamo come possiamo modificare immagini esistenti o crearne di nuove usando Paint. Senza chiudere Frontpage attiviamo Paint. Procedura: Start –Programmi –Accessori –Paint Procedura: File – Apri – Cerca in – D – nostro-nome (cartella del nostro Web) – images – arcnavhh - apri Dopo aver incollato il arcnahhh.gif con il secchiello trasformiamo lo sfondo in bianco, attiviamo inserimento testo e scriviamo back. Salviamo il file nella cartella images del nostro web per poi utilizzarlo in tutte le pagine che riterremo di farlo. Basta trascinare il file sulla pagina, oppure attiviamo inserisci immagine Provate a costruire altre immagini

4° lezione: segnalibro, mail, URL Normalmente quando attiviamo un collegamento, la pagina ci viene visualizzata dal suo inizio, ma nel caso di documenti lunghi, può essere utile che venga visualizzata a partire da una data posizione. Per far ciò attiviamo un collegamento ad un segnalibro che avremo marcato sulla pagina da richiamare. Costruiamo una pagina che contenga lo statuto dell’Ente e vogliamo che attivando il collegamento venga visualizzato il capitolo che parli dell’assessorato che stiamo descrivendo.

4° lezione: segnalibro, mail, URL Attivare un segnalibro Costruiamo la pagina Statuto.htm con pagina vuota, ovvero con un solo frame, vi inseriamo il testo e attiviamo il segnalibro al capitolo che parla dell’assessorato …. Procedura: selezione testo, menù inserisci, segnalibro, ok Salviamo la pagina, statuto.htm Ritorniamo alla pagina Dipartimento1_home.htm Procedura: attiviamo collegamento, selezioniamo Statuto.htm, click su segnalibro, selezioniamo il segnalibro: articolo 100, ok, selezioniamo il frame di destinazione: nuova finestra (provate anche le altre opzioni) Provate in anteprima il risultato

4° lezione: segnalibro, mail, URL Finora abbiamo visto come si attiva un collegamento ad un documento. Adesso impariamo ad attivare un collegamento ad un programma di posta elettronica come outlook per ricevere mail da chi visita le nostre pagine. Creiamo o recuperiamo un’immagine (clip_mail.gif) e scriviamo a fianco scrivi al webmaster. Procedura: Selezionare: clip+scritta, attivare collegamento , cliccare sull’icona - digitare l’indirizzo di mail ( per esempio: info@didaweb.it) - Ok –Ok Salvare le modifiche fatte.

4° lezione: segnalibro, mail, URL Link a URL (sito) Adesso proviamo a creare un collegamento ad un sito web Aggiungiamo alla nostra home page un link alla Presidenza dell’Ente Procedura: selezionare l’oggetto da collegare: Presidenza dell’Ente – attivare collegamento - digitare sulla riga indirizzo il sito che si vuole collegare: (per esempio: http://www.provincia.roma.it/ Se non compare la riga dell’indirizzo selezionare: file di pagina .. tornare a Frontpage per provare la modifica in anteprima

Pubblicare il sito per internet Finora abbiamo provato le nostre pagine in anteprima, ovvero in off line. Adesso vediamo come attivare la procedura per pubblicare il nostro sito per Internet, affinchè le nostre pagine siano visitabili da tutto il mondo. Per far ciò abbiamo bisogno di un Provider che ospiti le nostre pagine e ci assegni uno spazio (cartella) dentro cui noi trasferiamo i nostri files per essere visitabili in internet. Avendo aperto un sito web (su una unità C o D della nostra macchina), FP ci consente di pubblicare le pagine senza aver bisogno di un programma FTP con cui trasferire i files al Provider Procedura: (salviamo tutti i files aperti che abbiamo modificato. Appare un asterisco a fianco al nome del file) File, Pubblica web, digitare l’indirizzo del Provider (fornito dall’amministratore), assegnare lo user name e password, cliccare su pubblica

5° lezione: i moduli I moduli servono per raccogliere informazioni che i visitatori delle nostre pagine vogliono trasmetterci. Per esempio nome e cognome, residenza, età, iscrizione ad una mailing list ecc. Prima di iniziare a costruire un modulo, creiamo un semplice file grazie.htm che utilizzeremo in seguito. Nella pagina inseriamo un bottone home sul quale costruiamo un link, a tutta pagina, all’home page del sito (index.htm).

5° lezione: i moduli A questo punto costruiamo un semplice esempio di pagina con modulo. Procedura: inserisci – modulo – modulo Inseriamo delle righe vuote con il tasto invio Creiamo i campi del modulo Procedura: Inserisci – modulo –casella di testo a riga singola; Inserisci – modulo –casella di testo a riga singola; Inserisci – modulo –casella di testo a scorrimento; Accanto ad ogni casella scriviamo una didascalia di orientamento Didascalie delle caselle di testo

5° lezione: i moduli Per poter ricevere le informazioni raccolte, possiamo utilizzare un indirizzo di posta elettronica che ci farà avere una mail per ogni modulo riempito. Con il cursore dentro il modulo .. Procedura: Inserisci – modulo – proprietà modulo –Invia a – Indirizzo di posta elettronica: info.@didaweb.it –ok Se vogliamo rendere più accattivante la risposta usiamo il file grazie.htm di risposta automatica all’invio del modulo. Attiviamo il bottone Opzioni Procedura: opzioni –pagina di conferma, grazie.htm – ok

5° lezione: i moduli Ovviamente dobbiamo creare un link su una pagina da cui richiamare modulo.htm. Per esempio possiamo aggiungerlo alla pagina organizzazione_home.htm, ricordandoci di scegliere come frame di destinazione: principale I moduli per verificare se funzionano devono essere prima pubblicati sullo spazio messoci a disposizione dal Provider All’apparire di questa finestra rispondiamo con un click su No Salviamo la pagina che chiameremo modulo.htm

5° lezione: i linguaggi html e javascript Finora per scrivere le nostre pagine abbiamo usato Frontpage, che è un editor web, che per noi scrive in Html, linguaggio che viene interpretato dal browers di internet. Ecco il listato del nostro file index.htm che possiamo visualizzare da Frontpage cliccando sul menù in basso html, oppure in Explorer selezionando dal menù Visualizza, HTML. Per scrivere pagine web complesse usiamo non solo html, ma anche molti altri linguaggi di programmazione. Essi devono essere comunque compatibili con l’html ed essere integrabili in esso. Uno dei linguaggi più utilizzati è Javascript

5° lezione: i linguaggi html e javascript Creiamo una pagina: privacy.htm che contenga il richiamo al rispetto dei dati personali. Tale pagina verrà visualizzata in una nuova finestra cliccando su trattamento dati personali che inseriremo nel file modulo.htm Dopo aver scritto il testo,visualizziamo la pagina in html ed aggiungiamo una semplice procedura in javascript per chiudere la finestra. Salviamo la pagina. <p><a ref= "javascript: onClick = close();" STYLE="font:16px Garamond,Times Nev Roman, Palatino; font-style:italic;"><font size="2">Chiudi la finestra </font></a> </p>

5° lezione: i linguaggi html e javascript Richiamiamo il file modulo.htm ed inseriamo il bottone trattamento dati personali che abbiamo creato con paint. Nello script del file inseriamo due semplici procedure in javascript per visualizzare la pagina privacy.htm in una finestra senza le barre degli strumenti. All’inizio del listato html aggiungiamo la procedura in javascript che definisce la funzione di apertura della finestra; dove collochiamo il bottone scriviamo la funzione di chiamata del file privacy.htm <script language="Javascript"> function apri2(){ nuova=open ("privacy.htm","", "width=350,height=300") } </script> <p><img src=images/tratt_dati_pers3.gif" width="142" height="20" border="0" onClick="apri2()" alt="privacy"></p>