Лекция: Программа Microsoft FrontPage 2003. Динамические эффекты.

Чтобы сделать страницы сайта более «живыми» познакомимся с возможностями, которые позволяют добавить к элементам страницы различные спецэффекты. Это, например, может быть бегущая строка, подсветка, перемещение элемента или изменение его шрифта при наведении на него указателя мыши, открытии страницы и других событиях.

В программе FrontPage имеется несколько готовых компонентов, которые можно поместить на страницу и настроить нужным образом для воспроизведения различных динамических эффектов.

Бегущая строка

Чтобы привлечь внимание к фрагменту текста или заголовку, можно придать ему эффект бегущей строки.

• Выделите нужную строку набранного на странице текста

• Выберите команду меню Вставка — Web-компонент. На экране появится диалог Вставка компонента Web-узла.

Рис. Диалог Вставка компонента Web-узла

В списке Тип компонента можно выбрать один из доступных компонентов, а в списке Выберите эффект – вариант выбранного компонента. Выберите динамический эффект Бегущая строка.

• Нажмите кнопку Готово. На экране появится диалог Свойства бегущей строки.
  В поле Текст находится текст выделенного фрагмента, который будет выводиться как бегущая строка.
  С помощью переключателя Направление можно выбрать направление движение строки: справа налево или слева направо.
  В группе элементов Скорость регулируется задержка между последовательными сдвигами текста и величина сдвига в пикселях.
  Группа элементов управления Поведение задает режим перемещения текста:
  при установке переключателя прокрутка текст периодически пробегает по экрану, как на информационном табло
  при установке переключателя сдвиг текст перемещается до противоположной границы, останавливается и остается на экране
  при установке переключателя попеременно текст перемещается внутри границ области бегущей строки
  Группа элементов управления Размер определяет ширину и высоту прямоугольной области бегущей строки. Если соответствующие флажки сброшены, то размеры определяются по размеру текста.
  Установленный флажок Непрерывно в группе элементов управления Повторы задает неограниченное число повторений прокрутки строки. Если флажок сброшен, то в поле ввода со счетчиком задается количество повторений.
  Открывающийся список Цвет фона определяет цвет фона в области перемещения бегущей строки.

• Нажмите кнопку ОК, чтобы закрыть диалог Свойства бегущей строки. Текст заголовка внешне не изменится, но будет преобразован в отдельный компонент.

• Эффект бегущей строки нельзя наблюдать в режиме редактирования страницы, поэтому нажмите кнопку Просмотр в нижней части вкладки index.htm, чтобы переключиться в режим просмотра и увидеть бегущую строку.

• Вернитесь к режиму редактирования страницы, щелкнув мышью на кнопке Конструктор в нижней части вкладки index.htm.

Чтобы отредактировать текст бегущей строки или изменить его свойства, необходимо снова вызвать диалог Свойства бегущей строки, дважды щелкнув мышью в области текста.

В случае, когда текст, который планируется разместить на странице, уже набран в текстовом редакторе и сохранен на диске, вы можете вставить его прямо из файла. FrontPage позволяет загружать и конвертировать информацию из основных форматов текстовых документов и документов MS Office.

Если, к примеру, требуется вставить фрагмент текста страницы, взяв его из обычного текстового файла, необходимо сделать следующее:

• Установите текстовый курсор на странице в позицию, начиная с которой будет располагаться вставленный текст.

• Если файл содержит текст на русском языке, проверьте, что выбран русский язык ввода для клавиатуры. Если это не так, переключитесь на русский язык. При загрузке и преобразовании тестового файла FrontPage установит язык в соответствии с текущим языком ввода.

• Выберите команду меню Вставка — Файл. На экране появится стандартный диалог открытия файла Выбор файла.

• В открывающемся списке Тип файла выберите тип Текстовые файлы (*.txt).

• Найдите и выделите нужный текстовый документ.

• Нажмите кнопку Открыть. Диалог Выбор файла закроется, и на экране появится диалог Преобразование текста.
  Этот диалог позволяет выбрать способ преобразования текста из файла. По умолчанию предлагается вариант отформатированные абзацы. Это означает, что каждый абзац исходного текста будет преобразован в отдельный абзац на странице. Причем для форматирования будет использован стиль С форматом (стиль текста выбирается и отображается в отрывающемся списке Стиль на панели инструментов Форматирование).

Возможны и другие варианты:

• Один отформатированный абзац – преобразование всего текста в единый абзац с использованием разделителей строк и стиля С форматом.

