Элективный курс "Web-технологии и Flash"

Элективный курс "Web-технологии и Flash. Учимся и совмещаем" был опубликован в журнале "Информатика и образование" - 9/2006.
Автор курса: Шапошникова С.В.

Пояснительная записка

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

Одной из важных задач является подготовка учащихся к профессиональному образованию. С другой стороны, в условиях свободного посещения учащимися занятий, их разнообразных склонностей и способностей, а также различного возраста педагог неотъемлемо решает задачу, как заинтересовать подростков и объединить их для совместной деятельности. Помимо этого развитие творческих способностей учащихся в организациях дополнительного образования ставится на одно из первых мест. Исходя из этих трех особенностей, и был разработан данный курс. Изначально было решено назвать его «Курс юного web-мастера», однако затем доля работы в среде Macromedia Flash была увеличена, и было сочтено, что более грамотно будет назвать курс "Web-технологии и Flash. Учимся и совмещаем".

Курс состоит из четырех частей:

  1. HTML - язык разметки веб-страниц (20 часов).
  2. Программирование на JavaScript (30 часов).
  3. Macromedia Flash как среда создания графики, анимации и программ (40 часов).
  4. Взаимодействие приложений Flash с Web-браузерами (18 часов).

В современном мире широко распространен Интернет и ожидается его дальнейшее прогрессирование. Все это делает актуальным для изучения разнообразные Web-технологии. Их множество позволяет выбирать среды разработки и языки программирования для обучения. Путь "от простого к сложному" естественен, поэтому в основе изучения Web почти всегда лежит язык HTML. Знание языка разметки страниц является первым необходимым, что требуется для начинающего Web-мастера. Какой педагог не оценил предоставляемые этим языком возможности в преподавательской деятельности? Язык HTML легок для освоения, и это позволяет преподавать его для разнообразного круга учащихся.

Научившись создавать Web-страницы, следующей ступенью является научиться управлять ими. Однако на данном этапе большее внимание уделено изучению программирования как такового, чем подробного изучения возможностей JavaScript в написании сценариев. Рассматриваются принципы создания сценариев. Учащиеся осваивают, как с помощью языка программирования JavaScript можно изменять значения атрибутов HTML-контейнеров, обрабатывать события.

Выбор Macromedia Flash MX обусловлен тем, что данная среда имеет широкое распространение, предоставляет широкие возможности по созданию не только мультипликации, но и программ (позволяет удовлетворить как "программиста", так и "дизайнера"). С помощью данной среды легко заинтересовать подростка и привлечь к созидательной деятельности. Изучение языка ActionScript позволяет расширить знания кружковцев о программировании. На данном этапе происходит изучение графических и анимационных возможностей среды, а также создание завершенных небольших программных приложений. Все это формирует у учащихся восприятие неразрывности объектного мира и его описания и изменения с помощью команд языка программирования.

Логическим завершением курса является объединение полученных знаний. Показывается возможная роль Flash в среде Web. Анимационные и программные "продукты" Flash на сегодняшний день являются достаточно распространенными в среде Интернет, хотя и вызывают критику. Но главной задачей не ставится научить размещать flash-приложения на web-странице. Здесь показывается, как можно расширить функциональные возможности как среды html, так и flash-содержимого, создавать единое цельное приложение. В итоге учащиеся видят на практике принцип "целое есть больше суммы его составляющих". На данном этапе учащиеся реализуют несколько групповых проектов, где каждый может проявить свои склонности и таланты. Темы проектов может предложить как педагог, так и кружковцы самостоятельно могут выбрать интересующее их направление и тему.

В курсе реализован, прежде всего, практический метод, который является неотъемлемой частью дополнительного образования. Каждое занятие (рассчитанное на 1,5 часа) предусматривает выполнение заданий или реализацию проекта (творческой работы).

Цели, задачи и программа элективного курса

Цели и задачи

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

Задачи:

  1. Образовательные
    • изучение языка разметки страниц HTML, получение представления о структуре web-узла;
    • изучение языка программирования JavaScript;
    • освоение Flash как среды создания графики и анимации;
    • изучение встроенного языка программирования ActionScript;
    • создание небольших проектов и программ, разработанных в среде Flash;
    • изучение способов взаимодействия языков программирования ActionScript и JavaScript.
    • создание групповых проектов.
  2. Развивающие
    • развитие логического, абстрактного и образного мышления.
  3. Воспитательные
    • формирование творческого подхода к поставленной задаче;
    • формирование представления о том, что большинство задач имеют несколько решений;
    • формирование целостной картины мира;
    • ориентирование на совместный труд.

Программа курса

HTML - язык разметки веб-страниц (20 часов)

Понятие о web-узле как совокупности web-страниц, понятие о гипертекстовой связи; принцип контейнеров; теги форматирования текстов и вставки графики на web-страницы; таблицы; типы ссылок и способы их осуществления; HTML-формы; понятие о фреймах и их взаимосвязи, создание простого сайта.

Программирование на JavaScript (30 часов)

Понятие о программировании, объектной модели (объекты window, document, location и др.); JavaScript как язык программирования (типы данных, их ввод и вывод, переменные, операторы и функции, объекты); создание сценариев (принципы создания и примеры).

Macromedia Flash как среда создания графики, анимации и программ (40 часов)

