1
00:00:00,630 --> 00:00:05,120
In deze video gaan we van deze fotograaf portfolio site van de grond af te maken.

2
00:00:05,310 --> 00:00:11,550
En meestal wil ik u vragen om te proberen om dit te doen op uw eigen en dan geef je een oplossing video na dit.

3
00:00:11,640 --> 00:00:14,050
Maar dit keer is het een bewuste code samen.

4
00:00:14,070 --> 00:00:20,650
Dus ik wil graag dat je probeert om mee te coderen en als u wilt kunt u het een keer kijken door en vervolgens code langs de volgende keer.

5
00:00:20,850 --> 00:00:26,940
Maar het doel hier is dat we gaan het samen doen en er zijn twee andere dingen die we willen uit dit te omzeilen.

6
00:00:26,940 --> 00:00:37,190
De eerste is dat er een nieuw pand ga ik belde vlotter te laten zien en het tweede ding is dat ik wil gewoon dat je een beetje ervaring met het bouwen iets dat je een beetje trots op kan zijn te krijgen.

7
00:00:37,200 --> 00:00:43,160
Dat ziet er een beetje beter dan sommige van de eenvoudige dingen die net echt helder verschrikkelijk kleuren die we tot nu toe hebben gedaan.

8
00:00:43,170 --> 00:00:47,210
Dus dit is een echt minimaal fotoblog dat we gaan doen.

9
00:00:47,280 --> 00:00:49,160
Dus laten we beginnen.

10
00:00:49,230 --> 00:00:50,610
Openstellen subliem.

11
00:00:50,880 --> 00:00:54,330
Ik heb een bestand met de naam Photo raster dat HMO.

12
00:00:54,960 --> 00:01:00,480
Ik ga naar de afbeelding of anders dat we werken met de eerste laten zien.

13
00:01:00,480 --> 00:01:08,390
Dus deze beelden zijn negen beelden drie beelden elk uit drie verschillende fotografen die ik vond op Flickr.

14
00:01:08,700 --> 00:01:10,920
Alle foto's zijn gelicenseerd onder Creative Commons.

15
00:01:10,920 --> 00:01:13,030
U kunt de licentie hier.

16
00:01:13,050 --> 00:01:46,750
Dus voordat we iets doen met deze afbeelding die u URL's Ik ben eigenlijk van plan om zich te ontdoen van hen te krijgen en ik ga toe te voegen in mijn oude skelet ad-Din foto blog en ik ga snel een demonstratie te doen, zodat je don 't hebben om mee te coderen met dit deel toen ik toevoegen aan een die gedag zegt en een die vaarwel zegt divs en ik ga om hen te redden en dan ga ik naar mijn stylesheet waarin ik bel foto's van de toe te voegen SS en dan hier ga ik mijn divs stylen.

17
00:01:46,770 --> 00:01:53,890
Dus ik ben eigenlijk gaan ze een binnendiameter te geven noemen het een.

18
00:01:54,270 --> 00:02:27,630
En ook dit is gewoon iets en vervolgens naar een demonstreren hier ga ik één en twee te kiezen en alles wat ik ga doen is gewoon geef ze een andere achtergrond kleur rood en dan achtergrond kleur paars en dan ben ik naar beiden alle divs en een breedte van 100 pixels geven.

19
00:02:27,630 --> 00:02:32,430
Dus toen ik dit doe ik het open te stellen in de browser.

20
00:02:33,540 --> 00:02:36,970
We hebben twee divs ene na de andere.

21
00:02:36,990 --> 00:02:39,020
Vergeet niet dat ze als we inspecteren.

22
00:02:39,480 --> 00:02:44,280
Ze zijn in principe zo ingesteld dat zij hun eigen lijn hun block-level element te nemen.

23
00:02:44,280 --> 00:02:54,490
Dus als ik niet wil dat dit gebeurt en dat is wat we gaan doen voor het imago raster we willen dat onze beelden naar een raster of meer op dezelfde lijn te vormen.

24
00:02:54,540 --> 00:03:01,690
En zo ja, als ik wil dat doen met divs ik nodig heb om een ​​eigenschap float gebruikt of dat is een manier waarop ik het kan bereiken.

25
00:03:01,740 --> 00:03:06,780
Dus hier alles wat ik doe is veilig float links en wat dat zal doen.

26
00:03:06,780 --> 00:03:11,390
Het zal de elementen alle divs uit te maken van de normale stroom van het document.

