Що таке блочна верстка Як зверстати просту сторінку сайту самостійно

Чи є бажання навчитися робити самостійно сторінки сайтів? Тоді давайте освоїмо, що таке блокова верстка. Верстальники-новачки зустрічають низку труднощів, у них виникає безліч питань. Розглянемо, що є блочна верстка.

Принципова порада

Види верстки веб-сайтів

Є кілька типів верстки:

Нас цікавить блокова верстка. У чому її відмінність від табличної? У верстки блоків за допомогою тега DIV є певні переваги:

Завантаження при дизайні блоками відбувається швидше.
Вміст блоків відображається (на відміну від таблиць) у міру завантаження. Як відомо, дані таблиць з'являться лише після відображення всієї таблиці.
Код із div-ами легше читається.

Це не всі плюси, якими славиться блокова верстка.

Як змінити розташування div-блоків?

У цьому нам допоможе float – це властивість, яка здатна набувати наступних значень:

Вирівнювання лівим краєм – left.
Для вирівнювання праворуч - right.
Елемент залишається там, де був, він нікуди не переміщається, якщо вказано none. Це значення буде по дефлоту.

Інша важлива якість, яка нам знадобиться - clear. У нього може бути 4 значення:

Для встановлення елемента під попереднім, переміщеним праворуч, блоком – right.
Left встановлює елемент нижче попереднього, який переміщений вліво.
Both - установка під попереднім переміщеним блоком.
None говорить про відсутність обмежень щодо положення блоку щодо тих частин, які переміщені.

Приклад

Розглянемо, як буде виглядатиблокова верстка div. Пишемо наш код:

Під кодом ви бачите результат. Таким чином, на основі декількох властивостей можна керувати розташуванням блоків за своїм бажанням. Перебігаємо до наступного моменту. У нас використано text-align:center, щоб відцентрувати кожен блок для будь-якого браузера.

Чи бачите, блочна верстка веб-сайту робиться досить легко. Важливо вивчити і використовувати практично більше властивостей, що дозволить створювати більш гнучку структуру сторінок.

Ще дещо принципове

Є одна популярна якість, яке застосовують у верстці – position, його використовують для позиціонування.

Значення для характеристики position:

Relative - встановлює положення частин щодо їх початкових місць. Застосування left, top, righ, bottom зсуває елемент у певному напрямку.
Static – звичайне відображення елемента. Нема рації використовувати right/left, top/bottom – це ні до чого не приведе.
Absolute – абсолютне розміщення елемента.
Fixed – аналогічно до absolute. Елемент прив'язаний до певної точки на екрані, але він не змінює своє положення навіть у тому випадку, якщо сторінку гортати.

Багато верстальників помічали, що з застосуванні фіксованого, абсолютного чи відносного позиціонування відбувається накладання блоків. Тоді й цікаво знати, який із блоків нижчий, який вищий. Щоб відповісти це питання, необхідно якість z-index. Воно вивело верстку блоками на якісно новий рівень. Це дає можливість робити розміщення не тільки на поверхні, але і за допомогою третьої осі Z. Значення такого показника може бути позитивним і негативним.

Зробимо 3 блоки. Далі поекспериментуємо забсолютним позиціонуванням.

Як бачимо з прикладу, неважко змінити позиції блоків. На основі того, що ви зараз вмієте, будь-який зробить просту блокову верстку сторінки сайту. А застосовуючи більше параметрів, ви покращуватимете свою майстерність.