Знакомство с программой Macromedia Flash MX, типы графики; рисование в среде Flash; создание фильма (понятие об анимации как способах раскадровки, символы и их свойства), публикация фильмов в различных форматах; текстовые поля. ActionScript как неполноценный ООП: интерактивность, адресация; переменные; использование условных операторов, циклов, массивов и функций при создании приложений; использование UI-компонентов.

Взаимодействие Flash с Web-браузерами (18 часов)

Размещение Flash-приложений на web-странице; взаимодействие ActionScript с JavaScript (передача данных, вызов сценариев), создание групповых проектов.

Тематическое планирование

Общие сведения о структуре Web-узла. Язык разметки HTML (20 часов)

1. Основные понятия о Web-узле и языке HTML (2 часа).
2. Теги тела документа (6 часов).
3. Графика в HTML (2 часа).
4. Использование таблиц на web-странице (4 часа).
5. Формы (2 часа).
6. Создание сайта (4 часа).

Программирование на JavaScript (30 часов)

7. Понятие о программировании (2 часа).
8. JavaScript как язык программирования (16 часов).
9. Создание сценариев (8 часов).
10. Усовершенствование сайта (ранее созданного) (4 часа).

Macromedia Flash как среда создания графики, анимации и программ (40 часов)

11. Общие сведения о программе Macromedia Flash MX (2 часа).
12. Принципы создание графики в среде Flash (4 часа).
13. Анимационные возможности Flash (10 часов).
14. Интерактивность и адресация (4 часа).
15. Возможности ActionScript (14 часов).
16. UI-компоненты (2 часа).
17. Выполнение творческой работы (4 часа).
Предлагаемые варианты работ:
«Демонстрация закона Ома»
«Тест-программа “Устройства системного блока компьютера”»
«Игра “Угадай-ка”»
«Шкатулка юмора»

Взаимодействие Flash с Web-браузерами (18 часов)

18. Размещение Flash-приложений на Web-странице (4 часа).
19. Взаимодействие ActionScript и JavaScript (6 часов).
20. Реализация проектов (8 часов).
Предлагаемые варианты проектов:
«Солнечная система» (демонстрационно-познавательная программа или сайт)
«Круговорот веществ в природе» (демонстрационно-познавательная программа или сайт)
«Элементы современной физики» (сайт)
«Искусственный интеллект – проблемы и вопросы» (сайт)
«Фантастические машины» (Flash-презентация)
«Сайт развлечений» (создание и размещение Flash-игры на сайте)

Поурочное планирование

* Каждый урок представляет собой пару (сдвоенный урок)

1. Основные понятия о Web-узле и языке HTML (2 часа)
1) Всемирная паутина и Web-узлы.
Язык HTML. Понятие о контейнерах и тегах.

2. Теги тела документа (6 часов)
2) Теги, управляющие разметкой документа и формой отображения
3) Создание списков и их типы. Спецэффекты средствами HTML
4) Итоговая работа по теме «Теги тела документа». Гипертекстовые ссылки.

3. Графика в HTML (2 часа)
5) Графика. Ее использование в HTML. Активные изображения

4. Использование таблиц на web-странице (4 часа)
6) Определение строк и ячеек таблицы. Их объединение. Выравнивание в таблице
7) Оформление таблиц. Таблица как элемент и основа дизайна html-страницы

5. Формы (2 часа)
8) Задание форм. Их виды. Создание анкеты

6. Создание сайта (4 часа)
9) Понятие о фреймах. Теги макетирования и задания содержимого. Выбор темы сайта и создание его структуры. Создание логотипа и текстового меню
10) Оформления страниц. Презентация своей работы

7. Понятие о программировании. (2 часа)
11) Программирование как процесс описания алгоритмов на формальных языках. История программирования

8. JavaScript как язык программирования (16 часов)
12) Данные, переменные и оператор присвоения.
Операторы: арифметические, сравнения, логические
13) Операторы условного перехода
Операторы цикла
14) Функции
15) Понятие об объекте, его свойствах и методах. Объект String (строка)
16) Объект Array (массив)
17) Объекты Number (число), Math (математика) и Date (дата)
18) Понятия события и сценария
19) Понятие об объектно-ориентированном программировании. Объектная модель браузера

9. Создание сценариев (8 часов)
20) Загрузка и смена изображений
21) Визуальные эффекты со ссылками, заголовками и др.
22) Движение изображений по заданной траектории
23) Обработка данных форм

10. Усовершенствование сайта (4 часов)
24) Актуализация темы о сайтах. Разработка меню
25) «Правка» сайта. Конкурс сайтов

11. Общие сведения о программе Macromedia Flash MX (2 часа)
26) Возможности программы Flash. Интерфейс Macromedia Flash MX. Панели инструментов и параметров. Типы графики. Векторная графика.

12. Принципы создание графики в среде Flash (4 часа)
27) Объединение, дублирование, сегментирование, группировка. Размытие, трансформация, выравнивание
28) Использование градиентной и растровой заливки. Оформление текста (статические поля).

13. Анимационные возможности Flash (10 часов)
29) Линейное движение и морфинг. Упражнения «Летающая тарелка», «Геометрические превращения».
30) Объекты: графика, фильм. Использование слоев в анимации. Сцены. Упражнение «Авто на шоссе».
31) Управление скоростью движения и вращением. Упражнение «Баскетбольный мяч».
32) Движение по заданной траектории. Прозрачность. Упражнение «Аквариум»
33) Итоговая работа по теме «Анимация»: «Старая сказка на новый лад». Публикация фильма в различных форматах.

