Introduzione
Questa guida è breve e non vuol essere in alcun modo esaustiva, pone semplicemente in risalto il fatto che si possano creare dei fogli di stile con Front Page e che i fogli di stile hanno una loro utilità per alcuni tipi di siti. Alla fine di questa guida sarete in grado di creare un foglio di stile e applicarlo al vostro sito. Per apprezzare maggiormente questo tipo di contenuti è necessaria una certa preparazione sugli argomenti che riguardano il web (html soprattutto) e una certa infarinatura sull’uso di Front Page, l’editor visuale più famoso di casa Microsoft.

1.1 Cosa sono
In inglese si chiamano css (cascade style sheet), in italiano li chiamiamo fogli di stile. I fogli di stile possono essere incorporati nel codice della pagina oppure esterni. In questa breve guida non ci occuperemo della teoria dei css, ma vedremo come creare un foglio di stile esterno con FrontPage e applicarlo alle pagine. Prima di iniziare mi sembra giusto però ricordare perché i migliori siti usano i fogli di stile. Il motivo sostanziale consiste nel fatto che è un metodo per dividere la grafica dai contenuti, questo significa che i siti che devono essere aggiornati spesso fanno uso di fogli di stile consentendo un aggiornamento rapido e sempre preciso: il foglio di stile si occuperà di impaginare, colorare il contenuto che viene inserito a parte. La velocità di aggiornamento grafico di un sito che ha molte pagine è compiuta con la sola modifica dei fogli di stile, le pagine ad esso collegate cambieranno aspetto di conseguenza.

Che cos’è il foglio di stile? Si tratta di una o più pagine che hanno estensione .css e si occupano di fornire informazioni alle pagine web che le richiamano. Css è uno degli standard elaborati dal w3c per controllare la formattazione grafica delle pagine web. Per quanto detto finora ne viene fuori che potremmo anche aprire il notepad di windows, scrivere il codice, salvare con estensione css e linkare le pagine web al foglio di stile.

Il collegamento al foglio di stile va inserito nella head della pagina web, meglio se sotto il tag title ed è una cosa del genere:

<LINK href="mircoweb/stile.css" rel="stylesheet" type="text/css">

il che significa che la pagina web si trova in una cartella diversa da quella in cui si trova il foglio di stile: il foglio di stile si chiama stile.css e si trova nella sottocartella mircoweb. Il collegamento deve essere sempre preciso, se fosse stata la pagina web a trovarsi in una sottocartella avrei dovuto indicare un percorso a salire e avrei scritto

<LINK href="../stile.css" rel="stylesheet" type="text/css">

che vuol dire: sali di una cartella e cerca stile.css, se il foglio di stile si fosse trovato due cartelle sopra avrei dovuto scrivere

<LINK href="../../stile.css" rel="stylesheet" type="text/css">

allo stesso modo se il foglio si trova in una cartella diversa o addirittura in un altro web (un altro sito internet) dovrei indicare l’esatto percorso internet.

1.2 La sintassi: In questo paragrafo fornisco le conoscenze minime indispensabili per avere le idee chiare, non tutti sono informatici, la maggior parte di voi apprezzerà questi contenuti.

1.2.1. Selettori, dichiarazioni, proprietà, valori
Il modo più veloce per spiegare una regola è di vederla in pratica:

h4 {color: rgb(0, 51, 102)}

h4 è il selettore, si occupa di dire a quale tag verrà applicata la regola che segue

Poi troviamo le parentesi graffe, si tratta della dichiarazione: la regola che verrà applicata è contenuta qui dentro {color: rgb(0, 51, 102)}

Color è la proprietà, si tratta di applicare la proprietà dichiarata esprimendone il valore che deve assumere.

rgb(0, 51, 102) è il valore che deve assumere la proprietà selezionata, in questo caso si tratta di un blu scuro, corrisponde a Hex={00,33,66} per il diverso modo in cui possono essere dichiarati i colori. Nulla mi vieta di dichiarare: color:blue , l’unico problema è che il colore viene interpretato dal browser e blue per internet explorer è un tono di colore, per mozilla è un altro pur rimanendo blu.

Punteggiatura:

tra proprietà e valore ci sono i due punti, il valre è legato alla proprietà mediante i due punti, se vogliamo specificare dichiarazioni multiple (di più coppie proprietà – valori) possiamo farlo separando ogni coppia da un punto e virgola.

Ecco un esempio di foglio di stile, (non fatevi ingannare dall’impaginazione che potrebbe anche essere diversa) :

a:link

{

color: #FFFFCC;

}

a:visited

{

color: #FFCC66;

}

a:hover

{

color: #000000;background-color:#FFFFCC

}

body

{

font-family: Century Gothic, Arial, Helvetica;

color:#DFEFFF; background-color:#000000

}

table

{

table-border-color-light: rgb(204, 153, 255);

table-border-color-dark: rgb(204, 0, 204);

}

h1, h2, h3, h4, h5, h6

{

font-family: Century Gothic, Arial, Helvetica; color:#00FF00

}

h1

{

color: #FF4F95;

}

h2

{

color: #00FFCC;

}

h3

{

color: #99FF99;

}

h4

{

color: rgb(0, 51, 102);

}

h5

{

color: #CCFFFF;

}

h6

{

color: rgb(204, 0, 153);

}

NB: una pagina web che fa uso di css esterni avrà ben specificati tutti i tag ma, per esempio non avrà al suo interno la definizione delle font o, per esempio, dei colori: questo per non incorrere in sovrapposizioni di comandi tra il codice della pagina e quello del foglio di stile.

