DIVные слои

Как известно, HTML - это язык разметки страниц. Возможности классического HTML (например, версии 3.2) по этой самой разметке сильно ограничены. Например, он не позволяет располагать элементы страницы (текст, картинки, таблицы и т.п.) в слоях.

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

HTML же долгое время не поддерживал слои. Элементы страницы располагались последовательно, в том самом порядке, в котором в тексте страницы были записаны соответствующие HTML-теги. Так было до 1997 года.

В 1997 году разработчики Netscape Navigator 4.0 ввели в этом броузере новый тег LAYER - таким образом, слои в HTML стали реальностью. Теперь стало возможным, например, расположение графики поверх таблицы или динамическое скрытие/отображение сразу нескольких элементов с помощью JavaScript.

Впрочем, расслабляться дизайнеры не спешили - Microsoft Internet Explorer не поддерживал тег LAYER. Тем не менее, слои с помощью небольшого финта ушами можно реализовать и там. "Финт ушами" заключается в комбинации тега DIV (определяет раздел в документе, см. спецификацию HTML 3.2) и CSS (каскадные таблицы стилей). Интересно, что этот прием, с небольшими ограничениями, сработает и в Netscape Navigator (так как он поддерживает и HTML 3.2, и CSS).

Вероятно, что возможностей DIV+CSS вам вполне хватит, и тогда от использования тега LAYER можно отказаться совсем. Это, кстати, благотворно скажется на размере Web-страницы (не будет комбинаций тегов , в которых записывается вариант HTML-кода для броузеров, не поддерживающих тег LAYER).

Пожалуй, на этом хватит лить воду, переходим к практике. Шаблон HTML-кода слоя выглядит так:

 
<DIV STYLE="Свойства слоя">
Содержимое слоя
</DIV> 

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

Свойства слоя - это свойства таблицы стилей CSS. Записываются они так:

свойство:значение

Естественно, свойства слоя могут состоять из нескольких пар свойство:значение, которые отделяются друг от друга точками с запятой.

А теперь рассмотрим сами свойства:

position:absolute

Без указания этого свойства (именно со значением absolute) вы не сможете установить позицию слоя относительно левого верхнего угла окна броузера с помощью свойств left и top (см. ниже).

left:число

Определяет расстояние от левого края окна броузера до левого края слоя. Допускается указывать эту величину в разных единицах измерения. Можно подстраховаться и принудительно задать в качестве единиц измерения пиксели: left:50px.

top:число

Определяет расстояние от верхнего края окна броузера до верхнего края слоя. Все остальное - аналогично свойству left.

width:число

Это свойство указывает (сюрприз!) ширину слоя. Если указанная ширина слоя меньше, чем ширина картинок, таблиц и прочих неразрывных элементов, ширина слоя будет определяться наиболее широким элементом. Можно указывать ширину и в процентах (width:100%), правда, это дает несколько странный результат в обоих броузерах.

height:число

Определяет (опять сюрприз!) высоту слоя. Правда, Netscape Navigator, тормоз этакий, это свойство не поддерживает - он определяет высоту слоя по его содержимому.

background-color:цвет

Это свойство определяет фоновый цвет слоя. Как и в HTML, можно указывать и шестнадцатеричное значение (#FFFFFF), и "обычное" название цвета (white). Netscape Navigator и тут отличился - цвет он показывает как бог на душу положит, и background-color в Netscape использовать практически нельзя. В качестве альтернативы могу посоветовать заключить содержимое слоя в таблицу и задавать фоновый цвет уже для нее. Кросс-броузерная совместимость требует жертв...

background-image:url(путь)

Определяет фоновое изображение слоя. В качестве пути можно указывать как полный URL (http://www.utugi.ru/img/bgimg.gif) так и относительный путь (/img/bgimg.gif). Netscape Navigator... нет, все нормально, здесь он работает без фокусов :-)

z-index:число

Это свойство служит для определения порядка расположения слоев на странице. Чем меньше значение свойства z-index, тем позднее выводится слой на экран. Например, слой со значением z-index, равным 0, будет перекрывать слой с z-index:1.

Таким образом, полный пример тега DIV, определяющего слой, может выглядеть следующим образом:

<DIV STYLE="position:absolute; top:2520; left:200; width:200; height:400; background-color:#FFFFFF;"> <BR> <I> <B> Пример: <BR> Содержимое слоя </B> </I> <BR> </DIV>

Кстати, если вам нужен слой, содержащий всего один объект, вы можете не создавать отдельный тег DIV, а указать атрибут STYLE прямо внутри тега, который описывает соответствующий элемент, например:

IMG SRC=pic.gif WIDTH=400 HEIGHT=200 STYLE="Свойства слоя"

Между прочим, спецификации CSS предусматривают значительно большее количество различных свойств, которые можно указывать в значении атрибута STYLE. Поэкспериментируйте, и, возможно, вы откроете какие-нибудь новые интересные эффекты DIVных слоев.

Станислав Жарков
http://pro.net.ru/