Les boutons sont volontiers employés sur les pages WWW pour représenter des liens de façon graphique et attractive. Veillez toujours cependant à la quantité de données globale à charger. Pour une demie douzaine de liens, des petits boutons graphiques restent acceptables mais pas pour des douzaines de liens sur une page.
La commande HTML typique pour incorporer de tels boutons de liens est:
<a href="fichier.html"><img src="bouton.gif" border=0></a> |
Davantage de détails à ce sujet dans le chapitre graphiques en tant que liens.
Utilisez pour plusieurs boutons sur une page WWW une
palette
de couleurs uniforme dans toute la mesure du possible.
![]() ![]() |
Du texte seul à l'écran est ennuyeux et fatigant. L'il cherche de quoi se repaître. Avec des petits points, carrés, triangles et taches informelles de couleurs qui en raison de leur taille ne nécessitent que peu de mémoire, vous pouvez soutenir pour le plaisir de l'il une information texte revêche. Il est important d'observer ici que le lecteur a tendance à affecter aux puces une signification quelconque par exemple "Là où se trouve ce point bleu suit un nom de produit". Utilisez pour cette raison les puces de telle façon qu'on puisse déduire leur signification. N'utilisez pas sans arrêt des puces différentes sur une page WWW, mais répétez plusieurs fois les mêmes puces sur la page WWW. Ce n'est pas ennuyeux mais assure une belle image d'ensemble tout en réduisant le temps de chargement chez l'utilisateur, étant donné que le graphique concerné ne doit être chargé qu'une fois.
Les puces sont judicieuses par exemple dans les titres.
La commande typique pour l'incorporation est :
<h2><img src="dot.gif" align=middle> texte du titre</h2> |
Plus de détails à ce sujet dans le chapitre incorporer
des graphiques.
![]() ![]() |
HTML offre bien la possibilité d'insérer des lignes
de séparation dans le texte pour structurer plus clairement
l'information. Celui qui cependant désire proposer sur ses pages WWW quelque chose de
particulier utilise des lignes graphiques. Similaires aux puces, les barres ont
besoin de peu de mémoire. Même pour les barres la règle est valable:
n'utilisez pas sans arrêt des barres différentes sur une page WWW, mais
répétez les mêmes barres plusieurs fois par page WWW. Ce ne sera pas monotone
mais contribuera à une belle image d'ensemble tout en réduisant le temps de chargement chez
l'utilisateur, étant donné que le graphique concerné ne doit être chargé
qu'une fois.
![]() ![]() |
Les images d'arrière plan (papiers peints) sont devenues populaires sur le WWW depuis leur introduction par Netscape. Beaucoup de pages Web attrayantes utilisent des images d'arrière plan comme effet. Pourtant, aussi géniale que soit l'idée de l'image d'arrière plan, elle peut conduire à faire beaucoup de travers. Avec des images d'arrière plan qui attirent trop l'attention, l'utilisateur est trop distrait du premier plan qui est le contenu proprement dit. Dans beaucoup d'exemples négatifs sur le WWW, la lisibilité de l'information texte souffre aussi de l'image d'arrière plan.
La règle générale est la suivante: si vous voulez proposer sur une page WWW du texte important, un papier peint d'arrière plan doit être agréable mais passer inaperçu. La mise en oeuvre de graphiques d'arrière plan "excitants" ne se justifie que pour des effets graphiques particuliers.
La commande HTML typique pour incorporer du papier peint est:
<body background="fichier.gif"> |
Plus de détails à ce sujet dans le chapitre Images d'arrière plan (papier peint).
![]() ![]() |
De toutes les sortes de graphiques, c'est bien la sorte la plus importante quant au contenu. Avant tout pour des textes comme la documentation technique ou les textes scientifiques, on taxerait presque l'auteur de paresse ou d'ignorance s'il renonçait aux symboles. Car spécialement pour la lecture en ligne de texte, la plupart des utilisateurs lisent en diagonale c'est à dire qu'ils ne lisent pas calmement phrase pour phrase mais cherchent sans arrêt des possibilités d'orientation pour arriver vite à l'information désirée. À cet effet, les symboles sont une aide particulièrement précieuse.
Les symboles doivent s'orienter à des standards en vigueur. Les symboles doivent agir sur l'utilisateur de telle sorte qu'il ne perde pas un instant à s'interroger sur la signification du graphique.
![]() ![]() |
Les Cliparts sont des graphiques évocateurs le plus souvent humoristiques, qui peuvent aérer des textes plus grands en interpellant. Il est important de se servir des cliparts de telle façon qu'ils forment un complément à l'information texte environnante. De façon idéale, un graphique Clipart atteint exactement ce que mille mots n'arrivent pas à dire.
![]() ![]() |
Malheureusement les méthodes de transmission habituelles aujourd'hui sur Internet ne permettent pas encore d'afficher "occasionnellement" à l'écran un graphique magnifique mais avide de mémoire. Si vous proposez des photos de grand format ou des cartes routières sur vos pages WWW, vous ne devez jamais incorporer celles-ci directement dans vos pages. À la place, vous devez incorporer une version fortement réduite du graphique concerné. La version réduite doit être juste assez grande pour que l'utilisateur puisse décider s'il désire contempler le graphique en pleine taille ou non. Le graphique réduit doit pouvoir être cliqué et lorsqu'il l'est appeler le grand graphique. La commande typique pour cela est:
<a href="image.jpg"><img src="miniimage.gif"></a> |
Beaucoup de bons programmes graphiques permettent la réduction proportionnelle de graphiques.
![]() ![]() |
Il y a beaucoup de collections de graphiques sur le WWW, desquelles vous pouvez télécharger des images en partie gratuitement. Veillez cependant dans tous les cas aux stipulations de droits d'auteur citées par le fournisseur. Voici un choix:
Backgrounds
Texture Land
Caboodles
ClipartCom
Barry's Clipart Server
FreeArt Cliparts
Cliparts comme fichiers ZIP (répertoire FTP)
The Clipart Universe
Web Graphics & Links Collection
Free Web Page Graphics
New World Creations
![]() | |
après:![]() |
![]() |
avant:![]() |
![]() |
Serge François, 13405@free.fr