Tutoriel : Création d'une Mise en Page en Trois Colonnes

Construire une page avec plusieurs colonnes partie 1
Vidéo non disponible ! Réessayez plus tard
Cette vidéo fait partie de la formation
Apprendre HTML5 et CSS3 / Part 3
Revoir le teaser Je m'abonne
3,0
Transcription

59,90€ Je commande

À partir de
27€ /mois
Je m'abonne à Elephorm

Description Programme Avis
3,0
59,90€ Je commande

À partir de
27€ /mois
Je m'abonne à Elephorm

Les objectifs de ce tutoriel sont de vous apprendre à :
1. Créer une mise en page en trois colonnes avec HTML et CSS.
2. Utiliser des classes pour styliser des sections spécifiques.
3. Ajouter des ombres et des arrondis aux éléments pour une présentation esthétique.

Apprenez à créer une mise en page en trois colonnes avec des ombres et des classes spécifiques en HTML et CSS.

Dans ce tutoriel, nous allons vous montrer comment réaliser une mise en page en trois colonnes en utilisant HTML et CSS. La mise en page comprendra des éléments spécifiques tels que des cartouches avec des ombres et des classes. Tout d'abord, nous allons créer une nouvelle feuille de style que nous nommerons style 3 colonnes. Ensuite, nous allons ajouter des classes pour chaque section afin de les styliser correctement.

Nous travaillerons sur trois sections principales : une section de gauche avec des éléments comme la météo, les points de vente et le calendrier, une section centrale pour le contenu principal, et une section de droite dédiée à la publicité. Chacune de ces sections aura des propriétés spécifiques, telles que display: inline-block et des alignements verticaux pour assurer une mise en page cohérente et alignée.

Enfin, nous verrons comment ajouter des couleurs spécifiques à chaque section pour mieux les différencier, et nous terminerons avec un aperçu de notre travail dans un navigateur pour vérifier la mise en page finale.

