Создание проекта "50 лет космонавтики России"

Павлова Любовь Кузьминична

“Разработка Web-страницы с использованием возможностей программ Adobe PhotoShop CS и MS PowerPoint 2003”

Используемые материалы:

класс, оборудованный ПК;
текстовый редактор Блокнот;
файлы изображений;
распечатки заданий;
Adobe PhotoShop CS;
MS PowerPoint 2003;
презентация созданная в MS PowerPoint 2003.

Цели: закрепление практических навыков работы с инструментами программ формирование знаний, умений и навыки работы в программах, приобретение знаний о развитии Космонавтики в России, воспитание патриотизма

Образовательные:

приобрести начальные навыки создания простейших Internet-документов с использованием информационных технологий;
научиться выполнять форматирование созданных Web-страниц.
использовать полученные знания в работе с программой Adobe PhotoShop по созданию коллажа,

Воспитательные: воспитание информационной культуры учащихся, внимательности, аккуратности, дисциплинированности, усидчивости;

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

Развивающие: развивать наглядно-образное мышление, память и умение сравнивать и анализировать

Тип занятия: комбинированный.

Технические средства: компьютеры IBM/PC.

Программное обеспечение: операционная система WINDOWS ХР, программа Блокнот, программs Adobe PhotoShop CS и MS PowerPoint 2003, браузер Internet Explorer.

Примечание: студенты имеют первоначальные знания и практику работы в программах - Блокнот, Adobe PhotoShop CS и MS PowerPoint 2003.

План урока:

Организационная часть.
Теоретическая часть.

III. Выполнение лабораторно-практической работы:

3.1. План выполнения лабораторно-практической работы:

3.11. Подбор материала из Интернет.

3.12. Создание коллажа в Adobe PhotoShop CS по выбранной теме.

3.13.Создание слайда по выбранной теме.

3.14. Создание презентации по выбранной теме.

3.15. Создание Web-страницы

3.2. Технология выполнение лабораторно-практической работы.

IV.Итоги урока.

I. Организационная часть

Студентам группы ставится задача – Создание Web-страницы на тему “50 лет Космонавтики РОССИИ”

Краткая справка в форме диалога со студентами о первом полете советского человека в космос и создателях первых космических кораблей.

История развития Космонавтики в России. Мировое значение полета первого человека в космос. Гордость за русскую науку.

Каждому студенту предлагается выбрать и подобрать материал из Интернет по одному из ученых и конструкторов, создателей первых космических кораблей. Приложение 1 .

Предлагается студентам план выполнения работы:

I. Подбирается материал (рисунки и текст) по выбранной теме

II.Создание коллажа

III.Создание слайда

IV. Создание презентации

V.Создание Web-страницы

II. Теоретическая часть

Создание коллажа в MS Photoshop CS:

Инструменты выделения:

– прямоугольное выделение;
– круговое выделение;
– движение выделенного фрагмента
– лассо;
– многоугольное лассо;
– магнитное лассо.

Создание нового листа заданного размера.
Копирование выделенного фрагмента изображения на новый лист.

Создание Web-страницы:

Web страница – это средство представления информации в Интернете. Информация может быть представлена в виде текстов, рисунков, аудио и видеоклипов.

- HTML (Hyper Text Markup Language) означает язык разметки гипертекста. Этот язык был разработан Тимом Бернерсом-Ли в рамках создания проекта распределенной гипертекстовой системы, которую он назвал World Wide Web (WWW) или Всемирная паутина. HTM, предназначен для написания гипертекстовых документов, публикуемых в World Wide Web.

- Документы HTML являются обычными текстовыми файлами, содержащими специальные теги (или управляющие элементы) разметки. Теги разметки указывают браузеру Web (программе пользователя для отображения web-страниц, например, Internet Explorer, Mozilla, Netscape или Opera), как надо вывести страницу.

