FrontPage 2003: Создание Web-сайта, проект

Тема: "Создание Web-сайта в программе FrontPage 2003"
Используемый УМК:
 Угринович Н.Д. “Информатика и информационные технологии. 10-
11 классы”.
 “ПРАКТИКУМ по информатике и информационным технологиям”.
 Методическое
пособие для учителя “Преподавание
“Информатика и информационные технологии”.
курса
 Презентация по теме "Создание Web-сайта в программе FrontPage
2003".
 Дидактическая и методическая поддержка: комплект практических
работ, дидактические материалы.
 Технической поддержкой служат персональные компьютеры с
установленным пакетом офисных программ Microsoft Office 2003.
Вид урока: урок c проектной деятельностью, на основе знаний полученных в
ходе подготовки к проекту.
Цель:
Развивающая:
 развитие
образного мышления; развитие чувства психологии
цветового оформления.
Совершенствование учебных умений:
 самостоятельно работать с источниками информации – практическая
работа.
 делать выводы.
Воспитательная:
 воспитание терпимого отношения друг к другу, культуры общения.
Задачи урока:
 повторить пройденный материал по теме «Интернет и WWW»;
 сформировать у учащихся
творческий подход, способность к
самостоятельному и инициативному решению проблем;
 научить использовать типовые инструментально-технологические
средства и эффективно работать в командах, что необходимо для
личностного развития и профессионального самоопределения;
 закрепить навыки создания Web-страниц;
 закрепить навыки структуризации и систематизации информации и
отработать навыки оптимизации информационной деятельности;
 выполнить проектную работу по созданию сайта.
Основные требования к уровню подготовленности учащихся.
Учащиеся должны знать:
 основные возможности Web-редактора FrontPage;
 основные элементы интерфейса, назначение панелей;
 основные команды меню Web-редактора FrontPage;
 назначение навигационной структуры сайта;
учащиеся должны уметь:
 устанавливать
необходимые для работы панели и элементы
интерфейса Web-редактора FrontPage;
 работать с панелями «стандартная», «форматирование» редактора;
 создавать сайт разными способами;
 создавать навигационную структуру сайта;
 оформлять сайт, используя альбом шаблонов оформления.
Формы работы, используемые на уроке:
Для успешного усвоения данного материала применяются индивидуальные
формы обучения с использованием проектного метода для реализации создания
интерактивного пособия.
Данный урок предполагает результат - создание интерактивного пособия по
биологии «Виртуальный зоопарк» средствами Web-редактора FrontPage,
показывающий уровень освоения технологии сайтостроения и полученные
навыки работы с Web-редактором.
Ход урока (40 мин)
I. Организационный момент (1 мин.)
II. Сообщение темы и целей урока (2 мин.)
Тема сегодняшнего урока:
“Создание Web-сайта в программе FrontPage 2003”
Создание сайта - это сложный как с технической, так и с организационной
стороны процесс. Обычно разработка сайтов поручается опытным дизайнерам
и высоко квалифицированным программистам. При создании сайтов
используют самые современные технологии программирования.
Повторим методику создания страниц и способы автоматизации разработки
web-сайтов и выполним проекты по теме: «Виртуальный зоопарк».
III. Актуализация знаний (5 мин)
Разгадывание кроссворда. (Приложение 1)
Ключевое слово кроссворда – дизайнер. Веб-дизайнер – человек,
ответственный за оформление сайта, за способ размещения элементов на Webстранице. Сегодня на уроке вы попробуете себя в этой роли и создадите свой
сайт с помощью Web-редактора.
Повторение пройденного материала. Вопрос классу:
Назначение и основные возможности Microsoft Front Page?
Примерный ответ:
В состав Microsoft Office входят Microsoft Word, Excel, PowerPoint и Access и
др. Microsoft Office — это самый популярный сегодня на рынке пакет офисных
приложений. Весь пакет программ обладает похожим интерфейсом, так что это
очень облегчает наш труд по освоению Frontpage и дает нам непревзойденные
возможности конструирования Web-сайтов.
Рабочее окно программы очень похоже на рабочие окна других программ
входящих в состав Microsoft Office:
 заголовок окна,
 панели,
 область задач,
 рабочая область,
 панель свойств (нижняя строка над панелью рисования).
Как и во всех других программах имеется мощная справочная система, которой
настоятельно рекомендую пользоваться в случаях затруднений.
В зависимости от необходимости способа просмотра страниц и работы с ними
можно использовать один из четырех режимов представления страницы:
a). Конструктор. Веб - страницы можно разрабатывать и редактировать по
умолчанию в режиме Конструктор. Этот режим предоставляет
практически все возможности по изменению формы и содержания
будущего сайта.
b). Код. Позволяет самостоятельно просматривать, записывать и
редактировать теги HTML, также упрощается процедура удаления
ненужного кода.
c). С разделением. Проверять и редактировать содержимое веб-страницы
можно в формате с разделением экрана, предоставляющем
одновременный доступ к режимам Код и Конструктор.
d). Просмотр. Позволяет просматривать внешний вид страницы в вебобозревателе, не сохраняя ее. Этот режим используется для проверки
страницы перед сохранением после внесения небольших вызывающих
сомнения изменений.
Этапы работы:
 Запустить программу Microsoft Front Page.
 Создать новый Web-сайт или открыть уже созданный.
 Организовать структуру Web-сайта в режиме "Навигация".
 Отредактировать страницы Web-сайта в режиме "Страница" (в любом
порядке):
 перейти в режим редактирования конкретной страницы;
 проверить настройки страницы;
 ввести или вставить текст и отформатировать его;
 вставить фон, звуковое сопровождение, общие области, таблицы,
