[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.00,0:00:02.50,Default,,0000,0000,0000,,გახსოვთ, როგორ გავაკეთეთ რაღაც
Dialogue: 0,0:00:02.54,0:00:04.58,Default,,0000,0000,0000,,ყუთის მსგავსი წინა ვიდეოში?
Dialogue: 0,0:00:04.59,0:00:06.43,Default,,0000,0000,0000,,ამ div–ითა
Dialogue: 0,0:00:06.43,0:00:08.35,Default,,0000,0000,0000,,და მერე მისთვის ფონის ფერის შერჩევით?
Dialogue: 0,0:00:08.35,0:00:10.86,Default,,0000,0000,0000,,საქმე იმაშია, რომ ყოველი ელემენტი\Nთქვენს ვებ–გვერდზე
Dialogue: 0,0:00:10.86,0:00:12.73,Default,,0000,0000,0000,,ბრაზერისთვის არის ყუთი
Dialogue: 0,0:00:12.73,0:00:15.45,Default,,0000,0000,0000,,იმისდა მიუხედავათ, თქვენ ამსგავსებთ თუ არა\Nმას ყუთს.
Dialogue: 0,0:00:15.45,0:00:18.35,Default,,0000,0000,0000,,მაგალითად, ჰედერი ყუთია..
Dialogue: 0,0:00:18.35,0:00:22.13,Default,,0000,0000,0000,,ეს პარაგრაფიც.. ეს span–იც ყუთია.
Dialogue: 0,0:00:22.13,0:00:25.18,Default,,0000,0000,0000,,ზოგი ყუთი
Dialogue: 0,0:00:25.18,0:00:29.69,Default,,0000,0000,0000,,არის დიდი, ზოგი პატარა, ზოგი ჩამწკრივებული
Dialogue: 0,0:00:29.69,0:00:32.84,Default,,0000,0000,0000,,ზოგი – ბლოკია, როგორც div.\N
Dialogue: 0,0:00:32.84,0:00:35.71,Default,,0000,0000,0000,,მაგრამ ყველა ითვლება ყუთად.
Dialogue: 0,0:00:35.71,0:00:38.76,Default,,0000,0000,0000,,რატომ არის ეს მნიშვნელოვანი?
Dialogue: 0,0:00:38.76,0:00:41.05,Default,,0000,0000,0000,,იმიტომ რომ არსეობს "ყუთის მოდელი"
Dialogue: 0,0:00:41.08,0:00:44.10,Default,,0000,0000,0000,,რომელსაც ხედავთ ამ დიაგრამაზე.
Dialogue: 0,0:00:44.10,0:00:46.03,Default,,0000,0000,0000,,ყოველი ელემენტის ყუთს აქვს
Dialogue: 0,0:00:46.03,0:00:48.51,Default,,0000,0000,0000,,ოთხი ნაწილი: რეალური კონტენტი, განლაგება,
Dialogue: 0,0:00:48.52,0:00:51.47,Default,,0000,0000,0000,,ზღვარი და არშია.
Dialogue: 0,0:00:51.47,0:00:54.44,Default,,0000,0000,0000,,განლაგების, ზღვრის და არშიის შესაქმნელად \Nვიყენებთ CSS–ს.
Dialogue: 0,0:00:54.44,0:00:57.32,Default,,0000,0000,0000,,თქვენ მალე გაიგებთ, რას ნიშნავს ეს\Nყველაფერი სინამდვილეში.
Dialogue: 0,0:00:57.32,0:00:59.18,Default,,0000,0000,0000,,დავწყოთ არშიით.
Dialogue: 0,0:00:59.18,0:01:01.66,Default,,0000,0000,0000,,ესაა გამჭვირვალე სივრცე ყუთის ირგვლივ,
Dialogue: 0,0:01:01.67,0:01:03.82,Default,,0000,0000,0000,,რომელიც გამოჰყოფს ამ ყუთს
Dialogue: 0,0:01:03.82,0:01:06.74,Default,,0000,0000,0000,,სხვა ელემენტებისგან. არშია განისაზღვრება\Nპიქსელებით.
Dialogue: 0,0:01:06.75,0:01:10.17,Default,,0000,0000,0000,,იმისთვის, რომ საინფორმაციო ბლოკს
Dialogue: 0,0:01:10.17,0:01:12.80,Default,,0000,0000,0000,,ყოველი გვერდიდან 15–პიქსელიანი არშია\Nდავუმატოთ,
Dialogue: 0,0:01:12.80,0:01:16.80,Default,,0000,0000,0000,,უბრალოდ დავწერთ: margin:15px
Dialogue: 0,0:01:16.85,0:01:22.28,Default,,0000,0000,0000,,ხედავთ განსხვავებას?
Dialogue: 0,0:01:22.31,0:01:25.03,Default,,0000,0000,0000,,დავუშვათ, \Nყოველ მხარეს განსხვავებული არშია გვინდა.
Dialogue: 0,0:01:25.03,0:01:26.99,Default,,0000,0000,0000,,მაგალითად, უფრო დიდი
Dialogue: 0,0:01:26.99,0:01:29.65,Default,,0000,0000,0000,,ზემოდან და ქვემოდან,\Nვიდრე მარჯვნიდან და მარცხნიდან?
Dialogue: 0,0:01:29.65,0:01:33.04,Default,,0000,0000,0000,,შეგვიძლია ზომები მივუთითოთ საათის\Nისრის მიმართულებით, ვიწყებთ ზემოდან:
Dialogue: 0,0:01:33.04,0:01:39.97,Default,,0000,0000,0000,,ზემოდან 15px, მარჯვნივ 0px, ქვემოთ10px,\Nმარცხნივ 6px.
Dialogue: 0,0:01:39.97,0:01:43.98,Default,,0000,0000,0000,,როგორც ხედავთ, შეგვიძლია
Dialogue: 0,0:01:43.98,0:01:46.36,Default,,0000,0000,0000,,ყოველი გვერდისთვის გვქონდეს განსაზღვრული\Nზომა,
Dialogue: 0,0:01:46.36,0:01:48.81,Default,,0000,0000,0000,,მაგრამ დავუშვათ, მხოლოდ რამდენიმე გვერდის\Nგანსაზღვრა გვინდა?
Dialogue: 0,0:01:48.81,0:01:51.06,Default,,0000,0000,0000,,მაგალითად, გვინდა რომ კატის მარჯვნივ
Dialogue: 0,0:01:51.08,0:01:56.75,Default,,0000,0000,0000,,იყოს რაღაც სივრცე..
Dialogue: 0,0:01:56.76,0:02:01.30,Default,,0000,0000,0000,,და ცოტა ქვემოდანაც..
Dialogue: 0,0:02:01.30,0:02:04.45,Default,,0000,0000,0000,,მაგრამ დანარჩენ გვერდებზე სტანდარტული\Nარშიაც გვაკმაყოფილებს.
Dialogue: 0,0:02:04.45,0:02:06.74,Default,,0000,0000,0000,,არსებობს არშიის სპეციალური მნიშვნელობა,
Dialogue: 0,0:02:06.74,0:02:08.64,Default,,0000,0000,0000,,რომელიც ჩვენს ვებ–გვერდებს
Dialogue: 0,0:02:08.64,0:02:11.00,Default,,0000,0000,0000,,ვიზუალურად კიდევ უფრო მაგარს გახდის.
Dialogue: 0,0:02:11.00,0:02:14.23,Default,,0000,0000,0000,,ჩავსვათ მთელი გვერდი div–ში
Dialogue: 0,0:02:14.23,0:02:17.46,Default,,0000,0000,0000,,მას "კონტეინერის" ID-ს ვანიჭებ.
Dialogue: 0,0:02:17.46,0:02:21.39,Default,,0000,0000,0000,,ჩავსავთ აქ ეს თეგი,
Dialogue: 0,0:02:21.39,0:02:25.95,Default,,0000,0000,0000,,რომელიც ყველაფერს მოიცავს. ახლა დავამატოთ\Nწესი,
Dialogue: 0,0:02:25.95,0:02:29.37,Default,,0000,0000,0000,,რომ div ანიჭებს განს 400px
Dialogue: 0,0:02:29.37,0:02:33.81,Default,,0000,0000,0000,,და სვამს გვერდის ცენტრში.
Dialogue: 0,0:02:33.81,0:02:37.74,Default,,0000,0000,0000,,მე შემეძლო დამეწერა margin-left: 100px
Dialogue: 0,0:02:37.74,0:02:40.46,Default,,0000,0000,0000,,იმიტომ რომ ჩემთვის ესეც \Nდასვამდა სურათს ცენტრში,
Dialogue: 0,0:02:40.46,0:02:43.10,Default,,0000,0000,0000,,მაგრამ შენი ბრაუზერი შეიძლება იყოს\Nუფრო დიდი ან პატარა
Dialogue: 0,0:02:43.10,0:02:45.07,Default,,0000,0000,0000,,და ამიტომ შეთან ის ცენტრში არ იქნებოდა.
Dialogue: 0,0:02:45.08,0:02:46.78,Default,,0000,0000,0000,,რეალურად ახლა გვინდა ვუთხრათ, რომ
Dialogue: 0,0:02:46.86,0:02:49.28,Default,,0000,0000,0000,,"დაწესდეს ნებისმიერი არშია იმ პირობით, რომ
Dialogue: 0,0:02:49.28,0:02:52.82,Default,,0000,0000,0000,,ორივე მხარეს არშიები ტოლი ზომის იქნება.
Dialogue: 0,0:02:52.82,0:02:55.43,Default,,0000,0000,0000,,ზუსტად ამას აკეთებს margin: auto
Dialogue: 0,0:02:55.43,0:02:58.02,Default,,0000,0000,0000,,და ესაა div–ის ცენტრში განთავსების \Nმშვენიერი მეთოდი.
Dialogue: 0,0:02:58.02,0:03:01.47,Default,,0000,0000,0000,,ახლა, რომ div ცენტრშია,
Dialogue: 0,0:03:01.47,0:03:04.01,Default,,0000,0000,0000,,შეიძლება გვინდოდეს მისი უკეთ გამოყოფა
Dialogue: 0,0:03:04.02,0:03:06.30,Default,,0000,0000,0000,,კიდეების გასწვრივ საზღვრის გავლებით.
Dialogue: 0,0:03:06.33,0:03:10.33,Default,,0000,0000,0000,,ამისთვის CSS საზღვრის თვისებას გამოვიყენებთ.
Dialogue: 0,0:03:10.36,0:03:13.48,Default,,0000,0000,0000,,დავუმატოთ div–ს წითელი საზღვარი.
Dialogue: 0,0:03:13.48,0:03:15.28,Default,,0000,0000,0000,,ჩავწეროთ border და განვსაზღვროთ მისი
Dialogue: 0,0:03:15.28,0:03:16.94,Default,,0000,0000,0000,,სამი მახასიათებელი:
Dialogue: 0,0:03:16.94,0:03:19.78,Default,,0000,0000,0000,,სისქე, სტილი და ფერი.
Dialogue: 0,0:03:19.78,0:03:23.47,Default,,0000,0000,0000,,ვიწრო საზღვრისთვის ჩავწერ 1px,
Dialogue: 0,0:03:23.47,0:03:25.63,Default,,0000,0000,0000,,უწყვეტი ხაზისთვის ჩავწეროთ solid
Dialogue: 0,0:03:25.64,0:03:28.97,Default,,0000,0000,0000,,და წითლის ასარჩევად..
Dialogue: 0,0:03:28.97,0:03:31.65,Default,,0000,0000,0000,,ავიღებ ჩემს RGB პალიტრას და
Dialogue: 0,0:03:31.65,0:03:37.77,Default,,0000,0000,0000,,ავირჩევ ამ ხასხასა წითელს.
Dialogue: 0,0:03:37.77,0:03:39.92,Default,,0000,0000,0000,,ისევე, როგორც არშიის შემთხვევაში, აქაც
Dialogue: 0,0:03:39.92,0:03:42.79,Default,,0000,0000,0000,,შეგვიძლია მხოლოდ ერთი ხაზის სისქე \Nგანვსაზღვროთ.
Dialogue: 0,0:03:42.80,0:03:46.08,Default,,0000,0000,0000,,მაგალითად, თუ ზემოდან ძალიან სქელი \Nიისფერი ხაზი გვინდა,
Dialogue: 0,0:03:46.08,0:03:49.24,Default,,0000,0000,0000,,დავამატოთ კიდევ ერთი თვისება: border-top
Dialogue: 0,0:03:49.25,0:03:56.54,Default,,0000,0000,0000,,10px solid purple
Dialogue: 0,0:03:56.54,0:03:59.78,Default,,0000,0000,0000,,ახლა დავუმატოთ სურათს ჩარჩო.
Dialogue: 0,0:03:59.78,0:04:02.22,Default,,0000,0000,0000,,ვცადოთ სხვადასხვა სტილები.
Dialogue: 0,0:04:02.22,0:04:07.60,Default,,0000,0000,0000,,border:6px \Nფერი groove red
Dialogue: 0,0:04:07.60,0:04:12.98,Default,,0000,0000,0000,,არა, groove არ მომწონს
Dialogue: 0,0:04:12.98,0:04:16.40,Default,,0000,0000,0000,,ვცადოთ, double? არც ეს მომწონს,
Dialogue: 0,0:04:16.40,0:04:19.18,Default,,0000,0000,0000,,ვცადოთ ridge\Nაი! ახლა ჰგავს ჩარჩოს.
Dialogue: 0,0:04:19.18,0:04:22.66,Default,,0000,0000,0000,,ახლა დავუმატოთ საზღვარი ჩვენს საინფორმაციო\Nბლოკს
Dialogue: 0,0:04:22.66,0:04:25.98,Default,,0000,0000,0000,,border:
Dialogue: 0,0:04:25.98,0:04:28.40,Default,,0000,0000,0000,,ძალიანაც დიდი არ გვინდა, 2px
Dialogue: 0,0:04:28.40,0:04:31.18,Default,,0000,0000,0000,,სტილი dotted
Dialogue: 0,0:04:31.20,0:04:35.96,Default,,0000,0000,0000,,ფერი.. იყოს ღია–ნაცრისფერი..
Dialogue: 0,0:04:35.96,0:04:38.23,Default,,0000,0000,0000,,შევცვალოთ სტილი dashed
Dialogue: 0,0:04:38.24,0:04:40.96,Default,,0000,0000,0000,,აი, ახლა ისე გამოიყურება, როგორც მინდა.
Dialogue: 0,0:04:40.96,0:04:42.44,Default,,0000,0000,0000,,მაგრამ..
Dialogue: 0,0:04:42.44,0:04:45.02,Default,,0000,0000,0000,,რაღაც ძალიან არ მომწონს.
Dialogue: 0,0:04:45.02,0:04:48.88,Default,,0000,0000,0000,,ხედავთ, როგორ გადაინაცვლა ამ ტექსტმა
Dialogue: 0,0:04:48.88,0:04:51.63,Default,,0000,0000,0000,,"კონტენერის" კიდისკენ?
Dialogue: 0,0:04:51.63,0:04:53.44,Default,,0000,0000,0000,,და არც ეს ტექსტი, საინფორმაციო ბლოკში
Dialogue: 0,0:04:53.44,0:04:56.52,Default,,0000,0000,0000,,არ გამოიყურება კარგად.
Dialogue: 0,0:04:56.52,0:04:59.74,Default,,0000,0000,0000,,მისი წაკითხვა რთულია.
Dialogue: 0,0:04:59.74,0:05:01.76,Default,,0000,0000,0000,,აი, ახლა მოვიდა დრო გამოვიყენოთ განლაგება
Dialogue: 0,0:05:01.76,0:05:03.99,Default,,0000,0000,0000,,თითქმის ყოველთვის,\Nროცა თქვენს ელემენტებს აქვთ
Dialogue: 0,0:05:03.99,0:05:05.66,Default,,0000,0000,0000,,ფონი ან საზღვარი, უნდა განსაზღვროთ
Dialogue: 0,0:05:05.66,0:05:07.63,Default,,0000,0000,0000,,განლაგება, რომ შექმნათ სივრცე
Dialogue: 0,0:05:07.63,0:05:10.09,Default,,0000,0000,0000,,ტექსტსა და კიდეებს შორის.
Dialogue: 0,0:05:10.11,0:05:13.30,Default,,0000,0000,0000,,განვსაზღვროთ განლაგება კონტეინერისთვის.
Dialogue: 0,0:05:13.32,0:05:17.98,Default,,0000,0000,0000,,დავუშვათ, იყოს 15px
Dialogue: 0,0:05:17.99,0:05:21.24,Default,,0000,0000,0000,,აი, გაცილებით უკეთესია.
Dialogue: 0,0:05:21.24,0:05:23.37,Default,,0000,0000,0000,,ახლა იგივე ჩვენს საინფორმციო ბლოკში.
Dialogue: 0,0:05:23.37,0:05:26.58,Default,,0000,0000,0000,,padding:6px\Nმშვენიერია.
Dialogue: 0,0:05:26.58,0:05:29.36,Default,,0000,0000,0000,,სურათისთვის განლაგების განსაზღვრა \Nარ გვჭირდება
Dialogue: 0,0:05:29.36,0:05:31.00,Default,,0000,0000,0000,,მშვენივრად გამოიყურება ჩარჩოში.
Dialogue: 0,0:05:31.01,0:05:33.85,Default,,0000,0000,0000,,აი ასე:
Dialogue: 0,0:05:33.85,0:05:36.18,Default,,0000,0000,0000,,შევქმენით ყუთის მოდელი. არშია, საზღვარი
Dialogue: 0,0:05:36.18,0:05:38.88,Default,,0000,0000,0000,,და განლაგება. მე ვიყენებდი სქელ ხაზებს და\Nკაშკაშა ფერებს
Dialogue: 0,0:05:38.88,0:05:40.39,Default,,0000,0000,0000,,კარგად რომ დაგენახათ ყველაფერი;
Dialogue: 0,0:05:40.39,0:05:42.94,Default,,0000,0000,0000,,თუმცა ახლა ჩემი გვერდი ზედმეტად\Nჭრელია,
Dialogue: 0,0:05:42.96,0:05:44.27,Default,,0000,0000,0000,,თუ გინდათ, შეგიძლიათ უფრო
Dialogue: 0,0:05:44.27,0:05:46.69,Default,,0000,0000,0000,,ნატიფი თეთრი და ნაცრისფერი ფერები\Nგამოიყენეთ.
Dialogue: 0,0:05:46.69,0:05:49.12,Default,,0000,0000,0000,,ნებისმიერ შემთხვევაში,
Dialogue: 0,0:05:49.12,0:05:50.87,Default,,0000,0000,0000,,აუცილებლად უნდა გამოიყენოთ ეს\Nთვისებები,
Dialogue: 0,0:05:50.87,0:05:52.71,Default,,0000,0000,0000,,იმიტომ რომ ისინი განსაზღვრავენ,
Dialogue: 0,0:05:52.00,0:05:53.72,Default,,0000,0000,0000,,როგორ შთაბეჭდილებას ტოვებს