DHTML: динамическое веб-кодирование

• May 3, 2024

DHTML означает Dинамической ЧАСYperTвн Markup Lи может быть определено как искусство создания динамических веб-страниц HTML путем объединения HTML с Javascript и каскадными таблицами стилей (CSS). В отличие от других четырех вариантов HTML, изученных в предыдущих четырех статьях этой серии, DHTML не является стандартом, определенным консорциумом W3. Скорее, это «маркетинговый термин, который использовался Netscape и Microsoft для описания новых технологий, которые будут поддерживать браузеры поколения 4.x» (Консорциум W3). HTML 4.0 впервые представил два важных компонента, которые присущи структуре DHTML:

• Каскадные таблицы стилей (CSS)
• Объектные модели документов (DOM)

Как сделать ваш код динамичным

CSS предоставляет модели стилей и макетов, а DOM - модели содержимого документов для документов HTML. JavaScript и VBScript добавляют возможность написания скриптового кода для управления элементами HTML. Вместе эти три компонента составляют динамические HTML-страницы. Одним из основных сдерживающих факторов является несовместимость браузеров - Netscape и Microsoft до сих пор не договорились о том, что реализовывать в своих браузерах: таким образом, написание страниц DHTML, которые хорошо работают в обоих браузерах, может быть сложным. Чтобы убедиться в этом, вы можете получить доступ к стандартам Microsoft и Netscape онлайн:

• Библиотека MSDN в Microsoft
• Динамический HTML в Netscape Communicator

«DHTML отлично справляется с созданием эффектов с низкой пропускной способностью, которые расширяют функциональные возможности веб-страницы. Его можно использовать для создания анимации, игр, приложений, предоставления новых способов навигации по веб-сайтам и создания макетов страниц из этого мира, которые просто Это невозможно сделать только с помощью HTML. Хотя многие функции DHTML можно дублировать либо с помощью Flash, либо с помощью Java, DHTML предоставляет альтернативу, которая не требует плагинов и легко встраивается в веб-страницу. (Dan Steinman, 1998).

Чтобы понять сложности DHTML, полезно изучить его компоненты более подробно.

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

CSS - это сложные коды, которые отделяют веб-контент от веб-представления - стиля, расположения, цветов, шрифтов и так далее. CSSP или CSS Positioning позволяет на уровне пикселей контролировать позиционирование HTML-элемента. Отделение стиля представления веб-документов от контента с помощью CSS2 (уровень CSS 2) упрощает создание веб-страниц и обслуживание сайтов. «CSS2 поддерживает мультимедийные таблицы стилей, так что авторы могут адаптировать представление своих документов к визуальным браузерам, слуховым устройствам, принтерам, брайлевским устройствам, карманным устройствам и т. Д. Эта спецификация также поддерживает позиционирование контента, загружаемые шрифты, макет таблицы, функции для интернационализация, автоматические счетчики и нумерация, а также некоторые свойства, связанные с пользовательским интерфейсом "(Консорциум W3). W3C предлагает отличный учебник для изучения CSS2 под названием, CSS2 спецификация.

JavaScript

JavaScript - это специальный скриптовый браузерный язык, используемый для управления элементами HTML и добавления функциональности к формам, фреймам, окнам, ролловерам изображений, элементам управления аудио-видео и манипулированию DHTML. Netscape впервые назвал этот сценарий JavaScript, поэтому Microsoft придумала термин JScript для своей конкретной марки сценариев. Результат? Две версии JavaScript, которые могут быть досадно несовместимы. Чтобы узнать больше об этой проблеме, посетите Netscape's JavaScript Central и Microsoft JScript страница ресурса. Секрет динамических эффектов содержимого JavaScripted заключается в использовании объектов слоев. Объекты слоя изменяют текст, когда мышь прокручивает его; заставляет изображения или текст перемещаться по веб-странице; это также делает выпадающее меню выпадающим. Объекты слоя располагаются в тегах div с такими определяющими характеристиками, как цвет, положение и видимость.

Положить их вместе

DHTML обычно применяется для решения трех задач:

• Позиция или размещение блоков контента на странице и перемещение их
• Модификации стиля которые меняют внешний вид страницы
• Обработка событий или связывание пользовательских событий с изменениями в позиционировании или другими изменениями стиля

В более новых версиях Internet Explorer и Netscape (версии 5, 6 и выше) DOM становится предпочтительным кодом для большинства кодировок DHTML. После освоения DOM может помочь веб-дизайнерам манипулировать, добавлять, удалять и редактировать кодировку документа, связанную со всеми стилями, атрибутами (например, href) и элементами (например, тегами html) на странице. Это означает, что каждый тег и атрибут, общие для HTML-документа, доступны через DOM. В настоящее время W3C рекомендует уровни 0 и 1 объектной модели документа. Уровень 2 также находится в разработке, но еще не был продвинут в качестве стандарта для кодирования DHTML.

Полезная группа учебных пособий доступна через HTML Goodies, которая называется DHTML и учебник по слоям.

Ссылки, включенные в эту статью, предлагают введение и практические советы, с которых можно начать знакомство с этой новейшей разработкой в ​​области HTML-кодирования.Любой быстрый поиск в Google привлечет к вам гораздо больше ресурсов, которые вы всегда сможете найти. Поскольку производители браузеров работают над своей несовместимостью, а использование браузеров более высоких версий становится все более распространенным явлением, DHTML станет обязательной частью любого маршрута профессионального дизайнера.

Серия статей о выделении HTML

ЧАСТЬ 1: Должен ли Credible Designer знать HTML?
ЧАСТЬ 2: HTML 3.2 - рождение Уилбура
ЧАСТЬ 3: HTML 4.0 и 4.01 - больше хорошего!
ЧАСТЬ 4: XHTML: веб-кодирование для изысканного дизайна
ЧАСТЬ 5: DHTML: динамическое веб-кодирование

Видео инструкция: Уроки JavaScript | #17 - Добавление и удаление элементов с помощью DOM (May 2024).