Учебник по веб дизайну
 Свободное программное обеспечение. Доступно. Бесплатно. Легально.
Учебник
HTML
CSS
DHTML
JavaScript
SSI
Раскрутка
Справочник
HTML
JavaScript
SSI
Браузеры
Хостинг
Скрипты
JavaScript
PHP
Статьи
SEO
HTML
Flash
Все об Интернет
Новости Интернет
Утилиты
Конструктор
Информер
А так же...
Наши баннеры
Контакты
Гостевая
Реклама на сайте

Технология создания динамических сайтов.

Здравствуйте, уважаемые подписчики!

Представляю Вашему вниманию шестнадцатый выпуск рассылки "Уроки веб-дизайна в примерах". В этом выпуске мы начнем изучения технологии создания динамических сайтов.


Содержание выпуска:
DHTML

DHTML (Dynamic hypertext markup language) - представляет собой расширение языка гипертекстовой разметки документов HTML. DHTML позволяет добавить "динамину" в статические страницы HTML. DHTML содержит ряд событий и позволяет предпринимать определенные действия соответствующие данным событиям.

События DHTML включаются в HTML теги в следующем виде:

<TAG EVENT="HANDLE">

Здесь 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:

<BODY onLoad="javascript:window.alert('Страница загружена!')">

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

Событие onUnLoad происходит при удалении страницы из окна или фрейма. Может использовать внутри тегов <BODY> и <FRAMESET>. В следующем примере при уходе со страницы появляется сообщение 'Спасибо, что нас посетили!'. Для того, чтобы опробовать этот пример добавьте на вашей страничке в содержимое тега BODY свойство onUnLoad, откройте эту страницу и перейдите на любую другую страницу:

<BODY onUnLoad="javascript:window.alert('Спасибо, что нас посетили!')">

И, наконец, приведем пример, запускающий работу фильтра RevealTrans, описанного в прошлом выпуске.

Описываем стиль:

.img_revealtrans{filter:RevealTrans(Duration='1', Transition='12');}

Создаем изображение, к которому будем применять этот стиль:

<img id=img_revealtrans src="/img/pic.jpg" width=200 height=100 class=img_revealtrans OnClick="Start_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. Добавлен новый конструктор, позволяющий создавать баннеры-кнопки одним кликом. Добавлен раздел, посвященный выбору хостинга. Изменения в дизайне, юзабилити, доработаны некоторые статьи и разделы.

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

P.S. Если Вы используете почтовую программу The Bat!, то письмо может отображаться некорректно. Для того, чтобы просмотреть правильный вариант, щелкните два раза на аттачменте Part.html и откройте письмо (кнопка "No/Нет").

Реклама

Если твой компьютер завис - выдерни шнур, выдави стекло.
главная :: наверх :: добавить в избранное :: сделать стартовой :: рекомендовать другу :: карта сайта

Rambler's Top100

Страница сгенерированна за 0.0137 сек.
Сайт оптимизирован под разрешение 800х600 и браузер MS IE 6.0.
Copyright © 2005-2010 originweb.info, design.originweb.info.
Хостинг ruweb.net