CD| CORSI| NEWSLETTER| B2B| NEWS| CREA| PRO| HOSTING| ADSL| PROGR.

| LINUX| FLASH| ASP| PHP| CGI| GIF| FONT HOMEPAGE

Adattare alla risoluzione

FORUM
DOWNLOAD
SHOPPING
NEWSLETTER

REDIRECT (TOO.IT)
La scelta di una risoluzione video entro la quale sviluppare il contenuto di un STATISTICHE
Website è solitamente lasciata agli sviluppatori. Certamente creare pagine UTENTI CONNESSI
ottimizzate per la risoluzione che va per la maggior (nel momento in cui GUESTBOOK
scriviamo la 800x600) è una scelta condivisibile, mentre le vecchie 640x480 SONDAGGI
e le più elevate 1024x768 a nostro avviso vanno per il momento SCAMBIOBANNER
abbandonate. Non scopriamo nulla di nuovo se individuiamo in una FORUM FREE
risoluzione video adattabile alle varie impostazioni dei singoli monitor il non
plus ultra; ma tale risultato non è facilmente ottenibile in presenza di GUIDE DI BASE
i
j
k
l
m
n j
k
l
m
n j
k
l
m
n
immagini, tabelle e menu di gradi dimensioni, che in ultima analisi Guida HTML
rischierebbero di compromettere il layout di pagina. Corso XML
j
k
l
m
n j
k
l
m
n j
k
l
m
n Usabilità dei siti
HTML per bambini
Esistono alcuni accorgimenti che prendendo spunto dalle tabelle HTML
LINGUAGGI WEB
giungono a risolvere, almeno in parte, il problema sopracitato.
Javascript
Per semplificare la comprensione del problema e della relativa soluzione Guida al PHP
consideriamo una pagina HTML aperta da un'intestazione costituita da Tutorial DHTML
immagini che tutte insieme arrivano a circa 750 pixel di larghezza. Questo RACCOLTE FREE
vuol dire che un utente che accede alla pagina ad una risoluzione video di
800x600 visualizzerà perfettamente il contenuto della stessa, mentre chi vi 300 Javascript
130 demo Dhtml
accede a 640x480 otterrà un pessimo risultato. 550 Applet Java
Per comprendere meglio cosa intendiamo abbiamo preparato una pagina di SOFTWARE WEB
prova che puoi raggiungere cliccando sul link seguente:
Guida Front Page
pagina di prova di una pagina non adattabile alle impostazioni video Guida Dreamweaver
ULTIM'ORA GRAFICA WEB
Ancora giù il Numtel: - Il codice usato per creare l'intestazione superiore della pagina è un
1,42% Tutorial Photoshop
semplice: Paint Shop Pro
WorldCom annuncia
SERVIZI FREE
3.700 licenziamenti <img src="b01.gif" width=80 height=82 border=0><img src="b02.gif"
Caso Microsoft: dirigente width=294 height=82 border=0><img src="b03.gif" width=384 height=82 Servizi Free
AOL testimone d'accusa border=0> Webmaster finder
F.A.Q.
È Yahoo! il motore di
ricerca più visitato Il che vuol dire che modificando la risoluzione video e portandola a 640x480 PERCORSI

Microsoft: lascia il COO

Rick Belluzzo
In ribasso il Numtel.
Stabili gli altri mercati.
HDP e Dada insieme per
Internet
Le altre news
il risultato che si ottiene è disatroso: le immagini del menu vengono
automaticamente inserite al di sotto del logo e le linee stravolgendo il layout ULTIM'ORA
di pagina. FOCUS DEL GIORNO
RASSEGNA STAMPA
Senza modificare le impostazioni video, se vuoi verificare gli effetti su questa
pagina, prova a ridimensionare la finestra trascinando con il mouse.
cerca un termine
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>

l 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.

l 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.

l 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.

pagina di prova di una pagina adattabile alle impostazioni video

Un'ultima nota in conclusione: l'esempio è perfettamente funzionante con

MsIe e Netscape.

Apertura finestre indipendenti

[Sommario]

© 1997-2002 - Grafica, layout e guide sono di esclusiva proprietà di HTML.it s.r.l. | Note e informazioni legali