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

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

Первым шагом "в оживлении" WWW стало применение анимированных GIF-файлов, позволяющих представлять на страничке какой-нибудь видеоролик. С появлением Java и всеобъемлющим распространением Java-апплетов, страницы наконец-то ожили. Используя Java-апплеты, разработчик сайта мог добавить некоторую интерактивность своим работам. Появились разнообразные графические меню, программы, взаимодействующие с пользователем, Web-игры и многое другое, что можно было реализовать с помощью программ. Единственным серьезным минусом было то, что Java-апплеты могли работать только с четко отведенной каждому апплету областью на страничке. Они не могли никоим образом повлиять на остальное содержимое страницы, что-либо изменить или добавить на нее. Таким образом, задача интерактивности не была решена полностью: страничка могла теперь реагировать на действия посетителя, однако какие-либо серьезные изменения самого Web-документа в реальном времени все еще не производились.

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

По сути дела, Dynamic HTML представляет собой спайку языка сценариев, например, JavaScript или VBScript, таблиц стилей (Cascade Style Sheets - CSS) и объектной модели документа. Язык сценариев предоставляет доступ к каждому элементу страницы, например, параграфу, кнопке или списку, позволяя модифицировать те или иные параметры элемента. Таблицы стилей задают изначальные значения параметров элементов страницы. Какие именно параметры и как они влияют на элементы HTML - задается с помощью объектной модели документа (Document Object Model, DOM). Грубо говоря, DOM является списком объектов, представляющих элементы HTML, их атрибуты и методы. Компаниями Microsoft и Netscape были разработаны отличающиеся друг от друга объектные модели, поэтому разработка динамических страниц с использованием специфических особенностей каждой модели неминуемо приведет к некорректному отображению подобной страницы в конкурирующем броузере.

Языки сценариев

Существует несколько языков сценариев: JavaScript, VBscript, ECMAscript; сюда же можно отнести и PerlScript. Но наиболее распространенными являются JavaScript и VBscript. Язык JavaScript основан на языке Java (и, как следствие, языке C/C++), а VBscript - на Visual Basic. Язык VBscript является "изобретением" компании Microsoft и поддерживается только в броузере Internet Explorer. Для выполнения сценариев VBscript в броузере Netscape придется установить специальные плагины, что, естественно, будет делать далеко не каждый пользователь Internet. С другой стороны, язык VBscript проще и понятней для начинающих программистов и Web-дизайнеров. Но несомненным преимуществом JavaScript является его всесторонняя поддержка, а также легкость и удобство кода, унаследованные из Java и C/C++. Практически все широко распространенные броузеры имеют встроенную поддержку JavaScript, так что нет необходимости беспокоиться, будет ли ваша интерактивная страница работать.

Для добавления строк сценария в вашу страничку необходимо применять тег HTML <SCRIPT>:

Параметр LANGUAGE тега <SCRIPT> задает язык сценария. Если вы заметили, то внутри тега <SCRIPT> идет стандартный комментарий HTML. Подобная запись является "хорошим тоном" для Web-дизайнера. Если ваша страничка будет отображаться с помощью старого броузера, не распознающего тег <SCRIPT>, то ваш сценарий просто будет закомментирован, и страница все равно отобразится более-менее корректно.

Посмотрим, что же внутри сценария… Мы присваиваем какое-то значение атрибуту status объекта window. Объект window представляет собой окно броузера, в котором отображается наша страничка. Атрибут status задает содержимое статусной строки броузера. Модифицируя значение этого атрибута, мы меняем надпись в статусной строке на экране.

Объектная модель документа сопоставляет объекты языков сценариев элементам Web-страницы и броузера. К примеру, объект navigator предоставляет данные о броузере, его название, версию и другую техническую информацию о возможностях используемого средства просмотра Web-документов. Массив images содержит информацию обо всех изображениях, присутствующих на страничке. Изменяя значения в этом массиве, мы изменяем изображения на страничке - подобным образом реализуется "подсветка" кнопок при подводе к ним курсора мыши.

