Блокова верстка сайту
Ми продовжуємо з Вами вивчати верстку, і сьогодні ми переходимо вже до найцікавішого.
Напевно, Ви вже чули поняття«блочна верстка». Але людині непоінформованому це поняття ні про що не говорить. Тому: хто знає – молодець! А хто не знає – читаємо уважніше.
Блокова верстка - це верстка html-коду web-сторінки за допомогою тегів універсальних контейнерів
Про це я трохи писав у статті «Блокові елементи веб-сторінки». Тут ми поговоримо більш детально і конкретно.
1. Чому блочна верстка?
Колись давно, у давнину наші далекі предки верстали сайти за допомогою таблиць. Всі елементи сторінки розташовувалися в окремих осередках, осередки купно роїлися в інших, більших осередках, а ті в свою чергу лежали в найголовнішому осередку — самій сторінці сайту.
Це було дуже незручно, тому що код виходив занадто перевантаженим і складним для сприйняття, тому що для опису кожного осередку потрібно було використати кілька тегів.
Зараз табличну верстку вже практично ніхто не використовує, хоча деякі елементи сторінки роблять за допомогою таблиць.
Не ворушитимемо старе. Давайте перейдемо до блокової верстки.
Блокова верстка дозволяє будувати структуру сторінки за допомогою окремих блоків (контейнерів)
Переваги блокової верстки перед табличною:
- Кожен блок описується одним тегом;
- Зручно відстежується структура вкладеності контейнерів;
- Контейнери
2. Основа блокової верстки - контейнер
При блоковій верстці всі елементи сторінки складаються з блоків (логічно, чи не так?).
Якщо нам потрібно розташувати кілька блоків горизонтально, тоу властивостях задається параметр “обтікання” (float). Але про це трохи згодом.
Основними властивостями будь-якого блоку є: відступи, межа та поля.
Задаються вони за допомогою css вказівок. Наприклад:
Розберемо цей фрагмент файлу CSS-стилів. Для всіх блоків
- Зовнішні відступи – 10 пікселів з усіх боків;
- Кордон з усіх боків шириною 3 пікселі, чорного кольору, суцільною лінією;
- Поля: зверху – 5 пікселів, праворуч – немає поля, знизу – 20 пікселів, зліва – 10 пікселів.
Вміст блоку може бути будь-що - текст, картинка, список, форма для заповнення, меню навігації, інший блок і т.п. Загалом - будь-які блокові та малі елементи.
3. Важливо при блоковій верстці.
Щоб усі блоки не зливались у Вас у коді сторінки, а також для того, щоб можна було легко прописати стилі для кожного блоку – потрібно надавати кожному блоку ідентифікатори. Це робиться за допомогою атрибутів тега
- id="назва ідентифікатора" — застосовується в тому випадку, якщо на сторінці всього один блок з такою назвою (наприклад, блок шапки — header);
- class="назва класу" — застосовується, якщо на сторінці може бути декілька таких блоків (наприклад, пункти меню)
Бажаю Вам успіхів у освоєнні навичок веб-майстра!