*Linux Guide

Fare Web - Progetto e Realizzazione - Parte 5

*

Menu e Contenuti

Come abbiamo visto nella pagina precedente, dapprima si stabiliscono gli elementi strutturali e successivamente si definiscono gli elementi presentazionali. La stessa cosa faremo per la creazione della barra del menu e per tutti gli altri elementi della pagina, partendo dalla definizione della struttura e del layout della barra del menu. Questo sarà costituito da un semplice elemento di blocco che identificheremo con il nome "menu" all'interno del quale saranno collocati i vari links alle pagine che abbiamo stabilito nella stesura del progetto, quindi presentiamo la struttura:

<div id="menu" title="Il menu principale"> <strong>Menu :</strong> <a href="index.htm" title="Vai alla Home" tabindex="1" accesskey="1">[1]Home</a> | <a href="Chi_siamo.htm" title="Fai la nostra conoscenza" tabindex="2" accesskey="2">[2]Chi siamo</a> | <a href="Prodotti.htm" title="I nostri prodotti e servizi" tabindex="3" accesskey="3">[3]Prodotti</a> | <a href="Supporto.htm" title="Aiuto e documentazione" tabindex="4" accesskey="4">[4]Supporto</a> | <a href="Contatti.htm" title="Come contattarci" tabindex="5" accesskey="5">[5]Contatti</a> | <a href="Info.htm" title="Informazioni su questo sito" tabindex="6" accesskey="6">[6]Info</a> </div>

Come si può notare il blocco di testo - evidenziato in giallo - che contiene i links, ha una propria identificazione (id="menu") ed un titolo che ne consente la identificazione funzionale e semantica.
Passiamo ad analizzare la struttura di un link :

<a 
[I] href="index.htm" 
[II] title="Vai alla Home" 
[III] tabindex="1"
[IV]> accesskey="1" 
[V]Home</a> [1]
[VI]|
  1. Indica la pagina collegata
  2. Mostra il testo alternativo molto utile in funzione di aumentare l'Accessibilità del documento web e che andrebbe inserito in ogni link. Questo testo non deve essere lo stesso del link, ma deve fornire qualche informazione in più.
  3. Mostra l'indice di tabulazione particolarmente importante per l'Accessibilità potendo permettere all'utente di raggiungere un links senza far uso del mouse, ma della semplice tastiera.
  4. Mostra la chiave di accesso rapido importantissima per l'accessibilità in modo che l'utente possa usare la sola tastiera per raggiungere la pagina collegata.
  5. Mostra l'identificazione della chiave di accesso rapido.
  6. Elemento testuale di separazione dei links allineati, necessario secondo le regole dell'Accessibilità.

A questo punto dovremo stilare le dichiarazioni stilistiche che gestiscano l'aspetto della barra del menu. Faremo si che la barra sia distante dalla testata di appena 2px, che il bordino sia di colore nero e tratteggiato, che il colore di fondo sia grigio chiaro, che i links siano colorati di blu acceso, sottolineati e che al passaggio del puntatore divengano a fondo blu e a testo bianco e che, una volta cliccati, divengano di colore rosso e fondo blu. Ecco la dichiarazione stilistica:


#menu{margin : 2px 0;
padding : 3px;
background : #ccc;
border : 1px dashed #000;
text-align : center;
}

#menu a:link{color : #009;
padding : 0 3px;
}

#menu a:visited{color : #036;
}

#menu a:hover{color : #fff;
background : #009;
text-decoration : none;
}

#menu a:active{color : #f00;
background : #009;
text-decoration : none;
}
Si possono notare a carico del selettore "#menu" le seguenti caratteristiche :
  • il valore del margine a 2px sia per l'alto che per il basso il che lo porta a distanziarsi dalla testata di 2px.
  • poi si può notare che il peso del font (font-weight) è stato impostato per ottenere un effetto grassetto (bold)
  • il valore "dashed" applicato al bordo (border) si traduce in una linea tratteggiata
  • infine l'allineamento del testo all'interno del blocco (text-align) è stato posto centrale (center).

