Fiche N°3 - Mettre un bandeau en haut des pages

Objectif : Mettre un bandeau en haut de vos pages

Créer un bandeau en dégradés et l’envoyer sur le site

• En utilisant le gimp ou tout autre programme de traitement d’images, créez une image de 1 pixel de large sur 90 pixels de haut. Vous pouvez par exemple créer un dégradé.
• Sauvegardez cette image dans le répertoire squelettes/css/img en l’intitulant "bandeau.png". [1]
• Dans le fichier perso.css nous allons définir la taille du div de classe header [2] et lui donner bandeau.png pour fond : .header { height: 90px; margin: 0; background : url('img/bandeau.png') repeat-x; }

Remplacer le bandeau précédent par une couleur unie

• Il nous suffit de modifier la ligne background du div bandeau : .header { height: 90px; margin: 0; background : #NNNNNN; }

Remplacer le bandeau précédent par une photo

• Faire un bandeau avec le GIMP, dimension (donnée ici à titre indicatif) : 900x90 px
• Sauvegarder le fichier en jpg, toujours dans le répertoire squelettes/css/img, en lui donnant comme nom de fichier : bandeau-photo.jpg [3]
• Remplacer le code précédent par : .header { height: 90px; margin: 0; background : url('img/bandeau-photo.jpg'); }

ATTENTION : Cette dernière solution présente l’inconvénient de générer des pages nettement plus lourdes, le temps de chargement risque d’être plus important.