Практическое занятие. «Использование Microsoft FrontPage для создания web-сайта с применением шаблона»

РАЗРАБОТКА WEB-ПРЕДСТАВЛЕНИЙ СРЕДСТВАМИ MICROSOFT FRONTPAGE

1. Запустите Microsoft FrontPage, для чего в Главном меню Windows выберите команду Программы > Microsoft FrontPage.

2. Для создания структуры web-сайта выберите команду Файл (File)> Новый (New)> Web. В диалоговом окне Новый узел (New) выберите шаблон Персональная страница (Personal Web). В поле Указать место нового сайта(Specify the location of the new web) наберите имя диска и папки, в которой будут размещены файлы и папки web-сайта, например, С :\Documents and Settings\ Слушатель\Мои документы\Ваша папка\Mywebs. Щелкните на кнопке ОК.

В результате в левой половине окна откроется список содержимого web-сайта Список папок (Folder List), в котором автоматически создаются папки _private и images, а также несколько страниц HTML с содержанием, соответствующим выбранному шаблону.

3. Рассмотрите предложенную шаблоном персональной страницы базовую структуру web-сайта. Для отображения структуры web-сайта щелкните на значке Навигация (Navigation) на панели Вид (Views). В правой части окна появилась структура web-сайта. Здесь можно контролировать правильность ссылок, автоматически изменять их при переименовании файла и многое другое.

4. Удалите страницу myfav3.htm из web-сайта, для чего укажите в Списке папок (Folder List) соответствующий файл и, щелкнув на нем правой кнопкой мыши, раскройте контекстное меню и выберите команду Удалить (Delete). В раскрывшемся диалоговом окне щелкните на кнопке Да (Yes).

5. Для изменения взаимного расположения и связей элементов структуры web-сайта перетащите элемент Photo Album таким образом, чтобы он был доступен со страницы Interests.

6. Для редактирования любой web-страницы нужно дважды щелкнуть левой кнопкой мыши на ее имени на панели Список папок (Folder List) или на ее изображении на панели навигации.

Откройте для редактирования стартовую web-страницу index.htm.

Внимательно рассмотрите страницу index.htm в режиме Нормальный (Normal). Она состоит из заголовка страницы, панели навигации в виде кнопок (или строки) под заголовком, панели навигации в виде гиперссылок в левой части страницы (Interests, Favorites) и текста в правой части страницы Welcome to my … Части страницы отделяются друг от друга пунктирной линией. Верхняя часть (заголовок) и левая часть (панель навигации) являются общими для всех страниц web-сайта, правая часть – индивидуальна для каждой странички.

7. Установите основные свойства страницы. Для этого в меню Файл (File) выберите команду Свойства (Properties). В окне Свойства страницы(Page Properties) перейдите на вкладку Главное (General). Введите в поле Название (Title) название документа, например, Персональная страница. Для правильности отображения символов русского языка на вкладке Язык (Language) в списке поля Отметить текущий документ (Mark current document as) выберите Русский (Russian), а в области Кодировка HTML (HTML encoding) в списке поля Сохранить документ (Save the document as) выберите Кириллица (Cyrillic), в списке поля Перезагрузить текущий (reload the current document) выберите Кириллица (Cyrillic) и щелкните на кнопке ОК.

8. Для редактирования баннера (графического заголовка) страницы, указав баннер мышью, вызовите контекстное меню и выберите в нем команду Свойства баннера Web-страницы (Page Banner Properties). В диалоговом окне Свойства баннера страницы (Page Banner Properties) установите флажок Изображение (Picture), а в поле Текст баннера страницы (Page banner text) введите новый текст, например, Моя персональная страница, и щелкните на кнопке ОК. Текст в баннере изменился.

Удалите горизонтальную строку навигации, расположенную прямо под графическим баннером. Для этого, выделив строку навигации, нажмите клавишу Delete.

Отредактируйте текст в правой части страницы (Welcome to my…), например, следующим образом: Данный сайт изготовлен в качестве примера редактирования web-сайта, созданного по шаблону персональной страницы.

Для изменения свойств панели навигации в виде гиперссылок в левой части web-страницы (Interests, Favorites) выделите элементы на панели и выберите в контекстном меню команду Свойства панели навигации (Navigation Bar Properties). В окне Свойства панели навигации (Navigation Bar Properties) установите переключатель Уровень потомка (Child Level). Этот выбор определяет, ссылки на какие страницы будут присутствовать в навигационном меню текущей страницы. Выбор пункта Уровень потомка (Child Level) означает, что с главной страницы можно будет перейти на страницы, которые в структуре web-сайта располагаются прямо под ней, т.е. являются дочерними.

В правой части окна установите также флажки Домашняя страница (Home Page) и Родительская страница (Parent Page).

В разделе Ориентация и внешний вид (Orientation and Appearance) установите переключатели Вертикальный (Vertical) и Кнопки (Buttons).

9. Перейдите в режим навигация и переименуйте web-страницы: Interests в Интересы, Favorites в Избранное, Photo в Фотоальбом. Для перехода в режим Навигация щелкните на значке Навигация (Navigation) на панели Виды (Views). Для переименования web-страницы, указав страницу, выберите в контекстном меню команду Переименовать (Rename) и введите новое название страницы.

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

9. Для проверки действия гиперссылки кнопки щелкните на ней мышью при нажатой клавише Ctrl. В окне редактора FrontPage раскроется web-страница, на которую передает управление ссылка данной кнопки.

10. Теперь заменим название кнопки Home на Домой, а название кнопки Up (такая кнопка есть на странице Фотоальбом) – на название Наверх. Для этого в главном меню выберите команду Инструменты (Tools) > Установки Web (Web settings). В появившемся окне перейдите на вкладку Навигация (Navigation). В поле Домашняя страница (Home Page) впечатайте Домой, а в поле Родительская страница (Parent Page) – Наверх. Щелкните на кнопке ОК.

11. Для изменения оформления web-сайта выполните в главном меню команду Формат (Format) > Тема (Theme). В левой части открывшегося окна установите флажки Активная графика (Active graphics) и Рисунки фона (Background picture). В верхней части окна, в области Применить тему для (Apply theme to) установите флажок Все страницы (All page(s)). Выберите какую-либо тему из приведенного списка тем и щелкните на кнопке ОК.

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

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

13. Завершив формирование Web-страницы, сохраните ее. Для сохранения Web-страницы выберите в меню Файл (File) команду Сохранить (Save).

13. Закройте окно Microsoft FrontPage с сохранением изменений в созданного web-сайта.