Кодирование графической информации Процесс ознакомления учащихся с понятием информации можно условно разделить на следующие этапы: - Введение понятия графики. Векторная и растровая графика.\\ - Кодирование графической информации.\\ - Методы кодирования цвета.\\ - Использование графического редактора Adobe Photoshop для кодирования информации.\\ 1. Знакомство в новым материалом. Просмотр презентации.[[http://school-collection.edu.ru/catalog/rubr/62179c51-6025-497a-ab4c-4ca86e6bfe78/114399/?interface=pupil&class[]=42&class[]=43&class[]=44&class[]=45&subject=19|презентации на тему: Работа с графикой]] \\ **Обсуждение просмотренного материала.** 2. Векторная и растровая графика. \\ [[http://ru.wikipedia.org/wiki/2D-%D0%B3%D1%80%D0%B0%D1%84%D0%B8%D0%BA%D0%B0#.D0.94.D0.B2.D1.83.D0.BC.D0.B5.D1.80.D0.BD.D0.B0.D1.8F_.D0.B3.D1.80.D0.B0.D1.84.D0.B8.D0.BA.D0.B0|Компьютерная графика в целом.]] **Задание: запись основных определений. Определение разницы между растровой и векторной графикой.** 3. Растровое кодирование графической информации \\ [[http://www.mkgt.ru/lib/sp230103/rsoi/intr/M1/p2_2_7.htm|Кодирование графических данных]] \\ [[http://karabash-school.narod.ru/Frame/Metod/vvs24.htm|Кодирование цвета]] - цветные изображения \\ - черно-белые изображения \\ **Задание:** [[http://festival.1september.ru/articles/508762/|Растровое кодирование графической информации (задания)]] === Ресурсы === [[http://school-collection.edu.ru/catalog/rubr/62179c51-6025-497a-ab4c-4ca86e6bfe78/114399/?interface=pupil&class[]=42&class[]=43&class[]=44&class[]=45&subject=19|презентации на тему: Работа с графикой]] [[http://www.render.ru/books/index.php?book_cat=19|Уроки Adobe Photoshop]] [[http://www.metod-kopilka.ru/arch/prez/graf/comp_graf.zip|презентации "Компьютерная графика"]] [[http://www.metod-kopilka.ru/arch/prez/graf/cvet_v_grafike.zip|презентация "Цвет в компьютерной графике"]] === Задания === [[http://cerawa.narod.ru/tasks.html|Задания по компьютерной графике]] [[http://infoschool.narod.ru/Fhotoshopbook/panel_instr.htm|Изучение панели инструментов]] \\ ====== Проект "Создание сайта" ====== 8 класс Учитель: Низовцева Мария Дмитриевна Образовательное учреждение: ГОУ Гимназия № 209 Центрального района == Учебно-методический комплекс: == «Информатика-базовый курс», 8 класс, Семакин И., Залогова Л., Русаков С., Шестакова Л., БИНОМ, 2008 **Создание сайта.** - Обработка информации - Структура HTML-документа - Вставка рисунков и гиперссылок - Оформление документа. Каскадные таблицы стилей - Группирование элементов. Позиционирование блоков - Подведение итогов ==== Урок 1. Обработка информации ==== Тип урока: комбинированный, практико-ориентированный. === Цели урока === Научить обрабатывать информацию. Дать представление о структуре документа. === Ход урока === Организационный момент Изучение нового материала Прежде чем приступать к изучению темы, необходимо дать учащимся понятие о структурировании документов. Для примера приводится {{:metodika_prepodavanija_kursa_informatiki_2008:css.doc|текст в формате .doc}} и тот же {{:metodika_prepodavanija_kursa_informatiki_2008:css.zip|текст в формате HTML}}, без разметки. Объясняется необходимость использования разметки в HTML-документе. Задание: Выбрать тему, найти информацию и структурировать ее в редакторе MS Word для дальнейшей работы. Предложение темы (поиск в интернете или на выбор): * Современные направления в танцах * Современные направления в музыке * Современная культура Структурирование информации: * Разбиение на страницы * Проработка меню * Проработка структуры * Оформление в MS Word \\ ==== Урок 2. Структура HTML-документа ==== Тип урока: комбинированный, практико-ориентированный. === Цели урока === Дать понятие html-документа.\\ Дать основные теги разметки html-документа.\\ Научить создавать и сохранять простейший html-документ. === Ход урока === Организационный момент. Проверка оформленного текста по сайту. **Понятие HTML** HTML — это теговый язык разметки документов. Любой документ на языке HTML представляет собой набор элементов, причём начало и конец каждого элемента обозначается специальными пометками — тегами. Элементы могут быть пустыми, то есть не содержащими никакого текста и других данных (например, тег перевода строки
). В этом случае обычно не указывается закрывающий тег. Кроме того, элементы могут иметь атрибуты, определяющие какие-либо их свойства (например, размер шрифта для элемента font). Атрибуты указываются в открывающем теге. HTML это сокращение от "HyperText Mark-up Language/язык гипертекстовой разметки" - и на данном этапе этого знания вам вполне достаточно. Однако, чтобы всё было путём, давайте разъясним некоторые детали. * Hyper противоположно linear/построчно. В добрые старые времена - когда кошки ловили мышей - компьютерные программы работали построчно: программа выполняла одну строку, затем переходила к выполнению следующей, и т. д. Но HTML работает по-иному - вы можете перейти куда и когда захотите. Например, не нужно посещать MSN.com до того, как посетить HTML.net. * Text - всё понятно. * Mark-up - это разметка, то, что вы делаете с текстом. Вы размечаете текст так же, как вы делаете это в текстовых редакторах: выставляете заголовки, списки, выделяете текст жирным шрифтом и т. д. * Language это язык - HTML. В нём используется много английских слов. **Структура документы web-страницы.** Оформление HTML-документа начинается с основных тегов: Задание: {{:metodika_prepodavanija_kursa_informatiki_2008:myfirst.doc|создайте свою первую web-страницу}}. **html-теги** [[http://ru.html.net/tutorials/html/ | Учебник по html]]\\ Задание: Подготовленные текст оформить в виде html-документа. Абзацы отделить тегом

, переход между строками внутри абзаца тегом
, жирный и курсив соответствующими тегами, выделить списки и заголовки. \\ ==== Урок 3. Вставка рисунков и гиперссылок.==== Тип урока: комбинированный, практико-ориентированный. === Цели урока === Научить вставлять в html-документ изображения.\\ Научить вставлять в html-документ гиперссылки.\\ Научить какие типы избражений возможно вставлять в html-документ.\\ Объяснить разницу в форматах изображений. === Ход урока === Организационный момент. Проверка шаблона страницы. Новый материал. \\ [[http://ru.html.net/tutorials/html/lesson9.asp | Теги для вставки рисунков.]]\\ [[http://ru.html.net/tutorials/html/lesson8.asp | Вставка ссылок]] Задание. {{:metodika_prepodavanija_kursa_informatiki_2008:links.doc|Вставить картинки и гиперссылки в документ.}} ==== Урок 4. Оформление документа ==== Тип урока: комбинированный, практико-ориентированный. === Ход урока === Организационный момент. Введение новых понятий. **CSS** это язык стилей, определяющий отображение HTML-документов. Например, CSS работает с шрифтами, цветом, полями, строками, высотой, шириной, фоновыми изображениями, позиционированием элементов и многими другими вещами. Потерпите, и увидите! HTML может (неправильно) использоваться для оформления web-сайтов. Но CSS предоставляет бóльшие возможности и более точен и проработан. CSS, на сегодняшний день, поддерживается всеми браузерами (программами просмотра). **CSS можно включать в HTML четырьмя способами:** * Лишь ссылка в HTML, а сами CSS в отдельном файле (наиболее предпочтителен): * Еще один способ подключить CSS, находящиеся в отдельном файле: * Непосредственно в HTML-документе: * Непосредственно в элемент:

Рассказ о том, как вредно красить батареи

**[[http://ru.html.net/tutorials/css/lesson2.asp | Как работает css. ]]** {{:metodika_prepodavanija_kursa_informatiki_2008:figure001.png|}} Каскадные таблицы стилей css.\\ [[http://ru.html.net/tutorials/css/ | Учебник по css]]\\ Практическое задание 1. {{:metodika_prepodavanija_kursa_informatiki_2008:css3.zip | Применение стилей css в документе.}} Задание 2. Примените стили к вашему документу в соотвествии с вашими пожеланиями. ==== Урок 5. Группирование элементов. Позиционирование блоков. ==== Тип урока: комбинированный, практико-ориентированный. === Ход урока === Введение новых понятий. \\ [[http://ru.html.net/tutorials/css/lesson8.asp | Группирование элементов (span и div)]] Элемент можно назвать нейтральным элементом, который ничего не добавляет к содержимому документа. Но, в сочетании с CSS, может использоваться для визуальных эффектов применимо к отдельным блокам текста.\\ В то время как используется в элементах уровня блока, как в предыдущем примере,
применяется для группирования одного или более блок-элементов.\\ Кроме этого отличия, группирование с помощью
работает более или менее аналогично. Блоки могут располагаться не только друг за другом, но и в любом месте вашего документа, в зависимости от того, какие параметры вы им зададите. Стандартная разметка сайта состоит из 3 колонок. {{:metodika_prepodavanija_kursa_informatiki_2008:3css.zip|Пример.}} Посмотрим как организован код. В теге мы задаем параметры для элемента div, при этом для каждого блока мы вводим свое название. Далее в самом документе перед началом определенного блока мы вводим элемент div с соответсвующим названием блока, например: