Это — старая версия документа!


Кодирование графической информации

Процесс ознакомления учащихся с понятием информации можно условно разделить на следующие этапы:

  1. Введение понятия графики. Векторная и растровая графика.
  2. Кодирование графической информации.
  3. Методы кодирования цвета.
  4. Использование графического редактора Adobe Photoshop для кодирования информации.

1. Знакомство в новым материалом. Просмотр презентации.презентации на тему: Работа с графикой
Обсуждение просмотренного материала.

2. Векторная и растровая графика.
Компьютерная графика в целом.

Задание: запись основных определений. Определение разницы между растровой и векторной графикой.

3. Растровое кодирование графической информации
Кодирование графических данных
Кодирование цвета

- цветные изображения
- черно-белые изображения

Задание: Растровое кодирование графической информации (задания)

Ресурсы

Задания

Проект "Создание сайта"

8 класс

Учитель: Низовцева Мария Дмитриевна

Образовательное учреждение: ГОУ Гимназия № 209 Центрального района

Учебно-методический комплекс:

«Информатика-базовый курс», 8 класс, Семакин И., Залогова Л., Русаков С., Шестакова Л., БИНОМ, 2008

Создание сайта.

  1. Обработка информации
  2. Структура HTML-документа
  3. Вставка рисунков и гиперссылок
  4. Оформление документа. Каскадные таблицы стилей
  5. Группирование элементов. Позиционирование блоков
  6. Подведение итогов

Урок 1. Обработка информации

Тип урока: комбинированный, практико-ориентированный.

Цели урока

Научить обрабатывать информацию. Дать представление о структуре документа.

Ход урока

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

Изучение нового материала

Прежде чем приступать к изучению темы, необходимо дать учащимся понятие о структурировании документов. Для примера приводится текст в формате .doc и тот же текст в формате HTML, без разметки. Объясняется необходимость использования разметки в HTML-документе.

Задание: Выбрать тему, найти информацию и структурировать ее в редакторе MS Word для дальнейшей работы. Предложение темы (поиск в интернете или на выбор):

  • Современные направления в танцах
  • Современные направления в музыке
  • Современная культура

Структурирование информации:

  • Разбиение на страницы
  • Проработка меню
  • Проработка структуры
  • Оформление в MS Word


Урок 2. Структура HTML-документа

Тип урока: комбинированный, практико-ориентированный.

Цели урока

Дать понятие html-документа.
Дать основные теги разметки html-документа.
Научить создавать и сохранять простейший html-документ.

Ход урока

Организационный момент. Проверка оформленного текста по сайту.

Понятие HTML

HTML — это теговый язык разметки документов. Любой документ на языке HTML представляет собой набор элементов, причём начало и конец каждого элемента обозначается специальными пометками — тегами. Элементы могут быть пустыми, то есть не содержащими никакого текста и других данных (например, тег перевода строки <br>). В этом случае обычно не указывается закрывающий тег. Кроме того, элементы могут иметь атрибуты, определяющие какие-либо их свойства (например, размер шрифта для элемента font). Атрибуты указываются в открывающем теге.

HTML это сокращение от «HyperText Mark-up Language/язык гипертекстовой разметки» - и на данном этапе этого знания вам вполне достаточно. Однако, чтобы всё было путём, давайте разъясним некоторые детали.

  • Hyper противоположно linear/построчно. В добрые старые времена - когда кошки ловили мышей - компьютерные программы работали построчно: программа выполняла одну строку, затем переходила к выполнению следующей, и т. д. Но HTML работает по-иному - вы можете перейти куда и когда захотите. Например, не нужно посещать MSN.com до того, как посетить HTML.net.
  • Text - всё понятно.
  • Mark-up - это разметка, то, что вы делаете с текстом. Вы размечаете текст так же, как вы делаете это в текстовых редакторах: выставляете заголовки, списки, выделяете текст жирным шрифтом и т. д.
  • Language это язык - HTML. В нём используется много английских слов.

Структура документы web-страницы.

Оформление HTML-документа начинается с основных тегов:

