TP 18 : Variables CSS — Reproduction d'une vraie page responsive

Exercice 1 — Page responsive complète #

https://dev-LOGIN.users.info.unicaen.fr/TW1-2023/TP18/ex1/unicaen.html

<meta name="author" content="LOGINS" />

Préliminaire : variables CSS

Dans des projets complets, certaines valeurs utilisées dans la CSS peuvent être répétées à plusieurs endroits. Par exemple des valeurs de taille, de couleur, de police, etc. pourront être spécifiées N fois.

Si l'on décide de changer une de ces valeurs, il est très fastidieux d'en modifier toutes les occurrences, et le faire sans erreur est délicat. Pour remédier à cela, CSS introduit la notion de variable.

Consulter la page MDN d'introduction des variables CSS. Bien observer comment déclarer une variable avec les 2 tirets (--ma-couleur par exemple) et comment l'utiliser avec var(--ma-couleur).

Dans l'exercice nous utiliserons des variables CSS pour déclarer les principales couleurs de la page et sa largeur de base.

Page d'accueil du site de l'Université

L'exercice consiste à coder le HTML et CSS de la page d'accueil du site de l'Université. Commencer par observer le comportement de cette page sur des fenêtres de différentes tailles : certains éléments changent de style voire disparaissent complètement.

On va réaliser une version simplifiée de la page, en particulier sans sous-menus. Remarque importante : le HTML de la page originale n'est pas particulièrement propre : il n'y a pas de raison de s'en inspirer. Vous devrez faire vos propres choix de conception.

Fichiers du TP

Télécharger l'archive qui contient les fichiers pour le TP. Il y a un fichier avec tous les textes de la page, et une arborescence avec un fichier HTML et un fichier CSS à compléter, et toutes les images, rangées en fonction de leur utilisation (contenu ou présentation).

Première étape : Codage des grandes parties

Pour commencer, créer le code HTML et CSS des grandes parties de la page : la bannière de navigation, la partie spécifiant le public concerné (menu "Vous êtes..." et "Catalogue des formations", les liens mis en valeurs à la Une, la partie contenant les Actualités et l'Agenda, puis les 2 zones du pied de page. Voir le résultat avec un grand écran sur la capture ci-dessous.

Indications : les logos font 128px de hauteur, l'image de fond fait 480px de hauteur et les 4 zones en dessous font 1200px de large.

Deuxième étape : Création de variables CSS

On peut remarquer que certaines couleurs sont reprises à plusieurs endroits. On va donc créer des variables CSS pour les paramètres suivants :

    --coul-gris-clair: #F1F1F1;
    --coul-gris-moyen: #E4E4E4;
    --coul-gris-fonce: #707070;
    --coul-gris-dark: #555;
    --coul-gris-transparent: #575757b3;
    --coul-secondaire-site: #519D9E;
    --coul-actus: #484848;
    --largeur-base: 1200px;

Remplacer ensuite dans votre CSS toutes les occurrences de 1200px (c'est-à-dire les largeurs des 4 zones) par var(--largeur-base), et vérifier que ça fonctionne toujours.

Dans la déclaration de la variable --largeur-base, remplacer 1200px par 1600px. Recharger la page et vérifier que les zones font maintenant toutes 1600px, ceci en n'ayant modifié qu'une seule valeur.

Remettre 1200px.

Troisième étape : Codage de la page pour grand écran

Terminer le codage de la page HTML et du style CSS pour obtenir la version (presque) identique à la vraie page montrée dans la capture ci-dessous, en respectant les indications suivantes.

Indications

• La police de base est Ubuntu (ou sans-serif par défaut).
• Bannière
  • Les logos font 128px de hauteur
  • Le menu a un padding à droite de 40px et une marge en bas de 20px
  • Les items du menu font 200×40 pixels et sont en police Raleway bold
• Menu « Vous êtes » / « Catalogue »
  • On ignorera les 2 traits horizontaux blancs sur les côtés dans la page originale
  • L'image de fond fait 480px de haut
  • Les 2 blocs font 350px de côté, bordure de 6px et couleur de fond définie par la variable --coul-gris-transparent
  • Les 2 blocs sont espacés de 230px (115px de marge à gauche/droite pour chacun)
  • Les caractères sont en 19px, la hauteur de ligne en 35px avec un espacement de 0.03em (propriété letter-spacing)
• Bloc et liens à la Une
  • La couleur de fond du bloc gris est définie par la variable --coul-gris-clair
  • La police est Raleway bold
  • Les 3 liens sont dans un bloc de largeur définie par la variable --largeur-base
  • Les liens ont 40px de padding en haut et bas et leur bloc est de couleur de fond définie par la variable --coul-secondaire-site
• Bloc Actualités / Agenda
  • Le bloc fait 1200px de large
  • Les hachures autour sont dans l'image fond-hachure.png
  • Les titres h2 sont en police Raleway bold de 20px de haut, espacement 0.05em et hauteur de ligne 1.4em
  • Les blocs d'actualité ont la couleur de fond définie par la variable --coul-gris-moyen, les textes et bordures sont de la couleur définie par la variable --coul-actus, leur titre en Raleway bold en 18px, hauteur de ligne 24px et espacement 0.05em
  • Les mots-clés de chaque actu sont séparés par un point médian « · » (différent de « . »)
  • Les sous-titres de chaque item de l'agenda sont de la couleur définie par la variable --coul-secondaire-site
• Pied de page
  • Le gris du pied de page est défini par la variable --coul-gris-fonce

Quatrième étape : Version responsive

Maintenant que la version de base de la page est réalisée, on va commencer à gérer les modifications à effectuer en fonction de la taille de la fenêtre du navigateur.

Les paliers sont les suivants quand on réduit la fenêtre :

• À 1650px la padding à droite du menu se réduit :

  

• À 1470px les logos se réduisent à 100px de hauteur et les items du menu font 150×35 pixels :

  

• À 1200px, le résultat est illustré sur la capture ci-dessous, on a alors :
  • Le menu disparaît pour laisser place à un bouton ☰ Menu
  • L'espacement entre les boutons « Vous êtes » et « Catalogue », qui était de 230px, passe à 10% (5% de marge sur chacun)
  • Les 3 boutons verts se placent verticalement et font 680px de large
  • Les actualités se mettent au-dessus de l'agenda. La zone Actualités fait alors 880px de large.
  • Les zones dont on a fixé la largeur à 1200px avec --largeur-base ne doivent pas être plus larges que la fenêtre : faire en sorte qu'il n'y ait pas d'ascenseur horizontal.

  

• À 1000px, le pied de page institutionnel se met verticalement :
  

  

• À 900px, les actualités passent à 2 colonnes au lieu de 3. Il faut aussi modifier à 690px la largeur de la zone des actualités (qui faisait 880px de large auparavant) :
  

  

• À 800px, les boutons « Vous êtes » et « Catalogue » passent en mode vertical et leur largeur n'est plus fixe (on pourra utiliser l'unité vw pour mettre une largeur dépendant de la taille de fenêtre).

  

• À 630px, les actualités passent sur une colonne. Attention, il faut alors penser à modifier les largeurs des éléments qui avaient été mis à plus de 630px. Là aussi on pourra utiliser l'unité vw.

Optionnel : pour aller plus loin

Réaliser le menu du haut de page que nous avons omis depuis le début. Cela permet aussi de tester différents affichages (barre de recherche qui se réduit ou disparait, etc).