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

Mettre en forme la zone de contenu principale

Testez gratuitement nos 1257 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Mettez en place la zone de contenu principale. Mettez également en forme le contenu principal de la page.

Transcription

Nous allons maintenant nous concentrer sur la mise en forme de la quatrième des cinq grandes zones de notre site, à savoir, donc, le contenu principal de cette page. Retournons un petit peu, si vous le voulez bien dans le code HTML, pour se rappeler comment tout cela est construit. Donc je suis dans le quatrième de cinq grands div, ça s'appelle ici mainContent. À l'intérieur de ce div, j'ai une section affublée de la classe wrapper, donc c'est ici cette section qui est responsable de la largeur du site, et du fait que le site est centré dans la fenêtre. Et puis ce wrapper, il est lui-même divisé en deux éléments, la balise article, et la balise aside. Articles qui représente la colonne de gauche, et aside qui représente la colonne de droite. Alors de retour dans Photoshop pour se rappeler que au niveau de la tablette, on n'a pas trop à se soucier de cette colonne de gauche, et de cette colonne de droite, puisqu'ici tous les éléments sont mis à la suite les uns des autres ici, en une seule colonne, vous le voyez. Si vous regardez bien également, vous remarquez qu'il y a un écart, entre le début de la zone de contenu et l'élément qui le précède. On va essayer de mesurer cet écart ici, dans Photoshop. Donc je vais, avec mon outil de déplacement, cliquer ici sur le fond blanc, et bien sélectionner la zone de contenu. Je vais la faire clignoter pour être certain que c'est bien ceci, qui est sélectionné. Et puis je vais enfoncer le bouton CMD, ou CTRL sur Windows, pour aller balader ma souris sur l'écran et vous voyez que j'ai un écart de 22 pixels, entre cet élément et l'élément qui le précède. Alors on va arrondir à 20, comme ça on aura toujours la même valeur de 20 pixels partout dans le site. Rapelez-vous également que l'élément qui précède, c'est-à-dire le titre ici, nous l'avions déjà décalé de 20 pixels vers le bas. Donc nous allons devoir mettre une marge vers le haut de 40 pixels, à notre élément pour qu'il soit séparé correctement de l'élément qui le précède. Je vais revenir au niveau de ma feuille de style. Je vais créer ici un sélecteur pour mainContent.wrapper. Et je vais lui donner donc, une marge du haut. Donc une margintop, de 40 pixels, comme ceci. Donc quand je reviens dans mon navigateur, vous allez voir que la zone de contenu, va descendre un petit peu, et que j'ai un écart maintenant entre, ma zone de contenu et le titre qui le précède. Alors maintenant, de retour dans Photoshop, vous voyez que cette zone de contenu, elle a un fond de couleur blanc. Pour ça, eh bien dans ma feuille de style, je vais m'adresser à l'article, c'est-à-dire un mainContent article. Donc la colonne de gauche. Et je vais lui mettre une background color en blanc, c'est-à-dire la couleur FFF. Donc au niveau du navigateur, quand je rafraîchis, vous voyez que j'ai bien une couleur blanche. Alors au niveau de Photoshop, vous constatez que le contenu, ne touche pas le bord du conteneur. Donc je vais essayer maintenant de calculer la distance entre le texte et le conteneur donc j'ai toujours mon conteneur qui est sélectionné. Je vais appuyer sur le bouton CMD de mon clavier, et ma balader ici au niveau de mon texte, et vous voyez que j'ai un écart de 10 px entre le bord de cette zone et le contenu. Donc je vais mettre un padding à cette zone de 10 pixels. Je vais retourner dans ma feuille de style. Et je vais mettre ici un padding de 10 pixels. Voilà. De retour dans le navigateur, voici ce que ça donne maintenant. Je reviens au niveau de Photoshop, et je remarque que cette zone a des coins arrondis, alors, comment déterminer le degré d'arrondissement de ces coins ? Je vais sélectionner la zone de contenu qui clignote ici. Alors quand je fais CMD ou CTRL T, vous voyez qu'on a certaines informations. Notamment la largeur et la hauteur. Par contre, aucune information concernant les coins arrondis, donc je vais annuler ceci. Heureusement dans Photoshop, il y a un autre moyen d'aller chercher ces informations, à propos de l'élément sélectionné. C'est le panneau ici, qui s'appelle le panneau des propriétés. Je vais l'ouvrir, et j'ai les propriétés de l'élément qui est sélectionné, c'est-à-dire ce calque ContentBKAG. Alors je retrouve ici la largeur et la hauteur de cet élément, c'est peut-être un autre moyen d'aller chercher les informations, puis surtout ici, dans le fond de ce panneau, j'ai des informations sur les coins arrondis, qui sont, vous le voyez, arrondis à 5 pixels. Autrement dit, je vais pouvoir retourner ici au niveau de ma feuille de style. Et venir mettre un border radius de 5 pixels, comme ceci, à cet élément. Et voilà donc cet élément qui est mis en place. Avec ces coins arrondis vous le voyez ici. Pour le reste, je vais devoir mettre en forme, chacun des éléments typographiques que je touve à l'intérieur de ce contenu, donc les titres de niveau 2, de niveau 3, les paragraphes, etc. Tout ça ne représente aucun intérêt dans ce cours en terme d'intégration, c'est du CSS bête et méchant comme vous en faites depuis longtemps. Je vous propose donc dans les fichiers d'exercices de cette formation, un fichier texte que vous pouvez copier/coller directement dans votre feuille de style Je vais d'ailleurs le faire ici, voilà. Et donc ici, qu'est-ce que je fais ? Tout simplement la mise en forme de chacun des élément, des titres de niveau 2, des titres de niveau 3, des paragraphes, des listes à puces, à numéros, etc. Je sauvegarde ceci, je reviens dans mon navigateur, je rafraîchis, et donc voilà le travail. Cette partie, donc, de contenu principal est maintenant correctement mise 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 !