14. Интерактивность и адресация (4 часа)
34) Понятие об интерактивности. Объект кнопка. Назначение сценариев кнопкам. Управление кадрами фильма. Упражнение «Перепутье»
35) Адресация. Идентификация клипа. Упражнение «Смайлики»

15. Возможности ActionScript (14 часов)
36) Переменные и объекты. Программирование цвета. Динамическое текстовое поле. Упражнение «Города»
37) Прокрутка строк. Упражнение «Новости»
38) Изменение свойств объекта. Случайные числа. Упражнение «Смешные человечки».
39) Условные операторы if и else if. Конструкция switch...case. Текстовое поле для ввода. Упражнение «Симулятор»
40) Циклы. Упражнение «Путешествие звезды»
41) Технология drag & drop. Упражнение «Кислоты»
42) Функции. Упражнение «Математика»

16. UI-компоненты (2 часа)
43) Флажки, комбинированные списки, переключатели и др. Упражнение «Windows и Linux»

17. Выполнение творческой работы (4 часа)
44) Выбор работы. Составление плана ее осуществления Составление алгоритмов. Выполнение творческой работы
45) Выполнение творческой работы (окончание). Правка. Выставка работ

18. Размещение Flash-приложений на Web-странице (4 часа)
46) Вставка и оформление Flash-приложений (теги object, embed, param)
47) Раскрывающееся Flash–меню на сайте

19. Взаимодействие ActionScript и JavaScript (6 часов)
48) Воздействие на Flash-содержимое с помощью языка JavaScript
49) Вызов и изменение сценариев на JavaScript с помощью средств Flash и языка ActionScript
50) Установка взаимосвязи между Flash-фильмами с помощью JavaScript

20. Реализация проектов (8 часов)
51) Выбор тем. Объединение кружковцев в подгруппы. Анализ материала. Составление части алгоритмов
52) Выполнение проекта
53) Выполнение проекта
54) Правка. Конкурс проектов

Урок 1. Всемирная паутина и Web-узлы. Язык HTML. Понятие о контейнерах и тегах

Всемирная паутина, или WWW (World Wide Web), представляет собой глобальное информационное пространство. В WWW каждый может разместить собственный Web-узел, содержащий информацию по любой теме. Физической основой Всемирной паутины является Интернет (от англ. Internet) - всемирная система объединённых компьютерных сетей.

Веб-узел, или веб-сайт (англ. web — паутина и site — место) — это совокупность веб-страниц. Каждая веб-страница представляет собой текстовый файл, в котором текст размечен на языке HTML (или XHTML).

Страницы веб-сайта объединены общим корневым адресом, а также зачастую темой, логической структурой, оформлением.

Адрес веб-сайта обозначают как URL (англ. Uniform Resource Locator) – определитель местонахождения ресурса. URL является стандартом записи адреса ресурса в сети Интернет. Ресурсами Интернета обычно являются веб-страницы, файлы, почтовая корреспонденция, группы новостей и др.

Например, URL-адрес http://www.yoursite.ru/index.html означает следующее: http - web-сервер, использующий протокол HTTP; www – узел находится в World Wide Web; yoursite – узел какого либо сайта; ru – узел находится в России; index.html – главная страница сайта.

HTML (HyperText Markup Language – язык разметки гипертекста), является языком создания веб-страниц. Его нельзя считать языком программирования.

Язык HTML позволяет

HTML является описательным языком разметки документов, в нем используются указатели разметки (теги). Теговая модель описывает документ как совокупность контейнеров, каждый из которых начинается и заканчивается тегами.

Контейнеры HTML

Контейнерная модель html-документа

Теги HTML-документов образованы с помощью слов английского языка, понятных сокращений и обозначений.

Тег состоит из имени, за которым может следовать необязательный список атрибутов тега. Атрибуты тега могут иметь конкретные значения, устанавливаемые для изменения функции тега. Текст тега заключается в угловые скобки ("<" и ">").

Например, при описании таблицы открывающий тег с атрибутами может выглядеть так:

<TABLE WIDTH=570 ALIGN=center>

Эта запись означает следующее: таблица шириной 570 пикселов, выровнена по центру.

Порядок записи атрибутов в теге значения не имеет. Значение атрибута следует за знаком равенства. Если значение атрибута — одно слово или число, то его можно указывать без кавычек. Во всех остальных случаях значения необходимо заключать в одинарные или двойные кавычки. Регистр символов в именах тегов и атрибутов не учитывается, чего нельзя сказать о значениях атрибутов.

Чаще всего HTML-контейнеры состоят из начального и конечного тегов, между которыми размещаются текст и другие элементы документа. Имя конечного тега идентично имени начального, но перед именем конечного тега ставится косая черта / (например, для тега тела документа <BODY> закрывающая пара представляет собой </BODY>). Конечные теги никогда не содержат атрибутов. Некоторые элементы разметки не имеют конечного компонента, поскольку являются автономными элементами. Например, тег изображения <IMG>, который служит для вставки в документ графического изображения, конечного компонента не требует.

HTML-документ — это один большой контейнер, который начинается с тега <HTML> и заканчивается тегом </HTML>:

<HTML>
…
</HTML>	

Контейнер HTML состоит из двух других вложенных контейнеров: заголовка документа (HEAD) и тела документа (BODY):

<HTML>
<HEAD>
…  
</HEAD>
 
<BODY>
…
</BODY>
</HTML>	

В заголовке с помощью тега TITLE можно именовать окна браузера:




Это заголовок


Существуют и другие тэги, расположенные между <head> </head>, в основном несущие служебную и управляющую информацию.

