Быстрое создание интерактивных кнопок при помощи FrontPage
 
Информатика в школе


Видео курсы для чайников фотошоп, joomla, wordpress, php, css 
  Главная  ●  Карта сайта
 
 

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

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

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

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

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

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

Скриншот

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

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

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

Скриншот

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

Пробная кнопка

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

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

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

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

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

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

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

Книжные новинки
Как сделать свой сайт и заработать на нем Е. Мухутдинов
Копилка
Рабочие программы
Проекты MS Office
Презентации
Открытые уроки
Экзаменационные билеты
Элективные курсы
Бесплатный soft
 Инструкции по ТБ
Подготовка к олимпиадам по информатике
Методика подготовки
"Золотые" алгоритмы
Простые задачи для начинающих
Олимпиадные задачи с решениями
Книги
Среда программирования
Обучение программированию на С++
Справочник по языку Pascal
Обучение
Подготовка к ЕГЭ
Создание сайтов
Уроки FrontPage
Уроки Word 2003
Создание игр на Delphi
Печатаем вслепую

Информация

Наши интервью
Книга почета
Курсы повышения квалификации
Электронная библиотечка
Книжная полка
Статьи
Полезные ссылки
Обратная связь

Конкурсы

Олимпиада
Фотоконкурс
VIP
Персональный раздел профессора
Макаровой Н.В.
Персональный раздел профессора
Смыковской Т.К.