Язык гипертекстовой разметки HTML. Оформление гиперссылок в фреймовой структуре

Разделы: Информатика


Цели урока:

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

  • Сформировать у учащихся представление о формировании Интернет-страницы с помощью фреймов;
  • Познакомить с понятием фрейм;

Развивающие:

  • Развивать культуру речи, мышление(умение сравнивать, анализировать, обобщать);
  • Учить ставить и разрешать проблемы, делать выводы;

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

  • Воспитывать уважительное отношение к мнению других.

Тип урока: урок объяснения нового материала

Оборудование: Учебник: Д.Усенков "Уроки Web - мастера" стр. 95

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

План урока:

  1. Актуализация опорных знаний.
  2. Изучение нового материала
  3. Практическая работа на компьютере.
  4. Подведение итогов урока.

Ход урока

1. Актуализация опорных знаний.

Проводится фронтальный опрос.

  1. Что такое фрейм?
  2. Какой тэг используют для того чтобы сформировать фрейм?
  3. (Для создания фреймовой структуры применяется контейнер <FRAMESET>: </FRAMESET>)

  4. Какой параметр формирует вертикальный фрейм?
  5. (COLS)

  6. А горизонтальный? (ROWS)
  7. Что обозначают символы в записи тэга
  8. <FRAMESET COLS="150, 30%, *"> </FRAMESET>
    (Под первый вертикальный фрейм отводится 150 пикселей, под второй - 30 % доступного пространства, а для третьего - вся оставшаяся область окна браузера).

  9. Как задать имя фрейма? (с помощью атрибута NAME)

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. Подведение итогов урока.

Подводятся итоги изучения новой темы. Выставляются оценки.