1
00:00:00,420 --> 00:00:06,550
Bienvenue dans cette leçon, nous allons terminer le style de la page de spectacle du camping à la fin de la dernière vidéo.

2
00:00:06,630 --> 00:00:08,540
J'ai mentionné certains des changements que nous devons apporter.

3
00:00:08,640 --> 00:00:10,970
Cela ne peut pas être traité avec bootstrap pur.

4
00:00:10,980 --> 00:00:13,050
Nous devons ajouter des styles personnalisés.

5
00:00:13,050 --> 00:00:18,570
Donc nous devons changer la largeur de cette image ici afin qu'elle prenne jusqu'à 100 pour cent de la vignette.

6
00:00:18,750 --> 00:00:21,050
Nous voulions ajouter un peu de remplissage ici.

7
00:00:21,120 --> 00:00:25,880
C'est ce qu'il devrait ressembler où nous avons rembourrage et vous pouvez voir l'image prend tout le conteneur.

8
00:00:26,280 --> 00:00:31,810
Et pour accomplir cela nous pourrions aller dans le montré à chaque oui et ajouter une étiquette de style vers le haut ici.

9
00:00:32,280 --> 00:00:34,050
Mais ce n'est pas vraiment une bonne idée.

10
00:00:34,050 --> 00:00:42,960
Donc, au lieu de cela nous allons ajouter dans notre première feuille de style personnalisé et pour faire ce travail, nous allons faire un répertoire public comme nous l'avons fait dans une leçon précédente.

11
00:00:43,110 --> 00:00:48,790
Donc je vais rendre le répertoire public et ensuite je ferai un autre répertoire dans le public.

12
00:00:48,870 --> 00:01:10,000
Celui-ci sera appelé les feuilles de style ainsi public slash feuilles de style et nous aurons un autre éventuellement pour notre javascript est le front et Javascript et nous allons frapper entrer et puis nous allons faire un seul fichier à l'intérieur de stylesheets public sosh style Feuilles slash et nous allons appeler cela signifie Dotsie SS Tout comme ça.

13
00:01:10,470 --> 00:01:11,260
D'ACCORD.

14
00:01:11,520 --> 00:01:13,040
Maintenant, nous voulons ouvrir cela.

15
00:01:13,380 --> 00:01:28,140
Donc, nous allons ouvrir ce fichier vers le haut stylesheets gutsiest principal nous et commençons par ajouter quelque chose de vraiment évident dans ici comme le réglage de la couleur d'arrière-plan pour le corps d'être violet et enregistrer et puis nous devons aller de l'avant et obtenir ce connecté.

16
00:01:28,140 --> 00:01:36,790
Donc, dans le cas de l'application, nous devons ajouter une ligne ici où nous faisons une application point utiliser Express qui est statique.

17
00:01:37,380 --> 00:01:44,380
Et puis ce que nous avons fait la dernière fois a été juste ajouter en public, mais il ya effectivement une façon légèrement meilleure de le faire que je ne voulais pas montrer tout de suite.

18
00:01:44,400 --> 00:01:57,050
Mais je veux le montrer maintenant tout ce que nous avons à faire est d'ajouter un underscore underscore cher nom nom de répertoire plus slash public dir name fait référence au répertoire que ce script était en cours d'exécution.

19
00:01:57,180 --> 00:01:58,630
Alors laissez-moi vous montrer ce que cela ressemble.

20
00:01:58,800 --> 00:02:10,190
Si je viens de faire une console, mais de souligner souligner le soulignement à votre nom comme ça et enregistrer et redémarrer le serveur.

21
00:02:12,000 --> 00:02:13,440
Remarquez ce que je reçois ici.

22
00:02:13,530 --> 00:02:19,560
C'est le nom du répertoire de l'espace de travail du chemin entier luxuriante de camp slash v 5.

23
00:02:19,710 --> 00:02:30,390
Donc, en ajoutant dir name plus slash public, nous sommes juste être plus sûr, car si potentiellement en quelque sorte cela a changé le répertoire actuel obtenu bizarre quelque chose s'est passé que nous n'attendions pas.

