Nous mettrons à jour notre Politique de confidentialité prochainement. En voici un aperçu.

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

Créer le code de l'en-tête

Testez gratuitement nos 1341 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Vous allez maintenant réaliser le code HTML5 de l'en-tête de votre page. Travaillez depuis la maquette Photoshop que vous aurez observée.

Transcription

Nous allons maintenant nous concentrer sur le code HTML de la première grande zone de notre site, à savoir l'en-tête, et quand on regarde cette zone de plus près, on se rend compte qu'elle est composée de deux grands éléments. Le premier grand élément, c'est l'image de marque de la société, qui est ici à gauche. Et le second élément à droite, c'est le groupe de trois icônes que vous avez ici. Alors le premier élément, l'image de marque de la société, est lui-même composé de deux sous éléments, à savoir l'icône DiDaXo, et puis la petite phrase, ici, qui doit aller avec l'icône. Ces deux éléments ensemble, font l'image de marque et l'image marketing de cette société. Donc, c'est très important que ces deux éléments tiennent ensemble. Également dans le code HTML, on devra s'arranger pour que ces deux éléments soient dans le même conteneur. Alors ce qui va être un peu compliqué, c'est de regrouper les éléments graphiques, dont on va avoir besoin pour générer cet en-tête. Pour ce qui est des trois icônes ici sur le côté, eh bien là, on sait comment s'y prendre, puisqu'on va aller chercher ces icônes, dans la police de caractère de FontAwesome, par contre, pour le logo DiDaXo, on n'a pas encore décidé. Alors, regardons ce logo d'un peu plus près. C'est un logo très simple, il est composé uniquement de lettres, c'est ce qu'on appelle un logo type. Et toutes ces lettres sont de la même couleur, à savoir le blanc. Donc ,c'est vraiment très, très facile, au niveau graphique en tous cas. Et puis, si je vais voi ce logo au niveau des autres mises en page, je vais me rendre compte qu'ici il esit un petit peu plus petit, toujours associé avec sa phrase ici. Et au niveau de la mise en page pour la tablette il est toujours un peu plus petit. et toujours associé avec sa phrase, même si ici, la phrase est en dessous du logo et non plus à côté du logo. J'ai donc besoin d'une image que je puisse facilement redimensionner, sans qu'elle perde de la qualité. Alors, étant donné que j'ai besoin de la redimensionner, que ce logo est très simple il n'a qu'une seule couleur, voici un candidat idéal pour le format SVG. Malheureusement, Photoshop n'est pas le spécialiste du format SVG. Au niveau des produits Adobe le spécialiste des formats SVG, c'est Illustrator. Ça veut pas dire pour autant que nous sommes bloqués, On va peut-être pouvoir exporter de Photoshop ce format SVG. Ça dépend en fait de la manière dont le designer a intégré ce logo, dans Photoshop au moment où il a créé sa mise en page. Alors, pour vérifier si c'est possible, je vais prendre ici le premier outil de Photoshop, l'outil déplacement, vérifiez bien que cet outil déplacement est calibré pour aller chercher des calques, et non pas des groupes de calques. Puis, je vais cliquer sur ce logo. Comme ça, ça sélectionne le calque correspondant dans le panneau des claques. Alors je vais faire un clic droit sous ce calque. J'ai bien dit sous le calque, c'est-à-dire sur le nom du calque, et non pas sur la vignette ici, sinon vous n'aurez pas lebon menu. Donc je vais faire un clic droit ici, sur le nom de ce calque. Et là, je vois que je peux exporter le contenu de ce calque. Donc je vais cliquer sur exporter le contenu, et là, vous voyez que Photoshop me propose d'exporter le contenu de ce calque, au format SVG, nous sommes sauvés. Ça veut dire quoi ? Eh bien, ça veut dire que ce calque contient des données au format SVG, et le designer, au moment de créer cette mise en page, a importé un fichier au format SVG, probablement, d'ailleurs, généré par Illustrator, dans ce fichier Photoshop. Je peux donc le réexporter directement dans le dossier images de mon site. Je vais retourner donc, dans mon éditeur de code, et là, eh bien je retrouve, dans le dossier images de mon site, ce fichier au format SVG, alors on va aller le voir, tiens. Et vous remarquez que l'image au format SVG, eh bien, ne contient pas de pixels, il contient simplement ici du code XML. Donc, ça ressemble un petit peu à du 'HTML, avec des balises, etc. La balise principale, c'est la alise path que vous avez ici. Alors path en anglais, ça veut dire chemin. J'ai donc ici un chemin vectoriel, qui est défini par tous ces nombres qui sont ici, chacun de ces nombres représente un point d'encrage sur ce chemin vectoriel, ceux qui connaissent l'outil Plume d'Illustrator, savent très bien de quoi il s'agit. C'est ça le gros avantage des images au format SVG. C'est que je vais pouvoir redimensionner cette image, et grâce à ces points d'encrage, l'ordinateur va pouvoir recalculer l'image, pour sa nouvelle dimension. Et donc, elle ne sera jamais pixelisée cette image, quelle que soit sa taille. C'est ça l'avantage, donc. Alors je vais revenir dans mon fichier HTML me placer ici, au niveau de mon header. Donc je vais maintenant coder ces deux éléments. Le premier d'entre eux, donc l'image de la société, je vais utiliser pour ça la balise figure de l'HTML. Alors c'est une nouvelle balise du HTML 5. Et dans cette balise figure, je vais intégrer une balise IMG, pour aller rechercher donc, dans le dossier images, cette image au format SVG. N'oubliez pas, bien sûr, le petit texte alternatif. Ça, c'est pour rendre le site compatible avec les standards d'accessibilité. Alors, l'avantage de la balise figure, c'est que je peux lui joindre un compagon. à savoir la balise figcaption ici. Et cette balise figcaption me permet de définir une légende pour cette image, et donc c'est comme ça que je vais associer le logo et la petite phrase qui va avec. Donc la légende ce sera Next Gen Learning Toolbox and facilities, comme ceci. Alors le second élément, c'est la liste des trois icônes, que j'ai de l'autre côté de l'en-tête. Et donc pour ça j'ai besoin d'une liste, c'est-à-dire une balise UL. Dans cette liste, j'ai besoin d'éléments de liste, donc d'un balise LI. Et dans ces éléments de liste, je vais mettre un lien, c'est-à-dire que je dois rendre tout ça cliquable. Un lien, pour le moment, qui n'ira nulle part. Et j'ai besoin de trois éléments comme ça, donc je vais dupliquer ces trois éléments, par CMD ou CRTL D, donc CMD D ici, sur Makintosh, pour avoir donc ces trois éléments. Maintenant, je dois mettre des icônes de la police de caractère FontAwesome, à l'intérieur de ces trois liens. Alors pour ça, je vais retourner dans Photoshop, pour bien voir de quelle icône j'ai besoin. J'ai besoin d'une enveloppe fermée, d'un petit bonhomme tout noir, et d'une loupe. Alors, je vais retourner sur le site ici, FontAwesome.io aller rechercher mes icônes, et là, j'ai un petit moteur de recherche, donc la première donc j'ai besoin, eh bien c'est une enveloppe. Alors, c'est une enveloppe blanche fermée, la voici. Donc ici je vais cliquer dessus, et obtenir le code HTML dont j'ai besoin. Donc copier, et retour dans Brackets pour aller coller ça dans le premier bouton. Je retourne sur FontAwesome, je reprends mes icônes. Alors, la deuxième icône c'est un user, alors j'ai besoin du user tout noir qui est ici. Je vais prendre le code HTML. Le copier, et puis le recoller ici au niveau de Brackets. Et puis la dernière icône, je retourne donc dans FontAwesome ici. Je reprends mes icônes, et je vais faire une recherche sur le mot clé, search, et je retrouve ma loupe ici, sans aucun problème. Je prends le code HTML, je le copie, je retourne dans Brackets et je le colle ici, dans le troisième bouton. Voici donc les deux éléments de l'en-tête. L'élément figure, et la liste de trois boutons qui sont maintenant codés, dans votre fichier HTML.

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 !