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

Corso su FrontpageCostruire

Sviluppare Manutenere

un sito Web

Dispensa web a cura di Raffaele Principe

1° lezione: dal progetto 1° lezione: dal progetto all’implementazioneall’implementazione

Progettare delle pagine multimediali Progettare delle pagine multimediali significa utilizzare più strumenti ed significa utilizzare più strumenti ed oggetti: immagini, icone, suoni ecc. in oggetti: immagini, icone, suoni ecc. in modalità ipertestuale. Modalità che ci modalità ipertestuale. Modalità che ci consente di collegare i diversi oggetti e consente di collegare i diversi oggetti e pagine progettate.pagine progettate.

Innanzitutto è bene definire il progetto Innanzitutto è bene definire il progetto nelle sue linee essenziali, cominciando nelle sue linee essenziali, cominciando dalla home page e definendo i diversi dalla home page e definendo i diversi livelli che intendiamo implementare: la livelli che intendiamo implementare: la cosiddetta story board.cosiddetta story board.


Uno schema tipo può essere il seguente:Uno schema tipo può essere il seguente:

Questo è uno schema gerarchico ad albero Questo è uno schema gerarchico ad albero che, partendo da un file (index), si dirama che, partendo da un file (index), si dirama su più livelli orizzontali e verticali.su più livelli orizzontali e verticali.


Per sviluppare il Per sviluppare il progetto utilizziamo progetto utilizziamo FrontPage XP FrontPage XP ((ProceduraProcedura: : start – start – programmi-programmi-frontpagefrontpage))

Creiamo il nostro Creiamo il nostro web (web (ProceduraProcedura: : File – Nuovo –File – Nuovo –pagina o web –web pagina o web –web vuoto; oppure click vuoto; oppure click

su web vuoto)su web vuoto)


Decidiamo Decidiamo dove salvare il dove salvare il nostro lavoro nostro lavoro e diamo un e diamo un nome al nome al nostro web nostro web che apriremo che apriremo ogni volta che ogni volta che vogliamo vogliamo aggiungere o aggiungere o modificare modificare delle paginedelle pagine

ProceduraProcedura: : (web a pagina (web a pagina singolasingola – – OpzioniOpzioni - c:\nome_web- c:\nome_web – – Ok)Ok)


Sul nostro Sul nostro schermo appare schermo appare il web da noi il web da noi creato, due creato, due cartelle ed il file cartelle ed il file index.htm che index.htm che sarà la nostra sarà la nostra home pagehome page

ProceduraProcedura: click : click index.htmindex.htm


Al centro del rigo scriviamo il titolo Al centro del rigo scriviamo il titolo del web: Assessorato a …. del web: Assessorato a ….

(Provincia di … oppure Regione… (Provincia di … oppure Regione… …………..)…………..)

Click (on) sull’icona Click (on) sull’icona puntatore e scriviamo il puntatore e scriviamo il testo che appare a fianco.testo che appare a fianco.

Se non ci serve più il Se non ci serve più il puntatore lo chiudiamo (off) puntatore lo chiudiamo (off) cliccando sopra l’icona cliccando sopra l’icona puntatorepuntatoreAdesso provate a dare uno Adesso provate a dare uno sfondo alla pagina.sfondo alla pagina.Procedura: Formato – Tema - Procedura: Formato – Tema - Pagine selezionate (scegliamo Pagine selezionate (scegliamo un tema) -OKun tema) -OKSe per oggi abbiamo finito, Se per oggi abbiamo finito, salviamo il lavoro e usciamo salviamo il lavoro e usciamo da FrontPageda FrontPageProcedura: File - Salva Procedura: File - Salva (oppure click sull’icona)- File - (oppure click sull’icona)- File - EsciEsci

2° lezione: i frames e i link2° lezione: i frames e i link Apriamo Frontpage (Procedura: Apriamo Frontpage (Procedura: start – programmi-frontpagestart – programmi-frontpage)) Costruiamo altre pagine (2° livello)Costruiamo altre pagine (2° livello)

Presentazione Organizzazione Servizi Ubicazione uffici Progetti

2° lezione: i frames e i link2° lezione: i frames e i link

