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

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

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

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

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

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

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

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

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

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

Ресурсы

презентации на тему: Работа с графикой

Уроки Adobe Photoshop

презентации "Компьютерная графика"

презентация "Цвет в компьютерной графике"

Задания

Задания по компьютерной графике

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

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

8 класс

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

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

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

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

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

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

Урок 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 в отдельном файле (наиболее предпочтителен):

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

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

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

<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»>.

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

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

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