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

Créer des mises en page avec des éléments en positionnement absolu dans Dreamweaver

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

Découvrez comment Dreamweaver facilite la création de mises en page avancées en utilisant des éléments en positionnement absolu (PA) pour superposer du contenu.

Détails de la leçon

Description de la leçon

Dans cette leçon, nous explorons l'utilisation du positionnement absolu des éléments dans Dreamweaver. Un élément PA se positionne par rapport à son élément parent, à condition que ce parent soit lui-même positionné. Dreamweaver fournit un outil pratique sous l'onglet mise en forme dans la palette d'insertion, permettant de tracer des divisions absolues (div PA). Nous montrons comment tracer un div, ajouter des images, ajuster ses dimensions et utiliser la propriété z-index pour gérer la superposition des éléments. En configurant correctement le conteneur parent avec un positionnement relatif, nous assurons que les éléments PA se centrent correctement dans la page. Finalement, nous ajustons la hauteur de la zone de contenu pour garantir une mise en page correcte.

Cette leçon vous apportera des compétences pratiques pour produire des mises en page complexes où les éléments se superposent, une technique essentielle pour des designs web modernes et réactifs.

Objectifs de cette leçon

Les objectifs de cette vidéo sont :
- Comprendre le positionnement absolu dans Dreamweaver.
- Apprendre à utiliser l'outil de tracé de div PA.
- Gérer la propriété z-index pour la superposition des éléments.
- Assurer le centrage correct des éléments PA par la configuration de leur parent.

Prérequis pour cette leçon

Les prérequis pour cette vidéo incluent une connaissance de base de Dreamweaver et des notions de CSS et HTML.

Métiers concernés

Les professionnels suivants peuvent tirer profit de cette vidéo :
- Web designers et développeurs front-end cherchant à améliorer leurs techniques de mise en page.
- Graphistes et concepteurs d'interface utilisateur souhaitant intégrer des éléments complexes dans leurs designs.
- Étudiants en développement web.

Alternatives et ressources

Les alternatives peuvent inclure l'utilisation de logiciels tels que :
- Adobe XD pour les maquettes.
- Sketch pour la conception de l'interface utilisateur.
- Figma pour le prototypage.
- L'éditeur de texte Sublime Text ou Visual Studio Code avec des plugins spécifiques.

Questions & Réponses

La propriété z-index détermine l'ordre de superposition des éléments positionnés par rapport aux autres éléments sur la même page.
Si l'élément parent n'est pas positionné, l'élément en positionnement absolu se positionne par rapport à la balise Body par défaut.
Ceci assure que les éléments PA se déplacent et se centrent correctement en fonction de la fenêtre du navigateur, garantissant ainsi une mise en page cohérente et lisible.