Transcription
1. Introduction de base CSS: Salut et bienvenue à la conception web de base pour les créatifs. Cette classe, nous allons explorer les feuilles de style en cascade et comment elles vous aident à contrôler les éléments de votre page Web. C' est une compétence que vous devez posséder si vous voulez prendre un fichier de conception statique, comme quelque chose de Sketch, Photoshop ou Illustrator et le traduire dans une page Web de travail. On va construire un site web pour un festival de musique fausse, et ça va être amusant. Je vais continuer à avancer assez vite pour vous. J' ai plein de diapositives, illustrations et de code le long des démos. On va le faire, tu vas le faire, bouclez. Allons rouler.
2. Quick-Start: On y va. Nous allons développer votre site Web à partir d'un dossier sur votre bureau. Créez donc un dossier sur votre bureau. Vous pouvez l'appeler comme vous le souhaitez et cela contiendra tous les fichiers de
projet que nous utilisons dans ce projet. Vous allez avoir besoin d'un éditeur de texte. Je recommande d'utiliser Atom. C' est ce que je vais utiliser dans ces démos. C' est gratuit, ça fonctionne pour Mac et Windows, c'est open source. Si vous allez à Atom.io, vous pouvez télécharger cet IDE, qui est court pour l'environnement de développement interne, je pense. Quoi qu'il en soit, allez télécharger cet IDE. C' est gratuit, son éditeur de texte va très bien fonctionner. La prochaine chose que nous devons faire est de nous assurer que vous travaillez dans le navigateur Chrome, Google Chrome, Je vais travailler dans ce navigateur, et juste pour nous assurer que nous n'avons pas d'incohérences qui sont des bogues qui apparaissent parce que différents navigateurs traitent parfois le code différemment, ce qui est un sujet pour une autre fois, mais aujourd'hui, gardez simplement le code cohérent. Travaillons tous dans Google Chrome. Alors téléchargez Atom, assurez-vous que vous avez Google Chrome et puis vous pouvez avoir à télécharger un fichier zip à partir de mon site Web, il a tous les fichiers de démarrage et les fichiers de projet finis aussi si jamais vous voulez jeter un coup d'oeil à avance et voir comment tout tourne ou de se référer à eux ou autre chose. Vous pouvez trouver un lien pour télécharger ces fichiers dans la description du cours ci-dessous. Alors téléchargez le fichier zip à partir de mon site. Une fois que vous avez fait cela, copiez le fichier d'index des fichiers de démarrage que vous avez téléchargés à partir de mon site Web dans votre dossier sur votre bureau. Vous allez copier le point d'index html là, puis aller dans le navigateur Google Chrome et ouvrir le point d'index html. Ça va avoir l'air terrible parce qu'il n'est pas stylé. Ce que nous allons faire est de prendre ce contenu HTML de base et d'y ajouter du
CSS pour que notre page Web ressemble à notre maquette. Je te vois dans la prochaine vidéo. Va télécharger ce truc et on va commencer.
3. Anatomie CSS de base: Commençons. Dans cette vidéo, je vais vous montrer trois endroits différents où vous pouvez mettre des styles. Je vais vous montrer pourquoi nous allons choisir une feuille de style en cascade pour nos styles, puis je vais vous montrer dans le code comment cela fonctionne, et ensuite vous allez coder votre propre feuille de style que nous allons utiliser pour la base du reste de la projet. Ici, nous allons au tableau blanc. Je veux vous parler un peu de spécificité et de CSS. Il y a différents endroits que vous pouvez mettre des
styles et votre navigateur les traitera différemment aussi. Vous pouvez écrire des styles en ligne, ce qui signifie, si rapidement. Ceci est une page HTML. Si vous n'êtes pas familier avec HTML, vous pouvez suivre mon autre cours sur le HTML de base pour les créatifs. Je vais supposer que vous savez écrire du HTML. Ici, nous avons deux tags div ici, et ils ont chacun un style écrit en ligne directement dans la balise. Je peux également mettre des styles localement ici dans la section d'en-tête de ma page HTML, puis je peux aussi avoir des styles distants dans une feuille de style en cascade, et c'est ainsi que nous allons écrire notre site aujourd'hui. Votre navigateur donnera un poids différent aux styles en fonction de la façon dont vous les utilisez. Un style en ligne va être le style le plus lourdement pondéré. Deuxièmement va être un style local, puis troisième va être quelque chose sur une feuille de style. Vous voyez ici que j'ai ces styles est la couleur rouge. Ces divs vont avoir du texte rouge en eux. Si j'ai la couleur bleue ici dans un style local et que j'efface la couleur rouge, maintenant que le texte à l'intérieur de ces divs va être bleu. Vous voyez comment la spécificité, l'endroit que j'ai mis le style va affecter la façon dont il se rend dans le navigateur. Cela fait partie de la cascade, partie de feuilles de style en cascade, et il y a un peu plus à cela que je vais vous dire quand nous entrons dans l'écriture d'une feuille de style aussi bien. Mais c'est CSS et spécificité. Jetons un coup d'oeil à la façon dont cela se joue dans le code dans le navigateur. J' ai un similaire, voici notre fichier HTML de démarrage. Je suis sur index.html. C' est [inaudible] ici et c'est Chrome ici, et je veux vous montrer ce style en ligne que j'ai écrit la couleur de style est le rouge. La couleur de premier plan, la couleur du texte est rouge ici. Si je me débarrasse de ce style en ligne et que je sauvegarde la page, puis je vais rafraîchir le navigateur, que j'utilise la commande R. Vous pouvez également cliquer sur cette petite icône de mise à jour, mais si vous utilisez la commande R, elle l'actualisera rapidement et c'est un rapide chose facile. Je vais vous dire quelques touches, raccourcis que j'ai fait, que j'utilise juste au fur et à mesure. L' autre que je vais utiliser pour aller et venir entre différentes applications est Command Tab, donc je peux Tab entre ces, si je maintiens Maj enfoncée, ça ira dans l'autre sens. C' est un moyen rapide et pratique de basculer d'une application à l'autre. Revenons à ce dont on parle. Je me suis débarrassé du style qui était en ligne ici que ladite couleur est égale au rouge, et ici j'ai la couleur égale au bleu dans un style local, jusqu'à la tête du document, et quand je me suis rafraîchi, boom, tout est devenu bleu. Mettons en place notre feuille de style en cascade. Ce sera la feuille de style distante, et nous l'appelons à distance juste parce que ce n'est pas réellement dans ce corps de code ici. Si vous cliquez avec le bouton droit sur « Nouveau dossier » et l'appelez CSS, puis à l'intérieur de cela, faites un nouveau fichier. Nous appellerons ceci styles.css. Il est important de mettre l'extension that.css à la fin de celui-ci, et maintenant, écrivons très rapidement. Je vais écrire un style ici dans notre feuille de style. Je vais cibler le même corps de texte, et ne vous inquiétez pas de taper avec moi. Je vais entrer dans une seconde sur l'anatomie d'un style. Qu' est-ce que juste vérifier cela vraiment rapide. Couleur verte, sauvegardez ça. Maintenant, notre page d'index ne connaît pas encore la feuille de style, même si elle est dans le même répertoire, nous devons lui donner des instructions spécifiques et lui dire d'utiliser les feuilles de style. Nous écrivons une balise de lien avec un
href et href est juste comme une carte à l'endroit où ce fichier sera trouvé, donc css/ styles.css, et puis nous allons dire au navigateur à quoi ce fichier est utilisé, rel égal à la feuille de style. Ensuite, la balise de lien n'a pas de plus proche, vous êtes habitué à voir cette syntaxe avec des éléments HTML, vous n'en avez pas besoin avec une balise de lien. Maintenant, je retourne ici et rafraîchis la page et tout ce texte est vert. Jetons un coup d'oeil à quelque chose de très rapide. Voyez-vous où ce lien est placé ? C' est après ce style en ligne. Vous remarquez que si je le déplace ici et que je le sauve, assurez-vous qu'on se retire. C' est bleu. Pourquoi c'est ça ? Nous avons une autre spécificité que nous jouons ici. Le navigateur charge ce fichier en premier et il lit de couleur verte. Ensuite, il descend ici et lit ça et c'est comme, oh, non, la couleur est censée être bleue, la rendre bleue. Si je supprime ceci, enregistrez-le et actualisez, vous verrez qu'il est vert. spécificité est importante et cette même chose se jouera aussi à l'intérieur de votre feuille de style, donc chaque fois que j'ai un style en double, quel que soit le style qui a été écrit en dernier, il va obtenir la préférence. Tu vois là, ça devient rouge. C' est un peu sur CSS et la spécificité. Vraiment rapide, une leçon d'anatomie étudiante sur un style. Il y avait quelques composants différents ici à un style que vous devez être familier avec. Vous avez le sélecteur ici, nous avons la propriété, puis la valeur, donc vous verrez ce modèle répété encore et encore lorsque vous écrivez des styles. Ce sont des paires de valeurs clés. C' est un terme qui va juste
expliquer chaque fois que vous avez une propriété ici et puis une valeur pour elle là-bas. Comme la taille de la police, 18 pixels couleur rouge, c'est l'anatomie d'un style. Vos sélecteurs sont disponibles dans quelques variétés différentes. Celui-ci est un élément, une balise de paragraphe. Toute balise de paragraphe aura la couleur rouge et la taille de police de 18 pixels. Vous avez une classe qui commence par un point, donc nous pourrions avoir, comme dans l'exemple précédent, aligner, c'était une classe, et vous avez des ID et ID est précédé d'un hachage, et serait quelque chose comme, Je ne sais pas, page d'accueil. Ensuite, il y a différentes façons d'utiliser les classes et les ID, et les sélecteurs d'éléments lorsque vous construisez vos styles, et nous y reviendrons dans un instant. Vous connaissez la spécificité. Vous avez vu le fonctionnement interne d'un style. Vous savez ce que sont les composants. Tu sais où ça va. Commençons à écrire quelques styles pour ce site. Je vais voir dans la vidéo suivante.
4. Connaître vos boîtes: Bienvenue de retour. En tant que concepteur, vous avez probablement préparé vos fichiers dans Photoshop, Sketch, un logiciel de conception statique comme ça. Maintenant, vous devez le transformer en un site Web, et avoir le contrôle sur tous ces éléments. Vous devez savoir comment les faire se comporter. Ça peut être vraiment déroutant. Il y a tellement de balises HTML différentes, et ils se résument tous à seulement deux catégories cependant. Vous avez des éléments en ligne, et ils vont s'aligner les uns à côté de l'autre comme du texte. Vous avez des éléments de niveau bloc. Ils vont s'empiler les uns sur les autres. Chaque page Web est une combinaison de ces deux choses. Ils existent dans l'axe x, y. Permettez-moi de vous montrer quelques diapositives que j'ai préparées juste pour vous et qui illustrent ce concept. Je vais vous montrer comment vous pouvez manipuler les éléments
de base dans une page HTML en utilisant des feuilles de style en cascade. Nous y voilà. CSS Layout est facile comme XYZ. Par cela, je veux dire l'axe des x, l'axe des y et l'axe des z. L' axe des x est horizontal et va de gauche à droite. L' axe y est vertical et va de haut en bas, et l'axe z, dont nous parlerons plus tard, est la façon dont les éléments s'empilent les uns sur les autres dans les couches. Ce que vous pouvez voir par ces trois barres orange, il montre que les éléments en ligne veulent empiler les uns à côté des autres, et ils continueront à s'empiler l'un à côté de l'autre jusqu'à ce qu'ils atteignent le bord de leur conteneur et doivent envelopper. Je veux vous présenter un site appelé CodePen. CodePen est une ressource incroyable. Il vous permet de tester rapidement des idées sans avoir à mettre en place un site web entier. Vous pouvez trouver le lien vers ce CodePen dans les ressources PDF qui est inclus dans les fichiers téléchargés pour cette classe. Allons jeter un oeil à un CodePen qui illustre ce point. Ici, nous avons un corps non stylé de HTML. Maintenant, dans CodePen, je n'ai pas besoin d'écrire la balise HTML, la balise head, la balise body. Ils s'en occupent pour toi. Cela rend vraiment rapide et facile de tester le code et de voir un résultat immédiat. Faisons quelque chose comme appliquer un style à la balise body. Tout ce que je fais, c'est, je commente ce CSS. Lorsque vous travaillez dans une feuille de style, vous pouvez lui demander de ne pas lire de code en utilisant cette syntaxe ici, qui est une barre oblique,
puis une étoile, puis une barre oblique pour fermer le commentaire. Souvent, cela sera utilisé pour vous laisser des notes. Vous pouvez dire quelque chose comme, cela commence les styles pour la partie supérieure de la page. C' est ainsi que vous pouvez laisser des notes pour vous-même, ou pour tous les développeurs qui vont travailler sur ce projet à l'avenir. Commande clavier vraiment rapide va vous faire gagner du temps pendant que vous suivez ici. Vous pouvez maintenir la touche Maj de commande enfoncée et utiliser les
flèches droite ou gauche pour sélectionner une ligne entière de texte, puis utiliser la barre oblique de commande, c'est
celle située sous le point d'interrogation pour activer et désactiver le commentaire. Cela fonctionne en HTML2. Je l'ai utilisé ici pour nous permettre de révéler styles un à la fois sans avoir à prendre le temps de les écrire. Laisse-moi en appliquer une sur la balise corporelle. Vous pouvez voir que j'ai mon sélecteur ici. n'y a pas de point ou de hachage devant lui. Cela va chercher un élément HTML. Nous allons trouver la balise body et la taille de police appliquée est égale à 24 pixels. Dès que je décode cela, vous voyez tout ce texte adopter ce style. Observez ici comment tout est écrit dans des boîtes. Ces niveaux de retrait indiquent où commence une nouvelle boîte. Voici une boîte parent, et elle contient ces quatre boîtes enfant. Ce sont toutes des travées. Les travées sont des éléments en ligne, donc elles vont s'empiler les unes à côté des autres, et nous voyons que cela se passe ici. Images, voici une image, aussi un élément en ligne, et c'est aussi juste en ligne avec tout le reste. Parlons maintenant des éléments du bloc de l'axe y. Ce sont des balises HTML comme divs, paragraphes, en-têtes, pieds de page, sections, toutes ces choses. Ils, par nature, s'empilent les uns sur les autres et se dilatent aussi large que possible pour s'adapter à leur conteneur parent. Jetons un coup d'oeil à la façon dont les éléments de niveau bloc fonctionnent. Si je voulais que tout ce texte s'empile dans des strophes,
comme vous le verriez dans un livre, je pourrais revenir en arrière et changer toutes ces travées en un élément de niveau bloc comme un div. Laisse-moi essayer ça très vite. On a mis un div ici. Vous voyez cette première strophe, elle renvoie en fait et fait continuer le reste du type en dessous, donc elle s'étend pour remplir le conteneur parent de largeur, et elle est empilée au-dessus du contenu qui est en dessous. Une autre chose que vous pouvez faire, est d'utiliser la propriété display pour contrôler l'apparence de ces objets. Permettez-moi de commenter ce prochain morceau de CSS. Il va appliquer la hauteur de 32 pixels à une balise span. Une chose à propos des éléments en ligne est qu'ils ne peuvent pas accepter les propriétés de
hauteur ou de largeur car, par nature, ils s'alignent les uns après les autres. n'ont pas besoin d'avoir une hauteur et une largeur. Si je dis à cela de se comporter comme un élément de niveau bloc, tout d'un coup ils adoptent toutes les propriétés d'un élément de niveau bloc. Ils vont s'empiler les uns sur les autres. Ils adoptent cette hauteur, que vous pouvez voir. Si je commente cela, voyez comment ils rétrécissent comme ça. La hauteur de la ligne entre les éléments est réduite. C' est un moyen facile d'illustrer la différence entre un élément de niveau bloc et un élément en ligne. Lorsque vous faites la mise en page, il est beaucoup plus probable que vous utiliserez un div ou un autre élément de niveau bloc. Par exemple, vous allez empiler les choses avec éléments de
niveau bloc et mettre les choses en ligne avec les éléments en ligne. Mais cela vous montre comment vous pouvez utiliser la propriété display pour contrôler leur comportement. Les éléments en ligne et en bloc se combinent pour nous donner les mises en page que nous connaissons bien dans les sites Web. Vous en savez un peu plus sur la façon dont les styles affectent les éléments HTML. Vous dites probablement, « Mark, quand est-ce qu'on va vraiment écrire du code ? » Eh bien, nous en écrirons très bientôt sur le projet, mais je veux m'assurer que vous comprenez comment ces choses fonctionnent avant de plonger. Je ne veux pas que vos styles quand vous les écrivez se sentent comme des incantations magiques que vous lancez là-bas. Je veux qu'ils se sentent comme des commandes que vous êtes confiant dans l'exécution. Nous allons faire un peu plus d'une conférence avec quelques diapositives, et ensuite nous allons écrire un peu de code. Accrochez-vous là-dedans. Je te vois dans la prochaine vidéo.
5. Stratégie de mise en page: Les pages Web sont essentiellement des boîtes à l'intérieur des boîtes. Certains d'entre eux vont latéralement, certains d'entre eux s'empilent les uns sur les autres, et ils se combinent pour former des modèles de mise en page complexes. Les modèles complexes qu'ils forment, vos pages Web essentiellement, sont appelés objets de document, et ils ont ce qu'on appelle un modèle d'objet de document. C' est essentiellement la relation d'une boîte à l'autre. Combien de boîtes sont à l'intérieur de la boîte parent ? Si vous pouviez les visualiser sous la forme d'une arborescence hiérarchique, commençant par la zone parent ici, zones
enfants situées en dessous qui se divisent en autres petites boîtes enfant. C' est le modèle d'objet de document. Il est très utile de pouvoir le voir pendant que vous développez une page Web afin que vous
puissiez avoir une idée visuelle de la façon dont ces éléments interagissent les uns avec les autres. Laissez-moi vous présenter votre nouveau meilleur ami, l'inspecteur. Si vous accédez à une page Web dans Chrome et que vous cliquez avec le bouton droit de la souris, vous verrez un menu qui a inspecter en bas de celui-ci, appuyez sur Inspecter. Il ouvrira un petit panneau qui contient toutes sortes d'informations sur chaque élément de votre page. Jetons un coup d'oeil à certaines de nos boîtes et commençons à leur donner certains des styles qui vont nous aider à atteindre. Regardez qui a été défini dans les compositions de conception ici, nous allons aller pour cette couleur magenta folle derrière l'en-tête et essayé de le faire ressembler juste à ceci. Commençons donc par appliquer cette couleur à notre barre de navigation. Si nous faisons un clic droit ici, nous pouvons regarder autour de notre inspecteur et avoir une très bonne idée des boîtes qui composent ça. Nous avons une boîte principale là, c'est la barre de navigation, vous pouvez voir la barre de navigation de classe. Nous allons l'utiliser comme un sélecteur pour cibler cette boîte. Puis à l'intérieur, il y a le conteneur 960. Finalement, cela va nous aider à faire une belle colonne. Puis à l'intérieur de cela, nous avons les noms des pages pour notre navigation. Ensuite, nous avons des icônes de médias sociaux, que vous ne pouvez pas voir parce qu'elles sont blanches sur blanches en ce moment. Allons réparer ça. Nous allons écrire notre premier style pour le site ici, j'ai des styles CSS ouverts dans mes fichiers de démarrage. Je vais continuer à construire sur cela et nous allons cibler la classe navbar en disant .navbar. Nous allons lui donner une couleur de fond de E03ED7. Je vais copier coller ces choses et me déplacer très rapidement dans ces démos de code. Arrêtez définitivement la vidéo et prenez le temps de rattraper. Je vais essayer de les faire vite pour qu'on ne
perde pas trop votre temps à me regarder taper les choses. Ne soyez pas découragé ou offensé si je vole à travers ça, il suffit de cliquer sur « Pause ». Si nous sauvegardons cela et revenons au navigateur, nous remarquons que nous avons une couleur magenta folle ici. Nous pouvons voir nos icônes de médias sociaux. Maintenant regarde autour de cette frontière ici. Cela va nous amener à une discussion sur le modèle de la boîte. Voici une illustration du modèle de boîte que l'inspecteur nous fournit. Ici, au cœur, nous voyons les dimensions de la boîte de noyau elle-même, puis nous voyons ces trois propriétés différentes de la boîte. Nous avons un rembourrage, une bordure et une marge, et vous voyez ici cette ligne dure tracée près de cela est le différentiateur. Bien qu'il n'ait pas de largeur réelle dans la vie réelle. C' est à l'intérieur et tout ce qui est passé à l'extérieur. Toutes les bordures que vous appliquez sont calculées comme se trouvant à l'intérieur de cette dimension. Le rembourrage que vous appliquez s'applique à l'intérieur de cette dimension. Toute marge que vous appliquez s'applique à l'extérieur. Nous pouvons voir qu'il y a une marge appliquée ici, tout le long du chemin. Ce que c'est, c'est un style d'agent utilisateur. Si vous regardez cette zone grise ici, c'est en italique, vous verrez qu'il y a un tas d'éléments appelés et ils sont appelés comme bloc d'affichage. Il existe toutes sortes de styles d'agent utilisateur. Ce sont des styles qui se façonnent avec le navigateur. Ce sont les valeurs par défaut. Maintenant, tous les navigateurs ne les implémente pas. Certains navigateurs estiment que huit pixels est la bonne quantité de remplissage autour de quelque chose ou de marge. D' autres navigateurs pourraient sentir qu'il est 10. Certains estiment qu'une taille de police est meilleure qu'une autre. Si vous construisez un site Web et que vous avez vos styles écrits, et que vous comptez sur les styles par défaut pour vous aider, vous devez prendre en compte tous ces différents navigateurs ou simplement réinitialiser chacun d'entre eux. Il y a longtemps en termes de web, les gens ont commencé à écrire des feuilles de style réinitialisé. Fondamentalement, ils prennent des choses comme les balises H1 , la marge par défaut, le remplissage par défaut, la hauteur de ligne par défaut, toutes ces choses différentes, et les déclarent expressément afin que la feuille de style de l'agent utilisateur ne les influence pas. Dans vos fichiers extras ici, vous verrez que j'ai un reset.css. C' est celui que je viens d'attraper sur Internet. Eric Meyers en a fait un très populaire. Vous pouvez, il y a en fait un excellent article sur astuces
CSS sur l'historique de la feuille de style de réinitialisation, qui est une excellente lecture, si vous voulez une lecture de nouveau niveau. Collons cette réinitialisation dans le haut de notre feuille de style ici et enregistrez-le. Quand nous allons nous rafraîchir, cette marge a disparu, et maintenant nous commençons à voir nos styles. Alors qu'avant nous venons de voir les styles gris de l'agent utilisateur. Maintenant, nous disons corps H1, H2, bla bla bla. Ils ont tous été réglés sur la marge 0, le remplissage 0. Nous devrons entrer et spécifier vraiment ce que nous voulons que la marge et le rembourrage soient sur ces éléments. Mais ce que nous avons fait est de veiller à ce que chaque navigateur les affiche de manière cohérente. La prochaine chose ici va essayer de faire en sorte qu'une partie de ce contenu se comporte. Nous avons tout ce texte faire ce qu'il devrait faire est dans des textes en ligne, juste remplir son conteneur. Tout est claqué sur le côté gauche sans marge. Les choses qui devraient être à côté de l'autre sont empilées les unes sur les autres. Imposons une colonne là-dessus. Si nous regardons dans le dossier de conception, nous pouvons voir ce design, une colonne qui va tout le long de la page et maintient les choses agréables et ordonnées. Nous allons faire en sorte que notre page Web ait le même comportement en écrivant un style de colonne maître. Ce que j'ai fait ici, c'est le conteneur appelé conteneur 960. Une fois que nous y appliquons nos styles,
cela aidera chacune de ces sections à se centrer et à atteindre 960 pixels de large. Ajoutons ces styles maintenant. J' aime me laisser quelques commentaires juste pour m'aider à organiser mes feuilles de style. Nous pouvons utiliser slash étoiles et slash étoiles pour commencer et terminer nos commentaires. Je vais dire, commencer les styles de site. On a notre Navbar. Faisons un pour le conteneur 960. C' est la technique de centrage automatique de marge et c'est l'une des techniques les plus fiables pour le centrage et l'image sur une page Web. Ce qu'il fait, c'est qu'il regarde la largeur de l'objet, puis
calcule automatiquement la quantité de marge de chaque côté qu'il va prendre pour centrer cet objet. C' est pour ça que ça marche si bien. Il y a une chose que vous devez savoir, et c'est que cela ne fonctionne que sur les éléments de niveau bloc. La raison en est que les éléments en ligne ne peuvent pas avoir une largeur ou une hauteur appliquée à eux parce que leur travail est de simplement continuer et
allumer et de s'aligner jusqu'à ce qu'ils retournent leur conteneur. Nous devons utiliser un élément de niveau bloc, et dans ce cas, nous utilisons un div ici, classe div. Après avoir défini la largeur et la marge auto à cela, j'ai appuyé sur « Enregistrer » sur ma feuille de style, revenez sur le site Web ici et cela
va tout accrocher dans une colonne au milieu. Jetez un oeil à ça et ça va se concentrer. Peu importe à quel point je fais cette fenêtre. J' ai saupoudré cette classe de haut en bas à travers ce site, chaque fois que je vais dans une nouvelle section, donc ici, dans la section héros, il est là. Ici, dans la section de la ligne, il est là. C' est une excellente stratégie pour garder une colonne solide et souligner la puissance d'une feuille de style en cascade. Vous pouvez voir comment nous l'écrivons à un endroit et il cascades sur toute notre page à chaque fois que ce style est référencé. C' est un excellent moyen d'obtenir beaucoup d'effet de levier à partir d'un très petit peu de code. Cela ne nécessite qu'un peu de planification initiale. Alors que vous approchez de la construction d'un site web par vous-même. Allez dans ce stylo CSS ici, c'est CodePen. Allez à ce CodePen et jouez autour. J' ai quelques styles engagés que vous pouvez décommenter et utiliser pour voir comment la marge, auto et la largeur combinent un ensemble de choses sur la page. Vous pouvez jouer avec des valeurs et voir ce qui se passe lorsque vous modifiez certaines de ces valeurs. Ou si vous changez la marge ou tout ce que vous voulez faire, gâchez-la, cassez-la et obtenez une idée de la façon dont cela fonctionne.
6. Mise en page de Float: L' un des premiers outils que les développeurs Web et les concepteurs obtenu qui les ont aidés à contrôler la mise en page était le flotteur. Lorsque vous appliquez un flotteur à un élément, il prendra l'élément tout le chemin vers la gauche ou tout le chemin vers la droite. Cependant, les flotteurs retirent l'élément du flux normal du DOM. Ils sont un peu particuliers. Bien que le contenu circule autour d'eux, ils ne sont pas suffisants pour tenir un conteneur ouvert seul. Lorsque vous flottez un élément, il le transforme en un élément de niveau bloc qui peut être flotté vers la gauche ou vers la droite. Flottant doit être activé et désactivé et vous devez effacer vos flotteurs afin d'arrêter le comportement flottant. C' est un peu bizarre. Vous penseriez que vous pourriez juste mettre
quelque chose gauche ou à droite et cela fonctionnerait. Mais ils sont vraiment un hack parce qu'ils ont été le tout premier outil que les concepteurs ont eu pour déplacer le contenu de gauche à droite. Ils ont rapidement compris comment les exploiter pour créer des mises en page complexes, comme une mise en page à deux colonnes que nous avons l'habitude de voir sur le Web aujourd'hui et que nous avons vu en impression depuis des centaines d'années. Vous devez éteindre vos flotteurs en les effaçant. Si vous ne les effacez pas, le comportement flottant, ce comportement
qui les sort du flux normal du DOM n'est pas réinitialisé. Ce qui peut arriver, c'est qu'un conteneur s'effondrera derrière les éléments flottants. Si vous avez une situation bizarre comme celle-ci où vous avez du contenu affiché derrière quelque chose que vous avez flotté, il n'est probablement pas effacé. Une des façons les plus courantes de le faire est de sélectionner un élément qui apparaît dans l'ordre naturel du DOM qui est, à la fin de la page, après les éléments qui ont été flottés et effacer les deux flottants. Vous pouvez juste effacer les deux. C' est comme ça que vous l'effacez. Je vais faire une petite démo pour ça. Accrochez-vous une seconde. Une autre façon de le faire est de donner le conteneur parent des flotteurs débordement caché. Ce que cela fait est de s'assurer qu'aucun contenu placé dans un élément ne peut dépasser ses limites. En le définissant sur débordement caché, vous le faites prendre conscience d'elle-même d'une manière et il calcule l'espace dont il a besoin pour afficher ces objets flottants et le reste du contenu en lui-même. Allons à un CodePen et voyons comment tout cela fonctionne. Voici notre vieux CodePen familier. Faisons les derniers morceaux de ça, et puis j'en ai un autre pour toi aussi. On y va. Nous avons tous les versets affichés en bloc, et essayons de faire passer la maison sur le côté droit. Nous allons dire flotter à droite pour l'illustration et vous pouvez voir qu'elle flotte sur la droite tandis que tout ce truc reste sur la gauche. C' est ainsi que nous obtenons des mises en page de 2 et 3 colonnes pour travailler sur le web. Il y a d'autres façons, mais c'est l'un des plus anciens, les plus largement utilisés et franchement les plus difficiles à comprendre. Je veux m'assurer que tu as une bonne idée de ça. Passons au second CodePen ici. Voici un CodePen que vous pouvez utiliser pour jouer avec page basée sur
flotteur et en avoir une idée. J' ai tout commenté en ce moment. Nous avons notre blob habituel de contenu non stylé. Allons décommenter certains de ces styles et voir ce que nous obtenons ici. Ce sont des styles de page de base, j'ajoute un remplissage à l'en-tête et au pied de page, et au corps. Maintenant, voyez-vous ces virgules ici ? Chaque fois que vous avez des styles qui sont utilisés à plusieurs endroits,
vous pouvez les placer dans une liste séparée par des virgules. Par exemple, l'en-tête ici fait référence à l'élément d'en-tête juste ici, donc l'élément HTML5. Le pied de page est notre pied de page. Dot body va être, chercher une partie de la classe du corps. Cette section a la classe de corps dessus. Il va être appliqué là aussi. J' applique 10 pixels de rembourrage partout et vous pouvez voir ici, j'ai une belle bordure que j'ai créée autour de tout ce contenu. Je viens d'écrire une ligne de code, donc si plus tard je suis genre, oh, j'aimerais vraiment que ce soit 8 pixels. Je l'écris en un seul endroit et il est appliqué à tous ces différents éléments simultanément. C' est un autre exemple de la partie en cascade des feuilles de style en cascade. C' est un outil très puissant. Ici, nous avons une autre liste séparée par des virgules. Il s'agit de la couleur d'arrière-plan pour l'en-tête et le pied de page. Voyez comment cela s'applique à tous les deux. Voyons voir ici. Obtenez de la couleur de fond là pour le div. Vous pouvez le distinguer des autres parties de cette composition. Faites en sorte que l'illustration soit ajustée en la faisant avec 100. Maintenant, je vais définir les largeurs des colonnes ici qui sont empilées en ce moment. Les divs, les éléments de niveau bloc, ils veulent empiler et parce qu'ils n'ont rien d'autre leur disant de faire autrement, ils font leur comportement naturel de remplir leur parent et de les empiler les uns sur les autres. Faisons-les 45 pour cent de large et voyons ça à nouveau. La liste séparée par des virgules l'applique aux deux colonnes. Celui avec la classe gauche et celui avec la classe droite en même temps. Nous allons appliquer un rembourrage à droite à la colonne de gauche et un remplissage à gauche à la colonne de droite. Ça va nous donner un joli caniveau entre les deux. Maintenant, nous appliquons les flotteurs. Je flotte à gauche, à droite. Je flotte par colonne de gauche, gauche, ma colonne de droite. Vous pouvez voir que j'ai un joli petit caniveau ici. J' ai juste mis la vidéo en pause. Tu as vu comment ce texte et l'image étaient empilés ici ? Je devais juste faire ce 44 puis 45 à nouveau vraiment rapide et corriger un petit bug de mise en page. Si vous avez le même problème, faites-le et vous verrez qu'ils s'empileront l'un à côté de l'autre. Juste un petit pépin. Nous voyons que cela chevauche le pied de page. Nous allons essayer la première technique qui s'applique clairement à la fois au pied de page. Nous voyons que le pied de page est là après nos deux éléments flottants et en disant au navigateur,
hey, une fois que vous atteignez le pied de page, arrêtez de faire le comportement de compensation, il le fait. Ceux-ci peuvent tous s'empiler dans des colonnes comme vous le souhaitez. Regardons l'autre technique qui était, voyons nous l'enlever, ils s'effondrent. Appliquer un débordement masqué à l'élément body, qui est l'élément Section ici qui contient tous ces autres éléments. Nous allons appliquer débordement caché à cela et boom, il devient conscient de soi, il représente
les flotteurs et les éléments non flottants et les affiche tous. Il y a une troisième façon d'effacer un flotteur et c'est ce qu' on appelle la technique flottante de correction claire. Il tire parti des éléments appelés pseudo-éléments, lesquels nous n'allons pas vraiment entrer dans le cours de ce tutoriel. Mais c'est un excellent moyen d'
effacer les flotteurs et il est beaucoup utilisé dans les frameworks réactifs et des choses comme ça. J' espère faire une leçon future sur le design responsive et il y sera inclus. C' est ce à quoi les FC font référence ici. En fait, c'est, nous y allons, sur le commentaire que, et cela fonctionne. Si vous le souhaitez, vous pouvez Google par vous-même et le vérifier. Jouez avec ce stylo et regardez comment changer les différentes valeurs change cette disposition et son comportement, puis allons appliquer ce que nous savons sur les flotteurs maintenant, à l'en-tête de notre projet. Dans notre feuille de style, commençons à mettre les classes en place et les styles en place, qui vont donner à notre barre de navigation l'aspect qu'il devrait. Avec ces icônes sociales sur la droite et la navigation sur la gauche. On y va. La première chose que je vais faire est d'ajouter un débordement caché à l'élément conteneur 960. Ce que cela va faire est que chaque fois que nous faisons une mise en page basée sur un flotteur à l'intérieur de ce conteneur, il va automatiquement l'effacer. Nous n'avons même pas à
penser à quoi que ce soit, sauf écrire notre flotteur gauche dans notre flotteur droit. Nous le ferons d'abord, puis laissez-moi jeter un coup d'oeil à nos noms de conteneurs. On a une barre de navigation ici où on va
aller à gauche donc disons, oh, on a une barre de navigation là-bas. Désolé, ce n'est pas Navbar, n'est-ce pas ? Qu' est-ce que c'est ? C'est, on a un qui s'appelle NAV principal et un qui s'appelle Social. C'est ce que je cherche. Nous allons dire que le NAV principal va être flottant à gauche et ensuite, comme le seul social, il va être flottant à droite. Tu vois comment je les indente un peu ? J' appuie sur Tab chaque fois que je fractionne ces accolades et cela
vous aide à numériser le document lorsque vous regardez, surtout quand il devient long. Lorsque vous cherchez différentes classes à revenir en arrière et à éditer et surtout dans le HTML. Chaque fois que je vais dans une nouvelle boîte, j'indente des choses pour que je puisse regarder un code de bloc comme celui-ci et dire, oh, c'est une boîte et il y a une autre boîte, c'est un frère et c'est un parent. Je peux dire toutes ces choses juste en regardant comment plus loin en retrait. Une autre chose, c'est que tu vois cette petite ligne bleue ici ? Dans Atom, quand je touche un élément, il me montre où est la balise d'ouverture ou de fermeture correspondante. Ce sont d'autres façons utiles d'avoir une représentation visuelle pour les boîtes abstraites que vous construisez dans le code. Nous avons le nav principal flotté à gauche et social flotté à droite. Nous avons un débordement caché spécifié, donc cela devrait fonctionner. Presto. On y va. C'est à droite, c'est à gauche. Maintenant, cela ressemble toujours à de la malbouffe, mais nous allons parler de style de texte très bientôt ici. Une chose que je veux que vous fassiez, allez sur CodePen et appuyez simplement sur créer et appuyez sur stylo et essayez d'écrire vous-même, une mise en page très simple basée sur flotteur. Je vais le faire très vite. Si vous voulez, vous pouvez passer à la fin de la vidéo si vous êtes comme, non, je l'ai, mais très vite, faisons-le. Nous allons avoir une div avec la classe de conteneur et ensuite je vais fermer cette div, et puis j'aurai une colonne. Sur cette colonne d'un div, cela va recevoir une classe de gauche, fermer cette div et ensuite nous aurons une div avec une classe de droite, et ensuite nous allons Bonjour ici et World ici. Vous voyez qu'ils sont empilés juste là. Essayons de les faire aligner à gauche et à droite. Pour le conteneur, disons que la largeur est de 500 pixels, marge est Auto et je veux y mettre un débordement caché. Faisons une couleur de fond juste pour que nous puissions voir à quoi ressemblent les boîtes. Laisse-moi faire du rouge. Maintenant, point gauche va devenir flottant à gauche et point à droite, il est flottant à droite. Ils sont là. Maintenant, vous voyez que le rouge s' est éloigné de notre conteneur d'arrière-plan principal. C' est parce que ce n'est pas clair. Faisons un débordement caché et il revient. Il y a un flotteur à deux colonnes vraiment basique. On n'a même pas mis de largeurs ici. On pourrait si on veut, mais je voulais juste que tu écrives ça très vite. Juste pour vous donner un exercice de mise en page de deux colonnes, vraiment simple sans que j'aie écrit le code. Félicitations, parce que c'est une convention de mise en page délicate et si vous maîtrisez cela, vous serez en mesure d'écrire vos propres mises en page facilement et de déboguer quand elles vont mal, ce qui est très important. Félicitations les gars. Passons à la prochaine vidéo. Nous allons commencer à faire en sorte que ça ressemble à un vrai site Web.
7. Fonts Web: D' accord. Cela va être beaucoup de plaisir et ça va avoir un impact élevé et rapide. Nous allons ajouter des polices web. Maintenant, dans l'ancien temps, vous n'aviez vraiment que quelques polices différentes à choisir. Vous deviez compter sur la présence des polices sur l'ordinateur d'un utilisateur. Eh bien maintenant, avec les polices web et Google et tous ces autres services qui les hébergent sur CDN, vous pouvez obtenir des polices vraiment fiables, belles pour des services gratuits ou payants [inaudibles] comme Typekit et d'autres choses comme ça. Mais des tonnes de façons d'obtenir de grandes polices sur votre site. Nous allons regarder une ressource gratuite, la bibliothèque de polices de Google, et nous allons les mettre sur et mettre ce site Web en forme un peu. On y va. Désactivé pour les polices Google. Voici Google Fonts. Nous avons, probablement des centaines de polices à choisir ici. Je veux écraser deux ou trois choses. Quelques termes, Serif, Sans Serif, Affichage, Écriture manuscrite, Monospace. Jetons un coup d'oeil à ce à quoi ressemblent ces polices. Une police Serif, voir ces petites queues, petites pièces horizontales et tout cela, nombres
[inaudibles], Serif très prononcé. Ce M, il a ces petits pieds qui sortent du haut et du bas. C' est ce qu'est un Serif. La police Serif a ces petits pieds dessus. Sans Serif. Sans veut dire sans. Vous remarquerez que tout cela est sans les petits pieds. Type d'affichage est généralement type avec beaucoup de personnalité. Il est généralement inadapté pour copie
corporelle où vous devez lire des tonnes et des tonnes de celui-ci. Il peut être difficile à lire, mais il a généralement beaucoup de personnalité et c'est génial pour un titre ou quelque chose comme ça. Évidemment, l'écriture manuscrite va être, je pense que c'est dans la plus grande catégorie de type d'affichage. Personnalité ? Oui. Lisibilité ? Pas tellement. Alors Monospace est un très, il ressemble presque à un terminal informatique. C' est là que sont toutes ces choses. J' utilise Monospace et l'écriture manuscrite, désactivée. Pour ce projet particulier, j'ai choisi un type Display et un type Sans Serif. Le type Display était Bungee et le Sans Serif était Open Sans. Cherchons Bungee ici. Juste ici. Si vous cliquez sur ce « BOUTON PLUS », il l'ajoute à une collection pour vous ici. Ajoutons. Mettons Open Sans là-dedans aussi et je te montrerai. Ouvrez Sans, ajoutez ça. C' est incroyable à quel point Google le rend facile. Tout ce que vous avez à faire, cela va être hébergé sur leur CDN. Oui, il existe différentes façons de les héberger sur votre propre serveur et vous devez utiliser une déclaration de police faciale. Je ne vais pas en parler dans cette leçon particulière. Faisons-le facilement. Vous copiez ceci et vous le collez dans la tête de votre fichier HTML. La raison en étant, vous souhaitez charger vos polices avant commencer à indiquer à votre feuille de style ce qu'il faut faire avec elles. Si votre feuille de style se charge avant les polices, il est possible que votre navigateur ne reconnaisse pas ce qui se passe. En gros, tu dirais, « Hé, utilise Bungee pour tous ces gros titres. » Le navigateur disait : « Je ne sais même pas ce qu'est Bungee. Je n'ai rien téléchargé qui corresponde à ça. » On va charger les polices d'abord ici. Vous voyez Bungee et Open Sans être chargés. Spécifions les poids que nous voulons utiliser car ils sont livrés avec, ici vous allez personnaliser, beaucoup de poids différents. Vous pouvez choisir, comme 300 et 700 gras pour Open Sans, puis pour Bungee, nous utilisons simplement le 400 standard, c'est la seule taille qu'il a. Retournez à incorporer, copiez cela. Vous voyez comme les tailles là-dedans aussi. Maintenant, nous sommes prêts à commencer à coiffer n'importe quel texte que nous voulons. En regardant notre fichier de conception ici, nous voyons que cet en-tête a des textes Bungee, son bouton a des textes Bungee, c'est tout Bungee, Bungee partout. Commençons à écrire quelques styles pour ces choses. On dirait qu'on a l'étiquette H1, H2, ça va tous être Bungee. Nous irons à nos styles ici et nous pouvons écrire H1. Il y a toutes ces propriétés différentes qui appartiennent à la déclaration de police. Commençons par la famille de polices. On va dire entre guillemets, Bungee. Ensuite, cela va être une pile de polices. Une pile de polices est un ordre de repli. On dira Sans Serif ici. Ce que cela signifie, c'est que si le navigateur ne peut pas trouver Bungee, il suffit d'afficher quel que soit le Sans Serif par défaut. Mettons un de plus et disons, Helvetica. Si vous ne trouvez pas Bungee, utilisez Helvetica, si vous ne trouvez pas Helvetica, utilisez n'importe quel ancien Sans Serif. Nous pourrions dire que c'est vrai pour les balises H2 aussi et H3. Sauvegardez cela et regardons notre site Web ici pour voir ce que nous obtenons. Là, la feuille de style incorrecte s'ouvre. C'est ce qu'on fait mal. J' enregistre ces feuilles de style à la fin de chaque leçon afin que vous ayez un enregistrement de tout ce qui a été fait pour cette leçon. J' ai commencé avec celle de cette leçon et j'ai commencé à écrire au mauvais endroit. On y va, faisons-le. H1, H2, H3, re le faire et là vous voyez que nous avons Bungee qui apparaît pour tout notre texte. Nous allons adopter l'approche inverse pour ce que je vais appeler la police du corps. Nous utiliserons Open Sans en l'attachant à la balise body. Fondamentalement, cela dit, faites toutes les polices Open Sans. Ensuite, nous allons revenir en arrière et changer très spécifiquement ceux que nous voulons à Bungee. On y va. La raison pour laquelle c'est entre guillemets est qu'il a un espace. Si je ne mets pas cela entre guillemets, alors le navigateur va interpréter cela comme deux polices séparées. Virgule, maintenant on y retourne et on y regarde. Nous devrions voir tout un tas de Sans Open, par défaut il va à Times New Roman. Tout cela devrait changer pour un beau, mince Sans Serif. On y va. On a de beaux textos maintenant. Nous allons jeter un coup d'oeil sur les arrière-plans dans la prochaine leçon et ensuite nous arriverons à un positionnement absolu, afin que nous puissions terminer tout cela. Dans le dossier extras, dans le dossier leçon sept, j'ai ajouté tous les styles liés au type à la feuille de style. Passez en revue et décommentez les styles liés au type un à la fois pour voir comment ils affectent votre mise en page. Alors je te verrai dans la leçon suivante.
8. Positionnement absolu: positionnement est l'un des aspects les plus mal compris de la mise en page CSS, même les développeurs expérimentés ne le comprennent parfois pas tout à fait bien. Il y a quatre positions différentes, et ces carrés illustrent la façon dont ils fonctionnent. Static est le type de positionnement par défaut et c'est ce que vous attendez c'est un élément qui occupe un espace dans le DOM. Le suivant est relatif. positionnement relatif est unique, l'élément lui-même occupe la même place dans le DOM qu'il avait avant l'application du positionnement, mais il apparaîtra ailleurs comme un hologramme, je vais l'illustrer avec la démo de code au cas où cela n'aurait pas vraiment de sens. Ensuite, il y a les deux que j'appelle les fantômes, positionnement
fixe et absolu. Je les appelle comme des fantômes parce que même si vous pouvez les voir, ils n'ont pas vraiment la capacité de repousser quoi que ce soit. Un peu comme un flotteur, mais même avec moins de présence dans le DOM, en fait, il est entièrement sorti du DOM quand ils sont invoqués. Positionnement fixe est tiré vers le haut ou le bas du port de vue, et il ne fait référence que au port de vue,
le port de visualisation est votre fenêtre, la fenêtre de votre navigateur. Chaque fois que vous avez vu un en-tête collant lorsque vous faites défiler un site Web et que l'en-tête reste en haut, c'est généralement un positionnement fixe. Ensuite, nous arrivons enfin au positionnement absolu, qui est le type que vous utiliseriez probablement le plus. Il est sorti du flux normal, et pour sa position, comme la distance sur le x, la distance vers le bas sur le y,
il fait référence au conteneur parent suivant dont le positionnement est spécifié. Je vais faire une illustration ici,
parce que c'est difficile à comprendre, ou du moins c'était pour moi. Si j'ai ce rectangle bleuâtre et le rectangle orange, et que le rectangle orange n'a pas un certain positionnement spécifié, il va aller au conteneur parent ou au conteneur orange à
la recherche de référence de positionnement. Si ce conteneur n'a pas de référence de positionnement, il continuera à monter jusqu'à ce qu'il atteigne le bord de la fenêtre du navigateur. Ce que vous devez faire est sur le conteneur parent de l'objet à positionner absolument, vous devez mettre la position relative. Vous devez utiliser absolu et relatif en conjonction les uns avec les autres, c'est une façon vraiment bizarre de le faire, mais c'est juste comme ça. Je ne sais pas pourquoi ça doit être si compliqué, mais je sais comment le contrôler. Jetons un coup d'oeil ici à notre code. Allez dans le dossier de leçon de positionnement absolu et copiez
tout et collez-le dans votre CSS, puis nous allons passer par quelques-unes de ces lignes de code commentées. Maintenant, la première à laquelle vous allez venir en fait est cette position relative, laissez ça tranquille pour l'instant. Allons à cette ligne de moozedoo ici. Quand on décommentera ça, ça va appliquer un positionnement absolu à ce petit personnage ici, ce gars. Il est là, et son élément va commencer à chercher le DOM jusqu'à ce qu'il trouve un autre élément qui a un positionnement lui est appliqué, un élément qui est son parent. Il n'y a pas d'autres éléments avec ce spécifié moment donc cela va fondamentalement aller jusqu'à la fenêtre du navigateur, alors regardez ceci, il va. Il suit ces instructions, en bas zéro gauche 3 si cochez ça, il va, il n'a aucun positionnement dans le pli tout. Laissez-moi vous montrer à quoi ça ressemble avec la position relative, et éteindre ça. Avec la position relative, il occupe toujours une place dans le DOM, mais si je fais quelque chose comme changer la distance par rapport au bas, utilisons un 100 pixels, vous verrez un mouvement et vous penseriez que
cela permettrait à pour se déplacer car il est centré. Mais ce n'est pas parce que son élément existe toujours dans le DOM ici, cependant, il est juste affiché ici. Mais quelque chose de bizarre à propos du positionnement relatif, et je n'ai pas trouvé une très bonne utilisation pour cela, honnêtement
, en plus d'être utilisé comme une classe de positionnement de conteneur parent pour un positionnement absolu, voyons comment ces deux travaillent ensemble. Ici, il est avec positionnement absolu appliqué, si nous montons à l'élément que nous voulons qu'il fasse référence, qui dans ce cas est le héros, et nous mettons la position relative dans leur chambre. Maintenant, il fait des recherches jusqu'à ce qu'il trouve ça et de là il dit d'accord, je passe en bas zéro, gauche 3 %, c'est comme ça qu'on trouve sa position. On peut y aller maintenant, décommenter ce texte de ligne dans le héros contre héros. On y va, et il ira où il est censé aller. J' espère que cela explique un peu le positionnement absolu, je vais vous montrer un autre exemple ici aussi. Jouons avec un positionnement fixe très rapidement. Cela ne fait pas partie du projet, mais ce pourrait être quelque chose de amusant pour vous de vérifier. Nous allons prendre notre barre de navigation ici, faisons un en-tête collant hors de lui. Nous ferons position fixe, rappelez-vous que la position fixe ne fonctionne que sur le haut et le bas de la fenêtre du navigateur, et il ne peut référencer que la fenêtre du navigateur pour positionnement de sorte que vous ne l'utilisez pas avec un positionnement relatif. Vous l'avez vu disparaître, nous devons lui donner un index z, donc vous avez un index x qui est de gauche à droite, un index y qui est de haut en bas, un index z sort à zéro. Cela vient de tomber à la position zéro, et nous devons le déplacer à la position d'un ou plus haut afin qu'il puisse être au-dessus du reste du contenu, et ensuite nous devons juste donner à cela la largeur de 100 pour cent pour le faire remplir cette sauvegarde, donc maintenant, nous avons un en-tête collant. Une chose que vous remarquez est que puisque cela est sorti du DOM, il ne pousse pas du tout cette image supérieure vers le bas donc si je l'éteins, par exemple, vous remarquerez qu'il saute, et maintenant il pousse cette image de héros vers le bas donc c'est quelque chose à considérer quand vous l' étalez, vous allez devoir tenir compte de toutes ces distances, mais de toute façon, c'est une expérience finale là-bas, vous pouvez jouer avec ça vous-même. Ce que nous allons faire, c'est aller ici et utiliser un positionnement absolu pour faire en sorte que ces petites cartes de bande ressemblent au design, comme ça. Ils ont un rectangle semi-transparent avec un peu d'informations dedans. Nous allons commencer par décommenter la carte de bande, regardons cela, rien ne se passe vraiment, rien ne devrait vraiment, il définit juste la hauteur,
rend la position relative, ce qui nous met en place pour utiliser le positionnement absolu et met une marge dessus. Faisons la barre de titre ici, mais commenter le positionnement absolu pour le moment. Vous voyez qu'il rend ci-dessous, il est censé être au-dessus, nous allons utiliser le positionnement absolu pour le mettre au-dessus de cette image. Prenons certains de ces autres styles ici, barre de
titre, nom de groupe, vous verrez qu'il y a un flotteur, parce qu'on a un titre à gauche et une nuit à droite, alors voici la nuit, voir il flottait à droite, donc cela devrait aller à droite, et il va, maintenant décommentons la position absolue et voyons ce qui se passe. Maintenant, tout ce contenu peut être retiré
du DOM et chevaucher ses voisins ici à l'intérieur de cette div. Vraiment rapide, juste parce que je veux conduire cette maison, ce bloc de conteneurs ici a positionné relatif, et alors tout ce qui est à l'intérieur de celui-ci avec une position absolue peut le référencer pour le positionnement, donc vous voyez que nous avons a obtenu le bas zéro juste là, et c'est coller au bas à droite là. Maintenant, nous allons vraiment rapidement obtenir ces styles et les faire flotter sur la droite, tout
cela devrait être assez vieux entendu maintenant. Je vais ajouter une couleur d'arrière-plan à ces choses, et nous allons styler l'en-tête, la clé là. Maintenant, voici quelque chose d'intéressant dans l'en-tête ou un petit truc que j'ai utilisé, j'ai mis du rembourrage tout autour de cet en-tête, et c'est à l'intérieur d'une boîte qui a un rembourrage. Mais je voulais que le violet s'étire jusqu'à la fin, donc ce que j'ai dû faire était d'utiliser une marge négative. Jetez un oeil à cette astuce, chaque fois que vous avez besoin de vous pouvez utiliser une marge négative, vous voyez ce négatif 20 pixels ? Réglons cela à zéro, et vous pouvez voir le comportement par défaut, voir son a obtenu cet écart laid. En utilisant la marge négative, je peux l'étendre sur la marge. C' est un peu contre-intuitif, mais c'est un super petit piratage. Nous avons ces boîtes, appliquons une largeur et un flotteur pour que ces choses s'alignent comme elles le devraient. Un peu de style pour le prix, style la description, voilà, ça commence à paraître bien, et enfin, nous avons tout ce style de conteneur. Ceux-ci sont tous stylés, revenons ici et faisons
les flotteurs alors nous devrions avoir notre mise en page d'accueil terminée. Lune. Vous pourriez reproduire quelque chose comme ça, je veux dire, certainement creuser autour, jouer avec ça, apprendre à savoir comment ça marche, casser, le réparer, mais en fonction de ce que vous avez appris dans ces leçons, vous pouvez exécuter ce type de mise en page. Peut-être que ce ne sera pas rapide, indolore et facile, mais vous avez certainement les outils pour le faire, et si vous le faites quelques fois, cela aura du sens. Maintenant, prenons ce que nous avons ici et réutilisons-le et recyclons-le pour configurer rapidement le reste de nos pages.
9. Recycler pour la vitesse: La grande chose à propos du code est qu'une fois que vous l'avez écrit, vous pouvez le réutiliser. Nous avons quelques éléments sur cette page qui répètent l'en-tête,
le pied de page, l'arrière-plan derrière cette section du milieu. Copions ces choses sur nos deux prochaines pages pour obtenir un saut sur la création. Open Experience dot HTML à partir des fichiers de démarrage, il est vide, mais ce que nous faisons ici est de saisir les parties réutilisables du site. Donc, nous prenons la tête HTML de type doc-type, nous utilisons les mêmes choses là-bas, classe de corps, maison, nous allons changer pour l'expérience, mais tout de, faisons juste l'en-tête pour l'instant. Du doc-type jusqu'à l'en-tête, copiez-le et collez-le ici,
et vous savez ce que mes yeux vont saisir le pied de page parce que nous l'avons utilisé. Donc, nous allons obtenir le HTML proche et jusqu'au pied de page, et nous pouvons dire que nous avons attrapé la bonne quantité de code parce que voir comment les crochets correspondent tous, donc nous avons nos boîtes alignées juste. Maintenant, changeons ça pour l'expérience. Je ne sais pas si vous vous souvenez ou non, mais nous avons écrit quelques styles dans
notre feuille de style pour qu'il fournisse un héros différent pour la page d'expérience fait des expériences et nous pouvons faire la même chose pour l'emplacement. Tout le même code, nous allons juste échanger l'image en arrière-plan. Jetons un coup d'oeil à ce que nous avons ici. Je vais recharger ça pour l'expérience, nous avons notre en-tête, nous avons notre pied de page. Changeons cela afin qu'il indique que nous sommes sur la page d'expérience. Ici, j'ai cette classe active. Active est celui qui met la ligne sous la page sur laquelle nous sommes, donc si je change cela en lien d'expérience, voilà. Maintenant, nous avons un moyen de dire sur quelle page nous sommes. Qu' est-ce qu'on peut emprunter ? Toute la section des héros est la même, alors empruntons ça, nous avons un héros jusqu'à, où se referme-t-il ? Juste là, et vas-y rentrer. Voir tout s'aligner encore pour que nous sachions que nous sommes au bon niveau de boîtes. Donc, nous avons notre expérience différente et nous pouvons juste échanger ces
trucs sur la base nécessaire contre la copie dont nous avons besoin. Donc, nous n'avons plus besoin du logo Moozedoo, débarrassez-vous de ça, nous n'avons plus besoin de ce HR, nous n'avons plus besoin de bouton tickets, et nous n'avons plus besoin du petit personnage. Tout ce dont nous avons besoin, c'est ce titre. Pour regarder notre comp design, nous pouvons tirer le titre de cela, nous
y allons. Donc, juste comme ça, nous avons toute une configuration de page et puis nous devons évidemment faire du contenu au milieu ici, mais supposons que puisque notre autre page ou page d' emplacement présente les mêmes types de mise en page, nous pouvons vraiment rapidement obtenir cela en ligne pour acheter copier tout cela dans notre page de localisation. Tout ce que nous avons à faire est de changer cette classe active en emplacement et de changer cette classe de corps emplacement, et nous y allons. Donc, nous pouvons vraiment dupliquer rapidement les mises en page une fois que nous avons trouvé une partie de cette copie. Faisons la partie médiane de l'expérience, la dernière chose que je voulais vous montrer est comment vous pouvez utiliser la galerie secrète float. Rendez-vous dans le dossier des extras de la leçon 10, et j'ai préparé le contenu pour ces deux pages. Voyons donc la page d'expérience. Prenez tout de héros, eh bien prenez tout parce que c'est juste tout le contenu principal, et nous allons coller cela dans notre page d'expérience. On va aller sur le héros, on devrait tout obtenir du héros et du milieu et tout. Il semble que notre retrait s'est effondré un peu ici, sorte que vous pouvez pousser commande, accolade à gauche et indenter 1, et vous pouvez pousser commande accolade accolade en cela, dans l'autre sens. Donc je vais retirer ça aussi, pour tout aligner. Cela peut sembler ridiculement TOC, mais je vous dis que cela vous aidera dans votre codage à réaliser combien de boîtes en vous êtes. Donc, je sauvegarde ceci et jette un oeil dans le navigateur, mais la page d'expérience, et j'ai ces différentes fonctionnalités ici. Donc, dans notre mise en page, ils ressemblent à des tuiles ou sont comme une disposition de style galerie, donc nous pouvons facilement accomplir cet effet en utilisant des flotteurs, et contrairement à notre flotteur à deux colonnes que nous avions auparavant, nous pouvons tous les définir sur flottent à gauche, et s'ils sont la moitié de la largeur de leur conteneur parent, ils vont juste empiler. Mais je vais vous montrer un sélecteur CSS vraiment soigné à utiliser pour aider avec cela. Allons saisir les styles de ce dossier de leçon 10, sélectionnez-les tous, copiez, allez à notre feuille de style, qui est juste ici. Collez-les dans, si nous décommentons le texte, cela va nous donner ce texte ici. ne se passe pas beaucoup là, rien que vous ne pouviez pas comprendre, juste quelques styles de polices habituelles. Disons la fonctionnalité de commentaire, qui va commencer à prêter un peu de style à cela. Regardons ce que nous avons ajouté, la fonctionnalité que nous avons ajouté une largeur qui les a permis.
10. Merci !: Merci d'avoir pris mon cours de Skillshare. J' espère que vous en avez beaucoup. Si vous avez des suggestions, des commentaires, des critiques, s'il vous plaît laissez-moi un message et j'adorerais que vous me laissiez une note positive. Si vous avez des idées pour des sujets futurs, j'aimerais les entendre aussi. Bonne chance, et je te verrai là-bas sur Skillshare.
Marc Nischan, Artsy people can code!
