Grid Layout : interfaces web CSS32

Cet exercice consiste à créer des interfaces web variées en utilisant les possibilités offertes par le système de grille de CSS.

Consignes de l’exercice

Mise en place de l’exercice

Créez un dossier de travail (dossier racine) sous le nom exercice-css32.

Dans votre dossier racine, créez un nouveau fichier HTML sous le nom grid-css32.html contenant la structure de base d’une page web.

Dans votre dossier racine, créez un nouveau fichier CSS sous le nom grid-css32.css contenant la structure de base d’une page web. Si vous connaissez le SCSS, utilisez-le.

HTML : Associez le fichier grid-css32.css à la page HTML.

Première interface

HTML : Dans la page HTML, ajoutez un élément <div></div> (qui sera le conteneur principal) accompagné de 4 enfants de type <div></div>. Les enfants contenant respectivement les textes “En-tête”, “Menu”, “Contenu” et “Pied de page”.

HTML : Ajoutez plusieurs paragraphes de texte à la place du texte “Contenu”. Vous pouvez pour cela utiliser du Lorem Ipsum.

HTML : Ajoutez les classes CSS qui vous permettront par la suite de cibler chacun des 5 éléments <div></div> créés à la question précédente.

CSS : Ajoutez des couleurs d’arrière-plan différentes pour les différents éléments afin de pouvoir les identifier visuellement.

CSS : Transformez le conteneur principal en élément de type grille

CSS : Réglez la grille pour obtenir un résultat sensiblement identique à l’illustration suivante :

Aperçu de l'interface 1

CSS : Réglez la largeur du contenu principal afin d’éviter d’avoir des lignes trop larges ou au contraire trop étroites.

Interface 1 avec le contenu dimensionné

Deuxième interface

Dupliquez la page HTML et le fichier CSS, renommez les copies sous les noms grid-css32-2.html et grid-css32-2.css.

HTML : Dans la nouvelle page que vous venez de créer, pensez à modifiez le nom du fichier CSS.

CSS : Transformez le conteneur principal en grille.

CSS : Dimensionnez les lignes et colonnes de la grille pour obtenir la grille suivante :

Grille de la deuxième interface

Vous devriez avoir à l’écran la disposition suivante :

Aperçu de l'interface 2 après dimensionnement de la grille

CSS : Disposez les différents éléments dans la grille pour obtenir le résultat suivant :

Aperçu final de l'interface 2

Troisième interface

Dupliquez la page HTML et le fichier CSS, renommez-les copies sous les noms grid-css32-3.html et grid-css32-3.css.

HTML : Dans la nouvelle page web, en dessous de l’élément contenant le texte “Pied de page”, ajoutez deux nouveaux éléments <div></div> contenant respectivement les textes “Colonne gauche ” et “Colonne droite” et ajoutez-leur des classes CSS.

CSS : Ajoutez une couleur d’arrière-plan aux deux nouveaux éléments que vous venez de créer.

CSS : Transformez le nouveau conteneur principal en grille.

CSS : Dimensionnez les lignes et colonnes de la grille pour obtenir la grille suivante :

Grille de l'interface 3

CSS : Définissez des zones de grilles afin de correspondre au modèle ci-dessous :

Zones de grille de l'interface 3

CSS : Disposez les différents éléments dans la grille pour obtenir le résultat suivant :

Aperçu de l'interface 3

Quatrième interface

Dupliquez la page HTML et le fichier CSS, renommez-les copies sous les noms grid-css32-4.html et grid-css32-4.css.

CSS : Appliquez les modifications nécessaires pour obtenir le résultat suivant :

Aperçu de l'interface 4