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

Utiliser les positionnements relatifs et absolus

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Créez le code CSS du titre de votre page. Passez en revue les modes de positionnement absolus et relatifs du CSS.

Transcription

Nous allons maintenant procéder à la mise en place de la troisième des cinq grandes zones de ce site, à savoir le titre principal de l'article de blog, qui sera affiché sur cette page. Rappelons nous brièvement le code HTML de cet élément, c'est probablement d'ailleurs l'élement le plus simple de ce site, j'ai tout simplement un image, suivie d'un titre de niveau 1, une balise H1. Le tout dans ce div qui est affublé de la classe wrapper rappelez-vous donc sa largeur au site, et le centre également dans la fenêtre. Et puis j'ai le tout qui est emballé encore dans ce div, donc qui s'appelle title. Alors, au niveau de la feuille de style, eh bien, vous remarquez que j'ai déjà créé un premier style ici. Title H1, et tous les éléments que vous retrouvez ici, j'ai été les rechercher dans le fichier Photoshop, par les techniques que vous connaissez déjà par les vidéos précédentes. Alors peut-être un petit mot sur les deux dernières lignes ici, de ce style background color, que j'exprime deux fois. Une fois avec le code exact decimal, et puis une seconde fois avec le code RGBA. Le RGBA, le A que j'ajoute ici, me permet d'ajouter un quatrième paramètre ici dans les parenthèses. Et ce quatrième paramètre, eh bien, c'est la couche alpha, c'est-à-dire l'opacité de cette couleur, c'est donc ici mon rouge à 80 % d'opacité. Alors pourquoi j'exprime deux fois ? Parce que le système RGBA qui est ici, eh bien, il n'est pas compris par des navigateurs un peu plus anciens. Et donc la couleur de fond ici, au format exact décimal classique, eh bien, c'est un espèce de plan B pour les anciens navigateurs, qui vont donc afficher cette couleur rouge mais sans opacité. Je vais maintenant retourner dans Photoshop, pour voir un peu ce qui se passe, voilà ce que je dois réaliser. Et dans le navigateur, voilà où j'en suis pour le moment. Vous voyez que le texte ici, que le titre est déjà pas mal mis en forme. Cela dit au niveau de Photoshop, vous voyez qu'il doit normalement se superposer, à l'image. Pour réaliser cet élément, je vais tout simplement au niveau de ma feuille de style positionner mon titre H1 ici, donc de manière absolue, comme ceci. Et je vais lui dire, bottom = 0. C'est-à-dire que je le positionne à 0 pixel du bas. Oui, mais à 0 pixel du bas de quoi ? Eh bien, je dois le positionner à 0 pixel du bas de l'élément title. Donc, je vais pour ça créer un nouveau sélecteur ici, que je vais appeler title.wrapper. Et donc, ce title.wrapper, je vais le positionner lui-même de manière relative, cette fois-ci. Et donc rien qu'en faisant ça, eh bien, le calcul du positionnement absolu, de l'élement H1 ici, se fera par rapport à l'élément wrapper, qui est dans l'élément titre. Je vais sauvegarder ma feuille de style, revenir ici au niveau de mon navigateur. Rafraîchir ma page, et vous voyez que mon titre est bien superposé à l'image. Par contre, dans l'aventure, il a perdu sa largeur. Je vais retourner dans ma feuille de style. Et préciser de manière explicite, 8=100% prends toute la largeur disponible, te gêne surtout pas, et puis voilà, l'affaire est maintenant réglée. Alors retournons dans Photoshop parce qu'on doit encore réaliser une petit chose. Vous voyez que l'ensemble de cet élément est légèrement décalé vers le bas. Alors, il est décalé de 20 pixels vers le bas, donc je vais retourner ici, dans ma feuille de style. Et dire à ce wrapper, top=20 pixels, c'est ça la magie de la position relative, c'est que ça me permet de décaler un élément par rapport, à la position qu'il devrait normalement occuper. Donc ici, je vais abaisser de 20 pixels, par rapport à la position qu'il devrait normalement occuper. Donc ça me donne ceci, et vous voyez que cet élément est maintenant mis en place.

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 !