I links contenuti all'interno di questo elemento di blocco subiscono un trattamento stilistico particolare. Innanzitutto ogni aspetto dei links, relativo al passaggio del puntatore del mouse, deve essere applicato ai soli links contenuti in questo elemento e quindi ogni aspetto deve essere preceduto dal nome dell'elemento che lo alloggia (#menu a) seguito dall'aspetto del link (link, visited, hover, active), poi ogni singola dichiarazione riceverà l'opportuno trattamento. E' infatti possibile osservare che i link a riposo (a:link) appariranno di colore blu (#009) che i links già visitati (a:visited) saranno di colore blu grigio, che i links evidenziati dal cursore (a:hover) saranno bianchi con sfondo blu e che quelli che verranno cliccati (a:active) saranno rossi su fondo blu.
Potete vederne il risultato in questa pagina

Ora dobbiamo provvedere a produrre la sezione dei contenuti veri e propri e per farlo useremo degli elementi di blocco (div). Produrremo un layout a due colonne e partiamo quindi dal definire la struttura :

<div id="colsin">
La colonna sinistra
</div>
<div id="coldes">
La colonna destra
</div>
E' importante capire che gli elementi di blocco si estendono ad occupare l'intera riga nella quale sono disposti e due elementi di blocco posti nella pagina senza definizioni stilistiche, si dispongono uno di seguito all'altro. Nel nostro caso il primo <div> (colonna sinistra) si disporrà sopra al <div> "colonna destra", come potete osservare in questa pagina.
Quindi è necessario far si che le due colonne si affianchino e per farlo dovremo stabilire le loro dimensioni in larghezza in modo che non occupino, associate, più del 100% dello spazio a loro disposizione. Dovremo anche far si che si collochino adeguatamente una a fianco all'altra e solo dopo definiremo le loro caratteristiche estetico-presentazionali.
Cominciamo quindi a definire, nel CSS, i loro attributi e valori dimensionali:

#colsin{width : 80%;
float : left;
background : #ccc;
}

#coldes{width : 20%;
float : right;
background : #e0ffff;
}

In questo modo abbiamo stabilito che la colonna sinistra si disponga a sinistra ed occupi l'80% dello spazio, mentre che la colonna destra si disponga a destra ed occupi il restante 20% dello spazio. Potete osservare l'effetto in questa pagina.

Se vogliamo aggiungere un bordo alle due colonne, occorre tenere a mente che i bordi entrano a far parte delle dimensioni dei singoli box e che quindi ogni colonna acquista una dimensione che è la risultanza delle dimensioni effettive + il bordino, nel nostro caso si tratta dell'80% + 2px per la colonna sinistra e del 20% + 2px per la colonna destra. Ne consegue che l'intero complesso delle due colonne eccede di 8 px lo spazio disponibile (2px sul lato destro + 2 px su quello sinistro per la colonna sinistra + 2px sul lato destro + 2px sul lato sinistro per la colonna destra = 8px) con l'inevitabile fenomeno della "fuga accapo" del secondo elemento. Per ovviare a questo dovremo agire sulle dimensioni vere delle colonne che modificheremo a 79% per la sola colonna sinistra. Quindi la nuova dichiarazione stilistica a carico delle colonne sarà la seguente:


#colsin{width : 79%;
float : left;
background : #ccc;
border : 2px solid #999;
}

#coldes{width : 20%;
float : right;
border : 2px solid #000;
background : #e0ffff;
}
Possiamo vedere l'effetto di questo adattamento andando a questa pagina.

Abbiamo quindi visto come sistemare, nello spazio della pagina, le due colonne. Ora dobbiamo provvedere a far si che il loro contenuto sia gestito e collocato al meglio.
E' innanzitutto necessario aggiungere il padding ovvero lo spazio tra il bordo della colonna e i contenuti, attributo necessario a far si che la pagina sia leggibile e che il contenuto non si addossi al bordo del suo contenitore. Se applicassimo il padding direttamente alle due colonne di cui sopra, non faremmo altro che aumentarne le dimensioni e si tornerebbe al fenomeno "fuga accapo". Il padding infatti si aggiunge ai valori dimensionali per cui se inseriamo un padding anche di un solo piccolo pixel, la colonna che non trova spazio va accapo. Ovvieremo a questo problema inserendo all'interno della due colonne un altro elemento di blocco che sarà il vero contenitore dei contenuti. Ecco quindi la sintassi della struttura :


<div id="colsin">
<div class="contenuti">
La colonna sinistra
</div>
</div>
<div id="coldes">
<div class="contenuti">
La colonna destra
</div>
</div>
Questi contenitori nel contenitore possono assolvere anche a funzioni estetiche come vedremo nel CSS che li gestisce.

.contenuti{margin : 3px;
border : 1px dashed #000;
padding : 3px;
background : #fff;
}

