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

Конечно же нельзя обойти вниманием такое явление, как бегущая строка. Хочу сразу предупредить, что не надо ею злоупотреблять. Среднеарифметического посетителя любое мельтешение на экране, как правило, раздражает. И вообще неоправданное наличие бегущей строки на сайте или форуме можно смело признать дурным тоном в дизайнерстве.

После этого вполне закономерен вопрос: так зачем же нужна эта бегущая строка, если это не красиво, не удобно и вообще — «дурной тон»?
Я считаю, что оправданна бегущая строка только в одном случае: когда на маленьком участке экрана нужно разместить большой объём информации, например, многочисленные новости, баннеры, ссылки и пр.

Можно это всё разместить в «Скрытом тексте» используя Ява-скрипт ( Урок 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>

В окошке 300 на 50 px. Жёлтый фон

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>

 

Ездит от края к краю со скоростью 2

<marquee Behavior=alternate width=»300″ height=»50″ scrollamount=»9″ Bgcolor=f7f2a2> Ездит от края к краю со скоростью 9 </marquee>

 

Ездит от края к краю со скоростью 9

Так же можно задать для бегущей строки такие теги:

Loop — число проигрываний. Например: Loop=»5″ — ваш текст пробежит по полю пять раз, после чего пользователю нужно обновить страницу, чтобы он начал двигаться снова. Он так же может иметь любое числовое значение (либо, если вы не ставите этот атрибут, текст будет проигрываться бесконечное количество раз). Для этого тега можно задать так же значение infinite — бесконечное число проигрываний. Но проще вообще не вписывать данный тег, если вы хотите, чтобы ваш текст проигрывался столько, сколько открыта страница.

<marquee Behavior=alternate width=»300″ height=»50″ scrollamount=»3″ Loop=»5″ Bgcolor=f7f2a2> Число проигрываний — 5 </marquee>

 

Число проигрываний — 5

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

left — влево
right — вправо
up — снизу вверх
down — сверху вниз

Если вы не поставите никакого значения Direction, ваша бегущая строка будет идти, как на предыдущих примерах, всегда справа налево.

<marquee width=»300″ height=»50″ scrollamount=»3″ Direction=»left» Bgcolor=f7f2a2> Движется влево со скоростью 3 </marquee>

 

Движется влево со скоростью 3

<marquee width=»300″ height=»50″ scrollamount=»5″ Direction=»right» Bgcolor=f7f2a2> Движется вправо со скоростью 5 </marquee>

 

Движется вправо со скоростью 5

<marquee width=»150″ height=»200″ scrollamount=»2″ Direction=»up» Bgcolor=f7f2a2> Движется снизу <br> вверх со скоростью 2 </marquee>

 

Движется снизу
вверх со скоростью 2

<marquee width=»150″ height=»200″ scrollamount=»1″ Direction=»down» Bgcolor=f7f2a2> Движется сверху вниз <br> со скоростью 1 </marquee>

 

Движется сверху вниз
со скоростью 1

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>

 

Отступы 10 и 10

Можно так же сделать, чтобы ваша бегущая строка останавливалась при наведении курсора мыши (в браузере «Опера» — не работает. Работает только в 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>

 

Горизонтальная, останавливается при наведении курсора мыши

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

Of course we can not ignore the phenomenon of creeping line. I want to warn that we should not abuse it. The average visitor any melteshenie on the screen, usually annoying. In general, the presence of unjustified ticker on a website or forum can easily recognize the bad taste in dizaynerstve.

 

After that, it is quite logical question: so why need this running line, if it is not beautiful, not comfortable at all — «bad taste»?

I believe that the ticker is justified only in one case: when a small area of the screen you want to place a large amount of information, for example, numerous news, banners, links, and so forth.

 

Can it all be placed in «hidden text» using the Java script (Lesson 21). But the main disadvantage of this method is that the java script does not read the search engine, which means that your news and links posted there once will not be indexed.

MARQUEE located in the tag <marquee> </ marquee> any search engine and read the fine will lead to your site more visitors.

 

So, scrolling can be used for publication, for example, links to news site. An example of such use, you can see here: http://septemberfox.ucoz.ru/

In the right column you can see the module of the global block, which lists the completion of the site materials reference to active and they are moving from the bottom up in the window width of 160 and a height of 120 px (width = 160 height = 120). Similarly, you can make the module, showing a large number of banners on a small surface.

 

However, in order not to overload your website «flickering» better to make no more than one marquee previously thought and weighing that can be put into it.

 

So ticker freely read by search engines (as opposed to hidden text and drop-down menus working on javascript) and scrolling can put a lot of information without taking up much space.

 

Ticker can be vertical or horizontal. That is, the whole text, banners, etc., may move around the screen, or in the direction of up-down or left-right.

Tickers and all its components can be installed in any document, which is supported by HTML. To all of banners, text or any other items are displayed as scrolling text, there is a special tag pair:

 

 

<marquee> This scrolling text does not contain any additional attributes, moves horizontally from right to left </ marquee>

 

 

This scrolling text does not contain any additional attributes, moves horizontally from right to left

 

 

Like many other tags, ticker, you can set various parameters by using the appropriate attributes (properties). These tags primarily include the following:

 

Widht and Height. With attributes Widht and Height you should already be aware, if you are doing web design. It is the width and height of the window in which to play your text, displayed banners and so forth. To the window was clearly visible, I add the tag Bgcolor, which is responsible for the color.

 

 

<marquee width = «300» height = «50» Bgcolor = f7f2a2> In the box 300 by 50 px. Yellow background </ marquee>

 

In the box 300 by 50 px. Yellow background

 

 

Behavior — behavior of the text (the way of motion). It can have values:

— Scroll — is moving in one direction, gradually disappearing from view (just behaves ticker without a predetermined way traffic, so put the scroll attribute does not matter)

 

 

<marquee Behavior = scroll width = «300» height = «50» Bgcolor = f7f2a2> moves in one direction, gradually disappearing </ marquee>

 

It moves in one direction, gradually disappearing

 

 

— Slide — reaches the edge and stops (if you’ve read this far — you see scrolling standing still. To see how this tag works again refresh the page).

 

 

<marquee Behavior = slide width = «300» height = «50» Bgcolor = f7f2a2> run to the edges and stops </ marquee>

 

We reached the edge and stops

 

 

— Alternate — goes from edge to edge. I must say that the use of such marquee little profitable. So think before you put on your site that option.

 

 

<marquee Behavior = alternate width = «300» height = «50» Bgcolor = f7f2a2> Goes from edge to edge </ marquee>

 

He goes from edge to edge

 

 

To set the speed of the line, it is necessary to use attribute scrollamount. This attribute can have values from 1 to 10. For example, a very slow speed: scrollamount = «1». Further, the example of the line, driving from one end of the show, I change the speed of movement.

 

 

<marquee Behavior = alternate width = «300» height = «50» scrollamount = «2» Bgcolor = f7f2a2> Goes from edge to edge at 2 </ marquee>

 

Travels from edge to edge at 2

 

 

<marquee Behavior = alternate width = «300» height = «50» scrollamount = «9» Bgcolor = f7f2a2> Goes from edge to edge at 9 </ marquee>

 

Travels from edge to edge at 9

 

 

You can also ask for such a marquee tags:

 

Loop — the number of plays. For example: Loop = «5» — your text will run across the field five times, after which the user will need to refresh the page, he began to move again. It can also be set to any numeric value (or if you do not set this attribute, the text will play an infinite number of times). For this tag, you can specify the same value infinite — an infinite number of plays. But simply do not enter the tag if you want your text was played as much as the page opens.

 

 

<marquee Behavior = alternate width = «300» height = «50» scrollamount = «3» Loop = «5» Bgcolor = f7f2a2> number of plays — 5 </ marquee>

 

The number of playbacks — 5

 

 

Now the direction of motion. Direction tag tells the browser which direction to move tex, banners and so forth. The values for this tag:

 

left — left

right — right

up — from the bottom up

down — from the top down

 

If you do not put any value Direction, your running line will go as in the previous examples, is always right to left.

 

 

<marquee width = «300» height = «50» scrollamount = «3» Direction = «left» Bgcolor = f7f2a2> moves to the left at a speed of 3 </ marquee>

 

Moves to the left at a speed 3

 

 

<marquee width = «300» height = «50» scrollamount = «5» Direction = «right» Bgcolor = f7f2a2> moves to the right at a speed of 5 </ marquee>

 

It moves to the right at a speed 5

 

 

<marquee width = «150» height = «200» scrollamount = «2» Direction = «up» Bgcolor = f7f2a2> <br> moves from the bottom up at 2 </ marquee>

 

Moves below

up at 2

 

 

<marquee width = «150» height = «200» scrollamount = «1» Direction = «down» Bgcolor = f7f2a2> <br> moves from top to bottom at 1 </ marquee>

 

Moves downwards

at 1

 

 

Aling — align your text (this tag works well in Opera, but do not always want to work in Firefox and Explorer). It can have the following values:

 

left — on the left edge

right — on the right edge

top — the upper edge

middle — in the middle

bottom — the bottom edge

 

 

<marquee width = «150» height = «200» scrollamount = «3» Direction = «down» align = «right» Bgcolor = f7f2a2> <br> Align the right edge </ marquee>

 

Alignment

right-aligned

 

 

<marquee width = «200» height = «70» scrollamount = «3» align = «top» Bgcolor = f7f2a2> Align Top </ marquee>

 

Top alignment

 

 

You can specify the margins on the edges of the field (the tag also works well in Opera, but also do not always want to work in Firefox and Explorer):

 

vspace — indented top and bottom of the field

hspace — indent left and right

 

 

<marquee width = «150» height = «200» scrollamount = «3» Direction = «down» vspace = «10» hspace = «10» Bgcolor = f7f2a2> Indents 10 and 10 </ marquee>

 

Indents 10 and 10

 

 

You can also do your ticker to stop when the mouse (in the browser «Opera» — does not work. This only works in FF and IE). This is useful if you want the visitor might read carefully running information or would carefully consider moving banner. To do this, add the following tag structure:

 

onMouseOver = «this.stop ()» onMouseOut = «this.start ()»

 

This marquee tag would look like this:

 

 

<marquee onMouseOver = «this.stop ()» onMouseOut = «this.start ()» width = «150» height = «200» scrollamount = «2» Direction = «down» Bgcolor = f7f2a2> Vertical, <br> stops when you hover the mouse cursor <br> </ marquee>

 

Vertical,

stop when you hover

mouse

 

 

<marquee onMouseOver = «this.stop ()» onMouseOut = «this.start ()» width = «300» height = «50» scrollamount = «2» Bgcolor = f7f2a2> Horizontal stops when the mouse </ marquee>

 

Horizontal, stops when the mouse

 

 

These are the basic parameters of the running line, which are used more often.