Материал: Web-дизайн. лабораторный практикум. Суворов А.П., Проценко В.Н
}
</script>
</head>
<body>
<p align="center"><font size=6>Данные о пользователе</font> <form name="user">
<b>Пожалуйста, укажите данные о себе:</b> <br>
ФИО<input type="text" name="f" size="30"><br> Адрес<input type="text" name="a" size="35"><br> e-mai<input type="text" name="e" size="30"><br>
<input type="button" value="Послать" onClick="doSend()"> <input type="reset" value="Отменить"> </form>
</p>
</body>
</html>
Вставка звука
Если вам необходимо озвучить страницу, вот простейшая инструкция:
<bgsound src="music/gimn.mid" loop=infinite>
С помощью JavaScript можно разнообразить страницы сайта. Пример скрипта проигрывания музыки при наведении на заголовок
текста:
<script>
function playHome() { document.all.sound.src = "music/file.mid"} </script>
<bgsound id=sound>
<h1 onMouseover=playHome()>Заголовок с музыкой</h1>
1.4.DHTML
DHTML (динамический HTML) – это набор средств, которые позволяют создавать более интерактивные Web-страницы без увеличения загрузки сервера. Другими словами, определенные действия посетителя ведут к изменениям внешнего вида и содержания страницы без обращения к серверу.
DHTML построен на объектной модели документа (Document Object Model, DOM), которая расширяет традиционный статический HTMLдокумент. DOM обеспечивает динамический доступ к содержимому документа, его структуре и стилям. В DOM каждый элемент Web-страницы
50
является объектом, который можно изменять. DOM не определяет новых тэгов и атрибутов, а просто обеспечивает возможность программного управления всеми тэгами, атрибутами и каскадными таблицами стилей (CSS). Каждой гиперссылке, заголовку или текстовому параграфу можно присвоить имя, атрибуты стиля или цвета текста и указать это имя в сценарии, имеющемся на данной странице. Сценарий может быть написан на любом существующем скриптовом языке, но здесь подразумевается использование языка JavaScript. Элементы страницы впоследствии могут изменяться в результате определенного события, например, при наведении курсора мыши, при щелчке, нажатии клавиши на клавиатуре либо после истечения заданного промежутка времени. Изменяться может не только стиль и цвет текста, но и весь объект, текст или рисунок.
Объединение JavaScript и CSS
1. Пример изменения цвета текста.
<html>
<head>
<title>Простая страница</title> </head>
<body>
<h1 style="color:red">Дo6po пожаловать на нашу страницу!</h1> <р>3десь много интересной информации.
3десь много интересной информации.
3десь много интересной информации.
3десь много интересной информации.
3десь много интересной информации. </р> </body> </html>
Данный пример применения CSS позволяет сделать заголовок красного цвета. Допустим, вы хотите, чтобы текст заголовка только тогда становился красным, когда пользователь наводит на него курсор. Этого можно добиться с помощью CSS и JavaScript.
Шаг 1. Удаление существующей информации о стиле Это действие может показаться вам шагом назад, но оно действительно
необходимо:
<html>
<head>
<title>Простая страница</title> </head>
<body>
51
<h1>Добро пожаловать на нашу страницу! </h1> <р>3десь много интересной информации.
3десь много интересной информации.
3десь много интересной информации.
3десь много интересной информации.
3десь много интересной информации. </р> </body> </html>
Шаг 2. Добавление идентификатора Поскольку вам нужно как-то обращаться к элементу, с которым будут
производиться манипуляции, необходимо в тэг <hl> добавить атрибут id - это краткое обозначение, позволяющее указать нужный элемент:
<html>
<head>
<title>Простая страница</title> </head>
<body>
<hl id="head1">Дo6po пожаловать на нашу страницу!</h1> <р>3десь много интересной информации.
3десь много интересной информации.
3десь много интересной информации.
3десь много интересной информации.
3десь много интересной информации. </р> </body> </html>
Шаг 3. Добавление обработчика событий Следующий шаг — добавление обработчика событий. Этому действию
соответствует событие onMouseover. Также следует указать имя функции, которая будет вызываться при выполнении события:
<html>
<head>
<title>Простая страница</title> </head>
<body>
<h1 id="head1" onMouseover ="colorchange ()">Добро пожаловать на нашу
страницу!</h1>
<р>3десь много интересной информации. 3десь много интересной информации. 3десь много интересной информации. 3десь много интересной информации.
3десь много интересной информации. </р> </body> </html>
52
Шаг 4. Написание сценария JavaScript
Вам потребуется единственная строка, состоящая из следующих частей:
имя объекта на странице, с которым должен выполняться ваш сценарий - в данном случае head1;
применяемый аспект JavaScript - в данном случае style;
атрибут стиля, который будет изменяться - color;
новое значение, принимаемое атрибутом стиля - red. Соедините это, и получится следующая строка:
Head1.style.color = "red"
Добавьте ее в функцию и сохраните файл. В окончательном варианте страница должна выглядеть так:
<html>
<head>
<title>Простая страница</title> <script language="JavaScript"> function colorchange()
{
head1.style.color = "red";
}
</script>
</head>
<body>
<h1 id="head1" onMouseover="colorchange()">Добро пожаловать на нашу страницу!</h1>
<р>3десь много интересной информации. 3десь много интересной информации. 3десь много интересной информации. 3десь много интересной информации.
3десь много интересной информации. </р> </body> </html>
Откройте эту страницу в браузере и посмотрите, что происходит, когда вы наводите курсор на заголовок. Если все было сделано правильно, то цвет заголовка изменится.
Но обратите внимание, что цвет текста не становится прежним, когда вы убираете курсор с заголовка.
Пример использования атрибута text-decoration.
53
Используя в сценариях JavaScript атрибуты, название которых пишется через дефис, убирайте дефис и пишите оба слова слитно, причем второе слово должно начинаться с заглавной буквы. Таким образом, text-decoration в сценариях должно выглядеть как textDecoration.
<html>
<head>
<title>Простая страница</title> <script language="JavaScript"> function addunderline()
{
head.style.textDecoration = "underline";
}
function removeunderline()
{
head.style.textDecoration = "none";
}
</script>
</head>
<body>
<h1 id="head" onMouseover="addunderline()" onMouseout="removeunderline()">Добро пожаловать на нашу страницу! </h1>
<р>3десь много интересной информации. Здесь много интересной информации. Здесь много интересной информации. Здесь много интересной информации.
Здесь много интересной информации.</р> </body> </html>
Необходимо обратить внимание на прописную букву в слове textDecoration — если все слово набрать в нижнем регистре, сценарий выполняться не будет. Теперь при наведении курсора заголовок станет подчеркнутым, а затем, если убрать курсор, вернется в прежнее состояние.
Пример точного позиционирования текста
Сначала необходимо рассмотреть, каким образом осуществляется позиционирование текста.
Наиболее часто применяются следующие атрибуты позиционирования:
position - имеет два интересующих нас значения: absolute и relative (по умолчанию значение static). Для значения absolute в качестве точки отсчета используется верхний левый угол окна браузера, и все параметры местоположения отмеряются от него. В свою очередь,
54