1
00:00:00,630 --> 00:00:05,120
Bu videoda, bu fotoğrafçının portföy sitesini sıfırdan yaratacağız.

2
00:00:05,310 --> 00:00:10,830
Genellikle bunu kendi başınıza yapmaya çalışmanızı ve ardından size bir çözüm videosu vermenizi

3
00:00:10,830 --> 00:00:11,550
rica ederim.

4
00:00:11,640 --> 00:00:14,050
Ancak bu kez birlikte kasıtlı bir kod var.

5
00:00:14,070 --> 00:00:19,590
Bu yüzden kodlamaya çalışmanızı isterim ve isterseniz bir kere izleyebilir ve bir dahaki

6
00:00:19,590 --> 00:00:20,650
sefere kodlayabilirsiniz.

7
00:00:20,850 --> 00:00:26,220
Ancak burada amaç, birlikte yapacağımız ve bundan kurtulmak istediğimiz iki başka

8
00:00:26,220 --> 00:00:26,940
şey var.

9
00:00:26,940 --> 00:00:33,270
İlki şamandıra diye göstereceğim yeni bir mülk var ve ikincisi, biraz gurur duyabileceği bir

10
00:00:33,270 --> 00:00:37,190
şey inşa etmek için biraz deneyim kazanmanı istiyorum.

11
00:00:37,200 --> 00:00:41,970
Şimdiye kadar yaptıklarımızın sadece çok parlak renkleri olan basit şeylerden biraz

12
00:00:41,970 --> 00:00:43,160
daha iyi görünüyor.

13
00:00:43,170 --> 00:00:47,210
Dolayısıyla, yapacağımız çok küçük bir fotoğraf blogu.

14
00:00:47,280 --> 00:00:49,160
Öyleyse başlayalım.

15
00:00:49,230 --> 00:00:50,610
Yüce aç.

16
00:00:50,880 --> 00:00:54,330
Fotoğraf şeridi olan HMO adlı tek bir dosyam var.

17
00:00:54,960 --> 00:01:00,480
İlk önce sana işe yaradığımız resmi veya başka bir şeyi göstereceğim.

18
00:01:00,480 --> 00:01:07,410
Yani bunlar Flickr'da bulduğum üç farklı fotoğrafçının her biri üç resimden oluşan dokuz

19
00:01:07,410 --> 00:01:08,390
imge var.

20
00:01:08,700 --> 00:01:10,920
Tüm fotoğraflar Creative Commons tarafından lisanslanmıştır.

21
00:01:10,920 --> 00:01:13,030
Sen buradan lisans alabilirsin.

22
00:01:13,050 --> 00:01:19,800
bir gösteri yapacağım, bu yüzden don divanlara merhaba deyin, veda eden

23
00:01:19,800 --> 00:01:27,180
biri divana eklediğimde bu bölümle birlikte kodlamam gerekiyor ve onları kurtaracağım ve sonra

24
00:01:27,180 --> 00:01:34,360
da benim stil sayfamı ekleyeceğim. SS ve sonra burada div'lerimi stiline ayarlayacağım.

25
00:01:34,410 --> 00:01:42,150
Öyleyse, bu resim URL'lerinizle hiçbir şey yapmadan önce onlardan kurtulacağım ve yaşlı iskelet

26
00:01:43,350 --> 00:01:46,750
ad-Din'i fotoğraf bloguna ekleyeceğim ve hızlı

27
00:01:46,770 --> 00:01:53,890
Bu yüzden aslında onlara bir ben vereceğim. D. Sadece bir tane deyin.

28
00:01:54,270 --> 00:02:06,810
Ve yine bu sadece bir şeyi gösterecek ve sonra da burada bir ve iki seçeceğim ve hepsine bir

29
00:02:06,900 --> 00:02:10,020
başka arka plan rengi kırmızı

