Создание скриптов с отображением скрытых объектов

Практическая работа № 9

Сценарии управления навигацией и обратной связью

Цель: освоить правила формирования динамической навигации по сайту и реализации обратной связи.

Задание

1. Создать примеры скриптов с отображением скрытых объектов.

2. Создать примеры скриптов динамического меню.

3. Реализовать обратную связь с сайта.

Технология выполнения

Создание скриптов с отображением скрытых объектов

При помощи обработки событий можно управлять стилевым оформлением как всей Web-страницы, так и отдельных ее объектов.

При формировании многоуровневой системы навигации часто применяют отображение ранее скрытых фрагментов меню. Для скрытия с экрана фрагмента Web-страницы используется стилевой атрибут display:none. Для управления скрываемыми фрагментами Web-страницы наиболее удачно подходит контейнер слоя: <div></div>.

Рассмотрим простой пример управления стилем visibility:

· в HomeSite создать новый документ с заголовком «Примеры скриптов» и сохранить его как script5.html в своей папке html_files учебного Web-сайта с фреймовым вариантом структуры;

· сформировать код, представленный на рис. 5.1.

Рис. 5.1. Код примера со скрываемым фрагментом Web-страницы

В этом примере скрывавемый фрагмент Web-страницы размещен в контейнер div с именем list и имеет после загрузки страницы стиль display:none (скрытый). Управление отображением скрытого фрагмента осуществляется при наведении мыши на текст Список1, который помещен в контейнер <b></b> (полужирный) с соответствующими сценариями в открывающем теге. Один сценарий работает при наведении мыши - событие onmouseover, другой при уходе мыши – событие onmouseout;

· убедиться, что оба сценария работают и сохранить файл.

Местоположение отображаемого объекта можно также определить в его стиле при помощи соответствующих стилевых атрибутов, предназначенных для элементов Web-страницы. В первую очередь это следующие атрибуты:

top, bottom, right, left –- координаты верхней, нижней, правой и левой границ элемента. Значения:

· auto — определяется броузером;

· числовое;

· процентное;

position –- способ вычисления координат границ элемента. Значения:

· normal — положение элемента определяется броузером;

· relative — вначале вычисляется обычное положение элемента, затем рассчитывается смещение относительно этого положения;

· absolute — координаты вычисляются относительно границ контейнера, содержащего элемент;

· fixed — координаты вычисляются относительно границ контейнера, содержащего элемент, и запрещается прокрутка.

z-index — способ перекрытия объектов другими объектами. Объект, имеющий большее значение индекса, располагается выше. Значения:

· auto — «нулевой уровень», задаваемый по умолчанию;

· отрицательное числовое — объект располагается «ниже» нулевого уровня;

· положительное числовое — объект располагается «выше» нулевого уровня.

В рассмотренном выше примере в стиле отображаемого объекта добавить атрибуты, определяющие его местоположение, например как в выделенном фрагменте рис. 5.2.

Рис. 5.2. Код примера стилевого позиционирования отображаемого объекта Web-страницы

Следует заметить, что определение местоположения объектов Web-страницы при помощи стилевого позиционирования широко применяется в Web-дизайне и без совместного применения со сценариями javascript.

Не нашли, что искали? Воспользуйтесь поиском: