Цели урока:
Образовательные:
- Сформировать у учащихся представление о формировании Интернет-страницы с помощью фреймов;
- Познакомить с понятием фрейм;
Развивающие:
- Развивать культуру речи, мышление(умение сравнивать, анализировать, обобщать);
- Учить ставить и разрешать проблемы, делать выводы;
Воспитательные:
- Воспитывать уважительное отношение к мнению других.
Тип урока: урок объяснения нового материала
Оборудование: Учебник: Д.Усенков "Уроки Web - мастера" стр. 95
Формы работы на уроке: фронтальный опрос, индивидуальная работа
План урока:
- Актуализация опорных знаний.
- Изучение нового материала
- Практическая работа на компьютере.
- Подведение итогов урока.
Ход урока
1. Актуализация опорных знаний.
Проводится фронтальный опрос.
- Что такое фрейм?
- Какой тэг используют для того чтобы сформировать фрейм?
- Какой параметр формирует вертикальный фрейм?
- А горизонтальный? (ROWS)
- Что обозначают символы в записи тэга
- Как задать имя фрейма? (с помощью атрибута NAME)
(Для создания фреймовой структуры применяется контейнер <FRAMESET>: </FRAMESET>)
(COLS)
<FRAMESET COLS="150, 30%, *"> </FRAMESET>
(Под первый вертикальный фрейм отводится 150
пикселей, под второй - 30 % доступного
пространства, а для третьего - вся оставшаяся
область окна браузера).
2. Изучение нового материала
На прошлом уроке мы познакомились с основами построения Интернет - страницы с помощью фреймов. Цель нашего урока - научиться оформлять гиперссылки.
Содержимым каждого фрейма может быть обычная Интернет - страница с собственным заголовком (TITLE) и телом (BODY), характеристики которой задаются независимо от содержимого других фреймов.
Единственная дополнительная сложность заключается в организации гиперссылок. Если щелкнуть мышью на простой ссылке <A HREF = ":">, то соответствующая страница будет загружена в тот же самый фрейм вместо текущей, в которой располагалась данная ссылка. Чтобы "переадресовать" загрузку вызванной страницы в требуемый фрейм, надо дополнить тэг <A HREF = > параметром TARGET= "[имя целевого фрейма]".
Например:
Пример 1:
Заголовок титульной страницы колледжа. Здесь мы видим, какие имена мы присвоили каждому фрейму.
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=windows-1251">
<TITLE>ИПК</TITLE>
</HEAD>
<frameset rows="*" cols="18%,*" framespacing="0" frameborder="YES" border="5">
<frame src="menu.htm" name="Leftfarm" scrolling="NO" noresize>
<frame src="Index-old.htm" name="Richtfarm"scrolling="auto">
</frameset>
</HTML>
Пример 2
А это часть страницы меню.
<a href="Index-old.htm" target="Richtfarm">Домашняя</A>
3. Практическая часть.
Используя Блокнот, создайте документ, содержащий 2 вертикально расположенных фрейма. Левый фрейм (узкий) предназначен для вывода меню, правый (широкий) - для вывода содержимого документов, на которые вы ссылаетесь из меню. Размеры фреймов должны быть изменяемы.
1 шаг.
Для того чтобы организовать такой фрейм надо предварительно создать две страницы нашего сайта (Меню и Содержимое).
Для этого мы скопируем с учебного сайта нужные нам страницы и сохраним их в папке на рабочем столе под именами Меню и Содержимое.
Файл menu.htm содержит меню web-страницы:
<HTML>
<HEAD>
<TITLE>Меню </TITLE>
</HEAD>
</BODY>
<H2 ALIGN=CENTER>Меню</H2>
</BODY>
</HTML>
Файл sodergimoe.htm отображает основное содержимое страницы:
<HTML>
<HEAD>
<TITLE>Содержимое</TITLE>
</HEAD>
<BODY>
<H2 ALIGN=CENTER>Coдepжимoe</H2>
</BODY>
</HTML>
2 шаг.
Теперь нам необходимо написать программу, позволяющую разделить окно браузера на две неравные части и загрузить в них созданные нами программы
В этом случае фреймовая структура будет кодироваться следующим образом:
<HTML>
<HEAD>
<TITLE>Фрейм с эаголовком</TITLE>
</HEAD>
<FRAMESET COLS="25%,*">
<FRAME SRC= menu.htm name= "menu">
<FRAME SRC= sodergimoe.htm name= "sod">
</FRAMESET>
</HTML>
Кроме этого присвоим имена этим двум фреймам (menu и sod).
3 шаг.
Просмотрите через браузер, что у нас получилось.
4 шаг.
Теперь внесем изменения в страницу меню, добавим несколько пунктов и сохраним под именем poned.htm.
Например:
<HTML>
<HEAD>
<TITLE>Меню </TITLE>
</HEAD>
</BODY>
<H2 ALIGN=CENTER>Меню</H2>
<P>
ПОНЕДЕЛЬНИК <BR>
ВТОРНИК <BR>
СРЕДА <BR>
ЧЕТВЕРГ <BR>
ПЯТНИЦА <BR>
СУББОТА <BR>
</P>
</BODY>
</HTML>
5 шаг.
Просмотрите через браузер, что у нас получилось. В большем окне у нас отображается опять страница Содержимое, а нам необходимо, чтобы отображалась другая страница.
Что необходимо сделать? (заменить в файле Index ссылку)
6 шаг.
Таким же образом создадим страницу с расписанием на вторник и сохраним ее под именем vtornic
<HTML>
<HEAD>
<TITLE>Содержимое</TITLE>
</HEAD>
<BODY>
<H2 ALIGN=CENTER>Вторник</H2>
</BODY>
<P>
1-2 Физкультура)<BR>
3-4 Компьютерные сети/Теория вероятности<BR>
5-6 Методика информатики<BR>
7-8 ХОР<BR>
</P>
</HTML>
7 шаг.
Теперь попробуем сделать ссылки из меню работающими. Для этого откроем файл Menu и внесем изменения, добавив в строку, где формируется сноска на открытие страницы гиперссылку (она выделена жирным).
<HTML>
<HEAD>
<TITLE>Меню </TITLE>
</HEAD>
</BODY>
<H2 ALIGN=CENTER>Меню</H2>
<P>
<a href="Poned.htm" >ПОНЕДЕЛЬНИК</A> <BR>
ВТОРНИК <BR>
СРЕДА <BR>
ЧЕТВЕРГ <BR>
ПЯТНИЦА <BR>
СУББОТА <BR>
</P>
</BODY>
</HTML>
8 шаг.
Просмотрите через браузер, что у нас получилось. Гиперссылка получилась, но при обращении к ней страница с расписанием на понедельник раскрылась вместо окна меню.
Чтобы такое исправить добавим в параметр, где мы организовывали гиперссылку следующий параметр (параметр выделен жирным цветом):
<P> <a href="Poned.htm" target="sod"> ПОНЕДЕЛЬНИК</A> <BR>
9 шаг.
Чтобы работала ссылка на вторник добавим следующий параметр:
<a href="vtornik.htm" target="sod">ВТОРНИК </A><BR>
10 шаг.
Просмотрите что у нас получилось. (Результат)
А теперь ваша задача состоит в том, чтобы доделать все ссылки на остальные дни
4. Подведение итогов урока.
Подводятся итоги изучения новой темы. Выставляются оценки.