Методические и дидактические разработки к уроку "Использование таблиц в веб-документах. Практическая работа"

Материал из ЗапоВики

(Различия между версиями)
Перейти к: навигация, поиск
 
(12 промежуточных версий не показаны.)
Строка 1: Строка 1:
 +
[[Файл:Sertifikat4 ZapoWiki24Ovsannik.jpg|right|300px]]
 +
 +
'''Методические и дидактические разработки к уроку "Использование таблиц в веб-документах. Практическая работа"'''
'''Методические и дидактические разработки к уроку "Использование таблиц в веб-документах. Практическая работа"'''
Строка 14: Строка 17:
СПЕЦКУРС: '''«Основи веб-дизайну»''' (І.О. Завадський, Н.С. Прокопенко),  Інформатика. Збірник “Програми для профільного навчання та допрофільної підготовки”. Рекомендовано МОН України Лист №1/11-4927 від 10.08.06 . (Київ, Видавнича група BHV, 2009)
СПЕЦКУРС: '''«Основи веб-дизайну»''' (І.О. Завадський, Н.С. Прокопенко),  Інформатика. Збірник “Програми для профільного навчання та допрофільної підготовки”. Рекомендовано МОН України Лист №1/11-4927 від 10.08.06 . (Київ, Видавнича група BHV, 2009)
 +
<br> '''Тема курсу:''' Основи мови HTML (6 год)
 +
 +
'''Тема уроку''' '''№ 5''': Практична робота №4 Структурирование веб-страниц при помощи таблиц 
 +
 +
'''Практическая работа. Использование таблиц в веб-документах'''(«Создание  тематического фотоальбома на веб-странице» )
-
'''Практическая работа. Использование таблиц в веб-документах'''(«Создание фотоальбома на веб-странице» )
 
'''Тип урока:''' закрепление полученных знаний
'''Тип урока:''' закрепление полученных знаний
Строка 22: Строка 29:
закрепить знания о таблицы в  веб- документах;
закрепить знания о таблицы в  веб- документах;
практически реализовать разметку фотоальбома в  таблице;  
практически реализовать разметку фотоальбома в  таблице;  
-
закрепить знания по использованию тегов таблиц в веб-документах;  
+
закрепить умение использования тегов для построения таблиц в веб-документах;  
развивать умения экспериментально-исследовательской деятельности;  
развивать умения экспериментально-исследовательской деятельности;  
форматировать интерес к учебному предмету
форматировать интерес к учебному предмету
Строка 39: Строка 46:
*Синтаксис тегов для строк и ячеек таблицы на странице
*Синтаксис тегов для строк и ячеек таблицы на странице
*Порядок вложения тегов
*Порядок вложения тегов
-
 
-
'''План урока'''
 
-
 
-
1. Организационный этап
 
-
 
-
2.      Проверка домашнего задания. Работа с карточками и магнитами «Пазл»
 
-
 
-
3. Актуализация опорных знаний
 
-
 
-
4. Закрепление полученных  знаний и навыков в создании таблиц в  гипертекстовых документах. Практическая работа
 
-
 
-
5. Итоги урока.
 
-
 
-
6.Домашнее задание
 
-
 
== Организационный этап ==
== Организационный этап ==
Строка 66: Строка 58:
* Какие основные теги используют для разметки таблицы? Пояcнить, привести пример
* Какие основные теги используют для разметки таблицы? Пояcнить, привести пример
-
* Озвучить алгоритм порядка разметки таблицы с заголовком в веб-документе для таблицы "Времена года" (предыдущий урок)
+
* Озвучить алгоритм разметки таблицы с заголовком в веб-документе для таблицы "Времена года" (предыдущий урок)
-
== Актуализация опорных знаний ==
+
== Актуализация опорных знаний ==
-
'''Работа с карточками и магнитами «Пазл»'''
+
 
 +
'''Работа с карточками и магнитами «Пазл»'''  
 +
 
 +
На доске из предложенного набора карточек задать разметку таблицы из одной строки с двумя ячейками '''два варианта''' ответа:
-
На доске из предложенного набора карточек задать разметку таблицы  из одной строки с двумя ячейками
 
