Gdesign.it :: Come progettare siti web accessibili ed efficaci ::


Home » Tips

Tips


Width e Height

Width e Height sono gli attributi del tag IMG che permettono si specificare la larghezza e l'altezza di un'immagine. Il consiglio è quello di usarli sempre nel tag IMG, perché i browser prima interpretano il codice HTML e visualizzano il testo e soltanto dopo mostrano le immagini. Quindi, se non diciamo ai browser quanto spazio servirà per le immagini, può capitare che il testo venga riposizionato dopo che le immagini vengono caricate e questo implica un maggiore tempo di attesa per la visualizzazione completa di una pagina web.

Puntatore del mouse sui link

Si può modificare l'aspetto del puntatore del mouse quando questo è posizionato sui link. Questo è possibile perché a partire dalla versione 4 di Internet Explorer è stata implementata la proprietà CSS cursor. Il codice da utilizzare è:

<A HREF="Inserire Url" STYLE="cursor: auto">Link</A>

Al posto di "auto" si possono inserire i seguenti valori:

crosshair, default, hand, help, move, e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize e text.

Provate a passare con il mouse sopra ad ognuna delle voci sopra elencate e ne vedrete l'effetto.

Questa è una proprietà implementata da Internet Explorer, quindi non è assicurato il funzionamento con altri browser. Ad esempio Netscape Navigator 4.72 ed Opera 6.01 ignorano questa proprietà al contrario di Netscape Navigator 7.0 che la supporta.

Chiudere la finestra del browser con click

Per chiudere la finestra del browser con un solo click si può utilizzare questo codice:

<A HREF="javascript:self.close()">Chiudi finestra</A>

Con Internet Explorer vi comparirà una finestra che vi chiede la conferma per la chiusura (tranne che la finestra da chiudere è stata aperta per mezzo di javascript come nel caso di una finestra popup che si apre al caricamento della pagina). Con Netscape Navigator e Opera, invece, la finestra verrà chiusa senza alcun bisogno di conferma.

Stampare una pagina web con click

Si può stampare una pagina web con semplice click utilizzando il codice:

<A HREF="#" onClick="window.print();return false">Stampa</A>

Funziona correttamente con Internet Explorer, Netscape Navigator ed Opera.

Immagine di sfondo

Se si utilizza un'immagine di sfondo (background) bisogna considerare che questa non deve essere troppo grande ma nemmeno troppo piccola. Ad esempio una GIF di 2x2 pixel è molto leggera e verrà scaricata subito, ma richiede al browser un processo lungo per visualizzare le immagini affiancate sullo schermo.
Inoltre il procedimento di visualizzazione non rimane nella cache del browser come l'immagine, ma viene ripetuto ogni volta. Conviene allora prestate molta attenzione alla scelta dell'eventuale immagine di sfondo, ricordandosi anche che non deve influenzare in modo negativo la leggibilità delle pagine web.

Aprire una finestra dalle dimensioni predefinite

Se vogliamo aprire tramite un link una finestra dalle dimensioni predefinite basta inserire tra <HEAD> e </HEAD> il seguente codice:

<SCRIPT language="JavaScript">
function apri(){open('Url del file da aprire','titolo', 'height=360 width=400', 'toolbar=1, scrollbars,resizable');}
</SCRIPT>

e dopo creare un link nella pagina web utilizzando il codice:

<A HREF=javascript:apri()>Apri finestra</A>

Possiamo modificare il codice tra <HEAD> e </HEAD> per personalizzare la finestra che vogliamo aprire:

height e width sono l'altezza e la larghezza in pixel;se toolbar=1 avremo una finestra con la barre degli strumenti, se invece è uguale a zero non avremo la barra degli strumenti; se togliamo scroolbar la finestra non avrà le barre di scorrimento (né verticali, ne orizzontali); se togliamo resizable la finestra non potrà essere ridimensionata.

Aprire pił finestre con un solo click

Per aprire diverse finestre con un solo click inseriamo tra <HEAD> e </HEAD> il codice:

<SCRIPT language="JavaScript">
function openwindow()
{
window.open("http://www.dominio.suffisso/")
window.open("http://www.dominio.suffisso/")
}
</SCRIPT>

e dopo creiamo un link nella pagina web utilizzando il codice:

<A HREF= javascript:openwindow()>Apri finestre</A>

in alternativa al link possiamo creare un bottone:

<FORM>
<input type=button value="Apri finestre" onclick="openwindow()">
</FORM>

Per aprire un collegamento in una nuova finestra del browser si inserisce target="_blank" nel tag <A HREF>. Se vogliamo che tutti i collegamenti contenuti in una pagina web puntino ad una nuova finestra del browser possiamo inserire tra <HEAD> e </HEAD>:

<BASE target="_blank">

Fatto questo non abbiamo bisogno di specificare nulla in <A HREF>.

Aprire un collegamento in una nuova finestra

Per aprire un collegamento in una nuova finestra del browser si inserisce target="_blank" nel tag <A HREF>. Se vogliamo che tutti i collegamenti contenuti in una pagina web puntino ad una nuova finestra del browser possiamo inserire tra <HEAD> e </HEAD>:

<BASE target="_blank">

Fatto questo non abbiamo bisogno di specificare nulla in <A HREF>.

Linea Orizzontale

Esiste un tag in Html che ci consente di inserire una linea orizzontale:<HR> Si possono specificare alcuni attributi per <HR> come:la larghezza con width="valore in pixel o percentuale";
l'altezza con size="valore in pixel"
il colore con color="valore_esadecimale"
l'allineamento con align="left, center o right";
l'ombreggiatura con noshade.
Se si inserisce solo <HR> si ottiene una linea orizzontale larga quanto la pagina.

» Vai alle prossime nove tips
» Torna all'indice delle tips

^Top


Home:: Html:: Principi:: How To:: Download:: Tips:: Link:: Collabora:: Partners:: News&Updates:: Contatto:: Info

© 2001 - 2006 Giuseppe Di Carlo :: Riproduzione vietata ::

Utenti on line: 3