Создание Web-страницы с использованием динамического HTML
Случалось ли вам, гуляя в Интернете, попадать на такие страницы, где творились чудеса и безобразия: сами собой менялись картинки и текст, из маленьких баннеров вдруг выскакивали гигантские рекламные объявления, открывались новые окна в браузере — без какого-либо участия с вашей стороны. Если да, то вы уже знакомы с интерактивными эффектами динамического HTML, о которых пойдет речь в этой главе.
С помощью Dreamweaver вы научитесь в два счета создавать следующие эффекты:
□ анимационные эффекты в виде летающих картинок и прочих объектов, которые могут двигаться по Web-странице;
□ открытие новых окон браузера с заданными ссылками, размерами и элементами интерфейса;
□ исчезновение и появление любых элементов страницы, что можно использовать для создания собственных раскрывающихся меню или выскакивающих рекламных баннеров;
□ запуск, остановка и перемотка мультимедийных роликов Flash и Shockwave в зависимости от определенных событий;
□ проверка версии браузера;
□ изменение свойств объектов, к примеру, цвета фона и многие другие фокусы.
В основе данных эффектов лежит активное использование так называемого динамического HTML, или, сокращенно, DHTML (от английского Dynamic HTML). История этой технологии берет свое начало с появления слоев в браузере Netscape Navigator 4. Собственно, слои и были задуманы как специальные инструменты для динамического формирования страницы. Значительный вклад в развитие DHTML внесла фирма Microsoft со своим браузером Microsoft Internet Explorer. К сожалению, это привело к некоторому перегибу — к тому, что технологию DHTML поддерживают далеко не все существующие браузеры. Впрочем, сегодня самые популярные браузеры, которыми пользуется более 90% посетителей Интернета, довольно успешно могут воспроизводить страницы на основе DHTML. А с другой стороны, пакет Dreamweaver генерирует такой исходный код, который работает в максимально возможном количестве браузеров.
Поскольку работа над книгой подходит к концу, я счел возможным опубликовать статистические выкладки по популярности браузеров. По данным компании Onestat (www.onestat.com), опубликованным в начале октября 2002 года, общая статистика используемых браузеров выглядит следующим образом:
□ Microsoft Internet Explorer 6.0 — 52.3%
□ Microsoft Internet Explorer 5.5 — 20.9%
□ Microsoft Internet Explorer 5.0 — 19.7%
□ Netscape Navigator 4.0 — 1.2%
□ Microsoft Internet Explorer 4.0 — 1.0%
□ Opera 6.0 – 0.8%
□ Mozilla 1 – 0.8%
Доля остальных браузеров не представляет сколько-либо значащих цифр. Это хорошая новость — хорошая в том смысле, что вы можете смело применять в своих проектах анимацию и динамические эффекты и при этом быть уверенными, что большинство посетителей увидит вашу страницу такой, какой вы ее задумали и воплотили.
Технология DHTML является сплавом обычного HTML, языка программирования JavaScript и стилей CSS. Если бы не было Dreamweaver, работу с DHTML можно было бы назвать очень сложной и требующей незаурядной квалификации. Как минимум, Web-дизайнер, прежде чем использовать эту технологию, должен был бы научиться программировать на JavaScript и уметь разбираться в тонкостях стилей CSS. И даже после этого значительную часть времени ему пришлось бы тратить на написание и отладку скриптов вручную.
Существует небольшая путаница с определением "динамический". С одной стороны, динамической часто называется страница, исходный HTML-код которой формируется на сервере по запросу посетителя. А с другой стороны, динамическими называют страницы, которые используют технологию динамического HTML. При загрузке в браузер пользователя, такие страницы могут изменять свое оформление и содержание без какого-либо обращения к серверу. В этой главе речь идет исключительно о втором случае — об использовании эффектов на основе DHTML.
Но вот на сцену выходит Dreamweaver и говорит: "Долой ручной труд! Да здравствует автоматизация и механизация!" С помощью Dreamweaver MX даже новичок может создавать страницы с динамическими эффектами.
При этом ему не нужно будет писать ни одной строчки кода. Большинство необходимых операций выполняется одной рукой, даже одним пальцем — с помощью мыши.