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

Mettre en forme le pied de page

Testez gratuitement nos 1252 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Dans cette vidéo, vous allez faire le tour des styles CSS contrôlant la mise en forme du pied de page.

Transcription

Le dernier élément que nous devons mettre en place c'est le footer, le « pied de page » qui est ici dans le fond de ce site. Au niveau de ce pied de page, il n'y a rien de neuf à apprendre en terme d'intégration. Vous connaissez déjà toutes les techniques dont vous auriez besoin pour réaliser le code CSS de ce pied de page et aller rechercher les informations dans les différents éléments de Photoshop. Donc pour accélérer un petit peu les choses, je vous propose de nouveau d'aller copier-coller des styles CSS qui se trouvent dans un fichier texte associé à cette formation que vous trouverez dans les exercices. Alors je vais me rendre directement ici au niveau de ma feuille de style. La fin de la feuille de style, vous voyez j'ai déjà un style qui s'appelle footer. Et je vais aller tout simplement copier-coller les styles qui se trouvent dans ce fichier texte. Donc les voici. Je vais sauvegarder ma feuille de style. Retourner dans mon navigateur, rafraichir ma page, et vous voyez donc que ce pied de page est bien mis en place. Il y a juste une petite chose encore à corriger. Vous voyez qu'au-dessus et tout en-dessous du footer, le contenu est véritablement collé à ce footer, donc je vais retourner dans ma feuille de style une dernière fois, aller rechercher cette règle de style ici, qui détermine les styles principaux de l'élément footer et vous voyez qu'il a un padding au-dessus et en-dessous de 0 pixel, je vais éliminer cette petite mention, pour avoir un padding de 20 pixels de tous les côtés. Je sauvegarde, je reviens dans mon navigateur, je rafraichis ma page et voici donc mon pied de page correctement mis en place. Alors je vais passer ma page en revue, vous voyez donc ici la page dans sa version tablette, qui a été intégrée convenablement avec sa feuille de style. Rappelez-vous également que tous ces éléments sont fluides. Autrement dit, quand je réduis la largeur de mon document, à partir d'une largeur de 768 pixels, vous voyez que tous ces éléments sont fluides, y compris dans le fond ici, pour le pied de page. Vous voyez que tout cela suit la largeur de mon écran, parce que toutes les dimensions sont ici calculées en pourcent et non pas en pixels Voici donc une grande étrape de franchie dans notre cours, puisque nous avons mis en place les éléments principaux de la feuille de style. Alors dans les autres chapitres, nous allons nous consacrer à l'aspect réactif de cette page. C'est-à-dire à son adaptation aux autres points d'arrêt.

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 !