Рецепты HTML

Слои

CSS дает возможность работы со слоями: фрагментами HTML, которые можно размещать на веб-странице путем наложения их друг на друга с точностью до пиксела. Синтаксис для работы со слоями разработан и одобрен в конце 1996 года в рабочем проекте консорциума "CSS Positioning (CSS-P)" Данный проект для позиционирования элементов практически одинаково поддерживается браузерами Internet Explorer 4.0 и Netscape 4.0 за исключением ряда мелких отличий. Однако объектные модели браузеров для динамического управления слоями с помощью JavaScript отличаются. В этом и кроется основная проблема для веб-разработчиков, которые используют слои в своих программах.

Основы

Код HTML для примера показан ниже.

Для создания слоев следует использовать тег DIV или SPAN. Эти теги взаимозаменяемы и различаются лишь внешним видом в браузере. Если требуются отступы до и после текста, следует использовать элемент DIV. При размещении текста внутри параграфа применяется тег SPAN.

Тип позиционирования определяется параметром 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-документа.

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

Свойство z-index

Свойство z-index определяет порядок слоев, или их перекрытие по отношению к другим слоям. По умолчанию все слои позиционированы со значением z-index равным нулю. Другие слои могут размещаться ниже путем установки отрицательного значения z-index (рис. 1). Для слоев, у которых z-index не установлен, это значение назначается неявно в соответствии с их положением в документе. Поэтому слой, который помещен в документ позже, размещается выше остальных элементов, позиционированных ранее.

Рис. 1. Расположение слоев

В примере, приведенном в начале, показано использование параметра z-index для изменения положения слоев относительно друг друга.

Свойство visibility

Для отображения или скрытия слоя используется параметр visibility. Он может принимать значения visible, установленное по умолчанию, для показа слоя, и hidden, которое его прячет.

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

Horse XXI Russia - российское представительство Системы Бронирования Отелей Horse XXI (www.horse21.net) предоставляет пользователям Интернет уникальную возможность - бронировать тысячи отелей по всему миру в реальном режиме времени прямо с сайта.
Предлагаются 2 способа участия в партнерской программе Horse21:

1. Партнер размещает любые из предлагаемых баннеров Horse21 на своем сайте, баннерной сети, в рассылке и т.д. Клиент заходит с сайта партнера на www.horse21.ru и бронирует гостиницу. Вы получаете 4 EUR за каждое реализованное бронирование. Автоматическая регистрация участников находится здесь: http://affiliation.horse21.ru. Размер комиссионного вознаграждения обсуждается.

2. Партнер размещает у себя формы бронирования отелей Horse21. Подробнее о формах бронирования:
a. гибко настраиваются под интерфейс и стили сайта партнера.
b. реализованы на фреймовой технологии, что позволяет клиентам пользоваться услугами по бронированию, не покидая сайта партнера.
c. настройка под интерфейс партнерского сайта и демонстрационные версии партнерского сайта с установленной формой бронирования - предоставляются абсолютно бесплатно.

В этом способе сотрудничества сочетается возможность партнеров удачно расширить сферу услуг, предоставляемых сайтом пользователям, а также возможность самого партнера заработать. Комиссионные ставки, по формам бронирования могут достигать 4% от суммы, уплаченной клиентом в отеле. Время компиляции индивидуального фрейма бронирования для каждого ресурса колеблется в пределах нескольких часов.

Среди партнеров Horse21 - www.lycos.ru, www.kontorakuka.ru, www.fly.ru, и другие уважаемые ресурсы. За более подробной информацией и с предложениями, пожалуйста, обращайтесь pr@horse21.net. Страница партнерской программы Horse21 - http://affiliation.horse21.ru.