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

Mettre en page son site en mode Paysage

Testez gratuitement nos 1324 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Dans cette vidéo, vous allez modifier la mise en page de votre site au niveau du deuxième point d'arrêt. Il s'agit de rendre le site compatible avec une tablette tenue en mode Paysage.

Transcription

Nous allons maintenant établir les styles CSS du plan de travail Desktop Narrow, c'est-à-dire celui qui a une largeur de 1024 pixels. Et pour ce faire, nous allons comparer attentivement le plan de travail « tablette portrait » avec le plan de travail « Desktop Narrow » puisque je vous rappelle que nous devons uniquement établir les différences qu'il y a entre ces deux mises en page. Je vais donc zoomer un petit peu sur ces éléments pour les voir de plus près, et nous allons commencer par ce qui saute aux yeux bien sûr, je veux parler de cette disposition en deux colonnes dans le plan de travail « Desktop Narrow ». Alors un petit raccourci de Photoshop, qu'on a d'ailleurs déjà utilisé plus tôt dans cette formation, c'est command ou control : une première fois pour faire apparaitre les guides horizontaux, et une seconde fois, pour faire apparaitre les guides verticaux. Alors je vais sélectionner un élément ici de « Desktop Narrow ». Voilà comme ça je fais apparaitre ma grille, et donc là, je me rends compte que la colonne de gauche, elle occupe huit colonnes de grille, et la colonne colonne de droite occupe les quatre colonnes de grille restantes. Alors au niveau du code HTML de ces éléments, nous allons retourner dans l'éditeur de code. Je suis dans le div « mainContent » et dans ce div, j'ai une balise Article qui représente ma colonne de gauche, et une balise Aside qui représente ma colonne de droite. Alors passons au CSS. Dans le « media query » à 1024 pixels, je vais écrire donc deux sélecteurs. Ce sera « mainContent article » pour la colonne de gauche et puis « mainContent » aside pour la colonne de droite. Alors je vais commencer par définir la largeur de ces deux éléments. Et pour ça, je vais retourner sur internet je vais retourner sur Gridinator. Alors huit colonnes de grille : un, deux, trois, quatre, cinq, six, sept, huit. Et bien ça fait 66% de large, donc je vais copier cette information et venir la recoller ici pour la première colonne. Donc huit égal 66% et pour la seconde colonne, je retourne sur Gridinator également. Les quatre colonnes restantes, un, deux, trois, quatre. Ça me donne 32%. Je vais donc copier cette information et venir la coller ici : largeur 32%. Je sauvegarde les modifications, je reviens dans mon navigateur au niveau de ma page, je la rafraichis. Et là, vous voyez que mes colonnes ont bien été redimensionnées, donc leur largeur est correcte, par contre, elles ne sont toujours pas côte à côte. Donc pour ça, je retourne dans ma feuille de style. Et je vais utiliser une technique qu'on a déjà utilisé également, je vais leur demander de s'afficher sous la forme d'un « inline-block ». Comme ceci. Recopier cette instructions ici en-dessous. Je sauvegarde. Je teste maintenant ma page, et regardez, mes deux colonnes sont bien maintenant côte à côte. Cela dit, rappelez-vous qu'avec la technique du « inline-block » et bien, par défaut, l'alignement vertical est un alignement vers le bas, comme dans les tableaux, d'ailleurs. Donc je vais modifier ce comportement-là, en demandant ici un « vertical-align : top » pour la première colonne. Et puis également pour la seconde. Voilà, je sauvegarde et je reviens dans le navigateur. Mes deux colonnes sont bien côte à côte et alignées correctement sur le plan vertical. Il me reste une petite chose à faire, c'est établir une petite marge entre ces deux colonnes, pour repousser un petit peu la colonne de droite et l'aligner correctement avec le titre qui est ici au-dessus. Donc je vais venir ici au niveau de ma colonne de gauche lui mettre une « margin right », alors on va dire, de 15 pixels, on va voir si ça fonctionne, si c'est suffisant. Et bien, bingo : je suis pile dedans. Donc vous voyez que mes deux colonnes sont bien maintenant alignées l'une avec l'autre et sont côte à côte. Alors si je réduis la largeur de ma fenêtre, vous allez voir que quand je redescends en-dessous de 1023 pixels donc, et bien c'est l'autre mise en page qui s"appliquent, et donc je suis de retour avec une mise en page avec une seule colonne, et puis ici ma colonne passe à côté l'une de l'autre comme ceci. Alors ce qui va être intéressant de constater également, c'est ce qui se passe dans le point d'arrêt le plus large. Pour ça, je vais utiliser command - ou control - ici pour « dézoomer » un petit peu donc réduire le niveau de zoom dans Chrome et vous voyez que pour la mise en forme la plus large, et bien j'ai également mes deux colonnes côte à côte. Regardez le plus grand des points d'arrêt, point d'arrêt du milieu, voilà avec mes deux colonnes côte à côte, et puis le point d'arrêt le plus petit, pour la tablette, avec ma disposition en une seule colonne. Alors voilà pourquoi j'ai décidé plutôt dans ce cours, de commencer par la mise en forme la plus étroite. Et bien oui, pensez à nos deux points d'arrêt. Si j'ai une largeur d'écran de 1480 pixels et bien 1480 pixels, c'est au minimum 1024. Donc évidemment, tout ce que je fais dans le point d'arrêt à 1024 pixels va également influencer le point d'arrêt plus large à 1480 pixels. Vous voyez ici que commencer par le point d'arrêt le plus étroit vous permet de gagner du temps et donc de ne pas réinventer chaque fois la roue, de bâtir comme ça les modifications de point d'arrêt en point d'arrêt sans devoir redéfinir ce qui a déjà été fait dans le point d'arrêt précédent. Alors cette disposition en deux colonnes, ce n'est pas la seule chose qui change, je vais retourner dans Photoshop. Vous voyez par exemple que le menu apparait également, que les boutons de l'entête sont plus petits dans la disposition « Desktop Narrow » Vous voyez également au niveau du footer, au niveau du pied de page, que le pied de page est en trois colonnes plutôt qu'en deux colonnes. Alors pour accélérer un petit peu les choses, je vous propose d'aller copier-coller les styles CSS qui nous manquent. Ces styles CSS sont disponibles dans les exercices associés à cette formation. Donc je vais retourner au niveau de mon code. Je vais aller copier ici des styles CSS et je vais venir les coller ici juste après ceux que je viens d'écrire dans le point d'arrêt, donc à 1024 pixels. Voilà. Et je colle ceci. Alors qu'est-ce qu'on a fait dans ces styles CSS ? Et bien nous avons modifié, vous le voyez, la taille des boutons. Nous avons modifié également un petit peu la disposition des éléments dans le « Header ». Notamment, la petite légende, on l'a mise à côté de son image. Au niveau de la navigation, nous avons fait disparaitre le bouton qui me permet d'afficher ou de masquer le menu. Par contre, nous avons fait apparaitre ce menu, et nous avons fait en sorte que les éléments de ce menu soient disposés les uns à côté des autres. Et vous voyez également que nous avons apporté une série de modifications au niveau du pied de page. Alors je vais sauvegarder ceci, retourner dans mon navigateur. Avec le raccourci clavier command ou control 0, je reviens à un zoom normal et puis je rafraichis ma page. Donc vous voyez ici que les modifications ont été apportées correctement. Mon pied de page a été également remis en forme. Et quand je modifie la largeur de ma page, vous voyez que quand je repasse en-dessous de 1024 pixels, et bien rien n'a changé ici, j'ai toujours la feuille de style pour la tablette qui est active de manière tout à fait correcte. Voici donc pour la mise en page « Desktop narrow ».

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 !