Вход



«Дети России Онлайн»

Cделаем интернет безопаснее вместе
8 800 25 000 15
Звонки по России бесплатны

Поиск по сайту

Рейтинг

Общероссийский рейтинг школьных сайтов http://rating.rosnou.ru/

Сейчас на сайте

Сейчас 21 гостей онлайн

Откуда посетители

Безопасные сайты

Главная > Методкопилка > Уроки > Каскадные таблицы стилей. Фильтры (Информатика 10 кл. Мистриков И.Г.)

Каскадные таблицы стилей. Фильтры (Информатика 10 кл. Мистриков И.Г.)

(0 голоса, среднее 0 из 5)

Тема: «Каскадные таблицы стилей. Фильтры»

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

Воспитательная цель:
Подбор сочетающихся цветов при создании заголовков веб-страниц, учитывая, что веб-страницу будут просматривать другие люди.

Цель учителя:
Проверить уровень усвоения материала по каскадным таблицам стилей. Сформировать представление о фильтрах. Организовать работу по освоению фильтров.

Опорные понятия:
• Каскадная таблица стилей 
• Тег
• Атрибуты тега
Новые понятия:
• Фильтр

Оборудование.
Компьютер, демонстрационный телевизор (подключен к компьютеру).

План урока:

1. Организационный момент.
2. Проверка знаний по каскадным таблицам стилей*. 
Поиск неизвестных тегов и их атрибутов (формулирование цели уро-ка).
3. Новый материал
a) Знакомство с фильтрами.
b) Анализ найденных ранее неизвестных тегов.
4. Практическая работа.
5. Запись домашнего задания.
6. Итоги урока.


Ход урока:
1.

Учитель: Здравствуйте! Сегодня мы продолжим знакомиться с каскадными таблицами стилей, но прежде чем приступить к изучению новой темы нам необходимо по-вторить, что мы уже знаем о каскадных таблицах стилей.
2.

Учитель: Для чего используются каскадные таблицы стилей?
Ученики: 1. Каскадные таблицы стилей используются для придания веб-сайту единого внешнего оформления, которое позже будет легко изменить, даже если веб-сайт состоит из нескольких сотен страниц.
2. Каскадные таблицы стилей имеют более широкие возможности при форма-тировании (изменение внешнего вида) веб-страницы.
Учитель: (на телевизоре показан слайд №1) 
Посмотрите на экран телевизора. Что необычного вы видите?
Ученики: Необычное оформление заголовка веб-страницы и ячеек таблицы.
Учитель: (на телевизоре показан слайд №2) 
Посмотрите на экран телевизора. Какие теги вам известны, а какие нет?
Ученики: теги <span class=zag1>Цветы</span>
Учитель: Правильно. Давайте посмотрим, как сделан данный эффект. Где можно посмот-реть? 
Ученики: в файле с каскадными таблицами стилей. default.css
Учитель: (на телевизоре показан слайд №3) 
Каким же образом добавлен необычный эффект?
Ученики: скорее всего строка filter: glow(10,color=yellow);, т.к. ранее мы ее не использо-вали.
Учитель: Правильно. Сегодня на уроке мы познакомимся и научимся пользоваться фильтрами. Запишите тему урока: «Фильтры»


3
А)
Учитель: Давайте посмотрим какие еще фильтры существуют (таблица с фильтрами роз-дана учащимся).
фильтр описание
glow Фильтр GLOW добавляет свечение вдоль внешних границ объекта, соз-давая эффект "возгорания" границ объекта
alpha Фильтр Alpha устанавливает степень прозрачности объекта. Прозрач-ность может быть установлена, как равномерная для всего объекта, так и в виде градиента 
blur Фильтр Blur размывает изображение в направлении Direction, заданном в градусах. Если указано Add=1, то фильтр будет наложен на исходный об-разец, иначе будет отображен только результат работы фильтра 
chroma Фильтр Chroma делает цвет, заданный в форме #RRGGBB прозрачным. Фильтр хорошо применять к изображениям, созданным в формате gif ли-бо png. Для jpeg он обычно не дает хороших результатов, так как для данного формата трудно определить границы заливки отдельных цветов 
DropShadow Фильтр DropShadow рисует сплошной силует объекта, смещённый в за-данном направлении, создавая тем самым эффект объекта, расположен-ного над страницей и отбрасывающего на неё тень 
flipH Фильтр FlipH переворачивает объект горизонтально
Gray Фильтр Gray удаляет цветовую гамму объекта и отображает его в серых тонах 
Invert Фильтр Invert меняет оттенок, насыщение и яркость объекта на противо-положные
Mask Фильтр Mask отображает текст так, как будто он выделен мышью 
Wave Фильтр Wave производит "синусоидальное" искажение объекта вдоль вертикальной оси 
xray Фильтр XRay отображает объект в черно-белом варианте, как на рентге-новском снимке
B)
Учитель: Вы посмотрели какие бывают фильтры. Теперь проанализируем фильтр, кото-рый используется в нашем примере filter: glow(10,color=yellow);  
Ученики: этот фильтр добавляет свечение желтого цвета вдоль внешних границ объекта. Сила свечения равна 10. 
Учитель: Молодцы!
4
Практическая работа

. Создайте веб-страницу «Вступление», используя фильтры для ее оформления.

5

Домашнее задание.
Закончите веб-сайт «Цветы». Для офрмления используйте разные фильтры.

6

<Итоги урока>


Скачать разработку урока с дополнительными материалами

 

Последние материалы

Самое популярное

По результатам работы МАОУ "Лицей №15 имени Героя Советского Союза Н.Н.Макаренко" награжден Дипломом победителя конкурса "100 лучших образовательных организаций Республики Тыва" в 2014 году.

По результатам работы МАОУ "Лицей №15 имени Героя Советского Союза Н.Н.Макаренко" награжден Почетным дипломом победителя Всероссийского конкурса "100 лучших предприятий и организаций России - 2013".

"100 лучших предприятий и организаций России - 2012".

По итогам 2009, 2011 годов наш лицей внесен в "Национальный реестр" в номинации "Ведущие образовательные учреждения России".

 



www.leading-education.ru

По итогам городского конкурса "Лучшие web-сайты муниципальных образовательных учреждений г.Кызыла" наш сайт стал абсолютным победителем

Приказ Департамента по образованию и молодежной политике г.Кызыла №156 от 18.04.2011г.