Чтобы увидеть слои в действии, загрузите последнюю версию Navigator и посетите домашнюю страницу компании Netscape по адресу home.netscape.com. Здесь компания использует слои для создания трех панелей, каждая из которых ведет себя по-своему и может перемещаться по основному окну. Другие браузеры будут игнорировать эту часть программы и пользователи ничего не увидят.

Первая панель на странице Netscape имеет выпадающий расширяемый список тем для навигации по узлу, на второй панели предлагаются новости, а третья содержит рекламные объявления. Каждая панель сопровождается ярлыком, при указании на который она удаляется с экрана. Видимым остается только ярлык.

Слои а-ля Netscape содержат новый тег HTML - . В интрасети с высокой пропускной способностью этот тег может использоваться для создания документов, содержащих большие объемы данных или карты навигации по сложным графическим узлам, которые действуют как "скользящие" панели. Более всего дизайнеров Web порадует возможность точно указывать положение текста или изображения в документе.

Дизайнер Web может использовать программу



Hello, layer 1.

для создания слоя, который размещает левый верхний пиксел слова "Hello" в окне документа на расстоянии 50 пикселов от его верхнего края и 50 пикселов от его левого края. Дизайнер также способен определить координаты (расстояние слева и сверху) в процентах от ширины и высоты окна. Таким образом, если окно браузера имеет 500 пикселов в ширину и 250 пикселов в глубину, то программа



Hello, layer 1.

отображает фрейм на расстоянии 50 пикселов сверху и слева от границ окна документа.

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



Hello, layer 1.





And Hello again.

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

Слоям можно давать имена (например, ), что позволяет определить порядок слоев. Вы добиваетесь упорядочивания по оси z, указывая требуемые значения параметров в теге слоя. Параметр "z-index" указывает точное положение слоя, а "above" (над) и "below" (под) - положение слоев относительно друг друга. Таким образом, программа










Наиболее интересно использование слоев в сочетании со сценариями JavaScript. Фактически именно они определяют поведение панелей на домашней странице Netscape. Указание на ярлык инициирует сценарий JavaScript, который устанавливает верхнюю и левую координаты слоя так, что слой "исчезает", а ярлык остается видимым.

Реализация слоев компанией Netscape в Navigator 4.0 предваряет появление формальной спецификации слоев, которая сейчас разрабатывается консорциумом World Wide Web Consortium (W3C). Компания Microsoft также уделяет внимание возможности работы со слоями, однако опирается на стандарт Cascading Style Sheets, утвержденный W3C. Функция работы со слоями будет поддерживаться браузером Internet Explorer.

Следовательно, нужно иметь в виду, что спецификация на слои будет изменяться. Однако я буду удивлен, если изменения при переходе к следующей версии Netscape окажутся значительными. При использовании слоев с умом они существенно увеличат возможности вашей интрасети.


Тег слоя Netscape

Тег , как его определяет компания Netscape Communications, состоит из следующих элементов:

.

Здесь все параметры в квадратных скобках являются необязательными, а значения параметров, из которых можно сделать выбор, отделены друг от друга вертикальной чертой. Обратите внимание, что все строковые значения должны заключаться в кавычки (ABOVE="homelayer"). Ниже указаны параметры слоя:

  • NAME задает имя слоя;
  • LEFT определяет положение слоя (в пикселах или процентах от ширины окна или родительского слоя);
  • TOP задает положение слоя (в пикселах или процентах от высоты окна или родительского слоя);
  • Z-INDEX устанавливает точный порядок слоев;
  • WIDTH определяет ширину слоя (в пикселах или процентах от ширины окна или родительского слоя);
  • HEIGHT задает высоту слоя (в пикселах или процентах от высоты окна или родительского слоя);
  • CLIP устанавливает клиппирование слоя в границах, указанных в аргументах "x1_offset, y1_offset, x2_offset, y2_offset" (каждое значение - это число пикселов или процент от соответствующего параметра окна или родительского слоя);
  • VISIBILITY определяет, будет ли веден слой;
  • BGCOLOR задает цвет фона слоя (значение параметра - название стандартного цвета или шестнадцатеричное число RGB);
  • BACKGROUND определяет фоновое изображение слоя по его URL;
  • SRC определяет источник информации, которая выводится в слое и находится по данному URL.
  • Поделитесь материалом с коллегами и друзьями