1 Введение
С постоянной популяризацией и развитием Интернета/Интранета все больше и больше компаний, предприятий и частных лиц начинают создавать свои собственные веб-сайты, писать веб-страницы и публиковать информацию для внешнего мира новым способом, чтобы люди могли ее просматривать. , чтение и применение. Поэтому создание веб-страниц привлекает внимание все большего числа профессионалов.
Веб-страницы относятся к некоторым файлам документов, которые предоставляют миру информацию через Интернет, включая личную информацию, деловую, развлекательную и другую информацию. Веб-страницы написаны с использованием языка гипертекстовой разметки (HTML) и хранятся на веб-серверах в Интернете/Интранете, чтобы посетители могли читать их с помощью браузера. Веб-страницы, написанные на языке HTML, также называются гипертекстом, то есть веб-страницы содержат мультимедийную информацию, такую как текст, графика, звуки, изображения и гиперссылки (HyperLink).
2 DHTML Simple
Я могу получить доступ к большому количеству веб-страниц, написанных на HTML и языках сценариев, в браузере. Чтобы облегчить просмотр, различные производители компьютеров выпустили свои собственные браузеры. Эти браузеры пока не имеют единого стандарта поддержки HTML, что явно не способствует развитию Интернета. Поэтому Консорциум Всемирной паутины (W3C) разработал независимую от платформы и языка спецификацию — объектную модель документа (DOM).
DOM объединяет HTML, CSS (каскадные таблицы стилей) и языки сценариев для формирования модели взаимодействия, которую могут реализовать один или несколько человек. И Netscape, и Microsoft внесли в W3C предложения по реализации DOM: использовать динамический HTML, то есть DHTML (динамический HTML), для решения проблемы.
DHTML — это общий термин для нескольких новых функций, которые были расширены при сохранении совместимости с существующим HTML. Эти новые функции в основном относятся к динамическим функциям, функциям позиционирования и возможности использования CSS.
Есть две причины для использования DHTML. Во-первых, DHTML делит каждый элемент веб-страницы на множество независимых объектов, а свойства этих объектов задаются с помощью CSS. Во-вторых, DHTML открывает каждый объект для среды программирования и сценариев. Язык программирования C++ можно использовать для управления объектами на веб-странице, а сценарии Java и VBscript также можно использовать для управления объектами на веб-странице. Это означает, что веб-страница и все, что на ней, программируется, что придает веб-странице новые возможности. Мы обнаружим разницу, когда запустим приложение: когда мы запускали программу в Интернете, нам приходилось ждать повторной загрузки веб-страницы каждый раз после одного элемента, если веб-страница содержала большое количество. из скрытых объектов даже потребуется полноэкранный режим. Новая страница снова пройдет процесс доступа к серверу с помощью DHTML, вы можете щелкнуть изображение в верхней части экрана, чтобы создать абзацы в нижней части; экран изменится немедленно, без необходимости повторного доступа к серверу. Все таблицы станут действующими базами данных, и пользователи смогут динамически фильтровать и сортировать данные. Это уменьшает количество запросов к серверу, тем самым снижая нагрузку на сервер и улучшая общую производительность клиента и сервера.
3 Использование таблиц стилей CSS
Основой DHTML являются каскадные таблицы стилей (Каскадные таблицы стилей — это набор атрибутов отображения и позиционирования, определенных автором веб-страницы). Самая большая особенность CSS — объектно-ориентированный веб-дизайн, то есть каждая страница, каждый абзац, каждое изображение и таблица рассматриваются как объект. Затем объявите каждый экземпляр этого объекта. Каждый экземпляр имеет стиль, который представляет собой набор атрибутов или инструкций по отображению. Если они объявлены один раз, эти свойства будут использоваться на всей веб-странице или даже на всем сайте. Каждому стилю можно присвоить имя, например H1, Li. Если имя стиля совпадает с именем допустимого элемента (или тега) DHTML, этот стиль будет автоматически применяться к каждому экземпляру элемента, если он задан; Если стиль назван без соответствующего тега DHTML, его необходимо применить вручную там, где вы хотите, чтобы он отображался.
3.1 Определение и использование основных стилей В следующем сегменте программы есть два стиля: H1 и избранный H1 — допустимый элемент DHTML. Часть, отмеченная в программе 〈H1〉〈／H1〉, унаследует все атрибуты стиля H1. ; Favor не является элементом DHTML. При его определении перед ним необходимо добавить точку. При ссылке на него необходимо использовать
〈HTML〉
〈HEAD〉〈TITLE〉тест〈／TITLE〉
〈STYLE TYPE="текст／css〉
〈 !--
H1 {стиль шрифта: нормальный;
шрифт-вес: жирный;
цвет: зеленый;
line-height:20pt} ／Определить стиль H1／
.favor{стиль шрифта: нормальный;
размер шрифта: 15 пт;
фоновое изображение: URL (back.imag.gif);
textalign:center} ／Определить избранный стиль／
--〉
〈H1〉ЭТО ТЕСТ!〈／H1〉／Стиль использования H1／
〈P CLASS=”favor”〉ВАМ ЭТО НРАВИТСЯ?〈／P〉／Используйте стиль／
3.2 Использование внешних стилей Таблицы стилей также могут храниться во внешних файлах. Соединение между этим файлом и страницей может осуществляться через ИМПОРТ или ССЫЛКУ. Например, таблица стилей хранится в файле mysite.css. Вы можете вставить в документ следующий код для вызова внешней таблицы стилей:
〈ССЫЛКА REL=СТИЛЬ
HREF="мойсайт.css"
ТИП="текст／css"
Title=”Test Style”〉
4. Реализация интерактивной функции
Сам CSS не имеет интерактивной функции. Чтобы реализовать взаимодействие, необходимо объединить объект, определенный CSS, с моделью документа (DOM) и преобразовать веб-документ в документ DHTML. DOM предоставляет скриптовым языкам возможность доступа к элементам на странице. Объектные модели, поддерживаемые Microsoft и Netscape, несколько отличаются.
В модели Microsoft языки сценариев имеют доступ ко всем элементам на HTML-странице, и все элементы отражаются как объекты в document.all. Следующий фрагмент программы используется для записи всех элементов на странице:
для (I=0;I
document.write(document.all［I］.tagName+”＼n” );
}
В модели Netscape язык сценариев может получить доступ к определенному набору элементов на HTML-странице, например к содержимому тега
для (I=0;I
document.write(document.layers［I］.name+”＼n”);
}
5 Использование технологии позиционирования
В HTML положение любого объекта всегда относительно других частей структуры веб-страницы. При компиляции веб-страниц мы часто выжимаем из страницы изображение, добавляя фрагмент текста. Теперь, используя технологию позиционирования DHTML, объекты можно фиксировать и штабелировать, то есть несколько изображений размещаются в одной и той же позиции на странице, а затем объект, помещенный сверху, постоянно назначается для достижения анимационных эффектов.
пример:
*myback{цвет фона:прозрачный}
*мойпойт
позиция: абсолютная;
верх: 5 дюймов;
справа: 5 дюймов;
ширина: 10 дюймов}
BODY{background-image:url(／image／back.gif);}
〈class=.mypoint〉Img(src="／image／a.gif)
〈DIV CLASS=”pile” ID=”image1” style=”z-index:4”〉
〈DIV CLASS=”pile” ID=”image2” style="z-index:3"〉
〈DIV CLASS="pine" ID="image3" style="z-index:2"〉
〈DIV CLASS="pine" ID="image4" style="z-index:1"〉
В приведенном выше сегменте программы фон настроен таким образом, чтобы свет мог проходить через базовую карту. Раньше этого эффекта можно было достичь только с помощью специальных инструментов рисования. На странице также расположены 4 изображения, и анимационные эффекты, которые они создают, также очень хороши.
6. Заключение
Выше были проведены некоторые исследования того, как использовать DHTML для компиляции веб-страниц. Создателям веб-страниц еще предстоит углубиться в изучение множества технических проблем.
Вэй Сяотань учится в магистратуре Школы транспорта Университета Северного Цзяотуна, 100044, Пекин.