Що таке блокова верстка? Як зверстати просту сторінку сайту самостійно?
Є бажання навчитися робити самостійно сторінки сайтів? Тоді давайте освоїмо, що таке блокова верстка. Верстальники-новачки зустрічають чимало труднощів, у них з`являється безліч запитань. Розглянемо, що являє собою блокова верстка.
важливий рада
застосовуйте візуальний редактор, щоб все було наочніше. Ті, хто добре знають HTML, працюють в блокноті, так як їм все зрозуміло. А новачки можуть скористатися такими програмами, як FrontPage або, наприклад, Dreamweaver.
Види верстки сайтів
Є кілька типів верстки:
Відео: Уроки html. Як зробити сайт
- Таблична.
- Блокова.
- Змішана.
Нас цікавить блокова верстка. У чому її відмінність від табличній? У верстки блоків за допомогою тега DIV є певні переваги:
- Завантаження при дизайні блоками відбувається швидше.
- Вміст блоків відображається (на відміну від таблиць) у міру того, як відбувається завантаження. Як відомо, дані таблиць з`являться тільки після відображення всієї таблиці.
- Код з div-ами легше читається.
Це не всі переваги, якими славиться блокова верстка.
Як змінити розташуванням div-блоків?
У цьому нам допоможе float - це властивість, яка здатна приймати такі значення:
- Вирівнювання по лівому краю - left.
- Для вирівнювання по правому краю - right.
- Елемент залишається там, де був, він нікуди не переміщається, якщо задано none. Дане значення буде за замовчуванням.
Інша важлива властивість, яке нам знадобиться - clear. У нього може бути 4 значення:
- Для установки елемента під попереднім, переміщеним вправо, блоком - right.
- Left встановлює елемент нижче попереднього, який переміщений вліво.
- Both - установка під попереднім переміщеним блоком.
- None говорить про відсутність обмежень по положенню блоку щодо тих елементів, які переміщені.
приклад
Розглянемо, як буде виглядати блокова верстка div. Пишемо наш код:
Під кодом ви бачите результат. Таким чином, на основі декількох властивостей можна управляти розташуванням блоків за своїм бажанням. Переходимо до наступного моменту. У нас використано text-align: center, щоб відцентрувати кожен блок для будь-якого браузера.
Відео: Як створити сайт.Відеоурок по HTML для чайніков.УРОК 1
Як бачите, блокова верстка сайту робиться досить просто. Важливо вивчити і застосовувати на практиці більше властивостей, що дозволить творити більш гнучку структуру сторінок.
Ще дещо важливе
Є одне популярне властивість, яке застосовують у верстці - position, його використовують для позиціонування.
Значення для властивості position:
- Relative - встановлює положення елементів щодо їх вихідних місць. Застосування left, top, righ, bottom зрушує елемент в певному напрямку.
- Static - звичайне відображення елемента. Немає сенсу використовувати right / left, top / bottom - це ні до чого не приведе.
- Absolute - абсолютне позиціонування елемента.
- Fixed - аналогічно absolute. Елемент прив`язаний до певної точки на екрані, але він не змінює своє положення навіть в тому випадку, якщо сторінку гортати.
Багато верстальники помічали, що при застосуванні фіксованого, абсолютного або відносного позиціонування відбувається накладення блоків. І тоді цікаво знати, який з блоків нижче, який вище. Щоб відповісти на це питання, необхідно властивість z-index. Воно вивело верстку блоками на якісно новий рівень. Це дає можливість робити позиціонування не тільки на площині, а й за допомогою третьої осі Z. Значення такого властивості може бути позитивним і негативним.
Створимо 3 блоку. Далі поекспериментуємо з абсолютним позиціонуванням.
Як видно з прикладу, нескладно міняти позиції блоків. На основі того, що ви тепер вмієте, будь зробить елементарну блочну верстку сторінки сайту. А застосовуючи більше властивостей, ви будете вдосконалювати свою майстерність.
