Шаг 53.
Дополнительные инструменты Web-дизайна. Создание "бегущей строки"
На этом шаге мы рассмотрим создание бегущей строки.
Для того, чтобы сделать Web-страницу более интересной, можно расположить на ней бегущую строку. Такой эффект достигается использованием
тэга <MARQUEE> . Перечислим его основные параметры:
- BEHAVIOR - определяет способ "поведения" строки текста в процессе ее движения по экрану. Возможные значения этого параметра:
- scroll - строка периодически "выползает" с одной стороны экрана и исчезает за противоположной стороной;
- slide - строка появляется из-за одной кромки окна, перемещается по нему и останавливается у противоположной кромки;
- alternate - перемещение строки по экрану вперед-назад;
- DIRECTION - задает направление "бега" строки. Возможные значения:
- left - строка перемещается справа налево;
- right - строка перемещается слева направо;
- LOОP - определяет количество полных циклов движения строки по экрану. Если требуется, чтобы строка "бежала" постоянно, то значение данного параметра нужно задать следующим образом: LOOP=infinite;
- SCROLLAMOUNT - задает шаг перемещения строки. Он измеряется в пикселях.
- SCROLLDELAY - указывает величину временного интервала задержки, выраженного в миллисекундах, между отдельными тактами движения строки.
По умолчанию браузер Microsoft Internet Explorer в качестве минимального допустимого значения этого параметра использует временной промежуток величиной 60 миллисекунд - даже
в том случае, если задано меньшее значение. Если необходимо, чтобы текст двигался по экрану быстрее, минимальное значение временной задержки можно переопределить с помощью параметра
TRUESPEED. Этот параметр не требует значений;
- BGCOLOR - изменяет цвет фона бегущей строки;
- WIDTH и HEIGHT - изменяют размеры объекта бегущей строки. Единицы измерения - пиксели или проценты относительно текущих размеров окна браузера.
Замечание. Значения указанных атрибутов не влияют на размеры текста строки как такового!
- HSPACE и VSPACE - задают размеры полос чистого пространства, обрамляющих текст объекта бегущей строки. Параметр HSPACE служит для задания ширины
вертикальных полос слева и справа, а VSPACE - высоты горизонтальных полос сверху и снизу. Значения выражаются в экранных пикселях.
Чтобы создать объект бегущей строки, следует расположить строку текста между тэгами <MARQUEE> и </MARQUEE>. Текст бегущей строки разрешено
форматировать по обычным правилам.
Замечание. Тэг <MARQUEE> поддерживается только браузером Microsoft Internet Explorer. Остальные браузеры обычно воспроизводят объект
бегущей строки в виде статического текста.
Приведем несколько примеров использования этого тэга.
А. <MARQUEE BEHAVOIR=scroll DIRECTION=left SCROLLAMOUNT=2 SCROLLDELAY=60 BGCOLOR=Red> Сногшибательная новость! </MARQUEE> - текст будет постоянно перемещаться по экрану
(BEHAVOIR=scroll) справа налево (DIRECTION=left), шаг перемещения - 2 пикселя (SCROLLAMOUNT=2), временная задержка между перемещениями - 60 миллисекунд (SCROLLDELAY=60),
цвет фона бегущей строки - красный (BGCOLOR=Red).
Результат:
Б. <MARQUEE BEHAVOIR=scroll DIRECTION=left SCROLLAMOUNT=2 SCROLLDELAY=10 TRUESPEED> Добро пожаловать на наш Web-сайт! </MARQUEE> - аналогично предыдущему, только разрешено
установить новую минимальную временную задержку (TRUESPEED), равную 10 миллисекундам (SCROLLDELAY=10).
Результат:
В. <MARQUEE BEHAVOIR=alternate DIRECTION=right SCROLLAMOUNT=5 SCROLLDELAY=80 WIDTH=600 HEIGHT=30>Распродажа! Всего 2 дня! </MARQUEE> - текст перемещается по экрану взад-вперед
(BEHAVOIR=alternate), первоначально слева направо (DIRECTION=right), шаг перемещения - 5 пикселей (SCROLLAMOUNT=5), временная задержка между перемещениями - 80 миллисекунд
(SCROLLDELAY=80), ширина объекта бегущей строки - 600 пикселей (WIDTH=600), высота - 30 пикселей (HEIGHT=30).
Результат:
Г. <MARQUEE BEHAVOIR=scroll DIRECTION=right SCROLLAMOUNT=5 SCROLLDELAY=60 HSPACE=10 VSPACE=10>Новые фотографии! Спешите видеть! </MARQUEE> - аналогично предыдущим,
только объект бегущей строки отделяется от остального содержимого Web-страницы полями, размеры которых по 10 пикселей
(HSPACE=10 VSPACE=10).
Результат:
На следующем шаге мы рассмотрим размещение текста поверх изображения.
Предыдущий шаг
Содержание
Следующий шаг