kopilkaurokov.ru - сайт для учителей

Создайте Ваш сайт учителя Курсы ПК и ППК Видеоуроки Олимпиады Вебинары для учителей

Открытый урок "СОЗДАНИЕ WEB-СТРАНИЦ. ФРЕЙМЫ"

Нажмите, чтобы узнать подробности

«СОЗДАНИЕ WEB-СТРАНИЦ. ФРЕЙМЫ.»

Цели урока:

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

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

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

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

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

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

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

Оборудование: Персональные компьютеры, презентация для объяснения нового материала.

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

Просмотр содержимого документа
«СОЗДАНИЕ WEB»

Конспект открытого урока

«СОЗДАНИЕ WEB-СТРАНИЦ. ФРЕЙМЫ.»

Цели урока:

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

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

  • Познакомить с понятием фрейм;

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

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

  • Учить ставить и разрешать проблемы, делать выводы;

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

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

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

Оборудование: Персональные компьютеры, презентация для объяснения нового материала.

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

План урока:

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

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

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

  4. Практическая работа на компьютере.

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

Ход урока

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

Приближается празднование юбилея города. И на сегодняшнем уроке мы с вами создадим простейшие сайты, посвящённые этому событию. Темы у каждого различны. Это: «Храм Богоявления Нарьян-Мара», «Улицы Нарьян - Мара», «Старый Нарьян - Мар», «Нарьян – Мар с птичьего полёта» и т.д. Сайты будут на основе фреймовой структуры, о которой мы сегодня поведём речь. Посмотрим примеры.

Демонстрация сайтов.















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

Учащимся предлагается ответить на тестовые вопросы, используя презентацию.


  1. Какой тег используется для форматирования текста?

ОТВЕТ: Б)FONT (если учащиеся дают правильный ответ, то осуществляется переход на слайд с ответом «правильно», иначе на на слайд с ответом «неправильно».

2. Какие атрибуты тега FONT можно использовать для оформления текста?

(face, color, size)





  1. Какой атрибут тега BODY необходимо использовать для заливки фона страницы цветом?

Ответ: bgcolor. (если учащиеся правильно дают ответ, то появляется ответ «правильно», иначе «неправильно»)
















  1. Установите соответствие.












  1. В каком порядке должны стоять теги, чтоб получилась следующая таблица.














  1. Изложение нового материала.


Использование фреймов подразумевает создание нескольких независимых информационных документов, загружаемых каждый в свой фрейм, и созданием специального файла, определяющего структуру документа. Т.О.

Определение: Фрейм – это часть сложной web-страницы, в которую может быть загружена другая web-страница.

Например, для данной страницы, содержащей два фрейма необходимо создать три файла left.htm -страница в левой части документа, right.htm – страница в правой части, index.htm – писание структуры документа на основе фреймов.


После создания каждого отдельного фрейма их необходимо связать в единую конструкцию.

Для этого используется HTML-документ, в котором тело документа (раздел BODY) заменяется описанием фреймовой структуры.

Структура фреймов определяется с помощью тега frameset, который является контейнером для тегов, определяющих фреймы, -frame. Атрибут COLS – определяет вертикальные фреймы и их размер.

Атрибут тега frame src задаёт адрес страницы, загружаемого в данный фрейм.


Для того чтобы организовать горизонтальные фреймы, структура страниц аналогична, кроме атрибута тега frameset. В данном случае это атрибут ROWS. Далее указывается размер фреймов. В данном случае размер фиксированный.






Для того, чтобы организовать загрузку страницы в нужный фрейм, необходимо на странице определяющей структуру всего сайта index.html данному фрейму присвоить имя с помощью атрибута NAME.

А на странице в которой описаны ссылки дополнить тег A HREF.. параметром TARGET=ИМЯ фрейма.





4. Практическая работа. «Создание Web- страниц. Фреймы.»

  1. Откройте папку НАРЬЯН-МАР расположенную на диске D в папке 9 класс.

  2. Откройте документ zagolovoc.htm.

  • Измените содержание страницы, изменив текст «Ваше название страницы» на название вашей папки.

  1. Откройте БЛОКНОТ и создайте документ со следующим содержанием.

Главная

frameset rows="100,*"

frame src=zagolovoc.htm

frameset cols="300,*"

frame src=meny.htm

frame src=1.htm name="OKNO"

frameset

/frameset

  1. Сохраните документ в папке НАРЬЯН –МАР под именем INDEX.htm.

  2. Посмотрите, что получилось открыв документ INDEX.htm. Должно получится примерно следующее.











  1. На оценку «4». Оформите фон каждой страницы своим цветом

  2. На оценку «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,Bradley Hand ITC

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

Оценить работу класса и назвать учащихся отличившихся на уроке.



Просмотр содержимого презентации
«СОЗДАНИЕ WEB-СТРАНИЦ. ФРЕЙМЫ»

Создание Web-страниц. Фреймы.

Создание Web-страниц.

Фреймы.

Ответьте на вопросы Какой тег необходимо использовать для форматирования текста? А)  Б)  B)  C)