• Обычные абзацы – преобразование исходного текста в отдельные абзацы со стилем Normal.

• Обычные абзацы с разрывами строк.

• Не преобразовывать – вставка исходного текста непосредственно в формате HTML.

• Нажмите кнопку ОК, чтобы закрыть диалог Преобразование текста. Текст из файла будет вставлен в текущую позицию.

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

Анимированная кнопка

Как и обычная кнопка в навигационном меню, анимированная кнопка содержит сслку на другую страницу или файл. Но помимо основной функции – перехода по ссылке – при нажатии или наведении указателя мыши анимированная кнопка может менять цвет, отображать на себе рисунок.

• Чтобы создать анимированную кнопку, в режиме редактирования страницы выберите команду меню Вставка — Меняющаяся кнопка. На экране появится диалог Меняющиеся кнопки.

Рис. Диалог Меняющиеся кнопки

Создать анимированную кнопку можно также в диалоге Вставка компонента Web-узла, выбрав компонент Динамические эффекты с эффектом Интерактивная кнопка.
В списке Кнопка диалога Меняющиеся кнопки можно выбрать вид кнопки, а в поле Просмотр – посмотреть на поведение кнопки при щелчке на ней мышью.

Рис. Диалог Свойства бегущей строки

• В поле Текст укажите текст, который будет отображаться на кнопке.

• В поле Ссылка укажите адрес ссылки для кнопки или выберите страницу, нажав кнопку Обзор.
  Выбрав вкладку Шрифт, можно дополнительно выбрать шрифт для текста кнопки, а на вкладке Рисунок можно изменить размер и цвет кнопки.

• Нажмите кнопку ОК. На странице будет вставлена анимированная кнопка.

• Чтобы проверить работу кнопки, сохраните страницу и запустите браузер, нажав кнопку на панели инструментов Стандартная.
  При наведении указателя мыши на кнопку должен возникать выбранный эффект, а при нажатии на кнопку – происходит переход по установленному адресу.

В программе FrontPage имеется богатый набор возможностей реализации различных эффектов не только для кнопки, но и для любого объекта, помещенного на страницу. Можно, например, изменить вид кнопки при различных событиях мыши, задав соответствующие файлы с изображением кнопки для этих событий.

Кроме этого можно указать звуковые файлы, которые будут воспроизводиться при различных событиях, возникающих при просмотре страницы.

Изменим вид кнопки при наведении на нее указателя мыши и воспроизведем при этом звуковой файл.

• В режиме редактирования страницы щелкните мышью на созданной вами кнопке, чтобы выделить ее.

• Выберите команду меню Формат — Поведение. На экране появится область задач Поведение.
  
  

Рис. Область задач Поведение

Удалите действие, которое выполняется при наведении на кнопку указателя мыши.

• Щелкните правой кнопкой мыши на третьем сценарии в списке Сценарии в теге в колонке Действия и в появившемся контекстном меню выберите команду Удалить. Сценарий будет удален из списка.

• В Области задач нажмите кнопку Восстановить. На экране появится меню

Рис. Меню Вставить

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

• Выберите команду меню Замена изображения. На экране появится диалог Замена изображения.
  
  

Рис. Диалог Замена изображения

• В поле ввода URL подставляемого изображения укажите адрес изображения, которое заменит исходное при наступлении события, нажмите кнопку ОК. В списке Сценарии в теге области задач появится новый сценарий для события onmouseover (при наведении указателя мыши).
  
  
  

Теперь озвучим кнопку.

• В Области задач нажмите кнопку Вставить и выберите из меню действие Воспроизведение звука. На экране появится диалог Воспроизведение звука.

Рис. Диалог Воспроизведение звука

• В поле ввода Воспроизвести звук укажите адрес звукового файла, который будет проигрываться при наведении указателя мыши на кнопку и нажмите кнопку ОК. В списке Сценарии в теге области задач появится новый сценарий для события onclick (при щелчке мышью).
  Вам нужно изменить событие, при котором будет воспроизводиться звуковой файл.

• Наведите указатель мыши на событие onclick во вновь созданном сценарии и нажмите появившуюся в правой части поля кнопку

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

• В меню для выбора события выберите onmouseover (при наведении указателя мыши).
  Событие для воспроизведения звука изменено.

• Нажмите комбинацию клавиш Ctrl+F1, чтобы скрыть область задач.

• Чтобы проверить работу кнопки, сохраните страницу и запустите браузер, нажав кнопку на панели инструментов Стандартная.