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 800×600) è una scelta condivisibile, mentre le vecchie 640×480 e le più elevate 1024×768 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 800×600 visualizzerà perfettamente il contenuto della stessa, mentre chi vi accede a 640×480 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 640×480 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%”>
</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.