Представляю Вашему вниманию шестнадцатый выпуск рассылки "Уроки веб-дизайна в примерах". В этом выпуске мы начнем изучения технологии создания динамических сайтов.
DHTML (Dynamic hypertext markup language) - представляет собой расширение языка гипертекстовой разметки документов HTML. DHTML позволяет добавить "динамину" в статические страницы HTML. DHTML содержит ряд событий и позволяет предпринимать определенные действия соответствующие данным событиям.
События DHTML включаются в HTML теги в следующем виде:
Здесь TAG - HTML тег, EVENT - событие и HANDLE - обработчик событий.
Рассмотрим события в DHTML.
Событие onClick. Событие onClick возникает при одиночном щелчке левой кнопкой мыши. В следующем примере при щелчке по тексту меняется цвет текста.
| Код | Отображение |
| <p onClick="this.style.color='red'">Пример использования события onClick.</p> |
Пример использования события onClick. |
Объект this означает текущий объект (в нвшем случае тег параграфа <p>), метод style дает доступ к стилю оформления текущего тега, свойство color опледеляет цвет текста. При событии onClick - нажатие кнопки мыши - текст окрашивается в красный цвет (red).
Событие ondblClick возникает при двойном щелчке левой кнопкой мыши. В следующем примере при двойном щелчке по тексту меняется цвет текста.
| Код | Отображение |
| <p ondblClick="this.style.color='red'">Пример использования события ondbvClick.</p> |
Пример использования события ondblClick. |
Одному тегу могут соответствовать несколько событий. В следующем примере один щелчек мыши приводит к смене цвета текста, а двойной щелчек меняет цвет фона.
| Код | Отображение |
| <p onClick="this.style.color='blue'" ondblClick="this.style.backgroundColor='red'">Пример использования событий onClick и ondbvClick.</p> |
Пример использования событий onClick и ondbvClick. |
Событие onLoad происходит при полной загрузки страницы документа или всех фреймов. Может использовать внутри тегов <BODY> и <FRAMESET>. В следующем примере при загрузке страницы появляется сообщение 'Страница загружена!'. Для того, чтобы опробовать этот пример добавьте на вашей страничке в содержимое тега BODY свойство onLoad:
Сразу же хочу предостереч от использования этой конструкции на сайте - посетителям может не понравиться, что при загрузке возникает новое окно с сообщением. Используйте это событие, например, для запуска какого-либо скрипта для которого важно, чтоб загрузка страницы была завершена.
Событие onUnLoad происходит при удалении страницы из окна или фрейма. Может использовать внутри тегов <BODY> и <FRAMESET>. В следующем примере при уходе со страницы появляется сообщение 'Спасибо, что нас посетили!'. Для того, чтобы опробовать этот пример добавьте на вашей страничке в содержимое тега BODY свойство onUnLoad, откройте эту страницу и перейдите на любую другую страницу:
И, наконец, приведем пример, запускающий работу фильтра RevealTrans, описанного в прошлом выпуске.
Описываем стиль:
Создаем изображение, к которому будем применять этот стиль:
И скрипт, который при нажатии кнопкой мыши на картинке будет запускать ее анимированное появление:
<script>
<!--
function Start_RevealTrans()
{
img_revealtrans.style.visibility="hidden"
img_revealtrans.filters.item(0).Apply()
img_revealtrans.filters.item(0).Play()
img_revealtrans.style.visibility=""
}
// -->
</script>
Добавлены разделы SEO (поисковая оптимизация) (посвященный всем аспектам оптимизации сайта под поисковые системы), скрипты на PHP и статьи, посвященные технологии Flash. Добавлен новый конструктор, позволяющий создавать баннеры-кнопки одним кликом. Добавлен раздел, посвященный выбору хостинга. Изменения в дизайне, юзабилити, доработаны некоторые статьи и разделы.
Если у Вас есть авторские статьи по веб или графическому дизайну (или просто хорошие авторские статьи на любую тему) и Вы хотите ими поделиться с другими, то свяжитесь со мной со страницы контактов. Не забудьте указать Ваше имя и адрес Вашего веб-сайта имеющего отношение к статье.
28.09.2005 Аудитория поисковых систем Рунета
28.09.2005 «Золотая лихорадка» вокруг подкастинга
28.09.2005 Romir снова посчитал Рунет
27.09.2005 Семь технологий, которые изменят мир
27.09.2005 США: «Руки прочь от интернета!»
27.09.2005 Эрик Шмидт — номер 1 в IT-индустрии
27.09.2005 Google позволяет каждому редактировать интернет на свой вкус
27.09.2005 Google празднует седьмой день рождения
27.09.2005 Дети будут учить пожилых людей пользоваться интернетом?
27.09.2005 Потребители выбирают блоги
P.S. Если Вы используете почтовую программу The Bat!, то письмо может отображаться некорректно. Для того, чтобы просмотреть правильный вариант, щелкните два раза на аттачменте Part.html и откройте письмо (кнопка "No/Нет").