La presentazione è in caricamento. Aspetta per favore

La presentazione è in caricamento. Aspetta per favore

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

Presentazioni simili


Presentazione sul tema: "Corso su Frontpage Costruire Sviluppare Manutenere un sito Web Dispensa web a cura di Raffaele Principe."— Transcript della presentazione:

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

2 1° lezione: dal progetto allimplementazione 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. 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. 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.

3 1° lezione: dal progetto allimplementazione Uno schema tipo può essere il seguente: 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. Questo è uno schema gerarchico ad albero che, partendo da un file (index), si dirama su più livelli orizzontali e verticali.

4 1° lezione: dal progetto allimplementazione Per sviluppare il progetto utilizziamo FrontPage XP (Procedura: start – programmi- frontpage) 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) Creiamo il nostro web (Procedura: File – Nuovo – pagina o web –web vuoto; oppure click su web vuoto)

5 1° lezione: dal progetto allimplementazione Decidiamo dove salvare il nostro lavoro e diamo un nome al nostro web che apriremo ogni volta che vogliamo aggiungere o modificare delle pagine 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) Procedura: (web a pagina singola – Opzioni - c:\nome_web – Ok)

6 1° lezione: dal progetto allimplementazione Sul nostro schermo appare il web da noi creato, due cartelle ed il file index.htm che sarà la nostra home page 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 Procedura: click index.htm

7 1° lezione: dal progetto allimplementazione Al centro del rigo scriviamo il titolo del web: Assessorato a …. (Provincia di … oppure Regione… …………..) Click (on) sullicona puntatore e scriviamo il testo che appare a fianco. Se non ci serve più il puntatore lo chiudiamo (off) cliccando sopra licona 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 sullicona)- File - Esci

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

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

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

11 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; Procedura: File – Salva con nome: presentazione_index, click salva; FP ci chiede di salvare il frame superiore FP ci chiede di salvare il frame superiore Procedura: nome file: intestazione, salva Procedura: nome file: intestazione, salva FP ci chiede di salvare il frame inferiore Procedura: nome file: presentazione_home, salva

12 2° lezione: i frames e i link Per salvare la pagina con frames, abbiamo salvato prima la cornice e poi loggetto (frame) superiore e quello inferiore. La pagina viene gestita come un puzzle che contiene diversi oggetti, usabili anche in altri contesti. Per salvare la pagina con frames, abbiamo salvato prima la cornice e poi loggetto (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 Per richiamare la pagina dobbiamo cliccare sul file: presentazione_index.htm. Provate a richiamare, invece i due oggetti: intestazione.htm e presentazione_home.htm

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

14 2° lezione: i frames e i link Salviamo la pagina come abbiamo fatto precedentemente. Salviamo la pagina come abbiamo fatto precedentemente. Procedura: File, Salva con nome, nome file: Organizzazione_index, ok 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 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 Procedura: nome file: Organizzazione_home, ok Ripetiamo questa procedura per le altre tre pagine rimanenti Ripetiamo questa procedura per le altre tre pagine rimanenti

15 2° lezione: i frames e i link I Link 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 lindice del libro ci indica dove si trova un capitolo o una pagina, il link è una modalità ipertestuale di indicizzare nel testo un documento. 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 lindice 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 dellindex con le pagine costruite al 2° livello. Proviamo a linkare i titoli dellindex con le pagine costruite al 2° livello. Selezioniamo dallelenco cartelle il file: index.htm Selezioniamo dallelenco cartelle il file: index.htm Per creare un link attivare la Procedura: Selezioniamo il 1° titolo: Presentazione, attiviamo licona e dal box visualizzato selezioniamo: Presentazione_-index.htm – Ok Ripetiamo la procedura per tutti gli altri titoli dellindex.htm selezionando i rispettivi files: Organizzazone_index.htm; servizi_index.htm; Ubicazione_index.htm; Progetti_index.htm:

16 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

17 2° lezione: i frames e i link Come avrete notato, attivato un collegamento presente nel file index.htm, non abbiamo modo di ritornare allindice, 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 Come avrete notato, attivato un collegamento presente nel file index.htm, non abbiamo modo di ritornare allindice, 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 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 Ripetiamo la procedura per tutte le altre pagine …._index

18 2° lezione: i frames e i link Adesso costruiamo i collegamenti fra il 2° e il 3° livello Adesso costruiamo i collegamenti fra il 2° e il 3° livello Costruiamo le pagine del 3° livello Costruiamo le pagine del 3° livello Procedura: modelli di pagina, pagina vuota 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 lintestazione, come vedremo in seguito), Salvare la pagina 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 lintestazione, come vedremo in seguito), Salvare la pagina Ripetiamo la procedura per tutti gli altri dipartimenti Ripetiamo la procedura per tutti gli altri dipartimenti Costruiamo le altre pagine del terzo livello Costruiamo le altre pagine del terzo livello

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

