МИНИСТЕРСТВО ОБРАЗОВАНИЯ РОССИЙСКОЙ ФЕДЕРАЦИИ НОВГОРОДСКИЙ ГОСУДАРСТВЕННЫЙ УНИВЕРСИТЕТ ИМЕНИ ЯРОСЛАВА МУДРОГО
ИНТЕРНЕТ-ТЕХНОЛОГИИ ДЛЯ РАБОТНИКОВ ОБРАЗОВАНИЯ Часть 4 Разработка Web-представлений
ВЕЛИКИЙ НОВГОРОД 2004
МИНИСТЕРСТВО ОБРАЗОВАНИЯ РОССИЙСКОЙ ФЕДЕРАЦИИ НОВГОРОДСКИЙ ГОСУДАРСТВЕННЫЙ УНИВЕРСИТЕТ ИМЕНИ ЯРОСЛАВА МУДРОГО
ИНТЕРНЕТ-ТЕХНОЛОГИИ ДЛЯ РАБОТНИКОВ ОБРАЗОВАНИЯ Часть 4 Разработка Web-представлений Методические рекомендации
ВЕЛИКИЙ НОВГОРОД 2004
УДК
Печатается по решению
ББК
РИС НовГУ
Рецензент директор Центра компьютерного проектирования Галактионов Н.Б. Интернет-технологии для работников образования: Метод. рекомендации / Авт. – сост.: Н.В. Курмышев, Г.Ю. Соколова; НовГУ им. Ярослава Мудрого. – Великий Новгород, 2004. Ч. 4: Разработка Web-представлений. – 34с. Методические модуль
курса
разработке
рекомендации
«Интернет-технологии
Web-представлений.
охватывают для
четвертый
работников
Рассматриваются
учебный
образования»,
основные
способы
подготовки Интернет-публикаций с помощью пакетов MS Power Point и MS Front Page. Предназначены для преподавателей и студентов педагогических специальностей, слушателей курсов повышения квалификации и других категорий работников образования. Могут быть использованы как для практических занятий, так и для самостоятельного изучения. Работа издается в авторской редакции
УДК ББК
© Новгородский государственный университет, 2004 © Н.В. Курмышев, Г.Ю. Соколова, составление, 2004
Учебно-методическое издание
ИНТЕРНЕТ-ТЕХНОЛОГИИ ДЛЯ РАБОТНИКОВ ОБРАЗОВАНИЯ Часть 4 Разработка Web-представлений Методические рекомендации
Авторы-составители Курмышев Николай Васильевич Соколова Галина Юрьевна
Редактор Компьютерная верстка Корректор
______________________________________________________________ Изд. лиц. ЛР №020815 от 21.09.98 Подписано в печать Бумага офсетная. Формат 60*84 1/16. Гарнитура Times New Roman. Печать офсетная. Усл. печ. л. Уч.-изд. л. Тираж 100 экз. Заказ № . Издательско-полиграфический центр Новгородского Государственного университета им. Ярослава Мудрого 173003, Великий Новгород, ул. Б. Санкт-Петербургская, 41. Отпечатано в ИПЦ НовГУ. 173003, Великий Новгород, ул. Б. Санкт-Петербургская, 41
3
ВВЕДЕНИЕ Курс «Интернет–технологии для работников образования» адресован студентам
педагогических
специальностей,
учителям-предметникам,
преподавателям вузов и другим работникам образовательных учреждений, ведущим практическую педагогическую деятельность. Содержание курса построено по модульному принципу. Предлагаются 4 учебных модуля, которые, в зависимости от стартового уровня обучающихся, могут изучаться как последовательно, так и независимо друг от друга: •
«Основы работы с персональным компьютером»;
•
«Основы работы в Интернет»;
•
«Подготовка изображений для публикации в WEB»;
•
«Разработка Web–представлений».
В настоящих методических рекомендациях излагается учебный материал четвертого модуля «Разработка Web–представлений».
Рассматриваются
способы подготовки авторских материалов для публикации в Интернет с помощью MS Power Point и MS Front Page. Даются общие сведения об основах сайтостроения и приводится алгоритм подготовки сайта на основе шаблонов MS Front Page. Кроме того, методические рекомендации содержат практические задания и упражнения, выполнение которых позволит сформировать у обучающихся необходимый набор знаний и умений использования пакетов MS Power Point и MS Front Page для создания электронных учебно-методических материалов с целью их дальнейшей публикации в Интернет. Рекомендации могут использоваться в качестве учебного пособия для проведения практических занятий под руководством преподавателя и для самостоятельной работы обучающихся.
4 1 РАЗРАБОТКА WEB-ПРЕДСТАВЛЕНИЙ СРЕДСТВАМИ MS POWER POINT 1.1 Краткие теоретические сведения В деловой жизни часто приходится сталкиваться с ситуацией, когда необходимо заинтересовать людей своими достижениями, привлечь внимание к деятельности своего образовательного учреждения, сделать доклад на конференции и др. В подобных случаях неоценимую помощь может оказать программа подготовки презентации PowerPoint входящая в пакет MS Office. Презентация - это связанные между собой слайды. В соответствии с заранее
продуманным
сценарием
программа
PowerPoint
предоставляет
возможность вести свой рассказ, иллюстрируя его "живыми" картинками (слайдами) на компьютере. Управление сменой слайдов может быть организовано либо в автоматическом, либо в ручном режиме. Слайды, создаваемые для электронной презентации, могут содержать текст, диаграммы, рисованные объекты и фигуры, а также картинки, слайдфильмы, звуки и графику, созданные в других приложениях. В электронную презентацию можно вносить изменения; темп презентации регулируется установкой интервалов показа слайдов, а также использованием специальных переходов при смене слайдов и анимации. Электронную презентацию можно запустить в автономном режиме. Презентационную конференцию можно провести в сети на нескольких компьютерах. Презентацию можно подготовить с расчетом ее эффектного показа как на экране в цвете, так и на бумаге или на прозрачной пленке, т.е. в виде материалов, распечатанных на принтере. Презентацию можно оформить, а затем сохранить ее в формате HTML для публикации в Интернет.
5 Мастер автосодержания PowerPoint (рисунок 1) помогает выбрать один из нескольких встроенных шаблонов содержания, а также предлагает интересные идеи относительно создаваемой презентации, начального текста, форматирования и организации слайдов. Шаблоны охватывают широкий спектр тем, в частности совещания рабочих групп, информационные киоски, дипломы, афиши, календари событий и даже домашние Web-страницы.
Рисунок 1. Диалоговое окно выбора способа создания презентации
Рисунок 2. Шаблон разметки для размещения информации в слайде.
6 Предусмотрена стандартная разметка шаблона слайда (рисунок 2), при которой в каждой зоне слайда будет располагаться определенный вид информации, например, диаграмма только справа, а текст - слева. Так же как и в программе Word, в PowerPoint выполняется проверка орфографии текста в ходе его набора, и возможные ошибки отмечаются непосредственно в документе. При щелчке отмеченного текста правой кнопкой мыши предлагаются варианты правильного написания. Возможно применение готового шаблона оформления (рисунок 3).
Рисунок 3. Диалоговое окно выбора шаблона оформления При создании слайдов презентации основное внимание необходимо уделять их содержанию. Анимация, переходы и другие инструментальные средства используются для подчеркивания определенных аспектов сообщаемых сведений, чтобы не отвлекать внимание аудитории на спецэффекты.
7 1.2 Упражнения Упражнение 1. Введение в Microsoft Power Point 1.
Вызовите на выполнение программу Microsoft Power Point
2.
Ознакомьтесь со структурой основного экрана
3.
Вызовите пункт основного меню Справка | Справка по Microsoft
Power Point. 4.
Активизируйте вкладку Содержание (Contents)
5.
Раскройте пункт Приступая к работе
6.
Вызовите раздел Введение в Power Point, электронный учебник
7.
Нажмите кнопку Демонстрация
8.
Ознакомьтесь
с
назначением,
основными
возможностями
и
режимами работы программы. Выпишите наиболее важные моменты 9.
После завершения работы с учебником, загрузите презентацию
WEB_GR.ppt 10.
Ознакомьтесь с режимами отображения: Обычный, Структура,
Слайды, Сортировщик слайдов, Показ слайдов, активизируя каждый из них с помощью кнопок, расположенных в нижней части экрана 11.
В режимах Структура и Сортировщик слайдов проверьте
возможность изменять порядок слайдов в презентации их перетаскиванием 12.
В режиме Показ слайдов проверьте возможность управления
презентацией с помощью мыши и клавиатуры 13.
С помощью движка линейки вертикальной прокрутки просмотрите
все слайды презентации. 14.
Активизируйте слайд №8 Оцифровка изображений. Просмотрите
все составляющие его объекты. 15.
Попробуйте поменять местоположение объектов и атрибуты их
оформления 16.
Выделите какой-либо объект и вызовите команду Показ слайдов |
Настройка анимации.
8 17.
Ознакомьтесь с особенностями анимации различных объектов.
18.
Для какого-либо объекта проверьте различные режимы на вкладке
Видоизменения и на вкладке Порядок и время, используя для проверки клавишу Просмотр. 19.
Перейдите на слайд №23 Визуализация
20.
Обратите внимание на Автофигуры. Поменяйте их расположение,
размеры. Потренируйтесь в использовании инструмента Свободное вращение 21.
Поменяйте цвет заливки и линий Автофигур. Разместите на слайде
другие Автофигуры. 22.
Вызовите команду Вид | Образец | Образец слайдов. Поработайте
с объектами образца слайдов. Посмотрите, как это отражается на всей презентации. 23.
Вызовите команду Формат | Применить шаблон оформления
24.
Посмотрите все имеющиеся шаблоны и выберите наилучший с
вашей точки зрения. 25.
Вызовите команду Формат | Разметка слайда. Посмотрите
различные варианты. 26.
Вызовите команду Формат | Цветовая схема слайда. Посмотрите
различные варианты. 27.
Вызовите
команду
Формат | Фон. Посмотрите различные
варианты. 28.
Вызовите команду Файл | Закрыть и закройте презентацию, не
сохраняя изменений. Задание для самоподготовки Распечатайте
отдельные
слайды,
а
также
выдачи
и
заметки,
предварительно настроив их командой Вид | Образец | Образец выдачи (Образец заметки)
9 Упражнение 2. Особенности создания и демонстрации презентаций 1.
Вызовите на выполнение программу Microsoft Power Point
2.
Вызовите команду Файл | Создать. Появляется окно диалога
«Создать презентацию» 3.
На вкладке Общие, выберите п. «Мастер автосодержания»
и
нажмите ОК 4.
При появлении запроса «Выберите подходящий вид презентации»
просмотрите предлагаемые варианты презентаций по группам 5.
Выберите
в
группе
«Служебные»
вариант
презентации
«Домашняя страница группы» и нажмите клавишу Далее 6.
На запрос «Предполагаемый способ вывода презентации» отметьте
пункт «Презентация в Интернете» и нажмите клавишу Далее 7.
Введите общий заголовок для презентации
8.
Введите текст нижнего колонтитула, который будет появляться на
каждой
странице,
например
«WEB-мастер
И.И.
Иванов,
Е-mail:
[email protected]». 9.
Оставьте флажки «Дата последнего изменения» и «Номер
слайда» 10.
Нажмите клавишу Далее, а затем Готово.
11.
Power Point переходит в режим Обычный
и предоставляет
возможность заполнения презентации соответствующим текстом 12.
Последовательно просмотрите все слайды, заполните хотя бы
некоторые из них 13.
Вызовите команду Файл | Предварительный просмотр Web-
страницы. Загружается браузер Microsoft Internet Explorer и сформированная Power Point Web-страница. Ознакомьтесь с ее содержимым 14.
Закройте окно браузера. Возвращаемся в программу Power Point
15.
Займитесь дооформлением презентации. Попробуйте:
10 •
вставлять новые слайды, а затем удалять их. При вставке
(меню Вставка | Новый слайд) используйте различные варианты автомакетов слайдов •
вставлять и удалять Автофигуры
•
вставлять и удалять картинки из библиотеки клипов, а также
объекты WordArt •
вставлять диаграммы (Вставка | Диаграмма) и менять их
параметры •
на вставленных слайдах проверить различные варианты
анимации объектов •
менять цветовую схему
•
менять шрифты и стиль их оформления
•
просмотреть какой-либо слайд в оттенках серого, нажав
соответствующую клавишу на стандартной панели •
на образец слайдов в качестве эмблемы вставить картинку
(меню Вставка | Рисунок | Из файла), созданную вами в программе Adobe Photoshop, соответственно изменив ее размер 16.
Просмотрите результат доработки презентации сначала в
Power Point в режиме показа слайдов, а затем в браузере Microsoft Internet Explorer командой Файл | Предварительный просмотр Web-страницы 17.
Сохраните подготовленную презентацию на диске командой
Файл | Сохранить как. 18.
Сохраните Web-страницу на диске командой Файл |
Сохранить как Web-страницу Задание для самоподготовки Проверьте режимы создания презентаций по различным шаблонам. Подготовьте новую презентацию учебного курса по теме «Растровая графика». Разделы: введение, определения основных понятий, растровая модель, оцифровка изображений, сканирование, параметры цифровых
11 изображений, цвет и цветовые модели, форматы растровых файлов, визуализация растровых изображений. Упражнение 3. Создание и публикация в Интернет презентации учебного заведения. 1.
Вызовите
программу
PowerPoint
(Пуск,
Программы,
MS
PowerPoint) в режиме Новой презентации (Файл, Создать, Новая презентация). 2.
Выберите шаблон слайда Титульный лист.
3.
Введите свой текст в поля заголовка и подзаголовка слайдов.
4.
Выберите шаблон оформления для Вашей презентации (Формат,
Применить шаблон оформления, далее выбрать понравившийся шаблон) 5.
Добавьте новый слайд в презентацию (Вставка, Новый слайд). В
качестве шаблона слайда выберите Маркированный список. 6. измените
Заполните поля Заголовка и Текста слайда. При необходимости формат
или
цвет
шрифта
командой
Формат,
Шрифт,
предварительно выделив необходимый фрагмент шрифта. 7.
Добавьте новый слайд. В качестве шаблона выберите Текст и
графика. 8.
Заполните поле текста. В поле Вставка картинки вставьте
картинку из коллекции MS Office (меню Вставка, Рисунок, Картинки, выберите одну из картинок, щелкните по кнопке Вставить клип (рисунок 4). Закройте окно Вставка картинки. Перетащите мышкой картинку в поле картинки.
12
Рисунок 4. Вставка картинки из коллекции MS Office. 9.
Создайте еще один слайд с текстом и графикой. Заполните
поле текста, в поле графики вставьте свою картинку, например эмблему (Вставка, Рисунок, Из файла, выбрать папку и файл с рисунком). 10.
Создайте следующий слайд с шаблоном "Организационная
диаграмма". В поле "организационная диаграмма" с помощью панели инструментов рисования (рисунок 5) нарисуйте организационную структуру Вашего образовательного учреждения или одного из его отделов.
Рисунок 5. Вид панели инструментов рисования.
13 11.
Создайте еще один слайд с шаблоном "Таблица". Выполните
двойной щелчок мышью по значку таблицы в поле "Таблица". Задайте количество строк и столбцов таблицы. Заполните ячейки таблицы информацией. Для цветового оформления ячеек таблицы воспользуйтесь командой Формат, Таблица, вкладка Заливка. 12.
Просмотрите полученные слайды с помощью Сортировщика
слайдов (Вид, Сортировщик слайдов). Поменяйте порядок следования слайдов (перетащите мышкой слайды в нужное место), если нужно, удалите макеты лишних слайдов, выделив их щелчком мыши и нажав клавишу
13.
Вернитесь в режим редактирования одного из слайдов
(двойной щелчок мышью по его макету). 14.
Просмотрите полученную презентацию (Показ слайдов,
Начать показ). Каждый следующий слайд презентации появляется по нажатию любой клавиши на клавиатуре или щелчке мышью. 15.
С
помощью
сортировщика
слайдов
выберите
для
редактирования титульный слайд 16.
Для настройки анимации и звуковых эффектов на слайде в
меню Показ слайдов выберите Настройка анимации. 17.
На вкладке Видоизменение диалогового окна Настройка
анимации в поле Объекты для анимации отразится весь список объектов, для которых можно настроить анимацию. Установите флажок рядом с первым объектом (Рисунок 6).
14
Рисунок 6. Вид окна Настройка анимации. 18.
В разделе Выберите эффект и звук выберите эффект Вылет
и задайте звук. 19.
Аналогично назначьте эффекты анимации всем объектам,
расположенным на слайде. Для просмотра щелкните по кнопке Просмотр. 20.
Настройте анимацию для следующих слайдов.
21.
Просмотрите презентацию.
22.
Сохраните презентацию в формате HTML для публикации в
Интернет (Файл, Сохранить как Web-страницу, введите английскими буквами имя файла, OK).
15 2 РАЗРАБОТКА WEB-ПРЕДСТАВЛЕНИЙ СРЕДСТВАМИ MS FRONT PAGE 2.1 Web-страницы и Web-сайты Web-сайт (Web-узел) - это набор связанных между собой близких по смыслу
Web-страниц
и
файлов.
Сайты
обычно
посвящены
какой-то
определённой теме или содержат информацию, относящуюся к частному лицу или компании. В программе Front Page существуют так называемые мастера (wizards), которые шаг за шагом позволяют создавать сайт, и шаблоны (templates),
представляющие
собой
встроенные
страницы,
содержащие
необходимое форматирование для создания и настройки создаваемых вами страниц. Мастера и шаблоны позволяют создавать сайты различных типов. На каждом сайте существует одна особенная страница, называемая домашней, или главной (homepage). Все посетители вашего сайта сначала попадают на эту страницу. Щёлкнув на той или иной гиперссылке, пользователи смогут попасть и на другие страницы вашего сайта, или даже на страницы других сайтов. Гиперссылка - это текст или изображение на Web-странице, при щелчке на котором происходит переход к другой Web-странице или сайту. Сайт размещается на сервере - компьютере, предоставляющем доступ к страницам посетителям сайта. При помощи Front Page вы можете создавать сайт непосредственно в файловой системе вашего компьютера, а затем, когда он будет готов, опубликовать его на сервере. 2.2 Разработка сайта на основе шаблона Microsoft Front Page. Шаг 1 Загрузите программу Microsoft Front Page (Пуск, Программы, Microsoft Front Page). Шаг 2 Выберите меню Файл, Новый, Сайт.
16
Рисунок 7. Вид окна «Создание сайта». В появившемся окне шаблонов (см. рисунок 7) выберите шаблон Personal Web, нажмите кнопку OK. При этом Front Page сформирует шаблоны нескольких страниц и установит связи между ними. Вид экрана должен быть такой, как представлен на рисунке 8. Если на экране отсутствуют
окно Вид или окно Список папок, то
обратитесь к меню Обзор и включите кнопки Виды и Список папок.
17
Рисунок 8. Вид окна «Новая страница»
Рисунок 9. Вид окна «Навигация»
18 Шаг 3 Щелкните мышью по кнопке Навигация поля Вид. На экране будет показана схема созданного сайта на основе шаблона (см. рисунок 8). Шаг 4 Отредактируйте названия страниц. Для этого щелкните правой кнопкой мыши по рисунку страницы, в всплывающем меню выберите команду Переименовать (см. рисунок 9) и введите новое название.
Рисунок 9. Переименование страницы Например, см. рисунок 10:
19
Рисунок 10. Пример схемы навигации сайта Шаг 5 При необходимости добавьте в схему навигации дополнительные страницы. Для этого в поле схемы навигации щелкните правой кнопкой мыши и в всплывающем меню выберите команду Новая верхняя страница (см. рисунок 11)
Рисунок 11. Добавление в схему навигации новой страницы.
20 В схеме навигации подцепите мышкой появившуюся страницу и передвиньте ее на нужный уровень так, чтобы появились связи (см. рисунок 12).
Рисунок 12. Схема навигации с новыми страницами. Отредактируйте название новых страниц, по аналогии с пунктом Шаг 4. Шаг 6 Перейдите на главную страницу (она помечена значком «домик»). Для перехода из схемы навигации к любой странице достаточно выполнить двойной щелчок мышью по ее изображению на схеме. Шаг 7 Выберите схему отображения связей между страницами. Для этого щелкните правой кнопкой мыши по строке
[Edit the properties for this
navigation bar …] и во всплывающем меню выберите команду Navigation Bar Properties (см. рисунок 13)
21
Рисунок 13. Контекстное меню «Свойства Панели навигации».
Рисунок 14. Вид окна «Свойства Панели навигации».
22 В появившемся окне Navigation Bar Properties.. (Свойства Панели навигации) выберите Children Pages under Home (Детские страницы под Домом) (см. рисунок 14). Нажмите кнопку Да. Шаг 8 Выберите стиль оформления сайта (меню Формат, Тема, выберите любую тему из предлагаемого списка и нажмите кнопку ОК) Шаг 9 Перейдите в режим просмотра сайта (кнопка Просмотр в нижней части окна Front Page). Переходя по ссылкам просмотрите структуру сайта. Шаг 10. Перейдите в режим редактирования страниц (кнопка Нормальный в нижней части окна Front Page). Отредактируйте каждую страницу. Уберите ненужный английский текст (Выделите ненужный текст и нажмите кнопку Delete на клавиатуре). Итак, вы подготовили шаблон будущего сайта со схемой навигации. Страницы
сайта
еще
пустые.
Теперь
будем
их
наполнять
текстом,
иллюстрациями, анимацией и различными эффектами. 2.3 Печать текста на странице сайта Текст можно печатать прямо на активной странице сайта. В процессе ввода текста с помощью кнопок на панели форматирования можно менять тип используемого шрифта, цвет текста и цвет фона текста, а также выравнивать текст по правому краю, по центру, по левому краю ( см. рисунок 15).
Выбор типа и размера шрифта
Выравнивание текста
Фон и цвет текста
Рисунок 15. Кнопки оформления текста на панели форматирования.
23 2.4 Вставка текста, подготовленного в MS WORD Если Вы заранее подготовили текст в MS WORD, то его можно вставить на активную страницу сайта. Для этого: •
убедитесь, что ваша страница сайта находится в режиме
редактирования (активна кнопка Нормальный в нижней части окна Front Page); •
откройте подготовленный текстовый
документ (Пуск,
Программы, MS WORD, Файл, Открыть, найти нужную папку и нужный документ, Открыть); . •
выделите текст, который хотите вставить на страницу;
•
скопируйте его в буфер обмена (Правка, Копировать);
•
через панель задач перейдите к окну MS FrontPage ( см.
рисунок 16);
Значок окна Word
Значок окна FrontPage
Рисунок 16. Кнопки программ MS Word и Ms Front Page на панели задач. •
укажите курсором место для вставки текста;
•
вставьте текст из буфера (Правка, Вставить). 2.5 Вставка рисунка на страницу сайта
Для
вставки
подготовленного
заранее
рисунка
(фотографии)
воспользуйтесь меню Вставка, Рисунок, Из файла. Далее щелкните по значку выбора файла
и найдите нужную
папку и нужный файл. При поиске нужного файла можно выбрать режим отображения рисунков – кнопка Меню «Вид», Эскизы страниц (см. рис. 17).
24 Кнопка Меню «Вид»
Рис. 17. Вид окна «Выбор файла». В качестве рисунков можно использовать коллекцию Клип Арт (Вставка, Рисунок , Клип Арт). 2.6 Редактирование рисунка средствами MS Front Page Встроенный в страницу рисунок можно доработать с помощью панели инструментов Рисунки.
Для активизации панели инструментов Рисунки
щелкните мышью по рисунку. Таблица 1. Назначение основных кнопок панели инструментов Рисунки Кнопка
Название Обрезка
Назначение Обрезает изображение, находящееся вне выделенного контура
Установить прозрачный цвет
Делает прозрачным один из цветов изображения, представленного в формате GIF
Багетная рамка
Придает изображению эффект выпуклости
Сокращение цветов
Устраняет небольшие дефекты изображения, возникающие при изменении его размеров
Увеличить контрастность
Увеличивает контрастность изображения
Уменьшить контрастность
Уменьшает контрастность изображения
25 Кнопка
Название
Назначение
Увеличить яркость
Увеличивает яркость изображения
Уменьшить яркость
Уменьшает яркость изображения
Восстановить
Отменяет все последние изменения в графическом файле с момента последнего сохранения файла
2.7 Обтекание рисунка текстом Рисунок
на странице можно расположить так, чтобы он обтекался
текстом. Для этого: •
выделите рисунок, щелкнув по нему правой кнопкой мыши;
•
во всплывающем меню выберите Picture Properties (Свойства
рисунка), Appearance (Внешний вид), Alignment (Выравнивание), Left (по левому краю)
или Right (по правому краю), Horizontal spacing
горизонтальные и Vertical spacing (вертикальные расстояния) по 10 пикселов; •
перетащите рисунок в нужное место текста. 2.8 Создание гиперссылок
Существует 3 способа организации гиперссылок: 1.
ссылки на ресурсы Интернет;
2.
ссылки на другие страницы внутри сайта;
3.
ссылки-переходы внутри страницы.
Чтобы создать ссылку на ресурсы Интернет: •
выделите текст, который будет являться ссылкой;
•
выберите меню Вставка, Гиперссылка, в строке URL введите
Интернет-адрес ресурса (например, http://www.novgorod.fio.ru), нажмите кнопку ОК. Чтобы создать ссылку на другие страницы сайта: 1. выделите текст, который будет являться ссылкой;
26 2. выберите меню Вставка, Гиперссылка, в списке страниц сайта найдите название той, на которую хотите организовать ссылку и щелкните по значку
этой страницы. При этом название файла этой страницы
отобразится в строке URL; 3. нажмите кнопку ОК. Чтобы создать ссылку-переход внутри страницы: 1. расставьте в странице метки - указатели на место для перехода: • установите курсор в то место документа, куда должен быть организован переход, • выберите меню Вставка, Закладки, • в поле Имя Закладки введите произвольное имя; 2. выделите текст, который будет являться ссылкой; 3. выберите меню Вставка, Гиперссылка, в поле Закладки выберите имя нужной закладки, при этом в строке URL
оно будет отображено со
знаком # (например, #начало); 4. нажмите кнопку ОК. 2.9 Использование таблиц для упорядочивания элементов на странице. На многих страницах информация представлена в виде одного столбца. Они могут содержать текст или графические элементы, выровненные по левому краю, по правому или по центру, но все элементы этих страниц располагаются последовательно один за другим, а не рядом, по горизонтали. Для того чтобы отобразить фотографию и пояснение к ней рядом, на одном уровне, вы можете воспользоваться таблицей. Чтобы создать таблицу •
обратитесь к меню Таблица, Вставка, Таблица;
•
задайте количество строк (Rows) и столбцов (Colums);
27 •
задайте
выравнивание
таблицы
относительно
страницы
Aligment (по левому краю – Left, по правому краю – Right, по центру – Center); •
задайте размер границ таблицы – Border Size, если таблица
служит только для упорядочивания элементов страницы, т.е. должна быть невидимой, то поставьте значение Border Size равным 0; •
задайте ширину таблицы – Specify Width в процентах или
пикселах; •
нажмите ОК. 2.10 Анимационные эффекты
Созданные страницы сайта можно украсить различными эффектами. Однако просмотреть эффекты можно лишь в режиме просмотра страницы. Бегущая строка Для создания эффекта бегущей строки выделите текст, который хотите организовать в виде бегущей строки, выберите Вставка, Компонент, Marquee.., ОК. При необходимости можно отрегулировать настройки бегущей строки. Динамические эффекты Динамические эффекты могут быть применены как к тексту, так и к рисункам и другим объектам. Для создания динамического эффекта: •
выделите текст или рисунок;
•
выберите Формат, Динамик HTML Эффекты;
•
в поле Выберите эффект выберите одно из событий (Click –
щелчок мышью, Double Click – двойной щелчок мышью, Mouse Over – наведение мышью на объект, Page load- загрузка страницы); •
в поле Прим. выберите один из предлагаемых эффектов;
•
нажмите кнопку - применить эффект (см. рисунок 17);
•
просмотрите эффект в режиме просмотра страницы.
28
Применить эффект
Удалить эффект
Рисунок 17. Вид панели инструментов «Динамические эффекты» Для удаления эффекта воспользуйтесь кнопкой Удалить эффект (см. рисунок 17). Эффекты при переходе на страницы сайта Переходы
по
страницам
сайта
также
могут
быть
оформлены
динамическими эффектами. Такие эффекты могут применяться к текущей (активной) странице или ко всему сайту. Для задания эффекта перемещения по страницам: •
сделайте активной страницу к которой хотите применить
эффект; •
выберите Формат, Перемещение Страницы;
•
в поле Event (событие) выберите из списка одно из событий
(Page Enter- загрузка страницы, Page Exit- выход из страницы); •
в поле Transition Effect (Эффект Перемещения) выберите
один из предлагаемых эффектов, например Circle In (сужающийся круг); •
нажмите ОК;
•
просмотрите эффект в режиме просмотра страницы.
29 3 РАЗМЕЩЕНИЕ ПРОЕКТА В ИНТЕРНЕТ ДЛЯ ДАЛЬНЕЙШЕГО СОПРОВОЖДЕНИЯ Созданный проект можно разместить на одном из общедоступных серверов. В этом случае он становится доступным для дальнейшего редактирования, изменения и сопровождения. Мы предлагаем воспользоваться сервером бесплатных домашних страниц - home.novgorod.ru Своим пользователям администраторы сервера бесплатно предоставляют 10 Мб дискового пространства. 1.
Введите адрес сервера home.novgorod.ru в строке адреса Internet
Explorer. 2. его
Пройдите регистрацию на сервере, выбрав ссылку Регистрация на
главной
странице.
В
форме
регистрации
введите
свой
логин
(идентификатор пользователя, который вы придумываете себе сами) и пароль, а также заполните все обязательные для заполнения поля. Чтобы закачать ваш сайт на сервер home.novgorod.ru
можно
воспользоваться программой Far: 1.
Загрузите Far (Пуск, Программы, Far);
2.
В командной строке введите следующую команду: ftp://ваш логин:ваш пароль@home.novgorod.ru
Например, если Вы зарегистрировались с паролем novgorod под именем school, то Ваш логин будет school.home.nov.ru. Если вместо домена home Вы выбрали другой из списка, например ОК, то Ваш логин будет school.ok.nov.ru Тогда для закачки сайта на сервер нужно дать следующую команду: ftp://school.home.nov.ru:[email protected] При этом на одной из панелей программы Far появится Ваш каталог на сервере home.novgorod.ru. Процесс за качки сводится к непосредственному копированию файлов сайта (кнопка F5).
30 4 ТРЕБОВАНИЯ К ВЫПУСКНЫМ РАБОТАМ Выпускная работа должна быть посвящена актуальной теме из области основного или дополнительного образования, общественной жизни детей и молодежи. Выпускник должен продемонстрировать владение педагогическими навыками и четко сформулировать образовательные, педагогические или иные цели своего проекта. В качестве темы выпускной работы могут быть выбраны: •
сайт города, школы или лично слушателя;
•
сайт для дистанционного образования по какому-либо
предмету; •
презентация, содержащая не менее 7 слайдов;
•
аннотированный обзор сайтов (не менее 25 ссылок и не менее
2-х уровней) по одной из предложенных или выбранных слушателем тем; •
параграф или раздел электронного учебника по какой-либо
теме школьного или дополнительного образования; •
авторские методические или дидактические материалы для
использования на уроке; •
образовательные
материалы
на
общекультурные
темы
(история и культура своего края, замечательные люди, здоровый образ жизни и т.д.). В работе должны
содержаться результаты работы с поисковыми
системами в Internet в виде ссылок на Internet-ресурсы различного типа (WWW, e-mail, ftp, телеконференции) по избранной теме. В ней следует использовать все или, по крайней мере, большинство технологий, изучение которых предусмотрено учебным планом. К работе предъявляются следующие технические требования: •
наличие не менее 7 гиперссылок, в том числе на страницы
внутри собственного сайта или презентации;
31 •
наличие,
изображений
(фотографий
или
рисунков),
обработанных средствами PhotoShop; •
страницы сайта должны содержать текстурированный фон.
Внимание:
имена всех файлов и папок должны быть только в
латинском регистре!!! 5 ЭТАПЫ ВЫПОЛНЕНИЯ ПРОЕКТА • Тема
Выбор темы дипломной работы и комплектование групп выпускной
работы
предлагается
самим
выпускником,
согласовывается с куратором группы по выпускным работам и утверждается руководством регионального центра. Допускается коллективная работа микрогруппой не более 3 человек при наличии соответствующего обоснования. Контрольный срок – 3 день обучения •
Определение структуры сайта
На этом этапе определяются основные разделы и подразделы сайта, их текстовое и иллюстративное содержание. Контрольный срок – 5 день обучения •
Подготовка текстовых материалов.
Все текстовые материалы, используемые в проекте, должны быть подготовлены в текстовом редакторе MS WORD. Если используются тексты из печатных изданий хорошего качества, то они могут быть отсканированы и обработаны программой FineReader. Контрольный срок – 7 день обучения. • На
этом
Поиск информации в Интернет по теме проекта. этапе
производится
отбор
интересной
информации,
представленной в Интернет, по теме проекта. Отобранная информация должна быть в дальнейшем оформлена в виде ссылок на ресурсы Интернет и включена в сайт, как страница полезных ссылок. Контрольный срок – 7 день обучения.
32 •
Подготовка иллюстраций для проекта.
В качестве иллюстраций могут быть использованы: −
фотографии,
рисунки,
схемы,
отсканированные
и
обработанные программой PhotoShop; −
рисунки из коллекции ClipArt;
−
рисунки и анимации полученные из Интернет.
Контрольный срок – 8 день обучения. •
Выбор схемы навигации и определение общего дизайна
сайта В качестве схемы навигации может быть использован любой шаблон программы Front Page, фреймы, произвольная навигация, определяемая разработчиком. Дизайн сайта может быть основан на стандартных шаблонах оформления или проектироваться разработчиком с использованием различных текстур (фонов), рисунков-кнопок, рисунков-линеек и т.п. Контрольный срок – 9 день обучения. •
Создание сайта
Сайт подготавливается с помощью программы Front Page, на основе подготовленных
ранее
материалов.
Сайт
создается
в
папке
мои
документы\мои сайты\myweb\ Контрольный срок – 10 день обучения. •
Тестирование и отладка сайта.
На этом этапе созданный сайт размещается (копируется) на устройстве W:\ и производится его тестирование с целью выявления ошибок. Контрольный срок – 11 день обучения •
Защита проекта
Защита проекта включает в себя доклад о целях и задачах проекта и демонстрацию сайта.
33 СОДЕРЖАНИЕ
Введение ....................................................................................................................... 3 1 Разработка Web-представлений средствами MS Power point.............................. 4 1.1 Краткие теоретические сведения..................................................................... 4 1.2 Упражнения ....................................................................................................... 7 2 Разработка Web-представлений средствами MS FRONT PAGE....................... 15 2.1 Web-страницы и Web-сайты .......................................................................... 15 2.2 Разработка сайта на основе шаблона Microsoft Front Page. ........................ 15 2.3 Печать текста на странице сайта ................................................................... 22 2.4 Вставка текста, подготовленного в MS WORD ........................................... 23 2.5 Вставка рисунка на страницу сайта............................................................... 23 2.6 Редактирование рисунка средствами MS Front Page................................... 24 2.7 Обтекание рисунка текстом ........................................................................... 25 2.8 Создание гиперссылок .................................................................................... 25 2.9 Использование таблиц для упорядочивания элементов на странице........ 26 2.10 Анимационные эффекты .............................................................................. 27 3 Размещение проекта в интернет для дальнейшего сопровождения ................. 29 4 Требования к выпускным работам ....................................................................... 30 5 Этапы выполнения проекта................................................................................... 31 Содержание ................................................................................................................ 33
