|
Realizziamo il nostro primo sito con i modelli di FrontPage 2002
Parte prima di Alberto Nosotti
L’ultima versione di Microsoft FrontPage dispone di numerose e versatili funzioni che consentono di creare con facilità siti anche molto articolati e dalla grafica accattivante, senza necessariamente dover scrivere una riga in Html, il linguaggio di programmazione per lo sviluppo di pagine Web. Ma c’è di più. Chi vuole realizzare un proprio sito senza nemmeno impegnarsi ad apprendere le tecniche essenziali di utilizzo del programma, può avvalersi con successo dei modelli prestrutturati che sono ospitati nella libreria di FrontPage. Basta semplicemente personalizzarli modificando i contenuti delle varie pagine in cui si articolano i siti proposti. Nel presente articolo spiegheremo come utilizzare uno di questi modelli, mentre nei successivi ci occuperemo di abbellire il nostro sito per renderlo più accattivante, e come aggiungervi nuove funzionalità per attrarre i visitatori.
Oggi, in Italia, i collegamenti a Internet non si contano, e sono sempre più numerosi gli utenti che, dopo aver familiarizzato con il mondo del Web, stanno facendo un pensierino a realizzare un proprio sito, soprattutto in considerazione del fatto che numerosi provider offrono gratuitamente, oltre al collegamento ad Internet, anche un congruo numero di megabyte sui loro server. Le ragioni sono fra le più disparate: per pubblicizzare una piccola azienda, uno studio professionale, una attività artigianale, o più semplicemente per mettere in rete le proprie foto o condividere con altri le esperienze maturate a livello dell’ hobby preferito. Se si dispone di Microsoft FrontPage 2002 il problema è già risolto. Basta poco, infatti, per realizzare un sito dal look decisamente professionale, e ancora meno, se non vogliamo impegnarci, per adattare alle nostre esigenze un modello presrutturato, bellepronto, previa personalizzazione, per essere pubblicato in rete.
Utilizzare un modello della libreria Lanciato FrontPage, aprire il menu Visualizza e optare per la voce Riquadro attività. Così facendo, sulla destra dell’area di lavoro si apre una speciale finestra in cui si possono gestire direttamente tutte le operazioni connesse alla creazione di un sito o di una pagina Web senza dover necessariamente passare attraverso la trafila dei menu operativi (figura 1). Figura 1 Dal momento che intendiamo creare un sito utilizzando un modello, fare clic sulla voce Modelli sito Web, ospitata nella sezione Nuovo da modello del riquadro delle attività. Si determina la contestuale apertura di una maschera in cui sono raggruppate le icone corrispondenti ai vari modelli ospitati nella libreria di FrontPage (figura 2). Come si può vedere, c’è solo l’imbarazzo della scelta. Si va da un sito per presentare la propria azienda a quello per gestire un servizio di supporto tecnico, e dalla possibilità di impostare un sito personale alla creazione di un Web articolato in una sola pagina. Nella fattispecie, il modello che ci interessa più da vicino è quello denominato Web personale. La sua semplice architettura, infatti, non solo propizia le operazioni di personalizzazione, ma ci consente anche di familiarizzare con le tecniche esenziali dell’utilizzo di FrontPage, che si riveleranno preziose per procedere a interventi di più ampio respiro. La cosa importante è cominciare, dopodiché aggiungendo o eliminando pagine, e inserendo nuove funzionalità, si può trasformare radicalmente il sito, al punto che potrebbe essere difficile riconoscere il modello da cui siamo partiti. E il tutto, come si diceva, senza dover necessariamente scrivere neppure una riga di codice. Questo è il traguardo che ci si prefigge, ma per il momento la regola è quella di andare con i piedi piombo. Pertanto, incamminiamoci nell’affascinante universo del Web a cauti passi senza volere subito strafare. Figura 2 Impostare il percorso di salvataggio Dopo aver selezionato il modello che ci interessa facendovi sopra clic, dobbiamo per prima cosa specificare dove salvare il sito che verrà creato. Possiamo accettare il percorso standard che ci viene proposto nella finestrella dedicata ospitata nella sezione di destra della maschera, oppure possiamo impostare un percorso diverso aprendo il menu Sfoglia. Definito il percorso, fare clic sul pulsante Ok per dare il via alla costruzione automatica del sito, una operazione della durata di qualche decina di secondi. Conclusa la procedura, aprire il menu Visualizza e selezionare la voce Elenco cartelle: si determina così l’apertura (a destra dell’area di lavoro, di una finestra verticale in cui sono elencati tutti i file che sono stati creati (figura 3). In particolare, il nostro sito si articola in sei pagine, e precisamente:
La pagina dei commenti può essere utilizzata solo se il server del provider su cui si pubblica il sito supporta le estensioni di FrontPage (ne parleremo più avanti). Figura 3 Si noti che nell’elenco sono citate anche tre cartelle:
Dedicate ad ospitare le immagini e i commenti dei visitatori.
A questo punto, conviene caricare nell’area di lavoro tutte le pagine. Se già non fosse attivata, fare clic sull’icona Pagina che si trova nella fascia verticale a sinistra di quella in cui sono elencai i nomi file delle pagine. Dopodiché, fare doppio clic sui nomi file per caricare le varie pagine. Man mano che queste vengono aperte vanno a sovrapporsi alla precedente, ma vi si può sempre accedere facendo clic sulla corrispondente linguette che viene visualizzata immediatamente sopra il bordo dell’area di lavoro (figura 4). Se vogliamo vedere, almeno in linea di massima, come si presenterà il nostro sito una volta in rete possiamo richiederne l’anteprima. Potremo così meglio programmare le modifiche da apportarvi per personalizzarlo. Figura 4 L’anteprima del sito Visualizzare la home page facendo clic sulla corrispondente linguetta soprastante l’area di lavoro, quindi fare clic sulla linguetta Anteprima in calce all’area. Con questa operazione la pagina si presenta così come la vedremo in rete (salvo qualche piccola differenza), e i collegamenti ipertestuali in essa contenuti diventano attivi. Pertanto, possiamo accedere a tutte le pagine del sito facendo clic sui corrispondenti riferimenti elencati nella parte sinistra della pagina. Nella pagina che si raggiunge l’elenco è sempre disponibile, e pertanto si può continuare l’esplorazione o ritornare alla home page. Cogliamo l’occasione per sottolineare che una tale architettura è fondamentale per qualsiasi sito. Infatti, quando saremo in grado di ampliarla, non si dimentichi mai che da ogni pagina che si raggiunge si deve sempre poter ritornare alla home page, o quantomeno ripercorrere a ritroso il cammino fatto per raggiungerla. Insomma, guai a creare sia pure inconsapevolmente dei vicoli ciechi, che danno al visitatore una buona occasione per abbandonare definitivamente le nostra pagine. Esplorato il sito, dovremmo esserci fatti una idea degli interventi da operare per procedere almeno ad una personalizzazione di massima. Prediamo carta e penna, o meglio, lanciamo Word 2002, e mettiamo nero su bianco l’elenco delle modifiche da apportare. Stampiamolo, e teniamolo a portata di mano, perché adesso si comincia a fare sul serio. Nota – Il sito può essere navigato anche in modalità Normale (quella in cui si presenta appena è stato creato, come denuncia la prima delle tre linguette in calce all’area di lavoro). I collegamenti ipertestuali, però non sono attivi, e se vi si fa sopra clic non succede un bel niente. Per raggiungere le pagine corrispondenti bisogna fare clic tenendo contemporaneamente premuto il tasto Control, così come ci suggerisce del resto l’etichettina popup che compare non appena portiamo il cursore sul collegamento ipertestuale.
Personalizzare le pagine del sito I nostri interventi possono coinvolgere tutte le pagine create, oppure limitarsi solo ad alcune di esse. In tal caso conviene eliminare subito quelle che non ci interessano, potremo così concentrare la nostra attenzione solo su quelle su cui dobbiamo operare. È semplicissimo. Ecco come procedere.
A questo punto possiamo iniziare gli interventi di modifica, che devono essere ovviamente preceduti dalla visualizzazione della pagina coinvolta facendo clic sulla sua linguetta. Dopodiché, se già non ci si trovasse in modalità di edizione, si fa clic sulla linguetta Normale in calce a sinistra dell’area di lavoro. Modificare la home page Gli interventi da operare, almeno per il momento, si riferiscono al titolo, ai testi generici che vi sono contenuti, ai collegamenti ipertestuali, e alla modifica dell’immagine che si torva nella sezione Album foto. Figura 5 Figura 6 Modificare il titolo Fare clic destro sul riquadro che lo contiene, e nel menu contestualmente visualizzato optare per Proprietà intestazione pagina, determinando l’apertura di un box di dialogo in cui si può digitare il nuovo titolo della pagina nella casella dedicata (figura 7). Premere Ok per consolidare la modifica. Figura 7 Nota – Sopra la casella del titolo si trovano due bottoni, rispettivamente associati alle voci Immagine e Testo. Il primo dei due è attivato per significare che stiamo operando a livello di immagine dell’intestazione e non di testo. Se vogliamo modificare anche i caratteri dell’intestazione assegnando loro attributi diversi, bisogna riaprire il box di dialogo, e questa volta attivare il bottone Testo. Così facendo la scritta si contrae e si presenta evidenziata. Farvi sopra clic destro, e nel menu contestuale al clic optare per Carattere. Nella maschera che viene visualizzata (figura 8) impostare i nuovi attributi di testo, che saranno trasferiti all’intestazione dopo che si saranno premuti in sequenza i pulsanti Applica e Ok. Per ripristinare lo stato di immagine, però, bisogna riaprire il famoso box e riselezionare l’omonimo bottone. Modifica dei testi Nelle varie sezioni della home page sono presenti testi generici che devono essere sostituiti con quelli personalizzati. In ogni caso vi sono due tipi di testi. I primi sono quelli che si comportano come un blocco unico, e si riconoscono perché facendo clic in un qualsiasi punto vengono interamente evidenziati. I secondi, invece, sono testi assolutamente normali e si modificano secondo le tradizionali procedure. Ecco come procedere alla modifica dei testi del primo tipo. Figura 8
Il testo modificato con questa procedura, anche se è stato completamente riscritto, si comporta ancora come un blocco unico. Se, invece, i nuovi testi non devono presentare tali caratteristiche, bisogna cancellare semplicemente quelli originali senza passare eseguire la procedura descritta, e digitare i nuovi. Figura 9 Modifica degli attributi dei testi Ed ora vediamo come intervenire per modificare eventualmente gli attributi del testo.
Figura 10 Inserire un collegamenti ipertestuale La home page, ma anche altre pagine del sito, ospitano dei link per raggiungere su Internet altre pagine Web (per inciso, sottolineiamo che non ci si riferisce ai collegamenti ipertestuali per navigare nel sito stesso). Bene, se volessimo aggiungerne di nuovi, ecco come procedere, facendo riferimento all’elenco di link ospitato nella sezione Collegamenti preferiti. In altre situazioni ci si comporta in modo analogo, salvo qualche piccola variante.
Figura 11 Chi vuole strafare può richiedere che quando il cursore viene semplicemente posizionato sul testo del collegamento sia visualizzata una etichettina che ne descriva in chiaro le funzioni. Ecco come si fa. Premere il pulsante Descrizione, e nella casella dedicata del box che si apre illustrare le funzioni del collegamento. Premere Ok per acquisire l’input.
Eliminare un collegamento ipertestuale In certi casi vi può essere la necessità di eliminare un collegamento ipertestuale. La procedura prevede l’impiego, ovviamente, del tasto di cancellazione, ma il problema è quello di evidenziare il collegamento. Infatti, non appena vi si porta sopra il cursore, questo si trasforma nella solita manina, e non appena si fa clic per evidenziare la scritta, se ne determina, invece, l’attivazione. E allora? Allora bisogna ricorre ad un artificio.
Eliminare o sostituire una immagine Nella nostra home page è presente una immagine. Si tratta di quella ospitata nella sezione dalla quale si accede alla pagina destinata a contenere l’album fotografico. Se l’album non è previsto, oltre alla corrispondete pagina anche la foto deve essere eliminata. In questo caso la procedura è quella tradizionale, che citiamo solo per amore di completezza: fanfare clic sulla foto per evidenziarla, quindi premere il tasto di cancellazione. È tutto. Vediamo, invece, come ci si deve comportare per sostituirla con un’altra più in sintonia con i temi delle immagini che intendiamo raccogliere nella galleria.
Quasi certamente, la clipart inserita si presenta con dimensioni che occupano tutta la sezione in cui è stata importata, sconvolgendo il più del volte l’intera struttura della pagina Web. Se la situazione è tale per cui è possibile un ridimensionamento manuale agendo sulle maniglie che ne contornano i bordi, conviene approfittarne,altrimenti bisogna percorrere un’altra strada. Ecco come operare in tal caso per riportare l’immagine alle dimensioni appropriate. Figura 12
Figura 13 Il contatore delle visite Come si può notare, nella parte sinistra della home page è posizionato un contatore visite per contabilizzare il numero di visitatori che accedono alle nostre pagine. Diciamo subito che tale strumento, importantissimo per il monitoraggio del sito, opera solo se sul server del provider che ci concede lo spazio disco operano le estensioni del server di FrontPage, vale a dire che il server stesso deve essere in grado di sfruttare tali funzionalità Se così non fosse, conviene eliminarlo, perché una volta in rete anziché del contatore verrebbe semplicemente visualizzato un segnaposto. Chi fosse interessato a disporre di un tale strumento, però, non deve disperare: nel prossimo articolo gli forniremo tutte le informazioni necessarie per inserirne uno nella propria home page. Ovviamente, l’eliminazione del contatore prevede anche quella del testo che lo accompagna, ed ha luogo previa selezione del tutto e pressione del tasto di cancellazione.
Nota – Dal momento che alcune funzionalità del programma possono essere utilizzate solo se sul server del provider con cui si lavora operano le estensioni di FrontPage, per evitare di aggiungere al sito funzioni che di cui non ci si può avvalere, vale la pena di effettuare un controllo. Basta accedere al sito: http://www.microsoft.com/italy/office/previous/2000/frontpage/wpp/lista.htm dove è possibile consultare un elenco di provider che utilizzano le suddette estensioni (figura 14). Figura 14 Ci sono molte buone ragioni per avvalersi di un fornitore di accessi il cui server supporti le estensioni di FrontPage. Eccone solo alcune. Per esempio, si può sfruttare a fondo FrontPage quando si crea il sito, prevedendo l’inserimento di funzionalità decisamente interessanti. Inoltre, al momento di pubblicare il sito su Internet è possibile utilizzare la semplice procedura guidata che opera all’interno del programma.
Si conclude qui la rassegna delle modifiche essenziali da apportare alla nostra home page. Di seguito ci occupiamo degli interventi che coinvolgono la pagina che ospita l’album fotografico, dando per scontati, ovviamente, quelli di cui già ci siamo interessati. Le altre pagine del sito si possono modificare con le tecniche che abbiamo già utilizzato.
Modificare l’album fotografico In questa pagina sono raccolte alcune miniature di foto (figura 15), facendo clic sulle quali si accede alla pagina che ospita la corrispondente foto a tutto campo. Ovviamente, al loro posto devono essere messe le nostre miniature, e già che ci siamo possiamo impostare diversamente l’architettura della pagina. In pratica, quello che potremmo fare è mettere al centro della pagina una tabella di tre colonne e un certo numero di righe, nelle cui celle inseriremo le miniature. A questo punto, assoceremo ad ogni miniatura un collegamento ipertestuale che ci porta direttamente alla pagina che ospita la corrispondete foto ingrandita. In tale pagina, ovviamente, inseriremo un collegamento ipertestuale che ci riporta alla galleria. Figura 15 Creare la tabella Innanzitutto, bisogna eliminare il blocco di miniature. Fare clic destro su una qualsiasi di esse per evidenziare l’intero blocco, e nel menu contestuale al clic selezionare Taglia. Portare il cursore subito dopo il blocco di testo iniziale, che ovviamente dovrà essere modificato, e inserire la tabella.
Prima di inserire le miniature nella tabella conviene personalizzare la struttura di quest’ultima. In particolare, si può assegnare alle celle un bordo piuttosto spesso per separare convenientemente le miniature.
A questo punto possiamo inserire le miniature nelle varie celle della tabella. La procedura prevede che si faccia clic sulla cella in cui importare l’immagine, quindi che si lanci l’importazione selezionando la voce Immagine nel menu Inserisci. A questo punto si ripetono i passi che abbiamo descritto più sopra per inserire una nuova immagine nella home page. Anche in questo caso, all’inserimento dell’immagine nella cella deve eventualmente seguire, se necessario, il suo ridimensionamento. Creata la galleria delle miniature dobbiamo collegarle alle singole pagine (ancora da creare) in cui si trovano le corrispondenti foto a tutto campo. Tali pagine vanno realizzate per prime, perché ad esse si deve fare riferimento quando si procede a creare il collegamento ipertestuale.
Creare la pagine con le foto Ci sono vari modi per creare una pagina Web da aggiungere a quelle in cui già si articola il sito. In questa sede ne descriveremo due, lasciando al lettore la scelta di quale preferisce utilizzare. Ecco il primo, con il quale si crea una pagina vuota.
Nota – La pagina non viene per il momento aggiunta all’elenco dei file, ma lo sarà non appena si procederà a salvarla. Ed ecco un altro modo per creare una pagina. In questo caso, però, è possibile creare non solo una pagina vuota, ma anche avvalersi di un modello prestrutturato.
Figura 17 Per quanto ci riguarda creeremo una pagina vuota seguendo la procedura che preferiamo. Dopodiché ci preoccuperemo di inserirvi una tabella di una sola colonna e due righe. Nella cella superiore si inserirà la foto corrispondente alla miniatura cui è collegata la pagina, mentre in quella sottostante, di altezza inferiore, possiamo digitare un testo che illustri le caratteristiche dell’immagine stessa. Prima, però, anche se non strettamente necessario, conviene assegnare un nome esplicativo alla pagina. Ecco come procedere.
Figura 18 Creare la tabella e inserire le miniature Ecco come realizzare la tabella di cui abbiamo appena descritto le caratteristiche.
A questo punto possiamo finalmente impostare il collegamento ipertestuale con la corrispondente miniatura. Figura 19 Creare il collegamento ipertestuale La procedura è quella che abbiamo descritto relativamente alla creazione di un collegamento ipertestuale tradizionale, ma questa volta il collegamento non viene associato ad un testo ma ad una immagine. La riassumiamo sinteticamente.
Nota – Se il nome della pagina cui si deve accedere tramite il link non fosse presente nell’elenco, significa che la pagina non è stata salvata. Procedendo a salvarla se ne determina l’immediato inserimento.
Giunti a questo punto dovremmo essere in grado di concludere la personalizzazione essenziale del sito. Infatti le procedure descritte per intervenire sulla home page e sull’album, possono essere applicate anche alle altra pagine del sito, dove per lo più le modifiche si riducono a semplice interventi sui testi. A cose fatte, vale la pena di eseguire una anteprima del tutto. Questa volta, però, non la eseguiremo in ambiente FrontPage, ma visualizzeremo il sito nel browser di sistema. Ecco come procedere.
Figura 20 Consultiamo il nuovo aiuto di FrontPage Chi è alle prime armi potrà trovare un valido aiuto consultando la nuova guida in linea proposta FrontPage 2002. In pratica, in aggiunta al tradizionale help che operava nelle precedenti versioni, sono disponibili nuove informazioni, raggiungibili tramite una serie di collegamenti ipertestuali ospitati nella parte destra della finestra di lavoro cui si accede selezionando la voce Guida in linea nel menu Punto interrogativo (l’ultima voce del menu principale). In particolare, ci riferiamo ai seguenti collegamenti: 1 - Novità Si tratta di una sezione che illustra le nuove funzionalità che sono state introdotte in FrontPage 2002, e di cui sconsiglia caldamente la consultazione. In particolare, vale la pena di accedere alle pagine corrispondenti alla voce Creazione di siti Web personalizzati. Si potranno trovare interessanti spunti per migliorare e rendere più attraenti le proprie pagine non appena si sarà acquisita la necessaria padronanza delle tecniche di utilizzo del programma. 2 - Guida introduttiva In questo capitolo della nuova guida si possono trovare ulteriori informazioni relative alla creazione di siti. Si consiglia di consultare le ipagine raggiungibili tramite i collegamenti ipertestuali: Creare un sito Web direttamente su Internet Creare un sito Web non in linea e successivamente pubblicarlo su Internet
3 - Sito Web di Microsoft office Tramite questa voce della guida si raggiunge il sito di Microsft Office, dove, fra l’atro, si possono trovare informazioni e e avere supporto tecnico sull’utilizzo di FrontPage. 4 - Consultazione della guida Questa sezione descrive le risorse che è possibile utilizzare per visualizzare le informazioni della Guida ogni qualvolta sia necessario.
Non dimentichiamo, però, che la vecchia guida in linea è tuttora operante, e vi si possono trovare interessanti spunti, soprattutto per chi sta cominciando a vivere l’affascinate esperienza di webmaster. Ecco come accedere a informazioni che si riveleranno molti utili per chi sta utilizzando i modelli prestrutturati ospitati nella libreria di FrontPage.
Modelli
Sito web personale
Creare una pagina in base a una pagina vuota
Creare una pagina in base a un modello
|
|