1
00:00:00,630 --> 00:00:05,120
In questo video creeremo da zero il sito del portfolio di questo fotografo.

2
00:00:05,310 --> 00:00:10,830
E di solito ti chiedo di tentare di farlo da solo e poi di darti un video di soluzione

3
00:00:10,830 --> 00:00:11,550
seguendo questo.

4
00:00:11,640 --> 00:00:14,050
Comunque questa volta è un codice deliberato lungo.

5
00:00:14,070 --> 00:00:19,590
Quindi mi piacerebbe che tu tentassi di codificare e se preferisci puoi guardarlo una volta e poi programmare

6
00:00:19,590 --> 00:00:20,650
la prossima volta.

7
00:00:20,850 --> 00:00:26,220
Ma l'obiettivo qui è che lo faremo insieme e ci sono altre due cose che vogliamo uscire

8
00:00:26,220 --> 00:00:26,940
da questo.

9
00:00:26,940 --> 00:00:33,270
Il primo è che c'è una nuova proprietà che mostrerò float e la seconda cosa è che voglio solo farti

10
00:00:33,270 --> 00:00:37,190
una piccola esperienza costruendo qualcosa di cui puoi essere un po 'orgoglioso.

11
00:00:37,200 --> 00:00:41,970
Sembra un po 'meglio di alcune delle cose semplici che sono solo colori davvero sgargianti

12
00:00:41,970 --> 00:00:43,160
che abbiamo fatto finora.

13
00:00:43,170 --> 00:00:47,210
Quindi questo è un blog fotografico davvero minimale che faremo.

14
00:00:47,280 --> 00:00:49,160
Quindi iniziamo.

15
00:00:49,230 --> 00:00:50,610
Apri sublime.

16
00:00:50,880 --> 00:00:54,330
Ho un singolo file chiamato Photo grid che HMO.

17
00:00:54,960 --> 00:01:00,480
Per prima cosa ti mostrerò l'immagine o con cui stiamo lavorando.

18
00:01:00,480 --> 00:01:07,410
Quindi queste sono immagini nove immagini tre immagini ciascuna da tre diversi fotografi che ho trovato

19
00:01:07,410 --> 00:01:08,390
su Flickr.

20
00:01:08,700 --> 00:01:10,920
Tutte le foto sono sotto licenza Creative Commons.

21
00:01:10,920 --> 00:01:13,030
Puoi la licenza qui.

22
00:01:13,050 --> 00:01:19,800
rapida dimostrazione in modo che tu possa Devo codificare insieme a questa parte quando aggiungo a quella di

23
00:01:19,800 --> 00:01:27,180
uno che dice ciao e uno che dice addio e li salverò e poi aggiungerò il mio foglio di

24
00:01:27,180 --> 00:01:34,360
stile in cui sto chiamando le foto del SS e poi qui ho intenzione di modellare i miei div.

25
00:01:34,410 --> 00:01:42,150
Quindi, prima di fare qualsiasi cosa con questi tuoi URL, in realtà mi sbarazzerò di loro e aggiungerò il mio

26
00:01:43,350 --> 00:01:46,750
vecchio scheletro ad-Din nel blog fotografico e farò una

27
00:01:46,770 --> 00:01:53,890
Quindi, in realtà, darò loro un I. D. chiamalo solo uno.

28
00:01:54,270 --> 00:02:06,810
E ancora questo è solo per dimostrare qualcosa e poi a un punto qui selezionerò uno e due e tutto quello che farò è semplicemente

29
00:02:06,900 --> 00:02:10,020
dare loro un colore di sfondo

30
00:02:14,040 --> 00:02:25,980
diverso rosso e poi il colore di sfondo viola e poi io sono andando a dare ad entrambi tutti i div e una larghezza

31
00:02:25,980 --> 00:02:27,630
di 100 pixel.

32
00:02:27,630 --> 00:02:32,430
Quindi quando lo faccio lo apro nel browser.

33
00:02:33,540 --> 00:02:36,970
Abbiamo due div uno dopo l'altro.

34
00:02:36,990 --> 00:02:39,020
Ricorda che se ispezioniamo.

35
00:02:39,480 --> 00:02:44,280
Fondamentalmente sono impostati in modo che prendano la propria linea il loro elemento a livello di blocco.

36
00:02:44,280 --> 00:02:50,400
Quindi, se non voglio che ciò accada, che è ciò che faremo per la griglia dell'immagine, vogliamo che le

37
00:02:50,400 --> 00:02:54,490
nostre immagini formino una griglia o che più siano sulla stessa linea.

38
00:02:54,540 --> 00:02:59,850
E se è così, se voglio farlo con i div, devo usare una proprietà chiamata float o è

39
00:02:59,850 --> 00:03:01,690
un modo in cui posso realizzarla.

