Mise en page

Le contenu c'est bien, mais la forme aussi
Comme vous avez dû vous en apercevoir, il n'est pas très facile de construire une page qui puisse à la fois convenir à tout le monde et être très jolie, de plus le placement vertical n'est pas vraiment un point fort du langage html.

Maintenant que vous connaissez les possibilités de chaque marqueur (je plaisante rassurez-vous, mais relisez quand même les pages précédentes), il ne vous reste plus qu'à les mettre dans le bon ordre pour obtenir la page de vos rêves.

Si vous pensez que vous n'y arriverez pas, commencez donc une page avec un composeur classique et faites les retouches avec un éditeur. Pour la plus grande majorité des cas, pour un débutant, il est bien plus facile de modifier quelque chose, que de partir à zéro.


A éviter
Voici quelques petits conseils et des exemples de ce qu'il faut éviter de faire.

N'hésitez pas à diminuer la taille de la fenêtre de votre navigateur pour observer vos pages Web avec un écran plus petit (à moins que vous ne soyez déjà puni) ou à l'agrandir si elle s'ouvre bêtement avec une taille inférieure à votre écran (après tout, il serait dommage de ne pas profiter de tous vos pixels, à moins d'être un voleur, vous les avez payés jusqu'au dernier).

Il existe actuellement plusieurs stratégies de mise en page:

Si vous êtes un pauvre malheureux avec une triste résolution d'écran de 640x480, vous ne devriez pas avoir vu la moindre différence dans les exemples ci-dessus, c'est normal, c'est pour les autres que c'est gênant (vous êtes vengé), mais n'en profitez pas lâchement pour éviter le boulot nécessaire à une bonne mise en page, vous pourriez le regretter le jour où vous achetez une carte graphique ou un vrai moniteur et votre site déplaira d'emblée aux personnes délicates.

Un ridicule à qui je faisais remarquer un jour la mocheté de ses pages de 620 pixels de large (serrées à gauche) m'a répondu: "si le vide à droite ne vous plaît pas, vous n'avez qu'à diminuer la taille de votre fenêtre web"...
Que voulez-vous répondre à un argument pareil ! (le concours est ouvert, dommage que l'on ne puisse pas ouvrir aussi la chasse à ces bêtes-là), notez que c'est un peu grâce à lui que j'ai décidé d'écrire un guide HTML, ça a été la goutte d'eau qui met le feu aux poudres (ou l'étincelle qui fait déborder le vase), difficile donc de lui en vouloir....


Où ça ?
Envoyez-moi les adresses de sites encore plus débiles (pas la mienne, je la connais déjà), je les mettrai en exemple pour que tout le monde puisse en rire, NB: je n'en ai reçu que deux en deux ans, je n'arrive pas à croire qu'il y aie si peu, faites un effort les gars !

Autres points importants
On reprend le boulot: Le choix du mode d'affichage n'est pas tout, il reste aussi celui des couleurs, du placement des images et du style (là, je n'ai pas vraiment de bons conseils à donner, mais si un bon graphiste voulait bien écrire un guide et me donner son adresse. (NB: Depuis deux ans, je n'en ai pas reçu une seule, n'y a-t-il pas de bon graphistes sur le net, ou sont-ils donc tous égoïstes ?)).

Plus important encore, il vaut mieux avoir quelque chose d'intéressant à dire dans sa page et à ne pas le noyer dans la pub, sinon adieu les visiteurs...

A Eviter aussi, les trucs du style:

"Ce site est mieux vu avec le baladeur Knock-le-zout version 0.033b avec une résolution de 213x755 sous 31 couleurs 1/2 et les plug-in: camembert-z, seek-destroyII, brûle-rétines et hyperflash 999 à télécharger ici (à peine 1.5 GB supplémentaires)."

Quand vous voyez une belle page web quelque part, observez bien sa structure et n'hésitez pas à l'analyser et à la reproduire si elle vous plaît vraiment.

Il existe de très bons documents sur le web concernant le top 10 des erreurs à ne pas commettre en construisant une page web, malheureusement ils n'existent actuellement qu'en anglais (en voici un), toutefois, comme il existe beaucoup de gens bien sur Internet, le site Altavista permet de faire une traduction automatique et gratuite des documents html, cliquez ici pour la traduction.


Compréhension des sites étranger
Un petit mot sans aucun rapport avec le thème de ce document, mais qui peut bouleverser votre vie sur internet si vous ne parlez pas anglais, une recherche sur www.altavista.com peut très facilement être limitée à des document d'une langue particulière, (le français par exemple en cliquant sur "advanced search" et en changeant "any language" en "french"), mais surtout, un document de source anglaise peut être traduit gratuitement et instantanément en français d'un simple click de souris (sur le mot "translate" après une recherche).

Si la traduction dans le sens anglais/français est parfois absurde ou fumeuse, elle est la plupart du temps beaucoup plus compréhensible que rien du tout ou que la traduction automatique des notices de montres digitales japonaises.

Autre intérêt d'altavista, vous pouvez faire traduire vos pages françaises en anglais et les mettre ensuite sur votre propre site ! Dans ce sens la traduction est plus facile et donne de bien meilleurs résultats ce qui vous permet de capter une audience mondiale au lieu de rester simplement franchouillarde...

Si vous parlez anglais, ne tirez pas sur le pianiste, altavista peut aussi vous aider en traduisant des pages allemandes en anglais. Je n'ai pas essayé de faire traduire de l'allemand en anglais, puis de l'anglais en français, je me doute que le résultat doit être plus "fun" qu'utilisable, mais qui sait...

Si vous parlez anglais ET allemand, vous avez perdu votre temps en lisant les quatres derniers paragraphes, je vous présente toutes mes excuses (Quoi ? Sous prétexte que le cas est rare et que ce n'est pas le vôtre, je ne devrais pas m'en soucier ? Egoïste !).


Les horreurs du net
Retournons maintenant à nos moutons, voici un autre exemple à ne pas suivre, ce site n'est visiblement prévu QUE pour des laptops avec affichage de 640x480 (le plus petit dénominateur commun), c'est une horreur en 1024x768, et c'est pourtant celui d'un constructeur mondialement connu.

Cliquez ici pour rire (en tout cas jusqu'au 01/07/1998, ils vont peut-être en avoir honte et corriger).
Zut ! Ils ont corrigé en date du 07/08/1999 (en largeur en tout cas), dommage, c'était franchement ignoble...


Derniers conseils
Et voilà, une fois rassemblées vos images (à la bonne taille et traitées pour faire ressortir les couleurs et les contours), il ne vous reste plus qu'à dessiner une mise en page sur papier, à créer votre document, et à vous extasier du résultat, retournez voir ces quelques conseils avec un oeil neuf et l'expérience que vous avez maintenant acquise, ou encore ceux-ci bien qu'il soient déguisés.

Comment procéder ?
Vous avez peut-être maintenant une assez bonne idée de la façon de présenter vos pages, mais la façon de les réaliser n'est peut-être pas aussi claire, les pages suivantes vous apprendrons comment procéder.

RetourInfo Suite

Dernière mise à jour de cette page: 04/09/2001, visiteurs: depuis le 6 avril 2002