Поделиться
sozdanie_web_stranits.docx
«СОЗДАНИЕ WEB-СТРАНИЦ. ФРЕЙМЫ»
Педагогические задачи: создать условия для ознакомления с метками <Frame>, способствовать формированию представления о создании Web-сайта с использованием фреймов.
Тип урока: постановка и решение учебных задач.
Планируемые результаты обучения:
Предметные:
- познавательная сфера: иметь представление о фрейме, владеть терминологией, формами записи тегов.
- ценностно-ориентационная сфера: формировать собственное представление
Цели урока:
Образовательные:
· Сформировать у учащихся представление о формировании Интернет - страницы с помощью фреймов;
· Познакомить с понятием фрейм;
Развивающие:
· Развивать культуру речи, мышление (умение сравнивать, анализировать, обобщать);
· Учить ставить и разрешать проблемы, делать выводы;
Воспитательные:
· Воспитывать уважительное отношение к мнению других.
Тип урока: урок объяснения нового материала.
Вид: комбинированный.
Оборудование: Персональные компьютеры, презентация для объяснения нового материала.
Формы работы на уроке: фронтальный опрос, индивидуальная работа
План урока:
1. Постановка целей урока
2. Актуализация опорных знаний.
3. Изучение нового материала
4. Практическая работа на компьютере.
5. Подведение итогов урока.
6. Домашнее задание.
Ход урока
1. Постановка целей урока.
Приближается праздник – ваш школьный последний звонок. И на сегодняшнем уроке мы с вами создадим простейшие Web- страницы, сайты, посвящённые этому событию. Темы у каждого различны. Это: «Мой любимый 9а», «Любимая школа», «Мои учителя» и т.д. Сайты будут на основе фреймовой структуры, о которой мы сегодня поведём речь. Посмотрим примеры.
Демонстрация
сайтов.
2. Актуализация опорных знаний.
Учащимся предлагается ответить на тестовые вопросы, используя презентацию.
|
1. Какой тег используется для форматирования текста? ОТВЕТ: Б)FONT (если учащиеся дают правильный ответ, то осуществляется переход на слайд с ответом «правильно», иначе на слайд с ответом «неправильно». 2. Какие атрибуты тега FONT можно использовать для оформления текста? (face, color, size)
|
|
|||
|
2. Какой атрибут тега <BODY> необходимо использовать для заливки фона страницы цветом? Ответ: bgcolor. (если учащиеся правильно дают ответ, то появляется ответ «правильно», иначе «неправильно»)
|
|
|
3. Установите соответствие.
|
|
|||
|
a. В каком порядке должны стоять теги, чтоб получилась следующая таблица.
|
|
3. Изложение нового материала.
|
Использование фреймов подразумевает создание нескольких независимых информационных документов, загружаемых каждый в свой фрейм, и созданием специального файла, определяющего структуру документа. Определение: Фрейм – это часть сложной web-страницы, в которую может быть загружена другая web-страница.
|
|
После создания каждого отдельного фрейма их необходимо связать в единую конструкцию. Для этого используется HTML-документ, в котором тело документа (раздел BODY) заменяется описанием фреймовой структуры. Структура
фреймов определяется с помощью тега <frameset>, который
является контейнером для тегов, определяющих фреймы, <frame>. Атрибут тега <frame src> задаёт адрес страницы, загружаемого в данный фрейм.
|
|
|
|
Для того, чтобы организовать загрузку страницы в нужный фрейм, необходимо на странице определяющей структуру всего сайта index.html данному фрейму присвоить имя с помощью атрибута NAME. А на странице, в которой описаны ссылки дополнить, тег <A HREF..> параметром TARGET=ИМЯ фрейма.
|
4. Практическая работа. «Создание Web- страниц. Фреймы.»
1. Откройте папку 9А расположенную в папке обмена в папке 9 класс.
2. Скопируйте папку 9А в вашу папку.
3. Откройте БЛОКНОТ и создайте документ со следующим содержанием.
<html> <head><title>Главная</title></head>
<Frameset rows="128,*">
<frame src="primer1.html" name="top" border=10>
<Frameset cols="150,*">
<Frame src="meny.html" name="Left" border=10>
<Frame src="primer2.html" name="Right” border=10>
</Frameset>
</ Frameset>
<Noframe>
<BODY>
</BODY></Noframe></html>
4. Сохраните документ в своих папках под именем Index.html.
5. 
Посмотрите,
что получилось, открыв документ Index.html.
Должно получиться примерно следующее.
6. На оценку «4». Оформите фон каждой страницы своим цветом.
7. На оценку «5». Оформите текст на каждой странице разным цветом, размером и шрифтом.
ЦВЕТА.
|
Цвет |
Цвет |
Цвет |
|||
|
black |
черный |
purple |
фиолетовый |
olive |
Оливковый |
|
white |
белый |
yellow |
желтый |
agua |
Морской волны |
|
red |
красный |
brown |
коричневый |
Teal |
Зеленовато-синий |
|
green |
зеленый |
orange |
оранжевый |
Fuchsia |
Ярко-малиновый |
|
azure |
бирюзовый |
violet |
лиловый |
Maroon |
Тёмно-красный |
|
blue |
синий |
gray |
серый |
lime |
известковый |
ШРИФТЫ.
Calibri, Comic Sans MS, Mistral, Monotype Corsiva, Arial, Courier New.
1. Подведение итогов урока.
Оценить работу класса и назвать учащихся отличившихся на уроке.
Материалы на данной страницы взяты из открытых источников либо размещены пользователем в соответствии с договором-офертой сайта. Вы можете сообщить о нарушении.
