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></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.

Aperçu des blocs

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

Colorisation des blocs

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

Transformation en conteneur flexible

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.

Dimensionnement des différents éléments

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

Ordonnancement des différents éléments

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

Ajout d'un menu de navigation

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

Positionnement du menu de navigation

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

Transformation du menu de navigation

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.

Positionnement des éléments du menu

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

Modification du pied de page

Personnalisation de la page

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

Exemple de mise en forme
Exemple de mise en forme 2

Correction de l’exercice

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

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.