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

Créer le code du pied de page

Testez gratuitement nos 1330 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Apprenez à réaliser le code HTML5 du pied de page. Basez-vous sur les indications de la maquette Photoshop.

Transcription

Le code HTML de notre page web est presque terminé, il ne reste plus que la dernière grande zone de notre site, à savoir le footer, le pied de page, qui se trouve ici dans le fond. Ce pied de page est composé de deux rangées. La première rangée qui est elle-même subdivisée en trois colonnes, et puis la seconde rangée qui s'étale sur toute la largeur de la page, et dans laquelle on va retrouver le bouton site mobile, et puis la petite notice de copyright ici, dans le fond. Pour réaliser ce footer, ce pied de page, j'ai besoin de quelques éléments graphiques le premier d'entre eux, c'est le logo DiDaXo. Alors ça, c'est très, très facile puisqu'on l'a déjà exporté, rappelez-vous, on a déjà eu besoin de ce logo au niveau de l'en-tête du site, ici au dessus, tout au début de ce chapitre. Et donc à l'époque, on avait exporté cet élément au format SVG, eh bien je peux bien sûr réutiliser le même ficher SVG pour le pied de page, même si le logo est un petit peu plus grand, puisque le fichier SVG il a ceci de particulier, qu'on peut changer la taille de ses images sans aucun problème. Alors, le deuxième élément graphique, c'est l'icône du téléphone portable, que je vais retrouver sur le bouton site mobile, ça c'est très simple également, on va aller chercher cette icône dans la police de caractères FontAwesome, qui est déjà intégré à notre site. Et puis, il reste ces deux petites images des deux drapeaux, le drapeau Français et le drapeau Anglais. Pour le sélecteur de langue, ça va être très facile également, puisque plus tôt dans ce chapitre, nous avions activer l'outil de générer, des fichiers d'images, il est toujours actif d'ailleurs, vous voyez que le coche est toujours là. Donc c'est très facile, avec l'outil de déplacement je sélectionne le premier drapeau. Ça me permet de repérer le calque correspondant, dans le panneau des calques, Et donc, il ne me reste plus qu'à changer le nom de ce calque, FR.jpeg, par exemple, et GB.jpeg, voilà, pour le second drapeau. Et donc dans mon navigateur de fichiers ici, donc dans le finder sur Mac, ou dans l'explorateur sur PC, vous retrouvez, bien-sûr, ces deux images qui ont été générées, il ne me reste plus qu'à les déplacer dans le dossier images de mon site, et je suis prêt à passer au code HTML. Donc, je vais retourner dans mon éditeur de code, je vais d'abord refermer cette balise side pour qu'on puisse mieux voir ce qu'on fait. Me placer ici, au niveau du footer. alors pour accélérer un peu les choses, et puisque le code HTML de ce footer, ne représente absolument rien de neuf par rapport à ce qu'on a fait plus tôt, eh bien, j'ai déjà préparé ce code HTML dans une autre fenêtre, et je vais quand même copier/coller ce code. Je vous invite, avant de passer au chapitre suivant, à bien regarder le code HTML que je viens de copier/coller ici, et donc à bien vous assurer que vous comprenez tout ce qui est marqué dans ce code HTML. Vous trouverez ce fichier dans les exercices donc, associés à cette formation. Voilà, le code HTML de notre page web est à présent terminé, ceci marque également la fin de ce chapitre, nous allons maintenant pouvoir passer à la feuille de style CSS.

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 !