Динамичные эффекты посредством CSS

ТОРГОВО-ЭКОНОМИЧЕСКИЙ КОЛЛЕДЖ КАЗПОТРЕБСОЮЗА

УТВЕРЖДАЮ

зам.директора

по методической работе

__________ М.А.Шабданова

«___»_____________ 20___г.

МЕТОДИЧЕСКАЯ РАЗРАБОТКА ОТКРЫТОГО УРОКА

по дисциплине ДООО

на тему: «Динамичные эффекты посредством CSS»

Преподавателя Муздубаевой Б.Ж

Рассмотрено на заседании цикловой комиссии ВТиПО

Протокол № ___ «___» ____ 20__г.

Председатель цикловой комиссии:

_____________ Н. Омаргалиева

Астана, 2016

План занятия

Группа 23 ВТ

Дата 12.02.16

Кол-во студентов -20

Аудитория -20

Дисциплина – ДООО

Тема «Динамичные эффекты посредством CSS»

Цели урока:

Обучающие

1. Повторить стилевые свойства, их назначение и принимаемые значения. Вспомнить назначение псевдокласса :hower. (О1)

2. Обобщить полученные знания для создания динамических эффектов на web-странице. (О2)

Развивающие

1. Научиться добавлять стилевые свойства и динамические эффекты элементу и проверять их работу на конкретных примерах. (Р2)

2. Развивать интерес к познавательной деятельности учащихся. (Р3)

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

1. Показать значимость знаний для будущей профессии. (В4)

2. Развить эстетический вкус в творческом учебном труде. (В5)

Задачи:

1. Научиться привязывать к элементам на web-странице различные стилевые свойства;

2. Научиться составлять html-код и описание стиля;

3. Научиться на конкретных примерах распознавать html-код и описание стиля;

4. Научиться добавлять различные динамические эффекты на web-страницу;

Тип урока: комбинированный урок: закрепление изученного, практическая работа.

Оборудование: мультимедийный комплекс, ПК, web-браузер, Блокнот либо Notepad++, презентация, электронные ресурсы.

Формы работы:

• Актуализация опорных знаний – фронтальная работа;

• Практическая работа – групповая работа.

План урока:

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

2. Мотивационное начало: постановка цели урока.

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

4. Объяснение преподавателя хода практической работы.

5. Практическая работа.

6. Проверка результатов.

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

ХОД УРОКА

I. Организационный момент. (4 мин)

Проверить готовность учащихся к уроку, правильную организацию рабочего места. Отметить отсутствующих в журнале.

II. Постановка целей и задач урока. (1 мин) (В4)

Тема нашего сегодняшнего урока «Динамичные эффекты посредством CSS».

Объяснение важности полученных знаний для будущей профессии.

Сегодня на уроке мы с вами:

• Повторим описание стиля, селекторы, стилевые свойства и их назначение;

• Научиться составлять html-код и описание стиля для конкретной web-страницы;

• Научиться на конкретных объектах из web-страницы распознавать их html-код и описание стиля;

• Научиться создавать динамику на web-странице посредством CSS

III. Актуализация опорных знаний. (30 мин)

1. 1. Вопросы к учащимся (с демонстрацией Презентации) (О1) (О2):

а. Дать описание стиля? (Слайд 2)

б. Назвать виды селекторов? (Слайд 3)

в. Пример использования селектора тега и селектора класса (Слайд 4)

г. Пример использования комбинированного селектора (Слайд 5)

д. Пример использования контекстного селектора(Слайд 6)

е. Пример использования псевдоселектора (Слайд 7)

1. 2. Групповая работа (О1) (О2) (Р3)

а. Тестовая работа с ресурсом www.htmlbook.ru

б. Описание стиля для конкретной web-страницы: http://www.sgu.ru/

IV. Лабораторная работа. (45 мин) (Р2)(В5)

Цели: Научить основным приемам создание динамичных эффектов посредством CSS. Показать основные принципы создания элементов, реагирующих на наведении на них курсора мыши: меню с выпадающими ссылками, изображения с меняющейся прозрачностью, текстовой блок с меняющимся цветом фона и текста, ссылки, которые меняют свой цвет и цвет фона и т.д.

ХОД РАБОТЫ

Указание к выполнению. Для добавления динамического эффекта элементам web-страницы используется псевдокласс :hower, который изменяют стилевые свойства элемента при наведении на него мыши.

1. Ссылки, меняющие цвет при наведении мыши

1. Изображение, меняющее размер при наведении на него мыши.

1. Меню с выпадающими, при наведении на него мыши, ссылками.

Выберите для себя задание по уровню сложности и интерпретируйте код конкретного примера на web-странице в задании. В каждом задании два динамических эффекта.

Задание 1 (1 уровень сложности - оценка 3)

1-ый динамический эффект – при наведении мыши на полупрозрачную картинку, она становиться четче.

2-ой динамический эффект – при наведении мыши на ссылку, она меняет цвет и размер шрифта.

Задание 2 (2 уровень сложности - оценка 4)

1-ый динамический эффект – при наведении мыши на блок (обратите внимание, что блок заключен в двойную рамку и текст внутри него имеет расстояние между буквами размером в пол буквы) с текстом, он меняет цвет.

2-ой динамический эффект – при наведении мыши на любую из трех ссылок, она меняет цвет и фон, а также исчезает линия подчеркивания.

Задание 3 (3 уровень сложности - оценка 5)

1-ый динамический эффект – при наведении мыши на блок с текстом выпадает другой блок из 4 ссылок (обратите внимание что ссылки меняют цвет при наведении мыши и они не подчеркнуты)

2-ой динамический эффект – при наведении мыши на картинку, у нее появляется рамка (обратите внимание на рамку).

Проверка результатов

V. Подведение итогов урока. (10 мин)

1. Сегодня на уроке мы:

а. Повторили стилевые свойства, их назначение и принимаемые значения. Вспомнили назначение псевдокласса :hower;

б. Научились добавлять стилевые свойства конкретному html-коду;

в. Научились интерпретировать стилевые свойства конкретных примеров на web-странице;

г. Научились добавлять динамические эффекты к элементам на web-странице;

2. Выставление оценок. Рефлексия.

Преподаватель Б. Муздубаева