I fogli di stile espandono notevolmente le possibilità di formattazione
dell'HTML classico e FP2000 permette di usarli per definire con precisione
lo stile grafico di ogni oggetto.
Prima di spiegare come inserire delle istruzioni di stile è bene
fare una precisazione dei tre differenti ambiti in cui possiamo usare
questa tecnologia
La formattazione dei singoli oggetti
E' possibile, innanzitutto, applicare una formattazione tramite i fogli di stile a (quasi)
ogni oggetto che possiamo inserire in una pagina HTML.
Molto probabilmente, infatti, avremo notato che nella finestra delle
proprietà di ogni oggetto (collegamenti, immagini, tabelle etc...) è
presente il pulsante Stile.
Premendolo abbiamo accesso ad una serie di comandi che ci permettono
di configurare la formattazione grafica dell'oggetto selezionato.Premendolo si accede ad un pannello che permette di impostare
moltissime opzioni grafiche.
La formattazione della
pagina (il foglio di stile interno)
Tuttavia configurare (tanto nel dettaglio) la formattazione di ogni
oggetto che inseriamo nelle nostre pagina HTML può risultare
estremamente laboriosa.
Possiamo, quindi, immaginare di fare un passo indietro (e quindi
generalizzare) applicando una serie di istruzioni di stile a tutta la
pagina corrente.
Aprendo il menu Formato e selezionando Stile accediamo
alla seguente finestra
Nella colonna a sinistra sono elencati tutti i Tag HTML che
noi possiamo formattare e ridefinire usando i fogli di stile.
Facciamo doppio clic su Table, ad esempio
Si apre la finestra Modifica stile che permette di modificare tutti
gli attributi del Tag Table.
Questo significa (come vedremo) che possiamo impostare il bordo di
colore verde e di spessore 3. A questo punto ogni volta che nella pagina
inseriremo una tabella questa avrà un bordo verde di spessore 3.
Gli effetti applicati ricadranno quindi su tutte le occorrenze di
quel determinato Tag HTML all'interno della pagina.
Il foglio di stile esterno
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.
Inserire istruzioni di
stile
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.
I class
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.
|
