Images et backgrounds

Jean-Marc Lecarpentier

 

Images et backgrounds

Nous avons beaucoup parlé de la séparation entre le contenu et la mise en page avec XHTML et CSS. Il est temps de mettre ces principes en pratique avec des techniques classiques pour les web designers avertis, permettant d'avoir des pages mieux indexées et plus accessibles.

Points essentiels

  • Images et élément figure
  • Titres et images
  • Images de fond
  • CSS Sprites

Travail personnel

L'objectif du TP est de réaliser étape par étape une page complète en appliquant les principes vus en cours.

Exercice 1

Réaliser une page simple avec 6 images placées dans des éléments figure. Réaliser ensuite une feuille de style CSS pour faire en sorte que les légendes des images soient masquées en général et apparaissent au dessus de l'image quand la souris passe sur l'image (voir un exemple sur un article du journal Le Monde)

Exercice 2

Partie 1 : images de contenu vs. présentation

En utilisant les images contenus dans cette archive, organiser vos répertoires pour séparer les images de fond et de présentation pour réaliser la page web suivante
Page à réaliser

Partie 2 : menu

Réaliser le menu de gauche (cf. le cours sur les éléments flottants) avec un élément ul, pour obtenir :
Page avec menu

Partie 3 : titres et images

Créer des images pour la bannière de haut de page et les items du menu (ou utiliser les images de cette archive), et les intégrer en images de fond, par exemple :
Page avec menu en images

La page doit être accessible sans images et sans CSS :
Page avec menu en images, CSS désactivée

On pourra faire de même pour faire des liens sur les logos des partenaires en utilisant des images de fond.

Partie 4 : titres et images suite

Créer d'autres images et modifier la CSS pour simuler des rollovers sur les items du menu :
Page avec menu en images et rollovers

Partie 5 : Gérer les positions des images

Utiliser l'image suivante pour gérer l'affichage des notes avec la technique des CSS Sprites.

Sprite étoiles

On obtient le résultat : étoiles et sprites

On obtient sans les CSS : étoiles et sprites sans CSS.

Partie 6 : Créer un Sprite

Créer un Sprite 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.

Exercices complémentaires

Refaire les menus de navigation des sites suivants avec des sprites:

Documents

Lectures complémentaires

Outils

 
Tim Berners Lee, créateur de HTTP et HTML. A l'origine du Web, il dirige maintenant le W3C C'est avec Mosaic, premier navigateur graphique que le web pris réellement son essor en 1993 CSS Zen Garden, démonstration de la puissance de CSS Firebug, l'outil indispensable du développeur web
 
Fermer