Div верстка блочная html и css. Блочная верстка: что это и зачем она нужна? Как разбить макет страницы на секции
Несмотря на то, что термин «слой» достаточно устойчиво используется при разработке
сайта, расшифровке этого понятия в литературе по сайтостроению практически не
уделяется внимание. В дальнейшем я буду активно использовать термин «слой»,
поэтому вначале необходимо определить, что же под ним подразумевается.
Первоначально слои ввела компания Netscape, включив в свой браузер поддержку
тега
. Этот тег позволял прятать/показывать
текущее содержимое, устанавливать положение относительно окна браузера, накладывать
один слой поверх других и загружать данные в содержимое слоя из файла. Все эти параметры легко менялись с помощью JavaScript и это расширяло возможности
по созданию действительно динамического контента на странице. Несмотря на столь
впечатляющий набор возможностей, тег
не был включён в спецификацию HTML и остался лишь расширением браузера
Netscape.
Однако необходимость в указанных возможностях уже назрела, и в конце 1996 года синтаксис для работы со слоями был разработан
и одобрен в рабочем проекте консорциума «CSS Positioning (CSS-P)». Основная
нагрузка ложилась на стили, с их помощью можно управлять видом любого элемента,
в том числе менять значения динамически через JavaScript. К сожалению, объектные
модели браузеров для доступа к элементам различались, поэтому приходилось писать
достаточно сложный код, который бы учитывал эти особенности.
В настоящее время разработчики популярных браузеров стали придерживаться спецификаций
HTML и CSS, что сильно облегчило жизнь создателям сайтов, поскольку это снизило
время на отладку сайта в разных браузерах. Тем не менее, различия в подходах
у браузеров существуют и при их возникновении разработчики придерживаются следующих
форм работы.
Если наблюдаются небольшие различия в отображении одного сайта в разных
браузерах, то на эти отличия закрывают глаза. Попросту говоря, никак не исправляют.
Посетители в любом случае не будут попиксельно сравнивать сайт в разных браузерах. Здесь следует сделать оговорку, что сайт в любом случае должен отображаться
корректно и без ошибок.
Если у сайта имеются существенные различия при его показе в одном и другом
браузере, то для их устранения применяют хаки.
Хак
— это набор приемов, когда определённому браузеру
«подсовывают» код, который понимается только этим браузером, а остальными игнорируется.
Несмотря на то, что хаки работают, использовать их следует ограниченно или
вообще обходиться без них. Дело в том, что хаки снижают универсальность кода и
для модификации параметров одного элемента приходится вносить изменения одновременно
в разных местах.
Есть и другой, перспективный путь — придерживаться спецификации CSS. Несмотря
на то, что браузеры не в полной мере сами её поддерживают, они прогрессируют
именно в направлении полной поддержки различных спецификаций
(HTML, CSS, DOM). Таким образом, получается, что будущие версии браузеров будут
унифицированы и один и тот же сайт станут отображать корректно.
Снова вернемся к слоям. Понятно, что они непосредственно связаны со стилями.
Раз так, то не получается ли, что каждый элемент HTML-кода, к которому добавляются
стили, является слоем? В каком-то смысле так и есть. Однако это внесло бы изрядную
путаницу, если вместо «таблица» или «абзац» мы бы говорили «слой». Поэтому
договоримся относить этот термин только к тегам
.
В HTML4 и XHTML слой — это элемент веб-страницы, созданный с помощью
тега
,
к которому применяется стилевое оформление.
Таким образом, выражение «блочная вёрстка» или вёрстка с помощью слоёв заключается в конструктивном использовании
тегов
и стилей. При этом придерживаются
следующих принципов.
Разделение содержимого и оформления
Код HTML должен содержать только теги разметки и теги логического форматирования,
а любое оформление выносится за пределы кода в стили. Такой подход позволяет
независимо управлять видом элементов страницы и её содержимым. Благодаря этому
над сайтом может работать несколько человек, при этом каждый выполняет свою
функцию самостоятельно от других. Дизайнер, верстальщик и программист работают
над своими задачами автономно, снижая время на разработку сайта.
Активное применение тега
При блочной вёрстке существенное значение уделяется универсальному тегу
, который выполняет множество функций.
Фактически это основа, на которую «навешиваются» стили, превращая её то в игрушку,
то в зверушку. Совершенно не значит, что применяется только один этот тег, нужно
ведь и рисунки вставлять и оформлять текст. Но при вёрстке с помощью слоёв тег
является кирпичиком вёрстки, её базовым
фундаментом.
Благодаря этому тегу HTML-код распадается на ряд чётких наглядных блоков, код при этом получается более компактным, чем при табличной вёрстке, к тому
же поисковые системы его лучше индексируют.
Таблицы применяются только для представления табличных данных
При блочной вёрстке, конечно же, используются таблицы, но только в тех случаях,
когда они нужны, например, для наглядного отображения чисел и других табличных
данных. Вариант, когда от таблиц предлагается отказаться вообще, является нецелесообразным
и, более того, вредным.
Подведу итоги. В HTML4 и XHTML слой это базовый элемент вёрстки веб-страниц, при которой активно применяются
стили и придерживаются спецификаций HTML и CSS. При таком подходе важная роль
уделяется тегу
, с которым у большинства
людей и ассоциируются слои. В каком-то смысле это является верным, поэтому договоримся
в дальнейшем употреблять термин «слой» к тегу
для которого указан стилевой идентификатор
или класс. Таким образом, выражение «слой с именем content» подразумевает, что
используется тег
или
.
В HTML5 добавлено несколько новых тегов разметки для обозначения разных типовых блоков страницы. К примеру,
и