Biagio Di Stefano

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:

pagina di prova di una pagina non adattabile alle impostazioni video
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.

__________________
Biagio Di Stefano