Тег тела документа BODY, в отличие от тега НEАD, имеет атрибуты.
Атрибут BАСКGROUND определяет фон, на котором отображается текст документа. Так, если источником для фона HTML- документа является графический файл image.gif, то в открывающем теге тела BODY появляется соответствующий атрибут:

<ВОDY ВАСКGROUND="image.gif">

Также с помощью атрибутов ВGCOLOR и ТЕХТ можно указать цвета фона и текста документа. Цвета определяются в терминах RGB в шестнадцатеричной нотации (#ХХХХХХ). Также имеется возможность задавать цвета по названию.

Практическая работа "Контейнеры и теги HTML"

1. Откройте текстовый редактор (блокнот, Bred или др.) и введите следующий код HTML:

<html>
<head>
<title>web-cтраница</title>
</head>
<body text=#0000ff bgcolor=#f0f0f0>
<h1> HTML – язык разметки документов</h1>
Теги бывают
<ul>
<li> начальными 
<li> конечными
<li> автономными
</ul>
Контейнеры HTML
<ul>
<li> HEAD 
<li> BODY
</ul>
</body>
</html>

2. Сохраните документ на жестком диске, например под именем index.html. Здесь index – имя файла, а html – расширение, указывающее на тип документа.

3. Откройте документ для просмотра. Он откроется в браузере (например, Internet Explorer).

4. Обратите внимание на то, как расположены два списка.

5. Щелкните правой кнопкой мыши в окне браузера. В контекстном меню выберите пункт "Просмотр HTML-кода"

6. Поменяйте списки местами (список "Формы HTML-документов" должен располагаться выше, чем список "Теги бывают"). Обсудите, что для этого нужно сделать.

7. Закройте блокнот, сохранив изменения.

8. Обновите окно браузера (для этого достаточно нажать на кнопку Обновить на панели инструментов). Отметьте изменения.

Практическая работа "Атрибуты тегов BODY и HEAD"

1. Создайте четыре html-документа (например, one.html, two.html, three.html, four.html).

2. Откройте первый файл для редактирования и введите код:

<html>
<head>
<title> стр. №1</title>
<meta HTTP-EQUIV="Refresh" CONTENT="1; URL=two.html">
</head>
<body bgcolor=#0000FF text=FFFF00>
 Это первая страница
</body>
</html>

3. Обратите внимание на тег META и его атрибуты. Здесь задается смена страницы в окне браузера на two.html через 1 секунду.

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

Вопросы и задания:

  1. Объясните понятие «контейнер», использующееся при описании языка HTML?
  2. Может ли иметь закрывающий тег атрибуты?
  3. Можно ли менять значения атрибутов?

Урок 4, часть I. Итоговая работа по теме "Теги тела документа". Гипертекстовые ссылки

На этом уроке закрепляется тема "Теги тела документа" и изучается новый материал - "Гипертекстовые ссылки". Материал о гиперссылках преподносится в логичной связи с первым уроком курса (о сетях и структуре web-узла). Связь между первой и второй частью урока достигается за счет выполнения единого проекта.

При разработке урока была ориентация на компьютерный класс с 6 ученическими компьютерами и локальной сетью.

Тип урока: урок закрепления ранее изученного материала и изучения нового.

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

Цель урока: закрепить материал по тегам тела документа и изучить принципы формирования гиперссылок на языке HTML

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

Развивающие

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

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

Программное обеспечение: браузер, блокнот или html-редактор (Bred и т.п.), PowerPoint

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

Литература:

  1. Храмцов П.Б., Брик С.А., Русак А.М., Сурин А.И. Основы web-технологий. Интернет-университет информационных технологий - ИНТУИТ.ру., 2003 – 512 с.
  2. Е.В Давыдова. Как устроен Интернет. Информатика и образование. № 6-2004
  3. Е.Н. Новоселова, И.Р. Кадыров. Создание web-страниц с помощью HTML. Информатика и образование. № 5-2005
  4. Wikipedia - «Всемирная энциклопедия» (wikipedia.org)

План урока:
1. I часть урока – Самостоятельная работа по теме «Теги тела документа» (45 мин)
a) Актуализация знаний (5 мин);
b) Практическая часть (30 мин);
c) Проверка задания, корректировка (10 мин).
2. Перемена (10 мин)
3. II часть урока – Гипертекстовые ссылки (45 мин)
a) Актуализация знаний (10 мин);
b) Изучение нового материала (10 мин);
c) Практическая часть (20 мин);
d) Подведение итогов, контроль знаний (5 мин).

Предварительная подготовка к уроку:
Желательно, чтобы на каждом столе у учащихся находился справочный материал по тегам и атрибутам языка HTML.
Подготавливаются "тематические" карточки (с учетом количества ученических компьютеров).
Также подготавливаются печатные копии инструкционных карт для второй части занятия.
На винчестерах компьютеров кружковцев создается папка (например, hyperlink).

Ход урока:

I часть

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

  1. С помощью каких тегов выделяются заголовки в html-документах? Сколько существует уровней заголовков? Какой из них является самым главным?
  2. Какие теги позволяют выделить часть текста курсивом, жирным начертанием? К какой группе следует отнести данные теги?
  3. Как выделить часть текста цветом?
  4. Перечислите все атрибуты тега FONT.
  5. Как на языке HTML обозначить формирование нового параграфа?

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