Voir plus
Questions réponses
Quelle propriété CSS est utilisée pour aligner les éléments en ligne?
La propriété CSS display: inline-block est utilisée pour aligner les éléments en ligne tout en permettant de définir leurs dimensions.
Quelle est l'importance des classes dans ce tutoriel?
Les classes permettent de styliser spécifiquement chaque section avec des propriétés distinctes, comme des ombres ou des couleurs spécifiques, rendant la mise en page plus modulable et organisée.
Pourquoi est-il recommandé d'ajouter du padding aux éléments?
Le padding est ajouté pour créer un espace intérieur autour du contenu d'un élément, ce qui améliore l'esthétique et la lisibilité de la mise en page.
Nous allons à présent réaliser la mise en page qui est présentée à l'écran. Cette mise en page présente trois colonnes qui vont être placées les unes à côté des autres. À l'intérieur des colonnes, il y a dans la partie gauche des petits cartouches qui ont un petit ombret. Les colonnes ont elles-mêmes un petit ombret. Et puis cet élément-là a lui-même un petit ombret. Nous n'avons pas tout réalisé, mais il y a quand même pas mal de choses à faire. Nous allons regarder tout de suite notre fichier HTML de base. Voici le fichier HTML de base. Nous le regardons dans un navigateur. Il y a quand même pas mal de travail à réaliser pour obtenir notre mise en forme. Étudions un tout petit peu de quoi il est question. Nous avons une section qui regroupe l'ensemble des parties, puis une autre section qui regroupe ce premier point. Cela représente la zone qui est située ici, un calendrier. C'est tout l'ensemble. Nous avons l'article avec cette zone-là, son titre, son paragraphe et son image, et puis son footer. Et enfin, ici, nous avons une partie qui s'appelle Aside, qui est simplement consacrée au niveau de la publicité. Donc ça, c'est nos éléments, c'est notre travail. Je vais tout d'abord créer une nouvelle feuille de style, que je vais appeler style 3 colonnes. Voilà. Copié, je crée un nouveau document que j'enregistre. 3 colonnes css.css Je reviens sur mon document et nous allons maintenant attaquer notre mise en forme. Nous allons tout de suite attaquer la mise en forme pour pouvoir obtenir trois éléments les uns à côté des autres. Regardons comment cela s'appelle. La section, et puis nous avons une section qui est de nous à vous, etc. Alors ce que je vous propose, c'est qu'au niveau de cette section-ci, puisque c'est celle qui est située à gauche, pour bien la repérer, nous lui appliquons une classe. Une classe que nous allons appeler, comme son titre finalement, nous et puis vous. Donc ça va être une première chose. On va travailler un tout petit peu les éléments par rapport à ce que l'on compte faire avec. Et puis on compte également lui mettre une ombre, mais cette ombre, elle va s'appliquer à d'autres éléments. Donc ça va être une deuxième classe. En effet, il est possible d'ajouter plusieurs classes à l'intérieur d'un même élément. Donc c'est ce que nous venons de faire ici avec cet élément. Pendant que nous y sommes, l'ensemble possède également une ombre. Donc j'ajoute également un petit ombret sur la section. Je vous rappelle, on regarde rapidement. Cet ombret que je viens de mettre, c'est celui-là. Et puis l'autre, c'est celui-ci avec cet élément qui s'appelle nouveau. Nous allons continuer. Alors le deuxième élément, qui est la météo. Alors juste là. Donc météo, point de vente, calendrier et challenge ont également une ombre. Donc c'est pour ça qu'il est intelligent d'ajouter une petite classe par rapport à ça. Donc classe égale ombre. Et puis nous constatons également que cet élément a un petit arrondi, qui doit faire une taille semblable à celle-ci. Donc nous allons lui ajouter une classe qui s'appellera rectangle. C'est ça pour la suite. Voilà pour celui-ci. Nous allons faire exactement la même chose. Finalement un copier-coller. Copier pour la classe qui a point de vente. Voilà. Div, classe, point de vente. Et puis pareil pour le calendrier. Donc div, pomme V pour le calendrier. Enfin, pour le challenge du mois. Div, pomme V. Et nous avons nos deux classes qui sont apparues. Nous travaillons peut-être la suite un tout petit peu plus tard. Alors ensuite, nous avons maintenant la partie centrale. Alors cette partie centrale, elle a une ombre. Pareil, nous allons lui ajouter une petite ombre. Et puis nous allons lui donner un nom à elle finalement, qui s'appelle contenu, pour pouvoir bien la différencier, cette partie des autres parties. Donc nous avons ici nouveau. Là nous avons contenu avec son nombre. Et puis troisième partie, c'est cette partie-là, la aside. Nous avons déjà ajouté la classe, alors pub, puisqu'il s'agit de la pub, la même chose que celui-là, qui s'appelait contenu. Et puis son nombre est également là. Nous avons globalement maintenant tout à peu près prêt pour pouvoir commencer. Le footer a également une classe égale ombre. J'enregistre mon document. Ce n'est pas la peine de regarder, puisque a priori, nous n'avons pas fait grand-chose. Alors maintenant, de quoi avons-nous besoin ? Alors nous allons avoir besoin d'éléments ici, pour bien différencier le nous et le vous, la météo, le météo point vert, le point de vente, le calendrier, le challenge du mois. Donc ces éléments, je propose qu'on mette une classe qui s'appelle rouge, vert, une classe qui s'appelle orange, une classe qui s'appelle bleue, pour pouvoir l'appliquer facilement à ces différents éléments. Alors voici, au niveau de l'élément qui s'appelle météo, c'est le premier. Dans le H2, mettons une classe égale rouge, par exemple. Ensuite, au niveau de point de vente, on fait la même chose avec classe vert. Et enfin, ici, pour calendrier, classe orange. Le challenge du mois, qui lui est bleu, une classe égale bleu. Voilà, nous avons globalement terminé l'ensemble de structurer nos différents éléments. On va pouvoir maintenant aller à l'étude des différents éléments. Voilà, nous avons terminé l'ensemble de structurer nos différents éléments. On va pouvoir commencer à travailler. Nous allons aller dans l'élément 3 colonnes, et puis on va faire simplement une toute petite règle de style. Et puis, pour éviter d'alourdir trop ce tuto, nous terminerons la mise en forme sur le tuto suivant. Alors, conteneur. Nous allons à l'élément section, qui est situé ici. Section, nous, vous, section contenu, et section pub. Donc, section. Un peu plus loin, nous, vous. On ouvre et on ferme. Je vais tout de suite les écrire. Section contenu. Et puis, section. Un petit peu plus loin, .pub. Alors, à l'intérieur, chacune d'entre elles, nous allons écrire pratiquement la même chose. Donc, display. Inline block. Ça, c'est une première chose. Nous avons vu qu'il était assez utile d'ajouter une propriété qui s'appelait le vertical align top, pour que l'ensemble des éléments soient tous au même niveau. Donc, ça, nous allons l'écrire également. Et puis, nous allons le recopier sur les deux autres, puisqu'il s'agit de la même chose. Je vous propose également d'ajouter à contenu sa taille. Alors, sa taille a été prévue. Donc, 8. Avec un padding de 5 pixels. Voilà. Ce qui nous fait, en fait, une taille globale de 530 pixels. Il faut toujours ajouter le padding à la taille de l'élément, puisque le padding fait partie de l'élément. Donc, ça, voilà, pour contenu. Pardon. Il faut mettre ça dans contenu. Pour contenu, nous avons terminé. Nous allons maintenant faire la zone de pub. Alors, la zone de pub a une taille de 175 pixels. Voilà. Et puis, un padding de 0. Et enfin, allons voir l'élément qui s'appelle nouveau, tout simplement. Donc, cet élément a une taille de 155 pixels. Et un padding de 10. Avant d'aller voir, je vais corriger ce petit X. Voilà, nouveau. Nous enregistrons, et nous allons voir ce que ça donne. Nous enregistrons, et nous allons voir ce qu'il en retourne au niveau de la mise en forme. Alors, voilà. Nous avons bien nos trois parties qui sont bien distinctes, maintenant. La partie gauche, avec météo, point de vent, etc. La partie centrale, et la partie située à droite. Nous allons en rester là par rapport à ce tuto. Je vous invite à regarder le tuto suivant pour pouvoir continuer cette mise en forme.

