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


Home » Tips

Tips


Aprire una finestra in una determinata posizione del monitor

Inserire <HEAD> e </HEAD> il seguente codice:

<SCRIPT type="text/javascript">
function openwindow()
{
window.open("url","titolo","width=larghezza,height=altezza,top=valore left=valore")
}
</SCRIPT>

Per posizionare la finestra si attribuisce un valore numerico a top (distanza dall'alto) e a left (distanza dal lato sinistro del monitor). Fatto questo si crea il link nella pagina web con il codice:

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

in alternativa al link possiamo creare un bottone:

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

Commenti al codice Html

Può risultare utile inserire dei commenti al codice Html specialmente nel caso in cui più persone sviluppano una stessa pagina. Questi commenti devono rimanere nascosti al browser e per farlo è sufficiente inserirli tra:

<!--Commenti nascosti al browser-->

Distanziare le lettere l'una dall'altra

Il linguaggio HTML ci permette di inserire soltanto uno "spazio" da tastiera; quindi, per inserire più spazi bisogna utilizzare il carattere speciale: &nbsp;

Commenti ai Link

È possibile definire un commento alternativo ai collegamenti ipertestuali tramite il tag TITLE="commento". TITLE funziona allo stesso modo di ALT per le immagini; il commento viene visualizzato quando si passa con il puntatore del mouse sopra il link. Esempio:

<A HREF="http://www.gdesign.it" TITLE="Principi di Web Design by GDC">GDesign.it</A>

Risultato: GDesign.it (passare con il mouse sopra il link)

Eliminare la linea tratteggiata che circonda i link in Internet Explorer

In Internet Explorer i link attivi sono circondati da una linea tratteggiata; per eliminarla è sufficiente utilizzare il codice:

<A HREF="http://www.gdesign.it" onFocus="this.blur()">GDesign.it</A>

A questo proposito vi ricordiamo che se si utilizzano delle immagini che sono anche dei link queste presenteranno un bordo blu. Per eliminarlo basta utilizzare BORDER="0" nel tag IMG.

Inserire l'orario corrente

Per inserire l'orario corrente basta utilizzare il seguente codice all'interno della pagina web:

<SCRIPT type="text/javascript">
var d = new Date()
document.write(d.getHours())
document.write(".")
document.write(d.getMinutes())
document.write(".")
document.write(d.getSeconds())
</SCRIPT>

Menu di collegamento

In alcuni casi è utile inserire nelle proprie pagine web un menu a discesa che contenga una serie di link come questo:

Il codice da utilizzare per creare questo tipo di menu è:

<FORM>
<select onchange ="window.open(this.options[this.selectedIndex].value,'blank')">
<option>Scegli.....</option>
<option value="Url1">Link1</option>
<option value="Url2">Link2</option>
<option value="Url3">Link3</option>
</select>
</FORM>

Si possono inserire tanti <option value> quanti ne servono. I link vengono aperti in una nuova finestra del browser, quindi è preferibile utilizzare questo menu per i collegamenti esterni al proprio sito web.

Effetto Fade sulle immagini

Premesso che questo effetto funziona solo con Internet Explorer, può risultare interessante utilizzarlo per alcune immagini delle proprie pagine web.
Per vedere l'effetto bisogna passare il puntatore del mouse sull'immagine:

Fade banner

Innanzitutto bisogna inserire tra <HEAD> e </HEAD> il codice contenuto nel file:scritpfade.js. Quindi aggiungere all'interno del tag <IMG>:

style='filter:alpha(opacity=50)'
onmouseover
='nereidFade(this,100,60,15)'
onmouseout='nereidFade(this,45,75,15)'

Per personalizzare l'effetto è sufficiente agire sui valori numerici di opacity e nereidFade.

Mantenere fisso lo sfondo di una pagina web

Se si vuole inserire un immagine di sfondo ad una pagina web e si vuole che questa non venga "scrollata" assieme alla pagina basta inserire tra i tag <HEAD> il codice:

<STYLE type="text/css">
body
{
background-image:url_immagine_di_sfondo;
background-attachment:fixed;
}
</STYLE>

» Vai alle prossime quattro 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: 1