Тег для создания бегущей строки. Как сделать бегущую строку и бегущее изображение в дневнике. Сервисы готовых открыток

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

Спецсимволы

Иногда, а порой даже часто, как например в этом сайте, в тексте не обойтись без знаков "меньше чем"-< и "больше чем"- > , но как быть если браузеры определяют или фразу заключенные в эти знаки как тег и следовательно не будут его отображать на мониторе? Или допустим Вам и вправду в тексте надо написать некий , но не для того чтобы дать очередную команду браузеру, а чтобы привести пример его написания посетителям страницы?

Для этих целей были придуманы так называемые спецсимволы.

Так например спецсимвол < - будет значить что в этом месте текста нужно поставить знак < а спецсимвол > обозначит символ >.

Все спецсимволы начинают писаться со знака & - амперсант этот знак указывает браузеру, что далее будет идти имя спецсимвола и воспринимать его следует не как текст, а как команду. Тут встаёт очередной вопрос, а как собственно в тексте предназначенного для вывода на экран поставить сам знак & - амперсант?

Для знака & тоже есть свой спецсимвол - &

Такая вот путаница получается..

Ещё, пожалуй, отдельного внимания заслуживает спецсимвол - это неразрывный пробел мы с ним уже сталкивались. Дело в том, что когда Вы пишите текст в блокноте или html редакторе "простых" пробелов между словами можно поставить сколь угодно много, но вот при чтении страницы браузером все они "удаляются" и между словами на странице будет не более одного пробела. Отсюда часто возникают проблемы с оформлением текста, красную строку, например, никак не сделать... вот и придумали люди спецсимвол он воспринимается браузером не как пробел, а как знак, только невидимый человеческому глазу.

А неразрывным он называется по тому, что группа таких пробелов воспринимается как цельное слово, следовательно, не переносится на следующую строку, если предложение подходит к установленным рамкам или же к краю окна. Так что в окне может появиться горизонтальная полоса прокрутки, если Вам это ненужно, ставьте между ними обыкновенные пробелы

Пример использования спецсимволов:

пример в примере

< /td>

< html> < head> < title> Моя первая страничка< /title> < /head> < body> < center>< h2> Привет мир!!!< /h2>< /center> < br> Это моя первая страничка! < /body> < /html>

Пример в примере… навивает на философские мысли о бесконечности…

Ну вот теперь Вы знаете, как примерно выглядят все эти примерчики по "ту сторону экрана". Кстати, раз уж начал открывать военные тайны, данный пример является таблицей из двух ячеек, одна тоненькая слева выполняет сугубо декоративную функцию.. так вот если перед Вами встанет задача нарисовать ячейку таблицы без какого либо содержания вставляйте в неё знак пробела . Помните правило здесь что то обязательно должно быть? Спецсимвол пробела один из выходов в данном случае.

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

Горизонтальная линия

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

Имеет ряд атрибутов, align -выравнивание с одним из трёх значений (center, left, right ) может быть применен, если задана длина линии атрибут width в пикселях или процентах. Так же можно задать толщину линии атрибут - size , цвет атрибут - color , и при необходимости отключить тень линии noshade .

Горизонтальная линия


Это просто линия по умолчанию:

Это линия без тени:

Это линия окрашенная в кранный цвет:

Линия длиной 250 пикселей:

Линия длиной 250 и толщиной 5 пикселей:

Линия длиной 500, толщиной 50, синяя:

Примеры выравнивания:

По моему достаточно просто и эффективно.

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

Тег заставляет текст помещённый в него двигаться в том или ином направлении, проще говоря делает его бегущей строкой. Бегущая строка имеет ряд настроек скроллинга, которые задаются следующими атрибутами:

behavior - определяет тип скроллинга, может иметь следующие значения:

• alternate - колебательные движения от края к краю
• scroll - прокручивание текста. текст будет выходить за рамки экрана и снова появляться с противоположной его стороны
• slide - прокручивание текста c остановкой.

scrollamount - скорость бегущей строки от 1 до 10.
loop задает количество прокруток бегущей строки.

direction - направление движения текста. значения:

• up - вверх,
• down - вниз,
• left - влево,
• right - вправо.

bgcolor - цвет фона бегущей строки,
height - высота строки,
width - ширина строки.

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


Бегающие строки
Бегущая строка по умолчанию
Бегущая строка слева направо
Бегущая строка бегает от края к краю
Бегущая строка со скоростью 10
Бегущая строка со скоростью 1
Эта строка будет прокручиваться только два раза
Бегущая строка с остановкой
Бегущая строка с фоном
Бегущая строка с ограничением ширены прокрутки
Бегущая строка снизу вверх
Бегущая строка с отступами от границ

Ну думаю, сами разберётесь, что к чему. Попробуйте использовать различные сочетания атрибутов для достижения нужного Вам эффекта. Добавлю лишь то, что с текстом бегущей строки можно делать то же самое, что и с обыкновенным текстом: менять размер, цвет, стиль, шрифт, сделать фразу из строки ссылкой.. прописывая нужные теги внутри тега

