HTML ET CSS : Construire des sites Web réactifs pour les débutants

2. Les principes du Web: - Salut. - Bienvenue dans la première série de diapositives, - HTML et Web fondamentaux. - Asseyez-vous, - détendez-vous et nous allons discuter du fonctionnement du Web, - du processus de développement, - des habitudes de travail. - Et puis, - plus tard, - nous ferons un exercice pour apprendre à connaître quelques éléments HTML différents. - Tout d'abord, - parlons de la façon dont le Web fonctionne, - et j'espère que cela vous donnera une idée de la façon dont ce que nous apprenons s'intègre dans l'image plus large d'Internet. - Nous allons parler de demandes en réponse, - rendu dans le navigateur, - verset local distant et quelques différences entre front et back et développement. - D'abord, - parlons de la demande et de la réponse. - Alors imaginez que vous êtes assis à la maison et vous obtenez en face de votre ordinateur et vous dites - Je voudrais aller sur ce site afin que vous tapez le nom de domaine dans votre navigateur comment les choses - fonctionne dot com et puis vous appuyez sur retour et votre ordinateur se connecte à Internet, - et il parle à ce gars ici, - qui est un serveur DNS, - D n A. - signifie serveur de noms de domaine service Dina. - On est comme des opérateurs d'Internet. - Ils ne détiennent pas réellement de fichiers de site Web, - mais ils vous diront comment se rendre à l'ordinateur spécifique où qu'il se trouve dans le monde -. - De cette façon, vous pouvez vous y connecter et ensuite obtenir les fichiers de site Web que vous recherchez. - Alors les serveurs DNS. - Ils parlent à d'autres serveurs DNS toute la journée, - et ils gardent une trace de l'association d'un nom de domaine à quelque chose appelé une adresse I P. L' adresse est très similaire à celle que vous avez sur votre maison. - C'est essentiellement une façon d'identifier l'emplacement d'un ordinateur où qu'il se trouve n'importe où - dans le monde. - Eso n'importe quel ordinateur connecté à Internet a une adresse I. - P. - Même l'ordinateur sur lequel vous êtes en ce moment a sa propre adresse. - Donc, quand vous tapez comment les choses fonctionnent dot com, - vous demandez au serveur DNS. - S'il connaît l'adresse de ce serveur d'hébergement et que ce domaine ne le sait pas, - il dit, - Eh bien, - ce n'est pas dans ma base de données, - donc je vais demander à un autre serveur DNS. Et celui-ci sait qu'il dit, en fait, - oui, - c'est dans mon argent qui correspond à l'adresse I P. - 70.42 point 251.42 Donc ce premier serveur DNF dit merci à toute l'argent que l'information ainsi. Au cas où quelqu'un me demanderait à nouveau dans le futur, alors je saurai quoi leur dire, et ça vous envoie cette information. - Donc maintenant votre ordinateur connaît l'adresse spécifique du serveur auquel vous essayez de vous connecter - à, - et c'est sa flèche verte. - Voici la connexion entre votre ordinateur local et ce serveur d'hébergement distant - et les serveurs d'hébergement, - qui sont représentés ici par ces tours bleues. - Ce sont les ordinateurs qui contiennent les fichiers web réels, - le contenu qui est alors, - vous savez, - téléchargé sur votre ordinateur et rendu dans votre navigateur. - Donc, chaque fois que vous avez l'adresse i P, - vous faites une demande dans ce serveur d'hébergement spécifique et il renvoie une réponse. - Et cela démarre une conversation entre votre ordinateur et le serveur distant. - Donc, vous demandez, - vous faites une requête http et vous demandez quelque chose comme la page d'accueil, - et le serveur renvoie une réponse sous la forme de contenu. - Et c'est du code texte, - c'est soit HTML CSS ou JavaScript. - Alors, dans ce cours, c'est ce qu'on va apprendre. - Nous allons apprendre à écrire le code HTML et CSS ou le contenu qui est passé entre le serveur distant, le serveur Web et le navigateur des spectateurs. - Parlons un peu de vers local distant maintenant, - donc le terme local fait référence à l'ordinateur qui est en face de vous en ce moment. - L'ordinateur local est quelque chose que vous pouvez toucher qui est juste sous vos yeux, et qui est censé être distant. - Où distant fait référence à un serveur Web qui est un emplacement distant ailleurs dans le monde. - Donc, chaque fois que nous produisons chaque fois que nous sommes dans notre phase de production, nous travaillons toujours sur notre ordinateur local, et nous l'affichons dans notre navigateur sur notre ordinateur. produisons chaque fois que nous sommes dans notre phase de production, nous travaillons toujours sur notre ordinateur local, - Donc on travaille localement. - Nous l'affichons localement dans le navigateur, - vérifions notre travail. - De cette façon, nous pouvons nous assurer que tout est exactement comme nous le voulons avant de le publier et le mettre sur un serveur distant. - Donc, vous construisez votre site Web sur votre ordinateur, - votre écriture HTML et CSS code. - Vous prévisualisez ce code dans votre navigateur et vous vous assurez que tout ressemble à ce que vous voulez. - Peut-être que vous corrigez les fautes de frappe, - changez de couleur, - des choses comme ça. - Alors vous décidez OK, - Je suis prêt à mettre ça sur le serveur distant. Alors on va utiliser un processus appelé FTP, qui est le protocole de transfert de fichiers pour mettre ces fichiers ou les télécharger sur le serveur Web. - Et maintenant, - parce que ce serveur Web a un nom de domaine spécifique, - une adresse I P qui lui est associée, - les gens du monde entier peuvent maintenant voir et accéder à ces fichiers. - Et puis, - à tout moment, - si vous voulez changer ou modifier ces fichiers, - vous pouvez toujours les retirer de ce serveur Web. - Vous avez donc la dernière copie sur votre machine locale aussi. - Et vous pouvez le faire en téléchargeant ou en récupérant les fichiers, - en les ramenant à votre ordinateur local. - Parlons un peu des différences entre le développement frontal et Web et le développement backend - Web. - Donc, dans cette classe, nous allons faire du développement Web front-end seulement. - Nous allons apprendre à écrire ces 1er 2 qui est HTML et CSS. - Maintenant. - La principale différence est que les langages de programmation avant et programme sont en fait - les invités. - Nous devrions dire que les langages de balisage HTML et CSS sont tous rendus côté client, ce qui signifie qu'ils sont rendus dans votre navigateur. - Votre navigateur interprète ce code puis le rend, - ce qui permet au site d'apparaître maintenant. - C'est en contraste avec le back-development et le web, - où tous les langages de programmation sur le back-end sont interprétés par le serveur - côté serveur. - Donc, - par exemple, - ruby, - PHP, - python, - Java et node, - qui est une version de JavaScript sur le serveur. - Tous ces langages de programmation travaillent pour mettre à jour des objets. - Um, - vous savez, - interagir avec la base de données et finalement rendre les fichiers HTML et CSS qui sont ensuite - passés à l'extrémité avant que l'air passé votre navigateur. - C'est donc la principale différence entre le développement et le développement et le développement back-end. - Alors que vous commencez à faire vos propres projets, - un bon début pour créer n'importe quel site Web est un processus de remue-méninges. - Donc, en chemin, - n'hésitez pas à prendre un morceau de papier, - un stylo ou un crayon, - et commencez à dessiner les idées de ce que vous voulez construire avant de commencer - à coder. - Beaucoup de gens aiment faire un organigramme ou un diagramme de flux où vous cartographiez essentiellement ce que - les pages existeront et comment ces pages seront liées à d'autres contenus. - Ceci est un bon exemple d'une maquette dessinée à la main, - de sorte que vous pouvez également prendre et dessiner les pages individuelles et sorte de prendre des décisions sur - où le contenu va aller. - Et ça va vous faire gagner beaucoup de temps. - Parce qu'au lieu d'avoir à déplacer du code ou à ajouter ou supprimer du code, - vous pouvez vous décider de la mise en page globale et du contenu sur lequel vous souhaitez exister - un morceau de papier sur. - Et c'est beaucoup plus rapide d'effacer quelque chose ou de le redessiner que de faire beaucoup de changements dans votre - code. - Donc, je pense que c'est une bonne idée avant de commencer un projet de faire une sorte de simuler ce - vous pensez que les pages du site tiendront et une sorte d'endroit où vous imaginez que vous serez - positionner ce contenu. - Il y a aussi des simulations numériques que vous pourriez faire en ligne. - Un site que j'aime s'appelle Mockingbird, - et ces sites vous permettront de faire des simulations que l'air peut-être plus approprié si vous avez besoin - pour présenter cette information à un client avant de commencer le revêtement, - il y a même des modèles dans simuler des sites spécifiquement pour les tablettes et les appareils mobiles ainsi -. - Une des premières choses que vous voulez vous assurer lorsque vous commencez sur un nouveau projet est - créer un dossier dédié à ce site Web ou ce projet Web, - et nous allons toujours garder tous nos fichiers et sous-dossiers qui sont liés à ce - site dans ce dossier. - Donc nous appelons toujours ça un dossier parent ou un dossier racine. - Celui-ci est nommé site. - Normalement, tu nommeras ça. - Quel que soit le nom de votre projet. - Par exemple, - si je construisais un site Web pour une usine de gaufres, - je pourrais appeler ce dossier quelque chose comme Waffle factory dot com ou quelque chose comme ça. - Maintenant, - à l'intérieur de ce dossier parent principal ou dossier racine, - c'est là que tous vos sous-dossiers seront. - Toutes vos images pour votre site web seront bien organisées dans un dossier. - Toutes les polices spéciales que vous pourriez utiliser pourraient être organisées. - Il y a bien, - tout notre CSS, - qui va être le style de notre site, - va être situé dans un dossier, - et toutes nos pages Web sont HTML. - Les pages seront également à l'intérieur du dossier parent principal. - Et cela gardera tout beau et organisé, - et nous allons essayer d'éviter d'avoir un fichier ah, - pour notre site web existant en dehors de ce dossier principal. - Donc, dans le prochain exercice, - on va sauter et parler de la syntaxe HTML. - Nous allons examiner la structure du document pour construire une page de base. - On va apprendre à créer des éléments de texte, et on va apprendre à créer des images, puis des liens entre nos pages. - Alors allez-y et passez au premier exercice. - N'hésitez pas à parcourir le reste de ces diapositives en utilisant le lien pdf ci-dessous, - et il aura du contenu qui examinera toutes les choses que nous passons dans l'exercice. - Merci. 3. Pour commencer: - Salut. - Bienvenue au premier exercice 1.1. - Avec n'importe quel exercice, - vous allez toujours vouloir commencer par télécharger le fichier zip que je vous fournit. - Et ça va être les fichiers sources avec lesquels on va travailler pour chaque exercice . - Donc juste pour la première fois, je vais vous montrer comment ça marche. - Donc, je suis allé de l'avant et téléchargé ce fichier zip, - qui est appelé 1.1 tiret html Dash fondamentals dot zip et j'ai dû décompresser cela. - Donc, le fichier est un seul fichier qui est compressé, - un peu comme briser un tas de fichiers et de dossiers en remorquage. - Un dossier, - et on a dû le comprimer ici. - Je viens de double-cliquer dessus sur Mac toe un compresser cela et il crache un dossier comme celui-ci - Vous devrez peut-être, - en fonction de votre ordinateur, - votre système d'exploitation signifiant orteil comme à droite, - cliquez dessus et dire quelque chose comme un compress ou sur une archive ou un extrait pourrait être une autre - façon qui pourrait être écrit, - mais en tout cas, - vous avez remorquer, - décompresser ou non ce fichier, - et cela devrait se transformer en un dossier comme celui-ci. - Hum, - et c'est tous les dossiers. - Les fichiers source qui devront démarrer cet exercice. - Fondamentalement, - ceci contient juste quelques images ici, - qui sont des images de quelques chaussures. - Pourquoi ? - Parce que le premier, - um, - projet que nous allons construire va être un site Web elle. - Alors j'ai fait passer ça dans un dossier sur mon ordinateur. - Vous pouvez décider où vos fichiers pour votre pour cette classe vont vivre. - Vous pouvez même les mettre sur le bureau si vous n'avez pas un endroit approprié. - Ce que j'ai fait, c'est que j'aime mettre tous les fichiers de mon site dans un dossier ici. - J'ai mon dossier de sites ici, - et je suis allé de l'avant et j'ai créé un nom de dossier spécifiquement pour cette classe HTML et CSS à partir de - zéro. - Et vous pouvez voir à l'intérieur de là. - Est-ce que ce fichier zip comprimé là par 1.1 tiret html dash dossier Fundamentals. Et à l'intérieur, on a juste quelques images, comme je l'ai dit. - Ok, - donc c'est un bon début, c'est de déplacer ces fichiers dans un endroit où vous voulez qu'ils vivent - sur votre ordinateur 4. Structure de document: Et la prochaine chose qu'on va faire, c'est qu'on va parler de notre éditeur de code, donc je vais y aller et je vais lancer un texte sublime. - Et quand le texte sublime commence, - nous n'avons pas de fichier sans titre ici. - Et ce que nous voulons d'abord, c'est que nous allons vouloir ouvrir quelque chose appelé The Sidebar, - qui sur le S nous permettra de voir nos fichiers et dossiers de projet. - Donc je vais aller au menu déroulant View, et je vais aller à la barre latérale et montrer la barre latérale à nouveau. - C'est sous la vue. - Barre latérale, - Afficher la barre latérale. - Je vais cliquer dessus et ça amènera ma barre latérale ici. - Et la bonne chose à ce sujet est que je peux faire glisser ce dossier que je vous ai fait télécharger les gars - 1.1 html fondamentaux. - Vous pouvez faire glisser ça et déposer ça dans votre barre latérale, - et vous pouvez voir là que voici mes images et ce dossier particulier. Ok, donc pour commencer, on veut juste créer notre page d'accueil. Je vais aller dans le menu déroulant des fichiers et dire un nouveau fichier, et ça va créer un fichier sans titre comme ça, et on va juste enregistrer ce fichier immédiatement, je vais dire fichier sûr et on va nommer ce fichier. - Quelque chose de très spécifique. - Maintenant, - tous les autres fichiers sur votre site, - vous pouvez vraiment les nommer comme vous voulez. - Um, - ce fichier particulier, - qui est la page d'accueil, - nous devons nommer cet index, - qui est tous en minuscules I n d x, - et nous devons lui donner une extension de fichier de point HTM ou point html. - L'une ou l'autre extension est bonne. - Donc, la raison pour laquelle nous devons nommer cet index est que chaque fois que ah personne qui essaie - voir votre site Web fait une requête à ce serveur distant, - le serveur distant par défaut va leur transmettre le fichier nommé Index. - Et c'est pour ça qu'ils verront ça en premier. - D'où pourquoi cela devient la page d'accueil ou la page d'accueil. - Certains l'appellent donc nous voulons nous assurer que nous sauvegardons cela au bon endroit. - Rappelez-vous, - nous toujours, - toujours, - voulons toujours enregistrer tout le contenu de notre site dans ce dossier racine unique. - Donc, dans ce cas, - j'ai créé un dossier ici, - mines sous les sites, - et puis j'en ai un pour le nom de la classe HTML et CSS à partir de zéro. - Et il y a mon dossier 1.1 et je peux voir mon dossier Images assis là dedans. - Certains du nom de cet index et enregistrez ce droit dans ce dossier d'exercice comme ça. - On peut voir que les pages d'index situées à l'intérieur de ce dossier Ok, - donc index dot html, - nous sommes prêts à partir. - Alors commençons à écrire du code HTML. - Plongons dans ce truc. - Si jamais vous voulez agrandir votre texte, vous pouvez utiliser, - hum, - contrôler plus et moins sur Windows ou Mac. - C'est la touche de commande, - et la touche plus ou moins les rendra plus grands. - Donc, si vous tapez du texte, - vous pouvez changer la taille de celui-ci comme ça. - Je vais rendre cette taxe agréable et importante pour vous les gars, - et ça aidera avec la tension de glace. - Aussi, - si vous codez vraiment tard la nuit ou pendant de longues périodes, - hum, - et vous pouvez sauver votre posture du dos dans vos yeux en rendant le code beaucoup plus grand. - Ok, - donc la première chose que nous allons faire est que nous allons apprendre sur la syntaxe html, - Donc html signifie langage de balisage hypertexte et marquer le langage est ce qu'ils font est - fournir une série d'éléments qui entourent le contenu, puis définir ce contenu pour le navigateur -. On doit dire au navigateur, ce texte est un titre. - Hey, - ce texte est un paragraphe. - C'est une image et c'est un lien. - Donc, pour commencer, - apprenons un élément très important appelé l'élément HTML. - Maintenant, tous les éléments sont constitués de balises de départ et de balises de fin. - Certains éléments n'ont en fait qu'une balise de départ, - mais la plupart d'entre eux ont souvent une balise de début et de fin. - On en parlera un peu plus tard. - Donc, toutes ces balises sont composées de crochets d'angle, - ce qui est un symbole inférieur à. - Et puis le nom de la balise, puis un symbole plus grand que comme ce nom est la balise d'ouverture . - Sauf qu'ils ont les moyens de faire une barre oblique en face, - comme ça. - Donc, ce que nous regardons ici est quelque chose appelé l'élément HTML et l'élément HTML. - Ce qu'il fait, c'est qu'il indique au navigateur que tout le code est venu entre ces balises. - Ici, au milieu est le code HTML, - de sorte que vous pouvez voir ici. - Ceci est l'élément HTML, - et il décrit le contenu entre ces balises comme étant du code HTML. - C'est ce qu'on appelle la balise HTML de départ, - et c'est ce qu'on appelle la balise HTML de fin. - Encore une fois, - la balise de départ est la même que la balise de fin. - Il y a juste une Ford Slash devant lui comme ça. - Et c'est très commun. - Ok, - donc c'est un bon début. - Fondamentalement, - Maintenant nous savons que nous avons dit que le navigateur commençait à écrire du html ici, - et nous terminons notre HTML ici, - donc tout ce qui se passe entre les deux sera le reste de notre document. - Je vais ajouter une étiquette de plus en haut de tout ça. - Hum et cette étiquette est aussi importante. - C'est une balise très unique, - et ça s'appelle DOC Type. - Et pour écrire la balise de type doc, - nous faisons moins que le point d'exclamation de symbole. - Et on écrit le mot type doc comme ça. - Maintenant, - ce que le type Doc fait est Thisted AG va dire au navigateur quelle version de HTML était - en cours d'exécution. - Donc, la façon dont nous disons ceci, - le navigateur que nous créons non seulement un document HTML, - mais en html cinq document est que nous mettons un espace après le mot type doc et nous écrivons HTML comme - ça . - Et cela dit au navigateur, - c'est un document HTML cinq. - Maintenant, - si vous regardez en arrière les versions précédentes de HTML ou X html, - vous remarquerez que ces balises de type doc peuvent en fait être assez longues et longues. - Ils peuvent continuer et encore. - Um, - parfois, - par exemple, - en html quatre ou trois. - Ceux-ci étaient, - um, - presque une phrase longue pour décrire au navigateur que le document particulier était, - Vous savez, - qui marque la version pour HTML 51 des inclusions de celui-ci, - qui est un belles nouvelles fonctionnalités que c'est très simple. - Nous pouvons juste, - type doc html, - et il le voit comme un document HTML cinq. - Ok, - super. - Donc maintenant nous avons dit au navigateur, - um, - c'est un document HTML 5, - et voici le début de mon code HTML. - Et voici la fin de mon HTML pourrait ensuite. - Parlons des deux parties principales de n'importe quelle page HTML. - Donc, toutes les pages html divisées en deux sections principales et l'une est appelée la tête comme ceci - barre oblique le fermera et ensuite une autre est appelée. - Une autre partie s'appelle le Corps. On a la tête et le corps, comme toi et moi, on a une tête dans un corps. - Donc, à l'intérieur de la section de tête, - ce qui va spécifiquement ici est le contenu qui est destiné aux navigateurs, - les moteurs de recherche et les appareils. - C'est comme le code machine qui va ici. - Ceci est des informations, - métadonnées et liens de contenu qui sont liés à, - um, - comment cette page devrait afficher quel type de termes de recherche devrait être associé à ce site -, - que nous allons parlez un peu plus tard. - Mais principalement tout dans cette section va être des choses que nous ne voyons pas réellement - physiquement dans la page. - Ce sont juste des choses qui sont destinées à d'autres machines et appareils. - Maintenant, - c'est en contraste avec le corps maintenant dans la section du corps. - Nous avons en fait tout le contenu visible physique de la page pour aller de l'avant et laisser une note - à elle-même à ce sujet pour nous apprendre à ce sujet. - Apprenons en fait un autre élément appelé le commentaire. - Donc, cette balise utilise leancet que le symbole point d'exclamation, puis tiret de tiret. - Ok, - ça commence à ressembler au type de dock, - mais il a en fait deux traits d'union qui le suivent. - Hum, - et vous pouvez voir ici que tout le code maintenant en dessous de cette balise de commentaire d'ouverture ici a - été génial sur. - Ici, on peut écrire. - C'est un commentaire, - hum, - sur Lee, - Je vais juste dire que je peux le voir, - euh, - dans le code, - mais cela n'apparaîtra pas dans le navigateur. - Donc un commentaire est un excellent moyen de laisser des messages à nous-mêmes. - Parfois, les gens utilisent même des commentaires pour désactiver les sections de code sur la page et ces air - Vraiment ? - Ah, - bonne habitude d'étiqueter les choses et sorte de, - hum, - laisser des messages et des commentaires sur quoi ? - Certaines parties du codeur font. - Alors maintenant que nous avons appris à créer ce commentaire, - qui encore ? - Cela commence avec moins d'exclamation tiret est comment vous commencez le commentaire de la façon dont nous - terminons le commentaire que nous utilisons tiret plus grand que vous remarquez réellement si j'oublie d'inclure - la fin marquée là qu'il commente réellement tout le reste de la page. - Je dois dire que j'ai fini. - Dis, - hé, - navigateur. - J'ai fini de faire un commentaire en disant tiret de tiret supérieur à ceci est une balise unique qui - n'a pas la barre oblique dans la clôture. - Ça finit comme ça. - Mais ce type est vraiment le seul comme ça. - Ok, - maintenant que nous avons appris à créer un commentaire, - écrivons un petit commentaire sur ce qui se passe dans la section de la tête. - Allons-y et écrivons la tête. - La section tête, - euh, - contient des informations pour, - comme, - les moteurs de recherche et le navigateur et n'est pas vu par notre spectateur, - et nous allons terminer ce commentaire là. - Maintenant. - Ces commentaires peuvent être une ligne ou plusieurs lignes. - Ils peuvent être sur une seule ligne comme celle-ci, - ou vous pouvez appuyer sur retour, - et vous pouvez réellement faire en sorte que ces commentaires s'étendent à plusieurs lignes comme si Ok, - écrivons aussi un commentaire pour la section du corps. - Donc, contrairement à la section en tête, - que nous ne voyons pas vraiment ah, - le corps est toute la zone visible de la page Web. - Euh, - tu sais, - par exemple, - dans cette section, - on peut voir des choses comme des textes, - euh, - des liens images et tous les types de médias. - Donc, dans ce commentaire là, - de sorte que ces air les principales sections de dans les pages HTML la tête et le corps. - Allons juste apprendre, - um, - commençons par apprendre un tag qu'on peut placer à l'intérieur de la section de tête et celui de ce type - appelé titre pour qu'on puisse donner un titre à notre page ici. - Ce site est destiné à une entreprise de chaussures. Donc pour le titre, je vais mettre le nom de la compagnie ici. - Je dirai que les chaussures Z H W sont un nom générique. - J'ai inventé, - et nous mettrons des informations qui seront utiles pour les moteurs de recherche. - Va dire, - c'est Ah, - bonne affaire. - Des grossistes de chaussures comme ça. - Et cette page est la page à propos. - Ma page d'accueil va commencer par des informations sur l'entreprise. - Alors je vais aller de l'avant et dire à propos de nous. - Je pense que et nous fermerons ce titre de slash. - Ok, - donc ça va faire quelques choses. Les moteurs de recherche numéro un peuvent voir ça, et ils vont dire, c'est un site qui a du contenu sur les chaussures, et pour la vente en gros de chaussures. Les moteurs de recherche numéro un peuvent voir ça, et ils vont dire, c' et ils vont dire, c'est un site qui a du contenu sur les chaussures, et pour la vente en gros de chaussures. est un site qui a du contenu sur les chaussures, et ils vont dire, c'est un site qui a du contenu sur les chaussures, et pour la vente en gros de chaussures. - Et c'est aussi une page sur eux ou sur la société. - L'autre chose que le titre fait est qu'il est également visible sur l'onglet du navigateur. - Jetons un coup d'oeil à ça. - Je vais aller de l'avant et enregistrer cette page. - Donc, on va dire enregistrer le fichier ou vous aurez probablement l'habitude de le faire. - Um, - commande s sur Mac. - Ou vous pouvez faire des contrôles sur les fenêtres pour enregistrer. - D'accord. - Et allons de l'avant et abordons ça dans le navigateur. - Et on peut juste traîner ce type dans le chrome ici. - On va y aller et trouver ce dossier. - Ça s'appelle Index, et je vais juste jeter ça là-dedans. D' accord, donc tout d'abord, cette page est blanche. - C'est totalement vide. - Je n'ai rien mis dans le sexe du corps et encore, - mais une chose que nous pouvons voir de la tête est ici en haut de l'onglet du navigateur, - vous serez en mesure de voir le nom du site, - et il manque d'espace. - Il commence le bureau, - énormes chaussures W. - Des chaussures de bonne affaire , hein ? - Cool. - C'est un bon début. - Donc c'est une chose que nous pouvons voir dans la section de la tête. - Cet onglet est là ? - Mis à part ça, - tu ne verras pas physiquement voir quoi que ce soit d'autre à l'intérieur de la section de la tête. - En fait, - ce petit rectangle blanc ici qui est ma fenêtre de navigateur qui est le corps. - C'est là que nous allons voir des choses qui se trouvent dans le corps. - Alors revenons au code et écrivons un peu plus et vous allez zoomer un petit peu comme ça. - Ok, - donc c'est une page HTML vraiment basique, c'est que nous avons le type doc du haut. - Ensuite, nous avons la balise HTML, puis imbriquée à l'intérieur de la balise HTML. - Nous avons les deux sections principales de n'importe quelle page Web. - Nous avons la tête dans le corps, - donc nous avons déjà vu que nous pouvons placer le titre dans la tête. - Allons de l'avant et écrivons quelque chose dans la section du corps et voyons si cela apparaît. - Allons de l'avant et écrivons Bonjour monde ici à l'intérieur du corps. - Donc, je vais aller de l'avant et enregistrer cela et j'ai fait une commande après que vous pouvez aller enregistrer le fichier et je vais - va revenir au navigateur et la chose importante est que je dois rafraîchir toujours besoin - rafraîchir parce que je sauvegarde le code et puis pour le navigateur pour le voir, - nous devons le recharger. - Donc, je vais aller à cette petite flèche de rafraîchissement ici pour recharger la page sur Mac, - Vous pouvez aussi appuyer sur commande sont de recharger la page et plus que probablement sur les fenêtres de votre - navigateur va être le contrôle. - Sont le contrôle et la touche R. - Alors frapper commande sont. - Et là, on peut voir le mot « Bonjour ». - Monde est apparu là dans le coin de la fenêtre du navigateur comme ça un peu plus grand - là. - On y va. - C'est beau et facile à voir. - Ok, - Excellent. - Donc, cela démontre que le corps est l'endroit où nous pouvons physiquement voir le contenu dans la page. - Donc, nous avons appris sur le type Doc HTML tag la tête dans le corps sur. - Nous avons également appris à écrire des commentaires dans le code, - que seuls nous pouvons voir. - Tu le remarqueras. - Ce commentaire ici qui dit que le corps est toute la zone visible. - La page Web. - On ne l'a pas vu quand on est allé au navigateur. - Nous avons seulement vu le texte que nous avons écrit en dehors du commentaire, - qui est bonjour monde et sublime Text accepte cela pour nous afin que nous puissions voir clairement - que ce code ici est un commentaire 5. Formatage de texte: - Faisons une autre expérience. - Allons à l'intérieur de la section du corps et je vais frapper le retour quelques fois et je vais dire - bonjour, - Moon Next. - Et puis nous allons de l'avant et économiserons et reviendrons sur le navigateur et verrons ce que cela a fait. - Ok, - c'est intéressant. - Euh, - regardons le mot. - Bonjour, - Lune. - Bonjour, - monde. - Comment se fait-il que quand je l'ai écrit dans le code ici, j'appuie sur retour et j'ai mis celui-ci sur le dessus de celui-ci - un. - Alors le monde bonjour World devrait être au-dessus de bonjour Lune. - Mais alors, - étrangement, - dans le navigateur apparaissant côte à côte. - Eh bien, - la raison pour laquelle est que le navigateur ignore Whitespace. - C'est sur Lee qui s'intéresse vraiment à la relation de ces tags, non ? - Ces éléments Timo sont constitués de cette balise de départ et de fin. - Ils entourent le contenu et ils décrivent au navigateur ce qu'il est. - Donc ce titre tag nous décrivant au navigateur que c'est le titre de la page. - Il entoure ce contenu et indique au navigateur comment il doit l'interpréter. - Donc, si nous voulons que ce monde bonjour et bonjour lune apparaissent côte à côte, - nous devrions utiliser une étiquette spécifique, - et dans ce cas nous voulons réellement les faire apparaître l'un sur l'autre. - Donc nous devrons utiliser une balise spécifique pour ça aussi. - Donc, si je veux dire que c'est un paragraphe, puis en dessous, - il y a un paragraphe séparé. - Je dois entourer ce contenu de l'élément approprié. - Ok, - alors allons utiliser la balise p comme ça. - Donc, l'élément paragraphe est constitué de cette balise p d'ouverture et de fin p tag comme ceci, - et il entoure ce contenu Bonjour monde et dit qu'il est un paragraphe. - Donc, nous allons aller de l'avant et ajouter une étiquette p d'ouverture et de fermeture à Il y a bien, - et puis nous allons enregistrer cela et nous reviendrons au navigateur et rafraîchir. - Génial. - Alors maintenant bonjour, - Le monde est au sommet de Hello, - Moon. - Il voit cela comme un paragraphe dans. - Il s'agit d'un paragraphe distinct. - Donc html implique, - um bien, - une quantité décente de mémorisation. - On va devoir apprendre au moins ces étiquettes communes. - Je vais vous apprendre que vous obtiendrez beaucoup d'utilisation des balises HTML haute fréquence pour - surround contenu. - Ok, - donc c'est un bon début. - On a appris à créer des paragraphes. Peut-être que nous aimerions créer des en-têtes sur des textes de différentes tailles autour de la page. - Alors allons de l'avant et commençons par créer un titre ici en haut de notre page sur. - Et ça va être le titre de la plus grande taille, - qui est un H. - Et on va aller de l'avant et donner à ça le titre de notre société, - ce qui est facile. - H W est le nom de notre entreprise de chaussures, - et nous allons aussi créer une sorte de sous-titre, - um en dessous de ce texte un peu plus petit et nous dirons chaussures. - Donc la compagnie est des chaussures de CHW comme ça. - Allons-y et économisons, - et nous reviendrons rafraîchir et vérifier. - Vérifie ça. - Donc là, vous pouvez voir le titre de la page, - le H w ah, - les chaussures de sous-titre. - Et puis nous avons deux paragraphes ici. - Donc, les titres de l'air sont très importants. - Non seulement ils changent physiquement la taille du texte, - mais aussi les moteurs de recherche voient sémantiquement ceux-ci comme ayant une importance mawr parce que ceci - est un titre pour le contenu ci-dessous, - alors le moteur de recherche donne importance pour le titre de niveau un. - Et puis h deux, - qui est un titre de niveau deux, - qui est légèrement plus petit, - a un peu moins d'importance pour un moteur de recherche. - Il y a six niveaux de rubriques. - Il y a H 1 à H 6. , Souvent, Onley finit par utiliser l' , peut-être âge de 12 ans, peut-êtretrois h ou quatrième. - Mais il y a six tailles et niveaux d'importance possibles pour les rubriques commençant à chacun -, - qui est le plus grand et le plus important, - allant jusqu'à l'âge de six ans, - qui est le plus petit et le moins important de les titres. - Pour que nous puissions créer des titres. - On peut créer des paragraphes. - Regardons aussi, - hum, - placer le texte de remplissage. Disons que je construis ce site web pour ma compagnie de chaussures et que je n'ai pas de taxe à y mettre. - J'attends peut-être que mon rédacteur me l'apporte. - Ou peut-être que je ne l'ai pas encore écrit. - Donc, ce qu'on peut faire, c'est jouer des textos de remplissage. - Ils utilisent du texte ipsum chaud et le texte sublime a des outils intégrés pour le faire - ça. Je suis allé de l'avant et j'ai juste effacé la taxe et placé mon curseur entre l'ouverture et - fermeture de la balise P là, - et on va aller à des outils et deux extraits, - et on va aller de l'avant et aller à celui-ci qui dit ipsum chaud et cliquez, - et vous pouvez voir ce que cela a fait. - Est-ce qu'il y a ce genre de bêtises là-dedans ? - C'est en quelque sorte juste de placer un texte de remplissage pour moi, - ce qui est une bonne façon de commencer. - Et si je voulais avoir deux paragraphes, je pourrais aller de l'avant et coller ceux là comme ça. - Ok, - Excellent. - Alors sortons et sauvegardons ceci et revenons au navigateur et assurez-vous que cela a fonctionné. - Et là, vous pouvez voir mon cap. - On fera de nouveau cette taille normale. - Là, vous pouvez voir mon titre et vous pouvez voir Ah, - sous-titre de thèse et les deux paragraphes ici, - qui ont un espace entre eux et qui contiennent maintenant ce texte de remplissage. - Vous aurez donc beaucoup d'utilisation de ces paragraphes et titres. - Hum, - donc nous savons que les paragraphes mettent un espace de ligne complet entre les lignes de texte, - Mais que faire si je voulais juste descendre une seule ligne par exemple, - et si, - après ce mot ici, - Laura MiPS Et si je voulais pousser tout le reste ? - Juste une ligne ? - Eh bien, - je peux le faire en utilisant une autre balise appelée la balise BR, - qui crée un saut de ligne, - ce qui ressemble à cela maintenant cette balise n'a pas de balise d'ouverture et de fermeture de la manière que - P le fait pour le paragraphe B, - R ou ligne Break va simplement déplacer tout après cette balise PR vers le bas d'un seul retour de ligne. - Jetons un coup d'oeil à ça et assurez-vous que ça a fonctionné là. - Allons de l'avant et sauvegardons ceci et nous reviendrons au navigateur et rafraîchir. - Et vous pouvez voir là que toute la taxe a bondi après le mot Laura MIPS. s' Ils'est déplacé sur une seule ligne, alors qu'entre ces paragraphes, on a une ligne complète entre les deux. - D'accord ? - Pas terriblement. - Je ne suis pas terriblement excitant, - j'ai réalisé, - mais l'air, - tous les éléments fondamentaux de base. - Donc ce sera vraiment important à mesure que nous avançons. - Ok, - donc c'est bon pour cette page. - Appelons ça un jour sur cette page d'index. - Nous avons le nom de notre société et quelques paragraphes. - Ce sera quelques informations sur notre société, - mais allons de l'avant et passons à d'autres éléments de mise en forme de texte. - Alors créons une autre page ici. - Disons, - par exemple, - qu'à part ma page d'accueil, - je vais avoir une autre page qui va être un catalogue de toutes les chaussures. - Alors allons de l'avant et disons, - dossier nouveau. - C'est un nouveau fichier ici et sauvegardons ça dès la chauve-souris dira enregistrer le fichier. - Et on va le mettre à l'intérieur de ce dossier principal pour nos projets de site web. - Et je vais juste donner un nom à ce catalogue comme si on appellerait ça un point de catalogue html. - N'oubliez pas l'extension de fichier appropriée. Maintenant que j'ai la page d'index, toutes ces autres pages, je peux vraiment les nommer comme je veux. - Quelques choses à noter ici, c'est que vous ne voudrez pas mettre de personnages spéciaux. - Ne mettez pas de points d'exclamation sur des symboles, - des points d'interrogation et des choses comme ça parce qu'il a réellement un sens réservé dans une URL de site Web, donc nous ne voulons pas utiliser de symboles étranges. - Hum, - dans l'ensemble, - vous allez juste vouloir utiliser, - des lettres et des chiffres minuscules ou majuscules et des chiffres. - Nous ne voulons pas vraiment mettre des espaces entre, - um, - nos noms de fichiers, - par exemple, - si je voulais appeler ça un catalogue de chaussures, - je n'appellerais pas ça Shoe Space catalogue parce que cela pourrait causer des erreurs potentielles plus tard -, - Quand nous relions deux choses, - la meilleure chose à faire serait soit de mettre un trait d'union, - chaussure, - catalogue de tiret ou le catalogue de soulignement de chaussure comme ça sont parfaitement bien. - Dans ce cas. - Je vais appeler ce catalogue de fichiers. - Ce sera assez bon pour qu'on sauve ça. - Et maintenant j'ai deux fichiers ici, - et chacun a un onglet. Celui-ci s'appelle Index, et ce type s'appelle Catalogue. - C'est bon, alors voyons si vous pouvez vous souvenir du dossier. - Alors n'hésitez pas à crier ce premier fichier que nous mettons toujours en haut de chaque document HTML . - Ce qu'il fait, c'est qu'il indique au navigateur quelle version de HTML utilisait, - alors n'hésitez pas à crier la réponse. - C'est vrai. - Cette première balise est appelée type DOC. - Et comment dire qu'il s'agit d'un document HTML cinq ? - Nous disons juste le type de doc html comme ça. - Ok, - alors nous avons besoin d'un ensemble de balises d'ouverture et de fermeture pour dire au navigateur que c'est un code HTML entre ces balises d'ouverture et de fermeture comme ça. - Donc, nous utilisons la balise HTML et puis à l'intérieur de cela, - quelles sont les deux sections principales d'une page HTML ? - C'est vrai. - Le 1er, c'est la tête. - Ceci est la première partie de la page HTML, - et la suivante est le corps comme ça. - Et vous avez sûrement remarqué que je suis à Denning. - Chaque fois que je place d'autres éléments à l'intérieur d'un élément comme celui-ci, je frappe toujours Tab dans Dent comme ça. Maintenant, ce n'est pas nécessaire pour le navigateur. - Le navigateur ne se soucie pas vraiment si vous faites le code assez comme ça. - En fait, - vous pourriez même mettre tout le code sur une ligne dans le navigateur serait toujours tout rendre - parce que le navigateur juste préoccupé par cette relation de ce qui est à l'intérieur de quoi et - quelles balises sont autour de quel contenu. - Mais ce que je fais est une bonne pratique. - J'aime à la dette chaque fois que je nids ou je vais à l'intérieur d'un autre élément comme celui-ci, - et cela rend un code beaucoup plus lisible et facile de voir cette relation de ce qui est à l'intérieur - de quoi ? - Ok, - super. - Donc, nous avons également appris un élément pour mettre le titre de la page si bien qu'il dira - Titre Um et celui-ci aura un titre similaire au dernier. - Allons-y et appelons ça les chaussures Z H W. - Et qu'avons-nous raison avant d'écrire ? - Hum, - des chaussures ? - Grossistes sur cette page est la page du catalogue, - donc je vais juste aller de l'avant et écrire le catalogue de mots comme ça. - Et n'oubliez pas de fermer l'élément titre comme ça. - Nous verrons moins que le titre de barre oblique pour fermer cela, puis à l'intérieur du corps, - c'est la zone visible de la page Web. - On va mettre un H ici qui dit E h W - et on va mettre ah sous-titre dit chaussures. - Oups. - Je commence à taper un peu maladroit. - D'accord. - Et puis à l'intérieur d'ici, - peut-être qu'on aura un autre paragraphe avec, - genre, - des informations de remplissage. - Vous vous souvenez comment les orteils ajoutent le texte de remplissage. - Bien sûr, - vous pouvez taper votre propre paragraphe si vous voulez vous parler d'un paragraphe sur le - catalogue de chaussures va de l'avant et aller juste à des extraits d'outils, - et nous allons jeter dans un échauffement. - Un extrait comme ça, - et je ne rends pas juste une taxe de remplissage cool. - Um, - bon d'y aller. - Voyons un autre texte qu'on peut mettre à l'intérieur d'ici. - Allons de l'avant et créons une liste. - Donc, je fais un petit commentaire ici, - et nous allons juste dire que c'est une liste et le type de liste qui s'appelle en fait - sur une liste nordique. - Donc, parfois, vous aurez la nécessité de créer Ah, - une liste d'éléments et peut-être des éléments qui ne sont pas dans un ordre particulier. - Peut-être, - par exemple, - dira, - Imaginons que nous créons comme une archive pour nos chaussures afin que vous puissiez regarder toutes - les chaussures. - Alors peut-être que je vais d'abord créer un titre pour ça, - et nous allons aller de l'avant et dire des archives de chaussures, - et ensuite nous voulons créer um, - juste une liste d'articles qui vont représenter toutes les chaussures pour une année donnée -. - Je vais en faire un autre qui fera une sous-rubrique ici pour l'année. - En fait, - on va aller de l'avant et dire, - um 2013 comme cette barre oblique h 3. - Ok, - donc pour créer une liste non ordonnée, - ce que je fais, c'est que j'utilise une balise spécifique appelée UL Tag UL représentant une liste d'erreur Nord, - et elle se ferme comme ça. - Slash UL. - Ok, - et ensuite on va aller de l'avant et entrer dans l'étiquette UAL ici. - Et chaque élément de liste ici, - comme celui-ci, - exige que nous mettions un autre élément enfant à l'intérieur de celui-ci. - On nid. - Un autre élément à l'intérieur appelé El. - J'aurais une chance pour l'objet de la liste. - Donc ici, nous pouvons mettre des éléments de liste différents. - Dans ce cas, - nous allons mettre tous les différents. Tous les mois de cette année vont être une liste. - Donc nous dirons que ce sera pour décembre et fera une autre liste ici. - Eh bien, - juste faire quelques mois. - On n'a pas besoin de faire. - Tous diront que celle-ci est pour novembre, donc ce sera un peu comme nos archives blawg de toutes les différentes chaussures. - Nous allons créer un autre élément de liste ici dira un autre élément de liste. - Voici le mois du mois d'octobre. - Ok, - super. - Alors sortons et sauvegardons ceci et puis revenons sur le navigateur et nous avons la page d'index - s'ouvre ici et nous n'avons pas encore lié à nos pages. Ce que je dois faire, c'est, si je veux voir cette page du catalogue, vous devrez la faire glisser dans le navigateur. - Donc je vais retourner au catalogue, et on peut juste glisser et déposer ça ici. - Cool pour que nous puissions voir il y a la page du catalogue et les pages d'index des onglets séparés là-bas. - Ok, - donc pour cette page, - - la page du catalogue ici, nous avons l'archive des chaussures, - qui a un an et ensuite chaque année aura des articles de liste pour que vous puissiez voir ici quand nous avons utilisé - l'UL, - l'étiqueter en dense et crée une puce pour chaque L I, - qui est l'élément de la liste. - Nous avons Décembre, - Octobre, - Novembre. Revenons dans le code et voyons d'autres choses que nous pouvons faire avec les listes ici. - Imaginons qu'on veuille sous-nicher une autre liste à l'intérieur d'ici. - Donc, disons, - par exemple, - s'ils cliquent sur Octobre quelque chose comme ça, - nous voulons afficher une autre liste à l'intérieur de celui-ci Donc parfois nous avons le besoin de créer Ah sub - liste des éléments liés à cette liste article. - Donc ce que nous allons faire est d'ouvrir l'élément de liste comme celui-ci et d'y aller et nous pouvons - en fait créer un autre sur la liste ordonnée si nous aimons ça. - Alors je vais juste aller de l'avant et dire, - Slash ul et je suis en train de nicher. - Juste un être clair et montrer que tout cela est à l'intérieur de cet élément de liste pour Octobre et à l'intérieur - d'Octobre. - On va faire une sous-liste pour des jours différents. - Je ne ferai pas tous les jours dans le mois, je vais juste faire quelques uns juste pour vous donner l'idée, donc nous allons dire ... - Oh, - quand nous cliquons sur Octobre, - nous voulons également être en mesure de cliquer et de se référer à des chaussures pour cette date particulière en Octobre. - Donc nous dirons qu'il y a un article de liste pour le 17 octobre et un autre ici pour le 18 octobre comme ça. - Ok, - donc ça crée ça sur la liste ordonnée. - Voyons ce qui s'est passé dans le navigateur. - Si je reviens me rafraîchir, on verra ce qui se passe. - On va plus loin à Denning, et maintenant, au lieu de remplir de solides points de balle. - Cette sous-liste du 17 octobre 18 a cette bouche ouverte ici. - Ok, - donc 2013 a des mois en dessous, - et puis ce mois peut même avoir des jours spécifiques comme ça. - C'est donc un bon exemple de contenu que vous pourriez utiliser, - um, - de manière appropriée, - avec une liste non ordonnée sur commande. - Ça pourrait aussi être des choses comme une liste d'épicerie. - Vous pouvez mettre différents types de fruits ou de viandes que vous voulez utiliser dans une recette. - Quelque chose comme ça. - Si c'est quelque chose qui ne se produit pas dans un ordre particulier, - où vous n'avez pas besoin de numéroter comme 1234 et votre contenu juste pour avoir une puce, - vous pouvez utiliser cet élément ul. - Ok, - super. - Il y en a sur la liste des ordonnés. - Allons jeter un oeil à un autre type de liste, - qui est dans une situation où vous voulez qu'elle soit commandée pour que nous puissions faire une liste ordonnée - ici, - ok, - en bas, - donc nous allons faire une liste d'ordres différente. - Hum, - disons qu'on voulait faire une liste pour les meilleures marques, - donc je vais juste faire un autre titre ici, - et je dirai que les meilleures marques juste pour faire du texte au-dessus de la liste, - et nous fermerons ce niveau 3 en direction de là. Ok, donc pour faire une liste ordonnée, c'est en fait la même chose que la liste A Norden. - Sauf qu'au lieu d'utiliser UL pour faire une liste inchangée, - nous utilisons ol pour faire une liste ordonnée comme ça. - Et les listes ordonnées sont également remplies avec des éléments de liste à l'intérieur qui brisent chaque pièce individuelle de la liste. Donc, nous allons juste inventer quelques, - hum, - faire des fausses sociétés ou des fausses marques diront, - um, - Bradley, - Bradley et Brown seront le nom d'une marque. - Si vous voulez utiliser le symbole et pour sable au lieu d'un nd, vous pouvez utiliser le décalage dans le nombre - sept comme ça maintenant qui va s'allumer rose et le code sublime Texas nous faire savoir - que dans ce cas pour le symbole, - il serait être le plus approprié d'utiliser quelque chose appelé le caractère de demande HTML qui - représente cela Donc nous pouvons le faire en disant et en symbole, - et puis en mettant dans quelques Limbert quelques lettres ou chiffres qui représentent qui vous demandent - caractère donc nous allons dire, - et un demi-côlon MP comme ça. - Ceci est un terme demandé spécial ici qui fait référence au symbole et dans le code HTML. - Donc, vous pourriez être curieux de savoir ce que sont ces autres symboles demandant qui sont disponibles, - et comment puis-je savoir quoi taper pour eux ? - Si vous allez dans votre navigateur et nous pouvons ouvrir une autre fenêtre ici et nous allons juste taper - HTML, - demander E. - C'est un S C I I il vient avec ces différents codes et références. - Maintenant, c'est une table. - Et, - um, - vous pouvez voir ici que, - par exemple, - pour créer ce double guillemet comme ça, - nous pouvons dire et qu ot point-virgule et il va créer ce personnage, - vous pouvez également dire et livre symbole 34 est un code numérique qui fonctionnera pour cela. - Il y a différentes façons d'amener ces gars à soulever la plupart de ces airs. - Assez commun. - Vous pouvez simplement les copier et les coller à partir du texte, - comme simplement copier littéralement votre rythme et simple comme ça, - ou trouver, - vous savez, - en utilisant votre clavier pour les taper. - Cependant, - il y a certaines clés spécialisées que vous allez avoir besoin des personnages demandant - faisons défiler vers le bas et en trouver quelques qui sont peut-être un peu différents. - Par exemple, - vous savez, - vous pourriez devoir faire, - comme le symbole des livres ou des euros, - hum, - ou une autre démarcation. - Celle-ci est comme un petit point d'interrogation à l'intérieur d'un diamant. - Certains d'entre eux sont des symboles en mathématiques, - et vous pouvez même voir des caractères d'accent basés sur une langue particulière. - Donc ici vous pouvez voir différents caractères qui beaucoup et NBA, - um dans différents types d'accents qui seront utilisés pour différentes langues. - Ici, vous avez d'autres choses, - comme le symbole enregistré. - Donc, si vous voulez créer le simple enregistré que vous pouvez faire et RG semi-deux-points. - Il y a aussi des choses comme le copyright, - qui est et copie, - qui va jeter un coup d'oeil un peu plus tard. - Donc demander aux personnages est agréable si vous avez le besoin de créer des symboles spécialisés, - donc cela crée un peu comme un peu stylisé et symbole là qui est attrayant. - C'est une de nos marques. - Vous remarquerez qu'une différence entre la liste A Norden et la liste ordonnée est quand j'ai utilisé les tags ol pour la liste ordonnée. - On a un numéro ici au lieu d'une balle. - D'accord, alors allons-y et passons à autre chose. - Hum, - écrivons quelques autres articles de la liste ici. - Je vais juste en faire un peu plus pour que vous puissiez voir comment ces commandes pour qu'on fasse d'autres noms de marque . - Va voir Sampson Travelers. - C'est probablement une bonne idée que je m'en tienne à mon travail et que je n'essaie pas de faire des marques, alors on en fera un autre ici. - On va dire « kitsch ». - Groove est une autre marque que nous vendons comme ça. - Ok, - génial. - C'est bon d'y aller. - Voici les meilleures marques 12 et 3. - Donc, la bonne chose à propos de l'utilisation des listes ordonnées est que si nous changeons d'avis et nous voulons - coller un autre Brandon ici, - entre Samson et Travelers, - il va juste re numéro pour nous automatiquement. - Ok, - super. - Donc, ces air quelques éléments de texte qui vous seront utiles. - Je ne vais pas vous apprendre tous les éléments HTML, - mais je veux juste que vous sachiez ces haute fréquence pour commencer. - Ces airs que vous obtiendrez beaucoup d'utilisation hors de, - et je vous encourage à passer par et vérifier les documents fournis dans les liens qui - tous les lieux, - um, - tous les post pour apprendre les éléments HTML mawr. - Donc, il y a des dizaines et des dizaines d'éléments HTML, - et il sera bon pour vous de vous familiariser avec les différentes possibilités de comment - vous pouvez décrire le contenu au navigateur. 6. Images: - Maintenant, - un peu plus d'éléments que je pense sera vraiment bon pour nous d'apprendre tout de suite la - chauve-souris sont en plus de style izing texte. - Nous voulons également apprendre à créer des liens dans les images. - Allons-y et revenons à la page d'index ici. - Et disons que nous voulons un endroit, - um, - une image ici pour représenter une sorte de l'ambiance de notre site pour montrer notre logo n'importe quelle image. Donc j'ai déjà créé une photo pour nous, - hum, - appelé intro pic, - et on va placer ça dans la page du site et on va la placer en dessous de ça - se diriger ici qui a le nom de notre société dira que nous voulons que cette image aille - en dessous sont cap, - mais avant le paragraphe. - Donc je vais juste ouvrir un peu d'espace dans le code pour le faire maintenant, - tout comme les autres éléments ici ont des noms de balises spécifiques. - Les images H un et H deux et P ont également leur propre tag spécifique que vous devez utiliser maintenant une image - ressemble à ceci. la Maintenant,labalise d'image n'a pas de nom de balise de fermeture. - Ça commence comme ça. - Je suis G comme ça et cet élément d'image lui-même quand vous le placez juste sur l'écran. - Le navigateur sait maintenant que nous voulons mettre une image là, - mais il n'a aucune idée de quelle image nous essayons de charger là. - Donc, nous devons lui dire quelle image nous voulons charger maintenant. - En HTML, - vous pouvez passer des options pour modifier et modifier des éléments en plaçant quelque chose appelé un attribut - dans la balise d'ouverture. - Maintenant, - attributs ne sont jamais vus dans les balises de fermeture. - La balise de fermeture est toujours juste une barre oblique et une répétition de quel que soit le nom de la balise d'ouverture - comme ceci. - Mais à l'intérieur de ces balises d'ouverture étaient libres de mettre des options ou des attributs. - Donc, afin de dire au navigateur où se trouve cette image, - nous allons aller de l'avant et devons mettre un espace après l'image du nom. - Et nous allons utiliser l'attribut appelé S R. - C. - SRC signifie source étaient lui dire l'emplacement source de l'image et la façon dont nous - lui fournissons une valeur que nous utilisons le symbole égal et les guillemets pour entourer la valeur. - Donc, cette chose ici qui est dans cette ouverture I am G tag est appelée une option, - et cette partie ici est appelée le nom de l'attribut. - Et ici, nous allons placer la valeur, - qui est l'emplacement de l'image que nous aimerions charger. Quand je veux charger une image, je dois faire du travail de détective. Quand je veux charger une image, - Je dois essentiellement être conscient du fichier dans lequel je suis actuellement, - qui en ce moment je suis à l'intérieur de la page html de point d'index et je voudrais charger une image. - Mais je dois être très spécifique au navigateur. - Le navigateur n'est pas très intelligent, - et nous devons lui dire exactement où ces images, - et nous devons lui donner des emplacements à partir du fichier spécifique que nous sommes actuellement dans. - On est sur la page d'index. - Imaginons un instant que nous sommes sur cette page d'index. - Imaginez que vous êtes deux pieds sont plantés ici sur la page des études d'index TML, - et si vous regardez autour, - que voyez-vous ? - Vous voyez qu'il y a une autre page appelée Catalogue et vous voyez qu'il y a un dossier appelé - Images, - mais nous ne pouvons pas voir à l'intérieur de ce dossier à moins d'y aller. - Imaginez que les images sont un peu comme un bâtiment en ce sens. On doit traverser la porte de ce bâtiment appelé images, et c'est comme ouvrir le dossier. - Maintenant que nous sommes dans le dossier Images, - nous pouvons maintenant voir toutes ces images vers lesquelles nous voulons un lien. - Donc, la première chose que je dois faire est que je dois dire au navigateur d'aller dans le dossier des images - afin qu'il puisse voir à l'intérieur de celui-ci. - Donc, pour ce faire, - J'écris le nom du dossier. Je dis des images, puis je fais une Ford Slash et maintenant on est à l'intérieur de ce dossier. - Écrivons un commentaire pour se rappeler que donc chaque fois que nous disons une barre oblique de nom de dossier, - c'est l'équivalent d'aller à l'intérieur du dossier. - Et si je veux sortir d'un dossier ? - Le contraire de cette situation est si je veux laisser un dossier, - je peux voir point, - point, - barre oblique donc point slash est l'équivalent de sortir du dossier, - le dossier actuel dans lequel vous êtes, - droit ? - Ok, - donc ces air vraiment les deux seules choses que vous devez savoir pour naviguer ou pour dire au navigateur - comment naviguer à partir du fichier actuel. - Vous êtes sur un autre fichier ou dossier. - Donc on veut dire, - Hey, - navigateur. - Je veux créer une image. - Donc, nous utilisons I m g. - Et puis nous mettons un espace et nous disons, - Et en passant, - cette image est située à l'intérieur du dossier des images, - images slash et le fichier que nous voulons une charge est appelé Regardons juste pour nous assurer que nous - avoir le bon nom s'appelle Intro pic, - pas J. - Peg. - Donc c'est sensible à la casse. - Je dois l'épeler exactement la même chose à l'esprit a un soulignement. - Donc je dois dire intro underscore pick dot j peg comme ça et ça va charger cette image - là. - Ok, - Maintenant, - il y a une autre option que nous voulons toujours inclure à l'intérieur d'un élément image. - Et c'est quelque chose qu'on appelle un texte alternatif. - Et nous utilisons l'attribut Ault lt pour lui donner un texte alternatif Maintenant pour l'alternative - texte. - On y va Teoh, hein ? - Quelque chose que je vais dire, - euh, - image du logo. - Il montre un homme avec les jambes croisées, - donc je donne une description de l'image ici. Alors, c'est quoi ce vieux texte ici ? - Donc tout le texte sert quelques fonctions très importantes. - Numéro un, - si vous êtes le lien image est cassé. - Si pour une raison quelconque c'est une erreur d'orthographe et les images ne figurant pas dans le navigateur, - alors tout cela apparaîtra à sa place dans la plupart des navigateurs. - Donc si le lien de l'image est brisé, les gens peuvent au moins lire ce qu'ils étaient censés y voir. - Lequel est ? - C'est un logo montrant un homme aux jambes croisées. - En fait, - ce n'est pas une description trop grande. - Peut-être que tu pourrais monter. - On pourrait trouver quelque chose de mieux plus tard. Mais en tout cas, on donne on donneune description simple de cette image. Donc cette image d'introduction montre ce contenu l'autre. - L'autre chose pour laquelle tout le texte est très important est pour les moteurs de recherche. Alors les moteurs de recherche, ils n'ont pas d'yeux, ils ne peuvent pas voir l'image de l'image. - Mais cependant, ils peuvent lire tout le texte, - et cela sera utile pour le moteur de recherche. - Maintenant, - la dernière chose et probablement la plus importante de toutes ces choses est que si je suis une personne malvoyante ou aveugle ou si j'ai du mal à voir sur Internet. - Ce que je peux faire, c'est installer quelque chose qu'on appelle un lecteur. - Et le lecteur d'écran, - qui est intégré dans la plupart des navigateurs de nos jours, - va effectivement lire le texte de la page Web autorisée à la personne qui navigue sur le - site Web. Si j'avais des problèmes à voir l'image, alors le lecteur du navigateur va lire ce texte. - Pour moi, - il dirait à haute image logo montre un homme avec les jambes croisées. - Ok, - alors allons de l'avant et sauvegardons cette image et revenons voir ce gars dans le navigateur -. - Donc celui-ci est sur la page d'index, - qui est index point html. - Si vous n'avez pas cela dans votre navigateur, - vous devrez peut-être aller et faire glisser ce fichier de votre dossier là-dedans. y va Ony vapour voir nos images apparaissant là. - On a créé un en-tête. - Voilà mon H. - Voici mon âge pour Voici mon texte de paragraphe, - et voici mon image, - en utilisant ma balise I M G. - Bon, donc c'est un bon début. - Regardons d'autres choses qu'on peut ajouter à l'image ici. Ce sont d'autres choses facultatives que vous pouvez ajouter à l'intérieur de cette balise d'image. - Nous pouvons également ajouter quelque chose appelé Titre et Titre apparaîtra lorsque nous survolons l'image. - Laissons un message. - Si quelqu'un survole et que c'est facultatif, - vous n'avez pas à avoir cette année. - Bienvenue dans les chaussures H W, quelque chose comme ça. - Beaucoup de fautes de frappe aujourd'hui et puis nous allons continuer et sauver ça, - et nous reviendrons dans le navigateur et rafraîchir si immédiatement. - Je ne vois pas ça le titre, - mais regarde, - que se passe-t-il si je passe la souris et la laisse là ? - Il y a une petite légende. - Il est dit Bienvenue aux chaussures H W, - donc vous pouvez ou ne pas vouloir qu'il y ait, - mais vous avez la possibilité d'ajouter cela en utilisant le titre, - les gens ajoutent souvent ces titres, - des liens orteils ou des images pour donner des informations mawr sur l'endroit où cette image pourrait être liée. - Donc, - par exemple, - vous pourriez avoir des icônes ou peut-être, - par exemple, - des icônes de réseaux sociaux, - et vous pouvez ajouter un titre à eux de sorte que lorsque vous passez le curseur sur le petit F pour Facebook, - il dira, - Suivez notre page Facebook de visite. - Vous pouvez avoir le petit T, - donc quand vous survolez, il dit « Suivre sur Twitter ». - Quelque chose comme ça. - Un autre attribut commun que les gens ajoutent. - C'est une bonne idée pour les images est que vous pouvez ajouter la largeur et la hauteur de l'image maintenant par défaut. - Il a fait que ça ait le, - euh, - il a déjà mis cela en place pour avoir la largeur et la hauteur correctes, - mais je peux en fait mettre le nombre de pixels de l'image ici. - Et ça va être bon si la mise en page change. - Parce que, - par exemple, - disons que ce lien d'image est cassé ou les images manquantes, - alors bien, - en fait, - allons de l'avant et montrer que si je l'écroule si je change la mer à un X, - et j'ai mal orthographié l'image là, - cela va réellement casser l'image, - et cela va changer le contenu autour d'elle. - Donc, si je rafraîchis ceci, - alors il s'effondre et ce contenu se déplace vers le haut. - Maintenant, - si je devais mettre en hauteur et en largeur ici dans l'image qui fera alors l'image prendre - la taille qu'elle est censée faire. - Donc, si tu veux vérifier ça. - Vous pouvez aller à l'image elle-même. - Dans Windows, - vous pouvez faire un clic droit et enregistrer les propriétés sur Mac. - Vous pouvez aller pour obtenir des informations, - et il devrait vous dire des informations sur l'image. - Donc, dans ce cas, - ça me dit que les dimensions de l'image sont 9 20 sur 500. - Une très grande image, - en fait. - Pour la page d'introduction s Oh, - c'est avec 9 20 comme ça et une hauteur de 500. - Donc ce nom de lien est toujours cassé. - Je l'ai mal orthographié exprès. - Il reviendra et rafraîchir, - et nous pouvons voir tout le Texas apparaissant Leur image de logo montre un homme aux jambes croisées - et nous voyons cette petite icône d'image cassée que personne n'aime vraiment voir. - Allons-y et réparons ça. - Mais vous pouvez voir le haut avec empêché la mise en page de changer comme ça. Donc on va changer ça pour intro pic comme ça, ce qui est la bonne façon de l'épeler. Donc on va changer ça pour intro pic comme ça, - Vous pouvez voir notre image apparaît là-bas et un joli petit logo de peinture en aérosol. - C' est un bon début. - Maintenant, - plus tard, - nous allons construire une sortie réactive afin que cette image soit à l'échelle en taille - selon si nous visualisons ceci sur un ordinateur de bureau, une tablette ou un appareil mobile. - Donc, nous allons finir par spécifier cette hauteur et cette largeur en utilisant CSS un peu plus tard pour que nous puissions - le rendre flexible. - Donc pour cette raison, - et pour cette raison, - Onley, - je vais en fait enlever la largeur et la hauteur de cette image pour l'instant. - Mais je voulais que vous sachiez que ce sont d'autres attributs que vous pouvez mettre là-dedans. - Ok, si génial. - On sait créer des titres. - Nous allons maintenant créer des paragraphes, - nous savons comment créer une liste non ordonnée et des listes ordonnées. - Hum, - nous savons aussi comment créer des commentaires et des médias dans la page. 7. Liens: - Passons maintenant à la création de liens. - Les liens permettront à nos utilisateurs de naviguer entre les pages. - Donc maintenant, nous avons juste la page d'index ici, - qui est notre page d'accueil. - Et nous avons aussi cette page de catalogue. - Je pense qu'on va aller de l'avant et créer quelques pages de plus. - Créons en fait trois autres, - et puis nous aurons toutes les pages prêtes à aller pour le reste de notre site sur les exercices futurs -. - Alors allons de l'avant et allez juste fichier et nous allons dire un nouveau fichier et cela va créer un fichier - intitulé. - Nous allons aller de l'avant et enregistrer ceci, - et nous allons nous assurer que cela est enregistré dans notre dossier de site et nous voulons appeler ceci - fichier suivant. - Je vais appeler celui-là. - Le contact est mort. - HTML. - Ce sera notre page d'informations de contact, - et je vais aller de l'avant et dire, - sauf comme ça, - nous puissions commencer à écrire la structure de base du document, - dont vous vous souviendrez de la pages précédentes. - Ici, nous avons la tête HTML de type DOC et le tag body etcetera eso pour celui-ci, - Je vais vous montrer un truc que vous pouvez faire. - Bien que ce soit une bonne pratique quand vous commencez à taper tout, - donc vous vous en souviendrez. Quandvous arrivez au point où vous êtes à l'aise avec vous, rappelez-vous, vous êtesconfiant que vous vous souvenez de toutes ces balises qui composent la structure de base du document. vous arrivez au point où vous êtes à l'aise avec vous, rappelez-vous Quandvous arrivez au point où vous êtes à l'aise avec vous, rappelez-vous, vous êtes rappelez-vous Tu peux toujours utiliser des choses comme ça, les outils ici, le haut. - Tu peux aller aux extraits. - Et si vous cliquez sur le premier extrait ici qui dit html Regardez cela. - Il y a beaucoup de ces étiquettes pour moi. - Je pourrais venir ici et mettre le titre. - Et celui-ci est la page de contact vu juste contact comme ça. - D'accord ? - Et nous avons aussi appris sur la balise de type DOC en haut, - juste faire un rapide examen là-bas. - Donc, - Le type de document HTML est le type de document externe cinq. - Il y a quelques autres choses que nous pouvons adhérer qui aideront également le navigateur. - Parlons d'un attribut que nous pouvons placer à l'intérieur de cette balise HTML d'ouverture afin que nous puissions - spécifier une langue ici comme celle-ci. - Nous pouvons dire e en pour l'anglais, - Um, - et si vous êtes intéressé à connaître tous les codes de langue, - par exemple, - oui, - pour l'espagnol, - fr pour le français etcetera. - Vous pouvez aller de l'avant et les regarder. - Vous pouvez Google que si vous Google um html pose de la glace. - Alors j'ai des codes. - Je codes donc il viendra avec une grande liste de langues différentes. - Vous pouvez vérifier une autre chose qui est sympa pour le navigateur. - En plus de lui dire, - vous savez, - la version de HTML, - dont nous avons parlé auparavant, - et de lui donner un langage pour le contenu principal de la page. - Nous pouvons également ajouter une balise meta apparaître, - et les balises meta contiennent souvent des informations pour les navigateurs et les moteurs de recherche. - Dans ce cas, - ce qu'on va faire, c'est donner un autre tag appelé Meta avec un hommage de - jeu de personnages. - Et nous allons lui dire que les caractères de texte que nous allons dire au navigateur tout - appareils interviewant cette page que ces caractères de texte dans la page sont utf huit et - caractères de texte codés. - Donc c'est le type HTML 5 préféré mis en place ce soir pour avoir une sorte de page vierge . Je vais aller de l'avant et mettre dans les choses qui seront les mêmes sur chaque page comme avec toutes les autres pages que nous avons en tête et nous avons aussi le sous-titre était des chaussures, Je vais aller de l'avant et mettre dans les choses qui seront les mêmes sur chaque page comme avec toutes les autres pages que nous avons en tête et nous avons aussi le sous-titre était des chaussures, - Et puis nous avons eu, - genre, - un paragraphe. - Il va y avoir des choses différentes sur chacune de ces pages. - Ceci est la page de contact dans, - et les exercices futurs seront effectivement placés dans un formulaire de contact ici et un Google intégré - cartes de personnes peuvent voir l'emplacement de l'entreprise et des choses comme ça. - Mais pour l'instant, - nous allons juste créer un paragraphe et nous allons juste écrire quelque chose dedans juste pour que nous puissions - voir un changement de page en page vu juste, - contacter ici. - Et ça marchera pour l'instant. - Je vais sauver cette page. - On peut reproduire cette page quelques fois. - Je vais aller au dossier, - et je vais juste dire, - sauf et je vais appeler le prochain au lieu de contact. - Pourquoi ne pas aller de l'avant et garder celui-ci comme prix ? - On va aussi avoir une page. - Ça va être un peu un tableau de prix. - On va insérer une table dans cette page et un exercice plus tard. - Donc ça ne dit pas de prix et d'économiser ça et de prix, - on va changer quelques choses ici. - Eh bien, - nous allons écrire le mot prix ici dans le titre et juste pour que nous puissions voir le changement sur chaque - page oenologue droit, - prix dans le paragraphe ici et enregistrer cela. - Et nous allons voir, - nous avons une autre page fera un fichier enregistrer comme, - et nous allons continuer et dupliquer cette page aussi. - Hum, - Appelons ça les ventes. - Ça va être une page. - Ça va, - euh, - nous allons énumérer toutes les ventes pour notre site. - Donc, ici va aller de l'avant et changer cela pour dire en vente pour cela et dira comme, - um, - les ventes ici pour le paragraphe juste pour que nous puissions voir un changement quand nous naviguons entre les pages - et encore, - nous serons mettre plus de contenu ici plus tard. - Ce sera juste assez pour nous faire démarrer. - Ok, - donc tout est sauvé. Retournons à la page d'index ici. - Je clique sur l'index. - Vous remarquerez dans un texte sublime. - Si vous cliquez simplement sur un fichier, - il va changer ce fichier. - Et si vous double-cliquez, - il ouvrira effectivement un onglet supplémentaire pour le fichier. - C'est habituellement quand je travaille sur le site. - Beaucoup de fois, je vais juste passer par et double-cliquer sur chacun des fichiers que j'ai l'intention de travailler - avec comme ça. - Et puis je peux basculer entre tous ces onglets ici, ce qui est plutôt sympa. - Vous pourriez même faire glisser et déplacer ça. - Une autre chose cool que vous pouvez faire est que vous pouvez diviser l'écran. - Par exemple, - sur Mac, - vous pouvez l'option de commande dio, puis un nombre et le nombre que vous appuyez en haut du clavier -. - Le clavier déterminera combien de fois il se divise. - Donc, si je dis l'option de commande à elle divisera l'écran en deux, - et cela me permet de faire glisser, - um, - ces onglets d'un côté à l'autre pour que je puisse réellement voir plusieurs fichiers en même temps, - ce qui est plutôt sympa. - Donc c'est Ah, - option de commande, - et puis un numéro en haut. - Ton clavier. - Tu peux jouer avec ça. - Vous pouvez commander Option 3. - Il divisera trois fois l'option de commande pour diviser quatre fois, - bien que ce soit un peu étroit pour lire le code là-bas. - Mais vous pourriez voir que vous pourriez avoir, - comme quatre fichiers différents ouverts dans chaque onglet comme ça, - ce qui serait plutôt sympa. - Et si vous voulez revenir à la normale, - vous faites juste l'option de commande 1. - Donc c'est l'option de commande sur Mac sous Windows. - Je crois que c'est une option de contrôle, mais tu devrais peut-être chercher ça pour que oui, tu sais quoi ? - Je vais y aller, - et, - euh, - je vais comprendre ça, - et je vais poster ça dans l'information sous cette vidéo pour vous les gars. - D'accord ? - Donc, - retour Teoh, - liens arrière des orteils, - bien que nous voulons faire maintenant, - est que nous voulons un lien entre toutes ces différentes pages. - Alors j'ai décidé que je veux que mes liens orteils vivent juste en dessous de ça. se dirigeant ici sur chacune des pages, il y aura Ense dirigeant ici sur chacune des pages, il y auraune barre de navigation que nous allons placer ici, d'accord ? une barre de navigation que nous allons placer ici, - Et on va mettre des liens ici. - Je vais juste écrire un petit commentaire que ces airs relient. - Donc l'élément spécifique que nous avons utilisé pour créer des liens est un élément d'ancrage. - Il utilise la lettre A comme ça. - Il a une ouverture et une fermeture A et tout ce que vous entourez de cette ouverture et - fermer une balise va devenir un lien par exemple, - nous allons réellement lier à cette texture. - Tout d'abord, - va créer un texte qui dit sur et nous allons transformer ce texte en un lien et en - l'entourant avec cela une balise. - Donc, un lien d'ancrage. - Mais si c'est utile, - vous pouvez aussi penser au mot action A pour l'action. - Parce que ce que cela fait est, - um, - ça crée une action où quand on clique sur quelque chose, - ça change sur une page différente. - C'est vrai ? - Ok, - Donc à part vous, - aucun texte qui entoure avec ces liens d'ancrage ces éléments ici, - nous pouvons aussi, - um, - nous pouvons aussi, - nous pouvons entourer des images. - Donc, - par exemple, - cette image ici, - si je voulais ce lien d'orteil quelque part quand j'ai cliqué dessus, - je pourrais aussi entourer ce gars avec un tag comme ça. Cette image particulière ne m'intéresse pas vraiment à celle-ci qui relie n'importe où, donc tout efface de ça, mais juste pour vous montrer que vous pouvez, en fait, - vous savez, - juste tourner les liens eux-mêmes sont Excusez-moi, - vous pouvez transformer les images elles-mêmes dans les liens. - Ok, - donc pour ce premier essai, - nous allons juste transformer ce texte en un lien qui entoure ce texte avec ça. - Une balise indique à un navigateur qu'il est censé être un lien, - mais nous n'avons toujours pas dit au navigateur où nous voulions réellement naviguer où nous voulons - il sauter lorsque nous cliquons sur ce lien. - Donc, pour ce faire, - nous devons ajouter une option ici dans l'ouverture d'une balise et cet attribut est appelé H Ref. - Un creux signifie référence hypertexte, - Um, - ou hyper référence. - Rappelez-vous, - ces pages sont des pages HTML, - qui est des pages hypertextes ou des pages de langage de balisage hypertexte. - Donc, cela fait référence à une page HTML spécifique si cela le rend plus facile - rappelez-vous leur référence H. - Ok, - donc ce que nous voulons faire ici c'est que nous voulons mettre le, - euh nous voulons essentiellement décrire au navigateur où il devrait aller, - et nous devons le faire, - vous savez, - par rapport à la page qui étaient en marche. - Actuellement, nous sommes sur la page html du point d'index. - Donc, si je viens ici et regarde dans mon dossier, - je peux voir que j'ai tout dans ce dossier principal du site qui s'appelle HTML - fondamentaux. - Hum, - cette fois, nous ne lions pas à des images, - donc je n'ai pas à m'inquiéter du nom du dossier là-bas, - et il semble que toutes ces pages HTML sont en fait juste vivant côte à côte dans le même dossier. - Donc, comme il y a juste traîner dans le même dossier, - je peux littéralement juste taper le nom du fichier comme ça. - Maintenant encore. - Si ces pages étaient dans un dossier différent, - vous pouvez taper le nom du dossier pour indiquer au navigateur d'aller dans le dossier, puis trouver ce fichier -. - Et encore une fois, - si vous voulez sortir du dossier, - vous pouvez faire point, - point, - barre oblique, - qui va, - qui va quitter le dossier courant et chercher un fichier ou un autre dossier. - Dans ce cas, - nous n'avons pas besoin d'en faire l'un ou l'autre parce qu'ils traînent juste en vivant dans le même dossier. - Super. - Donc c'est le premier lien. - C'est tout ce que nous avons à faire pour obtenir ce travail d'un orteil, - et je vais aller de l'avant et en créer un autre créera un pour chaque page. - C'est H réf. - Tu t'habitueras à écrire ça, - et je vais rentrer ici et on va mettre des textos. - Voyons voir, - la prochaine chose à laquelle on va faire un lien est la page de vente, - Saul, - juste en vente. - Et puis ici, - la page HTML physique réelle veulent un lien vers est appelé vente dot html Tout comme ça. - Oh, - tu sais quoi ? - Ah, - ici. Je l'ai appelé vente, mais ici ça s'appelle les ventes au sein de s. mais ici ça s'appelle les ventes au sein de s. Ça va créerun problème. Ça va créer mais ici ça s'appelle les ventes au sein de s. Ça va créerun problème. - Ces noms doivent être exactement les mêmes. - Donc ça va briser le lien ici. Si j'appelle cette vente ici, je ferais mieux d'appeler cette vente ici. - Je pense que ce que je vais faire est que je vais faire un clic droit sur ce fichier et aussi renommer et puis ici - en bas, - je peux effacer ce s et appuyer sur retour, - et ça va le réparer. - C'est une bonne chose que j'ai attrapé ça, - euh, - quand je l'ai fait, - parce que ça va vraiment briser le lien. - D'accord. - Personne ne veut des liens brisés. - Ce n'est pas amusant. on va Doncon vaaller de l'avant et en faire quelques autres juste pour vous donner l'idée de ... comment ça marche. - La prochaine chose que nous allons faire est après vente est la page du catalogue, - que nous avons déjà construit, - et que les liens vers catalogue dot html Juste comme ça. - Et ceux-ci sont sensibles à la casse. - Alors ici dans le nom du fichier. Si c'était un C majuscule dans le nom du fichier, j'aurais besoin d'un C majuscule là. - Parfois, les navigateurs sont plus pardonnants localement sur votre ordinateur, - sur l'ordinateur en face de vous, - vous pourriez, - vous savez, - utiliser accidentellement une sensibilité différente à la casse comme une majuscule C Lower Casey. - Et pour une raison quelconque, - cela fonctionnera toujours pour vous localement. - Mais alors, lorsque vous avez téléchargé sur le serveur, - cela peut ne pas fonctionner. - Il est donc toujours bon d'être conscient de l'orthographe des choses et du cas, - qu'il s'agisse de majuscules ou de minuscules. - Ok, - euh, - ensuite passons à la page suivante. - Donc, après catalogue, - nous allons créer un lien vers une page appelée Pricing dot html. - Et le texte s'appelle Pricing et nous fermerons les fouets fermera ce lien là, - et nous fermerons un dernier comme ici. - Je pense que ça va s'occuper de toutes mes pages. - Je vais vous montrer les gars Ah, - raccourci est aussi. - Au lieu de taper les tags, - vous vous habituez à eux. - Si vous appuyez sur la lettre de l'étiquette comme la lettre A. - et si j'appuie sur la barre d'espace de contrôle. - Ça arrive comme ça et je peux frapper retour, - et ça va arracher ça. - Pour moi, - il y a quelques raccourcis assez soignés que vous pouvez faire pour l'achèvement du code dans un texte sublime. - Um, - voyons où on est ici. - La dernière page est appelée point de contact html. - Comme ça, - et nous allons lier au Texas est contact. - Ok, maintenant. - Donc, cela montre comment utiliser un chemin relatif à d'autres fichiers sur votre site Web. - Vous vous demandez peut-être, - hypothétiquement et si je voulais lier à un autre fichier ailleurs sur le web, - par exemple, - Et si je voulais, - vous savez, - faire un autre lien qui est allé à un autre site, - Par exemple, - si je veux un lien vers le New York Times, - je pourrais mettre la fille complète, - c'est pourquoi fois dot com comme ça, - Um et pourquoi les fois maintenant je vais probablement finir par supprimer ce lien dans exercices ultérieurs parce que nous - n'avons pas vraiment besoin de notre site de chaussures Toe lié au New York Times n'a pas beaucoup de sens -, - droit. - Mais néanmoins, - Je voulais vous montrer que si vous mettez le nom d'un fichier sur votre site web tant que - le navigateur en a une vue claire. - Tu sais, - s'ils sont dans le même dossier, - tu pourrais juste mettre le nom du fichier qui s'appelle le chemin relatif. - Maintenant, - si jamais vous voulez lier à quelque chose d'autre sur le web, - vous pouvez mettre dans le nom de domaine complet comme celui-ci, - qui est appelé le chemin absolu. - Ici. - Ceci est l'absolu de votre chemin d'URL chacun vous devez mettre la barre oblique deux-points complète, - barre oblique, puis le nom complet du site Web. - Donc maintenant, quand je clique sur ce texte et les temps blancs, - il va en fait faire un lien vers un autre site Web. - Ok, - donc par défaut, - si vous utilisez juste h ref, - um, - et vous cliquez soit sur une image soit sur un texte avec la balise d'ancrage configurée comme ça, - ce qui va se passer est tout à fait familier avec est que l'écran va changer. - Nous allons regarder une page, - va cliquer sur un lien, - et il va passer à l'autre page maintenant, - dans des situations où, - au lieu de changer la page sur laquelle vous êtes actuellement, - si vous voulez pour forcer le navigateur à ouvrir un nouvel onglet, - un nouvel onglet de navigateur ou une nouvelle fenêtre de navigateur. - Ce que vous pouvez faire est que vous pouvez utiliser un autre attribut ici, - qui s'appelle Target. - Alors je vais aller à l'intérieur de ça. - Une étiquette ici, - la dernière pour le New York Times. - Et après cet âge, je vais y aller et venir ici. - Nous allons zoomer un peu et frapper un espace et dire Target comme ça. - On y va. - Cible est le nom des attributs, - et ensuite nous allons aller de l'avant et mettre quelques guillemets. - Avis. - Si vous avez plusieurs attributs, - ce qui se passe il est juste de mettre un espace. - On peut même mettre ça sur sa propre ligne, donc c'est plus facile à voir. - Et ça ? - D'accord. - Donc vous pouvez voir ici que si j'ai plusieurs attributs, - nous avons un seul attribut ici. - Et puis il y a un espace. - Et puis on a un autre attribut là. - D'accord. - Et des attributs comme ceux-ci ne sont que dans les balises d'ouverture, - Jamais dans la balise de fermeture. - Ok, - donc, - sous la cible, - on peut lui dire de cibler un nouvel onglet de navigateur vide en disant le trait de soulignement vide comme ça. - Les soulignements importants. - Tu dois mettre ça là aussi. - Ceci est une valeur spécifique que le navigateur comprend. Comme au lieu de cibler soi-même, la valeur par défaut est la cible, qui ressemble à ceci, et cela signifie que lorsque vous cliquez sur un lien, quelle que soit la fenêtre dans laquelle vous êtes, vous allez perdre la vue de cette page. - Mais il va passer à la vue de la page suivante ou vous liez deux. - Et si vous voulez faire ça, avez pas besoin de préciser. - Donc pour ceux-là, je n'ai pas spécifié de cible. - Donc quand je clique, ça va changer la page. - Cependant, - pour celui-ci, - J'ai spécifié la cible vide, - et cela va ouvrir un nouvel onglet de navigateur. - Sortons et sauvegardons ça. - Et ce qu'on va faire, c'est qu'on va copier et coller ces liens sur toutes les autres pages - ici, - donc je vais mettre en évidence tout ce code de Ah, - pour moi, - c'est en ligne. - 17 ici. - Tout le chemin à la ligne 19 numérotation des lignes peut être légèrement différent pour vous sur votre exercice - code, - selon combien vous avez écrit ou comment la ligne Maney renvoie vous avez fait. - Mais ici, dans cette section, je vais juste copier tous les liens qu'on vient d'écrire, donc je vais les mettre en évidence et dire éditer . - Copier quoi ? - Vous pouvez voir le raccourci. - Il y a la commande Voir sur Mac ou le contrôle Voir sur Windows. - Et on va aller sur les autres pages du site. - Allons au contact, - et nous allons passer sous le titre et coller ces liens là et enregistrer C'est aller à la - page des ventes et nous allons passer sous les titres et coller ces liens et enregistrer et nous allons - au catalogue et nous sommes va passer sous les rubriques Nous allons accélérer ces liens et sauver et - on dirait que nous avons tous fini là-bas. - C'est le puits, - ce n'est que quatre pages. - On dirait qu'il me manque quelque chose. - On n'a pas encore de prix. - C'est ce qui me manque. - Ok, - on va entrer dans la tarification du dernier et passer sous les rubriques et coller et économiser. - Alors maintenant, - tous se sont battus. - Toutes mes cinq pages ont ces liens, - hum, - collés dedans, - et nous pouvons ensuite vous enregistrer dans les fichiers et nous pouvons retourner au navigateur maintenant. - Et vous pouvez voir sur cet onglet votre, - um, - sur la page d'index et vous pouvez voir notre belle petite image que nous avons créée ici. - Tu te souviens ? - Nous devons toujours actualiser la page pour voir les changements les plus récents que nous avons apportés. - Donc, vous sauvegardez toujours votre fichier, puis revenez et rafraîchissez. N' ayez pas peur de sauver, parce que même après avoir sauvé, vous pouvez annuler. N' ayez pas peur de sauver, parce que même après avoir sauvé, - Si vous faites une erreur, - nous pouvons aller à éditer, - annuler, - um, - ou commander Z sur Mac ou contrôler Z sur Windows afin que vous puissiez toujours revenir là où vous. - Je peux annuler ça comme ça et le réparer. - D'accord, donc on économise toujours. - On retourne au navigateur et on va se rafraîchir. - Et on y va. - Je vois mes liens ici, - qui apparaissent à côté de mon image, - en parlera un peu plus tard. - Pourquoi ces air apparaissant côte à côte ? - Alors allons tester ça. - Alors on va en vente ici. - Je vais cliquer sur ce cool et ça dit les ventes ici. - Maintenant, je suis sur la page des ventes, - va cliquer catalogue. - Il y a la page de catalogue que nous avons construite avec nos propres listes ordonnées et nos listes ordonnées. - Nous allons cliquer sur la tarification et il va à la page de tarification. - Là, nous allons cliquer sur les contacts et nous allons à la page de contact et puis, enfin, nous allons - cliquer sur le lien Y times que vous pouvez voir, - ouvre un nouvel onglet ici et nous amène au site Web du New York Times. Parce que j'ai dit la cible vide, , comme ça, ça provoque un nouvel onglet de navigateur ouvert le truc. Ce qui est sympa, c'est que ... je peux toujours retourner sur ce site. - Je n'ai pas quitté ce site ici. - Je peux utiliser l'onglet du navigateur. - Droit. - Donc encore une fois, - si je clique, - cela ouvre un nouvel onglet de navigateur ici. - On peut fermer ça et retourner sur le site. - Ils étaient déjà sur. - D'accord. - Bon travail, tout le monde. - Tu viens de construire ta première page web. - Hum, - votre premier site web. - Donc c'est vraiment ce que sont les pages Web, - euh, - les sites Web sont essentiellement, - vous savez, - des liens entre plusieurs pages Web. Et même si celui-ci n'est pas encore très attrayant, on va apprendre de plus en plus et pousser plus loin pour construire des sites vraiment professionnelset polies. Et même si celui-ci n'est pas encore très attrayant, on va apprendre de plus en plus et pousser plus loin pour construire des sites vraiment professionnels - Ok, - si bon boulot. - Ce que vous allez vouloir faire maintenant, c'est que vous allez vouloir passer au premier code - défi où vous allez commencer à construire vos propres pages de site 8. Validation du HTML: - parlons un peu de la validation de notre code. - Je vais juste donner un exemple. - La page. - Ce sont les données de prix que vous voyez et tous les paiements que nous venons de terminer dans le dernier - exercice. - Et lorsque vous travaillez sur ces exercices et sur les exercices futurs dans ce cours, - vous pouvez rencontrer des problèmes où les choses ne s'affichent pas correctement dans votre navigateur. - Um, - ou peut-être même quand vous allez construire votre propre projet de site, - vous allez écrire du code et peut-être que quelque chose ne s'affichera pas correctement ou les choses - ne seront pas positionnés de la façon dont vous aimeriez qu'ils soient sur la page. - Donc, une bonne façon de vérifier que c'est de valider le code et de voir si le code est réellement écrit - correctement. - Donc, une façon de le faire est de pouvoir utiliser un validateur en ligne. - Donc ce que je vais faire, c'est que je vais mettre en évidence tout le code sur cette page sur la page de prix ici. - Je vais cliquer et faire glisser. - Ou vous pouvez dio sélectionner tout une commande sur Mac ou un contrôle A sur Windows, - et qui va sélectionner tout. - Et puis on va copier ce code, qui est bien sûr, - commande. - Voir sur Mac ou contrôler voir sur Windows. - Et puis allons sauter sur un navigateur et je vais aller de l'avant et chercher le validateur - point w trois points org est comme ça. - Donc, cela amène le validateur dot w trois points org et ceci est à l'organisation w three dot - site web, - qui est le W trois c, - le consortium World Wide Web, - qui ressemble à une sorte de culte effrayant. - Mais en fait ce sont des gens qui maintiennent le langage HTML, - donc ils déterminent les règles et la bonne façon d'écrire et la bonne utilisation pour - HTML et CSS. - Donc, si jamais vous je veux savoir avec certitude comment écrire quelque chose ou comment utiliser un élément, - vous pouvez toujours venir ici et vérifier là-bas, - vérifier leur documentation à w trois points org. - En ce moment, on va juste utiliser leur validateur en ligne. - Vous pouvez voir leurs différentes façons de valider. - Une chose que vous pouvez faire est que vous pouvez mettre dans l'adresse Anat ici afin que je puisse télécharger mon site et mon - site pourrait exister dans mon nom de domaine comme mon site dot com. - Et je peux juste coller dans cette URL et lui demander de valider les pages de ce site. - Um, - vous pouvez également valider par téléchargement de fichier pour que je puisse choisir un fichier de mon ordinateur et que je puisse - tester le code. - De cette façon, je pourrais valider le code à partir de là. - On va utiliser ce troisième onglet ici, ça dit, - validé par entrée directe. - Et vous pouvez les voir. - Il y a une petite boîte pour copier et coller, , et affaiblir. - Ne modifier coller, - qui est une commande V ou sur Mac ou Control V sur Windows. - Et ça va coller votre code là pour qu'on puisse voir le code qu'on a récemment écrit, et je vais aller de l'avant et cliquer sur vérifier. - Et la bonne nouvelle, c'est qu'on a écrit ça correctement. - Il dit que ce document a été vérifié avec succès en tant que html 5. - Chaque fois que vous avez un bar vert en haut qu'alors vous avez bien fait, - tout fonctionne correctement. , Sinon, si tu as une barre rouge ici, ça te dire qu'il y a quelque chose qui ne va pas dans le code. - Um, - créons ce scénario. - Donc actuellement tout est écrit correctement, - Mais disons que je tapais à la hâte et disons que j'ai oublié d'écrire cette clôture - barre oblique donc on dirait qu'il y a un âge d'ouverture de deux ans, puis un autre. - H 2, - c'est une erreur très courante. - C'est Oops. - J'ai oublié de mettre la barre oblique. - Une autre erreur courante est de se rapprocher trop d'un élément. - Et si j'oubliais cette balise de clôture sur le paragraphe comme ça ? - Donc voici deux erreurs l'air à des erreurs vraiment courantes que je vois. - Alors allons-y. - Ils enregistrent ce fichier et bien, - copie. Cette année, je vais copier tout ce code, et on va aller de l'avant et ramener ça dans le validateur ici, accord ? - Et on va accélérer, - et je vais cliquer sur le bouton Reeve ality ici. - Oh, - cette fois, il a trouvé des erreurs dans le code. - Il sait qu'il y a quelque chose qui ne va pas. - C' est ce qu'a trouvé Ares en vérifiant ce document. - Allons voir quelles sont ces erreurs ici. - Ok, - euh et c'est le domaine qui me préoccupe vraiment. - Est-ce que ce texte rouge ici qui dit sortie quatre erreurs. - Voyons où il trouve ces airs. - Il nous dit ici en ligne 10 h, - le cap ne peut pas être un enfant d'un autre cap. - Intéressant. - Donc, il voit cet âge à étiqueter. - Allons zoomer sur ça pour laïque. - C'est le premier message. - Il est dit que cet âge à étiqueter ici. - Tu vois, - cette petite marque rouge ne peut pas être un enfant d'un autre cap. - Donc il pense qu'on essaie de nicher, se dirige à l'intérieur d'un autre. - Et ça dit que c'est spécifiquement en ligne. - 10. - Ok, - donc on peut revenir à notre code ici, - et parce que j'ai des numéros de ligne, - je peux descendre la ligne 10 et j'ai limité le problème et dire, - Oh, - en fait, - je vois ce que ils parlent ici. - J'ai besoin d'une barre oblique de fermeture ici, - donc je vais changer ça et ensuite enregistrer et nous pouvons valider à nouveau. - Et ça résoudra au moins une des erreurs là-bas. - Et revenons. - Et je vais aller de l'avant et coller ce code ici encore. - Je vais courir tout ça et coller et revalider. - Ok, - c'était ça. - J'étais cool. - Ça a vraiment fonctionné cette fois-ci. - On dirait qu'on s'est enfuis avec cette étiquette. - Hum, - bien que vraiment, - il aurait dû jeter en l'air dessus aussi. , Et bien sûr, si jamais tu vois ces choses se produire visuellement, tu vas vouloir le nettoyer, réparer toi-même en mettant cette autre étiquette de fermeture. - Donc, à chaque fois que vous validez, - ça va le faire, - vous savez. - Habituellement, il vous indiquera la ligne exacte où il voit le problème. - Mais d'autres fois, tu dois aller à cette ligne. - Il vous dit d'aller à, - et vous devez revenir en arrière et vérifier le code ci-dessus pour voir si quelque chose d'autre précédemment - perturbe le validateur sur cette ligne de code particulière. - C'est donc un bon outil à utiliser pour résoudre les problèmes et s'assurer que votre code est écrit correctement -. 9. Édition de site: - Salut. - Parlons de l'édition du site après tout notre dur labeur. - En fin de compte, - disons que nous aimerions prendre les fichiers de notre site Web et que nous aimerions les télécharger sur un serveur distant . - De cette façon, nous pouvons prévisualiser les fichiers ou nous pouvons partager les fichiers avec World depuis notre domaine. - Donc, - bien sûr, - cela nécessite de sortir et d'acheter un nom de domaine et un espace d'hébergement Web d'une - entreprise particulière. - Et j'ai suggéré quelques entreprises avec lesquelles j'ai eu de bonnes expériences et ensuite avoir quelques - offres raisonnables dans la section 0.0 mise en place dans le module un afin que vous puissiez vérifier ces - entreprises si vous n'avez pas déjà cette configuration et vraiment n'importe où que vous peut trouver un - fournisseur de nom de domaine et hébergement Web. - C'est bien à utiliser en dehors de pouvoir télécharger nos fichiers pour que le monde puisse les voir. - Cela sera également utile dans cette classe afin que vous puissiez poster vos projets et obtenir des commentaires de - d'autres personnes parce qu'elles seront en mesure d'aller simplement sur votre domaine de site Web pour vérifier ce sur quoi - vous avez travaillé. - Donc, pour commencer, - nous allons aller de l'avant et nous assurer que nous avons noté les trois informations que nous avons reçues de notre fournisseur d'hébergement, - et ce serait notre adresse FTP notre nom d'utilisateur ou notre connexion utilisateur et mot de passe. - Typiquement, - la plupart des sociétés d'hébergement vous enverront ces informations par e-mail lorsque vous vous inscrivez pour la première fois. - Et si vous n'avez pas été envoyé par e-mail, - il est possible que vous deviez les appeler ou les contacter pour obtenir ces informations. - Ou ils peuvent vous avoir donné un nom d'utilisateur et un mot de passe pour vous connecter à un panneau de contrôle sur leur site Web. - Et généralement une fois que vous vous connectez à votre panneau de contrôle quelque part là-dedans, vous serez en mesure de trouver - cette information. - Et une fois que vous aurez trouvé cette information, vous voulez l'écrire. - Et la prochaine chose que nous voulons faire est de lancer cette application appelée File - Zilla, - qui va être notre client FTP préféré. - Donc je vais lancer le fichier Zilla, - et ça peut sembler un peu différent sur Windows. - C'est sur mon Mac, mais c'est à peu près la même chose des deux. Vous pouvez voir que cet écran a toutes ces différentes fenêtres ici en haut. - On a une fenêtre. - Ça va être la demande et l'information de réponse de ça. - Les serveurs qui nous donnent pour qu'il réponde, - comme, - ne peut pas connecter le ou ce sera comme des choses réussies de connexion comme ça. - Et en bas, ça te dira l'état d'un dossier. - Si vous le copiez, - vous verrez un petit bout de barre de chargement, - vous faire savoir si le fichier est copié. - Et au centre ici, nous avons divisé en gauche et à droite, - et le côté gauche est votre système de fichiers local. - Donc, ils diffusent tous les fichiers sur votre ordinateur juste dans la même chose que si vous utilisiez Finder ou - votre navigateur de fichiers, puis ici sur le côté droit, - qui est en fait vide en ce moment parce que nous ne sommes pas connectés à aucun serveur. - Ce serait en fait la structure de fichiers sur votre serveur auquel vous vous connectez donc - vous serez en mesure de voir vos fichiers locaux et les fichiers de votre serveur, - et nous pouvons littéralement simplement glisser et déposer des fichiers du côté gauche vers le côté droit pour copier - de nos fichiers locaux à notre serveur distant. - Donc, c'est en fait l'équivalent de téléchargement est si vous cliquez et faites glisser vous savez, - juste de la même manière que vous pouvez cliquer et faire glisser des fichiers autour de votre ordinateur, - vous allez simplement cliquer et faire glisser vos fichiers de site Web et les déposer sur le serveur distant. - Et en outre, - vous pouvez également cliquer ici dans le serveur distant, - et vous pouvez glisser-déposer des fichiers du serveur distant vers votre ordinateur local à télécharger - ces fichiers de sorte que vous pouvez télécharger et télécharger simplement en faisant glisser et tomber. - Donc nous ne sommes connectés à aucun serveur. - Ce sera la première étape. - On doit se connecter à notre serveur. - Donc la première chose que je vais faire est que je veux aller de l'avant et aller au menu déroulant des fichiers , - et nous allons sélectionner le gestionnaire de site Et ici, - sous ce petit onglet qui dit mes sites. - C'est là que vous pouvez créer tous les différents paramètres pour les différents serveurs auxquels vous vous connectez. - Donc ces différents serveurs que j'ai connectés par le passé. - Je vais aller de l'avant et créer un nouveau site. - Je vais cliquer sur ce bouton ici nouveau site, - et il veut que je le nomme ici. C' est ce qu'on appelle le Nouveau Site, mais je vais lui donner un meilleur nom. - C H W Shoes est le nom de ce site. - Et puis si je clique dessus là, - je peux voir que je peux mettre dans certains paramètres et il se souviendra de ces paramètres pour ce - site particulier. - La première chose dont j'ai besoin, c'est mon hôte. - Et pour me connecter à mon serveur FTP, - je viens de mettre le nom de domaine auquel je me connecte, - qui est Jonathan Grover dot com. - Et bien sûr, - ce sera différent pour vous et vous devrez à nouveau vérifier avec votre - fournisseur d'hébergement pour savoir ce que vous êtes censé mettre ici pour connecter le FTP pour le protocole -. - Ici, - vous pouvez choisir entre FTP, - qui signifie protocole de transfert de fichiers, - ou SFTP, - qui est le protocole de transfert de fichiers sécurisé. - Eso sftp peut être nécessaire. - Certains hôtes ou certains serveurs nécessitent que vous vous connectiez avec une connexion sécurisée. - Mon fournisseur ne le fait pas. - Je vais juste utiliser le protocole de transfert de fichiers régulier, - ce qui est assez commun. - Je vais laisser le port vide. - Parfois, vous devez mettre un certain numéro de port ici, - mais la plupart du temps, vous pouvez laisser ce vide sous cryptage. - Je vais juste dire utiliser FTP simple et ici sous le type d'arme légale, je vais changer ça à la normale. - Je vais passer de l'anonyme à la normale. - Et ici où il est dit, - utilisateur, - c'est là que vous mettez votre nom de connexion ou votre nom d'utilisateur. C' est là qu'il est utile d'écrire ces choses quelque part, et ensuite tu voudras mettre ton mot de passe. Heureusement, vous ne pouvez pas voir le mien parce que ce sont des petits points. - Et puis il y a quelques autres onglets. - Je ne remplirai rien d'autre, mais juste pour te dire ce que c'est. - Si vous allez à l'onglet avancé, - vous pouvez cliquer, - parcourir, - et vous pouvez sélectionner un répertoire local par défaut. - Et ce que cela fera est chaque fois que vous vous connectez à ce site, - il chargera automatiquement un certain dossier de votre ordinateur ici dans le fichier local. - Parfois, c'est sympa. - Il peut accélérer le processus de sorte que vous n'avez pas à chercher aussi longtemps, - et vous pouvez faire la même chose pour votre serveur en configurant un répertoire distant par défaut. - De cette façon, - chaque fois que vous vous connectez au serveur, - il ira dans un dossier spécifique. - Tu veux y aller. - Parfois, lorsque vous vous connectez à un serveur, - vous verrez juste un répertoire vide, - et vous pouvez simplement faire glisser vos fichiers directement dedans. - D'autres fois, il y a toutes sortes de dossiers, - et là vous pourriez en voir un qui dit, - des journaux qui ont juste , - des données de votre société d'hébergement dedans, - comme des données analytiques sur qui visite le site, - des choses comme ces informations sur la fréquence à laquelle vous copiez des fichiers et à quelle date. - Et puis parfois il y a un autre dossier qui dit Public, - qui est où vous copieriez vos fichiers de site Web ou d'autres fois. - Il s'appelle http ou peut-être même un dossier HTML. - Donc, si vous voyez beaucoup de dossiers étranges et que vous n'êtes pas sûr de quel dossier copier vos fichiers - et deux, - vous allez demander à votre hébergeur à ce sujet. - Donc pour l'instant, je vais juste les laisser vierges. - Mais la principale chose que vous devez avoir est sur cet onglet général, - et c'est votre hôte FTP, - votre nom d'utilisateur et votre mot de passe. - Après avoir tout mis en place, - je peux cliquer sur le bouton OK pour aller de l'avant et enregistrer cela, - et maintenant chaque fois que je veux visiter le site, - je peux toujours aller au gestionnaire de site de fichiers, - et je peux voir qu'il se souvient cette information. - Chaque fois que je clique sur le nom de mon projet, - voici chaque chaussures W. - Il aura toutes ces informations là pour que je puisse aller de l'avant et cliquer sur mon site et cliquez sur - Se connecter ici et vous pourriez voir ici ces air toutes les commandes et réponses du serveur -. - Heureusement, - esprit ledit répertoire liste réussie ici quand je me suis connecté. - Maintenant, - si vous voyez un texte rouge qui dit quelque chose comme erreur, - bla, - bla bla un peu généralement ah, - nombre dans un type de message d'erreur. - Il vous dira généralement des choses comme le nom d'utilisateur ou le mot de passe incorrect, - qui vous fera savoir que vous utilisez évidemment le mauvais mot de passe. - Ou ça pourrait, - tu sais, - avoir une sorte de message aérien étrange que tu ne sais pas ce que ça veut dire. - Mon conseil est si vous obtenez un message aérien et il n'est pas clair pourquoi cela ne fonctionne pas, - mettre en évidence le message aérien et les flics que vous hébergez entreprises support technique ou appelez votre - société d'hébergement et de les lire le message aérien, - et ils pourrait être en mesure de vous dire pourquoi il ne se connecte pas Heureusement, - le mien a pu se connecter. - Tu es quand ? - Quand tu te connectes. - Vous pourriez ne pas voir cela compliqué d'une structure de fichier ont en fait tous ces dossiers fous ici. - Mais en tout cas, - ce que je vais faire, c'est que je vais créer un dossier spécifiquement pour mettre ce, - um, - ce site Web dans si tu voulais juste qu'il soit dans ton nom de domaine. - Comme si je voulais juste aller à ce nom de domaine, - je le glisserais dans ce dossier racine. - Mais je veux créer. - C'est un peu comme un projet de site caché dans un dossier qui, - comme sur Lee que je connais. - Donc j'ai créé un dossier ici appelé chaussures CHW pour que je puisse réellement aller orteil comme Jonathan, - Grover dot com slash chaussures CHW et voir les fichiers là, - Par exemple, - laissez-moi réellement supprimer ce répertoire pour que je puisse le recréer à nouveau. - Vous montrer comment Si je clique avec le bouton droit, - Aiken, - dire supprimer. Sois prudenten faisant ça, en faisant ça, tu ne peux pas l'annuler, et on dira oui. - Et maintenant c'est celui-là qui est parti. - D'accord ? - C'est en train de supprimer les fichiers. - Ça prend un moment. - Donc si je veux créer un nouveau répertoire ici en dehors de la fenêtre et dire Créer un répertoire - et ça me montre où il va mettre le répertoire. - Et je vais appeler ça des chaussures Z h W. Alors j'essaie de faire un petit réalisateur caché ici, et ils vont dire, , je devrais pouvoir trouver ce répertoire quelque part. - Maintenant, - il est là. - Si jamais vous voulez aller dans un dossier, - il suffit de double-cliquer sur le dossier. - Si jamais vous voulez sortir un dossier, - il vous suffit de double-cliquer sur ce petit dossier de points. - Il y a toujours un dossier en haut, - appelé point point et si vous double-cliquez dessus, - il vous sortira du dossier. - Je vais retourner dans ce dossier ici. - Cool. - Et ce que je veux faire c'est que je veux sélectionner tous ces fichiers ici d'une façon que vous pouvez - faire c'est que vous pouvez cliquer sur des fichiers individuels et vous pouvez maintenir shift et les sélectionner comme - ça . - Vous pouvez également sélectionner tous les fichiers en disant commande a sur Mac ou en disant contrôle a sur windows -, - et puis vous pouvez une fois qu'ils sont tous sélectionnés comme ce bleu. - Tu peux cliquer sur n'importe lequel d'entre eux, - et ça va les attraper qu'on peut juste faire glisser ça ici et on peut le déposer. - Donc en faisant glisser et déposer de mon côté local vers mon serveur distant là-bas, - je pourrais déplacer tous ces fichiers là-dedans et là-haut. - Le haut. - Ce petit bar me montre où il copie ces deux-là. - Cela me dit si ça les copie avec succès et ici dans cette fenêtre, - quand vous copiez un fichier, - vous verrez en fait une barre de progression vous montrera combien de temps il faut pour déplacer ce fichier. - Par exemple, - si je fais glisser les images ici encore, - il m'a demandé. - Il dit que ces fichiers existent déjà. - Vous voulez vous écraser ? - Dis, - euh, - toujours utiliser cette action et dire OK, - et ici vous pouvez voir que c'est remplacer ces fichiers ou mettre à jour ces fichiers image maintenant, - d'accord, - et une fois que c'est fait, - il dira le transfert de fichier réussi Sur cet onglet, - il dit qu'il y a eu 39 transferts réussis, - et si je clique dessus, - il me dira quels fichiers comme ça et où ils ont été copiés. - Si vous voyez quelque chose ici sous les transferts échoués, ça veut dire que quelque chose n'a pas copié. - Et vous pouvez, - comme, - faire un clic droit dessus. - Et tu peux, - comme, - lui dire de recommencer à le copier ou quelque chose comme ça. - Les fichiers mignons sont ceux qui devraient être comme actuellement café. - D'accord. - En tout cas, - vous pouvez voir ce sont des images miroir. - Voici mes fichiers locaux. - Et voici mon serveur distant, - qui a tous ces fichiers miroir des images les uns des autres là-bas. Puisqu' il y a une page d'index ici, je pourrais juste trouver ce dossier et il va me montrer ces fichiers sur le web maintenant. Puisqu' il y a une page d'index ici, - Donc je vais ouvrir mon navigateur, - et j'irai à mon nom de domaine et je l'ai jeté dans mon répertoire par défaut. - C'est pour mon nom de domaine. - Je pourrais aller au nom de domaine lui-même. - J'ai déjà un site web dans le répertoire racine. - Alors je vais à la place dans mon dossier de chaussures de soulignement C h w comme ça. - Et il y a des chiots. - Mon site web. - Donc vous devriez pouvoir Teoh, - télécharger vos fichiers sur votre serveur. - Et si tu ne veux pas que le monde les voie. - Tu veux le cacher un peu. - Vous pouvez toujours créer un répertoire et jeter les fichiers dans leur. - Et si vous copiez et collez ce répertoire dans votre page de projet sur le partage de compétences, - alors d'autres personnes peuvent aller voir les fichiers et vous donner des commentaires et des choses comme ça. 10. Présentation des tables, formules et Iframes: - Salut, - bienvenue. - Ce sont des diapositives 1.2 tableaux formulaires et cadres I. - Nous allons regarder quelques éléments HTML supplémentaires que nous pouvons coller dans Ah, - le prochain exercice à venir. - Donc, sera fondamentalement ramasser là où nous avons arrêté pour le dernier exercice, - mais sera ajouter sur ce même site. - Quelques choses supplémentaires telles que les tables, - formulaires et I cadres tableaux. - Vous êtes probablement tous familier avec chaque fois que vous avez des données et il serait préférable - affiché en utilisant ah structure organisée de lignes et de colonnes qu'une table va être votre aller - à l'élément. - L'élément de table est constitué de ces étiquettes de table d'ouverture et de fermeture ici et puis - à l'intérieur de celui-ci. - La première chose que nous faisons est de décider combien de lignes il y a, - et nous utilisons cet élément TR ici pour créer une ligne de table, - donc t r signifie ligne de table. Donc cette table particulière que nous avons construite pour monter ici, que vous pouvez voir. Donc cette table particulière que nous avons construite pour monter ici, - Voici le premier set et voici le deuxième Maintenant à l'intérieur de la table rose, - nous avons des TDs qui divisent la table en colonnes. - Donc, cela prend cette ligne ici et il y ajoute deux colonnes parce que j'ai une ouverture TD -. - Un TD de fermeture fait une colonne particulière et cet autre diviseur de table TD crée ici - une autre colonne. - Nous pouvons aussi faire la même chose ici, - mais au lieu d'utiliser TD pour ce premier 2 sur la rangée supérieure ici, nous utilisons th th dance - pour l'en-tête de table. - Donc ça va nous permettre de les coiffer différemment. On peut dire, que on veutquele titre ait on veutquele titre aitun texte plus épais et qu'il soit centré ou quelque chose comme ça. - Ou peut-être que la couleur de fond de cette cellule est une couleur différente ou quelque chose comme ça. - Donc on utilise l'élément de table à l'intérieur. - Nous avons la table rose t r. - Et puis nous avons th pour le titre de table ou l'en-tête de table et nous avons la télévision pour les autres cellules. - Les autres colonnes que nous voulons créer ci-dessous. - Donc, vous pouvez voir ici si vous imaginez que nous coupons tous ces trucs à droite et - tout ce qui est en dessous. - Fondamentalement, - nous construisons juste ces 2 premières colonnes ici dans ces 2 premières rangées, - et celui-ci serait le titre de table que cette personne a coiffé différemment, - donc il est clair que c'est le titre en haut. - Nous avons un fond gris plus foncé pour l'indiquer. - Donc, voici le nom, - um, - comme le premier et pas de filetage en millimètres, - ce qui est contre la mesure pour ce produit particulier. - Et puis sous ça, nous avons le prochain TR, - qui est Table Road. - Ce type ici est une table, - a écrit ce premier bar gris clair. - Et à l'intérieur, nous avons un TD qui compose cette première colonne - qui est M quatre, - qui est le nom du produit. - Et puis ici, nous avons la mesure pour ce produit, - 0,7 millimètres. - Regardez-le encore une seconde. - Absorbant. - D'accord. - Et la prochaine chose dont on parlera, c'est des formulaires. - Donc nous allons ajouter un formulaire de contact eso que l'utilisateur peut taper un message dans le formulaire - et nous l'envoyer, - et il apparaîtra à notre email. - Ok, - donc en termes de html aura besoin d'apprendre quelques éléments de formulaire afin que nous puissions construire ces champs formulaire - entrée afin que l'utilisateur puisse nous envoyer des informations. - Ok, - donc l'élément de formulaire est constitué de cette balise de formulaire ouverte d'ouverture et de fermeture, - et vous pouvez voir qu'il y a deux options obligatoires que vous devez mettre à l'intérieur de cette balise de formulaire d'ouverture là. - Et ce 1er 1 s'appelle Action. - Donc, l'action indique l'emplacement du fichier ou de l'itinéraire sur votre serveur qui va - accepter les informations qu'il s'attend à recueillir les informations ou recueillir les informations - que vous soumettez dans ce formulaire. - Donc, - par exemple, - dans ce cas particulier, - il y a une entrée pour le nom d'utilisateur et une entrée pour le mot de passe. - Donc, disons qu'ils tapent l'utilisateur nommé Bob, - et ils tapent le mot de passe frites, - puis ils cliquent sur un bouton de soumission. - Donc, chaque fois que c'est pour Mlle soumis, - ça va aller à l'action. - Et il va envoyer cette information à ce fichier particulier, qui s'appelle Login. - Donc ce journal et fichier sur le serveur va savoir, - puis pour vérifier le ah, - il va vérifier le nom d'utilisateur et le mot de passe par rapport à une base de données pour voir si cet utilisateur existe - par exemple. Donc pour le nôtre et notre exercice plus tard, on va construire un formulaire de contact, donc ça sera un peu différent, mais on aura toujours une action. Donc pour le nôtre et notre exercice plus tard, on va construire un formulaire de contact, donc ça sera un peu différent, - C'est vrai ? Donc, l'action est essentiellement à l'endroit où cette information est envoyée. - Le 2ème 1 que vous devez avoir ici, - Hum, - et ceux-ci peuvent apparaître dans n'importe quel ordre que vous pouvez écrire. - Méthode Première action seconde, - mais vous devez inclure quelque part dans cette balise d'ouverture, - inaction, - attribut, - et un attribut de méthode. - Donc, la méthode spécifie réellement la méthode qu'elle envoie cette information à cette action - emplacement ici. - Il y a deux principaux avec lesquels tu travailleras. - L'un s'appelle get, - et l'autre s'appelle Post. - Alors, ça ne cache pas l'information. - Vous pouvez réellement le voir écrit dans l'URL Lorsque vous publiez en utilisant lorsque vous soumettez un - formulaire en utilisant la méthode get, - il va effectivement ajouter à l'Ural en haut de la fenêtre du navigateur. - Ces valeurs particulières ah, - ces paramètres et quelle valeur la personne a tapé pour leur nom et mot de passe. - On ne voudrait jamais vraiment utiliser get pour quelque chose d'important. - Comme, - euh, - comme, - vous savez, - informations de carte de crédit, - des mots de passe, - des choses comme ça que vous ne voulez jamais utiliser la méthode get. - Il est beaucoup plus courant d'utiliser le post de méthode car il est sécurisé en ce sens que, - eh bien, - il n'est pas crypté. - Mais c'est sûr dans le sens où cette information est au moins cachée. - Il n'est pas visible dans l'en-tête http tout, - hum, - et vous ne le verrez pas en haut de votre El Bar non plus. - Donc c'est notre méthode préférée pour des choses comme Loggins ou même notre formulaire de contact que nous allons construire. - On va utiliser une méthode de poste. - Ok, - Donc l'action est, - vous savez, - où nous envoyons le fichier Post est lui dire le format qu'il est ou le genre de méthode - pour l' envoyer là à l'intérieur des balises de formulaire d'ouverture et de fermeture. - Ensuite, nous avons d'autres types d'éléments que nous pouvons placer à l'intérieur de leur um et nous allons en prendre - un coup d'oeil à quelques différents au fur et à mesure que nous avançons. - Donc, ce 1er 1 ici parlera est appelé entrée. - Donc, ce gars a une entrée, - a un type de texte, - donc chaque entrée peut avoir des types différents. - Vous pouvez voir celui-ci comme un type de texte. - Celui-ci a un type de mot de passe, - um, - donc du texte quand vous tapez dans une entrée de texte, - l'utilisateur voit juste les lettres qu'il saisit. - Donc, ils cliquent à l'intérieur de l'entrée, puis ils commencent à taper. - Ils voient apparaître le texte. - Maintenant, - mot de passe est différent parce que en fait mot de passe, - Vous voyez des petits points. Alors quand ils tapent le mot de passe, s'il y avait quelqu'un qui regarde peut-être par-dessus ton épaule, c'est par-dessus ton épaule, une bibliothèque ou quelque chose comme ça dans un endroit public à un arrêt de bus, les gens regardent votre lorsque vous tapez à l'intérieur d'une zone de mot de passe avec entrée avec le - type de mot de passe, - ils voient des petits points afin qu'ils ne puissent pas réellement voir les lettres de votre mot de passe ou les chiffres - de votre mot de passe que vous tapez. - Ok, - donc c'est important est de spécifier le type d'entrée qu'il est. - Nous avons même un type ici de Soumettre, - qui crée un bouton qui est un bouton de soumission, - donc nous avons tapé texte type de mot de passe. - Soumettez ces air quelques uns. - On parlera d'un peu plus à mesure qu'on passera. - Une autre chose vraiment importante que vous devez faire est d'ajouter cet attribut ici appelé nom Okay, - donc chaque fois que la personne tape dans cette entrée. - Disons qu'ils tapent. Ils s'appellent Bob, et nous soumettons qu'il va poster ces informations dans ce dossier. - Connectez-vous point PHP. - Maintenant, - quand le point de journalisation PHP reçoit cette information, - le nom Bob, - il doit avoir un avec, - ah d'identifier cette information parmi les autres informations. - Donc on va envoyer, - tu sais, - un nom d'utilisateur et un mot de passe. - Donne-lui un nom. - Ah, - comme le nom d'utilisateur ou le mot de passe. - Ce que nous faisons, c'est que nous étiquetons les informations que nous publions dans ce dossier. - Donc, c'est essentiellement un nom de variable appelé nom d'utilisateur qui stocke tout ce qu'ils - utilisateur, - vous savez, - quelle que soit la personne dans laquelle le spectateur du site tape, - Donc, ils tapent dans Bob et que ce texte chaîne Bob est stockée à l'intérieur de cette variable ou - ce paramètre nom d'utilisateur, - qui est posté pour se connecter à point PHP. - Donc le nom est très important. - Et bien sûr, - le nom entre les différents contremaîtres met doit être différent, - le nom entre les différents contremaîtres met doit être différent, - Ok, - um, - ce gars ici est Ah, - chose amicale amusante que vous pouvez faire avec des formulaires en HTML cinq est que vous pouvez utiliser cet attribut appelé - espace réservé et ce que cela fait, c'est qu'il écrira quelque chose dans le formulaire et mettre au départ - vous pouvez donner aux gens un indice de ce qu'ils sont censés taper leur eso. - Ça va dire le nom d'utilisateur ici. - Donc, le spectateur sait qu'ils sont censés taper le nom d'utilisateur dans cette zone, - puis quand ils cliquent à l'intérieur de la boîte, - cet espace réservé disparaît, - et maintenant ils ne voient que le texte là tapant là si souvent fois le texte réservé - est gris et indiquera à l'utilisateur ce qu'ils sont censés taper leur. - Et puis quand ils cliquent à l'intérieur de la boîte de mise du contremaître, - la couleur du texte devient noire quand ils commencent à taper leur nom d'utilisateur. - Ok, - et puis nous avons le type Soumettre, - que nous avons mentionné est un bouton, - et celui-ci a aussi un attribut appelé Valeur. - Et c'est comme ça que nous étiquetons le bouton. - Cela mettra physiquement le journal de texte. - Il va écrire ce texte sur le bouton que les gens voient dans le navigateur. - Donc, ces air d'autres types d'entrées. - Nous avons regardé un type de texte avant um, - nous avons aussi un type de mot de passe, - que nous avons regardé avant un autre type que nous avons appelé T L, - qui signifie téléphone. - Comme vous l'avez probablement deviné, - une des belles choses sur le type dire qui est utile est qu'il ya en fait une légère - différence si vous êtes sur, - par exemple, - une tablette ou une autre touche Ah, - smartphone de l'appareil mobile, - tout type de dispositif à écran tactile. - La plupart des navigateurs sont maintenant compatibles que quand ils voient un type de téléphone, - quand l'utilisateur, - um, - utilise son doigt comme une tablette pour cliquer à l'intérieur de cette boîte de saisie, - le clavier qui apparaît sera un pavé numérique. - Il est donc plus facile pour eux de mettre leur numéro de téléphone parce que c'est tous les numéros par opposition à - un type de textos. - Donc, lorsque vous si vous êtes sur un appareil mobile ou tout autre type de tablette tactile appareil, - si vous cliquez à l'intérieur d'une entrée avec le type de taxi fera apparaître le pad Alfa, - qui est tous les caractères de l'alphabet, - et puis quand vous cliquez sur l'intérieur d'une cabine téléphonique, - il fait apparaître des chiffres. - Ok, - euh, - nous avons aussi C'est un peu intéressant. - Nous avons un type de caché ici, - ok, - donc caché quand vous mettez un type de caché, - il vous permet d'insérer une valeur qui est automatiquement soumis dans le formulaire. - C'est, - Ah, - situation hypothétique. - On dit, c' est l'idée d'utilisateur d'une personne. - Peut-être qu'ils se connectent à leur banque ou pour vérifier leurs actions. - Et nous avons besoin de savoir quel est le numéro d'utilisateur. - Ils le sont, - pour une raison quelconque, - pour que nous puissions réellement stocker ça à l'intérieur de la valeur. - Donc au lieu de taper ces informations comme les autres boîtes de saisie, - ils vont aller Teoh, - ça va être automatiquement inséré là pour eux, - et on lui donne toujours un nom. - Ça a un nom de I. - D. - Donc il stocke cette valeur à l'intérieur de quelque chose appelé I D. - Et parce qu'il définit un type caché, - nous ne le verrons pas physiquement. - Donc, cela ne sera pas visible dans le formulaire, - mais il transmet toujours des informations à l'endroit où vous publiez ce formulaire. - D'accord ? - Et on a parlé du type d'entrée. - Soumettre. - C'est aussi quelque chose d'utile à savoir. - Si vous voulez faire une entrée de formulaire requise, - un HTML cinq. - Vous pouvez utiliser ce mot particulier à la fin de n'importe quel champ de formulaire que vous voulez rendre obligatoire, - et vous écrivez simplement le mot requis, - ce qui est un peu différent de ce que nous avons vu auparavant. - Normalement, - vous placez une valeur dans un attribut. - C'est un peu comme juste placer un nom d'attribut, - um, - à la fin ici, - et cela le rendra nécessaire, - qui, - en fait dans le navigateur sera en html cinq navigateurs conviviaux, - c'est-à-dire, - vous verrez. - Un petit message ah va apparaître, - indiquant que ce formulaire est requis maintenant, - pour styler les yeux ceci Ou pour que cela fonctionne dans un navigateur plus ancien, - nous devrions abandonner requis et nous utiliserions probablement quelque chose comme JavaScript et - CSS Teoh valident les mises de contremaître et indiquent visuellement les champs requis. - Mais ici, - si nous ne sommes pas trop pointilleux sur la façon dont il ressemble, - nous pouvons utiliser le html cinq hommage requis ici. - On a aussi des entrées radio. - Vous pouvez dire radio de type entrée, - et ceci est un exemple de ce qu'ils ressemblent. - Vous avez ces petites bulles et vous pouvez sélectionner un mâle ou une femelle. - Donc, ce n'est qu'une chose pour la plupart des gens, - au moins vous ne allez probablement pas système sera en mesure de sélectionner les deux dans cette situation maintenant - que nous sommes discriminants. - Bien sûr, - dans cette situation, - nous allons probablement choisir l'un ou l'autre, - non ? - Donc ce que nous voulons faire ici pour ce bouton radio, c'est que nous voulons nous assurer qu'ils ont le même nom. - Voici les boutons radio. - Ils ont tous les deux le même nom de sexe. Mais celui-ci a une valeur de mâle, et celui-ci a une valeur de femelle comme ça. - Donc, si je clique sur mâle, - alors ce paramètre ou ceci ce nom variable sexe stockera la valeur du mâle. - Et si je clique sur femelle, - ça remplacera ça. - Donc de cette façon, - ce nom ici ne sera que égal à un homme ou à une femme. - C'est la seule possibilité d'utiliser un bouton radio. - Donc, et cela serait indiqué par lorsque vous cliquez dessus. - Ça va s'allumer en bleu à l'intérieur de cette petite boîte radio. - Nous avons aussi des entrées de case à cocher. - Donc, - comme vous pouvez le voir, - nous pouvons dire la case à cocher de type d'entrée. - Et on lui a donné le nom ici. - Hum et nous avons des valeurs différentes. Donc on pourrait dire, - hum, - vous pouvez cocher une case qui dit que j'ai un vélo ou vous pouvez cocher une case qui dit que j'ai une voiture - si simple. - Vous lui donnez une valeur et vous lui donnez un nom et assurez-vous qu'il a un type de case à cocher, - puis vous pouvez cocher ces cases sur un formulaire. - Um, - si pour une raison quelconque vous vouliez qu'il soit automatiquement vérifié, - par exemple, - parfois des gens sournois vont créer des formulaires qui ont une petite boîte en bas qui est - déjà vérifiée pour vous. - Cela dit, - Inscrivez-vous à ma newsletter ou acceptez de recevoir des choses promotionnelles à votre email, - quelque chose comme ça. - Donc, si vous vouliez, - pour une raison quelconque, - vous vouliez que cette case soit cochée automatiquement de la même manière que nous utilisons l' attribut - requis à la fin ici. - Vous pouvez également écrire le mot coché comme la dernière chose avant ce symbole plus grand que ou - ce crochet d'angle de fermeture ici, - et cela fera la case à cocher automatiquement cochée. - Lorsque l'utilisateur visite le formulaire pour la première fois, - nous engageons également menu déroulant sélectionner les menus, - et c'est en utilisant l'élément select. - Ah, - donc celui-ci ici nous lui donnons un nom et ensuite imbriqué à l'intérieur de cet élément select. - Nous avons toutes les différentes options, - donc vous verrez une petite barre comme celle-ci et vous cliqueriez dessus et quand cela s'ouvrira , - vous pourrez voir, - hum, - petit, - moyen et grand, - et vous devrez choisir une taille là-bas. - Donc, la façon dont nous faisons petit sélectionné initialement que vous pouvez écrire les mots sélectionnés là, - tout comme le mot coché pour cocher la case automatiquement dans le mot requis pour - exiger n'importe quel champ de formulaire, - vous pouvez simplement dire sélectionné si vous voulez que small soit sélectionné automatiquement, - de sorte que ce sera la valeur par défaut dans cette situation. - Zone de texte est utile lorsque vous devez mettre en sorte de plusieurs lignes de texte ou un - paragraphe d'information. - Si vous voulez que quelqu'un puisse vraiment dire son avis, - hum, - ou, - vous savez, - laisser un commentaire, - un type de feedback qui va être multi-ligne. - Vous allez certainement vouloir utiliser une zone de texte au lieu d'une entrée de texte. - Donc ça obtient juste un nom, - et tout ce que les gens tapent ici devient la valeur. - C'est assez simple. - Alors je cadres est la prochaine chose dont on va parler. - Nous allons insérer un cadre Google Maps I sur notre page de contact pour montrer où se trouve notre entreprise de chaussures . - I cadres sont également utilisés pour, - parfois incorporer des vidéos. - Essentiellement, - chaque fois que vous voulez charger du contenu HTML d'un autre endroit dans un petit cadre sur - votre page Web, - vous pouvez utiliser un œil franc. - Donc je cadre représente le cadre intérieur, - et c'est exactement ce que c'est. - C'est un cadre à l'intérieur de votre page HTML. - C'est un peu comme une fenêtre regardant dans un autre contenu HTML. - Donc, nous saisissons du code H sur le site Web de Google, - et nous le chargeons dans un petit cadre sur notre page Web particulière. - Donc, ceci est un exemple d'un cadre oculaire de sorte que vous pouvez utiliser I cadres orteil lié à d'autres pages dans - votre site. - Ceci est un exemple de, - ah, - juste un lien vers une autre page de notre propre site. - Vous pouvez également lier des cadres I au contenu d'autres personnes. - Donc un autre vous Earl utilisant une fille absolument comme http slash du côlon, - slash etcetera, - et nous pouvons donner à cela une largeur et une hauteur. - Um, - et vous pouvez également spécifier des informations sur l'affichage ou non des barres de défilement. - Si le contenu ne correspond pas à la taille de votre cadre, - allons de l'avant et passons maintenant à l'exercice suivant 11. Tableaux: - pour ce prochain exercice, - nous allons ajouter du contenu supplémentaire à nos mises en page. - Vous pouvez voir ici que pour ce code de démarrage pour les formulaires de tables 1.2 et les cadres I. - Ce que j'ai fait est que j'ai ajouté c'est un peu plus de texte supplémentaire et je suis aussi allé - dans certaines des pages et aussi ajouté quelques images là-dedans maintenant. - Alors, sentez-vous libre. - Teoh, - regarde le code de démarrage et vois certaines des choses que j'ai ajoutées. Il y a des coordonnées ici et des liens, , et de nouvelles images. - Donc ce qu'on veut faire pour ces exercices spécifiques, on va aller sur la page des prix et on va ajouter une table. - Ça va être un tableau des prix. - Et nous allons aussi aller sur la page de contact et nous allons ajouter un formulaire de contact. - Et nous allons également intégrer l'emplacement Google Maps basé sur l'utilisation d'un cadre oculaire. Donc, pour commencer, vous avez téléchargé le code et décompressé, et vous l'avez mis en texte sublime. - J'ai juste fait glisser le dossier ici et vous pouvez voir les cinq pages que nous avons construites pour le dernier exercice et la première chose que nous allons faire est que nous allons aller dans la page html point de prix -. - Hum, - et vous pouvez aussi voir que j'ai ajouté quelques nouveaux commentaires ici dans le code. - Donc, - par exemple, - avant que nous ayons cette rubrique ici dans les liens et je suis allé de l'avant et entouré cela avec - un commentaire qui dit que c'est le début d'une section d'en-tête sur la page et c'est - la fin d'un en-tête. - Donc, ce sera finalement une barre en haut de notre mise en page qui aura le nom de - l' entreprise et le lien de navigation orteil entre toutes les pages. Avant qu'on apprenne à construire des mises en page, je pensais que je serais un bon genre de Teoh pour vous montrer où nous allons en créant des commentaires de base pour entourer les choses. - Donc ça me fait savoir ici que je vais mettre dans une table juste ici dans cette section de prix . - Ok, - Donc, comme dans les diapositives, - nous avons appris que l'élément de table est utilisé pour spécifier une table. - Ça, puis on peut aller à l'intérieur de là, et je vais devoir montrer où nicher et construire quelques rangées. - Je vais construire une rangée de table ici et construire une autre route juste en dessous de celle-ci. - Et il semble que pour cet exemple, - nous n'avons pas vraiment à nous laisser trop emporter. - Mais je crois que je vais en construire trois ou quatre. - On va faire quatre roses de table. - Donc je peux copier et coller ça ici comme ça. - Il y a ma table à quatre, une à trois et quatre. - Ok, - jusqu'à présent, - si bien à l'intérieur d'ici. - On va avoir deux colonnes différentes. - Ce 1er 1, nous allons, - Teoh, - créer une colonne qui tiendra le nom de marque de la chaussure. Donc je vais utiliser ce qui est l'en-tête de table juste pour cette première rangée, onva voir qu'il y a une colonne appelée Brand. Donc je vais utiliser ce qui est l'en-tête de table juste pour cette première rangée, on Je vais faire une autre colonne à côté de ça, appelée « prix ». - Ils auront le prix de la chaussure. - Oh, voyons voir. - Va en faire un autre ici appelé impôt fiscal. - D'accord. - Et en fera un autre ici pour dire s'il est en stock ou non. Je vais écrire en stock comme ça, et je fermerai celui-là. Si ces air sont plus faciles à voir, s'il est plus facile de comprendre côte à côte que ces colonnes d'air, vous pouvez l'écrire de cette façon . Si ces air sont plus faciles à voir, s'il est plus facile de comprendre côte à côte que ces colonnes d'air, vous pouvez l'écrire de cette façon . s'il est plus facile de comprendre côte à côte que ces colonnes d'air, vous pouvez l'écrire de cette façon - Beaucoup de fois les gens vont mettre chacun d'eux sur leur propre ligne parce que alors c'est un peu plus facile de voir um, - sans avoir à faire défiler latéralement. - Un Sfar. - Mais j'ai tendance à les mettre comme ça. - Au moins quand je l'enseigne. - Ça m'aide à comprendre que c'est une ligne, - et c'est une colonne parce qu'elle est à côté de cette colonne. - Mais vous pouvez aussi, - Comme je l'ai dit, - vous pouvez faire des retours de ligne et il s'affichera correctement aussi. - Omelettes e Donc, nous avons hav marques taxe de prix en stock. - Et allons-y et faisons juste un autre Will do order i d. - Donc je vais faire un cap ici et nous allons dire ordre, - I D. - Dit serait comme un I d. - Numéro que vous utiliseriez pour commander des chaussures, - je suppose. - Et, - hum, - faisons ces gars en utilisant la balise T d pour que nous utilisions seulement th pour le 1er 1 qui est l'en-tête -. Donc cette première colonne serait sous la marque juste ici. - On peut éteindre le papier à mots, donc le quart de jour s'en va. - Donc ce serait la première colonne sous Brand. - Et je vais devoir inventer un nom de marque funky. Disons que Fink Erstein est un nom de marque là-bas. - Et on pourrait ajouter une autre télé. - Celui-ci serait, - hum, - n'oubliez pas de le fermer. - Celle-là entre l'étiquette de fermeture d'ouverture serait le prix. - Donc, ces air assez cher leur fera 97.18$. - Et pour la taxe dira que la taxe est sur une échelle mobile de, - hum, - 15 cents Teoh 30 cents comme ça. - Et la prochaine chose que nous avons est de savoir si oui ou non il est en stock. - Donc on pourrait dire oui, - il est en stock. - Euh, - eh bien, - juste mettre un pourquoi. Et la dernière chose qu'il semble qu'on ait ici, c'est quelque chose qui s'appelle l'ordre I d. - Et cet ordre que je vais juste faire le numéro. - Je vais dire 11. - 70 est son ordre. - J'ai d. - Numéro. - Excellent. Je pourrais juste copier ceci et coller ci-dessous, etje pourrais juste changer les informations pour accélérer ça ici. Je pourrais juste copier ceci et coller ci-dessous, etje pourrais juste changer les informations pour accélérer ça ici. Je pourrais juste copier ceci et coller ci-dessous, et Je vais juste mettre en évidence ça et on peut descendre en bas et coller et je vais coller ça à nouveau, et puis je vais changer rapidement ces valeurs ici, - hum, - vu que la prochaine marque fera ce type appelé Dolby. - Les espoirs seront et Washington, - et nous allons changer le prix ici. - D'accord. - Et celui-ci aura 15 ans pour changer l'année d'imposition à 15 à 32 cents. - Ces types sont en stock ? - Euh, - bien sûr. Et puis nous changerons le numéro de commande ici à la fin, et nous allons juste descendre et faire un lancer de produit de plus. - D'accord ? Warby, Brixton. - Et ça, cette marque a coûté 111 et 42 cents. Je n'ai pas fait de shopping de chaussures depuis un moment, donc je ne sais pas combien elle a coûté. - D'accord, - eh bien, - faites celle-là la même chose et dira que celui-ci n'est pas en stock là-bas à populaire dira non. - Et puis, - euh, - pour son numéro particulier va juste inventer quelque chose. - Va dire 11. - 78 A. - Ok, - Parfait. - Donc je vais aller de l'avant et sauver ça, - et nous n'avons pas encore utilisé de CSS. - On ne va pas encore coiffer cette table. - Nous allons le faire dans un exercice ultérieur, - donc nous allons juste voir les données brutes, - mais il devrait quand même être organisé en lignes et en colonnes. - Nous pouvons enregistrer et revenir ici sur notre navigateur et nous allons de l'avant et naviguons sur cette page. - C'est la page des prix, - et là vous pouvez voir ma table. - Donc, cela aura l'air beaucoup plus beau quand nous donnons à ces quelques couleurs, - chacune de ces cellules une couleur différente et ajouter des bordures et des choses et l'espacement autour d'elle -. - Mais pour l'instant, - j'espère que cela vous donne une idée de la façon d'organiser les informations que vous pouvez voir ici. - Le mot marque, - qui est un titre, - est centré, - mais tout le texte TD est par défaut. - C'est sur le côté gauche de la cellule, - mais il les organise toujours en colonnes égales comme ça et Rose. - Alors, c'est quatre rangées. - 1234 et 12345 colonnes. - Allons-y et regardons à nouveau le code, - juste un instant pour absorber tout ça. - D'accord, 12. Iframes: - alors avancer. - La prochaine chose que nous voulons regarder est que nous voulons aller à la page de contact et nous voulons - aller dans la page de contact ici, - et nous voulons ajouter deux choses. - On va ajouter une carte dans un formulaire. - Nous allons aller de l'avant et commencer avec les cartes Google intégrées Thea en utilisant un cadre oculaire, - quelque chose à entrer ici où il est dit entre, - vous savez, - carte et carte de fin sur mon code. - C'est en ligne. - 24 ici devrait être pendant des années aussi. - Et la première chose que je veux faire est d'aller à Google et de prendre une carte pour que je puisse aller à maps dot - google dot com et tapons l'adresse de notre société. - Peut-être n'importe où. - Hum, - disons, - euh, - eh bien, - nous dirons, - Ah, - Hoboken à propos de ce Hoboken, - et probablement pour vos affaires, - tu mettrais une adresse réelle. - Je vais juste mettre ici et m'affaiblir, - en gros zoomer pour que ça ressemble à ce qu'on veut ici. - Je vais zoomer un peu plus près et puis je centrerai ce petit A ici qui a ce drapeau alors - normalement tu trouverais ton entreprise, - et ensuite tu le sélectionnerais, - normalement tu trouverais ton entreprise, - et ensuite tu le sélectionnerais, - Et puis la prochaine chose que nous voulons faire est que nous voulons pouvoir Teoh, - capturer cette information et eso intégré au moins au moment de filmer ceci, - um, - Google a un lien ici dans le coin supérieur gauche. - Et si vous cliquez sur ce lien, - la première chose qu'il fait est qu'il essaie de vous donner un lien vers le haut ici -. - Si vous regardez ici dans la section inférieure, - il dit coller html à incorporer dans un site Web, - et ils vous donnent un cadre visuel ici. - Si vous souhaitez le personnaliser et ajuster les paramètres de ce cadre I, - votre meilleur pari est de cliquer sur ce lien ici qui indique la personnalisation de l'aperçu, - carte intégrée et qui apparaîtra une petite fenêtre comme celle-ci. - Et vous pouvez voir ici que vous pouvez sélectionner petit, - moyen, - grand, - ou vous pouvez mettre dans une coutume spécifique avec et hauteurs. - Hum, - donc c'est bon. - Nous allons juste laisser les valeurs par défaut ici, - ce qui est, - um, - moyen, - qui est 4 25 par 3 50 C'est parfaitement bien pour la largeur et la hauteur pour l'instant. - Et ce que nous allons faire plus tard, c'est quand nous commencerons à entrer dans nos sorties réactives - pour différents appareils, - nous allons réellement changer la largeur de ceci, - en fonction de l'appareil. - Donc pour l'instant, - nous allons juste de l'avant et utilisons ce paramètre par défaut ici. - Vous pouvez également basculer entre la vue satellite et la vue de la Terre et la vue du MNT. - Je vais aller de l'avant et choisir la vue du terrain parce que j'aime ça. - Pourquoi pas ? - Et puis si nous venons ici, - vous pouvez voir qu'il y a du code que vous pouvez copier et coller dans cette section ici pour que je puisse - mettre en évidence tout cela. - C'est beaucoup, en fait. - Um, - tout ce code d'ici à ici, - et ensuite je le copierai. - Je vais commander dio voir sur Mac pour copier ou contrôler voir sur Windows. Et puis je reviendrai ici, et je peux coller ça et je vais faire le commandement V sur Mac, ce qui est, bien sûr, - contrôler V sur les fenêtres et coller ce méchant garçon là-dedans. - Donc ça jette le cadre I dans, - et nous pouvons sauver cela et revenons au navigateur et vérifions ça et voyons si nous avions - une chance. - C'est ce type. Donc si j'ai fait ça correctement, je devrais voir cette carte apparaître. - Revenons ici et allons à la page de contact, - et là c'est génial, - pour que je puisse montrer l'emplacement. - Les gens peuvent cliquer dessus et déplacer ça. - Ils peuvent choisir des directions. - Ils peuvent utiliser ces outils pour zoomer, zoomer et se déplacer sur la carte. - Vous pouvez également cliquer sur un lien qui apparaît ci-dessous. - Ceci est la vue plus grande carte, - qui les prendra dans Google maps. - Ok, - tant de sites vous donnent la possibilité d'utiliser des cadres I pour incorporer du contenu. - D'autres exemples sont YouTube. - Vous pouvez intégrer des vidéos YouTube via, - et je cadre simplement en copiant et en collant le code. - Ils fournissent de la vidéo ainsi qu'un autre bon site pour saisir le contenu vidéo, - le coller dans votre site. Et il y a toutes sortes de widgets pour Twitter et Foursquare dans toutes sortes de sites sociaux. - OK, - alors revenons au code maintenant. 13. Formes: - Ok, - alors nous allons ensuite créer un formulaire de contact et vous pouvez voir que j'ai déjà créé quelques - commentaires dans le code ici pour montrer où cela va. - Alors allez juste entre ces deux commentaires en ligne, - 30 là, - et nous allons commencer avec notre élément de formulaire, - qui est une étiquette de formulaire d'ouverture et de fermeture comme maintenant, - à l'intérieur de la balise de formulaire d'ouverture, - nous avons pour avoir deux attributs. - Nous devons spécifier notre méthode, - qui va être post. - Et la prochaine chose est l'action, - qui est le fichier qui reçoit tout ce qui est soumis dans le formulaire en ce moment, - je vais juste mettre le hashtag ou le symbole de la livre. - C'est juste décaler le numéro trois. - C'est juste pour être un espace réservé. - Tu pourrais même le laisser vide si tu veux. Donc plus tard dans un exercice futur, nous allons pointer ça vers un fichier spécifique au verso qui va réellement traiter ce formulaire et envoyer un e-mail à la personne désirée. Donc plus tard dans un exercice futur, nous allons pointer ça vers un fichier spécifique au verso qui va réellement - Donc, dans ce cas, - on n'est qu'une sorte de cartographier que le front end. - Nous faisons juste le HTML impliqué dans la mise en service de ce formulaire. - Donc pour l'instant, - nous n'avons pas vraiment à nous inquiéter de l'action. - On va juste laisser ça, - hum, - comme une sorte d' espace réservé. Ok, donc à l'intérieur de ce formulaire, j'aimerais mettre quelques informations que j'aimerais créer quelques entrées, pour que les gens puissent mettre leur nom, leur email, leur téléphone numéro, - et aussi un bref message à moi, - puis cliquez sur le bouton Envoyer. - Donc j'aimerais le mettre ici, ils peuvent taper, - et je vais donner un type de texte parce que je veux qu'ils y mettent des caractères alphabétiques . - Je veux qu'ils puissent taper leur nom ici. - Il est donc important que je donne aussi cela en nom afin que lorsque le formulaire est - soumis, - il puisse stocker cette information dans un type de nom. - Et bien que ça sonne redondant, - je vais l'appeler nom parce que c'est ce qu'ils écrivent leur Je donne ça - entrer un nom de nom. Et la raison pour laquelle c'est leur nom d'utilisateur. - C'est le nom de la personne qui envoie des e-mails, - en fait. - C'est une meilleure façon de décrire ça. - Et celui-là, - nous allons aussi donner un texte réservé. - Disons l'espace réservé, - et on va dire, - votre nom. - Dis ton nom. - C'est vrai ? - Ils savent que leur nom y va. - Hum, - comment rendre cela nécessaire ? - C'est vrai. - Nous disons nécessaire que nous écrivions le mot requis à la fin là comme ça. - Je vais enlever l'emballage des mots. - Faites défiler un petit peu comme ça. - D'accord. - Et puis on passe à la ligne suivante et on va créer une autre entrée, et on va lui donner un type d'email. Donc, Donc, le type d'email est très utile quand vous essayez d'obtenir l'email de la personne. - Et la raison pour laquelle est-ce en html cinq navigateurs compatibles ? - Il va valider si c'est réellement une adresse e-mail ou non, - et il l'empêchera de soumettre. - Si quelqu'un tape quelque chose qui ne ressemble pas à une adresse e-mail. - D'accord, - et peut-être, - vous savez, - peut-être que l'email devrait être nécessaire parce que nous voulons utiliser c'est comme un expéditeur de contact. - Et comment pouvons-nous savoir à qui envoyer un message à moins qu'ils ne soient capables de le mettre ? - Très bien, - faisons une autre entrée ici. - Et celui-là, on va faire un autre type. - Disons que celui-ci est un type de tell qui fait apparaître le Non, - le pavé numérique sur différents appareils. - Quand vous cliquez à l'intérieur de cette entrée, - il devrait faire apparaître le pavé numérique en disant type de téléphone, - et nous allons donner à ce gars un nom aussi et de l'associer et nous allons dire, - le téléphone est la façon dont nous étions inquiets. - Cela et puis nous dirons l'espace réservé et pour l'endroit plus vieux ici dira téléphone, - Et nous allons également leur mentionner dans l'espace réservé que c'est facultatif. - Ils n'ont pas vraiment à nous le dire à moins qu'ils ne le veuillent. - Ok, - et voyons. - Donc, en fait, - c'est tout. - Après que nous avons le nom de téléphone, - e-mail et ensuite, - nous voulons qu' ils soient en mesure de mettre dans leur message. - Donc, ce que je vais faire est de créer une zone de texte comme ça en utilisant le texte d'ouverture et de fermeture - zone tag comme ça, puis à l'intérieur de cette zone de texte. - Je vais lui dire de quelle taille. - Je dirai que ça devrait être au moins 10 lignes de texte. - Vous savez que vous pouvez appuyer sur retour 10 fois 10 lignes de type s'adapteront avant que nous obtenions une barre de défilement - pour apparaître, - Hum, - et nous allons donner à ce gars et le nom aussi dira nom égal message. - Très bien, - Et puis, - enfin, - nous allons ajouter une entrée avec un type de soumission et qui nous donnera notre bouton de soumission. - Et afin d'étiqueter le bouton afin que nous puissions lire du texte dessus écrira le mot envoyer - le bouton comme ça, - et cela devrait être bon pour aller. - Donnons ceci une sauvegarde et revenons au navigateur et rafraîchissons Awesome. - Et ici, nous avons la carte I frame puis en dessous du formulaire que nous venons de créer. - Donc si je zoome sur cette année, vous pouvez voir que c'est pas encore stylisé. On va embellir ça et le rendre beau plus tard, en utilisant CSS. On va embellir ça et le rendre beau plus tard, - Mais pour l'instant, - c'est juste une sorte de générique comme, - forme empilée horizontalement pour que nous puissions cliquer à l'intérieur d'ici, - et nous pouvons taper un nom. - Je m'appelle Bob. - Je peux cliquer à l'intérieur de l'email. - Vous pouvez voir le texte de l'espace réservé disparaîtrait quand je tape, - et on peut dire que mon email est Bob at bob dot com. - Les numéros de téléphone optionnels, donc je n'ai pas à taper ça. Si je le voulais, serait quelque chose comme ça, je suppose. - Et puis je peux taper un message comme Hello ? - Quelque chose comme ça. - Hum, - maintenant, - certains de ces champs sont obligatoires, - par exemple, - si je ne tape pas un nom et que je clique sur l'envoyer dit, - s'il vous plaît remplir ce champ. - Donc, c'est ce html cinq attribut requis amical que nous avons placé à l'intérieur il ya - me disant que je dois remplir cela avant va soumettre. - Et encore une fois, - si vous voulez être capable de styliser ça un peu plus, - um, - vous allez probablement finir par utiliser quelque chose comme JavaScript ou J coury plug dans stylisé - ces formes, - qui nous n'irons pas dans cette classe, mais peut-être dans une autre classe. - Ok, - donc ici nous avons le nom va remplir ça à nouveau. - Faisons celui-là qui a deux choses pour sa validation. - Numéro un dont nous avons besoin. - Donc, si nous ne tapons rien et qu'il devrait dire que c'est nécessaire si nous mettons aussi un email - adresse, - ça n'a pas de sens. - Comme si je mettais comme, - euh, - faux faux sucka. - Et puis nous essayons d'envoyer ça. - Il est dit, - S'il vous plaît entrer une adresse e-mail. - On doit mettre quelque chose comme Bob à Bob Dot Com. Je suppose que tu peux encore faire semblant, mais c'est un peu plus de travail. - Et puis quand nous soumettons, - il afficherait cette information dans le formulaire dans le fichier spécifique que nous listons dans l'action -. - Attribut. - Ok, - donc dans ce cas, - on vient de mettre un symbole de livre est un espace réservé. - Donc, quand je clique sur envoyer, - il actualise simplement la page. - Rien ne se passe vraiment là-bas. - Mais comme je l'ai dit un peu plus tard, - dans un futur exercice, - nous allons tous au moins vous donner un peu de backend pour faire cette fonction. - Ensuite, vous allez vouloir passer au prochain défi de code et implémenter ces nouveaux éléments que vous avez appris dans votre nouveau site. 14. Vidéo: - Salut, les gars. - C'est l'exercice 2.1, - et j'ai déjà téléchargé les fichiers ici Le code source, - et vous remarquerez que si vous regardez dans le dossier il y a quelques choses supplémentaires ici qui n'existaient pas auparavant. - Nous avons donc toujours les mêmes cinq pages HTML dans notre dossier Images. - Mais quelques nouvelles choses sont le dossier CSS maintenant. - Nous ne ferons pas grand-chose avec CSS dans cet exercice. - Dans le prochain exercice sera d'apprendre les fondamentaux de CSS et comment il fonctionne dans ce - exercice. - Nous allons juste utiliser un script CSS pré-écrit qui va aider notre HTML - cinq éléments fonctionnent partout. - Donc nous en apprendrons un peu plus à ce sujet dans un prochain exercice. - On va aussi insérer une vidéo dans cet exercice. - Donc, j'ai également fourni pour vous un dossier vidéo qui a un enregistrement. On dirait que l'artiste Larry Hale joue une chanson, Blue Shoes. - On a les deux formats ici. On a un dossier MP 4, et on a aussi un fichier O. G. V. - Donc, cela devrait fonctionner dans tous les différents navigateurs. - D'accord, donc pour commencer. - On peut faire glisser ces fichiers ici dans un texte sublime, ce que vous voyez que j'ai déjà fait. - Et je vais double-cliquer sur la page HTML du point d'index. - C'est la seule page sur laquelle on va travailler - cet exercice. - Donc, pour commencer, - allons de l'avant et allons à la section de la page où nous aimons ajouter notre vidéo et - je vais descendre ici Teoh Line 44 dans la section coin de l'artiste et nous allons aller de l'avant - et commencer par ajouter la balise vidéo d'ouverture et j'ajouterai la balise vidéo de fermeture là aussi - bien. - Maintenant, la balise vidéo d'ouverture. - Il peut accepter des noms d'attributs spéciaux. - Donc, pour passer dans une option, - vous pouvez dire des choses comme des contrôles. - Hum, - et tu peux juste le laisser comme une vidéo. - Mais si vous dites des contrôles comme ceci, - alors ce qui se passe est lorsque la page se charge, - il fera automatiquement la valeur par défaut. - Les contrôles vidéo seront visibles par opposition aux contrôles masqués. - Hum, - quelques autres options que vous pourriez passer ici est il y a des choses comme la lecture automatique, - par exemple, - vous pouvez spécifier si vous voulez qu'il joue automatiquement ou non. - Et il y a aussi une boucle. - Vous pouvez activer la boucle en disant Boucle pour cette vidéo particulière. - Je ne veux pas de boucle. - Je ne voulais jouer qu'une fois, - et ils devraient cliquer à nouveau s'ils voulaient jouer une deuxième fois. - Et en termes de lecture automatique, - Je ne suis pas un grand fan de la lecture automatique parce que parfois il attrape les utilisateurs hors de garde s'ils vont à - votre page et ils entendent la vidéo jouer quelque part et ils ne sont pas tout à fait sûr où la vidéo - est. - Donc je vais aller de l'avant et laisser l'utilisateur trouver la vidéo et cliquer sur le bouton de lecture eux-mêmes -. - S'ils sont intéressés à le regarder. - Je pense que je vais laisser des contrôles là-dedans parce que je veux m'assurer que mes contrôles sont toujours visibles. - Ok, - c'est un bon début. - Donc la prochaine chose que nous devons faire est que nous devons lier à nos fichiers vidéo source, - et vous pourriez voir que j'ai créé les dossiers vidéo que j'ai mentionnés avant et à l'intérieur - dossier ont deux fichiers chaussures bleues et P quatre et chaussures bleues dot gv, - donc je vais juste aller de l'avant et commencer par créer l'élément source là, - et nous allons utiliser l'attribut SRC deux points vers l'emplacement spécifique du fichier. - Donc, dans ce cas, - ici je suis sur la page html de point d'index et je dois dire au navigateur exactement où ce - fichier vidéo existe. - Alors rappelez-vous quand nous liions deux images, - nous avons dû dire au navigateur un navigateur. - Je sais qu'on est sur la page d'index, - et je veux que tu rentres dans le dossier des images et que tu affiches une image particulière. - Même chose avec les vidéos, - les vidéos sont dans leur propre dossier. - Donc, je dois dire au navigateur d'abord aller dans le dossier vidéo en disant barre oblique vidéo comme - ça . - Et puis je vais lui dire de jouer aux chaussures de soulignement bleues point 4, juste comme ça. - Et nous allons également spécifier le type Videophile ici est slash vidéo mp quatre. - Ok, - parfait. - Donc ça va marcher pour tous mes dispositifs de safari, pas vrai ? - Comme, - euh, - ordinateurs Mac, - iPad, - iPhones et Internet Explorer vont être pris en charge avec cette première balise source. Donc, pour d'autres navigateurs comme Firefox, Chrome, etc., je vais avoir besoin d'un lien vers cet autre format vidéo. - Donc, l'autre est appelé slash vidéo blue underscore shoes dot org v et le fichier - type ici est slash vidéo o. - G est le nom du Kodak là-bas. - Ok, - donc la raison pour laquelle le Kodak s'appelle Ogi Theo ra et um o g a le Codex pour ce format peut - être à la fois audio ou vidéo. - Hum, - si souvent, - pour l'extension audio, - vous verrez oh dot org. De temps en temps, je vois une vidéo avec cette extension de fichier. - Mais la plupart du temps, - les gens ont nommé l'extension vidéo comme point gv donc pourquoi c'est différent ici. - C'est la barre oblique O g et les fichiers vidéo. - 00 gv. - Je pensais le mentionner au cas où vous seriez confus à ce sujet. C' est là que la solution de retour entre en jeu. - Donc, pour les vieux navigateurs qui ne supportent pas les éléments vidéo um, - Je pourrais intégrer un flash. - Je pourrais télécharger un lecteur vidéo flash gratuit si je le voulais. - Et mets ça ici. - Je crois que ce que je vais faire, c'est écrire quelque chose ici. - Et ça va seulement pour que je vais écrire un message à l'utilisateur ici. - Et ce message ne va apparaître que si pour une raison quelconque, - le point douloureux un de ces fichiers source ne se charge pas. En d'autres termes, s'ils ne peuvent pas lire la vidéo, ils verront ce message. - Donc je vais juste dire, - um, - que leur navigateur ne supporte pas la période vidéo HTML cinq et sera aussi poli que nous pouvons, - donc nous allons dire s'il vous plaît mettre à niveau votre période de navigateur. - Ok, - on peut même être un peu plus gentil, - et on peut leur donner un lien vers l'endroit où ils peuvent mettre à jour leur navigateur. - Alors allons de l'avant et envelopper un lien autour de ce texte ici qui dit, - Mettre à niveau votre navigateur de sorte que quand ils cliquent sur la mise à niveau de votre taxe de navigateur, - qui les mènera à ah, - site convivial. - Cela va les laisser télécharger comme une version plus récente d'Internet Explorer ou une version plus récente de Firefox ou safari, - si c'est ce dont ils ont besoin. Comme vous vous en souvenez, nous utilisons la balise A pour créer un lien. Si j'entoure ce type comme ça, je peux faire l'ouverture et fermer un tag autour du texte que je veux être. - Le lien, - qui est de mettre à niveau votre navigateur, puis à l'intérieur de l'ouverture d'une balise. - Je peux spécifier où il est lié, - donc je vais aller de l'avant et dire, - um H ref, - Et il y a un très bon site que j'aime utiliser, - qui est à http deux-points slash, - slash et c'est appelé. - C'est assez facile à retenir. - Ça s'appelle « Browse Dot com » heureux, - et vous pouvez voir où cela les emmènerait. - Laissez-moi copier ceci et à travers cela dans mon navigateur très rapidement. - On va aller de l'avant et le rythme. - Donc, naviguer heureux dot com vous emmène à cette page où vous pouvez accéder à la dernière version de - n'importe quel navigateur que vous cherchez et vous pouvez le voir montre toujours la dernière version - numéro ici. - Ok, - pour que les gens puissent choisir, - vous savez, - un navigateur particulier s'il est à l'aise avec elle. Donc, au lieu de se lier à Flash, on va aller de l'avant et leur donner l'accès à la mise à niveau de leur navigateur, ce qu'on espère qu'ils feront. on va aller de l'avant et leur donner l'accès à la mise à niveau de leur navigateur, - Ok, - hum, - ajoutons aussi une dernière chose, - je ne veux pas qu'ils quittent mon site web. - Je veux garder l'onglet de mon site Web ouvert. - Donc en disant le trait de soulignement Blank. - Vous vous souvenez que cette cible d'attribut et une valeur de Underscore Blank feront en sorte - que lorsqu'ils cliquent sur ce lien, - il ouvrira une nouvelle fenêtre de navigateur. - Alors je vais de l'avant et sauve ça. - Alors testons ce type dans le navigateur. - Alors je peux apporter ce code ici et on va juste glisser et déposer ce type en chrome. - On est sur la page d'index. - Je vais juste jeter ça là-dedans. - Cool. - D'accord, donc voici, - euh, - ma tête mes images. - Et ici, - si je fais défiler vers le bas, - c'est en fait ma section artiste sur la page et vous pouvez voir les contrôles du navigateur sont - montrant et je peux cliquer sur jouer Awesome. - Merci, Larry. C' est Larry qui joue de la guitare, et il s'avère que ça a marché. - Bon travail. - Et ça, je peux vous assurer que ça va marcher dans tous les navigateurs. - Tu peux aller de l'avant et le tester. - Ce type va travailler sur tous les appareils. - Ok, - On va juste déplacer ça sur le côté pendant une seconde, - va revenir dans le code. - Donc c'est comme ça que vous intégrez la vidéo. - Et bien sûr, - si vous incorporez l'audio serait le même processus sauf que vous utiliseriez la balise audio - au lieu de la vidéo et pour le fichier source. - Bien sûr, - vous seriez lié à un, - euh, - un fichier audio comme un MP 3 et un O G - quelque chose comme ça. - Et je suis juste de la même manière qu'il existe des solutions JavaScript pour faire fonctionner un seul - fichier vidéo et tous les différents navigateurs. - Il y a aussi des joueurs Js de travail, - des lecteurs JavaScript pour les éléments audio aussi, - donc vous pouvez être intéressé de vérifier cela. 15. Préparer pour HTML5: - D'accord. - Donc, pour la prochaine partie de l'exercice, - allons de l'avant et incluons quelques balises sémantiques HTML dans notre mise en page. - Donc, la première étape est de préparer notre document pour les anciens navigateurs. - Donc, même si vous savez, - comme nous l'avons regardé dans les diapositives, - la plupart des navigateurs modernes prennent en charge HTML cinq balises sémantiques, - cependant, - certaines anciennes versions de, - um Firefox safari et chrome et plus anciens versions d'Internet Explorer comme Internet Explorer - huit et ci-dessous. - Je n'ai pas de soutien. - Ils sont réellement créés avant la création de HTML 5, donc ils n'ont pas de support pour ces balises sémantiques maintenant. - C'est en fait assez indolore et simple d'ajouter ce support. Donc ce qu'on peut faire, c'est aller dans la section de la tête ici, et la première chose que nous allons faire est d'ajouter du soutien pour le feu, - Fox, - Chrome et Safari. - Et nous allons le faire en liant à un fichier CSS, - et nous allons en apprendre beaucoup plus sur, - euh, - CSS dans les exercices à venir. - Mais pour l'instant, - nous allons simplement lier à un code CSS pré-écrit qui aidera ces éléments -. - Il est Html 5. - Les éléments sémantiques s'affichent correctement dans tous les différents navigateurs, - donc la première chose que je veux faire est que nous voulons créer un lien ici en haut de la page, - et ce lien va pointer vers le fichier CSS point normalisé que j'ai inclus pour - toi. - Je dois ajouter quelques attributs ici. - Le 1er 1 que je veux ajouter est appelé R E L. - Ce qui signifie relation. - Cela dit, - dit au navigateur le type de lien, - la relation du lien, - et nous allons lui dire que c'est une feuille de style est le type de lien, - et nous devons aussi le pointer vers un emplacement. - Donc nous utilisons un brouillon deux points ceci vers l'emplacement spécifique du fichier. - Je t'ai donné un dossier CSS. - Nous devons dire au navigateur d'aller dans le dossier CSS parce qu'après tout, - nous sommes sur la page d'index ici. - Donc, nous devons dire, - Hey, - navigateur, - aller à partir de la page sur laquelle nous sommes, - qui est Index, - aller dans le dossier CSS comme ça et charger ce fichier qui est appelé normaliser point CSS. - Ok, - donc si nous devions regarder normalisé ce CSS, - il y a en fait tout un gâchis de codage ici beaucoup de code qui implique l'utilisation de CSS - style et tous ces styles CSS. - Leur but principal est de faire en sorte que le texte et les éléments affichent le même dans tous les - différents navigateurs. - Et on en parlera un peu plus tard quand on couvrira CSS. - Mais la principale chose que nous voulons utiliser ce fichier est juste en haut de la page. - Ici, ça commence en ligne. - 10. - Alors ne vous inquiétez pas si vous ne comprenez pas encore tout le code CSS, - nous allons certainement revenir à cela à une date ultérieure, - et nous allons décrire en détail comment tout cela fonctionne. - Mais il y a deux sections importantes ici. - Hum, - et cette première partie ici est essentiellement de corriger la façon dont les choses s'affichent dans les anciens navigateurs. - C'est donc une liste de toutes les balises sémantiques HTML communes que vous utiliserez de temps temps pour la mise en page. - Et nous devons dire au navigateur de les afficher d'une manière particulière. - On va aller plus en détail plus tard sur les différentes façons d'afficher les éléments. - Mais essentiellement afficher Block indique au navigateur que ces éléments doivent afficher ah - vertical l'un au-dessus de l'autre et qu'ils ne devraient pas être en mesure d'afficher côte à côte. - Cela leur donnera de l'espace physique et les fera afficher comme une boîte, - essentiellement comme un bloc sur la page où ils ne seront pas en mesure de s'adapter côte à côte -. - Quand vous en mettez un sur une ligne particulière qui prendra toute la ligne. - Et nous avons aussi votre correction pour la toile audio et les éléments vidéo sont élément vidéo - ici affichera dans le bloc de ligne, - ce qui signifie qu'il aura quelques caractéristiques d'un élément de bloc, - mais il sera en fait capable de afficher côte à côte avec des éléments. Ne vous inquiétez pas pour ça, ne vous inquiétez pas trop. - Nous reviendrons quand nous discuterons du modèle de boîte, - et nous expliquerons en détail ce que signifie l'affichage et comment cela fonctionne. - Ok, - donc je ne veux pas trop toucher CSS à ce stade. - Tout est, - vous avez vraiment à comprendre est qu'en établissant un lien vers ce fichier CSS pré-construit point normalisé - CSS, - cela permettra Firefox safari et chrome versions plus anciennes de ces navigateurs pour afficher ces - ces HTML balises sémantiques correctement Ok, - de sorte que prend soin de tout le monde. - Sauf pour Internet Explorer. - Ok, - Donc j'ai mentionné dans un, - euh je suppose que dans les diapositives précédentes que pour Internet Explorer, - nous pouvons inclure un fichier JavaScript qui permettra HTML cinq éléments de travail dans une ancienne - version d'IE. - Donc Internet Explorer 87 et six et ci-dessous ne prennent pas en charge html cinq éléments. - Donc, on doit dire au navigateur. - Hé, - navigateur. - Si vous êtes Internet Explorer, - s'il vous plaît lien vers le script. - Alors sortons une annonce dans une balise de script pour qu'on puisse dire un script. - Et c'est la balise que nous allons utiliser Toe lien vers les fichiers JavaScript a une balise d'ouverture et - fermeture comme ça. - Et ici, vous êtes en fait libre d'écrire du JavaScript. - Si tu veux. - Dans cette section, - nous allons en fait utiliser le lien de balise de script pour un fichier javascript externe. - Et nous avons utilisé le SRC L'attribut source deux points vers ça. - Euh, - non, - ce genre de lien, - vous savez, - finalement, - vous pouvez mémoriser ça - mais plus souvent que vous ne le savez, - plus probable que vous êtes va être le lien vers elle via Google. - Donc, si vous allez à Google et que vous tapez HTML cinq XM, - il va venir avec un lien comme celui-ci, - qui est que je sais est à http deux-points slash html cinq XM dot google code - dot com slash SV et slash tronc slash html cinq points Js je sais que c'est, - Ah, - c'est à peu près une bouche, - Mais si vous avez lié à cela, - ce fichier ici fera HTML cinq éléments fonctionnent correctement dans Internet Explorer. - Ok, - dans les versions précédentes d'Internet Explorer, - Internet Explorer neuf et supérieur, - supposez-vous déjà ces éléments ? - Maintenant celui-ci le fait fonctionner pour les anciennes versions de Firefox, - chrome et Safari. - Celle-ci est sur Lee pour Internet Explorer 8 et plus bas. - Ce ne serait pas bien si je pouvais juste dire au navigateur que d'utiliser celui-ci si c'était - Internet Explorer ? - De cette façon, - je ne perds pas de temps de chargement, - donc si je suis Firefox, - ça ne dérangera même pas les orteils charger celui-ci. - Ce serait génial, n' est-ce pas ? - Donc, il s'avère que nous pouvons réellement le faire parce qu'il y a quelque chose appelé une instruction - et si conditionnelle, - qui existe dans Internet Explorer. - Donc Internet Explorer a la capacité de reconnaître ce particulier si conditionnel. - Donc, la façon dont nous obtenons d'autres navigateurs pour ignorer cela car nous commençons comme si nous écrivons un - commentaire dans le code. - Donc nous disons, - vous savez, - comme - euh, - moins de symbole, - point d'exclamation, - tiret, - tiret comme ça. - Et puis ici, - nous aurions un commentaire. - Le commentaire se terminerait comme ça. - C'est vrai ? - Um et puis ce que nous devons faire est pour qu'Onley Internet Explorer traite ce code - ici dans ce commentaire est que nous créons un conditionnel utilisant des parenthèses donc nous utilisons des crochets, ce qui est, - um, - c'est juste à droite de la lettre p sur votre clavier. - Donc, vous voulez aller juste à la droite de la lettre p sur le clavier et vous voulez faire ouvrir - crochet fermer le crochet Maintenant, - à l'intérieur de ces parenthèses, - nous pouvons écrire une déclaration et si conditionnel, - affaiblir, - Dis si et nous voulons dire Ah, - ça signifie moins que et nous allons dire si moins que la version 9 d'Internet Explorer. - En d'autres termes, - si c'est huit ou quoi que ce soit en dessous, - alors nous allons faire le code ici. Donc la façon dont on fait ça au pied c'est qu'on va faire un point d'exclamation et plus grand que le symbole comme ça. Donc la façon dont on fait ça au pied c'est qu'on va faire un point d'exclamation et plus grand - Hum et cela finira avec succès la déclaration if ici comme ça. - Et puis ici, - nous avons juste besoin d'ajouter un autre ensemble de crochets et nous commencerons par dire plus grand que - point d'exclamation, - support ouvert, - support fermé comme ça et à l'intérieur d'ici, - nous allons mettre les mots Et si et cela finira la déclaration si je sais que c'est une sorte de désordre regardant ici, - mais ce qui se passe est le navigateur descend et si le navigateur est Firefox ou chrome ou - safari, - il semble que tout cela soit un commentaire. - C'est comme si c'était juste un commentaire dans le code. - Tout comme j'ai un commentaire ici qui me dit que c'est un en-tête et un commun ici qui est - nous dire que l'exercice spécifique était dans, - Donc il va juste ignorer tout cela maintenant. - D'un autre côté, - si c'est Internet Explorer huit, - euh, - en fait, - si son Internet n'importe quelle version d'Internet Explorer, - il va lire le si conditionnel, - il viendra et ils diront qu'il s'agit d'un commentaire. - Il y aura comme non ouvert, - ce n'est pas un commentaire. - En fait, - il y a des crochets ici, - et c'est comme ça que l'Onley Internet Explorer lit cette section particulière de la page. - Donc, il va dire si moins qu'Internet Explorer 9, - alors il va exécuter ce script. - Ça va être lié à ce fichier de script. - Et puis nous disons, - Fin si ici pour finir cette déclaration conditionnelle. - Très bien, - donc vraiment, - ces deux lignes de code ce lien vers ce CSS normalisé et je suis en train de lier à ce - fichier JavaScript sont tout ce dont nous avons besoin pour faire fonctionner HTML cinq éléments et même le plus ancien, - la plupart anciens navigateurs. 16. Les éléments de séduits HTML5: Donc maintenant nos pages prêtes, Nous pouvons écrire ces html cinq balises sémantiques et tous les navigateurs vont les voir. Donc, le 1er 1 que je veux faire est que je veux parler de l'en-tête. Donc, nous avons mentionné l'en-tête va en haut de la page ici. Vous en général, bien qu'il n'ait pas à le faire. Mais c'est une balise que nous allons entourer le concept avec, comme, cela dira l'en-tête slash ouvert. Maintenant que j'ai entouré cette section de code, je vais dans la tanière. Donc je vais mettre en évidence ce code ici et je vais vous montrer un raccourci ici. Donc, si vous mettez en surbrillance une section de code si vous tapez la touche de tabulation, elle indentera toute cette section pour vous. Vous pouvez également utiliser la commande, euh, ouvrir le crochet et fermer le crochet pour déplacer ce type autour de Mac. Ou vous pouvez utiliser le support ouvert de contrôle et fermer le support sur les fenêtres. Vous pouvez également aller à chaque ligne et simplement appuyer sur la touche de tabulation si vous le souhaitez. Donc juste pour montrer l'imbrication, j'aime inventer chaque fois que je place quelques éléments à l'intérieur d'un autre juste pour montrer la relation qu'il est à l'intérieur de cet autre. Ok, c'est un bon début. Donc, nous venons de dire au navigateur que ce h un et H deux et ces liens sont des liens de navigation que ces air tout à l'intérieur de la section de tête. Je vais aller de l'avant et allumer les mots, pour que tout soit plus facile à voir. Ok, c'est juste ma navigation qui les entoure. Donc, euh, maintenant nous avons dit que c'était l'en-tête. Regardons d'autres éléments. On peut aller ici. Et nous pouvons spécifier que ces liens sont la navigation principale du site. En disant Knave juste ici et nous pouvons ajouter un lien de serrage juste là. Et je peux entrer ici et dans la dette que la navigation est en retrait. Et maintenant, nous avons la section de la tête et à l'intérieur de la tête, j'ai ma navigation principale. Cela sert donc à quelques fins. C' est sémantiquement dire au navigateur et aux appareils qui diffusent cet air. Explorer ce contenu que cette section spécifique de la page est important que ce soit le principal air d'identification pour le contenu de ce site. Donc les H à l'intérieur de l'en-tête vont avoir le plus d'importance. Ces termes clés que vous mettez là et parce qu'il n'a pas de moteurs de recherche, sachez que c'est la section de la page qu'ils peuvent trouver des liens vers d'autres pages et ensuite peuvent aller explorer le contenu d'autres pages. outre, Enoutre,en fait, il crée esthétiquement ou physiquement une boîte. Alors maintenant que nous avons ces boîtes comme Header et Knave, c'est comme ça que je suis capable Teoh, Select the Knave et je peux utiliser CSS pour dire au knave d'être une couleur de fond de vert. Mais alors je veux que l'en-tête ait une couleur de fond de bleu ou quelque chose comme ça. Donc, la façon dont nous pouvons positionner le contenu et le styliser dans des boîtes ou des conteneurs séparés est d'utiliser ces éléments. Couper. Euh, regardons aussi un autre élément HTML appelé Groupe H. Le groupe H est donc utile lorsque vous avez plus d'un titre et qu'ils sont en quelque sorte leurs liens ensemble. Ils sont destinés à faire partie sémantiquement du même message ou ont la même signification. Donc, en gros, comme la façon dont vous lisiez ceci, c'est que vous lisiez des chaussures Z H W. Tout est comme un mot. Mais si je veux que ce texte soit plus grand et qu'il ait plus d'importance. Est-ce que le H w est que le mot chaussures ? Je peux le mettre dans sa rubrique de niveau supérieur. Donc ce type est dans chacun d'eux. C' est un H 2. Cependant sémantiquement quand vous lisez ceci, vous lisez C'est une sorte de chose. Chaussures CHW. Donc, le groupe H indique à un navigateur qu'il s'agit d'un regroupement d'en-têtes. Ok, donc nous avons l'en-tête h groupe avec le nom de la société, et ensuite nous avons notre navigation. Cela nous amène à toutes les pages. Ok, c'est vraiment facile de repérer ces étiquettes air tous ces, vous savez, ces éléments sont uniques pour qu'on puisse les repérer n'importe où sur la page. Si vous faites défiler de haut en bas, vous pouvez dire, Oh, Oh, hé, il y a l'en-tête. Ok, passons à la section suivante. Celle-ci s'appelle la section des ventes. Donc c'est une section principale de la page sémantiquement tout dans cette page se rapporte à une vente, donc je vais utiliser les éléments de section qui feront une boîte. Cela entoure ce contenu d'une boîte et suggère qu'il s'agit d'une section unique de la page comme ça. Donc j'ai juste mis en retrait à nouveau en soulignant, et je l'ai fait. Ah commande support fermé, la clé de support carré. C' est juste deux touches à droite de la lettre p sur votre clavier. Sur et encore, vous pouvez également entourer et appuyer sur la touche de tabulation comme ça pour la déplacer. D' accord, euh, regardons un autre élément sémantique appelé figure pour qu'on puisse regarder la figure et la figure. La figure de légende est une façon d'entourer quelque chose et de suggérer que c'est, ah, figure et figure informationnelle sur la page. Donc, nous allons aller de l'avant et utiliser ce tag ici appelé Figure et nous allons venir ici et nous allons fermer cela et généralement cela autour d'un type de média, comme s'il s'agit d'un diagramme ou d'une image de quelque chose qui se rapporte au contenu ci-dessous. Tu peux étiqueter ça avec la figure, ok ? Et cela ajoute également une petite boîte autour de l'image dans ce cas, autour de l'image, afin que nous puissions le styliser d'une manière spécifique si nous le voulions. Une autre chose agréable à ce sujet est que cela a une étiquette d'ami que vous pouvez mettre à l'intérieur de celui-ci. Ce qui s'appelle la légende de figue comme ça. Ainsi, la légende de la figure vous permet d'ajouter une légende pour l'image ci-dessous et d'affaiblir le style. Ceux-ci et sémantiquement, il suggère que cette légende est liée à l'image à l'intérieur de cette figure. Donc, ils vont ensemble normalement pour les légendes. Tu as mis quelque chose comme, hum, que se passe-t-il dans l'image ? Détails explicites sur l'image ou un titre, Parfois un titre et l'auteur. Je n'ai pas vraiment d'auteur Tytler à mettre ici. Je vais juste aller de l'avant et écrire que c'est une, euh, une image libre de royauté de www dot s xy dot h u. donc ceci est un site de photographie de stock gratuit que j'ai obtenu cette image d'ici afin que vous puissiez voir la structure ici est figure, et puis nous pouvons avoir une image ou une vidéo ou quelque chose à l'intérieur de celui-ci. Et puis nous avons une légende de figure pour cette image, et ensuite nous fermons ce chiffre. D' accord ? Nous pourrions également ajouter une section ici au coin de l'artiste. C' est une autre partie distincte de la page, et je viens de placer ces commentaires ici en tant qu'espaces réservés parce que nous n'avions pas auparavant ces sections ici, et je pense que je vais les laisser en place aussi parce qu'ils le rendent vraiment facile de voir où différentes sections ont commencé. Fin. Donc mettre en évidence tous ces gars et en bosse comme ça. D' accord. Et, hum, ici, on a la vidéo qu'on a créée il y a un instant. Et si je le voulais, je pourrais aussi avoir un chiffre par ici. D' accord ? Et à l'intérieur d'ici, je pourrais aussi avoir une légende pour cette légende de figue comme cette barre oblique. Voyons voir. Et c'est pour la vidéo. Et il est dit ici que l'artiste est Larry Hale. Donc j'ai vraiment eu ça de Ah, j'ai eu cette vidéo de l'archive dot org sous l'attribution Creative Commons. Licence. Cette vidéo est donc gratuite à utiliser et à partager. Merci, Larry, et je veux m'assurer que je lui attribue le mérite. Donc ici dans la légende de la figure, je peux lui donner le crédit en disant que c'est la chanson chaussures bleues et je vais aller de l'avant et mettre un droit d'auteur ici en disant, Mettez le symbole de copyright en disant et copiez. Et puis on fera cette photocopieuse. Et par l'artiste, qui est Larry Hill. 2007 est en fait quand il copier dans ce et nous allons ajouter un saut de ligne comme ça et je vais aller avant et juste dire que ceci est sous licence avec l'attribution de la licence 3.0 de la commune créative . Ce que cela signifie, c'est que je dois simplement lui attribuer que c'est Hiss. Je ne peux pas prétendre que c'est mon propre travail, donc je dois l'attribuer. Mais c'est gratuit pour moi de partager et d'utiliser. Merci, Larry. Shoutout orteil Larry pour ça. Ok, donc il y a ma figure, euh, et ma légende de figure ici et la fin de ma figure. Et puis voici mon titre et mon paragraphe et tout cela est à l'intérieur de ma section. C' est la section du coin de l'artiste qui commence ici et se termine là bas. Maintenant, j'ai une petite boîte soignée autour de cette section. Je peux également ajouter une section à la page de nouvelles. C' est un qui est long. J' ai beaucoup écrit là-dedans, et nous fermerons ça comme ça, et il semble que nous ayons aussi une section détaillée, et cette section détaillée l'a fait. Il est divisé en trois parties plus petites. J' ai donc une section de liens qui sont, euh, pour Eh bien, il n'y apas de lien vers n'importe où. J' ai donc une section de liens qui sont, euh, euh pour Eh bien, il n'y a Maintenant, je viens d'avoir Ceci est un détenteur de place, mais ces liens seront liés à tous ces différents sites sociaux, et ce sera au bas de la page juste avant le pied de page, ce qui fera dans un instant. Nous avons également quelques liens vers d'autres chaussures liées. Peut-être ces airs, comme des compagnies soeurs ou des amis de cette compagnie. Donc nous avons des liens là-bas, et nous avons aussi, genre, le numéro de téléphone et l'adresse, et des choses comme ça seront au bas de chaque page. Donc je voulais que ces choses soient, vous savez, tout est vraiment le même contenu. Ce sont tous les détails du site ici, mais je voulais que ces Teoh soient esthétiquement dans des boîtes différentes. Donc, si jamais tu veux jouer quelque chose dans une boîte, mais ce n'est pas le cas, ce n'est pas la même chose. Excusez-moi ? Il ne s'agit pas de différents types de contenu. Ensuite, vous n'avez pas vraiment besoin d'utiliser une balise de section. Donc ici, je peux juste mettre une section autour de ces trois petites boîtes. Donc, c'est une section sur les détails du site et à l'intérieur de cette section sont trois boîtes plus petites et j'utilise juste la balise Div. Ils sont aussi pour se montrer. C' est une boîte. C' est une autre boîte ici. Donc Div est une balise qui crée un conteneur. Et ce n'est pas une balise HTML cinq sémantique. Ça va juste me donner un moyen de styliser esthétiquement une boîte autour de chacune de ces parties de la section des détails. Ok, euh, en bas. Enfin, nous avons le pied de page, qui a ses propres balises HTML cinq sémantiques. Je peux mettre ça là-dedans. C' est ce qu'on appelle Pied de page, et on peut cliquer sur onglet pour inventer ce contenu là. Cool. Donc maintenant tout mon contenu est entouré des cinq balises sémantiques HTML appropriées. J' ai maintenant de petites boîtes autour de chaque section, et cela va le rendre beaucoup plus facile quand vient le temps de commencer à créer la mise en page et à déplacer les choses. Donc nous sommes tous prêts pour ça. Je suis déjà allé de l'avant et j'ai ajouté ces balises au reste des autres pages pour vous, afin que vous puissiez voir comment j'ai inclus ces balises sur les autres pages aussi. Ok, 17. métadonnées: - Donc la dernière chose qu'on veut faire est assez rapide. - Nous voulons juste ajouter quelques balises méta supplémentaires, - quelques métadonnées dans le haut de la section tête. - Alors je vais descendre ici. - Peu importe où tu les mets tant qu'ils sont dans la section de la tête. - Hum et on va y ajouter une autre balise méta ici avant d'utiliser la méta aussi. - Dites au navigateur le formatage des caractères sur la page. - Donc nous les avons mis en utf huit caractères formatés. - Et cette fois, nous allons lui donner quelques mots clés et une description. - Donc, pour commencer, dira meta name égal et dira des mots-clés comme ça. - Et puis nous allons mettre un espace et nous allons ajouter un autre attribut appelé Contenu comme ça et - à l'intérieur du contenu, - nous allons juste mettre une virgule, - liste séparée de termes qui se rapportent à cette page. - Cela va aider un moteur de recherche à associer des mots ou des termes spécifiques à cette page sur ce -. - Cela pourrait être différent d'une page à l'autre Vous savez, - une page sur laquelle vous pourriez avoir ces mots, - vous savez est des mots-clés et une autre page, - vous pourriez avoir un mots-clés complètement différents Donc c'est bon d'être précis. - Toe quel contenu existe sur cette page. - Donc, nous allons dire tous les termes que nous pensons que les gens pourraient éventuellement taper pour trouver cette - page. - Alors on va le dire. - Chaussures, - sandales, - pantoufles. - Cela pourrait nécessiter une réflexion de votre part pour vos propres projets individuels. - Vous devrez penser à quels termes vous conviendrez. - Voyons voir, - Qu'est-ce que je peux dire d'autre ? - Je dirai Sneakers Pied où ? Au cas où quelqu'un taperait deschaussures, chaussures, il pourrait les taper différemment. - Peut-être qu'ils le tapent comme ça. - Disons des chaussettes et peut-être des matériaux. - Comme s'ils tapaient des chaussures en toile ou, - euh, - eh bien, - disons, - comme des chaussures en daim. - Ils cherchent peut-être des lacets. - Um, - voyons. - Donc, nous allons dire, - aussi des choses comme l'entrepôt et le gros. - Vous devez donc penser à quels termes sont importants pour votre projet. - Je pense que c'est assez là. - Je pense que vous comprenez le point, - d'accord, - et ensuite on ajoutera aussi une description. - Donc, les mots-clés, - comme nous l'avons dit, ceux-ci sont utiles pour aider les moteurs de recherche à reprendre des termes spécifiques et - associer ces termes à cette page. - Nous pouvons également ajouter une description qui se fait en disant rencontré un nom, - description et contenu est l'endroit où nous tapons la description. - Donc c'est la description qui apparaîtra quand les gens nous chercheront dans un moteur de recherche. - Le moteur de recherche listera cette description sous le lien lorsque nous apparaîtrons dans les résultats. - Allons-y et disons quelque chose. - Espérons que rien de trop fromage. Mais je viens juste avec ces trucs à la volée si bien dire, - Ah, - tu es arrêté pour les meilleures affaires sur les chaussures les plus pointues d'aujourd'hui. - Cool. - Ok, - donc il y a nos meta mots-clés et notre meta description. - D'accord, c'est tout. - J'ai déjà ajouté ce code aux autres pages pour vous et, - hum, - maintenant des choses. - Il y a des choses commençaient à paraître bien, - leur propre piste allant de l'avant pour apprendre CSS et pour commencer orteil apprendre la mise en page de la page. - Merci d'avoir regardé. - Et ce que vous allez vouloir faire maintenant, c'est se sentir libre de passer au prochain défi de code, - où vous allez ajouter vos propres vidéos et balises sémantiques dans votre projet de site Web. 18. Le style de l'avant: - Salut. - Bienvenue de retour. - Voici les diapositives 2.2, - stylisant les fondamentaux CSS frontaux. - Maintenant, - dans les exercices précédents et les conférences, - nous avons appris à écrire du code HTML qui a fourni la structure et le contenu de nos pages web -. - Maintenant, - pour le reste du cours, - nous allons explorer CSS, - qui nous permettra alors de styliser tout ce contenu que nous avons créé. - Donc nous allons discuter de la syntaxe de CSS, - et plus tard, - nous allons passer à un exercice où nous allons montrer tous les différents - sélecteurs CSS qui nous permettront de sélectionner le contenu dans la page et ainsi ce qui nous permet de - le styliser. - Nous allons également explorer différentes valeurs de couleur que nous pouvons utiliser pour donner de la couleur à ces éléments. - Et nous allons aussi discuter des déclarations de fonds que nous pouvons utiliser pour le style sont la typographie. - CSS signifie feuilles de style en cascade. - Ils l'ont probablement nommé parce que CSS nous donne la possibilité d'appliquer un style à travers - plusieurs pages dans un site Web. - Donc, nous avons un seul endroit où nous pouvons en quelque sorte le style Cascada vers de nombreuses autres pages. - CSS a été créé est une meilleure solution pour styliser les éléments HTML au début. - Il était une fois, - nous utilisions HTML pour styliser html et c'était vraiment un énorme fardeau et beaucoup de travail. - Eso CSS intervient et nous donne à nouveau un seul endroit. - Nous pouvons aller changer toutes les couleurs de tous les paragraphes du site par opposition à - avoir à aller dans chaque paragraphe individuel et changer la couleur par élément. - Donc c'est vraiment un énorme gain de temps. - C'est amusant, - rapide et facile. - À mon avis, - il a, - ah, - syntaxe unique séparée du HTML. - C'est donc un langage complètement différent du HTML. - Donc tu dois jeter toutes les règles. - Nous avons appris comment HTML a écrit avoir à sortir de la fenêtre quand vous êtes - se concentrer sur CSS parce que c'est son propre langage unique. - Il existe trois formats distincts que vous pourriez voir l'apparence CSS Onda. - On parlera de chacun d'eux. - C'est le CSS en impôt et c'est assez simple. - Vous pouvez voir qu'il est composé de ce sélecteur ici, - la lettre P, - qui sélectionne toutes les balises P ou tous les paragraphes que nous pourrions dire dans nos pages HTML . - Maintenant ce qui suit le sélecteur Nous avons un ensemble d'accolades ici, - une ouverture et une accolade de fermeture comme ça et à l'intérieur des accolades, - c'est là que nous déclarons tous les styles qui affecteront tout ce que nous sélectionnons. - Donc, à l'intérieur des accolades ici vivent ce que nous appelons des déclarations, - et vous pouvez avoir une ou plusieurs déclarations autant que vous le souhaitez pour le style - élément sélectionné particulier. - Donc, dans ce cas, - vous pouvez voir que nous changeons la couleur du texte de tous les paragraphes en noir, - et cette déclaration particulière est composée de la couleur de la propriété. - Et puis on a donné la valeur à cette propriété. - Le noir et les propriétés et les valeurs sont séparées par un deux-points, - et elles se terminent toujours par un point-virgule. - Maintenant, le point-virgule est important parce que c'est ainsi que nous disons au navigateur qui ont été faits - définir une valeur pour cette propriété particulière. - Donc, si vous avez ah, - Siris de déclarations, - plusieurs déclarations pour cet élément ah, - paragraphe, - alors vous allez vouloir vous assurer que toutes les fins de ces déclarations se terminent par un - Semi côlon. - Comme je l'ai mentionné précédemment, - il y a trois formats CSS distincts et ceux-ci sont en ligne, - interne ou externe pour ce cours, - nous allons utiliser CSS externe sur, - et cela va nous donner le plus avantages et le moins de tracas et de problèmes - que nous travaillons sur notre site Web. - Donc c'est vraiment la meilleure pratique ou la méthode préférée. - Si vous construisez un site Web ou une application Web, - vous allez vouloir styliser votre contenu à l'aide de CSS externe. - Cela signifie qu'il y a une feuille de style CSS externe séparée ou un fichier CSS séparé qui est - style toutes les autres pages HTML. - Maintenant, c'est en contraste avec ces autres formats en ligne et interne, - dont on va vraiment vouloir éloigner les orteils. - Donc vous vous demandez peut-être si nous sommes si nous recommandons de ne pas utiliser ces formats 1ère 2, pourquoi vous l'apprendrais-je ? - Eh bien, - je pense que vous savez, - vous allez probablement finir par voir ces autres formats là-bas dans le monde réel quand - vous regardez un autre code de site Web ou si vous commencez à travailler sur le site de quelqu'un d'autre pour eux, - vous pourriez rencontrer un autre site en utilisant l'une de ces autres méthodes de CSS. - Donc, je pense qu'il est important que vous compreniez ce que c'est et que vous compreniez ce que sont les pièges et en utilisant ces autres formats afin que vous puissiez choisir la bonne solution - pour la construction de sites Web, - qui est externe. - Ceci est un exemple de CSS en ligne. - Donc, si vous regardez un balisage HTML et que vous voyez qu'il y a un attribut de style - à l'intérieur d'un élément particulier à l'intérieur de la valeur de cet attribut de style, - vous pouvez écrire des déclarations CSS. - Dans ce cas, - nous avons écrit la police de propriété style pointillé et lui donnant une valeur de métallique. - Et ce que cela va faire, c'est qu'il va changer le texte de ce paragraphe et Onley - ce paragraphe en un texte talique ou en italique. - Donc, le principal inconvénient là, vous pouvez probablement imaginer, - est que si vous ajoutez ce petit tag de style tous les paragraphes que vous vouliez être un talent - cela pourrait s'ajouter assez rapidement. - Peut-être que si vous avez un plus grand site Web avec des centaines de pages et que vous changez d'avis que vous - ne voulez plus que ce texte soit un tallix, - il faudrait entrer dans chacun de ces centaines d'éléments de votre site - mise en page et en changeant cela des métaux à la normale. - Donc, l'énorme inconvénient de la mer intérieure évalue qu'il affecte seulement l'élément que vous êtes - appliquer cela en ligne CSS à maintenant. - Un endroit que cela peut avoir du sens à utiliser est lorsque vous utilisez lorsque vous créez une lettre d'information HTML . - Mais c'est vraiment le seul endroit où tu verrais ça. - Où serait une bonne idée de l'avoir dans ce format ? - Ensuite, - nous allons regarder ça s'appelle CSS interne ou incorporé, - et vous pouvez voir cela apparaître à l'intérieur de la section de tête d'une page HTML. - CSS interne est composé de l'élément de style ici qui a le style d'ouverture et de fermeture - tag, - et à l'intérieur, - vous êtes libre d'écrire des sélecteurs CSS et des déclarations. - Donc, c'est juste, - ah, - plein d'instruction CSS ici qui est écrit à l'intérieur de cette balise de style d'ouverture et de fermeture, - et cela pourrait être interne à l'intérieur d'une page HTML. - Maintenant, - l'inconvénient de ceci est que cela ne va affecter que les paragraphes de cette seule - page. - Donc, quelle que soit la page html, - vous avez copié ce code dans la tête. - Cela affecterait tous les paragraphes de cette page. - Donc, ce que nous voulons vraiment, - c'est que nous voulons pouvoir, - vous savez, - changer la couleur de nos paragraphes à partir d'un seul endroit. - De cette façon, - si nous avons des centaines de pages sur notre site, - nous pouvons dire à tous les paragraphes de couleur à lire à partir d'un seul endroit. - Et si nous changeons d'avis, - nous avons un seul endroit où retourner pour dire à tous les paragraphes de changer en bleu. - Donc, pour ce faire, - nous avons besoin CSS externe externe CSS est ah est vraiment la meilleure solution pour les sites Web et Web - applications parce que nous créons un fichier séparé qui est dans ce cas le style point CSS et - nous sommes en lien vers ce fichier dans la section tête de notre document HTML. - Maintenant, - si nous devions ouvrir ce fichier et regarder à l'intérieur de ce fichier CSS point de style, - ça ressemblerait à quelque chose où nous écrivons un sélecteur puis des déclarations à - style ce sélecteur. - Donc, nous sommes en train de raconter tous les paragraphes. - Teoh, - vous connaissez tous les paragraphes du site large et toutes les différentes pages de notre site Web d'avoir - la couleur noire. - Donc, si nous avons 100 pages sur notre site, - chacune de ces 100 pages a ce code de lien en haut, - qui indique au navigateur quand il charge qu'une page HTML particulière à connaître ou à - référencer les styles CSS de cette autre fichier. - Et il va dans ce dossier et le lit. - Et il voit quelque chose comme ça qui dit à tous ces paragraphes sur l'ensemble du site pour - avoir la couleur noire. - Donc, cela est utilisé en liant un fichier CSS externe à toutes les pages HTML que nous souhaitons styliser - et les avantages. - Maintenant, vous avez un seul emplacement à partir duquel vous pouvez effectuer des modifications. - Ça va affecter les éléments à l'échelle du site. - C'est un Sfar comme je vais aller dans les diapositives. - Pour cette conférence, - n'hésitez pas à consulter l'ensemble complet des diapositives sur le lien PDF sous la vidéo, - et de cette façon vous pouvez utiliser les diapositives restantes. - Vous pouvez les regarder dessus, - et vous pouvez les utiliser comme un examen pour toutes les différentes couleurs de sélecteurs et de texte - mise en forme qui sera utilisée dans l'exercice. - Donc, nous allons passer à l'exercice maintenant, - et dans ce prochain exercice, nous allons créer une feuille de style CSS et ensuite nous allons apprendre - divers sélecteurs que nous pouvons utiliser pour styliser différents contenus dans nos pages Web. 19. Configurer une feuille de style externe: - ce sont les fondamentaux de l'exercice 2.2 CSS. - J'ai déjà téléchargé tout le code source pour cet exercice, - et je l'ai amené ici dans un texte aveugle pour commencer. - La première chose que nous voulons faire est que nous allons vouloir créer un fichier CSS externe - que nous pouvons utiliser pour styliser toutes nos autres pages Web HTML à partir de. - Alors allons de l'avant et allons au menu déroulant du fichier et dire nouveau fichier. Et alors même si c'est vide, on va juste le sauver de la chauve-souris dira enregistrer le fichier. - Et je vais m'assurer que cela est placé dans le dossier CSS. - Donc, vous voulez vous assurer que votre premier dans le, - um le répertoire de travail pour cet exercice, - qui est 2.2 tiret CSS de base, - et puis vous voulez vous assurer que vous allez à l'intérieur du dossier CSS là et à l'intérieur du - Dossiers CSS où toutes nos feuilles de style externes vivront et nous allons aller de l'avant et - nommez ça, - et je vais juste appeler ce style point CSS et cliquer sur Enregistrer. - Donc maintenant, si nous venons ici à la barre latérale du projet. - Nous pouvons voir qu'à l'intérieur du dossier CSS ici, nous avons nos feuilles de style dans le dernier exercice -, - prêt à normaliser point CSS et qui a été de définir tous les navigateurs à la taille du texte par défaut et - a également fait html cinq éléments sémantiques afficher correctement et des choses comme ça. - Donc c'était un code CSS pré-écrit que j'ai téléchargé orteil nous donne un bon départ, et ensuite on va laisser celui-là tranquille. - J'allais jamais gâcher les yeux normaux, - j'allais écrire tous nos styles personnalisés ici dans ce fichier CSS point de style ici. - Ok, - donc maintenant nous avons cette feuille de style CSS point de style en place. - La prochaine chose que nous voulons faire est que nous voulons passer par chacune de nos pages HTML et faire - assurez-vous que nous disons le lien orteil du navigateur retour à cette feuille de style. - Alors allons de l'avant et allons dans le dossier racine principal là-bas, - et je vais juste ouvrir la première page ici, - qui s'appelle catalogue dot html, - et je veux aller dans la section tête de cette page et je vais juste faire défiler vers le bas. - J'ai déjà fait un espace pour ce 13 en ligne ici. - Donc juste en dessous de mon lien vers le fichier CSS point normalisé, - La prochaine chose que je vais faire est de créer un lien vers ma feuille de style. - Maintenant est la balise ah link comme ce lien orteil vers des fichiers externes comme celui-ci et nous devons - mettre deux attributs différents ici. - Le 1er 1 que je vais mettre s'appelle R E l. - Une chance de relation. - Et je veux dire que la relation est que c'est une feuille de style, - que ce type de lien est une feuille de style. - Et puis la prochaine chose que nous voulons faire est que nous voulons lui donner l'attribut, - h, - ref, - et cela pointera vers l'emplacement de nos feuilles de style. - Donc, nous sommes sur la page html du catalogue point. - Je veux dire au navigateur d'aller regarder dans le dossier CSS pour le fichier appelé style dot - CSS Great. - Et on pourra sauver ça. - Maintenant, je peux copier et coller cette ligne, - et puis je vais juste aller de l'avant et ajouter cette ligne de code à toutes les pages du site - que j'aimerais avoir liée à cette feuille de style, - donc je vais juste mettre en évidence cela et faire une commande. - Voir pour copier si ce serait un contrôle voir sur Windows Command, - Voir sur Mac. - Et puis nous allons passer au fichier suivant, - qui sera contacté au HTML. - Et je vais faire Command V sur Mac le Coller ou Control V sur Windows à coller, - et nous allons enregistrer et je vais passer par la page d'index et coller et enregistrer, - et je vais à la page de prix et je vais coller et puis enregistrer le fichier. - Et enfin, - nous avons la page html point de vente, - et je vais coller le lien là et enregistrer aussi. - Donc maintenant toutes nos pages ici ont chacune ce lien vers cette feuille de style externe. - Donc, cela signifie que maintenant je peux commencer à entrer dans cette feuille de style, - et je peux commencer à écrire du code qui va style et affecter toutes ces différentes pages - à partir d'un seul endroit 20. Sélecteur de caractères: - Ok, - super. - Donc, nous venons de créer une feuille de style externe ici, - et nous pouvons maintenant ouvrir ce point de style de fichier CSS et à l'intérieur de celui-ci Ici, nous pouvons commencer à apprendre - pour écrire du code CSS. - La première chose que je veux vous apprendre en CSS est d'écrire un commentaire. - Donc, si vous regardez juste de la même manière que nous pouvons créer des commentaires et HTML, - nous pouvons également créer des commentaires en CSS comme un moyen de nous donner une petite note ou un - message dans le code et un commentaire. - CSS commence par la barre oblique avant, puis le Starkey, - qui est décalage dans le numéro huit. - Donc ce droit, - c'est un commentaire, - et vous devez terminer un commentaire en utilisant Star et Ford Slash. - C'est inversé du début à la fin. - Donc, vous avez slash star et puis les commentaires et CSS ils peuvent être sur une seule ligne ou ils - peuvent également être multi ligne. - Par exemple, - je pourrais frapper, - revenir et passer à la ligne suivante. - Hum, - et je vais juste aller de l'avant et dire, - par exemple, - que ces commentaires peuvent couvrir plusieurs lignes est longtemps que vous avez le début et la fin - les caractères correctement que tout peut aller entre ici, - et le navigateur l'ignorera. - Ok, - hum, - voyons. - Alors écrivons un autre commentaire pour nous rappeler la syntaxe CSS que nous avons discutée dans - l'ensemble précédent de Slides dit. - Vous vous souvenez que CSS commence par un sélecteur, - et ensuite c'est suivi par des accolades. - Et à l'intérieur de ces accolades, - vous êtes capable de donner quelques déclarations, - qui sont constituées d'une propriété dans une valeur. - Et si vous voulez mettre plusieurs propriétés pour un sélecteur, - vous pouvez simplement les écrire comme ça, - et vous pouvez vraiment écrire autant que vous le souhaitez. - Ça pourrait être court ou long tant qu'ils sont intéressés à mettre. - Finissons ce commentaire. - Ok, - Donc, - par exemple, - regardons un sélecteur appelé un sélecteur de type. - D'abord, - nous allons chercher un sélecteur de type. - Les sélecteurs de type Eso utilisent le nom de la balise pour aller trouver cet élément. - Donc, ce que nous pouvons faire est, disons, - vous savez, - hypothétiquement, - nous voulions aller sélectionner tous les paragraphes de notre site Web. - Nous pouvons utiliser la lettre P pour sortir et sélectionner toutes ces balises P afin que je puisse écrire un peu - commentaire à ce point que cela sélectionne, - Oh, - éléments P à l'intérieur de notre page. - Alors allons changer la taille du fonds pour chacun de ces paragraphes. - Donc, je peux dire que le tiret de police taille la propriété et est ensuite une valeur. - Je vais dire 14 pixels. - En termes de typographie de taille, - vous pouvez utiliser des pixels, - vous pouvez utiliser des points, - vous pouvez utiliser des pourcents, - et vous pouvez également utiliser la coupe EMS. - Donc pixels est une taille fixe 14 pixels est la taille sur n'importe quel écran ? Et puis nous avons aussi un système de points, que vous connaissez peut-être de différents programmes de traitement de texte. Et puis nous avons aussi un système de points, - Cependant, - J'aime essayer d'éviter d'utiliser des points. - Et la raison pour laquelle c'est que, - um, - par exemple, - 12 points taille dans Microsoft Word peut ne pas être la même taille que 12 points et feu Fox ou - même taille et safari. - Donc, - um, - taille des points pour la typographie, - malheureusement, - est un peu différent, - selon l'application dans laquelle vous êtes. - C'est pourquoi, - avec des pixels, - au moins vous savez exactement ce que vous obtenez. - Nous avons aussi pour cent, - ce qui est comme un montant variable. - Donc, - euh, - comme, - essentiellement, - - si je mets 100 % que ça se réfère à 100 % de la taille actuelle du texte. - Donc c'est en quelque sorte par rapport à la taille actuelle du texte. - Dans ce cas, - 14 pixels. - Um ou, - vous savez, - si vous n'aviez pas déjà spécifié la taille de la technologie de taille de paragraphe, - alors il serait juste hériter de cette taille du navigateur. - Donc, par défaut, - si vous ne spécifiez pas la taille du texte et un navigateur, - vous avez déjà remarqué que le navigateur fait juste une sorte de paragraphe une certaine taille et - fait des en-têtes une certaine taille. - Donc 100% serait dans ce cas, - manger, - vous savez, - être équivalent à ce que le navigateur décide est la valeur par défaut. - Si vous avez dit 200%, il le doublerait, - donc il ferait le texte deux fois plus grand qu'il est normalement. - Et, - bien sûr, - vous savez, - 50% serait comme la moitié de la taille quelque chose comme ça. - Ok, - nous avons aussi EMS et M est un reste de mesure des jours de composition, - et c'est aussi un montant qui est similaire à pourcentage dans ce, - de la manière qu'il est en quelque sorte relatif à la police actuelle. - taille, - par exemple, - un M dans ce cas serait égal à 14 pixels. - Si je leur disais, - ce serait l'équivalent de 28 pixels si j'avais déjà spécifié une taille de police ici, - euh, - et si je disais que vous connaissez 280.5 M ou 0.5 eux, - ce serait l'équivalent de sept pixels, - Hum, - et encore comme avant avec le pourcentage. - Si je n'ai pas, - vous savez, - spécifié une taille que ce montant va se référer à un m va se référer à n'importe quelle taille par défaut du texte du navigateur est, - et puis à M doublerait cette taille. - Ok, - donc les pourcentages et EMS sont en quelque sorte par rapport à la taille du texte initialement, - et les points et les pixels le changeront en un montant fixe. - Points est, - vous savez, - sorte d'un nombre qui change du navigateur du navigateur. - Donc, les pixels seraient vraiment notre méthode préférée pour faire une taille fixe, - um, - um, - texte. - Ok, - hum, - mettons en fait dans une autre propriété ici. - Disons, - en plus de changer la taille, - j'aimerais aussi changer la hauteur de la ligne, - donc je vais aller de l'avant et dire la ligne, - la hauteur du tiret et la hauteur de la ligne est l'espacement entre les lignes du paragraphe. - Alors allons chercher un EMS pour ça. - Donc un M dans ce cas serait égal à 14 pixels ou un interligne simple. - 1,5 équivaudrait à 1,5 espacement des lignes. - Et à M serait l'équivalent d'un double interligne, - qui serait, - dans ce cas, - 28 pixels à l'écart d'une ligne de texte à l'autre. - Allons-y et sauvegardons ça et vérifions ça. - Nous allons juste nous assurer que cela fonctionne et nous contestons pour nous assurer que notre style point CSS - page est lié correctement avec toutes les pages vues. - Allez-y et sauvegardez ici et revenons au navigateur. - Et regardons ce paragraphe ici et voyons si nous changeons l'espacement des lignes dans la taille du texte - donc je vais aller de l'avant et appuyez sur Actualiser, - et là vous pouvez voir que cela a fonctionné. - Ce texte est devenu plus petit. - Apparemment, - la taille par défaut avec laquelle je travaillais auparavant dans les paragraphes était un peu plus grande que - 14 pixels, - et l'espacement des lignes était également plus rapproché. - Donc, - vous savez, - peut-être que j'ai décidé que c'était un peu trop éloigné, - pour que je puisse revenir ici et changer ça. - Je peux ajuster cela à la volonté, - dire 1,5 les. - On va essayer un espacement de 1,5 ligne et peut-être que je veux le rendre un peu plus grand. - Je veux dire, - comme 16 pixels ou quelque chose comme ça. - Donc nous allons économiser et nous allons revenir à Chrome et rafraîchir comme ça, - et cela semble assez bon. - C'est assez lisible. - Avoir la hauteur de la ligne, - qui est l'espacement entre le bas de ce d et le bas de ce Vous ici qui - semble assez bon. - 1,5 lignes et j'aime la taille des caractères à elle est assez décent de voir quand elle est reprise - sur tout le chemin. - Ok, - si vous êtes Texas ne répond pas ou regardant le même que sur mon écran, - vous pouvez aller voir dans le navigateur, - et vous pouvez vérifier deux fois pour vous assurer que le texte est réglé sur la taille réelle parce que les navigateurs - vous pouvez réellement ajuster, - euh, - la taille de l'écran en zoomant, - en zoomant. - On va s'assurer qu'on est juste un zéro ici. - Taille réelle en d'autres termes, - a repris tout le chemin. - Ok, - bien. - Revenons ici et faisons des expériences en créant, - um, - un autre. - En fait, créons un autre sélecteur de type ici. - Donc je vais sortir et créer une légende appelée fig, - et ça va sélectionner tous les éléments de légende de figue. - En d'autres termes, - sélectionnez tous les éléments de légende de figue comme ça. Donc pour la légende de la figure, on peut explorer d'autres façons d'ajuster le type. Donc pour la légende de la figure, - Regardons une autre propriété appelée police. - Attendez, - et ça utilise le poids du tiret de fonds, - et ça pourrait être réglé à la normale. - Il pourrait aussi être trop audacieux, - et il peut aussi être réglé sur Boulder comme ça, - ce qui est le plus audacieux. - Nous avons également une série de chiffres qui vont de 100 2 900 que vous pouvez utiliser pour ajuster l' épaisseur ou le poids du texte sur et ceux qui vont par incréments de 100. - Donc, - par exemple, - 100 serait le plus léger 200 serait légèrement autocollant 300 400 comme ça jusqu'à - 900. - Je le crois dans ce cas, - nous ne voulons pas que le texte soit en gras. - On va utiliser la normale, qui, dans ce cas, est la valeur par défaut. - Donc, nous n'aurions vraiment pas à spécifier pour cet élément particulier à moins que nous le modifiions - en, - comme, - en gras ou quelque chose comme ça. Mais d'abord, nous allons juste le regarder, - hum, - comme une taille normale. - Attends. - Et puis changeons aussi la taille de la police ici, - que nous avons vu dans le sélecteur précédent. - Donc nous allons dire la taille du tiret de police, - et nous allons la régler à 12 pixels. - D'accord. - Et, - euh, - voyons, - qu'est-ce qu'on aimerait faire d'autre ? - Mettons aussi la ligne. - La hauteur dira la hauteur du tableau de bord couché. - Et nous allons mettre ce gars pour dire aussi que les paragraphes Mazza diront 1.5 AM afin que je puisse spécifier cela - aussi en pixels pour cent, - ems ou points ? - Euh, - voyons. - Donc hauteur de ligne. - Regardons aussi changer la typographie. - Donc on va utiliser la famille de caractères comme ça et on va mettre ce type à quelque chose - différent, - dira qu'on veut que ce soit la Géorgie. Maintenant, Maintenant, la façon de trouver des œuvres familiales est que vous êtes libre de choisir des polices communes. - Tout d'abord, - nous allons examiner une solution qui utilise des polices de parrainage sécurisé Web qui sont couramment - trouvées sur les ordinateurs de l'utilisateur. - Et puis, - plus tard, - nous allons examiner l'utilisation d'un fonds Web spécialisé ou d'un fonds que les gens pourraient ne pas avoir - et le feront en le chargeant, - charger ce fonds à partir du Web de sorte que même si la personne n'a pas autant de plaisir sur leur ordinateur, ils seront toujours en mesure de le voir. - Il utilisera la méthode CSS trois facettes pour y parvenir. - Mais pour commencer, - nous allons juste utiliser une police qui est sûre et la plupart des gens ont sur leur ordinateur. - Donc, la façon dont ça fonctionne, c'est que le navigateur viendra ici. - Et s'ils ont cette police Georgia sur leur ordinateur, - il va de l'avant et changer le type à cela. Maintenant, vous vous demandez peut-être, et s'ils n'ont pas ce téléphone sur leur ordinateur ? - Eh bien, - s'ils ne l'ont pas, - nous pouvons mettre une virgule, - et nous pouvons spécifier d'autres solutions de sauvegarde. - Et généralement, les gens choisissent 2 à 3 solutions de sauvegarde. - Donc, - par exemple, - disons qu'ils n'ont pas la Géorgie, - mais ils ont des moments. - Ou peut-être qu'ils ont quelque chose comme ça. - Times New Roman comme ça. Donc, Donc, on peut mettre le premier fonds qu'on veut, puis une virgule, et ensuite on peut mettre un autre fonds. Donc, si ça va d'abord essayer de voir s'ils ont George, s'ils n'ont pas la Géorgie, ça va vérifier s'ils ont du temps New Roman. - Vous avez peut-être remarqué que fois New Roman est entre guillemets. - Parfois, vous verrez ceci et des guillemets simples comme ça, - comme ça Ou vous pouvez le voir en guillemets comme c'était initialement comme ça. - Chaque fois que vous voyez des guillemets simples ou doubles en CSS autour d'une famille de polices comme celle-ci, - c'est parce qu'il y a un espace ici dans le nom du fichier. - Donc Georgia n'a pas cette police. - La Géorgie n'a pas d'espace dans le nom de la police, - mais fois New Roman n'a pas un espace dans le nom du fonds. - Donc, chaque fois que vous avez une police qui contient des caractères étranges, - comme des symboles, - des points d'exclamation ou, - vous savez, - peut-être des caractères non latins comme des caractères chinois ou japonais ou quelque chose - comme ça, - alors votre meilleur pari que la chose la plus sûre à faire est de mettre une citation autour d'elle, - soit des guillemets simples ou doubles pour l'entourer. - Euh, - donc dans ce cas, - nous avons juste des guillemets temps, - espace, - nouvel espace, - Roman. - Et parce que celui-ci n'a pas de caractères spécialisés, - mais il a un espace dans le nom du fichier. - On l'a mis entre guillemets comme ça. - Et enfin, - comme une solution full back, - dira simplement au navigateur d'utiliser n'importe quelle police Sarah générique écrivant le mot serif là. 21. Systèmes de couleurs: - euh OK, - alors nous allons aussi définir la couleur. - Alors voici une autre propriété. - S'il est utile de savoir, - est de changer la couleur du texte, - vous utilisez simplement la couleur de la propriété. - D'accord. - Et pour cette 1ère 1 on va la mettre en couleur grise pour qu'on puisse dire gris comme ça, ce qui est un nom de couleur. - Donc ce sont les différents types de systèmes de couleurs que vous pouvez utiliser. - Ici, vous pouvez utiliser l'un des 16 noms de couleurs et n'hésitez pas à vous référer aux diapositives pour voir une liste - de ces 16 noms de couleurs en dehors des noms de couleurs. - Vous pouvez également spécifier des couleurs décimales hexi, - et vous pouvez également spécifier des valeurs RVB. - Et en CSS trois, - c'est RVB A avec l'inclusion de la transparence ou Alfa là. - Ok, - pour qu'on puisse dire gris. - Nous pourrions également utiliser une valeur de couleur hexi décimale dont les valeurs de couleur décimale hexi ont utilisé les ils - mis en marche avec le hashtag ou le symbole de livre comme ça. - Ok, - donc nous commençons avec le symbole de hashtag et ensuite, - nous allons mettre des chiffres et des lettres pour pouvoir utiliser le nombre zéro à neuf et - lettres a à F pour représenter une gamme de couleurs de milliers de couleurs disponibles via - le système de couleurs hexi décimal. - Donc, - par exemple, - dans le système de couleurs inaccessible, - les 2 premiers caractères représentent la couleur rouge. - Donc les 2 premières paires de caractères représentent le rouge. - 00 ne serait pas rouge serait une absence de lumière rouge. - Et puis les 2 2 caractères représentent le vert. - Et ce serait une absence de lumière si je mettais deux zéros pour cela et la dernière couleur - représente le bleu. - Donc les deux dernières paires sont bleues. - Donc c'est rouge, vert et bleu. - Avec ceux-ci dit ça zéro. - Ça veut dire qu'il y a une absence de lumière. Il n'y a pas de lumière rouge, verte ou bleue, donc c'est noir. - C'est la couleur noire. La valeur la plus élevée que je peux mettre est une lettre F. Donc si je mets six EFS ici comme ça, ça serait, - euh, - autant de rouge, - comme 100 % lire 100 % vert et 100 % bleu là-bas. - Donc ce serait la couleur blanche. - Si je le faisais, - um, - 00 ff 00 Ce serait la couleur verte. - Et si je faisais ça, - ce serait la couleur bleue, - et ce serait la couleur rouge. - Donc, je pourrais aussi écrire ceci comme après 00 parce que les 2 premiers caractères correspondent à FF 0000 Donc - parfois vous verrez des hacks un décimal en raccourci comme ça. - Si vous ne voyez que trois personnages, c'est ce qui se passe. - Donc, - par exemple, - si c'était ces trois caractères après zéro F, - je le saurais en fait, - c'est un raccourci pour F 00 ff. - Voilà. - Est-ce que ça a du sens ? - Donc nous pouvons regrouper ce 1er 2 dans une paire, - la seconde dans une paire dans les deux derniers dans une paire, - donc cela pourrait être raccourci à F zéro f comme Donc si vous avez un nombre hexi décimal - qui ne correspond pas en paires égales, - par exemple, - J'ai inventé ça en haut de ma tête. - Je ne suis même pas vraiment sûr de quelle couleur c'est, - mais c'est un exemple de la valeur décimale Hexi pour laquelle je ne peux pas utiliser le raccourci. - Je ne peux pas simplifier ça en trois caractères parce que je n'ai pas de correspondance sur tous les personnages. - En d'autres termes, - de ce serait incorrect parce qu'il y a une correspondance ici. - Je n'ai pas le droit de faire ça et d'avoir cinq caractères. - La seule fois que je pourrais le faire, c'est si j'avais une correspondance sur chacun d'eux comme ça sur - chacun des trois. C' est un exemple de hacks, unnombre décimal que je pourrais raccourcir si je le voulais. hacks, un - Tu pourrais le raccourcir comme ça. Donc on va juste ajouter une valeur hexi décimale de 777, ce qui est un peu comme un gris foncé. - Ok, - en fait, - c'est un C'est un peu plus clair de couleur grise. - Je ne devrais pas dire qu'il fait sombre. - Et puis on y va et on va regarder une autre propriété ici. - Créons une propriété appelée texte tiret une ligne. - Donc, c'est utile. - Vous pouvez définir le texte sur une ligne à gauche à l'intérieur de l'élément qu'ils sont - contenu dans. - Et puis vous pouvez également le définir au centre, - ce qui centrerait le texte dans cet élément. - Et vous pouvez aussi dire à droite, - qui centrerait le texte dans l'élément sur le RCD. - Ça pousserait le texte vers la droite à l'intérieur de l'élément, - alors oui, - faisons-le en fait. - On dira que la ligne droite poussera ce type comme ça. - D'accord. - Et, - euh ouais, - ça va le faire pour l'instant. - On parlera de couleur RVB dans un instant. - On reviendra à celui-là. - Alors sauvegardons ceci et revenons au navigateur ici et rafraîchissons. - Et bien sûr, - vous pouvez voir ici que sous cette image est cette légende de figure et la légende de figure - est maintenant une police différente. - Tu vois comment ça va ? - On dirait que celui-là est Helvetica. - Je vais deviner là. - Et celui-là est la Géorgie et ça ressemble à une couleur grise maintenant au lieu d'une couleur noire . - Et vous pouvez aussi voir que c'était une ligne à droite. - Ok, - regardons un autre système de couleurs qui s'appelle RGB. - Et en CSS trois, - nous pouvons également spécifier 1/4 valeur, - ce qui est une chance pour Alfa. - Ok, - donc la façon dont fonctionne RGB est que vous avez une plage de nombres de 0 à 2 55 donc zéro serait - l'absence de lumière. - Ça veut dire non, - non. - Dans ce cas, - cela signifie pas de rouge pour le premier numéro. - Pas de vert pour le deuxième numéro et pas de bleu pour le troisième numéro. - Et puis la quatrième valeur ici est celle qui signifie 100% Alfa ou, - UM, - 100% opacité. - Si je voulais que ce texte soit vu à travers, - je pourrais dire comme 0,5 serait 50% 0.2 serait 20% 0.75 serait 75% et un égal 100%. - Donc, cette transparence est une plage de zéro, - ce qui signifie qu'elle est invisible, - ou vous ne pouvez pas la voir jusqu'à un ou 100%. - Attention. - Vous ne voulez pas faire de type invisible comme celui-ci parce que cela peut affecter votre moteur de recherche - optimisation. - Parfois, les gens vont essayer de faire un peu de trucs sournois, - comme rendre leur type invisible sur juste mettre beaucoup de termes qui vont concentrer la recherche - moteurs pour trouver leur page. - Cependant, - beaucoup de moteurs de recherche, - s'ils découvrent que vous faites cela, - ils vont vous pénaliser, - et Google fait des sourcils sur cela. - C'est bon. - Donc, - par exemple, - si je dis à 55 virgule zéro zéro, - cela signifie qu'il est rouge à 55 rouge zéro vert zéro bleu. - Si je faisais tous ces à 55, ce serait 100% lumière rouge, - lumière verte et lumière bleue, - qui est en fait la couleur blanche. - Donc à 55 à 55 à 55 est la couleur blanche 000 est la couleur noire. - Et ce serait comme la couleur verte, - parce que ce sera zéro rouge tout le chemin vert et tout le chemin bleu. Tu te demanderas peut-être, etsi je veux en faire une couleur spécifique ici ? Tu te demanderas peut-être, et Et je ne suis pas sûr de ce qu'est cette valeur de couleur, ce quesont les nombres équivalents pour cette valeur parce que nous ne pensons pas comme des robots. Et je ne suis pas sûr de ce qu'est cette valeur de couleur, ce que - Quand je pense à la couleur orange comme une orange sunburst, - je ne sais pas quels chiffres frapper ici pour les hacks de décimal ou les valeurs RVB. - Exactement. - Donc, - heureusement, - nous avons à notre disposition quelques outils que nous pouvons utiliser pour accomplir cela. Donc il y a un compte-gouttes dans la boutique photo que tu peux utiliser. - Il y a aussi un compte-gouttes en gimp. - Si c'est le logiciel que vous utilisez afin que vous puissiez faire apparaître une image comme celle-ci, - vous pouvez l'ouvrir et vous pouvez utiliser l'outil pipette pour saisir que je peux vraiment démontrer - rapidement dans la boutique photo. - Et je peux aussi démontrer très rapidement et encore, - d'accord. - Et pourquoi ces chargements d'air ? - Je vais montrer à ceux d'entre vous qui sont sur un ordinateur Mac. - Je peux vous montrer comment le faire en utilisant un programme intégré gratuit sur le Mac appelé Digital color - Meter. - Donc, - uh, - allons de l'avant et nous cachons ça très vite et passons à cette petite loupe - la loupe est tombée ici, - et nous allons chercher une application appelée Digital Color Meter et en fait - déjà venu ici. - Je viens de lier numérique, - et vous pouvez voir ici le top hit est cette application appelée Digital Color Meter. - Alors je vais aller de l'avant et choisir ça, - et ça apparaît une petite fenêtre sur votre écran. - Je travaille à Snow Leopard. - Vous avez peut-être une version plus récente de Mac OS. - Vous courrez peut-être sur le lion, - et si vous courez sur le lion ou le lion de montagne, - ça aura l'air un peu différent. - Mais c'est à peu près la même chose. - Donc, si je veux faire correspondre cette couleur, disons que je veux faire correspondre cette couleur grise à une couleur spécifique . - D'accord sur ce mur ici. - Peut-être même un peu comme une couleur beige comme ça. - Ce que je vois, il y a les valeurs hexadécimales et me montrant que la valeur rouge devrait être G - est B neuf et le dernier est un d. - Donc, si je veux copier ces valeurs, - Aiken dire décalage de commande, - voir ? - Et je peux revenir dans mon code ici. - Cachons le jeu une seconde. - Salut encore. - D'accord. - Pour que je puisse revenir au code. - Et pour cette valeur de couleur, - je peux juste coller cette valeur là comme ça. - Donc, si je sauvegarde ceci et rafraîchis, - ça m'a juste donné la valeur décimale Hexi quand j'ai plané ma souris sur cette partie de l'image - que je cherchais cette couleur. - Donc si je reviens ici et je me rafraîchis, - vous pouvez voir que ce texte a changé ce genre de couleur beige ish que j'ai sorti du mur ici -. - Ok, - Essayons encore. - Mais cette fois, - obtenons les valeurs RVB. - Je vais revenir au compteur de couleurs numérique. - Je l'ai perdu et je vois si on peut le ramener. - Nous y sommes. - Et essayons comme cette couleur orange ici pour que vous puissiez voir en ce moment je reçois la valeur hexadécimale - huit bits. - Et ce que je veux faire est de passer à la valeur réelle RVB dans les anciennes versions de Mac comme, - Ah, - Snow Leopard. - Vous allez voir que vous pouvez cliquer ici et vous pouvez passer à la valeur réelle. Si tu es dans une version plus récente de Mac OS X comme Tiger, tu vas vraiment vouloir venir dans un menu déroulant ici. Si tu es dans une version plus récente de Mac OS X comme Tiger, - Donc, sous l'application du compteur de couleurs numérique, - vous pouvez venir ici et vous pouvez réellement changer. - J'oublie quel menu déroulant c'est sans pouvoir le voir. - Mais vous allez regarder à travers les préférences ici et vous serez en mesure de trouver le même menu. - Et vous pouvez changer Teoh dire valeur réelle 8 bits. - Donc, si je dis RGB valeur réelle huit bits, - alors je reçois ce système de couleur, - qui est de 0 à 2 55 à la place. Donc, par exemple, passons au-dessus de cette orange dans la chaussure juste ici, et je vais dire le changement de commande, passons au-dessus de cette orange dans la chaussure juste ici, et je vais dire le changement de commande, - Et il copiera ces chiffres. - Et je peux revenir ici au code, - et je peux le rythme là-dedans. - Maintenant, - ceux-là sont les valeurs RVB que je dois dire que RGB avait effectivement écrit ceci avant et je - l'ai effacé. - Hum, - et je mettrai des parenthèses autour de cette salsa RVB A et ensuite nous mettrons une virgule entre chacun de ces nombres ici comme ça. - Et nous devons si je fais le, - euh si je fais juste RVB comme ça, - c'est CSS pour ajouter un peu de transparence. - Je pourrais faire RVB A et je pourrais spécifier, - comme 0,5 serait 50% de transparence. - Je vais juste en dire un pour 100% comme ça, - et ensuite on économisera et on reviendra et on se rafraîchira. - Et vous pouvez voir maintenant les années de texte, - cette couleur orange à partir de là. - Donc je compte-gouttes air très utile. - Euh, - à Kim, - vous avez une visite guidée juste ici. - Je vais juste le souligner dans chaque application. - C'est l'outil I drop ici et Gimp et vous iriez ouvrir le fichier et amener votre image vers le haut -. - Et vous pouvez je déposer de là et dans la boutique photo, - l'outil pipette est situé juste ici. - Ça a l'air très similaire. - C'est un peu plus haut et les livres dans le panneau, et ça ressemble à ça. - Ça s'appelle l'outil Pipette. - Tu peux aussi taper la lettre. - La touche I sur votre clavier pour le sélectionner. - Ok, - Excellent. - Alors je vais les fermer. - On fera un peu plus avec Photoshopped plus tard. - Ok, - donc c'est génial. - Nous savons maintenant que nous pouvons utiliser, - um des applications pour cliquer, - et je dépose nos images. - Si vos propres fenêtres Il y a aussi quelques programmes gratuits, vous pouvez télécharger quelques recherches Google - pour pipette ou pipette couleur qu'il ya, - ah, - une poignée de programmes qui devraient venir qui sont gratuits pour la dernière version de Fenêtres aussi bien. - Ok, - euh, - donc ce sont des systèmes de couleurs. - Et nous avons aussi appris, - euh, - voyons, - nous avons appris les noms de couleurs. - Nous avons appris sur les couleurs décimales hexi et hexi décimal abrégé. - Hum, - et nous avons aussi appris les valeurs RVB 22. Shorthand de police: - Jetons un coup d'oeil au raccourci pour spécifier toutes ces propriétés de police ici, - Donc je vais en fait commenter ceci et je vais écrire ceci d'une manière simple ou plus courte . - Laissez-moi vous montrer ce que je veux dire ici. - Donc, - en fait, - dans CSS nous si nous voulons, - nous pouvons écrire les lignes ligne par ligne. - Il s'avère que pour les polices, - il y a une propriété appelée police comme celle-ci. - Et si vous dites juste amusant, - cela vous permettra de spécifier les valeurs pour le poids et le style et la taille et la ligne, - hauteur et famille de police le tout dans une seule propriété. - Il est important qu'ils se produisent dans cet ordre spécifique. J' ai écrit que j'ai écrit ça dans le même ordre pour essayer de t'aider à te souvenir. , Et la première chose que vous feriez,c'est si vous aviez un style de police ou un poids de police. - Vous le préciseriez d'abord, - pour qu'on puisse dire normal. - Et puis vous mettez un espace et l'espace entre ces valeurs est la façon dont le navigateur - est capable de voir que c'est la fin d'une valeur au début de la suivante. - Il est donc important d'avoir un espace entre les deux, donc vous pouvez dire que c'est une police normale. - Attendez, - nous pouvons dire que la police taille 12 pixels, - et nous pouvons mettre une barre oblique pour spécifier la hauteur de la ligne, - qui serait de 1,5 m. - Donc, la façon dont vous lisiez ceci est, - vous diriez, - normal 12 points ou 12 pixels sur 1,5 eux, - um, - donc 12 pixels sur ce 1.5 eux est, - um, - est la taille sur la hauteur de la ligne. - Donc, vous mettez une barre oblique entre ces deux-là au lieu d'un espace, - et ensuite on remettra un espace et on spécifiera. - Clips spécifiera les fonds, - qui sont la Géorgie et fois New Roman. - Oups. - J'ai trop de citations. - On y va, je vais faire une virgule. - Et le dernier s'appelle Sarah, - qui va juste charger n'importe quelle police Sarah générique que le navigateur a confiné. - Ok, - on va entrer et sauver ça, - et je pense que je veux changer de valeur à ma couleur grise. - Bien que c'est une orange vif, - je pense que c'est un peu trop vif pour juste une légende, - donc je vais juste garder ça à l'arrière du 777 et on y va. - Tout est de retour à la normale. - Ok, - Excellent. 23. Fonts Web: - Donc c'est un excellent moyen de charger les polices que notre Web dit polices, - les polices communes et tout le monde aura sur leur ordinateur. - Cependant, - et si je veux charger une amende sur mon propre ordinateur ? - Ou si je veux charger une amende spécialisée. - Donc nous allons regarder une méthode appelée à Import pour importer une feuille de style pour certains - fonds spécialisés de Google. - Ok, - et il y a toutes sortes de sites là-bas qui fournissent des polices Web gratuites. - On va aller à la bibliothèque de Google. - Alors revenons à notre navigateur et ouvrons un nouvel onglet et nous allons aller de l'avant et - tapez Google dot com slash fonds web vieux dot com slash fonds météo et vous pouvez voir ici - il y a, - une liste plus grande. - Ils ont plus de 606 113 trouver des familles, - et vous pouvez cliquer ici pour ajuster les paramètres et la taille que vous cherchez. Je sais qu'il y a deux polices spécifiques que je veux utiliser, donc je vais les chercher ici. Je sais qu'il y a deux polices spécifiques que je veux utiliser, - Sinon, - vous savez, - normalement, je passe page par page et j'essaie de trouver des styles qui me semblent, - vous savez, - vous savez, - désirables. - Je vais chercher une casquette qui s'appelle Elsie Swash Elsie. - Je veux l'utiliser ici. - Ok, - donc c'est un plaisir que ce n'est pas super probable que quelqu'un ait cette pensée exacte sur son ordinateur. - Donc on va prendre ce plaisir et le charger sur Google. y Ilya différentes façons de faire cette année. - Vous pouvez l'ajouter à votre collection, - et ensuite vous pouvez avoir un shoot de style personnalisé que vous avez lié à. - Et en fait, - dans notre cas, - ce que je vais faire, c'est juste que je vais aller à ce lien qui dit utilisation rapide et je vais - cliquer sur le lien d'utilisation rapide comme ça, accord ? - Et ils me disent ici qu'il y a différentes versions. - C'est normal et ultra audacieux. - Dans ce cas. - Je veux juste utiliser le poids normal de 400, et ensuite on va faire défiler ici, et je peux voir qu'il y a en fait trois méthodes que je peux utiliser pour intégrer ça dans ma vue. - Donc, une méthode est appelée standard, - et cela utilise un lien que nous mettons dans la section tête de toutes les pages HTML. - C'est la balise de lien qu'on a vu avant ? - De la même façon qu'on relie à notre feuille de style. - En fait, - uhm et une autre méthode utilise quelque chose appelé à l'importation qui va importer ce fichier - directement dans nos feuilles de style actuelles. - Et il y a aussi une solution JavaScript que vous pouvez copier et coller ici, - que vous mettrez probablement dans la section d'en-tête de votre page HTML coupée ou liée à partir de - votre page HTML. - Hum, - donc JavaScript va fonctionner dans les anciens navigateurs si les gens ont leur JavaScript désactivé, - ce que je ne sais pas pourquoi ils le feraient. - Mais certaines personnes peuvent le faire pour des raisons de sécurité. - Alors celui-là ne va pas travailler aux orteils, - Tant qu'ils ont un navigateur plus récent qui supporte CSS trois à la méthode d'importation, - nous pouvons utiliser celui-ci particulier. - Donc je vais utiliser cette solution, - qui est le tableau du milieu appelé à l'importation. - Et on va juste copier ça. - Je vais le mettre en évidence et dire « Copy ». - Et puis je laisserai cet onglet ouvert et je reviendrai. - Il va revenir au texte sublime ici et allons charger ceci en haut de notre page -, - donc je vais juste faire un commentaire ici qui dit fonds Web comme ça. - Donc on charge notre amusement web ici, - et je vais y coller, - et on peut le rendre un peu plus petit. - Zoom arrière pour voir à quoi ça ressemble ici. - C'est une fille longue. - D'accord, - donc nous avons collé ce U R l ici, - revenons à notre navigateur et voyons l'utilisation pour cela. - Donc la façon dont nous utilisons ceci est que nous utilisons la famille de caractères, - et nous appelons ce fonds sous le nom de casquettes Elsie Swash. - Et, - euh aussi, - ils ont une chute de cursive, - ce qui sera qu'il utilisera n'importe quelle police cursive qu'il confinait s'il ne peut pas charger celui-ci pour - une raison quelconque. - Donc on pourrait juste copier cette partie ici, - et je reviendrai à mon code et je peux aller à l'endroit où je voudrais l'utiliser. - J'ai décidé que mes légendes. Au lieu d'être la Géorgie, je veux utiliser un fonds spécial. - Donc je vais mettre en évidence les familles de polices ici et passer à Elsie Swash caps, - qui vont charger à partir d'ici à partir du Buehrle importé. - Disons que je voulais récupérer d'autres polices de Google Web polices ici. - Vous pouvez aussi revenir et en trouver quelques autres ici. - D'accord, alors allons-y et cherchons une autre police que je veux utiliser. - Et celui-ci s'appelle Clicker Clicker Scripts. - C'est là. - Script clicker. - J'utilise ces polices très décoratives. - D'accord. - Et puis on va s'en servir rapidement, - qui est le lien juste ici. - Et puis je vais aller tol défiler vers le bas et cliquer sur l'onglet importation, - et nous allons mettre en évidence ce texte et nous reviendrons au code et je vais juste coller ceci - sous l'autre. - Il y a un autre plaisir. - Celui-ci est le 1er 1 est Elsie swash caps, - et le prochain plaisir auquel je suis lié est appelé script clicker. - Et puis je dois m'assurer que je me réfère à cette police avec le nom correct, - qui est le script clicker et la virgule tombent de cursive. - Ok, - alors revenons à notre code et nous allons aller de l'avant et utiliser, - euh quoi ? - Utilisez un script plus rapide pour nos H qui viennent ici dans un peu. - Ouais, - on va aller de l'avant et on va revenir plus tard pour s'amuser et - ok, 24. Sélecteur de cours: - donc c'est un bon début. - Nous avons appris les sélecteurs de type permet d'entrer et de sélectionner n'importe quel élément dans l'ensemble de - ces éléments dans l'ensemble du site Web et de les styliser d'une manière particulière. - Maintenant, - c'est bien et bon quand nous voulons que tout ressemble le même si vous avez une - poignée d'éléments que vous aimeriez styler tout de même que votre meilleur pari est à utiliser - quelque chose appelé un sélecteur de classe. - Donc, - les électeurs de classe, - ceux de la, - vous savez, - les Vous pouvez appliquer Teoh, - euh, - autant d'éléments que vous le souhaitez. - Donc, si vous avez une poignée d'éléments et que vous voulez qu'ils soient stylés d'une certaine manière, - vous savez, - peut-être pas tous les paragraphes, - mais juste un paragraphe spécifique ou deux ou trois paragraphes et le site que vous aimeriez être - un peu différent. - Vous pouvez utiliser quelque chose appelé un sélecteur de classe. - Ok, - donc, - les électeurs de classe, - ils ont un caractère définissant spécial au début d'eux qui fait savoir au navigateur - que ce n'est pas seulement un élément normal. - On cherche à s'asseoir. - Nous cherchons à styliser un nom de classe spécifique, - donc nous commençons toujours les classes d'électeurs avec le symbole de période. - Donc j'ai toujours le premier mis un point, - et ensuite je vais donner à cette classe un nom spécifique. - C'est à moi de le nommer. - Et je veux choisir un nom qui me sera logique plus tard. - Alors allons regarder l'usage pour ça d'abord, - et ensuite je reviendrai et je le nommerai. Je vais aller dans la page du catalogue, et je vais aller de l'avant et faire défiler vers le bas. - Et si je viens ici à la ligne 75 catalogue sur HTML, - vous pouvez voir que nous n'avons pas deux ici appelés Marques en vedette. , Et plus tard je vais mettre un peu comme une texture de bois derrière tous ces éléments. - Et ce texte va être au-dessus de ça. - La texture du bois et je voudrais qu'il soit blanc. - Je n'ai pas l'impression d'avoir la couleur blanche et tous les autres H deux vont avoir la - couleur noire, - donc je ne peux pas simplement dire deux h pour ce sélecteur parce que ça ferait tout l'âge de - est blanc. - Et dans ce cas, - je veux que tout ce que chacun utilise soit noir. - Mais celui-là, disons celui-là et peut-être sur quelques autres pages aussi. - Je veux faire une partie du H 2 est blanche. - Donc, la façon dont je peux le faire est que je peux attribuer une classe spécifique à cela et il y a deux étapes - au processus. - Une étape consiste à appliquer une classe à l'élément en utilisant l'attribut de classe afin que je puisse aller de l'avant et - dire que cet âge a aussi une classe de et je vais l'appeler texte de lait comme ça. - Je vais juste utiliser le trait de soulignement et dire que ça a une classe de texte de lait. - J'ai complètement inventé ce nom de classe. - Donc j'ai complètement inventé le nom de cette classe particulière sur, - J'ai décidé de l'appeler texte de lait parce que je veux que tous ces textes soient blancs, - blanc laiteux. - Ok, - donc maintenant que je lui ai donné un nom de classe unique ici, - je peux appliquer cette classe sur autant d'éléments que je veux que je veux avoir la même couleur blanche pour que leur texte commence par tous. - Appliquez-le à celui-ci. - Mais tu peux jouer en classe plusieurs fois. - Vous pouvez également appliquer plusieurs classes. - Par exemple, - si j'avais une autre classe ici comme je voulais ajouter une classe appelée Shadow qui va ajouter un - shadow à l'élément. - Je peux juste mettre un espace ici et appliquer une classe supplémentaire nommée autant de noms de classe que je veux - ici serait, - comme une autre classe que je pourrais juste là. - Donc, en mettant un espace ici, - vous pouvez appliquer autant de classes que vous le souhaitez à un seul élément, - et vous pouvez appliquer des classes est plusieurs fois sur les pages que vous voulez. - Je peux aller de l'avant et copier cette classe de texte de lait à autant d'autres éléments différents que je veux . - Alors maintenant que j'ai étiqueté ceci avec une classe dans le HTML Aiken sauter au CSS. - Et maintenant, je peux cibler cette classe en utilisant le symbole de période et en tapant le nom de la classe -, - qui est le texte de lait. - Et c'est sensible à la casse. - Tu peux inventer le nom de toute façon, mais tu vas vouloir utiliser des lettres et des chiffres seulement. - Et il est sensible à la casse, - et vous ne voulez pas utiliser l'espace entre le nom. - Um si vous voulez indiquer un espace, vous pouvez utiliser des traits d'union ou des traits de soulignement comme ça. Donc pour mon texte de lait, allons de l'avant et positionnons ce type pour avoir la famille de polices qu'on vient de charger ici, qui s'appelle le script clicker. Donc pour mon texte de lait, avant et positionnons ce type pour avoir la famille de polices qu'on vient de charger ici, - Donc, on va dire la famille Font Dash et on peut saisir le code pour que ça marche, - ce qui est là. - Étape pour son script clicker appelé cursif. - Et en fait, - on devrait déjà l'avoir copié. - Je devrais juste être capable de suivre ça juste là. - D'accord ? - Et en plus de la famille de polices, - Je veux aussi changer la couleur du texte pour être blanc comme ça. - Donc pour le blanc, j'ai quelques options. - Je peux écrire le mot blanc. - Je peux utiliser l'équivalent décimal hexi, - qui est s FF, - ou je peux utiliser les valeurs RVB 2 55 virgule 2 55 communes à 55 ou les valeurs RVB A 55 à 55 1 - comme ça. , Dans ce cas, j'utiliserai le nom de couleur blanc. - D'accord. - Et ajoutons aussi quelque chose appelé ombre de texte. - Donc, dans CSS trois, - nous pouvons également ajouter des ombres orteils notre texte, - ce qui est un peu un bel effet. - Et ça accepte quatre valeurs que je dois mettre ici. - Cette première valeur est le décalage horizontal. - Alors ça va Teoh, - poussez l'ombre trois pixels vers la droite. - Si je dis négatif, - il pousserait l'ombre de trois pixels vers la gauche. - Dans ce cas, - je ne veux pas que l'ombre se déplace horizontalement, - donc je vais juste dire zéro, - et la valeur suivante est le décalage vertical. - Donc je voulais aller vers les pixels vers le bas, - et la troisième valeur que nous mettons ici est appelée le Rayon de Flou. - Le Radius bleu est la santé. - Combien de pixels sur l'ombre va flouter ou adoucir Si vous avez dit que zéro serait une ombre très nette - si vous dites comme 10 pixels, - ce sera vraiment doux et lisse comme il s'estompe, - nous allons aller de l'avant et trouver un médium heureux ici de seulement trois pixels. - Et enfin, - nous voulons spécifier une couleur. Donc si je veux que ce soit noir, je pourrais utiliser la valeur décimale Hexi 000 sera l'équivalent des couleurs noires là-bas. - Ok, - on va aller de l'avant et sauver ça, - Et allons tester ça. - J'ai fait un coffre-fort et je peux revenir à mon navigateur et on peut le faire. - Voyons voir, - c'était sur la page du catalogue. - Allez sur la page du catalogue et faites défiler vers le bas. - Voyez si vous voyez celle-là et que vous allez frapper. - Rafraîchir. - Cool. - Donc c'est sous les futures marques, - et ça a l'air assez petit. - Je pense que nous allons le rendre un peu plus grand, - mais vous pouvez voir qu'il est blanc maintenant il a un plaisir Web spécialisé, - et il a une ombre. 25. Sélecteur d'ID: - Donc la prochaine chose que nous voulons faire est d'apprendre un autre type de sélecteur. - Nous savons donc que les sélecteurs de classe nous permettent de marquer certains éléments avec un nom de classe spécifique - et nous pouvons l'appliquer à autant d'éléments que nous le souhaitons dans une seule page. - Nous pouvons également appliquer plusieurs classes au même élément si nous le voulons. - Maintenant, il y a un autre type de sélecteur appelé un sélecteur I D et les sélecteurs d'idées air un peu - différent en ce que vous ne pouvez appliquer, - um, - un I d par page. - Plutôt, - vous pourriez dire, - um, - nous pouvons appliquer à Onley un élément de sa page. - Ok, - Donc, la façon dont vous pouvez vous rappeler que les classes peuvent être appliquées à plusieurs choses et que j' - le mot I d, - que vous pouvez penser signifie une identité unique. - J'ai donc une identité unique. - Ils ne peuvent s'appliquer qu'à une seule chose par page. - Donc, beaucoup de fois lorsque nous construisons des sites Web, - nous aurons besoin d'appliquer des classes en utilisant le symbole de période, puis en taguant une classe - attribut ici, - en lui donnant le même nom de classe. Si vous voulez avoirplusieurs éléments stylisés dans une page. Si vous voulez avoir plusieurs éléments stylisés dans une page. - Mais il y a aussi beaucoup de fois où nous avons un élément unique qui ne sert vraiment qu'un seul but. - Donc, - par exemple, - si nous avons, - comme une barre de médias sociaux ou une boîte et la page qui est unique et il n'y en a qu'une - par page, - alors nous ferions mieux d'utiliser un I. - D. - I. - D. - S ont plus de force, - plus d'autorité. - Si vous utilisiez des styles précédents comme si vous stylisiez une couleur en utilisant une classe, - Um et puis vous avez utilisé un i d pour définir une autre couleur. - L'I D a en fait plus d'autorité qu'une classe, - donc c'est plus spécifique car il fait référence à un seul élément dans la page. - Donc, - par exemple, - allons de l'avant et créer une boîte ah et lui donner un I. - D. - Allons à la page html du point d'index et je vais faire défiler vers le bas. - Et ici, nous avons l'en-tête et j'ai mis un endroit à plus de commentaires dans le code depuis le dernier exercice parce que je voulais, - euh, - Je voulais montrer que nous allons diviser cet en-tête en deux sections en plus petites boîtes. - Voici mon en-tête d'ouverture dans ma balise d'en-tête de fermeture. Dans cet en-tête, tu te souviendras avant que nous ayons le titre, , qui est le nom de la société ici. - C'est et c'est imbriqué à l'intérieur d'un groupe H. - Donc je vais en quelque sorte styliser ça dans, - ah, - un petit logo fantaisie. - Et j'ai décidé que je voulais avoir ça dans sa propre boîte. - Je veux avoir le logo dans une boîte et je vais styler la navigation dans une boîte séparée. - Donc, pour ce faire, - entourons cela avec une balise div comme ceci dira, - def, - et vous vous souviendrez de l'exercice précédent que devore d I V est la façon dont nous créons une - petite boîte. - Ça crée esthétiquement une boîte autour de cette zone, et je vais aller de l'avant et faire la même chose ici. - On veut que celui-ci soit aussi dans une boîte séparée comme ça. - Je vais mettre un peu de vêtements ici les mains. - Nous allons nous assurer que toe dans la dette ce contenu va mettre en évidence et appuyer sur la touche de tabulation pour inventer tout - de cela. - Comme si Ok, - euh, - donc j'ai ce h 1 et h 2 est dans une boîte et la navigation est dans une autre boîte. - Maintenant, - si je voudrais marquer ceci si c'est un élément unique a une identité unique sur la page, - alors je peux marquer ceci avec un I. - D spécifique si similaire à la façon dont nous avons créé cet attribut de classe. - Vous pouvez également créer un hommage d'idée. - Donc, nous pourrions dire, - par exemple, - a fait et nous pouvons lui donner un I D égal au logo. - Donc, cela va être un panneau de logo ou comme un acheté une boîte finira par le style pour être une - boîte en haut de la page qui va à travers l'écran et a notre logo à l'intérieur de celui-ci. - Et celui-là s'appelle Knave Bar. Donc si je veux, je peux lui donner une idée unique. Eh bien, disons que je suis égal à Dav bar comme ce chèque et nous reviendrons et dans ah et style ça - un peu plus tard. - D'abord, - regardons le style de celui-ci. - Donc, nous avons donné une identité unique de logo. - Puisque nous avons donné une idée de logo, - je suis maintenant interdit de donner un autre élément sur la page. - Le même I d. - Donc encore une fois avec des classes, vous pouvez appliquer cette classe à autant d'éléments que vous - comme sur la page, - alors qu'avec un I d comme I D égal logo, - nous ne pouvons l'appliquer qu'une fois par page. - Donc, je suis allé de l'avant et ajouté ceci à toutes les autres pages sur le site afin que nous puissions retourner - dans le CSS maintenant, - et nous pouvons cibler ce i d. - Et juste de la même manière que les classes ont un caractère d'identification unique sur le - comme point pour indiquer qu'il s'agit d'une classe de texte de lait. - I DS a également un caractère d'identification unique au début, - et c'est le symbole de la livre sterling ou la balise de hachage ou certains l'appellent le signe numérique. - Et c'est Ah, - vous pouvez créer cela en utilisant le décalage dans le numéro trois va créer ça et ensuite nous allons juste - dire le nom du I D. - Ok, - donc juste pour faire un examen rapide à nouveau, - si nous sommes essayer de sélectionner tous les éléments, - nous pouvons utiliser un sélecteur de type en mettant simplement le nom de la balise comme paragraphe ou ajustement. - Légende. - Si nous essayons de sélectionner, - vous savez, - un groupe d'éléments, - peut-être que nous avons un peu saupoudré un style sur plusieurs éléments sur une page, - comme rendre du texte laiteux. - Ensuite, nous pouvons créer une classe en utilisant le symbole de période ici devant le nom de la classe. - Et avec un I D. - Nous avons utilisé le symbole de livre si nous voulons appliquer à un élément unique sur la page. - Ok, - donc ici, - à l'intérieur du logo, - allons de l'avant et bien, - écrivons un commentaire ici pour ces deux-là. - J'ai oublié d'écrire que celui-ci sélectionne, - euh, - bien dire des éléments avec une classe égale au texte de lait, - Ok et logo, - qui a un i. - D. - Cela sélectionne un élément singulier. - Seulement un seul élément comment dire cet élément. - C'est comme l'élément avec et je suis égal au logo comme ça. - Donc, dans le code HTML, - nous avons ajouté, - Je d égal logo orteil un de nos dibs. - Vous pouvez ajouter des idées à n'importe quel élément, - en passant, - vous pouvez mettre une idée dans un paragraphe ou sur une liste ordonnée, - ou un élément de liste ou une image, - ce que vous voulez, - mais seulement une par page que est important. - Vous obtiendrez un air de validation si vous avez essayé d'avoir un 92 choses multiples sur la même page. - Donc on vient ici et on va lui donner une couleur de fond et on apprendra beaucoup plus sur l'esthétique des boîtes et comment styliser les boîtes un peu plus tard. - Mais juste pour que nous puissions voir que Div se souvenir, - nous avons créé un div ici avec une idée de logo qui entoure ces groupes d'âge, - qui entoure les H un et H 2. - Si nous voulions donner cette boîte de couleur, - par exemple, - nous pouvons utiliser l'arrière-plan de la propriété et nous allons aller de l'avant et dire arrière-plans. - On va lui donner une couleur bleu clair. - Utiliser Aqua Aqua est un nom de couleur que vous pouvez utiliser pour le bleu clair, - donc nous allons sauver cela. - Donc, si nous revenons au code ici et nous rafraîchissons, - vous pouvez voir que nous venons de créer une barre sur l'écran avec. - C'est en fait un div avec une idée de logo et son entourant ce contenu. - Ok, - et nous reviendrons un peu plus tard et changer de style est différent. 26. Sélecteur descendant: - Regardons un autre type de sélecteur appelé un sélecteur de descendant. - Les sélecteurs du Sénat nous permettent d'entrer à l'intérieur de l'élément apparent et de sélectionner tous ses - Enfants ou tous ses descendants, - en d'autres termes. - Donc, - par exemple, - si nous sauvegardons le logo de la livre, puis nous mettons un espace après le mot logo et puis nous disons H. - Ce que ça fait, c'est parce qu'il y a un espace ici. - Entre ce sélecteur et ce sélecteur, - c'est fondamentalement correct de sélectionner sur Lee les pages à l'intérieur des éléments avec le logo i D égal - orteil. - Donc, - en d'autres termes, - si nous sommes le navigateur, - nous pourrions lire ceci comme suit. - Donc, à partir du navigateur, - nous disons, - Um OK, - allez trouver un élément unique avec l'idée de logo et ensuite aller à l'intérieur de celui-ci et le style - tout le H. - Donc, - vraiment, - ce n'est que le style H s'ils se trouvent à l'intérieur du conteneur parent appelé logo -. - C'est là que la nidification entre en jeu. - Ce H est imbriqué. - C'est un descendant ou un enfant de cet élément parent appelé logo. - Donc c'est un descendant de fait avec l'idée de logo et peut-être que j'ai d'autres H - ailleurs sur la page et je ne veux pas que ces H soient stylés. - Disons que je voulais seulement le coiffer d'une manière spécifique. - Je pourrais utiliser un cours ou je pourrais jeter un I D dans celui-ci. Mais j'ai déjà une pièce d'identité pour ce conteneur. - Et si j'en avais plusieurs, chacun est ici. - Je pourrais alors utiliser un sélecteur descendant pour dire le style que chacun d'eux, - mais seulement s'ils apparaissent à l'intérieur d'un autre élément. - Donc les sélecteurs descendant, - Un vraiment utile pour cela encore, - nous disons, - Hey, - navigateur aller et trouve un élément avec une idée unique de logo, puis de l'espace. - L'espace qui frappe ici la barre d'espace indique qu'il s'agit d'un sélecteur descendant et nous disons - allez à l'intérieur du logo et sélectionnez maintenant tous les H. - D'accord. - Et ce qu'on va faire, c'est changer la famille de polices de toutes ces H ici, et on va le changer en script clicker, qui est mon fonds web spécialisé. - J'ai téléchargé comme ça. - D'accord. - Et si je voulais sélectionner le H deux spécifiquement à l'intérieur de leur. - Vous savez, - tous les H 2 ne sont pas sur toute la page, - mais sur Lee les deux ans s'ils sont à l'intérieur de la div avec l'idée de logo. - C'est la même chose ici. - Celui-ci ne va sélectionner des h deux que s'ils sont à l'intérieur d'un élément avec l'idée de logo. - Donc pour ces deux h font aussi la famille de polices et celle-ci, je vais faire l'autre, - euh, - voyons ce qui est, - euh, - l c spspace swash caps. - C'est très important que nous épelons ça correctement et c'est un repli. - Il utilisera cursive si on en a besoin. - Ok, - Donc, - sélecteurs descendant, - ils vont et ils stylisent quelque chose qui est à l'intérieur d'un autre élément parent. - En d'autres termes, - H on est un descendant de ce parent. - Donc, nous utilisons la barre d'espace entre indiquer cette relation qui coiffait ceci si c'est - à l'intérieur de ceci. - Alors, allons sauver ça, - et puis on va revenir sur notre navigateur et on va rafraîchir, - et ça a changé ces polices ici. - Donc ça n'affecte pas. - Ce n'est pas deux h, - et c'est un H 2 ici, - et ça n'affecte pas ces autres H 2 sur le reste de la page. - Ça n'affecte que ces deux heures parce que c'est à l'intérieur de cette Div avec une idée de logo. - Ok, - super. - Regardons une autre situation. - Nous avons toutes ces sections dans la page, - et si je veux dire que je veux styliser tous les liens qui apparaissent à l'intérieur de toutes les sections -, - Je peux le faire en disant espace de section A. - Je crée un descendant sélecteur qui dit seulement sélectionner le SIDA, - vous savez, - un balises qui sont les descendants de la section. - C'est littéralement sur Lee qui va créer un lien. - Si c'est à l'intérieur d'une section, - voyons, - celui-ci n'est pas à l'intérieur de l'en-tête. - Voyons si on pouvait en trouver un ici, par exemple. - Eh bien, - en voici un. - C'est un homme à relier. - Donc, voici une section et là, on l'a dit email et il y a un lien d'ancrage ici. - Donc celui-ci, - cette taxe de lien deviendrait effectivement style alors. , Donc ce qu'on va faire pour ces gars,c'est qu'on va lui donner une couleur. - Nous allons lui donner une grande couleur comme ça en utilisant les valeurs décimales hexi et les liens par défaut ont - un sous-jacent Et si nous voulons supprimer cela, - nous pouvons définir le deck la décoration de texte à aucun. - Vous pouvez également définir la décoration de texte. - Teoh sous-jacent vous pouvez également faire overline comme ça et flips overline Et vous pouvez aussi faire - ligne à travers qui ressemble à cela dans ce cas, nous voulons dio je vais juste laisser souligner - est bien, - ce qui est en fait la valeur par défaut. - Mais juste pour démontrer avec cette propriété particulière ressemble là. - Ok, - donc si je garde ça, - euh et je reviens manger frais normalement par défaut des liens ou bleu Mais j'ai dit pour que ce soit - un peu de couleur grise, - revenons au navigateur et nous allons descendre ici et nous va rafraîchir et vous pouvez voir - ce ne sont plus bleu il maintenant couleur grise, - comme sont les liens et le lien e-mail ici en bas des pages. - Eh bien, - très cool 27. Sélecteur Psuedo: - ensuite, - jetons un oeil aux pseudo-sélecteurs ou parfois appelés sélecteurs de classe pseudo-. - Maintenant, les pseudo-sélecteurs sont souvent utilisés pour styliser un élément basé sur sa relation - entre autres éléments. - Ou, - dans le cas de cet exemple, - nous allons styler un élément basé sur un état d'événement. - C'est assez commun aux liens de style. - Hum, - et nous avons vu avant cela si nous utilisons ce sélecteur de type pour A, - il va entrer, - sélectionner tous les liens d'ancrage dans la page et les styliser que nous avons stylisé ici dans les - sections pour avoir ah, - grande couleur et être souligné. - D'accord, - mais si on veut changer le style d'un lien quand la souris survole ? - Ou si nous voulons changer le style du lien quand il a déjà été cliqué ? - Donc, pour ce faire, - nous devons utiliser des pseudo-sélecteurs afin que les pseudo-sélecteurs identifient que l'air est le symbole du deux-points. - Donc, d'abord, vous commencez par un élément, - et cela pourrait être n'importe quel élément dans ce cas, - étaient intéressés par le style des liens pendant un état d'événement particulier. - Donc nous allons utiliser un deux-points, - et ensuite nous allons taper le nom spécifique de l'état de l'événement que nous essayons - cibler. - Donc, un lien deux-points ? - Ce qu'il fait, c'est cela sélectionne les liens, - um, - pendant leur état par défaut. - C'est là qu'ils sont intacts. Donc si je visite une page et que je n'ai jamais interagi avec le lien avant, ça contrôlera ce style. Donc si je visite une page et que je n'ai jamais interagi avec le lien avant, - Alors disons qu'on veut les rendre noirs. - Eh bien, - Seo, - faisons les liens couleur noire quand nous visitons la page et ah bien, - dites-lui de supprimer la décoration de texte afin qu'il n'y ait pas de soulignement sous les liens. - Restera la décoration de texte aucune. - Ok, - Jetons un coup d'oeil à un autre événement. - État pour les liens appelés Visité. - Maintenant, un deux-points visité bien sélectionner et les liens de style qui ont déjà cliqué ou visité. - En d'autres termes, - pense que nous avons déjà visité dans le navigateur. - Donc, - par exemple, - parfois pour indiquer que quelqu'un a déjà cliqué sur le lien, - vous pouvez changer la couleur du lien comme je pourrais rendre le lien gris ou quelque chose comme ça -. - Et, - um, - toute sorte de décoration de texte ou d'information comme ça va être héritée du - sélecteur précédent. - Donc, puisque j'ai dit texte décoration aucun, - celui-ci sera aussi aucun. - Um, - aussi n'aura pas de sous-jacent sous. - Il n'y aura pas de décoration, - mais je vais changer la couleur du noir à une couleur grise. - Ici, - c'est une livre grise moyenne C C c. - Ok, - Jetons un coup d'oeil à un autre état de lien. - C'est le favori de tout le monde, - qui s'appelle hover comme ça, - que vous pouvez probablement imaginer. - Celui-ci va sélectionner des liens, - euh, - pendant le vol stationnaire de la souris. - Donc ça s'appelle, - comme sur la souris comme ça. - Ok, - donc celui-là est amusant. - Tu pourrais faire ce que tu veux. - Vous pouvez changer la couleur. - Ça peut devenir sauvage. - Tu sais, - Tu sais, peut-être que ce qu'on va faire, c'est qu'on gardera la même couleur. - Peut-être les couleurs noires sur le vol stationnaire. - Et peut-être que ce que nous allons faire est que nous allons juste ajouter un sous-jacent ici va aller à la décoration de texte - et le mettre à souligner comme ça. De cette façon, quand, tu sais qu'on n'a pas cliqué sur un lien, il n'y a pas de décoration de texte, et quand on survole, une petite ligne apparaît en dessous. comme ça. - D'accord. - Et chaque fois que vous spécifiez les liens, - vous devriez le faire dans cet ordre, - de sorte que, - um, - les liens ci-dessous peuvent hériter des caractéristiques des états de lien ci-dessus. - Ok, - hum, - allons de l'avant et en créer un autre. - Ce sera notre état final de l'événement, - qui est connu comme actif. Et celui-ci, vous ne voyez pas celui-ci aussi souvent, mais celui-ci sélectionne des liens, vous ne voyez pas celui-ci aussi souvent, mais celui-cisélectionne des liens, pendant que le bouton de la souris est enfoncé ou quand vous cliquez dessus. - Donc c'est littéralement pendant que vous avez le bouton de la souris vers le bas. - Donc, dès que vous cliquez et que vous relâchez le bouton de la souris, - vous ne verrez plus cela disparaît. - Donc, pour voir cela vraiment clairement, - vous devez effectivement cliquer et maintenir le bouton de la souris enfoncé. - Donc, ce n'est qu'une fraction de seconde. - Habituellement que nous voyons cet état d'événement particulier ici. - Alors changez la couleur en rouge juste pour rendre ça vraiment évident là-bas, - nous pouvons aller de l'avant et économiser. - Ok, - donc ce styles de liens basés sur leur état des différents événements. - Donc, ce que nous voulons faire est que nous voulons changer cela un peu pour que nous puissions utiliser ces styles pour - des liens de style dans une partie spécifique de la page, - parce que souvent vous n'êtes pas tellement intéressé par les liens de style sur toutes les pages -. - La même chose. - Mais en général, - vous savez, - vous avez des liens dans une certaine partie de la page que vous aimeriez coiffer différemment. - Alors peut-être, - vous savez, - les liens pendant l'intérieur principal de la barre de navigation principale ont un style particulier et ensuite - peut-être des liens vers le bas dans votre corps, - copier, - avoir un autre style. - Et puis peut-être, - vous savez, - les liens en bas de la page ont un style différent. Dans ma page, je vais avoir des liens qui vont être parsemés dans cette copie du corps ordinaire. Et j'ai aussi des liens comme sur une barre latérale comme les meilleures marques et une archive de chaussures, etc. Et j'ai aussi des liens comme sur une barre latérale comme les meilleures marques et une archive de chaussures , - Et je pense que je vais styler ces liens en haut ici sur mon NAB sont complètement - différemment. - Ils vont être plus proéminents, - texte plus grand, - et je vais les faire comme des boutons en haut de la page. - Et puis si je viens ici au bas de la page, - nous avons un sérieux de liens qui sont dans une section tous seuls. - Il s'agit de la section détaillée juste avant le pied de page en bas de la page. - Et je voudrais définir ces liens pour être stylés différemment des liens ici que l'air - à l'intérieur des sections. - Alors qu'avons-nous appris auparavant ? - Ça nous aidera. - Avant qu' on utilise un I. - D - sur un des creux. - Et puis nous utilisons quelque chose appelé un sélecteur de descendant en mettant un espace ici ont pu - style tous les H, - mais seulement quand ils sont à l'intérieur de cet élément, - ou tous les deux. - Seulement quand ils sont à l'intérieur de cet élément avec l'idée de logo afin que cela pourrait être utilisé vers le bas - ici aussi. - Donc, si je veux styler des liens dans différentes parties des pages, - J'ai quelques options. - Je peux appliquer des classes aux liens dans certaines zones et spécifier qu'un lien avec une certaine classe - a un certain style. - Um, - ou ce qui est encore plus facile, c'est que je peux utiliser un sélecteur de descendant, - alors allons-y et revenons à la page d'index, - et faisons défiler vers le bas jusqu'à la section intitulée Détails devrait être en bas de la page. - Si vous êtes en haut de la page, je vais vous montrer un truc. - Je reviens. - Disons que vous êtes dans le haut et que vous aimeriez sauter très rapidement au bas de la page. - Si vous êtes frappé commande et la flèche vers le bas sur Mac, - c'est la commande flèche vers le bas et sur les fenêtres, - il est contrôlé flèche vers le bas. - On va vous sauter jusqu'au bas de la page comme ça, - et ensuite vous pouvez juste faire défiler vers le haut. - C'est un peu trop loin. - Voici la section des détails de fin et puis, - ah, - je veux faire défiler les orteils au-dessus des détails et cette section ici. - J'aimerais lui donner un I D. - donc je vais donner à cette section de la page une identité unique. - Et je vais juste appeler ça des détails, - Et puis je vais aller de l'avant et sauver ça. - Et j'ai déjà ajouté ce code pour vous sur le reste des pages afin que nous puissions juste revenir - ici pour style point CSS et affaiblir. - Transformez ceux-ci en sélecteurs descendants en disant que les détails de livre espacent un charbon et un lien. - Donc, de cette façon sur les liens Lee pendant leur état normal sera stylé s'ils sont à l'intérieur de la section - détails. - Droit. - Je peux ajouter ça à celui-là. - 2£ de détails. - Un espace comme ça. - Donc ça dira, - Hey, - navigateur. - Allez trouver quelque chose avec une idée unique des détails. - Va à l'intérieur et style. - Les liens, - chaque fois qu'ils ont été visités sont déjà cliqués. - Et cela dit, - Hey, - navigateur, - allez à l'intérieur de la section avec l'idée de détails et trouver des liens. - Et quand les gens planent dessus, - les coiffer de cette façon. , Et enfin, on a celui-là qui est actif. - Donc, il ne va styler les liens pendant leur état actif que si c'est à l'intérieur de la section - avec l'idée de détails. - Ok, - génial. Alors sortons et sauvegardons ça et revenons au navigateur et on va faire un rafraîchissement. Alors sortons et sauvegardons ça et revenons au navigateur et on va faire un - Et ces liens sont à l'intérieur des sections. - Ils sont à l'intérieur des sections sans nom. - Ils n'ont pas de I. - Donc ces air sont encore gris dans leur souligné au départ. - Cependant, - si je viens ici dans cette section, - vous pouvez voir que ces liens sont noirs sur le vol stationnaire et quand nous cliquons sur eux l'état actif - nous voyons, - ils deviennent rouges. - Et chaque fois que nous avons déjà cliqué dessus, - ça et nous revenons à la page. - Ils devraient être géniaux. - Quel est le ST visité j'ai déjà cliqué sur ces liens. - C'est pour ça qu'ils sont tous gris. - Ok, - donc parfois tu aimes un ST visité. - Si vous avez beaucoup de liens, - les gens peuvent voir les liens vers lesquels ils ont été ou sur lesquels ils ont cliqué. - Cependant, - d'autres fois, vous voudrez peut-être juste partager les mêmes, - um, - styles de votre état de lien normal que votre ST visité. - Donc, si je voulais le faire d'une façon, je pourrais venir ici et juste dire qu'il soit - noir et as-tu sais, - pas de décoration de texte quand on visite le lien aussi, - um, - mais c'est un peu redondant parce que je Je donne juste les mêmes styles ici et ici. - Et vous remarquerez peut-être que vous utilisez souvent les mêmes styles, donc il y a vraiment une meilleure façon de le faire. On peut toujours utiliser ce qu'on appelle un sélecteur composé, qui utilise la virgule deux sélecteurs distincts. On peut toujours utiliser ce qu'on appelle un sélecteur composé, qui utilise la virgule deux sélecteurs distincts - Donc, je peux utiliser ceci pour styler ces deux en même temps en mettant une virgule ici et puis - coller ces détails un visité ici et je peux me débarrasser de celui-ci ici, - laissez-moi aller de l'avant et supprimer celui-ci comme ça. - Donc ce que j'ai fait là, c'est que j'ai dit, - livre des détails d'une virgule de lien de deux-points, - ce qui signifie et aussi style ceci. - Donc, si je devais lire ça à haute voix de la façon dont le navigateur interprète cela, - ce serait un peu comme dire Ah hey, - navigateur. - Allez trouver quelque chose avec une idée unique des détails. Maintenant, allez à l'intérieur et trouvez des liens. - Et pendant leur état normal, - quand personne n'a cliqué sur eux, - les coiffer de cette façon, puis la virgule signifie et aussi aller trouver un élément avec l'idée - des détails et aller à l'intérieur de celui-ci et aussi des liens de style lors de leur visite ST Donc fondamentalement, - dans un seul sélecteur. - En utilisant une virgule, - vous pouvez regrouper différents éléments, - et dans ce cas, - nous avons dit aller et style, - liens normaux et aussi aller liens de style qui ont été visités. - Donc maintenant les deux état de lien par défaut et ST visité seront noirs avec la décoration de texte nulle. - Donc c'est bon et essayer tout ça en toute sécurité, - et nous reviendrons et rafraîchir. - Et maintenant, - depuis l'état par défaut et le ST visité ou le même. - Même si j'ai déjà cliqué sur ces liens, ils sont toujours noirs. - On ne voit plus la belle couleur. - Et vous pouvez voir quand je survole, - on est un peu souligné comme ça pour me faire savoir que je survole le lien. - Maintenant. - C'est vraiment à toi de décider. - Ce que vous faites pendant ces états de liens. - Il y a toutes sortes de possibilités. J' ai fait des choses vraiment conventionnelles, qui sont peut-être un peu ennuyeuses. J' ai fait des choses vraiment conventionnelles, - Je viens de changer la couleur ou la décoration du texte, - mais en fait, vous pouvez changer les textes. - Vous pouvez changer la taille de la police, - et le lien aura l'air de s'agrandir. - Le texte aura l'air de s'agrandir lorsque vous survolez la souris. Vous pouvez aussi changer comme le poids du texte pour vous rendre plus épais. - Tu peux changer le style pour en faire un tallix. - Vous pourriez même vraiment changer la police entièrement, - ce qui serait un peu étrange effet. - Vous pouvez changer les couleurs de fond et toutes sortes de choses. - N'hésitez pas à consulter les liens ci-dessous. - Cela donnera une autre ressource facultative est que vous pouvez aller vérifier en ligne pour en savoir plus sur les sélecteurs CSS. - Donc, ce que vous allez vouloir faire ensuite est d'aller de l'avant et de passer au défi de code, - où vous allez utiliser CSS pour styliser votre projet de site Web. 28. Outils de développeurs (partie 1): - Salut, les gars. - Bienvenue de retour. - Je voulais vous montrer un exemple de vidéo rapide sur la façon d'utiliser vos outils de développement et ces - outils vous aideront à résoudre et déboguer les problèmes et les problèmes que vous avez le long du - chemin. - Donc, auparavant, nous avons regardé utiliser des validateurs HTML et des validateurs CSS comme un moyen de valider - la syntaxe de notre code. - Un autre mot. - Parfois, vous allez juste accidentellement mal orthographié ou mal tapé quelque chose, - et cela va créer une erreur dans votre code. - Mais il y aura aussi beaucoup de fois où il n'y a pas d'erreurs syntaxiques où vous - avez tout tapé correctement. - Mais il y a encore des choses qui ne s'affichent pas exactement comme vous le souhaitez dans le navigateur -. - Et c'est là que l'outil de développement intervient et devient vraiment un excellent outil pour résoudre - ces problèmes. - D'abord, - Jetons un coup d'oeil à une sorte de situation hypothétique que j'ai mis en place ici dans le code. - Et bien sûr, - vous ne verrez pas ces changements spécifiques dans votre code sur, - et il n'y a vraiment pas besoin que vous suiviez pour cet exemple. - Vous pouvez aller de l'avant et vous asseoir, - vous détendre et regarder. - Hum, - et j'ai mis en place un exemple ici où j'aimerais changer le style de ce paragraphe particulier dans la page. - Donc c'est à l'intérieur de ma section de vente et ce que j'ai fait, c'est que j'ai décidé que , - vous savez, - je voulais avoir tout ce paragraphe et peut-être, - vous savez, - du texte à différents endroits de mon site Web. - Hum, - avoir cette classe de surbrillance qui changerait le texte en une couleur bleue. - Donc normalement, ce texte de paragraphe est noir, - comme vous le savez, - et nous allons changer ça pour devenir bleu. - Je suis allé de l'avant et j'ai ajouté cette classe de point culminant à cet élément. - Et puis si je viens dans mon style point CSS, - vous pouvez voir ici en ligne 87 que j'ai créé une classe de surbrillance et le définir pour avoir - la couleur du bleu. - Donc, à ce stade, - Je suppose que tout a été fait correctement dans ce texte apparaîtra dans le navigateur - comme étant bleu. - Maintenant, - étrangement, - quand je vais au navigateur et je rafraîchis la page, - vous remarquerez que ce texte, - en fait, n'est pas bleu mais est en fait lu. Au lieu d'arracher mes cheveux ou de dépenser, peut-être des heures à creuser toutes mes lignes de code CSS pour comprendre où jeme suis contredit. peut-être des heures à creuser toutes mes lignes de code CSS pour comprendre où je - C'est une excellente situation pour intervenir et utiliser les outils de développement. Je ne vais pas montrer les outils de développement et tous les différents navigateurs. - Mais je vais fournir quelques liens au bas de cette vidéo où vous pouvez en apprendre plus sur - les outils de développement pour Firefox et Safari. - Mais je vais montrer comment utiliser les outils de développement pour résoudre un problème comme celui-ci dans Google - Chrome. - Donc, l'une des façons que vous pouvez ouvrir votre panneau de développement dans Google Chrome est si vous allez - à la vue, - menu déroulant et vous remarquerez ici qu'il ya une sélection appelée Développeur. - Et en vertu de cela, - nous avons la possibilité d'apporter des outils de développement ici afin que vous puissiez aller voir outils de développeur - développeur et qui fera apparaître ce panneau comme ceci. - Maintenant, - à tout moment, - si vous voulez fermer votre panneau développeur sur le côté gauche, - il y a un petit X ici. - Vous pouvez aller de l'avant et cliquer dessus pour le fermer, - puis vous avez à nouveau votre vue complète du navigateur. - Une autre façon que vous pouvez faire apparaître des outils de développement est en inspectant un élément spécifique pour - voir le code HTML et CSS qui est le style ou affectant cet élément dans votre mise en page. - Et pour ce faire, - ce que vous voulez faire est que vous voulez faire un clic droit sur l'élément qui leur intéresse - l'inspection. Comme j'ai une souris à deux boutons ici, je peux juste faire un clic droit. - Et si vous étiez sur un ordinateur portable Mac, - vous pouvez utiliser deux doigts et cliquer, - Um, - ou vous pourriez maintenir le contrôle et faire le clic gauche, - donc le contrôle et un clic fera monter ce menu et encore. - Si vous avez une souris à deux boutons comme moi, - vous pouvez simplement faire un clic droit et faire monter ce menu. - Et puis nous allons aller inspecter Element juste ici, - et cela fera apparaître le panel des développeurs. - Et non seulement cela fait apparaître le panneau développeur et met en évidence l' élément spécifique que je suis intéressé à inspecter, - Donc si nous venons ici sur le côté gauche de cela, - nous sommes actuellement sur le panneau des éléments et nous apprendrons un peu plus tard. - Nous allons en apprendre un peu plus sur ces autres onglets, - mais en ce moment, nous allons juste explorer le panneau des éléments et vous pouvez voir ci-dessous. - Nous avons tout le code HTML qui est disposé. - Um, - et ils vous donnent même des petites flèches où vous pouvez développer et réduire les différents - parents pour voir les autres éléments HTML qui sont imbriqués à l'intérieur. - Et quand il est sélectionné comme ça, - Je suis aussi capable de voir tout le CSS. - Ça affecte cet élément. - Donc, - vraiment, - chaque fois que je clique sur ah, - d'un élément à l'autre comme ça, - vous pouvez voir que le CSS change son sur Lee, - me montrant le code CSS qui est appliqué à ce élément. - Donc, dans notre cas, - affaiblir découvrir quelques choses sur ce paragraphe particulier, - par exemple, - comme faras de la CSS. - C'est ça qui le gouverne. - Nous savons que dans le fichier CSS point normalisé en ligne 63. - On me dit qu'il hérite de la famille de polices de San Serif, - et il nous dit ici que ce style est hérité du sélecteur HTML ici. - Ok, - nous avons aussi des informations sur la feuille de style des agents utilisateurs, - et l'agent utilisateur est essentiellement mon navigateur. - Cela signifie que Google Chrome ajoute ce style par défaut. - Il dit que dans Google chrome que les paragraphes sont définis pour afficher le bloc et qu'il a - une quantité spécifique de marge entourant le paragraphe. - Nous concédons également ma feuille de style personnalisée, - qui s'appelle Style, - que CSS a trois styles différents qui affectent ce paragraphe particulier. - Il me dit que l'un d'eux est en ligne. - 19. - Donc, vous pouvez toujours lire cela en voyant le nom du fichier, puis après le deux-points, - il va effectivement vous dire la ligne spécifique dans le code où vous pouvez trouver ce style à si - ici en ligne 19 de style point CSS. - Je peux voir que j'ai appliqué une taille de police de 16 pixels et une hauteur de ligne de 1,5 m. - Ok, - Je peux aussi voir qu'en ligne 87 j'ai appliqué une classe de surbrillance et lui a dit d'avoir la - couleur du bleu. - Cependant, - vous remarquerez qu'ici la couleur bleue est en fait barrée. - Chaque fois que vous voyez une des propriétés barrées comme ça, - ce qu'il fait, c'est vous dire que ce style est remplacé par un autre style -. - Et dans ce cas, - si je regarde ici juste quelques lignes au-dessus de cette classe de surbrillance, je me suis contredit. - Et ici, j'ai utilisé un sélecteur de descendant où j'ai sélectionné l'élément dans ce cas, - la section avec l'idée de vente. - Et j'ai dit à tous les paragraphes à l'intérieur d'avoir la couleur rouge. - Donc, dans cette situation, - vous pouvez réellement voir que l'utilisation d'un sélecteur descendant va dominer, - avoir plus d'autorité qu'une classe. Donc la couleur du bleu a été rayée ici, et je vois la couleur rouge pour ce texte. - Maintenant, - si je survole cette déclaration particulière, - vous remarquerez qu'il y a une petite case à cocher que je peux cliquer à côté et qui va activer - et désactiver ce code afin que nous puissions voir quels changements se produisent à l'intérieur de la vue du navigateur. - Donc, - par exemple, - si je clique sur cette petite case à cocher sur la couleur rouge En d'autres termes, - en désactivant ce style, - vous pouvez le voir maintenant. - Le surlignement est en fait, - um a l'autorité de colorer le texte bleu à nouveau. - Maintenant, nous revoyons le texte bleu. - Si je vérifie ça, ça va être lu. - Si je décoche ce style, - ce sera bleu. - Donc ce que ça me dit, c'est que si je veux vraiment que ça soit bleu. - Je vais devoir aller orteil ligne 83 de style point CSS pour enlever cette couleur rouge de ce - style. - Allons-y et essayons ça. - Je vais revenir à mon code ici, - et je vais descendre la ligne 84 ici et je peux voir la couleur rouge. - Donc, si je vais de l'avant et supprimer ce style ou dans ce cas, - je vais juste aller de l'avant et commenter cela, puis je vais enregistrer et revenir au navigateur - et rafraîchir, - et maintenant je peux voir que c'est corrigé ce problème. - Donc, tous les changements que vous faites ici à l'intérieur des outils de développement, - ils ne changeront pas réellement votre code. - Ce n'est pas la même chose que d'entrer dans la sublime taxe et de changer physiquement le code. - En fait, il vous montre juste un aperçu. - Encore une fois, - outils de développement ou simplement vous montrer un aperçu afin que vous puissiez jouer avec - dépanner les valeurs jusqu'à ce que vous obteniez les choses comme vous le souhaitez. - Et puis vous pouvez utiliser les informations telles que le fichier et le numéro de ligne pour entrer dans le - code réel et apporter ces modifications en permanence. - Ok, - donc, - en plus de pouvoir activer et désactiver les styles, - vous pouvez également créer de nouveaux styles en cliquant à l'intérieur d'ici pour taper d'autres choses. - Par exemple, - je conteste les choses avant de l'appliquer dans le code en disant des choses comme, - vous savez, - la taille de la police. - Et puis je peux taper, - tu sais, - comme trois m quelque chose comme ça, - et je peux voir à quel point le texte devient plus grand, - dit Aiken. - Oh, - c'est un peu trop. - Je vais leur dire et voir à quoi ça ressemble. - Et puis je peux dire 1,5 et peut-être que c'est parfait. - Donc, s'il s'avère que je fais comme la taille de la police à 1,5 eux, - je peux alors pas, - pour aller dans le style point CSS en ligne 87 juste ajouter ceci ci-dessous. - Allons-y et vérifions ça. - Encore une fois, - si je rafraîchis cette page, - je vais perdre le style parce que, - rappelez-vous, - et les outils de développement, - vous êtes en quelque sorte juste un aperçu du style. - Donc, si je touche rafraichir, - ce n'est plus 1.5 eux. - Mais je sais maintenant que je peux aller ici et ajouter définitivement au code et en jouant - autour avec les différentes tailles. - J'ai pu les prévisualiser avant de prendre la décision ici de m'engager à cette taille. Donc, si je rafraîchis ça maintenant, je peux voir ce changement se refléter ici. - En plus d'écrire de nouvelles déclarations CSS et de les tester à l'intérieur des outils -, - vous pouvez également modifier les valeurs existantes. - Par exemple, - ici en ligne 19 et style point CSS. - Il a des styles pour mon paragraphe, - tels que la taille de la police et la hauteur de la ligne. - Donc, - par exemple, - si je suis intéressé à jouer avec la hauteur de la ligne au lieu de cliquer pour créer une nouvelle - déclaration, - je peux aussi cliquer et sélectionner la valeur d'une propriété pré-existante comme la hauteur de la ligne. - Donc, la hauteur de ligne existe dans un texte sublime, - et je suis simplement en train de tester une valeur différente afin que je puisse taper une nouvelle valeur ici. - Je peux aussi, - en plus frapper la flèche haut et bas sur mon clavier, - et cela va changer le nombre comme ça. - Donc, - par exemple, - je conteste différentes hauteurs de ligne en appuyant sur la flèche vers le haut ou vers le bas comme ça - bien, - ou je peux taper une quantité précise en tapant 1.4 quelque chose comme ça, - et je peux voir cet aperçu. - Et si j'aime la façon dont il a l'air, - je peux aller de l'avant et ensuite changer cela ici à l'intérieur du code CSS réel. 29. Affichage d'éléments: - Salut. - Bienvenue. - Ceci est diapositives 3.1 mise en page de construction. - Jetons un coup d'oeil à quelques sujets ici qui nous aideront sur le chemin de la création de riel - mises en page de site Web afin que nous puissions positionner des éléments et créer une structure de colonne sur la page. - Il va falloir regarder la manière différente que les éléments s'affichent dans le navigateur. - Nous allons jeter un oeil à quelque chose appelé Box Model, - qui nous permettra d'explorer les capacités de dimensionnement et de mise à l'échelle des éléments ainsi que comment - réduire l'espacement à l'intérieur d'un extérieur d'éléments. - Nous allons aussi jeter un oeil à quelques nouvelles esthétiques de boîte, - nous allons donc apprendre quelques propriétés différentes que nous pouvons utiliser pour donner plus de style à nos éléments. , Dans le passé, nous avons regardé la couleur de fond. - Mais maintenant, nous allons passer à regarder des choses comme ajouter une image d'arrière-plan, - arrondir les coins de nos éléments, - créer une bordure, - ajouter de l'opacité et de l'ombre de la boîte. - On va aussi regarder le flotteur de positionnement. - Positionnement va être votre solution pour créer la structure de colonne et le positionnement - éléments sur la page. - Donc, nous devons d'abord comprendre que tous les éléments par défaut affichent soit l'une des deux façons - dans le navigateur. - Donc, certains éléments dans le navigateur que vous avez peut-être déjà remarqué des exercices précédents - ils s'affichent côte à côte. - Par exemple, - les images utilisant la balise AMG et les liens utilisant la balise A s'affichent souvent côte à côte. - Et c'est la façon par défaut qu'ils vont afficher dans n'importe quel navigateur. - Ah, - et c'est parce qu'ils sont ce que nous appelons dans les éléments de ligne ou les éléments qui s'affichent dans - ligne par défaut. - Donc, dans les éléments de ligne, ils ne peuvent pas accepter un. - Dans la hauteur, - ils ne seront que la taille du contenu. - Donc, le contenu à l'intérieur du four dans l'élément de ligne dictera la largeur et la hauteur de celle de - cet élément, - en d'autres termes et dans les éléments de ligne. - Aussi, - Je n'accepterai pas l'espacement au-dessus ou au-dessous d'eux. - Les éléments intérieurs, - cependant, - ne peuvent pas exister harmonieusement côte à côte sur la même ligne avec d'autres éléments en ligne. - Donc, des exemples d'éléments de niveau bloc que vous avez vus ont été des choses comme des en-têtes ou - paragraphes. - Vous remarquerez chaque fois que vous mettez comme un titre ou un paragraphe. - Les éléments que vous placez après cela apparaissent toujours ci-dessous sur la ligne suivante, - afin que les éléments de niveau bloc puissent accepter la largeur et la hauteur. - Nous pouvons leur donner dans la hauteur, - propriétés pour les dimensionner sur l'écran. - Hum, - et ils peuvent aussi avoir une marge, - qui est qu'ils peuvent avoir un espacement au-dessus et au-dessous d'eux. - Les éléments de niveau bloc prendront toujours la ligne complète sur laquelle ils sont. - En d'autres termes, - un élément de niveau noir ne peut pas exister côte à côte sur la même ligne qu'un autre niveau de bloc - éléments. - Jetons un coup d'oeil à un exemple de ceci. Je vais aller à bricoler point io et j'ai mis en place un exemple de cette fille, et ce site est un peu comme un grattoir. - Um, - c'est similaire à d'autres sites qui, - comme Js violon et bricoleur été qui vous permettent de, - um, - fondamentalement juste sur un CSS html et ou javascript et ceci et voir comment vous connaissez le - résultat de cela. - Voyez comment cela s'affiche dans le navigateur. - D'accord. - Donc, vous pouvez voir que j'ai créé pour creuser dans le html deux développements et donne essentiellement - créer un conteneur ou une boîte à l'écran, - et je leur ai donné une classe générique de boîte. Donc, nous avons la classe de boîte à points juste ici. - J'ai spécifié une classe de boîte, - et je suis allé de l'avant et donné aux éléments une couleur de fond d'aqua, - ce qui lui donne cette couleur bleu clair. J' ai aussi donnéà cette boîte une largeur de 100 pixels et une hauteur de 100 pixels. à - Un peu plus tard, - nous parlerons de toutes les différentes possibilités de dimensionnement. - Mais pour l'instant, - nous pouvons juste regarder la propriété avec et la propriété height, - et nous lui avons donné une quantité fixe de pixels juste pour en faire un carré parfait. - Nous lui avons aussi donné les propriétés, nous n'avons pas vues auparavant, qui s'appelle le rembourrage et la marge. - Donc, le rembourrage est espacement à l'intérieur de l'élément, - et la marge est espacement à l'extérieur des éléments. - Ok, - euh, - et bien, - encore, - on reviendra. - Et quand nous allons plus en détail sur le modèle de boîte discutera un peu plus sur la façon dont - le remplissage et le facteur de marge dans la taille des éléments. - Donc, ces gars ont des baisses d'air. - Nous savons que les développements par défaut, - ils affichent bloc dans le navigateur, - ce qui explique pourquoi la case numéro un apparaît au-dessus de la case numéro deux, - qui apparaît ci-dessous. - Donc nous avons cet empilement vertical. - Pourquoi ? - Parce que ces air par défaut, - ces éléments de niveau de bloc d'air éléments de niveau noir apparaissent l'un au-dessus de l'autre et ils - prennent tout l'espace horizontal. - Il y a le roi de l'espace horizontal. - En d'autres termes, - ok, - donc si jamais je veux changer la façon dont un élément s'affiche, - nous avons aussi la propriété CSS appelée display. - Donc par défaut, - ce type affiche un bloc comme ça. - Mais si j'aime, je peux changer ça en ligne comme ça. - Donc si je change cela en ligne et que je reviens et que je clique sur courir, - nous pouvons voir l'effet il y a que ces boîtes apparaissent maintenant côte à côte. - Donc, quelques choses sont arrivées ici quand nous avons mis ces gars en ligne, - vous avez probablement remarqué que ce n'est plus 100 pixels de large et 100 pixels de haut. - Donc, dès que nous avons mis ceci pour être un élément en ligne, - nous remarquons que dans les éléments de ligne, - Bien qu'ils conduisent place côte à côte, - ils perdent aussi quelques capacités. - Ok, - Donc, - il n'est plus capable d'accepter dans une largeur et une hauteur. - Parce que, - comme je l'ai mentionné dans les éléments de ligne sont seulement aussi larges que le contenu à l'intérieur d'eux. - Donc, si je commençais à taper plus de texte ici, - il serait en fait un peu plus large à droite. - Nous avons aussi le nous pourrions voir la marge, - qui est l'espacement à l'extérieur de l'élément. - On peut voir qu'il existe sur le côté gauche et droit de l'élément. - Cependant, - il n'existe plus en haut ou en bas. - En fait, - les couleurs bleu aqua droit contre le bord du cadre ici parce qu'il n'y a plus - aucun espacement au-dessus. - Ainsi, les éléments de niveau intérieur peuvent exister côte à côte harmonieusement. - Ils ne peuvent pas accepter un avec leur hauteur, - et ils ne peuvent accepter la marge supérieure et inférieure. - Donc encore une fois, - si je change cela en bloc et que je clique sur Exécuter, - vous pouvez le voir. - Il est capable de ah, - sauf la largeur et la hauteur maintenant, - et nous voyons l'espacement au-dessus et au-dessous, - et nous pouvons également voir qu'ils sont empilés verticalement. - Donc il y a une sorte d'hybride ah de ces deux-là. - De nos jours, - la plupart des navigateurs supportent cette méthode suivante, - cette valeur suivante pour l'affichage. - Cependant, - um, - les navigateurs comme Internet Explorer sept et ci-dessous ont limité partielle ou peut-être même savoir - support pour cette valeur particulière, - qui est appelé en ligne. - Le bloc de tableau de bord, - le bloc de bureau intérieur est, - euh, - un peu comme l'enfant d'amour des éléments en ligne et de niveau bloc. - Un peu comme un élément en ligne dans un élément de niveau bloc. - Fait et leur enfant dans le bloc de ligne a une sorte de la qualité, - certaines des caractéristiques des deux parents. - Si tu veux y penser comme ça, c'est une façon stupide de le décrire. - Mais c'est comme ça que ça marche. - Donc, si je mets ce type en ligne de tableau de bord, il est capable d'accepter en hauteur. - Et il est capable d'avoir une marge en haut et en bas. - Hum, - et il peut aussi afficher côte à côte. - Il y a donc quelques avantages uniques de la ligne en ligne. - Ah, - l'élément de bloc en ligne. Et selon ce que tu essaies de faire, ça pourrait marcher pour toi. Et selon ce que tu essaies de faire, - Ok, - il y a une sorte de résultats inattendus. - Occasionnellement, - lorsque vous utilisez dans le bloc de ligne dans une mise en page, - et au lieu de montrer tous ces exemples, - cherchez un lien sous cette vidéo. - Hum, - et il y aura un lien de ressources. - Ce sera à un bon article en ligne qui parle de certaines des folies. - Eh bien, - en quelque sorte. - Certaines des bonnes parties et les mauvaises parties de l'utilisation en bloc de ligne pour afficher les éléments. - Ok, - euh, - néanmoins, - on va apprendre Teoh. - Ah, - une méthode alternative au positionnement des éléments de niveau bloc. - C'est une structure de colonne comme celle-ci appelée positionnement flottant ou flottant qui va vraiment résoudre tous nos problèmes et construire des mises en page. - Mais néanmoins, - Je voulais vous montrer les différentes façons que les éléments peuvent afficher dans le navigateur. - Et je voulais aussi attirer l'attention sur le fait qu'en utilisant cette propriété, - l'affichage de la propriété CSS, - nous pouvons réellement changer la façon dont un élément s'affiche si nous le choisissons. 30. Modèle de boîte: - Donc d'abord, nous pouvons regarder taping, - ce que j'ai mentionné. - Patting est l'espacement à l'intérieur d'un élément, - et puis nous avons la marge, - qui est l'espacement à l'extérieur d'un élément. - Nous avons également la propriété de bordure, - que nous pouvons lui donner une épaisseur et des couleurs ainsi pour ajouter une bordure, - qui est une ligne ou un trait sur le bord d'un élément aussi bien. - Maintenant, toutes ces différentes pièces en pièces s'ajoutent à la mesure de la largeur et - hauteur de l'élément. - Et c'est vraiment ce qu'est le modèle de la boîte. - Jetons un coup d'oeil à cette image. Ce diagramme montre le modèle de boîte, , et ce qu'ils vous montrent ici, c'est que la marge est l'espacement en dehors des éléments. - Donc, cela pousse sur d'autres éléments qui peuvent être positionnés à côté de cet élément de sorte que - ils ne sont pas droit les uns contre les autres. - C'est donc une sorte confortable de tampon ou d'espacement entre les éléments, - et vous pouvez voir ici vous pouvez spécifier la marge pour la marge supérieure, - marge inférieure gauche et les droits de marge. - La bordure peut être n'importe quelle taille. - La bordure peut être d'un pixel d'épaisseur. - Elle peut être de 10 pixels d'épaisseur. - Vous pouvez spécifier différentes tailles de bordures, - et cela va être une épaisseur supplémentaire de trait sur le bord extérieur de votre élément -. - Maintenant, - à l'intérieur de la frontière, - nous avons quelque chose appelé rembourrage, - donc tapoter est l'espacement à l'intérieur des éléments. - Donc si j'ai tapé du texte à l'intérieur d'ici, - si je tape bonjour , - monde, - si je ne veux pas que ce texte soit juste au bord de ma boîte, - alors ce que je peux faire, c'est ajouter un type de remplissage ici, - tapotement à gauche, - rembourrage à droite, - tapotement en haut ou en bas pour pousser le contenu loin du bord de l'élément. - Pour voir cela, - la façon la plus simple de voir le remplissage et l'action est de donner une couleur d'arrière-plan à votre élément - ou de donner une bordure afin que vous puissiez voir le contenu à l'intérieur de l'élément se déplacer - loin de la bordure ou de voir un quantité confortable d'espacement entre le bord de la - couleur de fond et le Khan, - où le contenu commence ici. - Ok, - donc les couleurs de fond iront derrière, - rembourrage jusqu'au bord de l'élément jusqu'à la bordure. - Donc, le modèle de boîte est composé du contenu avec le rembourrage, - la bordure, - et ensuite la marge est maintenant si les choses n'étaient pas assez compliquées, - je dois vous parler de l'existence de deux modèles de boîte différents. - Donc, la façon dont il s'avère que les navigateurs comme Firefox, - Safari et Chrome ont tous utilisé un modèle de boîte connu sous le nom de W trois C modèle de boîte. - Donc, le W trois C est dicté que lorsque nous spécifions le avec ou la hauteur d'un élément, - nous parlons de l'espace disponible à l'intérieur de cet élément pour le contenu. - Et si j'ajoute un rembourrage ou une bordure ou une marge, - c'est supplémentaire sur le montant supplémentaire que nous devons ajouter à la largeur. - Ok, - donc ce que je veux dire par là c'est disons que j'ai une boîte un div, - par exemple. - Et je spécifie que ce def devrait être de 200 pixels de large. - Je décrit cela avec, - um ici, - qui est le contenu avec Donc si je dis avec 200 pixels en feu, - Fox dans Safari, - dans Chrome et dans opéra que 200 pixels va constituer la quantité d'espace disponible - pour le contenu à l'intérieur de votre élément. - Maintenant, - si je spécifie aussi le rembourrage, - qui est l'espacement à l'intérieur de l'élément. - Disons que je spécifie 10 pixels de rembourrage qui va ajouter 10 pixels sur le côté gauche et - 10 pixels sur le côté droit. - Alors maintenant, - au lieu d'être de 200 pixels de large, - vous savez, - si je spécifie avec 200 pixels et tapotant 10 pixels, - la mesure réelle de cet élément est maintenant de 220 pixels. - Pourquoi demandez-vous ? - Parce qu'au départ on a dit que c'était 200. - Mais tapoter que nous devons ajouter est un montant supplémentaire. - Donc tapting n'est pas inclus dans la largeur, - Um, - dans la valeur avec en utilisant les navigateurs, - tous les navigateurs qui respectent le modèle de boîte W trois C. - Donc 200 pixels de large plus 10 pixels de tapotement ici et 10 pixels de tapotement ici rend cet élément en fait, 220 pixels maintenant, - ok, - vous pourriez vous demander pourquoi vous vous soucieriez de tous ces calculs. - Eh bien, - il s'avère que lorsque nous commençons à construire une structure de colonne que nous devons savoir comment - ces colonnes sont pour qu'elles puissent réellement s'adapter côte à côte. - Vous avez seulement tellement d'espace d'écran ou d'écran immobilier est, - nous l'appelons, - et vous devez faire ces choses harmonieusement adapter côte à côte. - Donc, c'est une chose à garder à l'esprit est que le feu Fox Safari, - chrome et opéra utilisé la méthode de modèle de boîte W trois C maintenant, - en revanche, - Internet Explorer a sa propre méthode de modèle de boîte. - Ok, - donc dans la méthode de modèle de boîte Internet Explorer, - lorsque vous spécifiez 200 pixels de largeur qui va effectivement inclure automatiquement une bordure ou un remplissage. - D'accord, mais pas de marge. - Aucune des méthodes de modèle de boîte, - y compris la coupe de marge. - Mais la principale différence entre la façon dont Firefox safari et chrome et opéra considèrent le dimensionnement - d'un élément par rapport à la façon dont Internet Explorer considère le dimensionnement d'un élément est à savoir, - qu'Internet Explorer inclut automatiquement la bordure et le remplissage. - Donc ce que cela signifie, - disons que je dis que mon div a 200 pixels de avec ok dans les deux navigateurs, - disons que je dis que mon div a 200 pixels de avec ok dans les deux navigateurs, - Les deux navigateurs regardent le même code et nous disons 200 pixels de large et 10 pixels de - rembourrage gauche et droite. - Ok, - on va laisser la frontière hors de lui pour l'instant. - Mais imaginez que nous avons 200 pixels dans 10 pixels de rembourrage sur tous les côtés. - Donc, dans la méthode de modèle de boîte Internet Explorer, - l'élément va réellement apparaître à 200 pixels. - Donc, si vous dites 200 pixels, - ce sera 200 pixels. - Mais l'espace de contenu disponible à l'intérieur n'est que de 180 pixels d'espace pour le contenu car - 10 pixels sur le côté gauche sont pris par le remplissage, - et 10 pixels sur le côté droit sont pris par le remplissage. - Donc, avec que 200 pixels de avec, - nous devons soustraire 20 pixels, - ce qui nous donne 180 pixels espace disponible pour le contenu, - bien que l'élément lui-même sera Onley prendre 200 pixels de large. - Ok, - Et c'est encore une fois, - en revanche, - la méthode W trois c, - où, - au lieu de soustraire les 20 pixels de rembourrage de l'intérieur, - nous devons l'ajouter au à l'extérieur. - D'accord, donc littéralement, - si je devais dire, - avec 200 pixels rembourrant 10 pixels de tous les côtés dans AII et Internet Explorer, - la boîte aurait l'air de 200 pixels de large comme nous l'avons dit. - Cependant, - dans Firefox safari, - chrome et opéra, - il serait en fait plus large dans ce navigateur. - Ce serait 220 pixels. - Yikes. - Ça ressemble à beaucoup de tracas et de travail. - Et en fait, - c'était dans le passé. - Ça a vraiment fait tomber beaucoup d'entre nous développeurs. - C'était une grande source de gêne pour moi. - Personnellement, - je sais que je peux dire, - mais heureusement pour vous, - vous les gars, le code d'apprentissage aérien à un moment où il y a de bonnes solutions en place pour corriger toutes ces absurdités. - Mais, - vous savez, - au fil du temps, il y a eu beaucoup de solutions différentes pour ça, - et je vais parler de certaines d'entre elles, - et nous allons parler de pourquoi certaines d'entre elles sont acceptables à utiliser et pourquoi certaines d'entre elles - ne devrait certainement pas faire pour corriger cette différence de modèle de boîte. - Donc ce sont des solutions de piratage. - Donc, à partir de CSS un et deux, - il y avait quelques solutions de piratage différentes où vous aviez tapé le code un peu - différemment pour le rendre affiché différent pour chaque navigateur. - Nous allons également regarder une méthode appelée box dans une boîte, - et nous allons également jeter un oeil à une nouvelle méthode que je vous recommande d'utiliser pour votre - projet, - qui est appelé la propriété de dimensionnement de trois boîtes CSS. - Ok, - donc d'abord, - parlons de vieux hacks CSS et ne faisons pas ça. - Donc, dans le passé, - quelqu'un a compris que si vous mettez des caractères incorrects dans la propriété CSS comme barre oblique - marque que certains navigateurs ignoreront la barre oblique et un autre navigateur, - um, - un autre sera en fait toujours le traiter et le lire. dire, Un navigateur pourraitdire, ça je peux Onley comprendreçaavec 100 pixels parce qu'il est écrit correctement. - Et puis vous écririez les esprits plusieurs fois, - mais pour un navigateur différent. - Donc un autre navigateur, - parce que vous mettez une barre oblique ici, - il l'ignorerait. - Et pourtant un navigateur serait encore, - euh, - sauf cette valeur et puis le changer orteil 1 40 Donc pour rattraper la cuisson pour le - fait qu'Internet Explorer affichait différemment. - Ce que les gens feraient, c'est qu'ils mettraient de petites barres obliques et caractères amusants dans les attributs - largeur et hauteur, - et ils appliqueraient, - vous savez, - plusieurs CSS indiquant à différents navigateurs d'afficher le avec de différentes manières. - Cela vous donne en fait une erreur de validation. - Si vous validez votre CSS, - il donne un air. - C'est comme une solution bizarre. - Je n'aurais pas vraiment confiance en ça. , La seule raison pour laquelle vous ne devriez pas utiliser ça, c'est même si ça marche maintenant, n'y a aucune garantie que ces choses vont marcher à l'avenir. - Et vous ne voudrez pas avoir à revenir sur votre site des années plus tard et supprimer - une sorte de code piraté comme celui-ci. - Alors n'utilise pas cette méthode. - Cette autre méthode est appelée boîte dans une méthode de boîte, - et cela fonctionnera dans tous les navigateurs, - anciens et nouveaux. C' est un peu plus de tracas que la dernière méthode que je vais te montrer, mais celle-ci fonctionne. - Et, - um, - c'est un peu centré sur l'idée que la seule différence entre les deux modèles concurrents - boîte est que l'un d'eux, - sauf le rembourrage et la bordure dans l'esprit et l'autre ne inclure tapotement et - bordure dans le avec. - Donc vraiment, - si vous faites une boîte qui n'a pas de rembourrage ou de bordure dessus, - alors il n'y a pas de différence entre tous les navigateurs. - Donc, cette méthode nécessite un code de balisage supplémentaire, - c'est pourquoi beaucoup de gens n'aiment pas cette méthode. - Ce qui est personnellement l'une des choses que je ne suis pas tout à fait sûr de cette méthode est qu'elle - implique toujours d'avoir à faire deux boîtes au lieu d'une. - Mais la façon dont ça fonctionne, c'est de créer une boîte extérieure. - Donc, ce div ici est l'extérieur, - et celui-ci a un esprit spécifié, - mais il n'a pas de marge, - pas de rembourrage et pas de bordure. - Nous devrions avoir écrit Border zero ici aussi, - mais vous obtenez le point donc il a une largeur et une hauteur spécifiées, - peut-être, - mais pas de rembourrage et pas de bordure sont les principales choses importantes ici. - Donc celui-ci va afficher cette boîte externe va afficher la même dans tous les navigateurs - parce qu'il n'y a pas de rembourrage inclus et pas de bordure incluse. - Oui ? - Donc c'est Faras Firefox et Safari et Internet Explorer concernés. - Il fait 100 pixels de large car il n'y a pas d'inclusion de remplissage ou de bordure. - Um, - et puis pour Internet Explorer, - il voit aussi qu'il est 100 pixels de large. - Mais vous pourriez vous demander, mais si je veux avoir du rembourrage ? - Et si je ne veux pas que tout mon contenu soit à la limite de mon élément. - Je veux un espacement confortable pour le I. - Donc ce que vous pouvez faire là, - alors, - est que vous pouvez créer une autre boîte à l'intérieur de l'élément une boîte intérieure, - par exemple. - Et celui-là, on peut lui donner du rembourrage. - Donc ce gars ici a un rembourrage à l'intérieur, - mais nous avons délibérément pas spécifié un avec. - Donc, si vous faites cette méthode, - cela fonctionnera réellement dans tous les navigateurs. - Mais votre code HTML est deux fois plus de lignes de code, - généralement parce que vous avez chaque élément a une boîte à l'intérieur d'une autre boîte. - Ok, - donc de nos jours, nous avons le CSS 3. - Nous avons cette merveilleuse propriété qui est venue le long appelé Box Dash Sizing, - donc je peux dire à mes éléments d'avoir la taille de la boîte, - et je peux spécifier comment il devrait mesurer pour que je puisse forcer, - vous savez, - tous les navigateurs à soit utiliser le modèle Internet Explorer, - qui est appelé Border Dash box. - Ou je peux forcer tous les navigateurs à utiliser le modèle W 3, - euh, - euh, - appelé la boîte de tableau de bord de contenu. - Ok, - donc ici, j'ai écrit que cela a 94,3% soutien, - au moins au moment de l'enregistrement de cette vidéo, - la quantité de navigateurs que les gens utilisent dans le monde entier qui soutiennent ou - comprendre la taille de la boîte de trois propriétés CSS n'est pas d'environ 94%. - Maintenant, les bonnes nouvelles à ce sujet sont que les navigateurs qui ne comprennent pas que petit - pourcentage qui ne comprennent pas cette propriété de taille de boîte est arrivé à être Internet - Explorer versions plus anciennes d'Internet Explorer comme I E sept et ci-dessous. - Donc, il s'avère que ces anciennes versions de IE ils utilisent réellement cette mesure le i E - modèle de boîte. - Donc, si vous définissez votre taille de boîte sur la boîte de tableau de bord, - vous devriez vraiment avoir un soutien à 100%. - Alors que si vous l'avez dit à la valeur de la zone de contenu de la méthode W trois. - Si vous écrivez la boîte de contenu ici, - vous avez vraiment seulement environ 94% support. Dans ce cas, je laisse passer la politique en termes de qui a raison ou qui a tort. - Et j'aime utiliser la méthode de modèle de boîte I E en disant boîte de tiret de taille Border box. - Cela va faire votre positionnement flottant et votre mise en page dans la taille de vos colonnes -. - Tellement plus sans souci et sans tracas, - que vous verrez au fur et à mesure que nous passons à l'exercice suivant, - où nous construisons une mise en page. - Ok, - donc voici le tableau que je vous montrais, - et vous pouvez voir que c'est vraiment IE 7 est le coupable. - Parlons donc des éléments de mise à l'échelle. - Certains éléments peuvent avoir une taille fixe en pixels. - Vous pouvez utiliser des pixels pour créer une quantité statique ou fixe de avec leur hauteur et sur tous - appareils, - tous les écrans. - Il aura toujours cette certaine quantité de pixels. - Vous pouvez également utiliser un pour cent pour mettre à l'échelle les choses, - donc c'est juste de la même façon que je peux dire, - 200 pixels de large. - Je peux aussi dire, - comme 100% de large ou 50% de large et utiliser un pour cent va rendre la quantité fluide, - ce qui signifie qu'il va répondre à la taille de l'appareil. - Il peut en fait, - euh, - vous savez, - rétrécir et étendre ah, - pourcentage de l'espace disponible à l'écran en fonction de la valeur que vous mettez avant le - pourcentage. - Nous avons également la possibilité de définir la largeur du tableau de bord des hommes et le tableau de bord Max avec ou min hauteur du tableau de bord et - hauteur maximale du tableau de bord. - Donc, en définissant les valeurs minimales et maximales. - Vous avez un seuil où il ne sera jamais mis à l'échelle en dessous de la valeur minimale ou au-dessus de la valeur maximale . - Donc, l'élément peut toujours, - um, - développer dynamiquement sur la page en fonction de la taille de l'appareil ou de la taille de la fenêtre du navigateur. - Mais vous aurez un point d'arrêt, - un seuil minimum où il s'arrêtera à. - Il cessera de se rétrécir au niveau des hommes avec ou de la hauteur des hommes, - et il cessera de croître au maximum avec ou la hauteur maximale. - Ok, - nous avons aussi une valeur appelée auto et auto est vraiment la valeur par défaut avec ou hauteur. - Fondamentalement, - définir A avec leur auto haut orteil est essentiellement le même, - ne spécifie pas un avec leur hauteur, - une largeur d'auto sur un élément en ligne sera fondamentalement, - comme vous le savez, - juste autoriser le contenu. - Excusez-moi. - L'élément toe seulement BIA est large est le contenu par rapport à un élément de niveau bloc. - Si vous définissez quelque chose à une largeur d'auto, - les éléments de niveau noir prendront effectivement sans A avec spécifié, - ils prennent effectivement 100% ou toute la largeur de l'écran, - donc auto sera, - vous savez, - faire des choses différentes pour la largeur et la hauteur, - selon la façon dont l'élément est affiché, - qu'il s'agisse d'afficher dans le bloc de ligne ou dans le bloc de tiret de ligne. - Ok, - Parlons aussi du contenu. - Débordement. - Alors que faire si je mets un fixe avec un élément, - mais alors il y a plus de contenu que ce qui conviendra, - alors nous allons tenir à l'intérieur de cet élément. - Et si je fais un carré de 100 par 100 pixels et que je place beaucoup de contenu à l'intérieur et - ça ne correspond pas ? - Eh bien, - il s'avère que vous pouvez réellement changer cela en définissant la propriété de débordement sur visible, - caché ou défilement. - Jetons un coup d'oeil à ce très rapide dans le navigateur afin que nous puissions utiliser ces exemples. - Ici, nous avons les boîtes un et deux, - et, - hum, - commençons juste à ajouter un peu plus de contenu ici dans la boîte. - Je vais commencer à taper comme ça. - Peut être faire quelques retours de ligne ici. - Je tape juste du jargon ici. - Ok, - allons faire ça et voir ce qui se passe. - Ok, - donc ça a fait exactement ce dont on parlait. - Hum, - et aussi nous sommes partis. - C'est dans le bloc de ligne. - Vous pouvez commencer à voir certaines des choses étranges, - goofy que dans les éléments de bloc de ligne font. - Je vais revenir en bloc, donc c'est un peu moins déroutant. Donc cette première boîte, il n'y a que le Texas en dit un. Donc cette première boîte, - Cette boîte suivante dit à, - Mais nous avons tapé plus de texte et va tenir. - Alors regardons la différence sur un élément de niveau bloc quand nous spécifions une hauteur ou nous l'avons fait - pas spécifier une hauteur. - Donc ici, nous avons la hauteur spécifiée de 100 pixels. - Allons-y et définissons ceci l'auto, - ce qui est vraiment l'équivalent de ne pas spécifier de hauteur. - On pourrait vraiment effacer cette propriété. - C'est la hauteur. - Auto est vraiment la même si on efface juste ça ? - Ok, - donc ah, - hauteur de l'auto ou ne pas spécifier une hauteur sur un élément de niveau noir, - ou en fait aussi sur un élément en ligne, - permettra au contenu de croître Aziz autant qu'il a besoin pour s'adapter au contenu. - Donc, beaucoup de fois ont été délibérément ne pas spécifier une hauteur. - Si vous avez une boîte dans votre mise en page et que vous savez que vous dites avoir plusieurs articles de nouvelles et - vous n'êtes pas sûr de combien il y en aura ou dans le futur, - vous pourriez la mettre à jour. - Vous pourriez avoir de plus en plus d'articles. - Hum, - souvent, - vous ne spécifiez pas la hauteur parce que quand aucune hauteur n'a spécifié les éléments vont juste - grandir aussi haut qu'il en a besoin, il va se développer en fonction de la quantité de contenu à l'intérieur de celui-ci -. - Ok, - euh, - revenons en fait à spécifier la hauteur. - Alors donnons à ça une hauteur fixe comme avant. - Donc nous allons dire, - hum, - Heights Colon 100 pixels. - D'accord. - Et on va recommencer. - Ok, - Excellent. - Donc, quand je donne à cela une hauteur fixe, - je dois être prudent parce que cette hauteur n'est pas assez grande pour tout le texte que j'ai tapé - ici. Maintenant, on peut contrôler ça en utilisant une propriété appelée Overflow. - Alors venons ici et disons Overflow, - Colon et essayons un Hidden. - Disons que le débordement est caché. - D'accord. - Et puis on va faire ça et voir ce qui se passe. - Donc débordement, - bien caché, - cache en fait tout contenu qui déborde de la hauteur ou de la largeur de l'élément. - Donc, c'est en fait couper le contenu là-bas. - Je ne peux pas le voir. - temps, vous pourriez vouloir l'utiliser si vous faites quelque chose d'un peu plus dynamique. - Si vous passez à JavaScript, - par exemple, - vous pouvez utiliser le débordement caché, - um, - vous savez, - jumelé avec du JavaScript pour animer ou diapositive contenu à l'intérieur d'un plus petit fixe - conteneur. - Donc, - par exemple, - si vous construisez un curseur d'image, - vous pouvez définir un élément pour avoir son débordement sur caché, - et vous pouvez faire des images mawr qui s'adapteront à l'intérieur de ce cadre. - Et puis vous pouvez utiliser JavaScript pour les animer. - Donc une flèche déplace ces images à gauche et à droite, - et vous n'êtes capable de voir qu'une image à la fois, - les autres air cachés parce que vous avez le débordement défini comme un exemple pour - l'utilisation de cela, - um, - vous avez aussi des gens qui font parfois quelque chose appelé Overflow Auto. - Voyons ce que ça fait. - Si je change l'auto débordé, - je reçois une barre de défilement. - Donc, dans la ligne Lyon et Mac, - vous pouvez ne pas voir la barre de défilement parce que vous devrez passer le curseur sur. - Et puis si vous, - um si vous utilisez le contact de deux doigts sur le pavé tactile ou votre molette de défilement de la bouche, - il fera défiler C'est juste qu'ils cachent la barre de défilement ici, - mais vous pouvez voir dans les fenêtres et aussi dans ah - Mac Snow Leopard. - Tu verras. - La plupart des navigateurs vont créer une barre de défilement ici. - Donc, si le contenu est plus grand que ce qui conviendra, - si nous définissons l'orteil de débordement automatique obtiendra effectivement une barre de défilement apparaîtra. Dans ce cas, j'ai une barre de défilement verticale. - Le contenu était très large. - Je prendrais un rouleau horizontal. - Bar est bien, - ok, - donc c'est la propriété de débordement, - qui est utile pour contrôler. - Um, - vous savez comment le contenu à l'intérieur d'un élément va couler, - débordement en dehors de l'élément ou non. - Ok, - super. - Hum, - puisque nous avons regardé à quel point il répond à nouveau, - nous avons remarqué que si nous réglons la hauteur sur auto ou si nous enlevons la hauteur, - nous avons remarqué que le contenu se développe simplement aussi haut qu'il doit être. - Jetons un coup d'oeil à ce qui se passe si nous définissons l'avec l'auto ou, - en d'autres termes, - si nous enlevons simplement la coupe de largeur. - Encore une fois, - euh, - ces éléments de niveau de bloc d'air ou ils affichent bloc. - Et si je ne spécifie pas A avec pour les éléments de niveau bloc, ils obtiennent juste est large comme ils peuvent l'être -. - Ils occupent essentiellement 100% de l'espace à l'écran. - Ok, - ce qui est exactement ce que nous voulons. - Parfois. - Occasionnellement, - nous voulons quelque chose pour étirer toute la largeur de l'écran, - et vous pouvez simplement utiliser un élément de niveau de bloc et ne pas spécifier c'est C'est avec vous. - Pourrait aussi dire que c'est avec 2 100% si vous voulez. - Ok, - euh, - Jetons un coup d'oeil aux différentes possibilités de dimensionnement alors. - Donc nous avons regardé, - euh, - nous avons regardé l'affichage en ligne contre bloc. - Nous avons cherché à définir la largeur et la hauteur auto ou à fixer les montants de pixels. - Et nous avons regardé comment le débordement réagit s'il n'y a pas assez d'espace pour que le contenu s'adapte - à l'intérieur de l'élément. - Ok, - euh, - alors jetons un coup d'oeil à quelques autres possibilités de largeur et de hauteur. - Um, - revenons ici avec et essayons un pourcentage. - On a regardé les pixels à nouveau. - Je vais le faire. - C'était là, c'est 200 pixels, - par exemple. - Je peux aller de l'avant et changer avec leur et courir, - et vous pouvez voir 200 pixels de avec leur Que faire si je dis quelque chose comme 50% ? - Donc nous allons prendre le P X ici et nous allons mettre 50% comme ça et courir, - et vous pouvez voir qu'il prend en fait 50% du disponible avec ici. - Vous remarquerez si j'ai croqué ce type comme ça. - Tu vois comment c'est toujours exactement la moitié de cet espace là-bas ? - Ok, - donc, - par exemple, - si j'aimais, - 75 % à titre d'exemple, - ça prend alors 75 % de la broche à l'extérieur, - bien sûr, - et le rembourrage à l'intérieur parce que nous n'avons pas encore défini la propriété de dimensionnement de la boîte, - mais vous pouvez voir qu'il occupe environ 75% de l'espace là-bas. - Ok, - donc c'est une taille fluide. - Parfois, nous voulons avoir la taille des choses, - Ah, - échelle basée sur la largeur de l'espace disponible à l'écran. - Et ça utilise un pourcentage. Jetons aussi un coup d'oeil à Min et Max Value, donc je vais changer ce type pour un homme avec des hommes Dash Wits Museum sur ça. - C'est plus facile à voir pour qu'on puisse sauver des hommes. - Dash avec, - nous allons sortir et dire 200 pixels. - Et nous allons également spécifier un tiret max avec et nous dirons comme, - 600 pixels comme ça. - Ok, - donc les hommes tirent avec et tableau de bord Max avec Vous pouvez aussi faire la hauteur du tableau de bord min et la hauteur maximale du tableau de bord et - nous allons cliquer. - Courez. - Donc c' est en fait le maximum de 600 pixels avec ce qu'on voit ici en ce moment. - Même si je donne plus d'espace sur l'écran, - Onley sera un maximum de 600 pixels là-bas. - Et dans ce cas, - c'est 600 pixels plus le rembourrage et plus la marge parce que je suis en chrome, non ? Voyons ce qui se passe si j'écrase ça, je vais faire glisser cette fenêtre pour lui donner moins d'espace disponible. Voyons ce qui se passe si j'écrase ça, - Ok, - donc j'ai atteint le bord. - Oh, - regardez, - il réduit sa mise à l'échelle vers le bas. - Pas de problème. - Ça va continuer à diminuer jusqu'à ce que j'atteigne ce minimum avec et puis ça va manquer de place. - Ok, - donc là, - quand je descends au minimum avec vous pouvez voir que nous avons effectivement une barre de défilement ici en bas - de l'écran ici, - et je dois utiliser cette barre de défilement pour faire défiler et voir le reste de la contenu. - Et c'est parce que nous avons utilisé les seuils de, - vous savez, - un montant maximum de 600, un minimum de 200 comme ça. - Et encore une fois, - il va juste se développer jusqu'à ce que nous arrivions au maximum avec. - Et ça s'arrêtera. - Ok, - super. - C'est un bon début. - Comprendre le modèle de boîte. - Revenons et parlons de certaines des autres qualités du modèle de boîte telles que la marge - et le rembourrage et la bordure. - Commençons par ajouter une bordure à ce type. - On va venir ici et on va ajouter une bordure à ces boîtes. - Disons bordure deux-points un pixel, - qui est la largeur de la bordure. - Et puis je vais mettre un espace, - et je vais spécifier le style des frontières allaient juste faire solide. - Et si vous voulez voir un exemple des autres styles de bordure, - sera regarder cela à venir dans les diapositives ici dans un instant. - Ah, - et on peut lui donner une couleur. - Je vais juste dire que le noir spécifiera la couleur noire. - On y va. - Alors on reviendra et on va faire ça et il y a ma frontière. - Plutôt cool, non ? - Donc je peux en fait, - vous savez, - changer ça si vous voulez voir, - comme à quoi ça ressemble à 10 pixels, - si je dis 10 pixels de bordure et que je cours, - vous pouvez voir qu'il fait ça. - Passons du solide au pointillé afin que nous puissions montrer où le bord de l'arrière-plan - la couleur se termine ici. - Donc, si je dis 10 pixels pointillés et je clique sur courir, - vous pouvez voir que c'est maintenant une ligne pointillée pour la bordure et vous pouvez voir la couleur de fond - va jusqu'au bord de la bordure juste là. On va rendre ça un peu plus mince, cependant. - Je vais retourner à un pixel solide comme ça. - Et, - hum, - jouons avec l'espacement, - alors. Donc on a parlé de marge et de rembourrage. - Je vais aller de l'avant et me changer. - Ce type est avec Teoh. - 101 100. - Alors on va rester. - 100 pixels. - 100 pixels. - Utilisé pour les rendre petits, - gérables. - Petites petites boîtes gérables être plus faciles à voir ici. - Eh bien, - alors on pourra zoomer plus près comme ça. - Jetons un coup d'oeil au rembourrage. - Maintenant, nous avons mentionné le rembourrage est espacement à l'intérieur de l'élément. - Si vous voulez vraiment voir de quoi il s'agit ici, - mettons-nous ce rembourrage à zéro et voyons ce qui se passe là-bas. - Nous allons cliquer sur Exécuter et vous pouvez voir quand nous mettons le remplissage à zéro. - Le texte est juste contre le bord de la bordure là-bas, - donc zéro remplissage signifie pas d'espacement à l'intérieur de l'élément. - Maintenant, - si j'ai placé 10 pixels ici comme ça 10 p x et que nous sortons et courons, - vous pouvez voir maintenant il y a 10 pixels d'espacement autour de l'élément. - Et ici parce que nous avons la barre de défilement, - en fait, c'est juste la couper là-bas. - Mais tu sais, - en fait, - qu'est-ce que c'est un peu désordonné. - Je vais m'en débarrasser puisque nous avons déjà appris la propriété de débordement. - Ramenons ça gentil et simple ici. - Comme ça, un sur deux. - Ok, - euh super. - Donc, le rembourrage est l'espacement à l'intérieur de l'élément ? - Et si je voulais une quantité différente de rembourrage de chaque côté ? - Donc, - par exemple, - en ce moment, - si j'utilise juste une valeur si je dis tapotant 10 pixels, - il ajoute 10 pixels en haut, - le bas, - le côté gauche et le côté droit. - Donc, en CSS, - nous avons la possibilité de spécifier des choses comme le rembourrage, - tiret gauche, - vous savez, - tapotant le tableau de bord à droite, - tapotant le haut de tableau de bord et tapotant le bas de tableau de bord. - Et puis vous pouvez changer la quantité de rembourrage de votre côté. - Euh, - maintenant, - cependant, - en fait, c'est encore plus facile ou de type Leicester. - Si vous utilisez la méthode abrégée appelée tapting, - puis, - en fonction de la quantité de valeurs que vous lui donnez, - cela affectera quel côté est affecté. - Donc, - par exemple, - si vous faites une telle valeur, - nous savons que, - um, - une valeur, - um, - affectera tous les côtés. - Donc, si je dis juste 10 pixels, - ça veut dire 10 pixels de tous les côtés. - Si je dis à des valeurs comme celle-ci, - si je dis 10 pixels 20 pixels juste en mettant un espace entre ici, - je mets plusieurs valeurs dans ce cas à des valeurs pour deux valeurs. - Ici, - la première valeur, - um, - représente le haut et le bas. - Donc, le haut et le bas et la deuxième valeur représentent ici la gauche et la droite, - ou - vous savez, - les deux côtés. - Allons de l'avant et posons ce commentaire ici, - pour qu'ils correspondent comme ça, - Nous allons séparer les choses comme ça. - D'accord, - donc une valeur affecte tous les côtés. - Cela signifie que nous avons rembourrage de tous les côtés aux valeurs représente que la première valeur est 10 - pixels en haut et en bas et 20 pixels à gauche et à droite. - D'accord. - Nous pouvons également spécifier le remplissage avec trois valeurs. - Par exemple, - si je dis, - comme 10 pixels, - 20 pixels, - 35 pixels ou quelque chose comme ça. - Donc, dans ce cas, - si nous avons trois valeurs, - la première valeur représente le haut au 1er 1 est égal au sommet. - La deuxième valeur représente les deux côtés, - à la fois gauche et droite, - et la troisième valeur représente ici le bas. - Donc, si je dis 10 pixels, - 20 pixels, - 35 pixels, - ce que je fais, c'est que je dis au navigateur que je veux 10 pixels d'espacement à l'intérieur de l'élément - les 20 premiers pixels d'espacement des deux côtés et 35 pixels de espacement sur le fond. - Bien. - Et si pour une raison quelconque je veux avoir une quantité différente de rembourrage de chaque côté, - je peux spécifier quatre valeurs. Donc, - par exemple, - je pourrais dire, - comme, - - vous savez, - - 10 pixels, - 20 pixels, - 35 pixels, - cinq pixels quelque chose comme ça. - Donc, dans ce cas, - nous avons quatre valeurs. - Et la façon dont vous pouvez vous souvenir de cela est de penser à une horloge et de rappeler que vous commencez au - haut à 12 heures. - Donc la première valeur, - si nous imaginons que c'est une horloge est le top, - si nous imaginons que c'est une horloge est le top, - Et puis la deuxième valeur représente le côté droit se déplaçant dans le sens des aiguilles d'une montre. - Et la troisième valeur représente ici le bas, - et la quatrième valeur représente le côté gauche. Donc, selon que vous avez 123 ou 4 valeurs, ça va changer l'espacement dans le navigateur. - Ok, - donc je pourrais dire, - rembourrage 10 pixels, - 25 pixels. - Animal. - Zoomez ici et on va filer ce type dans le navigateur. Et vous pouvez voir qu'il y a 10 pixels en haut, et , , en fait, c'est le haut et le bas, mais il n'y a rien en bas. - Et puis nous avons 25 pixels à gauche et à droite, - donc vous pouvez voir 25 pixels ici. - Il y en a plus. - Il y a plus d'espacement sur le côté que sur le dessus. - D'accord. - Et c'est en utilisant les deux valeurs 10 et 25. - Donc c' est le cas pour la marge. - Aussi, - um, - marge peut être des valeurs différentes. - Ici, - vous pouvez dire marge, - 10 pixels, - 35 pixels, - quatre pixels. - Et ça va changer pour être 10 sur le top 35 sur les côtés et 4 sur le bas. - Quelque chose comme ça. - Ok, - donc la marge est l'espacement à l'extérieur de l'élément. - En fait, gardons la marge la même de tous les côtés. - Mais on va dire, - euh, - on va en faire une plus grande quantité. - Disons 30 30 pixels pour voir ce qui se passe là juste pour démontrer que c'est l'espacement - en dehors de l'élément. - Alors on va y aller et on va cliquer. - Exécutez, - et vous pouvez voir qu'il y a plus d'espacement maintenant en dehors de l'élément. - Ok, - donc, - um, - le rembourrage est espacement à l'intérieur de la marge de l'élément est espacé à l'extérieur de l'élément. - Il éloigne les éléments les uns des autres de leur bord extérieur. Ok, donc c'est 30 pixels. - Vous remarquerez peut-être. - Voici 30 pixels en haut, - 30 pixels à gauche et à droite et 30 pixels en bas. - Mais attendez une seconde. - Ici. - Cette seule boîte n'a pas 30 pixels en bas et ne boite pas pour avoir 30 - pixels et marge sur le dessus. - C'est intéressant. - Donc vous penseriez ça parce qu'ils sont censés être 30 pixels au-dessous de celui-ci et 30 pixels au-dessus de celui-ci. - Que ces valeurs doivent être additionnées et 30 plus 30 doivent être 60 pixels. - En fait, - il n'y a pas 60 pixels d'espace ici. - Il n'y en a que 30 et c'est à cause de la façon dont la marge se comporte. - La marge peut se chevaucher. - Donc, - par exemple, - si j'ai dit que le va aller de l'avant et jouer avec cela en définissant la marge supérieure à 30 - pixels, - disons que la marge gauche et droite est de 10 pixels. - Mais mettons plus sur le fond, - Disons 50 pixels du bas. - Ok, - donc maintenant le numéro de la boîte, - une fois que vous avez 50 pixels de marge sur le bas et la boîte numéro deux devrait avoir 30 pixels de - marge sur le dessus. - Ok, - donc si je rafraîchis ça, - il s'avère que les 50 pixels gagnent, - donc celui-ci a 50 en bas, - donc c'est en fait pousser cet autre élément 50 pixels vers le bas. - Celle-ci n'a que 30 sur le dessus, - qui finit probablement par ici. - Donc, - euh, - celui-là pousse 30 pixels, - mais il est déjà écarté de 50 pixels. - Donc ces marges d'air se chevauchent. - Ils ne s'accumulent pas, ils ne s'additionnent pas. - C'est une chose dont il faut être conscient à propos de la marge. - Ok, - donc c'est génial. - On a beaucoup appris ici. - On a cherché à dimensionner ces boîtes. - Nous avons examiné l'ajout de couleurs d'arrière-plan, - bordures et affecter la façon dont il affiche en utilisant la propriété d'affichage affectant le débordement de - le contenu en utilisant débordement. - Nous avons également examiné l'espacement à l'intérieur de l'élément, - en utilisant le rembourrage et à l'extérieur de l'élément en utilisant la marge. - D'accord. - Et nous avons également appris sur les différences entre le dimensionnement de la boîte et Internet - Explorer et le dimensionnement de la boîte dans les autres navigateurs. - Donc, - comme n 31. Esthétique de boîte: - Allons de l'avant et revenons aux diapositives et passons à l'esthétique de la boîte. Donc on a vu qu'on pouvait ajouter une couleur de fond. - Mais que se passe-t-il si nous voulons ajouter des images d'arrière-plan dans nos mises en page, - ce qui sera fait dans l'exercice ? - Je vais montrer qu'un exercice à venir que nous avons aussi examiné à la frontière en prendra quelques-uns. - Nous allons jeter un oeil à quelques autres possibilités de bordure en termes de style de bordure, - et nous allons également examiner quelque chose appelé rayon de bordure que nous pouvons utiliser pour autour des bords - de nos boîtes. - Donc, si nous ne voulons pas d'arêtes tranchantes au carré, - nous pouvons également avoir des arêtes arrondies en utilisant la propriété de rayon de trois bordures CSS. - Nous allons aussi regarder l'ombre de la boîte pour ajouter des ombres, - ce qui montrera dans l'exercice va également regarder l'opacité, - ce qui nous donne la possibilité de faire voir un élément à travers ou transparent. - Donc, même si vous mettez dans l'image dans et que vous voulez que cette image soit partiellement transparente, - vous pouvez définir la propriété d'opacité d'un élément pour le faire voir partiellement à travers. - Nous allons également regarder des ingrédients qui nous permettent d'ajouter une couleur délavée d'une couleur à une autre - à l'intérieur d'un élément plutôt que d'avoir une seule couleur de fond. - D'accord, - donc ces propriétés d'arrière-plan. Donc, nous avons vu la propriété d'arrière-plan ici en bas, - et il accepte toutes ces différentes valeurs ici. - Donc, vous pouvez également dire arrière-plan, - tiret, - couleur et simplement spécifier une couleur. - Ces petits symboles de tuyau horizontaux ici juste destinés à représenter ou à signifier que vous pouvez utiliser un nom de couleur - ou pirater une décimale, - ou il acceptera les valeurs RVB. - Ici. - Nous pouvons aussi dire image de tableau de bord de fond, - et nous pouvons voir que vous êtes l. - et entre parenthèses. - Nous pouvons pointer vers l'emplacement d'une image spécifique. - Maintenant, cela va réellement mettre une image dans notre élément, - et c'est différent de la balise image. - L'élément AMG, - qui crée, - essentiellement, - crée une image de premier plan. - Chaque fois que vous créez une image en utilisant l'élément image, - elle prend réellement de la place dans la mise en page, - et vous ne pouvez pas mettre des choses dessus, - alors qu'avec une image de fond, - vous pouvez taper sur un fond image. - Vous pouvez mettre d'autres éléments sur une image de fond, - et il glissera juste derrière tout. - Donc ils sont vraiment coopératifs. - Ils resteront derrière tout ce que tu mettras dessus. - Et beaucoup de fois, - les gens l'utilisent pour créer des textures là-dedans. - Site Web, - par exemple, - Vous pouvez si vous avez un appareil photo, - vous pouvez sortir et prendre des photos du monde et jeter. - C'est une image de fond derrière les éléments de votre site Web que vous pouvez. - Aussi, - si vous avez un scanner, vous pouvez aimer scanner des morceaux de papier, - vous pouvez sortir et prendre comme des feuilles d'un arbre. - Jetez-le sur le lit de balayage et vous pouvez le scanner. Une fois, j'ai eu un professeur dans mon premier cycle qui nous montrait les choses que vous pouvez faire, Saran envelopper dans un scanner, ce qui est en fait très intéressant. mon premier cycle qui nous montrait les choses que vous pouvez faire, Saran envelopper dans un scanner, - Donc, si vous avez un scanner et que vous ne voulez pas l'endommager en mettant comme des liquides et des choses - dessus qui peuvent nuire aux ICS électroniques, - vous pouvez réellement Saran envelopper votre lit de scan et vous pouvez aimer cracker oeuf cru dessus et scanner - il. - Et si vous zoomez dessus, - vous pouvez obtenir toutes sortes de textures intéressantes et d'autres choses. - C'est un peu comme regarder à travers un microscope si vous zoomez sur des scans haute résolution -, - mais de toute façon, un peu se déclencher sur une tangente là-bas. - En tout cas, - les images de fond sont un excellent moyen d'avoir une certaine vibrance dans une certaine personnalité à votre site -. - Ok, - nous avons aussi la position de tableau de bord de fond, - et cela nous permet de positionner les images de fond de position afin que nous puissions déplacer l' image - à l'intérieur de l'élément. - Si nous avons besoin de positionner T voir une partie différente de l'image ou de faire apparaître l'image dans - un coin différent de l'élément. - Nous pourrions également spécifier si cette image se répète ou non. - Donc, parfois, nous voulons, - comme une texture ou un motif de tuiles, - répéter plusieurs fois dans un élément comme une image d'arrière-plan. - D'autres fois, nous voulons seulement montrer une seule image à l'intérieur des éléments, - donc être capable, - être capable de dire tableau de bord de fond, - répéter et spécifier si quelque chose se répète ou non est très utile. - Donc vous pouvez voir que vous pouvez euh, - cela accepte les valeurs de la répétition. - Il accepte également la répétition X, - qui se répète horizontalement. - Il accepte également le bureau de répétition. - Pourquoi est une valeur qui se répète verticalement, - et vous pouvez aussi dire pas de répétition, - ce qui signifie qu'elle ne le répétera pas. - Tout ce que nous pouvons également définir le défilement d'arrière-plan et le défilement d'arrière-plan va affecter si oui ou non cette image va défiler lorsque le navigateur défilera. - Donc, si l'utilisateur fait défiler la page, - nous pouvons contrôler si les états de l'image fixés en place ou si elle suit la barre de défilement -. - Donc c'est un peu un effet de besoin que vous pouvez contrôler. - Nous pouvons également dire les tailles de tiret de fond, - une nouvelle propriété CSS trois. - Et bien que cela n'ait pas un support complet partout, - cela peut être un moyen utile de faire des images d'arrière-plan qui s'étireront automatiquement à la - taille de votre navigateur. - Donc, si vous mettez une, - um, - une image d'arrière-plan dans le corps, - euh, - et vous avez dit que c'est la taille d'arrière-plan à 100% par exemple, - pour augmenté avec, - il va étirer la image de sorte qu'à mesure que la fenêtre du navigateur devient plus grande, - plus petite, - cette image sera mise à l'échelle avec elle. - Donc, c'est un peu un effet soigné que vous pouvez créer en utilisant la taille de l'arrière-plan. - Eh bien, - écoute, - c'est nous allons avoir quelques exemples de ça dans l'exercice à venir maintenant. - Beaucoup de ces choses, - à l'exception de ces deux derniers défilement d'arrière-plan, - taille d'arrière-plan les premières propriétés de 1234 apparaissent peuvent être écrites dans une seule - propriété ici appelée Background. - Donc, ce serait le raccourci similaire à la façon dont nous avons la police pour le raccourci. - Vous pouvez simplement dire l'arrière-plan et au lieu de dire la couleur de tableau de bord, - fond, - image de tiret, - fond, - position de tiret, - fond, - tiret. - Répétez, - vous pourriez juste dire arrière-plan. - Et en plaçant un espace entre les valeurs, - vous pouvez spécifier Ah, - couleur et image, - et c'est répéter et positionner les informations dans une seule valeur. - C'est un exemple du raccourci de la bordure, - que nous venons d'examiner, - et c'est un raccourci pour la taille du tiret de bordure, - euh, -et - euh, - couleur du tiret de bordure et le style de bordures pointillées. - Et vous pouviez voir tous les styles ici. - Solide, - tableau de bord pointillé, - double rainure, - Rhijn dit Output. - Et c'est à ça qu'ils ressemblent. - Si solide fait une ligne solide. - Si vous mettez la cellule de bordure sur le tiret pour obtenir une ligne de tiret, - ce que nous avons vu Postted fait ces petits diamants ici. - Double est une double ligne et Groove Ridge incident Début. - Prenez la couleur que vous spécifiez, - et ils créent comme une version claire dans une version sombre de la même couleur. - Je crois que c'est 50 % de Phil pour la couleur que vous sélectionnez pour la bordure. - Donc, ce sont d'autres possibilités pour le style de la frontière qui sont acceptées. - Et tout ça marche partout. - Ceux-ci fonctionnent tous les navigateurs, - anciens et nouveaux, - parce que le style de bordure a été autour depuis assez longtemps. - Ok, - donc nouveau et CSS trois, - nous avons aussi le rayon de la frontière et le rayon de la frontière est ah est la façon dont vous allez Teoh rond - les coins de vos éléments si vous le choisissez. - D'accord. - Donc, pour se rendre au travail partout, - nous utilisons la bordure, - le rayon de tiret et c'est un préfixe appelé Dash Web kit. - Beaucoup de fois quand une nouvelle propriété CSS est introduite dans CSS, - ce qui se passe est différent. - Les navigateurs doivent déterminer comment ils vont accepter cette propriété et comment la valeur affectera leur navigateur particulier, - comment leur navigateur particulier affichera cette propriété dans cette valeur. - Donc, ce qui se passe beaucoup de fois, c'est que différentes sociétés de navigateur, - alors qu'elles sont encore en train de prendre des décisions et des déterminations sur la façon dont elles accepteront ces - propriétés CSS et comment elles afficheront ces valeurs, - elles créent quelque chose appelé un préfixe où ils prennent le nom de la propriété. - Mais ils ajoutent un tiret et puis une sorte de préfixe au début qui leur permet de - contrôler. - C'est un peu comme un futur expérimental, - aussi, - pour leur permettre de contrôler la valeur d'une manière spécifique dans leur navigateur. - Ça n'affectera pas les autres navigateurs. - Donc, - par exemple, - kit Web de tiret va affecter le rayon de la frontière et les navigateurs comme chrome et safari. - Alors que pour Internet Explorer, - um, - en fait, - les anciennes versions d'Internet Explorer d'IE n'acceptent pas le rayon de la frontière, - donc nous n'avons pas vraiment à nous inquiéter à ce sujet. - Mais alors que pour Firefox, vous pouvez juste maintenant dire le rayon de tiret de bordure, - par exemple. - Et vous savez, - quelques mois, c'était peut-être il y a un an. - Vous deviez utiliser le tableau de bord Dash M o Z un rayon pour le feu Fox. - Maintenant, vous pouvez simplement dire rayon de la frontière et il va croire en fait en chrome cela fonctionne maintenant à - un temps se déplace sur. - Vous pouvez un groupe, - vous pouvez abandonner le préfixe ici. - Ok, - donc, - rayon de bordure um, - vous pouvez également spécifier quel coin de la boîte vous êtes intéressé à arrondir donc en disant - comme le tiret de bord supérieur gauche vous pouvez arrondir juste le coin supérieur gauche de la boîte, - ou vous pouvez dire tiret en haut à droite ou en bas, - tiret en bas à gauche à droite. - Et vous pouvez faire l'arrondi des tailles du coin de la boîte différente sur différents - coins. - Um, - en mettant une seule valeur, - il l'entourera uniformément. - Ce que ça fait, c'est que ça prend du coin où le point aurait existé. - Il va en fait 15 pixels et arrondit 15 pixels du coin de l'élément. Si vous utilisez deux valeurs ici, vous pouvez contrôler la différence entre l'horizontale et la verticale. Si vous utilisez deux valeurs ici, - Par exemple, - cette première valeur indique ici rayon de bordure 100 pixels, puis espace 50 pixels. - Vous pouvez voir ici en haut, - il y a en fait horizontalement. - Il y a 100 pixels arrondis et verticalement. - Il n'y en a que 50. - Donc, cela fait une courbe de forme différente ici par rapport à 50 pixels. - 100 le feraient. Donc vous pouvez appliquer plusieurs valeurs ici, Teoh plusieurstailles de pixels ici au rayon de la bordure, et vous pouvez changer la façon dont il arrondit. Donc vous pouvez appliquer plusieurs valeurs ici, Teoh plusieurs tailles de pixels ici au rayon de la bordure, - Ah, - c'est un soutien actuel. - Au moins au moment de l'enregistrement, vous avez environ, - vous savez, - 80% de soutien mondial pour le rayon de la frontière. - Il fonctionne un Internet explorer neuf, - mais je e huit et sept juste ne le supporte pas du tout. - Donc, il vaut la peine de noter que, - et que fondamentalement ce qui se passe, c'est qu'il n'y a pas vraiment de mal fait. - C'est juste que dans i e huit, - il va ignorer cette propriété de rayon de frontière et vous avez juste des bords carrés sur vos éléments -. - D'accord ? - On a aussi l'ombre de la boîte. - Si l'un d'entre vous est familier avec les programmes Adobe comme Illustrator et Photo Shop, - où vous pouvez ajouter une ombre de boîte ou une ombre portée, - il est plutôt appelé en CSS trois semaines et maintenant à une ombre de boîte. - Et il ressemble à peu près exactement le même et a le même genre de paramètres que vous le feriez - obtenir pour la boutique photo. - Hum, - donc c'est en fait une très belle façon d'ajouter de l'ombrage et des ombres sur les éléments, - alors c'est ah, - la façon de corriger c'est que nous disons boîte, - l'ombre de tableau de bord. - Et pour que cela fonctionne et même les navigateurs plus anciens, - vous pouvez utiliser ces préfixes kit Web et M o z pour le faire fonctionner là. Le gamin Web sera pour le safari et le chrome et M o Z sera pour les anciennes versions de FireFox ici. Le gamin Web sera pour le safari et le chrome et M o Z sera pour les anciennes versions de Fire - Ok, - donc ici nous avons une ombre de cendres en boîte, - et la première valeur que vous pouvez mettre est appelée décalage horizontal. - Cinq pixels vont pousser l'ombre de cinq pixels vers la droite. - Um, - valeur négative pousserait cinq pixels vers la gauche. - Hum, - et la valeur suivante est verticale. - Donc ça va mettre cinq pixels vers le bas. - Une valeur négative ferait monter l'ombre de cinq pixels vers le haut. - S'il a dit négatif cinq pixels, - par exemple. - Et la troisième valeur ici s'appelle Rayon de flou. - C'est à quel point le flou se propage. - Si vous dites zéro pixels, - ce sera une ombre tranchante. - Hum, - alors que si vous ajoutez un nombre plus élevé de pixels pour le flou, il va adoucir, - il mettra en plumes le bord de l'ombre. - Et enfin, - nous acceptons la valeur de la couleur afin que vous puissiez utiliser n'importe quelle couleur ici. - Ici. Ils ont utilisé une couleur grise pour le démontrer, et nous allons aller de l'avant et ajouter ceci à notre exercice. - Nous allons ajouter des ombres à quelques sections différentes de la page, - et vous avez probablement tous vu un exemple d'opacité. - Ceci est un exemple de quelqu'un utilisant l'opacité dans le menu. - Il y a donc un menu déroulant et que les hommes que vous voyez à travers afin que vous puissiez voir l'image derrière elle -. - Donc l'opacité est écrite en utilisant la propriété d'opacité et en lui donnant un nombre compris entre zéro et - un. - Donc CSS trois La façon moderne de le faire est juste de dire l'opacité et 0,5 serait l' équivalent de 50% d'opacité et l'un serait l'équivalent de 100% d'opacité. - Maintenant, - si vous avez une couleur unie, - vous êtes vraiment mieux d'utiliser la propriété RVB pour la couleur et juste définir l'arrière-plan - couleur avec un RVB une valeur. - Alors rappelez-vous un en RVB a est Alfa. - On l'a examiné dans un exercice précédent. - Tu peux y retourner et vérifier ça si tu veux. - Quand nous y arriverons, c'était quand nous avons commencé CSS. - Vous pouvez vérifier cela sous la vidéo des systèmes de couleur pour CSS. - La raison pour laquelle vous voudriez utiliser RVB une valeur par opposition à un passage si vous êtes juste - faire une couleur d'arrière-plan est qu'il est un peu plus simple de simplement rendre l'arrière-plan a - la transparence par rapport à l'élément entier. - Donc, une chose à être conscient ici est si vous définissez l'opacité à une valeur inférieure ici, - cela ne va pas seulement affecter l'arrière-plan, - mais cela va aussi faire effet toutes les choses à l'intérieur de l'élément aussi. - Donc, s'il y a des images de texture à l'intérieur de l'élément, - ça va aussi les rendre opaques ou partiellement transparentes. - Ici, - vous pouvez voir toutes les solutions de repli pour les anciens navigateurs. - C'est pour très vieux, - comme un safari. - Vous pouvez utiliser K html tiret opacité pour affecté dans les anciennes versions de safari. - Um, - super vieux. - Je ne suis pas sûr à quel point je veux dire, - j'ai commencé à douter que, - vous savez, - ça doit être, - comme 1% ou moins de 1% de la population, - en utilisant comme les premières versions de Firefox et Safari. - Je ne m'inquiéterais pas trop pour ça pour Internet Explorer. - Vous devrez peut-être utiliser la propriété filter pour que ça fonctionne dans i e. - et celui-ci fonctionnera pour vous à peu près partout ailleurs. - En dehors de l'AII utilise l'opacité. - Voici le support global actuel pour simplement utiliser l'opacité. - Vous pouvez voir que vous pouvez maintenant utiliser la propriété opacité, - et vous obtiendrez environ 95% de soutien global pour ça. - Oh, - ouais. - Et il dit même ici que, - comme, - pour huit ans, - vous devriez utiliser le filtre. - Donc, pour 87 88, vous devriez utiliser cette propriété de filtre ici pour ces personnes, - ce qui représente probablement environ moins de 10% de la population là-bas. - Ok, - donc nous avons Grady INT. - Donc, quand vous dites la couleur de tableau de bord de fond, - nous savons que nous pouvons simplement spécifier une couleur. - C'est une couleur hexi décimal. - Pas vraiment sûr de quelle couleur c'est exactement. - Mais vous pouvez donner une couleur unie à un fond. - Um, - et puis vous pouvez également utiliser l'image de tableau de bord de fond. - Et au lieu de lier à une image, - vous pouvez spécifier un Grady int, - et vous pouvez voir ici, - c'est le, - um c'est le préfixe pour Firefox, - et celui-ci est un préfixe pour, - um, - safari et chrome, - qui utilise le kit web. Et entendez ce que vous faites pour Mazzilli,n' est-ce pas ? Et entendez ce que vous faites pour Mazzilli, - C'est un peu différent de celui de la thèse. - Afari en chrome. - Tu l'écris comme ça. - Utiliser des arrêts de couleur de Mozilla C'est assez simple. - Vous utilisez juste, - Ah, - des hacks de couleur, - une couleur décimale, - puis vous mettez une virgule et mettez l'autre couleur dans laquelle vous aimeriez qu'elle s'estompe. - Um, - pour le kit Web, - vous pouvez spécifier le type de Grady dans. - C'est un peu plus sophistiqué. - Vous avez plus de possibilités. - Vous pouvez faire une radio Grady Int ou un Grady Int linéaire, - et vous pouvez spécifier le ah, - le positionnement de l'endroit où il commence et s'arrête et le pourcentage de l'élément qu'il - mesure à travers. - Et vous pouvez également définir des arrêts de couleur de sorte que le premier arrêt a cette couleur dans le deuxième arrêt - a cette couleur, - et nous allons effectivement jeter un oeil à l'utilisation de quelques outils en ligne dans l'exercice pour créer ces - Grady INT. - Grady et le soutien ne sont pas aussi bons que les autres que je t'avais montrés. - Même en utilisant le kit Web dans les préfixes M O Z. - Il y a encore des navigateurs comme Internet Explorer neuf, - même ce qui n'est même pas vraiment tout ce que vieux ne le supporte pas du tout. - Donc, nous n'avons vraiment qu'au moins au moment du tournage de cette vidéo, - nous n'avons vraiment qu'environ 65% du soutien mondial. - Donc, ce que vous faites est de spécifier une couleur d'arrière-plan. - Et si l'ancien navigateur ne peut pas comprendre le Grady int cette couleur décolorée, - il va juste avoir une couleur unie par défaut. - Vous choisissez juste une couleur que vous êtes d'accord avec comme solution de secours pour les anciens navigateurs, - et cela devrait fonctionner très bien encore. 32. Éléments flottants: - Parlons ensuite du positionnement flottant ou flottant. - Donc, ce sera votre solution pour créer une structure de colonne dans vos mises en page - vous pouvez voir dans cet exemple ici cette personne a un en-tête et un pied de page en haut et en bas de la page, - et ils aimeraient créer une barre latérale qui est positionné à gauche d'un contenu principal. - C'est la position à droite. - Donc, en utilisant l'affaiblissement flottant, - dites à un élément de flotter vers la gauche et cet autre élément ici de flotter vers la droite. - Et ça va nous permettre d'avoir des éléments de niveau bloc qui peuvent apparaître côte à côte. - Donc, si nous définissons la barre latérale, - disons que celui-ci ici est un div qui a une idée de barre latérale et peut-être que c'est un def a une - idée de je veux dire, - nous pouvons alors définir la barre latérale de livre pour flotter le côlon gauche et affaiblir l'ensemble principal pour flotter le côlon droit -, - donc la propriété float nous permet de spécifier gauche ou droite. - Donc, chaque fois que vous flottez des éléments, - nous devons être conscients qu'il y a des choses maladroites qui vont se produire alors au début quand - vous commencez à apprendre le positionnement de flotteur, cela peut en fait être assez frustrant. - Mais aussi longtemps que je vous explique clairement tous les problèmes que vous pourriez rencontrer lorsque vous utilisez le positionnement flottant, - alors j'espère que vous ne serez pas interrogé, - frustré, - et vous aurez une compréhension claire de pourquoi certains éléments se comportent mal. - Donc, dans cet exemple, - ils ont fait flotter le contenu principal vers la gauche, - ils ont décidé de flotter la barre latérale vers la droite et ils avaient un pied de page qui était - en dessous ici. - Mais que s'est-il passé ? - C'est bizarre. - Le pied de page devait rester en bas. - Souviens-toi, - là-haut, on a le pied de page en bas. - Mais pour une raison quelconque, - quand je flotte des choses, - les éléments qui sont en dessous des choses qui flottent ont tendance à essayer de tirer à côté d'eux. - Maintenant. - Parfois, c'est souhaitable, - donc parfois nous voulons envelopper du texte autour des images et une page, - et des choses comme ça et flottant est génial parce que chaque fois que vous flottez quelque chose, - éléments qui sont en dessous de l'élément que l'air flottant sont touchés par cela, - et ils auront tendance à se tirer à côté de lui s'ils peuvent s'y adapter. - Donc, dans ce cas, - le pied de page a un peu d'espace pour tenir sous la barre latérale. - Et puisque toutes ces choses flottent, - il va essayer de tirer à côté ou à côté des choses qui flottent. - Et c'est simplement parce que le pied de page était physiquement dans le code ci-dessous les choses qui sont - flottant. - Alors, il est en train de monter à côté de lui. on Si onveut empêcher ça, on peut arrêter ça. - Parfois, on veut que ça arrive. - C'est une bonne chose, - et d'autres fois ont été bouleversés parce que cet élément ne devrait pas être ici. - On veut que le pied de page retourne ici. - Donc, si nous voulons dire au pied de page, - um de ne pas se déplacer à côté des flotteurs, - nous pouvons utiliser une propriété et CSS appelé clair. - On peut dire clair les deux en disant Footer clair. - Les deux ont été en mesure d'obtenir ce pied de page pour effacer Passé la hauteur de ces éléments si clair - accepte trois valeurs différentes que vous pouvez dire clair à gauche et qui va effacer au-delà de la hauteur - de tout ce qui flotte à gauche et sur. - Lee a passé la hauteur des choses flottant à gauche, - et vous pouvez aussi dire clair à droite, - qui va dégager les hauteurs de tout ce qui flotte à droite, - ou pour couvrir toutes vos bases. - Vous pouvez dire clair à la fois, - et il va effacer au-delà de la hauteur des deux choses qui flottent à gauche ou à droite. - D'accord. - Et encore une fois cela permet au pied de page d'effacer au-delà du contenu moyen et de la barre latérale. - Ok, - ok. - Donc, si ce n'est pas vraiment suffisant, - une sorte d'occurrences maladroites qui flottent provoque le flottement a d'autres choses qu'il fait - que c'est un peu étrange. Mais encore une fois, tant que nous comprendrons pourquoi il le fait et comment le réparer, ça ne sera pas frustrant pour nous. - Donc un autre problème que vous obtenez parfois lorsque vous flottez un élément est que vous obtenez - quelque chose appelé un parent effondré. Imaginez que cette boîte grise soit un parent, ce qui signifie que c'est un conteneur, et qu'on y place ces boîtes. Donc, ici, j'ai une taxe à l'intérieur qui dit, je suis un parent statique, je suis un parent statique, - Et j'ai fait flotter ces trois boîtes à gauche dans cette boîte à droite. - Une chose soulignera ici, c'est que lorsque vous flottez quelque chose à gauche, - s'il y a d'autres éléments qui peuvent s'y adapter qui flottent aussi à gauche, ils vont juste empiler côte à côte comme ça. - Donc, parfois, vous pouvez créer une structure multi-colonnes simplement en flottant tout dans une - direction, - ce qui est une sorte d'astuce cool pour le faire. - Ok, - donc il s'avère, - - que c'est juste quelque chose dont il faut être conscient. - Vous avez orteil juste toujours garder à l'esprit quand vous flottez quelque chose est que chaque fois que vous - flottez tous les enfants à l'intérieur d'un parent, - c'est un Ziff. - Le parent n'a plus de référence pour la taille. - La métaphore que j'ai utilisée pour ça c'est Imagine que tu sais, - normalement des éléments. Quand ils sont à l'intérieur des parents, c'est comme quand ils sont au lycée et qu'ils n'ont pas encore obtenu leur diplôme. Quand ils sont à l'intérieur des parents, - Ils ne sont pas sortis de la fac. Et les parents gardent leur chambre pour eux. - Comme si tu es toujours, tu n'es pas encore sorti de l'école. - Tu es un élément statique. - Tu ne te positionnes pas du tout. Tu ne flottes pas encore, alors quand tu es au lycée, tu ne flottes pas et tes parents gardent ta chambre pour toi. - Ils sont comme, - Oh, - c'est ta chambre. - C'est ton espace. - Vous vivez ici. - Et pour cette raison, - le parent a une référence pour la taille pour avoir raison. - Il peut entourer l'enfant. Quand tu faisflotter un élément, c'est comme l'envoyer de la fac. fais Quand tu faisflotter un élément, - C'est comme s'il flottait. - C'est comme si elle avait quitté la maison. - Et même s'il semble être à l'intérieur de cet élément parent, - il est en fait flottant. - Donc ces gars flottaient à gauche. - Celle-ci flotte à droite. Et comme tous les enfants qu'ils ont quitté la fac, le parent ne garde plus leur chambre pour eux. - Comme fondamentalement, - le parent n'a plus de référence pour la taille d'être. - Alors, il s'effondre. - Ou peut-être que vous pourriez dire que le parent s'effondre parce qu'ils deviennent tristes parce que tout son - Enfants flottaient loin. - Donc, nous pouvons réellement corriger cela en utilisant quelque chose appelé correctif clair, - qui est une sorte de hacker CSS, - une solution que les développeurs ont trouvé au fil des années pour résoudre ce problème. - Donc, vous pouvez réellement arrêter apparent de s'effondrer même si ses enfants flottent comme - ceci et obtenir cet effet en utilisant quelque chose appelé la Solution fixe claire. Ça ressemble à beaucoup de CSS, mais je vais briser ça pour toi. Ça ressemble à beaucoup de CSS, - En gros, ce qui se passe ici, c'est que vous créez une classe, - et vous pouvez nommer cette classe tout ce que vous voulez. - Typiquement, - ceci est appelé correctif clair. - Et en fait, - si vous ouvrez votre navigateur et que vous Google efface correctif, - il viendra avec des tonnes de sites où vous pouvez copier et coller ce code afin que vous ne le faites pas - doivent le mémoriser. - Et aussi beaucoup de discussions à ce sujet et pourquoi nous l'utilisons. Je vais en fait fournir un lien en dessous de la vidéo il y aura, - lié à son tutoriel donnant le code et discutant aussi de correctif clair. Je vais en fait fournir un lien en dessous de la vidéo il y aura, Donc, la première chose que nous faisons est de créer une classe, - et j'ai choisi de nommer ce correctif clair, - qui est le nom commun que les gens appellent ceci. - Et puis nous utilisons un pseudo sélecteur de classe spécial appelé Après nous disons deux-points après -. - Okay, - Donc ce qu'après fait est n'importe quel élément auquel vous appliquez cette classe, - il va aller à l'intérieur de cet élément, - et après tous ses enfants, - il va appliquer ce style que vous mettez ici. - Je vais le dire encore une fois. - Donc, en appliquant la pseudo classe sélectionnée ici, - deux-points après cela va lui permettre de fonctionner de sorte que tout élément que nous appliquons ceci - classe de clair fixe à son va aller à l'intérieur de cet élément et après Colin, - après tout de ses Enfants, - dans cet élément dans notre cas, - tous après tout les enfants flottants, il va appliquer ce style. - Donc, ce que nous faisons est d'ajouter une propriété ici appelée contenu et entre guillemets. - On va mettre un texto. - Vous pouvez littéralement taper le mot bonjour ici, - et vous verrez le mot Bonjour apparaîtra après tous les éléments flottants. - Donc, le contenu est la façon dont vous pouvez réellement utiliser CSS pour insérer du contenu de texte dans un élément. - D'accord. - Et c'est en fait la seule fois que j'utilise cette propriété parce que j'aime réserver CSS pour - style. - Et j'aime réserver html pour créer réellement du texte et du contenu physique qui est respectueux - par une théorie appelée la séparation des préoccupations. - Où nous voulons séparer HTML est d'être contenu et CSS à être style. - Ceci est une petite exception à la règle où tous réellement ajouter un symbole de période après tout - le contenu que je sais que cela semble fou, - mais restez avec moi ici. - Accrochez-vous là-dedans dans tout ça lentement se rassembler et comprendre pourquoi on fait ça. - Donc fondamentalement, - nous créons une classe appelée correctif clair. - On dit deux-points après et on va l'appliquer au parent qui s'effondre. - Donc, ce qui va se passer est quel que soit le parent que vous connaissez, - le parent qui s'effondre qui doit effacer les enfants flottants, - nous lui appliquons cette classe. - Et à l'intérieur de cet élément, - ce parent qui s'effondre, - ça va aller après tous les éléments flottants parce qu'on utilise le deux-points après et ça va ajouter un symbole de période. - En fait, - physiquement un petit point apparaîtra que le symbole de période ou le caractère de texte de la période - apparaîtra sous tous les enfants flottants. - La prochaine chose que nous faisons est de dire que le contenu d'afficher bloc, - et je me souviens des éléments de niveau bloc, - leur roi de l'espace horizontal. - Ils prennent tout cet espace horizontal là-bas et comme nous n'avons pas de avec - spécifié pour le contenu, - ça va juste prendre 100% de l'espace à l'intérieur de ce conteneur parent. - Donc maintenant notre petit symbole de période est un élément de niveau bloc dans la page et prend tout le - espace horizontal, - et ensuite nous utilisons notre ami Effacer les deux. - Rappelez-vous, - nous utilisons clair à la fois avant sur le pied de page. - Ce qui est effacé vous effacera, - vous vous souviendrez est ce que nous avons utilisé pour dire n'importe quel élément dans ce cas, - ce petit symbole de période contenu pour effacer au-delà de la hauteur de quoi que ce soit flottant. - Donc, cela déplace ce symbole de période pour effacer au-delà de la hauteur des enfants flottants. - Ok, - euh et puis on a une référence pour la taille des parents. - Le conteneur parent sait maintenant à quelle hauteur être, - parce que ce symbole de période a été poussé vers le bas sous tous les enfants flottants. - C'est un peu comme, - si vous imaginez, - si nous utilisons la métaphore des éléments flottants sont un peu comme les Enfants ont flotté - le collège. - Cette solution claire est un peu comme avoir un étudiant en bourse venir et rester - avec les parents pour qu'ils sachent fondamentalement prendre le contrôle de votre chambre pour que la maison - ne ferme pas correctement ou en d'autres termes, - donc le les parents ne sont pas tristes. - Ils n'effondrent pas leur taille. - Il donne aux parents ou une référence pour la taille d'être parce qu'il y a un étudiant en échange - traîner là-dedans dans ce cas de période. - Mais nous ne voulons pas voir cet étudiant d'échange parce que ça va rendre notre ça ... méchant. - Mais ça va rendre notre mise en page désordonnée parce que nous aurons un petit symbole de période - visible, - visible sous sont des éléments flottants. - Donc, ce qu'on fait, c'est que la visibilité est cachée. - Donc c'est un peu comme l'étudiant en échange qui étudie toujours et tu ne les vois jamais vraiment . - Donc, nous faisons le symbole de période caché en disant visibilité cachée, - et nous nous assurons qu'il ne prend aucune hauteur en disant hauteur zéro et hauteur de ligne, - qui est la hauteur du texte, - la hauteur entre les lignes de texte à zéro. - Et cela fera en sorte que dans tous les navigateurs, - ce petit contenu sera invisible. - Donc, ce contenu donne au parent une référence pour la taille pour qu'il ne s'effondre pas, - mais nous le rendons aussi invisible. - Donc c'est caché. - Donc, c'est un peu comme une sorte de code assez folle ici, - mais en fait cela fonctionne assez bien et cela fonctionnera dans tous les navigateurs. - Ok, - Jetons un coup d'oeil à ça dans un exemple. - C'est une chose pour moi de parler de ces choses. - Mais si on a un vrai exemple ici, regardez les orteils. - Alors allons-y. - Ceci est bricoleur point io et vous pouvez utiliser cette longueur CB 3 46 pour voir la version complète de - cet exemple. - Si vous voulez y jeter un coup d'oeil plus tard, vous pouvez voir que je viens de créer des dibs. - Ce n'étaient que des boîtes qu'on va utiliser. - Et ce 1er 1 il a juste le mot ci-dessus écrit dedans. - Et je lui ai encore donné une classe de dessus. - Je donne juste ce genre de noms de classe génériques. - Et nous avons aussi un en bas ici avec une classe d'en bas, - et qui a aussi le mot ci-dessous écrit dedans. - Et là, nous avons Ah, - conteneur. - C'est notre conteneur parent. - Qu'est-ce que j'ai donné un nom de classe de conteneur et imbriqué à l'intérieur de ce parent est trois - boîtes que j'ai donné une classe de boîte et juste les nommer ici. - 123 Ok, - Jetons un coup d'oeil au code CSS U. - Nous avons écrit pour ces gars alors, - um la boîte du haut qui a une classe de dessus. - Nous avons donné à ce gars une couleur de fond de chaux, - et nous lui avons aussi donné 10 pixels d'espacement à l'intérieur et une marge, - qui est de 10 pixels d'espacement à l'extérieur. - Ok, - nous avons aussi donné une couleur de fond au conteneur pour voir tous ces éléments. - Ils ont tous une couleur de fond. - Cela a également un rembourrage et une marge. - Nous avons aussi une boîte ici qui a une couleur de fond d'Aqua et Samos. - Les boîtes de l'exemple précédent Nous venons de lui donner une largeur et une hauteur de 100 pixels et - un peu de rembourrage et de marge ainsi. Et puis nous avons aussi cette classe en bas, appelée point ci-dessous. - Donc ci-dessous a une couleur de fond jaune et a un peu de rembourrage et de marge. Donc, si on vient ici, on verra notre boîte ci-dessus. - Voici notre parent conteneur et voici ci-dessous. - Maintenant, - par défaut, - tous ces jours, - bloc d'affichage de l'air. - Donc ils prennent 100% de l'écran, - et ils n'ont pas de positionnement spécial. Aucun d'entre eux n'a encore été dit de flotter, donc parce que ces baisses d'air s'affichent l'un au-dessus de l'autre, leur roi de l'espace horizontal ici. - Donc 12 et trois ou empilés verticalement. - Maintenant, - disons hypothétiquement que je voudrais faire en sorte que les gars se positionnent dans une colonne - structure. - Disons que nous voulons faire trois colonnes 123 côte à côte pour que nous puissions descendre ici dans cette classe de boîte et je descends ici et je vais utiliser la propriété ici appelée - Float. - Donc, nous allons les mettre en position flottante et dirons flotter à gauche. - Ils vont aller aussi loin que possible à l'intérieur de ce parent. Et si leur espace, ils vont s'empiler côte à côte, tant qu'il y a de l'espace disponible pour tous, on dirait qu'il y a beaucoup d'espace ici, donc ça devrait marcher. - Donc on a ces gars à flotter à gauche et je vais cliquer sur courir, - et là on peut voir ces gars l'air maintenant s'afficher côte à côte. - 123 flottent maintenant. - Donc, nous voyons quelques choses bizarres qui se passent ici dans Cela frustrent beaucoup de gens quand - ils ont affaire au positionnement. - Je veux signaler quelques choses. - Ok, - donc tout d'abord, - la div appelée ci-dessus n'est pas affectée par le fait que ces air flottant. - Je vais le répéter. - L'élément au-dessus des éléments flottants. - Celle-ci, - la Div. - Avec la classe d'en haut ici, - ce gars n'est pas affecté par le flottement. - Donc, chaque fois que vous flottez quelque chose, - il sur Lee effets éléments en dessous de cet élément qui flottent sur les éléments Lee qui sont - physiquement écrits ci-dessous ici comme ceci. - Ce bas si vous êtes le pied de page, - qui est qui a un mot ci-dessous écrit en elle est affectée. - Couper. Parce que ces gars flottaient ce type ici, ça peut s'adapter. - Donc il essaie de flotter à côté de ces gars. - Alors, comment puis-je réparer ça ? - Si jamais j'ai un élément que je ne veux pas que les orteils flottent à côté de mes autres éléments ici ? - Si je ne veux pas tirer à côté de ces éléments flottants, je peux lui dire d'effacer la hauteur de ces éléments flottants. - Donc pour faire ça, - je vais aller dans la classe d'en bas, - et on va aller de l'avant et dire qu'il est clair Colon et je vais juste sauver les deux qui vont effacer - passé quoi que ce soit flottant à gauche ou à droite. - Dans ce cas, je pourrais m'en sortir avec juste à gauche. - Mais pour être du côté sûr, - couvrir toutes mes bases va juste dire clair à la fois comme ça. - Donc j'ai dit cette div d'ci-dessous pour effacer les deux. - Maintenant, - si je rafraîchis que vous pouvez voir maintenant ci-dessous se comporte et il glisse au-dessous de ces éléments flottants -. - Donc, c'est une chose qui peut en quelque sorte vous stresser lorsque vous utilisez la position flottante, - vous devez juste être conscient du fait que lorsque vous flottez des choses, - les éléments en dessous peuvent tirer vers le haut à côté de lui. - Et vous voudrez peut-être que ça arrive ou que vous ne vouliez pas que ça arrive. - Si vous ne voulez pas que cela arrive, - vous pouvez le définir pour effacer les deux juste comme ça. - Ok, - d'autres choses qui se passent qui pourraient - d'autres choses qui se passent qui pourraientvousfrustrer comme vous pouvez voir l'élément parent disparaître parce que j'ai donné à ce parent - conteneur un peu de rembourrage. frustrer comme vous pouvez voir l'élément parent disparaître parce que j'ai donné à ce parent - Ça garde au moins un peu de rembourrage à l'intérieur, donc je vois que c'est un excellent bar. - Mais si vous enlevez ce rembourrage, vous pouvez même voir des trucs disparaître comme cette montre cette année. Si j'ai dit ça à zéro rembourrage dans ce conteneur parent, vous ne pouvez pas le voir du tout. - Tu pourrais te dire, c'est quoi ? - Qu'est-il arrivé au conteneur parent ? - Je ne vois plus sa couleur de fond. - De temps en temps, tu vas vouloir entourer tes colonnes. - Peut-être si vous voulez une autre couleur de colonne derrière eux ou une autre image derrière eux. Dans le cas de l'exercice, on va ajouter, comme une texture de bois derrière notre structure de colonne. - Donc, on va avoir besoin d'un conteneur parent là-bas. Et si vous ne voulez pas que ce parent effondre ce grand parent ici pour s'effondrer, nous devons utiliser le correctif clair pour que ça marche. si vous ne voulez pas que ce parent effondre ce grand parent ici pour s'effondrer, - OK, - alors allons de l'avant et ajoutons ce correctif clair ici. - Encore une fois, - les éléments flottants sont un peu comme les enfants qui ont quitté le collège et les - parents tristes, - trop triste qu'il s'effondre. - Il n'a plus de référence pour savoir quelle taille pour être. - Ok, - donc ce qu'on fait est d'aller dans le CSS et de corriger ce correctif clair. - Donc on va dire point clair et encore une fois, - c'est juste un nom commun pour le nommer. - Tu peux le nommer comme tu veux. - Et nous allons dire deux-points après, - ce qui va spécifiquement aller dans l'élément. - Nous appliquons ceci à une annonce, - ce style, - après tous les autres éléments, - tous les autres éléments Enfants à l'intérieur de celui-ci. - Et on va dire du contenu. - Alors je vais dire du contenu. - Et je vais juste faire un symbole de période parce que c'est petit et sans prétention. - Et on va dire que ce contenu à afficher le bloc pour qu'il occupe tout l' espace horizontal là, et ah, on va dire à ce type d'effacer, comme on l'a fait avec la boîte ci-dessous. - On veut ça maintenant. - On veut ce petit symbole d'époque. - Ça va apparaître, - tu sais, - comme ci-dessous sont à côté de tout ça. - Tu sais, - ça va deux-points après signifie qu'il va apparaître après tous ces enfants flottants, - et on va le mettre pour afficher le bloc pour qu'il prenne tout l'espace horizontal, - et ensuite on va dire clair les deux pour effacer le passé la hauteur, - et maintenant le parent devrait avoir une référence pour la taille à être. - Mais on ne veut pas voir ce petit symbole de période. - Ça ne va pas être très attrayant. - Donc on va mettre la visibilité sur cachée, - et on va aussi mettre sa hauteur à zéro. - Donc le petit symbole de période ne prend pas de hauteur. - Et nous voulons aussi dire la hauteur de la ligne et définir la hauteur de la ligne du texte à zéro comme ça. - Ok, - donc c'est la première étape, c'est de créer une classe que nous pouvons appliquer. - Et nous pouvons l'appliquer maintenant à n'importe quel élément, - n'importe quel élément apparent qui s'effondre. Donc on va aller voir le parent qui a le problème. - Donc ce type appelé conteneur de classe qui a la couleur de fond gris. - C'est celui qui a le problème. - Alors on va rentrer. - Cette classe est égale à conteneur. - On va mettre un espace, et on va appliquer un autre cours appelé Clear Fix. - Comme ça. - Je n'ai pas eu à écrire les deux-points après les parties ici. - Je n'ai qu'à utiliser le nom de la classe, - ce qui est clair. - Réparer. - D'accord. - Et si nous revenons ici et que nous actualisons le code, vous pouvez voir qu'il le corrige. - Maintenant, le parent sait à quel point il doit être grand. - Même si les enfants flottent à l'intérieur. - Ok, - donc nous avons appris la plupart des choses qui peuvent vous causer des ennuis quand vous utilisez - positionnement flottant, - comme des éléments qui essaient de sauter à côté des éléments flottants. - Et vous devez les régler pour effacer les deux pour descendre en bas. - Et on a aussi regardé les parents. - Quand tous les enfants flottent à l'intérieur d'un parent, - ils ont tendance à s'effondrer. - Et nous avons cherché à utiliser un correctif clair pour corriger ce problème. - Um, - revenons en fait à ce que nous avons discuté plus tôt concernant les deux boîtes différentes - modèles et parfois les problèmes que vous pourriez rencontrer quand vous devez faire face à la configuration - esprits de votre de vos colonnes pour s'adapter à la fois modèles de boîte. - Donc, pour cet exemple, - allons de l'avant et changer quelques choses par ici. - Je vais aller au cours de la boîte ici, - et enlevons le rembourrage à l'intérieur. - Donc on va dire le rembourrage zéro. - Et, - euh, - c'est en fait mettre la marge à zéro. - Aussi, - pour l'instant, - ok, - et puis allons de l'avant et changer la largeur pour être un pourcentage. - Alors, - hum, - voyons. - Donc si j'ai trois colonnes ici, et je veux que ces gars occupent 100% de l'espace ici. - Nous pourrions définir la largeur de chaque 1 à 33,3% ferait chacun des trois prendre. que Je supposequeje nous ai fait monter à 99,9 %. - Peut-être qu'on pourrait faire, - comme 0,333 pour le rapprocher encore. Et puis on va aller de l'avant et on verra que ces trois éléments sont également espacés. - Alors voici un pour et trois. - Donc chacune de ces colonnes est côte à côte. - Eso Ça marche quand on n'a pas de rembourrage et pas de frontière. - Donc, - en fait, - je suis en chrome en ce moment. - Je suis dans le navigateur Chrome, - qui utilise le modèle de boîte W trois C où, - lorsque vous spécifiez un avec elle n'inclut pas de remplissage ou de bordure. - Donc ça marche très bien parce qu'il n'y a pas de rembourrage ou de bordure. Mais voyons ce qui se passe maintenant quand on décide de Teoh, , on a dit quand on décide de donner un rembourrage et une bordure, alors la première chose à faire est que je vais donner le conteneur avec. - Donc, par exemple, - vous savez, - puisque ces air sont tous à l'échelle 33% je peux en fait donner un fixe avec le conteneur maintenant. - Donc, nous dirons hypothétiquement que nous voulions que le conteneur parent soit de 800 pixels de large. - Quelque chose comme ça. - Ça devrait tout effacer ici. - D'accord. - Et maintenant ce conteneur a un fixe avec et nous allons Teoh dire, - Eh bien, - nous voulons ajouter un rembourrage ou une bordure autour de ces colonnes. - Donc je sais déjà que cela va casser dans ce navigateur particulier à cause de sa boîte - modèle qu'il utilise. - Donc ah, - 33.3 pour chacun de vous devrait finir jusqu'à 100%. - Mais ça ne compte pas le rembourrage ou la marge. - Donc, disons que nous définissons le rembourrage à l'intérieur de la façon Teoh pourrait utiliser des pixels comme 20 pixels, - mais pourquoi ne pas utiliser un pourcentage ? - Et puis on peut faire les calculs pour voir, - comme, - combien de pourcentage supplémentaire ajoutaient. - Disons que j'ajoute comme, - 1% de rembourrage autour de tous les côtés de l'élément, - et je vais aller de l'avant et cliquer sur courir, - et ça l'a cassé. - Donc, la raison pour laquelle est que la largeur de chaque. - Chaque chroniqueur, - 33%. - Donc 33 plus 33 plus 33 ajoute jusqu'à comme 99,999 fondamentalement 100% droit. - Mais quand on a un rembourrage, c'est 1% de chaque côté. - Donc, cela ajoute un 123456% de rembourrage supplémentaire. - Donc ça, maintenant Ah, - 106. - Il est en fait devrait prendre 106% ce qui ne rentre pas dans le 100% large avec du - conteneur 800 pixels. - Donc, à cause de ça, - il n'y a pas assez de place pour que chaque élément puisse exister pour que cela soit un peu plus facile à voir. - Pourquoi ne pas aller de l'avant et sortir de la frontière ici pour sauver la frontière d'un pixel solide - noir comme ça. Maintenant, c'est un peu plus facile de voir où sont chacune des divisions. Et si je voulais ajouter une bordure et un rembourrage sur ces éléments, mais je ne voulais pas que ça soit ajouté. Et si je voulais ajouter une bordure et un rembourrage sur ces éléments, - En plus de la largeur, - Je voulais qu'il soit inclus dans ce 33% avec donc ce que nous pouvons faire est que nous pouvons réellement définir chrome - ou tout autre navigateur pour le forcer à utiliser le modèle de boîte Internet Explorer qui comprend - bordure et rembourrage dans la largeur. - Laisse-moi y aller et venir ici, on va zoomer et je vais aller de l'avant et - taper le décalage Starkey en huit pour créer une étoile. - C'est ce qu'on appelle le sélecteur universel, - et le sélecteur universel est comment vous pouvez sélectionner tous les éléments littéralement chaque élément, - um, - et dira à tous les éléments d'avoir, - euh, - oups pour avoir ah, - boîte papa exercice. - Et pour en faire la méthode i e box, - nous pouvons dire la zone de tiret de bordure et nous pouvons ajouter les préfixes um tiret M O Z taille de tiret - et aussi définir cela à la zone de bordure. - Et nous pouvons également ajouter les préfixes pour la taille du tableau de bord de caisse Web kit juste pour couvrir toutes nos bases. - Donc ça va marcher dans n'importe quel navigateur et dira la zone de tiret de bordure comme ça. - Donc, cela dit à tous les éléments à adopter indépendamment du navigateur dit tous les éléments sur - la page pour adopter le modèle de boîte Internet Explorer qui inclut le remplissage et la bordure dans - remorquage. - avec. - Donc ça ne devrait pas être extra avec, - d'accord, - et ensuite on va aller de l'avant et cliquer. - Exécutez et vous pouvez voir qu'il résout ce problème. - Ce qui est cool, c'est que je peux changer le rembourrage maintenant et qu'il ne devrait pas se casser. - Je peux faire ce rembourrage maintenant pour mettre 3% comme ça, - et ça me donnera plus d'espacement à l'intérieur de la boîte. - Vous pouvez le voir. - Déplacez le texte vers le bas. - On peut aussi ajouter une bordure plus épaisse si on veut. On pourrait dire comme, - Oh, - la bordure devrait maintenant être aux pixels à la place ou quelque chose comme ça et je pourrais courir ça - là. Et la bonne chose à propos d'utiliser des pourcentages pour ces colonnes, c'est que maintenant, - si je change la taille du conteneur, - ils répondront en conséquence. - Donc si je change d'avis et que je veux que ce conteneur ait 600 pixels de large, alors ils vont rétrécir comme ça. - Ils répondront tous en conséquence. - Et je peux aussi le rendre plus grand, - comme 900 pixels ou quelque chose comme ça. - Et ils répondront comme ça. Je suppose que neuf cents sur mon écran un peu là-bas, mais , tout cas, vous pouvez voir que je peux changer la taille du conteneur. - Je ne peux même pas mettre le conteneur à un pourcentage si je veux. - Je pourrais dire, - genre, - 90% et rafraîchir ça. - Et on a juste les 10 % restants ici, donc c'est plutôt cool. - Ok, - hum, - voyons, - De quoi d'autre veut-on parler ? - La marge de marge n'est donc pas incluse dans l'une ou l'autre des mesures du modèle de boîte. - C'est une chose dont je dois être conscient. - Si j'ajoute une marge ici de seulement 1%, regardez ce qui se passe. - Ça va vraiment le casser. - Et même pas la propriété de dimensionnement de la boîte ne peut nous sauver, - parce que ni le modèle W three C box ni le modèle I E box ne comprennent la marge, - qui est un espacement en dehors des éléments. - Donc, je viens d'ajouter 1% marge, - qui sera 1% à gauche et à droite d'un, - la gauche et la droite de deux dans la gauche et la droite de trois sets. - Un total de 6123456% qu'il va ajouter sur supplémentaire. - Donc ça va être 6% um, - plus de ce que ça doit être pour rester côte à côte flottant. - Donc si je me rafraîchis, ça va sauter la troisième boîte. - Ça va le casser comme ça. Donc mes options sont d'être au courant du fait que je soustraie ce pourcentage, non ? Donc mes options sont d'être au courant du fait que je soustraie ce pourcentage, - Donc, si j'ai, - um, - 100% de l'espace ici, - droite, - ah, - 100 façon de penser que le conteneur parent est la disponibilité de 100% de l'espace avec - à l'intérieur de la conteneur parent là-bas sur Ce que je peux faire est que je peux soustraire ce 1% de réduction - de chaque côté. - Donc, ce qu'on peut faire, c'est prendre l'application de la calculatrice et l'amener ici, et on peut faire des calculs. - Donc si j'ai 100% de l'espace disponible et que je soustrais les 6123456% de marge, ça me donne 94 pour cent restants. les 6123456% de marge, - Et cela doit être divisé entre ces trois la largeur de ces trois boîtes pour que je puisse prendre - que 94 je peux diviser par trois. - Et ça me donne 31.3 répéter. - Donc, il est assez simple maths ont aussi à faire ici est de revenir en et de changer la largeur de la - boîte de 33 à 31% pour compenser la marge. - Et ça répare ça. - Et j'ai encore un espacement entre les boîtes comme ça. - Donc c'est plutôt cool. - Et je peux toujours revenir à ce conteneur ici et changer la largeur de toute façon, - j'aime et ça va Teoh, - ça va réparer ça peut même juste l'enlever là comme ça et faire exactement - avec Ok, Donc nous avons discuté à peu prèsde tout ce que vous auriez besoin de faire dans la mise en page. Donc nous avons discuté à peu près Mais il y a une chose que nous avons laissée de côté, et c'est comment centrer les choses dans la mise en page. - Ce qu'on peut faire est une stratégie typique est de créer quelque chose appelé un rappeur pour que je puisse entrer dans ce code ici, - et je vais juste, - dans Dent toutes ces pompes à code. - On y va. - Et on va entourer ce code d'un conteneur extérieur. - Et je vais donner à ce type et moi un rappeur comme ça et on va le fermer ici. - Je dirais juste slash Div et je peux même écrire un commentaire si j'aime me dire que - C'est la fin du rappeur comme ça. - Donc vous pouvez voir que nous avons entouré tout le concept ici avec un rappeur d'ouverture et rappeur de fermeture -. - Um, - cela met fondamentalement toutes les autres boîtes à l'intérieur d'une plus grande boîte, - et maintenant j'ai la possibilité de styliser cette plus grande boîte et de contrôler où elle est positionnée donc - je vais juste aller de l'avant et entrer dans le CSS et créer. c'est un i d, Puisquec'est un i d, si je veux créer un sélecteur pour ça, je dois utiliser la balise de hachage et le nom du I. D particulier est rappeur. - Donc je peux dire un rappeur de hashtag comme ça et maintenant je peux styler ça. - Alors donnons ça une intelligence avec tout mettre à 800 pixels à nouveau comme ça. - Et puisque, - hum, - puisque je n'ai pas d'esprit spécifié pour mes autres conteneurs comme ci-dessus et ci-dessous, - ils vont juste être aussi larges qu'ils peuvent l'être parce que leurs éléments de niveau de bloc et - depuis le rappeur va avoir un spécifique avec, - ils vont juste être aussi large qu'ils le peuvent jusqu'à ce qu'ils tombent dans le bord de ce rappeur. - Jetons un coup d'oeil à ça. - Donc mon rappeur a une largeur de 800 pixels, - et puis je peux cliquer sur Exécuter, - et cela gardera tout contraint dans les 800 pixels là. - Donc c'est plutôt cool. Et si je voudrais maintenant centrer toutes ces choses dans la mise en page ? - Alors rappelez-vous que nous pouvons utiliser la marge, - um, - comme espacement à l'extérieur des éléments. - Ok, - Donc Margin accepte également une valeur de marge auto et automatique, - fondamentalement va juste créer une quantité automatique de marge où il va juste pousser la marge - de l'élément jusqu'à ce qu'il tombe dans quelque chose d'autre, - comme un conteneur parent ou le bord de la fenêtre du navigateur. - Donc, puisque j'ai un jeu d'esprit, - je peux maintenant définir cette marge, - um, - à la marge automatique pour qu'elle crée une quantité égale de marge des deux côtés. - Donc fondamentalement, - Je veux définir l'auto de la marge gauche et l'orteil de la marge droite. Et si je veux une marge en haut et en bas, je pourrais régler ça aussi. Et si je veux une marge en haut et en bas, - Dans ce cas, - Je pense que ce que je vais faire est que je vais créer une marge zéro sur le haut et le bas en mettant un zéro - là et puis je vais mettre Auto pour la gauche et la droite. - Alors rappelez-vous, - lorsque vous avez utilisé des valeurs à l'intérieur de la marge ou de la marge aux valeurs indique que le verset - la première valeur représente l'espacement supérieur et inférieur, - et la deuxième valeur représente les espacements gauche et droit. - C'est dire à la marge d'être un montant automatique à gauche et à droite de cet élément appelé Rapper que IHS entourant tout le reste. - Donc, si je vais de l'avant et que ça centre tout pour que vous puissiez voir qu'il y a une marge égale ici dans une quantité égale de marge là. - Et en fait, - au fur et à mesure que la fenêtre du navigateur se rétrécit et se développe, - cette marge s'ajustera car elle est réglée sur auto. - C'est donc la façon habituelle de voir les gens centrer le contenu. - Ok, - maintenant, - dans le prochain exercice, - au lieu de centrer tout le contenu, - nous allons juste centrer certaines parties du contenu. - Alors quoi ? - Je suis allé de l'avant et l'ai fait dans les exercices que vous verrez est que j'ai créé une classe appelée Rapper, - et je l'ai appliquée à plusieurs endroits partout. - Donc, - par exemple, - je pourrais juste l'appliquer, - l' appliquer à l'intérieur de cette barre supérieure ici et un au-dessus et à l'intérieur de ci-dessous. - Et de cette façon, vous pouvez avoir des barres qui s'étendent sur tout l'écran, - mais ensuite du contenu à l'intérieur de ces barres qui se centre lui-même. - Ok, - donc, - euh, - c'est un très bon moyen pour Teoh de travailler avec des maquettes en centre commodément. - Tout est d'utiliser quelque chose appelé un rappeur, - ou certaines personnes l'appellent un conteneur et dit qu'il a une marge de zéro auto, - et cela va pousser l'élément au milieu. - Ok, - super. - Donc, - euh, - c'est vraiment tout gagner l'orteil. - Regarde maintenant. - Allons de l'avant et appliquons toutes ces choses que nous avons apprises dans l'exercice continu sur lequel - nous travaillons pour la compagnie de chaussures CHW. - Et puis après avoir terminé cet exercice, - vous pouvez passer au prochain défi de code. 33. Préparer la mise en page: - Salut, les gars. - Bienvenue. - Ceci est le modèle de boîte de l'exercice 3.1 et la mise en page. - Maintenant, - dans cet exercice particulier, - nous allons construire toutes les techniques que nous avons apprises de l'ensemble précédent - des diapositives de conférence et des exemples où nous avons exploré des choses comme la boîte de modèle - esthétique et aussi le positionnement flottant pour créer des mises en page. - Vous pouvez voir que j'ai déjà téléchargé le code source ici, - et je l'ai mis en texte sublime. - Et les deux principaux fichiers avec lesquels il travaillera ici sont la page html de point d'index et aussi la page CSS de point de style. - Bien sûr. - Ok, - J'ai aussi parlé de ça dans ah navigateur ici pour qu'on puisse voir où - on en est. - Parlons un instant de ce qu'on va faire dans cet exercice. - D'accord ? - Donc vous pouvez voir ici ces air, - tout le contenu de la page que nous avons ajouté dans tous les exercices précédents. - Donc ici nous avons toutes les vidéos texte, - images et liens des exercices précédents et passés et utilisant, - um, - vous savez, - l'espacement comme le rembourrage et la marge et la largeur et la hauteur que nous avons appris du modèle de boîte - exemple, - Nous allons commencer à dimensionner et ajouter de l'espacement à ces éléments. On va aussi ajouter de l'esthétique de la boîte amusante comme des images de fond, INT Grady et un rayon de bordure autour des coins de nos boîtes et des orteils d'ombre. - Ajoutez des ombres portées sur certains de ces éléments, - donc nous allons ajouter quelques boîtes de conteneurs ici à notre page à haute voix et les styliser. - Donnez-leur un style esthétique et la prochaine nous allons passer à l'intégration de la flûte - positionnement pour créer des structures de colonne dans la disposition. - Donc, pour commencer, - Allons de l'avant et faisons apparaître le code et nous allons aller dans la page html du point d'index, - et j'ai décidé que je veux - Allons de l'avant et faisons apparaître le code et nous allons aller dans la page html du point d'index, - et j'ai décidé que je veuxque l'en-tête ici ait deux panneaux principaux dedans. - Et vous vous souvenez que vous vous souviendrez de l'exercice précédent que nous avons créé, - ah, - panneau de logo et un panneau de barre de knave, - et cela nous permettra de créer un conteneur qui s'étend sur tout l'écran. - Mais j'aimerais aussi créer quelques rappeurs Tibbs que nous pouvons utiliser pour centrer le contenu en utilisant - marge automatique, - que nous avons vu dans les exemples de diapositives de la conférence précédente. - Donc on veut prendre comme ça. - Ah, - ce logo ici et le pousser dans un conteneur qui centré même si nous aurons une plus grande - boîte environnante appelée logo ou panneau de logo qui s'étirera avec une texture Grady Int 100% - de l'écran. - Ok, - donc chaque fois que vous voulez créer une boîte à l'intérieur d'une boîte à des fins esthétiques et Div est le plus - probable ou aller à l'élément, - rappelez-vous que dans HTML cinq, nous avons des éléments sémantiques comme en-tête et section, - et ils étaient surtout réservés pour suggérer sémantiquement qu'il s'agit d'une certaine section de la page ou que le contenu de cette page a une certaine relation ou signification. - Dans ce cas, - nous sommes juste intéressés à créer des boîtes pour cela, - Pour le bien de style esthétique, - quelque chose est donc ici nous avons une boîte avec l'idée de nab notre dans une boîte de l'idée de logo et - à l'intérieur de ceux-ci, je vais créer une boîte intérieure appelée une Div avec une classe de rappeur ceci et - nous allons aller de l'avant et fermer ceci ici, - et nous pouvons même faire un petit commentaire ici. - Alors laissez-nous, - non, - plus tard que cette fermeture particulière, - Div ferme le rappeur comme ça, - et nous allons aller de l'avant et en ajouter un autre ici. - Parfois, vous verrez des gens créer un rappeur unique qui entoure tous vos éléments et souvent fois. D' habitude, les gens le nomment une idée de rappeur ou une idée de conteneur. - Maintenant, - dans notre cas, - nous allons avoir des barres sur tout l'écran qui s'étireront, - vous savez, - 100% sur tout le haut du navigateur. - Et à l'intérieur de cela, - nous avons le besoin d'avoir plusieurs rappeurs plus petits qui vont centrer le contenu à l'intérieur d' une boîte plus grande. - Il s'étend sur tout l'écran. - Donc pour cette raison, - nous allons avoir plusieurs rappeurs, - et chacun de nos rappeurs va alors avoir, - um, - un nom de classe de rappeur parce que, - rappelez-vous, - classe que vous pouvez utiliser plusieurs fois, - alors qu'un I D. - Vous ne devriez vraiment l'utiliser qu'une fois par page. - On va avoir une classe de rappeurs ici. - Nous allons également créer une boîte qui va esthétiquement porter une texture de bois à l'intérieur - de celui-ci. - Donc, toutes nos sections comme ça sur la section et la section « Artist corner » dans la section « business - news ». - Toutes ces sections de page qui sont diffusées dans la zone principale constante. - Toutes ces sections seront centrées à l'aide d'un rappeur, - et il y aura aussi une autre boîte extérieure avec une idée de bois que nous pouvons créer qui tiendra une texture de bois à l'intérieur. - Ça va aller derrière toutes ces sections. - Donc nous allons juste sortir et donner à ce gars un div I d de bois comme ça, - et à l'intérieur de ça ils ont fait avec la classe de rappeur pour que nous puissions centrer - contenu à l'intérieur d'une boîte plus petite ici. - Ok, - et je veux que ça finisse. - Ces deux gars doivent fermer en dessous de toutes les sections avant d'arriver au détail - section dans le pied de page pour que je puisse venir ici après la fin de la nouvelle section ici, - et nous allons de l'avant et à une clôture, - diffèrent le rappeur point Rappeur et aussi une section de fermeture pour la texture du bois. - Donc la texture du bois ici va prendre 100% avec de l'écran, - alors que tout rappeur aura un fixe avec et sera centré pour centrer toutes les sections - de la page. - Ok, - hum voyons, - nous avons aussi la section des détails, - qui est juste avant le pied de page, - et cela aura trois colonnes. - Finalement. - Une colonne sera les informations de contact, - puis une autre colonne sera des liens vers nos sites soeurs et d'autres entreprises liées à la chaussure - entreprises commerciales. - Et puis la troisième colonne ici sera pour les liens de médias sociaux et tous ces - trois colonnes de compte ici, - Je veux les avoir aussi à l'intérieur d'un fixe avec ça un centre utilisant un div avec une classe de - rappeur. - Ok, - donc les détails vont étirer 100% de l'écran, - mais alors nous aurons une boîte avec un fixe avec l'intérieur de celui-ci, - donc votre site ne pourrait pas être constitué exactement la même chose que le mien. - Esthétiquement, - c'est juste que je réalise le regard que je vais aller de l'avant. - Mais c'est parfaitement bien si vous êtes la structure de rappeur ou que vos structures div ne sont pas les mêmes - que la mienne. On dirait que tout est en place ici dans la page d'index. Je suis allé de l'avant sur toutes les autres pages, comme catalogue, contact, prix et vente, et j'ai ajouté tous ces rappeurs, comme catalogue, contact, prix et vente, et j'ai ajouté tous ces rappeurs, et Stives avec le bois. texture. - J'ai ajouté tout ça pour vous, - donc je voulais juste l'ajouter à la page d'index juste pour vous montrer où ils ont été placés dans le code, - donc je voulais juste l'ajouter à la page d'index juste pour vous montrer où ils ont été placés dans le code, 34. Appliquer des propriétés de boîte à la boîte: - Donc maintenant ce que nous pouvons faire est d'affaiblir Jump dans la page CSS point de style. - Et je vais aller de haut en bas. - Et je vais ajouter un tas de styles aux différents éléments comme je vais, - juste ajouter un peu d'espacement en utilisant le modèle de boîte et aussi quelques esprits et hauteurs de choses et - aussi une certaine esthétique de boîte, puis plus tard passera à l'utilisation de propriétés flottantes pour - positionner les éléments et créer une structure de colonne. - Donc on peut juste aller en haut de la page CSS de point de style ici, - et le 1er 1 que je vais faire est que je vais en fait sélectionner le corps lui-même. - Donc le corps est en fait un élément. - Et rappelez-vous les corps, - toute la zone visible de la page. - Et allons de l'avant et ajouter une propriété esthétique de boîte ici, - qui est appelé arrière-plan. - Donc fond est la façon dont nous pouvons spécifier une image et l'image est positionnée et - si elle se répète ou non etcetera. - Donc, afin de spécifier une image de fond, - nous pouvons dire que vous êtes l, puis entre parenthèses, - nous pouvons pointer vers l'emplacement de l'image. - Quelqu'un va de l'avant et dit point, - point barre oblique pour quitter le dossier CSS, - puis images barre oblique pour aller dans le dossier images. - Et je vais utiliser Ah une image appelée papier fait main a PNG et par défaut, - si vous ne spécifiez pas, - um, - tout positionnement ou toute répétition de l'image par défaut, - il sera positionné en haut à gauche coin du corps, - et il se répète infiniment parce que je ne spécifie aucune commande répétée. - Les valeurs ici vont juste se répéter horizontalement et verticalement comme faras. - La fenêtre du navigateur peut aller, - donc c'est bon et sauvegardez ça et revenons et nous allons frapper rafraîchir et c'était assez subtil. Je ne sais pas si vous pouvez le dire, mais tout est blanc avant et maintenant il a une sorte de papier. Si nous zoomons ici, vous pourriez peut-être le voir un peu mieux là-bas, ce genre de ah, une texture depapier fait main. Si nous zoomons ici, vous pourriez peut-être le voir un peu mieux là-bas, ce genre de ah, une texture de - C'est un blanc cassé. - Nous venons de donner à nos pages blanches une texture subtile de blanc cassé. - Si vous voulez aller de l'avant et voir à quoi ressemble cette image par elle-même, - vous pouvez l'amener ici dans le détecteur et vous pouvez voir ça s'appelle du papier fait à la main. - Donc ah, - carré de ceci n'est que si grand. - C'est en fait seulement 100 pixels par 100, - mais il se répète infiniment, - quelle que soit la largeur de notre écran, - quelle que soit la taille et la largeur de la fenêtre du navigateur, - il va juste répéter cette texture et il ressemble à une texture sans couture. - Ensuite, nous allons aussi changer l'espacement sur des choses comme les H 2 et H 3. - Et rappelez-vous, - si j'utilise une virgule, - je peux spécifier un sélecteur de composé, - où il coiffera les H 2 et H 3 de la même façon - et on va ajouter une marge. - Une marge inférieure ici, - ce qui se souvient, - la marge est l'espacement en dehors des éléments. Donc, si je veux ajouter un peu d'espacement sous les H 2 et H 3, je peux régler ça ici. - Dans notre cas, - l'espacement sous les H 2 et H 3 est un peu plus que je ne le veux. - C'est la valeur par défaut qu'il obtient de la normalisée au CSS que nous avons également liée à -, - et, - um, - on dirait qu'il est à environ 2025 pixels espacés. - J'aimerais que Teoh soit plus proche des paragraphes. - Donc je vais régler ça à cinq pixels de marge. - D'accord ? - Et si nous sortons et que nous revenons et nous rafraîchissons, nous pouvons voir que nous changeons l'espacement là-bas. - Mis à part nos rubriques ici, - nous voulons également changer la marge sous notre liste. - Donc nous avons commandé et une liste et n'a pas fait. - Et si nous voulons changer la marge bleue là, - nous pouvons le mettre en marge tiret bas et dirons 10 pixels et les éléments de la liste eux-mêmes. - Nous voulons qu'ils soient un peu en retrait, - donc nous allons aller de l'avant et définir la marge gauche Dash à environ 20 pixels comme ça et nous allons économiser - et nous reviendrons parcourir et rafraîchir maintenant pour les voir. - Ces articles de liste sont en fait sur la page du catalogue. - Et si je fais défiler ici jusqu'à l'endroit où nous avons des archives de chaussures, - vous les verrez en retrait ici 20 pixels. - Et aussi ici vous verrez le 123 qui devrait être maintenant et en retrait 20 pixels ici. - Ok, - c'est bien. Donc nos paragraphes et notre barre d'adresse, nous avons aussi une taille de police ici. Donc nos paragraphes et notre barre d'adresse, - Nous allons aussi y aller et ajouter une marge à l'intérieur d'ici. - Donc juste de la même manière que nous pouvons voir la marge, - tiret, - haut, - marge, - tiret, - marge inférieure, - tiret gauche. - On peut aussi utiliser le raccourci. - Hum, - et rappelez-vous, - le nombre de valeurs que vous placez ici déterminera quel côté est affecté ou quel côté est espacé. Eso ici, on peut dire, , par exemple, si on veut mettre le top 20 et les deux côtés à zéro, mais on veut mettre les 2 25 pixels du bas, ce serait une autre façon d'écrire ceci. - Donc, au lieu de dire marge, - tiret bas, - nous pouvons aussi dire marge, - qui est raccourci et dire zéro sur le zéro supérieur sur la gauche et la droite et 25 pixels sur le - bas comme ça. - Donc, quand il y a trois valeurs, - la première valeur est la deuxième valeur supérieure est les deux côtés, - et la troisième valeur est le bas. - D'accord ? - Et nous allons aussi y aller et ajouter un peu d'espacement. - Nous allons utiliser la même technique pour ajouter un peu d'espacement sous les chiffres. - Alors rappelez-vous, - nous avons un html cinq élément sémantique appelé figure qui existe autour de toutes nos - images ici. - Et aussi la figure est environnante aussi, - notre vidéo ici dans la section coin de l'artiste. - Donc nous allons aller de l'avant et dire, - Figure et nous allons ajouter une marge ici de zéro virgule ou excusez-moi zéro espace zéro, - 10 pixels, - juste 10 pixels sur le bas et aucune marge sur les intérieurs supérieurs. 35. Le style des tableaux: - Ajoutons aussi un peu de style à notre table que nous avons créée. - Souviens-toi qu'on avait une table sur la page des prix. - Je vais te montrer ça un instant. - Donc c'est la section du graphique des prix ici, - et nous avons cette table composée des éléments TR et th qui est l'en-tête de table et T d. - Qui est le diviseur de table ou un non en-tête ici, - créer une structure de colonne ou créer vraiment une table cellule. - Donc, ces air créant toutes ces lignes et colonnes de la table Donc nous aimerions styler ceci comme - est Vous pouvez voir à quoi il ressemble pas élégant ici, - affaiblir, - sauter sur les prix. - Et vous pouvez voir que ces air sont rassemblés ici, donc on verra ce qu'on peut faire pour que ça soit un peu plus beau. Allons-y et disons à ce type orteil qu'il a une largeur de 100 %. - Euh, - et ce sera bien, - parce que quand on change la taille de nos emballages, - hum ou, - tu sais, - la taille de l'appareil diminue. - On peut demander à la table de répondre en conséquence. - Donc nous allons définir ce type pour avoir une largeur de 100% et nous allons de l'avant et dire Marge 000 20 - pixels comme ça et nous allons ajouter une bordure en haut d'un pixel solide moyen Grey comme ça - utilisera un raccourci hexi décimal pour le gris moyen, - et nous allons également créer une bordure similaire. - Mais cette fois sur le côté gauche aussi, - nous dirons le tableau de bord gauche d'un pixel, - livre solide C C c pour créer un gris moyen là. - Ok, - Nous voulons aussi styler la rose de table, - qui utilise la balise TR comme ça. - Je veux ajouter une couleur de fond à ces gars, - hum, - les lèvres arrière, - et on va dire e f f f e f, - qui est une couleur gris très clair, - un peu comme juste 11 crans de blanc d'une certaine manière - euh, - et regardons ça une seconde. - Donc si je rafraîchis ça maintenant, - ces gars sont de couleur plus claire gris, - mais vous pouvez voir et nous avons aussi une bordure sur le dessus et sur le côté gauche. - Et ça s'étire aussi à 100% en ce moment. Et si je voulais mettre cette couleur grise plus claire à toutes les autres rangées. - Alors peut-être, - comme je veux que les rangées paires des toits de table soient une couleur de fond gris clair. - Donc, ce que je peux faire, c'est que je peux utiliser un pseudo sélecteur de classe. - Auparavant, - nous avons regardé les sélecteurs de classe pseudo pour les liens comme hover et visité pour contrôler divers - états de liens. Jetons un coup d'oeil à un autre pseudo sélecteur de classe appelé Child, et on va dire End enfant même. - Et cela ne sélectionnera que des lignes numérotées même que des lignes de tableau numérotées et le changer - cette cette couleur grise ici comme ça. - Donc, - par exemple, - si je disais, - um, - la table rose, - par exemple orteil blanc comme ça et puis j'ai dit que les seules lignes paires à une grande couleur - obtiendront cet effet, - ce qui est comme ça. - Donc maintenant c'est un peu rayé, - et c'est plus facile puisque nous avons la rangée de table rayée comme ça, - il est plus facile de voir où ces lignes s'alignent les unes avec les autres. - Il s'avère un peu plus tard. - On va juste dire aux sections que tout est en blanc, pour qu'on puisse même enlever le blanc pour l'instant. - et finalement ils hériteront juste de la couleur de la section blanche derrière la table. - Voyons voir, - Qu'est-ce qu'on veut faire d'autre ici, - à la table ? - Ce que nous avons les en-têtes de table et les diviseurs de table, - qui composent toutes les colonnes de la table et sorte de découper en cellules individuelles de - la table. - Et rappelez-vous, - nous voulons utiliser un rembourrage pour l'espacement à l'intérieur des éléments et la marge pour l'espacement à l'extérieur. - Donc, si je veux ajouter un espacement autour de ces chiffres et ces mots ici, - je dois utiliser l'espacement à l'intérieur de l'élément. - Alors on va aller de l'avant et régler ce type pour avoir un rembourrage de 10 pixels. - Je pense que ça devrait être sympa. - Et nous allons aussi mettre ce gars pour avoir un tableau de bord à droite d'un pixel, - couleur gris moyen solide comme ça, - comme avant. - Sauf la dernière fois, - vous savez, - pour la table il seulement comme une bordure sur le haut et à gauche. - Chaque cellule aura une frontière sur les droits et aussi sur le fond comme ça. - Donc nous allons dire ça et revenons nous rafraîchir et voir ce que ça a fait. - On y va. - Donc le rembourrage a ajouté un peu, - évidemment un peu de rembourrage autour de chacun de ces gars et, - euh, - chaque cellule individuelle a une bordure en bas à droite. - Celui-ci a en bas dans le bas droit dans la droite. - Donc, puisque chacun a une bordure en bas et à droite, - il fait en fait une boîte. - Et puis pour faire la bordure en haut et à gauche, - nous venons de l'ajouter à la table elle-même pour remplir. - Juste celui-là et celui sur le côté gauche dans notre table a l'air assez bien. - Ce type s'appelle un th, - qui est la tête de table. - Donc, - par exemple, - penseur Steam Dolby à Washington, - Warby à Brixton. - The Brandon nomme ces air à l'intérieur des étiquettes TD, - mais celle-ci ici marque en haut est à l'intérieur d'un en-tête de table. - Donc, si nous voulons le style de week-end, l'en-tête de table soit un peu différent, donc nous savons que c'est l'en-tête Um, donc changeons la couleur de fond de celui-ci pour être un peu plus sombre. - Grey dira cinq fouets livre 555 et nous allons également changer la couleur du texte pour être blanc - comme ça et nous reviendrons et rafraîchir, - et maintenant vous pouvez voir les en-têtes de table plus foncés là-bas. - Ça a l'air plutôt bien. 36. Le style des formes: - um, - sautons sur la page de contact ici et utilisons les, - vous savez, - les nouvelles propriétés que nous avons apprises, - comme l'affichage et, - euh, - et les esprits et le rembourrage et la marge pour faire un forme attrayante ici. - Donc maintenant, - notre forme a l'air un peu triste. - Revenons et profitons des nouvelles choses que nous avons apprises et stylisons cette forme - ici. - Donc je vais sélectionner toutes les zones d'entrée et toutes les zones de texte, - et par défaut, - ces gars s'affichent en ligne. - Je vais les changer pour afficher le bloc. - De cette façon, ils s'afficheront l'un sur l'autre, - l'autre au lieu de côte à côte. - Voyons ce que ça a fait là. - Donc, si je me rafraîchis maintenant, ces champs étrangers sont l'un au-dessus de l'autre comme ça. - Ok, - c'est plutôt cool. Allons de avant et disons à ce type qu'il a aussi une largeur de 100 % comme on l'a fait avec la table . - De cette façon, - il va s'étirer dynamiquement, - et cela sera utile quand nous commencerons à faire la réponse du design où, - euh, - les tables et les formes et les choses réduites sur différentes tailles donc nous allons le faire - un fluide avec de 100% là, - et nous allons ajouter un peu de rembourrage à l'intérieur de tous ces éléments à cinq pixels ajoutera un grand dans - tiret bas ici de cinq pixels, - donc ces air espacés un peu et nous allons ajouter une boîte shadow, - qui ajoute une ombre portée sous l'élément. - Et nous dirons zéro pour le décalage horizontal. - Trois pixels pour le décalage vertical. - Cinq pixels pour le rayon de flou et livre C C C C - C pour la couleur de l'ombre comme ça et ajoutera également une bordure autour. - Ces gars diront qu'il y a une frontière de chaque côté. - C'est un pixel solide. - Si, - si, - si juste pour correspondre à la table là-bas et nous allons enregistrer cela et revenons et vérifier cela -, - puis va rafraîchir. - Et ça commence à paraître plus cool. - Nous avons le nom, - email, - téléphone et message ici, - et tout ça a l'air bien. - Ok, - hum, - voir ce que je veux d'autre. - Un cerf. - Eh bien, - une chose est que ce bouton, - le bouton d'envoi est également étiré à 100%. - Donc je pense que ce que je vais faire est de définir un style pour sélectionner spécifiquement le bouton d'envoi. - Cela ne va pas à style 100% qui aura effectivement un fixe avec si nous devions sauter dans - cette page juste pour que je puisse vous montrer sur la page de contact. - Si je viens au formulaire de contact ici, - vous remarquerez que cette entrée a un type de texte. - Celui-ci a un type d'email. - Celui-ci a un type de téléphone et c'est la zone de texte. - Et j'ai déjà stylé tout ça pour être 100% sur parce que j'ai dit que toutes les entrées étaient 100% large. - Ce bouton ici qui dit envoyer sur elle est également style 100% ici. Maintenant, celui-ci a un type de soumission qui est unique de ces autres types de texte, e-mail et téléphone. - Donc, ce que je peux faire est que je peux utiliser un type spécial de sélecteur appelé un sélecteur d'attribut. - Hum, - et si vous voulez en savoir plus sur les attributs, - sélecteurs, - vous pouvez vous référer aux diapositives pour la conférence des sélecteurs CSS. - Donc, nous allons revenir dans le style point CSS et allons venir ici et nous allons de l'avant et - dire entrée et ensuite nous allons mettre des parenthèses pour sélectionner seulement une entrée avec un type spécifique, - donc nous pouvons dire que le type est égal à soumettre. - Donc ce que ça fait, c'est que ça dit Hey, - navigateur. - Allons trouver un élément, - um, - élément d'entrée et continuons et Onley sélectionne les éléments d'entrée qui ont un attribut - avec le type égal à soumettre. - Ok, - et ajoutons une marge en haut de ceci en disant Marge, - tiret haut et nous dirons cinq pixels, - et cela nous donnera un peu d'espacement au-dessus du bouton pour que ce ne soit pas juste contre - le contremaître met . - Et changeons aussi l'esprit. - Normalement, la largeur des entrées est de 100%. - On veut seulement faire 100 pixels, - donc ce sera un plus petit, - les réparer. - Et définissons la couleur d'arrière-plan en noir et la couleur du texte en blanc. - Et si je voudrais autour des bords d'un élément et CSS trois, - vous pouvez utiliser le rayon de tiret de bordure et nous allons le définir à 25 pixels, - ce qui va autour des coins et le faire ressembler un peu plus à un bouton circulaire - au lieu de ah, - graphique de bord carré, - et nous allons aller de l'avant et enlever la frontière sera de dire frontière zéro parce que par défaut, - boutons ont une bordure. - Ok, - donc nous allons sauver ça et nous reviendrons rafraîchir et voir ce que ça a fait à notre bouton d'envoi - ici. Coulson, notre bouton de fils ressemble à ça quand on survole le bouton soleil. - Nous voulions changer un peu pour que les gens sachent qu'ils peuvent cliquer dessus. - Eso de la même manière que nous avons créé une action de survol pour le style de vol stationnaire pour les liens. - Nous pouvons faire la même chose pour les boutons d'entrée en disant, - Hey, - CSS, - aller trouver une entrée qui a spécifiquement un type d'attribut égal à soumettre. - Et puis je peux utiliser le pseudo sélecteur de classe survolée pour dire Et quand nous survolons, - stylez-le de cette façon. - Donc ce que je veux faire ici, c'est juste changer la couleur de fond. - C'est la seule chose que je veux vraiment changer quand on survolera, c'est plutôt du noir. - Au départ, c'est noir. - On va le changer, - une couleur grise plus foncée comme ça, on va sauver. - Et si je rafraîchis, - alors si je survole envoyer, - vous pouvez voir qu'il se transforme en une couleur plus claire. - Ça va se transformer en gris plus clair comme ça 37. Styliser l'Iframe: - super. - Ok, - um, - quelques choses à mettre pour le modèle de boîte du cadre I. - Donc, nous utilisons un cadre oculaire dans la page de contact ici, - qui est le Google Maps dans le lit. - Nous intégrons Google Maps. - Vous utilisez le code que nous avons copié dans un exercice précédent de Google Maps. - Et c'est à l'intérieur de cet élément appelé I frame, - et nous devons aller de l'avant et styliser ça. , Ce que je vais faire, c'est aller dans le CSS ici et mettre I cadres et je veux enlever la bordure - hors de lui. - Je vais dire frontière zéro, - je vais dire rembourrage zéro et marge zéro. - Oups, - Marge avec un oeil. - On y va. - Et nous allons aussi à Sethi débordement pour se cacher de cette façon. - Aucune barre de défilement n'apparaît. - Et s'il y a une carte qui ne correspond pas à la taille du cadre, elle sera simplement cachée. - Et nous allons aller de l'avant et régler la hauteur à 353 pixels et arriver à savoir que c'est une bonne hauteur pour qu'elle corresponde approximativement à la hauteur de la forme qu'elle est au-dessus - elle. - On va revenir rafraîchir ça et ça lui donne une hauteur. - Ce sera Oh, - d'ici à ici sera à peu près égal à d'ici à ici. - Et finalement, - ça va être une structure à deux colonnes où la carte sera sur la colonne de droite - et le formulaire sera dans la colonne de gauche, - ça va être une structure à deux colonnes où la carte sera sur la colonne de droite -et le formulaire sera dans la colonne de gauche, 38. Centrer le contenu: Et tu te souviendras qu'il y a quelque temps, on a ajouté un rappeur, parce qu'on voulait avoir des barres sur l'écran pour le panneau du logo ici, qui va être étirée sur la page tout le long du haut. Et tu te souviendras qu'il y a quelque temps, on a ajouté un rappeur, parce qu'on voulait avoir des barres sur l'écran pour le panneau du logo ici, - Mais on voulait lui envoyer du contenu à l'intérieur. - Ok, alors jetons un coup d'oeil à ça. - Rappelez-vous, - nous avons ajouté cela a fait avec la classe de rappeur tout au long de la page, - partout où nous voulions centrer le contenu, - comme à l'intérieur de ce panneau de logo et aussi à l'intérieur de la barre de navigation. - Donc maintenant garde Knave Bar va étirer 100% du panneau de logo de l'écran va s'étirer 100% de - écran. - Mais rappeur, - qui contient les H un et H 2 avec le nom de la compagnie et le rappeur ici - contenant une navigation que nous allons donner un fixe au centre. - Donc, j'ai déjà appliqué cela sur toutes les différentes pages, - et nous pouvons juste revenir dans le CSS et ajouter la classe pour cela en disant rappeur de points, - et nous allons lui donner un fixe avec, - um 9 60 pixels. - Maintenant, nous pouvons changer cela quand nous passons au design responsive. - Ce que nous allons faire dépend de la taille de l'appareil. - On peut changer la largeur du rappeur. - Et parce que nous n'avons pas spécifié un avec pour l'autre contenu à l'intérieur, - il va évoluer en conséquence. - D'accord ? - Et vous vous souvenez que des exemples précédents dans les diapositives de conférence que nous avons regardé - en utilisant la marge automatique pour centrer le rappeur. - Donc, quand nous avons utilisé seulement les valeurs à l'intérieur du remplissage ou de la marge, - la première valeur spécifie le haut et le bas. - Donc, cela signifie marge zéro sur le haut et le bas, - et la deuxième valeur signifie les deux côtés gauche et droite. - Donc, définir une marge automatique sur la gauche et la droite va alors pousser quantité égale d'espacement sur le - gauche et droite, - ce qui permettra de centrer l'élément. - C'est en fait jeter un oeil à ça ici dans le navigateur. - Donc, si on frappe rafraichir, tu verras tout mon fils. - Tout mon contenu est maintenant centré. - Si vous voulez pouvoir voir le rappeur pour savoir vraiment, - comme ce que ces conteneurs font affaiblir temporairement, - au moins nous pouvons lui donner une couleur d'arrière-plan, - donc il est plus facile pour vous de le voir comme ça et ensuite nous allons appuyer sur rafraichir, - et en lui donnant une couleur de fond, - vous pouvez vraiment voir ce rappeur. - Il y a donc un div plus grand ici appelé Logo avec une idée de logo qui s'étire à 100%. - Et on va aller de l'avant et donner à un Grady en couleur qui arrive très bientôt. - Du blanc au gris. - Hum, - et puis nous avons créé ce rappeur DIV rappeur à l'intérieur de celui-ci pour créer une boîte en tant que fixe avec -. - Cela va centrer le contenu et vous pouvez voir même quand je compétences le navigateur dans, - ah, - plus large ou plus étroit. - Il garde ce contenu à l'intérieur du rappeur centré. - Il y a un rappeur autour du logo. - Il y a un autre rappeur ici, - qui est autour de la navigation. - Il y a un autre rappeur autour de tout le contenu, - le contenu principal ici qui contient toutes ces sections. - Donc il y a comme une section intitulée Company News qui est à l'intérieur de l'emballage, - et cette section est centrée parce qu'elle est à l'intérieur de ce rappeur et aussi cette chose - appelée Artist Corner. - Il y a une section que nous avons étiquetée Artist Corner plus tôt. - C'est aussi à l'intérieur du rappeur et aussi une section qui concerne la société qui contient - cette image dans ce paragraphe ici dans la rubrique ici qui est également à l'intérieur de ce rappeur. - Ok, - cool. - Et puis aussi, - c'est une section juste avant le pied de page. - Nous avons créé une section sur toutes les différentes pages. - C'est ce qu'on appelle les détails qui ont les coordonnées, - les liens et les liens des médias sociaux là-bas. Je vais aller enlever la couleur de fond là-bas, mais chaque fois que vous construisez une mise en page, ça peut être plus facile pour vous de donner à ces conteneurs des couleurs de fond juste pour que vous Je vais aller enlever la couleur de fond là-bas, mais chaque fois que vous construisez une mise en page, mais chaque fois que vous construisez une mise en page, ça peut être plus facile pour vous de donner à ces conteneurs des couleurs de fond juste pour que vous ça peut être plus facile pour vous de donner à ces conteneurs des couleurs de fond juste pour que vous - peut le voir. - Et puis ça rend un peu plus facile de voir où les choses sont air, - commencer et s'arrêter là où les choses commencent une fin et aide quand on se positionne - les choses, accord ? 39. Appliquer des ombres de boîte: - il y a encore quelques classes qui vont adhérer. - Ajoutons une autre classe ici appelée Shadow, - et nous pouvons aller de l'avant et ajouter une ombre à certains éléments sur la page et, - bien sûr, - utilisera l'ombre de boîte pour le faire. - Et nous dirons zéro horizontal, - Voyons voir. - Et puis nous dirons trois pixels décalage vertical, - 10 pixels pour le rayon de flou et rendra la couleur presque noire. - Mais pas tout à fait. - C'est une livre grise très foncée. - 333 Ok. - Et j'ai déjà appliqué Rapper, mais je n'ai appliqué aucune ombre nulle part. - Alors allons de l'avant et ajoutons réellement la classe d'ombre dans certains des éléments. - Je l'ai déjà ajouté sur la page de contact du catalogue, - prix et vente. Mais juste pour te montrer où on va le mettre en vue, je l'ai laissé sur la page d'index pour qu'on puisse voir je l'ai laissé sur la page d'index pour qu'on puisse voircomment j'ai traversé une saison supplémentaire. - Donc sur la page d'index ici, - le premier endroit où nous allons ajouter une ombre est sur ce panneau de logo, - donc il y aura une boîte qui s'étend sur toute la page appelée logo, - et nous pouvons donner à ça une classe en allant à l'intérieur de là et dire classe égale ombre. - Et puisque je vais ajouter ça à quelques endroits différents, tout juste le copier ici et ensuite on passera et on le collera partout. - D'accord ? - Donc le prochain endroit où je vais surtout ajouter, - c'est à l'intérieur de la zone de contenu principale. - Euh, - en bas après l'en-tête, nous avons la texture du bois va commencer dans le rappeur, - et ensuite toutes ces sections vont en fait avoir des ombres. - Ce seront des sections que je vais donner une couleur de fond blanc et une goutte - ombre, - et ça va être au-dessus de cette texture de bois, - et elles seront centrées parce qu'elles sont à l'intérieur du rappeur. - Je vais passer par chaque section et on ajoutera les ombres. - Alors les artistes coin, - vous avez aussi une classe d'ombre et, - euh, - des nouvelles. - Les nouvelles de l'entreprise vont également obtenir cette section va également obtenir une ombre portée dessus - comme ça. - Et je pense que c'est à propos de ça. - Est-ce que je veux ajouter l'ombre ailleurs ? - Je ne pense pas. - Je ne vais pas ajouter aux détails ou au pied de page. - Donc on est bons sur cette page. - Et comme je l'ai dit, - Je l'ai déjà ajouté à certaines des autres pages ou en fait à toutes les autres pages là-bas -. - D'accord, - donc nous allons sauver ça et nous reviendrons au navigateur ici et rafraîchir. - Et là, vous pouvez voir l'ombre portée. - En effet, - il y a une ombre portée ici sur chaque section, - comme les nouvelles. - Thea artiste coince ce que nous appelons celui-ci, et celui-ci est comme pour la compagnie. Et voici l'ombre portée sur le logo. - C'est le panneau du logo. - Ou ils l'ont fait avec l'idée de logos. - Vous pouvez voir qu'il l'a fait avec l'idée de logo. - On n'a jamais spécifié de largeur. - Et parce que les dibs sont des éléments de niveau bloc, - c'est juste étirer 100% de l'écran. - Pour que l'ombre s'étire à 100% de l'écran qui y porte l'ombre. - Alors que, - euh, - nous avons un autre div à l'intérieur avec l'idée de rappeur qui garde ça centré là - juste de la même manière que le rappeur centrant toutes ces sections ci-dessous. - Ok, - c'est plutôt cool 40. Appliquer des dégradés: - et nous allons cibler cette div avec l'idée de logo. - D'accord. - Et nous voulons ajouter un peu d'espacement à l'intérieur d'ici. - On veut ajouter du rembourrage. - On va piéger ce type aussi. - 85 pixels, - 0 25 pixels comme ça. - Ajouter un peu d'espacement à l'intérieur du logo. - Ensuite, - on va ajouter la couleur de fond des ingrédients. - Maintenant, - dans le code terminé, - vous allez voir, - euh, - je suis déjà en quelque sorte tombé sur l'ingrédient. - Ça a l'air sympa. - C'est un peu comme un blanc à un gris clair, et je ne vais pas suivre le code pour exactement le même ici. - Mais ce que je veux vous montrer est un site que vous pouvez utiliser est une ressource pour générer le CSS pour - Grady INT. - Si vous voulez avoir un fondu de couleur d'arrière-plan à l'intérieur d'un élément comme ce panneau de logo. - Donc, si je retourne à mon navigateur et j'ai ouvert un nouveau type d'affaiblissement d'onglet dans CSS trois et nous allons - taper dans Grady int generator. - C'est déjà là, - et on a tapé un générateur d'ingrédients comme ce générateur de trois ingrédients CSS, - et on va aller sur ce site en a un vraiment sympa. Ça s'appelle la couleur Zillow dot com Slash ingrédient Editor est la fille, mais vous pouvez voir ici il y a une tonne de ceux-là dehors. - Vous pouvez essayer différents si vous voulez, - et ils ont tous ces presets. - Donc, si vous trouvez un peu comme un fondu de couleur qui vous semble bon, - vous pouvez juste aller de l'avant et utiliser l'un des presets. - La façon dont cela fonctionne est que vous pouvez cliquer et faire glisser pour déplacer l'emplacement de ces arrêts de couleur. - Vous pouvez ajouter plus d'arrêts de couleur en cliquant en dessous comme ça, - et ensuite vous pouvez aller de l'avant et changer la couleur. - Donc, - par exemple, - si je fais comme une couleur différente verte qu'il va disparaître du blanc au gris et en arrière. - Si vous voulez vous en débarrasser, - si vous cliquez dessus et les tirez vers le bas loin de ce curseur, - le curseur de couleur, - il va juste les faire disparaître. Donc, par exemple, par exemple, si je veux que celui-ci soit un peu gris clair presque blanc cassé, je peux en fait c'est bien. - C'est la valeur des hacks, - euh e et ici, - si on veut rendre ça un peu plus sombre. On pourrait comme laisser tomber ça un peucommeça, et ça va s'estomper d'un blanc cassé à un gris légèrement moyen comme ça. - Tu peux voir ça. - Vous savez, - il y a différents types d'éclat que vous pourriez faire, - comme une diagonale horizontale pour la faire disparaître d'une couleur à l'autre. - Ou comme une radio, - qui va s'estomper de l'extérieur à l'intérieur en forme de cercle. - On va le garder à la verticale pour cet exemple. - Et la bonne chose à ce sujet est qu'il vous donne une interface utilisateur pour créer le Grady int qui - vous voulez, - et vous pouvez le dimensionner à l'approximation de votre élément. - Ou vous pouvez même poinçonner exactement la taille de votre élément ici. - Et il vous donne tout le code CSS ici, - et vous pouvez voir que c'est en fait beaucoup de code actuellement pour obtenir le travail des ingrédients dans - tous les différents navigateurs. - Malheureusement, - il y a en fait assez lourde quantité de code CSS ici. - Ce qu'on va faire, c'est qu'on va cliquer sur ce petit bouton dans le coin qui dit - une copie qui copiera tout le code pour nous, - et ensuite on pourra aller de l'avant et venir ici aussi. - Euh, - le style du logo, - et on peut coller ça là-dedans. - Et cet énorme bloc de code n'aurait pas été très amusant pour moi d'écrire. - Donc j'ai juste utilisé ce site pour générer ça pour moi, - et nous allons aller de l'avant et sauver ça et revenons au navigateur ici et voir à quoi ça ressemble. On va ajouter que Grady se sent ici, et je vais me rafraîchir. - Et ça a l'air cool. - Je le creuse, - OK. 41. Styliser le logo: - Alors revenons et ajoutons des marges d'espacement et des pad ings et changeons la façon dont ces H et H 2 sont à l'intérieur de ma section logo de chargement s'affichent. - Donc la première chose que je veux faire est en fait vouloir changer cet orteil, - n'a pas de marge. - Je vais mettre la marge ici. - Zéro. - Mais je pense que ce que je vais faire est que je vais ajouter une marge sur le dessus ou excusez-moi, - un tapotement sur le dessus ainsi dire le rembourrage haut et ajoutera environ 20 pixels d'espace - au-dessus des lettres réelles pour vous savez, - le mot à l'intérieur de la H, - qui est E h W um et je vais aussi changer la façon dont il s'affiche. - Actuellement, - ce gars affiche le H est bloc et le H deux est un élément de niveau bloc par défaut -. - Il en apparaît un sur le dessus. - L'autre. - Je voulais voir les chaussures se z h w côte à côte pour que je puisse mettre cet écran Teoh en ligne. - Et je veux avoir la capacité de pas enlever cette marge. - Donc je vais dire afficher dans le bloc de tiret de ligne comme ça on va dire afficher dans - bloc de ligne. - D'accord ? - Et on va venir ici et sur une image de fond. - Alors quoi ? - J'ai fait waas j'ai créé une image de fond spécifiquement pour ce h qui va en quelque sorte - créer un logo. - Vous pouvez voir que j'ai généré. - J'avais en quelque sorte trouvé ça. - Le logo de la couronne qui est ici à l'intérieur de la photo d'introduction. - Et ce que je vais faire, c'est mettre une petite couronne au-dessus du Z h w ici. - Donc je vais en faire une image de fond, - qui est une petite couronne que j'ai créée dans la boutique photo. - Donc je vais dire point, - point, - barres obliques pour sortir du dossier CSS et dans le dossier images. - Et nous allons lier au logo soulignement Crown Underscore et boss point PNG. - Et on va dire à ce gars de ne pas répéter en disant non. - Répétez. - Et on va dire à cette chose de positionner le centre supérieur à l'intérieur de l'élément comme ça. On utilise juste le raccourci d'arrière-plan, et on lui donne comme une valeur d'image d'arrière-plan, Aziz. - Eh bien, - comme la valeur de position d'arrière-plan et ou excusez-moi la valeur de position d'arrière-plan et aussi - la valeur de répétition d'arrière-plan ici comme ça. - Et on changera aussi la marge sur le H 2. - On y va et je dirai , on va supprimer toute ta marge. - Et nous allons aussi changer la façon dont vous affichez pour que vous puissiez exister côte à côte. Et on va vous mettre tous les deux en ligne, Aziz. - Des bottes comme ça. - D'accord. - Et on reviendra et on se rafraîchira. - Génial. - Alors maintenant mon logo, - mon H est côte à côte avec mon âge, - aussi. - Et j'ai une image de fond apparaissant ici, - qui est ma petite couronne en relief. - Mon logo est maintenant complet dans le coin de mon panneau de logo. 42. Le style des sections principales: - Et rappelez-vous, - nous avons créé euh, - un div qui va envelopper toutes ces sections qui ont une texture de bois, - et ce serait la boîte de texture va étendre 100% de l'écran. - Ça va être une texture de bois, un Sfar, un Z que je peux voir dans le navigateur. - Mais alors nous avons l'autre div C'est le rappeur, - qui est a un fixe avec et il centre le contenu sur le dessus de cette texture de bois. - Et puis en plus de cela, - nous avons ces sections qui, - hum, - vont contenir notre contenu principal de la page. - Ok, - alors allons de l'avant et créer un style alors pour aimerait ça. - Et nous allons donner à ce gars une image de fond comme cette image de tableau de bord, - et nous allons dire que vous êtes L. - et nous allons aller de l'avant et dire que vous devriez lier à point, - point, - des images slash slash Serait Dajae peg comme ça et nous allons dire à celui-ci d'avoir une position de fond - tableau de bord ok du haut central. - Et nous allons aussi définir la répétition d'arrière-plan pour savoir, - répétez comme ça et nous allons ajouter du rembourrage à l'intérieur de cette chose. - On verra 30 pixels en haut et en bas et zéro pixels à gauche et à droite, et on économisera. - Ok, - alors revenons au navigateur. - Et cela crée cette belle image de fond derrière toutes mes sections. - Vous remarquerez que maintenant toutes mes sections, - ou voir à travers. - Alors, - hum quoi ? - Nous n'avons pas spécifié de couleur d'arrière-plan pour ma section. Cette taxe est un peu illisible, donc on va devoir revenir un peu plus tard et donner un fond blanc à toutes nos sections. - Mais nous le ferons dans un instant. Mais je voulais démontrer que maintenant, derrière tout ici, sous le panneau du logo et sous la navigation, nous avons une texture de fond en bois. - Ça a un beau point culminant sur le bois. La seule chose à ce sujet, c'est que je veux avoir ce point culminant en haut, mais je veux prendre ce genre de couleur ombragée comme plus foncée du bois ici, et je voulais continuer notre répétition. , La seule chose à ce sujet, c'est que je veux avoir ce point culminant en haut, mais je veux prendre ce genre de couleur ombragée comme plus foncée du bois ici, - Et la raison pour laquelle c'est que vous pouvez voir que la hauteur de cette texture de bois n'est pas assez grande - pour compenser toutes mes parties restantes. - par exemple, - la section des artistes sort en dessous, - et la section des nouvelles sort également en dessous de la hauteur de la texture du bois. - Une des choses cool que vous pourriez faire avec CSS trois est que vous pouvez spécifier plusieurs - images d'arrière-plan. - Donc ce que j'ai fait c'est que je suis allé dans un magasin de photos et j'ai juste recadré une petite tranche de ça - serait ici où ça commence à disparaître. - Je vais juste le dire pour répéter à l'intérieur de ça, - ça l'a fait, - avec une idée de bois. - Est-ce qu'on a Ah, - ici. - De cette façon, - si le contenu est plus grand que l'image en bois, - je peux aussi avoir une autre image répétitive là-dedans et CSS à travers la façon que vous spécifiez - plusieurs images d'arrière-plan sont vous utilisez une virgule comme celle-ci et ensuite vous spécifiez une autre fille - pointant vers une autre image. - Donc nous allons aller de l'avant et dire point, - point, - slash images slash slash je soulignerais la tranche point j peg comme ça. - D'accord. - Et nous pouvons aussi mettre une virgule et dire que cet autre devrait se positionner en haut à gauche et - pour répéter ce 2ème 1 ici. - Eh bien, - dites répéter. - Pourquoi ? - Vous pouvez voir que la première fille est dans son top central. - Et puis après ces Commons, - nous avons tranché, - qui est juste un peu découpé dans le bois au fond. - Il y a une tranche de bois, - et c'est de positionner en haut à gauche et de répéter Onley verticalement, - donc cela va se répéter verticalement. - OK, alors allons-y et sauvegardons ça. - Et voyons la différence maintenant que nous avons la texture du bois, - je l'espère se répéter ici. - C'est vrai ? - Alors on va frapper. - Rafraîchir Et maintenant vous pouvez voir que la texture continue juste s'il y a plus d'espace là-bas. - Donc la texture du bois commence ici. - Et alors que nous faisons défiler vers le bas, - ça continue comme ça. - Ok, - donc c'est plutôt cool. - On peut mettre même plusieurs images de fond dans un élément ici comme ça. - Ok, - hum, - nous allons aussi styliser toutes ces sections parce que, comme je l'ai déjà dit, - c'est une sorte de traînée que ce texte noir est sur ce fond de bois sombre qui n'a pas l'air - trop chaud. - Alors allons-y avec style. - Toutes les sections comme celle-ci vont de l'avant et sélectionnez n'importe quel élément appelé section, - et nous allons ajouter un remplissage ici et nous verrons un remplissage de 20 pixels d'espace. - Et nous leur donnerons aussi une couleur de fond de blanc comme ça. - Et puis nous allons aller de l'avant et sauver et reviendrons au navigateur ici et frapper. - Rafraîchir. - Cool. - Maintenant, on a un peu de rembourrage autour de cet élément. - Nous avons cette couleur blanche ici dans l'ombre portée en dessous d'eux. - On pourrait ajouter une marge de Martin Leadsom entre eux ici, - à venir. - Et vous pouvez voir que la texture continue jusqu'à ce que nous courons dans la section détaillée comme ça -, - ok ? 43. Section de détails du style: - Alors donnons un peu de style à ça. - Cette section détaillée ici. - Alors, là où ça finirait. - Nous voulons ajouter un autre Grady ici où la section des détails est juste avant le pied de page. - Donc je vais venir ici au-dessus des détails ou des détails ci-dessous là-bas, - et nous allons créer un sélecteur appelé détails de balise de hachage pour sélectionner ce div avec l'idée - de détails et nous allons venir ici et ajouter du rembourrage à cela va de l'avant et dire, - 20 pixels en haut et en bas et 10 pixels à gauche et à droite. - Et nous allons aussi ajouter une de texturede fond d'ingrédient ici. - Eso je vais revenir au générateur rayonnant CSS et nous pouvons même utiliser ceci - un et une sorte de changer un peu. - Je vais aller de l'avant et les rendre un peu plus sombres. - Maintenant, je vais dire que cette couleur devient un peu plus sombre et peut aussi commencer un peu plus sombre - comme ça, - et nous allons la rendre un peu plus grande. - Les filles, vérifiez ça. - Ça a l'air bien. - Hum, - et on va dire copie pour copier ça, - Grady ça a l'air bien et ensuite on va le coller ici comme ça. - Cool. - OK, - alors on va y aller et on va sauver ça et on reviendra et on se rafraîchira. - Et si je fais défiler vers le bas, - nous pouvons voir cet int gourmand de nuances de lumière et sombre grand. 44. Créer une structure de colonne: - Donc, cela conclut tous nos styles en utilisant les techniques que nous avons apprises pour le modèle de boîte et la boîte - esthétique. - Ensuite, - nous allons développer notre mise en page en utilisant les techniques de positionnement flottant que nous - avons appris dans les exemples précédents. - Si nous revenons au navigateur ici, - vous pouvez voir que certaines sections vont prendre toute la largeur du rappeur et - d'autres sections seront des colonnes qui seront des positions côte à côte. - Donc, - par exemple, - ici sur la page A propos, - qui est notre page d'accueil ici, - cette section à propos va prendre les trois colonnes ou la totalité de l'espace rappeur. - Ok, - maintenant cette section d'artiste ici qui a notre vidéo dedans, - la section du coin de l'artiste va prendre seulement les 2 premières colonnes à gauche, - et ensuite la section des nouvelles de l'entreprise va prendre juste une seule colonne de droite ici que - va flotter à côté d'elle. - Et dans d'autres situations, - comme sur la page du catalogue, - nous allons avoir une structure à trois colonnes où la section masculine ici sera une petite boîte qui n'occupe que la première colonne à gauche. - La section des femmes prendra la colonne centrale ou centrale au centre dans le - milieu ici et la section des enfants prendra une seule colonne à droite. - On aura 123 boîtes côte à côte. Donc, pour accomplir ça, je vais utiliser le positionnement flottant, et je vais aller de l'avant et créer une sorte de système de grille pour le faire en créant des classes . - Et chaque classe contrôlera si cette section est la largeur d'une seule colonne, - deux colonnes ou s'étirant sur les trois colonnes. - Et nous utilisons également le positionnement flottant pour contrôler. - Que ça reste au rire reste à droite. Donc je vais nommer chacun de ces cours d'une manière qui me sera logique plus tard, surla route. Donc je vais nommer chacun de ces cours d'une manière qui me sera logique plus tard, sur - Je sais comment appliquer ces cours. - Selon la façon dont j'aime positionner ces sections sur la page, - donc certaines sections ne prendront qu'une seule colonne. - Si nous imaginons que la plupart auront une structure à trois colonnes, alors je vais nommer les classes, - appeler le PDG L pour la colonne et ensuite le numéro un. - S'ils ne s'étirent que sur une seule colonne. - Je vais utiliser Call 2 ou C O L 2 s'ils s'étendent sur deux colonnes et appellent trois. - S'ils s'étendent sur les trois colonnes, - comme dans cette section d'introduction ici sont plutôt la section à propos ici, - qui s'étend sur les trois. - Ok, - alors allons de l'avant et créons des cours. - Nous allons créer une année appelée colonne un, - parce qu'elle ne s'étend que sur une seule colonne et dira soulignement à gauche. - Donc, nous savons que cette colonne se positionne à gauche et afin de le positionner à gauche, - utilisera float gauche et nous allons spécifier un spécifique avec de sorte qu'il prend sur Lee Ah, - une colonne. Bon, donc s'il y a trois colonnes, 33 0,3% devrait m'amener au point où c'est seulement environ 1/3 parce que trois d'entre elles - s'ajouteraient à, - comme 99,999 um, - et auraient trois colonnes égales. - Cependant, - nous voulons avoir un peu d'espace entre les colonnes en utilisant la marge. - Donc on va utiliser une calculatrice pour comprendre pourquoi ces choses doivent être pour que vous puissiez probablement faire des calculs dans votre tête, mais je ne suis pas si génial. - Pas si chaud, Matt. - Je vais m'assurer que tout ça est correct en utilisant la calculatrice. On a 100 % du rappeur disponible, et je veux avoir 1 % de marge entre chacune des trois colonnes. - Donc, ce serait 1% entre la colonne de gauche et du milieu et 1% de marge entre la colonne - du milieu et la colonne de droite. - Donc chacun de ces 1% sur le côté gauche de la colonne du milieu et 1% sur le côté droit de la colonne du milieu ajoute jusqu'à deux. - Donc je dois soustraire 2% de la 100 qui me donne 98% restants disponibles avec - travail orteil avec. - Donc maintenant je peux prendre ce 98% et divisé par trois colonnes, - et cela me donnera 32.6. - D'accord, - donc cette colonne devrait être de 32,6%. - Et je pense que j'ai aussi eu une marge pour dire que ce gars n'a pas de marge sur le dessus. - Pas de marge à gauche et à droite. - Mais il a 20 pixels de marge en bas. - Donc je ne donne pas un peu d'espace en dessous de chacune des sections auxquelles j'applique ceci. - Créons aussi une seule colonne pour le milieu. - Donc c'est la colonne qui va flotter au milieu, - et nous allons définir cela aussi pour flotter à gauche afin qu'elle s'empilera à côté de l'autre colonne - qui flottera à gauche là et ça va la mettre au milieu. - Ce type aura la même largeur, - ce qui est de 32,6% maintenant. - Une différence est que je vais avoir une marge sur le côté gauche et droit de ce gars en disant zéro sur le haut 1% sur la droite, - 20 pixels sur le bas et 1% sur la gauche. - Alors rappelez-vous, - si vous spécifiez quatre valeurs la première valeur. - Si vous allez dans le sens des aiguilles d'une montre, - la première valeur est supérieure. - La deuxième valeur est juste. - Donc, c'est une marge de 1% sur la droite. - La valeur suivante qui tourne dans le sens des aiguilles d'une montre est les 20 pixels inférieurs en bas et enfin, - 1% à gauche. - Donc, cela donnera un pourcentage de marge de chaque côté de la colonne du milieu. - Maintenant, la dernière colonne, - qui est à droite, - va être à peu près la même que la colonne de gauche, - sauf le fait qu'au lieu de flotter à gauche, - on peut flotter ce type à droite. - D'accord, - mais il aura la même largeur et le même type de marge, - ce qui n'est pas de marge en haut, - aucune à gauche ou à droite et 20 pixels en bas. - Donc ce sera toutes les classes dont j'ai besoin pour ma structure à trois colonnes. - Une autre situation est que je pourrais vouloir un élément pour prendre la largeur de deux colonnes, - donc je vais aller de l'avant et créer une classe appelée un appel qui signifie qu'il prend la largeur de - deux colonnes et nous allons faire Parfois, - vous savez, - les deux colonnes seront sur le côté gauche, - et d'autres fois vous deux colonnes seront sur le côté droit, - donc nous allons créer deux classes pour cela. Ce type va évidemment flotter à gauche, alors que celui du côté droit va flotter à droite. Ce type va évidemment flotter à gauche, - Ok, - nous aurons 100% d'espace disponible, - et ensuite nous aurons une colonne A qui prend le avec deux colonnes ou excusez-moi, - une section qui prend le avec deux colonnes, - et ensuite nous aurons seulement 1% de la marge sur le côté droit de cela. - Et puis nous aurons une autre colonne qui ne prend que la largeur d'une colonne. Au lieu de soustraire 2% de marge ici, nous n'avons qu'à soustraire 1% de marge, ce qui nous donne 99% comme ça. Au lieu de soustraire 2% de marge ici, nous n'avons qu'à soustraire 1% de marge, - Ok, - donc vraiment, - ce que nous voulons faire c'est que nous voulons soustraire la, - euh, - aussi la colonne de droite parce que nous savons que pour ce gars pour la colonne - à gauche nous savons que, - euh, - on va avoir la combinaison d'une colonne à gauche et d'une colonne à droite, - que je devrais changer le nom d'ici. - Ce sera une colonne une colonne de gauche, - un milieu dans la colonne un. - À droite. - Donc nous allons jumeler comme une colonne à gauche avec une colonne à droite ou une colonne à écrire - avec une colonne à gauche et vous verrez ce que je veux dire quand nous commencerons à implémenter ceci dans la page -. - Donc, ce que j'ai fait, c'est que j'ai décidé de soustraire le 32,6% pour comprendre ce que les espaces restants - pour cette autre colonne. - Donc on a 99 %. - Nous avons pris la marge de 100% moins 1%, - et puis nous allons soustraire 32.6, - ce qui me donnera la largeur de l'autre colonne, - qui est 66,4%. - Donc ces deux gars devraient avoir une largeur de 66,4%. - D'accord. - Et celui-là aura une marge de zéro sur le dessus. - 1% à droite, - Et puis nous dirons 20 pixels en bas et zéro à gauche comme ça. - Et celui-ci sera le même ici. - Sauf que c'est flottant à droite. - Et ce sera la marge zéro sur le zéro en haut à droite, - 20 pixels en bas et 1% à gauche. - D'accord, - donc j'ai plus de possibilités là-bas. - Je peux avoir une section qui prend la largeur d'une seule colonne ou qui prend deux colonnes. - D'accord. Et enfin, on voudra peut-être avoir quelque chose qui couvre les trois colonnes, donc on pourrait appeler cet appel. on voudra peut-être avoir quelque chose qui couvre les trois colonnes, - Trois. - Donc ici, nous avons, - um, - une marge de 00 20 pixels, - ce qui signifie zéro sur le zéro supérieur des deux côtés et seulement 20 pixels sur le bas. - Et nous allons ajouter une autre classe ici appelée colonne 3 pour qu'elle prenne les trois colonnes et n'oubliez pas d'ajouter plusieurs classes. - Vous pouvez juste mettre un espace entre chaque nom de classe. - Et maintenant cela a une classe de colonne trois, - et il a aussi une classe d'ombre, - donc il devrait aussi avoir une ombre portée. - Donc, nous allons continuer et sauver ça, - et je reviendrai dans le navigateur. - Et vraiment, - la seule chose qui va changer ici, c'est qu'il va ajouter une marge en dessous, - ce que vous pouvez voir qu'il a fait là-bas. - Maintenant, il y a un espace entre cette section et la section suivante comme ça dans un - qui s'étend sur trois colonnes. - Ok, - Um, - pas trop pas trop fantaisie. - Là. - Les choses vont devenir intéressantes ici. C' est la section des artistes, et je veux que la section des artistes prenne la largeur de deux colonnes ou soit, - euh, - 66,4% de large et ensuite avoir la section des nouvelles qui est juste ici. - Nouvelles de l'entreprise. - Prenez juste la largeur d'une colonne ici sur le côté droit. - Donc, ce que je veux faire est d'utiliser la colonne à gauche pour la section « Artists Corner » et je veux utiliser la colonne 1 droite pour la nouvelle section. - Droite pour que je puisse faire défiler ici jusqu'au coin de l'artiste et nous pouvons aller ici et ajouter une classe - de colonne pour souligner à gauche comme ça et descendra à la nouvelle section et nous allons ajouter - une classe de colonne un droite, - ce qui signifie que reste à droite. - Mais il n'a que la largeur d'une colonne, - et nous allons aller de l'avant et dire ça et nous reviendrons à notre navigateur ici et nous allons frapper. - Rafraîchir et on y va. - Il y a quelque chose de drôle qui se passe ici. - Les nouvelles de la société sont censées être en mesure de tenir à côté de cette colonne de gauche. - OK, - mais vous vous souvenez peut-être qu'il y a deux modèles de boîte différents, - et, - um, - ce navigateur particulier Chrome utilise le modèle de boîte W trois C où chaque fois que j'ajoute comme - bordure ou rembourrage dans ce cas, - j'ai 20 pixels de rembourrage autour de chacun d'entre eux, - il le rend en fait un peu plus large que ne s'adaptera côte à côte. - Nous avons également quelques éléments, - comme la section de détails en bas de la page a des liens correspondants de contact et - suivre. - C'est à côté de l'élément flottant, donc c'est un peu bizarre aussi, donc on va devoir réparer ça. - Alors rappelez-vous dans les exemples uniques de la conférence dans les diapositives précédentes, - nous avons regardé utiliser une propriété appelée Clear pour amener ce gars à effacer le passé. - Nous avons également examiné la modification du modèle de boîte avec pour inclure le remplissage en utilisant la taille de tiret de boîte une propriété - CSS trois pour définir tous les navigateurs pour utiliser le même modèle de boîte. - Ok, - Donc, pour que certaines de ces choses fonctionnent, - nous allons devoir retourner dans le style de ce CSS et créer un commentaire près du haut de la page ici dans une section appelée Corrections. - Ici, il est en ligne 12 de la page CSS point de style. - Donc, nous allons faire défiler là-bas et allons de l'avant et implémenter dans certains de ces correctifs CSS. - Une chose que nous voulons faire est de changer le modèle de boîte, donc nous allons dire à Star de sélectionner tous les éléments comme ça et nous allons aller de l'avant jusqu'à, - par défaut. - Initialement dira que ces gars devraient avoir une marge de zéro um, - rembourrage de zéro et bordure de zéro juste pour faire une réinitialisation. - Et puis nous allons également changer la taille de la boîte, - ce qui fera en sorte que lorsque nous spécifions une largeur, - il inclura le rembourrage dans la bordure. - Et nous dirons, - Utilisez la valeur Border box, - qui est la méthode de dimensionnement de la boîte Internet Explorer. - D'accord. - Et nous allons utiliser le kit Web préfixes aussi pour faire ce travail et les anciennes versions de chrome - et safari. - Eh bien, - dire les enfants Web tableau de bord de la boîte de tableau de bord taille et nous allons sauver la frontière boîte de tableau de bord et nous utilisons également Dash mosey - tableau de bord taille Dasha. - Et nous allons aussi dire que deux bordures de tableau de bord. - Ok, - donc tous les éléments devraient maintenant utiliser, - um, - la méthode de la boîte de bordure Internet Explorer qui devrait nous donner un bon soutien et tous les - navigateurs et devrait permettre à ces choses de l'afficher correctement. - Donc maintenant nos 20 pixels de rembourrage ne seront pas ce qui sera réellement inclus dans la largeur. Donc je vais aller de l'avant et sauver que nous avons quelques choses qui ne sont pas réglées correctement. - Par exemple, - la section de détails que nous voulons effacer au-delà de la hauteur de tout ce qui flotte au-dessus de lui de sorte que nous - pouvons effectivement faire défiler vers le bas puis vers cette section de détail ici et nous pouvons aller de l'avant et définir la section de détail pour effacer les deux. - Donc, cela signifie que la section de détails et ne sera plus sauter à côté de cette chose qui est - flottant. - Et ces gars auront l'esprit approprié, - donc ils devraient apparaître côte à côte. - Alors allons de l'avant et sauvegardons le code, - et nous reviendrons dans le navigateur et rafraîchir. - Cool. - Alors maintenant, ces gars apparaissent côte à côte. Donc on a résolu certains de nos problèmes. - Ce gars a une colonne à la classe gauche qui le fait flotter à gauche et lui donne un 66,4 - point 4% avec contre celui-ci, - qui utilise une colonne une classe droite, - qui flotte à droite et a 32,6 avec et parce que nous changé le modèle de la boîte à - bordure de la boîte de tableau de bord, - cela a le 32% ou 32,6%. - Avec y compris le rembourrage ici et il en est ainsi. - Ici. - Le 66,4% avec comprend le rembourrage, - et ensuite nous avons 1% de marge, - ce qui ajoute cela à un total de 100%. - D'accord. - Et j'ai dit à cette section détaillée d'éclaircir en disant clairement les deux. - Ah, - ici. - J'ai eu cette section détaillée pour effacer au-delà de la hauteur de ces éléments qui flottent - ci-dessus. - Ok, - hum, - vous remarquerez peut-être que d'autres choses se passent, c'est un peu maladroit. - Hum, - donc une chose est que le ah Div avec le i d. - de serait que ce serait texture il est en fait sur Lee comme péage que cet élément qui n'est pas - flottant. - Cette colonne trois élément n'est pas flottante. - Mais rappelez-vous, - chaque fois que vous avez un élément parent et que vous flottez Enfants à l'intérieur de celui-ci, - il perd sa référence pour comment dire de l'être. - Maintenant. - Ce serait cette div, - avec l'idée de bois qui a la texture du bois, - s'effondre. C' est évident que ça s'effondre parce qu'on a les enfants flottants à l'intérieur . - Vous vous souvenez de la méthode ? - Nous utilisons le correctif utilisé pour empêcher un parent de s'effondrer donc je vais venir ici dans les correctifs et je vais ajouter ce hack CSS spécial pour réparer un parent qui s'effondre. - Ça s'appelle « Clear Fix ». - Donc, nous allons créer une classe de deux-points fixes clairs après et viendra à l'intérieur et dira - contenu. - Et nous jetterons comme un petit symbole de période, il dira à ce continent d'afficher - bloc. - Et nous dirons à ce gars de dégager les deux pour franchir la hauteur de tous les enfants flottants. - Tous les éléments flottants au-dessus. - Excusez-moi, - et on changera sa visibilité en cachée, - pour que nous ne voyions pas vraiment ce contenu. - Et nous mettrons sa hauteur 20 et sa hauteur de ligne 20 A. - Oups. - Et nous avons un petit type de là va arranger ça. Je pourrais maintenant appliquer cette classe à n'importe quel élément qui s'effondre. Je pourrais maintenant appliquer cette classe à n'importe quel élément qui s'effondre. Donc, - par exemple, - je peux venir ici à la Div avec l'idée de bois, - et nous pouvons ajouter une classe de correctif clair pour empêcher ce gars de s'effondrer. - Ok, - alors on va y aller et sauver ça. - Nous reviendrons au navigateur et rafraîchir et refroidir. - Maintenant, nous pouvons voir les textures de bois se répéter tout le chemin ci-dessous sous les enfants flottants, - des correctifs donc clairs descendant ici et dégageant au-delà de la hauteur des enfants flottants. - Donner cet élément parent, - qui est appelé, - serait une référence pour la taille à être. - Ok, - allons faire la même chose pour les trois pieds ici. - Transformons cela en une structure à trois colonnes, - donc nous l'avons juste fait avant, - Donc il devrait être assez facile de se rappeler comment faire cette fois. - Donc si je viens ici en détail, - allons de l'avant et donnons à ce 1er 1 une classe de colonne 1 à gauche. - Donc on va dire Actif, je D. - Excusez-moi. - Colonne Div Class Un gauche comme ça et descendra à la deuxième colonne et nous donnerons - ceci une classe de colonne un milieu pour le milieu. - Et enfin, - nous donnerons au dernier si ici une classe de colonne un droit, - ça devrait faire apparaître ces gars côte à côte. - Et nous ne voulons pas que la section s'effondre parce que nous avons ces gars flottaient Enfants -, - Donc nous allons avoir le même problème que nous avons eu ci-dessus avec la section ou la saison avec la Div -. - Avec l'idée du bois s'effondrait. - Maintenant, nous allons avoir le même problème où la section I d détails va s'effondrer parce que tous - ses enfants à l'intérieur ou flottant. - Donc, nous devons lui donner une référence pour la taille d'être en ajoutant ce correctif clair et dans le - mix. - Et si vous ne vous souvenez pas tout à fait des correctifs clairs pour aller, - allez de l'avant et retournez aux vidéos et à la conférence de diapositives pour vérifier cela. - Alors j'ai gardé ça et on peut se rafraîchir. - Et maintenant vous pouvez voir ces gars côte à côte, ce qui est plutôt cool. - Je vais ajouter une petite bordure sur le côté droit ici et une écriture à l'intérieur juste - à ces deux-là. - Alors on va aller de l'avant et créer un cours pour ça ici. - Je vais revenir dans le style et dans la section style global et sous l'ombre - ici. - Pourquoi ne pas créer une classe appelée frontière comme ça ? - Et nous allons sauver la bordure tiret droit du côlon, - un pixel bien dire pointillé et lui donner une couleur grise moyenne. - Et nous ajoutons aussi un peu de rembourrage sur le côté droit aussi, - Donc le texte ne va jamais droit contre cette bordure et nous dirons, - tapotant à droite 20 pixels comme ça et sûr. - Donc je veux juste appliquer cette classe de droite à la frontière, - aussi. - Cette section détaillée ici, mais seulement à quelques-unes d'entre elles. - Donc je veux que cette frontière soit dans les deux colonnes Central. - Donc, nous allons aller de l'avant et l'ajouter à la première colonne à l'intérieur des détails, - qui s'appelle une colonne. - Une gauche viendra ici et nous dirons les droits de frontière comme cette annonce que le style là-bas et - aussi aller à celui-ci appelé Colonne un milieu et ajoutera également Border right, - celui-là aussi. - Et vous sauverez et je reviendrai rafraîchir, - et maintenant vous pouvez voir que c'est un peu subtil, - mais j'ai créé une ligne de tiret juste ici sur le côté droit de cette colonne et aussi sur le côté droit de cette colonne médiane ici. - Donc maintenant, on a juste, - genre, - une petite ligne subtile là-bas au centre. - D'accord, ça a l'air super. Je dois dire que jem'impressionne. Je dois dire que je - J'aime la façon dont ça regarde là-bas. - J'ai donc déjà ajouté ces classes aux autres pages, - vous pouvez voir qu'il reste une classe de colonne 1. - Il y a une classe de colonne un milieu. - Ceci a une classe de colonne un ici, nous avons une structure de deux colonnes, - donc celui-ci est appelé colonne à gauche, - et celui-ci est appelé colonne une colonne de droite une colonne de droite une colonne de droite, - et ceci est colonne à gauche. - Et ici, nous avons la colonne de structure de trois colonnes une colonne de gauche, - un milieu et une colonne une droite, - d'accord, - et cela va nous permettre de créer une structure de colonne différente sur différentes pages. - Les orteils, quelle que soit la section qu'on aime. Donc si je vais à la page de vente, celui-ci a une classe de colonne 3. Donc si je vais à la page de vente, - Ou appelez trois pour dire qu'il y a trois colonnes à travers. - Et ici, nous avons une colonne de gauche, une colonne de milieu, une colonne de droite. - D'accord, - celui-ci est la colonne trois, - occupe les trois colonnes là-bas, - et vous pouvez voir, - puisque j'ai une largeur de 100% à l'intérieur de ma, - um, - ma table ici, - il est juste en expansion aussi loin qu'il peut entendre jusqu'à ce qu'il tombe dans le bord de la section. - Maintenant, - sur la page de contact. - Il reste une classe ah de colonne 2 dans une classe de colonne 1. - À droite. - Ok, - donc c'est à propos de ça. - Pour cet exercice, - J'espère que cela vous a donné un aperçu de la façon de créer des structures de page avec plusieurs colonnes et la flexibilité d'écrire vos propres styles CSS pour créer vos propres systèmes de grille - en utilisant des combinaisons de flottant Ah, - le dimensionnement de vos colonnes. - Et aussi des techniques pour résoudre des problèmes comme clair corrigé pour éviter l'effondrement des parents et la taille de la boîte . - Teoh. - Ajustez tous les navigateurs pour utiliser le même modèle de boîte et aussi des techniques comme la compensation afin - que nous puissions effacer au-delà de la hauteur de tous les éléments flottants au-dessus dans ah, - dans les exercices à venir, - nous allons l'aller un peu plus loin l'apprentissage de techniques de positionnement avancées. - On va revenir et finir le style de la navigation, - la main principale en haut de la page. - Ensuite, nous allons passer à apprendre à construire des conceptions réactives en utilisant CSS pendant les requêtes média . J' espère que tu aimes celle-là, et j'espère que tu commenceras à construire tes propres mises en page. - N'hésitez pas à consulter les liens ci-dessous la vidéo pour d'autres tutoriels sur le positionnement et - construire des mises en page, - puis passez au prochain défi de code, - où vous allez ajouter un peu de positionnement et de colonne dans votre propre mise en page de site Web. 45. Outils de développeurs (partie 2): - Salut. - Bienvenue de retour. - Ceci est la deuxième partie des vidéos Tools développeur. - Dans la première partie, - nous avons examiné l'inspection des éléments afin que nous puissions voir à quoi HTML et CSS ont été appliqués - ces éléments particuliers. - Et nous avons également examiné la modification et la modification des attributs CSS et des valeurs afin que nous puissions - prévisualiser les changements dans le navigateur avant de décider de faire des changements permanents dans le code - éditeur. - Dans la deuxième partie, - nous allons examiner toutes les choses magnifiques que les outils de développement peuvent nous aider - lorsque nous construisons des mises en page. - Donc il n'y a pas besoin de changer quoi que ce soit dans votre code. - Je viens de créer une situation hypothétique ici où nous avons un problème qui se produit dans notre - mise en page Donc vous pouvez voir que c'est juste la page d'index de notre exercice, - et je suis entré et j'ai délibérément cassé quelque chose ici, - et nous sommes va utiliser des outils de développement pour nous aider à résoudre ce problème. - Donc le problème principal ici est que cette section appelée « Artist Corner », - est censée flotter à gauche, - et cette section de nouvelles de la société ici est censée flotter à droite, - et ces gars étaient censés être côte à côte. - Et vous pouvez voir ici que même s'il semble que la section des nouvelles de l'entreprise ait assez espace pour s'adapter côte à côte avec cette autre section, - pour une raison quelconque, il est poussé vers le bas. - Donc, la première chose que je vais faire est juste. - Cliquez et inspectez l'un des éléments qui me pose un problème. - Et ici, j'ai droit, - a cliqué sur la figure, - qui est la boîte. - Il entoure l'élément vidéo dans la légende de la figure, - et vous remarquerez si vous regardez en bas du panneau de développement ici, - il y a en fait une chapelure qui vous montre la relation entre les éléments qui sont imbriqués - à l'intérieur d'autres éléments. - Donc, - par exemple, - nous sommes sur la figure. - Si je clique, - Je peux voir que ce chiffre est en fait à l'intérieur de la section avec la classe de colonne à gauche. - Et c'est à l'intérieur d'une div avec la classe de rappeur et ainsi de suite et ainsi de suite. - Donc, si je passe sur cette section ici avec la classe de colonne à gauche, - je peux voir que Chrome me donne réellement le codage couleur pour indiquer le rembourrage et aussi - la marge. - Donc, dans ce cas, - Chrome utilise une couleur vert clair pour indiquer le rembourrage à l'intérieur de l'élément, - et il utilise une couleur bleu clair pour indiquer la zone de contenu à l'intérieur de cet élément, - et il utilise une couleur orange clair pour indiquer marge. - Donc, dans ce cas, - vous pouvez voir qu'il y a en fait un peu de marge sur le côté de l'élément, - et c'est probablement le coupable quant à la raison pour laquelle l'autre section, - la section Nouvelles, - n'est pas en mesure de tenir le côté à côté de cette section d'angle de l'artiste. - Donc, si je sélectionne l'élément là comme nous le savons, - nous pouvons voir tous les styles CSS qui affectent cet élément particulier. - Et si je viens ici à la marge, - nous pouvons voir que le coupable ici est que la marge droite est fixée à 20% maintenant, - en plus de pouvoir cliquer et changer les valeurs ici, - nous avons aussi un autre panneau que nous pouvons ouvrir pour voir plus informations à ce sujet - modèle de boîte particulier pour cet élément. - Donc, je vais effondrer le panneau des allées Est ici en cliquant sur cette petite flèche vers le bas, - et en dessous vous pouvez voir il y a un autre panneau intitulé Métriques, - et nous allons étendre le panneau des métriques, - et cela va révéler le modèle de boîte pour cet élément particulier. - Vous pouvez voir si je planque à l'intérieur du centre. - Je peux voir la zone de contenu. - Et en fait, - cela me donne même la quantité exacte de pixels dans la hauteur pour le contenu disponible - zone à l'intérieur de cet élément. - Et si je passe à l'intérieur de la prochaine section de la boîte ici, - celle qui s'appelle le remplissage, - on peut voir qu'il y a en fait 20 pixels de rembourrage de chaque côté. - Hum, - et on peut voir qu'il n'y a pas de bordure et qu'il y a une marge de 20 pixels en bas - et que cette marge de 20 % à droite finit par être 192 pixels. - Une des belles choses à propos de pouvoir voir le modèle de boîte est que vous pouvez voir très clairement - combien d'espace ou combien écran immobilier. - Chaque élément prend réellement, - et c'est important lorsque vous essayez de construire des structures de colonnes. - En outre, - nous pouvons également double-cliquer pour changer ces valeurs afin que je puisse taper une autre valeur ici, - ou je peux également utiliser les flèches haut et bas pour changer la quantité de marge dans ce cas. - Donc je vais juste tenir la flèche vers le bas et mettre la marge jusqu'à ce que je vois qu'il y a suffisamment d'espace pour que l'autre colonne s'adapte côte à côte avec celle-ci. - Nous y sommes. - Donc ici, il ressemble à, - vous savez, - neuf pixels est à peu près autant de marge que je peux avoir ici pour la nouvelle section t ajustement - côte à côte. - En outre, - en plus de mettre des valeurs de pixel, - nous pouvons également mettre des valeurs de pourcentage aussi bien. - Donc, - par exemple, - si j'ai dit à ce gars 5% je peux voir que ça ne marche pas. - Si je l'ai dit à 4% je peux voir que toujours pas assez. - Si je le dis à 3%. - Ah, - 2%. - Donc, en tapant le symbole de pourcentage au lieu de pixels, - ça fera la conversion pour moi. - Hum, - et encore, - - si je tape 1% on peut voir que ça marche. - Donc 1% de l'espace à l'intérieur de ce rappeur, - qui est 960 pixels, - sort à neuf pixels d'espace. - Alors maintenant que je sais que 1% est mon nombre magique, - je peux voir que je vais devoir changer ce 20% ici, - orteil 1% qui est en ligne 206 de ces feuilles de style CSS point de style. - Donc si je reviens à mon code et que je viens ici à la ligne 2 sur 6, je peux voir que c'est la colonne de classe à gauche. - Et voici la marge de 20%. - Je peux réinitialiser ça à 1% d'économie, - et on peut revenir et rafraîchir la page. - Et nous avons corrigé cette erreur afin que vous puissiez voir les outils de développement peuvent être très utiles pour - dépanner les esprits, - rembourrage et marges bordures du modèle de boîte. - Aziz Eh bien vous permet de voir toutes les commandes de positionnement CSS. 46. Techniques de positionnement: - Salut. - Bienvenue. - Ce sont des diapositives 3.2 techniques avancées de positionnement. - À ce stade, - vous devriez commencer à vous sentir un peu plus confiant sur la construction de mises en page. - Et dans l'exercice précédent, - nous avons examiné l'utilisation flottante pour créer une structure de colonne. - Et dans ce prochain exercice, - nous allons apprendre quelques techniques de positionnement supplémentaires. - Nous allons également jeter un oeil à une propriété CSS appelée Z Index que nous pouvons utiliser pour - superposer ou positionner des éléments devant ou derrière l'autre. - Nous allons également jeter un oeil à une technique populaire utilisant des sprites d'image et quelques CSS - code pour créer des rollovers où lorsque l'utilisateur passe la souris là, - la souris sur une image verra le changement d'image. - J'ai créé quelques exemples pratiques pour les techniques de positionnement qu'on va apprendre. - Et si vous êtes intéressé à voir le code complété pour tous ces exemples, - vous pouvez toujours consulter les liens qui sont répertoriés ici dans les diapositives. - Allons de l'avant et passons à ce premier exemple et vous pouvez voir ici. - Je viens de créer des conteneurs parents et à l'intérieur d'eux j'ai créé des boîtes ici, - et chaque boîte nous aidera à démontrer un nouveau type de positionnement que nous allons apprendre. - On va apprendre le positionnement absolu relatif et fixe. - Et j'ai déjà donné à ces boîtes quelques noms de classe génériques juste pour nous aider à démontrer - chacun des différents types de positionnement. - Tout d'abord, - regardons le positionnement relatif, - donc par défaut, - tous les éléments si nous ne spécifions pas notre position statique comme ceci. - Mais voyons ce qui se passe si nous allons de l'avant et ajoutons un positionnement spécial, - comme un positionnement relatif pour que je puisse dire position relative. - Et dès que vous changez le positionnement à n'importe quel autre type spécial de positionnement, - vous gagnez alors la possibilité d'utiliser d'autres propriétés CSS comme le haut en bas à gauche et à droite, - de sorte que vous pouvez dire au navigateur à quelle distance pousser ou déplacer l'élément sur l'écran. - Donc, - par exemple, - si nous disons haut disaient au navigateur de pousser sur le haut de l'élément et de le déplacer vers le bas - 50 pixels comme ça. - Donc, si je vais de l'avant et que vous pouvez le voir poussé cet élément ici, - le carré qui dit relatif il l'a poussé vers le bas 50 pixels de son emplacement précédent où - il était situé avant là, - et si je dis un nombre plus petit comme 10 par exemple, - et je cours qu'il ne le déplace que vers le bas de 10 pixels de son emplacement précédent. - Donc, spécifier en haut en bas à gauche ou à droite pour le positionnement relatif indique au navigateur - quel côté de l'élément que vous voulez pousser maintenant. - Vous pouvez même utiliser des nombres négatifs aussi, - si vous voulez. - Si je dis top négatif 50 pixels et que je lance ça, - vous pouvez voir qu'il fait réellement le contraire. - Donc, avec un chiffre positif, tu pousses sur le dessus. - Mais avec un chiffre négatif, c'est comme si tu tirais sur le dessus. - Vous le tirez jusqu'à 50 pixels, - donc je vais aller de l'avant et dire 10 pixels du haut et le monde le déplace vers la droite en disant à droite - 10 pixels, - qui poussera sur le côté droit. - 10 pixels comme ça. - Jetons un coup d'oeil à un autre type de positionnement appelé positionnement absolu afin que nous puissions définir - ce gars à la position absolue, - et nous allons de l'avant et utiliser les mêmes valeurs top 10 pixels, - droite, - 10 pixels. - Et même si ces valeurs sont les mêmes, - nous allons voir que cela fait quelque chose de très différent et c'est parce que absolu - le positionnement utilise ces nombres d'une manière tout à fait différente, - donc vous pouvez voir ce qui s'est passé là-bas. - Waas. - Quand je mets cet élément enfant ici pour positionner absolu, - il se casse en fait libre du parent et tire vers le haut vers le coin supérieur droit de l'écran. - Donc maintenant, quand j'utilise le haut de la propriété, - cela fait référence à sa relation avec le haut de la fenêtre visible ou la zone du navigateur visible . - Et quand je dis à droite, - il fait référence à sa relation avec le bord droit de la fenêtre du navigateur visible de sorte que vous - peut effectivement voir les 10 pixels il ya. - C'est 10 pixels vers le bas du haut, et c'est 10 pixels par rapport à la droite. - Donc, la principale différence entre relatif et absolu est que lorsque vous utilisez le positionnement - ici, - les commandes de positionnement sur un élément relativement positionné, - vous repositionnez cet élément par rapport à l'endroit où il a été positionné avant, - à droite, - donc il était ici, - puis il appuie dessus dans une direction particulière, - le pousse ou le tire et le repositionne en fonction de la relation de l'endroit où il était auparavant. - Maintenant, - absolu est basé sur la relation de toute la fenêtre visible donc c'est tout à fait différent. - Donc une façon d'y penser est cet enfant absolument positionné ici. C' est comme si on lui avait donné trop de sucre et qu'il s'était libéré. - Il a été hyper et arraché du parent, - et vous pouvez voir son parent s'est effondré là. - Et c'est en contraste avec relative aussi où lorsque vous positionnez quelque chose de relatif, - le parent toujours une sorte de fantôme de l'endroit où cet élément a été positionné - précédemment. - Donc, nous avons toujours la hauteur maintenue leur ok, - donc vous pouvez être curieux de ce qui se passe quand nous donnons également un positionnement spécial au parent. - Donc, - par exemple, - disons que je monte à ce parent ici qui s'est effondré parce qu'il a un enfant à l'intérieur de - il qui est positionné absolu. - Et si j'ajoute un positionnement relatif à ce parent est bien, - donc c'est un peu intéressant. - Vous pouvez voir que le parent est encore effondré ici. - Cependant, - cet enfant absolu n'est plus capable de se libérer. - On a donné des superpouvoirs à l'enfant. - On lui a donné du sucre. On l'a rendu hyper en se positionnant à l'absolu, mais maintenant on a donné aux parents des superpouvoirs en positionnant ce parent parent. - Donc, quand le parent a des pouvoirs spéciaux, il peut toujours tenir l'enfant à l'intérieur de lui. Et maintenant ce top 10 pixels, non ? - 10 pixels fait référence à sa relation à l'intérieur des parents. - Donc, il est allé en haut Quoi, - 10 pixels vers le bas du haut de ce parent et 10 pixels sur du côté droit du - parent. - Et puis vous verrez ce que nous enlevons ce positionnement relatif du parent et le définissons - à juste un parent normal, - statique. - Il ne peut plus tenir cet enfant sauvage à l'intérieur. - Donc quand nous courons ça là, - ce parent s'effondre et c'est normal, - position statique et l'enfant de position absolue peut se libérer. - Et c'est maintenant, - hum, - se positionner en fonction du bord de la fenêtre du navigateur à la place. - Donc c'est un peu intéressant. - Jetons un coup d'oeil à un autre type de positionnement appelé fixe. - Ok, - pour qu'on puisse sauver la position, - peut s'affaiblir. - Réglez celui-ci sur la position fixe, - et nous allons continuer et nous allons régler celui-ci pour positionner 10 pixels vers le bas du haut, - et nous allons le définir 240 pixels à partir de la droite. - Ce que nous verrons est que le positionnement fixe est un peu similaire à absolu en ce que ce haut - bas gauche et droite directions que nous pouvons placer ici sont toujours en relation avec la fenêtre du navigateur visible tout comme avec absolu. - Donc celui-ci apparaît 10 pixels vers le bas du haut et 140 pixels au-dessus du côté droit - comme ça. - Maintenant, il y a une différence principale entre fixe et absolu, - et c'est ce qui se passe lorsque la fenêtre du navigateur défile. - J'ai donc créé cette classe DIV avec du remplissage ici en bas. - Allons de l'avant et fixons une hauteur pour que nous puissions le faire assez grand pour que nous ayons besoin de - flâner dans le navigateur. - On va donner à ce type une taille ridicule, donc on sait que ça va sortir de l'écran. - Cela définira cela à 900 pixels de haut, - et cela devrait être suffisant pour courir hors de l'écran là-bas. - D'accord. - Et maintenant, nous avons une barre de défilement apparaissant cause ces éléments péage et nous allons le remarquer - comme nous faisons défiler l'élément qui a un positionnement fixe reste avec nous. - Donc, les éléments de position relative absolue et tous leurs conteneurs statiques que l'air. - Les parents défilent tous hors de l'écran, - mais fixe signifie qu'il reste fixe en place pendant que la fenêtre du navigateur défile OK, - donc vous pourriez être curieux de savoir quand vous pourriez utiliser les autres types de positionnement, - et nous sommes va jeter un coup d'oeil à certaines utilisations pour ceux-ci dans le prochain exercice. - Allons de l'avant et revenons aux diapositives alors. - Donc, nous avons regardé le positionnement relatif, - qui nous permet d'utiliser des commandes de positionnement comme le haut en bas à gauche et à droite et de déplacer un élément - basé sur la relation de l'endroit où il était autrefois quand il était statiquement positionné -. - Donc Top est juste en train de pousser dessus. - Son haut à gauche pousse sur le côté gauche de l'élément, - et vous le déplacez en fonction de l'endroit où il se trouvait auparavant. - Nous avons également examiné le positionnement absolu, - qui nous permet de déplacer un élément basé sur sa relation avec l'ensemble de la fenêtre du navigateur visible . - Et nous avons également examiné le positionnement fixe, - qui similaire à absolu mais restera fixe en place même lorsque l'utilisateur fait défiler dans le - navigateur 47. Z-Index Z-Index Z-Index: - ensuite, - jetons un oeil à une propriété CSS appelée Z Index, - et j'ai, - ah un exemple rapide que nous pouvons passer par. - Regarde ça. - Hum, - vous avez peut-être remarqué que dans ce dernier exemple, lorsque vous mettez à l'échelle l'écran, - de plus en plus petits, - que ces éléments peuvent effectivement se chevaucher les uns sur les autres. - Et on peut contrôler ça en utilisant quelque chose appelé Z Index. - J'ai créé un exemple vraiment basique ici 123 avec ces trois dibs, - et je leur ai donné à chacun une classe générique de Z un, - Z deux et Z trois. - Et nous allons l'utiliser pour leur appliquer un index Z différent et les positionner de sorte que certains d'entre eux soient au-dessus des autres. - Donc, nous allons juste commencer par descendre ici et créer une classe appelée Z one afin que nous - pouvons ajouter ce 1er 1 pour avoir un index Z de un maintenant par défaut. - Si vous ne spécifiez pas tous les éléments positionnés statiquement, - il suffit d'avoir un index brumeux de zéro, - et quand vous ajoutez un positionnement spécialisé comme relatif ou absolu, - il se déplacera au-dessus des éléments positionnés statiquement. - Sauf si vous spécifiez l'index Z donc un index Z de zéro est le que vous connaissez, - la couche normale qui est juste au-dessus du corps. - Vous pouvez réellement définir les nombres d'index à des nombres négatifs, - et ceux-ci tomberont derrière les éléments normalement repositionnés statiques, - et vous ne pouvez jamais aller derrière le corps. - Donc le corps est un peu comme la couche arrière la plus éloignée que vous ne pouvez pas obtenir derrière, donc vous ne pouvez pas - faire disparaître les éléments. - Quelque chose derrière le corps. - Mais vous pouvez les positionner devant et derrière d'autres éléments sur le dessus du corps, - essentiellement. - Et chaque fois que nous utilisons plus le numéro d'index est élevé, - il va dépasser un autre élément à tout moment. - Plus le numéro d'index est bas. - Ça va aller derrière ces autres éléments. , Donc ce type, j'aurai juste l'indice Z de 1. - Allons de l'avant et donnons à celui-ci une couleur de fond d'aqua juste pour que nous puissions voir le changement - là. - Et donnons aussi à celui-ci une position de parents. - Mais actuellement, je suppose qu'on n'aura pas vraiment besoin de se positionner. - Celui-ci positionnera l'autre au-dessus de lui. - Donc je vais juste mettre ça en haut zéro à gauche. - Zéro. - D'accord. - Et on va l'exécuter pour voir ce code. - Alors maintenant, on va entrer et, - euh, - mettre cette deuxième boîte pour se chevaucher sur celle-ci. - Cela va créer une autre classe, - et on l'appellera Z 2. - Et je vais régler celui-ci pour avoir un indice Z de deux. - Et je vais changer la couleur de fond ici, - lime des orteils. - Donc ils se démarquent et de tirer celui-ci sur l'autre, - je vais aller de l'avant et le mettre à négatif 50 pixels en haut et 50 pixels sur le côté gauche . - Alors je vais tirer cette deuxième boîte de 50 pixels, et je vais la pousser du côté gauche. - 50 pixels. - Alors, on va devoir le faire. - Et vous pouvez voir la case 2 avec les recrues. - L'index de deux cases superposées un qui a l'index d'un. - Vous pouvez voir si nous changeons l'indice Z de deux à ah, - nombre inférieur à un. - Par exemple. - Si je dis comme, - négatif à qui est un nombre inférieur et que vous exécutez, - vous verrez qu'il ira derrière, - et puis quand vous utilisez un nombre plus élevé, - il sautera sur le dessus. On peut mettre cette boîte trois ici dans le mélange aussi, en définissant celui-ci pour avoir un indice Z de trois. On peut mettre cette boîte trois ici dans le mélange aussi, - On va te piéger aussi. - L'index trois. - Et nous allons définir la couleur de fond ici. - Deux fuchsia. - Et nous mettrons ça en haut négatif 100 à gauche. - 100 pour les faire se chevaucher. - Là, - on y va. - Donc vous pouvez voir là que l'index d'un nombre plus élevé se chevauche et il tire devant et - l'index du nombre inférieur est derrière, - ok ? 48. Sprite de Sprite: - ensuite, - parlons de sprites d'image. - Maintenant, un sprite est essentiellement quand vous prenez plusieurs images et vous les sandwich ensemble, - vous les tuiles ensemble en une seule image et les costumes dans le but d'accélérer votre - temps de chargement dans le navigateur. - C'est plus efficace si nous chargeons une seule image et puis simplement la repositionnons que si nous changeons - entre plusieurs images. - Donc, - par exemple, - disons que vous avez une navigation qui ressemble à ceci dans votre site Web. - Et parlons de ce bouton d'accueil. - Disons que vous avez un élément qui est sur Ley de la taille de cette maison. - Mais donc, - par exemple, - si ce sprite entier était, - disons, - hypothétiquement, - 60 pixels de haut, - disons que nous créons un élément qui ne fait que la moitié de ces 30 pixels, - pour que vous puissiez Onley voir que cette grande partie du bouton est visible. - Rappelez-vous, - si nous plaçons une image d'arrière-plan dans un élément, - nous ne pouvons voir que autant de cette image d'arrière-plan aussi bien qu'à l'intérieur de cet élément. - Donc l'élément qui est probablement un lien ou quelque chose comme ça, - Theo Element, - va être sur ley la taille du bouton d'accueil gris ici. - Ok, - Maintenant, - quand l'utilisateur survole, - nous voulons repositionner cette image pour tirer l'image d'arrière-plan vers le haut, - révélant ainsi la partie orange et à l'utilisateur. - On dirait que ce bouton s'allume orange, mais vraiment très, très vite, - plus vite que là. - Je peux voir que le navigateur est en fait repositionner l'image de fond en le tirant vers le haut. - Et c'est plus efficace que de demander au navigateur d'aller trouver une image séparée et - chargé. - Et la raison pour laquelle est quand la page se charge pour la première fois, - il charge en fait toute cette image à la fois. - Et puis quand l'utilisateur survole, - il n'a pas à aller chercher l'autre image et chargé à nouveau. - C'est juste le repositionner. - Ok, - donc les sprites peuvent inclure deux états pour une seule icône, - ou ils peuvent contenir plusieurs états, - par exemple, - pour différents éléments de menu ou des interfaces utilisateur plus compliquées. - Et le principal avantage il ya un temps de chargement plus rapide, - donc vous chargez toutes les images au début de la page, - et alors il n'y a pas d'attente lorsque l'utilisateur interagit et passe sa souris sur. - Ceci est un exemple d'une icône très simple à deux états vous montrant une petite flèche vers le bas, - donc vous pouvez imaginer que l'élément dont il est à l'intérieur est seulement aussi large et grand est la moitié - de cette image. - Fondamentalement, - vous pouvez. - Vous ne pouvez voir que cette moitié supérieure. - C'est comme une fenêtre regardant dans la moitié supérieure de cette image d'arrière-plan contenant la flèche déroulante noire. - Et puis quand l'utilisateur survole, - nous utilisons une commande CSS pour changer la position d'arrière-plan. - Négatif, - cependant beaucoup de pixels de haut. - C'est juste. - Donc, si c'est 60 pixels de haut, on dira, - déplacez ça. - Négatif 30 pixels de sorte que cette flèche déroulante blanche soit maintenant dans la position ou montrant - où se trouvait la flèche noire. - C'est le code pour un rouleau lumineux CSS afin que vous puissiez voir si nous faisons cela avec un lien - définira le lien pour afficher le bloc. - De cette façon, il peut accepter une largeur et une hauteur. - Et puis nous avons lié à l'image de fond, - qui est l'image entière de Sprite qui a plusieurs états en quelque sorte imbriqués dans une seule image. - Et puis quand nous survolons, - nous pouvons utiliser le pseudo curseur de sélection de classe CSS, - ce qui permet au survol permet à ce style de se déclencher lorsque l'utilisateur survole et la seule - chose que nous changeons ici est la position d'arrière-plan, - qui change cette image d'arrière-plan pour se repositionner. - Donc, nous sommes vraiment un peu comme glisser l'image de fond à l'intérieur de l'élément et - révéler une autre partie de l'image qui était auparavant cachée. - La propriété de position d'arrière-plan accepte deux valeurs : le positionnement horizontal et le positionnement vertical. - Donc le positionnement horizontal est réglé à zéro. - On ne bouge pas l'image horizontalement. - Mais ici, ils ont choisi de régler la position verticale à 30 pixels négatifs, ce qui va déplacer l'image de fond jusqu'à 30 pixels. - Ok, - donc nous allons aller de l'avant et jeter un oeil à certaines de ces techniques que nous avons apprises et appliquées - les dans l'exercice, - qui est notre exercice continu que nous avons travaillé sur le site Web Z H W Shoes. 49. Navigation de style: - Je reviendrai. - Ceci est l'exercice 3.2 positionnement et sprites. - Dans cet exercice, - nous allons ajouter un peu plus de style à la barre de navigation principale en haut de la page -. - Et nous allons faire du style pour que chaque lien ressemble à un bouton quand nous - survolons comme si nous appuyons sur un bouton et nous allons également ajouter une barre de médias sociaux sur le côté droit de l'écran et la navigation et le bar social. - On va leur appliquer un peu de positionnement pour qu'ils restent en place. - Ils resteront en place même quand le navigateur fait défiler quoi ? - Je n'avais pas téléchargé le code de départ et vous pouvez voir que je l'ai amené ici dans un texte sublime - et les deux fichiers principaux que nous allons avoir besoin de travailler ici sont la page d'index et le style - point CSS page. - Donc la première chose que nous allons faire est que nous pouvons faire défiler ici jusqu'à l'en-tête et rappelez-vous - à l'intérieur de l'en-tête, nous avons le panneau de logo, - mais nous avons aussi cette barre de bidon et nous voulons commencer à coiffer cette barre de knave où le style - cela a fait avec l'idée de Knave Bar pour avoir une texture granuleuse qui se répète à travers l' écran -. - Et puis nous allons aussi styler cette boîte appelée Knave le conteneur sémantique HTML cinq - appelé Nath ici. - Et puis nous allons également styler chacun de ces liens individuels ici. - Alors allons de l'avant et sautons à la page CSS point de style et nous pouvons faire défiler vers le bas. - Et j'ai créé un commentaire ici. - Vous pouvez voir en ligne 1 39 affaiblir. - Commencez à écrire du code pour le style de la barre de Knave. - Donc, la première chose que je veux faire est que je veux sélectionner cette DIV avec l'idée de barre accrochage - elle-même, - et j'aimerais ajouter une image d'arrière-plan à cela maintenant. - Auparavant, - nous avons regardé l'utilisation de CSS trois rayonnants pour faire un fondu d'une couleur à l'autre, - et cette fois je vais vous montrer un peu comme une vieille stratégie ou une sorte d'héritage - technique pour obtenir un int Grady à apparaître. - Et cela implique d'utiliser réellement la création de l'ingrédient comme, - une petite tranche d'image, - et puis vous pouvez répéter cette image horizontalement. - Donc, - en fait, - Jetons un coup d'oeil à cette image très vite ici. - Je vais juste y aller et en parler. - C'est ce qu'on appelle le fondu d'en-tête et peut-être un peu difficile à dire. - Alexis est si étroit, - mais c'est un peu comme une couleur gris clair ici s'estompe d'une couleur super à l'autre, - et il devient un peu plus sombre ici en bas. - Ça va être le graphique qu'on a utilisé. - Et on va répéter ce petit morceau finlandais d'un graphique horizontalement. - Puisque ce n'est qu'un petit morceau de graphique, - un peu minuscule image ici, - cette image yeux va charger très rapidement. - C'est en fait une très petite taille de fichier. - Et puis, - en le répétant horizontalement, - nous allons le faire circuler à travers la page. On peut avoir une petite taille de fichier comme 4 K, et on peut l'utiliser sur une grande partie de l'écran, et ça va toujours se charger très rapidement. On peut avoir une petite taille de fichier comme 4 K, et on peut l'utiliser sur une grande partie de l'écran, - Avant d'oublier les ingrédients que vous connaissez, on utilise souvent une image réelle qui avait le Grady dedans. - Donc nous allons aller de l'avant et dire que vous êtes l et pointerez vers sont le dossier des images et nous allons utiliser celui qui s'appelle en-tête Dash Fade dot Jeff. - Et on va dire à celui-là de répéter horizontalement comme ça. On vaaussi ajouter une bordure en bas. On va - Et auparavant, nous avons regardé l'utilisation de la bordure raccourcie CSS, - qui affecte tous les côtés. - Mais nous pourrions aussi dire bord de bordure, - bas, - bordure, - tiret, - bordure gauche, - tiret, - quart supérieur. - C'est vrai. - Donc, dans ce cas, - nous allons définir un pixel solide et utiliserons une couleur grise moyenne comme ça, - venir à quelques styles plus ici. - Donc, nous voulons aussi ajouter une bordure à la boîte de bidon elle-même afin que nous puissions aller de l'avant et spécifiquement - cibler le crabe qui se trouve à l'intérieur de la barre de bidon en utilisant un sélecteur de descendant. - Donc, nous disons, - Hey, - navigateur va trouver un élément qui a une idée unique de nab notre aller à l'intérieur de lui et sélectionner - que ce html cinq élément sémantique appelé knave. - Et celui-là, on va juste lui dire d'avoir un tableau de bord. - Un pixel, - livre solide. Tu vois, tu vois. - Voir comme ça. - Ok, - cool. - Maintenant, - à l'intérieur de ce gars, - nous avons les liens que nous voulons styler, - donc je vais commencer à coiffer ces liens ici euh, - et seront vraiment spécifiques. - Encore une fois, - en utilisant un sélecteur descendant dira, - Hey , - navigateur, - aller trouver quelque chose Vous savez, - un élément avec une idée unique de barre de talent. - Aller à l'intérieur et trouver un élément appelé knave et aller à l'intérieur de cet élément dans le style, - tous les liens à l'intérieur de celui-ci. - Donc, cela ne stylise que les liens à l'intérieur de la barre de Knave. - Donc c'est assez spécifique là-bas. - Donc, pour ces liens, - nous voulons les définir pour afficher dans le bloc de tiret en ligne, - et de cette façon ils seront en mesure de l'accepter avec. - Et ce que nous voulons faire, c'est que nous voulons mettre en place ceci de sorte que les cinq liens aient un espacement égal . - Et vous vous souvenez que cette barre de talent ici, - le fait avec l'idée de nab notre ceci est juste à travers l'ensemble de l'écran 100%. - Et puis nous avons un fait avec la classe de rappeur ici, - et ce gars a une largeur fixe de 960 pixels. Et à l'intérieur de ça, on a ce type appelé Knave. - Donc maintenant, il n'a pas d'esprit spécifié actuellement, - donc il est juste étirer 100% jusqu'à ce qu'il tombe dans le bord du rappeur, - qui est 9 60 Donc j'ai essentiellement ces cinq liens ici à propos de la vente, - catalogue, - prix et contact. - Et je veux qu'ils prennent une quantité égale d'espace dans votre Donc si je prends ce 100% de - pièce que j'ai disponible à l'intérieur de jamais et je divisé par cinq, - je reçois 20%. - Donc je peux mettre ce gars pour avoir une largeur de 20% comme ça et je vais m'assurer que cela n'a pas - marge autour de ça dira marge zéro, - et nous allons ajouter un peu de rembourrage. Je veux vraiment juste un rembourrage en haut et en bas. - Donc je vais mettre 22 pixels de tapotement en haut et en bas et zéro à gauche et à droite -. - Utilisez du texte, - transformez et faites tout le texte transforme automatiquement les majuscules uniquement, - et nous allons définir la couleur du texte pour être noir, - ok ? - Et vous permet également de définir le texte sur une ligne au centre par rapport à ces zones. - Donc nous allons dire aligner le texte, - au centre. - Ensuite, - on va mettre une bordure sur le côté droit de chacun de ces liens, - et on va la mettre sur un pixel solide. - Si, - si, - si. - Et nous voulons supprimer le sous-jacent de ces liens. - Alors je vais mettre la décoration du texte à zéro. - Et nous allons aussi définir la police. - Vous utilisez la propriété de police raccourci CSS. - Et je vais mettre le fonds à 20 pixels et on utilisera, - euh, - voyons. - On va utiliser des seaux commerciaux comme ça. - J'avais des citations supplémentaires là-bas. - Tu dois te débarrasser d'un ensemble. - On y va. - Et nous dirons une sauvegarde za dira, - Ariel, - Sand, - Sarah comme ça. - Ok, - alors on va y aller et sauver ça. - Jetons un coup d'oeil à ce type dans le navigateur pour qu'on revienne et qu'on se rafraîchisse. - Cool. - Donc la barre naff a un fondu appelé fondu d'en-tête Dodge. - Si cela se répète 100% de l'écran parce qu'ils l'ont fait avec l'idée de Navid, - Bar n'a pas un esprit spécifié, - et c'est un bloc des éléments tels que aller 100% de l'écran. - Le rappeur ici est de 960 pixels. - Donc ce type est centré ici pour correspondre à la largeur de ce rappeur dans ce rappeur - semblent donc tous alignés parfaitement. - Maintenant, Knave est à l'intérieur de l'emballage. - Et j'ai donné une bordure gauche de gris sur Naff. - Donc, cette petite ligne ici est créée en créant un tiret de bordure laissé un naff, - et puis chaque lien a un tiret de bordure ah, -. - Droit. - Donc ça me donne la frontière ici, - sur ici en vente ici sur catalogue, - ici sur les prix ici sur contact, - ce qui nous donne un peu comme une petite séparation, - les faisant ressembler un peu plus à des boutons. - Vous pouvez voir la décoration de texte en majuscules et le style de la police là-bas. - Ok, - hum, - voyons. - C'est plutôt bon. - Voyons voir, - nous voulons aussi être en mesure de faire savoir à l'utilisateur quelle page particulière était sur de sorte que lorsque - ils cliquent sur la page, - ce lien a ah style différent afin que nous puissions voir que c'est la page que nous avons - a atterri. - Alors revenons au CSS ici, - et créons un style spécifique pour cela. Je vais aller de l'avant et dire l'espace bar d'amour un DOT sélectionné. - Donc, cela va seulement sélectionner les liens qui ont eu lieu, - avoir une classe de sélectionné si elles sont à l'intérieur de la barre de talent. - Et je vais lui donner une couleur de fond ici, - on va sauver le fond noir, - donc ça va avoir une couleur de fond plus foncée, - et je vais mettre la couleur de premier plan ici sur White comme ça, - on va sauver le fond noir, - donc ça va avoir une couleur de fond plus foncée, - et je vais mettre la couleur de premier plan ici sur White comme ça, et je vais appliquer ça. - Je vais entrer et appliquer cette classe à chaque page, - et ensuite nous allons retourner à la page html du point d'index et sur la page d'index. - C'est vraiment la page à propos de donc à l'intérieur de ce lien ici, - Je veux ajouter une classe correcte de sélectionné uniquement à ce lien, - et nous pouvons copier ce code ici classe sélectionnée, - et je vais ajouter ceci aux autres pages. - Donc je vais dans le catalogue et descendre à la navigation, - et je trouverai le lien qui entoure le catalogue, - qui est juste ici et celui-ci. - Je vais lui donner une classe de sélection. - Donc, sur cette page, - lien de catalogue est sélectionné et nous allons à la page de contact sur tous défiler vers le bas et nous allons - vers le lien de contact, - qui est juste ici et bien rythmé dans cette classe de sélectionné là. - Nous allons aller au prix d'une page, - et voici leancet pour les prix, - et je vais aller à l'intérieur de ce lien et bien rythmé la classe de sélectionné là-bas. - Et enfin, - nous pouvons aller à la vente et nous allons sur le lien en vente ici et je vais coller dans cette classe de - sélectionné là nous pouvons enregistrer, - et ensuite nous allons passer au navigateur et nous allons rafraîchir. - Cool. - Donc, vous pouvez voir là que ce lien a la classe de sélectionné dessus. - Si je clique sur la page de vente maintenant, - celui-ci a la classe noire de sélectionné dessus. - Catalogue A les classes sélectionnées là tarification des classes sélectionnées là et contact - classes sélectionnées là. - Donc, vous pouvez voir que chacun des liens l'a presque fait ressembler à un onglet - Structure comme ce bouton est poussé pour la page particulière. - Ok, - cool. - Donc nous allons aller de l'avant et revenir à la page CSS de point de style ici, - et nous aimerions ajouter un état de survol ici, - donc nous allons dire que le labo est maintenant un survol deux-points comme ça. - Et nous allons changer quelques choses qui se passaient, - Teoh changer la couleur du texte en blanc. - Et nous allons changer la couleur de fond aussi, - Et pour celui-ci, - je vais juste utiliser le CSS trois Grady int. - Ils sont donc on va au navigateur et va trouver notre ami la couleur Zilla, - Grady et éditeur. - Et j'ai déjà créé Grady inapproprié ici. - Il commence juste comme une couleur noire sur les bords et s'estompe comme un gris clair au milieu. - Et je vais aller de l'avant et dire, - Copie et bien au rythme, - c'est ici. - Ils sont Rio, - et nous donnerons cette sauvegarde et nous reviendrons au navigateur et rafraîchir. - Ok, - Cool. - Et vous pouvez voir quand je survolerai là-bas. - Ensuite, ces liens s'allument uniquement sur l'état de vol stationnaire qui utilisait le pseudo classe - sélecteur. - Un deux-points survolent à droite. - Et puis quand nous changeons de pages, - nous obtenons la couleur plus foncée sur la classe sélectionnée comme ça. - Cool. - En ce moment, on a juste ça. - Ces éléments ont juste un positionnement normal ici. - Et ce que j'ai fait est que j'ai déjà ajouté assez de rembourrage au-dessus du logo ici que nous pouvons - en fait adapter cette barre de barre de navigation pour être positionnée au-dessus du logo et fixée en - place. - Et de cette façon, - quand on fait défiler la page, - cette barre de navigation restera là. - Et d'abord, - lorsque vous chargez la page pour la première fois, - vous verrez le logo sous la barre de serrage, - puis quand vous faites défiler vers le bas, - il commencera à le couvrir. - Revenons au code et nous retournerons chercher ici. - Donc on va y aller et ajouter une position de fixe ici. - Maintenant, ça a un positionnement fixe. - Ça devrait rester réparé. - Même lorsque la fenêtre du navigateur défile et nous voulions être dans le haut de la page, - quelqu'un dit Top zéro gauche zéro. - C'est dans le coin supérieur gauche de la page. Depuis qu'on a mis ce type en position fixe, ça va s'effondrer. Depuis qu'on a mis ce type en position fixe, - C'est avec, - même si aucun avec est spécifié. - Donc, ce que nous devrions vraiment faire est de spécifier une largeur de 100% pour cette barre de navigation - là. - Et rappelez-vous, - notre ami Z Index lui permettra d'être au-dessus d'autres choses. Donc si je dis que l'index Z devrait être au-dessus de tout le reste, - ok, - alors sortons et sauvegardons ça et revenons au navigateur et jetons un coup d'oeil à ça. - Donc ce bar va sauter ici quand je fais un rafraîchissement de page comme ça. - Alors c'est cool. - Donc nous avons juste fait le nab notre aller sur le dessus et parce qu'il est réglé à la position fixe quand je fais défiler - que NAB sont toujours rester là maintenant. Donc si je viens ici à cette vidéo, et je suis genre, - Oh, - Oh, - c'est une vidéo cool, - mais je veux aller sur une autre page. - Je n'ai pas à faire défiler jusqu'au sommet. - Je pourrais toujours avoir accès à ce bar en tout temps. - Donc c'est une utilisation pour la position fixe. - Ok, - ça a l'air plutôt lisse. - J'aime ça. - Qu'est-ce que vous en pensez ? 50. Styler la barre de réseaux sociaux: - Ensuite, - nous allons construire une barre de médias sociaux pour la page ici sur le côté droit, - et nous allons utiliser un positionnement spécial, - pour que ça reste fixe en place aussi. - Et nous allons aussi utiliser une vraie image Sprite lisse pour que lorsque nous survolons, - cette image va changer. - Tout d'abord, - allons de l'avant et allons dans la boutique de photos et jetons un oeil à ce que ressemble cette image Sprite - à quoi ressemble . Donc j'ai attrapé ces icônes sociales, euh, - psd sur Internet et vous pouvez voir ici qu'il a, - comme la plupart des icônes populaires de réseaux sociaux ici, - et on va juste utiliser le premier top 3. - Mais selon la façon dont vous positionnez cela, - vous pourriez potentiellement en utiliser d'autres, - comme la vidéo et YouTube ou scintillement etcetera. - Donc on va utiliser. - Facebook utilisera Twitter ici et l'icône Google plus juste parce qu'ils sont le top - trois. - Je vais aller de l'avant et allumer mes guides comme ça, - et vous pouvez voir que tous les 40 pixels il y a une autre icône, - donc l'icône Facebook blanche ou grise commence à zéro pixels et se termine à 40 pixels, - et puis nous avons une couleur de cette icône Facebook qui commence à 40 pixels et se termine à - 80 pixels. - Et puis l'icône noire de Facebook commence à 80 pixels et se termine à 120 pixels ici, - Et puis, - si nous voulions utiliser une icône Twitter, - nous devons la positionner plus loin. - Donc nous devrions dire 40 négatifs pour tirer cette image jusqu'à 40 pixels pour que nous puissions utiliser le petit oiseau ici pour Twitter. - Donc on va mettre ça en place pour que ces icônes ou blanches et quand on survolera, ils auront de la couleur, ce qui est la deuxième colonne ici. - Et quand on appuie sur le bouton de la souris ou quand on clique sur l'état actif, ça va devenir noir comme ça. - Ok, - alors allons-y et revenons au texte sublime. - La première chose que nous allons vouloir faire est d'aller dans la page d'index et vous pouvez voir ici - qu'en haut du corps, - j'ai créé un commentaire ici, - et c'est là que je vais placer ma barre de médias sociaux. - Alors je vais rentrer ici et je vais créer un div, et je vais lui donner une idée du social. - On va aller à l'intérieur d'ici et créer un lien. - Et ce premier lien sera pour Facebook, - et nous allons aller de l'avant et dire ceci pour pointer vers le comte de notre page Facebook. - Pour l'instant, - je vais juste mettre un espace réservé, - et vous pourriez revenir ici plus tard et changer ceci pour le comte réel l'adresse http - de votre page Facebook. - Et on va mettre ces gars à cibler Blank pour qu'ils s'ouvrent dans un nouvel onglet de navigateur. - Voyons voir, - nous pourrions aussi lui donner un titre qui se souvient, - le titre aura effet. - Donc quand tu survoleras, - euh, - le lien, - une petite légende apparaîtra pour que tu puisses dire, - visiter ma page Facebook ou quelque chose comme ça, tu pourrais écrire à l'intérieur. - Et une chose qui est vraiment importante est que nous voulons nous assurer de donner à chacun une classe unique . - Et la raison pour laquelle nous voulons donner à chacun de ces un nom de classe unique est de sorte que pour chaque - lien, - nous pouvons utiliser le nom de la classe pour repositionner cette image Sprite pour la glisser vers le haut ou vers le bas de sorte que - nous voyons théâtre pro PRI il icône à l'intérieur de ce lien. Quelqu' un donne à ce 1er un livre de classe F comme ça, et je vais copier ce code et on va coller ça deux fois ici. - Ah, - le deuxième lien sera pour Twitter, - donc je vais juste lui donner une classe de twit. - Nous allons juste utiliser un peu de noms de classe courts comme ça et pour le titre dira Twitter et - pour le dernier dira G plus comme le nom de la classe et définira le titre sur Google. - En plus comme ça. - Et nous ferions mieux de changer le texte ici aussi bien à l'intérieur du lien. - Maintenant, - vous vous demandez peut-être pourquoi nous mettons du texte à l'intérieur de ces liens alors que nous allons juste voir une icône qui est composée de notre image Sprite. - La raison en est que c'est une bonne pratique pour les moteurs de recherche d'écrire réellement le nom - à l'intérieur du lien ici comme ceci. - Et de cette façon, le moteur de recherche peut lire ceci et voir où ce lien particulier va - va. - Nous allons utiliser du CSS pour cacher ce texte, - et de cette façon nos utilisateurs ne verront que l'icône Sprite. - Ok, - donc nous pouvons enregistrer ceci sur cette page, - et je suis allé de l'avant et déjà ajouté ce code sur toutes les autres pages pour vous, - donc nous pouvons juste revenir à la page CSS point de style. - Et si on fait défiler jusqu'à la ligne 14 ici, - vous pouvez voir que j'ai écrit un commentaire, - hum, - notant que cette section ici sera pour la barre sociale. - La première chose que nous voulons faire, c'est que nous voulons styler cette boîte avec l'idée de sociale. - Et on va régler ce truc aussi. - Position fixe. - Et on va lui dire d'aller vers le haut 200 pixels en bas du haut, - et on va le donner juste un peu du côté droit. - Donc, il n'est pas droit contre la fenêtre du navigateur dira comme trois pixels de la droite. - Et rappelez-vous que chacune des icônes n'a que 40 pixels de large, - donc nous pouvons juste dire 40 pixels et nous assurerons de lui donner un index Z plus élevé de sorte que - il est sur le dessus dira Z Index un ok, - et puis allons à l'intérieur de cela et nous allons ajouter l'image de fond pour chacun de ces liens, donc je vais aller de l'avant et dire un livre point f, - ok. - Et puis je vais dire un point twit pour le twitter et un point g plus pour le lien Google Plus -. - Et j'utilise un sélecteur de composé parce que je vais mettre des styles tout de même pour ces types. - Ils vont être réglés pour afficher le bloc parce que nous voulons qu'ils empilent verticalement l'un sur l'autre, - et nous allons nous assurer que chacun de ces liens est de la taille d'un Nikon eso. - Rappelez-vous, - chacun d'entre eux ne sera que 40 pixels comme ça, - donc nous pouvons définir ceci pour avoir un avec 40 pixels et une hauteur de 40 pixels. - Donc, même si les images de fond beaucoup plus grandes, - nous allons seulement pouvoir voir 40 pixels par 40 pixels de l'image de ce fond - image et afin de cacher le texte. - Ce que nous pouvons faire est que nous pouvons utiliser le tiret de texte dans den et nous pouvons régler le texte en dette à 100% ce qui - va réellement le pousser. 100 % signifie qu'il est en retrait de 100 % de la taille du conteneur dans lequel il est. - C'est donc, - Ah, - un conteneur de 40 pixels de large. - Donc, il va effectivement indenter le texte 40 pixels juste à l'extérieur du conteneur, - et ce que nous pouvons faire est affaibli, - puis définir le débordement sur caché pour que nous ne voyons rien qui soit en dehors de l'élément -. - Donc ce Texas à Denning est à Denning en dehors de l'élément, - et ensuite c'est invisible là-bas. - Et nous allons aussi mettre l'espace blanc ici pour savoir ça Rap, - et nous allons relier à l'arrière-plan. - Donc, chacun d'entre eux va réellement utiliser la même image Sprite, - et nous allons dire que vous êtes d'autre et nous allons lier à des images slash icônes de tiret social point PNG et moi - voulez configurer cela à aucune répétition. - Il n'y a qu'une seule de ces images d'icônes sociales à l'intérieur de ces gars. - Donc, chacun de ces livres F twit et G plus chacun ont la même image d'icônes sociales à l'intérieur de - eux. Bon, Bon, pour chaque classe, je vais devoir positionner cette image différemment. - Donc, - par exemple, - pour la classe de livre F, - nous allons vouloir x à la position de tableau de bord 200 qui est Ah, - zéro horizontalement et zéro verticalement va simplement le mettre fondamentalement dans le coin supérieur gauche. - Alors rappelez-vous, - nous revenons à l'image ici, - ce serait l'équivalent de 00 est le coin supérieur gauche signifie, - ce qui signifie que nous ne décalons pas l'image. - Cependant, - lorsque nous survolons, - nous voulons que cette image se déplace sur 40 pixels comme ça. - Donc, on va créer une classe de vol stationnaire pour ça en disant un point f livre deux-points hover. Et pour celui-ci, on va changer la position de fond pour être négatif 40 pixels horizontalement et zéro pixels verticalement. - Donc ce que ça va faire, c'est que ça va le déplacer horizontalement, - 40 pixels négatifs. - Ce qui veut dire qu'il va aller à ce bord gauche et tirer dessus pour qu'il déplace ce - couleur f dans la position où se trouvait ce F blanc. - Et parce qu'on ne le déplace pas verticalement. - Ah, - on peut juste mettre ce type à zéro là, - et ils devraient avoir un demi-côlon là-bas. - N'oublions pas cela, - et nous avons aussi un état actif, - qui est l'état lorsque nous avons appuyé sur le bouton de la souris, - ou lorsque vous maintenez le bouton de la souris enfoncé. - Et pour celui-ci, - nous pouvons changer la position de fond pour aller encore plus loin. Donc, dans ce cas, on veut se déplacer, pas seulement 40 pixels, mais on veut déplacer plus de 80 pixels pour atteindre le fond noir F. on veut se déplacer, pas seulement 40 pixels, mais on veut déplacer plus de 80 pixels pour atteindre le fond noir F. - 80 pixels zéro comme ça. - Le suivant est l'icône Twitter, qui a une classe de twit, - comme ça. - Et pour celui-là, - nous voulons aussi définir la position de fond. - Il suffit de copier et de coller ça maintenant pour celui-là, - nous voulons le déplacer vers le bas. Donc d'abord, abord, on veut voir ce blanc, donc on n'a pas à le déplacer horizontalement. - Il va Mais pour obtenir de ce coin supérieur ici pour voir la petite icône d'oiseau - à la place, - nous devons dire négatif 40 pixels verticalement. - Donc, ce premier chiffre horizontal dans le deuxième chiffre vertical. - Donc ici, nous voulons dire 40 pixels négatifs comme ça pour le déplacer verticalement. - Et on peut copier et coller ces autres ici juste pour gagner du temps. - Et on peut payer Asseyez-vous ici et changer ce cours pour tourner comme ça et tourner comme ça . - Et ici, la différence est que nous allons descendre 40 pixels pour chacune de ces positions verticales ici. - Mais la même chose pour celui-là en ce qu'on se déplace toujours horizontalement. - 40 pixels sur le vol stationnaire et actif ou se déplaçant au-dessus de 80. - Parce que rappelez-vous ces air empilés de sorte que c'est l'état par défaut. - Nous déplaçons toujours horizontalement 40 pour l'état stationnaire et nous déplaçons plus de 80 horizontalement pour - l'état actif. - Donc la seule chose qui va changer pour chacune d'elles, c'est la valeur verticale. - Maintenant, - quand selon vous savez, - quelle classe utilisait, - donc, - je pourrais vraiment copier et coller ce code ici, - et je pourrais le reformuler juste un petit peu pour le Google Plus Icahn, - qui a une classe ici de G plus vous aussi un petit truc soigné que vous pouvez faire avec du texte sublime - si vous voulez changer plusieurs choses en même temps ici. - Par exemple, - si je veux changer cette classe, - nommez ce nom de classe dans ce nom de classe simultanément. - Ce que vous pouvez faire, c'est que vous pouvez effectivement cliquer avec la souris, - vous savez, - cliquer sur le curseur devant ce texte. - Et si vous êtes sur Mac, - vous pouvez maintenir la touche de commande et cliquer encore et encore devant chacun de ces trois - noms de classe. - Si vous êtes sur Windows, - vous pouvez tenir à contrôler et cliquer après le thé pour chacun de ceux-ci, - et vous pouvez voir que j'ai en fait trois curseurs clignotants. - Laisse-moi le faire encore une fois, donc je clique sur le curseur une fois ici. - Et si vous maintenez la commande sur Mac ou le contrôle sur Windows et cliquez à nouveau une deuxième fois dans la - troisième fois ici, - vous obtenez en fait trois curseurs. - Et maintenant, - quand vous effacez ça vous permettant d'écrire ou d'éditer ces trois lignes simultanément afin que nous puissions - dire comme, - G plus comme ça Oops a obtenu un P supplémentaire leur G plus comme ça. - Et la seule chose qui change ici, c'est le fait que nous descendons 80 pixels - donc je pourrais cliquer ici et ici, - et je peux changer simultanément les trois de ces 2 80 pixels comme ça. - Alors allez-y et sauvegardez et revenons au navigateur et faisons un rafraîchissement. - Cool. - Donc ces gars apparaissaient et j'ai fait des calculs pour qu'ils apparaissent, - euh, - 200 pixels plus bas devraient leur permettre de correspondre directement avec le bord supérieur ici de la première section. - Et j'ai calculé cela en mesurant la hauteur de pixel de ce plus cela plus les 30 pixels de - espacement ou rembourrage à l'intérieur de ce que le bois a fait ici. - Et vous pouvez voir l'effet du travail du sprite. - Parce que quand nous survolons, - nous voyons la couleur pour Facebook. - Nous voyons la couleur pour Twitter, - et nous voyons la couleur pour Google. - En plus comme ça. - Maintenant, - si nous cliquons et maintenons le bouton de la souris enfoncé, - nous verrons qu'il deviendra noir comme ça pour chacun d'entre eux. - Donc, nous avons l'état de vol stationnaire et l'état actif. - D'accord. - Très cool. - Ok, - super. - Les sites commencent à paraître plutôt lisses. - Nous pouvons le vérifier sur toutes les différentes pages là-bas, - assurez-vous que les navigations fonctionnent correctement et assurez-vous que ces éléments sociaux apparaissent -. - Et ça a l'air plutôt bien. - Donc ici sur la page de contact, - J'ai un petit problème avec le cadre I qui sort. - Donc je vais revenir au texte sublime et allons au code CSS pour ce que je cadre - là, - qui devrait être ici en ligne. - Tu veux attendre ? - Donc nous allons au cadre I ici, - et nous allons remplacer le HTML avec un CSS avec la commande. - Et on va juste dire que c'est 100 %. - Donc, ce sera en fait 100% jusqu'à ce qu'il tombe dans le conteneur parent, - qui est cette petite section pour la colonne dans laquelle il est. - Et ça devrait arranger ça. - Faisons-le un test. - On y va. - Maintenant, le cadre I se comporte. - Il reste à l'intérieur de cette colonne. - Ensuite, vous allez vouloir passer au défi de code où vous allez ajouter - un positionnement spécial et quelques sprites dans votre propre page. 51. Techniques de mise en page réactif: - Salut. - Bienvenue. - Ce sont des diapositives 4.1 réactives sur les techniques. - Donc, dans les exercices précédents, - nous avons appris à avoir une vraie maîtrise de la mise en page d'un site Web. - Et maintenant ce que nous voulons faire, c'est nous voulons nous concentrer sur toutes les choses que nous avons apprises et - l'appliquer à un nouveau modèle où nous pouvons changer notre disposition en fonction de la taille de l'appareil. - Il le regarde pour le faire. - Nous allons explorer CSS trois requêtes média comme une technique pour changer notre code CSS, - en fonction de la taille de l'appareil. - Et cela va donc modifier notre mise en page dans notre contenu afin qu'il corresponde à la vue - agréablement sur tous ces appareils de taille différente afin de créer une visualisation plus fluide - expériences possibles. - Nous allons également discuter de techniques telles que met, - un appareil avec l'hommage et aussi quelques correctifs JavaScript qui vont permettre CSS trois - les requêtes médias orteil fonctionnent sur des appareils plus anciens ainsi que l'exploration de quelques correctifs JavaScript qui - permettra de visionner une expérience fluide Même en changeant l'orientation d'un appareil de portrait - paysage orteil, - par exemple, - les sites Web d'aujourd'hui sont vus sur un nombre de plus en plus grand d'appareils chacun avec - leurs propres différents tailles et proportions d'écran. - Et pour cette raison, - différentes stratégies ont émergé pour traiter les différences de configuration et de dimensionnement - de l'appareil à la détection de l'appareil. - En vérifiant les périphériques demandeurs, - Les informations d'en-tête sont un moyen commun de voir quelles sont les spécifications d'un périphérique donné, puis de servir - les fichiers appropriés à l'appareil. - Donc, - par exemple, - une solution est de construire des sites distincts pour mobile et bureau, - comme twitter dot com versus mobile dot twitter dot com. - Une autre solution consiste à créer un seul site et à modifier le style et la mise en page en utilisant CSS - requêtes média, - ce qui est la technique que nous allons apprendre. - Donc, vous pouvez voir que certaines entreprises choisissent d'utiliser un script sur le back-end. - Et quand un périphérique demande cette page quand il fait la requête http au serveur distant, - le serveur utilise ces informations d'en-tête pour détecter le périphérique qui demande le fichier, - et sur la base de cela, - il repassera en fait différents fichiers HTML dans différents fichiers CSS. C' est comme construire deux sites web différents , pour un mobile et un pour les ordinateurs de bureau et les tablettes, etc. Donc ça demande plus de travail parce qu'on construitdeux sites. Donc ça demande plus de travail parce qu'on construit deux sites. - Donc, nous avons deux fois plus de code là-bas, - et c'est pourquoi j'aime cette dernière solution. - Et c'est la solution que je vais vous apprendre les gars et les solutions de plus en plus - gagner en popularité comme aller à la solution pour fournir un site réactif. - Donc, afin d'obtenir du contenu à afficher sur des appareils plus petits, - des modifications sont apportées aux pages. - Les changements courants dans la mise en page incluent le masquage du contenu ou le déplacement du contenu. - Pour correspondre à la zone d'écran disponible des appareils donnés, - par exemple, - vous pouvez prendre l'emballage ou les éléments de conteneur et les passer à un fluide avec au lieu d'un - quantité fixe de pixels. - Et de cette façon, - lorsque l'appareil avec change vos éléments avec répondra également. - D'autres stratégies comprennent la mise en place des colonnes flottantes pour flotter aucun, - et avec le 100% pour passer à une structure de colonne unique par opposition à une colonne multiple - structure, - images, - tables, - forme, - entrées et vidéo sont également généralement réglés sur des esprits fluides. - De cette façon, - le contenu sera réduit au fur et à mesure que l'écran des appareils diminue, - il est donc important d'avoir vos images, vos tableaux et votre forme configurés de cette façon, - et vous pouvez imaginer que sur un écran plus grand, - vos images et les formes sembleront légèrement plus grandes. - Ils vont prendre toute la largeur, - alors que l'appareil diminue, - ces images seront également réduites dans ces formes seront également réduits à l'échelle pour s'adapter à l' espace de l'écran disponible. - Il est également en train de changer la taille du texte et des liens. - Donc, - par exemple, - à mesure qu'un appareil devient plus petit, - vous devrez peut-être réduire certaines taxes afin qu'il ne tombe pas dans un autre texte. - Vous pouvez également trouver que vous devez augmenter la taxe parce que certaines tailles de texte peuvent être très lisibles sur un ordinateur de bureau. - Mais lorsque vous allez à un appareil de poche, - si vous tenez ce dispositif de poche à une distance plus éloignée se, - par exemple, - vous pourriez avoir besoin comme votre texte de navigation principal pour être légèrement plus grand. - Donc, le texte va probablement augmenter ou diminuer pour créer une visualisation confortable - expérience sur les différents appareils de taille. - Jetons un coup d'oeil à ça. - Ce diagramme ici une seconde et imaginons que c'est un site que nous construisons, et nous allons imaginer que ce carré rose représente notre logo. - Et disons, - par exemple, - que ce carré jaune représente notre navigation principale. - Et cette boîte noire ici sera une barre latérale avec des liens secondaires. - Et ces carrés bleus représentent les différentes sections de notre page. - Donc, chacun a ah certain type de contenu et il probablement des paragraphes et du texte et des choses - comme ça. - Ok, - donc c'est la mise en page préférée que ce concepteur avait créée pour le bureau. - Mais que se passe-t-il lorsque nous réduisons à un écran plus petit, - par exemple, - lorsque nous affichons ce site sur une tablette à la place ? - Donc ici vous pouvez voir quelques changements qui ont été faits au bruit pour le rendre plus lisible - est nous avons réduit l'espace ici entre la navigation principale et le logo afin - accueillir la largeur de cet appareil. - Et aussi, - il n'y a plus vraiment de place pour la barre latérale ici sur la gauche, - parce que nous aimerions utiliser tout l'espace disponible pour le contenu de notre section. - Donc ce qu'ils ont fait ici, c'est qu'ils ont enlevé la barre latérale du côté, et ils ont décidé de le déplacer en dessous de la navigation. - Et puis ici, nous avons, - ah, - passer d'une structure à trois colonnes ici en une structure à deux colonnes sur la tablette -. - Et puis, - comme nous réduisons à un appareil encore plus petit comme un iPhone, - par exemple, - il est nécessaire de passer à une structure de colonne unique, - et ils ont en fait, - en fait, - caché quelques contenu. - Les barres latérales ont été déplacées vers le bas avec les sous-liens, - ou elles ont été complètement cachées, - et vous verrez que la navigation principale ici, - qui est une boîte jaune, - a été poussée vers le haut sous le logo. - Donc, cela montre toutes les techniques qui allaient utiliser dans le prochain exercice pour - changer notre mise en page à mesure que la zone de l'écran disponible diminue. - Et pour le faire comme je l'ai mentionné, - nous allons utiliser une nouvelle technique et CSS trois, - connu sous le nom de requêtes de médias, - Et cela donne à CSS le pouvoir de demander au navigateur la largeur de l'appareil. - Donc, - basé sur le nombre de pixels de large l'écran est de cet appareil, - il déterminera quel code CSS utiliser. - Et ça commence par le symbole at ici que nous disons aux médias, - et ensuite, - nous sommes capables d'écrire une déclaration, - et cette déclaration sera soit évaluée à vrai ou faux. - Ce que cette déclaration dit est l'écran Onley, - ce qui signifie qu'il va seulement évaluer cela ou vérifier cela sur un écran spécifique - des appareils par opposition au projecteur ou aux appareils d'impression. - Et après ça, nous vérifions la largeur de l'appareil. - C'est une chose vraie ou fausse. - C'est écrit Ah à l'écran des médias. - Si cela était sur un projecteur, - cela évaluerait à faux et donc il n'utiliserait pas ce code ici. - En outre, - si la largeur maximale des appareils supérieurs à 768 pixels, - cette déclaration va évaluer à faux et donc il n'utilisera aucun code CSS - écrit entre l'accolade d'ouverture et de fermeture ici. - Non. - Si la largeur de l'appareil est de 768 pixels ou moins que cette déclaration ici, - cette requête de média évaluera à true, - auquel cas elle utilisera le code à l'intérieur de la section, - rendant ainsi la taille de police des liens à l'intérieur du navigation légèrement plus petite que je - mentionné précédemment. - Afin d'obtenir l'expérience de visualisation la plus fluide est possible, - il y a d'autres techniques que nous pouvons implémenter dans notre code pour le faire. - Une de ces choses est le méta-appareil avec tag. - Donc ici vous pouvez voir que j'ai une balise meta avec le nom de Vieux Port, - et nous utilisons une déclaration ici à l'intérieur du contenu pour empêcher les appareils de zoomer avant ou arrière. - Et cela nous permettra de nous appuyer sur notre style de requête de médias pour changer la mise en page en conséquence. - Donc, les fabricants d'appareils qu'ils réalisent qu'ils sont la taille de crache d'écran disponible est - en fait beaucoup plus petit que la plupart des sites Web que les gens vont regarder sur l'appareil. - Donc, une stratégie, - en particulier sur les appareils à écran tactile, - est de faire un zoom arrière afin que tout le contenu du site Web devienne plus petit. - Ainsi, - il s'intègre à l'intérieur du cadre de l'appareil, - et puis c'est à l'utilisateur d'utiliser ses doigts ou toucher pour zoomer sur deux parties différentes du site. - Et c'est quelque chose que nous voulons éviter. - Nous ne voulons pas qu'il fasse un zoom arrière parce que nous allons écrire un style de requête multimédia intelligent pour - obtenir notre contenu pour changer de taille et mettre en page afin qu'il corresponde à l'esprit de l' écran de l'appareil sans avoir besoin de reprendre. - Donc, pour désactiver, - reprendre ce que nous faisons est de nouveau nous avons mis cette balise meta avec le nom de Vieux Port et à l'intérieur - contenu. - Ici, nous définissons la largeur pour être égale à la largeur réelle de l'appareil et en réglant initiale - échelle toe 1.0 que l'appareil ne sera pas, - um, - il ne sera pas zoomer lorsque le site se charge initialement, - il sera le 1.0 est la taille réelle du pixel du site Web et en définissant l'échelle minimale à - 1.0 et l'échelle maximale à 1.0 qui a réellement désactivé le zoom afin que l'utilisateur ne soit pas en mesure de - zoomer ou arrière sur le site Web à nouveau, - ce qui nous permet de compter sur nos médias pour modifier la mise en page. - Il y a aussi des correctifs JavaScript différents qui aideront à rendre l'expérience de visualisation - beaucoup plus fluide. - Hum, - donc au moins au moment de l'enregistrement, - il y a des bugs avec différents appareils Apple comme iPhone um, - permettant le zoom ou changer le zoom quand vous passez de l'horizontale à la verticale ou quand vous - passer du paysage de l'orteil portrait. - Donc, si vous visualisez un site sur votre iPhone et que vous l'inclinez de la verticale à l'horizontale. - Le logiciel de l'appareil déclenche un zoom, - donc nous pouvons réellement désactiver cela en utilisant ce correctif JavaScript. - En outre, - il y a aussi un correctif de requêtes de médias pour les anciennes versions d'Internet Explorer qui ne le font pas - prend en charge les requêtes de médias. - Alors allons de l'avant et passons à l'exercice suivant et commencerons à implémenter ces médias - requêtes dans notre projet d'exercice continu. 52. Mise en place des tests locaux réactifs: - Salut. - Bienvenue de retour. - Ceci est l'exercice 4.1 Mise en page Responsive Pour commencer, - Je voudrais vous aider les gars à configurer votre ordinateur pour tester le site responsive sur - différents écrans latéraux pour différents appareils sans vraiment avoir à sortir et acheter tous - ces appareils et écrans de taille différente. - Pour ce faire, on va utiliser un outil en ligne gratuit. - Ce site Web appelé outils Cork dot com slash écran voler l'une des belles choses sur l'écran - vol nous avons contesté dans un seul endroit. - Et parce qu'il est en ligne, - il n'y a pas besoin de télécharger un logiciel spécial. - Une des belles choses à propos de la mouche d'écran est qu'il est très propre, - et vous pouvez voir en bas. - Il y a différentes icônes, - et il vous permet de basculer entre les écrans de différentes tailles, - tablettes et mobiles, - de sorte que vous pouvez ensuite prévisualiser votre site sur des écrans plus petits et plus grands. - Et il inclut même un bouton d'affichage pivoter vers le bas pour que vous puissiez tester la vue portrait par rapport vue paysage. - Maintenant, - l'une des choses que vous remarquerez quand vous venez à voler à l'écran est qu'il vous demande - collez dans l'URL du site que vous souhaitez tester et remarquez qu'ils demandent - une adresse http. - Donc, ils cherchent une adresse de site Web appropriée. - Et vous avez peut-être remarqué au cours des exercices précédents que chaque fois que nous avons ouvert nos fichiers localement sur notre ordinateur ne fonctionnaient pas réellement. - Adresse HTTP Ce que nous finissons par voir est quelque chose comme ça où l'URL commence par - fichier deux-points barre oblique, - barre oblique, puis a juste la structure du dossier au fichier sur notre ordinateur local. - Et c'est parfaitement bien pour l'aperçu de votre site Web avant de décider de le télécharger - votre serveur d'hébergement, - cependant, - vous remarquerez qu'avec écran voler si nous copions et collons ceci ici que lorsque nous allons voir - le site ce que je veux Wow, - ça ne marche pas. - Et la raison pour laquelle c'est ? - Il essaie d'aller à une adresse http ou une vraie fille sur Internet si hypothétique - vous pourriez réellement télécharger votre site. - Vous êtes site réactif, - et vous pouvez le tester ici si vous l'avez déjà en ligne. - Um, - et si vous êtes intéressé à suivre cette route après avoir regardé cette vidéo, - vous pouvez aller de l'avant et passer à la vidéo intitulée Publishing Site en utilisant FTP et que - vous apprendrez comment utiliser le fichier zilla pour télécharger vos fichiers de site sur votre serveur distant. - Et puis vous pouvez simplement coller votre nom de domaine ici, - et vous pouvez utiliser screen fly pour tester votre responsive conçu de cette façon. - Et si vous ne voulez pas que tout le monde sur Internet puisse le voir pendant que vous êtes encore - le réparer, - vous pouvez créer un dossier sur votre serveur appelé Test ou quelque chose comme ça que vous seul - savez comment y arriver. - Et tu pourrais juste faire glisser les fichiers dans leur maintenant. - Le seul inconvénient de cela est que évidemment, - à chaque fois que vous apportez un changement au CSS localement, - vous devrez l'enregistrer et ensuite téléchargé sur votre serveur pour ensuite le tester en vol d'écran. - Donc, afin d'accélérer le processus de production et de pouvoir continuer à travailler localement, - ce que je vais faire, c'est installer un serveur de test sur mon ordinateur local, - et il y a quelques options différentes pour faire cela. - Pour Mac, - vous pouvez télécharger ma'am, - qui vous donnera ah, - la possibilité d'installer un serveur de test sur votre ordinateur que vous pouvez utiliser. Et si vous êtes sur les fenêtres, vous pouvez utiliser, - euh, - Wamp ou Wamp serveur. Et si vous êtes sur les fenêtres, vous pouvez utiliser, - euh, - Donc ces deux air libres, - euh, - et je vais vous montrer comment installer ça sur Mac. - Malheureusement, - Je n'ai pas d'ordinateur Windows, - mais je peux vous dire que la façon dont cela fonctionne est que vous téléchargeriez Wamp. - Et vous devez sélectionner celui qui correspond spécifiquement à votre ordinateur. - Ils ont une version 32 bits dans une version 64 bits. - Et si vous n'êtes pas certain de savoir quels , paramètres respectent votre ordinateur, il y a un lien à l'intérieur de la zone de discussion. - Vous pouvez aller vérifier qui a quelques autres liens sites Teoh qui ont des directions. - Ou en fait, - si vous recherchez Google fenêtres, - comment vérifier si votre système est 32 ou 64 bits, - vous verrez qu'il y a un thread ah qui explique cela sur le site Web de Microsoft. - Ok, - donc fondamentalement ce que vous faites, - bien que essentiellement que vous téléchargez wham ! - Et quand vous l'installez après l'avoir installé, - il crée ce répertoire sur votre ordinateur, - dont la valeur par défaut est C, - slash deux-points wamp slash www et tous les fichiers que vous mettez dans ce dossier www vous pouvez accéder - votre en tapant la barre oblique http deux-points barre oblique locale hôte. - Donc, - par exemple, - disons hypothétiquement que vous étiez en train de créer un site Web pour une ferme de café à Hawaï. - Et peut-être que vous nommez le dossier votre dossier racine principal pour ce projet de site Web. - Vous appelez ça, - hum, - Kona Farms. - Alors ce que vous faites est que vous prendriez votre dossier de site Web, - Kona Farms, - et vous feriez glisser tout ce dossier de site Web dans le dossier W W W à l'intérieur de ce dossier Wamp -, - puis pour accéder à cela dans votre navigateur en tant que - ah, - serveur de test local, - vous tapez dans le domaine hôte local barre oblique Kona Farms pour entrer dans ce dossier. - Maintenant, - c'est très similaire sur Mac quand vous installez Madame. - Donc, - mec, - vous pouvez venir ici et vous pouvez cliquer sur le téléchargement. - Maintenant, liez ça. - Ah, - celui-là qui dit, - maintenant c'est pour la version payante, - qui est Madame pro et pour nos besoins. - C'est bien d'utiliser la version gratuite ici, - donc vous cliqueriez sur le téléchargement maintenant et vous installeriez Madame. - Maintenant, - quand vous le téléchargez et l'installez, - vous pouvez le trouver dans votre dossier d'applications et j'ai même créé un raccourci ici sur mon dock. - Pour ça comme ça, ça dit peut-être. - Et quand vous cliquez dessus quand vous l' affichez, - vous verrez ce petit écran apparaître. - Et ce qui se passe, c'est que chacune de ces lumières s'allume en vert lorsque le serveur démarre. - Si vous descendez ici aux préférences, - il y a ces différents onglets ici et le tout dernier onglet ici, - ce bouton qui dit, - Apache, - si vous allez de l'avant et cliquez que cela vous permet réellement de choisir n' sur votre - ordinateur Ah, - que vous souhaitez être le répertoire racine de votre serveur local. J' ai un dossier appelé Sites sur mon ordinateur. J' ai un dossier appelé Sites sur mon ordinateur. - Alors je viens de dire que je suis allé de l'avant et que je suis allé dans select, - et j'ai juste sélectionné mon nom d'utilisateur. - Et puis j'ai sélectionné des sites, - par exemple, - et j'ai cliqué sur ouvrir. - Et comme ça. - Maintenant, - tous les fichiers que je mets dans mon dossier Sites que je peux accéder en allant à l'hôte local dans le navigateur. - Donc une fois que vous avez configuré ça, - vous pouvez juste comme, - minimiser cela ou le cacher, - et ce que je veux faire, c'est que je voudrais trouver que les fichiers de mon site, - et je veux les déplacer dans le même que je viens de spécifier. - Donc, je ferais glisser ces fichiers dans mon cas, - dans mon dossier Sites, puis pour accéder à cela dans le navigateur. - Maintenant, nous pouvons aller dans notre navigateur par défaut et encore sur Windows. - Il suffit de taper l'hôte local Slash. - Et puis, - quel que soit le nom du dossier que vous aviez placé dans le dossier www à l'intérieur - dossier Wamp sur Mac, - c'est un peu différent. - En plus d'écrire l'hôte local, - vous devez mettre aussi le symbole deux-points et un numéro de port, - dont le numéro de port par défaut pour m'am est deux-points 8888 Et puis une fois que vous y allez, - vous pouvez trouver le dossier de votre projet de site Web. Dans mon cas, j'ai quelques dossiers ici pour y arriver, j'ai quelques dossiers ici pour y arriver, et votre site web va apparaître pour que vous le remarquiez. - La différence est qu'au lieu de prévisualiser ce fichier à partir du système de fichiers local comme celui-ci -, - en utilisant une barre oblique deux-points, - vous pouvez réellement le prévisualiser à partir de votre à partir d'un serveur de test local que vous avez juste - installé sur votre ordinateur. - Donc, ce u R L est maintenant utilisable dans la mouche de l'écran donc je peux aller de l'avant et copier cela et revenir - dans l'écran Fly et je peux coller ce gars ici sous H T p. - barre oblique du côlon va juste coller cela dedans et vous verrez que ça commence avec - hôte local maintenant à la place et nous allons cliquer sur Go et nous pouvons maintenant voir notre site et nous le contester sur - tous ces appareils de taille différente. - Cool. - Donc, la bonne chose à ce sujet est non seulement que je peux tester mon site maintenant, mais il n'y a pas besoin pour moi de le télécharger parce que cela est en train d'exécuter un serveur de test sur mon ordinateur local. - Donc, si j'amène ces fichiers dans un texte sublime que je peux éditer, - le code est que je vais le sauvegarder et je verrai les changements ici en cliquant avec le bouton droit dans le cadre - et en sélectionnant recharger le cadre. - Je serai capable de voir instantanément ceux que le site change. - Il y a une dernière option. Si vous n'êtes pas sûr de vouloir installer wham ou madame en tant que serveur de test local sur votre ordinateur. Si vous n'êtes pas sûr de vouloir installer wham ou madame en tant que serveur de test local sur votre - Au moins absolu, - ce que vous pouvez faire est que vous pouvez faire apparaître vos fichiers ici dans votre système de fichiers local, - et vous pouvez simplement faire glisser le coin du navigateur pour voir les changements. - Donc, - comme ça, - cette largeur particulière de l'écran ici vous pouvez voir les icônes sociales sont sur la droite - côté. - Mais quand il n'y a plus de place pour eux, - je l'ai mis en place dans le code terminé pour qu'ils sautent ici dans le panneau du logo. - Et comme un écran devient plus petit, - il y a d'autres changements comme celui-ci, - comme le logo devient plus petit et retourner la navigation sur le thème en dessous comme ça. C' est comme ça çaque nous avons mis en place notre environnement de test local pour construire des sorties réactives. - Allons de l'avant et passons à l'exercice de mise en page réactive. 53. Préparer le HTML pour la mise en page répond: - d'accord, - donc pour commencer, - je veux n'avais pas déjà soulevé le code source pour 4.1 de manière réactive ici dans sublime - texte. - Et j'ai également soulevé ce code ici dans le navigateur en allant à Cork tools dot com slash - écran fly, - qui est discuté dans la vidéo précédente. - Et je suis allé de l'avant et déjà lié à la copie locale sur mon serveur de test local pour - cette page Web. - Nous serons donc en mesure de tester la mise en page dans des appareils de taille différente. - Et les deux seuls fichiers que nous allons vraiment avoir besoin de travailler pour cet exercice est la - index dot html et aussi la page CSS point de styles d'appareil. - J'ai donc créé une feuille de style supplémentaire pour vous les gars dans le dossier CSS. - Donc maintenant, vous devriez avoir normalisé point CSS style point CSS CSS et cette feuille de style supplémentaire - styles de périphérique point CSS où nous allons ajouter toutes nos requêtes médias s afin que nous puissions - contrôler la façon dont le site affiche sur différents appareils de taille. - Maintenant, la toute première chose que nous voulons faire est que nous allons vouloir ajouter quelques balises ici dans - la section tête de nos pages HTML. - De cette façon, nous pouvons obtenir l'expérience de visualisation la plus fluide est possible sur tous les différents - appareils. - Donc, la première chose que nous allons faire est que nous allons aller orteil line 9 ici et nous allons ajouter la meta avec - tags afin que nous puissions définir les appareils envoyés de sorte que leurs navigateurs ne zooment pas ou ne zooment - lorsque le site se charge. - Et en empêchant le zoom. - Ensuite, nous pouvons simplement compter sur nos requêtes média pour changer la taille de la mise en page. - Donc, j'ai écrit un commentaire ici en ligne. - Neuf. - Vous pouvez juste aller de l'avant et mettre en évidence ça et nous allons créer une attaque Met. - Et à l'intérieur de la balise meta, - nous allons lui donner un nom de port de vue qui ciblera les appareils Vieux port. - Et on va mettre en place un autre attribut appelé Content. - Et ici, nous allons écrire une déclaration qui va désactivé l'appareil est en voie d'effondrement. - La première chose que nous voulons faire est que nous voulons définir avec égal à l'appareil avec, - et ensuite nous allons mettre une virgule, - et nous allons spécifier que l'échelle de tiret initiale est égale à 1.0 ou 1.0, - et puis nous allons définir le échelle de tiret minimale égale à 1,0. - Et nous allons aussi définir l'échelle de tiret maximale égale à 1,0. - Donc, cela va désactiver le zoom sur tous les différents appareils qui visualisent ce site. - Une autre chose que nous allons faire est que nous allons lier à un fichier JavaScript qui va - Teoh réparer pour que les iPhones et iPads quand nous tournons du paysage deux portrait, - il ne va pas essayer de zoomer ou zoomer maintenant. - Ah, - en fait, - Google recherche pour cela, - - ou vous pouvez aller chercher hub dot com et chercher ce code. C' est ce qu'on appelle changement d'orientation. - Répare comment tu l'as confiné ? - Non, - j'ai le, - euh vous êtes tous écrit ici, - donc je vais juste le taper, - et on va utiliser la balise de scripts comme ça - qui a une balise de script d'ouverture et de fermeture. - Et à l'intérieur de la balise de script d'ouverture, - nous allons utiliser SRC pour pointer vers l'emplacement de ce fichier javascript, - qui est à http s deux-points slash point brut Obtenir hub dot com slash w I l t o slash I os - changement d'orientation du tiret. - Assurez-vous que j'épelle que le changement d'orientation correctement le tableau de bord fixe point Js C'est en fait un - assez long, vous êtes tous là. - Ok, - vous pouvez aussi aller à cette fille et juste télécharger ce fichier javascript et le mettre dans l'un de - vos dossiers, - peut-être un dossier J, - et ensuite vous pouvez le lier localement. - Et ce sera probablement votre pari le plus sûr est d'attraper la copie actuelle de ceci - téléchargé et lien vers elle ici pour nos besoins. - Ça devrait être bien. - Juste pour le lier à partir de cette télécommande, - vous êtes tous ici. - D'accord. - Et puis, - ah, - nous voulons aussi venir ici dans la section script et nous allons ajouter un correctif pour, - um, - les anciennes versions d'Internet Explorer ici. - C'est en ligne 19. - J'ai écrit ce commentaire ici qui dit ajouter lié à CSS trois requêtes média IE correctif. - Je vais effacer ça, - et je vais tabuler ici et nous allons créer la balise de scripts pour cela. - Donc, cela va seulement Teoh être nécessaire pour les anciennes versions de IE. - Donc, il peut être à l'intérieur de mon commentaire conditionnel pour moins d'Internet Explorer neuf ici, - donc je vais créer ma balise de script d'ouverture et de fermeture là-bas et je vais créer mon attribut SRC et - je vais lier à ce fichier. - Maintenant ce fichier ici est partagé via le réseau de diffusion de contenu de Google. - Je pourrais simplement taper la barre oblique http deux-points et c'est sous C SS trois requêtes média tiret -. - Assurez-vous que nous avons orthographié ce bon point Js Excusez-moi, - C'est Dash Js requêtes médias Dash Js Et puis ce sera ah dot google code dot com slash - SV et slash tronc slash CSS trois dash commedia requêtes dot Js Wow, - c'est une bouchée là donc vous pouvez réellement aller à Google et vous pouvez simplement rechercher des médias - requêtes fix ou CSS trois requêtes média pour i E. - Et il devrait venir avec ce code ici que vous pouvez juste lié directement sur et encore -. - Cela sera commenté et la plupart des navigateurs ne dérangeront même pas le charger. - Mais si c'est une ancienne version de i e, - il verra l'instruction conditionnelle ici qui dit, - si moins que i e. - T. - T. - Neuf et alors il va réellement exécuter ce script les deux scripts ici. - Ce script haut, - si vous vous en souvenez, - est celui qui fait fonctionner les cinq balises sémantiques HTML dans Internet Explorer. - Et ce bas ici est un javascript qui fait fonctionner les requêtes média. - Oui, - nous pouvons faire fonctionner notre site web réactif dans le vieux e. - Ok, - jusqu'à présent, - si bien. - Et la dernière chose qu'on doit faire pour commencer à installer ça, c'est en ligne 16 ici. - Nous avons besoin d'un lien vers notre feuille de style pour les appareils. - Donc, nous avons déjà lié au point CSS normalisé et ici nous lions au point de style CSS. - Mais nous devons créer un lien vers la nouvelle feuille de style que j'ai créée, - qui est spécifiquement pour nos requêtes de médias à écrire à l'intérieur de donc ici va juste dire - feuille de style de relation. - Et nous allons définir l'emplacement du radeau H deux points sur ce fichier, - qui est CSS slash euh, - dispositif, - je pense, - est comment j'ai écrit ceci. - Oui, - les styles de périphérique point CSS et nous pouvons enregistrer cela. - Je suis allé de l'avant et j'ai ajouté ça à toutes les autres pages pour toi. - Donc nous venons de l'ajouter à la page d'index pour que vous puissiez voir le processus 54. Appliquer des requêtes médiatiques CSS3: - Maintenant, nous avons tout ça en place. - Nous pouvons aller de l'avant et sauter sur les styles de l'appareil point CSS, - et nous pouvons commencer à écrire notre code réactif. - Donc le premier appareil que nous aimerions considérer ici est la tablette quand elle est en paysage. - Donc, - par exemple, - l'iPad d'Apple quand il est retourné, - paysage a 10 24 pixels largeur de sorte que nous pouvons sauter sur notre navigateur et nous pouvons utiliser écran - voler pour s'assurer que cela sera correct sur cet appareil. - En ce moment, - nous voyons notre site Web sur l'écran de 15 pouces et nous pouvons sauter ici à - tablette. - Et nous pouvons sélectionner Apple iPad un et deux, - qui a le 10 24 avec la taille de l'écran. - Ok, - maintenant on le change pour l'iPad. - Vous pouvez voir que la plupart de notre site semble OK. - Pourtant, - le texte de navigation semble assez bon. - Le logo est plutôt beau, - et tout le reste va bien. - Je pense que le rappeur est un peu près du bord, mais je peux corriger ça. - Et puis vous remarquez aussi ici. - Une chose qui pourrait être problématique est que les icônes des médias sociaux ici commencent orteils - se chevauchent maintenant dans le contenu. - J'ai besoin de comprendre ce que j'aimerais faire avec ça. - Donc, il y a deux options différentes ici. - Je peux cacher la barre des médias sociaux ou choisir de la déplacer dans une autre section. - Donc, - par exemple, - je pense que ce que je vais faire ici, c'est que je vais utiliser cet espace vide ici et juste les positionner sur le dessus - du panneau de logo dans ce coin. - Alors, allons-y et revenons au code, - et nous écrirons notre première requête média pour accomplir cela. - Donc, d'abord, nous allons dire aux médias, - qui va vérifier l'appareil et prendre quelques informations. - Et nous pouvons écrire une déclaration ici qui va évaluer à true ou false si ceci - instruction de requête média évalue à true, - il utilisera le code qui est capturé à l'intérieur de la requête média. - Et si elle évalue le faux va juste ignorer ceci ou ignorer le code à l'intérieur de la requête - media. - Ok, - donc ces déclarations peuvent être assez compliquées ou assez simples, - et c'est à vous de voir comment vous le faites sophistiqué. - La première chose que nous voulons faire est que nous voulons dire seulement écran, - et cela va seulement évaluer à vrai. - Si c'est un dispositif d'écran, - d'autres choses que vous pouvez dire la vôtre. - Vous pouvez dire aux médias tout ce qui engloberait tous les appareils. - Vous pouvez aussi dire, - euh, - imprimante ou pour projection aussi. - Et dans ce cas, - nous sommes préoccupés par une tablette, - qui est un dispositif d'écran. - Donc ici dira seulement écran et puis nous allons utiliser le mot clé et afin que nous puissions continuer - la déclaration de sorte que vous pouvez utiliser le mot et autant de fois que vous le souhaitez, - et cela fera en sorte que cela évalue à vrai et tout ce qui est de l'autre côté de - le mot évaluera à vrai aussi. - Et dans notre cas, - nous voulons également nous assurer que la largeur maximale dans ce cas correspond à 10 24 pixels ou moins -. - Et puis on mettra un ensemble d'accolades et je frapperai deux fois là-bas. - Ok, - donc vous pouvez dire Min, - Dash Wits, - Max, - Dash Wits et vous pouvez vraiment mettre n'importe quelle sorte de pixel que vous aimez dans ce cas, - nous voulons nous assurer que c'est une tablette paysage de 10 24 pixels ou moins. - Ok, - donc nous avons dit aux médias Onley appareils d'écran et aussi où cet appareil d'écran n'a pas plus - qu'une largeur de 10 24 pixels. - Maintenant, - si c'est vrai et c'est vrai, - il va réellement exécuter le code ici que nous avons ici, donc nous pouvons juste commencer à écrire - code CSS normal ici. - Entre cette ouverture et fermeture accolade accolade pour cette requête multimédia, - et ce code s'exécutera lorsque cette instruction. - La déclaration complète ici est vraie maintenant. - Si l'un ou l'autre de ceci est faux, - si c'est faux, - ce n'est pas un périphérique d'écran. - Ou si c'est un périphérique d'écran et que c'est faux, - il est en fait plus grand que 10 24 pixels. - Il n'exécutera pas le code ici. - Et l'une des bonnes choses à propos des requêtes médias est que je n'ai pas à écrire tout le code CSS à nouveau parce qu'il va toujours hériter des styles que j'ai précédemment - écrits. - Donc, - par exemple, - dans la page CSS point de style, - nous avons l'image de fond du corps. - Voici la texture du papier fait à la main, - et si je ne veux pas changer cela dans la requête média que je peux simplement l'oublier. - Je n'ai pas à réécrire tout ce code à nouveau, - ce qui est merveilleux. - On n'a pas à perdre du temps, copier et coller un tas de code. - Nous avons seulement besoin d'écrire le code pour ce que nous aimerions changer quand cette condition est - vraie. - Donc dans notre cas, - nous avons eu l'impression que le rappeur était un peu trop large. - Ce que je vais faire est une technique commune qui est de changer le fixe avec rappeur, - qui est 960 pixels actuellement pour changer à un fluide avec de sorte qu'il ne sera qu'un - pourcentage de la largeur de l'appareil. - Je vais mettre le rappeur à 90 % d'accord. - Et quelques autres choses que nous voulions changer, c'est que je veux cibler la barre des médias sociaux et je - veux changer son positionnement, - qui avant était réglé sur la position fixe, - et je veux la mettre maintenant en position absolue à la place. - De cette façon, - il ne restera pas fixe en place lorsque le navigateur défile, - mais nous pouvons toujours utiliser le positionnement absolu pour le positionner en relation avec le navigateur - fenêtre et nous allons aller de l'avant et dire top 100 pixels. - Et j'ai effectivement dû jouer avec cela un peu pour qu'il apparaisse dans le droit - place et 100 pixels juste à peu près il centre et puis nous allons aller de l'avant et dire Nous voulons déplacer - il environ 5% sur le bord de l'écran. - La façon dont j'ai calculé c'était que nous avons mis le rapide et 90 donc hors de cela, - 100% est allé de la surface disponible dans l'appareil. - Nous mettons le rappeur à presser à 90, ce qui laisse disponible, - vous savez, - 10% ce qui serait 5% à droite et 5% à gauche. - Donc on va juste le régler à 5% d'émission. - Autoriser la barre d'icône sociale ligne de remorquage vers le haut à droite avec le bord de l'emballage sur le côté droit, - et nous allons réellement changer la largeur de cette chose. - Donc, avant que le avec était réglé sur 40 pixels lorsque les icônes sont empilées verticalement, - mais nous allons réellement changer tous ces liens pour afficher horizontalement ? - Non. - Donc, pour ce faire, - nous devons faire pour qu'ils s'adaptent. - En d'autres termes, - nous devons changer la largeur. - Et si je disais le avec l'auto, - il serait juste est large est il doit être là pour s'adapter à tous ces éléments. - La prochaine chose que nous voulons faire, c'est que nous voulons cibler ces liens à l'intérieur de cette barre sociale. - Nous pouvons utiliser un sélecteur descendant pour le faire, - et nous voulons les définir au lieu de bloc d'affichage. - Nous voulons les définir pour afficher dans le bloc de ligne afin qu'ils s'affichent côte à côte comme ça -. - Ok, - alors allons-y et sauvegardons ça, - et ensuite on reviendra à l'écran. - Et au lieu de rafraîchir la page ici, - hum, - ce que nous voulons faire est, - si vous allez au bord de la fenêtre du cadre ici et que vous avez raison, - cliquez. - J'utilise une souris pour faire un clic droit. - Si vous êtes sur Windows, - vous devriez simplement vous sentir à faire un clic droit. - Si vous êtes sur Mac et que vous n'avez pas deux bouches de bouton, - vous pouvez contrôler clic. - Pour que cela fonctionne ou pour faire un clic du doigt pour faire monter ce menu et à l'intérieur du menu, - il devrait y avoir quelque chose qui dit Recharger le cadre. - Et si vous cliquez dessus, - il devrait recharger la page du site là-bas. - Donc quelque chose fonctionne de l'air. - Il y a une autre chose ici cassé, - qui abordera dans un instant. - Mais vous pouvez voir que les icônes, - icônes de médias sociaux ici ils se sont déplacés de côté et afin de prévisualiser cela pour vous assurer - cela fonctionne correctement. - Si vous voulez, - vous pouvez changer d'avant en arrière. - Voici l'écran de 15 pouces. - Donc maintenant les icônes sociales air sur le côté ici, - et le rappeur est de 9 60 pixels, - et il restera à 9 60 pixels, - même si elle devient plus large. - Donc, même si nous allons jusqu'à 19 pouces ou, - vous savez 20 pouces la taille du rappeur reste maintenu 9 60 pixels, - ce qui est dicté par la feuille de style CSS point de style. - Mais alors, - quand nous descendons à une taille plus petite, - par exemple, - nous allons à la tablette iPad. - Maintenant, le rappeur est réglé sur 90% de l'écran, - et ces icônes sociales changent ici en bloc de ligne, - donc ils sont maintenant affichés horizontalement au lieu de verticalement, - et ils sont également à l'intérieur de cette barre de logo. - Ici, ils sont positionnés sur le dessus du logo, - mais panneau. - Ok, - donc une chose que vous remarquerez est quand vous réduisez à des tailles plus petites ici que le - images air, - ne pas mettre à l'échelle Donc certaines choses. - C'est problématique pour, - um, - par exemple, - cette image et sera également problématique ici pour la vidéo quand elle devient plus petite et - plus petite et aussi des choses comme les tables et les formes. - Euh, - donc ce que nous pouvons faire est une technique courante, c'est que vous voudrez définir toutes vos images et - vidéos et balises audio toutes vos formes et tables, - tout ce qui s'étend normalement sur toute la section ou tenir le cadre de la page. - Tu vas vouloir les mettre à 100 % de largeur. - Donc ils ont un esprit fluide, - et ils vont diminuer sur différents côtés des appareils de taille. - Par exemple, - si je descend à une taille vraiment petite ici, - entre autres questions, - vous pouvez voir ces images hors de l'écran en ce moment. - Donc, un moyen vraiment facile de corriger cela est d'aller dans votre feuille de style principale, - qui est la feuille de style CSS point de style ici et sous correctif cette année descendra et - nous allons voir descendra la ligne d'orteil 32 ici, - et nous allons dire images. - Ok, - vidéo. - Et si nous avions de l'audio sur notre site, - nous pourrions définir l'audio et n'importe quel cadre I et n'importe quel, - genre, - formes et tables à tous les 100% large. - J' ai déjà mis ça individuellement pour la table. - Je crois ici. - Oui, - et j'ai déjà mis ça pour le formulaire. - Normalement, j'écris tout ça. - J'ai déjà écrit ça dans le code ailleurs. - Aussi pour le cadre I. - Je le crois. , La seule chose qui reste ici, c'est les images et les vidéos. - Et je n'utilise pas de balise audio dans celui-là, donc je peux même l'enlever aussi. - Mais normalement, vous avez tous écrit comme ça. - Toutes les choses que l'air étirant votre site à travers l'écran jusqu'au bord du rappeur -. - Vous pouvez les mettre deux avec 100% comme ça. - Donc si je garde ça et qu'on revienne et qu'on se rafraîchisse ici, réessayons ça. - Donc, je vais aller au clic droit recharger la trame. - D'accord. - Et puis si nous revenons à nouveau sur les tablettes maintenant, - vous pouvez voir que l'image est seulement 100% dans ce rappeur, - donc il va diminuer pour chaque taille. - Alors maintenant, - même quand j'aime la taille de l'iPhone, - les images deviennent vraiment petites comme ça. - Mais ça ne saute pas en dehors du cadre. - Ok, - donc nous sommes allés de l'avant et nous avons abordé le style de l'iPad quand il est paysage, - et si nous tournons l'écran, - nous pouvons voir à quoi il ressemble ici quand il passe au portrait. - Je vais revenir dans ma feuille de style ici et revenir aux styles d'appareil point CSS. - Et ici, nous allons aller de l'avant et changer quelques choses sous la vue portrait pour - Tablette. - Donc vraiment, - la seule chose que je veux changer ici est que je veux rendre les liens de navigation un peu plus petits donc nous allons aller de l'avant et dire à Media Onley, - Cri et parenthèses, - Largeur maximale de tiret et nous dirons 7 68 pixels, - et nous allons utiliser nos accolades et ouvrir ça comme ça. - Nous pouvons indenter à l'intérieur d'ici et juste imbriquer quelques styles ici, - et nous allons aller de l'avant et dire Nah, - espace bar maintenant face à un ciblage tous les liens à l'intérieur de Navid Bar et va changer la police - taille pour être un peu plus petite parce que c'est une sorte de surpeuplement et de se rapprocher un peu du bord de leur. - Donc on va dire 0,8. - Donc les EMS sont fluides. - Ils sont en relation avec la taille de police précédente. - Donc, un em est égal à la taille de police actuelle et 0.8 sera légèrement plus petit. - Pointez vers plus petit. - Ok, - alors on va aller de l'avant et on reviendra et on rechargera la page ici. - Recharger le cadre. - D'accord. - Vous pouvez voir que ces gars sont devenus plus petits là-bas. - Et maintenant, il y a un peu plus d'espace. Donc si je change maintenant, si jefais pivoter l'affichage ici, vous pouvez voir la taille du texte dans le lien ici sur horizontal. Donc si je change maintenant, si je fais pivoter l'affichage ici, - Donc pour le paysage. - Et puis si on fait tourner un écran ici pour le portrait, - vous pouvez voir que ces impôts liés deviennent un peu plus petits là-bas. - Et nous avons un espace plus confortable autour du texte du lien sur les boutons. - D'accord, génial. - Donc la prochaine chose qu'on veut faire, c'est qu'on veut mettre ce gars en place pour un smartphone. Donc je veux aller dans le paysage des smartphones, ce qui serait que je tourne cette année. Donc je veux aller dans le paysage des smartphones, - C'est 480 pixels de large comme ça. - C'est un peu OK, - sauf pour le fait que je veux être en mesure de voir plus du contenu ici. - C'est bien et bon de pouvoir voir, - euh, - cette navigation ici et ce logo. - Mais ce serait bien si je pouvais voir un peu plus de cette image, - l'image d'introduction et peut-être même une partie du texte, - si possible. Donc, pour sortir ça de l'écran plus haut comme ça, je pense que ce que je vais faire c'est rétrécir un peu ça. - C'est peut-être un peu trop grand ici. - Aussi, - on devrait pouvoir Teoh, - emmener ces gars dehors pour faire de l'espace. - Et je pense qu'on va déplacer le logo aussi. - Alors j'essaierai différentes choses ici si on fait défiler ici. - C'est aussi un peu trop étroit. - Donc, si vous regardez cette structure de colonne ici, - ici, - où il est écrit des nouvelles de l'entreprise, - ça serait vraiment ennuyeux à lire, - parce qu'imaginez, - vous êtes seulement capable de lire comme deux mots, - et puis vous devez sauter à la ligne suivante. - Donc ce que je pense ici, c'est qu'on doit abandonner notre structure de colonnes multiples. - Je soupçonne que c'est encore pire sur la page du catalogue, qui a trois colonnes ici. - Donc, c'est trop étroit de la ligne. - Donc on va devoir faire, c'est qu'on va fusionner ce type à une structure de colonne - ici et mettre les colonnes à 100% de large dans ce rappeur. - Ok, - alors on va aller de l'avant et on va dire, - euh, - à l'écran et aux parenthèses seulement des médias. - Max, - Dash avec deux-points, - 480 pixels, - qui est la largeur de l'iPhone quand il est dans le paysage. - Donc je vais aller de l'avant et juste enlever l'écorce sociale ici. - Nous devons faire de la place, - donc nous dirons « livres » sociaux. - Et chaque fois que nous voulons cacher quelque chose que je peux simplement régler pour afficher aucun comme ça va - le cacher et le déplacer hors de la mise en page afin qu'il ne détruise pas vraiment le contenu. - C'est juste pour qu'il ne soit plus visible. - On peut toujours le rendre visible plus tard à n'importe quel moment on veut et on va mettre la barre de Knave - ici. - Deux positions statiques. - Ok, - donc je suis en train de retirer le fixe, - le positionnement de fixé sur la nab notre parce que sur un écran plus grand, - c'est bien d'avoir le NAB notre suivi, - mais c'est une grande, - barre épaisse, - et il prend trop de place sur un écran plus petit. - Donc, sur un écran plus petit, - quand les gens font défiler vers le bas, - je veux qu'ils puissent utiliser toute la largeur de l'écran de leurs appareils pour voir le contenu et - ne pas avoir la barre de navigation prendre autant d'espace. - Ce qu'on déplace ça en statique au lieu d'être au-dessus de ça va être en dessous - la zone du logo. - Je vais changer la frontière. - Pour être sur le dessus. - Allez-y et mettrons ce type à la limite. - Ash top pour faire la ligne visuelle entre le panneau de logo dans le knave sont ici, - donc nous allons mettre cet orteil un pixel solide C C c et puis pour tous ces liens à l'intérieur il y aura - ajouter quelques tapotements ci-dessus et ci-dessous fera un peu moins donc je pense cela avait un - rembourrage de, - comme, - 22 pixels ou quelque chose comme ça avant. - Et je vais définir le rembourrage au-dessus de ces liens pour être seulement 10 pixels, - ce qui rendra cela plus étroit. - Ici, - nous allons dire, - rembourrage 10 pixels haut et bas zéro à gauche et à droite. - D'accord. - Et puis le logo ici, - c'est le panneau du logo qui se souvient, - devant les panneaux du logo un peu trop haut ici. - Et ça avait, - euh, - genre, - 80 pixels de rembourrage pour qu'il apparaisse en dessous de la pince fixe, nous allons enlever beaucoup de cet espace là, donc nous allons aller de l'avant et dire le rembourrage du logo et nous dirons, - zéro sur le haut Maintenant pour le logo et zéro sur la gauche et la droite. - Et 10 pixels juste en bas. - D'accord. - Et descendra ici à Ah, - le H un et H 2 pour le logo vont de l'avant et économiser des kilos. - Logo espace H une virgule, - livre logo espace Âge à retenir. - C'est là qu'il est écrit les chaussures H W dans le logo. - Et nous allons changer la marge en haut ici pour être plus petit, dira, - Eh bien, - en fait, - utiliser la marge de saut haut et changera ça à 10 pixels comme ça. - Ok, - et voyons votre pour le pour pour le H lui-même. - On va ajuster un peu de rembourrage sur ce type, on dira tapoter zéro sur le dessus. - Vous êtes sur la droite est zéro en bas et 30 pixels de tapotement sur le côté gauche Push it - dans un peu. - Et pour l'image, - la petite image de la couronne On va changer ça pour être sur le côté en disant l'arrière-plan - la position du tableau de bord zéro horizontalement et négative. - Cinq pixels verticalement. - Donc ce qu'on fait ici, c'est qu'on prend la petite couronne. - Ah, - c'était au-dessus des chaussures Z H W. - Une partie du logo qui était le patron M, - petite grande couronne, - et on la déplace du haut vers le côté. - J'ai ajouté un rembourrage supplémentaire sur le côté. - 30 pixels avec pour cette couronne, - Um, - et je l'ai déplacé le positionnement de fond pour être zéro horizontalement, - qui est sur le côté gauche et négatif de cinq pixels, - le déplaçant un petit peu vers le haut verticalement pour aligner avec le lettrage. - Et ça devrait avoir l'air assez bien, - Donc ça devrait prendre soin du logo. - L'autre chose que nous voulons faire, c'est que nous voulons mettre la colonne. - J'ai toutes ces colonnes. - Des styles comme la colonne une à gauche viennent une colonne, - une colonne médiane, - une droite et une colonne à gauche et Colin pour écrire ces air tous ceux qui flottaient - auparavant et nous pouvons sélectionner toutes ces classes. - Et on peut utiliser une virgule pour les regrouper tous ensemble. - Et on peut leur dire d'être prêts à flotter Aucun. - Donc, au lieu de flotter à gauche ou à droite, - mais ils flottent avant de créer cette structure de colonne côte à côte. - On va le changer pour ne pas flotter. - Et nous voulons aussi qu'ils prennent toute la largeur du rappeur maintenant, - Donc nous allons les changer pour avoir une largeur de 100% comme ça. - Et nous voulons déplacer l'enlever la marge de tous les côtés, - sauf pour le fond comme ça. - Ok, - on va aller de l'avant et sauver ça. - D'accord. - Et puis, - euh, - en bas de la page de détails les trois autres bas de la section de détails - ici. - Vous pouvez voir que ces gars ne sont plus adaptés côte à côte. Ces air ne seront pas l'un au-dessus de l'autre, mais nous n'aurons pas besoin de la petite , ligne ici, qui s'appelle Border right. - Nous avons ajouté une classe appelée bordure droite dans l'exercice précédent pour faire cette petite ligne pointillée ici. - Donc je veux vraiment enlever ça. - Donc, nous allons revenir dans le manteau et sélectionnerons ce style, - qui s'appelle Border Underscore. - Right est le nom de cette classe, - et nous allons mettre le tiret de bordure à droite pour être maintenant réglé à zéro pour l'éteindre. Ça devrait être tout ce qu'on doit faire. - C'était en fait beaucoup changer du bureau à la tablette. - Il n'y a pas eu beaucoup de changements. Mais quand on passe aux 480 pixels, on a perdu beaucoup d'espace. Mais quand on passe aux 480 pixels, - J'ai dû changer beaucoup de choses ici, comme vous pouvez le voir. - Revenons et on réessayera ça. - On va recharger le cadre. - Cool. - Maintenant, nous n'avons qu'une seule colonne. - Donc maintenant, - comme les marques et les archives de chaussures, - et ce sont les différentes sections du catalogue femmes hommes, etc. - Ces gars-là sont tous une colonne. - Ah, - Je déplace la navigation vers le bas et j'ai remarqué que la navigation n'est plus fixe. - Donc quand on fait défiler l'écran, on n'a pas à s'inquiéter de la navigation sur le dessus des choses et de prendre de l'espace. - Il y a plus d'espace maintenant pour voir les photos et lire le texte. - Ok, - donc ça a l'air plutôt bien. Et vous pouvez voir qu'on déplace le logo, puis sur le côté. - Et ce qui va faire, c'est qu'on va changer la taille de la taxe sur le logo. - Laisse-moi y aller et revenir ici. Et maintenant que je regarde ça, je pense que ça pourrait avoir l'air bien si on mettait ce gars aussi. - Un m comme ça et sauver. - Et on y va. - Alors j'ai dit, - ce gars plus petit. - Ça a l'air un peu mieux là-bas. Bon, maintenant nous avons un petit logo, un panneau de logo plus étroit parce que le texte est plus petit. - On a déplacé une petite couronne sur le côté. - Nous avons réduit la taxe à l'intérieur du lien et rendu cette zone plus mince. - Dès que vous verrez le site. - Vous pouvez déjà commencer à voir certaines des images et des choses ici et peut commencer à faire défiler - vers le bas et vérifier le contenu. - Ok, - cool. - Et maintenant, les nouvelles de l'entreprise s'étirent le plein avec parce que toutes mes colonnes ne sont plus - flottantes. - Ils sont chacun là, - chaque 100% avec et créer une structure de colonne unique comme ça et même avec les trois - panneaux en bas. - Maintenant, ces air sont tous verticalement au lieu d'horizontalement. - Ok, - c'est cool. - D'accord. La dernière chose à faire est de vérifier la vue portrait pour qu'on fasse pivoter l'affichage. - Et vous pouvez voir ici que la seule chose qui soit vraiment c'est que ça va. - Pourtant, - le texte est encore lisible ici comme une seule colonne. - La seule chose qui soit peut être problématique. - Voici ce texte à l'intérieur de cette barre de navigation. - Je pourrais rendre le texte plus petit, - mais à distance, - quand vous tenez ce truc sans lien de dépendance, - ce serait un peu trop petit. Et quand ces , boîtes deviennent si petites, si vous avez un gros doigt comme moi, c'est un peu dur, cliquez sur ces liens quand ils deviennent ça minuscule et proche ensemble -. - Concentrez-vous principalement sur ce talent ici pour la taille du portrait. - Donc, nous reviendrons dans le code ici et nous allons faire défiler vers le bas jusqu'à Smartphone Portrait - et nous dirons à l'écran seulement et où le maximum d'intelligence est 320 pixels comme ça. Et si on entre ici, je vais faire du rappeur un peu nulle part. - C' était 90% et je veux un peu d'espace si j'ai besoin de barres de défilement ou quelque chose comme ça . - Donc on va changer ce type à 80 % au lieu de 90 % Rasage de l'espace - là et on va dire, pas de barre. - D'accord. - Et pour la NABF sont là, - on va changer la largeur de ce type pour être à 100% de l'écran. - Il va définir la bordure sur le dessus 20 pour l'enlever, - et nous allons définir la bordure sur le fond pour être solide d'un pixel. - Tu vois ? - Tu vois ? - Tu vois comme cette incarcération. - Définissez ça sur des textos. - Un centre de ligne. - Donc, il centrera l'élément de clave à l'intérieur de celui-ci. - Et on changera aussi les antécédents de ce type. - On va juste mettre ce type à l'arrière-plan blanc comme ça, - Et puis la barre jamais elle-même a un rappeur à l'intérieur. - Et je veux m'assurer que ça augmente à 100%. - Donc je peux changer ça en disant maintenant rappeur à points interdits, - Je vais mettre ce gars pour avoir une largeur de 100% comme ça et affaiblir le style de la seringue à l'intérieur - de lui dire nab notre espace maintenant et nous allons mettre ce gars à avoir normalement une bordure sur - il, - et nous voulons mettre que ce soit là. - Nous ne voulons plus de bordure sur le côté gauche des noeuds, - et ensuite nous pouvons nous concentrer sur les liens à l'intérieur de là. - Et ces gars s'affichaient dans le bloc de ligne, donc ils étaient côte à côte. - Qu'est-ce qui doit être vertical maintenant ? - Alors je vais les régler pour afficher le bloc, - Et nous allons également définir ces gars pour avoir un avec de 100% par rapport à l'un ou l'autre précédent avec et nous allons - changer la taille de police ici pour être un peu plus grand, - parce que quand vous tenez cela à bout de bras, - um, - le texte peut être un peu difficile à lire, - et la taxe de navigation devrait certainement être assez grande pour lire pour savoir où vous allez - sur le site. - Alors on va piéger ce type Teoh. - On va avoir un tableau de bord, non ? - On va mettre ça à zéro. - Nous voulons enlever la bordure du côté droit, - et nous la changerons à la place pour être bordé en cendres, - de sorte que chaque lien aura une bordure au-dessus. - Et on va mettre ça à un coup de pied un peu solide livre C c c comme ça. - D'accord, - sauvegardons ça et on verra à quoi ça ressemble. - Et on décidera s'il y a autre chose qu'on veut changer. - Alors je reviendrai ici. - Tout droit, - cliquez sur le bord du cadre et cliquez sur recharger le cadre. - Cool. - Les logos ne sont pas alignés, - cependant. - On doit y retourner et réparer ça. - Reviens ici et on va aller de l'avant et choisir le logo ici comme baiser. - Et je suis comme le texte de l'état du tiret aligner le centre pour placer ce logo au centre, - comme tous les liens de navigation. - Cool va sauver ça et nous allons recharger. - Cadre ici. - Cadre obscure. - Cool. - Alors maintenant mon logo est centré. - Ma navigation. - Elle est centrée. - Quoi ? - Je fais défiler vers le bas. - Ils ont disparu. - Je vois tout ça. - Ok, - c'est plutôt cool. - Et allons à la page de vente. - Assurez-vous que ces gars ont l'air bien. - C'est toujours bon de tester toutes vos pages. - Assurez-vous que votre contenu s'affiche correctement. - D'accord. - Ok, - voici la carte Google, - et voici notre formulaire, - d'accord ? - Et tout ça a l'air bien. Donc, si je vais ici, le tableau des prix, on dirait que c'est problématique ici. - Tout ça ne va pas s'adapter. Donc, si j'ai écrit le à l'écran, ça va bien ici quand on dirait qu'il y a juste assez de place ici quand il est dans - vue paysage, - 480 pixels de large. - Mais quand on descend à l'iPhone horizontalement, - il semble qu'il n'y ait pas assez de place, - donc je devrais soit rendre le texte plus petit à l'intérieur de ce tableau, soit cacher certaines des colonnes. - Je pense que si je fais le texte et votre plus petit ici, ça ne sera pas très visible de loin. Donc, disons que la seule chose qui nous préoccupait vraiment, c'est comme le nom de la marque dans le prix et sur un appareil mobile. - Certaines de ces informations que nous pouvons laisser passer. - Donc ce que je vais faire, c'est que je vais créer un cours spécifiquement pour ça. Je vais venir ici et créer un cours appelé Heitor comme ça. - Et allons de l'avant et ajoutons ce gars pour dire, - afficher le côlon zéro. Donc tout ce que nous appliquons , une classe d'hydroélectricité va être réglée pour n'en afficher aucune quand elle est inférieure à cette taille spécifique , accord ? - Et nous voulons aussi sélectionner les en-têtes de table et les divisions de table, toutes ces petites cellules de la table, et nous voulons leur donner moins de rembourrage. - Je pense qu'ils avaient 10 pixels de rembourrage avant. - On va les rapprocher un peu. - Et nous allons aussi rendre la taille de la police légèrement plus petite. - Aller taille de police 0,9 m comme ça va aller de l'avant et sauver, - et nous voulons avoir à aller et puis nous allons devoir aller dans la page html point de prix - et ajouté la classe sur chacun de ces gars. - J'ai déjà fait ça pour toi. - Mais vous pouvez voir ça. - J'ai décidé que je voulais que le prix de Brandon apparaisse. Mais quand on se remettra à l'impôt, j'ai ajouté une classe de Haider sur les impôts, et nous avons en stock. - J'ai ajouté la classe de Haider pour le cacher et sous l'idée de commande, - J'ai ajouté une classe de Haider. Quand cette page se charge sur un écran plus grand que 320 pixels de large, comme n'importe quel autre type de tablette ou de bureau ou même un iPhone quand il est horizontal, iln'y a pas de spécifications pour la classe de Haider. comme n'importe quel autre type de tablette ou de bureau ou même un iPhone quand il est horizontal, il - Donc, il ne va rien faire, - cependant, - basé sur cette requête média quand il est sous une largeur de 3 20 pixels, - alors tout d'un coup la classe de Haider a un style spécifié pour lui. - Alors ça va montrer aucun et cacher ces gars. - Faisons un test et voyons comment ça marche. - Alors bien, - allez-y et sauvegardez ça ici, - et je vais y aller et revenir dans le navigateur et on fera un rafraîchissement ici. - C'est un cadre de rechargement. - Cool. - Donc maintenant, cette table, - euh, - a juste la marque dans le prix, - qui correspond. - Et nous avons rendu le texte un peu plus petit, - mais pas trop petit. - Donc c'est toujours lisible là-bas. - Ok, - c'est à propos de ça. - Pour le savoir, un dernier test. - Je passe toujours par chacun des différents appareils pour que vous puissiez descendre et vous pouvez dire, - Oh, - c' est ce que mon site Web ressemble à cet écran de taille, - et c'est à ça qu'il ressemble sur cet écran de taille. - Et c'est à ça que ça ressemble sur cet écran de taille. - Donc ici vous avez l'horizontale, - la verticale, - et c'est une bonne idée de tester cela sur toutes les différentes pages. - Vous voulez vérifier vos cartes et vos formulaires et vous assurer que toutes ces choses sont affichées correctement sur tous les appareils de taille différente. - Donc, c'est en fait assez de temps. - Vous allez et venez et vous modifierez les petits changements dans vos requêtes média. - Une dernière chose qu'on va faire, c'est d'en installer un pour les médias. - Donc, si vous dites un écran d'impression de fichier dans votre navigateur, - nous pouvons aller de l'avant et dire étoile pour tout sélectionner, - et nous pouvons définir la couleur de tout en noir. - Hum, - maintenant pour remplacer, - vous savez, - Star est en fait ah, - un sélecteur assez faible. - Il est facile d'avoir plus d'autorité que de commencer à le remplacer. - Donc, ce que vous pouvez faire pour être du côté sûr, c'est que vous pouvez utiliser un sélecteur de composé. - Vous pouvez mettre des virgules, - et nous pouvons spécifier Eh bien, - je veux dire - et nous pouvons spécifier Eh bien, - je veux dire, - aussi chacun h deux, - chaque trois chaque quatre H cinq h six. - Tous mes éléments de texte essentiellement tous les paragraphes, - tous les liens. - Tous les autres textes qui sont à l'intérieur des sections flottantes dans Div. - Z ou à l'intérieur des tables auront tous la couleur noire. - Cela permettra d'économiser la coupe d'encre de votre imprimante pour que nous puissions économiser. - Et si nous revenons ici à Chrome, - par exemple, - disons que c'est le site que je veux imprimer ici. - Vous remarquerez que ce plus grand lien de carte ici est bleu sous mon Google. - Maintenant, - maintenant, - si je vais imprimer le fichier quand l'aperçu arrive ici, - vous remarquerez que ça a changé en texte noir. - Ce type est tout noir et blanc maintenant. - Excellent. - Ok, - donc c'est tout pour créer des sorties réactives. - Donc, ensuite, vous allez vouloir passer au défi de code, - et vous allez créer vos propres styles d'appareil que CSS et vous pouvez créer votre propre - requêtes de médias pour changer certains aspects de votre site en fonction de la taille de l'appareil. 55. Ajouter un script PHP Mailer: - Salut. - Bienvenue de retour. - C'est le code final du site Z H W Shoes. - Dans ce code, - je vais remplir le formulaire de contact et utiliser un peu de code PHP fourni qui va - en fait soumettre les informations dans le formulaire à votre adresse e-mail. - Alors j'aimerais vous montrer comment j'ai ajouté cela dans le site et aussi vous apprendre comment vous pouvez - le mettre à jour pour le faire fonctionner sur votre propre site. - Alors d'abord, je vais parler du site lui-même juste pour qu'on puisse voir ce que j'ai ajouté. - Donc c'est la page du formulaire de contact, - et toutes ces premières entrées de formulaire ici en haut existaient déjà là, - comme vous le savez, - mais j'ai ajouté une entrée supplémentaire ici et aussi cette image de vérification ici qui est - généré afin que vous puissiez voir si je rafraîchis la page chaque fois que je rafraîchis la page. - Ce nombre change ici comme ça. - Plutôt cool, hein ? - Donc, nous utilisons PHP pour générer cette image. - Hum, - et pour voir tous les fichiers qui ont ce code PHP en eux, - ce que j'ai dû faire, c'était que j'ai dû mettre en place mon serveur de test local. - Dans ce cas, - parmi Max j'ai évoqué Man Pierre, - Euh, - et madame n'est pas seulement dans le serveur Apache sur votre ordinateur local. - Il inclut également PHP dans ma suite afin que vous puissiez l'utiliser pour d'autres choses aussi bien. - Nous avons donc ajouté cette entrée de vérification afin que nous puissions nous assurer que nous ne recevons pas de spam - notre boîte e-mail. - Ce sera de vrais êtres humains, - pas des applications Web qui sont là-bas causant des ravages, - envoyer des emails que les gens toutes sortes de courrier indésirable. - On veut éviter ce courrier indésirable. - Donc nous allons nous assurer que les gens sont en fait des êtres humains en tapant ce code qui est - généré ici. - Donc juste pour vous montrer que cela fonctionne, - J'ai effectivement téléchargé ceci sur mon serveur et vous devrez réellement télécharger ceci. - Vous pouvez Fondamentalement, - vous pouvez prévisualiser les fichiers et vous pouvez même tester comme la génération d'image aléatoire ici - via votre serveur de test local. - Mais vous aurez besoin de la possibilité de vous connecter à un serveur de messagerie, - que vous hébergez. - La société fournira pour que ce soit réellement envoyer ou envoyer l'e-mail, - donc vous devrez télécharger ce premier pour réellement le faire fonctionner. - J'ai déjà téléchargé ça et on va le tester. - Je vais taper le nom de Bob, - et ensuite on va aller de l'avant et taper son email. - Ce qui dira, - Bob est à Bob Dot Com ? - Je m'excuse si c'est l'adresse e-mail de quelqu'un. - J'ai inventé ça. - Je suis désolé, Bob. Et le téléphone est facultatif, donc je ne mets pas de numéro de téléphone là, et on laissera un message. Et le téléphone est facultatif, donc je ne mets pas de numéro de téléphone là, Je te dirai je ne t'ai pas vue depuis si longtemps. - Oups. - Et puis nous devons vérifier que nous sommes humains. - Ok, - donc maintenant, - si vous mettez ce numéro incorrectement comme ça, - ça vous amène à un message d'erreur très basique qui dit que le message n'est pas envoyé. - Veuillez revenir en arrière et remplir les champs requis. - On pourrait rendre ça plus agréable. - Peut-être que c'est quelque chose que je vais ajouter est une mise à jour future. - Normalement, - si je construisais ceci pour un client, - j'utiliserais javascript pour valider cela. - Et puis j'imprimerais un message. Probablement ici, ça dit que ce n'est pas correct. - Ou peut-être à un contour rouge autour de la forme et de mettre quelque chose comme ça, - ce qui serait un peu plus élégant. - Mais pour l'instant, - je voulais juste faire que c'est simple que possible et je m'en tiens à HTML CSS et PHP. - Donc on a ce vrai message générique. - Mais en gros, vous pourriez ajouter le Vous savez, - ça pourrait être une amélioration. - Vous pouvez l'ajouter. - Peut-être à une date ultérieure. - Je vais revenir et améliorer ça un peu, - mais ça va répondre à nos besoins pour le moment. Alors, s'ils mettent correctement l' , je image de vérification mettrai les bons chiffres cette fois comme ça. - Et puis si nous cliquons, - envoyer cool, - il nous amène à cette page, - qui est une page appelée Contact Underscore succès point html. - Et j'ai créé cette page simplement en dupliquant la page de contact, puis évidemment en supprimant - le formulaire et en mettant simplement dans cette image de fond d'un pouce juste là. - Donc si nous revenons à mon email, nous pouvons vérifier si cela est apparu, et là vous pouvez voir qu'il existe déjà là. - Donc c'était assez rapide, - juste dans le temps qu'il m'a fallu pour en parler ou expliquer que nous allons vérifier était - en fait assez de temps pour que le serveur de messagerie l'envoie à ma boîte e-mail. - Donc, cela ne devrait vraiment prendre que quelques minutes pour qu'il apparaisse, - selon vos fournisseurs d'hébergement. - Serveur de messagerie Comment il est sauvegardé. - Ça pourrait prendre plus de temps. Je n'ai jamais vu ça prendre plus de 10 minutes pour arriver. Si je vais cliquer sur ce message, je peux te montrer à quoi ça ressemble. Ça me dit les messages de Bob à Bob Dot Com, et on voit ici le nom de Bob et l'email de Bob, et je n'ai rien mis pour un numéro de téléphone. - Mais si j'avais mis ce numéro de téléphone, il apparaîtrait ici. - Et puis on verra le message. - Je ne t'ai pas vu depuis si longtemps, donc tu peux voir que ça a l'air bien là-bas. - D'accord, - pour que les gars travaillent, - c'est plutôt génial. - Si les gens veulent revenir au formulaire, - s'ils voulaient envoyer un autre message, - ils peuvent cliquer à nouveau sur le lien de contact, - et ils y retourneront. - Ok, - alors allons entrer dans le minutieux de la façon dont j'ai ajouté ceci ici et comment j'ai construit ce gars et - l'a fait fonctionner, - et ensuite aussi vous montrer comment vous pouvez modifier le code pour le faire fonctionner pour votre adresse e-mail - au lieu du mien. - Allons-y et passons au code, et la première chose que j'ai faite était quand je construisais. - J'ai ajouté deux fichiers supplémentaires. - L'un d'eux est appelé mailer dot PHP, - et l'autre est appelé Verification image dot PHP. - Vous pouvez les voir tous les deux ici. - Voici Mailer et voici l'image de vérification de l'image. - Si nous cliquons dessus, - Je mets un commentaire en haut ici qui dit, - Pas besoin de toucher ce code Donc vous n'avez vraiment même pas à toucher l'image de vérification Si vous - incluez simplement avec vos autres fichiers de site, - vous sera en mesure de le lier et de le faire faire faire son truc. - Donc, c'est tout le code PHP, - et nous ne allons pas discuter PHP dans ces classes strictement HTML et CSS. - Il n'y a pas besoin d'entrer dans les détails à ce sujet. - Mais ce qu'il fait, c'est qu'il génère un nombre aléatoire Hum, et c'est aussi le mettre sur. - Il génère aussi des pixels aléatoires sur une grille. - Et puis il convertit ça en image. - Il construit en fait un fichier image à partir de cela, - ce qui est assez incroyable. - Et il y a environ 29 lignes de code. - PHP est donc capable de générer une image aléatoire de nombres et de points comme ça. - Hum, - juste en 29 lignes de code, - ce qui n'est pas trop mal. - Ok, - Et puis l'autre fichier que j'ai créé ici s'appelle mailer dot PHP. - Hum, - et la façon dont ça marche est à nouveau, - J'ai mis un commentaire en ligne. - 14. - Pas besoin de toucher le code en dessous de cette ligne, - donc vous n'avez vraiment pas à jouer avec le code en dessous de la ligne 14. - En fait, - vous ne voulez probablement pas jouer avec, - Euh, - mais vraiment, - ce qui se passe ici, c'est essentiellement prendre l'entrée qui a été posté quand vous avez cliqué - le bouton Soumettre sur le forme, - et il prend cette information, - et il l'envoie chez un homme. - Il est en fait envoyé, - en utilisant le serveur de messagerie de votre hôte à l'adresse e-mail spécifique que vous spécifiez. - C'est là que vous spécifiez à quelle adresse e-mail vous vouliez envoyer, - hum juste pour, - vous savez, - créer un espace réservé. - Je t'ai écrit sur ton site dot com, - et évidemment tu devras venir ici et changer ça. - N'utilisez pas mon adresse e-mail. - Je ne veux pas recevoir un tas de mails de tous les gars. - Je serais triste si je recevais des centaines d'e-mails de test. - C'est pour ça que je change ce type pour toi sur ton site dot com. - Et c'est en ligne. - Neuf pour l'envoi à la variable. - Ok, - L'autre chose que vous pourriez vouloir définir est la variable sujet, - qui est en ligne 12 année. Dans cette série de citations, vouspourriez vouloir changer ceci pour dire quel que soit votre site. Dans cette série de citations, vous - Donc, de ce côté, - je mets des chaussures CHW, - formulaire de contact soumission, - et c'est ce qui apparaîtra comme l'objet de l'e-mail qui est envoyé. - Et c'est vraiment tout ce que vous avez vraiment besoin de préparer. - C'est l'adresse e-mail à laquelle il va et le sujet de l'e-mail. - Quand vous tapez ça, - vous voulez garder ces petites guillemets. - Hum, - là vous voulez taper entre ces guillemets, - la petite citation jaune, - les guillemets simples que vous voyez ici à gauche et à droite, - C'est tout à fait essentiel pour que ça marche. - Donc ça va se casser si tu les enlèves. - Donc encore une fois pour le sujet, - vous voulez taper Lee ici entre ces guillemets, - et puis vous allez enregistrer à nouveau le fichier et vous devriez être prêt à partir. - Donc, - en plus d'ajouter le mailer et l'image de vérification point PHP, - J'ai également changé l'extension de fichier sur la page de contact. - Auparavant, - cela était appelé point de contact html et j'ai dû changer cela pour contacter PHP point parce que je suis - en train de choisir d'utiliser un petit extrait de PHP ici pour obtenir la vérification - image toe travail. - Donc je peux vous montrer ce code si on fait défiler jusqu'au formulaire ici et je pense que je vais mettre ça - gars deux enveloppements de mots qu'on peut voir tout le code qui doit faire défiler la stéréo. Donc toutes ces entrées étaient là avant que ce type soit nouveau. - Ça s'appelle. - C'est un type d'entrée de texte avec le nom de vérifié et dans l'espace réservé. - Je viens de mettre vérifier votre humain. J' ai aussi ajouté une classe de boîte de vérification à ça, et je l'ai un peu stylée. J' ai aussi ajouté une classe de boîte de vérification à ça, - Je lui ai donné une largeur. - Si vous voulez vérifier cela, - vous pouvez sauter à la page CSS point de style ici et vous pouvez trouver ça, - um, - qui est juste ici. - Nous sommes là, - en ligne 1 19 Il s'appelle les boîtes de vérification des points d'entrée. - La classe que j'ai ajoutée, - Hum et j'ai dit, - ce gars à afficher dans le bloc de ligne pour qu'il puisse être côte à côte avec cette entrée de formulaire. Et je lui donne une largeur de 80% pour faire de la place pour l'image de vérification réelle sur lecôté - et ensuite l'image de vérification elle-même. Et je lui donne une largeur de 80% pour faire de la place pour l'image de vérification réelle sur le - J'ai ajouté un petit peu de code pour ici. - Je lui ai donné une largeur et une hauteur et je l'ai dit à une ligne vers le bas. - Ok, - c'est vraiment à propos, - pour le style. - Et puis la seule autre chose est cette balise d'image ici pour l'image de vérification - elle-même. - Um, - et ce que nous faisons ici est, - au lieu de lier à un fichier image typique comme mon image que J peg ou ce que vous avez - nous faisons est en fait nous sommes en train de lier au fichier PHP de point d'image de vérification ici, - et nous envoyons aussi un nombre de génération aléatoire pour cela, - hum, - et cela lui permettra de faire son truc et de générer un nombre pour vous. - Ok, - donc ce sont les deux seules choses que j'ai ajoutées au formulaire, c'est la boîte de saisie dans la vérification - image. - Et c'est en utilisant ce fichier ici vérification image point PHP. - D'accord. - Et puis en outre, - nous changeons également l'action ici de la forme. - Rappelez-vous, - avant l' de forme, actionde forme, - je pense que c'était un espace réservé, - je pense que je viens de mettre comme un symbole de livre ici précédemment et maintenant je l'ai changé en - pointe en fait vers le fichier PHP point mailer. - De cette façon, - après que l'utilisateur a tapé son nom son email dans son numéro de téléphone et un message - et un tapé dans l'image de vérification, - ils vont cliquer sur le bouton soumettre sur le formulaire, - qui est en bas. - Et quand ils cliquent sur le bouton Envoyer, - il va utiliser cette action pour savoir où envoyer les informations qu'ils ont saisies. - Donc ils ont tapé leur nom, - leur email, - leur téléphone dans leur message et l'image de vérification Et tout est envoyé à ce - fichier mailer point PHP, - qui est juste ici. - Et ceci est, - bien sûr, - le fichier que nous venons de discuter juste où vous avez mis dans l'adresse e-mail pour envoyer ceci - à et le sujet. - Et il recueillera toutes ces informations et les soumettra. - Il est dit, - si le ah s'il vérifie que, - um, - que l'image de vérification vérifie là-bas, - il va l'envoyer et ensuite il va Teoh, - changer l'emplacement, - envoyer l'utilisateur à la réussite de contact cette page html. - Ok, - sinon, - s'il ne vérifie pas qu'il va envoyer le message d'erreur que je vous ai montré avant. D' accord, donc c'est plutôt cool. , Donc ce type travaille, et c'est tout ce que vous avez à faire, c'est que si vous voulez implémenter ça dans votre site, vous devrez faire les changements que je viens de mentionner ici. - Vous devrez ajouter le code de l'image de la boîte de vérification d'ici à ici. - Um, - de l'entrée, - vérifier jusqu'à la fin de l'image de vérification. - Vous devez changer l'action 2.2 mailer. - Et bien sûr, - vous devrez inclure le point d'image de vérification PHP et le script PHP de point de mailer dans - afin qu'il fonctionne, - Um, - et ensuite vous voudriez créer votre propre page de succès de contact. - Essentiellement, - Um, - voyons quelques choses à je suppose que quelques autres choses à mentionner qui est important est que je l'ai fait - changer le nom de cette page pour contacter ce PHP, - comme je l'ai mentionné précédemment. - Hum, - et encore, - c'était parce que j'ai utilisé un peu de script PHP juste ici à l'intérieur de la page. - Et j'ai besoin d'utiliser cette extension de fichier pour que ce script fonctionne ici. Quand j'ai changé de nom, j'ai dû aller à lanavigation pour toutes les pages et mettre à jour ça parce que tu te souviens, en ligne 50. Quand j'ai changé de nom, j'ai dû aller à la j'ai dû aller à lanavigation pour toutes les pages et mettre à jour ça parce que tu te souviens, en ligne 50. navigation pour toutes les pages et mettre à jour ça parce que tu te souviens, , - Ici, nous avons les liens pour naviguer entre toutes les pages. - Et voici le lien de contact. - Et avant cela disait, - point de contact html sur toutes les pages. - Et depuis que j'ai changé l'extension de fichier, - J'ai dû revenir à travers chaque page et la changer pour contacter point PHP. - Mais c'est vraiment tout ce que tu as à faire. - Et vous devriez avoir cette jolie petite boîte de vérification et être en mesure de soumettre un email - et faire en sorte que ce gars arrive dans votre boîte ici. - Donc c'est plutôt cool. - Um, - c'est tout. - J'espère que vous vous êtes amusés à construire ce projet. - Prends soin de toi. - Que Dieu bénisse. 56. Réaliser, systèmes de grille et modèles: - Je suis de retour. - Ce sont des diapositives 4.2 systèmes de grille et modèles Nous allons discuter des réinitialisations CSS et - normaliser les scripts vont également parler des modèles de systèmes de grille CSS et HTML cinq - frameworks. - D'abord, - parlons d'une réinitialisation CSS. - Donc souvent, - quand vous construisez vos propres sites Web, - vous allez vouloir sortir et télécharger une réinitialisation CSS. - Nous avons en fait utilisé un que je vous ai donné, - ou plutôt, - une version d'une réinitialisation appelée Normalized, - qui discutera un peu plus dans un instant mais essentiellement une réinitialisation CSS. - Ce qu'il fait, c'est qu'il va supprimer tout le style de navigateur par défaut eso que vous avez peut-être - remarqué avant que nous apprenions CSS dans le premier module, - vous les gars utilisiez juste du HTML pour écrire du contenu. - Pour une raison quelconque, - tout ce contenu avait déjà un style inhérent, - et c'est parce que chaque navigateur déterminait quel devrait être le style de ce texte, - quelle taille il devrait être, - quelle couleur il était dans ce face de police qu'il utilisait. - Maintenant, ils sont des différences subtiles de navigateur à navigateur et une réinitialisation CSS est un moyen que nous pouvons - obtenir des styles cohérents à travers tous les navigateurs en supprimant d'abord tout le style du navigateur -. - Et puis vous pouvez revenir en arrière et ajouter votre propre style CSS. - Donc, chaque fois que nous utilisons une réinitialisation, - ce que nous allons faire est que nous allons d'abord lier au fichier de réinitialisation CSS, - puis nous allons lier à notre propre feuille de style personnalisée afin d'ajouter du style à - notre site Web. - Voici quelques exemples de réinitialisations CSS populaires. - Donc, si vous allez dans un moteur de recherche en ligne et que vous recherchez l'un de ces titres, - alors vous serez en mesure de trouver le code que vous pouvez aller de l'avant et télécharger et utiliser pour votre - réinitialisation CSS. - Eso Myers est, - ah, - une réinitialisation commune. - Ça s'appelle Myers Reset. - Un autre que les gens utilisent est appelé peut. - Il y en a aussi un qui s'appelle Pourquoi toi moi et il y en a un autre. - Je vais vous montrer que certaines personnes appellent la réinitialisation du pauvre homme, - que vous pouvez simplement écrire vous-même pour réinitialiser les styles dans votre navigateur. - Ceci est un exemple de réinitialisation du pauvre homme, - que vous pouvez simplement écrire vous-même en haut de votre feuille de style si vous choisissez, - Donc ce serait une alternative à la place de télécharger ces autres réinitialisations comme Myers à - peut et pourquoi vous ? - Pourquoi, - euh, - vous pourriez écrire le vôtre assez rapidement en utilisant ce code ici. - Ce que cela fait, c'est qu'il sélectionne essentiellement tout dans la page HTML, - puis il supprime tout le remplissage et toute la marge de chaque élément unique. - Donc, il n'y a pas d'espace entre les éléments sur l'une des raisons pour lesquelles vous faites cela est, - par exemple, - dans Firefox. - L'espacement entre les paragraphes peut être légèrement différent de l'espacement dans safari ou - quelque chose comme ça. - Donc, la solution de réinitialisation est de supprimer tout le style dans ce cas, - tout l'espacement. - Et puis vous pouvez revenir dans votre propre feuille de style dans votre propre feuille de style personnalisée, - et vous pouvez ajouter, - vous savez, - une ligne de code qui dit, - Eh bien, - Je veux que tous les paragraphes aient 10 pixels et marge en dessous d'eux ou quelque chose comme ça. - Nous avons également défini toutes les tailles de police ici dans le corps Hmm à la normale par défaut 100% et cela - prend en fait toutes les images qui ont des liens les entourant et supprime une bordure - Parfois, lorsque vous ajoutez un lien à une image, - il une petite boîte bleue autour d'elle. Et quand c'est un lien visité, ça ressemblera à une bordure violette autour d'elle. Et quand c'est un lien visité, - Et cela empêchera cela en enlevant la bordure de toutes les images qui air - entourées par les étiquettes A là. - Donc, c'est comme une petite réinitialisation très simple les autres réinitialise Myers à peut et pourquoi je vais - en fait être beaucoup, - beaucoup plus de lignes de code certaines d'entre elles ou même des centaines de lignes de code. - Donc ils sont un peu plus sophistiqués et pauvres, donc je recommanderais, - vous savez, - il est probablement préférable d'y aller. - Il n'en avait pas téléchargé un au lieu d'utiliser une réinitialisation traditionnelle pour notre projet de site, - le site de chaussures CHW que nous avons construit. - Ce que nous avons utilisé était un fichier CSS normalisé, - et vous pouvez voir ici est le lien où vous pouvez aller et attraper le code pour le point normalisé - fichier CSS. - Normalise donc similaire pour le réinitialiser, - à part qu'il retourne et ajoute un peu de style pour vous faire démarrer comme, - alors que lorsque vous utilisez certains de ces autres réinitialisations comme les Myers peuvent. - Pourquoi, - pourquoi, - Ce qui se passe est tous les en-têtes, - par exemple, - semblent être de la même taille, - donc le script normal I il supprime le style. - Mais alors il revient dans le style publicitaire de sorte qu'il apparaîtra la même chose dans tous les différents - navigateurs. - Suivant, - parlons des systèmes de grille CSS. - On a construit notre propre système de grille dans notre style. - Dot page CSS en créant ces classes de colonne une colonne de gauche, - une colonne du milieu, - un droit et nous les avions flottés dans des directions différentes et en mettant divers esprits à - eux. - Donc nous avons créé des classes appelées Call One ou C O L. - Une pour des choses qui n'allaient couvrir qu'une colonne dans notre mise en place de trois colonnes. - Et nous avons également créé une autre classe appelée Call to C O L deux pour représenter les éléments qui avaient un - plus large avec cela couvrant deux colonnes dans notre structure à trois colonnes, - et nous avons même eu un appelé Call trois qui s'étend sur tout le chemin à travers le rappeur tous - des colonnes, - donc nous avons construit notre propre système de grille simplifié. - Il s'avère que vous pouvez réellement aller en ligne et télécharger du code CSS pré-construit qui a déjà un - beaucoup de ce code de positionnement écrit sur ces systèmes appelés CSS Grid. - C'est en fait un diagramme d'un système populaire appelé le 9 60 Grid System. - Et c'est un diagramme pour vous montrer comment ça marche. - Donc ce système de grille a beaucoup plus de possibilités que celui que nous avons créé. Parce que vous vous souvenez, le système de grille que nous avons créé n'était qu'un système de grille à trois colonnes et celui-ci, qui est en fait du 9 60 Grid System. Parce que vous vous souvenez, le système de grille que nous avons créé n'était qu'un système de grille à trois colonnes et celui-ci, - Celui-ci a un total de 12 possibilités de colonnes. - Voici quelques exemples de certains systèmes de grille CSS populaires. - Encore une fois, - si vous allez à votre moteur de recherche et que vous tapez l'un de ces titres, - il viendra avec un site où vous pouvez aller de l'avant et télécharger le CSS open source libre - fichiers que vous pouvez utiliser pour vous aider à construire votre projet de site Web. - Donc, il y a 9 60 Blueprint est un autre système de grille populaire grille sémantique CSS, - et il y a aussi un cadre entier appelé bootstrap, - qui a son propre système de grille inclus. - Cela montre en fait comment votre contenu peut s'adapter au-dessus de cette grille. Donc, en prenant cette dernière année que nous regardons et si nous avons une sorte de colonnes roses superposées - au-dessus de lui, - alors vous pouvez voir que, - par exemple, - la zone publicitaire ici couvre 12345 colonnes. - Ah, - et vous pouvez voir que la barre latérale ici ne couvre que deux colonnes. - Donc, en fonction du nom de classe que vous utilisez pour le système de grille spécifique, - cela va rendre vos éléments une largeur différente et leur donner des commandes float différentes afin qu'ils puissent se positionner les uns à côté des autres. - Maintenant, - quel que soit le bon système que vous choisissez de télécharger, - vous allez vouloir vous assurer de lire la documentation pour ce système de grille particulier - parce qu'ils ont tous des noms de classe différents, - et ils tous attendez-vous à ce que vous les utilisiez légèrement différemment. - Parlons aussi de HTML cinq frameworks, - donc Hee lo fi boilerplate est un exemple d'une bibliothèque de modèles que vous pouvez télécharger. - Essentiellement, - ça te fait commencer. - Il a déjà la plupart de la structure du document créée. - Il est livré avec des fichiers HTML, - fichiers CSS et même certains fichiers JavaScript qui ont déjà des correctifs en place pour faire votre - site Web travailler sur tous les différents navigateurs, - donc hee mollify boilerplate. - Donner un support pour HTML cinq éléments sur vos navigateurs les plus anciens et sur tous les appareils. - Et il y a aussi une version mobile de ce framework connu sous le nom HTML cinq chaudron mobile. - Donc, ce sont les liens que vous pouvez aller de l'avant et vérifier ça. - Hum, - pour que vous puissiez télécharger ce code et le jeter dans un texte sublime, - et vous n'avez vraiment qu'à entrer et commencer à ajouter votre contenu. - Toutes les structures de documents déjà configurées et il est déjà lié à des fichiers CSS et - JavaScript que vous pouvez utiliser Twitter. - Bootstrap est un autre cadre populaire, - et Twitter bootstrap inclut également. - Mis à part HTML et CSS, - il inclut également beaucoup de plug-ins J coury afin que vous puissiez créer des choses comme des galeries d'images, - des menus coulissants et des choses comme ça sans avoir à sortir et écrire le javascript personnalisé - vous-même et juste être capable de charger les connecteurs qu'ils vous fournissent. - Je veux vous encourager à continuer à apprendre et à écrire du code tous les jours.