l_r_12

7.
Основы Dynamic HTML (DHTML)
Как известно, наибольшими возможностями по оформлению внешнего вида документов HTML обладают каскадные таблицы стилей (CSS). Через каскадные таблицы стилей доступно управление как всеми основными оформительскими параметрами стандартного HTML, так и многими дополнительными параметрами.
Каскадные таблицы стилей (CSS) дают возможность работы со слоями: фрагментами HTML, которые можно размещать на веб-странице путем наложения их друг на друга с точностью до пиксела. Каждый из слоев имеет признак видимости, который позволяет делать слои скрытыми (не отображаемыми на экране).
Из сценария JavaScript имеется возможность динамического управления всеми стилевыми свойствами объектов документа HTML (в том числе и слоев), что позволяет получить на странице самые разнообразные эффекты, такие, как меняющиеся под курсором мыши цвета и шрифты, скроллинг текста и графики, выпадающие меню, перемещение объектов и так далее.
Такое взаимодействие документов HTML, каскадных таблиц стилей и сценариев JavaScript называтеся динамическим HTML (DHTML). При помощи DHTML разработчики могут писать сценарии, меняющие расположение и содержание Web-страниц без необходимости генерации новых страниц или их загрузки с сервера.
 
Слои
Для создания слоев следует использовать тег
или с атрибутами стиля CSS – style. Эти теги взаимозаменяемы и различаются лишь внешним видом в браузере. Если требуются отступы до и после текста, следует использовать элемент
. При размещении текста внутри параграфа применяется тег .
Ниже приведен фрагмент html-кода, использующий слои для создания эффекта наложения одного текстового фрагмента на другой:
Листинг 1


Слой 1 наверху
Слой 1

Слой 2

Слой 2 наверху
Слой 1

Слой 2



Тип позиционирования слоя определяется параметром position. Имеет два значения: absolute, relative. Для значения absolute в качестве точки отсчета используется верхний левый угол окна браузера, и все параметры местоположения отмеряются от него. Для relative точкой отсчета является то место, в котором разместился бы элемент страницы, если бы не было представлено никакой информации о местоположении.
Положение элемента - двумя координатами top – указание вертикального смещения относительно точки отсчета (положительное значение соответствует смещению элемента страницы вниз, а отрицательное – вверх), и left – указание горизонтального смещения элемента страницы (положительное значение соотвествует сдвигу вправо, отрицательное – влево
Свойство z-index определяет порядок слоев, или их перекрытие по отношению к другим слоям. По умолчанию все слои позиционированы со значением z-index равным нулю. Другие слои могут размещаться ниже путем установки отрицательного значения z-index (рис. 1). Для слоев, у которых z-index не установлен, это значение назначается неявно в соответствии с их положением в документе. Поэтому слой, который помещен в документ позже, размещается выше остальных элементов, позиционированных ранее.
Позиционирование слоя
Кроме тегов
и абсолютное позиционирование поддерживают следующие элементы: ,