Начало
→
Создание сайта
→
Как сделать бегущую строку в
html
Сделать бегущую строку в
html
проще простого. В программе
Frontpage за это отвечает
динамический эффект.
Вам не нужно для этого использовать коды и вставлять скрипты на
сайт. За Вас все сделает программа сама. Но прежде, чем перейти к
уроку, буквально пару слов о бегущей строке.
Как сделать бегущую строку в html
Часто можно видеть, как на
страницах сайта отдельные фразы, а иногда и предложения целиком
выделены жирным шрифтом, например, как на этом сайте. Делается
это для того, чтобы акцентировать внимание посетителей на важных и
ключевых моментах статьи. Но часто бывает этого недостаточно.
|
Проверенный факт:
Двигающаяся на сайте строка с текстом обязательно приковывает взгляд
посетителя в первую очередь . |
Например, Вы на сайте продаете
большой ассортимент видов товара. НО один из них Вам нужно быстро
продать в первую очередь. Или же Вы хотите выделить выгодное ценовое
предложение среди прочих. Или же Вы хотите разместить у себя на
сайте объявление, чтобы оно сразу бросалось в глаза. Да, мало ли еще
для каких-нибудь других целей ..
Для того, чтобы сделать такую
бегущую строку делаем следующее:
1.
Напишите любой текст, который Вы хотите представить в виде бегущей
строки. Задайте тексту нужный размер и цвет шрифта. Например, моя
бегущая строка имеет следующие параметры:
Шрифт - Verdana, Размер - 12, полужирный,
цвет - красный
Теперь выделите текст целиком, а затем нажмите на
панели вверху кнопку "Вставка"
и в контекстном меню выберите "Веб-компонент"
2. У Вас откроется окно
"Вставка
компонента веб-узла". В левой части окна
выберите "Динамические эффекты",
в правой части выберите "Бегущая строка"
и нажмите "Готово".
3. У Вас появилось новое окно "Свойство
бегущей строки". В данном окне находятся
текст, который был написан и выделен, а также настройки бегущей
строки: Направление, Скорость,
Поведение и прочее. Не будем ничего изменять и оставим настройки
по умолчанию. Нажмите "Ок".
Также не забудьте сохранить изменения на странице и нажмите
4. Сейчас строка неподвижна и
анимированного эффекта не наблюдается. Чтобы просмотреть эффект,
откройте страницу в браузере. Как это делается, можно посмотреть в
уроке
Просмотр сайта в разных браузерах.
После того, как Вы открыли страницу
в браузере, Вы увидите, что бегущая строка движется справа налево.
Вот так она будет выглядеть после того, как страницу выложите в
интернет
5. Давайте теперь поменяем движение
бегущей строки слева направо. Для этого выделите текст и щелкните на
тексте правой мышкой. В меню выберите "Свойства
бегущей строки"
В открывшемся окне ставим точку около слова "Направо",
жмем "Ок"
и сохраняем изменения на странице
Теперь открываем страницу в браузере и видим, что страница уже
движется в другом направлении, т.е. слева направо
6. Если же Вы хотите, чтобы бегущая
строка выехала сбоку и остановилась, то тогда нужно выбрать параметр
"Сдвиг",
нажмите "Ок"
и сохраните изменения на странице
.
Теперь открываем страницу в браузере и видим, эффект выезда строки и
остановки.
7. А если выбрать параметр
"Попеременно",
то бегущая строка будет двигаться слева - направо и справа - налево
в пределах границ ячейки, в которую помещена бегущая строка.
Вот так теперь наша строка будет
двигаться с данным эффектом:
8. Если требуется, то можно
добавить фон к бегущей строке. Давайте для этого опять зайдем в окно
"Свойство бегущей строки".
Нажмите, на "Цвет фона"
и выберите цвет. Например, желтый. Нажмите "Ок"
и сохраните изменения
.
Просмотрите страницу с помощью браузера. Теперь у бегущей строки
появился желтый фон.
9. Если же Вы хотите убрать фон, то зайдите в "Цвет
фона" и выберите цвет "Авто"
10. Для того, чтобы удалить бегущую строку, просто выделите ее и
нажмите на клавиатуре "Delete"