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

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

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

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

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

Различные интересные и неожиданные варианты использования бегущей строки можно посмотреть на сайте московского Центра психологии самореализации.

Если бегущая строка повторяется на нескольких страницах сайта, то её удобно оформить в виде вставки (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, то для этого надо выбрать раздел меню Редактировать - Установки...- Создать документ - Java Script - Кодировка по умолчанию.

Конечно же, с помощью JavaScript можно создать дополнительные эффекты при выводе бегущей строки. Например, добавив внутрь тега <marquee onmouseover=this.stop() onmouseout=this.start()>, вы получите остановку бегущей строки при наведении на неё курсора мыши и продолжение её вывода при убирании курсора:

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

Также с помощью JavaScript можно сделать в виде бегущей строки и вывод <title> - названия страницы сайта, показываемого в верхней синей полосе браузера (см. вверху!). Для этого надо вставить следующий код перед тегом </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()", 3000)
} else {
c++;
setTimeout("writetitle()", 200)
}
}
writetitle()
</script>

Параметры "бегущего <title>" задаются с помощью цифровых аргументов кода, значение которых вы можете легко определить самостоятельно, поэкспериментировав с ними в HTML-редакторе. Однако особо увлекаться эффектами Java Script не советую, так как это, на мой взгляд, дурной тон, а кроме того, не забывайте, что выполнение сценариев может быть отключено в браузере пользователя и ваши дизайнерские "находки" пропадут зря.

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

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