Главная Обратная связь Поможем написать вашу работу!

Дисциплины:

Архитектура (936)
Биология (6393)
География (744)
История (25)
Компьютеры (1497)
Кулинария (2184)
Культура (3938)
Литература (5778)
Математика (5918)
Медицина (9278)
Механика (2776)
Образование (13883)
Политика (26404)
Правоведение (321)
Психология (56518)
Религия (1833)
Социология (23400)
Спорт (2350)
Строительство (17942)
Технология (5741)
Транспорт (14634)
Физика (1043)
Философия (440)
Финансы (17336)
Химия (4931)
Экология (6055)
Экономика (9200)
Электроника (7621)






Динамическое управление слоями



Лабораторная №7.

Основы Dynamic HTML (DHTML)

Как известно, наибольшими возможностями по оформлению внешнего вида документов HTML обладают каскадные таблицы стилей (CSS). Через каскадные таблицы стилей доступно управление как всеми основными оформительскими параметрами стандартного HTML, так и многими дополнительными параметрами.

Каскадные таблицы стилей (CSS) дают возможность работы со слоями: фрагментами HTML, которые можно размещать на веб-странице путем наложения их друг на друга с точностью до пиксела. Каждый из слоев имеет признак видимости, который позволяет делать слои скрытыми (не отображаемыми на экране).

Из сценария JavaScript имеется возможность динамического управления всеми стилевыми свойствами объектов документа HTML (в том числе и слоев), что позволяет получить на странице самые разнообразные эффекты, такие, как меняющиеся под курсором мыши цвета и шрифты, скроллинг текста и графики, выпадающие меню, перемещение объектов и так далее.

Такое взаимодействие документов HTML, каскадных таблиц стилей и сценариев JavaScript называтеся динамическим HTML (DHTML). При помощи DHTML разработчики могут писать сценарии, меняющие расположение и содержание Web-страниц без необходимости генерации новых страниц или их загрузки с сервера.

Слои

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

Ниже приведен фрагмент html-кода, использующий слои для создания эффекта наложения одного текстового фрагмента на другой:

Листинг 1

<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. Имеет два значения: absolute, relative. Для значения absolute в качестве точки отсчета используется верхний левый угол окна браузера, и все параметры местоположения отмеряются от него. Для relative точкой отсчета является то место, в котором разместился бы элемент страницы, если бы не было представлено никакой информации о местоположении.



Положение элемента - двумя координатами top – указание вертикального смещения относительно точки отсчета (положительное значение соответствует смещению элемента страницы вниз, а отрицательное – вверх), и left – указание горизонтального смещения элемента страницы (положительное значение соотвествует сдвигу вправо, отрицательное – влево

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



Позиционирование слоя

Кроме тегов <DIV> и <SPAN> абсолютное позиционирование поддерживают следующие элементы:
<INPUT>, <BUTTON>, <OBJECT>, <SELECT>, <FRAME>, <TABLE>, <IMG>, <TEXTAREA>.

 

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

Свойство visibility

Для отображения или скрытия слоя используется параметр 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. В данном примере для отображения некоторого слоя следует нажать на соответствующую ссылку.

Листинг 2.

<HTML><HEAD><STYLE >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> Многие разработчики, постоянно использующие CSS, включают блок STYLE в свои шаблоны HTML. Для применения к гиперссылкам специальных эффектов используется несколько атрибутов CSS:· a: hover – стиль гиперссылки изменяется, когда посетитель наводит на нее курсор. Ссылка принимает обычный вид, когда курсор убирается.· a: active – стиль гиперссылки изменяется, когда посетитель щелкает по ней левой кнопкой мыши· a: visited – стиль гиперссылки изменяется после того, как посетитель воспользовался ею Данные о стиле гиперссылки размещаются внутри фигурных скобок после соответствующего атрибута. Например, если вы хотите, чтобы цвет гиперссылки менялся после наведения на нее курсора мыши, необходимо в тэгах Style прописать следующее a: hover {color : red}

Задания к лабораторной работе.



1. Измените листинг 1 так, чтобы был виден эффект наложения одного изображения на другое.

2. Замените событие щелчок по гиперссылке в листинге 2 на событие наведение на гиперссылку.

3. В листинге 2 примените к гиперссылкам специальные эффекты.


Просмотров 379

Эта страница нарушает авторские права




allrefrs.ru - 2021 год. Все права принадлежат их авторам!