20 3° lezione: le tabelle e le immagini Finora abbiamo visto come suddividere una pagina in frames. 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. 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 unimmagine che migliori e completi linformazione che vogliamo comunicare. Nel frame che descrive il 1° dipartimento mettiamo una sua fotografia. Creiamo due celle nel frame: una con limmagine e laltra con la descrizione. Esempio. Proviamo ad accostare al testo unimmagine che migliori e completi linformazione che vogliamo comunicare. Nel frame che descrive il 1° dipartimento mettiamo una sua fotografia. Creiamo due celle nel frame: una con limmagine e laltra con la descrizione. Creiamo una pagina nuova Creiamo una pagina nuova Procedura: file – nuovo – pagina vuota Procedura: file – nuovo – pagina vuota In questo frame scriviamo al centro: 1° Dipartimento: bilancio e risorse. In questo frame scriviamo al centro: 1° Dipartimento: bilancio e risorse. Inseriamo una tabella di una riga e due colonne. Inseriamo una tabella di una riga e due colonne. Procedura: menù tabella – inserisci – tabella - ok Procedura: menù tabella – inserisci – tabella - ok Possiamo anche formattare le singole celle o lintera tabella. Procedura: selezionare la cella o lintera tabella. –Menù Tabella – Proprietà – Cella ( o tabella) –ok Clicchiamo dentro la 1 cella e inseriamo unimmagine da selezionare dallarchivio

21 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 (dispezione) attiviamo proprietà e ne definiamo gli attributi. Le immagini, a differenza del testo, vanno create separatamente e inserite in una cella o frame.

22 3° lezione: le tabelle e le immagini Oltre alle immagini, possiamo inserire anche video e suono. Anchessi 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. Oltre alle immagini, possiamo inserire anche video e suono. Anchessi 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à dellimmagine creata. 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à dellimmagine creata. Adesso vediamo come possiamo modificare immagini esistenti o crearne di nuove usando Paint. Adesso vediamo come possiamo modificare immagini esistenti o crearne di nuove usando Paint. Senza chiudere Frontpage attiviamo Paint. Senza chiudere Frontpage attiviamo Paint. Procedura: Start –Programmi –Accessori –Paint Procedura: Start –Programmi –Accessori –Paint Procedura: File – Apri – Cerca in – D – nostro-nome (cartella del nostro Web) – images – arcnavhh - apri 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

23 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. 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 dellEnte e vogliamo che attivando il collegamento venga visualizzato il capitolo che parli dellassessorato che stiamo descrivendo. Costruiamo una pagina che contenga lo statuto dellEnte e vogliamo che attivando il collegamento venga visualizzato il capitolo che parli dellassessorato che stiamo descrivendo.

24 4° lezione: segnalibro, mail, URL Attivare un segnalibro 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 dellassessorato …. 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 dellassessorato …. Procedura: selezione testo, menù inserisci, segnalibro, ok Procedura: selezione testo, menù inserisci, segnalibro, ok Salviamo la pagina, statuto.htm Salviamo la pagina, statuto.htm Ritorniamo alla pagina Dipartimento1_home.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) 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 Provate in anteprima il risultato