-
'''два варианта''' ответа:
 
{|
{|
-
|[[Файл:Пазл Овсяник16122012.png]]
+
|-
-
|
+
| [[Image:Пазл Овсяник16122012.png]]  
-
|    
+
|  
-
|[[Файл:Пазл2 Овсяник16122012.png]]  
+
|  
 +
| [[Image:Пазл2 Овсяник16122012.png]]
 +
|}
 +
 
 +
Подключение картинки в ячейку таблицы на веб-странице:
 +
 
 +
{| border="0" cellspacing="1" cellpadding="1" width="500" align="center" height="50"
 +
|-
 +
| bgcolor="#99ccff" | &lt;TD&gt;
 +
|
 +
| bgcolor="#33ff99" align="right" | &lt;IMG SR="1.JPG"
 +
| bgcolor="#33ff99" align="center" | WIDTH=100
 +
| bgcolor="#33ff99" | HEIGHT=100&gt;
 +
|
 +
| bgcolor="#99ccff" | &lt;/TD&gt;
|}
|}
== Закрепление полученных знаний и навыков в создании таблиц в гипертекстовых документах  ==
== Закрепление полученных знаний и навыков в создании таблиц в гипертекстовых документах  ==
 +
Практическая работа <font color=green size=4>«Создание  тематического фотоальбома на веб-странице» </font>
 +
[https://docs.google.com/file/d/0B__ytXd4xGKARllOVmRtdm5aOTQ/edit пример выполнения практической работы]
[https://docs.google.com/file/d/0B__ytXd4xGKARllOVmRtdm5aOTQ/edit пример выполнения практической работы]

Текущая версия на 08:43, 21 июня 2013

Sertifikat4 ZapoWiki24Ovsannik.jpg


Методические и дидактические разработки к уроку "Использование таблиц в веб-документах. Практическая работа"

Автор:

учитель інформатики

Запорожский многопрофильный лицей № 99

Овсяник Светлана Георгиевна


ПРОГРАММА

СПЕЦКУРС: «Основи веб-дизайну» (І.О. Завадський, Н.С. Прокопенко), Інформатика. Збірник “Програми для профільного навчання та допрофільної підготовки”. Рекомендовано МОН України Лист №1/11-4927 від 10.08.06 . (Київ, Видавнича група BHV, 2009)


Тема курсу: Основи мови HTML (6 год)

Тема уроку № 5: Практична робота №4 Структурирование веб-страниц при помощи таблиц

Практическая работа. Использование таблиц в веб-документах(«Создание тематического фотоальбома на веб-странице» )


Тип урока: закрепление полученных знаний

Цели: закрепить знания о таблицы в веб- документах; практически реализовать разметку фотоальбома в таблице; закрепить умение использования тегов для построения таблиц в веб-документах; развивать умения экспериментально-исследовательской деятельности; форматировать интерес к учебному предмету

ученик использует

  • Теги и атрибуты тега для таблицы на странице;
  • Теги и атрибуты тега для заголовка в таблице;
  • Теги и атрибуты тега для строки в таблице;
  • Теги и атрибуты тега для ячейки в таблице;
  • Правила корректной записи тегов
  • Алгоритм описания таблицы на странице;

описывает

  • Синтаксис тегов для таблицы на странице
  • Синтаксис тегов для заголовков таблицы на странице
  • Синтаксис тегов для строк и ячеек таблицы на странице
  • Порядок вложения тегов

Содержание

Организационный этап

Приветствие учащихся, перекличка

Сообщение темы, целей, задач урока

Учитель знакомит учащихся с критериями к практической работе критерии в файле на рабочем месте учащегося

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

Опрос:

  • Какие основные теги используют для разметки таблицы? Пояcнить, привести пример
  • Озвучить алгоритм разметки таблицы с заголовком в веб-документе для таблицы "Времена года" (предыдущий урок)

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

Работа с карточками и магнитами «Пазл»

На доске из предложенного набора карточек задать разметку таблицы из одной строки с двумя ячейками два варианта ответа:

Пазл Овсяник16122012.png Пазл2 Овсяник16122012.png

Подключение картинки в ячейку таблицы на веб-странице:

<TD> <IMG SR="1.JPG" WIDTH=100 HEIGHT=100> </TD>

Закрепление полученных знаний и навыков в создании таблиц в гипертекстовых документах

Практическая работа «Создание тематического фотоальбома на веб-странице»

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

Prakt rabota web 13012013 ovsianik.png


КРИТЕРИИ К ПРАКТИЧЕСКОЙ РАБОТЕ «Создание фотоальбома на веб-странице»

Начальный:

1) Заголовок на странице - 1 балл

2) Таблица размечена в соответствии с заданием – 1 балл