24
00:02:30,450 --> 00:02:36,650
Qui, espérons-le, ne fera jamais mais si elle ne faire votre nom sera toujours le répertoire dans lequel le script vit.

25
00:02:36,900 --> 00:02:41,860
Donc, nous sommes juste plus en sécurité et ajouter slash public et c'est juste la façon plus conventionnelle de le faire en.

26
00:02:42,060 --> 00:02:43,820
Nous ne verrons pas de différence du tout.

27
00:02:43,860 --> 00:02:44,920
Nous allons donc économiser.

28
00:02:44,930 --> 00:02:50,140
Nous pouvons nous débarrasser de cela et ce que nous avons fait est ajouté dans notre esprit simple.

29
00:02:50,190 --> 00:02:52,390
SS Mais nous ne l'avons pas encore lié.

30
00:02:52,530 --> 00:02:54,500
Nous avons donc servi l'annuaire public.

31
00:02:54,600 --> 00:03:01,540
Nous servons maintenant tout dans ce répertoire qui est vraiment juste un seul dossier stylesheets et un seul fichier peut nous finir.

32
00:03:01,620 --> 00:03:05,510
Mais maintenant let's go lien vers ce fichier et nous allons le faire sur le fichier d'en-tête.

33
00:03:05,580 --> 00:03:14,920
Donc, je vais à C9 vues slash Parshall slash hetter et puis en haut de la tête après bootstrap.

34
00:03:14,980 --> 00:03:31,330
Je vais ajouter une autre balise de lien et celle-ci va être H ref est égale à slash stylesheets slash C principale Ss et puis nous allons également ajouter en ligne ici pour être feuille de style.

35
00:03:31,950 --> 00:03:32,500
D'ACCORD.

36
00:03:32,850 --> 00:03:38,340
Nous avons maintenant lié, je l'espère, notre feuille de style que nous servons maintenant dans l'annuaire public.

37
00:03:38,340 --> 00:03:40,680
Et testons-le s'il fonctionnait.

38
00:03:40,740 --> 00:03:45,350
Il sera sur chaque page unique parce que chaque page qui a l'en-tête partielle inclus.

39
00:03:45,630 --> 00:03:46,380
Examinons cela.

40
00:03:46,380 --> 00:03:48,450
Nous allons simplement à notre page de destination.

41
00:03:48,450 --> 00:03:48,980
Voilà.

42
00:03:48,990 --> 00:03:56,510
C'est tout pourpre et si nous allons voir notre terrain de camping Il ya aussi un fond pourpre totalement jusqu'à vous si vous voulez le garder comme pourpre.

43
00:03:56,610 --> 00:03:57,620
Je vais le changer.

44
00:03:57,750 --> 00:04:03,210
Mais je vais ajouter dans le style que nous avons gagné et ces styles vont affecter les vignettes.

45
00:04:03,210 --> 00:04:07,050
Ce sont donc les vignettes ainsi que cette vignette.

46
00:04:07,080 --> 00:04:18,000
Nous allons faire en sorte que l'image prenne 100 pour cent de la largeur de sorte que sur la page de spectacle et la page d'index que nous voulons que cela se produise afin que nous puissions revenir en arrière et changer et upsy évaluer.

47
00:04:18,180 --> 00:04:21,750
Nous allons donc commencer par sélectionner toutes les images à l'intérieur des vignettes.

48
00:04:21,900 --> 00:04:25,300
Nous avons donc besoin d'une vignette parce que c'est une classe d'amorçage.

49
00:04:25,550 --> 00:04:31,290
Et puis balise d'image avec l'espace entre eux qui est tous les balises d'image à l'intérieur des vignettes.

50
00:04:31,290 --> 00:04:36,180
Et puis, nous voulons simplement définir la largeur à 100 pour cent juste comme ça.