Creiamo le nuove pagine usando i framesCreiamo le nuove pagine usando i frames Procedura: Procedura: file – nuovo – pagine o web- file – nuovo – pagine o web-

Modelli di paginaModelli di pagina Sciegliamo un modello semplice che divide Sciegliamo un modello semplice che divide

la mia pagine in due framesla mia pagine in due frames ProceduraProcedura: click su: Pagina con frame-: click su: Pagina con frame-

Intestazione-okIntestazione-ok

2° lezione: i frames e i link2° lezione: i frames e i link Impostiamo il Frame superiore e Impostiamo il Frame superiore e

inferioreinferiore Procedura:Procedura: Nuova pagina Nuova pagina Nel frame superiore scriviamo: Nel frame superiore scriviamo:

Assessorato ……………………….Assessorato ………………………. Nel frame inferiore scriviamo la Nel frame inferiore scriviamo la

PresentazionePresentazione

Formattiamo i frame e aggiungiamo uno sfondo alla pagina:Procedura: Formato – tema (selezione) -ok


Dopo aver descritto la Presentazione, Dopo aver descritto la Presentazione, salviamo la nuova pagina creata.salviamo la nuova pagina creata.

ProceduraProcedura: : File File – – Salva con nomeSalva con nome: : presentazione_indexpresentazione_index, click , click salva;salva;

FP ci chiede di salvare il frame FP ci chiede di salvare il frame superioresuperiore

ProceduraProcedura: nome file: : nome file: intestazione, salvaintestazione, salva

FP ci chiede di salvare il frame inferiore

ProceduraProcedura: nome file: : nome file: presentazione_home, salvapresentazione_home, salva


Per salvare la pagina con frames, abbiamo Per salvare la pagina con frames, abbiamo salvato prima “la cornice” e poi l’oggetto salvato prima “la cornice” e poi l’oggetto (frame) superiore e quello inferiore. La (frame) superiore e quello inferiore. La pagina viene gestita come un puzzle che pagina viene gestita come un puzzle che contiene diversi oggetti, usabili anche in contiene diversi oggetti, usabili anche in altri contesti. altri contesti.

Per richiamare la pagina dobbiamo Per richiamare la pagina dobbiamo cliccare sul file: presentazione_index.htm. cliccare sul file: presentazione_index.htm. Provate a richiamare, invece i due oggetti: Provate a richiamare, invece i due oggetti: intestazione.htm e intestazione.htm e presentazione_home.htm presentazione_home.htm

2° lezione: i frames e i link2° lezione: i frames e i link Adesso costruiamo la seconda pagina: Organizzazione e personaleAdesso costruiamo la seconda pagina: Organizzazione e personale Ripetiamo la procedura precedenteRipetiamo la procedura precedente ProceduraProcedura: : file – nuovo – pagine o web-Modelli di pagina- pagina con frame -file – nuovo – pagine o web-Modelli di pagina- pagina con frame -

intestazione– Okintestazione– Ok Questa volta nel frame superiore selezioniamo Questa volta nel frame superiore selezioniamo imposta pagina iniziale perché imposta pagina iniziale perché

vogliamo utilizzare il file Intestazione.htmvogliamo utilizzare il file Intestazione.htm

Dall’elenco dei files selezioniamo il file: intestazione.htm- ok

Al frame inferiore selezioniamo: nuova pagina


Salviamo la pagina come abbiamo Salviamo la pagina come abbiamo fatto precedentemente.fatto precedentemente.

ProceduraProcedura: : File, Salva con nome, File, Salva con nome, nome file: Organizzazione_index, oknome file: Organizzazione_index, ok

Salviamo di nuovo il frame inferiore, Salviamo di nuovo il frame inferiore, mentre non ci viene richiesto di mentre non ci viene richiesto di salvare il frame superiore perché salvare il frame superiore perché già esistentegià esistente

ProceduraProcedura: nome file: : nome file: Organizzazione_home, okOrganizzazione_home, ok

Ripetiamo questa procedura per le Ripetiamo questa procedura per le altre tre pagine rimanentialtre tre pagine rimanenti

2° lezione: i frames e i link2° lezione: i frames e i link I LinkI Link Attivare dei link significa che rendiamo Attivare dei link significa che rendiamo

