TP M1106 n°3 - Partie 2 sur 2 - Durée 2h

Sites web adaptatifs HTML 5 / CSS 3 avec le système de grille CSS Grid Layout

html5 CSS3 M1106 rwd

Résumé de l'épisode précédent...

page 1 tel survol page 1 tab survol page 1 ordi survol

Objectif de cette deuxième partie de TP

Vous avez également 3 quiz CSS Alsacréations (10 questions) à faire en fin de TP pour bien réviser avant le QCM noté de la séance prochaine.

CSS Grid Layout

Vous avez vu dans la première partie de la séance comment faire "à la main" une grille de 12 colonnes avec un positionnement flottant et des tailles en pourcentage.

Depuis CSS a évolué et a été créé le concept de grille CSS CSS grid layout.

Cette grille est facile à utiliser.

cssgridgarden

Faire une capture d'écran de la page finale du tutorial (plus grande que celle ci-dessus bien sûr) prouvant que vous avez fini entièrement ce tutoriel (en ayant tout juste). Vous mettrez cette capture dans une page du site que vous allez faire durant cette deuxième partie de séance TP.

Un mémento CSS Grid Layout fait par Alsacréations => https://github.com/alsacreations/guidelines/blob/master/grid-cheatsheet.pdf pour vous aider.

grid-cheatsheet.pdf

Un autre guide plus complet.

page 1g tel page 1g tab page 1g ordi survol

Comme pour votre site précédent, vous suivrez la philosophie de développement Mobile-first et commencerez par construire une grille pour le mobile en premier. Votre fichier CSS d'habillage de votre site aura donc aussi la structure suivante :

/* Design général en particulier pour les fenêtres plus petites que 600px; */

@media only screen and (min-width: 600px) {
    /* Modifications du design pour les fenêtres plus larges que 600px*/
}

@media only screen and (min-width: 768px) {
    /* Modifications du design pour les fenêtres plus larges que 768px*/
}
* {
    box-sizing: border-box;
}

html {
    font-family: "Lucida Sans", sans-serif;
}

body{
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: 2fr 2fr 2fr 2fr 1fr;
  grid-gap: 10px; /* Pour ajouter un gap entre les cases de la grille*/
}

.header {
    grid-row: [... ligne 1 ...];
    grid-column: [... toutes les colonnes ...];
    [...]
}

.menu {
    grid-row: [... ligne 2 ...];
    grid-column: [... toutes les colonnes ...];
}

[...]

.contenu {
    /* Il vous faut ajouter cette classe dans le HTML pour le bloc contenu de la page */
    grid-row: [... ligne 3 ...];
    grid-column: [... toutes les colonnes ...];
}

.aside {
    grid-row: [... ligne 4 ...];
    grid-column: [... toutes les colonnes ...];
    [...]
}
.footer {
    grid-row: [... ligne 5 ...];
    grid-column: [... toutes les colonnes ...];
    [...]
}

Il vous fait ajouter une classe contenu.

@media only screen and (min-width: 600px) {
  /* Pour petits écrans / tablettes */
    body{
        grid-template-rows: 2fr 2fr 2fr 1fr;
    }
    .menu {
        grid-row: [... ligne 2 ...];
        grid-column: [... colonne 1 ...];
    }
    .contenu {
        grid-row: [... ligne 2 ...];
        grid-column: [... colonne 2 ...];
    }
    .aside {
        grid-row: [... ligne 3 ...];
        grid-column: [... toutes les colonnes ...];
    }
    .footer {
        grid-row: [... ligne 4 ...];
        grid-column: [... toutes les colonnes ...];
    }
}
@media only screen and (min-width: 768px) {
  /* Autres écrans d'une largeur minimum de 768px */
    body{
        grid-template-rows: 2fr 6fr 1fr;
    }
    
    .menu {
        grid-row: 2;
        grid-column: 1;
    }
    .contenu {
        grid-row: 2;
        grid-column: 2;
    }
    .aside {
        grid-row: 2;
        grid-column: 3;
    }
    .footer {
        grid-row: 3;
        grid-column: 1/-1;
    }
}

Trois quiz CSS Alsacréations à faire

Des questions de ces QCM et des QCM w3schools HTML et CSS réalisés durant les TP 1 et 2 seront reprises dans le QCM noté qui vous sera demandé en début de TP4.

Via zoom partagez votre écran pour faire valider votre site par l'enseignant.

Finished! Hurrah! 🤟⚡️Si vous avez fini avant la fin, aidez les autres à finir aussi :-) N'oubliez pas de déposer votre archive sur Moodle pour ce TP.

Regardez dès à présent le TP4 pour prendre de l'avance sur votre site personnel à réaliser.

Beaucoup d'exemples ici pour développer votre futur site https://gridbyexample.com/examples/