You are on page 1of 544

А.

Леше в

Создание
интерактивного
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
Что нового мы узнали 55
Содержание

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

Занятие 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
Что нового мы узнали 106

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

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

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

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

Сцена Темнота 175
Сцена Распаковка 176
Сцена Последняя 179
Звук 181
Что нового мы узнали 182

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

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

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

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

Занятие 12. Делу — время 262
На этом занятии 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
Что нового мы узнали 307

Занятие 13. Что наша жизнь? — Игра зоз
На этом занятии 308
Создание игры на JavaScript 308
Принцесса или тигр? 309
Ловля в паутине 318
Создание простой аркадной игры на Flash 324
Лабиринт 325
Клипы 333
Тестирование 340
Замена указателя мыши 341
Что нового мы узнали 342

Занятие 14. Итого 343
На этом занятии 343
Виртуальный мир 344
Белый лист 345
10 Содержание

HTML и JavaScript 346
Flash 346
Сайт или фильм? 346
HTML 346
JavaScript 347
Flash 347
Что нового мы узнали 348

Приложение 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
12 Содержание

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
Думаю, не далек тот час, когда, позвонив по телефону, вы сможете влиять не только на действие
в шоу, но и на сценарии мыльных опер и мультиков.
22 Занятие 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 Мбайт считался пределом мечтаний!
24 Занятие 1. Спасение утопающих

ется детищем 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
можно создать не только баннер или отдельный ролик, а при желании целый
сайт (!), который мало в чем уступит созданным по классическим технологиям,
Что нового мы узнали 25

а местами будет иметь явное преимущество, особенно для новичков. Конечно,
не следует ожидать, что «классику» ждет печальная судьба динозавров, просто
у нее появился серьезный конкурент, который намерен получить свое место под
виртуальным солнцем.

ПРИМЕЧАНИЕ
Когда книга выйдет в свет, распространенной версией 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
В переводе В. Марковой.
Мастерская на www.narod.ru 27

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

Главная страница
В глаза бросается белым по синему лозунг: «Постройте свой сайт за 60 секунд».
Конечно, одной минуты явно недостаточно, чтобы сделать что-либо путное, по-
этому не будем сразу регистрироваться, а вначале пройдемся по ссылкам, кото-
рые расположены чуть ниже, чтобы познакомиться с «жителями» Народа и его
правилами.
• Первые две ссылки, Первый раз с народом? и Зачем это надо, ведут на страни-
цу, где подробно описаны прелести «виртуального Я».
• Ссылка Что здесь дают расскажет, какими благами хостинга вы сможете вос-
пользоваться.
• Пробный тур — краткий перечень шагов, которые вы должны сделать, прежде
чем ваш сайт заживет полнокровной жизнью. Обратите внимание на первый
пункт списка — Выберите имя для сайта. Если вы думаете, что это просто, то
сильно ошибаетесь. В Народе вы не встретите двух жителей с одинаковы-
ми именами — придется придумать и свое — красивое и функциональное.
Помните, что «как вы яхту назовете, так она и поплывет».
• Ссылка Образцы страниц приведет вас к описаниям шаблонов, которые пре-
доставляются Народу в помощь.
• Собственно Помощь придет в качестве ответов на Часто задаваемые Вопросы
(сокращенно — ЧаВо или FAQ, Frequently Asked Questions) со множеством
полезных ссылок на услуги сервера.
• Обязательно просмотрите Пользовательское соглашение — оно, конечно, слег-
ка длинновато, но, например, только там написано, что на вашу страницу бу-
дет приколот баннер Яндекса. Там же написано, что можно, а что нельзя раз-
28 Занятие 2. О пользе бесплатного сыра

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

Регистрация
Вначале вы должны разрешить вашему браузеру выполнять сценарии JavaScript
и принимать файлы cookie, и лучше также разрешить автоматическую загрузку
изображений. Затем можно набрать имя вашего будущего сайта в поле на глав-
ной странице и нажать кнопку Занять (Submit). Дальше вы попадете на страницу
с регистрационной формой, состоящей из нескольких разделов: Логин и Пароль,
Идентификационные данные, Персональные данные. Обязательными для заполнения
являются только поля, отмеченные красной звездочкой: Логин, Пароль, Подтвер-
дите пароль, Контрольный вопрос, Ваш ответ, Фамилия и Имя.
Теперь обо всем по порядку.

СОВЕТ
В Netscape Communicator все настройки браузера собраны в диалоговом окне Настройки.
Оно вызывается одноименной командой меню Правка, а настройки автоматической загруз-
ки изображений и использования сценариев JavaScript собраны на странице категории До-
полнительные. В Internet Explorer окно называется Свойства обозревателя, вызывается ко-
мандой меню Сервис, а необходимые установки расположены на вкладке Дополнительно.

Логин — это ваше имя в Яндексе. Оно действительно во всех его службах, как
и пароль. Если вы не угадали и имя уже существует, вы сможете подобрать
другое.
Мастерская на www.narod.ru 29

Пароль и Подтвердите пароль являются полями для ввода пароля — секретной
фразы, по которой Яндекс будет знать, что пришли именно вы, а не кто-то
другой под вашим именем. Не вводите простой пароль, лучше задайте абра-
кадабру из цифр и букв, предварительно записав ее в записной книжке, что-
бы потом не забыть. Для лучшего запоминания можно использовать русское
слово, но набранное при латинской раскладке клавиатуры или транслитом,
и ряд цифр, например фу/п/83 или 83komnata.

ПРИМЕЧАНИЕ
Транслит — запись русских букв схожими по названию латинскими.

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

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

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

Если вы не заполнили нужные поля, то на экране появится текст с подробным
перечислением того, что вы сделали не так.
• Логин уже занят:
Введенный вами логин уже занят на Яндексе. Попробуйте ввести другой.
30 Занятие 2. О пользе бесплатного сыра

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

