1
00:00:00,630 --> 00:00:05,120
Dans cette vidéo, nous allons créer le portfolio de ce photographe à partir de zéro.

2
00:00:05,310 --> 00:00:11,550
Et d'habitude, je vous demanderais d'essayer de le faire par vous-même et de vous donner une vidéo de solution à la suite de cela.

3
00:00:11,640 --> 00:00:14,050
Cependant, cette fois, c'est un code délibéré.

4
00:00:14,070 --> 00:00:20,650
Donc, je voudrais que vous essayiez de coder le long et si vous préférez, vous pouvez le regarder une fois à travers et ensuite le code le long de la prochaine fois.

5
00:00:20,850 --> 00:00:26,940
Mais le but ici est que nous allons le faire ensemble et il ya deux autres choses que nous voulons sortir de cela.

6
00:00:26,940 --> 00:00:37,190
La première est qu'il ya une nouvelle propriété que je vais montrer appelée float et la deuxième chose est que je veux juste que vous obteniez un peu d'expérience construire quelque chose dont vous pouvez être un peu fière.

7
00:00:37,200 --> 00:00:43,160
Cela ressemble un peu mieux que certaines des choses simples qui sont juste vraiment brillantes couleurs horribles que nous avons fait jusqu'à présent.

8
00:00:43,170 --> 00:00:47,210
Il s'agit donc d'un blog photo vraiment minimal que nous allons faire.

9
00:00:47,280 --> 00:00:49,160
Alors, commençons.

10
00:00:49,230 --> 00:00:50,610
Ouvrez sublime.

11
00:00:50,880 --> 00:00:54,330
J'ai un seul fichier appelé photo grille que HMO.

12
00:00:54,960 --> 00:01:00,480
Je vais d'abord vous montrer l'image ou bien que nous travaillons avec.

13
00:01:00,480 --> 00:01:08,390
Donc, ce sont des images neuf images trois images chacune de trois photographes différents que j'ai trouvé sur Flickr.

14
00:01:08,700 --> 00:01:10,920
Toutes les photos sont sous licence Creative Commons.

15
00:01:10,920 --> 00:01:13,030
Vous pouvez obtenir la licence ici.

16
00:01:13,050 --> 00:01:46,750
Donc, avant de faire quelque chose avec ces images que vous URLs, je suis en fait va se débarrasser d'eux et je vais ajouter dans mon vieux squelette ad-Din dans photo blog et je vais faire une démonstration rapide afin que vous don 'T devoir coder avec cette partie quand je ajouter à divs un qui dit bonjour et un qui dit au revoir et je vais les sauver et puis je vais ajouter ma feuille de style dans lequel j'appelle photos de la SS et puis ici je vais à mon style divs.

17
00:01:46,770 --> 00:01:53,890
Alors je vais leur donner un I.D. Juste l'appeler un.

18
00:01:54,270 --> 00:02:27,630
Et encore une fois c'est juste pour démontrer quelque chose et puis à un ici je vais sélectionner un et deux et tout ce que je vais faire, c'est juste leur donner une couleur de fond différente rouge et puis couleur de fond violet et puis je suis Va donner à tous les deux tous les divs et une largeur de 100 pixels.

19
00:02:27,630 --> 00:02:32,430
Donc, quand je fais cela, je l'ouvre dans le navigateur.

20
00:02:33,540 --> 00:02:36,970
Nous avons deux divs l'un après l'autre.

21
00:02:36,990 --> 00:02:39,020
Rappelez-vous que si nous inspectons.

22
00:02:39,480 --> 00:02:44,280
Ils sont fondamentalement mis en place afin qu'ils prennent leur propre ligne leur élément de niveau bloc.

23
00:02:44,280 --> 00:02:54,490
Donc, si je ne veux pas que cela arrive, ce que nous allons faire pour la grille d'image, nous voulons que nos images forment une grille ou plusieurs sont sur la même ligne.

24
00:02:54,540 --> 00:03:01,690
Et si oui, si je veux faire cela avec divs, j'ai besoin d'utiliser une propriété appelée float ou c'est une façon que je peux l'accomplir.

25
00:03:01,740 --> 00:03:06,780
Donc, ici, tout ce que je fais c'est flotter en sécurité à gauche et ce que cela va faire.

26
00:03:06,780 --> 00:03:11,390
Il prendra les éléments tous les divs hors du flux normal du document.

