INTRODUZIONE ALL’USO DI FRONTPAGE
®DELLA MICROSOFT PER LA REALIZZAZIONE DI SITI INTERNET
*Premessa ... 2
Introduzione ... 2
La scheda colori codice... 6
La scheda Tipi di carattere ... 6
La finestra carattere... 10
Paragrafo... 11
Applicare un immagine di sfondo ... 11
Animare i collegamenti... 11
I colori ... 11
Colleghiamoci ad un'altra pagina... 12
Spaziatura interna... 12
Sfondo ... 12
Il collegamento assoluto ... 14
Il collegamento relativo ... 15
Gestione automatica dei collegamenti relativi ... 15
Indirizzi E-mail ... 15
I segnalibri... 16
Frame di destinazione ... 16
Inserire un'immagine già presente nel web (indirizzo relativo) ... 17
Inserire un'immagine non presente nel web ma presente nell'hard disk ... 17
Come modificare le proprietà di un'immagine ... 17
Importare clip art ... 21
ClipArt in linea ... 21
Approfondimenti ... 27
L'intestazione di pagina... 28
La Barra di spostamento... 28
Come lavorare su un sito remoto ... 29
Le Attività... 30
La formattazione dei singoli oggetti... 32
La formattazione della pagina (il foglio di stile interno) ... 32
Il foglio di stile esterno... 33
Le modifiche successive ... 40
Eliminare i Bordi condivisi da alcune pagine del sito web ... 40
La lentezza... 40
Esempio pratico... 41
Pagina di conferma... 45
Campi da salvare ... 45
Invia risultati tramite posta elettronica... 46
Le variabili utente... 51
Cosa fare se nel web non è presente nessuna connessione ad un database ... 57
Cosa fare se nel web è presente una connessione ad un database ... 57
Come configurare il campo modulo ... 58
Come impostare dei parametri di interrogazione di un database ... 60
Criteri ... 60
* Il materiale utilizzato per questo tutorial è stato ricavato dai manuali del sito www.html.it
Premessa
L'ultima versione del classico editor HTML di casa Microsoft (presto imparerete quanto è riduttivo chiamarlo editor HTML) è sicuramente notevole e presenta interessanti innovazioni rispetto alla versione '98 ed Express.
Tra i cambiamenti principali segnaliamo l'unione dei 2 moduli della versione precedente (che prima gestivano separatamente la creazione della singola pagina HTML e l'amministrazione dell'intero web). Questa iniziale differenza apre poi le porte a tutta una serie di potenziamenti come ad esempio l'ottima gestione dei database, delle pagine asp, della struttura e degli aggiornamenti del sito.
L'area di lavoro è ben organizzata e permette di avere a portata di mouse tutte le funzioni principali del programma. Con un clic, ad esempio, è possibile visualizzare i vari aspetti della pagina (e del web) che si sta creando. Vedremo in seguito come sia facile scandagliare a fondo il proprio web ed ottenere una sorta di "radiografie"
istantanee riguardanti la struttura del sito, le pagine troppo lente, troppo vecchie, quelle contenente errori o non collegate al sito.
In generale, quindi, la sensazione che traspare dal programma è come esso si prenda cura delle operazioni più macchinose e ripetitive che chi gestisce un sito web di considerevoli dimensioni deve affrontare.
Front Page 2000 lascia al webmaster prevalentemente il lavoro creativo della costruzione di un sito web, accollandosi, da bravo collaboratore, la manutenzione di pagine, cartelle, collegamenti incrociati, immagini importate e tutto quello che sta "sotto la carrozzeria" di un buon sito web.
Introduzione
L'interfaccia utente di FP2000 è decisamente ber organizzata ma soprattutto completamente personalizzabile.
In alto troviamo, come di consueto, i classici menu nei quali sono allocati tutti i comandi del programma. In linea con i prodotti Office 2000 tutti i menu sono forniti di un sistema che memorizza i comandi più usati e li rende immediatamente raggiungibili, nascondendo, d'altro canto, quelli meno "cliccati" dal webmaster. Ricordiamo, quindi, che se alcuni comandi non saranno visibili dovremo semplicemente cliccare sulla freccia posizionata in fondo al menu.
Subito sotto ci sono le due principali barre (quella Standard e quella Formattazione) che possono essere personalizzate all'estremo. Infatti trascinando il grilletto posizionato all'estrema sinistra di ogni barra degli strumenti possiamo muovere la barra in qualsiasi punto dello schermo.
Possiamo persino posizionare varie barre alla stessa altezza verticale dell'area di lavoro e farle scorrere quando necessario. (Un po' quello che accade nella barra Start di Windows 98 o successivo)
Cliccando sulla piccola freccia rivolta verso il basso, che troviamo all'estrema destra di ogni barra, è possibile accedere al comando
"Aggiungi e rimuovi pulsanti". Questa funzione permette di selezionare, con un semplice clic, i pulsanti che vogliamo far comparire sulla barra che stiamo modificando.
Sulla sinistra dello schermo, in verticale, troviamo invece una novità di FP2000: la barra delle visualizzazioni (che riassume un po' il contenuto del menu Visualizza).
Come accennato nell'introduzione, questa barra permette di ottenere velocemente delle vere e proprie radiografie del sito internet o della pagina che stiamo modificando.
Subito a destra (se abbiamo premuto il pulsante Elenco Cartelle situato nella barra Standard) è presente l'elenco di tutte le cartelle (e relativi file) del nostro web. Questa finestra è utilissima per aprire le varie pagine da modificare senza dover ricorrere in continuazione al comando Apri.
La restante parte dello schermo è occupata dalla finestra principale che, di volta in volta, ci permetterà di visualizzare tutti gli aspetti del nostro web (pagina, listato HTML, anteprima, struttura del sito etc...)
In basso a sinistra di questa finestra possiamo trovare tre funzioni molto utili ovvero le schede:
Normale, HTML, Anteprima.
Possiamo usarle per scegliere se visualizzare la pagina in costruzione, il relativo listato HTML o l'anteprima.
In basso a destra dello schermo, accanto alla clessidra, FP2000 ci indica il tempo che sarà necessario per il caricamento della pagina che stiamo allestendo. La velocità presupposta è quella di un modem analogico a 28.8 kbit ma è possibile alterarla (fino ad ottenere il tempo di caricamento della nostra pagina con un computer avente un collegamento T3).
Da sempre una delle peculiarità di FP2000 è stata l'uso delle estensioni Server di Front Page 2000.
Ma cosa sono queste fantomatiche "estensioni" e soprattutto, in concreto, cosa permettono di realizzare?
Le estensioni sono degli utilissimi programmi installati nel server che ricevono informazioni dal nostro sito Internet, le elaborano, e quindi le restituiscono (alla pagina HTML, ad un Database o ad un indirizzo di posta elettronica).
La prima interessante caratteristica è quindi quella della velocità. Mentre linguaggi di scrip (denominati "dal lato client") gravano sul computer di chi si collega al sito (con conseguente rallentamento di velocità) le estensioni di FP2000 vengono gestite completamente dal server Internet.
Il secondo lato positivo è che possiamo in pochi clic inserire: contatori visite, moduli di ricerca, inclusioni pianificate di pagine senza dover assolutamente conoscere alcun linguaggio di script.
E' importante ricordare che tutti i componenti che sfruttano le estensioni Server di FP2000 funzionano solo se vengono creati lavorando direttamente sulla cartella remota oppure se il sito (creato in locale) viene trasferito su Internet con l'apposito comando Pubblica.
Ovviamente il server dovrà avere installate le estensioni.
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.
FP2000 risolve il problema semplicemente permettendo di impostare a priori la compatibilità delle pagine del sito che si sta allestendo.
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 FP2000 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 FP2000 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, 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 2000: 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 FP2000. Dobbiamo semplicemente informarci se il nostro spazio web supporta le estensioni di Front Page 2000 (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 FP2000 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. FP2000 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 FP2000 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.
Pagine ASP: infine questa casella abilita in FP2000 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 FP2000 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) FP2000 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.
FP2000 ci offre la possibilità di modificare tutta una serie di parametri che, seppur ben calibrati secondo le impostazioni predefinite, sarebbe bene conoscere ed essere in grado, se necessario, di adeguare alle proprie esigenze.
Apriamo quindi la finestra Opzioni pagina selezionando la voce relativa dal menu Strumenti.
La scheda Generale ci permette di definire alcune opzioni preliminari.
Abilitare la prima casella equivale a consentire a FP2000 l'uso dei tag DIV e SPAN per gli oggetti presenti nella pagina HTML
La seconda opzioni è molto comoda (vedi capitolo Moduli). Lasciamola selezionata e sarà sufficiente inserire in una pagina vuota un campo modulo e FP2000 provvederà immediatamente a creare un Area modulo intorno al campo da noi inserito.
L'Area modulo è obbligatoria per il corretto funzionamento del modulo e, deselezionando questa opzione, dovremo provvedere manualmente ad inserirla prima di inserire un qualsiasi campo modulo.
La terza opzione attiva il correttore ortografico, implementato nel programma, che individua e sottolinea ogni vocabolo, digitato in una pagina HTML, che non viene riconosciuto. (La funzione è palesemente utile è ha senso disattivarla solo se si dispone di un calcolatore di limitata potenza)
La quarta opzione, infine, nasconde la correzione effettuata dal correttore. Possiamo ad esempio attivare questa opzione e una volta volta completata la creazione del web, disattivarla per procedere alla correzione ortografica.
Ancora una volta accediamo alla finestra Opzioni pagina servendoci del menu Strumenti
.
La scheda HTML ci permette, innanzitutto, di scegliere se FP2000 dovrà modificare la formattazione del listato di una pagina che stiamo importando.
Se abbiamo creato la pagina servendoci di un altro editor oppure abbiamo scritto il listato manualmente (ed abbiamo selezionato la prima opzione) FP2000 non modificherà nulla.
Se selezioniamo la seconda opzione invece FP2000 adeguerà la formattazione del listato HTML usando le impostazioni predefinite (come ad esempio l'uso del rientro etc...).
Le altre opzioni sono banali ma in particolare merita una segnalazione il menu Tag.
Selezionando un Tag HTML da questa area, infatti, potremo decidere se (nella scrittura del listato HTML) FP2000 dovrà scrivere quel Tag lasciando una riga prima e/o dopo il Tag di inizio di fine.
L'opzione successiva stabilisce se (sempre nell'ambito della scrittura del codice HTML) FP2000 dovrà omettere il Tag di inizio.
L'opzione Tag di fine è analoga alla precedente.
Da notare, tuttavia, che le due opzioni sono attive solo se il linguaggio HTML permette di scrivere quel TAG omettendo l'apertura o la chiusura.
La scheda colori codice
La scheda Colori codice permette di visualizzare in colori diversi il codice HTML in relazione al significato delle varie istruzioni.
Se non siamo interessati a visualizzare il codice a colori (che comunque rimane una forte semplificazione sicuramente usata da molti programmatori), non selezioniamo la casella Visualizza codice a colori.
Come vedremo nei paragrafi dedicati alle immagini (vedi paragrafo Immagini), esiste un comando che permette di 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.
La scheda Tipi di carattere
Nello spazio Lingua scegliamo il set di caratteri relativo alla nostra lingua ovvero USA/Europa occidentale.
Nella casella Carattere proporzionale possiamo impostare il carattere predefinito che userà FP2000 per visualizzare porzioni di testo che usano un carattere proporzionale.
La casella Carattere a spaziatura fissa, analogamente, permette di scegliere il carattere con cui FP2000 mostrerà porzioni di testo che usano un carattere a spaziatura fissa.
Queste opzioni non avranno effetto sull'effettivo contenuto della pagina HTML ma solo sul modo in cui FP2000 ci mostrerà la pagina che stiamo elaborando.
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 FP2000 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)
• 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.
Siamo finalmente in grado di iniziare a lavorare con FP2000.
Nei capitoli successivi verranno illustrate tutte le funzioni del programma. Prima di iniziare, tuttavia, è consigliato creare un sito web, magari di prova, nel quale potremo sperimentare a piacimento tutto ciò che impareremo in futuro.
• Apriamo FP2000 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.
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.
Nella prima casella dobbiamo digitare il dominio del nostro sito Internet
Se non possediamo un sito web che supporta le estensioni di FP2000 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 2000.
Per visualizzare le altre opzioni premiamo il pulsante Opzioni.
Selezioniamo Pubblica solo le pagine modificate se desideriamo inviare su Internet solo le pagine che abbiamo modificato dall'ultimo aggiornamento (FP2000 è 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 FP2000 deve trasferire su Internet anche eventuali sotto-siti annidati in quello principale.
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 FP2000 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 http://www...).
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.
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 FP2000 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 FP2000 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 FP2000 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.
La quasi totalità di editor di testo in ambiente Windows possiede la consueta barra di Formattazione e quella che compare in FP2000 è praticamente identica alle altre.
La finestra Stile, partendo a sinistra, contiene un piccolo menu a scorrimento che visualizza la formattazione del paragrafo attualmente selezionato. Questo comando permette, in pochi passaggi, di applicare una formattazione uniforme a qualsiasi paragrafo della pagina.
Ad esempio possiamo aumentare le dimensioni, applicare il grassetto ed impostare il carattere Arial ad un paragrafo semplicemente posizionando il cursore su di esso (non è necessario selezionare tutto il paragrafo) e selezionare Titolo 1 dal menu Stile.
Una volta approfondita la conoscenza dei fogli di stile in FP2000 impareremo a creare e modificare noi stessi le voci presenti in questo menu personalizzando così totalmente lo stile del nostro web.
Questi due menu permettono di impostare il carattere e la relativa dimensione.
Come in qualsiasi editor di testo possiamo applicare le modifiche selezionando tutta la porzione di testo interessata e scegliendo una voce dai menu.Consideriamo, tuttavia, che una pagina HTML non incorpora il carattere usato ma solo il riferimento a quel carattere. Per questo motivo sarebbe pericoloso assegnare ad una porzione di testo un carattere poco comune in quanto, il browser del futuro visitatore, potrà non visualizzare la pagina con lo stesso carattere.
Il problema si risolve usando caratteri di uso comune (Arial, Verdana, Courier New, Times New Roman) o impostando una serie di caratteri.
E' possibile, infatti, assegnare ad una porzione di testo una lista di caratteri. In questo modo il computer del futuro navigatore cercherà di visualizzare il primo carattere e, in caso di assenza di quel carattere, passerà a quello successivo e così via.Possiamo fare ciò semplicemente digitando nella casella Carattere i nomi dei vari caratteri separati da una virgola.
I primi tre pulsanti consentono, rispettivamente, di impostare ad una porzione di testo il grassetto, il corsivo e la sottolineatura. I tre successivi allineano, invece, il testo a sinistra, al
centro o a destra.
Questi due pulsanti permettono di creare rispettivamente un elenco numerato ed un elenco puntato. Basta selezionare una porzione di testo e premere uno dei due pulsanti.
Questi due comandi consentono di modificare i margini della porzione di testo selezionata. Il primo sposta tasto allarga la distanza tra i due margini mentre il secondo la diminuisce.
Il tasto Colore evidenziatore permette di selezionare ed assegnare un colore per una porzione di testo. E' sufficiente selezionare l'area
di testo che si vuole evidenziare e cliccare sul pulsante. Per modificare il colore dell'evidenziatore basta usare la piccola freccia presente sulla destra del pulsante.
Il pulsante Colore carattere funziona in modo analogo e permette di impostare il colore della porzione di testo selezionata.
La finestra carattere
Oltre alla barra Formattazione possiamo definire maggiori dettagli (sempre inerenti il carattere)
evidenziando una porzione di testo e selezionando Carattere dal menu Formato.
La finestra che si apre contiene alcune delle opzioni già descritte per la barra di formattazione più una serie aggiuntiva di effetti.
Possiamo comodamente visualizzarne gli effetti nel riquadro Anteprima.
Selezionando la scheda Spaziatura caratteri possiamo, nella prima casella, definire la spaziatura del carattere
La seconda casella ci permette di impostare il testo come Apice o come Pedice.
Paragrafo
Selezionando una porzione di testo e quindi scegliendo Paragrafo dal menu Formato si apre la finestra che permette di definire la formattazione del paragrafo selezionato.
I comandi sono abbastanza intuitivi e familiari a chiunque abbia un minimo di conoscenza di un comune editor di testo.
Utilizzando FP2000 impostare lo sfondo di una pagina HTML è facilissimo.
• Apriamo la pagina HTML e quindi scegliamo Sfondo dal menu Formato
• 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.
Animare i collegamenti
E' possibile impostare tutti i collegamenti della pagina in modo che subiscano delle variazioni durante il passaggio del mouse.
Potremmo, ad esempio, impostare un collegamento in modo che cambi colore, oppure carattere o addirittura dimensione.
Per accedere a queste opzioni attiviamo la casella Consenti effetti di attivazione per i collegamenti. Immediatamente si renderà attivo il pulsante Stile attivazione, premiamolo.
La finestra che compare ci permette di scegliere come dovrà trasformarsi il collegamento al passaggio del mouse.
Una volta effettuate le modifiche premiamo Ok per confermare. Ricordiamo di verificarne l'effettivo funzionamento caricando la pagina in anteprima nel nostro browser predefinito.
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).
Colleghiamoci ad un'altra pagina
Attivando la casella Applica impostazioni di sfondo della pagina si abiliterà l'area sottostante.
A quel punto potremo premere il pulsante sottostante Sfoglia e selezionare un'altra pagina dal nostro sito web. Immediatamente lo sfondo della pagina corrente si collegherà a quella selezionata. Il risultato sarà che la pagina corrente sarà identica (nello sfondo) alla pagina scelta.
Scegliendo Bordi e sfondo dal menu Formato accediamo alla seguente finestra che ci permette di definire un'ulteriore formattazione per l'oggetto selezionato
Nel riquadro Stile possiamo scegliere il tipo di bordo che vogliamo applicare.
Nella finestra Anteprima vedremo in tempo reale come si modificherà il bordo dell'oggetto selezionato
• Se vogliamo impostare la formattazione solo per alcuni dei bordi (ad esempio solo quello in superiore e sinistro) oppure vogliamo formattare in modo differente i vari lati attiviamo il pulsante Personalizzato a sinistra
• ancora una volta dovremo scegliere lo stile, il colore e lo spessore
• a questo punto selezioniamo, dal riquadro Anteprima, solo i bordi a cui dovrà essere applicata la formattazione appena impostata.
Spaziatura interna
In questa sezione possiamo impostare una sorta di involucro invisibile che avvolgerà l'oggetto allontanandolo da altri eventuali oggetti adiacenti.
Se stiamo definendo i bordi di una pagina HTML, invece, questa opzione ci permetterà di definire la distanza minima tra i bordi della pagina e gli altri oggetti presenti in essa.
Sfondo
Selezionando la scheda Sfondo avremo accesso ad altri comandi di formattazione.
Nell'area Riempimento possiamo impostare il Colore sfondo che andrà a riempire, appunto, lo sfondo dell'oggetto selezionato.
La finestra sottostante, invece, permette di impostare il Colore di primo piano dell'oggetto.
Nell'area Motivi possiamo definire un immagine che andrà posizionata nello sfondo dell'oggetto.
La casella Immagine di sfondo ed il relativo pulsante Sfoglia permettono di selezionare un'immagine dal proprio sito web o dall'hard disk.
Nella casella Posizione verticale possiamo decidere se l'immagine selezionata dovrà essere posizionata In alto, Al centro o In basso relativamente allo sfondo dell'oggetto selezionato.
La casella sottostante, analogamente, permette di definire la posizione orizzontale dell'immagine.
Nella casella Ripeti possiamo scegliere se e come l'immagine selezionata dovrà ripetersi sullo sfondo dell'oggetto.
Nell'ultima casella, infine, scegliamo se l'immagine dovrà scorrere insieme alla pagina oppure rimanere fissa
L'HTML mette a disposizione tutta una serie di opzioni per la formattazione degli elenchi puntati.
Il metodo più semplice per creare un elenco puntato è quello di usare uno dei due tasti della barra Formattazione
Tuttavia una volta creato un elenco (puntato o numerato) possiamo definire tutta una serie di parametri. Andiamo a scoprirli.
Posizionando il mouse sull'elenco e scegliendo Elenchi puntati e numerati dal menu Formato accediamo ad una pannello nel quale possiamo definire varie opzioni.
La prima scheda (riprodotta in figura) ci permette di impostare un'immagine al posto del classico punto. Scegliendo l'opzione Usa le immagini del tema corrente verrà applicata l'immagine secondo le impostazione del tema che stiamo usando (vedi il capitolo relativo ai temi).
Selezionando Usa l'immagine selezionata possiamo invece andare a selezionare, con il pulsante Sfoglia un'immagine a nostro piacimento.
Infine scegliendo Consenti compressione struttura se vogliamo rendere interattivo il nostro elenco. In questa modalità, infatti, il visitatore potrà cliccare su alcune voci dell'elenco e visualizzare dei sotto-elenchi.
La casella Visualizza inizialmente in forma compressa mostra, inizialmente, l'elenco in forma compressa. Successivamente il visitatore potrà esplorarlo cliccando sulle varie voci.
Questa caratteristica funziona solo con i browser che supportano l'HTML dinamico.
Ecco un esempio concreto di un elenco dinamico:
• alfa
o uno o due o tre o quattro
• beta
o rosso o verde o blu
• gamma o numeri o lettere
• delta
Nota: per creare dei sottoelenchi (cioé spostati a destra rispetto all'elenco principale) è necessario usare i pulsanti Riduci rientro ed Aumenta rientro
La seconda scheda permette di definire il simbolo grafico dell'elenco che stiamo formattando.
La terza finestra permette convertire l'elenco attuale in un elenco numerato. Oltre ai numeri arabi e quello romani è possibile associare alle varie voci le lettere dell'alfabeto.
La casella Comincia da permette di definire il valore dal quale deve iniziare il conteggio dei numeri dell'elenco.
L'ultima scheda permette infine di usare altre forme di elenchi, come ad esempio l'elenco di definizioni.
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 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 Http://...
all'inizio)
• premiamo Ok
Abbiamo appena creato un Collegamento Ipertestuale assoluto.
Per verificarne il corretto funzionamento visualizziamo l'anteprima della pagina cliccando sull'apposito pulsante nella barra degli strumenti Standard
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 http://...etc 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.
FP2000 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 FP2000 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 FP2000 risolve ottimamente questo problema correggendo automaticamente tutti i collegamenti del web qualora noi decidessimo di spostare o rinominare un qualsiasi file o cartella.
Non dobbiamo quindi preoccuparci del mantenimento dei collegamenti poiché FP2000 adatterà continuamente il web per renderlo coerente con le nostre modifiche. Nel momento in cui rinomineremo un file che è la destinazione di un collegamento FP2000 ci mostrerà la seguente finestra di dialogo. Scegliamo Si per confermare la modifica dei collegamenti ed al resto penserà il programma.
Indirizzi E-mail
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 e-mail 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 e-mail"
• evidenziamola con il mouse e poi scegliamo Collegamento ipertestuale dal menu Inserisci.
• alla solita finestra premiamo sul pulsante che raffigura una busta da lettera (posizionato sulla destra della finestra)
• si apre un ulteriore finestra nella quale dobbiamo digitare l'indirizzo e-mail 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?
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 FP2000 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.
FP2000 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:
• 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. FP2000 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:
• 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é FP2000 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. FP2000 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 FP2000 ci chiederà se può salvare l'immagine, automaticamente convertita in jpg, nella cartella images.
Confermiamo con Ok e l'operazione sarà completata.
Nota: FP2000 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.
Come possiamo notare dall'immagine la finestra delle proprietà si articola in tre schede.
In alto, nella prima scheda, nella casella Origine immagine 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 FP2000 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.
Il pulsante Modifica, invece, carica l'immagine corrente nell'editor di immagini predefinito di FP2000 ovvero Microsoft Image Composer 1.5.
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).
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 FP2000 è 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 Http://www...) nella finestra.
La casella Frame di destinazione è analoga a quella spiegata nel capito I collegamenti ipertestuali paragrafo Frame di destinazione.
Possiamo scegliere dal menu in alto oppure digitare il nome del frame di destinazione nella casella in basso.
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.
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.
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.
Arricchire il sito di elementi grafici adeguati ai contenuti è decisamente importante. E' ovvio che il futuro visitatore rimarrà meno attratto da una pagina di solo testo che della stessa pagina arricchita di clip art o vere e proprie foto.
FP2000, in linea con tutti gli ultimi prodotto della serie Office, consente l'uso di un potentissimo strumento: la Raccolta ClipArt.
Nessun altro editor HTML attuale possiede un archivio multimediale così vasto, facilmente aggiornabile e semplice da gestire.
La raccolta delle Clip Art permette di inserire facilmente non solo disegni ma anche animazioni, foto, suono e musiche (ottime per il sottofondo di un sito).
Dopo questa premessa introduttiva passiamo quindi ad esaminare concretamente il funzionamento di questo componente.
• apriamo il menu Inserisci
• selezioniamo Immagine
• selezioniamo ClipArt
Eccoci proiettati nell'ottima interfaccia grafica della raccolta.
Nella finestra principale ci sono delle icone rappresentanti le varie categorie di materiale multimediale.
Innanzitutto dobbiamo decidere se vogliamo ricercare un Immagine, un Suono (la categoria comprende anche musiche) o un Filmato. Le schede relative sono ben visibili in alto.
Una volta scelto il formato multimediale che vogliamo ricercare possiamo procedere con la ricerca per parola chiave o per categoria.
Ricercare per parola chiave è semplicissimo.
Basta digitare (nella finestra in alto) una parola chiave che possa identificare l'oggetto che stiamo cercando e premere Invio. A questo punto ci verranno visualizzati tutti gli oggetti multimediali (Immagini, Suoni o Filmati a seconda della scelta effettuata in precedenza).
Per effettuare la ricerca per categoria scorriamo la finestra principale finché non individuiamo una categoria che potrebbe contenere l'oggetto multimediale da noi ricercato.
A questo punto (indipendentemente dal metodo di ricerca adottato) ci è stata restituita una lista di icone.
• se abbiamo scelto la scheda Immagini le icone rappresentano le miniature delle rispettive immagini
• se avevamo scelto la scheda Suoni abbiamo due tipi di icone:
o il primo tipo rappresenta un altoparlante ed identifica un suono (in formato wave)
o il secondo tipo rappresenta uno spartito ed indica una musica (in formato midi)
• se avevamo invece scelto la scheda Filmati le icone rappresentano il primo fotogramma dell'animazione
A questo punto, prima di scegliere l'oggetto multimediale che inseriremo nella pagina HTML, possiamo ottenerne l'anteprima. Cliccando una volta sull'oggetto appare il seguente menu.
Premiamo il secondo tasto e verrà visualizzata (o riprodotta) l'anteprima dell'oggetto.
Il terzo tasto permette di aggiungere l'oggetto multimediale selezionato in un'altra categoria della raccolta.
Il quarto pulsante, infine, permette di visualizzare tutte le parole chiave relative all'oggetto multimediale. Possiamo quindi, cliccando su una di esse, ricercare altri oggetti analoghi.
Se avevamo scelto la scheda Immagini o Filmati il piccolo menu che si apre contiene anche due comodi pulsanti: Stile artistico e Colore e forma Cliccando sul pulsante Stile artistico ci viene restituito un elenco di immagini o filmati appartenente allo stesso stile.
Il pulante Colore e forma, invece, permette intuitivamente di ottenere un elenco di immagini o filmati analoghi per colore e forma.
Una volta trovata l'immagine, il suono o il filmato adatto alle nostre necessità clicchiamo su di esso.
Al solito menu che si apre premiamo il primo pulsante per inserirlo nella pagina HTML.
Nota: se inseriamo un'immagine o un filmato allora l'oggetto verrà inserito nella pagina HTML nel punto in cui avevamo posizionato il cursore.
Se invece inseriamo un suono o una musica allora FP2000 inserirà nel listato HTML l'istruzione che riprodurrà quel suono in sottofondo. Per verificare carichiamo l'anteprima dell'immagine (attenzione: compatibile solo con Internet Explorer).
Importare clip art
La Raccolta ClipArt presente una piacevole flessibilità che ci permette di ingrandirla facilmente aggiungendo immagini, disegni o suoni presenti nel nostro hard disk. Possiamo farlo semplicemente premendo il pulsante Importa ClipArt
• A questo punto selezioniamo gli oggetti che vogliamo aggiungere alla Raccolta ClipArt
• nella casella Tipo file specifichiamo cosa vogliamo importare (Immagini, Suoni, Filmati etc...)
• nell'area sottostante possiamo scegliere se copiare o spostare (attenzione, nel secondo caso verrà eliminata la copia sorgente e rimarrà solo quella all'interno della Raccolta ClipArt)
• selezioniamo invece la terza opzione per cercare un oggetto nella cartella corrente
• una volta effettuata la scelta premiamo il pulsante Importa
Si apre quindi la seguente finestra di dialogo che permette di impostare le proprietà dell'oggetto all'interno della Raccolta ClipArt.
Digitiamo nella casella in alto la descrizione dell'oggetto che intendiamo inserire nella raccolta.
La seconda scheda della stessa finestra ci permette di selezionare le categoria nelle quali comparirà l'oggetto che stiamo inserendo.
La terza ed ultima scheda ci permette di impostare le parole chiave relative all'oggetto che stiamo catalogando.
Premiamo Ok e finalmente l'oggetto sarà stato inserito e catalogato nella Raccolta ClipArt.
ClipArt in linea
La Microsoft ha intelligentemente intuito la necessità avvertita da numerosi utenti Office di
disporre di un vasto archivio di materiale multimediale; nella professione di Webmaster questa necessità è decisamente accentuata.
E' stata quindi allestita un'area del sito microsoft interamente dedicata all'importazione di materiale multimediale. Cerchiamo dunque di capire come usufruire di questa vasta mole di immagini, suoni ed animazioni messa a disposizione dei webmaster in possesso di FP2000.
• Apriamo la Raccolta ClipArt
• successivamente premiamo il pulsante ClipArt in linea presente in alto
• a questo punto ai apre automaticamente il nostro Browser predefinito che cerca di collegarsi ad Internet
• confermiamo la connessione ad Internet ed attendiamo
• appena stabilita la connessione il browser si collegherà direttamente al sito Microsoft ClipGallery Live
A questo punto dobbiamo semplicemente ricercare le ClipArt che preferiamo (per farlo digitiamo una parola chiave nella finestra sulla sinistra) e successivamente premere Download.
Il sistema è completamente automatico e, una volta scaricate le ClipArt, queste si aggiungeranno automaticamente alla Raccolta già presente nel nostro computer.
Successivamente potremo disporre delle nuove ClipArt semplicemente accedendo alla Raccolta ClipArt direttamente da FP2000. Ovviamente non sarà più necessario effettuare la connessione ad Internet.
Come spiegato nei paragrafi precedenti è possibile modificare un'immagine che abbiamo inserita in una pagina HTML semplicemente visualizzandone le Proprietà e premendo il pulsante Modifica. Questa procedura, infatti, carica l'immagine nel programma di grafica
predefinito di FP2000, ovvero Microsoft Image Composer 1.5.
Quando salveremo l'immagine modificata con Microsoft Image Composer potremo quindi tornare a FP2000 nella pagina HTML sarà presente la nuova versione dell'immagine.
Tuttavia esiste un procedimento ancora più semplice per eseguire delle semplici operazioni sulle immagini: la barra degli strumenti Immagini.
Secondo le impostazioni predefinite di FP2000 la barra compare ogni volta che viene selezionata un immagine presente in una pagina HTML.
Possiamo comunque scegliere di visualizzare sempre la barra Immagini aprendo il menu Visualizza selezionando Barre degli strumenti e cliccando poi su Immagini.
Andiamo ora ad esaminare tutte le funzionalità di questa barra.
Il comando Inserisci immagine da file è esattamente lo stesso descritto nella barra standard e permette di inserire velocemente un immagine nella pagina HTML corrente.
Questo pulsante permette di inserire velocemente del testo sull'immagine selezionata.
Possiamo usare questo comando solo su immagini GIF. Se cerchiamo di applicare del testo ad un immagine di formato differente FP2000 ci chiederà il permesso di convertirla in GIF.
Una volta impartito il comando si creerà, sull'immagine, un rettangolo tratteggiato che indica l'area in cui possiamo immettere del testo.
Possiamo modificare a piacimento posizione e dimensioni del rettangolo purché non fuoriesca dall'immagine.
Possiamo quindi digitare il testo desiderato e formattarlo scegliendo carattere, dimensioni, stile, allineamento, sottolineatura e colore dell'evidenziatore.
Questo pulsante sostituisce l'immagine con una miniatura impostandola come un collegamento ipertestuale all'immagine di origine.
Di risultato quando il futuro visitatore farà clic sulla miniatura verrà caricata l'immagine di origine (con le dimensioni originali quindi).
Per comprendere appieno questa funzione (ma soprattutto la tecnica usata) sarebbe meglio leggere il capitolo dedicato al posizionamento assoluto.
In concreto, comunque, possiamo selezionare l'immagine e premere questo pulsante. Il risultato immediato sarà che con il mouse potremo
