Конечно же нельзя обойти вниманием такое явление, как бегущая строка. Хочу сразу предупредить, что не надо ею злоупотреблять. Среднеарифметического посетителя любое мельтешение на экране, как правило, раздражает. И вообще неоправданное наличие бегущей строки на сайте или форуме можно смело признать дурным тоном в дизайнерстве.
После этого вполне закономерен вопрос: так зачем же нужна эта бегущая строка, если это не красиво, не удобно и вообще - "дурной тон"?
Я считаю, что оправданна бегущая строка только в одном случае: когда на маленьком участке экрана нужно разместить большой объём информации, например, многочисленные новости, баннеры, ссылки и пр.
Можно это всё разместить в "Скрытом тексте" используя Ява-скрипт ( Урок 21 ). Но самое главное неудобство этого способа это то, что ява-скрипт не читает поисковик, а значит, ваши новости и ссылки, размещённые в нём некогда не будут проиндексированы.
Бегущую строку, расположенную в тегах <marquee> </marquee> любой поисковик прекрасно прочитает и приведёт на ваш сайт дополнительных посетителей.
Итак, бегущую строку можно использовать для опубликования, например, ссылок на новинки сайта. Пример такого использования вы можете видеть здесь: http://septemberfox.ucoz.ru/
В правой колонке вы видите модуль глобального блока, в котором перечислены пополнение материалов сайта активными ссылками и они движутся с низу вверх в окошечке шириной 160, а высотой 120 px (width=160 height=120). Точно также можно сделать модуль, демонстрирующий большое количество баннеров на небольшой поверхности.
Однако, чтобы не перегружать свой сайт "мельтешением" лучше сделать не более одной бегущей строки, предварительно подумав и взвесив, что можно в неё поместить.
Итак, бегущая строка свободно читается поисковиками (в отличие от скрытого текста и выпадающих меню, работающих на яваскрипте) и в бегущую строку можно поместить очень много информации, не занимая много места.
Бегущая строка может быть вертикальная или горизонтальная. То есть, весь текст, банеры и прочее, могут двигаться по экрану либо по направлению верх-низ, либо лево-право.
Бегущую строку и все её составляющие можно установить в любом документе, в котором поддерживается HTML. Для того, чтобы все баннеры, текст или какие-либо другие элементы отображались в виде бегущей строки, есть специальный парный тег:
| <marquee> Данная бегущая строка не содержит никаких дополнительных атрибутов, движется строго горизонтально, справа налево </marquee> |
Как и для многих других тегов, для бегущей строки можно задать различные параметры, воспользовавшись соответствующими атрибутами (свойствами). К этим тегам прежде всего относятся следующие:
Widht и Height. С атрибутами Widht и Height вы должны быть уже знакомы, если вы занимаетесь веб-дизайном. Это соответственно ширина и высота того окошка, в котором будет проигрываться ваш текст, показываться баннеры и пр. Для того, чтобы окошко было хорошо видно, я добавлю тег Bgcolor, который отвечает за цвет.
| <marquee width="300" height="50" Bgcolor=f7f2a2> В окошке 300 на 50 px. Жёлтый фон </marquee> |
|
Behavior - поведение текста (способ движения). Он может иметь значения:
- scroll - движется в одном направлении, постепенно исчезая из поля зрения (точно так же ведёт себя бегущая строка без заданного способа движения, поэтому ставить атрибут scroll не принципиально)
| <marquee Behavior=scroll width="300" height="50" Bgcolor=f7f2a2> Движется в одном направлении, постепенно исчезая </marquee> |
|
- slide - доезжает до края и останавливается (если вы дочитали до этого места - вы видите бегущую строку стоячей на месте. Чтобы увидеть, как этот тэг работает снова обновите страницу).
| <marquee Behavior=slide width="300" height="50" Bgcolor=f7f2a2> Доезжает до края и останавливается </marquee> |
|
- alternate - ездит от края к краю. Надо сказать, что использование такой бегущей строки мало рентабельно. Поэтому подумайте, прежде чем ставить у себя на сайте такой вариант.
| <marquee Behavior=alternate width="300" height="50" Bgcolor=f7f2a2> Ездит от края к краю </marquee> |
Для того, чтобы задать скорость движения строки, надо использовать атрибут scrollamount. Этот атрибут может иметь значения от 1 до 10. Например, очень медленная скорость: scrollamount="1". Далее, на примере строки, ездящей от края к краю я показываю изменения скорости движения.
| <marquee Behavior=alternate width="300" height="50" scrollamount="2" Bgcolor=f7f2a2> Ездит от края к краю со скоростью 2 </marquee> |
|
| <marquee Behavior=alternate width="300" height="50" scrollamount="9" Bgcolor=f7f2a2> Ездит от края к краю со скоростью 9 </marquee> |
|
Так же можно задать для бегущей строки такие теги:
Loop - число проигрываний. Например: Loop="5" - ваш текст пробежит по полю пять раз, после чего пользователю нужно обновить страницу, чтобы он начал двигаться снова. Он так же может иметь любое числовое значение (либо, если вы не ставите этот атрибут, текст будет проигрываться бесконечное количество раз). Для этого тега можно задать так же значение infinite - бесконечное число проигрываний. Но проще вообще не вписывать данный тег, если вы хотите, чтобы ваш текст проигрывался столько, сколько открыта страница.
| <marquee Behavior=alternate width="300" height="50" scrollamount="3" Loop="5" Bgcolor=f7f2a2> Число проигрываний - 5 </marquee> |
Теперь о направлении движения. Тег Direction указывает браузеру, в каком направлении должен двигаться текс, баннеры и пр. Значения для этого тега:
left - влево
right - вправо
up - снизу вверх
down - сверху вниз
Если вы не поставите никакого значения Direction, ваша бегущая строка будет идти, как на предыдущих примерах, всегда справа налево.
| <marquee width="300" height="50" scrollamount="3" Direction="left" Bgcolor=f7f2a2> Движется влево со скоростью 3 </marquee> |
|
| <marquee width="300" height="50" scrollamount="5" Direction="right" Bgcolor=f7f2a2> Движется вправо со скоростью 5 </marquee> |
|
| <marquee width="150" height="200" scrollamount="2" Direction="up" Bgcolor=f7f2a2> Движется снизу <br> вверх со скоростью 2 </marquee> |
|
| <marquee width="150" height="200" scrollamount="1" Direction="down" Bgcolor=f7f2a2> Движется сверху вниз <br> со скоростью 1 </marquee> |
|
Aling - выравнивание вашего текста (данный тег хорошо работает в Opera, но не всегда желает работать в Firefox и Explorer). Он может иметь следующие значения:
left - по левому краю
right - по правому краю
top - по верхнему краю
middle - по центру
bottom - по нижнему краю
| <marquee width="150" height="200" scrollamount="3" Direction="down" align="right" Bgcolor=f7f2a2> Выравнивание <br> по правому краю </marquee> |
|
| <marquee width="200" height="70" scrollamount="3" align="top" Bgcolor=f7f2a2> Выравнивание по верхнему краю </marquee> |
|
Вы можете задать отступы от краёв поля (данный тег так же хорошо работает в Opera, но так же не всегда желает работать в Firefox и Explorer):
vspace - отступ сверху и снизу поля
hspace - отступ слева и справа
| <marquee width="150" height="200" scrollamount="3" Direction="down" vspace="10" hspace="10" Bgcolor=f7f2a2> Отступы 10 и 10 </marquee> |
Можно так же сделать, чтобы ваша бегущая строка останавливалась при наведении курсора мыши (в браузере "Опера" - не работает. Работает только в FF и IE). Это удобно, если вы хотите, чтобы посетитель мог внимательно прочесть бегущую информацию или мог бы тщательно рассмотреть движущийся баннер. Для этого надо добавить в тег следующую конструкцию:
onMouseOver="this.stop()" onMouseOut="this.start()"
При этом тег бегущей строки будет выглядеть так:
| <marquee onMouseOver="this.stop()" onMouseOut="this.start()" width="150" height="200" scrollamount="2" Direction="down" Bgcolor=f7f2a2> Вертикальная, <br> останавливается при наведении <br> курсора мыши </marquee> |
|
| <marquee onMouseOver="this.stop()" onMouseOut="this.start()" width="300" height="50" scrollamount="2" Bgcolor=f7f2a2> Горизонтальная, останавливается при наведении курсора мыши </marquee> |
|
Это основные параметры бегущей строки, которые используются чаще всего.
Урок окончен.
Источник: http://lezione.dugward.ru/u22.html |
