3. Динамический HTML (DHTML)

Пользователи постоянно жалуются на «разрастающееся программное обеспечение» различных продуктов, которое не имеет практического применения. В компаниях зачастую используется программное обеспечение одного направления, например текстовой процессор, и осуществляется его комбинирование с крупными таблицами, базами данных и графическими программами. Хорошо, если все эти программы действительно используются, в противном случае они просто занимают место на диске. Сейчас программисты пытаются сделать то же самое с Web-приложениями (Web-страницами) за счёт разработки динамических документов. Они не вызывают перегрузки дисковой подсистемы и не приводят к активному использованию оперативной памяти. Пока это удаётся. Язык DHTML наряду с базовым набором команд языка HTML основывается на создании сценариев, использовании объектной модели документа и таблиц стилей. Помимо этого имеется возможность использовать на страницах огромное разнообразие аудиофайлов и изображений при помощи оперативных, быстро загружаемых, легко управляемых интерактивных интерфейсов, которые без труда могут создаваться любым Web-программистом.

Квалифицированные Web-разработчики активно применяют преимущества динамического HTML (Dynamic HTML). DHTML-сайты используют расширенный набор HTML-элементов и атрибутов, а также элементы таблиц стилей. Кроме того, при помощи сценариев можно осуществлять динамическое изменение сайта. Все вместе это позволяет создавать странички, которые «оживают» благодаря перемещающемуся тексту, подвижной графике и наличию интерактивных элементов. В настоящее время глобальная сеть предоставляет пользователям давно ожидаемые ими функциональность и интерактивность без использования подключаемых модулей (plug-ins), добавок (add-ons), серверных программ, не вызывая увеличения времени загрузки и нагрузки процессора.

По мере того как Интернет становится основным источником информации для компаний и частных лиц, возникает потребность в том, чтобы HTML-авторы сознательно обеспечивали достоверность представления документа независимо от используемого пользователем Интернета оборудования и программного обеспечения. И хотя HTML-документы никогда не смогут представить документ в том же виде, в котором он был создан, HTML в настоящее время является одним из самых популярных форматов представления документов.

18

Динамический HTML (Dynamic HTML, DHTML), видимо, недооценён разработчиками-новичками. Это не отдельный язык HTML и не расширенный набор команд, собранных из разных языков. DHTML соответствует требованиям HTML 4.0 и 4.1, поддерживает каскадные таблицы стилей (Cascading Style Sheets, CSS), объектную модель документа (Document Object Model, DOM), а также языки сценариев JavaScript, JScript, ECMAScript и VBScript, что позволяет создавать действительно интерактивные web-сайты.

Если вы являетесь Web-программистом, то DHTML может кардинальным образом изменить ваш мир. Однако от вас потребуется больше, чем просто знание элементов HTML и их атрибутов. Для изменения внешнего вида и форматирования каждого объекта и элемента документа вы должны уметь использовать каскадные таблицы стилей. Вы должны чётко представлять, как работает объектная модель документа и как она связана со структурой документа, а также как при использовании этих знаний можно изменять содержание и внешний вид вашего документа при взаимодействии читателя с вашими страницами. Вы также должны уметь создавать сценарии на языках

JavaScript, JScript, VBScript или ECMAScript. Всестороннее знание любого из этих языков позволит вам определять, а затем изменять любой объект, входящий в структуру документа, которая, в свою очередь, определяется объектной моделью документа.

Объектная модель документа

Объектная модель документа (Document Object Model, DOM) является независимой от операционной системы и используемого языка системой взаимодействия, которая предоставляет программам и сценариям динамический доступ и возможность обновления содержания, структуры и стиля документа. DOM определяет последовательную модель, используемую при создании HTML-документов. Кроме того, она обеспечивает стандартный интерфейс, используемый для доступа к HTML-объектам, управлению ими и организации их взаимодействия. DOM отвечает требованиям Web-разработчиков, которые при разработке документов основываются на единых универсальных требованиях, а не на требованиях программы определённого производителя. В общем, эта модель расширяет возможности взаимодействия в сети. Не имея чёткого представления об объектной модели документа, очень сложно создавать странички, которые бы использовали все достоинства сети и Web-браузеров.

