CSS : mise en page

Name: CSS : mise en page
Author: Cliff Brozo

Comment mettre en page une page Web en utilisant CSS

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

Cours : à la demande

(musique animée) Bienvenue dans le cours de KnowledgeCity sur les feuilles de style en cascade intermédiaires. Je m'appelle Cliff Brozo. Je suis ton professeur et aujourd'hui nous allons explorer la mise en page des pages avec des feuilles de style en cascade. Nous verrons comment créer des titres collants. Nous verrons comment créer une barre de navigation. Nous parlerons de différents domaines de la page, la fenêtre de contenu, les côtés, la fenêtre principale, les pieds de page, les en-têtes. Mettez toutes ces choses ensemble sur la page. Nous parlerons d'articles et nous verrons comment formater la page entière afin qu'il puisse paraître à son meilleur. Commençons. La première chose que nous devons souligner est que nous allons utiliser un logiciel appelé Atom, ATOM, et vous pouvez le trouver et téléchargez-le sur atom.io. La raison pour laquelle nous utilisons Atom c'est pas vraiment important si vous avez une machine Windows ou une machine Apple, Atom fonctionne sur les deux et ça va nous permettre pour voir le code et les résultats en même temps car il dispose d'une fonction d'aperçu en direct. Alors ce que tu regardes est une page Web que nous avons créée pour illustrer les leçons que nous allons apprendre dans cette session. Tout d'abord, nous allons parler d'en-têtes collants. Et par des en-têtes collants, nous voulons dire un en-tête qui ne bouge pas lorsque vous faites défiler. Donc si je fais défiler vers le bas, le contenu de l'écran changera mais l'en-tête restera là où il est censé être. Ce que cela nous permet de faire c'est donner à l'utilisateur une navigation qui reste sur la page peu importe où ils regardent sur la page. L'autre chose que nous venons de regarder est la barre de navigation et il y a une tonne de façons différentes de faire de la navigation. Dans ce cas, tout ce que nous avons fait a été d'échanger des couleurs lorsque l'utilisateur survole le pointeur de la souris sur cet élément particulier. Jetons un œil au code qui accomplit cette page. Le code HTML est assez simple. J'ai un lien vers ma feuille de style qui se trouve dans un dossier CSS. Puis je commence par mon corps et je crée une section d'en-tête qui contient une division qui régit la façon dont l'en-tête collant va chercher et je crée une classe appelée stick_top. Et régit également la section de navigation. Donc stick_top est quelque chose que nous déclarons à l'intérieur de notre programme CSS et nous examinerons cela dans une seconde. Mais c'est pourquoi lorsque nous écrivons le code Sticky Headers, nous voyons le texte bleu ici. Nous pouvons voir qu'il y a un certain soulignement. Nous avons un fond orange. Tout cela est géré dans le fichier CSS. En descendant la page, nous arrivons à notre section PRINCIPALE et la section MAIN contient tous du contenu que nous allons mettre sur la page. Et encore une fois, je déclare une classe en CSS appelé main_content c'est la mise en forme de cette zone particulière. Je commence avec un H1. Cela met juste un titre sur la page, suivi d'un paragraphe de texte J'espère que c'est quelque peu intéressant à lire. Puis je crée quelque chose qui s'appelle un aparté et si vous n'avez jamais utilisé de côté auparavant, c'est une belle façon pour attirer votre attention sur une zone de l'écran. Maintenant, j'ai mis ça de côté pour inclure une belle barre verte qui a un fondu. J'ai mis le texte en italique et j'ai défini la largeur, et encore une fois, nous verrons comment cela se fait dans le code CSS. Puis je continue avec mon sujet et parler d'un autre paragraphe et puis j'arrive à quelque chose qui s'appelle un article où le texte est affiché dans une zone spécialement formatée. Dans ce cas, je regarde les scores de baseball. Les informations qui se trouvent au bas de cet article est juste une série de H1 et H2 et ce que vous voyez ici est l'Unicode pour imprimer un peu de baseball. Nous continuons sur la page et nous arrivons à la section pied de page. Dans la section pied de page, j'ai mis un courrier à des informations qui plane de la même manière que font les barres de navigation et dans ce cas particulier, J'ai de nouveau utilisé Unicode. La première fois pour obtenir une petite enveloppe rapide. Et je sais que les enveloppes ne sont pas à la mode des e-mails mais l'idée est que nous envoyons une sorte de courrier. Et puis j'ai mis un autre lien pour un téléphone oui, j'ai utilisé le & phone, qui a une fonction Unicode nommée qui me donne un téléphone noir qui une fois de plus changera en blanc. Enfin, j'ai mis un avis de droit d'auteur avec le © et je vais y chercher le petit c. Et je ferme mes balises HTML dans le même ordre qu'ils étaient ouverts. Jetons donc un œil au CSS qui va avec cette page particulière. Ce que j'ai fait pour toi est-ce que j'ai mis des commentaires sur à peu près toutes les lignes de CSS pour que vous sachiez ce que fait la ligne. Tout d'abord, je règle le codage et la mise en forme de trois balises HTML de base, l'étiquette du corps, qui commence à la première ligne, la navigation, qui commence à la ligne six et la règle horizontale, qui commence à la ligne 12. Pour le corps, je pose tout le corps à une police quelque peu fantaisiste et si pour une raison quelconque Comic Sans MS n'est pas disponible sur le PC de l'utilisateur, Je prendrai n'importe quelle police sans empattement et encore une fois, nous avons appris les empattements il y a longtemps dans la leçon pour débutants. J'utilise MidnightBlue comme couleur et j'aime utiliser des couleurs nommées chaque fois que je le peux. S'il s'agit d'un nombre hexadécimal, les gens doivent alors chercher la couleur. Ce que tu remarqueras aussi, c'est que j'ai pris le temps aligner mon code et j'ai aligné tous mes deux points où je pourrais les rendre beaux et propres. Dans le corps, tout ce que j'avais à faire pour les aligner, c'est un espace afin que mes deux points soient alignés puis espacer un peu plus pour que mes points-virgules soient alignés. Le point de faire ça est-ce que lorsque le code ne fonctionne pas, et il peut y avoir des moments où vous avez fait une erreur quelque part en cours de route et votre code ne fonctionne pas comme vous le prévoyez, il est beaucoup plus facile de résoudre le problème lorsque vous regardez du code bien formaté. Et si vous pouvez garder tous vos deux points alignés et vous pouvez garder tous vos points-virgules alignés, vous serez une personne beaucoup plus heureuse.

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

