Веб-дизайн и поисковая оптимизация

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

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

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

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

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

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

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

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

К А С К О

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

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

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

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

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

Если бегущая строка повторяется на нескольких страницах сайта, то её удобно оформить в виде вставки (include), которую можно оперативно менять. Подойдут любые способы включения фрагментов в страницу сайта. Один из самых простых - с помощью JavaScript. На страницу, в том месте, где должна быть бегущая строка, вставляете
<marquee><script language="javascript" type="text/javascript" src="stroka.js" > </script></marquee>,
а сам текст бегущей строки выносите в отдельный файлик stroka.js, который помещаете в ту же папку, что и страницы с бегущей строкой. Ниже приводится вариант такого файла с заданием цвета выводимого текста:

// Java Document
document.write( "<font color=#cc3333>Текст бегущей строки</font>");

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

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

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

<script type="text/javascript">
var line="Побуквенная бегущая строка         ";
var speed=150;
var i=0;
function pechatanie() {
if(i++<line.length) {
document.pechat.pt.value=line.substring(0,i);
}
else{
document.pechat.pt.value=" ";
i=0;
}
setTimeout('pechatanie()',speed);
}
</script>
<form action="" name="pechat">
<input name="pt" type="text" style="width: 100%; border:0px; background-color:#ffffee; " />
</form>
<script type="text/javascript">pechatanie();
</script>.

Как видим, автор сделал вывод бегущей строки через форму <form>...</form>, а сам текст поместил внутрь скрипта. Чтобы поля формы были не видны, в аргументах тега <input> задан cтиль с отсутствием границ, а цвет фона соответствует фону страницы:
style="width: 100%; border:0px; background-color:#ffffee; "

Скорость вывода букв в миллисекундах задаётся в строке var speed=150.Так как задание интервала повтора бегущей строки не предусмотрено, то его, не мудрствуя лукаво, можно организовать, введя пробелы после текста в строке:
var line="Побуквенная бегущая строка           ";

С помощью JavaScript можно сделать в виде бегущей строки и вывод <title> - названия страницы сайта, показываемого в верхней синей полосе браузера (см. вверху!). Для этого надо вставить следующий код внутри тега <head>...</head>:

<script language="javascript" type="text/javascript">
var tit = document.title;
var c = 0;
function writetitle() {
document.title = tit.substring(0,c);
if(c==tit.length) {
c = 0;setTimeout("writetitle()", 1000)
} else {
c++;
setTimeout("writetitle()", 200)
}
}
writetitle()
</script>

Параметры "бегущего <title>" задаются с помощью цифровых аргументов кода. В нашем примере задано 200 мс для скорости появления букв и 1000 мс для задержки повторения вывода надписи.

Бегущую строку на сайте можно создать и с помощью плагинов бесплатной библиотеки скриптов jQuery. Такой вариант предпочтителен, так как предоставляет больше возможностей разработчику, а кроме того, HTML-код в этом случае становится валидным. Об этом способе создания бегущей строки смотрите в статье "Бегущая строка на основе jQuery".

Также с помощью jQuery легко создать на сайте побуквенный вывод текста , аналогичный описанному выше. Простейший скрипт, реализующий эту функцию, описан в статье "Бегущая строка. Побуквенный вывод текста".

12.03.2010 г.,
обновлено 16.02.2011 г.

Ещё статьи по теме "Полезные мелочи веб-дизайна":
Создание иконки для сайта
Вывод текущей даты на сайте
Создание формы обратной связи на сайте
Создание "схемы проезда" на сайте
Создание выпадающего меню
Сжатие фотографий для интернета и электронной почты
Ключевые слова и продвижение сайта
Создание фона для сайта