Лабораторная работа №10
< ИНТЕРАКТИВНОСТЬ>
Назначение интерактивных эффектов на Web-страницах
До сих пор мы с вами создавали статические Web-страницы, т.к. язык HTML не имеет средств для обеспечения интерактивности размещаемым на странице элементам.
Интерактивность - это реакция объекта на внешние воздействия. Самый пример интерактивности - выпадающее меню. При наведении указателя мыши на пункт главного меню появляется выпадающее меню - это и есть интерактивный эффект.
Интерактивный эффект - это проявление действия на определенное событие. Наведение указателя мыши на изображение является событием, а возникающее при этом смена изображения - действием. Действие - это программа на языке JavaScript, которая выполняет определенные задачи, например, производит смену изображения. События определены броузерами для каждого элемента страницы. Например, OnMouseOver, onMouseOut, onClick - события, связанные со ссылками, а onLoad - событие, связанное с изображениями и телом документа. События генерируются броузером в ответ на действия пользователя. Например, когда посетитель вашей страницы перемещает указатель мыши на ссылку, броузер генерирует событие onMouseOver и вызывает действие - функцию JavaScript (если такая существует), которую вы связали с данным событием.
При назначении элементу страницы интерактивного эффекта вы определяете действие и событие, которым оно вызывается. Одно и то же событие способно инициализировать несколько действий, и вы можете определить порядок, в котором эти действия происходят. Dreamweaver MX содержит несколько интерактивных действий. Имея опыт работы с JavaScript, вы можете также создавать собственные интерактивные действия.
<!DOCTYPE html>
<html>
<head>
<title>Профессиональное обучение</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="favicon.ico" rel="shortcut icon" type="image/x-icon" />
<link rel="stylesheet" type="text/css" href="styles/fonts.css"/>
<link rel="stylesheet" type="text/css" href="styles/cernel.css"/>
<link rel="stylesheet" type="text/css" href="styles/main-content.css"/>
<script type="text/javascript" src="scripts/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="scripts/main.js"></script>
<script type="text/javascript" src="scripts/jquery.slimscroll.min.js"></script>
<!--nivo-slider-->
<script type="text/javascript" src="scripts/unslider.min.js"></script>
