C'est plus joli, c'est sûr, mais si votre page met 10 minutes à se charger, les visites risquent d'être de courte durée. Alors :Les Tables.
- Mentionnez TOUJOURS la taille des images avec WIDTH= et HEIGHT= sinon le navigateur attendra d'avoir chargé l'image avant d'afficher le texte qui suit.
- Si l'image est nécéssaire (par exemple pour une image map), utilisez plutôt un GIF entrelacé pour que le visiteur puisse se faire une idée de l'image assez vite.
- Sachez aussi, qu'en général, les images de petites dimensions prennent moins de place en GIF qu'en JPEG mais que c'est l'inverse pour les images de dimensions importantes.
- En général, essayez de faire en sorte que le navigateur charge les images en dernier après avoir affiché le texte (par exemple sur ma page d'accueil, la partie qui s'occupe du chargement des images se trouve à la fin du fichier).
Elles permettent d'être certain du résultat qui sera affiché, mais le navigateur attend d'avoir chargé tout ce qui est contenu dans la table (TOUTE la table) avant de l'afficher (c'est pour ça que le résultat des recherches avec hotbot est si long à afficher). Donc évitez les tables de trop grande taille ou utilisez plusieurs tables de même largeur mais contenant moins de lignes. Essayez aussi de mentionner la taille des cases quand c'est possible, ça accélère un peu. Enfin, sachez que les tables occupent beaucoup de place en mémoire (par exemple, avec Netscape Communicator 4.03, il faut presque 2 minutes pour afficher une page contenant une table de 1Mo qui est sur le disque dur et une fois la table affichée, Netscape occupe 18,6Mo de mémoire (contre 4,2 avant), no comment).
Testez votre page.
JavaScriptSi vous faites votre page sous Windows, vérifiez bien que les noms de fichiers sont écrits exactement de la même façon que dans l'explorateur. Pour Windows95 et NT TrUc.HtMl et truc.html sont un même fichier. Sous Unix, et donc pour la plupart des serveurs Web, ce sont deux fichiers différents.
Testez toujours votre page avec Netscape version 3 (c'est avec lui qu'on a le plus de mauvaises surprises, Internet Explorer faisant (en général) uniquement ce qu'on lui demande (mais testez quand même avec les deux, c'est plus sûr). Par exemple, si vous avez le texte suivant : <TABLE WIDTH=200 CELLSPACING=0 CELLPADDING=0 BORDER=0> <TR> <TD WIDTH=200 COLSPAN=2><IMG SRC="../../img/moin.gif" WIDTH=200 HEIGHT=150 BORDER=0></TD> </TR> <TR> <TD WIDTH=150>La vous avez un texte de plusieurs lignes.</TD> <TD WIDTH=50><IMG SRC="../../img/moin.gif" WIDTH=50 HEIGHT=90 BORDER=0></TD> </TR> </TABLE>Internet Explorer vous fera une table exactement de la taille que vous avez demandé, alors qu'avec Netscape la première case de la deuxième ligne ne sera pas assez large.)
La Preuve :
La vous avez un texte de plusieurs lignes.
On peut faire des trucs super avec, d'ailleurs je vous file un script pour faire de zolis dégradés de couleurs sur les textes. Vous l'insérez dans la partie <HEAD></HEAD>.
<SCRIPT LANGUAGE="JavaScript"> <!-- On cache function Gradient(StartColor,EndColor,Text) { Hex = new Array("0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F","F"); var rs,gs,bs,re,ge,be,rm,gm,bm; var i = j = 0; var Tmp = ""; var Textlength = 0; /* Recuperation des couleurs */ Tmp = StartColor.charAt(0)+StartColor.charAt(1); rs = parseInt(Tmp,16); Tmp = StartColor.charAt(2)+StartColor.charAt(3); gs = parseInt(Tmp,16); Tmp = StartColor.charAt(4)+StartColor.charAt(5); bs = parseInt(Tmp,16); Tmp = EndColor.charAt(0)+EndColor.charAt(1); re = parseInt(Tmp,16); Tmp = EndColor.charAt(2)+EndColor.charAt(3); ge = parseInt(Tmp,16); Tmp = EndColor.charAt(4)+EndColor.charAt(5); be = parseInt(Tmp,16); /* Calcul des multiplicateurs */ /* Calcul de la taille du texte en tenant compte des caracteres speciaux */ while (i < Text.length) { if (Text.charAt(i) == "&") { j = i+1; if (Text.charAt(j) != " ") /* Au cas ou ce soit un & seul (meme si c'est une faute en HTML */ /* Comme il n'y a pas de caracteres speciaux de 9 lettres, c'est qu'il manque le ; */ { while ((Text.charAt(j) != ";") && (j < i+10) && (j < Text.length)) j++; if (j < i+10) i=j; } } i++; Textlength++; } rm = (re-rs)/(Textlength) gm = (ge-gs)/(Textlength) bm = (be-bs)/(Textlength) /* Affichage */ for (i = 0, Textlength = 0; i < Text.length; i++, Textlength++) {document.write("<FONT COLOR=#") document.write(Hex[Math.floor((rs+Textlength*rm)/16)]) document.write(Hex[Math.floor((rs+Textlength*rm)%16)]) document.write(Hex[Math.floor((gs+Textlength*gm)/16)]) document.write(Hex[Math.floor((gs+Textlength*gm)%16)]) document.write(Hex[Math.floor((bs+Textlength*bm)/16)]) document.write(Hex[Math.floor((bs+Textlength*bm)%16)]+">") if (Text.charAt(i) == "&") { j = i; Tmp = ""; if (Text.charAt(j+1) != " ") { while ((Text.charAt(j) != ";") && (j < i+10) && (j < Text.length)) { Tmp+= Text.charAt(j); j++; } if (j < i+10) { i=j; document.write(Tmp+";"); } else document.write(Text.charAt(i)); } } else document.write(Text.charAt(i)); document.write("</FONT>"); } } //--> </SCRIPT>et pour l'utiliser :<SCRIPT LANGUAGE="JavaScript"> <!-- On cache Gradient("couleur début","couleur fin","texte") //--> </SCRIPT> <NOSCRIPT> texte </NOSCRIPT>