CATALOGUE Code & Data Formation Dreamweaver Apprendre Dreamweaver CS5 Création d'une Barre de Menu avec Effets de Rollover

Création d'une Barre de Menu avec Effets de Rollover

Réaliser un menu complet avec une seule image
Vidéo non disponible ! Réessayez plus tard
Cette vidéo fait partie de la formation
Apprendre Dreamweaver CS5
Revoir le teaser Je m'abonne
Transcription
59,90€ Je commande
Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm
DescriptionProgrammeAvis
59,90€ Je commande
Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

Guide Complet pour Créer une Barre de Menu en HTML et CSS

Objectifs

Les objectifs de cette vidéo sont :

  • Apprendre à créer une barre de menu avec des images
  • Comprendre la gestion des effets de rollover en CSS
  • Assurer l'accessibilité du menu aux navigateurs pour personnes malvoyantes

Résumé

Cette leçon détaille la création d'une barre de menu complète avec des images pour chaque onglet, intégrant des effets de rollover et des considérations d'accessibilité.

Description

Dans cette leçon, nous allons examiner comment réaliser une barre de menu complète avec des images différentes et des effets de rollover en utilisant HTML et CSS. Le processus inclut la configuration des balises OL et LI, ainsi que l'application des propriétés de style nécessaires pour l'affichage correct des images.

Nous verrons comment attribuer des identifiants uniques à chaque lien (A1, A2, A3, A4) pour définir les tailles et positions spécifiques à chaque onglet. Cette méthode est similaire à celle employée pour la barre de menu du site Apple.

La leçon aborde également l'utilisation des quatre états des liens (A-Link, A-Over, A-Visited, A-Active) pour obtenir quatre niveaux de navigation dans notre menu, et met en lumière l'importance de conserver les textes pour garantir l'accessibilité aux navigateurs pour les personnes malvoyantes.

Voir plus

Questions - réponses

Pourquoi est-il important de conserver les textes dans les balises de navigation?
Conserver les textes assure que le menu reste accessible aux utilisateurs de navigateurs pour personnes malvoyantes, leur permettant ainsi de naviguer sur le site.
Quel est le rôle des identifiants A1, A2, A3, et A4 dans la barre de menu?
Les identifiants A1, A2, A3, et A4 permettent de différencier chaque lien et d'y appliquer des propriétés spécifiques, comme la taille et les positions des images de fond lors des rollovers.
Comment se fait l'alignement des images dans les onglets du menu?
L'alignement des images se fait en spécifiant des positions précises pour les arrière-plans CSS, décalant les images de manière à les aligner correctement sous chaque onglet du menu.

Programme détaillé