Блочная версткаПринцип блочной верстки состоит в том, что макет страницы разбивается на прямоугольные области — блоки. Каждому из которых потом задается ряд параметров: поля, рамки, отступы, цвет, обтекание и т. д. Ограничений как для оформления, так и для содержимого практически нет. В блок можно вставить текст, изображение, меню навигации, медийный файл, таблицу, список — что угодно. Верстка блоками предоставляет огромное поле для фантазии, какой вид придать веб-странице.
Тег div — главное преимущество блочной верстки сайта над табличной. Он может обозначать и разные функциональные области (меню навигации, шапка, основной блок, подвал), и отдельные их элементы. В HTML теги, как правило, жестко привязаны к своему содержимому. Например, в тег <image> вы никогда не сможете вписать текст, только изображение.
Верстка с помощью div позволяет «играться» с дизайном, делать его намного эффектнее, чем в таблицах. Например, можно сделать красивый общий фон, поверх него расположить блоки с текстом, объемными изображениями, добавить всплывающие окна и выпадающие меню, сколько угодно баннеров — все, что захотите. В результате картинка сайта получится динамичной и «живой». Это называется «верстка слоями». Можно неоднократно усложнять дизайн, при этом его структура не пострадает. С табличной же версткой такие нагромождения не то что недопустимы, они невозможны. Поэтому и дизайн получается плоским.
С технической точки зрения и фиксированная, и резиновая верстка div также оказываются выигрышными.
Главными плюсами можно назвать:
– соответствие кода современным стандартам;
– лаконичность и удобочитаемость кода;
– семантически верный код;
– минимальное время загрузки страницы;
– совместимость не только с мониторами ПК, но и с КПК, iPod, iPhone и другими подобными устройствами.
Чтобы понять, какие преимущества над таблицами дает div верстка, примеры даже не нужны. Однако кое в чем и она не идеальна:
- не имеет смысла рисовать дивами таблицы для отображения на странице каких-либо данных, проще использовать для этого фрагмента табличную верстку;
- некоторые браузеры (в частности, IE 6) отображают страницы некорректно.
Однако обе эти «проблемы» решаются достаточно просто.
Если вы хотите лучше разбираться в деталях верстки, вам будут полезны следующие статьи:
|
|