“sensibile” una parola o immagine e che “sensibile” una parola o immagine e che cliccandoci sopra si attiva il cliccandoci sopra si attiva il collegamento alla pagina che si vuole collegamento alla pagina che si vuole visualizzare. Come l’indice del libro ci visualizzare. Come l’indice del libro ci indica dove si trova un capitolo o una indica dove si trova un capitolo o una pagina, il link è una modalità pagina, il link è una modalità ipertestuale di indicizzare nel testo un ipertestuale di indicizzare nel testo un documento.documento.

Proviamo a linkare i titoli dell’index con Proviamo a linkare i titoli dell’index con le pagine costruite al 2° livello.le pagine costruite al 2° livello.

Selezioniamo Selezioniamo dall’elenco cartelledall’elenco cartelle il file: il file: index.htmindex.htm

Per creare un link attivare laProcedura: Selezioniamo il 1° titolo: Presentazione, attiviamo l’icona e dal box visualizzato selezioniamo: Presentazione_-index.htm– OkRipetiamo 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:


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 significativiProviamo come sarà visualizzato sul browser tramite anteprima di FP

2° lezione: i frames e i link2° lezione: i frames e i link Come avrete notato, Come avrete notato,

attivato un collegamento attivato un collegamento presente nel file presente nel file index.htm, non abbiamo index.htm, non abbiamo modo di ritornare modo di ritornare all’indice, se non con le all’indice, se non con le icone indietro o avanti icone indietro o avanti della barra di explorer. della barra di explorer. Adesso vediamo come Adesso vediamo come tramite un bottone che tramite un bottone che chiameremo back noi chiameremo back noi attiveremo il collegamento attiveremo il collegamento alla pagina index.htmalla pagina index.htm

ProceduraProcedura: aprire una pagina del 2° livello, : aprire una pagina del 2° livello, incollare un bottone back.gif, selezionarlo e incollare un bottone back.gif, selezionarlo e attivare il collegamento selezionare il file attivare il collegamento selezionare il file index.htm, selezionare il frame di index.htm, selezionare il frame di destinazione, scegliere: tutta la paginadestinazione, scegliere: tutta la paginaRipetiamo la procedura per tutte le altre Ripetiamo la procedura per tutte le altre pagine …._indexpagine …._index


Adesso Adesso costruiamo i collegamenti fra il 2° e il 3° livellocostruiamo i collegamenti fra il 2° e il 3° livello Costruiamo le pagine del 3° livelloCostruiamo le pagine del 3° livello Procedura: modelli di pagina, pagina vuotaProcedura: modelli di pagina, pagina vuota Procedura: nuova pagina, (costruzione della pagina di descrizione del 1° dipartimento. 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 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 richiameremo nel frame inferiore, tenendo fermo il frame con l’intestazione, come vedremo in seguito), Salvare la paginavedremo in seguito), Salvare la pagina

Ripetiamo la procedura per tutti gli altri dipartimentiRipetiamo la procedura per tutti gli altri dipartimenti

Costruiamo le altre pagine del terzo livelloCostruiamo le altre pagine del terzo livello

2° lezione: i frames e i link2° lezione: i frames e i link Adesso dobbiamo costruire Adesso dobbiamo costruire

i link fra il 2° e il 3° livello i link fra il 2° e il 3° livello e su ogni pagina del 3° e su ogni pagina del 3° livello mettiamo un livello mettiamo un bottone back, che può bottone back, che può essere lo stesso già usato, essere lo stesso già usato, per ritornare alla pagina per ritornare alla pagina del 2° livellodel 2° livello

Procedura: dal 2° al 3° Procedura: dal 2° al 3° livello; (per ogni livello; (per ogni dipartimento: attivare dipartimento: attivare collegamento ) collegamento ) dipartimento1_home.htm, dipartimento1_home.htm, frame di destinazione: frame di destinazione: principaleprincipale

In tal modo decidiamo che In tal modo decidiamo che il file collegato sia il file collegato sia visualizzato nel frame visualizzato nel frame inferiore, mentre lasciamo inferiore, mentre lasciamo inalterato il frame inalterato il frame superiore (intestazione). superiore (intestazione). Provate il risultato con Provate il risultato con anteprima.anteprima.