Файлы HTML обычно имеют расширения htm или html. Их можно создавать при помощи любого текстового редактора, например, Блокнота.

Язык HTML (HyperText Markup Language, язык разметки гипертекста) – это язык, на котором создаются Web-страницы. HTML-документы могут просматриваться различными типами Web-браузеров. Когда документ создан с использованием HTML,

Кроме полезного текста в HTML-документах используются специальные управляющие последовательности символов – тэги.

Чаще всего тэги используются попарно, окружая размеченные фрагменты текста. Сами тэги можно набирать на любом регистре. Зачастую параметр (атрибут) является необязательной величиной и его можно пропускать.

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

Каждая HTML-страница начинается тегом начала HTML-страницы <html> и заканчивается тегом её закрытия </html>.

HTML страница состоит из двух частей:

Невидимой части (<head>…</head> ) – в ней расположены заголовок, метатеги, скрипты, подключение стилей.
Видимая часть (<body>…</body>) – в которой расположены непосредственно элементы веб-страницы: абзацы, таблицы, рисунки и т.д.

Структура HTML документа

html>

<head>
Невидимые части– в ней расположены заголовок, скрипты, метатеги, подключение стилей.

</head>

<body>

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

</body>

< /html>

Фоновое изображение графики на Web-странице

Фоновое изображение – это графический файл с изображением небольшой прямоугольной плашки. При просмотре в броузере эта плашка многократно повторяется, заполняя все окно, независимо от его размеров.

Графика, используемая в качестве фоновой, задается в тэге <BODY> в начале файла HTML.

Примечание

Всегда обращайте внимание на размеры (объем в байтах) своего графического файла, т.к. это влияет на время загрузки Web-страницы.

Оформление заголовка:

Существует два способа управления размером текста, изображаемого браузером:

использование стилей заголовка,
задание размера основного документа или размера текущего шрифта (от 1 до 7).

Используется шесть тэгов заголовков (от Н1 до Н6). Каждому тэгу соответствует конкретный стиль, заданный в параметрах настройки браузера. Стиль Н1 – самый крупный.

Тэг <FONT> предоставляет возможности управления размером, начертанием и цветом текста. Изменение гарнитуры шрифта выполняется простым добавлением к тэгу <FONT> атрибута FACE. Например, для изображения текста шрифтом Arial необходимо записать <FONT FACE="ARIAL">.

Для изменения цвета шрифта в тэге <FONT> можно использовать атрибут COLOR=" white” (белый).

Вставка рисунка в Web-страницу:

Тэг <IMG …> позволяет вставить изображение в документ. Изображение появится в том месте документа, в котором записан этот тэг. Команда записывается с одиночным тэгом, т.е. закрывающий тэг не применяется.
Графика в Web, как правило, распространяется в трех форматах: GIF, JPG, PNG.

Тэг <IMG …> имеет немало атрибутов, которые можно задавать дополнительно. Они могут располагаться где угодно в тэге после кода IMG.

III. Выполнение лабораторно-практической работы

3.1. План выполнения лабораторно-практической работы:

Примечание

Студенты для работы над проектом выбирают из папки преподавателя “Ученые и инженеры освоения Космоса” фамилии ученых или конструкторов, внесших огромный вклад в освоение космоса Приложение 1

3.11 Подбор материала из Интернета:

Создать папку на ПК под своей фамилией

Подобрать материала из Интернета по выбранному ученому

портрет ученого,
его вклад в создание космических кораблей,
несколько рисунков для коллажа на космическую тему.

Подобрать два рисунка из Интернет для оформления Web –страницы на тему – Ученые и конструкторы космических кораблей и Первый отряд космонавтов.

Сохранить подобранный материал в своей папке Приложения.

3.12 Создание коллажа в Fotoshop CS по выбранной теме:

создание коллажа, используя найденные рисунки - Приложение 2,
сохранение коллаж в своей папке под именем выбранного ученого или инженера Приложение 3

