Introduction video
Principes généraux
Réaliser une maquette en responsive Design
Maitriser l'intégration en Responsive Design
Le travail des textes
Intégrer des images optimisées
Une réalisation complète
Connaissances complémentaires
Conclusion
Détails de la leçon
Description de la leçon
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.
Objectifs de cette leçon
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.
Prérequis pour cette leçon
Pour suivre cette vidéo, vous devez avoir des notions de base en HTML et CSS et savoir comment utiliser Photoshop ou tout autre outil de design graphique.
Métiers concernés
Ce sujet est pertinent pour des métiers tels que :
- Développeur web
- Designer web
- Intégrateur HTML/CSS
Alternatives et ressources
Si vous ne disposez pas de Photoshop, des alternatives comme GIMP, Sketch, ou Figma peuvent être utilisées pour créer et manipuler des maquettes graphiques.
Questions & Réponses
Je m'abonne