Flexbox : Mise en forme d’une page 2 CSS13

Cet exercice consiste a définir une maquette de page pas à pas en utilisant un positionnement flexible pour disposer les éléments HTML.

Consignes de l’exercice

Préparation de l’exercice

Créez un dossier racine locale qui contiendra tous les fichiers de l’exercice.

Dans le dossier racine, créez un nouveau fichier .css vierge avec le nom style.css.

Dans le dossier racine créer un nouveau fichier .html avec toute la structure de base d’une page web auquel vous ajouterez l’intégration du fichier .css créé à la question précédente.

Gardez les deux fichiers .html et .css ouverts dans votre logiciel d’édition et ouvrez la page .html dans votre navigateur pour consulter les modifications.

Disposition des différentes zones d’affichage

Pour chacun des éléments HTML que vous allez ajouter, pensez à leur ajouter des couleurs d’arrière-plan différentes, afin de pouvoir les distinguer visuellement et surtout voir si vos positionnements sont corrects.
Au début de chaque question est indiqué le fichier sur lequel vous devez travailler : HTML ou CSS.

HTML : Insérer un élément div avec la classe page qui servira de conteneur à la totalité de la page HTML.

CSS : En utilisant le sélecteur CSS permettant de désigner l’élément page, attribuez une largeur de 960 pixels au conteneur. Centrez ensuite ce conteneur dans la fenêtre du navigateur en lui appliquant des marges automatiques. N’oubliez pas de lui ajouter une couleur d’arrière-plan.

HTML : Créez les conteneurs correspondants à l’illustration ci-dessous.

CSS : Colorez les conteneurs pour obtenir un résultat similaire à l’illustration ci-dessous.

CSS : Transformez l’élément .page en conteneur flex afin de pouvoir y disposer par la suite les différentes zones de contenu.

CSS : Dimensionnez les flex-items (header, section, aside,…) pour obtenir un résultat similaire à l’illustration ci-dessous. Vous allez devoir gérer le retour à la ligne dans le conteneur.

CSS : Sans modifier le code HTML, réordonnez les éléments pour obtenir un résultat similaire à l’illustration ci-dessous.

HTML : Insérez un menu de navigation dans un bloc nav à partir d’une liste à puce avec quatre liens hypertextes (un par ligne).

CSS : Positionnez le conteneur nav pour obtenir un résultat similaire à l’illustration ci-dessous.

CSS : Transformez la liste à puce du menu en conteneur flexible.

CSS : Ajustez la mise en forme du conteneur flexible (de la liste à puce) pour obtenir un résultat similaire à l’illustration ci-dessous. Il est recommandé de commencer par ajouter une bordure aux lignes de la liste à puce pour visualiser ce que vous faites.

HTML & CSS : Transformez le pied de page pour obtenir un résultat similaire à l’illustration ci-dessous.

Personnalisation de la page

HTML & CSS : Personnalisez la page à votre goût en vous inspirant des illustrations ci-dessous.

Correction de l’exercice

Vous trouverez ci-dessous une correction de l’exercice :

Correction

 

Cela peut vous intéresser :

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.