<html>
           <head>
           </head>
           <body>
           </body>
</html>

Задание: создайте свою первую web-страницу.

html-теги

Учебник по html

Задание: Подготовленные текст оформить в виде html-документа. Абзацы отделить тегом <p>, переход между строками внутри абзаца тегом <br>, жирный и курсив соответствующими тегами, выделить списки и заголовки.


Урок 3. Вставка рисунков и гиперссылок.

Тип урока: комбинированный, практико-ориентированный.

Цели урока

Научить вставлять в html-документ изображения.
Научить вставлять в html-документ гиперссылки.
Научить какие типы избражений возможно вставлять в html-документ.
Объяснить разницу в форматах изображений.

Ход урока

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

Проверка шаблона страницы.

Новый материал.
Теги для вставки рисунков.
Вставка ссылок

Задание. Вставить картинки и гиперссылки в документ.

Урок 4. Оформление документа

Тип урока: комбинированный, практико-ориентированный.

Ход урока

Организационный момент. Введение новых понятий.

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

HTML может (неправильно) использоваться для оформления web-сайтов. Но CSS предоставляет бóльшие возможности и более точен и проработан. CSS, на сегодняшний день, поддерживается всеми браузерами (программами просмотра).

CSS можно включать в HTML четырьмя способами:

  • Лишь ссылка в HTML, а сами CSS в отдельном файле (наиболее предпочтителен):

<link rel=«stylesheet» type=«text/css» href=«style.css»>

  • Еще один способ подключить CSS, находящиеся в отдельном файле:

<style type=«text/css» media=«all»>@import «style.css»;</style>

  • Непосредственно в HTML-документе:

<style type=«text/css»> body {color: red;} </style>

  • Непосредственно в элемент:

<p style=«font-size: 21px; color: green;»>Рассказ о том, как вредно красить батареи</p>

Как работает css.

Каскадные таблицы стилей css.
Учебник по css

Практическое задание 1. Применение стилей css в документе.

Задание 2. Примените стили к вашему документу в соотвествии с вашими пожеланиями.

Урок 5. Группирование элементов. Позиционирование блоков.

Тип урока: комбинированный, практико-ориентированный.

Ход урока

Введение новых понятий.
Группирование элементов (span и div)

Элемент <span> можно назвать нейтральным элементом, который ничего не добавляет к содержимому документа. Но, в сочетании с CSS, <span> может использоваться для визуальных эффектов применимо к отдельным блокам текста.
В то время как <span> используется в элементах уровня блока, как в предыдущем примере, <div> применяется для группирования одного или более блок-элементов.
Кроме этого отличия, группирование с помощью <div> работает более или менее аналогично.

Блоки могут располагаться не только друг за другом, но и в любом месте вашего документа, в зависимости от того, какие параметры вы им зададите.

Стандартная разметка сайта состоит из 3 колонок. Пример. Посмотрим как организован код. В теге <head> мы задаем параметры для элемента div, при этом для каждого блока мы вводим свое название. Далее в самом документе перед началом определенного блока мы вводим элемент div с соответсвующим названием блока, например: <div id=«header»>.

Попробуем изменить внешний вид нашего документа по примеру: Пример

Таким образом для каждого блока можно задать и шрифт, и фон, и положение.

Задание. Разбейте свой документ на следующие блоки:

  1. левый блок: меню
  2. в центре основной блок с текстом
  3. правый блок: основная мысль по содержанию страницы

Урок 6. Подведение итогов.

Защита проектов.

Тест по теме «Основы HTML»
Тест по css

Подведение итогов.

Полезные ссылки

 
metodika_prepodavanija_kursa_informatiki_2008/nizovceva_marija_dmitrievna.1240821520.txt.gz · Последние изменения: 2009/04/27 12:38 От nizovtseva
 
За исключением случаев, когда указано иное, содержимое этой вики предоставляется на условиях следующей лицензии:CC Attribution-Noncommercial-Share Alike 3.0 Unported
Recent changes RSS feed Donate Powered by PHP Valid XHTML 1.0 Valid CSS Driven by DokuWiki