Упражнение 6 Создание собственных кнопок
Создадим новый файл.
Нарисуем кнопку.
Выделим кнопку с помощью инструмента
и преобразуем её в символ (Insert,
Convert
to
Symbol…).
Дать символу название «Кнопка», тип
«Button».Удалим символ с холста. Откроем библиотеку (Windows, Library), выполним двойной щелчок по изображению символа «Кнопка» .
Переключимся на таймелане в кадр «Over», вставим пустой кадр (Insert, Key Frame).
Отредактируем кнопку (например изменим её цвет, сделаем надпись).
Переключимся на таймелане в кадр «Down», вставим пустой кадр (Insert, Key Frame).
Отредактируем кнопку.
Переключимся на таймелане в кадр «Hit», вставим пустой кадр (Insert, Key Frame), таким образом мы задаем область реагирования.
Перейдём на сцену1 (Scene1).
Из библиотеки на холст перетащим кнопку на холст и зададим ей свойства (см пп.4,5 Упражнения 5).
13. Просмотрим получившийся мини клип – Control, Play.
Задания для самостоятельной работы
Создайте сайт из трех страниц с помощью технологии Flash.
Создайте анимированный ролик с управляющими кнопками (Play, Stop). Сценарий анимации разработайте самостоятельно.
Процедуры Play и Stop выглядят следующи образом:
on(press){Play();}
on(press){Stop();}
Лабораторная работа № 8. Создание web-сайта средствами редактора Dreamweaver (папка web-6)
Основные требования:
- табличная структура (меню, контент, заголовок); сайт содержит 6 страниц; используются иллюстрации (в отдельной папке img).
1.Тема – Планирование сайта.
2. Опредилить структуру сайта (расположение меню, заголовков, контента)
Пример:
|
ПЛАНИРОВАНИЕ САЙТА
| |
|
Процесс web-дизайна Этапы планирования Разработка ТЗ
На главную |
Контент |
|
Об авторе гостевая книга | |
3. Средставами dreamweaver создать файл стилей.
Пример: файл style.css
.zag{background-color:#ff0000 ; text-align:center; color:#000000}
.content{background-color:#00ff00; color:#000000; font-family:Verdana, Arial, Helvetica, sans-serif}
.menu1{background-color:#0000ff; color:#000000}
A {text-decoration:none}
A:vizited{color:#000000}
A:hover{color:#000000; text-decoration:underline}
.menu2{background-color:#00ff00; color:#0000ff}
A:vizited{color:#000000}
A:hover{color:#ffffff; font-size:16; text-decoration:underline}
При создании файла стилей необходимо использовать дополнительные стилевые свойства (из файла «Стилевые свойства»)
4. Создать средствами Dreamweaver первую страницу index.htm, со ссылкой на файл стилей (в каждом из четырех разделов молульной сетки необходимо прописать используемый класс!)
Например:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Планирование сайта</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<table width="100%" height="100%" border="0" cellpadding="5" cellspacing="5">
<tr >
<td height="20%" colspan="2" class="zag">Заголовок</p></td>
</tr>
<tr>
И т.д.
5 Проверить корректность работы файла стилей!
6. Используя команду «сохранить как», создать остальные файлы:
proc.htm, etap.htm,tz.htm,avtor.htm,guest.htm.
7. Прописать все ссылки
8. Заполнить контент
9. Защитить лабораторную работу.