А

А.
Леше в
Создание
интерактивного
web-сайта
ББК 32.988.02я7
УДК 681.324(075)
Л54
Л54 Создание интерактивного web-сайта: учебный курс / Д. Лещев. — СПб.:

Питер, 2003. — 544 с.: ил.
ISBN 5-314-00033-4
Книга посвящена созданию web-сайта: его разработке, дизайну, верстке и публикации в Сети.
В ней приводится описание работы с различными приложениями, которые используются при созда-
нии web-страниц. Основное внимание уделяется созданию интерактивных эффектов, не требующих
написания серверных сценариев, а также описанию двух альтернативных технологий — JavaScript
и Flash, с помощью которых можно «оживить» страницы своего сайта. Для удобства книга допол-
нена краткими справочниками по HTML, Flash, JavaScript и ActionScript, а также описанием ресур-
сов Интернета и новинок Flash MX.
ББК 32.988.02я7
УДК 681.324(075)
.
Информация, содержащаяся в данной книге, получена из источников, рассматриваемых издательством как надежные. Тем не
менее, имея в виду возможные человеческие или технические ошибки, издательство не может гарантировать абсолютную
точность и полноту приводимых сведений и не несет ответственности за возможные ошибки, связанные с использованием книги.
ISBN 5-314-00033-4 © ЗАО Издательский дом «Питер», 2003

Краткое содержание
Выражение признательности 14
Введение ie
Занятие 1. Спасение утопающих 19
Занятие 2. О пользе бесплатного сыра 26
Занятие 3. Сам себя не похвалишь 56
Занятие 4. Фильм на Flash 86
Занятие 5. Реклама — двигатель торговли . . ю?
Занятие 6. К сожаленью, день рожденья ш
Занятие 7. Славный праздник Новый год 155
Занятие 8. Семь раз отмерь ш
Занятие 9. Один раз отрежь 198
Занятие 10. И столяр, и плотник 220
Занятие 11. Встречают по одежке 238
Занятие 12. Делу — время 262
Занятие 13. Что наша жизнь? — Игра зоз
Занятие 14. Итого 343
Приложение 1. Ресурсы Интернета ззо
Приложение 2. HTML 4 355
Приложение 3. JavaScript 408
Приложение 4. Flash 443
Приложение 5. ActionScript 477
Приложение 6. Новые возможности Flash MX 519
Толковый словарик Интернета ззо
Литература 537
Алфавитный указатель 539
Содержание
Выражение признательности н
Введение is
Предположения автора относительно своего читателя 16
Что нас ждет 17
От издательства 18
Занятие 1. Спасение утопающих 19

Интернет для каждого 19
Интерактивность 20
Серверы, предоставляющие бесплатный хостинг 22
www.narod.ru 22
www.geocities.com 23
Инструменты создания Web ' 23
HTML и JavaScript 23
Flash 24
Куда путь держим? 25
Что нового мы узнали 25
Занятие 2. О пользе бесплатного сыра 26

Мастерская на www.narod.ru 26
Главная страница 27
Регистрация 28
Мастерская 31
Создание сайта 31
Редактирование сайта 36
Интерактивные элементы 41
Под крылом www.geocities.com 48
Регистрация 48
Строительство сайта 50
Редактирование сайта 52
Добавление интерактивных элементов сайта 52
www.spylog.runwww.hotlog.ru 53
www.thecounter.com 54
Занятие 3. Сам себя не похвалишь 56

Создание сайта на HTML 56
Дизайн 57
Навигация по сайту 58
Подготовка текста 58
Подготовка графики 59
Еще раз о дизайне 65
Создание элементов оформления 66
Верстка 68
Тестирование 83
Размещение в Сети 84
Учитесь в Сети 84
Занятие 4. Фильм на Flash 86

Знакомство с Flash 87
Рабочая среда Flash 87
Сайт-фильм 90
Слои 91
Фон 91
Рамка 93
Логотип 94
Меню 95
Содержание 96
Фотоальбом 97
Растворение текста 97
Эффект интерактивности 98
ActionScript 99
Задание собственной палитры во Flash . 100
Создание и настройка градиентов 101
Запись на диск набора цветов 103
Растровая заливка 104
Изменение HTML-страницы 105
Занятие 5. Реклама — двигатель торговли ю?

Путешествия в Интернете 107
Поисковые службы 108
Раскрутка сайта 109
Регистрация в поисковых системах и каталогах 110
Обмен ссылками 111
Службы обмена баннерами 111

Еще несколько советов 111
Что такое баннер 112
Малярное дело—тонкое 113
Баннерные стандарты 114
Меню 115
Рисунок 115
HTML-код 116
Баннеры с JavaScript 117
Бегущая строка 117
Картинки-кнопки 120
Анимированный текст во Fl?sh 123
Занятие 6. К сожаленью, день рожденья ш

На этом занятии 132
Электронные открытки 133
Outlook Express 133
Почта Netscape 136
Открытка и согласованная анимация 137
Рисуем паровоз 137
Пейзаж, облака и дым из трубы 139
Поздравления 140
Открытка-сюрприз 144
Работа с растровым изображением 144
Рисуем яблоко 145
Кнопка 146
Рисуем дальше 148
Руки и морфинг 151
Занятие 7. Славный праздник Новый год iss

Сценарий 155
Начало фильма 157
Сцена Украшение 161
Елочные шарики 162
Сер.пантин 164
Звезда 166
Свечи 168
Сцена Электросеть 172
Сцена Темнота 175

Сцена Распаковка 176
Сцена Последняя 179
Звук 181
Занятие 8. Семь раз отмерь ш

Этапы работы 184
Разработка общей концепции сайта 185
Расскажите историю 186
Частная собственность 188
Идеология сайта 189
Дизайн 189
Идея 189
Макет 191
Цветовая гамма 192
Выбор шрифтов 193
Стиль 194
Фреймы 194
Занятие 9. Один раз отрежь 198

Структура сайта 198
Навигация 200
Кодировка 203
Идеология документа 204
Верстка 204
Советы по верстке 205
Браузеры 207
Количество цветов 210
Разрешение экрана 211
Поддержка текстовых браузеров 212
:
Тестирование фильма 212
Дизайнерские хитрости 214
Тестирование сценариев JavaScript 214
Размещение и обновление сайта 217
8 Содержание
Занятие 10. И столяр, и плотник 220

Работа в Word 221
Ввод специальных символов 226
Графика в Сети 227
Несколько советов 228
Золотое сечение 228
Форматы графических файлов . . - . . • 229
Атрибут alt 233
Размеры файлов 233
Графический текст 234
Графический текст во Flash 235
Anti-aliasing 236
Занятие 11. Встречают по одежке 238

Графические ссылки 239
Нарезка изображений 239
Изображения-карты (Image map) 240
Метки на странице 241
Создание ролика-заставки 242
Простой индикатор загрузки 242
Ноты 243
Нотная строка 245
Расположение нот и звук 246
Индикация 246
Замена и компрессия звука 247
Создание заставки во Flash 248
Символы капель 249
Остальные символы 253
Эффекты: интерактивные и не очень 255
Интерактивные эффекты 255
Полезные сценарии 257
Создание часов 260
Занятие 12. Делу — время 262

Формы 263
Ter<FORM> 263
Кнопки 263
Картинка 264
Текст 265
Текстовое поле 268
Флажок 271
Переключатель 272
Раскрывающийся список 273
Отправка данных формы 274
Пересылка данных формы между страницами 276
Ссылка на e-mail 277
Готовые формы и услуги 277
Гостевые книги 277
Чаты 279
Опросы 279
Рассылка 279
Размещение информации с других сайтов . 280
Формы во Flash 281
Текст и переменные 281
Использование внешних данных 289
Меню 298
Ссылка на web-страницу и e-mail 301
Обмен данными между Flash и JavaScript 303
Занятие 13. Что наша жизнь? — Игра зоз

Создание игры на JavaScript 308
Принцесса или тигр? 309
Ловля в паутине 318
Создание простой аркадной игры на Flash 324
Лабиринт 325
Клипы 333
Замена указателя мыши 341
Занятие 14. Итого 343

Виртуальный мир 344
Белый лист 345
HTML и JavaScript 346

Flash 346
Сайт или фильм? 346
HTML 346
JavaScript 347
Flash 347
Приложение 1. Ресурсы Интернета ЗБО

Бесплатный хостинг 350
Другие бесплатные ресурсы 352
Учебники, руководства, статьи, форумы 353
Flash 353
HTML 354
JavaScript 354
Приложение 2. HTML 4 355

Объявления в документе 355
Описание структуры HTML-документа 355
Заголовок документа 357
Фреймы 359
Сценарии 363
Изображения-карты 363
Тело документа 365
Текстовые блоки и глобальная структура документа 365
Выделение частей'текста 368
Управление шрифтами 372
Дополнительные теги форматирования текста 374
Списки 375
Встроенные объекты 377
Таблицы 382
Формы 388
Нестандартные теги 396
Стандартные атрибуты 402
Стандартные цвета 406
Приложение 3. JavaScript 408

Объекты JavaScript, их методы и свойства . . : 408
Функции и свойства верхнего уровня 426
Операторы JavaScript 428
Объекты HTML 434
Работа с разными браузерами 442
Содержание 11
Приложение 4. Flash 443

Меню 443
Панели 452
Инструменты и модификаторы 472
Приложение 5. ActionScript 477

Основные действия (Actions) 477
Операторы (Operators) 484
Побитовые операторы (Bitwise Operators) 487
Операторы присваивания (Compound Assignment) 488
Строковые операторы (String Operators) 490
Функции (Functions) 490
Строковые функции (String Function) 493
Свойства (Properties) 494
Объекты (Objects) 496
Массивы (Array) 496
Логические выражения (Boolean) 498
Цвет(Со1ог) 499
Дата (Date) 499
Клавиатура (Key) 503
Математические функции (Math) 505
Мышь (Mouse) 507
Клипы (MovieClip) 507
Числа (Number) 509
Объекты (Object) 510
Выделение (Selection) 510
Звук (Sound) 510
Строковые выражения (String) 511
XML 513
XMLSocket 516
Другие действия 516
Приложение 6. Новые возможности Flash MX 519

Разработчики и дизайнеры 519
Совместимость 522
Инструменты 522
Панели 523
Панель Properties (Свойства) 523
Новое —еще не забытое старое 525
Actions (Действия) 525
Reference (Справка) 527
Debugger (Отладчик) 527

Accessibility (Специальные возможности) 527
ActionScript 528
FScrollBar 528
Прочее 529
Толковый словарик Интернета . 530

Литература 537
Памяти отца, Лещева Владимира Филипповича, посвящается
Выражение признательности
Web-сайт можно сделать в одиночку, книга же редко бывает плодом труда одно-
го человека. Множество людей, знакомых и незнакомых, вольно или невольно
оказывается вовлечено в создание книги. Кто-то подскажет хорошую идею или
даст совет, кто-то просто поможет пробираться через тернии жизни. Не скажу,
что все они становятся авторами книги, но, безусловно, без них она вряд ли
появилась бы.
И получается, что первый раздел книги больше всего напоминает передачу
«Поле чудес», на которую приходят в основном не ради подарков, а чтобы пере-
дать привет всевозможным родственникам и знакомым. Не хочется уподоблять-
ся шоу, но в жизни нам часто бывает некогда благодарить людей, близких и не
очень, без которых жизнь была бы серой и пасмурной. А сейчас у меня есть ве-
ликолепная возможность выразить свою признательность, которой я и восполь-
зуюсь.
Сначала надо поблагодарить все сообщество Интернета, существованию которо-
го такие книги, как эта, обязаны своим рождением. Затем очень хочется побла-
годарить компьютерную редакцию издательства «Питер» в целом и некоторых
ее представителей в частности: Екатерину Строганову, главного редактора, дав-
шую мне возможность поработать в этой интересной команде; Илью Корнеева,
заведующего редакцией, за гуманное отношение к своим подчиненным; Евгению
Саргаеву, руководителя проекта и редактора в одном лице, внесшую в книгу
значительные изменения и улучшения; Игоря Жаркова, который начинал вести
проект, за его строгость и интеллигентность; верстальщиков, корректоров и ху-
дожников, за их профессиональную работу над книгой; и, наконец, всех осталь-
ных сотрудников редакции — за доброе отношение. Без этих людей книга точно
не увидела бы свет.
Теперь настал черед друзей и знакомых. Во-первых, хочется выразить благодар-
ность петергофским одноклассникам и однокурсникам за хорошую компанию в
годы юности. Жаль, что мы редко встречаемся. Особая благодарность — Алек-
сандру Иванову и Евгению Ноткину за помощь в решении житейских проблем.
Руслану Асфину, Наталии Нумеровой и другим обитателям моей панели ICQ —
спасибо за общение и участие. Огромная благодарность научному редактору
книги, Екатерине Васильевой, проверившей все сценарии JavaScript и HTML-
страницы, а также терпеливо отвечавшей на все мои многочисленные вопросы.
Как ни мала вероятность, что эта книга попадет к ним в руки, отдельно стоит
поблагодарить учителей и преподавателей, не отбивших желания учиться и ис-
кать себя. Отдельное спасибо Анне Александровне Тишковой за ее творческое
преподавание языка и литературы.
Особую благодарность необходимо выразить моему институтскому начальнику
Сергею Васильевичу Козыреву за его долготерпение и снисходительность к
моим отвлеченным занятиям, а также другим сотрудникам центра за человече-
ское отношение.
Выражение признательности 15
И, наконец, я просто обязан поблагодарить самых близких мне людей, которые,

возможно, были обделены вниманием во время написания книги. Хочу выра-
зить бесконечную благодарность своим родителям, Владимиру Филипповичу и
Ираиде Степановне. Конечно, до педантичности моего папы мне далеко, но при
работе над книгой я старался быть похожим на него и в этом. Огромное спасибо
родителям моей жены, Анатолию Васильевичу и Людмиле Васильевне, за под-
держку и посильную помощь. Конечно, хочется поблагодарить сына Елисея за
его терпение и мужественное отношение к моей «привязанности» к компьюте-
ру, а также за непосредственное участие в создании книги. Огромная благодар-
ность моей жене Ирине за ее терпение и любовь. Я тоже тебя и Ильку люблю!
Надеюсь, что у меня теперь будет немного больше времени на общение с вами.
Введение
Как хризантемы расцвели
У каменщика во дворе
Среди разбросанных камней!
Мацуо Басе''
Предположения автора
относительно своего читателя
Адресуя кому-то свои слова, мы всегда строим некоторые предположения отно-
сительно их получателя. Мы ожидаем, что наши слова будут поняты, или, на-
оборот, даже не предполагаем этого. В зависимости от этого мы можем попы-
таться найти другие слова, по-другому построить фразы или вообще обойтись
без ненужного сотрясания воздуха или порчи бумаги.
Аналогично и я, автор данной книги, делаю определенные предположения отно-
сительно своего будущего читателя. Первое предположение касается уровня
культуры чтения компьютерной литературы. То есть я считаю, что человек, от-
крывший данную книгу и желающий освоить новую (а для кого-то, может быть,
уже хорошо известную) технологию создания кусочка виртуального мира, уже
имеет некоторое представление о компьютерах, а именно:
• Он знает, что слово «мышь» обозначает не только всем известного грызуна,
но и графический манипулятор — одну из аппаратных составляющих совре-
менного компьютера — и его указатель на экране.
• Он не станет стучать мышью по монитору в условленном месте, столкнув-
шись с выражениями «подвести мышь», «щелкнуть мышью» и т. д.
• Он знает или, по крайней мере, догадывается о значении слов «монитор»,
«компакт-диск», «гибкий диск» и «жесткий диск».
• Он имеет представление об интерфейсе современных программ, и слова
«окно», «флажок», «поле», «список» и т. п. вызывают у него правильные ас-
социации.
• Он знаком с устройством файловой системы, и файлы, папки и директории
не вызывают у него благоговейного ужаса.
• В крайнем случае, при встрече неизвестного ему термина, которого не ока-
жется в указателе данной книги, он будет способен отыскать его смысл, на-
пример, в книгах из списка литературы.
Второе и главное предположение состоит в том, что читатель данной книги дей-
ствительно хочет создать свой персональный интерактивный сайт. То есть он
В переводе В. Марковой.
Введение 17
способен выделить на реализацию данной задачи не только свое время, но и не-

много душевных сил и способностей. Ведь вы собираетесь создать не что-ни-
будь, а своего доверенного представителя в виртуальном мире!
И последнее. Задумайтесь: может быть, создание своего сайта — это повод изме-
нить жизнь к лучшему?
Что нас ждет

Как же будет проходить наш курс обучения началам web-мастерства?
На занятии 1 вы узнаете, что такое интерактивность и на каких серверах проще
всего построить свой сайт.
На занятии 2 вы научитесь создавать персональные страницы на двух серверах:
www.narod.ru и www.geocities.com, а также размещать на них некоторые интерак-
тивные элементы.
Занятие 3 будет «домашним». Мы будем учиться создавать сайт на своем ком-
пьютере. А потом, естественно, разместим его в Сети.
Занятие 4 будет посвящено Flash. Мы познакомимся с программой и создадим
фильм-сайт.
Тема занятия 5 — маркетинг. Точнее, создание и размещение рекламных роли-
ков — баннеров. Мы научимся размещать на своей страничке элементы чужих
сайтов, а также затронем такую важную проблему, как раскрутка сайта.
Занятие 6 посвящено одной из немногих радостей в жизни — дарению подар-
ков. Подарки у нас будут виртуальные, но не менее приятные для получателя -
электронные интерактивные открытки.
Занятие 7 продолжит тему подарков. На этот раз открытка будет новогодней.
Елка, свечи, шампанское — все оживет с вашей помощью и благодаря Flash.
Занятие 8 осветит общие проблемы web-дизайна. Прежде чем приступать к делу,
его надо спланировать, а главное — придумать идею, которая вдохнет жизнь в
ваше детище.
На занятии 9 мы обсудим разработку структуры сайта, верстку и тестирование,
а также узнаем, какие браузеры и мониторы встречаются у жителей Интернета.
Занятие 10 посвящено работе над текстом, простым и графическим. Мы также
коснемся некоторых деталей работы с графикой в Сети.
На занятии 11 мы вплотную подойдем к проблеме создания достаточного боль-
шого сайта. Театр начинается с вешалки, а сайт — с заглавной страницы. Кроме
всего прочего, мы коснемся того, как вдохнуть интерактивность в HTML-файл.
Занятие 12 — деловое. В нем речь пойдет об опросах, гостевых книгах, форумах
и т. д. В процессе работы мы узнаем, как создавать и использовать формы в HTML
и Flash.
Делу — время, потехе — час, и этот час настанет на занятии 13. Пора и отдох-
нуть — позади дюжина уроков! Вы узнаете, как создать собственную игру для
посетителей сайта.
Занятие 14 — подведение итогов. Конец учебного курса.
18 Введение
Кроме занятий в книге есть приложения и алфавитные указатели. В них собра-

на справочная информация, которая может быть вам полезна при работе над ма-
териалами занятий и потом, когда вы станете полноценным жителем Web.
Приложение 1 — это полезные ресурсы Интернета: хостинг, учебники, форумы
и многое другое.
В приложении 2 собраны теги HTML. Если вам будет непонятен какой-нибудь
пример кода web-страницы, попробуйте заглянуть сюда.
Приложение 3 содержит описание основных команд, объектов, их свойств и ме-
тодов языка сценариев JavaScript.
В приложении 4 собрана краткая характеристика возможностей Flash 5.
В приложении 5 находятся команды ActionScript — языка сценариев Flash.
Последнее приложение посвящено краткому обзору новых возможностей оче-
редной версии Flash — Flash MX.
Краткий словарик Интернета содержит доступное объяснение некоторых слов
и выражений, которые могут вам встретиться на просторах Всемирной сети.
Доброго пути! До встречи на первом занятии!
От издательства
Ваши замечания, предложения, вопросы отправляйте по адресу электронной
почты comp@piter.com (издательство «Питер», компьютерная редакция).
Мы будем рады узнать ваше мнение!
Все файлы примеров, приведенных в книге, вы можете найти по адресу
www.piter.com/download.
На web-сайте издательства www.piter.com вы найдете подробную информацию
о наших книгах.
Занятие 1
Спасение утопающих
Бабочки полет
Будит тихую поляну
В солнечном свету.
1
Мацу о Басе'
Итак, мы приступаем к нашему первому занятию. О чем оно будет? Во-первых,

мы обсудим, для чего нужен Интернет и зачем нужна персональная страничка.
Во-вторых, какие инструменты и материалы для ее создания нам понадобятся.
В-третьих, где на бескрайних просторах виртуального мира ее можно будет раз-
местить. Здесь мы также обсудим, что такое интерактивность.
Интернет для каждого

Как только не называют Интернет: шагом в информационное будущее и Все-
мирной паутиной, виртуальной свалкой и болотом — эпитетов хватит на любой
вкус и цвет. Как его ни называй, главное остается: в нем представлено все и вся.
Практически любая информация в том или ином виде уже «попала» во Всемир-
ную паутину. А есть ли там информация о вас лично? Если нет — данная книга
поможет вам создать и опубликовать свою персональную страничку {сайт) и
тем самым внести свой вклад в расползание виртуального болота.
Одним из сильнейших эгоистических мотивов деятельности человека является
желание прославиться, стать широко известным. Если раньше для этого надо было
обладать недюжинными талантами, то в нынешнее время планка требований все-
мирной известности падает все ниже и ниже. Даже не обязательно становиться
действующим лицом одного из многочисленных ток-шоу, достаточно разместить
свой персональный сайт в Интернете. Конечно, не стоит ожидать, что к вам тут
же придет всемирная популярность, да и что вы будете делать с миллионами
любовных или деловых посланий? Но вдруг ваша страничка позволит вам
встретиться со своими однокашниками и однокурсниками, бывшими коллегами
или, может быть, с королевой еще не угаснувшей первой любви. Кто знает...
В любом случае, стоит попробовать: самовыражение еще никому не вредило.
Что вы теряете? Пару часов на чтение данной книги и пару часов на практику
1
20 Занятие 1. Спасение утопающих
по новой специальности — web-мастера. Думаю, полученные знания еще не раз

вам пригодятся в новом информационном веке.
Итак, приступим к спасению утопающих... в виртуальном болоте. Ваша стра-
ничка может стать верной соломинкой не только для вас.
Интерактивность
Интерактивность — краеугольное понятие не только для данной книги. Что же
оно означает? Обычно под этим словом подразумевают наличие некоторого ак-
тивного начала, проявляемого с обеих взаимодействующих сторон. В нашем
случае одно безусловно активное начало несет пользователь, который пришел
поискать что-либо в Интернете, другое — сайт. Иными словами, интерактивный
сайт — это сайт, который активно взаимодействует с пользователем, предостав-
ляя (или, наоборот, скрывая) необходимую информацию.
Представим себе простой пример. Вы зашли в магазин, чтобы купить свой люби-
мый йогурт (или пиво — кому что больше нравится), но обнаруживаете себя пе-
ред километрами полок, заваленных какими угодно, но только не кисломолочными
продуктами. Что делать? Естественно, что вы подходите к продавцу, объясняете,
что вы ищете, и он подводит вас к полке с вожделенным йогуртом. Дальнейшие
технические и коммерческие трудности мы оставим за кадром, в край- ности, вы
снова сможете обратиться все к тому же продавцу за консультацией.
В нашем случае продавец (и магазин в его лице) был интерактивным: он выслу-
шал вашу просьбу, осознал (!) и выполнил ее. Но представим себе, что магазин
за границей и ни один из продавцов не понимает вашего идеального английско-
го, а слово «йогурт» слышит впервые в жизни. Вы активно размахиваете друг
перед другом руками, но долгожданная цель не приближается — и вы в отчая-
нии идете самостоятельно исследовать содержимое многочисленных стеллажей.
Но и в данном случае продавец выступил в роли «интерактивной» сущности,
ведь на каждый ваш взмах руками он реагировал целым каскадом труднопроиз-
носимых звуков и телодвижений. Конечно, это пустая интерактивность, так как
она не принесла вам ощутимой пользы, но все же интерактивностью осталась,
ведь потом будет о чем вспомнить долгими зимними вечерами в сотне километ-
рах от приличного магазина.
И на закуску третий вариант. Вы попали в полностью автоматизированный ма-
газин, где людей просто нет — сплошь автоматы и многочисленные надписи.
И, если внимательно изучить хотя бы некоторые из них, поиск нужного продук-
та не составит особого труда (по крайней мере, для человека, умеющего читать
и выполнять простые инструкции, наподобие «вам туда»). Но в данном случае
интерактивности нет! (Зачаточную интерактивность в виде выдачи продуктов и
пробивания чеков мы не будем учитывать.) Магазин, безусловно, помог нам ра-
зобраться в своих недрах, но он это делал пассивно.
А теперь добавим небольшой штрих: пусть изначально все надписи будут сдела-
ны на тарабарском языке (вам никогда не приходило электронное письмо в не-
верной кодировке?), и вы этого языка совсем не знаете. Задача поиска могла бы
сильно усложниться, если бы создатели магазина любили поиздеваться над
Интерактивность 21
людьми, а не только мило пошутить. К счастью, они предусмотрели кнопочку,

которая может заменить загадочные тарабарские выражения вполне понятными
английскими или русскими. Вам только остается нажать кнопочку — и дело в
шляпе. Но вот вопрос: в данном случае магазин ведет себя интерактивно или
нет? Конечно — да... Или нет?... Так да или нет? С одной стороны, он проявляет
некоторую активность, помогая нам в чтении надписей. Но с другой — он же
сам ничего не делает! Это мы нажатием кнопочки вносим изменения в тексто-
вое оформление его полок. Впрочем, у нас нет полной уверенности, что перевод
с тарабарского был составлен заранее, а не явился плодом активности магазина
в данный момент. А вдруг есть какой-то простой секрет, позволяющий делать
этот перевод быстро, и магазин переводит надписи «в ответ» на нашу просьбу.
Поэтому предусмотрим в данном случае еще один термин — пассивная интерак-
тивпостъ. То есть такая интерактивность, которую достаточно просто можно
реализовать как в пассивной, так и в активной форме.
Однако на интерактивность можно взглянуть и с другой, так сказать, противо-
положной стороны. Предположим, вы смотрите фильм по телевизору. В данном
случае вы представляете пассивное начало, а телевизор — активное. Максимум,
что вы можете — это переключить канал, и все! То есть ваше взаимодействие с
телевизором трудно назвать интерактивным: с экрана вываливается на вашу
бедную голову море информации и эмоций, а вы никак не можете ему на это от-
ветить. Разве что письменно — по почте. Однако сегодня даже TV пытается
быть интерактивным. Нередко показывают передачи в прямом эфире, в которых
можно задавать вопросы и тут же с экрана получать на них ответы, то есть ак-
тивно воздействовать на происходящее на экране1.
Если обдумать оба приведенных примера (с магазином и телевизором), то, не-
смотря на смену ролей, в обоих случаях мы имеем дело с одной монетой — ин-
терактивностью, но с разными ее сторонами. Итак, интерактивность в приложе-
нии к Интернету — это возможность зрителя влиять на происходящее на web-
странице и возможность страницы должным образом откликаться на это влия-
ние. Большинство сайтов во Всемирной паутине не интерактивны. Вы можете
только зайти на страницу и просмотреть ее, но повлиять на ее содержание вы
никак не сможете (если, конечно, не являетесь web-мастером данного сайта).
С точки зрения технологии клиент-сервер интерактивность можно разделить на
•два типа: интерактивность, реализованная на стороне клиента, и интерактив-
ность, реализованная на стороне сервера.
В случае сайта клиентом будут страницы HTML, загружаемые в браузер, а сер-
вером — программы, расположенные на сервере, предоставляющем хостинг.
Поскольку для простого смертного прав распоряжаться серверными программами
обычно не предусмотрено, в книге мы будем рассматривать в основном ин-
терактивность, реализованную на стороне клиента, то есть на создаваемом пер-
сональном сайте, который ничего не платит за поддержание своего существо-
вания. Хотя будут и исключения. Большинство сервисных серверов имеет в
своем арсенале несколько стандартных программ, к которым разрешено обра-
1
Думаю, не далек тот час, когда, позвонив по телефону, вы сможете влиять не только на действие
в шоу, но и на сценарии мыльных опер и мультиков.
вдаться всем желающим. О том, как разместить счетчики посещений, обсужде-

ния и многое другое на своих страницах, вы узнаете на занятиях 2 и 12.
Теперь осталось обсудить, зачем нужна интерактивность. Существует несколько
причин, объясняющих появление на страницах Интернета того или иного вида
интерактивности. Во-первых, интерактивность может быть функциональна: поиск,
обращение к базам данных, различные регистрации, формы и прочее. Во-вторых,
интерактивность притягательна и интересна: всевозможные игры, анимация,
чат. Зачем нужна интерактивность лично вам на персональной страничке? Для
того чтобы привлечь туда как можно больше посетителей! Все, начиная от сме-
ны кодировки и языка до веселой анимации, служит именно этой цели. Ведь вы
делаете свой вклад в «виртуальную свалку», чтобы ознакомить широкую публи-
ку с вами и вашим мнением!
Серверы, предоставляющие
бесплатный хостинг
Итак, вы уже полны решимости рассказать миру о себе, создав свою виртуаль-
ную страничку. Но вас еще точит червь сомнения: а вдруг за страничку надо бу-
дет платить, как за собственную рекламу? Если наличие многочисленных серве-
ров, предоставляющих бесплатные услуги электронной почты, вас не убеждает,
повторю: размещение web-страницы во Всемирной сети может быть абсолютно
бесплатным удовольствием (конечно, не считая оплаты услуг провайдера за под-
ключение к Интернету, если вы платите за них из своего кармана).
Серверов, предоставляющих бесплатный хостинг, появилось довольно много и в
Рунете, и за его пределами. Вначале мы обсудим два наиболее популярных сер-
вера, а в приложении 1 приведем список таких серверов, зарегистрированных на
Яндексе.
В качестве обсуждаемых параметров сервера будут фигурировать следующие по-
казатели:
• количество пространства на жестком диске сервера, выделяемое под вашу
страничку;
• основная кодировка сервера;
• тип регистрации и загрузки файлов (WWW или FTP);
• дополнительные сервисы;
• наличие e-mail;
• дополнительные приятные и не очень приятные особенности сервера.
Естественно, за время выхода в печать цифры могут измениться, но думаю, что
в большую сторону. Начнем же мы с самого народного сервера Рунета, который
так и называется — narod.ru.
www.narod.ru
Предоставляемое дисковое пространство не ограничено (по крайней мере, так
утверждается на самом сервере). Вначале вы получаете в свое пользование
Инструменты создания Web 23
100 Мбайт, и затем эти мегабайты автоматически растут, как только сервер «по-
чувствует», что вам стало мало места1. Одновременно с названием сайта вы ре-
гистрируете и почтовый адрес. Доступ — по FTP. Однако вы можете сделать
свой сайт с помощью конструктора и шаблонов, предоставляемых сервером, в
режиме on-line (HTTP-доступ). Дополнительно можно получить множество
благ: гостевую книгу и счетчик, ежедневную статистику посещений, персональ-
ный (со свободным входом) или частный (с паролем) чат. На сервере работает
служба поддержки и форум по проблемам сервера. Но ложка дегтя есть и в этой
бочке: Яндекс разместит на вашем сайте свой рекламный баннер, «не портящий
дизайн страницы».
ПРИМЕЧАНИЕ
На самом деле при работе с Яндексом вы скоро обнаружите не одну ложку дегтя. Основ-
ные проблемы связаны с тем, что сервер загружен и даже высокоскоростные линии не спо-
собны организовать быстрый доступ к своим страницам в часы пик.
www.geocities.com
Видимо, самый популярный иностранный сервер, раздающий бесплатные стра-
ницы и e-mail — дитя монстра Yahoo!. Дискового пространства дают существен-
но меньше — всего 15 Мбайт, так что цените русские просторы и широту души.
В дальнейшем можно будет расшириться, если очень захотите. Зато предостав-
ляются многочисленные услуги, благодаря близкому родству с Yahoo!: свой
HTML-редактор, статистика (трэкер), так же как и на narod.ru, масса шаблонов
для создания сайта, гостевая книга, счетчик и многое другое. Так же как и на
narod.ru, на страницу сайта встроят баннер спонсоров. Если сайт на narod.ru -
ключик в сообщество почитателей Яндекса, то на geocities.com — ваш пропуск
к ресурсам Yahoo!.
.
Инструменты создания Web

Каждый предмет изготовлен из какого-то материала. Стол — из дерева или
ДСП, стена — из кирпича или железобетона, книга — из бумаги и картона. А из
чего соткана'Всемирная паутина? Слюна какого виртуального чудища застыла
в столь причудливой форме?
HTML и JavaScript
Как вы уже, наверное, знаете, основной язык страниц Интернета — HTML -
даже не является языком программирования или сценариев. Как следует из его
названия, это просто язык разметки текста, на котором указывают браузеру, ка-
ким образом следует оформить тот или иной участок текста. Откуда же берется
активное и тем более интерактивное содержание на страницах Сети? Оно появ-
ляется в основном благодаря встроенным в HTML-документ сценариям. Сцена-
рии в Интернете пишутся на двух языках, один из которых — VBScript — явля-
А ведь еще недавно жесткий диск на 200 Мбайт считался пределом мечтаний!
ется детищем Microsoft, а другой — JavaScript — порождением Netscape. По-

скольку последний более распространен (в связи со своим общественным стату-
сом), на нем мы и сосредоточим основное внимание в книге.
Сложно ли использовать HTML? He сложнее, чем размечать текст на бумаге
маркером. Особенно если воспользоваться услугами специального редактора
или шаблона сервера (о чем вы и узнаете из двух следующих глав). Сложно ли
писать на JavaScript? Тоже просто, особенно если умело пользоваться следую-
щим советом.
СОВЕТ
Если вы в браузере выполните команду Вид > Код страницы (Просмотр HTML-кода или
В виде HTML) на заинтересовавшей вас web-странице, то браузер без утайки покажет вам
все ее внутреннее устройство: и теги HTML, описывающие структуру и форматирование
страницы (они заключены в угловые скобки), и код сценариев, выполняющихся при ее
просмотре. В большинстве случаев даже не придется конфликтовать по поводу авторских
прав. Если вам понравиться какой-либо сценарий, вы сможете договориться с его автором
или отыскать в Сети место, где он лежит специально для этой цели — берите, не жалко.
Как правило, цена за использование чужого сценария не велика: вас просто попросят
честно написать имя создателя.
Однако и в этой бочке меда можно отыскать свою ложку дегтя. И состоит она в
следующем. Лучшее в Интернете делается мастерами своего дела, поэтому если
вы хотите стать оригинальным на этом поприще, вам придется стать мастером
(ни много, ни мало). Ведь как бы вы умело ни копировали оригинал, копия ос-
тается копией. А вам только и остается пытаться проявить свою оригинальность
в тексте или картинках. Некоторым и этого бывает достаточно. Впрочем, всегда
есть «но»...
•
Flash
В не столь далеком прошлом в руки web-дизайнеров попал новый и удивитель-
ный по своим свойствам инструмент создания виртуального мира — Flash. Его
родитель — фирма Macromedia — наделила свое детище рядом противоречивых
свойств. С одной стороны, Flash предназначен для создания анимации, и его по-
рождения должны бы быть слишком тяжеловесными для Web. Однако многие
ролики оказываются более компактными, чем картинки в графических форматах
GIF или JPEG (о графических стандартах Сети см. занятие 10). Дополнитель-
ные модули, созданные самой Macromedia, позволяют просматривать фильмы
практически в любом обозревателе Интернета. То есть вам не надо тестировать
ваше произведение на совместимость с разными браузерами (о том, почему это
необходимо для HTML-документов и, в особенности, для сценариев JavaScript,
будет рассказано в следующих занятиях). А главное — Flash имеет простой и
понятный интерфейс и прозрачную логику создания фильмов и при этом прак-
тически неограниченные возможности!
С появлением пятой версии Flash получил возможность конкурировать с HTML
и JavaScript в главном деле — конструировании сайтов. Теперь с помощью Flash
можно создать не только баннер или отдельный ролик, а при желании целый
сайт (!), который мало в чем уступит созданным по классическим технологиям,
а местами будет иметь явное преимущество, особенно для новичков. Конечно,

не следует ожидать, что «классику» ждет печальная судьба динозавров, просто
у нее появился серьезный конкурент, который намерен получить свое место под
виртуальным солнцем.
Когда книга выйдет в свет, распространенной версией Flash станет уже Flash MX. Новые
возможности программы описаны в приложении 6. Не пугайтесь нового — интерфейс про-
граммы хоть изменился, но в лучшую сторону, и остался таким же дружелюбным и понят-
ным, как и раньше.
Зачем знать о модном поветрии новичку, делающему первые шаги по «плете-

нию паутины»? Во-первых, это просто еще один способ самовыражения (движе-
нием можно выразить гораздо больше, чем замершей статикой). Во-вторых, на
его освоение требуется существенно меньше времени, чем на знакомство с Java-
Script и HTML. А в-третьих, на нем проще всего самостоятельно создать бога-
тый интерактивный сайт! (В том понимании интерактивности, о котором гово-
рилось ранее.)
Куда путь держим?

Чтобы не уподобляться буриданову ослу, мы пойдем... в обе стороны, так как
в отличие от физического мира мысль и мир виртуальный не имеют таких ба-
нальных ограничений. Мы можем пойти в обе стороны и в конце пути сравнить
(каждый для себя!), что же лучше: классическое программирование и формати-
рование текста или рисование веселых картинок и создание полноценных роли-
ков. А может, истина, как всегда, затерялась где-нибудь посредине?
Что нового мы узнали

Итак, на нашем первом занятии мы с вами выяснили:
• подходит для вас эта книга или нет;
• из чего состоит Всемирная паутина, где и как можно доплести к ней свой ку-
сочек;
• кого можно выбирать себе в помощь для работы в качестве виртуального
ткача;
• что такое интерактивность и зачем она нам нужна.
^
До встречи на следующем занятии!
Занятие 2
О пользе бесплатного сыра

Жизнь свою обвил
Вкруг висячего моста
Этот дикий плющ.
Мацуо Басе1
Сегодня у нас первое практическое занятие: мы будем создавать сайт с помо-

щью шаблонов и конструктора web-страниц. Как вы уже знаете из первого заня-
тия, серверов, на примере которых мы будем учиться создавать сайты, будет два:
www.narod.ru и www.geocities.com. Возможно, вы уже освоились в Интернете и
справитесь с автоматическим созданием сайта без помощи этого занятия. В та-
ком случае вы можете его пропустить и перейти к следующему. Но, как извест-
но, практика — не теория, вопросы и проблемы в ней возникают порой самые
странные...
Чем же мы будем заниматься на нашем первом «семинаре»?
• С помощью Мастерской Яндекса мы научимся строить и исправлять свой сайт;
• создадим свой сайт и под крылом Yahoo!;
• воспользуемся услугами других серверов для размещения на своих страни-
цах интерактивных элементов: счетчиков и трэкеров.
Связь в порядке? Тогда начнем.
Мастерская на www.narod.ru
Ну вот мы и приступаем к первому практическому занятию. Для начала загру-
жаем браузер, подключаемся к Интернету и в строке адреса набираем адрес
www.narod.ru. Он благополучно меняется на www.narod.yandex.ru, подтверждая, что
сервер narod.ru имеет к Яндексу самое непосредственное отношение. Впрочем,
об этом же сообщит и загрузившаяся страница (рис. 2.1).
1
Рис. 2.1. Главная страница сервера www.narod.ru
Главная страница
В глаза бросается белым по синему лозунг: «Постройте свой сайт за 60 секунд».
Конечно, одной минуты явно недостаточно, чтобы сделать что-либо путное, по-
этому не будем сразу регистрироваться, а вначале пройдемся по ссылкам, кото-
рые расположены чуть ниже, чтобы познакомиться с «жителями» Народа и его
правилами.
• Первые две ссылки, Первый раз с народом? и Зачем это надо, ведут на страни-
цу, где подробно описаны прелести «виртуального Я».
• Ссылка Что здесь дают расскажет, какими благами хостинга вы сможете вос-
пользоваться.
• Пробный тур — краткий перечень шагов, которые вы должны сделать, прежде
чем ваш сайт заживет полнокровной жизнью. Обратите внимание на первый
пункт списка — Выберите имя для сайта. Если вы думаете, что это просто, то
сильно ошибаетесь. В Народе вы не встретите двух жителей с одинаковы-
ми именами — придется придумать и свое — красивое и функциональное.
Помните, что «как вы яхту назовете, так она и поплывет».
• Ссылка Образцы страниц приведет вас к описаниям шаблонов, которые пре-
доставляются Народу в помощь.
• Собственно Помощь придет в качестве ответов на Часто задаваемые Вопросы
(сокращенно — ЧаВо или FAQ, Frequently Asked Questions) со множеством
полезных ссылок на услуги сервера.
• Обязательно просмотрите Пользовательское соглашение — оно, конечно, слег-
ка длинновато, но, например, только там написано, что на вашу страницу бу-
дет приколот баннер Яндекса. Там же написано, что можно, а что нельзя раз-
28 Занятие 2. О пользе бесплатного сыра
мещать на сайте и сервере, а также какие многочисленные права Яндекс ос-

тавляет за собой в отношении размещенных в рамках бесплатного хостинга
материалов и какие права достаются вам. Здесь же вы узнаете, что все
услуги предоставляются «как есть», то есть если вас это не устраивает -
ищите лучшего хостера, однако в Рунете никто не ручается за свою беспере-
бойную работу: память о дефолте еще свежа.
Следующая группа ссылок служит для знакомства с жителями Народа.
• Познакомься с народом и Каталог ведут к каталогу сайтов.
• Ссылка Чаты ведет через «тернии» в виде ввода пароля к чатам.
• Форум, естественно, ведет на форум, посвященный проблемам сайта narod.ru.
Если у вас в будущем возникнут вопросы или предложения, можете огласить
их на страницах форума.
• Лучшие сайты — список лучших «народных» сайтов, а Новости — колонка но-
востей сервера.
• Ссылка Семейный фильтр ведет на страницу с весьма полезной информацией,
если за вашим домашним компьютером работает ребенок. Там вы сможете
прочитать, как настроить свой браузер так, чтобы ребенок был огражден он
информации, на которую раньше поставили бы штамп «детям до 16 смотреть
запрещается».
Если вы прошлись по всем ссылкам, составили представление о том, «что здесь
дают», и не отошли от идеи поселиться именно здесь, тогда перейдем к «столи-
ку» регистрации. Конечно, регистрация, о которой пойдет речь, не столь важна
для вас, как регистрация брака, например, но тоже на всю жизнь...
Регистрация
Вначале вы должны разрешить вашему браузеру выполнять сценарии JavaScript
и принимать файлы cookie, и лучше также разрешить автоматическую загрузку
изображений. Затем можно набрать имя вашего будущего сайта в поле на глав-
ной странице и нажать кнопку Занять (Submit). Дальше вы попадете на страницу
с регистрационной формой, состоящей из нескольких разделов: Логин и Пароль,
Идентификационные данные, Персональные данные. Обязательными для заполнения
являются только поля, отмеченные красной звездочкой: Логин, Пароль, Подтвер-
дите пароль, Контрольный вопрос, Ваш ответ, Фамилия и Имя.
Теперь обо всем по порядку.
СОВЕТ
В Netscape Communicator все настройки браузера собраны в диалоговом окне Настройки.
Оно вызывается одноименной командой меню Правка, а настройки автоматической загруз-
ки изображений и использования сценариев JavaScript собраны на странице категории До-
полнительные. В Internet Explorer окно называется Свойства обозревателя, вызывается ко-
мандой меню Сервис, а необходимые установки расположены на вкладке Дополнительно.
Логин — это ваше имя в Яндексе. Оно действительно во всех его службах, как
и пароль. Если вы не угадали и имя уже существует, вы сможете подобрать
другое.
Пароль и Подтвердите пароль являются полями для ввода пароля — секретной

фразы, по которой Яндекс будет знать, что пришли именно вы, а не кто-то
другой под вашим именем. Не вводите простой пароль, лучше задайте абра-
кадабру из цифр и букв, предварительно записав ее в записной книжке, что-
бы потом не забыть. Для лучшего запоминания можно использовать русское
слово, но набранное при латинской раскладке клавиатуры или транслитом,
и ряд цифр, например фу/п/83 или 83komnata.
Транслит — запись русских букв схожими по названию латинскими.
СОВЕТ
Не используйте в пароле кириллицу! С большой вероятностью пароль может быть переко-
дирован по пути, и вы потеряете доступ к своему сайту. Постарайтесь не забыть пароль
и периодически (лучше чаще, чем реже) меняйте его.
• Раздел Идентификационные данные нужен для восстановления ваших прав на

владение сайтом в случае, если вы забудете логин или пароль, или то и дру-
гое сразу. Тогда, правильно ответив на контрольный вопрос администрации
сервера, вы сможете восстановить утраченный доступ к сайту и почте. Поле
Ваш e-mail служит для ввода адреса электронной почты, по которому к вам
обратятся в этом случае. Указывать в нем свой будущий почтовый ящик, ко-
торый вы получите после регистрации, с адресом ваше_имя@паго<1ш, на мой
взгляд, не имеет смысла, ведь если вы забудете пароль, вы потеряете доступ
не только к сайту, но и к почте.
• Персональные данные служат для нужд сервера, чтобы владельцы хостера зна-
ли, кто, что и как делает в их «ведомстве». Хотя никто не гарантирует, что
лично вами не заинтересуются соответствующие спецслужбы... Вы можете
указать любую информацию о себе — в том числе и выдуманную. Однако
помните, что, регистрируясь, вы подписываетесь под Пользовательским со-
глашением, в пункте 3 которого сказано: «Если Вы предоставляете неверную
информацию или у Яндекса есть серьезные основания полагать, что предо-
ставленная Вами информация неверна, неполна или неточна, Яндекс имеет
право приостановить либо отменить Вашу регистрацию и отказать Вам в
использовании своих служб (либо их частей)». Вот так! Так что читайте устав!
После того как вы все заполнили и проверили, нажмите кнопку ОК!, которая
в подсказке названа, почему-то, save.
ВНИМАНИЕ
Если браузер не показывает кнопку на экране (если у вас отключена загрузка графических
изображений), то нажать вам ее не удастся: при щелчке на длинном белом поле вас вы-
бросит на страницу с девственно чистой регистрационной формой.
Если вы не заполнили нужные поля, то на экране появится текст с подробным

перечислением того, что вы сделали не так.
• Логин уже занят:
Введенный вами логин уже занят на Яндексе. Попробуйте ввести другой.
Плохой Пароль:
Пароль является необходимым параметром! Надо заполнить оба поля: Пароль
и Повторите пароль.
Недостаточно информации для восстановления пароля:
Вы можете выбрать один из способов восстановления пароля на случай, если
Вы его забудете.
В первом случае пароль будет высылаться Вам на адрес электронной почты,
который Вы ввели в регистрационной форме.
Во втором случае Вам будет предложено ввести ответ, введенный Вами в мо-
мент регистрации, на выбранный вопрос. Второй способ является предпочти-
тельным. Если Вы не выбрали ни одного из способов — Вы не сможете вос-
становить пароль.
Имя:
Имя — поле, обязательное для заполнения!
Фамилия:
Фамилия — поле, обязательное для заполнения!
Вернуться к заполнению формы:
Как вы, наверное, догадались, последняя строчка является ссылкой, которая
приведет вас опять к заполнению анкеты. Все правильно введенные поля
останутся заполненными, и вам не придется заполнять их заново. Если вы
просто не угадали логин (то есть предложенный вами логин уже есть), то вы
останетесь на странице с формой и вам даже будет предложено подставить
новый логин, близкий к вашему.
Jflndex; Паспорт - Netscape

Прг,ыч Ьэд ГНемй Ки-«юнп(гы Спржка
Паспорт
ш»:
Введите, пожалуйста, имя вашего будущего сайг»:
RSSS ; Jurod.ru
Подписаться на общие
нов ости сайга?
Подписаться на анонсы
"Народной газеты"?
Copyright© 1997-2001 "Яндекс*
Рис. 2.2. А на этой странице вам предоставляется возможность передумать

Если же вы все сделали правильно и даже угадали еще никем не занятый логин,
тогда после нажатия ОК! вы попадете на совсем маленькую страничку, где вас
попросят задать имя вашего будущего сайта и почтового ящика (рис. 2.2). Если
вы удачно выбрали логин, то нет смысла менять что-либо. Также на этой форме
расположены два флажка. Если вы их установите, то вам будут приходить ново-
сти сайта и анонсы народной газеты.'
После нажатия кнопки Сохранить вы перейдете уже в свои владения — в Мастер-
скую. Впоследствии вы сможете попасть сюда, щелкнув на ссылке Мастерская
(см. рис. 2.1), расположенной на главной странице Народа, и введя логин и па-
роль. Теперь подробнее рассмотрим, какие инструменты собраны в Мастерской.
Мастерская
В левой части страницы собраны ссылки, предназначенные для конструирова-
ния сайта, а в правой — для редактирования уже существующего сайта и управ-
ления личными настройками, а также новости и Народная газета.
Сначала мы коснемся личных настроек, а затем перейдем к созданию сайта.
В разделе Мои данные собраны следующие ссылки.
• Персональные данные (Паспорт) — ваша «штаб-квартира» на Яндексе, откуда
вы можете управлять своими виртуальными владениями. Здесь собраны
ваши личные данные, доступ к почтовому ящику, адресной книге и другим
сервисам.
• Семейный фильтр — настройка браузера на ограждение детей от просмотра
сайтов для взрослых.
М Настройки (подписка, кодировки и другое) — несколько ссылок для настройки
приходящей почты.
• Переименовать сайт и Удалить регистрацию — ссылки говорят сами за себя.
Теперь перейдем к созданию собственного сайта, пока — по шаблонам. Все нуж-
ные ссылки собраны в левой части Мастерской в разделе, который так и назы-
вается — Создание сайта.
Создание сайта
Так как мне не известно, какой сайт вы собираетесь строить, я кратко опишу все
подразделы и ссылки, посвященные созданию сайта с помощью Конструктора
страниц. Вы можете составить свой сайт из любого мыслимого и немыслимого
набора страниц: романтика и бизнес, объявления и общение. Но начнется экс-
курсия с основного — с главной страницы.
Создание главной страницы начинается со щелчка на ссылке Шаблоны, располо-
женной в разделе Моя главная страница. Шаблонов не так и много — всего де-
вять. Кроме этого присутствует возможность сделать свой шаблон, но это мы
оставим на закуску. А начнем с уже существующего шаблона, например под на-
званием Пустынный. Устанавливаем переключатель на этот шаблон (щелкаем в
пустом кружке вверху слева от шаблона) и нажимаем кнопку Далее.
Появившаяся страница пестрит всеми цветами радуги. Введите тексты, выбери-

те ссылку Гостевая книга (она одна присутствует в списке по умолчанию; если
вы сначала заведете другие страницы, то они автоматически появятся в списке),
подберите цвета фона, текста и ссылок и нажмите Готово. Вы перейдете на свою
только что созданную главную страницу. Нравится? Если нет, к вашим услугам
кнопка Еще редактировать, а если совсем не нравиться, то можно нажать кнопку
Сменить дизайн.
Теперь посмотрим, что случится, если установить переключатель на шаблон
Сделать свой. Страница, на которую вы попадете в этом случае, будет не слишком
отличаться от страниц других шаблонов — на ней появятся поля для выбора ло-
готипа, обоев и картинки. Рядом с этими полями находятся кнопки Обзор, кото-
рые позволят вам загрузить любой графический файл со своего компьютера.
Попробуйте подобрать что-нибудь подходящее, а впоследствии, когда поймете
что к чему, вы сможете создать свое графическое оформление, тем самым внося
свои личные штрихи -в шаблонный дизайн. Единственная «неприятность» -
в окне Выгрузить файл (ну и назовут же!) в списке Тип файла отсутствуют графи-
ческие форматы, так что вам придется выбрать пункт Все файлы (*.*) и найти
подходящий GIF или JPG-файл.
Примерное расположение элементов на странице следующее (рис. 2.3):
• обои (фоновый рисунок) располагаются по всей площади страницы (если вы
не выставите флажки не размножать и не прокручивать), так же как обои на
рабочем столе Windows;
• логотип — это небольшая картинка в правом углу страницы, при малых раз-
решениях он, как правило, будет перекрываться рекламой Яндекса;
• картинка — рисунок, занимающий левую часть страницы.
СОВЕТ
Обратите внимание на обои страницы, изображенной на рисунке. Они представляют собой
яркий негативный пример их использования: сливаясь с текстом, они мешают чтению.
Текст и заголовки должны контрастно смотреться по отношению ко всем использованным
в рисунке обоев цветам.
Когда после продолжительной битвы с непокорным дизайном вы повторно ска-

жете Готово, волны Яндекса вас вынесут на текст примерно следующего содер-
жания:
После создания этой страницы вы можете:
• отредактировать ее;
• перейти к созданию других страниц;
• перейти в раздел «Редактирование страниц»;
• перейти в раздел «Управление файлами».
Вы также можете получить доступ к другим возможностям сайта, перейдя в раз-
дел «Мастерская».
'Ш http://dtmvovich.narod.ru/'mdex.html - Microsoft Internet Explorer

Jri?
$@Ш *вйи» Я
«Главная страница **» «ЛЩ
«fe*
....... ИМ
,-.:
1,
safes «Мм
а
Диз ав :ом
•ло
шаолоне
:
»
Рис. 2.3. Таково расположение элементов дизайна в «свободном» шаблоне
ВНИМАНИЕ
На самом деле битва у вас будет в основном не с самим дизайном, а с неповоротливым
Яндексом, который регулярно «забывает» обновлять рисунки на странице и пользуется
кэшем в самых неподходящих случаях (чтобы этого избежать, всегда переименовывайте
графический файл после внесения изменений и загружайте его под новым именем), и т. д.
Также не забывайте обновлять страницу при просмотре (кнопка Обновить на панели
управления браузера).
Итак, будем считать, что подвигов ради этой «прекрасной дамы» вы совершили
уже достаточно, так что можно перейти к покорению других...
Другие страницы
Шаблоны из разных разделов различаются, но имеют почти одни и те же пара-
метры. Поэтому дальше мы пройдемся «галопом по Европам». Единственный
пункт, которого не было на главной странице, но который есть на большинстве
остальных, — это просьба ввести имя HTML-файла с пояснением («если вы хо-
тите, чтобы эта страница была главной страницей вашего сайта, введите имя
файла index»). Итак, в Мастерской предлагают шаблоны следующих типов.
• Про меня — Пастельный, Зубчатый, Мышеходный — для любого характера и на-
строения, чтобы рассказать о себе любимом.
• Фотоальбом — оформление страниц с любимыми фотографиями, не хуже чем
в ларьках Kodak. Возможны варианты с предварительным просмотром (где
расположены миниатюры) и сразу в полную величину фотографии.
2 Зак. 96
Резюме — оформление своего Curriculum Vitae (жизнеописания) для будущей

жены или работодателей.
Любимые ссылки — от Перфокарты до Модерна, от Горчичного до Крем-брюле -
для того чтобы дать ссылку на любимые места в Сети.
Для фанатов и поклонников — в этом разделе пока мало шаблонов, но, если вы
действительно обожаете своего кумира, сделать эту страничку интересной не
составит труда.
Романтика — если вы хотите найти свою «половинку» или просто завести
Интернет-роман, то в этом разделе можно поискать шаблон на свой вкус.
Правда, создать свой шаблон здесь (так же как и в следующем разделе) не
предлагают — в деле романтического знакомства обычно приветствуется ин-
дивидуальный подход.
Объявление или приглашение — шаблоны этого раздела помогут сделать объ-
явление в Сети, пригласить попить пива или потанцевать на дискотеке.
Деловая страница — если хотите представить на сайте свой бизнес, выбирайте
подходящий шаблон или создавайте новый.
Прайс-лист — виртуальные ценники, как говорится, «вчера по три, но малень-
кие, а сегодня большие, но по пять».
Анкета, Опросы, Гостевая книга — шаблоны для оформления интерактивных
элементов сайта, «обратная связь». В отличие от других страниц, адрес этих
частей сайта строго задан.
СОВЕТ
Некоторые элементы сайта могут располагаться на других страницах, например опросы,
формы поиска, счетчики. Если вы будете их использовать, просмотрите их дизайн перед
оформлением страницы размещения и постарайтесь оформить всю страницу в едином
стиле.
• Персональный чат — если вы хотите по Сети поболтать с друзьями, можно со-

здать свой чат. Предлагаемых шаблона, правда, всего 4, но ведь главное здесь —
общение.
• Персональный форум — еще одна форма «отложенного» общения в Сети, лич-
но ваша группа новостей.
Кроме страниц с шаблонами в левом столбце Мастерской есть другие полезные
ссылки.
• Экспорт в «Яндекс.Товары». Если вы создали хотя бы один прайс-лист, Яндекс
предлагает вам разместить его в каталогах товаров на Яндексе. Тогда все, кто
пользуется услугой поиска товаров на Яндексе, среди прочих увидят и ваше
предложение.
• Сообщества — страничка для работы с сообществами — «народными» объеди-
нениями.
• Функциональный клипарт — набор кнопок и линий, которые вы можете ис-
пользовать на своем сайте. Если вы пожелаете их использовать, то лучше это
делать в самом начале создания сайта — рисунки объединены по цветовой
гамме.
• Фоновые рисунки — авторские картинки для заполнения фона страницы.

• Логотипы и баннеры Narod.ru — вещественное наполнение пословицы «всяк ку-
лик свое болото хвалит».
• Формы поиска — еще один полезный атрибут сайта. Искать можно на своем
сайте, в Народе и на Яндексе.
• Индексирование в поисковых системах — несколько параметров, касающихся
индексации вашего сайта на Яндексе. Если вы хотите, чтобы о вас поскорее
узнали, загляните на эту страницу.
Я н декс.За кладки
В этом разделе мы коснемся еще одной службы Яндекса — Закладки. Она не свя-
зана напрямую с интерактивными элементами, однако будет полезна для запол-
нения страницы с любимыми ссылками, а главное — вы сможете найти в за-
кладках пользователей множество полезных ссылок.
Для того чтобы попасть в службу закладок, необходимо щелкнуть на ссылке За-
кладки в списке служб Яндекса или набрать адрес http://zakladki.yandex.ru/. Слева
расположены ссылки на страницы с папками и закладками пользователей. По-
бродите по ним — наверняка найдете что-нибудь интересное.
Справа на странице закладок расположена панель Мои закладки, которая нас в
первую очередь и интересует. Проще всего загрузить закладки, пользуясь за-
грузкой закладок из браузера. Только вначале приведите свои закладки в поря-
док. Выберите в Netscape Communicator команду меню Компоненты > Закладки >
Изменить закладки, в Internet Explorer — Избранное > Упорядочить избранное. В от-
крывшемся окне упорядочьте свои закладки: создайте новые папки, переместите
в них закладки, удалите ненужные или соберите их в одну папку. Данная опера-
ция поможет вам сэкономить много времени при работе в Сети.
Теперь можно приступать к загрузке. Для этого служит кнопка Загрузите свои
закладки в сеть на панели Мои закладки. Яндекс сам попробует определить ваш
браузер и предложит один из вариантов: Импортировать закладки из Netscape Navi-
gator/Internet Explorer 4/5/Internet Explorer 5. Если вы сомневаетесь в том, что Ян-
декс правильно «угадал» тип вашего браузера, можете пройтись по ссылкам,
расположенным чуть ниже, и более точно определить его. Если же вы считаете,
что все нормально, — жмите ОК. Затем, нажав кнопку Обзор, выберите файл с за-
кладками на вашем компьютере; пояснительный текст укажет вам, где его ис-
кать. После завершения поиска нажимайте Продолжить. На следующей странице
отметьте флажками папки и закладки, которые вы решили поместить в общий
доступ, введите имя папки ваших закладок и нажмите кнопку Сохранить, распо-
ложенную вверху страницы.
Вот, собственно, и все, теперь вы сможете воспользоваться своими закладками
с любого компьютера, подключенного к Интернету. С помощью меню, распо-
ложенного на странице Мои закладки, вы сможете оперировать закладками не
хуже, чем в браузере.
Теперь перейдем к использованию импортированных закладок на странице с
любимыми ссылками. После того как вы выберете шаблон для страницы и на-
жмете Дальше, появится страница для ввода ссылок и текста. Среди прочего
здесь есть флажок Использовать каталог на «ЯндексЗакладки». Если его поставить,

то закладки автоматически появятся на странице. Вж-ж-жик — и готово!
Редактирование сайта
После того как вы создали основные страницы сайта, самое время вернуться к
редактированию главной страницы, чтобы вставить ссылки на новые страницы.
Для этого надо пройти в Мастерскую и щелкнуть на ссылке Редактирование стра-
ниц, созданных по шаблонам, расположенной в правой части окна. Появившаяся
страница содержит список всех страниц сайта, созданных по шаблонам. Устано-
вите флажок рядом с файлом index.html — так назвается главная страница сай-
т а — и нажмите кнопку с изображением карандаша — Редактировать (edit). Вы
попадете на страницу с заполненным шаблоном. Пролистните до конца и запол-
ните ссылки. Если вы почувствовали, что дизайн главной страницы сильно от-
личается остальных элементов сайта, можно подправить и его.
Стиль сайта
Одним из существенных минусов использования шаблонов при создании сайта
на Народе является отсутствие стилей дизайна (подробнее о дизайне см. заня-
тие 8). Подобрать для разных страниц даже похожие шаблоны в данный момент
нельзя. Выход состоит в использовании «самодельного» шаблона. Поэтому пред-
лагается следующий порядок действий.
• Вначале набросайте на бумаге примерную структуру сайта: какие страницы,
сколько страниц одного типа, какие ссылки будут идти между ними. При-
мерный план сайта приведен на рис. 2.4.
Персональная страничка
persona.html
Ссылки, Интересные истории,

ref.html story.html
Главная страница,
index.html
Работа, О семье,
rabota.html family.html
Хобби, Фотоальбом,
hobby.html foto.html
Рис. 2.4. Примерный план сайта
Потом подумайте над тем, какие интерактивные элементы страницы вы хо-

тите использовать (подробнее о них речь пойдет далее). А также будете ли
вы использовать шаблоны, которые предусматривают только фиксирован-

ный дизайн (например, Романтика). Именно отталкиваясь от таких страниц,
вам и придется строить дизайн сайта.
Теперь попытайтесь обозначить основные элементы дизайна сайта: цвета,
размещение элементов, размеры рисунков и т. д. Эти элементы должны быть
одинаковыми на всех страницах, не должно быть инородных вкраплений,
выпадающих из общей палитры. Например, на главной странице вы решили
использовать картинку слева шириной 200 пикселов. Значит, надо стараться,
чтобы на всех остальных страницах текст тоже был размещен справа на том
же расстоянии. Если вы используете логотип и фоновую картинку, то они
должны быть одинаковыми за исключением воплощения какой-либо идеи
(см. занятие 8). В случае, если построить дизайн так просто не удается, при-
дется подождать следующего занятия и воспользоваться услугами HTML-ре-
дактора.
Когда вы поймете, какие цвета, фоновые рисунки и другие элементы вы бу-
дете использовать, — переходите к созданию самих страниц. Естественно, что
в основном вы будете выбирать шаблон Сделайте свой.
СОВЕТ
Если вам понравился шаблон и вы не хотите делать свой, тогда выдержать единый стиль
можно следующим образом: все страницы сайта вам надо сделать в одном шаблоне! Каж-
дый раз только изменяйте название страницы и наполняйте ее другим содержанием, и вы
автоматически выдержите стиль.
Размещение в каталоге
Чтобы посетители Яндекса смогли добраться до ваших страниц, надо зарегист-
рировать их в Каталоге. Каждая страница сайта может попасть в свою рубрику.
Всего можно зарегистрировать 3 страницы, а в каждой рубрике — не более од-
ной.
Чтобы зарегистрировать страницу в каталоге, необходимо на страницах Управле-
ние файлами или Редактирование страниц, созданных по шаблонам установить фла-
жок рядом с файлом и нажать кнопку Изменить позицию в каталоге (rubrics).
Далее вам будет предложено выбрать один из следующих 166 вариантов (полу-
жирным выделены названия разделов).
Автомобили и мотоциклы
Мотоциклы Новости и обзоры
Ремонт, обмен опытом и советы Продажа, покупка, обмен
Автомобили Другое
Бизнес и финансы
Инвестиции Консалтинг
Маркетинг Менеджмент
Недвижимость Новости и аналитика
Полиграфия и издательская деятельность Рекламный и выставочный бизнес
Связь Стройматериалы и строительство

Страхование Торговля
Транспорт Телекоммуникации
Услуги Финансы
Интернет-магазины Нефтехимия
Металлургия Другое
Дом и семья
Дети Домашние животные
Кухня Обустройство дома
Моя семья Другое
Здоровье
Медицина Нетрадиционная медицина
Оздоровительные средства и лекарственные Социальная и психологическая реабилитация
препараты
Другое
Знакомства
Страницы девушек Страницы мужчин
Нетрадиционные знакомства Обмен опытом и советы
Другое
Компьютеры, Интернет и технологии

Безопасность Веб-дизайн
Интернет Информационные технологии
Железо Новости и обзоры
Операционные системы Программирование
Софт Заработок в Интернете
Другое
Красота и мода
Мода и стиль Новости и обзоры
Советы Услуги
Другое Культура, религия, философия
История культуры Культурная жизнь
Мистика Религия
Философия Психология
Астрология Другое
Литература и искусство
Архитектура Дизайн
Декоративно-прикладное искусство Изобразительное искусство
Новости и обзоры Образовательная литература и публицистика
Поэзия Приключения и детективы
Фантастика и фэнтези Фотоискусство
Художественная литература Скульптура
Театр Другое
Музыка и кино
Авангард Авторская песня
Альтернативная музыка Блюз и джаз
Классическая музыка Новости и обзоры
Панк Поп
Продажа, покупка, обмен Рок
Русский рок Собственные страницы музыкантов
Электронная музыка Этническая и религиозная музыка
Гранж Хип-хоп
Мультипликация Отечественное кино
Зарубежное кино Другое
Наука и образование
Естественные науки Новости и обозрения
Общественные науки Образовательные организации и программы
Студенты Клубы выпускников
Моя школа Экология
Рефераты и курсовые Другое
Политика и право
Государство Новости и аналитика
Политика Право
Вооруженные силы Другое
Работа и карьера
Вакансии Обмен опытом и советы
Работа за рубежом Резюме
Другое
Свободное время, развлечения и игры

Активный отдых Компьютерные игры
Ночная жизнь Общение
Радио и телевидение Тесты, гороскопы и гадания
Хобби Юмор
Эротика и секс Другое
Спорт
Командные виды спорта Единоборства
Зимние виды спорта Настольные игры
Спортивные клубы и секции Теннис
Футбол Формула-1
Хоккей Экстремальный спорт
Легкая атлетика Бодибилдинг и рестлинг
Дайвинг Спортивное снаряжение
Другое
Техника и производство
Авиация Транспорт
Строительство Электроника
Легкая промышленность Другое
Туризм Автостоп
Велотуризм Водный туризм
Охота и рыболовство Путевые заметки
Пеший туризм Спортивный туризм
Туристическое снаряжение Туристические услуги
Вокруг света По историческим местам
Мой город Другое
Впрочем, вы можете выбрать переключатель Не размещать мою страницу в катало-

ге, и тогда ваша страничка останется по-прежнему неизвестной для широких масс
Народа. Этот пункт может вам пригодиться, если вы зашли сюда просто на экс-
курсию.
Ниже списка рубрик надо заполнить поля для названия и краткого описания
странички. Зайдите предварительно в Каталог, просмотрите размещенные там
описания и постарайтесь ввести что-нибудь оригинальное. После заполнения
всех полей нажмите Далее. Страница будет зарегистрирована, и в списке стра-
ниц рядом с ее названием будет стоять звездочка.
Необходимо, чтобы регистрируемая страница соответствовала тематике рубри-
ки, иначе потом служба поддержки Яндекс исключит ее из Каталога вообще.
После включения в Каталог страница автоматически будет регистрироваться

поисковыми службами Яндекса. Если вы захотите исключить страничку из Ка-
талога или перенести в другую рубрику, повторите процедуру регистрации, от-
метив необходимый пункт переключателя.
Интерактивные элементы
Как уже говорилось на первом занятии, интерактивные элементы позволяют
сделать сайт интересней. Кратко все подобные элементы, предоставляемые Ян-
дексом, уже упоминались, и сейчас мы остановимся на них подробнее. Начнем
же мы со встраиваемого в любую страницу счетчика посещений.
Счетчик
Если вы обратили внимание, на странице Мастерской Список страниц, созданных
по шаблонам справа от каждой созданной страницы имеется ссылка нет в столб-
це Счетчик. Достаточно щелкнуть на ней, чтобы перейти к установке счетчика на
соответствующей странице. Выберите понравившийся дизайн и нажмите Устано-
вить. Счетчик будет установлен в самом низу страницы, вместо нет появится 0 -
значение счетчика. Если вы выберете вариант Невидимый, то счетчик никто не
увидит, однако он будет работать, в чем вы сможете убедиться, посетив список
страниц. Этот вариант удобен тем, что такой счетчик не сможет испортить вам
дизайн страницы.
Если вы создали страницу сами и передали ее на сайт по FTP, счетчик можно
установить и на нее. Если вы просто загрузили новую версию страницы, где был
счетчик, — тогда нажмите кнопку Восстановить на странице настройки счетчика.
Гостевая книга
Гостевая книга состоит из формы для отправки сообщения и списка сообщений,
расположенного ниже. Она, в отличие от остальных интерактивных элементов,
изначально выдается каждому владельцу сайта на Народе. Вы можете получить
к ней доступ, перейдя по ссылке Гостевая книга. На этой странице вам как вла-
дельцу доступны следующие операции.
• Просмотр — здесь вы можете посмотреть, как выглядит ваша гостевая книга,
и оставить в ней запись или две, чтобы «размочить» книгу, для поддержания
разговора, так сказать. Чтобы посетители также могли отправлять в гостевую
книгу сообщения, необходимо установить на одной из страниц ссылку на
нее. Для этого надо в списке ссылок выбрать пункт Гостевая книга. Конструк-
тор страниц автоматически пропишет правильный адрес, если же вы будете
вставлять ссылку с помощью HTML-редактора, то ее точный вид приведен
вверху этой страницы.
• Администрирование — здесь вы можете удалять и отвечать на сообщения.
• Изменение дизайна — дизайн гостевой книги можно выбрать. И даже боль-
ше — вы можете создать свой, не только пользуясь «шаблоном для шабло-
на», но и написав практически полноценный HTML-код. О том, как это сде-
лать, можно прочесть в Помощи и узнать на следующем занятии.
• Дублирование сообщений по e-mail — здесь вы можете задать адрес электрон-
ной почты, на который будут посылаться копии сообщений, помещаемых в
гостевую книгу. Это может быть полезным, если вы регулярно просматри-

ваете почту по данному адресу. Тогда вы будете в курсе того, что делается в
вашей гостевой книге.
Анкета
Анкета представляет собой отдельную страницу-форму. Яндекс предлагает не-
сколько шаблонов, но можно создать и свой собственный. Основное, над чем
вам надо подумать при определении анкеты, — это вопросы, которые вы соби-
раетесь задать, и поля для ввода ответов.
Вначале вы должны понять, какого типа будут ответы. Для указания ответа
можно использовать поле ввода, область ввода и флажок (в терминологии Ян-
декса — галочка).
• Поле ввода — поле для ввода строки текста. Используйте этот элемент, если
ответ на вопрос составляет одно-два слова.
• Область ввода — поле для ввода нескольких строк текста; при необходимости
появляется полоса прокрутки. Используется для ввода развернутого ответа.
Старайтесь применять область ввода только в крайнем случае: поверьте,
мало кто готов написать даже небольшое эссе ради прекрасных, но недоступ-
ных для обозрения глаз.
• Галочка - флажок. Служит для отметки одного или нескольких вариантов
ответа на вопрос, оформленный в виде элемента Просто текст. В отличие от
других полей, подпись к флажку выровнена по левой стороне текста
(рис. 2.5, 2.6).
После вопросов вам будет необходимо заполнить поля, отвечающие за техниче-
скую сторону дела: адрес электронной почты, на который будут приходить за-
полненные анкеты; заголовок страницы, которая появится после нажатия анке-
тируемым кнопки Отправить; строка текста, которая будет появляться перед
ответами пользователя; URL страницы, на которую появится ссылка внизу ан-
кеты, и описание этой ссылки, а также следующие директивы: направлять ли
анкету автоматически по указанному в ссылке адресу, какой использовать раз-
делитель полей в письме, запрашивать ли e-mail пользователя, прикреплять ли
анкету в виде файла или просто вставлять в письмо (рекомендуется не прикреп-
лять файл к анкете, так как в прикрепленных файлах с большой степенью веро-
ятности могут содержаться вирусы).
Использовать анкету на сайте можно в самых различных целях:
• для проведения опроса о вашем сайте, если по каким-то причинам вы не хо-
тите помещать это обсуждение в гостевую книгу;
• если вы завели романтическую страничку, то анкета может стать первой ни-
точкой для завязывания знакомства;
• на бизнес-сайте анкета может касаться товаров и услуг, к которым вы имеете
отношение;
• любое простое тестирование.
f :
It^'"' ij>>:-'' '-" fe U i>b*<*i D>
/ : :
';•: | '•i: -:: '. ". /::/i '-:. . Ой:*о.>>т
p://dinwovich narod ru/question.Wmi "| .i'i^* H.ri no ier-:-> •'.
Основам элементы анкеть
Поле ввода
Просто текст
Галочка Г
Еще одна галочка г
Третья галочка г
1
Область ввода
'.-
J1
Рис. 2.5. Основные элементы анкеты
Сообщение, которое появляется после ответа на анкету

Основные элементы анкеты
Текст перед ответами пользователя:
Просто текстРазделитель полей в

письме
Галочка
Еще одна галочка
Третья галочка
А здесь область ввода А здесь область ввода А здесь
Область ввода область ввода А здесь область входа А здесь область
ввода
Л, эту ссылка с атон стоаюшы. ш> уиалчаиню на
Рис. 2.6. Так выглядит страница после ответа на вопросы анкеты

Остановимся чуть подробнее на последнем пункте. Вы можете поместить на

страничке пару удачных на ваш взгляд тестов, которыми сейчас пестрит желтая
пресса, заинтересовав таким образом посетителя (если вы позаимствовали чей-
то тест, лучше честно написать об этом и указать автора). Для профессиональ-
ного психолога, например, это может стать неоценимым кладезем эксперимен-
тальных данных (не забывайте только о том, что выборка в данном случае очень
специфическая). Для отсылки ответа не забудьте затребовать обратный адрес.
Если вы хотите задать всего один вопрос, а ответ на него можно оформить в виде
переключателя (то есть если после вопроса приводится несколько вариантов отве-
та и можно выбрать только один из них), тогда вам лучше использовать опросы.
Опрос
Опрос имеет множество отличий от анкеты:
• он состоит из одного вопроса;
• имеет ограничение по времени, которое вы задаете при его определении (по
умолчанию опрос проводится в течение одного дня);
• ответ на вопрос оформлен как переключатель;
• опрос можно разместить как на отдельной странице, так и встроить в любую
другую.
Для задания опроса надо щелкнуть на ссылке Опросы, а затем нажать кнопку
Создать опрос. На открывшейся странице вверху будут размещены поля для вво-
да самого вопроса и вариантов ответов на него, а также поля для задания окон-
чания опроса (по умолчанию — следующий день). Затем расположены шаблоны
для отдельной страницы с опросом и для встроенной формы. После того как вы
заполнили поля и указали шаблон, щелкайте на кнопке Начать опрос. На открыв-
шейся странице расположено 4 кнопки для завершения опроса, его редактиро-
вания (кнопка вернет вас на предыдущую страницу), перезапуска (если он уже
окончился) и удаления. Внизу расположено поле с ссылкой, которую необходи-
мо вставить на другую страницу, чтобы посетитель получил доступ к странице
с опросом. Ссылка Перейти к редактированию страниц откроет список страниц,
созданных по шаблонам, где вы сможете выбрать страницу и ввести ссылку на
опрос.
Несколько иначе будет выглядеть страница, если вы укажете встраиваемый
шаблон. Тогда форма опроса появится на экране вверху, а вместо ссылки в поле
будет код, который надо встроить в код страницы вашего сайта. Для этого
щелкните на кнопке Перейти к управлению файлами, в списке файлов отметьте
нужный и нажмите кнопку Редактировать (edit). Перед вами предстанет страница
с HTML-кодом выбранного файла. Когда мы поближе познакомимся с основа-
ми HTML, вам станет понятно, как и куда можно встроить форму с опросом.
Пока же сделаем так: загрузите, например, главную страницу и вставьте после
основного текста перед тегом </TD> код для выведения формы опроса или
внутрь текста. Выглядеть данный кусок HTML-файла должен примерно так:
Страница демонстрирует размещение<В(?>элементов графического дизайна в свободном шаблоне
</FONT>
<SCRIPT language=javascript
src-http://narod.yandex.ru/survey/surveyjs.xhtml ?1d=57854></SCRIPT>
</TD></TR></TABLE>
Результат вы видите на рис. 2.7. Естественно, номер после id= у вас будет дру-
гой, так же как и текст на странице.
Рис. 2.7. Так будет выглядеть добавленный опрос
Просмотреть результаты опроса (рис. 2.8) можно, щелкнув на кнопке Результа-

ты, расположенной на форме опроса. Для завершенных опросов просмотреть ре-
зультаты можно, перейдя сначала из раздела Опросы по ссылке данного опроса,
а потом выбрав ссылку Просмотреть страницу с опросом. Ответ на опрос выдается
в виде гистограммы с указанием процентов данного ответа, а также участвовав-
ших людей (вернее, их IP-адресов).
Опрос
Проголосовал!
100 % Оо>« 2
Рис. 2.8. Так будут выглядеть результаты опроса

В следующем разделе нам предстоит познакомиться еще с одной формой выяс-

нения общественного мнения — форумом.
Форум
Если вы хотите пообщаться с посетителями вашего сайта на определенную тему
или, говоря языком Интернета, создать свою группу новостей, тогда организуй-
те персональный форум.
На странице раздела Форум расположены ссылки для следующих операций с фо-
румом:
• просмотр — просмотр форума на правах рядового участника;
• администрирование — страница владельца со ссылками на все сообщения фо-
рума; нажатием кнопки Удалить можно убрать ненужное сообщение;
• изменение дизайна — выбор шаблона для форума.
Страница форума разделена на две части: слева расположены список заголовков
(тем) сообщений и форма для послания первичного сообщения, справа нахо-
дятся текст и параметры выбранного сообщения, а также форма для ответа на
него (рис. 2.9).
Для того чтобы все посетители сайта получили доступ к форуму, надо помес-
тить на какой-либо странице сайта ссылку на него (она приведена вверху стра-
ницы Форум).
ГЬ Персональный форум dimvovich * Netscape
:мг> ДимВович 16.04.2002 I? ДамЦр lllix,

/;:E2«i! ДимВович 16.042
Дервое сообщение форума,
Ваше имя:
|димВович
Email:
.jdimvovich6narod.ru
Ваш сайт: Текст сообщения
Ваше кия:
Сообщение: |ДинВович
|dimvovlch@narod.ru
Ваш сайт:
JRe: Первое сообщение форума

Сообщение:
Рис. 2.9. Персональный форум

На закуску из интерактивных элементов нам остался чат возможность про-

сто поболтать с друзьями.
Чат
Чтобы создать свой чат, как и другие интерактивные элементы, необходимо
заглянуть в соответствующий раздел Мастерской. На странице Создание личного
чата вы должны указать его название, пароль и подтверждение пароля (если вы
хотите завести частный чат), выбрать подходящий шаблон и нажать кнопку Соз-
дать. После того как вы введете уникальное название чата, появятся параметры
вашего входа в чат: ваш ник (псевдоним или прозвище) в чате, цвет текста, вре-
мя обновления и количество выводимых строк. Постарайтесь не трогать список
Название чата, если вы хотите попасть в свой чат, иначе вам придется искать его в
неотсортированном списке, содержащем более 100 пунктов. После заполнения
полей нажмите Войти в чат, и вы попадете на только что созданную страничку
своего чата (рис. 2,10).
»6V.LK! ' -:.••.::•:,.'.-:. ЪщМЧ .
hal. «h!ml?new.43086!,lKChak.896453621114500
Чат «Чат у ДимВовича»

Участники:
• ДимВович
:
.СгЫравить :' : О6н<?Е!пь Шсгеоикй
Рис. 2.10. Примерно так будет выглядеть ваш новорожденный чат
Зайти в любой чат можно через ссылку Чаты на главной странице Народа. Не за-
будьте также вставить ссылку на свой чат на страницах сайта!
Под крылом www.geocities.com

Если по каким-либо причинам вам захотелось пожить за океаном (хотя бы вирту-
ально), вы можете завести своего заокеанского представителя на www.geocities.com.
Естественно, что за океаном не говорят по-русски, и ваш представитель тоже
должен овладеть иностранным языком. Ну а в остальном, там во многом будет
проще.
Регистрация
Для того чтобы зарегистрироваться на Yahoo! и получить место под сайт, снача-
ла введите в браузере адрес www.geocities.com. На открывшейся странице найди-
те раздел Try GeoCities for free! (Бесплатные услуги на GeoCities), а в нем ссылку
Sign up for a free web site (Подписаться на бесплатный сайт). На следующей стра-
нице щелкните на ссылке Sign up now (Подписаться сейчас) и заполните регист-
рационную анкету. Она мало чем отличается от анкеты на Яндексе, разве что
здесь все будет на английском языке. В табл. 2.1 приведены поля для заполне-
ния, их примерный перевод и пояснения. Однако до того как вы заполните ре-
гистрационную форму, стоит ознакомиться с Правилами предоставления услуг
(GeoCities Terms of Service) и Соглашением о конфиденциальности (Privacy Policy).
Ссылки на них расположены под регистрационной формой. Они мало чем отли-
чаются от их аналогов на сервере narod.ru.
Таблица 2.1. Регистрационная форма сервера www.geocities.com
Поле формы Перевод Пояснения
Yahoo! ID Логин, ваше имя на Yahoo! Под этим именем вы будете вхо-
дить в службы Yahoo!
Password Пароль
Re-type Password Подтвердить пароль
Security Question Контрольный вопрос Как всегда, чтобы иметь возмож-
ность восстановить забытый па-
роль, вам надо указать контроль-
ный вопрос и ответ на него
Your Answer Ответ на контрольный вопрос Приводить перевод вариантов
контрольных вопросов я счел не-
нужным, так как ответ может быть
любым, в том числе и бессмыслен-
ным
Birthday (Month, День рождения (месяц, день, год)
Day, Year)
Alternate Email Адрес электронной почты На этот адрес вам будет выслан
восстановленный пароль
First Name Имя
Last Name Фамилия
Language & Content Язык Русского в списке нет, вместо него
можно выбрать пункт [other]
Zip/Postal Code Индекс
Поле формы Перевод Пояснения

Gender Пол Male — мужчина,
female — женщина
Industry Род занятий
Title Должность
Specialization Специализация
Send me special Посылать мне специальные пред- В соответствии с указанными ин-
offers from selected ложения на выбранную тему от тересами и родом деятельности,
Yahoo! partners партнеров Yahoo! через службу Yahoo! будет формировать пре-
through Yahoo! доставки доставляемую вам информацию
Delivers
Interests (optional) Интересы (факультативно)
Entertainment Развлечения
Home & Family Дом и семья
Health Здоровье
Music Музыка
Business Бизнес
Computers & Компьютеры и технологии
Technology
Personal Finance Личные доходы
Small Business Мелкий бизнес
Shopping Покупки
Sports & Outdoors Спорт и игры на открытом воздухе
Travel Путешествия
Sweepstakes & Free Тотализатор и легкие деньги
Stuff
Enter the word as it Введите слово, которое вы видите Это необходимо, чтобы невозмож-
is shown in the box ниже но было использовать автоматиче-
below скую регистрацию. Если вы не ви-
дите, что там написано, можете
щелкнуть на ссылке, расположен-
ной справа
После успешной борьбы с «американским» языком можно нажимать кнопку

Submit this form (Отослать форму). После того как форма будет отослана, перед
вами появится новая форма-переключатель, в которой надо выбрать тематику
будущего сайта (табл. 2.2).
Таблица 2.2. Варианты тем будущего сайта
Тема Перевод
Alternative Lifestyle Альтернативный стиль жизни

Arts & Literature Искусство и литература
Autos Машины
Business & Finance Бизнес и финансы
Продолжение
Таблица 2.2. Продолжение
Тема Перевод
Celebrities Знаменитости
Computers & Internet Компьютер и Интернет
Family Семья
Fashion & Beauty Мода и красота
Fitness Фитнесс
Food Еда
Friends Друзья
Games Игры
Health Здоровье
Hobbies & Crafts Хобби и увлечения
Home Дом
Issues & Causes Политика и право
Military Вооруженные силы
Movies Кино
Music Музыка
Pets Домашние животные
Religion & Beliefs Религия и вера
Romance Романтика
Schools & Education Школа и образование
Science Наука
Seniors Пенсионеры
Sports Спорт
Teens Подростки
Travel Путешествия
Television Телевидение
Women Женщины
После нажатия очередной кнопки Submit this form (Отослать форму), перед вами
предстанет адрес вашей странички с призывом Build your page now! (Построй свою
страницу сейчас!).
Строительство сайта
Как только вы зарегистрируетесь, вы в любой момент можете приступать к про-
цедуре создания сайта. Для этого вам понадобится с главной страницы сайта
пройти по ссылке Home Page Directory (Каталог домашних страниц), и там, введя
пароль, вы попадете в свой домашний уголок Yahoo! (рис. 2.11). Обратите вни-
мание на ссылку на свой сайт, расположенную справа. Если вы щелкнете на ней,
то увидите страницу, уже заполненную полезной информацией. В частности,
здесь присутствует и ссылка на конструктор сайта — Yahoo! Page Wizards (Мастера
страниц Yahoo!). Щелкните на ней, и вы попадете на свою «строительную пло-

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

Welcome, dimvovich
Yahoo! GeoCities
>*№ Premium Web Site Packages - Get your own domain (www.my-own-name.com), matching
email addresses (me@my-own-name.com). an ad-free site, more space, password-protected pages &
more)
, • ':
Build Your Own Web Site
Free Web Sit© fEditl Creating web pages is easy with these popular
tools...
Service Announcements I File Manager
A Йр% Yahool PageWteafds - I Subdirectories, HTML
Щ/ Build a personal home page quickly with sediting...
this simple, step-by-step method. Try it! Easy Upload
To begin creating your jjfe. Yahoo! PaaeBuilder Transfer files from your
site, choose one of the Up Design and customize pages easily with :omputer.
tools to the right. If you're this powerful and full-featured editor. Т j HTML Editor
new to building web \ Write, or cut & paste HTML
pages, try Yahool ^code.
PageWizards
1 Site Statistics
To find out more about
Member Pages Directory I Analyze your site's traffic
Find interesting member sites, о.г1Ё..УЗ.У.С.5.Ш- ^reports.
GeoCities, take our tour.
Ady.an.«.d Web Site Add*o

: Enhance your web
Home Page Settings ipages...
Ad options, monthly Business & Finance Hobbies & Crafts i • Counter
newsletter
Computers & i • Guestbook
Sjte_P[pjTiotion Music
Get more exposure for your Internet
i ' Headlines
site. Cultures & Recreation &
i • Stock Quotes
Content Retinas Community Sports
Get more information on i • Weather
how you can rate your site ent&
Reqipnal
Рис. 2.11. Главная страница Каталога домашних страниц
В отличие от строительства сайтов в России, здесь все автоматизировано. Как

только вы нажмете ссылку под понравившимся шаблоном, открывается отдель-
ное окно, после чего вам надо действовать, как и при работе с любым другим
мастером (Wizard) Windows.
Для начала нажмите Begin (Начать). Дальше на каждой странице мастера вы
должны указать свои пожелания. Чтобы посмотреть, что вам предлагают, нажи-
майте кнопку Preview (Предварительный просмотр); для путешествия по страни-
цам мастера — кнопки Next (Следующая) и Back (Предыдущая). По пути следо-
вания вы сможете ввести текст, указать любимые ссылки и рисунки. Конечным
шагом станет наречение страницы именем. Для главной страницы, как и преж-
де, выберите имя index.html. Как всегда, файл с таким названием служит первой
страницей сайта. Мастер не забудет поинтересоваться: «А вы уверены?» — ведь
страница с таким именем уже существует. Если вы решили приступать вплот-
ную к строительству, смело отмечайте Yes. Как и в случае с сервером Яндекса,

для оформления сайта в одном стиле можете использовать один и тот же шаб-
лон, но каждый раз заполняя его разным содержанием.
Для создания оригинального сайта вы можете задействовать «прораба» — Yahoo!
PageBuilder. В отличие от мастера, он не так скор на подъем: если у вас модем
в 28,8 Кбит/с, то для загрузки понадобится 3-5 минут. Но зато потом перед
вами откроется перспектива создать сайт с персональным дизайном, не прибе-
гая к кодированию.
Редактирование сайта
Обратите внимание на правую сторону главной страницы Каталога домашних
страниц (Home Page Directory) (см. рис. 2.11). Здесь расположены инструменты
для модификации существующего сайта. В разделе Advanced Toolbox (Дополни-
тельные инструменты) расположены следующие ссылки:
• File Manager — управление каталогом с вашими файлами на www.geocities.com
при работе в Сети;
• Easy Upload — загрузка на сервер файлов с вашего компьютера;
• HTML Editor — простой HTML-редактор;
• Site Statistic — статистика по сайту.
Ниже расположены несколько интерактивных элементов, которые предоставляет
в ваше пользование хостер (запустить свои сценарии на сервере вам не удастся):
• Counter (Счетчик);
• Guestbook (Гостевая книга);
• Headlines (Заголовки новостей);
• Stock Quotes (Биржа);
• Weather (Погода);
• Webcam (web-камера);
• Yahoo! Maps (Карты);
• Yahoo! Presence (Показ статуса присутствия в Сети);
• Yahoo! Search (Поиск).
Если вы хорошо знаете английский или другой язык, поддерживаемый Yahoo!,
то работа над сайтом для вас не составит труда. Но если вы не освоили другой
язык, кроме родного, лучше попытать счастья в другом месте: не слишком ра-
зумно выставлять свое незнание на весь мир.
Добавление интерактивных элементов

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

этого языков, например на Perl. Если хостер, на котором вы решили поселить
свой сайт, не поддерживает исполнения сценариев, вам надо найти серверы, соз-
датели которых уже написали: за вас все необходимые программы и абсолютно
бесплатно готовы предоставить вам их в пользование вместе с частью своего
дискового пространства. Набор подобных услуг предоставляют практически все
серверы, имеющие бесплатный хостинг. При этом вы не обязаны заводить там
страничку — вы можете позаимствовать только счетчик или гостевую книгу.
Однако существуют и серверы, которые предоставляют, например, только счет-
чики (см. приложение 1). О двух таких серверах и пойдет речь дальше, ведь са-
мое первое, что надо добавить на свою страничку, — это счетчик посетителей.
С его помощью вы всегда будете знать, сколько народу побывало на вашем сай-
те. (Про размещение на сайте гостевых книг, опросов, форумов и чата будет рас-
сказано на занятии 12.)
www.spylog.ru и www.hotlog.ru
Одним из лучших серверов, предоставляющих услуги по сбору статистики, яв-
ляется сервер www.spylog.ru. В верхней части главной страницы расположено
приглашение разместить счетчик Spylog на своем сайте: Получи свой счетчик!.
Если перейти по ссылке прикеры наших кнопок, то вы сможете составить пред-
ставление о том, как он будет выглядеть у вас на странице. Кроме размера мож-
но выбрать и тип счетчика: простой, анимированный, счетчик-индикатор и рас-
ширенный счетчик.
Кроме счетчика компания Spylog предоставляет трэкеры. Трэкер (tracker) -
это расширенный вариант счетчика, предназначенный для сбора информации о
посетителях вашей странички. Сведения, собираемые трэкерами, включают: имя
и версия используемого браузера; операционную систему, под управлением кото-
рой работает компьютер посетителя; разрешение экрана и глубину цвета; инфор-
мацию о том, разрешил ли пользователь применение языков сценариев и др.
Также можно определить географическое расположение посетителя (регион),
время посещения и некоторые другие персональные, но не конфиденциальные
сведения.
К сожалению, из когда-то обширного списка услуг бесплатным остался только
пакет «Кроха» — весьма обедненный, для начинающих.
Итак, вам необходимо выбрать пакет или счетчик, зарегистрироваться и ждать,
когда по электронной почте придет HTML-код, который необходимо встроить
в страницу сайта.
В связи с резким переходом работы Spylog на «платные» рельсы, образовав-
шуюся нишу попыталась заполнить петербургская компания ANK, с перечнем
услуг которой можно ознакомиться на сервере www.hotlog.ru. Как следует из рек-
ламы на сервере, все услуги системы HotLog предоставляются бесплатно. Ста-
тистика, собираемая трэкером, довольно обширна: это не только информация
о том, какими параметрами обладает компьютер и браузер пользователя, но и от-
куда он «узнал» о вашем сайте. Для того чтобы начать «копить бесценную ста-
тистику», необходимо зарегистрироваться и опять-таки ждать ответа по e-mail.
www.thecounter.com
Одним из самых удобных и мощных иностранных серверов, предлагающих счет-
чики, является www.thecounter.com. Он предоставляет услуги по созданию как
текстового, так и графического счетчиков посетителей страницы. Вы выбираете
шрифт и цвет текста и фона. Отдельным вариантом является невидимый счет-
чик. Результаты его работы в этом случае доступны только вам. Подобный ва-
риант удобен для определения популярности не сайта в целом, а, например, его
конкретного раздела.
Счетчик от TheCounter.com удобен не только своими обширными настройками
и небольшими размерами. В нем предусмотрены функции сбора информации о
посетителях, результаты которого будут представлены на сайте в виде графиков
и числовых значений, то есть, по сути, он выполняет функции трэкера.
Найдите на главной странице сервера (рис. 2.12) следующий текст: «TfieCounter.com
Free Version will track number of visitors (unique and total) with a visible counter, and will
send you a weekly stats report. Register here!»\ — и зарегистрируйтесь.
TheCounter com: The Full-Featured Web Counter with Graphic n

[.->
' '
P
•u/A»wwthecounlereQm/ Щ <Y/ 4 f o a i -I ем/?.
ATTENTION: New TheCounter.com Terms of Service 1

EFFECTIVE January 2, 2002 - TheCounter.com Terms of Service have been
revised. Please read the new Terms of Service.
TheCounter.com Free Version will track number of visitors (unique and . . . - . . .

total) with a visible counter, and will send you a weekly stats report. Find a Merchant Acct
Register here! Software Stop;
.W.sb..D.s.5.!gr>
Global Statistics Search the.Web
GloiaLSlaiiSiiCS offer you a peek at our mega-report, which combines E-Cooinerca Solutions
the traffic reports from our more than 1 million customers worldwide.
Find out how Internet users are viewing the Web.
Article Submissions
Have a tip to share with your fellow subscribers? Submit an article for
possible inclusion in TheCounter.com Professional Edition, by sending an
e-mail to submissionsiSinternet.com. Articles focused on topics relevant
to webmasters will be reviewed. (Only approved submissions will be
Included In TheCounter.com Professional Edition newsletter.) Check our
Windows Internet Tech
Linux/Open Source
Highlighted Articles Web Developer
Revenue Sharing 101 £
How To Identify Quality Affiliate Programs ISP Resources
Understanding Affiliate Commission Structure ASP Resources
C.Q.O.tmLS.8.!].S Wireless Internet
ved affiliate articles]
F i rrns. Atiemat .iaJaefraameoMLlnu

i
Рис. 2.12. Сервер TheCounter.com
1
Бесплатная версия видимого счетчика TheCounter.com будет считать количество уникальных посе-
тителей и общее число посещений и посылать еженедельный статистический отчет. Регистрируй-
тесь здесь!
Общее число посещений — это количество всех обращений к данной странице или сайту,
а число уникальных посетителей — это количество различных IP-адресов, запросивших
данный сетевой ресурс.
СОВЕТ
Не устанавливайте элементы сайта с разных серверов: браузеру придется обращаться к
разным серверам, в результате время загрузки увеличится. Если уж вы решили воспользо-
ваться определенными услугами, ищите «все в одном флаконе», с одного сервера.

На нашем первом практическом занятии мы рассмотрели два вопроса:
• как зарегистрировать и создать свой сайт на серверах www.narod.ru и www.
geocities.com;
• что такое счетчик и трэкер и как их разместить на своем сайте.
До свидания на следующем занятии!
Занятие 3
Сам себя не похвалишь...

Холод пробрал в пути.
У птичьего пугала, что ли,
В долг попросить рукава?
На прошлом занятии мы зарегистрировались на сервере, предоставляющем бес-

платный хостинг, создали там простую персональную страничку, благодаря ко-
торой миллионы путешествующих по Интернету могут с вами познакомиться.
Шаблон, предоставляемый сервером, может существенно облегчить нам задачу
по созданию странички, но точно не поможет при создании интерактивного сай-
та, то есть такого сайта, вид которого в окне браузера менялся бы в зависимости
от пожеланий посетителя. Конечно, страничка и создается в основном для того,
чтобы заявить о своих пристрастиях и предпочтениях, но вдруг (о, это волшеб-
ное слово «вдруг»!) вы упустите того единственного посетителя, который вам
нужен, только потому, что выбранный вами благородный оттенок фона выгля-
дит на его мониторе ядовито-желтым, а слова на великом и могучем превраща-
ются в абракадабру... Почему бы не дать посетителю возможность выбрать цвет
странички или хотя бы язык?
Сегодня мы с вами узнаем:
• как создавать страницы на HTML самому и что нам для этого понадобится;
• почему web-дизайнер не такая уж веселая профессия;
• как создаются фильмы (конечно, не в Голливуде, а на компьютере).
Итак, вперед, нас ждут великие дела!
Создание сайта на HTML

На этом занятии мы создадим полноценный сайт (причем сами, не пользуясь
шаблоном) в web-мастере от Netscape или просто в Блокноте, как вам нравится.
Если вам больше по душе другие HTML-редакторы, то можете работать и в них
(например, работа с FrontPage Express описана в занятии 12).
Разместим мы сайт все там же, на сервере narod.ru. Но прежде чем приступить
к работе, я советую реализовать несколько страниц по различным «народным»
шаблонам и просмотреть их код, чтобы составить представление о том, как ра-
ботают определенные теги и какие из них используют для получения нужных
эффектов. Можно также заглянуть и на самые популярные страницы. Ваша
главная задача на первом этапе — понять, как должен быть устроен ваш сайт,
что он будет содержать и как будет выглядеть. Персональный сайт — это ваш
имидж в Интернете, так что постарайтесь подойти к его созданию со всей ответ-
ственностью.
Дизайн
Моя задача при построении сайта будет не совсем совпадать с вашей: мой «по-
казательный» сайт, с одной стороны, должен быть устроен достаточно просто,
а с другой — должен быть цветной иллюстрацией и живым воплощением опи-
санного в книге, а не меня самого.
В качестве достаточно практичного стиля дизайна, не требующего больших уси-
лий ни при создании, ни при тестировании, я выбрал растягивающиеся страни-
цы (см. занятие 8). Основное содержание страницы помещается в ячейку таблицы,
размер которой указан в процентах. Вокруг такой «резиновой части» помещает-
ся рамка, имеющая жестко определенные угловые части и столь же динамично
устроенную середину (как по вертикали, так и по горизонтали).
Чтобы автоматически решить проблему сочетаемости цветов на странице, в ка-
честве фона я выбрал отсканированные зеленые березовые листья и кусочек
бересты с его бежево-коричневой гаммой. Такой выбор сразу же определяет не
только гамму, но и многие другие элементы сайта, например логотип. Понятно,
что в качестве логотипа должна выступить надпись, «выдавленная» на бересте,
содержащая, например, фразу «Записки на бересте» или «Берестяные летопи-
си». Логотип можно разместить в правом верхнем и нижнем углах страницы.
Уменьшенные изображения листьев можно использовать для графических ссы-
лок или их частей. Поскольку засечки сложнее выдавливать, для заголовков
надо взять шрифт без засечек (например, Arial), а для основного текста — с за-
сечками (например, Times New Roman).
На занятии 8 в разделе «Этапы работы» вы обнаружите пункт «Разработка дизайна» толь-
ко на пятом месте. Однако на самом деле кроме дизайна мы между делом определили
ИДЕЮ сайта. Сайт о книге и ее авторе будет сделан в виде записок на бересте, служившей
верой и правдой нашим предкам в качестве бумаги.
Таким образом, мы решили почти все основные проблемы разработки дизайна.

Разработку заглавной станицы оставим на потом, точнее на занятие 11. А такая
страница нам понадобится, так как я собираюсь создать две версии сайта: одну
на HTML, другую на Flash. Заглавная страница нужна для того, чтобы дать воз-
можность посетителю выбрать, какую версию он хочет смотреть. Но это уже во-
прос скорее не дизайна, а навигации...
58 Занятие 3. Сам себя не похвалишь...
Навигация по сайту
После некоторого раздумья, общая структура сайта получилась следующей.
• Первой серфингиста встречает главная страница (файл index.html). Это почти
пустая страница, с нее ведут всего три ссылки: первая — на главную стра-
ницу HTML-сайта (файл index_html.html), вторая — на сайт-фильм (файл
index_flash.html), третья — на сервер компании Macromedia, чтобы желающие
могли установить Flash plug-in к своему браузеру.
• Главную страницу HTML-версии сайта тоже не хочется загромождать ссылка-
ми. Пусть их будет две: персональные страницы (все тот же файл index_htrnl.html)
и страницы, посвященные данной книге (файл book.html). Лучше всего сде-
лать их в виде закладок в верхней части страницы. На каждой странице-раз-
деле надо установить ссылку на гостевую книгу или форум, а также на e-mail.
По сути, главной страницы не будет: все страницы сайта будут выполнены
похожим образом.
• С персональной страницы в виде закладок с левой стороны будут располо-
жены ссылки на разные темы: о себе и о сайте (файл index_html.html), стра-
ничка, посвященная жене (irina.html), сыну (elisey.html), работе1 (cas.html), по-
эзии (poetry.html), а также коллекция интересных ссылок личного характера
(ref.html) и фотоальбом (photo.html).
• На странице, предназначенной Интернет-поддержке данной книги, будут на-
ходиться ссылки-закладки на следующие разделы: общая страница (book.html),
иллюстративные материалы к книге (download.html), которые можно загрузить
из Сети, вырезки из глав (quote.html) и страница со ссылками (appl.html) -
аналог приложения 1.
Обсуждая навигацию, мы заодно наметили и еще один элемент дизайна -
меню. Оно будет выполнено в виде закладок, что, конечно, отнимает простран-
ство, но автоматически решает проблему обратной связи между страницами:
с любой страницы второго уровня можно попасть на любую страницу первого
и второго уровней этого раздела.
Подготовка текста
Разработав навигацию, вы, по сути, должны уже понимать, какой текст на какой
странице будет находиться. Например, очевидно, что ссылка, ведущая на стра-
ничку авторской поэзии, должна содержать поэтические строки и больше ничего.
Наберите весь нужный вам текст в Word, проверьте и сохраните его, а затем
скопируйте в Блокнот и сохраните теперь уже в формате ТХТ. Впоследствии
при верстке сайта вы сможете легко брать части текста и вставлять их в HTML-
файл.
ВНИМАНИЕ
Никогда не вставляйте текст напрямую из Word в HTML-редакторы: вместо текста вы уви-
дите описание стилей во внутреннем формате Word.
1
Честно говоря, я научный сотрудник.
Подготовка графики
Если вы определились с текстом, настал черед графики. Вы должны решить, ка-
кие графические элементы вам понадобятся и как вы их будете получать. На-
верняка вам понадобятся фотографии и рисунки с текстом для меню, логотипа
и прочих элементов интерфейса.
Сканирование
Начнем с обработки фотографий и «даров природы»: нам понадобится оциф-
рованное изображение бересты и листьев. Если у вас есть цифровая камера, то
многие проблемы с оцифровкой изображений снимутся сами собой: в результа-
те ее работы вы получаете не живописный отпечаток, а набор байтов на элек-
тронном носителе. Тогда достаточно открыть файл, обработать его в программе
Photoshop и поместить на сайт
Если же цифровой камеры у вас нет или ее качество вам не по душе (большин-
ству цифровых фотоаппаратов еще далеко до аналогового), тогда вам понадо-
бится сканер или небольшие финансовые затраты на сканирование нужных вам
изображений. Услуги по превращению фотографии или пленки (что лучше, но
дороже) в файл предоставляют сейчас почти в каждом центре вездесущего Kodak.
Если речь идет о двух-трех фотографиях, это может стать самым простым и де-
шевым способом получить себя, любимого, на экране. Есть и специализирован-
ные фирмы, которые могут помочь вам не только в сканировании, но и в обра-
ботке полученного материала.
Но если случилось так, что за соседним столом на работе стоит сканер, то мож-
но попробовать самому превратить бумажный вариант изображения в электрон-
ный. Сделать это довольно просто.
Запустите программу Photoshop, выберите команду File > Import > Twain (Файл >
Импорт > Twain). После этого надо нажать кнопку Preview (Начать новое сканиро-
вание), чтобы призвать сканер к работе (рис. 3.1). В окне появится изображение,
отсканированное «на скорую руку» с низким разрешением. Теперь вам необхо-
димо выбрать фрагмент фотографии и установить параметры сканирования и
корректировки. Учтите, что размер фотографии на экране зависит не от ее фи-
зических размеров, а от разрешения, которое вы ее указали. Для первого раза
вам надо настроить только несколько параметров, остальные можно оставить
«как есть».
СОВЕТ
Если вы считаете, что безразлично, в какое место сканера поместить фотографию, — вы
не правы. На его поверхности всегда присутствуют мелкие дефекты: пыль, царапины. Най-
ти место, где сканер будет приЕ;носить в рисунок наименьший «шум», достаточно просто.
В настройках сканера поставьте максимальное разрешение. Проведите «пустое» сканиро-
вание — не кладя в сканер ничего. Полученное изображение (это будет просто белый пря-
моугольник) откройте в Photoshop и увеличьте. Там, где изображение будет самым «чис-
тым», и находится самое лучшее; место для сканирования.
СОВЕТ
Для сканирования предпочтительно использовать глянцевые отпечатки. И не забудьте сте-
реть с фотографии пыль!
Файл Правка Вид Параметры Сервис Справка
^ В ыберите об п^сти. ок»'

• сканирования.
3. Где БЫ хотите раэмес
изображение?
^f г: Д<зполнитепьнь!е настройки.
.размера вывода
: Лучшая цветная Фотография .

h Ширина: 21 ,53 см
•I' Высота: 29,72 см
! Масштабирование: 1 00%
; ; : , Разрешение 200 т. /а
; П риб 1изительный размер: 1 1 .7 М С<айт
4. | Сейчас отпрлр.ьте сканмрог.анное изображение | •Спр'Ижа • 1

>-\
Рис. 3.1. Все параметры сканирования устанавливаются через кнопки пункта 4
Туре (Цветовая модель) позволяет выбрать цветовую модель получаемого

файла (рис. 3.2). Обычно в списке присутствуют:
Q Bitmap (Line art) (Черно-белый рисунок) — только черный и белый цвета,
Q Grayscale (Черно-белая фотография) — градации серого,
Q Millions of Colors (Лучшая цветная фотография) — в схеме RGB.
Если это цветная фотография, то выбор очевиден.
Resolution (Разрешение). Если компьютер позволяет (то есть у него достаточ-
но оперативной памяти), то пока лучше сканировать с максимальным разре-
шением (рис. 3.3), уменьшить его вы потом успеете. Однако если на изобра-
жении видно много пыли или царапин, имеет смысл уменьшить разрешение
и посмотреть на результат — может быть, таким образом вы сможете избе-
жать лишних действий по обработке фотографии. Здесь все зависит от каче-
ства сканера и от его методов интерполяции цветовых точек.
Разрешение — это характеристика устройства (монитора, принтера или сканера), говоря-
щая о его способности отображать (или различать) мелкие детали. Разрешение измеряет-
ся в единицах, указывающих количество точек на дюйм, — dpi (dot per inch). Минимальный
элемент изображения (то есть одна точка) называется пикселом. Таким образом, разреше-
ние связывает физический размер рисунка с размером пиксела, изменяющегося в зависи-
мости от разрешения.
Геке-'-и изображение
Черно-белый рисунок •
Черно.-(5елая Фотография • .
Цветной рисунок
Обычная цветная Фогогг. дчша (256 цветов!
Приблизь гьмыйрдзмор; 11,7 Мбайт
Рис. 3.2. Выбор цветовой модели
* Йспо'льедйте переона
, Ука
(тол
Высот а:;- Выбор границы заблокирован на

данных параметрах
Приблизительный размер: 11.7

Чоачт :
Рис. 3.3. Выбор разрешения при сканировании
Auto Contrast & Color Correction (Автокоррекция контраста и цвета) Эти две
функции (автоматическая настройка контраста и цветокоррекции) могут
пригодиться, когда сканер хорошего качества.
Brightness (Яркость). С помощью этой функции можно слегка осветлить тем-

ные изображения и затемнить светлые. Но эту работу можно смело перело-
жить и на плечи Photoshop при последующей обработке.
Descreen (Убрать муар). Очень полезный параметр при сканировании напеча-
танной картинки, на которой всегда будут присутствовать паразитные узоры,
образуемые наложением растровых сеток.
Filter (Фильтр). Здесь обычно присутствуют фильтры размытия и усиления
контраста. Как правило, они работают хуже, чем их аналоги в Photoshop.
ПРИМЕЧАНИЕ-
Комплектность диалогового окна настройки сканирования зависит от марки оборудования.
Как вы можете видеть из рисунка, последних двух пунктов настройки у данного сканера
нет.
Если случилось так, что на компьютере, к которому подключен сканер, не уста-

новлен Photoshop или есть проблемы с его запуском (последние версии про-
граммы — крайне неповоротливые создания), можно воспользоваться програм-
мой, поставляемой вместе со сканером. По сути дела, внутри Photoshop вы с ней
и работаете, только вам не приходится лишний раз открывать и закрывать
файл. Сохранять надо в формате TIFF, чтобы при сохранении не потерять не-
восполнимое качество.
Обработка фотографий
Для Интернета, как правило, требуются файлы с разрешением 72 dpi. Именно
до такого разрешения вам будет необходимо уменьшить вашу фотографию. Плюс
надо учесть реальные размеры на экране. Например, если вы ориентируетесь на
просмотр на мониторе с разрешением 800x600, не стоит помещать на сайт фото-
графию размером 1500x1000 (разве что это будет географическая карта, где ли-
нии прокрутки будут уместны).
1. Если вы определились с размером вашей картинки в пикселах, выполните ко-
манду Image > Image Size (Изображение > Размер изображения), открываю-
щую одноименное окно.
2. В группе Document Size (Размер документа) вы можете установить разрешение
(72 пиксела на дюйм ), а в верхней группе Pixel Dimensions (Размеры в пиксе-
лах) — требуемый размер. В нижнем раскрывающемся списке (Resample Image)
надо выбрать метод интерполяции, ведь Photoshop будет из нескольких со-
седних точек получать одну. Оптимальным вариантом обычно является бику-
бическая интерполяция.
3. После этого полученный результат сначала надо сохранить в формате TIFF,
а потом в JPG (о графических форматах Сети подробно рассказано в заня-
тии 10).
Дырки в фотографиях и другие серьезные повреждения можно убрать инстру-
ментом Rubber Stamp Tool (Штамп). С царапинами и мелкой пылью хорошо
справляется фильтр Dust & Scratches (Пыль и царапины) с установкой радиуса 1
или 2 (чем выше было разрешение, тем больше требуется радиус). Для усиле-
ния контраста используйте фильтр Unsharp Mask (Нерезкая маска). Фильтр Blur
(Размытие) поможет в некоторых случаях избежать контрастных дефектов, но

он менее эффективен, чем Dust & Scratches (Пыль и царапины).
Применение фильтра Unsharp mask (Нерезкая маска)
Все фильтры усиления резкости работают по принципу повышения контраста
в пограничных областях (например, в области, где объект смыкается с фоном).
Параметр Radius (Радиус) фильтра Unsharp Mask (Нерезкая маска) задает, в ка-
ком диапазоне (в пикселах) будет усиливаться контраст приграничных облас-
тей. Параметр Amount (Величина) задает силу контрастности.
Значение поля Threshold (Порог) показывает, насколько должны различаться зна-
чения смежных тонов (в диапазоне от 0 до 255), чтобы к ним можно было при-
менить сглаживание. Например, если значение порога равно 3 и соседние пиксе-
лы имеют тоновые значения 122 и 124, к ним не применяется фильтр резкости.
Таким образом, средства повышения резкости не применяются к областям с
низким контрастом. Изменяя этот параметр, можно игнорировать слегка выде-
ляющиеся пикселы вместо их акцентирования. Для большинства изображений
достаточно значений 3 или 4. При значении 10 результаты повышения резкости
практически не видны.
Очень важно, чтобы вертикально стоящие предметы получились действительно
вертикальными и на экране, — столбы должны быть столбами, а не линией го-
ризонта. Но сканируемый материал часто трудно положить прямо. Обычно в та-
ких случаях фотографию кладут на край сканера, чтобы она выровнялась по его
линейкам. Это плохо, потому что лампа сканера не имеет одинакового уровня
освещения на всем протяжении, по краям она светит слабее. Следовательно,
цвета объектов, находящихся у боковых линеек сканера, искажаются. Есть ли
выход?
Прежде всего, необходимо положить фотографию ближе к середине стекла ска-
нера. Если она при этом сканируется криво, надо отсканировать ббльшую об-
ласть, а потом в Photoshop развернуть на необходимый угол. Угол можно из-
мерить инструментом Measure Tool (Измерительная линейка). Значение угла
приложенной линейки выводится на панели Info. Если открыть диалоговое окно
Rotate Canvas (Повернуть полотно), то найденное линейкой значение угла будет
помещено в поле Angle (Угол), останется только нажать ОК.
Работа с гистограммой
Команда Image > Adjust > Levels открывает гистограмму изображения.
Гистограмма — это график распэеделения яркости пикселов.
Если основная масса (гора) располагается ближе к левому краю — значит, изо-
бражение темное, если ближе к правому — светлое. Черный и белый треуголь-
ники по краям обозначают черную и белую точки — самое темное и светлое
места в изображении. Их сведение усиливает контраст, но уводит тени в черный
цвет, а светлые части — в белый. Кроме того, на гистограмме есть точка среднего
тона. Если требуется плавно затемнить или осветлить изображение, надо дви-
гать ее в ту или другую сторону. Пробелы в гистограмме говорят об отсутствии
информации на данном участке. В худшем варианте гистограмма будет напоми-

нать расческу.
Для такого изображения существует способ «придумать» недостающую инфор-
мацию.
1. Скопируйте на слои полученное при сканировании изображение четыре раза.
2. Задайте значение непрозрачности (Opacity) для каждого слоя вдвое меньше,
чем у предыдущего. Должно получиться следующее построение:
Q Background — непрозрачен;
Q Background copy — 50 %;
Q Background copy 2 — 25 %;
Q далее, следуют 12 и 6 %.
3. Сместите слой Background copy на один пиксел влево, Background copy 2 — впра-
во, Background copy 3 — на один пиксел вверх, Background copy 4 — вниз.
4. Совместите все слои.
Может быть, после этого потребуется применить фильтр Unsharp Mask. Ясно, что
описанный способ не всегда годится, но он позволяет имитировать недостаю-
щую цветовую информацию, что важно, если к изображению будут применять-
ся фильтры для достижения каких-либо декоративных эффектов.
Сканирование репродукций
Сканировать живопись, графику и все, что требует точной цвето-тоновой пере-
дачи, разумеется, лучше с использованием хороших сканеров и калиброванных
мониторов, но это доступно не всегда. На простом сканере тени проваливаются
в черный цвет, а светлые части выбеляются. Выходом служит сканирование с
установкой пониженной контрастности. Затем в Photoshop, глядя на оригинал,
можно откорректировать картинку. Чтобы достичь значительных успехов, тре-
буется досконально знать программу и иметь художественные способности1.
Сохранение файла
Предположим, вы отсканировали фотографию обычного размера с разрешением
1200 dpi (высокое, но вполне доступное значение). Размер отсканированного
изображения получится 4800x3600 пикселов. Каждый пиксел занимает 3 байта
(в схеме RGB). Итого получаем — 50 Мбайт.
Такой файл не выставишь в Интернете, да и на мониторе толком не посмот-
ришь. Соответственно, изображение приходится ужимать, чтобы оно занимало
меньше места. А серьезное сжатие изображения неизбежно ведет к ухудшению
его качества. Как всегда, приходится выбирать: качество или объем?
Сразу после сканирования сохраните файл, чтобы можно было к нему вернуться,
если дальше вы что-то невосстановимо отредактируете. И обязательно сохра-
няйте изображение в формате TIFF — он содержит всю информацию о картин-
ке и даже кое-что сверх того. Если в процессе редактирования изображения вы
сохраняете промежуточные результаты, то тоже только в этом формате. Закон-
чив правку, рекомендуется таким же образом сохранить и итоговый вариант.
1
Рекомендуемые издания можно найти в списке литературы в конце книги.
Окончательный вариант для публикации сохраните в формате JPEG. Его алго-

ритм позволяет очень компактно сжимать фотоизображение, хотя это и сопро-
вождается потерей качества. Для сохранения используйте команду Save as или
Save for Web, затем выберите1 формат .jpg. В окне дополнительных параметров
вы сможете указать степень сжатия. Следите при этом за размером изображе-
ния внизу панели: он не должен превышать 70 Кбайт.
Еще раз про дизайн

Еще раз проясним для себя, что будет представлять собой страница сайта
(рис. 3.4, 3.5).
Фоном страницы будет служить береста. По ее краям будет проходить рамка,
как бы выдавленная в бересте. В центре внизу и вверху мы разместим логотип.
За рамкой будет расположено меню: вверху — на разделы сайта, слева — на
страницы раздела (их можно поместить как слева от рамки, так и справа).
Если страница будет получаться большой и будет активна вертикальная «про-
крутка», ссылки на разделы можно продублировать внизу закладками (их при-
дется создавать отдельно) или простыми текстовыми ссылками. Логотип можно
задать как ссылку на главную страницу. Для страниц, имеющих собственную
структуру (таковыми у меня будут фотоальбом, поэтический блокнот и цитаты
из глав книги), надо организовать еще одно меню закладок вверху, под заклад-
ками раздела.
3JJ Создание им трмк гивных сайтов - Microsoft Internet Explorer
Рис. 3.4. Интерфейс сайта

3 Зак. 96
Ш Создание интрактивныж сайтов - Microsoft Internet Explorer

i-File 'gar-View. Fevoiitae .Tools Help
I"""
"Ж~Ш
Рис. З.5. На шаблоне страницы сайта показаны рамки вокруг
Основной текст пусть будет темно-коричневого цвета (#7В5А4В). Этот цвет я

позаимствовал в Photoshop с отсканированного кусочка коры. Для ссылки мож-
но взять цвет полоски на бересте, а для просмотренной и активной ссылки —
более светлые оттенки. Шрифт мы решили брать с засечками для основного
текста и без засечек — для заголовков.
В качестве графических ссылок и элементов оформления можно использовать
зеленые листья.
Создание элементов оформления

Мы уже отсканировали фотографии и бересту. Осталось превратить эти файлы
в элементы сайта. Фотографии уже должны быть в почти готовом виде, чего не
скажешь обо всем остальном...
Графический текст
Для начала вы должны наметить размеры графических элементов интерфейса,
которые вам понадобятся. Текст будет содержаться в рисунке логотипа и эле-
ментах меню. Как мы уже решили, это будут выдавленные на бересте слова
(рис. 3.6). Подробно мы обсудим только логотип, а пункты меню можно будет
легко сделать по аналогии.
Рис. 3.6. Примерно так будет выглядеть логотип моего сайта
Пусть высота логотипа будет 60 пикселов. Длину пока можно взять с запасом -
400 или 500 пикселов.
1. Создаем новый файл такого размера.
2. На слой фона загружаем отсканированное изображение бересты, вырезав его
из большего.
3. Откроем палитру Layers (Слои) и создадим новый слой. На нем инструмен-
том Text (Текст) напишем Записки на бересте.
4. Выбираем размер шрифта равным 40 пикселов (это порядка 30 пунктов1). Текст
должен занимать примерно 2/3 логотипа по высоте. Как мы уже обсуждали,
лучше выбрать шрифт без засечек и установить полужирный стиль шрифта.
5. Затем растрируем слой командой Layer > Rasterize (Слой > Растеризовать).
6. Выделяем текст (например, «волшебной палочкой» щелкаем за пределами
букв и в контекстном меню выбираем Обратить выделение) и заполняем его
растровой заливкой, более темной, как будто мы вырезаем в бересте буквы
(можно выбрать, например, заливку древесиной). Для этого выполняем ко-
манду Edit > Fill (Правка > Заливка), в открывшемся окне в верхнем списке
устанавливаем Model (Модель) и выбираем нужный пункт в списке Custom
Pattern (Произвольная текстура).
Можно поступить другим способом: воспользоваться инструментом Type-
Mask (Текст-маска), который не печатает буквы, а создает область выделения
такой формы. Вам будет достаточно написать нужный текст на темной бере-
сте и удалить остальное. А можно поступить еще проще — написать текст
цветом, наиболее соответствующим темной бересте (#7В5А4В).
7. После этого тексту необходимо придать эффект вдавленности. Для этого его
надо выделить и в меню слоев выбрать команду Style (Стиль). В открывшемся
меню необходимо выбрать Bevel and Emboss (Фаска и рельеф). В окне настрой-
ки эффекта вы можете настроить внешний вид вырезаемых букв. Нет необ-
ходимости обсуждать это подробно, так как вы сможете сами все увидеть с
помощью предварительного просмотра тут же в окне.
8. Останется только сохранить файл в формате JPG.
В меню текста наверху рабочей области Photoshop находится список, управляю-
щий эффектом сглаживания текста (anti-aliasing). Он пригодится для мелких
(но не самых мелких) надписей. Можно выбрать один из четырех вариантов
сглаживания:
• Anti-Alias None (Без сглаживания);
• Anti-Alias Crisp (Четкое сглаживание);
1
Пункт равен 1/72 дюйма.
Anti-Alias Strong (Сильное сглаживание);

Anti-Alias Smooth (Гладкое сглаживание).
При использовании сглаживания текста следует иметь в виду, что растеризация может
привести к существенному искажению шрифта. Чтобы избежать этого, разработчики сове-
туют снять флажок функции Fractional Width (Дробная ширина) в палитре Character (Сим-
вол) и не использовать сглаживание.
И последнее замечание. В меню инструмента Текст расположены две кнопки, ве-

дающие направлением текста: вертикальным или горизонтальным. Они приго-
дятся вам для рисования элементов меню.
Оставшиеся элементы
Для завершения работы с графическими элементами нам осталось нарезать гра-
фические файлы и обработать отсканированные листья. С листьями все просто:
вы должны выделить лист с помощью «волшебной палочки», поместить его на
нужный фон и сохранить в формате JPG. Листья можно использовать для
оформления элементов меню или внутренних ссылок.
СОВЕТ
Если вам некогда возиться еще с одной программой для записи графических файлов, вы
можете воспользоваться Flash. Задайте необходимый размер стола в окне Movie Properties
(Свойства фильма), открываемого одноименной командой контекстного меню, нарисуйте
необходимое и сохраните изображение с помощью команды Export Image (Экспорт изобра-
жения) в нужном формате.
Оставшиеся элементы интерфейса можно просто вырезать из отсканированных

и обработанных изображений. Нам понадобятся следующие элементы.
• Горизонтальная и вертикальная полоски в один пиксел толщиной для рисо-
вания края. Необходимо сначала нарисовать линию, затем вдавить ее, а по-
том вырезать. Вертикальная линия должна быть вышиной с логотип, а гори-
зонтальная может быть существенно уже. Учтите, что если вы решили
расположить линии рамки на полосе несимметрично, то вам их понадобится
вдвое больше.
• Кусочек бересты, которым будет замощена вся страница. Вырежьте несколь-
ко кусочков, чтобы выбрать наиболее подходящий с точки зрения повторяе-
мости рисунка, то есть такой, чтобы фон выглядел как единое целое, а не как
набор квадратиков.
• Уголок — изображение высотой с вертикальную однопиксельную полоску
и длиной с горизонтальную, содержащее сгиб или пересечение выдавленных
линий рамки (если использовать пересечение, можно сэкономить целых три
картинки — использовать для всех углов одну и ту же).
Верстка
Рассказывать, как сверстать десяток страниц сайта, — не менее утомительное и
скучное занятие, чем слушать этот рассказ. Писать, конечно, легче, ведь всегда
можно просто скопировать часть текста и повторить ее, но читать такую книгу
становится невыносимо...
Мы поступим разумно: обсудим, как будут выглядеть две страницы, принци-
пиально разные, — главная и заглавная (одна из страниц HTML-версии сайта).
Особняком будут стоять страницы фотоальбома, но разобраться, как их надо
спроектировать, не составит труда.
СОВЕТ
Создайте на основе первой сверстанной страницы шаблон. Это поможет вам в будущем
сэкономить время. Если для верстки вы используете Блокнот, в котором нет возможности
сохранить файл в виде шаблона, сохраните вариант страницы без текстового и графиче-
ского наполнения, содержащий только элементы интерфейса.
ВНИМАНИЕ
При использовании языка разметки HTML помните о требовании вложенности тегов. Нель-
зя закрывать теги в другом порядке, кроме как в том, в каком они были открыты. То есть
не допускается следующая структура: <ТЕГ_1хТЕГ_2х/ТЕГ_1х/ТЕГ_2>. Чем раньше
был открыт тег, тем позже он должен быть закрыт: <ТЕГ_1><ТЕГ_2><ДЕГ_2></ТЕГ_1>.
HTML — регистронезависимый язык, то есть названия тегов и атрибутов могут быть запи-
саны как строчными, так и прописными буквами, и даже теми и другими одновремен-
но. Если вы напишите <HTML>, <html> или <htML>, браузер поймет вас в любом случае.
Исключение составляют значения некоторых атрибутов, например стандартные названия
цветов, которые следует писать с прописной (Black, Red и т. д.). Для единообразия и на-
глядности в книге мы будем писать теги прописными буквами, атрибуты — строчными.
Для начала разметим страницу. Логотип будет размещен, как и везде, посредине
вверху и внизу. Примерное расположение ячеек показано на рис. 3.7.
Уголок Рамка Логотип Рамка Уголок
Внутренняя
таблица
га
5й
1
1 1
Рис. 3.7. По такой схеме будет создана первая страница сайта
Для разнообразия (потом мы будем использовать и другие простые HTML-ре-

дакторы) сверстаем заготовку страницы в web-мастере от Netscape (он встроен
в браузер).
1. При запуске мастер создает пустую страницу. Сохраняем ее, при этом кроме
имени (она будет называться index.html) надо будет ввести заголовок, напри-
мер Создание интерактивных сайтов. Заголовок должен быть функциональным,

так как он будет отражаться в закладках пользователя.
СОВЕТ
Чтобы содержание страницы загружалось по частям, необходимо вместо одной таблицы
использовать несколько последовательных. Браузер показывает таблицу после того, как
он ее нарисует, поэтому чем меньше таблица, тем раньше она появится на экране.
2. Вначале вы должны задать параметры страницы — цвета ссылок и фон. Для

этого выберите в меню Формат команду Цвета и свойства страницы.
3. Чтобы задать цвета ссылок, просто щелкните на кнопке с образцом цвета
(рис. 3.8) и выберите Другой. Затем в появившемся обычном окне палитры
Windows задайте значение цвета в схеме RGB, нажмите Добавить в набор, вы-
делите появившийся цвет и нажмите ОК.
Параметры страницы
•Общие Цвет и фон IТэги МЕТА j
;' ; Цвета страницы
• Использовать цвета, польг

Обычный текст Обымный текст
Текст ссылки
Активная ссылка
| Цвета по умолчанию Vj.;;
Рис, 3.8. Задание параметров страницы
4. В том же окне на вкладке Теги МЕТА удалите все теги <МЕТА>.

5. На вкладке Общие (она служит для задания общих тегов <МЕТА>) укажите клю-
чевые атрибуты и описание, можете убрать или исправить данные автора
(рис. 3.9).
Q В поле Описание (атрибут name="DESCRIPTION") должно содержаться краткое

описание страницы и сайта.
О В поле Ключевые слова (атрибут name="KEYWORDS") необходимо перечислить
основные ключевые слова, определяющие направленность сайта или стра-
ницы, если речь не идет о заглавной или главной страницах сайта.
О Поле с авторством (атрибут name="AUTHOR") можно оставить как есть.
К заполнению этих полей (и соответствующих тегов) необходимо подойти

серьезно: от них будет зависеть будущая судьба вашего детища. По ключе-
вым словам поисковые машины будут включать ваш сайт в результаты поис-
ка, а содержание тега <МЕТА> с именем DESCRIPTION пользователь увидит в ка-
честве описания вашего сайта.
Параметры страницы
ЯСоздание интерактивных сайтов
Сайт Дмитрия Лешева
книга, интеракт!
«.аиия;
Рис. 3.9. Задание значений тега <МЕТА> находится на вкладке Общие
6. Главное содержание страницы — это таблица с рисунками. Поэтому, закрыв

диалоговое окно Параметры страницы, нажимаем на панели инструментов
кнопку Таблица и задаем ее параметры (рис. 3.10).
72 Занятие 3. Сам себя не похвалишь.
Параметры новой таблицы
||||Щ|&1' ИЗ Количество столбцов;: J5

Вон: -&г-ие&ниьтаблицы -
пикеела(ав). Ц V
JO .пикселфе) . | ^ I I;. . . I -^ЬШ:
1100 И % о т р о д и т е л ь ск с:|р |
;
Г
Рис. 3.10. Задание параметров таблицы
7. Затем в соответствующие ячейки надо поместить логотип и рисунки углов

(рис. 3.11).
8. В ячейки с рамками поместим фоновый рисунок. Для этого можно щелкнуть
правой кнопкой на ячейке и выбрать в контекстном меню пункт Свойства
ячейки или перейти в ячейку и выбрать команду Формат > Свойства таблицы.
В появившемся окне откройте вкладку Ячейка. На ней необходимо устано-
вить высоту и ширину в процентах или пикселах и фоновый рисунок.
СОВЕТ
Если у вас нет подходящих изображений, нарисуйте любые, только надо соблюсти правиль-
ные размеры.
Однако после всех вставок вы увидите в окне web-мастера не совсем то, что хо-
тели. Сохраните файл и откройте его в окне навигатора. Там он выглядит еще
хуже: фон ячейки не отображается, пока в нем нет содержимого.
N
Изображение, j Ссышб}:АбЩ;
дрес-введите адрес URL или: :
——.,, ™!ЖЦщ11||"'
'//D|/Books/My/Flash2/Rash/a
щ. звЩЩ .
0
:
Jin
'i
•ки, |0 то-
: Доп. HTML
Отмона.
Рис. 3.11. Задание параметров рисунка
На этой странице все изображения можно сделать фоновыми. Вы можете мани-

пулировать изображениями: делать их фоновыми и нет, и даже накладывать раз-
ные рисунки друг на друга (в формате GIF можно задать прозрачные области).
Закрываем web-мастер и открываем файл в Блокноте. Увидим мы там примерно
следующий текст (листинг 3.1).
ПРИМЕЧАНИЕ -
Честно говоря, HTML-документы, автоматически сгенерированные программой, выглядят
не так красиво, как приведенные в книге примеры. В ходе работы их подправили, пригла-
дили и причесали.
Листинг 3.1. HTML-код, сгенерированный web-мастером

<!DOCTYPE HTML PUBLIC "-//w3c//dtd html 4.0 transitional//en">
<HTML>
<HEAD>
<META name="AUTHOR" соп1еп1="Дмитрий">
<META name="GENERATOR" content="Mozilla/4.7 [ru] (Win98: I) [Netscape]">
<META name="DESCRIPTION" cDntent="Co3flaHne интерактивного сайта">
<META name="KEYWORDS" content-''книга интерактивность Flash Лещев Днитрий">
<ТШЕ>Создание интерактивных сайтов</ТШЕ>
</HEAD>
<BODY text="#A58A38" bgco1or="#FFFFFF" link="#lFlB14" vlink="#009900" alink="#FF6600"

background="tile.jpg">
Snbsp;
<TABLE border=0 cellspacing=0 cellpadd1ng=0 width="100r height="100r>
<TR>
<TD width="40" height="60">
<IMG src="corner_lt.jpg" height="60" width="40">
</TD>
<TD width="50£" height="60" background="ramka_top.jpg"></TO>
<IMG src="logo.jpg" height="60" width="400">
</TD>
<TD width="50£" height="60" background»"ramka_top.jpg"></TD>
<IMG src="corner_rt.jpg" Height="60" w1dth="40">
</TD>
</TR>
<TR>
<TD width="40" background="ramka_l.jpg"></TD>
<TD></TD>
<TD height-" 100r>&nbsp:</TD>
<TD></TD>
<TD></TD>
</TR>
<TR>
<TD width="40" he1ght="60">
<IMG src-"corner_lb.jpg" height="60" width="40">
</TD>
<TD width="50r height="60" background="ramka_top.jpg"></TD>
<TD width="100" he1ght="60">
<IMG src="logo.jpg" height="60" width="400">
</TD>
<TD width="50r' he1ght="60" background="ramka_top.jpg"></TD>
<IMG src="corner_rb.jpg" height="60" width="40">
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Строка <!DOCTYPE HTML PUBLIC "-//w3c//dtd html 4.0 transitional//en"> должна предварять
любой документ на HTML 4. В книге она может быть опущена для экономии места и упро-
щения примеров. О теге <!DOCTYPE> см. приложение 2.
Как видно, устройство файла довольно прозрачно.
СОВЕТ
Будьте внимательны к пробелам, которые расставляет web-мастер. Некоторые из них бу-
дут вам мешать, а некоторых будет не хватать... Старайтесь не переносить код между тега-
ми <TD> и </TD>, если ячейка пустая — браузер может воспринять это как пробел. В кни-
ге переносы могут присутствовать для улучшения читаемости текста.
Располагать рисунки на сервере, да и на собственном компьютере, лучше в от-

дельном каталоге, а не вместе с HTML-файлами, чтобы не потерять последние,
как иголку в стоге сена. Однако какой бы путь вы ни указали в web-мастере, он

все равно перенесет рисунки в каталог HTML-файла. Поэтому надо уточнить
путь к файлам рисунков, при необходимости дописав название содержащей их
папки, например image/.
Во всех ячейках с фоном между тегами <ТО> и </TD> необходимо вставить нераз-
рывный пробел — последовательность Snbsp;. Обязательно уберите лишний не-
разрывный пробел ( ), который web-мастер добавил в качестве содержания
страницы до вставки таблицы после тега <BODY>. Всем ячейкам, непосредственно
содержащим рисунки, надо задать такие же параметры height и width, как и у ри-
сунка. Также необходимо объединить центральные ячейки, чтобы вставить туда
таблицу с берестяным фоном и содержанием — ссылками на версии сайта и сер-
вер Macromedia. Объединение ячеек происходит просто: вы удаляете ненужные
ячейки, а у оставшейся (той, в которой задан фон) указываете параметр col span,
равный 3.
СОВЕТ
Сохраните текст страницы, который будет повторяться на других страницах сайта, в каче-
стве шаблона. Можно завести общий шаблон — обычную текстовую страничку, которую вы
будете каждый раз заполнять содержанием и сохранять под другим именем (а еще лучше
всегда иметь несколько копий шаблона). Шаблон будет включать стандартные теги, кото-
рые повторяются на всех сграницах Сети. Самый простой шаблон должен включать сле-
дующий код:
<!DOCTYPE html public ' - / / w 3 c / / d t d html 4.0 transitional//en">

<HTML>
<HEAD>
<META name="AUTHOR" content-''Дмитрий Лещев">
<META name="DESCRIPTION" content="">
<META name="Keyworcs" content="">
<TITLE></TITLE>
</HEAO>
<BODY>
</BODY>
</HTML>
А вот шаблон странички со сценарием:
<!DOCTYPE html public "-//w3c//dtd html 4.0 transitional//en">

<HTML>
<HEAD>
<META name="AUTHOR" согЛеп!="Дмитрий">
<META name="DESCRIPTION" content-"">
<META name="KEYWORDS" content="">
<TITI_EX/TITLE>
<SCRIPT language="JavaScript">


OBJECT classid="clsid:D27CDB6E-AE6D-llcf-9688-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5.
0,0.0"
width=100£ height=100£>
<PARAM name=movie value="index_flash.swf">
<PARAM name=menu value=false>
<PARAM name=quality value=high>
<PARAM name=wmode value=transparent>
<PARAM name=bgco1or value=#FFFFFF>
<EMBED src="index_flash.swf" menu=false quality=high
wmode-transparent bgcoloHfFFFFFF width=100£ height=1003!
TYPE="application/x-shockwave-flash"
PLUGINSPAGE="http://www.macromedia.com/shockwave/download/index.cgi?Pl_Prod_Version-Shoc
kwaveFlash">
</EMBED>
</OBJECT>
</BODY>
</HTML>
Очевидно, какие исправления необходимо внести. Во-первых, надо перенести
из остальных HTML-фалов сайта все до тега <body> включительно. В теге <body>
можно убрать определение цветов текста и ссылок:
<HTML>
<НЕАО>
<МЕТА name="OESCRIPTION" content-''Фильм Создание интерактивного сайта">
<МЕТА name="KEYWORDS" content-''книга интерактивность Flash Лещев Дмитрий">
<Т1^Е>Фильм Создание интерактивных сайтов</Т1Т1Е>
</HEAD>
<BODY background="image/tile.jpg" topmargin=0 leftmargin=0 rightmargin=0 marginwidth=0
marginheight=0>
Если размеры окна будут заданы непропорционально размерам фильма, повто-
рение фона сгладит неточность.
Принято, чтобы страница с фильмом открывалась во весь экран в другом окне.
Сделать это можно, добавив на страницу со ссылкой (у нас это будет index.html)
следующий сценарий:
<SCRIPT language»"JavaScript">
function Flash(URL){
var screen_height=600:
var screen_width=800;
if (self.screen) { // от 4 версий браузеров
screen_width = screen.width
screen_height = screen.height
}
else if (self.Java) { // 3 версия NN
var jkit = Java.awt.Toolkit.getDefaultToolkitO;
var scrsize = jkit.getScreenSizeO;
screen_width = scrsize.width;
screenjieight = scrsize.height;
}
screen_width = screen_width-10;
screen_height - screen_height-30:
window.open(URL.'name'.'width=' + screen_width + '.
height=' + screen_height + '.
top=0,1eft=0.resi zable=no.toolbar=no,
1ocati on=no,di rectori es=no.status=no.menubar=no,
scrollbars=no,copyhistory=no')
}
</SCRIPT>
Саму ссылку надо также немного изменить. Значок решетки «#», стоящий вме-
сто ссылки, указывает на текущую страницу. То есть главная страница останет-
ся такой, как есть, а в новом окне откроется фильм:
<А href="#" onclick="Intro('index_flash.html')">
<IMG src="image/leaf.GIF" height=50 width=50 аИ="лист березы">
<FONT size=+l face="Times New Roman Cyr. serif">
Flash-версия сайта
</FONT>

На этом занятии мы познакомились с работой программы Macromedia Flash 5 -
оплотом векторной графики в Сети. С помощью Flash можно не только самому
нарисовать мультфильм для ребенка, но и добавить интересные и вполне серь-
езные эффекты на свой сайт. Мы научились:
• использовать инструменты Flash;
• создавать символы — клипы, кнопки и графические рисунки;
• писать простые сценарии на ActionScript;
• работать со слоями и перекладывать рутинную работу раскадровщика на
плечи машины;
• создавать новые цвета и сохранять созданную палитру для последующего ис-
пользования;
• встраивать фильм в HTML-страницу.
Arrivederci! Впереди нас ждет еще одна нелегкая роль, на этот раз — рекламного
агента.
Занятие 5
Реклама — двигатель торговли

За старца глухого
Меня принимает, должно
быть, комар —
Звенит у самого уха.
Кобаяси Исса1
Кликни Деда Мороза — придет... Нет, не прекрасная Снегурочка, а с большой
вероятностью — Баба Яга. Снегурочке ничего не надо — у нее Дед Мороз под
боком.
Хотя со вступлением я, наверное, палку перегнул. Назойливая госпожа Реклама
стала неотъемлемой частью нашей жизни, и, как вы уже догадались, на сего-
дняшнем занятии мы станем ее слугами. На этом занятии нам предстоит:
• познакомиться с проблемой поиска в Интернете;
• помочь поисковым серверам в нелегком труде отыскания нашего сайта;
• включиться в работу сетей обменов баннерами;
• создать собственный простенький рекламный плакат;
• узнать способ создания бегущей строки (и не одной!) с помощью JavaScript;
• освоить работу с анимированным текстом во Flash.
И сначала мы ответим на простой вопрос — как же люди найдут новый сайт?
Путешествия в Интернете
Представьте себе: вы приехали в незнакомый город. Для начала вы хотите най-
ти подходящую гостиницу. Такую, чтобы и кошелек не сильно похудел, и тара-
каны ночью чемодан не унесли. Что делать? Можно спросить первого встречного
или второго встречного, если первый не понравился. С большой вероятностью
он ответит, где находится гостиница, но со столь же большой вероятностью эта
гостиница вам не подойдет. Если вы встретите аборигена (это такой человек,
который живет в своей хижине, а не в казенной), то вряд ли он будет в курсе,
как в их городе обстоят дела с гостиницами, так как последний раз он пользо-
1
В переводе Т. Соколовой-Делюсиной.
108 Занятие 5. Реклама — двигатель торговли
вался ими в годы бурной молодости. А если вам попадется свой же брат-приез-
жий, то он, как и вы, ничего про гостиницы не знает. Так что гораздо более ра-
зумно будет обратиться к справочной службе, где вам все подробно объяснят и
расскажут. А если уже слишком поздно и на ее окошке висит табличка «Закры-
то», можно попробовать отыскать рекламный плакат где-нибудь на стенах вок-
зала. В крайнем случае вы можете поехать на главную улицу города и поискать
гостиницу там.
Примерно таким же образом необходимо действовать в трущобах Интернета.
В качестве аборигена здесь может выступить первый попавшийся сайт: на его
страницах наверняка найдется пара-тройка ссылок на любимые места, но впол-
не вероятно, что они вам не подойдут. Справочная служба-Интернета — это по-
исковая система или хороший каталог сайтов. Там вы сможете найти почти все
что угодно, даже если вы знаете всего одно слово, которое содержится на иско-
мой странице. Введите его в поле поиска и нажмите кнопку Найти (Поиск или
Search), расположенную рядом. В результате поисковый сервер представит пе-
ред вами обширный список страниц, которые содержат данное слово.
Роль другого приезжего может играть либо ваш коллега, сидящий за соседним
монитором, либо толстый, но порядком устаревший гроссбух с множеством уже
недействительных ссылок. Ну а аналогия рекламных плакатов — это баннеры,
которых в Интернете пруд пруди.
Угадывание адресов в Интернете имеет больше смысла, чем в обычной жизни.
Набрав адрес \мл/\л/.название_фирмы.сот, вы с большой вероятностью попадете на
главный сайт компании, а введя у\ллм.название_фирмы.ш — на ее представитель-
ство в Рунете.
Итак, ключевой фигурой в поиске требуемого сайта будут поисковые системы и
каталоги. Их работа вызывает восхищение — перелопатить весь Интернет за не-
сколько секунд! Однако на самом деле все, конечно, не так, и результаты работы
поисковых служб — это долгий труд многих людей. Очень часто бывает так: вы
точно знаете, что данное слово есть на нужной странице, но поисковая служба
недвусмысленно вам сообщает: «Искомая комбинация слов нигде не встречает-
ся». Чтобы понять, почему так происходит, давайте разберемся, как работают
поисковые службы.
Поисковые службы
Наивно было бы полагать, что по каждому вашему запросу поисковый сервер
перерывает все «мировое виртуальное болото». Только из-за проблем со связью
на это ушли бы многие годы. Вполне естественно, что люди нашли выход, пусть
не оптимальный, но работающий.
Во-первых, каждый создатель сайта, если он хочет видеть свое детище в резуль-
татах работы поискового сервера, должен послать туда заявку. Во-вторых, сер-
вер эту заявку принимает и рассматривает. На некоторых серверах заявленную
страницу просматривают люди и заносят страницу в тот или иной раздел ката-
лога. Обычно вместе с людьми бродит по Сети и программа-робот, которая про-
сматривает web-страницы и специальным образом сохраняет слова, которые на
них встречаются. Таким образом, все просмотренное и заявленное содержимое
Интернета в аннотированном виде оказывается на жестком диске поискового

сервера. Так что он ищет соответствия вашему запросу не на бескрайних про-
сторах всемирной «электронной библиотеки», а в своей «записной книжке».
СОВЕТ
Каждая поисковая система работает по-своему, поэтому полезно осуществлять поиск сразу
на нескольких поисковых сайтах. Точно так же и посылать заявки на регистрацию ресурса
лучше сразу на несколько серверов.
Таким образом, первый шаг, который необходимо сделать на пути к славе, — это
регистрация в основных поисковых системах. Их список наверняка есть у вас на
панели поиска или в меню браузера. На всякий случай приведем некоторые из
возможных вариантов (табл. 5.1).
Таблица 5.1. Поисковые системы
Поисковые системы URL

Alta Vista www.altavista. com
Yahoo! www.yahoo.com
Lycos www.lycos.com, www.lycos.ru
Excite www.excite.com
Go.com www.go.com
HotBot www.hotbot.com
AOL NetFind search.aol.com
Infoseek www.infoseek.com
LookSmart www.looksmart.com
Рамблер www.rambler.ru
Яндекс www.yandex.ru
Апорт www.aport.ru
Епрсг www.eprst.ru
PUNTO www.punto.ru
AlterVista www.altervista.ru
Google.ru www.google.ru
Раскрутка сайта
Чтобы стать популярным исполнителем, совсем необязательно иметь голос,
красивые ноги и прочие второстепенные атрибуты имиджа. Главное — чтобы
тебя «раскрутили». И не слишком далеко забросили.
Еще в большей степени это относится к сайту. Какими бы полезными и инте-
ресными данными вы его ни наполнили, он останется в полной безызвестности,
если вы серьезно не займетесь его раскруткой. И, как уже говорилось, первый
шаг — это регистрация в поисковых системах.
Регистрация в поисковых системах и каталогах

Рассмотрим для примера поисковую систему Рамблер.
Внизу главной страницы расположена неприметная ссылка Добавить ресурс. По-
сле щелчка на ней вы попадете на страницу, на которой вам сообщат, что поис-
ковый робот обработает ваш запрос за неделю, и предложат зарегистрироваться
в поисковой системе Рамблер, в Интернет-рейтинге Rambler's Top 100 и в рей-
тинге Интернет-магазинов Rambler's TopShop. В каждом случае надо заполнить
свою, довольно простую форму. В случае регистрации вас попросят ввести на-
звание сайта, его URL и описание.
Также полезно зарегистрироваться и в Интернет-каталогах. Большинство поис-
ковых систем ведет также и каталоги ресурсов, однако есть и отдельные серве-
ры, где расположены только каталоги, например общий каталог www.mail.ru или
студенческий referat.kulichki.net. В зависимости от содержания сайта вы можете
поискать специальный каталог. Однако многие каталоги похожи на бабочек-од-
нодневок — сегодня есть, завтра нет. Не питайте больших надежд на их счет.
Кроме регистрации можно предпринять и другие шаги в том же направлении,
например оптимизировать индексацию, чтобы помочь поисковому роботу сде-
лать правильные выводы относительно вашего сайта. Для этого надо вставить
теги <МЕТА>, описывающие содержание страницы, в начало страницы между тега-
ми <HEADER></HEADER>:
<МЕТА name="DESCRIPTION" content="KpaiKoe описание содержания сайта">
<МЕТА name="KEYWORDS" content-''список. ключевых, слов">
Первый тег позволяет кратко описать содержание вашей страницы или всего
сайта, а второй содержит ключевые слова, которые отражают тематику сайта.
СОВЕТ
В игру с ключевыми словами можно играть и не совсем честно. Можно, например, вставить
в теге <МЕТА> популярные слова типа «эротика» или «секс», даже если они заведомо не
имеют никакого отношения к вашему сайту. Однако злоупотреблять количеством и качест-
вом ключевых слов не стоит. Особенно не надо переписывать в этот тег все известные и
неизвестные слова. Также убедитесь, что слова не повторяются более трех раз. Обнару-
жив что-нибудь подобное, система проигнорирует ваш сайт и может даже занести его в
черный список, чтобы в дальнейшем сюда уже не возвращаться. А главное — чем меньше
ключевых слов в списке, тем больше вероятность, что ваш сайт появится раньше всех в
конкретном запросе, так как многие поисковые системы располагают список результатов
поиска по мере соответствия введенному запросу.
Кроме тегов <МЕТА> также полезно указывать функциональный заголовок каж-

дой страницы. Заголовок должен состоять из 5-8 слов и наиболее полно отра-
жать ее содержание. Старайтесь использовать в заголовке как можно меньше
вспомогательных слов: союзов, предлогов и т. д., ведь в списке результатов по-
иска по запросу именно заголовок отображается поисковой машиной. Заголовок
должен быть достаточно привлекательным, чтобы у потенциального посетителя
возникло желание щелкнуть именно на этой ссылке.
Заголовок помещается вверху web-страницы между тегами <HEADER></HEADER> в
следующем формате:
к</Ш1_Е>
СОВЕТ
Старайтесь в заголовке дать как можно больше конкретной информации. Если страничка
посвящена фирме, где вы работаете, то кроме ее названия укажите, чем она занимается,
где находится, сколько лет существует. Чем больше конкретной информации человек уви-
дит рядом со ссылкой, тем больше вероятность, что он ею заинтересуется.
Обмен ссылками
Еще один простой, но довольно трудоемкий способ повысить посещаемость сай-
та — попросить, чтобы ваши коллеги и знакомые ставили ссылки на ваш сайт,
упоминая его на своих страницах. Понятно, что ставить ссылки за просто так
никто не будет, поэтому практикуется обмен ссылками. Вы мне — я вам. Вы на-
ходите сайт с близкой тематикой, прикидываете, насколько он интересен и по-
пулярен, и пишите его хозяину электронное письмо с предложением взаимного
обмена ссылками. Ссылка при этом может быть простой текстовой ссылкой или
баннером. Но учтите, что имеет смысл обмениваться с сайтами одного уровня
интересности и популярности. Зачем кому-то ставить ссылку на заведомо скуч-
ный сайт?
Службы обмена баннерами

Службы обмена баннерами устроены просто: вы размещаете баннер на своей
странице, другие показывают ваш баннер на страницах своих сайтов. В зави-
симости от выбранной вами службы на баннеры накладываются определенные
ограничения: определенный формат и размер. Пример такой службы за грани-
цей — RLE Banner Network (www.rle.ru), а у нас — Sitek Banner Exchange Network
(www.banners.ru). Большой и сумбурный список баннерных служб расположен в
каталоге Яндекса: Япс1ех: Компьютеры и связь / Интернет / Баннерные сети. А пол-
ный список с сокращениями в Ру-стандарт от Артемия Лебедева1 вы найдете по
адресу www.design.ru/kovodstvo/ru-standart/l.html.
Еще несколько советов

Вот еще несколько путей рекламной компании сайта.
• Указывайте URL вашего сайта вместе с другими контактными реквизитами
на своих визитных карточках и в официальных письмах. Часто самый про-
стой способ познакомить с собой — это указать на свой персональный сайт.
Каждый посетитель найдет на сайте то, что ему интересно, и не будет заби-
вать голову остальным.
• Включите URL вашего сайта в подпись электронных писем — вашу электрон-
ную визитку. Если вы настроите почтовую программу на автоматическое до-
бавление подписи к письмам, то это позволит вам без лишних затрат прово-
дить свою рекламную компанию среди знакомых.
• Если вы пишете объявление в газету или посылаете резюме, дайте ссылку на
сайт. Как правило, указывать протокол http:// необязательно, это и так подра-
1
Дизайн-студия Артемия Лебедева — самая крупная студня web-дизайна в стране. На страницах сер-
вера www.design.ru находится много интересной и полезной информации. Даже если вам не правит-
ся такой дизайн и стиль жизни, там все равно есть чему поучиться.
зумевается. В глазах работодателя вы только выиграете, указав, что имеете

свои страницы в Интернете. Хотя, конечно, это зависит от работодателя.
• Подумайте над тем, что может привлечь к вам посетителей. Может быть, вы
можете дать простенький астрологический прогноз или обработать интерес-
ный тест? Бесплатное всегда в почете, особенно на страницах нашей Родины.
Однако попробуйте оценить, не станет ли эта забота для вас тяжким бременем.
• При обмене ссылками старайтесь не выставлять их сразу на виду, чтобы по-
сетитель не убежал по ним со страниц вашего сайта.
• Если вы подписаны на группы новостей и ваш сайт попадает в их тематику,
вы можете опубликовать там свое сообщение о сайте. В каждой группе ново-
стей свои правила, но если сайт может быть интересен для подписчиков -
вас обязательно опубликуют.
• Можете объявить конкурс, например на самую лучшую стихотворную паро-
дию на ваш (или чужой) стих, или затейте интересную дискуссию. Кроме
бесценного материала вы получите и посетителей.
• Попросите поставить закладку на ваш сайт (то есть добавить его в Избран-
ное). По закладке посетитель будет приходить снова и снова. Или попросите
сделать страницу стартовой или послать ссылку друзьям. Код выглядит просто:
<А href="#" onclick="window.external .addFavoritet 'http://www.Baui_caiiT.ru/'.
'Description'); return false;">Добавить сайт в Избранное</А>
или
<А href-"!" onclick='window.external.AddFavoriteClocation.href. document.title);return
false'>flo6aBMTb в избранное</А>
Сценарий работает только в Internet Explorer, но это не проблема: 95 % сер-
фингистов в Сети «плавают» именно на нем.
А ссылка для записи страницы стартовой добавляется так:
<А href="#" onclick="this.style.behavior='url(#default#homepage)':
this.setHomePage('http://www.Batii_ca£iT.ru/'); return false:">CflenaTb стартовой
страницей</А>
• Если вам необходимо формально повысить посещаемость, например для того,
чтобы переехать к новому хостеру, который требует определенного количест-
ва посетителей в день, можно воспользоваться «генераторами трафика». До-
вольно обширный их список приведен на странице emoney.al.ru/web/promo.htm.
• Если вас всерьез заинтересует реклама в Сети, советую посетить сайт www.
promo.ru. Кроме множества полезных ссылок вы найдете там аналитические
материалы и статьи по различным аспектам сетевого рекламного бизнеса.
Однако прежде чем участвовать в обмене баннерами, надо сделать свой баннер.
К обсуждению этого мы и переходим.
Что такое баннер

Что же такое баннер? Баннер — это простое или анимированное изображение,
служащее ссылкой на ресурс в Сети. Иными словами — рекламный плакат в
Интернете.
Что такое баннер 113
Сделать свой баннер довольно просто: рисуете картинку или фильм определен-
ного размера — и баннер готов! Если вы участвуете в баннерном обмене, тогда
HTML-код, который вы должны вставить в свои страницы, вам пришлют.
По своей сути баннер является обычной графической ссылкой, и для него ис-
пользуется следующий код:
<А href="http://Baui_URL"><IMG src=" название_файла.д1Г аН="Описание_ссылки" border=0
w1dth=100 height=100></A>
Тег <а> — это тег ссылки, href — адрес ссылки, <img> — тег рисунка, остальное -
его атрибуты и их значения: src — путь и название файла, alt — текстовое опи-
сание (подсказка), border — толщина рамки в пикселах, width — ширина изобра-
жения, a height — его высота.
Численное значение атрибутов типа border, width, height можно писать в кавычках и без,
в отличие от атрибутов со значением-строкой, для которых кавычки играют принципи-
альную роль. При задании чисел можно придерживаться удобства и личных предпочтений.
В тексте могут встречаться оба написания для привития навыков чтения кода чужих стра-
ниц.
В случае если вы хотите сослаться на определенное место web-страницы, после

атрибута href необходимо указать URL страницы и якорь на ней:
<А href="nttp://Baiu_URU*Kopb"><IMG 5гс="название файла.gif" аи-"0писание_ссылки"
border=0 width=100 height=100></A>
Чтобы установить якорь, надо задать тег <А>, но с атрибутом name:
<А пате="#якорь"></А>
Чтобы сделать свой баннер, вам осталось только нарисовать подходящую кар-
тинку. Но прежде чем брать в руки кисти и краски, прочтите несколько советов
о том, как надо красить.
Малярное дело — тонкое

Намалевать что-нибудь — дело несложное. Существенно сложнее нарисовать не-
что, привлекающее внимание. Еще сложнее — чтобы это нечто понравилось. Ну
а мастерство— это когда зрителю захочется узнать, зачем же это здесь намале-
вано.
Чтобы хоть как-то приблизится к мастерам, постараемся понять, какая реклама
в Интернете — самая эффективная. Хотя, честно говоря, это обсуждение будет
больше напоминать лекцию по психологии.
• Есть такой тип людей — что им говорят, то они и делают. Специально для
них на баннерах пишут: «click here», «visit now», «жми сюда», «войти», «OK»
и т. д.
• Есть еще рассеянные люди. Нарисуешь для них пару кнопочек или полосу
прокрутки, они и рады там щелкнуть мышью, считая, что это элемент интер-
фейса браузера. Однако когда пользователь осознает свою ошибку, он впол-
не может нажать кнопку Стоп, остановив загрузку.
• Не секрет, что большинство обитателей Интернета — мужчины. Специально

для них на баннерах рисуют красивых обнаженных девушек, недвусмыслен-
но спрашивающих: «Хочешь меня?» Кто уж тут устоит!
• Не стоит играть на основных инстинктах, если вы хотите привлечь на свой
сайт только действительно заинтересованных посетителей. Ведь ваш потен-
циальный посетитель может и не пойти по такой ссылке. Ваша реклама -
ваш имидж!
• Движение привлекает внимание. Однако использование анимированных изо-
бражений требует определенного навыка — размер графического файла-бан-
нера должен быть небольшим. Во многих сетях баннерного обмена эта вели-
чина для баннера 468x60 составляет всего 15 Кбайт, а использование Flash
не приветствуется.
• Старайтесь совмещать на баннере с буквами и цифрами рисунки или графи-
ческие элементы, дополняющие рекламный текст.
• Используйте яркие цвета. Чем более контрастно сочетание, тем быстрее оно
привлечет к себе внимание. Хотя, конечно, если вы помещаете свой баннер
себе на страницу, то все будет определяться общим дизайном.
Вернемся к формальной стороне вопроса: какой «забор» строить под рекламный
плакат? Высокий, из больших досок, или маленький, из реек?
Если «забор» ваш — вам и решать, каким он будет. Однако если вы собрались
рисовать на чужом «заборе», то вам придется столкнуться с такой вещью, как
стандартизация.
Баннерные стандарты
Интернет — стихийное образование, однако люди, любящие порядок больше все-
го на свете, есть везде. И поэтому рано или поздно любая серийная вещь при-
обретает свой стандарт. В частности, Internet Advertising Bureau (Рекламное
бюро Интернета, www.iab.net) совместно с CASIE (The Coalition for Advertising
Supported Information & Entertainment, Ассоциация информационной поддерж-
ки рекламы и развлечений) предложило такие стандарты (табл. 5.2).
Таблица 5.2. Стандартные размеры баннеров
Тип баннера Размер (в пикселах)
Полный баннер 468x60
Половинный баннер 234x60

Маленький баннер 88x31
Кнопка 120x90
Заглушка 120x60
Вертикальный баннер 120x240
Квадратная кнопка 125x125

Меню 115
Самыми распространенными являются баннеры размером 468x60 и 88x31. Одна-

ко в России, согласно тому же Лебедеву (www.design.ru/kovodstvo/ru-standart/3.html),
существует еще несколько стандартов на графические элементы:
• квадратный баннер 100x100 пикселов;
• новый стандарт на полный баннер — 470x60;
• баннеры служб новостей — 200x55;
• средний баннер 230x33;
• счетчики и рейтинги — 81x26.
Теперь мы перейдем к практическому воплощению графических элементов на
странице. Но пока это будет не баннер, а более необходимая часть сайта — меню.
Меню
Графическое меню по своей сути представляет собой набор баннеров, располо-
женных определенным образом. Конечно, оно не преследует рекламных целей,
но в техническом плане выполнено как панель графических элементов, являю-
щихся ссылками.
Для начала создадим картинку для меню. В качестве примера я возьму картин-
ку нотной строки (рис. 5.1), которую мы создадим на занятии 11, а вы можете
взять любое подходящее графическое изображение, которое есть под рукой.
Заглянем ненадолго в будущее. Анимированная заставка, к созданию которой
мы приступим несколько позже, имеет следующий сюжет. Первые капли летне-
го дождя, разбиваясь о невидимую преграду, превращаются в полоски нотной
строки. Капли, падающие за ними, становятся нотами, окрашиваясь в цвета ра-
дуги. Уже готовая нотная строка переворачивается и занимает место вдоль ле-
вой границы экрана. Каждая нота становится пунктом меню.
Во Flash можно сделать кнопку любой формы, а в HTML нам придется выре-
зать под каждую графическую ссылку прямоугольник с нотой. Для удобства на
рис. 5.1 оставлено горизонтальное расположение рисунка (не пытайтесь сыграть
эту строку на пианино — это просто демонстрация идеи).
Рис. 5.1. Общий вид меню
Рисунок
Для эксперимента вы можете взять любую картинку и открыть ее в Photoshop.
Затем создайте новый слой и при необходимости сделайте надписи к кнопкам.
Пока все изображение представляет собой единое целое, вы сможете легко вы-
ровнять слова относительно друг друга. В случае с нотами надписи могут поме-
шать общему дизайну, так как будут накладываться на изображение. В таких

случаях пояснения, куда ведет ссылка, придется реализовать с помощью атри-
бута alt.
Так как нам надо нарезать изображение на одинаковые части, то можно посту-
пить просто: зафиксировать размер выделяемой области. Для этого выберите
инструмент Rectangle Marquee (Прямоугольное выделение) и на панели этого ин-
струмента в списке Style (Стиль) выберите команду Fixed Size (Фиксированный
размер). Затем в полях Height (Высота) и Width (Ширина) установите нужные
значения. Потом область выделения можно постепенно перемещать, начиная от
одного края до другого, и вырезать по очереди рисунки для кнопок меню, сохра-
няя каждую в отдельном файле.
СОВЕТ
Не забудьте предварительно сохранить полное изображение в отдельном файле, чтобы
случайно не испортить оригинал.
HTML-код
Осталось совсем немного — добавить в HTML-файл необходимый код (лис-
тинг 5.1).
Листинг 5.1. HTML-код, отвечающий добавляемому меню
<TABLE border=0 width=150 cenpadding=0 censpacing=0
align-left valign=top>
<TR><TD><A href="http://news.html ">
<IMG src="news.gif" аН="Новости сайта"
border=0 width=150 height=31></A<@062></TD>
</TR>
<TR><TD><A href="http://history.html">
<IMG src="history.gif" аИ="История оркестра"
border=0 width-150 height=31></A<@062></TD>
</TR>
<TR><TD><A href="http://discks.html">
<IMG src="discks.gif" аН="Музыкальные отрывки"
border=0 width=150 height=31></A></TD>
</TR>
<TR><TD><A href="http://conductors.html">
<IMG src= "conductors.gif" аИ="Дирижеры"
border=0 width=150 height=31></A<ia062></TD>
</TR>
<TR><TD><A href="http://soloists.html">
<IMG src-"soloists.gif" аН="Солисты"
</TR>
<TR><TD><A href="http://participants.html">
<IMG src="participants.gif" аи="Участники оркестра"
border=0 width-ISO height=31></A<@062></TD>
</TR>
<TR><TO><A href="http://tours.html ">
<IMG src="tours.gif" аи="Гастроли"
</TR>
<TR><TO><A href-"http://photo.html">
<IMG src="photo.gif" аН="Фотоальбом"
border=0 width=150 height=31></A<(i>062></TD>

</TR>
<TR><TD><A href="http://contacts.html">
<IMG src="contacts.gif" аН="Контактная информация"
border=0 width=150 height=31></A></TD>
</TR>
</TABLE>
Как вы уже знаете, тег <table> — это тег таблицы. Внутри открывающего тега
таблицы находятся ее атрибуты:
• border — толщина рамки;
• width — ширина рамки;
• cell padding — расстояние от границы ячейки до ее содержимого (в пикселах);
• cellspacing — расстояние между соседним ячейками;
• align — горизонтальное выравнивание;
• valign — вертикальное выравнивание.
Тег <tr> соответствует строке таблицы, а тег <td> — ее ячейке. Если вы будете
делать меню, расположенное горизонтально (в одну строку), там, естественно,
будет только один тег <tr>. Про тег <а> мы уже говорили в предыдущем разделе
«Что такое баннер» (см. также приложение 2).
Итак, меню готово. Его можно встроить в одну из ячеек главной таблицы стра-
ницы сайта (см., например, рис. 3.14).
Баннеры с JavaScript
Многие сети баннерного обмена не поддерживают баннеры, использующие Java-
Script, так как web-серфингисты часто отключают выполнение сценариев, чтобы
они не мешали перемещаться по Сети. И все-таки мы попрактикуемся в созда-
нии простых сценариев. Во-первых, с профилактической целью, просто чтобы
не бояться JavaScript, а во-вторых — чтобы при желании и необходимости вы
смогли использовать этот динамический элемент у себя на страницах. И начнем
мы с привлекательного на первый взгляд эффекта — бегущей строки.
Бегущая строка
JavaScript — объектно-ориентированный язык. Это означает, в частности, что он
оперирует объектами, их свойствами и методами. Объектами в этом случае яв-
ляются формы и их элементы, и с помощью операторов JavaScript их можно из-
менять уже после того, как страница отображена в браузере.
В браузерах, поддерживающих DOM (Document Object Model, объектную модель докумен-
та), объектом является любой элемент документа, заключенный в тег, и его можно изме-
нить уже на загруженной странице (то есть динамически). Именно поэтому HTML, поддер-
живающий DOM, назвали dHTML. На самом деле, конечно, поддерживает DOM не HTML
и даже не JavaScript, а современные браузеры.
Бегущая строка в данном исполнении будет полем ввода (самым простым и рас-
пространенным элементом форм), в котором символы передвигаются слева на-
право (впрочем, поле при этом по-прежнему остается полем для ввода, и вы мо-
жете посоревноваться с машиной в скорости печати).
Вначале между тегами <HEAD> и </HEAD> надо вставить описание функции Di spl a -
cement, которая будет «сдвигать» текст в поле:
<SCRIPT language-"JavaScript">
<i -,_
var RATE=100;
var CHARS=1:
var TEXT = "Привет! Это пример бегущей строки" +
"Если вы хотите знать, как она устроена, посмотрите код страницы." +
function Displacement() {
setTimeoutCDisplacement)'. RATE);
TEXT = document.forml.fi eld.value;
document.forml.field.value -
TEXT.substring( CHARS ) + TEXT.substhngt 0. CHARS);
</SCRIPT>
Вставки тегов комментария () нужны только для совместимости со старыми
браузерами, не понимающими JavaScript. Конечно, комментарий не заставит их исполнить
сценарий, но, по крайней мере, текст функции JavaScript не окажется выведенным на эк-
ран вместе со всем остальным содержанием страницы.
Код функции довольно прост.

• Тег <script> ограничивает текст сценария, а его атрибут language указывает,
на каком языке он написан.
• После ключевого слова var происходит определение использованных пе-
ременных. В данном случае их три: RATE — скорость сдвига, CHARS — ко-
личество сдвигаемых символов за раз, TEXT — собственно текст бегущей
строки.
• Дальше расположено описание функции Displacement О, вводимое ключевым
словом function. В скобках после названия функции располагаются ее пара-
метры — в данном случае их нет. Зато их целых два у используемой функ-
ции JavaScript setTimeout — это параметры Displacement О и RATE.
Функция setTimeout выполняет указанное в качестве своего первого парамет-
ра выражение или функцию через определенное вторым параметром количе-
ство миллисекунд. Таким образом, через каждые 100 миллисекунд (в нашем
случае RATE=100) будет выполняться очередной экземпляр функции D i s p l a -
cementO.
СОВЕТ
Конечно, можно всегда указывать параметры явно, например, вместо setTimeout('Displace-
mentQ', RATE) писать setTimeout('Displacement()', 100). Но в таком случае, если вам за-
хочется изменить скорость «бега», придется просматривать все тело функции. Поэтому
хорошим стилем программирования считается использование внутри сценария только пе-
ременных и констант, а их определение должно быть вынесено в начало страницы.
Объекты, их свойства и методы в объектно-ориентированном программировании

(ООП) принято указывать согласно их статусу в иерархии. Различные уровни
иерархии разделяются точкой. Таким образом, document.forml.field.value озна-
чает, что в текущем документе есть объект forml (это наша форма), в форме есть
элемент с именем field, а у этого элемента есть свойство value (значение).
И именно значение этого свойства мы и присваиваем.
И наконец, несложно понять, что означает выражение TEXT.substringO: это вызы-
вается метод substring объекта TEXT (строки), выделяющий из строки подстроку.
ВНИМАНИЕ
Если вы используете в своих сценариях функцию setTimeoutQ, лучше предупредить об
этом своих посетителей, написав об этом на странице с бегущей строкой или в ссылке на
нее. Дело в том, что в старых операционных системах эта функция будет активно «по-
едать» ресурсы компьютера, что может привести к «зависанию». В операционных систе-
мах, которые по-настоящему поддерживают многозадачность, проблем не возникает.
Метод clearTimeoutQ отключает таймер, установленный при помощи метода setTimeout().
Его синтаксис такой: ClearTimeout (timeoutID), где timeoutID — идентификатор, который
используется только для того, чтобы отменить вычисление методом clearTimeoutQ.
Следующая строка сценария — присваивание переменной TEXT значения тексто-

вого поля формы forml (мы назвали его field):
TEXT = document.forml.fi eld.value:
Затем мы присваиваем полю другое значение, что эквивалентно появлению но-
вой строки в поле. Это новое значение составлено перестановкой первого сим-
вола строки TEXT в ее конец (поскольку CHARS=1):
document.forml.field.value =
TEXT.substringC CHARS ) + TEXT.substringC 0. CHARS):
Затем на странице помещают тег формы и текстового поля, а также еще один
маленький сценарий.
<FORM name="forml">
<INPUT type="text" name="field" size="30" style="border: Opx">

</SCRIPT>
</FORM>
Форма задается тегом <form> с единственным параметром name (имя формы).

Практически все элементы формы задаются тегом <input>. Его атрибутами явля-
ются:
• type — тип элемента формы;
• name — имя;
• size — размер в символах.
Атрибут sty!e="border: Opx" указывает обозревателю1, что вокруг поля не надо
выводить рамку.
Первая строка сценария (document.forml.field.value=TEXT)-присваивает начальное
значение текстовому полю, хранящееся в переменной TEXT. Затем вызывается
функция DisplacementO.
Создание баннера — бегущей строки — закончено.
В Internet Explorer бегущую строку можно сделать и без применения JavaScript. Для этого
надо использовать тег <MARQUE>, который воспринимается этим браузером. Код страни-
цы с бегущей строкой должен быть таким:
<html>
<head>
<Ш1е>Бегущая строка</1Н1е>
</head>
<body bgcolor="#FFFFFF">
<р><тагдиее>Текст бегущей CTpcmM</marquee></p>
</body>
</html>
В Netscape Communicator это будет выглядеть как обычный статический текст.
Картинки-кнопки
Если рисунок, который вы хотите разместить на странице, получился не слиш-
ком «тяжелым», к нему можно добавить простой эффект, который поможет ра-
зобраться в многочисленных картинках-ссылках. Эффект заключается в изме-
нении изображения в тот момент, когда над ними проходит указатель мыши.
Часто данный эффект называют «ролловером» (от англ, roll over). Создается он
довольно просто с помощью JavaScript.
Не хотелось бы вдаваться в подробности объектно-ориентированного програм-
мирования (ООП), поэтому нужные для понимания материала термины поясню
на примере.
Представьте себе комнату, заполненную взрослыми и детьми, играющими в мяч.
Взрослые — люди степенные, они спокойно ловят мяч и перебрасывают его дру-
гому. Дети же, наоборот, стремятся сообщить всему миру о том, что они пойма-
ли или собираются поймать мяч.
Если перейти на язык ООП, то дети являются объектами, которые в определен-
ных ситуациях генерируют события (радостные возгласы). Мяч в нашем приме-
ре являет собой прообраз указателя мыши. Если мяч пролетает над ребенком,
Правда, это значение работает только в Internet Explorer.

раздается два крика: первый — о том, что мяч находится в непосредственной

близости от ребенка — это событие onMouseOver (указатель над объектом); вто-
рой крик раздается, когда мяч улетает в сторону — событие onMouseOut (указа-
тель убрали с объекта).
Предположим теперь, что за пределами комнаты находятся наблюдатели — дет-
ские тренеры, которые не могут видеть происходящее, но все слышат. Следова-
тельно, они могут анализировать (обрабатывать) события, которые происходят
(генерируются) в комнате. Причем каждый из тренеров (в терминах ООП он
будет называться функция-обработчик события) воспринимает только крики
определенного типа (то есть определенные события), но узнает, кто из детей
кричал. Как только крик доносится до ушей тренера, он начинает действовать -
выполнять инструкции, записанные в теле функции.
Закончим с примером и перейдем к картинкам-кнопкам.
Рисунок на экране является объектом и будет генерировать события (конечно,
если браузер поддерживает DOM) при прохождении над ним указателя мыши.
Эти события можно обработать с помощью двух функций-обработчиков:
functionOver и functionOut. Если рисунок является ссылкой, это может привлечь
к ней внимание. В качестве параметра этим функциям передается название ри-
сунка, определяемое атрибутом name.
Обычное изображение также генерирует эти события (см. приложение 3), но только в
браузерах, корректно поддерживающих объектную модель документа (DOM).
Итак, посмотрим, как будет выглядеть код меняющейся картинки-ссылки на

страницу page.html:
<А href =" page. htm" onMouseover="functionOver(' image')"
onMouseout=" functionOut С image ')">
<IMG src="imageOut.gif" name="image" border=0 width=100 height=100 аН="иеняющаяся
картинка">
По умолчанию браузер покажет рисунок imageOut.gif (логично предположить,

что в большинстве случаев мышь находится не над ссылкой).
Подобных ссылок можно сделать множество — необходимо лишь вместо имени рисунка
image написать imagel, image2, image3 и т. д., а в параметре href указать другие HTML-
страницы. Если удачно подобрать их сочетание, то не придется даже увеличивать объем
перекачиваемой информации, ведь можно рисунки менять местами между собой. Немного
подумав, вы легко сможете реализовать игру «пятнадцать».
Когда указатель пересечет границы рисунка, произойдет событие onMouseOver и

будет вызвана функция functionOverQ с параметром image (это имя, которое мы
присвоили данной ссылке, определив атрибут name). Когда указатель выйдет за
пределы ссылки-рисунка, будет сгенерировано событие onMouseOut и вызвана
функция functionOut с тем же параметром.
Теперь необходимо описать функции-обработчики и вставить их в заголовок

HTML-документа. Выглядеть будет все довольно просто:

</SRIPT>
Функции functionOver() и functionOutQ получают в качестве параметра имя кар-
тинки (image) и сохраняют его в переменной imgName. Если мы вызывали функ-
цию functionOut('image'), значит в теле функции переменная imgName будет равна
image. Дальше к этому имени «пришивается» Out.src или Over.src. Наконец, свой-
ству src (имя файла, откуда берется картинка) объекта, названного как значение
переменной imgName, присваивается новое значение.
Для практики допишем еще несколько строк кода, которые позволят избежать
проблем в случае использования Internet Explorer 3 (это, безусловно, раритет,
но он нам важен как пример).
Главное, почему в Internet Explorer 3 не заработает сценарий — в нем отсутству-
ет поддержка изображений как объектов. Поэтому выражение document.images в
этом случае будет равно false (ложь).
Таким образом, код функций обработчиков будет следующим:
<SCRIPT language="JavaSchpt">
<! --
if (document.images) {
// Нам необходимо завести переменные, отвечающие за изображения
imageOut - new Image(lOO.lOO):
imageOut.src = "imageOut.gif";
imageOver = new ImagedOO. 100);
imageOver.src = "imageOver.gif";
}
function functionOverf.imgName) {
// Функция получит значение в виде imagel. image2 и т. д..
// прибавит к нему Over и получит ссылку на нужный объект и файл
imgOver - evaKimgName + "Over.src");
document [imgName].src = imgOver;
ifunction functionOut(imgName) {
// Функция получит значение в виде imagel. image2 и т. д.,
// прибавит к нему Out и получит ссылку на нужный объект и файл
imgOut - evaKimgName + "Out.src"):
document [imgName].src.= imgOut:
Анимированный текст во Flash 123
</SCRIPT>
Если вы осознали суть обработки событий, вы сможете создать другие функции,
вызываемые событиями onMouseOver и onMousedut, которые смогут изменять дру-
гие изображения. Можно сделать перемигивающиеся картинки, убегающий мяч
или мышь и многие другие интересные эффекты.
Можно создать эффект смены еще проще. Для этого надо включить код
JavaScript прямо в тег <img> (так называемый встроенный сценарий):
<А href="page.htm" onMouseOver="document.image.src='imageOver.gif'"
onMouseOut="document.image.src='imageOut.gif'">
<IMG src="imageOut.gif" border=0 name="image" width=100 height=100 а Неменяющаяся
картинка"></А>
А вот тот же самый встроенный сценарий для тега <img>:
<IMG src="iinageOut.gif" border=0 name="image" width=100 height=100 аН="меняющаяся
картинка" onMouseOver="document.i mage.s rc='imageOver. gi f"
onMouseOut="document.i mage.src='imageOut.gi f ">
Как видите, сценарии на JavaScript можно поместить на страницу тремя спосо-
бами:
1) в виде тега <script>;
2) как встроенный сценарий;
3) как присоединенный файл (если использовать атрибут src тега <script>).
Какой способ удобнее, можно выбрать, руководствуясь следующими прави-
лами.
• Нельзя встраивать большие сценарии. Также не стоит встраивать сценарии,
которые могут быть подвергнуты исправлениям.
• Если вы используете один и тот же сценарий на нескольких страницах -
укажите присоединенный файл.
• Если вы сомневаетесь — используйте тег <script> в заголовке.
Однако для того чтобы создать даже простой эффект на JavaScript, нам понадо-
билось написать программу-сценарий. Совсем по-другому дело обстоит при ис-
пользовании Flash. Там программировать нам не понадобится вовсе, ну или
только самую малость.
Анимированный текст во Flash

В предыдущих разделах нам удалось создать достаточно дешевую анимацию
(с точки зрения нагрузки на канал связи) с помощью JavaScript. В новых брау-
зерах можно сделать красивые динамические эффекты с текстом, так как в них
можно получить доступ к любой части документа и изменить ее. Но такие брау-
зеры установлены не у всех. А для того чтобы написать код, удовлетворяющий
почти всех, требуется основательное знание и JavaScript, и HTML. В случае с
Flash все намного проще: чтобы сделать красивый анимированный баннер, не
требуется знать программирование вовсе. Берешь — и делаешь!
Flash — это прежде всего программа, предназначенная для работы с графическими объек-
тами. Пример, который последует далее, выполнен в виде анимированного текста в основ-
ном ради учебных целей и для сопоставления баннеру, созданному с помощью JavaScript.
Если вы сравните объемы получающихся файлов, то разница будет весьма ощутима: файл
с текстом вместо графики занимает почти в два раза больше места! (Ведь Flash рассчитан
на использование векторной графики и сохраняет символы не столь эффективно, как ли-
нии.) Иногда, используя псевдографику, можно добиться оригинальных эффектов, однако
в большинстве случаев лучше использовать простые графические рисунки.
1. Первым делом открываем Flash и выбираем команду File > New (Файл > Соз-
дать) или нажимаем Ctrl+N.
2. Щелкаем на столе правой кнопкой мыши и в контекстном меню выбираем
строку Movie Properties (Свойства фильма, рис. 5.2). В открывшемся одноимен-
ном диалоговом окне задаем новые размеры экрана фильма (как для поло-
винного баннера): в поле Width (Ширина) — 234, в поле Height (Высота) — 60.
Это будет размер нашего баннера в пикселах.
3. Закрываем окно, нажав кнопку ОК, и сохраняем файл под именем BannerFI,
|Movie Properti'
.^Cancel
jDefaut j
1
•.iiiVtfo&frifol ;-;!
; Background Color: v;l.-,b : : ; V "
Ц ЦЦ
Рис. 5.2. Окно свойств фильма
Symbol Properties
Шаровоз
:
Behavior: •'••.ft Movie Clip;?
:
,: л';;••• |
5.3. Задание нового символа-клипа

4. Выбираем в меню Insert (Вставка) команду New Symbol (Создать новый сим-
вол) или нажимаем Ctrl+FS.
5. В поле Name (Имя) вводим какое-нибудь звучное название для клипа, напри-
мер Паровоз (рис. 5.3). Закрыв диалоговое окно, мы оказываемся на рабочем
столе редактирования клипа.
6. Выбираем инструмент Text (Текст) и щелкаем мышью где-нибудь поближе к
центру листа. Здесь мы набираем, к примеру, следующий «текст» из псевдо-
графики1:
!****, г~|
I С] I
I \ I |
7. Далее нам надо заменить шрифт, заданный по умолчанию. Для этого необхо-
димо перейти на панель Character (Шрифт), используя меню Text (Текст) или
нажав Ctrl+C (рис. 5.4). В поле Font height (Размер шрифта), помеченном бук-
вой А с вертикальной двойной стрелкой, следует задать 8, а в палитре выбрать
цвет. Цвет можно выбрать любой, даже собственный (подробнее об этом см.
занятие 4). Также лучше заменить и сам шрифт, выбрав в верхнем списке лю-
бой моноширинный шрифт, например Courier. Теперь осталось приделать па-
ровозу колеса.
Рис. 5.4. Задание параметров шрифта на панели Character
8. Чтобы колеса могли вращаться, необходимо сделать их в виде отдельного

клипа. Повторим шаги 2 и 3, задав имя Колесо и набрав следующий текст: (@)
(здесь можно оставить гарнитуру по умолчанию, Times New Roman или Arial,
так как в моноширинном исполнении символ не будет смотреться как «ко-
лесо»).
9. Поменяем инструмент на Arrow (Выделение) и выделим весь текстовый блок.
10. На панели Info (Информация) в полях X и Y введем 0, чтобы разместить коле-
со точно по центру клипа (рис. 5.5). При этом следует обратить внимание на
1
Создание рисунков из символов псевдографики предоставляет вам прекрасную возможность потре-
нировать свою фантазию!
то, чтобы из девяти квадратиков (на схеме рядом с координатами) черный

был в центре — тогда отсчет координат будет от центра объекта. Если же чер-
ным будет выделен левый верхний квадрат, то отсчет координат будет произ-
водиться от левого верхнего угла.
Рис. 5.5. Задание расположения выделенного объекта на панели Info
Теперь необходимо заставить колесо вращаться. Сделать это можно двумя спо-
собами; какой из них выбрать, зависит от обстоятельств.
Первый путь заключается в покадровом задании положений колеса.
1. Проверяем, что выделение с объекта не снято, щелкаем на втором кадре на
киноленте и нажимаем F6 (или выбираем команду меню Insert > Keyframe
(Вставка > Ключевой кадр)).
2. Теперь переходим на панель Transform (Преобразование) и в поле Rotate (По-
ворот) задаем угол поворота в 45° (рис. 5.6).
B!
Рис. 5.6. Задание вращения выделенного объекта на панели Transform
3. Повторяем предыдущий шаг для кадров 3, 4, 5, 6, 7 и 8, задав углы 90, 135,

180, -135, -90 и -45°, соответственно.
4. Теперь, если все прошло нормально, в окне библиотеки можно просмотреть
клип, состоящий из 8 кадров. Для этого надо открыть окно Library (Библиоте-
ка), выбрать клип Колесо и нажать кнопку со стрелкой вправо в верхнем окне
с клипом.
Второй путь состоит в задании раскадровки — главного инструмента Flash.
1. Выделив первый кадр на киноленте, даем команду Insert > Create Motion Tween
(Вставка > Выполнить раскадровку).
2. Далее щелкаем на девятом кадре киноленты и нажимаем F6. На киноленте
протягивается стрелка от кадра 1 до кадра 9 на сиреневом фоне, которая и
обозначает раскадровку движения.
3. Теперь нам понадобится панель Frame (Кадр). На ней необходимо задать
один поворот по часовой стрелке. Для этого в списке Rotate (Поворот) выбе-
рем CW (По часовой стрелке), а в соседнем поле напечатаем 1.
Вот колесо и закрутилось. Как видно из рис. 5.7, мы могли задать раскадровку,
выделив кадры и выбрав Motion (Раскадровка движения) в списке Tweening (Рас-
кадровка).
«lotion
Рис. 5.7. Задание вращения выделенного объекта при раскадровке
Как бы мы ни делали колесо, его необходимо прикрепить к паровозу. И жела-

тельно, чтобы было не одно колесо, а четыре — две пары. Сделаем это следую-
щим образом.
1. Дважды щелкаем на значке рядом с названием клипа Паровоз в окне библио-
теки и перетаскиваем на стол два клипа колеса, расположив их близко друг к
другу внизу паровозика и выровняв с помощью панели Align (Выравнивание).
С помощью панели Info (Информация) можно задать желаемое расстояние
между колесами.
СОВЕТ
Для того чтобы разместить символ в другом символе или на столе сцены, необходимо вы-
брать его в окне библиотеки одиночным щелчком, а затем вытянуть на нужное место либо
за значок слева от названия в списке (осторожно, не щелкните повторно!), либо за изобра-
жение символа в верхнем окне.
2. Затем необходимо выделить оба колеса и выполнить команду Modify > Group
(Изменить > Группировать) или нажать Ctrl+G. Теперь колеса составляют
одно целое.
3. Теперь мы можем дать команды копирования и вставки, нажав стандартную
комбинацию клавиш — Ctrl+C и затем Ctrl+V. На столе появилась еще одна
пара колес. Расположим обе пары должным образом внизу паровоза.
СОВЕТ
Если вам не удается расположить объекты нужным образом с помощью мыши, причина мо-
жет быть в установленных флажках Snap to Object (Привязка к объекту) или Snap to Guides
(Привязка к направляющим). Они оба расположены в меню View (Вид). Отключите их и
попробуйте еще раз. В любом случае вы можете расположить объект нужным образом с
точностью до пиксела через панель Info (Информация).
4. Теперь перейдем к главному столу сцены, щелкнув на надписи Scene 1 над

списком слоев или выбрав ее в списке, вызываемом кнопкой Edit Scene (Ре-
дактировать сцену). Увеличим для удобства масштаб изображения на экране,
взяв инструмент Zoom Tool (Масштаб) и щелкнув несколько раз мышью на
столе.
5. Если посмотреть параметры фильма (см. рис. 5.2), мы увидим, что скорость
нашего фильма составляет 12 кадров в секунду (fps). To есть, чтобы фильм
продолжался 5 секунд, он должен состоять из 60 кадров. Выделим единствен-
ный кадр сцены, дадим команду Insert > Create Motion Tween (Вставка > Выпол-
нить раскадровку) и вставим ключевой кадр (F6) на место последнего,
шестидесятого кадра.
6. Осталось расположить паровозик в нужных местах в первом и последнем
кадрах. В первом кадре перетащим его за левую границу баннера, а в послед-
нем — за правую. С помощью панели Info (Информация) зададим одинако-
вую координату Y, например 16, в концевых кадрах раскадровки.
Первая часть баннера готова. Нажмем Ctrl+Enter и полюбуемся результатом.
Что ж, паровоз — это, конечно, хорошо, но где же реклама? Паровоз ее приве-
зет... в вагонах. Вагоны будут, например, вот такими:
I+-V4I
I I
I I
(I I)
1. Как всегда, создадим новый клип и назовем его Вагон. Выберем инструмент
Text (Текст) и создадим на слое Вагон показанный выше рисунок из псевдо-
графики.
2. Пару колес можно скопировать из клипа Паровоз, воспользовавшись всегда
выигрышной комбинацией Ctrl+C и Ctrl+V. Расположим их поверх рисунка ва-
гона на том же или на отдельном слое.
Перед тем как разместить на выгонах рекламу, прицепим вагоны к парово-
зу — будем формировать «рекламный состав».
3. Создадим новый слой (кнопка с большим плюсом внизу списка слоев) и пе-
ренесем на него 5 вагонов. Будьте внимательны: при перетаскивании у вас
должен быть выделен именно второй слой, иначе вагоны окажутся на одном
слое с паровозом. Как только вы поместите первый вагон, первый кадр в слое
станет ключевым.
4. Затем напишем пять отдельных букв: F, L, A, S, Н — гарнитурой Times New
Roman красного цвета высотой 24 пункта. Каждая буква должна помещаться
в отдельном текстовом блоке.
5. Теперь выделим один вагон и одну букву и с помощью панели Align (Выравни-
вание) выровняем их по центру, а затем нажмем Ctrl+G, объединив в группу.
6. Затем таким же образом поступим с остальными четырьмя вагонами и буква-
ми. В результате мы получим 5 групп, каждая из которых представляет собой
вагон с рекламной буквой.
7. Хочется, чтобы паровоз вывозил вагоны на всеобщее обозрение и оставлял
так, по крайней мере, на некоторое время. Вставим во второй слой ключевой
кадр вместо кадра 60. Аккуратно поместим вагоны так, чтобы они все были
видны на баннере и выровняем их.
8. Затем выделим все вместе и скопируем в первый кадр второго слоя, перемес-
тив их за паровозом. В шестидесятом и первом кадре подгоним положение
паровоза под положение вагонов.
9. Зададим раскадровку движения во втором слое с кадра 1 по кадр 60. Для это-
го выделим первый и последний кадры второго слоя и дадим команду
Insert > Create Motion Tween (Вставка > Выполнить раскадровку).
10. Если теперь нажать Ctrl+Enter, рекламный поезд будет бодро ездить по экрану.
А если вы посмотрите на размер SWF-файла (того, что встраивается в
HTML-документ), то он составляет всего 12 Кбайт!
11. Когда на просторах баннера расположились вагоны, места на нем не осталось.
Перед тем как следующий паровоз вытолкает их, они могут, например, не-
много помигать. Для этого вставим ключевые кадры 70 и 80. При выделении
кадра 70 второго слоя у нас выделяются все вагоны.
12. На панели Effect (Эффект) зададим эффект Alpha (Прозрачность) и установим
значение прозрачности, равное нулю. В кадре 80 вернем ему значение 100 %.
13. Наконец, чтобы закончить историю с вагонами, вставим ключевой кадр 140
и переместим все вагоны далеко за правый край баннера.
Заметьте, что, когда мы вставляли ключевые кадры, стрелки раскадровки послушно появ-
лялись на киноленте!
14. Теперь зададим движение второго паровоза. Вставим в кадр 61 пустой клю-
чевой кадр (F7), а в кадр 80 — простой ключевой кадр. Перенесем из окна
библиотеки экземпляр паровоза (или скопируем его из первого кадра) и рас-
положим его в кадре 80 слева от вагона с буквой F.
15. Чтобы паровозы не были похожи друг на друга как две капли воды, покрасим
второй паровоз, например, в синий цвет. Для этого выделим экземпляр паро-
воза и на панели Effect (Эффект) зададим эффект Tint (Оттенок), определив
его цвет в палитре. Паровоз стал синим.
16. Затем вставим ключевой кадр 140 и расположим в нем паровоз за правым
краем баннера. Выровняем в кадре 140 положение вагонов и паровоза — на
этот раз паровоз следует позади состава! Раскадровка движения также появи-
лась автоматически.
5 Зак. 96
СОВЕТ
Стоит заметить, что если в кадре 140 задать другой оттенок, то паровоз будет постепенно
менять цвет по мере продвижения по баннеру. Этот эффект можно удачно обыграть, задав
в качестве фона прямоугольник с градиентной заливкой тех же двух цветов. Соответствен-
но при продвижении объект и фон будут обладать инверсным цветом относительно друг
друга.
17. Проверим ролик. Сначала черный паровоз везет вагоны, потом они подмиги-
вают зрителю, затем синий локомотив выталкивает их со сцены, и все повто-
ряется снова.
Вот и все, баннер готов! Обратите внимание, что добавление процесса вытал-
кивания удвоило размер файла: Проводник показывает 25 Кбайт.
18. Теперь вставим баннер в страничку (лучше всего внутрь тега <td>):
<А href="Baui URL"><OBJECT class1d="clsid:D27CDB6E-AE60-llcf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swf1ash.cabfversi on
=5.0,0.0"
width=200 height=50>
<PARAM name=movie value="BannerFl.swf"> <PARAM name=quality value=high> <PARAM
name=bgcolor value=#FFFFFF> <EMBED src="BannerFl .swf" quality=high bgco"ior=#FFFFFF
width=200 height=50 type="application/x-shockwave-flash"
pi uginspage="http://www.macromedia.com/shockwave/download/index.cgi?Pl_Prod_Version=S
hockwaveFlash"></EMBED>
</OBJECT></A>
19. На место текста Ваш URL необходимо вставить адрес той странички, на которую
вы. хотите сделать ссылку.
Конечно, эффекты, которые можно создать с помощью анимации текста, не огра-
ничиваются данным примером. Текст, помещенный в символ, можно сжимать, ис-
кривлять, раскрашивать всеми цветами радуги, как и любой другой символ.
Особое поле деятельности можно создать, используя необычные шрифты, со-
держащие сложные небуквенные символы, такие как Windings (о преобразова-
нии текста в графику см. занятие 10).
СОВЕТ
Раз уж речь зашла об экономии, еще раз обсудим возможности Flash в этой области. Flash
рассматривает текстовый блок как объект и позволяет делать с ним те же действия на па-
нелях Effect (Эффект) и Transform (Преобразование), что и с клипом, а также прекрасно
выполняет для него раскадровку (если вы не изменяете содержимое). В нашем последнем
примере можно было обойтись только одним клипом колеса, а остальные объекты задать в
виде текстовых блоков. Но есть одно «но». Основная сила Flash при создании анимации
заключена в выполнении раскадровки и возможности задания символов. Именно за счет
использования символов можно создавать сложные ролики, занимающие мало места на
жестком диске. В частности, для нашего баннера это обойдется в 12 Кбайт. Если создавать
паровозы и вагоны просто с помощью текста, то объем файла составит 36 Кбайт! Поэтому
при малейшей возможности сэкономить объем за счет создания символа — смело экономь-
те! К тому же, символы имеют еще одно преимущество: их затем можно запросто исполь-
зовать в других роликах, просто взяв их из окна библиотеки.
Таким образом, без больших затрат (как с точки зрения размера создаваемого
файла, так и с точки зрения объема работ — не всем же быть художниками!)
можно создавать интересные ролики. Единственное ограничение на использова-
ние необычных шрифтов состоит в том, что они могут отсутствовать на компью-
тере зрителя, и если вы не встроите символ в фильм, вместо ракет, цветов и че-
ловечков перед глазами наблюдателя заскачут знакомые или неизвестные ему
символы. Поэтому в таких случаях никогда не устанавливайте флажок Use
Device Fonts (Использовать шрифты пользователя). К слову сказать, для нашего
баннера разница между файлами с внедренными символами и использованием
типизации составляет всего 322 байта и экономия за счет дизайна явно лишена
смысла.
3 BanncrFI - Microsoft Internet Explorer

H Eiis Edit View Favorites Tools Help
-Я
•'/;
Рис. 5.8. Так может выглядеть баннер на HTML-страничке

На этом занятии мы познакомились с основами рекламного бизнеса во Всемир-
ной сети. Теперь мы знаем:
• как происходит поиск в Интернете;
• как помочь другим найти ваш сайт;
• почему в Сети так много баннеров и как ими меняться;
• как намалевать свой рекламный плакат;
• как с помощью JavaScript создать бегущую строку и изменяющуюся картинку;
• как заставить текст передвигаться во Flash.
Ну что, на сегодня хватит? Good-bye!
Занятие 6
К сожаленью, день рожденья...

«Осень уже пришла!» —
Шепнул мне на ухо ветер,
Подкравшись к подушке моей.
Мацуо
На этом занятии
С утра вы посмотрели на календарь и вам не дает покоя мысль: «Чем же так
примечателен сегодняшний день?». Вроде бы не выходной, раз приходится идти
на работу. Дети родились летом, жена тоже... Родители, теща, тесть (листаем за-
писную книжку) — тоже нет. А-а-а-а! Вспомнил! День рождения лучшего това-
рища студенческих лет. Может, вернуться домой за адресом (он перебрался не-
давно в какую-то Тьмутаракань)? Придется опоздать на работу, да и почты по
дороге все равно нет... Да, обидно, что вспомнил так поздно... Но, видно, не
судьба. Да и он тоже в последний раз меня не поздравил...
Вот так и рвутся ниточки, соединяющие некогда близких людей... Но не все по-
теряно! Странно в наш век доверять человеческие отношения неповоротливым
работникам почтовых отделений, когда есть электронная почта. Она за несколь-
ко минут доставит ваше поздравление получателю. И не только скупые строки
текста (хотя и здесь скрыты неограниченные возможности, в чем вы скоро смо-
жете убедиться), но и нарисованные цветы, музыку и даже фильм, причем не
только позаимствованный в Интернете, но и сделанный лично вами именно для
вашего адресата.
Итак, на этом занятии нам предстоит узнать много нового.
• Мы попробуем украсить обычное электронное сообщение, воспользовавшись
встроенными средствами почтовой программы.
• Во Flash мы научимся:
Q задавать слой маски;
Q создавать согласованную анимацию;
1
В переводе В. Маркоиой.
О задавать морфинг и раскадровку различных объектов;

Q работать с символами — клипами, кнопками и рисунками;
Q импортировать растровые рисунки;
О познакомимся с простыми действиями ActionScript.
Ну что, приступим?
Электронные открытки
Сервис электронных открыток — один из самых распространенных в Сети. До-
статочно набрать в поисковой системе фразу «электронные открытки», и вы по-
лучите порядка 150 ссылок на русскоязычные серверы, которые готовы совер-
шенно бесплатно поздравить кого-нибудь. Некоторые посылают саму открытку,
некоторые — только ссылку на нее, но в любом случае это подписанная открыт-
ка от вас лично вашему получателю.
Однако вполне возможно, что вам придется посетить не один десяток серверов
и просмотреть не одну сотню страниц, прежде чем вы найдете подходящий эк-
земпляр. И с большой вероятностью может оказаться, что вы будете не единст-
венны в своем выборе: многим может прийти в голову точно такая же идея.
Существует весьма действенная альтернатива — использование средств почто-
вой программы или создание анимированной открытки на Flash. Здесь вы смо-
жете проявить вашу индивидуальность в полной мере — вероятность того, что
ваш получатель получит такую же открытку, будет равна нулю. А начнем мы с
самого простого — использования шаблонов в Outlook Express.
Outlook Express
Outlook Express является почтовой программой, входящей в состав Internet
Explorer, и позволяет довольно просто сделать праздничный бланк, который по-
том можно использовать для поздравлений. Представьте, что вы пришли в мага-
зин и там для вас лично изготовят бумагу для писем. Вы готовы ответить на все
вопросы дизайнера? Тогда творите!
Создание бланка
Если вы мысленно представляете себе, как должна выглядеть ваша будущая от-
крытка, и у вас есть все ее составляющие, тогда можно начинать.
1. Щелкните на стрелке рядом с кнопкой Создать сообщение (New Mail) на пане-
ли инструментов и выберите пункт Выбор бланка (Select Stationery). Другой
вариант: воспользуйтесь одноименной командой меню Сообщение (Message)
из подменю Создать сообщение с помощью (New Massage Using) и в окне Выбор
бланка (Select Stationery) щелкните на кнопке Создать (Create New).
2. В окне Мастер создания бланков сообщений (Stationery Setup Wizard) щелкните на
кнопке Далее (Next).
3. В следующем окне определите расположение элементов бланка. Можно ука-
зать следующие параметры.
134 Занятие б. К сожаленью, день рожденья...
Q Рисунок (Picture). Выберите фоновый рисунок из списка или найдите файл

с помощью кнопки Обзор (Browse).
Q Расположение (Position). Укажите положение фонового рисунка по верти-
кали и горизонтали.
Q Мозаика (Tile). Можно «замостить» бланк копиями рисунка, размножив его
по вертикали, по горизонтали или по всей странице, или отказаться от
всего этого.
LJ Цвет (Color). Выберите цвет страницы, который будет виден на свободной
от рисунка части письма.
Для перехода к следующему шагу мастера нажмите кнопку Далее (Next).
4. В следующем окне задайте параметры текста на бланке. Здесь вы можете вы-
брать: Шрифт (Font), Размер (Size), Цвет (Color), Полужирный (Bold), Курсив (Italic).
5. Очередное окно будет £..-лее бедным: в двух полях можно указать отступы
текста от краев бланка: Левое поле (Left Margin), Правое поле (Right Margin).
6. В последнем окне введите название нового бланка и щелкните на кнопке Го-
тово (Finish).
-щ
& New Message
b.lli Vic.w insert
(St
^"4.
ii
!'Чоздразпяю с Новым
Рис. 6.1. Так может выглядеть поздравление, созданное на бланке Outlook Express
Можно не создавать бланк целиком самому, а отредактировать уже готовый.

Как ни странно, таким образом вы можете достигнуть более впечатляющих ре-
зультатов, особенно если освоите Microsoft FrontPage Express и HTML. Если
в окне Выбор бланка (Select Stationery) (рис. 6.2) нажать на кнопку Редактировать
(Edit), то выбранный бланк откроется как HTML-страница в упомянутой про-
грамме от Microsoft (рис. 6.3).
Select Stationery
Chess.htm New Boby Announcement.htm

И Chicken Soup.htm €J Party lnvitation.htm
в For Sale.htm Й Postcard! .html
ormal Announcementhtm Running Birthday.htm
i>) Fun Bus.htm .
Й Holiday Letter.htm eTechnical.htm
i Lounge.htm
:"ML Files Chtrrfhtml)
Рис. 6.2. Выбор готового бланка
К FiontPage Expiesx - [C:\ProQfam FilesVCommon f i)es\Micios

1-
Рис. 6.3. Редактирование готового бланка в FrontPage Express
Теперь вы сможете увидеть результат своего труда в списке доступных бланков.

Нам осталось только написать на нем письмо.
136 Занятие 6. К сожаленью, день рожденья...
Выбор и смена бланка

Выбрать бланк для нового письма вы можете двумя способами.
• С помощью панели инструментов. Для этого щелкните на стрелке рядом с
кнопкой Создать сообщение (New Mail) и выберите из списка нужный бланк.
Также можно указать пункт Выбор бланка (Select Stationery) и определить путь
к файлу HTML, который будет служить бланком. Данный способ позволяет
использовать все богатство возможностей языка разметки гипертекста: от-
крыткой может стать любая подходящая web-страница.
• С помощью меню. Выберите пункт Создать с использованием (New Message Using)
в меню Сообщение (Message). Далее действуйте так же, как описано выше.
Если вы открыли бланк и поняли, что изображение на экране не совсем подхо-
дит в качестве поздравления с 8 Марта или Днем независимости, вы можете
сменить его. В окне сообщения в меню Формат (Format) выберите пункт Исполь-
зовать бланк (Apply Stationery), а затем в списке выберите другое название бланка.
Почта Netscape
Netscape Communicator 4 предоставляет меньшие возможности по автоматизации
выбора внешнего вида письма. Формально для письма можно задать шаблон, но
он будет одинаковым для всех писем. Если вы случайно пошлете начальнику
розочку в деловом послании, вряд ли он будет от этого в восторге. Поэтому про-
ще всего сделать заготовку поздравительной открытки, сохранив ее как черно-
вик, а потом для каждого получателя вносить необходимые изменения. Другой
вариант — переслать однажды посланную открытку другому лицу (не забыв
предварительно изменить текст).
Все возможности по изменению внешнего вида электронного послания собраны
в меню Формат (Format) и Вставка (Insert) в окне письма. С помощью меню Встав-
ка (Insert) вы можете добавить в письмо ссылку, рисунок, таблицу, горизонталь-
ную линию и тег HTML. С помощью меню Формат (Format) можно управлять
шрифтами, расположением и выравниванием текста. В этом же меню находится
команда Цвета и свойства страницы.
В окне Параметры страницы (рис. 6.4) вы можете задать цвет текста, ссылок и
фона или стандартную цветовую схему, а также фоновый рисунок, который ав-
томатически замостит всю страницу письма. Чтобы рисунок проявился, не за-
будьте поставить рядом с ним флажок. Кнопка Выбор файла (Browse) служит для
поиска файла на диске. Для предварительного просмотра результатов щелкните на
кнопке Применить (Apply). Чтобы принять все изменения, щелкните на кнопке ОК.
СОВЕТ
Единственное неочевидное значение в окне Параметры станицы имеет флажок Связь с
файлом рисунка. Дело в том, что web-мастер от Netscape обычно создает копию изображе-
ния и помещает его в ту же папку, где находится страница. Этот флажок надо устанавли-
вать, если лишняя копия вам не нужна.
По сути, с помощью средств встроенного web-мастера вы сможете превратить

письмо в полноценную web-страницу. Однако она останется всего лишь страни-
цей текста, пусть и приукрашенного изображениями. А ведь иногда хочется че-

го-то большего... Веселых мультиков, например.
I / : - шетастрг
;
Т ;Г;Испол
'•'":""""~™";":"
Обычный текст
Текст ссылки
Активная ссылка
Просмотренная ссылка
фон (фоновый рисуник закроет этот цвет.)
в етб в аи с*;ейв'! i; Ц Черны йна светлом
- Фоновый рисунок"
jiile:///C|/Flash/Ch5/npo6Ka.JPG
:
...... " :'::: : ..... "::-: '
: Г Связь с фай лом рисунка
: Г ;Использовать этиустеновки при создании новых с"

: :
ОК Отмена
Рис. 6.4. Окно настройки параметров страницы
Открытка и согласованная анимация

На предыдущем занятии с помощью Flash мы создали поезд, вывозящий рек-
ламный плакат. Но ведь он может везти и поздравления! Причем если при соз-
дании баннера мы были сильно ограничены размерами страницы и файла, то те-
перь мы почти свободны в своих требованиях. Мы нарисуем паровоз и добавим
к нему дым, из которого в итоге и образуется поздравление.
Рисуем паровоз
1. Запустим Flash и создадим новый фильм. Зададим размер стола 550x400 и
сохраним файл под именем Postcardl. Пока единственный слой назовем Поезд.
2. Вставим новый символ-клип (Ctrl+F8) и назовем его Паровоз. Но теперь, в отли-
чие от предыдущего раза, мы будем его рисовать без помощи псевдографики.
3. Я в качестве прототипа рисунка позаимствовал детский паровозик у сына.

Основная часть рисунка — два прямоугольника с одноцветными заливкой и
контуром. На рисунке вы увидите черный цвет, но лучше выбрать что-нибудь
более праздничное.
4. Инструментом Line (Линия) рисуем прямые линии спереди, а с помощью Paint
Bucket (Банка краски) заливаем пространство между ними подходящим цве-
том (например, красным).
5. Синим прямоугольником с коричневым контуром обозначим окно, а серый
полукруг с прямоугольником будет служить для крепления вагона. Осталась
только труба.
СОВЕТ
Если вы при использовании различных инструментов рисования нажмете клавишу Shift, то
фигуры, которые вы будете создавать, приобретут правильные очертания. Прямоугольник
станет квадратом, овал — кругом, а линия будет идти только под углами, кратными 45°.
Карандаш и кисть будут рисовать только горизонтальные или вертикальные линии. Даже
перо изменит своим привычкам и не будет выдавать на экран закорючки произвольной
формы.
6. Для рисования трубы есть две альтернативы.

Один способ состоит в том, что вы рисуете два прямоугольника с черным
контуром и красной заливкой (пусть труба будет красной), и размещаете их
буквой Т. Затем с помощью инструмента Arrow (Выделение) перетаскиваете
вогнутые уголки вниз, а потом дорисовываете горизонтальную линию. При-
ставим трубу к паровозу — и готово!
Второй способ состоит в использовании инструмента Реп (Перо) или Line
(Линия). Как и в предыдущем случае, необходимы два прямоугольника, но
расположить их надо так, чтоб они не касались друг друга. Затем надо нари-
совать скос и залить обведенный кусочек. Перо позволит сделать закруглен-
ную линию, однако к работе с этим инструментом надо приноровиться. Если
вы много рисуете инструментом Кривая Безье в программах векторной гра-
фики, то это не составит труда, но если нет, придется учиться.
7. Теперь приделаем колеса, иначе как паровоз поедет? Размещаться они будут
в отдельном клипе под названием Колеса, так как на самом деле колес будет
два. Зачем два? Потому что мы должны как-то показать, что колеса крутятся,
а как это сделать, если круг со всех сторон одинаковый. Выхода, как мини-
мум, четыре. Первый заключается в использовании несимметричной гради-
ентной заливки, второй — в добавлении небольшого дефекта (этакая милая
сердцу трещинка на всех колесах состава). Третий вариант — создать несим-
метричный рисунок, например колеса со спицами — раньше и такие поезда
были. Наконец, четвертый способ, который мы и возьмем на вооружение, -
пририсовать к колесам постороннюю двигающуюся часть. У нас это будет ши-
рокая полоса, соединяющая два колеса и заставляющая их, крутиться вместе.
Для удобства можно сначала создать колесо в виде графического символа Коле-
со (выберите последний вариант в переключателе поведения символа), а затем
перенести два его экземпляра на стол в клип. На открывшемся столе рисуем
колесо в виде двух вложенных кругов. Для разнообразия можно задать цвета
заливки и контура разными, а толщину контура увеличить (параметрами
контура заведует панель Stroke (Контур)).
8. Вернемся к клипу Колеса. Расположим два колеса нужным образом, согласно
размерам паровоза. Создадим новый слой и на нем нарисуем толстую линию
(например, кистью или прямоугольником со сглаженными углами) так, что-
бы она соединяла правые края колес. Толщина линии должна быть примерно
равна разнице между радиусами вложенных окружностей, из которых состо-
ит колесо.
9. Зададим раскадровку движения и вставим ключевой кадр 17. Затем вставим
ключевой кадр 5 и переместим линию на нижний край. Далее добавим сле-
дующие положения линии: в ключевом кадре 9 — на левый край, в кадре 14 -
на верхний, и в кадре 17 она снова примет исходное положение.
10. Если теперь запустить клип, будет заметно, что края линии описывают не
круг, а скорее вложенный квадрат. Исправим это, вставив ключевые кадры 3,
7, 11 и 15 и задав в них нужные положения. Теперь линия движется относи-
тельно гладко, описывая своими концами окружности. Последний дефект,
который осталось исправить, это то, что соединяющая колеса линия замирает
в первоначальном положении, поскольку кадр с крайним правым положени-
ем повторен дважды. Проще всего это исправить, вставив ключевой кадр 16,
чуть-чуть подкорректировав положение соединяющей линии, и удалить кадр 17
в обоих слоях. Колеса готовы, можно ехать!
11. Чтобы паровозу не было скучно, создадим ему в компанию один или парочку
вагонов (рис. 6.5). Основная часть вагона — опять же два прямоугольника,
два окна, прицепные устройства спереди и сзади и уже готовый клип для ко-
лес. Можно даже кого-нибудь «посадить» в вагоны, вырезав лица из элек-
тронной фотографии или рисунка и разместив их в окнах вагона.
Рис. 6.5. Такой вот поезд!
Пейзаж, облака и дым из трубы

Чтобы не повторяться, пусть поздравительная надпись будет появляться по
мере продвижения поезда, например, при совмещении дыма из трубы и облаков
на небе.
1. Сначала создадим пейзаж. Заведем для него отдельный слой, назовем его Пей-
заж и перетащим его в самый низ списка слоев, сделав его тем самым подлож-
кой для остального фильма. Вместо неба нарисуем голубой прямоугольник,
занимающий верхнюю часть стола. Дальше надо дорисовать холмы в виде
овалов с черным контуром (без заливки или с зеленой заливкой), нижнюю
часть которых обрезать, а остальное просто залить зеленой краской. Можно
нарисовать линию горизонта с помощью любого рисующего инструмента, а
затем вылить зелени из банки с краской. После того как слой закончен, забло-
кируем его.
СОВЕТ
Чтобы случайно не испортить готовый слой, лучше всего сразу же заблокировать его. Де-
лается это просто: вы должны щелкнуть в строке слоя в столбце под замочком. Тут же
появится такой же значок в блокируемом слое. Повторный щелчок убирает блокировку,
снимая запрет на редактирование слоя. Чтобы заблокировать все слои, надо щелкнуть на
изображении замочка в строке над списком слоев.
2. Создадим еще один, средний слой и назовем его Облака. Облака нарисуем в
виде пересекающихся белых кругов и овалов с черным контуром. Ненужные
остатки контуров удалим кистью с белой краской.
3. Вставим новый клип и назовем его Дым. Нарисуем в нем серое облачко из
двух овалов. Серый цвет следует выбрать достаточно светлый, например за-
дав значения R=CC, G=CC, B=CC.
4. Зададим раскадровку движения для кадров 1-10. Пусть в первом кадре обла-
ко дыма будет в длину равно ширине трубы, а в последнем растянется на
треть или четверть паровоза, поднявшись примерно до облака на слое Пейзаж.
Проще всего это сделать, подобрав параметры на панели Transform (Преобра-
зование). Дополнительно зададим эффект растворения облака. Для этого не-
обходимо в первом кадре клипа Дым задать эффект Brightness (Яркость),
например, -50 %, а в последнем Alpha (Прозрачность) — 30 %. В результате
раскадровки облако дыма будет увеличиваться в размере, светлеть и стано-
виться менее плотным по мере подъема вверх.
5. Теперь перейдем на слой Паровоз через окно библиотеки или через кнопку
Edit Symbols (Редактирование символов) на правом краю под строкой меню.
Зададим новый слой, разместим его внизу списка слоев, вставим ключевой
кадр, а в него — клип дыма. Паровоз задымил!
6. В слое Поезд зададим раскадровку и вставим ключевой кадр 170 в этот и все
остальные слои. Нажмем Ctrl+Enter и посмотрим, что получилось.
Поздравления
Остался последний штрих — написать поздравление. В этом разделе мы позна-
комимся еще с одним интересным анимационным эффектом во Flash — слоями
маски. Но вначале необходимо заняться рутинной работой и найти шрифт, соот-
ветствующий торжественному моменту. На рис. 6.6 использован шрифт InformTT.
1. После того как шрифт найден, необходимо создать слой под поздравление и
разместить его на самом верху. Заблокируем все остальные слои.
2. Создадим еще один слой и поместим его над слоем поздравления (то есть на
самый верх). Теперь щелкнем на нем в списке слоев правой кнопкой мыши и
в контекстном меню выберем Mask (Маска).
3. На облаках разместим буквы поздравительной надписи. Напоминаю, что мы
хотим создать такой эффект, чтобы очередная буква появлялась в тот момент
и в том месте, где будет растворяться облачко дыма. Как же определить это
место? Очень просто. Клип дыма занимает 10 кадров, то есть каждый деся-
тый кадр очередное облачко будет исчезать. Если перевести считывающую
головку на соответствующий кадр, то будет видно место, где находится труба
паровоза и, соответственно, дым — ведь он едет вместе с ним!
«Но ведь дым не едет вместе с паровозом! Дым просто поднимается вверх,
а паровоз уезжает вперед!» — скажете вы и будете абсолютно правы. Реше-
ние этой несложной задачи я оставляю вам. Подскажу: вам придется размес-
тить нужное количество клипов дыма по пути движения паровоза, не забы-
вая удалять их после того, как каждый клип 10 кадров просуществует на
главной киноленте. Так как в данном примере мы преследуем цель научить-
ся согласовать анимацию, будем считать, что дым подгоняет попутный ветер,
дующий со скоростью, равной скорости локомотива.
Ш Flash 5 - [Postcard! .«а:П
Рис. 6.6. «Паровозик, паровоз, далеко ль ты нас повез...»
Вернемся к размещению букв. Равномерно расположить буквы не получит-

ся, так как между словами должны быть пробелы. Можно предложить сле-
дующий выход. Напишем «С ДНЕМ РОЖДЕНИЯ», стараясь равномерно
распределить буквы. Разблокировав слой Поезд, вставим в него ключевой

кадр 10. Поместим в нем трубу паровоза под буквой «С». Вставим ключевой
кадр 20 и поместим поезд под буквой «Д». Если следующие буквы разместить
равномерно, можно следующим задать уже кадр 50 — поезд под буквой «М».
Аналогичным образом поступим и с оставшейся надписью. Последняя буква
должна появиться в кадре 130.
5. Вставим в слое маски ключевые кадры через каждые 10 кадров. В слое маски
нарисуем прямоугольник, который закрывал бы нужные буквы. Основная идея
маскирующего слоя (слоя-маски) состоит в том, что на замаскированном слое
видны только те объекты, которые расположены под рисунком на слое-маске.
Итак, в кадре 1 еще нет ни одной буквы, поэтому прямоугольник можно не
рисовать. В кадре 10 видна только буква «С», значит прямоугольник должен
находиться над этой буквой. В кадре 20 прямоугольник закроет буквы « С Д»,
в кадре 30 — «С ДН» и т. д. В результате в кадре 130 прямоугольник должен
закрыть все буквы, так как все буквы должны быть видны на экране.
Наш фильм почти готов. При желании можно на отдельные слои нанести до-
полнительные элементы пейзажа — домики, деревья и прочее. Можно даже до-
бавить звуковое сопровождение, но об этом мы расскажем позже, на этом и сле-
дующем занятиях.
СОВЕТ
Для удобства работы с перекрывающимися слоями (как, например, маскируемый слой и
слой-маска) полезно использовать возможность отключения показа данного слоя на экра-
не при работе. Щелкните в нужном слое в столбце под значком глаза — данный слой не
будет отображаться и вы сможете работать с объектами, которые он закрывает. Щелчок
на красном крестике, обозначающем, что слой скрыт, вернет отображение слоя. Если вам
необходимо скрыть почти все слои, кроме одного, щелкните на значке глаза, а затем сни-
мите запрет на отображение нужного слоя.
По умолчанию Flash запускает фильм в режиме бесконечного повторения. Что-

бы избежать этого, добавим команду stop. Для этого вставим ключевой кадр 160
в любой из слоев, дважды щелкнем на нем и на появившейся панели Actions
(Действия) откроем папку с простыми действиями (Basic Actions), а в ней дваж-
ды щелкнем на команде stop (рис. 6.7).
В результате в правом окне панели появится строка: stop О;, а в ключевом кадре
на киноленте — буква «а», обозначающая, что данный кадр содержит команды
ActionScript. Нажмем еще раз Ctrl+Enter. Теперь поезд проезжает только один раз.
СОВЕТ
Обратите внимание, что конечный SWF-файл без звука занимает всего около 11 Кбайт.
Объем такой маленький из-за того, что во Flash используется векторная графика. На дан-
ный момент Flash является практически единственным средством размещения векторной
графики в Web. Так что если у вас есть необходимость демонстрировать в Сети векторные
рисунки, разумно прибегнуть к помощи Flash, даже если анимация вам не интересна.
Чтобы послать открытку, прикрепите файл Postcardl.swf к электронному письму

как вложение и нажмите Send (Отправить) или, если вы используете Outlook
Express, встройте опубликованный HTML-файл с фильмом как бланк при соз-
дании письма (рис. 6.8). Через несколько секунд (или часов, кому как повезет)
анимация
откроет письмо и...

существовании? ВСПОМШ1ЛИ
BasiqActiors
Go То
Ray
Stop
Toggle High Quality
Рис. 6.7. Так выглядит самый простой сценарий

из одной команды
Рис. 6.8. Вот так будет выглядеть открытка в отдельном окне Flash
Открытка-сюрприз
Может быть, анимация вас не занимает? Ну что ж, давайте сделаем открытку
с сюрпризом. В качестве прототипа можно взять любую реальную открытку -
благо, их теперь много, на любой вкус найдется. Если вы хотите непременно
создавать продукты высокого художественного уровня, тогда отсканируйте по-
нравившийся вам прототип, но мы пока поучимся рисовать...
Работа с растровым изображением

Если вы совсем не мастер рисовать или просто у вас нет времени, можно вос-
пользоваться любым отсканированным изображением, предварительно импор-
тировав его во Flash. Для этого служит команда File > Import (Файл > Импорт)
или просто Ctrl+R. В открывшемся окне вам надо найти нужный файл. При не-
обходимости можно указать формат файла (тип файла) в нижнем поле. После
нажатия кнопки Open (Открыть) графическое содержимое оказывается на столе
и с ним уже можно работать. Однако обычно бывает разумно преобразовать его
векторную форму. Для этого, если не считать специальных программ (RasterVect,
Vectory, CorelTRACE), служит команда Flash Modify > Trace Bitmap (Изменить >
Преобразовать растр). С помощью следующих параметров, определяемых в от-
крывшемся диалоговом окне (рис. 6.9), вы можете указать, какое векторное изо-
бражение должно быть создано на основе растрового рисунка.
• Color Threshold (Цветовой порог), принимает значения от 1 до 500. Чем мень-
ше значение параметра, тем больше разных цветов останется на рисунке. Если
вы обрабатываете контрастный рисунок, можно оставлять достаточно боль-
шое значение, чтобы сгладить ошибки сканирования.
• Minimum Area (Минимальная область), принимает значения от 1 до 1000. Опре-
деляет количество соседних пикселов, которые учитываются при назначении
цвета данному пикселу.
• Curve Fit (Подгонка кривых), принимает значения из набора: Pixels (Пикселы),
Very Tight (Очень узкая), Tight (Узкая), Normal (Обычная), Smooth (Сглажен-
ная) и Very Smooth (Очень сглаженная). При сглаживании требуется задавать
меньшее количество векторных точек, что отразиться на размере окончатель-
ного файла. Значение Pixels (Пикселы) соответствует наиболее полному со-
хранению начального изображения.
Trace Bitmap Ixjl

Foo Ok 1 1
'• , ' .
Г
".' | Cahnei 1
• (Normal 31
I
:
< Threshold: | Normal : Help
:• Ц | . ' . '
Рис. 6.9. Окно преобразования растрового рисунка в векторный с параметрами по умолчанию

• Corner Threshold (Порог угла), принимает значения из набора: Many Corners

(Много углов), Normal (Обычный) и Few Corners (Мало углов). Чем меньше
углов, тем больше пострадает изображение. Правда, это не всегда плохо.
После того как вы указали параметры преобразования, нажмите ОК. Рисунок
будет преобразован в векторный вид и с ним можно будет работать, как с лю-
бым другим рисунком, нарисованным во Flash.
Рисуем яблоко
Наш фильм-открытка будет почти классическим: с интригующим началом, дра-
матической серединой и с почти счастливым концом. Идея сюрприза проста:
получатель видит картинку с изображением вкусного яблока, нажимает кнопоч-
ку с призывным названием «Жми сюда», и из яблока выползает сытый и до-
вольный червяк, который машет ручкой и говорит: « Привет!». Но об этом даль-
ше, а пока нарисуем яблоко.
1. Создадим новый файл и зададим размер стола 550x400. Сохраним файл под
именем Postcard2.
2. Зададим три слоя: Яблоко, Лист и Черешок. Дальше мы попытаемся прибли-
зиться к пониманию векторной графики и работы с кривыми Безье.
Помните, есть такая детская игра, в которой надо соединить точки и получить рисунок?
То есть, говоря языком компьютерной графики, надо восстановить все точки (пикселы)
контура рисунка, имея только информацию о некоторых, ключевых точках. Однако если
попытаться задать круг в виде такого рисунка, мы или получим сильное искажение, или нам
придется указывать все точки круга как ключевые. Создатели векторной графики нашли
выход: любая кривая представляется в виде набора кривых Безье — линий с заданной кри-
визной, каждая из которых соединяет по две ключевые точки. Во Flash ключевые точки
(anchor points) бывают двух видов: точки изгиба (curve points) и угловые точки (corner points).
Выделенные точки изгиба выглядят как маленькие пустые кружки, угловые точки — как
пустые квадратики. Кроме маркеров точек Flash отображает маркеры касательных — за-
крашенные квадратики, лежащие на касательной к кривой.
3. Перейдем на слой Яблоко и нарисуем круг или овал, похожий на яблоко, кон-
туром без заливки. Для этого надо нажать кнопку-переключатель No Color (Без
заливки) в разделе Color (Цвета) на панели инструментов. Получившаяся
кривая — идеальный объект для экспериментов с кривыми во Flash.
СОВЕТ
Нажатие клавиши Alt во время перетаскивания инструментом Subselect (Подвыделение)
преобразует угловую точку в точку изгиба и наоборот. Для преобразования любой точки
кривой в точку изгиба щелкните на ней пером. Чтобы удалить ключевую точку, надо выде-
лить ее и нажать клавишу Delete или дважды щелкнуть пером.
L . ,
Если теперь щелкнуть на ней инструментом Subselect (Подвыделение), то она

приобретет другой цвет и на ней появится 8 небольших квадратных марке-
ров. Если щелкнуть на одном из маркеров, он превратится в белый кружок и
рядом с ним появятся четыре управляющие точки, с помощью которых можно
изменять направление касательных к кривой Безье. Расположение касатель-
146 Занятие 6. К сожаленью, день рожденья.
ных, в свою очередь, определяет вид кривой. Любую из касательных и сам

выделенный маркер кривой Безье можно перетаскивать мышью (обратите
внимание, как будет изменяться указатель).
5. Чтобы добавить точку, достаточно щелкнуть пером в нужном месте на кри-
вой. Я думаю, что после нескольких экспериментов, вы справитесь с приведе-
нием окружности к форме, напоминающей контур яблока. После того как вы
сочтете, что это уже похоже на известный фрукт, залейте его красно-желтой
градиентной заливкой с помощью банки с краской и заблокируйте слой (о ра-
боте с цветом во Flash см. занятие 4).
6. Перейдем теперь на слой Лист. Снова нарисуем окружность, выделим ее инст-
рументом Subselect (Подвыделение) и щелкнем пером на одной из точек-мар-
керов. Точка кривой будет преобразована к угловой точке. Потащив ее в
сторону от бывшей окружности, мы получим фигуру, напоминающую лист.
Уже имея некоторый опыт управления видом кривых, вы без труда доведете
контур листа до устраивающего вас совершенства. Останется только залить
лист зеленой краской и заблокировать слой от случайных посягательств.
7. На слое Черешок нарисуем треугольный черешок от яблока и почку, к которой
будет прикреплен лист. В качестве инструментов можно для разнообразия вы-
брать карандаш, указав в качестве режима (Pencil Mode) режим сглаживания
(Smooth). Закрасим черешок и почку в коричневый цвет, заблокируем слой
и оценим готовое яблоко (рис. 6.10).
Рис. 6.10. Ну как, похоже на яблоко?
Кнопка
На третьем занятии вы уже немного познакомились с кнопками во Flash. Те-
перь настал черед более близкого знакомства. Из чисто учебных целей мы соз-
дадим кнопку и определим для нее все функциональные кадры.
1. Нажмем F8 и выберем в качестве поведения символа тип Button (Кнопка).
В кнопке, как уже говорилось ранее, есть только 4 кадра: Up (Приподнята),
Over (Под указателем), Down (Нажата) и Hit (Срабатывание). Вставим новый

ключевой кадр (F6) и в каждом кадре кнопки напишем какой-нибудь призыв-
ный текст, например:
Q в положении Up (Приподнята) — «Открой!»;
О в положении Over (Под указателем) — «Ну открывай же!»;
Q в положении Down (Нажата) — «Получилось!».
Текст предыдущего кадра, естественно, надо удалить.
В кадре Hit (Срабатывание) необходимо указать область срабатывания кноп-
ки, например правую половину открытки. Для этого надо нарисовать прямо-
угольник, на панели Info (Информация) указать его параметры: W=225,
Н=400, Х=0, Y=-200 (белым должен быть центральный квадратик). Лучше
всего расположить надписи в одном месте и запомнить эти координаты, так
как именно в состоянии Up (Приподнята) вы будете располагать кнопку на
столе сцены. Если вы сдвинете кнопку, то изменит свое положение и область
срабатывания. При размещении учтите, что в клипе координаты считаются от
центра стола, а в сцене — от верхнего левого угла. Стоит отметить, что над-
пись, сопоставленную кадру Down (Нажата), вы почти не заметите — она по-
является только на 1/12 секунды сразу после щелчка мыши. А потом фильм
пойдет своим чередом.
Безусловно, вы можете задать и более очевидную кнопку, поместив на ней надпись.
У меня же она получила свою форму от реального прототипа.
3. Расположим кнопку на столе сцены в слое Кнопка и протестируем фильм.

Если указатель мыши находится на правой стороне открытки, вы видите над-
пись «Ну открывай же!», если на левой — «Открой!». Если вы щелкнете на
правой стороне открытки, то заметите восторженный вопль «Получилось!».
4. Осталось совсем немного — сопоставить кнопке действие. Выделим кнопку и
нажмем на панели быстрого доступа кнопку панели Actions (Действия). Обра-
тите внимание, что она должна быть открыта на вкладке Object Actions (Дейст-
вия с объектом). Щелкнем на плюсе вверху панели и в открывшемся меню
выберем подменю Basic Actions (Основные действия), а в нем — команду Go To
(рис. 6.11). В результате на правой части панели появиться следующий текст:
on (release) {
gotoAndPlay (1);
}
Этот текст означает, что при нажатии кнопки (событие release) фильм перей-
дет на кадр 1 текущей сцены. Но мы отправим наш фильм на второй кадр.
Для этого в режиме эксперта необходимо заменить 1 на 2 прямо в тексте ко-
манды, а в обычном режиме — в поле Frame (Кадр).
5. Теперь при щелчке на кнопке фильм перейдет на второй кадр. А чтобы он не
оказался там раньше времени, надо в ключевом первом кадре любого слоя по-
ставить команду stop. Для этого выделим ключевой кадр в слое кнопки и на
панели Actions (Действия) выберем команду stop из списка простых действий.
Object Action;
Basic Actions
S) Go To
Play
Stop
Toggle High Quality
p| j : current scene>
MlPl Frame Number
Рис. 6.11. Задание перехода на второй кадр при нажатии кнопки
6. Вставим ключевой кадр 2 в слой Кнопка. Кнопку удалим, а вместо нее, на том
же месте, оставим текст «Получилось!».
Рисуем дальше
Второй кадр у нас уже появился, но остальных пока нет... Что же в них будет
происходить? Сначала должна появиться дырка на сочном боку яблока, затем
из нее появится червяк, который помашет рукой и скажет «Привет!».
1. Для начала дырка будет маленькая. Заведем для нее отдельный слой, кото-
рый так и назовем — Дырка, и расположим его на самом верху. В первый кадр
вставим пустой ключевой кадр, нажав F7, а во второй — обычный ключевой
кадр, нажав F6. В остальные слои вставном по обычному кадру на позицию 140,
нажимая F5. Заблокируем их, чтобы случайно не испортить. В тот слой, где
задана команда stop, вставим ключевой кадр 2, чтобы отменить ее действие.
2. Выберем в правой верхней части яблока место для дырки. Нарисуем доста-
точно большой темно-коричневый или черный круг (если вы будете исполь-
зовать контур, лучше сразу покрасить дыру в цвет червяка).
3. Зададим раскадровку движения во втором кадре и вставим ключевой кадр 60.
Во втором кадре на панели Transform (Преобразование) в полях Width (Шири-
на) и Height (Высота) укажем какое-нибудь малое число (1-5 %) при установ-
ленном флажке Constrain (Согласованно).
Из личного опыта рекомендую сначала заполнить оба поля, а потом нажать Enter. Если по-
пытаться заполнять поля по очереди, Flash может вести себя непредсказуемо.
4. Примерно в кадре 20 вставим ключевой кадр и уже при снятом флажке Con-
strain (Согласованно) установим проценты так, чтобы круг принял вытяну-
тую по горизонтали форму. В этом кадре у нас в дырке появиться первая
часть червяка — глаза.
5. Для глаз придется создать отдельный слой Червяк (выше слоя Дырка, естест-
венно), на который мы поместим два новых клипа в ключевой кадр 20. Клип
назовем Глаз.
6. Нарисуем белый круг с красным контуром — глаз. Перед тем как рисовать,
установите на панели Stroke (Контур) толщину контура, равную 3.
7. В круге нарисуем маленький круглый черный зрачок, но поместим его не в
центр глаза, а ближе к краю.
8. Зададим раскадровку, вставим ключевой кадр 10. На панели Frame (Кадр)
укажем вращение по часовой стрелке на один оборот.
9. Вставим глаза в соответствующий слой, одновременно подкорректировав его
размер под ширину дырки. Установим ключевой кадр 61 и удалим клипы, а
затем заблокируем слой.
10. Перейдем в клип Глаз и в первом кадре выделим весь рисунок. Нажмем F8 -
клавиатурный эквивалент команды Convert to Symbol (Преобразовать в сим-
вол). Выберем в качестве его поведения положение Graphic (Графический ри-
сунок) и назовем его Око. Вернемся к основной сцене.
11. Настала пора создавать червяка. Он, естественно, будет клипом под названи-
ем Червяк. Сначала нарисуем голову — коричневый овал на слое Голова. На
ней расположим два глаза (графический символ Око) на том же расстоянии и
того же размера, что и глаза на основной сцене, но на отдельном слое. Оста-
лось карандашом в режиме Smooth (Сглаживание) пририсовать рот и нос.
12. Зададим раскадровку для слоя головы на первые 10 кадров. В первом кадре
сожмем голову так, чтобы она была равна по величине дырке в кадре 60 глав-
ной киноленты. Переключаясь между панелями Transform (Преобразование) и
Info (Информация) вы быстро достигните нужного результата.
13. Однако необходимо еще согласовать расположение глаз. Проще всего для
этого на основной сцене задать раскадровку для их передвижения и передви-
нуть их в кадре 60 на нужное место (так, как они расположены на лице в кли-
пе).
14. Каким образом разместить глаза относительно дырки так же, как они распо-
ложены относительно головы? Очень просто. Мы задали такие параметры,
что в первом кадре клипа голова имеет такую же форму и размер, что и дыр-
ка. Выделим голову и посмотрим на панель Info (Информация). Переключим
систему координат так, чтобы черным был центр. Расположим голову по цен-
тру клипа. Ее координаты теперь — два нуля. Расположим глаза нужным об-
разом и сгруппируем их (Ctrl+G). Пусть их координаты будут Х=0, Y=-16
(будем считать, что они симметричны относительно центральной плоскости
симметрии). В действительности — это координаты группы относительно
центра дырки. Перейдем теперь к главной сцене. Заметим расположение дыр-
ки (пусть оно будет Х=356, Y=219, черный квадратик по-прежнему в центре)-
Далее выделим глаза и установим им координаты в Х=356, Y=203 (мы доба-
вили относительные координаты глаз к абсолютным координатам круга). Те-

перь они должны быть расположены одинаково в клипе и на главной сцене.
15. Чтобы переход был менее резким, можно в кадре 60 добавить эффект Tint (От-
тенок) к рисунку дырки. Теперь дырка будет не только постепенно увеличи-
ваться в размерах, но перекрашиваться под цвет ее создателя — червяка.
Если вы использовали для дырки другой цвет и контур, то оттенок перекра-
сит и заливку, и контур, поэтому скачок в изображении все равно будет. Та-
кой дефект можно легко исправить, если перенести контур на отдельный слой.
Также можно вставить ключевой кадр 61 и нарисовать в нем черный круг,
чтобы обозначить место появления прожорливого гостя. Если вы правильно
зададите движение рук, получится, что герой фильма как бы опирается на
края своего убежища.
16. Вернемся к клипу червяка. Надо добавить несколько колечек его хитиновому
тельцу. Для этого заведем несколько слоев, например 4, ниже слоя головы.
Слои головы и глаз пока заблокируем и сделаем невидимыми. Нарисуем овал
того же цвета, что и голова. Выделим его и нажмем F8. В появившемся окне
выберем Graphic (Графический рисунок) и назовем его Кольцо. На каждом но-
вом слое разместим по символу кольца, начиная с кадра 10. Пусть в кадре 10
овалы находятся за головой один над другим, чтобы их не было видно.
т Flash 5 - [PostCafdJ.tla - Library:!]

ЁШ
:™Й» i Червяк
Т >!« ' :
.-» I Q It, 3D 4S fAT
"Ч t;
| P
i•ш I
i 3 КЗ
i A
| LI ш
iiЁ
• i
eliiil i'-Jit''*
и
• '•'••• • •..••;-•.•••..••:.:.••• .'.. .-. ..:;:..;.
KillulTil
Щ
б Q,
**
:Slii|pi|li|Sj; Я глаз
%] Кнопка
is око
ШИТ Кольцо"
тш .
:;
e-^;A!a..av».^
Рис. 6.12. Кинолента в клипе червяка
17. Следующие 30 кадров будут устроены следующим образом. Голова вместе с

глазами будет подниматься вверх и вправо, а колечки по одному за 10 кадров
показываться на глаза. Все, естественно, будет происходить через раскадров-

ку движения и каждый 10-й кадр будет ключевым. В итоге к кадру 40 голова
должна достаточно выползти из яблока, а последнее колечко занять место на
дырке (впрочем, каждое новое колечко можно вставлять по мере надобно-
сти — первое и второе в кадре 10, третье — в кадре 20, четвертое — в 30-м кад-
ре). Кинолента должна получиться лесенкой (рис. 6.12). Главное на данном
этапе — не запутаться, так как приходится работать со всеми слоями сразу.
Руки и морфинг
Осталось только сделать руки. На их примере мы познакомимся с другим ви-
дом раскадровки — морфингом.
В отличие от раскадровки движения, морфинг — это раскадровка формы, то есть возло-
женная на Flash процедура прорисовки превращения рисунка одного кадра в рисунок дру-
гого. Обратите внимание, что морфинг выполняется для всего слоя целиком и может при-
меняться только для рисунков. Обработать таким образом символ или не преобразованный
в графику текст не удастся.
1. Для начала заблокируем все слои и вставим два слоя для рук над слоями ко-
лец. Назовем их Левая и Правая. Пусть правая рука — это рука в правой части
экрана: мы, как создатели, можем позволить себе исходить из своего взгляда
на жизнь, а не с точки зрения червяка. Соответственно, именно эта рука и бу-
дет подвергаться морфингу.
2. В кадре 30 вставим в слое Правая ключевой кадр и нарисуем руку, держащую-
ся за край яблока (рис. 6.13, а). Такой рука предстанет в первых кадрах. Боль-
шой палец будет отведен влево, а остальные будут представлены парой
черточек. Затем вставим ключевой кадр 60, а потом — кадры 39 и 40.
3. Выделим кадры 30 и 39 и зададим раскадровку движения. Затем выделим
кадры 40 и 60 и также зададим раскадровку.
4. Перейдем на панель Frame (Кадр) и заменим значение в списке Tweening (Рас-
кадровка) на Shape (Морфинг). Кадры с 40 по 60 должны окраситься в зеле-
ный цвет, а стрелочка — должна сохраниться.
При задании морфинга Flash бывает очень капризным. Если действие не получилось сразу,
попробуйте сделать его повторно, удалив кадры и расположив в них нарисованную фигуру
заново.
а б
Рис. 6.13. Начальная (а) и конечная (б) формы руки
5. Если на зеленом фоне появилась стрелочка, значит, все прошло удачно и

можно продолжать. В кадре 60 с помощью инструментов подвыделения, пера
и карандаша приведем форму руки к новому виду (рис. 6.13, б), а также пере-
местим рисунок на новое место — потом червяк будет махать ручкой. Погоняй-
те считывающую головку взад-вперед, чтобы просмотреть, как Flash справит-
ся с морфингом. Если вам не понравится, что черточки плавают по ладони,
можно предложить заменить морфинг раскадровкой формы и повернуть ла-
донь на 180°. Результат будет тем же, однако судить, какое из преобразований
выглядит более естественно, все равно трудно. Как бы то ни было, теперь вы
познакомились с морфингом и сможете найти ему применение в ваших филь-
мах.
6. А что будет происходить в кадрах 30-39? Рука будет вылезать из дырки. Для
этого нам снова придется прибегнуть к слою-маске. Вставим новый слой над
слоем Правая, в контекстном меню зададим его тип — Mask (Маска). Добавим
ключевой кадр 30, в него вставим скопированное из кадра 1 изображение го-
ловы и разместим его по центру клипа. Вставим ключевой кадр 39 и пустой
ключевой кадр 40. Слой маски готов. Теперь осталось только сместить пра-
вую руку в кадре 30 ниже круга дырки.
7. Картинка в слое Левая будет повторять правую руку за тем исключением, что
это будет ее отражение относительно вертикальной оси. Для создания отра-
жения задайте значение 180 в правом поле Skew (Наклон) на панели Transform
(Преобразование). В кадрах 30-39 в этом слое также будет раскадровка и
слой маски, как и в слое Правая. После этого никаких изменений не будет.
8. Кроме кисти нужна еще и сама рука. Для нее создадим самый нижний слой,
в котором вставим ключевой кадр 60. В нем нарисуем линию, соединяющую
тело и отведенную в сторону кисть. Возьмем кадр 60 и протащим его по кино-
ленте на место кадра 40. Зададим в нем раскадровку, а потом снова вставим
ключевой кадр 60.
9. В кадре 40 изменим положение линии так, чтобы она была не видна за хити-
новыми колечками. Промотав считывающую головку туда-сюда, проверим,
чтобы рука не отрывалась от кисти (она может существенно пересекаться
с ней, так как будет не видна).
10. Вот почти и все. Осталось только «помахать» рукой. Скопируем рисунок руки,
создадим новый клип, назовем его Рука. Вставим изображение, зададим рас-
кадровку и установим ключевые кадры 5, 10, 15, 20. В кадре 5 повернем руку
на 45°, в кадре 10 — на 15°, а в кадре 15 — на -15°. Передвинем руку так, что-
бы она касалась перекрестья центра стола в точке, где она будет соединяться
с линией руки.
11. Перейдем к клипу червяка. Вставим ключевой кадр 61 в слое Правая. Удалим
«правую» кисть в кадре 61 и на ее место перетащим клип Рука. На панели
Frame (Кадр) отменим раскадровку.
12. Вставим простой кадр 80 (F5). Чтобы посмотреть, как движется рука, дважды
щелкните на символе. Остальной рисунок будет затенен, а вы перейдете к ре-
дактированию символа руки. Погоняв считывающую головку туда-сюда, про-
верьте, согласовано ли движение.
13. В любом слое вставим ключевой кадр 80. В него необходимо добавить коман-
ду stop, чтобы червяк не стал вылезать повторно.
14. Продлим все остальные слои, кроме слоев-масок до кадра 80. Продлевать
слой можно несколькими способами: можно вставить ключевые или простые
кадры, можно просто протащить последний кадр по киноленте (только будьте
осторожны, не продлите так какую-нибудь раскадровку, например в слое Ру-
ка). Если вам по душе порядок, уберите все ненужные раскадровки, которые
Flash продлевает автоматически. Клип червяка готов!
15. Вернемся к главной сцене. Чтобы после завершения фильма открытка не воз-
вращалась к своему исходному состоянию, вставьте в последний кадр любого
слоя ключевой кадр, а в него — команду stop.
Проверим, как выглядит фильм. После щелчка на правой половине открытки
должна появляться дырка, а затем червяк. Открытка должна завершаться «бес-
конечным» маханием рукой. Возглас «Получилось!» можно заменить на что-ни-
будь более подходящее, например на надпись «С днем рождения!».
Как уже говорилось, в открытку можно вмонтировать звуковое послание. Это
может быть песня, мелодия или просто любая фраза. Если вы можете оцифро-
вать свой голос, то остальное дело вашей фантазии. Только учтите, что звуковое
сопровождение может существенно увеличить размер открытки. Пока же SWF-
файл занимает всего 12 Кбайт.
Если же по тем или иным причинам вам не под силу превратить свой голос в
совокупность битов на диске, то вы можете поискать необходимое на просторах
всемирной свалки. Так или иначе, вам нужен звуковой файл, например, в фор-
мате WAV или МРЗ (рис. 6.14).
Итак, открытка-сюрприз готова (рис. 6.15). Но на этом возможности порадовать
ближнего своего (если вы предпочитаете общаться с ним через Интернет) не
ограничиваются. Например, можно сделать для него небольшую игру, особенно
если он или она любит «квесты».
Library- Movie 1
if : Options
Мелю
Logoff.wav О
1
я
et
Рис. 6.14. Вот так выглядит звуковой файл в окне библиотеки
File View
С дтм рождения!!!
Рис. 6.15. Вид открытки в конце проигрывания

На следующем занятии мы закрепим пройденный материал, а пока вспомним,
что мы сегодня отложили в «копилку знаний».
• Мы узнали, что обычное электронное сообщение можно украсить, используя
шаблоны почтовой программы или свои собственные рисунки;
• научились работать с маскировкой и создавать согласованную анимацию в
программе Flash;
• повторили, как задать раскадровку и научились делать морфинг;
• вспомнили, как работать с символами — клипами и кнопками;
• узнали, что растровый рисунок может пригодиться не только для непосред-
ственного использования в фильме, но и как первое приближение к вектор-
ному шедевру;
• познакомились с тем, какие действия ActionScript могут пригодиться при ис-
пользовании кнопок.
Как вы помните, на следующем занятии нам предстоит сделать еще одну открыт-
ку. Аи revoir!
Занятие 7
Славный праздник Новый год

Что глупей темноты!
Хотел светлячка поймать я —
Напоролся на шип.
На этом занятии с помощью Flash нам предстоит создать интерактивную открыт-

ку, на которой развитием событий на экране будет управлять ее получатель.
Идея таких игр чрезвычайно проста: вы должны щелкнуть в определенном мес-
те, чтобы произошло какое-то действие. Можно даже предусмотреть несколько
параллельных «историй», однако мы ограничимся достаточно простым вариан-
том. Получателю открытки предстоит вспомнить детство: зажечь огни на елке,
получить подарки и под звон бокалов выпить шампанское. Как вы уже догада-
лись, поздравлять мы будем с Новым годом (или с Рождеством, или со Старым
Новым годом — на выбор).
Это занятие станет во многом повторением пройденного. Однако мы узнаем и
новое:
• научимся задавать служебный слой и управлять с его помощью движением
объекта;
• более подробно обсудим работу со звуком;
• разберём, как создавать линейные и радиальные градиентные, а также рас-
тровые заливки.
Но сначала нам понадобится не компьютер, а ручка с бумагой.
Сценарий
Очень редко случается, что сначала снимают фильм, а потом пишут сценарий.
В художественном кино, наверное, никогда. Важность подготовительной работы
мы обсудим подробнее немного позже (на следующем занятии), а пока просто
обсудим планы относительно первого большого проекта.
1
156 Занятие 7. Славный праздник Новый год
Для простоты разобьем фильм на сцены. Основное удобство разбивки на сцены

состоит в том, что можно протестировать отдельную сцену, а не смотреть по со-
тому разу весь фильм. Фильм тестируется с помощью команды Control ¥ Test Scene
(Управление > Тестировать сцену) или нажатия клавиш Ctrl+Alt+Enter. На про-
исходящее внутри сцены зритель не сможет влиять, а вот переход к следующей
сцене будет зависеть только от него.
В данном случае разбивка фильма на сцены (отдельные файлы) носит исключительно учеб-
ный характер — объединение всех сцен на единой киноленте поможет уменьшить размер
SWF-файла и количество потраченного рабочего времени. Реальным поводом для начала
новой сцены может быть или слишком большой размер текущей сцены (такой, что с ней
становится невозможно работать), или резкая смена содержимого практически всех слоев
фильма (как, например, в этом фильме при переходе к последней сцене).
Сядем поудобнее в кресле, закроем глаза, вспомним счастливые годы, когда мы

верили в существование Деда Мороза, и начнем фантазировать...
1. Сцена первая. На экране елка и ящик с елочными игрушками. Чтобы перей-
ти к следующей сцене, зритель должен открыть ящик и достать первую иг-
рушку. Назовем сцену Начало.
2. Сцена вторая. Пусть она зовется Украшение. Игрушки вылетают из ящика
волшебным образом и повисают на елке. Ящик исчезает: он нам больше не
нужен. Как известно, по призыву «Елочка, гори!» кто-то из взрослых вклю-
чал вилку в розетку... Вилка призывно лежит где-нибудь на самом виду. А ро-
зетку придется найти, например, за нижней веткой.
СОВЕТ
Если вы для перехода к следующей сцене используете действие NextSceneQ, обратите вни-
мание на то, что при выполнении данного действия фильм переходит на первый кадр сле-
дующей сцены и останавливается. Если вам не подходит такой эффект, вставьте команду
playQ в первый кадр.
3. Сцена третья — Электросеть. После того как розетка найдена, вилка сама под-
ползает и включается в розетку. По елочке бегают огоньки. Все просто заме-
чательно. Но Дед Мороз у всех на глазах не приходит -- мы должны
выключить свет. Для этого еще в первой сцене нарисуем выключатель, кото-
рый заработает только сейчас.
4. Сцена четвертая. Темно, на елке по-прежнему бегают огоньки. Они высвечи-
вают под елкой какие-то новые предметы — их принес Дед Мороз. Теперь
надо снова зажечь свет. Сцену назовем Темнота.
5. Сцена пятая. Зажегся свет. Под елкой стоит несколько пакетов. Открывая по
очереди каждый, видим их содержимое — бутылку шампанского и два бокала.
Осталось последнее задание — открыть бутылку, поэтому название будет -
Распаковка.
6. Сцена шестая — Последняя. Вылетает пробка, льется шампанское (камера на-
езжает, в кадре только бокалы). Бокалы наполняются, хрустальный звон, за-
ключительная надпись: «С Новым годом!». Конец.
Ну, что ж. Как сценаристы мы состоялись (рис. 7.1). Осталось дело за режиссе-
ром и оператором...
Украшение
Электросеть
Темнота
Распаковка
Последняя.
Рис. 7.1. Панель со списком сцен
Начало фильма
В первой сцене нам надо нарисовать елку и ящик с елочными игрушками, а так-
же смоделировать открывающуюся крышку ящика.
1. Как всегда, создаем новый файл. Размер оставим стандартным: 550x400. На-
зываем его PostCardB. В первой сцене создаем четыре слоя (снизу вверх): Фон,
Выключатель, Елка, Ящик и Крышка.
2. Заблокируем все слои, кроме самого нижнего — фона. На нем нарисуем два
прямоугольника, закрывающих всю площадь стола, — коричневый пол и го-
лубая стена.
В дальнейшем я не буду акцентировать внимание на блокировке слоев, если это не пред-
ставляет особой важности. Общее правило таково: если вы работаете с одним слоем — за-
блокируйте все остальные.
3. Выключатель будет простой: белый квадрат и вложенный в него прямоуголь-

ник переключателя. Переключатель состоит из двух половинок (нижней и
верхней), одна из которых немного темнее другой. На нижней нарисована
красная точка. В выключенном положении точка пропадет, а половинки ме-
няются оттенками. Сохраним выключатель отдельно в виде символа-кнопки
Выключатель!. В кадре Hit (Срабатывание) от рисунка надо оставить только
нижнюю половину рычажка с красным кружочком.
4. Елку можно было бы нарисовать в виде нескольких зеленых треугольников.
Однако вспомним, что нам придется отгибать нижнюю ветку, и попробуем
собрать ее подобно матушке природе — из символов-веток. Создадим графи-
ческий символ — Ветка — и нарисуем с помощью кисти пушистую еловую
ветвь. Расположим на слое Елка несколько десятков ветвей. На панели
Transform (Преобразование) изменим их размеры, например, от 150 до 20%
с шагом в 20-30 %. Можно на некоторые символы наложить эффект Tint
(Оттенок), выбрав в нем близкие цвета (если вы рисовали несколькими цве-

тами, то обязательно используйте верхнее поле с процентами, чтобы сохра-
нить разноцветность).
СОВЕТ
Выбрать близкий цвет для эффекта Tint (Оттенок) очень просто. Выберите в палитре цвет,
которым вы рисовали ветку ели. В правой части панели Effect (Эффект) появятся поля со
значениями цвета в схеме RGB. Если вы поменяете значение в поле G (Green, зеленый) на
большее, цвет станет более светлым, если в меньшую сторону — темным. Добавление си-
него (поле В, blue) приблизит дерево к породе голубых елей, а красного (поле R, red) —
сделает коричневым. Верхнее поле с процентами можно использовать для поиска компро-
мисса между цветом оттенка и цветом объекта.
5. Расположим ветви так, чтобы в совокупности они напоминали лесную краса-

вицу. Дорисуем верхушку — несколько торчащих вверх маленьких веточек.
Похоже на елку? Если вы экспериментировали с разными цветами, то вам
может понадобиться следующий совет.
В меню Modify (Изменить) находится группа команд, позволяющая изменять
взаимное расположение наложенных друг на друга объектов. Расположены
они в подменю Arrange (Распределение):
Q Bring to Front (Ha передний план) — переносит объект поверх всех. Клави-
ши быстрого доступа — Ctrl+Shift+Up.
Q Bring Forward (Перенести вперед) — поднимает объект над следующим по
глубине. Клавиши быстрого доступа — Ctrl+Up.
Q Send to Back (На задний план) — переносит объект за все остальные. Кла-
виши быстрого доступа — Ctrl+Shift +Down.
Q Bring Backward (Перенести назад) — опускает объект за следующий по глу-
бине. Клавиши быстрого доступа — Ctrl+Down.
6. Что нам необходимо сделать обязательно, так это наложить оттенок на одну
из нижних ветвей, чтобы она отличалась от соседних. В следующей сцене за
этой ветвью зритель будет искать розетку, так что выделение ее среди общей
массы ветвей — намек на ее функциональность. Выделим крайнюю нижнюю
ветвь темным цветом: перейдем на панель Effect (Эффект), в списке выберем
Tint (Оттенок) и в палитре выберем основной цвет ветвей; затем уменьшим
значение в поле G на 20-30 единиц. Нажмем Enter и Ctrl+Shift+Down, чтобы
темная ветвь не загораживала более светлые.
7. Осталось нарисовать ящик. Пусть это будут два прямоугольника: один будет
изображать ящик (и находиться на соответствующем слое), другой — крыш-
ку от него. Крышку надо сделать в виде кнопки, так как нам необходимо от-
следить щелчок по ней. Чтобы было удобнее работать, сначала создадим
графический рисунок-символ для крышки, затем вставим его в другой сим-
вол (на этот раз — символ-кнопку) в кадр Up (Приподнята). В результате мы
сможем по событию release этой кнопки узнать, что зритель на нее нажал.
Расположим крышку-кнопку в первом кадре главной сцены. Ящик тоже луч-
ше сделать в виде графического рисунка-символа. Если нам захочется изме-
нить его размер, не придется вносить изменения в несколько сцен.
СОВЕТ
Если вам необходимо согласованно разместить объекты, расположенные на разных кадрах
одной киноленты, воспользуйтесь режимом кальки. Включается этот режим кнопкой Onion
skin (Калька), расположенной под кинолентой (рис. 7.2). Три следующие кнопки управля-
ют параметрами режима: Onion skin Outlines (Калька контуров) — отображает объекты на
кадрах, кроме текущего в виде контуров; Edit Multiply Frames (Редактирование нескольких
кадров) — позволяет изменять все отображаемые кадры; Modify Onion Markers (Изменить
маркеры кальки) — позволяет управлять количеством отображаемых кадров. Маркеры каль-
ки — два кадра, Start Onion Skin (Начать снимать кальку) и End Onion Skin (Закончить сни-
мать кальку), выделенные кружками на киноленте. Если не установлен флажок Anchor Onion
(Закрепить маркеры), маркеры можно взять и перетащить по киноленте. В меню кнопки
Modify Onion Markers (Изменить маркеры кальки) имеются следующие команды: флажок
Always Show Markers (Всегда показывать маркеры кальки), флажок Anchor Onion (Закре-
пить маркеры) и переключатель Onion (Калька кадров) с положениями 2, 5 и АИ (Все).
Калька контуров Редактирование нескольких кадров

Калька - Изменить маркеры кальки
т
Рис. 7.2. Кнопки управления режимом кальки
\. Дальше нам необходимо, чтобы крышка слетела с ящика. В слое Крышка вста-
вим второй ключевой кадр и заменим кнопку на рисунок. Вставим раскадровку
в него и установим ключевые кадры 10, 20 и 30. В кадре 10 повернем крышку
на 90°.
2. Включим режим кальки, либо установим флажок Onion A l l (Калька всех кад-
ров), либо перетащим левый маркер кальки до кадра 2. Оставаясь в кадре 10,
передвинем вертикально стоящую крышку так, чтобы получить поворот от-
носительно правого нижнего угла (рис. 7.3).
3. Перейдем на кадр 20 и повернем крышку на 180°. Flash должна автоматиче-
ски продолжить вращение по часовой стрелке. Передвинем крышку в продол-
жение поворота.
4. В кадре 30 снова зададим поворот на 180° на панели Transform (Преобразова-
ние). Крышка у нас должна упасть на пол — просто сместим ее на высоту
ящика вниз. Падение должно происходить без вращения. Теперь можно по-
пробовать понажимать кнопки и подвигать маркеры режима кальки, чтобы
посмотреть их действие. Продлим все остальные слои до 30, вставив простые
кадры.
5. Создадим новую кнопку. Пусть это будет яркий елочный шар. Для разнооб-
разия попрактикуемся в создании градиентных заливок (подробнее см. заня-
тие 4). Нарисуем круг с красным контуром. Выделим область заливки и
перейдем на панель Swatches (Цветовые модификаторы). Выделим внизу па-
нели черно-красную радиальную заливку. В меню панели, открывающемся
при нажатии кнопки со стрелкой вправо, выберем команду Duplicate Swatch
(Дублировать цветовой модификатор). Перейдем на панель Fill (Заливка).
Щелкнем на черном квадратике под шкалой градиента. В появившейся па-
литре выберем белый цвет. Переместим белый маркер-квадратик влево, а крас-
ный поставим ближе к середине. Наш круг должен приобрести градиентную
окраску — в центре он стал белым, а по краям — красным.
Flash 5 - [PostCard31la]
Рис. 7.3, Так будет выглядеть движение крышки ящика в режиме кальки (слой фона отключен)
6. Теперь выберем инструмент Paint Bucket (Банка краски) и модификатор

Transform Fill (Преобразовать заливку) внизу панели инструментов. Протащи-
те центральный кружок в левую верхнюю часть круга (рис. 7.4). Снимите вы-
деление с заливки. Теперь у красного шарика появился яркий блик. При
желании можно нанести на круг дополнительный рисунок, расположив его
в отдельном слое.
Рис. 7.4. Преобразование радиальной заливки елочного шара
7. Расположим созданную кнопку в слое Выключатель во втором ключевом кад-

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

сцену на кадрах 1 и 30. Во-вторых, нам надо задать переход на второй кадр
в первой сцене при щелчке на кнопке-крышке. В третьих, в первой сцене надо

задать переход на вторую сцену при щелчке на игрушке. Начнем мы с третьего.
1. Чтобы вставить сцену, необходимо выбрать Insert > Scene (Вставить > Сцену)
или нажать Ctrl+/. Однако рисунки на второй сцене будут те же, что и на пер-
вой. Поэтому откроем панель Scene (Сцена), выделим строку Scene 1 и на-
жмем кнопку Duplicate Scene (Сделать дубликат сцены) внизу панели.
2. Переименуем новую сцену в Украшение, а старую — в Начало.
3. Теперь вернемся к первой сцене. Вставим в слой Елка ключевой кадр 30. Вы-
делим в нем кнопку-шарик и перейдем на панель Actions (Действия). Она
должна предстать перед нами в режиме работы с объектами. Вставим коман-
ду Go To.
4. В поле Scene (Сцена) напишем Украшение. Кадр оставим первый. С десертом
покончено.
5. Аналогичный переход вставляем на нажатие кнопки-крышки. Теперь надо
указать второй кадр, оставив сцену текущей (рис. 7.5).
Рис. 7.5. Задание действия Go To для перехода на второй кадр сцены
6. Осталось вставить команды stop в первый и тридцатый кадр первой сцены,

например, в слое Выключатель.
Протестируем фильм. Если во второй сцене ввести отличительный признак, то
вы сможете заметить переход от одной сцены к другой, а так — никакой разни-
цы. Для того чтобы она появилась, перейдем в следующий раздел.
Сцена Украшение
В начале работы над второй сценой потренируемся в удалении лишних кадров.
Ведь нам нужен только первый кадр. На мой взгляд, самый простой способ уда-
ления в данном случае таков.
6 Зак. 96
1. Если слой имеет только один ключевой кадр, тогда надо протащить послед-
ний кадр и совместить его с первым. Останется только один кадр. Если же
ключевых кадров несколько, тогда, нажимая клавишу Shift, необходимо выде-
лить группу удаляемых кадров и в контекстном меню выбрать Remove Frame
(Удалить кадр). В слоях Выключатель и Крышка лучше оставить последний
кадр. В конце такой деструктивной деятельности мы должны получить пять
слоев, содержащих по одному кадру — ключевому.
2. Для реализации созидательного начала создадим заготовку еще для одной сце-
ны — Электросеть. Выделим сцену Украшение, нажмем кнопку Duplicate Scene
(Сделать дубликат сцены) внизу панели Scene (Сцена).
3. Переименуем новую сцену и закроем панель.
4. В сцену Украшение добавим в середину списка как минимум 5 слоев. Назовем
их: Серпантин, Шар, Шарики, Звезда и Свечи. Продлим все слои до 30 кадров,
выделим весь столбец под числом 30 на киноленте и нажмем F5. Теперь нам
предстоит заполнить слои.
Елочные шарики
С развешиванием шаров можно поступить просто: отвести для каждого по слою,
и с помощью раскадровки вытаскивать шарик из ящика и вешать на нужное ме-
сто. Дешево и сердито. С первым шариком так и следует поступить, предвари-
тельно заменив кнопку на обычный графический рисунок. Однако интересней
представляется вариант, если сделать развешивающиеся шарики клипом и вста-
вить несколько таких клипов в слой Шарики. На лицо явная экономия. Так мы
и поступим.
1. Вначале создадим символ — графический рисунок, куда скопируем изображе-
ние из кнопки-шара. В слое Шар один такой шарик из положения, которое он
занимал в первой сцене, переместится на елку. Рисунок назовем ШарикКрас-
ный. В окне библиотеки щелкнем правой кнопкой на его названии. В контек-
стном меню выберем Duplicate (Дубликат). Назовем новый символ ШарикЖел-
тый. Сделаем таким же образом ШарикСиний.
2. Перейдем в символ ШарикЖелтый и выделим изображение. Скопируем гради-
ент, в который у нас покрашен красный шар командой Duplicate Swatch (Дуб-
лировать цветовой модификатор). На панели Fill (Заливка) заменим красный
на ярко желтый. На панели инструментов поменяем еще и цвет контура. По-
лучился яркий желтый шар.
3. Повторим то же для синего шарика.
4. Затем создадим новый клип под названием Шарики. В нем создадим три слоя,
и в каждый поместим по разноцветному шарику. Подберем размер шариков
так, чтобы хорошо смотрелись и уменьшенный, и увеличенный варианты.
Что же будет происходить в клипе? Шарики по очереди будут взлетать вверх
и занимать место на воображаемой елке. При размещении на елке учтите,
что мы хотим поместить несколько одинаковых клипов, а начальное положе-
ние мы можем варьировать только в пределах ящика. Например, если мы по-
местим клип в левый край ящика, то шарики повиснут на левом краю елки,
а из правого края — на правый. Количество кадров следует выбирать разум-

ное, чтобы не затянуть фильм, например 30 на весь клип. В общем, шарики
могут двигаться и одновременно, если это в итоге не создаст мельтешения на
экране. В конец клипа необходимо вставить команду stop (лучше всего в тот
слой, который и так заканчивается ключевым кадром). Учтите, что вам при-
дется подгонять положение шариков, поэтому не используйте лишних клю-
чевых кадров в конце, после того как движение шарика закончилось.
СОВЕТ -
Вместо команды stop можно установить для каждого экземпляра клипа на панели Instance
(Экземпляр) в списке Behavior (Поведение) пункт Graphic (Графический рисунок), а в ниж-
нем списке — Play Once (Проиграть один раз). Тогда клип не будет проигрываться беско-
нечно. Это свойство символов может вам пригодиться при расстановке свечей, но тогда
надо будет указать в нижнем списке — Single Frame (Один кадр), а в поле Frame (Кадр) по-
следний кадр клипа — 30.
5. Шарики заняли на столе свое окончательное положение. Проверьте, чтобы

каждый шарик выпрыгивал из ящика только один раз, а затем замирал на
кадре 30 (рис. 7.6).
Рис. 7.6. Клип Шарики в режиме кальки
6. Итак, клип готов. В слое Шарики должен быть только первый ключевой кадр.
В него поместим три клипа с шариками: в левый нижний, правый верхний
угол и в центр ящика. На два клипа можно наложить эффект Tint (Оттенок).
Например, фиолетовый и зеленый. При этом лучше всего установить процент
наложения эффекта равным 50. Тогда все девять шариков станут разноцвет-
ными.
7. Еще нам надо изменить размер клипов: один сделать равным 120, а другой -
80. Самый большой клип должен располагаться правее всех, а самый малень-
кий — левее, чтобы не получилось перекрывания шариков (рис. 7.7).
СОВЕТ
При размещении клипов шаров было бы кстати отображать ящик, чтобы не вылезти за его
границу, но при этом он заслонит сами клипы (рис. 7.7). Для таких случаев удобен режим
контуров. Щелкните на цветном квадрате справа от названия слоя. Квадрат станет конту-
ром, как и изображение на слое. Цвет квадрата соответствует цвету контура рисунка. Та-
ким образом, вы будете видеть границы ящика, но он не будет загораживать видимость.
Рис. 7.7. Шарики в ящике. На рисунке видны центры клипов и контур ящика
8. Теперь посмотрим, как шарики сидят на елке. Вставим ключевой кадр 30

в любой слой и нажмем Ctrl+Alt+Enter. Flash продемонстрирует нам происхо-
дящее только в текущей сцене. Путем проб и ошибок попытайтесь добиться,
чтобы елка не напоминала армейский парад: стройные ряды у штатских —
редкость.
9. Надеюсь, после не слишком долгих попыток результат будет вас устраивать.
Теперь вставим в слой Шарики еще два ключевых кадра, например 10 и 20,
и удалим по очереди по одному клипу. В первом кадре у нас должен быть
один клип шариков, в кадре 10 — два, а в кадре 20 — все три.
Серпантин
Теперь развесим разноцветный серпантин.
1. Для начала создадим несколько линейных градиентных заливок. В отличие
от радиального, линейный градиент предоставляет существенно больше воз-
можностей цветового оформления. Сдублируйте цветовой модификатор лю-
бого линейного градиента. Перейдите на панель Fill (Заливка), пощелкайте под
цветовой шкалой в разных местах. Должно появиться 8 цветовых маркеров.
Задайте каждому подходящий цвет (рис. 7.8).
| Linear Gradient
• ' " • ' ' • ' • • •....
Рис. 7.8. Задание градиентной заливки для серпантина
2. Еще раз сдублируйте получившийся цветовой модификатор. Измените рас-

положение маркеров, а может быть — и цвета на них. Вы должны получит!
ортогональные радужные полосы. Особенно обратите внимание на конечны*
цвета: они будут бросаться в глаза больше всего.
3. Создайте новый символ и назовите его Серпантин. В качестве поведения дл5
него надо выбрать положение Graphic (Графический рисунок).
4. Расположите новый символ в одноименном слое. Выделите символ и щелк-

ните правой кнопкой. В контекстном меню выберите Edit in Place (Редактиро-
вать на месте). Вы перейдете к редактированию клипа. Фоном будет служить
слегка замутненное изображение сцены. С помощью самой тонкой кисти на-
рисуйте серпантин, лежащий на елке. Варьируя длину и созданные цветовые
модификаторы, добейтесь примерно равного распределения цветов.
5. Вставьте ключевой кадр 40. Выделите все кадры в слое и на панели Frame
(Кадр) задайте морфинг (в списке Tweening должно быть выбрано Shape).
С кадра 1 по кадр 40 протянется стрелочка на бледно-зеленом фоне.
6. Вставьте еще один ключевой кадр, например 15.
7. Мы хотим показать, как серпантин вылетает из коробки. В первом кадре ин-
струментом Eraser (Ластик) аккуратно сотрите весь рисунок и нарисуйте на
ящике широкой кистью небольшую радужную полосу или круг без контура
(установите режим No Color (Без цвета) для заливки внизу панели инструмен-
тов).
СОВЕТ
Старайтесь сначала задавать раскадровку и морфинг, а потом уже вносить изменения
в ключевые кадры. В первую очередь это касается работы с простыми рисунками, не яв-
ляющимися символами. Например, если вы сначала измените размер фигуры, а затем за-
дадите раскадровку, Flash заменит рисунок в одном из ключевых кадров, и вам придется
вносить изменения заново.
8. В кадре 15 оставьте несколько полосок в центре и расположите их на некото-

рой высоте над ящиком.
9. Проверьте, как разворачивается серпантин, нажав Ctrl+Alt+Enter. Если появи-
лись кусочки серпантина, которые разворачиваются не из центральной фигу-
ры, удалите лишние точки на рисунке, оставленные при стирании. Погоняв
считывающую головку вперед-назад, вы сможете понять соответствие между
частями начального и конечного рисунков и при необходимости подкоррек-
тировать форму фигуры в первом кадре (рис. 7.9).
Рис. 7.9. Редактирование клипа серпантина на фоне елки

ВНИМАНИЕ
Несмотря на свою векторную сущность, рисунок серпантина в итоге можег «весить» до-
вольно много из-за большого количества неправильных кривых. При первом исполнении
он «потянул» почти на 100 Кбайт, и это при том, что законченная сцена без этого слоя за-
нимает в 5 раз меньше. Поэтому будьте умеренны и иногда проверяйте объем SWF-файла.
Вдруг из-за пары лишних линий ваша открытка не пролезет в почтовый ящик получателя?
Рисунок можно облегчить, если рисовать его контурными инструментами. Правда, для
окраски контура не доступна градиентная заливка.
СОВЕТ
Обратите внимание, что для создания серпантина мы использовали не клип, а графиче-
ский рисунок, хотя и задали на собственной киноленте символа морфинг. В чем же разни-
ца? Очевидное преимущество рисунка в том, что он встраивается в основную сцену и при
перемещении считывающей головки по основной киноленте вы видите происходящие в
нем изменения. Клип же всегда остается «закрытой» сущностью. У него своя кинолента,
и на главной киноленте во время работы он отображается как первый кадр, если не зада-
но иное на панели Frarr... (Кадр). Правда, у такого поведения есть и обратная сторона.
Если на основной киноленте вы дадите команду stop, клип будет продолжать двигаться,
а рисунок нет. Еще у клипа есть другие, пока еще нами не использованные, полезные
свойства. Они связаны с тем, что поведением клипа можно управлять программно, с помо-
щью сценария на ActionScript. В любом случае поведением символа можно управлять как с
помощью библиотеки, так и с помощью панели Instance (Экземпляр).
Звезда
Настал черед украсить верхушку елки. Пусть это будет звезда — на ее примере
мы будем реализовывать эффект свечения.
1. Вначале создадим новый клип Звезда.
2. Теперь нам надо нарисовать звезду. Проще всего это сделать в каком-нибудь
векторном редакторе, а потом экспортировать во Flash. Но и сам Flash пре-
доставляет достаточно простых средств для создания правильной пятиконеч-
ной звезды. Алгоритм рисования примерно следующий. Заведем два допол-
нительных слоя. На первом нарисуем две вложенных окружности. Для этого
выделите и удалите заливку у круга, скопируйте окружность и вставьте так,
чтобы копия не пересекалась с оригиналом.
3. С помощью панели Align (Выравнивание) расположите обе окружности по
центру стола. На панели Info (Информация) задайте отношение радиусов 1:2.
На другом вспомогательном слое нарисуйте вертикальную линию по центру
(держите нажатой клавишу Shift при использовании Pencil (Карандаш) или Line
(Линия)). Линия должна пересечь обе окружности два раза. Скопируйте ли-
нию и поверните на 36°. Расположите новую линию так, чтобы отрезки пере-
секались в центре клипа. Еще три раза скопируйте и поверните линию.
В итоге окружности должны быть разделены на 10 равных секторов.
4. Далее в основном слое нарисуем контур звезды красным цветом (рис. 7.10),
используя инструмент Line (Линия). Флажок Snap to Object (Привязка к объ-
екту) при этом лучше снять. Можно нарисовать половину звезды, а затем
скопировать и отразить относительно вертикальной оси. Для этого на панели
Transform (Преобразование) необходимо установить переключатель Skew (На-
клон) и в поле с вертикальной стрелкой написать 180°.
Рис. 7.10. Контур звезды с вспомогательными линиями
5. Теперь можно создать видимость объемности. Нарисуем 10 красных отрез-

ков, соединяющих углы звезды с центром. Выберем в качестве заливки ради-
альный градиент от красного до бордового. Если вас не устраивает темно-
красный оттенок стандартной палитры Flash на панели Mixer (Палитра), вы
можете создать другой, подходящий, а потом добавить его цветовой модифи-
катор в палитру.
6. Зальем градиентом все десять секторов звезды. Если одновременно заливают-
ся несколько секторов, измените параметры инструмента Paint Bucket (Банка
краски). Теперь выберем внизу палитры инструментов при активном инстру-
менте Paint Bucket (Банка краски) инструмент Transform Fill (Преобразовать за-
ливку). Поочередно щелкнем на каждом из секторов и сдвинем центральный
кружок градиентной заливки в нужный конец сектора так, чтобы лучи звезды
оказались окрашены более светлым оттенком градиента. После этого удалите
вспомогательные линии. Напоминает рубиновый атрибут советских времен?
7. Теперь заставим звезду светиться. На самом деле в этой сцене нам свечение
не понадобится, но мы сделаем заготовку для следующей сцены. Выделим ри-
сунок звезды и нажмем F8. В появившемся окне выберем Graphic (Графи-
ческий рисунок). Назовем новый символ Звезда!. Затем сделаем его дубль и
назовем его Звезда2.
8. Первую звезду оставим как есть, а вторую перекрасим в желтый цвет. Выде-
лим весь рисунок и на панели Stroke (Контур) выберем желтый цвет для кон-
туров, а на панели Fill (Заливка) поменяем цвета маркеров. Светло-красный
сделаем бледно-желтым, а бордовый — ярко-желтым оттенком. В символе
Звезда2 лучи должны получиться бледными, а сердцевина — интенсивного
желтого цвета.
9. Перейдем в клип Звезда. Там должен остаться слой с новоиспеченным кли-

пом. На вышележащем слое расположим рисунок Звезда2. Выровняем оба
символа по центру клипа. В оба слоя вставим по 10 кадров. В слое с желтым
вариантом, зададим раскадровку и вставим ключевые кадры 5 и 10.
10. В ключевых кадрах 1 и 10 зададим эффект Alpha (Прозрачность) равным О,
а в кадре 5 — 25%. Также в кадре 5 изменим размер едва видного десяти-
угольника на 200 %. Нажмем Ctrl+Alt+Enter и посмотрим, как звезда светится.
Лучше предварительно задать масштаб рисунка так, чтобы он был близок к
тому, что предстанет перед зрителем.
Вы можете усложнить эффект «горения» звезды, поступив так же, как в случае со свечка-
ми, который мы рассмотрим в следующем разделе.
11. В слое Звезда главной сцены поместим немигающий вариант — Звезда!. Как
сделать так, чтобы она вылетела из ящика, я надеюсь, вы уже знаете.
Свечи
1. Осталось только сделать гирлянду из свечек. Так же как и в случае со звез-
дой, нам понадобится два варианта свечек — зажженные и не зажженные.
С незажженными все просто — надо создать простенький рисунок-символ,
состоящий из белого прямоугольника и вытянутого овала пламени. Контур
свечи можно сделать черным. Символ назовем Свеча.
2. Рисование пламени представляет собой прекрасную тренировку в работе с век-
торными кривыми. Нарисуйте круг или овал, щелкните на его верхней точке
инструментом Subselect (Подвыделение), превращая ее в угловую. Теперь
осталось немного подвинуть точки и маркеры касательных для получения
удовлетворительного результата.
3. Теперь сделаем свечки-лампочки разного цвета. Для эффекта разноцветно-
сти скопируем рисунок пламени, и поместим его в новый символ-клип Пламя!,
а в символе Свеча оставим только прямоугольник. На сцене Украшение раз-
местим полтора десятка свечек, а на символ Пламя! наложим разные оттенки
(цвета свечек не должны быть слишком яркими, лучше выбирать темные
тона). Получится разноцветная гирлянда.
4. Далее необходимо задать раскадровку процесса извлечения гирлянды из ящи-
ка. Хотя для простоты можно и просто «проявить» свечки из пустоты, задав
им раскадровку по параметру Alpha (Прозрачность) от 0 до 100%. Надеюсь,
с таким вариантом вы сможете справиться самостоятельно.
5. Извлечь гирлянду из постоянного места хранения, как правило, не просто.
Она запутывается, проводки цепляются за лампочки и т. д. При анимации
этого процесса у нас тоже возникнут трудности. Они будут связаны прежде
всего с тем, что Flash умеет выполнять раскадровку для одного объекта или
для группы целиком. Поэтому если мы хотим положить свечки в ящик, нам
придется их уменьшить вместе с расстояниями между ними. И если мы не бо-
имся трудностей, придется потрудиться. Нас ждут великие дела! Что же нам
предстоит? Сначала из ящика будет извлечена одна свеча, и она повиснет

над своей летней тюрьмой в невидимых руках. Затем от нее отделится вторая,
третья и т. д. Для этого нам понадобится еще один слой — назовем его Свеча.
На этом слое свечи будут двигаться, а потом переноситься на слой Свечи.
В итоге мы должны получить такое же расположение свечек, как и в гирлян-
де, но над ящиком. Можно добавить еще один слой и нарисовать на нем
шнур, который будет тянуться от лампочки к лампочке.
СОВЕТ
Вы задали раскадровку для нескольких объектов, а потом вам понадобилось удалить один
из них или просто перенести его на другое место? Как только раскадровка назначена, она
становиться объектом, который появляется в окне библиотеки и носит название TweenN,
где N — номер раскадровки. Таким образом, раскадровку, как и группы, полученные ко-
мандой Group (Группировать), можно редактировать аналогично обычным символам. В том
числе, можно скопировать все объекты внутри раскадровки и поместить их в пустой клю-
чевой кадр. Так вы получите доступ к отдельным элементам группы и сможете, например,
«разобрать» ее по частям.
6. Объяснять каждый шаг появления полутора десятка лампочек — весьма уто-

мительное занятие. Надеюсь, мои абстрактные объяснения, касающиеся дан-
ного процесса, позволят вам все реализовать достаточно просто. В качестве
совета могу предложить следующий порядок действий.
Вы уже имеете конечное расположение свечек на елке, например, в первом
кадре. Добавьте еще несколько обычных кадров; их общее число должно
быть равно 2хЛГ+1, где N — количество свечек на вашей гирлянде. В первом
кадре переместите все свечки в то место, где вы будете их разматывать. Вся
дальнейшая последовательность кадров должна повторять это расположение.
Теперь вставьте ключевые кадры через один. Их должно получиться столько
же, сколько свечек. Потом в кадре 1 оставьте одну свечку в центре, в кад-
ре 3 — 2 свечки, и т. д. Можно ускорить процесс, введя в следующем пункте
два вспомогательных слоя, и тогда вам понадобится в 2 раза меньше ключе-
вых кадров (рис. 7.11).
7. Вставьте новый слой (Свеча) под слоем Свечи. Оставьте только один ключе-
вой кадр в слое. В него вставьте вторую свечу, так чтобы она почти закрыва-
лась первой свечкой (единственной в первом кадре слоя Свечи). Вставьте
третий ключевой кадр. Переместите свечу на новое место (просто совместите
ее с аналогом в слое Свечи). Сдвиньте кадр на второй. Вставьте третий ключе-
вой кадр в слой Свеча. Замените вторую свечу на третью. Далее повторите
действия, описанные в этом абзаце для остальных свечей.
8. Шнур надо рисовать в «обратном» порядке. Сделайте два слоя, содержащие
по одному ключевому кадру. Один, Шнур1, будет вспомогательным, другой
Шнур — основным. В слое Шнур! в кадре 3 (там, где вторая свеча уже заняла
свое окончательное положение) нарисуйте карандашом шнур между первой
и второй свечками (рисунок будет автоматически расположен во всех кадрах
слоя). Вставьте ключевой кадр 3. Выделите кадры 1 и 2. На панели Frame
(Кадр) задайте для них морфинг. В первом кадре сотрите почти весь шнур.
Вставьте ключевой кадр 3 в слой Шнур. Скопируйте рисунок со слоя Шнур! и
расположите его в том же месте на слое Шнур. Заблокируйте слой. Переместите
третий ключевой кадр на место второго в слое Шнур1. Удалите рисунок из

третьего кадра (третий кадр и все последующие должны стать пустыми). В пя-
том кадре нарисуйте шнур, соединяющий свечки 2 и 3, вставьте пятый ключе-
вой кадр, и т. д.
Ill PostCardS - Library

Я Щ Ц
•2ШШ ' 'ШШВШК -•
S> Свечи * • pi >• Ott Ol« Иа 01* Dk D» fjj D. 0i-±J
("ZsSEHEO .«..>->..) >..>_ ^..^ r . « ; -x^^ ,.«- - - ,j-^::
5 Свеча! * 3 Я
Щ к r ; ; Ш s-;;: 88 ;l2,0fps | 7,3* .. _<J /J JLJ ,
! * ^
t• I t t a
t 1 * g
t If f .
юо^ 23 . HI . . i . •::;;. as А Ш , * Ж Ш |
Рис. 7.11. Разматывание гирлянды происходит в двух слоях и нам понадобится в 2 раза меньше
ключевых кадров
9. Слои Шнур и Свечи должны заканчиваться раскадровкой перемещения шнура

вместе со свечками на елку. Если вам покажется, что два кадра на раскадров-
ку перемещения свечки мало — растяните каждую раскадровку начиная с
правого края. Только помните, что слои должны растягиваться согласованно!
Слои со шнурами лучше разместить под слоем Елка. Конечный вид кинолен-
ты изображен на рис. 7.12.
10. Шнур можно задать аналогично с помощью морфинга или раскадровки. Если
вам покажется, что процесс затянут, можно удвоить вспомогательные слои и
разматывать в две стороны одновременно.
11. Хотя я описал создание шнура в произвольной программе, он нам необходим
по сценарию. Точнее, вилка, которая на нем крепится, чтобы пояснить зрите-
лю, что лампочки загораются оттого, что кто-то втыкает вилку в розетку. По-
этому не поленитесь и дорисуйте в слой Шнур! вилку (ее лучше сделать
символом) в последних кадрах сцены. Можно просто вытянуть вилку с частью

шнура.
65 |1|шш§1111 ШИШ
1
; :
vi 1Й|"' '''t«iiiiiM»|Mv'iS>i^S;:i
l Sfat J yK i '"Sill
i Ш • •~ ® ?*: ^'*** *
Рис. 7.12. Так должна выглядеть кинолента, если каждую раскадровку растянуть на 5 кадров
и использовать по два вспомогательных слоя
12. Заглянем в сценарий. Что нам осталось? Создать и запрограммировать кноп-

ку-ветку. Но вначале протестируем сцену. Получилось, что игрушки лезут из
ящика одновременно, как дети за рождественскими подарками. Как это ис-
править? Вставим во все слои, кроме вспомогательных, еще один кадр, напри-
мер 100. А потом потренируемся в перетаскивании кадров. Должно быть, вам
понятно, что требуется сделать: необходимо растащить в разные места кино-
ленты действия на разных слоях так, чтобы они выполнялись не одновремен-
но, а последовательно.
Как выглядит наша кинолента? Если в слое не было раскадровки или мор-
финга, то все просто. Есть несколько ключевых кадров, помеченных жирной
черной точкой. Последний кадр, где еще есть изображение, заданное в клю-
чевом кадре, обозначен белым прямоугольником. Оба эти кадра можно взять
мышкой и перетащить. Появляющиеся белые кадры — это пустые ключевые
кадры. Они должны заполнять начало тех слоев, действие в которых вы ре-
шите не начинать в первом кадре. Пустые кадры не должны появляться в се-
редине слоя, иначе в этих кадрах слой не будет содержать никаких объектов.
13. Теперь вернемся к ветке. Если вы помните, мы ее сделали немного темнее
остальных. Сделаем так, чтобы последний кадр в слое Елка был ключевым,
и в нем превратим эту ветку в символ-кнопку. В кадрах Over (Под указате-

лем) (его надо сделать ключевым) и Down (Нажата) немного повернем ветку,
чтобы показался нарисованный под ней пятачок розетки. Для подспорья в ра-
боте используйте режим кальки.
14. В главной сцене необходимо выделить новоиспеченную кнопку и перейти на
панель Actions (Действия), где задать переход на первый кадр сцены Электро-
сеть по событию release.
Сцена Электросеть
Начать работать над новой сценой придется с достаточно рутинных операций.
Если вы еще не забыли, мы уже сделали для этой сцены заготовку. Однако еще
необходимо перенести большинство рисунков предыдущей сцены в их оконча-
тельном варианте. Ящик и крышку от него мы решили удалить, так что эти слои
нам не понадобятся (удалить ящик можно и в прошлой сцене, растворив его в
воздухе или оттащив в сторону).
Также можно избавиться от слоев Шар (поместив одинокий шарик к остальным),
Шнур! (Шнур2), Свеча! (Свеча2). А дополнительно создать слой Вилка, располо-
жив на ней вилку со шнуром, слой шнура для нее и маскировочный слой (все
три выше слоя Елка). А также нам понадобится слой Свет, который будет реали-
зовывать выключение света.
1. Вначале решим проблему с шарами. Большинство из них у нас появилось в
результате проигрывания клипа (если вы не воспользовались советом по из-
менению их поведения). И если мы не хотим, чтобы сцена начиналась с раз-
вешивания шаров, надо что-то сделать. Проще всего поступить следующим
образом: выделите клипы шариков, откройте панель Instance (Экземпляр), на
ней выберите в списке Behavior (Поведение) пункт Graphic (Графический ри-
сунок), а в нижнем списке — Single Frame (Один кадр). В поле Frame (Кадр)
укажите последний кадр клипа — 30. Шарики замрут на елке.
2. Аналогичным образом мы поступим с серпантином и с веткой-кнопкой. Сер-
пантин должен замереть на кадре 40, а ветка — на кадре 3 или 2. Сразу же
надо решить еще одну возможную проблему. Она связана с тем, что свечи
окажутся объединены внутри символа-раскадровки. Этот символ в слое необ-
ходимо удалить, а вместо него разместить необъединенную группу свечек, ко-
торую можно скопировать из раскадровки или в предыдущей сцене.
3. Теперь вилка должна поползти к розетке. На этом примере мы познакомимся
со служебными слоями — слоями, на которых рисуют пути. Вначале займем-
ся движением вилки. Вставим в слой с вилкой ключевой кадр 10 и продлим
слои Елка и Вилка до этого кадра. Выделим слой и нажмем фиолетовую кноп-
ку Add Guide Layer (Добавить служебный слой) внизу списка слоев.
Служебный слой, или спой, направляющей служит для рисования на нем пути движения для
объекта, который находится на связанном с ним слое. Чтобы объект двигался по направ-
ляющей в процессе раскадровки, необходимо расположить в ключевых кадрах раскадровки
объект на пути. Путь обычно рисуют карандашом, хотя можно воспользоваться и кистью.
Сцена Электросеть 173
4. Возьмем в руки карандаш, зададим ему режим Smooth (Сглаживание) и нари-

суем предполагаемый путь вилки от начального места на полу до розетки
(рис. 7.13). Заблокируем служебный слой, а в последнем кадре слоя прота-
щим вилку по нарисованному пути. Зададим раскадровку в этом слое. Прове-
рим, правильно ли движется самая главная часть гирлянды. Если необходимо,
на подходе к розетке ее можно повернуть.
« PostCard3 - Library
|а Электросеть
Рис. 7.13. Более жирная линия — путь вилки, менее жирная — шнур;
также показано начало изменения изображения в слое-маске
5. Со шнуром, который тянется за вилкой, мы поступим проще. В слое Шнур!

мы его нарисуем целиком^ а анимацию зададим в слое-маске. Кадр за кадром
слой Маска должен приоткрывать занавес, демонстрируя, как шнур преданно
ползет за своей хозяйкой. Вы можете с каждом новом кадре дорисовывать
шнур по кусочкам (но реально, если ключевой кадр только один, они все со-
берутся на нем), а потом с помощью раскадровки или морфинга задать дви-
жение в слое-маске. Может быть, вам не понятно, зачем нужен слой-маска?
А вдруг вам захочется увеличить или сократить количество кадров, не меняя
формы движения. Если вы просто нарисуете изменения шнура в каждом кад-
ре, вам придется все или почти все переделать. А так за вас все сделает Flash.
6. Как только вилка доползла до своей цели, ее можно убрать со сцены. Слой
Вилка можно закончить или продолжить до конца, а шнур втянуть в еловые
лапы и оборвать. Ветку, которая заслоняла розетку, передвинуть на первый

кадр на панели Instance (Экземпляр). Все это должно занять кадров 20-25.
7. Как только вилка попадет в розетку, по гирлянде побежит ток. Дальше долж-
но быть примерно так: «Серебром звезду зажег добежавший до верхушки са-
мый смелый огонек»1. То есть лампочки по очереди будут загораться. Причем
очередь лучше всего определить в соответствии с размотанным шнуром в
предыдущей сцене.
Проще всего поступить так: в каждом ключевом кадре зажигать по новой
лампочке. В конце к горящей гирлянде надо добавить мерцающую звезду, за-
менив рисунок клипом. На каждое «зажигание» можно отвести по 2-3 кадра.
8. Скопируем рисунок пламени и поместим его в новый символ-клип Пламя. Из-
меним цвет контура на белый. Для удобства временно создадим нижний слой,
на котором нарисуем черный квадрат. Теперь белый рисунок ярко контрасти-
рует с черным фоном. Создадим еще один символ-клип Kpyrl, в котором на-
рисуем простой белый круг (его надо сделать символом-рисунком Круг). Круг
будет изменять свой размер на 10 % и менять прозрачность с 18 до 40 и обратно,
причем большему размеру круга должна соответствовать меньшая прозрач-
ность. Естественно, сделать это необходимо, используя раскадровку и растя-
нув клип на 5-6 кадров.
9. Вернемся к клипу Пламя. В нем создадим еще один слой, на который помес-
тим несколько символов Kpyrl. Зададим в каждом слое размеры клипа (они
должны быть разными). Например, если круг с радиусом капли пламени при-
нять за 100 %, то круги будут следующих размеров: 100, 120, 140, 160, 180, 200.
Впрочем, здесь вы можете задать свои значения, которые сочтете нужными.
Дополнительно на круги можно наложить эффект оттенка — какой-то сде-
лать красным, какой-то желтым и т. д. Эффект всего этого многоступенчатого
процесса должен быть следующим: пламя должно колебаться, оставаясь до-
статочно ярким в центре и бледным по краям.
10. Что там у нас по сценарию? Зритель должен щелкнуть на выключателе. Вста-
вим в слой Выключатель ключевой кадр и зададим в нем команду stop. А для
кнопки введем следующий сценарий:
on (release) {
gotoAndPlay ("Свет");
}
Если вы работаете в нормальном режиме с панелью Actions (Действия), то
чтобы задать такой сценарий, вам надо в списке Туре (Тип) выбрать элемент
Frame Label (Метка кадра), а в последнем поле напечатать Свет.
11. Теперь продлим все слои еще кадров на 10. Выделим следующий кадр после
команды stop и на панели Frame (Кадр) введем в поле Label (Метка кадра) его
название — Свет.
12. В слое Свет вставим ключевой кадр и нарисуем черный прямоугольник, за-
слоняющий весь стол. Вставим последний ключевой кадр и зададим рас-
кадровку между кадром Свет и последним кадром сцены. В течение этой
1
С. Маршак.
Сцена Темнота 175
раскадровки параметр Alpha (Прозрачность) черного прямоугольника должен

измениться от 0 до 100 %. Таким образом будет достигнут эффект выключе-
ния света — на черном фоне останутся видны только слои, находящиеся по-
верх данного слоя: слой свечей и звезды.
13. В кадре Свет необходимо еще поменять вид выключателя. Для этого создайте
дубликат символа-кнопки Выключатель! и в его первых трех кадрах удалите
красную точку. Поменяйте символы выключателя.
Сцена закончена, переходим к сцене с подарками, впереди — Темнота.
Сцена Темнота
Начать работу над новой сценой предлагаю с очередной практики в удалении
кадров. Сделайте дубликат предыдущей сцены, назовите его Темнота и оставьте
в каждом слое по последнему кадру. Раскадровки лучше отменить, слои Шнур1,
слой-маску для него, слой Вилка и служебный слой надо отправить в «корзину
для бумаг» (выделите слой и нажмите кнопку в виде корзины внизу списка сло-
ев). Слой Свет временно можно отключить от показа на столе, чтобы он не за-
слонял все остальное.
Что же предстоит нам в новой сцене?
Первым делом мы нарисуем коробки с подарками (хотя в данной сцене они бу-
дут практически не видны). Коробки будут выглядеть почти прозаично: прямо-
угольник с ярким бантиком. Однако на их примере мы потренируемся создавать
растровые заливки. Как бы вы ни старались рисовать во Flash, вряд ли у вас по-
лучится рисунок, сравнимый по броскости с современными оберточными мате-
риалами. Однако Flash позволяет легко экспортировать понравившуюся вам
картинку и превратить ее в заливку.
1. Вначале создадим символ — графический рисунок. В нем пока будет два слоя:
один — для прямоугольника, второй — для бантика. Бантик можно нарисо-
вать кистью. Можно создать для каждого из трех предметов (двух бокалов и
бутылки) свою коробку, можно использовать один и тот же символ, слегка
изменив параметры для каждого экземпляра.
2. Теперь создадим заливку. Заблокируйте слой с бантом и перейдите на дру-
гой. Потом надо дать команду File > Import (Файл > Импорт) и в появившем-
сястандартном окне найти тот графический файл, который вы хотите исполь-
зовать в качестве заливки. Это может быть любой графический рисунок,
созданный вами или заимствованный на бескрайних просторах Интернета.
Вы можете заранее подготовить файл перед его импортированием, а можете
исправить его, выбрав в контекстном меню в окне библиотеки команду Edit
with (Редактировать с помощью). Как вы догадались, после того как в окне
импорта вы нажмете Открыть (Open), содержимое файла окажется на столе и
в библиотеке вместе с другими символами и звуками. Оттащите рисунок в сто-
рону, чтобы случайно не испортить остальное.
3. Дайте команду Modify > Break Apart (Изменить > Преобразовать в графику). Те-
перь рисунок окажется разделенным на заливку и контур, что найдет свое от-
ражение и на панели инструментов. Выберите инструмент Paint Bucket (Банка
краски) и залейте коробку новой заливкой. Если размер рисунка будет мень-
ше, чем размер коробки, Flash продлит его, повторив необходимое количество
раз, поэтому имеет смысл выбирать небольшие рисунки, аналогичные тем,
которые Windows использует для своих мозаичных обоев.
4. Поместим коробки под елку на отдельном слое (сразу под слоем Свет) в пер-
вом кадре сцены и пока оставим ее в покое (рис. 7.14). Дальше мы должны
дать понять, что что-то изменилось, и показать появившиеся коробки. Можно
предложить два способа. Первый путь немного проще, но похож на тонкое
издевательство. Можно сделать несколько коротких раскадровок, в которых
черный слой становится более прозрачным (процентов до 90), как бы изо-
бражая отблески взлетающих ракет на улице (если будете наполнять открытку
звуком, то можно вставить далекие разряды). А потом остановиться по ко-
манде stop и ждать, пока зритель догадается нажать выключатель снова.
Второй путь делает, по сути, то же самое, но изменение прозрачности (и рас-
каты взрывов) надо внести внутрь клипа. Таким образом, течение сцены бу-
дет остановлено, а экран будет по-прежнему вспыхивать от непрекращаю-
щегося фейерверка. В любом случае, изменение не должно иметь резких
переходов, то есть последний кадр раскадровки должен быть таким же или
очень близким к первому.
5. После появления коробок (не обязательно сразу же) необходимо вставить
ключевой кадр в слое с выключателем, вставить команду stop и задать сцена-
рий перехода при нажатии кнопки. Переходить надо уже к следующей сцене.
(Впрочем, эти две сцены вполне можно и объединить в одну.)
Рис. 7.14. Новогодние сюрпризы
Сцена Распаковка
Как и предыдущая, эта сцена будет короткой. Основным действием в ней будет
превращение прямоугольника с бантом в гору измятой бумаги и лент. Так как в
предыдущей сцене почти ничего не произошло, мы смело можем продублиро-
вать ее и превратить в новую сцену.
1. Вначале необходимо включить свет. Не важно, что у вас на слое клип или ри-
сунок, — просто задайте раскадровку уменьшения параметра Alpha (Прозрач-
Сцена Распаковка 177
ность) до 0. И на первом же кадре сцены надо заменить выключатель симво-

лом в положении «ВКЛ».
Дальше вы должны создать содержимое коробок — бутылку шампанского и
два бокала. Думаю, нарисовать их вам не составит труда. Бокалы можно сде-
лать немного прозрачными (около 80-60 %), чтобы было больше похоже на
стекло, а также использовать для заливки радиальный градиент. Их, естест-
венно, проще сделать символами. Если для вас представляет большую слож-
ность изобразить плавную красивую кривую даже с помощью карандаша в
сглаживающем режиме или изобразить нечто похожее на этикетку на бутыл-
ке, можете попытаться найти нужный рисунок в Интернете, а потом преобра-
зовать его в векторный.
После того как вы создали символы бутылки и бокалов, расположите их за
коробками, можно отвести для каждого предмета свой слой, можно распреде-
лить символы на одном слое с помощью команд подменю Arrange (Распреде-
ление).
Итак, свет загорелся, и нам предстоит распаковать коробки и извлечь их со-
держимое. Значит, во-первых, надо вставить команду stop, а во-вторых, изме-
нить поведение одной из коробок на Button (Кнопка).
Вставьте ключевой кадр, замените поведение символа одной из коробок на
панели Instance (Экземпляр). Затем на панели Actions (Действия) задайте пе-
реход на следующий кадр, который тоже надо сделать ключевым. В нем заме-
ним коробку графическим рисунком открывающейся коробки. На панели Ins-
tance (Экземпляр) необходимо выбрать Play Once (Проиграть один раз) или
задать команду stop в конце клипа. Как только ролик закончится, надо повто-
рить те же действия с другим экземпляром, а потом и с третьим. И снова не
забудьте про команду stop перед каждым превращением, если вы, конечно, не
хотите, чтобы все коробки открылись от одного щелчка мыши.
Процесс распаковки можно с успехом свалить на Flash. С помощью морфинга
он за несколько кадров превратит точные грани и линии в груду разноцвет-
ных обрывков (рис. 7.15). Для начала скопируйте символ, потом перейдите
к его редактированию. Вставьте ключевые кадры и задайте морфинг. В по-
следнем кадре сотрите или часть рисунка, или все и нарисуйте нечто похожее
на горсть упаковочной бумаги и лент. Проверьте, как идет процесс морфинга.
Если результат вас не устроит, попробуйте задать несколько промежуточных
ключевых кадров, чтобы направить Flash по нужному пути.
Будьте осторожны при замене символов и расстановке ключевых кадров в
пункте 5. Как бы вы ни поступили: задали остановку программно или на па-
нели Instance (Экземпляр), если Flash сочтет коробки в разных кадрах разны-
ми экземплярами, то коробка может снова прийти в первозданный вид. Если
такое произошло, надо либо начать все заново, либо указать для таких строп-
тивых символов пункт Single Frame (Проиграть один кадр) и указать послед-
ний кадр клипа.
Прежде чем открыть бутылку, я предлагаю навести порядок — так сказать,
убрать все лишнее. Поместите над одной из разобранных коробок прозрач-
ную кнопку и при нажатии уберите остатки упаковки с экрана во вспышке
пламени или, если вы рьяно печетесь о пожарной безопасности или охране

окружающей среды, в простом исчезновении с экрана (правда, в последнем
случае у вас возникнут проблемы, если вся работа шла в одном слое). Таким
образом, у вас появится команда stop еще в двух местах — перед уборкой
и после нее.
Рис. 7.15. Процесс распаковки в режиме кальки
9. Осталось поработать еще немного — и пробка полетит в потолок. Для послед-

него перехода предлагаю использовать в качестве кнопки любой круглый
символ. Следует сделать его прозрачным и назначить ему соответствующее
поведение. Чтобы переход между сценами был более гладким, поступим сле-
дующим образом. Будем увеличивать изображение, держа в фокусе бутылку
и бокалы. При этом все остальные слои должны постепенно растаять в возду-
хе, а фон новой сцены — так же плавно проявиться.
10. Для простоты можно сделать фоном стену. Если вы выберете более интерес-
ный фон, создайте новый слой над слоем фона и проявите его. Что делать с
остальным? Все очень просто. Задайте два столбца ключевых кадров. В каж-
дом укажите раскадровку между ними. Выделяйте по очереди последний кадр
каждого слоя (при этом будет выделяться его содержимое). На панели Trans-
form (Преобразование) укажите, например, 300 % (или увеличьте указанную
там цифру в 3 раза), а на панели Effect (Эффект) установите параметр Alpha
(Прозрачность) в 0.
11. Отдельного рассмотрения требуют слои Звезда, Выключатель (потому что они
содержат только по одному символу) и Фон (потому что он содержит простой
рисунок). Звезду, дополнительно к указанным ранее действиям, надо пере-
двинуть на верхушку елки, а выключатель — в сторону (иначе они останутся
на том же месте). Фон не получится сделать прозрачным так просто. Если
фоном следующей сцены станет стена, просто сдвиньте увеличенный рисунок
вниз.
Вот и все. Впереди последняя сцена.
Сцена Последняя 179
Сцена Последняя
Последняя сцена будет выглядеть достаточно просто. Выстрелит пробка из бу-
тылки, польется пена, бутылка поклонится сначала одному бокалу, потом дру-
гому, наполнив их шипящим содержимым. Бокалы чокнутся, движимые неви-
димыми руками, и настанет время поздравлениям — вместо обычного «Конец»
на экране появится «С Новым годом!». Никаких ожиданий и нажиманий кно-
пок, так сказать, финальный ролик. Ну что, приступим?
1. В этой сцене нам понадобятся 9 слоев: Фон, Пробка, Бутылка, Фольга, Пена,
Шампанское!, Шампанское2, Бокал!, Бокал2. В течение первой раскадровки
фольга будет снята с бутылки. Для этого необходимо создать новую бутыл-
ку без фольги и отдельно — клип разматываемой фольги. В самом простом
случае фольгу можно покрасить в обычный серый цвет. Если же вы хотите
более реального изображения, попробуйте создать или найти заливку для та-
кого материала.
2. Сложность отображения разматывания состоит в том, что в клипе должен быть
слой, в котором нарисовано горлышко от бутылки, а фольга будет преобра-
жаться в двух слоях: до и после него (естественно, с помощью раскадровки
и морфинга). Сначала вы срезаете полоску, закрывающую пробку, и превра-
щаете ее в треугольный флаг, воспользовавшись командой Skew (Наклон) на
панели Transform (Преобразование). Потом флаг разматываемой фольги пере-
ходит на другую сторону бутылки и удлиняется, затем он сматывает еще одну
полосу (слегка по диагонали), которая снова увеличивает его длину. Еще
один моток — и фольга улетает с экрана.
Слой горлышка перед последними кадрами клипа лучше очистить. В клипе
также желательно не использовать контуры, особенно если вы воспользуе-
тесь морфингом. Появляющиеся контрастные линии будут резать глаз, в то
время как нарисованные только кистью (заливкой) переходы будут сглажи-
вать небольшие погрешности в анимации. После окончания клипа слой Фоль-
га надо очистить.
3. Когда фольга снята, становится видна пробка. Лучше всего сделать стекло
бутылки слегка прозрачным, тогда пробку можно будет просто поместить на
слое, расположенном под ним. После того как пробка улетит, ее место на слое
может занять вырвавшаяся на свободу пена.
4. Раскадровка, демонстрирующая чудеса баллистики, не представляет труда,
благо, можно считать, что вначале пробка летит по прямой. Пробку сделаем
белой, слегка прозрачной.
Дальнейшие действия примерно следующие: выливается немного пены из бу-
тылки, затем пена спадает, и бутылка направляется к первому бокалу. Льется
шампанское, бокал наполняется пеной до краев, затем пена спадает и бокал
остается почти полным. В это время бутылка уже переходит к наполнению
второго бокала. После того как пена спала и там, бутылка уходит со сцены,
бокалы чокаются (увеличиваясь в размерах), и появляется заключительная
надпись. У меня сцена заняла 160 кадров, и это, по-видимому, нижняя грани-
ца времени.
5. Сначала предлагаю задать действия бутылки. С помощью раскадровки бутыл-

ка движется к бокалам, наклоняясь градусов на 75, и удаляется в сторону, на-
полнив их шампанским.
Все, что связано с пеной, рисуется в слое Пена и преобразуется с помощью
морфинга. Для пены лучше создать свою растровую заливку. Создайте BMP-
файл 30x30 пикселов (для задания размера файла в программе Paint есть ко-
манда Атрибуты ), залейте его подходящим для шампанского цветом (бледно-
желтый с уклоном в зеленый). Чтобы задать новый цвет, используйте коман-
ду Изменить палитру.
6. Нарисуйте кистью с чуть более ярким цветом несколько кружков разного диа-
метра — пузырьки. Можно нанести на пузырьки белые блики. Сохраните файл
как 24-разрядный рисунок (*.bmp). Импортируйте во Flash, преобразуйте в
векторный вид рисунок (Break Apart) и залейте контур вина новой заливкой.
Попробуйте изменить размеры пузырьков и их расположение. Удобно рабо-
тать, переключаясь между Paint и Flash после сохранения очередных измене-
ний и их проверки в «полевых условиях».
При задании заполняющегося бокала можно просто скопировать форму бо-
кала из символа, обрезать ножку и залить созданной заливкой. В результате
у вас должно получиться 3 пары морфингов. В первом пена из точки преоб-
разуется в окончательную форму, во втором происходит обратное превраще-
ние (в случае с бокалом, расположение этих точек будет разным — изливать-
ся пена будет из бутылки, а исчезать на поверхности вина).
7. В слоях Шампанское за время, пока пена в бокале спадает, появляется вино -
фигура, повторяющая форму соответствующей части бокала, залитая бледно-
желтым цветом. Появление вина лучше всего реализовать с помощью измене-
ния параметра Alpha (Прозрачность) (рис. 7.16).
Рис. 7.16. «Течет шампанское рекою»...
8. После того как пена в бокалах осела, можно начинать прорисовывать движе-
ние бокалов. Они приближаются друг к другу, слегка наклоняясь и увеличи-
ваясь в размерах (примерно в 2 раза). Не забудьте согласованно трансформи-
ровать бокалы и вино.
9. Если вы внимательно посмотрите на завершающую сцену, то легко заметите
противоречие физическим законам, которое у нас невольно получилось (если
Звук 181
вы, конечно, наклоняли бокалы). Ведь верхняя граница вина должна оста-
ваться горизонтальной. Чтобы это не бросалось в глаза, в кадре, где бокалы
уже остановились в нежном поцелуе, замените содержимое слоев с шампан-
ским: просто скопируйте рисунок вина из раскадровки и сотрите верх, сделав
его горизонтальным (воспользуйтесь ластиком при нажатой клавише Shift).
10. После хрустального звона (конечно, если вы его добавите) появляется над-
пись «С Новым Годом!» (рис. 7.17). Для ее создания лучше воспользоваться
шрифтом, имитирующим надпись от руки. Цвет для надписи надо выбрать
контрастный фону (например, красный).
Рис. 7.17. Финальный кадр
Появление надписи сделайте с помощью раскадровки. В начальный момент

она очень маленькая и расположена в точке встречи хрустальных сосудов.
В конце она должна занимать почти все пространство стола. По пути ее мож-
но повернуть разок (на панели Frame (Кадр) в списке Rotate (Вращение) вы-
брать CW (По часовой стрелке) и в поле ввести 1 times). В последнем кадре
задайте команду stop.
Фильм почти закончен. Пленка отснята, осталось провести «озвучивание».
Звук
Я намеренно вынес работу со звуком в отдельный раздел, подозревая, что не
у всех стоит на столе аппаратура для работы с ним. Но дело не только в этом.
Практически все необходимое для работы можно найти в Интернете, но звук
может стать очень «тяжелым» дополнением к фильму. Прежде чем приступать
к работе со звуком, подумайте, на сколько килобайтов увеличится фильм после
включения в него аудио и не слишком ли он будет велик для пересылки по почте.

Но в любом случае можно сделать озвученный фильм хотя бы для себя.
Для начала вспомним, как импортировать звуковой файл во Flash.
В меню File (Файл) надо выбрать команду Import (Импорт). Затем в диалоговом
окне Import (Импорт) выбрать нужный файл и нажать Открыть (Open). Звук бу-
дет помещен в библиотеку, откуда вы его сможете перенести на стол. На столе
вы его, естественно, не увидите, зато частокол звуковых колебаний найдет свое
графическое отражение на киноленте.
Итак, какие же звуки нам понадобятся?
• В первой и второй сценах никакие особенные эффекты не нужны. Мы мо-
жем запустить небольшую приятную мелодию по циклу, а при успешном на-
жатии на кнопки подавать звуковой сигнал типа «би-ип».
• Во второй, третьей и четвертой сценах можно сменить фоновую мелодию,
сделав «цветомузыку», то есть подобрать такую мелодию, чтобы ее длитель-
ность была кратна течению клипа пламени. Отдельным звуком можно сопро-
водить щелчок выключателя. Дополнительно можно добавить шуршание ко-
робками в начале сцены Темнота, которое можно использовать в следующей
сцене при разворачивании бумаги.
• Больше всего звуковых эффектов необходимо для последней сцены фильма:
О шуршание снимаемой фольги;
О хлопок при вылете пробки из бутылки;
О шипение спадающей пены;
О звук переливающейся жидкости;
О хрустальный звон;
О заключительное «С Новым годом!».
Большинство из них должны быть не совсем натуральными, иначе пропадет
весь эффект от их использования. Фоновую музыку тоже можно оставить.

На этом занятии мы закончили освоение Flash, его основных инструментов и
принципов работы:
• узнали, как задать слой маски и служебный слой;
• познакомились с хитростями морфинга и раскадровки;
• научились создавать и использовать различные символы: клипы, кнопки и гра-
фические рисунки;
• попробовали озвучить фильм;
• повторили, как делать линейные и радиальные градиентные и растровые за-
ливки.
Auf Wiedersehen! Встретимся на следующем занятии!
Занятие 8
Семь раз отмерь

Вот причуда знатока!
На цветок без аромата
Опустился мотылек.
Мацуо Басе*
Занятия 8, 9 и 10 — лекционные. На них речь пойдет в основном о теории web-
строительства. Но поскольку практика — мать теории, о многом мы уже успели
поговорить в ходе первых практических занятий. Однако если раньше мы гово-
рили, как надо действовать для достижения некоторого результата, то теперь
мы обсудим, почему это надо делать именно так. Поэтому не спешите слепо ко-
пировать понравившийся вам сайт, а для начала ответьте на вопрос: «Почему
сделано так, а не иначе?» И если вы найдете ответ, то наверняка сможете найти
свои, наиболее подходящие для вашего сайта решения. Таким образом, теория
web-строительства — не абстрактное мудрствование, а тренировка видеть в пе-
строте Интернета общие черты, единые для всего виртуального мира.
На одном из следующих занятий мы создадим заглавную страницу — страницу,
которая предваряет сайт и дает посетителю представление о том, что его ожида-
ет дальше. Однако сайт может быть настолько мал, что заводить для него от-
дельную заглавную страницу — роскошь, все равно что использовать грузовик
для того, чтобы перевезти телевизор или чемодан. Вы уже придумали, каким бу-
дет ваш сайт? Какая у него будет структура? Какую информацию вы разместите
на нем? Сколько страниц он будет занимать? Какие фотографии вы покажете
посетителям? Какой будет цвет страниц и текста на них? Вы уже готовы отве-
тить на все вопросы относительно вашего сайта? Если нет, тогда это занятие по-
дошло как раз вовремя. На нем мы узнаем:
• с чего начать создание сайта, чем продолжить и чем закончить;
• на что обращать внимание при разработке сайта;
• чем стоит наполнять сайт, а чем нет;
1
184 Занятие 8. Семь раз отмерь
• что подразумевают под хорошим дизайном;

• как выбрать цветовую палитру и стиль;
• стоит ли использовать фреймы у себя на сайте.
Даже если ваш сайт — всего лишь одна страница текста, и вы считаете, что пла-
нировать его дольше, чем делать, прочтите это занятие. Здесь собрано много со-
ветов, которые могут пригодиться даже в таком случае.
Этапы работы
Прежде всего остановимся на этапах работы над сайтом. Данный раздел — по-
пытка внести хотя бы какой-то порядок в нестройные ряды советов, столпив-
шихся в этом занятии.
• Этап 1. Выбор содержания. Для начала надо определиться, что будет содер-
жать сайт, о чем вы расскажете случайному web-серфингисту. Попытайтесь
представить себе, что вы смотрите чужой фотоальбом и не видите ни одного
знакомого лица. Будет ли вам интересно? Надеюсь, вы не думаете, что кто-то
придет к вам на сайт, чтобы прочитать скупые строки Curriculum Vitae, од-
ним своим видом нагоняющие тоску? Ведь у каждого в жизни происходило
что-то интересное, надо только суметь это донести до читателя, чтобы не по-
терять всю остроту переживания где-то на полпути между ярким воспомина-
нием и буквами на экране. Самое время попробовать!
• Этап 2. Разработка структуры. Любой документ должен иметь структуру.
Тем более, если это гипертекстовый документ. Для начала необходимо ре-
шить, будет ли это просто одна страница или целый сайт. Если сайт, какую
структуру он будет иметь — линейную или иерархическую? Как будет устро-
ена навигация по сайту? Кроме логической стоит продумать и физическую
структуру: надо ли вам для каждой web-страницы заводить отдельную папку
или файлов так мало, что будет достаточно и одной.
• Этап 3. Подготовка текстовых материалов. Лично я советую использовать
программу Word. Другого такого богатого по функциям текстового процес-
сора еще не создали. Почитайте документы в Рунете. Чуть ли не на каждой
странице найдется пара опечаток. А почему? Потому что web-дизайнеры
предпочитают использовать обычные текстовые редакторы, которым все рав-
но, как вы напишете — «поле» или «поел». Однако не спешите сохранять
созданный документ как HTML-файл. Возникшие при этом проблемы пере-
весят все «отловленные» ошибки. Лучше сохранить его в формате Word
(с расширением .doc), а потом воспользоваться «заклинанием» Ctrl+A, Ctrl+C
и — Ctrl+V — поместить его в простой текстовый редактор, например Блокнот,
откуда текст уже можно копировать в FrontPage, Dreamweaver или Netscape.
• Этап 4. Подготовка графических материалов. Вы собираетесь создать свой
виртуальный фотоальбом или галерею? Тогда вам понадобится цифровая
версия фотографий и рисунков. Сканер плюс Photoshop — и вы сможете по-
казать виртуальному сообществу любые шедевры.
• Этап 5. Разработка дизайна. Все страницы сайта должны иметь одинаковый
дизайн (стиль оформления). Окиньте мысленным взглядом все подготовлен-
ные материалы. С каким цветом вы их ассоциируете? Как вы в рамках еди-

ного стиля можете разместить и фотографии, и любимые анекдоты? Не по-
мешает придумать и «изюминку» — этакую красную нить, проходящую через
все страницы сайта, и желательно, имеющую отношение к содержанию.
• Этап 6. Создание элементов оформления. Если вы определились с дизай-
ном, самое время начать воплощать его в жизнь. В Сети очень много карти-
нок — ни один шрифт не сможет того, что сделает с текстом Photoshop. He
говоря уже о колонтитулах, буквице и прочем. Если вы делаете сайт пол-
ностью на Flash, настала пора «отснять пленку».
• Этап 7. Верстка. Где вы будете создавать из разрозненных файлов свой
сайт — не имеет значения. Будь то FrontPage или web-мастер, встроенный в
Netscape, или просто Блокнот — ваша задача правильно расставить теги HTML
между текстовыми материалами и ссылками. Что касается Flash, то вам на
данном этапе необходимо скомпоновать и опубликовать фильм.
• Этап 8. Тестирование. Запустите браузеры и просмотрите весь сайт, от нача-
ла до конца. Тестирование может занять львиную долю времени работы над
сайтом — все зависит от того, насколько хорошо вы справились с предыду-
щим этапом. Программа минимум — убедиться, что сайт правильно отобра-
жался хотя бы в одной версии Netscape Communicator и Internet Explorer.
Естественно, что обнаруженные ошибки необходимо исправить.
• Этап 9. Публикация в Сети. Если вы считаете, что сайт приобрел закончен-
ный вид, выкладывайте его в Сеть и наслаждайтесь результатом. Как извест-
но, нет предела совершенству, поэтому лучше заранее определитесь с крите-
рием готовности своего детища, иначе финальный аккорд не прозвучит
никогда.
На этом и следующих двух занятиях мы обсудим каждый шаг подробнее.
Разработка общей концепции сайта

Главное на сайте — его содержание. Никакой дизайн и оформление не помогут,
если оформлять будет нечего. В Интернете есть множество сайтов со средним
дизайном или вообще без такового, которые пользуются большой популярно-
стью только за счет своего содержания. Дизайн должен лишь помогать воспри-
ятию содержательной части, как удачная форма бокала помогает ощутить аро-
мат хорошего коньяка. Возможно, пустой бокал и приятно держать в руке, но
без благородной жидкости в нем это будет довольно странным занятием.
Как оценить содержание собственного сайта? Очень просто: представьте, что вы
сами набрели в Сети на аналогичный сайт, но созданный кем-то другим. До-
смотрели бы вы его до конца или у вас не хватило бы терпения даже дождаться
завершения загрузки первой страницы? То-то и оно.
При создании сайта совсем не обязательно гнаться за широкой популярностью.
Если вы просто хотите пообщаться, то десятка-двух постоянных посетителей
будет вполне достаточно. Пусть для них ваши страницы станут тихой заводью в
бурных водах Сети. Каждый может рассказать о чем-то лучше других: это мо-
жет быть и хобби, и работа, и любая другая область, в которой вы располагаете
полезной информацией или опытом. Если ваш сайт заполнит информационный

вакуум Интернета по какому-либо вопросу, можете считать свою миссию ус-
пешно выполненной.
Последний пример из жизни. У ребенка в 11 часов ночи начало болеть ухо. Един-
ственное средство связи дома с внешним миром — Интернет. На слово «отит»
Яндекс находит 12 548 страниц. И советом, на котором сходятся авторы первых
двух десятков просмотренных сайтов, является «вызвать врача». Совет не очень
актуальный среди ночи, да и в больницу ехать совсем не хочется. Все-таки -
с миру по нитке — удается выяснить, что отит бывает аллергический и при нем
лучше всего закапать настойку прополиса как антисептик и местное обезболи-
вающее и/или дать анальгин1. Я веду к тому, что если бы в числе первых стра-
ниц нам встретился сайт с подробной информацией о болезни, способах лече-
ния со ссылками на лекарства и указанием их дозировки (этого мы так и не
нашли), то это спасло бы нам не один десяток нервных клеток, а ребенка изба-
вило бы от боли на час раньше. И мы были бы искренне благодарны создателю
такого сайта. Так что, может быть, именно ваш опыт поможет кому-то в труд-
ную минуту, подсказав верное решение.
Стиль изложения информации на сайте является не менее важной частью, чем
стиль дизайна, и тоже должен быть уникален. На сайтах фирм, как правило,
стиль изложения достаточно официален, а на персональном сайте вы можете
дать волю своей фантазии. Однако помните, что Интернет — общественное ме-
сто, и вас могут попросить «покинуть помещение».
СОВЕТ
Старайтесь сделать и содержание, и оформление своего сайта (как, впрочем, и всю свою
жизнь) единственным и неповторимым. Избегайте того, что делают все. Смотреть и учить-
ся у других — это хорошо и правильно, но слепо копировать чужие достижения вряд ли
стоит. Ваш сайт — это ваш доверенный представитель в виртуальном мире, не надо вво-
дить его «в общество» в одежде с чужого плеча.
Расскажите историю
Чего не хватает Всемирной паутине, так это мух, которые могли бы интересно
рассказать о себе. Если где-то появился свежий анекдот, то он вмиг облетает
полмира. Значительно проще отыскать и скопировать себе чужое, чем создавать
свое. Так дело обстоит с большими сайтами, но для персонального сайта все
с точностью до наоборот. Ведь если вы хотите пообщаться с коллегой или това-
рищем, вы же не обмениваетесь с ним газетными вырезками! Гораздо интерес-
нее рассказать что-то самому, чем скопировать готовый текст. Вы создаете сайт,
чтобы рассказать о себе, ну так и расскажите!
Человек, умеющий хорошо рассказать истории, преподнести материал, прочи-
тать лекцию, ценится на вес золота. Таких людей не так много, но каждый мо-
жет научиться этому несложному искусству. И я предлагаю вам попробовать.
Пусть ваш сайт станет не только упражнением в HTML-кодировании, но и пси-
хологическим практикумом. Многие психологи в процессе обучения ораторско-
1
Я не врач и не буду советовать этот рецепт всем, но Елисею помогло.
му искусству советуют записывать каждый день по интересной истории, а по-

том изредка перечитывать, откладывая избранное. Но ведь не обязательно про-
сто откладывать. Поместите их на сайт! Вам самим станет интереснее жить.
Пусть лозунг «Ни дня без истории!» станет вашим девизом. Вы не успеете огля-
нуться, как станете изумительным рассказчиком и приобретете множество хоро-
ших знакомых в Web.
Теперь немного о том, что же делает историю интересной. На самом деле всего
две вещи: напряжение и открытие. Почему? Именно эти два компонента прида-
ют вкус будничному вину жизни. Все, что привлекает к себе людей, содержит
напряжение и открытие. Посмотрите вокруг или мысленно пролистайте свою
жизнь, и вы поймете, что это так. Болельщики и спортсмены замирают в напря-
жении поединка, любители кроссвордов и «квестов», головоломок и олимпиад-
ных задач радуются каждому сделанному открытию, даже любовь приносит на-
слаждения больше там, где больше напряжения.
Основная же причина того, почему одна история переживает века, а другая
даже не доходит до ушей слушателя, в том, что мы сопереживаем героям исто-
рии. Мы становимся на их место, примеряем к себе их мысли и поступки и ока-
зываемся словно вовлеченными в события вместе с ними. В результате чужая
история становится для нас важна, как и то, что действительно произошло или
происходит с нами.
«Со мной ничего интересного не происходит», — возможно, скажете вы. И буде-
те... не правы. Жизнь интереснее любой мыльной оперы, хотя их и смотрят мил-
лионы. Жизнь интересна, потому что в ней происходят события, которые могут
произойти с каждым. Оглянитесь вокруг — вот она, история! Ваша история! Вы
долго искали работу и случайно наткнулись на объявление? Терялись в лесу и
сами выбрались на дорогу, вспомнив навыки пионерского детства? Вы помните,
как сдавали первый в жизни экзамен? Расскажите! Детям, коллегам, всему ми-
ровому сообществу, себе самому, наконец! Пусть создание персонального сайта
станет поворотным пунктом вашей биографии.
И в качестве примера приведу несколько своих историй.
Спрос не грех
Убежал как-то мой сын в детском саду в другую комнату, не спросив на то раз-
решения у воспитательницы. Она ему:
- Елисей, почему ты без спросу убежал в спортзал?
Елисей, слегка подумав, глубокомысленно замечает:
- А где ж его берут? — имея в виду, конечно, «спрос».
- У меня, — невозмутимо продолжает воспитательница.
Елисей жалобно протягивает вперед руку и говорит:
- Елена Владимировна, дайте спрос, пожалуйста.
Про ремонт
Стою в расчетном отделе бухгалтерии Политеха и выясняю, должны ли мне еще
денег. Бухгалтеры дружно и безуспешно роются в огромных талмудах старых
ведомостей в поисках моей фамилии. Сын ползает под ногами, играя машинкой.
Машинка, хоть и купленная вчера, очень быстро начинает отбрасывать колеса.

Насадить обратно колесо у Елисея не получается, и он подходит ко мне со стан-
дартной просьбой: «Собери, пожалуйста». Я, естественно, собираю. Через пару
минут история повторятся. Я пытаюсь завязать с ним беседу, и он начинает
объяснять все происходящее с его машиной:
— Машина заезжает в ремонт, — вещает он, и очередное колесо летит в сторону.
- Какой же это ремонт? Это я ремонтник, а там она ломается, — замечаю я.
Малыш не смущаясь продолжает:
- Здесь у нас ломающий ремонтник, а ты ремонтирующий ремонтник.
Совсем как в жизни...
Про рыбалку
Я сижу на своей половине комнаты и работаю над книгой. Елисей «ловит
рыбу»: удочка почти настоящая, только магнит вместо крючка, а рыбы — пла-
стиковые фигурки с кнопками. Чтобы сильно не портить фигурки, кнопки во-
ткнуты в незаметные места: под плавники, в рот и т. д. Вдруг слышу: «Папочка,
воткни мне в рот кнопку».
Я не сразу понимаю, в чем дело, и отвечаю: «Иля, ты думаешь, что говоришь?».
После ответа рабочее настроение улетучивается надолго: «Да, я больше не буду
ее оттуда вытыкивать...».
Откуда берутся дети и волосы
Купили мы арбуз, как и положено, — полосатый. Елисей интересуется:
- Папочка, а почему арбуз полосатый?
Я обычно придумываю какую-нибудь подходящую сказочную историю, но в
этот момент я был занят и отвлекаться не хотелось, поэтому сам пошел в атаку:
- А почему у тебя волосы белые?
Сын, не долго думая, ответил:
— А их такими прикрепили.
Нам вдвоем с Ириной становится интересно, что он будет отвечать дальше:
— А кто тебе их прикрепил?
- Люди, которые меня сделали, — последовал незамедлительный ответ. Насту-
пает очередь самого интересного вопроса:
— А кто тебя сделал?
После него следует минутное колебание, и мы с нетерпением ждем, что же наш
сын думает о воспроизводстве человеческого рода. Но не тут то было:
— Люди, которые мне волосы прикрепили... — ответил будущий философ.
Частная собственность
При создании собственного web-ресурса часто возникает ситуация, когда автор
может скопировать себе на сайт чужую информацию: программу, книгу, песню,
графику. Здесь начинаются взаимоотношения, которые регулируются междуна-
родными законами об авторских правах. Нельзя, например, сделать копию рас-
Дизайн 189
сказа и опубликовать его в прессе или на собственной web-странице без согла-

сия автора. Страничка в Интернете — это тоже публикация, и вся информация
там лежит так же свободно, как в газете, журнале или книге. Как правило, боль-
шинство информации на персональном сайте — интеллектуальная собственность
автора (если не указано иное), и вы не имеете права ее использовать без его со-
гласия.
Часто бывает указано, что именно из предложенной информации разрешено ис-
пользовать напрямую, а что — нет. Если вы затрудняетесь решить, что можно
делать с полученной информацией, — напишите web-мастеру, подробно изложив
свой вопрос.
Идеология сайта
Не создавайте и ни в коем случае не публикуйте сайты ни о чем. Не интересно
заходить на сайт, в котором, как на «Поле чудес», есть только: «Привет всем!
Меня зовут Вася!». Большинство web-серфингистов преследуют одну из двух
целей: развлечься или найти нужную информацию. Иначе зачем их занесет к
вам на огонек? Поэтому ваш сайт должен отвечать на запросы хотя бы одной из
этих групп. Разместите на сайте какой-то оригинальный развлекающий матери-
ал или, наоборот, дающий возможность хотя бы на минуту задуматься о вечном.
Или поместите выдержки из личного опыта, которые могут кому-то пригодить-
ся. Это может называться «Как я покупал квартиру», «Советы по ремонту» или
«Что стоит посмотреть в Баварии». Таким образом вы поможете кому-то избе-
жать ошибки, а себе найдете единомышленников, которые придут к вам на сайт,
набрав в строке поиска, например, «советы + ремонт».
Может быть, когда-нибудь благодаря таким сайтам Интернет превратится из
виртуального болота в реального информационного интеллектуального помощ-
ника в любой жизненной ситуации.
Дизайн
Конечно, главное на сайте — это содержание. Однако плохой дизайн может ис-
портить все, даже идеальное содержание. Например, слишком мелкий шрифт
или «ядовитые» цвета очень быстро отпугнут любого, даже самого заинтересо-
ванного посетителя. Но не всем же быть художниками. Некоторым вкуса не
хватает даже на то, чтобы подобрать галстук к костюму (или наоборот, это кому
как повезет). Как и в любом другом деле, можно сформулировать правила web-
дизайна, следуя которым, вы сможете создать сайт, претендующий на твердое
«три», а то и на «четыре».
Идея
Идея — прежде всего! Этот лозунг должен проходить красной нитью через все
ваши размышления об устройстве любого продукта творчества, будь то сайт,
книга или простой рисунок в тетради. Пусть даже на первый взгляд идея пока-
жется банальной или вовсе глупой — у вас всегда будет возможность придать ей
штрихи индивидуальности и выдать за плод зрелых размышлений. В любом

случае идея поможет сделать оформление сайта более цельным и интересным.
Что подразумевается под идеей? Все что угодно — любая мысль, которую мож-
но воплотить в оформление. Выражаясь языком философии, вам надо приду-
мать форму для содержания или содержание для формы. Слишком туманно?
Давайте попробуем пояснить на примерах.
• Идея первая — абстрактная ассоциация. Ваш возраст, скажем, лет за 60. Седь-
мой десяток — просто идеальный возраст, чтобы открыть свою страницу в
Интернете. Почему? Потому что легко реализовать идею семи цветов радуги.
На каждый цвет — свой десяток. Как там, в детской присказке? «Каждый
охотник желает знать, где сидит фазан». Красный — детство, теплое, как пла-
мя костра, и вкусное, как спелая клубника; оранжевый -- юность, когда
жизнь напоминает спелый, брызжущий соком апельсин; желтый — молодость,
буйство света и красок... Ну и так далее. Чем дальше по жизни, тем холоднее
тона на странице. Если вы под такую форму подберете подходящее содержа-
ние — ваш сайт будет воплощать ИДЕЮ. И не обязательно ждать пока вам
исполнится 60, ведь и 21, и 35 тоже делится на 7. А еще бывает четыре вре-
мени года, три компонента цвета. Главное — идея! К такого рода идеям можно
отнести оформление сайта в виде страниц блокнота или тетради, старинных
свитков или наскальных надписей, гобеленов или современной настенной
живописи.
Э WW/www avesladesign tu/AW/ - Microsoft Internet Exploit»

: . ; : № ' . ЕЛ VW rs««6s 'tools"''.H
Я '
: Аудитория нашего мира - это вы и все те, кого Вы сюда

Пригласите
Audience Линки на самые интересные сайты в русскоязычной.;
сети, презентованные s FLASH
Transmitter ^ Не изобретение будущего, а средство передвижения в
fentertammenJt нашем мире
Revolution Развлечения на любой вкус. Тем более, мы наверняка
знаем, что Вам интересно
Революционная теююлогия FLASH * теперь и е
Российском интернете
ШИШ
Рис. 8.1. Заглавная страница альтернативного мира
Дизайн 191
Идея вторая — конкретный предмет увлечения или обсуждения. Проще все-

го с идеями фанатам, увлеченным людям, для которых сама жизнь — это во-
площение идеи. Будь то «идея полета» или, наоборот, выращивание цветов1 .
Если вы истинный горожанин, но всегда мечтали вырастить маленький уют-
ный садик, а времени на поездки до огорода у вас нет — вы можете создать
его на страницах своего сайта. На одной странице будет благоухать розарий,
а на другой — сверкать яркими весенними красками примула. Или, может,
цветок домашней фиалки-сенполии послужит вашему сайту в качестве меню -
по лепестку на пункт?
Идея третья — логотип. В данном случае под логотипом я подразумеваю
квинтэссенцию содержания, выраженную графически. Например, вы — со-
трудник фирмы, и на своем сайте вы хотели бы отразить именно эту часть
своей жизни, К тому же фирма имеет логотип, когда-то разработанный про-
фессиональным дизайнером. Тогда можно построить весь дизайн, отталкива-
ясь именно от логотипа. Например, использовать его отдельные элементы,
цвета, соблюдать при оформлении те же пропорции, радиусы скруглений и
так далее. Впрочем, логотипы есть не только у фирм. Может быть, дизайнер
делал вам визитку? Или художник нарисовал парой штрихов удачный шарж?
Любую удачную миниатюру, имеющую отношение к вашей жизни, можно
использовать в качестве логотипа.
Макет
Макет многие дизайнеры выделяют в отдельный этап работ. Однако я так не
поступаю намеренно — для создания Flash-сайта макет не играет такой принци-
пиальной роли.
Макетирование — создание таблицы, отвечающей ряду требований. Во-первых,
она должна содержать пространство для каждого возможного элемента на стра-
нице. Иными словами, создавая таблицу, вы должны предусмотреть место для
каждого элемента, который вы захотите на данной странице поместить, вне за-
висимости от того, будет ли он реально присутствовать на каждой странице,
сверстанной по этому макету, или только на некоторых. Во-вторых, в создавае-
мой таблице должно быть минимальное количество ячеек, которое будет удов-
летворять предыдущему требованию. Это позволит вам легче управлять табли-
цей (то есть упростит процесс верстки), и, кроме того, вы несколько сократите
объем кода, уменьшая тем самым нагрузку на сервер и время, необходимое для
загрузки страницы. Вы можете жестко задавать ширину столбцов и объединять
любые рядом стоящие ячейки. В-третьих, таблица должна быть достаточно гиб-
кой, чтобы в нее можно было поместить широкий диапазон непредусмотренных
вначале элементов.
Особенности WWW и языка HTML приводят к тому, что вид вашей страницы
зависит от настроек конкретного компьютера пользователя. В связи с этим ваше
творчество ограничено рядом неписанных стандартов. Что же касается макета,
то здесь вы ограничены экранным разрешением (то есть количеством точек,
1
Рекомендую посмотреть сайт Alterworld (www.avestadesign.ru). Это прекрасная реализация мира
для истинно увлеченных, созданная на Flash.
которое способен отображать монитор). Вернее будет сказать так: если вы не хо-
тите доставить пользователям неудобство (а горизонтальная прокрутка экрана -
это реальное неудобство), то ограничивайтесь экранным разрешением. Домини-
рующее сейчас разрешение — 800x600 точек, хотя с постепенным переходом на
17-дюймовые мониторы оно возрастает до 1024x768.
Создание макета — это весьма творческий процесс. Поэтому предложить здесь
какую-либо жесткую схему работы очень сложно. Но все же попробуем.
1. Вначале надо составить список, в который должны попасть рекламные банне-
ры, кнопки и элементы навигации — всё, до самых последних мелочей, что
должно присутствовать на страницах нового сайта. Если элемент имеет фик-
сированные размеры, это надо пометить.
2. После этого надо решить, сколько потоков информации будет размещено на
каждой странице. Обычно их два: основной текст справа и навигационное
меню слева.
3. Далее следует нарисовать примерное расположение элементов на странице,
обязательно включая элементы, которые имеют фиксированные размеры.
Важно определить ширину каждой из колонок для комфортного размещения
в них необходимых материалов. Например, если вы должны разместить боль-
шой массив текста, вряд ли стоит это делать в узкой колонке шириной
100-150 пикселов, лучше выделить более широкое поле — 350 и более пиксе-
лов.
4. Затем необходимо расписать на макете размеры элементов (пока только фик-
сированные). В реальности таблица ограничивается фиксированными разме-
рами баннеров и кнопок: вам приходится либо отказываться от их использо-
вания, либо строить свой макет на их основе. Следует иметь в виду и другие
заимствованные элементы сайта: опросы, счетчики, поисковые окна и т. д.
Таким образом, задача создания макета напоминает решение головоломки: как
разместить все эти элементы на ограниченном поле страницы так, чтобы полу-
ченный результат выглядел гармонично и аккуратно.
Закончив с принципиальной схемой, надо нарисовать макет на бумаге уже с по-
мощью линейки и карандаша, приводя все к реальному масштабу и размечая
размеры элементов (на тетрадный лист в клетку таблица разместится в масшта-
бе 20 точек на клетку). Расчертив колонки, отображаем на макете материал в
каждом информационном потоке: стандартные элементы, элементы навигации,
колонтитульные элементы и пр.
Наконец, по полученному макету вы должны определить сетку таблицы, кото-
рая будет составлять основу HTML-страницы. Основная задача на этом этапе -
создать такую таблицу, в которой можно разместить все указанные в макете
элементы. Помните, что можно объединять соседние ячейки и разбивать ячейку
новой таблицей.
Цветовая гамма
Такая простая на первый взгляд проблема, как выбор цветов, может стать нераз-
решимой, особенно если с удачной идеей не сложилось. Почему? Потому что
Дизайн 193
придется выбирать из 16 миллионов цветов 3-4 подходящих друг к другу. Кро-

ме графических изображений вам предстоит настроить системные цвета: цвет
текста, фона и ссылок.
СОВЕТ
Не изменяйте «системные» цвета частично, так как пользователь может изменять настрой-
ки браузера по своему усмотрению. В результате текст или ссылки могут быть просто не
видны на заданном фоне страницы. Не говоря уж о том, что всякие попытки воплотить ка-
кой-либо дизайн потерпят полное фиаско.
Можно предложить простой и эффективный способ получения цветовой гаммы.

Ее можно позаимствовать. И не обязательно с понравившегося вам сайта (это
уже будет плагиатом, а вы показываете себя), а, например, с картины какого-ни-
будь классика. Впрочем, подойдет и фотография природы или удачного деяния
рук человеческих — дворца или храма. (Правда, тут стоит отметить, что надо
выбирать фотографию, хорошо воспроизводящую естественные цвета.) То есть
вам понадобится изображение, над которым поработал профессиональный ху-
дожник или природа, которая, как известно, лучший специалист в этом деле.
После того как вы нашли фотографию или картину, выберите на ней 3-4 цвета.
Попробуйте несколько наборов цветов с «палитры». К любому цвету можно до-
бавить серый оттенок, то есть равные количества компонентов RGB или яр-
кость (Brightness в схеме HSB), так как белый, черный и все промежуточные се-
рые тона хорошо сочетаются с любым цветом.
Если вы решили выбирать цвета самостоятельно, без помощи классиков, то
можно добавить, что не рекомендуется выбирать «ядовитые» цвета — они режут
глаз и не дают сосредоточиться. Эти цвета получаются при большом значении
контрастности (Saturation в схеме HSB).
Для получения численных значений вам надо открыть файл с фотографией
в Photoshop и, выбрав инструмент Eyedropper (Пипетка), щелкнуть на нужной
области. Палитра цветов отразит требуемые значения.
Выбор шрифтов
Шрифт является одним из основных элементов web-дизайна. Ни в коем случае
не стоит доверять выбор шрифта воле случая. Особых правил на счет хорошей
сочетаемости шрифтов нет (речь идет о шрифтах текста, заголовков, подписей),
но можно привести несколько общих советов.
• Не стоит использовать много типов шрифтов на одной странице, хватит
двух-трех.
• Обычно используются контрастные сочетания шрифтов: один — с засечками,
другой — без; один жирный — другой тонкий и т. д. Пример — оформление
данной книги: заголовки выполнены полужирным шрифтом без засечек, а ос-
новной текст — простым с засечками.
• Для выделения элементов основного текста лучше использовать полужирное
или курсивное начертание того же шрифта, но не переусердствуйте, ведь на
странице будут еще выделены ссылки. В целом старайтесь избегать исполь-
зования для основного текста каких бы то ни было эффектов.
7 Зак. 96
Если основной текст — русский, то для него лучше использовать шрифт с за-
сечками (для проверки откройте практически любую книгу). Однако если
основной текст набран латиницей, то будет смотреться и шрифт типа Arial.
СОВЕТ
Использование различных шрифтов и их размеров — один из основных приемов оформле-
ния текста. Уже одним этим можно сделать страничку красивой.
Стиль
Главную страницу, как любимое детище, всячески стараются приукрасить, на-
прочь забывая о существовании страниц второго уровня. Так не доллсно быть.
На всех страницах сайта должен чувствоваться единый стиль. Совершенно не
обязательно, чтобы страницы походили друг на друга, как близнецы-братья, но
какие-то правила из перечисленных далее лучше соблюдать.
• Используйте общие для всех страничек цвета.
• Используйте одинаковые шрифты и размеры шрифтов.
• Используйте одинаковые или похожие элементы оформления.
• Хорошо, если картинки (фотографии, рисунки) будут выглядеть естествен-
ной частью всего остального. Этого можно достичь, введя рамку, повторяю-
щую какой-либо элемент оформления.
СОВЕТ
Использование одинаковых элементов оформления имеет и еще один плюс. Первый раз
наталкиваясь на рисунок, браузер загружает его и сохраняет в кэше на локальном диске.
Когда браузер снова встречает этот же рисунок на другой странице, он уже не скачивает
его из Интернета, а находит в кэше. В результате время загрузки значительно уменьшается.
• Не увлекайтесь эффектами типа тени, свечения. Все хорошо к месту и в меру.

Разумеется, ради хорошей идеи любое правило может быть нарушено. Как уже
обсуждалось, если вы решили оформить каждую страницу в своей цветовой
гамме, то вам надо попытаться хотя бы сохранить соотношения между цветами
на странице и существенно строже выполнить единство стиля в других элемен-
тах.
Безусловно, важную роль в современном web-дизайне играют каскадные таблицы стилей
(Cascading Style Sheets, CSS). Они вам будут просто необходимы для создания и поддержки
больших сайтов. Однако для персонального сайта усилия, затраченные на их изучение, не
окупят себя. Если же вы все-таки заинтересовались применением таблиц стилей, обрати-
тесь, например, к книге «Основы веб-мастерства» (см. список литературы).
Фреймы
Бродя по Интернету, вы наверняка не раз видели странички, разбитые на не-
сколько частей. Эти части и называются фреймами. Программно разбиение окна
браузера на фреймы реализуется так.
Дизайн 195
1. Сначала создается HTML-файл (обычно это первая страница сервера -

index.htm), в котором задаются размеры и количество фреймов, а также имена
файлов, им соответствующих, и некоторые атрибуты для каждого фрейма.
2. После этого создаются отдельные HTML-страницы для каждого фрейма.
Попробуем создать HTML-файл, реализующий разбиение экрана на две части.
Для этого нам понадобится два HTML-файла с именами homepage.html и
menu.html. Главный файл назовем, как обычно, index.html. Вот как он должен вы-
глядеть:
<НТМ!_>
<TITLE>Haзвание странички</Т1Т1_Е>
<FRAMESET cols="100, *">
<FRAME src="menu.html" name="framel">
<FRAME sre-"homepage.html" name="frame2">
</FRAMESET>
</HTML>
В теге <FRAMESET> задается количество рядов (ROWS) или столбцов (COLS), а также
их размеры и расположение. Существует три способа задания их размера:
• по пикселам — просто напишите высоту или ширину в пикселах;
• в процентах — напишите, сколько процентов от окна браузера вы хотите от-
дать фрейму, и после цифр поставьте знак процента (%). Также позаботьтесь
о том, чтобы все значения в сумме составляли 100%;
• с помощью символа «*» — все оставшееся место в окне обозначается знаком
«*». Например, вы можете написать: 20%, 20%, 60% или 20%, 20%, * - ни-
какой разницы не будет.
В нашем случае (<FRAMESET cols="100, *">) мы разделяем окно на два столбца:
левый — шириной 100 пикселов, правый — шириной во весь оставшийся экран.
В теге <FRAMESET> также можно задать толщину разграничительной линии и
окаймляющей рамки атрибутами FRAMEBORDER и BORDER.
В теге <FRAME> задаются атрибуты для каждого фрейма:
<FRAME src="menu.html" name="framel">
<FRAME src="homepage.html" name="frame2">
Атрибут src задает имя файла, который сопоставлен этому фрейму, в нашем
случае имена файлов — menu.html и homepage.html.
Атрибут name задает имя данного фрейма, в нашем случае — framel и frame2. Имя
необходимо для того, чтобы потом сослаться на фрейм. Например, мы хотим,
чтобы при щелчке на ссылке во фрейме с файлом menu.htm его содержимое по-
казывалось во фрейме, содержащем файл homepage.htm. Для этого нам необхо-
димо записать ссылку так:
<А href="file.htm" target="frame2">f11e</A>
Если же вы хотите, чтобы файл загрузился в главном окне браузера, напишите
в ссылке TARGET="_top".
Также в этом теге можно задать величину границы фрейма. Это делается с по-
мощью атрибутов MARGINWIDTH и MARGINHEIGHT.
Об использовании фреймов
Большинство писательской братии Сети, высказывая свое мнение о web-дизай-
не, выражают свое более или менее отрицательное отношение к фреймам. Одна-
ко все больше и больше страниц Всемирной паутины содержат фреймы, часто -
в единственном варианте: слева — фрейм с навигационной панелью, справа -
с содержанием выбранной ссылки. Когда говорят об удобстве таких фреймов,
имеют в виду, что не требуется перезагрузка навигационного фрейма, что, по
идее, должно увеличивать скорость загрузки страницы. Однако такую же нави-
гационную панель можно создать и без использования фреймов. Изображения,
содержащиеся на ней, при первой загрузке попадут в кэш браузера и потом бу-
дут быстро подгружаться с локального диска. Единственное, в чем фрейм будет
иметь преимущество, — это создание системы полноценных раскрывающихся
меню. Однако реализация таких меню пока оставляет желать лучшего из-за раз-
личий в работе браузеров.
За что же профессионалы не любят фреймы? Наиболее явная и основная при-
чина — из-за сложности добиться их корректного показа в различных браузерах
и при различных разрешениях экрана. Как бы вы ни старались, у кого-нибудь
из посетителей посреди окна при просмотре вашей страницы появятся полосы
прокрутки, которые испортят практически любой дизайн. Если же запретить
выведение полос прокрутки, тогда придется сделать размер фрейма очень неболь-
шим. Он будет ограничен минимальным возможным окном браузера у пользо-
вателя, так как если фрейм будет содержать что-то еще, то добраться до этого
уже будет нельзя. Если задать размер фрейма в процентах, то при разных разре-
шениях будут получаться совершенно различные картины, причем не всегда
приемлемого качества. Задавать размер жестко в пикселах — тоже не выход, по-
скольку Netscape Communicator и Internet Explorer часто понимают эти значе-
ния несколько по-разному.
Другая проблема связана с поисковыми системами. Хотя сейчас большинство
роботов умеют анализировать фреймы и индексировать соответствующие стра-
ницы, при выдаче результатов поиска откроется не вся система фреймов, а един-
ственная страница, обычно лишенная какой-либо навигации.
Если на вашем сайте фреймы действительно необходимы и вы можете добиться,
чтобы они правильно показывались без полос прокрутки, — создавайте фреймы,
никаких таинственных метафизических запретов на их использование нет.
Браузеры, вовсе не подозревающие о фреймах, встречаются крайне редко, хотя
и о них полезно подумать.

Это занятие — первое в серии своеобразных лекций. На нем мы познакомились
с теоретическими основами дизайна и некоторыми практическими выводами из
них.
Сегодня мы узнали, с какого «угла» подойти к созданию сайта, а именно:
• как спланировать сайт и с чего начать работу над ним;
• что такое стиль и почему важно его выдерживать;
• как выбрать цветовую палитру;

• как подобрать шрифты;
• как разбить страницу на фреймы;
• что такое хороший дизайн.
Chao! На следующей лекции нас ждут завершающие этапы работы над сай-
том — разработка структуры, верстка и тестирование.
Занятие 9
Один раз отрежь

Я осенью в доме один.
Что ж, буду ягоды собирать,
Плоды собирать с ветвей.
Итак, вас посетила муза web-дизайна. (Интересно, у нее уже есть имя?) Вам
пришла потрясающая идея, вокруг которой вы собираетесь развернуть действие
на сайте: его дизайн и содержание. Дело осталось за малым: воплотить в жизнь
графические и текстовые элементы, сверстать все страницы и связать их в еди-
ную структуру, протестировать сайт и скопировать его на сервер, на всеобщий
доступ. На сегодняшнем занятии речь в основном пойдет о технических момен-
тах создания сайта. Но сколько бы скучны они ни были, в итоге именно от них
зависит, выглядит ли сайт, как хочется, правильно ли работают задуманные
ссылки, действуют ли сценарии, как положено и т. д. Как и в любом другом
деле, конечный результат прежде всего зависит от исполнения. В занятии 9 мы
рассмотрим следующие темы:
• верстка и публикация сайта в Сети;
• планирование структуры сайта и навигации по его страницам;
• негласный интерфейс HTML-страниц;
• основные кодировки русских букв;
• тестирование сценариев JavaScript в различных браузерах.
Мы также узнаем, какие параметры посетителя для вас важны и как их опреде-
лить или предсказать.
Структура сайта
Даже если вы не сильны в искусственном интеллекте и архитектуре знаний,
а структурирование информации для вас — темный лес, структуру собственного
1
В переподе В. Марковой.
сайта вам придется строить самому. Я считаю, что в большинстве случаев при
написании достаточно сложных литературных и гипертекстовых трудов лучше
двигаться в «прямом» направлении: сначала проектировать основную структу-
ру, на которую по мере готовности впоследствии нанизывать содержание. Чем
лучше вначале вы продумаете структуру, тем меньше вам придется вносить ис-
правлений в уже почти готовый сайт.
Подозреваю, что распространение программных продуктов, в которых удобно
рисовать логические структуры, дальше все того же искусственного интеллекта
не пошло. Поэтому я предлагаю вам взять чистый лист бумаги и на нем сделать
набросок основных разделов вашего сайта (пункты меню верхнего уровня).
Если это персональный сайт, то у вас получится примерно следующее.
1. О себе, любимом.
2. Друзья.
3. Семья.
4. Работа.
5. Хобби.
6. Фотоальбом.
Очевидно, что порядок может варьироваться, а некоторые разделы — сливаться:
в конце концов, это личное дело каждого, иметь друзей или нет. Возможно, что
кроме пункта «Хобби» на листке ничего не появится, тогда имеет смысл выне-
сти в меню верхнего уровня ваши различные увлечения или построить структу-
ру на временной шкале. После верхнего уровня попытайтесь наметить второй,
а может быть, и третий уровень. При работе над структурой сайта стоит учесть
несколько правил.
• Используйте иерархическое построение меню. В качестве примера можно ис-
пользовать файловую систему. Линейная структура (когда каждая страница
ссылается на предыдущую и следующую) допустима лишь в очень редких
случаях, например при публикации литературного творчества, которое луч-
ше читать подряд. Хотя даже в этом случае лучше предоставить альтерна-
тиву — вдруг кто-то захочет вернуться к уже прочитанному или заглянуть
страниц этак на 10 или 30 вперед.
• Количество пунктов в меню и подменю не должно превышать семи. Большее
число человек подсознательно отторгает. Если все-таки их получается больше,
попробуйте перестроить структуру: объедините пункты или разбейте раздел
на верхнем уровне. И, конечно, не стоит делать меню из одного пункта.
• Число уровней не должно превышать трех. Иначе бедному посетителю при-
3
дется очень глубоко копать! По-моему, 343 страницы (7 ) — вполне доста-
точный объем для личного сайта, а на самом деле хватит и 20-50.
• Разделы одного уровня должны нести примерно равный объем информации.
Это правило можно использовать как проверку на правильность составления
структуры.
• Учитесь мыслить объемно. В отличие от оглавления книги, структура гипер-
текста может быть достаточно сложной и пересекающейся. Например, логич-
но среди текста давать ссылки на фотографии, расположенные в фотоальбо-
ме. Помните, что структура сайта не ограничена панелью с меню.
200 Занятие 9. Один раз отрежь
Публикация любых текстов в Сети имеет свою специфику. Книги, журналы и

буклеты просматривают линейно — сверху вниз и слева направо — по страни-
цам. Соответственно, текст последовательно излагает всю информацию. Для
web-страниц более логичным является способ структурированного представле-
ния информации. При таком варианте разделы верхнего уровня содержат более
общую информацию, а подробности вынесены на отдельные страницы, переход
к которым осуществляется по ссылкам. Ссылка может быть расположена как в
конце страницы, и тогда она будет служить указателем на следующую странич-
ку (это аналогично линейному просмотру информации), так и непосредственно
внутри текста, указывая посетителю способ узнать о данном вопросе подробнее.
В чем преимущества именно такого способа представления информации? Пер-
вое преимущество состоит в том, что посетитель читает лишь то, что ему необ-
ходимо. Некоторым достаточно краткого рассказа, чтобы понять, что тут им де-
лать нечего, в то время как другие предпочтут дочитать все до конца. Причем
читатель волен выбирать, по какому пути идти, чтобы получить лишь ту инфор-
мацию, которая ему действительно интересна. Второе преимущество является
следствием первого: небольшие странички очень быстро загружаются, а для
многих это немаловажно. Но это относится исключительно к чтению информа-
ции из Интернета. Если же предполагается, что текст будут распечатывать, воз-
можно, стоит подумать о создании специальных «страниц для печати», которые
должны содержать полные тексты статей.
Итак, вы определились со структурой будущего сайта. Не бросайтесь в порыве
энтузиазма к HTML-редактору. Остановитесь, отойдите от компьютера, поды-
шите свежим воздухом и не возвращайтесь к работе над сайтом до тех пор, пока
у вас в голове хотя бы смутно не возникнет образ того, как он будет выглядеть.
Еще лучше взять новый лист бумаги и сделать набросок расположения отдель-
ных элементов — текста, картинок, меню, кнопок и т. д., то есть обдумайте ком-
позицию сайта. Многие web-дизайнеры предпочитают использовать для созда-
ния предварительного макета растровые или векторные редакторы, которые
позволяют свободно манипулировать объектами будущей страницы. Результа-
том этого этапа должен быть готовый эскиз.
Следующий вопрос, тесно связанный со структурой и имеющий огромное зна-
чение, — как путешествовать по вашему сайту.
Навигация
Скорее всего, вы намерены преодолеть рубеж в одну страничку и сделать пол-
ноценный сайт. Тут скрывается один из сложных вопросов web-дизайна — на-
вигация. Человек, оказавшийся на вашем сайте, не должен чувствовать себя, как
перед входом в лабиринт. Навигация должна быть сделана так, чтобы человек
все время представлял, где он находится сейчас и куда и как он может попасть.
В идеале он вообще не должен задумываться над этими вопросами. Но для это-
го много думать придется вам. Опять же, неплохо набросать схему навигации по
сайту на бумаге. Много внимания следует уделить тому, как будут выглядеть
сами ссылки, где их лучше сделать текстовыми, а где — графическими. Посмот-
рите, как это сделано у других: стандартными решениями являются верхняя
(горизонтальная) или боковая (левая) панели управления (меню).
Основной принцип навигации — пользователь должен найти то, что хочет, и как
можно быстрее и проще. Помните, что посетитель — тоже человек. И ему проще
уйти с сайта, чем пытаться понять, как он устроен. Структура и интерфейс сайта
должны быть достаточно понятными, а навигация — простой и удобной. Можно
попросить кого-нибудь протестировать ваш сайт именно на удобство путешест-
вий. Вы как автор никогда не сможете сами хорошо оценить то, что американцы
называют «usability» — удобство в использовании.
Представим себе маленький сайт из восьми страниц. На каждую из них ведут
ссылки с главной страницы, а внутри этих страниц стоят только ссылки обратно
на центральную. Чтобы попасть с одной страницы на другую, посетитель дол-
жен вначале вернуться на основную страницу, то есть при просмотре всех стра-
ниц он окажется на главной как минимум семь раз. Согласитесь, смотреть семь
раз одно и то же не слишком интересно. Выхода два: первый — сделать из каж-
дой страницы ссылки на все остальные в виде отдельной навигационной пане-
ли; второй — сделать дополнительно на странице ссылки на предыдущий и по-
следующий разделы. Первый способ подходит, если сайт небольшой, второй -
если его структура уже не умещается на панели (конечно, если вы не используе-
те фреймы с полосой прокрутки).
Трехпанельный макет
Зайдите на случайно выбранную страницу Web. Где на ней находится панель
навигации? А логотип, реклама, основное содержание? Даже если вы оказывае-
тесь на сайте в первый раз, вы без труда найдете большинство навигационных
элементов. Почему? Потому что все страницы Сети подчиняются одним и тем
же законам, которые достаточно жестко определяют структуру страницы.
Логотип сайта
Навигация Основное содержание
Рис. 9.1. Трехпанельный макет страницы
Один из самых распространенных шаблонов — Трехпанельный (рис. 9.1). Раз-

ные его части могут выполнять разные функции, но общая структура остается
одинаковой. Давайте кратко опишем, какие же части должны присутствовать на
странице и где они должны быть расположены.
• Логотип — это информация, по которой посетитель сможет легко догадаться,
где он находится. Планируя навигацию, помните, что web-серфингист не
обязан попадать на сайт с «парадного входа». Как правило, ваши посетители
придут к вам через ссылку поисковой системы или по закладке, посланной

коллегой. Таким образом, на каждой странице сайта должна присутствовать
информация, сообщающая пользователю, где он находится. Это может быть
либо логотип сайта — удачная картинка, размещенная на каждой странице,
либо просто текстовая информация, вводящая в курс дела. Логотип, как пра-
вило, размещается в верхней части страницы, реже его можно увидеть на ле-
вой стороне в виде вертикального столбца-картинки.
Навигационные элементы. Разные сайты могут использовать разные системы
навигации. Это может быть навигационная панель слева или сверху, система
закладок и/или ссылок в верхней части или слева, это могут быть просто не-
сколько ссылок вверху и внизу страницы. Все зависит от положения данной
страницы в иерархии и общей структуре сайта. Если речь идет о странице,
содержащей конкретную информацию, то совершенно неразумно дублировать
на ней всю панель навигации — она займет место, необходимое для другого.
Если логотип указывает на общую принадлежность страницы, то навигаци-
онные элементы должны содержать информацию о том, как пользователь по-
пал бы на данную страницу, если бы путешествовал с главной страницы сай-
та. Пример такого элемента — ссылки при поиске в каталоге. Щелкнув на
одной из них, вы сможете попасть на любую пройденную ступень иерархиче-
ской лестницы и выбрать соседнюю категорию. Конечно, если сайт не слиш-
ком разветвленный, это является роскошью, но для любого, даже самого ма-
ленького каталога, такая навигация — жизненная необходимость.
Еще одно правило навигации — ее элементы должны быть узнаваемы. Еще
не подводя к картинке или ссылке мышь, пользователь должен догадаться,
что это ссылка. Поэтому недопустимо использовать обманные элементы ди-
зайна, например лишние закладки или пункты графического меню, добавлен-
ные для заполнения свободного места или для красивого рисунка. Дурным
тоном считается и использование стандартных элементов интерфейса про-
грамм, таких как флажки, кнопки или переключатели, в рекламных банне-
рах. Как и в другой жизненной ситуации, пользователь опирается на свой про-
шлый опыт, благодаря которому он знает, что делают те или иные элементы
интерфейса. Встретив подобный элемент на ваших страницах, он надеется
получить ожидаемый результат. Но как только вы рассеете его уверенность в
непоколебимости прошлого опыта хоть каким-то интуитивно не очевидным
элементом дизайна, он не преминет покинуть сайт как можно скорее.
Одним из главных, но часто упускаемых из виду навигационных элементов, являются URL-
адреса ваших страниц. Если вы создадите простую и понятную физическую структуру
HTML-файлов, то уже только по информации в строке адреса пользователь сможет понять,
где он находится и куда он сможет пойти, убрав, например, последний элемент адреса.
В частности, в соответствии с этим правилом необходимо давать файлам «говорящие»
имена, а папки называть так же, как соответствующую иерархическую страницу. Напри-
мер, если адрес соответствует конкретной странице фотоальбома www.my_site.ru/photo-
album/rny_photo/photol.html, то адрес www.my_site.ru/photoalbum/my_photo.html должен
соответствовать странице со ссылками на фотографии автора, a www.my_site.ru/
photoalbum.html — главной странице фотоальбома. Очевидно, что адрес www.my_site.ru/
9843986348951.html ничем не сможет помочь ни вам, ни посетителю сайта.
• Основное содержание располагается, как правило, в правой части страницы.

Если пользователя заинтересовала данная информация, он воспользуется по-
лосами прокрутки, чтобы увидеть ее всю до конца.
• Реклама. Если вы просматривали хотя бы одну web-страницу при различных
разрешениях монитора, то вы знаете, что единственным местом на странице,
которое отображается всегда, является левый верхний угол. Это «красный
угол» страницы, и здесь необходимо размещать самую важную информацию,
например логотип. Следующей по важности является верхняя полоса -
именно на ней большинство серверов располагает рекламу. Еще одна рек-
ламная полоса находится внизу; как правило, это баннеры фирм, предостав-
ляющих какие-то услуги сайту.
Поиск
Некоторые хостеры (например, Яндекс) предоставляют в качестве дополнительной
бесплатной услуги размещение на сайте формы для поиска. Это может оказать-
ся очень важным дополнением к системе навигации, особенно если у вас иерар-
хически сложный сайт. В качестве примера можно привести следующую ситуа-
цию. Вы обожаете собак (или кошек) и создали сайт, всецело посвященный
вашим любимцам. На страницах сайта вы подробно описываете все известные
вам породы, клички, масти и пр., что и указано на главной странице сайта. По-
сетитель радостно потирает руки — наконец-то он все узнает о породе своего
домашнего питомца. Но... Как разобраться во множестве информации на сайте?
В какой раздел необходимо пойти, чтоб найти нужную породу? Посетитель мо-
жет не знать, сторож его собака или пастух. А отдельную страницу с алфавитным
списком пород вы решили не делать, а если и сделали, то совсем не обязательно
назвали породу так, как сохранила своенравная память посетителя. В таких слу-
чаях незаменимым помощником станет поисковая форма. Даже если у породы
два или три ходовых названия, ее можно будет найти без труда.
Кодировка
Если вы будете создавать ваш сайт на русском языке, перед вами может встать
проблема выбора кодировки русских букв. Обычно за вас ее решает хостер, ука-
зав вам свои условия, но все равно как пользователю Сети вам будет полезно
знать, что существуют следующие стандарты:
• СР1251 (используется в Windows);
• KOI (Unix);
• MAC (Macintosh);
• ALT (DOS, альтернативная);
• ISO;
• LAT или TRANSLIT (замена русских букв сходными по звучанию англий-
скими).
Наиболее распространенной является СР1251, поэтому правильно будет сде-
лать так, чтобы по умолчанию страничка показывалась именно в этой коди-
ровке. Однако, в отличие от пользователей-клиентов, на большинстве серверов
установлены операционные системы типа UNIX, для которых родной является

кодировка КОШ, и страницы на сервере хранятся именно в ней.
Удобно, если на всех страницах есть возможность выбрать кодировку. Как уже
говорилось, не все будут заходить к вам с «парадного входа»: очень часто посе-
тители ставят закладку на конкретную интересующую их страницу и в следую-
щий раз попадают туда, минуя главную. Как правило, сервер настроен таким об-
разом, что в зависимости от указанного номера порта (цифры после двоеточия,
например: www.enlight.ru:8801/...) он переведет вашу страницу в нужную коди-
ровку.
С точки зрения навигации, есть два способа выбора кодировки;
• рисуются кнопки для переключения в каждую из необходимых кодировок
(например, WIN, MAC, KOI, LAT);
• рисуется только одна кнопка, например Выбор кодировки, при нажатии на ко-
торую вы попадаете на отдельную страницу, где можете выбрать кодировку.
Если вы воспользовались услугами бесплатного хостера, тогда проблема коди-
ровки перед вами не встанет — все решит сервер.
Идеология документа
При создании HTML-документов прежде всего обращайте внимание на струк-
туру текста. Если вы делаете заголовок, то оформите его тегом <Нх>, а не просто
выделите его жирным шрифтом. Правильное стилевое и структурное оформле-
ние — основа подготовки любых документов.
Почему это так важно? Во-первых, это удобно. Когда вы освоите механизм CSS
(таблиц стилей), вы без труда сможете изменить вид всех заголовков, заменив
только одну строку текста в описании данного стиля.
Во-вторых, если внимательно прочтете приложение 2, то наверняка заметите, что
разработчики HTML очень много уделяют внимания нестандартным устройст-
вам вывода. К сожалению, при речевом вводе текста нельзя сказать слово кур-
сивом или полужирным. Оформление практически исчезает, а вот структура
остается. Перед началом нового раздела или параграфа можно сделать паузу,
а цитату прочитать другим голосом. Поэтому старайтесь делать структуриро-
ванные тексты, и не только в HTML, но и, например, в Word.
Верстка
Не имеет значения, в каком редакторе вы начнете верстать свой сайт. Выбе-
рите любой, который у вас есть под рукой, и попробуйте сверстать несколько
страниц. Посмотрите на результат в браузере и на его код в Блокноте. Навер-
няка вы обнаружите там много лишнего и непонятного. Удалите и еще раз
посмотрите на результат. Скоро вы поймете основные «проблемы» исполь-
зуемого для верстки редактора и научитесь их преодолевать. А пока — не-
сколько советов.
Верстка 205
Советы по верстке
Для того чтобы ваш сайт выглядел предсказуемо, лучше всего использовать гиб-
кие страницы, содержащие табличные структуры, с указанием процентов от раз-
мера окна. Такой сайт мы обсуждали на занятии 5 (www.dimvovich.narod.ru). С по-
мощью подобной техники можно сделать раздвижными и текст, и графические
элементы.
Вместо единой таблицы можно использовать несколько таблиц, выровненных
по левому краю. В таком случае они будут загружаться по очереди, и посети-
тель вначале увидит логотип в верхней части, потом — панель слева, а потом
догрузится и основное содержание. Сравните листинги 9.1 и 9.2, в которых при-
ведены два варианта оформления макета с помощью таблиц.
Листинг 9.1. Трехпанельный макет, заданный с помощью одной таблицы
<TABLE>
<TR>
<TD colspan=2>
Логотип и реклама
</TD>
</TR>
<TR>
<TD>
Панель навигации
</TD>
<TD>
Основное содержимое страницы
</TD>
</TR>
</TABLE>
Листинг 9.2. Трехпанельный макет, заданный с помощью двух таблиц

<TABLE>
<TR>
<TD>
Логотип и реклама
</то>
</TR>
</TABLE>
<TABLE align=1eft<@062>
<TR>
<TD>
Панель навигации
</TD>
</TR>
</TABLE>
<TABLE align=left<@062>
<TR>
<TD>
Основное содержимое страницы
</TD>
</TR>
</TABLE>
Необходимо отметить, что при создании файлов следует придерживаться неко-

торых правил. Большинство серверов работает под операционной системой UNIX,
которая чувствительна к регистру файлов, то есть файлы img.gif и img.GIF для
UNIX — разные. Проще всего создавать все файлы с именами в нижнем регист-
ре, так как некоторые программы для Windows могут искажать имена файлов.
Например, если загружать файл Img.gif при помощи программы CuteFTP, то по-
сле загрузки он превращается в IMG.GIF.
Старайтесь использовать свою графику. Если не учитывать этические вопросы,
это имеет одно большое преимущество — вы получаете то, что вам надо, а не то,
что удалось найти. Продуманный сайт должен иметь графику, выполненную в
одном стиле и подчиненную одной общей идее, что просто невозможно сделать,
используя только чужие картинки. Это не значит, что абсолютно все надо рисо-
вать самому: сейчас достаточное количество графических ресурсов можно найти
в свободном или почти свободном доступе.
Когда вставляете в текст ссылку, выделяйте только одно-два ключевых слова,
несущих основную смысловую нагрузку. Старайтесь не приписывать к тексту
слова «кликните здесь». Если ничего лучшего не придумать, напишите название
или адрес страницы и выделите его как гиперссылку.
Старайтесь указывать размер изображения в атрибуте alt тега <IMG> (например,
аН="Здесь моя фотография (100 Кбайт)") или в тексте ссылки, даже если рисунок
меньше 10 Кбайт.
По умолчанию браузер начинает показывать содержимое страницы (кроме фо-
нового рисунка), отступив от края окна некоторое число пикселов. Для того что-
бы заставить его отрисовывать изображение с самого края, вставьте в тег <BODY>
следующие атрибуты:
<BODY marginwidth=0 marginheight=0 leftmargin=0 topmargin=0>
Первые два атрибута написаны для Netscape Communicator, а вторые два — для
Internet Explorer. Так можно поступить в Netscape Communicator, начиная с вер-
сии 4, а в Internet Explorer — начиная с версии 3.
Можно легко сделать так, чтобы большая картинка мгновенно появлялась при
открытии страницы. Для этого ее надо загрузить в кэш во время просмотра лю-
бой предыдущей страницы, вставив в самом конце ее основной части (перед за-
крывающим тегом </BODY>) строку:
<IMG src="image.jpg" height=l width=l>
При этом изображение загружается, не мешая показу самой странички, но оста-
ется невидимым. Этот же прием можно использовать и для других целей, на-
пример если вы хотите разместить на странице счетчик, но не хотите, чтобы по-
сетители его видели.
Тестирование — неотъемлемая часть создания сайта, занимающая обычно очень
много рабочего времени. Основная проблема заключается в том, что ни один
браузер пока не поддерживает стандарта HTML в полной мере и вам придется
подстраиваться под его работу. На момент написания книги по данным сервера

TheCounter.com основным браузером (90 %) является Internet Explorer, поэтому
при разработке сайта основное внимание надо уделить ему и его последним вер-
сиям (начиная с четвертой).
Один из главных параметров сайта — его размер в килобайтах и время загрузки.
Если вы создали сайт и сомневаетесь, не слишком ли он «тяжел на подъем», вос-
пользуйтесь услугами сервера Web Site Garage (www.web-site-garage.com). Кроме
скорости загрузки своего сайта и аналогов, которые вы выбрали для сравнения,
вы можете найти здесь много другой полезной информации о своем виртуаль-
ном «я».
СОВЕТ
Для отладки фильма может пригодиться действие Trace. Оно поможет вам следить за из-
менением параметров во время исполнения фильма. Его синтаксис: trace (expression);.
Браузеры
Существует довольно много браузеров, выпускаемых разными фирмами, напри-
мер: Netscape Communicator (он же — Netscape Navigator или просто Netscape),
Microsoft Internet Explorer, Opera, Arachne, Lynx, Web Explorer и другие. Если
вы желаете ознакомиться с полным списком браузеров, обратитесь на сайт
Yahoo!. В разделе Home > Computers and Internet > Software > Internet > World Wide
Web > Browsers вы найдете список из 148 элементов. Далее учтите, что у каждого
браузера есть несколько версий и подверсий, и вам станет ясно, что тестирова-
ние сайта для всех вряд ли реально осуществимо.
Однако не все потеряно. В основном посетители Интернета едины в своих пред-
почтениях. Проведав другую интересную страницу, на этот раз на сервере The
Counter, вы увидите, что большинство пользователей предпочитают Microsoft
Internet Explorer 6, 5 и 4 версий и 5 % приходится на Netscape Communicator 6 и 4
и более ранние версии (рис. 9.2).
Кроме всего прочего, использование того или иного браузера может иметь на-
циональные особенности. Для примера сравним статистику за ноябрь 2002 года,
собранную TheCounter.com и Hotlog.ru (табл. 9.1). Видно, что американцы (они со-
ставляют большинство посетителей TheCounter.com) предпочитают обновленную
версию Internet Explorer, а русские существенно более активно пользуются
браузерами Opera и не любят браузеры от Netscape.
Таблица 9.1. Сравнение статистических данных по используемым браузерам
Браузер Данные на TheCounter.com Данные на Hotlog.ru

Internet Explorer 6.x 47% 38%
Netscape 5.x 1% 1%
Netscape 4.x 2% 1%
Opera x.x 0% 2%
Остальные 0% 2%
Г;*! The Counter com: The Full-Featured Web Counter with Graphic Reports and Detailed Information * Netscape
1 T
Ltt-."" '«M W
:
'•••.Щ:- <г
1
Обновить Поиск C-rSn .
. mttp://www.thecounter.com/stats/2G02/April/browser.php
Browser Stats
Mon Apr 1 00:05:02 2002 - Tue Apr 30 23:55:04 2002 30.0 Days
1.MSIE5.X ' 222190239 (55%)

2. MSffi 6.x s 130460539 (32%)
3. Netscape 4.x • 17818604 (4%)
4. MSffi 4.x . 14252172 (3%)
5 Netscape сотр. s4278541 (1%)
6. Netscape 6.x i 3553751 (0%)
7. Opera x.x < 2990936 (0%)
8. Unknown ! 1927854 (0%)
9 Netscape 5.x ' 732263 (0%)
10. Netscape 3.x •••• 285400 (0%)
П.МЗШЗх i 273302 (0%)
12. MSIE2.X ! 251936 (0%)
13. Netscape 2.x ч 17683 (0%)
14. MSffi 1.x s620 (0%)
15. Netscape 1.x >599 (0%)
Рис. 9.2. Статистика — коварная наука, но иногда и ей приходится верить
Таким образом, если ваш сайт правильно отображается в Internet Explorer 5 и 4,

то вы охватите 90 % аудитории виртуального мира, а если и в Netscape Com-
municator 6 и 4 — то и все 95 %. Учтите, что Netscape всегда будет иметь своих
поклонников — еще не наступило светлое время, когда UNIX-системы будут
уживаться с продуктами Microsoft.
СОВЕТ
Лучше не использовать на сайте указания типа Best When Viewed With («лучше всего про-
сматривать с») для указания типа браузера и разрешения экрана. Вряд ли кто-то будет
лично для вас скачивать новую программу и менять настройки монитора. Если вы исполь-
зуете новаторские идеи (в том числе и Flash) — создайте альтернативную версию сайта
для тех, кто не желает сию же секунду грузить plug-in.
Разница в отображении web-страниц браузерами связана со следующими их осо-

бенностями:
• различное понимание стандартов HTML;
• различные наборы собственных расширений HTML (например, Internet Explo-
rer 4.x воспринимает указание цвета рамки таблиц, a Netscape Communica-
tor 4.x — нет);
• различная тщательность в реализации тех или иных стандартных или расаш-

ренных возможностей;
• различные взгляды на реализацию тех или иных возможностей (например,
откуда отсчитывать начало фона таблицы по вертикали — от начала окна
браузера или от начала самой таблицы).
По большому счету вариантов вашего поведения при использовании средств
HTML, различающихся от браузера к браузеру, всего два:
• Создание своей версии страницы для каждого браузера. В этом случае либо
вам придется написать сценарий, исполняемый на сервере, который будет
проверять версию браузера и загружать нужную страницу, либо вы возложи-
те эту функцию на посетителя. Можно написать простой сценарий и на Java-
Script, который также будет загружать разные версии страниц (об этом мы
расскажем чуть позже). В любом случае при таком подходе вам придется
создавать несколько версий одной и той же страницы.
• Создание страницы со множеством инструкций переключения. Это наиболее
популярный способ. Если у вас всего одно или два «подозрительных» места
на странице — вставьте i f и все дела! Однако такой подход потерпит фиаско
при отключении исполнения сценариев JavaScript.
Может быть, наступят славные времена, когда новые браузеры будут поддержи-
вать единый стандарт HTML и модель DOM. Тогда web-программирование ста-
нет намного более интересным делом. А пока же мы вынуждены бороться с не-
гативными последствиями главного преимущества WWW — разнообразия.
Определение версии браузера

Для определения версии браузера и загрузки страницы в соответствии с резуль-
татом можно использовать следующий код:

</SCRIPT>
Вместо window.location.href = "" можно вставить другие инструкции, например вы-
полняемый код или указания на таблицу стилей. Такой сценарий можно помес-
тить, например, в обработчик события onClick, в результате чего вы сможете пере-
направить пользователя на нужную страницу в момент щелчка на ссылке.
Данный сценарий вставляется в страницу программой Macromedia Dreamveawer
при ее использовании для HTML-верстки. Для встраивания сценария выберите
на палитре Behaviors (Поведения) команду Check Browser (Проверить браузер).
В появившемся окне (рис. 9.3) вам достаточно только указать основной и аль-
тернативный URL (Alt URL).
СОВЕТ
Если вы панически боитесь JavaScript, вы можете использовать готовые сценарии
Macromedia Dreamveawer или аналогичных редакторов HTML (например, Adobe GoLive).
Check Browser
1111111 Go to URL
) to URL
•
I
Go to Alt URL
Go to Alt URL
Рис. 9.3. Для создания сценария автоматической проверки версии браузера

воспользуйтесь средствами Dreamveawer
Для конкретной проверки различных типов браузеров можно использовать их

различия, не прибегая к переменным appName и appVersion. Например, на заня-
тии 5 мы использовали следующий код для проверки браузера на наличие спи-
ска images:
if (document.images)
Инструкции
Количество цветов
Помимо разных браузеров существует и другая проблема показа в Web — раз-
личные графические режимы, в которых работают потенциальные зрители ва-
шей страницы.
Число одновременно отображаемых цветов обычно варьируется от 16 до 16 млн.
Кроме того, черно-белые мониторы водятся и в наше время.
Считается, что цвета для оформления web-сайта следует выбирать из так назы-
ваемой «безопасной палитры» (256 цветов). Это гарантирует адекватное вос-
произведение в режимах 256, 32 тыс., 64 тыс. цветов, однако ограничивает сво-
боду творчества и усложняет процесс. Но с другой стороны, сейчас число 256-
цветных видеокарт настолько мало (табл. 9.2), что можно пренебречь этим пра-
вилом и использовать любые цвета.
Таблица 9.2. Глубина цвета по данным TheCounter.com
Глубина цвета Число пользователей Процент

65 536 (16 бит) 176 149 066 49%
4 294 967 296 (32 бит) 124 043 987 35%
16 777 216 (24 бит) 37 814 788 10%
256 (8 бит) 15 126010 4%
Не известно 788 573 0%
16 (4 бит) 119819 0%
Разрешение экрана
Разрешение — это число точек (пикселов) на экране по горизонтали и вертика-
ли. Стандартными (наиболее распространенными) разрешениями являются сле-
дующие:
• 640x480 (VGA);
• 800x600;
• 1024x768;
• 1280x1024.
Общепринятым считается подход, при котором страница рисуется в расчете на
самое распространенное разрешение (сейчас это разрешение 800x600, табл. 9.3).
Также предполагается, что окно браузера развернуто во весь экран (в состоянии
maximize). Однако рекомендуется, чтобы все основные элементы навигации
были видны на экране и при разрешении 640x480. Обязательно надо учитывать,
что реальный экран меньше, так как часть его занимает интерфейс самого брау-
зера (меню, кнопки, полосы прокрутки и т. п.).
Таблица 9.3. Разрешение экрана по данным TheCounter.com
Разрешение Число пользователей Процент

800x600 182 211 962 51%
1024x768 127 438 461 35%
1280x1024 13 699 771 3%
640x480 12 730 040 3%
1152x864 10 682 948 3%
Unknown 4 535 484 1%
1600x1200 2 743 577 0%
Можно условно обозначить два подхода к созданию web-страниц, в зависимости

от отношения к этой проблеме.
• Подход первый состоит в жесткой фиксации ширины страницы (например,
600 точек). Этого можно достичь, поместив все в таблицу и задав ее ширину
в 600 точек, или, не указывая ее явно, определить через размер самой широ-
кой картинки. Ясно, что при просмотре такой страницы на мониторе с высо-
ким разрешением (1024x768 или 1280x1024) экран будет использоваться не
.слишком рационально, ведь вся информация по-прежнему будет занимать
лишь 600 точек в ширину. Но у такого подхода есть преимущество — при
любом разрешении относительное расположение картинок будет таким, как
вы его задали.
Второй подход заключается в создании масштабируемых страниц. При этом
ширина будет определяться шириной окна браузера (разрешением монито-
ра). Это получится автоматически, если не использовать таблицы или задать
ее ширину в процентах. Масштабируемую страницу сложно сделать выгля-
дящей одинаково в различных ситуациях. Однако рациональное размещение
информации и минимум пустых участков являются хорошей платой за по-
траченное время на тестирование и переделку.
СОВЕТ
Тестируйте свои страницы при разном разрешении экрана и при разном количестве цве-
тов. Для этого незаменимым помощником является программа QuickRes из Microsoft Power-
Toys, которая позволяет менять разрешение «на лету».
Поддержка текстовых браузеров

Еще водятся на равнинах Интернета редкие звери — текстовые браузеры. Наи-
более распространенным их представителем является Lynx (существуют версии
под UNIX, DOS, OS/2, Windows и т. д.). Говорят, что им любят пользоваться
системные администраторы, страдающие ностальгией по старым добрым време-
нам. Хорошим тоном считается минимальная поддержка этого браузера. Она
включает в себя следующие требования.
• Для каждой картинки надо указать атрибут alt.
• Если вы используете фреймы, должна существовать альтернатива для досту-
па к информации или хотя бы надпись в тегах <noframes>:
<МОРКАМЕ5>Поддержка Lynx'а на этом сервере ограничена данной надписью</МОРЯАМЕ5>
• Навигационные карты должны дублироваться текстовыми ссылками внизу
странички.
Тестирование фильма
Вы создали фильм. Как представить, как будет воспроизводиться ваш фильм на
компьютере пользователя, который использует модем для подключения к Ин-
тернету? Не торопитесь покупать плохонький модем для тестовых целей. Flash
располагает для этого специальными инструментами.
Во время обычного тестового просмотра, который реализуется с помощью ко-
манды Control > Test Movie (Управление > Тестовый просмотр фильма), откройте
меню Debug (Отладка) и установите скорость загрузки, например, 14,4 (1,2 Кб/с),
а дальше выберите команду View > Show Streaming (Вид > Показать в потоке) или
нажмите Ctrl+Enter. Flash начнет заново воспроизводить фильм и будет эмулиро-
вать загрузку с выбранной скоростью. Множество полезной информации о про-
цессе загрузки можно получить в окне, которое появляется на месте киноленты
(рис. 9.4). Оно открывается командой View > Bandwidth Profiler (Вид > Профиль
загрузки). На панели слева указаны общие параметры фильма: размеры (Dim),
скорость проигрывания (FrRate), продолжительность в кадрах и секундах
(Duration), количество загружаемых кадров до начала проигрывания (Preload),
ограничения на скорость загрузки (Bandwidth), а также текущий кадр (Frame) и
количество загруженных кадров с их размерами в байтах (Loaded). В правой час-
ти окна отображется собственно профиль загрузки.
Ти
ц Р'
Dim: 550X400 pixels
8KB-
Fr Rale: 12.0 Ir/sec
Size: 11 KB (11310В) 4KB
:* А Duiation: 140lr(11.7t) 2KB
ао
Preload: 50 Ir (4.2s)
i не
Ban**»: 1200 B/s (100 ВЛ) i 100B
йнштшнпм
ц <$ Flame: 1
3KB (3960 B]
Loaded: 100.0 X (140 frames]
11 KB (11312 B)
Рис. 9.4. Тестирование фильма в «полевых» условиях
Если вы привыкли к удобным инструментам отладки программ, то отладчик

Flash вас не обрадует. Однако в некоторых случаях он может помочь. Для запус-
ка отладчика дайте команду Control > Debug Movie (Управление > Отладка фильма).
В окне Debugger (Отладчик) вы можете наблюдать за изменением переменных,
объектов и их свойств (рис. 9.5).
*J«m... : ' - • • .Л';..' Value * \

ХЙ J
-**~
_focusrect 'l
•^•-•^ 17T 7 '1
Рис. 9.5. Окно отладчика фильма

Дизайнерские хитрости
Если вы не хотите тратить бьющую ключом юность на рутину и проверять свои
HTML-страницы, вы можете воспользоваться услугами различных программ, про-
веряющих правильность HTML-кода. Нет смысла приводить названия конкрет-
ных программ — зайдите в любой каталог бесплатных продуктов Интернета и
выберите на свой вкус и цвет.
Однако никакая самая умная программа не сможет сказать, нужен ли пробел в
этом месте или нет, а неизвестно откуда взявшееся пустое пространство между
картинками, которые должны идти подряд, иногда способно свести на нет весь
дизайн. Чтобы избежать этого нежелательного явления, надо сразу после тега
<IMG> ставить тег <BR>. А чтобы наверняка выловить всех непрошеных гостей, на-
жмите Ctrl+A. Браузер выделит содержимое страницы, и выделенные пробелы
будут видны как на ладони.
Тестирование сценариев JavaScript

Проведем небольшой эксперимент. Создадим HTML-файл со следующим со-
держанием:
<HTML>
<BODY>
<SCRIPT language="JavaScriptl.2">

</SCRIPT>
</BODY>
</HTML>
В тексте сценария допущена ошибка, поэтому Internet Explorer в строке состоя-
ния выдаст предупреждающую надпись Done, but with errors on page (рис. 9.6).
•a D:\Books\My\Rash2\Flash\CH6\Error.html - Microsoft Intern
±esrj^ D:\Books\My\Rash2\Flash\CH6\Error html j i :>"V,

:
-**^ i '• -'A'_ 3 I .'- iV. | , '..;••:
1
•
Рис. 9.6. Internet Explorer обнаружил ошибку в сценарии
Как только вы подвигаете мышью, надпись смениться на обычную: Готово (Done),

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

Internet Explorer чаще ошибается, чем оказывается прав.
File Edit View МЦЩ Щ

:\Books\My\FI ash2\Flash\CH6\Error.html
Рис. 9.7. Internet Explorer отобразил страницу, но указал на ошибку в сценарии
Ц Internet Explorer
dispteysrf pTopwily orlunctinninc, ptopeily. In the iuiure, you

can display this fnessuge by double--i?lickinvj the warning | j|
,:,.,.,,,„. i;
Jf .' .is message йегга pat;
Dim: Предпопагаотся нопимие объекта

''
Ш
Рис. 9.8. Internet Explorer выводит описание ошибки
Если установить флажок в этом окне, тогда оно будет выводиться всегда при
обнаружении ошибок в сценарии.
Netscape Communicator вообще не определит наличие ошибки — страница будет
выглядеть так же, как и без нее (рис. 9.9).
И Nets cape
Iff: / |(ile:///D|/Books/My/Flash2/Fl'ash/CHe/Errorhtml ~
Рис. 9.9. А в этом браузере ошибка вообще не будет показана

Однако если ввести в строке адреса слово javascript:, браузер выведет сообще-
ние об ошибке (рис. 9.10).
Её Communicator Console - Netscape

file:/DI/Books/My/FlashZ/Flash/СН6/Бrror.html, line 5: 1
allert is not defined.
JavaScript Error:
file:/DI/Books/My/Flagh2/Flash/CH6/Error.html, line 5:

JavaScript Error:
file:/D[/Books/My/Flash2/Flash/CH6/Error. html, line 5:

JavaScript Error:
file:/D|/Books/My/Flash2/glash/CH6/Error.html, line 5:

JavaScript Error:
file:/D|/Books/My/Flash2/Flash/СНб/Error.html, line 5:

Ш
javascript typein
Рис. 9.10. Окно с сообщением об ошибке
СОВЕТ
Отлаживать сценарии JavaScript можно с помощью программы Microsoft Script Debugger. Она
распространяется бесплатно, и ее можно загрузить с сервера vww.microsoft.com/scripting.
Использование методов вывода сообщений

У объекта Window (головной объект страницы, отображенной в браузере) есть
три полезных метода: alertO, confirmO и promptO. Все три метода служат для
вывода окна с сообщением.
Метод alert О — самый простой, он применяется для вывода краткого сооб-
щения. Кроме текста сообщения в окне присутствует кнопка ОК, закрывающая
окно. На окне сообщений метода confirmO — две кнопки: ОК и Cancel. Метод
confirmO возвращает true, если пользователь нажимает кнопку ОК, и false при
нажатии кнопки Cancel. Метод promptO выводит для пользователя еще и поле
ввода и также возвращает true или false.
Напишем сценарий, который будет спрашивать ваше имя (рис. 9.11), а потом
выводить его сначала методом confirmO (рис. 9.12), потом — alertC) (рис. 9.13). Из
сценария будет ясен синтаксис и назначение методов:
Размещение и обновление сайта 217
<SCRIPT language="javascript">

if (confirmC'Bauie имя "+yourname+"?")) {alert ("Вы - "+yourname)}
else {alert ("Вы не "+yourname)};
</SCRIPT>
Explorer User Prompt
'JavaScript Prompt ЦЦ •••'•" .. '-

Введите: ваше имя, например.
Вася
Рис. 9.11. Окно метода pompt
•••••ШрТЧ
'
Microsoft Internet E
U/дше иия Вася?-

''
,'.'-":.;г';';ок; i |
Рис. 9.12. Окно метода confirm
Microsoft Internet Explorer
Вы не Вася
ОК
Рис. 9.13. Окно метода alert
Не сложно догадаться, как использовать эти методы для отладки сценариев: с их

помощью вы сможете не только узнать значение переменной, но и ввести новое.
Размещение и обновление сайта

Итак, вы уже создали простенький сайт. Если вы выбрали сервер для размеще-
ния сайта без перекодировки, то уже можно приступать к загрузке. Для этого
необходимо использовать какую-нибудь FTP-программу, например CuteFTP. Если
сервер с перекодировкой (этот вариант более предпочтителен, потому что вашу
страничку смогут читать пользователи разных операционных систем), то, скорее
всего, на него необходимо загружать файлы в кодировке KOI-8 (стандартная

кодировка кириллицы под UNIX), предварительно их перекодировав. Загружа-
ем файлы, используя тот же CuteFTP.
Все сказанное про загрузку не относится к серверам, предоставляющим HTTP-доступ, на-
пример — narod.ru.
Если у вас установлен полный пакет Internet Explorer, то проще всего помес-
тить файлы в Сеть, используя программу Издатель Web. Запустите программу из
меню запуска и ответьте на вопросы Издателя: какие файлы и откуда надо взять,
куда и как их следует разместить (рис. 9.14). При подключении вас попросят
ввести пароль.
Издатель Web
Задайте URL-адрес и каталог
i Web-ст репицам (напр им ер, littp //v/ww, i n icro s ott, со гп/гпу) . Этот
.адрес можно уэнеть у сисгеиного: администратор.» или
поствещика услуг Интернете: ..;: :
:
Ijwww. dirnvivich.narod.ru
|§ШЩ1"е i 1иганэев1
•ЙЩе ЩЦватъ зток
Док альм ый к а т an or
JD \Books\My\Fte3h2\Flash\Ch3\
—.—, :_
Рис. 9.14. Одно из окон Издателя Web
Вот и весь процесс. Ваш сайт оказался на сервере и его можно там просмотреть.

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

навигацию;
• увидели, почему так важен трехпанельный макет HTML-страницы;
• познакомились с основными кодировками кириллицы;
• научились эффективно тестировать сценарии JavaScript;
• посмотрели на Интернет-статистику, собранную сервером TheCounter.com;
• научились определять браузер посетителя страницы;
• узнали некоторые хитрости верстки и тестирования.
Ahoj! На следующем занятии нас ждет множество перевоплощений.
Занятие 10
И столяр, и плотник
Скатился с ветки каштан.
Тому, кто в дальних горах не бывал,
В подарок его отнесу.
Планирование — дело тонкое. Сколько ни планируй, часто все идет не так, как
хотелось бы. Как пел Андрей Миронов, «крокодил не ловится, не растет кокос».
Здесь картинку не подобрать, там текст не состыковать... И главное, каким бы
гениальным плановиком вы ни были, чтобы сайт увидел свет, вам еще придется
состояться и как писателю, и как художнику. А у каждой профессии есть свои
тонкости. О некоторых из них мы сейчас и поговорим. На сегодняшнем занятии
мы узнаем:
• как подготовить текст быстро и без ошибок;
• какие инструменты Word могут пригодиться при создании web-страниц;
• зачем нужен графический текст;
• как на HTML-странице вывести длинное тире или знак торговой марки;
• что такое anti-aliasing и когда его надо применять.
Что касается этапов работы, сформулированных на занятии 8, то на сегодня-
шнем занятии мы обсудим 3 из них: подготовку текстовых материалов, подго-
товку графических материалов и создание элементов оформления.
Подготовка текста
Как уже говорилось, тексты, помещенные в Интернете для ознакомления с ними
при подключении к Сети, должны иметь иерархическую структуру. Из этого не
следует, что, если вы хотите представить на всеобщее обозрение свой литера-
турный опус, вам придется сделать из него «сетевую» версию. Ни в коем слу-
В переноде В. Марковой.
чае! Если вы писали для печати на бумаге, то пусть так и будет. Разрежьте рас-
сказ на кусочки, вставьте в начале и в конце ссылки и публикуйте. Однако если
вы собираетесь поместить в Интернете сборник стихов, то тут уже стоит поду-
мать над его структурой. Скорее всего, лучшим вариантом будет следующий.
Сделайте оглавление, в котором будут ссылки на все произведения, а сами сти-
хи можно объединить так, чтобы группа умещалась на одной странице. В начале
и конце каждой страницы дать ссылки на соседние.
Особенным является случай, если вы специально пишете для Web. Например,
вы решили описать свои приключения во время командировки или похода. То-
гда стоит подумать над созданием именно гипертекстового шедевра. С первого
взгляда это может оказаться не так просто — мы привыкли к книгам и фильмам
с их последовательным изложением событий. Хотя на самом деле наше созна-
ние меньше всего напоминает хронологию. Здесь — ассоциация с другим инте-
ресным случаем, там — уместный анекдот... Почему бы из этого не попытаться
сделать настоящий гипертекст? Вначале вы пишете одну, главную историю. По
мере ее создания, в тех местах, где вам хочется сказать: «К слову говоря...» или
«...это вообще интересный парень — в прошлый раз он такое натворил...», — там
вы вставляете ссылки. А потом пишете для них собственные истории. Только,
опять-таки, не забудьте придумать какую-нибудь разумную навигацию по этому
тексту, чтобы читатель не заблудился.
Если написание хорошего текста — это дело вкуса и умения, то создание гра-
мотного текста в настоящее время — дело техники. Текст я предлагаю писать
в Microsoft Word. Как уже упоминалось, вряд ли вы найдете текстовый процес-
сор, сравнимый с ним по богатству возможностей и функций.
Работа в Word
Так как результатом работы в Microsoft Word должен стать простой текстовый
файл, в этом разделе будут рассмотрены только функции, которые могут приго-
диться при наборе текста.
ВНИМАНИЕ
Напоминаем: будьте внимательны при копировании текста из Word в программу HTML-вер-
стки. Никогда не копируйте текст напрямую (естественно, если вы не используете для вер-
стки Блокнот). Всегда сохраняйте текст сначала в простом текстовом редакторе, иначе
весь выигрыш от проверки правописания уйдет на борьбу с последствиями.
Проверка правописания
Основная функция, которая вам пригодится, — это проверка правописания.
Обычно Word по умолчанию проверяет грамматику и орфографию. Слова, в ко-
торых, по его мнению, есть ошибка, он подчеркивает красным, а предложения
с грамматическими ошибками и неточностями — зеленым. Если вы щелкнете
правой кнопкой на подчеркнутом слове или части слова, то Word напишет, что
сделано неправильно. Обычно к его мнению стоит прислушаться. Однако если
ошибок слишком много, текстовый процессор откажется автоматически прове-
рять орфографию. В таком случае необходимо воспользоваться командой Сервис >
Правописание или нажать F7. В верхнем поле Word выделит красным слово с
222 Занятие 10. И столяр, и плотник
ошибкой (или зеленым, если ошибка грамматическая), а в нижнем — предложит

возможную замену. В правой части окна размещены несколько кнопок, с по-
мощью которых можно указать, как поступить с данной ошибкой.
• Пропустить — пропустить данное слово и перейти к следующей ошибке. Ошиб-
ка не будет исправлена, но и не будет обозначена как ошибка.
• Пропустить все — аналогична предыдущей кнопке, но действует на все вхож-
дения этого слова в данном документе. Имеет смысл так поступить, если вы
уверены в написании слова, но нигде, кроме данного текста, оно больше не
появится.
• Добавить — добавить слово в словарь. Слово будет внесено в словарь и боль-
ше не будет появляться как ошибка в любых документах, проверяемых в ва-
шей программе Word.
• Заменить — заменить неправильное слово на предлагаемый программой или
вами вариант.
• Заменить все — заменить все вхождения данного слова в данном документе.
• Автозамена — действие аналогично предыдущей кнопке, но заменяемое слово
и его правильный вариант будут добавлены в функцию автозамены (о ней
пойдет речь чуть дальше).
В случае грамматической ошибки вместо трех последних кнопок будет только
одна — Изменить, которая изменит неправильную грамматическую конструкцию.
Если Word не предложил правильного варианта, можно щелкнуть на докумен-
те, не закрывая окна проверки правописания, и исправить ошибку «вручную».
Чтобы продолжить проверку дальше, нажмите появившуюся кнопку Возобновить.
Действие трех нижних кнопок довольно очевидно.
• Параметры — открывает окно настройки параметров на вкладке Правописание,
где сосредоточены установки функции правописания. Данное окно также мож-
но открыть командой Сервис > Параметры и перейти на вкладку Правописание.
• Вернуть — возвращает последнее исправление, сделанное с помощью команд
замены окна Правописание.
• Отмена или Закрыть — закрывает окно Правописание.
Однако даже самые идеальные инструменты могут давать сбои. В случае про-
верки правописания причин может быть несколько.
• В качестве языка указан не родной язык текста. Обычно Word догадывается,
что если вы печатаете русскими буквами, то данный текст — русский. Но это
происходит далеко не всегда, особенно если вы копируете текст из другого
источника. Выделите нужный текст и дайте команду Сервис > Язык > Выбрать
язык, в появившемся окне выберите название языка — Русский. В том же окне
вы можете указать, чтобы данный язык назначался набираемому тексту по
умолчанию.
СОВЕТ
Если «языковые проблемы» становятся частыми — создайте макрос, который бы менял
язык на русский, и задайте горячую клавишу для него. О том, как это сделать, читайте
ниже в разделе «Макросы».
Часто встречающаяся опечатка или ошибка. Например, вы перенесли текст

из DOS или UNIX-редактора в Word. В таком тексте перевод строки (сим-
вол абзаца) будет стоять в конце каждой строчки, в результате грамматика
практически не будет проверена. (Замечу, что HTML-тексту все равно, где
стоят символы перевода строки — браузер при построении абзаца руковод-
ствуется только тегами <р> и <Ьг>.) Если текст небольшой, то символы абзаца
проще убрать «вручную». Для солидного произведения можно воспользовать-
ся функцией замены Правка > Заменить (Ctrl+H). Заменять можно просто -
символ абзаца (он находится в списке специальных символов) на пробел. Но
в таком случае придется «вручную» отслеживать или задавать заново абза-
цы. Если абзац выделен чем-то особенным, например последовательностью
«символ абзаца — три пробела» (для обозначения красной строки), тогда
можно предварительно заменить такую последовательность на какой-нибудь
специальный символ или последовательность символов, которых точно нет в
тексте, затем заменить символы абзаца на пробелы, а потом вернуть обратно
знаки абзаца, заменив специальную последовательность на символ абзаца.
СОВЕТ
Чтобы увидеть пробелы и символы абзаца в виде условных символов, нажмите кнопку Не-
печатаемые символы (она находится на панели Стандартная). Какие непечатаемые симво-
лы будут отображаться, а какие — нет, определяется на вкладке Вид окна Параметры в со-
ответствующем разделе.
• Может случиться и так, что Word просто перестанет обращать внимание на

некоторые ошибки. В таком случае вам придется обратиться к вкладке Пра-
вописание окна Параметры, которое открывается одноименной командой меню
Сервис. Скорее всего, вы обнаружите, что там случайно снят какой-либо нуж-
ный флажок.
Автозамена
Автозамена может стать верным помощником при наборе текста. Кроме того,
что она способна исправлять «на лету» (сразу после ввода) некоторые опечатки,
можно настроить ее, например, на замену аббревиатуры на полное название или
редкого сочетания букв на длинное часто встречающееся слово или выражение.
Доступ к настройке автозамены осуществляется либо при исправлении ошибок
(в окне Правописание или в контекстном меню), либо через команду Сервис >
Автозамена. Сама замена будет осуществляться сразу после ввода любого разде-
лительного знака (пробела, точки, запятой, конца абзаца и т. п.) после заменяе-
мого выражения.
Иногда бывает удобно сделать отложенную замену — при наборе вы вводите аб-
бревиатуру, а затем с помощью окна Найти и Заменить выполняете исправление.
Если таких замен несколько, удобно создать макрос, в котором они все выпол-
нялись бы по очереди. В следующем документе вам уже не придется вводить за-
ново все выражения, а останется только запустить макрос.
Примечания
При написании текста не все сразу получается гладко. Иногда к одному абзацу
приходится возвращаться несколько раз. Бывает, надо что-то уточнить, вставить
забытую цитату. В таких случаях удобнее всего использовать примечания. При-

мечание вставляется командой Вставка > Примечание (или кнопкой Вставить при-
мечание). В примечании вы можете оставить памятку самому себе. Затем вы мо-
жете открыть панель Рецензирование и с помощью кнопок Следующее примечание
и Предыдущее примечание просмотреть все сделанные примечания. На той же па-
нели находится кнопка Удалить примечание для стирания просмотренных и вы-
полненных примечаний.
СОВЕТ
Чтобы открыть нужную панель инструментов, выберите ее в подменю команды Вид > Пане-
ли инструментов или в контекстном меню командной области Word. В этом же меню при-
сутствует команда Настройка (она есть и в меню Сервис), которая позволяет создать но-
вую панель инструментов или перенести пару нужных кнопок на уже существующие
панели.
Запись исправлений
Еще одна полезная функция текстового процессора - запись исправлений.
Обычно она используется при коллективной работе над документом. Но иногда,
особенно при обработке старых творений, она бывает незаменимой и для одного
человека. Чтобы активировать запись исправлений, нажмите кнопку Исправ-
ления на панели Рецензирование или установите флажок Записывать исправления
в окне Исправления (оно открывается кнопкой Выделить исправления на панели
Рецензирование или одноименной командой меню Сервис). В том же окне надо
установить флажок Отображать исправления на экране, если вы хотите сразу кон-
тролировать свои действия при записи исправлений. Две следующие кнопки па-
нели Рецензирование служат для перехода от одного исправления к другому,
а две следующие — для принятия или отказа от исправления. Работать с ис-
правлениями можно также с помощью окна Просмотр исправлений, которое от-
крывается командой Сервис > Исправления > Принять/отклонить исправления.
ВНИМАНИЕ
Будьте внимательны при работе с исправлениями — при записи окончательного варианта
документа в формате ТХТ все исправления должны быть приняты. При копировании через
буфер обмена (Ctrl+C/Ctrl+V) достаточно, чтобы исправления не отображались на экране.
СОВЕТ
Если подвести указатель мыши к исправлению, появляется подсказка, кто является его ав-
тором. Если вы хотите, чтобы там появилось ваше имя, заполните поля вкладки Пользова-
тель в окне Параметры. Введенные там инициалы появятся при именовании примечаний.
Макросы
Еще одной полезной функцией, которая существенно облегчает работу в Word
п которую, к сожалению, многие считают для себя недоступной, является ис-
пользование макросов. Хотя для создания макросов используется специальный
язык программирования — Visual Basic for Applications (VBA), вы можете даже
TTf
' подозревать о его существовании и при этом все равно использовать макросы.
Word позволяет записать последовательность команд в виде макроса, не прибе-
гая к услугам редактора языка Visual Basic.
Для примера запишем макрос для смены текущего языка выделенного текста на
русский.
1. Сначала выделим нужный текст.
2. Затем дадим команду Начать запись из меню Макрос или нажмем кнопку За-
пись (синий кружок) на панели Visual Basic.
3. В появившемся окне дадим ему название, например Русский.
4. Дальше можно идти тремя путями: просто начать запись или начать запись,
предварительно сопоставив создаваемому макросу сочетание клавиш или
кнопку панели инструментов. Для простоты просто нажмем ОК и перейдем к
записи макроса.
5. Рядом с указателем мыши появилось уменьшенное изображение кассетой,
а на экране появилась плавающая панель с двумя кнопками Остановить запись
и Пауза. Кнопкой Пауза можно воспользоваться, если вы забыли выделить
текст или случайно сняли выделение, или если вам надо перейти к другому
участку текста (в режиме записи макроса Word не позволит вам воспользо-
ваться мышью для путешествий по тексту).
При записи макроса доступны только команды, к которым так или иначе можно установить
доступ с клавиатуры.
6. Итак, у нас есть выделенный текст, и запись макроса активирована. Дадим

команду Сервис > Язык > Выбрать язык, а в списке языков выберем Русский.
7. Нажмем кнопку Остановить запись. Макрос готов.
8. Теперь назначим его клавиатурной комбинации и кнопке панели инструмен-
тов (естественно, вам понадобиться только одно назначение). Для этого от-
кройте окно Настройка одноименной командой меню Сервис. В появившемся
окне нажмем кнопку Клавиатура. В списке Категории выберем Макросы, а в спи-
ске справа — макрос Русский. Теперь щелкнем в поле Новое сочетание клавиш и
нажмем, например, Alt+R.
9. Затем нажмем Назначить, и запись клавиатурной комбинации перейдет в поле
Текущее сочетание клавиш.
10. Теперь очередь клавиши Закрыть. В окне Настройка перейдем на вкладку Ко-
манды, где найдем команду Макросы, а в правом поле выберем макрос Русский.
Потащим за значок команды и перенесем макрос на любую панель инстру-
ментов.
11. Перейдем на вкладку Панели инструментов и нажмем кнопку Создать. Назовем
панель Моя и скажем ОК. На экране появится новая пустая панель.
12. Перетащим на новую панель кнопку макроса и щелкнем на ней правой кноп-
кой мыши. С помощью контекстного меню сначала выберем подходящий ри-
сунок для кнопки, а потом изменим его по своему вкусу. Чтобы кнопка не
занимала много места на экране, в том же контекстном меню дадим команду
Основной стиль. Теперь кнопка будет отображаться только при помощи знач-
ка, а ее название будет всплывать в подсказке.
8 Зак. 96
13. Закроем окно Настройка и разместим созданную панель в нужном месте. Что-
бы исправить язык текста на русский, теперь достаточно выделить фрагмент
текста и нажать Alt+R или кнопку Русский на панели Моя.
ВНИМАНИЕ
Будьте внимательны при настройке клавиатурных сочетаний: некоторые из них уже исполь-
зуются Word. Впрочем, об этом вы узнаете из подсказки, которая выводится после ввода
клавиатурной комбинации. Не стоит перекрывать уже существующие назначения, если вы
не чувствуете себя асом в Word. Возможных свободных комбинаций и так достаточно — го-
дятся любые сочетания практически всех основных клавиш клавиатуры с клавишами Alt,
Ctrl и Shift.
Ввод специальных символов

Иногда требуется вставить в текст символ, который не встречается в обычном
наборе символов, например, знак параграфа или градуса. Приведем обозначения
специальных символов для использования в HTML-документе (табл. 10.1).
Таблица 10.1. Коды специальных символов
Код символа Название Символ
§ Параграф §
© Copyright ©
® Registered
° Знак градуса
« Левая кавычка (левая елочка)
» Правая кавычка (правая елочка)
Многоточие
Одиночная открывающая кавычка
&#14б; Одиночная закрывающая кавычка (апостроф)
Открывающая лапка
Закрывающая лапка
Открывающая английская лапка
Закрывающая английская лапка
Жирная точка
Короткое тире (минус)
Длинное тире
Торговая марка
№ Знак номера №
± Плюс-минус ±
Вот несколько правил хорошего тона использования специальных символов1.
1
Некоторые из правил навеяны Артемием Лебедевым.
В текстах на иностранных языках используются так называемые "английские

кавычки". В русских текстах используются «елочки» или „лапки". Но ни
в коем случае не стоит использовать знаки дюйма: " ... ".
Если на вашем сайте в качестве кавычек первого уровня вы выберете „лап-
ки", то в текстах, которые предназначены для печати, должны обязательно
стоять «елочки».
Тире не надо путать с дефисом. Как правило, тире в два-три раза длиннее де-
фиса. Арифметический минус занимает промежуточное положение.
Необходимо уделять максимум внимания возможным переносам слов, кото-
рые не могут быть перенесены на новую строку. Так как никто не может
заранее знать, когда и где предложение будет разбито на строчки, надо пре-
дусмотреть все возможные случаи. Неразрывно должны писаться инициалы,
короткие слова, сокращения, цифры с единицами измерения. Длинное тире
также не может идти в начале строки. Чтобы слова не разрывались нежела-
тельным образом, их надо соединять неразрывным пробелом (Snbsp;).
Тег <NOBR> используется в тех случаях, когда неразрывный пробел неуместен,
то есть когда в наборе символов нет пробелов и он не может быть разорван.
Это касается, например, телефонных номеров и некоторых слов, которые пи-
шутся через дефис, так как некоторые браузеры переносят слова в месте де-
фиса:
<NOBR>911-12-06</NOBR>
<NOBR>BO-nepebix</NOBR>
В русскоязычном тексте не стоит писать номера телефонов на западный манер,

то есть с одним дефисом: 911-1206. Правильно писать с двумя: 911-12-06.
Если для обозначения слова существует специальный символ, надо исполь-
зовать его, а не эмуляцию с помощью обычных знаков. Например, надо пи-
сать ©, а не (С).
Верхние индексы, знак ®, номера и знаки сносок всегда надо набирать более
мелким кеглем и поднимать с помощью тега <sup>. Для нижних индексов
служит тег <sub>.
Если вы используете Word для набора текста, не забудьте дополнительно об-
работать кавычки и специальные знаки в Блокноте.
Графика в Сети
Кроме текста практически любой сайт использует в своем оформлении графические
файлы, будь то меню, логотип или просто украшенный заголовок. В Интернете
в основном используются растровые форматы: GIF, JPEG и PNG. Исключение
составляет Flash. Основным поставщиком рисунков служит программа Adobe
Photoshop. В ней вы можете сами нарисовать что-либо (обычно это текстовые
надписи) или использовать отсканированные изображения. Основные принци-
пы сканирования и работы в Photoshop описаны в занятии 3, а сейчас мы позна-
комимся с советами бывалых людей.
Несколько советов
• Подкорректируйте в Photoshop цвета (Image > Adjust > Hue > Saturation) и яр-
кость/контраст (Image > Adjust > Levels). Фотографии не должны выбиваться
из общего оформления страницы или сильно отличаться друг от друга по яр-
кости и контрастности. Возможное решение — сделать все фотографии чер-
но-белыми (Image > Adjust > Desaturate).
• Практичным решением для фотоальбома будет размещение на его главной
странице уменьшенных копий-значков, каждая из которых ссылается на
большую фотографию. Чтобы просмотреть полное изображение, достаточно
щелкнуть мышью на его эскизе. Таким же образом имеет смысл поступать со
всеми большими иллюстрациями сайта.
• Помните, что при масштабировании качество картинки объективно падает.
Поэтому совершенно недопустимо несколько раз последовательно перемас-
штабировать фотографию или рисунок. Если вас не устраивает полученный
размер, вам следует вернуться к оригиналу и масштабировать заново именно
оригинал. Это же правило относится и ко многим другим операциям (кор-
ректировка цветов, изменение контрастности или яркости).
• Яркость картинки во время ее обработки и рисования должна соответство-
вать яркости, которую она будет иметь во время показа в браузере, поэтому
важно правильно настроить гамму в вашем графическом редакторе (в Photo-
shop это делается командой File > Color Settings > Monitor Setup > Gamma).
Золотое сечение
Золотым сечением называется определенное соотношение длин двух отрезков.
Этот термин ввел в употребление Леонардо да Винчи. Отрезки, прямоуголь-
ники или любые фигуры, построенные с учетом соотношения золотого сечения,
воспринимаются как пропорциональные, красивые, гармоничные и эстетичные.
Золотое сечение имеет вполне строгую математическую формулировку: если за-
дан отрезок АВ и на нем точка С, то отрезок будет иметь золотое сечение, если
отношение длины отрезка к длине его большей части будет равна отношению
длины большей части к меньшей. В частности, если АОСВ, то отношение мож-
но записать как: АВ/АС=АС/СВ.
Решив несложное квадратное уравнение, можно (вслед за пифагорейцами) по-
лучить значение золотого сечения. Оно приблизительно равно 3/5 или 2/3.
Золотое сечение и связанные с ним математические понятия, например числа
Фибоначчи, появляются в самых разнообразных явлениях природы: в пропор-
циях человеческого тела и растений, в эволюции биоценозов и даже в поведении
некоторых образований глубокого космоса. Общепринятые форматы фотографий
также соответствуют значению золотого сечения. Это же значение проявляется
и в размерах стандартных листов бумаги А4, A3 и т. д.
Поэтому, обрезая фотографию в Photoshop, постарайтесь соблюдать принцип
золотого сечения, подобрав соотношение длины и высоты картинки 3/5 или 2/3.
Размеры экрана монитора другие: 800x600 или 1024x768, то есть их отношение
равно 3/4. Оно близко к другой величине — квадратному корню из значения зо-
лотого сечения. Субъективно такие фигуры тоже пропорциональны.
СОВЕТ
Будьте аккуратны, обрезая фотографии. Нет ничего проще, чем испортить хорошую фото-
графию, обрезав ботинки или флюгер на крыше.
Внутри кадра золотое сечение тоже применимо. Значимые точки и линии кадра
лучше располагать на расстоянии 1/3 от края. Привязывайте к этим линиям
композиционный центр вашей фотографии. Например, в пейзажах горизонт
лучше расположить не посередине изображения, а на высоте одной или двух
третей.
СОВЕТ
Применяйте принцип золотого сечения не только при обработке фотографий. Для филь-
мов Flash он тоже вполне применим.
Если главный объект вашей фотографии смещается от точек золотого сечения к

центру, то изображение становится более статичным и спокойным. Смещая
центр тяжести композиции к краю, вы делаете рисунок тревожным и напряжен-
ным.
Форматы графических файлов

Но сначала мы немного отклонимся в сторону, чтобы сказать пару слов о гра-
фических форматах. Чтобы осознать основные преимущества Flash перед осталь-
ной графикой сети, необходимо знать, что электронные графические изображе-
ния бывают растровыми и векторными.
• Растровое изображение состоит из точек, то есть для каждой точки рисунка
запоминается ее цвет, и при масштабировании его качество ухудшается, так
как точек становится меньше. В Интернете можно использовать три растро-
вых формата: GIF, PNG и JPG.
• Векторное изображение состоит из линий, заданных координатами ключе-
вых точек и формулами кривых, их соединяющих. При этом хранятся имен-
но формулы и характеристики линий (например, их толщина и цвет). Благо-
даря этому при масштабировании качество векторных рисунков не меняется
и, кроме того, они занимают мало места на диске. В Интернете векторные
рисунки встречаются только в фильмах Flash.
Векторный рисунок можно легко перевести в растровое изображение любого
размера (экспортировав его в любой растровый формат из векторного редактора
или выбрав команду File > Place в Photoshop). Обратный процесс (векторизация)
чрезвычайно сложен, и для его осуществления даже созданы специальные про-
граммы.
GIF
GIF — формат для сохранения рисунков с малым количеством цветов и контра-
стными резкими деталями, таких как надписи, чертежи, схемы, графики. При
сохранении вам надо будет выбрать оптимальное количество цветов (от 4 до 256),
палитру (выбирайте Palette: optimized) и Dither (обычно лучший вариант — None).
Особенно важно, что рисунок в формате GIF может содержать участки, запол-
ненные «прозрачным» (transparent) цветом. Через такие участки будет виден

фон странички, что позволит реализовывать интересные эффекты. Прозрачный
цвет можно выбрать при сохранении картинки с помощью Ulead SmartSaver и
в самом Photoshop.
Формат GIF также поддерживает анимацию. Используя GIF Animator или Image-
Ready, можно создавать простые мультипликационные эффекты. Формат GIF,
палитра которого ограничена 256 цветами, используется для сохранения отно-
сительно простой графики. Особенностями этого формата является возможность
создания анимированных и прозрачных изображений, а также возможность по-
степенной загрузки изображения.
Так как размеры графических файлов влияют на время загрузки сайта, web-мас-
теру необходимо уметь грамотно оптимизировать GIF-файлы, то есть стремиться
к минимальному размеру файла при сохранении приемлемого качества графи-
ки. Для того чтобы понять, как можно оптимизировать GIF-файлы, необходимо
иметь представление об алгоритме сжатия данных в этом формате.
Для сжатия данных в GIF-формате используется алгоритм Лемпела—Зива и
Уэлча (Lempel—Ziv and Welch), сокращенно называемый LZW. Алгоритм LZW
кодирует последовательность пикселов одного цвета в изображении с помощью
номера этого цвета в палитре и числа повторений пиксела. Таким образом, раз-
мер GIF-файла тем меньше, чем меньше цветов в палитре и чем больше одно-
цветных последовательностей в изображении.
Вот несколько приемов оптимизации GIF-файла.
• Уменьшение количества цветов. Один из возможных путей сокращения раз-
мера GIF-файла — это сокращение количества используемых в его палит-
ре цветов. Точнее, сокращение размера файла происходит при уменьшении
параметра глубины цвета (color depth), который определяется как количест-
во бит, используемых для записи цвета. Для GIF-изображеиий этот параметр
изменяется в диапазоне от 1 до 8 бит, которым соответствуют 2, 4, 8, 16, 32,
64, 128 и 256 цветов. Для оптимизации изображения рекомендуется сохра-
нить его несколько раз с различными значениями параметра глубины цвета
для того, чтобы сравнить размер и качество полученных рисунков и выбрать
оптимальный вариант.
• Разбиение изображения на части. Другой способ оптимизации состоит в раз-
биении исходного GIF-изображения на несколько частей и сохранении их
с различными значениями глубины цвета. Разумеется, использование этого
приема имеет смысл только в том случае, если полученные изображения в
сумме занимают меньше памяти, чем исходное. Следует также иметь в виду,
что увеличение числа GIF-файлов, как правило, приводит к наращиванию
HTML-кода, а значит, и к увеличению размера HTML-файла. Изменяя раз-
мер таблицы, а следовательно, и количество цветов в ней, web-дизайнер по-
лучает в свои руки прекрасный инструмент для регулировки соотношения
качества изображения и размера файла. Так, уменьшая в изображении разме-
ром 100x100 пикселов количество цветов от 256 (8 бит на пиксел) до 128
(7 бит на пиксел), получаем 100x100x8 - 100x100x7 = 10000 бит экономии,
что составляет примерно 1,2 Кбайт.
Сокращение изображения до минимального повторяющегося фрагмента. В не-

которых случаях полезным шагом в оптимизации графики может стать со-
кращение размеров исходного изображения или его части до минимального
повторяющегося фрагмента (в предельном случае — пиксела). Полученное
изображение растягивается до исходного с помощью атрибутов width и height
тега <img>.
Удаление ореола. Иногда при помещении на web-страницу GIF-файла, содер-
жащего невидимый слой, изображение оказывается испорченным из-за эф-
фекта ореола — цветного контура на границе видимого и невидимого слоев.
Объясняется этот эффект тем, что для имитации плавного перехода между
цветами в графических редакторах часто используется функция сглажива-
ния (anti-aliasing), которая создает промежуточные цвета на границе изобра-
жения. Эти цвета и являются причиной ореола, который возникает, если цвет,
назначенный невидимым, существенно отличается от цвета фона, на который
наложено изображение. Зная это, легко сформулировать правило для мини-
мизации эффекта ореола: цвет фона и цвет, назначаемый невидимым, долж-
ны совпадать.
Использование чересстрочной развертки. Для постепенной загрузки изобра-
жений в формате GIF предусмотрена чересстрочная развертка изображения.
При чересстрочной развертке изображение загружается в четыре этапа: сна-
чала каждая восьмая строка, начиная с первой, затем каждая восьмая, начи-
ная с пятой, затем каждая третья, начиная с третьей и, наконец, все осталь-
ные строки. Такой порядок вывода изображения на экран позволяет увидеть
его общие черты еще до окончания загрузки, что может быть полезно, напри-
мер, при выводе больших GIF-файлов, хотя иногда портит общее впечатле-
ние от рисунка.
СОВЕТ
Из-за потерь качества рисунка для сохранения промежуточных версий используйте родной
формат графического редактора. Для Photoshop им является TIFF и PSD.
СОВЕТ
Для того чтобы создать анимированный GIF-файл, совсем не обязательно покупать и уста-
навливать дополнительные программы. Если у вас нет серьезных претензий к графике, то
гораздо проще использовать для этих целей Flash. Создайте нужную последовательность
кадров, дайте команду File > Publish Settings (Файл > Параметры публикации). На вкладке
Formats (Форматы) установите флажок GIF Image. На появившейся вкладке GIF настройте
необходимые параметры (в частности, установите переключатель Animated (Анимирован-
ный)) и нажмите кнопку Publish (Опубликовать).
Сейчас GIF является наиболее распространенным графическим форматом в

Интернете, однако постепенно он вытесняется форматом PNG.
PNG
Формат PNG (Portable Network Graphics), являющийся плодом трудов сообще-
ства независимых программистов, появился на свет как ответная реакция на пе-
реход популярнейшего формата GIF в разряд коммерческих продуктов. Этот
формат, сжимающий графическую информацию без потерь качества, используя
алгоритм Deflate, в отличие от GIF или TIFF сжимает растровые изображения

не только по горизонтали, но и по вертикали, что обеспечивает более высокую
, степень сжатия. Кроме того, он поддерживает цветные фотографические изо-
бражения вплоть до 48-битных включительно.
Как недостаток формата часто упоминается то, что он не дает возможности соз-
давать анимационные ролики, хотя сейчас, при повальном переходе практиче-
ски всей анимации на технологию Flash, это уже совсем не актуально. Зато фор-
мат PNG позволяет создавать изображения с 256 уровнями прозрачности за
счет применения дополнительного альфа-канала с 256 градациями серого, что,
безусловно, выделяет его на фоне всех существующих в данный момент форма-
тов. В числе других отличительных особенностей этого формата можно отме-
тить двумерную чересстрочную развертку (то есть изображение проявляется
постепенно не только по строкам, но и по столбцам) и встроенную гамма-кор-
рекцию, позволяющую сохранять изображения, яркость которых будет неизмен-
на на таких альтернативных платформах, как Mac, Sun или Silicon Graphics.
Но широкое распространение этого поистине передового формата сдерживают
некоторые его недостатки. Так, формат PNG значительно уступает своему пред-
шественнику, GIF, в тех случаях, когда речь идет о мелких элементах оформле-
ния web-страниц, таких как кнопки, рамки и т. п. Проблема заключается в том,
что в файле изображения около 1 Кбайта занимает описание палитры цветов,
что порой бывает сопоставимо с размером самого изображения.
JPG
JPG — основной формат электронных фотографий. Однако поскольку он сохра-
няет изображение с потерей качества, вам придется выбирать соотношение меж-
ду наименьшим размером файла и допустимыми (на ваш взгляд) искажениями
рисунка. Свойства этого формата таковы, что дефекты сильнее всего проявля-
ются на мелких контрастных деталях (вокруг них появляется ореол). Картинки
в этом формате имеют цветовую модель TrueColor (16 млн цветов).
Полное название этого формата — JPEG (Joint Photographic Experts Group). Он
разработан группой экспертов по фотографии (что становится ясно из названия)
под эгидой ISO (Международная организация по стандартам). Этот формат
уникален тем, что использует алгоритм сжатия, отличающийся от применяемых
во всех остальных графических форматах, — сжатие с потерями. Этот алгоритм
ранее использовался на телевидении в схеме телевизионной трансляции США.
Основан он все на той же ограниченности человеческого зрения — неспособно-
сти глаза замечать некоторые искажения в восстановленном изображении. На
сегодня этот алгоритм является одним из самых эффективных (коэффициент
сжатия достигает 1:100), однако он не очень хорошо обрабатывает изображения
с малым количеством цветов и резкими границами. JPEG можно назвать проти-
воположностью GIF. Он позволяет отображать 24-битную палитру, что дает
возможность отображать градиенты с фотографической точностью, но при этом
не может иметь прозрачных областей.
Однако этот формат таит в себе одну неприятную особенность, о которой нель-
зя забывать. При каждом сохранении изображения в формате JPEG повторно
запускается алгоритм сжатия, что приводит к еще большему ухудшению качест-
ва. Поэтому сохранять изображение в этом формате следует только после окон-
чательной обработки.
Рисунки в форматах GIF и JPEG могут появляться на странице постепенно,
становясь более четкими по мере загрузки. Для того чтобы задать такое поведе-
ние изображения, надо указать при сохранении в Photoshop для GIF — Interla-
ced, а для JPG — Progressive. Однако использовать эту возможность лично я не
советую: если Интернет «быстрый» — то все равно сразу будет появляться ко-
нечный вариант, а если «медленный», то впечатление от картинки может испор-
титься, так как посетитель сайта сначала увидит рисунок плохого качества.
Атрибут alt
У многих смертных Интернет — крайне медленное и неповоротливое создание
(совсем как крокодил — может очень долго практически не двигаться). Для них,
а также для тех, у кого браузер не показывает графику (текстовый Lynx или
Netscape и Internet Explorer с выключенной графикой), настоятельно рекомен-
дуется прописывать для всех графических изображений атрибут alt:
<IMG src="test.gif" аН="Тестовая картинка">
При загрузке страницы с рисунками, надписанными таким образом, текст в ка-
вычках после alt будет показан вместо картинки, если она не будет загружена.
Эта же надпись будет всплывать в качестве подсказки, если навести на рисунок
указатель мыши.
Здесь важно отметить, что атрибут alt можно указывать лишь для отдельных
картинок. Если вы работаете с image map (то есть единой картинкой, разные
части которой могут ссылаться на разные странички), то единственная альтер-
натива — дублирование всех ссылок обычными текстовыми ссылками в самом
низу страницы. Однако чаще всего бывает проще разрезать картинку (см. заня-
тие 11) на несколько частей и прописать для каждой свой атрибут alt. Визуаль-
но это будет выглядеть точно так же, как и карта, однако пропадает необходи-
мость в текстовых ссылках и загрузка картинки будет происходить более
равномерно (так как части качаются параллельно).
Размеры файлов
Графические изображения, которые вы публикуете на страницах сайта, долж-
ны представлять разумный компромисс между качеством и размерами в кило-
байтах. Не этично заставлять людей загружать заставку в 200-300 Кбайт толь-
ко потому, что вы поленились обработать отсканированную фотографию. Дать
универсальный совет здесь довольно сложно, можно привести лишь некоторые
«статистические» рекомендации. Главное, что следует уяснить, — основной за-
гружаемый объем страницы в среднем составляет графика, и если вы можете на
чем-нибудь сэкономить, так это на ней. Для заглавной страницы общий объем
картинок и текста должен колебаться в пределах от 25 до 100 Кбайт. На страни-
цу второго уровня должно приходиться уже раза в 2 меньше. Если речь идет
о фотоальбоме, можно говорить об общем объеме не более 400-600 Кбайт на
страницу. В любом случае учтите, что на большинстве серверов, дающих бес-
платный хостинг, выделяемый для вас объем места на диске ограничен.
СОВЕТ
Иногда может оказаться полезным применение атрибута LOWSRC. Если прописать его для
картинки, например, <IMG src="testgif LOWSRC="before.gif">, то вначале будет загру-
жено изображение из файла before.gif, и следом поверх него — из test.gif. Файл before.gif
обычно делают очень низкого качества, черно-белый (в Photoshop команда Image > Adjust >
Threshold).
Важно указывать для каждой картинки ее размеры на экране: height, width. Если
эти размеры не установлены, браузер не будет знать, сколько под данную кар-
тинку необходимо отвести места, пока ее не загрузит полностью. Поэтому, когда
задана таблица с множеством графических изображений внутри, общее изобра-
жение появится только тогда, когда загрузится последняя картинка и весь текст.
Если же размер указан, текст проявится сразу, а картинки будут временно заме-
нены браузером прямоугольниками указанных размеров.
Неплохим приемом, позволяющим сочетать небольшой объем памяти на диске
и высокое качество, является нарезка картинки на части и сохранение каждой
части в наиболее подходящем для нее формате. Например, довольно часто по-
верх фотографии наносится текст. Для такой иллюстрации не годится как фор-
мат JPG (надпись будет выглядеть размазанной, с ореолом вокруг букв), так и
формат GIF (число цветов на фотографии будет небольшим, плавные переходы
типа неба заменятся на неровные резкие границы). В таких случаях картинка
нарезается на несколько фрагментов так, чтобы надпись оказалась на отдельном
фрагменте как можно меньшего размера. Каждую часть сохраняют в подходя-
щем формате и помещают в ячейки большой таблицы. О технологии нарезки
будет рассказано на следующем занятии.
Существует проблема, связанная с размерами картинки для фона страницы
(или фона ячеек таблицы). Иногда дизайнеры используют картинку больших
размеров (тысячи точек по горизонтали и вертикали), чтобы избежать автома-
тического повторения рисунка в пределах экрана. В таких случаях необходимо
учитывать, что малый размер графического файла у вас на диске — еще недоста-
точное условие разумного использования графики. Для того чтобы показать
изображение, браузер должен выделить кусок памяти, в котором он поместится
в несжатом виде. То есть вполне возможна ситуация, когда фон, занимающий на
диске (в формате JPE G) 1-2 Кбайтов, потребует в момент показа несколько
мегабайтов памяти. Это может привести как к некоторому замедлению работы
браузера, так и к тривиальным проблемам с нехваткой памяти.
Графический текст
Итак, вы выбрали из богатой коллекции шрифтов на вашем компьютере пару
подходящих для основного текста и один поэкзотичнее — для заголовка, напри-
мер найденный в Интернете ManhattanCyr. Первый порыв — взять и просто на-
писать:
<FONT face="ManhattanCyr" 5тге="+2">Заголовок</РОМТ>
Пишем, проверяем — все прекрасно работает. Но что увидит при просмотре
этой странички человек, который не -является счастливым обладателем шрифта
Графический текст 235
ManhattanCyr? Браузер заменит его на стандартный шрифт, и все тщательно

продуманное вами оформление останется неоцененным. К тому же шрифт-под-
мена может случайно и не содержать русских букв, и тогда даже прочесть заго-
ловок станет невозможно.
Что же делать? Выход есть, правда, он обладает одним маленьким недостатком:
нам придется сделать из текста картинку.
Открываем Photoshop и пишем текст нужным шрифтом. Сохраняем рисунок и
вставляем на соответствующее место заголовка:
<IMG src="Zagolovok.gif" width=... height"...>
СОВЕТ
Картинки, содержащие текст, рекомендуется сохранять в формате GIF.
Не забывайте указывать значения параметров w i d t h и height — напомню, что это

необходимо для своевременного отведения браузером места под картинку.
Превращение текста в картинку открывает широкие перспективы: можно при-
менять к такому тексту любые эффекты, начиная от простого отбрасывания тени
до создания объемных и разноцветных надписей. Экспериментируйте!
СОВЕТ
Если у вас есть выбор, пользуйтесь PostScript-шрифтами (AdobeTypel). По качеству они пре-
восходят обычные TrueType. Правда, для этого вам понадобится установить Adobe Type
Manager.
Однако у такой замечательной медали есть и обратная сторона: графический

файл имеет значительный размер. Выбирать вам, что перевесит — увеличение
времени загрузки страницы или многочисленные преимущества. К числу по-
следних можно отнести, например, такие.
• Все увидят ваш текст именно в том виде, как вы задумали.
• Сглаженный текст часто выглядит гораздо лучше (справедливости ради надо
заметить, что при низком разрешении экрана картинка будет выглядеть хуже
обычного текста, но старые мониторы вымирают быстрее динозавров).
• Вы можете применять к тексту любые спецэффекты, вплоть до анимации.
Графический текст во Flash

По умолчанию Flash приписывает к SWF-файлу описание использованных
шрифтов, поэтому фильм не будет зависеть от наличия или отсутствия их на
диске пользователя. Но Flash также позволяет превратить текст в картинку,
причем увеличение размера файла при этом будет практически неощутимо, ведь
надпись будет представлена в векторном виде, а не в растровом. Конечно, бога-
тейшего арсенала Photoshop по обработке изображений Flash не имеет, но зато
она располагает своими, не менее интересными возможностями. Скажем, если
к обычному текстовому блоку можно применить лишь раскадровку, да и то не
всякую, то для текста-картинки можно использовать и морфинг. Для примера
реализуем известную анаграмму: сделаем из мухи слона. Несложно придумать
чуть ли не полнометражный фильм ужасов на эту тему: сначала отрывают лиш-

нюю пару лапок, затем как следует раздувают с помощью насоса, крылышки пе-
ретаскивают на место ушей... Впрочем, сейчас мы будем заниматься не этим
(можете сами воплотить эту идею в жизнь), а просто превратим слово «МУХА»
в слово «СЛОН».
1. Как всегда вначале создадим новый фильм и назовем его Анаграмма. В нем бу-
дет всего один слой, его даже переименовывать незачем.
2. На этом слое, выбрав красный цвет (или любой другой, кроме черного), по-
любившимся шрифтом напишем МУХА. Затем выделяем текстовый блок и даем
команду Modify > Break Apart (Изменить > Преобразовать в графику) или нажи-
маем Ctrl+B.
3. Теперь выбираем инструмент Ink Bottle (Бутылка чернил) — он служит для
перекрашивания контуров. Выбираем подходящий цвет (например, черный)
и щелкаем на границе каждой буквы (на некоторых буквах вам придется щел-
кать по два раза — на внутренней и внешней стороне). В результате проявит-
ся черный контур. Выделяем всю картинку и выбираем подходящую заливку
(если у вас найдется миниатюрное изображение мухи, оно подойдет как нель-
зя лучше).
4. Переходим на панель Transform (Преобразование) и увеличиваем надпись во
весь стол (если вы использовали банальную однородную заливку, можно сде-
лать «муху» маленькой, а «слона» большим). Теперь настроим подходящий
фон для фильма. Для этого нажмем Ctrl+M или выберем Modify > Movie (Изме-
нить > Фильм). В появившемся окне выберем подходящий цвет фона (Back-
ground Color). Первый кадр готов!
5. Вставляем ключевой кадр 10, выделяем все кадры и на панели Frame (Кадр)
устанавливаем морфинг (в списке Tweening надо выбрать пункт Shape). Пере-
ходим на кадр 10, стираем надпись и делаем новую — СЛОН, выбрав подобаю-
щий солидный шрифт. В качестве заливки можно выбрать любой цвет,
например розовый. Расположение надписей может быть любым, например
«муха» — на потолке, «слон» — на полу.
Посмотрите результат, нажав Ctrl+Enter. Теперь вы можете с полным правом
утверждать, что умеете делать из мухи слона почти в буквальном смысле.
Anti-aliasing
При создании текстовых надписей в графическом редакторе есть свойство, ко-
торое оказывает огромное влияние на результат. Это свойство называется сгла-
живанием (anti-aliasing). Если сглаживание включено, то на границе буквы и
фона появляются переходные цвета. Результат — границы букв выглядят плав-
но и аккуратно (рис. 10.1, а). Если же сглаживание выключено, то буквы имеют
резкие, рваные края (рис. 10.1, б).
Если же надо создать небольшую надпись, то поступать надо прямо противопо-
ложным образом — сглаживание в данном случае ухудшает читаемость текста.
Общий метод в данном случае примерно следующий: создаете картинку доста-
точно большого размера (скажем, 800x600 пикселов), затем печатаете требуе-
мую надпись большими буквами. Сглаживание (Anti-aliasing) при этом должно
быть выключено. Затем уменьшаете картинку с помощью команды Image >

Image Size (Изображение > Размер изображения) до требуемого размера. Резуль-
тат будет более качественным (рис. 10.2, б), чем аналогичная надпись, изначаль-
но набранная символами небольшого размера (рис. 10.2, а).
• Сглаживание
. без него
Рис. 10.1. Так будет выглядеть надпись со сглаживанием (а) и без него (б)
до
Рис. 10.2. Маленькая надпись, полученная с помощью уменьшения изображения (а)
и обычным способом (б); верхняя строка — с включенным сглаживанием,
нижняя — без него

Последние три занятия, наверное, стали для вас тяжелым испытанием. Слиш-
ком много всего сразу. Но такова жизнь — специалисту в узкой предметной об-
ласти очень трудно удержаться на плаву в современном мире. Существенно
лучше действует формула: одно — хорошо, а остального — понемногу.
Сегодня мы побывали в шкуре писателя и художника, и узнали много нового:
• как проверить в Word текст на правописание;
• как научиться печатать очень быстро и не делая ошибок с помощью автопод-
становки текста;
• как сделать из мухи слона;
• как вывести символы, которых нет на клавиатуре;
• как сгладить буквы в Photoshop.
ХоияЕте! На следующем занятии нас ждет встреча с прекрасным и привлека-
тельным.
•
-
Занятие 11
Встречают по одежке
В чарку с вином,
Ласточки, не уроните
Глины комок.
1
Мацуо Басе
На прошлых занятиях мы научились проектировать сайт — создавать упрощен-
ную модель в бумажном и частично электронном виде. И теперь мы можем при-
ступить к созданию сайта.
Большинство сайтов начинается с главной страницы, но некоторые имеют бо-
лее сложную структуру. Придя на такой сайт, вы сначала познакомитесь с за-
главной страницей. Обычно это красивая страница с парой ссылок. Зачем? Все
очень просто. Например, вы решили сделать свой сайт на Flash, но если посети-
тель не имеет соответствующего plug-in, то он ничего не увидит. Обидно, ведь
если бы plug-in был, сайт бы ему наверняка понравился. Выход состоит в том,
чтобы создать заглавную страницу и поместить на ней ссылку на сервер Macro-
media, откуда можно загрузить необходимый модуль к браузеру. Если вы решите
создать и Flash-, и HTML-версию сайта, ссылки на них также можно поместить
на заглавную страницу. Таким образом, заглавная страница — это парадный вход
сайта, его виртуальный мажордом.
Так как парадный вход — это всегда красиво и празднично, в это занятие попало
много всего необходимого, и не только для создания заглавной страницы. Вот его
основные темы:
• зачем и для чего нарезают изображения;
• как создать imagemap;
• зачем нужна заглавная страница на Flash;
• почему необходимо делать ролик на время загрузки сайта;
• что такое cookies и как их использовать на своих страницах.
Нож в правую руку, вилку в левую — приступаем!
1
Графические ссылки
Часто заглавную страницу заполняют графикой. Она может завлечь посетителя
даже на совершенно не интересный ему сайт. Естественно, некоторые части
этой картинки служат ссылками. Для задания графических ссылок обычно при-
меняют две технологии: нарезка изображения на части и изображения-карты
(image map).
Нарезка изображений
Предположим, вы создали большой и сложный рисунок для заглавной страни-
цы. В большинстве случаев имеет смысл разрезать его на части, которые затем
поместить в таблицу с невидимыми разделителями (атрибут border=0). Зачем так
сложно? Во-первых, скорость загрузки такой страницы возрастет, так как от-
дельные части будут загружаться параллельно. Во-вторых, если вы правильно
разрежете рисунок, то можно будет избежать некоторых искажений и оптими-
зировать суммарный объем дискового пространства, необходимый для его хра-
нения. В-третьих, можно легко смоделировать изображение-карту, избежав ис-
пользования сценариев и сделав более верной навигацию.
Что означает «правильно разрежете»? Например, ваш рисунок — это обработан-
ная фотография, на которую помещен текст и простые геометрические формы.
Если вы сохраните его в формате JPG (о форматах было рассказано на преды-
дущем занятии), то вокруг букв и фигур появится грязный ореол. Если вы со-
храните его в GIF, часть цветов может быть потеряна, так как рисунок в форма-
те GIF может содержать лишь до 256 цветов. Таким образом, ни один из этих
форматов не годится для данного рисунка. Однако его можно разрезать на части
так, что каждую из частей можно будет сохранить в оптимальном формате. Даже
если вы решите, что вам хватит 256 цветов и формат GIF подойдет, то, может
быть, у вас на рисунке есть место, где цветов всего 64? Или еще меньше и на
этом можно сэкономить? Или, может быть, цветов больше, чем 256, но они раз-
делены пространственно? Тогда нарезка поможет обойти и это ограничение.
Перейдем вплотную к самой нарезке. Открываем файл в Photoshop, устанавли-
ваем режим показа направляющих (guides) — View > Show guides (Ctrl+;) — и ли-
неек View > Show Rulers (Ctrl+R). Теперь, если потащить мышь с нажатой кнопкой
с любой линейки на изображение, появится тоненькая синяя линия — направ-
ляющая. Добавьте нужное количество направляющих (горизонтальных и верти-
кальных) и расставьте так, как вы собираетесь нарезать картинку. Теперь необ-
ходимо включить режим «прилипания» инструментов к направляющим — View >
Snap to Guides. Осталось взять «в руки» какой-нибудь инструмент выделения и
скопировать все области в отдельные файлы. Сохранять файл лучше не в Photo-
shop, а в специально предназначенной для оптимизации графических файлов
программе, например Adobe Image Ready или Smart Saver фирмы Ulead. Хотя
можно воспользоваться и возможностями самого Photoshop, если сохранять
файл командой Save for Web (Сохранить для Web).
Можно частично автоматизировать процесс, если воспользоваться специальны-
ми программами, уже упоминавшейся Adobe Image Ready, Macromedia Fireworks
или Image Cutter. Технология работы будет примерно той же: вы расставляете
240 Занятие 11. Встречают по одежке
направляющие, а потом программа сама разрежет по ним изображение и даже

создаст HTML-код для таблицы. Если вам не удалось добиться у автоматики
подходящего результата, воспользуйтесь промежуточным вариантом: сохраните
нарезанные файлы в PNG формате. Затем каждый файл оптимизируйте по от-
дельности.
Мы уже создали два изображения, теперь необходимо расположить их вплот-
ную друг к другу. Напишем в HTML-файле:
<IMG src="imagel.jpg">
<IMG src="image2.jpg">
В таком случае Netscape оставляет расстояние между картинками. Чтобы этого
не происходило, не вставляйте пробелы и перевод строки между тегами:
<IMG src="imagel.jpg"><IMG src="image2.jpg">
Сейчас все отображается правильно. То же самое относится и к рисункам в таб-

лицах — все теги от <TD> до </TD> лучше писать в одну строку без пробелов:
<TO><IMG src="imagel.jpg"><IMG src="image2.jpg"></TD>
Изображения-карты (Image map)

Различают два вида изображений-карт (image map): серверные и клиентские. Сер-
верные устроены просто. Например, при ссылке на кнопке типа image на форме
браузер вместе с адресом перехода посылает и координаты щелчка. Однако это
неудобно: если вы скопируете страницы себе на компьютер, то в автономном ре-
жиме связи между ними перестанут работать. Поэтому такие карты были вытес-
нены новой технологией.
Клиентские изображения-карты существенно проще и более эффективны при
взаимодействии с web-серверами. Каждому фрагменту изображения автор стра-
ницы определяет собственные координаты в пикселах. Эти координаты заданы
в том же HTML-файле, что и остальная часть web-страницы, и вы можете осу-
ществить ссылку на другую HTML-страницу так же, как и при использовании
обычного тега <А>.
Первым этапом создания карты должно стать планирование. Вам необходимо
разбить выбранное изображение на фрагменты (в уме или на бумаге) и опреде-
лить, как будет работать изображение-карта.
Создав изображение-карту, важно помнить, что таким образом вы создаете не
единичную ссылку, а множество ссылок:
<IMG src="url" usemap="url#map_name">
или, если описание карты расположено на той же странице:
<IMG src="url" usemap="#map_nanie">
Атрибут usemap указывает метку, где находится карта описываемого изображе-
ния. Карта изображения определяет, какому участку изображения какой адрес
соответствует. Карта изображения может находиться в том же документе, что и
изображение, или в другом документе. Помещение карты в другой документ по-
зволяет собрать все карты изображений в одном документе, если у вас их не-
сколько в различных документах, но добавляет еще одно обращение к серверу
для загрузки данного документа. Параметр map_name указывает имя карты для
изображения, а предшествующий ему url определяет адрес карты. Если URL от-
сутствует, то поиск карты с указанным именем осуществляется в текущем доку-
менте.
Рассмотрим синтаксис определения карты изображения:
<МАР name="map_name">
<AREA [SHAPE=" shape "] COORDS="x.y,..." [href=" reference "] [NOHREF]>
</MAP>
''lnr
Перечислим теги и их атрибуты.
TT ^
• <МАР name="map_name"> — тег определяет начало описания карты с именем

mapjiame.
• Тег <AREA> описывает участок изображения и ставит ему в соответствие URL.
• SHAPE — необязательный атрибут, указывающий на форму определяемой об-
ласти изображения. Может принимать значения:
Q default — по умолчанию (обычно прямоугольник);
О rect — прямоугольник;
Q ci rcl e — круг;
О poly — многоугольник произвольной формы.
• COORDS — координаты описываемой области в пикселах. Для прямоугольника
это четыре координаты левого верхнего и правого нижнего углов, для кру-
га — три координаты (две — центр круга, третья — радиус). Для многоуголь-
ника это описание каждого угла в двух координатах. Соответственно, число
координат равно удвоенному количеству углов. Координаты считаются с
нуля, поэтому для описания области 100 на 100 используется описание:
<AREA COORDS»"0.0.99.99" ...>
• href="url" — описание ссылки, по которой осуществляется переход при щелч-

ке мыши в заданной области.
• NOHREF — атрибут, указывающий, что ссылка для данного участка отсутствует.
По умолчанию, если не указан атрибут href, считается, что действует пара-
метр NOHREF. Также для всех неописанных участков изображения считается,
что используется атрибут NOHREF. Если две описанные области накладывают-
ся друг на друга, то используется ссылка, принадлежащая первой из описан-
ных областей.
СОВЕТ
Если вам сложно самим создать карту, вы можете найти в Сети много бесплатных про-
грамм, готовых сделать за вас всю рутинную работу.
Метки на странице
С помощью карты изображений и обычной ссылки можно перенаправить посе-
тителя не только на определенную страницу, но и на конкретное место на ней.
Для этого служит тег <А>:
<А пате="Метка"></А>
Сослаться на такую метку очень просто. Для ссылки внутри страницы служит
такой вид тега <А>:
<А п^="#Метка">Перейти к метке</А>
А для внешней ссылки — такой:
<А hгef="URL#Meткa">Пepeйти к метке</А>
Создание ролика-заставки
Если главная страница нужна в основном для красоты (чтобы показать себя), то
ролик-заставка, который мы собираемся создать, будет играть важную функцио-
нальную роль. Он будет указывать, как проходит процесс загрузки фильма. При-
чем использовать его можно многократно, для загрузки не только основного
фильма, но и его частей, если вы решили разбить фильм на части.
Сделанный ролик, я надеюсь, потом будет использован для комплектации сайта,
который посвящен оркестру баянистов и аккордеонистов им. П. И. Смирнова
Дворца культуры молодежи Комитета по образованию Санкт-Петербурга. Ссыл-
ку на этот сайт вы сможете найти на сайте dimvovich.narod.ru. В качестве индика-
тора загрузки мы используем нотную строку и ноты, которые будут появляться
на ней по мере загрузки.
Простой индикатор загрузки

Сначала создадим простенький индикатор — текстовое поле и шкалу, отражаю-
щие степень выполнения загрузки.
1. Нам понадобится два слоя: слой текстового поля (нижний) и слой полосы
индикации. Для полосы индикации нам понадобится символ — прямоуголь-
ник с контрастным широким контуром. На слое полосы индикации надо рас-
положить один экземпляр символа и дать ему имя, например Chart. Этот же
экземпляр надо перекрасить в цвет контура с помощью панели Effect (Эффект).
2. На слое текста надо расположить в том же месте на столе еще один экзем-
пляр прямоугольника — без покраски и имени, а также создать текстовое поле.
На панели Text Options (Параметры текста) надо задать параметр Dynamic Text
(Динамический текст) и имя связанной переменной — Load.
3. В первом кадре, открыв панель Actions (Действия), необходимо ввести сле-
дующий сценарий:
nowLoad =(_root . _f ramesLoaded/_root . _tota 1 Frames )*100 :
nowLoad=Math . round ( nowLoad ) :
Load - nowLoad + 'T' :
_root. Chart. _xscale = nowLoad;
В этом сценарии в первой строке определяется процент загруженного содер-
жимого. Это число округляется и из него создается строка вывода, которая
присваивается текстовой переменной. В последней строке изменяется размер
полосы индикации.
4. Затем следует вставить ключевой кадр 5 (для быстро загружающихся филь-
мов можно и меньше). В него следует вписать другой сценарий:
if (_root._framesl_oaded == _root._totalFrames) {
gotoAndPlay ("Scene 2". 1);
} else {
gotoAndPlay (1);
Данный сценарий послужит проверкой на завершение процесса загрузки.

Если общее количество кадров (_root._totalFrames) будет равно загруженно-
му (_root._framesLoaded), фильм перейдет ко второй сцене, если нет — вернет-
ся к первому кадру.
СОВЕТ
Иногда при загрузке необходимо дождаться не ее окончания, а лишь загрузки определен-
ного кадра. Это можно сделать с помощью действия ifFrameLoaded, которое проверяет, за-
гружен ли определенный кадр, и, если он уже загружен, переходит к выполнению указан-
ных далее действий.
Но если фильм загружается достаточно долго, время ожидания можно скрасить

более полноценной заставкой. В одном фильме можно использовать оба типа
заставки — для больших и для маленьких частей.
Иногда бывает разумно следить за загрузкой не по кадрам, a ino байтам. Ведь
может случиться так, что несколько последних ключевых кадров «перевесят»
весь фильм. Тогда надо использовать действия getBytesLoaded и cjetBytesTotal (это
методы объекта MovieClip), например, вот так:
Loader._yscalе=(МуС1i p.getBytesLoadedt)/MyClip.getBytesTotal());
Ноты
Для начала создадим символ ноты.
1. Откроем Flash и создадим новый фильм. В окне Movie Propericies (Свойства филь-
ма) укажем размер фильма — 790x200 — и приступим к созданию клипа-ноты.
2. Создадим новый символ-клип и назовем его Нота.
3. Нарисуем овал или круг, на панели Fill (Заливка) выбереш градиентную ради-
альную заливку. Выделим заливку круга и настроим гр.адиент так, чтобы он
создавал эффект объема — выпуклостей и вогнутостей, так же, как мы посту-
пали при создании градиентов на занятии 4. Если изначально вы нарисовали
круг, сделайте из него овал с помощью панели Transform (Преобразование).
4. Выберем инструмент Transform Fill (Преобразовать заливку) из набора моди-
фикаторов инструмента Paint Bucket (Банка краски). Передвинув квадратный
маркер в сторону, добейтесь, чтобы фигура выглядела приплюснутой сферой,
а затем, сдвинув центральный маркер, — чтобы блик с местился в левый верх-
ний угол. Контур лучше удалить или сделать его не контрастным заливке.
5. Аналогично создадим вертикальную трубку — прямоугольник, заполненный
линейным градиентом серых тонов. С помощью Transform Fill (Преобразовать
заливку) можно добиться, чтобы блик был смещен в правую часть. Трубку
рисовать лучше на отдельном слое, как и все части символа.
6. Самая сложная часть — нарисовать «хвост» ноты (рис. 11.1). Для этого надо
нарисовать прямоугольник, выбрать инструмент Arrow (Стрелка), а затем,
аккуратно подводя стрелку к углам и сторонам прямоугольника изменить

форму фигуры на требуемую. Обратите внимание, как указатель мыши меня-
ет свой вид: при подведении к стороне рядом со стрелкой появляется дуга,
при наведении на угол — уголок. Залить рисунок следует радиальной залив-
кой в виде тора. Потом необходимо сместить, повернуть и растянуть заливку
так, чтобы верхний светлый край тора протянулся от одного края фигуры до
другого.
Рис. 11.1. Работа с инструментом Transform Fill (Преобразовать заливку)
7. Нота получилась, но если нам захочется ее раскрасить, придется создавать

новый символ другого цвета. Если наложить эффект Tint (Оттенок) на сим-
вол, то нота окр асится в сплошной цвет и переливы градиента пропадут. Как
быть? Выход прост — использовать градиент не цвета, а прозрачности. Тогда
при наложении оттенка возникнет градиент цвета от цвета оттенка до цвета
фона. Единственное, с чем придется определиться заранее, — это какой из
цветов будет темнее. Именно этот цвет должен быть на краю рисунка. Если
темнее окажется ивет фона, тогда край надо делать прозрачным для выпук-
лых фигур.
Щелкните на символе в окне библиотеки правой кнопкой и выберите команду
Dublicate (Дублировать). Переименуйте символ и измените градиентную за-
ливку. Прозрачность доводить до нуля не стоит — фигура сольется с фоном.
Для того чтобы сразу оценить результат, щелкните на столе правой кнопкой
мыши, выберите в контекстном меню команду Movie Properties (Свойства филь-
ма) и выберите подходящий цвет фона в модификаторе Background (Фон) -
я задал темно-синий. Так как слои будут просвечивать, необходимо взять
ластик и стереть перекрывающиеся части рисунка.
Перекрасить градиент » другой цвет можно и с помощью обычного оттенка. Надо устано-
вить ему не 100%-ную непрозрачность — градиент будет проглядывать сквозь нее. А с по-
мощью параметра Advanced (Дополнительно) можно настроить оттенок, как хочется, -
ведь там вы можете не только прибавлять, но и вычитать цвет.
Нотная строка
Нотная строка будет выглядеть как пять полосок-трубок, протянувшихся от од-
ного края до другого (рис. 11.2). Можно создать новый символ и скопировать в
него стержень из ноты. Растянуть символ по экрану можно с помощью панелей
Info (Информация) или Transform (Преобразование).
[:J.-|,,
5 ' т- аЩш
jilulo ~^1 ]
Рис. 11.2. Так должны выглядеть контуры растущих линий
Каждую полоску надо поместить на своем слое для раскадровки. Пусть это бу-
дут слои: Линия!, Линия2, ЛинияЗ, Линия4 и Линия5. Расположить их можно ровно
или лесенкой, главное, чтобы расстояния между символами были одинаковыми.
В этом поможет кнопка Space evenly vertically (Равное расстояние друг от друга
по вертикали) панели Align (Выравнивание).
Теперь зададим анимацию. В каждый из пяти слоев установим ключевой
кадр 25 (напомню, что проще всего вставить ключевой кадр, нажав F6). В пер-
вом ключевом кадре на панели Transform (Преобразование) сожмем линию до О
и поместим ее в левое положение (от символа останется только перекрестие
центра), чтобы она вырастала из точки на левом краю. Для того чтобы видеть
конечное расположение линии, включите режим кальки, нажав кнопку под ки-
нолентой Onion Skin Outline (Контуры на кальке), и выберите режим Onion All (По-
казать все кадры).
Осталось только задать раскадровку. Выделите кадры с первого по следующий
ключевой и на панели Frame (Кадр) установите в списке Tweening (Кадрирова-
ние) пункт Motion (Раскадровка). В поле Easing (Ускорение) для первой линии
задайте 100, для второй — 50, для четвертой - -50, для пятой - -100; для
третьей оставьте 0. Так можно задать, чтобы линии росли не одинаково, а с раз-
ной скоростью (рис. 11.2).
246 Занятие И. Встречают по одежке
СОВЕТ
Сохраните созданные градиенты в файле палитры, как описано в занятии 4. Тогда вы лег-
ко сможете ими воспользоваться в следующий раз.
Расположение нот и звук

Осталось совсем немного — задать появление нот и звуковое сопровождение.
Для каждой ноты заведем свой слой. Пусть их будет 7. Каждую из нот надо рас-
положить на своем месте (см. рис. 5.1) и раскрасить в свой цвет. Число 7 у меня
жестко ассоциируется с числом основных цветов радуги — в такие цвета мы
и покрасим ноты. Важно только не забыть, что оттенки должны быть светлее
фона.
Теперь зададим анимацию — первая нота начнет проявляться после первого
кадра. На слое надо задать два ключевых кадра: 1 и 10. В кадре 10 (и далее) про-
зрачность должна быть равна 100 %, а в первом — 0. Так как установлен эффект
оттенка, задать дополнительную прозрачность можно с помощью пункта Advan-
ced (Дополнительно). Между первым и десятым кадрами надо установить рас-
кадровку. Для остальных нот номера кадров будут другими, но устройство слоя
останется похожим.
А сейчас займемся звуком. Создадим для него слой Звук. Дальше можно пойти
двумя путями: задать звук к каждой ноте или пустить единую звуковую дорож-
ку. Дайте команду Import (Импорт) и выберите нужный звуковой файл. Если у
вас не установлен проигрыватель QuickTime 4, Flash может понимать три звуко-
вых формата: WAV, AIFF и МР 3. После импортирования звуковой файл ока-
жется в библиотеке. Дважды щелкните на первом кадре фильма на слое Звук и
перейдите на панель Sound (Звук). В списке выберите импортированный звук -
звуковая дорожка побежит по слою.
Использование первого пути, когда каждой ноте сопоставляется свой звук, име-
ет серьезный минус: на разных компьютерах скорость исполнения фильма будет
разной и согласовать кадры и звук может быть затруднительно. А если учесть,
что показ фильма будет зависеть от скорости загрузки, то достичь нужного эф-
фекта практически невозможно.
Индикация
Последний слой — слой, управляющий индикацией загрузки. Назовем его Инди-
кация. Необходимо создать невидимый символ и встроить в него следующий
сценарий:
nowLoad =(_root._framesLoaded/_root.J;otalFrames)*70.•
nowLoad=Math.round(nowLoad):
If (_root,_fnamesLoaded == _root._totalFrames) {
_root.gotoAndPlay ("Scene 2". 1);
} else {
_root.gotoAndPlay (nowLoad);
}
Процесс отслеживания степени загрузки можно начинать примерно с кадра 30,
чтобы показать, как вырастают линии. Тогда надо умножать не на 70, а на 40
и добавлять 30 к значению кадра перехода:
nowLoad =(_root._framesLoaded/_root._total Frames )*40:

nowLoad=Math . round(nowLoad)+30 ;
Можно вставить блокирование зацикливания:
if (_root._framesLoaded =- _root._totalFrames) {
_root . gotoAndPl ay ("Scene 2". 1):
} else {
if (_root._currentframe< nowLoad ) {_root. gotoAndPlay (nowLoad)};
}
Данный сценарий будет определять, какая доля кадров загружена, и отправлять
на кадр, отражающий данную долю. Когда все кадры загружены, осуществляет-
ся переход на следующую сцену. В символе должно быть два кадра, таким обра-
зом через кадр будет производиться проверка на степень загрузки.
Для подстраховки во всех слоях надо вставить кадр 71, в слое индикации сде-
лать его ключевым, убрав символ, который там находился. В кадре 71 следует
задать сценарий, управляющий конечным этапом загрузки:
if (_root._framesloaded == _root._total Frames) {
gotoAndPlay ("Scene 2". 1);
} else {
gotoAndPlay (70);
}
Таким образом, фильм будет перемещаться между кадрами 70 и 71, пока загруз-
ка не окончится.
Замена и компрессия звука

Предположим, что вы импортировали некий звуковой файл и активно его ис-
пользовали в сопровождении фильма, а потом нашли более подходящий. Вам не
придется снова импортировать звук и последовательно менять его во всех слу-
чаях. Достаточно дважды щелкнуть на значке звукового файла в окне библиоте-
ки. Откроется окно Sound Properties (Свойства звука) (рис. 11.3).
В данном окне можно легко заменить один звук другим, используя кнопку
Import (Импорт). Затем достаточно нажать кнопку Update (Обновить), и все вхо-
ждения старого звукового файла в фильме будут заменены на новый. В верхнем
поле можно изменить название звука в библиотеке.
Это же окно предоставляет возможность выбрать способ сжатия звука, что мо-
жет значительно уменьшить объем фильма. Типы компрессии приведены в рас-
крывающемся списке Compression (Компрессия).
• Default — вариант компрессии, заданный по умолчанию. Соответствует типу
импортированного файла.
• ADCPM — данный формат наилучшим образом подходит для небольших по
длительности звуков.
• МрЗ — самый популярный тип компрессии. Может уменьшить размер звуко-
вого файла в 10-15 раз без существенных потерь качества звука. Варьируя
параметры Bit Rate (Скорость в битах) и Quality (Качество), постарайтесь най-
ти удовлетворительный результат как по звучанию, так и по занимаемому
объему. Вспомогательная информация отражается в нижней строке. Однако
не стоит использовать этот формат для коротких звуковых эффектов, так как
во время распаковки звука, происходит некоторая задержка.
Raw — еще один формат, позволяющий изменить частоту дискретизации; об-
ладает худшими параметрами по уменьшению объема по сравнению с ADCPM.
jpjChord.wav
; ; C:\WINDOVVS\MEOtM
:
,."|5мая1аЭВг. ;20:Й1 0
. . .- ' ;:• -.... .. -.. • • и ;. ,;.;•:- ' Щ |Й^
f|
Рис. 11.3. Окно Sound Properties позволяет не только узнать много интересного
о звуковом файле, но и заменить его
СОВЕТ
Если вы хотите привязать изменение изображения к звуку (например, танец под музыку
или слайд-шоу с речевым сопровождением), используйте потоковый звук, выбрав значе-
ние Stream (Потоковый) в списке Sync (Синхронизация) на панели звука. Если вы исполь-
зуете достаточно сложную анимацию и проигрыватель Flash не будет успевать отрисовы-
вать изображение, измените скорость воспроизведения фильма в окне свойств.
СОВЕТ
Старайтесь использовать звуки в режиме моно: они занимают в 2 раза меньше места. В иг-
рах можно реализовать интересные стереоэффекты, используя перетекание звука из одно-
го канала в другой.
Создание заставки во Flash

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

того «тяжелый» фильм. Впрочем, если заставка использует символы фильма, то
она может стать весьма богатой эффектами и анимацией. Обязательный атри-
бут заставки — кнопка, дающая возможность прервать ее показ.
В качестве заставки мы создадим еще одну вариацию на тему нот. Капли дождя,
падая на невидимую поверхность, растекаются в линии нотной строки, а не-
сколько капель, пройдя через радугу, окрашиваются в ее цвета и, попадая на ли-
нии, превращаются в ноты. Это будет первой сценой будущего сайта-фильма.
Ссылку на готовый сайт оркестра вы сможете найти на моем сайте: www.dimvovich.
narod.ru. Возможно, что заставка и остальные части сайта окажутся не в том виде, как они
описаны в книге. Но исходные тексты вы всегда сможете найти в материалах, посвящен-
ных поддержке книги.
Символы капель
Создайте новый файл и откройте фильм ролика, созданного в предыдущем раз-
деле, как библиотеку — это делается командой File > Open As Library (Файл > От-
крыть как библиотеку). Все созданные символы появятся в окне библиотеки,
и вы сможете их использовать. Задайте размеры во весь экран, цвет фона и со-
храните фильм под именем Intro.fla.
СОВЕТ
Используйте команду File > Open As Library (Файл > Открыть как бибоиотеку) для того, что-
бы включить созданные ранее клипы и символы в новых проектах.
Преобразовать каплю в линию, используя морфинг — красивое и эффективное

средство для таких случаев, — не получится, так как Flash не может преобразо-
вать фигуру в символ. Придется создавать новый символ специально для этого
преобразования. Но для начала нарисуем каплю.
Капля
Капля будет устроена так же, как и нижняя часть ноты. Только форма у нее бу-
дет не овальная, а каплеобразная.
1. Вставьте новый символ-клип, назвав его Капля.
2. Нарисуйте эллипс и щелкните на его контуре инструментом Subselect (Под-
выделение). На контуре появятся маркеры кривых Безье — основных состав-
ных частей любой линии в векторном виде.
3. Теперь возьмите перо и, нажав клавишу Alt, щелкните на верхнем маркере. Он
станет угловым. Если на данном этапе вернуться к инструменту Subselect
(Подвыделение) и потянуть маркер вверх, образуется острый угол. Если по-
тянуть не угловой маркер (когда он выделен, это белый кружок), то форма
острия будет округлой (рис. 11.4).
4. Придайте капле более подходящую форму, перемещая маркеры кривых, сами
точки и маркеры их касательных.
4f Flash 5 - [Movie!]
Fie Edit View..Insert Modify Text Contra! ,• •^••;.:;i,.:
Рис. 11.4. Разница между угловой и простой точкой на кривой Безье
5. Удалите контур, а заливку сделайте радиальной градиентной. Настройте ее

так, чтобы капля выглядела объемной. Градиент можно сделать цветным (бе-
ло-голубым), для окраски капель в цвета радуги мы воспользуемся эффектом
Advanced (Дополнительно). Каплю можно считать готовой.
Растекание капли
Еще нам понадобится клип, в котором капля будет растекаться в линию строки.
1. Создайте новый клип Растекание. В нем нам понадобится слоев 5-6. В первый
слой скопируйте уменьшенную фигуру из клипа Капля и разместите ее где-
нибудь выше центра.
2. Вставьте ключевой кадр 15, в нем переместите каплю вниз так, чтобы она ка-
салась крестика в центре клипа. Затем вставьте ключевой кадр 30. В нем уда-
лите каплю и вставьте фигуру из клипа Линия, раскрашенную в те же голубые
непрозрачные цвета, или нарисуйте подобную. Размеры линии должны со-
впадать с размерами, которые были заданы в ролике. Выравнивание объектов
выполняется с помощью панели Info (Информация). Если вы установите чер-
ный квадратный маркер в центре условной схемы на панели, то координаты
линии должны стать равными нулю.
3. Теперь самое главное. Выделите кадры с 15-го по 30-й (нажав Shift) и на панели
Frame (Кадр) в списке Tweening (Раскадровка) задайте пункт Shape (Морфинг).
На киноленте вытянется стрелка на зеленом фоне от кадра 15 до кадра 30.
4. Прокрутите считывающую головку вперед-назад, чтобы посмотреть, как фи-

гуры преобразуются одна в другую.
5. Теперь между кадрами 1 и 15 надо задать раскадровку перемещения капли.
Выделите кадры (до 14 включительно) и на панели Frame (Кадр) задайте
Motion (Раскадровка). Стрелка не возникнет: фигура на кадре 15 стала частью
символа-морфинга.
Использовать раскадровку движения не обязательно, можно задать и морфинг, но это мо-
жет утяжелить и замедлить фильм.
6. Выделяем кадр 15 и нажимаем F6. Теперь ключевым стал кадр 16. Выделим
кадр 15 и на панели Frame (Кадр) отменим морфинг.
7. Снова выделим кадры с 1-го по 15-й. Если теперь настойчиво задать для них
раскадровку (или на панели кадров, или командой Create Motion Tween (Вы-
полнить раскадровку)), то стрелка на фиолетовом фоне обязательно появится.
Для экономии места на диске можно вместо фигуры в кадрах 1-15 переме-
щать клип.
8. Осталось дополнить клип несколькими штрихами. В нескольких оставшихся
слоях в кадре 15 вставьте ключевой кадр. В этом кадре необходимо располо-
жить символы капель, только более мелких, которые полетят в разные сто-
роны (рис. 11.5). В ключевом кадре 15 они должны располагаться около
материнской капли, а к кадру 30 их надо вывести за пределы экрана. Все пе-
ремещения между кадрами выполнит Flash раскадровкой. В последнем кадре
дайте команду stopO;.
Рис. 11.5. В режиме кальки можно видеть всю последовательность изображений при морфинге
9. Далее необходимо разместить линии на основной сцене. Назовите слой Линии

и в первом кадре перенесите из окна библиотеки пять символов. Выделите их
все и на панели Instance (Экземпляр) в верхнем списке задайте пункт Graphic
(Графический рисунок), ниже Single Frame (Одиночный кадр) и укажите

кадр 30. Капли превратятся в готовые линии. Теперь разместите их, как в пре-
дыдущем проекте, оперируя панелями Align (Выравнивание) и Info (Инфор-
мация).
10. Затем следует растащить различные символы в разные кадры, чтобы капли не
падали стройными рядами. Для этого необходимо вставить 5 ключевых кад-
ров и удалить по очереди символы. В первом останется 1 символ, в 10 (напри-
мер) — 2, а в кадре 40 — все 5.
Если вы будете действовать неаккуратно, капли начнут падать в каждом ключевом кадре
заново, ведь Flash может посчитать, что у него в ключевом кадре встретился новый сим-
вол. Чтобы было проще, разместите каждую линию в своем слое.
Капли и ноты
Нам понадобится еще один символ, содержащий морфинг. Это будет капля,
превращающаяся в ноту. Схема работы будет такой же: сначала будет падающая
капля, а затем она превратится в нотную фигуру (рис. 11.6). Единственное су-
щественное различие — в клипе ноты разные части расположены на разных сло-
ях, а вам придется собрать их вместе, используя команду Paste in Place (Вставить
на место).
Рис. 11.6. Контуры промежуточных состояний между каплей и нотой

После того как вы разместите дождь в фильме, вернитесь к размещению опи-

санных выше символов. При прохождении радуги капля должна изменить цвет.
Это можно сделать, начав путь капли с радужной полоски, а можно отразить не
первый кадр, как мы делали при размещении линий. Если вам будет необходи-
мо сменить окраску символа, вставляйте ключевой кадр и меняйте. Но не за-
будьте, что на всем протяжении фильма символ выглядит так же, как и в пер-
вом кадре.
Для удобства работы поместите сначала все ноты на стол, каждую в своем слое,
выровняйте их, разместите правильно по вертикали — вам поможет центр-пере-
крестье (в самом символе ноту надо разместить в центре, тогда, ориентируясь
по этому центру, вы сможете правильно разместить ноту на строке и вместо «до»
не укажете «ре»). После того как ноты оказались на месте, приступайте к рас-
краске.
Остальные символы
Дождь из ниоткуда — слишком бедный сюжет для фильма. Поэтому мы допол-
ним его появлением радуги. Капли, которые будут проходить через радужные
полосы, окрасят нам ноты.
Фон и полоса радуги
Раскинуть радугу на темно-синем фоне будет не очень эффектно — все-таки она
обычно бывает на голубом небе. Поэтому сначала создадим фон — прямоуголь-
ник с линейным градиентом прозрачности. Покрасив его в голубой цвет и раз-
вернув сверху, мы получим верхнюю половину голубую, а нижнюю — темно-си-
нюю. Разворачивание фона надо задать раскадровкой — из узкой полосы до
полного экрана.
Радуга представляет собой градиент, на этот раз — радиальный и прозрачный.
Символом можно сделать не всю радугу, а только одну полосу. К центру полосы
прозрачность должна быть меньше (то есть коэффициент Alpha (Прозрачность) -
больше). Таким образом, перекрывая раскрашенные в разные цвета полосы,
можно достичь эффекта переливания цветов, не используя цветового градиента.
Но можно взять за основу и градиент восьми цветов (все цвета радуги и белый)
и задать небольшую прозрачность у экземпляра, помещенного на стол. Радуга
тоже будет появляться на небе не сразу, а постепенно — раскадровкой прозрач-
ности.
Для создания радуги используйте прием, описанный ранее: нарисуйте кольцо,
а потом выделите и отрежьте нижнюю половину. У вас получится идеальное по-
лукольцо. Придать нужную форму вы сможете на столе главной сцены.
Появление голубого неба и радуги надо начать примерно с кадра 70 — после по-
явления последней линии.
Дождь
Конечно, дождь можно нарисовать по капельке — но с множеством слоев на
главной сцене не очень удобно работать. Лучше создать клип Дождь, в который
будет вложено движение нескольких капель. Разместив несколько таких клипов
на слое с небольшим интервалом (по кадрам и по положению на столе), мы смо-

жем довольно просто нарисовать дождь (рис. 11.7).
б о
ОЛ
оо ох
-о о
Q о
о
б
о
о
\чГ
о
о
Рис. 11.7. Дождь в режиме кальки
Кнопка
Кнопка — последний штрих. Сделайте символ-кнопку с надписью «Пропустить
заставку». Для кнопки задайте сценарий:
on (release) {
nextScene ():
}
В отдельный слой можно вставить звуковой файл, проигрывание которого бу-
дет сопровождать происходящее на экране.
Фильм-заставка готов. Обратите внимание, что при показе в браузере объекты
могут выходить за границы стола (рис. 11.8).
Теперь можно приступать к разработке основного сайта.
SWF-файл у меня получился очень «легкий» — около 11 Кбайт (без звука). Однако не лю-
бой компьютер такой фильм покажет кадр за кадром: если кадры не успевают появляться
на экране (не хватает вычислительной мощности), то Flash начнет «проглатывать» кадры.
В случае синхронизации звука и анимации фильм может превратиться в набор разнород-
ных кадров под музыку.
т Intro - Microsoft Internet Exploi

Ills EditMiSew. • .fivctrites • look: . tjelp.
Рис. 11.8. Кадр фильма, показанный Internet Explorer
Эффекты: интерактивные и не очень

В этом разделе собрано несколько полезных сценариев, ведающих интерактив-
ностью: меняющих изображение, запоминающих предпочтения посетителя и т. д.
Главная цель этих примеров (вы можете просто вставить их в свои страницы) -
научить вас работать с некоторыми функциями и объектами JavaScript.
Интерактивные эффекты
В первую очередь мы остановимся на интерактивных элементах страницы -
сценариях, которые могут преобразовать ее для удобства пользователя.
Сценарий, меняющий изображение
Данный сценарий будет изменять изображение, когда на него наводят указатель
мыши, причем изменять случайным образом:
<SCRIPT language»"JavaScript">
var maxlmage=4;
function mOn(i) {
var j=Math.round ( Math.random()*maxlmage);
// Получаем случайное число
if(document.images) document.images["im"+i].src="image"+j+".gif";
// Присваиваем значение
256 Занятие И. Встречают по одежке
</SCRIPT>
В тексте страницы должны быть встроены ссылки-рисунки. Реальные имена

файлов с рисунками должны иметь вид imageN.gif:
<А href="#" onMouseOver="mOn(l):" onMouseOut="mOn(l)"><IMG src="imagel.gif"
аН="Рисунок" border="0" name="iml"></A>
или
<IMG src="imagel.gif" аН="Рисунок" border="0" name="iml" onMouseOver="mOn(l):"
onMouseOut="mOn(1)">
Текст в строке состояния

Данный сценарий познакомит вас с работой со строкой состояния (листинг 11.1).
Его легко преобразовать к виду, когда в строке состояния будет выводиться
подсказка при наведении на ссылку или рисунок.
Листинг 11.1. Использование строки состояния
numLine = 2:
// Задаем количество строк
StatusBar = new Array(numLine):
StatusBarQ] = "Сценарии на JavaScript - опасная, но полезная вещь!"
StatusBar[2] = "Осторожно, бегущая строка может завесить ваш компьютер!"
doLoop - true;
// Переменная, отвечающая за зацикливание
Speed = 100:
// Скорость печати: символ в миллисекунду
Pause - 1000:
// Величина паузы между посланиями
CurrentMessage = 1:
// Текущее сообщение
CurrentLetter - 0;
// Текущая буква
function ShowMessO {
if (CurrentMessage > numLine) {
// Если посланий стало больше, чем строк
if (doLoop) { CurrentMessage = 1; CurrentLetter = 0;
// и если указано зацикливание - начинаем сначала
} else { window. status « ""; return:}:
// Иначе возвращаемся к пустой строке состояния
}:
currentText = StatusBar[CurrentMessage]:
// Копируем в переменную currentText из строки состояния
if (CurrentLetter > currentText. length) { CurrentLetter = 0: CurrentMessage++:
// Если прошли все буквы - начинаем послание
setTimeout ("ShowMessO". Pause): }
else { Msg = currentText. substring(0. CurrentLetter + 1):
// Иначе добавляем букву
window. status - Msg: CurrentLetter++;
// Присваиваем строке состояния
setTimeout ( "ShowMess ( ) " . Speed) ;
</SCRIPT>
В тег <body> надо вставить обработчик события onload:

<BODY onLoad="ShowMess();">
Полезные сценарии
В этот раздел вошли сценарии, использующие различные возможности Java-
Script, которые могут пригодиться вам при оформлении сайта.
Часы
Данный сценарий поможет вам научиться работать со временем с помощью
JavaScript (дата будет выглядеть по-разному в разных браузерах).
Исходный текст всей страницы:
<HTML>
<НЕАО>
<! --
function fulltimeO
{
var t1me=new OateO;
document . cl ock . f ul 1 . va 1 ue=t i me . toLoca 1 eStri ng( ) ;
setTimeout С ' f ul 1 tirae( ) ' . 500 )
</SCRIPT>
</HEAD>
<BODY>
<FORM name=clock>
<INPUT type=text size=40 name="full">
</FORM>

</SCRIPT>
</HTML>
Откуда посетитель
Этот сценарий может определить откуда (с какой страницы) пришел на ваш сайт
посетитель и какой у него браузер:

</SCRIPT>
Такой сценарий можно использовать для сбора собственной статистики.
Правая кнопка мыши
Как обработать нажатие левой кнопки мыши, мы знаем. А можно ли перехва-
тить нажатие правой? Можно. Это делается так:
9 Зак. 96

</SCRIPT>
Cookie
Мгла истории скрывает, откуда пришел термин «cookie». Обычно говорят, что во
времена зарождения UNIX где-то использовалось словосочетание Magic Cookies.
С распространением Всемирной сети cookie превратилось в межплатформенное
явление, знакомое многим пользователям.
Для большинства работающих в Интернете взаимодействие с cookie заключается
во включении или отключении соответствующих параметров в браузере. Обыч-
но приходится обращать на них внимание в тех случаях, когда хочется остаться
неопознанным для сервера, на который требуется попасть, или, наоборот, когда
необходимо, чтобы сервер «узнавал» вас.
Cookie довольно редкий гость на персональных страницах. В основном потому,
что трудно самостоятельно взяться за это дело. Между тем, с их помощью мож-
но сделать свою страницу более интерактивной, интересной и, следовательно,
посещаемой.
Cookie — это небольшой текстовый файл, который хранит браузер. Браузер пе-
редает его серверу с каждым запросом как часть HTTP-заголовка. Некоторые
значения cookie хранятся только в течение одной сессии работы и удаляются
после закрытия браузера. Другие, установленные на некоторый период времени,
записываются в файл. В Netscape Communicator он называется cookies.txt и нахо-
дится в рабочей директории браузера. Internet Explorer хранит каждое значение
cookie в отдельном файле в отведенном для этого каталоге.
Так выглядит начало файла cookies.txt на компьютере автора:
# Netscape HTTP Cookie File# http://www.netscape.com/newsref/std/cookie_spec.html# This
is a generated file! Do not edit.
FALSE /D|/Books/My/Flash2/Flash/Ch7 FALSE 1057154070 counter 12

Последняя строка оставлена сценарием, приведенным в листинге 11.2.
Сами по себе cookies не могут ничего сделать, будучи лишь текстовой информа-
цией. Однако браузер (и сервер) может ее считывать и анализировать, после чего
настраивать свою работу соответствующим образом. Например, в случае авто-
ризованного доступа к какому-либо ресурсу WWW в cookies сохраняется имя
пользователя и пароль. Благодаря этому пользователь не вводит их снова при
запросах каждого документа, защищенного паролем. Cookies часто используют
для персонализации на крупных порталах (например, на Яндексе).
Далее приведена страничка и сценарий — пример работы с cookies (листинг 11.2).

Функции, описанные в сценарии, позволяют работать с любыми cookies (под-
счет посещений можно реализовать проще, так что этот пример приведен ис-
ключительно для того, чтобы познакомить читателя с cookie).
Листинг 11.2. Обработка cookies
<HEAD>

</SCRIPT>
</НЕАО>
Вы можете использовать данные функции для работы со своими cookies: запо-

минать там имя, пароль и предпочтения посетителя, чтобы сделать посещение
ваших страниц более привлекательным событием.
Казалось бы, что может сделать плохого небольшой стандартизованный файл, такой как
cookie? Сам по себе — ничего, а вот «дыры», оставленные разработчиками браузеров при
его реализации, могут принести немало проблем. Если вы решили использовать механизм
cookie на вашем сайте, будьте готовы, что их в один прекрасный момент могут запретить.
А также будьте готовы бороться с «червями» и «вирусами», которые решат вместо cookie
попасть на ваш компьютер.
Создание часов
Раз уж зашел разговор о полезных сценариях, необходимо хоть одним словом
обмолвиться о полезных фильмах. В данном небольшом проекте мы создадим
часы. Для начала — электронные.
Для их создания нам потребуется два динамических текстовых поля, связанных
с переменными myTlme и myDay, и два кадра. (Мы будем использовать лишь один
кадр; второй нужен только для того, чтобы фильм можно было запустить в ре-
жиме бесконечного проигрывания.)
Сценарий для определения времени будет следующим:
time = new DateO; // Создаем новый объект типа Date
hours = time.getHoursO: // Присваиваем переменным значения часов
min = time.getMinutesO: // минут
sec = time.getSecondsO: // и секунд
myTime = hours + ":" + min + ":" + sec;
WeekDay = time.getDayO: // Присваиваем переменным значения дня недели
year = tirae.getFullYearO: // года
month - time.getMonthO: // месяца
day = time.getOateO: // даты
myDay = day + " " + month + " " + year + " " + WeekDay:
Можно поступить проще: создать одно динамическое текстовое поле myTime и в
первом кадре ввести сценарий:
time = new DateO:// Создаем новый объект типа Date
myTime - time.toStringO:
В результате вы увидите строку подобного содержания:
Fri Sep 6 10:57:01 GMT+0400 2002
Теперь создадим классические часы со стрелками. Для этого нам понадобятся
круг и три клипа стрелок (разные или одинаковые — главное, чтобы у экземп-
ляров клипов были разные имена: НА, MA, SA). Изначально разместим стрелки
вертикально, а центры клипов — в центре циферблата. Для этого можно вос-
пользоваться, например, панелью Info (Информация) или Align (Выравнивание).
Осталось только в первом кадре разместить сценарий:
time = new DateO;
hours = time.getHoursO:
min = time.getMinutesO;
sec = time.getSecondsO:
HA._rotation=720*hours/24:
MA._rotation=360*min/60:
SA,_rotati on=360*sec/60;
Можно украсить циферблат цифрами, рисунками или другими аксессуарами для

понятности.

•
Сегодня мы познакомились с парадным входом сайта — красивой страницей,
привлекающей посетителя. Заодно мы узнали много нового:
• как нарезать картинку на части и сложить обратно;
• как без нарезки с одной картинки направить посетителя по разным ссылкам;
• как сделать дождь и радугу на своих страницах;
• как создать индикатор, указывающий степень загрузки фильма;
• познакомились с cookies и научились их использовать.
До скорой встречи на деловом заседании!
Занятие 12
Делу —время...
Во тьме безлунной ночи
Лисица стелется по земле,
Крадется к спелой дыне.
Мацуо Басе'1
Чему — время, а чему — час, делу или потехе, зависит от того, что вам покажет-
ся сложнее: это занятие или следующее. Не всегда жизнь тиха и безоблачна, не
всегда можно заниматься только своим любимым делом, иногда приходится за-
ниматься разными формальностями — бегать, оформляя бумажки, писать офи-
циальные письма, заполнять анкеты, писать проекты и отчеты... Тоска, одним
словом. И, как правило, в любой работе набирается процентов 70 такой «тоски».
Но это только присказка, сказка — впереди.
На этом занятии мы с вами поближе познакомимся с формами — деловым ли-
цом HTML. Будь то анкета или гостевая книга, форма для отправки письма или
чат — все эти части сайта служат для обратной связи с вами, автором. Не то
чтобы это было обязательно. Сейчас не в каждом магазине найдешь «Книгу жа-
лоб и предложений», но каждый приличный магазин ее имеет — вдруг что-ни-
будь полезное напишут?
На сегодняшнем занятии мы узнаем:
• как задавать формы в HTML;
• как вставить ссылку на адрес электронной почты;
• как разместить гостевую книгу, опросник или чат на страницах сайта;
• как использовать Flash не только для развлечений;
• как использовать внешние данные, чтобы не переиздавать фильм заново.
Вы уже решили, какой вопрос вы зададите своим посетителям? Тогда вперед!
Слегка перефразирую Александра Сергеевича: «Как много нам открытий чуд-
ных готовит формализма век!»
1
Формы 263
Формы
Задать форму в HTML очень просто: пишешь тег <form> с атрибутами и вложен-
ными тегами, и форма готова. Однако данные, которые введет пользователь,
придется каким-то образом обрабатывать. Обычно это происходит так: пользо-
ватель нажимает кнопку Submit (Передать), и данные формы отправляются на
сервер, который с помощью заранее созданного сценария их обрабатывает.
А как быть, если у нас нет прав писать сценарии CGI? Выход есть, и он доволь-
но прост: можно написать функцию на JavaScript, которая при щелчке на кноп-
ке или изображении обработает введенные данные и осуществит какие-то дей-
ствия, например пошлет электронное письмо или изменит что-то в документе.
Но прежде всего мы просто познакомимся с формами.
Тег <FORM>
Для задания формы на web-странице служит тег <form>. Так как мы не рассмат-
риваем обработку данных формы на стороне сервера, для нас представляют ин-
терес только три атрибута: name, onreset и onsubmit. Оба последних параметра
ссылаются на функцию-обработчик: в первом случае — нажатия кнопки Reset,
во втором — Submit (речь идет о типах элементов формы, описываемых в теге
<input>). Атрибут name необходим для того, чтобы различать формы на странице.
HTML-код формы выглядит следующим образом:
<FORM пате="Имя_формы" опге5е!="Функция-обработчик_ге5е1" оп5иЬт11="Функция-
обработч и K_submi t">
Форма — совокупность элементов ввода, расположенная на одной странице и предназна-
ченная для получения информации от пользователя.
Теперь мы перейдем к элементам формы: флажки, картинки, поля ввода, пере-

ключатели и кнопки.
Практически все сценарии с элементами форм работают только на стороне клиента. Если
пользователь вместо щелчка мышью нажмет Enter, форма будет отправлена на сервер и
страница обновлена, а элементы страницы и формы получат первоначальные установки.
Кнопки
Согласно описанию стандарта HTML 4 на форме можно разместить кнопки трех
типов: button, submit и reset.
Тип submit соответствует стандартной кнопке диалоговых окон OK, a reset — Cancel.
Тип button — нейтральный тип, он не обновляет форму и не посылает данных на
сервер. Кнопки всех типов имеют одинаковые атрибуты: onclick — функция-
обработчик события onclick, value — значение кнопки (оно будет написано на
кнопке), name — имя кнопки. Если у вас в форме всего по одной кнопке каждого
типа, то событие нажатия кнопки лучше всего обрабатывать с помощью указа-
ния функции в атрибуте onsubmit формы. Итак, тег, задающий кнопку, будет вы-
глядеть следующим образом:
264 Занятие 12. Делу — время.,
<INPUT type="submit" уа!ие="Это_кнопка_ОК" name=" Кнопка">

<INPUT type="reset" уа1ие="Это_кнопка_СапсеГ пате="Кнопка">
Для примера мы создадим страницу с формой, две кнопки которой будут ме-
нять цвет фона страницы:
<HTML>
<BODY bgColor="green">
•
var butt="green";
function change_color(butt) {
document.bgColor-butt:
</SCRIPT>
<FORM name="forma" onreset="change_color('cyan')" onsubmit="change_color('green')">
<INPUT type="submit" value="3Ta кнопка меняет цвет страницы на зеленый" name="Green">
<INPUT type="reset" va1ue="A эта - на голубой" name="Cyan">
</FORM>
</BODY>
</HTML>
Однако праздновать победу интерактивного дизайна еще рано. Если вы уста-
новите в методе onsubmit не зеленый, а красный цвет, то ожидаемой окраски
страницы в цвет революционного полотнища не произойдет — браузер обновит
страницу и установит прежний фон. Это можно обойти, использовав две кнопки
reset (или button) и их события onclick:
<HTML>
<BODY bgcolor="green">
var butt="green":
document.bgColor=butt;
</SCRIPT>
<FORM name="forma">
<INPUT type="reset" value=" Эта кнопка меняет цвет страницы на красный" name="red"
onclick="change_co1or(this.name)">
<INPUT type="reset" value="A эта - на голубой" name="cyan"
onclick="change_color(this.name)">
</FORM>
</BODY>
</HTML>
Кнопок может быть и не две, а гораздо больше. Таким образом, достаточно про-
стыми средствами можно приблизить далекую мечту об интерактивном сайте к
исполнению.
Картинка
С помощью типа image можно разместить на форме изображение. В отличие от
простого тега <img>, элемент формы, по сути, является кнопкой submit, с той лишь
Формы 265
разницей, что браузер может передать координаты щелчка мышью. Вид тега этого
типа следующий:
<INPUT type="image" name="Image" src="image.gif">
Когда вы научитесь писать сценарии обработки запросов па стороне сервера,
тип image будет вам полезен для создания графических кнопок, особенно если
надо разместить несколько кнопок на одной форме. В нашем же случае при ис-
пользовании обычной картинки или картинки-ссылки вы получите богатые воз-
можности для работы на стороне клиента.
Текст-
тег <INPUT> по умолчанию создает элемент типа text, однако при задании атри-
бутов лучше указать тип явно:
<INPUT type="text" name="Text" maxlength="5" size="6" value="Value">
Атрибут maxl ength указывает, сколько символов позволено ввести пользователю,
si ze — это размер поля в символах. В случае, если количество символов не огра-
ничено, при вводе за пределами поля они не будут видны. Параметр val ue содер-
жит начальное значение поля.
Первым примером формы с текстовым полем будет форма для получения кода
символов стандарта ISO (листинг 12.1). В частности, вы можете в HTML-доку-
менте писать вместо нестандартного символа его код в формате &$ХХХ, где XXX -
трехзначное число, код символа.
Листинг 12.1. Код HTML-страницы с формой для замены символа на его код и обратно
<HTML>
<BODY>

</SCRIPT>
<FORM name="forma">
<INPUT type="radio" name="radiobutton" onclick="change_color(this.value)" value="red"
checked>
Красный
<INPUT type="radio" name="radiobutton" ondick="change_color(this.value)"
value="orange">
Оранжевый
<INPUT type="radio" name="radiobutton" onclick="change_color(this.value)"
value="yellow">
Желтый
<INPUT type="radio" name="radiobutton" onclick="change_color(this.value)" value="green">
Зеленый
<INPUT type="radio" name="radiobutton" onclick="change_color(this.value)" value="cyan">
Голубой
<INPUT type="radio" name="radiobutton" onclick="change_color(this.value)" value="blue">
Синий
Формы 273
<INPUT type="radio" name="radiobutton" onclick="change_color(this.value)"

value="violet">
Фиолетовый
</FORM>
</BODY>
</HTML>
Будьте внимательны: разные элементы переключателя объединяются в единую
сущность по имени. Формально они могут располагаться между другими эле-
ментами формы и текстом. Если в данном коде дать переключателям разные име-
на, то действие страницы не изменится: она будет перекрашиваться при щелчке
на соответствующем элементе. Однако после нескольких щелчков у вас будут
отмечены все элементы-переключатели, так как, в отличие от щелчка на флаж-
ке, повторный щелчок не снимает отметку. Ее можно снять, только щелкнув на
другой составляющей того же переключателя.
Раскрывающийся список
Если у вас на одной странице скопилось слишком много ссылок, можно дубли-
ровать их сверху всего одним раскрывающимся списком. Тогда вместо прокрутки
экрана пользователю будет достаточно выбрать элемент списка (листинг 12.7).
Листинг 12.7. Форма со списком
<HTML>
<BODY>
<SCRIPT 1anguage="javascript">

</SCRIPT>
<FORM name="forwal">
<SELECT name="list" onchange="ReffW(this.options[this.selectedIndex].value)">
OPTION selected>BbopbiH переход к страницам:

OPTION value="http://.. ./pagel.html">Страница1
OPTION value-"http://.. ./pagel.html">Страница2
OPTION value="http://.. ./раде1.№ч1">СтраницаЗ
</SELECT>
</FORM>
<FORM name="forma2">
<SELECT name="list" onchange="Reff(this.options[this.selectedIndex].value)">
OPTION sel еЛе<3>Быстрый переход к разделам:

OPTION val ue="pagel.html">Страница1
OPTION value="page2.html ">Страница2
OPTION value="page3.html ">СтраницаЗ
</SELECT>
</FORM>
</BODY>
</HTML>
HTML-код довольно прозрачен. Тег <Select> — это тег списка. В качестве его ат-
рибута указано его имя list (каждый список в форме должен иметь свое уни-
кальное имя). Тег <option> — это тег для описания элементов списка; атрибут
value — значение элемента. Заметьте, что в списке отображается не значение,
а текст, идущий после тега option. Ключевое слово selected определяет положе-
ние списка по умолчанию.
Первый список демонстрирует применение абсолютного адреса и использует ме-
тод window.open для открытия нового документа в текущем окне. Второй список
использует объект window.location и относительный адрес. В качестве парамет-
ров функциям Reff и ReffW передаются значения выделенного элемента списка,
которые равны адресам нужных страниц. В зависимости от устройства ваших
ссылок вы можете использовать как полный адрес, так и относительный. Ис-
пользование метода window.open является предпочтительным, так как его синтак-
сис более устойчив, нежели location.
Единственный минус, который обнаруживает такой простой подход, — при воз-
вращении обратно на страницу со списком можно перейти только на другой ад-
рес (элемент списка), так как иначе не сработает событие onChange. Поэтому стра-
ница, где вы побывали, будет не доступна в данный момент для выбора (правда,
можно сначала выбрать пустой нулевой элемент, а потом снова нужный). Мож-
но исправить этот недостаток, добавив в функции по строке, возвращающей на-
чальный выбор (элемент с индексом 0):
<SCRIPT language="javascript">

</SCRIPT>
Пользователь, отключивший у себя выполнение сценариев JavaScript, не сможет восполь-
зоваться таким списком. В этом случае полезно рядом со списком расположить кнопку submit,
заключенную в тег <NOSCRIPT>, тогда виртуальный путешественник сможет ее нажать.
Код будет примерно следующим: <NOSCRIPT><INPUT type=submit value=gox/NOSCRIPT>.
Кроме этого необходимо добавить к тегу <FORM> атрибуты action=URL и method="POST".
В параметре action надо указать URL файла сценария, который обработает посланное зна-
чение.
Отправка данных формы

Во всех разобранных примерах вместо элементов формы можно было использо-
вать обычные ссылки или картинки, чтобы добиться такого же или подобного
эффекта. Однако, даже не используя сценариев на сервере, можно получить
в свое распоряжение заполненные поля формы. Достаточно указать в атрибуте
action тега <FORM> вместо сценария адрес электронной почты (листинг 12.8).
Формы 275
Листинг 12.8. Отправка заполненной формы по почте

<НТМ1>
<BODY>
if (navigator.appVersion.lastlndexOf('Win') != -1) {
// Определяем операционную систему.
// так как в Windows и Unix по-разному пишется перевод строки
dropline = "\r\n" } else { dropline - "\n" };
function Subj(tform) {
var sub="mailto:Name or Nick<mailto:Batu@emai1 .rut>?subject=";
// Переписываем из поля sub в тему сообщения
sub=sub+tform.subject.value:
tform.action=sub;
// Пишем скрытый элемент, на самом деле он нужен
// только при обработке на сервере
tform.mess.value=("Name"+dropli ne+tform.name.value+dropli ne+"
phone"+dropli ne+tform.phone.value+
dropl i ne+"emai1"+dropli ne+tform.emai1.value+dropli ne+"Message"+ dropli ne+
tform.message.value);}
</SCRIPT>
<FORM name="forma" method="post" onsubmit="Subj(this)" action="mailto:Bau]@email.ru"
enctype="text/plain">
<INPUT type=hidden name="mess">
Имя: <BR>
<INPUT type="text" size=25 name="name">
<BR>
Телефон:<BR>
<INPUT type="text" size=25 name="phone">
<BR>
E-mail:<BR>
<INPUT type="text" size=25 name="email">
<BR>
TeMa:<BR>
<INPUT type="text" size-25 name="subject">
<BR>
Основное содержание письма:<BR>
<TEXTAREA rows=5 cols=45 name="message"></TEXTAREA>
<BR>
<INPUT type="submit" value="floaiaTb">
</FORM>
</BODY>
</HTML>
В коде необходимо вместо Baui@email.ru написать адрес вашей электронной по-
чты. Такой сценарий сработает только в том случае, если у пользователя в брау-
зере будет указан его e-mail; иначе вы получите сообщение, где все содержание
будет помещено в тему. Netscape Communicator отправит вам примерно следую-
щее послание:
mess=Name
My Name
phone
943764
email
my e-mail
Message
Osnovnoe soderzhanie
name=My Name
phone=943764
emai1=my e-mail
subject=tema
message=0snovnoe soderzhanie
Пересылка данных формы между страницами

Можно использовать атрибут action тега <FORM> для пересылки данных между
HTML-страницами, не прибегая к сценариям на сервере. Для этого необходимо
в качестве значения параметра указать URL файла. Создадим две HTML-стра-
ницы: на первой (post_HTML.html) разместим поле ввода и кнопку типа submit для
отсылки введенных данных, на второй (post_HTML2.html) сценарий JavaScript на-
пишет приветствие, используя пересланную информацию.
Первая страница:
<HTML>
<BODY>
<FORM name="forma" action="post_HTML2.html">
Введите ваше имя <BR>
<INPUT type-"text" size=25 name="name">
<BR>
<INPUT type="submit" уа!ие="Послать">
</FORM>
</BODY>
</HTML>
Вторая страница:
<HTML>
<BODY>
<SCRIPT language-"JavaScript">

</SCRIPT>
</BODY>
</HTML>
Вместо строки Полный URL документа. html необходимо указать полный адрес доку-
мента. Однако если пользователь введет свое имя по-русски, на следующей
странице оно будет отображено неправильно, так как содержание формы будет
передано как часть URL в наборе символов UTF-8, который не содержит рус-
ских букв. Для того чтобы обойти эту проблему, можно по событию onsubmit
перекодировать русские буквы в латинские (см. раздел, посвященный тегу
<textarea>), а на странице-получателе произвести обратную процедуру. Однако
можно обойти проблему по-другому1. Надо вставить перед отправкой команду
1
Горячее спасибо за совет Сергею Круглову и Владиславу Пустынскому.
escape, а потом — обратную, unescape. На первой странице придется добавить

к определению формы атрибут onsubmit:
onsubmi t=" thi s ."name. value=escape(thi s. name. val ue)"
На второй странице изменится вид команды write:
document.write("Здравствуйте "+unescape(unescape(loc.substring(lenURL.len)))):
Если указать в атрибуте action в сценарии новый адрес, можно научиться дина-
мически управлять пересылкой данных формы. Тогда в зависимости от содер-
жания формы, нажатой кнопки и места нажатия (для этого пригодится тип
image), можно перейти на разные страницы и на них использовать полученные
данные. На следующем занятии мы с помощью данной техники будем откры-
вать двери. Но об этом дальше...
Ссылка на e-mail
На любом сайте принято размещать ссылку на электронную почту web-мастера.
При щелчке на такой ссылке запускается почтовая программа, готовая к отправ-
ке письма. Для этого необходимо вместо обычного файла гиперссылки указать
e-mail после слова mail to:
diailto:Baui@email .ru
HTML-код ссылки будет, соответственно, выглядеть так:
<А href="mailto: ваш@етаЛ.ru">E-mail Web-мастера </А>
Можно в строке адреса указать и имя с фамилией или «ник»:
mallto: Имя Фамилия <ваш@етаП ,ги>
Также можно задать тему сообщения — subject. Это может быть удобно для
фильтрации сообщений в вашем почтовом ящике.
та1Но:Имя Фамилия <ваш@егааП .ru>?subject=nncbMo с сайта
Можно указать несколько электронных адресов подряд — они все окажутся в
строке письма Кому и станут его получателями.
Готовые формы и услуги

Не все можно сделать на стороне клиента. Например, под гостевую книгу требу-
ется место на жестком диске сервера, а кроме того — надо автоматически обра-
батывать вновь поступившие сообщения и включать их в тело страницы. В та-
ких случаях, как и в случае со счетчиками и трэкерами, разумно воспользоваться
бесплатными услугами серверов. Быстро и безо всяких специальных познаний
вы сможете организовать необходимое дополнение к сайту.
•
Гостевые книги
Гостевая книга — непременный атрибут хорошего сайта. С ее помощью посети-
тели смогут оставить вам сообщение или комментарий относительно содержи-
мого вашей странички. Чем это лучше отправки обычного электронного письма
web-мастеру? Очень просто: отвечая на чей-нибудь вопрос в гостевой книге, вы

избавляете других посетителей от необходимости задавать аналогичные во-
просы.
Серверов, предоставляющих возможность использования гостевых книг, немало
(см. приложение 1). Но, как правило, дизайн предлагаемых книг закреплен раз
и навсегда, и весьма маловероятно, что он совпадет с дизайном вашего сайта
(конечно, если вы не позаботитесь об этом заранее). Если хостер, где вы реши-
ли разместить свой сайт, не предлагает гостевых книг, можно воспользоваться
услугами специальных серверов.
Один из наиболее доступных и простых серверов гостевых книг расположен по
вполне логичному адресу www.guestbook.ru. Как всегда, для настройки доступны
основные технические параметры книг: количество сообщений на одной страни-
це, изображения, располагающиеся в начале и в конце страницы, цвета сообще-
ний, язык интерфейса (английский или русский). Можно заменить стандартные
фразы, приглашающие оставить запись в гостевой книге, а также применить на
странице вашу собственную таблицу стилей (чтобы в полной мере воспользо-
ваться этим свойством, вам необходимо знать основы CSS). Существуют допол-
нительные возможности: указания обязательных для заполнения персональных
полей, таких как имя, e-mail, город и страна проживания, адрес домашней стра-
нички и др. Все выглядит просто и подойдет к сайту с несложным дизайном.
Более богатый дизайн у книг с сервера www.guestbook.net.ru. Вот что пишут о
возможностях своих продуктов создатели сайта.
• Предлагается несколько вариантов оформления книг.
• Вы можете придавать свой книге желаемый вид (менять шрифт, язык, содер-
жимое, добавлять заголовки).
• Вы можете редактировать и удалять записи, писать ответы; можно настроить
книгу на режим форума.
• Имеется возможность вести словари запрещенных слов (сообщения, содер-
жащие такие слова, не будут записываться в книгу).
• Можно запретить добавление новых сообщений с определенных IP-адресов.
• Можно включить отсылку новых сообщений на ваш почтовый ящик, и мно-
гое другое.
Как видите, это немало. Не скажу, что предлагаемый дизайн книг совместим с
любым другим. Но ведь гостевая книга — это своего рода официальный доку-
мент, нельзя же его сделать модным журналом.
Можно задать параметры, позволяющие комментировать записи в книге. Для
добавления комментария рядом с сообщением появится ссылка. Комментарии
отображаются другим цветом и сдвинуты относительно текста основного сооб-
щения. Разрешив эту функцию, вы можете проводить целые дискуссии по опре-
деленным вопросам, практически превращая вашу гостевую книгу в форум.
Форумы представляют собой расширенный аналог гостевых книг, своего рода
«статические» телеконференции. Так же как и в гостевых книгах, посетитель
может оставить сообщение по какой-нибудь определенной теме, которую вы за-
даете отдельной строкой. Читатели форума могут добавить комментарий к лю-
бому сообщению или комментарию, тем самым создавая дискуссию. Таким об-
разом, гостевая книга может стать полноценной обратной связью с аудиторией
сайта.
.
Чаты
Если вам не по душе отложенное общение через гостевую книгу или форум и
вы хотите просто поболтать со знакомыми, находясь на работе, — создайте свой
чат. Серверов, предоставляющих готовые чаты в ваше распоряжение, также не-
мало, например www.chatcity.ru. Здесь вы можете получить в свое пользование
«комнату для разговоров» и настроить ее по своему вкусу: наклеить обои, за-
дать эмблему, определить цвета и многое другое. Правда, если никто не будет
посещать ваш чат в течение 15 дней, его могут закрыть и удалить — ведь если в
комнате никто не живет, ее сдают другому.
После того как вы пройдете регистрацию и создадите чат, поместите ссылку на
него на своих страницах. Таким образом, чат-камната станет неотъемлемой
частью вашего виртуального дома. Вот бы так в реальной жизни: вышел в дверь
городского офиса, а попал в дом на опушке леса...
Опросы
На занятии 2 вы познакомились с такой услугой сервера narod.ru, как опросы.
Не каждый посетитель станет тратить время на написание своего послания в
гостевой книге, зато два раза щелкнуть мышью на форме с опросом ни для кого
не составит труда. А вы сможете получить бесценный материал: от политиче-
ских и музыкальных пристрастий вашей аудитории до цвета обоев у вас на сай-
те и клички для принесенного сыном котенка.
Опрос — это небольшая форма с переключателем, раскрывающимся списком или
несколькими флажками. Пользователь устанавливает положение переключателя
или флажки и нажимает кнопку Голосовать. Сервер — обработчик опросов реги-
стрирует голос, в большинстве случаев следя при этом за его уникальностью
(по IP-адресу отправителя). На некоторых страницах с опросами результаты
видны на этой же форме, на других до них можно добраться через ссылку Ре-
зультаты голосования.
Интересные варианты опросов можно найти на www.voter.ru. Результат выводит-
ся в виде круговой или обычной диаграммы. Можно настроить цвет формы, па-
раметры шрифтов и задать обои. В качестве вопроса и вариантов ответа можно
использовать не только текст, но и изображения, что значительно расширяет
сферу применения опросов, причем в одном опросе может быть до ста ответов.
Можно блокировать повторное голосование с того же IP-адреса или компьюте-
ра. В настройке опроса вам поможет мастер, «живущий» на сервере.
Как говорится, «голосуй или проиграешь»!
Рассылка
Если ваш сайт перерастет в полномасштабный проект и вы будете его регуляр-
но обновлять, вы наверняка захотите сообщать об обновлениях своим постоян-
ным посетителям. Чтобы не рассылать новости самому, можно переложить бремя

работы с почтой на бесплатные службы рассылки. Одним из серверов, рассы-
лающих за вас стандартные письма, является Subscribe.Ru. На сервере достаточ-
но заполнить анкету — и бесплатный сервис к вашим услугам. Кроме формиро-
вания рассылаемых писем от вас требуется только разместить определенный
HTML-код формы для подписки. «Платой» станет размещение баннера в пись-
ме. Сервер русскоязычный, и вам не составит труда разобраться в том, как за-
вести собственную рассылку.
Размещение информации с других сайтов

Если вы хотите организовать интересную финансовую страничку, то вам не
обойтись без котировок валют, бирж и прочей полезной информации. Но вся
эта информация должна быть актуальной. У вас есть время менять ее каждые
десять минут в течение всего дня?
Выход довольно прост: надо воспользоваться услугами сервера-информера. Та-
ких серверов в Сети довольно много. Наберите в поисковой машине слово «ин-
формер» и вы получите внушительный список. Здесь будут и финансовые, и по-
годные, и новостные информеры.
После того как вы определитесь с сервером, процедура размещения информаци-
онного блока на ваших страницах будет простой: вы должны разместить на сво-
ей странице HTML-код. Код может быть стандартным и указываться прямо на
сервере, или придет по электронной почте после вашей регистрации.
Одним из самых популярных информеров является сервер www.informer.ru, де-
тище монстра РосБизнесКонсалтинг. Здесь собраны десятки различных инфор-
мационных блоков, которые можно достаточно легко встроить в любой дизайн
сайта. Мой выбор пал на «Flash-информер», который создан, естественно, на
Flash. Там собраны в отдельном окошке котировки валют, индексы акций и по-
года. Через 10 минут после регистрации мне прислали следующее письмо:
Вы зарегистрировались на www.informer.ru!
Ваш выбор: Flash-информер.
Flash-информер — это автоматически обновляемая каждые 5 минут инфор-
мация о курсах валют, фондовых индексах и погоде. Мы предлагаем Вам
два варианта установки Flash-информера:
1. Универсальная установка — определяет наличие flash-плагина и поддерж-
ку flash браузером, в случае отсутствия того или другого будет отображаться
обычный информер того же размера и той же цветовой гаммы.
Предлагаемый HTML-код следует полностью, не изменяя строк, поместить
в код страницы.
Еще раз напоминаем, что при любом типе установки предлагаемый код не-
обходимо разместить на html-странице неизменным, не вставляя и не уда-
ляя пробелов и не перенося строк.
!!! Вниманию пользователей почтовой программы OUTLOOK!!!: из полу-
ченного Вами кода следует исключить комбинацию "file:" (если она там при-
сутствует) !!!
2. Упрощенная установка — в случае отсутствия в браузере flash-плагина

или поддержки flash-технологии информер не будет виден.
Предлагаемый HTML-код следует полностью, не изменяя строк, поместить
в код страницы.
С уважением, администрация informer.ru
mailto:informer@informer.ru
Дальше шел прилагаемый объемный код в двух вариантах. Его приводить не
имеет смысла, так как он достаточно сложен и содержит много быстро устаре-
вающих данных. Единственный недостаток кода — использование JavaScript:
при отключении выполнения сценариев информер не появится на экране.
Включение информации с чужих сайтов поможет вам создать интересные и ак-
туальные страницы. Однако помните, что копирование информации без согла-
сия и ссылки на автора неэтично и нарушает авторские права. Чтобы просто
разместить чужую страницу у себя на сайте — используйте тег <frame>. В его ат-
рибуте src можно указать файл ссылки, и он будет отображаться в отдельном
кадре вашей страницы. Например:
•
<FRAME 5гс-°п«р://ЦИ._файла.Мда">
Об остальных атрибутах тега <frame> см. приложение 2. По сути, такое примене-
ние кадров является единственно обоснованным использованием данного тега
с точки зрения дизайна.
Формы во Flash
Так как Flash вполне пригодна для создания полноценного сайта, значит, и фор-
мы там можно создать и работать с ними. По сути дела, формы во Flash явля-
ются лишь одним из лиц многоликого бога Web — текста. Для ввода текста
пользователем используется тип текста Input text (Текстовое поле). Вы можете
выделить любое поле: для одного символа или для целой страницы текста.
И так как мы не затрагиваем работу на сервере, а интересуемся только клиент-
ской частью, то и использовать введенные данные мы можем только внутри
данной сессии.
Как вы увидите из раздела, посвященного использованию FSCommand, Flash без особого
труда может обратиться к помощи JavaScript и прочитать или записать cookies.
Текст и переменные
В качестве примера создадим простой фильм, который вначале будет просить
ввести данные. Следующий кадр определяется в зависимости от введенного
пользователем. Чтобы не касаться слишком серьезных тем, поможем выбрать
своему посетителю подарок, который он должен преподнести другу на день ро-
ждения (рис. 12.1).
ft Flash S-{present]
ф
Добрый день!
Меня зовут Зеленый Листогрыз!
А Вас? Пожалуйста, введите свое имя:
Я помогу Вам выбрать подарок. ,— —,

На сколько лет Вы оцениваете его получателя? I I
И как бы Вы охарактеризовали его пол? {§) мужской О женский
Рис. 12.1. Примерно так будет выглядеть наша форма во Flash
Создание формы
1. Для начала создадим новый фильм и выберем инструмент Text (Текст). От-
кроем панель Text Option (Параметры текста) и установим на ней в первом
списке — Input text (Текстовое поле), во втором — Single line (Однострочный),
а в Variable (Переменная) введем имя переменной, связанной с данным по-
лем — Name. В это поле пользователь введет свое имя, и дальше по ходу филь-
ма мы будем обращаться к нему по имени.
2. Чтобы пользователь имел возможность писать по-русски, установим на пане-
ли Character (Шрифт) какой-нибудь шрифт с пометкой Суг. И на панели Text
Option (Параметры текста) нажмем левую нижнюю кнопку Include entire font
outline (Встроить все символы шрифта) или две следующие — Include outlines
for uppercase (Встроить прописные буквы) и Include outlines for lowercase
(Встроить строчные буквы). Необходимо установить длину вводимой строки
равной 0, чтобы не накладывать никаких ограничений на длину имени.
3. Дальше создадим такое же поле для ввода возраста получателя подарка (на-
зовем его Age). Для возраста параметр Max Char (Максимальное количество
символов) можно установить равным 2 или 3, в зависимости от того, как вы
серьезно подходите к этому вопросу. Чтобы у пользователя не было возмож-
ности ввести буквы, необходимо нажать кнопку Include outlines for numbers
(Встроить элементы чисел). Для обоих текстовых полей необходимо устано-
вить флажок Border/Bg (Граница/Фон), чтобы пользователь правильно ассо-
циировал рамку с полем ввода, иначе как он будет его искать. Нам останется
только смоделировать переключатель (для указания пола получателя подар-
ка), и форма будет готова.
4. Так как во Flash 5 не предусмотрено стандартного переключателя, его при-
дется сделать самим. Можно сделать заготовку и затем использовать ее для
создания любых флажков. Как смоделировать переключатель? Надо создать
символ, в нем расположить кнопки. При событии release (то есть при нажа-
тии кнопки) переводить выключенную кнопку во включенное положение,
а включенную кнопку — выключать. Если завести символы для каждого со-
стояния, то такой шаблон будет легко использовать и в дальнейшем.
Идея реализации переключателя очень проста: надо завести по одному кадру

на каждое положение переключателя, в каждом кадре поставить команду stop
и при нажатии определенной кнопки переходить на соответствующий кадр.
5. Сначала заготовим символ переключателя. Его надо сделать кнопкой и нари-
совать в центре стола кружок с контрастным контуром. Так как мы не обязаны
поддерживать стандарт Windows, цвета могут быть любые. Назовем символ,
например, Элемент (подразумевая «элемент переключателя»).
6. Создадим еще один символ (он тоже будет кнопкой) и скопируем к нему на
нижний слой кнопку Элемент, а на верхнем нарисуем темный кружок по цен-
тру. Назовем символ ЭлементНажатый.
7. Теперь осталось завести еще один символ-клип, на котором необходимо раз-
местить два других символа: Элемент и ЭлементНажатый. Их можно расположить
на верхнем слое, а на нижнем слое надо сделать подписи к элементам: мужской
и женский. Этот текст должен иметь тип Static Text (Статический текст).
8. Теперь следует вставить в обоих слоях символа ключевые кадры (F6) и во
втором кадре поменять местами кнопки Элемент и ЭлементНажатый.
9. Дальше необходимо в каждом кадре указать команду stop, в первом кадре ввести
переменную Gender (Пол), а во втором ее поменять. Кроме действий с кадрами
у нас будут обрабатываться и события с объектами. В обоих кадрах кнопке
Элемент надо приписать переход на другой кадр: из первого — во второй, из
второго — в первый. В результате у нас будут введены следующие сценарии:
в первом кадре:
stop О:
var Gender»!:
во втором кадре:
stop О;
Gender=0;
В первом кадре кнопке Элемент будет сопоставлен такой сценарий:
on (release) {gotoAndStop (2):}
во втором кадре:
on (release) {gotoAndStop (1);}
10. Пусть в качестве действующего лица фильма у нас будет фигурировать гусе-
ница. Ползать она будет внизу страницы. До окончания создания формы нам
осталось дописать пояснительный текст к ее элементам и создать кнопку, при
щелчке на которой фильм будет переходить к обработке введенных данных
(у меня для этой цели отсканирован и обработан обычный лист березы). При
введении текста обращайте внимание на параметры на панели Text Option (Па-
раметры текста). Этот текст также должен быть статическим.
11. Допишите текст, вставьте кнопку и расположите элементы формы на столе
подходящим образом. Так как нам надо проверить, является ли числом вве-
денное в поле Age значение, для кнопки нам придется написать следующий
сценарий:
on (release) {/
Age=parselnt( Age. 10):
if (1sNaN( Age ))
Warni ng=Warni ngText:

Age="";
gotoAndStop(l);
}
else gotoAndPlay (2);
}
12. Переменные Warning и Warni ngText — это текстовые поля, которые нам еще
предстоит завести.
Гусеница
С формальностями мы покончили, осталось запустить на страницу насекомое.
Не подумайте, что я обожаю хитиновые создания, просто насекомых легко ри-
совать и анимировать. Это кладезь для демонстрации возможностей Flash — где
еще можно найти с десяток синхронно передвигающихся ног? Разве что на во-
енном параде.
Что нам понадобится для гусеницы? Голова, ноги (один символ ноги) и символ
для элемента туловища.
1. Начнем с главного — с ног. Каждая нога будет состоять из трех частей: бедра,
икры и ступни (естественно, у живой гусеницы это не так). Сначала надо соз-
дать графический символ для ног — пусть это будет зеленый овал.
2. Затем на новом символе-клипе (назовем его Foot) надо разместить три таких
овала в виде полусогнутой или распрямленной ноги, каждый на своем слое.
3. Далее необходимо вставить ключевые кадры 2 и 3 во всех слоях.
4. Затем в кадре 2 следует изменить положение составляющих ноги. Проще все-
го включить режим кальки (он включается кнопками, находящимися под ки-
нолентой) и отрегулировать так, чтобы поворот осуществлялся в нужном
месте. Фактически развернуть придется только верхнюю часть — это можно
сделать при помощи панели Transform (Преобразование). Еще две части оста-
нется только перенести. На рис. 12.2 угол бедра меняется от -50 до 0.
5. Когда одна нога поднята, другая должна быть опущена. Для этого продубли-
руем символ Foot и в новом клипе удалим первый кадр (Remove frame). Быв-
ший второй кадр станет первым, а третий — вторым.
6. Скопируем новоявленный первый кадр и поместим его в третий. Таким обра-
зом, в новом клипе (FootD) движение начинается с поднятого состояния ноги
и заканчивается им же.
7. Осталось только выделить в каждом слое все кадры и на панели Frame (Кадр)
установить раскадровку движения, а затем растянуть клип до 10 кадров, при-
чем средний ключевой кадр (который был вторым) должен стать пятым.
Вставим ключевой кадр 9 во всех слоях и удалим кадр 10, чтобы избежать -
удвоенного показа крайнего кадра. Естественно, что описанные действия
должны быть выполнены для клипов обеих ног: Foot и FootD.
8. Далее создадим новый клип, назвав его Part. В нем необходимо задать 3 слоя
(снизу вверх): Правая нога, Туловище, Левая нога.
9. В слоях ног надо разместить клипы-ноги, взяв их из окна библиотеки (гусе-
ница будет ползти слева направо).
button
Eatingpiller
Foot
FootD
Footl
head
Щ Part
Переключатель
Элемент
ЭлементНажа
Рис. 12.2. Так может выглядеть основная часть гусеницы
10. В слое туловища надо нарисовать зеленый эллипс с контуром, затем с по-
мощью инструмента Arrow (Стрелка) превратить его в более бесформенную
фигуру и удалить контур, для красоты дорисовать пяток разноцветных воло-
синок сверху.
Основная часть гусеницы закончена. Осталось нарисовать голову и собрать
все вместе.
11. Голова будет нарисована в отдельном графическом символе Head, в несколь-
ких слоях: приплюснутый сверху зеленый овал, на нем сильно вытянутый
в стороны более темный эллипс носа, вертикально вытянутые глаза, состоя-
щие из белого и синего эллипсов, и красный рот. Для того чтобы нарисовать
улыбку, создайте красный круг с контуром и инструментом Arrow (Стрелка)
превратите его в кривое лезвие. Если вы нарисовали волосы на деталях гусе-
ницы, нарисуйте их и на голове.
12. Создайте последний клип — Eatingpiller. В нем мы соберем гусеницу и заста-
вим ее двигаться по экрану (рис. 12.3).
13. Сначала разместите на столе с десяток клипов Part друг за другом. Затем раз-
местите спереди голову. Последние элементы постепенно уменьшите до 80 %,
чтобы они напоминали хвост. Старайтесь размещать части не слишком плот-

но, чтобы ноги не наезжали на соседние элементы туловища. Когда вы почув-
ствуете, что гусеница готова, объедините все части в одну командой Groop
(Группировать).
Рис. 12.3. А вот и вся гусеница
14. Потом задайте раскадровку движения и вставьте ключевой кадр 120 (F6).
В первом кадре передвиньте группу до упора вправо, а в кадре 120 — влево.
Если теперь прокрутить считывающую головку по киноленте, гусеница по-
ползет справа налево.
15. Вернемся к главной сцене, выбрав Scenel в списке, раскрывающемся при
щелчке на кнопке в правом верхнем углу. Поместим новоиспеченный клип
вниз стола, под формой. Теперь, пока пользователь будет решать, сколько же
лет его девушке, гусеница будет маршировать внизу.
Подарки
Будем считать, что посетитель серьезно отнесся к нашему предложению и за-
полнил форму. Нам осталось только ее обработать.
1. Сначала проверим, что в первом кадре сцены стоит команда stop. Форма нам
больше не понадобится — вставим второй пустой ключевой кадр (F7). В нем
на столе поместим еще один экземпляр гусеницы. Затем вставим ключевой
кадр 59 (вы можете выбрать любой другой) и в нем на панели Instance (Эк-
земпляр) изменим поведение клипа — выберем в списке Behavior (Поведение)
пункт Graphic (Графический символ), в следующем списке — Single Frame (Один
кадр) и установим кадр 58. Таким образом, гусеница проползет почти до сере-
дины пути и замрет на кадре 58, маршируя на месте.
2. В этом же кадре нам надо вставить основной текст «решения». Инструментом
Text (Текст) напишем приветствие и результат, оставив место под переменные:
Уважаемый (ая) После продолжительных размышлений я пришел к выводу, что лучший
подарок.который вы можете сделать,это -
3. Заведем еще два слоя: один для текстовых переменных (Текст), другой — для
изображений подарков (Презент). В слое Текст обозначим два блока динами-
ческого текста: после слов «Уважаемый (ая)» и после слов «это - ». Для пер-
вого в поле Variable (Переменная) укажем Namel, а для второго — Present. Не-
обходимо выровнять эти поля так, чтобы они попадали в одну строку с
основным текстом. Учтите, что размер имени может быть достаточно боль-
шим, так как мы его не ограничивали.
4. Теперь необходимо выполнить еще одну подготовительную операцию. Дело в
том, что в моей версии Flash нельзя печатать русскими буквами внутри пане-
ли Actions (Действия) и нельзя просто так добавить к строке символ «!». Зато
можно завести динамические текстовые поля, сопоставить им переменные,
ввести нужный текст и использовать переменные вместо символов. Тогда,
если понадобится изменить название подарка, можно будет просто перепеча-
тать текст в нужное поле. Весь вспомогательный текст, естественно, должен
располагаться за пределами стола.
Нам понадобятся переменные со следующими значениями (текст, набранный
в поле):
.
Q Comforter — соска;
Q Doll — кукла;
Q Flower — букет цветов;
Q Beer — пиво;
Q Auto — игрушечная машинка;
Q S- !
5. Раз уж мы вспомнили о служебных делах, вернемся к первому кадру и созда-
дим два поля динамического текста — Warning и WarningText. Поле WarningText
следует расположить за пределами стола: в нем будет храниться текст преду-
преждения — Введите возраст правильно. Текст в поле Warning лучше сделать не
очень крупным и яркого, например красного, цвета. Если пользователь введет
буквы вместо цифр в поле возраста, это предупреждение появится на экране.
6. Теперь настал черед заняться программированием. В кадре 59 необходимо
ввести следующий сценарий:
Namel=Name + S:
if (Age<2 or Age>90)
{Present=Comforter}
else
{ if ( Gender<l)
{if ( Age>=2 and Age<16 )
(Present-Doll}
else
{Present=Flower}
}
else
{ if (Age>=2 and Age<16 )
{Present=Auto}
else {Present=Beer}
!:
gotoAndPlay(Present):
7. Основное содержание сценария — конструкция if...else. В результате вы-
полнения сценария в зависимости от указанного возраста и пола переменная
Present получит одно из следующих значений: соска, кукла, букет цветов, пиво,
игрушечная машинка. Последняя инструкция сценария отправит фильм на кадр
с именем-меткой, равным значению этой переменной.
8. Теперь осталось немного рутинной работы. В слой Презент необходимо вста-
вить ключевые кадры 60, 70, 80, 90 и 100. Каждому из этих кадров необходимо
дать имя на панели Frame (Кадр) в поле Label (Метка). Имена, как вы, навер-
ное, догадались, берутся из того же списка значений переменной Present (мет-
ки будут выделены на киноленте флажком и названием). Дальше необходимо
заготовить символы-рисунки для всех подарков (будет проще, если символы
получат те же имена). Можете нарисовать их или экспортировать готовый
растровый или векторный рисунок.
9. Когда символы будут готовы, надо вставить каждый из них в свой именной
кадр в слое Презент где-нибудь слева от гусеницы (рис. 12.4).
«Ц Flash 5 - [present]
Уважаемый (ая) Дмитрий!
После продолжительных размышлений

я пришел к выводу, что лучший подарок,
который вы можете сделать,
это - букет цветов!
1
Т!•
Рис. 12.4. Гусеница и подарок
10. Потом для всех подарков необходимо проделать следующую процедуру. На

панели Frame (Кадр) в списке Tweening (Раскадровка) выбрать Motion (Раскад-
ровка движения) и вставить последний ключевой кадр диапазона. Например,
если вы работаете с именным кадром 60, то стрелка раскадровки должна про-
тянуться с кадра 60 по кадр 69 (рис. 12.5).
:
• '
букет цв^кукла! ^игрушеч^пиво!
Рис. 12.5. Так будет выглядеть кинолента с именованными кадрами
11. Затем в именном кадре необходимо с помощью панели Transform (Преобразо-

вание) уменьшить подарок до 0 %. И он за 10 кадров вырастет из точки. Если
вам покажется, что 10 кадров маловато, растяните на большее время. Вам не
придется больше ничего изменять, так как переход совершается по имени
кадра, а не по его номеру.
СОВЕТ
Если сценарий не жесткий и вы точно не уверены, сохранит ли кадр перехода свой номер
или вам придется его передвинуть, лучше дайте кадру имя и в команде goto укажите имя,
а не номер.
12. Осталось только дописать сценарии в последние кадры раскадровок — уста-

новить в них команду stopO. Иначе подарки будут сыпаться как из рога изо-
билия. Фильм окончен!
Использование внешних данных

В этом разделе занятия мы познакомимся с другой программой — Macromedia
Generator 2. Если ее не оказалось на одном компакт-диске с Flash 5, вы можете
ее загрузить со страниц сервера Macromedia — http://www.macromedia.com/soft-
ware/generator/download. Но нам понадобится не сам Generator (он как раз под-
держивает серверную часть сайта), а только его часть — Authoring Extensions for
Flash 5. Как только вы установите эти расширения на своем компьютере, во
Flash станет доступна команда Window > Generator Objects (Окно > Объекты гене-
ратора), которая открывает одноименную панель (рис. 12.6). На этой панели
расположено 17 готовых объектов, которые позволяют считывать из внешнего
файла данные и отображать их соответствующим образом (с помощью графика,
диаграммы, рисунка, списка и т. д.).
Зачем может понадобиться использовать внешние данные в фильме, если все
можно сделать с помощью переменных? Представьте, что весь сайт — один
большой фильм, и вы решили на нем отобразить диаграмму долей различных
браузеров. Если данные изменятся, то вам, чтобы информация не потеряла ак-
туальность, придется переиздавать весь фильм, тестировать его и снова загру-
10 Зак. 96
жать на сервер. А при использовании внешних данных все просто: переписал

простой текстовый файл с исходными данными, заменил им старую версию -
и все ОК!
Generator Objects
:|Common
[HI Basic Charts |gg| Insert GIF File Ц Insert JPEG File Щ Insert Symbol |g Insert Flash Movie
$Jy Insert MP3 File Щ| Insert PNG File |j» Insert Sound Щ List y|j Multipage List
^ Pie Chart FQ Plot Ц Radio Button [S3 Scrolling List И Stock Chait
|Ш Table Й Ticker
•:...,,.•..-:; •••,. i
Рис. 12.6. Панель с объектами генератора
ВНИМАНИЕ
Будьте внимательны при публикации фильма в Сети, ведь кроме HTML-файлов вам надс
разместить на сервере и файлы фильмов (SWF-файлы), а при использовании шаблоное
генератора — и файлы типа SWT (они окажутся автоматически в папке вместе с файлов
фильма при публикации). Также надо не забыть про текстовый файл с данными.
Круговая диаграмма
Сначала создадим новый фильм и перенесем на стол с панели Generator Objects
(Объекты генератора) круговую диаграмму (Pie Chart). Двойной щелчок на диа-
грамме откроет панель Generator (Генератор) с параметрами выбранного объек-
та. Верхний список этой панели позволяет менять тип объекта. Если вас не уст-
роит круговая диаграмма, можете выбрать простую (Basic Charts) или график (Plot).
Круговая диаграмма имеет 11 параметров (рис. 12.7). Установим их по оче-
реди.
• Data Source (Источник данных) — это имя файла, который мы будем исполь-
зовать в качестве источника данных для диаграммы. В качестве его значения
укажите файл data.txt; впоследствии вы можете указать его полный URL. Если
файл расположен в другой папке, необходимо указать полный путь.
• Depth (Высота) — высота (толщина) цилиндра диаграммы. Каждая единица
данного свойства равна 1/20 пиксела. Напечатайте 800, чтобы задать высоту
40 пикселов.
• Value Display (Отображение значений) — свойство может принимать значения
Always (Всегда), Never (Никогда) и Rollover (При прохождении указателя).
Я установлю Always (Всегда), чтобы выводить на диаграмме считанные значе-
ния.
• Value Format (Формат значений) — можно указать тип шрифта: Arial, Times и
Courier. Если вам, как и мне, нравятся шрифты с засечками, установите значе-
ние Times.
Generator
I
Pie Chart
3ate Source data.txt
Depth 800
v'alue Display always
/alue Format Times
1/alue Placement auto

v'alue Scale fixed"
External Symbol File
SordeT false
Border Thickness 80"""
Color
Рис. 12.7. Панель с объектами генератора
Value Placement (Расположение значений) — свойство, позволяющее опреде-

лить положение подписей значений: внутри (inside) или снаружи (outside)
диаграммы. Мы укажем практичный вариант auto, чтобы генератор сам раз-
местил их подходящим образом: если попадутся очень маленькие кусочки
диаграммы, то подписи к ним будут указаны снаружи.
Value Scale (Размер значений) — данное свойство определяет размер шрифта
подписей. Оно может иметь значения fixed (фиксированный размер, значение
по умолчанию), half (половинный) и double (двойной). Так как у нас будут
присутствовать достаточно малые значения, укажем half.
External Symbol File (Внешний файл символов) — здесь необходимо указать
полный путь к шаблону генератора. Так как мы используем внутренний шаб-
лон, в этой строке ничего не указываем. Если же вы по каким-то причинам
решите разместить SWT-файл отдельно от фильма, заполните это поле.
Border (Граница) — указание, делать ли рамку вокруг диаграммы. Обычно
лучше сказать false (нет). Альтернативой, естественно, является true (да).
Border Thickness (Толщина границы) — толщина рамки указывается в тех же
единицах измерения, что и Depth (Высота) — 1/20 пиксела. Указав, напри-
мер, число 80, вы создадите границу в 4 пиксела шириной. Если рамки нет,
то и толщину указывать не следует.
Color (Цвет) — цвет рамки, шестнадцатеричное число длиной 6 знаков, сле-
дующее за символом решетки (#). Так как рамки нет, то и ее цвет не важен
(я заполнил это и предыдущее поле для примера).
• Instance Name (Имя экземпляра) — это название диаграммы. С точки зрения

Flash диаграмма является клипом, поэтому даже если вы пока не решили,
придется ли что-то менять по ходу фильма, хорошим стилем будет указат!
здесь имя.
Другие объекты генератора будут иметь другие параметры. Не стоит большого
труда разобраться, за что они отвечают, так как внизу панели Generator (Генера-
тор) при выборе параметра выводится пояснение, что он делает. На этом мы за-
кончим обсуждение общих моментов и перейдем к созданию фильма.
1. Первым делом заглянем на сервер www.thecounter.com (см. рис. 9.2). На неги
мы сможем получить необходимые данные о наиболее популярных браузе-
рах. Откроем Блокнот и введем следующий текст:
Value. Color
55J999999
32JCCCCCC
4JOOOOFF
1.IOOCCFF
3.#666666
5JFFOOOO
Для Internet Explorer я выбрал серую гамму, для Netscape — синюю. Осталь-
ные браузеры будут красным куском «пирога» рынка обозревателей.
2. Сохраните файл под именем data.txt и поместите его в ту же папку, где нахо-
дится фильм. Растяните символ диаграммы при помощи панели Transform
(Преобразование) и нажмите Ctrl+Enter. Диаграмма отобразит заданные зна-
чения (рис. 12.8).
32
f4
Рис. 12.8. Диаграмма
3. Однако символ диаграммы не позволяет нам надписать, какой цвет какому

обозревателю соответствует. Для этого нам придется воспользоваться обыч-
ными средствами Flash.
Создайте новый графический символ и в нем нарисуйте прямоугольник.

Символу дайте название Legend. Перенесите на стол 5 таких символов и с по-
мощью панели Effect (Эффект) установите прямоугольникам оттенки (Tint),
совпадающие с окраской долей диаграммы. Выровняйте прямоугольники и
задайте подходящий размер. Справа от каждого прямоугольника надо помес-
тить название обозревателя, а сверху общее название диаграммы
(рис. 12.9). Щелкните на столе правой кнопкой мыши, в меню выберите
Movie Properties (Свойства фильма) и укажите подходящий цвет стола, напри-
мер охру.
Фильм готов. Нажмите Ctrl+Enter и посмотрите на результат.
ft Flash 5-[chart]
.,; I .. Ш \ I ''..Л:-, Г,-',.,-, W,,,,,.l,.- Щ
Доля обозревателей, используемых в Интернете

по ляниьш TheCoiinter.cwn
Internet Explorer 5.X

,|в!жшмшмш»
¥ Netscape 4.x
Netscape сотр.
Остальные обозреватели
Рис. 12.9. Диаграмма и легенда
Текстовые данные
Flash позволяет использовать текстовые внешние данные и без привлечения
объектов генератора. Для этого служат команды ActionScript:
• loadVariablesNuraQ — функция загружает переменные, уровень переменных
указывается числом;
• loadVariablesO — функция загружает переменные в клип, в аргументах функ-
ции указывается имя экземпляра клипа.
Первая функция loadVariablesNumO служит для загрузки значений переменных в
сам фильм. Например, чтобы загрузить переменные из файла, можно написать
следующую строку сценария:
1oadVariablesNum("MyData.txt". О ) ;
Вы можете встроить один фильм Flash в другой, используя различные уровни (levels). Кор-
невой уровень — levelO, он устанавливает фоновый цвет и скорость прокрутки кадров
фильма. Вы можете задать до 16 000 уровней в одном фильме, если захотите. Текущий
проект имеет уровень с номером 0 — levelO. По умолчанию редактор ActionScript устанав-
ливает именно нулевой уровень, и если вы правильно укажете URL текстового файла, то
все остальное произойдет автоматически, включая установку правильного уровня.
Таким образом, как и при использовании шаблонов генератора, вы можете не

изменять весь фильм, а просто вносить поправки в файл с данными. В качестве
примера мы создадим кадр фильма (так сказать, страницу сайта), демонстри-
рующий свежий анекдот. Вы сможете менять анекдоты каждый день, загружая
на сервер всего лишь маленький текстовый файл.
1. Создав новый фильм, зададим его цвет в окне Movie Properties (Свойства филь-
ма). Пусть наш фильм имеет зеленую травяную подложку.
2. Теперь сделаем рамку для анекдота. Нарисуем светло-серый прямоугольник,
затем в стороне нарисуем еще один, чуть ниже и шире (прямоугольники не
должны пересекаться). Выделим оба и с помощью панели Align (Выравнива-
ние) выровняем их по центру стола. Снимем выделение, выделим рисунок
снова и нажмем F8, чтобы преобразовать получившуюся фигуру в графиче-
ский символ.
3. Возьмем еще два экземпляра символа из библиотеки, на панели Effect (Эф-
фект) зададим одному белый цвет, другому — зеленый цвет фона. На панели
Transform (Преобразование) зеленый символ сделаем равным 80 % от началь-
ного, а белый — 95 %.
4. Выделим все три символа, выровняем их по центру стола и объединим в
группу (Ctrl+G). Скопируем группу и вставим еще одну. Разместим две рамки
для анекдотов подходящим образом.
5. Теперь надо написать на странице заглавие, что-нибудь в духе: «Самый све-
жий анекдот!». Для надписи выберем необычный шрифт, например Odessa-
Script, и установим полужирное начертание. Цвет можно выбрать или белый,
или розовый, подражая березовой гамме цветов. Если рамки и надпись не
умещаются на странице — воспользуйтесь панелью Transform (Преобразова-
ние) и уменьшите размер рамок.
6. Последний штрих — текстовые блоки для анекдотов. Снова возьмите инстру-
мент Text (Текст) и обозначьте два блока. На панели Text Options (Параметры
текста) надо установить параметры: Dynamic Text (Динамический текст), Multi-
line (Многострочный), флажок Word wrap (Перенос слов) — и нажать кнопку
Include entire font outline (Встроить все символы шрифта).
Текстовым блокам необходимо сопоставить переменные Anekdotl и Anekdot2.
Размер шрифта следует установить не слишком большой — 14 или 12, а цвет -
розовый или белый. Если поля для текста не очень узкие, откройте панель
Paragraph (Абзац). На ней установите выравнивание по ширине, нажав по-
следнюю кнопку в строке Align (Выравнивание). Теперь дважды щелкните на
единственном кадре фильма и в окне Frame Actions (Действия с кадром) вставьте
следующую строку:
LoadVanablesNumC'Anekdot.txt", 0 ) :
Если вы работаете в нормальном режиме (Normal), вы не найдете этой функции в списке
действий. Перейдите в режим эксперта, выбрав вторую строку в раскрывающемся меню
панели Actions (Действия). Строка LoadVariablesNum теперь будет в списке Actions (Дейст-
вия).
СОВЕТ
Если вы хотите использовать возможности HTML для форматирования текста, установите
флажок HTML. В этом случае вам придется соблюсти все правила синтаксиса этого языка.
7. Теперь осталось только создать текстовый файл Anekdot.txt. Его содержание

должно быть примерно следующим:
Anekdotl=Coflep)KaHne первого анекдота&Аг^с1сЛ2=Содержание второго анекдота
Для разделения переменных служит знак амперсанда «&», а после названия пе-
ременной следует знак равенства (рис. 12.10).
Anekdot - Блокнот
flnekdot 1=Однажды Ньютону гости пожаловались, что калитка в его сад туго
открывается, и попросили сделать другую, получше.
- Я не знаю, куда лучше, - ответил Физик. - И так каждый входящий наливает в
бак для дона не меньше галлона воды.8Anekdot2=Некий банкир спросил однажды
М.Твена:
- Чен объяснить, что у вас так нного мозгов и так мало денег?)
- Видите ли, - ответил знаменитый писатель, - природа любит равновесие,- В
среднем у нас с вами поровну.8
Рис. 12.10. Так выглядит текстовый файл Anekdot.txt в Блокноте с включенным переносом
по словам
Flash S- [Anekdott
Рис. 12.11. А так он будет выглядеть в фильме

Параметры клипа
Создадим еще один простой фильм, в котором из файла будут считываться зна-
чения свойств клипа. Таким образом можно создать фильм, который можно бу-
дет легко изменять, заменяя только текстовый файл.
Для создания фильма нам понадобится символ-клип. Каким он будет — не так
важно: можно, например, воспользоваться стандартным клипом, находящимся в
библиотеке Flash.
1. Создайте новый фильм, затем выберите команду Window > Common libraries >
Movie Clips (Окно > Общие библиотеки > Клипы).
2. В открывшемся окне библиотеки найдите клип самолета Biplane. Разместите
клип на столе в левом верхнем углу.
3. Нажмите Ctrl+I, чтобы открыть панель Instance (Экземпляр). На ней задайте
имя клипа — Plane.
4. Сохраняя выделение клипа, откройте панель Actions (Действия). В редакторе
ActionScript введите следующий сценарий:
onClipEvent (mouseUp) {
loadVariables ("plane.txt". Plane):
this._x = x;
this._y = y;
this._alpha = alpha;
this._xscale = width:
this._yscale = height;
this._rotation = spin;
}
5. Если у вас установлен нормальный режим, дважды щелкните на команде
loadVariables в папке Actions (Действия). В нижней части панели Object Actions
(Действия с объектом) задайте в списке Location (Расположение) вариант
Target (Объект), как показано на рис. 12.12. Введите имя экземпляра Plane
в поле, расположенном правее данного списка.
6. Теперь осталось создать текстовый файл plane.txt. В него надо поместить при-
мерно такой текст:
x=200&y=200&a1pha=50&width=150&height=150&spin=-90&
ВНИМАНИЕ
В случае использования команды loadVariablesQ текст необходимо заканчивать символом
амперсанда.
7. Сохраните текстовый файл и во Flash нажмите Ctrl+Enter.

Теперь, если вы дважды щелкнете на самолете, он перелетит на новое место
и станет полупрозрачным. Строка сценария onClipEvent (mouseUp) означает, что
тело функции-обработчика выполняется, только если пользователь щелкнет на
клипе. При первом щелчке произойдет считывание параметров, а при втором
они вступят силу. Чтобы понять, какие свойства клипа за что отвечают, вы мо-
жете попробовать их изменить. Вам даже не придется выходить из фильма -
просто сохраняйте текстовый файл в Блокноте и дважды щелкайте на клипе са-
молета (рис. 12.13).
Рис. 12.12. Запись сценария
Рис. 12.13. Так будет выглядеть самолет после двойного щелчка (для сравнения на столе
расположен еще один символ самолета)
Вы скажете, что данный пример не слишком полезен на страницах сайта, и бу

дете, наверное, правы, ведь он служит просто для обучения. Однако несложш
придумать и более функциональные применения внешнему заданию свойств кли
па. Самое простое приложение, которое приходит в голову (оно использует толь
ко свойства-координаты), — это выведение различных рисунков в зависимости ог
загружаемого текстового содержания. Если эти рисунки растровые, то лучше вое
пользоваться генератором, а если векторные, вы можете перемещать нужный ри
сунок на стол, а остальные сдвигать в сторону, чтобы они не были видны.
Меню
Меню и раскрывающийся список не являются обязательными атрибутами форм,
однако они могут пригодиться вам для оформления навигации по фильму или
оформления коллекций и фотоальбома.
Мы сейчас с вами создадим маленькое меню, которое будет отображать в поле
выбранный символ.
1. В новом фильме на столе нарисуем прямоугольник 150x40 пикселов (контро-
лировать размеры можно с помощью панели Info (Информация)).
2. Выделим прямоугольник и нажмем F8, преобразуя его в графический символ
Прямоугольник.
3. Далее нажмем Ctrl+F8 для создания еще одного символа, на этот раз кнопки
Компонент меню. В кнопке по центру стола необходимо расположить экземп-
ляр символа Прямоугольник. Затем сделать ключевыми кадры Up (Приподнята),
Over (Под указателем) и Down (Нажата). В каждом из кадров на прямоуголь-
ник необходимо наложить свой оттенок (Tint) с помощью панели Effect (Эф-
фект).
4. Снова нажмем Ctrl+F8 и создадим клип под именем Меню. В нем по центру эк-
рана надлежит разместить кнопку Компонент меню.
5. Теперь надо вставить ключевой кадр 2 и в нем справа от кнопки разместить
еще 4 ее экземпляра. Чтобы получилось ровно, можно воспользоваться услу-
гами панели Info (Информация). Если установить черный квадратик в левый
верхний угол, то координаты четырех экземпляров должны быть следующи-
ми: X для всех будет равен 75, a Y — 20, 20, 60 и 100.
6. Теперь необходимо добавить еще два слоя и задать имена: основной (сред-
ний) слой должен получить название Меню, нижний слой — За меню, а верх-
ний — Текст. В слое Меню должны располагаться элементы меню (те, которые
мы разместили в предыдущем пункте), в слое Текст — подписи пунктов, а слой
За меню будет служить хранилищем вспомогательного символа Невидимая кноп-
ка. Чтобы создать этот символ, нажмите Ctrl+F8, выберите тип Button (Кнопка)
и нарисуйте прямоугольник в кадре Hit (Срабатывание), заведомо больший,
чем раскрытое меню. В кнопке должен быть только один ключевой кадр.
7. Создадим клип Экран, который будет отражать сделанный выбор. В нем
должно быть 5 кадров (все ключевые). В первом кадре надо установить ко-
манду stopO. Каждому кадру необходимо дать имя в поле Label (Метка) на
панели Frame (Кадр). Имена будут простые: 1, 2, 3, 4 и 5.
8. Затем надо создать 5 графических символов с теми же именами. Можно дать

и осмысленные имена, но проще использовать цифры, чтобы не запутаться
при указании переходов в пунктах меню.
9. В каждом символе надо расположить картинку или фигуру, на ваш выбор.
Символ 1 должен содержать фигуру по умолчанию.
10. После того как символы будут созданы, вы можете разместить их в соответст-
вующих кадрах клипа Экран.
11. Все подготовительные работы сделаны, и можно приступать к сборке меню.
Вначале разместим на столе главной сцены Экран и Меню. Экрану необходимо
присвоить имя с помощью панели Instance (Экземпляр). Пусть это будет Field.
12. Затем следует вернуться к редактированию символа Меню. В одном из слоев
надо присвоить первому кадру метку noup, а второму — up. Затем необходимо
выделить основной элемент меню в первом кадре, открыть панель Object
Actions (Действия с объектом) и в окне редактора ActionScript набрать сле-
дующий сценарий (рис. 12.14):
on (rollOver)
{gotoAndStop ("up"):}
yjj Basic Actions on (rollOver) I

Actions gotoAndStop ("up"
§ bteak
| call
P comment
§ continue
Рис. 12.14. Выбор события
13. Если у вас установлен нормальный режим работы, то после выбора команды
on из папки Actions (Действия) вам надо будет лишь указать нужный фла-
жок — Roll Over (При прохождении мыши), а затем щелкнуть на команде
gotoAndStopO и ввести up. Теперь, когда мышь окажется над основным пунк-
том меню, клип перейдет к выполнению кадра up.
14. Для остальных пунктов меню сценарий будет другой:
on (release) {tellTarget (". ./Field"){gotoAndStop (2);}
Он означает, что при нажатии на элемент меню экземпляр клипа под именем
Field перейдет к выполнению кадра с именем 2. Естественно, что у второго
пункта будет стоять 3, у третьего — 4, и т. д.
Кроме этого, на панели Instance (Экземпляр) необходимо указать в списке
Options (Параметры) пункт Tracas Menu Item (Отслеживать как пункт меню).
15. Осталось только сопоставить сценарий клипу Невидимая кнопка. Сначала
вставим его во второй кадр нижнего слоя так, чтобы он покрыл все меню. За-
тем выделим его, откроем окно редактора ActionScript и введем следующий
сценарий:
on (rollOver) { gotoAndStop ("noup"):}
Теперь, как только мышь пройдет над не закрытой другими кнопками по-
верхностью экземпляра, сработает сценарий, и клип перейдет к первому кад-
ру — noup.
16. Осталось навести красоту. В слое Текст напишем над основным меню любое
подходящее слово. Над пунктами (но только во втором кадре) разместим
уменьшенные экземпляры символов 2, 3, 4 и 5.
Меню готово (рис. 12.15). Нажимаем Ctrl+Enter и проверяем результат (рис. 12.16).
on (release)
telTrarget ("../Field") {
gotMndstop
.-;-.. - . - :
Рис. 12.15. Так будет выглядеть клип меню
Именование кадров позволяет впоследствии легко изменять фильм — вы мо-

жете растащить ключевые кадры и вставить анимационные эффекты. Использо-
вание символов, а не картинок, позволяет заменять их на двигающиеся клипы
и т. д. Используя объекты генератора (с их помощью вы сможете загрузить

внешние графические файлы), можно спроектировать легко изменяемое меню,
содержащее множество пунктов и вложенных подменю. Недаром сейчас стало
популярно использовать Flash для создания электронных магазинов.
| Flash 5 - [Menu]
Рйь 12.16. А это — меню во время проигрывания фильма
Ссылка на web-страницу и e-mail

Ссылка на адрес электронной почты или web-страницу во Flash делается почти
так же, как и в HTML. Сначала вам необходимо вставить команду ActionScript
GetURL. Вариант использования этой команды для обработки нажатия кнопки
изображен на рис. 12.17. Мало того, что вы можете задать адрес страницы пере-
хода, вы так же, как и в JavaScript, можете управлять тем, в каком окне будет
показана страница и какие переменные ей будут переданы.
ВНИМАНИЕ
В параметрах команды GetURL можно указывать как относительный, так и абсолютный
адрес. В случае абсолютного адреса название протокола перед ним обязательно, то есть
ссылка должна начинаться с http://.
302 Занятие 12. Делу— время...
Object Actions
iaf jit Object Aetior?L
' 'ED ^ Object Actions

continue I on (release) {
delete getURL ("http://dimvovich.narod.ruAndex.htnil" §
do while
duplicateMovieClip
I Line 2: getURL ("http:,,7dinwovich.natod.ru/index.htrftt");
|l||f|||http://dimvovich.narod.ru/index. html
'..'. ;•- . ' ' '•-• '• .''."• .'!. ". J
[Don't send
Рис. 12.17. Ввод гиперссылки с помощью команды GetURL
Естественно, что ввод ссылки на адрес электронной почты делается с помощью

той же команды GetURL и ключевого слова mail to: (рис. 12.18).
Object Actions
! B||| mailto: dimvovich@narod. ш
"iiiindoi
on't send
Рис. 12.18. Ввод ссылки на адрес электронной почты

Обмен данными между Flash и JavaScript

Предположим, что вы решили сделать на Flash не весь сайт, а только отдельные
страницы. Но при этом вам надо передать информацию из фильма в сценарий
JavaScript или другой фильм. Воспользоваться услугой сервера? Не обязатель-
но. Простой обмен данными можно реализовать и на стороне клиента. Для это-
го служит действие во Flash fscommand и аналогичная команда в JavaScript.
Создадим небольшой проект, состоящий из одного кадра, в котором находятся
текстовое поле и две кнопки. При щелчке на одной из них данные из поля пере-
даются JavaScript, а при щелчке на второй — данные JavaScript заносятся в поле.
1. Откройте Flash и создайте текстовое поле. Назначьте ему переменную text
и введите начальные данные.
2. Нарисуйте две кнопки и назначьте им сценарии. Для первой он должен быть
таким:
on (release) {
text="Privet HTML!":
fscommand ("dateToJS". text):
}
а для второй — таким:
on (release) {
fscommand ("dateToFlash". text):
Frame Actions
fscommand ("dateToFlash", "text ');

f line 1: fscwnirmml ("doteToFlash", "texf):
• i'-:-~": '
P
Г
Г
Рис. 12.19. Окно Actions при вводе команды fscommand
Рассмотрим подробнее команду fscommand. Если вы работаете в обычном режи-

ме, то внизу окна Actions (Действия) при выборе данной команды появятся сле-
дующие поля (рис. 12.19).
• Поле Command (Команда) служит для ввода имени команды, которое будет
использоваться для идентификации в JavaScript. Здесь можно ввести как сами
данные, так и имя переменной (надо только установить флажок справа).
• В поле Arguments (Аргументы) вводятся передаваемые данные. Здесь можно
ввести как сами данные, так и имя переменной (также необходимо устано-
вить флажок справа).
• Раскрывающийся список Commands for standalone player (Команды для отдель-

ного фильма) содержит стандартные команды управления Flash-проигрыва-
телем при публикации в качестве независимого приложения:
Q fullscreen — полноэкранный режим;
О allow/scale — режим изменения размера;
О showmenu — разрешение показа контекстного меню;
Q trapallkeys — обработка нажатий клавиш;
О exec — запуск внешнего приложения;
О quit — выход и закрытие Flash-проигрывателя.
После того как фильм закончен, опубликуйте его в виде HTML-страницы. Те-
перь необходимо внести изменения в ее код.
В тег <EMBED> добавьте имя проекта, например name="JSandFlash". Оно необходимо
для идентификации в сценарии JavaScript. Кроме того, в том же теге надо вклю-
чить обмен данных с Flash-проектом (для Netscape Communicator): swLiveCon-
nect="true". Команда JavaScript, которая выполняет обмен данными, — Name_Do-
FSCommand, где Name — значение атрибута name, присвоенное внедренному фильму.
В целом нам потребуется следующий сценарий:
function JSandFlash_DoFSCommand(command. argument) {
mess="Privet Flash!"
if (command=="dateToFlash") document.JSandFlash.SetVariableC'text". mess)
if (command=="dateToJS") alent(argument)
}
</SCRIPT>
Однако в Internet Explorer обработка событий происходит по-другому. Можно
предусмотреть развилку в сценарии JavaScript после определения браузера, но
проще добавить сценарий на VBScript, в котором вызвать функцию JavaScript:
<SCRIPT language=VBScript>
Sub JSandFlash_FSCommand(ByVal corns. ByVal arg)
call JSandFlash_DoFSCommand(coms. arg)
end sub
</SCRIPT>
Кроме того, для Internet Explorer надо добавить аргумент id в тег <OBJECT>: id=
JSandFlash.
Полностью код страницы будет выглядеть примерно следующим образом (лис-
тинг 12.9).
Листинг 12.9. Код HTML-страницы, осуществляющей обмен между фильмом Flash
и сценарием на JavaScript
<HTML>
<HEAD>
<TITLE>F1ashandJS</TITLE>
</HEAD>
function JSandFlash_DoFSCommand(command. argument) {
if (command=="dateToFlash") document.JSandFlash.SetVariableC'text". mess)
if (command=="dateToJS") alert (argument)
</SCRIPT>
<SCRIPT language=VBScript>
Sub JSandFlash_FSCommand(ByVal corns, ByVal arg)
call JSandFlash_DoFSCommand(coms, arg)
end sub
</SCRIPT>
<BOOY bgcolor="#FFFFFF">
OBJECT id=JSandFlash classid="clsid:D27CDB6E-AE6D-llcf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cabfversion
=5.0.0.0" width=550 height=400>
<PARAM name=movie value="FlashandJS.swf"> <PARAM name=quality value=high> <PARAM
name=bgcolor value=#FFFFFF> <EMBED name="JSandFlash" swLiveConnect="true"
src="FlashandJS.swf" quality=high bgco1or=#FFFFFF width=550 height=400
. type="app1ication/x-shockwave-flash"
pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?Pl_Prod_Version=S
</OBJECT>
</BODY>
</HTML>
Вот и все. Теперь вы сможете не только передавать данные из фильма в фильм,
но и сохранять данные из Flash-фильма на компьютере пользователя, восполь-
зовавшись механизмом cookie. Без сомнения, это добавит интерактивности на
ваши страницы.
Необходимо заметить, что существует более простой способ работы с FSCom-
mand: возложить все на плечи Flash. Для этого в параметрах публикации необ-
ходимо на вкладке HTML установить в верхнем списке пункт Flash with FSCommand.
Теперь при публикации проекта Flash сам добавит необходимый код в HTML-
страницу (листинг 12.10). Такая страница будет выглядеть так:
Листинг 12.10. HTML-страница с FSCommand, созданная Flash
<HTML>
<HEAD>
<TITLE>F1ashandJS</TITLE>
</HEAD>
<SCRIPT language=JavaScript>
•
var InternetExplorer = navigator.appName.indexOfC'Microsoft") != -1;
// Handle all the the FSCommand messages in a Flash movie
function FlashandJS_DoFSCommand(command, args) {
var FlashandJSObj = InternetExplorer ? FlashandJS : document.FlashandJS:
//
// Place your code here...
//
}
// Hook for Internet Explorer
if (navigator.appName && navigator.appName.indexOfC'Microsoft") != -1 &&
navigator.userAgent.indexOfC'Windows") != -1 && navigator.userAgent.indexOft"Windows
3.1") == -1) {
document.write('<SCRIPT language=VBScript\> \n'):
document.write('on error resume next \n'):
document.write('Sub FlashandJS_FSCommand(ByVal command. ByVal args)\n');
document.write('call FlashandJS_DoFSCommand(command. args)\n');
document.write('end sub\n');
document.write('</SCRIPT\> \ n ' ) :
}
//-->
</SCRIPT>


OBJECT classid="c1sid:D27CDB6E-AE6D-llcf-96B8-444553540000"
codebase-°"http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cabiversi on
=5.0.0.0"
id=FlashandJS width=550 height=400>
<PARAM name=movie value="FlashandJS.swf"> <PARAM name=quality value=high> <PARAM
name=bgcolor value=#FFFFFF> <EMBEO src="FlashandJS.swf" quality=high bgco1or=#FFFFFF
width=550 height=400 swl_iveConnect=true name=FlashandJS type="app1ication/x-
shockwave-flash"
PLUGINSPAGE="http://www.macromedia,com/shockwave/download/index.cgi?Pl_Prod_Version=S
</OBJECT>
</BODY>
</HTML>
Теперь вместо красноречивой надписи // PI асе your code here... необходимо
вставить свой код:
if (command=="dateToF1ash") document.FlashandJS.SetVariableC'text". mess)
if (command=="dateToJS") alert(args)
Обратите внимание, что в своей реализации я использовал разные имена для
названия проекта (FlashandJS) и id и name в коде (JSandFlash).
И наконец, еще один пример. Предположим, что вы решили реализовать Flash-
проект не в виде встроенного объекта web-страницы, а в виде самостоятельной
программы. Для этого, во-первых, вам необходимо настроить параметры публи-
кации, выбрав команду File > Publish Settings (Файл > Настройка публикации). На
вкладке Formats (Форматы) установите флажок Windows Projector (Исполняемый
файл в Windows). Если снять флажок Use Default Names (Использовать имена по
умолчанию), вы сможете задать любое другое название программы. Теперь, если
опубликовать проект командой Publish (Опубликовать), появится ехе-файл, ко-
торый сможет работать даже без Flash Player, на компьютере, который даже не
подозревает о существовании Flash.
Однако окно созданной программы (а любой исполняемый файл — это про-
грамма) имеет неприятные особенности: там присутствуют стандартное и кон-
текстное меню Flash, в заголовке написано Flash и т. д. От большинства этих не-
нужных деталей можно избавиться, введя в первый кадр фильма следующий
сценарий:
fscommand ("fullscreen", "true");
fscommand ("allowscale". "true"):
fscommand ("showmenu", "false"):
fscommand ("trapallkeys". "true"):
Кроме того, необходимо предусмотреть выход из программы, назначив какой-
либо кнопке команду:
fscommand ("quit"):

Наконец-то наступило лето. Ну и жара стоит! Хватит работать, пора заниматься
делом — играть. Но к сему благородному времяпрепровождению мы приступим
только на следующем занятии. А пока вспомним, что нового мы узнали. Полу-
чился довольно большой список.
• Мы научились создавать формы с помощью тегов HTML;
• увидели, что сослаться на электронную почту можно точно так же, как и на
обычную страницу;
• узнали, где взять и как разместить на страницах сайта гостевую книгу, оп-
росник или чат;
• как сделать простое меню во Flash;
• как указать ссылку на сайт и почту;
• как передавать переменные внутри фильма и как прочитать их из внешнего
файла;
• как, не переиздавая фильм, внести в него изменения;
• и наконец, мы узнали, что такое генератор и какие объекты он предоставляет.
До встречи за игровым столом, как говорят бриджисты.
Занятие 13
Что наша жизнь? — Игра

Лети же сюда,
С тобой поиграем вместе,
Воробышек-сирота.
Кобаяси Исса1
У меня за окном вдруг наступило лето — после долгой холодной весны все рас-
цвело, выпустило листья. Там, где еще недавно лежал снег, отцветают одуван-
чики, распустились ландыши и сирень... Настроение — абсолютно не рабочее,
тянет на какие-то подвиги: прокатиться куда-нибудь далеко на велосипеде,
сплавать на байдарке. Так что и на нашем занятии мы перед заключительным
рывком немного отдохнем или, точнее сказать, дадим отдохнуть другим — посе-
тителям вашего будущего сайта. Сегодня речь пойдет об играх — простеньких
компьютерных играх, дающих возможность расслабиться в течение трудового
дня. Это занятие будет скорее закреплением пройденного материала. На нем мы
повторим:
• как сделать бегущую строку на JavaScript и организовать передачу данных
между страницами;
• как программно передвинуть и дублировать клип во Flash;
• как обрабатывать событие нажатия определенной клавиши на клавиатуре.
Вспомнив все это, мы достаточно простыми средствами сможем сконструиро-
вать игру, которая поможет немного отвлечься посетителям вашего сайта, а вам
добавит опыта в создании web-страниц.
Создание игры на JavaScript

Начнем мы с простой логической игры, навеянной книжкой «Принцесса или
2
тигр?» , которую когда-то давно мне вручили за победу на очередной математи-
ческой олимпиаде. Собственно, этому вопросу и будет посвящена игра.
1
В переводе В. Марковой и Т. Соколовой-Делюсиной.
2
Реймонд М. Смаллиан. Принцесса или тигр? М: Мир, 1985. Электронная версия в Интернете —
golovolomka.hobby.ru/books/smullian/tiger/content.shtml.
Принцесса или тигр?

В качестве прелюдии — небольшая цитата.
У Фрэнка Стоктона есть сказка, которая называется «Принцесса или тигр?». В этой
сказке один узник должен угадать, в какой из двух комнат находится принцесса, а в ка-
кой — тигр. Если он укажет на первую комнату, то женится на принцессе, если на
вторую, то его (вполне возможно) растерзает тигр.
В некотором царстве правил король. Однажды он тоже прочитал эту сказку.
- В самый раз для моих заключенных! — сказал он своему министру. — Только я
не хочу полагаться на случайности. Пусть на дверях каждой комнаты повесят но таб-
личке, а заключенному будет кое-что сказано о них. Если узник не дурак и способен
рассуждать логически, он сумеет сохранить себе жизнь и в придачу заполучить пре-
лестную невесту.
- Блестящая идея, ваше величество! — согласился министр 1 .
Это была прелюдия. А задачка, которую предстояло решить первому узнику,
была вот какая. На двух дверях висели таблички:
I И
В этой комнате находится принцесса, В одной из этих комнат находится принцесса;
а в другой сидит тигр кроме того, в одной из этих комнат сидит тигр
Еще словоохотливый король добавил, что на одной из табличек написана прав-

да, а на другой — нет.
Кодирование
С основой игры мы познакомились, осталось претворить идею в жизнь в виде
страницы HTML. Что нам понадобится? На первой странице поместим введе-
ние — обычный текст, предваряющий задачку. На нем будет стоять ссылка на
страницу с текстом первой задачи (рис. 13.1). Под рисунками дверей (элементы
типа image в форме) в таблице будет помещен текст надписей, а сверху будут
идти слова короля. Если вы хотите, то можете придать странице средневековый
дизайн, поместив все на изображение замка или просто на мозаику из серых бу-
лыжников2. При щелчке на двери сработает ссылка, указанная в атрибуте action,
а на странице-получателе сценарий, скрытый от глаз простого смертного, обра-
ботает координаты щелчка и выдаст результат — правильный дан ответ или нет.
Страница-отправитель
Для практики использования различных программ верстки HTML-документов
на этот раз мы воспользуемся FrontPage Express — программой, входящей в со-
став Internet Explorer.
1. Если вы полностью установили пакет для работы с Интернетом, входящий
в стандартную поставку Windows, выберите в Главном меню пункт Start > Pro-
grams > Internet Explorer > FrontPage Express (Пуск > Программы > Internet Ex-
plorer > FrontPage Express). В открывшемся окне FrontPage Express выберите
Файл > Создать, а в открывшемся диалоговом окне — Обычная страница и ОК.
1
Там же.
2
Вопросы дизайна мы здесь обсудим лишь на общем уровне, так как они отнимают непропорцио-
нально много времени и места в книге.
310 Занятие 13. Что наша жизнь? — Игра
1Ш Головоломка *" Принцесса или тигр?* - Microsoft Internet Explorer
1?гШмВДшш1ВшД11т1ниМ
Рис. 13.1. Так выглядит страница в Internet Explorer
2. В новом файле выберите команду Таблица > Вставить таблицу. Задайте пара-
метры таблицы: 6 строк и 1 столбец.
Верхняя ячейка будет служить своеобразным логотипом страниц с задачами.
Мы поместим на нее в качестве фона рисунок зубцов на стене. Если вы ре-
шили, что фоном будет кирпичная кладка, то надо указать в качестве фона
таблицы файл с изображением. Можно не указывать файл фона, а сделать
фон всей страницы, например, черным. Для того чтобы изменить свойства
страницы или таблицы, нажмите правую кнопку и выберите соответствую-
щую команду.
СОВЕТ
Основная проблема дизайна, связанная с выбором рисунка или фона, заключается в том,
что если задать размер таблицы жестко, то при большом разрешении сбоку будет виден
фон страницы, а если ширину ячеек указывать в процентном отношении, то сложно будет
управлять размещением текста.
3. В свойствах страницы необходимо указать кодировку для сохранения и ото-

бражения: Кириллица (реально это будет windows-1251). Также в свойствах
ячейки следует указать ширину в процентах, равную 100.
4. Щелкнем на верхней ячейке правой кнопкой и выберем команду Свойства
ячейки. В диалоговом окне установим флажок Использовать фоновое изображе-
ние и, нажав кнопку Обзор, найдем нужный графический файл. Если файла
пока нет, можете выбрать для примера любой GIF-файл, по ширине кратный
760 пикселам.
Мы будем ориентироваться на разрешение экрана 800x600. Реальная ширина окна при та-
ком разрешении составляет примерно 760 пикселов.
5. Следующая ячейка будет пустой: она будет служить для отделения картинки
от текста. Ее ширина тоже составляет 100 % от ширины окна. Для этой ячей-
ки необходимо задать и высоту. Для этого надо нажать кнопку Дополнительно,
а затем — Добавить, и в поля открывшегося диалогового окна внести атрибут
и его значение: height и 5.
6. Третья ячейка будет содержать основной текст. В нее просто надо вставить
текст задачи.
7. Четвертую ячейку необходимо сначала разбить на два столбца, задав каждо-
му ширину в 50 % (Таблица > Разбить ячейки). Эти хитрости с разбиением
нужны для вычисления, на какой двери был сделан щелчок мышью.
8. Теперь в каждую половинную ячейку надо вставить таблицу, также состоя-
щую из двух столбцов. В центральные ячейки строки необходимо вставить
рисунок двери командой Вставка > Изображение. Потом мы вставим тег фор-
мы, чтобы браузер автоматически обработал координаты щелчка.
9. В крайние ячейки необходимо вставить текст табличек-подписей, указав этим
ячейкам отдельный фон или фоновое изображение. Цвет можете выбрать лю-
бой — исправите потом при редактировании кода. Для задания произвольно-
го цвета выберите из списка пункт Специальный.
10. Следующая ячейка также будет служить разделителем текста и рисунков и
будет выполнена так же, как и вторая, только фон у нее будет уже другой -
зеленая трава или по-другому развернутые камни мостовой.
11. Последняя ячейка, также с зеленой травкой в качестве фона, будет содержать
заключительный текст. Страница готова. Сохраним ее, дав команду Сохранить
как > Как файл.
Теперь откроем файл в обычном текстовом редакторе (например, в Блокноте) и
посмотрим, какой же код написал FrontPage Express.
СОВЕТ
Можно редактировать HTML-код и не выходя из FrontPage Express. Достаточно выбрать ко-
манду Вид > HTML.
У меня получилось примерно следующий код (листинг 13.1).

Листинг 13.1. Код страницы, сгенерированный FrontPage Express
<HTML>
<HEAD>
<META http-equi v="Content-Туре"
content="text/html; charset=windows-1251">
<META name="GENERATOR" content="Microsoft FrontPage Express 2.0">
<ТШЕ>Обычная страница без названиж/Т1Т1_Е>

</НЕАО>
<BODY bgcolor="#000000" text="#FFFFFF">

<DIV align="center"><CENTER>
<TABLE border="0" cellpadding="0" cellspacing="0" width="100r

background="BaiD_URL/block.gif">
<TR>
<TD colspan="2"
background-"Baui_URL/tooth.gi f"
heigt="100"> </TD>
</TR>
<TR>
<TD colspan="2" height="5"> </TD>
</TR>
<TR>
<TD colspan="2">- А что. если в обеих комнатах
сидят тигры? - спросил узник. -
Что же мне тогда-то делать?<Р>-
Считай. не повезло. - ответил
король.</Р>
<Р>- А если в обеих комнатах
окажется по красавице? -
поинтересовался узник.</Р>
<Р>- Считай, подфартило. - сказал
король. - Уж это ты и сам бы мог
сообразить!</Р>
<Р>- Ну. хорошо, а если в одной
комнате принцесса. а в другую
посадили тигра, что тогда? - не
успокаивался узник.</Р>
<Р>- Вот тут-то уже все зависит от
тебя! Не так ли?</Р>
<Р>- Да откуда же мне знать, где
кто? - сокрушенно вздохнул
узник.</Р>
<Р>Тут король указал на таблички,
прикрепленные к дверям каждой
из комнат. На них было написано:</Р>
</TD>
</TR>
<TR>
<TD width-"50r><DIV align="center"><CENTER><TABLE
border="0" cellpadding="0" cellspacing="0">
<TR>
<TD bgcolor="#COCOCO" a1ign-"center">B этой комнате
находится принцесса, а в
другой комнате сидит тигр
</TD>
<TD><IMG
src="Baui_URL/image/door.gif"
width="200" height="250"></TD>
</TR>
</TABLE>
</CENTERx/OIVx/TD>
<TD width="50r><DIV align="center"><CENTER><TABLE
<TR>
<TD><IMG
src="Baui_URL/door.gif"
<TD bgcolor="#COCOCO" align="center">B одной из этих
комнат находится
принцесса; кроме того, в
одной из этих комнат сидит
тигр</ТО>
</TR>
</TABLE>
</CENTER></DIV></TD>
</TR>
<TR>
<TD colspan="2" height="5" background="image/bottom.g1f"> </TD>
</TR>
<TR>
<TD colspan="2">- А это правда, что
здесь написано? - спросил
узник.<Р>- На одной - правда. -
отвечал король. - на другой
- нет.</Р>
<P>&nbsp:</P>
</TD>
</TR>
</TABLE>
</CENTER></DIV>
</BODY>
</HTML>
Получившийся код, по крайней мере, не запутанный. Все просто и ясно, хотя и
много лишнего.
1. Сначала изменим заголовок — исправим теги <МЕТА>:
<МЕТА name="DESCRIPTION" соп1е1и="Головоломка Принцесса или тигр?">
<МЕТА name="KEYWORDS" content-''логическая головомка">
2. Первый тег <МЕТА> из оригинала можно просто убрать — он будет мешать ра-
боте большинства серверов. И тег <tit!e> тоже должен стать более содержа-
тельным:
<ТШЕ>"Головоломка Принцесса или тигр?"</ТШЕ>
3. В теге <body> можно изменить цвет текста, выбрав из более богатого диапазо-
на цветов.
4. Естественно, что все ссылки на картинки лучше заменить относительными:
background="image/brick.gif"
Заметьте, что использование разбиения на две строки приводит к появлению
в тегах <td> встроенной таблицы атрибута colspan="2". Это означает, что
ячейка занимает два столбца.
5. Совершенно безопасно можно убрать все неразрывные пробелы, составляю-
щие лишний код, — . Как уже было сказано ранее, хорошим стилем бу-
дет заменить дефисы в тексте на символ тире — , а в начале строк — на
последовательность .
6. Теперь осталось вставить формы, прописать атрибут alt для рисунков дверей
и убрать рамки вокруг изображений. В форму мы добавим скрытый элемент,
который будет передавать символьный номер страницы с задачей и нажатую
дверь. Например, правильная дверь будет иметь номер f, неправильная — s,

и т. д.
Соответствующая часть кода будет выглядеть следующим образом:
<FORM name="forma"action="test.html">
<INPUT type="hidden" name="test" va1ue="s">
<TD>
<INPUT type="image" src="image/door.gif"
width="250" height="235" alt="Door I" border="0">
</TD>
</FORM>
</TR></TABLE></CENTER></DIV></TD>
<TD width="50r><DIV align="center"><CENTER><TABLE border="0" cellpadding="0"
cellspacing="0"><TR>
<FORM name="forma"action="test.htinl">
<INPUT type="hidden" name="test" value="f">
<TD>
<INPUT type="image" src="image/door.gif"
width="200" height="250" a1t="Door II" border="0">
</TD>
</FORM>
Естественно, все закрывающие теги имеют своих открывающих «братьев» -

данный отрывок нельзя рассматривать без контекста.
Итоговый код документа должен быть примерно таким (листинг 13.2).
Листинг 13.2. Код страницы "Принцесса или тигр?" после изменений
<НТМ1_>
<HEAD>
<МЕТА name="DESCRIPTION" соп1еп!="Головоломка Принцесса или тигр?">
<МЕТА name="KEYWORDS" согЛеп1""логическая головомка">
<Т1Т1Е>Головоломка "Принцесса или тигр?"</Т1Т1Е>
</HEAD>
<BODY bgcolor="#000000" text="#FFFFFF">

<TABLE border="0" ce11padding="0" cellspacing="0" width="100r

background="i mage/Ы ock. gi f ">
<TR>
<TD colspan="2"
background="image/tooth.gif" height="100">&nbsp:</TD>
</TR>
<TR>
<TD colspan="2" height="5"> </TD>
</TR>
<TR>
<TD colspan="2">&|151;&nbsp:A что. если в обеих комнатах
сидят тигры? &nbsp:&#151:&nbsp:спросил узник. &nbsp:&#151:&nbsp:
Что же мне тогда-то делать?<Р>Ш51;&пЬ5р;
Считай, не повезло. Snbsp;&#151:&nbsp:ответил
король.</Р>
<P>&|151:&nbsp:A если в обеих комнатах
окажется по красавице? &nbsp:&nbsp:
поинтересовался узник.</Р>
<P>&#151:&nbsp:Считай, подфартило. &nbsp:&#151:&nbsp:CKa3an

король. Snbsp: №51 : Уж это ты и сам бы мог
сообразить!</Р>
<P>&#151:&nbsp:Hy. хорошо, а если в одной
комнате принцесса, а в другую
посадили тигра, что тогда? &nbsp:&#151: &nbsp: не
успокаивался узник.</Р>
<P>&#151:&nbsp: Вот тут-то уже все зависит от
тебя! Не так ли?</Р>
<P>№51: fla откуда же мне знать, где
кто? &nbsp:№51:&nbsp:сокрушенно вздохнул
узник.</Р>
<Р>Тут король указал на таблички,
прикрепленные к дверям каждой
из комнат. На них было написано:</Р>
</TD>
</TR>
<TR>
<ТО width="50rxDIV align="center"><CENTER><TABLE
border="0" cellpadding="0" cellspadng="0">
<TR>
<TD bgcolor="#COCOCO" align="center">B этой комнате
находится принцесса, а в
другой комнате сидит тигр
</ТО>
<FORM name="forma"action="test.ritml">
<IMPUT type="hidden" name="test" value="s">
<TD><INPUT type="image" src="1mage/door.gif"
width="200" height="250" alt="Door I" border="0"></TD>
</FORM>
</TR>
</TABLE>
</CENTER></OIV></TD>
<TD width="50rxDIV align="center"><CENTERxTABLE
<TR>
<FORM name="forma"action="test.html">
<INPUT type="hidden" name="test" value="f">
<TD><iNPUT type="image" src="image/door.gif"
width="250" height="235" alt="Door II" border="0"x/TD>
</FORM> <TO bgcolor="#COCOCO" a!ign="center">B одной из этих
комнат находится
принцесса: кроме того, в
одной из этих комнат сидит
тигр</ТО>
</TR>
</TABLE> .
</CENTERx/DIVx/TD>
</TR>
<TR>
<TD colspan«"2" height="5" background»"image/bottom.gif"> </TO>
</TR>
<TR>
<TD colspan="2">&#151: A это правда, что здесь
написано? - спросил узник.<P>&#151: На
одной &nbsp:S#151;&nbsp:npaBfla. отвечал король.
&#151:&nbsp:Ha другой &#151: HeT.</P>
<Р>А вы на месте узника, какую бы
дверь открыли? (Конечно, если вы
предпочитаете принцессу тигру.)</Р>

</TD>
</TR>
</TABLE>
</CENTER></DIV> ,
</BODY> <
</HTML>
Страница-получатель
Страница test, htm будет выглядеть достаточно незамысловато. Формально на ней
следует написать извинение перед теми, у кого не работают сценарии JavaScript,
и вставить ссылку на файл с ответами. В сценарии, как и на прошлом занятии,
мы обработаем строку ссылки и узнаем, куда отправлять посетителя — к тиграм
или к принцессе. Правда, я предлагаю реализовать более мрачный вариант: в слу-
чае неправильного ответа отправлять к тигру, а в случае правильного — к сле-
дующим дверям, а принцессу оставить на самый конец. В конце концов, это не
противоречит условию задачи: за дверью действительно находится принцесса,
но никто не говорил,,что по пути нет других дверей. При этом мы используем
полученные координаты, отправляя на разные страницы с тиграми. Естествен-
но, что это не очень практично, но зато вы научитесь обрабатывать координаты
и сможете заменить двери одной картинкой или использовать этот прием в бо-
лее сложной задаче.
СОВЕТ
Вы можете завести в форме невидимый элемент, который также будет отправляться на сле-
дующую страницу. Если предварительно заполнить его (например, по событиям onsubmit
или onclick) количеством непрерывно данных правильных ответов, тогда вы можете отсы-
лать к принцессе только тех, кто прошел все двери за один раз. Идея очень проста: на
первой странице вы присваиваете 1, на следующей, если пришла единица, пишете 2 и т. д.
В оригинале 12 задачек — если придет 12, значит можно отсылать к принцессе. В случае
неправильного ответа — обнулять счетчик.
В отличие от Flash, в HTML спрятать ничего не удастся — ведь браузер всегда работает
с исходным текстом. Можно лишь скрыть код так, чтобы время, потраченное на его пони-
мание, было сравнимо со временем на решение задачки. Тогда подсмотреть ответ будет не
так интересно.
Страница же будет иметь вот такой код (листинг 13.3).

Листинг 13.3. HTML-страница со скрытым содержанием для переадресации пользователя
<НТМ1_>
<НЕАО>
<МЕТА name="DESCRIPT!ON" соп1еп1="Головоломка Принцесса или тигр? З а д а ч а 1">
<МЕТА name="KEYWORDS" соп1еп1="логическая головомка">
<Т1Т1Е>"Головоломка Принцесса или тигр? Задача 1"</TITLE>
<SCRIPT src='test.js'>
</SCRIPT></HEAD>
<BOOY>
<SCRIPT>
Ref(document.1ocati on.href):
</SCRIPT>
Если у вас не работают сценарии JavaScript, тогда вы можете познакомиться с ответами на
странице <А href="answers.htm">OTBeTbi</A>.
</BODY>
</HTML>
В отдельный текстовый файл testjs необходимо записать текст функции Ref:

function RefС1 ос) {
var iX=0;
var URLX=String:
var URLX="Baiu_URL/test.htm?test=f&x=";
var lenURL-URLX.length;
var reff=String;
iX-parseInt(loc.substring(lenURl.lenURL+3).10):
// Распознаем х-координату
switch(loc.substring(lenURL-4.1enURL-3)) {
// Распознаем задачу
case "f": reff="test2.htm"; break;
case "s":if (100>iX) {reff="tigr_left.htm";}
// Если открывают левую половину(ширина двери 200).
// то тигр слева, если правую, то справа
else {reff="tigr_right.htm";}; break:
// И так далее
default: reff="answers.htm":
}:
wi ndow.open(reff.'_top'):
}:
Чтобы заморочить голову, можно проводить сравнение не явно, а через коды
символов. Тогда код функции изменится таким образом:
function Ref doc) {
var iX=0:
var URLX=String:
var URLX="Baiu_URL/test.htm?test=f&x=":
var lenURL=URLX.length:
var reff=String;
iX=parseInt(loc.substring(lenURL.lenURL+3).10):
// Распознаем х-координату
switch(loc.charCodeAt(lenURL-4)) {
// Распознаем задачу
case 102: reff="test2.htm"; break:
case 115: if (118>iX) {reff-"tigr_left.htm";}
// Если открывают левую половину(ширина двери 235).
// то тигр слева, если правую, то справа
else {reff="tigr_right.htm";}; break;
// И так далее
default: reff="answers.htm";
}:
wi ndow.open(reff.'_top'):
Теперь осталось создать файлы с тиграми (tigr_left.htm и tigr_right.htm), с прин-

цессой, а также все задачки (test2.htm и т. д.).
Ловля в паутине
Эта игра навеяна старой электронной игрушкой — предшественником тетрисов,
где волк из «Ну, погоди!» ловит скатывающиеся с лотков яйца. Наша игра бу-
дет похожа: паук будет протягивать лапы к ползущим насекомым. Насекомыми
будут какие-нибудь закорючки (@ или #), которые будут ползти по текстовым
полям, поедая «растительность» на них.
Что нам понадобится? Основная страница с формой и сценарием JavaScript.
Также нам понадобится изображение паука и паутины (для фона, при отладке
вы можете использовать любые картинки, хоть с крокодилом вместо паука и
речным пейзажем вместо паутины). Паук будет передвигаться по нескольким
местам — около каждого текстового поля будет свое «паучье» место. По щелчку
на поле паук будет перебегать на новое место, а насекомое в поле — исчезать,
растворяясь в паучьей утробе. Для простоты описания в книге заведем только
4 поля с каждой стороны — по одному на паучью лапу. Вам потом не составит
труда увеличить их количество.
.
Страница
Большинство тегов, необходимых на этой странице, придется переделывать, если
их писать с помощью HTML-редактора. Поэтому я предлагаю ввести ее код
вручную. Код будет примерно таким (листинг 13.4).
Листинг 13.4. Страница с игрой в паутину
<HTML>
<HEAD>
<МЕТА name="DESCRIPTION" content="Mrpa в паутину">
<МЕТА name="KEYWORDS" content="nayK паутина игра">
<Т1Т1_Е>Игра в паутину</Т1Т1_Е>
<SCRIPT src="spider.js"></SCRIPT>
</НЕАО>
<FORM name="forma">
<INPUT type="hidden" name="hidden" value="0">
<TABLE border="5" bordercolor="#CCCCCCC" width="500" background="image/net.g1f">
<TR>
<TD>
<TABLE cellpadding="0" cellspacing="0" width="500" border="0">
<TR>
<TD><INPUT type="text" size="17" style="font-family: Courier; border: Opx"
name="tl" onFocus="Place=Click(this.name, Place);">
</TD>
<TD><IMG name="il" src="image/spweb.gif"
width="75" he1ght-"66"></TD>
<TD><IMG name="i2" src="image/lpixel.gif"
width="75" he1ght-"66"></TD>
<TD><INPUT type="text" size="17" style-"font-family: Courier; border: Opx"
name="t2" onFocus="Place=Click(this.name. Place):">
</TD>
</TR>
<TR>
<TD><INPUT type="text" size="17" name="t3" style="font-family: Courier: border:

Opx" onFocus="Place=Click(this.name. Place):">
</TD>
width="75" height-"66"></TD>
width="75" height="66"x/TD>
<TD><INPUT type="text" size="17" style="font-family: Courier: border: Opx"
name="t4" onFocus="Place=Click(this.name. Place):">
</TD>
</TR>
<TR>
Opx" onFocus="Place=Click(this.name. Place):"> </TD>
<TD><iMG name="i6" src="image/lpixel.gif"
width="75" height-"66"x/TD>
</TR>
<TR>
<TDxiNPUT type="text" size="17" name="t7" style="font-family: Courier: border:
Opx" onFocus="Place=C1ick(this.name. Place);"> </TD>
<TDxiMG name="i7" src="image/lpixel.gif"
<TDxiMG name="i8" src="image/lpixel .gif"
<TDxiNPUT type="text" size="17" name="t8" style="font-family: Courier: border:
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
</FORM>
<SCRIPT>
var Place="l":
// Начальное положение паука
var Default-"!!!!!!!!!!!!!!!!!!!!"
// Начальный текст в полях
var RATE = 580:
// Скорость продвижения и рождения
var iString=String;
// Служебная переменная
for (i-1: i<9; i++){
iString="t"+i:
document.forma[iString].value - Default:
}:
ChangeO;
</SCRIPT>
</CENTERx/DIV>
</BOOY>
</HTML>
Netscape Communicator не поймет значения атрибута style="font-family: border: Opx"".
В нем при отображении страницы рамка вокруг текстового поля будет присутствовать.
Основная идея тривиальна. Один раз в заданный промежуток времени (RATE -

количество миллисекунд) запускается функция ChangeO. В ней генерируется
случайное число от 1 до 8, обозначающее поле, в котором появится новый
«жук». Жук появляется вместо последнего символа в поле. При этом все поля
сдвигаются: первый символ меняется с последним так же, как мы это делали
для бегущей строки на занятии 5. В результате поля заселяются ползущими жу-
ками (рис. 13.2).
По щелчку на поле происходит событие onFocus, в обработчик которого включе-
но передвижение паука и поедание жуков. Событие onClick также происходит,
но разные браузеры могут обрабатывать его по-разному, например вместо собы-
тия onClick генерировать событие onSelect. Единственное неудобство события
onFocus состоит в том, что если вы будете использовать какие-либо функции
типа alertO, тогда вы обречены на зависание обозревателя каждый раз, когда
это предупреждение появится перед вашими глазами.
•3 Игра в паутину- Microsoft Internet Explorer
Рис. 13.2. Форма может служить не только для деловых нужд
В форме определены 8 текстовых полей и одно скрытое поле для хранения ре-
зультата (для результата можно использовать и обычную переменную). Кроме
того, на форму попали 8 изображений: одно с пауком и семь пустых. Фоном
служит рисунок паутины — net.gif. Для красоты таблица с формой помещена
в другую таблицу, состоящую из одной ячейки и обведенную в серую рамочку

толщиной в 5 пикселов.
Переменная Р1 асе обозначает текущее положение паука. Вместо простого вызо-
ва функции обработчика мы присваиваем этой переменной возвращаемый ре-
зультат.
Функции Change и Click вынесены в отдельный JS-файл, который, как вы знаете
из заголовка HTML-файла (листинг 13.5), называется spider.js.
Листинг 13.5. Функции JavaScript, вынесенные в файл spider.js
function ChangeO {
setTimeoutCChangeO'. RATE):
// Вызывает сама себя

var TEXT=String;
var iString=String;
van URL="Bau_URL/exp.htm"+"?result="+document.forma.hidden.value:
var URLl="Bauj_URL/spider.htm"
// Адрес страницы получателя
var Mum = Math.round С Math.randomO* 7 )+l;
// Получаем случайное число от 1 до 8
iString="t"+Num:
TEXT=document.forma[iString].value:
document.forma[1String].value = TEXT.substring(l) + "@";
// Порождаем "жука"
for (i=l; i<9; i++){
// Сдвигаем всех жуков и обычные поля
iString="t"+i:
TEXT - document.forma[iString].value;
if (TEXT.substring( 0. 1)=="@") if (confirmC'Baui результат -"
+document.fо rma.h i dden.va1ue+
"\n Вы будете продолжать игру?")) {window.open (URL1.'_top');}
else{wi ndow.open(URL."_top"):}:
// Если жук на первом месте.
// тогда отсылаем на новую страницу - конец игры
document.forma[iString].value = TEXT.substring( l ) + TEXT.substring( 0. 1):
}:
// Вводим ускорение
i f (document.forma.hidden.value<2000){
// За каждую сотню очков убавляем 20 единиц скорости
RATE=500-Math.round(document.forma.hi dden.value/5);}
else {RATE=100};
}:
function Click(name. Place){
var name_local="i"+name.substring(l);
var Place_local="i"+Place;
// Получаем имена картинок
var len=Default.length-l;
document.images[name_local].src="image/spweb.gi f";
document.images[PIace_loca!].src="image/lpixel.gif":
// Изменяем картинку
Place=name.substring(l);
for (i=0; i<len: i++){

// Добавляем очки
11 Зак. 96
TEXT=document . forma [name] . val ue :

TEXT=TEXT.substring(i,i+l):
if (TEXT=="@") document. forma. hidden. value++;
document . forma [name] .value =Def aul t :

// Убираем жуков
return Place:
// Возвращаем новое значение положения паука
ВНИМАНИЕ
Используйте функцию setTimeoutQ осторожно, так как она образует отдельный поток и вы-
полняется независимо от всей остальной программы. Из-за этого она может оперировать с
уже устаревшими значениями полей и переменных.
Microsoft Internet Explorer
Отмена
Рис. 13.3. Сообщение, выводимое функцией confirm()
Основные комментарии сделаны прямо в тексте функций. Единственная суще-

ственная новость — это использование функции confirmO. Эта функция Java-
Script выдает сообщение (рис. 13.3), которое вводится в качестве параметра, а ее
результатом является значение нажатой кнопки: если нажата кнопка ОК, то зна-
чение confirmO будет равно true, а если Cancel — false. Соответственно, опера-
тор i f будет выполнять основную ветвь или ветвь el se. В нашем случае он будет
либо отсылать на эту же страницу, если пользователь пожелает продолжить
игру, либо отошлет на страницу с результатом exp.htm:
<HTML>
<HEAD>
<МЕТА name="DESCRIPTION" content="Hrpa в паутину">
<МЕТА name="KEYWORDS" content="nayK паутина игра">
<Т1Т1Е>Игра в паутину, конец игры</ТШЕ>
</HEAD>

</SCRIPT>
</BODY>
</HTML>
Паутина
После того как страница готова или до этого (все зависит от стиля и подхода),
можно приступить к созданию паука и паутины. Паутину мы нарисуем сами,
а паука позаимствуем в Интернете и обработаем в Photoshop.
Рисунки, состоящие из прямых линий, лучше всего создавать в программах век-
торной графики. Однако и такой «оплот» растровой графики, как Photoshop,
в последних версиях имеет достаточно векторных инструментов.
1. Создадим новый файл и зададим его размеры 500x300 пикселов.
2. На панели Слои создадим новый слой, на котором и будем рисовать.
3. Для начала необходимо нарисовать основные линии, на которых будет ле-
жать спираль паутины. Это будут прямые, идущие из точки почти в центре
окна к краям рисунка.
СОВЕТ
Паутины бывают разные. Если вы читаете книгу, когда на дворе лето, можете посмотреть
на творения восьминогих мастеров-ткачей в лесу или на улице. А может, у вас на окне жи-
вет домашний любимец, отлавливающий назойливых мух, оставшихся с жаркой поры?
Пусть линий будет немного, скажем, 10-12. Нарисовать их можно с помощью

пера, каждый раз сбрасывая память о последнем узле выбором другого инст-
румента. Можно просто взять инструмент Линия. Если вам не понравится, как
вы провели очередную линию, выберите инструмент Выбор компонента пути
или Прямой выбор и передвиньте маркеры, управляющие линией.
4. После того как вы создали основу для будущей виртуальной ткани, присту-
пайте к плетению спирали. Для этой цели лучше всего взять Перо. Начиная
из центральной точки и постепенно отодвигаясь все дальше и дальше, нари-
суйте спираль. Для такого рисунка Перо — идеальный инструмент. Вам доста-
точно щелкнуть в очередной точке, и прямая послушно соединит предыдущий
узел с вновь созданным. После завершения «плетения» результат можно под-
корректировать с помощью инструмента Прямой выбор, передвинув не попав-
шие сразу на место маркеры.
5. Затем необходимо превратить рисунок в растровое изображение, дав команду
Слои > Растеризовать.
6. Сохраните файл с расширением .gif, воспользовавшись командой File > Save for
Web (Файл > Сохранить для Web).
Если, по каким-то причинам, у вас есть желание рисовать в программе вектор-
ной графики, то там можно сделать то же самое, даже быстрее. Возьмем, напри-
мер, FreeHand. Создадим новый файл. В контекстном меню выберем команду
Свойства, зададим размер 500x300. Далее по описанной выше технологии рисуем
паутину на всю страницу. Потом даем команду Файл > Экспорт, выбираем тип GIF,
называем файл и сохраняем его. Паутина готова.
С пауком дело обстоит тоже просто.
1. Найдите и отсканируйте изображение паука.
2. Загрузите изображение в Photoshop и с помощью Волшебной палочки (Magic
Wand) выделите все ненужные области вокруг паука и удалите их.
3. Уменьшите изображение до требуемых размеров (тех, которые указаны в

HTML-файле) командой Image > Scale Image (Изображение > Размер изобра-
жения). Сохраните файл как spweb.gif через команду Save for Web (Сохранить
для Web) из меню File (Файл). В результате непрозрачными останутся только
не удаленные области и паук будет ползать по паутине.
Вы можете сами усовершенствовать игру: добавить текстовые поля или изме-
нить их расположение на странице, увеличивать скорость в соответствии с на-
бранными очками, сделать не перебегающего паука, а вытягивающего лапы (то-
гда вам понадобятся картинки для каждого положения).
Создание простой аркадной игры

на Flash
Первыми играми, которые появились на PC, были различные аркады: стрелял-
ки, лабиринты и прочее. Основное правило таких игр следующее: необходимо
преодолеть относительно небольшое игровое поле (поскольку оперативной па-
мяти было мало) и перейти на следующий уровень. Уровней могло быть и за
сотню, а в конце игрока ждал «большой приз» — анимационный ролик на не-
сколько секунд.
Времена пришли другие, оперативной памяти на компьютере теперь может быть
больше, чем раньше было на жестком диске, да и полноценным трехмерным
мультиком (почти кино!) уже никого не удивишь. Непонятно, что будет делать
Голливуд, когда фильмы станут сплошь рисованными...
Но я немного отвлекся, вернемся к играм. Несмотря на все возрастающие мощ-
ности, аркадные игры не отмирают. Наоборот, в Web они получили новую жизнь.
Ведь любая сложная игра требует и установки объемной клиентской програм-
мы, и большего обмена данными в процессе игры по Интернету. А маленькие
аркады легко выживают в сетевых условиях. И мы с вами сейчас создадим та-
кую игру. Перед вами возможность ненадолго окунуться в детство «на закон-
ных основаниях», и если начальник спросит вас: «Почему играете в рабочее вре-
мя?» — вы с чистой совестью можете ответить: «Изучаю Интернет-технологии,
тестирую программу».
Идея этой игры будет очень незатейливой: игрок ходит по лабиринту в поисках
выхода, спасаясь от Минотавра. Вид поля показан на рис. 13.4. Игрок, его враги
и функциональные клетки будут клипами. Такой подход даст нам возможность
динамически подгружать любое количество лабиринтов, не ограничивая их чис-
ло при создании фильма (переменная, отвечающая за количество лабиринтов,
будет задана в отдельном текстовом файле Maze.txt).
СОВЕТ
Обычным атрибутом аркадных игр является ограничение времени. Используйте методы
и свойства объекта Date для контроля времени в игре.
ф Flash
:
File View Control Help
Рис. 13.4. Так выглядит поле для игры
Лабиринт
Пусть лабиринт у нас будет небольшой: 20x20 клеток. Для простоты его стенки
будут занимать одну клетку, то есть каждая клетка — это либо стенка, либо про-
ход. Все крайние клетки, расположенные по периметру, будут стенками. Впо-
следствии вы сможете кроме пустого пространства ввести другие функциональ-
ные клетки, но пока их будет 5 типов: стенка, проход, вход, выход и логово
минотавра. Игрок начинает игру со входа и заканчивает на выходе. Минотавр
начинает свое движение с логова и стремится к игроку или просто случайно
блуждает.
Итак, начинаем.
1. Сначала необходимо задать размер стола фильма: 20 клеток по 30 пикселов
будет 600. Итого размер нашего фильма будет 600x600.
2. В первом кадре мы должны задать переменные, управляющие чтением тек-
стового файла Maze.txt, который определяет количество уровней. Проще всего
сделать кнопку, при нажатии которой начинается генерация лабиринта. До-
бавляем первый ключевой кадр и вставляем в него сценарий, состоящий из
команд объявления переменных:
loadVariablesNum ("Maze.txt". 0):
var labirint = "Labirintl.txt":
var Coord; // условная координата человека
var Bui =0:// номер последней выпущенной пули
var numer =1;// номер лабиринта
loadVariablesNum (labirint. 0);
Предложения по-русски — это поясняющий текст, то есть комментарии, не-
обходимые для пояснения сценария. Естественно, что их можно не вводить.
Условной координатой мы назовем число, соответствующее номеру ячейки,
если все ячейки расположить в один ряд.
Чтобы вставить комментарий в текст программы, надо либо выбрать действие Comment
в папке Actions (Действия), либо просто ввести текст после двойной наклонной черты «//».
Однако при наборе текста на русском языке может возникнуть ошибка при обработке сце-
нария, поэтому писать его лучше латиницей. Я же для простоты чтения все комментарии
в книге буду писать по-русски.
3. В этом же кадре мы введем функцию для инициализации лабиринта (лис-

тинг 13.6).
Как и везде, в объектно-ориентированном программировании иерархия объ-
ектов указывается через точку. Например, Меп._х означает свойство _х (коор-
динату х) экземпляра Men, a this.Min._rotation означает угол поворота клипа,
вложенного в текущий, экземпляр которого назван Mi n.
Объект, обозначаемый _root, является главной кинолентой и корнем всех
объектов. Еще один важный объект — this — обозначает текущий объект,
объект-владелец сценария.
Листинг 13.6. Функция инициализации лабиринта
function ini () {
L = new Array О:
// Массив со значениями ячеек лабиринта
М = new ArrayO:
// Массив условных координат минотавров
В = new ArrayO:
// Массив условных координат пуль
ВХ = new ArrayO ;
BY = new ArrayO:
// Массивы реальных координат пуль
Length = parselnt(Length);
// Количество ячеек в лабиринте, читается из файла
Hi = parselnt(Hi):
// Высота одной ячейки

HiW = parselnt(HiW);
// Ширина ячейки
W1 - parselnt(Wi):
// Количество ячеек в ряду
S1 -"":
j - 0;
for (i-0: i<S. length; i++) {
// Переписывание строки со значениями ячеек, отбрасывание перевода строки
if ((S.substrd. 1) ne "\n") and (S.substrd , 1) ne "\r")) {
SI = Sl+S.substr(i. 1):
while (k<Length) {
// Запись из строки в массив L
L[k] = Sl.substr(k, 1):
name = "L"+String(k) :
// Содержание ячейки должно совпадать с именем дублируемого клипа (Clip)
// name - имя нового клипа
Clip - L[k]:
if (Clip ne "P") {
duplicateMovieClip (Clip. name, k):
setProperty (name. _x. HiW*(k-Wi*Math.floor(k/Wi))+Hiw/2);
setProperty (name. _y. Hi/2+Hi*Math.floor(k/Wi));
// Задание координат клипа с изображением ячейки
if (Clip eq "M") {
// Порождение минотавра
k;
name = "M_"+String(j):
duplicateMovieClip (Minotavr. name. Length+j);
setProperty (name. _x, HiW*(k-Wi*Math.floor(k/Wi))+HiW/2):
setProperty (name. j. Hi/2+Hi*Math.floor(k/Wi));
with (name.valueOf) {
Num = _root.j;
if (Clip eq "E") {
// Порождение человека
_root.Coord - k;
// Coord - условные координаты человека
Men._x = HiW*(k-Wi*Math.floor(k/Wi))+HiW/2:
Men.j/ = Hi*Math.floor(k/Wi)+Hi/2;
Dep = parseInt(_root.Length)+M.length;
// Изменение глубины клипа
Men.swapDepths(Dep);
k = k+1;
gotoAndPlay ("Maze"): // Переход на кадр лабиринта

}
4. После того как вся предварительная работа проведена, приступаем к сле-
дующему кадру. Начиная со второго кадра нам понадобятся три слоя: Текст,
Сценарий и Экран. На слое Сценарий будут вводиться все сценарии, относя-
щиеся к главной киноленте, слой Текст будет содержать текстовые компо-
ненты фильма, а Экран — графическое оформление (он должен быть самым
нижним).
5. Во втором кадре в слое Сценарий нам надо нарисовать кнопку. Пусть пока это
будет овал, а потом мы его заменим дубовой дверью. Рисуем овал, выделяем
его и нажимаем F8, превращая в символ. Поскольку это будет кнопка, соот-
ветствующее значение следует выбрать в качестве поведения символа. С име-
нем тоже не будем мудрить — назовем его Кнопка.
6. Снова выделим овал на столе и нажмем F8. Запишем символ как графическое
изображение Дверь.
7. Вернемся опять к кнопке. Кроме фигуры расположим в символе два тексто-
вых поля: в статическом напишем Лабиринт, а динамическому дадим имя
numer. Оно будет выводить значение этой переменной, то есть номер лаби-
ринта.
8. Перейдем к основной сцене. На слое Текст во втором кадре введем следующее
пояснение:
Стрельба: Insert - влево. Ноте - вверх. Page Up - вправо. End - вниз
Этот текст нужен для указания игроку клавиш для стрельбы. Если вы про-
тив стрельбы, уберите все части фильма, связанные с ней.
Во втором кадре сценарий будет состоять из одной команды: stopO;. На па-
нели Frame (Кадр) в поле Label ему необходимо дать имя Enter. В этом же кад-
ре необходимо определить обработчик нажатия кнопки. Для этого ее надо
выделить и на панели редактора ActionScript ввести следующий простой
сценарий:
on (release) {
9. На слое Экран можно поместить символ — графическое изображение Обрамле-

ние, которое будет дополнять дизайн двери. Пусть пока это будет прямо-
угольник размером со стол, а потом мы его заменим кладкой стены.
10. Как вы могли заметить, в функции ini используется много клипов. Все их
надо расположить за пределами стола. Их содержание понятно из названий:
Стена, Вход, Логово, Человек и Минотавр. Пусть пока ячейки задаются просты-
ми раскрашенными клетками 30x30 пикселов, а остальные — фигурками при-
мерно того же размера. В конце работы над фильмом мы заменим их на
нужные. Экземплярам, которые вы перенесли на стол, надо дать соответст-
вующие имена на панели Instance (Экземпляр). Это будет W (стена), Е (вход),
М (логово), Men (человек) и Minotavr (Минотавр). Именно такие имена ис-
пользуются в сценариях.
СОВЕТ
Чтобы разнообразить картинку, можно вводить и другие типы ячеек (в ТХТ-файле), не за-
бывая называть такой же буквой размещенный экземпляр символа. Функция ini автомати-
чески разместит нужный символ.
Дублирование символов занимает много времени. Можно предложить другой путь задания
начального лабиринта. В исходном файле задаются только условные координаты человека
и минотавров, а также параметры лабиринта. Сам же лабиринт рисуется в виде графиче-
ского файла (GIF или JPG) и загружается в фильм в виде объекта генератора (то есть вы
сможете редактировать только графический файл, не меняя фильм для обновления лаби-
ринтов). Единственное неудобство такого подхода — ограничение количества лабиринтов,
так как для каждого лабиринта необходимо расположить объект генератора еще при соз-
дании фильма.
11. Далее необходимо продлить слои, вставив в слой Сценарий, ключевой кадр.
В слой Текст можно вставить простой кадр (F5).
12. В качестве сценария для этого кадра будет выступать строчка с вызовом функ-
ции i n i ( ) ; . Это необходимо для того, чтобы обойти нажатие клавиши Enter
игроком. Поскольку при проигрывании SWF-файла эта клавиша автоматиче-
ски переносит фильм на следующий кадр, мы продублируем в этом кадре об-
работчик события.
13. Настал черед кадра 4. В него во всех слоях лучше вставить пустой ключевой
кадр (F7). Кадр следует назвать Maze. Единственное содержание этого кадра —
символ Трава, расположенный на слое Экран, который будет служить фоном
лабиринту. На слое Сценарий будет сценарий, состоящий из команды stopO;.
Слои надо продлить на кадр 5, в котором (в ключевом кадре) будет стоять ко-
манда gotoAndStopC'Maze");. Она убережет фильм от перехода к следующим,
заключительным кадрам при нажатии клавиши Enter. Использование меток
к кадрам дает вам возможность впоследствии растянуть именные участки
фильма на любое количество кадров.
14. Следующий кадр, под номером 6, будет носить имя Minotavr. Содержание слоя
Текст будет следующим: Вас настиг минотавр. Желаете повторить? Вы можете
ввести любую подобающую ситуации фразу. Слой Сценарий содержит сле-
дующую последовательность инструкций:
k = 0;
while Ck<Length) {
name = "L"+String(k);
Clip = L[k]:
if (Clip ne "P") {
. removeMovieClip (name); // Уничтожаем клипы ячеек
for (i-1; i<(M.length+l); i++) {

name = "M_"+String(i);
removeMovieClip (name): // Уничтожаем минотавров
with (Men)
// Выводим клип человека за пределы стола

_х = -100;
_у - -100:
stop С ) :
Точка с запятой, стоящая на отдельной строке, — не авторское ухищрение сделать книгу
толще. Именно такой вид примет сценарий, если редактор ActionScript перевести в обыч-
ный режим. Можно пользоваться этой удобной функцией для структурирования введенно-
го сценария. Flash проверит сценарий на ошибки и правильно расставит отступы у скобок.
Этот сценарий необходим для уничтожения дублированных клипов ячеек и

минотавров и вывода клипа с человеком за пределы видимости. В кадре 6 ос-
талось только разместить клип с кнопкой перехода. Поскольку функция пе-
рехода к продолжению игры будет однотипной, можно задать ее в виде кли-
па Заключение. Хотя пока это будет статической картинкой с кнопкой, потом
вы сможете добавить в этот клип любую анимацию.
15. Клип Заключение содержит в себе кнопку Продолжение. Выделите кнопку и
введите на панели Actions (Действия) следующий сценарий:
on (release) {
var labirint = "Labirint"+_root.numer+".txt";
loadVariablesNum (labirint. 0);
_root.gotoAndPlay("Enter"):
}
16. Продлите слои до кадра 11. В каждом кадре слоя Сценарий задайте ключевой
кадр. В четных кадрах надо оставить тот же сценарий, что и в кадре 6, а в не-
четных разместить сценарий, страхующий от нажатия Enter:
var labinnt="Labirint"+_root.nuiner+ ".txt";
loadVariablesNum ( labirint.0);
_root.gotoAndPlay ("Enter");
17. Кадры 8 и 10 должны получить имена Finish и End. Слой текста в кадре Finish
должен быть примерно следующим: Вы прошли все лабиринты, желаете начать
сначала?, а кадра End — Вы прошли очередной лабиринт, желаете следующий? Кадр
Экран содержит все один и тот же символ Заключение.
18. Вернемся к кадру Enter. Выделим экземпляр Men и введем на панели редакто-
ра ActionScript код сценария обработки нажатия клавиш управления движе-
нием клипа и стрельбой (листинг 13.7).
Листинг 13.7. Сценарий обработки нажатия клавиш управления движением клипа и стрельбой
onClipEvent (keyDown) {
Kk = Key.getCodeO:
// код клавиши
jl = _root.Coord;
// Временная переменная - условная координата человека
if (Key.isDownCKey.RIGHT)) {
// Демонстрация различной обработки нажатия клавиша, нажата клавиш вправо
this.gotoAndStop("ri");
// Поворот клипа человечка
if (_root.L[jl+l]. ne "W") {
this._x += (_root.HiW);
jl +• 1;
if (Key.isDown(37)) {
// Демонстрация различной обработки нажатия клавиш
// Нажата клавиша влево
this.gotoAndStopC'le");
if (_root.L[jl-l] ne "W") {
this._x += -(_root.HiW):
jl += -1:
if (Kk == 38) {
// Нажата клавиша вверх
thi s .gotoAndStop( "up" ) ;
if (_root.L[jl-20] ne "W") {
this._y += -(_root.Hi):
jl += -_root.Wi ;
f (Kk == 40) {
// Нажата клавиша вниз
thi s . gotoAndStop( "do" ) :
if (_root.L[jl+20] ne "W") {
this._y +- (_root.Hi);
jl += _root.Wi ;
f (Kk == 36) {
// Нажата клавиша Home
NumB = "U"+_root.Bul :
// Имя пули определяется направлением и номером
_root.B[_root.Bul] = _root. Coord;
// Заводим следующий элемент массива
k = _root. Coord:
Dep = j"oot.length+_root.M.length+l+_root.Bul :
duplicateMovieClip ("_root.Bullet". NumB. Dep);
// Дублируем очередную пулю
_root.BX[_root.Bul] = _root.HiW*(k-_root.Wi*Math.f1oor(k/_root.Wi))+_root.HiW/2:
_root . BY[_root . Bui ] = _root . Hi /2+__root . Hi*Math . f 1 oor (k/_root .Wi ) ;
// Заводим элементы массива ее координат
// Можно обойтись и- без них. но с ними удобней
_root.Bul += 1:
// Добавляем счетчик пуль
if (Kk == 45) {
// Нажата клавиша Ins
NumB = "I"+ root. Bui ;
_root.B[_root.Bul] = _root.Coord:
k = _root.Coord:
Dep = _root.Length+_root.M.length+l+_root.Bul:
duplicateMovieClip ("_root.Bullet". NumB, Dep):
_root.BX[_root.Bul] - _root.HiW*(k-_root.Wi*Math.floor(k/_root.Wi))+_root.HiW/2:
_root.BY[_root.Bul] = _root.Hi/2+_root.Hi*Math.floor(k/_root.Wi):
root.Bui += 1:
if CKk == 33) {
// Нажата клавиша Page UP
NumB = "R"+_root.Bul:
k = _root.Coord:
Dep - _root.Length+_root.M.length+l+_root.Bul:
duplicateMovieClip ("_root.Bullet". NumB. Dep):
_root.BX[_root,Bul] = _root.HiW*(k-_root.Wi*Math.floor(k/_root.Wi))+_root.HiW/2:
_root.BY[_root. Bui ] - _root.Hi/2+_root.Hi*Math.f1oor(k/_root.Wi);
root.Bui += 1:
if (Kk - 35) {
// Нажата клавиша End
NumB - "D"+_root.Bul:
k = _root.Coord;
Dep = _root.l_ength+_root.M.length+l+_root.Bul:
duplicateMovieClip ("_root.Bullet". NumB. Dep):
_root.BX[_root.Bul] = _root.HiW*(k-_root.Wi*Math.floor(k/_root.Wi))+_root.HiW/2:
_root.BY[_root.Bui] = _root.Hi/2+_root.Hi *Math.f 1 oor(k/_root.Wi);
root.Bui +- 1:
with (_root) {
for (i-0; i<M. length; i++) {
// Смотрим, не наступили ли на минотавра!
if (Men.jl == M[i]) {
gotoAndPl ay ( "Mi notavr" ) :
if (LCMen.jl] eq "X") {
numer++;
// Если пришли к выходу
if (numer>parse!nt(MazeAm)) {
// Если все лабиринты пройдены, идем на первый
пшпег = 1;
gotoAndPlayC'Finish") :
} else {
gotoAndPlayC'End"):
_root.Coord - Men.jl;
// Возвращаем глобальную переменную
19. В кадре Maze следует разместить еще один клип для дублирования его во
множестве — клип Пуля. Пусть это будет просто маленький эллипс, экзем-
пляр которого должен носить имя Bullet.
На этом работа с основной кинолентой будет закончена. Перейдем теперь к про-
граммированию клипов.
Клипы
Начнем мы с самого основного клипа — с человека. Можно использовать про-
стую картинку человечка, а можно сделать анимированный клип с руками и но-
гами. Мы рассмотрим второй вариант.
Человек
1. Проще всего реализовать «вид сверху»: от человека остается немного головы
с носом, прическа, ноги и руки, ну и развевающееся платье — в нашем случае
туника (рис. 13.5). Откроем клип Человек. Удалим все, что там было, и созда-
дим 8 слоев (сверху вниз): Глаза, Голова (голова и прическа), Нос, Туника, Пра-
вая рука, Левая рука, Правая нога, Левая нога.
Рис. 13.5. Человек: вид сверху
2. На слое Глаза будут располагаться глаза — два символа-клипа Глаз. Глаз будет
представлять собой голубой кружок с черным зрачком. Сделаем его вращаю-
щимся — вставим ключевой кадр 10, а в кадре 5 повернем глаз целиком при-
мерно на 40 единиц (можно переместить только зрачок, если нарисовать его в
отдельном слое).
3. Зададим раскадровку движения, вставим ключевой кадр 9 и удалим кадр 10,
чтобы крайний кадр не повторялся два раза. Глаз вращается, а на слое Глаза
их должно вращаться сразу два.
СОВЕТ
Чтобы посмотреть, как клип будет передвигаться внутри другого, щелкните правой кноп-
кой на клипе и выберите Edit in Place (Правка на месте) или дважды щелкните на клипе.
Остальные части фильма будут затенены, и вы сможете погонять считывающую головку по
киноленте клипа.
4. Голова представляет собой розовый овал, на котором сверху кистью нарисо-

ваны волосы. Нос тоже будет отдельным клипом — розовый круг будет бегать
из стороны в сторону. Туника будет простым белым эллипсом с черным кон-
туром (другие части тела можно рисовать и без него, на ваш вкус).
5. Руки будут статичными: розовые фигурки, каждая на своем слое. В правой
руке разместим пистолет — округлую или прямоугольную вытянутую черную
фигуру.
6. Ноги будут двигаться, поэтому их надо сделать клипами: Правая нога и Левая
нога. Они будут простыми черными эллипсами, перемещающимися вверх и
вниз. Одна из ног должна иметь нижнее начальное положение, а другая -
верхнее.
Вот собственно и все, человек почти закончен. Осталось только задать четыре
положения для движения в разные стороны. Проще всего продублировать клип
и переименовать его в Человечек (в окне библиотеки, рис. 13.6), а в клипе Чело-
век удалить все и разместить в четырех именованных кадрах одного слоя повер-
нутые экземпляры клипа. В этом же клипе можно отрегулировать размеры че-
ловечка (30x30), если вы не сделали этого ранее. Кадры назовем up, do, le, ri.
В первом кадре необходимо задать команду stopO;, чтобы человечек не крутил-
ся на месте.
Чтобы сделать игру интересней, можно включить в клип человека тень, закры-
вающую весь лабиринт, кроме него самого. Эта часть клипа будет имитировать
фонарик в руках искателя приключений. Чтобы сделать такое дополнение, вам
понадобится создать круг с градиентом. По градиенту будет изменяться не цвет
(цвет будет везде черный), а прозрачность. Чтобы задать разную прозрачность
у концов градиента, сначала откройте панель Fill (Заливка) и выберите в списке
радиальный градиент. Выделите левый маркер и перейдите на панель Mixer (Па-
литра). Там вы должны увидеть квадрат, заполненный цветом, с градиентным
маркером снизу. Установите прозрачность (Alpha) равной 0. Цвет на маркере
пропадет, зато появится сеточка. Вернитесь на панель Fill (Заливка), и вы увиди-
те, как черный цвет перетекает в прозрачный. Можно увеличить число марке-
ров, делая пятно света более четким. Теперь вам останется только нарисовать
круг, заполненный приготовленной заливкой.
Превратите круг в отдельный символ. Поместите символ тени в центр клипа Че-
ловек и дайте этому экземпляру символа имя. Потом с помощью этого имени вы
сможете установить размер круга (свойства _xscale и _yscale) так, чтобы он по-
крывал весь лабиринт (то есть радиус круга тени должен быть почти равен дли-
не главной диагонали лабиринта).
h>>. File Edit View insert Modify Text Cdnttol Window Hel|
I
e Щ Человечек
Library - Lab.fla
1
s4 :мо' • ' 1; gs.'te" !' ; .L Opfe^.
о
i
ll
Ц^
Р Голова
3 Нос
:
Q Туника.' : :;
Э.'Правая рука
Левая рука
Ц? Правая нога •4>V;Q
:: : :
О..Левая ноге , : « ' * Ш
H1
Ф.ЁР Q
Кнопка
1Ш Левая нога
IS Логово
Ш Минотавр
Ш Нос
Ш Обрамление
Ш Правая нога
% Продолжение |
[Щ Проход
Ц Пуля
НИ Стена
Щ Трава
Ш Человек
Человечек
800Х е Q'Aio:^
Рис. 13.6. Окно библиотеки с клипом Человечек
Минотавр
Клип минотавра, как и в жизни, будет устроен по образу и подобию человека,
только кроме прически там будут рога и нос его будет пошире (рис. 13.7). Ну,
пожалуй, еще не будет пистолета, и вместо розовых ног будут копыта, а так кли-
пы будут похожи, как близнецы-братья. Можно просто продублировать клип
и изменить соответствующие слои.
Рис. 13.7. Минотавр: вид сверху
Таким образом, необходимо сделать клип Минотаврик, который будет содержать

всю анимацию фигурки (аналогично клипу Человечек). Затем этот клип следует
вставить в единственный кадр клипа Минотавр и назвать его экземпляр Min. Дви-
жение минотавра по лабиринту мы включим внутрь клипа (листинг 13.8). Сце-
нарий необходимо вставить в окне Frame Actions (Действия с кадром).
Листинг 13.8. Движение минотавра
var Mum - jiame;
if (_root._currentframe>2) {
// Если фильи начался
DeltX - Math.round(2*(Math.random()-l/2));
// Смещение по горизонтали
i = parseInt(Num.substring(2))-l:
f = _root.M[i]+DeltX;
if (C_root.L[f] ne "W") and (DeltX != 0)) {
// Если не стена и смещение по горизонтали есть
this._x += DeltX*_root.HiW:
thi s.Mi n. j-otati on=DeltX*90;
// Разворачиваем клип
_root.M[i] +- DeltX;
} else {
DeltY - Math.round(2*(Math.randomO-l/2));
// Смещение по вертикали (работает, если нет смещения по горизонтали)
f = j"oot.M[i]+_root.Wi*DeW:
if (_root.L[f] ne "W") {
this._y += _root.Hi*DeltY;
this. Min. _rotation=(DeW+l)*90:
root.M[i] += root.Wi*DeltY;
if (_root.M[i]==_root.Coord) {_root.gotoAndPlay ("Minotavr"):};
Движение минотавров будет хаотическим. Если же вы хотите, чтобы минотавр

ловил игрока, добавьте сами этот несложный момент.
Как вы можете заметить из текста сценария, разворот минотавра происходит другим обра-
зом, нежели человека. Сейчас мы использовали просто вращение вложенного клипа (свой-
ство _rotation).
Но если теперь запустить фильм, минотавр не будет двигаться — единственный

кадр исполнится только один раз. Необходимо вставить второй кадр, и зверь
оживет.
Клипы ячеек лабиринта
Поскольку мы используем вид сверху, стены у нас будут выглядеть темными
камнями. Логово и вход можно изобразить грудой булыжников поменьше. Про-
ще всего это сделать так: создать символ Камень, который будет, например, кру-
гом без контура с градиентной радиальной заливкой из белого в серый. Сделаем
белым центр камня, чтобы сымитировать солнечный блик.
Нарисуйте круг или эллипс без контура (можно просто нарисовать обычный
круг и удалить контур), затем выделите область заливки и перейдите на панель
Fill (Заливка). Там в списке выберите Radial Gradient (Радиальный градиент). Ос-
тавьте только два маркера: белый (слева) и серый. Расположите маркеры так,
чтобы пятно было достаточно контрастным. Затем вернитесь на стол-и выбери-
те инструмент Paint Bucket (Банка краски), а потом — Transform Fill (Преобразо-
вать заливку) и щелкните на камне. Сместите центральный маркер заливки и
растяните ее квадратным маркером (рис. 13.8). Камень готов.
Рис. 13.8. Изменение градиентной заливки для камня
На клипах—элементах лабиринта разместите несколько камней различной вели-

чины. Помните, что мы моделируем взгляд сверху, поэтому большие камни
должны перекрывать маленькие. Чтобы передвинуть камни, используйте коман-
ды подменю Arrange (Распределение), которое находится в меню Modify (Изме-
нить).
Пуля
Пуля будет обычным овалом, меняющим цвет в двух кадрах. Кроме того, в пер-
вый кадр необходимо поместить сценарий, управляющий полетом (листинг 13.9).
Листинг 13.9. Сценарий движения пули
var Mum = _name:
var DeltX = 0:
var DeltY = 0;
if (_root._currentframe>5) {
// Пуля будет летать только до окончания игры
this.removeMovieClipO:
}
if (Num ne "Bullet") {
// Изначальный клип не двигается
i = parselnt(Num.substringd));
if (Num.substrtO. 1) eq "R") {
// По первой букве имени клипа определяем, куда летит пуля
f = _root.B[i ]•*•!:
_root.BX[i] +- root.HiW;
}
if (Num.substr(0. 1) eq "I") {
// Используется буква "I". так как "L" занята
f - _root.B[i]-l:
_root.BX[i] -= _root.HiW:
}
if (Num.substr(0. 1) eq "U") {
f = _root.B[i]-_root.Wi;
_root.BY[i] -• _root.Hi:
}
if (Num.substr(0. 1) eq "D") {
f = _root.B[i]+_root.Wi;
_root.BY[i] += _root.Hi;
}
if (_root.L[f] eq " W " ) {
this.removeMovi eCli p():
}
for (j=0; j<_root.M.length; j++) {
// Если встречаем минотавра, ликвидируется сама пуля и минотавр
if (_root.M[j] -= f) {
NumM = "_root.M_"+String(j+D;
removeMovieClip (NumM):
_POOt.M[j] = -1;
this. removeMovieClipO:
_root.B[i] = f;
this._x = _root.BX[i] :
this._y = _root.BY[i] :
Проверьте, что экземпляр пули Bullet помещен за пределами стола в кадре Maze.
Дверь и общий вид

Конечно, можно импортировать для изображения двери какой-нибудь растро-
вый файл. Но мы еще раз попрактикуемся в создании градиентных заливок.
1. Для начала создадим символ — графическое изображение под названием Дос-
ка. На вид это будет вытянутый прямоугольник, залитый градиентной залив-
кой. Градиент должен переливать желтые и коричневые оттенки палитры.
2. На отдельном слое необходимо расположить срезы от сучков — вытянутые
эллипсы, заполненные на этот раз радиальным градиентом. Попробуйте по-
менять настройки инструмента Transform Fill (Преобразовать заливку), чтобы
достичь правдоподобного результата. Помните, что радиальный градиент так-
же позволяет иметь несколько цветовых маркеров на панели Fill (Заливка),
что дает возможность сделать несколько концентрических эллипсов. Для того
чтобы заливка стала эллиптической, сдвиньте квадратный маркер инструмен-
та Transform Fill (Преобразовать заливку). Расположите на доске несколько та-
ких срезов разного размера. Используйте для этого копирование и вставку,
а также возможности панелей Transform (Преобразование) или Info (Инфор-
мация).
Рис. 13.9. Дверь и поясняющие надписи
3. Создайте символ Дверь, в нем расположите несколько досок в виде двери

с поперечинами (рис. 13.9). Для красоты создайте символ Кольцо, в котором
нарисуйте кольцо, залитое радиальным градиентом так, чтобы оно выглядело
объемным. Для эксперимента создайте градиентную заливку серого с не-

сколькими светлыми и темными полосами. Когда вы создадите такую залив-
ку, вам останется только залить ею кольцо и с помощью инструмента
Transform Fill (Преобразовать заливку) расположить нужным образом. Вам
придется сместить центр заливки в центр кольца и подобрать радиусы.
4. Когда кольцо будет создано, можно расположить его на двери, прикрепив
сверху символом Камень.
5. Осталось только включить дверь в символ, названый ранее Кнопка, который
до этого был простым овалом. Он будет служить кнопкой для входа в лаби-
ринт. На том же кадре главной сцены должно быть написано слово Лабиринт
и текстовое поле numer для его номера.
В качестве украшательства на слое Экран можно расположить несколько досок,
на которых будет помещен вспомогательный текст (пояснения функциональ-
ных клавиш и обозначения). Там же можно расположить и несколько камушков
или символов-ячеек, состоящих из камней. Фоном для двери и камней лучше
выбрать серый квадрат.
Ну вот и все — фильм собран. Вполне возможно, что при нажатии Ctrl+Enter
появятся сообщения об ошибках или при проигрывании все пойдет не так, как
надо. Не отчаивайтесь! Конечно, Flash не имеет хорошего отладчика, но даже
его минимальных средств хватает, чтобы разобраться в проблемах.
331:"М"
335:"И"
336:"И"
337:"U"
338:"U"
399:"Ы" i
]
Uariable _leuelG.M = [object S3] [
0:363,
1:257
]
Variable _1еиеЮ.В = [object ВЧ] []
Uariable _l»vel8.BX = [object US] []
Uariable "leuelO.BV = [object H6] []
Uariable IleuelO.SI = "UUUUUUUUIilUUUUUUUUUUUUEPPPPPPPPPPPPPPPPUUUPIilPUIilPUUPUP:
Variable [leuelO.j = 2
Uariable .leuelO.i = 438
Uariable .levels.k = 400
Uariable 'leueie.nane = "L399"
Uariable Ileueie.Clip = "U"
Uariable IleuelO.Dep = 400
Uariable Ileueie.AI = 600
Uariable _1еиеЮ.Й2 = 600
Uariable IleuelO.diag = 1638
Uariable IlevelO.Nu» = 2
Mouie Clip: Target:".leuelO.Bullet"
Uariable leuelO.Bullet.Nun = "Bullet"
Uariable leuelO.Bullet.OeltX = 0
Uariable _leu»10.Bullet.DeltV = 9
Hoyie Clip: Target="_levelO.Men" §
Рис. 13.10. Список переменных в начале фильма

Замена указателя мыши 341
А теперь несколько советов.

1. Вводите и активно используйте вспомогательные переменные (рис. 13.10).
При проигрывании вы сможете открыть окно Output (Вывод) со всеми ис-
пользуемыми в данном кадре переменными, дав команду Debug > List Variables
(Отладка > Список переменных). По значению переменных вы сможете до-
стоверно узнать, что происходит в фильме.
2. Команда меню Debug > List Objects (Отладка > Список объектов) служит для
вывода перечня всех существующих на данный момент объектов. Здесь вы
сможете узнать, жив объект или нет.
3. Помимо значения переменных в списке видна и иерархия объектов. Вы смо-
жете проверить, правильно ли вы используете объекты this или _root.
Замена указателя мыши

Если вам приходилось играть в компьютерные игры, вы обязательно замечали
не стандартный указатель мыши, а какой-нибудь специальный: волшебную па-
лочку для колдовства, руку, чтобы взять предмет, рот для разговора со встреч-
ным.
Flash легко позволяет реализовать такую возможность как в игре, так и на сай-
те. Для этого создайте новый фильм, а в нем — любой не очень большой клип
на роль указателя, назвав его экземпляр Cursor. На панели Object Actions (Дейст-
вия с объектом) задайте следующий сценарий для клипа:
onClipEvent (load) {
Mouse.hideO: // Отключаем стандартный указатель мыши
startDrag (this, true): // Заставляем следовать клип за мышью
СОВЕТ
Для того чтобы создать перетаскиваемый клип, вам надо разместить на нем кнопку. В об-
работчик события Press кнопки необходимо включить действие startDrag, а в обработчик
события release — stopDrag.
Если протестировать фильм, клип резво побежит за мышью вместо стандартной

стрелки, подвластный вашей воле. Чтобы бросить назойливый указатель, можно
предусмотреть кнопку, занимающую определенную часть экрана. Для отключе-
ния собственного указателя понадобится следующий сценарий:
on (load) {
Mouse.showO: // Включаем стандартный указатель мыши
stopDrag О; // Отключаем клип
)
on (rollout) {
Mouse. hideO:
startDrag ("Cursor", true):
}
Поскольку перетаскивать можно только один клип, действие stopDrag не имеет
параметров.
Совсем отменить показ указателя мыши также можно действием Mouse.hide(),

а вернуть на экран — действием Mouse.showO.
Находясь в области срабатывания кнопки, указатель мыши будет принимать свой «обыч-
ный» вид руки с поднятым указательным пальцем.

Мы славно отдохнули на этом занятии. Если его материал показался вам черес-
чур тяжелым — можете придумать свою, более простую игру. Расположенные
на сервере издательства и на моем сайте исходные файлы к фильму помогут
вам разобраться, если я что-то пропустил в описании работы.
Сегодня мы стали почти профессиональными программистами.
• Мы научились редактировать HTML-файл, созданный FrontPage Express;
• вспомнили хитрости интерактивности с клиентской программой:
О как переходить между страницами и передавать информацию,
Q как организовать бегущую строку и обработать ее продвижение,
Q как обрабатывать события в JavaScript;
• мы познакомились со многими новыми функциями ActionScript:
О научились дублировать и перемещать клипы,
Q создавать свои функции,
О работать с иерархией объектов,
D обрабатывать нажатие клавишей и щелчки мыши;
• вспомнили, как работать с градиентами и согласованной анимацией.
У нас впереди последний рывок. До встречи на финишной прямой!
Занятие 14
Итого
Снежный заяц — как живой!
Но одно осталось, дети:
Смастерить ему усы.
Жизнь — странная штука: она иногда никак не хочет следовать тем планам,
в рамки которых ты пытаешься ее втиснуть.
Изначально в содержании книги в заголовке данного занятия числилось: «Соз-
дание HTML-версии сайта». Потом тема укрупнилась — описание создания
и Flash, и HTML-версии достаточно большого сайта должно было уместиться
здесь. А потом... А потом оказалось, что писать-то не о чем. Основные приемы
работы с Flash уже описаны, про HTML особо тоже нечего писать — открыва-
ешь приложение 2, там приведен список всех тегов, а дальше была бы фанта-
зия — спроектировать сайт не сложно. Проблемы JavaScript можно обсуждать
долго, но безрезультатно — тут важен личный опыт: если вы поймете суть язы-
ка, навык «сценариста» придет сам собой.
Все это пишется к тому, что настала пора не глобального проекта, а заключения.
Итак, какие мы вопросы обсудим на последнем занятии.
• Зачем нужен персональный сайт?
• Зачем нужна интерактивность на web-страницах?
• Какая технология лучше: HTML или Flash? Чему стоит учиться, что стоит
применять?
Правда, у меня получилось скорее не занятие, а художественное эссе на тему
«Ваш вклад в Интернет». И новых вопросов в нем больше, чем ответов. А сти-
хов почти столько же, сколько прозы. (Оказывается, иногда стихи писать лег-
че...) Приношу свои извинения, если кто-то ожидал в качестве заключения уви-
деть полновесный труд с выкладками что да как. Можно научить вставлять
344 Занятие 14. Итого
HTML-теги, но нельзя научить делать сайты. В них, как и в стихи, надо вло-
жить кусочек себя...
Пришла пора собирать камни. Мешок за плечи — и тронемся в путь...
Виртуальный мир
Стереть, переписать — как просто и легко,
Бумага, та не жизнь, все стерпит и едва ли
сюрприз преподнесет —
В седеющей вуали
усталые глаза и искривленный рот.
Мир Интернета похож и не похож на свой реальный образ. Там установились

совершенно другие законы.
• Перемещение в пространстве происходит практически моментально, вам не
важно, где живет ваш собеседник, — можно попасть к нему домой одним
щелчком мыши.
• Текст заменил голос, IP-телефония только набирает обороты и еще не скоро
вытеснит чат, ICQ и электронную почту. А написанное слово — уже не воро-
бей, его можно поймать и удалить.
• Здесь можно легко познакомиться и столь же легко разорвать связь, обвинив
в этом наших доблестных связистов.
• Несмотря на бурный рост Всемирной сети, посещаемым остается весьма огра-
ниченное число сайтов: поисковые системы, каталоги ресурсов, сайты фирм-
производителей ПО, форумы.
• В Интернете можно найти все — вопрос только во времени. Иногда проще
посмотреть в книжке.
• Виртуальному «я» не надо есть и пить, но ему необходимо место на жестком
диске сервера и хороший канал связи с миром. В результате реклама стано-
вится не только «двигателем торговли», но и основанием самого существова-
ния и развития Интернета.
• В киберпространстве более жесткая конкуренция — покинуть неинтересное
место можно одним щелчком мыши. Всему есть альтернатива, пусть и не
лучшая.
• Здесь все должно подчиняться общим стандартам, чтобы быть узнаваемым,
и в то же время все должно быть броским, чтобы привлечь внимание.
• В Интернете очень мало know-how: все, что показал браузер, можно увидеть
в виде кода-первоисточника и разобрать по полочкам. И очень сложно про-
вести грань между употреблением стандарта де-факто и заимствованием ди-
зайна.
• Основные единицы стоимости во Всемирной сети: часы и «клики». И то и
другое можно обращать в дензнаки с большим или меньшим успехом.
• Здесь нет имен и фамилий — вас зовут вашим «ником», который вы сами и
придумали — в отличие от прозвища, которое приклеивается к вам против
Виртуальный мир 345
вашей воли. Хотите стать благородным доном или прекрасной принцессой,

воплощением зла или шутом — дело вашей фантазии и способности к пере-
воплощению. Никто не пойдет проверять достоверность ваших анкетных
данных.
Но вся эта философия не касается вас лично. А вас интересует только один во-
прос: делать свой вклад в виртуальный мир или нет? Сообщать миру о себе или
спокойно доживать свой век в безвестности? Все зависит от вашей жизненной
позиции. С появлением Интернета найти единомышленников, высказать свое
мнение, задать вопрос и получить совет стало существенно проще. Вы можете
высказаться на чьем-то форуме или создать свой, пообщаться с интересными
людьми, и при этом вам не обязательно жить в одной из двух столиц — вам до-
статочно иметь дома или на работе доступ к Интернету.
Общаться в киберпространстве без электронного почтового ящика невозможно,
его заводят все. А вот создание персонального сайта рассматривается уже как
роскошь. И этому есть свои основания — получать приходящую почту можно
поручить почтовой программе, а вот поддержка сайта требует вашего личного
времени, и иногда немалого. Как говорится, «думайте сами, решайте сами, иметь
или не иметь», «быть или не быть». Я же убежден: Интернет — способ сделать
жизнь лучше.
Белый лист .
Прекрасная картина — белый лист,
На ней рисует всяк свои виденья,
И пусть тебе поможет провиденье
Нарисовать картину — белый лист.
Почему «белый лист»? Идеальное произведение — то, которое заставляет зрите-

ля думать и рисовать самому. На белом листе. Персональный сайт — это тоже
художественное произведение. И, в отличие от своих «бумажных» родственни-
ков, он может изменять свой вид не только по фантазии зрителя, но и по задум-
ке автора. Изменить фон? Пожалуйста. Не нравится шрифт? Сменим на более
подходящий. Раздражает анимация и звук? Остановить — пара пустяков.
Теперь, когда браузеры начали реально поддерживать возможности, предостав-
ляемые объектной моделью документа (DOM), изменить под пользователя со-
держание и оформление страницы стало делом техники. Не обязательно вклю-
чать сценарии или программы на стороне сервера, написать которые дадут не на
каждом хостере, — можно обойтись использованием cookie и JavaScript.
Стандартные интерактивные элементы -- гостевые книги, форумы, опросы,
счетчики и чат — помогут вам создать гостеприимный дом, привечающий своих
посетителей. Средства обратной связи позволят вам узнать мнение ваших гос-
тей и удовлетворить их вкусы.
Интерактивность не предполагает создание сайта, подобного «Гудвину, велико-
му и ужасному», который перед каждым предстает в своем виде. Персональный
сайт — это, прежде всего, способ вашего самовыражения. Но посетителю будет
приятно найти и свой след на ваших страницах. Истина, как всегда, должна ле-
жать где-то между крайностями, в точке лично вашего «золотого сечения».
HTML и JavaScript
На едва зримом полотне стекла
Дерев искрящихся листва
Рождает сказочный узор
Сочтением простейших форм
В невиданный еще никем
Шедевр элементарных схем.
И зная все, не воссоздать
Зимы холодной благодать.
Все сложное состоит из более простого: дом сложен из кирпичей и цемента,

кирпичи сделаны из глины, глина состоит из молекул алюмосиликатов, молеку-
лы состоят из атомов... Web-страница состоит из тегов, атрибутов, команд сце-
нариев, имен файлов и текста. А на экране можно видеть то пустую страницу, то
деловой блокнот, то интересную картину. Все зависит от того, в каком порядке
расставить теги, чему приравнять их атрибуты, как подойти к оформлению гра-
фических частей сайта.
Flash
Геометрию углов,
Естество штрихов и линий
Гранит цвета апельсина из пластмассы существо.
Солнцем брошенным на снег
По законам тяготенья совершается движенье —
По ладони ровный бег.
Созерцая дерзкий цвет
Мы находим отраженья
Непригодных для рожденья,
Но уже прожитых лет.
Flash — отличная идея и ее исполнение от Macromedia. Интернет создан для век-

торной графики, но из-за отсутствия стандартных форматов браузеры не поддер-
живают ее. Исключение сделано только для Flash — она стала векторным стан-
дартом де-факто в Интернете, и теперь уже производители браузеров встраивают
ее поддержку в новые версии. A Flash находит все больше и больше привержен-
цев как среди простых пользователей Сети, так и среди web-мастеров.
Сайт или фильм?

Ну а сейчас мы приступим к выяснению, какую технологию лучше использо-
вать для создания интерактивного персонального сайта.
HTML
• Хотите, не хотите, но HTML — основной язык Web. Без него ни один сайт не
увидит свет. Поэтому хоть пара тегов на сайте должна быть.
Сайт или фильм? 347
• HTML — статичный язык: что написано, то написано. Сам он ни о какой ин-

терактивности и не подозревает. И уж тем более он не может измениться во
время исполнения в браузере.
• Хоть и существует стандарт на HTML, многие теги и атрибуты воспринима-
ются браузерами по-разному.
• Необходимо использовать много разных хитростей, чтобы страница выгляде-
ла «как задумано» при разном разрешении экрана. Динамический размер
таблиц спасает не всегда: нельзя же растянуть баннер или логотип.
• Несмотря на объемность описаний и трудов по HTML, это довольно бедный
язык, и он никогда не станет «богатым». Ведь HTML — стандарт Всемирной
сети.
• Использование интересной графики не только способно привлечь к сайту
внимание, но и существенно повлияет на размер HTML-страниц.
• Если у пользователя нет определенного шрифта, он не заметит ваш изыскан-
ный стиль. Конечно, если вы не выведете весь текст в виде картинки.
• Существует множество редакторов, которые помогут вам создать web-стра-
ничку, но любой HTML-документ может быть сделан и в обычном Блокноте.
• Использование каскадных таблиц стилей позволяет легко изменять дизайн
готовых документов. Достаточно при создании вынести все возможные эле-
менты дизайна в таблицы стилей.
JavaScript
• JavaScript — логическое дополнение HTML. С его помощью можно оживить
страницу, подключить интерактивные элементы.
• Каждый браузер по-своему понимает JavaScript. Однако чем больше будет
DOM набирать силу, тем больший порядок будет в рядах команд JavaScript.
Пока же для каждого браузера в большинстве случаев приходится писать
свою ветвь сценария.
• Пользователь может отключить выполнение сценариев JavaScript. He стоит
делать всю навигацию по сайту с помощью команд JavaScript — предусмот-
рите и простые текстовые ссылки.
• Некоторые из команд JavaScript могут вызывать «зависание» компьютера поль-
зователя. Будьте осторожны в употреблении бегущих строк и прочих эффектов.
• С помощью cookies вы сможете сохранить предпочтения посетителя и в сле-
дующий раз обойтись без вопросов, а сразу загрузить страницу в том виде,
как его настроил пользователь ранее. Однако и здесь не все гладко — браузеры
несовершенны и имеют «дырки, щели и зияющие пропасти» в своей структу-
ре. И через них вместо безобидных cookies на ваш компьютер полезут непро-
шеные гости.
Flash
• Flash — новая технология, и еще не у всех пользователей Интернета стоит
дополнительный модуль для просмотра Flash-фильмов, и тем более не стоит
рассчитывать найти его последнюю версию. Естественно, ваш сайт на Flash

не увидят пользователи старых и текстовых браузеров.
Пользователь может отключить показ графики. Необходимо предусмотреть
хотя бы скромную, но альтернативу.
Часто SWF-файлы занимают довольно много места. Для многих пользовате-
лей их просмотр — непозволительная роскошь. Зато одним махом загрузится
весь сайт, и не возникнет ситуации, когда связь обрывается «на самом инте-
ресном месте».
С другой стороны, можно оптимизировать фильм так, что требуемый результат
будет достигнут очень малой кровью. К примеру, пробный фильм из четырех
кадров в формате SWF занял 365 байт, а в виде анимированного GIF -
1116 байт. Понятно, что если создать сложную анимацию, то соотношение
может быть и противоположным. В каждом конкретном случае будет свой
оптимум.
Встраивание шрифта в фильм несколько увеличит его объем, зато зритель
увидит тот дизайн, какой вы задумали.
Использование символов и уже готовых элементов фильма (например,
smart-клипов) существенно упрощает создание сайта.
В отличие от HTML и JavaScript, дополнительные модули для Flash создает
сама Macromedia, поэтому фильм будет выглядеть одинаково на разных
платформах и браузерах. И вам не надо будет заботиться о совместимости.
Наличие встроенного языка сценариев позволяет легко изменить дизайн
фильма во время его исполнения. Фильм легко превратить в самостоятель-
ную интерактивную сущность, реагирующую на действия пользователя.
Главное достоинство Flash — это анимация. С ее помощью можно оживить и
развлекательный, и деловой сайт.
Благодаря тесному взаимодействию, Flash может использовать практически
все возможности HTML и JavaScript.
Освоив Flash, вы сможете с ее помощью создавать не только фильмы, но и
обычную графику в форматах GIF и JPG.
На Flash лучше не считать — там очень медленно работают математические
функции. И во многих других местах функции ActionScript будут действо-
вать медленнее, чем альтернативные команды JavaScript, а фильм будет про-
игрываться дольше Java-апплета.
Но зато для того чтобы ваять на Flash, не надо быть профессионалом в различ-
ных языках программирования. В нем все можно реализовать щелчком мыши.
В фильм можно не только встроить звук, но и управлять им, а в среде автор-
ской Flash — даже редактировать звуковые файлы.

Как должен выглядеть идеальный сайт? Ответ прост — идеально. А как это
идеально, уже другой вопрос...
В Интернете по этому вопросу сколько людей — столько и мнений. Сторонни-

ки Flash предлагают делать на ней все: от простых персональных страничек до
электронных магазинов. Администраторы серверов, сидящие за текстовыми брау-
зерами, принципиально против любой графической информации и сценариев.
Пользователи Netscape Communicator воспевают свой строгий браузер, хотя они
составляют менее 5 % пользователей Интернета. А что касается дизайна — тут,
как говорится, «на вкус и цвет товарищей нет». Особенно если они сидят за мо-
ниторами с разным разрешением.
И напоследок еще один совет. Побродите по Сети, посмотрите сайты разных
людей, разберитесь, как они устроены. Попробуйте свои силы в создании своих
страничек и фильмов. Надеюсь, эта книга поможет вам в нелегком, но увлека-
тельном деле создания своего виртуального дома.
До встречи на просторах Всемирной сети! Если окажетесь там, заходите в гости:
www.dimvovich.narod.ru.
Приложение 1
Ресурсы Интернета
В зарослях сорной травы,
Смотрите, какие прекрасные
Бабочки родились.
Кобаяси Исса'
Бесплатный хостинг
В данном разделе приведены русскоязычные серверы (табл. П1.1), предостав-
ляющие бесплатный хостинг, с краткой информацией об услугах. Подобный
список вы можете получить, пройдя по следующим ссылкам в Yandex: Компью-
теры и связь/Интернет/Хостинги/Хостинг web-страниц.
Естественно, в книгу попало не все — серверы, где хостинг только платный,
мною были удалены. Иностранные серверы (где все не по-русски) я не привел
по простой причине: если вы хорошо знаете английский и хотите писать только
на нем, вы без труда найдете себе подходящий сервер, но большинству читате-
лей это будет неинтересно. Также не осталось в списке и серверов типа «личные
странички иркутян». Если ваш провайдер предоставляет такую услугу — лучше
поинтересоваться прямо у него.
Одним из главных параметров серверов, предоставляющих хостинг, является
качество канала связи данного сервера с внешним миром. Чем выше пропускная
способность данного канала, там больше посетителей смогут просмотреть ваш
сайт. Сравнить скорость обмена данными с разными серверами можно следую-
щим образом: в небольшой промежуток времени (примерно полчаса) необходи-
мо загрузить несколько сайтов с интересующих серверов и сравнить скорость
загрузки.
Чтобы получить точное числовое выражение, воспользуйтесь командой ping:
в FAR или в Windows Commander в командной строке надо набрать ping URL,
где URL — адрес нужного сайта в Интернете, например: ping narod.yandex.ru или
ping 213.180.193.32. В параметре time будет написано время в миллисекундах,
потраченное на отклик. Чем больше время — тем хуже связь с данным сервером.
1
Бесплатный хостинг 351
Если у вас есть возможность посмотреть время связи через разных провайде-
ров — воспользуйтесь ею: результаты помогут вам выбрать не только хостера,
но и провайдера. Лучше проводить эксперимент несколько раз в разное время
суток, например в начале рабочего дня и в конце (с 16 до 18 часов), когда начи-
нается рабочий день в США.
Некоторые серверы указывают свой канал связи. Например, ТЗ существенно лучше Т1, по-
скольку первый имеет скорость 45 Мбит/с, а второй — 1,544 Мбит/с.
Вот примерный план информации об услугах.

• Вначале идет перечень физических услуг: размер дискового пространства
и e-mail (ящик электронной почты).
• Потом следует помощь в создании сайта (шаблоны, конструкторы) и форма
доступа (FTP или WWW).
• Затем прийодятся дополнительные услуги: статистика посещений сайта,
счетчики, гостевые книги, чаты, форумы, голосования и т. д.
• В конце помещена информация о навигации по серверу — как просто вас бу-
дет найти — и поддержка в рекламе (вариант «робот» означает, что робот, ра-
ботающий на сервере, будет автоматически регистрировать ваш сайт в поис-
ковых системах).
• Последний штрих — размещает ли сервер рекламный баннер на вашей стра-
нице или нет, а также есть ли контроль за обновлением сайта.
Таблица П1.1. Русскоязычные серверы, предоставляющие бесплатный хостинг
URL Информация об услугах

www.narod.ru Неограниченное пространство, e-mail; конструктор страниц и перекачка
по FTP; статистика, персональные чаты, форумы, гостевые книги, голо-
сования; каталог, сообщества по интересам, поддержка Yandex; баннер
www.boom.ru Размер дискового пространства не оговорен, но его много; стандартный
шаблон для создания сайта; гостевая книга и счетчик; каталог; под-
держка mail.ru
www.by.ru Неограниченное пространство. WWW и FTP. Статистика, гостевая книга,
счетчик, чат, форумы, SSI. Робот. Баннер
www.holm.ru Неограниченное пространство; FTP; статистика, гостевая книга, чат,
форумы, игры, CGI, SSI, Perl, PHP4, MySQL; поддержка Agava Sofware;
баннер
www.halyava.ru От 2 Мбайт, e-mail; FTP и WWW ; счетчик, баннер, контроль
www.hotbox.ru 20 Мбайт, такой же размер e-mail; конструктор, WWW и FTP; почтовая
служба; счетчик; контроль
www.tomsk.net 5 Мбайт; FTP; статистика, счетчик, гостевая книга; каталог; баннер
www.webservis.ru Неограниченное пространство под сайт и e-mail; FTP; гостевые книги,
форумы, чаты, голосования, CGI, PHP4; баннер
www.mykm.ru Неограниченное пространство; FTP; гостевые книги, форумы, чаты, го-
лосования; ASP, Access, MS SQL, Perl, PHP, SSI, MySQL; баннер, контроль
352 Приложение 1. Ресурсы Интернета
Таблица П1.1. Продолжение
URL Информация об услугах
www.hut.ru От 30 Мбайт, e-mail; FTP; CGI, Perl, MySql, SSH, SSI; баннер
www.fanat.ru Только фан-клуб; 10 Мбайт; WWW и FTP; конструктор сайта; гостевая
книга, голосования, счетчик; баннер; помощь при раскрутке
www.klax.tula.ru Сайт + e-mail — 10 Мбайт, FTP; PHP3; список сайтов; контроль
www.hobby.ru 20 Мбайт; FTP и WWW; стандартные CGI, SSI; контроль; регистрируют-
ся только существующие интресные сайты
www.my.elvisti.com 2 Мбайт; FTP; SSI; контроль; каталог всех страниц сервера
www.ussr.to 200 Мбайт. Шаблоны, WWW и FTP. Форумы, чаты, голосования, аукци-
он, гостевые книги, счетчики. Баннер. Контроль
www.az.ru 200 Мбайт; шаблоны, WWW и FTP; форумы, чаты, голосования, аукци-
он, гостевые книги, счетчики; баннер; контроль
www.chat.ru 10 Мбайт, e-mail; WWW и FTP; счетчик; контроль
www.fatal.ru 50 Мбайт, e-mail. FTP и WWW. CGI, PHP, Perl SSI
www.webservis.ru Неограниченное пространство, e-mail; FTP; гостевые книги, форумы,
чаты, голосования, CGI, PHP, SSI; баннер
www.wallst.ru Неограниченное пространство, e-mail; FTP; гостевые книги, форумы,
чаты, голосования, CGI, PHP, SSI; баннер
www.tractir.ru 15 Мбайт, e-mail; FTP; SSI, РНРЗ, РНР4, CGI; контроль
www.tam.ru 200 Мбайт; шаблоны, WWW и FTP; форумы, чаты, голосования, аукци-
он, гостевые книги, счетчики; баннер; контроль
www.lgg.ru 15 Мбайт, e-mail; WWW и FTP; SSL, SSI, PHP4, CGI, MySQL; чат, форумы,
гостевые книги, счетчики, голосование; баннерная сеть
Другие бесплатные ресурсы

Если вы решили разместить свой сайт на сервере, который не предоставляет ни
готовых сценариев, ни места под различные интерактивные элементы, то вы с
легкостью можете их найти, например, по этим адресам (табл. П1.2).
Таблица П1.2. Другие бесплатные ресурсы
Услуги URL
Гостевые книги www.guestbook.ru www. work, relsoft. md/service/

www.gbook.ru www.g uestbook. net. ru
www.gb.ru www.xbook.ru
www.gb.lpt.ru www.script.ru
www.guestbook.novgorod.ru www.myguestbook.ru
www.services. blad.ru www.eforum.com.ua
Счетчики www.hotlog.ru
Чаты chatcity.ru
chatlist.ru ,
zerkalo.com
Учебники, руководства, статьи, форумы 353
Услуги URL
Опросы www.voter.ru
Рассылки www.subscribe.ru
yamschik.pp.ru
e-mail.com.ua
Учебники, руководства, статьи, форумы

В данный раздел попали всевозможные ссылки, которые накопились в процессе
работы над книгой. Не ищите здесь кого-то порядка, Интернет — крайне неупо-
рядоченная и неустойчивая структура. Я привожу в книге эти ссылки только по
одной простой причине: позволить вам самим быстро научиться работать в Сети.
Постепенно вы сами наберете свою коллекцию полезных ссылок, а на первых
порах можете просмотреть эти.
Любые возникшие «научные» вопросы можно обсудить на форуме www.xpoint.ru.
Там вы сможете получить консультацию по вопросу любого уровня и не только
по поводу web-строительства.
Flash
Flash — достаточно новая технология, поэтому серверы, осуществляющие ее
поддержку, содержат много полемики и активных дискуссий. Англо-говорящих
«флэшеров» (так называют себя поклонники Flash) существенно больше, чем
ведущих обсуждение достоинств своей любимой программы на русском языке.
Однако Рунет развивается, а с ним растет и его Flash-зона. В табл. П1.3 при-
ведено несколько ссылок, которые могут оказаться полезными при освоении
Flash.
Таблица П1.3. Полезные ссылки по Flash
Ресурс URL
Сайт создателя Flash — фирмы Macromedia www.macromedia.com
Клубы «флэшеров» www.reflash.ru
www.flasher.ru
www.flashkit.com
www.flashpro.ru
Учебники flashzone.by.ru
flasht.lgg.ru
www.flashlite.net
www.flashcentral.com
http//:freedoc.vov.ru/doc/?doc=flash/index.htm
Исходные «тексты» фильмов www.movies.dtn.ru
zona5.al.ru
www.hippo.ru
12 Зак. 96
354 Приложение 1. Ресурсы Интернета
HTML
Этого добра в Сети пруд пруди, и в раздел попали первые попавшиеся ссылки
(табл. П1.4). Это не плод многолетних поисков — признаюсь, ничего особенно
хорошего я не видел. Фактически — это несколько ссылок из списка, выданного
поисковым сервером — не оставлять же раздел пустым!
Таблица П1.4. Полезные ссылки по HTML
Ресурс URL
Учебники bonik.infor.ru/indexdot/html/index.html
uchebnik.boom.ru/
www.design.pip.ru/html/wedenie.html
www.beseder.net/htmllessons/l.html
weblist.narod.ru/site/index.htm
help, my money. ru/tutor/adv 1_01 .shtml
www.kruglov.ru/articles/crossbrowserdhtml.shtml
www.arcus.lv/dimas
my.km.ru/html/default.htm
infoschool.narod.ru/html/index.htm
kadet.net.ru/uchebnik/mainhtml.shtml
JavaScript
Ситуация с JavaScript аналогична обучению HTML — много плохого и мало хо-
рошего (табл. П1.5). Рекомендую первый учебник из списка, он мне очень по-
нравился. Вторая ссылка — один из наиболее полных справочников по JavaScript
на русском языке.
Таблица П1.5. Полезные ссылки по JavaScript
Ресурс URL
Учебники www.jsp.newmail.ru
anktrue.spb.ru/js.html
www.citforum.ru/win/internet/koch/tutorial.htm
webb.bip.ru/java.shtml
webmasterilka.com/scripts/javascript/article/course/contents.shtml
cdesign.boom.ru/bookjavascripts.htm
Коллекции сценариев www.kormushka.net/resources/java.html
dhtml.narod.ru/java_script.html
HTML 4
Тихо, тихо ползи,
Улитка, по склону Фудзи
Вверх, до самых высот!
Кобаяси Исса>
Объявления в документе
В данном разделе собраны теги, общие для всего документа: описание версии
HTML, определение заголовка и тела документа, фреймов и сценариев.
Некоторые часто используемые стандартные атрибуты описаны в конце приложения.
Описание структуры HTML-документа

В этом разделе собраны теги, описывающие основную структуру гипертекстово-
го документа (листинг П2.1). Как правило, они присутствуют на любой страни-
це сети.
Листинг П2.1. Шаблон, содержащий общую структуру документа
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//RU">
<HTML>
<HEAD>
<TITLE>3aголовок документа</Ш1_Е>
</HEAD>
<BODY>
Текст документа
</BODY>
</HTML>

356 Приложение 2. HTML 4
Тег <!> дает возможность создателям HTML-документов размещать коммента-

рии внутри кода web-страницы, для того чтобы другие люди и сами авторы
смогли разобраться в структуре документа:
<!Автор: Дмитрий Лещев>
<!Последнее обновление: 07.08.2002>
SDOCTYPE
Каждый HTML-документ, использующий возможности определенной версии
HTML, обязан начинаться со строки:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4 Final//RU">
ИЛИ
<!DOCTYPE HTML PUBLIC " - / / W 3 C / / D T D HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">
Данная строка поможет браузеру правильно интерпретировать документ, так
как теги и их атрибуты в разных версиях могут выглядеть по-разному.
BODY
Тег <BODY> указывает начало и конец тела HTML-документа.
Атрибуты
• a!Ink — определяет цвет активной гиперссылки.
• background — указывает фоновое изображение всей web-страницы. Значение
задается в виде URL графического файла в формате GIF, JPG или PNG.
• bgcolor — цвет фона страницы.
• bgproperties — заставляет браузер отображать фоновый рисунок, который не
прокручивается вместе с текстом. Принимает только одно значение: Fixed.
Атрибут не указан в спецификации HTML 4.
• leftmargin — определяет ширину (в пикселах) левого и правого полей доку-
мента. Работает только в браузерах Internet Explorer.
• l i n k — назначает цвет гиперссылкам в документе.
• marginheight — определяет ширину (в пикселах) верхнего и нижнего полей
документа. Работает только в браузерах Netscape.
• marginwidth — определяет ширину (в пикселах) левого и правого полей доку-
мента. Работает только в браузерах Netscape.
• topmargin — определяет ширину (в пикселах) верхнего и нижнего полей до-
кумента. Работает только в браузерах Internet Explorer.
• text — определяет цвет текста в документе.
• vl i nk — определяет цвет гиперссылок, которые вы уже просмотрели.
Значения параметров bgcolor, text, l i n k , a l i n k и v l i n k задаются либо шестнадца-
теричным RGB-значением, либо одним из базовых цветов (см. раздел «Стан-
дартные цвета» в конце приложения).
Стандартные атрибуты: id, class, lang, dir, title, style, onload, onunload, onclick,
ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress,
onkeydown, onkeyup.
СОВЕТ
При задании ширины полей для обеспечения совместимости со всеми видами браузеров
используйте одновременно параметры marginwidth/marginheight и topmargin/leftmargin.
Всегда указывайте параметры bgcolor, text, link, alink и vlink одновременно. Если один из
этих параметров не указан, браузер по умолчанию будет использовать цвет, установлен-
ный пользователем, и получится «черная кошка в черной комнате».
Листинг П2.2. Пример HTML-документа с атрибутами тега <BODY>

<HTML>
<BOOY background="images/flower.jpg" alink="Red" bgcolor="#202020" text="#FFFFFF"
link="|FFOOOO" vlink="#669066" marginheight="20" topmargin="20" leftmargin="30"
marginwidth="30" bgproperties="FIXED" onblur="JS_onBlur" onfocus="JS_onFocus"
onload="JS_onLoad" onunload="JS_onUnLoad" style="font-size: 18pt">
. ...Текст документа...
</BODY>
</HTML>
HTML
Тег <HTML> указывает начало и конец HTML-документа. Все теги, расположен-
ные вне этих тегов, игнорируются браузером.
Стандартные атрибуты: 1 ang, di г.
Заголовок документа
В этом разделе собраны теги, относящиеся к заголовку документа и заключен-
ные между тегами <HEAD> (листинга П2.3).
'
Листинг П2.3. Заголовок документа
<НТМ1_>

<HEAD>
<Т1Т1_Е>Создание интерактивного персонального сайта</Т1Т1Е>
<BASE href="http://www.dimvovich.narod.ru/index.html">
<LINK rel="HOME" title-''Моя домашняя страница" href="Index.html">
<LINK rel="stylesheet" TYPE="text/css" href="myStyles.css">
<LINK rev="mailto:dimvovich@narod.ru">
<META http-equiv="REFRESH" content="5" URL="http://www.dimvovich.narod.ru/index.htmT'>
<META name="GENERATOR" content-''Дмитрий Лещев">
<META name="PUBLISHER" content="Piter"> •
<META name="PUBLISHER-URL" content="http://www.piter.com/">
<META name="KEYWORDS" content="co3flaHne сайта. Flash. интерактивность">
<META name="DESCRIPTION" content="Co3flaHne интерактивного персонального сайта">
<STYLE type="text/css" title="Cool TABLE">

</STYLE>
</HEAD>

<BODY>
Текст документа
</BODY>
</HTML>
HEAD
Тег определяет начало и конец заголовка документа. Заключает в себе элемен-
ты, содержащие вспомогательную информацию о документе.
TITLE
Определяет название документа. Название отображается в заголовке окна брау-
зера и становится названием закладки по умолчанию. Данный элемент обязате-
лен для любого HTML-документа и может быть указан не более одного раза.
Стандартные атрибуты: lang, dir.
ВНИМАНИЕ
Некоторые браузеры не отображают заголовки длиннее 64 символов, их также не воспри-
нимают и некоторые поисковые системы.
BASE
Тег указывает адрес страницы, который будет подставлен браузером вместо не-
корректных URL, указанных в атрибутах href. Удобно указывать этот тег в на-
чале страницы, например в заголовке.
Атрибуты
• href — определяет базовый адрес для подстановки вместо неверных ссылок.
• target — определяет имя окна или его тип для отображения объекта, указан-
ного в href. Возможные значения: имя окна, _Ы ank, _parent, _sel f, _top.
LINK
Тег <LINK> описывает взаимосвязь документа с другими документами на сайте,
указывая его место в иерархической структуре сайта (листинг П2.4). Не имеет
закрывающего тега. В заголовке может содержаться несколько элементов <LINK>.
Стандартные атрибуты: id, class, lang, dir, title, style, onclick, ondblclick,
onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown,
onkeyup, href, href lang, type, rel, rev, target, media, charset.
Листинг П2.4. Пример взаимных ссылок

<LINK href="docB" rel="foo">

<LINK href="docA" rev="foo">
STYLE
Тег используется для вставки в документ таблицы стилей. Указанная таблица
стилей заменяет присоединенные таблицы и установки браузера.
Атрибуты
• media — описание устройства вывода, значение по умолчанию — "screen".
• type — обязательный атрибут. Определяет информацию о таблице стилей:
MIME-тип или язык. Как правило, значением этого атрибута является
"text/ess".
Стандартные атрибуты: lang, dir, title.
МЕТА
Тег <МЕТА> используется для описания документа, которое представляет собой
метаданные в виде пары «имя—значение». С помощью этого тега в заголовок
документа встраивается дополнительная информация, невидимая для пользова-
теля, но необходимая для правильной индексации страницы поисковыми робо-
тами. Не имеет закрывающего тега.
Атрибуты
• content — содержит значение параметра, определенного в параметре name или
http-equiv.
СОВЕТ
Многие поисковые системы воспринимают в атрибуте content не более 50 символов. Неко-
торые системы игнорируют этот атрибут, если он содержит повторяющиеся ключевые слова.
• http-equiv — HTTP-сервер использует это значение в качестве заголовка от-

вета на запрос. Например, <МЕТА http-equiv="Expires" content="Fri, 9 Aug 2002
14:25:27 GMT"> определит следующий HTTP-заголовок: Expires: Fri, 9 Aug 2002
14:25:27 GMT.
• name — определяет тип атрибута. Существует множество предопределенных
типов, некоторые из которых приведены в начале раздела (см. листинг П2.3).
• scheme -- имя схемы, которая используется для интерпретации значений
свойств.
Стандартные атрибуты: 1 ang, di г.
Фреймы
Фреймы служат для разделения окна браузера на несколько областей, каждая
из которых содержит отдельный HTML-документ (листинги П2.5, П2.6). Как
правило, они используются для облегчения навигации по сайту и создания на-
вигационного меню. Тем не менее большинство разработчиков избегают ис-
пользование фреймов, так как они наносят непоправимый вред дизайну. Ста-
райтесь использовать фреймы только тогда, когда это действительно необходимо.
Внимательно следите, чтобы определение фреймов находилось вне элемента BODY. Каж-
дый фрейм содержит отдельный документ!
Листинг П2.5. Пример создания фреймов

<FRAMESET frameborder="0" framespacing="0" border="0" cols="200.*">
<FRAME src="framel.html" name="page">
<FRAMESET ГСМ5="Ш.*">
<FRAME src="frame2.html" name="menul" marginwidth="0">
<FRAME src="fratne3.html" name="menu2" marginwidth="0">
</FRAMESET>
<NOFRAMES>Baiu браузер не поддерживает фреймы</ШЕКАМЕ5>
</FRAMESET>
<BODY>
</BODY>
Листинг П2.6. Создание таблицы 2x3 из фреймов

<FRAMESET rows="30*.70r cols-"33*.34*.33r>

</FRAMESET>
<BODY>
</BODY>
FRAMESET
Указывает область и структуру окна документа, содержащего фреймы.
Атрибуты
• rows — определяет количество и высоту горизонтальных фреймов в окне
браузера. Значения перечисляются через запятую. Способы задания разме-
ров:
D в процентах от доступной высоты окна браузера, например: rows="30#,
301. 40Г;
О в пикселах, например: rows="75, 525";
Q с помощью символа «*» (звездочка), обозначающего оставшийся доступ-
ный размер; добавление цифры перед знаком звездочки говорит браузеру
о том, что подобранное расстояние необходимо увеличить в данное число
раз.
Все три способа можно совмещать. Например, тег <FRAMESET rows="25£, 100,
*"> разделит окно на три горизонтальных фрейма, первый из которых будет
высотой в четверть окна браузера, второй — 100 пикселов, а третий займет
оставшееся место. Тег <FRAMESET rows="30#, 400, •*. 2*"> разобьет окно высотой
в 1000 пикселов на фреймы высотой 300, 400, 100 и 200 пикселов.
• cols — определяет количество и размеры вертикальных фреймов (фреймов-
столбцов) в окне браузера. Значения перечисляются через запятую. Способы
задания размеров:
О в процентах от доступной ширины окна браузера, например: col s= "401,
40*, 20Г;
Q в пикселах, например: cols="100, 500";
О с помощью символа «*» (звездочка), обозначающего оставшийся доступ-
ный размер; добавление цифры перед знаком звездочки говорит браузеру
о том, что подобранное расстояние необходимо увеличить в данное число
раз.
Все три способа можно совмещать. Например, cols="50#, 100, *" разделит
окно на три вертикальных фрейма, первый из которых будет шириной в по-
ловину окна браузера, второй — шириной 100 пикселов, а третий займет
оставшееся пространство. Тег <FRAMESET co1s="l*, 250, 3*"> разобьет окно ши-
риной 1250 пикселов на фреймы шириной 250, 250 и 750 пикселов.
• border — определяет толщину рамок всех фреймов в блоке <FRAMESET> в пик-
селах. Данный параметр действует только в браузерах Netscape. Атрибут не
описан в спецификации HTML 4.
• bordercolor — определяет цвет рамки. Значение — стандартное название или
шестнадцатеричный код цвета (см. раздел «Стандартные цвета» в конце при-
ложения). Данный параметр действует только в браузерах Netscape. Атрибут

не описан в спецификации HTML 4.
• frameborder — определяет объемный вид рамки у фреймов, содержащихся внут-
ри блока <FRAMESET>. Атрибут не описан в спецификации HTML 4. В Internet
Explorer данный параметр задает рамку. Возможные значения:
Q для Internet Explorer: I — отображать рамки, 0 — не отображать рамки;
Q для Netscape Communicator (нестандартизованные значения): Yes — ото-
бражать рамки, No — не отображать рамки.
\
• framespacing — определяет расстояние между фреймами в пикселах. Атрибут

не описан в спецификации HTML 4.
Стандартные атрибуты: id, class, title, style, onload, onunload, title.
FRAME
Определяет фрейм и его свойства внутри тега <FRAMESET>.
Атрибуты
• bordered or — определяет цвет рамки. Значение — стандартное название или
шестнадцатеричный код цвета (см. раздел «Стандартные цвета» в конце при-
ложения). Атрибут не описан в спецификации HTML 4.
• frameborder — определяет наличие рамок у фрейма. Возможные значения:
О 1 — отображать рамки; нестандартизованное значение — Yes (NN);
Q О (IE) — не отображать рамки; нестандартизованное значение — No (NN).
• marginwidth — определяет ширину (в пикселах) левого и правого полей фрей-
ма. Если атрибут не указан, браузер определит оптимальный размер отступа
по собственном усмотрению.
• longdesc — атрибут содержит ссылку на описание фрейма. Используется со-
вместно с атрибутом TITLE.
• marginheight — определяет ширину (в пикселах) верхнего и нижнего полей
фрейма. Если параметр не указан, браузер определит оптимальный размер
отступа по собственном усмотрению.
• name — определяет имя данного фрейма, которое будет в дальнейшем исполь-
зоваться для ссылки на него из других документов с помощью атрибута
target. В качестве значения можно указать любое имя без пробелов с исполь-
зованием латинских символов и цифр. Имя не должно начинаться с цифр и
специальных символов.
• noresize — не позволяет изменять размеры фрейма. Указывается без значе-
ния.
• scrolling — определяет наличие линеек прокрутки для содержимого фрейма.
Возможные значения:
О Yes — отображать полосы прокрутки (значение по умолчанию в Internet
Explorer);
Q No — не отображать полосы прокрутки;
fj Auto — отображать полосы прокрутки при необходимости (значение по
умолчанию в Netscape Communicator).
• src — обязательный параметр. Указывает адрес HTML-файла, отображаемо-

го в данном фрейме.
Стандартные атрибуты: id, class, style, title.
NOFRAMES
Все, что находится между открывающим и закрывающим тегами <NOFRAMES>, бу-
дет отображено браузером, если он не поддерживает фреймы. Элемент <NOFRAMES>
должен находиться внутри тегов <FRAMESET>. Согласно спецификации тег мо-
жет иметь общие атрибуты: id, class, lang, dir, title, style, onclick, ondblclick,
onkeyup.
IFRAME
Ter <IFRAME> задает «плавающий» фрейм (листинг 2.7). Определяется внутри
структуры <FRAMESET>. He поддерживается старыми версиями Netscape.
Атрибуты
• src — указание на файл — содержимое фрейма.
• f rameborder — рамка вокруг фрейма. Возможные значения: 1 и 0.
• marginwidth — указывает размер отступа по горизонтали (в пикселах).
• marginheight — указывает размер отступа по вертикали (в пикселах).
• scrolling — определяет наличие полосы прокрутки по схеме (Yes/No/Auto).
• align — выравнивание фрейма на странице и способ обтекания текста вокруг
объекта. Возможные значения:
Q Left — выравнивание по левому краю,
Q Center — выравнивание по центру,
G Right — выравнивание по правому краю,
Q Тор — обтекание текстом от верхнего края фрейма,
G Middle — симметричное обтекание фрейма текстом,
Q Bottom — обтекание текстом от нижнего края фрейма.
• 1 ongdesc — ссылка на подробное описание фрейма.
• name — определяет имя фрейма.
• width — ширина фрейма.
• height — высота фрейма.
• border — определяет пустое пространство вокруг фрейма (в пикселах). Атри-
бут не указан в стандарте HTML.
Стандартные атрибуты: id, class, style, title.
Листинг П2.7. Пример применения тега <IFRAME>

<IFRAME src="foo.html" width="400" height="500"
scrolling="auto" frameborder="l">
[Ваш браузер в данный момент не поддерживает фреймы.
Однако вы можете посетить
<А ЬгеТ="т"оо.111;п11">альтернативный документ.</А>]
</IFRAME>
Сценарии
Сценарии — это встроенные в HTML-страницу наборы команд языка сценария
(листинг 2.8). Большинство сценариев пишется на языке JavaScript.
Листинг П2.8. Пример сценариев
<NOSCRIPT> Пора менять браузер... </NOSCRIPT>

<А name="Content">CoflepiaHne журнала</А>
<А пате="Аг1:1с1е1.">Первая статья сегодняшнего номера посвящена кошкам</А>

Вернуться к <А пгет"="#Соп1епт.">содержанию</А>
Пишите нам по адресу:<BR>
<ADDRESS>197198. Санкт-Петербург, а/я 619<BR>B компьютерную peflakniw</ADDRESS>
Тег Вк<ВР,>вставляет перенос строки
Текст. разделенный<Ь№ NOSHADE width="50r> сплошной горизонтальной линией.

<PRE>
Текст, заключенный в этом теге, будет отображен "как есть" с сохранением пробелов
и переносов строки.
ОбЫЧНО ВЫВОДИТСЯ МОНОШИРИННЫМ UlpH(j)TOM</PRE>

Вы согласны с данным мнением?<ВР>
<А href="maiI to:di mvovlch@narod.ru?subject=0npoc &cc=dimvovi ch@yandex.ru&body=Yes">
fla</A><BR><A href="mailto:dimvovich@narod.ru?subject=0npoc
&cc=dimvovich@yandex.ru&body=No">
HeT</A><BR>

<A href="mailto:mai1to:dimvovich@narod.ru?subject=Onpoc">Xo4y дать развернутый ответ</А>
Самый большой заголовок идет по центру

Заголовок поменьше может начинаться в начале
Самый маленький уровень заголовка
Параграф с выравниванием по центру

Текст расположен по центру строки
А этот параграф выровнен по правому краю.
Отдельный параграф текста

Содержание журнала Первая статья сегодняшнего номера посвящена кошкам Вернуться к содержанию
Пишите нам по адресу:
197198, Санкт-Петербург, а/я 619
В компьютерную редакцию
TerBR
вставляет перенос строки Текст, разделенный
сплошной горизонтальной линией.
Текст, заключенный в этом теге будет отображен "как есть" с сохранением пробелов
и переносов строки.
Обычно выводится моноширинным шрифтом
Вы согласны с данным мнением?

Да
Нет
Хочу дать развернутый ответ
Рис. П2.1. Так будет выглядеть страница использования тегов (см. листинг П2.11)
А
Без этого тега не было бы ни HTML, ни Интернета. Он используется для созда-
ния гипертекстовых ссылок и якорей на странице.
Атрибуты
• href — определяет документ, на который задается ссылка. Возможные значе-
ния:
О http://... — создает ссылку на www-документ;
Q ftp://... — создает ссылку на ftp-сайт или расположенный на нем файл;
Q mail to:... — запускает почтовую программу-клиент с заполненным полем

имени получателя; если после адреса поставить знак вопроса, то можно
указать дополнительные атрибуты, разделенные знаком «&»;
Q news:... — создает ссылку на конференцию сервера новостей.
Можно указывать относительные ссылки, например ссылка <А href="ind.html">
Указатель</А> будет ссылаться на файл ind.html, расположенный в той же папке.
• name — определяет уникальный якорь на странице. После этого вы можете
указать данный якорь в качестве гиперссылки.
• target — определяет фрейм, на который указывает гипертекстовая ссылка. Этот
атрибут используется только совместно с атрибутом href. В качестве значе-
ния необходимо задать либо имя одного из существующих фреймов, либо
одно из следующих стандартных имен:
Q _sel f — документ должен отображаться в текущем фрейме;
G _parent — документ должен отображаться во фрейме-родителе текущего
фрейма (фрейм, содержащий структуру <FRAMESET> с текущим фреймом);
Q _top — документ должен отображаться в главном окне;
U _Ы ank — документ должен отображаться в новом окне.
• type — тип содержания документа (MIME-тип), на который указывает ссылка.
Стандартные атрибуты: id, class, lang, dir, title, rel, rev, style, onfocus, onblur,
onkeypress, onkeydown, onkeyup, target, tabindex, accesskey, charset.
Элемент <А> не может быть вложенным в себе подобные, то есть недопустимы конструк-
ции: <А пгег="1тМ.Мтп1">Первая ссылка<А пгеГ="1тк2.пг.тГ>Вторая ссылка</А>Продол-
жение первой ссылки </А>.
ADDRESS
Тег для указания контактной информации, например почтового адреса. Обычно
располагается в начале или в конце документа.
Стандартные атрибуты: id, class, lang, dir, title, style, onclick, ondblclick,
onkeyup.
DIV
Используется для отделения блока HTML-документа от остальной части доку-
мента и назначения ему специального форматирования с помощью таблиц сти-
лей. Находящиеся между начальным и конечным тегами текст или HTML-эле-
менты оформляются как отдельный параграф.
Стандартные атрибуты: id, class, lang, dir, title, style, align, onclick, ondblclick,
onkeyup.
HI, H2, ..., Но

Данные теги используются для создания заголовков текста. Существует шесть
уровней заголовков, различающихся величиной шрифта. С помощью заголовков
удобно разбивать текст на смысловые части, как это делается в книгах.
Стандартные атрибуты: id, class, Tang, dir, title, style, align, onclick, ondblclick,
onkeyup.
P
Тег используется для разбивки текста на параграфы. Может игнорироваться
браузером.
onkeyup.
Теги, обозначающие блоки текста (за исключением тега <А>), не могут содержать другие
и себе подобные вложенные теги-контейнеры блоков текста.
PRE
Используется для включения в документ уже отформатированного текста.
Браузеры воспроизводят содержимое этого элемента с помощью моноширинно-
го шрифта с сохранением пробелов и символов конца строки.
Атрибуты
• width — определяет ширину блока текста в символах.
Стандартные атрибуты: id, class, lang, dir, title, style, onclick, ondblclick, onmousedown,
onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup.
Выделение частей текста

Отдельное стилевое оформление можно давать не только целым абзацам текста,
но и отдельным фразам (листинг П2.12).
Листинг П2.12. Примеры тегов, используемых для оформления слов и предложений

<Р>
Сегодня мелкие, но <DEL>5</DEL><INS>3</INS>.
</Р>
<HR width="50r align="LEFT" size="4">
<BLOCKQUOTE cite="http://www.dimvovich.narod.ru.personal.html ">
Кристаллы сахара и льда<ЕШ>
Подобно жизни растворятся<ВЯ>
В воде, как в суете мирской.<BR>
Чтоб никогда не появляться<ВР>
Под этой странною звездой.<BR>
</BLOCKQUOTE>
<HR width="300" align="LEFT" size="6">
<CITE="http://www.cheburashka.ru.">
Этот тег применяется для выделения фразы <5ТЮТ6>эмфатическим</5ТГОЗМ6>

<ЕМ>ударением</ЕМ>.<BR>
<SPAN class="listing-title">B первый кадр нужно вставить следующий код:</5РАМ> .
<CODE>trace(21,0/7.0);</CODE><BR>
<SPAN class="listing-title">B окне вывода вы должны увидеть:</SPAN>
<SAMP>3</SAMP><BR>
Того же результата можно достичь, используя переменную <VAR>J</VAR>.<BR>
As <CITE>Harry S. Truman</CITE> said.
<Q lang="en-us">The buck stops here.</Q><BR>
More information can be found in <CITE>[ISO-0000]</CITE>.<BR>
Please refer to the following reference number in future
correspondence: <STRONG>l-234-55</STRONG>
Введите адрес в строку адреса браузера и нажмите клавишу <KBD>Enter</KBD> для входа на
сайт <ABBR title="World Wide Web">WWW</ABBR>.<BR>
Для передачи файлов в Сети лучше использовать протокол <ACRONIM title="File Transfer
Protocol">FTP</ACRONIM>.<BR>
<DFN>FTP</DFN> - протокол для передачи файлов в Сети.
3 D.\Books\My\Hash2\Flash\AppE\Frases.htinl - Micrusuft Internet Explorer

, tail . ii£*w ' r-svurir;. lo-.ls- Help.
II
Сегодня мелкие, но £3.
Кристаллы сахара и льда

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

В первый кадр нужно вставить следующий код: traco(2i,o/7,o) ;
В окне вывода вы должны увидеть: э
Того же результата можно достичь, используя переменную J.
As Harry S. Truman said, The buck stops here.
More information can be found in [ISO-OOOOJ.
Please refer to the following reference number in future correspondence: 1-234-55 Введите
адрес в строку адреса браузера и нажмите клавишу Enter для входа на сайт WWW.
Для передачи файлов в Сети лучше использовать протокл FTP.
FTP - протокол для передачи файлов в Сети.
;,, \
Рис. П2.2. Примеры оформления слов и предложений (см. листинг П2.12)
ABBR
Тег используется для обозначения аббревиатур. В атрибуте t i t l e можно размес-
тить полное название, которое будет использовано при озвучивании текста, про-
верке правописания, индексировании поисковыми роботами.
Стандартные атрибуты: id, class, lang, dir, style, onclick, ondblclick, onmousedown,
ACRONIM
Тег используется для обозначения акронимов. В атрибуте title можно размес-
тить полное название, которое будет использовано при озвучивании текста, про-
верке правописания, индексировании поисковыми роботами.
Стандартные атрибуты: id, class, lang, dir, style, onclick, ondblclick, onmousedown,
BLOCKQUOTE
Тег используется для оформления длинных цитат. Для коротких фраз лучше
использовать тег <С1ТЕ>. Цитируемый текст отображается отдельным абзацем
с увеличенными отступами.
Атрибуты
• cite — позволяет сослаться на источник цитаты.
Стандартные атрибуты: id, class, lang, dir, title, style, onclick, ondbl click, onmousedown,
BDO
Тег <BDO> служит для закрепления направления текста в случае использования
алгоритма бинаправленного текста.
Стандартные атрибуты: lang, dir.
CITE
Тег указывает, что находящийся между начальным и конечным тегами текст -
цитата, и определяет ссылку на источник. Обычно используется для коротких
цитат (в отличие от тега <BLOCKQUOTE>). Цитируемый текст отображается курси-
вом.
CODE
Тег предназначен для выделения исходного кода программ. Текст при этом, как
правило, отображается моноширинным шрифтом.
DEL
Тег вместе с тегом <INS> используется для обозначения внесенных исправле-
ний, определяя удаленный текст.
Атрибуты
• cite — указывает источник сообщения или документа.
• datetime — задает дату, когда были выполнены изменения.
DFN
Используется для выделения термина, которому дается определение.
EM
Указание логического ударения. Используется для смыслового выделения тек-
ста, стоящего между начальным и конечным тегами.
INS
Тег вместе с тегом <DEL> используется для обозначения внесенных исправлений,
определяя удаленный текст.
Атрибуты
• cite — атрибут для указания источника сообщения или документа.
• datetime — атрибут задает дату, когда изменения были выполнены.
KBD
Тег предназначен для отображения текста, который пользователь должен на-
брать на клавиатуре.
Q
Тег используется для заключения фразы в кавычки.
Атрибуты
• cite — позволяет сослаться на первоисточник.
SAMP
Тег служит для оформления текста вывода программ.
SPAN
Используется для назначения части текста специального форматирования с по-
мощью таблицы стилей.
onkeyup.
STRONG
Тег для еще более сильного выделения, чем тегом <ЕМ>.
VAR
Тег <VAR> предназначен для обозначения в тексте переменных.
Управление шрифтами
Стилевым оформлением блоков текста можно управлять не только с помощью
каскадных таблиц стилей, но и напрямую, с помощью тегов, собранных в дан-
ном разделе (листинг П2.13).
Листинг П2.13. Примеры задания параметров шрифта

<BODY>
<BASEFONT size="l" color="RED">
<P><FONT size=l>SIZE=l</FONT>
<FONT size=2>SIZE=2</FONT>
<FONT size-7>SIZE-7</FONT></P>
<FONT size="+2" со1ог="#ООООРР">Увеличенный синий шрифт</ЕОМТ>
<FONT size="3" face="Courier" со!ог="Мадеп1а">Текст выведен моноширинным пурпурным
шрифтом 3 pa3Mepa</FONT>
<U> Подчеркнутый текст </U><BR>
<5ТР1КЕ>Перечеркнутый</5ТН1КЕ> текст<ВН>
Текст с <В>выделенным</В> полужирным шрифтом словом<ВР>
А портной думает:<0 lang="ru"><CITE><SMAI_L>fl мал</5МА1_1_> да <1>умен</1>. <BIG>a ты
велик</В16> да <1>глуп.</1> </Q><BR>
Одна молекула серной кислоты H<SUB>2</SUB>SO<SUB>4</SUB> дает в растворе два протона
H<SUP>+</SUP><BR>
Текст телеграммы можно вывести с помощью моноширинного шрифта: <ТТ>ПРИЕЗЖАЮ ЗАВТРА ТЧК
ЦЕЛУ
</BODY>
3D:\Books\My\Flash2\FlashVApp2\Strinq html - Microsoft Internet Explorer
IS
SIZE=I sizE=2 srzE=3 SIZE=4 SIZE~5 ol^-C^O kJ L/Lud /

Увеличенный синий шрифт Текст выведен моноширинным пурпурным
шрифтом 3 размера Подчеркнутый текст
Текст с выделенным полужирным шрифтом словом
А портной думает:1?мал Ьаунен, а ты велик да ауп.
Одна малвкуяа серной кислоты Н&О^ даем в растворе два протона /з*
Текст гжяегрзммы мажно тикжи с помощью иоы-ыофиннаж щрифта;
Рис. П2.3. Примеры шрифтовых выделений (см. листинг П2.13)

В
Текст, заключенный между открывающим и закрывающим тегами <В>, будет вы-
делен полужирным шрифтом.
BASEFONT
Определяет шрифт, которым должен отображаться основной текст документа.
Не имеет закрывающего тега. Вы можете легко изменить шрифт любой части
документа, используя тег <FONT>. Действие тега <BASEFONT> не распространяется
на заголовки.
Атрибуты
• size — обязательный параметр. Определяет размер шрифта. Возможные зна-
чения: целые числа от 1 до 7 включительно.
• face — определяет тип шрифта (гарнитуру).
• color — определяет цвет шрифта. Значение — стандартное название или ше-
стнадцатеричный код цвета (см. раздел «Стандартные цвета» в конце прило-
жения).
Стандартные атрибуты: id, class, lang, dir, title, style.
Вместо данного тега рекомендуется использовать таблицы стилей.
BIG
Текст, выделенный этим тегом, выводится увеличенным размером.
FONT
Определяет параметры шрифта, заключенного между открывающим и закры-
вающим тегами текста.
Атрибуты
• size — размер шрифта. Возможные значения:
Q целое число от 1 до 7;
Q относительный размер с указанием знака; итоговый размер вычисляется
путем сложения с размером, указанным в теге <BASEFONT>.
• color — цвет текста. Значение — стандартное название или шестнадцатерич-
ный код цвета (см. раздел «Стандартные цвета» в конце приложения).
• face — гарнитура шрифта.
I
t
Текст, заключенный между открывающим и закрывающим тегами <1>, будет вы-

делен курсивом.
TT
Текст, заключенный между открывающим и закрывающим тегами <ТТ>, будет вы-
делен моноширинным шрифтом.
S, STRIKE
Текст, заключенный между открывающим и закрывающим тегами <STRIKE> или
<S>, будет перечеркнут. В стандарте HTML 4 не рекомендуется к использованию.
SMALL
Текст, заключенный между открывающим и закрывающим тегами <SMALL>, будет
выделен меньшим шрифтом.
SUB
Тег используется для обозначения подстрочного индекса.
SUP
Тег используется для обозначения надстрочного индекса.
U
Текст, заключенный между открывающим и закрывающим тегами <U>, будет вы-
делен подчеркиванием.
Дополнительные теги форматирования текста

В данный раздел включены два тега, не являющиеся контейнерами. Оба они
не имеют закрывающих тегов. Пример их использования приведен в листин-
ге П2.13.
BR
Тег осуществляет перевод строки. Элемент не имеет закрывающего тега.
Атрибуты
• clear — заставляет браузер вставить перенос строки так, что текст полностью
разрывается рисунком или таблицей. Возможные значения:
О А11 — полное выравнивание текста;
Q Left — выравнивает текст, следующий за рисунком, по левому краю;
Q Right — выравнивает текст, следующий за рисунком, по правому краю;

Q None — значение по умолчанию; выравнивание выбирается браузером.
Стандартные атрибуты: id, class, title, style.
Всегда ставьте <BR> после тега <IMG>. В противном случае картинка будет иметь ненуж-
ный отступ.
HR
Вставляет в текст горизонтальную разделительную линию.
Атрибуты
Я width — определяет длину линии в пикселах или процентах от ширины окна
браузера.
• size — определяет толщину линии в пикселах.
• noshade — определяет способ закраски линии как сплошной. Параметр явля-
ется флагом и не требует указания значения. Без данного параметра линия
отображается объемной.
• col or — определяет цвет линии. Значение — стандартное название или шест-
надцатеричный код цвета (см. раздел «Стандартные цвета» в конце приложе-
ния).
onkeyup.
Списки
Как и везде, списки в HTML бывают двух видов: маркированные и нумерован-
ные. Перед элементом маркированного списка ставится символ-маркер, а пе-
ред нумерованным — число или буква. Списки могут быть вложенными (лис-
тинг П2.14).
Листинг П2.14. Пример оформления списка
<UL>
<LI> Первый пункт списка
<UL>
<LI> Первый пункт вложенного списка
<LI> Второй пункт вложенного списка
<LI> Третий пункт вложенного списка
</UL>
<LI> Второй пункт списка
<LI> Третий пункт списка
</UL>
<OL TYPE="I" START="2">
<LI> Пункт два
<LI> Пункт три
<LI> Пункт четыре
</OL>
<DL>
<ОТ>НТМ<00>язык разметки гипертекста
<DT>bookmark (закладка)<00>сохраненный браузером адрес web-документа.

</DL>
D:\Books\My\Flash 2\FlashVApp2\Li sts_a2.html - Microsoft Internet Explorer
• Первый пункт списка

о Первый пункт вложенного списка
о Второй пункт вложенного списка
о Третий пункт вложенного списка
• Второй пункт списка
• Третий пункт списка
П. Пункт два
Ш. Пункт три
IV. Пункт четыре
HTML
язык разметки гипертекста
bookmark (закладка)
сохраненный браузером адрес web-документа.
Рис. П2.4. Пример списка (см. листинг П2.14)
UL
Создает маркированный список. Между открывающим и закрывающим тегами
должны присутствовать один или несколько элементов <LI>, обозначающих от-
дельные пункты списка.
Атрибуты
• type — задает вид маркера. Возможные значения: disc (круг), square (квадрат-
ный) и circle (окружность).
• compact — атрибут-флажок для создания компактных списков.
OL
Создает нумерованный список. Между открывающим и закрывающим тегами
должны присутствовать один или несколько элементов <LI>, обозначающих от-
дельные пункты списка.
Атрибуты
• start — определяет число, с которого начинается нумерация пунктов.
• type — определяет стиль нумерации пунктов. Может иметь значения:
Q "А" — прописные буквы: А, В, С...

О "а" — строчные буквы: а, Ь, с...
Q "I" — большие римские цифры: I, II, III...
О " i " — маленькие римские цифры: i, ii, iii...
Q "1" — арабские цифры: 1, 2, 3... (значение по умолчанию).
LI
Создает элемент списка. Располагается внутри тегов <OL> или <UL>.
Атрибуты
• val ue — изменяет порядок нумерации элементов нумерованного списка. В ка-
честве значения указывается порядковый номер элемента.
• type — задает вид маркера. Возможные значения: A, a, i, I, I, disc, square и
circle (см. теги <UL> и <OL>).
MENU, DIR
Теги предназначены для создания маркированных списков. Эти элементы во-
шли в спецификацию HTML 4 только в целях обратной совместимости. Вместо
них рекомендуется использовать тег <UL>.
DL
Открывает и закрывает список определений (например, глоссарий).
DT
Обозначает название термина в глоссарии.
DD
Обозначает определение термина.
Встроенные объекты
Объекты — это графические и мультимедийные вставки в HTML-документ, на-
пример картинки, Java-апплеты, звуки, музыка (листинг П2.15).
Листинг П2.15. Примеры тегов, используемых для встраивания объектов
<А href="Elefant.htm1"><IMG src="img/elefant.gif" width="100" height="100" alt="Elefant"
hspace="10" а"Мдп="пдМ;"><ВК></А>Данный текст обтекает картинку со слоном слева
и находится от нее на расстоянии 10 пикселов. Если вы хотите прочитать басню Крылова,

щелкните на картинке.
<EMBED src="music.mid" hidden="true">
<МОЕМВЕО>Альтернативный текст для старых браузеров</МОЕМВЕО>
</EMBED>
<EMBED src="music.vrml" height="300" width="200" hspace="10" align="center"
pluginspace="../plugins/download_vrml.html">
</EMBED>
<EMBED src="music.mid" HIDDEN="true">
</EMBED>
<APPLET code="JumpingGirl.class" width="30" height="40" align="left" aIt-"Прыгающая
девочка">
Если вы видите этот текст, значит, ваш браузер не запускает апплеты.
</APPLET>
<APPLET codebase="http://www.narod.ru/applets" code="JavaTetris.class" width="400"
height="500" align="center">
<PARAM name="width" value="10">
<PARAM name="height" value="20">
<PARAM name="name" value="Tetris">
</APPLET>
<P>OBJECT classid="http://www.miamachina.it/analogclock.py"> An animated clock.
</OBJECT>
<P> < ! - - First, try the Python applet -->
OBJECT title-'The Earth as seen from space"
classid="http://www.observer.mars/TheEarth.py">

OBJECT data="TheEarth.mpeg" type="application/mpeg">
.
OBJECT data="TheEarth.gif" type="image/gif">

The <STRONG>Earth</STRONG> as seen from space.
</OBJECT>
</OBJECT>
</OBJECT>
IMG
Тег используется для вставки изображений в HTML-документ. Поддерживает
форматы JPEG, GIF и PNG. He имеет закрывающего тега.
Атрибуты
• src — обязательный параметр. Указывает адрес файла изображения.
• height — высота изображения (в пикселах).
• width — ширина изображения (в пикселах).
СОВЕТ
Необходимо всегда явно указывать размеры рисунка с помощью атрибутов height и width,
чтобы браузер имел возможность вывести содержательный текст до загрузки изображения.
hspace — определяет горизонтальный отступ от картинки (в пикселах),

vspace — определяют вертикальный отступ от картинки (в пикселах).
СОВЕТ
Указывайте явно значения параметров HSPACE и VSPACE. Некоторые браузеры могут
иметь ненулевые значения этих параметров по умолчанию.
align — обязательный параметр. Указывает способ выравнивания изображе-

ния в документе. Может принимать следующие значения:
Q Left — выравнивание по левому краю;
G Right — выравнивание по правому краю;
f
О Тор — выровнять верхнюю кромку изображения с верхней линией теку-

щей текстовой строки;
Q Texttop — выровнять верхнюю кромку изображения с верхней линией те-
кущей текстовой строки (только для Netscape Communicator);
Q Middle — выравнивает базовую линию текущей текстовой строки с центром
изображения;
Q Absmiddle — выравнивает центр текущей текстовой строки с центром изо-
бражения (только для Netscape Communicator);
Q Baseline — выравнивает нижнюю кромку изображения с базовой линией
текущей текстовой строки (только для Netscape Communicator);
Q Bottom — выравнивает нижнюю кромку изображения с базовой линией те-
кущей текстовой строки;
U Absbottom — выравнивает нижнюю кромку изображения с нижней кромкой
Q Center — выравнивает изображение по центру (только для Internet Explo-
rer).
name — определяет имя изображения, уникальное для данного документа.
alt — определяет текст, отображаемый браузером на месте изображения,
если браузер не может его загрузить. Данный текст также выводится в каче-
стве подсказки.
СОВЕТ
Старайтесь всегда указывать атрибут alt, чтобы пользователю было легче ориентировать-
ся на странице.
border — ширина рамки вокруг изображения (в пикселах). •

lowsrc — адрес файла с альтернативным изображением более низкого качества.
usemap — применяет к изображению навигационную карту (image map), за-
данную тегом <МАР>. В качестве значения задается имя изображения-карты
с предшествующим знаком решетки. Например, если имя карты — mymap, то
ссылка на нее будет выглядеть так: $тпутар.
ВНИМАНИЕ
Обратите внимание, что браузер различает регистр букв в имени карты.
ismap — определяет изображение как навигационную карту (image map), об-

рабатываемую на стороне сервера.
longdesc — указывает адрес файла с подробным описанием изображения.
СОВЕТ
Всегда сразу после тега <IMG> ставьте тег <BR>, это поможет избежать ненужных отсту-
пов после рисунка.
Стандартные атрибуты: id, class, Tang, dir, title, style, onclick, ondblclick, onmousedown,
OBJECT
Ter <OBJECT> применяется для встраивания на страницу объектов: документов,
апплетов, изображений или элементов управления.
Атрибуты
• usemap — применяет к объекту-изображению навигационную карту (image map),
заданную тегом <МАР>. В качестве значения задается имя изображения-карты
с предшествующим знаком решетки. Например, если имя карты — mymap, то
ссылка на нее будет выглядеть так: $mymap.
ВНИМАНИЕ
name — имя объекта, уникальное для данного документа.

height — высота изображения.
width — ширина изображения.
hspace — горизонтальный отступ от картинки (в пикселах).
vspace — вертикальный отступ от картинки (в пикселах).
align — обязательный параметр. Указывает способ выравнивания объекта
в окне. Может принимать следующие значения:
Q Right — выравнивание по правому краю;
О Тор — выровнять верхнюю кромку изображения с верхней линией теку-
Q Middle — выравнивает базовую линию текущей текстовой строки с цен-
тром изображения;
Q Absmiddle — выравнивает центр текущей текстовой строки с центром изо-
бражения (только для Netscape Communicator);
Q Baseline — выравнивает нижнюю кромку изображения с базовой линией
G Bottom — выравнивает нижнюю кромку изображения с базовой линией те-
кущей текстовой строки;
Q Absbottom — выравнивает нижнюю кромку изображения с нижней кромкой
Q Center — выравнивает изображение по центру (только для Internet Explo-
rer).
• classic! — адрес реализации объекта.

• codebase — основной путь для определения относительных путей, указанных
в атрибутах classid, data, archive. Если не указан, принимается значение те-
кущего документа.
• codetype — тип данных, указанных в атрибуте classid.
• data — определяет адрес, по которому находятся данные объекта.
• type — описывает тип данных, указанных атрибутом data.
• archive — список адресов, разделенных пробелами. Указывает на архивы, со-
держащие ресурсы объекта.
• declare — логический атрибут, позволяет только декларировать объект, но не
инсталлировать его.
• standby — сообщение, которое пользователь увидит во время загрузки объекта.
onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup, tabindex.
EMBED
Используется для вставки в HTML различных встроенных объектов. Данный
тег не поддерживается спецификацией HTML 4, вместо него рекомендуется ис-
пользовать тег <OBJECT>. Если браузер поддерживает тег <EMBED>, содержащиеся
между тегами текст и элементы будут игнорироваться. При щелчке на встроен-
ном объекте будет запущено приложение, ответственное за открытие файлов
данного типа и зарегистрированное на компьютере пользователя.
Атрибуты
Встраивание объекта происходит так же, как и вставка изображения, поэтому
теги <EMBED> и <IMG> имеют много одинаковых атрибутов: src, name, align (прини-
мает значения Left, Right, Top, Bottom), alt, border, width, height, hspace и vspace.
• pluginspace — указывает URL, по которому можно найти plug-in, необходи-
мый для просмотра данного файла.
• palette — определяет тип цветовой палитры для просмотра объекта. Возмож-
ные значения:
Q Background — использовать фоновую палитру для отображения объекта
(значение по умолчанию);
Q Foreground — использовать другую палитру Windows.
• hidden — определяет, отображать указанный объект или нет. Возможные зна-
чения — False (значение по умолчанию) и True.
• type — явно указывает МШЕ-тип файла.
NOEMBED
Определяет текст, который будет отображен, если браузер по какой-либо при-
чине не поддерживает тег <EMBED>.
APPLET
Используется для вставки в HTML Java-апплетов — программ на языке Java,
исполняемых браузером на стороне клиента. Тег не рекомендуется использовать
в спецификации HTML 4, вместо него лучше применять тег <OBJECT>.
Если ваш браузер не поддерживает Java или вы отключили исполнение аппле-

тов, то на месте Java-апплета вы увидите текст или элементы, заключенные ме-
жду тегами <APPLET>.
Атрибуты
Многие атрибуты сходны с атрибутами тега <IMG>: align, height, width, hspace,
vspace, name, alt.
• code — обязательный параметр. Определяет имя файла класса Java-апплета.
• codebase — указывает адрес, по которому находится файл с кодом Java-аппле-
та. Если атрибут codebase опущен, браузер попытается найти программу в те-
кущем каталоге.
М archive — указывает имя файла архива, содержащего код апплета.
Стандартные атрибуты: id, class, title, style.
РАНАМ
Располагается внутри тегов <APPLET> или <OBJECT>. Используется для передачи про-
грамме каких-либо параметров. Тег задает пару «имя— значение переменной».
Атрибуты
• name — имя переменной.
М value — значения переменной.
• valuetype — тип атрибута value. Возможные значения:
Q Data (значение по умолчанию) — передает значение как строку;
О Ref — ссылка на адрес;
Q Object -- ссылка на объект.
• type — атрибут указывает тип файла (только если valuetype="REF").
Стандартный атрибут: id.
Таблицы
Таблицы в HTML формируются построчно. Сначала с помощью тега <TR> необ-
ходимо создать ряд таблицы, в который затем с помощью тегов <TD> определя-
ются ячейки (листинги П2.16-П2.20).
Листинг П2.16. Пример создания таблицы

<TABLE border>
<TR>
<TD>A1</TD> <TD>B1</TD> <TD>C1</TO>
<TR>
<TD>A2</TD> <TD>B2</TD> <TD>C2</TD>
</TR>
</TABLE>
<TABLE border="l">
<CAPTION align="bottom">3a головок таблицы</САРТ10М>
<TR>
<ТО>Ячейка таблицы</ТО>
</TR>
</TABLE>
Листинг П2.17. Пример объединения рядов

<TABLE>
<THEAD>
<TR> .. header information. . .
</ТНЕАО>
<TFOOT>
<TR> ....footer information. . .
</TFOOT>
<T80DY>
<TR> .. first row of block one data...
<TR> . . , second row of block one data. . .
</TBODY>
<TBODY>
<TR> .. first row of block two data...
<TR> . . .second row of block two data...
<TR> . . .third row of block two data...
</TBODY>
</TABLE>
Листинг П2.18. Сокращенный пример объединения рядов

<TABLE>
<THEAD>
<TR> . . .header information. . .,
</THEAD>
<TFOOT>
<TR> . . footer information. . .
</TFOOT>
<TBODY>
<TR> . . .first row of block one data...
<TR> . . .second row of block one data...
</TBODY>
<TBODY>
<TR> .. first row of block two data...
<TR> . . .second row of block two data. . .
<TR> .. .third row of block two data...
</TBODY>
</TABLE>
Листинг П2.19. Пример объединения столбцов

<TABLE>
<COLGROUP>
<COL width="30">
<COLGROUP>
<COL width="30"><COL width="0*"> <COL width="2*">
<COLGROUP align="center">
<COL width="l*"> <COL width="3*" align-"char" char-
<THEAD>
<TR><TD>
...rows...
</TABLE>
Листинг П2.20. Иллюстративный пример

Таблица 1
<TABLE border="l">
<TR><TD>1 <TD rowspan="2">2 <TD>3
<TR><TD>4 <TD>6
<TR><TD>7 <TD>8 <TD>9

</TABLE>
Таблица 2
<TABLE border="l">
<TR><TD>1 <TD>2 <TD>3
<TR><TD colspan="2">4 <TD>6
<TR><TD>7 <TD>8 <TD>9
</TABLE>
3 D:\EL. ШШШ
Рис. П2.5. Страница с таблицами (см. листинг П2.20)
TABLE
Тег, определяющий начало и конец таблицы.
Атрибуты
• border — определяет ширину внешней рамки таблицы (в пикселах).
• cell padding -- определяет расстояние (в пикселах) между рамкой каждой
ячейки таблицы и содержащимся в ней материалом.
• cellspacing — определяет расстояние (в пикселах) между границами сосед-
них ячеек.
• width — определяет ширину таблицы. Ширина задается либо в пикселах,
либо в процентном отношении к ширине окна браузера. По умолчанию этот
параметр определяется автоматически в зависимости от содержащегося в таб-
лице материала.
• height — определяет высоту таблицы. Высота задается либо в пикселах, либо
в процентном отношении к высоте окна браузера. По умолчанию этот пара-
метр определяется автоматически в зависимости от содержащегося в таблице
материала.
9 bgcolor — определяет цвет фона ячеек таблицы. Значение — стандартное на-
звание или шестнадцатеричный код цвета (см. раздел «Стандартные цвета»
в конце приложения).
\
• background — позволяет заполнить фон таблицы рисунком. В качестве значе-

ния необходимо указать URL рисунка. Не поддерживается спецификацией
HTML 4.
• summary — описывает резюме, которое будет использовано нестандартными
браузерами (например, речевым).
• frame — указывает, как надо рисовать внешнюю рамку таблицы. Возможные
значения:
О Above — верхний край;
О Below — нижний край;
Q Border — рамка вокруг всей таблицы (значение по умолчанию);
G Box — рамка вокруг всей таблицы;
Q Hsides — горизонтальные края таблицы;
Q Lhs — левый край таблицы;
Q Rhs — правый край таблицы;
Q Void — вся рамка скрывается;
О Vsides — вертикальные края таблицы.
• rules — определяет правила отображения внутренних линий в таблице. Воз-
можные значения: А11 (Все линии), Groups (Группы), Со! (Колонки), None (Без
линий), Rows (Строки). Чтобы атрибут вступил в силу, необходимо использо-
вать теги <TFOOT>, <THEAD>, <TBODY>.
Стандартные атрибуты: id, class, Tang, dir, title, style, align, valign, onclick,
onkeydown, onkeyup.
CAPTION
Тег определяет заголовок таблицы. Содержание заголовка должно состоять
только из текста.
Атрибуты
• align — определяет способ вертикального выравнивания заголовка таблицы.
О Тор — заголовок над таблицей (значение по умолчанию);
Q Bottom — заголовок под таблицей;
Q Left — заголовок слева от таблицы;
О Right — заголовок справа от таблицы.
THEAD
Определяет верхний колонтитул таблицы. Не требует закрывающего тега.
Стандартные атрибуты: id, class, lang, dir, title, style, align, valign, onclick,
onkeydown, onkeyup, char, charoff.
13 Зак. 96
TFOOT
Определяет нижний колонтитул части таблицы. Не требует закрывающего тега.
TBODY
Определяет неразрывный блок рядов таблицы. Не требует закрывающего тега.
Несколько рядов могут быть объединены с помощью данного тега.
ondbl click, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress,
COLGROUP
Определяет группу столбцов таблицы. Несколько столбцов могут быть объеди-
нены с помощью данного тега. Не требует закрывающего тега.
Атрибуты
• span — число столбцов в группе. Значение — натуральное число. При отсут-
ствии атрибута считается, что в каждой группе только по одному столбцу.
• Width — ширина столбцов. Значения ширины могут быть указаны в пикселах,
в процентах, с помощью звездочки или числа и звездочки (аналогично атри-
бутам cols и raws тега <FRAMESET>). Значение "О*" обозначает наименьшую под-
ходящую ширину. Значение ширины может быть переопределено в теге <COL>.
COL
Определяет столбец таблицы. Недопустим закрывающий тег.
Атрибуты
бутам cols и rows тега <FRAMESET>).
TR
Определяет строку таблицы. Закрывающий тег можно опускать.
Атрибуты

бутам col s и rows тега <FRAMESET>).
• bgcolor — определяет цвет фона для всех ячеек данного ряда. Значение -
стандартное название или шестнадцатеричный код цвета (см. раздел «Стан-
дартные цвета» в конце приложения).
В Internet Explorer допустимо использование еще нескольких атрибутов:
• border — ширина рамки в пикселах;
• bordercol or — цвет рамки;
• bordercol ordark — цвет тени объемной рамки; •
• bordercol ordark — цвет светлой границы объемной рамки.

Они могут принимать те же значения, что и атрибут bgcol or.
TH
Тег создает ячейку-заголовок.
Атрибуты
• scope — определяет ячейки с данными, которые относятся к заголовку. Мо-
жет принимать следующие значения:
Q Row — строка;
LI Col — столбец;
Q Rowgroup — группа строк;
Q Col group — группа столбцов.
• abbr — аббревиатура содержимого ячейки.
• axi s — помогает разместить ячейку в концептуальной категории для ее вклю-
чения в n-мерную таблицу.
• width — определяет ширину ячейки. Ширина задается в пикселах или в про-
центном отношении к ширине таблицы.
• height — определяет высоту ячейки. Высота задается в пикселах или в про-
центном отношении к высоте таблицы.
• col span — определяет количество столбцов, на которые простирается данная
ячейка. По умолчанию имеет значение 1.
• rowspan — определяет количество рядов, на которые простирается данная
• nowrap — блокирует автоматический перенос слов в пределах текущей ячейки.
• bgcolor — определяет цвет фона ячейки. Значение — стандартное название
или шестнадцатеричный код цвета (см. раздел «Стандартные цвета» в конце
приложения).
• background — выводит фоновый рисунок на пространстве ячейки.
TD
Элемент создает ячейку с данными.
Атрибуты
• headers — список заголовков данной ячейки таблицы. Необходим браузерам с
речевым интерфейсом.
• abbr — аббревиатура содержимого ячейки.
• axi s — помогает разместить ячейку в концептуальной категории для ее вклю-
чения в n-мерную таблицу.
• width — определяет ширину ячейки. Ширина задается в пикселах или в про-
центном отношении к ширине таблицы.
• height — определяет высоту ячейки. Высота задается в пикселах или в про-
центном отношении к высоте таблицы.
• col span — определяет количество столбцов, на которые простирается данная
• rowspan — определяет количество рядов, на которые простирается данная
• nowrap — блокирует автоматический перенос слов в пределах текущей ячейки.
• bgcolor — определяет цвет фона ячейки. Значение — стандартное название
или шестнадцатеричный код цвета (см. раздел «Стандартные цвета» в конце
приложения).
• background — выводит фоновый рисунок на пространстве ячейки.
Формы
Форма представляет собой часть web-страницы, содержащую элементы управ-
ления: флажки, переключатели, текстовые поля, поля ввода и кнопки (лис-
тинг П2.21). Обычно пользователь заполняет форму, и она передается на обра-
ботку серверу и клиенту. Основное отличие формы от других элементов
страницы состоит в том, что даже в старых браузерах вы можете получить до-
ступ к обработке введенных пользователем значений.
Листинг П2.21. Пример создания формы

<FORM action="www.narod.ru/cgi-bin/ths.pl" name="TestForm">

<INPUT type="text" size="20" уа!ие="Имя">
<INPUT type-"submit" уа1ие="0тправить">
</FORM>


Введите ваш адрес
<FORM>
<TEXTAREA name="address" cols="50" rows="5">
</TEXTAREA>
</FORM>
<FORM>
Ваша операционная система?
<SELECT name="OS">
OPTION>MS-DOS
<OPTION value="MD">MS Windows95
<OPTION value="MD">MS Windows98
<OPTION>MS Windows NT
OPTION>OS/2
<OPTION SELECTED>UNIX
</SELECT>
</FORM>
<FORM name="Forml" action="http://www.narod.ru/cgi-bin/my.p1">
<INPUT type="hidden" name="info" value="Anketa">
\Л»я:<ВК>
<INPUT type="text" name="name" value=" " size="30" maxlength="60"><BR>
Ответьте на вопрос нашей анкеты:
Любите ли вы пиво?
<INPUT type="checkbox" name="bear">
Какую марку вы предпочитаете?<ВР>
<INPUT type="text" name="name" value=" " size="20"><BR>
Пароль:<BR>
<INPUT type="password" width="10" name="passwd"><BR><BR>
<INPUT type="submit" уа!ие="0тправить">
</FORM>
<FORM action="http://somesite.com/prog/someprog" method="post">
<p>
<SELECT name="ComOS">
<OPTION selected label="none" value="none">None</OPTION>
OPTGROUP label="PortMaster 3">
<OPTION label-"3.7.1" va1ue="pm3_3.7.1">PortMaster 3 with ComOS 3.7.1</OPTION>
OPTION label="3.7" va1ue="pm3_3.7">PortMaster 3 with ComOS 3.7</OPTION>
<OPTION label="3.5" value="pm3_3.5">PortMaster 3 with ComOS 3.5</OPTION>
</OPTGROUP>
OPTGROUP labeVPortMaster 2">
OPTION label="3.7" value="pm2_3.7">PortMaster 2 with ComOS 3.7</OPTION>
OPTION label="3.5" value="pm2_3.5">PortMaster 2 with ComOS 3.5</OPTION>
</OPTGROUP>
OPTGROUP label="IRX">
OPTION label="3.7R" value="IRX_3.7R">IRX with ComOS 3.7R</OPTION>
OPTION 1abel-"3.5R" value="IRX_3.5R">IRX with ComOS 3.5R</OPTION>
</OPTGROUP>
</SELECT>
</FORM>
<FORM action="http://somesite.com/prog/adduser" method="post">
<P> First name: <INPUT type="text" name="firstname"><BR>
Last name: <INPUT type="text" name="lastname"><BR>
email: <INPUT type="text" name="email"><BR>
<INPUT type="radio" name="sex" value="Male"> Male<BR>
<INPUT type="radio" name="sex" value="Female"> Female<BR>
<INPUT type="submit" value="Send"> <INPUT type="reset">
</FORM>
3 D:\Books\My\Flash2\Flesh\App2\forms.html - Microsoft Internet Explorer

lie Eriit. yiev/. Favorites
j;.' J lj:\Eook;\M>\Hesh?\Flash\App2\t
Введите ваш адрес
Ваша операционная система? | UNIX ]Щ

•
Имя:
Г
Ответьте на вопрос нашей анкеты: Любите ли вы пиво? Р Какую марку вы предпочитаете?
Г~
Пароль:
[NOM 1
First name: |
Last name: I
email:)
С Male
<~ Female
Рис. П2.6. Страница с формами (см. листинг П2.21)
Листинг П2.22. Пример группировки элементов управления

<FORM action="..." method:="post">
<Р>
<FIELDSET>
<LEGEND>Personal Information</LEGEND>
Last Name: <INPUT narae="personaljastname" type-"text" tabindex="l"><BR>
First Name: <INPUT name="personal_firstname" type="text" tabindex="2"><BR>
Address: <INPUT name="personal_address" type-"text" tabindex="3"><BR>
</FIELDSET>
<FIELDSET>
<LEGEND>Medical History</LEGEND>
<INPUT name="history_illness"
type="checkbox"
va1ue="Smallpox" tabindex="20"> Smallpox
type="checkbox"
value="Mumps" tabindex="21"> Mumps
type="checkbox"
value»"Dizziness" tabindex="22"> Dizziness
type="checkbox"
value="Sneezing" tabindex="23"> Sneezing
</FIELDSET>
<FIELDSET>
<LEGEND>Current Medication</LEGEND>
Are you currently taking any medication?
<INPUT name="medication_now"
type="radio"
value="Yes" tabindex="35">Yes
<TNPUT name="medication_now"
type="radio"
value="No" tabindex="35">No
If you are currently taking medication, please indicate
it in the space below:
<TEXTAREA name="current_medication"
rows="5" cols="50"
tabindex="40">
</TEXTAREA>
</FIELDSET>
</FORM>
3 D:\Books\My\Flosh2\Flash\App2Vo
;
: | E|te : &i{ '. ty&t \ FSyOme&
E'(j|i ftMesh Home..
r Person^ Informaticn ••
Last Name: |
First Name: |~
iA<Wress:LZ
Г Medical History
i Г Smallpox Г Mumps Г Dizziness П Sneezing
г Current Medication
Are you currently taking any medication? <* Yes f* No If you are currently taking medication, please indicate it in the space below:
Рис. П2.7. Группировка элементов управления (см. листинг П2.22)
FORM
Тег используется для создания формы. Внутри открывающего и закрывающего
тегов <FORM> разрешается использовать большинство HTML-элементов для соз-
дания надписей и оформления.
Атрибуты
• accept -charset — список кодировок для вводимых данных (с разделителями -
пробелами или запятыми).
• accept — список типов содержания формы для отправки серверу (с раздели-
телями — запятыми).
• name — имя формы, уникальное для данного документа.

• action — адрес, по которому будет отправлено содержимое формы. Это мо-
жет быть либо адрес электронной почты, либо путь к сценарию на сервере.
• method — способ отправки содержимого формы. Возможные значения: Get (по
умолчанию) и Post.
• enctype — определяет способ кодирования содержимого формы при отправке,
если указан метод post. По умолчанию используется значение "application/x-
www-form-urlencoded". Значение "multipart/form-data" может быть использова-
но для элемента <INPUT> с типом "file".
Стандартные атрибуты: id, class, lang, dir, style, title, target, onsubmit, onreset,
onkeypress, onkeydown, onkeyup.
INPUT
Тег <INPUT> служит для создания элементов управления формы: кнопок, полей
ввода, флажков, текстовых полей. Элемент не имеет конечного тега. Тег <INPUT>
должен располагаться между тегами <FORM>.
Атрибуты
• name — имя, необходимое для доступа к данному элементу управления.
• type — тип элемента управления. Возможные значения:
Q Text — поле ввода (значение по умолчанию);
Q Textarea — текстовое поле;
G Password — поле ввода пароля (вводимый текст автоматически закрывает-
ся знаками «*»);
О Checkbox — флажок;
Q Radio — элемент переключателя;
Q Submit — кнопка отправки формы;
Q Image — графическая кнопка (не поддерживается стандартом HTML 4);
Q Reset — кнопка сброса введенных значений;
О Hidden — скрытое поле;
Q Button — кнопка;
Q File — дает возможность пользователю прикрепить файл к текущей форме.
• accept — MIME-тип прикрепляемого файла. Используется только совместно
с параметром type="file".
• value — значение элемента управления или надпись на кнопке.
• checked — логический атрибут-флаг; для флажка и переключателя указывает,
установлены ли они.
• size — определяет размер текстового поля в символах.
• maxlength — определяет максимальное количество символов, которые можно
ввести в текстовом поле.
• src — задает адрес рисунка, используемого при создании кнопки.
• align — указывает способ выравнивания изображения в документе. Может

принимать следующие значения:
G Right — выравнивание по правому краю;
Q Тор — выровнять верхнюю кромку изображения с верхней линией теку-
О Middle — выровнять базовую линию текущей текстовой строки с центром
Q Bottom — выровнять нижнюю кромку изображения с базовой линией теку-
щей текстовой строки.
• alt — определяет текст, отображаемый браузером на месте изображения,
если браузер не может его загрузить. Данный текст также выводится в каче-
стве подсказки.
• readonly — определяет элемент как пригодный только для чтения.
• disabled — определяет элемент как недоступный.
• usemap — применяет к изображению навигационную карту (image map), задан-
ную тегом <МАР>. В качестве значения задается имя изображения-карты с
предшествующим знаком решетки. Например, если имя карты — mymap, то
ссылка на нее будет выглядеть так: $mymap.
ВНИМАНИЕ -
• ismap — определяет изображение как навигационную карту (image map), об-

рабатываемую на стороне сервера.
• tabindex — индекс в последовательности перехода по клавише Tab.
• accesskey — клавиша быстрого доступа.
Стандартные атрибуты: id, class, lang, dir, title, style, onfocus, onblur, onselect,
onchange, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove,
onmouseout, onkeypress, onkeydown, onkeyup.
BUTTON
Тег создает кнопку, аналогично тегу <INPUT> с типом BUTTON. Однако в отличие от
последнего может иметь содержание, которое выводится как надпись на кнопке.
Не допускается использование изображения-карты как содержания кнопки.
Атрибуты
• name — имя, необходимое для доступа к кнопке.
• type — тип элемента управления. Возможные значения:
Q Submit — кнопка отправки формы;
U Reset — кнопка сброса введенных значений;
Q Button — простая кнопка.
• value — значение.
• disabled — определяет кнопку как недоступную.

• accesskey — клавиша быстрого доступа.
SELECT
Тег <SELECT> определяет список. Содержит несколько тегов <OPTION>.
Атрибуты
• multiple — атрибут-флаг; если установлен, дает возможность выделения не-
скольких пунктов списка.
• name — определяет имя списка.
• size — определяет количество видимых пунктов списка для прокручиваемого
списка. Если атрибут опущен или указано значение 1, создается раскрываю-
щийся список.
• di sabl ed — определяет кнопку как недоступную.
onchange, onclick, ondbl click, onmousedown, onmouseup, onmouseover, onmousemove,
OPTION
Используется только внутри тегов <SELECT> и описывает отдельный элемент
списка. Не требует завершающего тега.
Атрибуты
• selected — указывает на данный пункт как на выделенный. Если не установ-
лен режим выделения нескольких пунктов, то атрибут можно назначить
только одному элементу списка.
• val ue — значение, передаваемое при отправке формы.
• 1 abel — название пункта.
• disabled — определяет пункт как недоступный.
OPTGROUP
Используется только внутри тегов <SELECT> и описывает группу элементов спи-
ска (меню). Не поддерживается многими браузерами.
Атрибуты
• label — название группы.
• disabled — определяет группу как недоступную.
Стандартные атрибуты: id, class, Tang, dir, title, style, onfocus, onblur, onselect,
TEXTAREA
_
Создает поле для ввода нескольких строк текста.
Атрибуты
• name — обязательный параметр. Определяет название, которое будет исполь-
зоваться при идентификации сервером заполненного поля.
• rows — определяет количество строк текста, видимых на экране.
• cols — определяет ширину текстового поля (в печатных символах).
• wrap — определяет способ переноса слов в заполняемой форме. Не поддержи-
вается спецификацией HTML 4. Возможные значения:
Q Off — перенос слов не происходит (значение по умолчанию);
О V i r t u a l — перенос слов только отображается, на сервер же поступает неде-
лимая строка;
Q Physical — перенос слов будет происходить во всех точках переноса.
• readonly — определяет элемент как доступный только для чтения.
• di sabl ed — определяет элемент как недоступный.
Стандартные атрибуты: id, class, Tang, dir, title, style, onfocus, onblur, onselect,
ISINDEX
Служит для создания поля ввода. Спецификацией HTML 4 рекомендуется ис-
пользовать тег <INPUT>. He имеет закрывающего тега.
Атрибуты
• prompt — содержит значение по умолчанию.
Стандартные атрибуты: id, class, lang, dir, title, style.
LABEL
Тег <LABEL> служит для прикрепления поясняющей информации к элементу
управления. Одна надпись может быть прикреплена к одному элементу.
Атрибуты
• for — служит для указания элемента управления в виде его ID.
• accesskey — обозначает клавишу быстрого доступа.
FIELDSET
Тег позволяет объединить элементы формы в группу.
Атрибуты
• accesskey — служит для задания клавиши быстрого доступа.
LEGEND
Тег задает надпись к группе элементов, определенной тегом <FIELDSET>.
Атрибуты
• accesskey — служит для задания клавиши быстрого доступа.
• align — указывает способ выравнивания надписи на рамке. Может прини-
мать следующие значения:
Q Left — текст по левой границе;
Q Ri ght — текст по правой границе;
Q Тор — текст по верхней границе (значение по умолчанию);
О Bottom — текст по нижней границе.
Нестандартные теги
Браузеры поддерживают ряд тегов, не описанных в стандарте HTML 4.
BGSOUND
Тег <BGSOUND> заставляет браузер проиграть звуковой файл. Поддерживаются
следующие форматы: AU, WAV, MID. He имеет закрывающего тега. Поддержи-
вается только Internet Explorer.
Атрибуты
• src — путь к звуковому файлу.
• loop — количество циклов воспроизведения. Возможные значения: натураль-
ное число или Infinite.
Пример использования:
<BGSOUND src="My__sound.wav" loop-"INFINITE">
BLINK
Ter <BLINK> заставляет мигать текст-содержание. Поддерживается только Netscape
Communicator.
<ВШК>Этот текст будет мерцать, но только в браузерах от Netscape</BLINK>
ILAYER
Позволяет автору документа позиционировать HTML-блок относительно дру-
гих слоев. Поддерживается только Netscape Communicator.
Атрибуты
• above — имя слоя, лежащего над данным.
• background — фоновый рисунок.
• bel ow — имя слоя, лежащего под данным.
• bgcol or — цвет фона. Значение — стандартное название или шестнадцатерич-
• clip — координаты слоя. Возможные форматы:
Q clip="left, top, right, bottom";
Q clip="right, bottom" (левый верхний угол помещается в точку 0,0).
• height — высота слоя.
• 1 eft — координата левого края относительно родительского слоя. Обязатель-
ный атрибут.
• name — имя слоя.
• радех — абсолютная координата X в окне документа.
• pagey — абсолютная координата Y в окне документа.
• src — указывает адрес вложенного документа.
• top — координата верхнего края относительно родительского слоя. Обяза-
тельный атрибут.
• v i s i b i l i t y — видимость слоя. Возможные значения: Show (показать), Hide
(скрыть), Inherit (наследовать).
• WIDTH — ширина слоя.
• z- i ndex — индекс в списке слоев.
<ILAYER name="11ayer2" top="100" left="100" clip="10. 10. 50. 50" background="image.gif"
bgcolor="BLACK" height="100" width="100"> Содержимое слоя<ИАУЕЯ>
KEYGEN
Тег <KEYGEN> был предложен компанией Netscape и используется для обеспече-
ния безопасности при передаче через Интернет данных формы.
Атрибуты
• challenge — значение атрибута шифруется с помощью ключа, присланного
сервером в процессе формирования персонального ключа. Если атрибут опу-
щен, будет использовано стандартное значение. Возможные значения —
текст или число.
• name — имя ключа.
<KEYGEN name="MyName" cha!1enge="MyChallenge">
LAYER
Тег <LAYER> позволяет автору документа позиционировать HTML-блок относи-
тельно страницы. Поддерживается только Netscape Communicator.
Атрибуты
• above — имя слоя, лежащего над данным слоем.
• background — фоновый рисунок.
• bel ow — имя слоя, лежащего под данным.
• c l i p — координаты слоя. Возможные форматы:
Q clip="left, top, right, bottom";
G c1ip="right, bottom" (левый верхний угол помещается в точку 0,0).
• Height — высота слоя.
• left — координата левого края относительно родительского слоя. Обязатель-
ный атрибут.
• name — имя слоя.
• радех — абсолютная координата X в окне документа.
• pagey — абсолютная координата Y в окне документа.
• src — указывает адрес вложенного документа.
• top — координата верхнего края относительно родительского слоя. Обяза-
тельный атрибут.
• v i s i b i l i t y -- видимость слоя. Возможные значения: Show (показать), Hide
(скрыть), Inherit (наследовать).
• width — ширина слоя.
• z-index — индекс в списке слоев.
<LAYER name-"ilayer2" TOP="100" LEFT="100" CLIP-"10. 10. 50. 50" background»"image.gif"
BGCOLOR»"BLACK" height="100" width="100">Coflep>iwMoe слоя<1АУЕР >
MARQUEE
Тег <MARQUEE> прокручивает текст-содержание наподобие бегущей строки. Рабо-
тает только в Internet Explorer.
Атрибуты
• align — способ выравнивания. Возможные значения:
Q Left — по левому краю (значение по умолчанию);
О Ri ght — по правому краю;
О Center — по центру;
Q Тор — по верху;
О Bottom — по низу.
• behavior — указание, что делать с текстом-содержанием. Возможные значения:
О Scrol 1 (значение по умолчанию) — текст исчезает с одной стороны облас-
ти и появляется с другой;
Q SI ide — текст полностью появляется на странице и останавливается;
Q A1 ternate — текст периодически перемещается от одного края к другому.

• direction — направление прокрутки текста. Возможные значения: Left (спра-
ва налево, значение по умолчанию), Ri ght (слева направо), Down (сверху вниз),
Up (снизу вверх).
• height — высота области прокрутки. Значение — число в пикселах или про-
цент от области экрана.
• hspace — величина свободного пространства слева и справа от текста до края
области. По умолчанию равно нулю.
• 1 оор — количество циклов прокрутки.
• scrol I amount — скорость прокрутки. Расстояние в пикселах, на которое текст
передвигается за один шаг прокрутки.
• scroll delay — интервал времени между шагами прокрутки (в миллисекундах).
• vspace — величина свободного пространства сверху и снизу от текста до края
области. По умолчанию равно нулю.
• Width — ширина области.
<MARQUEE align="Top" loop="infinite" behavior="slide" bgcolor="#FFOOOO" direction="1eft"
height=30 w1dth=200>
MULTICOL
Ter <MULTICOL> отображает текст в несколько столбцов. Поддерживается только
Netscape Communicator.
Атрибуты
• cols — необходимый атрибут; указывает число столбцов. По умолчанию ра-
вен 1.
• gutter -^расстояние в пикселах между столбцами. По умолчанию равно 10.
• Width — ширина столбца в пикселах или процентах.
Пример
г г использования:•
<MULTICOL cols=3 width=80£ gutter=20> Данный текст будет размещен в три столбца
</MULTICOL>
СОВЕТ
Для формирования нескольких колонок текста лучше использовать таблицы.
NOBR
Запрещает браузеру вставлять разрыв строки в тексте.
<NOBR>http://www.mysite.com</NOBR>
NOLAYER
Позволяет отображать альтернативный текст, если браузер не может отобразить
слой. Позволяет авторам web-страниц делать текстовую замену невидимому слою.
Поддерживается только браузерами от Netscape.
<NOLAYER>Baui браузер не воспроизводит слоев.<NOLAYER>
RT
Часть элемента <RUBY>. Содержит текст-подсказку. Поддерживается только Inter-
net Explorer, начиная с версии 5. Имеет единственный атрибут — name, который
позволяет сослаться на элемент.
<RUBY> Основное содержание
<РТ>Содержание подсказки</РТ>
</RUBY>
RUBY
Элемент <RUBY> содержит пару «основной текст—текст подсказки». Его можно
использовать для текстов на восточных языках, в которых несколько слов могут
иметь одинаковое написание, но разное произношение. Транскрипцию в этом
случае можно заключить в текст подсказки. Поддерживается только Internet
Explorer, начиная с версии 5. Имеет один атрибут — name, который позволяет со-
слаться на элемент.
<RUBY> Основное содержание
^Т>Содержание подсказки</РТ>
</RUBY>
SERVER
Тег <SERVER> был разработан Netscape и позволяет запускать на сервере сцена-
рий на JavaScript.
SPACER
Еще один тег от компании Netscape. Позволяет создать пустое пространство во-
круг текста-содержания.
Атрибуты
• align — режим выравнивания пустого пространства (если атрибут type равен
Block). Возможные значения:
О Left — выравнивание по левому краю;
Q Right — выравнивание по правому краю;
Q Тор — выровнять верхнюю кромку изображения с верхней линией теку-
О Middle — выровнять базовую линию текущей текстовой строки с центром
О Absmiddle — выровнять центр текущей текстовой строки с центром изобра-
жения (только для Netscape Communicator);
Q Basel i ne — выровнять нижнюю кромку изображения с базовой линией те-
Q Bottom — выровнять нижнюю кромку изображения с базовой линией теку-

Q Absbottom — выровнять нижнюю кромку изображения с нижней кромкой
Q Center — выровнять изображение по центру (только для Internet Explorer).
• height — высота пустого пространства в пикселах (если атрибут type равен
Block).
'
• size — размер пустого пространства в пикселах. Можно использовать, если
атрибут type равен Horizontal или Vertical.
• type — тип пустого пространства. Возможные значения:
Q Horizontal (по умолчанию) — горизонтальное пустой блок;
Q Vertical — вертикальный блок между линиями;
u Bl ock — пространство вокруг содержимого.
• width — ширина пустого пространства в пикселах (если атрибут type равен
Block).
<SPACER type="block" align="left" width=100 НЕ16НТ=100>Данный текст демонстрирует
применение тега SPACER. Каково?</5РАСЕК>
WBR
Тег <WBR> отменяет действие других тегов и позволяет браузеру переносить слова.
<М(Ж>Отменить переносы<иВЯ>Снова
разрешить переносы слов</МВР> </NOBR>
XML
Тег <XML> позволяет вставить кусок XML-текста. Поддерживается Internet Ex-
plorer начиная с версии 5.
Атрибуты
• ns — URL пространства имен XML-текста.
• prefix — префикс пространства имен XML-текста.
• src — адрес внешнего источника документа.
<XML id="xmlidl">
<IDCARD>
<NAME gender="male">John Doe</NAME>
<PHONE>l-800-555-5555</PHONE>
<EMAIL address="jdoe@someaddress.com"/>
</IOCARD>
</XML>
XMP
Тег <ХМР> позволяет отображать содержимое «как есть». Например, может ис-
пользоваться, чтобы другие теги выводились как текст, а не учитывались как
команды разметки. Поддерживается Internet Explorer.
Стандартные атрибуты: id, class, lang, dir, onfocus, onblur, onselect, onchange, onclick,
onkeydown, onkeyup.
<XMP>text</XMP>
Стандартные атрибуты
В данном разделе приведены стандартные атрибуты тегов, значения которых не
отражены в описании тегов или отражены лишь кратко.
align
Определяет способ горизонтального выравнивания текста или объекта. Не реко-
мендован к использованию спецификацией HTML 4; рекомендуется использо-
вать таблицы стилей.
• Left — по левому краю (по умолчанию);
• Center — по центру;
• Right — по правому краю (для некоторых тегов значение может быть недо-
ступно);
• Justi fy — по ширине.
Для тегов таблиц и ячеек возможно еще одно значение — Char, когда выравнива-
ние происходит по указанному символу (например, по запятой или точке).
bgcolor
Указывает цвет фона страницы или элемента таблицы (теги <BODY>, <TABLE>, <TR>,
<ТН>, <TD>). He рекомендован к использованию спецификацией HTML 4; реко-
мендуется использовать таблицы стилей. В качестве значения может использо-
ваться стандартное название или шестнадцатеричный код цвета (см. раздел
«Стандартные цвета» в конце приложения).
char
Указывает символ, который может быть выбран в качестве элемента выравнива-
ния (см. атрибут align). Например, числа можно выравнивать по символу точки
в английском тексте и по символу запятой в русском или французском.
charoff
Задает смещение от первого встретившегося символа, предназначенного для вы-
равнивания.
charset
Определяет кодировку символов документа, указанного в ссылке.
class
Определяет имя класса или имена классов, к которым относится элемент. Спи-
сок имен должен быть разделен пробелами или другими символами «пустого
пространства».
dir
Атрибут di г определяет направление текста или таблиц. Возможные значения:
• Itr
_ — слева направо;
I rt 1 — справа налево.
href
Указывает URL ресурса в виде абсолютного или относительного адреса, а также
может содержать указания на якоря, расположенные на странице.
hreflang
Указывает основной язык ресурса, указанного в атрибуте href, и может быть
приведен, если последний имеет определенное значение.
id
Определяет имя элемента. Имя должно быть уникально в документе.
lang
Атрибут указывает язык значения атрибута или содержания тега. Значение ат-
рибута может быть учтено при работе поисковых машин, в браузерах с речевым
интерфейсом, при различных нормах расстановок кавычек и других символов,
при проверке грамматики и орфографии. Некоторые из возможных значений:
• "en" — английский;
• "en-US" — английский, версия США.
Двухбуквенные сочетания зарезервированы в согласии с ISO639:
fr Французский
de Немецкий
it Итальянский
nl Голландский
el Греческий
es Испанский
pt Португальский
ar Арабский
he Еврейский
ru Русский
zh Китайский
ja Японский ,
hi Хинди
-
ur Урду
sa Санскрит
Буква «х» (например, в "x-klingon") указывает на экспериментальный вариант

атрибута.
media
Описывает устройство вывода для стилевой информации. По умолчанию имеет
значение "screen". Может содержать список media-элементов через запятую.
name
Указывает имя элемента для ссылки на него. Имя принадлежит тому же про-
странству имен, что и значение атрибута id.
onblur
Назначает сценарий событию onblur, которое происходит, когда элемент теряет
фокус. Может быть использован для тегов: <А>, <AREA>, <LABEL>, <INPUT>, <SELECT>,
<TEXTAREA> и <BUTTON>. %
onchange
Назначает сценарий событию onchange, которое происходит, когда элемент
управления теряет фокус, причем перед этим его содержимое было изменено.
Доступен для элементов <INPUT>, <SELECT> и <TEXTAREA>.
onclick
Назначает сценарий событию onclick, которое происходит, когда пользователь
щелкает на элементе.
ondblclick
Назначает сценарий событию ondblclick, которое происходит, когда пользова-
тель производит двойной щелчок на элементе.
onfocus
Назначает сценарий событию onfocus, которое происходит, когда элементу пере-
дается фокус. Может быть использован для тегов: <А>, <AREA>, <LABEL>, <INPUT>,
<SELECT>, <TEXTAREA> и <BUTTON>.
onkeydown
Назначает сценарий событию onkeydown, которое происходит, когда нажата кла-
виша.
onkeypress
Назначает сценарий событию onkeypress, которое происходит, когда нажата и от-
пущена клавиша.
onkeyup
Назначает сценарий событию onkeyup, которое происходит, когда отпущена кла-
виша.
onload
Назначает сценарий событию onload, которое происходит, когда браузер загру-
жает содержимое окна или все фреймы. Событие доступно для тегов <BODY>
и <FRAMESET>.
onmousedown
Назначает сценарий событию onmousedown, которое происходит, когда пользова-
тель нажимает кнопку мыши над элементом.
onmousemove
Назначает сценарий событию onmousemove, которое происходит, когда указатель
мыши двигается.
onmouseout
Назначает сценарий событию onmouseout, которое происходит, когда указатель
мыши уходит из области над элементом.
onmouseover
Назначает сценарий событию onmouseover, которое происходит, когда указатель
мыши проходит над элементом.
on mouseup
Назначает сценарий событию onmouseup, которое происходит, когда пользователь
отпускает кнопку мыши над элементом.
onreset
Назначает сценарий событию onreset, которое происходит, когда данные формы
сбрасываются с помощью кнопки Reset. Атрибут доступен для элемента <FORM>.
onselect
Назначает сценарий событию onselect, которое происходит, когда пользователь
производит выделение текста. Доступен для тегов <INPUT> и <TEXTAREA>.
onsubmit
Назначает сценарий событию onsubmit, которое происходит, когда отправляется
форма. Атрибут доступен для элемента <FORM>.
on unload
Назначает сценарий событию onunload, которое происходит, когда браузер уда-
ляет содержимое окна или все фреймы. Доступен для тегов <BODY> и <FRAMESET>.
rel
Описывает отношение между текущим документом и документом, на который
ссылается атрибут href. Значением этого атрибута может быть список с разде-
лителями-пробелами, содержащий следующие типы возможных отношений:
• Stylesheet — таблица стилей (CSS) для текущего документа; браузер загру-
зит файл с указанного в параметре href адреса и применит его к текущему
документу;
• Ноте — главная страница сайта (index.html);
• Toe, Contents — оглавление данного документа;
• Index — файл, содержащий указатель;
• Glossary — глоссарий терминов, относящихся к данному документу;
• Copyright — страница сайта, на которой есть информация о его создателях,
авторских правах и т. п.;
• Up, Parent — указывает на родительскую страницу;
• C h i l d — указывает на дочернюю страницу;
• Next — указывает на следующую страницу в последовательности документов;
• Previous — указывает на предыдущую страницу в последовательности доку-
ментов;
• Last, End — указывает на последнюю страницу в последовательности документов;
• Fi rst — указывает на первую страницу в последовательности документов;

• Hel р — указывает на страницу со справочной информацией.
rev
Описывает обратное отношение между текущим документом и документом, на
который ссылается атрибут href. Значением этого атрибута может быть список с
разделителями-пробелами, содержащий типы возможных отношений, описан-
ных в атрибуте rel.
style
Указывает информацию о стиле данного элемента. Синтаксис значения атрибу-
та STYLE определяется языком таблицы стилей. Как правило, это список пар «па-
раметр: значение», разделенных точкой с запятой:
<Р style="font-size: 12pt; color: fuchsia">KaK вам таблицы стилей?
target
Описывает имя фрейма, в котором должен быть загружен документ. Использу-
ется в тегах: <А>, <LINK>, <AREA>, <FORM>. Возможные значения:
• _Ы ank — открыть в новом окне;
• _parent -- документ должен отображаться во фрейме-родителе текущего
фрейма;
• _sel f — документ должен отображаться в текущем фрейме;
• _top — документ должен отображаться в основном окне браузера.
title
Помогает разместить дополнительную информацию об элементе, которая
всплывает в виде подсказки при задержке на элементе указателя мыши.
type
Указывает МШЕ-тип содержимого ресурса.
valign
Определяет способ вертикального выравнивания текста или объекта в ячейках
таблицы. Не рекомендован к использованию спецификацией HTML 4, рекомен-
дуется использовать таблицы стилей.
Возможные значения зависят от браузера:
• Тор — по верху ячейки (значение по умолчанию);
• Middle — по середине ячейки;
• Bottom — по низу ячейки;
• Basel i ne — по основной линии текста.
Стандартные цвета
При указании цвета элементов страницы можно использовать как шестнадцате-
ричное RGB-значение, так и названия нескольких стандартных цветов. Новые
браузеры поддерживают значительно больший список названий, однако специ-
Стандартные цвета 407
фикация HTML 4 описывает только 16. Кроме того, в ней рекомендуется зада-
вать цвета через таблицы стилей, а не через цветовые аргументы тегов. Фор-
мально браузеры должны быть чувствительны к регистру символов в написании
названий цветов, но большинство обозревателей Интернета на указание Black,
BLACK и Ы ack выведет черный цвет.
Ниже приведены шестнадцатеричные значения стандартных цветов.
• Black = "#000000"
• Green = "#008000"
• Silver - "#СОСОСО"
• Lime = "#OOFFOO"
• Gray = "#808080"
• Olive = "#808000"
• White - "#FFFFFF"
• Yellow = "#FFFFOO"
• Maroon = "#800000"
• Navy J - "#000080"
Ш Red = "#FFOOOO"
• Blue = "#OOOOFF"
• Purple - "#800080"
• Teal = "#008080"
• Fuchsia = "#FFOOFF"
• Aqua = "#OOFFFF"
'
• ..
JavaScript
Молись о счастливых днях!
На зимнее дерево сливы
Будь сердцем своим похож.
Мацуо Басе'1
В данном приложении приведено краткое описание объектов и операторов

JavaScript версии 1.5. Основное содержание приложения взято из документации
Netscape. Более полный вариант документа вы можете найти по адресу developer.
netscape.com/docs/manuals/javascript.httnl. Наиболее подробное описание JavaScript
и DOM на русском языке расположено на www.anktrue.spb.ru/js.html.
Все примеры, кроме объектов document, window и body, приведены согласно руководству
Netscape. В каждой версии браузера надо проверять работоспособность отдельных команд
и объектов. Примеры в большинстве своем не являются готовым кодом сценария, а лишь
демонстрируют синтаксис команд.
Полное описание операторов, свойств и методов объектов JavaScript выходит за рамки
данной книги. Для более подробного ознакомления с возможностями языка и управления
документом смотрите ресурсы Интернета.
Объекты JavaScript, их методы и свойства

Объект Array
Создание
new Array(arrayLength)
new Array(elementO, elementl elementN)
Параметры
• arrayLength — начальная длина массива.
Максимальное значение — 4 294 967 295.
• el ementN — список значений элементов массива.
Объекты JavaScript, их методы и свойства 409
Описание
Объект Array позволяет создавать массивы и работать с ними. Свойства и мето-
ды объекта приведены в табл. П3.1, П3.2.
Таблица П3.1. Свойства объекта Array
Свойство Описание
constructor Определяет функцию-конструктор объекта

index Для массивов, созданных с помощью регулярных выражений, возвращает
индекс выражения (от 0) в строке
input Для массивов, созданных с помощью регулярных выражений, возвращает
оригинальную строку, с помощью которой был создан массив
length Число элементов в массиве
prototype Позволяет добавлять свойства ко всем объектам-массивам
Таблица П3.2. Методы объекта Array
Метод Описание
concat(arrayName2, arrayName3,..., Объединяет два массива в новый массив

arrayNameN)
join(separator) Преобразует элементы массива в строки, конкатени-
рует их и выдает строку
popO Удаляет последний элемент и возвращает его
push(elementl,..., elementN) Метод добавляет один или несколько элементов
в конец массива и возвращает его новую длину
reverseQ Метод изменяет порядок элементов массива на об-
ратный
shiftQ Метод удаляет первый элемент массива и возвраща-
ет его значение
slice(begin[,end]) Метод извлекает часть массива и возвращает в виде
нового массива без изменения первоначального
splice(index, howMany, [elementl][, Метод добавляет и/или удаляет элементы массива
..., elementN]) без создания копии массива
sort (compareFunction) Метод сортирует элементы массива без создания
его копии
toSourceQ Возвращает литеральное представление массива1
toStringO Метод возвращает строковое значение, представ-
ляющее элементы в массиве
unshift(elementl,..., elementN) Метод добавляет один или более элементов в нача-
ло массива и возвращает новую длину массива
ValueOfQ Возвращает примитивное значение массива
1
Для встроенных объектов (и объекта Array в частности) функция toSource возвращает строку, кото-
рая означает, что код недоступен:
function Array() {
[native code]
410 Приложение 3. JavaScript
Примеры
• Создается массив msgArray длиной 0, затем присваиваются 0-й и 99-й элемен-
ты, в результате чего длина массива становится равной 100:
msgArray = new ArrayO;
msgArray[0] = "Нулевой";
msgArray[99] = "сотый";
// Следующее выражение истинно.
// так как мы определили 99-й элемент
if (msgArray. length == 100)
ту\/аг="Длина массива равна 100":
• В следующем примере создается двумерный массив, который затем преобра-
зуется в строку для вывода:
myVar="TecT на многомерный массив":
а = new Array(4);
for (i=0; i < 4: i++) {
a[i] = new Array(4);
for (j=0; j < 4; j++) {
for (i=0: i < 4:

str = "Row "+i+"
for (j=0: j < 4;
str +- a[i][j]
}
myVar +- str +": ":
}
Переменная myVar содержит следующие значения:
Row 0:[0.0][0.1][0,2][0.3]:
Row 1:[1.0][1,1][1,2][1.3];
Row 2:[2.0][2.1][2.2][2.3];
Row 3;[3.0][3.1][3.2][3.3];
Пример использования различных свойств и методов массивов:
myCats - new АггауС'ангорская". "сибирская", "персидская", "сиамская");
myVarl = myCats. joint);
myVar2 = myCats. joint" + ");
document. write(myVarl+ "<BR>");
document. write(myVar2+ "<BR>");
document. wгite("Длинa массива равна "+myCats.length+ "<BR>"):
popped = myCats. pop():
document. writet "popped "+popped + "<BR>");
myVarl=myCats. joint):
document. writet myVarl+ "<BR>");
pushed • myCats. ри51ч("бенгальская". "британская");
document . wr i te ( myCats+ "<BR> " ) :
myCats. reverset):
document. write(myCats+ "<BR>");
shifted = myCats. shift О :
document. write ("myCats after shift: " + myCats+ "<BR>"):
newCat = myCats. slicetO. 2);
document. write( "myCats after slice: " + myCats+ "<BR>");
document. writet "newCat: " + newCat+ "<BR>");
myCats. sortt):
document. writet "Sorted :"+myCats+ "<BR>");
removed = myCats.splice(2. 0. "русская голубая"):

document.write("After adding: " + myCats+ "<BR>"):
unshifted - myCats.ип5гпШ"бенгальская". "британская"):
document.write("After unshift: " + unshifted* "<BR>"):
</SCRIPT>
Результатом работы сценария будет следующая страница:
ангорская.сибирская.персидская.сиамская
ангорская + сибирская + персидская + сиамская
Длина массива равна 4
popped сиамская
ангорская.сибирская.персидская
ангорская,сибирская.персидская.бенгальская.британская
британская,бенгальская.персидская,сибирская,ангорская
myCats after shift: бенгальская.персидская.сибирская.ангорская
myCats after slice: бенгальская.персидская.сибирская.ангорская
newCat: бенгальская.персидская
Sorted:ангорская,бенгальская.персидская.сибирская
After adding: ангорская.бенгальская.русская голубая.персидская.сибирская
After unshift: 7
Объект Boolean
Создание
new Boolean(value)
Параметры
М value — начальное значение объекта. Значение конвертируется в логическое,
если необходимо. Если значение не указано или равно О, -О, null, false, NaN,
undefined и пустой строке (""), объект будет равен false. В других случаях,
включая любой объект и строку "false", значение созданного объекта будет
true.
Описание
Объект Bool ean используется для хранения логического значения. Свойства и ме-
тоды объекта Boolean приведены в табл. ПЗ.З, П3.4.
Таблица ПЗ.З. Свойства объекта Boolean
constructor Определяет функцию-конструктор объекта Boolean
prototype Позволяет добавлять свойства ко всем объектам Boolean
Таблица П3.4. Методы объекта Boolean
toSource() Возвращает строку исходного кода для создания объекта
toStringQ Возвращает строковое значение, представляющее элементы
в массиве
ValueOf() Возвращает примитивное значение объекта
Примеры
• Следующие строки создают объекты Boolean со значением false:
bNoParam - new BooleanO:
bZero = new Boolean(O):
bNull = new Boolean(null): 1
bEmptyString = new BooleanC "):
bfalse = new Boolean(false):
• Следующие строки создают объекты Bool ean со значением true:
btrue - new Boolean(true);
btrueString = new Boolean("true");
bfalseString = new BooleanC'false");
bMyBool = new BooleanC'MyBool"):
• He путайте объект Bool ean со значением логических примитивов. Сравните:
х = new Boolean(false);
if(x) // Условие истинно
х = false:
if(x) // Условие ложно
х = true:
• Не используйте объект Boolean для превращения нелогического значения
в логическое. Для этого есть функция Bool ean:
х = Boolean(expression) ; // Предпочтительно
х = new Boolean(expression): // Лучше не использовать
• Использование методов объекта Bool ean:
van flag = new Boolean(true);
van myVar=flag.toString(); // myVar равно true
x = new BooleanO: .
myVar=x.valueOf(); // myVar равно false
Объект Date
Создание
new DateO:
new Date(milllseconds);
new Date(dateString);
new Date(yr_num. mo_num, dayjium [. hr_num. min_num, secjfium, ms_num]);
Параметры
• mi 11 i seconds — целое число, представляющее собой количество миллисекунд,
прошедших с полуночи (00:00:00) 1 января 1970 г.
• dateString — строка, представляющая дату. Необходимый формат возвращает
метод Date.parse.
• yrjium, mo_num, day_num — целые числа, представляющие части даты, в числен-
ном представлении месяцы исчисляются, начиная с 0: 0=January и 1 ^De-
cember.
• hr_num, mi n_num, sec_num, ms_num — целые числа, составляющие даты.
Описание
Объект Date позволяет работать с датой и временем. Свойства и методы объекта
приведены в табл. ГОД П3.6.
Таблица П3.5. Свойства объекта Date
constructor Определяет функцию-конструктор объекта Date
prototype Позволяет добавлять свойства ко всем объектам Date
Таблица П3.6. Методы объекта Date
getDateQ Возвращает день месяца для указанного объекта
Date
getDay() Возвращает день недели для указанного объекта
Date
getFullYear() Возвращает четырехразрядный год для указанного
объекта Date
getHoursQ Возвращает час для указанного объекта Date
getMillisecondsQ Возвращает миллисекунды для указанного объекта
Date
getMinutesQ Возвращает минуты для указанного объекта Date
getMonthQ Возвращает месяц для указанного объекта Date
getSecondsQ Возвращает секунды для указанного объекта Date
getTimeO Возвращает число миллисекунд, прошедших с полу-
ночи 1 января 1970 года по Гринвичу, для указанного
объекта Date
getTimezoneOffsetQ Возвращает разницу в минутах между временем ком-
пьютера и временем по Гринвичу
getUTCDate() Возвращает день месяца для указанного объекта
Date соответственно времени по Гринвичу
getUTCDay() Возвращает день недели для указанного объекта
•
getUTCFullYearQ Возвращает четырехразрядный год для указанного
объекта Date соответственно времени по Гринвичу
getUTCHours() Возвращает час для указанного объекта Date соот-
ветственно времени по Гринвичу
getUTCMilliseconds() Возвращает миллисекунды для указанного объекта
getUTCMinutes() Возвращает минуты для указанного объекта Date со-
ответственно времени по Гринвичу
getUTCMonthQ Возвращает месяц для указанного объекта Date соот-
ветственно времени по Гринвичу
getUTCSeconds() Возвращает секунды для указанного объекта Date со-
getYear() Возвращает год для указанного объекта Date
parse(dateString) Возвращает число миллисекунд, прошедших с полу-
ночи (00:00:00) 1 января 1970 г. по местному времени
Таблица ПЗ.б. Продолжение
setDate(dateValue) Устанавливает день месяца для указанного объекта
Date
setFullYear(yearValue [, monthValue Устанавливает полный год для объекта Date
[, dateValue]])
setHours(hourValue) Устанавливает часы для объекта Date
setMilliseconds(millisecondValue) Устанавливает миллисекунды для объекта Date
setMinutes(minuteValue) Устанавливает минуты для объекта Date
setMonth(monthValue [, dateValue ]) Устанавливает месяц для объекта Date
setSeconds(secondValue) Устанавливает секунды для объекта Date
setTime(millisecondValue) Устанавливает время для указанного объекта Date
в миллисекундах
setUTCDate(dateValue) Устанавливает дату для указанного объекта Date со-
setUTCFullYear(yearValue [, Устанавливает год для указанного объекта Date соот-
monthValue [, dateValue]]) ветственно времени по Гринвичу
setUTCHours(hourValue [, Устанавливает час для указанного объекта Date соот-
minuteValue [, secondValue [, ветственно времени по Гринвичу
millisecondValue]]]))
setUTCMilliseconds(millisecondValue) Устанавливает миллисекунды для указанного объекта
setUTCMinutes(minuteValue [, Устанавливает минуты для указанного объекта Date
secondValue [, millisecondValue]])) соответственно времени по Гринвичу
setUTCMonth(monthValue [, Устанавливает месяц для указанного объекта Date
dateValue]) соответственно времени по Гринвичу
setUTCSeconds(secondValue [, Устанавливает секунды для указанного объекта Date
millisecondValue])) соответственно времени по Гринвичу
setYear(yearValue) Устанавливает год для указанного объекта Date соот-
ветственно показаниям часов компьютера, на кото-
ром выполняется Flash-проект
toGMTStringO Конвертирует объект в строку в согласии с GMT стан-
дартом Интернета
toLocaleString() Конвертирует объект в строку в согласии с местными
стандартами
toSource() Возвращает строку исходного кода для создания объ-
екта
toString() Метод возвращает строковое значение даты
toUTCStringQ Конвертирует объект в строку в согласии с универ-
сальными стандартами
UTC(yearValue, monthValue [, Возвращает число миллисекунд между полуночью
dateValue [, hourValue [, 1 января 1970 года по всемирному времени и момен-
minuteValue [, secondValue [, том, указанным в параметрах
millisecondValue >])
ValueOfQ Возвращает примитивное значение объекта
Примеры
• В данном примере создается объект theBigDay, которому сначала присваива-
ются значения методами set, а затем извлекаются методами get:
theBigDay - new DateO;
theBigDay.setFullYear(1999):
theBigDay.setDate(17);
theBigDay.setHours(22);
theBi gDay.setMi11i seconds(100):
theBi gDay.setMi nutes(10):
theBigDay.setMonth(6);
theBigDay. setSecondsOO):
day = theBigDay. getDateO:
weekday - theBigDay.getDayO:
yr = theBigDay.getFullYearO:
hours = theBigDay.getHoursO;
ms - theBigDay.getMillisecondsO:
minutes - theBigDay.getMinutesC);
month = theBi gDay. getMonthO:
sees - theBigDay.getSecondsO:
document.writelntyr. month, day. weekday, hours, minutes, sees, ms):
theBigDay = new DateC'July 1. 1999"):
sameAsBigDay = new DateO:
sameAsBigDay.setTime(theBigDay.getTimeO):
• Пример на определение часового пояса:
х - new Datet):
currentTimeZoneOffsetlnHours - x.getTimezoneOffset()/60;
• В следующем примере создается объект Today, которому сначала присваива-
ются значения методами set, а затем извлекаются методами get. В отличие от
предыдущего примера время учитывается по Гринвичу.
Today = new DateO;
Today.setUTCDateC03):
Today.setUTCFul!Year(2002):
Today.setUTCHourt17):
Today.setUTCMi11i seconds(500):
Today.setUTCMi nutes(03):
Today.setUTCMonth(09):
Today.setUTCSeconds(20):
d = Today. getUTCDateO:
weekday = Today.getUTCDayO;
yr = Today. getUTCFullYearO;
hrs = Today.getUTCHoursO;
ms = Today. getUTCMillisecondsO;
rain = Today.getUTCMinutesO:
raon • Today.getUTCMonthO:
sec = Today. getUTCSecondsO:
GMTString=Today.toGMTString();
LocaleStri ng=Today.toLocaleStri ng():
UTCstring = Today. toUTCStringO:
document.write!n(yr, mon, day. weekday, hrs. min. sec, ms):
document.writelntGMTString. LocaleString. UTCstring):
• Использование функции getYear
Xmas = new DateC"December 25. 1995 23:15:00"
year = Xmas. get Yea rO; // Возвращает 95
Xmas = new Datet"December 25. 2000 23:15:00"):
416 Приложение 3. JavaScript ,
year = Xmas.getYearO; // Возвращает 100

Xmas = new DateC"December 25. 1800 23:15:00"):
year • Xmas.getYearO: // Возвращает -100
IPOdate.setTime(Date.parse("Aug 9, 1995"));
Использование функции setYear
theBigDay.setYear(99); // Задает 1999
theBigDay.setYear(1999): // Задает 1999
theBigOay.setYear(2000): // Задает 2000
gmtDate = new Date(Oate.UTC(96. 11. 1. 0. 0. 0)):
x = new Date(56.6.17);
myVar=x.valueOf(): // assigns -424713600000 to myVar
Использование свойства prototype
var today = new DateO:
var birthday = new Date(99.06.17):
Date.prototype.descri pti on=nul1:
today.description-''Какой чудесный д е н ь ! ' " :
birthday.description-''День рождения Елисея":
После того как вы установили свойство с помощью prototype, все последующие объекты,
созданные на основе DateO, будут иметь данное свойство.
Объект Error
Объекты Error создаются браузером (пока только Internet Explorer 5.x) при воз-
никновении ошибок в процессе выполнения сценария и содержат информацию
об ошибке, которая может быть использована операторами обработки исключе-
ний. Свойства и методы объекта приведены в табл. П3.7, П3.8.
Таблица П3.7. Свойства объекта Error
description Текст сообщения об ошибке

name Название данного объекта. В системных объектах содержит
тип исключения:
EvalError — недопустимое обращение к функции eval
RaYigeError — числовое значение вне допустимого диапазона
ReferenceError — недопустимое значение ссылки
SyntaxError — синтаксическая ошибка
TypeError — несовместимость типов операндов
URIError — ошибка при работе с URI
number Номер ошибки
prototype Позволяет добавлять свойства ко всем объектам Error
Таблица П3.8. Методы объекта Error
new Error(number [, description]) Конструктор объекта Error

toStringQ Возвращает значение объекта в виде строки
Объект Function
Создание
new Function ([argl[, arg2[. ... argN]].] functionBody)
function name([param[. param[, ... param]]]) {
statements
Параметры
• argl, arg2, ..., argN — имена, которые будут использоваться функцией как фор-
мальные имена аргументов.
• functionBody — тело функции (последовательность функций и операторов).
• name — имя функции.
• param — имена аргументов функции (до 255 аргументов).
• statements — тело функции (последовательность функций и операторов).
Описание
Объект Function служит для создания собственной функции пользователя.
Свойства и методы объекта приведены в табл. П3.9, П3.10.
Таблица П3.9. Свойства объекта Function
arguments Массив, содержащий аргументы функции
arguments.callee Указывает исполняемую в данный момент функцию
arguments.caller Указывает функцию, которая вызвала функцию, испол-
няемую в данный момент
arguments, length Число аргументов функции
arity Число аргументов, полученных функцией
constructor Определяет конструктор функции
length Число аргументов, полученных функцией
prototype Позволяет создавать дополнительные свойства для функции
i
Таблица П3.10. Методы объекта Function
apply(thisArg[, argArray]) Позволяет применить метод одного объекта к другому
объекту
call(thisArg[, argl[, arg2[, ...]]]) Вызывает метод
toSourceQ Возвращает строку исходного кода для создания объекта
toStringO Метод возвращает строковое значение, представляющее
элементы в массиве
Примеры
• Создание функции:
var multiply = new FunctionC'x". "y". "return x * y");
14 Зак. 96
То же самое можно записать так:

function multiply(x.y) {
return x*y
}
• Примеры вложенных функций:
function addSquares (a,b) {
function square(x) {
return x*x
}
return square(a) + square(b)
}
• Использование методов:
function product(name, value) {
this.name - name:
if(value > 1000)
this.value = 999:
else
this.value - value;
}
function prodjjepttname. value, dept) {
this.dept = dept:
product.call(this, name, value):
}
prod_dept.prototype = new productО:
// так как 5 меньше 1000, значение будет 5
cheese - new prod_dept("feta". 5. "food"):
// так как 5000 больше 1000, значение будет 999
car = new prod_dept("honda", 5000. "auto"):
Ту же функцию prod_dept можно записать, используя метод apply:
function prod_dept(name. value, dept); {
this.dept = dept:
product.apply(product, arguments); // arguments относятся к текущему объекту
}
Объект Math
Встроенный объект, содержащий математические константы и функции. Свой-
ства и методы объекта Math приведены в табл. П3.11, П3.12.
Таблица П3.11. Свойства объекта Math
Е Константа Эйлера и основание натуральных логарифмов
LN10 Натуральный логарифм десяти
LN2 Натуральный логарифм двух
LOG2E Логарифм е по основанию 2
LOG10E Логарифм е по основанию 10
PI Число л — отношение длины окружности к ее диаметру
SQRT1_2 Квадратный корень из 1/2
SQRT2 Квадратный корень из 2
Таблица П3.12. Методы объекта Math
abs(x) Вычисляет абсолютное значение числа х

acos(x) Вычисляет арккосинус х
asin(x) Вычисляет арксинус х
atan(x) Вычисляет арктангенс х
atan2(y, x) Вычисляет угол от оси X до точки (х, у)
ceil(x) Округляет число х до большего целого
cos(x) Вычисляет косинус х
exp(x) Вычисляет экспоненту х
floor(x) Округляет число х до меньшего целого
log(x) Вычисляет натуральный логарифм х
max(x, y) Возвращает большее из двух целых чисел х и у
min(x, y) Возвращает меньшее из двух целых чисел х и у
pow(x, y) Возводит х в степень у
randomQ Возвращает псевдослучайное число между 0,0 и 1,0
round(x) Округляет х до ближайшего целого числа
sin(x) Вычисляет синус х
sqrt(x) Вычисляет квадратный корень х
tan(x) Вычисляет тангенс х
Примеры
• Примеры тригонометрических функций:
with (Math) {
а - PI * r*r:
у = r*sin(theta):
х = r*cos(theta):
function getAcosCx) {
return Math.acos(x)
}
• Получение случайного числа:
// Возвращаем случайное число между 0 и 1
function getRandomO {
return Math.randomO
}
Объект Number
Создание
new Number ( v a l u e )
Параметры
• val ue — численное значение создаваемого объекта.
Описание
Объект Number позволяет работать с числами. Свойства и методы объекта приве-
дены в табл. П3.13, П3.14.
Таблица П3.13. Свойства объекта Number

MAXJ/ALUE Константа, представляющая наибольшее выводимое число
MIN_VALUE Константа, представляющая наименьшее выводимое число
NaN Константа, представляющая не число (Not a Number, NaN)
NEGATIVEJNFINITY Константа, представляющая отрицательную бесконечность
POSITIVEJNFINITY Константа, представляющая положительную бесконечность
prototype Позволяет добавлять свойства ко всем объектам-числам
Таблица П3.14. Методы объекта Number
toExponential([fractionDigits]) Возвращает строковое представление числа в экспоненциаль-

ной форме. Параметр — число знаков после запятой (значение
по умолчанию — сколько потребуется)
toFixed([fractionDigits]) Возвращает строковое представление числа в обычном виде,
параметр — число знаков после запятой (по умолчанию — 0)
toPrecision([precision]) Возвращает строковое представление числа в обычном виде
с определенной точностью
toSource() Возвращает литеральное представление объекта
toStringQ Метод возвращает строковое значение
Примеры
• Примеры задания точности и вида числа:
van num=5.123456:
alertC'num.toPrecisionO is " + num.toPrecisionO): // Отображает 5.123456
alert("num.toPrecision(3) is " + num.toPrecision(3)); // Отображает 5.12
alert("num.toPrecision(l) is " + num.toPrecision(D): // Отображает 5
alertC'num.toFixedO is " + num.toFixedO): // Отображает 5.123456
alert("num.toFixed(4) is " + num.toFixed(4)): // Отображает 5.1234
alertC'num.toExponentiaK) is " + num.toExponentialO): // Отображает 5.123456е+0
alert("num.toExponential(3) is " +• num.toExponentialO)): // Отображает 5.123е+0
van bigNumber = Number.MAX_VALUE * 10:
if (bigNumber -= Number.POSITIVEJNFINITY)
fund О
else
func2():
Объект Object
Создание
new Object О
Описание
Прародитель всех объектов в JavaScript. Свойства и методы объекта Object при-
ведены в табл. П3.15, П3.16.
Таблица П3.15. Свойства объекта Object

prototype Позволяет добавлять свойства ко всем объектам
Таблица П3.16. Методы объекта Object
eval(string) Устаревшее. Вычисляет строку кода JavaScript в контексте объекта

toSourceQ Возвращает литеральное представление объекта
toStringQ Метод возвращает строковое значение, представляющее численное
значение
unwatch(prop) Снимает слежение за значением свойства prop
watch(prop, handler) Позволяет производить отладку, изменяет значение свойства prop
с помощью функции handler(prop, oldval, newval)
Примеры
• Сценарий выводит Pi=3,141592653589793.
Ob-new Object О:
Ob.p="Pi";
document.write(Ob.p);
Ob.pi=Math.PI;
document.write("="+0b.pi):
</SCRIPT>
Объект Reg Ex p
Создание
/pattern/flags
new RegExpC"pattern"[, "flags"])
Параметры
• pattern — текст регулярного выражения.
• f 1 ags — один или несколько флагов:
Q g — учитывать все возможные вхождения;
D i — игнорировать регистр символов;
D m — многострочный режим.
Объект содержит шаблон регулярного выражения. Позволяет производить по-

иск в тексте регулярных выражений. Свойства и методы объекта RegExp приве-
дены в табл. П3.17, П3.18.
Таблица П3.17. Свойства объекта RegExp
constructor Определяет функцию-конструктор регулярного выражения
global Учитываются или нет все возможные вхождения
ignoreCase Игнорируется или нет регистр символов
lastlndex Индекс, с которого начинается следующее вхождение
multiline Установлен или нет многострочный режим
prototype Позволяет добавлять свойства ко всем регулярным выражениям
source Текст шаблона
Таблица П3.18. Методы объекта RegExp
regexp.exec([str]) Производит поиск вхождений в указанной строке; результат — массив

regexp.test([str]) Производит поиск вхождений в указанной строке; результат — true
или false
toSourceQ Возвращает литеральное представление объекта
toStringO Метод возвращает строковое значение
Специальные символы
Значения специальных символов, используемых при создании регулярных вы-
ражений, приведены в табл. П3.19.
Таблица П3.19. Специальные символы
Символ Значение
\ Указывает, что следующий символ надо интерпретировать как специальный.
Например, /Ь/ означает букву b, a /\b/ означает пробел. Если за \ следует спе-
циальный символ, его надо интерпретировать как обычный: /а\*/ означает а*
Указывает, что следующий символ надо искать в начале строки или после пе-
ревода строки в многострочном режиме. Например, / А А/ нет в "an А", но есть
в "An A"
Указывает, что следующий символ надо искать в конце строки или до перевода
строки в многострочном режиме. Например, /t$/ нет в "eater", но есть в "eat"
Вхождение 0 или более раз. Например, выражение /bo*/ означает Ьоооо в "А
ghost booooed" и b в "A bird warbled", но его нет в "A goat grunted"
Вхождение 1 или более раз, эквивалентно записи {!,}. Например, выражение
/а+/ означает а в "candy" и все а в "caaaaaaandy"
Вхождение 0 или 1 раз. Например, /е?1е?/ означает el в "angel" и le в "angle"
Точка означает любой символ, за исключением символа новой строки. Напри-
мер, поиск выражения /.п/ выдаст an и on в "nay, an apple is on the tree", но не
найдет ничего в "nay"
Значение
Поиск выражения х и запоминание данного вхождения. Например, выражение
/(foo)/ будет найдено в "foo bar" и запомнено как foo. Запомненные вхождения
можно вызвать из элементов массива [1],..., [п] или свойств $1,..., $9 объекта
RegExp
Поиск вхождения х, при этом вхождение не запоминается
Вхождение х, но только если за ним следует у. Например, результат поиска вы-
ражения /Jack(?=Sprat)/ будет содержать Jack, только если за ним будет следо-
вать Sprat
Вхождение х, но только если за ним не следует у. Например, результат поиска
выражения /\d+(?!\.)/ не будет содержать цифру перед точкой
Означает х или у. Например, поиск выражения /green|red/ приведет к успеху
и в "green apple", и в "red apple"
Означает ровно п вхождений выражения. Например, выражение /а{2}/ не бу-
дет найдено в "candy", но будет найдено "caandy" и "caaandy"
Означает как минимум п вхождений выражения. Например, выражение /а{2}/
не будет найдено в "candy", но будет найдено "caaaaandy"
Означает, что вхождений должно быть не меньше п и не больше т. Например,
поиск выражения /а{1,3}/ в строке "cndy" не приведет к положительному ре-
зультату, а в строке "caaaaaaandy" найдет первые ааа
Означает любой из заключенных в скобки символов. Возможно использование
дефиса для обозначения диапазонов алфавита. Например, выражение [abed]
эквивалентно [а-с]
Означает любой из не заключенных в скобки символов. Возможно использова-
ние дефиса для обозначения диапазонов алфавита. Например, выражение
[Aabcd] эквивалентно [Ла-с]. Поиск выражения в "bra" приведет к нахождению г
Вхождение символа возврата каретки. Не путайте с \Ь
Пустое пространство между словами, например пробел. Не путайте с [\Ь]
Означает границу, но не между словами. Например, поиск /\w\Bn/ приведет
к нахождению оп в "noonday"
X — буква латинского алфавита. Означает управляющий символ в строке.
Например, /\сМ/ найдет Control-M
Цифра. Эквивалентно [0-9]
Не цифра. Эквивалентно [Л0-9]
Символ form-feed
Перевод строки (line feed)
Возврат каретки
Единичный пробел, а также символы tab, form feed, line feed.
Эквивалентно [ \f\n\r\t\uOOAO\u2028\u2029]
Любой символ, но не символ пустого пространства.
Эквивалентно [л \f\n\r\t\uOOAO\u2028\u2029]
Символ табуляции (tab)
Символ вертикальной табуляции
Любая буква или цифра. Эквивалентно [A-Za-zO-9J
Любой символ, но не буква и не цифра. Эквивалентно [AA-Za-zO-9J
Возвращает ссылку на последнее вхождение подстроки в n-х скобках
Означает символ NUL
Продолжение ^>
Символ Значение
\xhh Символ, записанный своим шестнадцатеричным кодом hh (2 шестнадцатерич-
ные цифры)
\uhhhh Символ с кодом hhhh (4 шестнадцатеричные цифры)
Примеры
• Функция testinput выясняет, содержит ли строка str регулярное выражение
re, и выводит результат:
function testinput(re. str){
if (re.test(str))
midstring = " contains ";
else
midstring - " does not contain ";
document.write (str + midstring + re.source);
}
• Определяем вхождения регулярного выражения, содержащего «d», затем не-
которое количество «Ь» и, возможно, одно «d». Результат заносится в массив
туАггау, регистр букв игнорируется:
myRe=/d(b+)(d)/ig;
туАггау = myRe.execC'cdbBdbsbz");
В результате туАггау будет содержать ["dbBd", "ЬВ", "d"]
Объект String
Создание
new String(string)
Описание
Объект String представляет набор символов в строке. Свойства и методы объек-
та приведены в табл. П3.20, П3.21.
Таблица П3.20. Свойства объекта String
constructor Определяет функцию-конструктор строки
length Длина строки
prototype Позволяет добавлять свойства ко всем строкам
Таблица П3.21. Методы объекта String
anchor(nameAttribute) Создает якорь, на который можно сослаться
big() Создает строку, отображаемую большим шрифтом. Эквивалентно
тегу <BIG>
blink() Создает мигающую строку. Эквивалентно тегу <BLINK>
boMQ Создает строку, отображаемую полужирным шрифтом. Эквива-
лентно тегу <BOLD>
charAt(index) Метод возвращает код символа, стоящего на месте index
charCodeAt(index) Метод возвращает код символа. Возвращаемое значение — 16-
разрядное целое число от 0 до 65 535
concat(valuel,... valueN) Метод объединяет указанные значения и возвращает новую строку
Fixed() Выдает строку моноширинным шрифтом. Эквивалентно тегу <ТТ>
Fontcolor(color) Указывает цвет шрифта. Эквивалентно <FOINT COLOR=color>
fontsize(size) Указывает размер шрифта. Эквивалентно <FONT size=size>
fromCharCode(cl,c2,...cN) Метод возвращает строку, составленную из символов, указанных
в параметрах
indexOf(value) Метод находит строку и возвращает позицию первого указанного
indexOf (value, start) значения. Если значение не найдено, метод возвращает -1
italicsQ Выдает строку курсивом. Эквивалентно тегу <1>
Iastlndex0f(substring) Метод находит строку и возвращает индекс последней позиции
Iastlndex0f(substring, substring, найденной в пределах вызываемой строки. Если под-
start) строка не найдена, метод возвращает -1
link(hrefAttribute) Создает ссылку на URL

match(regexp) Производит поиск вхождений регулярного выражения regexp
в строке
replace(regexp, Производит поиск и замену регулярного выражения regexp в строке
newSubStr)
replace(regexp, function)
search(regexp) Производит поиск вхождений регулярного выражения regexp
в строке
slice(start, end) Метод извлекает подстроку указанного объекта String и возвраща-
ет ее как новую строку без изменения первоначального объекта.
Возвращенная строка включает символ start и все символы до
символа end, не включая его
split(delimiter) Метод разбивает объект String, разделяя строку везде, где нахо-
дится указанный в качестве параметра разделитель, и возвращает
подстроки в массиве. Если разделитель не определен, возвращен-
ный массив содержит только один элемент — собственно строку.
Если разделитель — пустая строка, каждый символ в объекте
String становится элементом в массиве
strikeQ Эквивалентно тегу <STRIKE>
Sub() Переводит строку в надстрочный индекс, эквивалентно тегу SUB
substr(start, length) Метод возвращает подстроку начиная с start длины length
myString.substring(from, Метод возвращает подстроку, состоящую из символов между по-
to) зициями, указанными параметрами from и to
SupQ Переводит строку в подстрочный индекс. Эквивалентно тегу
<SUP>
myString.toLowerCase() Метод возвращает копию строки String со всеми символами в ниж-
нем регистре
toSource() Возвращает литеральное представление объекта
toStringO Метод возвращает строковое значение
myString .tollpperCaseQ Метод возвращает копию String со всеми символами в верхнем ре-
гистре
Примеры
• Пример вывода текста с разным оформлением при помощи методов объекта
String:
var myString="TABLE of Contents";
msgWindow=window.open():
msgWindow.document.write!n(myString.anchor("contents_anchor")):
var worldString="Hello, world";
document,write(worldString.smal1()):
document .write("<P>" + worldString.bigO):
document.write("<P>" + worldString.fontsize(7));
document.wri te(worldStri ng.bli nk());
document.write("<P>" + worldString.boldO);
document.write("<P>" + worldString.italicsO):
document.write("<P>" + worldString.strikeO):
var anyString="Brave new world":
document.write("<P>" "The character at index 0 is " + anyString.charAt(O)):
document.write("<P>" "The character at index 1 is " + anyString.charAt(D);
document.write("<P>" "The character at index 2 is " + anyString.charAt(2)):
document.wri teC"<P>" "The character at index 3 is " + anyString.charAt(3)):
document.write("<P>" "The character at index 4 is " + anyString.charAt(4));
Функции и свойства верхнего уровня

В данном разделе представлены свойства и функции верхнего уровня
(табл. П3.22, П3.23).
Таблица П3.22. Свойства верхнего уровня
Infinity Представление бесконечности

NaN Константа «He-число»
undefined Константа «Значение не определено»
Таблица П3.23. Функции верхнего уровня
Функция Описание
boolean (object) Преобразует аргумент в логическое значение
decodeURI(encodedURI) Декодирует адрес (URI), закодированный функцией
encodeURI
decodeURIComponent(encodedURI) Декодирует компонент URI, закодированный функцией
encodeURIComponent(uri)
Функция Описание
encodeURI(uri) Кодирует адрес, заменяя каждый символ одним, двумя

или тремя символами из набора UTF-8
encodeURIComponent(uri) Кодирует компонент адреса, заменяя каждый символ
одним, двумя или тремя символами из набора UTF-8
escape(string) Кодирует строку, заменяя каждый символ одним,
двумя или тремя символами из набора ASCII
eval(string) Исполняет строку JavaScript-кода
isFinite (number) Определяет, конечен ли аргумент
isNaN (number) Определяет, что аргумент не число
number (obj) Преобразует указанный объект в число
objectQ Преобразует аргумент в объект
parseFloat (string) Разбирает строку как число с плавающей точкой
parselnt (string[, radix]) Разбирает строку как целочисленное число
scriptEngineQ, Функции работают только в IE, показывают работаю-
ScriptEngineBuildVersion(), щий сценарий и версию JavaScript
ScriptEngineMajorVersionQ,
ScriptEngineMinorVersionQ
string (obj) Преобразует указанный объект в строку
unescape(string) Декодирует строку, закодированную функцией escape
unwatch(property, funcHandler) Функция отключает слежение за указанным свойством,
используется только NN при отладке сценариев
watch(property, funcHandler) Функция включает слежение за указанным свойством,
используется только NN при отладке сценариев
Примеры
• Преобразование строк в числа:
parseFloat("3.14"):
parseF1oat("314e-2");
parseF1oat("0.0314E+2"):
var x = "3.14";
parseFloat(x):
parseF1oat("FF2"); // Результат - NaN
parselntC'F". 16):
parselnt("15", 10);
parseInt("FXX123", 16);
parselntrilll". 2):
parselntC'Hello". 8): // Результат - NaN
• Пример функций, приводящих дату к строковому и числовому виду:

D = new Date (430054663215);
alert (String(D));
evaKnew String("2+2")); // Возвращает объект String, содержащий "2+2"
eval("2+2"): // Возвращает 4
floatVa1ue=parseFloat(toFloat) :
if (isNaN(fioatValue)) {
notFloatO:
} else {
IsFloatO:
}
d = new Date ("December 17, 1995 03:24:00");
alert (Numbered)):
// Будет выведено "819199440000."
Операторы JavaScript
В этом разделе перечислены операторы языка JavaScript: операторы управления
(табл. П3.24), арифметические операторы (табл. П3.25), операторы сравнения
(табл. П3.26), присваивания (табл. П3.27), логические (табл. П3.28), поразряд-
ные (табл. П3.29), а также некоторые другие операторы и ключевые слова
(табл. ПЗ.ЗО).
Таблица П3.24. Операторы управления
Оператор Описание
break [label] Прерывает текущий цикл, оператор switch
или выражение за меткой label и передает
управление выражению за границей цикла
const constname [= value] [..., constname [= Определяет константу только для чтения
value] ]
continue [label] Прерывает текущий цикл или выражение
label и передает управление выражению
за границей цикла
do {statements} Выполняет действия statements пока не бу-
while (condition); дет выполнено условие condition
export namel, name2,..., nameN Позволяет экспортировать сценарий
export *
for ([initial-expression]; [condition]; Выполняет действия statements и increment-
[increment-expression]) expression пока не будет выполнено условие
{statements } condition
for (variable in object) Выполняет действия statements для всех
{ statements } свойств объекта object
function name([param] [, param] [..., param]) Позволяет создать функцию пользователя
{statements}
if (condition) {statements!} [else { Проверяет условие condition: если оно ис-
statements2 }] тинно — выполняется statements!, если
нет — statements2
import objectName.namel, Позволяет импортировать сценарий
objectName.name2,..., objectName.nameN
import objectName.*
label: Метка, позволяющая установить идентифи-
катор для перехода к ней
return expression Определяет выражение expression как ре-
зультат работы функции
switch (expression) Позволяет создать множественное сравне-
{ case labell: statements!; break; ние expression со значениями, указанными
в label
case Iabel2: statements2; break;
default: statementsN; }
throw expression; Создает определенное пользователем ис-
ключение
try { statements } Определяет блок выражений, которые надо
[catch (exception_var if expression) выполнить, если не произойдет исключения
{statements}]
[catch (exception_var) {statements}]

[finally {statements}]
var varname [= value] [..., varname [= value] ] Инициализирует переменную
while (condition) Выполняет действия statements, пока верно
{statements} условие condition
with (object){statements} Выполняет действия statements с указанным
объектом object
Примеры
• Использование циклов while и for:
const a = 7;
van num_hits - 0. custjio - 0:
function testBreak(x) {
var i = 0:
while Ci < 6) {
if (i — 3)
break :
return i*x:
}
for (var i = 0; i < 9: i++) {
n += i ;
myfunc(n);
i =0;
n - 0:
while (i < 5) {
if (i == 3)
continue:
n +» i:
Использование оператора return:

function calc_sales(units_a. units_b, units_c) {
return units_a*79 + units_b*129 + units_c*699
Использование оператора switch:

switch (i) {
case "Oranges" :
document. write( "Oranges are $0.59 a pound. <BR>");
break:
case "Apples" :
document. writeC'Apples are $0.32 a pound. <BR>"):
break:
case "Bananas" :
document. write( "Bananas are $0.48 a pound. <BR>"):
break:
case "Cherries" :
document. write( "Cherries are $3.00 a pound. <BR>");
break:
default :
document. write ("Sorry. we are out of " + i + ".<BR>");
)
document. writeC'Is there anything else you'd like?<BR>"):
Использование операторов try и catch, замена номера месяца на строковый
эквивалент и обработка исключений:
function getMonthName (mo) {
mo=mo-l; // Так как в массиве месяцы имеют индекс от 0 до 11
var months-new Array ("Jan" , "Feb" . "Mar" . "Apr" . "May" . "Jun" . "Jul " .
" Aug " , " Sep" . "Oct " . " Nov " . " Dec " ) ;
if (months[mo] != null) {
return months [mo]:
} else {
myUserExcepti on=new UserExcepti on( " Inval i dMonthNo" ) :
throw myUserExcepti on:
}
try {
// statements to try
monthName=getMonthName(myMonth);
}
catch (e) {
monthName="unknown" :
logMyErrorste. message. e. name): // передаем исключение обработчику ошибок
Таблица П3.25. Арифметические операторы
expression 1 % expression2 Оператор вычисляет остаток от деления параметра
expression! на параметр expression2
expression 1 * expression2 Оператор перемножает два числовых выражения.
expression 1 + expression2 Оператор прибавляет числовые значения или конкатени-
рует (объединяет) символьные. Если один из парамет-
ров — строка, другой параметр конвертируется в символь-
ное значение, и оба значения объединяются
++expression Префиксный или постфиксный оператор инкремента, кото-
expression++ рый прибавляет 1 к параметру expression. Префиксная
форма оператора прибавляет 1 до возвращения результа-
та, постфиксная форма — после
-expression Оператор используется для присваивания отрицательного

expression 1 - expression2 значения или вычитания
--expression Префиксный или постфиксный оператор декремента, кото-

expression- рый вычитает 1 из параметра expression. Префиксная фор-
ма оператора вычитает 1 из параметра до возвращения
результата, постфиксная форма — после
expression 1 / expression2 Оператор делит параметр expression! на expression2
Таблица П3.26. Операторы сравнения
expression 1 < expression2 Оператор сравнивает параметры. Если expressionl меньше

expression2, возвращается true, если нет — false. Тексто-
вые значения сравниваются по числу символов в строке
expression 1 <= expression2 Оператор сравнивает два параметра, если expressionl
меньше expression2 или равен ему, возвращает значение
true, а нет — false
expression 1 != expression2 Если параметр expressionl равен параметру expression2,
результат равен false. Числа, символьные и логические
значения сравниваются по значению; переменные, объек-
ты, массивы и функции сравниваются по содержанию
expression 1 == expression2 Оператор проверяет два выражения на равенство. Если
выражения равны, результат равен true. Числа и логиче-
ские значения сравниваются по значению и признаются
равными, если они имеют равные значения. Две строки
равны, если они имеют одинаковое количество символов.
Переменные, объекты, массивы и функции сравниваются
по содержанию. Две переменные равны, если они ссыла-
ются на один и тот же объект, массив или функцию. Два
разных массива никогда не признаются равными, даже
если они имеют одинаковое число элементов
expression 1 !== expression2 Оператор проверяет два выражения на неэквивалентность
типов
expression 1 === expression2 Оператор проверяет два выражения на равенство типов
expression 1 > expression2 Оператор сравнивает два выражения, и если expressionl
больше параметра expression2, результат равен true, если
меньше или равен — false.
expression 1 >= expression2 Оператор сравнивает два параметра и, если expressionl
больше или равен параметру expression2, результат равен
true, если меньше — false
Таблица П3.27. Операторы присваивания
expressionl %= expression2 Оператор присваивает expressionl результат

expressionl%expression2
Продолжение *?
expression I &= expression^ Оператор назначает expressionl значение поразрядной

конъюнкции expressionl и expression2
expression 1 *= expression2 Оператор присваивает expressionl результат
expression I *expression2
expression 1 += expressionZ Оператор присваивает expressionl результат выполнения
expression I+expression2
expression 1 -= expression2 Оператор присваивает expressionl результат expressionl-
expression2
expression 1 /= expression2 Оператор присваивает expressionl результат
expression l/expression2
expression 1 «= expression2 Оператор исполняет поразрядную операцию сдвига влево
и присваивает результат параметру expressionl
expression 1 =» expression2 Оператор выполняет поразрядную операцию сдвига впра-
во и присваивает результат параметру expressionl
expression 1 >»= expression2 Оператор выполняет поразрядную операцию сдвига впра-
во без сохранения знака и присваивает результат парамет-
ру expressionl
expression 1 A = expression2 Оператор присваивает expressionl значение выражения
expression IAexpression2
expressionl |= expression2 Оператор присваивает expressionl результат
expression 11 expression2
Таблица П3.28. Логические операторы
! expression Оператор инвертирует логическое значение expression

expressionl && expression2 Оператор выполняет операцию конъюнкции
(логическое «и»)
expressionl || expression2 Результат равен true, если один или оба параметра равны
true; результат равен false, только если оба параметра
равны false
Таблица П3.29. Поразрядные операторы
expressionl & expression2 Оператор конвертирует параметры expressionl

и expression2 к 32-разрядным целым числам без знака
и выполняет логическую операцию конъюнкции на каждом
бите
expressionl « expression2 Оператор конвертирует параметры в 32-разрядные целые
числа и сдвигает все биты в expressionl влево на количе-
ство разрядов, указанных expression2. Разрядные позиции,
которые освобождаются в результате этой операции, за-
полняются нулями. Сдвиг на один разряд эквивалентен
умножению на 2
expression I » expression^ Оператор конвертирует параметры в 32-разрядные целые

числа и сдвигает все биты в expression 1 вправо на число
разрядов, указанных expression2. Биты, сдвинутые вправо,
отбрасываются. Биты слева заполняются значением стар-
шего бита. Сдвиг вправо на один разряд эквивалентен де-
лению на 2 без остатка
expression 1 >» expression2 Оператор напоминает оператор сдвига вправо » за ис-
ключением того, что он не сохраняет знак первоначально-
го выражения, потому что биты слева всегда заполняются
нулями
A
expression 1 expression2 Оператор конвертируют параметры в 32-разрядные целые
числа без знака и для каждого бита выполняет исключаю-
щую дизъюнкцию
expression 1 | expression2 Оператор конвертирует параметры 32-разрядные целые
числа без знака и для каждого бита выполняет дизъюнк-
цию
~ expression Оператор конвертирует выражение в 32-разрядное целое
число без знака, затем инвертирует биты. Или, говоря про-
ще, изменяет знак числа и вычитает 1
Таблица ПЗ.30. Другие операторы и ключевые слова
Выражение Значение
expression I ? expression2 : Если expressionl равно true, возвращается значение
expressions expression2, в противном случае — значение expressions
exprl, expr2 (запятая) Разделяет два выражения
II Указывает начало комментария
I* многострочный коммента- Определяет комментарий
рий */
delete objectName Удаляет объект, свойство или элемент
delete objectName.property
delete objectNamepndex]
delete property // legal only
within a with statement
{var | const} variableName = Определяет анонимную функцию
function(parameters)
{functionBody}
propNameOrNumber in Возвращает true, если указанное свойство есть у данного
objectName объекта
objectName instanceof Возвращает true, если объект принадлежит указанному типу
objectType
objectName = new objectType Создает экземпляр объекта, принадлежащего типу, опре-
(paraml [,param2] деленному пользователем
...[,paramN])
This[.propertyName] Ключевое слово, ссылается на текущий объект
typeof( expression) Результат — строка, определяющая тип выражения (стро-
• ка, клип, объект или функция)
void(expression) Оператор возвращает неопределенное значение
Примеры
• Использование ключевого слова this:
function car(make, model, year) {
this.make - make:
this.model = model:
this.year - year:
}
• Использование оператора delete:
mycar - new carC'Eagle". "Talon TSi". 1993):
"make" in mycar; // возвращает true
delete mycar: // возвращает true
• Использование логических операторов и оператора сравнения:

function validatetobj. lowval. nival) {
if ((obj.value < lowval) || (obj.value > nival))
alertC'Invalid Value!");
}
• Использование оператора i nstanceof:
theDay=new Date(1995, 12. 17);
if (theDay instanceof Date) {
// исполняемые выражения
}
• Использование анонимной функции:
var x - function(y) {return y*y}:
Объекты HTML
Как уже не раз говорилось, разные браузеры по-разному поддерживают DOM.
Многие свойства объектов в Netscape Communicator 6 не поддерживают дина-
мического обновления, а в Internet Explorer могут иметь свой формат значе-
ния или вызова. В каждом конкретном случае проверяйте работоспособность
свойств и методов. В книгу не вошли описания свойств и методов, общих для
всех HTML-элементов и необходимых для поддержки DOM.
Под HTML-элементом или просто элементом в этом разделе будет подразумеваться объект,
представляющий собой содержание HTML-страницы, заключенное между соответствующи-
ми тегами. Например, элемент Body представляет собой тело документа и содержит все,
что расположено между тегами <BODY>.
Объект Document
Объект Document представляет собой файл HTML, загруженный в окно или фрейм.
Все ссылки на элементы документа должны включать ссылку на родительский
объект Document.
Свойства и методы объекта Document приведены в табл. П3.31, П3.32. В табли-
це ПЗ.ЗЗ приведены динамические коллекции, содержащие все элементы доку-
мента.
Таблица П3.31. Свойства объекта Document
activeElement Ссылка на объект, который в настоящее время имеет фокус в доку-
менте
alinkColor Цвет активной ссылки. Internet Explorer 4 и DOM имеют параллель-
ное свойство aLink объекта Body
bgColor Цвет фона страницы в шестнадцатеричной нотации
charset Набор символов, используемых для компиляции текущего документа
Internet Exlorer
characterSet Набор символов, используемых для компиляции текущего документа
Netscape Communicator 6
cookie Свойство позволяет обращаться к файлу cookie
defaultCharset Набор символов, используемых для компиляции текущего документа
по умолчанию
designMode Свойство указывает, будут ли компоненты браузера (IE5) использо-
ваться для редактирования HTML-кода
doctype Свойство возвращает объект DocumentType, содержащий описание
формата данных в документе, согласно DTD
documentElement Свойство возвращает ссылку на объект document как на HTML-эле-
мент
domain Имя сервера, который обслуживает документ
expando Логическое свойство, устанавливающее, можно ли создавать новые
свойства объекту document; действует только в текущем документе
fgColor Цвет текста документа
FileCreateDate Даты создания документа
fileModifiedDate Дата изменения файла документа
fileSize Размер файла в байтах
height Высота в пикселах текущего окна или фрейма. В IE высота управля-
ется свойством document.body.scrollHeight
implementation Свойство поддерживает метод hasFeatureQ, который позволяет
определить версию языка разметки (HTML или XML).
Синтаксис: document.implementation.hasFeature()
lastModified Дата последнего изменения документа
linkColor Цвет гипертекстовой ссылки
location URL текущего документа. В отличие от window.location.href измене-
ние свойства не приводит к переходу к новому документу.
Чтобы избежать путаницы, лучше использовать свойство
document.URL
media Свойство позволяет браузерам назначать отдельные стили для каж-
дого типа устройства вывода
mimeType Тип MIME, но записанный не в традиционном формате
namespaces Свойство возвращает массив всех объектов namespace, определен-
ных в текущем документе
parentWindow Возвращает ссылку на родительский объект window
protocol Свойство используется только в IE и определяет версию протокола,
с помощью которого осуществился доступ к текущему документу
(например, Hypertext Transfer Protocol)
readyState Возвращает текущее состояние загрузки документа. Возвращаемое
значение (как строки): complete, interactive, loading, uninitialized
referrer Возвращает URL страницы (как строку), с которой посетитель при-
был на текущую
security Свойство указывает информацию о типе защиты, если таковая име-
ется в текущем документе
selection Возвращает выделенный объект
Title Ссылается на элемент TITLE, заголовок документа
URL URL текущего документа. В отличие от window.location.href измене-
ние свойства не приводит к переходу к новому документу
URLUnencoded Значение свойства эквивалентно инструкции
unescape(document.URL)
vlinkColor Цвет посещенной гипертекстовой ссылки
width Ширина окна документа. В IE необходимо использовать свойство
document.body.scrollWidth
Таблица П3.32. Методы объекта Document
clear() Удаляет текущий документ из окна или фрейма
close() Закрывает поток записи документа, проводимой мето-
дами document.writeQ или document.writeln ()
createAttribute("AttributeName") Создает атрибут и возвращает ссылку на него
createElement("tagName") Создает образец объекта, связанного с тегом tagName
createStyleSheet(["url"[, index]]) Создает и добавляет в документ новую таблицу сти-
лей. URL — адрес файла таблицы стилей. Index — ин-
декс в коллекции stylesheets
createTextNode("TeKcr") Создает текстовый узел, который можно затем встро-
ить в HTML-элемент
elementFromPoint(x, y) Возвращает ссылку на объект, покрывающий пиксел с
координатами х и у параметрами, если элементов не-
сколько — возвращается элемент с самым высоким
значением zlndex (самый верхний)
execCommand("commandName"[, Метод позволяет обратиться к командам ActiveX в IE
UIFIag[, value]])
getElementById("identifier") Метод возвращает ссылку на элемент в документе с
идентификатором identifier. Рекомендуется использо-
вать в NN6, а в IE5+ использовать коллекцию
document.all
getElementsByName("name") Метод возвращает ссылку на элемент в документе с
именем name
open("MIMEType"[, "replace"]) Открывает поток для записи в текущее окно или фрейм
write("string") Открывает новый выходной поток и записывает string
в окно или фрейм
writeln("string") Открывает новый выходной поток и записывает string
в окно или фрейм, добавляя в конец перевод строки
Таблица ПЗ.ЗЗ. Динамические коллекции
Коллекция Описание Синтаксис
АН Коллекция всех элементов document.all[ID]

HTML, доступ к объекту воз- document.all(ID, [index])
можен благодаря присвоению
значения атрибуту ID
anchors[ ] Массив всех якорей в поряд- document.anchors[index].
ке следования в текущем до- objectPropertyOrMethod
кументе (начиная с 0)
applets[ ] Возвращает массив всех ап- document.appletsfindex].
плетов в текущем документе objectPropertyOrMethod
classes[ ] Коллекция классов таблиц [document.]classes.className.
стилей stylePropertyName
embedsf ] Массив всех внедренных объ- document.embeds(index).
ектов (элементы EMBED) objectPropertyOrMethod
forms[ ] Массив всех форм (элементы document.forms[index].objectPropertyOrMethod
FORM)
framesf ] Массив всех объектов IFRAME document.frames(index).
в текущем документе objectPropertyOrMethod
images[ ] Возвращает массив всех изо- document.images[index].
бражений (IMG элементы) objectPropertyOrMethod
layers[ ] Массив слоев, содержащихся document.images[index].
в текущем документе. Только objectPropertyOrMethod
NN4
links[ ] Возвращает массив всех объ- document.links[index].objectPropertyOrMethod
ектов-ссылок
pluginsf ] Массив всех plug-in documentplugins(index).
objectPropertyOrMethod
scripts[ ] Массив всех объектов SCRIPT document.scripts(index).
в текущем документе objectPropertyOrMethod
styleSheets[ Массив всех объектов табли- document.styleSheets(index).
цы стилей в текущем доку- objectPropertyOrMethod
менте
tags[ ] Коллекция типов tag в CSS [document.]tags.tagName.stylePropertyName
Примеры
• Использование различных методов объекта Document:
var currObj = document.activeElement:
document.alinkColor = "green";
document.bgColor = "yellow":
document.body.leftMargin = 15;
if (document.charset — "csIS05427Cyrillic") { process for Cyrillic charset };

if (document.characterSet -- "csIS05427Cyrillic") { process for Cyrillic charset };
document.defaultCharset - "csIS05427Cyrillic":
document.domain - "megaCorp.com";
document.expando - false:
document.fgColor - "darkred";
document.write(document.lastModifled):
document.1ink Color= "#OOFFOO";
document.location - "products/widget33.html";
var siblingCount - document.parentWindow.frames.length;
van newAttr - document.createAttrtbuteC"width"):
newAttr.nodeValue = "80*":
document.getElementById("myTable").setAttributeNode(newAttr):
var newText - document.createTextNodet"Строка текста..."):
var newElem - document.createElementC'P");
newElem.id = "newest?";
newElem.appendChi1d(newText):
document.body.appendChi1d(newElem);
function show_layer(x):
// Функцию можно использовать для показа слоя, например меню
{ if(document.layers) document.layers[x].visibility="show";
else document.al1[x].style.visibi1ity="vi si Ыe";
}
function hide_layer(x)
// Функцию можно использовать для скрытия слоя
{i f(document.1ayers) document.1ayers[x].vi si bi1ity-"hide":
else document.all[x].style.visibility-"hidden":
}
Объект Window
Объект Window представляет собой окно браузера или фрейм, в котором отобра-
жено содержание документа. Он играет ключевую роль при обращении к объек-
там, расположенным в других окнах.
В данном разделе выборочно приведены некоторые полезные свойства и методы
объекта Window (табл. П3.34, П3.35).
Таблица П3.34. Свойства объекта Window
closed Логическое свойство, показывающее, закрыто ли окно

defaultStatus Сообщение в строке состояния окна браузера, заданное по умолчанию
document Объект document, загруженный в браузер или фрейм
event Пользовательское или системное событие
frames Массив указателей на вложенные фреймы
history Объект history текущего окна или фрейма
innerHeight, Размеры в пикселах (высота и ширина) области содержания (только NN)
innerWidth
length Число фреймов, вложенных внутрь текущего окна, совпадает со значени-
ем window.frames.length
location URL документа-содержания окна. Чтобы переместиться к другой странице,

необходимо назначить новый адрес свойству location.href
name Имя, связанного фрейма или окна. Первичное окно браузера по умолча-
нию не имеет имени
navigator Ссылка на объект navigator
opener Ссылка на объект window (или frame), который открыл текущее окно
методом window.openQ
outerHeight Размер в пикселах (высота и ширина) окна браузера или фрейма, вклю-
outerWidth чая все элементы интерфейса окна (только NN)
pageXOffset Размер прокрученной области страницы (в пикселах (только NN))
pageYOffset
parent Возвращает ссылку на родительский объект window
returnValue Значение, которое будет возвращено главному окну, когда IE закроет мо-
дальное диалоговое окно (см. метод showModalDialog)
screenLeft, Расположение в пикселах относительно верхнего левого угла монитора
screenTop клиентской области окна браузера (область содержания HTML-страницы)
screenX, Координаты внешней границы окна (NN 6)
screenY
scrollX, scrollY Положение горизонтальной и вертикальной полос прокрутки окна в пик-
селах (NN 6)
self Ссылка на текущее окно или фрейм
status Текст в строке состояния окна браузера
top Ссылка на окно браузера
window Значение свойства window совпадает с объектом window. Введено для эк-
вивалентности инструкций window.cBoncTBO_MeTOfl и свойство_метод
Таблица П3.35. Методы объекта Window
alert(message) Открывает диалоговое окно с сообщением message и кнопкой,

позволяющей закрыть окно
back() Отправляет на предыдущую страницу в списке хронологии окна
или фрейма (аналогично действию кнопки Назад браузера)
blur( ) Удаляет фокус из окна и генерирует событие onBlur
clearlnterval(intervallD) Выключает цикл intervallD (см. setlnterval)
clearTimeout(timeoutlD) Выключает задержку времени timeoutID (см. setTimeout)
close() Закрывает текущее окно
confirm(message) Открывает диалоговое окно с сообщением message и двумя
кнопками: Cancel и ОК
createPopup() Создает всплывающее окно в памяти браузера, затем получен-
ную ссылку можно использовать для отображения, позициони-
рования и заполнения содержимым
execScript(expressionl_ist Выполняет инструкции expressionList (список с разделителем

[, language]) точка с запятой) на любом языке сценариев, поддерживаемом
браузером
find(searchString [, Ищет в основном тексте документа строку searchString;
matchCasef, matchCase — чувствительность к регистру, searchUpward — на-
searchUpward]]) правленность вверх
focus() Передает фокус окну и генерирует событие onFocus (в IE)
forward() Отправляет на предыдущую страницу в списке хронологии окна
или фрейма (аналогично действию кнопки Вперед браузера)
home() Перемещается на домашнюю страницу браузера
moveBy(deltaX, deltaY) Изменяет местоположение окна на указанные пикселы
moveTo(x, y) Переносит местоположение текущего окна в определенную точ-
ку координат
open(URL, windowName[, Открывает новое окно (без закрытия первоначального)
windowFeatures])
print() Начинает процесс печати окна или фрейма, действие аналогич-
но работе кнопки Печать или одноименной команды меню Файл
prompt(message, Открывает диалоговое окно с сообщением message, полем вво-
defaultReply) да и двумя кнопками: Cancel и ОК. После щелчка на кнопке
Cancel возвращается значение null, на кнопке ОК — введенная
в поле ввода строка
resizeBy(deltaX, deltaY) Изменяет размер окна на указанное количество пикселов
resizeTo(x, y) Задает высоту и ширину окна в пикселах. Двигаются нижние
и правые грани
scroll(x, y) Прокручивает документ до позиции (х, у). Чтобы возвратить доку-
мент в положение по умолчанию — установите оба параметра на О
scrollBy(deltaX, deltaY) Прокручивает документ на (deltaX, deltaY)
setlnterval(expression, Выполняет выражение expression каждые msecs секунд. Метод
msecs[, args | language]) возвращает номер, который можно использовать в качестве па-
раметра IntervallD в методе clearlnterval(), чтобы остановить
выполнение цикла
setTimeout(expression, Выполняет выражение expression через msecs. Метод возвраща-
msecsf, args | language]) ет номер, который можно использовать в качестве параметра
timeoutID метода clearTimeoutQ
showModalDialog(URL[, Отображает модальное диалоговое окно. Используйте свойства
argumentsf, features]]) DialogArguments, dialogHeight, dialogWidth, dialogLeft, dialogTop
для задания размеров окна
stop() Останавливает загрузку внешних данных, действие аналогично
работе кнопки браузера Стоп
Примеры
• Использование различных методов объекта Window:
var theBrowser = navigator.appName;
if (top != self) top.location = location:
opener.document.forms[0].importedData.value = document.forms[0].entry.value;
parent.frames[2].document.forms[2].message.value = "Ура!";
van userName = showModalDialogC'userNamePrompt.html"):
window.returnValue = window.document.forms[0].userName.value:
if (confirm("Reset the entire form?")) { document.forms[0].reset( ) }
window.execScriptC'var x = 3: alert(x * x)")
Использование метода prompt:
те55аде="Привет! Как'тебя зовут?":
defaultReply="Bacfl?";
newMessage=prompt(message, defaultReply):
alert(newMessage):
Объект Body
Объект Body отражает HTML-элемент <BODY>. Для обращения к элементу можно
использовать свойство document.body, а не только document.alI .elementlD. Особую
роль данный объект играет в Internet Explorer 4, и его свойства в полной мере
поддерживаются только браузером от Microsoft.
Свойства объекта Body приведены в табл. П3.36.
Таблица П3.36. Свойства объекта Body

accessKey Указание клавиши, служащей для передачи фокуса элементу

a Link Цвет нажимаемой гипертекстовой ссылки
background Адрес фонового изображения
bgColor Цвет фона страницы
bgProperties Свойство, устанавливающее, остается ли фоновое изображение
неподвижным (значение fixed) или прокручивается вместе с со-
держанием страницы
BottomMargin Нижнее поле страницы
clientHeight, clientWidth Высота и ширина страницы в пикселах
clientLeft, clientTop Положение клиентской области документа
LeftMargin Левое поле страницы
link Цвет непосещенной гипертекстовой ссылки
noWrap Отсутствие автопереноса строк
rightMargin Правое поле страницы в пикселах
scroll Отображает ли окно (или фрейм) полосы прокрутки в случае
необходимости
scrollHeight, scrollWidth Высота и ширина полос прокрутки
scrollLeft, scrollTop Размер прокрученной области
tablndex Индекс элемента в последовательности перехода фокуса по кла-
више Tab
text Цвет текста документа
topMargin Ширина в пикселах верхнего поля страницы
vLink Цвет посещенной гипертекстовой ссылки
Примеры
• Изменение вида документа с помощью методов объекта Body:
document.body.background = "images/watermark.jpg";
document.body.1ink - "IOOFFOO";
document.body.text - "darkred";
document.body.scroll Top = 40;
document.body.leftMargin = 16;
Работа с разными браузерами

Если вы хоть немного поработали с JavaScript, то наверняка поняли, что очень
многие операторы и функции по-разному работают в разных браузерах. По этой
причине большинство сценариев содержит в начале кусок кода, в котором опре-
деляется браузер. Так как реально нас интересует не сама версия обозревателя,
а работоспособность отдельных объектов и свойств, то разумно проверять имен-
но их наличие. Такой код будет выглядеть примерно так:
// Браузеры, поддерживающие DOM
// (Internet Explorer 5+. Netscape 6. Opera 5+):
1sDOM=document.getElementById;
// Microsoft Internet Explorer 4+
isMSIE=document.all && document.all;
// Netscape 4.*
i sNetscape4=document.1ayers:
// Opera
i sOpera-wi ndow.opera;
// Opera 5+
1sOpera5=isOpera && isDOM:
// Internet Explorer 5+
isMSIE5=isDOM && isMSIE:
// Mozilla или Netscape 6.*
isNetscape6=isDOM && (navigator.appName=="Netscape");
Каждая переменная левой части после исполнения сценария будет содержать
логическое значение, которое можно использовать для ветвления дальнейшего
сценария.
Flash
Проталина в снегу,
А в ней — светло-лиловый
Спаржи стебелек.
Мацуо Басе''
Возможности Flash вы узнаете во время работы с программой, а в этом прило-

жении вы найдете краткое описание команд, панелей и инструментов.
Меню
Начнем мы с главного меню. На первых порах освоения программы вы будете
часто тянуться мышью к строке меню. Потом, освоившись, вы начнете более ак-
тивно использовать горячие клавиши и панели. Flash позволяет настраивать со-
четания клавиш по своему усмотрению. Далее в скобках после команд указаны
стандартные сочетания горячих клавиш для Flash 5.
File (Файл)
• New (Создать) — открывает новый фильм (Ctrl+N).
• Open... (Открыть) — открывает существующий фильм (Ctrl+0).
• Open as Library... (Открыть как библиотеку) — открывает только компоненты
фильма (Ctrl+Shift+0).
• Open as Shared Library... (Открыть как общую библиотеку) — открывает компо-
ненты фильма для совместного использования несколькими разработчиками.
• Close (Закрыть) — закрывает активный в данный момент фильм (Ctrl+W).
• Save (Сохранить) — сохраняет активный фильм (Ctrl+S).
• Save As... (Сохранить как) — сохраняет активный фильм под другим именем
(Ctrl+Shift+S).
• Revert (Возвратиться) — открывает предыдущую сохраненную версию фильма.
1
444 Приложение 4. Flash
Import (Импорт) — импортирует объекты из других файлов (в том числе звук

и графику) (Ctrl+R).
Export Movie (Экспорт фильма) — сохраняет активный фильм в другом фор-
мате (Ctrl+Alt+Shift+S).
Export Image (Экспорт изображения) — сохраняет выделенное изображение в
графическом файле.
Publish Settings (Настройка публикации) — открывает окно для задания пара-
метров публикации фильма (Ctrl+Shift+F12).
Publish Preview (Предварительный просмотр публикации) — отображает фильм
на web-странице или в проигрывателе Flash. Другие параметры просмотра
могут включать следующие форматы:
G Default (HTML) (по умолчанию);
Q Flash;
а HTML;
О GIF;
а JPEG;
а PNG;
Q Projector;
Q QuickTime.
Publish (Опубликовать) — публикация файла в указанном в настройках фор-
мате (Ctrl+F12).
Page Setup (Параметры страницы) — настройка параметров печати.
Print Preview (Предварительный просмотр) — предварительный просмотр с уче-
том настроек печати.
Print (Печать) — послать страницу на принтер (Ctrl+P).
Send (Послать) — послать текущую страницу как вложение по электронной
почте в формате FLA.
(Последние фильмы) — внизу меню отображается список сохраненных филь-
мов для их быстрой загрузки.
Exit (Выход) — выход с закрытием всех открытых фильмов (Ctrl+Q).
Edit (Правка)
Undo (Отменить) — отменяет предыдущие изменения. Можно отменить 100 по-
следних действий (команд) (Ctrl+Z).
Redo (Повторить) — возвращает изменения, отмененные командой Undo (От-
менить) (Ctrl+Y).
Cut (Вырезать) — удаляет выделенное и помещает его в буфер обмена (Ctrl+X).
Сору (Копировать) — помещает выделенное в буфер обмена (Ctrl+C).
Paste (Вставить) — вставляет содержимое буфера обмена на стол (Ctrl+V).
Меню 445
• Paste in Place (Вставить на место) — вставляет содержимое буфера обмена на

стол в ту же позицию, из которой оно было вырезано или копировано
(Ctrl+Shift+V).
• Paste Special (Специальная вставка) — вставляет содержимое буфера обмена в
выбранном формате.
• Clear (Очистить) — удаляет выделенное, не помещая его в буфер обмена
(Backspace).
• Duplicate (Дублировать) — вставляет копию выделенного на стол, но не поме-
щает его в буфер обмена (Ctrl+D).
• Select All (Выделить все) — выделяет все объекты на всех незаблокированных
слоях (Ctrl+A).
• Deselect All (Отменить выделение) — снимает выделение со всех выделенных
объектов (Ctrl+Shift+A).
• Cut Frames (Вырезать кадры) — удаляет выделенные кадры и все объекты на
них (Ctrl+Shift+X).
• Copy Frames (Копировать кадры) — копирует выделенные кадры и все объек-
ты на них (Ctrl+Shift+C).
• Paste Frames (Вставить кадры) — вставляет кадры из буфера обмена (Ctrl+
Shift+V).
• Edit Symbols (Правка символов) — переход в режим редактирования символов
(для выделенного символа) (Ctrl+E).
• Edit Selected (Правка выделенного) — переход в режим редактирования (для
выделенной группы).
• Edit A l l (Редактировать все) — возвращается к столу после редактирования
группы.
• Preferences (Предпочтения) — отражает диалоговое окно с набором парамет-
ров: общие, для правки, управление буфером обмена.
• Keyboard Shortcuts (Горячие клавиши) — позволяет пользователю настроить на-
бор клавиш для быстрого вызова команд меню. В открывающемся окне до-
ступны как пользовательские наборы, так и наборы, предоставленные разра-
ботчиками.
View (Вид)
• Goto (Перейти) — перейти к определенной сцене. Включает следующие вари-
анты:
Q First (Первая) (Ноте);
Q Previous (Предыдущая) (PageUp);
G Next (Следующая) (PageDown);
О Last (Последняя) (End);
Q Scene № (Сцена №).
• Zoom In (Увеличить) — увеличивает масштаб отображения стола (Ctrl+=).
• Zoom Out (Уменьшить) — уменьшает масштаб отображения стола (Ctrl+-).
Magnification (Масштаб) — устанавливает масштаб отображения стола:

а 25%;
а 50%;
а 100% (Ctrl+1);
О 200%;
О 400%;
О 800%;
Q Show Frame (Показать кадр) (Ctrl+2);
Q Show All (Показать все) (Ctrl+3).
Outlines (Контуры) — устанавливает отображение только контуров объектов
(Ctrl+Alt+Shift+0).
Fast (Без сглаживания) — задает нормальное представление без сглаживания
(Ctrl-f-AI+Shift+F).
Antialias (Сглаживание) — включает режим сглаживания растровых изобра-
жений и углов (Ctrl+Alt+Shift+A).
Antialias text (Сглаживание текста) — устанавливает режим сглаживания тек-
ста (Ctrl+Alt+Shift+T).
Timeline (Временная диаграмма) — флажок отображения киноленты (Ctrl+
Alt+T).
Work Area (Рабочая область) — флажок подгонки рабочей области к текуще-
му размеру окна (Ctrl+Shift+W).
Rulers (Линейки) — флажок отображения линеек по верхнему и левому краю
стола (Ctrl+Alt+Shift+R).
Grid (Сетка) — подменю меню установок по показу сетки:
0 Show Grid (Показать сетку) — флажок отображения сетки (Ctrl+');
01 Snap to Grid (Привязка к сетке) — флажок привязки объектов к сетке (Ctrl+
Shift-t-1);
О Edit Grid (Редактировать сетку) — открывает диалоговое окно настройки
параметров сетки (Ctrl+Alt+G).
Guides (Направляющие) — подменю управления направляющими:
Q Show Guides (Показать направляющие) — флажок отображения направляю-
щих (Ctrl+;);
Q Lock Guides (Заблокировать направляющие) — флажок блокировки направ-
ляющих (Ctrl+Alt+;);
Q Snap to Guides (Привязка к направляющим) — флажок, управляющий при-
вязкой объектов к направляющим (Ctrl+Shift+;);
Q Edit Guides (Редактировать направляющие) — изменение параметров направ-
ляющих (Ctrl+Alt+Shift+G).
Snap to Object (Привязка к объекту) — флажок, управляющий режимом при-
тягивания объектов (Ctrl+Alt+/).
Меню 447
• Show Shape Hints (Показать идентификаторы формы) — флажок используется

при морфинге, он управляет показом идентификаторов формы при задании
пути преобразования для объекта (Ctrl+Alt+H).
• Hide edges (Скрыть точки) — флажок, управляющий отображением концевых
точек при выделении (Qrl+Alt+H).
• Hide Panels (Скрыть панели) — флажок, управляющий отображением панелей
на экране (Tab).
Insert(Вставка)
• Convert to Symbol (Преобразовать в символ) — преобразует выделенный рису-
нок или текст в символ Flash 4(F8).
• New Symbol (Создать новый символ) — переводит стол в режим редактирова-
ния символов для создания нового (Ctrl+F8).
• Layer (Слой) — добавляет слой.
• Motion Guide (Служебный слой) — добавляет служебный слой.
• Frame (Кадр) — вставляет кадр, сдвигая вправо существующий. Если выде-
лен несуществующий кадр, вставляются все кадры до него включительно (F5).
• Remove Frames (Удалить кадры) — удаляет выделенные кадры (Shift+F5).
• Keyframe (Ключевой кадр) — вставляет ключевой кадр вместо выделенного (F6).
• Blank Keyframe (Пустой ключевой кадр) — вставляет пустой ключевой кадр
вместо выделенного (F7).
• Clear Keyframe (Очистить ключевой кадр) — удаляет ключевой кадр, превра-
щая его в простой (Shift+F6).
• Create Motion Tween (Выполнить кадрирование) — задает раскадровку от вы-
деленного ключевого кадра (или ближайшего слева, если выделен не ключе-
вой кадр) до следующего ключевого кадра.
• Scene (Сцена) — добавляет сцену (Ctrl+/).
• Remove Scene (Удалить сцену) — удаляет активную сцену.
Modify (Изменить)
• Instance (Экземпляр) — открывает панель Instance (Экземпляр) (Ctrl+I).
• Frame (Кадр) — открывает панель Frame (Кадр) (Ctrl+F).
• Layer (Слой) — открывает окно, в котором можно изменить параметры слоя:
имя, видимость, блокировку, тип, цвет контуров, режим отображения кон-
туров и высоту на киноленте в процентах.
• Scene (Сцена) — открывает панель Scene (Сцена).
• Movie (Фильм) — открывает окно, в котором можно изменить параметры филь-
ма: скорость прокрутки кадров, размеры при печати, фоновый цвет и едини-
цы измерения на линейках (Ctrl+M).
• Smooth (Скругление) — скругляет углы.
• Straighten (Спрямление) — выпрямляет кривые линии.
Optimize (Оптимизировать) — оптимизирует набор кривых по ряду парамет-

ров (Ctrl+Alt+Shift+C).
Shape (Форма) — подменю, содержащее команды управления формой:
G Convert Lines to Fill (Преобразовать линии в заливку) — превращает контур
в заливку;
Q Expand Fill (Расширить заливку) — определяет размер заливки;
О Soften Fill Edges (Размягчить заливку) — раздвигает концевые точки в за-
ливке.
Trace Bitmap (Трассировка растрового изображения) — преобразует растровую
графику в векторную. (
Transform (Преобразование) — подменю, содержащее команды преобразований:
Q Scale (Изменить размер) — позволяет изменить размер с помощью восьми
квадратных маркеров, находящихся по углам и на серединах сторон квад-
рата, окружающего выделенный объект;
О Rotate (Повернуть) — позволяет изменить угол поворота и наклона с по-
мощью восьми круглых маркеров, находящихся по углам и на серединах
сторон квадрата, окружающего выделенный объект;
Q Scale and Rotate (Изменить размер и повернуть) — выводит диалоговое
окно, в котором можно задать изменение размера и угол поворота выде-
ленного объекта (Ctrl+Alt+S);
G Rotate 90° CW (Повернуть на 90° по часовой стрелке) — поворачивает
объект на 90° по часовой стрелке;
Q Rotate 90° CCW (Повернуть на 90° против часовой стрелки) — поворачи-
вает объект на 90° против часовой стрелки;
Q Flip Vertical (Отразить вертикально) — выполняет зеркальное отражение
относительно вертикальной оси;
Q Flip Horizontal (Отразить горизонтально) — выполняет зеркальное отраже-
ние относительно горизонтальной оси;
Q Remove Transform (Отменить преобразование) — если маркеры преобразо-
ваний еще окружают объект, то команда возвращает их в начальное поло-
жение; команда неактивна, если маркеров нет (Ctrl+Shift+Z);
Q Edit Center (Сместить центр) — позволяет изменить положение централь-
ной точки объекта;
Q Add Shape Hint (Добавить идентификатор формы) — добавляет идентифи-
катор формы, который позволяет управлять кадрированием формы (Ctrl+
Shift+H);
Q Remove All Hint (Удалить идентификатор формы) — удаляет все идентифи-
каторы формы.
Arrange (Распределение) — подменю, содержащее команды по переносу объ-
екта на определенную глубину на столе:
Q Bring to Front (На передний план) — переносит объект поверх всех других
объектов (Ctrl+Shift+);
Меню 449
Q Bring Forward (Перенести вперед) — изменяет глубину расположения объ-

екта на один уровень вверх (Ctrl+);
Q Send to Back (На задний план) — переносит объект под все другие объекты
(Ctrl+Shift+);
Q Bring Backward (Перенести назад) — изменяет глубину расположения объ-
екта на один уровень вниз (Ctrl+);
Q Lock (Заблокировать) — блокирует выделенный объект от перемещения
или изменений (Ctrl+Alt+L);
G Unlock A l l (Разблокировать все) — снимает блокировку со всех объектов
(Ctrl+Alt+Shift+L).
• Frames (Кадры) — содержит команды преобразования выделенных кадров:
Q Reverse (Обратить) — обращает направление движения объекта при рас-
кадровке;
Q Synchronize Symbols (Синхронизация символов) — синхронизирует собст-
венную киноленту символа и текущую;
Q Convert to Key Frames (Преобразовать в ключевой кадр) — преобразовывает
выделенный кадр в ключевой;
Q Convert to Blank Key Frames (Преобразовать в пустой ключевой кадр) — пре-
образовывает выделенный кадр в пустой ключевой.
• Group (Группировать) — объединяет выделенные объекты в группу (Ctrl+G).
• Ungroup (Разгруппировать) — снимает группировку (Ctrl+Shift+G).
• Break Apart (Преобразовать в графику) — преобразует текст, растровый рису-
нок или символ в векторный рисунок (Ctrl+B).
Text (Текст)
• Font (Шрифт) — подменю; содержит доступные в системе шрифты.
• Size (Размер) — подменю; содержит различные размеры шрифта.
• Style (Стиль) — подменю, позволяющее выбрать стиль:
О Plain (Обычный) (Ctrl+Shift+P);
а Bold (Полужирный) (Ctrl+Shift+B);
О Italic (Курсив) (Ctrl+Shift+I);
Q Subscript (Подстрочный);
Q Superscript (Надстрочный).
• Align (Выравнивание) — подменю, позволяющее выбрать тип выравнивания:
Q Align Left (Выравнивание по левому краю) (Ctrl+Shift+L);
fj Align Right (Выравнивание по правому краю) (Ctrl+Shift+C);
Q Align Center (Выравнивание по центру) (Ctrl+Shift+R);
Q Justify (Выравнивание по ширине) (Ctrl+Shift+J).
• Tracking (Разрядка) — увеличивает (Insrease, Ctrl+Alt+), уменьшает (Decrease,
Ctrl+Alt+ ) и восстанавливает разрядку по умолчанию (Reset, Ctrl+Alt+).
15 Зак. 96
• Character (Шрифт) — открывает панель Character (Шрифт) (Ctrl+T).

• Paragraph (Абзац) — открывает панель Paragraph (Абзац) (Ctrl+Shift+T).
• Option (Параметры) — открывает панель Text Options (Параметры текста).
Control (Управление)
• Play (Воспроизвести) — запускает фильм на исполнение в рабочей области
(быстрая клавиша — Enter). При проигрывании фильма команда меняется на
Stop (Остановить).
• Rewind (Перемотать) — переводит считывающую головку на первый кадр
(Ctrl+Alt+R).
• Step Forward (Шаг вперед) — передвигает считывающую головку на один кадр
вперед (вправо) (.).
• Step Backward (Шаг назад) — передвигает считывающую головку на один кадр
назад (влево) (,).
• Test Movie (Тестовый просмотр фильма) — создает SWF-файл и проигрывает
его (Ctrl+Enter).
• Debug Movie (Отладка фильма) — открывает диалоговое окно Output (Вывод)
и панель Debugger (Отладчик) и проигрывает фильм (Ctrl+Shift+Enter).
• Test Scene (Тестовый просмотр сцены) — проигрывает текущую сцену как
SWF-фильм (Ctrl+Alt+Enter).
• Loop Playback (Зациклить фильм) — если флажок установлен, проигрывание
фильма при выполнении команды Play (Воспроизвести) будет повторяться
до команды Stop (Остановить).
• Play All Scenes (Воспроизвести все сцены) — если флажок установлен, при тес-
тировании фильма проигрываются все сцены.
• Enable Simple Frame Actions (Доступ к простым действиям) — флажок, управ-
ляющий работой простых сценариев при проигрывании фильма в рабочей
области.
• Enable Simple Buttons (Доступ к кнопкам) — флажок, управляющий работой
простых сценариев в кнопках (Ctrl+Alt+B).
• Mute Sounds (Отключить звук) — флажок отключает звук при проигрывании
фильма в рабочей области.
Window (Окно)
• New Window (Новое окно) — дублирует текущее окно в новое (Ctrl+Alt+N).
• Toolbars (Панели инструментов) — (только для Windows) подменю, содержа-
щее флажки:
Q Main (Главная) — открывает, панель инструментов над временной диа-
граммой;
Q Status (Строка статуса) — показывает строку состояния;
Q Controller (Управление) — отображает панель Controller (Управление).
Меню 451
• Tools (Инструменты) — отображает панель с набором инструментов.

• Panels (Панели) — подменю с флажками, отображающими все меню.
• Panel Sets (Настройка панелей) — подменю с выбором между сохраненным
расположением панелей и расположением по умолчанию.
• Save Panel Layout (Сохранить расположение панелей) — сохраняет текущее
расположение панелей.
• Close All Panels (Закрыть все панели) — закрывает все открытые панели.
• Actions (Действия) — открывает панель Frame/Object Actions (Действия с ка-
дром/объектом) (Ctrl+Alt+A).
• Movie Explorer (Проводник по фильму) — открывает панель Movie Explorer
(Проводник по фильму) (Ctrl+Alt+M).
• Output (Вывод) — открывает панель Output (Вывод).
• Debugger (Отладчик) — открывает панель Debugger (Отладчик).
• Library (Библиотека) — открывает окно библиотеки (Ctrl+L).
• Common Libraries (Общие библиотеки) — открывает окно библиотеки со спе-
циальной библиотекой:
О Buttons (Кнопки);
G Graphics (Графические рисунки);
Q Learning Interaction (Интерактивные уроки);
Q Movie Clips (Клипы);
Q Smart Clips (Интеллектуальные клипы);
Q Sounds (Звуки).
• Generator Objects (Объекты генератора) — если установлен генератор, то от-
крывается окно с объектами генератора.
• Cascade (Каскадом) — располагает окна открытых документов каскадом.
• Tile (Мозаика) — располагает окна открытых документов мозаикой.
Help (Справка)
Состав данного меню зависит от операционной системы и компьютера.
• What's New in Flash 5 (Что нового в Flash 5) — ссылки на web-страницу, содер-
жащую информацию о том, что нового появилось в Flash 5.
• Using Flash (Использование Flash) — сетевая справка по Flash (F1).
• ActionScript Reference (Ссылки ActionScript) — сетевой гид по написанию сце-
нариев на ActionScript.
• ActionScript Dictionary (Словарь ActionScript) — сетевой справочник по коман-
дам ActionScript.
• Register Flash (Регистрация Flash) — сетевая регистрация на web-странице
Macromedia.
• Macromedia Dashboard (Доска объявлений Flash) — сетевые ссылки и помощь
в использовании Flash.
• Flash Support Center (Центр поддержки Flash) — сервер поддержки Flash: запи-
си пользователей, ошибки в программе и советы в использовании Flash 5.
• Samples (Примеры) — примеры различных фильмов, демонстрирующих, что
может Flash 5.
• Lessons (Уроки) — уроки, знакомящие с Flash 5.
• About Flash (О программе) — отображение информации о версии программы,
серийном номере, вашей организации и имени. Открывающееся окно также
расскажет вам о разработчиках и юридическом статусе программы.
Debug (Отладка)
Во время тестирования фильма становится доступным еще одно меню, содержа-
щее команды отладки.
• List Objects (Список объектов) — открывает окно со списком объектов (Ctrl+L).
• List Variables (Сохранить) — открывает окно со списком перемнных (Ctrl+Alt+V).
• 14.4 (1.2 KB/s) — устанавливает эмулированную скорость загрузки фильма
в 1,2 Кбайт/с.
• 28.8 (2.3 KB/s) — устанавливает эмулированную скорость загрузки фильма
в 2,3 Кбайт/с.
• 56 (4.7 KB/s) — устанавливает эмулированную скорость загрузки фильма в 4,7
Кбайт/с.
• User Setting 4, 5, 6 — устанавливает эмулированную скорость загрузки филь-
ма, определенную пользователем.
• Customize (Настроить) — открывает окно задания эмулированных скоростей.
Панели
Панель Info (Информация)
Панель Info (Информация) (рис. П4.1) содержит информацию о типе выделен-
ного объекта, о его расположении на столе (поля X и Y), а также высоте (Н) и
ширине (W). В нижней части панели расположена информация о текущем поло-
жении курсора: цвет и прозрачность точки, над которой он расположен, и его
позиция. Квадрат, разбитый на 9 маленьких ячеек, показывает точку отсчета
координат для выделенного объекта. Если черным выделен центральный квад-
рат — то в соседних полях выводятся координаты центра объекта, если левый
верхний — то левого верхнего угла.
Панель Fill (Заливка)

Панель Fill (Заливка) управляет настройкой заливки (рис. П4.2). В верхнем спи-
ске можно выбрать тип заливки; в зависимости от выбора будет меняться вид
панели.
• None (Без заливки) — панель ничего не содержит.
• Solid (Сплошная) — на панели выводится палитра выбора сплошного цвета.
Панели 453
Рис. П4.1. Панель Info показывает размер, позицию, цвет и прозрачность,

а также текущую позицию курсора
• Linear Gradient (Линейный градиент), Radial Gradient (Радиальный градиент) -

панель становится панелью настройки градиента, которая содержит полосу
настройки и кнопку Save (Сохранить), позволяющую переместить созданный
градиент в палитру цветов проекта. Аналогично кнопке Save (Сохранить)
действует единственная команда раскрывающегося меню Add Gradient (Доба-
вить градиент). Если выделен цветной маркер, на панели будет присутство-
вать цветовая палитра.
• Bitmap (Растровая заливка) — выводится список подключенных к проекту
растровых файлов.
Используйте панель Fill (Заливка) в комбинации с панелью Mixer (Палитра) для
создания цветов.
Acid Gradient
Рис. П4.2. Панель Fill управляет заливкой
Панель Stroke (Контур)

Панель Stroke (Контур) управляет толщиной и видом линий (рис. П4.3). Верх-
ний список — Stroke Style (Тип контура) — позволяет выбрать стиль контура.
Всего доступно 7 типов контура. Поле с бегунком Stroke height (Толщина конту-
ра) служит для задания толщины контура, для типа Hardline оно не доступно. Так-
же на панели расположена цветовая палитра для выбора цвета контура и окно
предварительного просмотра.
454 Приложение 4, Flash
Раскрывающееся меню содержит команду Custom (Настройка) для вызова окна

Line style (Стиль линии), которое позволяет более детально настроить линию
контура (рис. П4.4).
Рис. П4.3. На панели Stroke вы можете выбрать тип линий, их цвет и толщину
Рис. П4.4. В окне Lir настроить каждый тип линии
Панель Transform (Преобразование)

Панель Transform (Преобразование) используется для изменения размеров объ-
ектов и формы объектов (рис. П4.5).
• Поля Width (Ширина) и Height (Высота) позволяют указать изменение разме-
ров в процентах к начальному.
• Флажок Constrain (Связать) делает изменения размеров по горизонтали и вер-
тикали одинаковыми (значения полей Width (Ширина) и Height (Высота)).
• Переключатель устанавливает изменение формы, поле Rotation (Поворот) за-
дает угол поворота объекта, а поля Skew horizontally (Горизонтальный наклон)
и Skew vertically (Вертикальный наклон) — углы наклона.
• Кнопка Reset (Отменить) отменяет сделанные изменения.
Панели 455
Кнопка Copy and apply transform (Копировать и применить преобразования)

применяет изменения к копии объекта.
Transform
О
•(•
Рис. П4.5. Панель Transform служит для изменения относительных размеров,

поворота и наклона объекта
Панель Align (Выравнивание)

Все функции по выравниванию и распределению объектов сосредоточены на
панели Align (Выравнивание) в виде кнопок (рис. П4.6):
• Align left edge (Выравнивание левого края);
• Align horizontal center (Выравнивание относительно горизонтального центра);
• Align right edge (Выравнивание относительно правого края);
• Align top edge (Выравнивание относительно верха);
• Align vertical center (Выравнивание относительно вертикального центра);
• Align bottom edge (Выравнивание относительно низа);
• Distribute top edge (Распределение по верхнему краю);
• Distribute vertical center (Распределение по вертикальному);
• Distribute bottom edge (Распределение по верхнему краю);
• Distribute left edge (Распределение по левому краю);
• Distribute horizontal center (Распределение по горизонтальному центру);
• Distribute right edge (Распределение по правому краю);
Рис. П4.6. Панель Align выравнивает объекты относительно друг друга или стола
• Match width (Выравнивание по ширине);

• Match height (Выравнивание по высоте);
• Match width and height (Выравнивание по ширине и высоте);
• Space evenly horizontally (Равномерное горизонтальное распределение);
• Space evenly vertically (Равномерное вертикальное распределение);
• Align/Distribute to Stage (Выравнивание/распределение относительно стола).
Панель Mixer (Палитра)

Панель Mixer (Палитра) предоставляет пользователю все возможности по на-
стройке сплошного цвета. Ее вид зависит от контекста. Если вы работали с цве-
товым маркером линейного градиента, то на панели будут только поле для ото-
бражения цвета маркера, поля ручной настройки R (Красный), G (Зеленый),
В (Синий), Alpha (Прозрачность) и поле Color selector (Выбор цвета) для выбора
цвета на цветовой полосе (рис. П4.7).
|,s;:.;:... ••"•i*fc.-': '--Щ

. ша ...... . . . •.. :-.:-^^
Рис. П4.7. Панель Mixer управляет настройкой цветовых модификаторов сплошного цвета
В остальных случаях (рис. П4.8) панель содержит еще две палитры для задания
цвета контура и заливки, а также кнопки:
• Black White (Черно-белый) — устанавливает режим только с двумя цветами:
черным и белым;
• Nil (Без цвета) — заливка или контур рисуются без цвета;
• Swap Color (Поменять цвета) — меняет цвета заливки и контура между собой.
Рис. П4.8. Панель Mixer в режиме настройки маркера градиента

Панели 457
Раскрывающееся меню содержит команды:

• RGB — флажок устанавливает десятичное представление значений компонен-
тов цвета в схеме RGB;
• HSB — флажок устанавливает представление значений компонентов цвета
в схеме HSB;
• Hex — флажок устанавливает шестнадцатеричное представление значений
компонентов цвета в схеме RGB;
• Add Swatch — добавляет настроенный цветовой модификатор в палитру.
Панель Swatches (Цветовые модификаторы)

Панель Swatches (Цветовые модификаторы) содержит цветовые модификаторы
для контура и заливки (рис. П4.9). Можно создать свой модификатор и доба-
вить его в палитру. Вверху расположена палитра сплошных цветов, внизу —
градиентов. Панель имеет богатое раскрывающееся меню:
• Duplicate Swatch (Дублировать цветовой модификатор) — создает копию цве-
тового модификатора;
• Delete Swatch (Удалить цветовой модификатор) — удаляет модификатор из
палитры;
• Add Colors (Добавить палитру) — открывает окно загрузки дополнительной
палитры;
• Replace Colors (Загрузить палитру) — открывает окно загрузки дополнитель-
ной палитры (новая палитра заменит существующую);
• Load Default Colors (Загрузить палитру по умолчанию) — загружает палитру
по умолчанию;
• Save Colors (Сохранить палитру) — сохраняет палитру;
fttpltcate:
Acid Colon
Replace Cc
Load Defau
Sfeve'Color
Save as 0>=
Clear Colo:
Web 216
SoiibyCoii:
Рис. П4.9. Панель Swatches содержит сплошные цвета,

а также линейные и радиальные градиенты
• Save as Default (Сохранить как палитру по умолчанию) — сохраняет как па-

литру по умолчанию;
• Clear Colors (Очистить палитру) — оставляет в палитре только два цвета: чер-
ный и белый и градиент серого;
• Web 216 (Безопасная палитра) — загружает безопасную палитру Web;
• Sort by Colors (Сортировать по цвету) — сортирует палитру по цветовым ком-
понентам.
Панель Character (Шрифт)

Панель Character (Шрифт) (рис. П4.10) необходима для настройки вида текста:
шрифта, размера, стиля, разрядки и пр. Доступность некоторых элементов пане-
ли зависит от типа текстового блока.
• Список Font (Шрифт) включает те шрифты, которые есть у вас на компьюте-
ре. Информация о шрифте встроена в SWF-файл, так что символы вашего
шрифта будут видны любому, кто будет смотреть фильм или страницу.
{Subscript
* :::::::::::: Г:;.:
URUj
111 Щтт
Рис П4.10. Панель Character предоставляет доступ ко всем характеристикам шрифта
• Поле Font height (Высота шрифта) с ползунком служит для установки разме-
ра шрифта.
• Две кнопки, расположенные справа от списка размера шрифта, задают полу-
жирное (В) и курсивное начертание (Г) символов (стиль).
• Палитра Text (Fill) color (Цвет текста и заливки) служит для задания цвета
текста.
• Поле Tracking (Разрядка) необходимо для настройки расстояния между сим-
волами в слове.
• Флажок Kern (Автокернинг) лучше установить, если вы доверяете дизайнеру,
создавшему шрифт.
• Кроме пункта Normal (Обычный) список Vertical offset (Вертикальное смеще-
ние) содержит два эффекта: Superscript (Верхний индекс) и Subscript (Нижний
индекс).
Вы можете использовать текст как ссылку на URL для задания связи с web-
страницей. Выделите текст, который вы хотите использовать как ссылку на дру-
гой сайт или страницу, и наберите его URL в нижнем поле панели Character
(Шрифт). Выделенный текст на столе будет подчеркнут пунктирной линией.
Панели 459
Панель Paragraph (Абзац)

Панель Paragraph (Абзац) служит для настройки выравнивания текста в абзаце
и отступов от краев блока (рис. П4.11).
Рис. П4.11. Панель Paragraph нужна для форматирования текста
Параметры выравнивания стандартные: по левому краю (Left justify), по центру

(Center justify), по правому краю (Rigth justify) и по ширине (Full justify).
Все поля отсчитываются от границ текстового блока, а не страницы, и измеря-
ются в пикселах. Можно настроить два поля: левое поле (Left margin) и правое
поле (Rigth margin).
Красная строка (Indentation) задается в левом нижнем поле и управляет сдвигом
первой строки абзаца. Расстояние между линиями (Line spacing) — интерлинь-
яж — измеряется в точках, а не в пикселах. Увеличение расстояния между ли-
ниями может сделать восприятие текста более легким, а также поможет запол-
нить всю страницу целиком, не увеличивая объем текста.
Панель Text Options (Параметры текста)

Последняя панель, связанная напрямую с текстом, — это панель Text Options
(Параметры текста, рис. П4.12). Вид панели зависит от выбора типа текста в
верхнем поле: Static Text (Статический текст), Dynamic Text (Динамический
текст) и Input Text (Поле ввода).
TextField2
Рис П4.12. Панель Text Options служит для настройки типа текстового блока
Статический текст
Из трех типов форматов текста статический (Static Text) используется чаще все-
го. Флажок Use Device Fonts (Использовать типы шрифтов) служит для указания
использовать шрифты с компьютера пользователя. Доступно три типа шрифтов:
• _sans — шрифты типа Verdana, Arial и Helvetica (обычно их называют шриф-
тами sans serif);
• _serif — тип шрифтов наподобие Times, Palatine и Baskervill;
• „typewriter — моноширинные шрифты, такие как Courier.
Если вы решили использовать типовой шрифт, установите флажок Use Device
Fonts (Использовать типы шрифтов) на панели Text Options (Параметры текста).
Затем перейдите на панель Character (Шрифт) и выберите нужный тип шрифта
в списке Font (Шрифт).
Флажок Selectable (Возможность выделения) служит для указания, может ли
пользователь выделить фрагмент вашего текста.
Динамический текст
Динамический текст (Dynamic Text) может быть изменен Flash во время работы
SWF-файла.
В зависимости от количества текста и размеров блока, выделенного под текст,
можно установить режим Single Line (Однострочный) или Multiline (Многостроч-
ный). При выборе многострочного режима будет доступен также флажок Word
Wrap (Перенос по словам).
Для динамического текста и поля ввода вы можете установить флажок HTML,
который позволяет сохранять форматирование текста внутри текстового блока
при изменении текста пользователем (табл. П4.1).
Таблица П4.1. Форматы динамического текста
Тип текста Тег

Ссылка <А> (например, в <А href="www.dimvovich. narod.ru">)
Полужирный стиль
Курсивный стиль
Шрифт <FONT FACE> (такой как Arial или Times)
Цвет шрифта <FONT COLOR>
Размер шрифта <FONT SIZE>
Символ абзаца
Маркированный список
Флажок Border/Bg (Граница/Фон) служит для обозначения границы текстового

блока. Раздел Embed Fonts (Внедряемые шрифты) содержит ряд кнопок для вне-
дрения отдельных символов или всего шрифта.
Для имени переменной, которая будет ассоциирована с данным текстовым по-
лем, служит поле Variable (Переменная). На панели есть также флажок Selectable
Панели 461
(Возможность выделения) для указания возможностей работы с текстом поль-

зователю.
Поле ввода
Тип текстового блока Input Text (Поле ввода) служит для ввода текста пользо-
вателем. В первом списке для поля ввода доступны режимы Single Line (Одно-
строчный), Multiline (Многострочный) и Password (Пароль). При выборе режима
пароля в поле вместо символов, которые вводит пользователь, отображаются
только маркеры (звездочки).
Еще одно отличие между динамическим текстом и текстовым полем состоит
в замене флажка Selectable (Возможность выделения) полем Max Chars (Макси-
мальное количество символов). Если в этом поле нет значения, пользователь
может вводить любое количество символов.
Остальные элементы панели Input Text (Поле ввода) совпадают с имеющимися
на панели Dynamic Text (Динамический текст).
Панель Instance (Экземпляр)

Другой важной панелью является панель Instance (Экземпляр) (рис. П4.13).
Здесь вы можете указать название экземпляра для клипа и определить поведе-
ние символа. Панель выглядит по-разному для различных типов символов: гра-
фики (Graphic), кнопок (Button) или клипа (Movie Clip). Тип символа можно за-
дать в верхнем списке.
• В случае клипа в поле Name можно задать имя переменной.
• Если выбрана кнопка, то в нижнем списке можно указать тип обработки со-
бытий: Track as Button (Обрабатывать как кнопку) и Track as Menu Item (Обра-
батывать как пункт меню).
• Если выбран графический рисунок, то на панели будет присутствовать спи-
сок с пунктами: Loop (Зациклить), Play Once (Проиграть один раз) и Single
Frame (Один кадр), и поле для указания кадра, с которого должно быть нача-
то проигрывание.
instance
Рис. П4.13. Панель Instance, на которой выбран тип поведения Graphic
Внизу панели расположена миниатюрная строка запуска:

• Swap Symbol (Поменять символ) — меняет символ на любой другой символ из
библиотеки;
• Edit Symbol (Редактировать символ) — переходит в режим редактирования

символа;
• Duplicate Symbol (Дублировать символ) — создает копию символа;
• Edit Actions (Редактировать действия) — открывает панель Object Actions (Дей-
ствия с объектом).
Панель Effect (Эффект)

В раскрывающемся списке на панели Effect (Эффект) (рис. П4.14) вы сможете
выбрать эффекты: None (Без эффекта), Brightness (Яркость), Alpha (Прозрачность),
Tint (Оттенок) и Advanced (Перемешивание цветов). Яркость можно настроить с
помощью ползунка от -100 до 100 %, а прозрачность — от 0 до 100 %. В случае
настройки оттенка символа к вашим услугам будут палитра и полоса цвета, а
также поля Alpha, R, G, В. Самые обширные настройки предлагает пункт Advanced
(Перемешивание цветов). В нем вы можете не только пропорционально изме-
нить компоненты цвета и прозрачность (от -100 до 100 %), но и добавить любой
цвет (поля справа).
l] Advanced
Рис, П4.14. С помощью панели Effect можно применить различные цветовые эффекты
к экземпляру символа
Панель Frame (Кадр)

Панель Frame (Кадр) используется для добавления названий и комментариев
к кадрам и установки раскадровки и морфинга (рис. П4.15). На ней расположе-
ны следующие элементы:
• Поле Label (Имя) — имя кадра или комментарий (его необходимо начинать
с двойного слеша «//»);
• Tweening (Раскадровка) — список для установки раскадровки или морфинга.
Если выбрана раскадровка (Motion), то на панели становятся доступными допол-
нительные параметры:
• флажок Scale (Размер) — устанавливает, выполняется ли раскадровка разме-
ров объекта;
• поле Easing (Регулирование) — служит для задания неравномерности преоб-
разований во время раскадровки;
Панели 463
• список Rotation (Вращение) — содержит пункты None (Нет), Auto (Авто), CW

(По часовой стрелке), CCW (Против часовой стрелки); в соседнем поле мож-
но указать, сколько раз осуществляется вращение;
• флажок Orient to path (Следовать по пути) — служит для привязки направле-
ния объекта к пути на служебном слое; объект будет не только следовать по
направляющему пути, но и поворачивать на его изгибах;
• флажок Synchronize (Синхронизировать) — используется, если отношение ко-
личества кадров раскадровки и внутренней киноленты клипа дробное;
• флажок Snap (Привязка) — служит для автоматической привязки объекта
к направляющему пути.
Если выбран морфинг (Shape), то на панели останется поле Easing (Регулирова-
ние) и появится список Blend (Превращение) с пунктами Disributive (Плавное)
и Angular (Стремительное).
|
|
j||
d //это первый кадр
;р Seate
•- F Snap
Рис. П4.15. Раскадровка, комментарии и названия кадров могут быть заданы на панели Frame
Панель Sound (Звук)

Панель Sound (Звук) служит для управления звуком (рис. П4.16). В верхнем спи-
ске происходит выбор звукового файла, подключенного к проекту. В раскры-
вающемся списке Effect (Эффект) выбирается звуковой эффект:
• None (Без) — без эффектов;
• Left Channel (Левый канал) — звук воспроизводится только в левом канале;
• Right Channel (Правый канал) — звук воспроизводится только в правом ка-
нале;
• Fade Left to Right (Переход слева направо) — движение звука из левого в пра-
вый канал;
• Fade Right to Left (Переход справа налево) — движение звука из правого в ле-
вый канал;
• Fade In (Громче) — воспроизведение с нарастанием громкости;
• Fade Out (Тише) — воспроизведение с затуханием;
• Custom (Настройка) — ручное создание звуковых эффектов с использова-
нием графического представления звука и регулировки линии звуковой оги-
бающей.
В раскрывающемся списке Sync (Синхронизация) выбирается тип звучания:

• Event (Событие) — полное воспроизведение звука от начала до конца;
• Start (Начать) — начало воспроизведения звука;
• Stop (Закончить) — параметр нужен, когда необходимо выключить опреде-
ленный звук;
• Stream (Поток) — потоковый звук, обеспечивающий режим синхронизации
звука и анимации.
В поле Loops (Зацикливание) вы можете задать количество повторов выбранно-
го звукового файла. Кнопка Edit (Редактировать) открывает окно Edit Envelope
(Редактирование огибающей) (рис. П4.17).
Рис. П4.16. Панель Sound предоставляет возможности для работы со звуком
0.5
Рис. П4.17. Окно Edit Envelope позволяет редактировать огибающую звуковой волны
Панели 465
Панель Scene (Сцена)

Панель Scene (Сцена) содержит список всех сцен проекта (рис. П4.18). Внизу
панели расположены кнопки, названия которых говорят сами за себя: Duplicate
scene (Дублировать сцену), Add scene (Добавить новую сцену), Delete scene (Уда-
лить сцену).
Л Начало Ц|
'А Украшение
ljj Электросеть
f8t Темнота -•'-• I
fjg Распаковка
,...:.1|
Рис. П4.18. Панель Scene содержит список всех сцен проекта
Панель Actions (Действия)

На панели Actions (Действия) вы можете вводить сценарии действий
(рис. П4.19). Вид панели зависит от того, что в данный момент выделено: кадр
или объект.
Все команды ActionScript доступны через различные подменю, находящиеся
в меню, обозначенном знаком плюс (+), или через дерево команд в левой части
панели. Все действия перечислены в следующем приложении.
Сам код сценария расположен в правой части окна ActionScript Editor (Редактор
ActionScript). В обычном режиме сверху панели доступны кнопки:
• Delete selected action(s) (Удалить выделенное действие);
• Move the selected action(s) up (Передвинуть выделенное действие вверх);
• Move the selected action(s) down (Передвинуть выделенное действие вниз).
Перейти в нужный режим можно с помощью раскрывающегося меню, в котором
доступны следующие команды:
• Normal Mode (Обычный режим) — режим для начинающих пользователей, ав-
томатическая коррекция синтаксиса;
• Expert Mode (Режим эксперта) — режим для прямого ввода команд;
• Goto Line (Переход) — переход к определенной строке текста сценария;
• Find (Поиск) — открывает окно поиска;
• Find again (Повторный поиск) — осуществляет повторный поиск;
• Replace (Замена) — открывает окно замены;
• Check Syntax (Проверка синтаксиса) — проверяет синтаксис;
• Import from File (Импорт из файла) — выводит окно для поиска и открытия
AS-файла;
Export as File (Экспорт в файл) — сохраняет AS-файл;

Print (Печать) — отправляет сценарий на принтер;
Colored Syntax (Разноцветное написание) — устанавливает разноцветный вы-
вод сценария: действия, переменные, свойства и комментарии будут выделе-
ны разными цветами;
Show Deprecated Syntax (Показывать упрощенный синтаксис) — флажок уста-
навливает вывод упрощенного синтаксиса при выборе команд;
Font size (Размер шрифта) — подменю для установки размера шрифта: Small
(Мелкий), Medium (Средний) Large (Большой).
Frame Actions
Normal Mode
Щ Actions duplic at бМ о vied |

ЦЦ Operators Goto Lme,;, ' ;
Щ Functions Find;;r;;i|p:
Щ Properties .' ?:>Л;/-ЩуЩ:Г./:'
P Objects
GH Array Check Syntax-, У:
\Щ Boolean
: Color Import FrotYiRle:;f
UK Mouse Colored Syntax ;:•/;Йф

В MovieCHp ShowOeprecated Syntax
HP Number Fontsize , :;й;:-."
Ш Object
f§) Selection
Щ Sound
..;-" •- щ т • .
Щ String
Ш XML
Рис. П4.19. Панель Actions предназначена для ввода сценариев ActionScript
Movie Explorer (Проводник по фильму)

Movie Explorer (Проводник по фильму) оказывается иногда просто незаменимым
инструментом. Он показывает все объекты в фильме в соответствии с их иерар-
хией (рис. П4.20).
Вверху панели расположены кнопки показа составляющих:
• Show Text (Показать тексты);
• Show Buttons, Movie Clips and Graphics (Показать символы);
• Show Action Scripts (Показать сценарии);
Панели 467
• Show Video, Sounds and Bitmaps (Показать импортированные видео, звуки и

растровые рисунки);
• Show Frames and Layers (Показать кадры и слои);
• Customize which Items to Show (Настроить).
Последняя кнопка открывает окно Movie Explorer Settings (Настройки проводника
по фильму), в котором собраны флажки всех возможных элементов, а также
флажки разделов Movie Elements (Элементы фильма) и Symbol Definitions (Опреде-
ления символов). Поле Find (Поиск) не требует пояснений.
Отдельного разговора требует раскрывающееся меню. Оно содержит довольно
много команд.
• Goto Location (Перейти к) — переводит киноленту к данному объекту. Если
выделен кадр, то фильм перейдет на заданный кадр, если текущий объект -
символ, Flash перейдет к его редактированию.
• Goto Symbol Definition (Перейти к определению символа) — проводник перехо-
дит к определению символа в дереве фильма.
• Select Symbol Instances (Выделить экземпляры символа) — выделяет все эк-
земпляры данного символа. Доступна только в разделе Symbol Definitions (Оп-
ределения символов).
• Find in Library (Найти в библиотеке) — выбирает данный элемент в окне биб-
лиотеки.
• Panels (Панель) — открывает панель текущего элемента. Если это сцена, то
будет открыта панель Scene (Сцена), если текущим был слой — откроется па-
нель Layer Properties (Свойства слоя), а если кадр — вы перейдете на панель
Frame Actions (Действия с кадром).
• Rename (Переименовать) — предоставляет возможность переименовать эле-
мент.
• Edit in Place (Редактировать на месте) — переходит к режиму редактирования
символа.
• Edit in New Window (Редактировать в новом окне) — переходит к режиму ре-
дактирования символа в новом окне.
• Флажок Show Movie Elements (Показать элементы фильма) управляет показом
элементов фильма.
• Флажок Show Symbol Definitions (Показать определения символов) управляет
показом раздела задания символов.
• Copy Text to Clipboard (Копировать текст в буфер) — копирует текст в буфер
обмена.
• Cut (Вырезать), Сору (Копировать), Paste (Вставить), Clear (Очистить) -
стандартные команды копирования, вставки и удаления.
• Expand Branch (Развернуть ветвь) — раскрывает ветвь дерева фильма.
• Collapse Branch (Свернуть ветвь) — сворачивает ветвь дерева фильма.
• Collapse Others (Свернуть остальные) — сворачивает все остальные ветви.
• Print (Печать) — вывод дерева фильма на печать.
Капля_Н<гга
Eh i frame 168
Щ Капля_Нота
P Нота5
I Щ frame!
& i frame 150
I • 'Щ Капля_Нста
Й 1 frame 155
• Щ Капля_Нота
В" IP Нота4
Ц frame 1
£>• i frame 141
.( lib-...® (нишОЛЧ.
JSSjW?-- ---ЭДЯМИММ
-•3 ......
Рис. П4.20. Проводник по фильму предоставляет информацию о фильме в удобном виде
Панель Layer Properties (Свойства слоя)

Панель Layer Properties (Свойства слоя) можно открыть либо с помощью контек-
стного меню, либо через проводник по фильму. На этой панели собраны все
свойства слоя (рис. П4.21):
• Name (Имя) — имя слоя;
• флажок Show (Видимость) — видимость слоя на столе;
• флажок Lock (Блокировка) — доступность слоя изменениям;
• переключатель Туре (Тип) — выбор одного из типов слоя:
Q Normal (Обычный),
Q Guide (Служебный),
О Guided (Подчиненный),
Q Mask (Маскирующий),
Q Masked (Маскируемый);
• палитра Outline Color (Цвет контура) — цвет для показа в режиме контура;
• флажок View Layer as Outlines (Показать слой как контур) — отображает толь-
ко границы объектов;
• Layer Height (Высота слоя) — 100, 200, 300 % обычной высоты слоя.
Панели 469
utilrm \
Рис. П4.21. Все свойства слоя собраны на панели Layer Properties
Окно Output (Вывод)

Окно Output (Вывод) отображает ошибки в фильме и может быть использовано
совместно с действием Trace для наблюдением за выполнением сценария или
других специально выводящихся данных во время работы фильма.
Окно Debugger (Отладчик)

Окно Debugger (Отладчик) помогает найти ошибки в сценариях и решить про-
блемы, возникающие при создании фильма, позволяя изменять значения раз-
личных объектов и переменных. На вкладках Properties (Свойства) и Variables
(Переменные) отображаются текущие значения параметров (рис. Г14.22).
Debugger
Nsrae. I 1 1 Vakie .-.•':• . .,.-.;

-
alpha
..cui?er:!?ftfiT»:-
Jocusfecl
;
'II^m&mL,
ЧР
Рис. П4.22. Окно отладки фильма

На вкладку Watch (Слежение) можно внести переменные, значения которых вы

хотите отследить. Переменные добавляются командой раскрывающегося меню
Add Watch (Добавить переменную), а удаляются командой Remove Watch (Уда-
1
лить переменную). Остальные команды меню — стандартные .
Окно Library (Библиотека)

Окно Library (Библиотека) показывает символы, звуки, растровые изображения
и раскадровки, использованные или импортированные в фильм (рис. П4.23).
Каждый элемент библиотеки кроме имени имеет еще ряд отображаемых пара-
метров: тип, счетчик, ссылку и дату изменения. Слева от имени расголожен зна-
чок, указывающий на тип объекта.
Окно библиотеки имеет обширное раскрывающееся меню. Большинство команд
имеет понятное назначение:
• New Symbol (Создать символ);
• New Folder (Создать папку);
• New Font (Шрифт);
• Rename (Переименовать);
• Move to New Folder (Перенести в новую папку);
• Duplicate (Дублировать);
• Delete (Удалить);
• Edit (Редактировать);
• Edit with (Редактировать с помощью);
• Properties (Свойства);
• Linkage (Ссылка);
• Define Clip Parameters (Установить параметры по умолчанию);
• Select Unused Items (Выделить неиспользуемые элементы);
• Update (Обновить);
• Play (Проиграть);
• Expand Folder (Раскрыть папку);
• Collapse Folder (Закрыть папку);
• Expand All Folders (Открыть все папки);
• Collapse All Folders (Закрыть все папки);
• Shared Library Properties (Свойства общей библиотеки);
• Keep Use Counts Update (Вписать счетчики использования);
• Update Use Counts Now (Обновить счетчики).
Внизу панели расположены кнопки управления символами, дублирующие наи-
более часто используемые команды раскрывающегося меню:
• New Symbol (Создать символ);
• New Folder (Создать папку);
В целом в пятой версии Flash проблема отладки решена не на лучшем уровне.

Панели 471
• Properties (Свойства);
• Delete (Удалить).
Library - PostC
Tween 87 Graphic Delete

Tween 88 Graphic
Бокал Graphic
i:Rfope
Бутылка Graphic
Бутылка! Graphic
Ветка Graphic
Ветка-кнопка Button
Вилка Graphic
Вспышки Movie Clip
Выключатель! Button
Выключатель2 Button
Горлышко Graphic
Звезда Movie Clip
Щ Звезда! Graphic
Щ Звезда2 Graphic
Ц| Коробка Graphic
Щ Коробка 2 Graphic
Щ Круг Graphic ] свврэля г. о!и!л
Щ Круг2 Movie Clip 27 февраля 2002 г. 16:28:2;
II КругЗ Movie Clip 27 февраля 2002 г. 16:37:4t
Щ Крышка Graphic 13 февраля 2002 г. 15:54:5Е;
%3 Крышка-кнопка Button 13 февраля 2002 г. 15:54:5t
I Щ пена.Ьтр Bitmap А марта 2002 г. 17:10:52
Рис. П4.23. Окно библиотеки фильма может рассказать много интересного
Окно Common Libraries (Общие библиотеки)

В коллекцию Common Libraries (Общие библиотеки) включены кнопки, графика,
уроки, клипы, smart-клипы и звуки. Объекты, включенные в общие библиоте-
ки, — это уже готовые объекты, которые вы можете использовать в своих филь-
мах.
Окно Generator Objects (Объекты генератора)

Окно Generator Objects (Объекты генератора) предоставляет доступ к объектам
генератора, если он у вас установлен.
Инструменты и модификаторы
Все инструменты Flash собраны на одной панели инструментов. Некоторые ин-
струменты имеют модификаторы. Они расположены в нижней части панели ин-
струментов в разделе Options (Модификаторы).
Стрелка — •
шш
}
— Подвыделение
Линия — ! ШШ — Лассо
Перо — 1 <^?';А|; — Текст
Овал — 1 &&' — Прямоугольник
:
Карандаш — | ЙЖ-
— Кисть
Бутылка чернил — 1 'ШШ — Банка краски
Пипетка — } — Ластик
Рука— | — Масштаб
Настройки
инструмента
Режим ластика Распылитель
Форма ластика
Рис. П4.24. Панель инструментов
Arrow (Стрелка)
Инструмент Arrow (Стрелка) служит для выделения, перемещения и изменения
формы объектов. Быстрый вызов — V. Инструмент имеет следующие модифика-
торы:
• Snap to Object (Привязка к объектам) — привязка перемещаемого или изме-
няемого объекта к другому объекту или месту; устанавливает одноименный
флажок в меню View (Вид);
• Smooth (Сглаживание) — преобразование линий в более плавные; устранение

дефекта «дрожания руки»;
• Straighten (Спрямление) — спрямление неровностей;
• Rotate (Поворот) — отображает маркеры, управляющие поворотом и накло-
ном объекта;
• Scale (Изменение размера) — отображает маркеры изменения размера.
Выберите инструмент и щелкните на объекте или обведите рамкой несколько
объектов. Перемещая появившиеся маркеры, можно изменять форму выделен-
ных элементов.
Subselection (Подвыделение)
Subselection (Подвыделение) — векторный инструмент (рис. П4.24). Работает
с точками векторных кривых и маркерами касательных. Быстрый вызов — А.
Выберите инструмент и щелкните на векторном рисунке. Протащите один из
появившихся маркеров ил№ одну из точек для изменения объекта.
Line (Линия)
Line (Линия) — этот инструмент предназначен для рисования прямых линий.
Быстрый вызов — N.
Lasso (Лассо)
Инструмент Lasso (Лассо) служит для выделения объектов произвольной фор-
мы. Быстрый вызов — L. В отличие от инструмента Arrow (Стрелка) позволяет
обрисовать объект или несколько объектов по краю, не захватывая при этом
другие объекты. Имеет следующие модификаторы:
• Magic Wand (Волшебная палочка) — позволяет вырезать область, руковод-
ствуясь указанным цветом;
• Magic wand Properties (Настройка волшебной палочки) — установка парамет-
ров волшебной палочки;
• Polygon Mode (Многоугольник) — выделение объекта путем его обрисовки
прямыми отрезками.
Выберите нужный модификатор и обведите область или щелкните на нужном
цвете, чтобы выделить область, закрашенную таким цветом. Можно вырезать
часть заливки или контура.
•
Реп (Перо)
Реп (Перо) — инструмент для рисования векторными линиями. Требует некото-
рого навыка в использовании. Быстрый вызов — Р.
Для того чтобы нарисовать пером, щелкните мышью в начальной точке буду-
щей кривой. Затем переместите указатель мыши до следующей точки и еще раз
щелкните. Если после этого отвести мышь в сторону, не отпуская ее левую
кнопку, то от последней точки и до указателя мыши протянется касательная.
Меняя ее положение, можно задать необходимую кривизну линии. Если вы соз-

дадите замкнутый объект, то произойдет его заливка цветом.
Text(Текст)
Text (Текст) — это инструмент для ввода текста. Быстрый вызов — Т. В програм-
ме Flash существует два способа ввода текста.
Первый самый простой — достаточно щелкнуть мышью на нужном месте и на-
чать вводить текст. Строка будет автоматически увеличиваться по мере ввода
текста. Для перевода на новую строку нажмите клавишу Enter.
Второй способ связан с использованием текстового блока заданного размера.
Сначала вы очерчиваете границы блока, а затем вводите в него текст.
Характер блока определяется по его виду. Если в верхнем правом углу располо-
жен кружок, значит вы имеете дело с блоком переменной ширины. Если же вы
видите квадратик, значит ширина блока фиксирована и перенос будет происхо-
дить без вашего участия.
Oval (Овал)
Oval (Овал) — инструмент предназначен для рисования кругов и эллипсов. Бы-
стрый вызов — О.
Нажмите левую кнопки мыши на столе, где будет находиться овал, не отпуская
кнопку переместите мышь на необходимое расстояние, задав тем самым форму
фигуры и размер. Отпустите кнопку. Для рисования круга достаточно удержи-
вать клавишу Shift.
Rectangle (Прямоугольник)
Инструмент Rectangle (Прямоугольник) предназначен для рисования квадратов
и прямоугольников. Быстрый вызов — R. Имеет один модификатор, управляю-
щий радиусом скругления угла — Round Rectangle Radius (Скругление углов пря-
моугольника).
Нажмите левую кнопки мыши на столе, где будет находиться фигура, не отпус-
кая кнопку переместите мышь на необходимое расстояние, задав тем самым
форму и размер. Отпустите кнопку. Для рисования квадрата достаточно удер-
живать клавишу Shift.
Pencil (Карандаш)
Инструмент Pencil (Карандаш) предназначен для рисования произвольного кон-
тура. Быстрый вызов — Y. Имеет один модификатор — Pencil Mode (Режим ка-
рандаша). Доступно три режима:
• Straighter (Спрямление) — создание «правильных» фигур;
• Smooth (Сглаживание) — сглаживание кривых;
• Ink (Чернила) — режим оставит все нарисованное без изменений.
Пользоваться карандашом, думаю, все умеют. Берем и рисуем...
Brush (Кисть)
Инструмент Brush (Кисть) предназначен для рисования заливки. Быстрый вы-
зов — В. Также имеет модификатор Brush Mode (Режим кисти). Предоставляет на-
бор возможностей, которые делают кисть хорошо управляемым инструментом:
• Paint Normal (Обычный) — полное закрашивание;
• Paint Fills (Заливка) — оставляет контуры нетронутыми;
• Paint Behind (Закраска позади объекта) — позволяет закрасить фон за объек-
том, но не сам объект;
• Paint Selection (Закраска выделений) — предназначен для закрашивания выде-
ленной области;
• Paint Inside (Внутренняя закраска) — метод закраски только внутренней час-
ти одного из объектов, на котором сделан первый мазок.
Модификаторы Brush Size (Размер кисти) и Brush Shape (Форма кисти) управля-
ют формой и размером кисти.
Рассказывать, как пользоваться, полагаю, не надо — кисть в руках наверняка все
держали, малярную или маникюрную.
Ink Bottle (Бутылка чернил)

Инструмент Ink Bottle (Бутылка чернил) служит для изменения цвета, толщины
и типа контура, а также для его создания вокруг области заливки. Быстрый вы-
зов — S. Чтобы изменить существующий контур, надо щелкнуть инструментом
на нем, чтобы создать новый — на границе заливки.
Paint Bucket (Банка краски)

Инструмент Paint Bucket (Банка краски) предназначен для закрашивания фигур
и изменения имеющейся заливки. Горячая клавиша — К. Имеет следующие мо-
дификаторы:
• Gap Size (Зазор) — установка возможных размеров зазоров при заливке не-
замкнутых объектов:
Q Don't Close Gaps (He замыкать разрывы) — закраска только замкнутых объ-
ектов,
Q Close Small Gaps (Замыкать мелкие разрывы) — заливка объектов, граница
которых имеет небольшие разрывы,
О Close Medium Gaps (Замыкать средние разрывы) — заливка объектов, гра-
ница которых имеет средние разрывы,
Q Close Large Gaps (Замыкать большие разрывы) — заливка объектов, грани-
ца которых имеет большие разрывы;
• Lock Fill (Блокировка) — блокировка размеров заливки; при включенной бло-
кировке границами заливки считаются не границы объекта, а границы стола;
• Fill Transform (Преобразовать заливку) — модификатор предназначен для
изменения заливки; применяется к градиентным и растровым заливкам.
Появившиеся на форме маркеры управляют размерами и формой градиента

и растрового рисунка.
Dropper (Пипетка)
Dropper (Пипетка) — стандартный инструмент растровых редакторов, предна-
значенный для копирования цвета. Быстрый вызов — I.
Щелчком выберите необходимый цвет среди находящихся на столе рисунков.
Eraser (Ластик)
Eraser (Ластик) — инструмент предназначен для удаления нарисованного. Быст-
рый вызов — Е. Имеет следующие модификаторы:
• Eraser Mode — выбор режима работы ластика:
Q Normal (Обычный) — обычный режим: стирается все;
Q Erase Fills (Стирание заливки) — стирание заливки: контур остается нетро-
нутым;
Q Erase Lines (Стирание контура) — стирается только контур;
О! Erase selected (Стирание выделения) — удаление выделенной области;
Q Erase Inside (Внутреннее стирание) — метод удаления только той заливки,
на которой начался процесс стирания;
• Faucet (Распылитель) — удаление линии или заливки целиком;
• Erase Shape (Форма) -- выбор формы ластика; аналогично выбору формы
кисти.
Раздел Colors (Цвет контура)

Содержит две палитры: Stoke Color (Цвет контура) и Fill Color (Цвет заливки).
Внизу раздела размещены кнопки:
• Default Colors (Черный и белый);
• No Color (Без цвета);
• Swap Colors (Поменять цвета).
Помните, что выбранный цвет заливки или контура един для всех панелей и ин-
струментов.
Hand (Рука)
Инструмент Hand (Рука) позволяет перетаскивать стол мышью без помощи по-
лос прокрутки, подобно тому, как вы двигаете лист бумаги по столу. Быстрый
вызов — Н.
Zoom (Масштаб)
Инструмент Zoom (Масштаб) служит для увеличения или уменьшения отобра-
жения масштаба документа. Горячие клавиши — М, Z.
ActionScript
Чудеса!
На миг отвернулся, а он уже вырос,
Росток бамбука.
Кобаяси Исса*
В данном приложении собрано краткое описание языка ActionScript. Как вы

уже догадались, все операторы и функции языка сценариев Flash называются
«action», что обычно переводится на русский язык как «действия». Действия
приведены в том же порядке, в котором они перечислены в папках панели
Actions (Действия) в режиме эксперта. Если вы знаете написание действия, но не
знаете, в какой папке оно находится, воспользуйтесь алфавитным указателем
в конце книги.
Описание каждого действия строится по следующей схеме: сначала приводится
синтаксис, затем следует краткое описание и, если необходимо, приводится при-
мер. Назначение параметров действий обычно понятно из их обозначения. Если
все же у вас возникли вопросы, обратитесь к справке Flash (выделите действие
и нажмите кнопку со знаком вопроса на панели Actions (Действия)).
Основные действия (Actions)

break
break;
Применяется в циклах for, for.. .in, do.. .while, while для прерывания выполне-
ния цикла.
a=new АггауО:
for (i-0: К100; i++) {
if (a[i] >= 100) break:
}
call
call(frame):
Вызывает сценарий, находящийся в указанном кадре.
Во Flash 5 рекомендуется использовать действие function.

478 Приложение 5. ActionScript
comment
// комментарий
Указывает на начало комментария.
continue
continue;
Заставляет пропустить оставшуюся часть тела цикла и перейти к проверке
условия выхода из цикла.
а=[1.0.2.2,0.2.102.5.2.8]
while (i<10) {
i++;
if (a[i]!=0) {continue;}:
trace (i);
// Печатаем номера всех нулевых элементов
delete
delete(reference):
Удаляет объект или переменную-аргумент и возвращает true, если объект был
успешно удален. В противном случае возвращает fal se.
do.. .while
do
{statement:}
while (condition) :
Сначала выполняются инструкции, указанные в фигурных скобках, а затем про-
веряется условие выхода из цикла (condition).
a=new ArrayO:
1—1;
do {i++:
// Заполняем массив а=[0. 1.2. 3.4. 5. б. 7. 8. 9, 10]
// Выводим значения по одному
trace (a[i]);}
while (i<10);
duplicateMovieClip
duplicateMovieClip (target, newname, depth):
Создает экземпляр клипа в процессе выполнения Flash-фильма.
on(release) {
i=40;
while(i>0) {
duplicateMovieClip (_root.star. "star" + i. i):
// Заполняем экран клипом звезд разной прозрачности
with ("star"+i ) {
_x=100*Math.random();
_y=100*Math.random():
_al pha=100*Math . random( ) ;
else
else {statements} :
Определяет альтернативные действия для действия i f .
a=new АггауО;
If (i<10) {a[i]-i:}
else {a[i]=i-10}:
else if
if (condition)
{statements;
} else if (condition){
statements;}
Последовательно выполняет действие el se, а затем i f . Используется только по-
сле действия if.
if (i<10) {a[i]=i:}
else if (i>=20)
else {a[i]=i-20}:
// Заполняем массив последними цифрами чисел до 30
for
fordnit: condition; next) { statement;}.
Выполняет инструкции, указанные в фигурных скобках, до тех пор пока не бу-
дет выполнено условие (condition). После ключевого слова также указываются
аргументы: init — инициализация переменной цикла, next — изменение пере-
менной цикла.
a=new АггауО:
for(i=0; i<10: i++)
{ a[i] = i*10:
trace (a[i]):}
// Заполняем массив числами 0. 10. 20. 30. 40. 50. 60. 70. 80. 90 и печатаем их
for.. .in
for (variableiterant in object){ statement; }
Действие выполняет инструкции, указанные в фигурных скобках, для всех
свойств (variableiterant) объекта (object).
for (name in myObject) {
trace "myObject. " + name
+"= "+ myObject[name]):}
fscommand
fscommandCcommand. arguments);
Позволяет Flash-фильму обращаться к проигрывателю Flash или браузеру и осу-
ществлять передачу данных JavaScript с помощью функции moviename_Dofscommand
на HTML-странице, содержащей фильм1.
fscommand ("quit"):
fscommandC' full screen", true);
1
В качестве приставки к имени функции Dofscommand используется имя Flash-фильма, указанное в
атрибуте name тега <EMBED> или атрибута id тега <OBJECT>. Например, если фильму присвоено
имя theMovie, функция JavaScript должна называться theMovie_Dofscommand.
function
function functionname ([argumentO. argumentl argumentN]) { statement(s)}
Объявляет функцию пользователя.
y=cube(2X:
function cube(x) { return x*x*x:}
getURL
getURUurl [. window [. variables]]);
Загружает документ с адреса URL в окно браузера или передает переменные
другому приложению.
gotoAndPlay
gotoAndPlay ([scene], frame);
Выполняет переход к указанному кадру указанной сцены и начинает воспроиз-
ведение фильма с этого места.
gotoAndStop
gotoAndStop(scene, frame);
Выполняет переход к указанному кадру указанной сцены и останавливает вос-
произведение фильма.
if
if (condition) { statements:}
Если условие condition имеет значение true, выполняются действия, указанные
в фигурных скобках.
ifFrameLoaded
ifFrameLoaded ([scene], frame) { statements;}
Проверяет, загружен ли кадр frame, и если да, то выполняются действия, указан-
ные в фигурных скобках.
^include
finclude "filename.as":
Включает содержание файла, указанного в качестве параметра. Расширение
.as — рекомендуемое расширение файла.
load Movie
loadMovie(url [target, method]]);
Загружает SWF-файл, замещая фильм-аргумент target.
on(release) {
loadMovie ("nextScene.swf"._root.myClip);}
loadMovieNum
loadMovieNum ( u r l . [level, method] );
Загружает SWF-файл на определенный уровень.
on(release) {
1oadMovi eNum("nextScene.swf"._! evel 0):}
load Variables
loadVariables(url. target [. method]);
Считывает данные из внешнего текстового файла, передавая их определенному
клипу.
on(release) {
1oadVa riables("data.txt". _root.myCli p):}
loadVariablesNum
loadVariablesNum ( url. level, method );
Считывает данные из внешнего текстового файла на определенный уровень в
фильме.
on(release) {
loadVariab1esrdata.txt". JevelO):}
nextFrame
nextFrameO;
Действие выполняет переход на следующий кадр и останавливает воспроизве-
дение.
,
nextScene
nextSceneC):
Выполняет переход на следующую сцену и останавливает воспроизведение.
on
on (mouseEvent) {statements; }
Обработчик события мыши или нажатия клавиши.
.
onClipEvent
г
onClipEvent(movieEvent)(statements; }
Обработчик события экземпляра клипа.
onClipEvent(keyDown) {
// Передвигаемся по кадрам фильма с помощью клавиш управления курсора
if (Key.getCode()==Key.RIGHT) {__parent.nextFrame();}
else if (Key.getCode()==Key.LEFT){_parent.prevFrame():}
play
playO:
Начинает воспроизведение фильма или клипа.
prevFrame
prevFrame();
Переводит воспроизведение на предыдущий кадр.
prevScene
prevSceneO ;
Переводит воспроизведение на предыдущую сцену и останавливает фильм.
print
printCtarget, "bmovie"):
print(target, "bmax");
print(target. "bframe");
16 Зак.96
Печатает клип с именем, указанным в параметре target, согласно модификатору

печати, указанному во втором параметре.
print("myMovie","bmovie");
printAsBitmap
printAsBitmapCtarget. "bmovie"):
printAsBitmapCtarget, "bmax"):
printAsBitmapCtarget. "bframe"):
Действие как растровый рисунок печатает клип с именем, указанным в парамет-
ре target, согласно модификатору печати, указанному во втором параметре1.
printAsBitmapC'myMovie "."bmovie ");
printAsBitmapNum
printAsBitmapNum ( level, type );
Аналог предыдущей команды, но указывается уровень (level) вместо фильма
или клипа.
printAsBitmapCJevelO. "bmovie"):
printNum
printNum ( level. type );
Аналог команды print, но указывается уровень (level) вместо фильма или клипа.
print (Jevell. "bmovie"):
removeMovieClip
removeMovieClip(target);
Удаляет экземпляр клипа, который был создан действием duplicateMovieClip.
return
return[expression]:
return:
Определяет значение, возвращаемое функцией пользователя.
function factorial (a){
if (а>1) {return a*factorial Са-1):}
else {return 1} }
set variable
variable = expression:
setCvariable, expression):
Определяет значение переменной.
Запись set(x,2); эквивалентна х=2.
setProperty
setPropertyCtarget, property, expression);
Изменяет свойство клипа при воспроизведении фильма.
on(release){ { setPropertyC'star".
alpha - 30):}
1
Используйте printAsBitmap для печати фильмов, в которых используются свойства прозрачное™
или специальные цветовые эффекты.
startDrag
startDrag(target):
startDragCtarget.nock]);
startDrag(target [Jock [. left. top. right, bottom]]);
Делает указанный клип перетаскиваемым.
on(press) { startDrag("".true);}
stop
stop 0:
Останавливает воспроизведение текущего клипа или фильма.
on(release){stop О:}
stopDrag
stopDragO:
Останавливает текущую операцию перетаскивания клипа.
on(release) { stopDrag():}
tellTarget
tellTarget(target) { statements: }
Применяет инструкции, перечисленные в фигурных скобках, к киноленте, ука-
занной в параметре target.
Во Flash 5 вместо функции tellTarget рекомендуется использовать действие
with.
toggleHighQuality
toggleHighQualltyO:
Переключает режимы сглаживания проигрывателя Flash.
on(release) {
toggleHighQualityO:}
trace
trace (expression):
Действие выводит значение expression в окне Output.
trace("Пример");
unloadMovie
unloadMovie(location);
Выгружает фильм, загруженный действием loadMovie.
un1oadMovie(_root):
unloadMovieNum
unloadMovieClevel):
Выгружает фильм, загруженный действием loadMovie.
on(press) {
unloadMovi e(_level15);}
var
van variableNamel [= valuel] [ variableNameN [-valueN]]:
Служит для объявления локальных переменных.
var s="string". b=true. n=12:
while
while(condition) { statements; }
Неоднократно выполняет действия, указанные в скобках, пока условие
(condition) не оказывается истинным.
whiled < 5) {
duplicateMovieClipC'star". "me" + i. i):
i++:}
with
with(object) { statement(s): }
Временно изменяет контекст, используемый для оценки выражений и действий,
указанных в фигурных скобках.
with (Russia){
_a1pha = 30;
with (Saint-Petersburg){
_alpha = 50;
I
with (Nevsky){
_alpha = 100;
1
Операторы (Operators)
% (остаток от деления)
expression! % expression2
Вычисляет остаток от деления параметра expression! на параметр expression2.
х = Ш5: // х равно 2
х = 4.3X2.1; // х равно 0.1
"" (кавычки)
"expression"
Служит для оформления значения строковой переменной.
() (круглые скобки)
(expressionl. expression2); functiontfunctionCalll functionCallN);
Служит для группировки или объединения параметров.
х - (2+3)*(4+5);
getTimeO:
gotoAndPlay("frame"):
,
* (умножение)
expressionl * expression2
Перемножает два числовых выражения.
+ (сложение)
expressionl + expression2
Прибавляет числовые значения или конкатенирует (объединяет) символьные
Если один из параметров — строка, другой параметр конвертируется в символь
ное значение, и оба значения объединяются.
*
- (вычитание, минус)
-expression
expressionl - expression2
Используется для присваивания отрицательного значения или вычитания.
/(деление)
expressionl / expression
Делит параметр expressionl на expression2.
++ (инкремент)
•n-expression expression-н-
Префиксный или постфиксный оператор инкремента, который прибавляет 1
к параметру expression. Префиксная форма оператора прибавляет 1 до возвра-
щения результата, постфиксная форма — после.
х = 1; у = ++х: // у равно 2
х = 1; у = х++; // у равно 1
- (декремент)
--expression expression--
Префиксный или постфиксный оператор декремента, который вычитает 1 из пара-
метра expression. Префиксная форма оператора вычитает единицу из параметра до
возвращения результата, постфиксная форма — после возвращения результата.
х = 5: у = --х: // у равно 4
х = 5; у = х--: // у равно 5
= = (равно)
expressionl == express!on2
Проверяет два выражения на равенство. Если выражения равны, результат ра-
вен true. Числа и логические значения сравниваются по значению и признаются
равными, если они имеют равные значения. Две строки равны, если они имеют
одинаковое количество символов. Переменные, объекты, массивы и функции
сравниваются по содержанию. Две переменные равны, если они ссылаются на
один и тот же объект, массив или функцию. Два разных массива никогда не
признаются равными, даже если они имеют одинаковое число элементов.
о (не равно)
expressionl <> expression2
Проверяет два выражения на равенство. Если параметр expressionl равен пара-
метру expression2, результат равен false. Числа, символьные и логические значе-
ния сравниваются по значению; переменные, объекты, массивы и функции срав-
ниваются по содержанию.
Рекомендуется использовать появившийся в программе Flash 5 оператор !=.
!= (не равенство)
expressionl != expression2
Проверяет два выражения на равенство. Если параметр expressionl равен пара-
метру expression2, результат равен false. Числа, символьные и логические значе-
ния сравниваются по их значению; переменные, объекты, массивы и функции
сравниваются по их содержанию.
< (меньше)
expressionl < expression2
Сравнивает два выражения. Если expressionl меньше expression, возвращается
true, если нет — false. Текстовые значения сравниваются по числу символов
в строке.
<= (меньше или равно)
expressionl <= expression2
Сравнивает два выражения. Если expressionl меньше или равен expression2, воз-
вращает значение true, в противном случае возвращает fal se.
> (больше)
expression! > expression2
Сравнивает два выражения. Если expressionl больше параметра expressionZ, ре-
зультат равен true, в противном случае — false.
>= (больше или равно)
expressionl >= expressionZ
Сравнивает два выражения. Если expressionl больше или равен expression?, ре-
зультат равен true, иначе — false.
! (логическое отрицание)
!expression
Инвертирует логическое значение expression.
&& (короткая конъюнкция)
expressionl && expressionZ
Короткая конъюнкция. Выполняет операцию конъюнкции (логическое «и»).
11 (дизъюнкция)
expressionl || expression2
Результат равен true, если один или оба параметра равны true; результат равен
f al se, только если оба параметра равны f al se.
not (логическое отрицание)
not expression
Выполняет логическое отрицание.
В программе Flash 5 следует использовать оператор !.
and (логическое «и»)
conditionl and condition2
Логический оператор умножения.
В программе Flash 5 следует использовать оператор &&.
or (логическое «или»)
conditionl or condition2
Логический оператор сложения.
В программе Flash 5 следует использовать оператор 1 1 .
typeof (определение типа)

typeof(expression):
Результат операции — строка, определяющая тип выражения (строка, клип,
объект или функция).
•
void (неопределенное значение)

void(expression):
Возвращает неопределенное значение.
Побитовые операторы (Bitwise Operators)

& (поразрядная конъюнкция)
expressionl & expression2
Конвертирует параметры expressionl и expression2 к 32-разрядным целым чис-
лам без знака и выполняет логическую операцию конъюнкции на каждом бите.
х = 5&7: / / х равно 5
« (поразрядный сдвиг влево)
expressionl « expressionZ
Конвертирует параметры в 32-разрядные целые числа и сдвигает все биты в
expressionl влево на количество разрядов, указанных в expression^. Разрядные
позиции, которые освобождаются в результате этой операции, заполняются ну-
лями. Сдвиг на один разряд эквивалентен умножению на 2.
х - 1«11: // х равно 2048
» (поразрядный сдвиг вправо)

expressionl » expressionZ
Конвертирует параметры в 32-разрядные целые числа и сдвигает все биты в
expressionl вправо на число разрядов, указанных expression2. Биты, сдвинутые
вправо, отбрасываются. Биты слева заполняются значением старшего бита.
Сдвиг вправо на один разряд эквивалентен целочисленному делению на 2.
х = 12345»8; // х равно 48
>» (поразрядный сдвиг вправо без знака)

expressionl »> expression2
Напоминает предыдущий оператор, за тем исключением, что он не сохраняет
знак первоначального выражения, потому что биты слева всегда заполняются
нулями.
х - -1 >» 1: //х равно 2147483647
Л
(поразрядная исключающая дизъюнкция)
expressionl * expression2
Конвертирует параметры в 32-разрядные целые числа без знака и для каждого
бита выполняет исключающую дизъюнкцию.
х = 11*3: // х равно 8. так как 111*011=100
| (поразрядная дизъюнкция)
expressionl | expression2
Конвертирует параметры в 32-разрядные целые числа без знака и для каждого

бита выполняет дизъюнкцию.
х - 11|3: // х равно 11. так как 111)011-1111
~ (поразрядное логичское отрицание)
~ expression
Конвертирует выражение в 32-разрядное целое число без знака, затем инверти-
рует биты. Говоря проще, оператор изменяет знак числа и вычитает 1.
х = ~0; // х равно -1
х = -1: // х равно -2
-
Операторы присваивания
(Compound Assignment)
%= (присваивание остатка)
expressionl %= expression
Присваивает expressionl результат операции expressionHexpression2.
// х %= у эквивалентно х = х%у
х = 16:
х %= 5 // х равно 1. так как 16^5 равно 1
&= (присваивание поразрядной конъюнкции)

expressionl &= expression2
Присваивает expressionl значение поразрядной конъюнкции expressionl и
expression2.
// х &- у эквивалентно х = х&у
х = 175;
х &= 7 // х равно 7, так как 175&7 равно 7
| = (присваивание поразрядной дизъюнкции)
expressionl |= expression2
Присваивает expressionl результат expressionl|expression2.
// х|=у эквивалентно х = х|у
х =- 16;
х |= 9 // х равно -7, так как -16)9 равно -7
л
= (присваивание поразрядной исключающей дизъюнкции)
expressionl A= expression2
Присваивает expressionl значение выражения expressionl*expression2.
// х *= у эквивалентно х - х*у
х = 16;
х* = 9 // х равно 25. так как 16*9 равно 25
*= (присваивание умножения)
expressionl *- expression2
Присваивает expressionl результат операции expressionl*expression2.
// х *- у эквивалентно х = х*у
х = 6-
х *= 10 // х равно 60
+= (присваивание сложения)
expressionl += expressionZ
Присваивает expression! результат операции expressionl+expression2.
// х += у эквивалентно х - х+у
х = 5:
х +=• 10; // х равно 15
у = "Меня зовут ";
у +- "Дмитрий"; // у равно "Меня зовут Дмитрий"
-= (присваивание вычитания)
expressionl -= expression2
Присваивает expressionl результат операции expressionl-expression2.
// х -= у эквивалентно х = х-у
х = 7;
х -= 8: // х равно -1
/= (присваивание деления)
expressionl /- expression
Присваивает expressionl результат операции expressionl/expression2.
// х /= у эквивалентно х = х/у
х = 10;
х /= 2; // х равно 5
/
«= (поразрядный сдвиг влево и присваивание)
expressionl «- expression2
Исполняет поразрядную операцию сдвига влево и присваивает результат1 пара-
метру expressionl.
// Следующие два выражения эквивалентны:
// А «= В;
// А = (А « В):
»= (поразрядный сдвиг вправо и присваивание)

expressionl =» expression2
Выполняет поразрядную операцию сдвига вправо и присваивает результат пара-
метру expressionl.
// А »- В
// А = (А » В)
>»= (поразрядный сдвиг вправо без знака и присваивание)

expressionl >»- expression2
Выполняет поразрядную операцию сдвига вправо без сохранения знака и при-
сваивает результат параметру expressionl.
// А >»= В
// А = (А >» В)
Строковые операторы (String Operators)

add
stringl add string2
Конкатенирует строки.
В программе Flash 5 рекомендуется использовать оператор +.
eq
expressionl eq expression2
Если expressionl равно expression^, возвращается true, в противном случае -
false.
В программе Flash 5 рекомендуется использовать оператор =.
де
expressionl ge expression2
Если expressionl больше или равно expression2, возвращается true, в противном
случае — false.
В программе Flash 5 рекомендуется использовать оператор >=.
gt
expressionl gt expression2
Если expressionl больше expression2, возвращается true, иначе — false.
В программе Flash 5 рекомендуется использовать оператор >.
1е
expressionl le expression2
Если expressionl меньше или равно expression2, возвращается true, в противном
случае — false.
В программе Flash 5 рекомендуется использовать оператор <=.
It
expressionl It expression2
Если expressionl меньше expression2, возвращается true, в противном случае -
false.
В программе Flash 5 рекомендуется использовать оператор <.
пе
expressionl ne expression2
Если expressionl не равен expression2, возвращается true, в противном случае г
false.
В программе Flash 5 рекомендуется использовать оператор !=.
Функции (Functions)
boolean
boolean(expression);
Конвертирует и возвращает логическое значение параметра.
escape
escape(expression);
Преобразует параметр в текст и кодирует в формат URL, где все алфавитно-
цифровые символы представлены в шестнадцатеричном коде со знаком процен-
myText = "Мой Текст"

х - escape (myText) // х равно «OC*EE*£9*20*F2*E5XEA*F1*F2 |
eval
eval(expression);
Возвращает значение переменной или свойства. Если параметр — объект или
клип, возвращается путь к нему.
false
false
Логическое значение (ложь).
getProperty
getPropertydnstancename, property):
Возвращает значение указанного свойства для экземпляра клипа.
getTimer
getTimerO:
Возвращает число миллисекунд, прошедших с момента запуска фильма.
getVersion
getVersionO;
Возвращает строку, содержащую версию проигрывателя Flash и информацию
о системе.
Например, если getVersionO; возвращает W I N 5,0,30,0, это означает, что исполь-
зуется операционная система Windows и проигрыватель Flash версии 5.0гЗО.О.
int
intCvalue):
Конвертирует десятичное число в самое близкое целочисленное значение.
Вместо функции int рекомендуется использовать метод Math.floor.
isFinite
isFinite(expression);
Функция верхнего уровня. Определяет значение параметра и возвращает true,
если это конечное число, и fal se, если это бесконечность (независимо от знака).
isNaN
IsNaN(expression);
Функция определяет значение параметра и возвращает true, если это не число,
указывая на присутствие ошибок.
maxscroll
variable name.maxscroll
Определяет номер строки, которая будет верхней в поле после прокрутки всего
текста.
on (release) { if (myText,scroll<myText.maxscrol 1) myText.scrol 1++;}
newline
newli ne;
Константа. Вставляет символ возврата каретки (перевод строки) в текст. Вместо
данной константы можно использовать символы \г.
number
Number(expression):
Преобразует параметр в число.
parseFloat
parseFloat(string);
Преобразует текст в число с плавающей запятой.
parselnt
parselnt(expression. radix):
Преобразует текст в целое число. Целые числа, начинающиеся с нуля или пред-
ставленные в восьмеричной системе счисления, интерпретируются как восьме-
ричные числа. Целые числа, начинающиеся с символов Ох, интерпретируются
как шестнадцатеричные числа.
х = parselnt("3.5"); // х равно 3
х - parselnt("4hf"); // х равно 4
х = parselntC'OxF"); // х равно 15
х = parselnt("44". 5); // х равно 24
random
random(value):
Возвращает случайное целое число между нулем и целым числом yal ue.
Вместо функции random рекомендуется использовать метод Math.random.
scroll
variablejiame.scroll - x
Определяет, с какой строки начинает отображаться текст в поле.
on (release) { pole.scroll = pole.scroll+1:}
string
String(expression);
Возвращает строковое представление указанного параметра.
targetPath
targetPath(movieClipObject):
Возвращает строку, содержащую целевой путь к клипу, указанному в параметре.
true
true
Логическое значение (истина).
unescape
unescape(x):
Функция, обратная функции escape. Преобразует строку из формата URL в ASCII-
символы и возвращает полученную строку.
updateAfterEvent
updateAfterEvent(movie_clip_event):
Обновляет экран после возникновения события клипа, указанного в качестве
параметра.
Строковые функции (String Function)

chr
chr(number);
Преобразует числа в кодировке ASCII в символы.
Рекомендуется использовать метод String.fromCharCode.
length
length(expression): length(variable);
Возвращает длину указанной строки или имени переменной.
Используйте метод и свойство 1 ength объекта Stri ng.
mbchr
mbchr(number):
Конвертирует ASCII-код в соответствующий символ.
Рекомендуется использовать метод String.fromCharCode.
!
mblength
mblength(string);
Возвращает длину символьной строки.
Используйте метод и свойство length объекта String.
.
mbord
mbord(character):
Конвертирует указанный символ в число.
Рекомендуется использовать метод String.charCodeAt.
mbsubstring
mbsubstring(value. index, count):
Извлекает подстроку из символьной строки.
Рекомендуется использовать метод String.substr.
ord
ord(character):
Преобразует символы в числовой ASCII-код.
Вместо функции ord рекомендуется использовать методы и свойства объекта
String.
substring
substring(string, index, count):
Извлекает часть строки.
Рекомендуется использовать метод String.substring.
Свойства (Properties)
.alpha
instancename._alpha;
Устанавливает или возвращает значение прозрачности (value) экземпляра кли-
па. Допустимые значения: от 0 (полная прозрачность) до 100 (абсолютная не-
прозрачность).
_currentframe
i nstancename._currentframe;
Возвращает номер текущего кадра киноленты (только для чтения).
_droptarget
draggableInstanceName._droptarget:
Возвращает абсолютный путь с применением синтаксиса слеша (/) к экземпля-
ру клипа, на который «отпустили» перетаскиваемый клип draggableInstanceName
(только для чтения). Используйте функцию eval для преобразования возвра-
щенного значения.
focusrect
_focusrect - Boolean;
Определяет, появляется ли прямоугольник на активном (имеющем фокус) эле-
менте управления. Значение по умолчанию — true.
_framesloaded
i nstancename._framesloaded;
Сообщает число уже загруженных кадров клипа (только для чтения).
if (_frames1oaded >= _totalframes)
{ gotoAndPlay ("Scene 1". "start"); }
else
{setProperty ("_root.loader". _xscale. (_frames1oaded/_totalframes)*100):}
_height
instancename._height;
Присваивает или возвращает высоту клипа.
_highquality
_highquality = value:
Определяет уровень сглаживания, применяемого к текущему фильму.
• value - 2 — наилучшее качество;
• value = 1 — высокое качество;
• value = 0 — низкое качество.
Свойства (Properties) 495
_name
instancename.jiame:
Определяет имя экземпляра клипа.
„quality
_quality:
Присваивает или возвращает качество воспроизведения фильма.
• Low — низкое качество;
• Medium — среднее качество;
• High — высокое качество;
• Best — наилучшее качество.
„rotation
i nstancename._rotati on:
Определяет угол поворота клипа в градусах.
_soundbuftime
_soundbuftime = integer;
Устанавливает число секунд предварительно загружаемого в буфер звука. Зна-
чение по умолчанию — 5 секунд.
„target
instancename._target:
Возвращает путь к экземпляру клипа (только для чтения).
_totalframes
i nstancename._totalframes;
Возвращает общее количество кадров в клипе (только для чтения).
_url
instancename._url;
Возвращает URL-адрес SWF-файла, из которого был загружен клип (только
для чтения).
.visible
i nstancename._vi si Ы е:
Определяет, является ли клип видимым.
.width
instancename._width:
Определяет ширину клипа.
_х
istancename._x;
Определяет координату х клипа относительно локальных координат родитель-
ского клипа. Если клип относится к главной киноленте, то начало его системы
координат (0,0) находится в верхнем левом углу сцены.
_xmouse
i nstancename._xroouse:
Возвращает координату х позиции указателя мыши (только для чтения).
_xscale
instancename._xscale:
Определяет горизонтальный масштаб (в процентах).
_У
instancename._y;
Определяет координату у клипа относительно локальных координат родитель-
ского клипа.
_ymouse
i nstancename._ymouse:
Указывает координату у позиции указателя мыши (только для чтения).
_yscale
Instancename._yscale;
Определяет вертикальный масштаб клипа (в процентах).
Объекты (Objects)
Массивы (Array)
concat
myArray.concat ( v a l u e O . v a l u e l . . . . v a l u e N ) ;
Добавляет к массиву туАггау параметры и записывает новый массив.
alpha - new A r r a y ( " a " . " b " . " c " ) ;
numeric = new Array(1.2,3):
alphaNumeric = alpha.concatСnumeric):
// Массив alphaNumeric содержит [ " a " , " b " , " с " . 1 . 2 . 3 ]
join
myArray.join (): myArray.join(separator);
Преобразует элементы массива в символьные значения, конкатенирует их,
вставляет указанный разделитель (separator) между элементами и возвращает
полученную строку.
myDate = new Аггау("2". " October","1957");
MyVarl = myDate.join( ):
// Переменная MyVarl содержит "2 October 1957"
length
myArray.length;
Свойство. Содержит длину массива. Автоматически изменяется, когда к масси-
ву добавляются новые элементы.
myArray - new ArrayO:
myArray[9] = 'с';
// Значение myArray.length равно 10
new Array
new Array ();
new Array(length);
new ArrayCelementO, elementl. element2....elementN):
Позволяет обращаться к элементам массива и управлять ими.
pop
щуАггау.рорО;
Удаляет последний элемент массива и возвращает его значение.
v
myColor = ["blue". "red", "grey", "green"]:

popped = myColor.popO:
// Popped содержит "green"
push
myArray.push (value....):
Добавляет один или большее количество элементов в конец массива и возвра-
щает его новую длину.
myColor = ["blue", "red"]:
pushed = myColor.pushC'grey", "green"):
// pushed содержит 4. myColor - ["blue", "red", "grey", "green"]
reverse
myArray.reverseО:
Изменяет порядок элементов массива на обратный.
var numbers = [0. 1. 2, 3. 4. 5. 6]:
trace(numbers.joi n()); numbers.reverse(): tracetnumbers.joi n()):
/* В окне Output будет выведено
0.1,2.3,4.5.6
6.5.4.3.2,1,0
*/
shift
myArray.shift();
Удаляет первый элемент массива и возвращает его значение.
myColor = ["blue". "red", "grey", "green"]:
shifted = myColor.popO:
// shifted имеет значение "blue"
slice
myArray.siice(start, end):
Извлекает часть массива и возвращает в виде нового массива без изменения ис-
ходного. Возвращенный массив включает все элементы, начиная с элемента
start, но не включая end.
myColor = ["blue", "red", "grey", "green"]:
MyColor2=myColor.slice(1.3):
// Массив MyColor2 будет содержать "red" и"дгеу"
sort
myArray.sort():
myArray.sort(orderfunc);
Сортирует элементы массива без создания его копии. Без указания параметра
orderfunc Flash сортирует элементы по возрастанию их значений или в алфавит-
ном порядке.
var myColor - ["blue", "red", "grey", "green"];

tracetmyColor. joinO):
myColor.sortO:
tracetmyColor. joinO);
/* Результат:
blue.red.grey.green
blue,green.grey.red
*/
splice
myArray.splicetstart. deleteCount. v a l u e d . v a l u e l . . . v a l u e N ) :
Добавляет и/или удаляет элементы массива без создания копии массива.
myColor - new Array ("blue", "red", "grey", "green");
myColor.spliced, 2, "yellow", "black");
trace(myColor.joinO);
blue.yellow.black.green
*/
toString
myArray.toStringO;
Возвращает строковое значение, представляющее элементы в указанном мас-
сиве.
myArray - new ArrayO; myArray[0] • 1: myArray[l] - 2; myArray[2] = 3: myArray[3] = 4:
myArray[4] = 5: trace(myArray.toStringO) Результат: 1.2.3.4.5
unshift
myArray.unshift(valuel.value2 valueN):
Добавляет один или более элементов в начало массива и возвращает новую дли-
ну массива.
myColor = new Array ("blue", "red", "grey", "green"):
tracetmyColor.unshiftC'l". "2". "yellow", "black")):
trace(myColor.joint)):
8
1,2 iyel1ow,black,Ы ue.red.grey,green
*/
Логические выражения (Boolean)

new Boolean
new BooleanO:
new Boolean(x):
Создает экземпляр объекта Bool ean.
myBool - new BooleanO:
toString
myBollean.toStringO:
Возвращает строковое значение.
valueOf
Bool ean. valueOfO:
Возвращает значение объекта Boolean.
Цвет (Color)
getRGB
myColor.getRGBO
Возвращает числовые значения, установленные последним вызовом setRGB.
getTransform
myColor.getTransform()
Возвращает измененное значение, установленное последним вызовом setTransform.
new Color
newColor(target):
Создает объект Color для клипа, указанного в параметре.
setRGB
myColor.setRGB(OxRRGGBB);
Устанавливает цвет.
setTransform
myColor.setTransform(colorTransformObject):
Метод возвращает набор цветов для изменения объекта Col or. Объект цветового
преобразования colorTransformObject должен иметь параметры га, rb, ga, gb, ba, bb,
аа или ab:
га — процент для красного компонента (от -100 до 100);
rb — смещение для красного компонента (от -255 до 255);
да — процент для зеленого компонента (от -100 до 100);
gb — смещение для зеленого компонента (от -255 до 255);
Ьа — процент для синего компонента (от -100 до 100);
bb — смещение для синего компонента (от -255 до 255);
аа — процент для прозрачности (от -100 до 100);
ab — смещение для прозрачности (от -255 до 255).
// Создаем объект с именем myColor для клипа myMovie
myColor - new Color(myMovie):
// Создаем объект преобразования цвета myColorTransfrom
myColorTransform - new Object;
// Установливаем значения для inyColorTransform
myColorTransform = { га: ' 5 0 ' . rb: ' 2 4 4 ' . д а : ' 4 0 ' . gb: '112', ba: '12', bb: ' 9 0 ' . аа:
' 4 0 ' . ab: 70'}
// Присваиваем изменение цвета объекту myColor
myColor.setTransform(myColorTransforrn);
• '•' • '!'
Дата (Date)
getDate
Date.getDateO;
Возвращает День месяца для указанного объекта Date.
getDay
Date.getDayO;
Возвращает день недели для указанного объекта Date.
getFullYear
Date.getFullYearO;
Возвращает четырехразрядный год для указанного объекта Date.
getHours
Date.getHoursO:
Возвращает час для указанного объекта Date.
getMilliseconds
Date.getMi11i seconds():
Возвращает миллисекунды для указанного объекта Date.
getMinutes
Date.getMinutesO;
Возвращает минуты для указанного объекта Date.
getMonth
Date.getMonthO;
Возвращает месяц для указанного объекта Date.
getSeconds
Date.getSecondsO:
Возвращает секунды для указанного объекта Date.
getTime
Date.getTimeO:
Возвращает число миллисекунд, прошедших с полуночи 1 января 1970 года по
Гринвичу, для указанного объекта Date.
getTi mezoneOffset
Date.getTimezoneOffsetO;
Возвращает разницу в минутах между временем компьютера и временем по
Гринвичу.
getUTCDate
Date.getUTCDateO;
Возвращает день месяца для указанного объекта Date соответственно времени
по Гринвичу.
getUTCDay
Date.getUTCDayO;
Возвращает день недели для указанного объекта Date соответственно времени
i. •/
getUTCFullYear
Date.getUTCFullYearO:
Возвращает четырехразрядный год для указанного объекта Date соответственно
времени по Гринвичу.
getUTCHours
Date.getUTCHoursO:
Возвращает час для указанного объекта Date соответственно времени по Гринвичу.
getUTCMilliseconds
Date.getUTCMi111 seconds();
Возвращает миллисекунды для указанного объекта Date соответственно времени
getUTCMinutes
Date.getUTCMinutesO:
Возвращает минуты для указанного объекта Date соответственно времени по
Гринвичу.
getUTCMonth
Date.getUTCMonthO:
Возвращает месяц для указанного объекта Date соответственно времени по
Гринвичу.
getUTCSeconds
Date.getUTCSeconds
Возвращает секунды для указанного объекта Date соответственно времени по
Гринвичу.
getYear
Date.getYearO;
Возвращает год для указанного объекта Date.
new Date
new DateO;
new Date(year [. month [. date [. hour [. minute [. second [. millisecond >]] ):
Создает новый объект Date.
setDate
Date.setDate(date):
Устанавливает день месяца для указанного объекта Date.
setFullYear
myDate.setFullYear(year [. month [, date]] );
Устанавливает полный год для объекта Date.
setHours
myDate.setHours(hour);
Устанавливает часы для объекта Date.
setMilliseconds
myDate.setMi11i seconds(mi 11i second);
Устанавливает миллисекунды для объекта Date.
setMinutes
myDate.setMi nutes(mi nute):
Устанавливает минуты для объекта Date.
setMonth
myDate.setMonthtmonth [. date ]):
Устанавливает месяц для объекта Date.
setSeconds
myDate.setSeconds(second);
Устанавливает секунды для объекта Date.
setTime
myDate.setTime(mi11isecond):
Устанавливает время для указанного объекта Date в миллисекундах.
setUTCDate
myDate.setUTCDate(date);
Устанавливает дату для указанного объекта Date соответственно времени
setUTCFullYear
myDate.setUTCFullYear(year [. month [. date]]):
Устанавливает год для указанного объекта Date соответственно времени
setUTCHours
myDate,setUTCHours(hour [. minute [. second [. millisecond]]])):
Устанавливает час для указанного объекта Date соответственно времени
setUTCMilliseconds
myDate.setUTCMi11i seconds( mi 11i second);
Устанавливает миллисекунды для указанного объекта Date соответственно
времени по Гринвичу.
setUTCMinutes
myDate.setUTCMinutes(minute [. second [. millisecond]])):
Устанавливает минуты для указанного объекта Date соответственно вре-
мени по Гринвичу.
setUTCMonth
myDate.setUTCMonth(month [. date]):
Устанавливает месяц для указанного объекта Date соответственно време-
ни по Гринвичу.
setUTCSeconds
myDate.setUTCSecondstsecond [. millisecond])):
Устанавливает секунды для указанного объекта Date соответственно вре-
мени по Гринвичу.
setYear
myDate.setYear(year):
Устанавливает год для указанного объекта Date соответственно показаниям
часов компьютера, на котором выполняется Flash-проект.
toString
Date.toString
Возвращает строковое значение, представляющее дату и время, сохраненную в

указанном объекте Date.
итс
Date.UTC(year, month [. date [, hour [. minute [, second [. millisecond >]);
Возвращает число миллисекунд между полуночью \ января 1970 года по все-
мирному времени и моментом, указанном в параметрах.
Клавиатура (Key)
BACKSPACE
Key.BACKSPACE
Константа, ассоциируемая с кодом клавиши Backspace (8).
CAPSLOCK
Key.CAPSLOCK
Константа, ассоциируемая с кодом клавиши CapsLock (20).
CONTROL
Key.CONTROL
Константа, ассоциируемая с кодом клавиши Ctrl (17).
DELETEKEY
Key.DELETEKEY
Константа, ассоциируемая с кодом клавиши Delete (46).
DOWN
Key.DOWN
Константа, ассоциируемая с кодом клавиши 4- (40).
END
Key.END
Константа, ассоциируемая с кодом клавиши End (35).
ENTER
Key.ENTER
Константа, ассоциируемая с кодом клавиши Enter (13).
ESCAPE
Key.ESCAPE
Константа, ассоциируемая с кодом клавиши Esc (27).
getAscii •
Key.getAsciiO;;
Возвращает ASCII-код последней нажатой клавиши.
getCode • . •
Key.getCodeO;;
Возвращает код последней нажатой клавиши.
HOME
Key.HOME
Константа, ассоциируемая с кодом клавиши Home (36).
INSERT
Key.INSERT
Константа, ассоциируемая с кодом клавиши Insert (45).
isDown
Key.isDown(keycode);:
Возвращает true, если нажата клавиша, указанная в параметре.
isToggled
Key. i sTogg 1 ed (key code);;
Возвращает true, если активизирована клавиша NumLock (144) или CapsLock (20).
LEFT
Key.LEFT .
Константа, ассоциируемая с кодом клавиши <- (37).
PGDN
Key.PGDN
Константа, ассоциируемая с кодом клавиши PageDown (34).
PGUP
Key.PGUP
Константа, ассоциируемая с кодом клавиши PageUp (33).
RIGHT
Key.RIGHT
Константа, ассоциируемая с кодом клавиши -» (39).
SHIFT
Key.SHIFT
Константа, ассоциируемая с кодом клавиши Shift (16).
SPACE
Key.SPACE
Константа, ассоциируемая с кодом клавиши Пробел (32).
TAB
Key.TAB
Константа, ассоциируемая с кодом клавиши Tab (9).
UP
Key.UP
Константа, ассоциируемая с кодом клавиши Т (38).
Математические функции (Math)

abs
Math.abs(x);
Абсолютное значение числа х.
acos
Math.acos(x);
Арккосинус х.
asin
Math.asin(x):
Арксинус х.
atan
Math.atan(x):
Арктангенс х.
atan2
Math.atan2(y. x);
Вычисляет угол от оси X до точки (у, х).
ceil
Hath.ceil(х):
Округляет число х до большего целого.
COS
Math.cos(x):
Косинус х.
Е
Math.E
Константа Эйлера и основание натуральных логарифмов.
Во Flash равна 2.71828182845905.
ехр
Math.exp(x);
Вычисляет экспоненту х.
floor
Math.floor(x):
Округляет число х до меньшего целого.
LN10
Math.LNIO
Натуральный логарифм числа 10. Во Flash равен 2,3025850929940459011.
LN2
Math.LN2
Натуральный логарифм числа 2. Во Flash равен 0,69314718055994528623.
log
Math.log(x):
Натуральный логарифм х.
LOG2E
Math.LOG2E
Логарифм Е по основанию 2. Bo Flash равен 1,442695040888963387.
LOG10E
Math.LOGlOE
Логарифм Е по основанию 10. Bo Flash равен 0,43429448190325181667.
max
Math.maxO;
Возвращает большее из двух целых чисел х и у.
min
Math.minU, у):
Возвращает меньшее из двух целых чисел х и у.
PI
Math.PI
Возвращает число к — отношение длины окружности к ее диаметру. Во Flash
равно 3.14159265358979.
pow
Math.pow(x. у):
Возводит х в степень у.
random
Math.randomO;
Возвращает псевдослучайное число в интервале между 0,0 и 1,0.
round
Math.round(x):
Округляет х до ближайшего целого числа.
sin
Math.sin(x):
Синус х.
sqrt
Math.sqrUx):
Квадратный корень х.
SQRT1_2
Math.SQRTlJ
Квадратный корень из 1/2. Во Flash равен 0,707106781186.
SQRT2
Math.SQRT2
Квадратный корень из 2. Во Flash равен 1,414213562373.

tan
Math.tan(x);
Вычисляет тангенс х.
Мышь (Mouse)
hide
Mouse.hide()
Скрывает указатель мыши, видимый по умолчанию.
show
Mouse. showO
Отображает указатель мыши.
Клипы (MovieClip)
attachMovie
anyMovieClip.attachMovie( idName. newname. depth);
Создает новый клип в библиотеке и присоединяет его к фильму.
duplicateMovieClip
anyMovieClip.duplicateMovieClipt newname. depth);
Создает экземпляр указанного клипа.
getBounds
anyMovi eCli p.getBounds( ta rgetCoordi nateSpace):
Возвращает минимальное и максимальное значения координат х и у для коор-
динатного пространства клипа, указанного в качестве параметра. Возвращаемый
объект будет содержать свойства {xMin, xMax, yMin, yMax}.
getBytesLoaded
anyMovi eCli p. getBytesLoadedO:
Возвращает число загруженных байтов для указанного объекта клипа.
getBytesTotal
anyMovieClip.getBytesTotalO:
Возвращает размер указанного объекта клипа в байтах.
MyText-"наш фильм занимает всего "+_root.getBytesTotalO/1024+" Кбайт на диске":
getURL
anyMovieClip.getURLt URL [.window, variables]]);
/•
Загружает документ с указанного адреса в указанное окно.

globalToLocal
anyMovieClip.globalToLocaK point);
Переводит глобальные координаты объекта сцены в локальные координаты клипа.
gotoAndPlay
anyMovieClip.gotoAndPlay( frame);
Инициирует воспроизведение клипа с указанного кадра.
gotoAndStop
anyMovieClip.gotoAndStopC frame);
Инициирует переключение и остановку клипа на указанном кадре.
hitTest
anyMovieClip.hitTesK x, у. shapeFlag):
anyMovieClip.hitTest(target);
Исследует, соотносится ли, и если да, то как (накладывается, пересекается), эк-
земпляр клипа с областью срабатывания, указанной параметром или заданной
координатами х и у. Согласно свойству shapeFl ag учитывается ограничивающий
прямоугольник или сама фигура клипа.
loadMovie
anyMovieClip.loadMoviet url [ . v a r i a b l e s ] ) :
Загружает и проигрывает фильм.
loadVariables
anyMovieClip.loadVariables( u r l . variables);
Считывает данные из внешнего текстового файла.
localToGlobal
anyMovieClip.1ocalToGlobal( point):
Переводит локальные координаты объекта point клипа в глобальные коорди-
наты.
nextFrame
anyMovieClip.nextFrameO :
Переключает клип на следующий кадр.
play
anyMovieClip.playO:
Начинает воспроизведение клипа.
prevFrame
anyMovieClip.prevFramet);
Переключает клип на предыдущий кадр.
removeMovieClip
anyMovi eCli p. removeMovieClipO;
Удаляет экземпляр клипа, созданного действием duplicateMovieclip либо мето-
дом duplicateMovieclip или attachMovie объекта MovieClip.
startDrag
anyMovieC11p.startDrag( [lock, left, right, top, bottom]);
Позволяет пользователю перетаскивать указанный клип. Одновременно можно
перетаскивать только один клип.
stop
anyMovieClip.stopO;
Останавливает воспроизведение клипа.
stopDrag
anyMovleCl1p.stopDragt):
Отменяет возможность перетаскивания, назначенную методом startDrag.
swapDepths
anyMovieClip.swapDepths(depth);
anyMovieClip.swapDepths( target);
Меняет уровень глубины экземпляра клипа, назначая ему уровень, указанный
в параметре.
•
unloadMovie
anyMovieCli p. unloadMovieO;
Удаляет клип, загруженный методом loadMovie или attachMovie объекта
MovieClip.
Числа (Number)
MAX_VALUE
Number. MAXJALUE
Константа, представляющая самое большое выводимое число. Это число при-
близительно равно 1J9769313486232E+308.
MIN_VALUE
Number. MINJ/ALUE
Константа, представляющая самое маленькое выводимое число. Это число при-
близительно равно 4,94065645841247Е-324.
NaN
Number.NaN
Константа, представляющая «не число» (Not a Number, NaN).
NEGATIVE_INFINITY
Number. NEGATIVEJNFINITY
Константа, представляющая отрицательную бесконечность.
new Number
myNumber = new Number(value):
Конструктор. Создает новый объект Number.
POSITIVE_INFINITY
Number. POSITIVEJNFINITY
Константа, представляющая положительную бесконечность. Ее значение совпа-
дает с глобальной переменной Infinity.
toString
myNumber.toString(radix):
Возвращает строковое представление объекта Number по основанию, указанному
в параметре.
valueOf
щу Number.valueOft);
Возвращает исходное значение объекта Number.
Объекты (Object)
new Object
new ObjectO:
new Object(value):
•
Конструктор. Создает новый объект Object.
toString
myObject.toStringO:
.
Метод. Конвертирует объект в строку.
valueOf
myObject.valueOfO:
Метод. Возвращает примитивное значение объекта или сам объект.
Выделение (Selection)
getBeginlndex
Selecti on.getBegi nIndex()
Возвращает индекс начала области выделения.
getCaretlndex
Selection.getCaretlndexC)
Возвращает позицию курсора в области выделения.
getEndlndex
Select1 on.getEndIndex()
Возвращает индекс конца выделенной области.
getFocus
Selection.getFocusO:
Возвращает имя переменной, связанной с. редактируемым текстовым полем и
имеющей фокус.
setFocus
Selection.setFocus(variable):
Перемещает фокус на поле, ассоциированное с переменной vari abl е.
setSelection
Selection.setSelection(start. end)
Присваивание начального и конечного индекса выделенной области.
Звук(Sound)
attachSound
mySound.attachSoundC'idName"):
Метод. Присоединяет звук к объекту mySound.
getPan
mySound.getPanO:
Метод. Возвращает уровень баланса.
getTransform
mySound.getTransform():
Метод. Возвращает информацию о преобразованиях звука, заданных последним
вызовом метода setTransform.
getVolume
mySound. getVolumeO:
Метод. Возвращает уровень громкости.
new Sound
new SoundO: new SoundCtarget):
Конструктор. Создает новый объект Sound для указанного клипа. Если вы не
определите адресат (параметр target), объект Sound будет управлять всеми зву-
ками в фильме.
setPan
mySound.setPan(pan):
Метод. Задает баланс между левым и правым каналами.
setTransform
mySound.setTransform(soundTransformObject);
Метод. Задает преобразование для звукового объекта.
MySoundTransformObject = new Object
MySoundTransformObject.il • 100
MySoundTransformObject.lr - 100
mySoundTransformObject.rr - 0
mySoundTransformObject.rl - 0
setVolume
mySound.setVolume(volume);
Метод. Задает уровень громкости для звукового объекта.
start
mySound. startO:
mySound.sta rt([secondOffset. 1oop]):
Метод. Начинает воспроизведение звука с начала, если ни один из параметров
не определен, или с места, указанного в качестве параметра secondOffset.
stop
mySound.stopO: mySound.stop(["idName"]);
Метод. Останавливает все звуки или только указанные в качестве параметров.
Строковые выражения (String)

charAt
myString.charAU index):
Метод. Возвращает символ, стоящий на месте index.
charCodeAt
myString.charCodeAt(index):
Метод. Возвращает код символа, стоящего на месте index. Возвращаемое значе-
ние — 16-разрядное целое число от 0 до 65 535.
concat
String.concatCvaluel valueN):
Метод. Объединяет указанные значения и возвращает новую строку.
fromCharCode
String.fromCharCode(cl.c2....cN):
Метод. Возвращает строку, составленную из символов, указанных в параметрах.
indexOf
myString.indexOftvalue);
myString.indexOf (value, start);
Метод. Находит строку и возвращает позицию первого указанного значения.
Если значение не найдено, метод возвращает -1.
lastlndexOf
myString.lastIndexOf(substring):
myString.lastlndexOf(substring, start);
Метод. Находит строку и возвращает индекс последней позиции substring, най-
денной в пределах вызываемой строки. Если подстрока не найдена, метод воз-
вращает -1.
length
string.length
Свойство. Возвращает число символов в указанном объекте String. Индекс по-
следнего символа для любой строки х равен x.length-1.
stringl="AfAfAfgfg";
counter=0;
counterl=0;
m=stringl.length;
for (i=0: i<m;i++)
{if (stringl.charCodeAt(i)==65) counter++ :
if (stringl.charAtd)—"f") counterl++ ;}
fa=counter; // fa равно 3
ff=counterl; '// ff равно 4
•
new String
new String(value);
Конструктор. Создает новый объект String.
slice
String.slice(start. end):
Метод. Извлекает подстроку указанного объекта Stri ng и возвращает ее как но-
вую строку без изменения первоначального объекта String. Возвращенная стро-
ка включает символ start и все символы до (но не включая) символа end.
split
myString.split(delimiter):
Метод. Разбивает объект String, разделяя строку везде, где находится указан-
ный в качестве параметра разделитель, и возвращает подстроки в массиве. Если
разделитель не определен, возвращенный массив содержит только один эле-
мент — собственно строку. Если разделитель — пустая строка, каждый символ
в объекте Stri ng становится элементом в массиве.
substr
myString.substr(start, length);
Метод. Возвращает подстроку, начиная с позиции start длиной length.
substring
myString.substringCfroni. to);
Метод. Возвращает подстроку, состоящую из символов между позициями, ука-
занными параметрами from и to.
toLowerCase
myString.toLowerCaseO;
Метод. Возвращает копию строки String со всеми символами в нижнем регистре.
toUpperCase
.myString.toUpperCaseO;
Метод. Возвращает копию Stri ng со всеми символами в верхнем регистре.
XML
appendChild
myXML.appendChi1d(chi1dNode);
Метод. Добавляет дочерний узел.
attributes
myXML.attributes;
Коллекция. Возвращает массив, содержащий атрибуты объекта XML.
childNodes
myXML.childNodes:
Коллекция (только для чтения). Возвращает массив дочерних узлов объекта myXML.
cloneNode
myXML.cloneNode(deep);
Метод. Конструирует и возвращает новый узел того же типа, что и myXML
createElement
myXML.createElement(name);
Метод. Создает новый элемент с указанным именем. Новый элемент изначаль-
но не имеет родителей и джочерних узлов. Метод возвращает ссылку на создан-
ный элемент.
17 Зак. 96
createTextNode
myXML.createTextNode(text);
Метод. Создает новый текстовый узел, содержащий указанный текст. Новый
узел изначально не имеет родителей и не может иметь джочерних узлов. Метод
возвращает указатель на созданный узел.
docTypeDecl
myXML.XMLdocTypeDecl:
Свойство. Задает и возвращает определение типа документа DOCTYPE.
firstChild
myXML.firstChild:
Свойство (только для чтения). Ссылается на первый дочерний узел в списке ро-
дителя.
haschildNodes
myXML.hasChildNodesO;
Метод. Возвращает true, если есть дочерние узлы, и false, если их нет.
insertBefore
myXML.insertBefore(childNode, beforeNode):
Метод. Вставляет дочерний узел childNode перед узлом beforeNode.
lastChild
myXML.lastChild:
Свойство (только для чтения). Ссылается на последний дочерний узел в списке
родителя.
load
myXML.load(url):
Метод. Загружает документ с указанного адреса.
loaded
myXML.loaded:
Свойство (только для чтения). Определяет успешность загрузки документа.
new XML
new XMLO; new XML(source):
Конструктор. Создает новый объект XML.
nextSibling
myXML.nextSibling;
Свойство (только для чтения). Ссылается на следующего «брата» в списке до-
черних объектов.
nodeName
my XML.nodeName:
Свойство. Задает и возвращает имя узла.
nodeType
myXML.nodeType:
Свойство. Возвращает тип узла: тип 1 — XML-элемент, З — текстовый узел.
nodeValue
myXML.nodeValue;
Свойство. Возвращает значение узла.
onLoad
myXML.onLoad(success):
Метод. Вызывается, когда документ получен сервером. Рекомендуется пере-
определить данный метод своей функцией.
parentNode
myXML.parentNode;
Свойство (только для чтения). Ссылается на родительский узел.
parseXML
myXML.parseXML(source);
Метод. Разбирает текст, указанный в качестве параметра как XML-документ.
previousSibling
myXM. previ ousSi Ы i ng;
Свойство (только для чтения). Ссылается на предыдущего «брата» в списке до-
черних объектов.
removeNode
myXML.removeNodeO:
Метод. Удаляет узел.
send
myXML.send(url): myXML.send(url. window):
Метод. Кодирует XML-объект в XML-документ и посылает по указанному ад-
ресу методом post.
sendAndLoad
myXML.sendAndLoad(url.targetXMLobject):
Метод. Кодирует XML-объект в XML-документ и посылает по указанному ад-
ресу методом post. Затем загружает ответ сервера и записывает в объект target -
XMLobject.
status
myXML.status;
Свойство (целое число), указывающее на успешность прочтения документа и
превращения его в XML-объект.
toString
myXML.toStringO;
Метод. Преобразует объект в строковое представление.
xmlDecl
myXML.xmlDecl;
Свойство. Задает и возвращает информацию об объявлении документа XML.
XMLSocket
close
my XMLSocket. closeO;
Метод. Закрывает соединение, указанное в myXMLSocketMethod.
connect
myXMLSocket.connect(host, port);
Метод. Устанавливает соединение с указанным сервером host через порт port
и возвращает true или false.
new XMLSocket
new XMLSocket О:
Конструктор. Создает XMLSocket-объект.
onClose
myXMLSocket. onCloseO:
Метод. Вызывается, когда соединение закрыто сервером. Рекомендуется пере-
определить данный метод своей функцией.
onConnect
myXMLSocket.onConnect(success):
Метод. Вызывается, когда заканчивает действовать метод XMLSocket. connect. Реко-
мендуется переопределить данный метод своей функцией.
onXML
myXMLSocket. onXMLO;
Метод. Вызывается, когда указанный XML-объект object «проходит» через соеди-
нение myXMLSocket. Рекомендуется переопределить данный метод своей функцией.
send
myXMLSocket. sencKobject):
Метод. Конвертирует object и посылает на сервер.
Другие действия
,(запятая)
expression!. expression2
Сначала определяется expression!, затем — expression2, и возвращается значение
expression2.
. (оператор точки)
object.property_or_method
i nstancename. van' abl e
i nstancename.chi1di nstance.vari able
Другие действия 517
Оператор точки используется для указания иерархии объекта, метода или свой-
ства.
my.name = "Дмитрий";
my.address = "улица, дон";
ту.city = "Гатчина":
?: (условное выражение)
expression! ? expressionZ : expressions
Если expression! равно true; возвращается значение expression2, в противном
случае — значение expressions.
х = 6;
У = 12:
. г = (х < 5) ? х : у;
trace Cz):
// Будет выведено 12
// (разделитель комментария)
// комментарий
Указывает начало комментария.
// Данная строка игнорируется ActionScript
/* (разделитель комментария)
/* комментарий */
/*
* комментарий
*/
Определяет одну или более строк в качестве комментария.
/*
*Данные строки
*игнорируются
*ActionScript
*/
[ ] (оператор доступа к элементу массива)
myArray = ["aO". al aN]:
туАггау[Е] - value
object[valuel, value2, ...valueN];
Оператор создает новый массив с указанными элементами или обращается к эле-
ментам в массиве. Он также позволяет обращаться к свойствам объекта.
{ } (объектный инициализатор)
object {namel: valuel. namel: value2, ... nameN: valueN }:
Оператор создает новый объект и инициализирует его парами свойств (имя и
значение).
=(присваивание)
expressionl = expression2
Оператор присваивает expressionl значение expression2.
_parent
_parent.property = х
Свойство определяет или возвращает путь к родительскому клипу.
_root
_root; _root.movieClip; _root.action:
Свойство определяет или возвращает путь к корневой киноленте фильма.
this
this
Ключевое слово ссылается на объект или экземпляр клипа.
Новые возможности Flash MX

Стихи новогодние
Пишет дитя, глаз не спуская
С обещанного мандарина.
В начале 2002 года свет увидела новая версия Flash — Flash MX (рис. П6.1). Ко-
нечно, нельзя сказать, что это привело к революционным изменениям в жизни
web-дизайнеров. Скорее это — очередная эволюционная ветвь программы. Мно-
гие изменения, наметившиеся в пятой версии, получили свое воплощение.
• Основательно поменялся внешний вид интерфейса.
• ActionScript стал еще более объектно-ориентированным.
• Появились новые настройки и возможности.
Найти новую версию программы можно на сервере Macromedia: www.macro-
media.com. Точный адрес продукта для загрузки был таким: http://download.
macromedia.eom/pub/shockwave/flash/english/win95nt/6.0.29.0/flashplayer6installer.exe.
Разработчики и дизайнеры
Первое, что бросается в глаза при открытии окна What's New (Что нового), — это
деление пользователей на дизайнеров и разработчиков (рис. П6.2). Для каждо-
го — свои новости. Это деление простирается не только на новостную ленту.
Если выбрать команду Window > Panel Sets (Окно > Настройка панелей), то в от-
крывшемся подменю классификация настроек панелей проводится с учетом
разрешения экрана и типа пользователя: Designer (Дизайнеры) и Developer (Раз-
работчики). На рис. П6.3 и П6.4 показаны примеры расположения панелей для
режимов Designer [1024x768] и Developer [1024x768].
1
520 Приложение 6. Новые возможности Flash MX
• :"::/:,:; '"'/.Name:
•.'Organization
Serial-Number:
Рис. П6.1. Окно, рассказывающее о программе Flash, тоже содержит анимацию
Macromedia Flash MX
For the developer
: What's ..Mew. Flash MX gives application
developers access to advanced
scripting and debugging tools, bum-
:
-movie prc in code reference, and Flash :
pv6'fvKj\v o! some с components to rapidly deploy rich
features in this rek<
For information about all the new

features in Flash MX, select
Flash MX provides new video Help > Using Flash
A': ^capabilities, enhanced color
;: 'management, TimHiine layer
;•:': foktefs, artci an optimizeci Щ
I workufjact! with a context-
Рис. П6.2. Сразу бросается в глаза деление на дизайнеров и разработчиков

Разработчики и дизайнеры 521
'••;;•;•:. -.• '•,••-"• ' •,-;•: :.-"."... . щ '-:••'•••:.'•;:", :'--•

s Macromedia Flash MX - fUtltittecM]
Г«е . Edit wew Insert Modify • Text tuntro, wrriow
Рис. П6.3. Расположение панелей для режима Designer [1024x768]
f МасгопгеЛа Flash MX - JUntitted-l

Ffe Edit view .inwt .MMify Text Contr
CheckBox f ComboBon
LislBox Ш PushBullon
Щ RadioBulloti | SciollBai
ScfolPane
Рис. Пб.4. Расположение панелей для режима Developer [1024x768]

Совместимость
Вместе с Flash MX увидел свет и новый Flash Player 6 (plug-in для браузеров,
позволяющий проигрывать Flash-фильмы). Он необходим, чтобы было воз-
можно просматривать фильмы, созданные во Flash MX, не только в авторской
среде, но и в браузере. Однако, как и в предыдущих версиях, вы можете экспор-
тировать ваш фильм для любой версии Flash Player. При этом будут использова-
ны только возможности указанной версии.
Формат файлов тоже изменился, но есть возможность сохранять фильмы и в
формате Flash 5. Если вы использовали какие-то новые возможности Flash MX,
программа выдаст вам список использованных новых средств и предупредит,
что все они будут потеряны, если файл будет сохранен в формате Flash 5. В лю-
бом случае никто не мешает для работы использовать Flash MX, а затем экспор-
тировать готовый фильм во Flash 5.
Инструменты
На панели инструментов объявились два новых жителя: Free Transform (Свобод-
ное преобразование) и Fill Transform (Преобразование заливки). По своей сути
это не новые инструменты, а получившие место под солнцем модификаторы.
Инструмент Free Transform (Свободное преобразование) вырос из модификато-
ров инструмента Arrow (Стрелка) — Scale (Размер) и Rotate (Вращение). В про-
цессе этого инструмент приобрел свои собственные модификаторы.
• Rotate and Skew (Вращение и скос) — произвольное вращение и скос объекта.
• Scale (Размер) — изменение размеров объекта.
• Distort (Искажение) — искажение нарисованной фигуры. Это новая возмож-
ность Flash MX: передвигая 8 черных маркеров, вы можете сильно исказить
объект.
• Envelope (Искажение огибающей) — искажение с помощью огибающей. У это-
го модификатора изначально 24 маркера на огибающей: 8 узловых точек и по
два маркера касательных на точку. Управляя ими, как маркерами на обычной
векторной кривой, квадрат можно легко превратить в кляксу (рис. П6.5).
Рис. П6.5. Модификаторы Distort и Envelope в работе

Панели 523
Два последних модификатора применимы только к рисованным фигурам, для символов
они недоступны.
Инструмент Fill Transform (Преобразование заливки), появившись на панели ин-

струментов, не приобрел ничего нового. Вы точно так же с его помощью можете
преобразовать градиентную и растровую заливку, только теперь вам не надо вы-
бирать инструмент Paint Bucket (Банка краски).
Панели
Панели претерпели наибольшие изменения. Некоторые исчезли — их поглотила
панель Properties (Свойства), другие сменили название, а третьи впервые увиде-
ли свет (рис. П6.6).
tj Macromedia Flesh MX- Untitled-1

B>3 Edit v !w insist щЦ1ЦЦ|1 И|Я|
Рис. П6.6. Все панели в одном окне
Большинство панелей теперь не плавающие — их положение закреплено в пра-

вой или нижней части экрана. Это отнимает существенную часть жизненного
пространства для работы над фильмом, но делает обращение с панелями более
простым — одним щелчком мыши на треугольнике рядом с названием панель
можно свернуть и развернуть.
Кнопка справа в строке названия открывает меню панели. Панель можно отпра-
вить в свободное плавание — надо только потащить за корешок в строке с на-
званием панели. Также можно вернуть панель обратно. Вы можете настроить
расположение и состав панелей по своему усмотрению и, как всегда, сохранить
настройки командой Window > Save Panel Layout (Окно > Сохранить расположение
панелей).
Панель Properties (Свойства)

Панель Properties (Свойства) стала инспектором свойств выделенного объекта
или инструмента. Если выбрать контурный инструмент, линию, или карандаш,
то панель будет напоминать старую панель Stroke (Контур). Если выбрать кисть,
то на ней останется только модификатор цвета заливки.
Для пера, эллипса и прямоугольника с помощью панели свойств можно настро-

ить и контур, и заливку. При выделенном кадре панель объединяет старые пане-
ли Frame (Кадр) и Sound (Звук).
Если выделить текстовый блок или просто выбрать инструмент Text (Текст), то
на одной панели можно настроить все параметры текста — раньше для этого
были необходимы три панели.
В остальных случаях панель отражает свойства фильма (см. рис. П6.4), причем на
ней появились некоторые параметры из окна Movie Properties (Свойства фильма).
Бывшая команда раскрывающегося меню Custom (Настройка) панели Stroke
(Контур) превратилась в самостоятельную кнопку. Теперь она открывает окно
Stroke Style (Стиль контура), в котором можно подробно настроить все парамет-
ры линий контура (рис. П6.7).
j Hatched В OK
|
||
| Hairline
; Distant
..' Л'''- •. : • ,.;;• .
atBlJNone
. ' . • •• • . • ;•.: • •
ijrvilllj Straight " ;
Lqual
..'..;" •;.'.:. : : ;:.;;j:;
Рис. Пб.7. Настройка контура
...^..iL..^..^.^.,..^^^.^.^..^.:...^^,.,^*.^^^^;*.^*.. >.•.*.:<•.:>:.,::-,~:~,>:,~,,..
'ЩВ1;«:] fl T'U
[URL
W ' JNramal
;:! A ' III static Te>:t

If \
Л* .*•::!:'::]:.: Ш||
,,,, , .• • .. • . . . . : . - . . . • - ... -
I J1C..9 1Я178.2 f.| ti f
Рис. П6.8. Разные варианты панели свойств текста

Панели 525
Вид панели свойств при выборе текста зависит от типа текстового блока
(рис. П6.8). Теперь для динамического текста и поля ввода можно задать имя,
через которое к блоку можно будет обращаться как к объекту. Не путайте его
с переменной — поле Var (Переменная) осталось без изменений. Пропали кноп-
ки для встраиваемых символов, которые украшали панель Text Options (Пара-
метры текста) в режиме поля ввода. Их заменила кнопка Character (Символ).
Новое — еще не забытое старое

Панели Info (Информация), Scene (Сцена), Align (Выравнивание) и Transform
(Преобразование) не претерпели никаких внешних изменений.
Панель Color Mixer (Палитра) кроме нового названия приобрела и новые аксес-
суары. Она включила в себя удаленную панель Fill (Заливка), а настройка цвета
стала похожа на стандартную в Windows.
Панель Color Swatches (Цветовые модификаторы) кроме площади под новые мо-
дификаторы и измененного названия не приобрела ничего.
Появилась новая панель — Components (Компоненты). Она содержит готовые
компоненты интерфейса: флажок, список, раскрывающийся список, кнопку, пе-
реключатель, полосу прокрутки и панель с полосами прокрутки. Если вы сохра-
ните свои собственные компоненты, они также появятся здесь. Это не абсолютно
новое веяние, а перекочевавшие из библиотеки на отдельную панель так назы-
ваемые smart clips (интеллектуальные клипы). Эти компоненты получили свое
воплощение и в действиях языка ActionScript. Во Flash MX они называются UI-
компонентами (UI — User Interface, интерфейс пользователя). Им посвящена
отдельная папка на панели Actions (Действия). Теперь вы сможете легко вста-
вить уже готовые клипы на свой сайт, а не моделировать их самостоятельно. Для
настройки компонентов можно вывести еще одну панель — Component Parameters
(Свойства компонентов). На ней вы сможете управлять компонентами интерфейса.
Еще одна новая панель — Answers (Ответы). На ней расположились некоторые
команды меню Help (Справка). Панель Output (Вывод) не претерпела видимых
изменений — это по-прежнему просто окно для вывода информации.
Панель библиотеки не изменилась, зато обогатились ресурсы панели общих
библиотек: кнопок, звуков и интерактивных уроков. Появилась еще одна новин-
ка от Macromedia — панель Sitespring. Здесь вы можете настроить доступ к одно-
именной системе сайтов.
Actions (Действия)
Панель Actions (Действия) претерпела значительные изменения (рис. П6.9). Теперь
это полноценный редактор сценариев.
Слева, как и раньше, находится список папок с действиями. Если вы знаете, что
вы ищете, то можно воспользоваться группой Index (Указатель), в которой по-
чти все действия перечислены в алфавитном порядке.
Над полем сценария находится довольно много кнопок:
• Add a new item to the script (Добавить новое действие в сценарий);
• Delete the selected action(s) (Удалить выделенное действие);
Find (Поиск);
Replace (Замена);
Insert a target path (Путь) — служит для указания пути к объекту;
Auto Format (Автоформат);
Show Code Hint (Показать подсказку);
Reference (Справка) — открывает одноименную панель;
Debug Option (Параметры отладчика) — открывает меню с командами уста-
новки и снятия точек останова:
Q Set Breakpoint (Задать точку останова),
О Remove Breakpoint (Удалить точку останова),
Q Remove All Breakpoints (Удалить все точки останова);
View Options (Параметры панели) — открывает меню с командами:
G Normal Mode (Обычный режим),
Q Expert Mode (Режим эксперта),
LJ View Line Numbers (Режим отображения номеров строк в поле сценария).
* Actions - Movie Clip

Actions fof [No instance name assigned] (ComboBox)
Functions «I
II
Constants
Properties
Objects
Deprecated
Flash UI Components
FCheckBox
P FComboBox
З FPushButlon.
Щ Methods ; ; л? ;.
® getEnabled
Ш getLabel
dS legisterSkinElem...
@ setClickHandler
setEnabled
setSize
setStyleProperty
Щ FRadioButton
E|| FScrolBat
.•.'•': Д FScmllPane
Д FStyleFofmat
й: Index :
Рис. П6.9. Обновленная панель редактора ActionScript

Панели 527
Кнопки с треугольниками, направленными вверх и вниз, служат для перемеще-

ния выделенных строк кода.
Верхний раскрывающийся список позволяет переключаться между выделенны-
ми объектами и кадрами. Кнопка справа с изображением канцелярской кнопки
прикрепляет сценарий к объекту или кадру.
Reference (Справка)
Как вы уже поняли, справочную информацию по ActionScript можно получить
прямо в авторской среде Flash. Для этого служит панель Reference (Справка). На
ней также присутствует иерархический список действий слева, а в правом поле
отражается описание выбранного действия.
Debugger (Отладчик)
Панель Debugger (Отладчик), также связанная со сценариями, приобрела более
рабочий вид (рис. П6.10). По сути, во Flash теперь есть полноценный отладчик
с возможностью прерывать работу сценария в нужном месте и следить за пере-
менными.
ЕВ
JevelO
il!
Caiistac*
Рис. П6.10. Отладчик
Accessibility (Специальные возможности)

Панель Accessibility (Специальные возможности) — достаточно серьезное новше-
ство. Macromedia использует технологию Microsoft Active Accessibility (MSAA)
в качестве интерфейса к специальным программам для людей с ограниченными
физическими возможностями (например, с плохим зрением или дефектами
рук). Теперь для объектов Flash можно назначать название, описание и сочета-
ния клавиш. К сожалению, эти возможности поддерживаются только во Flash
Player 6 для Internet Explorer. B Netscape и других браузерах, не использующих

подобную технологию, такая поддержка будет недоступна.
ActionScript
Значительно вырос список действий ActionScript. Это произошло за счет вклю-
чения в язык методов встроенных объектов. Нет смысла подробно описывать
все новые команды языка. Если вам сложно читать описание действий на ан-
глийском, можете приобрести «Самоучитель Flash MX» (см. список литературы)
или поискать перевод справки в Интернете.
СОВЕТ
Многие старые команды попали в папку Deprecated. Если вы настроились работать только
во Flash MX, лучше не использовать их. Однако для совместимости с другими версиями
Flash эти команды могут быть незаменимыми.
В качестве примера приведем описание методов объекта FScrollBar (Полоса про-

крутки).
FScrollBar
Компонент FScrollBar обеспечивает полосы прокрутки для динамического текста
и полей ввода. Методы этого компонента перечислены в табл. П6.1.
ВНИМАНИЕ
Методы компонентов не выполняют проверку на ошибки вводимых данных. Поэтому перед
использованием методов рекомендуется проверять правильность параметров.
Таблица П6.1. Методы компонента FScrollBar
FScrollBar.getEnabled Возвращает значение свойства доступности компонента
FScrollBar.getScrollPosition Возвращает целое число, представляющее
текущую позицию бегунка
FScrollBar.registerSkinElement Регистрирует свойство элемента оформления
FScrollBar.setChangeHandler Определяет функцию-обработчик, отслеживающую изме-
нения позиции бегунка на полосе прокрутки
FScrollBar.setEnabled Устанавливает свойство доступности компонента
FScrollBar.setHorizontal Задает направление полосы прокрутки:
горизонтальное (true) или вертикальное (false)
FScrol I Ba r. setLargeScrol I Задает число прокручиваемых позиций при щелке
на полосе прокрутки вне бегунка
FScrollBar.setScrollPosition Задает позицию бегунка для полосы прокрутки как целое
число между минимальной и максимальной позициями
FScrollBar.setScrollProperties Задает параметры полосы прокрутки
Прочее 529
FScrollBar.setScrollTarget Задает экземпляр текстового поля для присоединения

к нему полосы прокрутки
FScrollBar.setSize Задает длину полосы прокрутки в пикселах
FScrollBar.setSmallScroll Задает число пролистываемых позиций при щелчке на
кнопках прокрутки
FScrollBar.setStyleProperty Задает свойство стиля для компонента
Следующий сценарий задает параметры полосы прокрутки scrollText (горизон-

тальное расположение, прокручивание на 20 позиций при щелчке вне бегунка
и на 5 позиций при щелчке на кнопках, длина полосы — 400 пикселов) и при-
соединяет ее к текстовому полю textField:
scrolIText.setHori zontal(true):
scrollText.setLargeScrol1(25):
scrolIText.setSmallScroll(5);
scrollTextl.setSize(400);
scrol 1 Textl.setScrol1 Content("textFi eldl"):
Прочее
Перечислим прочие мелкие и серьезные нововведения.
• Появилась иерархия слоев. Теперь слои можно укладывать в папки, а пап-
к и — в другие папки.
• Исчезла строка быстрого доступа.
• Исчез Generator. Теперь рисунки и фильмы можно загружать напрямую с
помощью команды loadMovieQ.
• Теперь видео можно импортировать практически в любом формате, причем
Flash может изменить любые параметры этого видеоклипа, что позволит су-
щественно сокращать размеры Flash-фильмов.
• Flash MX позволяет создавать шаблоны (templates) и использовать их в ка-
честве заготовок для новых фильмов.
• Появилась возможность корректировать рисунки с точностью до пиксела при
помощи сетки.
Перечислять все изменения, произошедшие в программе, — значит написать но-
вую книгу, а это в наши планы сейчас не входит. Если вы будете работать с
Flash MX, вы сами без труда найдете различия и сумеете в них разобраться.
Главное — не бояться, и вперед — вас ждут великие дела!
Толковый словарик Интернета
От людских голосов
Пугливо вздрагивают по вечерам
Красавицы вишни.
Adult-сайт — сайт, содержащий информацию эротического или порнографиче-

ского характера, не предназначенную для детских глаз.
ASCII (American Standard Code for Information Interchange) — стандарт, опреде-
ляющий кодирование основных 256 символов, в соответствии с которым каж-
дой букве, цифре и специальным символам соспоставлено число от 0 до 255.
ASP (Active Server Pages) — технология, разработанная компанией Microsoft,
позволяющая выполнять скрипты на сервере. ASP-файл содержит встроенный
сценарий, который может выполняться на стороне сервера, если последний под-
держивает технологию ASP. С точки зрения клиента, ASP-документ -- это
обычный HTML-документ, который может просматриваться любым браузером.
CGI (Common Gateway Interface) — стандарт обмена данными между докумен-
тами. Главная задача, которую он решает, — это обеспечение вызовов клиентом
удаленных процедур на сервере.
Cookie — небольшой текстовый файл, расположенный на компьютере пользова-
теля, в который с помощью сценария можно записать и из которого можно счи-
тать информацию, необходимую для учета индивидуальных настроек пользова-
теля при отображении web-страницы.
CSS (Cascade Style Sheet) — каскадная таблица стилей; описание стилей, исполь-
зующихся для форматирования, оформления одного или нескольких HTML-до-
кументов.
Dial-up — основной способ подключения к Интернету (с помощью модема и
коммутируемой телефонной линии).
DNS (Domain Name System) — система определения IP-адресов по имени до-
мена.
DOM (Document Object Model) — объектная модель документа; представление
гипертекстового документа в виде набора объектов и их свойств, к которым
можно получить доступ с помощью языка сценариев.
Download — см. Загрузка.
DTD (Document Type Definition) — спецификация (описание правил) гипертек-
стового языка, написанная с использованием SGML.
E-mail — см. Электронная почта.
FAQ (Frequently Asked Questions) — сборники ответов на часто задаваемые во-
просы пользователей. В Рунете встречается русский эквивалент — ЧаВо.
В переводе В. Марковой и Т. Соколовой-Делюсшюй.

Толковый словарик Интернета 531
Firewall — см. брандмауэр.

Freeware — программное обеспечение, которое распространяется разработчиком
бесплатно, но с сохранением авторских прав на него.
FTP (File Transfer Protocol) — протокол передачи файлов по сети.
Gateway — см. Шлюз.
Ноте page — см. Домашняя страница.
HTML (HyperText Markup Language) — язык разметки гипертекста; основной
язык, использующийся для описания web-страниц.
HTML-документ — файл, содержащий описание web-страницы на языке HTML.
Имеет расширение .html или .htm.
HTTP (HyperText Transfer Protocol) — один из видов протокола для передачи
данных в Интернете (в данном случае — гипертекста).
ICQ — программа для обмена сообщениями в режиме реального времени, «сете-
вой пейджер». Произношение слова ICQ (аи си кью) созвучно английскому вы-
ражению «I seek you» (я ищу тебя).
Image map (изображение-карта) — графическое изображение, различные части
которого связаны гиперссылками с разными документами.
IP-адрес — уникальный числовой адрес компьютера, подключенного к Сети, со-
стоящий из четырех чисел от 0 до 255, разделенных точками, например
195.5.130.7.
JavaScript — язык сценариев, разработанный для Интернета. С его помощью
в HTML-документ можно встраивать небольшие программы, позволяющие
управлять HTML-страницей.
LAN (Local Area Network) — локальная сеть; ограниченная территориально ком-
пьютерная сеть.
Login — см. Логин.
MIME (Multipurpose Internet Mail Extensions) — система кодирования информа-
ции, как текста, так и мультимедиа, графики и т. п., для передачи по электрон-
ной почте.
NNTP (Network News Transfer Protocol) — протокол передачи новостей по Сети.
Off-line — автономный режим работы, без подключения к Интернету.
On-line — режим работы при наличии подключения к Интернету.
Password — см. Пароль.
Perl — язык программирования, используемый для написания серверных про-
грамм.
РНР — язык программирования, используемый для написания серверных про-
грамм.
POP (Post Office Protocol) — протокол, используемый почтовыми клиентами
для получения сообщений от почтового сервера.
РРР (Point-to-Point Protocol) — протокол для связи с провайдером через после-
довательную линию. Данный IP-протокол более надежен, чем SLIP.
Proxy-server — см. Прокси-сервер.
532 Толковый словарик Интернета
SGML (Standard Generalized Markup Language) — стандарт описания гипертек-

стовых языков. Язык HTML является подмножеством SGML.
Shareware — программное обеспечение, с которым вы можете работать бесплат-
но в течение некоторого времени. По истечении оговоренного срока вы должны
либо купить программу, либо отказаться от ее использования.
SLIP (Serial Line Internet Protocol) — протокол для связи с провайдером через
последовательную линию.
SMTP (Simple Mail Transfer Protocol) — протокол, используемый почтовыми
клиентами для отправки сообщений почтовому серверу.
£5/ (Server Side Includes) — директивы, вставляемые в HTML-документ и слу-
жащие для передачи указаний web-серверу. Страница, содержащая SSI-дирек-
тивы, имеет специальное расширение .shtml или .shtm.
TCP/IP (Transmission Control Protocol/Internet Protocol) — набор протоколов,
составляющих основу для передачи данных по Интернету. На основе TCP/IP
устанавливается связь между всеми серверами и клиентами в Интернете.
Upload — см. загрузка.
URL (Uniform Resource Locator, унифицированный указатель ресурса) — адрес
в Интернете, однозначно идентифицирующий web-страницу или другой ресурс,
например http://dimvovoch.narod.rU/Foto/l/index.html. Состоит из обозначения про-
токола (http), домена (dimvovoch.narod.ru ), пути и имени файла (Foto/1/index.html).
VBScript — язык сценариев, разработанный для Интернета компанией Microsoft.
Поддерживается браузером Internet Explorer.
Web-мастер — человек, который отвечает за администрирование сайта.
Web-сайт или web-страпица — цепочка логически связанных HTML-докумен-
тов, помещенных в Интернете. Как правило, файл начальной страницы сайта
носит название index.html. Если сайт содержит 1-2 страницы, его принято назы-
вать web-страницей.
Web-сервер - - программа, предназначенная для обработки HTTP-запросов.
Обычно под термином подразумевается совокупность оборудования, серверных
программ и web-сайта.
MWW (World Wide Web) — Всемирная паутина (кратко — Web, Сеть).
XML (extensible Markup Language) — расширяемый язык разметки гипертекста.
Характерной чертой XML является возможность добавления собственных те-
гов. На языке XML можно описать структуру любого документа.
Авторизация — подтверждение личности пользователя.
Апплет — встроенная в web-страницу программа на языке Java.
Баннер — статичное или анимированное изображение, размещаемое на страни-
цах сайта с рекламной целью.
Баннерная сеть — сообщество сайтов для взаимного обмена баннерами.
Брандмауэр (firewall) — совокупность аппаратных и программных средств, обес-
печивающих защиту локальной сети.
Браузер — программа, работающая на стороне пользователя и позволяющая про-
сматривать документы в WWW.
Виртуальный — находящийся не в реальном мире, а в киберпространстве.

Вирус — программа, созданная из хулиганских побуждений, которая способна
выполняться без ведома и желания пользователя, несанкционированно исполь-
зуя ресурсы компьютера (память, дисковое пространство и т. п.). Кроме того,
программа-вирус может самовоспроизводиться, копируя свой код по Интернету
на другие компьютеры, например с помощью электронной почты, за счет чего
вирусы распространяются по всей Сети. Для борьбы с вирусами служат ан-
тивирусные программы, контролирующие использование ресурсов приложе-
ниями.
Внедрение (embedding) — сохранение объекта, например шрифта или рисунка,
в одном файле вместе с документом. Внедрение используется для того, чтобы
обеспечить доступность всех составляющих документа при его пересылке и ко-
пировании, однако внедренные объекты увеличивают размер файла.
Выделенная линия — коммуникационная линия, позволяющая пользователям
иметь постоянное прямое подключение к Интернету, как правило, минуя теле-
фонные узлы. Обычно используется для подключения локальной сети организа-
ции к серверу провайдера.
Гипертекст — текст, содержащий гиперссылки, то есть ссылки на другие доку-
менты или их части.
Демон (daemon) — программа, обеспечивающая выполнение сервисных операций
на сервере.
Домашняя страница (Home page) — страница, загружаемая по умолчанию при
запуске браузера.
Домен — имя совокупности объектов в Интернете. Например, ru — домен Рос-
сии.
Загрузка — передача информации с одного компьютера на другой. При переда-
че данных из Сети к пользователю используется выражение «download» (пере-
дача с верхнего уровня на нижний), при передаче от пользователя в Сеть -
«upload» (передача с нижнего уровня на верхний).
Закладка — сохраненный браузером адрес web-документа. Как правило, заклад-
ки используются для быстрого повторного доступа к необходимым ресурсам Сети.
Идентификация — процедура определения тождественности пользователя, не-
обходимая для управления доступом к ресурсу. Как правило, для идентифика-
ции необходимо предъявить имя пользователя и пароль.
Индексация — лексический анализ и разбор текстовых материалов сайта с целью
составления списка используемых слов и выражений. Составленный таким об-
разом список используется при поиске информации на сайте по запросу пользо-
вателя. Индексация производится в автоматическом режиме специальными
программами, называемыми поисковыми роботами. Индексация используется
всеми поисковыми системами. •
Интернет (Internet) — Всемирная компьютерная сеть.
Интранет (Intranet) — сеть, использующая технологии Интернета, но ограни-
ченная одной организацией.
Клиент — компьютер пользователя сети, имеющий соединение с сервером; кон-

цевая точка сети. Клиентом также называют прикладную программу, которая со
стороны пользователя делает это соединение возможным.
Кэш — временное хранилище информации, полученной браузером из Интерне-
та, находящееся на жестком диске пользователя и предназначенное для быстрой
повторной загрузки web-страниц. Также позволяет просматривать ранее загру-
женные web-страницы в автономном режиме (без подключения к Сети).
Логин (login) — имя пользователя, которое используется для доступа к локаль-
ному или удаленному компьютеру.
Маршрутизатор — аппаратное и программное обеспечение, позволяющее под-
ключить локальную сеть к Интернету.
Модем — устройство, соединяющее компьютер с каналом передачи данных, на-
пример с телефонной линией, и позволяющее обмениваться данными по этому
каналу.
Навигация — процесс перемещения по сайту или по сети при помощи гиперссы-
лок.
Ник — сетевой псевдоним, имя.
Пакет — базовая единица данных в Интернете. Сообщение, пересылаемое по
Сети, разбивается на пакеты, каждый из которых снабжается адресом и другой
информацией, необходимой для его доставки получателю.
Пароль (password) — комбинация букв, цифр и других печатаемых символов,
подтверждающая право доступа к ресурсам.
Подписка — процедура добавления адреса в список рассылки. Например, для
того чтобы получать периодические сводки новостей по электронной почте, не-
обходимо подписаться на эту услугу на новостном сайте.
Поисковый робот — программа, осуществляющая автоматический поиск ресур-
сов в Интернете и их регистрацию на поисковом сервере.
Провайдер — организация, предоставляющая доступ к Интернету и связанные с
ним дополнительные услуги, например e-mail, FTP, хостинг.
Прокси-сервер (proxy-server) — комплекс программ у провайдера, решающий за-
дачи кэширования полученной из Интернета информации и защиты клиентов
от несанкционированного доступа извне.
Пропускная способность канала данных — характеристика канала передачи дан-
ных. Определяет количество информации, передаваемой в единицу времени.
Чем больше пропускная способность, тем быстрее могут пересылаться данные.
Протокол — спецификация, совокупность правил, описывающая процесс обме-
на информацией.
Разрешение имен — процесс перевода доменного имени Интернета в соответст-
вующий IP-адрес.
Раскрутка — комплекс мер для рекламы ресурса (показ баннеров, почтовая рек-
лама, регистрация в каталогах и поисковых системах, поиск рекламных партне-
ров и т. п.).
Регистрация доменного имени — закрепление определенного доменного имени за

физическим или юридическим лицом путем внесения соответствующей инфор-
мации в регистрационную базу данных организации, координирующей распре-
деление доменных имен. Для зоны RU такой организацией является Российский
НИИ развития общественных сетей (RIPN). Адрес сайта этой организации -
www.ripn.net. Для зоны СОМ имена распределяют несколько авторизованных для
этого частных компаний. Например: www.registrator.com.
Релевантность — степень соответствия текста сайта слову или выражению, за-
данному в качестве ключа при поиске информации. Используется поисковыми
системами для определения порядка выдачи результатов поиска. Наиболее ре-
левантными считаются результаты, полностью совпадающие с текстом запроса.
Рунет — русскоязычная часть Интернета.
Сайт — см. Web-сайт.
Сервер — компьютер или программа, обслуживающая запросы клиента и пере-
сылающая их другим серверам.
Сервлет — класс Java, вызов методов которого производится не клиентом, а не-
ким приложением (которое называется сервером сервлета; как правило, это один
из стандартных web-серверов). В этом плане сервлет очень похож на апплет Java.
Серфинг — перемещение по Сети без определенной или с постоянно изменяю-
щейся целью.
Сетевой этикет — правила этикета, управляющие поведением пользователей
в Интернете. За соблюдением сетевого этикета следят модераторы серверов.
Скрипт — см.сценарий.
Спам - - рассылка сообщений, носящих рекламный характер, одновременно
большому числу пользователей, как правило, не желающих получать подобные
сообщения.
Список рассылки — способ одновременной отправки электронных сообщений
группе заинтересованных лиц, а также собственно перечень этих лиц.
Статистика сайта — статистические данные, полученные путем учета инфор-
мации о посещений страниц сайта. Для сбора статистики используются счетчи-
ки и трэкеры.
Сценарий (скрипт) — программа, написанная на одном из языков для создания
сценариев (JavaScrit, ActionScript и др.) и содержащая команды, выполняемые
клиентом или сервером.
Счетчик — сценарий, производящий подсчет посетителей страницы.
Трэкер — расширенный вариант счетчика, предназначенный для сбора инфор-
мации о посетителях web-страницы. Среди сведений, собираемых трэкерами, -
имя и версия используемого браузера; операционная система, установленная на
компьютере посетителя; разрешение экрана и глубина цвета; информация о том,
разрешено ли пользователем применение языков сценариев, и др. Также можно
определить географическое расположение посетителя (регион), время посеще-
ния и некоторые другие персональные, но не конфиденциальные сведения.
Форум — аналог гостевой книги, дополненный возможностью отвечать на ре-

плики его участников, благодаря чему каждый вопрос образует отдельное дере-
во обсуждения. Как правило, форумы организуются по тематическому прин-
ципу, и обсуждать вопросы, не касающиеся заданной тематики, на форумах
запрещается. Например, форум может быть посвящен автомобилям, аквариуми-
стике, конкретному языку программирования и т. д.
Хакер — программист, для собственного удовольствия, с целью наживы или из
хулиганских побуждений стремящийся преодолеть средства защиты данных и
получить несанкционированный доступ к ресурсу через Сеть.
Хостер — организация, предоставляющая услугу хостинга.
Хостинг — предоставление дискового пространства на сервере для размещения
web-сайта или web-страницы, иногда одновременно с предоставлением допол-
нительных услуг, например гостевой книги, форума и т. д.
Хост — любой подключенный к Интернету компьютер, независимо от его на-
значения.
ЧаВо - см. FAQ.
Чат — «виртуальный разговор», обмен сообщениями в режиме реального вре-
мени.
Шлюз (gateway) — компьютер, соединяющий несколько сетей и позволяющий
им обмениваться информацией между собой. При необходимости осуществляет
преобразование форматов передаваемых данных (например, при использовании
сетями разных протоколов).
Электронная коммерция — проведение транзакций с помощью Интернета.
Включает в себя любые формы деловой активности в Сети.
Электронная почта (e-mail) — способ обмена сообщениями между компьютера-
ми через Интернет.
Литература
'
Работа с браузерами
• Денисов А. Р. Internet Explorer 5.5: Справочник. СПб.: Питер, 2001.
Web-дизайн
• Вин Дж. Искусство web-дизайна: Самоучитель. СПб.: Питер, 2002.
• Нидерст Дж. Web-мастеринг для профессионалов. СПб.: Питер, 2001.
• Федорчук А. В. Как создаются web-сайты: Краткий курс. СПб.: Питер, 2000.
• Холмогоров В. Основы веб-мастерства: Учебный курс. 2-е изд. СПб.: Питер,
2003.
• Якушина Е. В. Изучаем Интернет, создаем web-страничку. СПб.: Питер, 2001.
HTML
• Гончаров А. Ю. Самоучитель HTML. СПб.: Питер, 2001.
JavaScript
• Бишоп Дж. Эффективная работа с Java 2. СПб.: Питер, 2002.
• Бранденбау Дж. JavaScript: Сборник рецептов для профессионалов. СПб.:
Питер, 2001.
• Китсли-Хъю К., Кингсли-Хъю Э. JavaScript 1.5: Учебный курс. СПб.: Питер,
2002.
Работа в Интернете
• Кузнецов И. Анимация для Интернета: Краткий курс. СПб.: Питер, 2001.
• Холмогоров В., Солоницын Ю. Интернет: Энциклопедия. 3-е изд. СПб.: Питер,
2002.
Работа с Flash
• Жданов A. Flash 5: Краткий курс. СПб.: Питер, 2001.
• Исагулиев К., Жданов A. Macromedia Flash 4: Краткий курс. СПб.: Питер, 2000.
• Лапин П. Самоучитель Flash MX. СПб.: Питер, 2003.
• Панкратова Т. Flash 5: Учебный курс. СПб.: Питер, 2001.
• Сандерс Б. Flash ActionScript: Учебный курс. СПб.: Питер, 2001.
• Сандерс Б. Эффективная работа с Flash 5. СПб.: Питер, 2002.
Работа с Photoshop
• Бурлаков М. Photoshop 6 и ImageReady 3: Справочник. СПб.: Питер, 2001.
• Гурский Ю., Корабельиикова Г. Эффективная работа с Photoshop 6.0: трюки
и эффекты. СПб.: Питер, 2002.
• Левисей Б., Ксенакис Д. Photoshop 6 для профессионалов. СПб.: Питер, 2002.
• Луций С., Петров М. Самоучитель Photoshop 6. СПб.: Питер, 2002.
• Панкратова Т. Photoshop 7: Учебный курс. СПб.: Питер, 2002.
• Тайц А. А., Тайц А. М. Эффективная работа с Photoshop 6. СПб.: Питер, 2002.
Алфавитный указатель
В алфавитный указатель не вошли ссылки на опредления, данные в словарике
Интернета. Указатели тегов HTML, команд и объектов JavaScript и действий
ActionScript следуют за алфавитным указателем.
JavaScript (продолжение) баннер (продолжение)

(тире), 313 обмен данными с Flash, 303 со сценарием
(неразрывный пробел), 75 полезные ссылки, 354 на JavaScript, 117
примеры сценариев, 257 создание, 113
А-Е создание баннера, 117 стандарты, 114
anti-aliasing, 67, 236 тестирование сценариев, 214 бегущая строка, 117
cookie, 258 JPG, 232 бланк сообщения, 133, 136
Dreamweaver, 209 браузер, 207
e-mail, 277, 302 м-о определение версии, 209
Microsoft Word, 221 отображение ошибок, 214
F Netscape текстовый, 212
Flash, 24, 346 Web-мастер, 69 1
анимированный текст, 123 почта, 136 В

графический текст, 235 Outlook Express, 133 векторное изображение, 229
заставка, 248 верстка сайта, 68, 205
знакомство, 87 встроенный сценарий
игра, 324 Photoshop, 227 JavaScript, 123
обмен данными гистограмма, 63 выравнивание, панель Align, 92
с JavaScript, 303 графический текст, 66
открытка, 137, 144, 155 обработка сканированного
полезные ссылки, 353 изображения, 62 генератор, 289
создание палитры, 100 сканирование, 59 гиперссылка, ИЗ
формы, 281 фильтры, 63 гистограмма, 63
Flash MX, 519 ping, 350 главная страница, 31, 36, 58
FrontPage Express, 309 PNG, 231 гостевая книга, 41, 277, 352
градиентная заливка, 101
G и графическая ссылка, 239
Generator, 289 Unicode, 267 графические форматы
GIF, 229 файлов, 29
w GIF, 229
H Web-мастер от Netscape, 69 JPG, 232
HTML, 23 Word, 221 PNG, 231
добавление фильма автозамена, 223 графический текст, 234
на Flash, 105 добавление примечаний, 223
полезные ссылки, 354
сайт по шаблону, 31, 50
запись исправлений, 224
проверка орфографии, 221
ддействия ActionScript
создание сайта, 56 создание макросов, 224 fscommand, 303
формы, 263 getBytesLoaded, 243
А getURL, 301
I-J автозамена, 223 gotoAndPlay, 99
image map, 240 автор web-страницы, 71 gotoAndStop, 100
JavaScript, 23 анкета, 42 loadVariables, 293
версия браузера, 209 startDrag, 341
встроенный сценарий, 123 Б stop, 99
игра, 308, 318 баннер, 112 stopDrag, 341
изменение строки в нагрузку, 23 диаграмма, 290
состояния, 256 служба обмена, 111 дизайн сайта, 189
ключевой кадр, 87 разрешение

заголовок страницы, 110 ключевые слова сканера, принтера, 60
закладки web-страницы, 71 экрана, 211
в Избранном, 112 кнопка раскадровка, 91
на Яндексе, 35 Flash, 95, 146 раскрывающийся список, 273
заливка HTML, 263 рассылка, 352
градиентная, 101 картинка-кнопка, 120 растровая заливка, 104
растровая, 104 кодировка, 203 растровое изображение, 229
заставка на Flash, 242 конструктор сайта, 31, 50 регистрация
звуковое сопровождение, 181, контейнер, 365 в поисковой системе, 110
246 контекстное меню Flash, 88 на www.geocities.com, 48
золотое сечение, 228 кривая Безье, 145 на www.narod.ru, 28
регулярные выражения, 422
И л-м редактирование сайта, 36, 52
игра логотип сайта, 32, 201 ролик-заставка, 242
на Flash, 324 макет сайта, 191
на JavaScript, 308, 318 макрос, 224
идея сайта, 185, 189 маска, 140 сайт
Издатель Web, 218 Мастерская на www.narod.ru, 31 , верстка, 68, 205
изображение-карта, 240 меню, 298 дизайн, 189, 193
импорт метка на странице, 241 макет, 191
закладок на Яндекс, 35 морфинг, 151 навигация, 200
звукового файла общая идея, 185, 189
во Flash, 182 н подготовка текста, 220
растровой графики набор цветов размещение в Сети, 22,
во Flash, 91 создание, 70 84, 217
сканированного сохранение, 103 редактирование, 36, 52
изображения, 59 навигация, 200 структура, 198
индикатор загрузки, 242 направляющая, 172 тестирование, 83, 206
интерактивность, 20-22, 345 нарезка изображения, 239 цветовая гамма, 192
интерактивные этапы создания, 184
элементы, 345, 352 О сглаживание текста, 67
анкета, 42 обои, 32 символ (Flash), 87
гостевая книга, 41, 277 объединение ячеек, 75 графический, 93-94
опрос, 44, 279 описание web-страницы, 71 клип, 98, 124
счетчик, 41, 52 опрос, 44, 279, 352 кнопка, 95
трэкер, 53 орфография, 221 текстовый, 96
форум, 46, 278 ошибки сценария, 214 сканирование, 59
чат, 47, 279 слой
интерактивные эффекты п Flash, 87, 91
cookie, 258 панели.Flash, 89 служебный, 172
бегущая строка, 256 панель инструментов Flash, 87 службы обмена баниерами, 111
добавление в Избранное, 112 переключатель, 272 служебный слой, 172
изменяющееся пиксел, 60 события JavaScript, 120
изображение, 255 поисковые системы, 108 создание сайта
откуда пришел регистрация,110 на Flash, 90
посетитель, 257 поисковый робот, 110 на HTML, 56
правая кнопка мыши, 257 поле ввода, 42, 265 с помощью шаблона, 31,51
сделать страницу во Flash, 281 специальные символы, 226
стартовой, 112 многострочное, 268 список
информер, 280 почтовый бланк, 133 маркированный, 375
правописание, 221 нумерованный, 375
К публикация текстов в Сети, 200 раскрывающийся, 273
кадр Flash, 87 ссылка
калька, 159 графическая, 239
каталог сайтов, 37 размещение сайта на e-mail, 277, 302
кинолента, 87 в каталоге, 37 стол, Flash, 87
клип, 98, 124 в Сети, 22, 84, 217 строка быстрого запуска, 88
540 Алфавитный указатель тегов HTML
строка ввода, 42 тестирование ц-ч

структура сайта, 198 сайта, 83, 206 цветность экрана, 210
сценарий сценариев, 214 цветовая гамма сайта, 192
ActionScript, 99 фильма, 212 часы
JavaScript, 105 тире (&Я151;), 313 при помощи Flash, 260
тестирование, 214 транслит, 29 при помощи
шаблон страницы, 75 трехпанельный макет, 201 JavaScript, 257
счетчик, 41, 52, 352 трэкер, 53 чат, 47, 279, 352
считывающая головка, 87
ш
указатель мыши, 341 шаблон
таблица, 71, 191, 205 HTML-страницы, 31-35,
тег, 24, 69 Ф 51
текст фильм, 90 сообщения Outlook
анимированиый, 123 фильтры, 63 Express, 136
в строке состояния, 256 флажок, 42, 271 шрифт
выбор шрифтов, 193 форма внедрение, 235
графический, 66, 234 HTML, 263 выбор, 193
динамический, 460 во Flash, 281 преобразование
подготовка, 58, 184, 220 форум, 46, 278 в графику, 234
поле ввода, 265, 268, 281 фотоальбом, 33, 97 типы, 96
преобразование фотографии, обработка, 62
в графику, 94 фреймы, 194 э-я
сглаживание, 67, 236 эффект
статический, 460 вдавленности, 67
эффект растворения, 97 хостинг объема, 101
текстовое поле бесплатный (список растворения, 97
Flash, 281 серверов), 350 свечения, 166
многострочное, 268 на www.geocities.com, 23 сглаживания, 67
простое, 265 на www.narod.ru, 22 якорь гиперссылки, 113
Алфавитный указатель тегов HTML

!, 356 COLGROUP, 386 INPUT, 392
1DOCTYPE, 356 DD, 377 INS, 371
A, 366 DEL, 370 ISINDEX, 395
ABBR, 369 KBD, 371
ACRONIM, 370 DIR, 377 KEYGEN, 397
ADDRESS, 367 DIV, 367 LABEL, 395
APPLET, 381 DL, 377 LAYER, 397
AREA, 364 DT, 377 LEGEND, 396
B, 373 EM, 371 LI, 377
BASE, 358 EMBED, 381 LINK, 358
BASEFONT, 373 FIELDSET, 395 MAP, 364
BDO, 370 FONT, 373 MARQUEE, 398
BGSOUND, 396 FORM, 391 MENU, 377
BIG, 373 FRAME, 361 META, 359
BLINK, 39G FRAMESET, 360 MULTICOL, 399
BLOCKQUOTE, 370 HI, H2 ..... H6, 368 NOBR, 399
BODY, 356 HEAD, 358 NOEMBED, 381
BR, 374 HR, 375 NOFRAMES, 362
BUTTON, 393 HTML, 357 NOLAYER, 399
CAPTION, 385 1,373 NOSCRIPT, 363
CITE, 370 IFRAME, 362 OBJECT, 380
CODE, 370 ILAYER, 396 OL, 376
COL, 386 IMG, 378 OPTGROUP, 394
Алфавитный указатель действий ActionScript 541
OPTION, 394 SMALL, 374 TFOOT, 386

Р, 368 SPACER, 400 TH, 387
PARAM, 382 SPAN, 371 THEAD, 385
PRE, 368 STRIKE, 374 TITLE, 358
Q, 371 STRONG, 371 TR, 386
RT, 400 STYLE, 358 TT, 374
RUBY, 400 SUB, 374 U, 374
8,374 SUP, 374 UL, 376
SAMP, 371 TABLE, 384 VAR, 372
SCRIPT, 363 TBODY, 386 WBR, 401
SELECT, 394 TD, 388 XML, 401
SERVER, 400 TEXTAREA, 395 XMP, 401
Алфавитный указатель команд

и объектов JavaScript
Array, 408 for, 428 object, функция, 427
Body, 441 for in, 428 parseFloat, 427
Boolean, объект, 411 function, 428 parselnt, 427
boolean, функция, 426 function, анонимная RegExp, 421
break, 428 функция, 433 return, 428
catch, 429 Function, объект, 417 scriptEngine, 427
const, 428 iL.else, 428 String, объект, 424
continue, 428 import, 428 string, функция, 427
Date, 412 in, 433 switch, 429
decodeURI, 426 Infinity, 426 this, 433
decodeURIComponent, 426 instanceof, 433 throw, 429
delete, 433 isFinite, 427 typeof, 433
do...while, 428 isNaN, 427 undefined, 426
Document, 434 label, 428 unescape, 427
encodeURI, 427 Math, 418 unwatch, 427
encodeURlComponent, 427 NaN, 426 void, 433
Error, 416 new, 433 watch, 427
escape, 427 Number, объект, 419 while, 429
eval, 427 number, функция, 427 Window, 438
finally, 429 Object, объект, 421 with, 429
Алфавитный указатель действий

ActionScript
Операторы не равенство, !=, 485 _framesloadcd, 494
вычитание, -, 485 остаток от деления, %, 484 Jieight, 494
декремент, —, 485 побитовые, 487-488 _highquality, 494
деление, /, 485 присваивания, 488-489 _name, 495
дизъюнкция, ||, 486 сложение, +, 484 _parent, 517
доступа к массиву, ,517 сравнения, 485-486 _quality, 495
инкремент, ++, 485 умножение, *, 484 _root, 518
кавычки, "", 484 «include, 480 _rotation, 495
короткая конъюнкция, // (комментарий), 478 _soundbuftime, 495
&&, 486 _alpha, 494 _target, 495
круглые скобки, 484 _currentframe, 494 _total frames, 495
логическое отрицание, !, 486 _droptarget, 494 _url, 495
минус, -, 485 focusrect, 494 „visible, 495
542 Алфавитный указатель действий ActionScript
_width, 495 eval, 491 HOME, 504

_х, 495 exp, 505 if, 480
_xmouse, 496 false, 491 ifFrameLoaded, 480
_xscale, 496 firstChild, 514 indexOf, 512
_у, 496 floor, 505 INSERT, 504
_ymouse, 496 for, 479 insertBefore, 514
_yscale, 496 for...in, 479 int, 491
abs, 505 fromCharCode, 512 isDown, 504
add, 490 fscommand, 479 isFinite, 491
and, 486 function, 480 isNaN, 491
appendChild, 513 ge, 490 isToggled, 504
Array, объект, 496 getAscii, 503 join, 496
asin, 505 getBeginlndex, 510 Key, объект, 503
atan, 505 getBounds, 507 lastChild, 514
atan2, 505 getBytesLoaded, 507 lastlndexOf, 512
attachMovie, 507 getBytesTotal, 507 le, 490
attachSound, 510 getCaretlndex, 510 LEFT, 504
attributes, 513 getCode, 503 length
BACKSPACE, 503 getDate, 499 свойство массива, 496
Boolean, объект, 498 getDay, 499 свойство строки, 512
boolean, функция, 490 getEndlndex, 510 LN10, 505
break, 477 getFocus, 510 LN2, 505
call, 477 getFullYear, 500 load, 514
CAPSLOCK, 503 getHours, 500 loaded, 514
ceil, 505 getMilliseconds, 500 loadMovie, 480
char At, 511 getMinutes, 500 loadMovie, метод клипа, 508
charCodeAt, 512 getMonth, 500 loadMovieNum, 480
childNodes, 513 getPan, 511 loadVariables, 481
chr, 493 getProperty, 491 метод клипа, 508
cloneNode, 513 getRGB, 499 loadVariablesNum, 481
close, 516 getSeconds, 500 localToGlobal, 508
Color, объект, 499 getTime, 500 log, 506
comment, 478 get/Timer, 491 LOG10E, 506
concat getTimezoneOffset, 500 LOG2E, 506
метод массива, 496 getTransform It, 490
строковый метод, 512 метод звука, 511 Math, объект, 505
connect, 516 метод цвета, 499 max, 506
continue, 478 getURL, 480 MAX_VALUE, 509
CONTROL, 503 метод клипа, 507 maxscroll, 492
cos, 505 getUTCDate, 500 mbchr, 493
createElement, 513 getUTCDay, 500 mblength, 493
createTextNode, 514 getUTCFullYear, 500 mbord, 493
Date, объект, 499 getUTCHours, 500 mbsubstring, 493
delete, 478 getUTCMilliseconds, 501 min, 506
DELETEKEY, 503 getUTCMinutes, 501 MIN_VALUE, 509
do...while, 478 getUTCMonth, 501 Mouse, объект, 507
docTypeDecl, 514 getUTCSeconds, 501 MovieClip, объект, 507
DOWN, 503 get Version, 491 NaN, 509
duplicateMovieClip, 478 get Volume, 511 ne, 490
метод клипа, 507 getYear, 501 NEGATIVEJNFINITY, 509
E, 505 globalToLocal, 507 new Array, 497
else, 479 gotoAndPlay, 480 new Boolean, 498
else if, 479 метод клипа, 507 new Color, 499
END, 503 gotoAndStop, 480 new Date, 501
ENTER, 503 метод клипа, 508 new Number, 509
eq, 490 gt, 490 new Object, 510
escape, 491 hide, 507 new Sound, 511
ESCAPE, 503 hitTest, 508 new String, 512
Алфавитный указатель действий ActionScript 543
new XML, 514 scroll, 492 stop, 483

new XMLSocket, 516 Selection, объект, 510 метод звука, 511
newline, 492 send метод клипа, 508
nextFrame, 481 метод XML, 515 stopDrag, 483
метод клипа, 508 метод XMLSocket, 516 метод клипа, 509
nextScene, 481 sendAndLoad, 515 String, объект, 511
nextSibling, 514 set variable, 482 string, функция, 492
nodeName, 514 setDate, 501 substr, 513
nodeType, 515 setFocus, 510 substring
nodeValue, 515 setFullYear, 501 строковый метод, 513
not, 486 setHours, 501 swapDepths, 509
Number, объект, 509 setMilliseconds, 501 TAB, 504
number, функция, 492 setMinutes, 501 tan, 507
Object, объект, 510 setMonth, 501 targetPath, 492
on, 481 setPan, 511 tellTarget, 483
onClipEvent, 481 setProperty, 482 this, 518
onClose, 516 setRGB, 499 toggleHighQuality, 483
onConnect, 516 setSeconds, 502 toLowerCase, 513
onLoad, 515 setSelectipn, 510 toString
onXML, 516 setTime, 502 метод
or, 486 setTransform XML, 515
ord, 493 метод звука, 511 объекта Boolean, 498
parentNode, 515 метод цвета, 499 преобразование даты, 503
parseFloat, 492 setUTCDate, 502 преобразование
parselnt, 492 setUTCFullYear, 502 массива, 498
parseXML, 515 setUTCHours, 502 объекта, 510
PGDN, 504 setUTCMilliseconds, 502 преобразование числа, 509
PGUP, 504 setUTCMinutes, 502 toUpperCase, 513
PI, 506 setUTCMonth, 502 trace, 483
play, 481 setUTCSeconds, 502 true, 492
метод клипа, 508 setVolume, 511 typeof, 487
pop, 497 setYear, 502 unescape, 493
POSITIVEJNFIN1TY, 509 shift, 497 unloadMovie, 483, 509
pow, 506 SHIFT, 504 unloadMovieNum, 483
prevFrame, 481 show, 507 unshift, 498
метод клипа, 508 sin, 506 UP, 504
previousSibling, 515 slice updateAfterEvent, 493
prevScene, 481 метод массива, 497 UTC, 503
print, 482 строковый метод, 512 valueOf
printAsBitmap, 482 sort, 497 метод
printAsBitmapNum, 482 Sound, объект, 510 Boolean, 498
printNum, 482 SPACE, 504 XML, 514
push, 497 splice, 498 объекта, 510
random, 506 split, 513 числа, 510
removeMovieClip, 482 sqrt, 506 var, 483
метод клипа, 508 SQRT1_2, 506 void, 487
removeNode, 515 SQRT2, 506 while, 484
return, 482 start, 511 with, 484
reverse, 497 startDrag, 483 XML, объект, 513
RIGHT, 504 метод клипа, 508 xmlDecl, 516
round, 506 status, 515 XMLSocket, объект, 516
Лещев Дмитрий Владимирович
Создание интерактивного web-сайта: учебный курс
Главный редактор Е. Строганова
Заведующий редакцией И. Корнеев
Руководитель проекта Е. Саргаева
Литературный редактор Е. Саргаева
Художник Н. Биржакое
Корректоры Н. Лукина, И. Тимофеева
Верстка Ю. Сергиенко
Лицензия ИД № 05784 от 07.09.01.

Подписано к печати 28.02.03. Формат 70x100/16. Усл. п. л. 43,86.
Тираж 4000. Заказ 96
ООО «Питер Принт», 196105, Санкт-Петербург, ул. Благодатная, д. 67в.
Налоговая льгота — общероссийский классификатор продукции
ОК 005-93, том 2; 95 3005 — литература учебная.
Отпечатано с готовых диапозитивов в ФГУП ордена Трудового Красного Знамени «Техническая пиита»
Министерства РФ по делам печати, телерадиовещании и средств массовых коммуникаций
198003, Санкт-Петербург, Измайловский пр., 29

А

Загружено:

Сведения о документе

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

А

Загружено:

Авторское право:

Доступные форматы

А.

Л54 Создание интерактивного web-сайта: учебный курс / Д. Лещев. — СПб.:

ISBN 5-314-00033-4 © ЗАО Издательский дом «Питер», 2003

Занятие 1. Спасение утопающих 19

Занятие 2. О пользе бесплатного сыра 26

Занятие 3. Сам себя не похвалишь 56

Занятие 4. Фильм на Flash 86

Занятие 5. Реклама — двигатель торговли ю?

Службы обмена баннерами 111

Занятие 6. К сожаленью, день рожденья ш

Занятие 7. Славный праздник Новый год iss

Сцена Темнота 175

Занятие 8. Семь раз отмерь ш

Занятие 9. Один раз отрежь 198

Занятие 10. И столяр, и плотник 220

Занятие 11. Встречают по одежке 238

Занятие 12. Делу — время 262

Занятие 13. Что наша жизнь? — Игра зоз

Занятие 14. Итого 343

HTML и JavaScript 346

Приложение 1. Ресурсы Интернета ЗБО

Приложение 2. HTML 4 355

Приложение 3. JavaScript 408

Приложение 4. Flash 443

Приложение 5. ActionScript 477

Приложение 6. Новые возможности Flash MX 519

Debugger (Отладчик) 527

Толковый словарик Интернета . 530

И, наконец, я просто обязан поблагодарить самых близких мне людей, которые,

способен выделить на реализацию данной задачи не только свое время, но и не-

Что нас ждет

Кроме занятий в книге есть приложения и алфавитные указатели. В них собра-

Итак, мы приступаем к нашему первому занятию. О чем оно будет? Во-первых,

Интернет для каждого

по новой специальности — web-мастера. Думаю, полученные знания еще не раз

людьми, а не только мило пошутить. К счастью, они предусмотрели кнопочку,

вдаться всем желающим. О том, как разместить счетчики посещений, обсужде-

Инструменты создания Web

ется детищем Microsoft, а другой — JavaScript — порождением Netscape. По-

а местами будет иметь явное преимущество, особенно для новичков. Конечно,

Зачем знать о модном поветрии новичку, делающему первые шаги по «плете-

Куда путь держим?

Что нового мы узнали

О пользе бесплатного сыра

Сегодня у нас первое практическое занятие: мы будем создавать сайт с помо-

Рис. 2.1. Главная страница сервера www.narod.ru

мещать на сайте и сервере, а также какие многочисленные права Яндекс ос-

Пароль и Подтвердите пароль являются полями для ввода пароля — секретной

• Раздел Идентификационные данные нужен для восстановления ваших прав на

Если вы не заполнили нужные поля, то на экране появится текст с подробным

Jflndex; Паспорт - Netscape

Copyright© 1997-2001 "Яндекс*

Рис. 2.2. А на этой странице вам предоставляется возможность передумать

Появившаяся страница пестрит всеми цветами радуги. Введите тексты, выбери-

Когда после продолжительной битвы с непокорным дизайном вы повторно ска-

'Ш http://dtmvovich.narod.ru/'mdex.html - Microsoft Internet Explorer

Рис. 2.3. Таково расположение элементов дизайна в «свободном» шаблоне

Резюме — оформление своего Curriculum Vitae (жизнеописания) для будущей

• Персональный чат — если вы хотите по Сети поболтать с друзьями, можно со-

• Фоновые рисунки — авторские картинки для заполнения фона страницы.

здесь есть флажок Использовать каталог на «ЯндексЗакладки». Если его поставить,

Ссылки, Интересные истории,

Рис. 2.4. Примерный план сайта

Потом подумайте над тем, какие интерактивные элементы страницы вы хо-