“DHTML-конструирование” — это учебник второго семестра курса 43 Роботландского университета. В нем изложены основы CSS (каскадные таблицы стилей) и показаны способы управления содержимым гипертекстовой страницы при помощи динамических воздействий на гипертекстовую модель документа скриптами, написанными на языке JavaScript.

Предполагается, что читатель знаком с основами ручной гипертекстовой разработки (книга “HTML-конструирование”, курс 42), а также умеет программировать на JavaScript (книга “JavaScript-конструирование”, курс 43, первый семестр).

#### Что такое DHTML

DHTML — это обозначение технологий для построения гипертекстовых приложений, практически не отличимых по своей динамике и интерактивности от обычных компьютерных программ.

Одна из технологий DHTML (которая и будет рассмотрена в книге) это:

DHTML=HTML4.0+JavaScript+CSS+браузер 4.0

Версия HTML4.0 кардинально не отличается от версии 3.2 по тегам (хотя есть и новинки). Самое главное в HTML4.0 — все элементы страницы без исключения (графика, заголовки, таблицы, текст, все теги и их атрибуты) доступны для управления. То есть, изменения больше касаются не языка, а объектной модели браузера. Используя CSS и JavaScript, можно управлять любым элементом на странице, меняя его локально, не перерисовывая целиком всю страницу.

Технология CSS+JavaScript допускает, например, применять абсолютное позиционирование, то есть, выводить элементы на экран, используя реальные координаты. Программное изменение координат в объектной модели вызывает изменение положения элемента на экране.

CSS позволяет наряду с двумя координатами x и y использовать еще и третью координату — z-индекс. Третья координата определяет номер слоя, в который помещается элемент. Таким образом, при движении в многослойном пространстве одни элементы могут проходить над или под другими.

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

Примеры, иллюстрирующие описанные возможности, приводятся в уроке 1.

#### Целевые установки

В гипертекстовом проектировании можно выделить два направления:

- сайты,
- локальные приложения.

Сайты “живут” в Интернете, локальные приложения — на компьютере индивидуального или в локальной сети коллективного пользователя (школьного класса, например).

Жанровые особенности определяются разницей в скорости передачи информации. Интернет — работает очень медленно (средняя скорость передачи информации — несколько килобайт в секунду). На стадии становления глобальной сети скорость передачи росла каждый год, внушая оптимизм разработчикам и пользователям. Но сейчас, к сожалению, этот процесс прекратился, и новый виток разгона сети возможен только после кардинального пересмотра существующих способов передачи. Мир замер в ожидании Эйнштейна связи. Замер и принял на вооружение пессимистические правила, продиктованные суровой действительностью: сейчас хороший сайт — это маленький, простой сайт. Он должен:

- иметь посредственную мало-размерную графику,
- не использовать звук и видео,
- иметь минимум интерактивности и динамики.

Помимо проклятия скоростью, сайтостроение переживает тяжелое время разгула демократии в среде разработчиков средств просмотра: каждый браузер требует особого программирования (даже на уровне разных версий, не говоря уже об уровне разных компаний) — никто не желает соблюдать стандарты.

Со временем, конечно, технические и политические трудности Интернета будут преодолены. Сейчас же, те, кто не хочет ждать сложа руки, могут направить усилия в гипертекстовый жанр отличный от сайтостроения, в котором можно накручивать любые скриптовые спирали, выкидывать любые стилевые коленца, грузить толстые звуковые треки, графику, видео без риска усыпить пользователя, ждущего окончания загрузки у монитора. Речь идет о жанре гипертекстого приложения, примерами которого служат гипертекстовые учебники Роботландского университета. Такие гипертекстовые изделия живут на локальном компьютере или в локальной сети и, следовательно, не имеют “родовых” пятен ужасно медленного Интернета. Кроме того, они могут позволить себе работать только на одном браузере и игнорировать все остальные.

Хотя технология CSS и воздействие на объектную модель документа при помощи JavaSript являются универсальными, то есть, годятся, как для сайтостроения, так и для разработки локальных приложений, в книге “DHTML-конструирование” практическая часть имеет уклон в сторону локальных приложений с учетом отмеченных выше особенностей.

#### Инструментарий

Для работы с книгой необходим текстовый редактор (в нем записываются коды) и браузер (в нем происходит отладка кодов и работа с созданным продуктом).

В качестве текстового редактора хорошо подходит МикроМир, но можно обойтись и блокнотом Windows, или другим редактором, который умеет работать в кодировке Windows.

Какой браузер необходим? Разработчик сайтов должен всегда иметь под рукой несколько браузеров, минимум два: Microsoft Internet Explorer (IE) и Netscape Navigator (NN). Ведь пользователь сети может “заехать” на сайт, используя любой транспорт! И мы должны знать, что он увидит.

К сожалению (и большой головной боли интернет-программиста), браузеры разных фирм интерпретируют HTML-коды и скрипты по-разному. Технические детали порой столь велики, что приходится создавать две версии сайта, отдельно для IE и отдельно для NN.

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

Автором курса принято решение в пользу браузера IE (версии 4.0 и старше):

- IE-браузер не надо устанавливать специально, он входит в состав Windows;
- с точки зрения программирования IE (как интерпретатор программного кода) устроен более логично и, тем самым, на нем легче построить учебный курс для новичка.

Итак, для работы с книгой необходим браузер Microsoft Internet Explorer 4 (или старше). В подключении браузера к Интернет необходимости нет.

#### Как устроена книга

Работа с книгой начинается с загрузки в браузер файла `index.htm` и продолжается переходом по гиперссылкам оглавления к нужному разделу.

Документ `index.htm` представляет собой оглавление-меню книги и содержит:

- Верхний ряд “горячих” кнопок для быстрого входа в разделы (уроки) книги.
- Гипертекстовое оглавление-меню для выбора нужного тематического раздела.
- Справочник по свойствам CSS, снабженный многочисленными испытательными стендами, которые помогают понять практический смысл той или иной конструкции.

Заголовки разделов в книге выделяются так:

#### Это заголовок раздела

Коды записываются моноширинным шрифтом на специальных врезках:

    <P style="font-size:1.5cm; color:green">
       К этому абзацу применено стилевое определение.

Если код завершается кнопкой Показать, то можно увидеть документ в отдельном окне браузера:

При потере фокуса такое окно автоматически закрывается (его закрывает, например, мышиный щелчок за пределами демонстрационного окна).