Анимация текста

7 Январь 2009 | Автор: adminВ записи нет меток.

Тег <marquee>
Тег <marquee> определяет текст, который будет отображаться в бегущей строке окна. Тег <marquee> не является стандартным. Этого достаточно, чтобы мы не рекомендовали вам его употреблять.
Текст, заключенный между <marquee> и обязательным </marquee>, бежит в горизонтальном направлении через окно броузера. Атрибуты тега управляют областью отображения, внешним видом, выравниванием по отношению к окружающему тексту и скоростью бегущей строки. Тег <marquee> и его атрибуты игнорируются другими броузерами, но его содержимое не опускается. Оно выводится как статический текст
без учета выравнивания и прочих свойств, определенных атрибутами данного тега.

Атрибут align
Популярные броузеры размещают текст из тега <marquee> так же, как если бы это было вложенное изображение. Следовательно, можно выровнять бегущую строку по отношению к окружающему тексту.
Атрибут align принимает значения top, middle и bottom, устанавливающие, что определенная точка строки будет выровнена с соответствующей точкой в окружающем тексте. Таким образом:
<marquee align=top>
выравнивает верхний край области вывода текущей строки с верхним краем облегающего текста.

Атрибуты behaviour, direction, loop
Вместе эти атрибуты управляют стилем, направлением и продолжительностью отображения бегущей строки. Атрибут behaviour принимает три значения:
scroll (принимается по умолчанию)

Значение scroll заставляет бегущую строку вести себя подобно огромной бегущей строке на Times Square. Первоначально область ее размещения пуста. Текст начинает бежать от одного края (атрибут direction определяет от которого), добегает до противоположного
и затем исчезает. В конце концов, область текущей строки снова пуста.

slide

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

alternate

Это значение порождает следующий эффект: текст бегущей строки сразу же полностью выводится на одном крае области вывода, затем течет до противоположного края отведенного пространства, где «отражается» и бежит назад к начальной точке своего движения.

Если значение атрибута behaviour явно не указано, то по умолчанию он принимает значение scroll.
Атрибут direction устанавливает направление движения строки на экране. Допустимые значения – это left (принимается по умолчанию) или right. Заметьте, что начальный пункт движения находится на краю, противоположном значению direction. Значение left определяет, что текст начинает движение справа и перетекает налево. Помните
также, что текст, бегущий слева направо, противоречит интуиции людей, читающих слева направо. Атрибут loop определяет число «прогонов» строки. Если ему присвое
но целое значение, строка пробежит по экрану указанное число раз. Если атрибуту loop назначено значение infinite, строка будет пробегать раз за разом, пока пользователь не перейдет к другому документу.

Соберем несколько описанных атрибутов вместе:
<marquee align=center loop=infinite>
Кумкваты без начинки
………. Очень вкусно!
</marquee>

Сообщение из примера появляется у правого края (по умолчанию), пробегает, двигаясь налево, весь свой путь и пропадает из окна, затем появляется снова и снова, пока пользователь не перейдет к другому документу. Обратите внимание на промежуточные точки и пробелы в текст примера. Вы не можете присоединить одну бегущую строку к другой. Отметим также, что строка стиля slide неприятно дергается при повторениях и ее следует запускать лишь однажды, тогда как другим значениям behaviour повторение показано.

Атрибуты hspace и vspace
Атрибуты hspace и vspace позволяют оставлять некоторое расстояние между бегущей строкой и окружающим текстом, что делает ее более заметной.
Оба атрибута принимают целые значения, определяющие нужные расстояния в пикселах. Атрибут hspace оставляет промежутки над бегущей строкой и под ней. Атрибут vspace вводит их слева и справа от бегущей строки. Чтобы оставить промежутки в 10 пикселов со всех сторон бегущей строки, напишите:
<marquee vspace=10 hspace=10>

Альтернативная поддержка аудио

3 Январь 2009 | Автор: adminВ записи нет меток.

Существуют другие способы вставить аудио в документы. Эти способы задействуют более общие механизмы, поддерживающие вложение и других мультимедийных элементов. Самая обычная альтернатива тегу – это тег , изначально введенный Netscape и вытесненный тегом в cтандартах HTML и XHTML.

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

Тег bgsound

1 Январь 2009 | Автор: adminВ записи нет меток.

Используйте тег для фонового исполнения звуковой дорожки. Этот тег поддерживают только Internet Explorer и Opera. Все другие броузеры его игнорируют. Он загружает и запускает аудиофайл при загрузке содержащего его документа. Фоновое звуковое сопровождение будет возобновляться при обновлении отображаемого документа.

Звуковой фон

29 Декабрь 2008 | Автор: adminВ записи нет меток.

