aprile 2003
HOME  |  INDICE  |  CORSI  |  DIZIONARIO  |  ABBONAMENTI  |  SITO  |  HELP
 
   
  CORSI OPENMASTER
  MUSICA DIGITALE  
  WEBMASTER  
 
Lezione 1  
Lezione 2  
Lezione 3  
Lezione 4  
Lezione 5  
Lezione 6  
Editor HTML  
Esercizi  
Risorse  
 
  WINDOWS EXPERT  
 
 

Costruire template con le tabelle di layout

 

La sequenza di operazioni necessaria per impostare la pagina

Definire la struttura della pagina mediante l'impiego di tabelle è una delle operazioni più complesse con cui il Webmaster e il Web designer si devono misurare, d'altro canto è essenziale nella costruzione di un sito e una volta prodotto il modello, alias template, sarà possibile costruire numerose pagine strutturalmente identiche tra loro, ma capaci di ospitare contenuti diversi. A tal fine sarà importante concepire una struttura che sia capace di adattarsi al variare dei contenuti e sia riutilizzabile il più possibile. Mantenere al minimo il numero di template è un requisito necessario per avere un sito gestibile e per facilitarne la successiva evoluzione a sito dinamico.

Il primo passo fondamentale consiste nel decidere se incapsulare il tutto in una singola tabella oppure creare diverse tabelle separate che si allineano spontaneamente. A favore della prima soluzione gioca il completo controllo della struttura e delle sue dimensioni, a favore della seconda una maggiore leggerezza della pagina e semplicità delle tabelle che porta, alla fine, a una maggiore velocità di visualizzazione nel browser (per una descrizione di come allineare le tabelle rimandiamo all'articolo "Tabelle consecutive" sul CD).

La seconda decisione è tra una struttura fissa, immutabile al variare della dimensione del browser oppure fluida, capace quindi di espandersi e di contrarsi all'unisono con la finestra del navigatore. Nella pratica, è raro trovare pagine fluide in tutti i loro componenti, perciò anche nel caso di un design fluido, dovrete decidere quali elementi mantenere stabili al loro interno.

Pagine fisse e variabili
Il comportamento statico oppure fluido della tabella e delle sue celle dipende dall'impostazione di un singolo attributo: width che può assumere valori in pixel, perciò assoluti, oppure valori in percentuale (da 1 a 100 %). Assegnando una larghezza percentuale all'intera tabella, ad esempio con il tag <table width="75%">, otterremo un oggetto con una dimensione complessiva pari al settantacinque percento della finestra del browser, qualunque siano le dimensioni di quets'ultima.

Tale ampiezza sarà, poi, distribuita in modo uguale tra tutte le celle/colonne, salvo modificare le dimensioni di una particolare colonna rispetto alle altre a seguito dell'inserimento di testo o immagini, come visto nell'articolo precedente. Se volete controllare le dimensioni percentuali di una colonna rispetto alle altre, potete assegnare una specifica dimensione percentuale a una delle celle che la compongono.

Di solito s'imposta la dimensione della prima o dell'ultima cella, usando sempre l'attributo width all'interno, in questo caso, del tag <td>. Ad esempio <td witdh="30%"> imposta le dimensioni della cella e della relativa colonna in modo che sia il trenta percento del totale della tabella, nel nostro esempio sarebbe il 30% del 75%. Lo spazio restante sarà distribuito in modo equo tra le altre colonne. Il vantaggio di assegnare una dimensione percentuale esplicita a una delle colonne è duplice: creare proporzioni diverse nelle dimensioni di ciascuna rispetto a quanto determinato automaticamente dal browser e garantirne la stabilità anche quando inseriamo testo o altri elementi di contenuto.

Infatti, una tabella che abbia una larghezza impostata per almeno una delle sue colonne, manterrà il suo assetto anche nel momento in cui inseriamo testo nelle varie colonne. Qualora il testo fosse troppo lungo per essere contenuto nella cella, il browser lo manderebbe automaticamente a capo allungando in verticale la cella e tutta la riga a cui essa appartiene. Diversa è invece la situazione nel caso in cui venga inserita un'immagine in una cella con dimensionamento percentuale. Infatti l'immagine, essendo incomprimibile, obbligherà la cella a mantenere una larghezza almeno pari alla propria o superiore (trovate un dettaglio esemplificativo di questi passaggi nell'articolo "Dimensionare tabelle e celle fluide" sul CD).

Soluzioni miste
Cosa succede invece se nella nostra tabella fluida volessimo bloccare una colonna? Dovremmo impostarne le dimensioni in pixel e lasciare libere le altre oppure impostarle in percentuale. Anche in questo caso sarà sufficiente impostare la larghezza di una sola delle celle che compongono la colonna a dimensione fissa, lasciando libere le altre. Ad esempio il tag <td width="120"> inserito nella cella della prima o dell'ultima riga, imposterà la larghezza dell'intera colonna a 120 pixel e obbligherà anche la dimensione complessiva della tabella. Ricordiamo un concetto importante del dimensionamento fisso: la misura espressa in pixel indica la larghezza massima della colonna.

Perciò il browser non la espanderà anche quando la finestra si allarga, ma non è vero il contrario. Come già visto nell'assegnazione delle priorità dimensionali in una tabella fissa (vedi l'articolo "Stabilità delle dimensioni"), è sempre possibile restringere la larghezza di una cella/colonna a dimensione fissa quando imposto dal comprimersi della finestra o dall'espandersi del contenuto nelle colonne circostanti.

L'unico modo per garantire che una colonna rimanga davvero bloccata sia in espansione sia in compressione, una caratteristica necessaria ad esempio per una barra di navigazione, consiste nell'inserire un'immagine di larghezza esattamente identica alla larghezza della colonna. Di solito l'immagine trova posto in una cella in fondo alla colonna, collocata all'interno di una riga altrimenti vuota così da non essere visibile al navigatore. Allo scopo si usa di solito di un'immagine trasparente lunga e larga un pixel, il cosiddetto spaziatore o immagine spaziatrice (shim).

E fin qui sembrerebbe tutto chiaro: per produrre un sito con pagine fluide basta bloccare le colonne che contengono elementi di navigazione e lasciare libere quelle che invece ospitano il contenuto (testo e immagini). In tal modo il contenuto utilizzerà tutto lo spazio disponibile nella finestra del browser e, al contempo, il navigatore non sarà sorpreso da elementi di navigazione che continuano a cambiare aspetto (per un dettaglio su come costruire pagine di questo tipo vedi l'articolo "Dimensionare tabelle con celle miste" sul CD).

Purtroppo, però, le tabelle ad assetto misto (fluido e statico) presentano alcune stranezze con cui bisogna fare i conti. Innanzi tutto i browser più vecchi non rispettano la dimensione massima imposta per le colonne a larghezza fissa inserite in una tabella fluida e quando la finestra viene allargata finisce per espandersi anche la colonna che dovrebbe restare bloccata. Persino l'immagine spaziatrice non ci aiuta in questo caso perché essa garantisce che la colonna non si restringa al di sotto della propria dimensione, ma non può impedirle di allargarsi.

Il problema è stato ormai risolto dalle versioni recenti di browser, ma se pensate che i vostri utenti usino browser di due o tre anni, fa bisogna ricorrere a un altro trucco: impostare la larghezza di una delle colonne variabili al 100% in modo che la somma delle percentuali superi 100. Il browser darà sempre a tale colonna la massima larghezza possibile "tenendo a bada" tutte le altre. Questo stratagemma può servire anche a definire una pagina che abbia solo colonne a larghezza fissa eccetto una, quella dedicata al testo, e che quest'ultima si estenda a garantire alla colonna variabile sempre la massima ampiezza possibile.

Avrete notato che insistiamo sull'assegnare la larghezza sempre a una sola cella della colonna, i motivi sono tre: è inutile specificarlo per le altre celle visto che queste si adattano automaticamente facendoci risparmiare codice e mantenendo la pagina più leggera; nelle tabelle complesse è facile perdere il filo e assegnare dimensioni diverse a celle della stessa colonna per poi meravigliarsi del perché i conti non tornino; in caso di modifica delle dimensioni della tabella, è meglio dover lavorare su una sola riga che doverne cambiare tante.

Finora abbiamo parlato solo di larghezza di tabelle e celle, ma i tag <table> e <td> consentono di specificarne anche l'altezza minima che anche in questo caso può essere espressa in pixel oppure in percentuale rispetto all'altezza della finestra del browser. È un attributo usato di rado poiché la norma è lasciare che la tabella si allunghi e si accorci da sola in funzione del contenuto inserito, tuttavia è importante sapere che a differenza della larghezza, dove si indica un valore massimo, qui viene sempre indicato un valore minimo, al di sotto del quale il browser non può scendere, ma che può essere incrementato se il contenuto nelle celle contigue lo richieda. Indicando una lunghezza e una larghezza pari al 100%, la tabella occuperà sempre il massimo dello spazio disponibile nella finestra. Non esiste un'altezza di riga perché in realtà quest'ultima eredita l'altezza della cella più alta al suo interno. Anche in questo caso, se dovete indicare un valore, fatelo su una cella soltanto, la prima o l'ultima della riga.

  < Precedente   Prossimo >

 

Corso - Webmaster
 
  Prima lezione:
  Competenze e strumenti
  Seconda lezione:
  Siti statici e linguaggio HTML
  Terza lezione:
  Modelli di pagina e tabelle
1. La tabella come elemento strutturale
  1. Stabilità delle dimensioni
2. Progettare layout fluidi e statici
3. Costruire template con le tabelle di layout
  1. Tabelle e celle fluide
  2. Tabelle miste
  3. Tabelle consecutive
4. Template con struttura complessa
  1. Tabelle complesse
5. Template con tabelle nidificate
  1. Tabelle nidificate in cascata
  2. Tabelle nidificate complesse
  3. Tabelle nidificate cosecutive
6. Esercizi
  1. Esploriamo i tag delle tabelle
  2. Tabelle semplici con HTML-Kit
  Quarta lezione:
  HTML 4.01 e CSS
  Quinta lezione:
  Design e multimedialità
  Sesta lezione:
  Siti interattivi

 Copyright© PC Open - 2002 - 2003

Credits