МЕТОДИЧЕСКИЕ УКАЗАНИЯ ПО ВЫПОЛНЕНИЮ ПРАКТИЧЕСКОЙ РАБОТЫ ПО ИНФОРМАТИКЕ - Тема: Профессиональная работа с программой MS Front Page.

МЕТОДИЧЕСКИЕ УКАЗАНИЯ ПО ВЫПОЛНЕНИЮ ПРАКТИЧЕСКОЙ РАБОТЫ ПО ИНФОРМАТИКЕ В СПО

Разработал преподаватель: Игнатьева Елена Сергеевна

Тема:

Профессиональная работа с программой MS Front Page.

Цель работы: Научиться технологии создания учебного сайта.

Краткие теоретические сведения.

Умение размещать информацию в глобальной сети Интернет, понимать идеологию сайтостроительства, способность ориентироваться в средствах создания сайтов являются требованием времени. Современный учитель, при разработке электронного учебного пособия должен четко понимать, что такое веб-узел (веб-сайт), веб-страница и  иметь представление о средствах создания сайтов. Примем за основу следующие определения:

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

Веб-страница — составная часть веб-узла (веб-сайта), физически представляющая собой HTML-файл. Веб-страница может содержать текст, изображения, апплеты Java и другие элементы.

Домашняя (главная) страница сайта — первая страница, появляющаяся при  загрузке сайта в окно обозревателя.

Макет веб-сайта — выполненная в едином дизайне с использованием той или иной технологии архитектуры (фреймы, таблицы) и взаимосвязи страниц (гиперссылки, панели переходов) структура сайта, состоящая из файлов-заготовок веб-страниц и подлежащая последующему информационному наполнению и разви­тию.

Веб-редактор — программное средство, предназначенное для разработки веб-сайта.  Веб-сервер — компьютер, специально сконфигурированный для размещения (хо­стинга) веб-сайта и предоставляющий доступ к веб-страницам посетителям сайта.

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

1. Определите тему сайта (например, «Профильное обучение в школе»). Рабо­тая над темой сайта, хорошо продумайте его информационное содержание.

2. Создайте проект сайта, т. е. определите количество, взаимосвязь и тематику web-страниц. Проработайте структуру, общий дизайн сайта и содержание главной страницы. 

3.  Создайте папку для хранения файлов сайта (например, Site), в которой соберите необходимый текстовый и графический материал (необходимо оптимизировать объем и количество графических файлов, предназначенных для размещения на страницах вашего сайта). Не используйте символы русского алфавита в именах тех файлов, которые вы включаете в состав веб-узла, так как многие операционные системы серверов сети Интернет работают только с англоязычными именами.

4. Определите программное средство для создания сайта (например: Блокнот, Adobe Dreamweaver, Microsoft FrontPage  и др.).

5.  Создайте макет сайта (выполните макеты — заготовки страниц, содержащие элементы общего дизайна сайта: логотипы, фоновое оформление и т. п.; обеспечьте взаимосвязь между страницами сайта с помощью кнопочных, текстовых или графических гиперссылок). Необходимо помнить, что хорошо разработанная навигация — важный фактор привлечения к сайту посетителей, а также удобство работы учеников с электронным пособием.

6. Выполните содержательное наполнение созданных макетов веб-страниц.

7. Протестируйте созданный сайт в наиболее распространенных браузерах (на­пример: Internet Explorer,  GoogleChrom,  Mozilla Firefox, Opera и др.).

8. Устраните выявленные при тестировании неточности и ошибки.