графические изображения, гиперссылки, панели навигации;
 добавить анимационные эффекты и компоненты;
 сохранить страницу и просмотреть ее в браузере Internet Explorer;
 продолжить редактирование или перейти к редактированию другой
страницы.
 Закрыть Microsoft Front Page, открыть Web-сайт в браузере Internet
Explorer и протестировать его.
IV. Подготовка к проектной работе (3 мин.)
Работая над проектом, ученики должны определить цель, задачи, этапы
реализации.
V. Работа в группах (24 мин.)
Данная часть занятия предполагает самостоятельное выполнение практической
работы, используя основные алгоритмы работы с Web-редактором FrontPage и
собранный самостоятельно материал.
VI. Проверка работ (4 мин.)
VII. Подведение итогов (1 мин.)
Приложение 1
Кроссворд:
1. Устройство, согласующее работу компьютера и телефонной сети для
соединения с Интернет.
2. Вредоносная программа, полученная из сети Интернет, которая может
нанести вред компьютеру.
3. Программное средство для просмотра Web-страниц.
4. Каждый компьютер, подключенный к Интернет, получает свой IP - …
5. Единица измерения количества информации.
6. Отдельный документ, имеющий собственный адрес в сети Интернет,
называется Web - ...
7. Популярный российский поисковый указатель.
8. Глобальная информационная система взаимосвязанных компьютеров +
система документов.
1
2
3
4
5
6
7
8
"Создание Web-сайта в программе FrontPage 2003"
Приложение 2
1. Мои документы - Мои веб-узлы создать папку Виртуальный зоопарк.
2. Запустите редактор FrontPage: Пуск - Все программы - Microsoft Office Microsoft FrontPage.
3. Файл – Создать - Одностраничный веб-узел…(панель справа) – Пустой
веб-узел (указать расположение нового веб-узла, открыв папку Виртуальный
зоопарк) – Открыть - ОК.
4. Скопировать в Мои документы - Мои веб-узлы - Images рисунки, которые
будут использоваться при создании сайта.
5. Формат - Тема...
6. Выбрать тему и Применить как тему по умолчанию - Да.
7. Файл – Создать – Пустая страница (панель справа).
8. Файл – Сохранить
–Название (Новая страница 1) – Изменить – (Виртуальный зоопарк) – Ок
–Имя файла: index - Сохранить.
Домашняя страница создана. Можно приступить к созданию других страниц.
9. Файл – Создать – Пустая страница (панель справа).
10. Файл – Сохранить
–Название (Новая страница 1) – Изменить – (например Волк) – Ок
–Имя файла: (например Volk, в имени файла использовать латиницу без
пробелов!!!) -Сохранить.
11. Повторить пункты 6,7 необходимое количество раз для создания новых
страниц.
12. Таблица – Макетные таблицы и ячейки…
Выбрать макет таблицы для каждой страницы.
13.
Вид - Список папок.
Вид – Переходы.
14.В списке папок выберите нужную страницу и
перетащите ее в расположение в структуре переходов. Если панель Список
папок не отображается, то выберите в меню Вид команду Список папок.
15. Сохранить каждую веб-страницу.
16. Для каждой веб-страницы: выбрать щелчком мыши расположение заголовка
страницы и повторить следующую последовательность действий:
Вставка – Веб-компонент – Включенное содержимое – Заголовок
страницы – Готово – Рисунок – Ok.
17. Для каждой веб-страницы: выбрать щелчком мыши расположение панели
ссылок и повторить следующую последовательность действий:
Вставка – Панель ссылок – Панели ссылок –
Панель, основанная на структуре переходов –
Далее – Выбрать стиль панели (Лучше
использовать тему страницы) – Далее – Выбрать
ориентацию – Готово
 Дочерний уровень + Домашняя страница
для домашней страницы;
 Тот же уровень + Домашняя страница для
всех остальных страниц – Ок.
18. Сохранить каждую веб-страницу.
19. Добавить на страницы текст, рисунки (Вставка - Рисунок), фотографии
(Вставка - Веб-компонент – Коллекция фотографий), Гиперссылки (Вставка
– Гиперссылка), бегущая строка (Вставка - Веб-компонент – Динамические
эффекты – Бегущая строка).
20. Сохранить каждую веб-страницу.
21. Файл – Опубликовать узел – Протокол FTP – Расположение (Например,
ftp://ftp.narod.ru). – Ok.
22. Ввести имя и пароль – Ok.
23. В области Удаленный веб-узел, в группе Опубликовать все измененные
страницы выберите команду Локальный на удаленном. Нажмите кнопку
Опубликовать веб-узел.