25 4° lezione: segnalibro, mail, URL Finora abbiamo visto come si attiva un collegamento ad un documento. 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. 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 unimmagine (clip_mail.gif) e scriviamo a fianco scrivi al webmaster. Procedura: Selezionare: clip+scritta, attivare collegamento, cliccare sullicona - digitare lindirizzo di mail ( per esempio: - Ok –Ok Creiamo o recuperiamo unimmagine (clip_mail.gif) e scriviamo a fianco scrivi al webmaster. Procedura: Selezionare: clip+scritta, attivare collegamento, cliccare sullicona - digitare lindirizzo di mail ( per esempio: - Ok Salvare le modifiche fatte. Salvare le modifiche fatte.

26 4° lezione: segnalibro, mail, URL Link a URL (sito) Link a URL (sito) Adesso proviamo a creare un collegamento ad un sito web Adesso proviamo a creare un collegamento ad un sito web Aggiungiamo alla nostra home page un link alla Presidenza dellEnte Aggiungiamo alla nostra home page un link alla Presidenza dellEnte Procedura: selezionare loggetto da collegare: Presidenza dellEnte – attivare collegamento - digitare sulla riga indirizzo il sito che si vuole collegare: (per esempio: Se non compare la riga dellindirizzo selezionare: file di pagina.. Procedura: selezionare loggetto da collegare: Presidenza dellEnte – attivare collegamento - digitare sulla riga indirizzo il sito che si vuole collegare: (per esempio: Se non compare la riga dellindirizzo selezionare: file di pagina.. tornare a Frontpage per provare la modifica in anteprima tornare a Frontpage per provare la modifica in anteprima

27 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. 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. 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 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 lindirizzo del Provider (fornito dallamministratore), assegnare lo user name e password, cliccare su pubblica Procedura: (salviamo tutti i files aperti che abbiamo modificato. Appare un asterisco a fianco al nome del file) File, Pubblica web, digitare lindirizzo del Provider (fornito dallamministratore), assegnare lo user name e password, cliccare su pubblica

28 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. 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 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, allhome page del sito (index.htm).

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

30 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. 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.. Con il cursore dentro il modulo.. Procedura: Inserisci – modulo – proprietà modulo –Invia a – Indirizzo di posta elettronica: –ok Procedura: Inserisci – modulo – proprietà modulo –Invia a – Indirizzo di posta elettronica: –ok Se vogliamo rendere più accattivante la risposta usiamo il file grazie.htm di risposta automatica allinvio del modulo. Se vogliamo rendere più accattivante la risposta usiamo il file grazie.htm di risposta automatica allinvio del modulo. Attiviamo il bottone Opzioni Attiviamo il bottone Opzioni Procedura: opzioni –pagina di conferma, grazie.htm – ok Procedura: opzioni –pagina di conferma, grazie.htm – ok

31 5° lezione: i moduli Allapparire di questa finestra rispondiamo con un click su No Allapparire di questa finestra rispondiamo con un click su No Salviamo la pagina che chiameremo modulo.htm Salviamo la pagina che chiameremo modulo.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

32 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. 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. 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 lhtml ed essere integrabili in esso. Per scrivere pagine web complesse usiamo non solo html, ma anche molti altri linguaggi di programmazione. Essi devono essere comunque compatibili con lhtml ed essere integrabili in esso. Uno dei linguaggi più utilizzati è Javascript Uno dei linguaggi più utilizzati è Javascript

33 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 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. Dopo aver scritto il testo,visualizziamo la pagina in html ed aggiungiamo una semplice procedura in javascript per chiudere la finestra. Salviamo la pagina. 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 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. Dopo aver scritto il testo,visualizziamo la pagina in html ed aggiungiamo una semplice procedura in javascript per chiudere la finestra. Salviamo la pagina. Chiudi la finestra

34 5° lezione: i linguaggi html e javascript Richiamiamo il file modulo.htm ed inseriamo il bottone 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. 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. Allinizio 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 Allinizio 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 function apri2(){ nuova=open ("privacy.htm","", "width=350,height=300") } privacy


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

Presentazioni simili


Annunci Google