9. Опубликуйте сайт в Интернете (например, можно разместить сайт на бес­платных хостингах: http://www.narod.ru, http://holm.ru, http://h1.ru).

10.Зарегистрируйте сайт в популярных поисковых системах (например: www.yandex.ru, www.rambler.ru, www.aport.ru).

Ход работы.

Задание 1

Создайте пустой веб-узел с именем garfield в своей папке.

1.      Создайте в своей папке папку garfield, в которой будет храниться учебный веб-узел.

2.      Запустите приложение FrontPage.

3.      Выберите меню Создать страницу или веб-узел.

4.      На панели Создание веб-страницы или узла в разделе Создание щелкните команде Пустой веб-узел.

5.      В появившемся диалоговом окне Шаблоны веб-узлов выделите значок Пустой веб-узел и щелкните по кнопке Обзор.

6.      В диалоговом окне Место для нового веб-узла найдите папку garfield и щелкните по кнопке Открыть.

7.      Скопируйте в созданную папку images картинки cat, cat1, cat2, cat3, cat4 из папки Рисунки каталога Web-сайты.

8.      Cкопируйте в папку images файл 6.jpg из папки ФОНЫ каталога Web-сайты.

Задание 2

Скопируйте web-страницы из папки maket2 в папку garfield.

1.      Откройте файл zagolov.htm из папки maket2 (меню Файл, команда Открыть).

       Новая страница не является реальной частью веб-узла. пока не будет сохранена как составная часть этого узла!

2.      Меню Файл, команда Сохранить как.

3.      На диалоговой панели Сохранить как найдите  папку garfield и щелкните по кнопке Сохранить.

4.      Меню Файл, команда Закрыть.

5.      Повторяя действия  пунктов 1–4, сохраните в папке garfield файлы 1.htm, 2.htm, 3.htm, menu.htm, avtor.htm, index.htm.

6.      Откройте веб-узел garfield и просмотрите его в обозревателе.

Задание 3

Заполните содержанием страницу узла zagolov.htm.

1.      Откройте файл zagolov.htm из папки garfield в отдельном окне (щелкнуть внутри фрейма правой кнопкой мыши, в контекстном меню выбрать команду Открыть страницу в новом окне).

2.      Cоздайте фон страницы:

·          меню Формат, команда Фон;

·         на открывшейся диалоговой панели Свойства страницы выбрать закладку Фон;

·         поставить флажок в категории Фоновый рисунок;

·         щелкнуть по кнопке Обзор и в диалоговой панели Выбрать фоновый рисунок выбрать файл 6.jpg в файле images папки garfield;

·         щелкнуть по кнопке ОК.

3.      Сохраните изменения и просмотрите страницу в обозревателе.

4.      Вставьте в левый верхний угол страницы логотип — рисунок cat.gif из папки images (меню Вставка, команда Рисунок из файла).

5.      Используя фигурный текст, введите заголовок сайта: Привет! Я —Гарфилд!

6.      Сохраните изменения в файле zagolov.htm.

7.      Просмотрите страницу в обозревателе. Чтобы текст заголовка был полностью виден на экране:

·          выделите текст,

·          щелкните правой кнопкой мыши,

·          выберите в контекстном меню команду Форматировать объект,

·          вкладка Положение,

·         положение абсолютное.

·          перетащите мышью текст в нужное место.

8.      Просмотрите файл index в обозревателе.

9.      Перетащите границу верхнего колонтитула так, чтобы логотип был полностью виден.

10.  Сохраните изменения в файле index.

Задание 3

Заполните содержанием страницу узла 1.htm.

1.      Откройте страницу 1.htm в отдельном окне.

2.      В качестве фона вставьте фон 6.jpg из папки images.

3.      Наберите текст:

Я — вольный Web-дизайнер и создал этот сайт средствами приложения Microsoft FrontPage.

4.      Отформатируйте текст по своему усмотрению.

5.      Сохраните изменения.

6.      Просмотрите файл index в обозревателе.

Задание 4

Создайте коллекцию фотографий на странице 2.htm.

1.      Откройте страницу 2.htm в отдельном окне.

2.      В качестве фона вставьте фон 6.jpg из папки images.

3.      Меню Вставка, команда Веб-компонент.

4.      На диалоговой панели Вставка компонента веб-узла выберите тип компонента — коллекция фотографий, в поле Выберите вариант коллекции фотографий щелкните по кнопке Вертикальная компоновка, щелкните по кнопке Готово.

·         Добавьте в коллекцию фотографий рисунок cat1 из папки images. Для этого на диалоговой панели Свойства коллекции фотографий выберите вкладку Рисунки:

·         щелкните по кнопке Добавить, Рисунки из файлов;

·         в открывшемся диалоговом окне выделите рисунок cat1 и щелкните по кнопке Открыть;

·         установите флажок Использовать другие параметры шрифта и в поле Подпись введите текст (придумайте свою подпись и отформатируйте по своему усмотрению).

5.      Таким же образом добавьте в коллекцию рисунки cat2, cat3, cat4.

6.      Выберите вкладку Макет и установите Число рисунков в строке 2, формат — Вертикальная компоновка.

7.      Сохраните изменения и просмотрите страницу в обозревателе.

8.      Перейдите на страницу index, откройте ее в обозревателе и перейдите по ссылке на вторую страницу.

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

·         щелкните внутри основной  рамки правой клавишей мыши и выберите команду Свойства рамки;

·         выберите в раскрывающемся списке Полосы прокрутки значение при необходимости и нажмите ОК.

10.   Просмотрите изменения в обозревателе.

11.  Щелкните на панели представлений кнопку папки, в списке папок появилась новая папка — photogallery.

12.  Перейдите к режиму просмотра страниц (кнопка Страница).

Задание 5

Создайте на странице 3.htm анкету для посетителей.

1.      Меню Файл, команда Создать страницу или веб-узел.

2.      На панели Создание страницы в разделе Создание с помощью шаблона выбрать Шаблоны страниц.

3.      На диалоговой панели Шаблоны страниц на вкладке Общие выделить значок Мастер страницы формы и щелкнуть ОК.

4.      На диалоговой панели Мастер страницы формы щелкнуть по кнопке Добавить.

5.      В разделе Выберите тип данных для ответа на этот вопрос выделите личные данные и щелкните по кнопке Далее.

6.      В разделе ТИП ВХОДНЫХ ДАННЫХ установите флажки:

·         имя, фамилия, отчество;

·         число полных лет;

·         пол;

·         нажмите кнопку Далее.

7.      Щелкните по копке Добавить и выберите категорию Абзац.

8.      Измените приглашение вопроса: Что вы думаете о сайте?  и щелкните по кнопке Далее.

9.      Введите имя переменной для хранения введенного значения: text и щелкните по кнопке Далее.

10.  Нажмите на кнопку Готово.

11.  Наберите заголовок страницы (вместо Новая страница 1) Давайте познакомимся…

12.  Текст Место для объяснения назначения формы… удалите.

13.  Введите произвольные сведения об обладателе авторских прав.

14.  Добавьте фон страницы 6.jpg из папки images.

15.  Отформатируйте текст формы по своему усмотрению.

16.  Сохраните данную страницу под именем Анкета в файле 3.htm в папке garfield (на запрос о замене файла 3.htm ответить «да»).

17.  Просмотреть файл index в обозревателе.

Задание 6

Отформатируйте страницу avtor.htm.

1.      Откройте страницу avtor.htm в отдельном окне.

2.      В качестве фона вставьте фон 6.jpg из папки images.

3.      Щелкните по гиперрсылке правой кнопкой мыши.

4.      Выберите команду Свойства гиперссылки.

5.      На диалоговой панели Изменение гиперссылки:

·         измените текст: Написать письмо;

·         щелкните по кнопке Стиль…;

·         на диалоговой панели Изменение стиля щелкните по кнопке Формат и в раскрывающемся списке выберите Шрифт;

·         установите нужные вам параметры и щелкните по кнопке ОК;

6.      Сохраните изменения в файле avtor.htm и просмотрите изменения в обозревателе.

Задание 7

Отформатируйте страницу menu.htm.

1.      Откройте страницу menu.htm в отдельном окне.

2.      В качестве фона вставьте фон 6.jpg из папки images.

3.      Удалите заголовок страницы Меню.

4.      Отредактируйте кнопки:

·         щелкните по кнопке правой кнопкой мыши;

·         в контекстном меню выберите команду Свойства меняющейся кнопки;

·         выберите цвет кнопки, эффект, цвет эффекта, начертание и цвет шрифта;

·         измените текст второй кнопки: Фотоальбом;

·         измените текст третьей кнопки: Давайте познакомимся.

5.      Сохраните изменения и просмотрите страницу в веб-обозревателе.

6.      Просмотрите страницу index.htm с новыми изменениями.