Images CSS et séparation fond-forme

Licence professionnelle ATC Webmestre

Alexandre NiveauFabrice Maurel

Enseignement des technologies du Web

 

Images CSS et séparation fond-forme

Notes de cours

Travail personnel

Objectifs

Pas d'exercice spécifiquement sur les images HTML : l'exercice de ce TP vise à vous entraîner à comprendre une feuille de style existante, ce qui n'est pas forcément évident (même quand il s'agit de ses propres feuilles de style !).

Exercice 1 — Site des recettes

Un corrigé de cet exercice est disponible (archive du code commenté)

Télécharger et extraire l'archive contenant l'« architecture » du site, reproduite ci-dessous :

recettes/
|-- img/
|   |-- dindePanee.jpg
|   `-- logoSite.png
|-- index.html
`-- skin/
    |-- img/
    |   |-- boissons_hover.png
    |   |-- boissons.png
    |   |-- desserts_hover.png
    |   |-- desserts.png
    |   |-- entrees_hover.png
    |   |-- entrees.png
    |   |-- iconeCommentaires.png
    |   |-- iconePrix.png
    |   |-- iconeTemps.png
    |   |-- logoCC-by-nc-sa.png
    |   |-- logoFirefox.png
    |   |-- logoUbuntu.png
    |   |-- logoW3C.png
    |   |-- plats_hover.png
    |   `-- plats.png
    `-- screen.css

Les fichiers index.html et screen.css sont vides. Il va falloir les compléter, sans changer l'organisation des fichiers.

Pour commencer, examiner la hiérarchie des répertoires ; pourquoi y a-t-il deux répertoires « img » ? À quoi servent chacun d'eux ?

  1. Ajouter du contenu à la page HTML. Elle contiendra pour l'instant
    • la bannière du site, avec son titre (par exemple « Recettes à manger »)
    • un article intitulé « Escalopes de dinde panées » avec du « faux-texte » lorem ipsum (ou une variante)
    • un menu avec des liens vers « Entrées », « Plats », « Desserts » et « Boissons »
    • un pied de page contenant deux sections ; la première, « Notice légale », indique « Code HTML et CSS en licence CC-by-nc-sa », tandis que la seconde, « Partenaires », liste le W3C, Firefox et Ubuntu.
    Vous devriez obtenir quelque chose qui ressemble à la figure suivante.
    Modèle de HTML
  2. On va ajouter deux images dans le HTML : le logo du site et l'illustration de la recette. Le résultat pourra ressembler à la figure suivante.
    Modèle de HTML
  3. À présent, on commence à compléter le fichier screen.css, après l'avoir lié depuis la page HTML. On va tout d'abord placer les gros blocs dans la page.
    • Faire en sorte que le logo apparaisse à gauche du titre du site dans la bannière.
    • Le menu doit faire 400 pixels de largeur et apparaître à gauche de l'article.
    • Réduire la largeur de l'ensemble de la page, pour que le texte de l'article ne s'étale pas trop en largeur.
    • Les deux sections du pied de page doivent apparaître côte à côte.
    On devrait obtenir quelque chose de similaire à la figure suivante.
    Modèle avec HTML et organisation des zones
  4. Modifier le CSS pour que la page ressemble au modèle suivant. On a amélioré l'affichage du titre, décalé le menu, encadré l'article, et modifié le pied de page.
    Modèle avec quelques améliorations
  5. Ajouter les logos de la licence et des partenaires depuis le CSS pour que le pied de page ressemble au modèle suivant.
    Modèle de pied de page
  6. Modifier le CSS de l'article et de son contenu pour obtenir le rendu suivant. NB : on a ajouté des coins arrondis et une ombre au cadre. NB2 : penser à aller voir les différents types de bordure avant de se compliquer la vie.
    Modèle de pied de page
  7. Copier le code suivant dans l'article, entre le titre et le contenu, sans le modifier :
    		<aside class="infos">
    			<div class="icone prix">Chère</div>
    			<div class="icone temps">Rapide</div>
    			<div class="icone commentaires">34 commentaires</div>
    		</aside>
    
    Modifier le CSS pour que l'article ressemble au modèle suivant.
    Modèle de pied de page
  8. Pour finir, utiliser une des techniques de remplacement d'image (voir notes du cours) pour remplacer les textes du menu par les images fournies, de manière à obtenir le modèle suivant. On fera en sorte que l'image change au survol des items du menu. Note : les images du menu ont été bricolées à partir de la police Kitchen Kapers II.

Exercice 2 — Reproduction d’une page simple avec des images

On vous donne une image d'une page web, version très simplifiée d'une page du site du fabricant d'instruments de musique Fender.

Capture d'écran de la page Fender Stratocaster
Capture d'écran de la page à reproduire

On vous demande de créer le code HTML et CSS permettant de reproduire ce modèle, en portant une attention particulière à la catégorisation des images : quelles sont celles qui font partie du contenu (et vont donc dans le HTML) celles qui sont purement présentationnelles (et vont donc dans le CSS), et celles pour qui c'est ambigu (et vous avez donc le choix) ?

N.B. : les choix faits sur la page originale ne sont pas forcément les bons choix ! (En l'occurrence, le code étant à première vue assez infâme, il est particulièrement déconseillé de s'en inspirer…)

Les images nécessaires et les textes sont dans cette archive. Informations complémentaires :

  • La colonne principale fait 970 pixels de largeur.
  • La couleur du texte est #333, sauf dans le pied de page où c'est #999.
  • Les bordures sont toutes de couleur #e5e5e5.
  • La couleur de fond des colonnes de détails est #f5f5f5, et elles font 180 pixels de largeur.
  • L'image de fond de la page est GlobalBackground.gif.

Il est recommandé d'utiliser l'architecture de fichiers suivante, qui permet de bien séparer le contenu et la présentation tout en restant pratique d'utilisation :

--stratocaster/
  |--index.html
  |--images/
  |  |-- …
  |  `-- …
  `--skin/
     |--screen.css
     `--images/
        |-- …
        `-- …

Efforcez-vous d'écrire du code propre, c'est-à-dire bien structuré et sémantique. D'autre part, la priorité est d'obtenir un résultat fonctionnel minimal, c'est-à-dire d'avoir une page lisible même si tous les détails de la présentation ne sont pas mis en place.

Exercice 3 — Sprites (optionnel)

Affichage des notes

Utiliser l'image suivante pour gérer l'affichage de notes sur la page du site des recettes avec la technique des sprites: Sprite étoiles. Comme toujours, on soignera la séparation fond-forme, en utilisant du remplacement d'image.

Modèle pour les notes avec CSS
Exemple de résultat avec CSS activé.
Modèle pour les notes sans CSS
Exemple de résultat sans CSS.

Créer des sprites

Créer une feuille de sprites pour l'affichage du menu. Le menu ne doit alors utiliser qu'une seule image. Vous pouvez faire analyser votre page par Sprite Me! qui peut créer vos sprites.