Добавление интерактивных кнопок.

Как вы знаете, для перемещения по страницам Всемирной паутины используются гиперссылки. Они могут быть представлены либо в виде фрагментов текста, либо в виде графических объектов. Наш сайт содержит пока только текстовые ссылки. Хотя очевидно, что ссылки будут смотреться гораздо эффектнее, да и сам сайт будет выглядеть более профессионально, если в качестве гиперссылок использовать графические кнопки. Понятно, что для этого необходимо заранее с помощью графического редактора создать изображения для будущих кнопок, сохранить их, после чего вставить эти графические изображения на Web-страницу и назначить для них ссылки. Если же вы не являетесь специалистом по графике и хотите избежать лишних хлопот, вам на помощь придет все тот же неутомимый Microsoft FrontPage. Причем FrontPage позволяет не просто поместить на Web-страницы графические кнопки, а предлагает сделать их еще и интерактивными. Подобная интерактивная кнопка представляет собой анимированную кнопку, которая может использоваться при создании на Web-странице навигационной панели (набора гиперссылок, позволяющих переходить на другие страницы данного сайта) и активизируется либо при наведении указателя мыши, либо по щелчку мыши. При создании интерактивной кнопки Microsoft FrontPage создает графические файлы, образующие кнопку, а также автоматически формирует нужный программный код для придания кнопке интерактивности.

Рассмотрим более подробно процедуру добавления на Web-страницу интерактивных кнопок. Как и в предыдущем случае создадим для нашего эксперимента новую Web-страницу и поместим на нее набор интерактивных кнопок, позволяющих переходить на другие страницы нашего сайта, т.е. поместим на страницу панель навигации. Создаем новый Web-документ с помощью инструмента панели Стандартная, далее настраиваем общие параметры новой страницы, выполнив щелчок правой кнопкой мыши на странице и выбрав команду Свойства страницы… В качестве названия нового документа определите текст Фамилия Имя Отчество, задайте цветовое оформление новой страницы в соответствии с оформлением начальной страницы сайта, определите в качестве языка документа русский и кириллицу в качестве кодировки, используемой при сохранении Web-страницы.

Для начала добавим кнопку, реализующую переход к начальной странице нашего сайта. Выполните команду Вставка / Веб-компонент… или щелкните по кнопке на панели Стандартная, далее в диалоговом окне Вставка компонента веб-узла в списке Тип компонента установите Динамические эффекты, после чего в соседнем списке Выберите эффектактивизируйте Интерактивная кнопка и щелкните по кнопке Готово. При этом на экран будет выведено диалоговое окно Меняющиеся кнопки, в котором задаются параметры интерактивной кнопки (рис. 25). Вызвать это окно на экран можно и несколько быстрее, воспользовавшись командой Вставка / Меняющаяся кнопка…

На первой вкладке Кнопка диалогового окна Меняющиеся кнопкиможно выбрать стиль интерактивной кнопки, а также назначить ей гиперссылку (рис. 25). Для выбора стиля кнопки используется список Кнопка. Причем в верхнем поле Просмотр программа тут же продемонстрирует вид выбранной кнопки. Более того, поскольку речь идет о создании интерактивных кнопок, каждая подобная кнопка может иметь три состояния: исходное, выделенное (при наведении указателя мыши) и нажатое (при щелчке мыши). Для просмотра всех состояний кнопки достаточно в поле Просмотрвначалеподвести указатель мыши к выбранной кнопке, а затем выполнить по ней щелчок. После определения стиля кнопки в поле Текст введите «Главная». Этот текст будет отображаться на кнопке в качестве надписи. Здесь же в поле Ссылка необходимо назначить кнопке гиперссылку для перехода к домашней странице сайта. Для этого щелкните по кнопке Обзор… и в диалоговом окне создания гиперссылки выберите файл index.htm в качестве ресурса назначения.

Переключитесь на вкладку Шрифт диалогового окна Меняющиеся кнопки(рис. 26). На этой вкладке вы можете дополнительно определить параметры надписи на кнопке: задать шрифт, начертание, размер для текста надписи, определить цвет шрифта для всех состояний кнопки, а также задать горизонтальное и вертикальное выравнивание надписи на кнопке (поля Выровнять по оси X,Выровнять по оси Y).