30
00:02:14,040 --> 00:02:25,980
ve arka plan rengi mor koymak için yapacağım ve o zaman ikisini de tüm div'leri ve genişliğini 100

31
00:02:25,980 --> 00:02:27,630
piksele vereceğim.

32
00:02:27,630 --> 00:02:32,430
Bu yüzden bunu yaptığımda tarayıcıda açıyorum.

33
00:02:33,540 --> 00:02:36,970
İki div var, birbiri ardına.

34
00:02:36,990 --> 00:02:39,020
Teftiş edersek unuturlar.

35
00:02:39,480 --> 00:02:44,280
Temel olarak kendi hattını blok seviyesi unsuru olarak alacak şekilde ayarlanırlar.

36
00:02:44,280 --> 00:02:50,400
Dolayısıyla, bunun olmasını istemiyorsak, görüntü kalıbı için yapacağımız şey, resimlerimizin bir ızgarayı

37
00:02:50,400 --> 00:02:54,490
veya çoklu çizgiyi oluşturmak için aynı çizgide olmasıdır.

38
00:02:54,540 --> 00:02:59,850
Ve öyleyse div ile bunu yapmak istersem float adında bir özellik kullanmam gerekiyor ya da

39
00:02:59,850 --> 00:03:01,690
bunu yapmanın bir yolu bu.

40
00:03:01,740 --> 00:03:06,780
Dolayısıyla, yaptığım tek şey güvenli bir şamandıranın solu ve bunun ne yapacağı.

41
00:03:06,780 --> 00:03:11,390
Tüm div'leri belgenin normal akışından çıkaracak.

42
00:03:11,580 --> 00:03:14,730
Yani halihazırda her biri ayrı hatlarda bulunan yığınlar var.

43
00:03:15,000 --> 00:03:22,200
Ve gerçekleşecek olan şey, neredeyse belgelerimizde yerçekimi gittikçe onu düşünmek için sola

44
00:03:22,200 --> 00:03:23,090
doğru kayacaklar.

45
00:03:23,280 --> 00:03:26,380
Ve böylece bu div kayar ve sola doğru itilir.

46
00:03:26,400 --> 00:03:27,580
Buna karşı.

47
00:03:27,990 --> 00:03:32,200
Burada tazeli olsaydım, şimdi aynı çizgide olduklarını görebilirsiniz.

48
00:03:32,280 --> 00:03:38,190
böylece temel olarak birbirine karşı çıkıp bir ızgara oluşturacak görüntüler elde edebiliyoruz.

49
00:03:38,550 --> 00:03:41,840
Bu yüzden, bu ilkeyi görüntüleri kullanırken kullanacağız

50
00:03:41,970 --> 00:03:48,600
Bu yüzden şimdi bunlardan kurtulacağım ve sahip olduğum cihazdan kurtulacağım ve bu şekilde

51
00:03:48,600 --> 00:03:49,910
imajımıza ekleyeceğim.

52
00:03:50,280 --> 00:03:55,770
Bu yüzden bu tam ekranı yapacağım ve sadece bu videoda yer alan bu

53
00:03:55,770 --> 00:03:57,040
resim bağlantılarını yapıştıracağım.

54
00:03:57,810 --> 00:04:04,920
Bunun yerine, dokuz resim etiketi yaparak bunları bir resim etiketi yaptım ve sonra da kopyalayıp

55
00:04:05,190 --> 00:04:08,230
dokuz kez yapıştırmaktan çok yavaş olmalıyım.

56
00:04:08,490 --> 00:04:15,660
ve sonra resim kaynağına eşit olacak ve sonra da satırın sonuna geçeceğim.

57
00:04:15,660 --> 00:04:22,530
Her satırın başlangıcını seçmek için komutu tıklattığım yerde biraz yüce büyü kullanacağım

58
00:04:22,800 --> 00:04:28,650
Bu yüzden bir komut sağ ok komutunu kullandım sol ok başa

