Calculs et Mise en Page avec des Unités en Pourcentage
Objectifs
Les objectifs de cette vidéo sont d'enseigner comment :
- Intégrer une maquette Photoshop en utilisant HTML et CSS.
- Calculer et appliquer des dimensions en pourcentage.
- Utiliser des propriétés CSS pour assurer un design responsive.
Résumé
Apprenez à intégrer une maquette Photoshop en HTML et CSS en utilisant des unités en pourcentage pour un design responsive.
Description
Dans cette leçon, vous apprendrez à réaliser l'intégration d'une page web à partir d'une maquette Photoshop, en utilisant des unités de mesure en pourcentage pour assurer une mise en page fluide et responsive. L'objectif est de calculer les dimensions des éléments en pourcentage de la taille totale de la page afin de garantir que le design s'adapte à différentes résolutions d'écran. Nous aborderons les différentes étapes, depuis l'ajout d'une feuille de style CSS jusqu'à l'ajustement des éléments comme le logo, les menus, et les images. Vous découvrirez également des astuces pour éviter les déformations d'image et pour placer correctement les éléments sur la page, en appliquant des propriétés CSS comme float, margin, et padding. Nous pratiquerons sur le logo, le menu de navigation, et un slider d'images pour montrer comment chaque élément peut être positionné et dimensionné correctement.
Questions - réponses
Programme détaillé
Module 1 - Introduction video
Module 2 - Principes généraux
Module 3 - Réaliser une maquette en responsive Design
Module 4 - Maitriser l'intégration en Responsive Design
Module 5 - Le travail des textes
Module 6 - Intégrer des images optimisées
Module 7 - Une réalisation complète
Module 8 - Connaissances complémentaires
Module 9 - Conclusion