51
00:04:36,300 --> 00:04:43,510
Et si nous sauvegardons et rafraîchissons et allons à une page d'exposition, vous pouvez voir notre image prend maintenant jusqu'à 100 pour cent de cette vignette.

52
00:04:43,860 --> 00:04:51,820
Ensuite, nous avons besoin de résoudre ce problème de rembourrage qui est vraiment facile à fixer ainsi où nous voulons nous débarrasser de cet espacement pour faire que nous devons sélectionner la vignette elle-même.

53
00:04:51,870 --> 00:04:56,350
La vignette div et se débarrasser du rembourrage et il suffit de le mettre à zéro.

54
00:04:56,490 --> 00:05:01,580
So Dot thumbnail rembourrage 0.

55
00:05:01,890 --> 00:05:02,930
Enregistrer.

56
00:05:03,120 --> 00:05:05,260
Gardez l'œil sur ce rembourrage.

57
00:05:05,280 --> 00:05:06,130
Maintenant il est parti.

58
00:05:06,510 --> 00:05:11,230
Et si nous retournons à notre page d'index, vous pouvez voir que ceux-ci sont également maintenant vider.

59
00:05:11,280 --> 00:05:12,980
Nous n'avons pas de rembourrage là non plus.

60
00:05:13,320 --> 00:05:17,100
Personnellement, je préfère sans rembourrage ici sans espace entre les deux.

61
00:05:17,250 --> 00:05:27,910
Mais c'est une question de préférence personnelle et si vous ne voulez que l'espace de retour là-bas ce que vous pouvez faire ne s'applique pas ces styles ce style en particulier à chaque vignette unique.

62
00:05:27,990 --> 00:05:39,280
Au lieu de cela vous pourriez donner sur notre page d'exposition vous pourriez donner cette vignette juste ici un ID ou une classe spéciale et alors vous appliqueriez seulement ce rembourrage zéro à cette classe ou à deux cette identification.

63
00:05:39,480 --> 00:05:45,380
Mais je vais le faire à tous et puis l'autre question que nous devons résoudre est le rembourrage ici.

64
00:05:45,780 --> 00:05:55,560
Donc, à l'intérieur de cette légende ful si nous l'inspecter, c'est la div que nous avons créé peut voir ici, c'est une légende div classe pleine.

65
00:05:55,770 --> 00:06:00,870
Nous voulons ajouter un peu de remplissage là et le nombre que nous avons décidé dans la dernière vidéo était de 9 pixels.

66
00:06:00,930 --> 00:06:02,830
Permettez-moi donc de fermer le con ..

67
00:06:03,030 --> 00:06:11,100
Retournez ici et je vais juste sélectionner plutôt que tous les poulains de légende Je vais seulement sélectionner les pliages de légende à l'intérieur d'une vignette.

68
00:06:11,220 --> 00:06:23,130
So Dot miniature espace légende complète et nous allons leur donner rembourrage de neuf pixels tout comme ceci sauver nous allons rafraîchir la page.

69
00:06:23,130 --> 00:06:23,750
Voilà.

70
00:06:23,760 --> 00:06:26,130
Nous obtenons cet espacement que nous recherchons.

71
00:06:26,130 --> 00:06:26,390
D'accord.

72
00:06:26,400 --> 00:06:27,610
C'est tout ce que je voulais faire.

73
00:06:27,780 --> 00:06:29,910
Reprenons rapidement ce que nous avons accompli.

74
00:06:29,910 --> 00:06:43,560
Nous avons fait un nouveau fichier SS nazi et nous avons mis cela à l'intérieur du répertoire public à l'intérieur des feuilles de style et finalement ils auront plus de feuilles de style un pour la page d'atterrissage en particulier et nous aurons également javascript qui vont ici aussi.

75
00:06:43,680 --> 00:06:50,410
Et puis pour utiliser réellement le répertoire public, nous devons interagir Oui dire express pour servir l'annuaire public.

76
00:06:50,520 --> 00:06:56,660
Et je vous ai montré ce soulignement souligner votre nom et la dernière chose est que nous l'avons inclus sur le fichier d'en-tête.