3) Задан фон страницы – 1 балл

Средний и достаточный:

4) Отображаются границы таблицы - 1 балл

5) Надпись над таблицей – 1 балл

6) Все картинки отображаются в ячейках – 4 балла

Высокий:

7) Картинка вписана в ячейку – 1 балл

8) Выполнено центрирование таблицы на странице – 1 балл

9) Картинки подобраны по цветовой гамме и сюжету, создают тематический фотоальбом - 1 балл



вариант 1

Задание:

Из предложенных материалов в папке Выбрать изображения по теме «Кактусы». в папке фото_практическая2 создать веб-страницу:

1. Заголовок «Фотоальбом «Кактусы» учащегося (учащейся) «фамилия» «класс»

2. Задать горизонтальную линию. Задать Фон страницы

3. Выполнить разметку таблицы 3 столбца и 5 строк. Выполнить центрирование на странице

4. В каждую ячейку таблицы вставить фотографию

5. Результаты работы сохранить в свою папку

6. Файл назвать foto1.HTML



вариант 2

Задание:

Из предложенных материалов в папке Выбрать изображения по теме «Водный мир». в папке фото_практическая2 создать веб-страницу:

1. Заголовок «Фотоальбом «Водный мир» учащегося (учащейся) «фамилия» «класс»

2. Задать горизонтальную линию. Задать Фон страницы

3. Выполнить разметку таблицы 4 столбца и 3 строки. Выполнить центрирование на странице

4. В каждую ячейку таблицы вставить фотографию

5. Результаты работы сохранить в свою папку

6. Файл назвать foto2.HTML


вариант 3

Задание:

Из предложенных материалов в папке Выбрать изображения по теме «Бабочки». в папке фото_практическая2 создать веб-страницу:

1. Заголовок «Фотоальбом «Бабочки» учащегося (учащейся) «фамилия» «класс»

2. Задать горизонтальную линию. Задать Фон страницы

3. Выполнить разметку таблицы 3 столбца и 3 строки. Выполнить центрирование на странице

4. В каждую ячейку таблицы вставить фотографию

5. Результаты работы сохранить в свою папку

6. Файл назвать foto3.HTML


вариант 4

Задание:

Из предложенных материалов в папке Выбрать изображения по теме «Птицы». в папке фото_практическая2 создать веб-страницу:

1. Заголовок «Фотоальбом «Птицы» учащегося (учащейся) «фамилия» «класс»

2. Задать горизонтальную линию. Задать Фон страницы

3. Выполнить разметку таблицы 4 столбца и 3 строки. Выполнить центрирование на странице

4. В каждую ячейку таблицы вставить фотографию

5. Результаты работы сохранить в свою папку

6. Файл назвать foto4.HTML

Итоги урока

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


 
 


Домашнее задание:

стр.61-69 повторить

"Основи веб-дизайну" Пасечник О.Г, Пасечник О.В, Стеценко И.В., изд.BHV, 2009


Ресурсы

Для учителя:

план-конспект к уроку практическая работа "Разметка таблицв веб-документах. Фотоальбом

опорная схема

архив к практической работе Разметка таблиц в веб-документах. Фотоальбом



Ресурсы в помощь учащемуся:

GF Studio.su

Учебник HTML

Личные инструменты
правила на Заповики
Сайт кафедры ИИТО
переход на сайт центра
 
Наша награда.