Création d’une interface fluide CSS25

Cet exercice consiste à créer une interface simple et fluide pour un site internet.

Exemple final

Consignes de l’exercice

Préparation de l’exercice

Créez un nouveau dossier sur votre ordinateur à l’emplacement de votre choix qui servira de dossier racine. Ce dossier devra contenir tous les fichiers de votre exercice. Nommez-le correctement en respectant les règles de nommage d’un fichier sur Internet.

Créez une nouvelle page .html avec la structure de base suivante :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Exemple interface</title>
    </head>
    <body>
    </body>
</html>

Créez un nouveau fichier .css vierge.

Liez le fichier .css que vous venez de créer à votre page .html.

Création du contenu de la page web

En utilisant des éléments de type <div></div>, recréez (dans la page web) la structure illustrée par l’image ci-dessous. Attribuez la classe indiquée sur l’illustration à chaque élément.

Aperçu de la structure

Dans le bloc .entete, insérez un paragraphe contenant le nom du site.

Dans le bloc .entete, ajoutez un lien hypertexte sur le nom du site pointant vers la page courante. Il s’agit de faire comme si vous alliez construire nu site complet, le nom du site pointe systématiquement vers la page d’accueil.

Dans le bloc .menu, ajoutez une liste non-ordonnée contenant trois liens hypertextes permettant de naviguer entre les différentes pages d’un futur site.

Dans le bloc .contenu, ajoutez :

  • Un titre de niveau ;
  • Plusieurs paragraphes un peu long (utilisez du Lorem Ipsum).

Dans le bloc .piedpage, ajoutez une ligne de texte.

Réglages de l’interface web

Afin de distinguer facilement les cinq blocs principaux de contenu, ajoutez une couleur d’arrière-plan différente pour chacun des blocs : .page, .entete, .menu, .contenu et .piedpage.

Aperçu des couleurs d'arrière-plan des blocs

Supprimez les marges de l’élément body afin de supprimer les bordures blanches tout autour de l’élément .page.

Suppression de la bordure de body

Supprimez les marges externes du paragraphe présent dans l’en-tête .entete p.

Modifiez l’élément .entete afin de correspondre au modèle de l’image ci-dessous. Pour cela, vous devez régler la hauteur et les marges internes.

Dimensionnement de l'en-tête

Modifiez l’élément .entete et/ou son contenu afin de correspondre au modèle de l’image ci-dessous. Le lien hypertexte doit être conservé.

Pour centrer verticalement un texte affiché sur une seule ligne, il suffit d’appliquer la propriété line-height sur le texte. La valeur à saisir doit alors correspondre à la hauteur du conteneur.

Mise en forme de l'en-tête

Modifiez la liste de l’élément .menu afin de positionner les liens sur une seule ligne.

  1. Sélectionnez les lignes de la liste contenu dans menu .menu li et utilisez la propriété css display qui permet de changer le comportement d’un élément html. La valeur à utiliser sera dans ce cas là inline-block.
  2. Supprimez les marges internes et externes de la liste contenu dans menu.
Alignement des liens du menu

Transformez les liens du menu en éléments de type block afin de pouvoir les dimensionner à volonté. Ajoutez-leur ensuite une bordure et des marges internes et externes pour correspondre au modèle de l’image ci-dessous.

Mise en forme des liens du menu

Entre le .menu et .contenu, vous voyez la couleur correspondant à .page. L’objectif de la question suivante va être de coller .contenu à .menu

Supprimez les marges externes des titres de niveau 1 dans .contenu.

Afin que le texte ne soit pas collé aux bords, ajoutez une marge interne sur l’élément .contenu.

Mise en forme du contenu

Élargissez au maximum la fenêtre de votre navigateur et observez le contenu. En fonction de la dimension et des réglages de votre écran, vous constaterez plus ou moins facilement que la lecture du texte peut devenir compliquée sur des écran larges puisque les lignes deviennent beaucoup trop longue (cf. l’image ci-dessous). Il va donc falloir restreindre les dimensions du contenu de la page pour éviter le problème…

Exemple d'affichage sur un écran large

Pour le reste des questions de cette partie Réglages de l’interface web, pensez à manipulez la largeur de la fenêtre de votre navigateur lors de vos tests !

Utilisez la propriété css max-width sur l’élément .contenu afin d’éviter le problème évoqué précédemment. Une valeur correcte pour le contenu serait de 1000px maximum.

Réglage de la largeur maximale pour le contenu

Pour que le bloc .contenu soit centré au milieu de la fenêtre du navigateur, il faut maintenant lui ajouter des marges externes automatiques à gauche et à droite.

Centrage du contenu dans la fenêtre

Vous pouvez considérer que l’en-tête et le menu sont également trop larges… Si c’est le cas, il serait judicieux de travailler directement sur l’élément .page qui contient la totalité du contenu. Essayez donc d’obtenir le résultat suivant :

Site entièrement contraint à 1000px

Vous pouvez également choisir une solution intermédiaire en mettant des valeurs différentes à l’élément .page et à l’élément .contenu. Reproduisez la mise en forme suivante :

Contraintes différentes pour .page et .contenu

Vous souhaitez contraindre la largeur de l’en-tête et du menu tout en conservant les couleurs d’arrière-plan ? Il faut donc appliquer les réglages aux bons éléments… Reproduisez donc la mise en forme suivante (remarquez que les couleurs de l’en-tête et du menu font jusqu’aux bords):

Contraintes et conservation des couleurs d'arrière-plan

Mise en forme de la page

L’interface est en place, il s’agit donc maintenant de finir la mise en page pour l’adapter à vos goûts.

Définissez une police par défaut pour votre page. Vous pouvez pour cela utiliser Google Font.

Modifiez les couleurs de la page en définissant un palette de couleurs avec un outil tel que Paletton.com ou Coolors.co.

Ajustez la taille des caractères des différents éléments.

Veillez à ce que les liens du menu changent d’aspect au survol de la souris.

Exemple final

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.