Урок на тему: «Структурирование веб-страниц и сайтов с помощью фреймов»

Автор: Михайлова Наталья Николаевна

учитель Государственное бюджетное образовательное учреждение Луганской Народной Республики «Луганская средняя школа № 56 имени К. Кутового»

Открытый урок по информатике на тему: «Структурирование веб-страниц и сайтов с помощью фреймов»

Учитель: Михайлова Н.Н.

2024 год

Тема урока: “Структурирование веб-страниц и сайтов с помощью фреймов”

Цели:

Познавательная (обучающая):

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

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

развивать умение анализировать, систематизировать полученные знания;
развивать творческое и логическое мышление;
развивать инициативность, самостоятельность и внимание;
укладываться в ограниченные сроки, уметь давать самооценку работы.

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

воспитание усидчивости, аккуратности, внимательности при выполнении практических работ.
формирование коммуникативных умений учащихся посредством нестандартной формы проведения урока – деловой игры.

Тип урока:

Изучение нового материала с последующим применением его в практической работе.

Методы преподавания:

инструктивный, поисково-стимулирующий.

Методы учения:

практический, частично-поисковый.

Ход урока.

Организация класса
Постановка цели урока
Проверка домашнего задания
Актуализация опорных знаний
Мотивация учебной деятельности
Изучение нового материала
Первичное закрепление знаний (практическая работа)
Подведение итогов урока. Рефлексия. Оценивание
Инструктаж выполнения домашнего задания

Организационный момент

Здравствуйте! Здравствуйте! Здравствуйте! Сегодня и всегда. Я очень рад вас видеть. Улыбнитесь друг другу, пошлите соседу, окружающим приятную информацию, информацию любви, нежности, доброты.

Постановка цели урока.

Мы с вами продолжаем изучать элективный курс «Основы Web-конструирования». К сегодняшнему дню мы уже знаем, что такое Web-сайт и чем он отличается от обычного текстового документа. Знаем, что Web-сайт можно создавать с помощью языка разметки гипертекстовых документов HTML, что команды задаются с помощью специальных команд – тэгов, которые бывают парные и непарные. На предыдущих уроках мы с вами изучили основные тэги HTML.

Язык HTML позволяет в рамках одной Web-страницы отобразить несколько документов. Для этого страница должна быть разбита на несколько областей — фреймов. Разбиение страницы описывается документом HTML особого рода, структура которого отличается от обычной. На уроке мы познакомимся с методикой отображения нескольких документов на одной странице и отработаем практические навыки разбиения Web-страницы на фреймы;

Сегодня на уроке мы с вами проведем занятие по теме «Основы языка гипертекстовой разметки HTML» в форме деловой игры «Лучший Web – сайт компании».

Представьте себе, что сегодня ваш класс – это компания «School Web – студия» по созданию сайтов. В пределах фирмы проведем конкурс на «Лучший Web – сайт компании». Каждому отделу представится возможность проявить свои способности в создании Web-сайта компании. А оценить ваши работы в конце конкурса мы попросим наших уважаемых гостей.

Проверка домашнего задания

Учащиеся отображают на экранах веб-страницы, написанные дома, с начерченными там таблицами по образцу.
Пишут небольшой диктант на знание ТЭГОВ.

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

Прежде, чем вы приступите к созданию своих сайтов, давайте проведем проверку на профессиональную пригодность сотрудников фирмы на знание основных тэгов HTML. Вам будет необходимо по очереди говорить, что обозначают следующие теги. (2 – 4 слайды презентации)

Мотивация учебной деятельности

Отобразить на экране учителя ШКОЛЬНЫЙ САЙТ. Учащиеся открывают страницы своих проектов «Гетьманские столицы Украины»

По ходу просмотра Web-страниц, созданных ранее, предложить учащимся ответить на следующие вопросы:

Сколько документов отображено на странице? В каких соотношениях делится страница?
Как в Web-документе работают гиперссылки? Обратить внимание учащихся на то, что ссылки раскрываются в другой области страницы.
В каких случаях полосы прокрутки отображаются, в каких нет?
Как расположена фоновая графика, обтекание текстом изображений в файле?
Укажите достоинства и недостатки каждой из работ.

Изучение нового материала.

Фреймы являются средством отображения нескольких документов в одном окне браузера. Тело документа заменяется описанием фреймов, задаваемым парным тегом < frameset >. Элемент body в таком документе должен отсутствовать, а при наличии — игнорируется браузером.

Открывающий тег < frameset > должен содержать обязательный атрибут cols = или rows =, определяющий способ разбиения окна. В первом случае окно разбивается вертикальными линиями, во втором — горизонтальными. Если заданы оба атрибута, создается сетка фреймов. Значение любого из этих атрибутов — это перечисленные через запятую размеры отдельных фреймов.

< frameset cols=”60%, 40%”>

Значения могут быть заданы в пикселях или в процентах от ширины окна. Последняя область может быть определена с помощью символа «*», что означает, что ей выделяется все оставшееся пространство.

< frameset rows=”40%, 40%,*”>

Между тегами < frameset > и < /frameset > должно располагаться ровно столько элементов, сколько областей создано с помощью атрибутов cols= и rows=. При этом могут использоваться дополнительные элементы frameset, описывающие дальнейшее разбиение на подобласти еще меньшего размера, или непарные теги <frame>, определяющие способ использования области.

Тег <frame> должен содержать обязательный атрибут src=, с помощью которого указывается, какой документ первоначально загружается в соответствующую область. Значение этого атрибута — абсолютный или относительный адрес нужного документа.

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

Это имя можно использовать, чтобы загружать новые документы в ранее созданную область. Для этого в тег <a>, определяющий гиперссылку, необходимо добавить атрибут target=, значение которого совпадает с ранее определенным именем области. При переходе по данной гиперссылке новый документ загрузится в указанный фрейм.

Пример: записать HTML-файл со следующей структурой

Тема

Оглавление

Содержание

Структурный файл

<html>

<head>

<title>struktura</title>

</head>

</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-страницу со структурой, имеющей не менее трех областей (можно использовать структуру приведенного примера).

Подведение итогов урока.

Просмотреть на экране созданные учащимися работы. Отметить положительные стороны страниц, недостатки. Выставить отметки учащимся.

Поблагодарить всех за работу.

Домашнее задание: Выучить конспект, написать страницу с фреймами по образцу.

Рефлексия:

– На сегодняшнем уроке я научился….

– Сегодня у меня получалось …

Урок на тему: «Структурирование веб-страниц и сайтов с помощью фреймов»