В Dynamic HTML для каждого тега был добавлен еще один параметр - ID, позволяющий задать идентификатор для данного тега. Присваивая уникальные идентификаторы каким-нибудь определенным тегам, позже можно управлять их содержимым: менять цвет, шрифт, высоту, ширину и расположение (применительно к участкам текста), задавать новое имя файла и размеры (применительно к изображениям и многое другое). Следующий кусок HTML-файла, к примеру, меняет цвет текста в параграфе на зеленый (следует сразу оговориться, что параметр ID абсолютно корректно работает только в Internet Explorer, а за Netscape можно быть уверенным только начиная с версии 4.7):

Крайне важным элементом языков сценариев является обработка событий (events handling). В Dynamic HTML существует некоторый набор событий, которые отслеживаются броузером, и при наступлении определенной ситуации выполняется указанная процедура на языке сценариев. События бывают самые разнообразные: попадание курсора мыши на элемент HTML, нажатие кнопок мыши, использование полосы прокрутки, загрузка документа и многое другое; список отслеживаемых событий постоянно увеличивается. Наиболее часто используемым применением событий является вывод какого-нибудь сообщения в статусной строке броузера при наведении курсора мыши на ссылку:

Здесь onMouseOver и onMouseOut - это события наведения и ухода курсора мыши с элемента. При наведении мыши выполняется сценарий, заносящий описание ссылки в статусную строку. При уходе курсора в статусную строку заносится пустое значение.

Каскадные таблицы стилей

Каскадные таблицы стилей - это еще один инструмент динамического языка разметки, который, впрочем, нередко используется без самой динамики. Основная идея разметки документов состоит в том, чтобы отделить содержание документа от его отображения. Не стоит, однако, надеяться на то, что ваш документ будет отображаться абсолютно одинаково на всем многообразии броузеров (если говорить об Internet) и других средств просмотра документов и их печати. Выходом в подобной ситуации является создание специальных таблиц стилей, которые в самой простой интерпретации являются наборами команд и правил, говорящих, как следует отображать те или иные элементы разметки документа. Можно создавать несколько таблиц стилей для каждого из устройств отображения - например, для нескольких броузеров и для различных устройств печати. Помимо этого, задав одну и ту же таблицу стилей для целого ряда документов, можно добиться единообразия дизайна (в который входит кегль, цвета, гарнитуры, отступы и многое другое). Разработав один раз определенный набор этих параметров, позже можно не беспокоиться о вопросах разметки и заняться собственно заполнением документа. На данный момент существует несколько вариантов таблиц стилей: CSS, JASS, DSSSL-O, XSL.

DSSSL (Document Style Semantics and Specification Language - язык семантики и спецификации стиля документа) является наиболее исчерпывающим, объемным и, как следствие, самым сложным набором правил преобразования и форматирования документов, размеченных с помощью SGML (Standard Generalized Markup Language - стандартизированный обобщенный язык разметки), подмножеством которого, как известно, является язык HTML. В стандарте DSSSL от 1996 г. зафиксированы компоненты и правила форматирования документов, не зависящие ни от платформ, ни от разработчиков. DSSSL можно применять к документу любого формата, правила и свойства элементов которого отвечают специальному стандарту - ISO/IEC 10744. Этому стандарту отвечает и язык SGML и, соответственно, HTML. DSSSL Online (DSSSL-O) является сокращенным подмножеством от набора DSSSL, предназначенным специально для прочтения документов в формате SGML, HTML и XML в соответствующих броузерах.

Стандарт JASS (JavaScript Accessible Style Sheets) был предложен компанией Netscape и реализован в броузере Netscape Communicator 4. Правила таблиц стилей JASS основываются на объектной модели документа. Они позволяют задать значения атрибутов элементов HTML до их отображения. Записи JASS мало чем отличаются от сценария на языке JavaScript: мы обращаемся к определенным объектам документа и присваиваем их атрибутам изначальные значения. Широкого распространения, однако, JASS не получил - он не поддерживается броузером Microsoft Internet Explorer и не признан консорциумом W3C.