Перейдите на вкладку Рисунок диалогового окна Меняющиеся кнопки(рис. 27). На этой вкладке вы прежде всего при желании можете изменить размер и пропорции кнопки. Чтобы задать высоту и ширину кнопки, в полях Высота и Ширина введите желаемые значения в пикселах. Здесь же можно определить, должен ли Microsoft FrontPage дополнительно создавать изображения для кнопки в выделенном и нажатом состояниях. И если вы действительно хотите, чтобы ваша кнопка была интерактивной, проверьте установку соответствующих флажков. Кроме того, здесь же вы можете указать, в каком формате следует сохранить изображения для всех состояний кнопки:JPEG или GIF. В том случае, если в качестве фона Web-страницы вы установили просто какой-либо цвет, можно выбрать переключатель Использовать для кнопки формат JPEG и фоновый цвет, после чего открыть список выбора фонового цвета кнопки и установить цвет, соответствующий цвету Web-страницы. Тогда фон кнопки будет соответствовать сплошному фону документа. С другой стороны, чтобы фон кнопки соответствовал произвольному фону Web-страницы, можно выбрать пункт Использовать для кнопки формат GIF и прозрачный фон. После настройки всех параметров кнопки подтвердите ее создание щелчком по кнопке ОК.

Первая кнопка панели навигации готова. Проверим ее в действии. C помощью инструмента панели Стандартная сохраните новую Web-страницу под именем navigat.htm в папке сайта. Т.к. при добавлении интерактивной кнопки Microsoft FrontPage создает графические файлы, образующие кнопку, при сохранении документа будет выведен запрос о сохранении графических файлов кнопок. Подтвердите сохранение графических изображений в папке images. Воспользовавшись инструментом панелиСтандартная,включитепросмотр страницы в браузере и проверьте работоспособность нашей кнопки. После тестирования интерактивной кнопки завершите работу с браузером и вернитесь в Microsoft FrontPage.

Нам осталось дополнить панель навигации еще тремя кнопками для перехода к оставшимся страницам сайта. И в этом случае вместо создания новых точно такого же вида кнопок, скопируем уже готовую кнопку и просто изменим текст надписи и адрес ресурса назначения, открываемого кнопкой. Щелчком мыши выделите кнопку и щелкните по кнопке Копировать на панели Стандартная для помещения кнопки в буфер обмена. Установите текстовый курсор под кнопкой (наша панель навигации будет располагаться вертикально) и воспользуйтесь кнопкой Вставить на панели Стандартная. Для изменения параметров скопированной кнопки выполните по ней щелчок правой кнопкой мыши и в контекстном меню выберите команду Свойства кнопки… Далее на вкладке Кнопка диалогового окна Меняющиеся кнопки в поле текст введите «Биография», а в поле Ссылка с помощью кнопки Обзор… укажите файл biography.htm в качестве ресурса назначения. Подтвердите изменение параметров кнопки с помощью кнопки ОК. Вторая кнопка панели навигации готова. Точно таким же образом добавьте на навигационную панель еще две кнопки. Первая с надписью Увлечения, должна осуществлять переход к документу hobby.htm, вторая с надписью Ссылки должна приводить нас к документу favorite.htm. Сохраните изменения Web-страницы и подтвердите сохранение файлов изображений в папке images. Протестируйте нашу панель навигации в браузере.После чего, вернувшись в Microsoft FrontPage, закройте текущую страницу.

В заключение рассмотрения вопроса о создании интерактивных кнопок скажем несколько слов об удалении кнопок. Очевидно, что для удаления интерактивной кнопки ее следует щелчком мыши выделить и нажать клавишу Deleteна клавиатуре. Однако в этом случае необходимо помнить, что подобное удаление кнопки на Web-странице не приводит к удалению связанных с кнопкой файлов. Графические файлы, формирующие кнопку, необходимо удалить вручную.