1. Запустите Microsoft FrontPage, для чего в Главном меню Windows выберите команду Программы > Microsoft FrontPage.
2. Для создания структуры веб-узла выберите в панели инструментов Область задач команду Другие шаблоны веб-узла. В окне Шаблоны веб-узлов выберите шаблон, например Личный веб-узел, в поле Указать расположение нового веб-узла введите имя диска и папки, в которой будут размещены папки и файлы создаваемого веб-узла, например С:\home\mywebs. Щелкните на кнопке ОК. Окно приложения Microsoft FrontPage 2003 с заготовкой веб-узла (см. рисунок 8.4).
Рисунок 8.4 - Окно Microsoft FrontPage 20003 с заготовкой веб-узла
В результате в левой половине окна откроется список содержимого веб-узла Список папок, в котором автоматически создаются папки private и images и несколько страниц HTML с базовым содержанием по выбранному шаблону (см. рис. 14).Созданный узел сохраняется в новой папке, которая помещается на локальный диск или на сервер Web. Этот узел можно впоследствии открыть с помощью команды Файл > Открыть или выбрав его из списка последних открытых узлов Файл > Последние узлы.
3. Рассмотрите предложенную шаблоном персональной страницы базовую структуру веб-узла. Для отображения структуры web-узла щелкните на значке Переходы. В правой части окна появилась структура веб-узла (см. рисунок 8.5). Здесь можно контролировать правильность ссылок, автоматически изменять их при переименовании файла и многое другое.
Рисунок 8.5 - Изменение структуры веб-узла
4. Удалите страницу feedback.htm из веб-узла, для чего укажите на структуре веб-узла данный элемент и, щелкнув на нем правой кнопкой мыши, раскройте контекстное меню и выберите команду Удалить (см. Рис. 8.5). В раскрывшемся окне удаления установите флажок Удалить эту страницу из сайта и щелкните на кнопке Ок.
5. Для изменения взаимного расположения и связей элементов структуры web-узла перетащите элемент в режиме Переходы на желаемое место, как показано на рисунке 8.6.
Рисунок 8.6 - Изменение взаимного расположения и связей элементов структуры веб-узла
6. Наполните содержанием веб-страницы веб-узла с измененной структурой. Для редактирования веб-страницы можно дважды щелкнуть левой кнопкой мышки на ее имени на панели Список папок или ее изображении на панели Переходы. Чтобы увеличить обзор в окне редактирования, отмените отображение списка файлов, используя меню Вид команду Список папок.
7. Откройте для редактирования стартовую веб-страницу index.htm. Внимательно рассмотрите страницу index.htm. Она состоит из заголовка страницы, панели навигации в виде кнопки под заголовком, панели навигации в виде гиперссылок в левой части страницы (Увлечения, Избранное) и текста в правой части страницы Добро пожаловать на мой ...
8. Установите основные свойства страницы. Для этого в меню Файл выберите команду Свойства. В окне Свойства страницы перейдите на вкладку Общие. Введите в поле Название название документа на русском языке, например Персональная страница. Для правильного отображения символов русского языка на вкладке Язык в списке поля Отметить текущий документ выберите Русский, а в области Набор знаков в списке поля Сохранить документ выберите Кириллица, в списке поля Повторить загрузку текущего документа выберите Кириллица и щелкните на кнопке ОК.
9. Для изменения элементов веб-страницы укажите элемент шаблона и отредактируйте его по вашему усмотрению. Для редактирования Объявления на странице (графического заголовка), указав Объявление (баннер), вызовите контекстное меню и выберите в нем команду Свойства объявления на странице, как показано на рисунке 8.7.
Рисунок 8.7 - Изменение свойств Объявления на странице
В диалоговом окне Свойства объявления на странице установите флажок Рисунок, а в поле Текст объявления введите новый текст, например Моя персональная страница, и щелкните на кнопке ОК. Текст в объявления на странице изменился.
Отредактируйте текст в правой части страницы (Добро пожаловать на мой...), например, следующим образом: Данный сайт изготовлен в качестве примера редактирования веб-узла, созданного по шаблону персональной страницы.
Для изменения формата даты обновления страницы укажите объект даты и выберите в контекстном меню команду Свойства Дата и время. В окне Дата и время измените формат даты, как показано на рисунке 8.8, и щелкните на кнопке ОК. Для изменения свойств панели ссылок в виде гиперссылок в левой части веб-страницы (Увлечения, Избранное) выделите элементы на панели и выберите в контекстном меню команду Свойства Панель ссылок. В окне Свойства панели ссылок на вкладке Общие установите переключатель Дочерний уровень, на вкладке Стиль выберите подходящий стиль в списке Выберите стиль, в разделе Ориентация и внешний вид установите переключатель Вертикальный, установите флажок Использовать активные рисунки и щелкните на кнопке ОК. После этого тексты с гиперссылками в левой части веб-страницы будут отображаться в виде вертикально расположенных кнопок.
Рисунок 8.8 - Изменение свойств объекта Дата
10. Перейдите в режим Переходы и переименуйте веб-страницу Увлечения в Интересы. Для переименования веб-страницы, указав страницу, выберите в контекстном меню команду Переименовать и введите новое название страницы.
11. Для проверки действия гиперссылки на кнопке щелкните на ней мышью при нажатой клавише Ctrl. В окне редактора FrontPage раскроется веб-страница, на которую передает управление ссылка с данной кнопки.
12. Для просмотра вида веб-страницы в web-обозревателе щелкните на значке Просмотр. Щелкнув на значке Код, вы можете посмотреть, как записан текст данной веб-страницы на языке HTML. Обратите внимание, что текст этой страницы в формате HTML значительно лаконичнее, чем текст аналогичной страницы, сгенерированный в среде Microsoft Word.
13. Для оценки вида созданной вами веб-страницы в других веб-обозревателях выберите в меню Файл команду Просмотр в обозревателе. В выпадающем списке выберите обозреватель Microsoft Internet Explorer 6.0 (800 x 600).
14. В окне обозревателя проверьте действие гиперссылок, правильность отображения текста и графических элементов страницы. По окончании просмотра закройте окно обозревателя стандартным способом.
15. Завершив формирование веб-страницы, сохраните ее. Для сохранения веб-страницы выберите в меню Файл команду Сохранить или Сохранить как, если хотите изменить имя файла.
Контрольные вопросы:
1. Что такое web-страница, чем она отличается от обычной страницы текста?
2. Что такое web-узел?
3. Опишите назначение web-сервера.
4. Что такое стартовая страница web-сайта?
5. Опишите назначение web-обозревателя.
6. Опишите этапы разработки web-сайта.
7. В каких режимах можно работать с web-страницей в редакторе FrontPage? Как переключить эти режимы?
8. Какие возможности предоставляются панелью инструментов Навигация в Front Page?
9. Что такое web-дизайн? Каковы основные рекомендации по web-дизайну сайта?
