Как сделать бегущую строку css. Веб-дизайн и поисковая оптимизация

Бегущая строка на сайте

При разработке сайта интересным элементом дизайна, привлекающим внимание, может стать бегущая строка . Особенно удобно размещать с её помощью краткие новости, информацию о скидках, распродажах и т.п. Кроме того, бегущая строка - самый простой способ создания анимации на сайте.

Бегущая строка формируется с помощью тега ... (закрывающий тег обязателен). Первоначально тег был предназначен только для браузера Internet Explorer, но современные версии других браузеров также понимают и поддерживают его, хотя он не входит в спецификацию HTML. Из-за этого наличие на странице тега приведет к невалидному коду, то есть ошибке при проверке, но её можно игнорировать. Так же следует учитывать, что браузеры по-разному отображают содержимое бегущей строки , так что при создании сайта обязательно проверяйте её вывод. Как всегда, на первом месте по непредсказуемости обработки HTML-кода стоит Internet Explorer , и тег для него не исключение. Также очень не любит этот тег и Google Chrome.

Для создания сайта особый интерес представляет то, что содержимое контейнера не ограничивается простым текстом и позволяет перемещать любые элементы веб-страницы - изображения, текст, таблицы, элементы форм и т.д.

Скидка 50% при заказе КАСКО через интернет. Услуга автомойки бесплатно каждому клиенту

Длину бегущей строки можно ограничить, задав атрибут width (длина строки) или hspace (отступ от границ прокрутки) в пикселях или процентах. К слову о браузерах, в данном примере пришлось перед бегущей строкой ввести неразрывный пробел () и задать style="letter-spacing: 0em" , так как без этой "химии" Internet Explorer 7 (Must die!) некорректно выводил бегущую строку при масштабах показа страницы более 100%.

Если сделать какой-либо элемент бегущей строки ссылкой, то получается интересный трюк "поймай меня!". В нашем примере, чтобы перейти по ссылке, надо успеть кликнуть мышкой по красному автомобилю.

Перемещение бегущей строки можно задавать не только по горизонтали, но и по вертикали. В этом случае, как и в предыдущем, можно указать размеры области, в которой будет происходить движение (атрибуты width и height тега соответственно):

В этом примере для вертикальной бегущей строки отличились уже браузеры Firefox 3.5 и Internet Explorer 7 и 8 . Кроме необходимости вставлять неразрывный пробел () перед началом бегущей строки, но и надпись "каско" выводится в них не по центру, а вот в Opera всё нормально. При желании, вы можете потренироваться в применении "тонких" методов HTML для центровки этой надписи в указанных браузерах.

Для бегущей строки можно устанавливать параметры перемещения элементов, что позволяет с легкостью создавать оригинальные эффекты. Рассмотрим основные атрибуты тега :

• behavior - тип движения элементов бегущей строки:
  - scroll - от края до края в одном направлении (по умолчанию),
  - slide - после выполнения заданного числа проходов строка остаётся у левого или правого края страницы,
  - alternate - направление перемещения меняется на противоположное после выполнения каждого цикла;
• bgcolor - цвет фона бегущей строки;
• direction - направление движения бегущей строки:
  - left - влево (по умолчанию),
  - right - вправо,
  - down - вниз,
  - up - вверх;
• height - высота бегущей строки;
• hspace - отступ от левой и правой границ области прокрутки;
• loop - число показов бегущей строки, по умолчанию - infinite (бесконечное) повторение;
• scrollamount - смещение в пикселях за один шаг;
• scrolldelay - величина задержки в миллисекундах между шагами. Используется для замедления перемещения элементов бегущей строки;
• truespeed - минимальное значение задержки между шагами, по умолчанию 60 мс;
• vspace - отступ по вертикали от границ прокрутки;
• width - ширина бегущей строки.

Текст и элементы, расположенные внутри тегов ..., можно форматировать так же, как любые элементы веб-страницы.