Per praticità di illustrazione ho inserito la stessa dichiarazione stilistica per i due contenitori; ma è possibile produrre due effetti grafici differenti identificando diversamente i due contenitori (ad esempio uno "contenuti" e l'altro "contenutimenu") e producendo una dichiarazione stilistica differente per ogni singolo contenitore.
Come vediamo dalla dichiarazione, il selettore (contenuti) è preceduto da un punto il che lo identifica come "selettore di classe", questo fa si che la dichiarazione stilistica possa essere applicata a più elementi con lo stesso nome. La gestione dei selettori univoci o di classe è un argomento molto importante.
In ogni caso con la dichiarazione stilistica esposta sopra, otterremo un effetto sia strutturale che estetico, come è possibile osservare in questa pagina.

Vedremo ora come realizzare il pie di pagina e come sistemare e gestire i contenuti delle due colonne con l'uso di diverse soluzioni.
Per realizzare il pie di pagina utilizzeremo un elemento di blocco <div> che identificheremo con il nome "piedipagina" e quindi la sintassi sarà la seguente :

<div id="piedipagina" title="Il pie di pagina e brevi informazioni"> Questo sito è prorpietà di Pinco Pallino<br /> Tutti i diritti sono riservati<br /> Per contatti con il Webmaster inviare una E-mail a <a href="mailto:info@sampsite.it" title="Scrivi allo staff">info@sampsite.it</a> </div>

Dal punto di vista stilistico, produrremo una dichiarazione che porti il pie di pagina ad avere un colore simile al titolo, il testo centrato, piccolo e di colore tenue rispetto allo sfondo. Quindi la dichiarazione stilistica sarà la seguente :

#piedipagina{clear : both;
padding : 2px 0;
background : #369;
border : 1px solid #000;
text-align : center;
font-size : 85%;
color : #f5f5f5;
}

#piedipagina a:link,a:visited,a:hover{color : #fff;
}

Noteremo subito la prima dichiarazione (clear : both) che fa si che l'elemento "piedipagina" non sia affiancato da alcun altro elemento. Se non avessimo inserito questa dichiarazione il pie di pagina si sarebbe affiancato all'ultimo elemento della struttura, ovvero la colonna destra con un effetto grafico devastante. L'attributo "clear" si applica quando un elemento non flottante, segua elementi flottanti (nel nostro caso la colonna destra).
L'altro dato importante è quello relativo alla collocazione del testo che viene collocato al centro dell'elemento (text-align : center). Le altre dichiarazioni sono di facile comprensione e l'esito di simili scelte sono vidibili in questa pagina

<< Precedente | Indice | Successiva >>

[ 1 ] Aspetto dei Links
I CSS consentono molto semplicemente di ottenere degli effetti grafici a carico dei links molto interessanti e simpatici. Il primo è quello che comporta il cambiamento di colore e sottofondo al passaggio del cursore del mouse, si chiama "hover". Il secondo effetto permette di modificare l'aspetto del link quando la pagina sia stata già visitata, si chiama "visited". Il terzo effetto permette di modificare l'aspetto del link quando si fa click sul link stesso, si chiama "active". Per ottenere questi effetti si deve ricorrere alle pseudoclassi che hanno una sintassi precisa ed un ordine progressivo ben definito.
La pseudo classe che stabilisce l'aspetto del link a riposo ha questa sintassi : a:link ed è sempre quella che deve essere digitata per prima nel Foglio di stile
La pseudo classe che definisce l'aspetto del link già visitato è : a:visited ed è la seconda ad essere inserita nel CSS
La pseudoclasse che definisce l'aspetto del link alla sovrapposizione del puntatore del mouse è : a:hover ed è la terza da inserire nel CSS
La quarta pseudoclasse, che gestisce laspetto del link quando lo si attiva è : a:active
E' necessario ricordare questo ordine di inserimento.


[ 2 ] Gestione dei selettori
Il selettore stilistico identifica a quale elemento xhtml si applicano le dichiarazioni stilistiche. Ci sono due tipi di selettori, il selettore univoco - identificato nel codice xhtml con il termine "id" e nel CSS con il cancelletto "#" - ed il selettore di classe - identificato nel codice xhtml con il termine "class" e nel CSS con il punto ".".
Il primo tipo di selettore prevede che un solo elemento possa essere identificato con un nome specifico (ad esempio l'identificazione di un elemento con "id="menudestro" non può essere applicata ad un altro elemento), quindi la dichiarazione stilistica si applica solo ed unicamente a lui.
Il secondo tipo di selettore prevede invece che più elementi nella pagina abbiano la stessa identificazione e che la dichiarazione stilistica si applica a tutti gli elementi con quella identificazione.
Da un punto di vista tecnico l'uso di elementi e selettori univoci fa si che la pagina acquisti maggior forza semantica, mentre l'uso di selettori plurimi o di classe, permette di usare elementi ripetuti senza dover produrre troppe dichiarazioni stilistiche.

Linux Guide | Torna in alto