Цели:
Познавательная(обучающая):
- ознакомить учащихся с методикой отображения нескольких документов на одной странице;
- отработать практические навыки разбиения Web-страницы на фреймы;
- расширить интеллектуальный и профессиональный тезаурус с помощью терминов, выражений и другой информации.
Развивающая:
- развивать умение анализировать, систематизировать полученные знания;
- развивать творческое и логическое мышление;
- развивать инициативность, самостоятельность и внимание;
- укладываться в ограниченные сроки, уметь давать самооценку работы.
Воспитательная:
- воспитание усидчивости, аккуратности, внимательности при выполнении практических работ.
Тип урока:
изучение нового материала с последующим применением его в практической работе.
Методы обучения:
программируемый, эвристический.
Методы преподавания:
инструктивный, поисково-стимулирующий.
Методы учения:
практический, частично-поисковый.
Материальное и методическое обеспечение:
- кабинет, оснащенный ПК,
- видеопроектор,
- сканер,
- Web-страницы, созданные учащимися предыдущих групп.
- Приложение1. Приложение2.
Ход урока.
I. Постановка цели урока.
II. Актуализация опорных знаний.
III. Изучение нового материала.
IV. Закрепление полученных знаний. Практическая работа.
V. Подведение итогов урока.
Постановка цели урока.
Язык HTML позволяет в рамках одной Web-страницы отобразить несколько документов. Для этого страница должна быть разбита на несколько областей — фреймов. Разбиение страницы описывается документом HTML особого рода, структура которого отличается от обычной. На уроке учащиеся знакомятся с методикой отображения нескольких документов на одной странице и отрабатывают практические навыки разбиения Web-страницы на фреймы;
Актуализация опорных знаний.
Отобразить на экране Приложение1(«Периоды развития России»), затем Приложение2(«Про нас»).
По ходу просмотра Web-страниц, созданных ранее, предложить учащимся ответить на следующие вопросы:
- Сколько документов отображено на странице? В каких соотношениях делится страница?
- Как в Web-документе работают гиперссылки? Обратить внимание учащихся на то, что ссылки раскрываются в другой области страницы.
- В каких случаях полосы прокрутки отображаются, в каких нет?
- Как расположена фоновая графика, обтекание текстом изображений в файле?
- Укажите достоинства и недостатки каждой из работ.
Изучение нового материала.
Фреймы являются средством отображения нескольких документов в одном окне браузера. Тело документа заменяется описанием фреймов, задаваемым парным тегом < frameset >. Элемент body в таком документе должен отсутствовать, а при наличии — игнорируется браузером.
Открывающий тег < frameset > должен содержать обязательный атрибут cols = или rows =, определяющий способ разбиения окна. В первом случае окно разбивается вертикальными линиями, во втором — горизонтальными. Если заданы оба атрибута, создается сетка фреймов. Значение любого из этих атрибутов — это перечисленные через запятую размеры отдельных фреймов.
< frameset cols="60%, 40%">
Значения могут быть заданы в пикселях или в процентах от ширины окна. Последняя область может быть определена с помощью символа «*», что означает, что ей выделяется все оставшееся пространство.
< frameset rows="40%, 40%,*">
Между тегами < frameset > и < /frameset > должно располагаться ровно столько элементов, сколько областей создано с помощью атрибутов cols= и rows=. При этом могут использоваться дополнительные элементы frameset, описывающие дальнейшее разбиение на подобласти еще меньшего размера, или непарные теги <frame>, определяющие способ использования области.
Тег <frame> должен содержать обязательный атрибут src=, с помощью которого указывается, какой документ первоначально загружается в соответствующую область. Значение этого атрибута — абсолютный или относительный адрес нужного документа.
Среди прочих атрибутов выделяется атрибут name=, позволяющий задать «имя» созданной области в виде последовательности латинских букв и цифр, использованной как значение этого атрибута.
<frame src="text.htm" name="left" >
Это имя можно использовать, чтобы загружать новые документы в ранее созданную область. Для этого в тег <a>, определяющий гиперссылку, необходимо добавить атрибут target=, значение которого совпадает с ранее определенным именем области. При переходе по данной гиперссылке новый документ загрузится в указанный фрейм.
Для установки режима отображения полос прокрутки во фрейме используется параметр scrolling. Если значение этого параметра равно yes, во фрейме отображаются полосы прокрутки. Если значение параметра равно no, полосы прокрутки не отображаются.
Пример: записать HTML-файл со следующей структурой
Тема |
|
Оглавление |
Содержание |
Структурный файл
<html>
<head>
<title>struktura</title>
</head>
<frameset rows=”30%,70%”>
<frame src=”tema.htm”>
<frameset cols=”35%,65%”>
<frame src=”oglawlenie.htm”>
<frame src=”soderganie.htm” name=”111”>
</frameset>
</frameset>
</html>
Файл-оглавление
<html>
<head>
<title>oglawlenie</title>
</head>
<body>
<a href=”glawa1.htm” target=”111”> Глава1 </a>
<a href=”glawa2.htm” target=”111”> Глава2 </a>
<a href=”glawa3.htm” target=”111”> Глава3 </a>
……………..
</body>
</html>
Закрепление полученных знаний. Практическая работа.
В качестве домашнего задания учащимся было поручено подготовить к уроку материал (текст, графику) на носителе по любой выбранной теме: истории, географии, искусству, творчеству и т.д.
Используя подготовленный материал, создать Web-страницу со структурой, имеющей не менее трех областей (можно использовать структуру приведенного примера).
Подведение итогов урока.
Просмотреть на экране, используя проектор, созданные учащимися работы. Отметить положительные стороны страниц, недостатки. Выставить отметки учащимся.
Поблагодарить всех за работу.
По результатам урока можно привести следующие работы:
Приложение3 –Web-страница «Страны мира», выполненная учащимся 10 класса Рамилем Ильясовым.
Приложение4 - Web-страница «Мое творчество», выполненная учащейся 10 класса Кристиной Логиничевой.