DHTML. Введение

🕛 13.10.2006, 14:59

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

Так что такое Dynamic HTML? DHTML - это набор нововведений в Microsoft Internet Explorer 4.0, которые позволяют автору страницы динамически менять стили, содержание и оформление страницы, создавать интерактивные документы, реагирующие с пользователем в реальном масштабе времени. Короче, DHTML - это красота в Web страницах.

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

Каждый объект HTML имеет набор свойств, определяющих его внешний вид. Все они объединены в подмножестве Style. Доступ к этим свойствам можно получить двумя путями: через язык HTML - общепринятый набор описаний для HTML документа, или через несколько других Web-языков - JavaScript, JScript или VBScript. Если учесть, что перые два - практически одно и тоже, то остается, что выбор не так уж и велик. Поскольку язык JScrript является (на мой вкус) самымы легким, а также самым распространенным, далее в этом документе будет употреблен именно он. При этом, так как мы не собираемся вдаваться в дебри программирования на новом незнакомом языке, его изучению здесь не будет придано очень пристального внимания, а только приведены самые элементарные примеры его использования. Если вы уже немного знакомы с этим языком или имеете представление о том, как вставлять в HTML документ объект Script, то можете идти дальше.

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

Сделаем стили динамическими.

Динамический - означает изменение свойcтв в реальном времени, например при совершении какого-либо события. События - это ядро любых современных языков программирования. Следующая строчка, вставленная в стандартное ядро HTML страницы заставляет объект заголовка изменить свой цвет, когда пользователь наведет на него мышь.

<H1 onmouseover="this.style.color='red';">Эта строка покраснеет</H1>

Эта строка покраснеет

Этот простой пример иллюстрирует доступ к свойству color элемента H1. Все действие, собственно, происходит в выражении onmouseover="this.style.color='red'"; Это выражение языка JScript означает, что при происхождении события onmouseover объект, с которым произошло событие (this-это), его множество style и свойство в этом множестве - color должно поменять свое значение на 'red'. (Заметьте, что red пишется в одинарных кавычках. Это значит, что red - символьная строка, а не какая-нибудь переменная)

Чтобы при выходе из зоны объекта, он снова менял свой цвет, например обратно, используйте событие onmouseout.

<H4 onmouseover="this.style.color='red';" onmouseout="this.style.color='black';">
Эта строка динамически изменяет свой цвет
</H4>
Эта строка динамически изменяет свой цвет Можете попробовать использовать событие onclick, которое происходит при щелчке мыши на объекте.

Теперь, вы можете реально использовать этот момент, например в ссылках. Добавьте приведенный выше код к объекту <A>.

Установка стиля объекта.

Мы научились динамически изменять стили. Но это еще не самая главная возможность, предоставляемая DHTML. А что, если вам не нравится стандартный стиль оформления страницы, который использует Internet Explorer? Почему ссылки всегда должны иметь синий цвет, а шрифт размер в 16 пикселей? Нельзя ли как-нибудь изменить это? Можно! И нужно! Если вы хотите, чтобы ваши страницы отличались от множеста других, выделялись чем-то необычным и максимально действовали на восприятие их посетителя, используйте нестандартные стили! Но это не значит, что вы должны все свои сообщения писать кислотно желтым цветом, тут уж дело вкуса, главное то, что Dynamic HTML дает возможность использовать свою фантазию, предоставляя богатейший набор возможностей.

Так как же установить нестандартный стиль объекта? Прежде всего через свойство STYLE. Посмотрите:

<H2 STYLE="color: green; cursor: hand">Наведи на меня мышь</H2>
Наведи на меня мышь
Эта строка будет выводить на экран объект <H2> зеленого цвета, причем курсор, при наведении на него будет изменять свой вид на "руку", которая обычно сигнализирует то, что этот объект можно "щелкнуть".

Здесь, объекту были установлены два свойста, подобным образом можно менять все свойства, которые поддерживает объект.Например:

<H2 STYLE="font-size: '20px'; font-weight: bold; cursor: size; background-color: lightgrey">
Это пример использования стилей
</H2>

Это пример использования стилей