Редактирование и форматирование текста - комментария для коллажа
Сохранение комментария к коллажу в MS Word

Приложение 4

Рисунок коллажа вставляется в Документ 1 Приложение 5

Документ 1 проверяется, редактируется и форматируется, если необходимо – вносятся изменения

3.13. Создание слайда по выбранной теме:

Примечание:

Предполагается, что студенты хорошо знакомы с работой программы PowerPoint 2003, поэтому технология работы по созданию слайдов и презентации здесь не рассматривается.

создается слайд в PowerPoint 2003 Приложение 6

3.14. Создание презентации по выбранной теме

создание презентации из нескольких слайдов Приложение 7

Таким образом, в папке под фамилией студента имеем:

1. рисунки из Интернет:

- два рисунка для Web-страницы - ( .jpeg ),

- рисунок – коллаж,

2. Документ 1: коллаж и текст к нему

3. Презентация

3.15. Создание Web-страницы

Приложение 8

3.2. Технология выполнение лабораторно-практической работы

Создание коллажа в Adobe Photoshop CS.

Алгоритм работы:

Создать новый белый лист.
Открыть файлы, выбранных рисунков для коллажа из Интернет
Выделять объекты любым инструментом выделения.
Копировать их на созданный чистый лист.
Создать рисунок из фрагментов предложенных рисунков.
Сохранить коллаж в своей папке.
Дать своему коллажу содержательное название.

Создание Web-страницы.

Алгоритм работы:

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

- фоновый рисунок 584336 1600 1200.jpeg,

- два рисунка для Web-страницы - ( .jpeg ),

- презентация

Откройте программу Блокнот.
Создайте структуру HTML документа (рис.1 в Теоретической части)
Внесите название Вашей страницы – 50 лет Космонавтики РОССИИ и создайте фоновый рисунок 584336 1600 1200.jpeg:

<html>

<head>

</head>

<body>

Космонавтики РОССИИ </font></Br></h1>

Сохраните файл в своей папке “Web-страница” . под именем Web.HTM с помощью команд Файл,, Сохранить. Закройте программу Блокнот – при записи имя файла Web.HTM не забудьте переключить Блокнот на типы файлов - Все файлы

Просмотрите с помощью браузера Microsoft Internet Explorer новую, полученную Web-страницу, используя клавишу F5 или с помощью команд Вид, Обновить, или двойного щелчка левой клавиши мышки.
Внесите изменения в файл Web.HTM:

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

Вставляем рисунки для ссылок – Первые космонавты и Ученые и конструкторы.

Вставляем ссылки на презентации.

<html>

<head>

</head>

<body>

Советской космонавтики </font></Br></h1>

<br>

<h3 align=center><font color="white" SIZE="6">Темы проекта </font></h3>

<font color="white" SIZE="6"> Ученые и инженеры</h3></a>

Первые космонавты</font></h3></a>

</body>

</html>

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

<h2 align=center><marquee behavior="alternate" direction="right"><font color=white>Проект выполнили студенты 1-го курса КАИТ №20

Преподаватель Павлова Л.К.</marquee></h2>

Проверяем выполненную страницу – исправляем недочеты.
Презентацию “Ученые и конструкторы” можно дополнить слайдами всех студентов. Приложение 9
Запуск Web- страницы:

Сама Web-страница находится в Приложении, запускающий файл - index.

IV. Подведение итогов занятия.

Просмотреть выполненные задания. Ответить на вопросы студентов.

Заключение

Работа вызывает интерес у студентов и выполняется с большим удовольствием. Данный проект можно использовать для создания работ на другие познавательные интересные темы.

Литература

1. Интернет-Университет Информационных Технологий

http://www.INTUIT.ru

2. http://www.videouroki.net/view_post.php?id=39

Основные понятия. Структура HTML

3.Амочкина В.Г. Дистанционные курсы преподавателя по информатике КАИТ№20

23.02.2012