Урок 47. Раскрывающееся Flash–меню на сайте

Урок содержит элементы работы в двух средах: Flash MX (создание меню) и html-редакторе (создание структуры сайта и оформления html-страниц). Взаимосвязь достигается за счет создания единого проекта.

Тип урока: урок повторения и совершенствования знаний; урок с элементами игры.

Продолжительность: сдвоенный (1,5 часа)

Цель урока: в результате создания меню и сайта обобщить знания кружковцев, применить на практике; оценить знания кружковцев в интересной для них форме.

Задачи урока:
Образовательные

  • Повторение пройденного материала (в частности, Flash-программирование и создание фреймов);
  • Закрепление знаний.

Развивающие

  • Развитие логического и образного мышления.

Воспитательные

  • Формирование умения применять на практике полученные знания;
  • Воспитание самоконтроля учащихся.

Оборудование: компьютеры, доска

Программное обеспечение: Macromedia Flash, html-редактор.

Методическое обеспечение:

  • Инструкционные карты;
  • Справочный материал по тегам тела документа.

Литература:

  1. П. Лапин. Flash MX. Самоучитель. Питер 2003 – 386с.: ил.
  2. Концепции современного естествознания. Под руководством. С. И. Самыгина. Ростов-на-Дону: «Феникс», 1997 – 448с.

План урока:
1. I часть урока – Flash-меню (45 мин)
a) Актуализация знаний;
b) Практическая часть.
2. Перемена (10 мин)
3. II часть урока – «Строительство» сайта (45 мин)
a) Актуализация знаний;
b) Практическая часть;
c) Итоговая часть.

Подготовка к уроку:

Перед началом занятия на винчестерах компьютеров кружковцев создается папка (например, Flash-menu). В эти папки помещаются четыре картинки и пять файлов txt. Например, такие:

page.txt
Формализация. Язык науки
Под формализацией понимается особый подход в научном познании, который заключается в использовании специальной символики, позволяющей отвлечься от изучения реальных объектов, от содержания описывающих их теоретических положений и оперировать вместо этого некоторым множеством символов (знаков).
Ярким примером формализации являются широко используемые в науке математические описания различных объектов, явлений, основывающиеся на соответствующих содержательных теориях. При этом используемая математическая символика не только помогает закрепить уже имеющиеся знания об исследуемых объектах, явлениях, но и выступает своего рода инструментом в процессе дальнейшего их познания.
Для построения любой формальной системы необходимо:
a. задание алфавита, т.е. определенного набора знаков;
b. задание правил, по которым из исходных знаков этого алфавита могут быть получены "слова", "формулы";
c. задание правил, по которым из одних слов, формул данной системы можно переходить к другим словам и формулам (так называемые правила вывода).
В результате создается формальная знаковая система в виде определенного искусственного языка. Важным достоинством этой системы является возможность проведения в ее рамках исследования какого-либо объекта чисто формальным путем (оперирование знаками) без непосредственного обращения к этому объекту.

math.txt
Математика
Математика - система наук, изучающих количественные отношения и пространственные формы реальности. греч.Mathematike…

phys.txt
Физика
Физика - наука, изучающая наиболее общие свойства материального мира. По изучаемым объектам физика подразделяется: - на физику элементарных частиц; - на физику атомных ядер; - на физику твердого тела;…

chem.txt
Химия
Химия — наука о химических элементах, их соединениях и превращениях, происходящих в результате химических реакций. Поскольку все вещества состоят из атомов, которые благодаря химическим связям способны формировать молекулы, то химия занимается в основном изучением взаимодействий между атомами и молекулами, полученных в результате таких взаимодействий.
Примеры:
N2 + O2 = 2NO
HNO3 + KOH = KNO3 + H20

biol.txt
Биология
Биология — совокупность наук о живой природе. Предмет биологии — все проявления жизни: строение и функции живых существ и их природных сообществ, распространение, происхождение и развитие, связи друг с другом и неживой природой. Задачи биологии — изучение закономерностей этих проявлений, раскрытие сущности жизни, систематизации живых существ.

