Adobe Dreamweaver CC : concevoir un site web à partir de maquettes Adobe Illustrator

1. Introduction: Hé là, je m'appelle Dan et dans cette série de vidéos, nous allons créer ce site Web de portefeuille réactif en utilisant Dreamweaver Maintenant, nous allons suivre ce cours étape par étape en apprenant tout ce que nous devons savoir pour créer un site Web. Nous utiliserons également certains des outils de modélisation de Dreamweaver afin que nous puissions apporter des modifications rapides et faciles à l'échelle du site à nos grands sites Web. Nous allons également créer ce menu déroulant réactif ici à partir de zéro. Nous devrons laisser un peu de JavaScript et jQuery. Maintenant que je suis un instructeur certifié Adobe, j'ai également l'occasion d'aider Adobe à créer un grand nombre de ses didacticiels Dreamweaver pour leur site Web. Je suis aussi un conférencier Dreamweaver à la conférence Adobe MAX à Las Vegas et encore mieux encore, je suis dans votre copie de Dreamweaver en ce moment. Va l'ouvrir. Ouvrez Dreamweaver, allez à l'aide, allez au tutoriel rapide, et je suis là à l'intérieur de la machine. Ce cours est destiné aux débutants, vous n'avez pas besoin d'une connaissance préalable de Dreamweaver ou de l'expérience web design. Nous allons utiliser Dreamweaver split view afin que vous puissiez utiliser tous les bons outils visuels ainsi que de faire quelques amines simples ici dans le code aussi. Dans cette série prendra cette conception statique ici que nous allons commencer par Illustrator et ensemble, étape par étape construire tout en HTML, CSS et JavaScript. Nous ferons notre propre navigation en utilisant jQuery. Nous allons faire des ajustements sur le site afin que tout semble bien sur tous les différents appareils. Nous allons travailler avec de belles polices et couleurs et même ajouter Google Analytics à notre site afin que nous puissions obtenir des informations incroyables sur qui visite notre site. Maintenant, la conception web peut être assez difficile, si jamais vous vous perdez, je suis là pour aider, juste utiliser l'un des commentaires sur l'une des pages. En outre, vous obtenez des fichiers d'exercice afin que vous puissiez jouer avec moi dans la série vidéo, j'ai également enregistré quelque chose appelé les fichiers terminés. A la fin de chaque vidéo, j'enregistre une ou deux, que vous pouvez comparer la vôtre avec la mienne juste au cas où la vôtre se perdrait un peu. Consultez le lien ici pour le site Web que nous allons construire ensemble et je veux que vous soyez super excité de construire un site Web comme un professionnel. se voit en classe. [MUSIQUE] Merci, les gars. [ inaudible] [MUSIQUE] 2. Fichiers d'exercice: Salut, qu'allons-nous faire dans ce cours et quelles sont les ressources ? Nous allons prendre un design que nous avons fait dans une classe précédente complètement différente. Il s'agissait d'une conception complète du Web et de l'interface utilisateur utilisant Illustrator. Vous n'avez pas à faire ce cours. C' est très pratique si vous voulez faire le processus de conception ainsi que la construction, alors vous pouvez le faire. Mais nous allons prendre ce design et le transformer en un site web entièrement réactif à l'aide de Dreamweaver. Nous allons utiliser la vue en direct beaucoup dans ce cours. Lors de nos tutoriels précédents, j'ai utilisé la vue du code. C' est bien en utilisant la vue de code. Nous allons utiliser, la version tactile [inaudible] plus en direct de Dreamweaver. Je suppose que c'est ce qui fait de la corde. Nous avons un tout à fait unique d'autres éditeurs de code est que c'est une sorte de glisser-déposer, cliquer et jouer des trucs de type. Nous allons nous concentrer sur ça dans ce cours, un peu de code. L' autre chose, c'est les fichiers d'exercice et les ressources, ce genre de chose. Il y a des fichiers d'exercice que vous pouvez télécharger. Ils seront un lien sur l'écran qui fait un peu de bruit ici. Allez les télécharger et vous pouvez jouer le long. Il y a aussi quelque chose qui s'appelle les fichiers terminés. À la fin de chaque vidéo, je sauvegarde le site Web là où je suis à la hauteur. Juste pour que si vous vous perdez ou comment le résoudre, vous pouvez télécharger ma version et juste vérifier le code et juste voir où vous avez pu vous tromper. Aussi pour cette vidéo, nous allons parler des critiques et des commentaires. Ils seront une section de commentaires sur chaque page. Si vous avez des problèmes et que cela ne fonctionne pas pour vous, envoyez-moi un e-mail ou mieux encore il y a les commentaires sur la page, alors faites-le. Si vous arrivez à un point dans ce cours, où vous êtes comme, il y a un assez bon laissez-moi un avis. Ce genre de commentaires sont les choses qui aident vraiment mes cours à bien faire et m'aide à être une personne de type formateur en ligne à temps plein. Si vous aimez le cours, laissez un commentaire. Oui, je crois que c'est tout. Allons et commençons le cours proprement dit. 3. Configurer des sites Web: Salut là. Dans cette vidéo, nous allons configurer notre espace de travail afin que nous puissions concevoir des sites Web incroyables. Maintenant, ce cours particulier va se concentrer principalement sur la vue en direct ou sur ce genre de côté visuel plus design de l'utilisation de Dreamweaver. Vous pouvez totalement faire ce cours dans le côté code si vous préférez, mais si vous voulez suivre exactement, nous allons le faire dans la vue visuelle. Pour le faire, tout d'abord, vous devez vous assurer que vous n'êtes pas sur le développeur. Le développeur va bien, mais nous allons travailler en standard. En standard, nous allons ouvrir un nouveau document temporairement. Ok, fichier, nouveau. nouveau document, HTML, aucun, cliquez sur « créer ». On va fermer ça dans une seconde. Tout ce que nous voulons faire, c'est être en mesure de voir ça. Vous pouvez travailler en mode code ici, ou diviser, ou en direct. Nous allons travailler en split, ce qui signifie qu'il s'agit d'une partie de la vue en direct et du code de pièce. L' autre chose, c'est que j'ai divisé la mienne horizontalement. Certaines personnes préfèrent verticalement. Je ne suis pas sûr de ce que vous voulez faire. Alors allez à la vue, il y a le mode de vue et puis il y a celui-ci ici appelé split. Vous pouvez soit diviser verticalement, sorte que vous pouvez voir votre site Web de ce côté et le code de ce côté, comme vous le souhaitez. Mais si vous voulez me suivre, nous allons travailler sur la scission horizontalement. L' autre chose est, c'est que nous allons passer au panneau CSS Designer. On va passer beaucoup de temps ici. Le seul problème avec ça, c'est assez petit par défaut, donc nous allons faire deux choses. Donc le panneau DOM ici, le panneau d'actifs, et le panneau d'extraits là-bas [inaudible] mais ils prennent beaucoup d'immobilier d'écran. Nous allons double-cliquer sur le mot DOM. C' est toujours là, si tu en as besoin. Mais c'est joli et petit car il a étendu la vue du concepteur CSS. Une autre chose que nous allons faire est, si je prends ma souris et que je la passe juste là. Voir ces calques, je vais cliquer et les faire glisser et regarder ceci. Ça passera d'une colonne à deux colonnes. Je trouve que c'est la meilleure façon d'apprendre. Il a tout eu beau et ouvert. Même quand tu n'apprends pas et quand je fais des choses en direct, c'est comme ça que je préfère travailler. Maintenant, si vous avez un très petit écran, comme un ordinateur portable 13 pouces ou 11, et vous devrez peut-être le faire rentrer ici parce que ça ne va pas marcher. Mais je vais commencer ici, j'ai un MacBook Pro 15 pouces et ça fonctionne très bien comme ça. Vous avez fait quelques réglages. On l'a fait fonctionner parfaitement. Ce qu'on va faire, c'est sauver ça. Donc si on le gâche plus tard, on peut le réinitialiser, ou si on le branche sur différents moniteurs, ce genre de chose. Pour le faire, ici où il est écrit standard, déposez cela, dites que j'aimerais avoir un nouvel espace de travail. Je vais appeler ça l'espace de travail « Dan is Awesome ». Appelle le tien comme tu veux. Cela signifie juste que si plus tard vous faites glisser ceci et qu'il se joint là-bas et qu'il finit par se connecter à cela et que vous fermez accidentellement ceci et ceci, tout est parti bizarre, ce que vous pouvez faire est de venir à Dan is Awesome et cliquez sur « Réinitialiser Dan is Awesome « et il le réinitialise, tout sauf ça, il s'avère. Je pensais que ça le ferait. Au moins, il retourne tout à la normale, se dilate du côté de la même largeur. Alors que mon ami est comment obtenir votre espace de travail à l'air super doux et comment l'enregistrer et plus tard le réinitialiser, si vous avez besoin. D' accord, allons-y et commençons à faire un site web. 4. Comment créer un nouveau site web dans Dreamweaver: Hé, là. Dans cette vidéo, nous allons créer notre définition de site. Nous devons le faire pour chaque nouveau site que nous allons créer dans Dreamweaver, c'est super facile, vous pouvez le voir ici, j'ai un dossier et à l'intérieur, il y a un dossier d'images, c'est tout ce que nous avons à faire. Allons-y et faisons-le maintenant. Si vous suivez le dernier tutoriel, nous allons juste fermer ce que nous avons fait, nous allons mettre en place notre site. Vous devez le faire au début de chaque nouveau site. Si vous êtes un concepteur web, et que vous avez 10 clients différents, vous allez devoir le faire 10 fois différentes. Si vous travaillez sur votre propre site Web, et que vous n'en avez qu'un, vous n'aurez qu'à le faire une fois. Allons à Site, Nouveau Site, donnez un nom à votre site, je vais appeler notre Portfolio Awesome de Dan. Où allons-nous le mettre ? Le nom du site n'a en fait aucune répercussion autre que ce que vous utilisez dans Dreamweaver pour trouver tous vos fichiers. C' est ce que je pensais pour toujours. Je pensais qu'il n'y a pas de répercussions pour ça, tu peux l'appeler comme tu veux. Maintenant, je reviens du futur. Je suis Dan de la vidéo 22. Votre vidéo 4, et je suis revenu pour vous dire, ne mettez pas l'apostrophe dedans parce que Web trouve toute la vie en mettant quoi que ce soit ici, j'ai pensé. Mais je ne pensais pas si jamais mettre une apostrophe dans ce petit nom de site. Je ne suis pas sûr si c'est un nom de site qui a le problème, ou est le nom du dossier, l' un d'eux est le problème. Maintenant, au lieu de revenir en arrière et de réenregistrer les deux jours avec une vidéo dans laquelle j'ai eu avec l'apostrophe ici, je viens juste de revenir à temps pour dire, « Ne le fais pas, ne le mets pas ». Ensuite, pour les 22 prochaines vidéos, vous allez voir cette apostrophe et la regarder à nouveau. Ne mettez pas d'apostrophes là-dedans. Éloignez-vous de toutes les clés étrangères comme extrinsèques, enthuses, juste avoir des dessus et des bas réguliers, et cela ne causera aucun problème lorsque nous arriverons plus tard lorsque nous créons un modèle. Continuez et faites tout sauf mettre des apostrophes dans le dossier du site local et le nom du site. Retournez dans vos vidéos régulières, et j'espère ne pas tomber dans mon passé. Tout le monde a vu Retour vers le futur ? Espérons que tu n'es pas si jeune. Sûrement tout le monde a vu Retour vers le futur. Assez. Retournez dedans. Dossier local du site, c'est juste où sur votre ordinateur portable, cela va être conservé, je vais mettre le mien sur mon bureau, je vais mettre le mien dans un nouveau dossier ici, et je vais l'appeler le Portefeuille Awesome de Dan. Cool. En outre, ce nom physique pour le dossier n'a aucune répercussion. Certaines choses le font évidemment, mais ce n'est pas le cas. Cliquez sur « Choisir ». La dernière chose que nous voulons faire ici est d'aller dans les paramètres avancés, et allons dans le dossier images par défaut. Cliquez sur le petit navigateur, vous pouvez voir qu'il est placé dans ce nouveau dossier que je viens de faire, faisons un nouveau dossier ici, et appelons-le des images en minuscules. C' est quelque chose de spécifique. Appelez cela des images en minuscules ou sans espaces, cliquez sur « Créer », cliquez sur « Choisir ». Ce que cela fait, c'est juste nous aider plus tard quand nous faisons glisser des images de partout sur notre ordinateur, Dreamweaver sait où les mettre. C'est ça. Cliquez sur « Sauvegarder » et que mon ami est tout ce qu'il nous faut faire. Si vous ne pouvez pas le voir, laissez basculer les fichiers en haut ici. Si vous ne pouvez pas voir les fichiers, allez dans Fichiers de fenêtre, vous verrez qu'il y a mon petit dossier. Aussi sur mon bureau, il y a un Dan's Awesome Portfolio. n'y a rien ici sauf qu'il y a un dossier qui contient des images, et il n'y a rien dedans. Mais juste pour que vous sachiez, vous concevez votre site localement sur votre propre ordinateur d'abord, et quand vous avez terminé, vous le poussez vers votre hôte, quelqu'un comme GoDaddy ou Bluehost, et ils le serviront à Window World. Donc c'est tout pour la mise en place de notre site. Vous devez le faire pour chaque site. Vous verrez tout le mien ici, j'ai plein de sites sur lesquels je travaille. Si vous avez mal fait, vous pouvez aller sur le site, aller à Gérer les sites, et vous les verrez ici, il y a le Portefeuille Awesome de Dan, double-cliquez dessus, et vous pouvez revenir à ce même écran. Allons dans le prochain tutoriel. 5. Comment créer une nouvelle page HTML dans Dreamweaver: Très bien, dans ce tutoriel, nous allons créer une toute nouvelle page, nous allons l'appeler index, nous allons apporter un logo, nous allons le lier à notre page d'accueil, nous allons ajouter du texte alt, toutes les bonnes choses à démarrer n'importe quel bon site Web. Allons-y et faisons-le maintenant, donc cinq vidéos dans et nous n'avons toujours rien, alors faisons une page. Si vous allez à Fichier Nouveau, ou je vais utiliser celui-ci ici. Maintenant, la partie essentielle comme n'importe quel site Web est un cas de document HTML, j'ai un nouveau document, nous allons utiliser HTML et quand il s'agit de Bootstrap ou None, nous allons utiliser None. Si vous êtes passionné par Bootstrap, j'ai un autre cours complet sur la façon d' utiliser Bootstrap mais celui-ci ici, nous allons créer notre propre réactivité plutôt que d'utiliser le modèle Bootstrap. Donc aucun, assurez-vous que c'est HTML5, nous allons donner le titre de notre document. Le titre est vraiment important, vous pouvez utiliser n'importe quel texte que vous aimez donc je vais utiliser Daniel Walter Scott portfolio de design web. Pourquoi est-ce que je mets tout ce qui prend là-dedans ? C' est parce que tout ce que vous mettez dans ce titre apparaît ici dans Google. Si je fais une recherche pour mon donc lui-même, vous verrez que sceller les choses en bleu ici c'est en fait tiré du titre de la page donc ici dans Dream leaver, voir ceci ici ? C' est d'où vient l'écriture bleue donc c'est vraiment important, ne la laissez pas sans titre parce que vous ne serez jamais classé sur aucune sorte de recherche afin que vous puissiez voir ici, c'est là qu'elle apparaît. Il apparaît également si je clique sur apporter un ordinateur portable peut voir en haut ici, ok, c'est là qu'il apparaît aussi. C' est ce petit nom ici. Vous pouvez voir ici que j'ai fait beaucoup de bons mots clés, matériaux Adobe mais n'importe qui qui doit l'amener et a terminé. Donc, c'est aussi là qu'il apparaît donc à la fois le bleu et Google se terminent sur le petit onglet en haut là. Alors n'oubliez pas, il doit être unique pour chaque page que vous faites donc si vous avez 100 pages sur votre site Web, vous avez besoin d'un 100 titres distincts qui n'est pas amusant d'aller et essayer de créer mais doit être fait. Une fois que vous avez fait cela, cliquez sur « Créer » et vous aurez votre première page. Maintenant, nous allons enregistrer cette première page donc nous allons aller à « File Save », nous allons lui donner un nom et c'est l'une des rares pages où nous devons lui donner un nom vraiment spécifique, nous devons l'appeler index.html. Si quelqu'un va à votre site, ils vont à un Daniel is awesome.com, il viendra site Web introuvable, il a besoin d'au moins cette page. Ceci est considéré comme votre page d'accueil et il doit être envoyé exactement comme ceci ou index.html en minuscules. D' autres pages, nous avons un peu plus de liberté avec, mais celui-ci certainement index.html. Donc, vous verrez ici dans mon panneau de fichiers, il est, j'ai mon premier bit de HTML assis là et cela est généré pour nous, vous pouvez voir la balise, le titre afin que vous puissiez mettre à jour cela il maintenant, en mode code et ne cassez rien d'autre par en le supprimant, laissez tout là. La première chose que nous ferons avant de partir est que nous allons réellement ajouter quelque chose à notre page donc nous allons cliquer ici dans la vue en direct en haut ici et nous allons aller à « Insérer » et en haut ici nous allons choisir HTML et nous allons pour cliquer sur celui-ci appelé l'image et nous allons apporter maintenant logo. Maintenant, si vous ne l'avez pas encore fait, allez sur le lien à l'écran et téléchargez les fichiers d'exercices, ils sont gratuits à télécharger. Déjà téléchargé le mien, ils sont sur mon bureau et je vais ouvrir mon dossier d'images et ici je veux celui appelé logo, Je vais utiliser le tiret PNG donc logo Daniel tiret, Walter, trait d'union Scott. Cliquez sur « Ouvrir » et puis mes amis sont notre logo sur notre page, il est légèrement blanc cassé mais nous allons le mettre sur un fond sombre plus tard et c'est presque tout. Chaque fois que vous mettez une image, vous pouvez voir ici c'est à quoi cela ressemble en mode code, ce que nous devons faire est que nous devons ajouter quelque chose appelé texte alt ou texte alternatif pour chaque image unique. Il est utilisé par Google pour aider à référencer le site et un site Web qui a beaucoup de bons textes alt aidera avec son classement, notre site qui n'a pas de texte alt aussi susceptible de faire assez mal dans les résultats de recherche. Pour mettre à jour le texte alt, cliquez sur le logo ici, cliquez sur le petit menu plus grand nouveau et appuyez sur le texte « Alt » ici, donnez-lui un bon nom de mot clé, donc je vais mettre dans mon nom. Cela peut avoir des espaces et il n'a pas besoin de vraie syntaxe spéciale, mais juste de bons mots-clés donc je l'appelle web design, portfolio, logo. Je pourrais juste l'appeler logo mais le seul problème avec cela est que ce ne sont pas de bons mots-clés et je serais en concurrence avec toutes les autres personnes qui avaient un site Web avec le logo du mot-clé, je veux rivaliser avec un créneau très spécifique, Mon nom, web, logo conçu. Ce que nous allons également faire avant de partir ici aussi et ceci est spécifique juste pour le logo de la page d'accueil et il est très fréquent de cliquer sur le logo pour revenir à la page d'accueil, les gens vont écouter les listes ont un bouton dans la navigation c'est la maison, je 'll supposer que vous pouvez cliquer sur le logo et il vous ramènera à la maison. Maintenant, c'est déjà une maison, qui est bizarre, mais nous allons utiliser cette page comme modèle pour faire d'autres pages. Donc, ce que nous allons faire et où il est dit lien ici, nous allons cliquer sur Parcourir pour fichier. Nous allons dire cela lorsque vous cliquez dessus, il retourne à index.html ce qui signifie quelque chose de bizarre pour le moment parce qu'il revient juste à lui-même, mais plus tard quand nous copions et collons sa page et qu'il devient la page À propos de nous, il deviendra plus utile. Vous pouvez voir ici, voir petite étoile cela signifie que cette page n'est pas enregistrée, « Fichier », « Enregistrer », pour vous assurer que tout est agréable et propre. Très bien, donc nous avons fait une page, nous avons collé un logo dessus avec éditer de petites ticks avec éditer un lien vers elle et nous commençons. D' accord, passons au prochain tutoriel. 6. Comment prévisualiser au mieux votre site web dans Adobe Dreamweaver: Hey là, nous sommes à la version super extrême gros plan donc je peux vous montrer comment prévisualiser au mieux votre site Web en utilisant Dreamweaver et aperçu du navigateur en temps réel. Allons voir ça. Donc, pendant que vous travaillez, vous avez sur la vue partagée, nous pouvons voir le code et nous pouvons voir la vue en direct du haut ici, et c'est parfait pour prévisualiser votre site Web. Le seul problème, c'est qu'il y a des lignes bleues partout. Vous pouvez faire glisser cette arête ici pour le redimensionner. Pour voir à quoi il ressemble dans différentes vues. Mon seul problème est, double-cliquez pour le faire revenir, c' est qu'il ne se met pas toujours parfaitement à jour ici et c'est mieux qu'il n'a jamais été, mais j'aime toujours prévisualiser dans le navigateur. La première chose que vous devez faire est de vous assurer que Google Chrome est installé. Si vous travaillez sur un Mac et que vous avez Safari mais pas Google Chrome, vous devez aller le télécharger et l'installer. Pourquoi ? Parce que tout le monde utilise Google Chrome et si cela fonctionne dans Google Chrome, il est plus que probable va travailler dans beaucoup des autres navigateurs. Alors testez dans celui-ci. C' est incroyable le pourcentage de personnes qui utilisent réellement Chrome par rapport à tout autre navigateur, y compris Internet Explorer ou Safari ou Firefox ou tout ce que vous utilisez. Vous pouvez également tester là-bas, mais assurez-vous que Google Chrome est installé. Une fois que vous l'avez installé, il devrait simplement apparaître dans, sous Fichier, Aperçu du navigateur en temps réel. Il devrait juste apparaître ici comme le mien. Si ce n'est pas le cas, vous pouvez aller à Modifier la liste des navigateurs et aller la trouver. Donc, une fois qu'il est installé, vous revenez à exactement où nous étions, ou plus facilement, il ya une petite icône en bas ici, et vous pouvez voir ici Aperçu dans Chrome. Le navigateur apparaît et vous pouvez le voir ici. Il y a mon logo et je peux cliquer dessus et tout est bon. La chose cool à propos de la nouvelle version de Dreamweaver, c'est ce qu'on appelle un aperçu du navigateur en temps réel. Tout ce qui signifie vraiment, c'est que lorsque je mets à jour le code ici, je vais déplacer ceci afin que vous puissiez voir les deux. Lorsque je mets à jour ceci et que je dis en fait que je veux que mon logo soit un 131 pixels de large, vous pouvez le voir juste mis à jour parfaitement sans que je doive le réinitialiser ou le sauvegarder. C' est dynamique. Ça veut juste dire que je ne suis pas sûr de vouloir cette taille. Quand je le supprime, il se met juste à jour pendant que je travaille. Maintenant, pendant ce cours, nous sommes limités à l'écran que vous pouvez voir, mais j'ai en fait deux moniteurs ici sur mon ordinateur. Donc j'ai celui-là sur un autre écran. Ce que vous ne pouvez pas voir maintenant. Ensuite, j'ai ceci à plein bruit ici, et cela signifie juste que lorsque je mets à jour ceci sur ce moniteur ici que vous ne pouvez pas voir, il se met à jour visuellement pour que je puisse le voir. Donc, si je me cache en mode Code en faisant des choses, je peux voir les ajustements se produisent au cas où je fais une erreur ou juste pour le prévisualiser comme ça se passe. On se dirige vers la vraie vie en parlant à Dan pour te montrer. Alors pendant que je travaille, j'ai deux écrans en place. J' ai Dreamweaver sur celui-ci, et j'ai mon grand écran montrant Google Chrome avec un aperçu du navigateur en temps réel. Donc, je clique sur ceci, puis cliquez sur « Afficher dans l'aperçu du navigateur en temps réel », en le regardant là-bas. Laissez-moi faire un gros changement pour que vous puissiez voir facilement sur la caméra. Donc, je vais prendre ici l'image, je vous éteins juste. Regarde ça. Bien, parti. Donc, je fais un changement ici et ça se montre instantanément ici. C' est vraiment pratique si je travaille ici et que tout va bien, eux je suis comme oh, quelque chose a changé ici. Donc oui, c'est une façon très courante de travailler en tant que concepteur web. Deux écrans, ils ont l'air génial. Alors merci vrai Dan. C' est ainsi que vous prévisualisez sur votre navigateur. Vous pouvez vous enregistrer ici, mais assurez-vous de le vérifier dans le navigateur réel. Nous examinerons plus tard les téléphones mobiles et les tablettes quand nous avons quelque chose à vérifier sur eux. Alors c'est tout. Allons dans le prochain tutoriel. On se voit là-bas. 7. Déplacer des balises dans Dreamweaver: Dans cette vidéo, nous allons mettre des tags et configurer les tags et vous présenter ce panneau DOM. Allons-y et faisons-le maintenant. La première chose que nous devons faire est de mettre une balise d'en-tête. Maintenant, ici, sous Insérer un HTML, votre site Web va avoir trois gros morceaux. Il va avoir un en-tête. Il va y avoir une section principale. Il va avoir un pied de page. C'est le haut, le milieu et le bas. L' en-tête et le pied de page seront généralement les mêmes sur chaque page et nous le transformerons en modèle plus tard. Le principal est l'endroit où tout va changer pour votre page réelle. On a mis le logo en premier, ce qui est un peu bizarre. Vous avez probablement mis votre en-tête en premier, puis le logo à l'intérieur de celui-ci. Je l'ai fait parce que je voulais être en mesure de vous montrer comment réorganiser les balises si vous les obtenez au mauvais endroit. Ce que nous allons faire, peu importe où vous avez cliqué ici dans la vue en direct. Cliquez sur Insérer HTML, cliquez sur En-tête, et il apparaîtra quelque part. Peu importe si c'est en dessous ou au-dessus du logo ici. Maintenant, ce que Dreamweaver fait aussi bien, c'est qu'il y ajoute des tiques préexistantes. Il suffit de placer le support ticks parce que si cette tique n'apparaît pas ici, vous ne pouvez pas la voir car elle n'a pas de hauteur, pas de largeur, pas de dimensions. L' en-tête entre et vous ne pouvez pas le voir, donc c'est un peu bête. Ils ajoutent quelques ticks ici pour être utile. Cette ticks est supprimée à peu près immédiatement une fois que vous avez commencé à l'utiliser. La première chose que nous voulons faire est que je veux mettre mon logo à l'intérieur de mon en-tête. Vous voyez ici dans ma vue de code, il y a mon en-tête. Au début et à la fin, voici le logo avec des liens hypertexte et vous pouvez voir les anciennes tiques et la taille de celui-ci. Cette chose que je voudrais aller à l'intérieur de l'en-tête. Il y a deux façons principales de le faire. Il y en a en fait quelques-uns, c'est à vous de décider si vous préférez coller aux outils k ou si vous aimez travailler en mode code, c'est totalement à vous de décider. Utilisons la manière officielle recommandée par Adobe. J' ai ouvert mon panneau DOM ici, si vous ne pouvez pas voir qu'il est sous Window DOM, et voici la tête de mon site. C' est tout ce que l'ordinateur voit. Vous pouvez voir que mon titre ici me dit ce que le clavier utilise. Mais l'utilisateur ne voit aucune de cette tête. Il voit les choses qui ont fini par le corps. Le corps contient mon en-tête, contient mon image, et c'est à ce sujet pour le moment. Ici, sur mon panneau DOM, vous pouvez voir qu'il y a mon corps, je dois tenir ça. Il y a mon en-tête séparé de mon tag a, qui est ce lien avec mon image dedans. Vous pouvez simplement cliquer et faire glisser l'un à l'intérieur de l'en-tête et ils vont à l'intérieur et ils deviennent une famille heureuse. Ensuite, je peux passer par et supprimer ce texte d'espace réservé. Vous pouvez le faire à partir d'ici, car il s'en tiendra à le faire ici dans la vue en direct. La coupure, et maintenant c'est tout. Nous avons un en-tête qui a mon image à l'intérieur avec mon tag a qui est comment obtenir les choses au mauvais endroit. Vous allez devoir les faire glisser dans le DOM. Il suffit de les faire glisser dans la bonne balise ou je vais supprimer tout cela, c'est que voici mon texte d'en-tête et puis supprimer le texte ici. Prenez tout ça, donc d'une étiquette à une étiquette, coupez-la. Mettez mon curseur là-dedans et collez-le. Peu importe comment vous aimez le faire, faire glisser via le DOM, ou simplement le copier et le coller ici. Il y a juste beaucoup de fois où il est plus facile de faire l'un et l'autre. Je vous donne les deux techniques pour que vous puissiez travailler à travers ce cours. Appuyez sur Enregistrer, Fichier Enregistrer. Passons à la mise en forme de notre en-tête. 8. Créer, modifier et styliser votre première feuille de style CSS à l'aide de Dreamweaver: Salut là. Dans ce tutoriel, nous allons créer notre toute première feuille CSS, vous pouvez le voir là-bas. En fait, nous allons styler notre en-tête. Ne vous inquiétez pas, ça ne restera pas toujours cet horrible vert. Nous allons ajouter un peu de rembourrage et un CSS génial. Préparez-vous à faire votre toute première feuille CSS. Jusqu' à présent, nous avons créé une page HTML. C' est index.html. Je me suis débarrassé du HTML ne va pas beaucoup. Maintenant, nous devons y aller, et styliser son en-tête. Nous le stylisons en utilisant des feuilles de style CSS ou en cascade. Pour créer une feuille de style, nous allons à notre panneau de concepteur CSS. Je vais fermer le DOM du dernier tutoriel et ici, si vous ne pouvez pas voir votre CSS Designer, il est là. Si le vôtre ne ressemble pas à la mienne, vous devez le faire glisser à peu près là, et ce que nous voulons faire est sous Sources, nous allons cliquer sur le bouton « Plus », et nous allons créer un nouveau fichier CSS. Vous pouvez lui donner le nom que vous voulez, mais tout le monde l'appelle styles.css, et nous allons cliquer sur « OK ». Il arrive quelques choses. Tout d'abord, sur mon bureau, dans mon Awesome Portfolio de Dan que j'ai créé, c'est juste une feuille de style séparée, il y a le fichier HTML d'index que nous avons fait, et il y a cet autre gars. Il n'y a rien là-dedans. C'est là que nous mettons tous nos styles. Nous les gardons séparés. Revenons dans Dreamweaver. L' autre chose que vous remarquerez est que mon HTML mis à jour un peu. Tu vois que Dreamweaver a lié les deux ? C' est ainsi que ce fichier Index sait que styles.css existe parce qu'en ce moment ils sont des fichiers séparés, et ici dans la tête, Dreamweaver dit lié à la feuille de style s'il vous plaît, et c'est ce qu'il fait. Aussi chose pratique pour Dreamweaver est cette chose appelée le bouton des documents connexes que vous pouvez voir en haut ici. Il y a un lien parce que c'est une feuille séparée qui dit que je peux cliquer dessus, et il est là. Il y a ce styles.css répertorié en bas. Il vous montre en haut mon index, mais en bas il vous montre cette feuille séparée. C' est ce que les codeurs source, ils devraient juste appeler ce HTML. Alors pensez quand vous voyez le code source, pensez au HTML, et voici un autre document. Retour au HTML. C' est ainsi que vous créez et liez une feuille de style pour être facile. Maintenant, nous allons y aller, et le style sont en-tête. Pour ce faire, nous devons nous assurer que vous pouvez être réglé sur Current. Le courant est génial quand vous savez ce que vous faites, et nous le ferons un peu plus tard dans le cours, mais respectons les vieux. Vieux rend la vie plus facile. Ce que nous allons faire, c'est que nous allons cliquer ici. Peu importe où vous cliquez, mais nous allons créer notre tout premier style. Nous travaillons à travers ces procédures ici. On a travaillé sur toutes ces boîtes. Tout d'abord, nous disons, je veux que le style aille dans styles.css. Il est vraiment rare d'avoir plus d'une feuille de style. Parfois, vous pouvez en avoir deux si vous utilisez comme un modèle, comme Bootstrap, mais nous allons juste avoir un CSS pour tout ce document. Requêtes des médias, nous allons entrer plus tard quand nous regardons mobile et tablette. On va sauter ça pour le moment. On va le coller dans quelque chose appelé Global, et on va créer ce qu'on appelle un Sélecteur. Nous allons faire beaucoup de sélecteurs, et cela sélectionne ce que nous voulons styliser. Je vais frapper « Plus ». Ici, c'est par défaut ce que j'ai sélectionné. Mais je ne veux pas de l'image qui est à l'intérieur de la balise add, c'est à l'intérieur du hit. Je veux juste styler mon en-tête. Vous pouvez simplement le taper. C' est à vous de décider si vous l'obtenez par défaut ou si vous avez juste à taper l'en-tête. Je commence ce truc appelé en-tête. Que dois-je faire à cet en-tête ? Je vais cliquer sur « En-tête » ici, et ce que je voudrais faire est tout d'abord, nous allons juste changer la couleur de fond, agréable simple. J' ai cette longue ligne de choses que nous pouvons styliser avec CSS. Ce que Dreamweaver fait est avec top ici, il le met en petits groupes. Celui-ci ici est Layout, vous pouvez le voir là, et ce Type, tape cela. Ce que je fais, c'est que je clique sur ceux-ci pour sauter à travers cette liste. Vous pouvez glisser vers le haut et vers le bas, totalement à vous. Je vais sauter à celui-ci appelé Background, parce que c'est la couleur de fond, nous allons prendre assez grand vert. Pour choisir des couleurs à l'aide de cette diapositive de haut en bas jusqu'à ce que vous obteniez la teinte droite, cliquez, maintenez et faites glisser le petit cercle jusqu'à ce que vous trouviez une couleur que vous aimez. Il y a la version sombre et claire ou simplement la déplacer ici, et c' est comme cela que c'est transparent. On va choisir un assez grand vert pour le moment. Je vais le changer dans une minute. Je vais cliquer sur « Retour » à mon clavier. Maintenant, nous avons un en-tête qui a un peu de CSS, et que mes amis est tout CSS est. Il s'agit d'une feuille séparée à laquelle vous ajoutez des styles, et vous devez simplement vous assurer d'utiliser le bon nom. Nous avons fait correspondre l'en-tête de mot ici, mon HTML avec le style ici et mes sélecteurs, et vous venez de le colorer. Maintenant, jetons un oeil à notre feuille CSS. Allons à styles.css, il est là. C' est à quoi ressemble une feuille CSS. En termes de codage pour Internet, les feuilles CSS sont les plus simples à regarder. Il y a l'en-tête du mot. Il correspond complètement dans le mot et la syntaxe ici dans mon HTML, et il dit background-color : hachage est égal, et c'est la couleur. Si vous passez la souris au-dessus, il y a la couleur là-bas, et elle se termine toujours par un point-virgule. Il est aussi enveloppé dans ces accolades. Ce sont les choses de syntaxe. Vous pouvez taper CSS parfaitement bien. Beaucoup de concepteurs web le font. Ce que nous faisons dans Dreamweaver, c'est que nous utilisons le panneau de conception CSS pour faire le levage lourd. Ce jeu de caractères en haut dit juste que j'utilise un clavier anglais. Revenons au code source. Ce que je veux faire, c'est que je veux mettre un peu d'espace en haut et à gauche de ce logo pour qu'il ne soit pas seulement coincé contre le côté. Je m'assure de travailler sur mon styles.css sur la version globale de mon en-tête. Vous pouvez voir ici que nous avons le rembourrage et la marge. Le rembourrage et la marge sont bons à expliquer maintenant. rembourrage est l'intérieur de la boîte. Regardez ceci, si je clique sur maintenez et faites glisser cela vers la droite, cela me donne rembourrage, donc il déplace le logo vers le bas le moment 36 pixels. Si je l'annule, marge fait une chose similaire. Il pousse vers le bas par le haut, mais il pousse de l'extérieur de la boîte. Si je n'avais pas de boîte de couleur ici, si elle n'était pas verte, vous ne remarqueriez pas la différence. Le logo se déplace toujours vers le bas de cette certaine quantité de pixels. Parfois, peu importe que l'utilisation de marges ou de rembourrage. Parfois, évidemment, dans notre cas, c'est parce que je veux le rembourrage à l'intérieur de la boîte verte. Maintenant, d'où puis-je obtenir mes mesures ? Maintenant, si vous travaillez avec un designer, ils auraient dû vous envoyer des spécifications. Dans quelle mesure ces spécifications sont-elles détaillées ? Il ne va probablement pas avoir à quelle distance le logo est du haut, mais vous obtiendrez un visuel, et nous pouvons le mesurer. Maintenant, si vous êtes le concepteur de visuel et de codage, ce sera encore plus facile parce que vous allez pouvoir simplement sauter dans votre fichier. Maintenant, peu importe que vous ayez conçu cela dans Photoshop ou Adobe Illustrator. Ils ont tous deux de très bons outils de conception web. J' ai des cours sur ces deux. Si vous voulez faire la phase de conception, allez les consulter. Dans ce cas, nous concevons quelque chose que nous avons conçu dans une autre série de tutoriels vidéo dans Illustrator. Nous allons ouvrir le design fini à partir de ça. Maintenant, c'est dans vos dossiers d'exercice. Ouvrez la mise en page Illustrator et ouvrez celle-ci appelée Portfolio Website.ai. Je l'ai ouvert. Ici, c'est. C' est mon design. Maintenant, je veux commencer à en tirer des mesures. Je vais zoomer, jeter un coup d'oeil à ce type. Je veux la hauteur et les côtés ici. Maintenant, la façon officielle est qu'il y a un outil de règle, donc je dépose un outil, outil de mesure, et vous cliquez une fois là-bas, vous cliquez une fois là-bas, et cela vous donne la largeur. C' est 19 du côté. Vous pouvez cliquer une fois ici, vous cliquez une fois là-bas, et vous pouvez voir qu'il est 10 à partir de la hauteur. Environ 20 et 10 ans, ce n'est jamais exact. Il suffit de coller à des pixels entiers, les minuscules mesures de toute façon, donc il suffit de coller les pixels entiers. C' est la façon officielle. Ce que j'ai tendance à faire est de saisir l'outil rectangle, et d'utiliser ceci. Pourquoi ? Parce qu'il s'enclenche, ce qui est vraiment cool, vous pouvez voir, c'est comme se joindre, et veut vraiment accrocher à l'âge des choses. Si le vôtre ne va pas à Afficher, et assurez-vous que le guide intelligent est activé. Celui là, qui va coller aux bords. L' autre chose sympa est de regarder ceci si je peux cliquer ici, et il coupe directement au coin, et vous pouvez voir qu'il y a ma hauteur, et vous pouvez voir qu'il y a une intersection. Donc je connais ma taille et ma largeur en une seule fois. Vous pouvez voir qu'il est 19 sur le côté, et c'est une hauteur de 10 pixels. C' est ce que je vais utiliser pour traduire en Dreamweaver. Lorsque je construis un site, et que j'ai mon design ici dans Photoshop ou Illustrator, cela n'a pas vraiment d'importance. J' ai tiré mes mesures de, j'allais et retours entre ces deux programmes. Dreamweaver et illustrateur dans notre cas. Ce que je veux faire, c'est que j'aimerais avoir une hauteur de 10, et je voudrais ce côté gauche de 19. Vous pouvez voir, poussé 10 vers le bas, 19 à travers. Je vais le faire sur le côté droit aussi parce que nous aurons un peu de navigation de ce côté finalement. La même chose pour le fond. Je veux 10 en bas juste pour qu'il y ait un écart qui correspond au sommet. Mes amis, c'est comment créer une feuille CSS. Notre styles.css, et nous avons fait un style de base en utilisant notre panneau CSS Designer. Si vous utilisez une version de Dreamweaver telle que CYST ou antérieure, vous n'aurez pas le panneau Designer. Cela craint parce que ce cours est tout basé autour du panneau CSS Designer, et c'est génial. Vous devrez peut-être examiner la mise à niveau. Pouvez-vous suivre ce cours sans elle, probablement pas. Vous voudrez peut-être vérifier ma version de codage du cours Dreamweaver. Va vérifier celui-là. Allons dans le prochain tutoriel où nous regardons l'édition des règles CSS. 9. Modifier ou ajuster les styles CSS de votre site Web Dreamweaver: Hey, des gens géniaux. Dans cette vidéo, nous allons transformer cette boîte verte laide et éditer notre CSS dans cette jolie boîte grise. Donc maintenant, nous allons aller et ajuster notre feuille CSS. Disons qu'on n'a rien sélectionné. Cliquons sur des trucs aléatoires. Une sorte de faire ça ne marche pas cool. Donc, il y aura beaucoup de fois dans ce cours, nous allons faire un style et ensuite vous êtes, « Je dois changer ce stock ». Donc ce qu'on va faire, c'est aller l'ajuster. Le moyen le plus simple est n'a pas d'importance ce que vous avez sélectionné ici et il suffit de cliquer sur les styles CSS sont devenus globaux. Cliquez ensuite sur le style que vous voulez. Plus tard dans ce cours va devenir plus long des styles pour le moment, c'est super facile parce que nous avons seulement un sélecteur, et appuyez sur Entrée. Maintenant, nous allons y aller et faire un ajustement. Maintenant, il y a beaucoup d'ajustements ici. Ce que vous pouvez faire pour rendre la vie un peu plus facile de voir cette option, c'est montrer, je l'aime. peut aussi être une vraie douleur quand vous êtes tout nouveau à cela, que cela ne vous montre que les choses que vous avez définies et que vous êtes, « Quelles étaient les autres choses ? » Était les tailles de police et d'autres choses. Tu te souviendras que tu peux activer et désactiver ça pendant ce cours. Tout ce qu'il fait, c'est certainement la seule chose qui vous montre, c'est ce que vous avez réellement fait. Nous avons fait le rembourrage et la couleur de fond. Donc, ce que je veux faire est de changer la couleur de fond en noir. Dans notre cas, nous allons utiliser par défaut la plupart du temps nous allons utiliser des nombres hexadécimaux est la numérotation de hachage. Tu peux le déplacer ? Vous pouvez voir que ces chiffres correspondent à la couleur. Maintenant, ce que nous voulons faire est que je veux réduire la capacité de ce contexte, Nous devons donc utiliser ce RGBA. C' est le nouveau format. n'y a pas de vrai vrai bon ou mauvais hexes que la version légèrement plus ancienne. RGBA est la version la plus récente. La raison pour laquelle c'est cool est parce qu'il a un à la fin, ce qui signifie alpha, transparence, ce qui signifie cela. ces chiffres hexadécimaux ne l'ont pas. Vous pouvez voir que je peux faire une lecture légèrement transparente. Je vais le faire glisser au noir. Vous pouvez voir maintenant que c'est un peu gris. Mais plus tard, quand on aura quelques images derrière elle, elle sera légèrement transparente. C' est à vous de décider si vous voulez faire ça maintenant ou plus tard, comment sombre ? Ce sera difficile à savoir jusqu'à ce que nous ayons nos images derrière elle et que nous puissions les ajuster plus tard. Une autre chose que vous pouvez faire est de dire que ce panneau ici vous rend fou, vous ne pouvez pas simplement sauter aux styles CSS. Vous pouvez voir qu'il y a mes styles. Vous pouvez voir dire que le petit doit changer. Je peux juste changer ça à 12 en haut et en bas. Peu importe si vous voulez utiliser le mode code ou si vous voulez utiliser le panneau CSS Designer. Mais dans ce cours, nous allons coller principalement au concepteur CSS. Donc, revenez au code source. Une dernière chose avant de partir, c'est le Sauvegarder tout. Donc, chaque fois que je fais un ajustement à mon CSS, change round enter, Vous remarquerez que le styles.css nous obtient petits astricks ici. Je veux être sauvé. Mais parce que je suis un peu dans mon code source regardant mon HTML aller « Fichier », « Enregistrer ». Rien ne se passe sur comme, donc je dois aller faire quelque chose appelé File Save all. Le seul problème avec tout enregistrer est que c' un long chemin et le vôtre n'aura pas de raccourci. J' ai fait un raccourci pour le mien parce que c'est quelque chose que vous devriez faire avant prévisualiser quoi que ce soit dans votre aperçu de navigateur en temps réel ou plus dans le cas Chrome, vous allez tout enregistrer, et cela signifie qu'il enregistre cela plus la feuille CSS ou peut-être certains JavaScript que vous avez ouvert. Donc, enregistrez tout pour faire le raccourci sur un Mac, vous allez à Dreamweaver ou raccourcis clavier sur PC. Je pense que c'est moins d'une minute et écrivez le fond. Il y en a un ici quelque part. Il s'agit de raccourcis clavier, vous pouvez le trouver. La première chose est que nous allons le faire aux commandes de menu. On va trouver un fichier, sauver tout est venu ici. Nous allons ajouter un raccourci plus. Il va dire que vous ne pouvez pas modifier le sit par défaut pris. On va créer la nôtre. Tu peux appeler ça tout ce que tu veux. Raccourcis du tisserand de rêve de Dan. Haut n'importe quelle moitié. Comprendre. Alors allez dans le fichier et cliquez sur Enregistrer tout maintenant, appuyez sur plus et nous pouvons choisir tout ce que nous voulons. J' utilise Command Shift a. d'un PC sur le vaisseau de contrôle A. Vous pouvez utiliser tout ce que vous voulez. Ça n'a pas d'importance. Tu crois que tu te souviendras de Ots et oui, c'est comme ça qu'on va le faire. Ça pourrait changer très bien. Cliquez sur « OK ». Maintenant, chaque fois que je vais, je peux juste appuyer sur Command Shift a et ça sauve tout. Donc, quand jamais vous allez et prévisualiser et votre navigateur faire déplacer la commande Un premier tout obtenu fichier enregistrer tout le long chemin, juste pour que tout est à jour parce que vous pouvez parfois être aperçu quelque chose dans Chrome et aller, cela ne fonctionne pas. Je pensais que j'avais juste changé ça et c'est juste parce que tu n'as pas sauvegardé les documents. Très bien, c'est comment éditer CSS et comment créer un petit raccourci désactiver sur le tutoriel suivant. 10. Centrer votre site Web dans Dreamweaver à l'aide d'un conteneur: Hé, dans cette vidéo, nous allons prendre notre site web, qui s'étend actuellement à l'infini. Nous allons le faire ; où il est maintenant tout centré et n'a qu'une largeur maximale d'environ 1200 pixels. Quand je le redimensionne, et c'est toujours au centre. Allons-y et faisons-le maintenant en utilisant Adobe Dreamweaver. Actuellement, si je prévisualise dans un navigateur cette chose mon en-tête continue pour toujours. Ce que j'aimerais que vous fassiez, c'est rester ici au milieu quand il arrive à une certaine largeur, largeur maximale d'environ 1200 pixels. Sinon, ça a l'air bien sur mon ordinateur portable ici. Mais si vous ne l'êtes pas, sur un très grand écran, comme un iMac. Je suis un des gros gars de 27 pouces, vous allez avoir votre logo sur le côté et votre navigation va être comme un kilomètre à droite, cependant, de ce côté. Nous avons besoin d'une sorte de limites maximales et nous voulons qu'elles soient centrées, à gauche ou à droite. On va le faire à Dreamweaver en utilisant un conteneur. C' est assez facile. Retour à Dreamweaver. Ici, dans Dreamweaver, j'ai besoin d'envelopper tout ce que je peux voir sur ma page dans un conteneur. Cela inclut, mon en-tête pour le moment et c'est à ce sujet. Donc le corps est tout ce que je vois sur la page, donc je veux l'en-tête ici. Je veux que tout ça soit à l'intérieur d'un conteneur que je peux centrer. Ensuite, l'en-tête viendra pour le trajet, avec tout le site Web à l'intérieur de ce conteneur. Pour le faire ici dans ma vue en direct, vous pouvez simplement cliquer sur votre « En-tête ». Vous voulez voir cet en-tête ici. Si vous trouvez que vous cliquez sur l'image et que vous ne pouvez pas vraiment la trouver, ce que vous pouvez faire, vous voyez ici, cela s'appelle votre sélecteur de balises. J' ai mon image sélectionnée là, elle est là. Il y a un, une étiquette autour, puis il y a une cachette autour de ça et il y a un corps autour de ça. C' est un bon moyen de sélectionner sur ces choses. Cliquez sur le « En-tête » ou cliquez simplement ici sur le côté. On va aller à Insert. Sous HTML, nous allons faire cette chose appelée un div. divs sont super communs dans la conception web ; ce sont des divisions de l'espace. Ce que nous allons faire, c'est que nous allons cliquer dessus et nous allons obtenir ces options ici. Ce qu'il me demande est, est-ce que je veux que ce div soit placé avant la chose que j'ai sélectionnée, qui est un en-tête. Est-ce que je veux après ça ? Est-ce que je veux l'envelopper ? Enroulez-le autour de l'extérieur ou est-ce que je veux le niter ? Qui signifie que je veux un bourrage à l'intérieur de l'en-tête ? Comme nos images. Dans notre cas, c'est rep, ok, j'ai l'en-tête sélectionné. Je voudrais que ce conteneur s'enroule autour de l'extérieur afin que l'en-tête soit à l'intérieur. Cliquez sur « Rep ». Il est probablement préférable de voir ici en mode code, vous pouvez voir ce div est enroulé autour de l'en-tête. Impressionnant. Maintenant div est un vrai nom générique pour conteneur. Nous allons utiliser beaucoup de tags div sur tout le site. Nous devons lui donner un nom afin que nous puissions lui dire de faire une chose précise. Parce que si je dis div, je veux que tu sois centré. Chaque div dans tout ce site va être centré et ce ne sera pas ce que nous voulons. Ce que nous faisons, c'est aux pods, nous avons défini le nom ici et ce qu'il fait, et ensuite nous allons l'appliquer ici en vue en direct. Pour définir le nom, nous faisons ici dans ma conception CSS un panneau, nous cliquons sur « Styles ». Nous avons dit comme devenir global et nous allons lui donner un nom, au sélecteur cliquez sur le bouton « Plus ». Maintenant, jusqu'à maintenant, nous avons défini des choses qui existent déjà dans notre HTML. Vous pouvez voir ici nous avons défini en-tête. Vous pouvez voir ici veut définir le corps. Des choses qui existent déjà. Ce que j'aimerais faire est de lui donner un tout nouveau nom ; celui qui n'existe pas sur la page maintenant, un nom vraiment unique, parce que si je commence le style du div, rappelez-vous que cela va s'appliquer à tous. La façon dont nous les rendons uniques est que nous leur ajoutons un nom et ceux-ci sont appelés classes. Pensez qu'un sélecteur de classe est juste un nom que je lui donne et la façon dont vous définissez les classes est de mettre un arrêt complet ou un point au début de votre nom. Cela dit à Internet que c'est quelque chose de spécifique que j'ai inventé et que je vais appeler le conteneur minier. Tu appellerais n'importe quoi. On pourrait appeler ça sandwich à la banane et ça fonctionnerait toujours. Nous appelons notre conteneur. Si vous allez utiliser un sandwich à la banane, vous pouvez utiliser des espaces. Vous devez vous assurer que si vous allez faire du sandwich à la banane, vous devez utiliser un sandwich spatial. Ensuite, vous devrez expliquer à celui qui travaille sur votre site web et expliquer pourquoi vous avez appelé votre conteneur un sandwich à la banane. Mais de toute façon, alors on lui donne un nom, assurez-vous qu'il a un arrêt complet au début. Donnez-lui un nom, utilisez des minuscules. La plupart du temps, ça fonctionnera avec des dessus et des bas, mais pas. Maintenant, ici, vous voyez où il est dit « Show SIT ». On va l'éteindre. Nous l'avons eu dans un tutoriel précédent. Il vous montre tout ce qui est appliqué à ce conteneur jusqu'à présent et il n'y a rien. Nous allons gagner des billets pour que nous puissions tous les voir. La première chose que nous allons faire pour centrer notre site Web est que nous allons donner une largeur maximale. Nous allons dire, au lieu de devenir aussi grand que vous le souhaitez pour toujours, nous allons dire que j'aimerais une largeur maximale et que nous allons utiliser, nous allons en fait correspondre à ce que nous avons fait ici dans Illustrator. Dans Illustrator, nous avons décidé que notre plus grande largeur que nous ayons conçue est de 1200 pixels. Maintenant, ce n'est pas une taille spécifique absolue qui doit être, vous pourriez être réveillé à 1024, ce qui était une taille vraiment commune. Douze cents, c'est plus courant maintenant ; cela ne cesse de changer. Cela dépend vraiment de ce que vous voulez que la plus grande taille soit. Suivez-moi. Do 1200, fonctionne bien. plus petite à la plus grande taille que vous devez être est probablement l'étain. Étain 24 ou 1 024. Ne va pas plus petit que ça. Retournez dans Dreamweaver. Je veux dire est que vous pouvez obtenir une largeur maximale de pixels et vous ne pouvez être que 1200 de large. Pour une raison quelconque Dreamweaver en ce moment, double tape beaucoup de mes lettres. Vous le verrez tout au long de ce cours. Je ne peux pas le faire arrêter. Quoi qu'il en soit, donc 1200 pixels est la largeur qui va être. Je vais prévisualiser dans un navigateur. Quand je l'étire, je vais le déplacer ici et l'étirer par pièce. Ça ne marche pas. Pourquoi ? C'est parce que nous l'avons créé dans Dreamweaver, mais nous ne l'avons pas encore appliqué. Allons dans Dreamweaver. Ce que je veux dire par là, c'est que nous l'avons créé ici et nous l'avons installé et nous avons dit que c'est la largeur maximale. Mais ici, nous ne l'avons pas réellement appliqué à ma div, donc nous devons l'ajouter. Ce que vous devez faire est de sélectionner le div. Si vous ne pouvez pas le sélectionner et dire que vous avez cliqué sur ce bouton, rappelez-vous que la balise sélectionnée ici est vraiment pratique et qu'elle a saisi la div. Ici, vous pouvez ajouter une classe ou un ID, et nous allons taper dans notre classe. Qu' est-ce qui se passe au début d'un cours ? C' est vrai, une période ou un arrêt complet. Vous pouvez le voir là-bas parce que Dreamweaver est super utile, il est en fait ajouté le mot conteneur là pour moi. Je pouvais le taper, mais il l'a présélectionné pour moi, il y en avait 10. Maintenant, je vais obtenir un aperçu dans un navigateur. Mais je vais d'abord faire est de désactiver le petit raccourci cool, rappelez-vous. Sinon, enregistrez tous les fichiers. Maintenant, nous allons le vérifier dans un navigateur. Maintenant que div appelé conteneur dit ne pas être plus grand que 1200. La raison pour laquelle je dis ne pas être quelque chose de plus grand est parce que je veux vraiment qu'il soit plus petit ; parce que nous allons descendre à la tablette et trucs mobiles. Au lieu de simplement utiliser la largeur, utilisez max-width, alors n'allez pas plus que cela, mais en dessous, faites ce que vous voulez. Notre prochain problème, c'est qu'il n'est pas centré. Il fait la bonne largeur, mais il ne se concentre pas sur ma page. C' est je ne sais pas, nous avons traversé une transformation dans le web design ; où tout le monde le voulait à gauche, personne ne le voulait à droite, et puis tout le monde veut que cela soit centré maintenant. Allons-y et faisons-ça. Pour le faire. C' est assez facile. Assurez-vous que styles.css global, assurez-vous que vous conteneur sélectionné et tout ce que vous faites sur la marge est où il dit ce petit pixels, basculer vers auto, pixels auto pour faire les marges gauche et droite auto. Cliquez sur « Enregistrer tout » dans le navigateur. Nous avons un site web centré. Tant que tout va à l'intérieur de ce conteneur div, tout sera centré comme ça. Retournons à l'intérieur. Ça va être tout pour centrer notre site Web. Nous allons maintenant partir et créer un média requêtes parce qu'à l'heure actuelle, nous avons une largeur maximale pour comme vue de bureau. Je voudrais faire quelques changements et ajouter quelques requêtes média pour tablette et mobile. C' est ce que nous considérons comme responsive web design. Allons-y et faisons-le dans la prochaine vidéo. 11. Créer un site Web qui s'adapte aux téléphones portables et aux tablettes à l'aide de Dreamweaver.: Hé, là. Dans ce tutoriel, nous allons examiner l'ajustement de notre site pour les différentes tailles de tablettes et téléphones mobiles et les médias appelés création et les voir en haut ici. Je vais attendre à part un bureau, le coup ici est gris. Si je passe à une taille de tablette, vraiment plus vite. Il est rouge et je redescend sur mobile et c'est vert. Je sais qu'il y a des couleurs laides qui sont juste là comme des espaces réservés pour tester nos requêtes média. Allons-y et faisons-le maintenant à Dreamweaver. Il est donc temps de passer plus réactif et convivial pour les mobiles, et c'est vraiment facile. Donc, ce que nous devons faire, c'est que nous devons examiner quelque chose appelé une requête médiatique. La première chose que nous devons faire est de regarder cette barre de requêtes de médias. Si vous ne pouvez pas voir le vôtre est une petite icône ici. Vous pouvez allumer et éteindre. Si vous n'avez pas cette barre, ou cette icône, cela peut signifier que vous utilisez une version antérieure de Dreamweaver, peut-être voir un ensemble qui n'a pas cette option. Malheureusement, vous ne pouvez pas suivre ce tutoriel particulier. Vous pouvez toujours faire des requêtes multimédias, mais vous devez les coder à la main. Vous ne pouvez pas utiliser ce truc sympa tout et directive en haut ici. Donc, nous allons utiliser cette chose, et il vous indique ce qu'il faut faire est de cliquer sur cette icône pour ajouter une requête immédiate. Cette icône est par ici et là. Donc on va cliquer dessus. Nous allons dire que notre premier sera tablette, parce que nous avons déjà fait le bureau. Desktop est considéré comme mondial dans notre cas, certaines personnes conçoivent leurs sites Web autour du mobile d'abord. Ils ont tourné d'abord mobile signifie que je vais le concevoir pour le mobile. Ensuite, je vais faire une requête immédiate qui écrase le mobile avec la tablette. Puis au-dessus de ça et de bureau, j'ai conçu mes sites Web à l'inverse. Je trouve toujours que mes étudiants trouvent cela plus facile. Nous avons conçu la version de bureau principalement parce que souvent il y a plus que ce côté et c'est façon dont la plupart des gens voient notre site Web dépend de votre type de site Web, mais certainement mes trucs, 80 pour cent des vues proviennent de bureau. J' utilise donc une approche de bureau d'abord. Nous allons cliquer sur ce petit bouton plus à nouveau, et nous allons d'abord travailler sur la tablette. Donc on va dire qu'une tablette va être entre ces deux-là. Il va avoir un minimum d'une certaine taille et un maximum d'une autre taille et qui va être considéré comme tablette. Maintenant, il est un peu difficile d'obtenir les mesures exactes parce que ce sont beaucoup de comprimés là-bas et tant de tailles différentes. Donc ce que nous disons que c'est un minimum d'environ 401 est le plus petit, quelque chose de plus petit que cela, nous considérerons un téléphone mobile et nous ferons une requête média séparée pour cela. Quelle taille devrait-il avoir ? 768 est la largeur d'un iPad, avec quelques portraits. Donc, nous utilisons cette taille. n'y a aucune raison pour que vous ne puissiez pas utiliser 770 ou dire que c'est dans un avenir lointain quand il y a beaucoup de tailles différentes, vous pourriez décider que, c'est trop petit ou différent taille. C' est juste un gymnase repose sur le dimensionnement pour l'instant, mais ce serait une taille vraiment typique à utiliser. Où est-ce que ça va aller ? Il va aller à l'intérieur de mon « Styles.css ». Je vais cliquer sur « OK ». Vous pouvez voir ici, il y a ma petite barre bleue, c'est « min-max ». Il y a un minimum et un maximum et nous allons avoir des choses déclenchées quand il arrivera à cette taille là-bas. Jetons un peu un coup d'oeil à notre « Styles.css ». Cliquez sur les documents connexes ici. Vous pouvez voir que c'est à quoi ressemble la requête immédiate. C' est la syntaxe. Maintenant encore, si vous utilisez une version de Dreamweaver qui n'a pas ce joli petit arc pratique. Vous pouvez simplement le taper ici. Donc, cela est considéré comme ma tablette. Ce que nous ferons, c'est que nous prouverons moins de dizaines et juste au-dessus. Nous allons ajouter quelques commentaires juste pour que plus tard, nous sachions de quoi nous parlons et ce que faire pour ajouter des commentaires dans Dreamweaver est comme option ici, Css appliquer commentaire. Css appliquer les commentaires ressemblent à ceci. C' est une barre oblique, puis un extrait et ça doit aller d'ici. On peut dire que c'est peut-être ma tablette. Maintenant, cela est ignoré par le navigateur et c'est juste ici pour les humains. Donc, vous n'avez pas besoin d'écrire ceci comme signifie juste que plus tard, je peux dire avoir une vue de tablette et vous savez où aller. Alors la prochaine chose que nous allons faire est de mettre dans notre vue mobile. On va cliquer sur ce petit plus à nouveau. Nous allons utiliser un max, donc une « largeur maximale » de 400, il va aller dans styles.css. Cliquez sur « OK » et voir ici. Donc n'importe où jusqu'à un maximum de 400 sera ma vue mobile. Ensuite, ils ont tendance à voir prend le relais et c'est juste un pixel de plus que ma vue mobile. Si les choses étaient au-dessus de 400, je n'ai aucune idée de ce qui se passera probablement juste combattre dans le sang et Css partout, mais alors assurez-vous juste 400 et puis 401 est quand le prochain commence. Maintenant, dans ce tutoriel, nous allons juste faire ; un mobile, une tablette et un ordinateur de bureau. Vous trouverez beaucoup d'autres sites qui ont cinq vues ou quatre vues ou sept vues. Nous allons juste faire trois et professionnellement c'est normalement tout ce que j' attaque est petit pour les tablettes mobiles, moyennes et une grande taille et les vieux ordinateurs de bureau. Vous pouvez voir ici mon Css, je vais ajouter ce commentaire à nouveau, donc je vais juste copier celui-ci et le coller ici sur le dessus. Ce sera mon point de vue mobile. Ce que je ferai aussi pour rendre les choses un peu plus faciles, c'est que nous mettrons en haut, en dessous de ça. Nous allons mettre, cela va être ma vue globale et globale /vue de bureau. Vous dites juste que quand vous travaillez, vous pouvez savoir des choses. Il ne se passe rien d'autre que les boîtes de couleur ici. Maintenant, nous devons faire quelques légers ajustements. Donc, ce que nous allons faire est de retourner à « Code source », et nous allons à « CSS Designer » et nous allons dire mon menu de styles, nous avons ces gars avant de continuer à cliquer sur « GLOBAL » et ces deux n'existaient pas. Maintenant, nous pouvons dire que j'aime un global je dis « GLOBAL » a mes deux styles que nous avons le « en-tête » et le « conteneur ». Donc, ce que j'aimerais faire, c'est que je veux ajuster la couleur d'arrière-plan de cet en-tête. Je voulais le faire pour les quintes de tablettes, qui est ce min-max, qui est 4012-768 et vous pouvez voir qu'il n'y a pas de sélecteurs ici. Donc rien de spécifique pour le modèle et je vais dire qu'il va toujours être maintenant, en-tête. On en a un pour l'en-tête. Vous remarquerez que nous avons plus d'un « GLOBAL », « en-tête » maintenant et un pour tablette. Maintenant, celui-ci ici et tablette ne fait rien encore. Je vais juste aller à la couleur de fond, choisir une grande couleur évidente comme le rouge et conserver. Je vais traîner ça dedans. Ce que vous remarquerez, c'est que rien ne se passe et puis appuyez sur Enregistrer tout ne change toujours pas. C' est pourquoi je n'aime pas utiliser cette vue en direct en haut ici. Ce ne sont que quelques petites choses qui ne sont pas mises à jour. Mais si je le vérifie dans mon navigateur, le voici, et je le fais glisser vers le bas et j'arrive à mon 768 quelque part ici. Hey, et puis mes amis sont toutes les requêtes médiatiques sont, vous dites juste entre ces deux pixels, faites quelque chose de différent et nous sommes en train de dire remplacer le frapper et de le rendre rouge au lieu de gris. On peut faire la même chose pour le saut mobile ici. Je vais dire styles.css dans mon maximum de 400 rappelez-vous que c'est ma vue mobile. Je vais dire que vous en-tête, taper et revenir à nouveau. Je vais dire la couleur de fond de vert. Nous ne allons pas garder cela comme un exemple, gris enregistrer sur, et je le vérifie sur mon navigateur. Tellement grosse tablette, mobile. Une chose géniale et c'est toutes les requêtes des médias sont. Donc on va passer et faire des choses comme si j'aimerais que la police soit plus grande. J' aimerais que cette boîte s'empile différemment. C' est comme ça que nous allons accomplir toutes ces choses différentes. Vous pouvez voir que la police deviendrait centrée lorsqu'elle est mobile ou qu'elle est alignée à gauche mais qu'elle est dans la tablette. C' est plus petit quand c'est un mobile et c'est ce que nous allons faire. Nous allons dire que je veux que ce titre soit plus petit, s'il vous plaît, juste à l'intérieur de cette requête médiatique. C' est tout le design web réactif est. Comme indiqué dans Dreamweaver. Vous pouvez voir ici que celui-ci est mis à jour. Maintenant dans le calme, n'a pas encore. Sauvegardez tout ce que vous pouvez si vous voulez continuer à utiliser cela, vous pouvez obtenir un « View » et aller à « Refresh View », ou un « F5". Ça devrait le faire fonctionner. Cool. Donc, je vais double-cliquer sur cette zone grise pour revenir complètement. On va regarder la prochaine vidéo. Nous allons regarder l'aperçu sur votre téléphone ou tablette. Il y a une fonctionnalité vraiment cool en utilisant l'aperçu en direct, faisons cela dans le prochain tutoriel. 12. Tester votre site Web Dreamweaver sur un téléphone mobile ou une tablette: Salut là. Dans ce tutoriel, nous allons regarder l'aperçu de notre site Web à partir de Dreamweaver directement sur notre téléphone mobile et il va apparaître ici, voir le fond vert et ensuite regarder ceci. C' est un fond rouge. La bonne chose à ce sujet est que nous n'avons pas à l'héberger sur un site Web et nous pouvons simplement faire des ajustements sur Dreamweaver directement et automatiquement mises à jour sur un téléphone mobile. C' est vraiment cool. Pourquoi je le tiens près de mon visage ? C' est parce que mon appareil photo ne zoomera pas quand je l'arriverai près de la caméra comme ça. Dis, je le tiens ici. Très bien, allons dans le tutoriel. La première chose que nous devons faire si nous allons tester sur un téléphone mobile est que nous avons besoin d'un site Web réel qui a quelques différences quand il est sur mobile. La vue du bureau, c'est gris, si je descend à la tablette, il devient rouge et vers le bas au téléphone portable, c'est vert. Nous l'avons fait dans un tutoriel précédent. Maintenant, ce que je veux faire est en bas ici avec aperçu du navigateur en temps réel. Cliquez dessus et avant d'utiliser Chrome, maintenant nous allons utiliser celui-ci. Je vais devoir le faire tourner parce que, pour une raison quelconque, mon écran tombe en bas. Tu dois être capable de voir ça. Tu vas faire deux choses que nous ferons dans la vraie vie. Vous pouvez soit utiliser un lecteur de code QR pour numériser cela, soit vous pouvez taper cette URL, vous l' envoyer par e-mail. Je passerai à la vraie vie humaine Dan, et il vous montrera le reste. Temps de démonstration. Ce que vous faites est de télécharger un lecteur de code QR. Il y a beaucoup de gratuits en ligne, tout sur l'App Store. J' en ai un sur un Android ici. À peu près, vous le pointez juste sur le petit code QR que nous avons généré et espérons être assez proche. Fait un peu de bruit sonore et il vous emmène sur le site Web. Maintenant, vous allez entrer votre mot de passe pour votre Adobe ID et éventuellement, j' espère que je vais charger. Voilà, c'est la version verte. La caméra se concentrera-t-elle sur elle, peut-être, et regardera-t-elle cette horizontale ? C' est la version rouge pour tablette, version verte pour mobile. C' est parce qu'il fait la largeur de l'écran plutôt que les appareils réels trop difficiles à essayer de choisir des appareils, ils changent trop, donc vous finissez par faire juste des largeurs d'écran. Oui, la bonne chose à ce sujet est que vous arrivez alors, coller cela à côté de votre ordinateur et le brancher à la puissance et juste être en développement sur Dreamweaver et mises à jour instantanément tout le temps sur votre appareil mobile, vous pouvez avoir un tablette là et appuyez sur le diable les gens qui passent, vous ressemblez à un pro. Revenons dans la version de capture d'écran de moi-même. Avant de partir, ce que nous voulons faire, c'est que nous avons ajouté ces couleurs folles pour approuver que les requêtes média fonctionnent. Ce n'est pas ce que nous voulons pour le site à long terme. On va y aller et les enlever. Styles que nous allons mettre pour la tablette d'abord en-tête. En fait, nous allons juste supprimer le sélecteur entier. Vous pouvez simplement supprimer la couleur d'arrière-plan, mais en fait, je ne pense pas avoir besoin de l'en-tête pour autre chose. Célèbre derniers mots mais je vais en-tête moins au revoir là-bas, celui qui est dans l'en-tête du téléphone mobile moins, au revoir. Maintenant, la réactivité ne fait rien, mais au moins nos requêtes média sont toujours là pour notre travail futur, tablette et vue mobile, à partir et vers le haut. 13. Créer un menu hamburger déroulant mobile dans Dreamweaver Partie 1: Dans cette vidéo, nous allons créer notre menu de bureau à l'allure laide, que nous allons styler dans la prochaine vidéo. Mais quand il descend à tablette et mobile, il se transforme en un [inaudible]. Allons-y et faisons-le maintenant dans Dreamweaver. La première chose que nous allons faire est que nous allons mettre dans cette vidéo comme les composants principaux et les allumer et éteindre pour les différentes vues. Après cela, dans la vidéo suivante, nous allons regarder faire le JavaScript qui rend l'action de clic se produit lorsque vous cliquez sur les menus déroulants. Dans la dernière vidéo, ou au moins le tiers de ce petit morceau ici sera le style et juste pour le rendre joli. La première chose que nous devons faire est d'ajouter notre navigation et c'est cette balise de navigation ici. Je veux que ce soit juste après cette image et je clique sur cette image et je me souviens qu'il y a une image, mais l'image est à l'intérieur de ce tag, c'est le lien que nous mettons autour d'elle. Cliquez ici, cliquez sur l'image, et nous allons cliquer dessus et dire le tag qui est en fait autour de l'extérieur de cette image, nous voulons juste vous parler s'il vous plaît et dire navigation. Cliquez sur lui. Je voudrais après la chose que j'ai sélectionnée et il est là. La première chose que je veux faire avec la navigation est à un style pour elle, pour le faire basculer vers la droite parce que je ne veux pas en dessous ici, je le veux en haut juste ici. Allez dans le concepteur CSS et styles.css. Je le voudrais dans Global. Je voudrais un sélecteur appelé nav et je vais utiliser la flèche vers le haut. Rappelez-vous la spécificité. Cela signifie juste que je dis la balise nav qui est à l'intérieur de la tête [inaudible] à l'intérieur du conteneur. Je n'ai pas besoin de m'inquiéter parce que je n'ai qu'une seule balise de navigation pour tout ce document et donc je n'ai pas besoin d'être spécifique. Je ne vais plus dire de spécificité dans ce cours parce que c'est vraiment difficile à dire. Je veux la balise de navigation, s'il vous plaît , flotter à droite, flotter comme celui-ci ici. Je vais dire qu'il a volé à droite et qu'il saute juste sur le côté droit de la page. Impressionnant ! Maintenant, la prochaine chose que je veux faire est que je veux mettre deux balises div à l'intérieur de cette navigation. Une balise div va être pour mon menu mobile, qui va être mon plus grand menu cette chose de ligne stripy. La vue du bureau va être ces boutons colorés qu'il dit à propos de nous et contactez-nous. Fondamentalement, ce qui se passe est que vous devez séparer les balises div, une avec le menu mobile et une avec le menu du bureau et vous dites simplement éteindre une vue mobile, puis l'autre, et basculer autour de votre bureau. Allons asseoir ces balises div sur nav sélectionné. Je vais aller à Insérer et je clique sur div sur cela à l'intérieur s'il vous plaît. On a une nouvelle étiquette div. Vous pouvez le voir. Il y a mon GPS, et il y a le gars qui est à l'intérieur. On a besoin de ces tics ? Nous ne le faisons pas. J' aime supprimer le texte ici en mode code. supprimer en mode live fonctionne la plupart du temps, mais je trouve que c'est un peu plus facile à faire en mode code. Vous pouvez voir qu'il y a mon balise de navigation qui s'ouvre et se ferme et il y a la balise div à l'intérieur de celui-ci. J' en ai besoin deux. Ce que je peux faire, c'est ici que je peux glisser sur la balise div. Je peux en dire un autre, s'il vous plaît. Juste après lui. J'en ai deux. Mettons dans les différents composants et ce premier ici je voudrais insérer une image qui va imbriquer à l'intérieur. Je voudrais que ce soit mon menu burger, qui est sous fichiers d'exercice, images, et nous allons utiliser le menu burger version SVG. Vous pouvez utiliser PNG. SVG est la nouvelle version graphique vectorielle évolutive. Cliquons sur Ouvrir. Il va dire que vous avez choisi quelque chose à l'extérieur, voulez-vous le mettre là pour vous ? Vous dites oui, s'il vous plaît mettez-le avec mes images. Il s'il vous plaît, parce que je l'ai déjà pratiqué, pour le rendre super lisse pour cette vidéo. J' ai déjà le mien, [inaudible], vous n'aurez pas à cliquer sur remplacer. Vous remarquerez que c'est très grand. Avec ce sélectionné, je peux dire à la [inaudible] vous mains a effectivement voulu être vingt pixels. Tu décides de la taille que tu veux que le tien soit. Impressionnant. La prochaine chose que je veux faire est de me débarrasser de ce texte et comme je le dis, j'aime supprimer le texte ici en mode code. Je n'ai pas besoin que ça prenne plus. J' ai une balise div et il a mon image à l'intérieur. Mettons dans la version de bureau. A l'intérieur de ce gars, puis-je cliquer dessus il y a cette balise div. Je vais mettre quelque chose qu'on appelle une liste non ordonnée. C' est ainsi que nous décrivons les listes, et la navigation est juste une liste d'options que vous pouvez aller dans une page, pour sélectionner sur cette div, et je vais dire HTML, je vais trouver celle-ci appelée liste non ordonnée. une liste ordonnée est une liste numérotée et une liste non ordonnée est une liste à puces. Vous pouvez voir des points de balle. Nous allons les retirer du style un peu plus tard. Ce que je veux faire, c'est que je veux changer ce texte. Je veux dire que celui-là sera le sujet de nous. Je vais utiliser des chapiteaux. Vous n'avez pas besoin de revenir et de nous contacter. est peut-être moi, contactez-moi à propos de moi parce que c'est juste mon portefeuille de toute façon. Cliquez dessus et vous pouvez voir que j'ai deux points de balle. Jetons un coup d'oeil à la façon dont ils sont construits. Il y a une étiquette div. A l'intérieur, il y a ma liste d'honneur. Vous pouvez voir le début et la fin et à l'intérieur de cette liste non ordonnée ou des éléments de liste, sont les différents points de puces. C' est exactement comme ça qu'il est construit et il va être important pour quand nous allons et commencer à les coiffer plus tard. Ce que j'aimerais faire pendant que nous frappons est de leur donner un lien hypertexte. Je vais double-cliquer sur nous, sur moi, et cliquer sur celui-ci qu'il a, il devient orange, cliquez sur le lien hypertexte. Où est-ce qu'il va aller ? Ça va aller au hachage. Hash est juste, je ne sais pas encore. C' est ce que signifie cette icône, ou le signe de la livre, vous pouvez mettre about-us.html et en minuscules, mais je ne sais pas vraiment comment ça va être appelé. Si vous ne savez pas, mettez simplement dans le hachage et cela lui permet d'être un lien, mais cela ne provoque pas d'erreur. Vous pouvez changer ça plus tard, disant qu'on me contacte, les deux vont se hacher pour le moment, je ne sais pas. La prochaine chose que je voudrais faire est de les allumer et de les désactiver aux différentes vues parce que le moment où vous pouvez les voir tout le chemin à travers le bureau de tablette mobile. Ce que je vais faire est de faire d'abord le mobile, en essayant de double-cliquer dessus. On y va. Je veux que vous éteigniez, quand vous êtes une vue de bureau. Ce que je voudrais faire est d'aller à ma conception CSS un panneau et mon styles.css et ma vue de bureau, qui est globale. Je veux dire, et je crée un nouveau sélecteur et celui-ci sera mobile point. Cela va être une vue mobile de classe. Ce que j'aimerais faire, c'est quand c'est une vue mobile. C' est la chose qui va contrôler cela, vue mobile et je voudrais que vous n'en affichiez aucun. Aucun signifie juste oui, je ne peux pas te voir. Rien ne se passe à cause de ce que je dois faire est de trouver la balise div qui entoure l'extérieur de cette image et de l'appliquer. Qu' est-ce que je fais ? Je peux le faire ici, image sélectionnée. Maintenant, j'ai mon tag div sélectionné et il y a div signifie que point mobile va ça, il est parti. Cool. Cette balise div est maintenant appelée balise div de vue mobile. Ce que nous disons, c'est que lorsqu'il s'agit d'un ordinateur de bureau global, je voudrais que vous n'en affichiez aucun. Le problème est qu'il n'affiche aucun tout le temps. C' est pourquoi ils l'appellent global et pas seulement spécifiquement de bureau. Parce que ce que ça veut dire c'est que ça veut dire tout. Ça veut dire global, c'est tout. Sauf si l'onglet de UC est fait quelque chose de différent. Mais au moment où j'accède à mon CSS et que je regarde ma vue de table, ma vue de table ne dit rien. Il ne remplace pas la vue mobile. C' est une feuille de style en cascade, donc elle coule vers le bas et coule sur tous ces, moins qu'ils disent quelque chose de différent et qu'ils ne le font pas, ils disent la vue mobile. On n'a rien dit. C'est ce qu'on va faire. Nous allons dire sur les styles, CSS, quand j'arrive à la vue de table, sélectionnez une vue mobile à point nommé. Encore une fois, il va, au lieu de dire aucun maintenant, nous allons dire que vous appliquez bloc, comme un bloc pesé. On dirait qu'aucun. Je pense que bloc de bois, bloc de béton, quelque chose de solide. Je peux le voir maintenant. marche pour moi de toute façon. Allons le vérifier dans un navigateur. Vues en direct n'est pas génial. Rappelez-vous, enregistrez tous vérifier un navigateur. Mon menu mobile et la vue du bureau peuvent être vus. Ce n'est rien. Maintenant, quand il descend à la vue de table [inaudible], son bloc. blogueur wood, et quand il descend à la vue mobile, il disparaît à nouveau. Ce que nous devons dire, c'est des styles, CSS quand il est à la vue mobile, ce qui est mon maximum de 400 pixels. Comme je fais un autre sélecteur appelé point ma vue mobile. J' aimerais dire que vous êtes le bloc d'affichage aussi. Je vous vois à tous les deux. Dis, eh bien, teste là. Oui. Il n'est pas aligné. C'est bon. Nous ferons le style plus tard sur la mécanique ici en ce moment pour pouvoir le voir, génial. Ce que je veux faire maintenant est de créer une nouvelle classe appelée vue de bureau et je veux l'appliquer à ces boutons ici, et je veux l'activer et la désactiver en fonction de la vue. Créons de nouveaux styles, et je ne veux pas le faire dans Global. Je pourrais, et je pourrais dire, j'aimerais que tu sois bloqué, mais c'est déjà bloqué. Vous pouvez toujours voir ce barrage à la vue de bureau. Je n'ai pas besoin de répéter ça. Ce que je dois dire, c'est que la tablette est éteinte. Je vais aller à ma vue de table et cliquer sur ma sélection, et j'appelle celle-ci, vue de bureau. Je ne l'ai pas appelé vue du bureau du tout et quelques fois, c'est la méchanceté. Vue Bureau et je vais dire affichage, aucun ne va. Maintenant, je dois l'appliquer. Je sélectionne dessus. Cliquez sur cette balise div qui est enroulée autour de l'extérieur et cliquez ici, cliquez sur arrêt complet pour que le bureau ne l'applique pas et il n'apparaît pas. Cela se produit un peu si vous devez appuyer sur disable, puis revenir en arrière et annuler ceci et j'espère qu'il est là. Enregistrez un bureau [inaudible], mais ne le faites toujours pas. Je vais laisser ça dans la vidéo juste parce que tout le monde, je vais juste taper physiquement, frapper retour. Il va dire, voulez-vous créer quelque chose de nouveau ? Il suffit de continuer à appuyer sur le retour sur votre clavier jusqu'à ce qu'il disparaisse, et il est appliqué. Si je clique sur ce gars, vous pouvez voir qu'il y a ma balise div et que cette classe est appliquée. Ça m'arrive un peu dans Dreamweaver. C'est juste que c'est. Dites, eh bien, nous allons prévisualiser et un navigateur. Vous pouvez voir la vue Bureau. Je peux le voir, mais quand ça arrive à la tablette, au revoir, il n'est pas. Mais c'est de retour, il est immobile. Faisons la même chose, styles.css et la vue mobile. Je voudrais créer un sélecteur appelé dot desktop. Impressionnant. J'aimerais vous dire que j'aimerais que vous n'en affichiez aucun. S' il vous plaît aller, enregistrer vieux, empêcher un navigateur. Paru. Ils sont gentils. C'est tout ce qu'on fait. Quels deux tags div, l'un s'appelle les mobiles appelé Desktop, et nous allons juste les allumer en utilisant l'affichage aux différentes requêtes de médias. Le problème maintenant est que cela ne fonctionne pas encore. Nous allons passer par maintenant et utiliser en JavaScript pour faire cela un petit bouton déroulant et faire que cela fonctionne. Vous êtes prêt pour votre premier bit de JavaScript. Allons-y et faisons-le dans la prochaine vidéo. 14. Utiliser Javascript jQuery pour créer un menu hamburger déroulant mobile dans Dreamweaver: Salut là. Dans cette vidéo, nous allons regarder ajouter du JavaScript pour prendre ce menu de bureau à l'aspect laid. Quand il passe à mobile, puis lorsque vous cliquez sur le mobile, il vous montre la version de bureau laid. Ce petit clic à bascule sur et désactivé. Je me rends compte que le style n'est pas génial et il y a quelques petits problèmes avec la mise en page, nous allons le faire dans la vidéo après celle-ci. Ce que vous devez vraiment faire est de faire attention au clic magique montrant chose que nous allons faire en JavaScript. Allons-y et faisons-le maintenant. La première chose avant de commencer à le faire, est qu'est-ce que JavaScript ? Il y a trois composants à un site Web  : HTML, CSS et JavaScript. HTML est facile, pensez-y comme le nom. Ce sont les choses qui apparaissent sur la page, les objets, c'est ce bouton ici, c'est cette image, c'est ce texte. Ce sont tous dans mon HTML, et ce sont des choses. Ensuite, vous avez votre CSS, et ce CSS décrit simplement le style des choses. C' est ma couleur de fond, c'est la quantité de rembourrage qu'il a, c'est la jolie chose, c'est l'adjectif. Je les considère, HTML comme des noms, CSS comme des adjectifs, les mots décrivant, et puis vous avez le verbe, qui est JavaScript. Que se passe-t-il lorsque l'utilisateur clique dessus ? C' est le fait des choses. Il se peut que l'utilisateur clique sur un bouton, comme dans notre cas ici, ce menu descend, ou peut-être quand un utilisateur clique sur le bouton « Lire » de la vidéo, ou fait glisser un curseur, ou réalignement des choses sur une page, donc c'est généralement l'utilisateur interagissant d'une manière ou d'une autre avec votre site Web, JavaScript se produit. Quand je dis que nous allons apprendre JavaScript, nous allons en fait utiliser quelque chose appelé jQuery. JavaScript est beaucoup plus compliqué. Ce que certaines personnes intelligentes ont fait, c'est qu'elles ont créé cette chose appelée jQuery, et ce qu'elles font, c'est une bibliothèque construite sur JavaScript pour le rendre facile pour les gens comme nous. Au lieu d'avoir à écrire beaucoup et beaucoup de syntaxe, nous pouvons utiliser beaucoup de langage simple qui rend les choses meilleures pour les humains, et cela fait à peu près tout ce que nous devons faire en termes de conception web front-end. Nous n'apprenons pas JavaScript essentiel, nous apprenons quelque chose appelé jQuery, qui est juste un langage plus facile utilisé sur JavaScript. Allons-y et faisons-le maintenant. Ce petit extrait va aider à expliquer ce que nous faisons. Je ne savais pas si je devais le laisser dans la série de tutoriels ou non. Je vais le laisser et probablement juste pour expliquer, espérons-le, au lieu de me suivre aveuglément. On va comprendre ce qu'on fait ici. Fondamentalement, ce que nous faisons est que je prévisualise cela dans Chrome, et j'ai juste quelques trucs nerdy ici pour vous aider à vous montrer. Fondamentalement, ce que je voudrais faire est cette petite navigation ici, quand l'utilisateur clique dessus sur son téléphone cellulaire, je voudrais utiliser JavaScript. Lorsque l'utilisateur fait quelque chose, j'aimerais que le JavaScript ajoute une classe à ce petit menu à bandes appelé Développer, et cela développera le menu. Parce qu'en ce moment, il y a le menu du bureau, ai une classe que je vais probablement appeler le menu du bureau, pas d'autres classes. Ce que j'aimerais dire, c'est quand il est cliqué pour utiliser par magie JavaScript pour injecter une classe ici pour la faire évoluer. Regarde ça. Gardez un oeil sur ce truc ici. Quand je clique dessus, je suis un utilisateur, en utilisant mon téléphone mobile, je clique dessus, et comme par magie, cette classe supplémentaire, là sortir qui est ajouté. Ensuite, cette petite classe là que nous allons définir dans notre CSS pour dire, rendre agréable et grand et nous montrer le menu là-bas. C' est ce que nous avons besoin du JavaScript. Allons apprendre à le faire en utilisant JavaScript et jQuery. La première chose que nous allons faire est de créer cette classe Expand. Nous allons le mettre dans notre styles.css. Nous allons le mettre dans Global, et nous allons dire, et je vais sélectionner ceci, nous allons le créer. Ça va avoir l'air tout point. Souviens-toi, c'est un cours que nous inventons. Ça s'appellera Expand. Ce que nous aimerions que cette chose fasse est d'afficher, et nous allons dire bloc d'affichage. Votre petit travail en tant que classe est quand vous êtes postulé à quoi que ce soit est de montrer les choses. Mais ce que nous allons faire est d'obtenir cela pour appliquer avec JavaScript, pas codé en dur comme nous l'avons pour tout le reste. La prochaine chose que nous devons faire est de créer notre fichier JavaScript et de le connecter à notre page d'index. Maintenant, quand nous l'avons fait avec, rappelez-vous, notre styles.css c'est arrivé automatiquement parce que nous avons ce petit panneau de concepteur CSS cool. Pour le faire avec JavaScript, nous le faisons un peu le long chemin. Allons à Fichier, Nouveau, et allons à Nouveau document, cliquez sur « JavaScript », et cliquez sur « Créer ». Ça s'appelle sans titre. Sauvegardons ça. Où allons-nous le sauver ? On va le mettre à l'intérieur de notre bureau, à l'intérieur de mes dossiers appelés « Dan's Awesome Portfolio ». Je pourrais l'enregistrer avec le reste des fichiers, mais il est vraiment commun de créer un dossier appelé js. A l'intérieur de ce dossier, je vais mettre dans ce fichier appelé, il est vraiment courant de l'appeler Scripts. Vous pouvez appeler tout ce que vous voulez, mais la plupart des gens l'appellent script.js. Cliquez sur « Enregistrer ». Maintenant, allons-y et fermons. On vient de le faire. Nous l'avons fermé car maintenant nous devons le lier à ce fichier index.html. Vous pouvez configurer ici mon index et le code source. Vous pouvez voir ici, rappelez-vous le styles.css, cela a été fait automatiquement pour nous. Nous devons le faire manuellement, donc nous devons mettre un retour, et nous devons aller à Insertion et nous devons descendre à Scripts. Appelez à nouveau Scripts. Il sait qu'il va au fichier js. Trouvez des scripts, cliquez sur « Ouvrir » et voilà. Celles-ci sont liées entre elles. Appuyez sur « Enregistrer », et vous pouvez voir qu'il y a mon styles.css et maintenant mon nouveau petit fichier de scripts. Ce menu burger ici est parce que c'est un SVG. Si vous utilisez la version PNG de notre petit menu auparavant, cela n'apparaîtra pas là. Ignorez-les pour le reste du cours. Allez à script.js, et maintenant nous arrivons à ajouter le JavaScript, ou dans notre cas, jQuery qui contrôle que l'activation et la désactivation. J'ai totalement menti. Nous ne sommes pas encore prêts à écrire JavaScript. Ce qui se passe, c'est que votre ordinateur, ou au moins le navigateur sur lequel les gens regardent votre site Web, comprendra bien JavaScript, mais il arrivera à la jQuery, qui est fondamentalement abrégé pour JavaScript et va, « Tu parles de la pendaison ? Ce n'est pas JavaScript. » Ce que nous devons faire dans notre code source, c'est que nous devons haut ici lui dire où chercher, pour les définitions de jQuery, et vous le faites en utilisant quelque chose appelé un CDN ou un réseau de diffusion de contenu. Il y en a quelques-uns en ligne. Nous allons aller à Google, et je vais taper jQuery CDN. Il y a un tas d'endroits vers lesquels vous pouvez relier. Vous pouvez aller à JQuery.com. J' utilise celui de Google. Où est-il ? En bas. Où est Google ? developers.google.com. Ici, il dit que c'est ce petit lien pour jQuery. Je vais prendre tout extrait. En fait, commence là-haut, attrape tout ce morceau. Ce que j'ai fait pour vous, c'est que je l'ai mis dans vos fichiers d'exercice et que ce code est quelque chose appelé jQuery CDN. Tu n'as pas besoin de venir ici. Vous pouvez simplement copier et coller le mien. Je vais le copier, et tout ce qu'on fait c'est le jeter ici. Salut tout le monde. Je m'appelle Taylor et je travaille pour Daniel. Je veux juste sauter ici et vous dire que Daniel a fait une petite erreur quand il a importé la bibliothèque jQuery dans ce fichier. Ça va être dans l'autre sens de ce que Daniel a. Actuellement, il appelle d'abord le fichier de scripts, puis le jQuery. Le fichier de scripts s'appuie en fait sur jQuery pour qu'il s'exécute correctement. Si vous n'avez pas cela dans le bon sens, votre navigation risque de ne pas fonctionner. Il est important que vous l'alterniez. Vous attrapez le jQuery et vous le mettez au-dessus des scripts. Cela devrait éliminer la plupart des problèmes que vous pourriez avoir avec votre barre de navigation, avec peut-être ne pas fonctionner. Les fichiers complétés de ce tutoriel contiendront également l'ordre de fichier correct pour ce code. Ça nous dit juste où se trouve la bibliothèque. Pourquoi ne l'avons-nous pas localement comme nous avons script.js et notre CSS sur ma machine ? La raison en est que c'est une très grande bibliothèque, et l'avantage d'utiliser, disons, celui hébergé par Google, cela signifie que, disons, un utilisateur navigue sur le net et ils vont à 10 sites qui utilisent tous jQuery car des charges de sites l'utilisent. Quand ils arrivent sur votre site et que le navigateur dit, « Nous allons devoir charger jQuery », et dit, « Ne vous inquiétez pas à ce sujet. Je ne le chargerai pas parce que je l'ai déjà chargé à partir de cet autre site Web que j'étais enfin. » C' est pourquoi nous utilisons un CDN et un lien vers un site Web plutôt que de l'avoir réellement sur votre machine. Cela signifie juste que Google va l'avoir en ligne tout le temps. Beaucoup de gens l'utilisent et que vous n'avez pas à le télécharger comme un millionième fois quand ils arrivent sur votre site parce que c'est juste le même ancien qui a été lié à là à nouveau, donc le navigateur de l'utilisateur ne dérange pas d'aller et apprendre à nouveau toute cette nouvelle langue. Il est déjà là. Il le sait déjà. Longue histoire courte, il suffit de copier et de coller cela, de le coller dans le haut, et cela aidera. Allons à script.js. Ici, nous allons apprendre un peu de jQuery. Juste pour que vous sachiez, lorsque vous concevez des sites Web, neuf fois sur 10, vous allez utiliser jQuery plutôt que JavaScript pur. La première chose que nous devons faire est de lui dire que nous utilisons jQuery. Vous pouvez voir le petit indice de codage qui aide là. Ce que nous allons dire, c'est que nous allons mettre entre parenthèses et beaucoup d'accolades. Préparons-nous pour eux. Tout d'abord, on va le mettre entre parenthèses. A l'intérieur de cette parenthèse, nous allons écrire le mot document. Merci code pour aider. Après les crochets, nous allons taper prêt. Tout cela signifie simplement que jQuery et ne pas charger jusqu'à ce que le document soit prêt. Parce que ce qui peut arriver, c'est que jQuery peut commencer à faire son truc avant même que le document soit chargé ou que la page entière soit chargée, et cela provoque juste beaucoup d'erreurs. Ce que nous avons dit est d'attendre que le document se charge et ensuite faire votre truc, et vous constaterez que vous n'avez pas d'erreurs. La prochaine chose que nous devons faire est de lui dire de faire quelque chose. Entre parenthèses, nous disons : « Faites quelque chose, s'il vous plaît. » Mais nous ne l'appelons pas, faites quelque chose s'il vous plaît. Nous appelons ça une fonction. Réfléchissez, j'aimerais que vous fassiez quelque chose, mais le langage de code s'appelle une fonction. Maintenant, nous mettons un ensemble de parenthèses, ensemble d'accolades, et à la fin nous mettons un point-virgule. Ces choses ici, je ne fais jamais vraiment rien avec ces premiers crochets. Ce sont des attributs qui sont normalement laissés vides. Ces accolades sont les parties vraiment importantes. On va mettre tout ce qu'on veut faire à l'intérieur de ça. Ce dernier petit point-virgule veut juste dire fini ici. J'ai fini. J' ai fini d'écrire mon jQuery. N' allez pas plus loin. Toutes les bonnes choses vont à l'intérieur de ces accolades. Je pourrais les taper ici, mais ça va sembler un peu désordonné. Je vais annuler, et nous allons faire un retour entre les deux, et nous allons juste les taper ici. Maintenant, je veux répéter, je voudrais dire que j'utilise jQuery. Mais au lieu de dire que jQuery est un mot long et quel est le raccourci $. Donc $ pense juste est le raccourci pour le mot jQuery. Nous allons remplacer celui-ci ici, parce que vous seriez bizarre si vous utilisez le mot jQuery si on utilise $. Nous disons, « jQuery, je voudrais faire quelque chose. » Dans ce cas, nous allons utiliser à nouveau des parenthèses. A l'intérieur de ces crochets, je voudrais ajouter des apostrophes. Pas de citations, d'apostrophes. Parce que ce que j'aimerais faire, c'est que j'aimerais que vous fassiez quelque chose avec la classe, souvenez-vous de la période pour la classe, quelque chose avec la vue mobile. Qu' est-ce qu'on aimerait en faire ? J' aimerais faire attention à un clic. Quand on vous clique, j'aimerais que vous fassiez quelque chose. Rappelez-vous, nous n'utilisons pas le mot faire quelque chose, nous utilisons la fonction de mot. Même mais une syntaxe folle. Supports avec rien dedans, point-virgule où la bonne chose va et à la fin, nous mettons un point-virgule pour dire ne pas continuer et poster s'il vous plaît. Dans les bonnes choses va mettre un retour. Même que ci-dessus, $ pour jQuery. Même chose avec la classe. On va mettre une apostrophe, un point, une vue de bureau. Que souhaitons-nous faire à cette vue de bureau ? J' aimerais ajouter cette chose. Au lieu d'un clic, celui-ci va avoir une classe à bascule. Cette classe à bascule va basculer cette chose appelée apostrophe expansion. Rappelez-vous ce cours que nous avons fait plus tôt. Bizarrement, nous n'écrivons pas dans le plein stop pour celui-ci en particulier. Laisse-le. Sinon, ça ne marche pas. Va à la fin ici et dis de ne plus lire. Cela va, nous l'espérons, faire fonctionner notre menu. Allons le rétrodater. On va dire qu'il y a un cours élargi que j'ai. Je voudrais activer et désactiver, vue du bureau lorsque l'affichage mobile est cliqué. Si c'était un brin de l'esprit et qu'il y a des virgules et des apostrophes qui volent partout, j'ai créé un code. Vous pouvez copier et coller dans vos fichiers d'exercice. Vous pouvez aller télécharger ceux qu'ils sont gratuits. C' est écrire un peu de jQuery. Allons voir si ça marche est la chose principale. Rappelez-vous, enregistrez tout, sautez dans notre navigateur rétrécir vers le bas, cliquez sur le bouton, et cela ne fonctionne pas. Je dois faire une pause et comprendre pourquoi ça ne marche pas. Je reviens tout de suite. Je suis de retour et j'ai compris. Ça arrive au meilleur d'entre nous. Je veux vraiment réenregistrer la vidéo et me faire paraître super génial, mais je veux aussi vous faire savoir que ça arrive toujours. Ça arrive à tout le monde. Ce que j'ai fait était sous le styles.css, cela fonctionne réellement, je l'ai testé, et la classe expansion est ajoutée. n'y a rien de mal avec le jQuery, c'est le styles.css. Ce qui se passe, je l'ai mis dans, je voulais développer sur le bureau, mais je n'avais pas vraiment besoin de cette chose parce que c'est dans Global. J' ai besoin que cela soit en tablette et en mode mobile. Je vais prendre ça, tu es au mauvais endroit, tu les coupes. Je veux que tu sois là. Vous pouvez voir ma requête multimédia ici. C' est pour mon maxmin pour tablette. Alors juste avant la fin du crochet, voir il y a l'ouverture, et il y a la fermeture là-bas. Je vais les mettre dedans. J' ai besoin d'une copie là-dedans et vers le bas vers la vue mobile. J' avais besoin d'une copie là-dedans. Maintenant, allons tester. Maintenant, cliquez dessus. Ça ne marche toujours pas, appuyez sur rafraichir. Maintenant, ça marche. Cliquez sur notre jQuery fonctionne. Ça a toujours l'air moche, je sais, et il y a une mise en page à faire, mais nous allons transformer ça en une autre vidéo parce que celle-ci, Dang, pourrait être la vidéo la plus longue que j'ai faite dans mon histoire de carrière vidéo. Oui. C'est notre jQuery, clicky, mobile et bureau chose de menu déroulant. Maintenant, rendons ce menu agréable. 15. Styliser notre menu hamburger pour que notre menu ul s'empile côte à côte: [ MUSIQUE] Bonjour, adorables gens de tisserands de rêve. Dans ce tutoriel, nous allons transformer ces boutons de navigation à puces moches en ces beaux boutons rouges et verts. Ignorez la police, la police est toujours moche. Mais nous allons le faire dans la vidéo suivante. Mais faisons les boutons maintenant. La première chose que nous allons faire est de se débarrasser de ces vilains points de balle. On le fait en coiffant cette chose ici. Quelle chose nous coiffons ? Nous allons styler le Li, qui est dans l'ul, qui est dans ma vue de bureau. Allons-y et faisons-ça. Maintenant panneau CSS Designer, faites-le mon style.css, je voudrais que cela apparaisse globalement. Cliquez sur les sélecteurs. Parce que j'ai fait ce truc sélectionné, c'est un peu pré-rempli, mais il est adapté et c'est un peu ce que je veux. Mais si je monte et descend, le rend plus spécifique, j'ai dit que ça ne dirait plus de spécificité, mais le là que vous allez, donc vers le bas signifie que vous obtenez plus spécifique jusqu'à devient moins spécifique. Ce que j'aimerais faire parce que si je l'ai laissé là et dit que je veux juste styliser les li à l'intérieur des ul qui s'appliqueraient sur tout le site à chaque fois qu'il y a une liste non ordonnée. J' ai peut-être des points de balle juste dans les copies normales. Ce que je veux dire est dans la flèche vers le bas de mon clavier et dire que je veux les li qui apparaissent à l'intérieur de ul qui apparaissent à l'intérieur de cette classe appelée vue de bureau. Ai-je besoin de cette étiquette A ici ? Je ne le fais pas. Pourquoi ? Parce que je joue juste avec les Li's, pas m'inquiéter pour l'étiquette A. C' est le Li qui lui donne le point de balle. Cliquez sur Retour. C' est mon premier style et j'aimerais dire et texter. J' aimerais descendre et essayer de trouver une décoration de texte. Je voudrais trouver la liste -style -type : undefined. Je veux le mettre à zéro. Vous voyez les points disparus. Super. Nous allons travailler lentement à vendre différents, ce qu'on appelle des sélecteurs composés. Rappelez-vous les sélecteurs que nous avons traités avec les classes avant d'avoir les points devant eux. Ceux-ci sont appelés composés parce qu'ils sont des bits. Il y a un peu de classe là-bas, et il y a des morceaux de ces tags réguliers ici. Donc le composé mis est tout composé ensemble. Vous n'avez pas besoin de vous souvenir du mot composé de toute façon. À l'heure actuelle, ceux-ci sont empilés les uns sur les autres. C' est leur état par défaut pour les li, et cette pile sur l'autre est appelée bloc. La valeur par défaut, ceux-ci sont dans un affichage appelé bloc, ce qui signifie qu'ils s'empilent les uns sur les autres. Nous voulons changer cela. Nous aimerions monter en haut ici, à la mise en page. Nous aimerions trouver l'affichage. Et au lieu de bloquer, nous allons choisir inline-block et ça les empile côte à côte. Facile. Si nous les coiffons tous de la même couleur, je pourrais entrer dans ma couleur de fond et changer la couleur de fond. Mon problème est que je veux qu'ils soient différents. Regardons mon fichier illustratif. Vous pouvez voir un illustrateur, je voulais que ce soit deux couleurs différentes. Si je décroche le li, cela signifie que les deux vont devenir rouge ou vert. Ce n'est pas ce que je veux, je veux qu'ils soient des couleurs différentes. Retournons dans Dream tisserand. Créons deux classes. Nous allons créer un bouton appelé rouge et bouton vert et les appliquer à eux. La raison pour laquelle nous faisons cela est que nous pouvons ré-utiliser ce bouton vert ou rouge parce qu'il y aura d' autres boutons sur notre site pour lesquels nous allons l'utiliser. Ici, peu importe ce que vous avez sélectionné, mais il va aller dans styles.css, global, puis sélectionnez ceci puis ok plus, oubliez ce qu'il y a dedans. Nous allons créer notre propre classe et l'appeler btn- et nous allons appeler le premier rouge. Pourquoi l'appelons-nous btn-rouge et non rouge btn ? Cela signifie juste qu'ils vont être coincés l'un à côté de l'autre dans le CSS ici bouton vert, bouton rouge. On pourrait avoir un bouton bleu et c'est plus facile de les trouver comme ça. Cliquez sur le bouton rouge et je vais obtenir un fond, et je vais choisir une couleur. Si vous avez suivi mon cours d'illustrateur, vous auriez su exporter le CSS. Nous allons rapidement regarder ça maintenant. Dans illustrateur ici, je vais cliquer sur ce fond ici. Je vais aller à Window, nous allons aller à CSS où j'utilise des propriétés CSS. Ça va me dire ce que les couleurs de fond. C' est ce que je veux ici. Je vais double-cliquer dessus, cliquez le bouton droit dessus, cliquez sur Copier. Si vous avez suivi le cours illustré, il se peut que vous l'ayez exporté en tant que document texte. Mais comme nous sommes à la fois le concepteur et le développeur web frontal, nous allons simplement copier et coller directement à partir du fichier Illustrator. Je l'ai copié. Retournez dans Dream tisserand puis ici je vais cliquer sur la couleur de fond. Nous allons revenir à nos nombres hexadécimaux. Vous pouvez voir dans illustrateur, il y avait en fait les deux options. Je trouve simplement cela plus facile juste parce que ce sont des codes plus simples à copier et coller. En couleur de fond ici, nous allons revenir à l'hexadécimal et nous allons nous assurer que nous avons le hachage devant lui. Je n'ai pas copié ça d'Illustrator. En retour, c'est ma petite couleur de fond. Je vais l'appliquer. À quoi l'appliquons-nous ? Est-ce qu'on l'applique à l'étiquette a ? Je ne pense pas que ça compte. Nous avons probablement des problèmes plus tard. Espérons que ce n'est pas le cas. Nous allons entrer ici et aller btn et là il y a rouge, belle. Revenons dans la couleur rouge, pas le rembourrage dont nous avons besoin, mais nous le ferons dans une seconde. On va le faire ensuite. Nous allons créer un nouveau sélecteur, tout est sélectionné correctement. On appellera ça un point btn. On appellera ça vert. Même chose. Je vais sauter dans Illustrator. Ici, en illustrant, j'ai cliqué sur ce type qui a attrapé ce gars. Copier, pour une raison quelconque, je ne peux pas faire la commande c pour copie contrôlera c sur un PC. Je ne sais pas pourquoi. Tu pourras peut-être le faire, mais ici je vais y aller. Je vais aller à mes nombres hexadécimaux, laisser le hachage là-dedans. C' est mon vert et appliquez-le à celui-ci. Ici, nous allons .btn. C' est l'autre raison pour laquelle nous l'appelons btn parce qu'ils étaient tous regroupés là quand nous tapons b. Nous voulons ajouter un peu de rembourrage en haut et en bas de ces boutons. C' est là que c'est un peu d'essai et d'erreur, je vous promets, je ne savais pas par cœur, j'ai juste essayé les deux options de style ici parce que vous êtes comme je peux toujours le styler li et ajouter un peu de rembourrage à cela. Je l'ai fait en sachant que ça ne fonctionnait pas, alors nous avons dû opter pour une méthode différente. Allons pour la méthode cassée. C' est toujours un bon pour commencer. J' ai ces li qui sont à l'intérieur de mes ul, qui sont spécifiquement à l'intérieur de ma vue de bureau, ce qui est génial. Ils sont vraiment spécifiques. Je vais dire que j'aimerais un peu de rembourrage. Je vais le traîner vers le haut. Vous pouvez voir que ce n'est pas vraiment ajouter de rembourrage, c'est juste le pousser par le haut. C' est là que je suis allé, pas mal. Voyez cette poubelle, éteignez ça. Ce que j'ai décidé c'est que j'ai cliqué sur ce gars et que j'ai fait un nouveau style et je vais le rendre plus précis. J'appuie sur ma flèche vers le bas. Il doit être la vue du bureau li et ce que je devais faire est ceci une balise. En bas, vous pouvez voir qu'il y a une étiquette à l'intérieur d'un li, à l'intérieur d'un ul. Je laisse ça ici aussi parce que j'aimerais juste vous dire la réponse, mais croyez-moi, ces choses que nous pensons certainement je suis sûr à 100% que ça va marcher alors ça ne fonctionne pas à la fin. Tu dois regarder les étiquettes et y aller, Ok, qu'est-ce que je pourrais essayer d'autre ? Dans notre cas, le lien actif, le lien hypertexte, qui est à l'intérieur du li, qui est à l' intérieur de l'ul, qui est à l'intérieur de la vue du bureau. Celle-là va marcher. J'espère que ça va marcher. Je vais aller à la mise en page du haut. Je vais ajouter un peu de rembourrage à cela et juste le faire glisser vers le haut. Voilà, tu y vas. Celle-là fonctionne. Qu'est-ce que c'est ? Il est 13 en haut et en bas 13 et il est 43 à gauche et à droite. 43, encore une fois, mon clavier semble taper en double Fours, 13 en bas, et 43 de ce côté. Vous pouvez les voir sur mes petits boutons. Impressionnant. La prochaine chose que je veux faire est, j'ai besoin d'une sorte de bouger un peu et vous pouvez utiliser des inconvénients. Donc, en fonction de celui-ci, nous utilisons juste des marges moins et cela ne fonctionne pas. Frappez la poubelle. C' est un peu bizarre parfois comme le travail est à l'étiquette a à l'intérieur du li qui est à l'intérieur de l'ul. Si vous êtes frustré, ne vous inquiétez pas. C' est une frustration générale dans toute l'industrie. Peut-être que je peux le faire à celui-là. Le li ul et moi allons moins ici. Cela ne fonctionne pas non plus et je m'assure donc que j'ai besoin d'aller à la vue réelle du bureau. Allons sélecteur, il y en a un que j'ai déjà eu, c'est appelé vue du bureau. Si je le fais à celui-ci, vous pouvez voir qu'il commence à fonctionner. Je vais cliquer et faire glisser parce que je n'étais pas sûr de comment cela fonctionnait, cool quand je ferme pour celui-là, moins cinq pixels qui monte. Parfois tu aimes, est-ce celui-là, c' est celui-là, pourquoi n'est-ce pas ? Vous finissez par devoir créer beaucoup de classes et les supprimer juste pour déterminer celles qui le contrôlent. On va faire un célibataire. La prochaine chose que je veux faire est de supprimer les soulignements. Les soulignements sont contrôlés par, vous pouvez jouer avec tous ces, mais c'est en fait la, une balise parce que c'est spécifique pour les hyperliens. On va aller à celle-là, on va trouver un type, et on va descendre ici pour prendre des décorations de texte et en choisir aucun. Ok, par défaut, c'est sur sous-jacent. Cool. Allons à la couleur de la police avant d'entrer dans la même, espérons-le et la couleur de la police vient de l'illustrateur. Je clique sur ce texte ici et il est là. Il y a la police et la couleur, et je clique dessus avec le bouton droit, cliquez sur copier, retour dans Dream Weaver et nous allons aller à la couleur de la police. Hash le laisse là. C' est un peu comme si c'était un blanc cassé. La prochaine chose que je veux faire, et pour faire fonctionner ces boutons, est de vouloir l'appliquer à la police. En ce moment, il y a Times New Roman, qui ne va pas marcher pour moi. Je voulais regarder en utilisant des polices, quelque chose d'un peu différent de Arial et Times New Roman et les polices intégrées. Nous allons regarder cela dans un tutoriel séparé, qui est juste après celui-ci. 16. Ajouter différentes polices à un site Web dans Dreamweaver: Salut là. Dans cette vidéo, nous allons changer cette horrible police Times New Roman en cette belle police Open Sans Condensed. Nous allons aussi devoir changer l'orthographe de ceci. Je viens de le remarquer. Vous avez probablement été dans tout ce cours en disant : « Euh, changer ? » Je vais le changer avant la fin de ce cours, promis. Allons ajouter des polices en utilisant Dreamweaver. Donc ce que je veux faire maintenant, c'est changer la police qui est ici. Maintenant, je pourrais trouver, dire ma vue de bureau et vous pouvez voir ul li et le tag a. C' est ce que je veux changer. Comment puis-je savoir que c'est celui que je veux changer ? Je dois taper ici et je dis font-family et j'en choisis un autre. Je sais que ça change. Je ne veux aucune de ces polices qui sont dans les valeurs par défaut, ok, donc je vais les supprimer, mais c'est comme ça que j'ai trouvé laquelle doit être changée. Mais je pourrais changer celui-ci et ça marcherait. Je pourrais installer ma nouvelle police, qui va être Open Sans Condensed. Mais le problème avec le faire c'est qu'il faudra le faire pour cela. Tout le monde qui prend à mon document, va devoir passer par là et je dois trouver la famille de polices pour eux. Ce que font les concepteurs, surtout au début, c'est qu'ils définiront la police globalement. Nous dirons tout dans ce document, tout sera ouvert sans condensé. Donc, vous choisissez quelle que soit votre police de copie corporelle. Je vais regarder mon dossier Illustrator. C' est un cas d'utilisation spécial, c'est là pour le haut, mais j'utilise la police condensée ici pour le type et le bas ici, et je l'utilise sur les pages précédentes ici. C' est l'Open Sans Condensed. J' ai décidé que c'était ma police principale. Je vais maintenant passer par et définir cela comme ma valeur par défaut. Tu le fais à Dreamweaver. Donc, dans Dreamweaver, ce que nous devons faire, c'est que nous devons styliser le body tag. Le tag body est, rappelez-vous si je clique à l'intérieur de toute façon ici, le nav, je suis à l'intérieur de l'en-tête, qui est à l'intérieur du conteneur, qui est tout à l'intérieur du corps. Le corps est tout ce que je vois sur ma page. Rappelez-vous que l'en-tête est tout ce que l'ordinateur voit et que le corps est tout ce que l'utilisateur voit. Si je bloque ça, tout ici sera Open Sans. Pour le faire, je vais être sur toutes les sources. Non, je ne vais pas être une source toutes. Je vais être dans styles.CSS. Je vais le faire dans le monde entier et je vais cliquer... nous n'avons pas encore de tag de corps. Nous devons sélectionner ceci et nous choisissons un corps. Body est l'une de ces balises qui existe déjà et n'a pas besoin d'un arrêt complet devant lui. Juste ceux que nous créons, il y a des classes qui en ont besoin. Body, on va taper ou texter et on va aller à la famille de polices et on pourrait en choisir un. Le seul problème avec l'utilisation, disons que tu aimes Gill Sans, tu dis : « Oui, Gill Sans est bon. » Vous pouvez voir qu'il vient pour le tour parce que tout est changé pour Gill Sans. Mais ce qui se passe en fait, c'est qu'il dit : « Hé, personne qui visite mon site Web, est-ce que vous avez Gill Sans sur votre machine ? » « Non. » « Eh bien, vous avez Gill Sans MT ? » « Non. » Nous aurons alors Myriad Pro ? Cela fonctionne de cette façon vers le bas de la liste jusqu'à ce qu'il en trouve un et normalement il finit à Arial. Tu ne veux pas ça. Tu veux plus de contrôle. Vous voulez vraiment dire, « Utilisez la police, je veux dire, pas juste deviner quelques choses. » Il est très rare de les utiliser maintenant. Donc ce qu'on va faire, c'est aller à Bin Gill Sans, au revoir. Ok, et on va mettre une nouvelle police. Allons à font-family et nous allons aller à celui-ci appelé Gérer les polices. Maintenant, cela charge quelque chose appelé Adobe Edge Web Fonts. Tout cela, c'est qu'une polices d'Adobe qu'ils ont donné pour nous d'utiliser commercialement gratuitement. Il y a quelques petites options de recherche utiles en haut. Nous allons utiliser des trucs que nous avons conçus à partir d'illustrateur. Vous pouvez voir ici en illustrateur. Je me suis assuré de choisir des polices Web lorsque je conçois. Si vous utilisez Illustrator, ne sélectionnez pas une police aléatoire sur votre ordinateur, assurez-vous d'utiliser des polices Web. J' ai fait ça. Ces deux polices sont disponibles sous forme de polices Web. Mais si je ne l'ai pas fait, je peux passer par là et dire, « Je veux regarder quelques polices de titre. » Il me donne plus de polices de titre. Disons que vous voulez des polices de copie corporelle, c'est celle-là. C' est plus comme des polices standardisées. Je vais les éteindre tous les deux. Vous pouvez choisir une police de script, vous pouvez choisir des serifs. Vous pouvez décider juste pour vous aider à choisir un style. Je vais les éteindre. Je vais chercher une police. Nous utilisons Open Sans et nous utilisons la version condensée. Pourquoi ? Juste parce que c'est vraiment bon pour les en-têtes, surtout parce qu'en tant que police de copie corporelle, parce qu'elle est mince, vous pouvez insérer beaucoup de caractères, donc les en-têtes vraiment longs sont plus susceptibles de finir sur une ligne plutôt que de se diviser en deux. Mais c'est tout à fait un choix de design de style. Ce que je vais faire, c'est que j'ai choisi ça, coché la petite coche dans le coin, et vous cliquez sur Terminé et rien ne se passe. Vous l'activez, puis allez à font-family et il apparaîtra ici. « Bonjour ? » Maintenant, cliquez dessus, puis il apparaîtra, cool. Un petit avertissement apparaîtra probablement, le mien a été désactivé. Désactivé n'est pas un mot, désactivé. Il dit juste que nous avons ajouté quelques choses ainsi qu'un avertissement, Il dit juste, nous avons dû activer la normale et le poids de la police est de 300. C' est juste dit - comme normalement, ils ne viendraient pas par défaut, mais c'est juste fait pour que vous puissiez faire fonctionner cette police. L' autre chose qui s'est passé est, et comme, c'est tout, comme si on avait une police en marche. Tu n'as plus à t'inquiéter. Mais juste pour vous dire que vous avez cette chose ici, donc dans mon index et mon code source, et en haut ici. Rappelez-vous que nous l'avons mis dans le lien vers JavaScript et le lien vers le CVN et notre feuille de style. Cette chose vient d'être injectée par Dreamweaver pour que nous le fassions fonctionner. Fondamentalement, ce qu'il fait, c'est qu'il va télécharger la police. Vous pouvez voir les polices de bord, Open Sans Condensed est chargé pour nous, donc nous n'avons rien à faire avec. On doit juste le laisser là. Faisons un tout sauver, c'est juste cocher. Cela fonctionne dans notre navigateur. Génial, il est là. « Bonjour ? » Monte sur le fond ici. Ce n'est pas tout à fait exact. Eh bien, ce n'est pas le cas, mais ne vous inquiétez pas si le tien est encore cassé comme ça, nous allons corriger ça dans la prochaine vidéo aussi. Il y a quelques petites choses que nous devons faire pour que ça marche. Bon, passons à la prochaine vidéo. 17. Corriger le style du menu hamburger déroulant mobile dans Dreamweaver: La première chose que nous allons faire est un bureau semble bien, une tablette qui a besoin d'un peu de travail, qu'il a de vrais problèmes ici [inaudible]. Le plus gros, c'est que vous pouvez voir qu'il n'y a pas assez d'espace physique pour s'adapter. C' est bon dans le dossier, mais vous pouvez voir quand il se rapproche d'ici, il a fini par essayer d'occuper le même espace. Ce que je vais faire, c'est essayer de rétrécir ce logo. Pour le faire, je vais cliquer sur le logo. Je vais aller à mes sources. Maintenant, vous remarquerez que ces choses viennent d'apparaître, soit il est allé là-bas avant. C' est à partir de la police que nous avons ajoutée à partir des polices de bord de fouet d'Adobe. On les ignore pour le reste de la classe. Amusant. Ce que je veux est dans les styles dot css, et nous allons le mettre dans notre mobile. On va créer un sélecteur, il est deviné exactement ce que je veux. Je veux styliser cette image qui est à l'intérieur d'une balise. La balise a lui donne son lien vers, retour à la page d'accueil et à l'intérieur de l'en-tête, qui est spécifiquement ici. Si vous avez plus d'une image dans ces données, cela ne fonctionnera pas. Vous devrez peut-être y ajouter une classe, vraiment spécifique, peut-être la classe de logo et l'installer, mais parce que je n'ai qu'une image dans l'en-tête. Cela va fonctionner correctement écrit. Ce que je vais dire, c'est la largeur, s'associer au pourcentage. J' ai dit à 80. Continuez à mettre des chiffres doubles pour moi, et je me suis plaint de ça tout le cours. Huit trois pour cent. Pourquoi est-ce que ça allait être 83 chiffres doubles. Parce que je l'ai déjà remarqué. Ce que cela signifie, c'est que quelle que soit la largeur entière n'est pas une garantie de 80 pour cent de sa taille d'origine. La chose cool à ce sujet, comme vous pouvez le voir quand il arrive ici, ça va continuer à se mettre à l'échelle. Maintenant, la plupart des téléphones portables, vont être plus petits que 320 environ. Si vous avez des téléphones mobiles qui sont plus petits que cela, il va devenir vraiment petit. Vais-je développer une solution de contournement spéciale pour eux ? Je ne le suis pas. Je vais juste dire que 300 et plus qui fonctionne et que c'est la plupart des téléphones portables dans le monde. La prochaine chose à faire est de faire une tablette d'abord. Est-ce que quand je clique sur ceci, le null coller l'un sur l'autre côte à côte. Tu pourrais le laisser si tu les aimes côte à côte, mais je veux coller le mien l'un sur l'autre. Ce que nous faisons est sous les styles dot css et maintenant tablette, nous disons probablement cet article ici, cette vue de dessus UL, LI. On peut dire que j'aimerais que vous affichiez. Rappelez-vous que nous avons dit B inline-block, qui l'a obtenu, bloc côte à côte. On va juste le mettre l'un sur l'autre. Nous ajouterons un caressage juste pour qu'ils ne s'assoient pas directement les uns sur les autres. Génial, c'est un idiot pour tablette. Ce que nous allons faire, c'est que nous allons, vous pouvez voir que nous n'avons pas cette classe ici dans la vue mobile, donc nous allons juste le dupliquer. Vous pouvez le dupliquer, aller dupliquer, faire une requête multimédia et nous le mettrons dans le mobile ainsi. C'est le cas, et les deux. Noix. La prochaine chose est la bigamie et vous finissez par pousser à gauche ici. J' ai joué avec des manèges flottants et des manèges en doublure et ça n'a tout simplement pas fonctionné. Ce que j'ai travaillé, c'est que ces deux sont à l'intérieur cette vue mobile nav et des classes de vue de bureau à l'intérieur de ce nav. Ils ne peuvent pas être à l'intérieur du même nav, qui va occuper le même espace. Ce que nous devons faire est de saisir le mobile, nous faisons coder la vue ici allait attraper la div mobile, toute cette ligne, couper.. Ci-dessus, je ne vais jamais le coller. Il y a, ils vont supprimer quelques espaces vides afin qu'il s'aligne. Bien sûr qu'il en a perdu un peu à partir, il a perdu son vol. Ce que nous allons faire est que nous allons aller aux styles dot css et nous allons dire, sous la vue, va en faire un, il y a une vue mobile et nous allons dire retourné à droite s'il vous plaît. Donne-moi une seconde. Cette métallurgie. Boutons apparaissent ce que je pourrais faire et une vue mobile ici, je pourrais obtenir tout le texte, pour aligner sur la droite aussi bien. Mais je pourrais aussi faire, c'est, je ne sais pas, ça m'ennuie que ces gars ne soient pas alignés sur la droite. Je veux cette vue de dessus du disque. En mode Tablette et Bureau, je voudrais que vous vous aligniez sur la droite. Ça a l'air un peu mieux. J'ai fait table-view. Maintenant, nous devons le faire pour la vue mobile. En bas. Toutes ces choses ne marchent plus. Faisons les mêmes choses dans le mobile. Je voudrais que la vue mobile s'aligne à droite, ou en fait flotter vers la droite et la vue du bureau, j'aimerais que vous obteniez le texte à aligner vers la droite. Joli. On y arrive. Une des dernières choses que je pourrais faire, c'est que le rembourrage en haut me rend un peu fou. Qu'est-ce que c'est ? Cette chose, il met l'image qui est à l'intérieur de ma vue mobile sur la tablette. Est-ce que j'ai quelque chose d'un peu de travail, puis-je vous impliquer ? Ça marchera probablement. Donnons-le un coup d'envoi. Il ajoute juste une marge à la monture de glissement supérieure et il s'alignera. Maintenant, je fais glisser d'avant en arrière un co pixels, donc vers le bas sur mobile et probablement avoir à faire la même chose. Parfois, les styles circulent à travers cette tablette sur le mobile. Je vais enregistrer tous éprouvés le navigateur pour m'assurer que c'est vrai. Ça a l'air bien là-bas. Impressionnant. Je dirais que nous sommes là et que c'est une victoire. C' est ainsi que nous créons notre menu déroulant j-query, tout en fonction de nos leçons. Dans la vidéo suivante, nous allons vous montrer comment copier et coller et faire un peu de tricherie. Mais et tu es fier de toi, tu l'as fait marcher ? Si vous ne vous en souvenez pas à la fin de chaque vidéo, j'enregistre une version de l'endroit où je suis. Selon l'endroit où vous êtes coincé, vous pouvez regarder sur l'écran ici quelque part dans le coin inférieur gauche ou dans les commentaires. Ils seront un lien vers le fichier complet de cette vidéo. Vous pouvez comparer le vôtre avec celui-ci, juste voir ce qui a pu mal tourner. Mais si vous l'avez fait et que vous l'avez réparé et que vous avez un clin d'œil. Je suis très impressionné, car il fait très chaud, mais la bonne chose est que la prochaine fois que vous le faites, vous pouvez copier et coller le code que vous avez fait vous-même. Mes amis, passons au prochain tutoriel où nous allons simplement copier et coller pour les gens qui ont triché. 18. Planifier notre modèle Dreamweaver: Salut là. Dans cette vidéo, nous allons parler de modèles. Nous n'allons pas réellement concevoir le modèle dans cette vidéo particulière. Nous allons le faire un peu plus tard, mais c'est à peu près cette fois que nous devons vraiment examiner ce qui va faire partie du modèle et ce qui ne l'est pas. Regardons notre design dans Illustrator. En regardant la conception, il y a quelques bits qui vont faire partie du modèle. Généralement, ce sera toujours l'en-tête et le pied de page et c'est vrai de notre cas. Cela va être le même sur chaque page et c'est la partie centrale ici qui va être unique pour chaque page. C'est ma page d'accueil. Vous pouvez voir ici, même en-tête, même pied de page, mais c'est cette partie centrale qui est différente. Je vais m'assurer qu'il fait partie du modèle, assurez-vous que le pied de page fait partie du modèle. Je vais concevoir ceux maintenant dans Dreamweaver d'abord, puis le transformer en un modèle et pas avant que je commence à concevoir ces pièces intérieures. Nous avons conçu ces pièces intérieures. abord, nous allons devoir les retirer, faire un modèle et essayer de les remettre et faire un travail supplémentaire pour nous. Les autres choses qui feront partie du modèle est cette petite boîte verte ici. Je ne veux pas que cette image change. Ça va être comme ça sur toutes les pages. Je vais faire cette partie du modèle. Si vous vouliez que cela change sur chaque page, vous allez devoir en faire une partie de ce qu' on appelle la zone modifiable, comme ces gars. Il suffit d'identifier à partir de votre conception ce qui fait partie du modèle, de le concevoir d'abord, puis plus tard, nous allons créer des zones modifiables. L' autre chose à considérer est ai-je réellement besoin d'un modèle ? Les modèles ajoutent un niveau de complexité à un site. Les bonus est que lorsque je fais un changement à mon modèle, disons que j'ajoute un élément de menu supplémentaire, il passe par chaque page et le met à jour automatiquement. Super bien si vous avez un site qui dit 50 pages ou plus. Mais si vous avez comme un site Web de 10 pages, je pourrais penser à deux fois à ajouter un modèle. Pourquoi ? Parce qu'à ajoute cette complexité pour un petit peu plus de vitesse. Plus de complexité, un peu plus rapide, peut-être pas la peine pour un très petit site web. Mais nous allons le faire pour celui-ci parce que nous voulons être tous efficaces et officiels. Jetons un petit coup d'oeil à ce qui va être créé dans ce modèle. C' est celui qu'on fait. On va travailler pour ça. Allons à la vue complète en direct, c'est à quoi ça va ressembler. Il va avoir notre en-tête que nous avons fait, il va avoir cette grande image de fond et il n'y aura rien, rien, rien, rien et ensuite un pied de page en bas. Allons créer cela avant de le transformer en modèle. 19. Ajouter une image d'arrière-plan qui se trouve à l'extérieur de notre conteneur principal dans Dreamweaver: D' accord. Dans cette vidéo, nous allons éditer cette image d'arrière-plan et elle devient tout extensible et a une hauteur spécifique, puis devient un peu plus petite et se transforme en mobile. Allons-y et faisons-le dans cette vidéo. Tout d'abord, changeons la couleur de fond. Il est actuellement blanc. Dans Illustrator, il devrait être avec le sélectionné, aller dans les propriétés CSS, et ce sera yay, yay, yay. De retour à Dreamweaver et ce qu'on va faire, c'est qu'on doit tout changer, d'accord ? Rappelez-vous que la balise « tout » est la balise body. Le corps est tout ce qu'on voit. Donc, nous allons changer cela, nous pouvons changer toute la couleur de fond. Cool. Dans les styles sous GLOBAL, nous avons en fait un corps que nous avons fait plus tôt, nous l'avons fait avec la police pour tout. Maintenant, nous pouvons faire le fond pour tout. Aller à l'arrière-plan, la couleur de fond, laisser le hachage là, mettre dans une couleur, revenir, et maintenant tout est une sorte de couleur grise. La prochaine chose que je veux faire est, je veux faire cette grande image en arrière-plan ici. Ok, alors à quelle hauteur il est ? C' est ce haut ici. Vous pouvez voir que mon CSS m'a donné la hauteur de l'image réelle, mais il est en fait coupé à l'intérieur de là. C' est la hauteur réelle que je veux, donc je vais prendre ça. Où est-ce que ça va ? Dans la conception ici, vous pouvez voir qu'il s'enroule réellement autour de mon en-tête, donc techniquement, j'aurais dû le faire d'abord au début du cours, puis mettre ma navigation là-dedans. Je trouve que si nous commençons avec le vrai fond du cours, nous allons entrer dans trop de complexités, il est trop tôt, donc nous allons le faire plus tard. Cela va nous montrer comment moderniser une balise div que nous aurions dû faire plus tôt. C' est assez facile, on a juste besoin de l'enrouler autour de ce type. Allons jeter un oeil. Il va sur les bords et je veux que cette chose continue en quelque sorte sur l' arrière-plan entier en fonction de la taille de l'écran est grande. Faisons ça à Dreamweaver. Cliquez sur mon « En-tête », assurez-vous que vous avez l'en-tête sélectionné, et en fait si je l'enroule autour de l'en-tête, il va toujours être à l'intérieur de ce conteneur. Cette taille de conteneur soit, je pense, 1200 pixels de large. Je ne veux pas qu'il soit contenu là non plus parce que c'est à peu près ce qui maintient l'en-tête en place. Ce que je veux faire, c'est que je veux le mettre juste à l'extérieur de ce conteneur, donc nous devons récupérer le conteneur. Le conteneur est sélectionné alors cliquez ici, cliquez dans le conteneur, et je veux aller insérer un div, et je veux l'envelopper autour du conteneur. Cool. Maintenant, vous pouvez voir ici est div, il n'a pas encore de nom, alors allons créer une classe CSS, et puis nous l'ajouterons ensuite. CSS Designer, Styles, nous allons le faire dans GLOBAL, nous allons créer un sélecteur. On appellera ça une image de héros. Cool. Donnons-lui un style de base pour que nous puissions le voir. Tout d'abord, il a besoin d'une hauteur car au moment où cela s' enroule autour de l'extérieur de cet en-tête parce qu'il n'y a rien qui se passe ici. Donne-lui juste une hauteur pour qu'on puisse la voir. La hauteur qu'on a obtenue d'Illustrator était de 653. Nous allons ajouter une image d'arrière-plan. En bas aux images ici, c'est là que nous faisons juste la couleur de fond. Juste en dessous, il y a un chemin. Cliquez sur « Rechercher l'image ». Allez dans nos fichiers d'exercices, trouvez des images, c'est une ici appelée hero-background. Maintenant, rien ne se passe ici parce que rappelez-vous que nous venons de créer le style et que nous ne l'avons pas appliqué. C'est là, là. Cliquez sur le « div », si vous avez cliqué dessus, vous devez cliquer sur ce « div » qui est juste au début ici et appliquer cette classe pour que vous hero-image. Génial. Prévisualisons dans le navigateur. Peut-être enregistrer tout d'abord, vérifier dans le navigateur. Ça marche en quelque sorte. Il s'enroule autour de l'extérieur et c'est la bonne hauteur. C' est juste répéter. Si vous aviez un écran plus petit, vous ne verrez peut-être pas la répétition, mais si vous avez un très grand écran, il se répète encore et encore. C' est ce que font les images d'arrière-plan par défaut. Allons-y et éteignons-le d'abord et vérifions-le. C' est de retour dans Dreamweaver et nous allons trouver notre image de fond. Ici, arrière-plan de l'image, il y a cette option ici qui dit répéter. Arrière-plan, cliquez sur « Aucun ». Pas de répétition et tout enregistrer. Test dans le navigateur. Génial. Il est dit de ne pas répéter. L' autre chose que j'aimerais que tu fasses, c'est de t'étirer pour couvrir les bords ici. Je veux la garder à la même hauteur. Je veux l'étirer et il y a une fonctionnalité cool ici appelée couverture qui vous aidera quand il s'ajuste. Il s'étirera à quelle que soit la taille de l'écran. Allons voir ça dans Dreamweaver. Ici, c'est une option qui dit taille d'arrière-plan, cliquez sur le mot « Auto », et choisissez la couverture. Si je désactive et saute dans mon navigateur, génial. Ce qu'il va faire maintenant, comme vous pouvez le voir, il s'étire en quelque sorte et quand il arrive à sa hauteur, hauteur maximale, il reste là. Ça va toujours être sympa proportionnellement en arrière-plan. Le problème avec cela est que vous pouvez voir une partie de celui-ci recadrée quand il arrive au plus grand, au sommet là-bas. Cool. C'est notre couverture. Ce que j'aimerais aussi faire, c'est que vous voyez, j'aimerais que l'image soit centrée. Pour le moment, c'est en quelque sorte juste d'utiliser cela laissé comme un défaut et j'aimerais me débarrasser du rembourrage en haut. Tout d'abord, mettons-le au centre. Retour à Dreamweaver, dans celui que nous appelons position d'arrière-plan, Cliquez sur le signe de pourcentage et cliquez sur « Centre ». Sauvegardez tout. Vérifie. Maintenant, ça devrait l'être. Vous voyez ? Cela fonctionne en fait à partir du centre maintenant plutôt que de rester à cette gauche. Débarrassons-nous de ça. Considérez la bordure à l'extérieur, c'est vrai pour chaque site Web créé par défaut, car la balise body, rappelez-vous, nous avons bloqué la couleur d'arrière-plan et ajouté une police. Par défaut, il est livré avec un rembourrage. En fait, une marge qui va autour de l'extérieur. C' est juste là par défaut. On a juste besoin de remplacer ça dans Dreamweaver. Trouvez notre étiquette corporelle. Ici, c'est là. Choisissez « GLOBAL body » et dites simplement ici, sous « Mise en page », dites « marges ». Il a ça tout le chemin. Nous allons lier cela ensemble et dire simplement, juste taper manuellement zéro pixels. Vous pouvez voir que tout a disparu. Tu penses que parce qu'il dit zéro là, tu penses qu'il est réglé à zéro, mais ce n'est pas le cas. Ça veut juste dire que tu n'as rien fait. Je commence juste quelque part et je commence à zéro. Vous devez réellement taper zéro et appuyer sur « Entrée ». Maintenant, il fera partie du CSS. Sauvegardez tout. Vérifiez dans le navigateur. Vous pouvez le voir maintenant [inaudible] à côté des bords. Une dernière chose que je vais faire, c'est que je voulais que ça soit un peu déplacé. Ce que nous allons faire, c'est il y a un couple à prendre, nous avons l'en-tête pour avoir un rembourrage en haut, ou parce que nous avons cette image de héros déjà sélectionnée, nous pouvons mettre un peu de rembourrage dessus. Faisons celui-là. Allons à hero-image et avons une charge de rembourrage. Je suis juste en train de le frapper. Combien ? Je ne suis pas sûr. Sauver. Vérifiez-le. Ouais, c'est bon. Mon seul problème est que l'image de fond est un peu sombre. Je pourrais aller éclaircir ça plus tard, mais ça marche. Ça a l'air bien. Une dernière chose que je dois faire est si je regarde mon exemple de fichier, vous pouvez voir ici, celui-ci était en fait juste ma version de tablette, même hauteur. Mais mon mobile, je l'ai en fait raccourci un peu parce que les polices sont devenues plus petites et la dernière est un peu différente. Celui-ci est cette hauteur, 526. Allons mettre ça. Notre image de héros est en GLOBAL. Ce que je veux faire, c'est que je veux en faire un autre dans le mobile. La hauteur maximale est de 400, sélectionnez comme image hero-image, vous devrez peut-être la taper et la hauteur pour celle-ci, il va remplacer ce que nous avons actuellement et le mettre dans. Joli. Sauvegardez tout. Vérifiez dans le navigateur. Navigateur même, puis vers le bas, vers le bas, puis devient un peu plus petit. Joli. Vous n'avez pas à les ajuster. Vous le concevez dans Illustrator et dans les meilleures intentions, ce sera génial. Ensuite, vous devrez peut-être faire quelques ajustements de hauteur, mais le nôtre fonctionne bien en ce moment. La prochaine chose que nous devons faire est d'ajouter notre boîte de contenu principale. On va le faire dans la prochaine vidéo. 20. Utiliser la balise principale HTML5 dans Dreamweaver: [ MUSIQUE] Salut là. Dans ce tutoriel, nous allons ajouter cette balise HTML5 principale ici. C' est là que le plus de la copie va pour le site Web. Nous allons le rendre beau et grand, nous allons lui donner une hauteur minimale, et nous allons le rendre vert juste pour que vous puissiez le voir. Je n'aime pas ce vert. Ça ne va pas rester dans les parages. Allons-y et faisons-le. Il y a trois morceaux principaux sur notre site Web. Il y a un en-tête, ce que nous avons fait, puis il y a une balise principale qui va au milieu, et c'est tout au sujet du contenu principal, et il y a un pied de page. Nous avons fait l'en-tête. Nous devons mettre en main maintenant, et nous allons juste mettre une boîte principale vide parce que nous allons faire de cette boîte la chose modifiable sur notre site Web pour qu'elle puisse générer de nouvelles pages et mettre du contenu unique dans cette boîte principale, mais nous avons besoin d'abord du conteneur. On va le mettre après l'en-tête. Je vais cliquer sur mon en-tête, assurer qu'il glisse vers le bas et nous allons aller à Insérer. Vous pouvez voir ici, ce sont ma structure principale de mon site web. En-tête, navigation, nous l'avons fait. On va faire le principal et le pied de page dans une seconde. Mettons en main. Ça va être après mon en-tête, et il y a ma boîte principale. On va laisser ce texte là-dedans. Ça va m'aider à identifier où se trouve cette boîte. Maintenant, je devrais passer par et ajouter mon pied parce qu'il est censé être directement en dessous. Le seul problème est que si je regarde mon dessin ici et illustrateur, mon pied de page est juste en bas ici et il est conçu sur un fond blanc. Ça va être un peu difficile pour moi dans Dreamweaver concevoir cette chose sur ce fond vert. Ce que je pourrais faire est d'ajouter une certaine hauteur à la boîte principale. Je peux dire que vous pouvez être un 100 pixels de haut juste pour qu' il pousse vers le bas et me permet de concevoir en bas ici. Le seul problème avec la hauteur, c'est que c'est une figure absolue. Si je dis que ce serait 800 pixels de haut, et que mon design essaie plus tard d'aller grand, disons que 800 incorpore très bien cela, mais sur une autre page que je conçois, 800 quand il s'agit d'ici, mais il veut aller plus gros tas et cela provoque des tas de problèmes. Ça dit : « Eh bien, je veux avoir 800 ans. » et l'image dit : « Eh bien, je veux être plus grand. et il y a un gros combat et les choses commencent à se répandre partout. La façon de contourner cela, est d'utiliser quelque chose appelé hauteur minimale. Ce que tu dis c'est que je veux que tu sois un minimum de 800, mais tu peux être un peu plus grand si tu aimais. Sois aussi grand que tu veux, en fait. Il va fixer un minimum de 800 par maximum d'infini. C' est un très bon moyen de s'asseoir en hauteur lorsque vous concevez des modèles. Vous n'êtes pas trop sûr de la taille d'une boîte, mais elle n'a certainement pas besoin d'être aussi petite. Il doit être un peu plus grand que ça. Nous allons le faire sous le panneau CSS Designer, puis cliquez sur styles et GLOBAL et rien ne clique réellement. Pourquoi ça se passe ? C' est parce qu'entre la réalisation de ces vidéos, je faisais un autre travail et j'ai changé le mien en Current. J' aime Current. Ça veut dire que tout est la façon dont nous avons travaillé dans ce cours. Current signifie que si je le passe à Current et je clique sur dire que, il passe au style que j'ai actuellement sélectionné. Mais nous allons revenir à Tous. Le courant est génial quand vous avez réellement un site et qu'il est terminé et que vous êtes en fait assez bon à cela, mais nous allons cliquer de retour à Tout pour le moment. style.css, nous allons le mettre dans GLOBAL. Nous allons créer un style pour main. Il ne l'a pas pré-rempli. Souviens-toi, on a des arrêts complets devant les trucs qu'on fait. Les choses qui existent déjà, comme cette balise principale, nous ne l'avons pas nommé. Il existait déjà. On l'a ajouté. Vous ne mettez pas la période à l'avant, juste vieille main droite. Nous allons dire principal, j'aimerais que vous ayez une hauteur, pas celle-là, nous sommes allés à une hauteur minimale de 800 pixels. Ça veut juste dire que ça va être sympa et grand jusqu'au bas, donc mon pied de page va avoir de l'espace pour y aller. Ce que je pourrais faire juste pour le rendre évident pour vous dans ce tutoriel, est de lui donner une couleur de fond assez verte. Juste pourquoi je vais utiliser, en fait, le RGBA pour que je puisse utiliser un peu de transparence. Pourquoi je fais ça ? C' est juste pour que vous puissiez le voir quand je prévisualise dans un navigateur et vous pouvez voir avec le principal va. Prévisualisons un nouveau navigateur. Vous pouvez voir que c'est ma boîte principale et ça va jusqu'ici. On va enlever ça dans une seconde. J' ai dit que je le faisais pour vous, mais , souvent, je le fais quand je construis un site web. Il est vraiment nécessaire de savoir quelles balises commencent et finissent. Si vous ajoutez une couleur d'arrière-plan, parfois vous aimez, c'est là que va ce gars. On les retirera dans une seconde. La prochaine chose que nous voulons faire est d'ajouter le pied de page, et nous le ferons dans la toute prochaine vidéo. 21. Ajouter la balise du pied de page HTML5 à un site Web à l'aide d'Adobe Dreamweaver: Salut là. Dans ce tutoriel, nous allons ajouter notre pied de page. C' est notre top, c'est notre joli petit pied de page. Il va y avoir deux petits divs à l'intérieur pour flotter nos icônes sociales sur le côté. Nous allons faire passer nos droits d'auteur à droite. Nous allons également ajouter des liens à tous ces liens, et celui-ci va être cool, quand vous cliquez dessus, il va ouvrir votre compte de messagerie. Voir ceci sur e-mail. Allons le faire maintenant à Dreamweaver. La première chose est, c'est où je vais mettre ma photo. Je vais le mettre juste, j'ai cliqué sur « My Main Tag », et je vais le mettre juste après ça. Cliquez sur « Insérer », et en dessous il y a un pied de page appelé, et je vais le mettre après, et il est là en bas ici. Vous pouvez voir, il y a ma balise principale, et puis il y a le pied de page là aussi. Donnons-lui une hauteur et supprimez ce texte. Allons dans le panneau « CSS Designer », « Styles.css », « Global », créons un « Sélecteur », et juste pour le pied de page, s'il vous plaît. Je vais t'amener à avoir une taille. Maintenant, quand je dis de ne pas mettre de hauteurs, parce que nous voulons que le contenu s'étire de plus en plus, ce n' est pas exactement le cas pour le pied de page. Vous pouvez voir ici que c'est cette hauteur. C'est toujours cette hauteur. Je pourrais mettre une hauteur minimale, mais en fait je suis juste, n' aura pas d'importance, parce que je vais le mettre dans une hauteur régulière. Forcer ça à l'être. J' ai déjà vérifié qu'il est, 120 pixels. Cool. C'est lui, je vais saisir ce texte, sélectionner tout supprimer, enregistrer tout. L' un des problèmes, lorsque vous le supprimez de cette option, est souvent qu'il laissera cet espace ininterrompu ici. Fondamentalement, c'est comme un bar spatial. C'est très bien. Ils le laissent là parce que sinon, vous pouvez voir la balise se ferme, et vous ne pouvez pas vraiment cliquer dessus. Ils laissent ça là-dedans. Je vais le supprimer de ma co-vue. Je n'en ai pas besoin. Mon pied de page est composé de deux parties. Il y a un, regardons, il y a un pot d'icônes sociales, et il y a un pot sur la droite ici avec ce copyright. Je vais faire deux tags div, obtenir une pour flotter à gauche, et une pour flotter à droite. Allons faire ça. Laissons-les entrer. Dans le pied de page, nous allons aller « Insérer », nous allons insérer une balise div, et nous allons le coller, a obtenu mon pied de page sélectionné, donc nous allons l'imbriquer. Maintenant, avec celui-ci sélectionné, nous allons mettre une autre balise div et ce sera juste après celle que j'ai sélectionnée. J' en ai deux. Tu vas voir, ils sont à l'intérieur du pied de page. J' ai deux tags div. Créons deux classes. Je vais flotter un à gauche, et un à droite. Panneau CSS Designer, Styles. CSS, Global, Sélecteur. Je vais les nommer, d'accord ? Donc je vais appeler celui-ci, les icônes sociales. Je vais le faire flotter à gauche, et je vais en faire un autre appelé, et par point à l'avant, je vais appeler celui-ci copyright. Droit d'auteur, même. Je vais leur donner une inclinaison, un flotteur à droite. Maintenant, rien ne se passe parce que je dois les appliquer. Cette première balise div sélectionnée. Je vais faire de vous les icônes sociales. Celle-là, c'est bizarre. Celle-ci flotte à gauche, icône sociale, et ce gars a glissé derrière eux. Le texte est pressé sur le côté. C' est pourquoi quand je clique ici, j'ai sélectionné le div mais il sélectionne tout. Floating fait des choses bizarres à la balise div, donc. On a celle-là. On va mettre les droits d'auteur, et on y va. Impressionnant. Flottant à gauche, flottant à droite. Maintenant, nous allons mettre une partie de notre contenu. Faisons ça d'abord. Je vais avoir cette balise div sélectionnée. Je vais aller à Insert. Je vais insérer une image. Je vais insérer un intérieur imbriqué, et je vais aller à mes fichiers d'exercice, images, et j'ai des icônes sociales. J' ai tout ça à ajouter. Ajoutez-les dans l'ordre que vous préférez. Je vais juste les mettre par ordre alphabétique. Cool. Ajoutons des choses à notre image. Cliquez sur le « Menu Hamburger ». Alt-text est ce que vous mettez autour de chaque image, et c'est une façon de décrire l'image, et Google aime quand vous la décrivez en utilisant de bons mots clés. Apportez votre propre ordinateur portable. Facebook. Chaque image a besoin d'un ancien texte. Il indique aux moteurs de recherche ce qu'est votre page et où le lien va. Ce qu'on va faire, c'est que j'ai déjà une page intégrée pour tous mes trucs sociaux. Allez vous inscrire, suivez-moi dans toutes ces choses. Si vous êtes une personne Facebook, une personne LinkedIn, une personne Twitter, allez me voir. Je vais saisir celui-ci, dans le lien et ce morceau ici, fixer sa cible. On va dire blanc. Ce que cela signifie est, par défaut, si je clique sur cette image, sauvegardons réellement [inaudible] navigateur. Par défaut, si je soulève cela, la cible est nulle. Par défaut, si j'ai levé la cible elle-même et cela signifie juste quand je clique dessus, cela remplace cette page par Facebook. Mais parce que je l'ai changé en blanc, si je clique dessus et vous pouvez voir qu'il change sur notre page Facebook réelle. On va y mettre le reste. Ce que nous pourrions faire pour enregistrer aller à, Insérer et Image, à chaque fois, suffit de cliquer dessus et aller à dupliquer. Quand il est sélectionné, déposez cela vers le bas. Choisissons une nouvelle source. Ce qui est juste notre image. Retour à nos dossiers d'exercices. Où es-tu ? Images, icône sociale. Je vais faire LinkedIn ensuite. Échangez ça. Tout cela, le texte alt, doit être unique. Linkedin, va nous voir là-bas aussi. Il va, rester vide, mais je veux changer l'URL, à celui-ci, « Apportez votre ordinateur portable ». Cool. Je vais faire tourner la table de l'éditeur un peu avant. Jusqu' à ce qu'on arrive à la dernière. Attendez pour celle-là parce que l'e-mail est un peu intéressant. Tu es de retour. La raison pour laquelle l'e-mail est un peu différent, c'est que ce n'est pas un lien. n'y a pas de site Web sur lequel vous pouvez accéder par e-mail. Ce que vous faites dans le lien ici est de passer ceci à, mail à, et puis un deux-points, il doit être orthographié de cette façon. En minuscules, puis insérez votre adresse e-mail. Le mien est Daniel à B-Y-O-L point IE. Si vous voulez m'envoyer un e-mail, envoyez-le là. il va [inaudible] en blanc. Ce qui va se passer maintenant est que je vais cliquer sur « Off » et je vais aller cliquer dans le navigateur, enregistrer tout. Regardez, quand je clique sur ce, ce qui se passe, est-ce qu'il charge votre navigateur de messagerie par défaut. Le mien utilise Mac mail. Assure-toi juste d'avoir le courrier à, devant ça et ça marchera. Retournez dans Dreamweaver. Il y a un peu de ménage. Débarrassez-vous de ce texte ici. Au revoir, je n'ai plus besoin de toi. La prochaine chose que nous ferons, c'est celle-là. C' est assez facile. Ce n'est principalement que du texte. Je vais le voler à Illustrator. Portefeuille dense, continuez à cliquer sur la mauvaise chose. Là, il est là. Attrape-toi, et toi. Est-ce que je veux styler ça ? Je suis en fait heureux avec le texte par défaut. Ce que vous pourriez faire, vous pourriez créer une classe spéciale pour cela. Stylez-le la police que vous voulez et la taille que vous voulez. Je suis content de ce qu'il est. La prochaine chose que j'aimerais faire est qu'il a besoin d'un peu de repousser les bords ici. La hauteur, et les côtés. Pour ce faire, je vais aller à CSS Designer, Styles.css, Global, Pied de page. Je peux utiliser la marge ou le rembourrage dans ce cas car il n'y a pas de boîte colorée au pied de page. C'est juste vide. Ce que j'ai besoin de faire, c'est que je vais le pousser vers le bas à propos de ça. Le seul problème avec ça, c'est que la boîte est devenue plus haut, par autant. Ça a commencé à 120, maintenant c'est 120 plus 33. Lorsque vous ajoutez des marges à des choses qui ont des hauteurs, elles se combinent simplement. Maintenant, c'est comme un 153. Ce que je dois faire, c'est moins celui de cette hauteur. Mes maths sont terribles. Je peux le faire ? Est-ce que c'est 97. Oh, je vais deviner que c'est 97. C' est à quel point mes maths sont mauvais. J' aurais sorti la calculatrice, mais je ne sais pas. Je me sentais étourdi et je me sentais comme si je devais le faire. Les marges de gauche et de droite. Parce que nous n'avons pas défini notre largeur à partir de cela, nous n'avons pas défini de largeur, donc nous n'avons pas besoin de la réduire. On peut juste les ajouter. Qu'est-ce que ça va être ? Ce sera d'environ 20 pixels de ce côté, 20 pixels de ce côté. Impressionnant. Maintenant, vous pourriez être genre, whoa, je peux le faire centrer horizontalement ? Non, tu ne peux pas. centrage horizontal est étonnamment difficile. Ce que tu dois faire, c'est faire semblant. Ce type ici. Supposons que vous voulez la hauteur et que vous pouvez ajouter un peu de hauteur à celui-ci. Qu' est-ce qu'il est ? Son icône sociale. Je pourrais trouver une icône sociale. Où es-tu ? Là et ajouter un peu de rembourrage à elle, parce que ceux-ci doivent être différents. C' est pour ça que je ne le fais pas au pied de page. Je vais ajouter un peu de marge au sommet et donner l'impression qu'il est au centre. Il y a des façons de le faire, mais c'est super compliqué. Droits d'auteur. Même. Je vais lui ajouter de la hauteur. Faites-lui croire qu'il est au centre. La prochaine chose que je veux faire est d'ajouter de l'espacement entre tous ces types. Correspondance approximativement. Ça, ok, ça n'a pas besoin d'être exact, mais je ne vais pas le faire à l'écran. Je vais le faire secrètement en arrière-plan. Ce que je veux que vous fassiez, c'est voir si vous pouvez espacer ces gars, sans le pousser du côté ici et tout ne tombe pas en morceaux. Mais voyez si vous pouvez mettre un peu d'espacement. À vous, combien. Mais j'aimerais voir si vous pouvez créer une classe ou juste une classe ou travailler sur quelque chose pour les faire espacer un peu. Très bonne chance. Je sais que vous pouvez le faire, et si vous ne le faites pas et que vous le cassez, annulez-le et laissez-le. Ils ont l'air bien d'eux-mêmes. Mais j'aimerais que tu arrêtes avec moi, et que tu vois si tu peux ajouter un peu de rembourrage. Passons à la vidéo suivante où nous commençons réellement à ajouter notre modèle. En fait, une dernière chose avant de partir, c'est cette grosse boîte verte. Débarrassons-nous de la grande boîte verte. Trouvons le principal et le grand fond vert ici. Cette petite poubelle. Sauvegardez tout. Voir dans le navigateur. Génial, il y a mon pied de page en bas. Il y a ça et maintenant partez, mettez ces gars à l'écart. Tu peux le faire. 22. Créer un modèle dans Adobe Dreamweaver: Bonjour, les adorables Dreamweaver. Il est temps de faire un modèle. Dans cette vidéo, nous allons faire ce truc ici. Elle ressemble exactement à la dernière vidéo, mais maintenant elle s'appelle .dwt et nous avons cette chose appelée une « région modifiable ». Ce que cela signifie, c'est que je peux faire des tas de pages et mettre à jour le modèle, qui a mon en-tête et mon pied de page et il va se répandre et mettre à jour toutes les pages d'un seul coup de foule. Apprenons à le faire dans Dreamweaver. La première chose que je veux faire avant de faire mon modèle est en fait, il y a un peu de textes ici dont je veux me débarrasser. Vous pouvez le faire en mode code ou en mode direct, peu importe, je préfère en mode code, donc le texte est parti. Maintenant, nous allons l'enregistrer en tant que modèle. Si j'ai quelque chose sélectionné ici dans ma vue en direct, et que je vais à « Fichier », enregistrez ce modèle. C' est grisé avec une raison quelconque. Mais si je clique ici en mode code, puis aller à la même option, vient à la vie, je ne sais pas pourquoi. Description, je ne lui ai jamais donné de description. Mais en termes de « Enregistrer sous », c'est très important. Index est un mauvais nom pour cela et nous allons appeler comme modèles de portefeuilles, et pas d'espaces, n'utilisez pas de caractères fous et cliquez sur « Enregistrer ». Mettre à jour les liens, cliquez sur « Oui ». Un des problèmes que j'ai eu quand je faisais ce cours est de retour dans la vidéo quatre, je sous, « Site », je suis entré dans les sites, sous mon « Nom du site », quand nous nommons ceci, j'ai mis une apostrophe, fois dans le nom du site et dans le dossier qui est sur mon bureau et cela a causé des problèmes pour rien sauf pour ce modèle. C' était un peu ouvre-yeux pour moi. Assurez-vous simplement que si vous rencontrez des problèmes avec votre modèle, que vous n'avez pas de caractères drôles dans le nom du site ou le nom du dossier local. Je suis à peu près sûr que c'était le nom du dossier local qui me causait des problèmes. Annuler tout cela, « Terminé », afin qu'il soit enregistré le modèle. Génial. Maintenant, ce qui s'est réellement passé, quelques choses est, un peu de code qui a été ajouté qui n'était pas là avant, vous pouvez voir le template commencer en double titre doc. Il y a un tas de ça en train d'être ajouté. L' autre chose est, vous pouvez voir ici l'extension dwt a été ajoutée. C' est le modèle Dreamweaver. Vous remarquerez également dans nos fichiers de site, vous pouvez voir ici que c'est un nouveau dossier qui est en cours fabrication et à l'intérieur, il y a mon portfolio. En outre, lorsque vous travaillez avec des modèles, et vous remarquerez que la vue en direct ne fonctionne pas aussi bien qu'auparavant, fonctionne toujours et fonctionne en quelque sorte, mais c'est un peu plus difficile à utiliser que quand ce n'est pas un modèle, ce n'est pas un problème et je trouve aussi quand je le génère pour la première fois, si je le ferme et le rouvre, cela va dire, « Attention », vous n'avez pas de zones modifiables, et je suis genre, « Cool », je dois corriger cela. Fermons et rouvrons une sauvegarde, [inaudible] fonctionne vraiment beaucoup mieux, rapide le Dreamweaver, charmant, nous les aimons. Maintenant, ce que je veux faire est, j'ai besoin de la région modifiable parce que le moment où tout fait partie du modèle, et si je crée de nouvelles pages basées sur ce modèle, il n'y aura rien que je puisse y faire parce qu'elles sont toutes verrouillées. Ce que je veux faire est de cliquer où je vais, rappelez-vous que notre boîte de contenu principale était ici. Tu as remarqué que je ne mettais pas en évidence comme avant, « Hé, c'est une des bizarreries. » Il a mis en évidence ici. Mais si je vais à « Insérer », « Template » dans une région, rappelez-vous que cela ne fonctionne plus vraiment pour travailler dans cette vue en direct, donc nous devons utiliser un peu plus de vue de code. Je vais mettre en évidence ces gars, principal parce que c'est le peu que je veux être modifiable. Allez dans « Insérer », allez dans « Modèle », et je vais en faire ma « Région modifiable ». Comment allons-nous l'appeler ? Région modifiable trois », je vais juste appeler ce contenu principal. Cliquez sur « OK ». Vous verrez qu'il est enveloppé dans cette balise et cela va lui permettre d'être modifiable. Appuyez sur « Enregistrer », et c'est ainsi que vous créez un modèle. Dans la vidéo suivante, nous vous montrons comment générer une page à partir de ce modèle. D' accord. Allons-y et faisons ça maintenant. 23. Créer de nouvelles pages à partir d'un modèle Dreamweaver: Hé, là. Dans ce tutoriel, nous allons créer une nouvelle page basée sur notre modèle que nous avons fait et quand nous allons faire un changement comme celui-ci, regardez, il va mettre à jour toutes les autres pages liées au modèle et notre impressionnance de modèle est complète. Donc, pour faire une page à partir de notre modèle, nous allons fermer le DWT que nous avions ouvert, puis nous allons aller à « Fichier », « Nouveau ». Nous allons cliquer sur ce bouton ici. Nous allons aller à Modèles de site et nous allons choisir Modèle de portefeuille. Oui, nous voulons le mettre à jour. C' est la raison pour laquelle nous vous avons créé et vous pouvez voir ici nous avons notre document sans titre et vous pouvez voir tous les codes cachés à l'exception de notre principal. Vous pouvez voir qu'il y a un peu de couleur là-bas et il y a d'autres choses. Le titre doit être modifiable pour chaque page. Donc c'est automatiquement fait ça pour nous et oui. Vous pouvez voir ici, ça est revenu à la vie. Mais ces gars sont grisés. Seul le contenu principal est modifiable. Donc maintenant, nous devons le sauver. C' est là qu'il se penche un peu. On va regarder nos dossiers. Nous avons créé ce fichier d'index. C' est ce que nous avons fait pour tout ce tutoriel, nous avons fait notre page d'accueil. Ensuite, nous avons dit que nous allons les transformer en un modèle. Le problème est que le modèle n'est pas connecté à cette page d'index. Ce type est inutile maintenant. On l'a utilisé, il a généré ça, mais ils ne sont pas connectés. Donc nous devons le supprimer, parce qu'il n'est pas connecté à notre modèle. Donc ce qu'on va faire, c'est que je ne veux pas l'effacer. Je vais faire un dossier appelé Zold, qui est vieux avec un Z et je vais juste cliquer sur Hold et les faire glisser là-dedans. Je ne veux pas l'effacer au cas où ça tournerait horriblement mal. Alors voici dans mon vieux dossier Zold. Ce qu'on doit faire maintenant c'est sauvegarder ce nouveau fichier, on l'appellera Index, et le sauver. Cool. Bizarre, non ? Nous avons généré un fichier d'index pour commencer, puis nous avons dû le supprimer et le refaire juste pour qu'il soit connecté au modèle et à tout nouveau fichier maintenant que nous devons faire. La page Contactez-nous, la page À propos de nous, tout ce dont vous avez besoin est d'aller fichier nouveau et nous devons générer à partir de notre modèle pour qu'ils soient tous connectés. Donc maintenant, dans le reste du tutoriel, nous allons passer par les choses à main. On va construire ça. On va avoir les tiques, tous les boutons et toutes les images. Mais ce que je voulais vraiment faire avant de partir, c'est vous donner un petit aperçu sur façon de travailler avec les modèles et comment vous assurer que vous n'avez aucun problème. Le plus simple est de vous assurer, disons que vous devez mettre à jour ces boutons ici, ajouter un troisième, ou jouer avec quelque chose. Bien sûr, nous devons mettre à jour le modèle, ce qui est une bonne idée. Donc « Fichier », « Ouvrir ». Vous trouverez ce dossier Modèles et voici mon modèle. Chaque fois que vous mettez à jour le modèle, assurez-vous de fermer toute autre page. J' ai trouvé dans mon expérience que si j'ai Index ouvert et j'essaie d'apporter des modifications au modèle, il le met à jour la plupart du temps, mais j'ai eu quelques problèmes, donc je m'assure juste que rien d'autre n'est ouvert, juste le modèle. Puis je vais ici et je dis que vous, mon ami, cette image ici, je veux la faire. Je ne sais pas. Je ne sais pas pourquoi je fais ça. Juste, par exemple, « Fichier », « Enregistrer ». Il va dire que je vais mettre à jour ces pages parce qu'elles sont basées sur le modèle. C'est le peu cool. C' est le peu que tu es comme oh man, ça va gagner du temps, surtout quand il y a une longue liste. Il y a 500 pages et vous dites de les mettre à jour, s'il vous plaît. Je clique sur « Fermer » et il est parti et les a mis à jour. Je vais donc fermer le modèle et ouvrir mon index. Vous verrez, j'espère qu'il est mis à jour. Génial. Je vais le retourner, fermer ça. Ouvrez le modèle, alors faites-le ouvrir tout seul. Ici, il avait 803 ans. Sauvez, mettez à jour, tous ces types le ferment. Fait. Tu sais ce qui va se passer. Il est mis à jour. Nous avons donc fait un modèle. Allons le remplir de génial. On se voit dans la vidéo suivante. 24. Créer une hero box réactive pour notre site Web dans Dreameaver: Salut là, Dans cette vidéo, nous allons commencer notre boîte de héros réactif qui est à l'intérieur de notre modèle. Vous êtes peut-être en train de regarder et de dire : « Je ne vois que deux choses. » Oui, nous ne créons que deux choses dans celle-ci, mais il y a un peu de structure sous-jacente que nous devons créer. Nous devons créer notre boîte de contenu de héros, et nous allons créer des classes flottantes réutilisables, toutes sortes d'autres fantasmes, alors allons-y et faisons-le maintenant. J' ai mon index.html ouvert, donc je vais commencer à remplir ma page. Ceci est connecté à un modèle, donc vous pouvez voir tout ce truc est grisé, et je peux travailler à l'intérieur de cette balise principale ici. C' est assez facile, il suffit de cliquer à l'intérieur n'importe où, et c'est la seule case modifiable sur cette page. On va travailler sur cette partie ici, donc ça va s'appeler le contenu du héros. On a cette image de héros dans les arrière-plans. On n'a pas besoin de s'inquiéter pour lui. Nous l'avons fait dans un tutoriel plus tôt. On a juste besoin de s'inquiéter des choses ici, et ça va être universel, donc ça va être sur cette page ici. Il va mettre à jour les prises en fonction du type de page qu'il s'agit. Nous allons commencer par mettre notre tag div de contenu de héros, puis nous arrêterons de mettre les images, et le texte, alors commençons. Avec le sélectionné, je vais aller à Insérer, nous allons insérer un div, je vais imbriqué à l'intérieur, et je vais le laisser pour le moment. Je vais créer un style CSS. Il va être dans styles.CSS. Il va être global et le select va être une classe. Rappelez-vous que c'est un arrêt complet au début, et celui-ci va être appelé contenu de héros. Qu' est-ce que ça va faire, ça va faire beaucoup. Vous pouvez voir qu'il est poussé vers le bas par le haut et loin de la gauche. Je l'ai déjà mesuré, donc je vais faire une marge en haut ici de trois pixels, et sur ce côté gauche ici, 100 pixels. J' espère que si je frapperai tout, rien ne se passera. Pourquoi cela n'arrive-t-il pas ? C'est parce que je ne l'ai pas encore appliqué. J' ai créé la classe et j'ai créé un div, mais je ne les ai pas connectés. Je vais le faire ici. Celui-ci est en fait appelé contenu de héros. Génial, donc il pousse vers le bas et pousse vers le bas. Charmant. La prochaine chose que je veux faire est avec mon contenu de héros sélectionné, je vais insérer cette image. Je vais le nicher à l'intérieur. Merci. Je vais aller à mes fichiers d'exercice, images, et trouver sur le bas égale tick. Ce n'est pas au bon endroit. Copiez-le à travers, oui s'il vous plaît. Ça va aller aux images. Merci beaucoup. C'est sauvé. Joli. Maintenant, chaque fois que vous mettez une nouvelle image, assurez-vous de mettre dans le texte alt. Cela va être quelque chose de mots-clés amical sans bourrer votre site plein de mots-clés je suppose. Celui-ci va être freelance, et web design disponible. court de bons mots clés pensant des choses de toute façon. Le lien, celui-ci n'aura pas de lien car ça ne va pas se passer de toute façon, cool. Cliquons sur le menu hamburger, et la prochaine chose que nous allons mettre dans un texte. Maintenant vous pouvez commencer à utiliser cet espace réservé ici, mais ça va nous donner un peu de drame. Il est préférable d'utiliser des balises P plutôt que de voir ce texte n'a pas de balise autour d'elle, donc vous êtes préférable de travailler avec une balise P. Je clique sur cette image, je vais insérer HTML, je vais descendre ici pour trouver la balise P. Je ne vais pas aller là-bas, il est là, et je vais le faire juste après, cool. A l'intérieur de ces balises P, je vais cliquer sur il devient orange autour de l'extérieur, et en fait juste aller copier et coller le texte à partir d'ici. Cool. Ce texte vers le bas, il n'est plus utile, donc je vais sélectionner tout cela et le supprimer. C' était le texte automatique de l'endroit pour cette div originale, le peu qu'il faut. Je me souviens qu'il y a un espace ininterrompu, il est levé, garde l'étiquette ouverte. Je n'ai pas besoin de ça. Ils s'empilent l'un en dessous de l'autre. Nous allons styler la couleur dans une seconde parce que c'est noir et c'est que je devais voir. Mais vous pouvez voir par défaut qu'ils veulent empiler les uns sur les autres, cela arrive tout le temps. Maintenant, nous allons réparer ça comme nous l'avons fait en bas pour le pied de page. Alors qu'un pied un membre, nous avons flotté à gauche et à droite. Maintenant, ce que nous avons fait en bas, c'est que nous avions des balises spécifiques à utiliser. Nous avions comme des icônes sociales dans notre copyright, et nous avons flotté ces balises à gauche et à droite. Le problème est que nous devons le faire à nouveau maintenant, et nous sommes comme, « Ne serait-il pas agréable de créer comme une balise universelle que nous pourrions appliquer à cette balise P. » Parce que vous pouvez ajouter plus d'une classe. Cette image ici, je voudrais appliquer une classe de levage flotteur et celui-ci un flotteur droit. Nous allons créer cela comme une chose réutilisable, plutôt que de coder dur dans ces classes, ce qui était bien mais pas très réutilisable. Créons d'abord une classe. Nous allons aller au concepteur CSS, assurer que nous sommes sur tous les styles CSS, assurez-vous que je suis global, sélectionnez-le et nous allons appeler ce flotteur à un point, union, et son travail va être levage flottant. Ensuite, nous allons en créer un autre appelé flotteur. Il va flotter à droite, ce sera son boulot. Cool. Maintenant, on a juste besoin de l'appliquer, donc on va prendre la tique ici, et on va te dire mon ami, où est-il ? Celle-là, non. Toi, mon ami. On va cliquer sur plus, et on va dire float. Vous pouvez voir que c'est juste paresseux, et maintenant on peut réutiliser ce truc, mettre l'ascenseur. Cette chose s'écrase en dessous, mais elle est un peu piégée. Maintenant, si vous regardez, vous pourriez être genre, « Pourquoi il le ferait flotter correctement ? » Je n'en ai aucune idée. Je ne veux pas qu'elle flottante, je veux cette étiquette universelle, donc je vais la laisser là, mais c' est totalement de ma faute. Ce que je veux en fait, c'est qu'ils flottent à gauche. La bonne chose à propos de ça, c'est que s' ils flottent à gauche, ils vont se cogner l'un à côté de l'autre. Vous pouvez voir ce qui se passe, c'est que si vous les flottez tous les deux à gauche, ils sont assis côte à côte. Si vous retournez juste un, l'autre essaie de se faufiler en dessous, et cela provoque beaucoup de problèmes. Assurez-vous de les retourner à gauche puis à droite. La prochaine chose que je veux faire est que je veux styler ce texte ici. Maintenant, je pourrais probablement faire une sélection composée et dire des balises P qui sont à l'intérieur de la boîte de héros. Mais regardons le design. Je pourrais utiliser à nouveau les balises P différemment, et celui-ci ici, c'est là que vous rencontrez des problèmes. Ça ira et tu dis : « Oh, je ne vais pas faire une nouvelle classe avec ça parce qu'il n'y a qu'une seule étiquette P ici. » Mais plus tard dans le design, vous dites  : « Oh, ce sera deux étiquettes P différentes, et nous avons besoin d'un peu plus de spécificité. Ce que nous allons faire est que nous allons créer une classe, cliquons sur les styles, donnons un coup de pied global , cliquons sur le sélecteur, et mettons un arrêt complet , et mettons en disponibilité, et nous allons faire quelques des choses. Nous allons voler la couleur de l'illustrateur, sorte que le texte sélectionné. Nous pourrions utiliser nos propriétés CSS de fenêtre. Je ne sais pas que je suis allé par là. C'est une autre façon de le regarder. Double-cliquez sur la couleur, copiez-la, de nouveau dans Dreamweaver, et je veux que ma couleur de texte pour celui-ci soit Hickks Hash, et cela revient maintenant et nous allons l'appliquer. Ici ma balise P, il va avoir flottant à gauche, mais nous allons aussi avoir, nous allons ajouter un autre cold.availability. Vous pouvez appliquer plus d'une balise. La prochaine chose que je vais faire est de jouer avec les marges parce que ce n'est pas vraiment assis correctement. Ce que nous allons faire, c'est aller à la première, aller à la marge maintenant. Celle-ci va avoir environ sept ans. Vous remarquerez qu'il est monté. Cave sept à partir du haut, par défaut est aligné vers le bas sur la ligne de base là. Parfois, vous jouez et vous allez  : « Hey, oui, frapper par le haut est logique. » Mais ensuite, ça monte comme il l'a fait là-bas. Mais ne vous inquiétez pas pour ça. A gauche de ce côté, on va en faire 15. Je les ai mesurés à partir de l'illustrateur. On y arrive. Sauvez-le. Nous allons juste prévisualiser et un navigateur. Double contrôle, tout fonctionne, c'est beau. Allons mettre ce H1, qui est ce gros morceau ici. Je vais juste prendre le texte pendant que je suis ici et il va le mettre dans. En fait, avant de continuer, on va couper cette vidéo ici parce qu'on va chercher à effacer le flotteur. Je veux transformer ça en sa vidéo séparée parce que vous devrez probablement y revenir pour le faire plus tard. Parce que effacer le flotteur est facile à comprendre mais difficile de se souvenir de la syntaxe donc nous allons garder cela comme une belle petite vidéo de bundle dans la prochaine, allons-y. 25. Corriger les problèmes avec les balises div lorsque vous flottez à gauche dans Dreamweaver, c'est-à-dire effacer le flottement: Salut là. Cette vidéo est ici pour sauver la journée. Vous avez un site Web où vous avez utilisé float et il est appliqué à quelque chose. Maintenant, l'objet en dessous essaie de se faufiler dessous et généralement se comporter mal. Nous allons corriger cela en utilisant quelque chose appelé effacer le flotteur et il va par magie pousser le H1 vers le bas comme ceci. Allons et apprenons à le faire maintenant dans Dreamweaver. La première chose est de mettre [inaudible] H1. Je vais cliquer sur mon tag p ici. J' aime vraiment cliquer sur ces sélecteurs de balises en bas ici, donc il saisit le début et la fin. Je trouve que c'est toujours facile lorsque vous commencez à insérer des choses en utilisant la vue live de conception. Insérer le panneau, Passons à la rubrique H1. Cliquez dessus à nouveau, et je veux juste après s'il vous plaît et vous pouvez voir que c'est le problème. Le H1 veut vraiment se faufiler sous ces deux éléments que nous avons mis là-dedans. La raison est que nous avons flotté ces deux gars et la façon dont je pense que c'est, pensez à flotteur tirer de la page vers nous et le H1 se faufile en dessous parce qu'il n'est plus au courant de ces gars parce qu'ils ont été flottés. Pour le réparer, nous faisons quelque chose appelé effacer le flotteur. Ça veut juste dire, hé, je veux que tu regardes et il y a des gars qui flottent au-dessus de toi. Je ne veux pas que vous les ignoriez comme vous l'êtes actuellement. Excellent exemple, non, je ne pouvais pas penser à une meilleure façon de l'expliquer, mais, alors ajoutons une classe à ce H1 pour dire, hey, il y a du float en cours et être normal. La première chose est de faire la classe. Il s'appelle le CSS Designer, styles.CSS, rien ne fonctionne. Allez dans All styles.CSS GLOBAL et nous allons créer un sélecteur. Appelle tout ce que tu veux. On va l'appeler comme un flotteur clair. Son principal travail est de dégager le flotteur sur les deux. Maintenant, nous devons l'appliquer notre H1. Je vais y aller, .clearfloat. Chaque fois que vous avez flotteur juste en dessous, vous devez effacer le flotteur. Maintenant, c'est une étiquette raisonnable. On peut l'utiliser encore et encore. Maintenant, si je mets quelque chose sous le H1, je n'ai pas besoin de vider le flotteur. C' est comme un seul coup. Chaque fois qu'il y a un flotteur juste en dessous, nous devons l'effacer. Alors on n'a pas besoin de recommencer jusqu'à ce qu'on arrête de flirter à nouveau. Vous saurez quand vous devez le faire parce que les choses que nous aimerions que notre H1 fasse. Passons à d'autres détails. La prochaine chose va mettre cela prend ici, et nous allons commencer, j'aime mettre le texte pour une raison quelconque en vue du code, mieux. Vous savez aussi qu'on a utilisé une esperluette ici. encodage de l'esperluette est normalement bien. Vous pouvez voir qu'il s'affiche bien, mais certains navigateurs plus anciens, il ne va pas avoir une bonne journée. Vous pouvez voir que Dreamweaver, si je le tape là-dedans, dit comme si c'était rouge mauvais. La version de code de [inaudible] ok, le [inaudible] est en fait et amp, donc AMP et puis un point-virgule. Je sais que c'est bizarre. Mais dans la vie, vous obtenez toujours votre [inaudible] Mais il ne va pas casser le navigateur Web de quelqu'un. Mais si vous avez un site web et que vous mettez beaucoup de textos. Je l'ai déjà fait et je n'ai jamais eu d'ennuis. C' est pour ça qu'il a été écrit de toute façon. Une des choses que je veux faire, cependant, est frappé dans Illustrator. Je l'ai divisé en trois lignes. Maintenant, j'ai deux façons de le faire. Un bon moyen dans le mauvais sens. La mauvaise façon est que si je vais à ce que je casserais il cassé croix Kiwi.Ok. Si je vais à l'interface utilisateur, double-cliquez et je vais appuyer sur « Retour », la différence et un autre est basé sur le concepteur. Je vais mettre un retour et ici, écrire le code. Ça marche. Mais vous pouvez voir ici mon code, j'ai maintenant trois H1. Ce n'est pas un bon plan. Pourquoi ? Parce que je vais maintenant devoir aller installer ces vieux séparément. Ce n'était pas une grosse affaire, mais aussi quand il s'agit de moteurs de recherche, il voit, alors disons que le moteur de recherche Google vient à moi et dit, « Hé, il y a un titre appelé I'm a Kiwi ». Il dit l'interface utilisateur et la conception UX vers le haut. Ils les voient comme des blocs séparés, donc c'est agréable et facile à mettre au lieu de retours, je vais les annuler tous ensemble. Retourne ici. Juste en face de l'interface utilisateur, je vais maintenir « Shift » enfoncé sur mon clavier et appuyer sur retour sur mon clavier. Ce que vous verrez, c'est que je le ferai là-bas, et ensuite je cliquerai ici et vous verrez que vous aurez ces personnages brillants. Je vous les montre pour quelques raisons, c'est que vous allez copier et coller des choses à partir de morceaux et vous seriez comme « Qu'est-ce que c'est un BI ? » C' est comme si vous êtes graphiste, c'est un changement pour dix, ou un soft pour dix, ou ils les appellent toutes sortes de choses différentes. Dans le web land, c'est un quart de BI ou de rupture. Cela signifie juste qu'il est toujours rouge comme un H1 complet juste avec quelques sauts de ligne là-dedans. La prochaine chose que je vais faire est que je veux styler cette HI ici je vais aller à Styles global select, et je vais juste taper H1. Rappelez-vous les balises préexistantes que nous n'avons pas écrit comme le H1 et la balise image, sera le BI, n'ont pas d'arrêts complets devant eux lorsque vous demandez de les coiffer. H1, j'aimerais faire quelques choses. Probablement le plus facile sera la couleur va être blanche. Je pense que c'est blanc. Ce que j'aimerais aussi faire est de mettre à jour la police. Maintenant, en fait, faisons la taille d'abord parce que c'est une belle, facile. Ensuite, nous examinerons certains des problèmes quand il s'agit de penser que c'est environ 80. Continue à mettre en double chiffres. Quelle est la bonne taille ? Je veux utiliser cette police ici, et c'est quelque chose qui s'appelle Playfair. Je vais y aller et m'en servir. Maintenant, je peux passer par, et nous avions fait cela plus tôt dans le cours rappelez-vous. Nous sommes allés à taper, et nous sommes allés à la famille de polices, et nous sommes allés gérer les polices, et nous l'avons fait. Maintenant, cela ne fonctionnera pas dans ce cas parce qu'il doit traiter beaucoup de la balise de tête. Rappelez-vous ici, il doit ajouter toutes ces choses ici où il est dit, voici les polices d'âge web, donc il doit être capable d'éditer ces choses. Nous allons fermer aucune page d'index et ouvrir le modèle. Sauvez, oui. Je vais ouvrir mon modèle. C' est ça, et fais-le ici. Il y a juste quelques choses qui vont se produire tout au long de votre build Web, maintenant que vous avez un modèle, vous allez devoir revenir au dossier du modèle. Faites-le et si vous rencontrez des problèmes et que vous aimez, « Peut-être que si je le fais sur le modèle », retournez au modèle essayé dans l'air, vous pourriez trouver qu'il résout le problème que vous avez. Template, je vais insérer des bibliothèques CC en fait. Notez que nous allons frapper le designer de CC un piano et est-ce que j'ai un H1 ? Je ne le fais pas encore, donc je vais avoir un H1, H3 est là, je mens. Type. Nous venons de les faire famille de polices et ça va gérer les polices. C' est un ici s'appelle Playfair display. Je vais les cocher, cliquez sur « Terminé ». Rien ne se passe vraiment. Ensuite, je vais partir et cliquer sur le « Playfair ». Impressionnant. Il ajoute quelques propriétés pour que vous puissiez le faire fonctionner. Il vous dit ici que c'est ajouté ceux qui vont et j'ai appuyé sur « Sauvegarder tout ». Il va mettre à jour l'index, s'il vous plaît. Oui, s'il vous plaît. Vous pouvez changer le code moqué comme non intégral. Vous dites, oui. Cliquez sur « Fermer », fermez sur le modèle, et espérons maintenant lorsque nous ouvrons notre index. C' est notre Playfair. Rappelez-vous, si quelque chose ne fonctionne pas, vous devrez peut-être aller le faire dans le modèle. La raison pour laquelle je connais ce problème particulier est que lorsque je concevais ce cours, j'ai essayé de le faire ici, ma page d'index, et cela n'a pas fonctionné. Je saute dans le modèle et il l'a fait. La dernière chose que je ferai avant d'y aller, c'est que ça va jouer avec l'espacement des lignes. Ça ne devrait pas m'inquiéter, mais il y a un grand écart entre ça. Rappelez-vous plus tôt, nous avons mis en et si je clique ici, nous lui avons mis des personnages brillants. L' espacement des lignes va fonctionner dans ce cas, s'il y avait des H1 séparés, je dois utiliser la marge entre ces H1. Nous utilisons la chose actuelle maintenant parce que je veux que je suppose, vous faire utiliser cela parce que comme vous allez mieux, cela va devenir de plus en plus utile de Dreamweaver est que j'ai le sélectionné ici et si je clique sur « Current » ici, il le réduit à ceux calculés, qui signifie juste que tout ce qui affecte ce que vous avez sélectionné est disponible de sorte qu'il réduit le moins de quadrats après un certain temps vous vous retrouvez avec une 3D. J' ai des sites Web, puis juste sélectionner comme liste est rejoint énorme. Le courant devient super utile. Nous aimons vraiment cliquer dessus et cela vous donne juste les choses qui s'appliquent à elle. Dans mon cas, clearfix s'applique, mais ce n'est pas celui que je veux. H1 s'applique, Impressionnant. Ce que je veux faire est de taper, et je veux jouer avec la hauteur de ligne. Je vais utiliser des pixels, zéro pixels. J' allais cliquer sur « Hold » et faire glisser. C' est l'une des autres choses agréables que Dreamweaver est qu'au lieu d'avoir à taper à chaque fois, vous pouvez cliquer et faire glisser des choses pour être un peu plus d'un designer ici. Oui, peut-être avec ça. Sauvegardez tout. Ça sera tout pour cette vidéo. C' est assez long, et commençons à construire le reste de cette page. On se voit dans la vidéo suivante. 26. Ajouter et modifier le style d'une règle horizontale HR dans Dreamweaver: Salut, là. Dans ce tutoriel, nous allons faire cette ligne blanche. Ça s'appelle une route horizontale. Ce n'est pas difficile, mais il y a un style par défaut que nous voulons aller et changer par la suite. Allons le faire maintenant à Dreamweaver. Tout d'abord, mettons la règle horizontale, donc ça s'appelle une balise hr. C' est comme ça qu'on appelle ça. Je vais coller mon H1, qui est mon frappeur, parce que je veux m'arrêter à ça. Je vais aller à « Insérer un HTML » et tout le chemin en bas, droit en bas est appelé ligne horizontale. Cliquons sur cela, glissez là-bas il est là. En fait, le mien a fini au milieu de mon texte, je vais annuler. Ça t'arrive. Cliquez sur le « H_1". Assurez-vous qu'il est sélectionné ici dans votre sélecteur de balises, puis cliquez sur ligne horizontale. Je veux partir pour plaire, et puis il y a là, c'est ma règle horizontale. Maintenant, je vais prévisualiser cela dans un navigateur, parce que par défaut la ligne horizontale est livré avec une certaine laideur, alors allons-y et vérifions-la dans un navigateur. C' est un peu difficile à voir, mais c'est ce qu'on appelle Embosss bivalents pour les gens de Photoshop. Si je zoome sur les charges, vous commencerez à voir le style dessus. Donc, ici, il est là. Vous pouvez voir qu'il est à moitié blanc, moitié gris, et qu'il a comme un petit ciseau ici. Je n'aime pas ça. Vous pouvez voir ça. Vous pouvez gagner du temps et passer au prochain tutoriel. Je n'aime pas ça et je veux le coiffer. On va commencer ce HR. C' est ce qui est considéré comme une règle horizontale. L' un des rares tags qui n'a pas de début et de fin comme un h1 a un open et un close et HR n'aime pas cette balise br comme quelques-uns qui ne le font pas. Allons-y et stylisons-le sous CSS Designer : styles, global select est, ça va s'appeler HR. Parce que c'est l'un de ces préexistants où nous ne l'avons pas écrit comme le h1, quelque chose déjà préexistant en HTML. Nous n'avons pas à mettre la période en avant. Tout est à voir avec la frontière. Avec la bordure, nous allons dire style par défaut, c'est encart. Nous allons le dire, s'il vous plaît colorier. Je pense que c'est comme un blanc cassé. Par défaut, je vais le rendre blanc, puis je vais enregistrer tout joli dans mon navigateur et voir ce que j'aime ici. C'est assez mince ? Vous pouvez jouer avec la largeur ici. Je l'ai mis à 1.2, jouer avec les pixels. Je suis content de ce qu'il est. C' est ainsi que créer une ligne. C' est un long tutoriel pour juste une ligne, mais nous voulons que ce soit une jolie ligne. Ensuite, nous passons au prochain tutoriel. 27. Créer un bouton dans Adobe Dreamweaver CC: Salut là. Dans ce tutoriel, nous allons faire ce bouton rouge. Nous allons faire des choses cool où nous empruntons CSS existant à d'autres classes et nous avons réutilisé certaines classes, sans offense. Allons-y et faisons-le maintenant. Donc, la première chose est de mettre un bouton. Maintenant, je voulais être juste après cette règle horizontale, alors cliquez dessus. n'y a pas de bouton d'insertion. C' est donc juste un lien hypertexte que nous stylisons avec un rembourrage et quelques couleurs d'arrière-plan qui ressemblent à un bouton. Le bouton est ce type ici. Donc c'est un peu comme celui-ci en haut que nous avons utilisé pour notre navigation. Donc, nous allons réellement emprunter, CSS à partir de cela pour gagner du temps. Donc, notre règle horizontale sélectionnée ici dans ma vue Live et je vais obtenir Insérer, Hyperlink, cela va dire après, et puis je vais appeler celui-ci Let's Talk. Cool, liaison. Rappelez-vous que nous n'avons pas encore le nom de la page, donc je vais juste utiliser le hachage, cible je veux qu'il soit auto, donc nous le laissons vide, qui est le moi par défaut et le titre, c'est bon pour les moteurs de recherche. Donc, il voit ce bouton et « Parlons » n'est pas particulièrement utile pour savoir ce qui se passe, donc nous lui donnons quelques informations supplémentaires. Nous nous assurons que c'est un mot clé convivial. Donc, ce sera Daniel Walter Scott, parce que je vais être le concepteur UX UI que j'essaie de classer dans Google, contactez-nous. Pourquoi est-ce dans les capitales ? Parce que j'ai laissé le verrouillage des majuscules, ça devrait probablement être juste le cas du titre, mais je suis d'accord avec ça. Personne ne voit ça en arrière-plan sur les moteurs de recherche. Donc maintenant, nous allons aller et le style et le truc cool à ce sujet est que nous, si vous vous souvenez, avons fait un cours appelé bouton rouge et bouton vert. Nous devons donc réutiliser ça. Donc, j'arrive à [inaudible] tag. C' est là que nous commençons à réutiliser les choses, et c'est bien quand vous arrivez à ce point du site Web où comme, beaucoup de travail acharné est fait, vous arrivez à commencer à réutiliser les choses au lieu de toujours essayer de créer de nouvelles classes. Alors maintenant, nous arrivons à aller point et celui-ci, rappelez-vous que nous l'avons appelé btn au début pour le rendre facile à trouver, bouton de lecture. Cool. Il y a donc un fond rouge. Ce bouton rouge n'est pas venu avec tout le rembourrage. Nous l'avons fait séparément, si vous vous en souvenez. Donc, je vais voler le CSS de ce bouton. Maintenant, nous ne pouvons pas le faire ici dans page d' index parce que cela fait partie du modèle et cela ne vous permet tout simplement pas. Si je clique dessus, vous obtenez un design CSS un panneau. Laisse-moi éteindre tout ça. Donc oui, bon pour nous et ça ne marche pas vraiment. Donc, nous devons ouvrir ce modèle et là, je vais passer au courant. Remember Current me permet de cliquer sur quelque chose et cela me donne réellement les classes qui pourraient être appliquées et il se trouve être ce top. Je sais parce que si je clique sur Afficher ensemble, cela va me montrer les choses qui sont appliquées à cette classe particulière et pas tout et oui, vous pouvez voir le remplissage et la couleur du texte et supprimer le soulignement. Donc c'est tout ce qu'il nous faut. Il y a donc une fonctionnalité cool. Nous pouvons cliquer avec le bouton droit de la souris et dire copier tous les styles. Il y avait une option ici, aussi c'est juste les styles de texte que nous avons juste autorisés en fonction de ce que vous voulez, mais je veux tous les styles. Cool. Merci modèle. Maintenant, je vais l'appliquer à ça. Maintenant, je pourrais entrer ici et créer une autre classe, et le styliser avec ceci. Je vais être un peu plus ingénieux et utiliser un sélecteur de composé. Donc ce que je vais dire, c'est s'il y a un bouton rouge dans cette boîte poilue alors appliquez ce texte. Alors peut-être passer de Current à All. Il y a des styles, global, faire un sélecteur. Il en a ramassé des morceaux. Alors, qu'est-ce que je veux ? Vous remarquerez qu'il n'a pas mis dans l'étiquette. Mettons-le en rouge bouton et hero-content, mais pas le tag a. Vérifions juste un travail. Parfois, ils le font, parfois ils ne le font pas. Donc, avec elle sélectionnée, je vais cliquer dessus avec le bouton droit de la souris et dire coller des styles, une magie. Donc ça marche. Alors maintenant, il est temps de mettre un peu d'espace entre cette règle horizontale parce qu'elle est enfoncée à côté d'elle. Donc, je voudrais que vous alliez pour le bouton pause maintenant, appuyez sur pause et je veux que vous pensiez à la façon dont vous le faites. Tu peux y aller et essayer. C'est ce que je fais et je vois si tu peux y aller. Vous pouvez annuler si cela ne fonctionne pas. Appuyez sur Annuler, et vous pouvez regarder le reste de cette vidéo. Mais venez ici où qu'il soit, mettez le bouton en pause et réfléchissez. Vas-y maintenant. Tu n'en fais pas une pause. Ce que je ferais, il y a en fait quelques choses que tu pourrais faire. Nous pourrions faire cette classe ici, et c'était une marge en haut, ou nous pourrions utiliser cette règle horizontale ici. Je vais faire la règle horizontale principalement parce que je regarde un aller, en fait je veux faire l'espace entre là et en dessous. Donc, au lieu d'essayer de les faire séparément, je suis aussi juste à travers la ligne horizontale ici. Aller au courant, il y a ma h et je désactive show set donc je les vois tous et je vais aller à la mise en page et je veux peut-être moins une marge du haut en cliquant, en tenant et en faisant glisser et en mettant une charge en bas là. Quoi qu'il en soit, cette classe composée que nous avons utilisée, vous auriez pu créer une nouvelle classe qui faisait l'espacement, ce bizarre, mais ça fonctionnerait. Mais ce que j'ai fait, c'est que j'ai fait une règle horizontale pour jouer avec les deux côtés. Entrez et sauvegardons tout. 28. Modifier l'espacement des polices d'un site Web en fonction de la taille des tablettes mobiles à l'aide de Dreamweaver: Ok, dans cette vidéo, nous voulons prendre notre vue sur le bureau, que nous avons ici. Mais quand il sera sur tablette, nous allons ajuster ce contenu de héros ici. Donc, nous allons jouer avec le remplissage, changer la taille de police vers le bas mobile encore plus. Ok, nous allons changer la taille de police encore plus petite. Ajustez la hauteur de la ligne et nous ferons tout centré cool, donc centré pas grand texte centré. Maintenant, nous voulons aller faire quelques mises à jour à notre design responsive et nous avons conçu ce genre de boîte de héros pour ordinateur de bureau. Quand il descend à la tablette, il y a quelques changements, l' un d'eux est caresser du côté ici change, il devient un peu plat et la taille de la police devient plus petite. La taille de la police devient encore plus petite qu'un mobile et devient centrée et j'ai désactivé cette ligne ici sur mobile. Juste que je n'ai pas aimé le look quand je descends mobile parce que tout cela était centré. Allons-y et faisons-le maintenant à Dreamweaver. D' accord, première étape, nous allons nous attaquer au rembourrage. Nous avons le contenu d'un seul héros qui s'enroule, eh bien mon contenu de héros et nous allons donc ajouter le rembourrage à cela. Bureau, c'est bon. Maintenant, on va passer à la tablette. Nous allons cliquer sur la petite ligne colorée dont nous avons besoin sauter ou vous pouvez simplement faire glisser ça, rappelez-vous. Nous sommes en tablettes et je veux mettre ça au bord maintenant dans mon design et illustrer à l'avance une sorte de chasse contre cette boîte noire, mais quand je suis ici à Dreamweaver et que je pratiquais ça pour vous les gars. Je veux sorte de l'avoir sur environ 25 pixels ce genre de lignes avec son logo taupe. C' est l'une des libertés créatives d'être le concepteur et, le développeur. D' accord ? Si je dessinais ça pour quelqu'un d'autre et qu'ils m'ont donné un Photoshop ou illustrer une maquette. Je le fais exactement comme ils l'ont aimé. Ce que nous allons faire est styles CSS va le faire pour tablette et nous allons créer il n'y a pas de sélection pour le moment pour ici sont le contenu. On dira le contenu du héros. Oui s'il vous plaît. Je voudrais que vous ayez une marge de 25 pixels. Mais pour obtenir ce côté, et encore sur les autres côtés, 25 pixels sympa. Permet de faire l'espacement, pour le mobile aussi. Ici, d'accord, c'est de retour à 100 pixels, qui était mon bureau. Je vais dire Styles, secteur mobile. Voici le contenu et nous allons vous dire mon ami, même si c'est zéro ici. Mais peut-être que vous avez une sorte de taper à nouveau parce que zéro signifie simplement en fait que nous avons levé à la valeur par défaut et que la valeur par défaut est sous les pixels comme pour les bureaux. Zéro de ce côté, zéro de ce côté. Nice, génial car la police est évidemment ce gros problème suivant surtout si elle est top. Nous allons d'abord faire la tablette, et ce que nous allons faire est sur une vue tablette, nous allons démarrer le H1. Ok, donc le H1 quand il est dans tableview, je voudrais que vous ayez une taille de police ou taille de police et maintenant je devrais aller vérifier Illustrator. Je suppose. Ça semble bien, peut-être un peu petit. L' autre chose que je dois faire est de jouer avec mon espacement, ok, eh bien ma hauteur de ligne et les pixels zéro, et je vais obtenir que ça soit quelque chose. Bon, faisons-le pour mobile. Il y a une ou deux choses que nous devons faire, c'est de le rendre beaucoup plus petit. Styles mobile, sélecteur portée un et nous allons faire quelques choses que nous allons faire, tout d' abord, la taille du téléphone ok. En fait, je vais vérifier ce qu'il y a là-dedans. Je devrais vérifier ça. Vous êtes à 46. Taille de la police, pixels 446. Rappelez-vous que c'est mon clavier pour une raison quelconque , tape deux chiffres là-dedans. Très bien, donc c'est la taille et je vais la remplacer dès que je le ferai, j'entends ça aussi. On va s'asseoir au centre. Ok, maintenant c'est aligner tout le texte au centre. Ok, vous pouvez voir ici, mais vous pouvez voir ici que ce n'est pas fait ces autres attributs. Ce que nous allons faire est au lieu de commencer le H1 pour centré et nous obtenons un virage qui et parce qu'il n'a pas fait ce texte, tout était du texte et ils étaient centrés mais je veux en fait que d'autres parties doivent être sélectionnées aussi parce que c'était juste le H1. Ce que nous allons dire est de retour à ce contenu de héros et dire que je veux que tout soit centré à part U. Ok, maintenant la ligne, cette image ici, ce gars ici n'est pas moi comme, « Hé, tu viens de le dire. » C' est parce que celui-ci est flotté. Ce que nous allons faire dans ce cas, nous allons créer une classe spéciale juste pour le pousser un peu plus loin. On va faire combien on les déteste coincés là, je peux cacher les objets, on va le faire ensuite, c'est aller l'installer. Mais avant de le faire, sauvegardons tout et prévisualisons le navigateur. Ok, donc les tablettes de bureau plus petites et le rembourrage est différent, ce qui est génial un mobile en retrait devient plus petit et nous devons faire l'espacement des lignes, ce que nous n'avons pas fait donc c'était le H1. Interligne mobile H1, texte, hauteur de ligne, pixels plus grands. C' est à propos de gentil, enregistrer tout juste dans le navigateur, mieux. Peut-être que j'avais besoin d'être un peu plus haut. Si vous n'avez pas de choses cannelées comme nous l'avons fait ici, c'est tout ce que vous avez à faire. La partie suivante, nous allons l'enregistrer pour la prochaine vidéo, et nous allons désactiver cette ligne ici et nous allons obtenir des classes spéciales pour le pousser dehors et n' est rien de fantaisie que vous allez juste appliquer la classe à elle et dire avoir en attente sur mobile, que en quelque sorte, il est centré. Il peut être vraiment difficile de vraiment bien voir les choses quand il flottait. On va juste tricher. D'accord, sur la prochaine vidéo. 29. Désactiver certaines parties d'un site Web dans différentes vues (mobile ou bureau): Dans cette vidéo, nous allons désactiver cette règle ici quand elle passe au mobile, parce que c'est ce que j'ai fait dans mon design. Allons faire ça. Ce que nous allons faire, c'est nous allons faire un sélecteur composé, mais nous allons le faire à l'intérieur du mobile parce que c'est la seule fois que je veux que cette chose s'active. Dans styles.css quand je suis dans mobile, je n'ai rien qui contrôle la règle pour le moment. Je pourrais juste avoir hr et le tourner pour désactiver et si j'utilise une règle ailleurs, elle va s'éteindre aussi, donc je serai un peu plus spécifique. Je vais dire du contenu de héros. Oui, s'il y a une règle horizontale à l'intérieur d'un contenu, alors je veux le désactiver. Parfois, je m'en sors probablement avec juste des heures. Je vais utiliser une autre règle horizontale dans votre maison sur le site ? Je crois que oui. Oui, je ne veux pas m'éteindre. Cette règle spécifique qui se trouve à l'intérieur de cette boîte de contenu va être désactivée lorsque, assurez-vous que show set est désactivé afin que vous puissiez tout voir. Je veux aller à l'exposition et aller à zéro, cool. Sauvegardez tout, en vérifiant le navigateur. Vous pouvez voir ici tablette encore là, mais dans mobile disparu, facile. Deux choses que je veux ranger, c'est peut-être qu'il y a du rembourrage ici. Dans le tutoriel précédent, j'étais très intelligent et j'ai dit que nous allons utiliser la règle horizontale pour le rembourrage. Nous utilisons ce style pour donner cet écart entre cela et le bouton, mais parce qu'entre cette règle, cette fois disparaît. Je veux ajouter un peu plus à cela, plus je veux pousser ça du côté. Allons-y et faisons ça maintenant dans Dreamweaver, passons à cette vue pour que je puisse la voir, donc mobile et il est là et il est handicapé. Est-ce qu'il a désactivé ? Pour une raison quelconque, il ne désactive pas ici en mode live et c'est pourquoi je préfère tester dans le navigateur. Il y a juste quelques petites choses bizarres qui ne se produisent pas en vue en direct. Il est pratique pour sélectionner des choses, mais ne l'utilisez pas comme votre vue de travail de finition absolue à 100 %. Utilisez le navigateur pour cela. Ce que je vais faire, c'est faire un sélecteur de composé. Quand il y a un h1 et qu'il est en bas dans mobile, je voudrais ajouter un peu de rembourrage au fond. J' ai un h1, c'est déjà mobile. Je peux utiliser ce sélecteur déjà parce que je suis dans styles.css, je suis dans mes styles mobiles et il y a déjà un h1, je peux dire, hey, vous voulez entrer dans h1 pouvez-vous un peu de marge en bas ? Il y va, il a disparu. Ça pourrait être juste mon programme. Je finis par avoir vraiment testé des versions de Dreamweaver, comment corriger les bugs et faire des vidéos pour Adobe, mais parfois le mien va un peu bang. Restons dans le navigateur, oui, ça a l'air bien. Ce que j'espère, c'est avec de petites choses comme ça, j'aime celles de ces petites friandises que tu as et tu aimes  : « J'aimerais pouvoir, il y a déjà une étiquette, et je peux juste ajuster celle-ci. » Vous arrêtez de créer des classes pour tout faire, vous commencez à réutiliser des classes. Une autre chose que je veux faire est ce gars en haut ici, je dois pousser un peu de rembourrage à gauche pour faux centre parce qu'il est flottant à gauche, c'est vraiment difficile d'aimer les amener naturellement au centre comme nous l'avons fait avec ce texte dans un bouton. Nous allons simplement dire cette chose ici appelée image float lift, qui est à l'intérieur du contenu du héros. Choisissons sur lui. Créons CSS panneau concepteur styles CSS, styles.css. Nous le ferons dans le monde entier, vous savez que nous faisons du mobile et nous vérifierons si nous n'avons rien. Avons-nous quelque chose qui dit, en-tête une image ? Non, il n'y a rien ici. Allons en créer un. C' est comme ça. Maintenant, ce n'est pas assez bon. Tout ce qui reste flottant appliqué à l'intérieur de notre contenu de héros va ajouter ce rembourrage et au moment où ce n'est que cette image, en fait ces deux images, ça ne fonctionnera pas parce qu'ils auront tous les deux un peu de rembourrage sur le côté gauche. Il va falloir être un peu plus précis. Maintenant, bienvenue à l'utilisation bizarrement du web est que si je dis img ici, ça ne va pas marcher. Ce n'est pas la façon dont cela est construit. Éditons, passons ici et quelques marges, devinez juste une marge pour le moment, mais il n'y a évidemment rien ne change. Il reste flottant qui est à l'intérieur de notre boîte de contenu. Peut-être que c'est l'inverse, peut-être que c'est l'image img qui a un flotteur clair appliqué à elle et cela ne fonctionne toujours pas. C' est à cause de ces choses sont coincées ensemble. Ce flotteur de falaise est attaché à cette image donc il ne peut pas y avoir d'espace entre ici. Ça va te rattraper, ça me rattrape. C' est une de ces choses amusantes où l'image et puis un point, cela signifie que ces deux que j'ai réellement rejoint et connecté l'un à autre maintenant, il va s'appliquer. Avec ça, je vais les traîner un peu plus. Bien. Ouais, nous avons appris quelques choses et j'ai tendance quand je fais les cours juste pour garder ça gentil et simple et m'assurer qu'il n'y a rien de trop difficile comme ces choses bizarres où il y a un cas où nous rejoindre ces deux-là et nous n'avons pas été en mesure de centrer parce que le flottait, mais je laisse celui-ci en particulier parce que c'est parfois avec des choses qui signifient fonctionner ne fonctionnent pas et vous trouvez que les solutions de contournement pour les faire aller arrive à chaque concepteur web. Ce que je devrais faire est potentiellement revenir au début et restructurer la façon dont je fais de ce côté pour que je n'aie pas particulièrement ce problème, mais personne ne le fait. Vous arrivez à un point, vous êtes comme si je double pour réparer cette chose ou est-ce que je fais un petit truc hacky pour réparer ça ? Ce n'est pas particulièrement hacky, mais juste pour vous faire savoir qu'il y a des moments que nous aimons, en fait, je vais juste ajouter une classe pour le fudge, parce que souvent il n'y a pas de répercussions. Il semble bon pour l'utilisateur. L' expérience utilisateur est géniale, l'interface utilisateur semble bonne, tout le monde est heureux, mais si quelqu'un regardait votre code, il pourrait le regarder à nouveau et dire, « Darn c'est une façon laide de le faire », et je dites que si vous êtes un développeur et que vous regardez mon code, vous seriez horrifié de voir le mot contenu de héros tous écrits avec des traits d'union. Ils ont probablement juste mis hc, gardez-le gentil et simple. Gardez le code très léger. J' aime écrire de petites notes à moi-même avec mes classes comme l'image de héros et la vue mobile. Mais c'est juste mon style et je suppose que venant d'un arrière-plan plus visuel, j'ai besoin de voir ces choses dans le code pour m'aider. C' est tout pour cette vidéo, passons à la suivante où nous commençons à regarder les colonnes d'image. Impressionnant. 30. Créer une grille d'images réactive dans Dreamweaver: Salut là. Dans ce tutoriel, nous allons prendre notre design d'illustré ici où nous avons trois colonnes de six images et celui-ci n'a que deux colonnes. Quand il descend à la tablette, puis vers le bas vers le mobile, qui a obtenu une colonne et nous éteignons quelques images, donc six vers le bas à seulement quatre d'entre eux. Je finirai par regarder quelque chose comme ça. Voici ma vue de bureau, jusqu'à tablettes, puis vers le bas à mon mur avec son juste quatre plus il va faire cela parce que chose extensible où ils prennent le plus d'utilisation de l'espace. Allons et apprenons à le faire maintenant dans Dreamweaver. Nous sommes en fait de retour ici sur Illustrator parce que je veux expliquer comment fonctionne la structure. Ce que nous allons faire, c'est nous allons créer ces colonnes ici et notre conception les fait changer. Vous pouvez voir qu'il a trois colonnes, elles sont descendues à deux, puis à une. Ce que je dois faire ou je dois vous expliquer, c'est que nous allons créer une boîte, donc une colonne ici, et nous allons en faire 33 pour cent de la largeur. Cela va coller l'un après l'autre et parce que nous avons enregistré une nouvelle image, ou la colonne de mur est de 33 pour cent , l'image suivante va tenir, l'image suivante va tenir, mais la suivante est seulement cadre, il n'y a que 100 p. 100 à choisir, donc il va passer à la rangée suivante. La raison pour laquelle cela est utile est que lorsque vous êtes en tablette, est que vous pouvez dire exactement la même image, mais vous occupez maintenant 50 pour cent de l'espace, donc 30 pour cent, puis essaie de tenir dans le prochain, mais ce n'est pas que l'entreprise, donc il tombe en panne. Même quand on passe au mobile, même image, mais on va dire que quand on est immobile, tu es un copain à 100 %, donc l'autre 100 % ne peut pas tenir, donc s'il est en dessous et qu'ils continuent à empiler. Essentiellement, ceux-ci vont une pile l'un sur l'autre, mais nous lui donnons juste des pourcentages différents. C' est ainsi que le carrelage réactif comme celui-ci fonctionne. Allons-y et faisons ça maintenant dans Dreamweaver, je te le promets, cette fois c'est Dreamweaver. Avant de mettre ces colonnes, nous avions besoin d'un conteneur pour le mettre autour. En haut, nous avons un conteneur appelé contenu de héros et rappelez-vous que ce sont les piles en haut que cela prendra chacun que nous avons gardé dans une jolie petite boîte. Nous entrons la même chose pour nos images de sorte que principalement nous pouvons mettre un peu de rembourrage entre cela et le contenu du héros parce que cinq contenus du héros sélectionnés, alors cliquez ici quelque part, cliquez sur le contenu du héros, puis allez à insérer HTML Div et je vais le mettre après s'il vous plaît, vous verrez que dans le bas ici, il est effectivement cogné juste en dessous du bouton haut de la liste, pas cette image en arrière-plan, principalement parce que c'est une image de fond et nous avons dit vous êtes en arrière-plan et personne ne peut vraiment vous affecter. C' est pour ça que nous pouvons mettre nos bâtons sur le dessus. Nous devons ajouter un outil de remplissage, alors créons une classe pour le faire. CSS Designer, nous allons le faire globalement et nous allons dire que nous allons créer une grille d'image de citation, tout ce que vous voulez, et nous allons ajouter une marge au sommet. Rien ne s'appliquant ainsi ici, appliquons une première image de classe. Il y a un peu d'homme de rembourrage et dit un peu plus jusqu'à ce que je sois à peu près content avec ça. Maintenant, nous allons mettre dans nos colonnes, donc avec notre image Div bien sélectionnée, nous allons aller insérer, nous allons insérer une autre division de l'espace. Je vais dire à l'intérieur d'ici, s'il vous plaît je voudrais une colonne, je vais le colorer, c' est un peu dur quand vous commencez à avoir ça maintenant, il y en a deux, je vais mettre une Div et puis la Div à l'intérieur de celui-ci et vous êtes comme, Avec lequel je manque ? Allons vite y ajouter une classe, donc ce que nous allons faire est CSS Designer, et faisons une classe. On va appeler ça un col comme colonne. C' est juste une norme de l'industrie que vous appelez colonne et souvent je le fais parce que c'est facile pour moi à comprendre, mais je veux m'habituer à certaines de ces syntaxes ou noms couramment utilisés de sorte que lorsque vous commencez à travailler sur le projet de quelqu'un d'autre ou un autre site, vous pourriez les reconnaître. Cette colonne ici, donnons-leur d'abord une couleur de fond, nous n'avons pas vraiment besoin de la couleur de fond, je voulais juste la ici pour que je puisse décrire ce que je fais. Je vais l'appliquer ici pour dire point col. Parfois, il est facile de regarder en bas en mode code, vous pouvez voir que j'ai une Div appelée grille d'image, et à l'intérieur de là, vous pouvez voir il y a le début et il y a l'ouverture, à l'intérieur de cela est ma couleur, et il y a aussi ce texte aléatoire, que je vais supprimer de col view. Vous n'avez plus besoin, un peu plus utile. Nous pourrions maintenant entrer et cliquer sur celui-ci, peut être cliqué dessus encore, et aller à dupliquer, et avoir six d'entre eux, Commande D sur un Mac est le raccourci, nous allons contrôler D le sur un PC, donc obtenu six d'entre eux Maintenant. Mais avant de faire cela, et vous pouvez voir qui sont empilés les uns après les autres, je vais annuler, qui est Commande Z contrôles automatiques sur un PC. Ce que je veux faire est d'ajouter une classe spécifique pour le bureau, parce que si nous regardons illustrator, vous pouvez voir le bureau est de 33 pour cent, c'est 50 pour cent, et c'est 100 pour cent, donc nous allons créer trois classes et simplement les déclencher à différentes requêtes multimédias. Nous allons dire quand votre bureau sera 33 pour cent, 40 pour cent, 100 pour cent, alors créez le festival de version de bureau. D' abord que nous allons créer un sélecteur, nous allons le colo, mettre dans des styles globaux, et nous allons appeler ceci .col et allons utiliser lg. Maintenant, lg n'est pas seulement un autre moyen commun de refroidissement vue de bureau, vous pouvez colcolumn-desktop pour le rendre plus facile pour vous-même, mais vous verrez sur d'autres sites les gens utilisant col-lg à la place. Nous allons le faire comme ça, nous allons dire que j'aimerais que vous soyez une largeur de pourcentage, assurez-vous que c'est le pourcentage et 33 pour cent. Souvent, il va revenir aux pixels donc si vous avez vous inquiéter, comme le mien ne fonctionne pas, c'est probablement par défaut, il veut vraiment être pixel donc vous allez forcer des pourcentages là-dedans. Ça marche, nous devons l'appliquer maintenant, donc vous col, grand, comme je gagne 33 pour cent en quelque sorte. Maintenant, nous allons créer des listes dupliquées, alors nous allons dupliquer et ils peuvent empiler les uns sur les autres. Ils ne se collent pas l'un à côté de l'autre comme nous avons besoin pour l'instant, mais ce sera la base. Nous allons avoir des subventions et le total, mais revenons en arrière et réparons le premier, je vais annuler quelques fois, il est là. Ce que je veux faire est de les mettre dans le flotteur gauche, donc ce que je vais faire est mon petit flotteur de classe réutilisable gauche. Maintenant je vais les dupliquer, donc Commandement D, pas de jeton, et j'en ai six. Si vous avez besoin d'une autre ligne, dites simplement Commande D sur un Mac ou Control D sur un PC, et il continue de les dupliquer. Jetons un petit coup d'oeil dans le navigateur, alors sauvegardez tout, sautez dans le navigateur. Vous pouvez voir ici, gentil et réactif aussi, parce que c'est 33 pour cent, peut-être qu'ils ne deviennent pas plus grands que notre largeur maximale que nous économisons pour notre bureau, mais ils deviennent gentils et vous calmars ici. Une des choses que je veux de mon design est un peu d'espace entre les deux, donc nous allons aller dans Dreamweaver et ce que nous allons faire est, pour la colonne grande, ou je veux le faire pour un col, je le ferai pour la colonne, donc chaque colonne sur chaque vue unique pas seulement une grande, va juste avoir un peu de rembourrage, ce qui est vrai de mon design. Ce que je vais faire, c'est col, je vais dire que j'aimerais un peu, on peut utiliser des pourcentages, on peut utiliser des pourcentages, donc je veux mettre 1 pour cent de ce côté, 1 pour cent de ce côté, et 1 pour cent de ce côté. Vous remarquerez que mon design est allé et cassé, c'est parce que cela ajoute à mon 33,3 pour cent que j'ai ajouté à ma boîte, donc 33,3 pour cent fois trois plus l'attente dans le côté épave tout. Ce qu'on va devoir faire, c'est sauter dans mon lg, col mon lg, et notre 33 pour cent ça va être comme 31,3 pour cent. Ce n'est pas ce qu'il saute aux pixels. Rappelez-vous que j'ai dit qu'il essaie de le faire , me le fait aussi, alors maintenant ils correspondent tous, alors qu'est-ce que vous ajoutez en termes de rembourrage que vous allez avoir à moins de la largeur que vous utilisez, et la dernière chose est que je veulent réellement rembourrage au fond aussi bien. Imaginez que nous allons le faire à notre colonne, colonne lg, et 1 pour cent aussi. Vous pouvez voir le mien, l'espacement réel est un peu différent parce que c'est 1%, mais c'est de chaque côté. J' ai 1 pour cent plus 1 pour cent, il y a 2 pour cent ici, donc le fond ici je vais ajouter 2 pour cent. Maintenant c'est égal, je vais laisser ce tutoriel ici, et le prochain nous allons leur ajouter des images. Il y a quelques petites choses que nous devons faire pour les rendre réactifs, mais les tripes sont ici. Passons au prochain tutoriel. 31. Créer des images réactives dans Dreamweaver pour les adapter à la taille de la page: Salut là, dans ce tutoriel, nous allons prendre balises div vides et les remplir avec des réponses d'images. Hé, presto, comme ça. La chose cool à leur sujet est qu'ils sont redimensionnés aussi bien, la réactivité. Allons-y et faisons-le maintenant à Dreamweaver. Première étape, je veux ajouter une image à cette première balise div ici. Je vais aller à Insérer, HTML, image. Je veux [inaudible] à l'intérieur de la balise div. Je vais aller à mes fichiers d'exercice, images. Si vous n'avez pas les fichiers d'exercice, il y aura un lien sur la page quelque part, sinon, message moi et je vous connecterai avec ceux-ci. Vérifions-le dans un navigateur, vous remarquerez qu'il est là, mais il n'est pas réactif. Vous pouvez voir que c'est juste être lui-même. L' autre chose à noter, c'est qu'il est un peu plus grand que j'en ai besoin. Pourquoi ? Parce qu'en fait à cette vue de dessus, regardons mon exemple ici. C' est en fait la taille, mais quand il arrive à la taille mobile, c'est un peu plus grand, donc j'ai permis que la plus grande taille soit exportée hors d'ici pour Illustrator. Ne le faites pas trop grand, car les vitesses de chargement des pages sont vraiment importantes pour Google dans son classement. Juste quelque chose d'un peu plus grand que ce dont vous avez besoin est bien, donc pour le rendre réactif, nous allons créer une classe. Nous allons créer dans CSS Designer, styles.css global. On va créer un sélecteur. Celui-ci va être appelé Responsive-image. Vous pourriez appeler ça quelque chose d'un peu plus petit et moins descriptif. Mais il y a trois choses que vous devez faire. On doit dire que la largeur est un pourcentage. Il doit être un 100 pour cent Il suffit de vous assurer que si vous avez des problèmes, c'est un 100 pour cent et pas des pixels. Puisque ce panneau de concepteur utilise les pixels par défaut, il finit par être là un peu, donc c'est un peu. Nous devons nous assurer que la hauteur est réglée sur auto et nous avons besoin de l'affichage pour bloquer et nous devons l'appliquer. J' ai sélectionné mon image. J' ai eu le truc IMG ici et puis je dis que mon image est maintenant .image responsive. Vérifions-le dans le navigateur maintenant, sauvegardez tout. Vous allez voir, ce gars ici redimensionne, génial. Fondamentalement maintenant, il est juste de dupliquer cette div originale ici, nous allons supprimer ceux-ci. Nous supprimerons également ces textes, nous supprimerons également ce texte ici. Vous pouvez voir que c'est le texte qui était à l'origine avant que nous mettions l'image ici. C' est juste une sorte de calmar en bas, supprimez-les, supprimez ces colonnes. Allons-y et faisons-le maintenant. Débarrassez-vous du texte d'abord en bas ici. J' ai ma balise div ici, début et fin et il y a ce texte ici. Je n'en ai plus besoin. Je trouve qu'il est toujours plus facile de le faire en mode code. Je n'ai besoin d'aucun de ces types. Je vais juste les supprimer dans CodeView, c'est pourquoi nous aimons la vue partagée dans Dreamweaver. La prochaine chose que je veux faire est de dupliquer cette chose ici. Je ne veux pas dupliquer seulement l'image. Je veux tout dupliquer parce qu'en ce moment il a juste l'image sélectionnée vu là. Je veux la classe div environnante, donc c'est ma colonne. C' est là, donc col-lg flotteur gauche. Je vais frapper la commande D ou répliquer et aller à dupliquer ou Ctrl+D sur un PC et regarder nous voler maintenant. On en a six. Évidemment, tu peux en faire neuf. Ça va continuer. Ce que nous voulons faire maintenant, c'est passer à travers et juste changer ces images ici. Ce ne sera pas un processus particulièrement sexy et nous ne ferons rien d'autre que ça, donc vous pouvez sauter si vous voulez. Mais si vous voulez me suivre, cliquez sur cette image, cliquez sur les petites lignes et ici, nous allons prendre le fichier du navigateur, les fichiers de taille d' exercice, les images. Descendez, vignette, génial. Maintenant, vous devriez certainement ajouter tous les textes ici. C' est le projet. Il vous donne un nom de projet comme projet. C' était un projet d'interface utilisateur et ajoutez tous les détails que vous pouvez parce que vous voulez qu'il soit bon et convivial pour les moteurs de recherche. Je ne vais pas le faire parce que je suis paresseux maintenant. Mais si c'est mon propre site, je le ferais à 100 %. Mais dans ce tutoriel, j'essaie juste d'accélérer les choses. Ce que je vais aussi faire pour accélérer les choses est, en fait, je vais juste aller à mes fichiers d'exercice images, et attraper tous ces gars. En fait, j'ai ces deux premiers donc je vais les copier, les mettre sur mon bureau dans mon dossier d'images. Juste pour que maintenant, je puisse entrer ici et je n'ai pas besoin de les copier et de les coller à chaque fois. Je peux entrer ici et en fait juste changer le nom en vignette3. Changer tout le texte n'oublie pas. Celle-là, des trucs passionnants. D'autres choses que je pourrais faire, c'est quand je clique dessus, où vont-ils aller ? Parce que ça arrivera plus tard. Je peux le faire maintenant et je peux juste mettre en hachage ? C' est à moi de décider si je veux le faire maintenant ou plus tard. J'ai fait celle-là. Mais oui, nous y reviendrons plus tard quand nous construirons ces deuxième pages, alors testez cela sur un navigateur pour voir à quel point ça a l'air. Enregistrez tout, vérifiez dans le navigateur et regardez cela. J' adore ça. Surtout avec toutes les nouvelles images colorées ici, il commence à ressembler à un site complet maintenant. La prochaine chose que nous allons devoir faire, c'est de comprendre ce qui se passe quand ça arrive à la tablette comme ça. Parce qu'en ce moment, ça continue de descendre dans ces trois rangées. Je veux le changer quand il arrive sur une tablette et un mobile et nous le ferons dans la prochaine vidéo. 32. Créer des colonnes différentes pour les sites Web sur ordinateur de bureau, tablette et mobile dans Dreamweaver: Salut là. Dans ce tutoriel, nous allons prendre notre vue de bureau qui a trois colonnes, puis nous allons le ramener à deux colonnes, quand il descend à la tablette et ensuite nous allons descendre à mobile, juste une colonne. Super facile à faire, faisons-le dans ce tutoriel. Actuellement, nous avons une classe qui dit que c'est la troisième, rappelez-vous 30 pour cent. On va cliquer dessus, ce gars ici. Ce n'est pas l'image, c'est la div qui est autour de l'extérieur. Rappelez-vous que la colonne le fait juste flotter à gauche. Mais il y a une grande colonne ou LG est celui qui dit être 33 pour cent. Nous avons besoin de deux autres en application. Faisons le premier. CSS Designer, styles CSS, je vais mettre celui-ci en tablette. On va faire un nouveau cours appelé Col et je vais faire en profondeur pour moyen, ok ? Celui-ci va avoir une largeur de pourcentage et ce pourcentage va être, maintenant devrait être 50 pour cent pour aller égal, mais j'ai un rembourrage autour de lui donc à 48 pour cent. Parce que je veux les marges de pourcentage de chaque côté, je vais passer en pourcentages. En fait, je pourrais faire ça tout le long. Choisissez des pourcentages sans cette petite icône de verrouillage sur signifie que je vais tout le chemin autour. Tout le chemin autour. Rien ne se passe parce que la façon dont nous regardons une vue de bureau et nous n'avons pas appliqué la classe, modifions. Ok, donc je vais cliquer dessus et j'ai eu celui-là appelé Col-MD. S' il fait ce que je ne suis pas venu, il ne reconnaît pas qu'il n'a pas été fait, d'accord ? Je vais commencer et je vais faire une sauvegarde tout et ensuite essayer de vous l'appliquer. Prenez la classe externe. Éteignez-le. Allumez-le et j'espère maintenant. col-md. Là, il est là. Parfois, vous devez tout sauver. C' est appliqué, ça va travailler en quelque sorte. Jetons un coup d'oeil dans un navigateur. Allez configurer ma taille de bureau, puis vous obtenez la tablette et vous pouvez voir qu'il veut occuper ce. On doit faire le rembourrage aussi, donc on pourrait. Mais on peut jouer un peu avec lui, on va faire tourner les images. Mais vous pouvez voir qu'il est à peu près la moitié. Ok, donc on doit le faire pour tous. On pourrait passer par l'étiquette extérieure au centre commercial, donc je vais te montrer un petit truc ici. Je les veux. Pouvez-vous voir comment les classes sont appliquées ici en mode code ? Ok, donc ça va div comme une classe égale et à l'intérieur de ces guillemets, toutes les classes col, col-lg, ascenseur retourné et notre col-mid sont ajoutés. Je vais te montrer un petit tour cool. Mon spécifique ou Dreamweaver. Si je clique ici, puis maintenez la touche de commande enfoncée et cliquez dessus aussi. Vous pouvez voir qu'il y a plusieurs curseurs. C' est vraiment pratique lorsque vous voulez ajouter une classe col-md. Vous ne frappez pas la période au début parce que nous n'en avons pas besoin parce que ça dit cours ici. Il semble un peu différent en mode code et c'est une façon de les ajouter tous en même temps. Sauvegardez tout, maintenant arrivons au navigateur, [inaudible]. Vue du bureau et vue mobile. Je trouve ces types d'étapes dans le cours assez satisfaisant, je le fais vraiment. Allons faire la version mobile ou faire le rembourrage et un peu. Nous voulons créer une nouvelle classe, donc les styles, nous allons le coller dans mobile. On va créer une nouvelle classe ici appelée, petite, non ? On va appeler ça extra petit. Pourquoi ? Parce que j'essaie de vous habituer à une partie du langage de style qui se passe dans le grand monde web du web design. C' est M est souvent utilisé pour les tablettes, ce genre de gros signes de téléphone comme l'iPhone plus, ok ? Nous avons ensuite les téléphones de taille plus. On pourrait appeler un petit et c'est bon. Mais normalement, les gens l'appellent extra petit pour leurs petits mobiles à environ 300 pixels de large, comme un téléphone standard. Cool. Ce qu'on veut dire, c'est qu'on veut que tu aies 100 ans, donc on n'ira pas tout à fait 100 ans. Nous allons ajouter un peu de rembourrage autour de l'extérieur, mais je vais faire 98. Assurez-vous que c'est le pourcentage. Ces gars vont fermer tout le chemin et dire que j'aimerais que vous soyez tous un pourcentage d'un. Il les met tous. Cool. Maintenant, sauvegardons tout juste dans un navigateur. Allons vers le bas, prêts. Boom, ça n'a pas marché. Je ne l'ai pas appliqué. D' accord. Tu dois t'assurer que tu me regardes probablement regarder cette vidéo, ça ne marchera pas. Ensuite, vous devez faire vos multiples astuces de curseur. Nous pourrions ajouter le membre manuellement, mais nous allons juste être rapides et devenir petits. Ce n'est même pas petit, c'est très petit. Sauvegardez tout, vérifiez ici. Maintenant, nous travaillons sur le bureau, la tablette, puis vers le bas et vers le haut. Boom, ils s'empilent tous. Il y a un peu d'espace autour de l'extérieur qui semble plutôt cool. Il y a quelques petites choses sur lesquelles travailler. Mais je pense que c'est un succès. Vous avez appris à faire des colonnes réactives dans Dreamweaver. D'accord. Allons ranger quelques choses dans la prochaine vidéo, mais eh bien tout le monde, nous nous rapprochons de toutes les techniques dont nous avons besoin pour construire n'importe quel site web. D' accord. À la vidéo suivante. 33. Créer un pseudo clearfix après le cours dans Adobe Dreamweaver: Bonjour, et bienvenue dans cette vidéo titrée effrayante, il s'agit de correctifs clairs et de pseudo classes. Ça a l'air effrayant, ce n'est pas si dur. Nous le faisons. Pour quelle raison ? C' est parce que je veux ajouter un peu de remplissage entre cette boîte ici, qui est appelée grille d'image, donc c'est la balise div et mon pied de page. Mais je ne peux pas parce que ces gars sont tous flottés à gauche et ça cause des problèmes quand il y a des boîtes en dessous flottant comme ce pied de page ici. Mais si nous utilisons une pseudo-classe, cela signifie que je peux ajouter du remplissage au bas de ma grille d'image et qu'il commence à bouger. Si vous suivez le tutoriel, vous ne pouvez pas le faire. Apprenons à le faire dans ce tutoriel. Nous devons le faire parce que ces gars flottent vers la gauche et nous savons d'après un tutoriel précédent que si nous piquons quelque chose vers la gauche, la balise div toute suivante doit avoir un flux clair appliqué et nous l'avons fait avec une petite classe spéciale. Le problème ici, c'est la structure. C' est mon dernier div, c'est ma dernière petite colonne, alors la balise div en dessous devrait avoir un flotteur clair, mais je n'ai pas de balise div en dessous. Je ferme la grille d'image, puis je ferme le principal, puis le pied de page commence bien en bas ici. Le problème avec l'ajout de float clair à un pied de page, cela ne fonctionne tout simplement pas, c'est trop loin du flux ici. Donc, une astuce est que je pourrais cliquer ici et juste insérer une balise div, lui donner aucun nom, supprimer le texte de l'espace réservé et juste lui donner float clair et cela fonctionnerait totalement. C' est ce que j'ai fait pendant des années et c'est ce que beaucoup de gens font encore et c'est très bien, tu peux y aller, pourquoi ? Parce que c'est facile, mais nous sommes plus loin dans ce cours et vous venu ici pour apprendre et il est temps d'apprendre des trucs cool. pseudo-classes sont particulièrement difficiles à faire ou à utiliser, donc je vais le faire. Ce que nous devons faire, c'est que nous allons le faire ici dans notre concepteur CSS. Cliquez quelque part ici, styles CSS, faites-le globalement et nous en avons un ici appelé image, où êtes-vous ? Trouvez-les, grille d'image. Ce dont nous avons besoin est un autre qui dit toujours la grille d'image, mais avant de la fermer, nous allons ajouter un deux-points là-dedans, ce deux-points indique qu'il s'agit d'une pseudo-classe. Donc c'est comme cette classe, mais un peu différent et notre pseudo-classe va dire après. Nous allons donc ajouter quelques attributs qui ne sont appliqués qu'après la grille d'image. C' est une pseudo-classe, super facile. Eh bien, le principal est le flotteur clair. Parfois, vous pouvez vous en sortir juste avec un flotteur clair, mais nous allons faire quelque chose appelé correctif clair. C' est un nom donné à un moyen légèrement plus compliqué, pas compliqué, un moyen légèrement plus robuste de dégager le flotteur. Effacer le flotteur seul fonctionne la plupart du temps, mais pas sur tous les navigateurs tout le temps. Donc, pour en faire un plus robuste, tout ce que nous avons à faire est de cliquer sur l'affichage, le changer pour bloquer, et nous devons ajouter quelque chose appelé contenu. y a pas de contenu ici dans le panneau CSS Designer. Mais les gens utiles ajoutent Dream Weaver dit qu'il y a un peu plus de bord supplémentaire [inaudible] en bas ici. Donc, je vais frapper le contenu, voilà et à peu près je ne veux rien pour le contenu, donc c'est deux guillemets marqués avec rien au milieu. Ne demandez pas pourquoi, mais cela nous aide à travers beaucoup de navigateurs. Donc c'est un remplacement pour juste mettre un div vide en dessous avec ce flotteur clair appliqué et si nous sommes tous honnêtes, ce n'est pas si difficile, nous avons fait ce charbon et un après, et cela nous fait sentir comme super-duper lorsque vous faites des pseudo-classes de correctif clair. On dirait que tu parles une autre langue. Au moins, je me sens comme ça quand je parle de ça. Allons faire ce qu'on voulait faire, c'était quoi ? C' était une grille d'image, je voulais ajouter un peu de rembourrage après. Oui. Donc, il saute autour, mais là vous allez, rembourrage ajouté. Joli. Avant d'aller juste un peu de ménage, et quand je passe du bureau à la tablette, le rembourrage en haut ici n'est pas bon. Donc, c'est sympa au bureau et c'est bon sur mobile, nous allons le faire aussi bien, mais c'est plutôt mauvais à la tablette. Pour ce faire, ce que nous allons faire est que nous allons faire styles.css en tablette et nous n'irons pas à la grille d'image. Nous n'avons pas de grille d'image ici actuellement, donc nous allons dire quand la grille d'image apparaît dans la tablette, il a, Je vais cliquer dessus, faites défiler vers le bas, juste besoin de plus de marge vers le haut. Cette chose continue de sauter autour, parce que nous l'écrasons maintenant vous pouvez voir comment il a sauté, je vais frapper un plus bas, donc nous ne l'ajoutons pas sur le bureau, nous le remplacons. Donc nous disons qu'au lieu de ça, faites ça. Maintenant, juste un peu de tests entre ici. a l'air bien, ça a l'air bien ici, c'est un peu de jouer autour. Une chose que nous pourrions avoir à faire est, peux-tu voir ici que ce mot se casse sur ces différentes lignes et qu'il nous gâche ? Il est juste vraiment difficile de travailler avec tant de tailles différentes, donc il y a un moment où vous êtes un concepteur web, vous allez devoir vivre avec des vues qui ne sont pas parfaites. Je suppose que ça n'a pas besoin d'être parfait, il doit être utilisable, mais il n'a pas besoin d'être parfait. Ce que vous faites, c'est que vous visez les appareils principaux et si quelqu'un arrive avec une taille folle, vous devrez peut-être revenir en arrière et l'ajuster. Vous ne voulez pas être pris dans la création de dix requêtes multimédias différentes. Juste pour que vous sachiez, trois, c'est le minimum, donc ordinateur de bureau, tablette et mobile, c'est ce que nous avons. Mais beaucoup de sites plus sophistiqués auront cinq, donc je vais avoir comme un très petit, comme nous l'avons, ils auront une taille fablet, ce genre d'iPhone plus taille. Ils vont également regarder les tablettes paysage et horizontales, puis les plus grands ordinateurs de bureau, donc je vais en avoir cinq. J' ai vu des sites avec sept. Ainsi, vous pouvez continuer à effectuer ces requêtes multimédias et à effectuer des ajustements, cela dépend de la quantité de contrôle que vous voulez sur chaque vue unique. Mais sachez que plus vous avez de requêtes dans les médias, je suppose que plus il y a de travail à faire et que vous pourriez être d'accord avec cela. Pour ce site ici, nous restons simple, principalement pour la taille des classes et si je suis honnête, je ne fais que trois requêtes média pour mes sites personnellement. D' accord. Devrions-nous faire mobile ? Vous pouvez en créer un pour mobile. En fait, quand il arrive à mobile, je suis heureux avec le rembourrage, mais vous allez juste à la largeur maximale ici pour mobile et ajoutez notre classe pour la grille d'image et changez le rembourrage. Mais tu pourrais faire ça, j'ai la foi. D' accord. Prochain tutoriel. 34. Créer et relier de nouvelles pages dans Dreamweaver à l'aide de modèles: Salut là. Dans cette vidéo, nous allons passer en revue et commencer à construire notre deuxième page, qui est notre page de portefeuille. Cela sera indicatif de la façon de créer de nouvelles pages. Nous allons changer le titre ici et ces morceaux d'image en bas. Oui, allons-y et faisons-le maintenant à Dreamweaver. D' abord, il y a deux façons de le faire. Nous pouvons aller à Fichier, Nouveau comme nous l'avons fait plus tôt et nous avons dit chercher un modèle et c'est le modèle que nous avons créé plus tôt dans la série. Oui. Appuyez sur « Créer ». Le seul problème, c'est qu'on obtient une page blanche. Ce que je fais généralement, c'est que je vais cliquer sur « Annuler » car je fais juste un Enregistrer sous de cette page. Maintenant, nous avons dû appeler notre première page index.html. C' est la page d'accueil, pas moyen de contourner celle-là. Maintenant, toutes les autres pages que nous allons nommer par nous-mêmes. Les seules règles sont, n'utilisez pas de majuscules et n'utilisez pas d' espaces ou de caractères aussi fous que ça. Nous allons appeler notre portfolio-ui-design, et le nom du client pour celui-ci, disons juste que c'est byol. Nous voulons également de bons mots clés dans nos URL. C' est vraiment bon pour les moteurs de recherche. Je vais appuyer sur « Enregistrer » et les faire glisser vers le haut et enregistrer. Il est toujours connecté au modèle. Une chose que j'ai eu des problèmes avec l'utilisation de modèles dans le passé est que parfois vous faites une mise à jour du modèle, maintenant et ce gars ne met pas à jour, si cet événement arrive, cela arrive comme une fois dans une lune bleue, mais vous pouvez aller à Outils, Modèles, si jamais il est grisé, il suffit de cliquer dans la vision de code en bas ici. Pour une raison quelconque, cliquer dans la vue en direct fait que cela ne fonctionne pas. Cool. Modèles, et celui-ci ici, vous pouvez dire, « Appliquer le modèle à la page ». Vous pouvez simplement cliquer sur votre modèle à nouveau. Je n'ai pas à le faire maintenant parce que ça marche très bien. Mais si cela arrive, essayez ça. L' autre chose que vous pouvez essayer, si plus tard dans la route vôtre casse, vous pouvez dire « Mettre à jour la page actuelle » et qui va juste revenir en arrière et vérifier le modèle juste pour vous assurer au cas où il n'a pas été connecté. Je vais mailler ce design ici. Il y a quelques choses que je dois me débarrasser. Je vais les cliquer en vue en direct. Il y avait cette étiquette, tu es parti. En cliquant dessus. J'aime cliquer ici pour m'en assurer, parce que je ne veux pas entendre un contenu qui est la grande boîte, mais cette image flottante gauche est tout ce dont je veux me débarrasser. Je vais réutiliser ce texte et je vais changer le texte à ce que j'avais ici, la conception de l'interface utilisateur. Reste autour. Nous allons juste en faire un peu, évidemment entrer quelques détails, mais il va y avoir quelques trucs supplémentaires que nous allons apprendre au fur et à mesure que nous construisons. Ce sera ma conception d'interface utilisateur pour BYOL. Supprimer U. Cool. Quand c'est orange, je veux insérer à une balise p et ça va représenter ce texte ici. Ce que je ne veux pas faire, je le copie et le colle, c' est que quand tu es dans ce mode orange, ça ne te laisse pas faire beaucoup de choses. Vous devez cliquer dessus et cliquer dessus dans sa vue tag, c'est la vue bleue. Orange est la seule chose d'édition de texte. Avec cette sélection, je vais aller à Insert, je vais descendre à la balise p, où êtes-vous ? Là, paragraphe. Je vais aller après mon H1. Je vais remplacer ce texte. Je ne sais pas pourquoi j'aime le faire ici en mode code mieux, coller. On y va. Cool. On va devoir faire du style pour ça. Maintenant, je pourrais créer un sélecteur composé pour dire des balises p qui sont à l'intérieur du contenu du héros. Le problème avec cela est que je pourrais utiliser une autre balise p pour faire autre chose. Je vais être un peu plus précis ici. Je vais créer une classe spécifiquement pour coiffer ce texte juste ici, plutôt que toutes les balises p qui sont à l'intérieur de cette boîte supérieure. Parce que peut-être sur la page Contactez-nous ou sur la page à propos de nous, nous voulons faire des choses différentes avec la balise p. Créons un concepteur CSS de classe, mien ne regarde pas donc je vais réinitialiser Dan est génial. Cool. Styles.css, je vais le faire globalement. Je vais créer une classe ici, et je vais l'appeler texte au début. Chaque fois que vous commencez à faire des textes, appelez-le simplement du texte au début afin qu'il soit facile de le trouver plus tard. Ce sera du texte blanc, et nous appellerons ceci une description. Qu' est-ce que je vais faire ? Je vais le faire, je vais obtenir du texte, je vais en faire une couleur de police de blanc et je vais en faire une taille de police de 30. Ce que j'ai tiré de mon, oh mec, ça devient ennuyeux ce double 3. Je ne sais pas pourquoi ça fait ça. Je tape trois une fois et ça en met deux. Cool. Maintenant, nous allons appliquer ça ici. Celui-ci va s'appeler texte. Vous pouvez commencer à voir pourquoi utiliser du texte au début est utile. Vous pouvez parcourir toutes les différentes options de texte. La prochaine chose que je veux faire est, c'est le genre de nouvelle chose unique. Le reste de ce que nous avons fait jusqu'à présent, nous l'avons fait dans le cours. Mais ce morceau ici maintenant sur orange. Le problème est que nous ne pouvons appliquer des classes qu'à cette balise p entière. Le problème est que je veux que cette petite partie de la balise p soit rouge. Maintenant, ce que je pourrais faire est de créer deux balises p puis de les flotter l'un à côté de l'autre et c'est beaucoup de drame, donc nous allons regarder quelque chose appelé une balise span. Une balise span est que si vous êtes du monde de disons, InDesign, c'est ce style de personnage. Je peux l'utiliser dans le cadre de mon paragraphe, juste une mise à jour un peu. Si vous n'avez jamais entendu parler d'un style de personnage, pas de soucis.. Une balise span, regardez ceci, vous devez le faire ici dans CodeView. C' est une façon d'appliquer une classe, au lieu de la balise parent qui se produit normalement, nous pouvons l'appliquer à notre petit peu à l'intérieur de la balise p et c'est juste appelé une balise span. Tout d'abord, créons cette balise. Styles.css, GLOBAL, créez celui-ci ici. Je vais appeler ça. Text, on ira avec le rouge. Je vais l'appeler rouge juste parce qu'il est réutilisable. J' aurais dû appeler ça du text-blanc aussi. Mais text-rouge, je vais dire que tu es rouge. Je vais le tirer de, avec la couleur du texte. Je devrais aller trouver la bonne couleur de Illustration ou utiliser l'outil pipette, qui est là et voler la couleur. Je ne vais rien faire d'autre parce que la taille de la police vient du text-blanc sous-jacent que nous allons appliquer à toute la balise. Pour appliquer une balise span, nous la mettons en surbrillance ici dans CodeView puis nous appuyons « Command T » sur un Mac ou sur « Control T » sur un PC et cette balise wrap apparaît. Tapez la plage. C'est ce qu'on veut. Mais nous voulons aussi ajouter une classe. Span, space, puis tapez cl et vous pouvez voir, pratique Dreamweaver, il y a une classe là-dedans et il a ajouté toute la syntaxe pour nous aussi, qui est les égaux et les guillemets. Ici, nous allons taper sans l'arrêt complet. Souvent, lorsque vous travaillez dans CodeView, vous ne mettez pas le signe d'arrêt complet. Celui-ci est du texte et du texte rouge. Joli. Je reviens, et j'espère que Dreamweaver a enveloppé le client dans la balise span et ça s'appelle une classe span, qui est du texte rouge, et voilà, comme le style en ligne. La prochaine chose que je veux faire est ce morceau de texte ci-dessous pour le mémoire. C' est à peu près exactement la même chose que ça. Assurez-vous que vous cliquez sur la balise parent, qui est la balise p, appuyez sur « Commande D » sur un Mac ou « Control D » sur un PC, duplique cette balise. Génial. Changons ceci en bref. Maintenant, les tics adapté certains je pourrais copier et coller différents illustrateur, mais je veux vous montrer un truc cool. Maintenant, cela ne fonctionne que ici en mode code et qui mélangent les mots latins appelés Lorem ipsum, juste placer les tiques de titulaire. Ce que nous pouvons taper ici en mode code est alarme, puis mettre dans combien de mots vous voulez, puis appuyez sur « Tab » pas entrer onglet sur votre clavier comme ça. J' ai 20 largeurs vont en quelque sorte. C' est quelque chose qui s'appelle l'image. Si vous n'utilisez pas l'image et que vous voulez obtenir plus en vue du code, j'ai un autre colas qui est un peu plus conçu pour faire beaucoup de ce que nous avons fait ici, mais encoder des vues, cela pourrait être une étape suivante pour vous, mais c'est plutôt cool. Vous voulez Google et jeter un oeil ou regarder quelques-unes de mes autres vidéos. Maintenant, regardons nous débarrasser de... Je vais laisser les trucs « Parlons » et ensuite je laisse les choses « Parlons » là-dedans. D' accord. C'est toujours sur mes dessins, je vais le laisser là-dedans. La prochaine chose que je dois faire est ce Pergame feuilles, une grande image qui va représenter les conceptions qui ont fait. Quand je clique sur, disons, une de ces icônes ici, il charge cette page donc je dois passer par et supprimer toutes ces colonnes. Je vais cliquer sur ces gars. Maintenant, nous allons quitter la zone de grille d'image. Je ne devrais probablement pas l'appeler grille d'image et aurais probablement dû juste appeler ce secondaire, principal ou quelque chose comme ça parce qu'il va juste avoir une idée et maintenant pas une grille. Confuse. J'ai besoin de tout sortir d'ici. Il est plus facile de le faire en mode code. Vous pouvez le faire en direct si vous préférez, mais je vais vous attraper tous les gars, assurez-vous que vous prenez ça en commençant à la fin. Comment savez-vous si c'est le début ou la fin en mode code ? Cliquez sur la grille de l'image et vous pouvez la voir en surbrillance ici. C' est la fermeture comme l'ouverture. Tout ce qui se passe entre ici, je vais me débarrasser et au revoir. Maintenant, avec mes affaires sont toujours clignotant là-dedans. Mettons à notre image. Nous allons aller à « Insérer une image » et nous allons apporter des images de nos fichiers d'exercices et j'en ai une. C' est ce grand gars, un peu différent de mon design et gardons tout, testez-le dans le navigateur. L' image est beaucoup trop grande et elle ne répond pas, mais ne vous inquiétez pas, rappelez-vous que nous avons créé une balise de code, appelée responsive. Nous allons éditer à cette image point de code responsive de l'image et nous sauvegardons tous, ouvrez dans le navigateur et maintenant laissez-moi le rétrécir vers le bas. Hé, regarde tout ça en étant réactif. Vous pouvez décider si vous voulez un rembourrage autour d'elle aussi. Je n'ai pas fait ça. Vous pouvez ajouter du remplissage à la grille de l'image ou vous pourriez créer une classe de remplissage spéciale mais je suis heureux qu'elle bat à côté des bords ici, éditer le faux remplissage avec l'image elle-même. Mais c'est ce que je dois faire en regardant cela quand il passe à la vue mobile. Il est juste trop gros texte donc, je peux passer par maintenant et ajuster le composé peut-être sélectionné pour dire les balises p qui sont à l'intérieur de l'image faire plus petit. Ils sont de 30 pixels pour le moment. Essayons ça. Allons aux styles de concepteur CSS, mobile. Créons un sélecteur composé qui dit, en fait rien n'est là-dedans, je vais éteindre et effectivement cliquer sur adhéré à espérons-gagner du temps. Je vais cliquer sur lui, puis faire un sélecteur. Voici une balise que je veux, je n'ai pas besoin de cette description de l'image texte. P tags qui sont à l'intérieur ici, notre contenu fonctionnera avec espoir et nous allons attraper. En fait, abaissons-le vers le bas, allons au texte et disons, allons-y taille de police et faisons des pixels de 220. On les obtient géniaux. Une chose que je n'ai pas fait est que je n'ai pas eu de rembourrage sur les côtés quand il descendu à ma balle parce que ça n'a pas vraiment d'importance quand j'ai eu ces tiques originales de lui, mais maintenant je pense qu'il a probablement besoin donc ici il ya un froid ici ou contenu et fait un mobile. Est-ce que ça dit quelque chose ? Je vais le montrer. Donc il est assis zéros. Je vais en fait le tourner à 10 pixels. Puis 10 pixels de ce côté me donnent juste une petite place de respiration sur les côtés. Chaque fois que vous faites des choses comme ça, vous allez devoir revenir en arrière et vérifier que j'ai détruit la page d'index. J' ai l'impression que je ne l'ai pas fait, mais on va le goûter de toute façon. Avec cela ouvert dans mon navigateur, il est très bien là. Rien ne s'est mal passé, sauf rappelez-vous ce rembourrage que nous avons mis de ce côté là et nous avons semblé qu'il soit au milieu. Nous avons rompu en ajoutant un pixel d'équipe supplémentaire. Donc on va devoir ajuster ce sélecteur de composé. Mais tout le reste semble bien quel sélecteur composé nous avons utilisé. Je pourrais aller à l'index, aller sur mobile, aller à ce truc ici et c'était l'image dans le contenu du héros. Vérifions ça. Image d'en-tête. C' était ce gars ici, l'image de contenu de héros flottant gauche. On va juste ralentir un peu. Ce genre de chose arrive tout le temps. Vous allez plus loin dans le cours et vous faites un peu d'ajustement, vous devez aller et double-vérifier. Ça n'a pas de ramifications. Si c'est le cas, vous avez peut-être créé sa propre classe spéciale, mais vous ne voulez pas avoir l'habitude de créer trop d'entre eux parce que votre feuille de style CSS peut devenir fou en regardant le moment. La nôtre est agréable et propre et nous ne gagnerions pas de prix de développement, principalement parce que mes noms vraiment stupides vue de bureau. Mais ça va plutôt bien. La dernière chose que nous allons faire, c'est que nous devons connecter ces deux pages. Dans ma page d'index ici, je vais aller à la vue complète. Ça va cliquer en lui. Je vais dire que lorsque ce bouton est cliqué, cette image, nous allons aller aux lignes stripy et dire lien. Si vous aviez un hachage ici comme nous l'avons regardé plus tôt, nous pouvons supprimer le hachage et effectivement cliquer sur « Parcourir le fichier » et dire une interface utilisateur du portefeuille, cliquez sur « Ouvrir ». Maintenant, il est par défaut à soi, qui est la cible zéro. Vieilles tics, ça va être ma conception de l'interface utilisateur pour apporter votre site d'ordinateur portable. Ce n'est pas, c'est des choses que j'ai comme des trucs d'espace réservé modélisé donc ce n'est pas mon travail, c'est du travail de bibliothèque stocké. Cliquons sur l'arrière-plan et allons le tester dans un navigateur. Maintenant, cette image ici espérons que nous pouvons cliquer dessus et il saute à cette page. Pour revenir, nous allons utiliser le clic sur l'image ici comme logo. Cela remonte à la page d'accueil. Nous l'avons fait dans un tutoriel précédent, mais c'est exactement la même main que nous venons de faire pour cette image, sauf au lieu de lier à la page de l'interface utilisateur, il renvoie à l'index. D'accord. Maintenant, vous allez par dupliquer cette page et faire tout cela. cool, c'est que vous remarquerez qu'au fur et à mesure de ce cours, la production devient plus rapide et plus rapide parce que nous pouvons compter sur des choses que nous avons faites dans le passé, et cette duplication va être super facile parce que c'est d' un modèle et de baies parce que nous avons déjà fait la mise en page de cette page. On fait juste un « Save As » et on va tout changer. C' est tout pour ce tutoriel. Passons à la prochaine. 35. Télécharger votre site Web sur l'hébergement Internet via Dreamweaver: Très bien, dans cette vidéo, on va s'inscrire pour un hôte. Dans notre cas, nous allons utiliser Bluehost parce qu'ils sont géniaux. Mais vous pouvez vous inscrire à n'importe quel hébergement ici, selon ce que vous préférez, puis passer à la vidéo suivante après cela, où nous connectons réellement FTPD downs à Dreamweaver et téléchargeons notre site. Donc, si vous cherchez à héberger, d' accord, allez sur bluehost.com/track/byol. Une ou deux choses se produisent, c'est que tu obtiens un rabais et que je reçois une commission sur la vente, ne te coûte rien de plus, tu économises de l'argent. Mais si vous ne voulez pas faire de cette façon, vous pouvez simplement aller directement sur bluehost.com et faire le tour de mon petit lien. Peu importe comment vous le faites, vous vous retrouvez ici, vous cliquez sur « Démarrer ». Ce que tu veux, c'est cette première option, ok. Lisez, jetez un coup d'oeil, mais de la majorité des petites et moyennes entreprises, vous avez seulement besoin d'un plan de base simple. Il a été dit 395, mais en fait il finit par être environ 595 après avoir mis toutes les choses dont vous avez besoin. Donc, si vous avez déjà un nom de domaine, tapez-le dans le ici. Si tu n'en as pas, je vais m'inscrire pour l'instant. Apportez votre ordinateur portable est awesome.com. Très bien, alors remplissez les champs ici, et cette partie ici est vraiment importante. Donc votre prix pour 395 est pour trois ans. Si vous voulez garder le coût bas et faire 12 mois, vous payez plus. Mais tu n'as qu'à tousser un an. Des choses dont tu n'as pas besoin. La confidentialité du domaine ne garde pas vraiment votre vie privée, mais vous protège uniquement des personnes qui ne savent pas ce qu'elles font. Sauvegarde du site. Si vous travaillez simplement sur votre propre site, vous n'en avez pas besoin car vous aurez toujours une copie sur votre ordinateur portable. Mais si vous travaillez avec plusieurs personnes, cela peut être vraiment utile car ils détruisent votre site. Vous n'avez pas de copie de ce nouveau site. Oui. Tu veux aller à cette sauvegarde. Je n'en ai pas besoin pour cette affaire parce que c'est moi qui travaille. Le démarrage de saut du moteur de recherche ne fonctionne jamais. 'Lock du site' Cela ne fonctionne pas non plus. Vous permet juste de mettre un badge sur votre site pour dire que nous sommes protégés contre les logiciels malveillants, nous ne allons pas l'utiliser, donc nous ne allons pas modifier et les certificats SSL un peu compliqué pour ce que nous faisons maintenant, mais c'est certainement quelque chose dans votre avenir, il rend votre site Web de HTTP, www.bringyourlaptopisawesome à HTTPS, qui est plus sécurisé. Mais il y a d'autres cerceaux pour sauter. Donc, nous allons éteindre ça et garder les choses simples. Alors entrez vos détails de paiement et je vous verrai dans l'écran suivant. D' accord. Félicitations, nous nous sommes inscrits. Est-ce que je veux payer le tarif et autre chose ; mot press, non merci. D' accord. Il vous demandera de vous inscrire pour un mot de passe. J' ai fait ça. Connectez-vous. Ok, donc c'est là que nous finissons et ce que nous recherchons vraiment, c'est quelque chose qui s'appelle les détails FTP. C' est un petit bouton ici. Ou tu recevras un email comme je l'ai fait. Ok, bienvenue à Bluehost et ils vous enverront les informations FTP. Alors jetez un oeil dans votre email et ce truc ici est assez important. Alors écrivez-le quelque part où vous gardez tout ce bloc-notes, gardez tous vos fichiers ou ce Google Doc. Alors mettez-les tous là parce que ces détails FTP que vous utiliserez une fois et oublierez. Ensuite, dans quelques années, quand vous devez mettre à jour des choses, vous oublierez, en particulier votre mot de passe. Si vous oubliez, vous pouvez effectivement trouver ce truc ici dans bluehost cliquez sur FTP et écrivez le bas sera la même information. Je ne veux pas cliquer sur maintenant juste parce qu'il a des détails personnels là-dedans que je ne veux pas que vous voyiez. Alors nous allons sauter dans Dreamweaver maintenant et, mettre dans ces détails FTP. Donc, peu importe la page que vous avez ouverte. Ça n'a pas d'importance du tout. Allons sur le site et gérer le site. C' est celui qu'on travaille sur tout ce cours, Ok, portefeuille génial de Dan. Nous allons double-cliquer dessus. Ce sont les détails que nous avons commencé à mettre, mais maintenant nous devons insérer quelque chose appelé le serveur. C' est ce que Bluehost nous donne, ils nous permettent d'utiliser leurs serveurs. Alors frappons plus. Donnez-lui un nom en haut, ça n'a pas d'importance, « Bluehost. Ok, si vous utilisez Go Daddy ou toute autre société d'hébergement de domaine, vous pouvez simplement taper les détails FTP ici. C' est à peu près exactement la même chose. Donc, dans cet e-mail, vous avez vu que j'avais le nom d'hôte, qui est en fait l'adresse FTP. Mettons-le en fait à côté de lui. C' est celui-là, le nom d'utilisateur. Qu' est-ce qu'on a d'autre ? On a le mot de passe, que je vais découper. Mot de passe Impressionnant, et le répertoire racine doit être mis dans. Dans notre cas, c'est du HTML de soulignement public, c'est un super commun. Joli. Maintenant, le moment de vérité, nous allons frapper 'Test 'Hit 'Test' et les doigts croisés ça marche. Impressionnant. Si cela ne fonctionne pas, parfois lorsque vous configurez un nouveau compte d'hébergement, cela peut prendre un peu de temps à remplir, alors donnez-lui une heure, peut-être deux avant de commencer à crier sur bluehost ou moi. Parfois, cela peut prendre un peu de temps pour travailler. L' autre chose que vous pouvez faire est que votre nom de domaine peut ne pas être enregistré et fonctionne encore. Donc byolisawesome.com n'a peut-être pas encore peuplé. Ils vous ont donné un mot de passe temporaire. Voir cette URL temporaire ? Ok, c'est un que vous pourriez utiliser entre-temps jusqu'à ce que vos noms de domaine réels fonctionnent. Cliquez sur 'Okay'. Maintenant, si vous rencontrez des problèmes avec un FTP, certaines des choses qui peuvent arriver sont que vous pouvez désactiver cela et sur FTP passif qui peut parfois résoudre les choses. L' autre chose qui pourrait se produire si vous utilisez un hôte différent, il peut ne pas être appelé soulignement public Html, il peut avoir une URL différente. Alors communiquez avec votre société d'hébergement si vous rencontrez des problèmes avant de les déranger, consultez la FAQ. Souvent, ils aimeront comment s'installer dans Dreamweaver et ils vous diront quelle partie va où si vous rencontrez encore des problèmes, contactez la société d'hébergement. C'est pour ça que tu les as payés. Souvent, le chat en ligne est un moyen facile de le faire ou de déposer un commentaire ici sur cette page. Je vais voir ce que je peux faire pour aider. Touchons, « Sauvegarder » et c'est fait et vous êtes prêt. Donc, vous téléchargez des pages individuellement en général. J' ai index.html ouvert. Ici, nous sommes dans notre panneau de fichiers. C' est le site qui est sur mon disque local. Vous pouvez voir la vue locale. C' est juste ma machine. Maintenant, ce que je veux faire, c'est le mettre. Donc le site mis et cela va le connecter à bluehost. Ça prend beaucoup de temps. Ok, se connecter au serveur. Souhaitez-vous mettre des fichiers dépendants ? Ok, c'est important pour une raison quelconque, il y a une minuterie là-dessus. Je ne sais pas pourquoi, mais j'ai 22 secondes pour l'expliquer. Fichiers dépendants en ce moment, nous sommes juste en train de sortir HTML. Mais nous avons construit une feuille CSS et quelques JavaScript et d'autres choses et quelques images qui ne font pas partie de cela. Les fichiers dépendants sont tous ces bits supplémentaires. Donc, si vous voulez juste mettre en place le fichier d'index, vous cliquez sur « Non ». Si vous le voulez comme moi, mettez le fichier d'index plus toutes les images plus tout le JavaScript, et tout le CSS. Ok, c'est ce qu'on doit faire. La raison pour laquelle ils gardent cette séparation est que, disons que c'est beaucoup d'images et ce sont de grandes images longues ; voir les images prennent le plus de temps. Html prend quelques secondes pour mettre à jour, alors que Jpegs peut être assez grand. Donc ce que vous faites est de dire juste faire changer le texte ici. Vous modifiez le texte et téléchargez simplement le code HTML. Donc, vous dites les fichiers dépendants, « Non ». Parce que toutes les images n'ont pas changé. Ils sont tous pareils. Très bien, donc nous avons téléchargé du tout, et maintenant nous allons aller vérifier, apporter votre propre ordinateur portable est génial. Allons jeter un oeil dans un navigateur. Très bien, nous voici, www.byolisawesome.com. Hey ho, on a un site web et le reste de la planète peut le voir. Ne plus tester localement ou tester sur notre télécommande. Tout a l'air génial et tout fonctionne. Si vous avez jusqu'à ce point, vous êtes probablement super heureux avec vous-même. J' ai fait cela un million de fois, et je ne fais cela que pour un test et je suis toujours assez excité. Je ne sais pas pourquoi je me sens différent quand le monde peut le voir. Allons jeter un oeil à ce que nous devons faire d'autre juste pour assurer que tout est terminé. Revenons dans Dreamweaver. Donc, ce que nous devons faire maintenant, c'est que nous devons nous assurer que toutes les pages sont mises à jour afin que nous puissions maintenant, parce que nous n'avons qu'une page, et la page du portefeuille, nous pouvons simplement l'ouvrir et aller sur le site et aller à mettre. Cela le téléchargera sur l'hébergement. Si vous avez beaucoup de pages, disons que vous avez mis à jour et que vous avez 20 pages, vous pouvez avoir cette proximité, peu importe. Vous pouvez sélectionner sur toutes les différentes pages ici ou sélectionner l'ensemble du site. En fait, il n'y a pas besoin que ces deux-là montent. Les modèles sont juste pour vous localement tous les autres peuvent monter. Donc, vous pouvez comme celui-ci maintenez la commande enfoncée sur un PC, désolé, commande sur un Mac ou Contrôle sur un PC et cliquez sur deux d'entre eux. Ensuite, ici, il y a une autre façon de mettre les choses en jeu. Il vous interroge à nouveau sur les fichiers dépendants. Est-ce que je veux des fichiers dépendants ? Je vais devoir dire oui parce que cette interface utilisateur du portefeuille a quelques images supplémentaires. Le problème est, c'est qu'il va aller et télécharger ceux de l'index à nouveau. Cela peut donc être un peu long processus. Allons le vérifier maintenant. Hey ho, et nous allons cliquer sur un bouton. C'est là. Il y a notre grande image de portefeuille et il dit : « Hé, il y a des morceaux ici écrits en latin, ne voudriez-vous pas le traduire. » C' est parce que j'ai ce texte d'espace réservé ici. Donc ça disparaîtrait quand je mettrai le bon texte là-dedans. Merci. Google Chrome. Très bien, mes amis, c'est la fin de mettre des trucs en ligne. Maintenant que je sais pour un fait donne beaucoup de mes étudiants beaucoup de tracas. Laissez-moi un message pour dire que je ne pouvais pas le faire fonctionner, qu'est-ce qui ne va pas ? Assurez-vous de m'enregistrer des captures d'écran. Je n'ai pas nécessairement besoin de votre mot de passe, mais il est bon de voir quel est votre nom FTP et votre nom d'utilisateur afin que je puisse diagnostiquer le problème. C' est la fin de celui-ci. Passons au prochain tutoriel. 36. Ajouter Google Analytics à votre site Web Dreamweaver: >Ok, dans cette vidéo, nous allons vous inscrire à Google Analytics. Pourquoi ? Parce qu'il vous donne toutes ces informations sur qui vient sur votre site. C'est gratuit. Vous pouvez voir mon affaire. Combien de personnes ont payé pour les cours sur l'apport de votre ordinateur portable au cours des sept derniers jours, combien de personnes sont actuellement sur le site ? Six d'entre vous. À quelles heures de la journée ils sont ? De quels pays ils viennent ? Toutes sortes de bonté. Ok, donc nous allons passer par là et vous montrer comment l'installer. C' est à peu près copier-coller. Super facile, excellent rapport qualité-prix. Faisons-le maintenant. Bon, alors inscrivez-vous à Google Analytics, allez à l'analyse. Google.com. Vous devrez vous connecter avec un compte G-mail. Si vous n'en avez pas, ils sont libres d'en obtenir, mais vous devrez en utiliser l'un pour ce processus. Créez un compte G-mail si vous n'en avez pas déjà un. Vous passez par le processus d'inscription. C' est gratuit, tu finiras quelque part comme ici. Cela change assez souvent. Donc, si votre écran a l'air un peu différent, ne vous inquiétez pas, c'est assez facile. Il suffit de suivre les étapes que Google vous donne. Finalement, ce que vous voulez obtenir est d'avoir le code de suivi. Bon, suivons moi juste parce que nous essayons de le faire fonctionner. On va aller BYOL est génial. Site web. D'accord. Mon nom de compte et mon nom de site Web sont les mêmes. L' URL est www.byol est génial. Allez l'industrie en choisir un. Je suis dans l'éducation, emplois et l'éducation feront l'affaire. D' accord. Zones de reporting, cela ne peut pas être modifié ultérieurement pour assurer qu'il se trouve dans le pays à partir duquel vous souhaitez créer des rapports. Donc, je vis en Irlande, mais si j'étudie un site pour les États-Unis, je veux que ce soit aux États-Unis parce que je veux là-bas jour et nuit parce que ce sera bizarre de les vérifier. Ils sont comme : « Hé, pourquoi ils sont si actifs à 4 h du matin ? Quand il est là comme 19h00, selon l'endroit où vous êtes dans le monde. Alors choisissez la zone de déclaration de non pas où vous êtes, mais avec le site Web ou la plupart des personnes qui ont le site, vont être. Donc je vais laisser le mien aux États-Unis. Cool. Est-ce que je voulais prendre un bail ? Je le fais. Peut obtenir un numéro de suivi. Je suis d'accord. Parce que ce que je veux c'est ça ici, c'est la partie principale que je veux. Nous cliquons ici et nous le copions, puis nous sauterons dans Dreamweaver. Donc ici dans Dreamweaver, et je ne vais pas ouvrir ces pages parce que je veux que ce soit dans le cadre des modèles. Je vais ouvrir mon modèle. Maintenant, je suis dans cet onglet de fichiers ici. Vous pouvez ouvrir votre modèle à partir d'ici. Cool, parce que ce que je veux faire c'est que je le veux sur chaque page. Maintenant, l'utilisateur ne le voit pas. Les choses étaient que l'utilisateur ne voit pas est dans cette balise head, body tag est notre page que tout le monde voit et la balise head est juste le code en arrière-plan et mettez-la là où elle nous le dit. Hé, dans notre cas, ça nous dit de le mettre juste sur chaque page. Utilisé pour avoir un espace spécifique dans lequel il avait besoin d'aller. Où vais-je mettre le mien ? Je vais mettre le mien à l'intérieur. Peut-être qui je voulais charger juste après ces scripts ici. Hit coller et vous avez eu ce gros, laid peu de JavaScript. La bonne chose à ce sujet, c'est que si je l'enregistre et mette à jour ces pages, génial, fermez-le. Vérifions simplement qu'il est dans ces pages. Je vais ouvrir l'index, vérifier son dans le caché quelque part. Il sera grisé. Là. C'est bien là. Page du portefeuille. Il est là. Super. Ils sont mis à jour. Donc maintenant tout ce dont j'ai besoin est de télécharger ces deux pages. Je vais les fermer et les télécharger même temps en maintenant la commande pour les sélectionner tous les deux. Nous allons contrôler sur un PC et aller à mettre. Souhaitez-vous mettre domaine et fichiers ? Je n'ai pas besoin de le faire dans ce cas parce que rien n' a vraiment changé sauf pour les pages HTML. Pas de changements CSS, pas d'images. Donc ça va être super rapide. Maintenant, le peu décevant. Allons jeter un coup d'oeil, c'est que le coke à boire et prendre un peu sauvage aller. Aucune donnée n'a été reçue au cours des dernières 24 heures, c'est bon. Voyons si nous avons des codes de suivi tout de suite. Là où vous voulez aller maintenant est de revenir à ce bouton Accueil, d' accord, et assurez-vous juste que vous êtes dans, vous apporterez votre ordinateur portable est génial ou quoi que ce soit lorsque vous utilisez. D' accord. Ici, y a-t-il des gens sur mon site ? Y a-t-il un code de suivi qui fonctionne réellement ? Essayons ça. Allons à BYOL est génial. Joli. Retournez à l'analyse et rien ne fonctionne. Allez, Google Analytics. Maintenant, nous sommes tous déçus. C'est bon. L' analyse de let peut prendre un peu de temps pour aller, lui donner un jour. Si tu ne sais pas travailler d'ici là, tu as un problème et tu peux me contacter et me dire : « Hé Dan, ça ne marche pas. » Nous vérifierons les FAQ d'analyse et verrons si vous pouvez y remédier. Mais je n'ai jamais eu l'échec vraiment. C' est une chose assez solide, facile à faire tant que vous le mettez dans la tête. Maintenant, regardons quelques-unes des autres analyses. Regardons un de mes autres sites. Regardons apporter votre propre ordinateur portable. D' accord. J'ai froid. BYOL en ligne. Vous pouvez avoir plusieurs sites gratuitement. Cool un pour le moment il y a cinq personnes sur le site. Ok, en regardant différentes pages et on ne va pas trop approfondir ces détails parce que je ne sais pas. J' ai l'impression qu'il y a des détails personnels. Ça ne me dérange pas de partager. Vous pouvez commencer à voir tous les détails que je reçois des gens, où viennent les gens, les pages sur lesquelles ils sont le plus. C' est les sept derniers jours. Donc, je peux voir des choses comme le temps ce jour-là où la plupart des utilisateurs sont en ligne, toutes sortes de bonté. Ça ne va pas être un cours d'analyse, d'accord ? On va s'en tenir à l'analyse. Ouais, ça va être nous analytique super facile à faire, super cool information sur qui est sur votre site. Ne soyez pas déçu au début. Ça pourrait sembler impressionnant. Ce n'est pas le cas. Ok si cinq personnes sur les sites assez cool. C' est l'un des plus grands sites que j'ai jamais créés. Mais quand tu auras un site pour la première fois, tu seras la seule personne à visiter, puis ta mère et toi Nana. Alors l'ami de ton frère, d'accord. Au cours des premiers mois, vous n'avez peut-être que quelques personnes. Mais au fur et à mesure que vous développez votre entreprise ou votre site de portefeuille, vous commencez à mieux vous classer. Tout ce genre de bonté. Vous commencerez à obtenir des détails ici. D' accord, je me frotte. Passons à la vidéo suivante. 37. Exercice de cours sur Dreamweaver: Très bien, c'est le temps d'exercice de classe. Donc, il y a deux options la première est de continuer avec ce cours et de nous construire ou nous contacter et à propos de nous page. Alors mettez du contenu là, liez-le à la page d'accueil, puis téléchargez-le sur un hôte pour que je puisse le voir ou tester localement et m'envoyer des captures d'écran que j'aimerais voir ce que vous en avez fait. La prochaine chose à faire est et l'option la plus importante est de créer réellement votre propre portefeuille. Je suis très heureux que vous utilisiez la structure que nous avons construite dans ce cours. Je veux juste que tu t'éteignes et que tu choisies peut-être une police différente. Vous pouvez utiliser la même police. Vous pouvez utiliser vos propres images de portefeuille. J'adorerais voir ça. C' est un gros exercice que je connais, mais si vous êtes comme plupart des gens que vous avez évité de faire votre portfolio, cela pourrait être le moment idéal, et j'aimerais le voir examiner si vous demandez des conseils, je vais vous donner un peu ce sera constructif je promets. Bon oui, passons à la prochaine vidéo.