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

Optimiser la Mise en Page avec CSS et Dreamweaver

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

Améliorer l'apparence de votre site web en ajustant le logo, le copyright, et en ajoutant des arrière-plans avec CSS et Dreamweaver.

Détails de la leçon

Description de la leçon

Dans cette leçon, vous apprendrez à perfectionner la page web précédemment créée en utilisant des techniques avancées de CSS avec Dreamweaver. Nous débuterons par le décalage du logo vers la droite pour un alignement optimal, suivi de modifications sur la taille et la position du texte de copyright afin qu'il s'intègre harmonieusement dans la zone de pied de page. Ensuite, nous centrerons toute la structure de la page, plaçant un arrière-plan global et un fond dégradé gris pour la zone d'en-tête. En manipulant les marges et les paddings, vous découvrirez leurs effets sur le positionnement et l'apparence de vos éléments web, en particulier les différences et avantages d'utiliser padding au lieu des marges pour une meilleure compatibilité avec d'anciens navigateurs comme Internet Explorer 6.

Enfin, vous apprendrez à centrer la composition en enveloppant le contenu de la page dans une balise DIV avec une largeur fixe et des marges automatiques, et à ajouter un arrière-plan personnalisé à l'aide de la balise HTML pour des nuances supplémentaires. Chaque étape est suivie de démonstrations pratiques pour une compréhension complète.

Objectifs de cette leçon

Les objectifs de cette vidéo incluent :

  • Déplacer et aligner des éléments avec précision en utilisant CSS.
  • Optimiser l'intégration et la gestion des paddings et des marges.
  • Appliquer et contrôler les arrière-plans de page et de sections spécifiques.
  • Centrer efficacement des éléments et des structures de page dans un navigateur.
  • Solutions aux problèmes fréquents de compatibilité.

Prérequis pour cette leçon

Pour suivre cette vidéo, il est recommandé d'avoir des notions de base en CSS et en utilisation de Dreamweaver.

Métiers concernés

Usages professionnels :

  • Web Designer
  • Développeur Front-End
  • Intégrateur Web
  • UI/UX Designer

Alternatives et ressources

Alternatives possibles :

  • Visual Studio Code avec les plugins CSS.
  • Adobe XD pour le design et le prototypage.
  • Brackets ou Sublime Text pour l'édition de code.

Questions & Réponses

En ajustant les paddings et marges en CSS, on peut déplacer le logo afin qu'il soit parfaitement aligné avec les autres éléments de la page.
Le padding s'applique à l'intérieur des bordures de l'élément, permettant de conserver les couleurs et le style, contrairement à la margin qui reste transparente.
Enrober la composition dans une balise DIV, attribuer une largeur fixe, et appliquer des marges automatiques à droite et à gauche.