Быстрое создание интерактивных кнопок

Евгений Мухутдинов

[к списку уроков]

На этом уроке мы поговорим о том, как при помощи инструментальных средств FrontPage 2003 создавать интерактивные кнопки. Что значит интерактивные? Это означает, что кнопки, которые мы создадим, будут реагировать на действия пользователя. В нашем случае кнопки будут изменять свой внешний вид при неведении на них курсора мыши и при нажатии левой клавиши.

Для создания интерактивной кнопки нам потребуются как минимум два изображения в формате gif или jpeg, но при работе с FrontPage 2003 мы можем не вникать в технические вопросы т.к. все необходимые изображения будут созданы автоматически.

Для начала щелкнем мышью в том месте Web-страницы, где мы хотим разместить кнопку. В меню Вставка выбираем пункт Веб-компонент, после чего появится диалоговое окно Вставка компонента веб-узла. Далее, в левом окне выбираем вариант Динамические эффекты (этот вариант уже выбран по умолчанию), а в правом Интерактивная кнопка (см. рис).

Нажимаем кнопку Готово и перед нами появляется диалоговое окно Меняющаяся кнопка (лично для меня было бы привычней название Интерактивная кнопка).

Теперь в списке Кнопка вы можете выбрать кнопку которая более всего подходит для вашего сайта. В окне Просмотр можно увидеть как будет выглядеть кнопка в исходном состоянии и при воздействии на нее пользователя.

В качестве примере я выбрал кнопку Выступающая капсула 1, а в поле Текст ввел для нее надпись "Пробная кнопка" (см. рис).

Как видно в окне Просмотр, надпись едва умещается на кнопке, исправить эту ситуацию можно на вкладке Рисунок, где можно увеличить ширину кнопки. На вкладке Шрифт можно указать, как будет изменяться шрифт при наведении курсора мыши и при нажатии левой клавиши. Я задал такие параметры, что при наведении курсора мыши текст становиться красного цвета. Итак, посмотрите, что у меня получилось:

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

Если вы захотите, в дальнейшей, изменить параметры кнопки (внешний вид, гиперссылку и т.д), вам будет достаточно в режиме Конструктор дважды щелкнуть на ней. После этого на экране снова появиться диалоговое окно Меняющаяся кнопка, где вы сможете внести необходимые изменения.

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

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

Мало-мальски сведущий в Web-дизайне человек может сказать: "Все это замечательно, но если в пользовательском браузере отключен режим отображения графики, то что он увидит?"

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

[к списку уроков]