59
00:04:28,710 --> 00:04:35,380
götürür komut sağdan sonuna gider ve sonra teklifle ve ardından kapanış ayracıyla bitiririm.

60
00:04:35,400 --> 00:04:40,550
Dolayısıyla, Elf'lerin hepsini görüntü etiketleri olarak çevrelemek için gerçekten kolay ve hızlı bir yol vardı.

61
00:04:40,920 --> 00:04:46,340
Bu yüzden bunu kaydedersem ve tarayıcıya giderlerse, yenilediğimde göreceksin.

62
00:04:46,530 --> 00:04:47,960
Artık dokuz imajımız var.

63
00:04:48,090 --> 00:04:49,680
Tabii ki entegre değildir.

64
00:04:49,890 --> 00:04:53,890
Çok fazla yer kaplıyorlar.

65
00:04:54,060 --> 00:05:01,230
Şimdi ne yapacağız stil sayfamıza gidin ve tüm resimleri seçin.

66
00:05:01,230 --> 00:05:05,520
Ve muhtemelen burada yapmak istiyoruz ilk şey sadece onları uzakta vermektir.

67
00:05:06,090 --> 00:05:13,280
Öyleyse onlara başlamak için 100 piksel gibi bir değer verelim ve bu çok küçük olacak.

68
00:05:13,710 --> 00:05:21,540
Fakat ne olduğunu ve yenilendiğini görmenizi ve tüm bu görüntülerin bir arada

69
00:05:21,540 --> 00:05:26,360
olduğunun farkında olacaksın, aralarında belirtmediğimiz aralık var.

70
00:05:26,430 --> 00:05:29,780
Kenar boşluğu, dolgu veya başka bir şey belirlemedik.

71
00:05:29,790 --> 00:05:34,590
O halde, olan şey, aslında eklenen beyaz boşluğun olması ve buharlı baykuşta

72
00:05:34,590 --> 00:05:36,040
tuhaf bir şey olması.

73
00:05:36,050 --> 00:05:41,850
Ancak başka bir şey olmadan görüntüler elde ettiğimizde, aralarında beyaz boşluklar ya da sadece tek

74
00:05:41,850 --> 00:05:42,870
bir boşluk var.

75
00:05:43,140 --> 00:05:49,710
Bu yüzden, ondan kurtulmak istersek, float'ı kullanabiliriz ve bu şamandıranın şeyleri belgenin

76
00:05:49,710 --> 00:05:51,540
akışından alacağını hatırlayabiliriz.

77
00:05:51,570 --> 00:05:58,170
Dolayısıyla Şimdi yenilersem, görüntülerin birbirlerine karşı birbirine karşı koyduğunu ve aralarında hiç

78
00:05:58,170 --> 00:05:59,800
boşluk olmadığını görebilirsiniz.

79
00:06:00,150 --> 00:06:04,120
Sonra geri dönüp o mekanı kendi kendimize ekleyebiliriz.

80
00:06:04,170 --> 00:06:07,020
Dolayısıyla açıkçası, bu küçük alanı almalarını istemiyoruz.

81
00:06:07,020 --> 00:06:13,700
Karşılaşmanın üçünü istiyoruz; aralarında biraz kenar boşluğu istiyoruz, ancak bunu kontrol etmek istiyoruz.

82
00:06:14,160 --> 00:06:20,610
Dolayısıyla onları yüzerek tarayıcıya eklediğimiz beyaz alandan kurtulduk, böylece gerçek

83
00:06:20,610 --> 00:06:27,320
boşluk yerine kenar boşluğu özelliklerini kullanarak kendi özel aralığına geçebiliriz.

84
00:06:28,920 --> 00:06:33,670
Şimdi genişliği değiştireceğiz ve yüzde 30 ile başlayalım.

85
00:06:33,720 --> 00:06:39,180
Dolayısıyla, İsrail'in vücudun ana öğelerine göre yüzdesini hatırlayın.

