Главная » Статьи » Веб-дизайн

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



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


Бегущая строка можеть быть текстовой и графической


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

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

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


 
Зима

Ландыш

Цветник

Осень

Теги по алфовиту
Автомобиль
К
А
С
К
О
Автомобиль


 
Атрибуты


 
  • width — ширина поля бегущей строки в пикселах или процентах от ширины окна;

  • height — высота поля бегущей строки (в пикселах);

  • hspace, vspace — интервалы по горизонтали и вертикали между текстом строки и краями ее поля (в пикселах);

  • aligh —положение текста бегущей строки в ее поле; возможные аргументы:

  • top (вверху);

  • bottom (внизу);

  • middle (посередине);

  • direction — определяет направление движения; возможные аргументы:

  • left (справа налево);

  • right (слева направо);

  • behavior — характер движения строки; возможные аргументы:

  • scroll — текст появляется от одного края и скрывается за другим;

  • slide — строка вытягивается из одного края поля и останавливается у другого края;

  • alternate — переменное направление движения, от одного края к другому, а затем обратно;

  • loop — количество повторений текста в бегущей строке, задаваемое числом; если необходимо «бесконечное» количество повторений, то следует задать аргумент в виде ключевого слова infinity.

  • Атрибут loop не влияет на поведение бегущей строки, если для атрибута behavior заданы аргументы alternate или slide;
     
    • scrollamount — устанавливает длину (в пикселах. При большом значении параметра текст движется рывками, при малом — замедленно;

    • scrolldelay — величина паузы между тактами перемещения текста в миллисекундах;

    • bgcolor — устанавливает цвет поля бегущей строки, задаваемый шестнадцатеричным числом или именем.




    •  
    •  
    • Размещая бегущую строку у себя на сайте, вы делайте сайт более интерактивным и красивым. Следует учитывать, что пренебрежение ее на сайте, в первую очередь, существенно может сказаться на посетителях. Поэтому не стоит злоупотреблять, так как это сказывается и на загрузку Web-страницы. Бегущая строка может быть как текстовой, так и графической. Ниже приведен один из самых простых ее примеров. Об остальных видах и графики чуть позже.

       
      Пример:
       
      <marquee width="470" height="17" direction="left" scrollamount="2"
      bgcolor="#F9F9F9" style="color:#000000; border:1px solid #dddddd">
      Вот так выглядит бегущая строка!</marquee>


       
      Результат:
       
      Вот так выглядит наша бегущая строка!



       
      Другие примеры Бегущей строки


 
 
 


Источник: http://samouchka-html.ucoz.ru/load/uroki_html/begushhaja_stroka/5-1-0-210
Категория: Веб-дизайн | Добавил: fotocom (30.04.2015)
Просмотров: 251 | Теги: бегущая строка, веб-дизайн, скрипты | Рейтинг: 0.0/0
Всего комментариев: 0
Имя *:
Email *:
Код *:

сайты фотоком
Посетите сайты студии ФОТОКОМ
Нижегородский фотобанк Панорама Нижнего Новгорода Фотоком-Арт Фотоком-Веб Свадебный альбом Фотоком-дети