РАЗРАБОТКА ОТКРЫТОГО УРОКА по дисциплине «Программирование сайтов и web-дизайн»

Колледж радиоэлектроники имени П.Н. Яблочкова
ФГБОУ ВПО «Саратовский государственный университет
имени Н.Г. Чернышевского»




РАЗРАБОТКА ОТКРЫТОГО УРОКА
Преподавателя Хамутова М. В.

по дисциплине «Программирование сайтов и web-дизайн»
раздел «Каскадные таблицы стилей CSS»


Тема: «Динамичные эффекты посредством CSS»
17 октября 2014
Открытый урок по теме «Динамичные эффекты посредством CSS»
Цели:
Обучающие
Повторить стилевые свойства, их назначение и принимаемые значения. Вспомнить назначение псевдокласса :hower. (О1)
Обобщить полученные знания для создания динамических эффектов на web-странице. (О2)
Развивающие
Научиться добавлять стилевые свойства и динамические эффекты элементу и проверять их работу на конкретных примерах. (Р2)
Развивать интерес к познавательной деятельности учащихся. (Р3)
Воспитательные
Показать значимость знаний для будущей профессии. (В4)
Развить эстетический вкус в творческом учебном труде. (В5)

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

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

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

Формы работы:
Актуализация опорных знаний – фронтальная работа;
Практическая работа – групповая работа.

План урока:
Организационный момент.
Мотивационное начало: постановка цели урока.
Актуализация опорных знаний.
Объяснение преподавателя хода практической работы.
Практическая работа.
Проверка результатов.
Подведение итогов урока.
ХОД УРОКА
I. Организационный момент. (4 мин)
Проверить готовность учащихся к уроку, правильную организацию рабочего места. Отметить отсутствующих в журнале.
II. Постановка целей и задач урока. (1 мин) (В4)
Тема нашего сегодняшнего урока «Динамичные эффекты посредством CSS».
Объяснение важности полученных знаний для будущей профессии.
Сегодня на уроке мы с вами:
Повторим описание стиля, селекторы, стилевые свойства и их назначение;
Научиться составлять html-код и описание стиля для конкретной web-страницы;
Научиться на конкретных объектах из web-страницы распознавать их html-код и описание стиля;
Научиться создавать динамику на web-странице посредством CSS
III. Актуализация опорных знаний. (30 мин)
1. Вопросы к учащимся (с демонстрацией Презентации) (О1) (О2):
а. Дать описание стиля? (Слайд 2)
б. Назвать виды селекторов? (Слайд 3)
в. Пример использования селектора тега и селектора класса (Слайд 4)
г. Пример использования комбинированного селектора (Слайд 5)
д. Пример использования контекстного селектора(Слайд 6)
е. Пример использования псевдоселектора (Слайд 7)
2. Групповая работа (О1) (О2) (Р3)
а. Тестовая работа с ресурсом [ Cкачайте файл, чтобы посмотреть ссылку ]
б. Описание стиля для конкретной web-страницы: [ Cкачайте файл, чтобы посмотреть ссылку ]

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

ХОД РАБОТЫ
Указание к выполнению. Для добавления динамического эффекта элементам web-страницы используется псевдокласс :hower, который изменяют стилевые свойства элемента при наведении на него мыши.
Ссылки, меняющие цвет при наведении мыши
html-код
описание стиля

Ccылка
Цвет ссылки в статическом режиме
A { color: blue }
Цвет ссылки при наведении мыши (динамический режим)
A:hover { color: green}


Изображение, меняющее размер при наведении на него мыши.
html-код
описание стиля



Размеры в статическом режиме
img {width:100px; height:100px}
Размеры при наведении мыши
img:hover {width:200px;
height:200px }


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







Скрытие блока c1 в статическом режиме
div.c1 {display:none; position:absolute; }
Появление списка ссылок при наведении мыши
.c2:hover .c1 {display:block }


Выберите для себя задание по уровню сложности и интерпретируйте код конкретного примера на 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. Выставление оценок.
Рисунок 1Рисунок 4Рисунок 10Рисунок 22Рисунок 25Hђ Заголовок 1HYPER15Основной шрифт абзаца

Приложенные файлы

  • doc Rabota4
    Размер файла: 1 MB Загрузок: 16