CATALOGUE Code & Data Formation Dreamweaver Apprendre Dreamweaver CS5 - Formation Complète

Création d'un Menu Rollover avec Images

Retour à la formation
Chapitre 4 Leçon 2
Précédent
Suivant

Cette leçon vous apprendra à intégrer un effet de rollover utilisant des images dans un menu CSS avec Dreamweaver.

Détails de la leçon

Description de la leçon

Après avoir créé un menu avec du texte uniquement, nous aborderons la réalisation d'un menu avec un effet de rollover incluant des images. Lorsque le pointeur de la souris survolera le texte du menu, l'arrière-plan changera d'aspect, grâce à une image spécifique.

Nous discuterons des limitations du CSS en matière de préchargement d'images et proposerons une solution en utilisant une seule image comportant les deux états visuels (inactif et actif). Pour ce faire, nous configurerons les propriétés display et float dans CSS pour obtenir l'effet souhaité. Ensuite, nous appliquerons la règle background-position pour gérer le changement visuel lors du rollover.

Cette leçon pratique inclut des étapes détaillées sur l'utilisation de Dreamweaver pour modifier les propriétés de style et appliquer les images, garantissant ainsi une bonne compréhension et une application efficace des concepts appris.

Objectifs de cette leçon

Les objectifs de cette vidéo sont :

  • Apprendre à créer des effets de rollover avec des images en CSS.
  • Comprendre les limitations de préchargement d'images avec CSS.
  • Utiliser Dreamweaver pour configurer les propriétés et les styles CSS nécessaires.
  • Optimiser l'expérience utilisateur en évitant les délais de chargement d'images.

Prérequis pour cette leçon

Les prérequis pour suivre cette vidéo sont :

  • Connaissances de base en HTML et CSS.
  • Expérience préalable avec Dreamweaver recommandée.
  • Notions fondamentales de design web et d'intégration.

Métiers concernés

Les métiers et usages professionnels liés à ce sujet incluent :

  • Développeur web front-end.
  • Web designer.
  • Intégrateur web.
  • Graphiste multimédia.

Alternatives et ressources

Des alternatives à Dreamweaver incluent :

  • Sublime Text avec des plugins adaptés pour le développement web.
  • Visual Studio Code avec extensions CSS et HTML.
  • Atom avec des packages de support CSS et HTML.

Questions & Réponses

L'utilisation de deux images distinctes peut conduire à des délais de chargement visibles pour l'utilisateur, gênant l'expérience de navigation.
Les propriétés float: left et display: block sont utilisées pour modifier l'agencement des éléments du menu en horizontal.
On utilise la propriété line-height avec une valeur égale à la hauteur du bouton pour centrer verticalement le texte.