3° lezione: le tabelle e le immagini3° lezione: le tabelle e le immagini

Finora abbiamo visto come suddividere Finora abbiamo visto come suddividere una pagina in frames. una pagina in frames.

Adesso vediamo come utilizzare le Adesso vediamo come utilizzare le tabelle non solo per inserire dati, ma tabelle non solo per inserire dati, ma anche per comporre ulteriore un singolo anche per comporre ulteriore un singolo frame o pagina.frame o pagina.

Esempio. Proviamo ad accostare al testo Esempio. Proviamo ad accostare al testo un’immagine che migliori e completi un’immagine che migliori e completi l’informazione che vogliamo l’informazione che vogliamo comunicare. Nel frame che descrive il 1° comunicare. Nel frame che descrive il 1° dipartimento mettiamo una sua dipartimento mettiamo una sua fotografia. Creiamo due celle nel frame: fotografia. Creiamo due celle nel frame: una con l’immagine e l’altra con la una con l’immagine e l’altra con la descrizione.descrizione.

Creiamo una pagina nuova Creiamo una pagina nuova Procedura: Procedura: file – nuovo – pagina vuotafile – nuovo – pagina vuota In questo frame scriviamo al centro: 1° In questo frame scriviamo al centro: 1°

Dipartimento: bilancio e risorse.Dipartimento: bilancio e risorse. Inseriamo una tabella di una riga e due Inseriamo una tabella di una riga e due

colonne. colonne. Procedura: menù Procedura: menù tabella – inserisci –tabella – inserisci –

tabellatabella - ok - 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) –okClicchiamo dentro la 1 cella e inseriamo un’immagine da selezionare dall’archivio


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.


Oltre alle immagini, possiamo inserire Oltre alle immagini, possiamo inserire anche video e suono. Anch’essi sono anche video e suono. Anch’essi sono oggetti che devono essere presenti sul oggetti che devono essere presenti sul server web, come vedremo più avanti, server web, come vedremo più avanti, altrimenti possono non essere altrimenti possono non essere visualizzati e lo spazio da essi visualizzati e lo spazio da essi occupato sulla pagina risultare vuoto.occupato sulla pagina risultare vuoto.

Costruire pagine web significa non solo Costruire pagine web significa non solo conoscere un editor web come conoscere un editor web come FrontPage, ma anche saper usare altri FrontPage, ma anche saper usare altri applicativi come paint per creare o applicativi come paint per creare o modificare immagini. Uno dei formati modificare immagini. Uno dei formati più usati sul web è gif perché è il più usati sul web è gif perché è il “meno pesante” in rapporto alla “meno pesante” in rapporto alla qualità dell’immagine creata.qualità dell’immagine creata.

Adesso vediamo come possiamo Adesso vediamo come possiamo modificare immagini esistenti o crearne modificare immagini esistenti o crearne di nuove usando Paint.di nuove usando Paint.

Senza chiudere Frontpage attiviamo Senza chiudere Frontpage attiviamo Paint.Paint.

Procedura: Procedura: Start –Programmi –Accessori Start –Programmi –Accessori –Paint–Paint

Procedura: Procedura: File – Apri – Cerca in – D – File – Apri – Cerca in – D – nostro-nome nostro-nome (cartella del nostro Web)(cartella del nostro Web) – – images – arcnavhh - apriimages – 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, URL4° lezione: segnalibro, mail, URL

Normalmente quando Normalmente quando attiviamo un collegamento, la attiviamo un collegamento, la pagina ci viene visualizzata pagina ci viene visualizzata dal suo inizio, ma nel caso di dal suo inizio, ma nel caso di documenti lunghi, può essere documenti lunghi, può essere utile che venga visualizzata a utile che venga visualizzata a partire da una data posizione. partire da una data posizione. Per far ciò attiviamo un Per far ciò attiviamo un collegamento ad un collegamento ad un segnalibro che avremo segnalibro che avremo marcato sulla pagina da marcato sulla pagina da richiamare.richiamare.

