Слои и работа с ними

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

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

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

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

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

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

Слой представляют собой прямоугольный блок, который может содержать различные объекты - текст, графику, таблицы. Допускается применение нескольких слоев в пределах одного документа, которые могут взаимно перекрываться, с помощью чего можно добиваться различных интересных эффектов. Кроме того, содержимое слоя в любой момент можно отредактировать или вообще удалить, не трогая элементы других слоев. Это гораздо удобнее, чем заново создавать картинку (что приходилось бы делать при невозможности использования слоев). Слои давно уже стали привычной технологией для пользователей профессиональных графических и издательских пакетов. Если бы Adobe Photoshop не работал бы со слоями, он стоял бы на одной ступеньке со старым уродливым карликом Paintbrush'ем из состава Windows.

Применение слоев позволяет создать на странице некоторое подобие трехмерного пространства, хотя на самом деле это лишь плоские слои с заданным порядком перекрытия, как в колоде карт. При помощи таблиц стилей CSS возможно задание различных свойств слоям и позиционировать их. Это открывает перед web-мастером массу возможностей, позволяет создавать страницы более похожими на типографские и позволяет, в большинстве случаев, отказаться от нежелательного использования таблиц для позиционирования содержимого.