1.3 Costruiamo un sito
Per comodità partiamo dall’inizio, ma è evidente che un sito già esistente può essere convertito all’uso dei fogli di stile.

Apriamo FrontPage e costruiamo una struttura di esempio, tralascio tutte le parti che dovrebbero già essere acquisite e supponiamo di avere una struttura simile a questa:

A questo punto dobbiamo creare il nostro foglio di stile esterno

Selezioniamo i modelli di pagina e la linguetta fogli di stile:

possiamo creare un foglio di stile vuoto oppure caricarne uno esistente e modificarlo, scegliamo questa seconda opzione e carichiamo, per esempio, lo stile neon.

FrontPage creerà una nuova pagina.css, rinominiamola subito con il nome che vogliamo dare al nostro foglio di stile: File/salva con nome, io l’ho chiamato neon.css.

Lo strumento per modificare questo foglio di stile è la barra stile

se non compare fate clic con il dx del mouse in alto nella zona grigia di FrontPage, dovrebbe venir fuori un elenco delle barre disponibili, selezionatela.

Cliccando su stile vi si apre una finestra

con i relativi tag definiti dallo stile.

Possiamo selezionare ognuno di essi e modificarlo, oppure aggiungerne altri.

Ora facciamo un passo indietro.

1.3.1. Applichiamo lo stile
Torniamo nella visualizzazione pagina (o anche struttura) e procediamo come segue:

colleghiamo tutte le pagine allo stile neon selezionando il file neon.css dal menu aggiungi

confermiamo e andiamo a vedere cosa abbiamo fatto.

1.4 Modifiche
Dicevamo che per modificare lo stile dobbiamo agire sul foglio di stile.

Vediamo due cose che vi torneranno utili: i tag H sono i tag che front page chiama titoli, titolo 1, titolo 2 …etc e che word chiama primo livello, secondo livello. Il tag body è importantissimo; si tratta dello scritto della pagina ma ciò che è più importante è che per quasi tutti i tag potete anche stabilire lo sfondo dietro le scritte. Se avete colto l’importanza di ciò avrete anche capito che posso definire parte dello sfondo della pagina semplicemente agendo sullo sfondo del tag body.

Per capirci facciamolo: stile/ selezionate il tag body e cliccate su modifica/formato/bordi/sfondo.

Avete un colore di sfondo che riferisce al colore dietro al testo e un colore primo piano che vuol dire il colore che assume il testo (il testo all’interno del body, il corpo pagina).

Modificateli a vostro piacimento e controllate i cambiamenti.

1.5 Aggiungere tag
Credo abbiate già notato che nella finestra stile ci sia un menù a discesa stili definiti dall’utente/tag html, questi ultimi possono essere selezionati e aggiunti, ovviamente bisogna avere qualche nozione di html …oppure cliccare a caso e impararseli.

Aggiungiamone uno di cui non sono più capace di fare a meno:

a:hover {color: #000000;background-color:#FFFFCC}

hover è il commando che definisce il comportamento del link al passaggio del mouse, per evidenziare il link mi piace, non solo che questo cambi colore, ma che cambi colore anche lo sfondo. In questo modo ottengo una sorta di pulsante che vale sia per le barre dei collegamenti sia per i link che si trovano all’interno della pagina.

1.6 Classi
Questo è uno degli argomenti su cui gli studenti diventano matti, è difficile spiegarlo, è difficile la teoria, è difficile metterlo in pratica.

Cerchiamo allora di capire le questioni generali, poi entriamo nei dettagli con un esempio pratico: ci siamo fatti il nostro sito web e il nostro foglio di stile e funziona tutto a dovere. Ad un certo punto realizziamo che in alcune parti del nostro sito vorremmo applicare uno stile completamente diverso, diciamo che vogliamo applicare il medesimo stile a tutto il sito ma all’interno di una tabella vorremmo avere colori diversi. In pratica lo stile neon del nostro esempio ci va bene per tutto il sito, ma vogliamo un altro tipo di carattere, con altre dimensioni all’interno di una tabella, anzi: già che ci siamo vogliamo colorare il carattere diversamente e anche lo sfondo merita di essere rivisitato (sto sempre parlando dell’interno di questa tabella). Come fare? Risposta: con l’uso di una classe.

Questa è una classe:

.jp { color: #FFFFFF; background-color: #008000; font-family:Terminal; font-size:14 pt; font-variant:small-caps; font-weight:bold }

viene definita all’interno del foglio di stile, non è molto diverso da ciò che abbiamo visto fin’ora se non per il fatto che:

c’è un punto all’inizio: questo definisce la classe
il nome della classe, jp , può essere un nome di assoluta fantasia
per il resto niente di strano, c’è il colore del testo, il colore dello sfondo, il tipo di font, la sua misura, deve essere scritta in maiuscoletto…

Per scrivere una classe con FrontPage è sufficiente cliccare su “nuovo” nel menu stile

La prima cosa da fare è decidere un nome da dare alla classe, nonostante si possa scegliere qualsiasi nome è meglio scegliere qualcosa di significativo rispetto al lavoro che la classe dovrà compiere in modo che tutte le volte che dovremo richiamarla non sia difficile ricordare chi è e cosa fa.

Nel menù formato potremo poi definire le sue proprietà.

Particolarmente interessanti sono le proprietà che riguardano le posizioni sullo schermo

Per applicare la classe all’interno di un gruppo di celle bisogna selezionare il gruppo di celle, dx del mouse e scegliere proprietà/stile:

scrivere la classe e l’ ID, cioè il foglio di stile in cui è definita quella classe.

Torna all'indice