Ответьте на вопросы

Какой тег необходимо использовать

для форматирования текста?

А)

Б)

B)

C)

Ответьте на вопросы Какой атрибут тега  необходимо использовать для заливки фона страницы цветом ? А) background Б) align Не правильно Не правильно B) color C) bgcolor Правильно Не правильно

Ответьте на вопросы

Какой атрибут тега необходимо

использовать для заливки фона страницы цветом ?

А) background

Б) align

Не правильно

Не правильно

B) color

C) bgcolor

Правильно

Не правильно

Установите соответствие Ответьте на вопросы P 1) Размер шрифта SIZE 2) Вставка изображения BR 3) Ссылка IMG 4) Абзац 5) Перевод строки A HREF

Установите соответствие

Ответьте на вопросы

P

1) Размер шрифта

SIZE

2) Вставка изображения

BR

3) Ссылка

IMG

4) Абзац

5) Перевод строки

A HREF

Ответьте на вопросы В каком порядке должны стоять теги, чтобы получилась следующая таблица Содержимое первой ячейки          Содержимое второй ячейки

Ответьте на вопросы

В каком порядке должны стоять

теги, чтобы получилась следующая таблица

Содержимое первой ячейки

Содержимое второй ячейки

Фреймы Фрейм ( frame ) – это часть сложной Web-страницы, в которую может быть загружена другая Web-страница. 3 файла :   left.html  – страница в левой части  right.html  – страница в правой части   index.html  – описание структуры

Фреймы

Фрейм ( frame ) – это часть сложной Web-страницы, в которую может быть загружена другая Web-страница.

3 файла :

left.html – страница в левой части

right.html – страница в правой части

index.html – описание структуры

Фреймы Описание структуры  ...  index.html ширина в пикселях или % columns столбцы    Фреймы-столбцы         все остальное место source источник имя фрейма (для ссылок)

Фреймы

Описание структуры

...

index.html

ширина в пикселях или %

columns

столбцы

Фреймы-столбцы

все остальное место

source

источник

имя фрейма (для ссылок)

Фреймы Фреймы-строки index.htm ширина в пикселях или %    Фреймы-строки       NAME = строки" width="640"

Фреймы

Фреймы-строки

index.htm

ширина в пикселях или %

Фреймы-строки

NAME ="qq"

строки

Фреймы Как открыть ссылку в другом фрейме  index.html  TARGET =“ okno Первый дом . . . . . . . . . . . . . . . . TARGET =“ okno "У лица Выучейского menu.html" width="640"

Фреймы

Как открыть ссылку в другом фрейме

index.html

TARGET =“ okno " Первый дом

. . . . . . . . . . . . . . . .

TARGET =“ okno "У лица Выучейского

menu.html

Ответы на вопросы ПРАВИЛЬНО

Ответы на вопросы

ПРАВИЛЬНО

Ответы на вопросы НЕ ПРАВИЛЬНО

Ответы на вопросы

НЕ ПРАВИЛЬНО


Получите в подарок сайт учителя

Предмет: Информатика

Категория: Уроки

Целевая аудитория: 9 класс.
Урок соответствует ФГОС

Скачать
Открытый урок "СОЗДАНИЕ WEB-СТРАНИЦ. ФРЕЙМЫ"

Автор: Михайлова Наталья Владимировна

Дата: 19.01.2015

Номер свидетельства: 157666

Получите в подарок сайт учителя

Видеоуроки для учителей

Курсы для учителей

ПОЛУЧИТЕ СВИДЕТЕЛЬСТВО МГНОВЕННО

Добавить свою работу

* Свидетельство о публикации выдается БЕСПЛАТНО, СРАЗУ же после добавления Вами Вашей работы на сайт

Удобный поиск материалов для учителей

Ваш личный кабинет
Проверка свидетельства