Существует еще один мультимедийный элемент, как правило доступный веб серферам: это аудио. Большинство броузеров обращаются с аудио как с отдельными документами, которые исполняются специальными вспомогательными приложениями, апплетами или плагинами. Internet Explorer и Opera, кроме того, имеют встроенный звуковой декодер и поддерживают специальный тег (), позволяющий интегрировать аудиофайл с документом в качестве фонового звукового сопровождения страницы.

Весьма похвально, что разработчики Internet Explorer и Opera предоставили механизм, который аккуратно интегрировал аудио с HTML 4 и XHTML документами. Возможности, открывающиеся с применением аудио, очень заманчивы. Но в то же время мы предостерегаем авторов, напоминая им, что, во первых, специальные теги и атрибуты для аудио не работают с другими броузерами, и, во вторых, неизвестно, поддержат ли в конечном счете этот метод большинство броузеров.

Дополнения и расширения тега body

27 Декабрь 2008 | Автор: adminВ записи нет меток.

Атрибуты, управляющие фоном и полями документа, а также цветом
текста, используются с тегом <body>.

Атрибут bgcolor

Стандартный (но уже объявленный нежелательным) способ изменить принятый по умолчанию цвет фона состоит в использовании атрибута bgcolor для тега <body>. Как и для атрибута color тега <font>, обязательное значение bgcolor может быть выражено одним из двух способов – с помощью указания красного, зеленого и синего (RGB) компонентов выбранного цвета или его стандартного наименования. Приложение G
содержит RGB кодировки цветов вместе с таблицей наименований, которые следует применять в качестве значений атрибута bgcolor.

Установить цвет фона легко. Чтобы получить ярко красный фон, используя RGB кодировку, попробуйте написать:
<body bgcolor=»#FF0000″>
А более нежный фон, персикового цвета, так:
<body bgcolor=»peach»>

Атрибут background

Если однотонный фон вас не устраивает, то с помощью атрибута background тега <body> можно поместить на его место изображение.
<body background=»pics/wood_panel.gif»>

Обязательным значением атрибута background является URL изображения. Броузер автоматически повторяет (в виде мозаики) картинку по вертикали и по горизонтали, заполняя все окно.

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

Атрибут bgproperties

Популярные броузеры больше не поддерживают атрибут расширение bgproperties для тега <body>. Он работает только вместе с атрибутом background. Атрибут bgproperties имеет лишь одно значение, fixed. Оно «замораживает» фоновое изображение, которое перестает прокручиваться вместе с другим содержимым окна. И, следовательно, фоновое
изображение H2Omark.gif может служить для документа гербовой бумагой с водяными знаками:
<body background=»pics/H2Omark.gif» bgproperties=»fixed»>

Атрибуты style и class

Также можно устанавливать различные относящиеся к стилю свойства тела при помощи CSS. Но хотя для оформления всего содержимого тела можно включить атрибут style в тег <body>, мы рекомендуем устанавливать стили для всего тела на уровне документа (используя тег <style> в его заголовке) или на уровне собрания документов (применяя импортируемую таблицу стилей). Используйте атрибут class и его значение для применения характеристики заранее определенного класса стилей к содержимому тега <body>. (Поскольку в одном документе может быть только одно тело, зачем еще нужно название класса?)

Проблемы с цветами текста, фона и гиперссылок

24 Декабрь 2008 | Автор: adminВ записи нет меток.

Играя с цветами фона, вы также столкнетесь с множеством проблем.

• Выбранный цвет тешит ваш глаз, а пользователям кажется ужасным. Зачем же их раздражать, отменяя ту окраску фона, которую они сами установили для применения по умолчанию?
• В то время как вы, скажем, принадлежите к школе дизайнеров, твердо придерживающейся принципа «светлый текст на темном фоне», многим людям нравится также стиль «темный текст на светлом фоне», сохраняющий популярность последние три тысячи лет.
• Вместо того чтобы плыть против течения, допустите на минуту, что пользователи уже настроили свои броузеры на устраивающую их цветовую схему.
• Некоторые читатели – дальтоники, не различающие цветов. То, что будет прелестным красочным сочетанием для вас, может оказаться совершенно неразборчивым для них. Одну комбинацию следует особенно избегать: зеленый цвет для неиспользованных ссылок и красный – для тех, что уже были посещены. Миллионы людей не различают красный и зеленый.
• По тем же причинам активные, неиспользованные и использованные гиперссылки на дисплее с ограниченным набором цветов могут оказаться неразличимыми.
• Изменяя цвета текста, особенно в случае использованных и неиспользованных гиперссылок, вы можете совершенно запутать читателя. Достаточно сказать, что это эффективно стимулирует пользователей к экспериментам со страницей. Они будут щелкать на ссылках там и здесь, разучивая вашу цветовую схему.
• Большинство дизайнеров веб страниц не получили специального образования в области когнитивной психологии1, изящных искусств или промышленного дизайна, но чувствуют себя уверенно, подбирая цвета для документа. Если вам нужно принять цветовые
решения, обратитесь к профессионалу.

