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

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

Важлива рада

Застосовуйте візуальний редактор, щоб все було наочніше. Ті, хто добре знають HTML, працюють в блокноті, так як їм все зрозуміло. А новачки можуть скористатися такими програмами, як FrontPage або, наприклад, Dreamweaver.

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

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

1. Таблична.
2. Блокова.
3. Змішана.

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

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

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

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

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

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

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

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

Приклад

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

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

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

Ще дещо важливе

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

Значення для властивості position:

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

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

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

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