Що таке "верстка div" при створенні сайту, її плюси і мінуси

Що таке "верстка div" при створенні сайту, її плюси і мінуси

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

Шаблон або макет - це ще не готовий сайт, це якась створена дизайнером модель, на основі якої в подальшому може бути створений повноцінний сайт. З точки зору програмування, шаблон - це набір певних правил для відображення інформації. Для створення найпростішого статичного сайту зазвичай використовується шаблон HTML. HTML є стандартною мовою розмітки гіпертексту (документів) в мережі Інтернет.


Верстка макета сайту - це процес формування його веб-сторінок за виготовленим дизайнером шаблоном. Цим видом діяльності займається верстальник сайтів. Основне завдання верстальника полягає у створенні HTML-коду, який дозволяє розміщувати текст, зображення та інші елементи веб-сторінки в певних місцях документа і відображати їх у вікні будь-якого сучасного Інтернет-браузера згідно з розробленим дизайнером макетом. Під час своєї роботи верстальник повинен постійно стежити за тим, щоб зверстану ним частину макета однаково коректно відображалася у всіх браузерах. Кількома роками раніше HTML-верстка сайту ґрунтувалася на використанні таблиць. З часом у HTML-мовах з 'являються нові елементи (теги). Одним з таких елементів став div. Якщо протягом останніх років верстка div була найбільш краща при створенні сторінок сайту, сьогодні вона є обов 'язковою. Зараз за допомогою таблиць сайти практично не верстаються. Замість поняття "верстка div" найбільш часто вживається поняття "верстка шарами" або "верстка блоками".

Div - це тег, за допомогою якого можна вибрати окремий фрагмент HTML коду сторінки. Цей тег є блочним елементом.

Тег div має два основні параметри:

  • Align, що дозволяє вирівнювати його вміст (ліворуч, праворуч сторінки, центр або ширину);
  • Title, що додає підказку до його вмісту.

Верстка div: основні плюси:

  • невеликий порівняно з табличною версткою код розмітки;
  • можливість створення "гумового" дизайну сторінки;
  • швидке завантаження сторінок у переглядачі користувача;
  • полегшення роботи зі стилями (CSS), присвоєння стилю елементам за допомогою id.

Верстка div: основні мінуси:

  • неможливість правильного відображення сторінки в деяких застарілих браузерах (IE6);
  • складність розміщення блоків на сторінці та управління ними.

Залежно від створюваного проекту допускається поєднання блочної та табличної верстки.

Чому в даний час більшість професіоналів відходить від використання таблиць при верстці?

У разі застосування табличної верстки сайту його код виходить величезним, що ускладнює подальшу роботу над ним програмістів. Для того щоб знайти зроблену в такому HTML-коді помилку, знадобиться порівняно велика кількість часу. Таблична верстка створює додаткове навантаження на веб-сервер, тим самим уповільнюючи його роботу, а значить, уповільнюючи процес видачі інформації браузером. У результаті сторінка сайту досить довго завантажується.

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