Оформите текст на языке HTML так, как показано на вашей карточке (каждый ученик оформляет лишь одну карточку на своем компьютере). Сохраните файл на диске D:/ в папке hyperlink. Название файлов приведите в соответствие со следующим списком.

№ карточки Имя документа
1 structure_www_1.html
2 tehnologies_www_2.html
3 history_www_3.html
4 reference_4.html
5 hyperlink_5.html
6 philosophers_6.html


Карточка № 1.

Всемирная паутина. Структура и принципы

Всемирная паутина (англ. World Wide Web) — глобальное информационное пространство, основанное на физической инфраструктуре сети Интернет и протоколе передачи данных HTTP. Всемирная паутина вызвала настоящую революцию в информационных технологиях и бум в развитии Интернета. Часто, говоря об Интернете, имеют в виду именно Всемирную паутину. Для обозначения Всемирной паутины также используют слово веб (англ. web) и аббревиатуру "www".

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

Для просмотра информации, полученной от веб-сервера, на клиентском компьютере применяется специальная программа — веб-браузер. Основная функция веб-браузера — отображение гипертекста. Всемирная паутина неразрывно связана с понятиями гипертекста и гиперссылки. Большая часть информации в Вебе представляет из себя именно гипертекст. Для облегчения создания, хранения и отображения гипертекста во Всемирной паутине традиционно используется язык HTML (англ. HyperText Markup Language), язык разметки гипертекста.


Карточка № 2.

Технологии Всемирной паутины

В целом можно заключить, что Всемирная паутина стоит на "трёх китах": HTTP, HTML и URL. Хотя в последнее время HTML начал несколько сдавать свои позиции и уступать их более современным технологиям разметки: XHTML и XML. Для улучшения визуального восприятия веба стала широко применяться технология CSS (англ. Cascading Style Sheets), которая позволяет задавать единые стили оформления для множества веб-страниц.

Популярная концепция развития Всемирной паутины — создание семантической паутины. Семантическая паутина — это надстройка над существующей Всемирной паутиной, которая призвана сделать размещённую в сети информацию более понятной для компьютеров. Семантическая паутина — это концепция сети, в которой каждый ресурс на человеческом языке был бы снабжён описанием, понятным компьютеру. Семантическая паутина открывает доступ к чётко структурированной информации для любых приложений, независимо от платформы и независимо от языков программирования.


Карточка № 3.

История Всемирной паутины

Изобретателями всемирной паутины считаются Тим Бернерс-Ли и, в меньшей степени, Роберт Кэлльо. Тим Бернерс-Ли является автором технологий HTTP, URI/URL и HTML. В 1980 году он работал в Европейском совете по ядерным исследованиям консультантом по программному обеспечению. Именно там, в Женеве (Швейцария), он для собственных нужд написал программу "Энквайр" (можно вольно перевести как "Дознаватель"), которая использовала случайные ассоциации для хранения данных и заложила концептуальную основу для Всемирной паутины.

В 1989 году, работая в CERN над внутренней сетью организации, Тим Бернерс-Ли предложил глобальный гипертекстовый проект, теперь известный как Всемирная паутина.
Первый в мире веб-сайт Бернерс-Ли создал по адресу info.cern.ch, теперь сайт хранится в архиве. Этот сайт появился он-лайн в Интернете 6 августа 1991 года. На этом сайте описывалось что такое Всемирная паутина, как установить веб-сервер, как использовать браузер и т. п. Этот сайт также являлся первым в мире интернет-каталогом, потому что позже Тим Бернерс-Ли разместил и поддерживал там список ссылок на другие сайты.


Карточка № 4.

Что такое ссылка

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

Ссылки как средство указания на источник приводимой информации существуют и в устной речи, и на письме ровно с тех пор как эти самые средства передачи информации появились. Особенность ссылки — её краткость: не требуется приводить часть текста (цитировать), а достаточно лишь указать источник.

Ссылка на текст Библии почти всегда имеет такой вид — "Быт., 8:2". Для обычных книг существуют несколько других типов написания ссылок, один из них, к примеру такой (пишется обычно в круглых скобках):

Имя автора. Название книги. Город, год издания. Цитируемая страница(ы).

Наибольшее развитие система ссылок получила в такой отрасли книжного дела как словари и энциклопедии. Например, в предисловии к Большой советской энциклопедии (3-е изд., 1969—1978) указывается: "Для облегчения читателю нахождения необходимых сведений в Энциклопедии применяется система ссылок. Название статьи, на которую даётся ссылка, набирается курсивом". Таким образом, зачастую ссылки для облегчения поиска набираются отличным от основного текста шрифтом.


Карточка № 5.

Гиперссылка и гипертекст

Принципиально новое слово в практике использовании ссылок было сказано в 1991 году с изобретением сотрудником Европейской лаборатории физики элементарных частиц (CERN) Тимом Бернерсом-Ли идеологии World Wide Web, или Всемирной паутины — совокупности веб-страниц с различным, в том числе мультимедийным контентом и, главным в контексте данной статьи, — гиперссылками, что, как пишет Интернетско-русский разговорник, вообще "является фундаментальным свойством веб-страниц". Причём ссылкой в данном случае "может являться не только некоторая часть текста, но и картинка или ее часть".

Главным отличием простой "текстовой" от гиперссылки является то, что щёлкнув мышью по последней, вы моментально сможете просмотреть источник информации, на который ссылается автор статьи или сайта. При этом полностью исключаются утомительные поиски литературы, хождение по библиотекам и многочасовое вдыхание книжной пыли — оригинал можно прочесть через считанные секунды после "клика".

