1. Основні поняття
Багато web-дизайнери віддають перевагу блокової верстці сайту. яка здійснюється за допомогою тега
Блок - це звичайна прямокутна область, що володіє рядом властивостей, таких як: рамка, поля і відступи (рис. 1). Вмістом блоку може бути що завгодно - текст, картинки, списки, форми для заповнення, меню навігації тощо
Рамка (border) - це контур, для якого можна задати такі характеристики як товщина, колір і тип (пунктирна, суцільна, точкова).
Поля (padding) - відділяють вміст блоку від його рамки, щоб текст, наприклад, не був «впритул» до стінок блоку.
Відступи (margin) - це порожній простір між різними блоками, що дозволяє на заданій відстані розташувати два блоку відносно один одного.
Блоки, як і таблиці - це елементи, завжди розташовуються на сторінці вертикально. Тобто, якщо в коді сторінки записані підряд два блоки, то відобразяться вони в браузері один під іншим. Якщо нам потрібно розташувати кілька блоків горизонтально, то в їх властивості задається такий параметр як «обтікання» (float). Але про це трохи пізніше.
У даній роботі ми створимо web-сторінку з блоків. Спочатку створимо контейнер, в який, як в коробку складемо наші блоки. Для наочності кожен блок буде мати свій колір. Кінцевий результат повинен бути таким як на рис. 2.
Контейнер буде містити в собі п'ять блоків:
TOP - шапка сайту, зазвичай містить логотип компанії, назва, заголовки і слогани, пошук, навігацію;
CENTER - містить основний текст сторінки;
FOOTER - підвал сайту, що містить авторські права та інші відомості про сайті, можливо, дублювати навігацію, що є ознакою хорошого тону.
Для тесту нашого сайту нам знадобляться як мінімум три найпопулярніших браузера - Opera, Fire Fox, Internet Explorer.
Опис web-сторінки в основному робиться в CSS документі.
2. «Фіксований» дизайн методом блочної верстки
1. Створіть в блокноті новий документ з розширенням css і збережіть його під ім'ям mystyle.css.
2. Створіть HTML-документ і збережіть його в тій же папці.
Ми визначили нашу сторінку відповідно до DOCTYPE під назвою Strict 1.0.
Вимоги тут вельми суворі - все теги, які не мають закриває пари, повинні закінчуватися пробілом зі слешем / перед закриває кутовий дужкою. Але ось сам DOCTYPE теж виглядає як тег! Чому ж у нього немає цієї прогалини зі слешем? А просто! Захотілося так розробникам цих суворих правил. Але це єдиний випадок, де правило не працює.
4. Одним рядком між тегами
і приєднайте документ mystyle.css до документа HTML (рисунок 3).5. У таблиці стилів наберіть код як на малюнку 4.
# Цей знак говорить, що елемент є унікальним атрибутом і використовується в HTML документі в тезі div один раз.
6. Додайте в mystyle.css шапку сайту (малюнок 5).
7. Додамо HTML документ наступного код між тегами body (рисунок 6).
І у Вас повинно вийти наступне (рис. 7).
Наступним етапом верстки сайту є розташування трьох блоків послідовно по горизонталі, для цього в блокової верстці, як правило, використовується елемент float. Він дозволить обтікати іншим елементам наш блок праворуч або ліворуч.
8. Відкрийте css-документ і додайте наступний код (рисунок 8).
9. Відразу після закривається тега
вставимо наступний код (малюнок 9).10. Відкрийте HTML-документ в браузері. Має вийти наступне (рисунок 10).
11. Тепер додайте блок footer самостійно. Браузер повинен показати наступне (рисунок 11).
Розглянемо атрибути relative і absolute.
Іноді буває необхідно розмістити якийсь блок в строго заданому положенні відносно батьківського.
Розглянемо найпростіший код.
- Створіть html-документ, в тілі якого розмістіть код, як на малюнку 12.
Припустимо, ми хочемо розмістити дочірній блок в 20 пікселях лівіше і нижче верхнього лівого кута батьківського блоку.
Спробуємо зробити так (тобто абсолютно позиціонуємо дочірній блок щодо батьківського).
2. Створіть таблицю стилів, в якій наберіть код з лістингу на малюнку 13.
3. Перевірте web-сторінку в браузері. Ось що вийшло (рисунок 14). Це не те, що ми хочемо, чи не так? Наш дочірній елемент пішов не до мами, а до дідуся (тобто BODY)!
Проблема вирішується досить просто: батькові чи матері додатково задається position: relative;
4. Змініть код своєї таблиці стилів відповідно до малюнком 15.
5. Перевірте web-сторінку в браузері. Результат на малюнку 16. Оцініть різницю.
Створити web-сторінку, зовнішній вигляд якої зображено нижче на малюнку 17
3. «Гумовий» сайтметодом блокової верстки
У завданнях 1 і 2 ми розглянули «фіксований» дизайн методом блочної верстки, тому що всі блоки мали точне значення по ширині і висоті в пікселах.
У разі «гумового» дизайну розміри блоків задаються у відсотках від ширини екрану. По висоті розмір блоку може визначатися вмістом блоку.
Завдання 3. Створимо «гумовий» блоковий макет як на малюнку 18.
1. Створіть HTML-документ з кодом, як на малюнку 19. Збережіть документ.
2. Створіть таблицю стилів як на малюнку 20. Збережіть документ. Ви повинні отримати результат ка на малюнку 18.
3. Змінюючи розміри браузера, проаналізуйте поведінку макета.
4. Комбінована блокова верстка
Комбінована блокова верстка включає як блоки фіксованої ширини, так і блоки в процентному відношенні до ширини екрану.
Завдання 4. Створимо комбінований блоковий макет як на малюнку 21.
1. Створіть HTML-документ з кодом, як на малюнку 22.
2. Створіть таблицю стилів як на малюнку 23. Збережіть документ. Ви повинні отримати результат ка на малюнку 21.
3. Змінюючи розміри браузера, проаналізуйте поведінку макета.
Вимоги до макету: