La scelta di una risoluzione video entro la quale sviluppare il contenuto di un Website è solitamente lasciata agli sviluppatori. Certamente creare pagine ottimizzate per la risoluzione che va per la maggior (nel momento in cui scriviamo la 800x600) è una scelta condivisibile, mentre le vecchie 640x480 e le più elevate 1024x768 a nostro avviso vanno per il momento abbandonate. Non scopriamo nulla di nuovo se individuiamo in una risoluzione video adattabile alle varie impostazioni dei singoli monitor il non plus ultra; ma tale risultato non è facilmente ottenibile in presenza di immagini, tabelle e menu di gradi dimensioni, che in ultima analisi rischierebbero di compromettere il layout di pagina.

Esistono alcuni accorgimenti che prendendo spunto dalle tabelle HTML giungono a risolvere, almeno in parte, il problema sopracitato.

Per semplificare la comprensione del problema e della relativa soluzione consideriamo una pagina HTML aperta da un'intestazione costituita da immagini che tutte insieme arrivano a circa 750 pixel di larghezza. Questo vuol dire che un utente che accede alla pagina ad una risoluzione video di 800x600 visualizzerà perfettamente il contenuto della stessa, mentre chi vi accede a 640x480 otterrà un pessimo risultato.

Per comprendere meglio cosa intendiamo abbiamo preparato una pagina di prova che puoi raggiungere cliccando sul link seguente:

Il codice usato per creare l'intestazione superiore della pagina è un semplice:

<img src="b01.gif" width="80" height="82" border="0"><img src="b02.gif" width=294 height="82" border="0"><img src="b03.gif" width="384" height="82" border="0">

Il che vuol dire che modificando la risoluzione video e portandola a 640x480 il risultato che si ottiene è disatroso: le immagini del menu vengono automaticamente inserite al di sotto del logo e le linee stravolgendo il layout di pagina.

Senza modificare le impostazioni video, se vuoi verificare gli effetti su questa pagina, prova a ridimensionare la finestra trascinando con il mouse.

Per evitare questo inconveniente è sufficiente servirsi di strumenti standard di HTML: le tabelle.
Partendo dagli stessi elementi grafici visti in precedenza impostiamo un nuovo codice:

<table border="0" width="100%" cellpadding="0" cellspacing="0">
<td width="80">
<img src="b01.gif" width="80" height="82" border="0">
</td>
<td background="b02.gif" width="100%">
&nbsp;
</td>
<td width="384">
<img src="b03.gif" width="384" height="82" border="0">
</td>
</table>

• La tabella (table) è impostata su una larghezza (width) pari al 100% dello spazio disponibile nella pagina. Questo significa che la dimensione generale della tabella si adatta alle singole risoluzioni video.
• Per la prima e la terza immagine (rispettivamente il logo ed il menu) abbiamo previsto un valore TD identico alla larghezza delle stesse. In altre parole la larghezza dei due TD è fissa e non variabile nella dimensione identica a quelle delle immagini.
• Per il secondo TD (le righe nere orizzontali) abbiamo previsto che l'immagine sia posta come sfondo (background="b02.gif") e non all'interno del TD come quelli visti in precedenza. Ancora, abbiamo impostato la larghezza del TD al 100%. Per le proprietà delle tabella questo si traduce nell'adattamento del TD allo spazio lasciato dalle immagini fisse (logo e menu). In altre parole il primo ed il terzo TD rimangono sempre fissi ed invariabili nelle dimensioni, mentre il secondo TD si adatta alle varie risoluzioni video.

Un'ultima nota in conclusione: l'esempio è perfettamente funzionante con MsIe e Netscape.