Триколор 

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

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

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

Бегущая строка формируется с помощью тега ... (закрывающий тег обязателен). Первоначально тег был предназначен только для браузера 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
Эта строка будет прокручиваться только два раза
Бегущая строка с остановкой
Бегущая строка с фоном
Бегущая строка с ограничением ширены прокрутки
Бегущая строка снизу вверх
Бегущая строка с отступами от границ

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