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

Intégrer les grandes zones de la mise en page

Testez gratuitement nos 1298 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Observez la maquette Photoshop et déterminez les zones principales de la mise en page. Vous reporterez ensuite votre analyse dans votre page HTML5.

Transcription

Quand on regarde attentivement la maquette Photoshop, eh bien, on se rend compte que notre site est en réalité composé de cinq grandes zones. La première grande zone c'est l'en-tête, le header avec sa couleur de fond bleu foncé. Juste en dessous, nous avons la barre de navigation principale, avec sa couleur de fond gris foncé. Ensuite vient le titre de l'article de blog, qui sera affiché sur cette page, avec sa couleur de fond vert, donc. Puis nous avons le contenu principal de la page. Alors là, c'est un peu plus différent, parce que vous voyez que ce contenu principal est reparti en deux colonnes, sauf dans la mise en page sur tablette, où là tout est en une colonne. Mais nous devrons, au niveau du code HTML, bien séparer ces deux éléments. Et puis, la dernière grande zone c'est le pied de page, le footer, qui vient s'ajouter ici dans le fond de notre site. Alors, si je vais regarder ces différentes zones de plus près, ici avec l'outil zoom, je me rends compte que ça fonctionne chaque fois plus ou moins de la même façon. Donc vous avez ces grandes zones qui vont prendre toute la largeur disponible, et puis, à l'intérieur de chacune de ces zones, il y a du contenu, mais vous voyez que ce contenu est centré dans la fenêtre, et il est contenu dans une largeur bien spécifique. Donc là, on devra mettre un conteneur à l'intérieur de chacune de ces zones, pour bien contraindre la largeur du contenu et bien le centrer dans la fenêtre. Alors, on va aller reproduire tout ça, maintenant, dans notre éditeur de code. Donc, j'ai besoin ici dans la partie body de mon code HTML, de créer ces cinq grandes zones. Alors pour ça, je vais créer cinq balise div, comme ceci, je vais donner d'ailleurs à ces balises div, des noms. J'ai besoin de cinq balises div identiques, donc ici dans Brackets, je vais utiliser le raccourci commande D sur Mac, ou ctrl + D sur PC, D comme dupliqué. 1, 2, 3, 4, 5 et vous voyez que je duplique alors la ligne de code en question. Donc je vais donner des noms à ces éléments-là. Le premier donc c'est l'en-tête, le header. Ensuite, j'ai ma zone de navigation principale, je vais l'appeler mainNav comme ceci. Juste en dessous je vais avoir le titre de l'article, je vais appeler ça Title. La zone suivante c'est le contenu principal de la page, donc MainContent. Et puis la dernière zone, ça sera le pied de page, c'est-à-dire le footer comme ceci. Alors, à l'intérieur de chacune de ces zones, eh bien, je vais avoir besoin d'un autre conteneur, je vous le rappelle, pour mettre le contenu du site bien au centre, et donc lui donner une largeur fixe. Donc pour ça, je vais aller à l'intérieur de mon header, et ici, je vais définir une balise header, comme ceci, c'est une nouvelle balise de HTML 5, qui va contenir le contenu de cette en-tête. Je vais faire la même chose au niveau de la zone de navigation, mais là je vais utiliser la balise nav, qui est également une nouvelle balise de l'HTML 5, donc pour indiquer les zones de navigation. Dans le titre, je ne vais pas utiliser de balise particulière, simplement un div tout à fait classique, voilà. Dans la zone contenu principal, je vais utiliser une section, comme ceci. Et puis dans la zone de pied de page, eh bien, je vais mettre un footer. C'est également une nouvelle balise du HTML 5, pour contenir les pieds de page. Toutes ces zones que j'ai mises à l'intérieur, le header, le nav, etc, elles vont toutes avoir des caractéristiques en commun. Elles seront toutes centrées, et elles auront toutes la même largeur. Donc, je vais déjà préparer le travail ici. En les affublant d'une classe CSS, que je vais appeler wrapper. Alors, to wrap en anglais c'est emballer, c'est une classe qui signifie, en fait, que c'est un emballage pour du contenu. Voilà. Et donc je vais recopier la même classe sur tous ces éléments, ça permettra très simplement au CSS de leur donner, à tous ces éléments, des caractéristiques communes, à savoir les centrer, et leur donner une largeur identique. Alors, encore deux trois petites choses ici. Alors, d'abord au niveau du contenu principal, rappelez-vous que j'ai deux colonnes. La colonne avec l'article de blog, Alors pour ça, je vais utiliser la balise article du HTML 5, ça, c'est pour la colonne de gauche. Et puis pour la colonne de droite, je vais utiliser la balise aside, du HTML 5 également, pour les choses qui sont sur le côté. Alors, c'est une bonne idée, et une meilleure pratique également de commenter votre code HTML, On va en profiter tant qu'il n'est pas encore trop complexe, et que la structure est encore bien claire. Donc ici, je vais commencer un commentaire HTML, et je vais dire end of divHeader. Voilà, comme ceci. Et je vais recopier ce commentaire à la fin de chacun des div, prenez le temps de faire ça dans vos codes également. C'est pas très compliqué, ça prend un petit peu de temps, mais ça sera très utile et précieux plus tard quand le code HTML sera plus fourni donc ici end of divmainNav. Ici, je vais mettre un commentaire end of divtitle, comme ceci. End of divmainContent. Et puis le dernier, c'est end of divfooter. Et puis n'oublions pas ici, end of left column. Et puis ici, end of right column. Et bien voilà, la structure générale de notre site, la structure générale de notre code HTML, qui est dérivée directement d'une observation attentive de notre maquette photoshop.

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 !