Динамический HTML (DHTML)
DHTML(динамический HTML)- это набор нововведений в
Microsoft Internet Explorer 4.0, которые позволяют автору страницы динамически
менять стили, содержание и оформление страницы, создавать интерактивные
документы, реагирующие с пользователем в реальном масштабе времени. DHTML - это
красота в Web страницах.
Кроме того, Dynamic HTML позволяет изменять содержимое HTML-страницы при помощи скриптов после окончания конструирования. Такая возможность появляется за счет того, что каждый элемент HTML-документа рассматривается как объект со своими свойствами. Эти свойства доступны в коде скрипта на JavaScript или VBScript. Интерактивно взаимодействуя с отображением документа, пользователь посредством скриптов изменяет свойства объектов, например, значения атрибутов элемента или свойства, введенные листами стилей. Браузер на основе новой информации изменяет отображение документа. Код скрипта выполняется с учетом взаимодействия пользователя с элементами Web-страницы. Основная особенность этой схемы состоит в том, что поддерживать взаимодействие с пользователем в Dynamic HTML может любой элемент Web-страницы.
Динамические стили - одно из оснований DHTML. Путем нехитрых функций вы можете менять внешний вид любого элемента в любой момент времени, например, цвет
текста изменится, когда пользователь наведет на нее курсор, а сам курсор примет форму руки. Рассмотрим код этой Web-странички:
<html>
<head>
<title> Динамические стили
</title>
</head>
<body>
<H3 onmouseover="this.style.color='red';" onmouseout="this.style.color='black'"; STYLE="cursor: hand"; >Наведи на меня мышь</H3>
</body>
</html>
В результате получится Web-страничка
с таким содержимым:
Наведи на меня мышь
Разбирать полностью код этой странички мы не будем, разберём только код, относящийся к динамическим стилям.В тэге H3 мы указываем следующие атрибуты:
1. onmouseover="this.style.color='red';" - текст будет иметь красный цвет, когда над ним находится мышь;
2. onmouseout="this.style.color='black'" - текст будет иметь черный цвет, когда над ним не находится мышь;
3. STYLE="cursor: hand"; - при наведении курсора мыши на текст, он изменит свой вид со стрелки на руку.
Задание. Попробуйте набрать в текстовом редакторе
"Блокнот" код этой странички. Сохраните получившийся файл под именем prim1.html, а затем
откройте его в броузере.
Использование специальных тэгов.
Различные визуальные эффекты можно осуществить используя специальные тэги. Рассмотрим пример вывода бегущей строки на Web-страничке:
<html>
<head>
<title> DHTML
</title>
</head>
<body>
<p><marquee direction="left"> Образец бегущей строки</marquee></p>
</body>
</html>
В результате мы получим
Web-страничку с бегущей строкой:
Для задания бегущей строки используется тэг <marquee>. Параметр direction задает напрвление движения текста. Также можно указать размер текста бегущей строки и цвет текста, используя для этого параметр style="font-size: 8pt; color: #FF6600".
Задание.Наберите этот пример в текстовом редакторе
"Блокнот" и сохранить в файле с именем prim2.html.
Откройте этот файл в браузере. Попробуйте создать свою бегущую строку, указав в тэге <marquee> свои параметры.
Ни для кого не секрет, что самыми лучшими способами представления информации являются наглядные картинки. Особенно это действенно, когда картинка эффектно подана. Используя DHTML картинку можно вывести на экран не просто так, моментально, а используя какой-нибудь фильтр, она будет выведена на экран с каким-нибудь эффектом, например горизонтальными полосами или случайными шашками; это называется графическим переходом. Также, можно использовать графический фильтр, "пропустив" через который исходную картинку на выходе получим эту же картинку, но с каким-нибудь эффектом, например быстрого движения.
Рассмотрим пример применения фильтра к рисунку. Создадим Web-документ, содержащий следующий код:
<html>
<head>
<title>prim3</title>
</head>
<body>
<img src="pic.jpg" width="200" height="99" alt="Фото" STYLE="filter: blur(strenght=50) fliph()">
</body>
</html>
Рис.1
Посмотрев на данный код видно что в тэге
<img> мы указали дополнительный атрибут
STYLE со значением "filter: blur(strenght=50) fliph()". С помощью этой DHTML-конструкции мы задаем помещенному рисунку размытие с интенсивностью 50%, и отражение по горизонтали (рис.1), то есть к одному рисунку можно применить несколько фильтров.
Задание.Наберите этот пример в текстовом редакторе
"Блокнот" и сохранить в файле с именем prim3.html.
Откройте этот файл в браузере. Измените код так, чтобы рисунок отразился по вертикали, для этого используйте фильтр flipv.
Теперь рассмотрим пример изменения цвета фона
web-странички с помощью элементов управления. В нашем случае мы
будем использовать в качестве элементов управления обычные кнопки.Создадим
Web-документ, фоновый цвет которого можно изменить. Для
этого будем использовать следующий код:
<HTML>
<HEAD>
<TITLE> Изменение цвета фона </TITLE>
</HEAD>
<BODY TEXT="#000000" BACKGROUND="" LINK="#3333FF" VLINK="#3333FF"
ALINK="#3333FF" >
<h1> <center> Цвета фона </center> </h2>
<table border=0 align=center><tr><td><form>
<input type=button value="красный" onClick="document.bgColor='ff0000'">
<input type=button value="желтый" onClick="document.bgColor='ffff00'">
<input type=button value="синий" onClick="document.bgColor='0000ff'">
<input type=button value="голубой" onClick="document.bgColor='87ceeb'">
<input type=button value="коралловый" onClick="document.bgColor='ff7f50'">
</form></td></table>
</BODY>
</HTML>
В результате мы получим Web-страничку
(рис.2):
Рис.2
При создании этой странички мы вновь
использовали динамические стили. При нажатии кнопки происходит следующее
событие:
onClick="document.bgColor='ff0000'". onClick
- означает нажатие кнопки, параметр document.bgColor='ff0000' -
указывает цвет фона web-странички.
Аналогично создаются остальные кнопки.
Задание.Наберите этот пример в текстовом редакторе
"Блокнот" и сохранить в файле с именем prim4.html.
Откройте этот файл в браузере.
Создайте кнопки со своими цветами.
Примечание.
Задать параметры цвета можно не только с помощью цифрового кода соответствующего
цвета, но и указав название цвета в виде текста (например: Yellow-для
желтого цвета).
Применение языка JavaScript
Для создания динамических страниц можно
использовать язык JavaScript. JavaScript
- это язык
сценариев, который предназначается в первую очередь для написания
сценариев в HTML страницах. В этом разделе его изучать полностью
мы не будем, затронем лишь примеры использования для
изменения стиля объекта этот пример вам покажется
сложным воспользуйтесь
этой ссылкой. Итак, чтобы изменять стили объекта, над которым совершится
действие, напишем сценарий, используя язык JavaScript.
Написание функций также полезно, когда над множеством объектов надо производить
одинаковые действия. Начнем как всегда с простого, например, со списков.
Посмотрите на следующий код:
<HTML>
<HEAD>
<TITLE>prim5</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JScript">
function changeStyle(object) {
if (object.style.color=='black')
object.style.color='orange';
else
object.style.color='black';
}
</SCRIPT>
<LI>Элемент
1</LI>
<LI style="cursor: hand"; onclick="changeStyle(this);">Элемент
2</LI>
</BODY>
</HTML>
В результате у нас должна получиться следующая
Web-страничка:
- Элемент 1
-
Элемент 2
Если навести мышь на второй элемент списка и щелкнуть по нему мышью,
то элемент списка примет оранжевый цвет.
Использование Script-языков дает очень гибкие
возможности применения динамических стилей. В этом примере при щелчке мышью на
второй элемент списка, он изменяет свой стиль с помощью функции changeStyle,
которой в качестве аргумента передается объект, над которым было произведено
действие. Комбинирование использования функций и классов, а также различных
событий c вашей фантазией дает поистине потрясающие результаты.
Задание.Наберите этот пример в текстовом редакторе
"Блокнот" и сохранить в файле с именем
prim5.html.
Откройте этот файл в браузере.
Итоговое задание. Создайте HTML-документ в котором присутствовали бы все вышеперечисленные
DHTML-элементы.
Тест по
DHTML
В начало