40
00:03:01,740 --> 00:03:06,780
Quindi qui tutto ciò che faccio è galleggiare sicuro a sinistra e cosa farà.

41
00:03:06,780 --> 00:03:11,390
Prenderà gli elementi tutte le div al di fuori del flusso normale del documento.

42
00:03:11,580 --> 00:03:14,730
Quindi ci sono stack attualmente su ciascuno su linee separate.

43
00:03:15,000 --> 00:03:22,200
E quello che accadrà è che fluttueranno a sinistra per pensarla come la gravità che sta scomparendo quasi nel

44
00:03:22,200 --> 00:03:23,090
nostro documento.

45
00:03:23,280 --> 00:03:26,380
E così questo div sta per fluttuare e spingere a sinistra.

46
00:03:26,400 --> 00:03:27,580
Contro questo.

47
00:03:27,990 --> 00:03:32,200
Quindi se fossi fresco qui puoi vedere che ora sono sulla stessa linea.

48
00:03:32,280 --> 00:03:38,190
in modo che possiamo ottenere le immagini fondamentalmente che si scontrano e formano una griglia.

49
00:03:38,550 --> 00:03:41,840
Quindi useremo questo principio quando usiamo le immagini

50
00:03:41,970 --> 00:03:48,600
Quindi mi libererò di tutto questo ora e sbarazzerò del dispositivo che abbiamo e aggiungerò la nostra immagine

51
00:03:48,600 --> 00:03:49,910
in questo modo.

52
00:03:50,280 --> 00:03:55,770
Così ho intenzione di fare questo a schermo intero e basta incollare in questi collegamenti immagine che sono in quel

53
00:03:55,770 --> 00:03:57,040
file incluso con questo video.

54
00:03:57,810 --> 00:04:04,920
E invece di fare nove tag immagine come questo in cui creo un tag immagine e poi ti copio e lo incolli

55
00:04:05,190 --> 00:04:08,230
in nove volte, il che dovrebbe essere molto lento.

56
00:04:08,490 --> 00:04:15,660
ogni riga e poi scriverò la sorgente dell'immagine come uguale e poi passerò alla fine della riga.

57
00:04:15,660 --> 00:04:22,530
Userò un po 'di magia sublime qui dove sto usando il comando click per selezionare l'inizio di

58
00:04:22,800 --> 00:04:28,650
Quindi ho usato un comando con la freccia destra, il comando freccia destra lo porta al comando

59
00:04:28,710 --> 00:04:35,380
iniziale, va alla fine e poi ho intenzione di terminare con la quota e poi con la parentesi di chiusura.

60
00:04:35,400 --> 00:04:40,550
Questo è stato un modo davvero semplice e veloce per includere tutti i folletti come tag immagine.

61
00:04:40,920 --> 00:04:46,340
Quindi se salvi questo e vanno al browser vedrai quando aggiorno.

62
00:04:46,530 --> 00:04:47,960
Ora abbiamo nove immagini.

63
00:04:48,090 --> 00:04:49,680
Ovviamente non sono integrati.

64
00:04:49,890 --> 00:04:53,890
Stanno prendendo molto spazio.

65
00:04:54,060 --> 00:05:01,230
Quindi quello che faremo ora è andare al nostro foglio di stile e selezionare tutte le immagini.

66
00:05:01,230 --> 00:05:05,520
E la prima cosa che probabilmente vorremmo fare qui è semplicemente dar loro via.

67
00:05:06,090 --> 00:05:13,280
Quindi diamo loro un con 100 pixel come inizio e questo sarà troppo piccolo.

68
00:05:13,710 --> 00:05:21,540
Ma voglio che tu veda quello che succede e si aggiorni e noterai che tutte queste immagini ora sono in una linea

69
00:05:21,540 --> 00:05:26,360
insieme ma che c'è una certa spaziatura tra di esse che non abbiamo specificato.

70
00:05:26,430 --> 00:05:29,780
Non abbiamo mai impostato margini, padding o altro.

71
00:05:29,790 --> 00:05:34,590
Quindi quello che sta succedendo è che in realtà c'è dello spazio bianco che viene aggiunto ed è un po 'una cosa

72
00:05:34,590 --> 00:05:36,040
strana in un gufo del vapore.

73
00:05:36,050 --> 00:05:41,850
Ma quando abbiamo immagini senza altro c'è uno spazio bianco o solo uno spazio che viene aggiunto

74
00:05:41,850 --> 00:05:42,870
tra di esse.

75
00:05:43,140 --> 00:05:49,710
Quindi, se vogliamo liberarcene, possiamo usare float e ricordare che float prenderà le cose fuori

76
00:05:49,710 --> 00:05:51,540
dal flusso del documento.

77
00:05:51,570 --> 00:05:58,170
Quindi, se aggiorno ora, puoi vedere che le immagini si intrecciano l'una con l'altra e in pratica non