Самым перспективным и уже ставшим общепризнанным стандартом стал CSS (Cascade Style Sheets). Еще в мае 1996 г. Internet-консорциум W3C объявил о разработке CSS - наборов таблиц стилей документов, позволяющих Web-разработчикам форматировать и изменять внешний вид HTML-документов. На данный момент уже существует две версии CSS - CSS1 и CSS2. Изначально был введен CSS1 - достаточно простой стандарт задания правил форматирования и позиционирования текста, абзацев и документа. Стандарт CSS2 добавил к CSS1 набор правил для визуальных броузеров, устройств озвучивания текста, принтеров и т. п. Кроме этого, были определены стили представления табличных данных, стили для работы с неанглоязычными источниками и др. Стандарт CSS2 еще не поддерживается в должной мере, поэтому имеет смысл использовать пока правила CSS1.

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

Для добавления таблицы стилей в ваш Web-документ необходимо использовать конструкцию <STYLE>:

Здесь стандарт - используемый стандарт таблиц стилей. Он может быть text/css для CSS или text/javascript для JASS.

Внутри описания таблицы стилей находятся определения стиля (так называемые style definitions). Эти определения стиля представляются в виде селектора (selection criteria) данного стиля и перечисления свойств стиля, заключенного в фигурные скобки и отстоящего от селектора на пробел:

Каждое свойство стиля представляет собой имя свойства, двоеточие и его значение. Каждое свойство должно отделяться от других точкой с запятой.

Селектор определяет, для каких элементов применяется данный стиль. Если селектор описывает элемент HTML, то данный стиль применяется ко всем данным элементам на странице. Селектор может быть также классом, идентификатором или же контекстным. Если же вы хотите применить стиль к отдельно взятой группе элементов, например, выделить один отдельно взятый параграф <P> и заголовок <H1> зеленым цветом, то необходимо в качестве селектора задать имя класса, а в тегах элементов, принадлежащих к группе, для которой применяется стиль, использовать параметр CLASS. Например:

Если у вас в определении несколько классов, то будет воспринят только первый, все остальные будут игнорированы. Например, в следующем определении заголовок <H1> будет принадлежать к классу YellowClass, свойства класса GreenBoldClass не будут применены, даже если они не противоречивы:

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

