Créer une page web interactive depuis une maquette Photoshop avec HTML5 et CSS

Travailler avec une grille fluide

Testez gratuitement nos 1300 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Apprenez à travailler avec une grille fluide de 12 colonnes et déterminez la largeur en pourcentage de vos éléments.

Transcription

Dans cette vidéo, nous allons commencer la mise en place des styles CSS de notre en-tête, de notre zone de header. Alors, rappelez-vous que notre header est composé de deux grandes zones, et si je retourne au niveau de mon code HTML, eh bien, ces deux grandes zones, qu'est-ce que c'est ? C'est d'abord un élément figure, qui contient le logo du site, ainsi que la petite phrase qui va avec. Et le deuxième élément, c'est une liste, une balise UL. donc une liste avec trois boutons dedans. Donc ça, ce sont les deux grands éléments de mon header. Au niveau de ma feuille de style CSS, eh bien, j'ai déjà écrit les différents sélecteurs dont je vais avoir besoin, pour gagner un petit peu de temps, j'ai d'abord ici le sélecteur header figure, pour le premier des deux grands éléments du header. Et puis header UL, pour le second des deux grands éléments du header, donc. L'élément figure est lui-même constitué d'une image, c'est-à-dire du logo DiDaXo. et de la balise figcaption, donc la petite phrase qui va avec, vous voyez que j'ai déjà mis cette phrase en blanc ici. Prenez le temps, si vous le désirez, d'arrêter la vidéo quelques instants, pour recopier ces éléments dans votre feuille de style. Alors, ce que je vais essayer de faire maintenant, c'est déterminer la dimension de ces différents éléments, donc je vais revenir sur Photoshop, et la première chose que je vais essayer de faire, c'est de définir la hauteur de mon header, la hauteur de mon en-tête. Alors pour ça, je prends l'outil de déplacement ici dans Photoshop, le premier outil qui se trouve au dessus, et je vais aller cliquer sur mon header, dans une zone vide de mon header. Ça me permet de sélectionner ici le calque qui correspond au header, vous le voyez, ici, il clignote, c'est bien celui-là. Et puis dans Photoshop, je vais activer un petit raccourci clavier, qui est sur Mac CMD T, sur Windows CTRL T, T comme transformation. Quand j'active ce raccourci, j'active également mes outils de transformation, qui se matérialisent par les petits carrés que vous voyez ici, autour de la zone sélectionnée. Alors, quand les outils de transformation sont actifs, eh bien, dans la partie supérieure de Photoshop, j'ai un tas d'informations concernant l'élément sélectionné, notamment ici sa hauteur, qui est de 100%, alors ça, ça ne m'aide pas beaucoup malheureusement. Heureusement dans Photoshop, j'ai la possibilité de faire un clic droit ici, au niveau de ces valeurs, et de demander à Photoshop la traduction en pixels. Eh bien voilà, mon header a ici une hauteur de 120 pixels, je vais m'empresser, évidemment, d'aller transposer ça au niveau de ma feuille de style. Mon header a ici un high de 120 pixels, comme ceci. Maintenant, au niveau de la largeur de mes éléments, alors je vais retourner dans Photoshop. Je vais cliquer ici sur ces icônes pour sortir des outils de transformation. Et au niveau des largeurs, rappelez-vous que nous avions une grille, qui avait été mise en place par le designer. et que tous les éléments de ce site tombent quelque part dans cette grille. Donc, je vais faire réapparaître cette grille. Alors pour ça, je vais dans le menu affichage, affichage, afficher, et puis ici afficher les repères. Remarquez ici que nous avons un petit raccourci clavier, qui est associé à cette opération, donc CMD, ou CRTL, si vous êtes sur PC. Vous voyez que ça n'affiche que les repères horizontaux. Alors, je vais répéter cette opération une deuxième fois, donc pour pas retourner dans le menu, je vais prendre le raccourci CMD : maintenant, et j'active les repères horizontaux. Donc si je fais CMD : vous voyez que je retire les repères. Un première fois, je mets les repères horizontaux, et puis une seconde fois les repères verticaux, donc la grille. Alors, les deux éléments principaux de mon site occupent quel espace ? Pour les boutons, vous voyez que ça occupe grosso modo 1, 2, 3, 4 colonnes de grille. Et les 8 autres colonnes de grilles, on va considérer qu'elles sont occupées, par l'image de marque de la société. Alors, ça fait combien 8 et 4 colonnes de grille en largeur ? Surtout que cette largeur doit être fluide, parce que je suis dans un point d'arrêt à largeur fluide. Pour ça, je vais me rendre sur internet, sur un site qui s'appelle Gridinator. Et donc, je vais demander une grille de colonnes. Je vais demander également des marges entre les colonnes de pixels, donc un goutière de 20 pixels entre chaque colonne. Je vais demander au site de m'afficher les tailles en pourcentages. Et de m'afficher surtout, la largeur des colonnes comme ceci. Et là, vous avez cette image qui se met à jour automatiquement. Donc, 4 colonnes de grille et 8 colonnes de grille, ça fait combien ? Eh bien, 1, 2, 3, 4, 5, 6, 7, 8, 8 colonnes de grille, ça fait 65,853% donc je vais copier/coller cette valeur au niveau de l'élément figure, qui est le premier des éléments, qui doit donc prendre 8 colonnes en largeur, comme ceci. Et le second élément, je retourne sur le site, il prend les 4 autres colonnes, donc, 1, 2, 3, 4, ça veut 31,707 %, donc je copie. Je retourne dans Brackets. Et je vais coller ici cette largeur en pourcentage, ici au niveau du deuxième des grands éléments. Alors, c'est pas fini, je vais retourner maintenant au niveau de Photoshop. Parce que à l'intérieur de l'élément figure, j'ai encore deux autres éléments, l'image et le texte. Si je vais regarder ce qui se passe pour le moment, alors je vais bien vérifier que j'ai sauvegardé la feuille de style. Je retourne dans mon navigateur, et au niveau de mon site quand je rafraîchis la page vous voyez que j'ai toujours un problème au niveau de l'image, puisque l'image prend le maximum d'espace disponible, et ça, ça ne me va pas, puisque vous voyez sur Photoshop, cette image elle est limitée à 1, 2, 3, 4 colonnes. Elle est limitée à 4 colonnes, à l'intérieur des 8 colonnes que prend le premier des deux éléments. Donc, je vais retourner sur Gridinator, et je vais lui dire, eh bien, maintenant je suis à l'intérieur de 8 colonnes. Et quand je suis dans les 8 colonnes, un élément qui prend 4 des 8 colonnes, 1, 2, 3, 4, eh bien, il occupe en fait 48,148% de l'espace. Je vais donc reporter ceci au niveau de mon image. Je vais lui dire que sa largeur maximale, donc max-width, doit être égale à ces colonnes, donc à 48,148%. Alors, ça veut dire quoi quand je sauvegarde ma feuille de style, et que je reviens au niveau de mon navigateur ? Dans mon site, et regardez, mon logo commence à se mettre en place, puis quand je modifie la largeur de mon site, vous voyez que l'image du logo est maintenant réactive, puisqu'elle a une taille en pourcents. Alors, je vais terminer par une petite chose. vous voyez que le logo ici, il touche le bord supérieur de mon site, ça, c'est pas très joli. Donc au niveau de Photoshop, je vois que ces éléments, ne touchent pas le bord supérieur du site. Alors, je vais essayer de terminer la distance que je dois mettre ici, pour ça je vais prendre mon outil zoom. Zoomez ici, sur cette partie là du site. Et je vais vous montrer un autre outil de Photoshop qui se cache derrière la pipette. C'est l'outil règle, et l'outil règle va me permettre de mesurer des distances. Donc, ce que je vais faire, c'est dessiner une ligne ici entre le dessus de mes icônes et le dessus de mon site. Alors, pour faire une ligne bien droite, je vais maintenir enfoncé le bouton Shift du clavier, ça me permet de faire une ligne droite. Et cette ligne ici, elle a une hauteur d'environ 20 pixels. Autrement dit, je vais retourner au niveau de mon éditeur de code. Et je vais donner à mon header un padding top de 20 pixels, Rappelez-vous que, comme on avait modifié le comportement par défaut du box sizing, je n'avais pas à me soucier de la hauteur de ce header. Je vais sauvegarder ceci, je reviens dans mon serveur, je rafraîchis ma page. Et voilà donc le logo et la petite phrase qui va avec, sont correctement placés ici dans ce point d'arrêt. Et dans la vidéo suivante, on va s'occuper du deuxième grand élément de cet en-tête, à savoir les trois boutons qui viendront à droite.

Créer une page web interactive depuis une maquette Photoshop avec HTML5 et CSS

Passez d’une maquette au format Photoshop vers une page web interactive en HTML5 et CSS. Découvrez des outils et des techniques indispensables dans votre travail d’intégrateur.

3h16 (43 vidéos)
Aucun commentaire n´est disponible actuellement
 

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !