CSS : conception avec Grid

Name: CSS : conception avec Grid
Author: Cliff Brozo

Comment comprendre et utiliser la conception de grilles

Preview the first lesson free — get full access to all 4 lessons.

Cours : à la demande

(musique entraînante) Bienvenue à nouveau au cours de Knowledge City sur les feuilles de style en cascade. Je suis Cliff Brozo, je suis votre instructeur. Et aujourd'hui, nous allons parler de conception, en utilisant une grille. Nous verrons comment utiliser les conteneurs, nous allons jouer avec la mise en page et nous découvrirons quels articles pour mettre dans quelle zone de la grille que nous créons. Nous allons également jeter un œil à une mise en forme pour créer des pages comportant plusieurs colonnes. Nous jouerons avec un menu élégant et nous créerons des articles et des accessoires et les styliserons. Jetons un coup d'œil à ce à quoi cela va ressembler. Nous allons créer une page avec trois colonnes inégales. Certaines colonnes seront plus petites, d'autres plus grandes mais nous les rendrons tous différents. Nous utiliserons un conteneur et à l'intérieur du conteneur, nous mettrons du texte et des images. Nous varierons la taille des conteneurs et créer des articles à part et faites une mise en page à trois colonnes. Nous utiliserons un conteneur de grille et mettez beaucoup d'images dans notre grille. Es-tu prêt? Je suis. Allons-y. Encore une fois, nous utilisons Adam comme logiciel de conception. Et ici, nous allons regarder notre première page, traitant d'un conteneur. Cette ligne bleue que vous voyez est le conteneur réel. Et tout ce que je mets ici peut être stylisé différemment que l'extérieur du conteneur. Vous pouvez maintenant choisir de mettre cette ligne bleue ou n'importe quelle couleur ou pas du tout de ligne. Personne ne sait donc que vous traitez à l'intérieur du conteneur. Tout ce dont tu as vraiment besoin est de mettre en place une zone de contenu en CSS puis appelez-le dans votre HTML. Donc dans cette image, sur le côté droit de votre écran, J'ai une zone appelée "contenu" et la largeur du contenu est de 80% et les marges gauche et droite sont définies automatiquement. Donc, mon conteneur fait 80% de la page avec 10% à gauche et 10% à droite. J'utilise ce conteneur en l'appelant dans une division, dire le contenu égal de classe. Je peux redimensionner ceci et maintenez toujours ma fenêtre de contenu de 80%. Et si ça devient grand ou petit, le texte est automatiquement redimensionné correctement. Jetons un coup d'œil au CSS qui nous permet de le faire. Dans mon conteneur CSS, mon étiquette corporelle a le fond de mousseline de citron, quelques marges, la taille de la police et j'ai choisi une police appelée MV Boli. Ma classe de contenu définit la largeur à 80%, et ce que tu vois ici est la même chose que vous voyez sur l'image qui est inclus dans la page Web. La bordure est cette ligne bleue Dodger. Et ce que je fais pour faire c'est enlever ça afin que vous puissiez voir exactement à quoi ressemble le conteneur avec la frontière qui est là où elle est maintenant et sans la frontière. Donc je vais supprimer cette ligne, je vais enregistrer le CSS et j'ai à nouveau la page sans la bordure. Maintenant, il n'y a pas de bonne réponse ou de mauvaise réponse quant à savoir si vous devez ou non afficher une bordure. Certaines personnes adorent ça, certaines personnes ne le font pas, remettons-le en et nous avons une ligne bleue autour de notre conteneur. J'ai utilisé un rayon de bordure de 25 pixels pour me donner un coin courbe et j'ai mis du panoramique juste pour déplacer le texte du bord du coin. Nous avons développé un site Web traitant des conteneurs. Nous allons vous montrer comment créer trois colonnes. Nous allons jeter un œil à une ville du New Hampshire, et une autre ville du New Hampshire, la route automobile dans le New Hampshire, puis nous discuterons de quelques commentaires CSS. Nous allons passer à notre disposition en trois colonnes. Et avant de cliquer sur ce bouton, Je tiens à souligner que les boutons sont stylisés avec du code CSS sophistiqué. Jetons un coup d'œil à ce code. En bas de notre page est la section de navigation pour CSS. J'ai créé une couleur d'arrière-plan pour ma barre de navigation de Dodger blue. C'est le bleu que vous voyez ici. J'ai masqué les débordements pour éviter les chevauchements sur les images, et j'ai de nouveau arrondi les coins. Mes liens flottent sur la gauche. Ils sont de couleur mousseline citron qui correspond à l'arrière-plan et c'est une belle astuce à faire. Quelle que soit la couleur de votre box pour la navigation, utilisez la couleur contrastante. C'est la page de fond. J'aligne le texte au centre. Ma décoration de texte de none supprime le soulignement. Et rappelez-vous, il s'agit d'un lien hypertexte. Donc, il supprime le soulignement, et j'ai mis du rembourrage à gauche et le droit de chaque mot. Voici la partie chic. Quand je survole le lien, Je retourne la couleur et la couleur de fond passant du bleu Dodger à la mousseline citron. Là où j'avais le bleu Dodger comme arrière-plan, maintenant le bleu Dodger est la couleur. La mousseline de citron était la couleur, maintenant la mousseline de citron est le fond et faire le bouton on dirait qu'il a également des coins arrondis, Je vais mettre un rayon de bordure. Quand je survole chacun des liens, le texte prend la couleur d'arrière-plan et cela donne l'illusion d'un bouton.

Intermédiaire Fournisseur : Cliff Brozo 4 leçons · 23m en Arabe, Allemand, Anglais, Espagnol, Français, Portugais, Chinese

Description du cours

Dans ce cours, vous examinerez la mise en page et la conception de la grille, en prenant un code compliqué et en le convertissant en quelque chose qui a du sens visuellement, afin que vous puissiez mieux comprendre ce que vous faites. Vous aurez la possibilité de manipuler la disposition de la grille, d'apprendre à utiliser des conteneurs et de déterminer quels éléments placer dans quelle zone de la grille que vous créez. La disposition en grille est une partie importante du CSS et un outil essentiel pour donner vie à vos sites Web.

Ce que vous allez apprendre

Concevoir une mise en page en grille (grid layout) en CSS
Explorer les outils disponibles pour la conception de grilles
Utiliser des conteneurs pour structurer les mises en page en grille
Déterminer les éléments à placer dans chaque zone de la grille
Créer des menus attrayants avec CSS Grid
Styliser des articles et des encarts (asides) au sein d'une grille

Points clés à retenir

Le cours convertit le code de grille complexe en quelque chose qui a du sens visuellement, afin que les apprenants comprennent mieux ce qu'ils font.
Les apprenants s'exercent à manipuler la mise en page en grille et à utiliser des conteneurs pour organiser le contenu.
La mise en page en grille (grid layout) est présentée comme une partie importante du CSS et un outil essentiel pour donner vie aux sites web.
Le cours couvre le placement d'éléments dans des zones spécifiques d'une grille et la stylisation d'éléments tels que les menus, les articles et les encarts (asides).

Foire aux questions

Que vais-je apprendre dans ce cours ?

Vous examinerez la mise en page et la conception en grille, manipulerez la mise en page en grille, apprendrez à utiliser des conteneurs et déterminerez quels éléments placer dans quelle zone de la grille. Les objectifs incluent la conception d'une grille en CSS, l'exploration des outils de conception de grille, la création de menus attrayants et la stylisation des articles et des encarts (asides).

Comment le cours est-il structuré ?

Le cours est organisé en quatre leçons : Conception en grille Partie 1 (Grid Design Part 1), Conception en grille Partie 2, Conception en grille Partie 3 et Conception en grille Partie 4.

Quelles compétences ce cours couvre-t-il ?

Il couvre les codes CSS, les frameworks CSS, CSS Grid, le système de grille, la mise en page en grille et le CSS orienté objet.

Pourquoi l'apprentissage de la mise en page en grille est-il important ?

La mise en page en grille est une partie importante du CSS et un outil essentiel pour donner vie à vos sites web.