“DHTML-конструирование” — это учебник второго семестра курса 43 Роботландского университета. В нем изложены основы CSS (каскадные таблицы стилей) и показаны способы управления содержимым гипертекстовой страницы при помощи динамических воздействий на гипертекстовую модель документа скриптами, написанными на языке JavaScript.
Предполагается, что читатель знаком с основами ручной гипертекстовой
разработки (книга
DHTML — это обозначение технологий для построения гипертекстовых приложений, практически не отличимых по своей динамике и интерактивности от обычных компьютерных программ.
Одна из технологий DHTML (которая и будет рассмотрена в книге) это:
| DHTML=HTML4.0+JavaScript+CSS+браузер 4.0 |
Версия HTML4.0 кардинально не отличается от версии
Технология CSS+JavaScript допускает, например, применять абсолютное позиционирование, то есть, выводить элементы на экран, используя реальные координаты. Программное изменение координат в объектной модели вызывает изменение положения элемента на экране.
CSS позволяет наряду с двумя координатами x и y использовать еще и
третью координату —
CSS позволяет вводить на странице графические фильтры, которые добавляют к графике и тексту эффекты мультимедиа (отражение, прозрачность, тени, движение пятен, проявление в “рентгеновских лучах”).
Примеры, иллюстрирующие описанные возможности, приводятся в уроке 1.
В гипертекстовом проектировании можно выделить два направления:
Сайты “живут” в Интернете, локальные приложения — на компьютере индивидуального или в локальной сети коллективного пользователя (школьного класса, например).
Жанровые особенности определяются разницей в скорости передачи информации. Интернет — работает очень медленно (средняя скорость передачи информации — несколько килобайт в секунду). На стадии становления глобальной сети скорость передачи росла каждый год, внушая оптимизм разработчикам и пользователям. Но сейчас, к сожалению, этот процесс прекратился, и новый виток разгона сети возможен только после кардинального пересмотра существующих способов передачи. Мир замер в ожидании Эйнштейна связи. Замер и принял на вооружение пессимистические правила, продиктованные суровой действительностью: сейчас хороший сайт — это маленький, простой сайт. Он должен:
Помимо проклятия скоростью, сайтостроение переживает тяжелое время разгула демократии в среде разработчиков средств просмотра: каждый браузер требует особого программирования (даже на уровне разных версий, не говоря уже об уровне разных компаний) — никто не желает соблюдать стандарты.
Со временем, конечно, технические и политические трудности Интернета будут преодолены. Сейчас же, те, кто не хочет ждать сложа руки, могут направить усилия в гипертекстовый жанр отличный от сайтостроения, в котором можно накручивать любые скриптовые спирали, выкидывать любые стилевые коленца, грузить толстые звуковые треки, графику, видео без риска усыпить пользователя, ждущего окончания загрузки у монитора. Речь идет о жанре гипертекстого приложения, примерами которого служат гипертекстовые учебники Роботландского университета. Такие гипертекстовые изделия живут на локальном компьютере или в локальной сети и, следовательно, не имеют “родовых” пятен ужасно медленного Интернета. Кроме того, они могут позволить себе работать только на одном браузере и игнорировать все остальные.
Хотя технология CSS и воздействие на объектную модель документа при помощи JavaSript являются универсальными, то есть, годятся, как для сайтостроения, так и для разработки локальных приложений, в книге “DHTML-конструирование” практическая часть имеет уклон в сторону локальных приложений с учетом отмеченных выше особенностей.
Для работы с книгой необходим текстовый редактор (в нем записываются коды) и браузер (в нем происходит отладка кодов и работа с созданным продуктом).
В качестве текстового редактора хорошо подходит МикроМир, но можно обойтись и блокнотом Windows, или другим редактором, который умеет работать в кодировке Windows.
Какой браузер необходим? Разработчик сайтов должен всегда иметь под рукой несколько браузеров, минимум два: Microsoft Internet Explorer (IE) и Netscape Navigator (NN). Ведь пользователь сети может “заехать” на сайт, используя любой транспорт! И мы должны знать, что он увидит.
К сожалению (и большой головной боли интернет-программиста), браузеры
разных фирм интерпретируют
С другой стороны, принципы построения динамических документов остаются практически одинаковыми, и это позволяет в учебном курсе ориентироваться только на один браузер, так как постоянное распараллеливание вносит дополнительный пласт технических подробностей, которые, накладываясь на концептуальное ядро, рассеивают внимание, усложняют изложение и запутывают новичка.
Автором курса принято решение в пользу браузера IE (версии 4.0 и старше):
Итак, для работы с книгой необходим браузер Microsoft Internet Explorer 4 (или старше). В подключении браузера к Интернет необходимости нет.
Работа с книгой начинается с загрузки в браузер файла index.htm и продолжается переходом по гиперссылкам оглавления к нужному разделу.
Документ index.htm представляет собой оглавление-меню книги и содержит:
Заголовки разделов в книге выделяются так:
Коды записываются моноширинным шрифтом на специальных врезках:
<P style="font-size:1.5cm; color:green"> К этому абзацу применено стилевое определение.
Если код завершается кнопкой Показать, то можно увидеть документ в отдельном окне браузера:
При потере фокуса такое окно автоматически закрывается (его закрывает, например, мышиный щелчок за пределами демонстрационного окна).
