Une page d'accueil dynamique mais légère

A moins d'utiliser des technologies graphiques dont le coût est généralement élevé, la majorité des pages du Web se caractérisent par une impression d'uniformité : tout y est carrés, rectangles et autres lignes droites ... Les rondeurs ne sont pas courantes. Il est pourtant possible, sans outil de conception particulier, de briser cette monotonie : vous venez d'en voir un aperçu. Voilà donc une page d'accueil qui accroche le regard par une impression de graphisme élaboré. Or ... il n'en est rien ! Sa réalisation est d'une simplicité déroutante, vous allez apprendre à faire de même ci-dessous.
Le secret ? Il n'y en a pas : nous nous bornerons à utiliser ce bon vieux Html (c'est évidemment la base ...) agrémenté de règles de style pour la mise en forme et la présentation, auxquels nous ajouterons un zeste de JavaScript pour rendre le tout interactif. Pour obtenir un peu d'animation, il suffira de napper le tout d'une petite dose de gifs animés (point trop n'en faut !) et nous obtiendrons dès lors un joli menu, à déguster sans modération, ... des yeux !

Dans la page suivante, vous trouverez le "squelette" de ce menu, accompagné des règles de style propres à chaque calque utilisé. Il est intégré dans un calque-mère (auquel nous avons attribué l'identité fond dans cet exposé) encadré d'une marge rouge afin de l'identifier plus facilement.

En voici les règles de style :

position:relative; width:760px; height:460px; text-align:center; background-image:url(images/fond.gif)

Il peut être placé en position:relative mais aussi en position:absolute . J'ai choisi la première solution et, afin de centrer correctement le tout (en fonction d'une résolution d'écran (ou fenêtre) de 800x600 mais bien entendu compatible au delà), il faut encore régler un dernier détail. Il faudra insérer quelques règles de style destinées à la balise body de la manière suivante :

{margin-top : 0 ; text-align : center ; overflow : auto}

La règle overflow:auto est destinée à supprimer automatiquement l'ascenseur à partir de la fenêtre (ou résolution ...) prévue à l'origine pour un affichage de 800 x 600 pixels. La présence de cette règle peut surprendre mais il faut savoir (si vous ne le savez déjà ...) qu'Internet Exploseur est loin d'implémenter toutes les règles des CSS2. Mozilla offre l'avantage d'éliminer automatiquement l'ascenseur dès qu'il se révèle inutile alors que son concurrent exige cette règle particulière. La barre de défilement deviendra visible si la hauteur disponible de la fenêtre est inférieure aux 460 pixels du calque-mère, quel que soit le navigateur utilisé.

Commençons donc une page d'accueil très économique (en octets ) où les moyens utilisés sont simples :

Voyons dans quel ordre et par quels moyens elle sera réalisée :

Tracez un fond d'écran où, avec un peu d'imagination et les quelques outils proposés par tout logiciel de retouche graphique acceptable (Draw, Paint Shop Pro, The Gimp, Photoshop, etc), vous obtiendrez un résultat suffisant. Dans cet exemple : une couleur de fond (gris-vert) sur laquelle on trace un calque elliptique. Toute la partie droite sera alors "remplie" de couleur dorée. Vous mettrez ensuite l'ensemble en relief grâce à l'outil bouton en prenant soin "d'effacer" ce relief sur la partie gauche du fond. Il vous restera enfin à tracer et colorer un nouveau calque elliptique (ici en noir) destiné à recevoir les fenêtres appelées par les liens. Pour terminer, vous le convertirez au format gif afin d'en limiter le "poids".
Faites de même avec les différents boutons et/ou bannières qui serviront de liens.
Installez le JavaScript que vous avez déjà vu dans les exposés précédents (affiche et efface) en tête de page (dans le head) ou dans un fichier externe. Dans ce dernier cas, n'omettez pas d'écrire, toujours dans le head, le lien qui l'appelera en même temps que la page, lors du chargement de celle-ci.
Ecrivez vos règles de style pour le fond d'écran puis celles des boutons, bannières et liens que vous y répartirez afin d'obtenir un effet d'ensemble harmonieux. Installez déjà les codes (en code source, évidemment) afin de les afficher, voir l'effet obtenu et corriger éventuellement, comme ceci par exemple :
<div id=fond>
<div id=ban1><a href="page1.htm" onmouseover="javascript:affiche('fen1')" onmouseout="javascript:efface('fen1')"><img src="ban1.jpg"></a></div>
<div id=ban2><a href="page2.htm" onmouseover="javascript:affiche('fen2')" onmouseout="javascript:efface('fen2')"><img src="ban2.jpg"></a></div>
<div id=ban3><a href="page3.htm" onmouseover="javascript:affiche('fen3')" onmouseout="javascript:efface('fen3')"><img src="ban3.jpg"></a></div> etc ...
</div>
Installez vos textes et/ou images dans les balises des calques qui seront affichés dans la fenêtre centrale lors de leur appel par les liens évoqués ci-dessus. Dans notre exemple, ces calques ont pour nom fen1, fen2, fen3, etc. Ces lignes peuvent être écrites hors du calque-mère, cela n'a aucune importance puisqu'elles sont cachées lors du chargement de la page. Attention : Il ne faudra pas dépasser l'espace interne de la fenêtre ! Pour éviter tout débordement, installez provisoirement un fond de couleur dans celle-ci et vérifiez régulièrement au moyen de votre navigateur pendant ces préparations : des retouches (des éléments et/ou objets intégrés) seront sans doute nécessaires. L'essentiel est d'y placer ce qu'il faut pour attirer le visiteur "à l'intérieur" : pas plus, pas moins ...
Créez votre feuille de style (si ce n'est déjà fait) en fonction du fond d'écran que vous aurez réalisé et de l'emplacement choisi pour les bannières, boutons et liens. Une couleur de fond est inutile sauf pour les calques qui seront affichés dans la fenêtre centrale. En effet, ils sont destinés, au moins partiellement dans cet exemple, à se superposer au texte déjà affiché au chargement de la page. Lors du passage du curseur sur un lien, les calques appelés doivent occulter ce texte et lors du déplacement du curseur hors de la zone "cliquable", le texte d'origine doit réapparaître. Bien entendu, cette couleur de fond doit être la même que celle qui couvre la lucarne elliptique sans quoi l'effet escompté serait moins esthétique.

Il ne reste plus maintenant qu'à admirer l'effet obtenu. Si vous avez bien suivi, correctement "placé" vos calques grâce aux règles de style, fermé ceux-ci sans en oublier un seul et judicieusement agencé le tout, le résultat devrait être à la mesure de vos attentes. Si ce n'est pas le cas, sur le métier remettez votre ouvrage !
Si vous êtes impatient, un peu découragé car décu, passez donc en page suivante : vous y trouverez le "squelette" de mon exemple, cela vous aidera davantage.