Важное замечание: если длина бегущей строки (текст + картинки) больше ширины страницы сайта, то обязательно указывайте параметр width , чтобы не было искажений верстки в некоторых браузерах!

Если бегущая строка повторяется на нескольких страницах сайта, то её удобно оформить в виде вставки (include), которую можно оперативно менять. Подойдут любые способы включения фрагментов в страницу сайта. Один из самых простых - с помощью JavaScript . На страницу, в том месте, где должна быть бегущая строка, вставляете
,
а сам текст бегущей строки выносите в отдельный файлик stroka.js, который помещаете в ту же папку, что и страницы с бегущей строкой. Ниже приводится вариант такого файла с заданием цвета выводимого текста:

// Java Document
document.write("Текст бегущей строки ");

Проверьте, чтобы кодировка для этого файла была та же, что и у основной страницы. Если вы используете программу Adobe Dreamweaver , то для смены кодировки надо выбрать раздел меню Изменить - Свойства страницы - Название/кодировка . Также сменить кодировку скрипта можно в Microsoft Word . Для этого откройте документ, задайте нужную кодировку, если он выводится неверно (как это сделать, смотрите в "Справке Word"), а затем сохраните его следующим путем: Файл - Сохранить как - Обычный текст - Сохранить . В открывшемся окне вы можете задать необходимую кодировку.

Конечно же, с помощью JavaScript можно создать дополнительные эффекты при выводе бегущей строки. Например, добавив внутрь тега , вы получите остановку бегущей строки при наведении на неё курсора мыши и продолжение её вывода при убирании курсора:

Остановите меня!

Как указано выше, тег приводит к невалидному коду. Если вы хотите избежать этого, то можно воспользоваться другими методами, например, скриптами JavaScript и др. Подробно этот вопрос рассмотрен на сайте a-cto.narod.ru . Там же предложен и интересный вариант бегущей строки - побуквенный вывод текста, который можно задать для любой строки на сайте:

Для создания этого эффекта вставляете в нужное место странцы следующий код:

var line="Побуквенная бегущая строка ";
var speed=150;
var i=0;
function pechatanie() {
if(i++ обозначит символ >.

Все спецсимволы начинают писаться со знака & - амперсант этот знак указывает браузеру, что далее будет идти имя спецсимвола и воспринимать его следует не как текст, а как команду. Тут встаёт очередной вопрос, а как собственно в тексте предназначенного для вывода на экран поставить сам знак & - амперсант?

Для знака & тоже есть свой спецсимвол - &

Такая вот путаница получается..

Ещё, пожалуй, отдельного внимания заслуживает спецсимвол - это неразрывный пробел мы с ним уже сталкивались. Дело в том, что когда Вы пишите текст в блокноте или html редакторе "простых" пробелов между словами можно поставить сколь угодно много, но вот при чтении страницы браузером все они "удаляются" и между словами на странице будет не более одного пробела. Отсюда часто возникают проблемы с оформлением текста, красную строку, например, никак не сделать... вот и придумали люди спецсимвол он воспринимается браузером не как пробел, а как знак, только невидимый человеческому глазу.

А неразрывным он называется по тому, что группа таких пробелов воспринимается как цельное слово, следовательно, не переносится на следующую строку, если предложение подходит к установленным рамкам или же к краю окна. Так что в окне может появиться горизонтальная полоса прокрутки, если Вам это ненужно, ставьте между ними обыкновенные пробелы

Пример использования спецсимволов:

пример в примере

< /td>

< html> < head> < title> Моя первая страничка< /title> < /head> < body> < center>< h2> Привет мир!!!< /h2>< /center> < br> Это моя первая страничка! < /body> < /html>

Пример в примере… навивает на философские мысли о бесконечности…

Ну вот теперь Вы знаете, как примерно выглядят все эти примерчики по "ту сторону экрана". Кстати, раз уж начал открывать военные тайны, данный пример является таблицей из двух ячеек, одна тоненькая слева выполняет сугубо декоративную функцию.. так вот если перед Вами встанет задача нарисовать ячейку таблицы без какого либо содержания вставляйте в неё знак пробела . Помните правило здесь что то обязательно должно быть? Спецсимвол пробела один из выходов в данном случае.

Кроме выше указанных есть еще целый ряд спецсимволов, чего там только нет: знаки зодиака, карточные масти, палочки, точечки, ёлочки, кругляшки, дроби.. Предназначены они уже не для каких-то "особых" задач, а просто выполняют свою роль ввиду отсутствия данных знаков на клавиатуре. Мою "коллекцию" спецсимволов можете

Горизонтальная линия

Простой новый тег рисует в окне горизонтальную линию, не требует закрывающего тега. Часто применяется при верстке страницы в качестве декоративного элемента.

Имеет ряд атрибутов, align -выравнивание с одним из трёх значений (center, left, right ) может быть применен, если задана длина линии атрибут width в пикселях или процентах. Так же можно задать толщину линии атрибут - size , цвет атрибут - color , и при необходимости отключить тень линии noshade .

Горизонтальная линия


Это просто линия по умолчанию:

Это линия без тени:

Это линия окрашенная в кранный цвет:

Линия длиной 250 пикселей:

Линия длиной 250 и толщиной 5 пикселей:

Линия длиной 500, толщиной 50, синяя:

Примеры выравнивания:

По моему достаточно просто и эффективно.

Бегущая строка

Тег заставляет текст помещённый в него двигаться в том или ином направлении, проще говоря делает его бегущей строкой. Бегущая строка имеет ряд настроек скроллинга, которые задаются следующими атрибутами:

behavior - определяет тип скроллинга, может иметь следующие значения:

• alternate - колебательные движения от края к краю
• scroll - прокручивание текста. текст будет выходить за рамки экрана и снова появляться с противоположной его стороны
• slide - прокручивание текста c остановкой.

scrollamount - скорость бегущей строки от 1 до 10.
loop задает количество прокруток бегущей строки.

direction - направление движения текста. значения:

• up - вверх,
• down - вниз,
• left - влево,
• right - вправо.

bgcolor - цвет фона бегущей строки,
height - высота строки,
width - ширина строки.

Бегущая строка


Бегающие строки
Бегущая строка по умолчанию
Бегущая строка слева направо
Бегущая строка бегает от края к краю
Бегущая строка со скоростью 10
Бегущая строка со скоростью 1
Эта строка будет прокручиваться только два раза
Бегущая строка с остановкой
Бегущая строка с фоном
Бегущая строка с ограничением ширены прокрутки
Бегущая строка снизу вверх
Бегущая строка с отступами от границ

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

Создать бегущую строку на сайте – проще простого.
Используют бегущую строку для различных целей, например, для рекламного сообщения, новостей, акций, объявлений и т.д.

Для создания бегущей строки используют тег:

Бегущая строка Бегущая строка

Атрибуты для бегущей строки

width ="..." - ширина бегущей строки (в пикселях или процентах).
Пример:
Бегущая строка

height ="..." - высота бегущей строки (в пикселях или процентах).
Пример:
Бегущая строка

bgcolor ="..." - цвет фона бегущей строки (цвет задается кодом или словом).
Пример:
Бегущая строка

behavior ="..." поведение бегущей строки. Имеет такие значения:

scroll - обычная прокрутка (по умолчанию);

slide – строка начинает свой путь из одного края и останавливается у другого;

alternate – строка будет двигаться от края до края
Пример:
Бегущая строка

direction ="..." - направление бегущей строки. Имеет такие значения:

left – движение текста влево (по умолчанию);

right – движение текста вправо;

up – движение текста снизу вверх;

down - движение текста сверху вниз
Пример:
Бегущая строка

scrollamount ="..." - скорость движения строки (в пикселях).
Пример:
Бегущая строка

scrolldelay ="..." - временной интервал между шагами (в миллисекундах).
Пример:
Бегущая строка

loop ="..." – сколько раз пробежит бегущая строка. Если в значение поставить «0»(По умолчанию), бегущая срока будет прокручивать текст бесконечное количество раз, если в значение поставить «2», тогда текст прокрутится 2 раза.
Пример:
Бегущая строка

hspace ="..." – отступ от левого и правого края бегущей строки (в пикселях).
Пример:
Бегущая строка

Если все собрать вместе, код бегущей строки в HTML будет выглядеть вот так:

Бегущая строка Бегущая строка

Бегущее изображение

Так как перемещали текст в бегущей строке, так можно переместить и изображение.

Достаточно между тегами вставить картинку:

Бегущая строка

Дополнение

В бегущую строку можно установить текст со ссылкой. Для этого нужно прописать следующий код в HTML:

Бегущая строка Бегущая строка на блоге сайт

Вот и разобрались с бегущей строкой в HTML-документе.

Сделать бегущую строку в html проще простого. В программе Frontpage за это отвечает динамический эффект . Вам не нужно для этого использовать коды и вставлять скрипты на сайт. За Вас все сделает программа сама. Но прежде, чем перейти к уроку, буквально пару слов о бегущей строке.

Как сделать бегущую строку в html

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

Например, Вы на сайте продаете большой ассортимент видов товара. НО один из них Вам нужно быстро продать в первую очередь. Или же Вы хотите выделить выгодное ценовое предложение среди прочих. Или же Вы хотите разместить у себя на сайте объявление, чтобы оно сразу бросалось в глаза. Да, мало ли еще для каких-нибудь других целей..

Для того, чтобы сделать такую бегущую строкуделаем следующее:

1 . Напишите любой текст, который Вы хотите представить в виде бегущей строки. Задайте тексту нужный размер и цвет шрифта. Например, моя бегущая строка имеет следующие параметры: Шрифт - Verdana , Размер - 12, полужирный, цвет - красный

Теперь выделите текст целиком, а затем н ажмите на панели вверху кнопку " Вставка" и в контекстном меню выберите " Веб-компонент"

2. У Вас откроется окно " Вставка компонента веб-узла" . В левой части окна выберите " Динамические эффекты" , в правой части выберите " Бегущая строка" и нажмите " Готово" .

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

После того, как Вы открыли страницу в браузере, Вы увидите, что бегущая строка движется справа налево. Вот так она будет выглядеть после того, как страницу выложите в интернет

Вот тогда на помощь и приходит бегущая строка.

5. Давайте теперь поменяем движение бегущей строки слева направо. Для этого выделите текст и щелкните на тексте правой мышкой. В меню выберите " Свойства бегущей строки"

В открывшемся окне ставим точку около слова " Направо " , жмем " Ок " и сохраняем изменения на странице

Теперь открываем страницу в браузере и видим, что страница уже движется в другом направлении, т.е. слева направо

6. Если же Вы хотите, чтобы бегущая строка выехала сбоку и остановилась, то тогда нужно выбрать параметр " Сдвиг " , на жмите " Ок " и сохраните изменения на странице .

Теперь открываем страницу в браузере и видим, эффект выезда строки и остановки.

Вот тогда на помощь и приходит бегущая строка

7. А если выбрать параметр " Попеременно" , то бегущая строка будет двигаться слева - направо и справа - налево в пределах границ ячейки, в которую помещена бегущая строка.

Вот так теперь наша строка будет двигаться с данным эффектом:

Вот тогда на помощь и приходит бегущая строка

8. Если требуется, то можно добавить фон к бегущей строке. Давайте для этого опять зайдем в окно " Свойство бегущей строки" . Нажмите, на " Цвет фона" и выберите цвет. Например, желтый. Нажмите " Ок" и сохраните изменения .

Просмотрите страницу с помощью браузера. Теперь у бегущей строки появился желтый фон.

Вот тогда на помощь и приходит бегущая строка

9. Если же Вы хотите убрать фон, то зайдите в " Цвет фона" и выберите цвет " Авто"

10. Для того, чтобы удалить бегущую строку, просто выделите ее и нажмите на клавиатуре "Delete"