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

Mettre en place les styles principaux

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Mettez en place les principaux styles qui vont définir les couleurs de fond et la largeur générale de votre site.

Transcription

Dans ce chapitre, nous allons mettre en place la feuille de style CCS, qui va accompagner notre fichier HTML. Et pour ça, nous allons commencer par nous concentrer sur le point d'arrêt le plus étroit. Alors, je vais sur Photoshop, me rendre sur le plan de travail Tablet_portrait. qui représente le point d'arrêt le plus étroit, c'est donc ceci que je vais réaliser en premier lieu. Les premiers styles CSS que je vais mettre en place, eh bien, vont servir à déclarer les grandes caractéristiques, des cinq grandes zones de mon site. Alors si je reviens sur ma page HTML, les cinq grandes zones de mon site, ce sont cinq div qui s'appellent header, mainNav, title, mainContent et footer. Donc dans ma feuille de style, je vais définir cinq sélecteurs, pour ces cinq grandes zones. Donc le premier s'appelle header, comme ceci. Le second s'appelle mainNav, faites attention, les majuscules et les minuscules comptent, ici. La troisième zone donc, c'est title. La zone suivante, ça sera mainContent. Et le petit dernier, ce sera le footer. Alors, je vais retourner dans Photoshop, parce que quelles sont les caractéristiques de ces cinq grandes zones ? Évidemment, ce qui saute aux yeux, c'est la couleur de fond bien sûr. Donc chacune de ces cinq zones a une couleur de fond différente. Du bleu foncé, du gris foncé, du vert, du gris clair, et puis enfin, pour le footer, du gris foncé également, le même gris foncé d'ailleurs que pour la navigation. Donc je reviens dans ma feuille de style. Et je vais définir pour tous ces éléments, une background color, une couleur de fond. Alors pour le header ça sera du bleu foncé, voilà, je vais copier coller le code couleur que j'avais préparé ici, au dessus. Je vais faire la même chose pour les autres éléments. Donc pour mainNav, title, Content et footer. Alors pour mainNav, j'ai besoin de gris foncé. Donc c'est cette couleur ci, je vais la copier coller. Également la même couleur pour le pied de page, le footer, voilà. Pour ce qui est du title, eh bien, j'ai besoin de la couleur verte. Voilà, donc je vais copier coller ceci ici. Et pour le mainContent, j'ai besoin de mon gris clair, le voici. Je vais également, donc, le copier coller ici. On va tout de suite aller voir ce que ça donne, donc je sauvegarde ma feuille de style, je reviens dans le navigateur, je rafraîchis ma page et regardez, il y a déjà par mal de choses qui changent. Du coup, les logos DiDaXo apparaîssent, ils ne sont plus blanc sur blanc, donc voilà définies mes quatre grandes zones, avec chacune de ces grandes zones donc, a sa propre couleur de fond. Alors, une autre des grandes caractéristiques de mon site, eh bien c'est sa largeur. Et ici, au niveau du point d'arrêt le plus étroit, quelle largeur dois-je utiliser ? Je vais dans Photoshop me rendre au niveau de l'outil, alors c'est le premier outil qui est au dessus, l'outil plan de travail, il est caché derrière l'outil déplacement, si vous le cherchez. Et donc, cet outil plan de travail va me permettre de sélectionner, le plan de travail Tablet_portrait en cliquant sur son nom. Et je vois qu'il ici a une largeur de 768 pixels. Comment je vais faire pour mettre cette largeur en place ? Pour ça, rappelez-vous dans votre page HTML, eh bien, que chacune des cinq grandes zones de mon site, contient elle-même un autre conteneur, qui est affublé de la classe wrapper. Alors, il s'agit du header ici. du nav, du div, de la balise section, et du footer ici, dans le fond. Je vais donc, dans ma feuille de style CSS, c'est l'autre feuille de style, voilà. Et finir un style pour la classe wrapper, comme ceci. Et donc, je vais définir pour mon site une largeur de 768 pixels. Cela dit, rappelez-vous des instructions de notre designer. Il nous avait demandé, à cet endroit-là, de créer un point d'arrêt à 768 pixels, mais un point d'arrêt à largeur fluide. Ça veut dire en réalité que la largeur maximale du site sera de 768 pixels. Par contre, si l'écran qui visite le site a un valeur moindre que 768 pixels, eh bien, le site devra être fluide et s'adapter à cette largeur moindre. Autrement dit, c'est la largeur maximale du site qui est de 768 pixels, et c'est comme ça, donc, que je créé un point d'arrêt à largeur fluide. Alors je vais aussi me servir de ce wrapper pour centrer le site dans la fenêtre, pour ça j'ai besoin de marge, les marges de 0 pixels au dessus et en dessous, et surtout, la marge automatique à gauche et à droite. Alors on sauvegarde, on va voir au niveau du navigateur, on rafraîchit, et regardez, le site a bien une largeur de 768 pixels. Alors il s'agit d'une largeur fluide, si je modifie la largeur de mon navigateur, eh bien, au bout d'un moment, vous allez voir que le site devient fluide. Par contre, quand la largeur de la fenêtre atteint et dépasse 768 pixels, eh bien là, le site a une largeur fixe qui est limitée qui est à 768 pixels. J'ai encore un petit problème, vous le voyez, pour la grande image ici, au dessus. Effectivement cette image elle a une taille, une largeur, une hauteur fixe également. Comment rendre les images réactives ? Alors je vais tenir compte, ici, du fait que j'aurais peut-être besoin de certaines images réactives, mais pas d'autres, donc je vais revenir au niveau de ma feuille de style. Et je vais créer un style supplémentaire, que je vais appeler IMG.responsive. Donc il s'agit d'une classe CSS, que je ne pourrais appliquer qu'à des images. Et donc, pour rendre une image responsive, eh bien, je vais lui donner une largeur de 100%. Ce qui signifie que l'image aura toujours la largeur de l'élément dans lequel cette image est contenue. C'est ça qui rend les images réactives. Je vais également spécifier pour ces images une hauteur automatique, et ça, ça va éviter que le proportion entre la hauteur et la largeur des images, changent quand les images seront redimensionnées. Pour que ça marche, je dois évidemment aller associer ma classe CSS à mon image, donc au niveau de mon titre, voici mon image. Et donc, je vais lui mettre la classe responsive, comme ceci. Je sauvegarde ma page HTML, je sauvegarde également ma feuille de style, je reviens ici dans mon navigateur, et regardez maintenant. Mon image est redimensionnée, et quand je change la taille de mon navigateur, eh bien regardez, mon image est fluide. Elle prend 100% de la taille de son conteneur, mais comme son conteneur est lui-même un élément fluide, eh bien, vous voyez que cette image se redimensionne. Alors, autre petit problème que je vais régler maintenant, vous voyez que quand la largeur de mon écran est inférieure à 768 pixels, eh bien, le contenu touche le bord, ça, c'est pas très joli, j'ai pas envie que ça se passe comme ça. D'ailleurs, si je vais voir dans Photoshop, eh bien, vous remarquez que le contenu, ici, ne touche pas le bord, j'ai toujours un petit espace ici. Donc, dans ma feuille de style, comment je vais mettre ça en place ? Eh bien, je vais m'adresser à chacune des cinq grandes zones, et je vais leur donner un petit padding. Pourquoi un padding ? Comme ça la couleur de fond passera à travers. Un padding de 0 pixel au dessus et en dessous. Et on va mettre, par exemple, 20 pixels à gauche et à droite. Et donc je vais raconter cette instruction dans les cinq grandes zones du site, comme ceci. Alors, si je sauvegarde et que je retourne dans mon navigateur, je rafraîchis ma page et regardez, j'aurais toujours au moins un espage de 20 pixels. vous le voyez ici, entre le bord de ma fenêtre et le contenu de mon site, c'est plus joli comme ça. Dernière petite chose que l'on va faire, on va s'adresser à la balise body. C'est-à-dire à la balise racine, qui contient tout le contenu de notre site. Et donc ici, au niveau de la balise body, nous allons mettre en place une série de propriétés par défaut pour notre site. J'ai envie que le background color de ce body soit ma couleur gris clair. Alors ça, théoriquement, je n'en ai pas besoin, mais on sait jamais, que ça serve un jour. Donc on va jouer la sécurité comme ceci. Au niveau de la police de caractères par défaut à utiliser, donc FontsFamily, eh bien, le designer nous demande d'utiliser pour le corps de texte, la police Raleway, que nous avons mise en place à partir de GoogleFonts. Mais rappelez-vous de ses instructions, si Raleway n'est pas disponible, eh bien, dans ce cas-là, on peut éventuellement utiliser du Verdana. Et puis, si ni Raleway, ni Verdana sont disponibles, on utilisera la police sans sérif par défaut du système. Je vais également modifier la couleur par défaut du texte, et la rendre égale, ici, à mon gris foncé. Je copie, et je colle. Je sauvegarde ici ma feuille de style. Je reviens dans le navigateur, je rafraîchis ma page, et vous voyez qu'il y a déjà pas mal de choses qui ont changé. Donc, les grandes caractéristiques des cinq grandes zones de ma page, sont mainteant bien en place, ainsi que la largeur du point d'arrêt le plus étroit.

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 !