Exercice n°5 Exercice n°6 Exercice n°7 Exercice n°8 Intro Html Intro Css

Mise en situation : agrémenter la structure

Reprenons le projet de site touristique franc-comtois.
Rappelons le code HTML :

<ul id="menu">
<li><a href="#">Retour à l'accueil</a></li>
<li><a href="#">Présentation de la région</a></li>
<li><a href="#">Historique Comtois</a></li>
<li><a href="#">Gastronomie locale</a></li>
<li><a href="#">Hôtels et gîtes</a></li>
<li><a href="#">Photographies</a></li>
</ul>
<h1><a href="photos.htm" title="photos de Franche Comté">Bienvenue en Franche Comté</a></h1>
<h2>Une belle région française</h2>
<p>[Paragraphe associé au sous-titre de niveau 2.]</p>
<a href="photos.htm" title="lien vers photos de Franche Comté"><img src="francheComte.jpg"></a>
<h2>Un patrimoine naturel</h2>
<p>[Paragraphe associé à cet autre sous-titre de niveau 2.]</p>
<p id="pied">Pied de page et <a href="#">Mentions légales</a></p>

Exercice n°6 :
Agrémenter la structure avec bordures et arrière-plan

Voici quelques idées :

1. Placer une discrète image d'arrière-plan derrière le titre principal.
2. Souligner les titres de niveau 2 par une bordure basse bleue d'une épaisseur de 2 px
3. Donner une couleur de fond grise au pied de page et le séparer du reste du contenu avec un trait horizontal bleu épais d'un pixel.

1-CSS) Le titre principal est doté d'un identifiant <h1 id="motif">.
Une image de fond y sera précisée par la propriété background, comprenant dans l'ordre : le chemin, la position et le mode de répétition de l'image.

La règle suivante orne le titre d'un arrière-plan répété en haut à gauche :

#motif {
background: url(motifs/nuage.png);
left top ;
}

2-CSS) Nous appliquerons aux éléments <h2> la propriété raccourcie border-bottom, on pourra préciser deux valeurs de marge interne padding :

h2 {
border-bottom: 2px solid green;
padding-bottom: 2px;
padding-top:1em;
}

3-CSS)

• Une telle séparation visuelle n'est qu'une bordure fine, que l'on applique au pied de page en sélectionnant son identifiant <p id="pied">
• la propriété background-color, ou son raccourci background, en définit la couleur de fond
• pour aérer le texte et le décoller de la bordure, c'est à nouveau un padding qu'on met en place :

#pied {
border-top: 1px solid green;
background: gray;
padding-top: 1px;
}

Résultat

• Retour à l'accueil
• Présentation de la région
• Historique de la Franche Comté
• Gastronomie locale
• Hôtels et gîtes
• Photographies

Bienvenue en Franche Comté

Une belle région française

[Paragraphe associé au sous-titre de niveau 2.]

Un patrimoine naturel

[Paragraphe associé à cet autre sous-titre de niveau 2.]

Pied de page et Mentions légales

Ouvrages de références

• « More on CSS » par Eric Meyer
  (© CampusPress), 2005.
• « CSS 2 Pratique du design web » par Raphaël Goetter
  (© Eyrolles), 2009.

Haut de page