Editor  »  Guide  »  Guida FrontPage 

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. 

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

Altri articoli

Altre guide

Altre newsletter