*Linux Guide

Fare Web - Progetto e Realizzazione - Parte 4

*

Il Layout

Il documento prodotto alla pagina precedente non ha contenuti e quindi al browser si vedrebbe una insulsa pagina bianca. E' il momento quindi di produrre quella struttura che ci eravamo prefissati di ottenere e per farlo partiremo dalla testata dove inseriremo il titolo, il logo ed eventualmente qualche altra informazione.
Per fare questo useremo il marcatore di capitolo <h1> nel quale inseriremo un titolo testuale che, a differenza di un titolo grafico, non ha problemi di visibilità con qualsiasi software o supporto hardware. Ecco quello che, a scopo illustrativo, abbiamo inserito nel codice analizzato nella pagina precedente (di cui non abbiamo inserito tutte le righe di codice)


<html>
<head>
<title>SampSite - Pagina matrice</title>
</head>
<body>
<h1 id="titolo" title="Il titolo del sito">SampSite</h1>
</body>
</html>

Se salvassimo questo file e lo visualizzassimo su un qualsiasi browser vedremmo una grande scritta nera su fondo bianco "SampSite", ma noi vorremmo che fossero previste ulteriori informazioni nel titolo, in modo che l'utente abbia subito una idea di cosa andrà a visitare. Si tratta quindi di inserire un sotto titolo che potremmo affiancare al titolo di cui sopra. Per aggiungere un sottotitolo possiamo inserire all'interno del marcatore <h1> e a fianco del titolo, un altro testo esplicativo (nel nostro caso inseriremo la frase "Un sito di esempio") racchiuso nel marcatore <span> per motivi che spiegheremo più avanti ed otterremo questo codice.


...
<body>
<h1 id="titolo" title="Il titolo del sito">SampSite <span id="sottotitolo">Un sito di esempio</span> </h1>
</body>
...

Tuttavia se ci limitassimo a inserire semplicemente questo testo e visualizzassimo la pagina nel browser vedremmo la scritta nera SampSite Un sito di esempio. Desolante!
E' ora quindi di parlare di aspetto della pagina e di Fogli di stile.

Il Foglio di Stile o CSS
Seguite questi passaggi:
  1. In Bluefish cliccate il pulsante "Nuovo file" nella barra degli strumenti
  2. Salvatelo come sampsite.css nella stessa directory dove è conservato Pagina_base.htm
In esso digiteremo le dichiarazioni stilistiche che riguarderanno ogni singolo elemento della pagina web, quindi si parte solitamente dalla definizione delle caratteristiche visive del corpo del documento, il <body>.
Digiteremo attributi e valori relativi a margini (margin), distanze dei contenuti dal bordo (padding), colore o immagine di fondo (background-color o background-image), tipo di carattere testuale (font-family), grandezza dei caratteri testuali (font-size), colore dei caratteri testuali (color).
Di solito il <body> non ha margini con valori diversi dallo 0 (zero), altrimenti la pagina risulterebbe disassata e con problemi di visualizzazione con risoluzioni di schermo diverse da quella usata per produrre la pagina. Anche il padding è di solito a 0 (zero) per evitare che i contenuti, al variare della risoluzione dello schermo, abbiano problemi di sovrapposizione. Invece gli altri attributi elencati sono spesso possessori di valori precisi che influenzeranno i contenuti dell'intera pagina, si tratta dell'ereditarietà.
La dichiarazione stilistica che andrete a inserire nel CSS, relativa al <body> sarà quella illustrata sotto:

body{margin : 0;
padding : 0;
background-color : #f5f5f5;
font-family : serif,sans-serif;
font-size : 100%;
color : #000000;
}