78
00:05:58,170 --> 00:05:59,800
c'è spazio tra di esse.

79
00:06:00,150 --> 00:06:04,120
E poi possiamo tornare indietro e aggiungere quello spazio nel nostro sé.

80
00:06:04,170 --> 00:06:07,020
Quindi ovviamente non vogliamo che occupino questo piccolo spazio.

81
00:06:07,020 --> 00:06:13,700
Vogliamo che ce ne siano tre e vogliamo un margine tra di loro ma vogliamo controllarlo.

82
00:06:14,160 --> 00:06:20,610
Quindi, facendoli fluttuare, abbiamo eliminato lo spazio bianco che il browser ha aggiunto per noi in modo che

83
00:06:20,610 --> 00:06:27,320
ora possiamo passare alla nostra spaziatura personalizzata usando la proprietà del margine piuttosto che gli spazi bianchi effettivi.

84
00:06:28,920 --> 00:06:33,670
Quindi ora cambieremo la larghezza e iniziamo con il 30 percento.

85
00:06:33,720 --> 00:06:39,180
Quindi ricorda che la percentuale di Israele è relativa agli elementi genitoriali del corpo.

86
00:06:39,180 --> 00:06:41,910
Quindi ognuno prenderà il 30 percento del corpo.

87
00:06:41,910 --> 00:06:46,800
E la ragione per cui sto iniziando con il 30 è solo per assicurarmi che si adattino tutti su una linea o su tre.

88
00:06:46,830 --> 00:06:52,120
Nella mia mente vedrai che tre di loro non attraversano nessuno spazio.

89
00:06:52,260 --> 00:06:58,370
E poi abbiamo il nostro 10 percento qui perché questo è solo il 90 percento che stiamo prendendo.

90
00:06:58,470 --> 00:07:06,390
Quindi useremo quell'altra percentuale per dividere effettivamente il margine e aggiungere una certa spaziatura tra di

91
00:07:06,390 --> 00:07:06,790
loro.

92
00:07:07,020 --> 00:07:09,460
Quindi abbiamo già una griglia tre a tre.

93
00:07:09,650 --> 00:07:12,550
Quello che vogliamo fare è renderlo simile a questo.

94
00:07:12,750 --> 00:07:15,000
O abbiamo anche la spaziatura tra di loro.

95
00:07:15,180 --> 00:07:17,870
Quindi dobbiamo effettivamente fare un po 'di matematica.

96
00:07:18,060 --> 00:07:18,860
Quindi l'ho già fatto.

97
00:07:18,870 --> 00:07:26,210
Ma fondamentalmente se calcoliamo questo qui c'è un margine qui c'è un margine anche qui.

98
00:07:26,570 --> 00:07:28,430
C'è un margine qui tre.

99
00:07:28,600 --> 00:07:32,400
E poi su questo per quello su questo cinque.

100
00:07:32,670 --> 00:07:34,910
E su questo uno o sei.

101
00:07:34,920 --> 00:07:45,570
Quindi abbiamo il 10% e dobbiamo dividerlo per 6 e 10 diviso per sei è un punto sei sei.

102
00:07:45,570 --> 00:07:52,810
Quindi quello che faremo è dire margine un punto sei sei per cento.

103
00:07:52,950 --> 00:07:58,440
Quindi, se torniamo al browser e controlliamo il risultato e il refresh, vedremo che

104
00:07:58,440 --> 00:08:01,900
otteniamo tre immagini equidistanti con spaziatura tra di esse.

105
00:08:01,950 --> 00:08:04,850
Quindi la matematica ha appena colpito un'altra volta.

106
00:08:05,070 --> 00:08:06,570
Ognuno di questi è il 10 percento.

107
00:08:06,570 --> 00:08:07,980
Quindi danno solo il 30 percento.

108
00:08:08,160 --> 00:08:12,370
E ognuno ha un margine di 1. 6 percento su entrambi i lati.

109
00:08:12,390 --> 00:08:19,700
Quindi prendiamo entrambe le parti sinistra e destra un punto sei volte due più il 30 percento e otteniamo

110
00:08:19,690 --> 00:08:22,920
trentatré tre virgola tre percento per ognuna di queste.

111
00:08:22,920 --> 00:08:29,330
Quindi questo è un terzo esattamente o quasi esattamente stiamo arrotondando ma è il meglio che possiamo fare qui.

112
00:08:29,530 --> 00:08:30,800
Quindi trentatre virgola tre percento.

113
00:08:30,810 --> 00:08:35,200
Ognuno di questi possiamo ispezionare solo per verificarlo.

114
00:08:35,670 --> 00:08:36,670
Eccoci.

115
00:08:36,690 --> 00:08:39,360
Puoi vedere che occupa esattamente un terzo