Costruiamo una pagina che Costruiamo una pagina che contenga lo statuto dell’Ente contenga lo statuto dell’Ente e vogliamo che attivando il e vogliamo che attivando il collegamento venga collegamento venga visualizzato il capitolo che visualizzato il capitolo che parli dell’assessorato che parli dell’assessorato che stiamo descrivendo.stiamo descrivendo.


Attivare un segnalibroAttivare un segnalibro Costruiamo la pagina Statuto.htm Costruiamo la pagina Statuto.htm

con pagina vuota, ovvero con un con pagina vuota, ovvero con un solo frame, vi inseriamo il testo e solo frame, vi inseriamo il testo e attiviamo il segnalibro al capitolo attiviamo il segnalibro al capitolo che parla dell’assessorato ….che parla dell’assessorato ….

ProceduraProcedura: selezione testo, menù : selezione testo, menù inserisci, segnalibro, okinserisci, segnalibro, ok

Salviamo la pagina, statuto.htmSalviamo la pagina, statuto.htm Ritorniamo alla pagina Ritorniamo alla pagina

Dipartimento1_home.htmDipartimento1_home.htm ProceduraProcedura: attiviamo : attiviamo

collegamento, selezioniamo collegamento, selezioniamo Statuto.htmStatuto.htm, click su , click su segnalibrosegnalibro, , selezioniamo il segnalibro:selezioniamo il segnalibro: articolo 100articolo 100, ok, selezioniamo il , ok, selezioniamo il frame di destinazione: nuova frame di destinazione: nuova finestra (provate anche le altre finestra (provate anche le altre opzioni)opzioni)

Provate in anteprima il risultatoProvate in anteprima il risultato


Finora abbiamo visto come si Finora abbiamo visto come si attiva un collegamento ad un attiva un collegamento ad un documento.documento.

Adesso impariamo ad attivare un Adesso impariamo ad attivare un collegamento ad un programma collegamento ad un programma di posta elettronica come outlook di posta elettronica come outlook per ricevere mail da chi visita le per ricevere mail da chi visita le nostre pagine.nostre pagine.

Creiamo o recuperiamo Creiamo o recuperiamo un’immagine (clip_mail.gif) e un’immagine (clip_mail.gif) e scriviamo a fianco scriviamo a fianco scrivi al scrivi al webmasterwebmaster. Procedura: . Procedura: Selezionare: clip+scritta, attivare Selezionare: clip+scritta, attivare collegamento , cliccare collegamento , cliccare sull’icona - digitare l’indirizzo di sull’icona - digitare l’indirizzo di mail mail ( per esempio: info( per esempio: info@@didaweb.it) - didaweb.it) - Ok –OkOk –Ok

Salvare le modifiche fatte. Salvare le modifiche fatte.


Link a URL (sito)Link a URL (sito) Adesso proviamo a creare un Adesso proviamo a creare un

collegamento ad un sito webcollegamento ad un sito web Aggiungiamo alla nostra home Aggiungiamo alla nostra home

page un link alla Presidenza page un link alla Presidenza dell’Entedell’Ente