Термин гипертекст был введён Тедом Нельсоном в 1965 для обозначения текста, который разветвляется или выполняет действия по запросу. Часто гипертекстовая информация представляется в виде набора связанных узлов. Читатели могут изучать информацию различными способами, перемещаясь от одного узла к другому. Независимо от этого гипертекст был предложен Дугом Энгельбартом, изобретателем компьютерной мыши. В компьютерной терминологии, гипертекст — размеченный текст, содержащий в себе ссылки на внешние ресурсы.


Карточка № 6.

Философы о гиперссылках

В последние годы Интернет вообще и ссылки в частности становятся предметом философских исследований. В частности, итальянский семиолог, писатель и философ Умберто Эко в одной из своих лекций, прочитанной на экономическом факультете МГУ 20 мая 1998 г. высказал идею, что "Если телевидение, ориентирующее на зрительный образ, ведёт в конечном счёте к упадку грамотности, то компьютер, так или иначе предполагающий работу со словами (чтение строк на экране, ввод данных, общение в чатах), реанимирует умение работать с печатными текстами".

Кандидат философских наук, доцент В. А. Емелин, опираясь на идеи Эко, указывает:

"Если обычный текст является линейным…, то… гипертекст открывает новые «поперечные» измерения…Читая книгу, мы не можем покинуть её пределов, при этом не расставаясь с ней. Когда ее содержание вынуждает обратиться к другим источникам, то нам приходится отложить один текст, уйти за рамки его пространства и переключить своё внимание на другой… Гипертекст полностью меняет ситуацию… Применяемый во всемирной паутине язык HTML… обеспечивает мгновенный переход от одного текста к другому, причём, для этого не нужно покидать пространство исходного текстового поля: стоит указать на снабженное гиперссылкой слово или предложение — и перед вами связанный с ним текст, первоначальный текстовой фрагмент при этом не исчезает, а лишь уходит на некоторое время на второй план. Текст, не теряя свои пространственных очертаний, обретает иное измерение, где он становится в буквальном смысле бесконечным, ведь от одной ссылки можно двигаться к другой и так далее без конца" [там же].


Урок 4, часть II. Итоговая работа по теме "Теги тела документа". Гипертекстовые ссылки

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

Вспомним первый урок, посвященный Всемирной паутине и принципам создания web-узла (см. презентацию к уроку, прикрепленную ниже).

ТИПЫ СЕТЕЙ

  1. Какие сети вы знаете?
  2. В чем основная разница между сервером и клиентским компьютером?
  3. Какие протоколы передачи данных вам известны?
  4. В какой сети используется протокол HTTP?

ВСЕМИРНАЯ ПАУТИНА

  1. Покажите на схеме несколько главных серверов.
  2. Подумайте, почему более верно говорить об Интернете как Всемирной паутине, а не Всемирной сети?

АДРЕС ДОКУМЕНТА

  1. Что такое адрес документа и для чего он нужен?
  2. Что такое URL?
  3. Что включает в себя формат URL-адреса?

Новый материал

ГИПЕРССЫЛКИ

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

Для создания ссылки используют парный тег <A>…</A> (от слова anchor – якорь) с обязательным параметром HREF. В нем после знака равенства необходимо указать адрес документа.

<A HREF="адрес_ссылки"> текст_ссылки </A>

«ТИПЫ» ГИПЕРССЫЛОК
Посмотрите на слайд.
Какие три типа ссылок следует выделить?

ФОРМЫ ГИПЕРССЫЛОК
Прочитайте текст на данном слайде.
Какие существуют формы задания гиперссылок?
В каких случаях применяют абсолютную ссылку? относительную ссылку?

СОЗДАНИЕ ПОДСКАЗКИ К ССЫЛКЕ
Для чего предназначен атрибут TITLE?
Является ли он обязательным?
Когда наиболее уместно использовать атрибут TITLE?

ЦВЕТА ССЫЛОК

С помощью HTML можно задавать цвет для всех ссылок на странице, а также изменять цвета для отдельных ссылок.

Цвета всех ссылок на странице задаются в качестве параметров тега <BODY>. Эти параметры являются необязательными, и если они не указаны, то используются значения по умолчанию.