27
00:03:11,580 --> 00:03:14,730
Dus er zijn stapels momenteel op elk op aparte regels.

28
00:03:15,000 --> 00:03:23,090
En wat er zal gebeuren is dat ze zullen zweven naar links te denken van het als de zwaartekracht weg te gaan bijna in ons document.

29
00:03:23,280 --> 00:03:26,380
En dus deze div gaat zweven en naar links te duwen.

30
00:03:26,400 --> 00:03:27,580
Tegen deze.

31
00:03:27,990 --> 00:03:32,200
Dus als ik verse waren hier kun je zien dat ze nu op dezelfde lijn.

32
00:03:32,280 --> 00:03:41,840
Dus gaan we dit principe te gebruiken als we beelden gebruiken, zodat we kunnen krijgen afbeeldingen om in principe omhoog te gaan tegen elkaar en vormen een raster.

33
00:03:41,970 --> 00:03:49,910
Dus ik ga nu zich te ontdoen van dit alles te krijgen en zich te ontdoen van het apparaat dat we hebben en ik ga toe te voegen aan ons imago als deze.

34
00:03:50,280 --> 00:03:57,040
Dus ik ga dit het volledige scherm te maken en gewoon plakken in deze afbeelding links die in dat bestand opgenomen met deze video.

35
00:03:57,810 --> 00:04:08,230
En in plaats van negen image-tags als deze waar ik een afbeelding tag en kopieer je rond en plak deze in negen keer die zeer traag zou moeten zijn.

36
00:04:08,490 --> 00:04:22,730
Ik ga een beetje van sublieme magie gebruiken hier waar ik ben met behulp van commando klik naar het begin van elke lijn te selecteren en vervolgens Ik ga gewoon op de foto om de bron is gelijk aan typen en vervolgens aan het einde van de regel.

37
00:04:22,800 --> 00:04:35,380
Dus gebruikte ik een opdracht pijl naar rechts commando linkerpijl neemt het aan het begin commando rechts gaat naar het einde en dan ga ik om te eindigen met het citaat en vervolgens het haakje sluiten.

38
00:04:35,400 --> 00:04:40,550
Dus dat was echt een gemakkelijke en snelle manier om al die je bent Elves als image-tags omsluiten.

39
00:04:40,920 --> 00:04:46,340
Dus als ik dit op te slaan en ze gaan naar de browser die u zult zien wanneer ik te vernieuwen.

40
00:04:46,530 --> 00:04:47,960
We hebben nu negen beelden.

41
00:04:48,090 --> 00:04:49,680
Natuurlijk zijn niet geïntegreerd.

42
00:04:49,890 --> 00:04:53,890
Ze nemen een hoop ruimte.

43
00:04:54,060 --> 00:05:01,230
Dus wat we nu gaan doen is naar onze style sheet en selecteer alle afbeeldingen.

44
00:05:01,230 --> 00:05:05,520
En het eerste wat we waarschijnlijk willen hier doen is gewoon geef ze weg.

45
00:05:06,090 --> 00:05:13,280
Dus laten we hen geven met als 100 pixels om te starten en dit gaat veel te klein te zijn.

46
00:05:13,710 --> 00:05:26,360
Maar ik wil dat je om te zien wat er gebeurt en te frissen en je zult merken dat al deze beelden nu in een lijn met elkaar, maar dat er enige afstand tussen hen dat we niet opgeven.

47
00:05:26,430 --> 00:05:29,780
We hebben nooit een margin of padding of iets dergelijks.

48
00:05:29,790 --> 00:05:36,040
Dus wat is gebeurt is dat er eigenlijk een aantal witte ruimte die wordt toegevoegd en het is een beetje een eigenzinnig ding in een stoom uil.

49
00:05:36,050 --> 00:05:42,870
Maar als we beelden hebben, zonder iets anders is er een witte ruimte of slechts een enkele ruimte die is toegevoegd tussen deze.

50
00:05:43,140 --> 00:05:51,540
Dus als we willen om zich te ontdoen van die kunnen we float gebruiken en vergeet niet dat vlotter zal dingen uit de stroom van het document te nemen.

51
00:05:51,570 --> 00:05:59,800
Dus als ik nu vernieuwen je kunt zien dat de beelden zijn, worden stoten tegen elkaar en er is eigenlijk geen ruimte tussen hen.