Procedura: selezionare l’oggetto Procedura: selezionare l’oggetto da collegare: da collegare: Presidenza dell’Ente Presidenza dell’Ente – attivare collegamento - digitare – attivare collegamento - digitare sulla riga sulla riga indirizzoindirizzo il sito che si il sito che si vuole collegare: (per esempio: vuole collegare: (per esempio: http://www.provincia.roma.it/http://www.provincia.roma.it/ Se Se non compare la riga dell’indirizzo non compare la riga dell’indirizzo selezionare: file di pagina ..selezionare: file di pagina ..

tornare a tornare a Frontpage Frontpage per provare per provare la modifica in anteprimala modifica in anteprima

Pubblicare il sito per internetPubblicare il sito per internet

Finora abbiamo provato le nostre Finora abbiamo provato le nostre pagine in anteprima, ovvero in off line. pagine in anteprima, ovvero in off line. Adesso vediamo come attivare la Adesso vediamo come attivare la procedura per pubblicare il nostro sito procedura per pubblicare il nostro sito per Internet, affinchè le nostre pagine per Internet, affinchè le nostre pagine siano visitabili da tutto il mondo.siano visitabili da tutto il mondo.

Per far ciò abbiamo bisogno di un Per far ciò abbiamo bisogno di un Provider che ospiti le nostre pagine e Provider che ospiti le nostre pagine e ci assegni uno spazio (cartella) dentro ci assegni uno spazio (cartella) dentro cui noi trasferiamo i nostri files per cui noi trasferiamo i nostri files per essere visitabili in internet.essere visitabili in internet.

Avendo aperto un sito web (su una Avendo aperto un sito web (su una unità C o D della nostra macchina), FP unità C o D della nostra macchina), FP ci consente di pubblicare le pagine ci consente di pubblicare le pagine senza aver bisogno di un programma senza aver bisogno di un programma FTP con cui trasferire i files al ProviderFTP con cui trasferire i files al Provider

Procedura: (salviamo tutti i files aperti Procedura: (salviamo tutti i files aperti che abbiamo modificato. Appare un che abbiamo modificato. Appare un asterisco a fianco al nome del file) File, asterisco a fianco al nome del file) File, Pubblica web, digitare l’indirizzo del Pubblica web, digitare l’indirizzo del Provider (fornito dall’amministratore), Provider (fornito dall’amministratore), assegnare lo user name e password, assegnare lo user name e password, cliccare su pubblicacliccare su pubblica

5° lezione: i moduli5° lezione: i moduli

I moduli servono per I moduli servono per raccogliere informazioni raccogliere informazioni che i visitatori delle nostre che i visitatori delle nostre pagine vogliono pagine vogliono trasmetterci. Per esempio trasmetterci. Per esempio nome e cognome, nome e cognome, residenza, età, iscrizione residenza, età, iscrizione ad una mailing list ecc.ad una mailing list ecc.

Prima di iniziare a costruire Prima di iniziare a costruire un modulo, creiamo un un modulo, creiamo un semplice file semplice file grazie.htm grazie.htm che utilizzeremo in seguito. che utilizzeremo in seguito. Nella pagina inseriamo un Nella pagina inseriamo un bottone bottone home sul quale costruiamo un link, a tutta pagina, all’home page del sito (index.htm).


A questo punto costruiamo un A questo punto costruiamo un semplice esempio di pagina con semplice esempio di pagina con modulo.modulo.

ProceduraProcedura: : inserisci – modulo – inserisci – modulo – modulomodulo

Inseriamo delle righe vuote con il Inseriamo delle righe vuote con il tasto tasto invioinvioCreiamo i campi del moduloCreiamo i campi del modulo

ProceduraProcedura: Inserisci – modulo –: Inserisci – modulo –casella di testo a riga singola; casella di testo a riga singola;

Inserisci – modulo –casella di testo Inserisci – modulo –casella di testo a riga singola;a riga singola;

Inserisci – modulo –casella di testo Inserisci – modulo –casella di testo a riga singola;a riga singola;

Inserisci – modulo –casella di testo Inserisci – modulo –casella di testo a scorrimento;a scorrimento;

Accanto ad ogni casella scriviamo Accanto ad ogni casella scriviamo una didascalia di orientamentouna didascalia di orientamento

Didascalie delle caselle di testo


Per poter ricevere le informazioni Per poter ricevere le informazioni raccolte, possiamo utilizzare un raccolte, possiamo utilizzare un indirizzo di posta elettronica che indirizzo di posta elettronica che ci farà avere una mail per ogni ci farà avere una mail per ogni modulo riempito.modulo riempito.

Con il cursore dentro il modulo ..Con il cursore dentro il modulo .. ProceduraProcedura: : Inserisci – modulo – Inserisci – modulo –

proprietà modulo –Invia a – proprietà modulo –Invia a – Indirizzo di posta elettronica: Indirizzo di posta elettronica: info.@[email protected] –okdidaweb.it –ok

Se vogliamo rendere più Se vogliamo rendere più accattivante la risposta usiamo il accattivante la risposta usiamo il file grazie.htm di risposta file grazie.htm di risposta automatica all’invio del modulo. automatica all’invio del modulo.

Attiviamo il bottone OpzioniAttiviamo il bottone Opzioni ProceduraProcedura: opzioni –pagina di : opzioni –pagina di

conferma, grazie.htm – okconferma, grazie.htm – ok


All’apparire di questa All’apparire di questa finestrafinestra rispondiamo rispondiamo con un click su Nocon un click su No

Salviamo la pagina Salviamo la pagina che chiameremo che chiameremo modulo.htmmodulo.htm

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

5° lezione: i linguaggi html e javascript5° lezione: i linguaggi html e javascript

Finora per scrivere le nostre Finora per scrivere le nostre pagine abbiamo usato Frontpage, pagine abbiamo usato Frontpage, che è un editor web, che per noi che è un editor web, che per noi scrive in Html, linguaggio che scrive in Html, linguaggio che viene interpretato dal browers di viene interpretato dal browers di internet.internet.

Ecco il listato del nostro file Ecco il listato del nostro file index.htm che possiamo index.htm che possiamo visualizzare da Frontpage visualizzare da Frontpage cliccando sul menù in basso html, cliccando sul menù in basso html, oppure in Explorer selezionando oppure in Explorer selezionando dal menù Visualizza, HTML.dal menù Visualizza, HTML.

Per scrivere pagine web Per scrivere pagine web complesse usiamo non solo html, complesse usiamo non solo html, ma anche molti altri linguaggi di ma anche molti altri linguaggi di programmazione. Essi devono programmazione. Essi devono essere comunque compatibili con essere comunque compatibili con l’html ed essere integrabili in l’html ed essere integrabili in esso. esso.

Uno dei linguaggi più utilizzati è Uno dei linguaggi più utilizzati è JavascriptJavascript

5° lezione: i linguaggi html e javascript5° lezione: i linguaggi html e javascript Creiamo una pagina: privacy.htm Creiamo una pagina: privacy.htm

che contenga il richiamo al che contenga il richiamo al rispetto dei dati personali. Tale rispetto dei dati personali. Tale pagina verrà visualizzata in una pagina verrà visualizzata in una nuova finestra cliccando su nuova finestra cliccando su trattamento dati personalitrattamento dati personali che che inseriremo nel file modulo.htminseriremo nel file modulo.htm

Dopo aver scritto il Dopo aver scritto il testo,visualizziamo la pagina in testo,visualizziamo la pagina in html ed aggiungiamo una html ed aggiungiamo una semplice procedura in javascript semplice procedura in javascript per chiudere la finestra. Salviamo per chiudere la finestra. Salviamo la pagina.la pagina.

Creiamo una pagina: privacy.htm Creiamo una pagina: privacy.htm che contenga il richiamo al che contenga il richiamo al rispetto dei dati personali. Tale rispetto dei dati personali. Tale pagina verrà visualizzata in una pagina verrà visualizzata in una nuova finestra cliccando su nuova finestra cliccando su trattamento dati personalitrattamento dati personali che che inseriremo nel file modulo.htminseriremo nel file modulo.htm

Dopo aver scritto il Dopo aver scritto il testo,visualizziamo la pagina in testo,visualizziamo la pagina in html ed aggiungiamo una html ed aggiungiamo una semplice procedura in javascript semplice procedura in javascript per chiudere la finestra. Salviamo per chiudere la finestra. Salviamo la pagina.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 javascript5° lezione: i linguaggi html e javascript

Richiamiamo il file modulo.htm ed Richiamiamo il file modulo.htm ed inseriamo il bottone inseriamo il bottone trattamento dati personali che abbiamo creato che abbiamo creato con paint. Nello script del file con paint. Nello script del file inseriamo due semplici procedure inseriamo due semplici procedure in javascript per visualizzare la in javascript per visualizzare la pagina privacy.htm in una finestra pagina privacy.htm in una finestra senza le barre degli strumenti.senza le barre degli strumenti.

All’inizio del listato html All’inizio del listato html aggiungiamo la procedura in aggiungiamo la procedura in javascript che definisce la javascript che definisce la funzione di apertura della funzione di apertura della finestra; dove collochiamo il finestra; dove collochiamo il bottone scriviamo la funzione di bottone scriviamo la funzione di chiamata del file privacy.htmchiamata 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>

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

Documents

Transcript of Corso su Frontpage Costruire Sviluppare Manutenere un sito Web Dispensa web a cura di Raffaele...