Возможности редактора MS Front Page в создании Web – страниц различного характера

Тема: Возможности редактора MS Front Page в создании Web – страниц различного характера.

Цель урока:

Научить учащихся закреплять и систематизировать полученные теоретические знания по созданию Web-страниц  с помощью редактора MS FrontPage;

Научить применять полученные знания и умения в практической деятельности, самостоятельной работе с  программными средствами;

Развивать внимание, логическое мышление, мелкую моторику рук, зрительное восприятие и память;

Воспитывать интерес к информатике, индивидуальное творчество.

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

Межпредметная связь: производственное обучение, моделирование.

Форма проведения: индивидуальная.

Тип урока: нетрадиционный (интегрированный)

Место проведения занятия: кабинет информатики.

Оборудование и средства обучения:

1. Персональные компьютеры

2. Видеопроектор

3. Интерактивная доска

4. MS Front Page

Квалификационные требования к знаниям и умениям студентов

Должны знать:

1) возможности программы MS OfficeFrontPage

2) методы и способы создания Web-страниц

Должны уметь:

1) загружать компьютерные программы

2) редактировать шрифты, вставлять рисунки, таблицы

3) сохранять файлы

4) пользоваться браузером

5) создавать гиперссылки для связи web-страниц

6) вставлять динамические объекты

Ход урока

1. Организационный момент (приветствие, проверка готовности аудитории, настрой на позитив).

2. Сообщение темы и целей урока.

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

Результатом практической работы будут созданные вами Web-страницы с помощью редактора MS Office FrontPage, образец которой вы видите на экране доски.

1. Актуализация опорных знаний

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

1) Что же такое гиперссылка? (Это текстовая строка или графический объект, позволяющий перейти на другой документ или к части его)

• Согласны ли вы?  Как вы считаете, полное ли определение?

2) В каких документах или программах используются гиперссылки? Назовите примеры (Word, Excel, Power Point)

-   Да, верно, в разных документах и программах используются гиперссылки. А уж в интернет-страницах – это основной и обязательный элемент для связи страниц.

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

Прикладная программа FrontPage – это визуальный html-редактор для быстрого создания сайта.  Язык HTML является основным языком программирования Web - среды. С помощью FrontPage, можно создавать структуру сайта, формировать страницы, добавлять интерактивные средства и загружать файлы на  сервер в сети Интернет.

FrontPage позволяет довольно просто набрать текст, который можно поместить на Web - страницу, расположить в нужных местах рисунки.

На каждом сайте существует одна Web-страница, которая называется главной или домашней. Домашняя страница – первая Web-страница, на которую попадает посетитель сайта. Используя навигацию или гиперссылки, пользователи смогут попасть и на другие страницы сайта.

После запуска программы FrontPage (Пуск – программы – FrontPage) на экране появится окно программы, в котором отображается новая страница (нов_стр_1.htm). В области задач отображается панель Приступая к работе.

Окно прикладной программы FrontPage состоит: из строки заголовка, строки меню, панелей инструментов редактирования и форматирования, кнопок быстрого выбора тега (для редактирования и ввода тегов), ярлычков вкладок выбора страниц (для перехода между страницами), рабочего окна, в котором отображается новая страница, панели рисования, кнопок режимов просмотра, индикатора ожидаемого времени загрузки страниц при скорости 56 кбит/с, индикатора размера страниц, области задач.
В программе FrontPage можно пользоваться одним из четырех режимов просмотра: "Конструктор", "Код", "С разделением" и "Просмотр". В режиме "Конструктора" как в любом текстовом редакторе можно в визуальном режиме создавать, редактировать и форматировать страницу, т.е. вводить текст, добавлять рисунки, таблицы. При этом теги языка HTML автоматически добавляются в фоновом режиме, но кодировка HTML на экране не отображается.

В режиме "Код" на экране будет отображаться вся кодировка и можно напрямую редактировать код HTML, а также вводить новые коды. На рисунке представлен HTML – код новой пустой страницы в редакторе FrontPage .

1. Практическая работа

Создание новой пустой Web-страницы

Для создания новой пустой страницы необходимо выполнить команду Файл/Создать и выбрать в области задач Пустая страница. В окне приложения появится пустая страница. Далее необходимо осуществить разработку страницы, т.е. выполнить разметку (структуру) страницы, ввести текст, рисунки и т.д. 

Создайте на рабочем столе папку и придумайте ей название. Туда вы будете сохранять свои страницы. Сохраните следующим образом: Файл – Сохранить как – Главная.

Мы с вами создали 1 страницу, повторив те же действия, создайте вторую страницу. Вторую страницу сохраните под именем «Материал».

Для вставки темы нашей страницы нужно сделать следующие действия: Формат – Тема. В правой части экрана выбираем тему, которая вам понравилась.

Те же действия проделываем и со второй страницей.

Для вставки рисунка выполняем следующие действия: Вставка –Рисунок – Из файла.

Задание: используя слова – помощники, придумайте название своего ателье, проведите рекламную акцию своего продукта.

Слова – помощники для названия ателье: Шик, Блеск, Стиль, Силуэт, и.т.д.

Для вставки меняющейся кнопки нужно выполнить следующую последовательность: Вставка – Меняющаяся кнопка.

Выбрать наиболее подходящий вам вариант.

В поле текст написать какое название будет носить наша кнопка, например: модели.

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

Сохраняем внедренные файлы.

На второй странице мы размещаем ассортимент товара.

Подписываем название нашего товара, размеры и его стоимость.

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

В открывшемся окне выбираем страницу с которой нам нужно связать, в данном случае она называется « Главная», и нажимаем ок. Таким образом у нас получилась гиперссылка.

Для того чтобы нам сохранить работу, нужно выполнить следующую последовательность действий: Файл – Сохранить как – Открыть – Сохранить.

Созданный сайт мы можем просмотреть с помощью программы Internet Explorer.

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

2. Подведение итогов урока. Рефлексия.

12