Для изменения текста на кнопке и других её свойств наведите указатель мыши на эту кнопку и щёлкните правой клавишей мыши. Появилось контекстное меню, в котором выберите команду Свойства кнопки. Диалоговое окно Меняющейся кнопки открыто. Щёлкните в поле Текст и измените этот текст. Удалите в частности букву «и» и введите букву «м». Текст мы исправили. Теперь изменим цвет этой кнопки. Щёлкните строку Стеклянная капсула 1 в списке Кнопка. Каким будет цвет видно в образце. Перейдём на вкладку Шрифт. На данной вкладке так же имеется окно Просмотр. Для просмотра кнопки надо навести на неё указатель мыши и мы видим тот цвет, который будет при наведении указателя. Можно щёлкнуть эту кнопку. И опять мы видим тот цвет, который применяется для щелчка. Кроме того на вкладке Шрифт имеются такие окна как Шрифт (здесь указывается имя шрифта), Начертание, Размер шрифта, Исходный цвет.

Цвет при наведении и Цвет при нажатии. А так же списки Выровнять по оси X и Выровнять по оси Y. Начнём с названия шрифта. Предположим вместо названия шрифта Tahoma, который сейчас выбран, щёлкнем шрифт Times New Roman. На образце сразу же отображаются изменения. Выберем другой шрифт. Например, такой шрифт как Arial. Вместо обычного начертания применим курсив. А вместо 10 размера, который сейчас указан, 12-й. Все изменения видны в образце. Если шрифт не нравится, можно опять его изменить. Выберем, например такой шрифт как Verdana. Раскройте список Исходный цвет. Для этого нужно нажать кнопку со стрелкой.

Появился список Стандартных цветов, других цветов, которые уже использовались. Кроме того можно щёлкнуть ссылку Другие цвета внизу. В этом случае появляется знакомое Вам диалоговое окно Другие цвета. Нажмите на кнопку Отмена. Ещё раз раскройте список Исходный цвет. Щёлкните, к примеру, Красный. Текст на кнопке сразу же изменился в цвете, он стал красным, естественно.

Но, только когда указатель мыши не подведён к этой кнопке. Если навести указатель, то цвет текста становится таким, каким и был раньше. Для того, что бы изменить этот параметр, раскройте список При наведении. Выберем, например, зелёный цвет. Тёмно-зелёный. Наведите теперь указатель мыши на образец. При наведении текст становится зелёного цвета. Нажмите на кнопку. Текст опять стал тёмным, как и ранее. Что бы изменить и данный параметр, раскройте список Цвет при нажатии. Выберите нужный цвет.

Пусть это будет, например, синий, тёмно-синий. Проведём ещё один эксперимент. Наведите указатель мыши на кнопку. Она стала зелёной, теперь нажмите и держите левую кнопку мыши. Текст стал синим. Отпустите. Текст опять зелёный и уберём указатель. Текст красный. Разберёмся со списками. Выровнять по оси. Начнём с оси X. Раскройте список. Сейчас выбрано значение По центру. Щёлкните По левому краю, например. На кнопке текст выровнен по левому краю, т. е. он сместился левее. Раскройте список ещё раз. Щёлкните значение по правому краю. Соответственно текст сдвинулся вправо. Выберите значение По центру. Теперь можно выровнять по оси Y. Сейчас он выровнен по центру, попробуем выровнять по нижнему краю. Текст сместился вниз на кнопке, но не выходит за её пределы. Щёлкните строку По центру. Оставим текст в таком виде. Щёлкните вкладку Рисунок.

На этой вкладке имеется окно для просмотра кнопки. При наведении изменяется эта кнопка. При нажатии тоже изменяется и текст и цвет кнопки. Если текст очень короткий, то можно уменьшить размеры кнопки по ширине. Сейчас указано значение 100 точек. Уменьшим, например до 80. А высоту наоборот увеличим. Используем для этого верхнюю кнопку на счётчике Высота. При этом мы опять получили ширину более 100 точек даже. Дело в том, что был установлен флажок Сохранить пропорции. Снимите его. Теперь удалите лишние цифры в ширине. Вставим цифру 8 и 0. Увеличим высоту. Можно ввести её в ручную.

Вместо 21 точки ведём, например, 40. Получилась кнопка следующей величины. Ниже устанавливаются флажки. Такие как Создать изображение для выделенного состояния, Создать изображение для нажатого состояния и Предварительно загрузить изображение кнопок. Все эти флажки следует оставить. Ниже имеется два переключателя. Использовать для кнопки формат JPEG и фоновый цвет, этот переключатель сейчас выбран. И второй Использовать для кнопки формат GIF и прозрачный фон. Раскройте список первого переключателя. Здесь можно выбрать вполне конкретный цвет фона. Выберем, например, голубой.

В диалоговом окне Меняющиеся кнопки нажмите на кнопку ОК. Снимите выделение кнопки щелчком мыши. Кнопка занимает прямоугольное пространство. Однако там, где углы её скруглены, виден фон. Если бы фон всей страницы был голубой, тогда мы бы оставили такой же фон и для кнопки. Щёлкните дважды эту кнопку. Изменим фон. Для этого нужно щёлкнуть вкладку Рисунок. Если Вы не знаете, какой фон будет у страницы пока, то можно использовать второй переключатель. Использовать для кнопки формат GIF и прозрачный фон. Нажмите кнопку ОК в окне Меняющиеся кнопки. Фон кнопки в данном случае прозрачный и мы видим просто белый цвет. Попробуем изменить фон самой страницы. Для этого щёлкните её правой кнопкой мыши. Выберите команду Свойства страницы. В диалоговом окне Свойства страницы перейдите на вкладку форматирование.

Раскройте список фон в группе цвета. Выберем, например, голубой. Подтвердите изменения. Теперь мы видим, что вся страница имеет голубой фон. Тем не менее вокруг кнопки нет какой-то особенной прямоугольной рамки. Изменим ещё раз фон страницы, для эксперимента. Перейдём на вкладку форматирование в окне свойства страницы. Вместо голубого фона, выберите, например, красный. Нажмите на кнопку ОК. И в этом случае вокруг кнопки нет прямоугольной рамки, которая выдавала бы то, что здесь находятся очертания самой кнопки. Прозрачный фон позволяет отображать здесь красный цвет. Опять изменим свойства страницы. В диалоговом окне на вкладке Форматирование выберите фон Авто и подтвердите эти изменения.

⇐Вставка меняющейся (интерактивной) кнопки | TeachPro WEB-дизайн | Раздел 6. web-cайты. типы и разработка - типы сайтов, назначение, цель, целевая аудитория⇒