Практическое занятие. «Microsoft FrontPage: использование дополнительных возможностей оформления Web-страниц»

Запустите Microsoft FrontPage и откройте созданный ранее web-сайт, для чего выберите команду Файл (File) > Открыть (Open), затем в окне Открыть файл (Open File) выберите папку Mywebs, в которой были сохранены папки и файлы web-сайта, укажите файл index.htm и щелкните на кнопке Открыть (Open).

В окне FrontPage выберите в окне Список папок (Folder List) страницу photo.htm и двойным щелчком откройте ее для редактирования.

Задание 1. Создание подвижной кнопки с гиперссылкой на другую страницу.

Подвижная кнопка – это кнопка, реагирующая на движение мыши и, при необходимости, снабженная гиперссылкой.

1. Для создания подвижной кнопки установите курсор в конец текста на web-странице photo.htm и выберите команду Вставка (Insert) > Web-компонент (Component) > Подвижная кнопка (Hover Button).

В окне Свойства подвижной кнопки (Hover Button Properties) в поле Текст кнопки (Button text) введите Вверх. Чтобы в поле Связь с (Link to) указать название web-страницы, на которую следует перейти по нажатию создаваемой кнопки, щелкните на кнопке Обзор (Browse), в окне Выбор гиперссылки подвижной кнопки (Select Hover Button Hyperlink) выберите папку и файл web-страницы, в данном случае interest.htm, и щелкните на кнопке ОК. Выберите в списке поля Эффект (Effect) вариант Инверсия освещения (Reverse glow) и щелкните на кнопке ОК для завершения создания кнопки.

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

3. Для изменения свойств созданной кнопки перейдите в режим Нормальный (Normal), укажите кнопку и в контекстном меню выберите команду Свойства подвижной кнопки (Hover Button Properties). В окне Свойства подвижной кнопки (Hover Button Properties) в поле Эффект (Effect) выберите Заполнение цветом (Color fill). Щелкнув на кнопке ОК, завершите изменение кнопки.

4. Сохраните страницу и просмотрите полученную кнопку, переключившись в режим Просмотр (Preview).

Задание 2. Создание бегущей строки.

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

1. Перейдите на web-страницу favorite.htm. Для создания бегущей строки, укажите место расположения бегущей строки на web-странице и выберите команду Вставка (Insert) > Web-компонент (Component) > Бегущая строка (Marquee). В диалоговом окне Свойства бегущей строки (Marquee properties) введите в поле Текст (Text) содержание текста, например: Если вы знаете интересные ссылки, пишите мне. Выберите направление движения, например, Влево (Left), установите Задержку (Delay) 90, Прокрутку (Scroll), Ширину (Width) 500 пикселов, Повтор (Repeat) – Бесконечно (Continuously), Цвет фона (Background color) – Automatic. Щелкните на кнопке ОК для завершения создания бегущей строки.

2. Просмотрите действие полученной бегущей строки текста, переключившись в режим Просмотр (Preview).

Задание 3. Анимация элементов web-страницы.

1. Откройте в окне редактора FrontPage файл photo.htm.

Вставьте в таблицу над рисунками еще одну строку, для чего, указав первую строку таблицы, выберите в меню Таблица (Table) команду Вставка (Insert) > Строки или столбцы (Rows or Columns), затем в диалоговом окне Вставить строки или столбцы (Insert Rows or Columns) установите переключатель Строки (Rows), в поле Число строк (Numbers of rows) укажите 1, в области окна Место (Location) установите флажок Сверху выделенных строк (Above selection) и щелкните на кнопке ОК.

Выделите ячейки в первой строке и объедините их, выбрав команду Таблица (Table) > Объединение ячеек (Merge cells).

Введите в полученную ячейку текст, например: Посмотрите фотографии автомобилей, и задайте ему динамический эффект, выбрав команду Формат (Format) > Эффекты динамического HTML (Dynamic HTML effects), затем в появившейся панели Эффекты DHTML (DHTML Effects), в списке поля Включено (On) выберите событие Загрузка страницы (Page Load), в списке поля Применение (Apply) выберите Падать по слову (Drop in by word).

Завершив создание динамического эффекта, закройте панель Эффекты DHTML (DHTML effects), щелкнув на кнопке закрытия в правом верхнем углу панели.

2. Сохраните страницу photo.htm и, переключившись в режим Просмотр (Preview), просмотрите действие динамического эффекта для текста при загрузке web-страницы.

3. Откройте в окне редактора FrontPage web-страницу favorite.htm и задайте ей эффект появления Blend при загрузке. Для этого выберите в меню Формат (Format) команду Переход страницы (Page Transitions), в окне Переход страницы (Page Transition) в списке поля Событие (Event) выберите Загрузка страницы (Page Enter), в поле Продолжительность (Duration) задайте время появления страницы, например, 3 с., в списке Эффект перемещения (Transition effect) выберите Blend и щелкните на кнопке ОК для применения заданного эффекта. Сохраните страницу favorite.htm.

4. Откройте созданный web-сайт для просмотра в web-браузере, для чего загрузите web-браузер, например, Microsoft Internet Explorer, выберите в его меню команду Файл > Открыть, щелкните на кнопке Обзор и найдите в окне Проводника Windows папку вашего web-сайта и файл index.htm. Откройте данный файл, щелкнув на кнопке Открыть. Щелкните на кнопке ОК.

Щелкнув на стартовой странице web-узла на кнопке Избранное, проверьте действие эффекта появления страницы favorite.htm.

5. По окончании просмотра закройте окно web-браузера стандартным способом.