Для применения стиля к одному, конкретно взятому элементу (например, для слоев) следует использовать идентификатор элемента в качестве селектора. Присвоение идентификатора элементу производится с помощью параметра ID тега. Чтобы отличить селектор-идентификатор от других типов селекторов, необходимо перед именем селектора поставить символ решетки (#):

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

Таблицы стилей позволяют также работать с контекстным селектором. Он применяет стиль к каким-либо элементам HTML, находящимся внутри еще какого-нибудь элемента-контейнера HTML. Например, если вы хотите присвоить стиль подчеркнутому с помощью тега <U> и полужирному <B> тексту, находящемуся внутри заголовка третьей величины, запись определения стиля будет выглядеть следующим образом:

Контекстный селектор можно применять не только к селектору элемента HTML, но и к классам и идентификаторам:

Описание таблицы стилей CSS очень строго относится к записи определения. Не забывайте разделять свойства стиля точкой с запятой. Если вы опустите хоть одну точку с запятой, все определение будет игнорировано. И даже если в описании стиля встретится хоть один неверный символ, все описание стиля постигнет та же участь.

Правила таблицы стилей можно задавать непосредственно при определении элемента. Для этого следует использовать параметр STYLE тега элемента. Разработчики таблиц стилей не рекомендуют применять подобные внутренние (inline) стили, однако и Netscape Navigator, и MS IE поддерживают данную возможность. В следующем фрагменте HTML текст параграфа будет отображаться зеленым, полужирным начертанием с отступом от границы в 20% от всего размера документа:

Таблицы стилей могут храниться в отдельном файле и просто импортироваться на вашу страничку. Это удобно, т. к. нет необходимости определять каждый раз на новой страничке правила стиля. Для включения внешних таблиц стиля следует воспользоваться специальным тегом <LINK>:

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

В результате шрифт всех заголовков <H1> будет красным, а не зеленым, как было бы без ключевого слова important.

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

Объектная модель документа - DOM

Объектная модель документа - это тот фундамент, на котором основываются и таблицы стилей, и язык сценария в применении их к документу HTML. Объектная модель документа состоит из элементов Web-страницы, представляемых в виде объектов языка сценариев, модифицирование которых приведет к соответствующему изменению элемента HTML на страничке. Как уже не раз упоминалось, объектные модели Microsoft и Netscape имеют много общих черт, но и немало серьезных различий, из-за которых приходится писать две версии сценариев - по одному для каждой DOM. Рассмотрим обе эти модели.

Основу модели составляют объекты окно (window) и документ (document). Объекту document принадлежит большое количество других объектов, а сам он принадлежит объекту window - самому фундаментальному объекту всей модели документа. Объект window имеет доступ к документу и событиям, отслеживаемым броузером, а также к специфическим возможностям броузеров. Окно может быть самостоятельным окном броузера, либо кадром из фреймсета (<FRAMESET>). Каждый объект DOM принадлежит объекту window, и в языках сценария можно опускать ссылку на окно при выполнении каких-либо операций над другими объектами.

Объекту document принадлежат все HTML-элементы страницы. Он отвечает за содержимое Web-страницы, и для доступа и работы с элементами странички необходимо обращаться именно к нему. Среди других не менее важных объектов DOM можно отметить объект location (управляет адресом просматриваемой на данный момент странички), navigator (предоставляет специфические для броузера атрибуты и методы, например, версия и имя используемого броузера), history (объект истории перемещений по Internet), event (параметры события при его обработке), screen (информационный объект, информирующий об используемом разрешении экрана), frames (список кадров из коллекции, задаваемых тегом <FRAMESET>), images (массив всех изображений на страничке) и многие другие…

Netscape DOM предлагает технологию слоев, позволяющую разбить всю страничку на некоторое количество частей, которыми можно управлять по отдельности. Для управления в DOM вводится массив layers. Следует отметить, что в объектной модели Microsoft можно отдельно управлять любым элементом HTML без применения технологии слоев.

Использование Dynamic HTML

Как уже упоминалось выше, Dynamic HTML - это сочетание как каскадных таблиц стилей, так и языка сценариев. Нижеприведенный пример покажет вам взаимодействие CSS и языка сценариев JavaScript. В нем мы создадим несколько слоев, разбросаем их по всему окну броузера и будем их перемещать случайным образом.

Для начала необходимо определить начальные значения атрибутов двигающихся слоев. Дадим им идентификаторы вида Numberi, где i - номер слоя. В качестве начальных значений установим цвет текста разным для каждого слоя. Таблица стилей CSS тогда будет выглядеть следующим образом:

Ниже, в самом теле HTML-документа, определим наши слои:

Для присвоения идентификатора абзацу мы используем параметр ID. Для того, чтобы разбросать слои по окну броузера, мы будем использовать процедуру startMove(), которая будет вызвана сразу после загрузки документа (здесь мы используем событие документа onLoad) и которая произведет необходимые вычисления.

В самом начале сценария определяется броузер, с помощью которого просматривается документ. Это необходимо из-за различий в объектной модели документа компаний Microsoft и Netscape. Броузер определяется по значению атрибута appName системного объекта navigator. Далее мы определяем переменную isDrag, которая будет сигнализировать о необходимости перемещения абзаца.

После присваивания начальных координат слоям, функция инициализации startMove() устанавливает таймер, который будет вызывать функцию перемещения слоев с именем moveNumbers() каждые 50 мкс.

 Вот так будет выглядеть наш пример в окне Microsoft Internet Explorer.

А это те же веселые цифры, но уже в Netscape Navigator.

Узнай больше!

Лучшим способом для приобретения более подробных знаний является штудирование книг, посвященных как "персонально" JavaScript, так и CSS и Dynamic HTML. Помимо всего этого, в Internet всегда можно отыскать множество документов и сайтов, посвященных динамике в HTML.

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