В этой статье я расскажу о том как сделать бегущую строку на сайте с помощью специального тега HTML - . Для начала стоит отметить, что использование бегущий строки в качестве какой-то анимации на сайте - это уже давно не модно. Про такие сайты говорят, что они из прошлого века.

На мой взгляд, бегущие строки в нынешних условиях вообще лучше не использовать. В крайних случаях их можно использовать лишь для лучшей видимости важной информации (например, актуальные акции, скидки). Есть масса других современных способов как можно донести до пользователя полезную информацию (flash-анимация, баннеры).

Также стоит отметить, что есть и другой способ создания бегущей строки помимо тега marquee. Этот способ реализуется через JavaScript, но из-за нецелесообразности его применения (он нагружает страницу), мы даже не станем его рассматривать.

HTML тег

Итак, в HTML есть специальный тег для создания бегущей строки: ... . У него есть множество атрибутов с параметрами, которые довольно просты, поэтому проблем с настройками не должно возникнуть. Ниже я разберу подробно все атрибуты и параметры тега marquee. Кстати, в него можно заключать не только текст, но и изображение и другие элементы сайта. Поэтому эта статья отвечает ещё и на вопрос как сделать бегущее изображение, объект и т.п.

Синтаксис тега

Объекты, которые должны перемещаться Атрибуты и параметры

1. width="число/процент" - задает ширину бегущей строки в пикселях/процентах. Те, кто знаком с html наверняка знакомы с таким атрибутом. Например:

• width="240px" - задает ширину в 240 пикселей;
• width="40%" - задает ширину в 40% в зависимости от ширины блока, в котором находится объект;

2. height="число/процент" - задает высоту бегущей строки в пикселях/процентах. Пример можно привести такой же как и с первым атрибутом. Например:

• height="400px" - задает высоту в 400 пикселей;
• height="30%" - задает высоту в 30% в зависимости от высоты блока, в котором находится объект;

Примечание : если бегущая строка состоит только из одной строки, то высоту можно не указывать, поскольку она автоматически определиться в зависимости от размера шрифта, который задается параметром font-size: Npx .

3. bgcolor="цвет" - задает цвет фона контейнера. Выбрать цвет можно на странице: коды html цветов . Примечание : если атрибут bgcolor не задан, то по умолчанию фоном будет цвет фона страницы.

4. behavior="параметр" - это один из самых важных атрибутов бегущий строки. Он задает поведение бегущей строки. Имеет довольно много различных вариантов:
. alternate - бегущая строка перемещается циклично: справа налево, далее слева направо (бегает между краями). Например:

А так эта строка выглядит на сайте:

Строка с атрибутом behavior="alternate"

Scroll - бегущая строка перемещается за пределы области в том направлении, которое указывает атрибут direction (с параметром), а далее циклично повторяется. На мой взгляд этот вариант встречается чаще всего. Например:

. slide - очень похож на scroll, однако в конце строка останавливается и больше не повторяется. Например:

Строка с атрибутом behavior="slide" direction="right"

5. direction="параметры" - задает направление движения бегущей строки. Может принимать следующие значения:
. down - движение сверху вниз. Например:

Строка с атрибутом behavior="scroll" direction="down"

. up - движение снизу вверх. Например:

Строка с атрибутом behavior="scroll" direction="up"

. left - движение справа налево. Примечание: left установлено по умолчанию. Например:

Строка с атрибутом behavior="scroll" direction="left"

. right - движение слева направо. Например:

Строка с атрибутом behavior="scroll" direction="right"

6. hspace="число" - задает отступ строки по горизонтали до других объектов. Аналогичный атрибут есть у популярного тега img .

7. vspace="число" - задает отступ по вертикали до других объектов.

8. loop="число" - какое количество раз нужно прокрутить содержимое. В параметре указывается число, которое и задает количество повторений. Примечание: число -1 означает бесконечный цикл прокрутки. По умолчанию установлено -1.

9. scrollamount="число" - скорость движения бегущей строки. Число задает количество пикселей, на которое переместиться объект за один такт. Примечание: по умолчанию скорость равна 6 пикс./сек. Например:

Строка с атрибутом scrollamount="10"

10. scrolldelay="число" - задает задержку между шагами бегущей строки в миллисекундах. Например:

Строка с атрибутом scrolldelay="500"

Напоследок приведу 2 примера использования бегущих строк. Пример с использованием объекта div:

Бегущий элемент div

Бегущий элемент div

Пример бегущего изображения:

текст

У этого тега много значений и атрибутов:

1) direction – устанавливает направление движения текста. Возможные значения атрибута:

• left- в правую сторону;
• right – влево;
• up – вверх;
• down – вниз;

2)behavior – отвечает за тип скроллинга. Принимаемые значения:

• scroll – движение текста в одном направлении;
• slide – одноразовое движение с последующей остановкой (всплывающий текст );
• alternate – в заданном направлении и назад.

3)loop – определяет количество циклов повторений. Возможные значения:

• infinite – бесконечное количество циклов (значение задано по умолчанию ).
• Целое число.