Цвета документа и фоновые изображения

22 Декабрь 2008 | Автор: adminВ записи нет меток.

Стандарты HTML 4 и XHTML предоставляют множество атрибутов для тега <body>, позволяющих устанавливать цвета текста, ссылок, других элементов и, кроме того, определять изображение, которое будет применяться для создания фона документа. Все популярные броузеры расширяют множество этих атрибутов, чтобы включить поля страницы и улучшить управление фоновым изображением. И разумеется, новейшие технологии таблиц стилей, встроенные в современные броузеры, позволяют манипулировать всеми этими параметрами отображения.

Проблемы с фоновыми изображениями

20 Декабрь 2008 | Автор: adminВ записи нет меток.

Здесь перечислены некоторые неприятности, связанные с фоновыми изображениями.
• Время, необходимое на загрузку документа, увеличивается за счет загрузки фонового изображения, до завершения которой вывод документа не происходит.
• Фоновое изображение занимает место в локальном кэше броузера, порой выталкивая изображения, содержащие действительно полезную информацию. Это может увеличить время загрузки других документов, даже не включающих фоновой живописи.
• Цвета изображения оказываются иногда недоступными для дисплея пользователя, заставляя броузер «расщеплять» исходную палитру. В результате большие области, представленные в оригинале одним цветом, будут заполнены чередующимися слоями различной, хотя и близкой по цвету окраски. Документ, вероятно, будет труднее читать.
• Поскольку броузеру приходится постоянно перерисовывать фоновое изображение (а это совсем не то же самое, что заполнить область одним цветом), прокручивание документа может занимать значительно больше времени.
• Даже если все хорошо выглядит на дисплее, напечатанный поверх изображения текст всегда трудно, а бывает и невозможно прочитать.
• Шрифты на разных машинах могут сильно различаться. Те, что неплохо сочетаются с выбранным фоном на вашем броузере, поройнельзя будет прочитать на другом компьютере.

Свойство vertical-align

18 Декабрь 2008 | Автор: adminВ записи нет меток.

Свойство vertical-align управляет положением элемента по отношению к содержащей его строке. Его допустимыми значениями являются:

Baseline
Выравнивает базовую линию элемента с базовой линией охватывающего элемента.

Middle
Выравнивает середину элемента с серединой охватывающего элемента. (Обычно середина – это верх строчной буквы).

sub
Элемент выводится как подстрочный индекс.

super
Элемент выводится как надстрочный индекс.

Text-top
Выравнивает верхний край элемента с верхним краем шрифта охватывающего элемента.

bottom
Выравнивает нижний край элемента по нижнему выносному элементу текущей строки.

Кроме того, процентное значение указывает положение относительно базовой линии текущей строки, так что значение 50% приподнимает элемент на половину высоты строки над базовой линией. Значение 100% помещает элемент ровно на высоту строки ниже базовой линии.

Все популярные броузеры сходятся в том, как следует располагать изображения относительно линии текста для значений baseline (которое устанавливается по умолчанию и соответствует отсутствию выравнивания по вертикали), middle (но не center), super (но не sub), text-top, text-bottom, top (то же самое, что text-top; но не bottom), а также для положительных и отрицательных значений относительного смещения.

А теперь обсудим различия. Броузер Firefox интерпретирует значение center так же, как Internet Explorer, причем иначе, чем значение middle, Netscape считает значение center идентичным значению middle, а Opera вообще не распознает его. Что касается значения
sub, Netscape соглашается с Firefox и выравнивает нижнюю сторону изображения по крайней строчке нижнего выносного элемента. При этом Opera помещает изображение явно ниже базовой линии, но не так низко, как Internet Explorer, у которого изображение оказывается чуть выше следующей строчки текста.

В отношении значения bottom броузер Opera соглашается с Internet Explorer, выравнивая нижнюю границу изображения по линии, проведенной чуть выше следующей строчки текста. Firefox и Netscape располагают нижнюю сторону изображения по крайней строчке нижнего выносного элемента.

Видеорасширения

14 Декабрь 2008 | Автор: adminВ записи нет меток.

Internet Explorer поддерживает специальные видеорасширения атрибута тега <img>, которые позволяют вам встраивать видеоролики в HTML документы. Это controls, dynsrc, loop, и start. Они не являются частью HTML 4 и вряд ли станут стандартными в XHTML. Пользователям приходится явно включать эту функциональность броузера Internet
Explorer флажком «Воспроизводить видео на веб страницах» на вкладке «Дополнительно».

Эквивалентное поведение других популярных броузеров достигается за счет программных расширений, известных как плагины (plug-ins). Плагины доставляют читателям лишние хлопоты: каждый пользователь должен раздобыть и установить подходящую программу, прежде чем сможет просматривать встроенное в страницу видео. Расширения тега <img>, которые принял Internet Explorer, напротив, делают видео собственной частью броузера.