Realizzare layout molto articolati combinando tabelle multiple, incapsulate l'una nell'altra
Purtroppo anche l'impiego di celle espanse non è sufficiente a coprire tutte le esigenze di layout di una pagina, perciò esiste un ulteriore livello di complessità a cui ricorrere, che consiste nell'inserire una tabella nell'altra. Di solito è sconsigliato spingersi oltre ai tre o quattro livelli di nidificazione per non mandare in crisi il browser che trova sempre difficile interpretare tabelle nidificate. Alcuni consigliano di evitarle del tutto, il che è praticamente impossibile se non nelle pagine più elementari. Il consiglio è di ridurle al minimo e di nidificare tabelle semplici, possibilmente con dimensioni fisse (in pixel). Nidificare significa inserire un'intera tabella all'interno della cella di una tabella esistente, seguendo le stesse regole di costruzione usate per le tabelle normali. Un listato con tabelle nidificate diventa molto complesso e difficile da decifrare se non a occhi molto esperti.
Cerchiamo di capire le regole fondamentali. Le informazioni fornite fin qui valgono sia per le tabelle di layout sia per le tabelle di contenuto, ma quando si entra nel dominio delle tabelle nidificate ci troviamo unicamente nel dominio del layout, perciò introduciamo per prima cosa alcuni accorgimenti che sono tipici di questo ambiente. A differenza di una tabella di contenuto, le tabelle di layout sono invisibili poiché non contribuiscono all'informazione della pagina, ma servono unicamente per fissare le posizioni dei vari elementi. Ne consegue che devono essere invisibili, il che richiede l'impostazione uniforme di tre attributi: border="0" per nascondere i bordi (li si può tenere visibili come aiuto nella fase di progettazione, per poi rimuoverli alla fine), cellpadding="0" per azzerare la spaziatura interna alla cella e cellspacing="0" per azzerare la spaziatura tra le celle. Di default il browser assegna un bordo di un pixel e una spaziatura interna ed esterna di 2 pixel per lato a ciascuna cella, perciò è importante ricordarsi di disattivare questi tre elementi prima di cominciare a costruire la tabella di layout, altrimenti sarà molto difficile far tornare i conti delle larghezze delle colonne, delle celle e delle tabelle che sono nidificate al loro interno.
Si comincia sempre col definire le dimensioni della tabella generale che conterrà l'intera pagina oppure una porzione di questa e poi la si suddivide in colonne. La seconda fase consiste nel dimensionare le tabelle nidificate e le colonne di queste ultime, una per una. Spesso dovrete ricorrere alle immagini spaziatrici trasparenti per garantire la stabilità degli elementi della pagina, ma si possono usare allo scopo anche elementi grafici visibili, che possibilmente facciano già parte del progetto grafico della pagina. La generazione di tabelle nidificate è semplificata enormemente dall'impiego di editor visuali che consentono di disegnare la pagina col mouse su un foglio bianco e quindi generano in automatico tutte le tabelle necessarie. Rientrano in questa categoria Dreamweaver MX e Fireworks MX, GoLive 6.0, FrontPage 2002, Namo Webeditor, Hot Metal Pro.
Ciascuno segue un approccio diverso e genera tabelle più o meno efficienti. Namo si distingue per il fatto di realizzare un tracciato provvisorio della pagina, modificabile in tutti i suoi elementi, ma nel quale è già possibile inserire contenuti per avere un'idea dell'aspetto finale della pagina prima di produrre il codice HTML vero e proprio. Anche Fireworks si comporta in modo analogo, con l'aggiunta di conservare sempre l'originale modificabile del progetto e quindi di poter ripetere la generazione dell'HTML quante volte si vuole, per poi darlo in pasto a Dreamweaver MX. Quest'ultimo dispone di una funzione propria di generazione grafica del layout che produce il codice immediatamente, ma permette comunque di modificare visualmente gli elementi già generati (per una prova completa vedi "Macromedia Dreamweaver MX, la nave scuola del Web design" sul CD).
Discorso analogo per GoLive 6.0 che trasforma la generazione della pagina Web in una vera e propria operazione di disegno: c'è una tela bianca con una griglia di riferimento su cui collocare qualsiasi tipo di oggetto pescato da una ricca tavolozza. Ogni elemento rimane modificabile e la generazione o rigenerazione del codice HTML è immediata (vedi "Adobe GoLive 6.0 maestro di tabelle" sul CD). FrontPage 2002 genera immediatamente il codice e offre possibilità di modifica sugli elementi essenziali (ne parleremo nella prossima lezione).
In mancanza di strumenti visuali, la costruzione del layout passa per un lungo processo di codifica dei vari elementi, partendo da dimensioni tracciate in anticipo su un foglio di carta o ancor meglio su una stampa del progetto grafico della pagina. A titolo di esempio riportiamo la struttura di tabelle nidificate usata per le pagine interne del nostro corso su CD. Vediamo una tabella generale, che avvolge tutta la pagina, all'interno della quale sono state inserite otto tabelle nidificate: una espressamente dedicata al testo e ai contenuti informativi, le altre riservate agli elementi di navigazione e alla barra orizzontale che contiene il logo.
Il modello di pagina è quello classico a quattro pannelli descritto nella seconda lezione (vedi l'articolo "Impostare gli spazi del canovaccio" sul CD). Osservando la pagina senza contenuti notiamo che le otto tabelle nidificate si dividono in cinque aree principali. La prima è la tabella che contiene la barra orizzontale del logo, indispensabile per garantire che la pagina mantenga la propria larghezza e struttura. A sua volta include una delle altre tabelle nidificate che contiene le voci di navigazione globale (home, indice, corsi, eccetera). La seconda area è composta da due tabelle, una nell'altra che si appoggiano spontaneamente sotto la tabella del logo e che ospitano la navigazione del CD.
La struttura del nostro template ipotetico
Abbiamo preso come esempio una pagina di questo corso identificandone le cinque aree e le otto tabelle nidificate che le compongono.

La terza area è composta da due tabelle indipendenti, collocate una sotto l'altra, che contengono il testo e le immagini della pagina oltre che un elemento di navigazione locale (Precedente – Prossimo). La quarta area contiene altre due tabelle che elencano tutti i link di una particolare lezione. La quinta area contiene semplicemente una riga di chiusura.
Tutte e cinque le aree vengono tenute al loro posto e collocate reciprocamente dalla tabella principale che vediamo schematizzata in un grafico generato con GoLive. L'area 1 occupa l'unica cella che compone la prima riga della tabella. La seconda riga contiene una tabella invisibile che serve da spaziatore tra il logo e il resto della pagina e che a sua volta ospita tre celle con immagini spaziatrici invisibili che ne bloccano le dimensioni impostando la larghezza delle tre colonne successive che ospitano le aree 2, 3 e 4 composte da altrettante celle contigue nella terza riga. La riga quattro contiene semplicemente la linea blu di chiura e la riga cinque corrisponde all'area 5 nel nostro schema, quella che contiene il link alla pagina dei credits.
Le zone in evidenza
Ecco visualizzate in modo più semplice le cinque aree in cui si suddivide la nostra pagina modello (template).

La struttura della tabella primaria
Questo grafico realizzato con GoLive 6.0 ci mostra come si compone la tabella globale che contiene le altre otto e che garantisce l'assetto generale della pagina. Abbiamo aperto la prima riga e la prima cella per mostrare la posizione delle prime due tabelle nidificate.

Schema visivo della tabella globale
Qui vediamo la tabella globale con i bordi attivi in modo da evidenziare le singole righe e celle.

Benché possa sembrare complessa, questa è una pagina abbastanza comune in un sito e sicuramente è molto meno articolata di una home page. Per vedere come è stata costruita pezzo per pezzo rimandiamo agli articoli nel CD: Tabelle nidificate in cascata, Tabelle nidificate complesse e Tabelle nidificate consecutive. Rimandiamo invece alla prossima lezione per esaminare gli aspetti delle tabelle in quanto elementi di contenuto.
|