4)scrollamount – задает скорость перемещения бегущей строки. Принимает целое значение.

5)width – задается длина области перемещения.

6)height – задается высота области перемещения.

7)scrolldelay – устанавливает время задержки между циклами в миллисекундах.

Остальные атрибуты тега являются общестилевыми для всех элементов языка гипертекста.

Тег был создан специально под браузер Internet Explorer . До недавнего времени его не воспринимали некоторые другие браузеры, но сейчас его видят все.

И если немного «поиграться » с кодом, то можно заставить двигаться не только текст, но и картинку. А это уже начальный уровень анимации, господа!

Вот код этого примера:

Едрит-Мадрид! Куда меня несет!!!

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

Владельцам сайтов на основе CMS приведенный выше пример не подойдет. Точнее, подойдет, но нужно знать, куда можно «влепить » этот пример в html код. А это непросто.

Все CMS построены на основе php , который является серверным языком программирования. Именно на нем написан код, отвечающий за генерацию страниц сайта. То есть каждый элемент страницы сайта («подвал », «шапка ») генерируется во время выполнения кода. Так что редактировать код php своего сайта на CMS не стоит.

Бегущая строка для joomla может быть реализована с помощью установки специальных плагинов. Один из них называется Moving Text . Рассмотрим его установку по шагам:

1. Заходим в панель управления Joomla . Через пункт верхнего меню «Расширения » переходим в «Менеджер расширений ».
2. На вкладке менеджера «Установка » выбираем вариант загрузки и жмем на кнопку «Установить »:

3. Затем переходим в «Менеджер плагинов ».
4. В списке внизу находим нужный плагин. Отмечаем его и нажимаем вверху на кнопку «Изменить ». Рядом с ней находится кнопка «Включить », служащая для активации расширения:

5. В следующем окне в полях «Основные параметры » устанавливаем параметры отображения бегущей строки (длина, скорость и интервал между циклами ). После внесения изменений не забудьте нажать на кнопку «Сохранить » (вверху справа ).
6. Затем через пункт главного меню «Материалы » переходим в «Менеджер материалов ». В нижнем списке отмечаем галочкой нужный материал и жмем на кнопку «Изменить » (кружок с карандашом ).
7. В редакторе жмем на кнопку «html ». На экране откроется окно редактора кода. Туда вставляем { text=Нужный текст }. Вместо «Нужный текст » пишем то, что нам нужно, и жмем на «Обновить »:

После этого в редактируемом материале появится бегущая строка:

Другие варианты реализации бегущей строки

Бегущий текст можно реализовать не только с помощью html и установкой плагинов. Неплохим считается вариант реализации на javascript . Вот пример его действия:

Вот кусок кода, который размещается в теге :

function outmsg(msg,ctrlwidth) { msg = " --- "+msg newmsg = msg while (newmsg.length < ctrlwidth) {newmsg += msg} document.write ("") document.write ("") document.write ("") rollmsg() } function rollmsg() { NowMsg=document.Outmsg.outmsg.value NowMsg=NowMsg.substring(1,NowMsg.length)+NowMsg.substring(0,1) document.Outmsg.outmsg.value = NowMsg bannerid=setTimeout("rollmsg()",100) }

А вот кусок скрипта, который нужно поместить в месте отображения бегущей строки:

outmsg("Вы видите строку! Она бежит! УРА!!!",70)

Также можно реализовать бегающий текст с помощью библиотеки jquery :

Код примера приведен полностью. При желании css , jquery и html можно разнести по отдельным файлам:

$(function() { var marquee = $("#marquee"); marquee.css({"overflow": "hidden", "width": "100%"}); // оболочка для текста в виде span (IE не любит дивы с inline-block) marquee.wrapInner(""); marquee.find("span").css({ "width": "50%", "display": "inline-block", "text-align":"center" }); marquee.append(marquee.find("span").clone()); // тут у нас два span с текстом marquee.wrapInner(""); marquee.find("div").css("width", "200%"); var reset = function() { $(this).css("margin-left", "0%"); $(this).animate({ "margin-left": "-100%" }, 12000, "linear", reset); }; reset.call(marquee.find("div")); }); .string{ width:600px; height:30px; margin:60px auto; line-height:28px; padding: 0 10px; border-radius:4px; box-shadow:0 1px 2px #777; -moz-border-radius:4px; -webkit-border-radius:4px; background: rgb(238,238,238); background: -moz-linear-gradient(top, rgba(238,238,238,1) 0%, rgba(204,204,204,1) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(238,238,238,1)), color-stop(100%,rgba(204,204,204,1))); background: -webkit-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); background: -o-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); background: -ms-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); background: linear-gradient(to bottom, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#eeeeee", endColorstr="#cccccc",GradientType=0); } Строка с текстом для показа какого-нибудь важного объявления на сайте.

Что в итоге?

Как видно из примеров, из всех реализаций бегущей строки самым «легковесным» является вариант на html . Да и его функционал намного проще для понимания и освоения. Но такая реализация не подойдет для сайтов на CMS . Для них остаются лишь плагины.