Анимация

Анимация для Web создается на основе gif-форматов. Для этого можно применить утилиты gif-анимации (gifBuilder 0.5 для Mac, Gif Movie Gear для Windows, Ulead GIF Animator 2.0 для Windows, GIFmotion 2.1 для Mac и Windows, GifGifGif для Mac и Windows) или приложения, включающие средства анимации gif (Macromedia Fireworks, Adobe Image Ready, Animation Shop & Paint Shop Pro 5.0 для Windows). Независимо от используемого инструмента процесс создания анимационного gif-файла примерно одинаков. Выбирается несколько картинок (фреймов) одинакового размера с изображениями, представляющими движение или некоторый переходный процесс, и объединяются в последовательность. (В Photoshop можно применить и другой способ представления последовательности изображений – на основе слоев Image Ready; Image Ready формирует из слоев последовательность фреймов). Для каждого из фреймов устанавливается время задержки до появления следующего фрейма, указывается степень прозрачности, чтобы предыдущие фреймы просвечивали сквозь прозрачные области более поздних фреймов, указывается метод освобождения, предписывающий, что делать с предыдущим фреймом, когда выводится следующий. Процесс подготовки анимации итеративный, поскольку необходимо подобрать параметры наилучшим образом, чтобы анимация была выразительной.

Вопросы для самоконтроля

• Какие языки программирования применяются для описания программ-скриптов, добавляющих динамику к поведению html-документов?

• Какие известные приложения можно использовать в качестве инструментария для разработки html-документов?

• Опишите структуру html-документа!

• Что из себя представляют html-тэги?

• Для чего применяются атрибуты в тэгах?

• Перечислите правила записи значений атрибутов!

• Что из себя представляют контейнеры?

• Назовите, применяемые в тэгах, атрибуты идентификации и классов!

• Какая информация игнорируется браузерами?

• Для каких целей применяются тэги base, title, link, script, style, meta?

• Какие параметры определяются атрибутами тэга body - bgcolor, background, text, link, vlink, alink?

• Какие параметры определяются атрибутами name и http-equiv тэга meta?

• Какие значения может принимать атрибут align, применяемый во многих тэгах управления размещением текста и графики?

• Чем различаются в документе элементы блочного и in-line-типа?

• Назначение и особенности применения тэгов p, div, span, br?

Вопросы на самостоятельную проработку

• Задание цвета в HTML – атрибуты, тэги и значения атрибутов?

• Графические форматы, применяемые в Web?

• Назовите приложения, применяемые для подготовки графики для Web!

• Самостоятельно освоить приемы оптимизации графики и подготовки анимации для Web на основе gif-форматов!

К оглавлению

Лекция 13. Основные элементы языка разметки гипертекстов

Базовый набор элементов

Логические текстовые стили

Каждому контейнеру, перечисленному далее, сответствует конкретный (логический) стиль представления текста, определяемый параметрами настройки браузера. Для текста, соответствующему заголовку окна используется контейнер title, располагающийся внутри секции head документа. Для заголовков в основном тексте используются контейнеры h1, h2,…, h6 (постепенно уменьшаются размеры шрифтов и толщина букв). С перечисленными выше тэгами можно применить атрибут align, определяющий выравнивание заголовка в пределах экрана (принимающий значения – left, right, center, justify). Следующие контейнеры определяют логические стили представления текста: em, strong, dfn, code, samp, kbd, var, cite, abbr, acronym. Назначение некоторых из них:

• cite – цитируемый текст,

• code – для записи кодов программ,

• em – выделенный текст,

• strong – выделенное полужирное начертание,

• kbd – текст введенный с клавиатуры,

• abbr – аббревиатура.

Пример

<p>

<abbr title="World Wide Web">WWW</abbr>