Description du cours

Ce cours explique comment mettre en page une page Web à l'aide de feuilles de style en cascade (CSS). Vous verrez où placer les en-têtes, comment styliser les barres de navigation, ce que doit contenir un aparté et comment créer le bon contenu pour une fenêtre de contenu. Vous apprendrez également ce que doit contenir un pied de page et à quoi il doit ressembler. En outre, vous découvrirez également les titres collants. Vous découvrirez comment les choses fonctionnent en matière de mise en page en CSS et leur utilité.

Ce que vous allez apprendre

Identifier les éléments structurels d'une page web et comprendre où chaque partie doit être placée
Styliser les barres de navigation en utilisant les feuilles de style en cascade (CSS)
Utiliser des encarts (asides), des en-têtes fixes (sticky headings) et des fenêtres de contenu dans une mise en page
Positionner les en-têtes et créer le bon contenu pour une fenêtre de contenu
Créer des pieds de page et déterminer à quoi doit ressembler un pied de page

Points clés à retenir

Le cours explique comment structurer la mise en page d'une page web à l'aide de feuilles de style en cascade (CSS), notamment l'emplacement des en-têtes et la façon de styliser les barres de navigation.
Les apprenants examinent ce que contient un encart (aside) et comment créer le contenu approprié pour une fenêtre de contenu.
Le cours explique ce que contient un pied de page et à quoi il doit ressembler, ainsi que le fonctionnement des en-têtes fixes (sticky headings).
Le cours se concentre non seulement sur la façon dont la mise en page fonctionne en CSS, mais aussi sur les raisons pour lesquelles elle fonctionne ainsi.

Foire aux questions

Que couvre ce cours ?

Il couvre la façon de mettre en page une page web en utilisant les feuilles de style en cascade (CSS), y compris l'emplacement des en-têtes, la stylisation des barres de navigation, ce qui doit figurer dans un encart (aside), comment créer du contenu pour une fenêtre de contenu, ce qui doit figurer dans un pied de page et à quoi il doit ressembler, ainsi que le fonctionnement des en-têtes fixes (sticky headings).

Qu'est-ce que je vais apprendre à faire avec la mise en page en CSS ?

Vous apprendrez à comprendre les éléments de la page, à styliser les barres de navigation et à utiliser des encarts (asides), des en-têtes fixes (sticky headings) et des fenêtres de contenu. Vous découvrirez également comment fonctionne la mise en page en CSS et pourquoi elle fonctionne de cette manière.

Comment le cours est-il structuré ?

Le cours est organisé en quatre leçons : Mise en page Partie 1 (Page Layout Part 1), Mise en page Partie 2, Mise en page Partie 3 et Mise en page Partie 4.

Quelles compétences ce cours permet-il de développer ?

Il développe des compétences en feuilles de style en cascade (CSS), codes CSS, frameworks CSS, CSS orienté objet, mise en page et Sassy Cascading Style Sheets (SCSS).