Как известно, наибольшими возможностями по оформлению внешнего вида документов HTML обладают каскадные таблицы стилей (CSS). Через каскадные таблицы стилей доступно управление как всеми основными оформительскими параметрами стандартного HTML, так и многими дополнительными параметрами.
Каскадные таблицы стилей (CSS) дают возможность работы со слоями: фрагментами HTML, которые можно размещать на веб-странице путем наложения их друг на друга с точностью до пиксела. Каждый из слоев имеет признак видимости, который позволяет делать слои скрытыми (не отображаемыми на экране).
Из сценария JavaScript имеется возможность динамического управления всеми стилевыми свойствами объектов документа HTML (в том числе и слоев), что позволяет получить на странице самые разнообразные эффекты, такие, как меняющиеся под курсором мыши цвета и шрифты, скроллинг текста и графики, выпадающие меню, перемещение объектов и так далее.
Такое взаимодействие документов HTML, каскадных таблиц стилей и сценариев JavaScript называтеся динамическим HTML (DHTML). При помощи DHTML разработчики могут писать сценарии, меняющие расположение и содержание Web-страниц без необходимости генерации новых страниц или их загрузки с сервера.
Для создания слоев следует использовать тег <DIV> или <SPAN>. Эти теги взаимозаменяемы и различаются лишь внешним видом в браузере. Если требуются отступы до и после текста, следует использовать элемент <DIV>. При размещении текста внутри параграфа применяется тег <SPAN>.
Ниже приведен фрагмент html-кода, использующий слои для создания эффекта наложения одного текстового фрагмента на другой:
<html> <body> Слой 1 наверху <div style="position:relative; font-size:50px; z-index:2; color: navy">Слой 1</div> <div style="position:relative; top:-55; left:5; color:orange; font-size:80px; z-index:1">Слой 2</div> Слой 2 наверху <div style="position:relative; font-size:50px; z-index:3; color: navy">Слой 1</div> <div style="position:relative; top:-55; left:5; color:orange; font-size:80px; z-index:4">Слой 2</div> </body> </html>
Посмотреть, как это выглядит в окне браузера
Тип позиционирования слоя определяется параметром position, положение элемента - двумя координатами top и left, а порядок слоя значением z-index.
Свойство position может принимать одно из трех значений: static (статическое), absolute (абсолютное) и relative (относительное). Параметр static по умолчанию не оказывает никакого влияния на расположение слоев.
При абсолютном позиционировании слой размещается относительно левого верхнего угла окна документа. В случае размещения слоя внутри другого, абсолютные координаты считаются от левого верхнего угла родительского слоя.
Кроме тегов <DIV> и <SPAN> абсолютное
позиционирование поддерживают следующие
элементы:
<APPLET>, <INPUT>, <BUTTON>, <OBJECT>, <SELECT>,
<FIELDSET>, <IFRAME>, <TABLE>, <IMG>, <TEXTAREA>.
Параметр position: relative используется для смещения слоя относительно родительского элемента. Установка этого значения не изменяет размещение элемента, но если установлены значения свойств top или left, то слой смещается от своего нормального положения в документе.
В то время как свойство position указывает тип системы координат, параметры top и left определяют точную позицию слоя. Значения этих параметров могут определяться в процентном отношении или пикселах, принимать положительные и отрицательные величины. Это дает возможность размещать контент выше или ниже на странице независимо от физической позиции кода HTML. То есть, в верхней части страницы можно поместить слой, который описан внизу HTML-документа.
Свойство z-index определяет порядок слоев, или их перекрытие по отношению к другим слоям. По умолчанию все слои позиционированы со значением z-index равным нулю. Другие слои могут размещаться ниже путем установки отрицательного значения z-index (рис. 1). Для слоев, у которых z-index не установлен, это значение назначается неявно в соответствии с их положением в документе. Поэтому слой, который помещен в документ позже, размещается выше остальных элементов, позиционированных ранее.
Рис. 1. Расположение слоев
В листинге 6.1 показано использование параметра z-index для изменения положения слоев относительно друг друга.
Для отображения или скрытия слоя используется параметр visibility. Он может принимать значения visible, установленное по умолчанию, для показа слоя, и hidden, которое его прячет.
Например, скрытый блок текста можно оформить следующим образом:
<div style="visibility: hidden">Спрятанный слой</div>
Сценарии JavaScript позволяют динамически управлять параметрами установленных слоев. Это позволяет получить такие эффекты, как скрытие и отображение слоя, изменение порядка отображения, перемещение слоя в окне браузера. Все эти эффекты достигаются с помощью изменения соответствующих стилевых параметров установленных слоев.
Для обращения к слоям из сценариев JavaScript, удобнее всего каждому слою дать собственное имя при помощи параметра id. Например:
<div id="div1"> ... </div>
Для того, чтобы скрыть отображение слоя div1, можно использовать следующую команду:
div1.style.visibility='hidden';
Для повторного обображения слоя следует выполнить следующее присвоение:
div1.style.visibility='visible';
Ниже приведен пример документа, использующий динамическую смену слоев для изменения текста на странице html. В данном примере для отображения некоторого слоя следует нажать на соответствующую ссылку. Эту идею можно применить и для организации выпадающих меню.
<HTML>
<HEAD>
<STYLE type="text/css">
div {
position: absolute;
top: 20;
left: 160;
visibility: hidden;
}
</STYLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
function show_d(d)
{
div1.style.visibility='hidden';
div2.style.visibility='hidden';
div3.style.visibility='hidden';
div4.style.visibility='hidden';
div5.style.visibility='hidden';
d.style.visibility='visible';
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<a href="javascript:void(0)" onClick="show_d(div1);">показать слой 1</a><br>
<a href="javascript:void(0)" onClick="show_d(div2);">показать слой 2</a><br>
<a href="javascript:void(0)" onClick="show_d(div3);">показать слой 3</a><br>
<a href="javascript:void(0)" onClick="show_d(div4);">показать слой 4</a><br>
<a href="javascript:void(0)" onClick="show_d(div5);">показать слой 5</a><br>
<div id="div1">
<h3>Слой номер один</h3>
Некоторый текст, на слое расположенный. Его можно скрыть и показать. Текст может содержать несколько строк.
</div>
<div id="div2">
<h3>Слой номер два</h3>
Содержит свой текст. Если показывается, то текст на других слоях не виден.
</div>
<div id="div3">
<h3>Слой номер три</h3>
Тоже текст. При работе со слоями надо следить, чтобы текст одного слоя не "выглядывал" из-под другого слоя при самых различных размерах окна браузера и используемых шрифтах.
</div>
<div id="div4">
<h3>Слой номер четыре</h3>
Здесь нет текста.
</div>
<div id="div5">
<h3>Слой номер пять</h3>
И тут тем более нет.
</div>
</BODY>
</HTML>