Progetto P.O.N.

Transcript

1 Progetto P.O.N. Corso di base HTML e Front Page Tutte le lezioni Dott.ssa Francesca Stracquadaini Mail to: cixperry@hotmail.com Dott.ssa Francesca Stracquadaini

2 Compatibilità Browser Il problema della compatibilità tra i 2 principali browser (Microsoft Internet Explorer e Netscape Navigator) presenti in mercato non può essere sottovalutato da un buon webmaster e da un altrettanto buono editor HTML. Per accedere a questa utilissima funzione selezioniamo Opzioni pagina dal menu Strumenti, scegliamo quindi la scheda Compatibilità. Passiamo ora ad analizzare le varie voci del seguente pannello: Browser: possiamo selezionare in questa finestra i browser a cui vogliamo rendere completamente "leggibile" la pagina che stiamo costruendo. Una volta effettuata la scelta FP penserà a disattivare i comandi per l'inserimento dei componenti non compatibili con il browser scelto. Se ad esempio scegliamo "Sia Microsoft Internet Explorer che Netscape Navigator" allora FP disattiverà la possibilità di inserire del testo scorrevole all'interno delle nostre pagine. Da questo momento quindi, non dovremo più preoccuparci di cosa stiamo inserendo poiché sarà il software ad escludere, a priori, quelle funzionalità che potrebbero creare problemi di incompatibilità. Selezioniamo personalizzato per impostare manualmente le tecnologie che useremo nel sito. Versioni browser: possiamo impostare in questa casella le versioni dei browser (specificati nella casella precedente) che saranno in grado di leggere correttamente le nostre pagine. Ovviamente selezionando le quasi obsolete versioni 3.0 vedremo scomparire dai menu molte funzioni. Ancora una volta, tuttavia, Dott.ssa Francesca Stracquadaini mail to: cixperry@hotmail.com 2

