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

Mettre en place les media queries

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Mettez en place les différents media queries dont vous avez besoin. Étudiez le fonctionnement de ces media queries en cascade.

Transcription

Dans ce chapitre, nous allons nous concentrer sur l'aspect réactif de notre site, c'est-à-dire sur sa capacité à s'adapter à différentes largeurs d'écran. Alors rappelez-vous que dans notre fichier Photoshop le designer nous propose trois variantes différentes de sa mise en page. Trois variantes pour trois largeurs d'écran différentes, et ça se présente ici, dans Photoshop CC 2015, sous la forme de trois plans de travail. Alors je vais prendre ici dans Photoshop, mon outil « Plan de travail » pour aller cliquer sur le nom du plan de travail le plus étroit « tablette portrait », et rappelez-vous que ce plan de travail a une largeur de 768 pixels. Nous avons d'ailleurs déjà développé la feuille de style de cette mise en page particulière. Alors je vais maintenant cliquer sur le nom du second plan de travail. Celui du milieu, il s'appelle « Desktop narrow » et il a une largeur de 1024 pixels. Ça veut dire que quand l'écran qui visite le site a une largeur au minimum de 1024 pixels, c'est cette mise en page-là qui devra s'appliquer au site. Je vais maintenant aller vérifier la largeur du dernier plan de travail. Donc « Desktop wide ». Il a lui, une largeur de 1480 pixels, donc si l'écran atteint une largeur de 1480 pixels, voilà la mise en forme que je dois appliquer à mon site. Alors que se passe-t-il entre 768 pixels et 1023 pixels ? C'est-à-dire entre les deux mises en forme ? Et bien dans ce cas-là, ce sera toujours la mise en forme « tablette portrait » qui sera d'application, mais rappelez-vous que le site est bloqué à une largeur de 768 pixels et est centré dans la fenêtre. De même, que ce passe-t-il entre 1024 pixels et 1479 pixels ? Et bien ce sera la mise en forme « Desktop narrow » qui sera d'application, et la largeur du site sera fixe à 1024 pixels, avec le site centré dans la fenêtre. Alors pour mettre en place tout cela, dans ma feuille de style, je retourne au niveau de mon éditeur de code, dans ma feuille de style CSS. Et ici, tout dans le fond, je vais avoir besoin de la directive media du CSS comme ceci, et puis d'un jeu de parenthèses dans lesquelles je vais mettre des conditions, qui devront être réunies pour que les styles que je vais définir dans ce media query c'est comme ça que ça s'appelle en CSS, s'appliquent à ma page. Donc ici, pour la mise en forme du milieu d'un Photoshop j'ai besoin que l'écran ait une largeur minimale, donc une « min-width » de 1024 pixels, comme ceci et puis j'ai besoin d'un jeu d'accolades, c'est entre ces accolades que je vais définir les styles CSS qui s'appliqueront quand les conditions seront réunies. Pour le dernier point d'arrêt, pour le plus grand plan de travail dans Photoshop je vais dupliquer cette ligne de code, avec command ou control D, ici dans brackets, et tout simplement changer la condition et mettre ici 1480 pixels. Alors rappelez-vous que les styles CSS que nous avons définis dans le chapitre précédent, ici plus haut, ils ne sont pas dans une media query particulière, autrement dit, ils vont s'appliquer à l'ensemble à l'ensemble des trois mises en forme de la page. Donc dans les media query, ici, je ne vais spécifier que ce qui change par rapport au travail que nous avons effectué dans le chapitre précédent. Et la première chose qui change, c'est probablement la largeur du wrapper rappelez-vous ici, tout au début, nous avions défini ce wrapper avec une largeur maximale de 768 pixels, et bien je vais changer cela dans mes media queries, donc je redescends ici dans le fond. Je vais faire, regardez, un style pour la classe wrapper. Voilà. Et je vais changer la « min » ou la « max-width » plutôt dans ce cas-ci, de mon wrapper pour qu'elle soit égale maintenant à 1024 pixels comme ceci. Puis je vais faire la même chose dans le point d'arrêt suivant à 1480 pixels, et je vais changer également la largeur de ce wrapper pour qu'elle soit, vous le voyez, de 1480 pixels. Je sauvegarde ma feuille de style, je reviens dans mon navigateur, je recharge ma page, et donc, si je prends maintenant ma page et que je modifie sa largeur, vous allez voir que quand je descends en-dessous d'une largeur de 1024 pixels, et que j'atteins ensuite vous le voyez ici 768 pixels de large pour mon écran, et bien je passe dans la mise en forme « tablette ». Ensuite, si l'écran continue à être de moins en moins large, à partir d'un moment, quand je descends en-dessous d'une largeur de 768 pixels et bien vous voyez que le site est réactif et que toutes les tailles sont calculées en pourcent. Alors voilà le premier point d'arrêt qui se situe ici, donc quand j'atteins une largeur d'écran de 1024 pixels. Maintenant pour tester le point d'arrêt suivant, je vais devoir un petit peu modifier le zoom de Chrome, donc dans le menu « Affichage de Chrome », je vais faire un zoom arrière, remarquez le raccourci associé à cette opération, donc Command - ici sur Mac Control - sur Windows, donc je vais faire Command - pour arriver à un zoom par exemple ici, de 50%. Donc là, je suis sur la plus grande largeur, je vais réduire de nouveau mon écran, je vais passer dans le point d'arrêt à 1024 pixels. Voilà, vous voyez que la mise en forme change ici une première fois. Puis, si je continue à descendre, voici le point d'arrêt suivant à 768 pixels, vous le voyez ici. Et donc j'ai de nouveau ma mise en forme qui va changer ici. Voici donc mes trois points d'arrêt, mis en place dans ma feuille de style, je vous rappelle que nous avons besoin pour ça de la directive media du CSS. Dans les vidéos suivantes de ce chapitre évidemment, nous allons continuer le développement de chacune de ces deux media queries, et donc voir un petit peu ce qui change entre les différentes mises en page.

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 !