Интернет-журнал "Домашняя лаборатория", 2007 №3
Шрифт:
В Dynamic HTML существует возможность изменять не только свойства элементов страницы, но и ее содержание. К примеру, проводить замену одного текста на странице другим. Можно менять не только текст на странице, но и элементы ее оформления, например, фон, рисунки или заглавие страницы (отображающееся в заголовке окна браузера).
Команды Dynamic HTML построены так же, как и команды любого современного объектно-ориентированного языка программирования: вначале пишется имя объекта, над которым выполняется действие или свойство которого нужно узнать, а затем, через точку — его подобъекты или свойства. Они могут быть использованы как в отдельно взятом виде, так и в составе скрипта на VBScript
Для изменения какого-либо элемента web-страницы нужно присвоить этому элементу идентификатор (попросту включить в его тэг параметр ”id="оригинальное имя""), и затем с помощью команды изменить какое-либо свойство этого элемента. К примеру, для замены какого-либо рисунка web-страницы на другой нужно в тэг рисунка включить идентификатор — например, "<img src="picturel.jpg" id=pict>", а затем в скрипт или описание события элемента — команду: "pict.src="picture2. jpg"" (то есть установить значение свойства "источник" — src — элемента pict как picture2.jpg). При выполнении этой команды исходный рисунок picturel.jpg будет замещен новым — picture2.jpg. Как можно видеть, такая возможность отгрывает очень широкие перспективы перед web-дизайнерами. Можно, к примеру, организовать "галерею": посетитель нажимает название картины и ему тут же, без перехода на другую страницу, показывается эта картина.
Все элементы web-страницы, как именованные, так и неименованные, связаны для браузера, поддерживающего Dynamic HTML, в разветвленную иерархическую структуру. Скрипты, использующие возможности Dynamic HTML, могут обращаться к различным элементам в этой структуре, учитывая его расположение в ней. Однотипные элементы (например, все изображения, все формы и.т.д.) объединяются в группы — так называемые "коллекции". Существуют встроенные коллекции — то есть группы элементов, которые объединены в коллекции по умолчанию, и к элементам этих групп можно обращаться из скриптов без специальных команд, например, коллекция всех изображений на странице.
У создателя web-страницы имеется возможность самостоятельно организовывать однотипные элементы в коллекции и обращаться к различным элементам коллекций по их порядковым номерам. К примеру, для того, чтобы изменить выравнивание текста во втором абзаце web-страницы, нужно включить в текст скрипта на VBScript такие строки:
Set abzaci=document.all.tags("p")
abzaci(0). align="right"
Эти две строки создают коллекцию всех тэгов абзацев и обращаются ко второму ее элементу — второму абзацу, присваивая значение "right" параметру "align" его тэга "<р>". Нумерация элементов всех коллекций начинается с нуля.
Следует помнить, что при присваивании элементам страницы каких-либо свойств можно использовать лишь доступные свойства. Нельзя, например, непосредственно присвоить тэгу "<р>" или "<div>" свойство color. Для этого нужно изменить свойство style элемента "<р…>", например, командой "имя_элемента. style.color="red"", так как сами тэги "<р>" и "<div>" свойство color не поддерживают.
Для изменения текста на web-странице следует использовать специальное свойство объектов, могущих содержать текст — innerHTML. Например, следующая команда заменит текст тэга "<div id=asdf>Старый Текст</div>" новым текстом: "asdf.innerНТМL="<Ь>Новый текст</Ь>"". При этом новый текст может содержать тэги HTML, как, например, здесь — "<Ь>", они будут интерпретироваться так же, как если бы были в документе изначально.
Команды Dynamic HTML
Пример использования возможностей Dynamic HTML для создания удобной и красивой web-страницы приведен в главе 22. Подробнее об использовании Dynamic HTML можно узнать из литературы по web-программированию.
VBScripts и JavaScripts, таблицы стилей, Dynamic HTML — все это не что иное, как "языки общения" сайта с посетителем, призванные сделать web-страницу удобной и красивой. В то же время в основе любой web-страницы, даже самой сложной, лежит стандартный язык HTML. Таблицы стилей, скрипты — это лишь надстройки к нему и без HTML использоваться не могут. Поэтому не стоит пренебрегать и изучением основ.
Согласно статистике, собираемой с многих сайтов Интернета, более 99 процентов пользователей Всемирной Сети используют современные браузеры, поддерживающие языки скриптов и таблицы стилей. Поэтому использование новых технологий создания web-страниц, таких, как Dynamic HTML, VBScripts и JavaScripts и CSS, вполне оправдано. Для тех же посетителей, которые не пользуются современными браузерами, можно при желании сделать отдельный вариант сайта с использованием только стандартных средств HTML.
Графика
В самом документе HTML не может быть графических объектов, так как язык HTML — язык оформления текста, что следует даже из его названия (HyperText Markup Language). Но графические объекты могут быть вставлены в документ с помощью тэга "<img src="…">", и тогда они будут отображаться при просмотре web-страницы через браузер. Кроме того, несложные графические файлы могут быть конвертированы в специальный формат VML и вставлены в web-страницу, однако VML способен воспринимать только браузер Microsoft Internet Explorer версии 5.0 и выше, как, впрочем, и web-архивы — файлы, в которых с помощью использования стандарта MIME объединяются в один файл web-страница и все размещенные на ней рисунки и другие объекты.
В качестве графики могут выступать только файлы в формате Gif и Jpeg, и, для самых новых моделей браузеров — Png. Файлы остальных типов через браузер не могут быть просмотрены.
Для помещения картинки на web-страницу необходимо указать в тэге "<img src="…">" путь к ее файлу. Если графический объект располагается в той же директории, что и web-страница, на которой он размещен, то в его тэге "<img src="…">" достаточно указать только название файла. Если он расположен в одной из папок сайта, на котором находится web-страница, то можно указать относительный путь к нему — типа "<img src="images/ris.gif">". Если же рисунок, включаемый в web-страницу, располагается на другом сайте, то этом случае в тэге "<img src="…">" должен быть указан полный адрес рисунка — вида "<img src="http://www.site.ru/images/ris.gif">". При просмотре страницы браузер сам загрузит нужную графику с указанного адреса. Полный адрес рисунка можно указывать и в двух других случаях.