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

Mettre en forme la barre de droite

Testez gratuitement nos 1268 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Vous allez passer en revue les styles CSS contrôlant la mise en forme des éléments de la barre de droite du site.

Transcription

La zone suivante que nous allons mettre en forme, et bien, c'est la colonne de droite. Alors rappelez-vous qu'au niveau de la vue tablette, ce n'est pas vraiment une colonne de droite, puisque tous les éléments sont mis en une seule colonne. Rappelons-nous également le code HTML de cette section. il s'agit d'une balise « aside » que vous voyez ici, qui est composée de trois sections. Une première section qui s'appelle « about », une seconde section qui s'appelle, ici, « share », et puis la troisième section qui s'appelle « category ». Rappelez-vous également que chacune de ces trois sections commence par un titre de niveau un. Donc un élément H1 de l'HTML qui indique bien évidemment le titre de chacune de ces trois sections. Au niveau de la mise en forme de ces trois éléments, au niveau de Photoshop, vous voyez que ces trois éléments partagent pas mal de points communs, notamment la couleur de fond qui est du blanc. Notamment également la mise en forme de titre, qui est chaque fois la même, vous constatez également que tous ces éléments ont des coins arrondis similaires. Et ils sont écartés les uns des autres par une petite marge de 20 pixels. Pour mettre en forme tout cela, au niveau de ma feuille de style, vous voyez ici que j'ai déjà créé deux sélecteurs, un qui s'appelle « mainContent : aside section » pour parler à chacune des trois sections de cette colonne de droite. Et puis l'autre qui s'appelle « mainContent : aside section H1 » pour parler au titre de niveau 1, au sein de chacune de ces sections. Alors le petit symbôle que vous avez ici, c'est ce quon appelle le sélecteur de descendance directe, ça veut dire que je m'adresse uniquement au H1 qui est directement « enfant » de l'élément « section », mais pas à d'autres H1 qui se trouveraient plus bas dans la hiérarchie. Alors je vais commencer par donner ici une « background color » en blanc. Donc la couleur FFF. Je vais également donner une « margin bottom » de 20 pixels à chacune de ces sections. Allons voir ce que ça donne dans le navigateur. Et bien regardez, ça commence déjà à prendre forme. Vous voyez déjà un premier petit problème. C'est que la section « à propos » qui est ici doit être écarté de 20 pixels de l'élément qui la précède. Alors je vais aller rajouter « marge du bas » à l'élément « Article ». Donc pour ça, je retourne ici au niveau de ma feuille de style. Je remontre un petit peu à la recherche de cet élément « Article », le voici. Je vais lui mettre une « margin bottom » de 20 pixels également. Je sauvegarde, je reviens dans le navigateur. Et voilà donc qui est réglé. Nous avons ces trois zones qui commencent ici à se mettre en forme. Je vais également revenir dans ma feuille de style pour maintenant mettre en forme ici, plus bas, les titres de niveau 1. Alors ici, j'ai besoin également d'une « background color », cette « background color », ce sera ma couleur bleu clair, que j'adore, que j'avais ici, dans ma palette de couleurs. Donc copier-coller ici, dans le fond de ma feuille de style. Voilà pour la couleur de fond. Je vais également leur donner un « padding » de 15 pixels pour que le texte ne touche pas le bord de cet élément. Je vais également leur donner une « font family ». Alors ici la « font family » se sera « Oxygen » c'est-à-dire la police de caractère qui nous vient de « Google font ». Puis si elle n'est pas disponible, du « verdana » et si « verdana » n'est pas disponible non plus, la police « sans serif par défaut » de ce système. Nous allons également mettre ce texte en gras. Donc « Font-weight », voilà du « Bold ». Nous allons également changer la taille de ces caractères. Donc « Font-size », ce sera une taille de 22 points. Tous ces éléments j'ai été les rechercher dans Photoshop, bien sûr, grâce au technique que vous connaissez déjà, et puis il y a la couleur de ce texte, qui est du rouge. Alors le rouge, je vais aller le rechercher ici au-dessus, dans ma palette de couleurs. Je copie. Je viens recoller ce code couleur ici. Je sauvegarde, je retourne dans mon navigateur. Et voilà donc ce que ça donne pour le moment. Vous voyez que ça commence à prendre forme. Je vais maintenant m'occuper des coins arrondis. C'est-à-dire ici, au niveau des sections, je vais mettre un « border-radius » de 5 pixels. Alors qu'est-ce que ça donne dans le navigateur ? Et bien ça donne bien, ici dans le fond. Par contre, au niveau des titres, je vais devoir donner un « border radius » uniquement au coin supérieur gauche et supérieur droit de chacun de mes titres. Alors allons-y ici. Donc, « border-radius » alors, supérieur gauche : 5 pixels, supérieur droit : 5 pixels, inférieur droit : 0 pixel, l'inférieur gauche : 0 pixel. Et donc voilà mes titres ici, qui sont normalement correctement mis en place. Le reste du travail consistera tout simplement à mettre en forme chacune des trois sections. Alors là, il n'a rien non plus de particulier à ce niveau-là. Vous connaissez toutes les techniques maintenant. Donc je vous propose également un fichier texte dans les exercices associés à cette formation. Et je vous propose d'aller tout simplement copier-coller les styles qui se trouvent dans ce fichier texte ici, à la suite de ce que l'on vient de faire. Je sauvegarde, je reviens au niveau de mon navigateur. Et vous voyez que ces éléments sont correctement mis en forme, avec ici, des effets de survol. Il y a juste un petit problème au niveau des icones « add to any », alors on va aller voir ce qui se passe. Et bien, ce qui se passe, c'est que tout simplement, au niveau « share », vous voyez que j'ai besoin ici d'un identifiant qui est « a2a » pour « add to any ». Alors si je vais voir dans mon code HTML, et bien je me rends compte que le div en question n'est pas affublé de cet identifiant. Donc je vais rapidement l'ajouter. « identifiant = a2a ». Je sauvegarde, je reviens dans mon navigateur. Et voilà donc ma colonne de droite qui est correctement mis en forme.

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 !