LINK – цвет не посещенных ссылок (по умолчанию – синий, #0000FF);
ALINK – цвет «активной» ссылки (по умолчанию – красный, #FF0000);
VLINK – цвет уже посещенных ссылок (по умолчанию – фиолетовый, #800080).

Задание

Выйти к доске и написать ссылку на языке HTML, цвета которой в различных состояниях должны быть заданы в теге BODY.
Примерный результат:

<BODY LINK=#FFCCOO LINK=#0000FF VLINK=#800080 ALINK=#FF0000>
	<A HREF=content.html> Содержание сайта </A>
</BODY>

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

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

  1. Откройте папку Hyperlink на диске D:/ .
  2. Создайте в ней файл index.html
  3. Откройте его для редактирования (блокнот, Bred3 или др.).
  4. Задайте ссылки и оформите документ.

Ссылки должны быть следующие:

Оформите ссылки в виде списка. Озаглавьте этот список (например, "Всемирная паутина. Гиперссылки").

Подведение итогов

  1. Какую форму задания гиперссылки наиболее уместно применять к файлу, находящемуся на том же компьютере что и файл index?
  2. Будут ли работать относительные гиперссылки, если файл, содержащий их, переместить на другой компьютер? Почему?
  3. Как будут располагаться тексты гиперссылок, если их поместить в контейнер BODY, не применяя никаких других тегов разметки документа?

Домашнее задание (по желанию): создайте html-страничку, которая будет содержать гиперссылки на самые распространенные поисковики Интернета (Google - google.com, Yahoo! - yahoo.com) и Рунета (например, Яндекс - yandex.ru, Рамблер - rambler.ru). Красиво оформите страничку.

Урок 41, часть I. Технология drag & drop. Упражнение "Кислоты"

В данном уроке формулируется определение технологии drag & drop, показывается ее роль в среде Windows; изучается реализация данной технологии на языке программирования Action Script (методы startDrag () и stopDrag ()); рассматривается применение технологии drag & drop при создании приложения.

Тип урока: урок изучения нового материала.

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

Цель урока: сформировать представление о технологии drag & drop как неотъемлемой части современных операционных систем, изучить реализацию данной технологии на языке ActionScript.

Задачи урока:

Образовательные

Развивающие

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

Оборудование: компьютеры, школьная доска
Программное обеспечение: Macromedia Flash
Методическое обеспечение:

Литература:

  1. П. Лапин. Flash MX. Самоучитель. Питер 2003 – 386с.: ил.
  2. Р. Рейнхард, Д. Лотт. Macromedia Flash MX ActionScript. Библия пользователя. – М: Диалектика, 2004 – 1280 с: ил..
  3. Д.Ю Титоров. Flash-программирование: элективный курс для школьников. Информатика и образование. № 11,12-2004; № 1-2005

План урока:
1. I часть – startDrag() и stopDrag()
a) Актуализация знаний и формулирование определения (10 мин);
b) Изучение нового материала (30 мин);
c) Контроль знаний (5 мин)
2. Перемена (10 мин)
3. II часть – упражнение "Кислоты"
a) Объяснение цели предстоящей работы (5 мин).
b) Практическая работа. Упражнение "Кислоты" (30 мин);
c) Подведение итогов (10 мин).

Предварительная подготовка к уроку:
Печатные копии инструкционных карт для второй части занятия.

Ход урока:

Часть I

Актуализация знаний и формулирование определения

1. Представим, что нам надо переместить значок (или ярлык) из одной области Рабочего стола в другую. Подробно опишем этапы реализации данной задачи:
I. Над значком зажать левую кнопку мыши;
II. не отпуская кнопки мыши переместить его на необходимое расстояние (перенести в место назначения);
III. отпустить кнопку мыши.

2. Все эти этапы являются составляющими так называемой технологии (или механизма) drag & drop. Переводится как «Перетащил и оставил». Данная технология является важной составляющей большинства современных операционных систем.

3. Сформулируем определение drag & drop.
Это механизм позволяющий перетаскивать объекты из одного места в другое с помощью мыши.

4. Продемонстрируйте реализацию данного механизма в пределах а) рабочего стола, б) рабочего стола и любой другой папки.

Новый материал

В языке ActionScript, чтобы начать перетаскивать объект используют метод startDrag().

Отключение режима перетаскивания символа реализуется методом stopDrag().

Одним из наиболее распространенных примеров применения методов startDrag() и stopDrag() служит обработка событий от мыши в кнопке:

on (press) {
    startDrag("");
}
on (release) {
    stopDrag();
}

Обратите внимание, что при нажатии на кнопку (press) будет реализовываться действие startDrag(), а при выпуске кнопки (release) – stopDrag().

Задание 1.
Откройте программу Macromedia Flash. Нарисуйте небольшой квадрат (например, с синей заливкой). Преобразуйте квадрат в символ-кнопку (для этого необходимо выделить квадрат и нажать клавишу F8, затем выбрать поведение Кнопка и нажать ОК). Напишите для данного символа вышеприведенный код.

Откройте фильм для просмотра. Что вы наблюдаете? Объект можно перетаскивать с помощью левой кнопки мыши, т.е. реализуется технология drag & drop.

Задание 2.
Нарисуйте второй квадрат (например, красного цвета). Преобразуйте его также в символ-кнопку. Запустите фильм. Что вы наблюдаете? При попытке переместить синий квадрат, красный перемещается вместе с ним, сохраняя изначальное расстояние.
Чтобы избежать подобной проблемы необходимо прописать в скобках первый параметр: имя целевого объекта (имя экземпляра символа фильма или кнопки, которые требуется перетаскивать). Строка startDrag(""); примет следующий вид startDrag("name_obj");

Задание 3.

Присвойте имена двум символам-кнопкам (например, butt_one и butt_two). Измените, код для первой кнопки, вписав параметр Имя целевого объекта. Напишите аналогичный код для второй кнопки, указав в качестве целевого объекта вторую кнопку. Обратите внимание, что имя цели пишется в кавычках.

В результате каждый объект должен перемещаться при нажатии на него левой кнопкой мыши независимо от другого объекта.

Второй параметр метода startDrag() – это центрирование перетаскиваемого символа относительно указателя мыши (при значении true есть центрирование, false – нет).

Задание 4.

Увеличьте первый символ - кнопку. Запустите фильм и попробуйте перетаскивать символ за углы и центр символа. Получается ли перемещать символ, взяв за угол? Да. Поставьте (пропишите) второй параметр (блокировать мышь по центру) в значение true. Строка startDrag("butt_one"); примет вид startDrag("butt_one ", true);. Запустите фильм. Получается ли теперь перемещать символ за углы? Нет.

