Dreamweaver CC 2018 : introduction à la conception Web adaptative

1. Introduction: Bonjour, je m'appelle Dan Scott, et dans cette vidéo, nous allons vous accorder du Web zéro au web hero et chercher à construire votre toute première page web réactive en utilisant Dreamweaver. Maintenant, vous pouvez suivre ce tutoriel parfaitement et vous avez juste besoin de télécharger les fichiers d'exercice, il y a un lien vers le bas dans le bureau de description, gratuit pour télécharger, aller et obtenir cela, pause la vidéo, revenir une fois que vous avez les fichiers. Le but de ce tutoriel est de vous exposer à la conception web moderne. Nous allons examiner des termes comme responsive HTML5 et CSS3. Ils ont l'air de fantaisie, mais ils sont en fait assez faciles une fois que vous les comprenez. Nous allons également voir comment Dreamweaver nous rend ce super facile à faire. Mais en fait, ce que je veux vraiment que vous obteniez de cette vidéo, c'est d'arriver à un point avec espoir et vous êtes comme, en fait, ce n'est pas aussi difficile que je le pensais. Je suis très excité de partir et d'apprendre plus et de construire mon propre site. Donc c'est mon but. Allons-y maintenant et commençons à travailler. 2. PROCESSUS: Alors d'abord, parlons du processus. Donc, tout d'abord, vous devez concevoir votre site Web d'abord dans quelque chose comme Photoshop ou Illustrator. Vous pouvez donc voir ici que j'ai conçu à quoi ressemble mon site Web sur un ordinateur de bureau, quoi il ressemble sur une tablette, et à quoi il ressemble sur un mobile. Vous pouvez voir qu'ils sont très similaires, mais chaque conception utilise au mieux les tailles de l'appareil. Donc, il y a juste quelques changements de taille de police et quelques réordonnances des boîtes pour le rendre étrange sur les différents appareils. C' est ce que nous appelons « responsive ». Le site va changer de forme et changer de forme un peu selon qu'il s'agit d'un mobile, d'une tablette ou d'un ordinateur de bureau. Donc c'est notre premier grand terme hors du chemin. conception web réactive signifie simplement que le site change pour utiliser au mieux l'appareil. Donc, peu importe Photoshop ou Illustrator, mais j'ai conçu le mien ici dans Photoshop. Maintenant, nous devons le traduire en ceci. Ceci est la version finale de notre site Web où vous pouvez le voir correspond à ma maquette Photoshop pour bureau. Mais quand je descends, regarde ça, regarde ça jusqu'à la tablette, tu vois que ça change là ? Je fais glisser mon navigateur dans et hors, parce que la taille de police change, devient centrée, les colonnes vont de trois près à deux. C' est donc notre terme de réactivité. Nous allons construire ceci et descendre vers le mobile où il est juste en étirant un à travers. Nous allons également faire quelques choses où vous remarquerez qu'il y en a six sur tablette, mais seulement quatre sur mobile. Donc nous allons désactiver certains d'entre eux. Nous allons également changer le menu le long du haut ici vous pouvez voir dans ma maquette Photoshop qu'ils sont directement sur le bureau mais ils s'effondrent dans cette autre version sur les petits appareils. Donc, nous avons déterminé ce que signifie responsive, et nous savons ce que nous allons construire. Allons maintenant et commençons à le construire. 3. Commencez à créer: Ok, donc la première chose est d'ouvrir Dreamweaver. Souvent, au début, ils je vous poserais quelques questions comme, quelle couleur voulez-vous en arrière-plan ? Que vous souhaitiez être designer ou développeur ? Ce que vous voulez faire est de choisir le développeur pour ce cas. Si vous n'avez pas choisi la bonne option, continuez à passer par et puis vous pouvez le changer à nouveau et ici en haut à droite et juste choisir développeur et il devrait ressembler à quelque chose comme le mien. La prochaine chose que nous devons faire est de définir un site. Accédez à un site et accédez à un nouveau site. Nous devons le faire pour chaque nouveau site Web. Si tu n'en as qu'un, tu n'auras qu'à le faire une fois. Mais si vous aimez le bâtiment principal, beaucoup de sites Web, vous devrez définir ce site pour chaque nouveau. Donnez-lui un nom, j'appelle le mien « Roar Cycles ». D' accord. C'est la société pour laquelle nous travaillons et nous devons décider où, sur un disque dur, nous allons garder ce site Web. Parce que toutes nos images et tout le HTML, toutes les choses que nous fabriquons pour ce site doivent être conservées dans le même dossier. Ce que nous allons faire est d'aller dans le dossier du site local, cliquez sur ce petit bouton « Parcourir » et vous pourriez faire votre propre. Mais parce que j'ai déjà des fichiers d'exercice, vous pourriez les télécharger. OK, donc ceux que vous avez téléchargés à partir du lien dans la description vont les fichiers d'exercices réactifs et choisissez simplement ce dossier ici. Pas besoin d'aller plus loin, d'accord ? L' autre chose que vous devez faire avant de passer à des paramètres avancés et ici, il est dit dossier images par défaut. Allez à cela et choisissez simplement le dossier images que j'ai créé pour vous. Si vous créez votre site par vous-même, vous feriez votre propre dossier avec votre propre dossier d'images. Nous gagnons juste du temps pour passer aux trucs réactifs dans ce cours, cliquez sur « Choisir » et appuyez sur « Enregistrer ». Ce que j'ai fait, c'est juste pour accélérer les choses, est-ce que j'ai commencé le site, d'accord ? Faites-nous aller pour qu'on puisse sauter dans les parties réactives. Allons à index1.html et c'est à quoi ressemble notre page dans le code. Nous voulons voir à quoi cela ressemble dans un navigateur. En bas à droite ici, il est peser en bas ici il ya un navigateur appelé en temps réel précédent cette icône extrême droite. Cliquez dessus, puis cliquez sur « Google Chrome ». Si vous n'avez pas Chrome installé, il est préférable d'aller installer cela maintenant, ok, quelqu'un appelle le navigateur Web et c'est celui que vous devriez faire, la plupart de vos tests dans, vous ne pouvez pas utiliser Safari ou l'un des autres, mais Chrome est amen. C' est ce que j'ai fait pour toi jusqu'à présent. C' est juste un aperçu local sur dans mon navigateur, ok ? J' ai édité un logo, j'ai ajouté cette navigation et cette grande boîte rose juste pour obtenir la bonne structure, afin que nous puissions commencer à regarder ce qui la rend réactif. Parce qu'en ce moment, si je prends le bord ici, ce n'est pas réactif du tout, tout comme il est assis là. Bon, alors nous allons entrer dans Dreamweaver et ajouter notre premier bit de HTML. 4. Créer le HTML: Mettons-le dedans. Nous allons mettre dans la frappe, Nous allons le mettre maintenant nous avons notre en-tête ici, qui contient mon logo et ma navigation. Voyez ces trois petits boutons. Ensuite, j'ai un autre morceau, qui est principal. Main est la partie centrale du site hitter est dehors me donnant juste un logo et la navigation. Main ici a déjà ma boîte de héros, et c'est la grande boîte rose qui ont déjà créé. C'est ce type ici. A l'intérieur de là où je veux que je frappe. Nous allons concevoir ce frappage ici. C' est RoarX. Précommandez maintenant. Pour mettre un coup, nous devons mettre quelque chose appelé un H1. H1 est comment frapper un et le frapper est le frapper le plus important sur notre page. La syntaxe fonctionne comme ça, juste comme disons ce principal ici, il dit main, et c'est à l'intérieur de ces crochets d'angle, puis il y a une barre oblique avant faite pour le fermer. On doit faire la même chose pour H1. Les supports inclinés se tiennent à côté de votre clé d' entrée, tapez H1, puis fermez-le. C' est la partie de départ, comme la mienne ici. Vous pouvez voir que la deuxième partie est de la même manière, mais elle a une barre oblique avant devant elle. Nous allons taper le type de parenthèses et la barre oblique avant et utile tout Dreamweaver va le remplir pour nous, c'est l'un des avantages de Dreamweaver. Le texte entre à l'intérieur, il va au milieu de ces deux-là, il peut provoquer des clignotements entre les deux tags, et nous allons taper RoarX, qui est le nom de notre nouveau vélo que nous lançons. Nous allons dire pré-commande maintenant. Touche « Enregistrer ». Enregistrer les fichiers, et je veux que vous alliez vérifier votre aperçu de navigateur en temps réel. Maintenant, vous pouvez vérifier en revenant à Chrome, il se met à jour automatiquement ou si vous le souhaitez, vous pouvez cliquer ici et cliquer à nouveau sur Google Chrome. Quoi qu'il en soit, passons à notre navigateur. Vous pouvez voir ici est mon H1 RoarX. Précommandez maintenant, et par défaut il est noir et gras et une taille particulière. Que mes amis, est notre premier cracher HTML. Si vous êtes nouveau dans le design web bien fait. C' est notre premier bit de codage, vous l'avez fait. La prochaine chose que nous devons faire est d'aller changer ces couleurs, tailles et polices par défaut pour quelque chose qui correspond à notre balisage dans Photoshop. Alors allons-y et faisons-le maintenant en apprenant quelque chose appelé CSS. 5. Créer le CSS: Nous avons appris ce qu'est HTML, nous avons édité un h1 et nous y avons ajouté un peu de goût. C' est le HTML. Pour styliser cela, nous utilisons quelque chose appelé CSS. J' ai créé une feuille CSS ici. Vous pouvez le voir ici. C'est dans le dossier « documents connexes ». Cliquons dessus. J' ai déjà fait des trucs de base. J' ai dit cette boîte de héros qu'on a faite. Je lui ai donné une hauteur et je lui ai donné cette couleur de fond pour planer au-dessus de lui de rose. J' ai des trucs pour commencer. Regardons la création de notre propre CSS maintenant. Sous cette accolade bouclée, appuyez sur « Retour ». retours n'ont pas d'importance en CSS ou HTML, vous n'avez pas besoin de ce retour, vous pouvez l'avoir, j'aime juste les espacer un peu juste pour le rendre facile pour vous de le voir. Quand il s'agit de CSS, il y a une syntaxe de base que nous devons suivre. Fondamentalement, vous pouvez copier ce qu'il y a ici, disons corps. Il y a le nom h1 pas deux, h1. Il y a un espace et vous pouvez voir qu'il y a une accolade bouclée au début et à la fin. C' est ce qu'on va faire. Nous allons taper la première accolade bouclée et [inaudible]. Vous n'avez jamais juste une ouverture sans fermeture, donc ça le remplit là pour vous. C' est mettre la fin pour nous, Mettons « Retour ». Le « Retour » nous donne juste un peu d'espace pour écrire des choses comme ça, comme la hauteur et la couleur. D' abord met en texte, accolades. N' oubliez pas le début et la fin ou ne les supprimez pas. La prochaine chose que nous allons faire, c'est que nous allons donner à ce peu un CSS, ce qu'on appelle un attribut. Un attribut signifie simplement, « Je vais lui donner une chose comme une couleur ou peut-être une taille de police ». Ces attributs sont appelés attributs. Vous pouvez voir là, je tape CO et il pré-rempli en couleur et j' appuie sur « Retour » et ce qu'il a fait est qu'il l'a rempli et éditer le deux-points là. Le côlon doit entrer. La prochaine chose est de choisir une couleur. La chose cool à propos de Dreamweaver est qu'il a un sélecteur de couleurs ou que vous pouvez choisir dans vos bibliothèques, ce qui est vraiment cool. Cliquez sur « Sélecteur de couleurs » et ce que nous voulons faire, c'est faire glisser ce petit cercle ici. On peut le traîner, on peut jouer avec des teintes, mais ce que je veux c'est que je veux qu'il soit dans le coin supérieur gauche. Ça va être blanc. Fais-le glisser là-haut et on va utiliser du blanc. Si ça va horriblement mal, vous pouvez simplement taper, livre, f, f, f, f, f, f, f, f, c'est le code pour le blanc. La dernière chose et la chose que beaucoup de gens oublient quand ils sont flambant neufs à CSS est que vous devez frapper point-virgule à la fin. C' est toute la syntaxe dont vous avez besoin pour CSS. Il y a des accolades, il y en a une au début, une à la fin. Vous tapez l'attribut, dans notre cas, ce sera la couleur de la police, et vous mettez un deux-points après, dans notre cas Dreamweaver l'a fait pour nous et n'oubliez pas le point-virgule à la fin. Allons le sauvegarder, mais utilisons le « Fichier, Enregistrer tout ». C' est pratique car il enregistre à la fois le CSS et le HTML en même temps. Ce sont en fait des fichiers séparés, donc vous passez au code source, qui est HTML et celui-ci est mon CSS. Ce sont des fichiers séparés sur mon site Web. Je trouve que lorsque vous apprenez, il est préférable d'aller à « Fichier et enregistrer tout », assurez-vous que tout est enregistré, puis de passer à votre navigateur. Êtes-vous prêt ? Nous avons ajouté du HTML, notre h1 et nous avons ajouté du texte, puis nous sommes allés dans le style ou h1 en utilisant CSS. Tu es sur le point de devenir designer web. Tu es prêt, prêt, vas-y. Génial. Vous avez ajouté du HTML et vous pouvez styliser ce HTML en utilisant CSS. Ce sont les principes fondamentaux de tout design web. Nous allons faire quelques autres choses juste pour nous assurer qu'il correspond à notre maquette, mais ensuite nous allons aller de l'avant et commencer à regarder la conception web réactive spécifique. Allons-y et finissons. 6. Rendre votre site réactif: Pour correspondre à notre maquette, nous voulions quelques choses, puis nous avons eu l'outil de type ici dans Photoshop, je vais cliquer. Je sais que je veux 62 points pour la police. Je veux le pousser par le haut et loin de la gauche ici. Allons-y et faisons-le maintenant en CSS. Dreamweaver ici, mettons un retour et c'est taper dans la police. Vous pouvez voir que ça me donne des options pré-remplies. Est tout ce que la taille de la police, et vous pouvez le voir mettre la couleur là pour nous. Maintenant, dans notre cas, nous voulons un 62. En fait, j'ai changé d'avis. Je vais utiliser 55 pixels, voulais juste un peu plus petit, juste parce que et je n'ai pas oublié d'ajouter le point-virgule à la fin, quand vous saviez que cela arrive beaucoup. Mais maintenez, nous allons faire quelques autres choses. On va taper les caresses. J' ai tapé un doctorat et vous pouvez voir Dreamweaver va super utile, voulez-vous dire ça ? J' ai dit oui, cliquez sur « Top », et pour le haut, nous allons faire 120 pixels, rappelez-vous un point-virgule à la fin, et le dernier va être caresser et je vais faire à gauche. Je veux un moyen à partir de la gauche, environ 60 pixels. Appuyez sur « Enregistrer » et rendre l'écurie, et nous allons sauter dans un navigateur et vérifier. C' est fondamentalement ce que nous avons jeté dans notre HTML, qui est H1, et puis nous passons beaucoup de temps dans le style CSS à l'obtenir comme nous voulons. Mais le moment est venu de regarder ce que le design réactif fait. Maintenant, la réactivité est un terme parapluie utilisé pour décrire certaines choses que nous faisons dans le code pour le faire ajuster aux différentes tailles d'écran. Une de ces choses que nous faisons dans le code, et probablement la principale est quelque chose appelé une requête média. Maintenant, toute une requête multimédia est comme un déclencheur, et il ne l'obtient que lorsqu'une taille d'écran est activée. Jetons un coup d'oeil à quelque chose que j'ai fait plus tôt. C' est ce que nous allons créer quelque chose appelé une requête multimédia. Il dit juste déclencher ce H1, lorsque la taille de l'écran est de 768 pixels ou moins mais si c'est plus grand que cela, ne vous inquiétez pas d'ignorer les choses. C' est ce qu'il est, est un déclencheur, seulement quand il est activé lorsque l'écran est une largeur spécifique. Vous pouvez voir ici il y a aussi une version mobile. Déclenchez cette H1 uniquement si elle est étrangère à des pixels ou moins. Allons créer ça maintenant dans notre vision, où est-ce que ça va ? On va le mettre sous notre H1. Mettez-le dans quelques routines, et c'est le plus chaud, mais une syntaxe que vous allez devoir rouler, je vous le promets. Ce n'est pas si difficile, mais nous allons devoir le taper et me suivre textuellement, c'est le symbole « At » et nous allons taper les médias. Ensuite, nous allons taper un ensemble de parenthèses. A l'intérieur de ces crochets, nous allons taper « Mex » tiret « Width ». On doit mettre un deux-points dans Nixed. Assurez-vous que c'est un deux-points et non un point-virgule, et maintenant nous devons décider de la taille de notre tablette. Maintenant, vous pouvez choisir n'importe quelle taille ici, une taille de tablette vraiment courante ou une taille d'iPad est de 768 pixels de large. Nous disons juste cette requête multimédia, ici va être pour tablette et c'est ce que je suppose que la taille est. Maintenant, avec le temps, cette valeur par défaut va changer et vous trouverez différents sites utilisent largeurs de pixels légèrement différentes pour la tablette, mais oui, c'est vraiment une taille commune, donc utilisez-le pour le moment mais non, il n'est pas une règle absolue. La dernière chose que nous devons faire après ce dernier support est mis dans une accolade bouclée. Nous ajoutons une accolade bouclée, et le mettons dans un retour, c'est une requête immédiate. Maintenant, je suppose que c'est un peu dur. Il y a beaucoup de syntaxe qui va là-dedans, mais ce que vous pouvez faire à l'avenir est juste copier et coller cela comme je le fais dans tous les autres travaux. Maintenant, ce qui va à l'intérieur de cette requête multimédia, tout ce que vous voulez faire, mais seulement être déclenché sur tablette. Ce que j'aimerais faire est de changer la taille de la police. Si vous pouvez voir ici ma vision, et il va de l'alignement gauche et assez grande taille de police jusqu'à la plus petite taille et centrée. C' est ce que je veux faire sur un site lorsque la largeur descend à la tablette, je veux que vous changiez ce H1 pour juste changer la taille et le positionnement. Je ne veux pas que vous changiez la couleur, la couleur est fine, laisserait que juste la taille et le positionnement. Allons voir cela en CSS. Tout ce qu'on fait c'est tant que c'est entre ces deux accolades. Juste ici, je vais taper H1. Tout comme nous l'avons fait ici, nous devons mettre nos accolades, mettre le retour, et maintenant nous allons aller et le coiffer. J' aimerais dire quelque chose comme la taille de la police. Où êtes-vous la taille de la police, je voudrais qu'elle soit descendue à 40 pixels, et ils investissent des point-virgules à la fin. Assurez-vous que la syntaxe est correcte. Vous avez des accolades de chaque côté, et vous avez un côlon et un point-virgule ici. Sauvegarde une cire. C'est sûr. Préparons-nous, parce que nous sommes sur le point d'entrer dans territoire réactif inexploré, peut-être pour vous. Allons le vérifier dans un navigateur, et la façon de le goûter, c'est que nous regardons la vue du bureau ici. C' est assez large, mais quand on descend à 768 pixels, où c'est, continuez à faire glisser jusqu'à ce que vous compreniez, mais regardez ça, descendez. En regardant cette police, je le pointe. Tu ne peux pas me voir pointer comme ça. Que mes amis est tout responsive design web est. Il y a d'autres choses, mais c'est la partie principale de celui-ci est que requêtes de médias se déclenchent à certaines largeurs qui va dans, changements que vous verrez aider votre HTML est exactement le même. Les tics n'ont pas changé, juste en changeant le CSS pour cela, et cela est déclenché sans requête multimédia. Bien joué. Je serai excité, je suis dedans, mais quand j'ai compris ça, j'étais assez excité. Allons faire quelques autres choses. Retournez dans Dreamweaver. Ce que j'aimerais faire, c'est me rappeler que nous avons dû faire quelques choses. Nous avons dû faire des ticks la ligne. Dans le code est le texte. Alignez là, il est en haut là, et je vais cliquer sur « Centre ». Vous pouvez voir que c'est la bonne chose à propos de Dreamweaver est que je n' ai pas besoin de le taper ou de me souvenir de la syntaxe. Je peux juste cliquer sur cela et tout ce que je dois me rappeler de faire, quelle est la dernière chose qui va sur l'intervalle ces lignes que tout le monde oublie, point-virgule. Impressionnant. Appuyez sur « Enregistrer », enregistrer l'aperçu. Maintenant centré. C'est centré. [ inaudible] est comme flopped sur le ish centré. C' est parce que surveille ça et H1 ici. Ce H1, est celui qui se déclenche pour ma tablette, mais ce H1 en haut ici lui dit de faire pédding levage de 60 pixels. Il l'utilise aussi. Il est centré plus 60 pixels sur le côté. On peut remplacer ça. Dis en fait, je ne veux pas ça. Pédding-gauche, je voudrais être zéro pixels, s'il vous plaît. Pot-virgule à la fin, sauvegardez, vérifiez. Maintenant, on est bons. Impressionnant, donc centré, est une nouvelle taille de police, faites-le glisser, soyez impressionné. Maintenant, nous allons aller dans une autre requête média pour mobile parce que rien ne change beaucoup, sauf que la taille de la police devient plus petite. C' est tout ce qu'on a à faire. Sautons dans Dreamweaver. À l'intérieur de Dreamweaver, nous pourrions taper ce ajouter à nouveau, ou nous pourrions simplement être paresseux et tout sélectionner. requête média, y compris la dernière accolade bouclée, oubliera que tout le temps. Obtenez 'Copier' ou éditez 'Copier'. Je vais mettre quelques retours et en dessous et appuyer sur « Coller », et ce que je veux faire, c'est quelques choses. L' une est que je veux changer cette largeur maximale. Je veux le changer de 768 pour tablette à une taille mobile générique réelle qui est de 400 pixels. Maintenant, ce changement est un peu aussi. Il y a tellement de tailles de téléphone mobile différentes que je trouve 400, c'est une très bonne couverture pour tous, Je pense que les nouveaux iPhones sont 375 pixels de large, mais certains des grands téléphones LG Samsung sont un peu plus large. Je le rends juste un peu plus grand juste pour couvrir tous ces téléphones. Qu' est-ce qu'il me reste ? Je n'ai pas besoin de rembourrage, et je n'ai pas besoin de Ttics Align. Tout ce que je voulais faire était de changer la taille de la police. Je supprime tout cela sauf que je veux changer en raison de 20 pixels. Je devrais sauver. Vérifions dans le navigateur, le bureau, la tablette, le mobile. C'est probablement un peu petit. Mais de ce côté 28 pixels, je pense que c'est ce que je voulais, un peu plus grand. C' est nos requêtes média pour toutes nos tailles différentes. Nous ne faisons que trois dans cette classe pour garder les choses simples et souvent pour les sites plus petits, c'est tout ce que je fais. Certains sites Web vont un peu plus difficile cependant, décrit sept tailles différentes. J' ai sept requêtes médiatiques différentes. C' est à vous de décider, mais j'aime m'en tenir aux bases, à savoir le bureau, la tablette et le mobile. Une chose que je ferais en CSS, et avant de continuer est que nous ajouterons quelques commentaires CSS. Tout cela signifie que je sais parce que je viens de faire ça, ce que cette chose fait et ce que ce gars fait ici, mais j'aimerais ajouter quelques notes à moi-même, à mon futur auto-ordonné pour dire comment je me souviens de ce que ces choses font. Avec votre curseur juste en face de la requête média pour celui-ci ici, ce CSS, est que je vais sur le côté gauche ici, cliquez et maintenez enfoncé celui qui dit « Appliquer un commentaire. C'est un commentaire en CSS. Cliquez dessus. Rien ne se passe grand-chose. Vous pouvez voir qu'il y a une barre oblique et deux actrices, mais à l'intérieur d'ici, si je tape « Tablet » cela signifie juste que cela est ignoré par le navigateur. Personne ne le voit. C' est juste les humains lourds, c'est pour d'autres concepteurs web, c'est pour vous-même et pour l'avenir de savoir de quoi vous parlez. Je vais le copier, l'utiliser ici, et je vais appeler celui-là. Allons dans le fichier, Enregistrer tout, vérifier fonctionne dans le navigateur. Si le vôtre ne va pas vers la tablette, puis vers les tailles mobiles pour ce H1, vous pouvez simplement appuyer sur le bouton de réinitialisation. Faisons tous ça. Vous n'avez pas à, si le vôtre fonctionne, continuez. Je vais le faire. Ainsi, vous pouvez fermer l'index 1, et ouvrir l'index 3 en fait. Cliquez sur celui-là, prévisualisez dans un navigateur, et il devrait regarder exactement comment nous l'avons eu il y a une seconde. Joli. Donc si le tien se trompe, ouvrez celui-ci ici et on se réinitialisera et on revient à cette partie ici. La prochaine partie de notre parapluie responsive, nous avons examiné les requêtes des médias qui sont considérées comme une réactivité. Un autre est des images réactives. Ce qui signifie juste, c'est que si je vérifie l'un de mes derniers exemples ici, cela signifie que lorsque je redimensionne le navigateur, ou qu'il va à différents appareils, l'image est réellement redimensionnée pour mieux s'adapter. Vous pouvez voir cet arrière-plan se déplace ici en haut, et tous ces derniers se redimensionnent ainsi pour s'adapter au mieux à l'espace prévu. Nous allons d'abord regarder cette image d'arrière-plan, puis nous allons regarder ces images en bas ici. Ils sont tous deux légèrement différents dans la façon dont nous l'abordons. Alors replongez dans Dreamweaver, ouvrez nos styles, et ce que nous recherchons, c'est la boîte hero-box. C' est la grande boîte que j'ai là. Regardons celle sur laquelle on travaille. Vous pouvez voir que c'est la grande boîte rose que j'ai déjà créée pour nous. Tout ce que j'ai fait, c'est que je lui ai donné une taille, et je lui ai donné une couleur de fond rose. Mais je vais aussi le faire est, je voudrais lui donner un contexte. Je tape en arrière-plan. Vous pouvez descendre ici à l'image de fond. Ce que je veux dire, c'est que je suis censé utiliser l'URL, appuyez sur « Retour ». C'est le long chemin. Images, j'ai commencé à taper Im, c'est vraiment pratique, ce pré remplir des trucs. Surtout quand vous descendez ici, quand vous pouvez choisir ces images. Pouvez-vous arriver à passer au-dessus d'eux, puis il les prévisualisera pour vous. Il y a encore un moyen plus rapide que Dreamweaver utilise. Je vais annuler tout ça. À vous. Vous pouvez le taper dans ce long chemin. Il y a un très bon code émet une allusion. Dans ce cas est BGI, donc image de fond. Tout ce que j'ai besoin de faire, au lieu de frapper « Retour », ou de cliquer sur l'une de ces options, il suffit de cliquer sur « Tab » sur mon clavier. Vous pouvez le voir plein background-image deux-points, ajouter l'URL dont j'avais besoin, et je suis prêt à taper. Si vous êtes nouveau, vous pouvez taper tout le truc, juste pour vous y habituer. Mais une fois que vous y allez, taper l'image de fond du mot entier et l'URL. Il peut être difficile de s'en souvenir aussi. Donc, je tape juste BGI, et appuyez sur « Tab » sur votre clavier. Ce que nous voulons faire, c'est que je veux récupérer mon image dans mes dossiers d'images, alors j'ai tapé un I. Merci, Dreamweaver. Ensuite, il regarde juste mon dossier d'images et voit les images que j'ai. Je veux celui-là appelé Image de fond. le curseur au-dessus, et c'est celui que je veux en arrière-plan. Même ajouté le point-virgule à la fin. Je vais l'enregistrer et le vérifier dans le navigateur, ça ne va pas marcher. Il est là, mais il n'est pas réactif. Je voulais qu'il puisse s'étirer, remplir l'arrière-plan. Nous le faisons en utilisant une propriété CSS, et c'est une propriété CSS3. Quand les gens parlent de HTML5 et CSS3, ce qu'ils signifient vraiment est juste quelques-unes des nouvelles choses que nous pouvons faire en CSS que nous ne pouvions pas faire auparavant. Avant cela, c'était HTML4 et CSS2, donc c'est juste une version plus récente. Mais ça a l'air assez fantaisiste et intimidant, mais en fait, ce ne sont que de nouvelles choses comme ça. Donc, l'une des nouvelles fonctionnalités CSS est l'arrière-plan, et je veux celui appelé background-size, il y en a, et il y a une option appelée cover. C' est une nouvelle fonctionnalité CSS3 vraiment cool. Ajoutez le point-virgule à la fin, appuyez sur « Enregistrer » dans le navigateur. Maintenant, nous parlons. Maintenant, tout est réactif, et remplit l'espace fourni, devient tout extensible et c'est la fonctionnalité CSS3 appelée couverture et background-size. Nous avons donc dévoilé l'un des secrets du nouveau design web moderne et c'est ce qu'on appelle CSS3. Vous le voyez dans beaucoup de parties, mais c'est vraiment juste de nouvelles choses que nous avons à faire que nous ne pouvions pas faire auparavant dans la nouvelle version de CSS. Maintenant, si ça s'est mal passé et que le tien ne fonctionne pas, ouvre-toi, je vais sauver et fermer celui-là. Ouvrez l'index 4, et cela devrait vous ramener au même endroit, tout comme une petite vérification de réinitialisation dans le navigateur, et oui, cela fonctionne parfaitement. Si le vôtre fonctionne bien, vous n'avez pas besoin de réinitialiser, vous pouvez simplement continuer avec votre index 1 tout au long du cours. Si vous vous perdez, vous pouvez me suivre avec ces petites réinitialisations. La prochaine chose que je veux faire est que je veux construire ces plus petites grilles d'image en bas ici. Donc nous allons devoir mettre dans une boîte pour que ces images entrent dans. Jetons un coup d'oeil à Dreamweaver. Donc, ces boîtes sont généralement appelées Divs. On a déjà une div. Il y en a une qui s'appelle div hero-box, c'est la chose qui était rose, mais qui a maintenant les arrière-plans d'image extensible, donc nous devons en créer un pour nous-mêmes. Donc sous notre hero-box, mettez un retour, et nous allons taper un div. Donc, nous allons dans le crochet, et nous tapons div, et nous lui donnons aussi un nom de classe. La classe est juste le nom unique que nous lui donnons. Toute la syntaxe doit être pré-remplie pour vous. Vous pouvez voir que lorsque je tape le mot, lorsque je tape le mot classe, je peux simplement cliquer dessus avec ma souris, et il remplit la syntaxe, et je vais lui donner un nom. Tu peux lui donner n'importe quel nom. Vous devez juste vous assurer que vous n'utilisez pas de majuscules ou d'espaces. On va appeler notre col, abrégé pour colonne. C' est très courant d'utiliser ce terme. Terminez, nous devons mettre entre crochets, puis ouvrir les derniers crochets, et tout comme dans H1, nous mettons cette barre oblique en avant, et elle finit pour nous. Donc c'est exactement ce que la boîte hero-box a été faite. Nous venons de faire notre propre vision appelée col. Maintenant, si vous ajoutez un peu plus avancé avec HTML, et que vous êtes comme, mec, c'est un long chemin de le faire, j'aimerais qu'il y ait un moyen plus court. Il y a, si vous tapez juste point col. Point au début de cela fait simplement référence à ce qu'il s'agit d'un nom de classe, et si vous appuyez sur « Tab » au lieu de retourner, il suppose juste que vous voulez dire une classe div avec col et il remplit du tout, et donc super rapide et facile, ou vous pouvez juste tapez-le dans le long chemin si vous êtes nouveau juste pour vous habituer à la syntaxe. Quoi qu'il en soit, Dreamweaver c'est génial pour aider. A l'intérieur de ça, j'aimerais mettre à mon image. J' ai fait la boîte, mais la boîte ne fait rien pour l'instant. C' est juste une boîte vide. Je veux mettre une image à l'intérieur. La façon de le faire, le long chemin. Je ne veux pas que tu le fasses de cette façon, parce que c'est un long chemin. Nous tapons en crochet carré et tapons en IMG, puis nous tapons en SRC. Ensuite, à l'intérieur de la SRC, nous allons et nous trouvons notre image puis nous ajoutons tous les textes et il y a toutes sortes d'autres choses que nous devons faire juste pour mettre dans une simple vieille image. Vous pouvez le voir là-haut, je l'ai déjà fait. Donc image, SRC, il y a l'image alors nous devons mettre dans tout le texte. C' est un peu long. Donc, je vais l'annuler, et ce que je vais faire est d'utiliser notre super secret, Dreamweaver awesomeness et juste taper IMG hit « Tab », Entrée, et vous pouvez voir qu'il met toutes ces choses là dedans pour moi. Maintenant à l'intérieur de la source, d' où vient mon image ? Je tape mon dossier I pour images. Merci Dreamweaver. Ensuite, il regarde mon dossier d'images et dit, tu veux dire ça ? Je dis, oui, je veux dire que c'est là, image 1 s'il vous plaît. Appuyez sur « Sauvegarder tout », et allons sauter dans notre navigateur, vérifier, et il est là dedans. Il n'est pas encore réactif, parce que nous venons de mettre une image HTML, nous n'avons rien fait d'autre. Mais c'est la première partie. Nous mettons à notre image. Maintenant, nous devons le rendre réactif, et nous le faisons en CSS. Regardons un peu. Nous le faisons d'une manière légèrement différente de la première façon que nous l'avons fait, parce que la première option nous voulions que ce soit une image de fond. Rappelez-vous ce gars ici, a besoin d'être un arrière-plan, ça fonctionne légèrement différemment. Donc, ce que nous voulons faire est de sauter à notre styles.css, puis en bas, je veux mettre dans le style pour la vue du bureau, pas dans les tablettes. J' ai donc mis quelques retours sous mon haut H1, mais avant la tablette. Maintenant j'espère que vous êtes prêt, nous allons apprendre quelque chose de fantaisie appelé un sélecteur de composé. C' est un sélecteur, notre H1. C' était aussi un sélecteur, ce sont tous des sélecteurs. Donc ce que j'aimerais faire, c'est faire un sélecteur de composé. J' aimerais le faire aux images. Je veux donc rendre toutes les images réactives, mais pas toutes les images. Je veux les images qui ne sont qu'à l'intérieur de nos colonnes. Donc, c'est ce qu'on appelle un composé sélectionné. Cela signifie simplement des images, mais pas toutes les images sur chaque page et chaque site Web. Juste les images qui sont à l'intérieur de ce truc qu'on appelle col. Souviens-toi qu'on l'appelait un cours appelé col. Maintenant, en CSS, vous vous référez aux classes en ayant un peu d'arrêt complet au début. Les choses que vous écrivez vous-même qui fait de nulle part ont un peu d'arrêts complets à l'avant. Ceux qui préexistent en HTML ne le font souvent pas. Vous pouvez voir celui-là, j'ai inventé ce truc appelé Hero-box, donc il a un arrêt complet à l'avant. Mais comme H1, je n'ai pas inventé, c'est juste un sélecteur HTML pré-existant, donc nous ne l'avons pas. Donc les images qui sont à l'intérieur du col, ce que j'aimerais faire. Je vais mettre mes accolades et revenir. Pour le rendre réactif, ce que j'aimerais faire, c'est que j'aimerais en faire une largeur. Juste tapé dans WI, descends, et je veux faire une largeur de 100 pour cent, n'oubliez pas le point-virgule à la fin. Maintenant que cela fait la plupart de cela, mais il y a quelques autres choses pour le rendre un peu mieux supporté dans tous les navigateurs, mettons en hauteur. La hauteur doit être un point-virgule automatique. La dernière chose que nous devons faire est quelque chose appelé affichage, et bloc point-virgule. Il suffit de les faire parce qu'ils aideront tous les navigateurs à traiter avec des images réactives. C' est le gars qui fait la majeure partie du travail, avec 100 %. Jetons un peu un coup d'oeil dans un navigateur. Il est là. Il est une image réactive si je les réduit, vous pouvez voir, il devient plus petit avec le navigateur et devient plus grand comme un navigateur devient plus grand. Ce n'est pas exactement ce qu'on veut. On va devoir le faire arriver à une certaine hauteur et pas plus grand. Mais c'est ainsi que les images réactives sont faites. La chose cool à propos de l'utilisation d'un sélecteur composé, où nous avons dit des images à l'intérieur des colonnes, ce n'est pas déconner avec cette image ici, qui est mon logo ou cette image en arrière-plan. Il s'agit juste des images qui sont dans ma colonne. Avant d'aller et de lui donner une largeur correspondant à notre maquette, ce que nous allons faire est dupliqué plusieurs fois pour obtenir toutes les images qu'ils contiennent. Retournez dans Dreamweaver et accédez à notre code source. Le code source est HTML. Ceci est appelé un code source à la place et ce que nous voulons faire est que nous voulons dupliquer ce col, donc je veux que six d'entre eux correspondent à ma maquette ici. Vous pouvez voir environ six de ces boîtes. Ce que nous allons faire, c'est copier et coller toute la ligne. La façon la plus simple de le faire dans Dreamweaver est de cliquer n'importe où sur votre image, et de cliquer sur « Control D » sur un PC ou sur « Command D » sur un Mac. Vous pouvez voir qu'il fait juste un duplicata, parce que ce que je veux n'est pas seulement un duplicata de l'image, mais aussi la colonne à l'extérieur. Je vais cliquer ici, Contrôle D, on en veut six au total. Alors je veux que tu passes par l'image 1, il y a une image 2. Ici, il y a une image 3, vous devez cliquer dessus, cliquer en arrière en 4. Vous pouvez voir que c'est la prévisualisation pour moi, ou quelque chose dans Dreamweaver 5 et 6. Impressionnant. Appuyez sur « Enregistrer », prévisualisez-le dans un navigateur. Maintenant, j'ai la première image réactive, mais maintenant j'en ai toutes. On est prêts à partir. Retournez dans Dreamweaver, appuyez sur « Enregistrer ». Si le tien fonctionne, génial, continuez. Si le vôtre ne l'est pas, et que cela ne fonctionne pas totalement, fermez celui que nous avons ouvert, et ouvrez l'index 5. Cela nous ramènera, prévisualisez-le sur un navigateur, retour à l'endroit où nous sommes maintenant. 7. Ajouter une réactivité: La prochaine chose que nous devons faire est si nous regardons notre maquette, vous pouvez le voir en fait, vous pouvez voir que cette image est seulement si grande, mais dans notre maquette actuelle, c'est une restriction à toute la taille. Ce qu'on doit faire, c'est le conteneur dans lequel il est, rappelez-vous qu'on l'a appelé une classe de col. On doit dire : « Hey col, tu dois être 33 pour cent, pas 100 pour cent comme tu l'es en ce moment ». 33% constituent notre bloc, 33,3, alors allons voir comment faire ça maintenant, replonger dans Dreamweaver. Dans Dreamweaver, passons dans les styles et ce que je veux faire dans mon affichage de bureau, pas sur tablette. Trouve la tablette juste devant lui, je vais faire quelques retours. Je vais mettre un .col. J' aimerais le col ici, les étalonnages. J' aimerais que vous soyez une largeur et je vais utiliser un pourcentage de 33,3 pour cent. Puis le point-virgule à la fin. Assurez-vous que vous avez la syntaxe correcte. Souvent, quand j'enseigne aux gens, 30 trucs de largeur avec 33,3 pour cent. Assurez-vous juste qu'il ressemble à la mienne frappée « Save » ça va marcher. Prenons ça, navigateur. Dit travailler, il y avait 33,3 pour cent et merci beaucoup, mais par défaut ils empilent les uns sur les autres. Ils bloquent sur le dessus. Nous pouvons remplacer ça par dessous, l'appeler, mettre un écrit juste en dessous de la largeur et dire flotter mes amis, flotter vers la gauche, point-virgule, enregistrer, prévisualiser et maintenant ils sont tous collés l'un à côté de l'autre. Oh mon Dieu, tu es génial. Ils sont 33,3 % peu importe mon point de vue. C' est tout pour la vue de bureau, nous ajouterons un peu de remplissage plus tard, mais c'est comment redimensionner notre pour notre vue de bureau. Bien fait ensuite que nous devons faire est que vous pouvez voir sur ma maquette ici, c'est en fait 33,3 pour cent sur le bureau sur une tablette, ça prend 50 pour cent, non ? Quand il s'agit d'un mobile, c'est à 100 %. C' est ce qu'on va faire maintenant. Dans Dreamweaver, ce que nous allons faire dans la tablette ici, dessous de droite avant la fermeture parce que vous pouvez voir Dreamweaver utilement met en évidence. Vous pouvez voir si je clique sur l'un de ces à nouveau et vous pouvez voir que c'est le rapa, donc nous voulons nous assurer que tout reste dans ces deux étalonnages sous chacun. Mais avant cette clôture, on va dire que j'aimerais. Les étalonnages retournent. J' aimerais que ce soit une largeur, parce que tout comme on l'a fait là-haut. Nous allons dire que la largeur de dans notre cas est de 50 pour cent pour le type un point-virgule à la fin. Je n'ai pas besoin de dire flotteur à gauche déjà, parce que c'est l'un des premiers le dit déjà. Nous n'avons qu'à le dire qu'une fois. Mais quand il s'agit de largeur, nous voulons dire en fait tablette remplacer le 3.3 et devenir 50 pour cent. Regardons un peu. 33.3 pour cent manifestant qui a dû dire vers le bas à la tablette 3D façon. Maintenant, il est terrasse va comme nous voulions dans Photoshop et il est 50 pour cent de travers. Maintenant, je veux que vous arrêtiez ceci maintenant et que vous voyez si vous pouvez aller et le faire pour mobile tout seul. Pause, vas-y, fais-le, je le fais ici. Si on ne vous offre pas le d est allons-y et faisons-le ensemble ou s'il a mal tourné, avec le mien. Si le vôtre ne l'a pas fait et que vous l'avez fait et que vous le présentez comme un travail, soyez très fier de vous-même, vous avez appris beaucoup de design web réactif en très peu de temps. Tu es génial. Ce que je vais faire en mobile, je veux utiliser le même col et étalonnages. Je vais juste le dire avec mes amis de vous avec 100 %. Rappelez-vous, n'oubliez pas le point-virgule, enregistrez-le et prévisualisez dans le navigateur. La tablette est 50, le mobile est 100 pour cent. Nous sommes concepteur web réactif du nouveau siècle. Je suis excité, mais j'espère que vous êtes un peu pompé aussi parce que nous apprenons vraiment les fondamentaux de la conception web réactive. Tout le reste nous allons chatouiller et nous allons faire du travail, mais nous avons déjà fait les fondations réelles et ces fondations sont des requêtes des médias, d'accord ? Ensuite, nous avons examiné les milieux réactifs. On l'a fait pour ici, un contexte. Rappelez-vous que nous avons fait une image d'arrière-plan et nous utilisons cette nouvelle option CSS3 appelée couverture. C' était génial. Mais alors nous voulions utiliser un peu différent non pas comme fond, mais juste comme une vieille image régulière. Ce que nous devions faire, c'est apprendre un sélecteur de composé. Mais vraiment la partie principale était ce où nous disons avec 100 pour cent. La hauteur de l'auto et le bloc d'affichage, c' est-à-dire des images réactives. La dernière chose que nous venons d'apprendre, c'est que nous avons dit : « Hey colonne dans le bureau, nous voulons que vous ayez cette largeur. Mais quand j'utilise ma requête midi fantaisie, je veux que vous soyez 50 pour cent ». Fondamentalement, tous les autres changements réactifs que nous allons faire, je vais être juste des itérations sur le faire. Choisir une requête immédiate, choisir ce qui contrôle la chose que nous voulons changer, puis juste faire quelques changements selon que nous sommes sur tablette ou mobile. Si le vôtre n'a toujours pas fonctionné et que ça ne marche pas. Faisons une réinitialisation et passons à autre chose. Fermons cet index 5 et ouvrons l'index 6, en approchant de la fin. Espérons que si je prévisualise et un navigateur maintenant, tout se réveille 100 pour cent. Comprimés, 30 pour cent, 33. 3 % pour les ordinateurs de bureau. 8. Compléter notre site: La prochaine chose que j'aimerais faire est que je veux ce qui me gêne vraiment, c'est qu'il n'y a pas de lacunes entre les deux ici alors que dans mon design il y a de beaux écarts entre tout. Allons éditer parce que je suis en marge de quart, dans Dreamweaver ici nous allons aller à notre styles.css et ce que nous voulons le faire est autour de la colonne. Nous avons trois colonnes maintenant, il y a cette première, qui est ma version de bureau. Le haut, il est également appelé le global, la version supérieure puis ici ma tablette il y a une autre colonne et il y a une autre colonne. Ce que je vais faire, c'est en haut et ce que je vais dire est dans cette colonne, j'aimerais que vous ayez une marge en minuscules, marge de 1%. Ça va mettre 1 pour cent à l'extérieur de chaque colonne et ça va nous causer un petit problème initial. Pour le sauver, assurez-vous que le point-virgule à la fin, vous en avez marre que je dise ça, n'est-ce pas ? Sautons dans le navigateur et cela fonctionne. Il y a une frontière autour de 1 pour cent mais parce qu'il y a 1 pour cent là-bas, 33,3 pour cent ici, plus 1 pour cent plus 1 pour cent plus il n'y a tout simplement pas assez de place. Tout cela équivaut à plus de 100 pour cent ce qu'on ne peut pas faire. Chaque fois que vous ajoutez une marge de 1 pour cent, vous devez la réduire de la largeur. Il y a 1 pour cent de chaque côté, vous pouvez voir qu'il y a 1 pour cent là-bas, 1 pour cent là-bas, donc on veut moins 2, pour même, donc c'est 31,3 pour cent. Allons frapper sauver, vérifier et maintenant il a assez de place pour s'adapter. Cool. Nous devons faire la même chose pour tous parce que si nous passons à la tablette, fait la même chose. Pas assez de place donc ce que nous devons faire est de moins 2 sur notre tablette. Allons à 48 pour cent, vérifions-le, nous pouvons trouver tous les points. Maintenant, passons au mobile. Mobile fonctionne toujours, je ne sais pas pourquoi. Ça ne devrait pas. Nous allons descendre à 98 pour cent, donc tous s'adaptent et nous pouvons voir les bordures autour des bords. Beau travail. Maintenant, si le tien est comme le mien et que vous pouvez voir 90 là-haut, je pense que c'est juste parce que j'ai une meilleure version de Dreamweaver, mis à zéro et qu'il est parti. Ça m'arrive un peu en ce moment, mais je suis sûr que c'est juste un bug sur ma machine. Une autre chose que vous pourriez regarder dans les bogues moi aussi est parce que nous avons mis une marge autour de cela, ne s'alignent plus avec cela et cela devient un peu plus grand du haut donc nous avons juste besoin d'ajouter une bordure de 1 pour cent à cette div étiquette en haut ici. Tu te souviens de ce qu'on appelait ça ? Ça s'appelait la boîte de héros. Trouvons la boîte de héros ici, il est là et toi, mon ami, obtiens une marge aussi. Une marge de 1 pour cent, point-virgule, économisez. Maintenant, tout est un peu plus agréable, il y a une marge autour de lui aussi. Parce que nous ne lui avons pas donné de largeur, il n'a pas besoin d'être moins de tout ce que vous pouvez voir, il n'a pas de largeur nulle part, donc s'il l'a fait, vous devriez moins comme nous l'avons fait , mais nous ne le faisons pas est très bien. Last but not least, ce que je veux faire est de regarder la navigation. Vous pouvez voir ici sur ma maquette il est coincé côte à côte ici sur le bureau, mais sur tablette et mobile ils sont au-dessus de l'autre. En ce moment, ils se collent tous les uns sur les autres. Ce que j'aimerais faire, c'est que je voudrais dire en vue de bureau, ma navigation, j'ai déjà fait une classe, une classe composée ici pour stocker ma navigation juste pour gagner du temps au début. Ce que j'aimerais faire, c'est que vous cherchez celui qui dit nav ul li, il y a ma liste pour ma navigation. Ce que j'aimerais dire, c'est que j'aimerais que vous affichiez et que vous fassiez celui-ci appelé inline-block. Ça veut dire qu'ils vont rester l'un à côté de l'autre, n' oubliez pas le point-virgule, appuyez sur sauver, vérifiez. Impressionnant. Maintenant, le problème est quand il descend à la tablette, il reste aussi le bloc inline-block et il devient un peu désordonné et il n'y a pas de place pour cela avec un logo donc il colle en dessous donc nous devons changer quand il arrive à la tablette, à cela empilés sur l'autre méthode que nous avions. Tout ce que nous avons à faire est de trouver nav ul li, ici sur tablette, qui n'existe pas. Ce que nous allons faire est en dessous de la colonne que je vais mettre dans celui-ci appelé nav ul li, blaces de clic et je voudrais dire quand il arrive ici cependant, j'aimerais que vous affichiez maintenant bloc et cela signifie qu'ils vont empiler au-dessus de chacun. Appuyez sur Enregistrer pour prévisualiser sur le navigateur, génial. Bureau empilé en ligne et ici bloc empilé, même avec mobile. 9. Conclusion: Mes amis, ça va être la fin de celui-ci. Nous avons couvert beaucoup de choses dans notre temps ensemble, concentrant principalement sur la conception web réactive. Pour récapituler, la conception web responsive est un terme générique qui couvre quelques choses différentes que nous faisons lorsque nous construisons un site Web. Les principales sont les requêtes de médias, où nous les faisons déclencher à différentes tailles de navigateurs. Dans ces requêtes média, nous pouvons faire des choses amusantes avec des choses comme les largeurs de colonne, pour ajuster les tailles et changer des choses comme les tailles de police et le positionnement. Aussi réactif était nos images, rappelez-vous que nous les avons fait une largeur de 100 pour cent pour les images. C' est des images réactives. Nous avons fait des images d'arrière-plan réactives, où nous avons fait notre image d'arrière-plan ainsi que cette couverture de taille d'arrière-plan. Ainsi, vous pouvez voir quand il s'agit de design web responsive, beaucoup de travail est fait dans notre CSS et HTML est gardé agréable et propre. Il y a très peu que nous y avons réellement ajouté, mais beaucoup de fonctionnalités ont été faites en utilisant notre CSS. Très bien, à plus tard. Passez une belle journée.