19

Каскадные таблицы стилей

Каскадные таблицы стилей (Cascading Style Sheets, CSS) являются довольно простой технологией, позволяющей подключать к HTML-документам набор свойств, определяющих шрифты, цвета и интервалы, относящиеся к текстовой информации, размещаемой в HTML-документах. Для реализации всех преимуществ HTML 4.1 и возможностей динамических интерактивных эффектов CSS требуется использование браузеров версии 4.0 и выше.

Контрольные вопросы и задания

1.В чём заключается отличие DHTML от классического HTML?

2.В чём заключается суть объектной модели документа?

3.Какова функция каскадных таблиц стилей?

4.Цвет и фон

Цвет и фон (имеется в виду фоновое изображение) страницы выбираются по желанию Web-мастера, но нужно учитывать и тот факт, что от них зависит визуальное восприятие всего сайта. Не нужно всё чрезмерно затемнять, текст удобно читать, если его хорошо видно. Не применяйте чёрный цвет, мотивируя это продлением срока службы мониторов пользователей. По статистическим данным, посещаемость "чёрных" сайтов не очень высокая.

Рассмотрим сначала способ задания фонового цвета Web-страницы. Для этого в строку с дескриптором <BODY> создаваемого HTML-документа нужно добавить параметр BGCOLOR и присвоить ему требуемое значение – название цвета на английском языке, например, red (красный), green (зелёный) и т.д., или же шестнадцатеричный код желаемого цвета – #FF0000 (красный), #008000 (зелёный) и т.д. Браузер одинаково распознает оба варианта. Шестнадцатеричный код того или иного цвета2 можно посмотреть в некоторых специальных программах или графических редакторах, например в Paint Shop Pro. В приведённом ниже примере страница документа заполняется красным цветом и для его описания использовано название цвета.

<BODY BGCOLOR="Red">

Подобным образом можно воспользоваться и шестнадцатеричным кодом цвета. <BODY BGCOLOR="# FF0000">

2 Коды некоторых цветов и их названия на английском языке представлены в приложении А

20

Фоном может быть как достаточно большой графический файл (учтите – в этом случае страничка будет грузиться дольше), так и его фрагмент, что более разумно из соображений времени загрузки. При использовании фрагмента файла он будет автоматически размножен браузером на всё отображаемое поле, поэтому нужно подбирать такой фрагмент изображения, который хорошо стыкуется по краям с самим собой.

Вставить фоновое изображение в HTML-страницу можно с помощью следующей конструкции. <BODY BACKGROUND="images.gif">

Здесь параметру BACKGROUND присвоено значение images.gif — это имя графического файла с расширением .gif. Естественно, имя файла может быть любым. Предполагается, что графический файл расположен в одном каталоге с текущим HTML-документом.

Существует ещё один параметр, который может использоваться с параметром background, это – BGPROPERTIES. Присвоив этому параметру значение fixed, можно сделать фоновое изображение неподвижным, т.е. при прокручивании страницы фон будет оставаться на месте.

<body backgrounds images.gif" bgproperties="fixed">

Любой Web-программист вам скажет, что использование фонового цвета Web-страниц более рационально из соображений быстрой загрузки сайта. Рисунки вообще грузятся дольше, даже самые маленькие

Контрольные вопросы и задания

1.Каким образом можно задать цвет Web-страницы? Приведите пример тега.

2.Как задаётся фон Web-страницы? Какие дополнительные параметры могут для этого использоваться?

3.Создайте простейший HTML-документ (в который достаточно включить одну строку, см. рисунок 1, листинг 1), залейте фон цветом на ваш выбор (см. приложение А).

21