А

А.
Леше в
Создание
интерактивного
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

Подготовка текста 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
Алфавитный указатель 539
Памяти отца, Лещева Владимира Филипповича, посвящается
Выражение признательности
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» — удобство в использовании.
Представим себе маленький сайт из восьми страниц. На каждую из них ведут
ссылки с главной страницы, а внутри этих страниц стоят только ссылки обратно
на центральную. Чтобы попасть с одной страницы на другую, посетитель дол-
жен вначале вернуться на основную страницу, то есть при просмотре всех стра-
ниц он окажется на главной как минимум семь раз. Согласитесь, смотреть семь
раз одно и то же не слишком интересно. Выхода два: первый — сделать из каж-
дой страницы ссылки на все остальные в виде отдельной навигационной пане-
ли; второй — сделать дополнительно на странице ссылки на предыдущий и по-
следующий разделы. Первый способ подходит, если сайт небольшой, второй -
если его структура уже не умещается на панели (к

Язык

Добро пожаловать в Scribd!

А

Загружено:

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

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

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

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

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

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

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

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

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

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

А

Загружено:

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

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

Похожие издания

А.

Л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 (жизнеописания) для будущей

• Персональный чат — если вы хотите по Сети поболтать с друзьями, можно со-

• Фоновые рисунки — авторские картинки для заполнения фона страницы.

здесь есть флажок Использовать каталог на «ЯндексЗакладки». Если его поставить,