Jflndex; Паспорт - Netscape
Прг,ыч Ьэд ГНемй Ки-«юнп(гы Спржка

Паспорт
ш»:
Введите, пожалуйста, имя вашего будущего сайг»:

RSSS ; Jurod.ru

Подписаться на общие
нов ости сайга?
Подписаться на анонсы
"Народной газеты"?

т

Copyright© 1997-2001 "Яндекс*

Рис. 2.2. А на этой странице вам предоставляется возможность передумать
Мастерская на www.narod.ru 31

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

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

Создание сайта
Так как мне не известно, какой сайт вы собираетесь строить, я кратко опишу все
подразделы и ссылки, посвященные созданию сайта с помощью Конструктора
страниц. Вы можете составить свой сайт из любого мыслимого и немыслимого
набора страниц: романтика и бизнес, объявления и общение. Но начнется экс-
курсия с основного — с главной страницы.
Главная страница
Создание главной страницы начинается со щелчка на ссылке Шаблоны, располо-
женной в разделе Моя главная страница. Шаблонов не так и много — всего де-
вять. Кроме этого присутствует возможность сделать свой шаблон, но это мы
оставим на закуску. А начнем с уже существующего шаблона, например под на-
званием Пустынный. Устанавливаем переключатель на этот шаблон (щелкаем в
пустом кружке вверху слева от шаблона) и нажимаем кнопку Далее.
32 Занятие 2. О пользе бесплатного сыра

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

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

Когда после продолжительной битвы с непокорным дизайном вы повторно ска-
жете Готово, волны Яндекса вас вынесут на текст примерно следующего содер-
жания:
После создания этой страницы вы можете:
• отредактировать ее;
• перейти к созданию других страниц;
• перейти в раздел «Редактирование страниц»;
• перейти в раздел «Управление файлами».
Вы также можете получить доступ к другим возможностям сайта, перейдя в раз-
дел «Мастерская».
Мастерская на www.narod.ru 33

'Ш http://dtmvovich.narod.ru/'mdex.html - Microsoft Internet Explorer
Jri?

$@Ш *вйи» Я
«Главная страница **» «ЛЩ
«fe*
....... ИМ
,-.:
1,
safes «Мм

О

а
Диз ав :ом
•ло
шаолоне
:
»

Рис. 2.3. Таково расположение элементов дизайна в «свободном» шаблоне

ВНИМАНИЕ
На самом деле битва у вас будет в основном не с самим дизайном, а с неповоротливым
Яндексом, который регулярно «забывает» обновлять рисунки на странице и пользуется
кэшем в самых неподходящих случаях (чтобы этого избежать, всегда переименовывайте
графический файл после внесения изменений и загружайте его под новым именем), и т. д.
Также не забывайте обновлять страницу при просмотре (кнопка Обновить на панели
управления браузера).

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

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

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

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

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

• Фоновые рисунки — авторские картинки для заполнения фона страницы.
• Логотипы и баннеры Narod.ru — вещественное наполнение пословицы «всяк ку-
лик свое болото хвалит».
• Формы поиска — еще один полезный атрибут сайта. Искать можно на своем
сайте, в Народе и на Яндексе.
• Индексирование в поисковых системах — несколько параметров, касающихся
индексации вашего сайта на Яндексе. Если вы хотите, чтобы о вас поскорее
узнали, загляните на эту страницу.

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

здесь есть флажок Использовать каталог на «ЯндексЗакладки». Если его поставить,
то закладки автоматически появятся на странице. Вж-ж-жик — и готово!

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

Персональная страничка
persona.html

Ссылки, Интересные истории,
ref.html story.html

Главная страница,
index.html
Работа, О семье,
rabota.html family.html

Хобби, Фотоальбом,
hobby.html foto.html

Рис. 2.4. Примерный план сайта

Потом подумайте над тем, какие интерактивные элементы страницы вы хо-
тите использовать (подробнее о них речь пойдет далее). А также будете ли
Мастерская на www.narod.ru 37

вы использовать шаблоны, которые предусматривают только фиксирован-
ный дизайн (например, Романтика). Именно отталкиваясь от таких страниц,
вам и придется строить дизайн сайта.
Теперь попытайтесь обозначить основные элементы дизайна сайта: цвета,
размещение элементов, размеры рисунков и т. д. Эти элементы должны быть
одинаковыми на всех страницах, не должно быть инородных вкраплений,
выпадающих из общей палитры. Например, на главной странице вы решили
использовать картинку слева шириной 200 пикселов. Значит, надо стараться,
чтобы на всех остальных страницах текст тоже был размещен справа на том
же расстоянии. Если вы используете логотип и фоновую картинку, то они
должны быть одинаковыми за исключением воплощения какой-либо идеи
(см. занятие 8). В случае, если построить дизайн так просто не удается, при-
дется подождать следующего занятия и воспользоваться услугами HTML-ре-
дактора.
Когда вы поймете, какие цвета, фоновые рисунки и другие элементы вы бу-
дете использовать, — переходите к созданию самих страниц. Естественно, что
в основном вы будете выбирать шаблон Сделайте свой.

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

Размещение в каталоге
Чтобы посетители Яндекса смогли добраться до ваших страниц, надо зарегист-
рировать их в Каталоге. Каждая страница сайта может попасть в свою рубрику.
Всего можно зарегистрировать 3 страницы, а в каждой рубрике — не более од-
ной.
Чтобы зарегистрировать страницу в каталоге, необходимо на страницах Управле-
ние файлами или Редактирование страниц, созданных по шаблонам установить фла-
жок рядом с файлом и нажать кнопку Изменить позицию в каталоге (rubrics).
Далее вам будет предложено выбрать один из следующих 166 вариантов (полу-
жирным выделены названия разделов).
Автомобили и мотоциклы
Мотоциклы Новости и обзоры
Ремонт, обмен опытом и советы Продажа, покупка, обмен
Автомобили Другое

Бизнес и финансы
Инвестиции Консалтинг
Маркетинг Менеджмент
Недвижимость Новости и аналитика
Полиграфия и издательская деятельность Рекламный и выставочный бизнес
38 Занятие 2. О пользе бесплатного сыра

Связь Стройматериалы и строительство
Страхование Торговля
Транспорт Телекоммуникации
Услуги Финансы
Интернет-магазины Нефтехимия
Металлургия Другое

Дом и семья
Дети Домашние животные
Кухня Обустройство дома
Моя семья Другое

Здоровье
Медицина Нетрадиционная медицина
Оздоровительные средства и лекарственные Социальная и психологическая реабилитация
препараты
Другое

Знакомства
Страницы девушек Страницы мужчин
Нетрадиционные знакомства Обмен опытом и советы
Другое

Компьютеры, Интернет и технологии
Безопасность Веб-дизайн
Интернет Информационные технологии
Железо Новости и обзоры
Операционные системы Программирование
Софт Заработок в Интернете
Другое

Красота и мода
Мода и стиль Новости и обзоры
Советы Услуги
Другое Культура, религия, философия
История культуры Культурная жизнь
Мистика Религия
Философия Психология
Астрология Другое
Мастерская на www.narod.ru 39

Литература и искусство
Архитектура Дизайн
Декоративно-прикладное искусство Изобразительное искусство
Новости и обзоры Образовательная литература и публицистика
Поэзия Приключения и детективы
Фантастика и фэнтези Фотоискусство
Художественная литература Скульптура
Театр Другое

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

Наука и образование
Естественные науки Новости и обозрения
Общественные науки Образовательные организации и программы
Студенты Клубы выпускников
Моя школа Экология
Рефераты и курсовые Другое

Политика и право
Государство Новости и аналитика
Политика Право
Вооруженные силы Другое

Работа и карьера
Вакансии Обмен опытом и советы
Работа за рубежом Резюме
Другое
40 Занятие 2. О пользе бесплатного сыра

Свободное время, развлечения и игры
Активный отдых Компьютерные игры
Ночная жизнь Общение
Радио и телевидение Тесты, гороскопы и гадания
Хобби Юмор

Эротика и секс Другое

Спорт
Командные виды спорта Единоборства
Зимние виды спорта Настольные игры
Спортивные клубы и секции Теннис
Футбол Формула-1
Хоккей Экстремальный спорт
Легкая атлетика Бодибилдинг и рестлинг
Дайвинг Спортивное снаряжение
Другое

Техника и производство
Авиация Транспорт
Строительство Электроника
Легкая промышленность Другое
Туризм Автостоп
Велотуризм Водный туризм
Охота и рыболовство Путевые заметки
Пеший туризм Спортивный туризм
Туристическое снаряжение Туристические услуги
Вокруг света По историческим местам
Мой город Другое

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

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

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

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

Анкета
Анкета представляет собой отдельную страницу-форму. Яндекс предлагает не-
сколько шаблонов, но можно создать и свой собственный. Основное, над чем
вам надо подумать при определении анкеты, — это вопросы, которые вы соби-
раетесь задать, и поля для ввода ответов.
Вначале вы должны понять, какого типа будут ответы. Для указания ответа
можно использовать поле ввода, область ввода и флажок (в терминологии Ян-
декса — галочка).
• Поле ввода — поле для ввода строки текста. Используйте этот элемент, если
ответ на вопрос составляет одно-два слова.
• Область ввода — поле для ввода нескольких строк текста; при необходимости
появляется полоса прокрутки. Используется для ввода развернутого ответа.
Старайтесь применять область ввода только в крайнем случае: поверьте,
мало кто готов написать даже небольшое эссе ради прекрасных, но недоступ-
ных для обозрения глаз.
• Галочка - флажок. Служит для отметки одного или нескольких вариантов
ответа на вопрос, оформленный в виде элемента Просто текст. В отличие от
других полей, подпись к флажку выровнена по левой стороне текста
(рис. 2.5, 2.6).
После вопросов вам будет необходимо заполнить поля, отвечающие за техниче-
скую сторону дела: адрес электронной почты, на который будут приходить за-
полненные анкеты; заголовок страницы, которая появится после нажатия анке-
тируемым кнопки Отправить; строка текста, которая будет появляться перед
ответами пользователя; URL страницы, на которую появится ссылка внизу ан-
кеты, и описание этой ссылки, а также следующие директивы: направлять ли
анкету автоматически по указанному в ссылке адресу, какой использовать раз-
делитель полей в письме, запрашивать ли e-mail пользователя, прикреплять ли
анкету в виде файла или просто вставлять в письмо (рекомендуется не прикреп-
лять файл к анкете, так как в прикрепленных файлах с большой степенью веро-
ятности могут содержаться вирусы).
Использовать анкету на сайте можно в самых различных целях:
• для проведения опроса о вашем сайте, если по каким-то причинам вы не хо-
тите помещать это обсуждение в гостевую книгу;
• если вы завели романтическую страничку, то анкета может стать первой ни-
точкой для завязывания знакомства;
• на бизнес-сайте анкета может касаться товаров и услуг, к которым вы имеете
отношение;
• любое простое тестирование.
Мастерская на www.narod.ru 43

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. Так выглядит страница после ответа на вопросы анкеты
44 Занятие 2. О пользе бесплатного сыра

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

Результат вы видите на рис. 2.7. Естественно, номер после id= у вас будет дру-
гой, так же как и текст на странице.

Рис. 2.7. Так будет выглядеть добавленный опрос

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

Опрос
Проголосовал!

100 % Оо>« 2

Рис. 2.8. Так будут выглядеть результаты опроса
46 Занятие 2. О пользе бесплатного сыра

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

ГЬ Персональный форум dimvovich * Netscape

:мг> ДимВович 16.04.2002 I? ДамЦр lllix,
/;:E2«i! ДимВович 16.042
Дервое сообщение форума,
Ваше имя:
|димВович
Email:
.jdimvovich6narod.ru
Ваш сайт: Текст сообщения

Ваше кия:
Сообщение: |ДинВович

|dimvovlch@narod.ru
Ваш сайт:

JRe: Первое сообщение форума
Сообщение:

Рис. 2.9. Персональный форум
Мастерская на www.narod.ru 47

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

Чат
Чтобы создать свой чат, как и другие интерактивные элементы, необходимо
заглянуть в соответствующий раздел Мастерской. На странице Создание личного
чата вы должны указать его название, пароль и подтверждение пароля (если вы
хотите завести частный чат), выбрать подходящий шаблон и нажать кнопку Соз-
дать. После того как вы введете уникальное название чата, появятся параметры
вашего входа в чат: ваш ник (псевдоним или прозвище) в чате, цвет текста, вре-
мя обновления и количество выводимых строк. Постарайтесь не трогать список
Название чата, если вы хотите попасть в свой чат, иначе вам придется искать его в
неотсортированном списке, содержащем более 100 пунктов. После заполнения
полей нажмите Войти в чат, и вы попадете на только что созданную страничку
своего чата (рис. 2,10).

»6V.LK! ' -:.••.::•:,.'.-:. ЪщМЧ .

hal. «h!ml?new.43086!,lKChak.896453621114500

Чат «Чат у ДимВовича»
Участники:
• ДимВович

:
.СгЫравить :' : О6н<?Е!пь Шсгеоикй

Рис. 2.10. Примерно так будет выглядеть ваш новорожденный чат

Зайти в любой чат можно через ссылку Чаты на главной странице Народа. Не за-
будьте также вставить ссылку на свой чат на страницах сайта!
48 Занятие 2. О пользе бесплатного сыра

Под крылом 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 Индекс
Под крылом www.geocities.com 49

Поле формы Перевод Пояснения
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 Бизнес и финансы

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

Таблица 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 (Мастера
Под крылом www.geocities.com 51

страниц 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. Как всегда, файл с таким названием служит первой
страницей сайта. Мастер не забудет поинтересоваться: «А вы уверены?» — ведь
страница с таким именем уже существует. Если вы решили приступать вплот-
52 Занятие 2. О пользе бесплатного сыра

ную к строительству, смело отмечайте 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.
54 Занятие 2. О пользе бесплатного сыра

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 будет считать количество уникальных посе-
тителей и общее число посещений и посылать еженедельный статистический отчет. Регистрируй-
тесь здесь!
Что нового мы узнали 55

ПРИМЕЧАНИЕ
Общее число посещений — это количество всех обращений к данной странице или сайту,
а число уникальных посетителей — это количество различных IP-адресов, запросивших
данный сетевой ресурс.

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

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

Сам себя не похвалишь...
Холод пробрал в пути.
У птичьего пугала, что ли,
В долг попросить рукава?
Мацуо Басе1

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

Создание сайта на HTML
На этом занятии мы создадим полноценный сайт (причем сами, не пользуясь
шаблоном) в web-мастере от Netscape или просто в Блокноте, как вам нравится.
Если вам больше по душе другие HTML-редакторы, то можете работать и в них
(например, работа с FrontPage Express описана в занятии 12).

В переводе В. Марковой.
Создание сайта на HTML 57

Разместим мы сайт все там же, на сервере 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
Честно говоря, я научный сотрудник.
Создание сайта на HTML 59

Подготовка графики
Если вы определились с текстом, настал черед графики. Вы должны решить, ка-
кие графические элементы вам понадобятся и как вы их будете получать. На-
верняка вам понадобятся фотографии и рисунки с текстом для меню, логотипа
и прочих элементов интерфейса.
Сканирование
Начнем с обработки фотографий и «даров природы»: нам понадобится оциф-
рованное изображение бересты и листьев. Если у вас есть цифровая камера, то
многие проблемы с оцифровкой изображений снимутся сами собой: в результа-
те ее работы вы получаете не живописный отпечаток, а набор байтов на элек-
тронном носителе. Тогда достаточно открыть файл, обработать его в программе
Photoshop и поместить на сайт
Если же цифровой камеры у вас нет или ее качество вам не по душе (большин-
ству цифровых фотоаппаратов еще далеко до аналогового), тогда вам понадо-
бится сканер или небольшие финансовые затраты на сканирование нужных вам
изображений. Услуги по превращению фотографии или пленки (что лучше, но
дороже) в файл предоставляют сейчас почти в каждом центре вездесущего Kodak.
Если речь идет о двух-трех фотографиях, это может стать самым простым и де-
шевым способом получить себя, любимого, на экране. Есть и специализирован-
ные фирмы, которые могут помочь вам не только в сканировании, но и в обра-
ботке полученного материала.
Но если случилось так, что за соседним столом на работе стоит сканер, то мож-
но попробовать самому превратить бумажный вариант изображения в электрон-
ный. Сделать это довольно просто.
Запустите программу Photoshop, выберите команду File > Import > Twain (Файл >
Импорт > Twain). После этого надо нажать кнопку Preview (Начать новое сканиро-
вание), чтобы призвать сканер к работе (рис. 3.1). В окне появится изображение,
отсканированное «на скорую руку» с низким разрешением. Теперь вам необхо-
димо выбрать фрагмент фотографии и установить параметры сканирования и
корректировки. Учтите, что размер фотографии на экране зависит не от ее фи-
зических размеров, а от разрешения, которое вы ее указали. Для первого раза
вам надо настроить только несколько параметров, остальные можно оставить
«как есть».

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

СОВЕТ
Для сканирования предпочтительно использовать глянцевые отпечатки. И не забудьте сте-
реть с фотографии пыль!
60 Занятие 3. Сам себя не похвалишь...

Файл Правка Вид Параметры Сервис Справка

^ В ыберите об п^сти. ок»'
• сканирования.
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). Минимальный
элемент изображения (то есть одна точка) называется пикселом. Таким образом, разреше-
ние связывает физический размер рисунка с размером пиксела, изменяющегося в зависи-
мости от разрешения.
Создание сайта на HTML 61

Геке-'-и изображение
Черно-белый рисунок •
Черно.-(5елая Фотография • .
Цветной рисунок
Обычная цветная Фогогг. дчша (256 цветов!

Приблизь гьмыйрдзмор; 11,7 Мбайт

Рис. 3.2. Выбор цветовой модели

* Йспо'льедйте переона

, Ука
(тол

Высот а:;- Выбор границы заблокирован на
данных параметрах

Приблизительный размер: 11.7
Чоачт :

Рис. 3.3. Выбор разрешения при сканировании

Auto Contrast & Color Correction (Автокоррекция контраста и цвета) Эти две
функции (автоматическая настройка контраста и цветокоррекции) могут
пригодиться, когда сканер хорошего качества.
62 Занятие 3. Сам себя не похвалишь...

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
Создание сайта на HTML 63

(Размытие) поможет в некоторых случаях избежать контрастных дефектов, но
он менее эффективен, чем 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 открывает гистограмму изображения.

ПРИМЕЧАНИЕ
Гистограмма — это график распэеделения яркости пикселов.

Если основная масса (гора) располагается ближе к левому краю — значит, изо-
бражение темное, если ближе к правому — светлое. Черный и белый треуголь-
ники по краям обозначают черную и белую точки — самое темное и светлое
места в изображении. Их сведение усиливает контраст, но уводит тени в черный
цвет, а светлые части — в белый. Кроме того, на гистограмме есть точка среднего
тона. Если требуется плавно затемнить или осветлить изображение, надо дви-
гать ее в ту или другую сторону. Пробелы в гистограмме говорят об отсутствии
64 Занятие 3. Сам себя не похвалишь...

информации на данном участке. В худшем варианте гистограмма будет напоми-
нать расческу.
Для такого изображения существует способ «придумать» недостающую инфор-
мацию.
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
Рекомендуемые издания можно найти в списке литературы в конце книги.
Создание сайта на HTML 65

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

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

3JJ Создание им трмк гивных сайтов - Microsoft Internet Explorer

Рис. 3.4. Интерфейс сайта
3 Зак. 96
66 Занятие 3. Сам себя не похвалишь...

Ш Создание интрактивныж сайтов - Microsoft Internet Explorer
i-File 'gar-View. Fevoiitae .Tools Help
I"""

"Ж~Ш
Рис. З.5. На шаблоне страницы сайта показаны рамки вокруг

Основной текст пусть будет темно-коричневого цвета (#7В5А4В). Этот цвет я
позаимствовал в Photoshop с отсканированного кусочка коры. Для ссылки мож-
но взять цвет полоски на бересте, а для просмотренной и активной ссылки —
более светлые оттенки. Шрифт мы решили брать с засечками для основного
текста и без засечек — для заголовков.
В качестве графических ссылок и элементов оформления можно использовать
зеленые листья.

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

Графический текст
Для начала вы должны наметить размеры графических элементов интерфейса,
которые вам понадобятся. Текст будет содержаться в рисунке логотипа и эле-
ментах меню. Как мы уже решили, это будут выдавленные на бересте слова
(рис. 3.6). Подробно мы обсудим только логотип, а пункты меню можно будет
легко сделать по аналогии.
Создание сайта на HTML 67

Рис. 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 дюйма.
68 Занятие 3. Сам себя не похвалишь...

Anti-Alias Strong (Сильное сглаживание);
Anti-Alias Smooth (Гладкое сглаживание).

ПРИМЕЧАНИЕ
При использовании сглаживания текста следует иметь в виду, что растеризация может
привести к существенному искажению шрифта. Чтобы избежать этого, разработчики сове-
туют снять флажок функции Fractional Width (Дробная ширина) в палитре Character (Сим-
вол) и не использовать сглаживание.

И последнее замечание. В меню инструмента Текст расположены две кнопки, ве-
дающие направлением текста: вертикальным или горизонтальным. Они приго-
дятся вам для рисования элементов меню.
Оставшиеся элементы
Для завершения работы с графическими элементами нам осталось нарезать гра-
фические файлы и обработать отсканированные листья. С листьями все просто:
вы должны выделить лист с помощью «волшебной палочки», поместить его на
нужный фон и сохранить в формате JPG. Листья можно использовать для
оформления элементов меню или внутренних ссылок.

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

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

Верстка
Рассказывать, как сверстать десяток страниц сайта, — не менее утомительное и
скучное занятие, чем слушать этот рассказ. Писать, конечно, легче, ведь всегда
Создание сайта на HTML 69

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

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

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

Главная страница
Для начала разметим страницу. Логотип будет размещен, как и везде, посредине
вверху и внизу. Примерное расположение ячеек показано на рис. 3.7.

Уголок Рамка Логотип Рамка Уголок

Внутренняя
таблица
га

1
1 1

Уголок Рамка Логотип Рамка Уголок

Рис. 3.7. По такой схеме будет создана первая страница сайта

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

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

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

2. Вначале вы должны задать параметры страницы — цвета ссылок и фон. Для
этого выберите в меню Формат команду Цвета и свойства страницы.
3. Чтобы задать цвета ссылок, просто щелкните на кнопке с образцом цвета
(рис. 3.8) и выберите Другой. Затем в появившемся обычном окне палитры
Windows задайте значение цвета в схеме RGB, нажмите Добавить в набор, вы-
делите появившийся цвет и нажмите ОК.

Параметры страницы
•Общие Цвет и фон IТэги МЕТА j
;' ; Цвета страницы

• Использовать цвета, польг
Обычный текст Обымный текст
Текст ссылки
Активная ссылка

| Цвета по умолчанию Vj.;;

Рис, 3.8. Задание параметров страницы

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

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
Создание сайта на HTML 73

Изображение, 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>
74 Занятие 3. Сам себя не похвалишь...

<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>
<TD width="400" height="60">
<IMG src="logo.jpg" height="60" width="400">
</TD>
<TD width="50£" height="60" background»"ramka_top.jpg"></TD>
<TD width="40" height="60">
<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>
<TD width="40" height="60">
<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-файлами, чтобы не потерять последние,
Создание сайта на HTML 75

как иголку в стоге сена. Однако какой бы путь вы ни указали в web-мастере, он
все равно перенесет рисунки в каталог HTML-файла. Поэтому надо уточнить
путь к файлам рисунков, при необходимости дописав название содержащей их
папки, например image/.
Во всех ячейках с фоном между тегами <ТО> и </TD> необходимо вставить нераз-
рывный пробел — последовательность Snbsp;. Обязательно уберите лишний не-
разрывный пробел (&nbsp;), который 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">
<!-- Маскируемся
// Снимаем маскировку -•>
</SCRIPT>
</HEAD>
<BOOY>

</BODY>
</HTML>
76 Занятие 3. Сам себя не похвалишь...

И еще один обязательный штрих: всем рисункам надо приписать атрибут alt,
чтобы пользователи, у которых отключен показ графики, смогли понять, что там
нарисовано. Значение этого атрибута будет выводиться либо в качестве подсказ-
ки при наведении мыши на рисунок, либо вместо рисунка, если у пользователя
отключено отображение графики в настройках их браузера. Код этого фрагмен-
та должен выглядеть примерно так:
<IMG src="corner_lt.jpg" height=60 width=40 аН="Логотип сайта - Записки на бересте">
Для того чтобы таблица занимала всю страницу, в теге <BODY> необходимо про-
писать значения атрибутов для отступов от края страницы (в этом же теге будут
находиться и значения цветов и фона):
<BODY topmarg1n=0 leftmargin=0 rightmargin=0 marginwidth=0 raarginheight=0>
Если теперь открыть файл в окне Netscape Communicator или Internet Explorer,
страница уже будет похожа на желаемую.
Теперь осталось вставить в центральную ячейку нужный текст и ссылки. Мож-
но снова воспользоваться web-мастером, а можно и вписать требуемый текст и
теги в Блокноте. Нам необходима таблица, состоящая из трех ячеек: одной верх-
ней с текстом и двух нижних со ссылками. В качестве ссылки будет служить зе-
леный лист и текстовый комментарий.

Свойства символа

Символ Ссылка [Абзац]
•:,-.-'Исходный текст сем лки::
:
; : Введите текст новой ссылки:
I jFlash-версия сайта
•'• -'''X"' 3 ШШЁШ '•'•"•'•'•- v ..V:1:-.1'.— "" '.'••' :' >'•'. . • • ' Ш ' ' ' . ' . .

И" : адрес URL или но, локальный файл: ать файл... Удалить ссылку |

index_flash.html

(Нет меток нв. выбранной странице) Отображать ссылки из;: ; i :
^Текущей стран,-щы- :• |
|
;:" Виб ранно г о дэ ? 1й па• |Ш

;;|.:}: i^i дол'HTML-;:":; ;::;|:1;;];':

l
Рис. 3.12. Задание ссылки
Создание сайта на HTML 77

1. Откройте web-мастер и вставьте в центральную ячейку таблицу размером 2x3.
2. Затем в нижние ячейки вставьте ссылки с описанием Html-версия сайта и
Flash-версия сайта и ссылками на будущие HTML-документы (рис. 3.12).
3. Не забудьте про ссылку на сервер Macromedia — для тех, у кого не будет plug-
in к Flash. Ее надо расположить в нижних объединенных ячейках.
4. После того как ссылки появятся на экране, вставьте рисунки перед текстом
так, чтобы они стали частью ссылки.
5. В одну из верхних ячеек введите текст с приветствием.
6. В окне Свойства символа можно установить больший размер символов, на-
пример 12. Для форматирования используйте команды меню Формат или
контекстного меню. Управиться с параметрами шрифта можно и потом -
с помощью тега <font> или <style> (см. приложение 2).
Осталось только сохранить файл и открыть его в Блокноте, чтобы объединить
ячейки, и главная страница будет готова!
Содержание созданного HTML-файла будет примерно таким (листинг 3.2).
Листинг 3.2. Содержание HTML-файла для главной страницы (index.html)
<!DOCTYPE html public "-//w3c//dtd html 4.0 transitional//en">
<HTML>
<HEAD>
<META name="AUTHOR" content="flMHTpnii">
<META name="DESCRIPTION" content="Co3flaHKe интерактивного сайта">
<META name="KEYWORDS" content-''книга интерактивность Flash Лещев Дмитрий">
<Т1Т1Е>Создание интерактивных сайтов</Т1Т1_Е>
</HEAD>

<BODY text="#A58A38" bgcolor="#FFFFFF" link="#lFlB14" vlink="f009900" alink="#FF6600"
background="image/tile.jpg"topmargin=0 leftmargin=0 rightmargin=0 marginwidth=0
marginheight=0>

<TABLE border=0 cellspacing=0 cellpadding=0 width-''ЮОГ height="100r>
<TR>
<TD width»"40" height="60">
<IMG src="image/corner_lt.jpg" height=60 width=40>
</TD>
<TD width="50£" height="60" background="i(nage/ramka_top.jpg">
&nbsp;
</TD>
<TD width="400" height="60">
<IMG src="image/logo.jpg" height=60 width=400>
</TD>
<TD width="50l" height="60" background="image/ramkaj:op.jpg">
&nbsp:
</TD>
<TD width-"40" height="60">
<IMG src="image/corner_rt.jpg" height»60 width=40>
</TD>
</TR>
<TR>
<TD width="40" background="image/ramka_l.jpg">&nbsp:</TD>
<TD colspan="3" width="100^" height="100X" valign=top>
<CENTER>
<TABLE COLS=2 width="100r height="100X" cellpadding=20
78 Занятие 3. Сам себя не похвалишь...

<TR>
<TD COLSPAN="2">
<FONT size=+l face="Times New Roman Cyr. serif">Доброго времени
суток, путник!
<BR>Te6e надоело скитаться бездомным по виртуальным просторам?
На этом сайте ты узнаешь, что сколотить свою пристань в этом изменчивом море не так
уж и сложно... Кто я? Автор этого сайта и книги, живой иллюстрацией к которой он
является. Оглянись&пЬ5р;&#151;&пЬзр;и ты сам сможешь построить свой виртуальный дом.
Дом. который будет жить своей жизнью, он будет приветствовать своих гостей и
изменяться, стараясь угодить их вкусам.
<BR>&nbsp:
<ВР>Оглянись на свои следы
<BR>Cepon лентою, в кружевах воды.
<ВР>Оглянись...
<ВК>Жизнь пройдет как сон.
<BR>Bce кружащий сон
<ВР>Ярко-белых птиц.
<ВР>Оглянись...
<BR>&nbsp:
<BR>Tbi построил свой дом?
</FONT>
</TD>
</TR>
<TR>
<TD width=50«>
<A href="index_html .html">
<IMG src-"image/leaf.jpg" height=50 width=50 аН="лист
березы" border="0">
<FONT size=+l face="Times New Roman Cyr. serif">
HTML-версия caйтa<BR>
</FONT>
</A>
</TD>
<TD width=50£>
<A href="index_flash.html">
<IMG src="image/leaf. jpg" height=50 width=-50 alt-''лист
березы" border="0">
<FONT size=+l face="Times New Roman Cyr, serif">
Flash-версия сайта
</FONT>
</A>
</TD>
</TR>
<TR>
<TD colspan=2>
<CENTER>
Если у вас не установлен Flash plug-in, загрузите его с сервера компании
<А href="http://down!oad.macromedia.com/pub/shockwave/flash/english/
wi n95nt/6.0.29.0/fl ashplayer6i nstaller.exe">Macromedia</A>
</CENTER>
</TD>
</TR>
</TABLE>
</CENTER>
</TD>
<TO width="40" background="image/ramka_r.jpg">&nbsp;</TD>
</TR>
<TR>
<TD height=60 width-40>

.
Создание сайта на HTML 79

<IMG src="image/cornerjb.jpg" height=60 width=40>
</TD>
<TD width="50r height="60" background="image/ramka_top.jpg">
&nbsp:</TD>
<TD height=60 width=400>
<IMG src="image/logo.jpg" height=60 width=400>
</TD>
<TD width="50r height="60" background="image/ramka_top.jpg">
&nbsp:</TD>
<TD height=60 w1dth=40>
<IMG src="image/corner_rb.jpg" height=60 width=40>
</TD>
</TR>
</TABLE>
</80DY>
</HTML>

•Щ Создание интрактииных сайтов - Microsoft Internet Explorer
(iew Favorites ..'loots.

; сврнчаледы
Серой
/"ГЧ

знь прейдет как- сон.

-: •:-:'•-•.- . -.-.:-:•>:.>.. V |

Рис. 3.13. Так будет выглядеть главная страница

ПРИМЕЧАНИЕ
Рисунок 3.13 может не совсем точно соответствовать HTML-тексту и реальной странице сайта:
иллюстрации имеют свои особенности.

Если вы захотите, чтобы фильм открывался на полный экран, то ссылку на него
необходимо оформить по-другому:
<А href="#" onclick="intro('index_flash.html')">
<IMG src="image\leaf.jpg" height=64 width=50 аН="лист березы" border="0">
Flash-версия сайта</А>
80 Занятие 3. Сам себя не похвалишь...

В заголовок страницы перед закрывающим тегом </head> надо вставить такой сце-
нарий:
<SCRIPT language?"JavaScript">
var height2=screen.width;
van width2=screen.height:
function intro(URL)
{window.open('URL'.'name'. 'left-0. top=0, height=height2.width=width2,
status=no.1ocati on=no.toolbar=no.di rectori es=no.resi zable=yes.ful1screen«no.menubar=n
o'); }
</SCRIPT>

Страница сайта
Остальные страницы сайта будут иметь схему, несколько отличную от главной
страницы. Поверх рамки слева появится табличка со ссылками на страницы раз-
дела, а вверху под логотипом разместятся ссылки на разделы сайта (рис. 3.14).

Уголок Рамка Логотип Рамка Уголок
Пункт меню Пункт меню Пункт меню
Пункт меню Внутренняя
таблица
Пункт меню го или текст
Пункт меню
1 1
I
Пункт меню
Пункт меню
Пункт меню
Рамка
Уголок Рамка Логотип Рамка Уголок

Рис. 3.14. Схема большинства страниц сайта: меню слева выполнено в виде отдельной таблицы

Вы можете взять в качестве заготовки код главной страницы и добавить лиш-
нюю строку (тег <tr>) со встроенной таблицей, содержащей пункты меню. Нет
необходимости загромождать книгу лишним подробным описанием действий -
я лишь приведу основной HTML-код, так как Интернет-версия будет содержать
также и текстовое наполнение.
Чтобы было понятно, на какой странице находится посетитель, необходимо как-
то выделить закладку текущей страницы. Одним из вариантов может стать соз-
дание отдельных изображений для открытой и закрытой закладки. Однако это
не очень удобно и накладно для пользователя. Проще всего выделить под меню
или слева от вертикального меню ячейку толщиной в несколько пикселов, за-
полненную темным рисунком в один пиксел. Для открытого пункта заполнения
не должно быть — будет виден только фон страницы. Для бокового меню у нас
такая полоска есть — это рамка. Достаточно будет наложить на нее изображение
бересты.
Реализация предложенной схемы показана в листинге 3.3.
Создание сайта на HTML 81

Листинг 3.3. Шаблон для основных страниц сайта
<!DOCTYPE html public "-//w3c//dtd html 4.0 transitiona1//en">
<HTML>
<HEAD>
<META name="DESCRIPTION" content="CoaflaHMe интерактивного сайта">
<META name=" KEYWORDS" content="KHnra интерактивность Flash Лещев Дмитрий">
<ТШЕ>Создание интерактивных сайтов</ТШЕ>
</HEAD>

<BODY text="#A58A38" bgcolor="#FFFFFF" link-"#lFlB14" vlink="|009900" alink="#FF6600"
background="image/tile. jpg" topmargin=0 leftmargin=0 rightmargin=0 marginwidth=0
marginhe1ght=0>
<TABLE border=0 cellspadng=0 cellpadding=0 width="100r height="100r>
<TR>
<TD w1dth="40" height="60">
<IMG src="image/corner_lt. jpg" height=60 width=40>
</TD>
<TD width="50r height="60" background="image/ramka_top.jpg">
&nbsp;</TD>
<TD width="400" height="60">
<IMG src="image/logo.jpg" height=60 width=400>
</TD>
<TD w1dth="50X" height="60" background="image/ramka_top.jpg">
&nbsp:</TD>
<TD width="40" height="60">
<IMG src="image/corner_rt.jpg" height=60 width=40>
</TD>
</TR>
<TR>
<TD width="40" background="image/ramka_l .jpg" va!1gn=top>
<TABLE border=0 cellspacing=0 cellpadding=0>
<TR height=20>
<TD width-20>
<IMG src="image/tile.jpg" height=20 width=20>
</TD>
<TD width=20></TD>
</TR>
<TR height-60>
<TD width=20>
<A href="index_html .html">
<IMG src="image/menu_my.GIF" height=60 width=20 alt="o себе
и сайте" border=0>
</TD>
<TD width=20 background="image/tile. jpg">
<IMG src="image/t11e.jpg" height=20 width=20>
</TD>
</TR>
<TR height=60>
<TD width=20>
<A href="Irina.html">
<IMG src="image/menu_Irina.GIF" height=60 width=20
а!1="Ирина" border=0>
</A>
</TD>
<TO width-20></TD>
</TR>
<TR height=60>
<TD width=20>
82 Занятие 3. Сам себя не похвалишь...

<А href="Elisey.html">
<IMG src="image/menu_Elisey.GIF" height=60 width-20
а!1="Елисей" border=0>
</A>
</TD>
<TD width=20></TD>
</TR>
<TR height=60>
<TD width=20>
<A href="Poetry.htral">
<IMG src="image/poetry.GIF" height=60 width=20 alt-''стихи"
border=0>
</A>
</TD>
<TD width=20></TD>
</TR>
<TR height=60>
<TD width=20>
<A href="ref.html">
<IMG src="image/ref.GIF" height=60 width=20 alt-''ссылки"
border=0>
</A>
</TD>
<TD width=20></TD>
</TR>
<TR height-60>
<TD width=20>
<A href="science.html">
<IMG src="1mage/menu_science.GIF" height=60 width=20
аН="наука" border=0>
</A>
</TD>
<TD width=20></TD>
</TR>
<TR height=60>
<TD width=20>
<A href="photo.html">
<IMG src="image/menu_photo.GIF" height=60 width=20
аН="фотоальбом" border=0>
</A>
</TD>
<TD width=20></TO>
</TR>
</TABLE>
</TD>
<TD colspan="3" width="100^" height="100^" valign=top>
<TABLE border=0 cellspacing=0 cellpadding=0 width-"100X">
<TR height=20>
<TD width=100>
<A href="index_html.html">
<IMG src="image/my.GIF"
height=20 width=100 а!1="персональные страницы" border=0>
</A>
</TD>
<TD width=100>
<A href="book.htral">
<IMG src="image/book.GIF" height=20 width=100 аИ="книга"
border=0>
Создание сайта на HTML 83

</TD>
<TD width=100*></TD>
</TR>
<TR height=l>
<TD width=100></TD>
<TD width=100 background-"image/pixel.6IF">
<IMG src="image/pixel.GIF" height=l width=l>
</TD>
<TD width=100£ background="image/pixel.GIF">
<IMG src="image/pixel.GIF" height=l width=l>
</TO>
</TR>
<TR>
<TD co!span="3" width-"100r height-"100r>
Основное содержание
</TD>
</TR>
</TABLE>
</TD>
<TD width="40" background-"1mage/ramka_r.jpg">&nbsp;</TD>
</TR>
<TR>
<TD height=60 width=40>
<IMG src-"image/corner_lb.jpg" height-60 width=40></TD>
<TD width="50r' height="60" background="image/ramka_top.jpg">
&nbSp;</TD>
<TD height=60 width-400>
<IMG src="image/1ogo.jpg" height-6'0 width=400>
</TD>
<TO width="50r' he1ght=-"60" background="image/ramka_top.jpg">
&nbsp;</TD>
<TO height=60 width-40?
<IMG src="image/corner_rb.jpg" height=60 width=40>
</TD>
</TR>
</TABLE>
</BOOY>
</HTML>

Тестирование
Тестирование, которое кажется на первый взгляд достаточно простым и быст-
рым процессом, может отнять на первых порах до 90 % рабочего времени над
страницей. Для начала вы должны установить у себя несколько браузеров, по
меньшей мере 2: Internet Explorer и Netscape Communicator. Последний, хоть и
относится к редким и вымирающим программам, иногда (особенно если в ва-
шем характере присутствуют черты мазохиста и трудоголика) бывает очень по-
лезен — он очень трепетно относится к правильности расстановки тегов и не до-
думывает ничего, в отличие от детища Microsoft.
Вам необходимо добиться, чтобы в каждом из браузеров страница выглядела
именно так, как вам хочется. Если что-то не так, проверьте код страницы, внеси-
те исправления и проверьте еще раз. При работе с таблицами лучше временно
включить показ границ ячеек — установить атрибут border в теге <table> равным
ненулевому значению. Границы разных табличек можно покрасить в разные
цвета с помощью атрибута bordercol or. Старайтесь стадию тестирования начи-
84 Занятие 3. Сам себя не похвалишь...

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

Размещение в Сети
Как и на прошлом занятии, мы воспользуемся услугами Яндекса и разместим
сайт на страницах сервера narod.ru.
1. Вначале вам придется зарегистрироваться (см. занятие 2) и зайти в свою Мас-
терскую.
2. В Мастерской надо щелкнуть на ссылке Загрузка файлов на сайт.
3. На открывшейся странице нажимаете любую кнопку Browse. Выбираете на
компьютере нужный файл, нажимаете Открыть и повторяете процедуру для
другого файла в другом поле. Когда все 10 полей будут заполнены или все
нужные файлы окажутся выделенными, нажмите кнопку Загрузить файлы.
Картинки надо загружать в директорию image. Для этого необходимо ее сна-
чала создать в разделе Управление файлами и HTML-редактор, а потом на стра-
нице загрузки нажать ссылку Выбрать каталог. Все очень просто. Не забудьте,
что корневой файл (главная страница) должен иметь имя index.html.
Теперь вы можете набрать свой адрес в строке браузера и стать первым гостем
своего дома. После тестирования ссылок и комплектности рисунков можете за-
нести ваш сайт в каталог Народа. И ждите гостей!

Учитесь в Сети
Как сделать хороший сайт? С одной стороны, это сложно, так как надо много
знать: от HTML и JavaScript до графического дизайна и оптимизации графики.
И тут перед вами непаханое поле: «Учиться, учиться и еще раз учиться!». Но на
помощь может прийти другая сторона той же монеты: в Сети сложно что-то
скрыть. Конечно, есть методы, как не показать HTML-код посетителю, но, как
правило, если код страницы получил обозреватель, то его может увидеть и чело-
век — было бы время и желание его посмотреть. Таким образом, любой понра-
вившийся вам прием оформления (кусок кода) вы всегда можете использовать
и у себя (только не забудьте оставить ссылку на автора, если оно того стоит).
Если вы научитесь правильно подходить к созданию страниц, то вы всегда смо-
жете просмотреть результат, конечный или промежуточный. Не понравилось -
Что нового мы узнали 85

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

ПРИМЕЧАНИЕ
В частности, мой сайт вы можете посмотреть по адресу www.dimvovich.narod.ru. Если в код
в книге закрадется какая-либо ошибка, вы всегда сможете проверить ее по версии в Ин-
тернете.

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

Что нового мы узнали
Вот мы и начали претворять мечты об интерактивном сайте в жизнь. Впереди
нас ждет еще много интересного и нового, а пока подведем итог нашего занятия.
На нем мы научились:
• разрабатывать концепцию и дизайн сайта;
• сканировать фотографии и применять к тексту эффекты в программе
Photoshop;
• верстать web-страницы в web-мастере от Netscape и в обычном Блокноте.
Adi6s, сеньоры! На следующем занятии нас ждет встреча с Flash.
Занятие 4

Фильм на Flash
Любитель цветов!
Ты стал неприметно
Рабом хризантем.
1
Бусон

«Покажи паровозик!» — уже в десятый раз просит сын, и паровозик безропотно
переезжает экран. Появившись в конце XIX века, кино и анимация теперь вы-
зывают неподдельный восторг разве что у детей. Однако двигающийся рисунок
все равно приковывает наше внимание: во всех нас живет первобытный человек,
при малейшем движении готовый кинуться на добычу или убежать от хищника.
Сейчас, чтобы заставить двигаться картинку на экране, вовсе не обязательно ра-
ботать в студии «Союзмультфильм» или в компании Уолта Диснея. Достаточно
установить у себя программу Flash 5 или Flash MX, и тогда, повинуясь взмаху
вашей руки, смешные рисованные фигурки будут бегать, прыгать и летать, об-
лака станут растворяться в голубом небе, а буквы возникнут из небытия, пре-
вращаясь в текст вашего сайта.
Сегодня мы с вами вступаем в мир анимации — волшебный мир, доступный бла-
годаря Flash. Нам предстоит:
• рисовать, стирать и раскрашивать кадры;
• узнать, что такое «символ» во Flash и как его использовать для облегчения
работы;
• познакомиться с разными типами символов: клипами, кнопками и графиче-
скими рисунками, а также с их хранилищем — библиотекой;
• написать пару сценариев на ActionScript и понять, что с ним существенно про-
ще работать, чем с JavaScript;
• узнать, что такое слои и как устроена анимация во Flash;
• познакомиться с главным козырем Flash — раскадровкой;
• научиться работать с панелями настройки цвета;
• встроить фильм в HTML-страницу.
Вы уже установили Flash 5? Тогда запускайте программу — и начинаем работать.
1
В переводе В. Марковой.
Рабочая среда Flash 87

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

ПРИМЕЧАНИЕ
Если создание сайта на Flash для вас окажется непосильной задачей, отложите ее на пару
занятий. Получив некоторый опыт работы с редактором Flash, вы с легкостью все преодо-
леете.

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

ПРИМЕЧАНИЕ
Здесь и далее основное описание будет соответствовать работе во Flash 5, однако в прило-
жении б вы сможете найти краткое описание нововведений в уже увидевшей свет версии
Flash MX. В этом же приложении вы найдете более подробное описание команд и инстру-
ментов Flash.

Рабочая среда Flash
Во Flash 5 вся работа происходит на столе (stage): на нем вы располагаете ри-
сунки и символы, и именно его размеры являются размерами «кадра» фильма
(рис. 4.1).

ПРИМЕЧАНИЕ
Символ — это термин Flash, означающий отдельный объект — понятие, по смыслу очень
близкое аналогичному понятию в ООП. Представьте, что вы создаете мультфильм, пере-
двигая отдельную фигурку по листу бумаги. Ее можно каждый раз рисовать в очередном
кадре — тогда она будет просто рисунком, а можно вырезать и перемещать по фоновому
изображению — тогда она будет символом. Flash позволяет встроить анимацию в отдель-
ный символ, то есть, например, внутри символа можно задать движения рук и ног, а на
основной киноленте — движение символа в целом по фону. После создания все символы
попадают в библиотеку. Там же можно найти звуковые файлы, импортированные рисунки
и раскадровки.

Вверху стола расположена кинолента (timeline), заполненная кадрами (frame) и
ключевыми кадрами (keyframe). Заполненный ключевой кадр выделяется на ки-
ноленте кружком.
Слева от таблицы с кадрами находится список слоев (layer). Хорошей аналогией
слоям являются прозрачные листы кальки, наложенные один на другой. В итоге
суммарное изображение является суперпозицией (совмещением) всех рисунков
на слоях, причем изображение на верхнем слое закрывает нижние.
По киноленте передвигается считывающая головка (playhead), указывающая те-
кущий кадр. Слева расположена панель инструментов (Toolbox), разбитая на
88 Занятие 4. Фильм на Flash

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

«Flash 5-[Movie!]
tdrt Yisw Insert Modify Ie<t Qoiwoi iYimiow Щ

Рис. 4.1. Фильмы во Flash создаются на столе, так же как и в настоящей мультипликации

По всей области экрана могут перемещаться панели и окна. Их краткое описа-
ние вы найдете в приложении 4. Через меню программы можно получить до-
ступ ко всем командам и инструментам Flash 5. Вряд ли это удобно, но для
ознакомления с возможностями программы их список будет весьма кстати. Он
также есть в приложении 4.
Щелкнув в любом месте рабочей области правой кнопкой мыши, можно вы-
звать контекстное меню. Его вид зависит от места щелчка. Например, если
щелкнуть на клипе, меню будет содержать следующие команды:
• Cut (Вырезать);
• Сору (Копировать);
• Paste (Вставить);
• Select All (Выделить все);
• Deselect All (Отменить выделение);
Рабочая среда Flash 89

• Scale (Изменить размер);
• Rotate (Повернуть);
• Edit (Правка);
• Edit In Place (Правка на месте);
• Edit In New Window (Правка в отдельном окне);
• Actions (Действия);
• Panels (Панели).
Важную роль в управлении фильмом играют «горячие клавиши» — сочетания
клавиш, позволяющие вызывать команду без использования мыши и меню. Они
указаны в меню рядом с командами.
Альтернативой «горячим клавишам» и меню для вызова некоторых панелей
служит строка быстрого запуска. В ее правой части расположены значки, вызы-
вающие следующие панели:
• Info (Информация);
• Mixer (Палитра);
• Character (Шрифт);
• Instance (Экземпляр);
• Movie Explorer (Проводник по фильму);
• Frame/Object Actions (Действия с кадром/объектом);
• окно Library (Библиотека).
По умолчанию панели группируются. Вызывая панель Character (Шрифт), вы
получаете через другие вкладки панели доступ еще к двум панелям для работы
с текстом: Paragraph (Абзац) и Text Options (Параметры текста). Однако если вы
перенесете вкладку Paragraph (Абзац) на отдельную панель (взяв за закладку и
потащив в сторону), то она перестанет вызываться вместе с панелью Character
(Шрифт).

СОВЕТ -
Советую вам делать отдельными только те панели, которые вы часто используете вместе,
например Swatches (Цветовые модификаторы) и Mixer (Палитра).

Если вы привыкли организовывать окружающее пространство в соответствии со
своими привычками и вкусами, вы можете настроить расположение панелей по
своему желанию — не только растащить имеющиеся группы, но и создать но-
вые, расположив их на столе так, как вам удобно. Записать результат манипу-
ляций можно командой Save Panel Layout (Сохранить расположение панелей),
находящейся в меню Window (Окно). Вызывается заданное расположение панелей
командой Panel Sets (Настройка панелей), расположенной по соседству, и выбо-
ром соответствующего расположения.
Если после всех экспериментов панели стали загромождать экран, можно их
удалить с рабочего стола, нажав клавишу Tab. Повторное нажатие Tab вернет их
обратно. Вызвать только нужные панели можно через команды меню, «горячие
клавиши» и строку состояния.
90 Занятие 4. Фильм на Flash

Чтобы получить более полное представление о работе с программой, просмот-
рите приложение 4, прилагаемые к Flash 5 занятия и справку по программе.
Создайте один-два простеньких фильма. Я уверен, что вы будете поражены,
с какой легкостью во Flash можно создавать сложные эффекты. Если вы разо-
брались с терминологией и уяснили, как работать с Flash, приступим к продол-
жению работы над сайтом.

СОВЕТ
Одной из самых полезных команд является команда Undo (Отменить). Нажав Ctrl+Z, вы
легко сможете отменить любое неправильное или неудачное действие.

Сайт-фильм
При создании сайта-фильма на Flash есть две возможности. Первая — написать
единый фильм, который загружается целиком, вторая - - подгружать* части
фильма по мере необходимости. Понятно, что для больших сайтов более приго-
ден второй вариант: нехорошо заставлять зрителя загружать весь сайт, если он
собирается посмотреть всего одну-две страницы. Но для небольших сайтов, ка-
ким будет и наш с вами, наиболее приемлемым оказывается первый вариант.
Заставлять ждать, пока загрузится каждая страница, — значит, терять все пре-
имущества Flash перед HTML.
С чего начинается работа над созданием фильма? Конечно, с написания сцена-
рия! Мы воспользуемся и сценарием, и дизайном, разработанным для HTML-
версии. Таким образом, мы можем уже приступать к «съемке». Несмотря на ис-
пользование инструмента анимации, собственно оживших картинок у нас не бу-
дет. Flash просто послужит удобным инструментом компоновки сайта.
1. При запуске Flash на экране появляется новый пустой фильм. Его также
можно создать командой New (Создать) из меню File (Файл).
2. Щелкаем на столе правой кнопкой мыши и в контекстном меню выбираем
строчку Movie Properties (Свойства фильма). В открывшемся одноименном
окне задаем новые размеры экрана фильма, соответствующие размеру откры-
того окна Internet Explorer при разрешении экрана 1024x800: в поле Width
(Ширина) — 1014, в поле Height (Высота) — 738. Это будет размер нашего
фильма в пикселах.
3. Закрываем окно (кнопкой ОК) и сразу же выполняем команду Save As (Сохра-
нить как) из меню File (Файл). Чтобы не пришлось переименовывать создан-
ный Flash HTML-файл, дадим фильму название index_flash.
4. Сразу же настроим параметры публикации: выберем команду File > Publish Set-
tings (Файл > Настройки публикации). На вкладке Formats (Форматы) долж-
ны быть установлены два флажка: Flash и HTML. На вкладке Flash вам, скорее
всего, тоже ничего не придется менять. А вот на страничке, посвященной HTML,
надо в списке Dimensions (Единицы измерения) выбрать пункт Percent (Про-
цент). В двух полях ниже должно быть указано число 100. Остальные пункты
можно оставить заданными по умолчанию. Теперь можно нажать кнопку Pub-
lish (Опубликовать), а затем ОК.
Слои 91

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

Фон
Слой фона, как и в HTML-версии сайта, будет заполнен изображением бересты.
1. Сначала необходимо выполнить команду Import (Импорт) из меню File (Файл).
С помощью стандартного окна выбора файла найдите нужный файл tile.jpg. На-
жмите кнопку Открыть. Если теперь открыть окно библиотеки (Ctrl+L), вы обна-
ружите в нем открытый файл, добавленный в библиотеку наряду с символами.

СОВЕТ
Окно библиотеки, панель Проводника по фильму и редактора ActionScript, а также панели
Info (Информация), Mixer (Палитра), Character (Шрифт) и Instance (Экземпляр) можно от-
крыть с помощью кнопок на панели быстрого запуска, которая находится в правом нижнем
углу окна программы. Все панели и окна управляются также командами меню Window (Окно)
и соответствующими им «горячими клавишами».

2. Теперь рисунок можно использовать в качестве заливки. В слое Фон (он дол-
жен быть предварительно выделен) нарисуйте прямоугольник, покрывающий
весь стол, с помощью инструмента Rectangle (Прямоугольник). Лучше нари-
совать прямоугольник без контура. Для этого выделите маркер контура на па-
нели инструментов и нажмите кнопку No Color (Без цвета).
3. Выберите инструмент Arrow (Стрелка) и выделите весь прямоугольник, обве-
дя его мышью. Откройте панель Info (Информация, Ctrl+Alt+I) и в полях W
(ширина) и Н (высота) задайте размеры фильма.
92 Занятие 4. Фильм на Flash

4. Затем откройте панель Align (Выравнивание, Ctrl+K ) и поместите прямоуголь-
ник в центр стола. Для этого вам понадобится нажать кнопку То Stage (Отно-
сительно стола), находящуюся справа, и две кнопки из центральной области
панели: Align vertical center (Выровнять по центру вертикально) и Align horizontal
center (Выровнять по центру горизонтально).

СОВЕТ
Панель Align (Выравнивание) служит для выравнивания выделенных объектов относитель-
но друг друга или относительно стола (в последнем случае должна быть нажата кнопка То
Stage (Относительно стола)). Для выделения нескольких объектов необходимо последова-
тельно щелкать на них, держа нажатой клавишу Shift. Изображения на кнопках панели
имеют достаточно понятный смысл.

5. Выделите область заливки, щелкнув внутри прямоугольника. Откройте па-
нель Fill (Заливка), на ней в раскрывающемся списке выберите Bitmap (Растро-
вый рисунок). В нижней части панели появится миниатюрное изображение
рисунка. Выберите его, и стол покроется рисунком.
6. Теперь надо снять выделение с области заливки и выбрать инструмент Paint
Bucket (Банка краски). В нижней части панели инструментов станет доступен
еще один инструмент — Transform Fill (Преобразование заливки). Выберите его.
7. Если теперь щелкнуть на заливке, появятся управляющие маркеры. Как и
везде, во Flash квадратные маркеры служат для изменения размеров, а круг-
лые — для поворота и переноса. Переместите маркеры так, чтобы область за-
ливки совпала по размерам с начальным изображением.

ПРИМЕЧАНИЕ
В отличие от HTML, при изменении размеров окна размер элемента заливки тоже будет из-
меняться. Чем больше окно, тем больше будут полоски на бересте. Лучше всего, если вы
зададите в свойствах фильма реальные ожидаемые размеры окна браузера. Для каждого
разрешения можно будет загружать свой фильм: это несложно сделать с помощью Action-
Script.

8. Чтобы не полагаться на глаз, перейдем на слой Рамка и нарисуем на нем кон-
тур полученного прямоугольника. После того как выбраны инструмент Rec-
tangle (Прямоугольник) и первый кадр слоя Рамка, надо выбрать маркер
заливки на панели инструментов и щелкнуть на кнопке No Color (Без цвета),
расположенной ниже.
9. Снова щелкните на первом кадре слоя Рамка. Контур будет выделен.
10. Теперь откройте панель Info (Информация) и на ней задайте нужные значе-
ния в полях W (ширина) и Н (высота). Они должны соответствовать разме-
рам, указанным при создании рисунка в графическом редакторе.
11. Заблокируйте слой Рамка, щелкнув в строке слоя под изображением замка.
Теперь со слоем нельзя работать, но зато и нельзя его случайно испортить.

СОВЕТ
Если вы закончили работать со слоем, даже на время, — заблокируйте его. Это избавит
вас от многих неудобств в работе. Повторный щелчок на замке снимает блокировку.
Слои 93

12. Теперь можно вернуться к редактированию заливки. Опять возьмите в руки
инструмент Transform Fill (Преобразование заливки) и перемещением угловых
квадратных маркеров и центрального круглого добейтесь совпадения контура
прямоугольника и элемента заливки.
13. Теперь можно сместить заливку точно в угол или другим образом, как вам
покажется лучше. Заблокируйте слой: он готов.
14. Разблокировав слой Рамка, удалите нарисованный там прямоугольник.

Рамка
Приступим теперь к созданию рамки.
1. С помощью инструмента Rectangle (Прямоугольник) нарисуем прямоугольник
со скругленными краями. Радиус скругления можно задать, щелкнув на кноп-
ке Round Rectangle Radius (Радиус скругления углов прямоугольника) и задав
значение, например 10.
2. Теперь выделим весь прямоугольник вместе с контуром, щелкнув на первом
кадре слоя Рамка.
3. Скопируем фигуру, нажав Ctrl+C, а потом вставим ее командой Edit > Paste in
Place (Правка > Вставить на место).
4. Аккуратно, чтобы не снять выделение, открываем панель Transform (Преобра-
зование). В верхних полях задаем значение 95 %. Выделенный прямоуголь-
ник станет меньше.
5. Теперь выделите внутреннюю область заливки, щелкнув на ней инструмен-
том Arrow (Стрелка), и удалите, нажав клавишу Del. Получилась рамка.
6. Осталось покрасить ее в нужный цвет. Можно заполнить рамку растровой за-
ливкой, однако оценить это для узкой рамки будет сложно. Проще подобрать
подходящий цвет и поработать с ним. Если вы жаждете разнообразия — соз-
дайте градиентную заливку.
7. Чтобы было проще работать, выделим рамку и нажмем F8, чтобы преобразо-
вать ее в отдельный символ Рамка. Это имя надо ввести в диалоговом окне.
Там же необходимо указать поведение символа Graphic (Графический рису-
нок) и нажать ОК. Рамка превратится в отдельный символ.
8. Теперь выберем символ Рамка в раскрывающемся меню Edit Symbols (Редакти-
рование символов), расположенном в правом верхнем углу. Выделим область
заливки в рамке и нажмем Ctrl+C.
9. Создадим новый слой, назвав его Заливка, и командой Edit > Paste in Place
(Правка > Вставить на место) поместим на него скопированный фрагмент.
10. Таким же образом перенесем внутренний контур на отдельный слой.
11. Перейдем на слой Заливка, выделим содержимое и откроем панель Mixer (Па-
литра). На ней мы настроим цвет заливки. В полях R (Красный), G (Зеле-
ный), В (Синий) необходимо задать соответствующие компоненты цвета: 123,
90, 74.
12. Заблокируем заливку и выделим внешний контур. Если контуры не видны,
выделите мышкой слой заливки и перетащите его в самый низ списка слоев.
94 Занятие 4. Фильм на Flash

13. На панели Stroke (Контур) зададим его толщину — 3. Так же поступим и с
внутренним контуром.
14. Потом с помощью панели Mixer (Палитра) окрасим оба контура в более тем-
ный, чем заливка, цвет (например, 90, 80, 60).
15. Теперь нам предстоит окрасить разные части контура в разные цвета, чтобы
придать рамке эффект вогнутости. Заблокируем и скроем два слоя (для этого
надо щелкнуть в строке слоя под изображением глаза), оставив видным толь-
ко один из контуров. Если щелкнуть на одной из его сторон стрелкой, про-
изойдет выделение стороны. Предположим, что свет падает из левого
верхнего угла. Значит, во внешнем контуре правая и нижняя грани должны
быть окрашены в более светлый цвет, чем заливка, а левую и верхнюю можно
оставить более темными. Правый нижний уголок также окрашивается без
проблем.
16. Чтобы перекрасить половинки смежных уголков, придется увеличить изобра-
жение инструментом Zoom (Масштаб). В увеличенном виде можно обвести
нужную область стрелкой и перекрасить. Все манипуляции с окраской произ-
водятся на панели Mixer (Палитра).
17. Во внутреннем контуре более светлую окраску должен иметь противополож-
ный угол.
18. Таким образом, мы получили вогнутость рамки. Если вас не удовлетворяет
результат, можно с помощью команды Modify > Shape > Convert Lines to Fill (Из-
менить форму > Преобразовать контур в заливку) сделать из контура заливку,
а потом воспользоваться богатыми возможностями использования заливки,
например градиентом.
19. Вернемся к редактированию сцены, выбрав Scene 1 в списке Edit Scene (Редак-
тирование сцен). Поместим символ Рамка по центру и растянем его в нужное
положение с помощью панелей Transform (Преобразование) и Align (Выравни-
вание).

Логотип
Теперь займемся логотипом.
1. Логотип сделаем отдельным символом. Для этого нажмем Ctrl+F8, назовем его
Логотип и определим его поведение как Graphic (Графический рисунок).
2. Если вы хотите встроить анимацию, установите положение переключателя в
Movie clip (Клип). Впрочем, вы можете сделать это и позже, открыв окно биб-
лиотеки, куда попадают все символы, и выбрав в контекстном меню другое
значение для команды Behavior (Поведение).
3. Внутри символа откройте панель Character (Шрифт) и задайте необходимые
параметры текста. Текст не имеет контура и окрашивается только в цвет за-
ливки. Лучше выбрать те же параметры шрифта, что и для HTML-версии.
4. После этого возьмите инструмент Text (Текст) и напишите текст логотипа.
5. Затем выделите весь текстовый блок целиком и дайте команду Modify > Break
Apart (Изменить > Преобразовать в графику). Текст превратится в обычный
графический объект.
Слои 95

6. Теперь выберите инструмент Ink Bottle (Бутылка чернил). Настройте на панели
Stroke (Контур) параметры контура. Его надо делать тоньше, нежели контур
рамки. Затем щелкните мышью на контуре каждой буквы (и на внутреннем,
и на внешнем, если их два). Чернила аккуратно растекутся по краю области
заливки.
7. Дальше надо поступить так же, как мы поступили для рамки: выделяя участ-
ки контура, перекрасить их в более светлый оттенок. Если вы не запутаетесь
с углами, буквы приобретут эффект вдавленности.
8. Если вы еще не сделали логотип в Photoshop на предыдущем занятии, можете
воспользоваться плодами тяжких трудов еще раз, импортировав изображение
логотипа в формат GIF.
9. После того как логотип готов, перейдите на стол главной сцены и перетащите
из окна библиотеки два символа логотипа на первый кадр слоя Логотип. Об-
ратите внимание на то, что, как только на кадре появляется содержимое, он
становится ключевым (на киноленте он рисуется с жирной точкой). Один из
символов надо разместить вверху, а второй — внизу стола.

Меню
Слой содержания мы оставим «на закуску», а сейчас займемся меню.
В отличие от обычной растровой графики (прозрачный GIF — исключение), во
Flash видно только то, что нарисовано, и даже оно может быть невидимым, если
установить свойство прозрачности в О1. Поэтому для элемента меню нам необ-
ходимо только написать название и сделать рамку, придающую выпуклость.
1. Для каждого элемента надо создать свой символ, в котором нарисовать рамку
нужного размера, а в ней — надпись. Не забудьте выровнять рамку по центру
стола.
2. Эффектом вогнутости букв можно не заниматься — символы будут слишком
мелкими. А вот цвета рамки, нарисованной инструментом Line (Линия), луч-
ше подобрать так, чтобы закладка была выпуклой. Нижняя граница должна
быть выполнена цветом фона, а левая и верхняя должны быть покрашены в
более светлый цвет. Конечно, если вы хотите сделать меню более контраст-
ным, можно покрыть его другой растровой заливкой, но контур все равно
лучше делать разноцветным для выпуклости.
3. В отличие от предыдущих символов, пункты меню будут кнопками (Button).
У символа-кнопки первые 4 кадра имеют название: Up (Приподнята), Over (Под
указателем), Down (Нажата) и Hit (Срабатывание). Изображение в каждом кад-
ре определяет вид кнопки в разных положениях. Сначала нарисуйте кнопку в
ее обычном, не нажатом положении, то есть для кадра Up (Приподнята).
4. Если хотите, можно задать ключевыми и другие кадры, выделив их и нажав F6,
что соответствует команде Insert > Keyframe (Вставка > Ключевой кадр). В этих
кадрах можно перекрасить, например, буквы в другой цвет. Обратите внимание,
что кадр Down (Нажата) показывается только непосредственно при щелчке на
1
Правильнее, конечно, говорить «свойство непрозрачности», но так уж повелось, что этот параметр
(alpha transparency) назвали «прозрачность».
96 Занятие 4. Фильм на Flash

кнопке, а кадр Hit (Срабатывание) вообще не виден — в нем определяется об-
ласть срабатывания кнопки. Вы можете сделать ее больше или меньше види-
мых границ кнопки.
5. Кроме символов пунктов меню на слоях будет еще присутствовать символ
линии. Это будет отдельный символ, состоящий из прямой линии более тем-
ного цвета, чем контур. Эти линии нам понадобятся для выделения активного
пункта меню. Полоска протянется от одного края стола до другого.
6. Чтобы линия не заслоняла текущий пункт меню, его надо поместить на са-
мый верх командой Send to Font (На передний план) из подменю Modify >
Arrange (Изменить > Распределение). Контур, окрашенный в цвет фона, засло-
нит линию, создавая эффект закладки. Остальные пункты поместим за экзем-
пляр линии командами того же подменю.

Содержание
На слое Содержание постранично разместятся текст и иллюстрации. Одна стра-
ница соответствует одному кадру. Если вы решите включить в страницы анима-
цию, кадров может быть больше. Прежде всего выделим, например, кадр 15 во
всех слоях. Для этого щелкайте на кадрах, удерживая клавишу Shift. Затем на-
жмем F5, вставляя простой кадр.
Дальше для всех страниц сайта выполним следующую процедуру.
1. Выделяем следующий кадр в слое Содержание и нажимаем F6. Кадр становит-
ся ключевым.
2. Открываем панель Frame (Кадр) и в поле Label (Метка) даем кадру «говоря-
щее название». Использовать для него лучше только латинские буквы. На-
пример, фотоальбому логично дать имя foto. Первому кадру тоже надо дать
название.
3. Заполняем кадр на слое Содержание собственно содержанием страницы: тек-
стом, фотографиями, анимационными клипами.
4. Затем переходим к следующему кадру.
Если вы потом захотите задать на страницах общую анимацию, можно просто
выделить нужный кадр, который вы решили продолжить, и нажать F5 или F6.
Новые кадры надо заполнить содержимым. Не забудьте также продлить осталь-
ные слои, добавив в них кадры, чтобы все они были одной длины.
По умолчанию Flash внедряет используемые символы. Однако вы можете умень-
шить размер SWF-файла, использовав шрифты с компьютера пользователя,
особенно если текст составляет основную часть сайта. Для этого необходимо
установить флажок Use Device Fonts (Использовать типы шрифтов) на панели
Text Options (Параметры текста), а на панели Character (Шрифт) выбрать в каче-
стве шрифта один из следующих типов гарнитур:
• _sans — шрифты без засечек, типа Verdana, Arial и Helvetica (обычно их на-
зывают шрифтами sans serif);
• _serif — шрифты с засечками, типа Times, Palatine и Baskervill;
• „typewriter — это моноширинные шрифты, такие как Courier.
Слои 97

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

Фотоальбом
Если правила хорошего тона в HTML требуют помещения больших фотографий
на отдельных страницах, то во Flash такое ни к чему. Фотоальбом можно также
оформить в виде миниатюр, но каждая из них будет не ссылкой на другую стра-
ницу сайта, а кнопкой. Фотография будет раскрываться во всей своей красе,
если на нее навести указатель мыши.
Как устроен такой эффект, вы уже, наверное, догадались: каждую фотографию
необходимо сделать символом Button (Кнопка). В кадре Over (Под указателем)
надо поместить большое изображение фотографии, сдвинутое в сторону. Обра-
тите внимание, что в кадре Hit (Срабатывание) должен быть нормальный, ми-
ниатюрный вид фото, иначе области срабатывания будут перекрываться. В кадре
Down (Нажата) также должен быть помещен ключевой кадр с рисунком нор-
мального размера.

Растворение текста
Один из основных приемов перехода от одного текстового изображения к дру-
гому состоит в растворении или затемнении текста.
Эффект растворения достигается доведением до нуля прозрачности текста. При
затемнении, наоборот, в момент перехода верхний слой становится полностью
непрозрачным, закрывая текст. Мы зададим эффект растворения, так как затем-
нение будет закрывать не только текст, но и другие элементы сайта.
Для каждого именного кадра необходимо провести следующую процедуру.
1. Установить считывающую головку на именной кадр в слое Содержание и де-
сять раз нажать клавишу F5.
2. В образовавшейся последовательности выбрать средний кадр и превратить его
в ключевой, нажав F6. То же самое сделать для последнего кадра.
3. Выделить всю последовательность кадров и выполнить команду Insert > Create
Motion Tween (Вставка > Выполнить раскадровку).
4. В первом и последнем кадрах последовательности выделить содержание слоя,
на панели Effect (Эффект) в раскрывающемся списке выбрать Alpha (Прозрач-
ность) и установить для него значение 0.
Обратите внимание, что именной кадр должен быть первым в последовательно-
сти (рис. 4.2). Во время раскадровки, о наличии которой говорят стрелки, может
происходить не только смена прозрачности, но и вращение, перемещение и про-
чие анимационные эффекты.
4 Зак. 96
98 Занятие 4. Фильм на Flash

а •«, "50 .. в;
;;. ; ;
;> r0i.0p*t»-:r,tf

шШшЕи
-} Щ$$Щъ
<

00*
JBi

Рис. 4.2. Так должна выглядеть кинолента для реализации эффекта растворения

Эффект интерактивности
Чтобы изменить фоновый рисунок на HTML-странице, вам понадобится созда-
вать страницы с разным фоном. На Flash такое изменение можно сделать очень
просто, хотя это и будет довольно обременительно для фильма в смысле его
размера на диске.
1. Вставьте новый слой над слоем Фон и назовите его Новый фон.
2. Создайте несколько символов-клипов, представляющих собой прямоугольни-
ки размером со стол, и заполните их растровым рисунком. В качестве поведе-
ния вы должны указать именно Movie Clip (Клип), поскольку только клипам
можно дать имя.
3. Создайте несколько кнопок, которые будут содержать небольшой элемент это-
го растрового изображения или его название. Поместите эти кнопки на слой
Новый фон так, чтобы они не мешали основному содержанию фильма.
4. На тот же слой необходимо поместить символы-прямоугольники, сделанные
в пункте 2. На панели Instance (Экземпляр) зададим их имена латинскими бу-
квами (в поле Name). Например, рисунок, изображающий небо, можно назвать
sky и т. д. Расположить эти символы надо за пределами стола, чтобы они не
были видны. Для этого их придется уменьшить с помощью панели Transform
(Преобразование).
5. Выделив одну из кнопок для изменения фона (пусть это будет sky ), откройте
панель редактора ActionScript. Панель имеет контекстно-зависимое название
и в данном случае должна называться Object Actions (Действия с объектом).
Справа на панели введите следующий сценарий, перейдя в режим эксперта:
on (release) {
sky._x=_root._width/2;
sky._y=_root._height/2;
sky._wi dth=_root._wi dth;
sky._height=_root._height;
}
6. Повторите пункт 5 для всех кнопок изменения фона. Несложно понять, что
так можно изменить весь дизайн фильма, а не только фон.
Впрочем, можно предложить и другой путь, аналогичный отдельным страницам
HTML. Ведь для каждого из именных кадров на слое Содержание можно сделать
вариант с другим фоном. Так как фон изменяется в другом слое, слой содержа-
Слои 99

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

ActionScript
Осталось только оживить сайт. Сделать это нам поможет язык сценариев, встро-
енный во Flash, который называется ActionScript.
1. Сначала выделяем первый именной кадр в слое Содержание и открываем па-
нель Frame Actions (Действия с кадром). На правой панели вводим самый про-
стой и самый распространенный сценарий:
stopO;
Эта команда заставит фильм остановиться.
2. Затем определим переходы между кадрами. Для этого выделим одну из кно-
пок меню и перейдем на панель редактора ActionScript, которая теперь долж-
на называться Object Actions (Действия с объектом). Сценарий, введенный в
окно панели, для кнопки, отвечающей за ссылку на фотоальбом, будет таким:
on (release) {
gotoAndPlay ("foto");
}
Или таким, если вы реализовали эффект растворения:
on (release) {
gotoAndPlay (_currentframe+l);
Pass="foto";
}
3. Теперь осталось ввести сценарий, который будет направлять посетителя к сле-
дующей странице. Его надо вставить в завершающий кадр последовательности:
gotoAndPlay (Pass):
Этот сценарий перенаправит зрителя к странице, имя которой присваивается
кнопкой переменной Pass. В итоге в каждой последовательности после имен-
ного кадра протянутся две стрелки раскадровки, автоматически меняющие
прозрачность текста, а также два сценария, управляющие течением фильма,
и один именной кадр (рис. 4.2).
Вводить сценарии можно вручную, выбрав в меню режим эксперта (Expert Mode).
Меню раскрывается при щелчке на широкой стрелке, которая находится в пра-
вом верхнем углу редактора. В обычном режиме (Normal Mode) Flash не даст вам
внести в текст сценария никаких неположенных изменений.
Команды в обоих режимах вводятся двойным щелчком или перетаскиванием из
левой части панели. Команды stop и goto находятся в папке Basic Actions (Про-
стые действия), а команда on — в папке Actions (Действия). В обычном режиме
при вводе команды внизу панели появляются поля для параметров команды.
В случае команды goto надо указать четыре параметра:
• Scene (Сцена). Оставляем значение, заданное по умолчанию, — <currentscene>.
• Туре (Тип ссылки). В списке необходимо выбрать значение Frame Label (Мет-
ка кадра).
• Frame (Кадр). Введите имя кадра без кавычек.
100 Занятие 4. Фильм на Flash

• Флажок Go to and Play управляет переходом между командами gotoAndStop и
gotoAndPlay. Нам нужна первая команда, так как мы собираемся остановить
фильм в кадре перехода.
Если ваша страница занимает не один кадр, а проходит через несколько, вам не-
обходимо задать команду gotoAndPlay. Только в завершающем кадре последова-
тельности после именного кадра, куда приведет зрителя сработавшая кнопка,
можно установить команду stop.
Итак, фильм готов! Нажимайте Ctrl+Ehter и любуйтесь своим творением. Если
все нормально — перейдите из Flash в Проводник и запустите файл index_flash.html.
Вы должны увидеть, как фильм будет выглядеть на экране зрителя. Есть недо-
четы? Можно подправить код страницы, чтобы убрать их.

Задание собственной палитры во Flash
Предположим, вы задали цвета на одной из страниц вашего сайта-фильма. Как
использовать этот набор цветов в дальнейшем? Для этого вам надо задать и со-
хранить на диск палитру, из которой вы потом сможете брать «краски» при соз-
дании фильма.
Вначале необходимо сказать несколько слов о том, как устроены палитры во Flash.
На какой бы панели вы ни стали выбирать цветовой модификатор, вам будут
доступны только два набора цветов: для контура и для заливки. Обратите вни-
мание — это разные палитры! В чем состоит их разница, легко понять, обратив-
шись к панели Fill (Заливка). Если вы откроете список, то увидите ряд пунктов,
каждый из которых представляет тип цветового модификатора:
• None (Нет) — без заливки;
• Solid (Сплошной) — однородный цвет; только такие цветовые модификаторы
доступны для окраски контура;
• Linear Gradient (Линейный градиент) — градиент цветов (до 8 штук) заполня-
ет область вдоль горизонтального направления;
• Radial Gradient (Радиальный градиент) — градиент цветов (2 или 3) заполняет
область от центра к периферии;
• Bitmap (Растр) — заливка растровым рисунком.
Таким образом, для окраски контура вы можете использовать только палитру
(набор) сплошных цветов, а для заливки — сплошные цвета, градиенты и растр.
Чтобы добавить сплошной цвет в палитру, откройте панель Mixer (Палитра).
В нижнем цветовом поле Color selector (Выбор цвета) выберите близкий к нуж-
ному цвет. Значения его компонентов отобразятся в соответствующих полях.
Теперь, изменяя эти числа, вы можете подобрать подходящий оттенок.
Названия полей и возможные значения зависят от положения переключателя-
флажка в меню, открывающегося при нажатии на большой черный треугольник
в правом верхнем углу панели Mixer (Палитра). В самом низу меню находится
команда Add Swatch (Добавить модификатор), после выполнения которой выбран-
ный цвет окажется в дополнительной палитре сплошных цветов. Переключатель
устанавливает вид правой части панели Mixer (Палитра) следующим образом:
Задание собственной палитры во Flash 101

• RGB — три верхних поля будут содержать компоненты цвета по схеме RGB:
R — Red (красный), G — Green (зеленый), В — Blue (синий). Значения каж-
дого компонента могут изменяться от 0 до 255. Черный цвет по данной схеме
выглядит как (0; 0; 0), а белый — как (255; 255; 255). Оттенки серого, естест-
венно, имеют одинаковые значения компонентов.
• HSB — поля будут содержать значения разложения цвета по компонентам: Н -
Hue (оттенок), S — Saturation (контрастность), В — Brightness (яркость). Конт-
растность и яркость измеряются в процентах, а оттенок — в градусах (0...360).
• Hex — поля также отражают значения по схеме RGB, однако записываются
они в шестнадцатеричной системе счисления от 0 до FF.
Если известны значения компонентов цвета, который вы решили добавить в палит-
ру, можно установить значения в соответствующих полях, посмотрев в окне моди-
фикатора результат, и выполнить команду Add Swatch (Добавить модификатор).

Создание и настройка градиентов
Кроме сплошных цветов вы можете создать и собственный градиент. Для его
настройки выполните следующие действия.
1. Нарисуйте круг для экспериментирования и выделите его.
2. Выберите радиальный градиент внизу панели Swatches (Цветовые модифика-
торы). Во всплывающем меню в правом верхнем углу этой панели дайте ко-
манду Duplicate Swatch (Дублировать цветовой модификатор). Теперь в палитре
существует два одинаковых цветовых модификатора. Выделите скопирован-
ный модификатор (это должно произойти автоматически), чтобы вносимые
изменения коснулись бы только его, оставив оригинал без изменений.
3. Перейдите на панель Fill (Заливка). Там вы увидите цветную шкалу и под ней
несколько ползунков, по одному на каждый из цветов градиента, всего до
восьми ползунков (цветов). Перемещая ползунки по шкале и выбирая соот-
ветствующий цвет в палитре справа, вы можете создать градиент по своему
желанию (рис. 4.3). Удалить лишний ползунок можно, просто потянув его вниз.
Если у вас выделен ползунок, перейдите на панель Mixer (Палитра). На ней
вы сможете задать не только любой цвет по схеме RGB, но и прозрачность
данного цвета (параметр Alpha (Прозрачность)).
4. Щелкните мышью вне круга, чтобы снять с него выделение. Выберите инст-
румент Paint Bucket (Банка краски), а в нижнем правом углу панели инстру-
ментов — модификатор Transform Fill (Преобразовать заливку) и щелкните на
нарисованном круге.
Когда вы щелкните на круге, появятся маркеры: в центре — маленький бе-
лый кружок (центр градиента), а на окружности два кружка (полная растяж-
ка и поворот) и квадратик (растяжка по оси).
5. Щелкните на центральном маркере и протащите его влево, сместив тем са-
мым центр градиента (рис. 4.4). Протащите квадратный маркер вправо -
и окружность градиента растянется вдоль оси, соединяющей центральный и
квадратный маркеры, превратившись в эллипс. Слегка увеличьте размер эл-
липса с помощью первого (считая от квадрата) маркера полной растяжки,
а затем разверните эллипс, потянув вверх и вправо маркер поворота.
102 Занятие 4. Фильм на Flash

Рис. 4.3. С помощью градиентов серого цвета можно создавать объемные эффекты

Рис. 4.4. Смещая управляющие маркеры градиента, можно изменить его вид
Задание собственной палитры во Flash 103

6. Теперь снова выделите круг и перейдите на панель Fill (Заливка). Выберите в
списке пункт Linear Gradient (Линейный градиент) — вложенные кольца сме-
нятся вертикальными полосками.
7. Снова возьмите в руки банку с краской и щелкните на инструменте Transform
Fill (Преобразовать заливку), а затем на круге. На этот раз вы увидите только
три маркера: центральный, растяжки и поворота. Сместите центр градиента
влево, сожмите его и поверните (рис. 4.5).

«FlashS-fMoviell yjsj x
ТгЫ Control Window 'iielj; ,,!.^5.

Рис. 4.5. С помощью линейного градиента нельзя достичь столь эффектного ощущения объема,
зато можно нарисовать радугу

Запись на диск набора цветов
Как уже говорилось, создав однажды гармоничный набор цветов, вы можете за-
писать его на диск и использовать в будущем.
После того как вы создали подходящую палитру, найдите во всплывающем меню
панели Swatches (Цветовые модификаторы) команду Save Colors (Сохранить цвета).
В диалоговом окне Export Color Swatch (Экспорт цветового модификатора) выбе-
рите формат Flash Color Set (*.clr). Введите имя для нового набора цветов. Расши-
рение .clr будет добавлено автоматически.
Загрузить сохраненный набор цветов можно, выбрав команды Replace Colors (За-
местить цвета) или Add Colors (Добавить цвета) из всплывающего меню на пане-
ли Swatches (Цветовые модификаторы).
104 Занятие 4. Фильм на Flash

Растровая заливка
Если вы хотите достичь более реалистичного изображения в фильме, вам при-
дется прибегнуть к использованию растровой заливки. При использовании
только градиентов и сплошных цветов вам вряд ли удастся воспроизвести хотя
бы один реальный материал, будь то бумага, ткань или дерево, они будут выгля-
деть нарисованными. Следующие шаги пояснят, как создать заливку из растро-
вого рисунка.
1. Для импорта во Flash растрового файла (такого, как BMP, PICT) выберите
команду File > Import (Файл > Импорт) из главного меню или нажав Ctrl+R.
Удалите появившееся на столе содержимое импортированного файла.
2. Нарисуйте большой квадрат, чтобы использовать его для примера. Откройте
панель Fill (Заливка) и окно Library (Библиотека), чтобы проверить, появился
ли там нужный файл.
3. Выделите область заливки квадрата, который вы нарисовали на столе. В спи-
ске на панели Fill (Заливка) выберите Bitmap (Растровый рисунок). Щелкните
на миниатюрном изображении вашего растрового рисунка, который покажет-
ся в меню. Если в библиотеке есть несколько изображений, они будут показа-
ны все. Когда вы выберете изображение в меню панели Fill (Заливка), квадрат
на столе будет заполнен рисунком (рис. 4.6).

m
Рис 4.6. Растровым изображением можно замостить область заливки выделенного объекта1

1
В качестве рисунка использован файл для обоев Windows — Пузырьки.Ьтр.
Изменение HTML-страницы 105

4. Снимите выделение с квадрата, выберите инструмент Paint Bucket (Банка
краски) и щелкните на модификаторе Transform Fill (Преобразовать заливку).
Выделите заливку и, используя маркеры, измените ее параметры (рис. 4.6).
Напомню, что во Flash с помощью квадратных маркеров можно растягивать
заливку вдоль оси, с помощью круглых — поворачивать и наклонять изобра-
жение, а центральный маркер смещает рисунок.

Изменение HTML-страницы
У меня файл HTML-страницы со встроенным фильмом выглядит следующим
образом:
<нтм>
<НЕАО>
<TITLE>index_flash</TITLE>
</HEAD>

<BODY bgcolor="#FFFFFF">
<!-- URL's used In the movie-->
<!-- text used in the movie-->
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)
следующий сценарий:
106 Занятие 4. Фильм на Flash

<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-страницы и специальным образом сохраняет слова, которые на
них встречаются. Таким образом, все просмотренное и заявленное содержимое
Раскрутка сайта 109

Интернета в аннотированном виде оказывается на жестком диске поискового
сервера. Так что он ищет соответствия вашему запросу не на бескрайних про-
сторах всемирной «электронной библиотеки», а в своей «записной книжке».

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

Таким образом, первый шаг, который необходимо сделать на пути к славе, — это
регистрация в основных поисковых системах. Их список наверняка есть у вас на
панели поиска или в меню браузера. На всякий случай приведем некоторые из
возможных вариантов (табл. 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

Раскрутка сайта
Чтобы стать популярным исполнителем, совсем необязательно иметь голос,
красивые ноги и прочие второстепенные атрибуты имиджа. Главное — чтобы
тебя «раскрутили». И не слишком далеко забросили.
Еще в большей степени это относится к сайту. Какими бы полезными и инте-
ресными данными вы его ни наполнили, он останется в полной безызвестности,
если вы серьезно не займетесь его раскруткой. И, как уже говорилось, первый
шаг — это регистрация в поисковых системах.
110 Занятие 5. Реклама — двигатель торговли

Регистрация в поисковых системах и каталогах
Рассмотрим для примера поисковую систему Рамблер.
Внизу главной страницы расположена неприметная ссылка Добавить ресурс. По-
сле щелчка на ней вы попадете на страницу, на которой вам сообщат, что поис-
ковый робот обработает ваш запрос за неделю, и предложат зарегистрироваться
в поисковой системе Рамблер, в Интернет-рейтинге 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_Е>
Раскрутка сайта 111

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

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

Службы обмена баннерами
Службы обмена баннерами устроены просто: вы размещаете баннер на своей
странице, другие показывают ваш баннер на страницах своих сайтов. В зави-
симости от выбранной вами службы на баннеры накладываются определенные
ограничения: определенный формат и размер. Пример такой службы за грани-
цей — 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 находится много интересной и полезной информации. Даже если вам не правит-
ся такой дизайн и стиль жизни, там все равно есть чему поучиться.
112 Занятие 5. Реклама — двигатель торговли

зумевается. В глазах работодателя вы только выиграете, указав, что имеете
свои страницы в Интернете. Хотя, конечно, это зависит от работодателя.
• Подумайте над тем, что может привлечь к вам посетителей. Может быть, вы
можете дать простенький астрологический прогноз или обработать интерес-
ный тест? Бесплатное всегда в почете, особенно на страницах нашей Родины.
Однако попробуйте оценить, не станет ли эта забота для вас тяжким бременем.
• При обмене ссылками старайтесь не выставлять их сразу на виду, чтобы по-
сетитель не убежал по ним со страниц вашего сайта.
• Если вы подписаны на группы новостей и ваш сайт попадает в их тематику,
вы можете опубликовать там свое сообщение о сайте. В каждой группе ново-
стей свои правила, но если сайт может быть интересен для подписчиков -
вас обязательно опубликуют.
• Можете объявить конкурс, например на самую лучшую стихотворную паро-
дию на ваш (или чужой) стих, или затейте интересную дискуссию. Кроме
бесценного материала вы получите и посетителей.
• Попросите поставить закладку на ваш сайт (то есть добавить его в Избран-
ное). По закладке посетитель будет приходить снова и снова. Или попросите
сделать страницу стартовой или послать ссылку друзьям. Код выглядит просто:
<А 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»
и т. д.
• Есть еще рассеянные люди. Нарисуешь для них пару кнопочек или полосу
прокрутки, они и рады там щелкнуть мышью, считая, что это элемент интер-
фейса браузера. Однако когда пользователь осознает свою ошибку, он впол-
не может нажать кнопку Стоп, остановив загрузку.
114 Занятие 5. Реклама — двигатель торговли

• Не секрет, что большинство обитателей Интернета — мужчины. Специально
для них на баннерах рисуют красивых обнаженных девушек, недвусмыслен-
но спрашивающих: «Хочешь меня?» Кто уж тут устоит!
• Не стоит играть на основных инстинктах, если вы хотите привлечь на свой
сайт только действительно заинтересованных посетителей. Ведь ваш потен-
циальный посетитель может и не пойти по такой ссылке. Ваша реклама -
ваш имидж!
• Движение привлекает внимание. Однако использование анимированных изо-
бражений требует определенного навыка — размер графического файла-бан-
нера должен быть небольшим. Во многих сетях баннерного обмена эта вели-
чина для баннера 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.
Затем создайте новый слой и при необходимости сделайте надписи к кнопкам.
Пока все изображение представляет собой единое целое, вы сможете легко вы-
ровнять слова относительно друг друга. В случае с нотами надписи могут поме-
116 Занятие 5. Реклама — двигатель торговли

шать общему дизайну, так как будут накладываться на изображение. В таких
случаях пояснения, куда ведет ссылка, придется реализовать с помощью атри-
бута 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" аН="Солисты"
border=0 width=150 height=31></A<@062></TD>
</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" аи="Гастроли"
border=0 width=150 height=31></A<@062></TD>
</TR>
<TR><TO><A href-"http://photo.html">
<IMG src="photo.gif" аН="Фотоальбом"
Баннеры с JavaScript 117

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, а современные браузеры.
118 Занятие 5. Реклама — двигатель торговли

Бегущая строка в данном исполнении будет полем ввода (самым простым и рас-
пространенным элементом форм), в котором символы передвигаются слева на-
право (впрочем, поле при этом по-прежнему остается полем для ввода, и вы мо-
жете посоревноваться с машиной в скорости печати).
Вначале между тегами <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.
Баннеры с JavaScript 119

СОВЕТ
Конечно, можно всегда указывать параметры явно, например, вместо 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 language="JavaScript">
<!--
document.forml.fi eld.va1ue=TEXT;
Displacement);
// -->
</SCRIPT>
</FORM>
120 Занятие 5. Реклама — двигатель торговли

Форма задается тегом <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.
Баннеры с JavaScript 121

раздается два крика: первый — о том, что мяч находится в непосредственной
близости от ребенка — это событие 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 с тем же параметром.
122 Занятие 5. Реклама — двигатель торговли

Теперь необходимо описать функции-обработчики и вставить их в заголовок
HTML-документа. Выглядеть будет все довольно просто:
<SCRIPT language="JavaScript">
<!--
function functionOver(imgName) {
imgOver = evaKimgName + "Over.src");
document [imgName].src = imgOver;
function functionOut(imgName) {
imgOut = evaKimgName + "Out.src"):
document
i
[imgName].src = imgOut;
//-->
</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 и получит ссылку на нужный объект и файл
if (document.images) {
imgOver - evaKimgName + "Over.src");
document [imgName].src = imgOver;
ifunction functionOut(imgName) {
// Функция получит значение в виде imagel. image2 и т. д.,
// прибавит к нему Out и получит ссылку на нужный объект и файл
if (document.images) {
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 все намного проще: чтобы сделать красивый анимированный баннер, не
требуется знать программирование вовсе. Берешь — и делаешь!
124 Занятие 5. Реклама — двигатель торговли

ПРИМЕЧАНИЕ
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. Задание нового символа-клипа
Анимированный текст во Flash 125

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
Создание рисунков из символов псевдографики предоставляет вам прекрасную возможность потре-
нировать свою фантазию!
126 Занятие 5. Реклама — двигатель торговли

то, чтобы из девяти квадратиков (на схеме рядом с координатами) черный
был в центре — тогда отсчет координат будет от центра объекта. Если же чер-
ным будет выделен левый верхний квадрат, то отсчет координат будет произ-
водиться от левого верхнего угла.

Рис. 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.
Анимированный текст во Flash 127

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. На столе появилась еще одна
пара колес. Расположим обе пары должным образом внизу паровоза.
128 Занятие 5. Реклама — двигатель торговли

СОВЕТ
Если вам не удается расположить объекты нужным образом с помощью мыши, причина мо-
жет быть в установленных флажках 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 пункта. Каждая буква должна помещаться
в отдельном текстовом блоке.
Анимированный текст во Flash 129

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
130 Занятие 5. Реклама — двигатель торговли

СОВЕТ
Стоит заметить, что если в кадре 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 Кбайт! Поэтому
при малейшей возможности сэкономить объем за счет создания символа — смело экономь-
те! К тому же, символы имеют еще одно преимущество: их затем можно запросто исполь-
зовать в других роликах, просто взяв их из окна библиотеки.

Таким образом, без больших затрат (как с точки зрения размера создаваемого
файла, так и с точки зрения объема работ — не всем же быть художниками!)
можно создавать интересные ролики. Единственное ограничение на использова-
Что нового мы узнали 131

ние необычных шрифтов состоит в том, что они могут отсутствовать на компью-
тере зрителя, и если вы не встроите символ в фильм, вместо ракет, цветов и че-
ловечков перед глазами наблюдателя заскачут знакомые или неизвестные ему
символы. Поэтому в таких случаях никогда не устанавливайте флажок 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
В переводе В. Маркоиой.
Электронные открытки 133

О задавать морфинг и раскадровку различных объектов;
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. Если
Электронные открытки 135

в окне Выбор бланка (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-страницу. Однако она останется всего лишь страни-
Открытка и согласованная анимация 137

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

I / : - шетастрг
;
Т ;Г;Испол
'•'":""""~™";":"

Обычный текст
Текст ссылки
Активная ссылка
Просмотренная ссылка
фон (фоновый рисуник закроет этот цвет.)

в етб в аи с*;ейв'! i; Ц Черны йна светлом

- Фоновый рисунок"
jiile:///C|/Flash/Ch5/npo6Ka.JPG
:
...... " :'::: : ..... "::-: '
: Г Связь с фай лом рисунка

: Г ;Использовать этиустеновки при создании новых с"
: :

ОК Отмена

Рис. 6.4. Окно настройки параметров страницы

Открытка и согласованная анимация
На предыдущем занятии с помощью Flash мы создали поезд, вывозящий рек-
ламный плакат. Но ведь он может везти и поздравления! Причем если при соз-
дании баннера мы были сильно ограничены размерами страницы и файла, то те-
перь мы почти свободны в своих требованиях. Мы нарисуем паровоз и добавим
к нему дым, из которого в итоге и образуется поздравление.

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

3. Я в качестве прототипа рисунка позаимствовал детский паровозик у сына.
Основная часть рисунка — два прямоугольника с одноцветными заливкой и
контуром. На рисунке вы увидите черный цвет, но лучше выбрать что-нибудь
более праздничное.
4. Инструментом Line (Линия) рисуем прямые линии спереди, а с помощью Paint
Bucket (Банка краски) заливаем пространство между ними подходящим цве-
том (например, красным).
5. Синим прямоугольником с коричневым контуром обозначим окно, а серый
полукруг с прямоугольником будет служить для крепления вагона. Осталась
только труба.

СОВЕТ
Если вы при использовании различных инструментов рисования нажмете клавишу Shift, то
фигуры, которые вы будете создавать, приобретут правильные очертания. Прямоугольник
станет квадратом, овал — кругом, а линия будет идти только под углами, кратными 45°.
Карандаш и кисть будут рисовать только горизонтальные или вертикальные линии. Даже
перо изменит своим привычкам и не будет выдавать на экран закорючки произвольной
формы.

6. Для рисования трубы есть две альтернативы.
Один способ состоит в том, что вы рисуете два прямоугольника с черным
контуром и красной заливкой (пусть труба будет красной), и размещаете их
буквой Т. Затем с помощью инструмента Arrow (Выделение) перетаскиваете
вогнутые уголки вниз, а потом дорисовываете горизонтальную линию. При-
ставим трубу к паровозу — и готово!
Второй способ состоит в использовании инструмента Реп (Перо) или Line
(Линия). Как и в предыдущем случае, необходимы два прямоугольника, но
расположить их надо так, чтоб они не касались друг друга. Затем надо нари-
совать скос и залить обведенный кусочек. Перо позволит сделать закруглен-
ную линию, однако к работе с этим инструментом надо приноровиться. Если
вы много рисуете инструментом Кривая Безье в программах векторной гра-
фики, то это не составит труда, но если нет, придется учиться.
7. Теперь приделаем колеса, иначе как паровоз поедет? Размещаться они будут
в отдельном клипе под названием Колеса, так как на самом деле колес будет
два. Зачем два? Потому что мы должны как-то показать, что колеса крутятся,
а как это сделать, если круг со всех сторон одинаковый. Выхода, как мини-
мум, четыре. Первый заключается в использовании несимметричной гради-
ентной заливки, второй — в добавлении небольшого дефекта (этакая милая
сердцу трещинка на всех колесах состава). Третий вариант — создать несим-
метричный рисунок, например колеса со спицами — раньше и такие поезда
были. Наконец, четвертый способ, который мы и возьмем на вооружение, -
пририсовать к колесам постороннюю двигающуюся часть. У нас это будет ши-
рокая полоса, соединяющая два колеса и заставляющая их, крутиться вместе.
Для удобства можно сначала создать колесо в виде графического символа Коле-
со (выберите последний вариант в переключателе поведения символа), а затем
перенести два его экземпляра на стол в клип. На открывшемся столе рисуем
Открытка и согласованная анимация 139

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

Рис. 6.5. Такой вот поезд!

Пейзаж, облака и дым из трубы
Чтобы не повторяться, пусть поздравительная надпись будет появляться по
мере продвижения поезда, например, при совмещении дыма из трубы и облаков
на небе.
140 Занятие 6. К сожаленью, день рожденья...

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. После того как шрифт найден, необходимо создать слой под поздравление и
разместить его на самом верху. Заблокируем все остальные слои.
Открытка и согласованная анимация 141

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

Ш Flash 5 - [Postcard! .«а:П

Рис. 6.6. «Паровозик, паровоз, далеко ль ты нас повез...»

Вернемся к размещению букв. Равномерно расположить буквы не получит-
ся, так как между словами должны быть пробелы. Можно предложить сле-
дующий выход. Напишем «С ДНЕМ РОЖДЕНИЯ», стараясь равномерно
142 Занятие 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
144 Занятие 6. К сожаленью, день рожденья...

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

Работа с растровым изображением
Если вы совсем не мастер рисовать или просто у вас нет времени, можно вос-
пользоваться любым отсканированным изображением, предварительно импор-
тировав его во 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. Окно преобразования растрового рисунка в векторный с параметрами по умолчанию
Открытка-сюрприз 145

• 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 (Приподнята),
Открытка-сюрприз 147

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 из списка простых действий.
148 Занятие 6. К сожаленью, день рожденья...

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 может вести себя непредсказуемо.
Открытка-сюрприз 149

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 (мы доба-
150 Занятие 6. К сожаленью, день рожденья...

вили относительные координаты глаз к абсолютным координатам круга). Те-
перь они должны быть расположены одинаково в клипе и на главной сцене.
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 кадров
Открытка-сюрприз 151

показываться на глаза. Все, естественно, будет происходить через раскадров-
ку движения и каждый 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. Начальная (а) и конечная (б) формы руки
152 Занятие 6. К сожаленью, день рожденья...

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). Чтобы посмотреть, как движется рука, дважды
щелкните на символе. Остальной рисунок будет затенен, а вы перейдете к ре-
дактированию символа руки. Погоняв считывающую головку туда-сюда, про-
верьте, согласовано ли движение.
Открытка-сюрприз 153

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. Вот так выглядит звуковой файл в окне библиотеки
154 Занятие 6. К сожаленью, день рожденья...

File View

i

С дтм рождения!!!
Рис. 6.15. Вид открытки в конце проигрывания

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

Славный праздник Новый год
Что глупей темноты!
Хотел светлячка поймать я —
Напоролся на шип.
Мацуо Басе1

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

Сценарий
Очень редко случается, что сначала снимают фильм, а потом пишут сценарий.
В художественном кино, наверное, никогда. Важность подготовительной работы
мы обсудим подробнее немного позже (на следующем занятии), а пока просто
обсудим планы относительно первого большого проекта.
1
В переводе В. Марковой.
156 Занятие 7. Славный праздник Новый год

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

ПРИМЕЧАНИЕ
В данном случае разбивка фильма на сцены (отдельные файлы) носит исключительно учеб-
ный характер — объединение всех сцен на единой киноленте поможет уменьшить размер
SWF-файла и количество потраченного рабочего времени. Реальным поводом для начала
новой сцены может быть или слишком большой размер текущей сцены (такой, что с ней
становится невозможно работать), или резкая смена содержимого практически всех слоев
фильма (как, например, в этом фильме при переходе к последней сцене).

Сядем поудобнее в кресле, закроем глаза, вспомним счастливые годы, когда мы
верили в существование Деда Мороза, и начнем фантазировать...
1. Сцена первая. На экране елка и ящик с елочными игрушками. Чтобы перей-
ти к следующей сцене, зритель должен открыть ящик и достать первую иг-
рушку. Назовем сцену Начало.
2. Сцена вторая. Пусть она зовется Украшение. Игрушки вылетают из ящика
волшебным образом и повисают на елке. Ящик исчезает: он нам больше не
нужен. Как известно, по призыву «Елочка, гори!» кто-то из взрослых вклю-
чал вилку в розетку... Вилка призывно лежит где-нибудь на самом виду. А ро-
зетку придется найти, например, за нижней веткой.

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

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

Ну, что ж. Как сценаристы мы состоялись (рис. 7.1). Осталось дело за режиссе-
ром и оператором...

Украшение
Электросеть
Темнота
Распаковка
Последняя.

Рис. 7.1. Панель со списком сцен

Начало фильма
В первой сцене нам надо нарисовать елку и ящик с елочными игрушками, а так-
же смоделировать открывающуюся крышку ящика.
1. Как всегда, создаем новый файл. Размер оставим стандартным: 550x400. На-
зываем его PostCardB. В первой сцене создаем четыре слоя (снизу вверх): Фон,
Выключатель, Елка, Ящик и Крышка.
2. Заблокируем все слои, кроме самого нижнего — фона. На нем нарисуем два
прямоугольника, закрывающих всю площадь стола, — коричневый пол и го-
лубая стена.

ПРИМЕЧАНИЕ
В дальнейшем я не буду акцентировать внимание на блокировке слоев, если это не пред-
ставляет особой важности. Общее правило таково: если вы работаете с одним слоем — за-
блокируйте все остальные.

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

(Оттенок), выбрав в нем близкие цвета (если вы рисовали несколькими цве-
тами, то обязательно используйте верхнее поле с процентами, чтобы сохра-
нить разноцветность).

СОВЕТ
Выбрать близкий цвет для эффекта 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 этой кнопки узнать, что зритель на нее нажал.
Расположим крышку-кнопку в первом кадре главной сцены. Ящик тоже луч-
ше сделать в виде графического рисунка-символа. Если нам захочется изме-
нить его размер, не придется вносить изменения в несколько сцен.
Начало фильма 159

СОВЕТ
Если вам необходимо согласованно разместить объекты, расположенные на разных кадрах
одной киноленты, воспользуйтесь режимом кальки. Включается этот режим кнопкой 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 (Заливка).
Щелкнем на черном квадратике под шкалой градиента. В появившейся па-
литре выберем белый цвет. Переместим белый маркер-квадратик влево, а крас-
ный поставим ближе к середине. Наш круг должен приобрести градиентную
окраску — в центре он стал белым, а по краям — красным.
160 Занятие 7. Славный праздник Новый год

Flash 5 - [PostCard31la]

Рис. 7.3, Так будет выглядеть движение крышки ящика в режиме кальки (слой фона отключен)

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

Рис. 7.4. Преобразование радиальной заливки елочного шара

7. Расположим созданную кнопку в слое Выключатель во втором ключевом кад-
ре, предварительно задав его. Шарик должен чуть-чуть выглядывать из ящика.

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

Теперь немного попрограммируем. Во-первых, мы должны остановить первую
сцену на кадрах 1 и 30. Во-вторых, нам надо задать переход на второй кадр
Сцена Украшение 161

в первой сцене при щелчке на кнопке-крышке. В третьих, в первой сцене надо
задать переход на вторую сцену при щелчке на игрушке. Начнем мы с третьего.
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
162 Занятие 7. Славный праздник Новый год

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

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

а из правого края — на правый. Количество кадров следует выбирать разум-
ное, чтобы не затянуть фильм, например 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). Для таких случаев удобен режим
контуров. Щелкните на цветном квадрате справа от названия слоя. Квадрат станет конту-
ром, как и изображение на слое. Цвет квадрата соответствует цвету контура рисунка. Та-
ким образом, вы будете видеть границы ящика, но он не будет загораживать видимость.
164 Занятие 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 (Графический рисунок).
Сцена Украшение 165

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. Редактирование клипа серпантина на фоне елки
166 Занятие 7. Славный праздник Новый год

ВНИМАНИЕ
Несмотря на свою векторную сущность, рисунок серпантина в итоге можег «весить» до-
вольно много из-за большого количества неправильных кривых. При первом исполнении
он «потянул» почти на 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°.
Сцена Украшение 167

Рис. 7.10. Контур звезды с вспомогательными линиями

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

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 умеет выполнять раскадровку для одного объекта или
для группы целиком. Поэтому если мы хотим положить свечки в ящик, нам
придется их уменьшить вместе с расстояниями между ними. И если мы не бо-
имся трудностей, придется потрудиться. Нас ждут великие дела! Что же нам
Сцена Украшение 169

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

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

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

третий ключевой кадр на место второго в слое Шнур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. Хотя я описал создание шнура в произвольной программе, он нам необходим
по сценарию. Точнее, вилка, которая на нем крепится, чтобы пояснить зрите-
лю, что лампочки загораются оттого, что кто-то втыкает вилку в розетку. По-
этому не поленитесь и дорисуйте в слой Шнур! вилку (ее лучше сделать
Сцена Украшение 171

символом) в последних кадрах сцены. Можно просто вытянуть вилку с частью
шнура.

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. Теперь вернемся к ветке. Если вы помните, мы ее сделали немного темнее
остальных. Сделаем так, чтобы последний кадр в слое Елка был ключевым,
172 Занятие 7. Славный праздник Новый год

и в нем превратим эту ветку в символ-кнопку. В кадрах 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. Как только вилка доползла до своей цели, ее можно убрать со сцены. Слой
Вилка можно закончить или продолжить до конца, а шнур втянуть в еловые
174 Занятие 7. Славный праздник Новый год

лапы и оборвать. Ветку, которая заслоняла розетку, передвинуть на первый
кадр на панели 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 (Банка
176 Занятие 7. Славный праздник Новый год

краски) и залейте коробку новой заливкой. Если размер рисунка будет мень-
ше, чем размер коробки, 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 (Проиграть один кадр) и указать послед-
ний кадр клипа.
Прежде чем открыть бутылку, я предлагаю навести порядок — так сказать,
убрать все лишнее. Поместите над одной из разобранных коробок прозрач-
ную кнопку и при нажатии уберите остатки упаковки с экрана во вспышке
178 Занятие 7. Славный праздник Новый год

пламени или, если вы рьяно печетесь о пожарной безопасности или охране
окружающей среды, в простом исчезновении с экрана (правда, в последнем
случае у вас возникнут проблемы, если вся работа шла в одном слое). Таким
образом, у вас появится команда stop еще в двух местах — перед уборкой
и после нее.

Рис. 7.15. Процесс распаковки в режиме кальки

9. Осталось поработать еще немного — и пробка полетит в потолок. Для послед-
него перехода предлагаю использовать в качестве кнопки любой круглый
символ. Следует сделать его прозрачным и назначить ему соответствующее
поведение. Чтобы переход между сценами был более гладким, поступим сле-
дующим образом. Будем увеличивать изображение, держа в фокусе бутылку
и бокалы. При этом все остальные слои должны постепенно растаять в возду-
хе, а фон новой сцены — так же плавно проявиться.
10. Для простоты можно сделать фоном стену. Если вы выберете более интерес-
ный фон, создайте новый слой над слоем фона и проявите его. Что делать с
остальным? Все очень просто. Задайте два столбца ключевых кадров. В каж-
дом укажите раскадровку между ними. Выделяйте по очереди последний кадр
каждого слоя (при этом будет выделяться его содержимое). На панели Trans-
form (Преобразование) укажите, например, 300 % (или увеличьте указанную
там цифру в 3 раза), а на панели Effect (Эффект) установите параметр Alpha
(Прозрачность) в 0.
11. Отдельного рассмотрения требуют слои Звезда, Выключатель (потому что они
содержат только по одному символу) и Фон (потому что он содержит простой
рисунок). Звезду, дополнительно к указанным ранее действиям, надо пере-
двинуть на верхушку елки, а выключатель — в сторону (иначе они останутся
на том же месте). Фон не получится сделать прозрачным так просто. Если
фоном следующей сцены станет стена, просто сдвиньте увеличенный рисунок
вниз.
Вот и все. Впереди последняя сцена.
Сцена Последняя 179

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

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.
Фильм почти закончен. Пленка отснята, осталось провести «озвучивание».

Звук
Я намеренно вынес работу со звуком в отдельный раздел, подозревая, что не
у всех стоит на столе аппаратура для работы с ним. Но дело не только в этом.
Практически все необходимое для работы можно найти в Интернете, но звук
может стать очень «тяжелым» дополнением к фильму. Прежде чем приступать
к работе со звуком, подумайте, на сколько килобайтов увеличится фильм после
182 Занятие 7. Славный праздник Новый год

включения в него аудио и не слишком ли он будет велик для пересылки по почте.
Но в любом случае можно сделать озвученный фильм хотя бы для себя.
Для начала вспомним, как импортировать звуковой файл во 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. Разработка дизайна. Все страницы сайта должны иметь одинаковый
дизайн (стиль оформления). Окиньте мысленным взглядом все подготовлен-
Разработка общей концепции сайта 185

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

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

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

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

Расскажите историю
Чего не хватает Всемирной паутине, так это мух, которые могли бы интересно
рассказать о себе. Если где-то появился свежий анекдот, то он вмиг облетает
полмира. Значительно проще отыскать и скопировать себе чужое, чем создавать
свое. Так дело обстоит с большими сайтами, но для персонального сайта все
с точностью до наоборот. Ведь если вы хотите пообщаться с коллегой или това-
рищем, вы же не обмениваетесь с ним газетными вырезками! Гораздо интерес-
нее рассказать что-то самому, чем скопировать готовый текст. Вы создаете сайт,
чтобы рассказать о себе, ну так и расскажите!
Человек, умеющий хорошо рассказать истории, преподнести материал, прочи-
тать лекцию, ценится на вес золота. Таких людей не так много, но каждый мо-
жет научиться этому несложному искусству. И я предлагаю вам попробовать.
Пусть ваш сайт станет не только упражнением в HTML-кодировании, но и пси-
хологическим практикумом. Многие психологи в процессе обучения ораторско-
1
Я не врач и не буду советовать этот рецепт всем, но Елисею помогло.
Разработка общей концепции сайта 187

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

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

Частная собственность
При создании собственного web-ресурса часто возникает ситуация, когда автор
может скопировать себе на сайт чужую информацию: программу, книгу, песню,
графику. Здесь начинаются взаимоотношения, которые регулируются междуна-
родными законами об авторских правах. Нельзя, например, сделать копию рас-
Дизайн 189

сказа и опубликовать его в прессе или на собственной web-странице без согла-
сия автора. Страничка в Интернете — это тоже публикация, и вся информация
там лежит так же свободно, как в газете, журнале или книге. Как правило, боль-
шинство информации на персональном сайте — интеллектуальная собственность
автора (если не указано иное), и вы не имеете права ее использовать без его со-
гласия.
Часто бывает указано, что именно из предложенной информации разрешено ис-
пользовать напрямую, а что — нет. Если вы затрудняетесь решить, что можно
делать с полученной информацией, — напишите web-мастеру, подробно изложив
свой вопрос.

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

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

Идея
Идея — прежде всего! Этот лозунг должен проходить красной нитью через все
ваши размышления об устройстве любого продукта творчества, будь то сайт,
книга или простой рисунок в тетради. Пусть даже на первый взгляд идея пока-
жется банальной или вовсе глупой — у вас всегда будет возможность придать ей
190 Занятие 8. Семь раз отмерь

штрихи индивидуальности и выдать за плод зрелых размышлений. В любом
случае идея поможет сделать оформление сайта более цельным и интересным.
Что подразумевается под идеей? Все что угодно — любая мысль, которую мож-
но воплотить в оформление. Выражаясь языком философии, вам надо приду-
мать форму для содержания или содержание для формы. Слишком туманно?
Давайте попробуем пояснить на примерах.
• Идея первая — абстрактная ассоциация. Ваш возраст, скажем, лет за 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.
192 Занятие 8. Семь раз отмерь

которое способен отображать монитор). Вернее будет сказать так: если вы не хо-
тите доставить пользователям неудобство (а горизонтальная прокрутка экрана -
это реальное неудобство), то ограничивайтесь экранным разрешением. Домини-
рующее сейчас разрешение — 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
194 Занятие 8. Семь раз отмерь

Если основной текст — русский, то для него лучше использовать шрифт с за-
сечками (для проверки откройте практически любую книгу). Однако если
основной текст набран латиницей, то будет смотреться и шрифт типа 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.
196 Занятие 8. Семь раз отмерь

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

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

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

Один раз отрежь
Я осенью в доме один.
Что ж, буду ягоды собирать,
Плоды собирать с ветвей.
Мацуо Басе1

На этом занятии
Итак, вас посетила муза web-дизайна. (Интересно, у нее уже есть имя?) Вам
пришла потрясающая идея, вокруг которой вы собираетесь развернуть действие
на сайте: его дизайн и содержание. Дело осталось за малым: воплотить в жизнь
графические и текстовые элементы, сверстать все страницы и связать их в еди-
ную структуру, протестировать сайт и скопировать его на сервер, на всеобщий
доступ. На сегодняшнем занятии речь в основном пойдет о технических момен-
тах создания сайта. Но сколько бы скучны они ни были, в итоге именно от них
зависит, выглядит ли сайт, как хочется, правильно ли работают задуманные
ссылки, действуют ли сценарии, как положено и т. д. Как и в любом другом
деле, конечный результат прежде всего зависит от исполнения. В занятии 9 мы
рассмотрим следующие темы:
• верстка и публикация сайта в Сети;
• планирование структуры сайта и навигации по его страницам;
• негласный интерфейс HTML-страниц;
• основные кодировки русских букв;
• тестирование сценариев JavaScript в различных браузерах.
Мы также узнаем, какие параметры посетителя для вас важны и как их опреде-
лить или предсказать.

Структура сайта
Даже если вы не сильны в искусственном интеллекте и архитектуре знаний,
а структурирование информации для вас — темный лес, структуру собственного
1
В переподе В. Марковой.
Структура сайта 199

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

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

Навигация
Скорее всего, вы намерены преодолеть рубеж в одну страничку и сделать пол-
ноценный сайт. Тут скрывается один из сложных вопросов web-дизайна — на-
вигация. Человек, оказавшийся на вашем сайте, не должен чувствовать себя, как
перед входом в лабиринт. Навигация должна быть сделана так, чтобы человек
все время представлял, где он находится сейчас и куда и как он может попасть.
В идеале он вообще не должен задумываться над этими вопросами. Но для это-
го много думать придется вам. Опять же, неплохо набросать схему навигации по
сайту на бумаге. Много внимания следует уделить тому, как будут выглядеть
сами ссылки, где их лучше сделать текстовыми, а где — графическими. Посмот-
рите, как это сделано у других: стандартными решениями являются верхняя
(горизонтальная) или боковая (левая) панели управления (меню).
Структура сайта 201

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

Логотип сайта

Навигация Основное содержание

Рис. 9.1. Трехпанельный макет страницы

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

придут к вам через ссылку поисковой системы или по закладке, посланной
коллегой. Таким образом, на каждой странице сайта должна присутствовать
информация, сообщающая пользователю, где он находится. Это может быть
либо логотип сайта — удачная картинка, размещенная на каждой странице,
либо просто текстовая информация, вводящая в курс дела. Логотип, как пра-
вило, размещается в верхней части страницы, реже его можно увидеть на ле-
вой стороне в виде вертикального столбца-картинки.
Навигационные элементы. Разные сайты могут использовать разные системы
навигации. Это может быть навигационная панель слева или сверху, система
закладок и/или ссылок в верхней части или слева, это могут быть просто не-
сколько ссылок вверху и внизу страницы. Все зависит от положения данной
страницы в иерархии и общей структуре сайта. Если речь идет о странице,
содержащей конкретную информацию, то совершенно неразумно дублировать
на ней всю панель навигации — она займет место, необходимое для другого.
Если логотип указывает на общую принадлежность страницы, то навигаци-
онные элементы должны содержать информацию о том, как пользователь по-
пал бы на данную страницу, если бы путешествовал с главной страницы сай-
та. Пример такого элемента — ссылки при поиске в каталоге. Щелкнув на
одной из них, вы сможете попасть на любую пройденную ступень иерархиче-
ской лестницы и выбрать соседнюю категорию. Конечно, если сайт не слиш-
ком разветвленный, это является роскошью, но для любого, даже самого ма-
ленького каталога, такая навигация — жизненная необходимость.
Еще одно правило навигации — ее элементы должны быть узнаваемы. Еще
не подводя к картинке или ссылке мышь, пользователь должен догадаться,
что это ссылка. Поэтому недопустимо использовать обманные элементы ди-
зайна, например лишние закладки или пункты графического меню, добавлен-
ные для заполнения свободного места или для красивого рисунка. Дурным
тоном считается и использование стандартных элементов интерфейса про-
грамм, таких как флажки, кнопки или переключатели, в рекламных банне-
рах. Как и в другой жизненной ситуации, пользователь опирается на свой про-
шлый опыт, благодаря которому он знает, что делают те или иные элементы
интерфейса. Встретив подобный элемент на ваших страницах, он надеется
получить ожидаемый результат. Но как только вы рассеете его уверенность в
непоколебимости прошлого опыта хоть каким-то интуитивно не очевидным
элементом дизайна, он не преминет покинуть сайт как можно скорее.

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

• Основное содержание располагается, как правило, в правой части страницы.
Если пользователя заинтересовала данная информация, он воспользуется по-
лосами прокрутки, чтобы увидеть ее всю до конца.
• Реклама. Если вы просматривали хотя бы одну web-страницу при различных
разрешениях монитора, то вы знаете, что единственным местом на странице,
которое отображается всегда, является левый верхний угол. Это «красный
угол» страницы, и здесь необходимо размещать самую важную информацию,
например логотип. Следующей по важности является верхняя полоса -
именно на ней большинство серверов располагает рекламу. Еще одна рек-
ламная полоса находится внизу; как правило, это баннеры фирм, предостав-
ляющих какие-то услуги сайту.

Поиск
Некоторые хостеры (например, Яндекс) предоставляют в качестве дополнительной
бесплатной услуги размещение на сайте формы для поиска. Это может оказать-
ся очень важным дополнением к системе навигации, особенно если у вас иерар-
хически сложный сайт. В качестве примера можно привести следующую ситуа-
цию. Вы обожаете собак (или кошек) и создали сайт, всецело посвященный
вашим любимцам. На страницах сайта вы подробно описываете все известные
вам породы, клички, масти и пр., что и указано на главной странице сайта. По-
сетитель радостно потирает руки — наконец-то он все узнает о породе своего
домашнего питомца. Но... Как разобраться во множестве информации на сайте?
В какой раздел необходимо пойти, чтоб найти нужную породу? Посетитель мо-
жет не знать, сторож его собака или пастух. А отдельную страницу с алфавитным
списком пород вы решили не делать, а если и сделали, то совсем не обязательно
назвали породу так, как сохранила своенравная память посетителя. В таких слу-
чаях незаменимым помощником станет поисковая форма. Даже если у породы
два или три ходовых названия, ее можно будет найти без труда.

Кодировка
Если вы будете создавать ваш сайт на русском языке, перед вами может встать
проблема выбора кодировки русских букв. Обычно за вас ее решает хостер, ука-
зав вам свои условия, но все равно как пользователю Сети вам будет полезно
знать, что существуют следующие стандарты:
• СР1251 (используется в Windows);
• KOI (Unix);
• MAC (Macintosh);
• ALT (DOS, альтернативная);
• ISO;
• LAT или TRANSLIT (замена русских букв сходными по звучанию англий-
скими).
Наиболее распространенной является СР1251, поэтому правильно будет сде-
лать так, чтобы по умолчанию страничка показывалась именно в этой коди-
ровке. Однако, в отличие от пользователей-клиентов, на большинстве серверов
204 Занятие 9. Один раз отрежь

установлены операционные системы типа UNIX, для которых родной является
кодировка КОШ, и страницы на сервере хранятся именно в ней.
Удобно, если на всех страницах есть возможность выбрать кодировку. Как уже
говорилось, не все будут заходить к вам с «парадного входа»: очень часто посе-
тители ставят закладку на конкретную интересующую их страницу и в следую-
щий раз попадают туда, минуя главную. Как правило, сервер настроен таким об-
разом, что в зависимости от указанного номера порта (цифры после двоеточия,
например: www.enlight.ru:8801/...) он переведет вашу страницу в нужную коди-
ровку.
С точки зрения навигации, есть два способа выбора кодировки;
• рисуются кнопки для переключения в каждую из необходимых кодировок
(например, WIN, MAC, KOI, LAT);
• рисуется только одна кнопка, например Выбор кодировки, при нажатии на ко-
торую вы попадаете на отдельную страницу, где можете выбрать кодировку.
Если вы воспользовались услугами бесплатного хостера, тогда проблема коди-
ровки перед вами не встанет — все решит сервер.

Идеология документа
При создании HTML-документов прежде всего обращайте внимание на струк-
туру текста. Если вы делаете заголовок, то оформите его тегом <Нх>, а не просто
выделите его жирным шрифтом. Правильное стилевое и структурное оформле-
ние — основа подготовки любых документов.
Почему это так важно? Во-первых, это удобно. Когда вы освоите механизм CSS
(таблиц стилей), вы без труда сможете изменить вид всех заголовков, заменив
только одну строку текста в описании данного стиля.
Во-вторых, если внимательно прочтете приложение 2, то наверняка заметите, что
разработчики HTML очень много уделяют внимания нестандартным устройст-
вам вывода. К сожалению, при речевом вводе текста нельзя сказать слово кур-
сивом или полужирным. Оформление практически исчезает, а вот структура
остается. Перед началом нового раздела или параграфа можно сделать паузу,
а цитату прочитать другим голосом. Поэтому старайтесь делать структуриро-
ванные тексты, и не только в HTML, но и, например, в Word.

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

Советы по верстке
Для того чтобы ваш сайт выглядел предсказуемо, лучше всего использовать гиб-
кие страницы, содержащие табличные структуры, с указанием процентов от раз-
мера окна. Такой сайт мы обсуждали на занятии 5 (www.dimvovich.narod.ru). С по-
мощью подобной техники можно сделать раздвижными и текст, и графические
элементы.
Вместо единой таблицы можно использовать несколько таблиц, выровненных
по левому краю. В таком случае они будут загружаться по очереди, и посети-
тель вначале увидит логотип в верхней части, потом — панель слева, а потом
догрузится и основное содержание. Сравните листинги 9.1 и 9.2, в которых при-
ведены два варианта оформления макета с помощью таблиц.
Листинг 9.1. Трехпанельный макет, заданный с помощью одной таблицы
<TABLE>
<TR>
<TD colspan=2>
Логотип и реклама
</TD>
</TR>
<TR>
<TD>
Панель навигации
</TD>
<TD>
Основное содержимое страницы
</TD>
</TR>
</TABLE>

Листинг 9.2. Трехпанельный макет, заданный с помощью двух таблиц
<TABLE>
<TR>
<TD>
Логотип и реклама
</то>
</TR>
</TABLE>
<TABLE align=1eft<@062>
<TR>
<TD>
Панель навигации
</TD>
</TR>
</TABLE>
<TABLE align=left<@062>
<TR>
<TD>
Основное содержимое страницы
</TD>
</TR>
</TABLE>
206 Занятие 9. Один раз отрежь

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

Тестирование
Тестирование — неотъемлемая часть создания сайта, занимающая обычно очень
много рабочего времени. Основная проблема заключается в том, что ни один
браузер пока не поддерживает стандарта HTML в полной мере и вам придется
Тестирование 207

подстраиваться под его работу. На момент написания книги по данным сервера
TheCounter.com основным браузером (90 %) является Internet Explorer, поэтому
при разработке сайта основное внимание надо уделить ему и его последним вер-
сиям (начиная с четвертой).
Один из главных параметров сайта — его размер в килобайтах и время загрузки.
Если вы создали сайт и сомневаетесь, не слишком ли он «тяжел на подъем», вос-
пользуйтесь услугами сервера Web Site Garage (www.web-site-garage.com). Кроме
скорости загрузки своего сайта и аналогов, которые вы выбрали для сравнения,
вы можете найти здесь много другой полезной информации о своем виртуаль-
ном «я».

СОВЕТ
Для отладки фильма может пригодиться действие Trace. Оно поможет вам следить за из-
менением параметров во время исполнения фильма. Его синтаксис: trace (expression);.

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

Браузер Данные на TheCounter.com Данные на Hotlog.ru
Internet Explorer 6.x 47% 38%
Internet Explorer 5.x 44% 53%
Internet Explorer 4.x 1% 2%
Netscape 5.x 1% 1%
Netscape 4.x 2% 1%
Opera x.x 0% 2%
Остальные 0% 2%
208 Занятие 9. Один раз отрежь

Г;*! The Counter com: The Full-Featured Web Counter with Graphic Reports and Detailed Information * Netscape
1 T
Ltt-."" '«M W
:
'•••.Щ:- <г
1
Обновить Поиск C-rSn .
. mttp://www.thecounter.com/stats/2G02/April/browser.php

Browser Stats

Mon Apr 1 00:05:02 2002 - Tue Apr 30 23:55:04 2002 30.0 Days

1.MSIE5.X ' 222190239 (55%)
2. MSffi 6.x s 130460539 (32%)
3. Netscape 4.x • 17818604 (4%)
4. MSffi 4.x . 14252172 (3%)
5 Netscape сотр. s4278541 (1%)
6. Netscape 6.x i 3553751 (0%)
7. Opera x.x < 2990936 (0%)
8. Unknown ! 1927854 (0%)
9 Netscape 5.x ' 732263 (0%)
10. Netscape 3.x •••• 285400 (0%)
П.МЗШЗх i 273302 (0%)
12. MSIE2.X ! 251936 (0%)
13. Netscape 2.x ч 17683 (0%)
14. MSffi 1.x s620 (0%)
15. Netscape 1.x >599 (0%)

Рис. 9.2. Статистика — коварная наука, но иногда и ей приходится верить

Таким образом, если ваш сайт правильно отображается в Internet Explorer 5 и 4,
то вы охватите 90 % аудитории виртуального мира, а если и в Netscape Com-
municator 6 и 4 — то и все 95 %. Учтите, что Netscape всегда будет иметь своих
поклонников — еще не наступило светлое время, когда UNIX-системы будут
уживаться с продуктами Microsoft.

СОВЕТ
Лучше не использовать на сайте указания типа Best When Viewed With («лучше всего про-
сматривать с») для указания типа браузера и разрешения экрана. Вряд ли кто-то будет
лично для вас скачивать новую программу и менять настройки монитора. Если вы исполь-
зуете новаторские идеи (в том числе и Flash) — создайте альтернативную версию сайта
для тех, кто не желает сию же секунду грузить plug-in.

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

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

Определение версии браузера
Для определения версии браузера и загрузки страницы в соответствии с резуль-
татом можно использовать следующий код:
<SCRIPT language="JavaScript">
<!--
if (navigator.appName == "Netscape") window.1ocation.href = "Netscape.htm";
else if (navigator.appName == "Microsoft Internet Explorer") window.location.href =
"exp1orer.htm";
else window.location.href = "neizvestniy_brauser.htm";
// -->
</SCRIPT>
Вместо window.location.href = "" можно вставить другие инструкции, например вы-
полняемый код или указания на таблицу стилей. Такой сценарий можно помес-
тить, например, в обработчик события onClick, в результате чего вы сможете пере-
направить пользователя на нужную страницу в момент щелчка на ссылке.
Данный сценарий вставляется в страницу программой Macromedia Dreamveawer
при ее использовании для HTML-верстки. Для встраивания сценария выберите
на палитре Behaviors (Поведения) команду Check Browser (Проверить браузер).
В появившемся окне (рис. 9.3) вам достаточно только указать основной и аль-
тернативный URL (Alt URL).

СОВЕТ
Если вы панически боитесь JavaScript, вы можете использовать готовые сценарии
Macromedia Dreamveawer или аналогичных редакторов HTML (например, Adobe GoLive).
210 Занятие 9. Один раз отрежь

Check Browser

1111111 Go to URL

) to URL

I
Go to Alt URL

Go to Alt URL

Рис. 9.3. Для создания сценария автоматической проверки версии браузера
воспользуйтесь средствами Dreamveawer

Для конкретной проверки различных типов браузеров можно использовать их
различия, не прибегая к переменным appName и appVersion. Например, на заня-
тии 5 мы использовали следующий код для проверки браузера на наличие спи-
ска images:
if (document.images)
Инструкции

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

Таблица 9.2. Глубина цвета по данным TheCounter.com

Глубина цвета Число пользователей Процент
65 536 (16 бит) 176 149 066 49%
4 294 967 296 (32 бит) 124 043 987 35%
16 777 216 (24 бит) 37 814 788 10%
256 (8 бит) 15 126010 4%
Не известно 788 573 0%
16 (4 бит) 119819 0%

Разрешение экрана
Разрешение — это число точек (пикселов) на экране по горизонтали и вертика-
ли. Стандартными (наиболее распространенными) разрешениями являются сле-
дующие:
• 640x480 (VGA);
• 800x600;
• 1024x768;
• 1280x1024.
Общепринятым считается подход, при котором страница рисуется в расчете на
самое распространенное разрешение (сейчас это разрешение 800x600, табл. 9.3).
Также предполагается, что окно браузера развернуто во весь экран (в состоянии
maximize). Однако рекомендуется, чтобы все основные элементы навигации
были видны на экране и при разрешении 640x480. Обязательно надо учитывать,
что реальный экран меньше, так как часть его занимает интерфейс самого брау-
зера (меню, кнопки, полосы прокрутки и т. п.).

Таблица 9.3. Разрешение экрана по данным TheCounter.com

Разрешение Число пользователей Процент
800x600 182 211 962 51%
1024x768 127 438 461 35%
1280x1024 13 699 771 3%
640x480 12 730 040 3%
1152x864 10 682 948 3%
Unknown 4 535 484 1%
1600x1200 2 743 577 0%

Можно условно обозначить два подхода к созданию web-страниц, в зависимости
от отношения к этой проблеме.
• Подход первый состоит в жесткой фиксации ширины страницы (например,
600 точек). Этого можно достичь, поместив все в таблицу и задав ее ширину
в 600 точек, или, не указывая ее явно, определить через размер самой широ-
212 Занятие 9. Один раз отрежь

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

СОВЕТ
Тестируйте свои страницы при разном разрешении экрана и при разном количестве цве-
тов. Для этого незаменимым помощником является программа QuickRes из Microsoft Power-
Toys, которая позволяет менять разрешение «на лету».

Поддержка текстовых браузеров
Еще водятся на равнинах Интернета редкие звери — текстовые браузеры. Наи-
более распространенным их представителем является Lynx (существуют версии
под UNIX, DOS, OS/2, Windows и т. д.). Говорят, что им любят пользоваться
системные администраторы, страдающие ностальгией по старым добрым време-
нам. Хорошим тоном считается минимальная поддержка этого браузера. Она
включает в себя следующие требования.
• Для каждой картинки надо указать атрибут alt.
• Если вы используете фреймы, должна существовать альтернатива для досту-
па к информации или хотя бы надпись в тегах <noframes>:
<МОРКАМЕ5>Поддержка Lynx'а на этом сервере ограничена данной надписью</МОРЯАМЕ5>
• Навигационные карты должны дублироваться текстовыми ссылками внизу
странички.

Тестирование фильма
Вы создали фильм. Как представить, как будет воспроизводиться ваш фильм на
компьютере пользователя, который использует модем для подключения к Ин-
тернету? Не торопитесь покупать плохонький модем для тестовых целей. Flash
располагает для этого специальными инструментами.
Во время обычного тестового просмотра, который реализуется с помощью ко-
манды Control > Test Movie (Управление > Тестовый просмотр фильма), откройте
меню Debug (Отладка) и установите скорость загрузки, например, 14,4 (1,2 Кб/с),
а дальше выберите команду View > Show Streaming (Вид > Показать в потоке) или
нажмите Ctrl+Enter. Flash начнет заново воспроизводить фильм и будет эмулиро-
вать загрузку с выбранной скоростью. Множество полезной информации о про-
цессе загрузки можно получить в окне, которое появляется на месте киноленты
Тестирование 213

(рис. 9.4). Оно открывается командой View > Bandwidth Profiler (Вид > Профиль
загрузки). На панели слева указаны общие параметры фильма: размеры (Dim),
скорость проигрывания (FrRate), продолжительность в кадрах и секундах
(Duration), количество загружаемых кадров до начала проигрывания (Preload),
ограничения на скорость загрузки (Bandwidth), а также текущий кадр (Frame) и
количество загруженных кадров с их размерами в байтах (Loaded). В правой час-
ти окна отображется собственно профиль загрузки.

Ти
ц Р'
Dim: 550X400 pixels
8KB-
Fr Rale: 12.0 Ir/sec
Size: 11 KB (11310В) 4KB

:* А Duiation: 140lr(11.7t) 2KB

ао
Preload: 50 Ir (4.2s)
i не
Ban**»: 1200 B/s (100 ВЛ) i 100B
йнштшнпм
ц <$ Flame: 1
3KB (3960 B]
Loaded: 100.0 X (140 frames]
11 KB (11312 B)

Рис. 9.4. Тестирование фильма в «полевых» условиях

Если вы привыкли к удобным инструментам отладки программ, то отладчик
Flash вас не обрадует. Однако в некоторых случаях он может помочь. Для запус-
ка отладчика дайте команду Control > Debug Movie (Управление > Отладка фильма).
В окне Debugger (Отладчик) вы можете наблюдать за изменением переменных,
объектов и их свойств (рис. 9.5).

*J«m... : ' - • • .Л';..' Value * \
ХЙ J
-**~
_focusrect 'l
•^•-•^ 17T 7 '1

Рис. 9.5. Окно отладчика фильма
214 Занятие 9. Один раз отрежь

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

Тестирование сценариев JavaScript
Проведем небольшой эксперимент. Создадим HTML-файл со следующим со-
держанием:
<HTML>
<BODY>
<SCRIPT language="JavaScriptl.2">
<!--
allert ("He работает!!") // Ошибка!
//-->
</SCRIPT>
</BODY>
</HTML>
В тексте сценария допущена ошибка, поэтому Internet Explorer в строке состоя-
ния выдаст предупреждающую надпись Done, but with errors on page (рис. 9.6).

•a D:\Books\My\Rash2\Flash\CH6\Error.html - Microsoft Intern

±esrj^ D:\Books\My\Rash2\Flash\CH6\Error html j i :>"V,
:
-**^ i '• -'A'_ 3 I .'- iV. | , '..;••:

1

Рис. 9.6. Internet Explorer обнаружил ошибку в сценарии

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

мнению, допущена ошибка, но выдает ее описание и код. Но не обольщайтесь:
Internet Explorer чаще ошибается, чем оказывается прав.

File Edit View МЦЩ Щ
:\Books\My\FI ash2\Flash\CH6\Error.html

Рис. 9.7. Internet Explorer отобразил страницу, но указал на ошибку в сценарии

Ц Internet Explorer

dispteysrf pTopwily orlunctinninc, ptopeily. In the iuiure, you
can display this fnessuge by double--i?lickinvj the warning | j|

,:,.,.,,,„. i;
Jf .' .is message йегга pat;

Dim: Предпопагаотся нопимие объекта
''

Ш
Рис. 9.8. Internet Explorer выводит описание ошибки

Если установить флажок в этом окне, тогда оно будет выводиться всегда при
обнаружении ошибок в сценарии.
Netscape Communicator вообще не определит наличие ошибки — страница будет
выглядеть так же, как и без нее (рис. 9.9).

И Nets cape

Iff: / |(ile:///D|/Books/My/Flash2/Fl'ash/CHe/Errorhtml ~

Рис. 9.9. А в этом браузере ошибка вообще не будет показана
216 Занятие 9. Один раз отрежь

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

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

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

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

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

allert is not defined.
Ш
javascript typein

Рис. 9.10. Окно с сообщением об ошибке

СОВЕТ
Отлаживать сценарии JavaScript можно с помощью программы Microsoft Script Debugger. Она
распространяется бесплатно, и ее можно загрузить с сервера vww.microsoft.com/scripting.

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

<SCRIPT language="javascript">
<!--
var yourname=prompt("Введите ваше имя. например.". "Вася");
// -->
if (confirmC'Bauie имя "+yourname+"?")) {alert ("Вы - "+yourname)}
else {alert ("Вы не "+yourname)};
</SCRIPT>

Explorer User Prompt

'JavaScript Prompt ЦЦ •••'•" .. '-
Введите: ваше имя, например.

Вася

Рис. 9.11. Окно метода pompt

•••••ШрТЧ
'
Microsoft Internet E

U/дше иия Вася?-
''

,'.'-":.;г';';ок; i |
Рис. 9.12. Окно метода confirm

Microsoft Internet Explorer

Вы не Вася

ОК

Рис. 9.13. Окно метода alert

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

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

всего, на него необходимо загружать файлы в кодировке KOI-8 (стандартная
кодировка кириллицы под UNIX), предварительно их перекодировав. Загружа-
ем файлы, используя тот же CuteFTP.

ПРИМЕЧАНИЕ
Все сказанное про загрузку не относится к серверам, предоставляющим HTTP-доступ, на-
пример — narod.ru.

Если у вас установлен полный пакет Internet Explorer, то проще всего помес-
тить файлы в Сеть, используя программу Издатель Web. Запустите программу из
меню запуска и ответьте на вопросы Издателя: какие файлы и откуда надо взять,
куда и как их следует разместить (рис. 9.14). При подключении вас попросят
ввести пароль.

Издатель Web

Задайте URL-адрес и каталог

i Web-ст репицам (напр им ер, littp //v/ww, i n icro s ott, со гп/гпу) . Этот
.адрес можно уэнеть у сисгеиного: администратор.» или
поствещика услуг Интернете: ..;: :
:

Ijwww. dirnvivich.narod.ru

|§ШЩ1"е i 1иганэев1
•ЙЩе ЩЦватъ зток

Док альм ый к а т an or
JD \Books\My\Fte3h2\Flash\Ch3\

—.—, :_
Рис. 9.14. Одно из окон Издателя Web

Вот и весь процесс. Ваш сайт оказался на сервере и его можно там просмотреть.

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

• выяснили, какая структура может быть у сайта и как организовать по нему
навигацию;
• увидели, почему так важен трехпанельный макет HTML-страницы;
• познакомились с основными кодировками кириллицы;
• научились эффективно тестировать сценарии JavaScript;
• посмотрели на Интернет-статистику, собранную сервером TheCounter.com;
• научились определять браузер посетителя страницы;
• узнали некоторые хитрости верстки и тестирования.
Ahoj! На следующем занятии нас ждет множество перевоплощений.
Занятие 10

И столяр, и плотник
Скатился с ветки каштан.
Тому, кто в дальних горах не бывал,
В подарок его отнесу.
Мацуо Басе1

На этом занятии
Планирование — дело тонкое. Сколько ни планируй, часто все идет не так, как
хотелось бы. Как пел Андрей Миронов, «крокодил не ловится, не растет кокос».
Здесь картинку не подобрать, там текст не состыковать... И главное, каким бы
гениальным плановиком вы ни были, чтобы сайт увидел свет, вам еще придется
состояться и как писателю, и как художнику. А у каждой профессии есть свои
тонкости. О некоторых из них мы сейчас и поговорим. На сегодняшнем занятии
мы узнаем:
• как подготовить текст быстро и без ошибок;
• какие инструменты Word могут пригодиться при создании web-страниц;
• зачем нужен графический текст;
• как на HTML-странице вывести длинное тире или знак торговой марки;
• что такое anti-aliasing и когда его надо применять.
Что касается этапов работы, сформулированных на занятии 8, то на сегодня-
шнем занятии мы обсудим 3 из них: подготовку текстовых материалов, подго-
товку графических материалов и создание элементов оформления.

Подготовка текста
Как уже говорилось, тексты, помещенные в Интернете для ознакомления с ними
при подключении к Сети, должны иметь иерархическую структуру. Из этого не
следует, что, если вы хотите представить на всеобщее обозрение свой литера-
турный опус, вам придется сделать из него «сетевую» версию. Ни в коем слу-

В переноде В. Марковой.
Подготовка текста 221

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

Работа в Word
Так как результатом работы в Microsoft Word должен стать простой текстовый
файл, в этом разделе будут рассмотрены только функции, которые могут приго-
диться при наборе текста.

ВНИМАНИЕ
Напоминаем: будьте внимательны при копировании текста из Word в программу HTML-вер-
стки. Никогда не копируйте текст напрямую (естественно, если вы не используете для вер-
стки Блокнот). Всегда сохраняйте текст сначала в простом текстовом редакторе, иначе
весь выигрыш от проверки правописания уйдет на борьбу с последствиями.

Проверка правописания
Основная функция, которая вам пригодится, — это проверка правописания.
Обычно Word по умолчанию проверяет грамматику и орфографию. Слова, в ко-
торых, по его мнению, есть ошибка, он подчеркивает красным, а предложения
с грамматическими ошибками и неточностями — зеленым. Если вы щелкнете
правой кнопкой на подчеркнутом слове или части слова, то Word напишет, что
сделано неправильно. Обычно к его мнению стоит прислушаться. Однако если
ошибок слишком много, текстовый процессор откажется автоматически прове-
рять орфографию. В таком случае необходимо воспользоваться командой Сервис >
Правописание или нажать F7. В верхнем поле Word выделит красным слово с
222 Занятие 10. И столяр, и плотник

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

СОВЕТ
Если «языковые проблемы» становятся частыми — создайте макрос, который бы менял
язык на русский, и задайте горячую клавишу для него. О том, как это сделать, читайте
ниже в разделе «Макросы».
Подготовка текста 223

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

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

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

забытую цитату. В таких случаях удобнее всего использовать примечания. При-
мечание вставляется командой Вставка > Примечание (или кнопкой Вставить при-
мечание). В примечании вы можете оставить памятку самому себе. Затем вы мо-
жете открыть панель Рецензирование и с помощью кнопок Следующее примечание
и Предыдущее примечание просмотреть все сделанные примечания. На той же па-
нели находится кнопка Удалить примечание для стирания просмотренных и вы-
полненных примечаний.

СОВЕТ
Чтобы открыть нужную панель инструментов, выберите ее в подменю команды Вид > Пане-
ли инструментов или в контекстном меню командной области Word. В этом же меню при-
сутствует команда Настройка (она есть и в меню Сервис), которая позволяет создать но-
вую панель инструментов или перенести пару нужных кнопок на уже существующие
панели.

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

ВНИМАНИЕ
Будьте внимательны при работе с исправлениями — при записи окончательного варианта
документа в формате ТХТ все исправления должны быть приняты. При копировании через
буфер обмена (Ctrl+C/Ctrl+V) достаточно, чтобы исправления не отображались на экране.

СОВЕТ
Если подвести указатель мыши к исправлению, появляется подсказка, кто является его ав-
тором. Если вы хотите, чтобы там появилось ваше имя, заполните поля вкладки Пользова-
тель в окне Параметры. Введенные там инициалы появятся при именовании примечаний.

Макросы
Еще одной полезной функцией, которая существенно облегчает работу в Word
п которую, к сожалению, многие считают для себя недоступной, является ис-
пользование макросов. Хотя для создания макросов используется специальный
язык программирования — Visual Basic for Applications (VBA), вы можете даже
TTf
' подозревать о его существовании и при этом все равно использовать макросы.
Word позволяет записать последовательность команд в виде макроса, не прибе-
гая к услугам редактора языка Visual Basic.
Подготовка текста 225

Для примера запишем макрос для смены текущего языка выделенного текста на
русский.
1. Сначала выделим нужный текст.
2. Затем дадим команду Начать запись из меню Макрос или нажмем кнопку За-
пись (синий кружок) на панели Visual Basic.
3. В появившемся окне дадим ему название, например Русский.
4. Дальше можно идти тремя путями: просто начать запись или начать запись,
предварительно сопоставив создаваемому макросу сочетание клавиш или
кнопку панели инструментов. Для простоты просто нажмем ОК и перейдем к
записи макроса.
5. Рядом с указателем мыши появилось уменьшенное изображение кассетой,
а на экране появилась плавающая панель с двумя кнопками Остановить запись
и Пауза. Кнопкой Пауза можно воспользоваться, если вы забыли выделить
текст или случайно сняли выделение, или если вам надо перейти к другому
участку текста (в режиме записи макроса Word не позволит вам воспользо-
ваться мышью для путешествий по тексту).

ПРИМЕЧАНИЕ
При записи макроса доступны только команды, к которым так или иначе можно установить
доступ с клавиатуры.

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

13. Закроем окно Настройка и разместим созданную панель в нужном месте. Что-
бы исправить язык текста на русский, теперь достаточно выделить фрагмент
текста и нажать Alt+R или кнопку Русский на панели Моя.

ВНИМАНИЕ
Будьте внимательны при настройке клавиатурных сочетаний: некоторые из них уже исполь-
зуются Word. Впрочем, об этом вы узнаете из подсказки, которая выводится после ввода
клавиатурной комбинации. Не стоит перекрывать уже существующие назначения, если вы
не чувствуете себя асом в Word. Возможных свободных комбинаций и так достаточно — го-
дятся любые сочетания практически всех основных клавиш клавиатуры с клавишами Alt,
Ctrl и Shift.

Ввод специальных символов
Иногда требуется вставить в текст символ, который не встречается в обычном
наборе символов, например, знак параграфа или градуса. Приведем обозначения
специальных символов для использования в HTML-документе (табл. 10.1).

Таблица 10.1. Коды специальных символов

Код символа Название Символ

&#167; Параграф §
&#169; Copyright ©
&#174; Registered
&#176; Знак градуса
&laquo; Левая кавычка (левая елочка)
&raquo; Правая кавычка (правая елочка)
&#133; Многоточие
&#145; Одиночная открывающая кавычка
&#14б; Одиночная закрывающая кавычка (апостроф)
&#132; Открывающая лапка
&#147; Закрывающая лапка
&#147; Открывающая английская лапка
&#148; Закрывающая английская лапка
&#149; Жирная точка
&#150; Короткое тире (минус)
&#151; Длинное тире
&#153; Торговая марка
&#8470; Знак номера №
&#177; Плюс-минус ±

Вот несколько правил хорошего тона использования специальных символов1.

1
Некоторые из правил навеяны Артемием Лебедевым.
Графика в Сети 227

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

В русскоязычном тексте не стоит писать номера телефонов на западный манер,
то есть с одним дефисом: 911-1206. Правильно писать с двумя: 911-12-06.
Если для обозначения слова существует специальный символ, надо исполь-
зовать его, а не эмуляцию с помощью обычных знаков. Например, надо пи-
сать ©, а не (С).
Верхние индексы, знак ®, номера и знаки сносок всегда надо набирать более
мелким кеглем и поднимать с помощью тега <sup>. Для нижних индексов
служит тег <sub>.
Если вы используете Word для набора текста, не забудьте дополнительно об-
работать кавычки и специальные знаки в Блокноте.

Графика в Сети
Кроме текста практически любой сайт использует в своем оформлении графические
файлы, будь то меню, логотип или просто украшенный заголовок. В Интернете
в основном используются растровые форматы: GIF, JPEG и PNG. Исключение
составляет Flash. Основным поставщиком рисунков служит программа Adobe
Photoshop. В ней вы можете сами нарисовать что-либо (обычно это текстовые
надписи) или использовать отсканированные изображения. Основные принци-
пы сканирования и работы в Photoshop описаны в занятии 3, а сейчас мы позна-
комимся с советами бывалых людей.
228 Занятие 10. И столяр, и плотник

Несколько советов
• Подкорректируйте в Photoshop цвета (Image > Adjust > Hue > Saturation) и яр-
кость/контраст (Image > Adjust > Levels). Фотографии не должны выбиваться
из общего оформления страницы или сильно отличаться друг от друга по яр-
кости и контрастности. Возможное решение — сделать все фотографии чер-
но-белыми (Image > Adjust > Desaturate).
• Практичным решением для фотоальбома будет размещение на его главной
странице уменьшенных копий-значков, каждая из которых ссылается на
большую фотографию. Чтобы просмотреть полное изображение, достаточно
щелкнуть мышью на его эскизе. Таким же образом имеет смысл поступать со
всеми большими иллюстрациями сайта.
• Помните, что при масштабировании качество картинки объективно падает.
Поэтому совершенно недопустимо несколько раз последовательно перемас-
штабировать фотографию или рисунок. Если вас не устраивает полученный
размер, вам следует вернуться к оригиналу и масштабировать заново именно
оригинал. Это же правило относится и ко многим другим операциям (кор-
ректировка цветов, изменение контрастности или яркости).
• Яркость картинки во время ее обработки и рисования должна соответство-
вать яркости, которую она будет иметь во время показа в браузере, поэтому
важно правильно настроить гамму в вашем графическом редакторе (в Photo-
shop это делается командой File > Color Settings > Monitor Setup > Gamma).

Золотое сечение
Золотым сечением называется определенное соотношение длин двух отрезков.
Этот термин ввел в употребление Леонардо да Винчи. Отрезки, прямоуголь-
ники или любые фигуры, построенные с учетом соотношения золотого сечения,
воспринимаются как пропорциональные, красивые, гармоничные и эстетичные.
Золотое сечение имеет вполне строгую математическую формулировку: если за-
дан отрезок АВ и на нем точка С, то отрезок будет иметь золотое сечение, если
отношение длины отрезка к длине его большей части будет равна отношению
длины большей части к меньшей. В частности, если АОСВ, то отношение мож-
но записать как: АВ/АС=АС/СВ.
Решив несложное квадратное уравнение, можно (вслед за пифагорейцами) по-
лучить значение золотого сечения. Оно приблизительно равно 3/5 или 2/3.
Золотое сечение и связанные с ним математические понятия, например числа
Фибоначчи, появляются в самых разнообразных явлениях природы: в пропор-
циях человеческого тела и растений, в эволюции биоценозов и даже в поведении
некоторых образований глубокого космоса. Общепринятые форматы фотографий
также соответствуют значению золотого сечения. Это же значение проявляется
и в размерах стандартных листов бумаги А4, A3 и т. д.
Поэтому, обрезая фотографию в Photoshop, постарайтесь соблюдать принцип
золотого сечения, подобрав соотношение длины и высоты картинки 3/5 или 2/3.
Размеры экрана монитора другие: 800x600 или 1024x768, то есть их отношение
равно 3/4. Оно близко к другой величине — квадратному корню из значения зо-
лотого сечения. Субъективно такие фигуры тоже пропорциональны.
Графика в Сети 229

СОВЕТ
Будьте аккуратны, обрезая фотографии. Нет ничего проще, чем испортить хорошую фото-
графию, обрезав ботинки или флюгер на крыше.

Внутри кадра золотое сечение тоже применимо. Значимые точки и линии кадра
лучше располагать на расстоянии 1/3 от края. Привязывайте к этим линиям
композиционный центр вашей фотографии. Например, в пейзажах горизонт
лучше расположить не посередине изображения, а на высоте одной или двух
третей.

СОВЕТ
Применяйте принцип золотого сечения не только при обработке фотографий. Для филь-
мов Flash он тоже вполне применим.

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

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

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

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

СОВЕТ
Из-за потерь качества рисунка для сохранения промежуточных версий используйте родной
формат графического редактора. Для Photoshop им является TIFF и PSD.

СОВЕТ
Для того чтобы создать анимированный GIF-файл, совсем не обязательно покупать и уста-
навливать дополнительные программы. Если у вас нет серьезных претензий к графике, то
гораздо проще использовать для этих целей Flash. Создайте нужную последовательность
кадров, дайте команду File > Publish Settings (Файл > Параметры публикации). На вкладке
Formats (Форматы) установите флажок GIF Image. На появившейся вкладке GIF настройте
необходимые параметры (в частности, установите переключатель Animated (Анимирован-
ный)) и нажмите кнопку Publish (Опубликовать).

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

алгоритм Deflate, в отличие от GIF или TIFF сжимает растровые изображения
не только по горизонтали, но и по вертикали, что обеспечивает более высокую
, степень сжатия. Кроме того, он поддерживает цветные фотографические изо-
бражения вплоть до 48-битных включительно.
Как недостаток формата часто упоминается то, что он не дает возможности соз-
давать анимационные ролики, хотя сейчас, при повальном переходе практиче-
ски всей анимации на технологию Flash, это уже совсем не актуально. Зато фор-
мат PNG позволяет создавать изображения с 256 уровнями прозрачности за
счет применения дополнительного альфа-канала с 256 градациями серого, что,
безусловно, выделяет его на фоне всех существующих в данный момент форма-
тов. В числе других отличительных особенностей этого формата можно отме-
тить двумерную чересстрочную развертку (то есть изображение проявляется
постепенно не только по строкам, но и по столбцам) и встроенную гамма-кор-
рекцию, позволяющую сохранять изображения, яркость которых будет неизмен-
на на таких альтернативных платформах, как Mac, Sun или Silicon Graphics.
Но широкое распространение этого поистине передового формата сдерживают
некоторые его недостатки. Так, формат PNG значительно уступает своему пред-
шественнику, GIF, в тех случаях, когда речь идет о мелких элементах оформле-
ния web-страниц, таких как кнопки, рамки и т. п. Проблема заключается в том,
что в файле изображения около 1 Кбайта занимает описание палитры цветов,
что порой бывает сопоставимо с размером самого изображения.

JPG
JPG — основной формат электронных фотографий. Однако поскольку он сохра-
няет изображение с потерей качества, вам придется выбирать соотношение меж-
ду наименьшим размером файла и допустимыми (на ваш взгляд) искажениями
рисунка. Свойства этого формата таковы, что дефекты сильнее всего проявля-
ются на мелких контрастных деталях (вокруг них появляется ореол). Картинки
в этом формате имеют цветовую модель TrueColor (16 млн цветов).
Полное название этого формата — JPEG (Joint Photographic Experts Group). Он
разработан группой экспертов по фотографии (что становится ясно из названия)
под эгидой ISO (Международная организация по стандартам). Этот формат
уникален тем, что использует алгоритм сжатия, отличающийся от применяемых
во всех остальных графических форматах, — сжатие с потерями. Этот алгоритм
ранее использовался на телевидении в схеме телевизионной трансляции США.
Основан он все на той же ограниченности человеческого зрения — неспособно-
сти глаза замечать некоторые искажения в восстановленном изображении. На
сегодня этот алгоритм является одним из самых эффективных (коэффициент
сжатия достигает 1:100), однако он не очень хорошо обрабатывает изображения
с малым количеством цветов и резкими границами. JPEG можно назвать проти-
воположностью GIF. Он позволяет отображать 24-битную палитру, что дает
возможность отображать градиенты с фотографической точностью, но при этом
не может иметь прозрачных областей.
Однако этот формат таит в себе одну неприятную особенность, о которой нель-
зя забывать. При каждом сохранении изображения в формате JPEG повторно
запускается алгоритм сжатия, что приводит к еще большему ухудшению качест-
Графика в Сети 233

ва. Поэтому сохранять изображение в этом формате следует только после окон-
чательной обработки.
Рисунки в форматах GIF и JPEG могут появляться на странице постепенно,
становясь более четкими по мере загрузки. Для того чтобы задать такое поведе-
ние изображения, надо указать при сохранении в Photoshop для GIF — Interla-
ced, а для JPG — Progressive. Однако использовать эту возможность лично я не
советую: если Интернет «быстрый» — то все равно сразу будет появляться ко-
нечный вариант, а если «медленный», то впечатление от картинки может испор-
титься, так как посетитель сайта сначала увидит рисунок плохого качества.

Атрибут alt
У многих смертных Интернет — крайне медленное и неповоротливое создание
(совсем как крокодил — может очень долго практически не двигаться). Для них,
а также для тех, у кого браузер не показывает графику (текстовый Lynx или
Netscape и Internet Explorer с выключенной графикой), настоятельно рекомен-
дуется прописывать для всех графических изображений атрибут alt:
<IMG src="test.gif" аН="Тестовая картинка">
При загрузке страницы с рисунками, надписанными таким образом, текст в ка-
вычках после alt будет показан вместо картинки, если она не будет загружена.
Эта же надпись будет всплывать в качестве подсказки, если навести на рисунок
указатель мыши.
Здесь важно отметить, что атрибут alt можно указывать лишь для отдельных
картинок. Если вы работаете с image map (то есть единой картинкой, разные
части которой могут ссылаться на разные странички), то единственная альтер-
натива — дублирование всех ссылок обычными текстовыми ссылками в самом
низу страницы. Однако чаще всего бывает проще разрезать картинку (см. заня-
тие 11) на несколько частей и прописать для каждой свой атрибут alt. Визуаль-
но это будет выглядеть точно так же, как и карта, однако пропадает необходи-
мость в текстовых ссылках и загрузка картинки будет происходить более
равномерно (так как части качаются параллельно).

Размеры файлов
Графические изображения, которые вы публикуете на страницах сайта, долж-
ны представлять разумный компромисс между качеством и размерами в кило-
байтах. Не этично заставлять людей загружать заставку в 200-300 Кбайт толь-
ко потому, что вы поленились обработать отсканированную фотографию. Дать
универсальный совет здесь довольно сложно, можно привести лишь некоторые
«статистические» рекомендации. Главное, что следует уяснить, — основной за-
гружаемый объем страницы в среднем составляет графика, и если вы можете на
чем-нибудь сэкономить, так это на ней. Для заглавной страницы общий объем
картинок и текста должен колебаться в пределах от 25 до 100 Кбайт. На страни-
цу второго уровня должно приходиться уже раза в 2 меньше. Если речь идет
о фотоальбоме, можно говорить об общем объеме не более 400-600 Кбайт на
страницу. В любом случае учтите, что на большинстве серверов, дающих бес-
платный хостинг, выделяемый для вас объем места на диске ограничен.
234 Занятие 10. И столяр, и плотник

СОВЕТ
Иногда может оказаться полезным применение атрибута LOWSRC. Если прописать его для
картинки, например, <IMG src="testgif LOWSRC="before.gif">, то вначале будет загру-
жено изображение из файла before.gif, и следом поверх него — из test.gif. Файл before.gif
обычно делают очень низкого качества, черно-белый (в Photoshop команда Image > Adjust >
Threshold).

Важно указывать для каждой картинки ее размеры на экране: height, width. Если
эти размеры не установлены, браузер не будет знать, сколько под данную кар-
тинку необходимо отвести места, пока ее не загрузит полностью. Поэтому, когда
задана таблица с множеством графических изображений внутри, общее изобра-
жение появится только тогда, когда загрузится последняя картинка и весь текст.
Если же размер указан, текст проявится сразу, а картинки будут временно заме-
нены браузером прямоугольниками указанных размеров.
Неплохим приемом, позволяющим сочетать небольшой объем памяти на диске
и высокое качество, является нарезка картинки на части и сохранение каждой
части в наиболее подходящем для нее формате. Например, довольно часто по-
верх фотографии наносится текст. Для такой иллюстрации не годится как фор-
мат JPG (надпись будет выглядеть размазанной, с ореолом вокруг букв), так и
формат GIF (число цветов на фотографии будет небольшим, плавные переходы
типа неба заменятся на неровные резкие границы). В таких случаях картинка
нарезается на несколько фрагментов так, чтобы надпись оказалась на отдельном
фрагменте как можно меньшего размера. Каждую часть сохраняют в подходя-
щем формате и помещают в ячейки большой таблицы. О технологии нарезки
будет рассказано на следующем занятии.
Существует проблема, связанная с размерами картинки для фона страницы
(или фона ячеек таблицы). Иногда дизайнеры используют картинку больших
размеров (тысячи точек по горизонтали и вертикали), чтобы избежать автома-
тического повторения рисунка в пределах экрана. В таких случаях необходимо
учитывать, что малый размер графического файла у вас на диске — еще недоста-
точное условие разумного использования графики. Для того чтобы показать
изображение, браузер должен выделить кусок памяти, в котором он поместится
в несжатом виде. То есть вполне возможна ситуация, когда фон, занимающий на
диске (в формате JPE G) 1-2 Кбайтов, потребует в момент показа несколько
мегабайтов памяти. Это может привести как к некоторому замедлению работы
браузера, так и к тривиальным проблемам с нехваткой памяти.

Графический текст
Итак, вы выбрали из богатой коллекции шрифтов на вашем компьютере пару
подходящих для основного текста и один поэкзотичнее — для заголовка, напри-
мер найденный в Интернете ManhattanCyr. Первый порыв — взять и просто на-
писать:
<FONT face="ManhattanCyr" 5тге="+2">Заголовок</РОМТ>
Пишем, проверяем — все прекрасно работает. Но что увидит при просмотре
этой странички человек, который не -является счастливым обладателем шрифта
Графический текст 235

ManhattanCyr? Браузер заменит его на стандартный шрифт, и все тщательно
продуманное вами оформление останется неоцененным. К тому же шрифт-под-
мена может случайно и не содержать русских букв, и тогда даже прочесть заго-
ловок станет невозможно.
Что же делать? Выход есть, правда, он обладает одним маленьким недостатком:
нам придется сделать из текста картинку.
Открываем Photoshop и пишем текст нужным шрифтом. Сохраняем рисунок и
вставляем на соответствующее место заголовка:
<IMG src="Zagolovok.gif" width=... height"...>

СОВЕТ
Картинки, содержащие текст, рекомендуется сохранять в формате GIF.

Не забывайте указывать значения параметров w i d t h и height — напомню, что это
необходимо для своевременного отведения браузером места под картинку.
Превращение текста в картинку открывает широкие перспективы: можно при-
менять к такому тексту любые эффекты, начиная от простого отбрасывания тени
до создания объемных и разноцветных надписей. Экспериментируйте!

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

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

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

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

Anti-aliasing
При создании текстовых надписей в графическом редакторе есть свойство, ко-
торое оказывает огромное влияние на результат. Это свойство называется сгла-
живанием (anti-aliasing). Если сглаживание включено, то на границе буквы и
фона появляются переходные цвета. Результат — границы букв выглядят плав-
но и аккуратно (рис. 10.1, а). Если же сглаживание выключено, то буквы имеют
резкие, рваные края (рис. 10.1, б).
Если же надо создать небольшую надпись, то поступать надо прямо противопо-
ложным образом — сглаживание в данном случае ухудшает читаемость текста.
Общий метод в данном случае примерно следующий: создаете картинку доста-
точно большого размера (скажем, 800x600 пикселов), затем печатаете требуе-
мую надпись большими буквами. Сглаживание (Anti-aliasing) при этом должно
Что нового мы узнали 237

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

• Сглаживание
. без него
Рис. 10.1. Так будет выглядеть надпись со сглаживанием (а) и без него (б)

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

Что нового мы узнали
Последние три занятия, наверное, стали для вас тяжелым испытанием. Слиш-
ком много всего сразу. Но такова жизнь — специалисту в узкой предметной об-
ласти очень трудно удержаться на плаву в современном мире. Существенно
лучше действует формула: одно — хорошо, а остального — понемногу.
Сегодня мы побывали в шкуре писателя и художника, и узнали много нового:
• как проверить в Word текст на правописание;
• как научиться печатать очень быстро и не делая ошибок с помощью автопод-
становки текста;
• как сделать из мухи слона;
• как вывести символы, которых нет на клавиатуре;
• как сгладить буквы в Photoshop.
ХоияЕте! На следующем занятии нас ждет встреча с прекрасным и привлека-
тельным.


-

Занятие 11

Встречают по одежке
В чарку с вином,
Ласточки, не уроните
Глины комок.
1
Мацуо Басе

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