Noteremo quindi che i valori strutturali (margin e padding) sono nulli, mentre avremo stabilito che il colore del sottofondo è grigio molto chiaro (#f5f5f5), che il tipo di carattere testuale principale è senza grazie e che il carattere generico è senza grazie (sans-serif) ( ? ), che la grandezza del font è quella massima impostata dall'utente nel proprio browser ( ? ) e che il colore dei font è nero ( ? ).
Salvate nuovamente questo CSS.

Per poter far si che la pagina "Pagina_base.htm sia in collegamento con il CSS appena prodotto, dovremo inserire nell'area di testa della pagina il link relativo con la seguente sintassi :

<link rel="stylesheet" href="miostile.css" type="text/css" media="screen" />

Questa stringa di codice mostra dati importanti come la tipizzazione (type="text/css") e l'indicazione del supporto previsto (media="screen"), quest'ultimo molto importante per far si che la pagina sia correttamente orientata alla visualizzazione allo schermo (media="print" è infatti dedicato alle stampanti, media="aural" ai lettori di schermo, "media="handheld" ai palmari).

Torniamo al CSS per stabilire l'aspetto della testata che vogliamo che abbia un colore di fondo grigio azzurro, che abbia un bordino nero che la delimita, che il titolo abbia una grandezza diversa dal sottotitolo, che il titolo abbia un colore bianco, che il sottotitolo sia di colore grigio molto chiaro e che sia in corsivo. Nel CSS, di cui sopra, inseriremo quindi queste dichiarazioni :


h1{margin : 0;
padding : 5px 0 5px 25px; border : 1px solid #000; background : #369; color : #fff; } #sottotitolo{font-size : 80%; [III] font-style : italic; [IV] color : #f5f5f5; margin-left : 10px; [V] }

Possiamo notare alcune cose interessanti. Il padding di <h1> indica la distanza del contenuto dal bordo rispettivamente dall'alto (5px), da destra (0px), dal basso (5px) e da sinistra (25px) e questo modo di scrivere i valori è una regola molto pratica ( ? ).
I dati relativi al bordino di <h1> (border) sono espressi in modo tale che il primo valore indichi lo spessore del bordo (1px), il secondo valore indica il tipo di tratto del bordino (solid, quindi a linea continua) ed il terzo indica il colore del bordino espresso nella forma compressa esadecimale (#000). Il valore del colore di fondo (background) indica un colore grigio azzurro, mentre il testo (color) comparirà bianco.
Il sottotitolo mostra innanzitutto una grandezza di font (font-size) minore (l'80%) rispetto a quella del suo elemento progenitore (che è <h1>), poi mostra uno style dei fonts di tipo italico (font-style). Il margine sinistro ha un valore di 10 px in modo che la scritta del sottotitolo si distanzi da quella del titolo di 10 pixel.
E' ora di vedere l'esempio di quanto costruito finora

<< Precedente | Indice | Successiva >>

[ 1 ] Ereditarietà
Non si tratta di imparare argomenti di genetica, ma di gerarchia.
Il <body> è l'elemento contenitore di tutti i contenuti della pagina e si dice quindi che è il progenitore. Le sue caratteristiche influenzano quelle degli altri elementi contenuti in esso se questi ultimi non hanno dichiarazioni specifiche e diverse. Quindi se per il <body> è stato dichiarato il colore nero dei caratteri testuali, tutti gli altri elementi che sono contenuti in esso, avranno il colore nero per i caratteri testuali, a meno che per un preciso elemento non ci sia dichiarazione stilistica precisa e diversa.


[ 2 ] Stili testuali
Dichiarare il tipo di carattere testuale (font) è sempre importante e si dovrebbe fare una prima scelta, se prediligere i font provvisti di grazie (quelle piccolissime appendici che si trovano ai vertici della struttura della singola lettera) o quelli sprovvisti di grazie e in genere la lettura allo schermo è favorita dall'assenza di grazie. Poi si dovrebbe scegliere il tipo specifico di font (Verdana, Helvetica, Arial, Courier, Times New Roman, Garamond, Palatino, ecc.) tenendo presente che nei moderni computer si trovano molti font, ma non tutti; quindi è bene dichiarare un font prediletto, un font di seconda scelta (nel caso il primo non fosse presente sul computer del visitatore) ed un font generico (nel caso che sia il primo che il secondo siano assenti). Il validatore dei CSS segnala sempre la mancata dichiarazione del font generico, quindi va sempre dichiarato.


[ 3 ] Dimensionamento dei caratteri
La grandezza dei font può essere stabilita in due modi principali :
- dimensione fissa
- dimensione relativa
La prima si ottiene con i valori dichiarati in pixel (px) o in punti (pt) e non risentono dell'effetto ingrandimento di internet explorer per windovs. La dimensione relativa, invece, si applica con i valori enfatizzanti (em) o con i valori percentuali (%) che invece risentono della funzione di ingrandimento di cui sopra. In linea generale è bene evitare dimensionamenti fissi per consentire all'utente di gestire la lettura a suo piacimento.


[ 4 ] Colori dei font
Ci sono due modi per dichiarare il colore dei font:
- dichiarazione nominale
- dichiarazione esadecimale
La prima dichiara il tipo di colore con il nome stesso del colore in inglese (aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow), ma le scelte sono veramente limitate.
La seconda si basa sulle notazioni esadecimali stabilite dalla mescolanza dei colori primari (rosso, verde, blu). I valori alfanumerici sono sei e divisi in coppie (la prima è riferita al rosso, la seconda al verde e la terza al blu). E' previsto e consigliato anche l'uso della dichiarazione esadecimale compressa con soli tre valori alfanumerici (primo per il rosso, secondo per il verde e terzo per il blu). L'uso della dichiarazione esadecimale compressa è la migliore e la più facile da gestire.


[ 5 ] Sintassi dei valori
Ci sono due modi per dichiarare i valori di attributi come margin, padding, border (ovvero attributi che si applicano ai quattro lati di un elemento):
- dichiarazione singola
- dichiarazione sommatoria
La prima dichiara il valore per ogni lato dell'elemento xhtml come indicato sotto :

  1. attributo-top : valore;
  2. attributo-right : valore;
  3. attributo-bottom : valore;
  4. attributo-left : valore;

La prima dichiara le stesse identiche cose ma in modo più efficace e pratico basandosi sulla dichiarazione "in senso orario" come illustrato sotto (tra parentesi il corrispettivo spaziale):
attributo : valore(top) valore(right) valore(bottom) valore(left);
Esiste poi una terza modalità compressa tale per cui i valori top e bottom (alto e basso) sono accorpati ed i valori right e left (destra e sinistra) sono accorpati. Questo metodo si utilizza solo se i singoli valori accorpati sono uguali, come illustrato sotto :
attributo : valore(top bottom) valore(right left);

Linux Guide | Torna in alto