86
00:06:39,180 --> 00:06:41,910
Böylece her biri vücudun yüzde 30'unu alacaktır.

87
00:06:41,910 --> 00:06:46,800
Ve 30'la başlayacağım nedeni, hepsinin tek bir hatta uygun olmasını sağlamaktır.

88
00:06:46,830 --> 00:06:52,120
Aklımda ve üçünün arasında boşluk geçtiğini göreceksin.

89
00:06:52,260 --> 00:06:58,370
Ve sonra yüzde 10'umuz var, çünkü bu yüzde 90 alıyor.

90
00:06:58,470 --> 00:07:06,390
Bu yüzden, marjı gerçekte bölmek ve aralarında biraz boşluk eklemek için bu diğer yüzdeyi

91
00:07:06,390 --> 00:07:06,790
kullanacağız.

92
00:07:07,020 --> 00:07:09,460
Yani zaten üç üç ızgarımız var.

93
00:07:09,650 --> 00:07:12,550
Daha sonra yapmak istediğimiz şey, şunun gibi olmasını sağlamak.

94
00:07:12,750 --> 00:07:15,000
Veya aramızdaki aralığı da eşit tutuyoruz.

95
00:07:15,180 --> 00:07:17,870
Yani aslında biraz matematik yapmak zorundayız.

96
00:07:18,060 --> 00:07:18,860
Bu yüzden zaten yaptım.

97
00:07:18,870 --> 00:07:26,210
Ama temel olarak burada hesapladığımızda bir marj vardır, burada bir de bir fark var.

98
00:07:26,570 --> 00:07:28,430
Burada üç marj var.

99
00:07:28,600 --> 00:07:32,400
Ve sonra bu beşte bunun için.

100
00:07:32,670 --> 00:07:34,910
Ve bir buçukta.

101
00:07:34,920 --> 00:07:45,570
Dolayısıyla yüzde 10'luk sahibiz ve 6 ile 10'u ikiye bölen altı sayı bir altı altı puan olarak bölmeliyiz.

102
00:07:45,570 --> 00:07:52,810
Dolayısıyla ne yapacağız sadece bir altı altı yüzde altı farkla söylüyorsunuz.

103
00:07:52,950 --> 00:07:58,440
Dolayısıyla, tarayıcıya geri dönüp sonuca bakıp yenileyeceğimizi fark edersek aralarında boşluk bırakarak

104
00:07:58,440 --> 00:08:01,900
üç eşit aralıklı resim elde ettiğimizi görürsünüz.

105
00:08:01,950 --> 00:08:04,850
Böylece matematik bir kez daha çarptı.

106
00:08:05,070 --> 00:08:06,570
Bunların her biri yüzde 10'dur.

107
00:08:06,570 --> 00:08:07,980
Dolayısıyla sadece yüzde 30 veriyorlar.

108
00:08:08,160 --> 00:08:12,370
Ve her birinin marjı 1'dir. Her iki yüzde 6 oranında.

109
00:08:12,390 --> 00:08:19,700
Dolayısıyla, her iki tarafı da sola ve sağa birer puan altı, iki artı yüzde 30 alıyoruz ve

110
00:08:19,690 --> 00:08:22,920
her biri için otuz üç puan üçü alıyoruz.

111
00:08:22,920 --> 00:08:29,330
Bu, tam olarak neredeyse tam da yuvarlanıyor ama bu bizim burada yapabileceğimiz en iyisi.

112
00:08:29,530 --> 00:08:30,800
Yani otuz üç puan üç yüzde.

113
00:08:30,810 --> 00:08:35,200
Bunların her birini doğrulamak için yalnızca inceleyebiliriz.

114
00:08:35,670 --> 00:08:36,670
Oraya gidiyoruz.

115
00:08:36,690 --> 00:08:39,360
Tam üçte birini alabildiğini görebilirsiniz