Créer des sites web sans utiliser de C.M.S. peut parfois être très utile et moins lourd pour vos serveurs. Cela n'empêche en rien de faire des requêtes à des bases de données en cas de besoin. Cependant, un des principaux problèmes que j'avais rencontré à mes débuts étaient dûs à l'interface du site. A l'heure où l'ergonomie web est primordiale, il est effectivement important d'opter pour des techniques nous permettant de nous repérer dans les sites web.
Personnellement, les fils d'Ariane ne me plaisent pas spécialement. D'une part il faut réussir à les intégrer dans le graphisme du site et d'autre part, ils sont parfois strictement inutiles si le site comporte seulement 1 ou 2 niveaux de profondeur. Mais dans tous les cas, il est important de mettre en surbrillance ou tout du moins en valeur la catégorie dans laquelle vous vous situez. Par exemple, admettons que votre site soit composé d'un menu contenant 3 liens tels que "Accueil", "Services" et "Contact", il serait intéressant de savoir dans quelle rubrique vous vous situez lorsque vous vous promenez dans les pages internes du site. De ce fait, on pourrait mettre en gras la catégorie "Services" si vous êtes dans une page correspondant à cette catégorie, etc.
Ce petit effet est assez simple à réaliser et plusieurs méthodes peuvent être appliquées. Je vais vous en partager une, j'espère qu'elle vous sera utile... Il faudra que toute vos pages soient en extension .php puisque nous allons utiliser ce langage de programmation ici. Utilisez Wamp Server par exemple si vous voulez lire vos pages sur un serveur local.
Dans l'exemple, votre site se compose donc de 3 pages (accueil.php, services.php, contact.php) ainsi que d'une feuille de style en CSS liée à ces dernières (style.css par exemple). Nous allons ici utilisez le cas du Sprite CSS lorsque l'on veut créer un menu avec des boutons personnalisés (c'est le cas sur mon site par exemple : www.internet-formation.fr).
Quelques petits rappels sur le Sprite CSS... Cette technique consiste à créer un bouton en une seule image. Dans votre CSS, votre élément "a" (lien en html) prendra le haut de l'image et le "a:hover" le bas. Voyez l'exemple ci-dessous :
La partie en bleu correspond au lien normal et la partie en orange au lien au passage de la souris (a:hover en css).
Ecrivons donc l'html correspondant au menu de 3 liens de l'exemple :
<ul id="menu"> <li id="bouton-un"><a href="accueil.php">Accueil</a></li> <li id="bouton-deux"><a href="services.php">Services</a></li> <li id="bouton-trois"><a href="conseil.php">Contact</a></li> </ul>
Vous noterez que j'ai précisé un ID particulier pour chaque bouton, afin de les reprendre en CSS pour donner l'image de mon choix. Voici donc le CSS correspondant :
#bouton-un a {width:LARGEUR_DE_VOTRE_IMAGE; height:HAUTEUR_DE_VOTRE_IMAGE; text-indent:-9999px; background:url(REPERTOIRE/VOTRE_IMAGE_BOUTON_1) top; display:block;}
#bouton-un a:hover {width:LARGEUR_DE_VOTRE_IMAGE; height:HAUTEUR_DE_VOTRE_IMAGE; text-indent:-9999px; background:url(REPERTOIRE/VOTRE_IMAGE_BOUTON_1) bottom; display:block;}
#bouton-deux a {width:LARGEUR_DE_VOTRE_IMAGE; height:HAUTEUR_DE_VOTRE_IMAGE; text-indent:-9999px; background:url(REPERTOIRE/VOTRE_IMAGE_BOUTON_2) top; display:block;}
#bouton-deux a:hover {width:LARGEUR_DE_VOTRE_IMAGE; height:HAUTEUR_DE_VOTRE_IMAGE; text-indent:-9999px; background:url(REPERTOIRE/VOTRE_IMAGE_BOUTON_2) bottom; display:block;}
#bouton-trois a {width:LARGEUR_DE_VOTRE_IMAGE; height:HAUTEUR_DE_VOTRE_IMAGE; text-indent:-9999px; background:url(REPERTOIRE/VOTRE_IMAGE_BOUTON_3) top; display:block;}
#bouton-trois a:hover {width:LARGEUR_DE_VOTRE_IMAGE; height:HAUTEUR_DE_VOTRE_IMAGE; text-indent:-9999px; background:url(REPERTOIRE/VOTRE_IMAGE_BOUTON_3) bottom; display:block;}
Notez "top" et "bottom" après l'url du background, c'est ce qui permet le Sprite CSS et donc de ne montrer que la moitié haute ou basse de l'image (faites deux parties de même hauteur pour les boutons, c'est aussi bien...).
Maintenant, passons au PHP, ce qui va modifier quelque la partie html écrite pour le menu :
<ul id="menu"> <li id="<?php echo $bouton-un; ?>"><a href="accueil.php">Accueil</a></li> <li id="<?php echo $bouton-deux; ?>"><a href="services.php">Services</a></li> <li id="<?php echo $bouton-trois; ?>"><a href="conseil.php">Contact</a></li> </ul>
Ici, nous avons rendu l'ID dynamique et dépendant des variables en PHP que nous devrons déterminer. L'objectif est de donner un ID particulier si c'est la page en cours et un autre ID si une autre page est affichée. Le plus dur est donc fait en quelque sorte... Il faut maintenant faire comprendre dans chaque page qu'on se situe dans l'accueil, ou dans la page contact, etc. Pour cela, un tout petit code PHP va suffire... Pour la page "Accueil", on définira une variable ($page) pour dire qu'elle correspond à celle-ci, et de même pour les 2 autres pages.
Voici le code PHP correspondant :
<?php
$page = 1;
if ($page = 1) {
$bouton-un = "bouton-un-modif";
$bouton-deux = "bouton-deux";
$bouton-trois = "bouton-trois";
}
?>
Vous voyez que $page, que l'on définit soi-même, correspond à la page en cours. Ici c'est pour l'accueil et toutes les pages de cette catégorie. Pour la page Services et celles de sa catégorie, $page vaudra 2, etc. Il faut renouveler ceci sur toutes les pages en faisant attention aux catégories bien évidemment.
Le deuxième élément à percevoir est le "bouton-un-modif". C'est ce qui va permettre de modifier le bouton CSS puisque sur les pages dans lesquelles $page=1, le menu affichera "bouton-un-modif" comme ID pour le lien correspondant à l'accueil, au lieu de "bouton-un" comme nous l'avions défini précédemment. Sur la page Services, $page = 2 et donc ce sera $bouton-deux qu'il faudra appeler "bouton-deux-modif", en remettant "bouton-un" pour $bouton-un, et ainsi de suite...
Il ne reste donc plus qu'à ajouter 3 lignes en CSS correspond aux ID modifiés, ce qui donnera ceci :
#bouton-un-modif a {width:LARGEUR_DE_VOTRE_IMAGE; height:HAUTEUR_DE_VOTRE_IMAGE; text-indent:-9999px; background:url(REPERTOIRE/VOTRE_IMAGE_BOUTON_1) bottom; display:block;}
#bouton-deux-modif a {width:LARGEUR_DE_VOTRE_IMAGE; height:HAUTEUR_DE_VOTRE_IMAGE; text-indent:-9999px; background:url(REPERTOIRE/VOTRE_IMAGE_BOUTON_2) bottom; display:block;}
#bouton-trois-modif a {width:LARGEUR_DE_VOTRE_IMAGE; height:HAUTEUR_DE_VOTRE_IMAGE; text-indent:-9999px; background:url(REPERTOIRE/VOTRE_IMAGE_BOUTON_3) bottom; display:block;}
Ici, j'ai recopié ce qui correspond aux a:hover de chaque bouton, sauf que je l'ai appliqué aux ID correspondant en cas de modifications. Voilà le tour est joué pour le menu...
Cependant, si votre site contient d'autres pages comme des Mentions légales par exemple, il faudra préciser dans ces pages que les boutons du menu ne doivent pas être en surbrillance comme au passage de la souris. Dans ce cas, determinez un $page = 4 (si l'on se base sur notre exemple) dans lequel les ID des différentes variables correspondront aux ID d'origine (ceux determinés au début de ce tutoriel).