27
00:03:11,580 --> 00:03:14,730
Donc, il ya des piles actuellement sur chacun sur des lignes séparées.

28
00:03:15,000 --> 00:03:23,090
Et ce qui se passera, c'est qu'ils flotteront vers la gauche pour y penser comme la gravité s'éloignant presque dans notre document.

29
00:03:23,280 --> 00:03:26,380
Et donc cette div va flotter et pousser vers la gauche.

30
00:03:26,400 --> 00:03:27,580
Contre celui-ci.

31
00:03:27,990 --> 00:03:32,200
Donc, si j'étais frais ici, vous pouvez voir qu'ils sont maintenant sur la même ligne.

32
00:03:32,280 --> 00:03:41,840
Donc, nous allons utiliser ce principe lorsque nous utilisons des images afin que nous puissions obtenir des images d'aller fondamentalement les uns contre les autres et de former une grille.

33
00:03:41,970 --> 00:03:49,910
Donc je vais me débarrasser de tout cela maintenant et se débarrasser de l'appareil que nous avons et je vais ajouter à notre image comme ça.

34
00:03:50,280 --> 00:03:57,040
Donc je vais faire ce plein écran et collez simplement dans ces liens d'image qui sont dans ce fichier inclus avec cette vidéo.

35
00:03:57,810 --> 00:04:08,230
Et plutôt que de faire neuf balises d'image comme celle-ci où je fais une balise d'image, puis vous copiez autour et le coller en neuf fois ce qui devrait être très lent.

36
00:04:08,490 --> 00:04:22,730
Je vais utiliser un peu de magie sublime ici où je suis en utilisant la commande cliquez sur pour sélectionner le début de chaque ligne et puis je vais juste pour saisir image source égales et puis passer à la fin de la ligne.

37
00:04:22,800 --> 00:04:35,380
Donc, j'ai utilisé une commande de flèche à droite de la flèche direction gauche, il prend à la commande de début droit va à la fin et puis je vais terminer avec la citation et puis le support de fermeture.

38
00:04:35,400 --> 00:04:40,550
Donc, c'était une façon très simple et rapide d'inclure tous ceux que vous êtes Elfes comme balises d'image.

39
00:04:40,920 --> 00:04:46,340
Donc, si je l'enregistre et ils vont au navigateur, vous verrez quand je rafraîchir.

40
00:04:46,530 --> 00:04:47,960
Nous avons maintenant neuf images.

41
00:04:48,090 --> 00:04:49,680
Bien sûr, ne sont pas intégrés.

42
00:04:49,890 --> 00:04:53,890
Ils prennent beaucoup de place.

43
00:04:54,060 --> 00:05:01,230
Donc, ce que nous allons faire maintenant est d'aller à notre feuille de style et de sélectionner toutes les images.

44
00:05:01,230 --> 00:05:05,520
Et la première chose que nous voulons probablement faire ici est juste de les donner.

45
00:05:06,090 --> 00:05:13,280
Donc nous allons leur donner un avec comme 100 pixels pour commencer et cela va être trop petit.

46
00:05:13,710 --> 00:05:26,360
Mais je veux que vous voyiez ce qui se passe et de rafraîchir et vous remarquerez que toutes ces images sont maintenant dans une ligne ensemble, mais qu'il ya un certain espace entre eux que nous n'avons pas précisé.

47
00:05:26,430 --> 00:05:29,780
Nous n'avons jamais marge ou rembourrage ou quoi que ce soit.

48
00:05:29,790 --> 00:05:36,040
Donc, ce qui se passe, c'est qu'il ya effectivement un peu d'espace blanc qui est ajouté et c'est un peu une chose bizarre dans un hibou à vapeur.

49
00:05:36,050 --> 00:05:42,870
Mais quand nous avons des images sans autre chose il ya un espace blanc ou juste un espace unique qui est ajouté entre ces derniers.

50
00:05:43,140 --> 00:05:51,540
Donc, si nous voulons nous débarrasser de cela, nous pouvons utiliser float et rappelez-vous que flotteur prendra les choses hors du flux du document.

51
00:05:51,570 --> 00:05:59,800
Donc, si je rafraîchir Maintenant, vous pouvez voir que les images sont butting contre les uns les autres et il n'y a essentiellement aucun espace entre eux.

52
00:06:00,150 --> 00:06:04,120
Et puis nous pouvons revenir en arrière et ajouter cet espace dans notre soi.

53
00:06:04,170 --> 00:06:07,020
Nous ne voulons évidemment pas qu'ils prennent ce petit espace.

54
00:06:07,020 --> 00:06:13,700
Nous voulons que trois passent et nous voulons une marge entre les deux, mais nous voulons contrôler cela.

55
00:06:14,160 --> 00:06:27,320
Ainsi en les flottant nous nous sommes débarrassés de l'espace blanc que le navigateur a ajouté pour nous afin que nous puissions maintenant aller dedans à notre propre espacement fait sur commande using la propriété de marge plutôt que les blancs réels.

56
00:06:28,920 --> 00:06:33,670
Donc, maintenant, nous allons changer la largeur et commençons par 30 pour cent.

57
00:06:33,720 --> 00:06:39,180
Rappelez-vous donc que le pourcentage d'Israël est relatif aux éléments parents du corps.

58
00:06:39,180 --> 00:06:41,910
Donc, chacun prendra 30 pour cent du corps.

59
00:06:41,910 --> 00:06:46,830
Et la raison pour laquelle je commence avec 30 est juste pour s'assurer qu'ils tous s'inscrivent sur une ligne ou que trois en forme.

60
00:06:46,830 --> 00:06:52,120
Dans mon esprit et vous verrez que nous obtenons trois d'entre eux traverser sans espace entre.

61
00:06:52,260 --> 00:06:58,370
Et puis nous avons notre 10 pour cent ici parce que ce n'est que 90 pour cent que nous prenons.

62
00:06:58,470 --> 00:07:06,790
Donc, nous allons utiliser cet autre pourcentage pour diviser réellement la marge et ajouter un certain espace entre eux.

63
00:07:07,020 --> 00:07:09,460
Donc, nous avons déjà une grille trois par trois.

64
00:07:09,650 --> 00:07:12,550
Ce que nous voulons faire ensuite est de le faire ressembler à ceci.

65
00:07:12,750 --> 00:07:15,000
Ou nous avons même espacement entre eux.

66
00:07:15,180 --> 00:07:17,870
Nous devons donc faire un peu de mathématiques.

67
00:07:18,060 --> 00:07:18,860
Je l'ai déjà fait.

68
00:07:18,870 --> 00:07:26,210
Mais essentiellement si nous calculons ceci il y a une marge ici un là est une marge ici aussi.

69
00:07:26,570 --> 00:07:28,430
Il y a une marge ici trois.

70
00:07:28,600 --> 00:07:32,400
Et puis sur celui-ci pour celui sur celui-ci cinq.

71
00:07:32,670 --> 00:07:34,910
Et sur ce ou six.

72
00:07:34,920 --> 00:07:45,570
Donc nous avons 10 pour cent et nous devons diviser par 6 et 10 divisé par six est un point six six.

73
00:07:45,570 --> 00:07:52,810
Donc, ce que nous allons faire, c'est juste dire marge un point six six pour cent.

74
00:07:52,950 --> 00:08:01,900
Donc, si nous revenons au navigateur et vérifions le résultat et nous actualisons, vous verrez que nous obtenons trois images uniformément espacées avec un espacement entre elles.

75
00:08:01,950 --> 00:08:04,850
Donc, les mathématiques juste frappé que une fois de plus.

76
00:08:05,070 --> 00:08:06,570
Chacun d'eux est de 10 pour cent.

77
00:08:06,570 --> 00:08:07,980
Donc, ils ne donnent que 30 p.

78
00:08:08,160 --> 00:08:12,370
Et chacun a une marge de 1,6 pour cent de chaque côté.

79
00:08:12,390 --> 00:08:22,920
Donc nous prenons les deux côtés à gauche et à droite un point six fois deux plus 30 pour cent et nous obtenons trente trois point trois pour cent pour chacun d'eux.

80
00:08:22,920 --> 00:08:29,330
C'est donc un tiers exactement ou presque exactement que nous arrondissons, mais c'est ce que nous pouvons faire ici.

81
00:08:29,530 --> 00:08:30,800
Donc trente-trois point trois pour cent.

82
00:08:30,810 --> 00:08:35,200
Chacun de ceux-ci nous pouvons inspecter juste pour vérifier cela.

83
00:08:35,670 --> 00:08:36,670
Voilà.