Votre première page Web HTML et CSS - Dreamweaver

1. Introduction - Codage pour les concepteurs: Bonjour, je m'appelle Dan, et vous mon ami créatif allez coder votre tout premier site web. Maintenant, nous allons faire ça court, nous allons le rendre super facile, et vous devez penser à tout l'argent supplémentaire que vous allez gagner avec vos nouvelles compétences de codage de conception web folle. J' ai construit ce cours pour les concepteurs qui savent comment concevoir un site, mais qui a peur quand il s'agit du côté code des choses. Pas plus. Ce cours va vous permettre de faire ce que je fais. Vous pourrez concevoir quelque chose dans Photoshop ou Illustrator, puis le donner vie à un site Web à l'aide de Dreamweaver. Il ne s'agit pas d'apprendre à pirater la matrice, mais de s'assurer que vos idées sont honorées avec précision quand il s'agit du site Web fini. En utilisant les bonnes couleurs, la bonne quantité d'espacement des lignes, le poids parfait de la police, et en veillant simplement à ce que tout soit parfaitement aligné. Nous allons créer ce site Web de portefeuille ici ensemble, et nous le prendrons de la maquette, jusqu' à la publication en ligne. Allez. Tu sais que tu as l'intention de faire ça depuis très longtemps. Inscrivez-vous pour le cours et vous quelqu'un de type créatif, et moi, gars chauve avec accent et lunettes, allons coder notre tout premier site web. 2. Ce que nous allons construire et ressources: Hé, là. Dans cette vidéo, nous allons regarder ce que nous allons créer sur tout le site, ainsi que toutes les ressources que j'ai à votre disposition pour vous aider avec cette série de vidéos. Voici le site web que nous allons construire. C' est un site de portefeuille pour la création, et je suis heureux que vous utilisiez exactement la même mise en page pour vous-même, il suffit de changer toutes les images CB, et le logo. Vous n'allez probablement pas utiliser la photo de moi, trouver votre propre photo de votre belle auto debout à côté d'un poteau. C' est un site vraiment facile à construire pour vous-même lorsque vous construisez un portefeuille. Maintenant, les grandes choses à noter avant de commencer à construire ceci est qu'il est réactif et cela signifie juste qu'il fond pour les écrans de tablette, écrans mobiles, et évidemment le bureau ici. Le bureau ici a un rembourrage sur les côtés et il y a un groupe d'images en bas ici de trois par trois. Ce que nous voulons faire, c'est regarder quand je le redimensionne. Je vais le redimensionner et il est réactif quand il descend à la taille, pouvez-vous voir ? En fait, il s'étire, les images s'étirent, le texte s'enroule et la navigation en haut à droite s'ajuste. Maintenant, quand il arrive à la tablette, regardez ça. Tu vois le changement là-bas ? Entre là, c'est à mon bureau un peu écrasé vers le bas, puis il passe à la tablette. Maintenant, les grands changements ici sont probablement le plus évident ici, c'est qu'il arrête d'empiler trois par trois et c'est deux par deux. Nous allons empiler sur chaque unité, mais ici. L' autre chose est d'obtenir ces menus de navigation ici. Il est empilé l'un sur l'autre dans la tablette, mais quand c'est un ordinateur de bureau, il a un peu plus de place, donc il est étalé de cette façon. Maintenant, quand je descends encore plus loin vers le mobile, je cherche ma vue mobile, vous pouvez voir le grand changement ici est la navigation. Il se transforme en ce menu hamburger ou sandwich nav, ou trois lignes stripy. J' adore ces descriptions de cette petite icône ici. Ce sera une grande chose pour nous de commencer, c'est de passer à ici. Nous allons utiliser un peu de JavaScript, et en bas ici les changements sont ces images empilent les unes sur les autres maintenant un par un. Ce que j'ai aussi fait, c'est que tu vois qu'il n'y en a que quatre ici, un, deux, trois, quatre. J' ai éteint un couple d'entre eux juste pour que ce ne soit pas vraiment long page, juste que nous puissions activer et désactiver les choses pour les différents écrans afin que vous ayez une idée de la façon dont cela fonctionne. Maintenant, c'est la dernière chose. On va construire ça ensemble. Ce que je vais faire, c'est qu'il y aura un lien sur l'écran maintenant, Bing, où vous pouvez aller voir le site en direct. Il sera toujours là en direct et ça va juste vous aider pendant que vous construisez pour aller vérifier ma version pour voir comment la vôtre comparer parce que la vôtre pourrait ne pas fonctionner comme vous le pensiez et vous pouvez aller vérifier ma version. Une autre chose que nous allons faire dans le cadre du cours est, à la fin de chaque vidéo, ce que je vais faire, c'est que je vais enregistrer les fichiers là où je suis et que si vous travaillez et que vous vous perdez un peu, et vous pouvez simplement vérifier ma version à ce moment-là que vous êtes juste pour comparer la vôtre avec la mienne, juste pour voir où vous avez pu vous tromper. C' est la version finale. Ce que nous allons construire, et comment vous travaillerez généralement, c'est votre travail à partir d'une comp Photoshop. C' est donc ce que nous allons utiliser comme référence. Nous retournerons à cette maquette Photoshop juste pour vérifier. Maintenant, si vous voulez créer votre propre maquette dans Photoshop avant de commencer à concevoir dans Dreamweaver, il est très courant de le faire. Il est vraiment difficile d'être créatif dans Dreamweaver, vous êtes vraiment juste de construire le site Web basé sur une maquette que vous avez faite quelque part et c'est traditionnellement fait dans quelque chose comme Photoshop. Si vous voulez approfondir la conception dans Photoshop, j'ai un tout autre cours pour cela, alors allez vérifier celui-ci, c'est la conception de sites Web à l'aide de Photoshop. Ce fichier ici fera partie des fichiers d'exercices téléchargés qui font partie de ce cours, donc il y aura un lien sur l'écran ici et il y aura aussi un lien quelque part sur cette page pour que vous puissiez aller télécharger les fichiers d'exercices. Il comprend toutes les images dont nous avons besoin, tous les fichiers finis, tous les fichiers de production, et ce PSD pour que vous puissiez l'ouvrir et travailler à partir de juste pour que vous puissiez travailler parfaitement avec le cours. Les autres ressources qui font partie de ce cours sont les fichiers d'exercice, qui vont être le HTML et CSS, toutes les images que nous utilisons dans ce cours, n'importe quel JavaScript que nous utilisons pour faire le menu, ces types des choses. Aussi, les fichiers de production, rappelez-vous, à la fin de chaque vidéo, je vais enregistrer mon fichier Dreamweaver avec tout le code tel qu'il se trouve juste là pour que vous puissiez le télécharger et vérifier au cas où vous vous perdiez un peu. L' autre chose que vous pouvez faire si vous êtes enseignant ou formateur et que vous voulez transformer cela en votre propre cours, j'ai des ressources pour enseignants. Il y aura un lien dans la description ici ou il y aura un lien sur la page ici, et ce que cela fera, c'est qu'il vous mènera à une page où vous pouvez commander des classeurs et ce que vous faites est de regarder ce cours, développer vos compétences, , puis vous pouvez utiliser ce classeur pour travailler cela à travers la classe. Le truc, c'est que j'aimerais que tu publies tes projets. Vous allez l'ajuster pour votre propre truc, même si ce n'est pas fini, et juste où vous devez. J' aimerais voir un lien ou une capture d'écran d'où vous êtes. Postez-le dans les commentaires sur cette page, ce serait génial. autre chose est qu'une fois que vous arrivez à un point, vous regardez ce cours et vous pensez, « C'est un très bon parcours », ou « C'est un parcours très terrible  », je veux que vous sautiez et me donniez un avis. commentaires à n'importe quel stade sont vraiment utiles pour moi pour développer mon cours et sur beaucoup de plateformes, c'est la façon dont je me classe bien et je me formé et j'aimerais un commentaire parce que plus ce cours fait, plus j'ai d'étudiants obtenir et mieux je suis payé pour mes efforts. Alors saute, donne-moi un avis quand tu seras prêt. La dernière chose que j'ai faite est de créer une feuille de triche pour toi. Il y a un PDF que vous pouvez télécharger et imprimer, et coller à côté de votre ordinateur avec tous les trucs et astuces pratiques pendant que vous construisez un site Web dans Dreamweaver. Il y a aussi une version vidéo de cette feuille de triche vers la fin de ce cours, ou il y aura un lien sur la page ici. C' est ce qu'on va faire. Ce sont là les ressources disponibles. Allons, beau designer, et construisons votre tout premier site Web en utilisant du code effrayant. 3. Notre première page Web HTML et CSS: Hé là, dans cette page, nous allons créer notre premier bit de HTML et CSS. Nous allons faire du codage, mais ne vous inquiétez pas, ce sera un codage assez facile. Allons-y. J'ai ouvert Dreamweaver, première chose que nous devons faire est de créer quelque chose appelé un site, alors allez sur le site en haut ici, et allez sur un nouveau site, donnez un nom à votre site, vous pouvez l'appeler comme vous voulez. Je vais appeler celui-ci le portfolio de Dan, et ici, c' est le peu important, le dossier local du site et tout cela fait, c'est dire à Dreamweaver que vous allez garder votre site Web sur votre ordinateur. Maintenant, vous devez garder tous vos fichiers dans ce dossier. Vous ne pouvez pas les avoir répartis partout comme vous pouvez le faire en tant que graphiste, vous devez tous les avoir sur votre ordinateur portable. Créons un nouveau dossier, alors cliquez sur ce petit bouton de navigation. Je vais mettre le mien sur mon bureau pour cette affaire, et je fais un nouveau dossier, je vais l'appeler dans-portfolio. Vous pouvez voir la convention de nommage ici, n'utilisez pas d'espaces, essayez d'utiliser des traits de soulignement et parce que vous allez maintenant être un codeur hardcore, vous devez utiliser des minuscules au lieu de majuscules ou de majuscules, juste parce que, pas de raison réelle. cliquez sur « Créer », appuyez sur « Choisir ». Une dernière chose que nous ferons avant de partir est, juste pour nous faciliter la vie, aller dans les paramètres avancés et aller dans le dossier d'image par défaut, cliquez sur celui-ci, et cliquez sur « Nouveau dossier », et tapez des images et cliquez sur « Créer ». Ce qu'il est fait, c'est juste fait, cliquez sur « Choisir », je vais vous montrer mon bureau. Vous pouvez voir ici est mon dossier que j'ai fait et à l'intérieur il y a mon dossier d'images, et ce dossier d'images ici sous avancé va juste nous aider quand nous collectons des images de toutes sortes d'endroits. Il s'assurera que Dreamweaver les récupère et les place dans ce dossier de site local. Rappelez-vous tout sur cette page, y compris notre texte ou nos fichiers, toutes les images et vidéos doivent tous aller dans ce dossier sur mon bureau appelé dans-portfolio. Cliquez sur « Enregistrer ». Tout d'abord, nous allons créer une page HTML 5. Maintenant, le vôtre peut sembler un peu différent, vous pouvez être sur des fichiers récents, ou des fichiers CC, assurez-vous juste que vous êtes au démarrage rapide. Cliquez sur « HTML 5 document ». Pendant ce cours, ce que nous allons faire est, il y a quelques options. Il y a standard, et développeur, il y a live et split dans toutes ces sortes de choses. Nous allons être en mode développeur. Je sais que nous ne sommes pas des développeurs, nous sommes des designers, mais nous allons apprendre à coder, nous pourrions aussi bien l'utiliser avec les meilleurs outils que nous pouvons et ce mode développeur a les meilleurs outils et il est aussi vraiment léger et vraiment rapide, alors que la vue standard peut être un peu lent et je trouve cela un peu difficile à utiliser, alors assurez-vous de passer au développeur. Le vôtre peut sembler légèrement différent, le vôtre est probablement sur les fichiers ici donc je vais changer le mien là-bas. La première chose que nous devrions faire est de sauvegarder notre page. Alors, allons à Fichier, allons à Enregistrer. Maintenant, pour notre première page, nous devons l'appeler index.html, et cela est vrai pour chaque site Web, vous avez besoin d'au moins une page appelée index.html comme exactement comme ça, et ce sera votre page d'accueil, et vous ne pouvez pas l'appeler autre chose que pour cette page, toutes les pages précédentes, disons sur la page du portefeuille ou tout autre service ou nous contacter, ils peuvent être appelés tout ce que nous voulons, mais la page d'accueil doit être appelée index.html. Où va-t-il le mettre ? Il va le mettre à l'intérieur de dans-portfolio, je vais juste le rendre un peu plus grand, et je vais cliquer sur « Enregistrer ». La prochaine chose que nous devrions faire quand nous faisons de nouvelles pages ajouter un titre de page, au moment où il est appelé document sans titre, et cela signifie juste que si je prévisualise dans le navigateur, regardez ceci, allons dans le fichier, passons à l'aperçu en temps réel et cliquez sur « Chrome ». Il va s'ouvrir dans un navigateur, et pouvez-vous voir le titre en haut est ici dit «  document sans titre » ce petit titre de page là et qui apparaît sur toutes les pages et qui apparaît à la fois ici dans ce petit onglet et lorsque des utilisateurs font un signet sur votre page, mais aussi lorsque Google effectue une recherche. Si je fais une recherche Google, disons les tutoriels Dreamweaver. Voyez ces petits, ceux en haut ici, ces morceaux bleus, c'est là que la page finit totalement. Si vous avez un document sans titre, c'est ce qui sera en bleu et Google, et vous ne serez jamais classé. C' est vraiment important lorsque vous faites pages pour entrer dans le titre de votre page, alors faisons-le maintenant. Ici, dans le document sans titre Dreamweaver, celui-ci s'appellera Daniel Scotts Design Portfolio. La prochaine chose que nous allons faire, c'est que nous allons ajouter notre premier bit de code. Allons frapper « Safe ». Pour mettre quoi que ce soit sur votre page, vous devez le mettre entre ces deux balises appelées body. Il y a une ouverture et une fermeture, vous pouvez voir la fermeture ici a la barre oblique avant en face de lui. Si je mets quelques retours ici, donc tout ce qui apparaît ici, va apparaître sur ma page, tout ce qui apparaît en haut ici, dans cette tête, est des trucs gentils en arrière-plan, comme, ce titre de page ici est une sorte de choses que le navigateur utilise pour des choses bizarres. En ce qui concerne le corps ici, c'est là que nous allons mettre notre code. Maintenant, nous allons mettre dans notre premier bit de code HTML. Es-tu prêt ? Prêt à devenir un codeur ? La première chose que nous allons faire est que nous allons mettre un crochet d'angle, et que nous allions taper h1, donc h1 est considéré comme le titre le plus important de votre page. Pour fermer le titre, nous devons mettre dans un angle serré parenthèses. C' est l'ouverture de la tête et ensuite nous allons mettre dans « Hello world ». Vous devez écrire bonjour monde pour votre tout premier bit de codage juste parce que c'est la ligne de passage pour tout le monde. Si vous êtes un codeur et que vous allez à l'école de codage, c'est la première chose que vous allez aller et produire, c'est quelque chose qu'il va faire une page qui a bonjour monde dessus. Bienvenue, alors faisons en sorte que ça marche pour nous. Nous avons h1, l'ouverture, puis nous avons Hello World, maintenant pour le fermer, nous devons mettre un crochet d'angle, puis une barre oblique avant. Dreamweaver est assez intelligent et finit pour nous, mais vous pouvez voir ici il y a l'open, sur mon h1, et voici ma clôture. La seule différence, c'est que c'est la même chose sauf qu'il a une barre oblique avant donc il s'enroule autour de ce mot, et ça va aller, donc nous l'avons fait, mais nous devons le voir. Nous allons utiliser notre aperçu du navigateur en temps réel. Maintenant, vous pouvez aller au fichier ou il ya un moyen plus rapide en bas à droite ici, sélectionnez aperçu, Je vais cliquer sur « Google Chrome », et là mes amis, nous avons bonjour monde dans une belle grande rubrique. Vous, mon ami, êtes maintenant un codeur. Tant que les gens veulent un site Web qui ne contient que des en-têtes. Mais nous l'avons fait, nous avons un h1 et il y a des textes là-dedans, c'est sur une page, nous avons même codé notre titre le long de ce titre de page IPRL. Revenons et faisons un peu plus de codage. Ici, dans Dreamweaver, nous avons créé notre premier bit de HTML. La prochaine chose que nous devons faire est de créer quelque chose appelé CSS. Maintenant HTML sont des choses comme les mots et les images qui vont sur la page ils sont assez physiques et ils apparaissent sur la page, le CSS est ce que nous les stylisons avec parce que c'est ce nous voulons faire maintenant est ce titre est grand, audacieux dans Times New Roman et noir. Ce que nous voulons faire, c'est aller et commencer à le coiffer, et nous le ferons dans notre CSS. Es-tu prêt ? Allons fichier, passons à nouveau, passons à CSS, cliquez sur « Créer », et c'est une feuille CSS. Ce n'est pas particulièrement excitant, n'est-ce pas ? un peu de textes là-dedans, alors sauvegardons-le. Fichier, allons enregistrer, vous pouvez appeler cela tout ce que vous voulez, mais il est vraiment courant de l'appeler styles.css. Maintenant, la prochaine chose est que nous devons lier les deux parce que ce sont deux fichiers séparés pour le moment, ils sont toujours dans le même dossier, mais ils ne sont pas connectés, alors fermons les styles ici et nous devons connectez-les. Vous le faites en le liant dans cette tête et notre corps est tout ce qui apparaît dans la page et la tête est tout ce qui est en arrière-plan qui fait ce truc derrière la scène, et c'est ce que nous allons faire ici. Nous allons mettre un retour après, nous allons mettre un autre lien vers notre CSS. Maintenant, c'est en fait assez long mais de code, donc il y a beaucoup de trucs que Dreamweaver a pour rendre les choses un peu plus faciles pour nous, et c'est la raison pour laquelle les gens comme moi, viennent d'un fond de design, peut réellement faire le développement web frontal est à cause de toutes ces choses utiles que Dreamweaver nous permet de faire. Faisons-le, tapons le mot lien et ce que vous voulez faire est que vous voulez appuyer sur Tab not return, return ne fait rien. Nous avons juste ce mot bizarre appelé lien, mais si nous avons lien et appuyez sur Tab dans notre clavier, regardez ce qui se passe. Hey, magie, il met des liens vers une feuille de style et a cette chose href ici et si nous commençons à taper, s, pouvez-vous voir Dreamweaver est encore plus utile, ok, et vous pouvez voir le styles.css. Il a regardé dans mon dossier et dit, « Vous voulez probablement dire ce Dan », et je dis oui, et j'ai juste appuyé sur retour sur mon clavier et il le pose là dedans. Ils sont maintenant connectés, si j'appuie sur Enregistrer, Enregistrer fichier, vous pouvez voir cette petite barre de document apparaît en haut ici, donc le code source fait référence au HTML que je regarde, tout ce monde bonjour. Ici, les styles, ok, c'est quand je passe au style, et ils sont connectés maintenant, donc ce que je peux faire, c'est que je peux styler ce h1 dans mon styles.css. Va ici. Que pouvons-nous styler ? Nous pouvons styliser les charges. Mais passons aux bases faites. Tapons h1, et CSS a sa propre syntaxe, ce n'est pas particulièrement difficile, CSS est le plus facile de tous les bits de codage que vous allez faire, donc c'est h1 pour référencer la chose dans notre HTML et ensuite nous mettons dans une accolade bouclée, puis un proto de retour, et pouvez-vous le voir automatiquement mettre dans une accolade bouclée en haut ici et en bas. Notre style a juste besoin d'aller n'importe où entre eux. Ne les supprimez pas, ou, le haut, tout ici. Maintenant commençons à taper. Faisons la couleur de la police, donc il suffit de taper col et vous pouvez voir Dreamweaver est très utile et essaie de le pré-remplir avec des propriétés CSS potentielles et dans ce cas, la couleur est en haut, c'est vraiment commun. Si vous utilisez le mot couleur, il fait référence à la couleur de la police, et vous voyez que je n'ai pas tout tapé, je viens de cliquer sur « Retour » et il l'a rempli. Faisons-le encore, donc vous tapez col et ensuite je peux utiliser mes touches pour aller de haut en bas, j'appuie sur retour dans mon clavier et il le remplit avec la bonne syntaxe. Vous pouvez voir que le point-virgule doit y aller. La prochaine chose que vous devez faire est, si je connais le nombre hexadécimal, je pourrais aller à Photoshop et le prendre, ou je pourrais juste utiliser le sélecteur de couleurs ici. Vous pouvez faire glisser ce tour et les curseurs de teinte et relier une grille, appuyez sur Entrée. La grande chose à retenir lorsque vous faites une propriété CSS est que pour la terminer, pour dire à Dreamweaver, vous avez terminé, est de mettre un point-virgule. C'est un peu de syntaxe. Les accolades sont un voisin du côlon qui a automatiquement obtenu, mettre là, et le point-virgule à la fin ici. C' est celui que vous devez toujours faire, et quand vous apprendrez, c'est celui que vous oublierez, et les choses ne fonctionneront pas, vérifiez que vous avez un point-virgule là-dedans. Ce code là est #FF0000 est le code pour le rouge. Maintenant, allons vérifier notre navigateur et ce que je vais faire avant de partir, il est que je vais faire sauver. J' utilise celui-ci pour sauver tout, tout le temps. Je vais le faire tout au long du cours, alors enregistrez tout, donc il enregistre mon HTML et mes CSS. Allons chercher le navigateur. Es-tu prêt ? Je suis prêt. C' est un h1, mais c'est rouge, regardez-nous faire du web design. Retournons dans Dreamweaver. Que pouvons-nous faire d'autre ? Amusant. Faisons la police. Vous pouvez voir qu'il y a beaucoup de polices, faisons la famille de polices. J' appuie sur ma touche fléchée, appuie sur retour et en voici quelques basiques, je vais choisir Gill Sans. Souviens-toi à la fin de ce truc, on va mettre un point-virgule. Maintenant, nous allons frapper Save et ensuite nous allons sauter à mon navigateur, nous avons un grand monde géant rouge bonjour. Disons que nous n'aimons pas la taille, donc polit-s et vous pouvez voir la taille et je vais mettre, mettons-le dans vraiment grand, donc un 160 pixels, rappelle-toi de finir par un point-virgule sauve, saute, géant « Hello World ». Ici, c'est probablement un peu grand. Allons jusqu'à peut-être 60 pixels, enregistrez-le. Regardons l'une des choses, la police blanche, parce que par défaut c'est que la grande police en gras blanc est utilisée, disons que cette police blanche, et 100 est vraiment mince et considéré, 400 est un régulier, 600 est environ un semi-gras et 800 est noir. Vous aimez les grandes polices épaisses, donc je vais en faire 100, rappelez-vous le point-virgule de fin, sauvegardez, sautez. Ça commence à avoir l'air sympa. Gill Sans est une de ces polices bizarres où je l'aime vraiment petite, mais je déteste en gras, je ne sais pas pourquoi. La haine est un mot fort. Bref, revenons à Dreamweaver et que mon ami est essentiellement ce que nous allons faire pour construire un site web. Vous mettez des choses dans votre HTML ici, dans ce cas, c'est un h1, mais il pourrait s'agir d'une image ou d'un lien, puis vous sautez à votre styles.css, vous le référencez par son nom, puis vous lui donnez quelques propriétés, et il y a beaucoup de propriétés différentes, mais ce n'est pas si difficile. Les gens pensent que coder un site Web est super difficile et cela peut l'être une fois que vous entrez dans les sites Java dynamiques vraiment grands et hardcore. Mais en termes de conception web front-end et ce que vous êtes censé faire, vous devrez en savoir beaucoup sur la façon de mettre des choses en HTML, puis comment le styliser en CSS et pas beaucoup plus, alors n'ayez pas peur. Ce sera tout pour cette vidéo, nous avons expliqué comment démarrer un site, définir un site local, puis nous avons créé notre première page HTML. Nous avons mis un h1 Et là, nous avons créé notre feuille de style, nous l'avons stylée, nous avons fait du design web. Ce sera le cas pour cette vidéo, passons dans la prochaine et ce que nous allons faire dans la prochaine, c'est que nous allons commencer à regarder quelque chose appelé les requêtes des médias, et cela nous aide juste à apprendre sur la réactivité. 4. Rendre votre site réactif: Hé, bienvenue dans cette vidéo. Dans celui-ci, nous allons apprendre ce qu' est le web design responsive et comment le faire en utilisant quelque chose appelé une requête média. Ce que nous aimerions faire est, quand l'écran s'ajuste à différentes tailles, je vais juste faire glisser ceci comme un exemple, mais ce que nous essayons de faire est de l'obtenir de sorte que quand il regarde sur la tablette, il ressemble à quelque chose, et quand c'est un mobile, il a l'air différent, et lorsqu'il est sur un bureau, tout semble différent, et c'est réactif. Il répondait à la taille de l'écran. C' est ce que nous allons faire dans cette vidéo. Alors, allons sauter dans le Dreamweaver. Dans notre dernière vidéo, nous venons de mettre un vrai h1 de base dans le HTML, puis nous le stylisons dans notre CSS. Maintenant, quand vous regardez la réactivité, ce que nous allons faire est que nous allons faire quelque chose appelé Desktop-first chez CSS. Maintenant, beaucoup de gens font d'abord le mobile, donc ils vont commencer à coiffer leurs écrans mobiles abord parce que c'est l'écran le plus difficile à concevoir parce qu'il est si petit. Ce que nous faisons dans ce cours, et je trouve ce que la plupart des gens commencent par et ce que je commence par, c'est que je commence par la conception de mon bureau, puis je le réduit pour mon mobile. C' est donc à vous de décider si vous commencez à concevoir votre mobile d'abord ou votre bureau. Sachez simplement qu'il est facile d'aller et de faire mobile d'abord, les gens aiment faire mobile d'abord. Moi, j'ai un peu piqué le bateau en faisant le bureau d'abord. Mais ne vous inquiétez pas, cela ne fait aucune différence pour votre site et comment il fonctionne sur mobile ou tablette. Donc ce qu'on va faire, c'est le bureau d'abord. Cela signifie juste que ce h1 va être bureau. Juste pour faciliter les choses, ce que nous allons dire, c'est que nous allons mettre un commentaire. Les commentaires sont celui-ci ici, et ce gars ici avec une barre oblique, puis l' astérisque, qui commente en CSS. Vous pouvez en voir un là-haut. Cela signifie juste que tout ce que je mets ici est juste pour les gens, il est ignoré par le navigateur. Donc, vous pouvez écrire n'importe quoi ici juste pour vous aider pour finalement corriger quelque chose et vous voulez laisser une note à vous-même, vous le faites entre parenthèses ici ou dans ce petit extrait de code ici. Ce que je veux faire, c'est que ce sera mon Desktop View. Ensuite, ce que je veux faire, c'est que je vais copier et coller ça. Je suis en bas. Maintenant conserve que tout ce qui est dans le code. Cela va être ma vue tablette. Donc, ce que je veux faire, c'est que nous allons apprendre à changer cela en utilisant quelque chose appelé une requête média. Maintenant, pour écrire dans une requête multimédia, c'est le symbole @ puis vous tapez media, puis vous mettez entre parenthèses, puis vous tapez « max-width ». Maintenant, en termes de requêtes médiatiques, c'est la seule chose pour laquelle Dreamweaver n'est pas super utile pour le moment. C' est le seul morceau de choses que vous allez devoir écrire à peu près toute la syntaxe pour. C' est aussi dur que ça. Donc, si vous suivez le long, vous pouvez copier et coller avec les fichiers d'exercice. Vous pouvez les télécharger et jouer, et simplement les copier et les coller, ou comme moi, vous pouvez l'écrire. On va choisir une taille de tablette maintenant. Maintenant, une largeur maximale, cela signifie juste que nous essayons de dire quelle taille devrait changer ce site Web et quelle taille est la taille de la tablette. Maintenant, le plus commun pour le moment est à 768 pixels. Maintenant, cela va s'ajuster au fil du temps, et certaines personnes utilisent quelques légèrement différents, mais c'est la taille de la tablette la plus courante pour le moment. Ensuite, je vais mettre des accolades bouclés. Il y a votre requête multimédia, et cela signifie juste que tout ce qui est à l'intérieur de ces deux accolades va maintenant être déclenché lorsque le navigateur arrive à une largeur de cela. Alors faisons ça, faisons h1 comme nous l'avons fait ci-dessus. Ce que nous allons dire, c'est, n'oubliez pas vos accolades à h1, crochets bouclés reviennent, et ce que nous allons faire c'est que nous allons forcer la couleur à changer. Donc, nous allons utiliser la couleur comme nous l'avons fait ci-dessus. Je vais utiliser le sélecteur de couleurs, et je choisirai le vert. N' oubliez pas le point-virgule à la fin. Mettons juste un peu d'espacement là-dedans pour que ça paraisse un peu plus agréable. Cela signifie simplement que la vue du bureau, ce sera cette couleur, mais alors, si le navigateur se trouve être une largeur de ceci ou moins, il va le changer à la couleur de l'écran. Allons le tester une fois qu'il sera sauvé. Passons à notre navigateur. Ici, c'est. Donc, en vue du bureau, c'est rouge. Mais bon, regardez ça, donc à la largeur de 768, ça va changer de couleur et ça, mes amis, c'est comment le design web réactif est fait. Pas si dur. Les gens sont un peu effrayés par ça, et ça veut juste dire que, à cette taille, faire une autre chose. Il peut être, comme dans notre cas, nous allons empiler sur des navigations légèrement différentes. Ok, donc on va empiler ces gars là, et les mettre là. Ces boîtes en bas ici, au lieu de les empiler trois par trois sur le bureau, il va être deux par deux sur tablette. Joli. Allons-y et faisons-le pour mobile aussi. Parce que nous allons utiliser tout cela à nouveau, agréable et facile, passons à la vue mobile et une largeur maximale pour mobile. Les téléphones mobiles ne cessent de changer. Ils continuent à libérer de nouveaux modèles d'iPhone. Donc 400 semble être vraiment de bonne taille. Je trouve que c'est vraiment utile. Il lie dans certains des plus grands téléphones, les phablety ceux, et aussi vrai traditionnel. Quelle est la taille des iPhones au maximum ? Je pense que le 375 ou quelque chose comme ça. Donc, je le fais juste un peu plus grand pour couvrir dans certains des gros LG, téléphones Samsung. Fais 400, ce sera marrant. Ce que nous voulons faire, c'est que nous voulons changer la couleur. Donc je vais supprimer tout ça. Si je tape un point-virgule, il devrait me donner mon petit sélecteur à nouveau. Super. Je choisirai le rose, le magenta ou le violet, quelle que soit cette couleur. Souviens-toi à la fin, point-virgule, ne l'oublie pas. Sauvez-le. Sautons sur notre navigateur. Navigateur Chrome. Celle-ci ici. Alors, le bureau rouge, êtes-vous prêt ? Tablette, verte. On y va. Mobile, c'est une couleur pourpre, mauvaise. Je vais contester cette couleur. C'est la conception web réactive. Donc ici, mon CSS, vous pouvez voir la bonne chose à ce sujet. Mon HTML est super propre et clair. Il y a très peu sur cette page. Il n'y a qu'une nouvelle ligne que nous avons ajoutée. Mais dans nos styles, c'est assez compliqué, mais parce que tu l'as construit avec moi, en fait, je sais ce que ça fait. Ce n'est pas si dur en fait. Le codage n'est pas aussi difficile qu'il en a l'air. Donc, nous allons à h1, c'est ma vue de bureau. Tu vois ce qui s'est passé ici ? Ce flux, il s'appelle une feuille de style en cascade ou CSS. Donc, cela signifie que cette chose ici, disons la famille de polices, elle coule vers le bas, et parce que la tablette ne discute pas avec elle, et le mobile ne discute pas avec elle, il reste Gill Sans tout le long, ce soit son tablette mobile ou ordinateur de bureau. Mais la couleur, il y a un peu de combat en cours. Ce qui se passe, c'est que c'est le bureau, sauf si cette petite requête multimédia est déclenchée et faire cela. Ensuite, ça coulera vers le bas, et cette petite requête multimédia dit : « Hé, quand je descends à la taille mobile, je veux être cette couleur pinky, pourpre, mauvaise. » C' est donc une requête multimédia. Ce que nous devons faire maintenant est de changer notre h1 particulièrement boiteux et faire avec notre navigation où nous avons ce sandwich jamais et les choses ne fonctionnent pas. Alors nous allons sauter et commencer à faire ça maintenant. 5. Créer un menu hamburger de navigation: Salut là. Dans cette vidéo, nous allons chercher à faire une navigation réactive. En haut ici sur la droite, sur mon bureau, la navigation est trois boutons et une pile comme celle-ci. Mais la tablette, ok, ça descend pour être en dessous et le gros est quand c'est un mobile, ça se transforme en un menu plus grand. On va chercher à faire ça. Maintenant, ce que nous ne allons pas faire, c'est, nous n'allons pas ouvrir un fichier JavaScript, et commencer à encoder tout. Ce que nous allons faire, c'est tirer parti de beaucoup, en particulier, d'une chose spécifique qui a déjà été faite. Il y a beaucoup de gens différents qui ont fait des morceaux de code cool, petits et réutilisables que nous pouvons utiliser et simplement aller et réinstaller. Parce que même si ce serait bien de tout faire à partir de zéro, si je suis honnête, si jamais j'ai traversé et fait un sandwich de navigation par moi-même, non, je ne l'ai pas fait. D' accord. Je vais me tenir sur les épaules des géants et trouver des extraits que je peux utiliser et je les coiffe de l'enfer. Mais, j'utilise la base sous-jacente de leur travail. Maintenant, il y en a un tas de différents. Le langage à utiliser, disons que vous n'aimez pas celui que j'utilise ici, vous voulez commencer par quelque chose de différent. Je cherche comme un sandwich jQuery Nav. Si vous allez chercher ça, vous en trouverez beaucoup. J' ai trouvé celui-ci, c'est celui que j'utilise des charges. C' est vraiment simple, c'est vraiment facile. C' est vraiment facile à coiffer. J'aime ça. C' est celui-là, laisse-moi sortir ça. D' accord. C' est celui-là appelé SlickNav de Josh Cope. Dieu merci pour Josh. Il a fait un super facile, Nav sandwich que nous avons à utiliser et de style et il a obtenu assez bonne documentation. Tout d'abord, vous pouvez faire l'une des deux choses est si vous avez téléchargé les fichiers d'exercice. J' ai les morceaux dont vous avez besoin là-dedans. Mais si tu regardes la vidéo. Vous pouvez télécharger les fichiers dont vous avez besoin, le coller sur votre bureau, ou les coller quelque part et les ouvrir, peut avoir regardé là. Il y a un fichier zip, ouvrez-les et voici des morceaux de documentation et tout ce dont vous avez besoin. C' est probablement le seul peu qui est un peu difficile pour les gens qui sont flambant neufs. Si tu sais ce que tu fais, c'est génial. Mais si tu ne le fais pas, il y a beaucoup de choses ici. En fait, tout ce dont vous avez vraiment besoin, c'est que si vous ouvrez la distribution ici, vous avez besoin de cette chose et de cette chose principalement. Ces deux fichiers et un peu de texte d'ici. Allons le faire nous-mêmes. Si vous suivez avec mes fichiers, ouvrez le, « Comment coder les fichiers d'exercice » et ce que nous cherchons est que je veux que vous preniez ceci, ceci, ceci. Ces trois fichiers vont aider à le faire fonctionner. Appuyez sur « Copier » et rappelez-vous que nous allons aller sur notre bureau, ouvrir dans-portfolio. Rappelez-vous tout pour notre site tous les fichiers, images, ce morceau de code inclus doit être dans ce dossier. Je vais le pousser ici dans la racine du dossier ici. Si vous allez être vraiment gentil à ce sujet, vous devriez avoir un dossier CSS et un dossier JavaScript et mettre tout CSS dans cela et JavaScript. Nous ne le ferons pas car celui-ci allait rester super simple et juste les mettre tous dans le fond ici. Parce que ce ne sera pas des sites particulièrement importants. Ça fait partie de ça, on a ce slicknav et on a ce truc ici. Ce peu de jQuery que Josh a écrit et c'est la bibliothèque à laquelle il se réfère. Vous en avez besoin pour que ça marche. Allons chercher le code dont nous avons besoin pour le faire fonctionner. Si vous allez sur le site sliknav.com, il est ici. Je l'ai également enregistré sur et dans le fichier d'exercice, alors vérifions-le. Fichiers d'exercice, bureau, code. Il y a celui-là appelé code de navigation. Si on ouvre ça, il y a ça et ça. On va prendre ça, mais d'abord, copiez-le et on va le mettre dans Dreamweaver. On va remplacer « bonjour monde ». C' était génial. On a adoré ça. C' était utile, mais pas un site web entier. On va placer ça dans et juste pour être jolie, on va le taper une fois. C' est à l'intérieur. Utilisez ces onglets pour montrer qui est à l'intérieur de quoi. Sauvegardons ça. Cela ne fonctionne pas encore, ne vous laissez pas trop emporter ou trop bouleversé quand ça ne marche pas. Empêchons un navigateur, nous allons juste voir ce que nous avons ici. Voici mon site ici. C' est tout ce qu'il est, certains de ces éléments et vous pouvez voir si je change ces éléments de liste. Maintenant, si je change ça en portfolio, appuyez sur « Enregistrer » ici, vous pouvez voir que c'est ce que nous faisons. D' accord. Donc ça va être sur la navigation. C' est la première partie est que nous avons copié ce morceau de code dans. Le prochain bit de code à coller, est ce truc ici. Ce peu de JavaScript ici, nous allons le copier et nous allons le mettre et où est-ce que ça va ? Ça va juste avant la fermeture du corps, d'accord ? Tout JavaScript descend en bas ici. Tu sais ce qu'est JavaScript ? Eh bien, vous ne savez pas ce qu'est JavaScript. Mais généralement s'il y a une balise appelée script, ils signifient JavaScript et il descend toujours en bas ici et vous venez de le pousser vers le bas ne le supprimez pas. Tu restes là, ça ferme mon étiquette. retours ne signifient rien dans le code mais les gardent simplement séparés. Ce que nous allons trouver, c'est que rien ne fonctionne encore. Laisse sauter et jeter un coup d'oeil. Rien ne marche encore. C' est une partie des choses que nous avons collées, nous l'avons collé. La prochaine chose que nous devons faire est de lier ces fichiers. D' accord. Nous les copions dans notre disque dur. Le CSS et le JavaScript, nous n'avons pas lié à eux. Faisons ça. Tout d'abord, nous allons lier au CSS que Josh a fait. Lien puis onglet. Alors si je commence à utiliser, comment s'appelait-il ? SlickNav là il est là CSS. D' accord. Super. C'est une partie et ensuite je dois lier à ces deux fichiers JavaScript et nous allons le faire ici. Rappelez-vous JavaScript, il descend en bas. Nous allons aller au script et dans ce cas, nous allons aller à source et nous allons y aller, voilà. Joli. Merci Dreamweaver. Il y en a deux. Je devais le faire d'abord et je vais fermer ça. Ensuite, nous devons mettre dans la clôture pour cela là-bas. D' accord. Nous avons notre source de script pour ce jQuery pour slicknav.js et maintenant nous devons faire la même chose car j'allais copier et coller cela. Colle-le là. Assurez-vous que les onglets s'alignent. Je vais faire tous ces alignements aussi bien, juste parce qu'il n'y a pas de vraie raison, mais il semble beaucoup mieux quand tout est aligné rend facile, pour une personne visuelle comme moi de voir. Ok, donc supprimons celui-ci et mettons l'autre qui était jQuery. Là, il est là. Ok, donc ces deux-là. Les deux doivent être là. Appuyez sur « Enregistrer » et maintenant allons jeter un coup d'oeil. Les doigts croisés. Ça ne marche pas. Il a l'air exactement comme avant. Je sais pourquoi. Retournons dans Dreamweaver. Lorsque vous mettez ce JavaScript en bas, assurez-vous que celui-ci ici, le jquery-1.11.3.min est en haut. Cette chose ici est la chose que Josh a créée, et elle fait référence à cette bibliothèque au-dessus. Si cette chose apparaît en premier, elle ne peut pas lire ci-dessous elle-même. Cela doit être au-dessus et cela lié en dessous. Donc ça devrait fonctionner maintenant. Faisons un saut, nous allons sauter et avoir. Ça ne marche pas, ça ne ressemble pas à ça, mais c'est le genre de gros os ici. Donc, l'installation de SlickNav, c'est si vous entendez, vous avez gagné. On va aller dans le style, évidemment, pour que ça ressemble à ce qu'on veut. Si vous voulez commencer par quelque chose de différent, si vous jetez un oeil à SlickNav, il y a beaucoup de façons différentes de le faire démarrer. Nous avons commencé avec cette démo de base que vous voyez ici. Mais il y a des façons d'utiliser, nous avons juste utilisé le code de base et vous pouvez voir ici il y a une belle rebondissante avec toutes sortes d'autres listes déroulantes, donc si vous voulez aller un peu plus hardcore ce K commence avec ce HTML et ce JavaScript plutôt que celui que je vous ai donné. Passons à travers et regardons un peu. Alors que c'est que nous avons ? Donc, il fait menu déroulant et ces choses disent maintenant, ce que nous devons faire ensuite est que nous voulons voir la navigation seulement quand il est en bas à la vue mobile et cette chose ici nous voulons voir une tablette et un bureau comme je vais vous montrer ici . Donc c'est cette ligne de style, ce gars ici, et on le voit ici bureau, on le voit ici tablette, et on ne le voit pas à la navigation. Ce qui se passe, c'est qu'on ne voit que ce [inaudible], qui est ce gars. Nous allons supprimer le menu de mots, mais nous ne voyons que cela et mobile, et nous voyons cela une tablette et un bureau. Alors allons-y et faites ça avec ALCI dit. Ce que nous devons faire, c'est que nous devons jouer avec la façon dont les requêtes des médias. Jetons un coup d'oeil, tout d'abord, regardons le SlickNav maintenant, j'ai regardé ça pour vous et c'est, plutôt de bonnes instructions, mais c'est vraiment, pour quelqu'un qui sait vraiment ce qu'il fait, Bien pour moi, mais si votre tout nouveau, et que vous êtes graphiste, ça doit être un peu dur. Mais ce qui a marché, c'est que j'ai besoin de ce gars ici, ce truc appelé Slicknav_Menu, et ce truc ici, on va le copier. Vous pouvez simplement taper le vôtre, je vais à Dreamweaver et ce que nous allons faire, c'est nous allons aller dans nos styles et nous allons dire au bureau, je voudrais ce truc appelé menu sélectif, et j'ai juste joué autour et j'ai travaillé que le menu SlickNav est le nom donné à cette boîte ici, cette petite ligne stripy. Donc, les trois, c'est des techniques les uns aux autres sont juste appelés Menu. Donc, c'est le nom de ceux-ci sont appelés menu et cela est appelé menu SlickNav. Donc menu SlickNav, ce que je voudrais faire est de mettre dans des accolades, et je voudrais faire quelque chose appelé affichage et je voudrais dire bloc Wheatley. J' aimerais en dire aucun. C'était, m'a eu quand j'ai commencé bloc se sent comme la même chose que aucun comme blocket ne soit pas ici. Mais bloc signifie l'afficher comme un gros bloc de bois, c' ça que je m'en souviens de toute façon. Donc, je veux dire quand je suis à la vue du bureau, je voudrais menu stripy ici, pour n'afficher aucun. Je ne veux pas que tu apparaisses du tout, s'il te plaît, point-virgule. Sauvegardez, allons regarder notre menu. Regardons le bon, allons-y. Donc, au bureau, il ne s'affiche pas. Pour le moment, même s'il n'affiche pas de tablette, ou c'est un mobile, on va ignorer ce type pour le moment. Mais c'est un peu de travail, c'est faire ce que nous avons dit, ne pas afficher sur le bureau et ce qui se passe est celui-ci ici coule vers le bas et parce que rien ne le contredit dans tablette ou mobile, et il ne reste pas tout le temps. Donc ce qu'on doit faire, c'est ce qu'on va faire juste pour ranger ça. Ce h1 est ici, nous utilisons ce genre de juste pour tester plus tôt, nous avons juste utilisé pour changer la couleur de mon frappe juste pour que nous comprenions ce que ces requêtes média où et comment ils fonctionnaient. Pour le moment, nous allons juste en avoir un très joli bien rangé, il y a le bureau et aussi je veux juste être une barre oblique globale de bureau. Les gens appelleront ce global, ce top et tout ce qui le remplace, sera dans notre cas, tablette et mobile. Mais global est, si quelqu'un dit le mettre dans Global, ils signifient le segment supérieur, il pourrait ne pas être Desktop, vous pourriez avoir affaire à ce qui est appelé mobile [inaudible] .Donc, il peut être Mobile au lieu de Desktop sur le dessus, mais qui s'appelle global au sommet là-bas et je me suis un peu perdu. Mais ce qu'on doit faire, c'est ici, on va copier tout ce morceau. Donc, en ce haut, ne pas afficher et modéliser cependant , je voudrais afficher, bloquer et allons-y et vérifier. En fait, je ne veux pas faire ça, n'est-ce pas ? Je veux qu'il soit souvent tablette parce que mon petit menu, en fait ma maquette et Photoshop l'a là-bas aussi bien, et il est seulement un mobile, ou je arrive ici et je le bloque. Appuyez sur « Enregistrer ». Jetons un coup d'oeil. Donc, Bureau pas là, Tablette pas là, bonjour mobile et c'est si facile, genre de. On vient de l'éteindre. La dernière chose à propos de ce morceau de menu que SlickNav a construit est que ceux-ci sont liés ensemble, quand je change, vous pouvez voir ici que je n'ai pas juste comme un portefeuille. Si je change celui-ci et que je vais me contacter ici, vous voyez que c'est lié à celui-ci ici, ils sont tous les mêmes, mais affichés deux fois, et tout ce que nous avons à faire est de décider quel affichage sera affiché. Donc nous l'avons fait pour le mobile et cela fonctionne. Donc, il est, bien que le menu plus grand, donc plus grand menu pour mobile pas pour tablette pas pour bureau, traitons avec celui-ci. Je voulais [inaudible] Bureau, Je voudrais qu'il apparaisse pour tablette, mais quand il entre dans mobile, je veux que vous partiez parce que cela va lire le menu et ce menu est appelé, menu. Donc, nous allons aller à mes styles, et ce que j'aimerais faire est quand je descends à la vue mobile, je voudrais dire menu div. Vous avez peut-être remarqué que nous avons utilisé des arrêts complets pour ces choses, pour les décrire et parfois nous ne le faisons pas, parfois nous avons des hachages. Nous suivons juste l'exemple de la personne qui a fait le SlickNav. Ceci est appelé une classe et c'est ici appelé un ID et les classes ont des périodes devant eux, des arrêts complets, et les ID ont des hachages. Comment puis-je savoir que c'est une pièce d'identité ? Quelques choses. Le moyen le plus simple était dans ses instructions. Il y a dit menu de hachage, et je peux le voir là, où l'ai-je vu ? Je peux voir qu'il a l'ID du menu. Donc ce côté du menu, j'aimerais mettre nos accolades et j'aimerais que vous fassiez quelque chose s'appelle l'affichage et celui-ci va être bloqué, non non. Je pense qu'il peut être utilisé. Donc, je ne veux pas que le menu apparaisse sur mobile. Laisse regarder en quelque sorte. Allez en prévisualiser celui-ci ici. Donc, le bureau, la tablette, le mobile et cette petite ligne s'éteint et il s'allume. Donc, au mobile tout le travail se passe. menu SlickNav est éteint, bien, s'allume et le menu s'éteint. faire tous aligner, donc c'est sûr. Donc c'est tout pour que ça se passe de vraies bases maintenant, nous allons aller et faire du style parce que ça ressemble un peu à Jane, nous voulons le faire ressembler à notre design mobile. Alors allons-y et faisons-le dans la prochaine vidéo. 6. Styliser votre menu de navigation réactif: Salut là. Dans cette vidéo, nous allons regarder le style de notre menu de blogueurs ici parce qu'en ce moment il ressemble un peu à ça. On doit le faire ressembler à ça. Il y a des polices à faire, il y a un style avec le menu des blogueurs, il y a du texte à ajouter et à supprimer, et le rendre joli. Allons le faire maintenant à Dreamweaver. Tout d'abord, nous avons besoin de ranger un peu. Nous venons de jeter cela ensemble, ce qui a été génial, mais nous devons ajouter une structure de base. Nous avons notre body tag, super, et à l'intérieur, nous avons notre menu et c'est au-dessus. Il y a du JavaScript qui se cache en bas. Ce que j'aimerais faire, c'est que nous devons mettre dans un cadre et pour commencer, c'est cette chose appelée un en-tête, donc j'ai choisi l'en-tête, fermé, je vais ouvrir les crochets d'angle et mettre la barre oblique, et vous voyez qu'il est automatiquement rempli ça, génial, donc c'est mon en-tête et tout pour votre titre va aller là-dedans. Si je regarde mon moqué, cette chose ici. Ce morceau ici va être considéré comme mon en-tête. Je pense que le logo et le nav, c'est à peu près tout ce qui va là-dedans, et peut-être le numéro de téléphone. Ça va être mon en-tête, donc à l'intérieur, il y a ce gars. C' est une de ma navigation donc il va dans l'en-tête. C' est juste vraiment bon. C' est vraiment commun de le faire. Il y a quelques avantages mais c'est principalement juste vraiment bon HTML5. La syntaxe, elle a traversé. Super, donc nous avons un en-tête puis tout le reste au milieu de votre contenu principal est appelé main. Fermez-le, crochets d'angle, et barre oblique avant et ce sera tout ce qui se trouve dans ce site, c' est-à-dire que ça va être à peu près tout le site, donc ce sera cette boîte de héros ici et ces six. Maintenant, nous n'avions pas de pied de page et ce design, purement pour accélérer ce tutoriel, mais vous auriez un pied de page ici aussi. Tout irait en pied de page et c' est souvent la structure de base de la plupart des sites. On n'aura pas de pied de page, alors on va l'abandonner. Nous allons travailler sur cet en-tête et dans mon design là-bas, il y a d'abord un logo, donc nous devons le mettre. C' est avant ma liste ou notre menu, donc je vais le mettre au-dessus. J' ai mis beaucoup de retours, certaines personnes le font, autres pas. Je vais mettre une image. Maintenant, une balise d'image est assez longue à taper, donc image et vous devez mettre SRC et il y a beaucoup de choses qui entrent dans elle, donc nous allons utiliser nos raccourcis sournois de Dreamweaver. Tapez simplement IMG, puis appuyez sur « Tab ». Salut presto. Maintenant, nous allons commencer à taper IMG pour notre dossier d'images, hey presto, beau travail chez Dreamweaver, cliquez sur « Enter », et il n'y a rien là-dedans parce que nous avons un dossier vide. Ce que nous allons faire, c'est ; nous allons cliquer sur « Parcourir » et nous allons trouver les fichiers que vous avez téléchargés, les fichiers d'exercice, si vous ne l'avez pas fait, consultez, il y a un lien quelque part ici. Dans mon fichier d'exercice, j'ai un dossier d'images et dans ce dossier d'images, j'ai que c'est notre logo d'ordinateur portable. Cliquez sur « Ouvrir ». Cool. Appuyez sur « Enregistrer ». La dernière chose que nous faisons lorsque nous ajoutons une image est que nous devons ajouter ce texte alt ou texte alternatif. C' est juste le texte qui apparaît si l'image ne se charge pas. Il est utilisé pour beaucoup de choses, les lecteurs d'écran, et aussi, Google l'utilise pour identifier ce qui est sur la page, donc il est vraiment important d'ajouter du texte alt. Celui-ci est le logo apporter votre propre ordinateur portable. Où est-il ? Jetons un coup d'oeil à notre aperçu. Maintenant, il est là, gentil, juste assis dans le coin. C' est génial. On a notre image là-dedans. Passons maintenant au style de ce menu. Tout d'abord, faisons le bouton trois, donc je vais me débarrasser de ce type. Mes différentes choses ici vont être ; portefeuille, il va y avoir à propos de moi et contactez-moi. Génial, commutation. Joli, parfait. La prochaine chose que nous allons faire est de le faire flotter vers la droite parce qu'en ce moment il est assis en dessous, nous devons le faire passer de ce côté droit. C' est assez facile, nous allons aller à notre CSS et nous l'avons fait avant. Tu te souviens de notre menu ? On le voit en bas. Rappelez-vous, ce menu est ces lignes bleues pour le moment, donc nous allons dire ici dans ma vue de bureau, je vais mettre beaucoup de retours, j'adore mes retours juste pour garder tout séparé, et je vais dire ici , « Menu racine, je voudrais que vous, accolades, flottent, et je voudrais que vous flotiez vers la droite s'il vous plaît. » Souviens-toi, point-virgule, « Enregistrer ». Jetons un coup d'oeil. Bingo. Ensuite, je veux qu'il s'empile côte à côte. Si vous regardez la version finie, je veux qu'elle s'empile l'un à côté de l'autre plutôt que la valeur par défaut ci-dessous, alors allons-y et faisons-le. Pour ce faire, ce que nous devons faire est de jeter un oeil à notre code source ici, nous avons ces éléments de liste. Un UL est une liste non ordonnée, qui est une liste de puces, et voici les alliés dans cette liste, donc c'est la liste globale et ce sont les différents attributs de cette liste, donc différents points à puces , donc c'est les éléments de la liste. Ce que je dois faire dans ce cas, c'est que je dois dire, nous allons faire ce qu'on appelle un sélecteur de composés. Nous allons dire : « Je veux trouver une liste d'articles. » Les alliés sont à l'intérieur des menus. Je veux ces gars, s'ils sont dans ce menu. J' aimerais que vous fassiez cette chose appelée display, et nous avons utilisé block et none avant, nous allons utiliser celui-ci appelé inline-block. Rappelez-vous, le blocage est ici et en ligne signifie juste qu'ils entrent dans une belle petite ligne là-bas. Hé, hé, génial. Cool. La prochaine chose que je veux faire est que j'aimerais les coiffer parce qu'ils ont l'air un peu triste, avec les soulignements bleus et des choses comme ça. Allons faire ça. Pour faire cette partie, ce que nous devons faire est un peu plus précis. Nous devons faire est de styliser ces a-tags, qui sont mes hyperliens, qui sont à l'intérieur des listes, qui sont à l'intérieur de mon menu. Allons faire ça. Un autre sélecteur de composé. Menus, alors on y va. Ces a-tags ils sont à l'intérieur des listes, ils se trouvent à l'intérieur de ce menu. J' aimerais que vous, accolades, fassiez quelques choses. Le premier est la décoration de texte. » Débarrassons-nous de ça. La décoration de texte est le soulignement. On va aller à zéro. Vous pouvez voir, vous pouvez ajouter des lignes à travers et surligner et souligner, donc nous allons passer à zéro, point-virgule, appuyez sur « Enregistrer », allez le vérifier. Hey, les soulignements sont partis. Joli. La prochaine chose est, changeons la couleur. Allons à vous les gars. Je voudrais dire, vous, et si vous tapez la couleur juste par lui-même, cela signifie la couleur de la police. Vous pouvez utiliser votre sélecteur de couleurs, mais je vais taper 4e4e4e. Juste un gris foncé. Rappelez-vous à la fin, assurez-vous qu'il y a un point-virgule, « Enregistrer ». Jetons un coup d'oeil. Super. Qu'est-ce que je pourrais faire juste pour rendre les choses un peu plus faciles pendant qu'on le coiffe ? Ouais, juste pour que vous puissiez les voir tous les deux. Super. La prochaine chose que je dois faire est de leur donner du rembourrage, donc je vais aller rembourrer, et si je vais rembourrer huit pixels, vous voyez si vous laissez huit, vous pouvez voir qu'il va faire le haut, droite, le bas et la gauche tout autour d'elle, ce qui est Super pour moi. C' est ce que je veux. Ce que je veux faire, c'est aller changer les polices. Maintenant, je pourrais certainement aller changer cette police. Je pourrais taper la famille de polices et aller le faire ici, et en choisir une. Vous pouvez voir qu'il a changé en arrière-plan. Mais je vais devoir le faire, dire que je veux choisir une police pour mon site et disons que c'est Arial ou Times New Roman ou quelque chose, je vais devoir le répéter chaque fois que je mets un texte. Ce que nous allons faire, c'est que nous allons faire quelque chose de sournois, c'est que nous allons dire « pour global » sur ordinateur de bureau. Je l'ai mis en haut parce que c'est un gros truc dans l'ensemble. On va utiliser ce truc appelé « body tag ». Maintenant, si nous regardons notre CSS HTML, corps est tout sur la page, donc ce que nous allons dire ce sont toutes les polices qui sont à l'intérieur de cette balise body, je veux que vous soyez cette police et cela signifie tout. Cette étiquette A, toutes les rubriques que nous mettons, tout va venir pour la balade. Nous pouvons le remplacer plus tard, mais je veux dire « Corps, j'aimerais que vous ayez une famille de polices de, et j'utiliserai dans l'instant Gotham, Helvetica, Arial, Sans-Serif. » Nous parlerons des polices un peu plus tard parce que ces polices de base ne sont pas très cool. Nous voulons utiliser nos propres polices, mais nous allons l'enregistrer pour la vidéo après celle-ci. Font-family, on va l'utiliser, et il y a mes petites polices en arrière-plan. Super. Vous pouvez voir ici, c'est juste beaucoup plus facile que d'essayer de l'écrire chaque fois que nous mettons un texte et nous allons juste l'ignorer pour le global global. Nous pourrions faire ici maintenant ainsi qu'avec la taille de la police. Taille de police, nous allons le faire, et je tire ces tailles de Photoshop. J' ai ma maquette et je vais juste vérifier, donc je vais faire 18 pixels. Super, c'est un peu plus grand. Charmant, dites « Sauvez ». Jetons un coup d'oeil. La prochaine chose que je pourrais faire est qu'il doit y avoir un peu de remplissage autour de ce titre ou de cette balise d'en-tête. Je pourrais tamponner cela un peu plus et l'image séparément, mais parce qu'ils sont tous à l'intérieur de cela, regardons, ils sont à l'intérieur de cette chose appelée en-tête. Je peux juste ajouter un peu de code et un CSS à cet en-tête juste pour le pad out afin que tout à l'intérieur obtienne un peu de rembourrage. Ce que je vais faire ici, c'est en bas, je vais dire, « En-tête et accolades », et je vais dire, « J'aimerais un rembourrage s'il vous plaît. » Donc, nous faisons le rembourrage, haut, et peut-être le haut est de 10 pixels. Je dis peut-être que j'ai déjà choisi ça. Il y a des siècles qui se sont écoulés et ont décidé combien grand et petit, donc vous passerez un peu plus de temps ici à retourner à votre quai Photoshop et à décider ce qui semble bien. J' ai un rembourrage, en haut à gauche, 20 pixels. Maintenant, je le fais le long chemin, je sais. Regardons ça. On le fait de cette façon, 20 pixels. Super. Ce que vous trouverez, c'est que beaucoup de gens font ça. Nous avons fait haut, bas, gauche et droite et c'est génial quand vous apprenez parce que c'est agréable et facile. Mais regarde ça, soyons malins. Si nous faisons le rembourrage, et il suppose le haut en premier, donc si je mets 10 pixels et mets un espace dans, pouvez-vous voir le peu interférer ? Il va dans le sens des aiguilles d'une montre, alors le prochain est le droit et tout le reste est 20, donc 20, 20. Il fait exactement la même chose, point-virgule à la fin. Il va juste en haut, à droite, en bas, à gauche. Jetons un coup d'oeil. Ouais, il y a un peu de rembourrage autour de lui maintenant. Charmant. La prochaine chose est que nous devons réparer notre vue tablette, alors regardez ça. On descend à la tablette et il y a juste tout pile là-dedans, donc ce que j'ai fait dans la maquette, rappelez-vous, c' est que je dois le faire et puis il descend à cette belle empilée sur le dessus, alors faisons-le ça. Ce que je veux faire est quand vous arrivez à tablette mon ami, je voudrais que vous sélectionnez le menu. On l'a fait ici. Nous sommes allés inline-block, ce qui les empile l'un à côté de l'autre. Ce qu'on fait, c'est qu'on revient à ce qu'il était. Je vais me servir de toi, viens ici. C' est juste celui qui dit bloc. Sauvez-le. Vérifions-le dans le navigateur. Toi et Boom. Super. Nous pourrions ajouter un peu de rembourrage en dessous, mais parce que nous n'avons pas encore notre police parfaite, nous ne le ferons pas encore. On le fera un peu plus tard. Cool. Une des choses que je voulais faire est que je voulais qu'il s'harmonise correctement. Je vais envoyer des textos, aligner, et je veux que ce soit correct. Quand il descend tablette, vérifions, il est aligné sur ce côté droit. Maintenant, la grande chose à changer est un grand menu, parce qu'il est ici et hé, je suis rejoint en gris et j'ai ce menu de mots vous, même si j'ai l'impression que tout le monde sait que c'est le mot pour le menu, mais j'adore que c'est a laissé les choses ici, si vous en avez besoin, c'est facile à enlever, c'est plus difficile à mettre. Débarrassez-vous tout d'abord du menu de mots. On va utiliser ça juste sur trois lignes ici, alors on va le faire. Où est ce menu de mots ? Ça m'a pris un peu de temps pour trouver aussi. Ce n'est pas dans le HTML, ce n'est pas, le CSS, n' est pas dans le Slicknav.CSS n'est pas dans le jury, c'est dans celui-ci ici appelé jquery.slicknav.js, et il y a quelques choses ici. Vous ne changerez pas beaucoup de choses ici, il y a des valeurs avec lesquelles vous pourriez jouer, mais c'est le label que je veux. Je vais juste quitter le mien, mais vous pouvez voir que je peux ajuster celui-ci si je mets mon nom, vous verrez que c'est ce gars ici. Je vais m'en débarrasser et quitter toute l'arrestation. Génial, revenons au code source, vérifions-le ici. Super, rien ici, ensuite, et on va se débarrasser de ce grand géant, une boîte grise. Ce que je vais aussi faire, c'est que je vais coller ça ici parce que je travaille sur mon Byol ici et je peux l'intégrer. Bien, je peux faire quelques ajustements, maintenant, cette grosse boîte grise ici, comment savez-vous ce que sont ces grosses boîtes grises ? Dans notre HTML, il n'y a que quelques choses dans nos styles et peu de choses. Il y a un autre CSS appelé Slicknav et ça va être ici. Ce sont les styles que Josh a faits pour commencer tous ces bits, nous devons les changer. Ils sont tous ici maintenant. Tout d'abord, juste parce que la façon dont cela a été créé, il ne semble pas vraiment aussi bon que je l'aime et les choses sur onglets dans, et il n'y a pas d'espace entre eux, une belle petite fonctionnalité dans le rêve avec, si vous faites une sélection tout le texte, et il y a une option ici qui indique Format Source Code. Cliquez dessus et dit « Appliquer la mise en forme de source  » et il suffit de ranger les choses, pouvez-vous voir ? C' est un peu plus facile pour moi de travailler où je suis, et bien, tu n'as pas à faire ça, et j'ai ça maintenant, je veux savoir ce qu'est cette barre grise, et ce que tu feras en tant que concepteur web, c'est que tu vas y aller, nous utilisons dans Chrome pour l'afficher, et l'aperçu du navigateur, et ce que vous faites est dans Chrome est que vous cliquez dessus avec le bouton droit, il y a des options pour la même chose dans Firefox et Safari, et Edge Explorer, mais utilisez Chrome, et cliquez avec le bouton droit n'importe quoi et aller à Inspecter, et ce que je vais faire est que vous voyez qu'il est mis en évidence et il m'a dit que c'est ce code div , d'accord, cliquez à nouveau, dites Inspecter c'est div.slicknav_menu grid, et ça me dit quelques choses, Et ce que je cherche c'est, c'est un peu dur parce que nous sommes dans la petite taille. Il devient un peu plus grand si vous voulez le traîner là-bas. Mais vous pouvez voir ici et vous pouvez voir qu'il y a la couleur de fond ? Si je tourne ça, je dois redescendre, oui, c'est ce gars ici. Il est, cette couleur de fond et qu'il y a slicknav.css, et cela me dit que c'est une ligne sur la ligne 64 du CSS le contrôle. Si je vais ici et que je vais à Slicknav et que je vais à la ligne, est-ce 64 ? Je pourrais mentir, pas 64, désolé 94, et faire celui-ci ici et c'est dit 94 startmenu, et vous pouvez voir là il y a la couleur grise, belle. Vous utilisez et dépensez un peu que vous aimez ce que c'est ? Qu' est-ce qui le contrôle ? Vous pouvez regarder ici et il vous indique ce qui tapisse le CSS il fait. Je vais prendre toute cette ligne et juste tourner, ça fonctionnait, la barre des boîtes grises, la couleur est partie, mais il est toujours en train de pousser ce logo vers le bas je vous pour glisser là-haut. Ce que nous pouvons faire, c'est que nous pouvons dire float à droite s'il vous plaît, épeler correctement ? Vous pouvez voir quand il tourne vers la droite, ouvre un espace pour que ce gars glisse dans, super, c'est sûr entrer là-dedans. Ensuite, on va changer ça pour les couleurs sont ici, on a cette belle, où est-ce ? Redbox, et vous remarquerez qu' il n'y a pas de coins arrondis et qu'il n'y a pas de coins arrondis sur les lignes. Je sais que c'est vraiment un détail de menu, mais je n'aime pas les trucs arrondis. Personne n'est le moment, il s'agit de bords carrés. Allons là-dedans, puis fermons Inspecter, et revenons dans notre CSS. Je ne vais pas continuer à essayer d'utiliser Inspect pour comprendre quelles classes sont utilisées. Je l'ai déjà fait, tu peux jouer avec ça. Je sais que c'est quelque chose par ici, c'est que je combine ici c'est, cette chose appelée bouton Slicknav, et il a cette chose appelée Border-rayon. Je n'ai pas besoin de tous les rayons de frontière, au revoir, sauve, tu vois, Hey, parti. Il y a prendre l'ombre qui était pour peut-être nous avions le menu de mots vous il n'y a pas besoin d'être là, décoration de tique est le sous-jacent, nous n'avons pas besoin que non plus, cette couleur de fond je veux changer celui pour mon fichier flash, maintenant il est agréable et lire, « Enregistrer ». La dernière chose que je veux faire est de me débarrasser de mon, il est difficile de dire que ces petites lignes blanches ont des coins arrondis sur le bord. C' est pour ça que je les aime tellement, et c'est ce truc ici. Vous tous les gars ici, donc slick.nav.slicknav_icon-bar, si vous avez fait, c'est sur la ligne 43. Il y a eu un laisser ne pas besoin d'un de vous gars belle, appuyez sur « Enregistrer », et l'air beaux boutons carrés, génial. La dernière chose que je dois faire, c'est que ça marche. Mais mon petit menu ici est, je me suis débarrassé de la couleur de fond, mais vous pouvez voir ces gars copier la même quand ils descendent, parce que j'ai supprimé cette couleur d'arrière-plan. Ce que nous devons faire, c'est que j'ai besoin de bloquer ces boutons un peu mieux, va faire ça, et j'ai trouvé un petit ami c'est la ligne 1, 3, 4, slicknav_nav a, et dans celui-ci ici, n' y a pas de couleur de fond, donc la coloration signifie que nous stylisons la police, et c'est une police blanche sur un fond blanc sans couleur d'arrière-plan. Nous devons ajouter une couleur de fond, la couleur de fond, ici nous allons et j'ai une couleur que je veux utiliser F1474c beau point-virgule, permet de sauver, et maintenant, aller ici pourrait obtenir hey, vous avez une couleur de fond. Maintenant, ce que je veux vraiment faire est tarte avec le rembourrage et la police et le vol stationnaire, mais nous ne allons pas nous inquiéter à ce sujet, que vous pouvez passer un peu de temps, vous venez juste dans cette même classe, jouer autour, mais vous voir le rembourrage ici et l'augmenter et nous voulons le faire, mais je vais gagner du temps quelque part. La seule chose que vous voulez faire, c'est que vous pouvez tourner, il suffit de jouer avec un vol stationnaire, mais ne le sauvez pas parce qu'imaginez que vous êtes au téléphone, il n'y a aucun moyen de planer, personne ne voit jamais ces planeurs, Ne vous embêtez pas à faire le vol stationnaire, vous ne pouvez pas si vous voulez, et fermons le retour. Lovely dire Enregistrer, et que mes amis est la façon dont nous faisons un menu réactif. Grande version, sur un bureau, mais quand il devient plus petit à la tablette, fermez et des lignes lumineuses et empilent les uns sur les autres. Je sais que les polices ne nécessitent pas encore un, et puis il descend au bureau, je suis désolé mobile, et c'est juste le grand menu. Maintenant, ceux-ci sont probablement trop petits alors votre rembourrage, vous devez vous assurer que l'une des choses à faire juste quand vous faites des trucs mobiles est que surtout Google. Google va vérifier votre site pour voir si ces boutons sont cliquables, ils ont des méthodes pour voir si ces points de contact peuvent effectivement être touchés après trop petit, comme mon père avec des doigts géants, et vous appuyez comme quatre d'entre eux à la fois. Vous devez vous assurer qu'il ya assez de rembourrage, tous les boutons sont assez grands pour que les gens puissent clairement les frapper, cadre de certains des trucs de classement que Google faire, mais le bon travail. Nous l'avons stylisé, vous pouvez le coiffer comme vous le souhaitez. Vous pouvez ajouter et supprimer, et les couleurs et les polices et les choses de style, mais un bon homme de travail, nous avons utilisé Slicknav de quelqu'un d'autre Lovely Josh pour faire beaucoup de travail acharné. C' est principalement juste le JavaScript, et oui, nous avons traversé et en avons fait notre propre équipe de haut niveau. Ensuite, ce que nous ferons, c'est que nous chercherons à prendre au sérieux notre aperçu en temps réel et à dominer sur un téléphone mobile parce que c'est un peu difficile faire ce truc de diapositives ici. Allons le faire dans la prochaine vidéo. 7. Aperçu en temps réel sur le téléphone et la tablette: Hé, bienvenue de retour, et jusqu'à maintenant ce que nous avons fait c'est que nous venons de vivre avec tout le basculement entre Dreamweaver, retour dans le navigateur et glissant les choses autour du mobile, et celui-ci fonctionne bien pour mobile, mais il n'est pas un téléphone portable. Ce n'est pas la même taille. C' est plus long que ça ne devrait l'être. Donc, ce que vous devez faire est de prévisualiser vos appareils réels, et c'est vraiment facile avec Dreamweaver. Dreamweaver a des trucs sournois pour faire ça. Donc, quand je travaille, c'est comme ça que je travaille généralement, c'est que j'ai deux écrans. Je ne peux évidemment pas pour ce tutoriel parce que vous ne pouvez voir qu'un d'entre eux. Mais ce que je vais faire, c'est que je vais m'asseoir comme un bureau là-haut. J' ai un grand écran de Mac sympa ici, et puis j'ai Dreamweaver dans cet écran et cela signifie que quand je suis en train d'éditer dans ce, cela s'ajuste. Nous voyons que cela arrive en même temps. Donc, si je fais des changements, ils s'affichent instantanément dans le navigateur, ce qui est génial. Donc, cela me donne mon bureau un toujours là, donc je n'ai pas à basculer d'avant en arrière. Maintenant, pour les appareils, disons votre tablette et votre téléphone portable, ce que vous pouvez faire, c'est, je vais vous montrer en bas ici. Je vais le faire en plein écran. Voyez cette chose ici, ce petit lecteur de code QR, code QR, et ce que vous devez faire est que vous devez sauter sur votre téléphone et utiliser votre lecteur de code QR. Alors allons-y, laisse-moi prendre mon téléphone maintenant. J' ai donc mon lecteur de code QR ici. Je vais l'ouvrir de haut en bas, au fond de Dreamweaver. Je vais aller ici, cliquer et obtenir mon lecteur de code QR à proximité. Je vais désamorcer l'angle sur mon bureau. Bon téléphone de travail, saute. Peut vous demander votre nom d'utilisateur et votre mot de passe. C' est le cas. Tu peux le voir pendant que je le dactylographie ? Tu peux tout à fait. Donc tu sais que ça commence avec T. mais je vais couper ça pour que tu ne vois pas le reste. Regardez-nous. On l'a sur notre téléphone. Cool et sympa, il suffit de prendre une photo avec un lecteur de code QR. Vous devez télécharger un lecteur de code QR, ils sont libres de l'Apple Store ou d'Android comme le mien et puis vous venez de vous asseoir à côté de vous, et je vais m'asseoir là et regarder cela, comme je fais des changements. Alors allons à notre styles.css, et que pouvons-nous voir sur mobile ? Pas beaucoup pour le moment. Laisse-moi décider, que peut-on voir ? J' ai une image ici donc je vais faire quoi avec cette image ? Je vais le rendre plus petit. Donc je vais lui donner une largeur. Ici, je vais donner à ce type une largeur de 100 pixels. Vous pouvez voir qu'il est devenu plus petit. Si je lui fais 50 pixels, il est minuscule. Vous avez l'idée, 10 pixels. Donc, cela signifie que pendant que vous travaillez et que vous êtes comme, disons que vous faites quelque chose sur la vue Bureau, vous ne réalisez pas vraiment que cela affecte quelque chose dans la tablette ou l'appareil mobile. Si vous les avez autour de vous pendant que vous travaillez, cela signifie juste que vous faites des changements que vous êtes comme « Oh, n'avez pas réalisé les ramifications de cela », probablement la meilleure raison de les avoir mis en place est que vous impressionner le diable de quelqu'un qui passe devant. Si vous travaillez à la maison, vos coéquipiers ou votre femme vous regarderont et vous aurez l'impression d'être dans Minority Report. Beaucoup d'appareils tout autour, et au travail, vous aurez l'air d'un Coda hardcore avec toutes les choses qui volent autour. C' est donc un aperçu du navigateur en temps réel, et vous pouvez le faire sur votre appareil ainsi. 8. Travailler avec la typographie sur un site Web: Bienvenue potes. Celle-ci, nous allons regarder les polices. Les polices sont super importantes pour nous les designers. Plus tôt, nous venons d'utiliser Arial et les basiques. Alors, allons-y et regardons faire une bonne police. Maintenant, vous avez quelques options pour le faire et les deux grandes sont Typekit d'Adobe ou Google Fonts. Les deux sont géniaux. Je vais utiliser Google Fonts maintenant. Pourquoi ? Parce qu'ils sont plus rapides et plus faciles et [inaudibles] Allez dans Google Fonts, alors c'est fonts.google.com, choisissez une police que vous aimez. Dans notre cas, nous allons utiliser Open Sans. Pourquoi ? C'est une bonne police. C' est le nouvel Arial. Vous trouverez, si vous ouvrez 100 sites, je parie que 90 d'entre eux sont Open Sans. Pourquoi ? Parce qu'il a vraiment de bons poids. Il y en a beaucoup d'autres, Roboto j'en utilise beaucoup, c'est la police YouTube. Il y a beaucoup de choses ici et ce qui est cool, c'est qu'ils sont libres. Alors jetez un oeil autour de vous, trouvez ceux que vous aimez et dites que vous êtes dans les pièces de design où vous êtes dans Photoshop, vous pouvez entrer dans et dire, « J'aime Open Sans. » Il y a une option de bouton ici qui indique sélectionner cette police. Existe-t-il une option de téléchargement ? Cliquez sur la police, puis vous allez, vous l'avez éditée ici à votre collection. Ensuite, il y a cette option ici qui dit téléchargement. Cela ne va rien faire pour votre site Web, mais cela signifie que vous les aurez sur votre machine. Donc, si vous les téléchargez sur votre PC ou Mac et que vous pouvez les utiliser juste dans vos maquettes Photoshop et dans InDesign et illustrer que ce sont des polices que vous pouvez utiliser, belle. Mais vous les utilisez sur votre site, c'est légèrement différent. Ils te disent quoi faire ici. Vous devez faire deux choses, vous devez le mettre dans la tête de votre document. Il vous dit quoi faire, mettre cela dans votre tête et c'est le style que nous utilisons. Alors attrape ça. Eh bien en fait, avant nous, je veux le personnaliser parce que je veux l'utiliser dans mon design, j'ai utilisé léger, régulier et audacieux. Ce que vous remarquerez, c'est le temps de chargement, plus vous incluez de polices, le chargement de la page est lent et c'est vraiment important pour les classements de recherche. Vous voulez que votre page se charge très rapidement. Mais je ne peux pas m'en empêcher. Je veux plus audacieux, je veux dire modéré et c'est très courant pour moi d'entrer dans la lenteur. Pourquoi ? Parce que je veux quelqu'un en italique et je veux ça et je veux ça. Je vais donc utiliser 300 light, 400 regular, et 800 pour extra bold. Revenons à Incorporer et ce que nous allons faire est de cliquer dessus, copier, aller dans Dreamweaver et maintenant code source. Dis que tu mets à l'intérieur de la tête. Donc, sachez notre en-tête, la langue est assez importante. C'est notre tête. Donc notre corps, je vais descendre. Rappelez-vous que le corps est tout sur la page, la tête est les trucs de fond. C' est tout ce que je veux et il est dit de le mettre n'importe où ici. Donc, vous êtes n'importe où là-dedans. Il dit juste qu'il va lier à Google Fonts et il va chercher ce tribunal de famille de police, Open Sans avec ces trois poids. Vous n'avez pas besoin de revenir en arrière, dire que vous voulez utiliser 600 plus tard. Vous pouvez simplement le taper correctement, mais il suffit de le taper là et vous y aurez accès. N' oubliez pas que cela va ralentir vos polices. Donc c'est la moitié de ça. Donc, il cherche cette police, vous devez maintenant l'utiliser dans votre CSS. Donc, revenons dans les polices Google. Donc dit faire cela, alors il a dit utiliser cette famille de polices de Open Sans se termine ici, copiez-le. Ce que nous allons faire est, nous l'avons fait plus tôt sous styles.css et nous avons dit dans le corps, donc tout dans le corps soit cette famille de polices de Gotham. Tous ceux-là, nous allons le faire. Donc il suffit de le changer et il dit juste utiliser Open Sans à la place. Sauvegardez-le, jetons un coup d'oeil. Regarde, c'est ma belle police. Vous pourriez dire : « Ça n'a pas l'air très différent. » Ouais, ce n'est pas très différent d'Arial mais c'est tellement mieux. Oui, c'est par défaut 400 pour le moment. Je pourrais y aller et le changer. Vous pouvez voir ici, nous allons en bas, où est-ce que cette chose le contrôlait ? C' est là, là. C'est taper le poids de la police et je pourrais utiliser dire, 800, sauver. J' ai fait une mauvaise syntaxe là-dedans. Oh, ça a l'air bien, sauve, saute. Les choses ont l'air cassées, j'ai perdu mes polices, tout perdu. Je vais aller au dossier, sauver tout. Il y a un peu de mauvaise syntaxe, je l'ai cassé et je ne vois pas. Non, je ne l'ai pas fait, juste sauver tout. Parfois, cela se produit dans Dreamweaver, il suffit d'aller fichier, sauvegarder tout et il enregistre tous ces fichiers séparés avec lesquels vous pourriez travailler. Hé, la police géante audacieuse. Donc, je vais éteindre cela, revenir au 400 par défaut, enregistrer. Beau travail, on a une police. Pouvez-vous avoir plus d'une police ? Bien sûr, vous pouvez, mais les temps de chargement sont composés. Donc, vous allez dans Google Fonts et vous en trouverez un autre, vous devrez le mettre à nouveau dans la tête et le remettre quelque part. Vous devrez l'utiliser pour le corps ou peut-être que vous voulez l'utiliser juste pour ce menu. Donc, vous pouvez utiliser beaucoup de polices, mais rappelez-vous, cela commence à devenir un peu lent. Maintenant, pourquoi nous utilisons Typekit ? Seulement parce que cela prend un peu plus de temps et que vous avez besoin d'un abonnement payant pour le faire. Vous avez un abonnement payant à Typekit parce que vous disposez d'un cloud de crédit, parce que vous utilisez le nouveau Dreamweaver. Donc, vous pouvez totalement l'utiliser, il me faut juste quelques étapes supplémentaires pour me mettre en place. Il y a différentes polices sur elles, il y a beaucoup de mêmes polices. Alors allez jeter un oeil à Typekit par rapport à Google Fonts et trouvez la police qui va fonctionner pour votre design. 9. Créer notre hero box: Salut, bienvenue. Dans cette vidéo, nous allons regarder créer ces cases en bas ici. On va commencer par ce truc ici. Ceci est généralement appelé la boîte de héros, parfois le jumbotron. La première chose que nous devons faire est, nous devons ajouter un peu de structure à notre partie principale, quelque chose appelé lignes et colonnes. Maintenant, qu'est-ce qu'une ligne et une colonne ? C' est la structure sous-jacente de presque tous les sites réactifs et nous en avons besoin, c'est assez facile cependant. Tout comme Excel, pensez à Excel. Ce truc ici est une rangée, une colonne. Ce truc ici est une rangée, trois colonnes. C' est ce qu'on doit savoir. Ce que nous allons faire, c'est que nous allons sauter dans notre Dreamweaver et faire entrer les rangées et les colonnes. Nous allons sauter à notre code source, et nous avons notre en-tête, il y a là, et puis il y a notre principal. On va mettre des retraits entre elle et un peu d'espacement là-dedans. Je vais tabuler à travers, et ce que je veux faire est de mettre dans quelques rangées. On va utiliser ce truc appelé une balise div. Maintenant, les balises div sont des divisions de l'espace. C'est une façon facile de se souvenir d'eux. Ce que nous devons faire, c'est que nous devons créer une balise div. Nous allons créer quelque chose appelé une classe div, nous allons lui donner un nom et nous allons appeler cette ligne. Alors on va le fermer. Ensuite, nous allons fermer cette balise div par des crochets d'angle. Tout comme nous l'avons fait pour notre H1, nous le fermons avec les crochets d'angle, puis la barre oblique inverse. J'ai une rangée. A l'intérieur de cette rangée, je voudrais une colonne. Je vais y aller, exactement la même chose encore. Je vais faire un cours de div, super, je vais appeler ça un col. Fermez-le. Ouvrez la barre oblique inverse du bit de fin et il le termine, et ce sera ma colonne à l'intérieur. C' est la première. Faisons en sorte qu'on fasse les autres. Je vais te montrer des trucs cool maintenant. Au lieu d'avoir à taper la classe div égale et tout ce trié de choses, c'est assez bon avec l'aide de Code là pour le rendre plus facile. Mais ils le rendent encore plus facile en utilisant cette chose dans le code de fond ima. Tout ce qu'il fait, c'est que regarder ceci, si je mets en .row, rappelez-vous un point en face de cela signifie que c'est quelque chose qu'on appelle une classe. Si c'est un hachage devant lui, nous avons appris plus tôt, c'est un ID. On va faire un cours. Vous venez de mettre cela et de dire en retour, retour ne fait rien, appuyez sur le membre Tab à partir de plus tôt, et regardez, juste devine parce que c'est une chose si commune. Il sait que si vous le mettez dans une classe et un onglet, il suppose simplement que vous voulez une balise div. Div classe, génial, renvoyez ça et on en a un, deux, trois. Maintenant, dans ce cas, ce que nous allons faire est juste à cause de la mise en page que je veux faire. Je veux que ce soit un, deux, trois ici, donc il y a deux rangées sur trois colonnes. Mais ce que je vais faire, c'est quand ça arrive, tablette, si je les avais deux rangées séparées, ça veut dire que j'en ai une, deux, trois ici et ensuite j'en aurais un, deux, trois, et ça avait l'air assez bizarre. Ce qu'on va faire, c'est qu'on va mettre en une seule rangée. On va mettre en six colonnes. Cela signifie juste que ces effondrement gentiment. Ça veut dire que si je viens ici, toutes les techniques, chacune d'entre elles coule dans la boîte parce qu'elles font toutes partie de la même rangée et elles flotteront l'une à côté de l'autre. Vous devrez expérimenter votre design. Si vous avez quatre et quatre, vous pourriez certainement avoir deux lignes avec quatre colonnes qui fonctionneraient. Mais il a dû jouer avec elle. Je sais quand vous avez ces multiples de trois et que vous voulez qu'il le fasse. Sinon, ce gars est dans une rangée séparée et poussé vers le bas et vous avez cette rupture de vague. Ils vont tous être le même gars, croyez-moi. Combien de colonnes je veux ? Je veux deux ou trois. Ça va me prendre une éternité, pas pour toujours, je pourrais juste aller appeler et copier et coller, et devient encore plus clair cependant. Je vais juste taper l'appel et avant de frapper Tab, je vais frapper n fois, et je vais mettre en six, donc fois est juste les astérisques. Maintenant, appuyez sur Tab. Hé, allez à l'intérieur. Ce sont les astuces qui vous font obtenir rapidement lorsque vous apportez cela de concepteur web. Allons sauver, donc nous avons nos lignes, avons une ligne avec une colonne. J' ai une autre rangée avec six colonnes. Ça va être ma pile parce que je veux que ce héros entre dans celui-ci. Faisons ça. Pour créer un héros, ce que nous allons faire, c'est que je vais faire un retour ici. A l'intérieur de cette colonne, nous allons faire un autre co-héros, et nous allons frapper Tab, mais dans ce cas, donc comme nous l'avons fait pour Row and Col, celui-ci ici, nous allons en fait dans le style maintenant. Pour le moment, ce ne sont que notre structure globale que nous ne voulions pas les installer du tout. Mais ce gars ici, on va dans le style. Ce que nous allons faire, c'est d'aller à nos styles CSS. Nous allons le faire pour notre chauffage, bien global et plus de boîtes. On va dire .hero. Les cours ont une période devant elle. Pouvez-vous parenthèses, et nous allons faire quelques choses. Faisons l'image de fond. Arrière-plan - image. Son URL lorsque vous avez affaire à des images d'arrière-plan, et naviguez. Maintenant, c'est un membre qui regarde mes fichiers que j'ai téléchargés. Pour les fichiers d'exercice, vous pouvez utiliser les vôtres. C' est mon histoire de héros. Ce truc de fond, j'ai eu photoshop et je viens de tourner votre [inaudible] vers le bas afin qu'il semble délavé. Je mets des tiques sur le dessus. Super, appuyez sur Sauvegarder, et rappelez-vous la fermer à la fin, point-virgule pour terminer. Allons le vérifier dans le navigateur. Rien ne se passe. Pourquoi ? Parce qu'il est là. Mais parce qu'il n'a pas de substance, il y a une image de fond. L' image d'arrière-plan ne la maintient pas ouverte. Ce que nous devons faire, c'est lui donner une certaine hauteur. Maintenant, il est vraiment rare de lui donner de la hauteur, pourquoi ? Parce que nous voulons que le contenu à l'intérieur de celui-ci définisse la hauteur. Lorsque vous travaillez, nous ajoutons souvent un rembourrage de somme en haut et en bas juste pour faire avancer les choses. Rembourrage, il va être de 52 pixels par zéro pixels. Zéro pixels pour la droite et 72 pour le bas, et 72 pour la gauche. Appuyez sur Enregistrer, et nous avons regardé. Vous verrez maintenant, il a juste un rembourrage du haut et du bas et de la gauche, et je l'ai laissé sur la droite juste à zéro, et c'est pourquoi nous pouvons voir l'image maintenant. L' image ne fait pas ce que nous voulions qu'elle fasse. Si je développe ça, ça se répète. Vous pouvez voir la répétition là-dedans. Mais nous voulons qu'il soit réactif essentiellement. Ce que nous allons faire, c'est nous allons nous entendre et nous allons utiliser ce truc. Nous allons utiliser l'arrière-plan, et il va être de taille, et nous allons utiliser celui-ci pour la couverture. Cover est très pratique, si je clique sur Enregistrer, vérifiez. C' est celui qui s'étire, s'adapte, regarde ça. devient plus petit, il va fonctionner sur toutes les tailles. Il n'a pas l'air parfait maintenant parce que tout est écrasé, mais quand nous ajoutons du contenu, ça va être beau. Souvent, la couverture d'arrière-plan est celle que vous voulez rendre l'arrière-plan des boîtes réactif. Ensuite, nous allons mettre un texte maintenant et le styliser. Ouais, avoir à voir avec ça. Ce qu'on va faire, c'est passer à notre code source et à l'intérieur de la boîte de héros, j'en ai mis 10. Le premier a mis un texte là-dedans est cette ima, puis designer numérique. Évidemment, ne va pas changer pour ce que vous allez faire. Jouons pour en avoir l'idée. Les tiques normales du corps, nous n'avons pas chauffages avant de déplacer H1 qui sont importants et vous ne devriez vraiment avoir un frapper un H1 un par page. Tous les risques qui prennent souvent comme une balise p ou un paragraphe. On va juste utiliser une étiquette p. Qu' est-ce que c'était ? C'était ima. Je vais fermer cette balise p avec une barre oblique pré-remplie, sauvez-la. Vérifions dans le navigateur, et regardons le bon. Il y a cette petite ima. Allons installer celui-là. Maintenant, je pourrais styler la balise p. Le problème est si je style une balise p et je vais utiliser ceci et beaucoup de pages différentes. Si je fais comme si c'était mon maquillage qui est grand et audacieux, tout le monde me prend grand et audacieux. Ce qu'on va faire, c'est faire un cours spécifique pour ce type. Tout ce que vous faites entre les deux, c'est qu'on va créer une classe, et on va appeler cette classe, et on allait lui donner un nom. Je vais appeler mon sous-marin, copier ça. Maintenant, je vais aller définir cette classe, en frappant tellement de styles. Je vais dans ma vue de bureau. Je vais y aller. Maintenant, ce que les gars investissent avant un cours, c'est exact. Arrêt imbécile ou un point, et je vais le coiffer. Maintenant ce que je veux le style tel qu'il est. Tout d'abord, je veux la couleur et la couleur juste acheter des styles de la police. Maintenant, il y a très peu [inaudible] dans ce nombre dont je me souviens, et #fff est quoi ? C'est le seul que je connaisse. Police blanche, ça va être cette belle grande couleur audacieuse. Tu y vas, ça va faire 800 pixels de moins. Ce que je pourrais faire est de changer la taille de la police et je tire juste ces tailles de police de mon maquillage Photoshop. Vous pouvez jouer autour, essai et erreur. Je sais que la marge en bas ici doit être jouée avec. En fait, on peut laisser ça jusqu'à après, pour voir toutes les polices. On va laisser tomber ça, super. Vérification du navigateur. Hé, vous avez une police. Ce n'est pas grand et audacieux. Pourquoi pas ? Pixels, ce ne sont pas des pixels. C' est juste le poids 800. Merci. Mettons dedans et en dessous, et c'est ce type ici, le designer numérique. Mettons ça et ça va être le mot le plus important. Ce sera mon H1 au lieu d'une balise p. Pourquoi ? Vous avez besoin d'au moins un détester par page pour dire à Google dans les moteurs de recherche ce que cette page sur. Si j'avais le H1 comme ima, Google viendrait deux cette page et dire, « Votre site est tout au sujet de cette chose appelée ima. Mais je veux qu'il s'agisse de designer numérique. Allons ici. Retour à mon code source. En dessous, nous le mettrons en H1. Je vais le fermer. Comment je vais l'appeler ? C'est un designer numérique. Je vais le fermer avec mes crochets d'angle à l'avant. C' est mon H1. Je ne vais pas utiliser un cours parce que pourquoi ? Je vais avoir ce H1 est, chaque page va utiliser le même titre. Je vais utiliser H1. Allons décrocher ce H1 et les accolades. Vous remarquerez que nous n'avons pas mis un point devant lui ou un hachage. Il y a juste certaines choses qui sont préfabriquées comme les balises p, H1, les balises d'image, elles ne touchent pas les balises. Le pré-fabriqué en HTML, nous n'avons pas besoin d'ajouter quoi que ce soit à eux. C' est ce qu'on fait nous-mêmes. Le truc qui n'a jamais existé auparavant dans la vie a une période en face ou un hachage. Ce qu'on va faire, c'est lui donner une couleur. Souviens-toi, la seule couleur que je connais, la police blanche. Celle-là va ruiner le mince. police blanche va être 300 px dipôles, et mettons dans une taille de police. Celui-ci est un beau, grand, sain 52 pixels et enregistrez-le. Jetons un coup d'oeil dans le navigateur. Il y a quelques choses, il y a des valeurs par défaut en cours, h1s ont par défaut juste sortir de la boîte. Quelqu' un a décidé il y a longtemps qu'ils ont un très grand écart en face d'eux et, p tag a un peu d'écart en dessous. Ensemble, ils ont un leader géant. Donc, nous allons utiliser les marges sur le fond et les moins. Allons faire ça. La sous-rubrique. Ce qu'on va faire. Vous pouvez faire la marge du haut de h1, ou j'aime faire cet espace après, donc nous allons faire h1. On va refaire avec le fond. Vous allez être moins 54 pixels. Ça va jouer avec notre espacement. Voilà, tu y vas. Joli. Le prochain bit sera le code source, et nous avons le pixel de paragraphe en dessous. Maintenant, je vais le mettre ici et je vais mettre une étiquette de mon p. Maintenant, je veux mettre une nouvelle classe parce que je ne veux pas utiliser le même ici, donc ce que je vais faire, c'est utiliser mon truc. Je suis dans la page, si j'appuie sur l'onglet, ça va le mettre dedans. Mais je pourrais taper dans la classe p. [ inaudible] Pour être vraiment intelligent Dreamweaver fait cette p. rappelez-vous. de ma classe et je vais appeler celui-ci heading-body copy et appuyez sur Tab. Il a créé ma balise p et y ajouter la classe avec cette chose appelée ici heading-body copy. Ajoutons la balise p sur mon texte de paragraphe. Vérifions-le dans un navigateur. Whoop. Ça fait parfois. Parfois, vous devez retourner dans Dreamweaver et simplement appuyer sur « Save All ». De retour ici, c'est [inaudible] super. Maintenant, nous devons appliquer certains styles à cette balise p. Allons à nos styles CSS. Ici, dans mon global ou mon bureau, je vais taper la classe qu'il était en-tête, en-tête. Je ne m'en souviens pas. Juste deviner. Voyons si ça marche. En fait la couleur, rappelez-vous la couleur par elle-même est pour la police. N' oubliez pas que la fff est pour le blanc. En fait, c'est à propos de notre police. Vérifions, jette un coup d'oeil. Ce que nous pourrions faire est de jouer avec cela parce que l'espacement après cela n'est pas génial. Maintenant, vous remarquez que je n'ai pas mis de taille de police. Si vous laissez une taille de police seule, il va choisir 16 pixels par défaut. C' est une taille très commune. Essayez de ne pas aller trop petit. [ inaudible] ce sont ces pénalités de Google pour avoir des polices qui sont vraiment difficiles à lire pour les personnes handicapées. De toute façon. Ce qu'on va faire, c'est jouer avec la marge pour celle-là. Nous allons faire margin-bottom moins cinq pixels. Jetons un coup d'oeil. Oui, ça arrive à ce que je voulais. C'est [inaudible] un peu grand. Une des choses que vous pouvez voir ici est que, je n'ai pas mis de rembourrage sur le côté droit ici. Pourquoi ? Parce qu'il y a quelque chose que je veux faire. C' est un peu délicat, mais ce n'est pas si dur. Est-ce que ce type est là que je veux lui mettre une marge droite. Une marge à droite. Nous allons utiliser un pourcentage au lieu d'un nombre fixe. Cela signifie juste que le pourcentage peut être beau et grand quand il est à une grande taille. Donc, si on utilise un 20 pour cent, c'est assez large quand c'est 20 pour cent d'un écran aussi large. Mais quand il devient plus petit, il commence à devenir progressivement plus petit en pourcentage également. Vous pouvez totalement utiliser réel, ils appellent une taille absolue lorsque vous utilisez des pixels, mais celui-ci est ici une taille relative. Rembourrage s'assurer que margin- droite et ça va être 20 pour cent. C' est relatif à la taille de la boîte qui est dans. Super. Je vais mettre un rembourrage ici. Vous remarquerez que c'est assez grand ici. Nous voulons réduire les tailles plus petites. Il devient progressivement plus petit, donc il n'est pas trop destructeur quand il descend. Super. C'est les polices. Regardons l'ajout de notre bouton. C' est ce type ici. Ce bouton Parlons. Vous pouvez cliquer dessus et va peut-être à notre page de contact. Allons faire ça. Maintenant, quand nous mettons un bouton, ce qui se passe vraiment, c'est que nous allons mettre du texte, nous allons mettre un peu de rembourrage autour et remplir ce rembourrage avec une couleur, et ça va ressembler à un bouton. Allons-y et faisons-ça. Dans mon code source. On va descendre ici et sous mon étiquette p, je vais mettre un lien. Maintenant, donc je veux que ce soit un lien aussi bien que je veux qu'il soit cliquable. On va commencer par une étiquette. Maintenant, nous avons regardé un tag, mais nous n'avons pas créé un des nôtres. Maintenant écrire une balise prend une éternité. C' est un href et tu mets là où tu veux qu'il aille. C'est un processus assez long. Lorsque vous faites n'importe quel lien, une balise est également appelée simplement hyperliens. A, mettez-le dans un onglet, et mettez-le dans le href et toutes les ordures là-dedans. Nous allons pouvoir [inaudible] et nous allons faire un et y ajouter une classe en même temps. On appellera ça « Parlons ». Appuyez sur l'onglet. Tu vois toutes ces belles choses faites pour nous ? Nous avons un lien hypertexte qui a déjà été appliqué à un cours appelé Let's-talk et mettons ici Let's-talk. Sauvez-le. Maintenant, nous devons aller et coiffer ce gars ici, alors sautez dans notre CSS. Mettons quelques routines et faisons et parlons, parlons-parler, accolades. Tout d'abord, mettons une couleur d'arrière-plan parce que nous pouvons commencer la couleur d'arrière-plan. Celui-ci est haché et c'est une couleur de fond de f147 est le j'ai utilisé la couleur du rouge pêche. Jetons un petit coup d'oeil. C'est là. Vous pouvez voir où on va aller d'ici. On a besoin d'un peu de rembourrage autour d'elle. Allons faire ça. Faisons le rembourrage et je vais à huit pixels. Vous voyez ici, il est par défaut à huit tout autour. En haut, en bas, à gauche et à droite, si je le laisse comme ça. Si je le mets dans une seconde, qui va être, qu'est-ce que c'est, 30 pixels. Pouvez-vous voir que c'est fait en haut et en bas à huit pixels, mais à gauche et à droite à 30 ? CSS intelligent. Vous pouvez les remplir tous. Mais nous sommes sournois à faire ce dont nous avons besoin. Super. On a un bouton. C'est cliquable. Ça ne va nulle part. Pouvez-vous voir ici ? On a ce href. Je n'ai pas vraiment mentionné le lien. Ce que vous écririez ici, c'est que vous écririez peut-être aller à la page de contact, contact-us.html. Ce sera la page. On n'a pas encore cette page. Vous cliquez dessus et venez avec une erreur. Souvent, lorsque vous travaillez au lieu de laisser un vide mis en ceci, mettez-le dans un signe de livre sterling ou une clé de hachage. Ça veut juste dire que ça marche. Mais il n'y a pas d'erreurs qui vomissent. Parce que si vous l'envoyez à un client et qu'il teste et que vous dites juste, « Hé, regardez le site Web. » Le look et la sensation, mais pas le réel. Ce n'est pas encore entièrement construit. Ils cliquent dessus, ils reviendront vers vous et vous diront. « Hé, le lien est cassé et ça ne marche pas. » Donc, vous venez de mettre un hachage juste comme un porte-place et assurez-vous que vous éteignez cela plus tard. Super. La prochaine chose que nous voulons faire à nos styles,. Qu' est-ce qu'on va faire, on va te faire. Décoration de texte C'est là le soulignement. Débarrassons-nous de ça. Mettons-le à néant. Choisissons une police. Ce n'est pas la police, c'est juste la couleur par elle-même, fff. C' est du hachage. Je dois mettre cette syntaxe là-dedans. Vous pouvez mettre des majuscules ou des minuscules. C' est à vous de décider. D'y arriver. J'ai un bouton. Besoin d'un peu de rembourrage peut-être. Mais laissons ça pour le moment. Qu'est-ce que celui-là regarde ici ? Oui. On y arrive [inaudible] boîte. J'ai l'air bien. Une chose que nous ferons avant de partir, c'est qu'elle s'étend pour toujours. C' est très bien sur les tailles de MacBook Pro. C' est assez grand. Mais si vous avez un écran géant comme mon autre ici ou un iMac, vraiment grand écran, cela va s'étirer et votre propre menu va être partout là-bas et votre logo signal là-bas, et ce ne sera pas génial. Nous allons avoir des limites en termes de largeur des marques. Comme on veut qu'il soit grand. Ce qu'on va faire, c'est sauter dans notre Dreamweaver, et ce qu'on va dire, c'est que j'aimerais qu'il ne vienne pas ici. Il y a quelque chose qui s'appelle la largeur maximale. À quoi peux-tu le faire ? Vous pouvez le faire à notre corps, parce que rappelez-vous que notre corps est tout ce qui est sur la page. Je veux dire corps qui est autour de la page, je voudrais qu'il ait une largeur maximale s'il vous plaît et ne pas obtenir de gros que dire 1024 pixels. C' est la taille que j'avais conçue dans Photoshop, 1024 est une taille commune. Tu dois dire 1024 pas 1024. Si vous dites 1 024, ils sauront que vous êtes débutant et vous ne savez pas ce que vous faites. Donc 1024. Ou même plus grand que ça. Vous pouvez le faire n'importe quelle taille. Jetons un coup d'oeil. Quand il est en bas, il s'étire et fait des choses cool. Mais alors il arrive à une taille d'écran, il ne devient pas plus grand. Voir le deux-points de 1024 ou dire 1200, est un autre vraiment cool. Je vais juste en laisser un ici. L' une des choses cependant, avez-vous remarqué que par défaut, il gauche aligne. Ce que nous devons faire, c'est quand vous alignez quoi que ce soit, vous devez faire quelque chose appelé Margin-gauche auto et Margin-droite auto, alors ils l'appellent. Il fera les marges automatiques gauche et droite et il se trouve juste au milieu là. Regardez-nous. Cool. Il arrive à une taille plus gérable, et vous mon ami avez commencé à construire le contenu. Maintenant, beaucoup d'autres choses que nous allons faire, c'est juste la répétition de ça. Vous allez avoir beaucoup de tags div, mais conteneur, stylez-le, et vous allez avoir vous-même un beau petit site Web. Allons et faisons nos boîtes qui sont en dessous ici dans la prochaine vidéo. 10. Ajouter notre grille d'images: D' accord. Dans cette vidéo, ce que nous allons faire est, nous allons ajouter ces grilles en bas ici. Allons-y et faisons ça, tournons vers Dreamweaver. Ils vont entrer dans ces colonnes ici. Ce que nous allons faire est à l'intérieur de cette colonne, nous allons mettre un « Img », comme nous l'avons fait avant, puis appuyer sur « Tab », puis nous allons cliquer sur « Images », aller dans le dossier « Images ». Maintenant, nous ne les avons pas encore dans le dossier, donc nous allons cliquer sur « Parcourir ». Nous allons aller à mon « Bureau », trouver les fichiers d'exercice téléchargés et « Images ». Ici, nous allons aller « Miniature 1". Joli. Assurez-vous que chaque fois que vous mettez une image et mettez les tiques « Alt » rappelez-vous, c'est pour les malvoyants, c'est pour les personnes utilisant des lecteurs d'écran et aussi pour Google. Je ne me souviens pas de ce qu'est cette image, « image d'amour », ils sont excitants. Ce que nous voulons faire est, vérifions dans le navigateur. Vérifiez la bonne. Il est là. J' ai rendu le mien un peu plus grand. Pourquoi ? Parce que je viens d'entendre qu'ils peuvent redimensionner quand ils arrivent à, pouvez-vous voir quand ils arrivent à mobile, il devient vraiment assez grand ? Lorsque vous coiffez ceux-ci, assurez-vous de les utiliser, car nous allons utiliser la même image sur les trois tailles et la rendre réactive. Alors assurez-vous juste que votre image est assez grande, pour quelle que soit sa taille. Ensuite, ce que nous pourrions faire est de dupliquer celui-là. Nous allons supprimer tous ces types. Avoir mon curseur, vous pouvez le copier et le coller, qui fonctionne. Mais un raccourci cool est, mettez votre curseur n'importe où ici aller « Commande D » ou si vous êtes sur un PC, allez « Control D ». Va juste « Contrôle D, D, D, D ». On a tous nos petits gars. Ce que nous devons faire, c'est les éteindre. Maintenant, je ne peux pas juste changer le texte ici. Pourquoi ? Parce que vous vous souvenez quand nous étions ici, nous étions dans « Parcourir » et en fait copié dans mon dossier ? J' ai besoin d'aller les déplacer. Allons voir ça. Quelque part juste en haut, c'est le site web. Il y a les images, et il y a le type qui se fait copier. C' est mon dossier de fichiers d'exercice. Laisse-moi attraper tous ces types. Venez ici les gars, oups, je ne vous vois pas. Je déteste ça à propos d'un Mac. Ils sont là quelque part. Je dois aller dans le dossier « Images ». Montez là-dedans. Super. Il y a toutes mes images. Maintenant, je devrais pouvoir entrer ici, donc ici, ça va être « miniature », en fait, la miniature de celui-ci. Parce que je viens de le copier en arrière-plan là-bas, je devrais peut-être le faire car il n'apparaît pas, donc je vais appuyer sur « Enregistrer » et il y a un rafraîchissement, c'est [inaudible] à la fois sur un Mac et un PC. [ inaudible]. En arrivant là, on y arrive. Maintenant, une chose que tu dois faire, c'est que je les copie, je les bloque juste là-dedans. Vous devriez changer l'ancien texte pour tout cela, c'est vraiment important. Assez important pour que je ne le fasse pas maintenant, parce que je fais juste un tutoriel. Ce n'est pas mon site. Vous avez tous les gars, vérifions-les dans le navigateur. Ils sont tous dedans. Par défaut, ils s'empileront les uns sur les autres. Ce que nous devons faire, c'est les faire s'effondrer l'un à côté de l'autre, donc ils s'empilent. On va le faire. Allons à Dreamweaver et faisons ça maintenant. Ok, donc pour le faire, nous avons une colonne illégale de classe. Mais nous allons juste dire, si nous retournons tous ces cols vers la gauche, et ils vont rester les uns dans les autres. Nous avons flotté plus tôt et nous avons flotté le membre de navigation vers la droite, il flotte au-dessus de cette façon. Si vous flottez vers la gauche, ils vont continuer à s'empiler l'un à côté de l'autre, car par défaut, ils s'empilent l'un en dessous de l'autre en ligne. Allons dans le web styles.css quelque part en haut ici. Peu importe où ça va. J' aime mettre ces grosses choses au sommet. Souviens-toi que c'est un cours, alors j'ai oublié de mettre le point, de tuer les accolades, d'aller flotter, et on va aller à gauche sur ton image, regarde. Ok, donc ils flottent. Il n'y a pas assez de place pour tous pour y entrer, mais ils y arrivent surtout. Donc ce que nous allons faire maintenant est de créer une autre classe, nous allons diviser ceci en trois parties. Allons faire ça. Maintenant, ce peu que nous allons faire maintenant est de travailler avec quelque chose appelé la grille, c'est le terme brut de traiter de ce positionnement où nous les faisons empiler d'une façon dans le bureau, et d'une autre façon dans la tablette, puis à nouveau dans mobile. On a affaire à ce truc qu'on appelle une grille. Ce que nous allons faire pour que cette chose fonctionne, c'est que nous allons créer une classe et nous allons l'appeler « col-lg », grand. Il est vraiment typique d'appeler bureau grand, tablette moyenne, et vous avez petit, et puis vous pouvez avoir extra petit aussi bien. On va utiliser ce type. Ce qu'on va dire, ça va être assez facile. Nous allons dire que vous avez une largeur de, maintenant nous pourrions faire 33,3 % et économiser. Je pense que ça va marcher. Nous l'avons créé, mais nous ne l'avons pas appliqué. Nous avons créé cette chose, maintenant allez par ici, et nous allons l'appliquer à cette classe. On a un cours appelé « col ». On va appliquer la deuxième classe. Tu le mets juste là-dedans. Vous les collez l'un à côté de l'autre. C' est ainsi que vous appliquez plus d'une classe. Vous n'avez pas besoin d'écrire à nouveau la classe, vous pouvez, mais vous les mettez juste entre ces guillemets avec l'espace entre les deux. Super. Maintenant, je veux le faire pour tous. Il y a un truc cool que Dreamweaver fait. Si je clique ici et que je maintiens la touche « Option » sur un Mac ou la touche « Alt » sur un PC, et que je clique et fais glisser, pouvez-vous voir que j'ai un curseur, plusieurs curseurs ? Il y a ça. Hey, j'adore, col-lg, ok, et appliquons-les à tous. Super. Maintenant, on va vérifier. Ça marche. Les colonnes sont toutes de la bonne largeur. Mais ces images ne sont pas réactives. Donc, par défaut, ces images sont leur taille exacte, les colonnes sont les bonnes largeurs, mais l'image est quadrillée sur les bords. Allons réparer les images pour qu'elles soient à 100 pour cent. Pour rendre nos images réactives, nous allons aller à notre styles.css. Je vais créer une classe où tant qu'il est dans le frapper global. Où vais-je le mettre ? Je vais le mettre avec les colonnes que j'ai faites. On va faire un autre sélecteur de composés. Nous allons dire, « Des images qui sont dans mon col-lg. » Je vais le faire, et on va dire que ces gars auront une largeur de 100 %. Super. Ce que nous avons juste besoin pour rendre les choses réactives, c'est que nous devons ajouter une hauteur à elle aussi et simplement le mettre automatiquement, et cela vous évitera quelques problèmes plus tard. Il suffit de choisir automatiquement la hauteur. L' autre chose qui le rend utile est le bloc d'affichage. Pourquoi ? Juste parce que. Les images réactives font la largeur 100 pour cent ont du sens. Mettez la hauteur en affichage cependant, là-dedans. Ça va le faire marcher. Jetons un coup d'oeil dans le navigateur, entrons là-dedans. Joli. Donc les largeurs sont correctes. Oui, donc les largeurs sont de 33,3 %. Ils collent tous les uns à côté des autres, et les images réagissent. Ce que nous devons faire maintenant, parce que vous pouvez voir, comme 33 pour cent est génial parce qu'il craque quand il descend à la table. La prochaine chose que je veux faire est en fait, ma Mockup a un rembourrage entre celles-ci. Ajoutons un peu de rembourrage. Comment j'ai fait le rembourrage dans ce cas, au lieu d'utiliser ce 33, il n'y a pas assez de place pour les rembourrages. On doit poser ça un peu. J' ai donc pris deux pour cent de la taille globale. Ce que je vais faire, c'est que je vais l'utiliser pour ici et je vais faire du rembourrage. On va mettre du rembourrage tout autour, et on va faire un pour cent. On utilise ce pourcentage par ici. Ouais, regardons un peu, il y a un pour cent autour. Super. Un pour cent de chaque côté, ok, gauche, droite, haut et bas autour de ces colonnes et le reste. Je suppose que si tu le laisses à 33 ans, il y a pas assez de place, donc 33 plus 1 pour cent entre les deux, pousse ce type à partir. Ce qu'on veut faire, c'est s'assurer qu'il y a assez de place ici. Quand vous faites le vôtre, la vôtre pourrait avoir la taille quatre. Vous allez utiliser 25 % si vous en avez quatre en face. Vous allez jouer avec différents pourcentages, ce qui fonctionne pour vous. Tu vas devoir le moins. Peu importe ce que vous avez utilisé pour le rembourrage, moins le tampon de largeur et oui, faites un peu de jeu d'avant en arrière. Super. Nous avons fait une grille réactive. Ça a l'air bien là-bas. Quand on sera à la tablette, ce que j'aimerais que tu fasses, c'est que je voulais passer de celui-ci ici. C' est notre version de travail. Quand il est envoyé tablette, je veux passer dans ces deux colonnes ici. Dès qu'il le fait, ça reste comme ça. Ce qu'on va faire, c'est créer une autre classe. Nous allons le faire, mais au lieu de le mettre dans la tête ici, nous allons le créer pour qu'il ne soit déclenché que lorsque nous sommes en mode Tablet. Tout ce qui se trouve dans cette requête multimédia n'est activé qu'à l'époque et nous sommes au maximum dans cette largeur ici. Ce que nous allons faire, c'est que nous allons créer une nouvelle classe appelée « Col-MD » pour médium. Celle-ci va être de 25 pour cent. Quand je dis 25 %, ce que je veux dire c'est 50 %. Mais nous allons avoir le léger problème. Pour une raison quelconque, je viens de taper 50 par lui-même, alors nous allons taper toute la chose. Cela va être d'une largeur de 50 pour cent. Mais parce que nous avons ce rembourrage qui s'applique, regardons un peu. Ça ne marche pas. Pourquoi ça ne marche pas ? C' est parce que nous l'avons créé ici, nous avons créé ce col-mid, mais nous ne l'avons appliqué à rien. Je vais faire semblant que je l'ai fait exprès, mais j'ai complètement oublié. Allons ici, nous avons ce truc appelé « Col-LG », mais nous avons aussi besoin d'un ici appelé « Col-medium ». Rappelez-vous notre astuce, cliquez ici, maintenez l'option « Alt » touche, « Espace » et tapons « Col-MD ». Ok, donc on l'a créé, on l'a fait. Allons vérifier, et ça ne marche pas. Rappelez-vous 50 %, mais parce qu'on a un rembourrage là-dedans, on doit être un peu plus petit. C' est là que vous pouvez entrer et jouer avec, je sais que c'est 48 ans parce que je l'ai déjà fait. Super. Donc ça tient là-dedans. Qu'est-ce que c'est ? Donc, sur le bureau, c'est trois. Quand il arrive ici, c'est deux en face. La dernière chose que nous devons faire, c'est quand nous entrons dans le mobile, j'aimerais que ce soit à 100 %. Allons faire ça maintenant. Nous allons faire deux choses, notre Mockup a la vue mobile, ils sont tous à 100 pour cent de travers. Nous allons glisser ici, nous allons créer une classe appelée « Col-small ». Celle-ci va être une largeur de notre fenêtre, nous allons avoir une largeur de 100 %. La syntaxe devient un peu décalée. OK, allons l'appliquer. Voici notre tour cool. Ok, on va être « col-small ». Super. Vérifions dans le navigateur, et il va être un peu cassé. Ce n'est pas cassé, mais je veux me débarrasser de ce rembourrage entre les deux. Ma Mockup les a tous cotés l'un à côté de l'autre. Donc ce que nous allons faire, ici, allons à nos styles, et en haut, nous avons dit que le col a un rembourrage de 1%. Ce que nous allons faire ici, c'est que nous allons dire, ce même cours, nous allons dire que vous avez un rembourrage de zéro. Pixels ou pour cent, peu importe, 00. Super. Ils sont tous cotés l'un à côté de l'autre. Génial. Regarde-nous. Vous pouvez commencer à voir qu'on fait des trucs réactifs. Quand tu regardes quelqu'un d'autre et que tu regardes ça pour la première fois, tu dis : « Wow, ok. C' est assez compliqué. » Tu vas là-dedans. Ce n'est pas trop mal, surtout avec les onglets et tous les retours. Il y a beaucoup de choses là-dedans. Mais vous pouvez commencer à voir si vous commencez à écailler à cette chose une petite classe à la fois, c'est en fait, je pense assez simple. Super. Que devons-nous faire d'autre ? La dernière chose que je pense est juste une couleur de fond. Je ne sais pas. Ce n'est pas une grosse affaire, je suppose. Nous allons le faire au corps, faisons la couleur de fond. Allons « Couleur de fond ». Je vais juste choisir un gris clair parce que c'était ce qui était dans ma Mockup. « D, d, d », « Enregistrer ». Ok, donc la couleur de fond, vous pouvez voir que c'est juste un léger gris là-dedans. Cool. D'accord. Bien joué. Nous, et toi et moi, nous avons créé un site web. La grande chose est cette navigation ici, elle répond. Une fois que nous avons appris ce genre de choses réactives sans requêtes médiatiques, il est devenu assez facile de le faire. Il y a notre vue tablette, jusqu'au bureau, un joli sandwich Nav-sandwich, et nous avons nos petites images en marche. Bravo. Petites choses que je ferais pour retoucher ça, vous pouvez voir sur les coups mobiles, le rembourrage est probablement un peu gros pour celui-ci. Donc ce que vous faites, c'est que vous trouvez la classe qui fait votre boîte de héros. Il est au sommet ici quelque part, il y a quelque chose appelé hero.You faites une autre classe et vous venez de changer le rembourrage et de le remplacer et de le rendre plus petit. Vous allez finesse toutes ces choses, peut-être aussi les polices. C' est un peu parce qu'il se casse sur deux lignes. Donc, vous obtenez juste votre H1, faites un autre H1 ici en mode mobile et remplacez la taille de la police. Beaucoup de ces petits réglages sont bizarres. Je suppose que vous en tant que graphiste brille vraiment. Tous ces petits détails en termes d'espacement après et d'espace entre les lignes, et toutes les tailles de police et les choses. Cool. Ok, plus de duper. Allons à la prochaine vidéo. 11. Publier votre site Web sur internet: Super, donc nous avons créé un site, maintenant nous voulons le mettre en ligne. Vous avez besoin d'un hôte et d'un nom de domaine. Vous ne les achetez qu'ensemble, j'ai tout un cours sur l'achat de noms de domaine et l'hébergement. J' allais faire la version rapide ici pour vous faire aller. Connectez-vous à votre compte. Je vais utiliser GoDaddy, c'est l'hébergement le plus grand et le plus populaire au monde. Si vous avez autre chose, ce n'est pas loin, il y a des quarks légers. Ce que nous allons faire, c'est que je vais me connecter à mon compte. Ce que je veux faire, c'est obtenir un hébergement web. Nous avons déjà acheté notre hébergement web et payé pour un nom de domaine. Nous avons l'hébergement de base. Je vais le fusionner. Attendez qu'il se charge. Vous cherchez ce truc appelé comptes FTP. Donc, les protocoles de transfert de fichiers sont la façon dont vous téléchargez votre site Web sur vos serveurs d'hébergement. Vous en créez un, vous en mettez ici, vous allez appeler celui-ci test. Tu lui donnes ton nom, mais ça n'a pas vraiment d'importance. Ce n'est pas forcément une adresse e-mail , mais non. Invente n'importe quoi ici. Donnez-lui un mot de passe, assurez-vous que c'est un très bon, pas comme le mien ici, vraiment simple. Je vais supprimer ce compte juste au cas où, juste après ça. La grande chose lors de l'utilisation de GoDaddy est que, pouvez-vous le voir, mettre dans notre nom d'utilisateur ici. Ça va faire un sous-dossier, pas ce que je veux. Il doit aller dans public_html. C' est traditionnellement là que les choses vont. Si vous utilisez quelqu'un d'autre qui héberge, ils vous diront que parfois il a htdocs et quelques noms et public. Presque toujours, il a public_html, c'est comme la racine de tout ce qui va dans. Cliquez sur Créer un compte. La seule chose que nous devons savoir maintenant, c'est que nous devons nous souvenir de notre nom d'utilisateur et de notre mot de passe. Allons dans Dreamweaver, ouvrons notre site et accédez à Gérer les sites. Voici le Portfolio de Dan. On a fait ça au début. C' est celui que nous et nous nous souvenons ici que nous avons fait le dossier local sur notre disque dur et nous lui avons dit où les images sont allées. Maintenant, ce qu'on va faire, c'est aller à celui-ci appelé Serveurs, puis appuyer sur « Plus » et là, on va l'appeler GoDaddy. Peu importe ce que vous appelez ça, ici adresse FTP. Si vous n'utilisez pas GoDaddy, cela peut être différent, bringyourownlaptop.com. Parfois, il n'a pas besoin du FTP pour certains hôtes, dans ce cas il le fait. Le nom d'utilisateur testait @bringyourownlaptop. Encore une fois parfois, certains hébergeurs ont juste besoin du nom d'utilisateur, ils n'ont pas besoin de tout ce courrier indésirable. Mot de passe, mettez-le. Maintenant, vous allez frapper « Test » et vous allez croiser les doigts. Connecté avec succès. Maintenant ça marche pour moi parce que je sais ce que je fais. L' hébergement est de loin le plus difficile à mettre en place. N' ayez pas peur si cela ne fonctionne toujours pas, vous l'avez testé, vous avez essayé sans le FTP, sans ce nom d'utilisateur. D' autres choses que vous pouvez essayer est de ne pas toucher le répertoire racine, parfois vous devez mettre dans un public_html \. Ici, parfois, sous Plus d'options, vous devez désactiver le FTP passif. Il y a quelques petites choses que vous pouvez jouer avec, mais mon conseil est ne pas stresser trop loin ou trop longtemps, suffit d'envoyer un e-mail à la société d'hébergement, leur envoyer la capture d'écran de ceci ici et de dire que c'est les détails dont j'ai besoin, Est-ce que c'est ? Après, ils vous enverront les détails et vous les mettrez. Maintenant, ce que vous faites est de cliquer sur « Enregistrer », de cliquer sur « Terminé ». Super. Cliquez sur « OK ». Super. Maintenant ce que vous faites, c'est que vous montez sur Site, donc c'est connecté maintenant, mais rien ne s'est vraiment passé. Vous avez ce truc appelé le Local, et vous avez l'autre maintenant appelé Remote. C' est ce que nous voulons, Local est sur notre machine, Remote est GoDaddy, c'est le service d'hébergement. On va à Site et on a mis à Put et tu as frappé « Put ». Il va passer et se connecter. Ensuite, il va vous demander, si vous souhaitez mettre en place les dossiers dépendants et vous cliquez sur « Oui ». Il va mettre le html, mais alors il doit mettre le CSS, cet autre CSS et JavaScript. Il passe à travers et met en place toutes les images. Je vais cliquer sur « Annuler » dans ce cas. Pourquoi ? Parce que pour le moment je téléchargerais ce bizarre, pas bizarre mais ce portefeuille au-dessus de mon cycle web bringyourownlaptop.com. Je ne veux pas le faire, mais ce que vous faites est, qu'il passe par là, vous iriez à bringyourownlaptop.com ou votre URL et votre portfolio devrait être là. Si ce n'est pas le cas, faites-moi une ligne dans les commentaires et je vous donnerai un coup de main. Certainement connecter le serveur est le plus difficile pour tout le monde parce que même c'est toujours difficile pour moi. Je ne veux pas obtenir un nouvel hôte ou quelqu' un utilisant le nouvel hôte d'un client et je dois travailler sur tous les différents paramètres. C' est comment connecter un site en utilisant GoDaddy. Ça sera tout pour cette vidéo. 12. Dernières choses maintenant que vous savez coder: Très bien, donc pour finir, la dernière chose que vous devez faire, je suppose que pour compléter un site Web, c'est de créer d'autres pages. Laissez-moi juste rapidement, brièvement y entrer, parce que c' est littéralement que nous allons simplement créer une autre page comme nous l'avons fait celle-là. Disons que nous allons commencer par la base de notre page d'accueil. Il y a notre index à notre HTML. Je vais juste commencer par ça, donc nous allons le dupliquer, le faire dupliquer. Il y a une copie cool, donc je ne veux pas l'appeler et je la renomme, édite, renomme et j'appellerai celle-ci « my_contact_me page ». Super, il n'y a pas d'espaces, suffit d'utiliser des traits d'union ou des traits de soulignement. Donc, nous avons ceci, double-cliquez dessus pour ouvrir, ma page d'index, ma page d'accueil et maintenant cette page contact_us. Ce que nous allons faire dans celui-ci au fur et à mesure que vous commencez à changer en fonction de votre design par exemple, Photoshop. Donc je vais changer ça pour peut-être me contact_me. Je vais m'en débarrasser et vous commencez à coiffer cette page. Jetons un coup d'oeil dans le navigateur. Il est là, donc vous pouvez voir ceci est ma page de contact. Je vais passer en haut de la page. J' ai encore ma page d'accueil. Si je reviens à celui-ci et que c'est là, c'est ma page d'accueil et ma page contact_us semble très similaire. Je suppose que jusqu'à maintenant, je décide combien de colonnes je veux, ce qui va aller dans ces colonnes et prend un type, probablement un formulaire dans celui-ci. Maintenant, pour connecter les deux, passons à l'index, et je veux les connecter parce que rappelez-vous que nous avons utilisé des hachages auparavant. Donc, ici, nous avons utilisé du hachage. Donc, ce que je vais faire est de supprimer le hachage et je vais l'appeler du contact. Vous pouvez le voir pré-remplir, gentil. Donc, mon menu maintenant quand je clique sur contact_me devrait sauter à plus un pour empêcher un navigateur. Donc, la page d'accueil, je clique sur « Contact_me ». Il va à ma page contact_me. C' est tout alors aller et construire vous-même quelques pages et les connecter à celui-ci. Maintenant, l'autre chose que vous pouvez faire est que j'ai un tas d'autres cours, ajouter celui-ci pour Photoshop. On a eu une maquette au début. Il y a un Photoshop pour le web design et bien sûr que j'ai. Il y a aussi un plus grand parcours, celui-ci est ici je suppose un court. Voici quelques vidéos pour Responsive Web Design. J' en ai une longue qui fait environ 50 vidéos et c'est à voir avec quelque chose appelé Bootstrap, c'est dans Dream Weaver et c'est une prochaine étape après ça. Nous avons certaines des mêmes caractéristiques, mais c'est beaucoup plus détaillé. Tu peux entrer dans celui-là. Il y a un cours UX, devenant designer UX. Ces choses sur les noms de domaine, d'autres choses que vous pouvez faire si vous êtes un formateur et que vous allez enseigner celui-ci ici, J'ai des ressources pour enseignants, vous avez un regard sur le côté ici pour être un lien pour les Ressources pour enseignants et il y a des notes que vous pouvez mettre la main sur et vous pouvez utiliser ces chutes d'exercice pour enseigner à partir de. Quoi d'autre ? Projets d'affiches. Donc tu l'as peut-être suivi, mais changé les images aux vôtres, j'adorerais les voir. Vous avez choisi une police différente, j'adorerais la voir. J' aime vraiment voir ça. Donc, des liens ou des captures d'écran, tout ce que vous pouvez, coller dans les commentaires. Il y a beaucoup de façons différentes sur les diapositives de me montrer ce que vous avez fait, j'adorerais les voir. Donnez-lui aussi un avis, si vous l'avez apprécié, vous avez aimé mon style d'enseignement ou si vous ne l'avez pas fait. Travaillez un commentaire là-dedans et donnez-lui un avis et donc je peux le rendre meilleur. Quoi d'autre ? La dernière chose, c'est d'être payé, et j'ai toute une série de vidéos là-dessus aussi. Sur la façon d'exécuter un mémoire, comment vous assurer d'être payé à temps, quels coûts vous devriez facturer ? Encore une fois, il y a un cours complet à ce sujet, allez voir sur mes autres cours. D' accord, mes amis, on a fait un long chemin. Nous avons construit notre site de portefeuille, nous avons mené une requête média où, nous avons fait une navigation réactive cool. Maintenant, il est temps pour vous de partir et de construire votre propre site. Cachez-le de bonnes personnes et je vous reverrai dans une autre série de vidéos. 13. Aide-mémoire Dreamweaver: Bonjour les gens charmants. Dans ce tutoriel, nous allons regarder notre feuille de triche. Ce truc ici est la version vidéo, il va y avoir un PDF, il y aura un lien sur l'écran juste ici, tout le PDF imprimable téléchargeable, alors regardez-le, imprimez le PDF, et collez-le à côté de votre bureau et devenez plus génial dans Dreamweaver. Donc, tout d'abord, nous regardons quelque chose appelé QuickEdit, j'adore QuickEdit. C' est nouveau pour Dreamweaver 2017, donc si vous utilisez une version antérieure, cela ne fonctionnera pas. Maintenant, QuickEdit est un moyen d'éditer le CSS très rapidement. Dans ce cas, j'ai ce bouton et c'est beaucoup trop proche de cette balise p, ça me ennuie toute cette série de tutoriels. Donc je veux pousser ça vers le bas, donc il y a une étiquette p ici. Alors, nous allons dans Dreamweaver. Dreamweaver, voici mon en-tête, alors que c'est ? Donc en-tête, il y a mon contenu principal et il y a la balise p, la balise p offensante, et il y a le bouton en dessous, donc il y a le bouton Parlons, il y a la balise p et il y a une classe appelée heading-body. Je vais répliquer, je peux aller à QuickEdit ou je peux utiliser la commande soit un raccourci, encore plus court raccourci. Le codage est mauvais cul, comme vous pouvez le voir, c'est comme un petit vortex, passe par et trouve mon style.CSS. C' est le nez à la ligne 75, et voici ma copie de tête, de corps, je l'ai trouvé. Je vais mettre en bas de padding-bottom, et nous allons mettre 20 pixels. Je vais fermer ce petit vortex. Il suffit de vérifier le navigateur, une distance entre les deux. Pourquoi c'est bon ? C' est juste différent d'aller dans les styles et d'essayer de comprendre quel style il est. Il y a là, mais si c'est un long CSS, allez via Facebook. Ça pourrait être trop puissant. Rapidissez-le. La prochaine que nous allons regarder est quelque chose qui s'appelle Emmet. Si vous avez fait les tutoriels vidéos, nous avons fait un peu. Juste récapituler, disons que je veux ajouter une balise div, et je veux ajouter une classe à cette balise div. Donc, je veux une balise div et je veux ajouter une classe appelée colonne. Ou un cours appelé génial. Je veux qu'il y en ait combien ? J' aimerais qu'il y en ait six, s'il vous plaît. Si je frappe, ne mettez pas Retour, appuyez sur Tab. Regarde ça. Les cours, six d'entre eux avec le nom de classe de génial. Disons que nous avons besoin d'autre chose, disons que nous avons besoin d'une liste non ordonnée avec un tas d'éléments de liste. Donc nous allons ul et nous allons li, et nous allons dire que nous voulons 20 d'entre eux parce que cela prendrait beaucoup de temps. Hit Tab, regarde cette liste non ordonnée, avec 20 d'entre eux. Ça va encore mieux si je veux qu'une classe soit appliquée à eux de balles dansantes. Alors allez ici, appuyez sur Tab. Regarde-moi avec Emmet. Il y a plein d'autres choses qu'Emmet peut faire. Charges, charges et charges. Va vérifier, Emmet, c'est E-M-E-T. Il y a un site web et tout ce que vous pouvez voir et comprendre ce qu'il fait. Quelques autres rapides sont img, Tab, qui vous donne l'image et la source et c'est tout tag. Un autre que je connais et que je me souviens est le lien, Tab, vous donne le lien de feuille de style, le tout avec la bonne syntaxe, et c'est rapide. Merci. Astuce Numéro 3 va être multi-curseur. Nous avons ajouté une classe à ce groupe de divs que j' ai au hasard ici mais disons que je dois ajouter une autre classe. Dites que je veux ajouter une classe à tous, peut être difficile, donc je peux mettre plusieurs curseurs. Donc, ce que je peux faire est de maintenir enfoncée la touche Alt ou la touche Option sur le Mac et je peux faire glisser tout à travers ceux-ci. Regardez, tous les curseurs. Je peux mettre une autre classe et ceci peut être mon je peux déplacer toutes les classes, j'ai une classe audacieuse. Tu peux juste avoir les cours. Maintenant, nous avons fait la série de tutoriels Emmet. Mais disons que nous voulons le faire dans des endroits aléatoires. C' est génial quand ils sont tous, parce que vous pouvez Alt glisser à travers, mais disons que j'en ai besoin là que j'ai aussi besoin d'éditer ici aussi. Alt ne marche pas. Vous devez Alt le faire glisser. Ce que vous pouvez faire est de commencer ici, maintenez la commande enfoncée, je veux en mettre une et je veux en mettre une là, tant de classes dans tous ces endroits. Tu vois mes curseurs ? Un là, un là, un là, un là, tout clignotant. Je peux dire autre classe, je ne sais pas comment ce cours s'appelle mais génial. Donc multi-curseurs, mais encore mieux quand ils ne sont pas juste au même endroit, vous pouvez les avoir partout dans la boutique. C' est le multi-curseur impressionnant feuille de triche montrer l'heure. Ça pourrait être mon préféré. C' est le numéro 4. C' est quelque chose appelé Appliquer le formatage source et il nettoie simplement votre code. Il ne fait rien, il l'aligne juste et le fait sortir, le rend joli. Je travaillais avec cela, je l'ai téléchargé à partir de slicknav.CSS. C' est génial, mais je suis très visuel. Donc j'ai besoin de tout pour m'aligner et vous pouvez voir qu'il y a une classe là-bas et mon instinct naturel est juste de le déplacer vers le bas et de m'assurer qu'il est loin de ça, pas sûr de pourquoi mais j'ai l'impression que ça doit être là-bas et qu'il pourrait y avoir des courses. Donc, ce que nous allons faire est, je vais aller ici et est un appelé Code source de format, cliquez sur celui-ci et allez Appliquer le formatage de source. Vous le faites à une sélection, vous pouvez le faire à l'ensemble et regarder cette transformation en, regardez ça, si jolie. Je fais ça avec tous mes trucs, je choisis sur ce CSS ici parce que ce n'est pas le mien, mais mes trucs finissent par paraître tout aussi mauvais. Eh bien, pas mal, mais le mien finit par avoir l'air bien pire et juste ranger tout, rendre ça agréable. Je suis comme si je vois tout joliment. Si vous êtes sur les premières versions, il y a une option ici en 2017. Si vous allez me rejoindre avec des versions antérieures, il y a sous Modifier afin que le Code et il y en a un qui dit Appliquer la mise en forme de source. C' est Appliquer le formatage source et c'est le numéro 4. Numéro 5 dans cette belle liste de feuilles de triche est quelque chose appelé Code Folding. Voyez ces petites flèches ici, ça veut dire que je peux plier tout mon corps et toute ma tête. Pourquoi il est utile est juste des choses bien rangées, fait particulièrement stressant en regardant un peu de HTML et retourne dans des choses séparées sur. Je veux plier le cap et mon principal, tout garde ensemble. Je trouve probablement le plus utile, disons que j'ai un morceau que j'ai besoin de supprimer au lieu d'essayer de le faire, surtout quand c'est hors page. Je déteste ça quand c'est un très long tag et ça commence ici et se termine quelque part loin de l'écran. Faisons semblant ici, c' est bien en bas. Donc Main et moi voulons essayer de le sélectionner, et je veux essayer de comprendre où est la fin, et j'essaie de la trouver. Donc, ce que vous pouvez faire est juste, basculer cela et ce que je fais est de saisir tout cela, puis de le supprimer. C' est une belle façon d'attraper tout ça. Quand il est bascule, il n'est pas parti, bascule en arrière, code pliant les gens, j'adore ça. Suivant sur notre liste de feuilles de triche est juste en double. Juste un raccourci sympa et vraiment facile dans Dreamweaver. Dites que j'ai besoin d'un autre de ces boutons, il y en a un ici, mais si j'en ai besoin d'un autre, je pourrais. Sélectionnez la ligne, copiez-la, coupez-la et collez-la, obtenez les onglets corrects. Je trouve que c'est le plus gros problème, mais tout ça donne l'air joli. Ce que je peux faire, c'est défaire. Au lieu de faire tout ce drame, regardez ceci, curseur clignotant Commande D. Si vous êtes sur un PC, c'est Control D, mais sur un Mac, c'est Commande D et regardez. À moins qu'il n'y ait de duplication, nous avons une balise dans laquelle il est, il va tendre la main et le dupliquer. C'est le numéro six. Le suivant dans le super fantabuleux une feuille de triche pour Dreamweaver fonctionne bien pour tous les numéros. Évidemment, nous allons travailler un peu en CSS pour les propriétés. Disons que l'espacement entre ce H1 ici, mon H1, il y a ma hauteur de ligne. Si mon curseur clignote à l'intérieur de l'un des chiffres et que je maintiens la touche Commande et Alt enfoncée, si vous êtes sur un PC, c'est Contrôle et Alt. Sur un Mac, c'est en fait Commande et Option et utilisez simplement vos curseurs haut et bas, donc vos touches fléchées. Regarde ça, je monte, et il y en a 80, descend, il y en a 70. En bas, en bas, en bas. Vous pouvez voir avec la combinaison de cette chose de navigateur en temps réel ici, qui est en bas vers la droite et c'est un navigateur en temps réel, nouveau dans Dreamweaver 2017. Il ajuste exactement le même temps. Donc n'importe lequel de ces champs, tout ce que vous trouvez , la taille de la police ici, monte et descend. Cette belle personne a ajusté l'un des numéros en maintenant l'option Commande ou l'option Contrôle enfoncée, et utilisez vos touches fléchées. La prochaine feuille de triche, émerveillement dans notre belle liste est le numéro sept. Ce n'est pas le cas, c'est le numéro huit et c'est un moyen d'envelopper une balise qui existe. Donc, disons que vous avez ces tags qui sont assis ici, mais je ne veux pas qu'ils soient dans mon pied de page. Je n'ai pas écrit la balise de pied de page et je pourrais aller écrire le pied de page ici et K pour la fermeture et le taper ici, et cela fonctionnera, mais c'est un peu long. Donc ce que je veux faire, c'est attraper tous ces types. Donc je vais vous dire vous et vous tous, et je vais frapper Command T sur mon Mac ou Control T sur un PC et vous pouvez voir là, wrap tag. À quel point c'est bon ? Je vais l'envelopper. Appuyez sur Retour. Vous devez appuyer sur Retour deux fois. Je ne peux pas montrer pourquoi. Vous pouvez voir là, il y a mon étiquette d'emballage. Alors prenez n'importe quoi, sélectionnez Commande T et ça va finir. C'est le numéro huit. Passons donc au numéro neuf et il sélectionne la balise parent. Disons que je suis au fond de quelques couches. Cette chose que j'utilise comme exercice, eh bien n'est pas génial. Ce n'est pas particulièrement déroutant, mais disons que c'est vraiment un peu déroutant. Il y a plein d'enfants à l'intérieur de ces parents. Donc, ce que vous pouvez faire est que je veux sélectionner le, Je ne suis pas trop sûr de qui est l'enveloppe d'une balise ou la balise parent est. Donc, n'importe où à l'intérieur, maintenez la touche Commande ou Contrôle enfoncée sur un PC et utilisez vos crochets. Je vais utiliser le côté gauche, l'ouvert et vous pouvez voir qu'il saisit l'étiquette du trou et recommence, attrape le parent, va encore, attrape une colonne, va encore. Vous pouvez voir, belle façon d'attraper le parent, le gars à l'extérieur. C' est vraiment génial surtout quand ce parent s'étend sur plus d'une page. Vous ne pouvez pas tout à fait voir ce qu'est la fin, donc vous pouvez la sélectionner. Donc, c'est Commande et utiliser un crochet carré ouvert et c'est la façon de sélectionner la balise parent. Joli. Le numéro 10 est une variation sur le numéro neuf, en sélectionnant les balises parents. Nous allons utiliser ce sélecteur de balises en bas. Les gens ignorent ce truc ici et c'est génial. Donc, si je suis à l'intérieur d'ici et que c'est vraiment utile lorsque vous utilisez des sélecteurs composés et que vous n'êtes pas trop sûr de quoi mettre. Disons que je le veux, vous avez la navigation ici, mettez-la à l'intérieur. Vous pouvez voir ceci ma balise A. C' est mon tag sélectionné en bas ici. C' est ma balise A et c'est à l'intérieur de mon élément de liste, qui est à l'intérieur de mon menu, qui a, désolé, mon UL, dont il a un ID de menu qui est à l'intérieur de l'en-tête, qui est à l'intérieur du corps, me donne juste une idée de l'endroit où Je suis dans le monde est venu. Donc, disons que je veux couper l'UL, regarder cela, clique sur l'ensemble UL. Attrapez l'en-tête. C' est une façon de sélectionner et d'utiliser ce parent, en utilisant cette balise sélectionnée en bas pour savoir où vous êtes dans le monde. J' adore ça. Bon, faisons le suivant. Le dernier de cette incroyable liste de trucs de triche, nous allons regarder des extraits. Alors je suis là. Je regarde le panneau des extraits. Je suis dans mon CSS ici. Donc, nous allons commencer avec des extraits CSS. Il y en a beaucoup ici. On va commencer par les grands. Donc, disons que j'ai besoin d'un pied de page et que j'ai besoin qu'il soit fixé au bas pour qu'il ne bouge pas, donc il est toujours là en bas. Je pourrais aller le comprendre ou regarder ça, réparer le pied de page, double-clic. Regarde ça. C'est tout le codage pour fixer le pied de page au bas. Joli. Un autre pourrait être, vous démarrez un nouveau projet et vous devez mettre peu de zéro dans le code et juste pour tout nettoyer. C' est très pratique à faire. Des extraits de CSS, il y en a deux ici. Il y a réinitialisation du style HTML, regardez ceci. Cette chose que je fais. C'est une belle et impressionnante réinitialisation de style. Tout va ressembler sur différents navigateurs. Joyeux jours. Je vais regarder celui-là. Il y en a un autre ici appelé celui d'Eric Meyer. Lequel ai-je le mieux ? Je pense que j'aime celle d'Eric, c'est gentil et simple. Il suffit de tout effacer caresser car il y a des jours heureux obtient qu'une construction d'un site Web, extraits devient encore mieux. Regarde ça. Si je vais dans des extraits HTML, regardez ici. Trouvons du HTML. J' ai besoin d'ajouter maintenant une barre de navigation. Je vais dans quelque chose, créer une barre de navigation. Là, il est là. On a une barre de navigation, le titre de la classe, le gars de la ligue est dedans. Les éléments de la liste sont tous liés prêts à être utilisés. Il y a des cours. Je peux les dupliquer. Des extraits, génial. Ensuite, un peu est de faire des balises méta. J' ai besoin de les ajouter. Tu te souviens de ce qu'ils sont tous ? J' ai des ennuis quand je ne les ajoute pas. Entendez que je pars, et je les trouve ici et c'est une balise méta générale. Celle-là ou contre celui-là, pas tous les versets meta tags pour SEO. J' en ai probablement besoin, mais oui le nom là-dedans, la syntaxe, je n'ai pas besoin d'aller essayer de me souvenir de ce qu'ils sont, des extraits. Le dernier, et celui-ci est livré avec un double banger. C' est la dernière, la finale des feuilles de triche. C' est cette belle ici. Imaginez, j'ai une étiquette P, dit P et je veux mettre un peu de Lorem Ipsum dedans, j'irai sur Lipsum.com et il y a la tasse de café là-dessus, et vous allez le copier, mais il y a de la ferraille attachée. Tu dois le nettoyer. Mais regarde ça. Ajouter Lorem Ipsum, oh mon Dieu. Lorem Ipsum, intégré là et j'ai dit que c'était le double bang pour la finale. Donc Lorem Ipsum est génial, mais imaginez que vous le faites un peu. Imaginez s'il y avait un raccourci que vous pouvez faire. Tu peux. Vous pouvez voir ici celui-ci dit Lipsum. Je vais me débarrasser de celui-là et le mettre dans Lor et vous pouvez voir sous le déclencheur ici, je peux inventer tout ce que je veux. mailto un autre bon. Donc juste Lor. Maintenant, je suis ici, j'ai ma balise P et je veux mettre L-O-R et appuyer sur l'onglet. Je fais les miens dans ce truc. C' est bon. mailto en est un autre. Tab out. Qui se souvient comment mailto se passe ? Je le reçois la plupart du temps et je le fais écrire. Mais tout le temps que je dois aller vérifier, c' est deux-points, comment ça marche ? extraits, ils sont là-dedans, ils travaillent et que mon ami est la fin de ta belle feuille de triche. N' oubliez pas que si vous regardez ce cours, c'est la fin d'un parcours plus long. Il s'agissait de 12 vidéos de faire vos propres sites réactifs. Va vérifier ça. Sinon, il y a un PDF que vous pouvez télécharger. Le lien sera à nouveau sur l'écran ici à nouveau, et aller quatrième. Soyez rapide, soyez génial dans Dreamweaver. Merci beaucoup.