Programme détaillé de la formation

1 commentaire
3,0
1 vote
5
4
3
2
1
Cicine
Il y a 1 year
Commentaire
Dans la séquence slide auto, pas d'explication sur le 12% du slider auto; quelle est l'origine de ce chiffre? pas d'explication me bloque. Je suis obligée d'aller voir une autre plateforme qui présente le slide auto.
Dommage.
Nos dernières formations XHTML/CSS
  • Créer un site web avec HTML/CSS
    Découvrir
    Avant d'apprendre à développer et mettre en ligne votre propre site Internet, il est important de bien connaître les bases du HTML et du CSS. Dans cette formation en vidéo et cours en ligne, vous découvrez ce qu'est le HTML et CSS ? Le fonctionnement des sites web ainsi que la structure d'une page HTML.  Vous êtes guider pas à pas pour apprendre à intégrer des images, de l'audio et des vidéo. Vous apprenez à gérer et ajuster les polices en CSS, à comprendre la structure du CSS, les tableaux, boutons et formulaires en CSS.  Vous suivez la méthodologie de mise en page CSS et à styliser une page web avec le CSS. Formation pratique vous créez et stylisez les éléments principaux d'un site web avant de mettre en ligne et indexer un site, d'ajouter des éléments graphiques en CSS et d'animer un site en CSS
    16h20 14 leçons
  • Apprendre CSS 3
    Découvrir
    14h58 172 leçons 4,50 / 5
  • Apprendre HTML 5 - Les fondamentaux
    Découvrir
    Maîtriser les fondamentaux du language HTML5.
    5h11 101 leçons 3,67 / 5
  • Maîtriser Materialize CSS - Le framework pour le Material Design
    Découvrir
    Maîtriser le framework Materialize CSS pour faire du Material Design
    2h22 20 leçons
  • Maîtrisez les Flexbox CSS - La mise en page responsive
    Découvrir
    Maîtriser la mise en page grâce à la flexbox issue du CSS 3
    46min 9 leçons 4,33 / 5