Progetto P.O.N.

Transcript

1 Progetto P.O.N. Corso di base HTML e Front Page Lezione del 24/03/ a Lezione - compatibilità browser - Meta Tag - creare un sito web - Barra degli strumenti - sfondo e colori - Applicare un immagine di sfondo - I colori 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 Dott.ssa Francesca Stracquadaini 2

3 quasi obsolete versioni 3.0 vedremo scomparire dai menu molte funzioni. Ancora una volta, tuttavia, 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. Dott.ssa Francesca Stracquadaini 3

4 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. 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 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 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 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 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 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 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 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 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. Dott.ssa Francesca Stracquadaini 12

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

14 Sommario Compatibilità Browser...2 Meta Tag...5 Creare un sito Web...7 Barra degli strumenti...8 Sfondo e colori...12 Applicare un immagine di sfondo...12 I colori...13 Dott.ssa Francesca Stracquadaini 14