Кодирование цвета на web-страницах

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

Тип урока: урок-закрепление изученного.

Вид: урок-практикум.

Технология: проблемно-исследовательская технология.

Оборудование: компьютер с установленной программой Adobe Photoshop; мультимедийный проектор; интерактивная доска; таблицы заданий для компьютерного практикума, подготовленные, для заполнения на интерактивной доске; раздаточный материал.

Цели урока:

  • развитие у учащихся теоретического, творческого мышления, а также формирование операционного мышления, направленного на выбор оптимальных решений;
  • подготовка к сдаче ЕГЭ.

Задачи урока.

Воспитательная – развитие познавательного интереса, воспитание информационной культуры.

Образовательная – систематизация знаний, умений и навыков работы по темам: “Технология создания и обработки графической информации”, “Создание интерактивных Web-страниц”.

Развивающая – развитие логического мышления, расширение кругозора.

Ход урока

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

Сегодня мы подведем итог изученному материалу. В ходе выполнения практических работ вы должны будете показать умения и навыки, применить теоретические знания, полученные вами при изучении тем: “Технология создания и обработки графической информации”, “Создание интерактивных Web- страниц”.

II. Повторение изученного материала. Фронтальный опрос

Вопросы.

  1. Перечислите все виды графики.
  2. В каких форматах хранится графическая информация?
  3. Как формируется векторное изображение?
  4. Как формируется растровое изображение?
  5. Что такое пиксель?
  6. Что такое глубина цвета?
  7. Опишите цветовую модель RGB.

  8. Сколько различных цветов можно закодировать, используя модель RGB в режиме истинного цвета (True Color)?
  9. Сколько памяти нужно для хранения цвета одного пикселя?
  10. Сколько различных цветов можно закодировать?
  11. Как кодируется и записывается цвет на Web - страницах?
  12. Какой используется атрибут для кодирования цвета фона интернет – страницы?

I. Компьютерный практикум. При выполнении практических работ можно воспользоваться программой Adobe Photoshop. По ходу выполнения работ, учащиеся, заполняют таблицы на интерактивной доске.

Практическая работа 1. По цвету определить код. Заполнить таблицу, сделать выводы:

Практическая работа 2. По коду определить цвет. Заполнить таблицу, сделать выводы:

Шестнадцатеричный код #FFFF00 #FF00FF #00FFFF #CCCCCC #787878
Десятичный код          
Название цвета          
Цвет          

Практическая работа 3. Получение светлых оттенков базового цвета. Заполнить таблицу, сделать выводы:

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

II. Подведение итогов практических работ. Учащиеся делают выводы и зачитывают их вслух.

III. Закрепление. Тестирование. (При тестировании нельзя пользоваться программой Adobe Photoshop).

Для кодирования цвета фона страницы Интернет используется атрибут bgcolor="#ХХХХХХ", где в кавычках задаются шестнадцатеричные значения интенсивности цветовых компонент в 24-битной RGB-модели. К какому цвету будет близок цвет страницы, заданной тэгом:

1. <body bgcolor="#999999">?

1) белый 2) серый 3) желтый 4) фиолетовый

2. <body bgcolor="#992299">?

1) белый 2) серый 3) желтый 4) фиолетовый

3. <body bgcolor="#999900">?

1) белый 2) серый 3)желтый 4) фиолетовый

4. <body bgcolor="#40FF40">?

1) темно-фиолетовый 2) светло-зеленый 3) желтый 4) светло-желтый

5. <body bgcolor="#FFFF40">?

1) темно-фиолетовый 2) светло-зеленый 3) желтый 4) светло-желтый

6. <body bgcolor="#800080">?

1) темно-фиолетовый 2) светло-зеленый 3)желтый 4) светло-желтый

7. <body bgcolor="#008000">?

1) черный 2) темно-синий 3) темно-зеленый 4) темно-красный

8. <body bgcolor="#00FFFF">?

1) красный 2) желтый 3) фиолетовый 4) голубой

9. <body bgcolor="#FF8080">?

1) желтый 2) розовый 3) светло-зеленый 4) светло-синий

10. <body bgcolor="#80FF80">?

1) желтый 2) розовый 3) светло-зеленый 4) светло-синий

11. <body bgcolor="#F20FF2">?

1) фиолетовый 2) серый 3) белый 4) черный

12. <body bgcolor="#747474">?

1) серый 2) белый 3) черный 4) фиолетовый

Результат выполнения работы практической работы 1

Результат выполнения работы практической работы 2

Выводы.

Цвет на Web-страницах кодируется в виде RGB-кода в шестнадцатеричной системе: #RRGGBB, где RR, GG и BB – яркости красного, зеленого и синего, записанные в виде двух шестнадцатеричных цифр; это позволяет закодировать 256 значений от 0 (0016) до 255 (FF16) для каждой составляющей; коды некоторых цветов:

#FFFFFF – белый, #000000 – черный,

#CCCCCC и любой цвет, где R = G = B, – это серый разных яркостей

#FF0000 – красный, #00FF00 – зеленый, #0000FF – синий,

#FFFF00 – желтый, #FF00FF – фиолетовый, #00FFFF – бирюзовый.

Результат выполнения работы практической работы 3:

Выводы: чтобы получить светлый оттенок какого-то базового цвета, нужно одинаково увеличить нулевые составляющие; например, чтобы получить светло-красный цвет, нужно сделать максимальной красную составляющую и, кроме этого, одинаково увеличить остальные – синюю и зеленую;

Результат выполнения работы практической работы 4:

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

Тест

№ вопроса 1 2 3 4 5 6 7 8 9 10 11 12
№ ответа 2 4 3 2 4 1 3 4 2 3 1 1

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

Источники заданий: Учебник, Н.Д. Угринович “Информатика и ИКТ”, профильный уровень, 11 кл.; демонстрационные варианты ЕГЭ 2004-2011 гг.