Création d'une Carte Image avec Dreamweaver

Découvrez comment utiliser Dreamweaver pour créer des cartes images cliquables avec des zones de lien spécifiques.

Détails de la leçon

Description de la leçon

Après avoir appris à effectuer des liens internes, cette leçon se concentre sur la création de cartes images, aussi appelées image maps, en utilisant Dreamweaver. Une carte image permet de rendre cliquables différentes sections d'une image. Cela est particulièrement utile pour les descriptions interactives d'objets comme une guitare.

Nous allons créer une page de description pour une guitare avec une image préparée et trois sections distinctes : la tête, le manche et la caisse. En cliquant sur chaque section, l'utilisateur verra une nouvelle page dédiée. La leçon inclut des instructions détaillées sur l'utilisation des outils de Dreamweaver pour définir des zones cliquables et attribuer des liens appropriés, ainsi que la manière de définir des attributs pour l'accessibilité et la compatibilité avec différentes versions de DTD.

Objectifs de cette leçon

Les objectifs de cette vidéo sont d'enseigner:
- La création et l'utilisation de cartes images avec Dreamweaver.
- L'intégration de zones cliquables sur une image.
- La gestion des liens pour une meilleure accessibilité et compatibilité.

Prérequis pour cette leçon

Pour suivre cette vidéo, il est recommandé d'avoir:
- Une connaissance de base de Dreamweaver.
- Des compétences en HTML et CSS.
- Une compréhension de la gestion des liens et des propriétés des images.

Métiers concernés

Les compétences abordées dans cette leçon sont applicables aux métiers tels que web designer, développeur front-end et spécialiste UX/UI.

Alternatives et ressources

Comme alternatives à Dreamweaver, vous pouvez utiliser Adobe Photoshop pour préparer vos images et des éditeurs de code comme Visual Studio Code ou Sublime Text pour coder manuellement les cartes images.

Questions & Réponses

Les outils utilisés incluent les icônes de flèche pointeur noir, carré, cercle et zone de polygone pour dessiner des zones cliquables sur une image.
L'attribut 'target=_blank' n'est pas compatible avec la DTD stricte. Il faut modifier le type de DTD en DTD transitionnelle pour être en conformité.
Il faut utiliser la balise IMG et spécifier que celle-ci n'a pas de bordure en réglant l'attribut border à zéro.