Наиболее уместно применять центрирование для объектов малых величин.

Третий - шестой параметры – это размеры области перетаскивания. Значения указываются в пикселях. Размеры границ задаются в полях: L (лево), R (право), T (верх), B (низ). Таким образом, можно ограничить возможные перемещения внутри определенной области.

Задание 5.

Укажите для второго символа область перемещения, ограниченную 50-ым пикселем сверху, 350-ым – снизу, 100-ым – слева и 450-ым – справа. Строка startDrag("butt_two ", true); примет вид startDrag("butt_two", false, 100, 50, 450, 350); Запустите фильм. Можно ли теперь переместить объект на край рабочей области? Нет.

Используя метод startDrag() можно создать собственный указатель мыши. Для этого символу-фильму необходимо присвоить, например такой код:

onClipEvent (load) {
    Mouse.hide();
    startDrag(this, true);
}

Здесь во второй строке производится скрытие собственного курсора мыши (объекту Mouse назначается метод hide() – скрыть). Однако надо иметь в виду, что этот способ не является единственным. Код можно прописать и в кадре. Тогда он примет такой вид:

mov_obj.startDrag(true);
Mouse.hide();

Здесь mov_obj – имя копии фильма.

Задание 6.

Создайте собственный указатель мыши. Для этого необходимо нарисовать будущий указатель, преобразовать его в символ-фильм и написать сценарий (любой из двух приведенный выше). Запустите фильм и опробуйте "работоспособность" вашего курсора.

Можно ли вы перемещать собственным курсором другие объекты? Нет.
Дело в том, что объекты можно перемещать лишь по очереди. Поэтому когда начинает реализовываться метод startDrag() назначенный кнопке, перестает действовать метод startDrag() назначенный «указателю»-фильму. Данную проблему можно решить иными способами. Однако на сегодняшнем занятии мы их рассматривать не будем.

Контроль знаний

  1. С помощью каких методов реализуется технология Drag & Drop на языке ActionScript?
  2. Приведите два примера наиболее распространенного применения данной технологии во Flash-приложениях.
  3. Имеют ли параметры методы startDrag() и stopDrag()?
  4. Перечислите параметры метода startDrag()? Есть ли среди них обязательные? Ответ обоснуйте.

Урок 41, часть II. Технология drag & drop. Упражнение "Кислоты"

Пояснения к практической работе

Создадим небольшую программу, иллюстрирующую применение технологии Drag & Drop. В данной программе будут присутствовать несколько объектов, которые можно перемещать с помощью указателя мыши. Каждый объект необходимо поместить в отведенную только ему область. При правильном совмещении объекта с его областью будет появляться уведомление.

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

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

Цель: создать прототип обучающей программы, в которой с помощью мыши можно перемещать объекты – «кислоты»; при правильном совмещении кислоты с ее названием должен появляться уведомляющий сигнал.

1. Задайте размер рабочей области 400 х 400 пикселей.

2. Создайте надписи с помощью Статичного текстового поля: в верхнем левом углу рабочей области – «азотная», верхнем правом – «серная», нижнем левом – «фосфорная», нижнем правом – «соляная».

3. Также разместите в каждом углу по Динамическому текстовому полю. Присвойте их следующим переменным: верхнее левое – text_1, верхнее правое – text_2, нижнее левое – text_3, нижнее правое – text_4.

4. Создайте четыре символа-кнопки с надписями формул кислот внутри их “HNO3”, “H2SO4”, “H3PO4”, “HCl”. Поместите их на сцену (желательно в центр рабочей области).

5. Присвойте кнопке с надписью “HNO3” имя копии nitr, “H2SO4” – sulf, “H3PO4” – phos, “HCl” – chlor.

6. Часть кода для первого кадра:

if (nitr._x<=100&nitr._y<=100) {  /* если координаты x и y объекта "nitr" 
меньше или равны 100 пикселям */
	text_1 = "Yes";  // то переменной text_1 присвоить значение "Yes".
} else {  // Во всех остальных случаях 
	text_1 = "no";  // переменной text_1 присвоить значение "no". 
}
if (sulf._x>=300&sulf._y<=100) {
	text_2 = "Yes";
} else {
	text_2 = "no";
}

Продолжите код самостоятельно. Два следующих блока кода будут аналогичны предыдущим за исключением объектов приложения, координат и переменных.

7. Код для кнопки “nitr” (“HNO3”):

on (press) {
	startDrag("nitr", true);
}
on (release) {
	stopDrag();
}

Для остальных кнопок напишите код самостоятельно. Он будет аналогичен предыдущему за исключением цели ("sulf", "chlor", "phos").

8. Создайте второй ключевой кадр. Для этого необходимо выделить второй кадр и нажать клавишу F6.

9. Код для второго кадра:

gotoAndPlay(1);

Подведение итогов

  1. Для каких объектов в данном упражнении применяется технология drag & drop?
  2. Как реализуется эта технология на языке ActionScript?
  3. Какой условный оператор используется в упражнении? С какой целью он применяется?
  4. Для чего создается второй ключевой кадр и ему присваивается действие перехода на первый?
  5. Допустим, надо изменить программу так, чтобы уведомляющие сигналы о правильном размещении кислот появлялись лишь при нажатии на некую кнопку «Проверка». Как это можно сделать?

Домашнее задание. Создайте небольшую программу – игру «Пазлы».

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

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

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

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

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

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

Развивающие

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

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

Программное обеспечение: 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-страниц оформите самостоятельно.

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

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