Immaginiamo di generalizzare ancora la tecnica vista in precedenza. Quanto sarebbe utile avere un unico foglio di stile che gestisce la formattazione di tutte le pagine del nostro web? Fortunatamente questo è possibile. Basta creare (e FP2000 ci aiuta in questo) un foglio di stile esterno al quale andranno poi collegate tutte le pagine del sito.
Vediamo come fare.
• Apriamo il menu File, scegliamo Nuovo e quindi Pagina
• alla finestra che si apre scegliamo la scheda Fogli di stile e quindi
selezioniamo l'icona Foglio di stile
normale.
• Confermiamo con Ok.
Verrà automaticamente creato ed aperto il nuovo foglio di stile (esterno).
Ora possiamo scriverlo digitando manualmente le istruzioni (se conosciamo il linguaggio CSS) oppure scegliere Stile dal menu Formato.
Siamo tornati alla consueta finestra che permette di impostare la formattazione per ogni Tag HTML. Questa volta però la formattazione dei tag non ricadrà su tutti gli elementi della pagina ma su tutte le pagine che collegheremo a questo foglio di stile.
• Quando abbiamo terminato di formattare i Tag che ci interessano (vedi i paragrafi relativi) possiamo chiudere con Ok
• chiusa l'interfaccia grafica ora stiamo visualizzando la pagina del foglio di stile e le istruzioni che FP2000 ha scritto mentre noi definivamo lo stile dei vari Tag HTML. • scegliamo Salva con nome dal menu
File
• scegliamo infine un nome adatto (ad esempio stile) e premiamo Ok (notiamo che FP2000 assegna automaticamente l'estensione css al foglio di stile)
• ora possiamo chiedere la finestra.
Una volta creato il foglio di stile esterno (che infatti è un file a indipendente) passiamo a vedere come collegare ad esso le altre pagine del sito web:
• apriamo la pagina che vogliamo collegare al foglio di stile
• apriamo il menu Formato e quindi scegliamo Collegamenti al foglio di stile
• la finestra che si apre ci permette di scegliere, innanzitutto, se vogliamo collegare al foglio di stile solo la pagina corrente o tutte le pagine del sito web • una volta effettuata la scelta premiamo il
pulsante Aggiungi per andare a cercare il file con estensione css che abbiamo creato
• infine confermiamo e torniamo alla pagina corrente che avrà acquisito la formattazione specificata nel foglio di stile esterno
• se alcuni elementi non assumono la formattazione specificata nel foglio di stile caricare la pagina in anteprima nel browser predefinito.
A questo punto passiamo ad esaminare il funzionamento dell'interfaccia grafica per l'impostazione delle istruzioni grafiche dei fogli di stile.
Raggiungiamo una finestra Modifica stile (sia essa di un oggetto, di un Tag in una pagina o di un Tag in un foglio di stile esterno).
Premendo il pulsante Formato si apre un piccolo menu che permette di scegliere cosa vogliamo modificare dell'oggetto selezionato.
Le 5 finestre che si aprono in corrispondenza di questo menu sono le stesse già esaminate nei capitoli precedenti.
Nota: In alcuni oggetti è inutile impostare alcune opzioni. Ad esempio non avrebbe senso definire un tipo di elenco puntato se abbiamo selezionando il TAG di un immagine.
FP2000 non effettua un controllo preventivo sui comandi inseriti nello stile di un oggetto quindi non saremo avvisati se stiamo impostando dei parametri superflui.
Questo non comprometterà il corretto funzionamento (o visualizzazione) dell'oggetto.
Tuttavia avremo inserito nel listato HTML delle istruzioni inutili
Abbiamo imparato ad applicare una speciale formattazione ai vari TAG HTML.
Ora siamo in grado, ad esempio, di specificare (tramite un foglio di stile esterno) che i bordi di tutte le tabelle dovranno essere di color verde. Questo è sicuramente un vantaggio perché non dovremo ricorrere alla formattazione delle singole tabelle di tutto il nostro web.
Ma cosa succede se sorge la necessità di formattare alcune tabelle con un colore differente? Semplice, viene spontaneo rispondere, è sufficiente:
• aprire la pagina che contiene la tabella in questione
• fare clic destro sulla tabella e selezionare
Proprietà tabella
• a questo punto, premendo il pulsante
Stile, avremo accesso allo stile della Tabella
• possiamo quindi definire un nuovo colore di sfondo
A questo punto il browser del futuro navigatore noterà che c'è un contrasto tra il colore impostato dal foglio di stile esterno ed il colore impostato per quella singola tabella Alfa. In casi di conflitto come questo il browser darà la precedenza alle opzioni "particolari" mettendo in secondo piano quelle "generali".
Questo significa che il bordo della tabella assumerà il colore appena specificato mentre tutte le altre tabelle del sito web (essendo prive di istruzioni "particolari") faranno riferimento al consueto foglio di stile esterno.
Problema risolto, quindi.
Ma cosa succederebbe se si presentasse la necessità di creare due diverse classi di tabelle? Cosa potremmo fare, cioè, per decidere nel foglio di stile la formattazione di due differenti tipi di tabelle? Come possiamo, cioè, specificare (nel foglio di stile esterno) che il nostro sito web conterrà due tabelle: la prima con bordi verdi e la seconda con bordi rossi (ad esempio)?
I fogli di stile permettono questo "sdoppiamento" dei Tag HTML tramite l'uso delle classi.
Per creare una classe basta aggiungere (separata da un punto) l'etichetta della classe subito dopo il nome del Tag.
Torniamo, quindi, alla finestra del nostro foglio di stile esterno.
Premiamo il pulsante Nuovo per definire la formattazione di un nuovo Tag HTML
• Nella finestra che si apre dobbiamo definire, come di consueto, il nome del Tag HTML al quale si riferisce la formattazione che stiamo impostando • digitiamo quindi il nome del Tag
aggiungendo l'identificativo della classe (separando le due parole con un punto). • possiamo scrivere, ad esempio,
table.rossa
• procediamo quindi all'impostazione dello stile usando il consueto pulsante
Formato
• Una volta termina la definizione dello stile confermiamo con Ok e torniamo alla finestra precedente
• ripetiamo il procedimento definendo, questa volta, la classe table.verde
• una volta finito confermiamo tutto con Ok e chiudiamo il foglio di stile
Dobbiamo ora tornare al nostro sito web e scegliere la classe delle varie tabelle che abbiamo creato.
• apriamo quindi una pagina contenente una tabella
• facciamo clic destro sulla tabella e selezioniamo Proprietà tabella
• nella finestra che si apre usiamo la finestra Classe per definire, appunto, la classe della tabella selezionata
• digitiamo, ad esempio, rossa se vogliamo applicare a quella tabella la formattazione applicata a table.rossa
• digitiamo, invece, verde per applicare la formattazione dell'altra classe
Le potenzialità di questa tecnica sono altissime e, se costruiamo il nostro sito web usando sin dall'inizio la distinzione delle classi (definendo cioè la classe di ogni oggetto) saremo poi avvantaggiati quando dovremo aggiornarne la grafica.
Il concetto di Tema relativo ad un sito Internet espande quello dei Fogli di Stile.
Un tema è una collezione di fogli di stile e di oggetti grafici personalizzati che vengono automaticamente applicati a tutto il sito web.
FP2000 inserisce automaticamente i vari oggetti del tema in varie aree della pagina.
Se, ad esempi, abbiamo applicato un tema ad un sito web ci basterà selezionare Intestazione
pagina dal menu Inserisci ed automaticamente
verrà inserita un'immagine con sopra applicato il testo relativo al titolo della pagina corrente.
Analogamente FP2000 può arricchire graficamente i pulsanti delle varie barre di spostamento e sostituire le classiche linee orizzontali (ovvero il Tag HTML <hr> ) con dei
separatori composti da immagini.
In complesso l'applicazione di un tema può aiutare notevolmente un webmaster che muove i primi passi nella costruzione di siti web. Successivamente, però, ci si rende conto di quanto questa funzione sia "intrusiva" e "rigida". Inoltre questo tipo di automazione inserisce tutta una serie di immagini (seppur in formato GIF) e di
codice HTML che appesantiscono una pagina . Mentre invece il lavoro più competente del webmaster potrebbe ottimizzare le stesse situazioni.
Tuttavia, non è giusto giudicare meno
professionale FP2000 a causa di questa
funzione aggiuntiva che, in fin dei conti, chiunque è libero di usare o meno.
Passiamo ad analizzare come si dovrebbe muovere chi scegliesse di usarla
L'applicazione di un Tema non deve necessariamente avvenire prima di iniziare la costruzione del sito web.
Tuttavia ricordiamo che se avremo costruito il web usando il modulo Struttura (e cioè se tutte le pagine del web attuale avranno una loro collocazione gerarchica rispetto alle altre) allora potremo trarre il meglio da queste tecnologia. Apriamo quindi il sito web che stiamo costruendo e selezioniamo Tema dal menu Formato.
Si apre la finestra riprodotta in figura.
Dal menu sinistro possiamo scegliere, innanzitutto, se applicare il tema a tutte le pagine del web o solo a quella corrente.
Nella finestra sottostante possiamo selezionare il tema che desideriamo applicare ed infine le opzioni in basso si permettono di configurare il tema.
Da notare che l'ultima opzione Applica tramite
CSS (che permette a FP2000 di avvalersi della
tecnologia dei fogli di stile durante l'applicazione del tema) viene abilitata esclusivamente se abbiamo impostato la compatibilità del web solo
per Microsoft Internet Explorer.
FP2000 ci consente di modificare rapidamente i parametri di un tema.
Ricordiamo tuttavia che per salvare un tema modificato dovremo assegnargli un nome differente da quello originale. A scopo cautelativo, infatti, FP2000 ci vieta di sovrascrivere uno dei temi predefiniti.
• Per modificare un tema scegliamo al voce
Tema dal menu Formato
• successivamente premiamo il pulsante
Modifica e successivamente Colori
• a questo punto scegliamo la scheda
Personalizza
• ora possiamo assegnare ai vari elementi del nostro sito web un colore
• basta scegliere l'elemento dal menu di sinistra e selezionare un colore tramite il menu a destra
• Una volta apportate le modifiche torniamo alla finestra precedente premendo Ok • a questo punto premiamo il pulsante
Salva con nome ed assegniamo un
nome al Tema che abbiamo modificato (il nome dovrà essere diverso da quello dei temi predefiniti)
• confermiamo con Ok
Ora il nuovo tema modificato sarà presente nell'elenco dei temi a sinistra
Un altro aspetto, dei temi, che possiamo modificare è la grafica.
Possiamo infatti definire le immagini che andranno a formare le intestazioni, i pulsanti di
spostamento, lo sfondo ed altri elementi decorativi.
• Ancora una volta scegliamo Tema dal menu Formato
• premiamo il pulsante Modifica per accedere ai pulsanti nascosti
• premiamo, quindi, il pulsante Grafica
In questo pannello possiamo associare un'immagine ad ogni elemento del tema.
Nell'esempio rappresentato in figura viene richiesto di scegliere tre immagini per i pulsanti della barra di spostamento.
• La prima immagine andrà a rappresentare il pulsante
• la seconda immagine andrà a rappresentare il pulsante selezionato
• la terza rappresenterà il pulsante attivo (ovvero al passaggio del mouse)
Per alcuni elementi del tema sarà possibile scegliere una sola immagine mentre per altri potremo scegliere tre immagini (relative ai vari stati dell'elemento).
Selezionando la scheda Carattere, inoltre, potremo assegnare un carattere ai vari elementi del tema.
I vari menu sulla destra ci permettono, inoltre, di definire lo stile, la dimensione e l'allineamento del testo all'interno dell'oggetto.
Possiamo e modificare un'ultima caratteristica dei temi: il testo.
• Ancora una volta scegliamo Tema dal menu Formato.
• premiamo il pulsante Modifica per accedere ai pulsanti nascosti
• in questo pannello possiamo facilmente assegnare un carattere a vari elementi delle pagine HTML
• basterà selezionare l'elemento dal menu in alto ed associare un carattere dalla lista in basso.
La tecnica dei Frame permette, letteralmente, di suddividere la finestra principale del sito web in 2 o più sotto-finestre. Ognuna di queste finestre conterrà poi una pagina HTML che ovviamente potrà avere impostazioni del tutto differenti dalle altre.
Inoltre, secondo le impostazioni predefinite, i collegamenti presenti nelle varie pagine caricheranno altre pagine HTML che andranno ad essere contenute nelle medesime finestre. Le varie finestre lavorano quindi indipendentemente dalle altre.
Un esempio schematico è rappresentato in figura.
Se vogliamo impostare un sito che sfrutti questa tecnica è necessario creare, innanzitutto, la pagina iniziare che conterrà le impostazioni dei vari frame.
Questa pagina è una sorta di "scheletro" che definisce le varie sotto-finestre. Successivamente, poi, andremo a caricare le varie pagine nelle rispettive finestre.
• Selezioniamo il menu File, scegliamo
Nuovo e quindi Pagina.
• A questo punto scegliamo la scheda
Pagine con Frame
• nel riquadro sinistro possiamo scegliere una delle pagine con frame predefinite e visualizzarne l'anteprima in basso a destra.
• una volta scelta la pagina (ad esempio la prima) premiamo Ok
• nell'area di lavoro vengono ora riprodotte le varie finestre (2 in questo caso)
• all'interno di ogni finestra sono presenti due pulsanti
• se premiamo Imposta pagina iniziale si apre una finestra che ci permette di scegliere la prima pagina che verrà visualizzata in quel riquadro
• se dobbiamo ancora creare la "pagina iniziale" allora premiamo Nuova pagina per creare una nuova pagina che andrà inserita nel riquadro
A questo punto FP2000 ci consente di modificare ulteriormente la pagina con frame.
E' possibile, ad esempio, suddividere un frame in altri due.
• Per farlo selezioniamo il frame che vogliamo dividere
• apriamo il menu Frame e scegliamo
Dividi Frame
• possiamo usare la finestra che appare per decidere se dividerlo in verticale (prima
opzione) o in orizzontale (seconda opzione).
Analogamente possiamo servirci del comando
Elimina Frame presente nel menu Frame per
togliere il riquadro dalla finestra.
La voce Apri pagina in un'altra finestra presente nel menu Frame permette di visualizzare a tutto schermo in FP2000 la pagina HTML contenuta nel frame. In questo modo potremo lavorare su di essa con maggior facilità Le voci Salva pagina e Salva pagina con nome sono analoghe a quelle del menu File ma, ancora una volta, si riferiscono esclusivamente alla pagina contenuta nel frame correntemente selezionato.
Passiamo ad analizzare la finestra Proprietà
Frame.
Prima di tutto posizioniamo il cursore all'interno di un frame, successivamente apriamo il menu
Frame e scegliamo Proprietà Frame.
La prima casella ci permette di definire il nome del frame selezionato. (Questa funzione si ricollega a quella vista nel paragrafo I collegamenti ipertestuali)
La finestra sottostante permette di impostare la
pagina iniziare che verrà visualizzata in quel
riquadro. Se abbiamo già scelto una pagina ne verrà visualizzato il collegamento relativo. Premiamo il pulsante Sfoglia per cambiare la pagina iniziare.
Nell'area Dimensione frame possiamo impostare rispettivamente la larghezza e l'altezza del frame. I menu a subito a destra ci permettono di scegliere se esprimere i valori in percentuale o in
pixel.
Scegliendo relativa allora la dimensione del riquadro si adatterà automaticamente.
L'area Margini ci permette di definire la distanza tra i margini del riquadro e gli oggetti posizionati nella pagina HTML.
Se vogliamo che il futuro visitatore possa ridimensionare manualmente i bordi le dimensioni dei frame selezioniamo la casella Consenti
ridimensionamento nel browser.
Se la dimensione di una pagina è superiore a quella del riquadro che la contiene vengono automaticamente visualizzate delle barre di scorrimento relative a quel frame.
Tramite l'ultima opzione possiamo alterare questa impostazione e scegliere che le barre vengano visualizzate sempre o mai.
Infine possiamo impostare come deve essere visualizzato il bordo tra i riquadri.
Premiamo il pulsante Pagina con frame e selezioniamo la scheda Frame.
La prima opzione ci permette di definire lo spessore del bordo mentre la seconda ci permette di decidere se visualizzare o meno il bordo
Immaginiamo di voler rendere uniforme l'aspetto di un sito web. Potremmo, ad esempio, avere l'esigenza di rendere uguale la parte iniziale di tutte le pagine.
La funzione Bordi condivisi che troviamo nel menu Formato è appositamente concepita per questa evenienza.
Tramite questa funzione possiamo rendere
comune il contenuto dei bordi di una pagina a
quello di tutte le altre pagine del sito web.
Potremmo ad esempio inserire nel bordo
superiore un'immagine con il logo del sito e nei bordi laterali i pulsanti per raggiungere le varie
sottopagine.
Usando i bordi condivisi ci basterà formattare solo una pagina e, automaticamente, i bordi di tutte le altre pagine si adegueranno.
Passiamo ad esaminarne il funzionamento. • Apriamo una pagina del sito web
• selezioniamo Bordi condivisi dal menu
Formato
• le prime opzioni ci permettono di decidere se applicare i Bordi condivisi a tutte le
pagine del web o solo alla pagina corrente (scegliamo la prima opzione)
• le opzioni sulla destra ci permettono di scegliere quali dei quattro bordi vogliamo applicare alla pagina corrente (selezioniamo almeno un bordo)
• confermiamo con Ok e torniamo alla visualizzazione pagina.
Come possiamo notare sono comparse delle linee tratteggiate che evidenziano i bordi che abbiamo selezionato nella finestra precedente.
All'interno dei bordi condivisi possiamo trovare del testo che ci consiglia di modificare le proprietà della barra di spostamento e di aggiungere la pagina corrente alla struttura.
Cancelliamole e verifichiamo subito il funzionamento del Bordo condiviso inserendo un oggetto all'interno di essi (ad esempio un immagine).
Salviamo la pagina.
Ora FP2000 ha inserito l'oggetto da noi scelto nel bordo condiviso di tutte le pagine del web corrente.
A questo punto l'unico limite alle possibili combinazioni è dato solo dalla nostra fantasia. Possiamo inserire all'interno dei Bordi condivisi una moltitudine di oggetti che FP2000 provvederà automaticamente a riprodurre in tutte le pagine.