Комбинированный урок по теме "Табличный дизайн"

Разделы: Информатика

Тема: "Табличный дизайн"

Цели:

учебная:

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

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

  • развивать умения творчески подходить к выполнению задания, инициативу, действовать самостоятельно и в коллективе.

воспитывающая:.

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

Вид урока. Комбинированный.

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

№ команды Команда № Команда № Команда № Команда № Команда №
Командир . . . . .

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

План урока

1. Организационный момент – 4 минуты.

2. Проверка домашнего задания – 15 минут.

3. Актуализация знаний – 10 минут.

4. Этап формирования знаний и умений – 30 минут.

5. Этап закрепления знаний и умений – 25 минут.

6. Подведение итогов – 6 минут.

ХОД УРОКА

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

  1. Приветствие.
  2. Проверка посещаемости.
  3. Готовности к уроку.
  4. Подготовка к выполнению плана урока: сегодня вы будете работать по подгруппам, перед вами лежат листы оценивания, с помощью которых мы будем судить о результатах работы команды на уроке. Лист оценивания заполняет капитан команды.
№ команды

Этапы работы

Ответы по
домашнему
заданию

Разработка
HTML-кода

Соответствие
выполненного
задания

Допол-
нительный
балл

Итоговый
балл команды
1          
2          
3          
4          
5          
Баллы 3 балла
за 1 правильный
ответ		 4 балла,
если в коде
не ошибок		 5 баллов,
если результат
соответствует заданию		 3 балла
за один правильный
ответ

 

Слайд. Критерии оценки.

Набранные баллы 15–14 13–11 10–9

менее 9
Оценка 5 4 3

2

Индивидуальные оценки членов команды будут зависеть от результата деятельности команды на уроке. Таким образом каждый из вас должен быть заинтересован в том, чтобы команда набрала максимальное число баллов.

2. Проверка домашнего задания. Для проверки домашнего задания я попрошу ответить вас на следующие вопросы (вывести на экран вопросы): На обдумывание ответов на вопросы дается 5 минут. Если команда не знает ответа, то ответ могут дать другие команды. За это команда получает дополнительные баллы.

Слайд №1

  • 1 (группа 1) Что представляет собой фреймовая структура?
  • 2 Для чего нужна конструкция?

<FRAMESET параметры>

…

</FRAMESET>

  • 3 Могут ли на одной странице использоваться дескрипторы <FRAMESET> и <BODY>
  • 4 (группа 2) Как можно разделить окно браузера на части?
  • 5 Что необходимо сделать, чтобы разделить окно по вертикали?
  • 6 Какую функцию выполняет атрибут border?
  • 7 (группа 3) Для чего используется дескриптор <FRAME>?
  • Какие значения параметра frameborder Вы знаете?
  • 9 С помощью какого атрибута назначается цвет рамки?
  • 10 (группа 4) Что необходимо сделать, чтобы разделить окно браузера по горизонтали?
  • 11 Как можно изменить толщину рамки?
  • 12 Как задаются размеры фрейма?
  • 13 (группа 5) Какие параметры используются для изменения толщины и
    цвета рамки?
  • 14 Каким параметром изменяют цвет рамок?
  • 15 Что обозначает код <FRAMESET cols=*,2*>?

Вывести правильные ответы на экран.

Слайд №2
Ответы на вопросы

1. Фреймовая система это области экрана, в которых размещаются логически обособленные части WEB-страницы.
2. Объединяет несколько HTML-файлов в фреймовую структуру
3. Нет, нельзя
4. С помощью параметров дескриптора <FRAMESET>
5. Нужно использовать параметр cols
6. Задает толщину рамки фрейма.
7. Для размещения HTML-страниц в созданные фреймы
8. Значения yes, no
9. Атрибут bordercolor

10.

 Значение rows

11.

 Значение border

12.

 Размеры фрейма можно задать в процентах

13.

 Значение frameborder

14.

 bordercolor

15.

 Окно делится на 2 части, из которых вторая вдвое шире первой

Внимание на экран. Правильные ответы на вопросы команды.

Ребята перенесите результат работы вашей команды в лист оценивания.

3. Актуализация знаний. Мы продолжаем знакомиться с возможностями универсального языка разметки гипертекста HTML для создания интерактивных документов. Тема сегодняшнего урока "Табличный дизайн". Нам с вами предстоит научиться строить таблицы в гипертекстовых документах. Давайте вспомним, что представляют собой таблицы и для чего они нужны.

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

(Слайд таблицы)

На доске рисуем кластер знаний.

Слушаем ответы студентов.

Посещая Всемирную паутину и внимательно изучая структуру WEB-документов мы можем увидеть, что примерно в трех случаях из пяти у страниц обнаружится невидимый “скелет” – сложная сетка из крупных и мелких ячеек (слайд WEB-документа).

Следовательно, мы можем увидеть глядя на WEB-страницу, что она представлена таблицей.

Некоторые ячейки таблицы могут объединяться в одну, а внутрь ячеек можно поместить текст, графики, рисунки или другую таблицу. А сегодня мы узнаем как это сделать с помощью языка HTML.

4. Этап формирования новых знаний и умений.

  • На экране представлены теги для построения таблицы. (Слайд 3)
  • Запишите в конспект теги для построения таблицы и их атрибуты.
  • Представить HTML-код таблицы. (Слайд 4)
  • Работа по образцу. Посмотрите код построения таблицы и перепишите его в конспект и запишите его в Notepad.
  • Просмотрите результат IE, похож ли он на тот, который вы видите на экране. (Слайд 5)

5. Этап закрепления знаний и умений.

Применение знаний в стандартных ситуациях. Посмотрите внимательно на экран, для каждой команды предлагается свой вариант таблицы. Вам необходимо записать HTML-код, который позволит построить эту таблицу. (14 мин. работа по составлению код, 16 – на ввод и просмотр). После написания кода 2 участника команды выполнят его на ПК. Остальные члены команды в это время будут разрабатывать тестовые задания для проверки знаний по материалу сегодняшнего урока на следующем занятии. Команда должна представить 10 вопросов. После разработки кода 2.

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

Давайте рассмотрим результаты деятельности групп на уроке. Подвести итоги работы каждой группы. Закончить кластер.

А теперь я хочу, чтобы вы выразили свое мнение об уроке закончив предложения:

  • Тема, которую мы изучали на уроке для меня ...
  • После изучения темы я ...
  • Теперь я знаю .. .и буду ...
  • Думаю что ...

Таблица деятельности студента и преподавателя: (таблица)

Домашнее задание. Используя теоретические знания записать HTML-код для получения таблицы без объединения ячеек.