52
00:06:00,150 --> 00:06:04,120
En dan kunnen we terug te gaan en toe te voegen dat de ruimte in ons zelf.

53
00:06:04,170 --> 00:06:07,020
Dus we natuurlijk niet willen dat ze tot het nemen van deze kleine ruimte.

54
00:06:07,020 --> 00:06:13,700
We willen wel drie gaan over en we willen wat marge tussen hen, maar we willen controleren dat.

55
00:06:14,160 --> 00:06:27,320
Dus door hen te drijven kregen we ontdoen van de witte ruimte die de browser toegevoegd voor ons zodat we nu kunnen gaan in onze eigen aangepaste afstand met de eigenschap marge in plaats van werkelijke witruimte.

56
00:06:28,920 --> 00:06:33,670
Dus nu gaan we om de breedte te veranderen en laten we beginnen met 30 procent.

57
00:06:33,720 --> 00:06:39,180
Dus niet vergeten dat het percentage Israël opzichte van de bovenliggende elementen van het lichaam.

58
00:06:39,180 --> 00:06:41,910
Dus ieder zal nemen 30 procent van het lichaam.

59
00:06:41,910 --> 00:06:46,830
En de reden waarom ik ben beginnen met 30 is gewoon om ervoor te zorgen dat ze allemaal op één regel past, of dat drie fit.

60
00:06:46,830 --> 00:06:52,120
In mijn gedachten en je zult zien dat we drie van hen gaan over geen ruimte tussen.

61
00:06:52,260 --> 00:06:58,370
En dan hebben we onze 10 procent ten opzichte van hier, want dit is nog maar 90 procent dat we opnemen.

62
00:06:58,470 --> 00:07:06,790
Dus we gaan naar die andere percentage gebruiken om daadwerkelijk splitsen de marge en voeg wat ruimte tussen hen.

63
00:07:07,020 --> 00:07:09,460
Dus al hebben we een drie bij drie raster.

64
00:07:09,650 --> 00:07:12,550
Wat we willen gaan doen is zodat het lijkt alsof dit.

65
00:07:12,750 --> 00:07:15,000
Of we hebben zelfs tussenruimte tussen hen.

66
00:07:15,180 --> 00:07:17,870
Dus we hebben eigenlijk een beetje wiskunde te doen.

67
00:07:18,060 --> 00:07:18,860
Zo heb ik al gedaan.

68
00:07:18,870 --> 00:07:26,210
Maar in principe als we dit te berekenen is er een marge hier op een er een marge hier ook.

69
00:07:26,570 --> 00:07:28,430
Er is een marge hier drie.

70
00:07:28,600 --> 00:07:32,400
En dan op dit ene voor die op dit ene vijf.

71
00:07:32,670 --> 00:07:34,910
En op deze of zes.

72
00:07:34,920 --> 00:07:45,570
Dus hebben we 10 procent en we moeten delen door 6 en 10 gedeeld door zes is één punt zes zes.

73
00:07:45,570 --> 00:07:52,810
Dus wat we gaan doen is gewoon zeggen marge één punt zes van zes procent.

74
00:07:52,950 --> 00:08:01,900
Dus als we teruggaan naar de browser en bekijk het resultaat en te vernieuwen je zult zien dat we drie gelijkmatig uit elkaar geplaatste beelden met afstand tussen hen.

75
00:08:01,950 --> 00:08:04,850
Dus de wiskunde gewoon op dat nog een keer.

76
00:08:05,070 --> 00:08:06,570
Elk van deze is 10 procent.

77
00:08:06,570 --> 00:08:07,980
Dus geven ze slechts 30 procent.

78
00:08:08,160 --> 00:08:12,370
En elk heeft een marge van 1,6 procent aan beide zijden.

79
00:08:12,390 --> 00:08:22,920
Dus nemen we beide kanten links en rechts een gegeven moment zes keer twee plus 30 procent en we krijgen drieëndertig punt drie procent voor elk van deze.

80
00:08:22,920 --> 00:08:29,330
Dus dat is een derde precies of bijna precies zijn we zeker scoren, maar dat is het beste wat we hier doen.

81
00:08:29,530 --> 00:08:30,800
Dus drieëndertig punt drie procent.

82
00:08:30,810 --> 00:08:35,200
Elk van deze kunnen we gewoon inspecteren om te verifiëren dat.

83
00:08:35,670 --> 00:08:36,670
Daar gaan we.