ГЛАВА 12
Анимация элементов Web - страниц
Одним из основных преимуществ свободно позиционируемых элементов является возможность управлять их местоположением, размером и видимостью с помощью специально написанных сценариев. Вы можете создавать простую анимацию на Web -страницах, заставляя свободно позиционируемые элементы перемещаться по заданным траекториям. Причем никакой модификации HTML -кода, кроме добавления соответствующих сценариев, не требуется (конечно, если соответствующие элементы на странице уже созданы).
Такая анимация может служить двум задачам. В простейшем случае она позволит оживить Web -страницы, сделать их привлекательнее, завлечь посетителя на сайт. (Количество посетителей — это единственная мера качества того или иного интернет-ресурса.) Также она позволит создать учебные пособия, которые можно выложить в Интернет или распространять на компакт-дисках. (Преподаватели школ и прочих учебных заведений — это для вас!) К несчастью, Web -дизайнеры мало используют такую интересную возможность.
Было сказано, что, кроме написания сценариев, собственно реализующих анимацию, и привязки их к определенным событиям, никакой особой переделки HTML -кода не требуется. Однако написание сценариев — задача, довольно сложная сама по себе. Мало того, что для этого нужно знать сам язык программирования JavaScript , следует хорошо представлять себе, как работают внутренние механизмы программы Web -обозревателя и как получить к ним доступ, чтобы использовать потом в своих нуждах. Кроме того, необходимо знать, как реализуется анимация, за счет чего элемент страницы будет казаться движущимся. И, конечно же, нужно иметь художественный вкус и — обязательно! — чувство меры.
Хорошо! С художественным вкусом и чувством меры проблем нет. Но есть проблемы с JavaScript и внутренними механизмами Web -обозревателя. Точ нее сказать, мы не знаем ни того, ни другого. И все же очень хотим создать на своих страницах какую-нибудь, хотя бы простенькую, анимацию. Что делать?
Воспользоваться Dreamweaver . Он предоставляет очень удобный способ создания анимированных элементов без углубления в JavaScript и темные недра Web -обозревателя. Вы просто указываете траекторию движения того или иного элемента, после чего задаете некоторые параметры — и сразу же получаете результат. Dreamweaver сам создает необходимые JavaScript -сценарии и помещает их в HTML -код страницы. Удобно, правда?
Давайте же выясним, как все это делается. Но не сейчас. В настоящее время нам нужно узнать кое-что еще. А именно о программах-сценариях, их назначении и о том, как создается анимация. Не пугайтесь: мы с вами не будем писать сценарии вручную (пусть это делает Dreamweaver ), а просто поговорим об основных принципах, которые знать в любом случае невредно.
Итак...
Введение в Web - сценарии
Зачем нужны сценарии? Чтобы преодолеть ограничения HTML . He все, конечно, — только одно.
Ограничения HTML
Так в чем же ограничивает нас HTML ? Зачем понадобилось придумывать еще один язык? Нельзя ли обойтись без него?
В общем, можно. Обходились же мы на протяжении целых одиннадцати глав обычным HTML , и ничего! Но дело в том, что странички-то мы делали неинтерактивные, т. е. не взаимодействующие с пользователем, не меняющие свое содержимое в ответ на его действия. Для таких страниц хватит и "чистого" HTML . А как только вы захотите "научить" страницу взаимодействовать с пользователем, т. е. сделать интерактивной, вы сразу упретесь в непреодолимую стену.
А все потому, что HTML не позволяет задать поведение страницы в ответ, скажем, на щелчок мыши по одному из ее элементов. С его помощью задается только ее внешний вид. И этим он в корне отличается от "классических" языков программирования, описывающих как раз поведение.
Собственно, HTML — и не язык программирования, а язык описания Web -страниц — и не более. Он описывает, как должна выглядеть информация в окне Web -обозревателя, только и всего. Причем, этот внешний вид жестко стандартизирован; Web -дизайнер, как вы уже поняли, значительно сильнее ограничен в своих возможностях, чем дизайнер-полиграфист. Особых воль ностей на Web -страницах он не сделает. (Фреймы, таблицы разметки и каскадные таблицы стилей CSS снимают многие ограничения, но не все.)
Конечно, такие ограничения обусловлены благой целью — обеспечением совместимости и единообразия внешнего вида страниц на любой компьютерной платформе. Но кому нужна совместимость такой ценой!
Вы можете сказать, что любая Web -страница и так является интерактивной, т. к. реагирует на щелчки по гиперссылкам. Но это не интерактивность, а стандартное поведение, заданное HTML . Интерактивность — это когда в ответ на перемещение курсора мыши за ним "бежит" картинка, когда при щелчке на фотографии внизу появляется ее описание, когда прямо на страничке "тикают" цифровые часы. Вот это настоящая интерактивность: в первом и втором случаях страница реагирует на действия пользователя, а в третьем — на события внешней среды. (Здесь под внешней средой подразумевается операционная система; работающий в ней системный таймер заставляет идти нарисованные часы.) И обычный HTML не может ее обеспечить.
Чтобы преодолеть этот недостаток "чистого" HTML , были придуманы два пути.
Первый путь — это специальные, как правило, нестандартные, "фирменные", теги, расширяющие возможности языка. В подавляющем большинстве случаев они добавляют Web -страницам интерактивные возможности. Например, нестандартный парный тег < marquee >. . .</ marquee >, поддерживаемый Internet Explorer , позволяет создать на странице "прокручивающийся" текст. Но, согласитесь, эти расширения ограничивают Web -дизайнера теми возможностями, что вложили в них разработчики Web -обозревателя. И вы не сможете заставить текст в элементе < marquee > не прокручиваться, а последовательно менять цвета — разработчики Internet Explorer этого не предусмотрели.
Мы хотим сами задавать поведение элементов страниц в ответ на действия пользователя. Мы хотим сами контролировать их поведение, держать все нити управления в своих руках. HTML их нам предоставить не может; ограничения, обусловленные самой его природой, — стена, преодолеть которую невозможно. Однако, если стену нельзя перепрыгнуть, ее можно обойти. Так мы и сделаем.