3 dobbiamo effettuare la scelta concentrandoci sull'utente finale che visiterà il nostro sito web. Ancora una volta selezioniamo personalizzato per impostare manualmente le tecnologie che useremo nel sito. Server: questa casella permette di dichiarare il tipo di server che ospiterà il nostro sito. Scegliamo quindi la prima opzione se il nostro sito sarà ospitato da un server in ambiente Microsoft Internet Information Server 3.0 o la seconda se useremo server Apache. Se abbiamo intenzione di pubblicare il nostro sito su un classico server che offre spazio web gratuito e che non corrisponde alle due opzioni precedenti dovremo probabilmente scegliere la terza opzione: Personalizzato ed impostare manualmente le varie tecnologie incorporate nel sito. Attiva con le estensioni del server di Microsoft Front Page: questa casella è di fondamentale importanza (come vedremo in seguito) per l'inserimento nel sito di tecnologie avanzate che costituiscono un po' il fiore all'occhiello di FP. Dobbiamo semplicemente informarci se il nostro spazio web supporta le estensioni di Front Page (chiedendo all'amministratore) e attivare o disattivare questa casella di conseguenza. Tecnologie: in questa area del pannello sono riassunte tutte le principali tecnologie usate nella costruzioni di siti web. Modificando le 4 voci viste in precedenza (Browser; Versioni Browser...) abbiamo visto come queste opzioni venivano attivate o disattivate automaticamente. Possiamo quindi avere già un idea di quali tecnologie sono supportate dai vari Browser e dalle rispettive versioni. Ad esempio se scegliamo di impostare Solo Internet Explorer 4.0 come browser predefinito vedremo rendersi accessibili tutta una serie di tecnologie (come ad esempio gli script Visual Basic: VBScritp). Se poi scegliamo di sostituire Microsoft Internet Explorer 4.0 con Netscape Navigator 4.0 vedremo disattivarsi (e quindi diventare inaccessibili) varie tecnologie (come ad esempio il VBScript). In conclusione noi possiamo forzare manualmente l'accesso alle seguenti tecnologie. Dovremo comunque considerare il fatto che alcuni browser non riusciranno a visualizzare (o interagire con) il nostro sito. Controlli Active X: i controlli Active X consentono di inserire nel proprio sito web le funzionalità di vari programmi che già conosciamo in ambiente Windows (supportato solo da Microsoft Internet Explorer). VBScript: questa opzione permette l'inserimento di script nel linguaggio Visual Basic (supportato solo da Microsoft Internet Explorer). JavaScript: selezioniamo questa casella per abilitare la scrittura dei JavaScript (linguaggio supportato sia da Internet Explorer che da Netscape Navigator). Applet Java: questa casella abilita l'inserimento automatico delle applet java che gestiscono alcune funzioni come ad esempio lo striscione pubblicitario o i pulsanti attivi al passaggio del mouse. Come vedremo in seguito FP si occupa completamente dell'installazione e della configurazione delle applet java e ce ne fornisce il controllo tramite intuitive finestre di controllo. HTML dinamico: esistono una serie di istruzioni di HTML dinamico che permettono di gestire facilmente tutta una gamma di animazioni di oggetti all'interno delle pagine HTML. FP possiede un'intera barra di comandi dedicata all'inserimento di istruzioni di HTML dinamico. Questa opzione la abilita o la disabilita. Frame: i frame permettono di organizzare la struttura di un sito web tramite pagine aperte in finestre indipendente una dall'altra. Ancora una volta FP permette di usare questa tecnologia servendosi di semplici clic ma se non si attiva questa casella tutti i relativi comandi disponibili nel programma verranno disabilitati. CSS 1.0: i fogli di stile (Cascade Style Sheet) offrono interessanti possibilità di formattazione che espandono quelle dell'html classico. Questa casella abilita la versione 1.0 di questa tecnologia che in particolare si occupa della formattazione. CSS 2.0: la seconda versione dei fogli di stile permette di gestire il posizionamento (assoluto e relativo) degli oggetti all'interno delle pagine HTML. Dott.ssa Francesca Stracquadaini mail to: cixperry@hotmail.com 3

4 Pagine ASP: infine questa casella abilita in FP la possibilità di creare pagine ASP (Active Server Pages). Come vedremo in seguito queste pagine sono fondamentali nella procedura di interrogazione dei database. Nota: se le impostazioni verranno modificate successivamente alla costruzione della pagina FP non eliminerà le tecnologie "inaccessibili" dalla pagina. Esempio: Se impostiamo la compatibilità solo per Internet Explorer 4.0 si renderanno attive alcune tecnologie come ad esempio il VBScript. Questo ci permetterà di creare una pagina contenente VBScript.Se successivamente decideremo di impostare la compatibilità di quella pagina anche per Ntescape Navigator (che non supporta i VBScript) FP non eliminerà i VBScript dalla pagina ma si limiterà a non aggiungerne altri. In sintesi è importante decidere ed impostare la compatibilità delle pagine prima di iniziare a lavorare al nostro sito web. Successivamente sarà bene non modificare più (almeno riguardo a quel sito web) le opzioni di compatibilità e creare tutte le pagine basandosi sulle impostazioni scelte in partenza. Dott.ssa Francesca Stracquadaini mail to: cixperry@hotmail.com 4

5 Meta Tag Ogni buon webmaster conosce l'importanza, ed il significato, dei Meta Tag. Possiamo utilizzare questi Tag nascosti per inserire delle informazioni aggiuntive nelle pagine HTML. Queste informazioni non saranno visibili al visitatore che si collega al sito, tuttavia rimarranno accessibili per gli "addetti ai lavori". Alcuni dei principali "addetti ai lavori" che leggono questo tipo di informazioni sono i robot dei vari motori di ricerca. Questi programma navigano in continuazione alla ricerca di nuovi siti (e pagine HTML) da inserire negli archivi del motore di ricerca. Tuttavia, siccome tutto avviene automaticamente, come potrebbero questi programma ottenere, ad esempio, una descrizione della pagina che vogliono inserire in archivio? E proprio a questo punto entrano in gioco i Meta Tag. Infatti i robot vanno a leggere in questa area della pagina internet dove trovano informazioni inerenti le parole chiave, la descrizione, l'autore e così via. Pubblicare una pagina con dei Meta Tag ben impostati è importantissimo per la futura popolarità della stessa. Con FP possiamo facilmente inserire informazioni nascoste seguendo questa procedura. Apriamo la pagina HTML nella quale vogliamo inserire i Meta Tag scegliamo Proprietà dal menu File scegliamo quindi la scheda Personalizza La finestra è divisa in due riquadri; in quello superiore andranno inserite le variabili HTTP-EQUIV (come ad esempio le parole chiave) mentre in quella sottostante dovremo inserire le variabili utente. (come ad esempio il nome dell'autore) per aggiungere delle informazioni scegliamo il pulsante Aggiungi (relativo al riquadro più adatto per l'informazione che stiamo inserendo) Dott.ssa Francesca Stracquadaini mail to: cixperry@hotmail.com 5

6 a questo punto digitiamo nella casella superiore l'identificativo dell'informazione che stiamo inserendo (ad esempio keywords) nella casella sottostante inseriamo, invece, le informazioni della pagina (ad esempio le varie parole chiave separate da una virgola ed uno spazio) Per maggiori informazioni sui Meta Tag fare riferimento alla guida apposita presente nel sito. Dott.ssa Francesca Stracquadaini mail to: 6

7 Creare un sito Web Apriamo FP e selezioniamo il menu File scegliamo Nuovo e quindi Web nella finestra che compare possiamo scegliere tra alcuni modelli di siti web già pronti scegliamo la prima icona Web a pagina singola nella finestra a destra dobbiamo digitare il nome della cartella che conterrà il nostro sito (si consiglia di posizionare questa cartella all'interno di Documenti/Web) premiamo Ok per confermare A questo punto possiamo cimentarci nello studio delle varie funzioni del programma. Dott.ssa Francesca Stracquadaini mail to: cixperry@hotmail.com 7

8 Barra degli strumenti Il primo pulsante consente di creare una nuova pagina HTML. Inoltre è provvisto di un piccolo menu a comparsa che permette di creare, rispettivamente, una Pagina (HTML o eventualmente ASP), un Web, una Cartella o un'attività. Il secondo permette di Aprire una pagina HTML o, servendosi dell'apposito menu a comparsa, un intero sito web. L'impostazione predefinita di questo pulsante è relativa all'ultima operazione che si è effettuata. Il pulsante contrassegnato da un dischetto permette di Salvare il proprio lavoro. Il quarto è il pulsante Pubblica e permette di trasferire automaticamente su Internet il web correntemente aperto. Premendo il pulsante appare la seguente finestra di dialogo. Dott.ssa Francesca Stracquadaini mail to: cixperry@hotmail.com 8

9 Nella prima casella dobbiamo digitare il dominio del nostro sito Internet Se non possediamo un sito web che supporta le estensioni di FP non possiamo usare la pubblicazione automatica del nostro sito web. In questo caso premiamo il pulsante WPP per accedere direttamente ad una pagina del sito ufficiale Microsoft dove sono elencati i principali provider italiani che offrono spazio Internet che supporta le Estensioni di Front Page. Per visualizzare le altre opzioni premiamo la linguetta Pubblicazione. Selezioniamo Pubblica solo le pagine modificate se desideriamo inviare su Internet solo le pagine che abbiamo modificato dall'ultimo aggiornamento (FP è in grado di stabilire automaticamente quali sono le pagine modificate) Selezioniamo Pubblica tutte le pagine, sovrascrivendo quelle già presenti nella destinazione se vogliamo trasferire su Internet tutte le pagine del nostro sito web, indipendentemente da quelle che che sono rimaste immutate dall'ultima pubblicazione. Includi web secondari indica che FP deve trasferire su Internet anche eventuali sotto-siti annidati in quello principale. Dott.ssa Francesca Stracquadaini mail to: cixperry@hotmail.com 9

10 Se il nostro provider offre una connessione protetta (SSL) selezioniamo la relativa casella di controllo per godere dei vantaggi da essa derivanti. Una volta terminata la configurazione della finestra premeremo finalmente il pulsante Pubblica per pubblicare il sito Tornando alla barra degli strumenti standard incontriamo un nuovo pulsante (il quinto in figura) che permette di far apparire sullo schermo l'elenco delle cartelle del nostro siti web. Questa è un'importante introduzione dell'ultima versione del programma e permette facilmente di tenere sotto controllo tutti i file del proprio sito. In ogni momento possiamo "trascinare" un file dalla finestra Elenco Cartelle alla pagina che stiamo costruendo. Automaticamente FP creerà un collegamento dinamico nella pagina attualmente aperta. Usando lo stesso sistema possiamo facilmente "trascinare" le immagini già presenti nella cartella images. I successivi tre pulsanti permettono rispettivamente di Stampare, visualizzare un anteprima nel browser predefinito o effettuare un controllo ortografico della pagina correntemente aperta. Questo pulsante permette di visualizzare nel proprio browser predefinito un anteprima della pagina che si sta modificando. I tre pulsanti successivi permettono rispettivamente di tagliare, copiare, incollare un qualsiasi oggetto (immagine, testo, tabella etc...) Il pulsante Copia Formato può rivelarsi particolarmente utile per uniformare la formattazione del testo all'interno del sito web. Ad esempio una volta scelto il carattere, la dimensione, il colore e le altre impostazioni di un paragrafo possiamo premere sul pulsante Copia Formato per memorizzare tutti i parametri e quindi cliccare sul testo vergine per applicare la stessa formattazione di quello precedente. I due pulsanti successivi permettono rispettivamente di annullare l'ultima operazione effettuata o di ripristinare l'ultima operazione annullata. I menu a comparsa visualizzano rispettivamente tutte le operazioni effettuate e tutte quelle annullate. Quindi è possibile, ad esempio, annullare le ultime cinque operazioni effettuate semplicemente cliccando sulla quintultima. Cliccando sul pulsante Inserisci Tabella si apre una tabella virtuale. Tenendo premuto e spostando il mouse in basso o a destra possiamo definire rispettivamente il numero di righe o di colonne che la nostra tabella dovrà avere. Una volta posizionato il mouse nella posizione (righe/colonne) desiderata facciamo clic e la tabella comparirà nella pagina HTML aperta. Il pulsante Inserisci immagine da file apre un'apposita finestra che di default mostra i file contenuti nella cartella images. Possiamo selezionare i vari file e se sono immagini viene visualizzata l'anteprima nel riquadro a destra. Possiamo usare questa finestra per esplorare le immagini presenti nel nostro sito web tuttavia se vogliamo inserire un'immagine già presente su Internet (ad esempio il logo di un sito web che collabora con il nostro) possiamo digitare l'indirizzo assoluto (ovvero iniziando a digitare da In questo caso l'immagine non verrà copiata nel nostro web ma la pagina andrà a cercare l'immagine all'indirizzo che noi abbiamo indicato. Ovviamente l'immagine non verrà visualizzata più nel momento in cui sarà rimossa o rinominata dall'altro sito web. Dott.ssa Francesca Stracquadaini mail to: cixperry@hotmail.com 10

11 Infine possiamo inserire un immagine presente nel nostro hard disk. Premiamo il pulsante che rappresenta una cartella con una piccola lente di ingrandimento. Si è ora aperta una finestra di dialogo che permette di cercare liberamente l'immagine nel nostro hard disk. Una volta selezionata l'immagine confermiamo le varie finestre e torniamo all'area di lavoro. A questo punto FP penserà automaticamente a convertire l'immagine nel formato jpg, applicando una compressione del 75% e salvare quindi il file nella cartella images del nostro web. Il pulsante che raffigura il pianeta terra con una piccola catena consente di creare collegamenti ipertestuali. Un collegamento ipertestuale permette di impostare una sezione di testo o un'immagine in modo che quando l'utente farà clic su di essi verrà caricata una nuova pagina. Il collegamento ipertestuale è, quindi, alla base della navigazione su internet. (Vedi: I collegamenti ipertestuali) Tornando alla barra degli strumenti Standard analizziamo il pulsante successivo: Aggiorna. Questo comando permette di aggiornare le informazioni visualizzate da FP per visualizzare le ultime modifiche applicate che, per vari motivi, potrebbero non essere state ancora rilevate. Il pulsante Interrompi invece consente di interrompere l'operazione che FP sta effettuando in quel momento. Questo comando si rivela particolarmente utile quando si lavora su web remoti (ovvero residenti direttamente sul server Internet) poiché la velocità di elaborazione rallenta progressivamente alla velocità della connessione telefonica. Il pulsante Mostra tutto consente di visualizzare o meno tutta una serie di simboli che spiegano la formattazione delle pagina HTML. Attivando la funzione Mostra tutto ad esempio verrà visualizzato un carattere speciale ogni volta che si preme Invio (quindi a conclusione di ogni paragrafo). L'ultimo pulsante, quello contrassegnato da un punto interrogativo, permette di accedere alla Guida in linea Microsoft Front Page. All'estrema destra della barra degli strumenti è presente la classica piccola freccia verso il basso che denota la presenza di un menu a comparsa. Tale menu permette di selezionare facilmente quali pulsanti vogliamo che vengano visualizzati sulla barra. Dott.ssa Francesca Stracquadaini mail to: cixperry@hotmail.com 11

12 Sfondo e colori Utilizzando FP impostare lo sfondo di una pagina HTML è facilissimo. Apriamo la pagina HTML e quindi scegliamo dal tasto destro del mouse Proprietà Pagina e Formattazione nella finestra che è comparsa possiamo definire molte caratteristiche della pagina HTML corrente Applicare un immagine di sfondo Se ad esempio vogliamo impostare un'immagine per lo sfondo della pagina HTML selezioniamo Immagine di sfondo a questo punto possiamo premere il pulsante Sfoglia per ricercare l'immagine una volta trovata l'immagine premiamo Ok ed avremo impostato lo sfondo della pagina La casella Filigrana permette di bloccare l'immagine di sfondo. Questo significa che l'immagine di sfondo rimarrà ferma anche durante lo scorrimento della pagina. Ci sarà quindi uno "sdoppiamento" tra gli elementi della pagine HTML e lo sfondo. I colori Nell'area colori possiamo definire il colore dello sfondo della pagina, del testo e dei collegamenti ipertestuali. Come possiamo notare i collegamenti ipertestuali sono divisi in tre categorie. La prima, Collegamento, indica un collegamento normale che non è mai stato visitato. Dott.ssa Francesca Stracquadaini mail to: cixperry@hotmail.com 12

13 La seconda, Collegamento visitato, denota un collegamento che punta ad una pagina già visitata dal visitatore. (Il browser memorizza le pagine visualizzate dal visitatore e quindi è in grado di stabilire se un collegamento è già stato visitato). La terza, Collegamento attivo, indica un collegamento che è appena stato cliccato e che, per qualche ragione, è ancora visibile sullo schermo. (Può accadere in situazioni in cui lo schermo è diviso in Frame o in casi di connessioni ad internet lente). Dott.ssa Francesca Stracquadaini mail to: cixperry@hotmail.com 13

14 I collegamenti ipertestuali Come già accennato un collegamento ipertestuale è alla base della navigazione in Internet: la sua importanza è tale che il termine Hypertext presta l'iniziale alla sigla HTML. Fondamentalmente esistono due tipi di collegamenti ipertestuali: quelli assoluti e quelli relativi. Un collegamento assoluto permette di raggiungere la pagina puntata indipendentemente dalla posizione della pagina di origine. Al contrario il collegamento relativo permette di raggiungere la pagina di destinazione in base alla posizione della pagina di origine. Il collegamento assoluto Possiamo voler inserite un collegamento assoluto ad esempio per creare, nella nostra pagina, un "ponte" verso un altro sito. In questo caso: digitiamo la parola, la porzione di testo o inseriamo l'immagine che vogliamo rendere un collegamento ipertestuale selezioniamola e poi scegliamo Collegamento ipertestuale (o dal tasto destro del mouse) dal menu Inserisci si apre ora una finestra che ci permetterà di definire tutte le proprietà del collegamento digitiamo l'indirizzo del sito che vogliamo "collegare" nella casella in basso (non dimentichiamo di aggiungere all'inizio) premiamo Ok Abbiamo appena creato un Collegamento Ipertestuale assoluto. Per verificarne il corretto funzionamento visualizziamo l'anteprima pulsante nella barra degli strumenti Standard della pagina cliccando sull'apposito Dott.ssa Francesca Stracquadaini mail to: cixperry@hotmail.com 14

15 Il collegamento relativo Immaginiamo per un attimo quanto sarebbe complicato gestire un sito Internet servendoci esclusivamente di collegamenti assoluti. Ogni singolo collegamento ad una sottopagina dovrebbe incorporare l'intero dominio e sottocartelle relative a quella pagina. Il sistema funzionerebbe ma cosa succederebbe qualora cambiasse il dominio del sito (e soprattutto come potremmo verificare il funzionamento dei collegamenti in fase di preparazione del sito, quando questo si trovasse ancora nel nostro hard disk?) Fortunatamente l'html prevede un secondo tipo di collegamento che non indicizza una pagina partendo dalla radice ma la individua in base alla posizione della pagina di partenza. Questo garantisce, quindi, il perfetto funzionamento del collegamento purché rimanga invariata la relazione tra la pagina di partenza e quella di destinazione. Se ad esempio la pagina di partenza (partenza.htm) di trovasse nella cartella principale del sito mentre quella di di destinazione (destinazione.htm) si trovasse nella cartella alfa allora il collegamento annoterebbe che per "saltare" da partenza.htm a destinazione.htm deve: entrare nella cartella alfa e quindi selezionare destinzione.htm. In HTML Il collegamento sarebbe scritto in questo modo "alfa/destinazione.htm". In questo modo al collegamento non interesserebbe se il sito si trovasse in un dischetto, in una remota cartella del nostro hard disk o su Internet. FP ci aiuta a creare collegamenti di tipo relativo tramite la comoda finestra Crea collegamento. Selezionando una porzione di testo e quindi scegliendo Collegamento ipertestuale dal menu Inserisci a questo punto la finestra ci mostra una cartella del nostro sito web possiamo spostarci all'interno del nostro web a piacimento e selezionare la pagina a cui vogliamo far puntare il collegamento. automaticamente FP scriverà il collegamento relativo nella casella in basso confermiamo con Ok Abbiamo appena creato un collegamento relativo. Carichiamo l'anteprima della pagina per verificarne il funzionamento. Gestione automatica dei collegamenti relativi Come abbiamo verificato l'utilità dei collegamenti relativi è alta. Ma cosa succede se decidiamo di rinominare o spostare il file a cui punta un collegamento relativo? La soluzione più ovvia sembra quella di modificare di conseguenza il collegamento relativo in modo da ripristinarne il funzionamento. Ma soluzione è ancora accettabile per un sito web di grandi dimensioni (ad esempio 100 pagine)? Sarebbe un lavoro titanico pensare di ricontrollare, ed eventualmente correggere, i collegamenti presenti nelle altre 99 pagine. Fortunatamente FP risolve ottimamente questo problema correggendo automaticamente tutti i collegamenti del web qualora noi decidessimo di spostare o rinominare un qualsiasi file o cartella. Dott.ssa Francesca Stracquadaini mail to: cixperry@hotmail.com 15

16 Non dobbiamo quindi preoccuparci del mantenimento dei collegamenti poiché FP adatterà continuamente il web per renderlo coerente con le nostre modifiche. Nel momento in cui rinomineremo un file che è la destinazione di un collegamento FP ci mostrerà una finestra di dialogo. Scegliamo Si per confermare la modifica dei collegamenti ed al resto penserà il programma. Indirizzi E' possibile sfruttare la finestra Crea collegamento anche per creare dei collegamenti ad indirizzi di posta elettronica. In questo modo qualora l'utente cliccasse sul collegamento vedrebbe automaticamente aprirsi il proprio programma predefinito di posta elettronica già pronto per inviare un all'indirizzo specificato nel collegamento. Creiamo un collegamento ad un indirizzo di posta elettronica in questo modo: digitiamo la frase, ad esempio, "clicca qui per inviarmi un " evidenziamola con il mouse e poi scegliamo Collegamento ipertestuale dal menu Inserisci. alla solita finestra premiamo sul pulsante Indirizzo di posta elettronica (posizionato sulla sinistra della finestra) si apre un ulteriore finestra nella quale dobbiamo digitare l'indirizzo del destinatario confermiamo entrambe le finestre con Ok Abbiamo appena creato un collegamento ad un indirizzo di posta elettronica. Carichiamo l'anteprima della pagina per verificarne il corretto funzionamento. I segnalibri A volte le pagina HTML assumono lunghezze molto elevate. Basti pensare alle singole pagine che ospitano una relazione, un racconto, un articolo e così via. Può capitare che si vuole creare un collegamento che da una pagina alfa punti ad un determinato paragrafo della pagina beta. E' possibile far in modo che il collegamento carichi la pagina beta e la faccia scorrere finché non ha raggiunto il paragrafo prestabilito? Dott.ssa Francesca Stracquadaini mail to: cixperry@hotmail.com 16

17 Ovviamente si: tramite i segnalibri. Prima di tutto è necessario creare un segnalibro nella pagina beta di destinazione (successivamente imposteremo i collegamento dalla pagina alfa in modo adeguato). evidenziamo una porzione di testo ad esempio posizionata alla fine di una lunga pagina (basta una parola o una lettera); questo testo diventerà il segnalibro scegliamo Segnalibro dal menu Inserisci nella prima casella della finestra che si apre digitiamo il nome che vogliamo assegnare al segnalibro confermiamo con Ok Noteremo ora che la porzione di testo selezionata è stata sottolineata da una linea tratteggiata. Questo è il linguaggio di FP per informarci che quella porzione di testo è un segnalibro chiudiamo la pagina Beta contenente i segnalibro ed apriamo la pagina Alfa dalla quale partirà il collegamento creiamo un semplice collegamento alla pagina Beta prima di chiudere la finestra Crea collegamento digitiamo in basso a sinistra (nella casella segnalibro) il nome che avevamo assegnato al segnalibro premiamo Ok per confermare Verifichiamo ora il corretto funzionamento del collegamento al segnalibro caricando la pagina tramite l'anteprima. Nota: è possibile inserire un collegamento ad un segnalibro presente nella stessa pagina. La procedura è analoga. Frame di destinazione Premendo il pulsante Cambia frame di destinazione appare la seguente finestra che ci permette di scegliere in quale frame (se stiamo usando questa tecnica) dovrà essere caricata la pagina puntata dal collegamento. Dott.ssa Francesca Stracquadaini mail to: cixperry@hotmail.com 17

18 Possiamo scegliere dal menu in alto oppure digitare il nome del frame di destinazione nella casella in basso. Dott.ssa Francesca Stracquadaini mail to: 18

19 Effetti DHTML Come accennato nell'introduzione l'html Dinamico (DHTML) permette di creare una serie di animazioni e di effetti grafici all'interno di una normale pagina HTML. Purtroppo il vero problema del DHTML è la grave incompatibilità tra i due maggiori browser attualmente in commercio: Microsoft Internet Explorer e Netscape Navigator. FP offre un intera barra degli strumenti che permette di inserire istruzioni DHTML compatibili con entrambi i browser. Iniziamo con l'attivare la barra selezionando aprendo il menu Visualizza selezionando Barre degli strumenti e poi Effetti DHTML.(oppure ciccando con il tasto destro sulla barra degli strumenti in alto) Passiamo ora ad analizzare il funzionamento della barra. Prima di iniziare selezioniamo l'oggetto al quale vogliamo applicare un effetto DHTML. A questo punto selezioniamo una voce dal menu riprodotto in figura. Clic: permette di attivare l'effetto quando il visitatore del sito farà clic sull'oggetto Doppio clic: analogo al precedente ma l'effetto verrà riprodotto in risposta ad un doppio clic del visitatore Passaggio del mouse: in questo caso l'effetto verrà riprodotto quando il visitatore posizionerà il mouse sull'oggetto Caricamento pagina: selezionando questa voce l'effetto verrà riprodotto immediatamente al caricamento della pagina Una volta deciso il momento in cui dovrà essere riprodotto l'effetto si attiverà il menu Applica. Possiamo usarlo per scegliere il tipo di effetto da applicare (le voci di questo menu variano in funzione della scelta effettuata nel menu precedente). Il terzo menu ci permette di definire le opzioni dell'effetto che abbiamo scelto (ad esempio se abbiamo scelto l'effetto A entrata in questa area possiamo definire da quale lato dello schermo deve entrare l'oggetto). Con la scelta effettuata in questo menu si conclude la definizione dell'animazione DHTML che abbiamo scelto. A questo punto FP scriverà automaticamente il codice all'interno della pagina HTML. Una volta impostato l'effetto possiamo eliminarlo semplicemente selezionando l'oggetto e premendo il pulsante Rimuovi effetto. La funzione dell'ultimo pulsante della barra è molto utile. Premendolo, infatti, verranno colorate di celeste tutte le aree della pagina HTML che contengono effetti DHTML. Dott.ssa Francesca Stracquadaini mail to: cixperry@hotmail.com 19

20 I posizionamenti relativo e assoluto Come sappiamo l'html offre un serie di strumenti per la formattazione delle pagine. Tuttavia a meno che non si faccia uso di Tabelle statiche (ovvero le cui misure sono completamente espresse in pixel), la posizione degli oggetti può variare in base a vari fattori Il Posizionamento assoluto rompe questa barriera semplificando (in un certo senso) all'estremo il concetto. Tramite il Posizionamento assoluto, infatti, è possibile esprimente la posizione di ogni oggetto in base a due sole coordinate: asse X ed asse Y, ovvero distanza dal bordo sinistro e distanza dal bordo superiore. Ovviamente gli aspetti negativi apportati da questa tecnica estremamente semplificatrice forse appaiono evidenti. Innanzitutto, a meno che non si lavori in una finestra Java di dimensioni predefinite, difficilmente si potrà prevedere come verrà visualizzata una pagina complessa (non possiamo infatti prevedere la risoluzione video utilizzata). Inoltre rimane il fatto che, usando questa tecnica, possiamo erroneamente sovrapporre due oggetti Come specificare, quindi, quale dei due dovrà essere posizionato sopra e quale sotto? Il posizionamento assoluto risolve questo problema introducendo una nuova coordinata nelle pagine HTML: l'asse Z. Agendo su questo parametro è possibile scegliere a quale livello si trova l'oggetto su cui stiamo lavorando. Questo farà si che, in caso di sovrapposizioni, potremo far emergere in primo piano gli oggetti da noi scelti. In FP è stata introdotta una barra che ci permette facilmente di controllare il posizionamento assoluto degli oggetti (immagini, filmati, tabelle etc...) Possiamo attivarla aprendo il menu Visualizza, scegliendo Barre degli strumenti e quindi Posizionamento. Una volta comparsa la barra possiamo selezionare un oggetto e cliccare sul primo pulsante della barra per "abilitare" il resto delle funzioni di posizionamento assoluto. Questa funzione, infatti, scrive nel listato HTML che l'oggetto selezionato sarà posizionato in base a delle coordinate assolute. Nei due campi successivi possiamo specificare rispettivamente la distanza dell'oggetto dal bordo sinistro e da quello in alto. In questi campi possiamo impostare rispettivamente la larghezza e l'altezza dell'oggetto. (se non vogliamo alterare le misure lasciamo vuoti questi campi). Qualora più oggetti si trovassero nella stessa posizione verrà visualizzato per intero quello avente il valore Z maggiore. Questi pulsanti hanno rispettivamente la funzione di aumentare o diminuire il valore Z dell'oggetto selezionato. Dott.ssa Francesca Stracquadaini mail to: cixperry@hotmail.com 20

21 La gestione delle immagini FP archivia automaticamente (a meno che non venga specificato diversamente) tutte le immagini facenti parte del sito nell'apposita cartella images. Il consiglio è di non alterare questa "abitudine" del programma che nell'ambito di siti particolarmente complessi si rivelerà nettamente proficua. Abbiamo già imparato che esistono collegamenti assoluti e relativi, la stessa identica prassi si applica alle immagini. Inserire un'immagine già presente nel web (indirizzo relativo) Possiamo quindi inserire in una pagina un'immagine già archiviata in una cartella del nostro web nel seguente modo: Dott.ssa Francesca Stracquadaini mail to: cixperry@hotmail.com 21

22 Apriamo il menu Inserisci, scegliamo Immagine e quindi Da file a questo punto possiamo cercare la foto che ci interessa navigando tra le cartelle del nostro web una volta selezionata l'immagine confermiamo con Ok e verifichiamo che l'immagine sia stata inserita Inserire un'immagine non presente nel web ma presente nell'hard disk Non è necessario copiare manualmente un immagine in una delle cartelle del web per poterla inserire. FP può svolgere questo compito automaticamente. Ecco cosa fare, quindi, se vogliamo inserire in una pagina un'immagine che è presente in un qualunque cartella del nostro hard disk: Dott.ssa Francesca Stracquadaini mail to: cixperry@hotmail.com 22

23 posizioniamo il cursore nel punto in cui vogliamo inserire l'immagine apriamo quindi il menu Inserisci scegliamo Immagine e poi Da file premiamo il pulsante che raffigura una cartella con una lente di ingrandimento si apre un ulteriore finestra della quale dovremo servirci per ricercare l'immagine che stiamo cercando (non è necessario che sia in formato jpg o gif poiché FP la convertirà automaticamente) confermare con Ok e verificare che l'immagine è stata inserita A questo punto l'immagine è presente nella nostra pagina ma deve ancora essere salvata in una cartella del nostro web. FP ci chiederà se può procedere nel momento in cui noi andremo a salvare o chiudere la pagina a cui stiamo lavorando. Proviamo, ad esempio, e premere il pulsante Salva e FP ci chiederà se può salvare l'immagine, automaticamente convertita in jpg, nella cartella images. Confermiamo con Ok e l'operazione sarà completata. Nota: FP salverà l'immagine come jpg con il 75% della compressione. Possiamo tuttavia modificare le proprietà dell'immagine (prima che venga salvata) come descritto nel paragrafo successivo. Come modificare le proprietà di un'immagine Una volta inserita un'immagine nella nostra pagina HTML è bene (prima di salvare la pagina e l'immagine) impostarne le proprietà in modo da ottenere un risultato ottimale. Facciamo quindi clic destro sull'immagine (che come abbiamo detto è appena stata inserita nella nostra pagina HTML) e selezioniamo Proprietà per accedere all'omonima finestra. Dott.ssa Francesca Stracquadaini mail to: cixperry@hotmail.com 23

24 Come possiamo notare dall'immagine la finestra delle proprietà si articola in tre schede. In alto, nella prima scheda, nella casella Generale troviamo l'indirizzo relativo dell'immagine che abbiamo inserito. Se abbiamo inserito un immagine che non era presente nel web corrente (e quindi se abbiamo importato l'immagine da una posizione qualunque del nostro hard disk) probabilmente l'indirizzo visualizzato punta al di fuori del nostro web. Non dobbiamo preoccuparci perché appena salveremo la pagina FP copierà l'immagine nella cartella images del nostro web e modificherà di conseguenza l'indirizzo presente in questa casella. Possiamo servirci del pulsante Sfoglia per andare a selezionare un'altra immagine che vogliamo inserire al posto di quella corrente. Nell'area Tipo immediatamente sottostante possiamo scegliere come vogliamo salvare l'immagine. Sono presenti i due formati grafici universalmente riconosciuti dai browser (GIF e JPEG) più un terzo relativo al programma Macromedia Fireworks (PNG). Dott.ssa Francesca Stracquadaini mail to: cixperry@hotmail.com 24

25 E' importantissimo scegliere il formato in cui salvare l'immagine perché questo ne determinerà le dimensioni in byte (e quindi il tempo di caricamento della pagina) e la qualità grafica. Analizziamo le differenze tra i due principali formati immagine: Il formato GIF consente di salvare un numero limitato di colori (256) e solitamente garantisce un'ottima qualità se applicato a semplici disegni (che appunto non contengono più di 256 colori). Inoltre è ottimo per immagini di dimensioni non eccessivamente ridotte. I principale aspetto positivo di un'immagine GIF è la limitata dimensione in Kbyte. Questo, inoltre, è il formato adottato per le animazioni (tradizionali, non vettoriali) presenti su internet. Come vedremo questo formato è ottimo per salvare le Clip Art della Raccolta Clip Art di Office. Un'immagine GIF consente inoltre il colore trasparente (che vedremo in seguito come scegliere) e l'attivazione dell'opzione Interlacciato che consente un progressivo caricamento della definizione dell'immagine. Quando il futuro navigatore caricherà un'immagine GIF interlacciata la vedrà comparire quasi immediatamente sullo schermo ma con una qualità scadente. Nei secondi successivi la qualità dell'immagine migliorerà gradualmente fino a raggiungere l'aspetto predefinito. Il formato JPEG permette di salvare immagini con una definizione di colori molto più ampia rispetto alle GIF. Il prezzo da pagare è, ovviamente, la "pesantezza" in Kbyte dell'immagine. Sceglieremo questo formato, quindi, per salvare immagini la cui definizione è fondamentale come ad esempio fotografie o disegni ad alta definizione. Nella casella Qualità possiamo impostare la definizione dell'immagine. L'impostazione predefinita di FP è 75% (100% corrisponde ad una qualità perfetta e quindi ad una riduzione del "peso" in Kbyte nullo). Possiamo scegliere la percentuale migliore effettuando vari tentativi. Ora dovremmo essere in grado di giudicare quale formato sia maggiormente adatto alla nostra immagine ed effettuare la scelta migliore. Nell'area Rappresentazione Alternative troviamo due finestre. La prima, ovvero Bassa Risoluzione, ci permette, tramite il pulsante Sfoglia, di andare scegliere una seconda immagine. Alcuni browser visualizzeranno la questa immagine alternativa durante lo scaricamento dell'immagine principale. Questa operazione ha senso se effettuata per immagine particolarmente "pesanti" in termini di dimensione in byte. Ovviamente l'immagine alternativa dovrà essere il più "leggera" possibile. La casella Testo permette di digitare del testo (che in genere è un commento all'immagine che stiamo impostando). Il futuro navigatore visualizzerà questo testo quando posizionerà per alcuni secondi il mouse sull'immagine. L'area collegamento ipertestuale predefinito permette di trasformare l'immagine in un vero e proprio collegamento. Il collegamento si attiverà non appena il visitatore farà clic sull'immagine. Ci basta premere il pulsante Sfoglia per cercare il file a cui punterà l'immagine, in questo caso creeremo un collegamento relativo. Per creare un collegamento assoluto basta digitare l'url completo (sempre iniziando a digitare la nella finestra. La casella Frame di destinazione è analoga a quella spiegata nel capito I collegamenti ipertestuali paragrafo Frame di destinazione. La seconda scheda della finestra Proprietà immagine permette di inserire un file video. Possiamo digitare l'indirizzo assoluto manualmente oppure premere il pulsante Sfoglia per cercarne una già presente nel web o nella raccolta di Clip Art. Dott.ssa Francesca Stracquadaini mail to: cixperry@hotmail.com 25

26 Nell'area Ripeti possiamo impostare quante volte dovrà ripetersi i filmato (Cicli) ed in caso se e di quanti millisecondi in ritardo dovrà ricominciare. Possiamo invece selezionare Continuo se vogliamo che si ripeta all'infinito. Nell'area Inizia possiamo impostare rispettivamente che il video inizii al caricamento della pagina (Apertura del file) o al Passaggio del mouse. Dott.ssa Francesca Stracquadaini mail to: cixperry@hotmail.com 26

27 Nella terza scheda (Aspetto) possiamo definire altre opzioni interessanti. Tramite il menu Allineamento possiamo scegliere dove posizionare l'immagine. Noteremo questa opzione in particolare se l'immagine è inserita vicina ad un blocco di testo. Analogamente le opzioni Spaziatura orizzontale e Spaziatura verticale permettono di impostare dei bordi invisibili che distanziano l'immagine da eventuali altri oggetti posizionati rispettivamente in orizzontale ed in verticale. Nella casella Spessore bordo possiamo invece impostare lo spessore del bordo dell'immagine. Nell'area Dimensioni sono visualizzate le dimensioni dell'immagine a cui stiamo lavorando. Possiamo modificarle selezionando Specifica dimensioni e poi agire sui due controlli Larghezza ed Altezza scegliendo se esprimere i valori in pixel oppure in percentuale dove 100% corrisponde alle dimensioni attuali dell'immagine. Modificando questi campi (soprattutto se inseriamo i valori direttamente in pixel) potremmo rischiare di alterare le proporzioni (altezza e larghezza) dell'immagine. Possiamo evitare questo problema selezionando la casella Mantieni proporzioni che provvederà a mantenere la giusta proporzione dell'immagine. Dott.ssa Francesca Stracquadaini mail to: cixperry@hotmail.com 27

28 Miniature Creare all'istante una miniatura dell'immagine selezionata. Questa finestra ci consente di calibrare i parametri della miniatura. Tramite il primo menu possiamo scegliere di esprimere il valore delle dimensioni della miniatura facendo riferimento all'altezza, alla larghezza, al lato corto o al lato lungo. Successivamente possiamo definire il valore tramite la casella pixel. La casella Spessore bordo ci permette di decidere se la miniatura avrà un bordo ed in caso a quanti pixel dovrà corrispondere. Selezioniamo, infine, la casella Bordi in rilievo se vogliamo che i bordi vengano sfumati creando un effetto di sporgenza 3D come in figura. Dopo aver impostato le dimensione ciccare con il tasto destro del mouse su Anteprima automatica: Dott.ssa Francesca Stracquadaini mail to: cixperry@hotmail.com 28

29 Eccone il risultato: Dott.ssa Francesca Stracquadaini mail to: 29

30 Cosa sono i frame? La tecnica dei Frame permette, letteralmente, di suddividere la finestra principale del sito web in 2 o più sotto-finestre. Ognuna di queste finestre conterrà poi una pagina HTML che ovviamente potrà avere impostazioni del tutto differenti dalle altre. Inoltre, secondo le impostazioni predefinite, i collegamenti presenti nelle varie pagine caricheranno altre pagine HTML che andranno ad essere contenute nelle medesime finestre. Le varie finestre lavorano quindi indipendentemente dalle altre. Un esempio schematico è rappresentato in figura. Creare o modificare una pagina con frame in FP Se vogliamo impostare un sito che sfrutti questa tecnica è necessario creare, innanzitutto, la pagina iniziare che conterrà le impostazioni dei vari frame. Questa pagina è una sorta di "scheletro" o cornice (com è stata chiamata a lezione) che definisce le varie sotto-finestre. Successivamente, poi, andremo a caricare le varie pagine nelle rispettive finestre. Selezioniamo il menu File, scegliamo Nuovo e quindi Pagina. A sinistra nel riquadro scegliamo Altri modelli di pagina A questo punto scegliamo la scheda Pagine con Frame Dott.ssa Francesca Stracquadaini mail to: cixperry@hotmail.com 30

31 nel riquadro sinistro possiamo scegliere una delle pagine con frame predefinite e visualizzarne l'anteprima in basso a destra. una volta scelta la pagina (ad esempio la prima) premiamo Ok Dott.ssa Francesca Stracquadaini mail to: cixperry@hotmail.com 31

32 nell'area di lavoro vengono ora riprodotte le varie finestre (3 in questo caso) all'interno di ogni finestra sono presenti due pulsanti se premiamo Imposta pagina iniziale si apre una finestra che ci permette di scegliere la prima pagina che verrà visualizzata in quel riquadro se dobbiamo ancora creare la "pagina iniziale" allora premiamo Nuova pagina per creare una nuova pagina che andrà inserita nel riquadro A questo punto FP ci consente di modificare ulteriormente la pagina con frame. E' possibile, ad esempio, suddividere un frame in altri due. Per farlo selezioniamo il frame che vogliamo dividere apriamo il menu Frame e scegliamo Dividi Frame Dott.ssa Francesca Stracquadaini mail to: cixperry@hotmail.com 32

33 possiamo usare la finestra che appare per decidere se dividerlo in verticale (prima opzione) o in orizzontale (seconda opzione). Analogamente possiamo servirci del comando Elimina Frame presente nel menu Frame per togliere il riquadro dalla finestra. La voce Apri pagina in un'altra finestra presente nel menu Frame permette di visualizzare a tutto schermo in FP la pagina HTML contenuta nel frame. In questo modo potremo lavorare su di essa con maggior facilità Le voci Salva pagina e Salva pagina con nome sono analoghe a quelle del menu File ma, ancora una volta, si riferiscono esclusivamente alla pagina contenuta nel frame correntemente selezionato. Impostare le proprietà del frame Passiamo ad analizzare la finestra Proprietà Frame. Prima di tutto posizioniamo il cursore all'interno di un frame, successivamente apriamo il menu Frame e scegliamo Proprietà Frame. Dott.ssa Francesca Stracquadaini mail to: cixperry@hotmail.com 33

34 La prima casella ci permette di definire il nome del frame selezionato. (Questa funzione si ricollega a quella vista nel paragrafo I collegamenti ipertestuali) La finestra sottostante permette di impostare la pagina iniziare che verrà visualizzata in quel riquadro. Se abbiamo già scelto una pagina ne verrà visualizzato il collegamento relativo. Premiamo il pulsante Sfoglia per cambiare la pagina iniziare. Nell'area Dimensione frame possiamo impostare rispettivamente la larghezza e l'altezza del frame. I menu a subito a destra ci permettono di scegliere se esprimere i valori in percentuale o in pixel. Scegliendo relativa allora la dimensione del riquadro si adatterà automaticamente. L'area Margini ci permette di definire la distanza tra i margini del riquadro e gli oggetti posizionati nella pagina HTML. Se vogliamo che il futuro visitatore possa ridimensionare manualmente i bordi le dimensioni dei frame selezioniamo la casella Consenti ridimensionamento nel browser. Se la dimensione di una pagina è superiore a quella del riquadro che la contiene vengono automaticamente visualizzate delle barre di scorrimento relative a quel frame. tramite l'ultima opzione possiamo alterare questa impostazione e scegliere che le barre vengano visualizzate sempre o mai. Infine possiamo impostare come deve essere visualizzato il bordo tra i riquadri. Premiamo il pulsante Pagina con frame e selezioniamo la scheda Frame. Dott.ssa Francesca Stracquadaini mail to: cixperry@hotmail.com 34

35 La prima opzione ci permette di definire lo spessore del bordo mentre la seconda ci permette di decidere se visualizzare o meno il bordo. Dott.ssa Francesca Stracquadaini mail to: cixperry@hotmail.com 35

36 Striscione pubblicitario Spesso capita di dover inserire nelle pagine HTML delle immagini che si succedono a vicenda. Ad esempio possiamo aver bisogno di inserire un immagine contenente una scritta che, dopo alcuni secondi, viene sostituita con un'altra immagine. Solitamente questo effetto viene realizzato servendosi delle GIF. Ci basta creare un animazione inserendo l'ipotetica immagine Alfa nel primo fotogramma e l'immagine Beta nel secondo. Ma in questo caso abbiamo due limitazioni: il formato delle immagini deve, ovviamente, essere il GIF e questo, come sappiamo, comporta una notevole limitazione della gradazione dei colori inoltre la transazione tra la prima e la seconda immagine è istantanea e, effettivamente, poco gradevole. Potremmo allora creare una transazione servendoci di copie alterate delle immagini Alfa e Beta ma questo aumenterebbe la "pesantezza" del file GIF. Come risolvere allora questo problema in modo intelligente? Con FP e con l'uso del componente Striscione pubblicitario. Sotto questo nome ci cela una semplice Applet Java che FP installa nel sito e collega automaticamente alla nostra pagina. Dovremo solo impostare le opzioni dell'applet tramite la comoda finestra di controllo. Accediamo alla finestra, aprendo il menu Inserisci, selezionando Componente e quindi Striscione pubblicitario, e passiamo ad esaminarne i comandi. Dott.ssa Francesca Stracquadaini mail to: cixperry@hotmail.com 36

37 Le caselle Larghezza ed Altezza ci permettono di impostare le dimensioni dello striscione pubblicitario. Impostiamo questi valori in base alle dimensioni delle immagini che inseriremo nello striscione. E' bene tener presente che otterremo un effetto ottimale se le immagini che inseriremo avranno tutte le stesse dimensioni. Nella caselle Effetto transizione possiamo scegliere quale effetto dovrà essere riprodotto nello scambiare le immagini. Nella casella sottostante specifichiamo ogni quanti secondi deve avvenire il cambio di immagine. La casella Collega a, ed il relativo tasto Sfoglia, ci permettono di creare un collegamento ipertestuale. Quando il visitatore fare clic sullo striscione verrà caricata la pagina da noi scelta. Arriviamo quindi al pannello che ci permette di inserire le varie immagini (possiamo tranquillamente inserirne più di 2). Il pulsante Aggiungi ci permetti di inserire un'immagine che potremo selezionare dal web corrente o dall'hard disk. Il pulsante Rimuovi ci permette di eliminare un immagine dallo striscione. I rimanenti pulsanti Sposta su e Sposta giù ci consentono di impostare l'ordine della sequenza di immagini. Una volta terminata la configurazione premiamo Ok e carichiamo l'anteprima della pagina per vedere lo striscione che abbiamo creato. Pulsante attivo al passaggio del mouse Questo componente ci permette di creare un pulsante che reagisca (modificandosi graficamente e/o emettendo un suono) qualora venga "stimolato" dal mouse. Apriamo il menu Inserisci, scegliamo Componente e quindi Pulsante Attivo al passaggio del mouse. Dott.ssa Francesca Stracquadaini mail to: cixperry@hotmail.com 37