Также желательно чтобы у каждого учащегося были справочные листы по тегам HTML.

Ход урока:

часть I

Актуализация знаний

Ответьте на следующие вопросы и выполните задания:

  1. Объясните, что такое раскрывающееся меню.
  2. Какая комбинация клавиш во Flash позволяет создать символ? Опишите два пути создания символа.
  3. Как задать действие play() для кнопки на языке AS? Откройте блокнот и напишите данный сценарий.
  4. Что такое URL?

Практическая часть

Создадим раскрывающееся меню с помощью программы Macromedia Flash. Меню будет представлять собой кнопку, щелчок на которой откроет пользователю еще четыре кнопки, отвечающие за вызов определенных html–страниц на сайте с фреймами. Это наиболее типичное использование Flash для большинства сайтов.

ИНСТРУКЦИОННАЯ КАРТА № 1

1. Создайте новый flash-проект и сохраните его под именем «menu» в папке «Flash-меню».
2. Создайте символ кнопки. Назовите его «главная». Никаких надписей в символе кнопки делать не стоит.
3. Создайте второй символ кнопки. Назовите его «вложенная».
4. Создайте символ фильма. Назовите его «меню».
5. В первый кадр символа-фильма поместите «главную» кнопку. Она будет открывать меню. Создайте надпись на этой кнопки, например «Предмет». Задайте для этой кнопки действие (метод) play().

on (release) {
	play();
}

6. Установите в первом кадре действие stop().
7. Создайте второй ключевой кадр (F6).
8. Также установите для него действие stop().
9. Во втором кадре поместите под главной кнопкой четыре копии кнопки «вложенная». Сделайте надписи на данных кнопках: «Математика», «Физика», «Химия», «Биология». Задайте для них открытие HTML-страниц (“math.html”, “phys.html”, “chem.html”, “biol.html” соответственно) во фрейме с именем framepage.
Пример сценария для кнопки «Математика»:
on (release) {
	getURL("math.html", "framepage");
}

10. Теперь осталось перенести получившийся клип раскрывающегося меню на сцену, размеры рабочей области которой должны совпадать с размерами меню в открытом виде.
11. Сохраните проект и опубликуйте его в форматах .swf и .html

часть II

Актуализация знаний

Ответьте на следующие вопросы и выполните задания:

  1. Какие теги формируют фреймовую структуру?
  2. Напишите в блокноте html-код, позволяющий вставить в браузер два фреймовых окна: а) левое и правое, б) верхнее и нижнее.
  3. Вспомните теги нижнего индекса, вставки изображения и выделения заголовков. Напишите их в блокноте.

Практическая часть

Чтобы использовать раскрывающееся меню на сайте с фреймами, размер меню должен соответствовать ширине фрейма в случае вертикального расположения или его высоте – в случае горизонтального, но в любом случае размер фрейма не должен быть меньше размеров открытого меню.

ИНСТРУКЦИОННАЯ КАРТА № 2

1. Создаем заготовку сайта с фреймами.
a) Откройте html-редактор и введите код родительского окна:

<html>
<head>
<title>Предметы</title>
<frameset cols="250,*">
	<frame name="framemenu" src="menu.html" marginheight="0" marginwidth="0" scrolling="no" frameborder="0">
	<frame name="framepage" src="page.html" marginheight="10" marginwidth="10" scrolling="auto" frameborder="0">
</frameset>
</head>
</html>

b) Сохраните файл под именем index.html в той же папке, что и файлы menu.swf и menu.html.
c) Осталось только поместить все нужные HTML-страницы, а также фильм (в формате .swf) в одну папку.

2. В той же папке из файлов .txt создайте следующие страницы: page.html, math.html, phys.html, chem.html, biol.html. Текст и прилагаемые к проекту рисунки для html-страниц оформите самостоятельно.

Итоговая часть

Оцениваются все плюсы и минусы работы учащихся. Выявляются победители по следующим «номинациям»:

  • «Самый грамотный программист»
  • «Лучший дизайнер»