Les bannières.

Si vous trouvez une article intéressante, vous pouvez participer à sa diffusion en utilisant les boutons de partage situés ci-dessous.

Une bannière dans l'entête.

Le but d'une bannière ou d'un logo, surtout s'ils sont de nature commerciale, sont de lier un symbole à un ou plusieurs produits et doivent être suivis scrupuleusement. Si, au contraire, la bannière n'a qu'une valeur esthétique, il n'y a évidemment aucune restriction ni contrainte à respecter sauf peut-être pour l'œil du visiteur. En effet, certaine couleur ne s'harmonise pas tellement bien entre elles, en plus d'irrité l'œil elle démontre un manque de professionnalisme qui pourrait laisser croire que le contenu de la page en manque aussi. Ce qui n'est pas toujours le cas.

Suggestion : Vérifier la résolution de votre écran. Si vous travaillez avec une résolution élevée comme 1280 pixels par 1024 pixels, vérifier que votre bannière ne prend pas la moitié de l'écran en 1024 pixels par 768 pixels la résolution la plus utilisée. Chercher un compromis entre l'esthétisme et l'efficacité.

Plusieurs façon de faire :

• Avec ou sans couleur en arrière-plan avec un logo ou un texte en premier plan.
• Une image ou un calque sur la page XHTML avec toutes vos informations.
• Une image comme arrière-plan dans le CSS.

	Une bannière insérée dans le XHTML peut contenir votre signature, votre logo et tout ce qui vous plaira directement sur la bannière. Pour ce faire utiliser votre programme de retouche d'image. Cependant, une bannière insérée à partir du CSS est en réalité, un arrière-plan sur laquelle vous pouvez ajouter un logo, un texte un menu, etc.

Première méthode, avec ou sans couleur.

Il y a déjà une couleur pour body qui pourrait très bien être utiliser comme couleur pour l'arrière-plan. Dans ce cas, vous pouvez simplement insérer votre logo ou votre texte directement dans l'espace réserver pour la bannière. Vous pouvez aussi mettre la couleur de votre choix.

Exemple :

Télécharger ce logo

Copier ce qui suit sur la page XHTML :

15
16
17
18
19
20

<!--Espace réserver à l'entête -->
<div class="banniere">
 <div class="logo">
 <a href="index.html"><img src="images/logo.png" alt="Créer votre propre site" title="Bienvenue sur le site le Concepteur" width="300" height="64" /></a>
 </div>
</div>

Dans le CSS.

Copier ce qui suit à partir de la ligne 26 de votre modèle.

26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

/* Espace réserver à l'entête */
.banniere {
color:#000; */facultatif/*
background-color:transparent; */facultatif/*
width:800px;
height:200px;
margin:0;
padding:0
}

.banniere .logo{
position:aboslute;
margin:10px 0 0 30px; */Détermine le positionnement du logo/*
padding:0
}

.banniere .logo img {
border:none
}

Si vous n'avez pas de texte dans la bannière, la ligne 28 est superflue. Si vous voulez une couleur en arrière-plan différente de body, modifier la ligne 29 par background-color:#441818.

Souvent un logo est en fait, une image cliquable qui redirige les visiteurs sur la page d'accueil. Dans ce cas, le navigateur appliquera une bordure bleue par défaut. Pour la supprimer nous avons sur la ligne 43, border:none.

	Il pourrait s'avérer nécessaire, d'appliquer une bordure à une photo qui aurait un contour pâle sur un fond blanc par exemple. Dans ce cas vous n'auriez qu'à remplacer border:none; par border:1px solid #000;. Vous avez maintenant une bordure noire continue de 1px.

Deuxième méthode, un calque ou une image dans le XHTML.

Pour les besoins de la cause, vous avez quelques bannières (800px par 200px) que vous pouvez télécharger et utiliser comme bon vous semble. Cliquez sur une bannière pour l'agrandir puis Enregistrer l'image sous... et rechercher le dossier images, celui de votre site évidemment. Cela fait, renommer l'image, banniere.png.

Cliquez sur une bannière pour l'agrandir.

Dans le XHTML.

Copier ce qui suit à partir de la ligne 15 de votre modèle.

15
16
17
18

<!--Espace réserver à l'entête -->
<div class="banniere">
 <img src="images/banniere.png" alt="Créer votre propre site" title="Bienvenue sur le site le Concepteur" width="800" height="200" />
</div>

Dans le CSS.

Copier ce qui suit à partir de la ligne 26 de votre modèle.

26
27
28
29
30
31
32
33
34
35
36
37
38
39

/* Espace réserver à l'entête */
.banniere {
color:#fff;
background-color:#000;
width:800px;
height:200px;
margin:0;
padding:0
}

.banniere img {
margin:0;
padding:0
}

Vous avez remarqué qu'il y a deux parties dans le CSS pour la bannière, « .banniere » pour l'arrière-plan sous la bannière et « .banniere img » pour l'image elle-même.

La première division.

La balise div est la plus appropriée pour diviser une page, voir l'exemple ici. Chaque nouvelle division peut se voir attribuer une classe ou un identifiant unique (id) ce qui permet d'appliquer des paramètres CSS spécifiques à chacune d'entre elles.

À chaque fois que vous créez une nouvelle division, attribuez-lui toujours une largeur (width) et une hauteur (height). Si la police de caractère, la couleur ou la couleur de l'arrière-plan diffèrent de body, ajoutez ses nouveaux paramètres avec font-family, color et background. Nous verrons plus loin comment.

Puisque les navigateurs ajoutent toujours 5 pixels au conteneur par défaut, indiquez la valeur zéro (0) à margin et padding, vous pourrez modifier ses paramètres le cas échéant.

	Une "div" ou division peut avoir un "id" ou une "class". Un identifiant (id) ne peut être répété sur la même page contrairement à "class". Dans le CSS cela se traduit par les différences suivantes. Pour "id" on écrira #exemple{, mais pour "class" on écrira .exemple{.

LE CONCEPTEUR DE SITE WEB.com

Pour un site professionnel

 514 363-4169
 serge@leconcepteur.ca