Web Statique
TP4 : CSS
CSS Layout et Responsive Web Design (RWD)
Objectif :
• La mise en page avec le système de grille CSS3 et les boites flexibles (flexbox)
• Création des pages web adaptatives (RWD) à l’aide des media queries.
Consignes :
• Téléchargez et décompressez le dossier TP4
• Pour chaque exercice, il faut bien examiner les codes HTML et CSS fournis.
Partie 1 : Placement des éléments flexibles
Exercice1 :
• Considérez le premier conteneur div avec l’id « exercice1 » dans TP4-1.html
• Complétez le style css du premier exercice comme indiqué sur la feuille de style TP4-
1.css, afin d’obtenir le résultat illustré ci-dessous.
Exercice 2 :
Complétez le style css du deuxième exercice afin d’obtenir le résultat illustré ci-dessous :
1) Appliquer au conteneur la disposition flexible
2) Aligner les éléments flexibles au centre selon l’axe principal
3) Modifier l’ordre de chaque élément afin d’obtenir le résultat souhaité. (Propriété
ordre)
MERYEM BENYOUSSEF 1
Web Statique
Exercice 3 :
Complétez le code css afin d’obtenir le résultat ci-dessous :
1) Appliquer au conteneur la disposition flexible
2) Permettre le retour à la ligne des éléments flexibles
3) Aligner les éléments flexibles selon l’axe principal, en ajouter des espaces entre eux
4) Donner une hauteur de 50px aux éléments A, B et C
5) Aligner les éléments B et C selon l’axe secondaire afin d’obtenir le résultat souhaité
(Propriété align-self)
6) On souhaite centrer les lettres (éléments span) :
a. Appliquer au conteneur des éléments span la disposition flexible
b. Aligner les éléments au centre selon les deux axes : principal et secondaire.
Partie 2 : Placement des éléments en grille
Exercice 4 :
Complétez le code css afin d’obtenir le résultat ci-dessous :
1) Appliquer au conteneur la disposition en grille
2) Créer la grille ci-dessous
3) Ajouter des espaces entre les colonnes de 10px, et entre les lignes de 5px
4) Placer les éléments dans la grille afin d’obtenir le résultat souhaité : utiliser les
propriétés grid-column et grid-row
MERYEM BENYOUSSEF 2
Web Statique
100px 1fr 1fr
100px
100px
100px
Partie 3 : Création d’une page en RWD
Exercice 5 :
Rappel : Le "viewport" correspond à la région visible à l'utilisateur. Elle sera par exemple plus
petite sur un smartphone que sur un écran d'ordinateur.
La balise HTML utilisée pour donner au navigateur des instructions de contrôle des dimensions
et de l'échelle d'une page web, est la balise <meta > avec l’attribut ‘’name’’ définit autant que
‘’viewport’’
➢ La propriété width=device-width demande à ce que la page s'adapte à la largeur de
l'écran de l'appareil de l'utilisateur.
➢ La propriété initial-scale=1.0 fixe le niveau de zoom initial à l'ouverture de la page.
➔ Documentation W3school sur RWD Viewport
1) Ajouter la balise meta ci-dessus à la page HTML TP4-2.html
MERYEM BENYOUSSEF 3
Web Statique
On souhaite créer une page web adaptée à un affichage sur 3 tailles d’écran :
➢ Il est conseillé de démarrer le design pour un petit écran puis d'ajouter des media
queries avec l'augmentation de la taille de l'écran (approche dîtes "mobile first").
Par exemple, pour faire une adaptation aux petits écrans (exemple d'un téléphone),
écrans moyens (exemple d'une tablette), et grand (exemple de l'écran d'un
ordinateur) on fera :
Complétez le code css de la feuille de style TP4-2.css en suivant les instructions des pages
suivantes, afin d’obtenir le résultat ci-dessous (Affichage téléphone, tablette et ordinateur) :
MERYEM BENYOUSSEF 4
Web Statique
A. Affichage téléphone :
Préparation de la barre de navigation :
1) La liste : La balise <ul> :
a. Enlever la marge interne (padding)
b. Enlever les puces de la liste non ordonnée (list-style-type)
c. Centrer le texte (text-align)
2) Les liens : La balise <a> :
d. Transformer les liens du menu en éléments de type bloc (display)
e. Donner à ces blocs la même hauteur que leur conteneur (height : inherit)
f. Ajouter une marge interne de 0.5rem. (padding)
g. Enlever le soulignement. (text-decoration)
On souhaite utiliser les boites flexibles pour la barre de navigation
3) Appliquer au conteneur (ul) la disposition flexible
4) Autoriser le retour à la ligne
5) Modifier l’alignement afin de centrer les éléments flexibles
6) Donner aux éléments flexibles (li) une largeur de 100%, afin qu’ils occupent toute la
largeur de l’écran du téléphone
On souhaite faire la mise en page avec le système de grille :
7) Appliquer au conteneur la disposition en grille
8) Créer la grille ci-dessous, utiliser la propriété grid-template-areas pour nommer les
zones de la grille
Remarque : le nombre de colonnes est déduit de l’affichage le plus large (ordinateur) et le
nombre de lignes de l’affichage le moins large (téléphone)
MERYEM BENYOUSSEF 5
Web Statique
1fr 4fr 1fr
100px Entete Entete Entete
min-content Menu Menu Menu
auto Contenu Contenu Contenu
auto Aside1 Aside1 Aside1
auto Aside2 Aside2 Aside2
100px Pied Pied Pied
9) Attribuer chaque éléments HTML à sa zone dans la grille (grid-area)
B. Affichage tablette :
Premier breakpoint : En utilisant la media query pour les largeurs d’une tablette :
10) Modifier la grille comme indiqué ci-dessous
11) Modifier la largeur des éléments flexibles <li> de la barre de navigation afin que chacun
occupe 25% de la largeur de leur parent.
Entete Entete Entete
Aside1 Menu Menu
Aside1 Contenu Contenu
Aside1 Contenu Contenu
Aside1 Aside2 Aside2
Pied Pied Pied
C. Affichage ordinateur :
Deuxième breakpoint : En utilisant la media query pour les largeurs d’un ordinateur :
12) Modifier la grille afin d’avoir l’affichage souhaité pour l’écran d’un ordinateur
Finalement : Ajouter les préfixes vendeurs nécessaires : https://autoprefixer.github.io/
Optionnel : Amusez-vous avec ce jeu pour maitriser la manipulation du système de grille :
http://cssgridgarden.com/#fr
MERYEM BENYOUSSEF 6
