 |
Домашнее задание: выучить справочник тегов.
|
|
|
|
Урок №
Класс___________________
Дата____________________
Тема: Поняття фрейму. Використання фреймів у web-документах. Створення web-сторінок із фреймовою структурою.
Цель и задачи урока:
Познакомить учащихся с принципами фреймового дизайна.
2. Научить использовать фреймы при создании сайтов.
3. Развивать творческие способности учащихся.
4. Совершенствовать навыки работы с клавиатурой.
Тип урока: урок усвоения новых знаний, умений и навыков.
Оборудование:
1. ТР Блокнот
Ход урока:
1. Объяснение нового материала
Фреймы
За довольно долгую историю WWW было разработано несколько устоявшихся схем наборов фреймов, прошедших проверку временем и использующихся в подавляющем большинстве сайтов, построенных по принципам фреймового дизайна. Эти устоявшиеся схемы мы и рассмотрим.
Задание 1
1. Создайте папку frames.
2. Откройте программу Блокнот. Наберите HTML-код чистой Web-страницы:
<HTML>
<HEAD><TITLE> </TITLE></HEAD>
<BODY>
</BODY>
</HTML>
3. Сохраните документ с именем base.htm в папке frames.
4. На основе файла base.htm создайте четыре файла: a.htm, b.htm, c.htm, d.htm, которые будут в дальнейшем заполнять поля фреймов. Сохраните эти файлы в папке frames (меню Файл, команда Сохранить как…).
Файл a.htm
<HTML>
<HEAD><TITLE> Страничка А </TITLE></HEAD>
<BODY BGCOLOR=red TEXT=white>
<P><H1>Заголовок сайта</H1></P>
</BODY>
</HTML>
Файл b.htm
<HTML>
<HEAD><TITLE> Страничка B </TITLE></HEAD>
< BODY BGCOLOR=yellow TEXT=black>
<P><H1>Набор ссылок</H1></P>
</BODY>
</HTML>
Файл c.htm
<HTML>
<HEAD><TITLE> Страничка С </TITLE></HEAD>
<BODY BGCOLOR=green TEXT=white>
<P><H1>Информация</H1></P>
</BODY>
</HTML>
Файл d.htm
<HTML>
<HEAD><TITLE> Страничка D </TITLE></HEAD>
|
|
|
<BODY BGCOLOR=blue TEXT=white>
<P><H1>Сведения о разработчиках сайта</H1></P>
</BODY>
</HTML>
5. Закройте блокнот и просмотрите созданные файлы в Internet Explorer.
6. На основе файла base.htm создайте три файла: 1.htm, 2.htm, 3.htm для создания ссылок. Сохраните эти файлы в папке frames (меню Файл, команда Сохранить как…).
Файл 1.htm
<HTML>
<HEAD>
<TITLE> Страница 1 </TITLE>
</HEAD>
<BODY BGCOLOR=aqua TEXT=black>
Содержимое страницы 1
</BODY>
</HTML>
Файл 2.htm
<HTML>
<HEAD>
<TITLE> Страница 2 </TITLE>
</HEAD>
<BODY BGCOLOR=azure TEXT=black>
Содержимое страницы 2
</BODY>
</HTML>
Файл 3.htm
<HTML>
<HEAD>
<TITLE> Страница 3 </TITLE>
</HEAD>
<BODY BGCOLOR=beige TEXT=black>
Содержимое страницы 3
</BODY>
</HTML>
7. Закройте блокнот и просмотрите созданные файлы в Internet Explorer.
Задание 2
Создайте набор фреймов с набором гиперссылок, расположенных сверху (рис 1).
| a)Заголовок сайта |
| b)Набор гиперссылок для перехода между страницами сайта |
| c)Полезное содержимое сайта |
| d)Сведения о правах разработчика сайта |
Рис. 1
1. Откройте программу Блокнот.
2. Наберите текст:
<HTML>
<HEAD>
<TITLE>ФРЕЙМЫ-4</TITLE></HEAD>
<FRAMESET rows="20%,20%,20%,*">
<FRAME src="a.htm">
<FRAME src="b.htm">
<FRAME src="c.htm">
<FRAME src="d.htm">
</FRAMESET>
</HTML>
3. Сохраните файл с именем index1.htm в папке frames.
4. Просмотрите созданный файл в Internet Explorer
Задание 3
Создайте классический набор фреймов.
| a) Заголовок сайта | |
| b)Набор гиперссылок для перехода между страницами сайта | c)Полезное содержимое сайта |
| d)Сведения о правах разработчика сайта |
Рис.2
1. Откройте программу Блокнот.
2. Наберите текст:
<HTML>
<HEAD>
<TITLE>ФРЕЙМЫ-4</TITLE></HEAD>
<FRAMESET rows="20%,*,20%">
<FRAME src="a.htm">
<FRAMESET cols="20%,*">
<FRAME src="b.htm">
<FRAME src="c.htm">
</FRAMESET>
<FRAME src="d.htm">
</FRAMESET>
</HTML>
|
|
|
3. Сохраните файл с именем index2.htm в папке frames.
Просмотрите созданный файл в Internet Explorer.
Задание 4
Создайте связи между фреймами. Взаимодействие между фреймами заключается в возможности загрузки документов в выбранный фрейм по командам из другого фрейма. Для этого используется параметр TARGET тэга <A>. Пусть содержимое страниц по ссылкам из фрейма b) открывается в содержимом фрейма с) (рис. 2).
1. Откройте программу Блокнот.
2. Открыть файл b.htm. Добавить код, осуществляющий ссылки на Страницы 1,2 и 3.
<HTML>
<HEAD><TITLE>Страничка B</TITLE></HEAD>
<BODY bgcolor=yellow text=black>
<P><H2><A HREF="1.htm" TARGET="FRAME_C">Ссылка 1</A></H2></P>
<P><H2><A HREF="2.htm" TARGET="FRAME_C">Ссылка 2</A></H2></P>
<P><H2><A HREF="3.htm" TARGET="FRAME_C">Ссылка 3</A></H2></P>
</BODY>
</HTML>
3. Сохранить изменения в файле b1.htm.
4. Открыть файл index2.htm и внести в него изменения, выделенные полужирным шрифтом:
<HTML>
<HEAD>
<TITLE> ФРЕЙМЫ-4-ссылки </TITLE></HEAD>
<FRAMESET rows="20%,*,20%">
<FRAME src="a.htm">
<FRAMESET cols="20%,*">
<FRAME src="b1.htm">
<FRAME src="c.htm" NAME="FRAME_C">
</FRAMESET>
<FRAME src="d.htm">
</FRAMESET>
</HTML>
5. Сохранить изменения в файле index3.htm и просмотреть данный файл в Internet Explorer.
Задание 5
Cоздайте фрейм с графическим изображением.
1. Скопируйте в папку frames файл book.gif из папки РИСУНКИ каталога Web-сайты.
2. Откройте файл index1 из папки frames.
3. Перейдите в режим работы программы Блокнот (меню Файл, команда Просмотр HTML- кода).
4. Внесите изменения в файл, выделенные полужирным шрифтом.
<HTML>
<HEAD>
<TITLE> ФРЕЙМЫ-4-графика </TITLE></HEAD>
<FRAMESET rows="20%,20%,20%,*">
<FRAMESET cols="70%,*">
<FRAME src="a.htm">
<FRAME src="book.gif">
</FRAMESET>
<FRAME src="b.htm">
<FRAME src="c.htm">
<FRAME src="d.htm">
5. Сохраните изменения в файле index4.htm.
6. Просмотреть файл index4 в Internet Explorer.
| ПОДВОДИМ ИТОГИ. Справочник тегов.
|
Домашнее задание: выучить справочник тегов.
|
|
|
