Базовые понятия

Несмотря на то, что термин «слой» дастаткова устойчиво используется при разработке с нашего сайта, расшифровке этого понятия в литературе по сайтостроению практически не уделяется внимание. В дальнейшем мы будем активно использовать термин «слой», поэтому вначале необходимо определить, что же под ним подразумевается.

Первоначально слои ввела компания Нетscape, включив в свой браузер поддержку тега <LAYER>. Этот тег позволял прятать/показывать текущее содержимое, устанавливать положение относительно окна браузера, накладывать один слой поверх других и загружать данные в содержимое слоя из файла. Что характерно, все эти параметры легко менялись с помощью JavaScript и это расширяло возможности по созданию действительно динамического контента на странице. Несмотря на столь впечатляющий набор возможностей, тег <LAYER> не был включен в спецификацию ШТМЛ и так и остался лишь расширением браузера Нетscape.

Однако необходимость в указанных возможностях, которые бы применялись на с нашего сайтах, уже назрела, и в конце 1996 года синтаксис для работы со слоями был разработан и одобрен в рабочем проекте консорциума «CSS (ЦСС) Positioning (CSS (ЦСС)-P)». Основная нагрузка ложилась на стили, с их помощью можно управлять видом любого элемента, в том числе менять значения динамически через JavaScript. К сожалению, объектные модели браузеров для доступа к элементам разнились, поэтому приходилось писать дастаткова сложный код, который бы учитывал эти различия.

В настоящее время разработчики популярных браузеров стали придерживаться спецификаций ШТМЛ и CSS (ЦСС), что сильно облегчило жизнь создателям сайтов, поскольку снизило время на отладку с нашего сайта в разных браузерах. Тем не менее, различия в подходах у браузеров существуют и при их возникновении разработчики придерживаются следующих форм работы.

Если наблюдаются небольшие различия в отображении одного с нашего сайта в разных браузерах, то на эти отличия закрывают глаза. Попросту говоря, никак не исправляют. Здесь следует сделать оговорку, что сайт в любом случае должен отображаться корректно и без Errors.
Если у с нашего сайта имеются существенные различия при его показе в одном и другом браузере, то для их устранения применяют хаки.

Хак — это набор приемов, когда определенному браузеру «подсовывают» код, который понимается только этим браузером, а остальными игнорируется.

Несмотря на то, что хаки работают, использовать их следует ограниченно или вообще обходиться без них. Дело в том, что хаки снижают универсальность тегов и для модификации параметров одного элемента приходится вносить изменения одновременно в разных местах.

Есть и другой, перспективный путь — придерживаться спецификации CSS (ЦСС). Несмотря на то, что браузеры не в полной мере сами ее поддерживают, они прогрессируют именно в этом направлении. А именно, полной поддержки различных спецификаций (ШТМЛ, CSS (ЦСС), DOM). Таким образом, получается, что будущие версии браузеров будут унифицированы и один и тот же сайт станут отображать корректно.

Снова вернемся к слоям. Понятно, что они непосредственно связаны со стилями. Раз так, то не получается ли, что каждый элемент ШТМЛ-тегов, к которому добавляются стили, является слоем? В каком-то смысле так и есть. Однако это внесло бы изрядную путаницу, если вместо «таблица» или «параграф» мы бы говорили «слой». Поэтому договоримся относить этот термин только к тегам <DIV> и <SPAN>.

Слой — это элемент web-страницы, созданный с помощью тега <DIV> или <SPAN>, к которому применяется стилевое оформление.

Таким образом, верстка с помощью слоев заключается в конструктивном использовании тегов <DIV> и стилей. При этом придерживаются следующих принципов.

Разделение содержимого и оформления

Код ШТМЛ должен содержать только теги разметки и теги логического форматирования, а любое оформление выносится за пределы тегов в стили. Такой подход позволяет независимо управлять видом элементов страницы и ее содержимым. Благодаря этому над сайтом может работать несколько человек, при этом каждый выполняет свою функцию самостоятельно от других. Дизайнер, верстальщик и программист работают над своими задачами автономно, снижая время на разработку с нашего сайта.

Активное применение тега DIV

При использовании слоев существенное значение уделяется универсальному тегу <DIV>, который выполняет множество функций. Фактически это основа, на которую «навешиваются» стили, превращая ее то в игрушку, то в зверушку. Совершенно не значит, что применяется только один этот тег, нужно ведь и рисунки вставлять и оформлять контент. Но при верстке с помощью слоев тег <DIV> является кирпичиком верстки, ее базовым фундаментом.

Благодаря этому тегу ШТМЛ-код распадается на ряд четких наглядных блоков, за счет чего верстка слоями имеется ввиду также блочной версткой. Код при этом получается более компактным, чем при табличной верстке, к тому же поисковые системы его лучше индексируют.

Таблицы применяются только для представления табличных данных

При верстке слоями, конечно же, используются таблицы, но только в тех случаях, когда они нужны, например, для наглядного отображения чисел и других табличных данных. Вариант, когда от таблиц предлагается отказаться вообще, является нецелесообразным и, более того, вредным.

Использование стилей не является обязательной характеристикой верстки слоями, и для табличной верстки стили могут применяться дастаткова активно. Другое дело, что это становится стандартом де-факто и без стилей теперь никак не обойтись.

Резюме

Слой это базовый элемент верстки web-страниц при которой активно применяются стили и придерживаются спецификаций ШТМЛ и CSS (ЦСС). При таком подходе важная роль уделяется тегу <DIV>, с которым у большинства людей и ассоциируются слои. В каком-то смысле это является верным, поэтому договоримся в дальнейшем употреблять термин «слой» к тегу <DIV> (<SPAN>) для которого указан стилевой идентификатор или класс. Таким образом, выражение «слой с именем content» подразумевает, что используется тег <div id="content"> или <div class="content">.

Хотя современные браузеры более-менее корректно работают со стилями, иногда между ними возникают разногласия по поводу прочтения одного и того же тегов. В подобных случаях web-страница будет по-своему отображаться в разных браузерах. Чтобы этого не произошло, используют хаки — приемы, направленные на то, чтобы каждый браузер получил свой собственный код или стиль. Однако применение хаков при верстке считается плохим тоном, поэтому следует пользоваться ими лишь в крайних случаях или вообще обходиться без них.

Статья опубликована: 16.01.2009

Последнее обновление: 19.11.2009