[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.14,0:00:04.50,Default,,0000,0000,0000,,Я створюю сторінку для Хопера, одного з\Nанімаційних персонажів сайту Khan Academy.
Dialogue: 0,0:00:04.72,0:00:09.52,Default,,0000,0000,0000,,Вона містить в собі зображення, кілька класних\Nпосилань та абзац.
Dialogue: 0,0:00:10.36,0:00:15.52,Default,,0000,0000,0000,,Я думаю, що це зображення Хопера \Nматиме кращий вигляд,
Dialogue: 0,0:00:15.52,0:00:17.77,Default,,0000,0000,0000,,якщо розмістити його біля абзацу. \NТому я збираюсь вирізати його
Dialogue: 0,0:00:17.77,0:00:19.99,Default,,0000,0000,0000,,і вставити ось тут.
Dialogue: 0,0:00:20.30,0:00:23.56,Default,,0000,0000,0000,,Хм. Добре, це виглядає не настільки добре,\Nнаскільки я очікувала.
Dialogue: 0,0:00:23.80,0:00:25.87,Default,,0000,0000,0000,,Текст починається знизу зображення.
Dialogue: 0,0:00:26.04,0:00:28.81,Default,,0000,0000,0000,,Я сподівалась, що текст буде\Nбіля зображення,
Dialogue: 0,0:00:28.81,0:00:30.65,Default,,0000,0000,0000,,так як в газетах чи журналах.
Dialogue: 0,0:00:31.11,0:00:33.96,Default,,0000,0000,0000,,Для цього нам потрібна нова\Nвластивість CSS: "float" (обтікання).\N
Dialogue: 0,0:00:34.07,0:00:37.25,Default,,0000,0000,0000,,Це спосіб розміщувати елементи\Nодин навколо одного,
Dialogue: 0,0:00:37.25,0:00:39.82,Default,,0000,0000,0000,,і він просто ідеальний, для того щоб\Nзробити обтікання зображення текстом.
Dialogue: 0,0:00:39.99,0:00:43.96,Default,,0000,0000,0000,,Тому ми йдемо вгору до правила "pic"\Nі пишемо: "float:".
Dialogue: 0,0:00:44.30,0:00:48.08,Default,,0000,0000,0000,,Щоб написати значення, нам потрібно\Nвирішити, з якого боку буде зображення:
Dialogue: 0,0:00:48.08,0:00:50.42,Default,,0000,0000,0000,,справа чи зліва від тексту.
Dialogue: 0,0:00:50.77,0:00:52.01,Default,,0000,0000,0000,,Спробуймо зліва.
Dialogue: 0,0:00:52.74,0:00:54.47,Default,,0000,0000,0000,,Чудово. Ідеально!
Dialogue: 0,0:00:54.59,0:00:57.35,Default,,0000,0000,0000,,Хоча... не зовсім ідеально,
Dialogue: 0,0:00:57.35,0:01:00.21,Default,,0000,0000,0000,,тому що тест розміщений\Nнадто близько до зображення.
Dialogue: 0,0:01:00.32,0:01:02.43,Default,,0000,0000,0000,,Ви пам'ятаєте, яку властивість \Nми маємо використати,
Dialogue: 0,0:01:02.43,0:01:04.44,Default,,0000,0000,0000,,щоб відділити текст від зображення?
Dialogue: 0,0:01:04.76,0:01:07.22,Default,,0000,0000,0000,,Це частина блокової моделі,\Nяку ми щойно вивчили.
Dialogue: 0,0:01:07.42,0:01:08.61,Default,,0000,0000,0000,,Зовнішні відступи. (Margin).
Dialogue: 0,0:01:08.90,0:01:13.66,Default,,0000,0000,0000,,Додамо відступи справа та\Nвідступи знизу до зображення,
Dialogue: 0,0:01:13.66,0:01:15.50,Default,,0000,0000,0000,,щоб дати йому трохи більше\Nвільного простору.
Dialogue: 0,0:01:16.08,0:01:21.98,Default,,0000,0000,0000,,Ах, добре, так значно краще.
Dialogue: 0,0:01:22.27,0:01:26.07,Default,,0000,0000,0000,,Не лише зображення можуть\Nобтікатися текстом.
Dialogue: 0,0:01:26.61,0:01:28.59,Default,,0000,0000,0000,,Наприклад, нам потрібно щось таке,\Nяк бокова панель.
Dialogue: 0,0:01:29.08,0:01:31.33,Default,,0000,0000,0000,,Як щодо цього списку посилань?
Dialogue: 0,0:01:31.75,0:01:34.85,Default,,0000,0000,0000,,Ми можемо взяти цей список\Nі розмістити його справа.
Dialogue: 0,0:01:35.12,0:01:38.10,Default,,0000,0000,0000,,Додаймо правило для #hopper-links
Dialogue: 0,0:01:38.10,0:01:40.75,Default,,0000,0000,0000,,і розмістімо його справа так, щоб його\Nобтікав інший текст.
Dialogue: 0,0:01:41.29,0:01:44.37,Default,,0000,0000,0000,,Добре, текст його обтікає, але\Nпосилання забирають надто багато місця,
Dialogue: 0,0:01:44.37,0:01:46.44,Default,,0000,0000,0000,,більше, ніж я б хотіла.
Dialogue: 0,0:01:46.73,0:01:50.52,Default,,0000,0000,0000,,Обмежмо ширину до 30%,
Dialogue: 0,0:01:50.52,0:01:55.08,Default,,0000,0000,0000,,щоб посилання завжди займали 30%\Nсторінки,
Dialogue: 0,0:01:55.08,0:01:59.26,Default,,0000,0000,0000,,а решта сторінки, 70%, була заповнена\Nіншими елементами.
Dialogue: 0,0:01:59.45,0:02:01.93,Default,,0000,0000,0000,,Загалом, щоразу, як ви використовуєте\Nвластивість float для , ви мусите додавати ширину.
Dialogue: 0,0:02:02.12,0:02:04.98,Default,,0000,0000,0000,,Оскільки в іншому випадку \Nзайматиме все вільне місце,
Dialogue: 0,0:02:04.98,0:02:06.67,Default,,0000,0000,0000,,і жоден з елементів не зможе \Nйого обтікати.
Dialogue: 0,0:02:07.11,0:02:10.97,Default,,0000,0000,0000,,Здається, тут також потрібний \Nвідступ зліва.
Dialogue: 0,0:02:11.41,0:02:12.85,Default,,0000,0000,0000,,Добре.
Dialogue: 0,0:02:13.40,0:02:18.15,Default,,0000,0000,0000,,Тепер погляньте на нижній колонтитул\Nз контактами Хопера внизу сторінки.
Dialogue: 0,0:02:18.54,0:02:21.67,Default,,0000,0000,0000,,Сталось щось дивне, оскільки він\Nперекриває нашу бокову панель.
Dialogue: 0,0:02:22.12,0:02:23.69,Default,,0000,0000,0000,,І це тому, що він обгортає інші елементи.
Dialogue: 0,0:02:24.08,0:02:25.95,Default,,0000,0000,0000,,Однак ми не хочемо, щоб колонтитул\Nщось обгортав.
Dialogue: 0,0:02:26.16,0:02:28.20,Default,,0000,0000,0000,,Ми хочемо, щоб він завжди був\Nз самого низу,
Dialogue: 0,0:02:28.20,0:02:29.62,Default,,0000,0000,0000,,оскільки це нижній колонтитул.
Dialogue: 0,0:02:30.04,0:02:34.07,Default,,0000,0000,0000,,Щоб він нічого не обгортав, ми використаємо\Nвластивість "clear" (очищення).
Dialogue: 0,0:02:34.46,0:02:36.58,Default,,0000,0000,0000,,і напишемо "clear: both".
Dialogue: 0,0:02:36.86,0:02:37.88,Default,,0000,0000,0000,,Хах.
Dialogue: 0,0:02:38.11,0:02:40.23,Default,,0000,0000,0000,,Ми можемо використати\N"clear: left" або "clear: right",
Dialogue: 0,0:02:40.23,0:02:42.09,Default,,0000,0000,0000,,якщо ми хочемо, щоб він не огортав
Dialogue: 0,0:02:42.09,0:02:44.44,Default,,0000,0000,0000,,лише елементи зліва чи справа.
Dialogue: 0,0:02:44.52,0:02:47.66,Default,,0000,0000,0000,,Але переважно нам потрібно,\Nщоб він взагалі нічого не огортав,
Dialogue: 0,0:02:47.66,0:02:49.05,Default,,0000,0000,0000,,тому ми кажемо "clear: both".
Dialogue: 0,0:02:49.32,0:02:52.13,Default,,0000,0000,0000,,Тепер це виглядає яксправжня веб-сторінка.
Dialogue: 0,0:02:52.32,0:02:54.82,Default,,0000,0000,0000,,Ми маємо основну частину, бокову панель\Nта нижній колонтитул.
Dialogue: 0,0:02:55.03,0:03:00.02,Default,,0000,0000,0000,,Насправді, тепер ви вже знаєте властивості\NCSS, які створюють розмітку більшості сторінок.
Dialogue: 0,0:03:00.28,0:03:03.17,Default,,0000,0000,0000,,Додайте до  ширину, висоту,\Nзовнішні та внутрішні відступи,
Dialogue: 0,0:03:03.17,0:03:04.73,Default,,0000,0000,0000,,обтікання текстом або його відміну,
Dialogue: 0,0:03:04.73,0:03:08.31,Default,,0000,0000,0000,,і всі види розміток сторінок\Nбудуть до ваших послуг.
Dialogue: 0,0:03:08.31,0:03:12.40,Default,,0000,0000,0000,,Переклад на українську мову: Зоряна Гаврилюк, рев'юер: Юлія Білаш, Благодійний фонд "MagneticOne.org"