ЬЬу®

НТМ1.5

С383

Мастер - класс

РОБИН НИКСОН
'* * 1
НТМЬ5 апЛ С883

Ма51егс1авв

1п-с1ер1к УУеЪ Оезг^п Тгатт% юН1г
Сео1осаНоп, Иге НТМ15 Сапъаз,
20 апй 30 С5Б Тгапз/огтаНопз,

Р1ехЬох, С55 Спй, апН Моге

К.оЬ1п ГхНхоп

уууууу.ЬрЬопНпе.сот
РОБИН НИКСОН

НТМ1.5

С883

Мастер - класс

Санкт-Петербург
«БХВ-Петербург»
2024
УДК 004.43

ББК 32.973.26-018.1

Н64

Никсон Р.

Н64 НТМБ5 и С883. Мастер-класс: Пер. с англ. — СПб.:

БХВ-Петербург, 2024. — 464 с.: ил.

18ВХ 978-5-9775-1929-8

Книга посвящена разработке веб-сайтов и веб-приложений с нуля, с применением
самых современных клиентских и серверных технологий, селекторов С88 и подходов
к веб-дизайну. Рассмотрены стандарт С88 3+, отрисовка на холсте (технология
Сапуаз), адаптивный веб-дизайн (технологии ИехЬох и Опф, технология 8А88, рас-
ширяющая возможности С88, а также художественные аспекты веб-дизайна, обеспе-
чение кроссплатформенности сайтов и приложений и приверженность отзывчивому
веб-дизайну.

Для веб-дизайнеров и веб-разработчиков

УДК 004.43

ББК 32.973.26-018.1

Группа подготовки издания:

Руководитель проекта
Зав. редакцией
Перевод с английского
Редактор

Компьютерная верстка
Корректор

Оформление обложки

Олег Сивченко
Людмила Гаулъ
Николая Вилъчинского
Дарья Кустовская
Натальи Смирновой
Светлана Крутоярова
Зои Канторович

Соруп§Ы 2022 ВРВ РиЬИсайопз, 1псНа. АП п§1118 гезегуеО.

Р1Г81 риЬПзйеО. ш 01 с Еп^Изй 1ап§иа§е ипйег Оте 00с НТМЬ5 апс1 С$$3. Ма$(егс1а<е>:1п-с1ер1И И еЬ ОеЛун Тгатту
укНк (Зео1оса1юп, 1ке НТМЬ5 Сангах, 20 апс1 ЗВ С$8 ТгапДогтайопх, Р1ехЬох, С88 Сгпй, апс1 Моге,
I8В^ 9789355511218 Ьу ВРВ РиЬПсаПопз ПкНа (8а1е8@ЬрЬоп1те.сош).

Ки881ап 1гап81а1юп п§1118 аггап§ес1 хуйН ВРВ РиЬПсайопз, 1псПа.

© 2022 ВРВ РиЬИсайопз, Индия. Все права защищены. Впервые опубликовано на английском языке

под названием НТМЬ5 апс1 С8$3. МаЛегс1ахх:1п-йер1к Пек ОеЛ§п Тгагтп^ нМк Сео1осайоп,

1ке НТМЬ5 Сангах, 20 апс1 30 С88 Тганхрогншконх, Р1ехЬох, С88 (ЗгЫ, анс1 Моге,
I8В^ 9789355511218 издательством ВРВ РиЬПсайопз 1псПа (8а1е8@ЬрЬоп1те.сот).

Права на перевод на русский язык предоставлены издательством ВРВ РпЬПсайопз, Индия.

"БХВ-Петербург", 191036, Санкт-Петербург, Гончарная ул., 20.

18ВХ 978-93-55511-218 (англ.)

18ВХ 978-5-9775-1929-8 (рус.)

© ВРВ РиЬНсаПопз, 1пс11а, 2022

© Перевод на русский язык, оформление.

ООО «БХВ-Петербург», ООО «БХВ», 2023
Содержание

Предисловие..........................................................15

Об авторе............................................................17

ГЛАВА 1. Начальные сведения о НТМЬ5 и С883...........................19

Введение.............................................................19

Структура............................................................21

Цели.................................................................21

Знакомство с НТТР и НТМЬ.............................................21

Знакомство с С88.....................................................24

Использование атрибутов 16 и с1а88...................................25

Чем обусловлена необходимость применения НТМЕ5 и С883 ...............28

Заключение...........................................................29

ГЛАВА 2. Установка веб-сервера.......................................31

Вступление...........................................................31

Структура............................................................31

Цели.................................................................31

Представление о АУ АМР, МАМР и ЬАМР..................................32

Установка под \Утбо\У8...............................................32

Работа с корнем документа............................................36

Установка под МасО8..................................................39

Работа с корнем документа............................................41

Установка под 1лпих..................................................43

Работа с корнем документа............................................44

Заключение...........................................................44

ГЛАВА 3. У18на1 8ШД10 СоДе...........................................45

Вступление...........................................................45

Структура............................................................45

Цели.................................................................45

Популярность У8 Собе.................................................46

Установка У8 Собе под \Утбо\У8.......................................47
Установка У8 Соде под МасО8.........................................49

Установка У8 Соде под 1лпих.........................................51

Начало работы с У8 Соде.............................................52

Заключение..........................................................54

ГЛАВА 4. Консоль разработчика.......................................55

Вступление..........................................................55

Структура...........................................................55

Цели................................................................55

Доступ к консоли разработчика.......................................56

Польза, извлекаемая из работы с консолью............................60

Автозавершение......................................................61

Просмотр элементов..................................................63

Заключение..........................................................65

ГЛАВА 5. Введение в НТМГ5...........................................67

Введение............................................................67

Структура...........................................................67

Цели................................................................68

НТМИ5 гораздо серьезнее, чем просто НТМИ4 + 1.......................68

8УСиМаЙ1МЬ..........................................................79

Заключение..........................................................80

ГЛАВА 6. Использование холста в НТМГ5...............................81

Введение............................................................81

Структура...........................................................81

Цели................................................................81

Ускоренный курс 1ауа8спр1...........................................82

Размещение кода внутри тегов <8спр1>................................82

Размещение кода в отдельном файле...................................85

Функция §е1Е1ешеп1ВуГО()............................................87

Превращение холста в изображение....................................88

Заключение..........................................................90

ГЛАВА 7. Прямоугольники и заливки...................................91

Введение............................................................91

Структура...........................................................91

Цели................................................................91

О примерах работы с холстом.........................................92

Рисование прямоугольников...........................................93

Использование переменных............................................94

Применение стилей рисования.........................................95
Изменение толщины линии..............................................96

Очистка прямоугольника...............................................97

Применение градиентной заливки.......................................98

Применение радиального градиента....................................100

Разноцветные градиентные заливки....................................101

Использование заполнения узором.....................................103

Использование перемещения...........................................106

Заключение..........................................................109

ГЛАВА 8. Надписи на холсте..........................................111

Введение............................................................111

Структура...........................................................111

Цели................................................................111

Создание надписей...................................................112

Изменение способа отображения текста................................112

Выравнивание текста.................................................113

Изменение толщины обводки...........................................115

Надписи с заполнением...............................................118

Использование узора для заполнения надписи..........................121

Заключение..........................................................122

ГЛАВА 9. Рисование на холсте........................................123

Введение............................................................123

Структура...........................................................123

Цели................................................................123

Рисование линий с использованием путей..............................124

Применение заполнений...............................................128

Ограничения областей холста.........................................128

Рисование кривых линий..............................................131

Выбор направления...................................................132

Рисование дуги к конкретной точке...................................136

Использование аттракторов...........................................138

Завершение и схождение линий........................................141

Заключение..........................................................144

ГЛАВА 10. Работа с холстом..........................................145

Введение............................................................145

Структура...........................................................145

Цели................................................................145

Рисование с использованием изображений..............................146

Извлечение частей изображений.......................................148

Использование холста в качестве исходного изображения...............149

Прикрепление теней..................................................151
Тени прикрепляются не только к изображениям........................153

Непосредственное редактирование пикселей...........................154

Как хранятся данные о цвете........................................156

Последовательный перебор данных....................................157

Обработка данных изображения.......................................157

Усреднение данных о цвете..........................................158

Другие эффекты.....................................................158

Создание собственных данных изображения............................162

Заключение.........................................................162

ГЛАВА 11. Расширенные возможности работы с холстом.................163

Введение...........................................................163

Структура..........................................................163

Цели...............................................................163

Выстраивание композиции и прозрачность.............................164

Использование цикла................................................167

Рисование изображения..............................................167

Изменение прозрачности.............................................168

Применение преобразований..........................................169

Использование поворотов............................................171

Применение перемещений.............................................172

Применение сразу нескольких преобразований.........................173

Заключение.........................................................173

ГЛАВА 12. Применение геолокации....................................175

Введение...........................................................175

Структура..........................................................175

Цели...............................................................176

Что такое СР8......................................................176

Альтернативы применению СР8........................................176

Проверка доступности геолокации....................................177

Использование консоли разработчика.................................179

Перенаправление пользователей......................................180

Получение сведений о местоположении пользователя...................182

Именованные функции................................................184

Когда получено разрешение..........................................185

Заключение.........................................................186

ГЛАВА 13. Работа с формами.........................................187

Введение...........................................................187

Структура..........................................................187

Цели...............................................................187

Атрибуты формы НТМЬ5...............................................188
Атрибут аиШГосиз.....................................................188

Атрибут аи1осошр1е!е.................................................190

Атрибут Гопи.........................................................191

Атрибут Гогшасбоп....................................................193

Другие переопределения формы.........................................194

Атрибут шиШр1е.......................................................195

Атрибут поуа1к!а1е...................................................196

Атрибуты \уМ111 и 11е1§111...........................................196

Атрибут 1181 и теги <ба1а1181> и <ор!юп>.............................197

Атрибуты шт, тах и 81ер..............................................198

Другие типы ввода даты и времени.....................................200

Атрибут раИегп.......................................................200

Атрибут р1асе1ю1с1ег.................................................201

Атрибут гедшгеб......................................................202

Тип ввода со1ог......................................................203

Числа и диапазоны....................................................204

Тип ввода зеагсИ.....................................................206

Заключение...........................................................207

ГЛАВА 14. Локальное хранилище и многое другое........................209

Введение.............................................................209

Структура............................................................209

Цели.................................................................209

Использование локального хранилища...................................210

Хранение и извлечение локальных данных...............................210

Удаление и очистка локальных данных..................................213

Использование взамен этого хранилища сеансов.........................214

Микроданные..........................................................214

Веб-воркеры..........................................................217

Автономные веб-приложения............................................220

Как работают автономные веб-приложения...............................220

Перетаскивание.......................................................222

Обмен сообщениями между документами..................................223

Заключение...........................................................223

ГЛАВА 15. Аудио и видео..............................................225

Введение.............................................................225

Структура............................................................225

Цели.................................................................225

Аудио в НТМЬ5........................................................226

Аудиокодеки..........................................................226

Воспроизведение аудио................................................227

Видео в НТМЬ5........................................................229
Видеокодеки.........................................................230

Воспроизведение видео...............................................230

Заключение..........................................................236

ГЛАВА 16. Введение в С883...........................................237

Введение............................................................237

Структура...........................................................237

Цели................................................................237

Разработка С883 продолжается........................................238

Новое в С883........................................................239

Селекторы атрибутов.................................................239

Фоновые решения.....................................................240

Границы.............................................................242

Тени блоков.........................................................244

Столбцы и перетекания...............................................246

Цвета и прозрачность................................................247

Текстовые эффекты и шрифты..........................................248

Перемещения и преобразования........................................250

ИехЪох-разметка.....................................................252

ИехЪох как отдельный модуль.........................................252

С88	 255

Заключение..........................................................258

ГЛАВА 17. Селекторы атрибутов С883..................................259

Введение............................................................259

Структура...........................................................259

Цели................................................................259

Селекторы атрибутов С88.............................................260

Селектор по имени атрибута..........................................260

Селектор по значению атрибута.......................................261

Селектор по слову из списка.........................................262

Селектор по дефису..................................................263

Селектор по начальным символам......................................264

Селектор по конечным символам.......................................265

Глобальный селектор.................................................267

Флажок невосприимчивости к регистру символов........................268

Флажок восприимчивости к регистру символов..........................269

Заключение..........................................................270

ГЛАВА 18. Создание фона.............................................271

Введение............................................................271

Структура...........................................................271

Цели................................................................271
Обрезка и начало фона...............................................272

Литералы шаблонов...................................................272

Использование свойства Ъаск§гошк1-с11р..............................274

Использование свойства Ъаск§гоипс1-оп§т.............................275

Совместное использование обрезки и начала фона......................275

Раздел сценария 1ауа8спр1...........................................278

Размер фона.........................................................280

Использование градиентов............................................282

Точки остановки цвета...............................................284

Удаленность точек остановки цвета и повторения......................284

Радиальные и конические градиенты...................................285

Заключение..........................................................286

ГЛАВА 19. Построение границ.........................................287

Введение............................................................287

Структура...........................................................287

Цели................................................................287

Радиус границы......................................................288

Цвета границ........................................................290

Градиентные границы.................................................291

Использование нескольких фонов......................................293

Использование одного изображения....................................295

Заключение..........................................................298

ГЛАВА 20. Свойства блока и текста...................................299

Введение............................................................299

Структура...........................................................299

Цели................................................................299

Добавление теней....................................................299

Переполнение элементов..............................................302

Макет, составленный из нескольких колонок...........................303

Заключение..........................................................309

ГЛАВА 21. Цвета и прозрачность......................................311

Введение............................................................311

Структура...........................................................311

Цели................................................................311

КСВ-цвета...........................................................312

Использование цветового круга.......................................315

КСВ А-цвета.........................................................316

Н8Ь-цвета...........................................................318

Применение прозрачности.............................................321

Заключение..........................................................323
ГЛАВА 22. Текстовые эффекты и шрифты...............................325

Введение...........................................................325

Структура..........................................................325

Цели...............................................................326

Задание размеров блока.............................................326

Текстовое переполнение.............................................328

Перенос длинных слов...............................................329

Изменение размеров элементов пользователем.........................331

Выделение фокуса...................................................333

Текстовые тени.....................................................334

Веб-шрифты.........................................................335

Заключение.........................................................339

ГЛАВА 23. Двумерные преобразования.................................341

Введение...........................................................341

Структура..........................................................341

Цели...............................................................342

Преобразования.....................................................342

Переходы...........................................................344

Перемещения........................................................347

Ожидаемое вскоре свойство 1гап81а1е................................347

Масштабирование....................................................347

Вращение...........................................................349

Наклон.............................................................350

Использование матриц...............................................352

Заключение.........................................................354

ГЛАВА 24. Трехмерная графика и анимация............................355

Введение...........................................................355

Структура..........................................................355

Цели...............................................................355

ЗВ-преобразования..................................................356

Задание перспективы................................................358

Два способа изменения перспективы..................................360

Задание стиля преобразования.......................................362

Изменение исходной точки преобразования............................363

Работа в ЗВ-пространстве...........................................364

Управление кубом...................................................366

ЗВ-перемещение.....................................................367

ЗВ-масштабирование.................................................367

ЗВ-вращение........................................................367

Видимость обратных сторон граней...................................369

Заключение.........................................................370
ГЛАВА 25. Макет НехЬох.............................................371

Введение...........................................................371

Структура..........................................................371

Цели...............................................................371

Сведения о ИехЪох..................................................372

Создание интерактивной среды НехЬох................................372

Как работает пример................................................375

Работа с примером..................................................378

Нех-направление....................................................379

Перенос Нех-элементов..............................................382

Выравнивание всего содержимого по главной оси......................382

Выравнивание элементов по поперечной оси...........................386

Выравнивание всего содержимого по поперечной оси...................389

Другие свойства....................................................393

Заключение.........................................................394

ГЛАВА 26. С88 Спй..................................................395

Введение...........................................................395

Структура..........................................................395

Цели...............................................................395

Сведения о С88 Спб.................................................396

Как работает пример................................................399

Работа с примером..................................................400

Задание потока Спб-элементов.......................................401

Выравнивание содержимого...........................................402

Выравнивание элементов.............................................407

Задание промежутков................................................412

Изменение местоположения и размеров................................412

Заключение.........................................................417

ГЛАВА 27. Знакомство с 8азз........................................419

Введение...........................................................419

Структура..........................................................419

Цели...............................................................420

8а§8 — достойное решение...........................................420

Сведения о 8১....................................................420

Различные версии 8১..............................................421

Установка под \Утбо\У8.............................................421

Другие установщики под \Утбо\У8....................................424

Установка под МасО8................................................424

Установка под 1лпих................................................426

Альтернативные установки под 1лпих.................................427

Препроцессинг вС88.................................................428

Заключение.........................................................429
ГЛАВА 28. Переменные и потоки выполнения в 8а88....................431

Введение...........................................................431

Структура..........................................................431

Цели...............................................................431

Переменные в С88...................................................432

Переменные в 8১..................................................434

Значения переменных, используемые по умолчанию.....................435

Область видимости переменных.......................................437

Принудительное задание глобальной видимости........................438

Управление потоком выполнения......................................439

8а88-операторы.....................................................439

8а88-выражения (8а88-сценарий).....................................440

@1Г... @е18е.......................................................441

Влияние скобок.....................................................443

@е18е 1Г...........................................................443

@еас!1... т........................................................444

@Гог ... Ггот ... Й1гои§11.........................................445

@Гог ... Ггот ... 1о...............................................447

@м4й1е.............................................................448

Заключение.........................................................448

ГЛАВА 29. Расширенный 8а88.........................................449

Введение...........................................................449

Структура..........................................................449

Цели...............................................................450

Вложенность, используемая в 8а88...................................450

Вложенные свойства.................................................452

Наследование в 8а88................................................453

Использование миксинов.............................................455

Модули 8а88........................................................456

Будущие версии.....................................................457

Заключение.........................................................458

Метаданные.........................................................459

Описание...........................................................459

Чему вы сможете научиться..........................................460

Для кого эта книга.................................................460

Содержание.........................................................461

Биография автора...................................................462
Предисловие

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

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

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

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

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

♦	В главе 1 вы узнаете о тех функциональных возможностях, которые уже доступ-
ны как в НТМЕ5, так и в С883, и поймете, зачем они были добавлены, и что мо-
гут вам предложить.

♦	В главе 2 вы пройдете весь технологический путь установки на свой компьютер
веб-сервера, позволяющего вести локальную разработку и тестирование своих
проектов, не испытывая потребностей их выкладки на разработочный сервер.
♦	В главе 3 вы узнаете наверное о лучшем из доступных бесплатном редакторе
программного кода, У18иа1 8Шсйо Собе, и поймете, в чем его высокая эффектив-
ность, а также узнаете, как его можно будет установить и использовать.

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

♦	В главе 5 начнется изучение основ самых новых функций НТМЬ5 и того, что
они могут для вас сделать.

♦	В главе 6 состоится знакомство с холстом НТМЬ5, позволяющим создавать на
этом холсте надписи и рисунки непосредственно в веб-браузере для получения
разнообразных изображений и эффектов.

♦	В главе 7 начнется детальное изучение различных функций холста, начиная с
прямоугольников и их заливки.

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

♦	В главе 9 будут осваиваться приемы рисования на холсте с использованием про-
стых и понятных инструкций на языке 1ауа8спр1.

♦	В главе 10 начнется освоение холста с приемами непосредственного манипули-
рования цветом и прозрачностью его содержимого.

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

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

♦	В главе 13 предстоит изучение целого ряда новых и весьма комфортных функ-
ций обработки форм, которые теперь уже встроены в НТМЬ5.

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

♦	В главе 15 предстоит знакомство с аудио- и видеовозможностями НТМЬ5, и ос-
воение способов помещения этих медиа-источников непосредственно на ваши
веб-страницы.

♦	В главе 16 начнется переключение вашего внимания на С883 и на новые функ-
ции, которые может предложить эта технология.

♦	В главе 17 предстоит изучить всё, что касается новых селекторов атрибутов
С883, и освоить приемы их наиболее эффективного использования.

♦	В главе 18 вы приступите к созданию фонов, недоступных до появления С883.

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

♦	В главе 21 будут показаны все новые функции цвета и прозрачности, которые
теперь стали доступны благодаря С883.

♦	В главе 22 предстоит исследование способов простого добавления к вашему тек-
сту целого ряда разнообразных эффектов и даже получения доступа к тысячам
бесплатных веб-шрифтов.

♦	В главе 23 предстоит рассмотреть способы преобразования любых двумерных
веб-элементов путем их растяжения, вращения и многого другого.

♦	В главе 24 эти преобразования будут подняты на следующий уровень для мани-
пулирования трехмерными объектами, а также применения к ним приемов ани-
мации.

♦	В главе 25 состоится знакомство с весьма эффективным макетом ИехЪох, спо-
собным как никогда ранее упростить создание страниц с привлекательным
внешним видом, работающих на устройствах любого размера.

♦	В главе 26 предстоит изучение альтернативы технологии ИехЪох с еще более
развитой гибкостью, которая называется С88 Опс1.

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

♦	В главе 28 предстоит научиться использованию в 8১ переменных и управле-
нию потоком выполнения инструкций.

♦	И наконец, в главе 29 вы завершите свое исследовательское путешествие, овла-
дев различными передовыми технологиями 8а§8.

Об авторе

Робин Никсон — веб-разработчик и преподаватель, активно занимающийся про-
граммированием с 1980-х годов. Ранее он редактировал компьютерный журнал,
был директором нескольких компаний-разработчиков программного обеспечения, а
в последнее время стал автором ряда самых продаваемых книг о компьютерах и
компьютерных технологиях, выходящих в издательстве О’КеШу. Области интере-
сов Робина — фронтенд-разработка с использованием НТМЬ, С88 и 1ауа8спр1, а
также управление серверной частью с помощью РНР и Му8рЬ. Он также активный
исследователь в области искусственного интеллекта.
ГЛАВА 1

Начальные сведения о НТМ1.5 и С353

Введение

Вначале был \УсЬ 1.0, созданный сэром Тимом Бернерсом-Ли (Тип Вегпег8-Еее) в
1990 году, когда он разработал первый в мире веб-браузер и соответствующий веб-
сервер. Работая в ЦЕРН (Европейская организация ядерных исследований), он соз-
дал систему под названием ЕМрРЛКЕ, основанную на гипертексте, т. е. на тексте,
содержащем ссылки на другой текст в том же или в других документах.

В то время ЦЕРН был крупнейшим узлом Интернета из-за гигантского объема соз-
даваемых им данных, которыми нужно было делиться, и Бернерс-Ли понял, что это
прекрасная возможность совместить гипертекст с Интернетом. С этого, как гово-
рится, все и началось.

Но какой бы разумной изначально ни была концепция, вскоре ее ограничения стали
очевидны. Язык НТМЕ не выходил за рамки простого текста и изображений, а веб-
страницы были статичными документами, не допускавшими взаимодействия с
пользователем. То есть нужно было изобрести динамичную сеть, а именно \УсЬ 2.0,
позволявшую открыть возможности взаимодействия пользователей друг с другом
на веб-страницах, не требовавших перезагрузки при каждом вводе пользователем
каких-либо данных, поскольку об этом уже закулисно позаботились с помощью
применения асинхронного 1ауа8спр1 и ХМЕ (Азупсйгопоиз 1ауа8спр1 Апб ХМЕ,
А1АХ), ставшим средством отправки и получения данных по запросу, не застав-
ляющим пользователя задумываться об этом или совершать какие-либо действия.

Внедрение сетевых сервисов \УсЬ 2.0 привело к появлению социальных сетей и та-
ких продуктов, как ЕасеЪоок, Сипай, а также нового типа публикаций, названных
веб-журналами (блогами), которые реализовывались в основном на таких платфор-
мах, как \^огбРге88. Возможно, в названии \УсЬ 2.0 было больше семантики, нежели
признаков существенных изменений по сравнению с \УсЬ 1.0, но все, получившее в
этой технологии развитие, настолько далеко ушло вперед от самых первых НТМБ-
страниц, что \УсЬ 2.0 закрепилось за ней как прозвище.

Самое существенное в \УсЬ 2.0 (по сравнению с \УсЬ 1.0) заключается в появлении
возможности предложить пользователю внести свой вклад в контент сайта, остав-
ляя комментарии или же создавая учетную запись и соответствующий профиль, что
позволило добавлять на сайт свое собственное содержимое. В результате получил-
ся динамически изменяющийся пользовательский контент (например, в Википедии)
и возможность расширения его масштабов с применением таких облачных плат-
форм, как Ашахоп \УсЬ Зепчсез (АА^8).

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

И вот на этом пути более или менее параллельно друг другу совершенствовались
две технологии, нацеленные на привнесение в арсенал разработчиков целого ряда
новых функций, обеспечивающих создание интерактивной, динамичной и аними-
рованной среды, и это были НТМЬ5 и С883. С их использованием разработчики
получили возможность добавления в свои проекты аудио- и видеоконтента. А для
предоставления картографических услуг стала доступной функция гео локации.
В спецификацию НТМЬ был добавлен еще и такой элемент, как холст, сопровож-
дающийся огромным набором инструментов для рисования. Появилась возмож-
ность хранения на локальном ПК пользователя большого объема данных (не срав-
нимого с ранее доступными ущербными по объему файлами сооИе), а также были
предоставлены способы выполнения ресурсоемкого кода в отдельных процессах за
счет применения веб-воркеров (\уеЪ мюгкегз), а также ряда других новых инноваци-
онных функций.

Тем временем также бурно развивалась и технология С88. Как известно, единст-
венной спецификацией, определяющей целый ряд функций, была С882, но требо-
валось расширение функциональных и управляющих возможностей, о некоторых
аспектах которых у разработчиков еще даже не сложилось достаточного представ-
ления. Поэтому они пришли к созданию С883, где к отдельно взятым модулям по
мере необходимости могли добавляться новые возможности, но (что немаловажно)
без потери обратной совместимости, позволяющей сохранять работоспособность
существующих веб-сайтов. В число новых функций входила улучшенная обработка
фона, расширение блочной модели (Вох Мос1е1), более совершенное управление
каскадами, текстовые эффекты, преобразования, анимация и многое другое.

Примечание

Совсем скоро ожидается также и реализация концепции \УсЬ 3.0, обещающей
массовый переход к контексту с высокой степенью распределенности по всему
миру, избавляющему его от централизованного пребывания на отдельно взятых
сайтах и облачных платформах, с блокчейном (цифровым реестром транзакций,
продублированным и распространенным по всей сети компьютерных систем),
используемым для проверки подлинности всех данных на различных узлах.
В этой концепции также будет предложена поддержка новых технологий, на-
пример криптовалют и КЕТ-токенов (невзаимозаменяемых токенов, иначе гово-
ря, уникальных цифровых идентификаторов, служащих доказательствами вла-
дения цифровыми продуктами). Но все это (по крайней мере, на начальном эта-
пе) будет скорее фоновыми изменениями, чем обновлением пользовательского
восприятия. А для рассмотрения всех аспектов \УсЬ 3.0 потребовалась бы целая
книга, не имеющая никакого отношения к освоению особенностей технологий
НТМЬ5иС883.

Структура

В этой главе рассматриваются следующие темы:

♦	Ознакомление с НТМЬ и С88 (или освежение уже имеющихся знаний).

♦	Осознание необходимости отделения стиля от содержания.

♦	Изучение ряда новых функций НТМЬ5 и С883.

♦	Подготовка к началу освоения способов использования технологий.

Цели

Изучение материалов главы позволит получить базовое представление об НТМЬ и
С88 (если оно еще не сложилось), узнать о возможностях, открывшихся с появле-
нием НТМЬ5 и С883 и о стимулах, побуждающих к их доскональному освоению и
включению в арсенал инструментов веб-разработки.

Знакомство с НТТР и НТМЬ

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

Протокол передачи гипертекста (НТТР) — метод, позволяющий веб-браузеру об-
мениваться данными с веб-сервером. Работа веб-сервера — принять запрос от кли-
ента, а затем ответить на него осмысленным образом, обычно возвращая НТМЬ-
документ (или, возможно, сообщение об ошибке, например «404 Но1 Гоипб»).

НТМЬ-теги

НТМЬ-документы — это простые текстовые файлы с вкраплением специальных
команд (тегов), заключенных в угловые скобки. Например: команда <Ьоау> обозна-
чает начало основного раздела документа. Многие теги сопровождаются соответст-
вующими закрывающими тегами, например тегом </Ьоау>, завершающим основной
раздел документа.
Но соответствующими закрывающими версиями обладают не все теги, поскольку
некоторые из них умеют закрываться и без них. Например, тег для отображения
изображения может выглядеть так: <1тд згс='ту1таде.зрд' />. Последние символы />
приводят к автоматическому закрытию тега. Было время, когда такая форма указа-
ния на самостоятельное закрытие выступала стандартом НТМЬ, но в силу очевид-
ности этой особенности у ряда конкретных тегов в конце концов окончание тега />
было решено сделать необязательным, ограничившись в таком случае просто угло-
вой скобкой >, что и будет использоваться в этой книге, хотя все браузеры поддер-
живают оба варианта.

Примечание

Требования версии НТМЬ, используемой для обработки данных и носящей на-
звание ХМЬ, намного строже, и при ее использовании, например, в ленте Кеа11у
81шр1е БупШсабоп (К88), самостоятельно закрывающиеся теги должны оформ-
ляться по всем правилам путем вставки слэша перед закрывающей угловой
скобкой.

Давайте посмотрим на стандартный документ шаблона НТМЕ5, показанный в при-
мере 1.1.

Пример 1.1

1.	<1РОСТЕРЕ Мт1>

2.	<Мт1 1апд="еп">

3.	<Ееас1>

4.	<теРа	сЪагзеР="иЕР-8">

5.	<МЪ1е>Му ЭДеЬраде</МЪ1е>

6.	</Ееас1>

7.	<Ьос1у>

8.	Му СопЕепЕ

9.	</Ьос1у>

10.	</ЪЕт1>

Здесь можно увидеть набор различных тегов, используемых для создания остова
НТМЬ-документа. С помощью тега <! ростере Мт1> веб-браузеру сообщается, что
это документ НТМЕ5, и это все, что нужно сделать, чтобы приступить к использо-
ванию НТМЕ5. Если же этот тег опустить, веб-браузер будет интерпретировать до-
кумент, используя правила НТМЕ4.

Можно заметить, что !ростере— самозакрывающийся тег (поскольку сопроводи-
тельный тег </!ростере> отсутствует), и поэтому следующая за ним строка не имеет
отступа. Хотя отступы не входят в перечень обязательных требований НТМЬ, их
использование существенно упрощает создание и обновление документов, а также
делает их более понятными для других специалистов. Поэтому в этой книге отсту-
пы используются повсеместно (во всех примерах НТМЬ, С88 и 1ауа8спр1).

Далее идет тег <ьст1 1апд="еп">, обозначающий начало НТМЬ-раздела документа, а
также уведомляющий браузер, что в нем будет использоваться английский язык.
Затем внизу, с отступом и внутри пары тегов <Ьеаа> ... </Ьеаа> (обозначающей
часть документа, известную как заголовок), следует указание на тип набора симво-
лов, который должен использовать браузер, т. е. и1Е8, а сам заголовок веб-
страницы заключен в пару тегов <Ш1е> ... </Ш1е>. Здесь также для других целей,
например, для совместного использования ключевых слов, описаний для поиско-
вых систем и т. д., могут использоваться и другие теги.

Затем следует тело документа, заключаемое в пару тегов <Ьоау> ... </Ьоау>, внутри
которого находится текст содержимого веб-страницы, и которое может (и наверня-
ка будет) содержать множество отдельно взятых разделов и разных типов тегов.
И наконец, раздел НТМЬ закрывается тегом </Мт1>.

Этого будет вполне достаточно для большинства читателей, но новички теперь уз-
нали почти все необходимое о создании НТМЬ-документов, разумеется, за исклю-
чением того, что есть также ряд других тегов, которые необходимо будет изучить
для создания высококачественных веб-страниц, но назначение этих тегов, когда до
них дойдет очередь, зачастую будет понятно из их названий. Если же нет — Ин-
тернет вам в помощь.

Атрибуты тегов

Понятно, что НТМЬ гораздо сложнее простой вставки набора тегов и текста, по-
скольку многим тегам следует предоставлять атрибуты. Возьмем недавно упомяну-
тый тег 1тд. Он, помимо способности к самостоятельному закрытию, служит при-
мером тега, принимающего атрибут. В данном случае это атрибут зге, или указание
местонахождение файла, из которого нужно извлечь изображение, отображаемое на
экране. Например, тег <1тд згс='ту1таде. зрд'> служит командой веб-серверу извлечь
файл ту1та§е.)р§ из текущей папки, а когда он будет получен, веб-браузер вставит
его в нужное место веб-документа.

А вот так может выглядеть ссылка на веб-сайт Сюо§1е: <а ЬгеГ=’Ьъър://доод1е.сот’>
щелкните на мне</а>. Здесь атрибуту ИгеГ предоставляется 1ЖЬ-адрес (универсальный
указатель ресурсов — ЦВЕ, или веб-ссылка), указывающий место назначения, на
которое должен быть нацелен веб-браузер, если щелкнуть на содержимом между
тегами <а> и </а>.

Атрибут стиля

Каждый НТМЬ-тег, в зависимости от его типа, может поддерживать широкий
спектр всевозможных атрибутов, но почти все теги поддерживают атрибут стиля.
Его применение — один из способов стилизации текстового (или другого) вывода.
Например, тег <р зЪу1е=’Гопъ-^е1д111::Ьо1с1’>полужирный текст</р> определяет часть тек-
ста, известную как абзац, которая будет отображаться полужирным шрифтом.

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

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

Итак, рассмотрев пару примеров использования атрибутов и убедившись в том, что
НТМЬ предлагает множество различных способов достижения одного и того же
результата, давайте перейдем к следующему разделу и посмотрим, что представля-
ет собой технология применения С88.

Знакомство с С88

Название «Каскадная таблица стилей» (Са8сас1т§ 81у1е 81тее1 — С8 8) и концепция,
стоящая за ним, связаны с отделением стиля веб-страницы от ее содержимого. Но
зачем это нужно? Давайте разберем пример удовлетворения потребностей человека
с ослабленным зрением, которому нужны более контрастные цвета и, возможно,
более крупные и легко читаемые шрифты.

Решить эту задачу без С88 можно, только создав альтернативные веб-страницы. А ес-
ли нужно подготовить страницы к печати? Зачастую распечатка веб-страницы без ее
изменения будет выглядеть неприглядно, при этом возникнет потребность изменения
порядка вывода части страницы на печать, изменения цвета и многих других ее пара-
метров, чтобы она лучше смотрелась на бумаге. А как вы считаете, стоит ли подумать
о возможности разного представления страницы в браузерах настольных компьютеров
или ноутбуков и мобильных устройств, а также ее подгонки под разные размеры экра-
на планшетов и телефонов? А с С88 для всего этого нужно только загрузить другой
набор команд стилей, вообще не касаясь при этом самой веб-страницы, и остается
лишь признать разумность и эффективность применения этой технологии.

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

Использование элементов зрап и сИу

Чтобы повысить эффективность применения С88, в НТМЬ были добавлены два
элемента: зрап и Оба они служат для выделения какого-либо раздела НТМЬ из
остального документа, но работают по-разному.
Элемент зрап обычно используется для изменения стиля букв, цифр и символов,
имеющихся в тексте. Он вместе с текстом перетекает от строки к строке и исполь-
зуется следующим образом: <зрап>Это часть текста в элементе зрап</зрап>. ЕСЛИ нуж-
но, в зрап можно заключать изображения и другие нетекстовые элементы, которые
по возможности будут плавно перемещаться вместе с текстом, хотя возможны и
неожиданные результаты, особенно если их размеры будут сильно отличаться от
размеров используемого шрифта.

А у элемента а1ч более широкое назначение: он превращает раздел документа в
блок. В отличие от зрап, он не встраивается в текст и не перетекает вместе с ним,
поскольку принимает форму прямоугольника, и все, что внутри элемента а1ч, рас-
текается и вписывается в его границы. Элемент а1ч может выглядеть так: <а1ч>это
часть текста в элементе с11ч</с11ч>.

Пока эти два новых типа элемента не станут использоваться для задания стиля,
разницы между ними можно и не заметить. Задать их оформление можно, предос-
тавив атрибут СТИЛЯ: <зрап з^у!е=’ Гоп^-метдМ :Ьо1а’>Текст, выделенный полужирным
шрифтом</зрап>, но добиться при этом желаемого разделения стиля и содержимого у
вас все равно не получится, и тут на первый план выходят другие основные части С88.

Использование атрибутов И и с1১

Для применения любых стилей к отдельно взятым элементам или группам элемен-
тов необходимо дать им либо уникальные имена, либо имена групп. В С88 это де-
лается с помощью атрибутов ы и с1азз. Например, при наличии на странице основ-
ного заголовка и желании применять к нему уникальные стили можно воспользо-
ваться атрибутом М: <М 1с1= ’ татпйеасГ >Добро пожаловать на мою страницу</Ы>.

Здесь в качестве значения атрибуту да было предоставлено название татпЬеаа. Вско-
ре будет показано, как к идентифицированным элементам можно будет получить
доступ из С88, но сначала давайте рассмотрим использование атрибута с1азз.
Предположим, что в документе имеется множество примечаний, и желательно
оформить их в едином стиле. Вот здесь и приходит на помощь применение к каж-
дому из них идентификатора класса, например: <зрап с1азз='по^е'>Это примеча-
ние*^/ зрап>.

После этого можно будет с помощью одной команды С88 изменять стиль каждого
примечания как стиль группы. Но прежде чем рассказать, как это делается, давайте
вернемся к той мысли, что НТМЬ и С88 позволяют вам подходить к веб-разработке
различными способами, поскольку вместо использования НТМЬ-тега заголовка ш
можно было бы воспользоваться зрап, а для примечания вместо тега зрап его текст
мог быть заключен в теги м или Ь2 или в любой другой НТМЬ-тег, состоящий из
двух частей, и т. д.

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

Поэтому лучше всего по возможности придерживаться использования элементов,
предоставляемых НТМЬ. Если создается заголовок первого уровня, поместите его в
тег ы. Или же, если создается что-то вроде примечания, для которого нет тега, его
лучше поместить в зрап (или, если это необходимо, в сИу) и предоставить понятное
описательное значение для названия его атрибута с1азз или 1а. Замысел состоит в
задании простоты и логичности и в использовании описательных значений атрибутов.

Использование таблиц стилей

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

Давайте сначала вспомним, как включать стили в документ, предположив, что все
заголовки первого уровня хочется отображать полужирным шрифтом размером 24 пт,
весь обычный текст — 14 пт шрифтом с засечками, а все примечания — курсивом с
использованием шрифта без засечек. Для этого стандартный шаблон НТМЕ5 из
примера 1.1 можно обновить, придав ему вид, показанный в примере 1.2.

Пример 1.2

1.	< ! ЭОСТУРЕ НШ1>

2.	<Мш1 1апд="еп">

3.	<Иеас1>

4.	СгпеЕа с±агзеЕ="и^1-8">

5.	<М'Ые>Му ЭДеЬраде<Д1^1е>

6.	<зЕу1е>

7.	Ьос1у	{

8.	ГопЕ-захе	:	14рЕ;

9.	ЕопЕ-ЕатНу	:	зегИ;

10.	}

11.	М {

12.	ГопЕ-захе	:	24рЕ;

13.	ГопЕ-меадЪЕ	:	Ьо1с1;

14.	}

15.	.поЕе	{

16.	1опЕ-зЕу1е	:	аЕаНс;

17.	ГопЕ-ЕатИу	:	запз-зегИ;

18.	}

19.	</з-Ьу1е>
20.	</Ъеас1>

21.	<Ьос1у>

22.	<Ы>Му СопРепР</111>

23.	<р>ТЫз 13 зоте РехР</р>

24.	<зрап с1азз=’поРе’>Апс1 Шз 13 а поРе</зрап>

25.	</Ьос1у>

26.	</ЬРт1>

Как видите, исходный стиль для тела документа был установлен в паре тегов
<з^у1е> ... </з^у1е> путем применения стилей к элементу Ьоау. Затем были при-
своены стили всем элементам ы, после чего были назначены стили всем классам с
именем поре.

Примечание

Следует помнить, что точка в таблице стилей, поставленная перед именем атри-
бута, означает, что правило применяется к классу. Чтобы правило применялось к
идентификатору с указанным именем, вместо точки перед именем идентифика-
тора можно поставить знак #. И, как показано в примере, без точки и без знака #
правило применяется к элементу с указанным именем.

Кроме того, таблица стилей может быть сохранена в текущей папке (или в каком-
либо другом месте), и для нее можно воспользоваться именем зру1ез.сзз. Тогда ее
можно хранить отдельно и придать ей вид, как в примере 1.3.

Пример 1.3

1.	Ьос1у	{

2.	ГопР-захе	:	14рР;

3.	ГопЪ-ГатНу	:	зегИ;

4.	}

5.	М {

6.	ГопР-захе	:	24рР;

7.	ГопР-^е1дЬР	:	ЬоЫ;

8.	}

9.	.поре	{

10.	ГопР-зРу1е	:	НаИс;

11.	Гоп’Ь-ГатНу	:	запз-зегИ;

12.	}

Теперь НТМЬ-файл можно сделать еще короче, чтобы он выглядел как в примере 1.4.

Пример 1.4

1.	< ! ЭОСТУРЕ ЬШ1>

2.	<Мт1 1апд=’’еп">

3.	<Ьеас1>
4.	Стека с±агзек="икГ-8">

5.	<Мк1е>Му ЭДеЬраде</Мк1е>

6.	<Ипк ге1="зку1езкеек" ИгеГ="з-Ьу1ез. сзз">

7.	</Иеас1>

8.	<Ьос1у>

9.	<Ы>Му Сопкепк</И1>

10.	<р>ТЫз 13 зоте кехк</р>

11.	<зрап с1азз=’поке’>Апс1 1Ыз 13 а поке</зрап>

12.	</Ьос1у>

13.	</Ькт1>

Все его отличие от примера 1.1 сводится к вставке в заголовок документа
следующей строки:

<Нпк ге1="зку1езкеек" ЬгеГ="зку1ез.сзз">

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

Примечание

Пока не стоит вдаваться в подробности, но теперь понятно, как можно загружать
таблицы стилей, и что, сообразуясь с размерами экрана и типом компьютера, на
котором работает браузер, можно решить, какую из нескольких предварительно
сохраненных таблиц стилей следует выбрать для загрузки. Это весьма действен-
ный прием, особенно если учесть, что основной НТМЬ-документ для отображе-
ния в бесконечном разнообразии стилей в дальнейшей модификации не нуждается.

Чем обусловлена необходимость применения

НТМЬ5 и С883

Все изложенное в главе до сих пор было нацелено на освежение в памяти основ
НТМЬ и С88 (или на ознакомление с этими технологиями, надеюсь, достаточно
подробное, чтобы позволить разобраться с материалом этой книги). И я уверен, что
предоставляемые ими возможности впечатляют. Так к чему же вся эта суета вокруг
НТМЬ5 и С883?

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

Всего пара строк на НТМЬ5 позволяет вставить аудио- или видеоклип. С помощью
одной или двух строк С883 можно трансформировать или анимировать текст, а
также создать в элементе холста самые невероятные веб-приложения и игры, кото-
рые ранее требовали сложного кодирования с помощью встроенных НазИ- или
АсбуеХ-элементов. Ранее все это отнимало уйму времени, и часто было сопряжено
с ошибками и проблемами безопасности.

Заключение

Элементы технологий НТМЬ5 и С883 больше не «лакомства» или расширения, до-
бавляемые к веб-интерфейсу, которыми могли воспользоваться лишь немногие
смелые разработчики. Теперь они полностью протестированы, отлажены и получи-
ли широкое распространение, и, если есть желание присоединиться к весьма дос-
тойным веб-разработчикам, необходимо полностью понять и освоить эти техноло-
гии, а также часто и умело использовать их во всех своих проектах.

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

Но давайте прямо в следующей главе начнем, как говорится, с истоков, и посмот-
рим, как совершенно бесплатно и без особого труда установить собственный стек
серверной и клиентской части веб-разработки, а также связанные с ним инструмен-
ты, позволяющие сразу работать с этой книгой и тестировать примеры (и свои соб-
ственные проекты), как будто они были выложены на реальный сервер разработки.
ГЛАВА 2

Установка веб-сервера

Вступление

Многие НТМЬ и С88 веб-разработки можно просто вести с использованием файло-
вой системы и обычного текстового редактора, похожего на блокнот. Но нужно ли
себя ограничивать при наличии многочисленных бесплатных инструментов разра-
ботки? К тому же ряд дополнительных функций веб-сайтов, например для приме-
нения технологии Азупсйгопоиз 1ауа8спр1 Апб ХМЬ (А1АХ) или же локального
хранилища и сооИе-файлов, требует запуска программных средств на веб-сервере,
и попытка их использования путем простой загрузки файлов из папки в веб-браузер
не увенчается успехом.

Поэтому приступить к использованию всех возможностей НТМЬ5 и С883 мы смо-
жем, только обладая обычной персональной Мас- или Ьишх-машиной, оснащенной
надлежащим набором средств разработки. Данная глава будет посвящена установке
веб-сервера для тестирования наших проектов, а в следующая — настройке интег-
рированной среды разработки с У18иа1 8Шбю Собе.

Не волнуйтесь, рекомендуемые программные средства совершенно бесплатны, лег-
ки в установке и использовании, поэтому не будут стоить вам ни денег, ни времени.

Структура

В этой главе рассматриваются следующие темы:

♦	Представление о АУ АМР, МАМР или ЬАМР.

♦	Порядок установки одного из этих средств в компьютер под управлением АУтбо\У8,
МасО8 или Ыпих.

♦	Сведения о корне документа и порядке получения доступа к нему.

♦	Сведения о хранении страниц для веб-обслуживания.

Цели

Изложенный в главе материал поможет установить на компьютер локальный веб-
сервер, позволяющий обслуживать НТМЬ с сопутствующими С88 (включая НТМЬ5
и С883), а также поддерживать сценарии на языке РНР для внутренних задач обра-
ботки, необходимые для некоторых примеров, приводимых далее в этой книге.

Представление о УУАМР, МАМР и 1_АМР

Веб-сервер гораздо интереснее, чем просто сервер. Он и сервер, и база данных, и
внутренний язык программирования. Широкую известность получило интегриро-
ванное решение под названием ААтбо\У8, Арасйе, Му8(^Е и РНР, а иногда еще и
РуЙюп или Рег1 (АААМР). На Мас-системе оно называется МАМР, а на 1лпих —
ЬАМР. Продукт, рекомендуемый в данной книге и доступный для загрузки по ад-
ресу Ъйр8://уууууу.татр.тГо, называется просто МАМР. Есть его версии для
\Атбо\У8, а также для компьютеров 1п1е1 или М1 МасО8. Далее в книге будут даны
инструкции по настройкам ЬАМР для Ьтих на тот случай, если предустановка это-
го средства в системе будет отсутствовать.

Примечание

Учтите, что книги могут не потерять свою актуальность долгое время, а веб-сайт
или сам продукт МАМР может существенно измениться или же стать недоступ-
ным. Но по ключевым словам АУАМР, МАМР или ЬАМР всегда можно будет
найти альтернативные варианты. Затем вместо приведенных здесь инструкций
нужно будет следовать тем, что изложены в новом источнике, но при этом ока-
жется, что там будут аналогичные функции, даже если их использование будет
изложено несколько иначе.

Установка под ААЛпс1оуу8

Программа МАМР поставляется в двух версиях: базовой и профессиональной. Ба-
зовая версия бесплатна, а позже при желании можно будет перейти и на профес-
сиональную. Чтобы загрузить МАМР для \Утс1о\У8, просто перейдите на сайт
Ьйр://уууууу.татр.1пГо и будете перенаправлены в раздел \Утбо\У8, где нужно бу-
дет щелкнуть на ссылке для бесплатной загрузки МАМР — Ргее МАМР с1о\\т1оас1,
на появившейся странице выберите МАМР & МАР РКО /ог ТУМспмз. На момент
написания книги текущей была версия 5.0.4, но для вас может быть показана более
свежая.

При щелчке по ссылке загрузки может появиться всплывающее окно с предложе-
нием загрузить приложение ААМО ОВ8 Арр. Его нужно проигнорировать, щелкнув
мышью за пределами этого окна, чтобы оно исчезло. Затем, если будет предложено
сохранить файл, выберите команду Кеер (Сохранить). Загрузка продолжится, для
версии 5.0.4 она будет иметь размер 742 Мб.
После загрузки нужно запустить программу установки, и, если на вашем компью-
тере нет среды выполнения .№1, вам поступит предложение ее установить. Если
так и будет, щелкните на кнопке ОК, и появится окно, похожее на показанное на
рис. 2.1.

Рис. 2.1. Установка среды выполнения .Ые1

Выберите 1п81а11 (Установить), разрешив тем самым продолжить установку. После
этого произойдет переход к экрану установки Матр (рис. 2.2). Для начала установ-
ки МАМР щелкните на кнопке Кех! (Далее).

При появлении показанного на рис. 2.3 запроса на установку Матр Рго и (или) Вощоиг
нужно убедиться, что ни в одном из этих полей флажки не установлены, поскольку
на этом этапе эти средства вам не понадобятся; если нужно, их всегда можно будет
добавить в другое время.

После щелчка на кнопке Кех1 (Далее) появится еще пара окон с запросом на согла-
сие с лицензией (щелкайте на кнопке Кех1} и вопросом, в какую папку вы желаете
установить МАМР (рекомендуется принять значение по умолчанию С:\МАМР и
щелкнуть на кнопке КехС), какую папку выбрать для автозагрузки (рекомендуется
оставить предлагаемую по умолчанию МАМР и щелкнуть на кнопке Аех/) и следу-
ет ли создавать значок на рабочем столе (рекомендуется установить соответствую-
щий флажок, а затем щелкнуть на кнопке Кех1). Наконец, вы доберетесь до экрана,
показанного на рис. 2.4, по мере готовности щелкнуть на кнопке 1п81а11 (Устано-
вить). После завершения установки, чтобы выйти из программы, можно щелкнуть
на кнопке К1п18к (Готово).
О 5е1ир - МАМР & МАМР РКО	-	X

\Л/е1соте ю МАМР & МАМР
РНО 8е1ир Ш|?агс1

ТЫз мН 1ПзЫ1 МАМР & МАМР РРО уегыоп 5.0.4 оп уоиг
сотриГег.

II: 15 гесоттепсЫ ГНаГ уои с1о5е а11 оПпег аррОсайопв Ьекэге
сопйпыпд.

СНск Йех! Ь сопйпие, ог Сапсе! Го ехЛ: ЗеГир.

1Н

МехГ >	| Сапсе!

Рис. 2.3. Устанавливать дополнительные компоненты на этом этапе не рекомендуется
\Мпс1о\л/5 Зесигйу А1ег1	X

Ъ| \Л/1пс1о\л/5 ОеГепс1ег ЕиеууаП Ьа5 Ыоскес! зоте Теайкез оНЫь
арр

Мгккмз ОеГепйег Рге^а! Ьаз Ыоскед юте (еашгез оГтуздИ.ехе оп а1 риЬк апд рпуаЬе
пейлюгкз.

'1’	Мате:	!пуздк1.ехе

РиЫзЬег:	Цпкпо^лп

Райи	С:Упатр^ж1^У5ч1Члп\т1у5дк1.ехе

А11оуу туздИ.ехе То соттипкаТк оп {Ьезе пеЪл’огкз:

0 Ргп/а1е пеЬл'огкн, зисЬ аз ту Ноте ог шогк пеЬлюгк

о РиЫк пеШюгкз, зисН аз ТЬозе п атрогТз апс1 саГез (по! гесоттепс!ес1
Ьесаизе 1Ьезе пеЬч'огкз оЙеп Науе НШе ог по зесигВД

УУИа!: аге йпе пзкз о^аНокппд ап арр ЖгоидН а Яге^аН?

Д11о'л ассезз Сапсе!

Рис. 2.5. Разрешите брандмауэру предоставлять доступ к Му8<ЗЬ и (или) АрасЬе
Теперь можно запустить программу, но даже без специального напоминания похо-
же, что некоторые компьютеры будут работать лучше, если их сейчас перезагру-
зить, что и следует сделать. После перезагрузки можно будет щелкнуть на значке
МАМР, который теперь должен появиться на вашем рабочем столе. При первом
запуске могут появиться от одного до нескольких всплывающих окон, показанных
на рис. 2.5. Они отправляются вашим брандмауэром с просьбой разрешить работу
Арасйе и (или) Му8рЬ.

Чтобы среда МАМР смогла работать, нужно в любом случае щелкнуть на кнопке
АПо\ч Ассе$8 (Разрешить доступ). Теперь, после разрешения доступа через бранд-
мауэр, среда МАМР должна заработать, как показано на рис. 2.6, где рядом с
Араске Зегчег и Му$Ок Зегчег появятся зеленые метки. А облачные функции, рек-
ламируемые в нижней части окна, вам не понадобятся.

© МАМР РИО	X +

С О © 1оса1ЬоЯ	К ☆	*	•

Ц)млмррко

ТИе VI гШа! 11051 шаз зе! ир зиссеБьТиНу.

К уои сап зее Ш1з раде, уоиг пеии у!гШа1 Нозг маз зе1 ир
зиссеззГиНу. Мои/, и/еЬ соп(еп1 сап Ье ас!с1ес1 апс! 1Ь1з р1асеНо1с1ег
раде1 зПои1с1 Ье гер!асес1 ог с1е1е!е<Г

Зегуегпате: 1осаИ1а51

ОоситепГ гооГ С;/МАМР/ПГйось

1 П1ез: хпдех *р1пр апс! МАМР-РКО- + рп§

□1езе 8е11е аиГ: РеЫзсН

Рис. 2.6. Разрешить доступ к Му$()Ь и (или) Арасйе

Работа с корнем документа

В файловой системе \Утбо\У8 всегда есть корневой каталог или папка. Практически
всегда в этой роли выступает С:\. Корневые папки других дисков — 0:\, еДит.д.
У веб-браузера есть аналогичный корневой элемент, называемый корнем докумен-
та. Им необязательно должен быть корневой каталог диска (да он и не должен им
быть по соображениям безопасности). Это самый высокий уровень расположения
файлов, к которому сервер будет предлагать доступ, и для разных веб-серверов (и
даже для разных установок одного и того же бренда веб-сервера) он будет нахо-
диться в разных местах.

Если при использовании среды МАМР предположить, что был принят вариант по
умолчанию, предложенный в ходе установки, корень документа можно будет найти
в с: \мамр\ьыосз (или же, если предпочтительнее использовать простой слэш, то в
С:/мамр/ьыосз, или весь путь можно даже будет указать строчными буквами, на-
пример: с:\татр\ЪЫосз ИЛИ даже с:/татр/ЪЫосз).

По умолчанию после первой установки корень документа будет содержать два
файла: тбех.рйр и МАМР-РКО-Ео§о.рп§. Доступ к их размещению можно полу-
чить через файловую систему, а находящиеся там файлы можно загрузить локально
прямо из вашего веб-браузера, введя в его адресную строку Ы1р://1осаШо81 (или
даже просто 1осаШо81). Результат по определению будет выглядеть, как на рис. 2.7.

МАМР

МАМР 5егуег$ Тоо1& С1оис1 Не1р

УН МАМР

Арасйе ®

Му5ОЬ Зеп/ег ®

С1оис1 О

С1оис1 Ореп М/еЬБГаИ раде 5Сор $еп/ег5

< С1оис1 РипсИоп |~~ {.еэгп госте	|

Ассе« уоиг Ной апс1 (1а1аЬа$е । виупол	I

На1а апуНте ап<1 апушНеге

Рис. 2.7. Отображение исходного файла тбех.рйр

При желании или же по какой-то иной причине можно воспользоваться 1Р-адре-
сами, зарезервированными на компьютерах для локального хоста, например:
йИр://127.0.0.1 или просто 127.0.0.1.

Если на экране появилось изображение, показанное на рис. 2.7, значит МАМР ус-
тановлен правильно и все программные средства: РНР, Му8рЕ и веб-сервер Арасйе
— должны работать. Теперь, убедившись в успешном завершении установки, нуж-
но удалить из корня документа два файла и поместить в него свои собственные
НТМЬ- и другие файлы (и любые необходимые вам подпапки), чтобы они сразу же
стали доступны для просмотра путем обновления экрана браузера или указания в
адресной строке локального хоста.

А теперь давайте все протестируем, удалив файлы тбех.рйр и МАМР-РКО-
Ьо§о.рп§, сохранив в этой папке следующий пример (с именем файла тбех.Ыш!) и
набрав в адресной строке вашего браузера 1оса1Ьо81

Пример 2.1

1.	<Мт1 1апд=”еп">

2.	<Ъеас1>

3.	<тека	скагзеГ=’’иГГ-8">

4.	<-ЫМе>Му ЭДеЬраде</к1Ме>

5.	</Иеас1>

6.	<Ьос1у>

7.	<Ы>Неу, 11: могкз!</Ы>

8.	</Ьос1у>

9.	</Шп1>

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

				
0 МуУУеЬраде	X	+		
с о	© 1оса1Ьо51		& ☆	* :

Неу, й ууогкз!

Рис. 2.8. Отображение на экране нового НТМЬ-документа

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

Но в любом случае, теперь можно переходить к изучению следующей главы, по-
священной установке второй части нашей среды разработки — У18иа1 8Шсйо Собе
ОТ М1СГО8ОЙ.
Установка под МасОЗ

Привет пользователям Мас-систем! Ваш компьютер при запуске веб-сервера ни-
чуть не уступает ПК по производительности, и вы можете воспользоваться той же
программой, которая была рекомендована для \Утс1о\У8 — МАМР. Это программ-
ное средство поставляется в двух версиях: базовой и профессиональной. Базовая
версия бесплатна, а позже, если захочется, можно будет перейти и на профессио-
нальную версию.

Чтобы загрузить МАМР для МасО8, просто перейдите по адресу
Ьир8://уууууу.татр.шГо, после чего должно состояться перенаправление в раздел
веб-сайта для МасО8, где нужно будет щелкнуть по ссылке для загрузки под назва-
нием Ргее МАМР Ао^п1оаА (Бесплатная загрузка МАМР), и на появившейся стра-
нице следует выбрать МАМР & МАР РКО для той версии Мас, которая у вас уста-
новлена (1п1е1 для МасО8 12.12 и выше или М1 для МасО8 11 и выше). На момент
написания книги текущей была версия 6.6, но вам может попасться более свежая.

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

После загрузки нужно будет установить файл с расширением .рк§, щелкнув по
ссылке на него, и тогда откроется окно, показанное на рис. 2.9 (при установленной
версии для процессора 1п1е1 оно будет выглядеть несколько иначе).

а

* 1п5(а11 МАМР & МАМР РАО 6.6 (Арр1е М1/агт)

УУе1соте То Фе МАМР & МАМР РАО 6.6 (Арр1е М1/агт) 1пв(а11ег

Уои мН Ье ФгоидК Фе песвэзагу 1о гпн1аП Ф15
зойшаге-

СопПпие

Рис. 2.9. Окно установки М1/агш МасО8
После щелчка на кнопке СопИпие (Продолжить) появится всплывающее окно с
просьбой принять условия; чтобы пройти дальше, нужно щелкнуть на кнопке А^гее
(Согласен). После этого скорее всего появится окно, показанное на рис. 2.10. Тогда
для продолжения установки вам придется воспользоваться сенсорным идентифика-
тором или паролем.

Как только установка завершится, можно будет перейти в папку АррНсаИопз (При-
ложения), где должен появиться только что установленный значок с надписью
МАМР, на который теперь можно нажать для запуска сервера. Это, вероятнее все-
го, приведет к появлению окна, показанного на рис. 2.11, в котором нужно будет
ввести свой пароль, чтобы получить возможность запускать и останавливать серве-
ры и другие функции.

1п$и11ег

1пвиНег 1а тгутд Ю пел хоТТл'аге.

ТоисЬ 10 о г егкег уоиг раязлог^ То
аПош 41 в,

и$е Ра55^0Щ...

Сапсе!

Рис. 2.10. Проверка ваших учетных данных для продолжения

МАМР

МАМР пеедз То 1аипсЬ 45 Ье1рег 1оо1 То
Ье аЫе (о 51аП ап4 зТор зегуегз, сНапде
изегз ап 4 изе с1ои0 ТилсГюпз.

Епгег уоиг раззлогс! Ю а11ож ТЫз.

КоЫп Ы1хоп

Сапсе!	ОК

Рис. 2.11. Для запуска вспомогательных инструментов введите свой пароль
После запуска вспомогательных инструментов появится главное окно МАМР, где
первым делом нужно будет в левом верхнем углу выбрать параметр Рге/егепсез
(Настройки), а затем щелкнуть на вкладке Рог1$ (Порты), где, как показано на
рис. 2.12, для порта Арасйе нужно указать число 80.

бепега! РоНз Зегуег С1оиб

АрасЬе РоН: 80|

(2 - 65535)

Ыд’тх РоН:

8888

(2 - 65535)

Му5О1_ РоН:

8889

(1024 - 65535)

2е1 \Л/еЬ & МуЗОЬ рогХз 1о:

МАМР де!аи11

80 & 3306

Сапсе!

ОК

Рис. 2.12. Изменение порта Арасйе на 80

Дело в том, что при вводе в веб-браузер адреса 1осаШо81 по умолчанию использует-
ся порт 80, поэтому именно его и нужно вводить, чтобы не пришлось вводить но-
мера портов при каждом вызове локальной веб-страницы.

Работа с корнем документа

В файловой системе МасО8 всегда есть корневой каталог или папка, доступные,
как правило, через слэш-символ, например /. У веб-браузера есть аналогичный ко-
рень, называемый корнем документа. В этой роли необязательно должна выступать
папка на диске корневого (или нижнего) уровня (и не должна быть таковой по со-
ображениям безопасности). В ней будут файлы самого высокого уровня, к которым
сервер будет предлагать доступ, и для разных веб-серверов (и даже для разных ус-
тановок веб-сервера одной и той же марки) она будет находиться в разных местах.

Для МАМР, при условии, что были приняты все значения по умолчанию, предло-
женные в ходе установки, корневой каталог документа можно будет найти по адресу
/АррПсаГГопз/МАМР/кЫосз.
Изначально после первой установки в корне документа будет находиться файл с
именем тбех.рйр. Доступ к местоположению корня документа можно получить
через файловую систему, а имеющиеся там файлы — загрузить локально из вашего
веб-браузера после ввода в его адресную строку Ы1р://1осаШо81 (или даже просто
1осаШо81). Исходный результат показан на рис. 2.13.

№1соте Го МАМР

И уои сап зее хГпз раде МАМР Ъаз Ьееп ргореНу согЖдигеа & 1аипсЬе<1 апд 1з поуу
аИ вег Го зегуе уоиг ууоЬ сопГепГ ТЫз р!асеКок1ег рада1 зКоо1й Ье гер1асей ог
де1еГед.

Зегуег©оймуапе' ЛрасЬе/2.4.46 (Ппхх) Ореп88Ь/1.0.2и РНР/7.4-21
®оН_«©д1/3.5 РуЫюп/2.7.18 пю4_^а8Ъсд1/то<1_^а5Ъсд1-5ЫАР-
0910052141 тоа_рег1/2.0.11 Рег1/У5-30.1

Зепгег пате. ХосаХНоес.

ОоситепГ гоо1; /Арр! хсаЪГопэ/МАМР/Ьъаосз

РгоГосок

РНР: 7.4.21

1 П1е: хпдех.ркр

О|еве ЗеЦеаи!: РеиГзсГ!

Рис. 2.13. Отображение исходного файла тбех.рйр

При желании или же по какой-то иной причине можно воспользоваться 1Р-адресами,
зарезервированными на компьютерах для локального хоста, например: Ы1р://127.0.0.1
или просто 127.0.0.1.

Если на экране появилось изображение, показанное ранее на рис. 2.7, значит,
МАМР установлен правильно и все программные средства: РНР, Му8рЬ и веб-
сервер Арасйе — должны работать. Теперь, убедившись в успешном завершении
установки, нужно удалить из корня документа файл и поместить в него свои собст-
венные НТМЬ- и другие файлы (и любые необходимые вам подпапки), чтобы они
сразу же стали доступны для просмотра путем обновления экрана браузера или
указания в адресной строке локального хоста.

А теперь давайте все протестируем, удалив файл шбех.рйр, сохранив в этой папке
код примера (с именем файла тбех.Ыш!) и набрав в адресной строке вашего брау-
зера 1осаШо81. Если все в порядке, в браузере появится изображение, показанное на
рис. 2.14.

И тогда вас можно будет поздравить с установкой МАМР на ваш компьютер. Если
же ничего не получится, еще раз внимательно прочитайте инструкции, приведен-
ные в главе, и зайдите на веб-сайт МАМР, чтобы получить дополнительную ин-
формацию.
@ Му УУеЬраде

X +

С О ® 1оса1Но51

@ :

Неу, й ^уогкз!

Рис. 2.14. Отображение на экране нового НТМЬ-документа

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

Но в любом случае, теперь можно переходить к изучению следующей главы, по-
священной установке второй части нашей среды разработки — У18иа1 81иЛо Собе
ОТ М1СГО8ОЙ.

Установка под Ыпих

Приветствую тех, кто использует Ыпих! У вас, как известно, все немного по-
другому, и вы, наверное, уже привыкли к установкам всех необходимых вам про-
граммных средств. Но, если набор программных средств под названием ЬАМР на
вашем компьютере не установлен, то из-за слишком большого количества различ-
ных версий операционной системы вам придется позволить установщику сделать
это за вас. А так как набор программных средств Хашрр поддерживает всевозмож-
ные версии, в том числе ПеЫап, КебНа!, СепЮ8, ЦЬипШ, Еебога, ОепЫо, Агсй,
8Ы8Е и многие другие, то именно им и рекомендуется воспользоваться.

Для этого перейдите по адресу Ы1р8://уууууу.арасЬеГг1еп(18.ог§/ и загрузите Ыпих-
установщик по вашему выбору (ориентируясь в основном на желаемую версию
РНР, или же, если есть какие-то сомнения, остановив свой выбор на 64-битной вер-
сии 7.4.27 или ее аналоге). Каждый установщик занимает около 150 Мб и имеет
расширение .шп. При установке 64-битной версии 7.4.27 файлы с таким расшире-
нием нужно запускать из ПЪипШ (и практически из всех других версий Ыпих) в
следующем порядке:

Откройте окно Тегшта!, перейдите в тот каталог, где был сохранен файл, и введите
следующую (или ей подобную, в зависимости от имени загруженного файла) ко-
манду, чтобы убедиться, что файл исполняемый:

сИгпос! +х хатрр-11пих-х64-7.4.27-1-1пз^а11ег.гип
А затем для запуска программы установки введите следующую команду:
гип хатрр-11пих-х64-7.4.27-1-1пзГа11ег.гип

Работа с корнем документа

В файловой системе 1лпих всегда есть корневой каталог или папка, доступные, как
правило, через слэш-символ, например, /. У веб-браузера есть аналогичный корень,
называемый корнем документа. В этой роли необязательно должна выступать пап-
ка в самом корне диске (и не должна быть таковой по соображениям безопасности).
В ней будут файлы самого высокого уровня, к которым сервер будет предлагать
доступ, и для разных веб-серверов (и даже для разных установок веб-сервера одной
и той же марки) она будет находиться в разных местах.

В случае использования Хашрр корень документа обычно находится в
/орШатрр/ьыосз/. Но поскольку доступ по записи в эту папку может быть открыт
только с гоо1-правами, вы можете создать символическую ссылку на ту папку, для
которой у вас уже есть права на запись, например на предварительно созданную
папку /Ьоте/меЬ/, для чего нужно будет запустить следующую команду:

1п -з /Иоте/меЬ /орГ/1ашрр/ЛЫосз/меЬ

Теперь можно будет сохранять файлы в папке /йошеАуеЪ, но получать к ним доступ
в веб-браузере по адресу 1оса1Ьо8€/луеЬ. Это, конечно, не лучшее решение, и, если
не хочется использовать поддомен АуеЬ вне локального хоста, вы можете научиться
создавать новый виртуальный сервер или изменять корень вашего документа. Но
данная книга не про 1лпих, и предполагается, что пользователи 1лпих с задачей
обеспечения надлежащей настройки своего веб-сервера способны справиться свои-
ми силами. А здесь приводятся простые рекомендации, помогающие, если это нуж-
но, приступить к предстоящей работе.

Заключение

Ну вот и все! Теперь самое сложное уже позади. В вашем распоряжении имеется
работоспособный веб-сервер, позволяющий запускать и тестировать все примеры
из этой книги без необходимости загружать их на удаленный рабочий сервер. Бла-
годаря этому работа будет идти быстрее, безопаснее и проще. Осталось только пре-
доставить вам в следующей главе достойный программный редактор, чтобы подго-
товить вас к роли настоящих мастеров НТМБ5 и С883.
ГЛАВА 3

У!8иа181ис1|о Сос1е

Вступление

Поскольку веб-страницы состоят в основном из текста, фактически для создания
даже самых динамичных и привлекательных веб-сайтов понадобится всего лишь
простой текстовый редактор. Но звучит это так, будто для создания великолепных
цифровых образов понадобится всего лишь Мгсгозой Рат1. Технически, если затра-
тить на художественные творения немыслимую уйму времени, все верно, но захо-
чется ли вам пройти этот путь?

Вот тут-то и выходит на первый план полностью бесплатный редактор У18иа1 8й1бю
Собе от компании М1сго8ой. Как правило, языки программирования от Мгсгозой
весьма мощные и авторитетные, а У18иа1 8й1бю Собе (далее будем называть его У8
Собе) под стать им — мощный редактор, но при этом весьма простой и интуитивно
понятный в использовании. Эти его качества стали настолько очевидны, что У8
Собе, похоже, становится чуть ли не фактическим стандартом для программирова-
ния и веб-разработки.

Структура

В этой главе рассматриваются следующие темы:

♦	Оценка потенциала У8 Собе.

♦	Изучение приемов установки У8 Собе на компьютер.

♦	Изучение способом загрузки и редактирования файла в У8 Собе.

♦	Порядок доступа к интерактивной среде редактирования, предлагаемой У8 Собе.

Цели

После изучения главы и выполнения всех рекомендуемых действий у вас будет ус-
тановлен, готов к применению и освоен мощный редактор программного кода У8
Собе, позволяющий упростить веб-разработку и существенно повысить ее эффек-
тивность по сравнению с использованием обычного текстового редактора.
Популярность У8 Соде

В чем секрет популярности У8 Соде? Дело в том, что он быстрый, качественно
спроектированный, с широкими возможностями настройки, предлагает удобные
функции, например, редактирование с несколькими курсорами, разумное распозна-
вание параметров, четкое форматирование кода и многое другое. Его использова-
ние ускорит цикл разработки почти для всех пользователей, особенно после того,
как он распознает используемый вами язык (даже если это НТМЬ или С 88) и ус-
лужливо предложит, что вводить по мере набора текста. Как только вы освоитесь,
он станет волшебным помощником, пребывающим всегда на шаг впереди вас. Сто-
ит только взглянуть на У8 Собе, работающий, как показано на рис 3.1, под управ-
лением АУшс1о\у8, и сразу станет виден весь расклад предлагаемых настроек. Здесь
используется темная тема, поскольку она может быть приятнее для глаз при дли-
тельных сеансах работы, но выбрать можно любую желаемую.

1 РИе ЕдЯ 5е1есйоп	6о Нмп Теггтнпа! Не1р 1пдех.Ыгл1 - ХЛзиа! ЗпмЯо С..	—	□ X

<> 1пдех.Ыт1 X	Ш *"

С: > МАМР > Ыдосз > <> 1пдех.Ыт1 > Ыт1 > 0 Неад > Ф 1Н1е > ^ ?

1 <Ыгт1 1ап§=”еп">

2 <ЬбЗС1>

3	| <те!а сЬаг5е1='’и1Г-8">

4 <1Ше>Му ИеЬра^е

5	</Ьеад>

б	<Ьоду>

<Ь1>Неу, 11 когк51</М>

8	</Ьоду>

9

10

Рис. 3.1. Редактирование НТМЬ-файла в У8 Собе

Обратите внимание, что в строке 4 после текста ММе видна левая угловая скобка —
<, а затем был набран символ слэша— /, а У8 Собе предоставил закрывающую уг-
ловую скобку, в которой была явная потребность, после чего выдвинул наиболее
удачное предположение о том, что в эти угловые скобки правильнее всего было бы
впечатать /мме.

Теперь осталось только нажать клавишу ТаЪ или Еп1ег, или же переместить курсор на
следующее редактируемое место, и автоматическая вставка будет принята. Кроме того,
чуть выше кода НТМЬ можно заметить, что У8 Собе проанализировал, где находится
курсор в документе, и показывает уровень вложенности в этой точке. Разве можно оп-
ровергнуть, что это весьма разумно и может сэкономить уйму времени?

А что еще лучше, У8 Собе доступен для всех операционных систем: У^тбо\У8, Ма-
сО8 и Ыпих. Итак, посмотрим, как этот редактор можно будет скачать и установить
для каждой из операционных систем.
Установка У8 Сос1е под Мпс1оуу5

Перейдите по адресу Ьйр8://собе.У18иа18€иб1о.сот/, щелкните на ссылке О(шп1оа(1
(Загрузить), а затем выберите загрузку, подходящую под вашу версию АУтбо\у§.
Загрузка должна начаться автоматически, и одновременно с ней в окне браузера
появится вспомогательная страница СеШп^ 81аг1ес1 (Начало работы), предназначен-
ная для ознакомления с функциями редактора в ожидании его загрузки. На воз-
можный запрос о продолжении загрузки или об отказе от нее нужно выбрать Кеер
(Продолжить).

После загрузки щелкните на кнопке запуска установщика, активируя установку, и
примите лицензионное соглашение, установив правильный флажок, как показано
на рис. 3.2, а затем щелкните на кнопке ^еx^ (Далее).

- М1СГ050ГС 5шбю Со^е (б^ег)

Цсеп^е Адгеетеп!

Меазе (Ье Ыо’Л'пд трсг1ап1 тЬппаЬоп ЬеЬге сопйгчлпд,

Иеазе геа<11Ье иселее АдгеетелЬ Уои шиЛ аосер! Нпе ЪеггпБ о Г	адгеетеп! ЬеТоге

сопйлигпд 1Ьё 1п$*а11аЬог|.

ТЛ« Асепзе оррНез Го Г/?? И'зиа/ Сог/е ргос/исГ. $оигсе Сос/е /Ьг

$ГисА'о Со0е С5 оквсТШе а Г /1 ГфдУ/д ; Г/шЬ. со т/Мё его; о Д/уз со еУе ипс/ег ГЛе МГГ
/нгеп^е одгеетелГ оГ

/1	со т/т/с го 5 о #/У5со с/е/^/о то т/НСЕЛ/5Е ГхГ. АддШопа!

(кепзе т/огтаМоп сап Ье /Ъипд т оиг ЕАО аГ

Ь	.7/со де. т па & Гел# о. со т/д о С5 Аал о о гй п а//а с?.

М1СЯО5ОГГ ЗОГПЛГАЯЕ ЫС Е1Ч8Е ТЕ КМ5

М1СЯО5ОЕТ УКЦАк 5Т1Ю10 СООЕ

ОI ассер!: Йпе адгеетегй

ОI с1о поГ ассер!: адгеетеп!

Ыех! >	] Сапсе!

Рис. 3.2. Для продолжения установки нужно принять соглашение

Затем, как показано на рис. 3.3, вам будет предложено установить флажки для соз-
дания значка на Рабочем столе, а также для добавления пункта Ореп ууШг Сос1е (От-
крыть с Собе) в контекстное меню Проводника, для регистрации Собе в качестве
редактора для файлов поддерживаемых типов и для соответствующей настройки
глобальной переменной ратн, где уже будут установлены все рекомендуемые флаж-
ки (с чем нужно будет согласиться, за исключением флажка у ратн, установка кото-
рого потребует перезагрузки компьютера, и не окажет никакого влияния, по край-
ней мере, на начальном этапе работы).

>^5еГир - Мкгозой Усзиа! Соек (Ьзег)

5е1ес1 ДсЫЛюпа! Та^кл

УУЫсЬ айййопа! йзкз зК&Эй Ье регЬппаР

&г1ес! Ше аскЛ'Ьопа! Ьэзкг уоо Кке 5е1цр Ш ретбогтю мЫе пзШШпд У1зиа1 $ШЬо Соек, Шеп сЬск
Иехй

Ас1сН}опа1 когв:

О Сгеа1е а с1е5кйзр коп

ОШег:

О Ас1с1 тОреп 'лпШ Сос1е’ аейоп йз У|/1пс1о'л|з Ехр1огег ГНе сопйех!: тепи

3 Ас1с1 гОреп 'лчШ Сос1е' аейоп йз \ЛГпс1оюз Ехр1огег ейгеейогу сопйехй тепи

8 Дед15йег Сос1е аз ап есПйзг йог зиррогйес! Й1е йурез

О Ас1с1 йо РАТН (гедыгез зНе11 гез^гй)

< Васк Ыехй >	Сапсе!

Рис. 3.3. Установите флажки рядом с нужными настройками

Для продолжения щелкните на кнопке №ех1 (Далее), чтобы открылось главное окно
установки, где для ее запуска нужно будет щелкнуть на кнопке 1п$1аП (Установить).
Установка не займет много времени, и по ее завершении для выхода из установщи-
ка и запуска программы, если установлен флажок, предлагающий это, можно будет
щелкнуть на кнопке Р'гпгзИ (Готово). В первую очередь нужно будет, как показано
на рис. 3.4, выбрать пункт меню Не1р (Помощь), а затем щелкнуть на пункте Ес1Иог
Р1ауугоипс1 (Интерактивная среда редактора).

Это своеобразный интерактивный документ, позволяющий изучить все 10 основ-
ных областей использования У8 Собе. Чтобы после знакомства с У8 Собе и его
возможностями приступить к редактированию, можно набрать в окне редактора
код примера 3.1, или же, если вы загрузили прилагаемый к книге набор файлов
примеров, можно воспользоваться для загрузки пунктом меню ГИе (Файл), или
просто перетащить показанный ниже текст примера 3.1 в окно У8 Собе.

Пример 3.1

1.

2.

<Мш1 1апд="еп">

<Иеас1>
3.	Стека	с±агзек="икГ-8">

4.	<к1к1е>Му ЭДеЬраде</к1к1е>

5.	</Иеас1>

6.	<Ьобу>

7.	<Ы>Неул 1к жэгкз!</Ы>

8.	</Ьобу>

9.	</Ъкт1>

'1 Й1е ЕсШ 5е1₽сйоп	Ба Яип Тегтша! Н₽1р ЕйЯог Р|аудгоипи- 7^а1 аиЛо Сойе —	□ X

>9 ЕсИюг Р1аудгоипй X	Ш

1гкегасЖ/е Ес1ког Р1аудгоипс1

ТЬе саге есШог т У5 Сас1е '$ раскос! мЖ ^эШгде. ТЫ$ раде ЫдМдНЬ а питЬег о! Шет эпс! 1еиуои !п1егас1!\ге1у Игу 1Нет оиЬ
ЖгаидЬ Же и$е о! а питЬега<етЬеск1ес1 есШагь. Рог Ги11 о!еЫь оп Же еййогкетигеь ЖгУЗ Сск1е апс! таге Неа^ оуег «о аиг
сЬсигпепШгоп.

•	ЫШ-сигаог ЕйШпд - Ыоск 8е1ес(юп, $е1ес1 а11 оссиггепсез, ас!б адйЛюпа! сигзогз апй тоге.

*	кп№11!5еп$е - дегсм!е азд&апсе апс1 рагатегег оддшйЬге Тог уоиг сойе апй ехгета! то^и1ез.

*	Ыпе Ас11о1ъ - яшск!у таие Нпез агоилсЗ го ге-огйег уоиг сойе.

*	Йена те КеГасЮппд - ди!ск1у г тэте зутЬокасгозз уоиг сос!е Ьазе.

	Гогшаитд - кеер уоиг сос1е I оок I пд дгеаг лйЬ । п Ьш П с1 оси тем & 5е1ес1юп ЬгтаЖлд

•	Сойе ЕЫЫпд - Ьсиа оп Же тоз! геЗеуап! раггз о^уоиг сос1е ЬуЬкЯпд оЖег агеаз.

•	ЕггогзалР ^агп1пдз - зее еггогз апй ^аттд азуои 1уре.

	Бгнррегз - зреп<1 <езь Йте 1ур1пд илЖ зп!ррегз.

-	Етте( - (Медгагей Еттег зирроп ъакез НТМ1 апс1 С55 есГг(1пд (о Же пех( 1еуе1.

 1ауэ5спр[ Туре СЬеск1пд - р-егТо гт гуре скесИпд оп уоиг )ауа5спрг Л1е изтд ТуреЗспримЖ гего сопйдигайоп.

Ми1И-Сиг$ог ЕРкюд

1ктд ти!(|р!е сигзогз аНонзуои 1о есП1 ти11|р1е рагГз о! Же рпгитеп* ай опсег дгеаНу 1гпргоутд уоиг рг□сIис^^V^^у. Тгу Же
кэ1(о№пд ас(|опз т 1Не Сос1е Ыаск Ье1о\лг

Рис. 3.4. Использование 1п1егасйуе ЕсШюг Р1ау2гоипс1 (интерактивной среды редактора)

Установка У8 Сос1е под Мас08

Установить У8 Соде на МасО8 очень просто. Нужно перейти по адресу
Ьйр$://сос1е.У1$иа1${ис11О.сот/, щелкнуть на ссылке й(шп1оа(1 (Загрузить), а затем
выбрать версию загрузки для Мас. Загрузка должна начаться автоматически, и од-
новременно с ней в окне браузера появится вспомогательная страница СеШп^
81аг1е(1 (Начало работы), предназначенная для ознакомления с функциями редакто-
ра в ожидании его загрузки.

У загруженного файла будет расширение ./1р. Чтобы его разархивировать, нужно
просто выбрать место его загрузки, которое обычно находится в папке О(шп1оа(18
(Загрузки). Добраться до этого места можно с помощью проводника Етбег, выбрав
пункт Со (Перейти), а затем Оо^п1оас18 (Загрузки). Теперь нужно запустить файл
.Х1р точно так же, как любой программный файл, и содержимое будет извлечено в
файл с именем У18иа1 8Шс1ю Собе (рис. 3.5).
К1пс1

ДгОгор

Яесеп^э

АррПса(шп5

0 УЫа1 5Гис№ Сойв

|| 78Сойе-йа™1п-и п№геа I. г1р

• МАМ Р^МАМР^РЯ Ск66-М1-агт.р>сд

472. Э МВ АррИсаОол

[к№п1оайз

Ю1вуЙ ОгГуе

□ Роеитен(8

1^1 0озк1ор

5Нагей

№№огк

<? 0

ДЕ1й1ас1

Тсйяуаг 15=49

179.3 М0 ДР а 1тп IV®	Тсаау ат 15=46

482.4 МВ 1гв1а,1е_ аскадв 10 Лап 202Й аг 16:4Й





Рис. 3.5. Извлечение файлов из загруженного 71Р-файла

Код У8 Соде можно запустить прямо отсюда, но все же лучше открыть другое окно
проводника, выбрав в строке меню пункт РИе (Файл), а затем Ре\\' Ртс1ег ]Р1пс1о\\?
(Новое окно Ртбег). Теперь нужно выбрать пункт Со (Перейти), а затем пункт
АррПсаИопз (Приложения), чтобы из нового окна перейти в папку АррНсаИот
(Приложения), и перетащить файл У18иа1 8йк1ю Собе из папки Роууп1оа(Р (Загруз-
ки) в папку АррПсаИопз (Приложения).

*и)$иа1 5ГиД1о Соде" 1з ап арр
боу/п1оадед Ггот гЬе 1тете1.
Аге уои &иге уои шат 1а орел й?

соде. VII и а1з1и дю. сот

Ореп

5Ьо« У№Ь Раде

Сапсе!

Рис. 3.6. Может открыться окно с предупреждением о запуске У8 Собе

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

В первую очередь нужно будет, как показано на рис. 3.7, выбрать пункт меню Не1р
(Помощь), а затем щелкнуть на пункте ЕсШог Р1ау%гоипс1 (Интерактивная среда ре-
дактора). Это своеобразный интерактивный документ, позволяющий изучить все 10
основных областей использования У8 Собе.

* * *

гР| 41 ЕгЯТОг Р1аудгоипб X	Ш

Негасйуе ЕсШог Р1аудгоипс1

ТТе соге есИТОг 1п 75 Собе & расЛеб	ТОаСигез, раде а питЬег о! №ет апб	уои тТОгасПуе1у |гу ТОет о и!

хЬгоидП	иеео! а питпЬет о? атЬвбйя! «Итоге. Ког Ги11 батаНз оп !Нв «ЯТОг (еатогез ТОг 75 Собе апб тоге Ьааб оц« ю оиг

Г. боситепииоп

•	- Ыоск зе|ёсЬоп(	аН рсоигтелёез, асН абдШоМ сигзогз апй тоге.

“	- де! собе а551зТОпсе апб рагатеТОг зиддезНопв ТОг уоиг собе апб ехТОгпа! тоби)е5

•	- л с 11ОП5 - дшск!у тоуе Нпез агоиМ ТО ге-огбог уоиг собе,

•	те Г<гГ'Лпппг - дшск1у гепате зутЬо1з асгозэ уоиг собе Ьазе.

•	... - кеер уоиг сабе }оак1пд дгеа! улТО тЬЫИ босител! & ?е1ес!1ол ТОгтаИтд.

	- ТОсиз ог ТОе то?! ге1емап1 рагТО оГ уоиг собе Ьу (окЯпд оТОег агеаз

•	лб .. । л1пф - §ее еггагз апб адагптд аз уои !уре.

•	г.|ррг - _ зрепб 1езз Ите !ур1пд УлТО згНрре^з.

*	э! - >пТОдгэ!еб Етте! киррог! ТОкез НТМЬ апб С55 еб№пд ТО ТОе пех! 1еуе1

*	- регТОгт гуре сВеск1пд оп уоиг ЛауаЗспрг М)е изтд ТуреЗспр! мй зего сопИдигабоп.

@ Ми1й-Сиг8ог ЕсИИлд

ийпд гпиП(р1е сигаогз зПо^е. уои то ебИ тиЙ<р1а рагто о! ТОе боситем а! алее, дгеахСу (гпрго'ллд уоиг ргобисМу. Тгу ТОе
‘ и	ТОНоуутд асНопз т 1Ке собе Ыоск Ье1с\>

® ОЛ 0	Й3 О

Рис. 3.7. Использование 1п1егасбуе Ебйог Р1ау§гоипб (интерактивной среды редактора)

Чтобы после знакомства с У8 Собе и его возможностями приступить к редактиро-
ванию, можно набрать в окне редактора код примера 3.1, или же, если вы загрузили
прилагаемый к книге набор файлов примеров, можно воспользоваться для загрузки
пунктом меню ЕИе (Файл), или просто перетащить текст примера 3.1 в окно У8
Собе, как показано на рис. 3.1 в начале главы, и, хотя там речь шла о версии для
АУшбо\у$, от версии для Мас код практически ничем не отличается.

Установка 78 Собе под Ыпих

У8 Собе также вполне подходит для ПК под управлением 1лпих и поддерживается
всеми разновидностями этой операционной системы: ВеЫап, ПЪипШ, Кеб На1, Ее-
бога и 8178Е (и, возможно, многими другими). Теперь, как и при установке ЬАМР,
сам факт использования вами операционной системы Ыпих уже говорит о нарабо-
тайной привычке использования при установке различных программ командной
строки.

У8 Соде так же прост в установке, как и любое другое программное средство, и
поставляется в версиях установщика . аеь и . грт, а также в версиях для различных
чипсетов. А Ыпих-новичкам можно пояснить, что способ установки файла . аеЬ в
дистрибутивах Етих типа ЭеЫап заключается в вводе следующей команды (где
следует указать имя того файла, который был загружен):

зис!о с!ркд -1 сос!е_1.63.2-1639562499_атс164 .с!еЬ

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

грт	сос!е-1.63.2-1639562596 .е!7 .х86_64 . грт

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

После установки У8 Собе первым делом нужно будет, как показано на рис. 3.7 (в
разделе Установка УЗ Сос1е под МасОЗУу выбрать пункт меню Не1р (Помощь), а
затем щелкнуть на пункте Е(Шог Р1ауугоип(1 (Интерактивная среда редактора). Это
своеобразный интерактивный документ, позволяющий изучить все 10 основных
областей использования У8 Собе.

Чтобы после знакомства с У8 Собе и его возможностями приступить к редактиро-
ванию, можно набрать в окне редактора код примера 3.1 (из раздела Установка УЗ
Соде под УУМомУу или же, если вы загрузили прилагаемый к книге набор файлов
примеров, загрузить код примера оттуда, или просто перетащить текст примера 3.1
в окно У8 Собе, как показано на рис. 3.1 в начале главы, и, хотя там речь шла о
версии для \Утбо\У8, от версии для Етих код практически ничем не отличается.

Примечание

Чтобы ничего не усложнять, для приводимых в книге снимков экрана была вы-
брана только одна операционная система, поэтому далее снимки будут отно-
ситься к работе под \Утбо\У8, так как именно эта операционная система наибо-
лее востребована разработчиками, но в любом случае это мало что меняет.

Начало работы с УЗ Сос!е

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

Если помните, в главе 2 «Установка веб-сервера» предлагалось установить систему
МАМР, и в \У1пбо\У8 по умолчанию корневым каталогом документа будет
С:/мамр/ьыосз. В МасО8 им будет /АррПсакГопз/мдмр/ъыосз, а если устанавливался
Хашрр в Ыпих, то обычно корневым каталогом будет /орШатрр/ьыосз/ или же бу-
дет использоваться символическая ссылка, которую вам предложат сделать для не-
го: /Ъоте/меЬ.

После копирования всех файлов примеров в оговоренное место там должна поя-
виться подпапка Ехашр1е8, содержащая названия из ссылок на различные разделы и
главы данной книги, а файлы примеров будут находиться в подпапках этих папок.
Чтобы проверить при работающем веб-сервере, так ли это, нужно просто набрать в
адресной строке браузера 1оса1Ьозг, и просмотреть все примеры.

Затем этот корневой каталог документа можно будет использовать в качестве до-
машнего каталога в У8 Собе, выбрав в меню пункт РИе (Файл), после него пункт
АМ РоШег 1о УУогкзрасе... (Добавить папку в рабочую область) (как показано для
версии под \Утбо\78 на рис. 3.8), а затем в предоставленном диалоговом окне вы-
бора файла, указав на корневую папку документа. При этом может появиться во-
прос о том, доверяете ли вы авторам файлов, находящихся в этой папке, на который
следует ответить Уе$ (Да).

| РНе	5е1есйоп Укеуу Со Йип Теггпюа! Не1р Цп!|1!1ей1 (УУогк^расе) - У|5иа1йисНо Сос1е — П X

Мем Н1е	СЫ+1Ч

Орел Н1е.,_	СЫ+О

Орел ГоИег...	СЫ+КСГН+О

Орел Жгкзрасе йот

Орел ПеселГ	>

Аг1с1 Еа1с1ег То УУогЬрасе.,.

УУогкзрасй Аз...

Оир{(са1е УУог&расе

Рис. 3.8. Добавление папки в рабочее пространство У8 Собе

Теперь все готово к загрузке примеров и работе с ними. Нужно выбрать еще раз
пункт меню РИе (Файл) и загрузить из папки 8есбоп_1/03 файл ехашр1е_01.Ыш1.
Результат должен быть таким, как на рис. 3.9.

Теперь можно поработать над тем, что по своей сути представляет простую обо-
лочку веб-документа. Перейдем к строке 8 файла и просто для наработки практики
добавим еще немного кода НТМЬ в следующие строки:

<р>Неге 13 а рагадгарЪ о Г аскПМопа! ГехГ ^изГ Го ргасЫсе изтпд
73 Сос1е Гог есНМпд с!оситепГз. </р>
I Я1е Ес1И 5е^ес1юп	ехатр1е_0Шлп| - ИпШес! („Р	—	□ X

<> ехатр1е_01Л1т1 X	Ш

Нскэс5 > Ёхатр1е5 > 5есГ(0П_1 > 03 > <> ехатр^_01Нт1 > йЗМт1

1	1ап§="еп"||

2	<йеас1>

3	<теГа сЬаг5е!:=||и(:Г-8,'>

4	<т1е>му иеЬраее</Г11:1е>

5	</ЬеасЬ

6	<Ьос1у>

<Н1>Неул зЛ могкз!</М1>

8	</Ьойу>

9	</КГп11>

10

Рис. 3.9. Редактирование кода примера из этой главы

Теперь даже без сохранения файла можно загрузить документ в используемый вами
браузер в режиме отладки, нажав клавишу Г5. Или же, если нужно просто загру-
зить документ без отладки, следует применить комбинацию клавиш С1г1 + Р5. Лю-
бой из этих вариантов можно выбрать из меню запуска.

Если в системе установлено более одного браузера (например, Сйгоше и Еб§е в
У^шбо\У8), то при первой попытке может быть предложено выбрать один из них.
После этого выбранный браузер будет запускаться по умолчанию.

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

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

Полную документацию обо всех возможностях У8 Собе с ответами на все вопросы
можно найти по адресу: Ъйр8://собе.У18иаШиШо.сот/с1ос8.

Заключение

Мои поздравления! При изучении предыдущей главы была установлена среда
А^АМР, МАМР или ЬАМР, а при изучении этой — редактор У18иа1 8Шбю Собе, и
теперь все практически готово для начала работы со всеми последующими приме-
рами. Но в следующей главе нужно будет сделать еще один шаг — узнать порядок
использования встроенной консоли разработчика вашего веб-браузера, позволяю-
щей легко проверять и отлаживать ваш код.
ГЛАВА 4

Консоль разработчика

Вступление

Помнится, в прежние времена при веб-разработке, особенно при применении сти-
лей с использованием С88 (или же расширенных функций С883), или же, возмож-
но, при вставке кодового фрагмента 1ауа8спр1 или функций НТМИ5, было нелегко
понять, что при этом происходит, отследить какие-либо странные результаты или
необычные ошибки. Чтобы выправить ситуацию, была создана консоль разработ-
чика. С ее помощью можно просматривать все элементы блочной модели связки
НТМЕ-С88 до мельчайших подробностей и даже отправлять информацию на кон-
соль при загрузке страницы или выполнении сценария 1ауа8спр1.

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

Структура

В этой главе рассматриваются следующие темы:

♦	Сведения о консоли разработчика и ее назначении.

♦	Чем различаются консоли разработчика.

♦	Приемы вызова консоли в браузере.

♦	Подготовка к отладке своих проектов с помощью консоли.

Цели

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

В прежние годы помочь в отладке программ непосредственно из среды браузера
могли различные приемы (изначально — просто вызовы функции Доситепъ.мглЛеО
для отображения значений переменных), но теперь ситуация существенно упрости-
лась и приобрела стандартные формы, особенно с тех пор, как основной исходный
код веб-браузера Ооо§1е Сйгоше (ставшего мировым лидером) теперь включен во
многие другие браузеры, в числе которых Мтсгозой Еб§е и Орега.

В конкурентах остались только два других основных веб-браузера: МохШа ЕпеГох и
8аГап от Арр1е. Если усреднить разнящиеся показатели популярности браузеров,
полученные от разных мониторинговых организаций, получится, что Ооо§1е
Сйгоше занимает около 60% рынка, 8аГап — 20%, Еб§е — 4%, ЕпеГох — 4%, ин-
тернет-браузер 8аш8ип§ — 3%, Орега — 2%, и около 7% — все остальные вместе
взятые браузеры.

С учетом этого, а также по факту доступности Ооо§1е Сйгоше почти на всех плат-
формах, этот браузер используется в данной книге по умолчанию, но в табл. 4.1
показано, как можно вызвать консоль разработчика в большинстве популярных
браузеров. При желании консоль разработчика в большинстве браузеров можно
вызвать из их меню. Как видите, на ПК обычно используется одна и та же комби-
нация клавиш, а в МасО8, как следует из той же таблицы, обычно есть два разных
способа вызова консоли в зависимости от используемого браузера.

Таблица 4.1. Комбинации клавиш для вызова консоли разработчика

Браузер /  Операционная система	УУш(1оуу$ / Ыпих	Арр1е МасО8
Ооо§1е Сйгоше	8Ый + Сй-1 + I	Орйоп + 56 + I
Арр1е 8аГап	(Не применяется)	Орйоп + 56 + С
М1сго8ой Ес1§е	8Ый + Ог1 + I	Орйоп + 56 + I
РпеГох	8Ый + Ог1 + I	8ЫЙ +	+1
Орега	8ЫЙ + сет! + I	Орйоп + 56 + I

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

Посмотрим, к примеру, на рис. 4.1. Это копия экрана, полученная при использова-
нии Сйгоше под \^1П(1о\У8, где в весьма простом и кратком веб-документе из приме-
ра 4.1 используется холст НТМЕ5 для рисования в цвете множества Мандельброта.
Рис. 4.1. Консоль разработчика СЬгоше открыта
и отображает информацию о документе

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

Примечание

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

1.	СЮОСТУРЕ ЬРт1>
2.	<ЬРт1 1апд=’’еп">
3.	<Ьеас1>
4.	<теРа сЬагзеР="иРР-8">
5.	<Р1Р1е>Мапс1е1ЬгоР</Р1Р1е>
6.	</Ьеас1>
7.	<Ьос1у>
8.	Ссат/аз 1с1='сапуаз ’ ></сапуаз>
9.	<зсг!рр>
10.	сат/аз	= (ЗоситепР. деРЕ1етепРВу1с! (’ саггуаз ’)
11.	сопРехР	= саггуаз. деРСопРехР (’ 2с1 ’)
12.	IV	= 640
13.	Ь	= 480
14.	сат/аз .ш!с1РЬ = IV
15.  16.	сат/аз. ЬеРдЬР = к
17.	7 = 16
18.	у = 0
19.	гт = -2
20.	гх = 1
21.	1х = 1.35
22.  23.	1т = -1х
24.	Рог (1 = 1т ; 1 <= 1х ; 1 += (1х - 1т) / к, ++у)
25.	{
26.	Рог (х = 0, г = гт ; г <= гх ; г += (гх - гт) / IV)
27.	{
28.	Рог (х1 = г, у1 = 1, ] = 0 ; ] < 2 ; ++з)
29.	{
30.	хзд = х1 * х1; узд = у1 * у1
31.  32.	1Р (хзд + узд >4.0) Ьгеак
33.	у1 = 2 * х1 * у1 + 1 ; х1 = хзд - узд + г
34.  35.	}
36.	сопРехР. И113Ру1е =	+
37.	( з	% 16).РоЗРгРпд(16) +
38.	( (3 + 2) % 16).РоЗРгРпд(16) +
39.	((3 + 7) % 16).РоЗРгРпд(16)
40.	сопРехР. РШКесР (х++, у, 1, 1)
41.	}
42.	}
43.	</зсг1рр>
44.	</Ьос1у>
45.	</ЬРт1>
Объяснения, что такое Мандельброт или как его создать, лучше опустим, но если
вы взглянете на строки 10-15 и 36-40, то сможете увидеть несколько команд на
1ауа8спр1, необходимых для рисования на элементе холста НТМЕ5, которые будут
рассматриваться в разделе 2 данной книги.

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

Если выбран браузер ЕйеГох, то, как показано на рис. 4.2, который также является
копией экрана ПК под управлением \^тс1о\У8, все будет выглядеть несколько ина-
че. Здесь можно увидеть, что консоль занимает нижнюю часть экрана, что является
ее исходной позицией, но, если щелкнуть на значке настроек в виде трех горизон-
тальных точек рядом с кнопкой закрытия консоли, ее можно будет прикрепить к
любой желаемой стороне или даже открыть ее в собственном окне.

Рис. 4.2. В открытой в Р не Гох консоли разработчика
отображается информация о документе

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

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

После выбора наиболее предпочтительного браузера для разработки (здесь реко-
мендуется СИгоше просто из-за его высокой популярности как среди пользовате-
лей, так и среди разработчиков) вам необходимо ознакомиться с предоставляемой
им консолью разработчика, поэтому в табл. 4.2 приводится список различных 1ЖЙ-
адресов документации, которую рекомендуется хотя бы просмотреть, прежде чем
приступить к работе:

Таблица 4.2. Веб-сайты документаций по консоли разработчика разных браузеров

Браузер(ы)	Веб-сайт документации
Сйгоше / Ес1§е / Орега	Ьир8 ://с1еуе1орег. сйгоше. сош/босз/беуЩо!»/
ЕйеГох	ЬДр8://йгеГох-8оигсе-с1ос8.тохШа.ог§/с1еу1:оо18-и8ег/
8аГап	ЬДр8://8иррой.арр1е.сопЕеп4п/§шс1е/8аГап-с1еуе1орег/

Польза, извлекаемая из работы с консолью

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

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

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

с!оситеп^. Ьос1у. соп^еп^ЕсИ^аЫе=^гие

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

Когда закончите экспериментировать и захотите испробовать вносимые изменения,
введите в консоль следующую команду, предварительно вызвав ее подходящим для
вашего компьютера способом, указанным в табл. 4.1:
6оситепЪ.Ьос1у.соп^епЪЕ(±ИаЫе=Га1зе

Автозавершение

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

9 ОеуТмЬ - 1<з«1Ьо51/Ехэгт1р1е5Л«11ог1_1/СМ/е!(эгп.р1е_01.НГ1т1	—	□ X

Е1етеМ5	СопзоГе	»

ИЗ ® юр ’ О ННег	Ф

ОеГэиИ 1еуе15 т

> сапиа$,м1с1±1'1|

< бде

Рис. 4.3. Слово «сапуаз» в выпадающем меню

В этом примере содержится несколько элементов НТМЬ: раздел <ьът1>, <Ьеаа>,
<хШе>, <Ьоау>, <сапуаз> и раздел <зсг1р^>. Все пока что непонятное объясняется по
мере чтения книги. Предположим, что нужно узнать ширину элемента холста, не
имея доступа к исходному листингу и не испытывая особого желания копаться в
строках кода, чтобы выяснить это, но при этом известно, что у холста есть иденти-
фикатор сапуаз.

Достаточно просто начать вводить этот идентификатор в поле консоли, и сразу же
после введения первой буквы с появится выпадающее меню, показанное на рис. 4.3,
со всеми возможными вариантами продолжения. Теперь можно просто выбрать из
списка слово сапуаз, добившись тем самым выделения холста на веб-странице, а
затем ввести символ точки (.), а после — две первые буквы указателя ширины —
^1, и появится выпадающее меню, показанное на рис. 4.4.
Ф □еуТсю!® - 1оса111о^Е*атр1«/5есГ1опЛ/04/е!<атпр!е_01.ЬГгп1 —	□ X

К Д~| Е1еплепЬ Сопзо1е »	Ф :

[0 ® Юр ▼ ® ЯКег	Ф

Пе(аиГг 1еие15 ▼	№»

> сапуад .,ы1с1СЬ|

<« 640

Рис. 4.4. Нажав всего пару клавиш,
удалось найти свойство ширины холста улсЙЬ

Нужно просто выбрать в меню слово «мчс1Й1» и, как показано на рис. 4.5, консоль
тут же сообщит, что ширина холста составляет 640 пикселей, не придется даже на-
жимать клавишу Еп1ег. Правда же, быстро и удобно?

ф [)е1/Тоо1$ • 1оса1Ьо51/Ехатр!е5/5ес11Оп 1/04/ехатр1е_01.Ь1т1	— ОХ

х Д Е1етеп(5 Соп$о1е »	Ф ;

00 О 1ор ▼ <•> ПИег	Ф

Ое(аи111еуе1$ Т № 155ие$

саг^а5.и1<Ют|

< 64 В

Рис. 4.5. Теперь отобразилась ширина холста

Занимаясь этим свойством, ему можно добавить присвоение значения, изменив
ширину холста. А теперь посмотрим, что произойдет, если изменить С8 8-стиль
холста, используя следующую инструкцию:
сапуаз.зГу!е.орасИзу = .5

При вводе этой инструкции сразу же станет заметно, что изображение на холсте,
как показано на рис 4.6, стало наполовину прозрачным.

Давайте научимся получать доступ к С88-стилям элементов из консоли. Сначала
нужно указать имя идентификатора элемента, затем поставить точку, набрать слово
«81у1е», снова поставить точку, чтобы выбрать свойства С88-стиля этого элемента,
ввести имя свойства, поставить за ним знак равенства (=), и, наконец, ввести значе-
ние, присваиваемое этому свойству.
@ М а пс1 е IЬ го*	X +

С О © 1оса1Но5УЕхатр1е5/5ес1юп-1/04/екатр1е_01.Игт[	☆ Й

Рис. 4.6. Установлена половинная прозрачность изображения холста

В тех случаях, когда в свойстве С88 используется дефис для разделения имени
свойства на два слова, следует удалить дефис и установить первую букву второго
слова в верхний регистр. Это связано с тем, что дефис в 1ауа8спр1 — знак минус,
поэтому был выбран другой способ доступа к свойствам С88. К примеру, чтобы
установить для свойства холста тагдап-^ор значение 50 пикселей, можно ввести сле-
дующую инструкцию:

сагтуаз. зГуГе.тагдапТор = ’50рх’

Как только это будет сделано, над холстом сразу же будет помещено пустое поле
размером 50 пикселей.

Просмотр элементов

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

тпзрес^($(’сапуаз’))

В команде вызывается функция просмотра апзрес^, которой передается значение
$ (’ сапуаз'), являющееся инструкцией браузеру на получение элемента по его иден-
тификатору, где $ — сокращение гораздо более длинного 1ауа8спр1-вызова
деЪЕ1ешепъву1а(). В результате будет отображена показанная на рис. 4.7 вкладка кон-
соли элементы (ЕХетеп^з).

Л ОеИоок - 1о«1Ьо5УЕхатр1е5/2ес1юп_1/04/ехатр1е_01Ъгт1	—	□ X

К б~1 Е1етеп15 Сопзо1е »	& 1 ф •

▼ <Ьос!у>

ссапиаз 1д=*'сапуаз" и1дН1^"640*! Ие1|К^=,г480"

З1у1е-"орас11у: 0.5; таг^гп-Гор: 50рх;'> == $0

► <5СГ1р^>.*.<:/5СГ1р1>

Н1т1..51иеиу1уНс1сО_336 Ьос1у сапуа5#сапуаз

81у1ез СотрШей ЬауоЩ ЕуепЕ Ьйепегз »

Е1Йег	:Ьоу .с15	0]

е1етеп±.зГу1е {

орасгГу: 0.5;

таг^гп-Гор: 50рх;

}

сапуаз{
а5рес±-га1:го: аиТо 640 / 480;

}

Рис. 4.7. Различные сведения об элементах холста перечисляются
во вкладках «Элементы» («Е1ешеп18») и «Стили» («81у1姻)

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

Несложно представить, что консоль разработчика предоставляет гораздо более ши-
рокие возможности, но теперь уже сформировалось, по крайней мере, представле-
ние о некоторых из них. Подробную информацию о консоли разработчика, по све-
дениям разработчиков Сюо§1е Сйгоше, можно найти по следующему адресу (функ-
ции на всех других консолях разработчиков должны быть схожими, если не точно
такими же): ГгЬЪрз: //^тпуиг!. сот/с!еусопз
Заключение

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

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

Вот теперь все готово, чтобы всерьез приступить к занятиям веб-разработкой на
НТМЕ5, начинающейся в разделе 2 (а затем и С883 в разделе 3), и с интересом
ждать продолжения, поскольку оно обещает поразить вас тем, с какой легкостью
можно будет добавлять невероятный арсенал новых функций и повышать интерак-
тивность разрабатываемых вами веб-проектов.
ГЛАВА 5

Введение в НТМЬ5

Введение

По названию можно подумать, что НТМЬ5 — просто очередная версия НТМЬ, но
это не так; в эту технологию заложено нечто большее. Чтобы уяснить это, нужно
понять, что веб-разработка — своеобразное сближение и слияние технологий, и,
хотя речь может идти о НТМЬ5 и С883, они в известном смысле также переплета-
ются и взаимодействуют с 1ауа8спр1.

Попытка полностью обособить НТМЬ5 обречена на провал, поскольку весьма су-
щественная часть спецификации НТМЬ5 зависит от использования как С883, так и
1ауа8спр1, но мы приложим все силы, чтобы различать их везде, где только можно,
а затем укажем, где именно размываются границы между ними.

Например, одна из наиболее важных особенностей НТМЬ5 — применение нового
элемента холста <сапуаз>, но воспользоваться им можно только с помощью инст-
рукций на языке 1ауа8спр1. С другой стороны, некоторые графические эффекты,
проявляющиеся на холсте, также могут быть получены с помощью преобразований,
присущих С883. Поэтому зачастую лучше думать о триаде НТМЬ5, С883 и
1ауа8спр1, и в данной книге будет показано, как все три технологии интегрируются
друг с другом.

Но тем из вас, кто не считает себя программистом, не стоит волноваться: изучать
программирование на 1ауа8спр1 в полном объеме не придется, поскольку к холсту
НТМЬ5 и другим функциям НТМЬ можно получить доступ с помощью весьма про-
стого подмножества инструкций 1ауа8спр1, которые несложно выучить, так как они
используются больше как расширение НТМЬ, чем что-либо иное.

И все же не стоит выстраивать предположения, что все сведется к изучению новых
НТМЬ-тегов и атрибутов, поскольку НТМЬ5 — нечто большее. После всего ска-
занного давайте начнем с выяснения, что именно НТМЬ5 привносит в набор инст-
рументов программиста, делая при этом основной упор на новые элементы.

Структура

В этой главе рассматриваются следующие темы:

♦	Все новые функции НТМЬ5.
♦	Основные особенности работы этих функций.

♦	Несколько примеров в ваш арсенал.

♦	Особенности использования НТМЕ5.

Цели

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

НТМЬ5 гораздо серьезнее, чем просто НТМЬ4 + 1

Во введении к главе уже говорилось, что НТМЬ5 — это не просто очередная версия
НТМЬ, а нечто гораздо большее. Но давайте подойдем к исследованию того, чем по
сути является НТМЕ5, внимательно изучив те части этой спецификации, которые
представлены новыми функциями языка НТМЬ.

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

Элемент <сапуаб>

Чего так долго не хватало в НТМЬ — это возможности рисования и манипулирова-
ния графикой. Сначала эта проблема была исправлена с помощью элементов
управления Мгсгозой АсбуеХ, а затем с помощью плагина АбоЪе НазЬ Но они ока-
зались сбойными и открывали слишком много уязвимостей с точки зрения безопас-
ности. Кроме того, они требовали установки, а нужно было встроенное решение.

Примечание

Проблемы с этими плагинами, и, в частности, с Иазй, были настолько велики,
что автор этой книги еще в 2015 году опубликовал статью в журнале Сошргйег
\^еек1у Ма§ахте под названием «\УЬу НТМЬ Мн81 Кер1асе НазИ» («Почему
НТМЬ должен заменить НазИ»), подробно описав все основные связанные с пла-
гинами проблемы, и объяснив, почему спецификация НТМЕ5 была вполне оче-
видным решением. Если интересно, полная версия статьи, объясняющая сложив-
шуюся на то время ситуацию, до сих пор доступна по адресу Ьйр8://йпуиг1.сош/
Па8Ь-й€ш15.
Основным ответом на ИазИ (наряду с добавлением аудио- и видеофункций) стал
элемент <сапуаз>, который впервые был поддержан компонентом МасО8 А^еЪКй
еще в 2004 году, повышавшим эффективность использования браузеров ВазйЬоагб
и 8аГап. В 2006 году его поддержка была добавлена в РпеГох и Орега, и только по-
том Рабочая группа \УсЬ НуреНех! АррПсабоп Тес1шо1о§у \^огкт§ Огоир
(А^НАТА^О) добавила этот элемент в качестве стандарта, а такие браузеры, как
Сгоо§1е Сйгоше, включили его в свой состав в 2010 году.

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

Как бы то ни было, но теперь при правильной настройке элемента холста в НТМЬ и
включении в код всего лишь нескольких инструкций на 1ауа8спр1, мы располагаем
фантастически мощными средствами рисования непосредственно в браузерной
среде. Разъяснения даются в следующей главе, а пока на рис. 5.1 изображен эле-
мент холста, в котором нарисован прямоугольник с заполненным цветовым гради-
ентом, полученный путем использования простых команд из следующего примера:

0 Сгас11епг Екаггр1е	X +

-> С А ® Н1е С:/ОзеГ5/гоЫп/Ое5к1ор/дгас1|епШт1 Ё? 5У Л* У

Рис. 5.1. Прямоугольник, заполненный цветовым градиентом, на элементе холста НТМЬ5
Пример 5.1

1.	<!ЕОСТУ₽Е Мт1>

2.	<Мт1 1апд="еп">

3.	<Ъеас1>

4.	<теЕа	с±агзеЕ="иЕГ-8">

5.	<Е1Е1е>СгасПепЕ Ехатр1е</ММе>

6.	</Иеас1>

7.	<Ьос1у>

8.	<сат/аз	1с1=’сапуаз’></сапуаз>

9.	<зсг!рЕ>

10.	сат/аз	=	с!оситепЕ.деЕЕ1етепЕВу1с1(’сапуаз’)

11.	сопЕехЕ	=	сапуаз.деЕСопЕехЕ(’2сГ )

12.	м	=	640

13.	Ь	= 320

14.

15.

16.

17.

18.

19.

20.

21.

22.

23.

24.

25.

26.

27.

28.

саггуаз .м1с±к = м
сапуаз.НетдИЕ = к

дгасИепЕ

= сопЕехЕ. сгеаЕеЫпеагСгасИепЕ (0, 0,	0)

дгасНепЕ. аск!Со1огЗЕор (" 0 ’’,
дгасНепЕ. аск!Со1огЗЕор (".25",
дгасНепЕ. аск!Со1огЗЕор (".50",
дгасНепЕ. аск!Со1огЗЕор (".75",
дгасИепЕ. аск!Со1огЗЕор ("1.0",

"тадепЕа")
"Ыие")
"дгееп")
"уе11сж")
"гесГ)

сопЕехЕ. ЕШЗЕу1е = дгасИепЕ
сопЕехЕ. ГШКесЕ (0,0,640,320)

</зсг!рЕ>

</Ьос1у>

</ЪЕт1>

Г еолокация

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

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

* Ооод1е Мара

□

С О Й доод!е.сот/та р5/@ 50.9770744Д9647811,82



копкой

5ош^епс1-оп-5еа

Ктдзгоп

.	т-в "*	о {

Магнате

Зиггеу Н1Н5

Ой

□ипк1гк

I— «II *

Роке^опе

ВпдНТоп

сНа511пд5

$

УУоПЫпд

ВоиЬдпё-аиг^Мег

;Г1'Шеа1с1-
АОМВ

А(еа оГ
0ЫзГапд1пд
№111 гаI ВеаЫу

501Л1Г1 Эоуупз

ЧаПопа! Рагк

Ма1сЫопе	СапкгЬигу

□ °

Ь о

СЫсНее1ег

КепЮоуипз'. _

АО№В

Са|а!з

+

Мар с!а*а <52022 Соод1е 11пйе<1 К!п$с1от Тегтз Р^Чуасу ГеесДЬаск 20к[П1.

Рис. 5.2. Карта, отображаемая в результате геолокационного поиска

ЕазШоигпе

.Заик-ОтсГ





Пример 5.2

1.	<! ЭОСТУРЕ Мт1>

2.	<Мт1 1апд="еп">

3.	<Ъеас1>

4.	<МЕ1е>Сео1осаМоп Ехатр1е</МЕ1е>

5.	</Ееас1>

6.	<Ьос1у>

7.	<зсг1рЕ>

8	.	паурдаЕог. деоЕосаМоп. деЕСиггепЕРозЕМоп (дгапЕеск с1еп1ес1)

9.

10.	ГипсМоп дгапЕес! (розаМоп)

11.	{
72 |	Глава 5
12.  13.  14.	уаг 1аЬ = розТЫоп. соогСз. 1аЫЬиЬе  уаг Топ = роз1Ыоп.соогЬз.1опд1Ьис1е
15.  16.  17.  18.  19.  20.  21.  22.  23.  24.  25.  26.  27.  28.  29.  30.  31.  32.  33.  34.  35.  36.  37.  38.  39.	а!егЬ ("Регт1зз1оп СгапЬесЬ Той аге аЬ 1осаЫоп:\п\п"  + 1аЬ + ", " + 1оп + "\п\пСИск ’ОК’ Ьо 1оаЬ " + "Соод1е Марз м1ЬЪ уоиг ТосаЫоп")  мтпскж. 1осаЫоп. гер!асе ("ЬЬкрз: / /мым. доод!е. сот/тарз / @ " + 1аЬ +	+ 1оп + ",8х")  }  ГипсЫоп ЬепаеЬ (еггог) { уаг теззаде  змТЬсЪ (еггог. соЬе) {  сазе 1:	теззаде	=	'Регтаззиоп ПепгесГ;	Ьгеак;  сазе 2:	теззаде	=	’РозТЫоп ПпауаИаЫе’;	Ьгеак;  сазе 3:	теззаде	=	’ОрегаЫоп Т1теЬ ОиЬ’;	Ьгеак;  сазе 4:	теззаде	=	’Ппкпомп Еггог’;	Ьгеак;  }  а!егк ("Сео1осаЫоп Еггог: " + теззаде) }  </зсг!рЬ>  </ЬоЬу>  </ЬЬт1>

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

Формы

Использование форм в НТМЬ5 подверглось целому ряду усовершенствований. На-
пример, теперь теги <1приь> можно размещать вне тегов <Гогт> и </Гогт>, если для
идентификации формы, к которой относится ввод, используется новый атрибут
Гогт. Точно так же с помощью нового атрибута Гогттеььоь можно изменять метод
(выбирая сет или розт).
Также имеется несколько усовершенствований, позволяющих изменять тип коди-
ровки формы, создавать или даже переопределять новый атрибут поуаИс1аЪе. Для
изменения действия (или, иначе говоря, назначения) формы можно также восполь-
зоваться атрибутом ГогтасМоп, а для изменения места отображения ответа на
фрейм, вкладку или окно можно воспользоваться атрибутом ГоппЪагдеъ. Наряду с
этим с помощью атрибутов ЪетдЫ: и итать можно изменять высоту и ширину типа
ттаде тега <1при^>.

Кроме этого, как показано на рис. 5.3, в поисковой системе Ооо§1е можно увидеть в
повседневном применении несколько наиболее удобных новых атрибутов. Это ав-
тозаполнение, которое позволяет предлагать для поля заранее заготовленные зна-
чения, и автофокус, заставляющий браузер автоматически фокусироваться на поле
формы.

@ 6оод1е	X +

С О ® доод1е.сот

АЬои1 81оге

V -	□ X

СтаП 1тадез •••

О, Ыт15 (огтз|

О. Гйт15 (огглз

О, Мт15 Тогтз рсИ

О. Ыт15 Тогтз у!емуег с!о\л/п1оас1

О. Н1т15 (огтз ЛИ т 111е Ыалкз

О. Мт15 (огтз 71е^ег

Ыт15 Тогт уаГк1аЛоп

О. Ыт15 Тогтз рр1

6оод1е ЗеагсЬ

Гт Еее1|пд 1_иску

А(3уеп181пд Визтезз Ноуу беагсГ» июгкз

Рпуасу 1егтз Ъейтдз

Рис. 5.3. Поисковая система Ооо§1е, предлагающая выбор входных данных

На рисунке показано, какие подразумеваемые вами поисковые запросы считаются
наиболее вероятными, поскольку в наборе заранее заготовленных входных данных,
доступных для выбора из форм НТМЕ5, также содержатся новые атрибуты пап, тах
и з^ер, позволяющие четче управлять вводом таких данных, как числа или даты, а
кроме того, для отправки сразу нескольких значений в сочетании с тегом <1прик>
МОЖНО воспользоваться НОВЫМ атрибутом ти1Мр1е.

Теперь с помощью атрибута ра^егп в формах можно воспользоваться сопоставле-
нием с шаблонами, а отображение в поле ввода подсказки, помогающей пользова-
телю сориентироваться в том, что нужно вводить, позволит применение нового ат-
рибута рХасеЬоЫег. Кроме того, для атрибута куре поддерживается ряд новых значе-
ний, включая со1ог, с!аке, топГЪ, Мте, мэек, питЬег, гапде, Те1, иг1 И етаИ (цвет, дата,
месяц, время, неделя, число, диапазон, телефон, 1ЖЬ-адрес и адрес электронной
почты). С их помощью вы можете обеспечить ввод в ваши формы правильных зна-
чений и существенно упростить пользователю это действие.

Есть и другие, не упомянутые здесь, важные усовершенствования работы с форма-
ми, рассматриваемые в главе 13 «Работа с формами».

Локальное хранилище и хранилище сеансов

Когда наступит пора создания по-настоящему интерактивных и динамичных веб-
страниц, вы неизбежно столкнетесь с моментом исчерпания возможностей сооИе-
файлов по обеспечению максимально отзывчивой среды. Более того, во многих
странах действуют строгие правила использования сооИе-файлов, следовательно,
придется часто добавлять предупреждения и запрашивать согласие на их использо-
вание. А что еще хуже — размер сооИе-файлов ограничен всего лишь 4 Кб данных.
Но для решения означенных задач есть более подходящий способ — использование
локального хранилища, позволяющего пользователям быстро и легко перемещаться
по веб-сайтам, сохраняя информацию о своих сеансах серфинга в этом хранилище.
Локальным хранилищам для каждого веб-сайта предлагается до 5 Мб информации
в легкодоступном формате пар ключ/данные. Дополнительное преимущество, в от-
личие от сооИе-файлов, которые могут поддерживать доступ к множеству различ-
ных веб-сайтов (и, следовательно, использоваться для отслеживания поведения в
Интернете), состоит в том, что доступ к хранящимся данным может получить толь-
ко сайт, сохраняющий их в локальном хранилище. Данные остаются закрытыми
для всех, кроме пользователя и веб-сайта.

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

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

Иметь доступ к 5 Мб данных в виде пар ключ-данные — все равно, что иметь свое-
образную мини-базу данных, доступную на компьютере пользователя, следова-
тельно, появляется возможность создания локальных веб-приложений, не храня-
щих данные на удаленном сервере, пригодные к полностью автономной работе. Это
существенно повышает гибкость и вариативность в вопросах выбора порядка хра-
нения и управления данными пользователя, а в главе 14 «Локальное хранилище и
многое другое» будет показано, как доступ к локальному хранилищу осуществля-
ется с помощью всего лишь нескольких простых строк кода на 1ауа8спр1.

Хранилище сеансов ничем не отличается от локального хранилища, за исключени-
ем того, что хранящиеся в нем данные стираются при закрытии или перезапуске
браузера, что превращает его в наиболее приемлемое решение для веб-сайтов и
приложений с повышенными требованиями в вопросах безопасности, не приемлю-
щих долгосрочное хранение информации. Это хранилище также рассматривается в
главе 14 «Локальное хранилище и многое другое».

Примечание

Есть еще один тип локального хранилища под названием ТпбехесПЭВ, предла-
гающий в зависимости от браузера (и в случае предоставления его пользовате-
лем) хранение от гигабайта и более данных, и, как следует из его названия, с
ним для доступа к данным можно использовать индексы, что делает его гораздо
более мощным по сравнению со стандартным локальным хранилищем. Но в
книге этот тип хранилища не рассматривается, поскольку для его использования
требуется предварительное знание порядка работы индексированных баз данных
и более глубокие познания в использовании языка 1ауа8спр1. Интересующимся
можно для начала посоветовать веб-сайт йпуиг1.сот/и8ш§-шс1ехс1Ь, где также
можно будет узнать о библиотеках, применяемых для упрощения задачи про-
граммирования.

Микроданные

Один из аспектов НТМЕ5, польза от которого в большей мере проявляется при
продвижении вашего сайта в поисковых системах, — использование микроданных.
Это новый набор тегов, которыми можно воспользоваться для точного объяснения,
какие именно данные представлены в НТМЬ-содержимом. Например, такой систе-
ме, как Сюо§1е, можно сообщить, какие именно слова — имена людей, а какие —
названия должностей, какие части адреса — названия улицы, города и т. д., какие
строки текста относятся к организации, где работает человек, какие элементы тек-
стов — названия специальностей и т. д.
Имея все эти уточняющие данные, поисковые системы способны гораздо успешнее
разобраться в документе, а затем найти более удачные соответствия поисковых за-
просов людей с содержимым ваших страниц. Все доступные теги и атрибуты мик-
роданных будут рассматриваться в главе 14 «Локальное хранилище и многое другое»,
что станет весьма существенным подспорьем для тех, кому когда-либо придется
заниматься поисковой оптимизацией (8ЕО), добавляя мощный набор инструментов
в арсенал новичка.

Другие семантические теги

В спецификацию НТМЕ5 также было включено много новых синтаксических
функций, не считающихся микроданными, но служащих для дальнейшего объясне-
ния содержимого веб-страницы поисковым системам (например, программам озву-
чания текста для слепых). Появились новые теги <зиттагу> И <с1еЪа.11з>, а Также НО-
ВЬЮ элементы структуры страницы, в числе которых <та1п>, <зесМоп>, <агЪ1с1е>,
<Ьеааег>, <Гоо^ег>, <аз1с1е>, <пау> и <Пдиге>, рассматриваемые в главе 14 «Локальное
хранилище и многое другое».

Веб-воркеры и приложения

Источником нескольких других функций стала так называемая Рабочая группа веб-
приложений — \УсЬ Арр§ А^огкт§ Огоир	Их частичное поглощение спе-

цификацией НТМЕ5 состоялось в 2015 году, когда они были переданы Рабочей
группе веб-платформы — \УсЬ Р1а1Гопп А^огкш§ Огоир (\^Р\^Сг). И теперь почти
все они считаются частью НТМЕ5, хотя изначально это и не планировалось.

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

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

Веб-воркеры требуют знания 1ауа8спр1, но не-программисты могут просто скопи-
ровать и вставить код из главы 14 «Локальное хранилище и многое другое» или же
не обращать внимание на веб-воркеры, поскольку они по большому счету нишевая

технология.
Веб-приложения

Наряду с веб-воркерами появилась концепция веб-приложений, представляющих
собой группы веб-страниц, которые можно загружать и рассматривать как отдель-
ное приложение. Некоторые мобильные веб-сайты именно так и выглядят, работая
в автономном режиме сродни приложениям, загруженным из магазина. Эта техно-
логия также относится к применению расширенных функций НТМЬ5, и читатели,
не считающие себя программистами или в настоящее время не испытывающие в
ней необходимость, могут смело пропустить раздел о веб-приложениях в главе 14
«Локальное хранилище и многое другое».

Аудио и видео

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

И это факт. Похоже, прошли уже те времена, когда необходимо было иметь копию
НазИ, чтобы воспроизводить созданные вами анимации или показывать в своем
блоге домашнее видео. Теперь все сводится к вставке в код пары тегов <аис11о> и
</аисИо> или <у1с1ео> и </у1с1ео> и указанию ссылки на медиафайл (находящийся на
вашем сервере или в другом месте).

Использование аудио

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

@ Ехатр1е	X +

<-->0 0* ® 1оса1Но5УЕ*атр1е5/5ес1гюп_2/05/ехатр1е_03.Ытп1 @

Р1аут§ АиШо

► 0:07/0:07 ------ •

Рис. 5.4. Воспроизведение короткого аудиофайла в формате МРЗ
Как видите, вся работа выполняется в строках 8-10, где используется тег <аисИо> с
включенными пользовательскими элементами управления, а источник звука —
файл ехатр1е.трЗ, расположенный в текущей папке.

Пример 5.3

1.	< ! РОСТЕРЕ ЬШ1>

2.	<Мт1 1апд="еп">

3.	<Ьеас1>

4.	<ММе>Аис11о Ехатр1е</ММе>

5.	</Ьеас1>

6.	<Ьос1у>

7.	<Ы>Р1ау1пд АисПо</М>

8.	<аисНо сопСго1з>

9.	<зоигсе згс=’ехатр!е.трЗ’>

10.	</аисНо>

11.	</Ьос1у>

12.	</ЬШ1>

Использование видео

Судя по коду, показанному в примере 5.4, видео вставляется в веб-страницу так
же легко, а при запуске кода на экране появляется изображение, показанное на
рис. 5.5. В строках 8-10 этого примера используется тег <у1аео>, применяемый для
вставки видеоклипа размером 640 на 360 пикселей с отображением пользователь-
ских элементов управления. Видео хранится в локальной папке в файле ехатр1е.тр4.

Пример 5.4

1.	< ! РОСТЕРЕ Мт1>

2.	<Мт1 1апд="еп">

3.	<Ьеас1>

4.	<‘Ы'Ые>У1с1ео Ехатр1е</МС1е>

5.	</Ьеас1>

6.	<Ьос1у>

7.	<Ы>Р1ау1пд 71с1ео</Ы>

8.	<у1с1ео сопСго1з м!с±Ь= ’ 640' Ье1дЬС= ’ 360 ’ >

9.	<зоигсе згс=’ехатр1е.тр4’>

10.	</у1с1ео>

11.	</Ьос1у>

12.	</ЬСт1>

Видите, с какой поразительной легкостью можно включать мультимедиа в свои
веб-страницы? А в главе 15 «Аудио и видео» будут представлены и другие функ-
ции, которыми также можно будет воспользоваться для дальнейшего совершенст-
вования способа их отображения и воспроизведения.
УИео Ехатр^е	х +

СО® 1оса1Ьоз!/Ехатр1е5/5есТ1Оп_2/05/ехатр1е_04^1т1 (**?’&	*

Р1аут§ У1<1ео

Рис. 5.5. Воспроизведение короткого видеофайла в формате МР4
(автор Кийоп§ Уи, файл взят с сайта ртхаЬау.сош)

876 и Ма1ЬМ1_

В спецификацию НТМЕ5 также включена поддержка двух невероятно эффектив-
ных технологий: 8УО и МаЙтМЕ. Обе они представляют собой способы графиче-
ского рисования на веб-странице без использования холста. 8са1аЪ1е Усс1ог ОгарЫсз
(8УО) позволяет выводить масштабируемую векторную графику прямо на веб-
страницу. Ее можно использовать для рисования изображений буквально на лету,
масштабировать их по своему усмотрению без потери качества (что невозможно
проделывать с растровыми изображениями форматов РХСг, СИЕ или 1РО), а также
создавать при помощи этой технологии анимацию, и все посредством обычных
текстовых файлов формата ХМЕ или ряда графических инструментов, доступных
для упрощения операций.

В отличие от 8УСг, технология МаЙтМЕ предназначена для математиков и ученых,
испытывающих потребность в отображении сложных формул и уравнений, не
обеспечиваемую средствами НТМЕ или А8СП. Более того, МаЙзМЕ сохраняет зна-
чение формулы, благодаря чему ее можно выразить в различных формах, не ис-
ключая вывод на печать или даже преобразования текста в речь.
К сожалению, эти две технологии слишком объемны, и охватить их в данной книге
не представляется возможным, поскольку для полного изучения каждой из них по-
требовалась бы отдельная книга. Но, как бы то ни было, теперь вы в курсе, что они
доступны, и, если они вас впечатлили, получить сведения о них можно по следую-
щим ЦГКЪ-адресам:

♦	Мпуиг!. сот/изтпд-зуд

♦	Мпуиг!. сот/изтпд-таЙип!

Заключение

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

В следующей главе начнется по-настоящему серьезная работа, позволяющая по-
нять, как и зачем создавать впечатляющую веб-графику, овладев приемами исполь-
зования холста с применением элемента <сапуаз>.
ГЛАВА 6

Использование холста в НТМ15

Введение

В этой книге НТМЬ5-тегу <сапуаз> посвящено немало страниц, и все потому, что
это одно из самых эффективных и значительных нововведений в НТМЬ. В нем во-
плотились практически все функции, ранее предоставлявшиеся такими плагинами,
как Иазй, но в весьма безопасном и простом для использования виде.

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

Но не стоит переживать, я обещаю, что с точки зрения программирования все све-
дется к созданию списка покупок в порядке появления товаров в вашем местном
супермаркете. Это не более чем вопрос подачи нескольких команд в надлежащем
порядке. И все будет эффективно спрограммировано или, с позиции холста
НТМЕ5, — нарисовано.

Структура

В этой главе рассматриваются следующие темы:

♦	Сведения о холсте НТМЬ5 и порядке получения доступа к нему.

♦	Освоение приемов передачи идентификаторов элементов в 1ауа8спр1.

♦	Изучение порядка использования контекста для управления рисованием на холсте.

♦	Способы преобразования холстов в изображения.

Цели

Здесь состоится знакомство с элементом холста НТМЬ5. Также будут освоены азы
1ауа8спр1, позволяющие рисовать прямоугольники разных цветов и даже преобра-
зовывать холсты в изображения. Тем самым пройдет подготовка к изучению более
сложных методов рисования, предстоящему в следующих главах.

Ускоренный курс ^уаЗспр!

Чтобы в полной мере воспользоваться всеми преимуществами, предоставляемыми
НТМЬ5, нужно освоить азы 1ауа8спр1. Поскольку наилучший момент для этого
настал именно сейчас, давайте сразу нырнем поглубже и приступим к программи-
рованию.

Вставка кода 1ауа8спр1 в НТМЬ-документы происходит внутри двух инструкций
<зсг1р^> ... </зсг1р^>. Зачастую они размещаются в разделе заголовка документа,
чтобы обеспечить ранний запуск кода в ходе загрузки страницы, но разделы кода
1ауа8спр1 можно увидеть и в других местах, например в теле документа.

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

Размещение кода внутри тегов <$спр(>

Взгляните на код примера 6.1, где показан типичный документ НТМЬ5, в который
между строками 15 и 25 вставлен программный код на языке 1ауа8спр1. Подобный
код уже встречался в предыдущей главе, где элемент холста был представлен путем
рисования прямоугольника с градиентной заливкой.

Пример 6.1

1.	< ! ЭОСТУРЕ Мт1>

2.	<Мт1 1апд="еп">

3.	<Ъеас1>

4.	<теРа скагзек="икЕ-8" />

5.	<ММе>из1пд зсгарр Радз	1</Ш1е>

6.	<зРу!е>

7.	#сат/аз {

8.	Ьаскдгоипс1-со1ог : суап;

9.	Ьогс1ег	: 1рх зоПс! Ыаск;

10.	}

11.	</зку!е>

12.	</Иеас1>

13.	<Ьос1у>

14.	Ссаггуаз 1с1=' сатлаз ' ></сат/аз>

15.	<зсг!рк>

16.	сат/аз	= с!оситепк.декЕ1етепкВу1с1(’сапуаз’)
17.	сопкехк	= сапуаз.декСопкехк (’2сГ )

18.	сапуаз.м1с±к	= 640

19.	сапуаз.кеадкк	=320

20.

21.	сопкехк.ЬедгпРакк()

22.	сопкехк.зкгокеЗку!е = ’дгееп’

23.	сопкехк.геск (20, 20, 600, 280)

2 4.	сопкехк.зкгоке()

25.	</зсг!рк>

26.	</Ьос1у>

27.	</Мт1>

Но в этом примере на экран выводится простой прямоугольник без какой-либо за-
ливки, показанный на рис. 6.1, что делает код максимально простым:

Рис. 6.1. Рисование незакрашенного прямоугольника в элементе холста

Здесь следует обратить внимание на ряд моментов. Во-первых, между строками 6 и 11
имеется раздел <зку1е>, в котором объекту холста сапуаз придается черная рамка и
голубой фон, чтобы он изначально выделялся на белом фоне веб-страницы. Во-
вторых, в строке 14 холсту присваивается идентификатор сапуаз, чтобы на него
можно было ссылаться как в С88-стиле, так и в последующем программном коде.

А теперь с учетом этих замечаний давайте взглянем на сам код 1ауа8спр1. В строке 16
создается так называемый объект 1ауа8спр1 с именем сапуаз. Затем следует под-
ключение этого объекта к ранее созданному холсту, для чего используется сложная
на вид инструкция 1ауа8спр1. Здесь всего лишь выполняется поиск НТМЬ-элемента
с идентификатором сат/аз, а затем создается объект, понятный 1ауа8спр1, который
также называется сат/аз.

Примечание

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

Затем, после того как элемент <сапуаз> помещен в объект 1ауа8спр1 с именем сат/аз,
в строке 17 на основе этого объекта создается так называемый 2В-контекст. Пока
что не стоит ломать голову над происходящим, достаточно лишь знать, что кон-
текст (которому присвоено предельно понятное имя сопбехб), похож на ссылку, ко-
торая с этого момента и для всех дальнейших инструкций по созданию рисунка на
этом холсте будет использоваться для доступа к нему. Фактически везде, где в кни-
ге понадобится получить доступ к холсту с идентификатором сапуаз, можно будет
просто скопировать и вставить строки 16 и 17.

В строках 18 и 19 задаются ширина и высота холста. Здесь это делается в коде
1ауа8спр1, но точно так же это можно было бы сделать и при создании холста, на-
пример:

Ссагтуаз 1с1='сапуаз' ’ 640 ’ Ъе1дЪб=’320’></сапуаз>

А вот установить ширину и высоту холста в разделе С88, как показано ниже, не
получится, поскольку этими командами можно только добиться масштабирования
холста от любых его исходных размеров. Нужно не забывать устанавливать разме-
ры холста в коде НТМЬ или в коде 1ауа8спр1.

ШсО : 640рх; // Такие команды СЗЗ не будут

ЪегдМ : 320рх; // работать согласно задуманному

Осталось разобраться с еще четырьмя строками кода. При рисовании линий на хол-
сте обычно необходимо определить начало пути, а затем вести рисунок по этому
пути. Итак, в строке 21, за счет вызова функции ЬедТпРаъъ () в текущем контексте,
говорится: «Давайте начнем рисование пути в этом контексте». После этого для
рисования выбирается зеленый цвет, поэтому в строке 22 именно этот цвет назна-
чается атрибуту збгокеЗбу1е текущего контекста. Это все равно, что прикрепить
ручку с зеленым гелем к рисующей головке плоттера.

И теперь мы готовы с помощью кода в строке 23 выполнить рисунок, дав браузеру
простую команду по перемещению пера в позицию, отстающую на 20 пикселей от
края холста и опущенную на 20 пикселей вниз по холсту, а затем на рисование не-
закрашенного прямоугольника размером 600 на 280 пикселей, используя уже уста-
новленные текущие стили, в данном случае имеется в виду простой зеленый цвет.
Но пока еще прямоугольник не нарисован, поскольку мы прошли только половину
пути. Чтобы завершить задание пути и поместить рисунок на холст, требуется по-
следняя команда, показанная в строке 24, где в текущем контексте вызывается
функция зъгоке(), похожая на команду интерпретатору языка 1ауа8спр1: «Все инст-
рукции даны, теперь нарисуй путь согласно описанию».

Размещение кода в отдельном файле

Теперь, посмотрев на код, работающий в веб-документе, и разобравшись в его ра-
боте, давайте посмотрим на содержимое примера 6.2 и поймем, как этот код можно
будет спрятать в отдельный файл, представляющий собой чистый файл 1ауа8спр1,
который обычно сохраняется с расширением .^з. В данном случае он сохраняется
ПОД именем сапуаз.^з.

Пример 6.2

1.	сапуаз	=	с!оситеп1:.декЕ1етепкВу1с1	('саггуаз')

2.	соп^ех^	=	сапуаз .деГСопкехГ ('2с1')

3.	сат/аз .М1С±Ъ	=	640

4.	саггуаз. ЪеХдкГ	=	320

5.

6.	сопкехк.ЬедГпРаГЪ()

7.	соп^ех^.з^гоке3^у1е = 'дгееп'

8.	сопГехГ.гес-Ь (20, 20, 600, 280)

9.	сопЪехЪ.зЪгоке()

Как видите, в этом файле содержится только сам код 1ауа8спр1, и ему не нужен
большой отступ от края, поскольку здесь нет окружающего НТМЬ. В коде ничего
не изменилось, кроме удаления ненужного пространства отступа и его сохранения
в файле под именем сат/аз.^з.

А теперь давайте приведем код примера 6.1 к виду, показанному в примере 6.3, и
посмотрим, как выглядит извлечение кода из внешнего файла 1ауа8спр1.

Пример 6.3

1.	< ! РОСТУРЕ Мт1>

2.	<ЬГш1 1апд="еп">

3.	<Иеас1>

4.	<теРа скагзек="иГГ-8" />

5.	<ММе>Пз1пд зсгарр Радз	2</Ш1е>

6.	<зРу1е>

7.	#сапуаз {

8.	Ьаскдгоипс1-со1ог : суап;

9.	ЬоЫег	: 1рх зоПс! Ыаск;

10.	}
11.	</з^у!е>

12.	</Иеас1>

13.	<Ьос1у>

14.	<сапуаз 1с1='сапуаз'></сапуаз>

15.	<зсг!р^ згс='сапуаз.зз'х/зсг!р^>

16.	</Ьос1у>

17.	</ЪГт1>

Взгляните на строку 15, это теперь все, что осталось от 1ауа8спр1 в этом НТМЬ-
документе. Вместо предназначаемого для запуска кода, находящегося внутри тега,
весь прежний код был заменен простым присвоением атрибуту зге значения, ука-
зывающего, откуда следует взять файл 1ауа8спр1 (в данном случае он берется из
только что сохраненного локального файла сапуаз.^з).

Посмотрите, насколько лаконичнее стал код НТМЬ, а код 1ауа8спр1 теперь можно
поместить в отдельный файл и работать автономно. И теперь, как показано на рис. 6.2,
в таком редакторе, как У8 Собе, можно открыть сразу несколько вкладок, упро-
щающих многозадачную разработку, и там же можно заметить, что перед каждым
названием цвета имеется небольшой цветной квадратик.

<3 Е|1е ЗДеСЙОЛ	.&? ^ип 1еггп1па1 ±±₽1р

4’.иагпр1₽_ОЗ.Нтт1 *

11ПП.2 ;> 06 > <> акатр|^0Э.Г11т1 > ® Ыпп1 > ©*1ейс1 > ® &Гу1е > 'Ъ #сапуа
1 нсюстт ЬгтЬ

I
с^аг5в1= "1Л-Р-8” />
5сг1р1 2</Ш1еэ

В
7	Жапуэз {

8	Ьасквпзипй-ссЯог : Всуап;

Ьпгйег	: 1рх 5О11Й ПЫаск^

» )
11 11

11 <Ьайу>
1Й ссапузз АсЬ'сапуаз ' х/сапуаз;»

<5СГ1р* 5ГС~ ' Еалуаз  5 ' /5ЕГ1рГ>

16 </ЬосЗу>

I1? л/НхшЬ

сапуаз]!. - У1ьиа1 йшЛа Сайе	□ X

•«	X	Ш “

С: > МАМР > Мйосз > Екатр1(м > 5ес1юп_2 > 06 > -К сзпудь^

1	сапуа з		Лдсщпепг.	Е1 ешел гВуМ (’ с апуа з!}

2		сагшдБ.весСопсехЦ '2а ')

3	сз пуаз ^1(1X11 	640

4	сагзуаз	в	3.20

5

6	соп!ех1. Ье^4пРа1Щ )

8	сопгехг .гесЦ20, 20, 600, 2В0)

9 сопгех1.^1:гоке()

10

Рис. 6.2. Одновременное редактирование в У8 Собе двух файлов

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

Конечно, программирование на 1ауа8спр1 намного серьезнее показанного здесь.
И все же теперь у вас неплохие стартовые позиции, а новые функции, используе-
мые в этой книге, будут объясняться по мере надобности.
С о	кип Тегггнпа! Не1р_______________________________сапуа5.|5 - У15иа1

С гдЬ(О, 255, 255)

ММ

и^-Р-В" />

Г1р1 13^5 :

>11

со1ог : 	Ьаскдгоипд со1ог о! ап е1етеп1 ’е*

’ 1р 5уп1ах: <со!ог>

Рис. 6.3. Предлагаемое У8 Соде всплывающее окно выбора цвета

Примечание

По вопросу применения точки с запятой в 1ауа8спр1 Во многих языках про-
граммирования, таких как РНР, С или даже в старом добром С88, точку с запя-
той нужно ставить в конце каждой законченной строки. То же самое можно де-
лать и в 1ауа8спр1, и код с таким оформлением будет попадаться довольно час-
то. Но в 1ауа8спр1 эти точки с запятой необязательны, и если это так, то зачем
их вообще использовать? (По той же логике в этой книге для определенных са-
мозакрывающихся тегов не рекомендуется использовать слэш). И все же следует
признать наличие ряда крайних случаев, когда без точки с запятой не обойтись,
но о них известно, наверное, только самым квалифицированным программи-
стам. При желании можете воспользоваться точкой с запятой для разделения не-
скольких операторов 1ауа8спр1 в одной строке. Но новичкам этого делать не ре-
комендуется.

Функция де(Е1етеп(Ву1О()

Нам уже встречалось использование функции де1Е1етеп1Вую () для получения иден-
тификатора элемента:

сапуаз = с!оситепГ.деГЕ1етепГВу1с!('сапуаз')

И здесь важно напомнить, что это весьма распространенная инструкция, исполь-
зуемая везде, где нужно разрешить доступ к элементу из кода 1ауа8спр1. Она часто
будет встречаться в стороннем коде, и некоторые разработчики используют ее на-
столько часто, что создают новую функцию (или используют такую библиотеку,
как)Риегу), чтобы уменьшить объем ввода (всякий раз экономя 22 символа):
сапуаз = $('сапуаз')
То есть, если вам когда-либо попадался код, в котором символ $ используется та-
ким вот образом, то в нем почти наверняка объекту 1ауа8спр1 передавался иденти-
фикатор элемента. Но какое бы имя ни использовалось для этой функции, в резуль-
тате ее применения объект сможет получить доступ к этому НТМЬ-элементу и
всем его свойствам С88, и все это из кода 1ауа8спр1. Получается так, что стиль
можно задавать не только с помощью С88, но и с помощью 1ауа8спр1.

Примечание

В случае вопроса, может ли использование 1ауа8спр1 для оформления стилей
нарушить принцип разделения контента и стилей, нужно отвечать утвердитель-
но. Применять настройки стиля нужно по возможности только с помощью С88.
Но в тех случаях, когда нужны функции, не поддающиеся изменению с помо-
щью С88, таких как видео, аудио или, как в этой главе, холст, нужно знать, как
это можно сделать и в 1ауа8спр1.

В книге и далее будут встречаться примеры передачи идентификаторов элементов в
код 1ауа8спр1, но теперь вы уже сможете понять, что при этом происходит.

Превращение холста в изображение

Один из недостатков (а быть может, из преимуществ) элемента <сапуаз> — то, что
это не изображение, которое можно перетаскивать или сохранять. Но разработчику
может понадобиться воспользоваться холстом для создания графики, которой хо-
чется поделиться, не включая весь связанный код 1ауа8спр1 (которым, возможно,
не захочется с кем-то делиться).

К счастью, имеется относительно простой способ конвертировать холсты в стан-
дартные веб-изображения с помощью так называемого 1ЖЬ-адреса данных. Это
строка с ЦГКЪ-адресом, не указывающим на ссылку на вашем сервере или где-либо
в Интернете. Вместо этого в ней содержатся все данные для создания изображения
прямо в ИВЬ-адресе.

Для этого сначала нужно создать пустой элемент изображения в своем коде НТМЬ,
а затем из 1ауа8спр1 скопировать данные холста в атрибут зге этого изображения,
присвоив ему ЦГКЪ-адрес данных. Тогда изображение появится на экране, и его
можно будет как угодно перетаскивать или сохранять!

Взгляните на пример 6.4. В нем представлен документ, включающий код 1ауа8спр1,
чтобы содержать в одном месте весь код, с помощью которого создается рисунок
на холсте. Он сохраняется в изначально пустом изображении, созданном в строке
15. Результат показан на рис. 6.4.

Если попытаться перетащить и холст, и изображение на рабочий стол, обнаружит-
ся, что холст не среагирует, а изображение легко позволит это сделать. Давайте по-
пробуем.
Рис. 6.4. Изображение справа было создано из холста слева

Пример 6.4

1.	< ! ООСТЕРЕ Мт1>

2.	<Мт1 1апд="еп">

3.	<Ъеас1>

4.	Стека сЪагзек="иЕЕ-8" />

5.	<Е1Е1е>СопуегМпд ко ап 1таде</Е1Е1е>

6.	<зку1е>

7.	#сапуаз {

8.	Ьаскдгоипс1-со1ог : уе11сж;

9.	ЬоЫег	: 1рх зоИс! гес1;

10.	}

11.	</зку1е>

12.	</Ееас1>

13.	<Ьос1у>

14.	Ссапуаз 1с1=' сапуаз' м1с±Ъ=' 320' Ие1дкк='320'></сапуаз>

15.	<1тд 1с1='1таде'>

16.	<зсг1рк>

17.	сапуаз = с!оситепЕ.деЕЕ1етепЕВу1с1	('сапуаз')

18.	сопкехк = сапуаз .декСопкехЕ ('2с1')

19.

20.	сопкехк.ЬедРпРаЕЪ()

21.	сопкехк.агс (160, 160, 150, 0, 2 *	Макк.Р1)

22.	сопкехк. РИ13ку1е = 'дгееп'

23.	сопкехк.зкгокеЗЕу1е = 'Ыие'
24.	сопкехк.ГШ ()

25.	сопкехк.зкгоке()

26.	с!оситепк.декЕ1етепкВу1с1( Чшаде') .зге	= сат/аз. коВакаПКЪ ()

27.	</зсг1рк>

28.	</Ьос1у>

29.	</Ъкт1>

Чтобы все слегка запутать, в примере рисуется зеленый круг с синей рамкой. Как
это делается (если вы еще не догадались), рассказано в следующей главе, а затем в
строке 26 происходит настоящее волшебство: атрибуту источника изображения зге
предоставляется 1ЖЕ-адрес данных холста, и изображение сразу же отображается
рядом с ним.

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

Если перетащить изображение на Рабочий стол, то оно, скорее всего, будет сохра-
нено с использованием имени файла, например, скжп1оаа.рпд. И с этого момента с
изображением можно будет делать все что угодно, поскольку это уже будет стан-
дартный файл .рпд.

Примечание

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

Заключение

Закончив чтение главы, вы расширили свои познания о холсте НТМЕ5, узнали, как
его настроить, как его оформить в С88 и 1ауа8спр1, как рисовать на холсте с помо-
щью простых инструкций 1ауа8спр1, а также как превратить холст в обычное изо-
бражение. В следующей главе нас ждет углубленное изучение более сложных
функций рисования.
ГЛАВА 7

Прямоугольники и заливки

Введение

В этой книге НТМЬ5-тегу <сат/аз> посвящено немало страниц, и это правильно, по-
скольку элемент холста считается одним из наиболее эффективных и значительных.
Теперь, после достаточно неплохого ознакомления с холстом НТМЬ5, а также с ис-
пользованием 1ауа8спр1 для рисования на нем, настала пора приступать к более под-
робному изучению различных инструментов рисования, предлагаемых разработчикам.

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

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

Структура

В этой главе рассматриваются следующие темы:

♦	Способы рисования прямоугольников на холсте НТМЬ5.

♦	Приемы заполнения прямоугольников заливками, градиентами и узорами.

♦	Сведения о загрузках изображений и об управлении ими в 1ауа8спр1.

♦	Способы сохранения, перемещения и восстановления контекста холста.

Цели

После освоения предлагаемого материала ваш арсенал инструментов веб-разра-
ботчика расширится за счет полного набора приемов рисования прямоугольников.
Кроме того, попутно вы освоите ряд базовых, но весьма удобных методов
1ауа8спр1, применимых к другим функциям холста и НТМЬ, а также к рисованию
прямоугольников.

О примерах работы с холстом

Чтобы избежать ненужных сложностей, далее в этом разделе книги примеры ис-
пользования элемента холста даются только с кодом 1ауа8спр1 без окружения из
кода НТМЬ. Нужно будет исходить из предположения, что в документе уже создан
элемент <сапуаз> с идентификатором сапуаз (как правило, шириной 640 и высотой
320 пикселей), а также, что в сценарий уже включены две первые строки на
1ауа8спр1, создающие контекст для записи на холст (строки 16 и 17 примера 7.1).

В примере 7.1 показан полноценный НТМЬ-документ, который, как будет предпо-
лагаться далее, присутствует во всех примерах работы с холстом. Он уже должен
быть знаком по коду незаполненного зеленого прямоугольника из главы 6 «Ис-
пользование холста НТМЬ5». А далее будет показываться только код, размещен-
ный внутри двух комментариев (строки 19 и 24) (и по ходу чтения главы там будут
появляться многочисленные дополнительные строки). А архиве файлов примеров,
прилагаемом к книге, будет присутствовать весь окружающий НТМЬ-код, позво-
ляющий запускать пример сразу на выполнение без ввода недостающих строк.

Пример 7.1

1.	<! ЭОСТУРЕ Ьбт1>

2.	<кГт1 1апд="еп’’>

3.	<Ьеас1>

4.	<теба сЬагзеб="ибГ-8" />

5.	<Г1Г1е>Ехатр1е ВоситепГ</Г1Г1е>

6.	<збу!е>

7.	#сапуаз {

8.	Ьаскдгоипс1-со1ог : суап;

9.	Ьогбег	: 1рх зоИб Ыаск;

10.	}

11.	</зку!е>

12.	</Ьеас1>

13.	<Ьос1у>

14.	<сапуаз 1с1=’сапуаз’ и1с±Ь=’ 640 ’ Ье1дЬк=’320’></сапуаз>

15.	<зсг!рк>

16.	сапуаз = с!оситепк.декЕ1етепкВу1с1( ’ сапуаз ’)

17.	сопкехк = сапуаз .декСопкехк (’2с1’)

18.

19.	// Примеры буду начинаться здесь

20.	сопкехк.ЬедтпРакН()

21.	сопкехк.зкгокеЗку1е = ’дгееп’

22.	сопкехк.геск (20, 20, 600, 280)
23.	сопбехб.збгоке()

24.	//А здесь они будут заканчиваться

25.	</зсг1рб>

26.	</Ьобу>

27.	</Ьбт1>

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

Комментарий создается путем вставки в любом месте программы двойного слэша,
показывающего, что весь последующий текст игнорируется, не считаясь инструк-
цией 1ауа8спр1.

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

сопбехб.ЬедтпРабЬ()

сопбехб.збгокеЗбуХе = ’дгееп’

сопбехб.гесб(20, 20, 600, 280)

сопбехб.збгоке()

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

Рисование прямоугольников

Прямоугольники — одна из самых простых фигур для рисования на холсте
НТМЬ5. Их можно рисовать с заполнением или контурно, используя различные
стили, настраиваемые отдельно в текущем контексте, или же, если никакие стили
не установлены, с использованием исходных значений.

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

сопбехб.збгокеКесб(20, 30, 50, 70)

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

сопкехк.зкгокеКеск(г_1еГкЛ г_корЛ г_м1сГккр г_ке1дкк)

Использование переменных

Дело в том, что в 1ауа8спр1, как и во всех языках программирования, есть так назы-
ваемые переменные. Это именованные контейнеры, содержащие значения, в каче-
стве которых могут быть цифры, числа, строки текста и т. д. В этом случае нам
просто нужны обычные числа, и если бы предыдущую строку кода включить в ра-
боту, то сначала следовало бы присвоить переменным значения:
г_1екк =10
г_кор =20
= 400

г_Ъе1дЪк = 200

Префикс г_ означает «гес!ап§1е», т. е. «прямоугольник», и обеспечивает уникаль-
ность имен переменных, поскольку некоторые слова, вроде кор, 1екк и т. д. могут
входить в перечень зарезервированных слов языка 1ауа8спр1, используемых в це-
лях, не входящих в круг обсуждаемых в книге вопросов.

Так или иначе, строки, помещенные перед инструкцией рисования прямоугольника,
приведут к появлению на холсте прямоугольника размером 400 на 200 пикселей, с
верхним левым углом, отстоящим на 10 пикселей внутрь и на 20 пикселей вниз.

Но не следует забывать, что сначала нужно объявить начало нового пути. Давайте
объединим все означенные строки в некий работающий код, показанный в примере
7.2 (памятуя о том, что весь окружающий НТМЬ и некоторые другие части в этом
примере опущены). Результат запуска кода можно увидеть на рис. 7.1.

Пример 7.2

г_1екк =10

г_кор =20

г_м1с1кк = 400

г_Ие1дЪк = 200

сопкехк.ЬедтпРакИ()

сопкехк. зкгокеРеск (г_1еккЛ г_корЛ г_м1сГк1ъ г_Ъе1дкк)
сопкехк.зкгоке()

Если ранее еще никогда не приходилось программировать, посмотрите, как в ходе
обучения рисованию прямоугольника удалось немного приоткрыть для вас завесу
тайн программирования на 1ауа8спр1. А представьте себе, каких невероятных успе-
хов в этом деле предстоит добиться к концу чтения книги!
Рис. 7.1. Использование переменных для рисования прямоугольника без заливки

Применение стилей рисования

Теперь вы умеете рисовать прямоугольники. Давайте посмотрим, как можно сде-
лать их интереснее, изменив способ рисования, и начнем с их заполнения. В главе 5
«Введение в НТМИ5», если помните, говорилось, что не нужно довольствоваться
рисованием только пустых прямоугольников. Гораздо чаще понадобится их чем-то
заполнять, и при этом можно воспользоваться множеством различных эффектов,
начиная с простой заливки (как это делается в примере 7.3), где, как показано на
рис. 7.2, рисуется желтый прямоугольник с синей рамкой.

Пример 7.3

сопкехк.зкгокеЗкуХе = ’Ыие'

сопкехк. ГШЗкуГе = ’уеПом’

сопкехк.ЬедгпРакк()

сопкехк. ГШКеск ( 20, 20, 600, 280)

сопкехк.зкгокеРеск(20, 20, 600, 280)

сопкехк.зкгоке()

Теперь уже нетрудно разобраться во всем здесь происходящем. Сначала синим цве-
том задается внешняя граница прямоугольника и желтая внутренняя заливка, затем
объявляется начало нового пути, заполняется прямоугольник, рисуется путь и, на-
конец, путь закрывается.
0 АбсГтд Г1Ц5	X +

> С О ® 1оса1Ьо51/Ехатр1е5/5ес1юп-2/07/ехатр1е ОЗ.Нг... Й ☆ Л :

Изменение толщины линии

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

Пример 7.4

сопГехГ.11пеЭД1сШ1 = 20

Посмотрите, с какой легкостью выбирается толщина рисуемых линий. Также обрати-
те внимание, что толщина добавляется по обе стороны рисуемой линии, поэтому она
расширяется как во внешнюю, так и во внутреннюю сторону. Вопреки ожиданиям,
что прирост будет либо в одну, либо в другую сторону, при создании своих фигур
следует помнить, что он равномерно идет в обе стороны, т. е. в результате изменения
толщины линии новый прямоугольник (включая его контур) теперь занимает больше
места, чем прямоугольник с указанным размером 600 х 280 пикселей.

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

© СЬапдтд Ьпе	X +

С О © 1оса1Ьо51/Ехатр1е5/5ес11Оп.2/07/ехатр1е_04.КГ & Ф

Рис. 7.3. Увеличение толщины контурной линии

Очистка прямоугольника

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

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

Пример 7.5

соп^ех^.с1еагКес^(70, 70, 500, 180)
Теперь, освоив приемы установки атрибутов зкгокеЗкуХе, шхзкуХе, Ыпемхаъь, Ш1-
кеск, зкгокекеск и сХеагКеск, давайте развлечемся применением градиентной заливки.

© С1еаппд а Кес1апд1е	X +

С О © 1оса1Но5ЦЕхатр1е5/5есПоп_2/07/ехатр1е_05.М © ☆	*

Рис. 7.4. Прямоугольная часть холста очищена

Применение градиентной заливки

Простой градиентный эффект уже встречался в главе 5 «Введение в НТМЬ5». Те-
перь посмотрим, как его можно добиться с применением функции тхпесЩ) для
прямоугольников (или обычной функции шх(), рассматриваемой в главе 9 «Рисо-
вание на холсте») в сочетании с функцией сгеакеъХпеагСгааХепк (). В качестве аргу-
ментов эта функция принимает две пары координат X, V, определяющие начало и
конец градиента на холсте.

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

А теперь давайте нарисуем четыре разных черно-белых градиента, используя при-
мер 7.6, где первые три градиента линейные, а последний градиент радиальный. Но
сначала следует заметить, что для упрощения редактирования назначаемых цвето-
вых настроек в строках 1 и 2 используются переменные (концепция которых была
рассмотрена ранее в этой главе) с именами соХогХ и соХог2.
Пример 7.6

1.	С010Г1 = '#РРР'

2.	со!ог2 = '#000'

3.

4.	дгасНепЕ = сопЕехЕ. сгеаЕеЫпеагбгасНепЕ (55, 10, 55, 160)

5.	дгасНепЕ. аскЮоЕогЗЕор (0, со1ог1)

6.	дгасНепЕ. аскЮоЕогЗЕор (1, со!ог2)

7.	сопЕехЕ. ЕИ13Еу1е = дгасНепЕ

8.	сопЕехЕ.ЕШКесЕ (10, 10, 90, 150)

9.

10.	дгасНепЕ = сопЕехЕ. сгеаЕеЫпеагСгасНепЕ (110, 85, 200, 85)

11.	дгасНепЕ. ас!с1Со1огЗЕор (0, со1ог1)

12.	дгасНепЕ. асЕ1Со1огЗЕор (1, со!ог2)

13.	сопЕехЕ. ЕШЗЕу1е = дгасНепЕ

14.	сопЕехЕ.ЕШКесЕ (110, 10, 90, 150)

15.

16.	дгасНепЕ = сопЕехЕ.сгеаЕеЫпеагСгасНепЕ (210, 10, 300, 160)

17.	дгасНепЕ. асМСо1огЗЕор (0, со!ог1)

18.	дгасНепЕ.асК1Со1огЗЕор (1, со!ог2)

19.	сопЕехЕ. ЕШЗЕуЕе = дгасНепЕ

20.	сопЕехЕ. ЕШКесЕ (210, 10, 90, 150)

21.

22.	дгасНепЕ = сопЕехЕ.сгеаЕеКасНаКЗгасНепЕ (355, 85, 0, 355, 85, 100)

23.	дгасНепЕ.асК1Со1огЗЕор (0, со!ог1)

24.	дгасНепЕ.асК1Со1огЗЕор (1, со!ог2)

25.	сопЕехЕ. ЕШЗЕу1е = дгасНепЕ

26.	сопЕехЕ.ЕШКесЕ (310, 10, 90, 150)

Для первой градиентной заливки в строке 4 в качестве начального положения гра-
диента указываются параметры 55,ю, а в качестве конечного — 55, 160. Дело в том,
что указывать параметры градиентов нужно на основе абсолютных координат хол-
ста, а не положения относительно взятых любых фигур, назначаемых к заполнению.

Следовательно, если первая градиентная заливка (показанная в строке 8) имеет ши-
рину 90 и высоту 150 пикселей, а ее верхний левый угол начинается в позиции ю, ю,
то точка 55,10 находится на полпути протяженности верхнего края области запол-
нения, а 55, 160 — на полпути к нижнему краю. Получается, градиент будет начи-
наться в верхней части заполняемой области (прямо в центре, но распространяться
по горизонтали), а затем будет стекать сверху вниз, к центру нижнего края.

В строках 5 и 6 задается начальное местоположение, где начинается белый цвет
(заданный переменной с именем со1ог1, для которой в строке 1 установлено значе-
ние '#ррр', а для нижней точки задается черный цвет (заданный переменной со1ог2,
для которой в строке 2 установлено значение '#000'), благодаря чему обеспечивает-
ся равномерность градиента между этими двумя цветами. В строке 7 только что
заданные характеристики градиента применяются к свойству контекста ЕШЗЕу1е.
Затем в строке 8 для рисования заливки вызывается функция гшкесЩ) .В результа-
те появляется левый прямоугольник, показанный на рис. 7.5, где, чтобы не загро-
мождать (и не усложнять) код, показано, что нарисованы только заливки без обвод-
ки прямоугольников, присутствующей в некоторых предыдущих примерах.

ф 5ипр1е СгаЙ1впТ5	X +

-У С О © 1оса1Ьоб1/Ехатр1е5/5ес{1оп 2/О7/екатр1е Об.Ыт! © ☆ Л- ;

Рис. 7.5. Подборка из четырех различных градиентных заливок

И теперь уже вы должны понять, что происходит в следующих двух областях за-
ливки, где во второй области градиент, согласно значениям, заданным в строке 10
(от точки с координатами пог85 до точки 200,85), идет слева направо с середины
левой стороны до середины правой стороны прямоугольника. А градиент третьего
прямоугольника (от точки с координатами 210, ю до точки зоо, 16о) идет по диагона-
ли от его верхнего левого вниз к его правому нижнему углу.

Применение радиального градиента

Четвертая заливка немного отличается от предыдущих, поскольку в ней показан
радиальный градиент, идущий от центра к внешней стороне прямоугольника. Что
здесь происходит, станет ясно, стоит лишь разобраться, что первые три аргумента
— это координата X, V и радиус начального цвета, а последние три аргумента —
это конечная точка X, V и радиус, в данном случае, из точки 355, 85 с радиусом о, в
ту же точку (355, 85), но с радиусом юо пикселей.

Для второго круга было выбрано значение радиуса 100, потому что его диаметр на-
ходится за пределами большей части прямоугольной области. В противном случае,
если бы он, к примеру, был ограничен только шириной прямоугольника (возможно,
с использованием значения 45 для радиуса, поскольку ширина прямоугольника со-
ставляет 90 пикселей), то верхняя и нижняя части прямоугольника были бы полно-
стью черными, а заливка отображалась бы только в его центре. Но при юо пикселях
градиент виден до самых углов прямоугольника.

Подытожим: начальное положение представляет собой точку нулевого размера, а
не круг (из-за нулевого радиуса), а центр конечного круга находится в том же мес-
те, что и начальный круг, но имеет больший радиус. Предоставление параметров
двух окружностей (а не одной центральной точки X, V и двух радиусов), обуслав-
ливается обеспечением гибкости проектов, позволяющей создавать не просто круг-
лые радиальные заливки, но и такие, что, согласно задуманному, смогут распро-
страняться по всей заливаемой области.

Так создаются монохромные заливки. А теперь перейдем к разноцветным заливкам.

Разноцветные градиентные заливки

На данный момент изменение цвета проще всего показать путем замены черного и
белого цвета из примера 7.6 на разные цвета. Если так и сделать, изменив следую-
щим образом содержимое строк 1 и 2, то на рис. 7.5 отобразились бы различные
оттенки желтого, оранжевого и, наконец, красного цвета. Не хотите сами в качестве
простого упражнения попробовать это сделать, используя различные пары цветов?

1.	со1ог1 = ’уеИсж'

2.	со!ог2 = ’гесГ

Но зачем останавливаться на достигнутом, когда можно создавать эффекты разно-
цветной радуги? Давайте так и сделаем с кодом примера 7.6, добавив в набор еще
три цвета (и вставив ссылки на эти цвета в каждую из четырех заливок прямо-
угольника), чтобы получился код, показанный в примере 7.7, где показано, что по-
рядок выбранных цветов для прямоугольников 2-4 перестроен, просто чтобы все
немного перемешать.

Пример 7.7

1.	со!ог1	=	’уеНою’

2.	со!ог2	=	’дгееп’

3.	со!огЗ	=	’гесГ

4.	со!ог4	=	’у1о1еГ’

5.	со!ог5	=	’Ыие'

7.	дгасПепГ = сопГехГ.сгеаГеЫпеагбгасПепГ (55, 10, 55, 160)

8.	дгасПепГ. ас!с1Со1огЗГор (0.0, со1ог1)

9.	дгасПепГ. ас!с1Со1огЗГор (0.2, со!ог2)

10.	дгасПепГ. асМСо1огЗГор (0.5, со!огЗ)

11.	дгасПепГ. ас!с1Со1огЗГор (0.8, со!ог4)

12.	дгасПепГ. ас!с1Со1огЗГор (1.0, со1ог5)
13.	сопГехГ. ГИ131:у1е = дгасПепГ

14.	сопГехГ.ГШКесГ (10, 10, 90, 150)

15.

16.

17.

18.

19.

20.

21.

22.

23.

24.

25.

26.

27.

28.

29.

30.

31.

32.

33.

34.

дгасПепГ = сопЪехЪ.сгеа’ЪеИпеагСгасИеп’Ь(110, 85, 200, 85)

дгасПепГ. ас!с1Со1ог3^ор (0.0, со!ог1)

дгасИепЪ.ас!с1Со1ог311ор(0.2, со!огЗ)

дгасИепЪ. аск!Со1ог3^ор (0.5, со!ог5)

дгасНеп^. аск!Со1ог3^ор (0.8, со!ог2)

дгасПепГ. аск!Со1ог3^ор (1.0, со!ог4)

сопГехГ. ГИ13Гу1е = дгасНеп^

сопГехГ.ГШКесГ (110, 10, 90, 150)

дгасПепГ = сопГехГ. сгеаГеЫпеагбгасПепГ (210, 10, 300, 160)

дгасНепЪ. аск!Со1ог3^ор (0.0, со!огЗ)

дгасИеп^. аск!Со1ог3^ор (0.2, со!ог4)

дгасИеп^. аск!Со1ог3^ор (0.5, со!ог1)

дгасНегЛ. асМСо1огЗГор (0.8, со!ог5)

дгасПепГ. асМСо1огЗГор (1.0, со!ог2)

сопГехГ. ГШЗГу1е = дгасНепЪ

сопЪех^.ГШВес^ (210, 10, 90, 150)

дгасПепЪ = соп^ех^.сгеа^еКасПаКЗгасПепГ (355, 85, 0, 355, 85, 100)

35.	дгасИепЪ.ас!с1Со1ог311ор (0.0, со!ог4)

36.	дгасИеп-Ь.ас!с1Со1ог3^ор (0.2, со!ог2)

37.	дгасИеп^. ас!с1Со1ог3^ор (0.5, со!ог1)

38.	дгасПеп^. аск!Со1ог3^ор (0.8, со!ог5)

39.	дгасНепГ. ас!с1Со1огЗГор (1.0, со!огЗ)

40.	сопГехГ.ГИ13Гу1е = дгасПепГ

41.	сопГехГ.ГШКесГ (310, 10, 90, 150)

Результат загрузки кода примера 7.7 в браузер можно увидеть на рис. 7.6, где будет
заметно существенное отличие от предыдущих монохромных заливок.

Несложно заметить, что дополнительные цвета добавляются в виде дополнитель-
ных вызовов функции ааасо1огз^ор () со значениями первого параметра в диапазоне
от о до 1. Например, когда для градиента задавалось всего два цвета, этот параметр
был либо 0 для первого цвета, либо 1 для второго, но в строках с 8 по 12 примера 7.7
можно увидеть, что пять цветов были добавлены с использованием для этого пара-
метра аргументов с плавающей точкой со значениями между о. о и 1.0.

Все это работает следующим образом: нужно представить, что вся градиентная за-
ливка занимает пространство, заданное значением с плавающей точкой между о. о и
1.0. Если требуется, чтобы определенный цвет появлялся в градиенте на протяже-
нии 25% пространства, тогда его параметр начального расстояния ааасо1огз^ор()
нужно установить равным 0.25, аналогичным образом для цвета, который должен
отображаться на одну треть градиентной заливки, следует воспользоваться значе-
нием о.зз.
@ Ми1Ьсо1сгед бгаЫелй;	X +

4- С А ® 1оса1Ьо$№атр1еМ5ес1юп_2/07/ехатр1е 07 Гит1 & ☆ Й- :

Рис. 7.6. Четыре разных заливки разноцветным градиентом

В примере видно, что для цветового решения вдоль градиента выбраны значения
0%, 20%, 50%, 80% и 100%, поскольку аргументы расстояний, предоставленные
для пяти цветов, равны о. о, 0.2, 0.5, о. 8 и 1.0. Позиционирование может быть любой
желаемой точности, например, если нужно, для начала цвета можно выбрать рас-
стояние 0.3145927.

И вот еще что: поскольку цветовые значения определены в первых пяти строках
примера, чтобы посмотреть, каких других эффектов можно достичь, рекомендуется
применить другие названия того или иного цвета (или воспользоваться строковыми
значениями с использованием символа # в стиле С88) и изменить порядок, исполь-
зуемый в четырех прямоугольниках, а также расстояния, с которых каждый цвет
появляется вдоль каждого градиента. По сути, к градиенту можно добавлять сколь-
ко угодно цветовых значений, и от экспериментов с кодом примера можно полу-
чить массу удовольствий.

Разобравшись с этим примером и с градиентами, давайте посмотрим на заполнение
областей узорами.

Использование заполнения узором

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

Сделать это можно с помощью функции сгеаЪеРаъъегп (), передав ей два аргумен-
та: используемое изображение и тип повторения, применяемый для заполнения.
В примере 7.8 показан код предыдущего примера с несколькими дополнительными
строкам, предназначенными для заполнения пятого прямоугольника большего раз-
мера. Но будьте готовы к тому, что разобраться с кодом 1ауа8спр1 удастся не с пер-
вого раза.

Пример 7.8

43.	ттаде	= нем 1таде()

44.	гтаде.згс = ’Ше.рпд’

45.

46.	1таде. оп1оас! = Гипс^1оп()

47.	{

48.	раЪГегп = сопЪех^.сгеа'ЬеРаГГегп (лпаде, ’гереа^’)

49.	сопРехР. ГШЗГуГе = раРРегп

50.	сопГех!:.ГШКесЪ (410, 10, 220, 300)

51.	}

По нумерации строк понятно, что они являются продолжением кода примера 7.6.
Давайте разберемся в их назначении. Сначала в строке 43 из пустого несущест-
вующего изображения создается новый объект 1ауа8спр1. Объект подобен пере-
менной, но он может содержать более широкий набор типов данных (в данном слу-
чае это изображение). Как только объект создан, атрибуту источника зге (анало-
гичному зге из НТМЬ) присваивается имя файла Ше.рпд, и 1ауа8спр1 получает
указание на начало извлечения изображения и размещения его в объекте изображе-
ния. Пока что объект изображения в 1ауа8спр1 очень похож на элемент изображе-
ния в НТМЬ или С88.

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

В 1ауа8спр1 существует множество различных событий, на которые можно реаги-
ровать, например, нажатие клавиши или перемещение мыши. В этом случае нужно
лишь узнать о моменте загрузки изображения в память, поэтому в строке 46 безы-
мянная функция присоединяется к событию оп1оаа вместе с соответствующими от-
крывающей { и закрывающей } фигурными скобками. Они сообщают 1ауа8спр1 о
местонахождении тех инструкций, которые будут выполняться после загрузки изо-
бражения. А выполняться в тот момент будут только те инструкции, которые за-
ключены в фигурные скобки.

Внутри них находятся всего три строки кода. В строке 48 путем вызова функции
сгеа^еРа^егп() в контексте создается объект раъъегп, которому присваивается имя
используемого изображения и требуемый тип повтора. В данном случае это то са-
мое изображение, которое только что было загружено в объект ттаде, а значение
гереа^ для параметра повторения устанавливает выкладывание узоров в направле-
ниях Хи V (вдоль и вниз).

Загружаемое изображение можно увидеть на рис. 7.7, а результат добавления всего
этого кода в пример показан на рис. 7.8.

Рис. 7.7. Изображение, хранящееся в файле Й1е.рп§

Рис. 7.8. Добавление на холст заполнения узором
Использование перемещения

В строке 48 примера 7.8 в качестве типа повторения указано просто значение
гереа^, что означает повторение в обоих направлениях: X и V. Для получения того
же результата по умолчанию тип повторения также может быть опущен. Но можно
также выбрать повторение только в горизонтальном направлении X или вертикаль-
ном направлении V.

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

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

Пример 7.9

53.	ра^егп = сопГехГ. сгеаГеРаГГегп (1таде, 'гереа^-у')

54.	соп^ех^. ГШЗГу1е = раГГегп

55.	сопрех^. ННКесМЖ 170Л 190, 140)

Единственное отличие этих строк кода — то, что в строке 53 устанавливается зна-
чение повторения гереа^-у, а в строке 55 в левом нижнем углу холста рисуется пря-
моугольник, показанный на рис. 7.9.

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

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

Пример 7.10

57.	сопЪех^.зауе()

58.	соп^ех^.^гапз!а^е(210, 170)

59.	раЪ^егп = соп^ехЪ.сгеаЬэРа^егп (ттпаде, 'гереа^-х')

60.	соп^ех^. ГИ13Гу1е = раГГегп

61. соп-ЬехЪ. ГШКесЬ (О, 0, 190, 140)

62. сопРехР.гез^оге()

Рис. 7.9. Вертикальное заполнение узором, примененное к левой нижней части холста

Перемещение контекста из его исходного местоположения может создать путани-
цу, если позже забыть о сделанном, поэтому в 1ауа8спр1 для сохранения всех дета-
лей контекста в безопасной части памяти доступна функция сохранения зауе() с
соответствующей ей функцией восстановления гезЪогеО, возвращающей предыду-
щие настройки. В строках 57 и 62 задано сохранение, а затем восстановление со-
стояния контекста, позволяющее делать между ними все, что угодно.

В строке 58 верхний левый угол холста перемещается в позицию, где нужно раз-
местить верхний левый угол области заполнения— 210,70. Иными словами, холст
остается там же, где и был, но все последующие команды будут перемещены для
применения в местах со смещением от нового местоположения на величину пере-
мещения. Это перемещение координат теперь будет применяться до тех пор, пока
код не закончится, и не произойдет другое перемещение или же не будет восста-
новлено предыдущее состояние контекста.
В строках 59 и 60 создается узор с использованием значения повторения гереа^-х.
Затем, в строке 61 для угла заполнения просто указывается значение о, о, поскольку
верхний левый угол области заполнения уже перемещен, а также указывается ши-
рина и высота 190 х 140 пикселей. Поскольку холст временно переведен в позицию
210,170, то координата о, о верхнего левого угла области заполнения фактически на-
ходится в изначально желаемой позиции 210, 170.

И наконец, при выполнении вызова функции гезЪоге() в строке 61 все возвращается
в нормальное состояние, и в результате, показанном на рис. 7.10, угол первого узо-
ра соответствует верхнему левому углу области заполнения.

0 ОгасЙепь ап<3 РаПегт 3 X +

<- С О О I□саII^о5V^атрIе5/5ес1Iоп_2/07/еxатрIе..10.^1^тI	:

Рис. 7.10. Горизонтальное заполнение, нарисованное в перемещенном месте

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

Да, кстати, для заполнений узорами есть также вариант без повторов, когда изо-
бражение не складывается в мозаику. Больше всего это подходит для создания
сплошного фона, полностью заполняющего область без нежелательного появления
мозаики. Можно, конечно, возразить, что в таких случаях зачастую можно было бы
в соответствии с приемами, рассматриваемыми в главе 10 «Управление холстом»,
обойтись отрисовкой узора обычным способом, не беспокоясь о переносах.
Заключение

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

Попутно также были получены дополнительные сведения о 1ауа8спр1, в том числе
о том, как загружать изображения непосредственно из кода без использования
НТМЬ, и даже о том, как можно дождаться загрузки изображения, прежде чем по-
лучить к нему доступ. Более того, теперь известно, как перемещать контекст холста
в разные места для достижения желаемых эффектов, а также, как сохранять и вос-
станавливать состояние контекста.

Это действительно солидный багаж новых знаний. Но, надеюсь, эта глава помогла
все усвоить, поскольку в ней были достаточно подробно изложены новые знания об
управлении холстом НТМБ5. В следующей главе предстоит изучить различные ме-
тоды, которыми можно воспользоваться для создания надписей на холсте.
ГЛАВА 8

Надписи на холсте

Введение

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

Разумеется, текстовая часть в языке гипертекстовой разметки (НТМЬ) имеется, по-
скольку он изначально предназначался для создания текстовых веб-страниц и обла-
дал способами включения различных шрифтов, средств выразительности, цветовых
решений и стилей. А С88 существенно расширяет оформительские возможности.

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

Структура

В этой главе рассматриваются следующие темы:

♦	Применение различных способов написания текста на холсте НТМЬ5.

♦	Приемы выравнивания текста и применение базовых линий.

♦	Приемы обводки или заполнения текста разными способами.

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

Цели

Изучив предлагаемый материал, вы сможете делать на холсте НТМЬ5 любые тек-
стовые надписи, используя для этого широкий диапазон шрифтов, цветовых реше-
ний и стилей, включая линейные и радиальные цветные и монохромные градиенты,
одноцветные заливки или обводки, а также узнаете, как загружать изображения,
чтобы использовать их в качестве заливки текста узором.

Создание надписей

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

сопГехГ. зГгокеТехГ (’ То Ье, ог поГ Го Ье...’, 50, 50)

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

Изменение способа отображения текста

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

сопГехГ.ГопГ =
сопГехГ.ГопГ =
сопГехГ.ГопГ =
сопГехГ.ГопГ =
сопГехГ.ГопГ =

’Зет Не1уеЫса
Чбрх 1трасГ’
'150% Соигаег'
' Ютт Татез ’
’50рГ Аг1а1’

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

Пример 8.1

1.	оиГриГ = 'То Ье, ог поГ Го Ье...’

2.

3.

сопГехГ.ГопГ = ’ Зет Не1уеЫса’
4.	сопкехк.зкгокеТехк(оикрик, 10,	50)

5.

6.	сопкехк.Гопк = ’16рх 1траск’

7.	сопкехк.зкгокеТехк(оикрик, 10,	100)

8.

9.	сопкехк.Гопк = ’150% Соигиег’

10.	сопкехк.зкгокеТехк(оикрик, 10,	150)

11.

12.	сопкехк.Гопк = ' 10тлт Т1тез ’

13.	сопкехк.зкгокеТехк(оикрик, 10,	210)

14.

15.	сопкехк.Топк = ’50рк Агйа!’

16.	сопкехк.зкгокеТехк(оикрик, 10,	300)

0 УУгЮпдТехС	X +

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

Выравнивание текста

Зачастую, как, например, в случае обработки текста, возникает желание выровнять
текст не по левому краю, а по правому или по центру, и сделать это можно с помо-
щью свойства контекста кехкАИдп, в котором на данный момент поддерживаются
ПЯТЬ значений: зкагк, епа, 1екк (по умолчанию), гГдкк И сепкег.
Но по своей сути и назначению 1екк и зкагк, а также гХдЬк и епа весьма похожи друг
на друга, за исключением того, что при использовании зкагк выводимый текст для
региональных настроек с направлением написания текста слева направо выравни-
вается по левому краю, а для таких же настроек с направлением справа налево —
по правому. А при использовании епа текст для региональных настроек с направле-
нием написания текста слева направо выравнивается по правому краю, а для таких
же настроек с направлением справа налево — по левому. Тем самым обеспечивает-
ся поддержка языков, где текст читается справа налево, но новичкам лучше воз-
можность применения этих настроек игнорировать, чтобы не возникла путаница
(подробнее в примечании ниже).

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

Ф Тех1АПдп1пд	X +

Пример 8.2

1.	оикрик = ’То Ье, ог пок ко Ье...’

2.

3.	сопкехк.Гопк	= ’Зет НеТуекаса’

4.	сопкехк. кехкАИдп = ’гХдкк’

5.	сопкехк. зкгокеТехк (оикрик, 630,	50)

6.

7.	сопкехк. кехкАИдп = ’1екк’
8.	сопкехк.Гопк = ’16рх 1трасЪ’

9.	сопкехк.зкгокеТехк(оикрик, 10,	100)

10.

11.	сопкехк. кехкАИдп = ’сепкег’

12.	сопкехк.Гопк = 1150% Соигтег’

13.	сопкехк.зкгокеТехк(оикрик, 320,	150)

14.

15.	сопкехк. кехкАИдп = ’зкагк’

16.	сопкехк. 1опк = ’Юпип Т1тез'

17.	сопкехк.зкгокеТехк(оикрик, 10, 210)

18.

19.	сопкехк. кехкАИдп = ’епсГ

20.	сопкехк.Гопк = ’50рк Аг1а1'

21.	сопкехк.зкгокеТехк(оикрик, 630, 300)

Здесь для хранения отображаемой строки также используется переменная оикрик.
После этого в пять разделов внесены изменения для выравнивания в следующем
порядке: по правому краю, левому краю, центру, началу и концу (г1дьъ, 1егъ, сепкег,
зкагк и епа). Чтобы поддержать эти настройки, для первой и пятой группы инструк-
ций, где задается выравнивание по правому краю (г1дЫз) и концу (епа), горизон-
тальное смещение от левого края холста было перемещено до отступа всего в 10
пикселей от правого края. А для текста, выравниваемого по центру в третьей груп-
пе, задано горизонтальное смещение точно в центре холста, поскольку текст будет
отцентрован вокруг любой предоставленной координаты, а нам нужно, чтобы он
находился точно посередине холста.

Примечание

Если бы свойства зкагк и епа из последних двух инструкций применялись в ус-
ловиях изменения направления письма на «справа налево» путем добавления в
тег <нтмъ> в примере 8.2 атрибута а1г="гЪ1", возник бы хаос, и основная часть
текста стекла бы с холста. Попробуйте так сделать, чтобы увидеть результат, а
затем попытайтесь исправить отображение, чтобы оно приобрело должный вид,
изменив для этих двух групп инструкций значения смещения по горизонтали.
После этого нетрудно будет понять, что новичкам по причине множества потен-
циальных проблем вряд ли стоит связываться с этими свойствами.

Изменение толщины обводки

Толщину обводки текста, нарисованного с помощью функции зЪгокеЕопЩ), можно
изменить точно так же, как и толщину обводки прямоугольников из главы 7 «Пря-
моугольники и заливки». Давайте внесем изменения в предыдущий пример, чтобы
получить код, показанный в примере 8.3, и посмотрим, какие можно создать эф-
фекты. По мере раскрытия темы примеры становятся все длиннее, поэтому в сле-
дующем номера не проставлены, и показаны только новые строки, добавленные в
начале каждой из пяти групп (не забывайте, что полный пример включен в прила-
гаемый к книге архив).

Пример 8.3

сопГехГ. 11пеЭД1сН±1 = 2
сопГехГ. 11пеЭД1сН±1 = .5
сопГехГ. 11пеЭД1сН±1 = .8
сопЪех-Ь. 11пе^1аъЬ. = .25
соп^ех^. ИпеЖс±Ъ = 7

В этом примере для линий пяти групп инструкций указывается толщина 2, .5, .8,
.25 и 7. Результат применения этого кода показан на рис. 8.3, где можно увидеть
наличие выбора между очень мелким и светлым текстом, чрезмерно жирным
шрифтом и довольно уродливыми результатами в самом последнем тексте, где ши-
рина линии составляет 7 пикселей.

ф Тех! Ипе	X +

С О О 1оса11по51/САатр1е5/5ес11ОП_2/08/ехатр1е ОЗ.Н(т1	:

То Ье, ог поЪ Ъо Ье

То Ье, ог по! Ь Ье...

Рис. 8.3. Результат применения различной толщины линий

Как видите, ограничений на применение дробных значений здесь нет. А вот значе-
ния о нужно остерегаться, поскольку оно, похоже, игнорируется (да и как можно
себе представить линию нулевой толщины?), и все ранние назначения параметру
Ппе^аъь остаются в силе.

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

Есть четыре варианта выравнивания основания текста: сверху (кор), посередине
(т1аа1е), по символам (а1рЬаЬек1с) (по умолчанию) и снизу (ьоккот). Значение этих
терминов в примере 8.4 выражено в виде текста, наложенного на горизонтальную
направляющую линию и показывающего, где именно будет отображаться текст от-
носительно линии для каждого применяемого термина.

Пример 8.4

1.	сопкехк.зкгокеЗку!е	= "Ыие"

2.	сопкехк.тоуеТо(О,	160)

3.	сопкехк.ИпеТо (640,	160)

4.	сопкехк.зкгоке ()

5.	сопкехк.зкгокеЗку!е	= "геа"

6.	сопкехк. ИпеШакк	= 2

7.	сопкехк.Гопк	= ’26рк НеГуекгса’

8.

9.	сопкехк. кехкВазеИпе = ’кор’

10.	сопкехк.зкгокеТехк(’Тор’, 20, 160)

11.

12.	сопкехк. кехкВазеИпе = ’ш1аа1е’

13.	сопкехк.зкгокеТехк(’М1аа1е’, 150, 160)

14.

15.	сопкехк. кехкВазеИпе = ’Ьоккот’

16.	сопкехк.зкгокеТехк(’Воккот’, 300, 160)

17.

18.	сопкехк. кехкВазеИпе = ’а1ркаЬек1с'

19.	сопкехк.зкгокеТехк (’АГркаЬеНс’, 450, 160)

В этом примере в строках с 1 по 4 дается наш первый пример рисования отдельной
линии. После отрисовки множества прямоугольников уже должно быть понятно,
как это работает. В строке 1 задается синий цвет рисунка, в строке 2 он перемеща-
ется в положение от левой кромки холста на половину расстояния вниз, в строке 3
задается горизонтальная линия, направленная к правой кромке, а затем в строке 4
рисуется линия, указанная в предыдущих инструкциях.

После этого в строках с 5 по 7 цвет меняется на красный, устанавливается толщина
линии в 2 пикселя и выбирается размер и название шрифта. Затем следуют четыре
пары инструкций, каждая из которых устанавливает значение для свойства
кехкВазеИпе, после чего на его основе записывается тот или иной текст. Результат
всего этого можно увидеть на рис. 8.4, где смутить может только один третий эле-
мент, который смотрится парящим над базовой линией.
Но в действительности ничего подобного нет, поскольку в тексте нет нисходящих
символов нижнего регистра. Если бы там, к примеру, были слова с буквой у или д,
текстовая строка располагалась бы прямо на базовой линии. Есть еще два других
значения, применяемых к свойству вехввазеПпе: подвешенного текста (ьапдтпд)
(аналогичного значению вор) для тибетских и других индийских шрифтов, и идео-
графического текста (ЫеодгарМс) (аналогичного значению Ьоввот) для китайских,
японских и корейских шрифтов. Объяснение порядка их использования можно най-
ти в Интернете.

0 Тех1 Ва$е Ипе	X +

Надписи с заполнением

Как и к прямоугольникам, к тексту можно применять все заливки, градиенты и за-
полнения узорами. Давайте посмотрим на ряд возможных результатов, и начнем с
примера 8.5, где очень крупно шрифтом 1шрас1 написано слово АКТ, заполняющее
основную часть холста.

Пример 8.5

1.	сопВехВ.ГопВ = ’290рВ 1трасВ'

2.	сопВехВ.ГШТехВ (’АВТ', 30, 312)

Как показано на рис. 8.5, по умолчанию для любой заливки используется черный
цвет.
0 НН«1 Тех:	х +

-> С О О 1оса1Но5(/Скатр1е5/5ес11оп_2/08/ехатр1е О5.гпт1	:

Рис. 8.5. Слово, написанное во весь холст

А теперь поэкспериментируем с этой надписью, изменив, как показано в примере
8.6, заливку на градиент, применив самый простой градиент от белого к черному, и
посмотрим на результат, показанный на рис. 8.6.

0 ОгасЙеп: РШес! Тех:	X +

С О О 1оса1Ио5</Ехатр1е5/5ес11Оп_2/08/ехатр1е^06.11Гпп1 Ф.	:
Пример 8.6

1.	сопкехк.Гопк = ’290рк 1траск'

2.	дгасЦепк = сопкехк. сгеакеЫпеагСгасЦепк (320, 0, 320, 320)

3.	дгасЦепк. ас!с1Со1огЗкор(0, ’мЫке’)

4.	дгасЦепк. ас!с1Со1огЗкор (1, ’Ыаск’)

5.	сопкехк. ГШЗкуТе = дгасЦепк

6.	сопкехк. ГШТехк ( ’АНТ’, 30, 312)

7.	сопкехк.зкгокеТехк(’АНТ’, 30, 312)

Как и прежде, в строке 1 задается размер и начертание шрифта. Но затем в строке 2
устанавливается эффект градиента от середины верхней части холста по вертикали
до нижней части холста. Затем в строках 3 и 4 применяются две точки остановки
цвета, после чего для свойства контекста гшзку1е устанавливается заданный гра-
диент, и в строке 6 для отображения текста вызывается функция ГШТехк (). Чтобы
получше выделить текст и придать ему очертания, в строке 7 делается вызов функ-
ции зкгокеТехк ().

Внешний вид улучшился, но теперь давайте изменим надпись, перейдя сразу же к
радиальному градиенту в цветах радуги, и сделаем слово АКТ по-настоящему ар-
тистичным. Один из способов достижения этой цели показан в примере 8.7, где на
помощь приходит знание аббревиатуры цветов радуги КОУСгВТУ для красного
(геа), оранжевого (огапде), желтого (уе11ом), зеленого (дгееп), синего (Ыие), ИНДИГО
(хпсИдо) и фиолетового (у1о1ек), при задании их равномерного распределения по
градиенту с интервалами между ними всего лишь в о. 16 или около 1/6 градиента.

Пример 8.7

1.	сопкехк.Гопк = ’290рк Ттраск’

2. дгасЦепк = сопкехк.сгеакеНасЦаЮгасЦепк (320, 320,	30,

3.	320, 320, 400)

4.	дгасЦепк. аскЮоТогЗкор (0.00, ’гесГ)

5.	дгасЦепк. асПСо1огЗкор (0.16,	’огапде’)
6.	дгасЦепк. асПСо1огЗкор (0.33,	’уе11ом’)
7.	дгасЦепк. асПСо1огЗкор (0.50,	’дгееп’)
8.	дгасЦепк. асПСо1огЗкор (0.66,	’Ыие’)
9.	дгасЦепк. асПСо1огЗкор (0.83,	’ ГпсЦдо ’)
10.	дгасЦепк. ас!с1Со1огЗкор (1.00,	’у1о1ек’)

11. сопкехк. ГП13ку1е = дгасЦепк

12. сопкехк.ГШТехк ( ’АНТ’, 30, 312)

13.	сопкехк.зкгокеТехк(’АНТ’, 30, 312)

Помимо использования вместо предыдущих двух целых семи цветовых остановок,
еще одно отличие заключается в том, что градиент радиальный и настроен на нача-
ло круга радиусом 30 пикселей с центром в нижней середине холста, расширяю-
щимся до круга радиусом 4 00 пикселей с использованием того же центра. В резуль-
тате получается великолепная радужная заливка, показанная на рис. 8.7.
0 Касйа1 БгасЯепе ЕШес! Тех1 X +

С О О 1оса1Ьсв1/Ехатр1е5/5ес11оп_2/08/екап1р1е_07.Мт1 Ф Ф ☆	#	:

Рис. 8.7. Надпись заполнена эффектом радужного радиального градиента

Использование узора для заполнения надписи

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

В примере 8.8 показан узор, использовавшийся в главе 7 «Прямоугольники и за-
ливки», перенацеленный, как показано на рис. 8.8, на заполнение слова АКТ.

В строках со 2 по 5 находится уже знакомый по предыдущей главе код, предназна-
ченный для загрузки изображения из файла Ше.рпд, и ожидания готовности брау-
зера к его использованию. Затем в фигурных скобках безымянной функции созда-
ется объект узора, назначаемый свойству контекста Ш1зъу1е, при этом код в стро-
ках 9 и 10 совпадает с кодом последних строк предыдущего примера, с помощью
которых на холсте рисуется заполненное и обведенное слово.

Пример 8.8

1.	сопГехГ.ГопГ	=	’290рГ 1трасЬ’

2.	1таде	=	пем 1таде()

3.	гтаде.згс	=	’Ше.рпд’

4.

5.	гтаде. оп!оас!	=	ГипсГ1оп()

6.	{
7.	раккегп = сопкехк.сгеакеРаккегп(ттаде, ’гереак’)

8.	сопкехк. ГШЗку1е = раккегп

9.	сопкехк.ГШТехк ( ’АНТ’, 30, 312)

10.	сопкехк.зкгокеТехк(’АНТ’, 30, 312)

Рис. 8.8. Слово, заполненное мозаичным узором

Вот и все, теперь на холсте НТМИ5 практически так же, как и с ранее освоенными
прямоугольниками, можно будет работать и с текстом.

Заключение

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

Итак, надписи и прямоугольники освоены; в следующей главе предстоит научиться
рисовать более тонкие и точные детали, используя линии и кривые на основе соз-
дания контуров.
ГЛАВА 9

Рисование на холсте

Введение

Сейчас уже пройдена практически половина пути к изучению порядка создания
рисунков и надписей на холсте НТМЬ5. В этой главе будет раскрыта основная
часть оставшихся тонкостей рисования, а также получены начальные сведения о
том, когда можно будет игнорировать ряд команд, поскольку во многих случаях
они могут подразумеваться.

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

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

Структура

В этой главе рассматриваются следующие темы:

♦	Изучение оставшихся функций рисования линий.

♦	Приемы рисования всевозможных дуг и кривых линий.

♦	Способы создания маски с помощью функции сИр().

♦	Приемы работы с линиями, путями, заглушками и соединениями (Нпез, раШз,
епб сар§ и]от$).

Цели

После изучения предлагаемого материала станут известны все основные методы
рисования линий, заливок, кривых, дуг и текста, рассматриваемые в этой и преды-
дущих главах. В вашем арсенале окажутся все основные инструменты, необходи-
мые для рисования на холсте НТМЬ5, за исключением манипулирования изобра-
жениями, прозрачностью и другими новыми методами, изучение которых предсто-
ит в следующих двух главах.

Рисование линий с использованием путей

Работа с холстом НТМЬ5 во многом зависит от использования путей для рисова-
ния. Основной смысл заключается в предоставлении возможности предварительно-
го создания всевозможных путей с последующей быстрой прорисовкой всего пути
с помощью одной команды. Это обеспечивает очень быстрое рисование, которое
можно использовать даже в целях анимации.

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

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

0 □га'лчпд \М(Кои1 а РаЖ	X 4-
Давайте немного углубимся в этот вопрос, обратившись к примеру 9.1, где, как по-
казано на рис. 9.1, создается последовательность линий, образующих фигуру в виде
очерченного знака плюс, наложенную на фигуру ромба.

Пример 9.1

1.	сопкехк.тоуеТо( 10,	130)
2.	сопкехк. ПпеТо ( 10,	190)
3.	сопкехк.ПпеТо (290,	190)
4.	сопкехк. ПпеТо (290,	310)
5.	сопкехк.ПпеТо (350,	310)
6.	сопкехк.ПпеТо (350,	190)
7.	сопкехк. ПпеТо (630,	190)
8.	сопкехк. ПпеТо (630,	130)
9.	сопкехк.ПпеТо (350,	130)
10.	сопкехк. ПпеТо (350,	Ю)
11.	сопкехк.ПпеТо (290,	10)
12.	сопкехк.ПпеТо (290,	130)
13.	сопкехк. ПпеТо (10,	130)
14.		
15.	сопкехк.тоуеТо(100,	160)
16.	сопкехк.ПпеТо (320,	50)
17.	сопкехк.ПпеТо (540,	160)
18.	сопкехк.ПпеТо (320,	270)
19.	сопкехк. ПпеТо (100,	160)
20.		
21.	сопкехк.зкгоке ()	

ф Огашлд МПЬсхн а Ра:Н	X +

С О © (оса11по51/Ехатр1е5/5ес||оп_2/09/ехатр1е_0ГЬеп,»1 Ф Ф #	:
Казалось бы, все выглядит здорово! А теперь давайте посмотрим, почему все может
быть не так, как кажется на первый взгляд, добавив, как показано ниже, после вы-
зова функции зкгоке() в строке 21 всего лишь одну дополнительную инструкцию, и
посмотрим, что получится (рис. 9.2).

22. сопкехк.НИ ()

К более подробному рассмотрению инструкции Ш1() мы вскоре вернемся, но что
можно сделать, чтобы получить более ожидаемый результат? Ответ прост: нужно
разбить две фигуры на отдельные пути. В примере 9.2 можно увидеть, что теперь
есть две отдельных и независимых части, и результат их применения, показанный
на рис. 9.3, более похож на то, что, вероятно, и планировалось создать.

0 Ас1с1|пд Ра1Ь$	X +

-> С О О 1оса1Но5уиатр1е5/5е«1ОП_2/09/ехатр1в О2.ГЯт1	☆ Л :

Рис. 9.3. После разбиения фигур с помощью путей заливка работает
в соответствии с ожиданиями

Пример 9.2

1.	сопкехк.ЬедТпРакк ()

2.	сопкехк.тоуеТо( 10,	130)

3.	сопкехк.ПпеТо ( 10,	190)

4.	сопкехк.ПпеТо (290,	190)

5.	сопкехк.ПпеТо (290,	310)

6.	сопкехк.ПпеТо (350,	310)

7.	сопкехк.ПпеТо (350,	190)

8.	сопкехк.ПпеТо (630,	190)

9.	сопкехк.ПпеТо (630,	130)

10.	сопкехк.ПпеТо (350,	130)

11.	сопкехк.ПпеТо (350,	10)
12.

13.

14.

15.

16.

17.

18.

19.

20.

21.

22.

23.

24.

25.

26.

27.

28.

29.

30.

31.

сопкехк.11пеТо(290, 10)
сопкехк.ИпеТо (290, 130)
сопкехк. ИпеТо (10,	130)

сопкехк.с1озеРакй ()

сопкехк.зкгоке()

сопкехк. ТИ13ку1е = ’уеИом’
сопкехк. ТШ ()

сопкехк.ЬедтпРакк()
сопкехк.тоуеТо(100, 160)

сопкехк. ИпеТо (320,	50)

сопкехк. ИпеТо (540, 160)
сопкехк. ИпеТо (320, 270)
сопкехк. ИпеТо (100, 160)

сопкехк.с1озеРакк()

сопкехк.зкгоке()

сопкехк. НИЗкуТе = ’гесГ
сопкехк. НИ ()

<3 Кетоутд ТНе Ра(Н$

Рис. 9.4. В отсутствие путей заливка опять становится непредсказуемой

Давайте разберемся, почему все это работает. Сначала в строках с 1 по 15 создается
фигура плюса, помещенная на свой собственный путь. Затем в строках с 17 по 19
появляется обводка, выбирается желтый цвет заливки, которая затем и применяется
к фигуре. Во второй части примера, в строках с 21 по 28, по своему собственному
пути создается фигура ромба. Затем в строках с 29 по 31 применяется обводка, вы-
бирается красный цвет заливки, которая затем тоже применяется (рис. 9.4).

Получились две различные заполненные фигуры, причем более новая перекрывает
предыдущую; все очень похоже на ожидаемый нами рисунок. А теперь, ради инте-
реса, давайте закомментируем строки инструкций пути 1, 15, 21 и 27 (чтобы они не
выполнялись), поместив перед инструкциями, как показано в примере 9.4 (где в
целях экономии приведены только измененные строки), по паре слэшей (//). Затем
посмотрим на результат, показанный на рис. 9.4, который снова дал не то, что
предполагалось увидеть.

Пример 9.3 (только закомментированные строки):

1.

// соп^ех-Ь.ЬедгпРаЪЬ()

15.	// соп-Ьех-Ь.с1озеРа^Н ()

21.	// соп^ех^.ЬедхпРаЪЬ()

27.

// сопГехГ.с1озеРаГЪ()

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

Применение заполнений

Пару раз в этой главе функция Ш1() уже применялась, а теперь давайте выясним,
как она работает и используется. Сложностей в этом разделе не предвидится, по-
скольку использование функции очень похоже на использование инструкции
гшкесъ (), подробно разобранной в предыдущей главе.

Основное сходство Ш1() и гшвесъов том, что любые выбранные вами свойства
Ш18Ьу1е будут применяться как к одной, так и к другой функции. Разница в том,
что Ш1() применяется к самому последнему пути. При создании нового пути
Ш1 о применится только к нему, а любой предыдущий путь будет забыт.

Зная это, вы теперь понимаете, как нарисовать любую желаемую фигуру, состав-
ленную из прямых линий, а затем заполнить ее любым сплошным цветом, линей-
ным или радиальным градиентом или любым выбранным узором. Все подробности
этих заполнений рассматриваются в главе 8 «Надписи на холсте».

Ограничения областей холста

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

Чтобы проиллюстрировать этот эффект, давайте сравним простое рисование фигу-
ры на холсте с предварительно установленной областью ограничения и последую-
щим рисованием, задаваемым кодом примера 9.4 (в нем нумерация строк намерен-
но начинается с 12, чтобы осталось место для дополнительного кода), где сначала
рисуется закрашенный зеленый ромб, а затем над ним располагается диагональный
крест толщиной в одну линию (рис. 9.5).

0 СПрр1пд	X +

> С О 0 1оса1Ьо5(.1<атр1е5/5ес11Оп^2/09/ехатр1е_04.Ыт1 Ф.	:

Рис. 9.5. Пара фигур, нарисованных на холсте

Пример 9.4

12.	соп^ех^.ЬедТпРаИ()

13.	сопГехГ.тоуеТо(320,	10)

14.	сопГехГ.ПпеТо (630,	160)

15.	сопГехГ.ПпеТо (320,	310)

16.	сопГехГ. ПпеТо ( 10,	160)

17.	сопРехР. ПпеТо (320,	10)

18.	соп^ехН сТозеРаИ ()

19.

20.	сопГехН Н118Ъу1е = ’ дгееп’

21.	сопРехР.НИ ()

22.

23.	сопРехР.ЬедТпРаРЪ()

24.	сопРехР.тоуеТо(0,	0)
25.	сопкехк.ИпеТо (639,	319)

26.	сопкехк.тоуеТо(О,	319)

27.	сопкехк.ИпеТо (639,	0)

28.	сопкехк.с1озеРакк ()

29.

30.	сопкехк.зкгоке()

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

А теперь давайте посмотрим, что произойдет, если код из примера 9.5 вставить пе-
ред кодом из примера 9.4, чтобы сначала создать ограниченную область холста в
форме прямоугольника. В строке 9 делается дополнительный вызов зкгоке (), пото-
му что граница обрезки невидима, но после вызова зкгоке () ее можно увидеть. До-
бавлять вызов зкгоке () для ограниченной области или нет — зависит от намерений
при каждом рисовании.

Пример 9.5

1.	сопкехк.ЬедтпРакк()
2.	сопкехк.тоуеТо(170,	10)
3.	сопкехк.ИпеТо (470,	10)
4.	сопкехк.ИпеТо (470, 310)
5.	сопкехк.ИпеТо (170, 310)
6.	сопкехк. ИпеТо (170,	10)
7.	сопкехк.с1озеРакк()
8.	сопкехк. ИпеЖсШо = 1
9.	сопкехк.зкгоке()
10.	сопкехк.сИр ()

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

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

Поэтому, как только использование ограниченной области будет завершено, можно
выполнить перенастройку маски ограничения на весь холст (или, в случае необхо-
димости, на новую область) или же гораздо проще будет вспомнить порядок ис-
пользования в контексте функций зауе() и гезкогеО, как это делалось при переме-
щении координат холста в главе 7 «Прямоугольники и заливки»?
ф У/дН СПрр!пд	X +

С О О 1оса1Ко5</иатр1е5/5есИоп_2/09/ехатр|е О5.МпМ	#	:

Рис. 9.6. Все рисунки за пределами ограниченной области игнорируются

Ведь эти две функции позволяют сохранить все, что касается текущего контекста,
поэтому при использовании ограниченных областей зачастую бывает полезно сна-
чала выполнить инструкцию сопЪехъ.зауеО, а когда работа с ограниченной обла-
стью завершится, все прежние настройки контекста можно будет восстановить с
ПОМОЩЬЮ простого вызова сопГехГ.гезГоге ().

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

Рисование кривых линий

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

Именно здесь и нужны познания в геометрии, поскольку начальный и конечный
углы задаются в радианах, являющихся угловыми единицами измерения, основан-
ными на константе Р1. Наверное, нетрудно вспомнить, что Р1 имеет значение при-
мерно 3,1416, а длина окружности в 2 раза больше Р1, или примерно 6,2832. А в
окружностях 360 градусов.
Теперь представьте, что нужно пройтись по большой окружности. Для этого следу-
ет пройти 360 градусов или 6,2823 радиана. Но, поскольку 360 градусов — слиш-
ком большое число, когда в обиходе только половина или четверть окружности,
придется применять значения 180 или 90 градусов, а также, исходя из того, что
6,2823 — слишком неудобное число с плавающей точкой, было придумано значе-
ние радиана, где 1 радиан равен 180 градусам, поделенным на Р1, что примерно со-
ставляет 57 градусов.

Если использование радиана представляется сложнее, чем использование градусов,
то это всего лишь пока дело не дойдет до рисования дуги в половину окружности,
где можно будет просто сказать, что хотите, чтобы в радианах она была равна чис-
лу Р1. Или для полного круга в радианах понадобится просто умножить Р1 на 2, а
для четверти круга в радианах — разделить Р1 на 2. Как видим, обычно сами по се-
бе радианы не используются. Чаще всего они используются в сочетании с числом
Р1. Просто следует запомнить, что полная окружность в радианах равна двум, ум-
ноженным на Р1, и этого будет вполне достаточно.

Выбор направления

Есть один последний (необязательный) аргумент, который можно передать функ-
ции аге о, он задает направление рисунка: по часовой стрелке или против нее. По
умолчанию устанавливается значение Га1зе, означающее направление по часовой
стрелке, а чтобы рисовать в направлении против часовой стрелки, можно указать
значение ^гие.

0 Огашпд Агс$	X +

Рис. 9.7. Четыре разные дуги
Давайте посмотрим на сочетание этих шести аргументов, нарисовав набор из четы-
рех дуг, используя код примера 9.6, где каждый набор инструкций рисует по очере-
ди %, /2, % и, наконец, полный круг. Результат загрузки этого примера в браузер
показан на рис. 9.7.

Пример 9.6

1.	сопкехк .ЬедхпРакЬ ()

2.

3.

4.

5.

6.

7.

8.

9.

10

11

12

13

14

сопкехк.аге(128, 160, 60, 0, МакЬ.Р! / 2)

сопкехк.зкгоке()

сопкехк.ЬедтпРакк()

сопкехк.аге(256, 160, 60, 0, Макк.Р1)

сопкехк.зкгоке()

сопкехк.ЬедтпРакк()

сопкехк.аге(384, 160, 60, 0, Макк.Р1 /2*3)

сопкехк.зкгоке()

сопкехк.ЬедтпРакк()

сопкехк.аге(512, 160, 60, 0, Макк.Р! ★ 2)

15. сопкехк.зкгоке()

Примечание

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

Если сравнить строки 2, 6, 10 и 14, в которых рисуются дуги, можно увидеть, что в
строке 2 последний аргумент, задающий значение Р1 (в 1ауа8спр1 обозначается как
макь.рт), делится на 2, т. е. функция агс() получает указание рисовать только чет-
верть окружности. Затем в строке 6 для рисования половины окружности просто
используется Р1, а в строке 10 сначала вычисляется значение значение Р1 / 2, чтобы
получить значение для четверти круга, которое затем умножается на 3, чтобы полу-
чить значение, необходимое для трех четвертей окружности. И наконец, в строке 10
для получения полной окружности используется число Р1, умноженное на 2.

Радиус каждой из этих дуг составляет 60 пикселей, но вы заметили, что все дуги
начинаются в положении «на 3 часа», под углом 90 градусов от вершины окружно-
сти? Дело в том, в качестве начального значения в каждом случае был установлен
о, всегда задающий начало в самой правой точке окружности или на 3 часа.

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

Рис. 9.8. Направление рисования было изменено,
и теперь оно против часовой стрелки

Пример 9.7 (только те строки из примера 9.6, которые были изменены):

2.	соп^ех^.агс(128,	160,	60,	0,	МаГИ.Р1	/	2,	^гие)
6.	сопГехГ.аге(256,	160,	60,	0,	Ма1±.Р1,			^гие)
10.	сопГех1:.агс (384,	160,	60,	0,	МаГЪ.Р1	/	2*3,	^гие)
14.	соп^ех^.агс(512,	160,	60,	0,	Ма^Ь.Р!	*	2,	^гие)

Теперь давайте посмотрим, как происходит заполнение этих путей, но не от на-
чальной точки к конечной, поскольку это получилось бы не очень аккуратно, а с
использованием центральной точки каждой дуги, чтобы они, как показано на рис. 9.9,
выглядели бы как целый торт, или как торт с вырезанными кусочками, как в при-
мере 9.8, где вызов функции шоуеТоО выполняется перед каждым вызовом аге о,
чтобы установить центр каждой дуги для вызовов функции Ш1().

0 Огачшпд ГШес* Агсь	X +

С О ® 1оса1Ьо51/1 хатр1е$/5ес1юп 2/09/ехатр!еД8.Мгп1	:

Рис. 9.9. Теперь дуги заполнены в виде кусочков торта

Пример 9.6

1.	соп^ех^ .ЬедГпРаГЪ. ()

2.	сопГехГ.тоуеТо(128,160)

3.	соп^ех^.агс( 128, 160, 60, 0, МаГЛ.Р1 / 2)

4.	согЛех'Ь.НИ ()

5.

6.	соп^ех^.ЬедтпРаГЛ()

7.	соп^ех^.тоуеТо(256,160)

8.	соп^ех^.агс( 256,	160,	60,	0,	Ма'ЬЬ.РТ)

9.	сопГехГ.ГШ ()

10.

11.	сопГехЪ.ЬедГпРаЙ! ()

12.	соп^ех^.тоуеТо(384,160)

13.	соп^ех^.агс( 384,	160,	60,	0,	Ма^Ь.РТ /2*3)

14.	сопГехГ.ГШ ()

15.

16.	сопГехГ.ЬедГпРаГЛ()

17.	соп^ех^.тоуеТо(512,160)

18.	соп^ех^.агс( 512,	160, 60, 0, Ма^Ь.Р! * 2)

19.	сопГехГ.ГШ ()
Примечание

В примере 9.8 также не было необходимости закрывать каждый путь, поскольку
с помощью вызовов пк^еТоО для каждой дуги предварительно выбиралась на-
чальная точка, и когда вызывалась функция Ш1(), она, как и предполагалось,
автоматически закрывала тот путь, который в обратном направлении привел бы
к начальной точке.

Рисование дуги к конкретной точке

Пока мы рассматривали только рисование дуг на основе заданной центральной
точки, но дугу на холсте НТМЬ5 можно рисовать и другими способами, один из
которых предполагает использование функции агсто (). С его помощью дуга рису-
ется на основе текущего местоположения пути и пары воображаемых касательных
линий к периметру дуги, как будто она является полной окружностью.

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

Рис. 9.10. Рисование дуги к определенному месту

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

Пример 9.9

1.	сопкехк.зкгокеЗку!е	=	’гесТ

2.	сопкехк. ПпеЭДЫкк	=	2

3.

4.	сопкехк.ЬедтпРакк()

5.	сопкехк.аге(	500,	30,	3,	0,	Макк.Р1	*	2)

6.	сопкехк.тоуеТо(500,	30)

7.	сопкехк.аге(	430,	270,	3,	0,	Макк.Р1	*	2)

8.	сопкехк.ПпеТо (430,	270)

9.	сопкехк.аге(	50,	270,	3,	0,	Макк.Р1	*	2)

10.	сопкехк.ПпеТо (50,	270)

11.	сопкехк.зкгоке()

12.

13.	сопкехк.ЬедтпРакк()

14.	сопкехк.зкгокеЗку!е = ’Ыие’

15.	сопкехк.тоуеТо(500,	30)

16.	сопкехк.агсТо( 430,	270, 50, 270, 300)

17.	сопкехк.зкгоке()

Здесь в строках 1 и 2 задается цвет и толщина линий, подготавливаемых к рисова-
нию воображаемых линий и кругов вокруг трех точек. Затем в строках с 4 по 11
рисуются две красные линии с начальной точкой в правом верхнем углу и конеч-
ной точкой в левом нижнем углу. И наконец, в строках с 13 по 17 выполняется пе-
ремещение в начальное положение 500,30, а затем с использованием этого началь-
ного положения через следующие две точки с координатами 430,270 и 50,270, рису-
ется синяя дуга с радиусом зоо пикселей. Без этих направляющих линий результат
выглядел бы так, как показано на рис. 9.11.

Использование аттракторов

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

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

Рис. 9.12. Квадратичная кривая, притягиваемая воображаемым аттрактором
В примере 9.10 красным цветом специально рисуется воображаемая базовая линия
и круг в воображаемой точке аттрактора. Затем, как показано на рис. 9.12, в нем с
этими параметрами синим цветом рисуется квадратичная кривая.

Пример 9.10

1.	сопкехк.зкгокеЗку!е	= ’гесГ

2.	сопкехк. ПпеМсГкЬ	= 2

3.

4.	сопкехк.ЬедТпРакк()

5.	сопкехк.тоуеТо( 10,	160)

6.	сопкехк.ПпеТо (630,	160)

7.	сопкехк.зкгоке()

8.	сопкехк.ЬедхпРакк()

сопкехк.аге(10, 10, 3, 0, Макк.Р! * 2)

10.	сопкехк.зкгоке()

11.

12.	сопкехк. зкгокеЗку!е = ’Ыие'

13.	сопкехк.ЬедтпРакк()

14.	сопкехк.тоуеТо(10, 160)

15.	сопкехк.диас!гак1сСигуеТо (10,	10, 630, 160)

16.	сопкехк.зкгоке()

В строках 1 и 2 примера 9.10 задается цвет и толщина воображаемой линии и ат-
трактора. Затем в строках с 4 по 10 через центр холста проводится горизонтальная
линия и рисуется круг в точке аттрактора в левом верхнем углу.

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

Как уже ранее упоминалось, у кривой Безье имеется второй аттрактор, помещае-
мый на холст кодом примера 9.11, который отличается от кода примера 9.10 добав-
лением второй точки аттрактора с координатами 630,310. В результате на холст по-
мещается двойная кривая, показанная на рис. 9.13.

Пример 9.11

1.	сопкехк. зкгокеЗку1е = ’гесГ

2.	сопкехк. ПпеЖсШо	= 2

4.	сопкехк.ЬедТпРакк()

5.	сопкехк.тоуеТо( 10,	160)

6.	сопкехк.ПпеТо (630,	160)

7.	сопкехк.зкгоке()

8.	сопкехк.ЬедтпРакк()
9.	сопкехк.аге(10, 10, 3, 0, Макк.Р1 * 2)

10.	сопкехк.зкгоке()

11.	сопкехк.ЬедтпРакк()

12.	сопкехк.аге(630, 310,	3,	0, Макк.Р1 * 2)

13.	сопкехк.зкгоке()

14.

15.	сопкехк. зкгокеЗку!е	=	’Ыие’

16.	сопкехк.ЬедкпРакк()

17.	сопкехк.тоуеТо(10,	160)

18.	сопкехк.ЬехтегСигуеТо(10, 10, 630, 310, 630, 160)

19.	сопкехк.зкгоке()

0 □гам^пд а Вег»ег Сип/е	X +

С О О 1оса1Ьо51/Ехагпр1е5/5ес1юп_2/09/&хатр1е_11Л11гл1 Ф (Ф ☆ Л У :

Рис. 9.13. Кривая Безье с двумя воображаемыми аттракторами

Как и в предыдущем примере, код примера 9.11 начинается со строк 1 и 2, задаю-
щих красный цвет и толщину линии 2 для воображаемой линии и аттракторов. За-
тем в строках с 4 по 13 рисуется горизонтальная линия и два круга для аттракторов
в левом верхнем и правом нижнем углу экрана. И наконец, в строках с 15 по 19
осуществляется перемещение в позицию 10,160, а затем рисуется синяя кривая ли-
ния, нацеленная на позицию 630,160. На своем пути она сначала притягивается
вверх и влево аттрактором на позиции ю, 10, а затем вниз аттрактором на позиции
630,310.

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

Осталось уложить последний фрагмент пазла рисования линий, отвечающий на во-
прос: что делать, когда две линии сходятся? Должна ли вершина схождения быть
ровной? Должна ли она закругляться? Или же ее лучше заострить? А чем должна
завершаться линия? Должны ли она быть с квадратными, обрубленными или за-
кругленными краями?

К счастью, благодаря свойству ИпеСар, предлагающему все три варианта краев ли-
нии при предоставлении ему аргументов Ьикк, гоипа или здиаге, и свойству ИпеЛоТп,
поддерживающему значения гоипа, ^е1 и тхкег, можно выбрать любую нужную
форму как края линии, так и вершины схождения.

Давайте посмотрим, как эти свойства можно использовать в примере 9.12, где в
строках с 1 по 7 создаются две опорные линии красного цвета, обозначающие ниж-
нюю и верхнюю часть рисуемых линий. Затем в строках с 9 по 11 их толщина уве-
личивается со значения по умолчанию до 20 пикселей и задается использование
синего цвета. Все это, как показано на рис. 9.14, сделано для того, чтобы можно
было легко заметить различные эффекты применения новых свойств.

0 Сарртд апсОо1П1пд Ипеа X +

С О © 1оса1Ьо5Ц1<атр1е5/5еа1оп_2/09/ехагпр1е_12.Мт1 О. (*> ф & Т •

Рис. 9.14. Выбор форм завершений и схождений линий

Пример 9.12

1.	сопкехк.зкгокеЗку1е = ’гесГ

2	.	сопкехк.ЬедапРакк()

3.	сопкехк.тоуеТо(30,	70)

4.	сопкехк.ИпеТо (610,	70)
5.	сопкехк.тоиеТо(30,	250)

6.	сопкехк.ПпеТо (610,	250)

7.	сопкехк. зкгоке ()

8.

9.	сопкехк.ЬедТпРакк()

10.	сопкехк. ПпеЖЬкк	=20

11.	сопкехк. зкгоке5ку1е	= ’Ыие'

12.

13.	сопкехк.ЬедапРакк()

14.	сопкехк. ПпеСар = ’гоипсГ

15.	сопкехк.тоуеТо( 91,	250)

16.	сопкехк. ПпеТо ( 91,	70)

17.	сопкехк.зкгоке()

18.

19.	сопкехк.ЬедапРакк()

20.	сопкехк. ПпеСар = ’Ьикк’

21.	сопкехк.тоуеТо(183,	250)

22.	сопкехк.ПпеТо (183,	70)

2	3.	сопкехк.зкгоке()

24.

25.	сопкехк.ЬедапРакк()

26.	сопкехк. ПпеСар = ’здиаге’

27.	сопкехк.тоуеТо(274,	250)

28.	сопкехк.ПпеТо (274,	70)

29.	сопкехк.зкгоке()

30.

31.	сопкехк.ЬедапРакк()

32.	сопкехк. ПпеСар =	’гоипсГ

33.	сопкехк. ПпеСГоап =	’гоипсГ

34.	сопкехк.тоуеТо(335,	250)

35.	сопкехк.ПпеТо (365,	70)

36.	сопкехк.ПпеТо (395,	250)

37.	сопкехк.зкгоке()

38.

39.	сопкехк.ЬедтпРакк()

40.	сопкехк. ПпеСар =	’Ьикк’

41.	сопкехк. ПпеОЫп =	’Ьеуе!’

42.	сопкехк.тоуеТо(427,	250)

43.	сопкехк.ПпеТо (457,	70)

44.	сопкехк.ПпеТо (487,	250)

4	5.	сопкехк.зкгоке()

46.

47.	сопкехк.ЬедапРакк()

48.	сопкехк. ПпеСар =	’здиаге’

49.	сопкехк. ПпеОЫп =	’гНкег’

50.	сопкехк.тоуеТо(518,	250)

51.	сопкехк.ПпеТо (548,	70)

52.	сопкехк.ПпеТо (578,	250)

53.	сопкехк.зкгоке()
В каждом из первых трех наборов инструкций, в строках с 13 по 17, в строках с 19
по 23 и в строках с 25 по 29, задается рисование линии с краями, и в них поочеред-
но используются свойства ПпеСар со значениями гоипа (закругленные), Ьиъъ (обруб-
ленные) н зриаге (квадратные). На рис. 9.14 показано, что как закругленные, так и
квадратные края линий выходят за границы опорных линий. А вот обрубленные
края получаются в соответствии с ожиданиями и обрубаются точно по опорным
линиям.

В следующих трех наборах инструкций, в строках с 31 по 37, с 39 по 45 и с 47 по
53, в краях каждой пары линий повторяются те же самые свойства ИпеСар, но также
к местам соединений применяются свойства ИпеДспп, в которых поочередно задает-
ся закругленная (гоипа), плоская (ьеуе1) и заостренная (шИзег) вершина соединения.
Здесь опять же можно увидеть, как закругленные и заостренные вершины выходят
за границу опорной линии, при этом заостренная вершина для достижения нужного
эффекта должна получить существенное удлинение. А вот плоская вершина опять
обрубается по опорной линии.

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

Рис. 9.15. Самая правая заостренная вершина стала плоской
Давайте попробуем перед последним вызовом зкгокео в строке 53 добавить сле-
дующее:

сопкехк .тккегЫткк = 6

Тогда станет видно, что заострение теперь ограничено только 6 пикселями, а по-
скольку фактический вылет составляет не менее 7 пикселей, вершина, как показано
на рис. 9.15, становится плоской.

Заключение

Эта глава завершает курс последних нескольких глав, посвященный рисованию
прямых и кривых линий, а также криволинейных фигур, рассматривающий вариан-
ты соединения и завершения линий. Также уделено внимание заполнению фигур,
надписям на холсте и использованию всевозможных градиентов и узоров. Сле-
дующая глава будет посвящена работе с изображениями, добавлению теней и пре-
образованиям.
ГЛАВА 10

Работа с холстом

Введение

Итак, на пути изучения материалов книги достигнута важная веха. Изучены почти
все функции рисования на холсте НТМБ5, и бонусом при изучении холста освоены
азы написания кода на 1ауа8спр1.

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

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

Структура

В этой главе рассматриваются следующие темы:

♦	Применение различных способов рисования на холсте с использованием изо-
бражений.

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

♦	Способы прикрепления теней ко всем типам рисунков на холсте.

♦	Основные приемы непосредственного управления данными холста.

Цели

Здесь, перед переходом к следующей, заключительной главе, призванной поднять
ваши навыки на следующую ступень мастерства, будет завершено изучение основ-
ных функций холста НТМБ5.
Рисование с использованием изображений

У холста НТМЬ имеется возможность загружать изображение в 1ауа8спр1, а затем
размещать его различными способами, применяя для этого функцию агаштадео,
которая обычно принимает три аргумента: имя объекта изображения и координаты
верхнего левого угла, где оно должно быть вставлено в холст. При желании можно
также предоставить пару дополнительных аргументов, указывающих новую шири-
ну и высоту изображения.

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

В примере 10.1 показано создание нового (пустого) объекта изображения. Затем,
чтобы приступить к загрузке изображения, свойству зге этого объекта присваивает-
ся его имя. Сразу после этого присваивания вызывается безымянная функция, код
которой помещается между фигурными скобками функции и запускается после го-
товности изображения к использованию. Результат показан на рис. 10.1.

© Огауллд МгЬ ап 1таде	X +

Пример 10.1

1.	атаде	= пем 1таде()

2.	атаде.зге = ’зтИеу.рпд’
3.

4.	атаде. оп!оаа	= ГипсГаоп()

5.	{

6.	сопРехР. агаШтаде (атаде, 10, 10)

7.	}

Изображение в файле зтПеу.рпд имеет размеры 160 х 160 пикселей и использует
такую же степень прозрачности, что и у всех пикселей за пределами области изо-
бражения. Оно загружается на холст с установкой левого верхнего угла в позицию
10,10. Но давайте посмотрим, что произойдет, если добавить два дополнительных
аргумента к трем дополнительным вызовам функции агаштадео, задавая в коде
примера 10.2 один больший и два меньших размера изображений, причем один из
них еще меньше самого первого изображения. Результат показан на рис. 10.2.

Рис. 10.2. Рисование изображений разных размеров

Пример 10.2

1.	атаде	= пем 1таде()

2.	атаде.зге = ’ зтПеу.рпд’

3.

4.	атаде.оп!оаа	= ГипсЫоп ()

5.	{

6.	сопРехР.агаШтаде (атаде,	10,	10)

7.	сопРехР.агаШтаде (атаде,	200,	10,	240,	240)

8.	сопРехР.агаШтаде (атаде,	460,	10,	80,	80)

9.	сопРехР.агаШтаде (атаде,	560,	10,	40,	40)

10.	}
Если присмотреться к рис. 10.2, можно заметить один из недостатков такого изме-
нения размера изображений: при сильном увеличении изображения могут стать
слегка размытыми, а при слишком сильном уменьшении — становятся крапчатыми
в тех местах, где должны состоять из сплошных линий.

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

Извлечение частей изображений

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

Можно удивиться и спросить: «А откуда 1ауа8спр1 узнает о моих намерениях?»
Дело в том, что 1ауа8спр1 ищет после указания изображения два, четыре или во-
семь аргументов. Если их два, изображение помещается в указанное верхнее левое
положение без изменений. Если их четыре, изображение по-прежнему размещается
в указанном месте, но изменяется в соответствии с размерами, указанными в по-
следних двух аргументах.

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

С учетом всего вышеизложенного, в примере 10.3 изображение снова рисуется в
исходном размере в верхнем левом углу холста. В строке 7 задается рисунок вер-
сии, извлеченной вокруг изображения глаз, в тех же размерах 160 х 160, что и ис-
ходное полное изображение, а в строке 8 делается то же самое, но с увеличением
рисунка.

Пример 10.3
4.	1таде. оп1оас! = Гипск1оп()

5.	{

6.

7.

8.

9.

10

11

сопкехк.с!гамХтаде (1таде, 10,	10)

сопкехк.с!гамХтаде (1таде, 43, 12, 75, 75, 200, 10, 160, 160)

сопкехк.с!гаШтаде (1таде, 43, 12, 75, 75, 380, 10, 240, 240)

сопкехк.зкгокеЗку!е = ’Ыие’

сопкехк.зкгокеКеск(10 + 43, 10 + 12, 75, 75)

12.	зкгоке ()

13.	}

Строки с 10 по 15 были добавлены в код примера только для того, чтобы нарисо-
вать над исходным изображением прямоугольник синего цвета, показывающий из-
влекаемую часть со смещением на 10 пикселей по горизонтали и вертикали, чтобы
компенсировать смещение изображения на эту величину от верхнего левого угла.
Результат выполнения кода можно увидеть на рис. 10.3.

0 Ке$1и‘пд ап 1таде ЗесИоп X +

> С О О 1оса1Но5ЦЕхатр1е5/5е€||оп_2/10/ехатр1е,03.Ыт1	*

Рис. 10.3. Размер части изображения изменен

Использование холста

в качестве исходного изображения

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

1.	ттаде	= нем 1таде()

2.	ттаде.зге = ’ зтНеу.рпд’

3.

4.	ттаде. оп!оас1 = ГипсГтопО

5.	{

6.	сопГехГ. с!гам1таде (ттаде, 10, 10)

7.	сопГехГ. с1гам1таде (ттаде, 43, 12, 75, 75, 200, 10, 160, 160)

8.	сопГехГ. сЬсаШтаде (ттаде, 43, 12, 75, 75, 380, 10, 240, 240)

9.

10.	сопГехГ. сЬсаШтаде (сатлаз, 10, 10, 620, 300, 10, 200, 270, 130)

11.	}

По сути, в примере 10.4 содержится первая часть примера 10.3, за которой в строке 10
следует последняя инструкция, предписывающая захват области холста, начинаю-
щейся с позиции ю,ю и имеющая ширину и высоту 62о х зоо, а затем ее перерисов-
ку обратно на холст, начиная с позиции ю,200 и с размерами 270 х 130 пикселей.
Результат показан на рис. 10.4.

0 1151пд <Ье Сапуах а$ ап 1таде X +

> С О О 1оса1Но5Г/' атр1е5/5есИоп_2/10/ехатр1е_04.Г11т1

□ X

€1 & ☆ *	:

Рис. 10.4. Использование в качестве исходного изображения самого холста

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

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

Поэтому давайте посмотрим, что получится, если присвоить значения четырем
свойствам, ПОЗВОЛЯЮЩИМ создавать тени: зЬасЬмОГГзе^Х, зЬаскжОГГзеПГ, зЬаб(жВ1иг и
зЬаскжСо1ог. Нетрудно догадаться, что в первых двух свойствах задается смещение
от основного изображения в пикселях по горизонтали и вертикали, а в двух осталь-
ных — степень размытия и цвет, применяемый к тени.

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

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

0 АИасЫпд 5Ьас1оуу$	X 4~

<- -> 0 О О 1оса1Ко5УЕхатр1е5/5есХ1оп_2/10/ехагпр1е ОБ.ГПт!	:

Рис. 10.5. Прикрепление теней к изображениям
Пример 10.5

1.	ттаде = пем 1таде()

2.	ттаде.	зге = ’зтИеу.рпд’

3.

4.	1таде. оп1оас! = Гипс^1оп()

5.	{

6.	соп^ех^. зкаскжОГГзе^Х	=	4

7.	соп^ех^. зкаскмОГГзе^Х	=	4

8.	соп^ех^.зкаскмВХиг	=	4

9.	сопВехВ. зкаскжСо1ог	=	’	# 0 0 0	’

10.	сопВехВ.с!гам1таде (ттаде, 10, 10, 140, 140)

11.

12.	сопВех^. зкаскЖЖзе^Х	=	6

13.	сопЪех^.зЬаскжОГГзе’ЬХ	=	6

14.	сопВех11. зкас1омВ1иг	=	6

15.	сопВехВ. зкаскжСо1ог	=	’#220’

16.	сопВехВ.с!гам1таде (ттаде, 160, 10, 140, 140)

17.

18.	сопВехВ. зЪаскжОИзеВХ	=	8

19.	сопВехВ. зЪаскжОВВзеВХ	=	8

20.	сопВехВ. зкаскжВ1иг	=	8

21.	сопВехВ. зкаскжСо1ог	=	'#440'

22.	сопВехВ.с!гам1таде (ттаде, 310, 10, 140, 140)

23.

24.	сопВехВ. зкаскжОВВзеВХ	=	10

25.	сопВехВ. зЪаскжОВВзеВХ	=	10

26.	сопВехВ. зкаскжЫиг	=10

27.	сопВехВ. зкаскжСо1ог	=	'#660'

28.	сопВехВ.с!гам1таде (ттаде, 460, 10, 140, 140)

29.	}

Давайте сначала рассмотрим в этом примере строки с 6 по 10. Здесь можно заме-
тить, что все четыре свойства тени были установлены на весьма низкие значения, а
затем с этими настройками в строке 10 задана отрисовка изображения. В каждом
последующем наборе инструкций значения немного увеличиваются. Наверное, не
вызывает сомнений, что самые удачные настройки применены для двух средних
изображений. Иными словами, хорошие результаты получаются при задании для
теней смещения примерно в 6-8 пикселей, и при задании весьма незначительного
оттенка в сторону одного из основных цветов, от которого идет смещение, или же в
сторону цвета фона позади рисунка. Это поможет тени выглядеть более реалистич-
но. Но теперь, когда известен способ добавления теней, это уже вопрос вкуса, по-
скольку могут быть выбраны абсолютно любые предпочтительные настройки.
Тени прикрепляются не только к изображениям

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

<- С О О 1оса1Ко5Г/1 <атр1е5/$ее11оп_2/10/ехагпр1еД)6.Мт1 Е? ф * =7

ЗЬабо**еб ТехГ

ЗНадо^ед Тех1
ЗЬадоугес) Тех!

Рис. 10.6. Прикрепление теней к тексту и к линиям
с использованием различных смещений

Пример 10.6

1.	сопкехк. зкаскжОГГзекХ	=	О

2.	сопкехк. зкаскжОГГзекХ	=	О

3.	сопкехк. зкас1омВ1иг	=	10

4.	сопкехк. зкас!омСо1ог	=	'#000'

5.	сопкехк.зкгокеЗку!е	=	’Ыие’

6.	сопкехк. ПпеТлМкк =10

7.	сопкехк.зкгокеВеск(15, 15, 605, 285)

8.

9.	сопкехк. ГП13ку1е	= ’гесГ

10.	сопкехк.Гопк	= 'бОрк Аг1а1’

11.

12.	сопкехк.ГШТехк (’Зкаскжес! Техк’, 40, 190)

13.

14.	сопкехк.зкаскжОГГзекХ = -5
15.	сопРехР. зНаскжО55зеРУ = -5

16.	сопУехУ. ГШТехЪ (’ Зкаскжес! ТехУ', 40, 100)

17.

18.	сопУехУ. зкаскжОГГзеУХ = 5

19.	сопУехУ. зкаскжОГГзеУХ = 5

20.	сопУехУ. ГШТехУ (’ ЗЪаскжес! ТехУ’, 40, 280)

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

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

сопУехУ.зауе()

сопУехУ.гезУоге()

Непосредственное редактирование пикселей

Если углубленное изучение 1ауа8спр1 не планируется или же преследуются вполне
конкретные цели, достижимые с помощью холста НТМЬ5, этот раздел, наверное,
будет менее интересен. И все же для полноты картины необходимо рассмотреть все
особенности холста, чтобы дать вам возможность быть во всеоружии.

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

А теперь давайте посмотрим, как можно напрямую манипулировать данными,
формирующими изображение на холсте, с помощью следующих трех новых функ-
ций: деПшадеЭаГа (), риМтадеЭа^а () И сгеаУе1тадеЭаУа(), которые, как следует ИЗ ИХ
названий, позволяют читать, записывать и создавать данные изображения.

Чтобы продемонстрировать все возможности, в примере 10.7 загружается фотогра-
фия, отображаемая на холсте, а затем перебираются все данные изображения с ус-
реднением установок красных, зеленых и синих компонентов цвета изображения с
целью преобразования фотографии в монохромную, а затем, как показано на рис. 10.7,
новые данные возвращаются на холст в его другую часть.
Ф Мап<ри1а11пд 1таде Оа1а X +

С О Ф 1оса1Ьо51/Ехатр1е5/5ес1юп-2/10/ехатр1е_07.Ыт1 Ф 6$ ☆ Л :

Рис. 10.7. Левое изображение было преобразовано
в монохромное и показано в правой части холста

Пример 10.7

1.	сапчаз = боситепб. дебЕ1етепбВу1с1 (' сапчаз ’)

2.	сопбехб = сапчаз.дебСопбехб(’2сГ )

3.

4.	II Начало разбора кода примера в книге

5	.	гтаде	= пей 1таде()

6.	гтаде.згс = ’рагпМпд.рпд’

7.

8.	гтаде. оп!оас1 = ЕипсЫопО

9.	{

10.	сопбехб.бгамТтаде(гтаде, 0, 0)

11.	гтадебаба = сопбехб .деМтадеВаба (0, 0, 320, 320)

12.

13.	мгсЛИ	=320

14.	ИегдИВ =320

15.	уроз	= 0

16.

17.	юМ1е	(уроз < ИегдМ)

18.	{

19.	хроз = 0

20.

21.	иЫ1е (хроз < мгсШЛ

22.	{

23.

со!огроз = уроз * м1с±И * 4 + хроз * 4
24.

25.	ауегаде = (1тадес1а^а.с1а^а [со!огроз ] +

26.

27.

28.

29.

30.

31.

32.

33.

34.

1тадес1аГа. с!аГа [со1огроз + 1] +

1тадес1аГа. с!аГа[со1огроз + 2]) / 3

// Эта строка намеренно оставлена пустой

1тадес1аГа. с!аГа [со1огроз ] = ауегаде

1тадес1а^а. с!а^а [со1огроз + 1] = ауегаде

ттадескЛа. скЛа [со1огроз + 2] = ауегаде

35.	хроз = хроз + 1

36.	}

37.

38.	уроз = уроз + 1

39.	}

40.	соп^ех-Ь.ри'ЫтадеЭаЪа (ттадейа^а, 320, 0)

41.	}

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

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

Первым делом следует обратить внимание на вызов функции деъттадеэаъа (), кото-
рая запрашивает все данные изображения, начиная с позиции о,о с шириной и вы-
сотой 320 пикселей, для загрузки в объект с простым названием 1тадес1а^а. Это будут
данные, подвергаемые обработке.

Далее присваиваются значения трем переменным:	и Ье1дЬ^ получают значения

ширины и высоты изображения в пикселях (оба 32о), а переменной уроз присваива-
ется значение о. Эта переменная будет использоваться в качестве счетчика переме-
щений по строкам данных изображения. Она будет увеличиваться на 1 при каждой
последующей обработке строки данных, пока не достигнет значения 320 (представ-
ляющего строку за нижней частью изображения), после чего она уже не будет ис-
пользоваться, и выполнение кода завершится.

Как хранятся данные о цвете

Прежде чем рассматривать цикл ™М1е(), выполняющий эту обработку данных, сна-
чала нужно понять, как данные изображения выкладываются в память. Не волнуй-
тесь, здесь нет ничего сложного и непонятного. Цвета в изображении холста состо-
ят из четырех различных значений, каждое из которых может находиться в диапа-
зоне от 0 до 255 (или от 0x00 до ОхРР в шестнадцатеричной системе счисления, где
также используются буквы от А до Р, которые позволяют обозначить 16 цифр от 0
до Р, необходимых для работы с числами по основанию 16).

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

Р1ока прозрачность нас не интересует, но мы все равно вынуждены пропускать за
раз все четыре значения, чтобы попадать на каждое новое значение цвета. Затем
берутся только первые три значения, чтобы выявить красный, зеленый и синий
компоненты этого цвета, а четвертое значение игнорируется.

Последовательный перебор данных

Теперь, выяснив все эти обстоятельства, можно вернуться к примеру, где в строке
13 вводится цикл мМ1е(), позволяющий выполнять содержимое, заключенное в фи-
гурные скобки только в том случае, если значение уроз меньше, чем значение
ЬетдМ. Эта проверка гарантирует продолжение обработки до тех пор, пока значение
уроз не станет меньше значения ЬетдМ (составляющего высоту в 320 пикселей), что
и будет причиной завершения обработки.

Пока все хорошо. Есть возможность последовательно перебрать все строки данных
изображения. Затем во время каждого прохода цикла уроз нужно обрабатывать ка-
ждую из строк, проходя каждый раз по четыре значения. Для этого создается новый
счетчик циклов с именем хроз, который инициализируется значением о и готов ко
входу во второй цикл, начинающийся со строки 21. Здесь уже содержимое цикла
будет выполняться только до тех пор, пока хроз будет меньше ширины изображе-
ния, доходя до значения (равного 320). Пока значение счетчика меньше, серд-
цевина обоих циклов будет доходить до выполнения кода в строке 23.

Обработка данных изображения

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

То есть, если, к примеру, очередь дошла до начала 30 строки, а в каждой строке 320
пикселей, то просмотрено уже 9600 пикселей, и, следовательно, уроз, умноженное
на мЫъь, будет равно 9600. Но следует помнить, что цвет каждого пикселя состав-
лен из четырех элементов данных, поэтому, чтобы найти точную позицию в данных
изображения для начала строки, это значение умножается на 4. В примере со стро-
кой 30 это будет 30 х 320 х 4, или 38 400.

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

И наконец, чтобы узнать точное начало данных изображения, представляющих как
строку, так и столбец, эти два результата складываются. В случае примера с место-
положением 30, 42 весь расчет будет 20 х 320 х 4 + 42 х 4 или, как указано в строке 23:
23.	соХогроз = уроз * мХс±Ъ * 4 + хроз * 4

Усреднение данных о цвете

Теперь уже точно известно, где в объекте Хтадааа^а можно найти данные изображе-
ния для текущего пикселя, поэтому в строках с 24 по 27 извлекается каждое из трех
значений в позициях соХогроз, соХогроз + х и соХогроз + 2, затем они складываются,
делятся на 3, чтобы получить среднее значение красного, зеленого и синего компо-
нентов цвета, а результат помещается в переменную с именем ауегаде. Это делается
с помощью квадратных скобок после ключевого слова ааъа, которые сообщают
1ауа8спр1, что данные следует извлекать из данных изображения по заданным
смещениям.

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

Затем в строках с 31 по 33 среднее значение возвращается в ХтадеДаЪа, заменяя три
различных значения красного, зеленого и синего компонента одним и тем же сред-
ним значением, что означает, что цвет пикселя превращается в оттенок серого цвета.

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

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

Другие эффекты

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

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

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

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

29.	аVе^аде = ОхГГ - ауегаде // Инвертирование цветовых настроек

Результат показан на рис. 10.8.

0 1пуеП1пд апд МолосЬгогпе X +

<- *> С О © 1оса1Но51/Ехатр1е5/5есЬоп_2/10/ехатр1е_07а.НТт1	•

Рис. 10.8. Изображение превращено в монохромное и инвертированное

Давайте попробуем осветлить изображение, заменив код в строке 29 (такое исполь-
зование оператора+=— сокращение кода ауегаде = ауегаде + 0x50).

29.

ауегаде += 0x50 // Осветление

Результат должен быть таким, как на рис. 10.9.
0 МопосЬготе апс! ЬдЬгегйпд X +

Э С О О 1оса1Ьо51/Ехатр1е5/5ес1юп_2/10/ехатр1е_07Ь.Ыт1 Ф 6$ ☆ Л- :

Рис. 10.9. Изображение превращено в монохромное и осветленное

А теперь давайте заменим содержимое строк с 31 по 33 следующим кодом, чтобы
увеличить красную и уменьшить синюю составляющую нового монохромного изо-
бражения, и посмотрим, приведет ли это к своеобразному оттенку сепии?

31.	1тадес1аГа. с!аГа [со!огроз	]	= ауегаде	+	0x50

32.	1тадес1а^а. с!а^а [со1огроз	+	1]	= аVе^аде

33.	1тадес1а^а.с!а^а[со1огроз	+	2]	= ауегаде	-	0x50

Теперь результат выполнения кода	примера должен	выглядеть так, как показано на

рис. 10.10.

И для получения завершающего эффекта давайте добавим к изображению случай-
ный шум, изменив эти строки кода следующим образом:

31.	1тадес1а^а. с!а^а [со1огроз	]	= ауегаде	+	МаГЪ. гапс!от ()	*	0x80

32.	1тадес1а^а. с!а^а [со1огроз	+	1]	= ауегаде	+	МаГЛ. гапс!от ()	*	0x80

33.	1тадес1а^а.с!а^а[со1огроз	+	2]	= ауегаде	+	МаГЬ.гапс!от()	*	0x80

Результат этих изменений должен выглядеть так, как показано на рис. 10.11.

Здесь случайное значение в диапазоне от 0 до 0x80 (в десятичном исчислении —
128) было добавлено к каждому из красных, зеленых и синих цветовых компонен-
тов в оттенках серого, для чего была использована функция гапаотО из 1ауа8спр1-
библиотеки маъь. Эта функция возвращает значение с плавающей точкой в диапазо-
не от 0 до 1, поэтому при его умножении на любое значение возвращается число от
0 до 128.

Понаблюдайте за происходящим при многократной перезагрузке примера. Всякий
раз будет получен совершенно другой набор шумов, показывающий, что результат
имеет по-настоящему случайную природу (на самом деле псевдослучайную, дос-
тупную конкретному компьютеру без посторонней помощи). Попробуйте поэкспе-
риментировать с содержимым строк с 29 по 33 и посмотреть, можно ли придумать
свои собственные эффекты.

ф Сгеайпд а 5ер!а Топе	X +

<- -> С О ® 1оса1Ьо5^Ехатр1е5/5есг1Оп_2/10/ехатр1е-07сЫт1 Ф Ф ☆ Л-

Рис. 10.10. Создание тона сепии

□ X

ф МопосНгот апд Капйот Ыо($е X +

€ •♦ С О Ф 1оса1Ьо5Ь Ехатр1е5/8есНоп_2/10/ехатр!е_07<1Ыт1

О. ®	» 1^ :

Рис. 10.11. Добавление к монохромному изображению случайного шума
Создание собственных данных изображения

Объект ттадеаа^а необязательно создавать непосредственно из содержимого холста,
поскольку можно просто создать новый объект с пустыми данными, вызвав пока-
занную ниже функцию сгеа^е1тадеоа^а(), которая словно из воздуха создает пустой
объект шириной 320 и высотой 240 пикселей:

1тадес1а^а = сгеа^е1тадеБа^а (320, 240)

Кроме того, новый объект можно создать из любого уже существующего объекта:
пем1тадес1а^аоЬ]ес± = сгеа^е1тадеБа^а (1тадес1аГа)

Затем уже вам решать, что сделать с этими объектами, добавляя к ним пиксельные
данные, и как их нарисовать на холсте или создать из них другие объекты. Как бы
то ни было, но это упражнение все же больше подходит для пользователей, более
сведущих в программировании на 1ауа8спр1.

Заключение

Итак, вы почти что добрались до самого конца учебника по работе с холстом
НТМИ5. Вы не только освоили все основные навыки, необходимые для получения
максимальной отдачи от холста, но и, если вы еще не причисляли себя к програм-
мистам, работающим на 1ауа8спр1, то теперь можете уверенно считать, что достиг-
ли в этом деле уровня опытного новичка. В следующей главе после изучения таких
дополнительных функций, как компоновка и прозрачность, вам предстоит превра-
титься в настоящего мастера работы с холстом.
ГЛАВА 11

Расширенные возможности работы
с холстом

Введение

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

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

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

Структура

В этой главе рассматриваются следующие темы:

♦	Получение сведений о выстраивании композиций и прозрачности и порядке их
совместной работы.

♦	Освоение двенадцати новых разнообразных способов рисования на холсте.

♦	Приобретение навыков применения еще нескольких функций 1ауа8спр1.

♦	Освоение приемов манипуляции изображениями с помощью поворотов и других
преобразований.

Цели

Изучение предлагаемого материала завершит обучение работе с холстом НТМИ5.
Вы станете специалистом по применению большинства его самых распространен-
ных функций и узнаете о возможностях, открываемых его наиболее совершенными
функциями. Также вы пополните знания о циклах и структурах данных и об управ-
лении объектной моделью документа (ИОМ) из сценариев 1ауа8спр1.

Выстраивание композиции и прозрачность

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

Возможно, вас заинтересует, что именно подразумевается под понятием выстраи-
вания композиции. Это способ описания порядка размещения элементов рисунка на
холсте. Например, должен ли элемент выходить на первый план, или же появляться
за уже существующим объектом и т. д. Чтобы управлять выстраиванием компози-
ции, МОЖНО воспользоваться СВОЙСТВОМ д1оЬа1Сотроз1Ъе0регаЪ1ОП, позволяющим пол-
ностью изменить способ рисования объекта в зависимости от переданного этому
свойству значения.

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

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

♦	8оигсе-ш: Видны только части исходного изображения, которые будут появ-
ляться в целевом изображении, а само оно удаляется. Любая альфа-прозрачность
в исходном изображении приводит к удалению целевого объекта под ним.

♦	8оигсе-ои€: Видны только те части исходного изображения, которые не появля-
ются в целевом изображении, а само оно удаляется. Любая альфа-прозрачность
в исходном изображении приводит к удалению целевого объекта под ним.

♦	8оигсе-а€ор: Исходное изображение видно там, где оно перекрывает целевое.
Целевое изображение видимо там, где оно непрозрачно, а исходное наоборот.
Остальные области прозрачны.

♦	с!е8Йпайоп-оуег: Исходное изображение рисуется под целевым изображением.

♦	Де8Йпайоп-1п: Целевое изображение видно в местах перекрытия исходного и
целевого изображений, но не в областях прозрачности исходного изображения.
Исходное не отображается.

♦	Де8Йпайоп-оий Видны только те части целевого изображения, которые находят-
ся за пределами непрозрачных областей исходного. Исходное изображение не
отображается.
♦	йезйпайоп-айф: Исходное изображение видно там, где не отображается целе-
вое. Там, где целевое и исходное изображения перекрываются, показывается це-
левое изображение. Любая прозрачность в исходном изображении предотвраща-
ет отображение этой области целевого изображения.

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

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

♦	Сору: Исходное изображение копируется поверх целевого. Любая прозрачная
область исходного изображения приводит к тому, что любая перекрытая им об-
ласть целевого изображения не отображается.

♦	Хог: Там, где исходное и целевое изображение не перекрываются, они отобра-
жаются как обычно. Там, где они перекрываются, их цветовые значения подвер-
гаются операции ХОК (Исключающего «ИЛИ»).

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

Рис. 11.1. Изображение земного шара
для использования с выстраиванием композиций

Пример 11.1

1.	<1ЭОСТУРЕ Мт1>

2.	<Мт1>

3.	<Ъеас1>

4.	<-ЫЕ1е>Сотроз1Мпд Ехатр1ез< Д1Ме>

5.	</Ееас1>

6.	<Ьос1у>

7.	<зсг1рЕ>
8.

9.

10.

11.

12.

13.

14.

15.

16.

17.

18.

19.

20.

21.

22.

23.

24.

25.

26.

27.

28.

29.

30.

ттаде	=	пем 1таде()

ттаде.зге =	’д1оЬе.рпд*

курез	=	[’зоигсе-оуег’,	’зоигсе-1п’,

’зоигсе-оик',	’зоигсе-акор',

’ с!езк1пак1оп-оуег ’,	’ ^езМпаМоп-тп ’,

’ с!езк1пак1оп-оик ’ ,	' с!езк1пак1оп-акор	’ ,

’ИдЫег',	Магкег’,

’сору’,	’хог’]

ттаде. оп!оас1 = Гипск1оп()

{

Гог (з = 0 ; д < 12 ; ++д)

{

сапуаз	= йоситепк. сгеакеЕ1етепк (’ сапуаз ’)

сапуаз .мтс±Ъ	=	120

сапуаз.кеГдкк	=	120

сапуаз. зку1е.Ьаскдгоипс! =	’#сккГ

сапуаз.зку1е.тагдтп	=	’5рх’

сопкехк	=	сапуаз .декСопкехк (’2с1’)

сопкехк.аге(50, 50, 50, 0, Макк.Р1 * 2)

сопкехк. Ш13ку1е = ’огапде’

сопкехк. Г111 ()

31.

32.	сопкехк.д!оЬа1Сотрозтке0регактоп = курез [д]

33.	сопкехк.с1гам1таде (ттаде, 20, 20, 100, 100)

34	.	с!оситепк.Ьос1у.аррепсЮЪтЫ (сапуаз)

35.	}

36.	}

37.	</зсгтрк>

38.	</Ьос1у>

39.	</Ъкт1>

Этот пример немного отличается от примеров из предыдущих глав тем, что при
использовании атрибут д1оЬа1Сотрозтке0регактоп применяется ко всему холсту, и по-
этому для отображения всех двенадцати различных значений атрибута необходимо
создать двенадцать независимых холстов. И чтобы укоротить код, использовано
несколько более совершенных методов 1ауа8спр1. В данном конкретном случае
пример показан целиком.

Давайте разберем программу, начиная со строк с 1 по 6, являющихся стандартными
для НТМЬ-документа. Стало быть, разбору подлежит только содержимое между
тегами сценария в строках с 8 по 36.

Строки 8 и 9 узнаваемы, поскольку это уже известные инструкции по загрузке изо-
бражения. В данном случае используется изображение из файла д1оЬе.рпд. Далее в
строках с 10 по 15 есть кое-что совершенно новое. В них показано сохранение всех
возможных имен значений атрибутов в так называемом массиве. Массив похож на
пачку переменных, ссылки на которые идут по порядку номеров.

К примеру, в ^урез [0] содержится значение зоигсе-оуег, а в ^урез [11] — хог, а все ос-
тальные значения содержатся в элементах от ^урез[1] до ^урез [10]. Порядок исполь-
зования массива будет показан ниже.

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

Использование цикла

В строках с 19 по 35 содержится новая функция, впервые представляемая в данной
книге — цикл иного рода под названием Гог(). Он похож на циклы ™М1е() из пре-
дыдущих глав, но более лаконичен, поскольку принимает три аргумента, позво-
ляющих настроить счетчик цикла, используемый в качестве первого аргумента.
В данном случае в качестве счетчика используется переменная ] с начальным зна-
чением о.

Затем циклу указывается условие, при котором он может быть выполнен, в данном
случае, если д имеет значение меньше 12 (поскольку существует 12 типов приме-
няемых атрибутов композиции). И наконец, циклу указывается, что делать после
каждой итерации. В данном случае циклу предписывается увеличить переменную д
на 1, используя краткую форму оператора в виде сочетания символов ++, т. е. записи
++з и з = з + 1 — это одно и то же, но первая выбрана для краткости.

Теперь, после захода в цикл в строке 21, показанные в нем инструкции будут вы-
полняться в общей сложности 12 раз со значениями от 0 до 11. Первом делом при
каждом проходе цикла с помощью функции аоситеп^. сгеа^еЕ1етеп^ () будет созда-
ваться новый объект холста, называемый просто сапуаз. Это куда проще создания
двенадцати различных холстов в НТМЬ-документе, поскольку все можно сделать,
как говорится, «на лету», в 1ауа8спр1.

Затем в строках 22 и 23 задаются ширина и высота нового объекта холста, после
чего в строках 24 и 25 применяется цветовая стилизация С88, представленная зна-
чением для фона холста, и задается отступ в 5 пикселей. Теперь в строке 26
можно из холста создать контекст, как это делалось во многих недавних примерах.

Рисование изображения

Далее, в строках с 28 по 30, на текущем холсте рисуется закрашенный оранжевый
круг, который будет объектом, поверх которого рисуется изображение земного шара
с использованием текущего выстраивания композиции. Для этого в строке 32 из мас-
сива типов, в соответствии с ранее изложенными описаниями, извлекается текущее
имя атрибута композиции, которое присваивается атрибуту д1оЬа1Сотроз1Ъе0регаЪ1оп.

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

Надеюсь, все понятно, и вам удалось существенно пополнить свои знания
1ауа8спр1 (если все это еще не было известно). А теперь давайте посмотрим на ре-
зультат выполнения этого кода на рис. 11.2, где показаны в действии все 12 типов
композиции в том порядке, что был указан в массиве в строке 10 примера.

Рис. 11.2. Демонстрация 12 возможных атрибутов композиции в действии

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

Изменение прозрачности

При рисовании на холсте вы можете выбрать точную настройку желаемой степени
прозрачности, указав для принадлежащего контексту свойства д1оЬа1А1рЬа значение
от 0 до 1. Давайте, к примеру, изменим оставленную пустой строку 27, записав в
нее следующий код:

27.

соп^ех^.д!оЬа1А1рЬа =0.5
Значение 0.0 означает отсутствие прозрачности, а значение 1.0 указывает, что
должна применяться сплошная прозрачность. Следовательно, введенное выше зна-
чение 0.5 устанавливает полупрозрачность, а результат показан на рис. 11.3, где
вам, возможно, будет легче понять суть эффектов выстраивания различных компо-
зиций, поскольку они применяются всего лишь наполовину, и любые части изо-
бражения, которые были бы стерты, стираются лишь наполовину.

Рис. 11.3. Эффекты выстраивания композиции становятся более понятными,
если вдобавок к ним применяется прозрачность

Применение преобразований

При рисовании на холсте НТМЬ5 с целью изменения способа рисования можно
применять три преобразования: масштабирование, поворот и перемещение. Давай-
те рассмотрим по очереди каждый из них.

В примере 11.2 ромбовидная фигура семь раз рисуется в цикле, где меняется только
цвет и используется значение масштабирования, что приводит к результату, пока-
занному на рис. 11.4.

Пример 11.2

1.	со1огз = [’гес1’Л ’огапде’, ’уеИом’, ’дгееп',

2.	’Ыие’, ’гпсНдо’, ’у1о1еГ’]

3.

4.	Гог (э=О;з<7; ++})

5.	{

6.	сопГехЪ.зауе()

7.	сопГехГ.ЬедапРаГЪ()

8.

9.

сопГехГ.зса1е(1 +	1 + д)
10.

11.	соп+ех+.тоуеТо( 0,	40)

12.	сопГехГ.ИпеТо (40,	0)

13.	сопГехГ.ИпеТо (80,	40)

14.	сопГехГ.ИпеТо (40,	80)

15.	сопГехГ. ИпеТо ( 0,	40)

16.	сопГехГ. НИЗ+у1е = со1огз[]]

17.	сопГехГ. ИИ ()

18.	соп-ЬехН гезИге ()

19.	}

В этом примере опять же показан только основной код 1ауа8спр1 (опущен даже тот
фрагмент 1ауа8спр1, который создает объект контекста сопНхъ), при этом полный
НТМЬ-документ доступен на прилагаемом к книге веб-сайте, а все, что не показано
в примере, такое же, как в примерах из предыдущих глав.

Что происходит в строке 1, уже не должно вызывать вопросов. В ней создается
массив под названием со1огз, элементам которого присваиваются по порядку семь
цветов радуги. Затем в строке 4 вводится цикл Гог() для перебора семи значений )
(от о до б).

В строке 6 путем вызова функции зауе() сохраняются все свойства контекста, что-
бы позднее их можно было восстановить (возвратив любые настройки масштабиро-
вания к исходному значению). Затем в строке 7 создается новый путь, а в строке 9
как к горизонтальным, так и к вертикальным координатам, предоставляемым с это-
го момента через вызов функции зса1е(), применяется значение масштабирования
1 + 5.

Когда з имеет значение о, выражение вычисляется в 1, и для масштабирования ус-
танавливается нормальное отношение один к одному в обоих измерениях. Но когда
3 увеличивается до 1, то 1 + 1 имеет значение 2. Затем 1 + 2 вычисляется в з, и мас-
штаб растет до 1 + 6, что равно 7. Таким образом, цикл создает эффект увеличения
значений масштабирования с 1 до 7.

Затем в строках с 11 по 15 создается путь, необходимый для рисования ромба, по-
сле чего в строке 16 к свойству низ+у1е применяется один из имеющихся в масси-
ве цветов, а в строке 17 выполняется заливка ромба. И наконец, в строке 18 вызы-
вается функция гез+оге(), возвращающая коэффициент масштабирования к исход-
ному значению. Если этого не сделать, текущее масштабирование останется
неизменным для следующего прохода цикла, после чего будет выполнен прирост
коэффициента масштабирования, и так при каждом проходе, приводя к экспонен-
циальному увеличению масштаба.

На рис. 11.4 видно, что ромбы нарисованы друг над другом, и с каждой итерацией
размеры ромба становятся больше, хотя координаты, указанные в строках с 11 по
15, не меняются, в отличие от коэффициента масштабирования.
Получается, что при рисовании на холсте можно создавать пути и фигуры одного
размера, а затем масштабировать их до любой желаемой величины.

ф 5саПпд	X +

<- 4 С О ® 1оса1Ко^Ехатр1е&/Ьесиап^/11/ехап1р1е_02.Ыт1 Ф ф А

Рис. 11.4. Фигура одного и того же размера, увеличенная в несколько раз

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

Использование поворотов

Лучше всего проследить эффект поворотов путем применения их к уже имеющемуся
примеру, поэтому давайте создадим пример 11.3, изменив строку 10 примера 11.2,
и добавив в нее значение поворота:

Пример 11.3 (показана только измененная строка):

10. соп^ех^. го-Ьа11е (з / 7)

В результате будет получен эффект поворота рисунка объекта на небольшую вели-
чину при каждом проходе цикла, показанный на рис. 11.5.
Поскольку радиан имеет значение 180/Р1, или около 57 градусов, фактическая ис-
пользуемая здесь величина поворота представляет собой число от 0 до 6 радиан,
поделенное на 7. Разделив радианы на 7, можно получить поворот каждой новой
формы при каждом проходе цикла на чуть более чем на 8 дополнительных градусов.

Рис. 11.5. Многократное масштабирование и поворот объекта

Применение перемещений

Очевидная проблема при выполнении кода примера 11.3 — исчезновение части фи-
гуры, подвергаемой вращению, за левой границей экрана. Поэтому давайте доба-
вим к каждой итерации перемещение, вставив в строку 8 примера 11.3, превращая
его в код примера 11.4, следующую инструкцию:

Пример 11.4 (показана только измененная строка):

8. соп^ех^.^гапз1а^е(] * 40, 0)

Как при задании масштабирования, перемещение принимает два аргумента, пред-
ставляющие собой величину в пикселях, на которую выполняется перемещение как
в горизонтальном, так и в вертикальном направлении. В данном случае, чтобы вер-
нуть большие ромбы обратно на холст, требуется только перемещение по горизон-
тали, и при каждом проходе цикла это делается всего лишь на 40 дополнительных
пикселей (з * 40). Результат добавления этой инструкции показан на рис. 11.6.
0 БсаПпд, Тгап$1а1юл апс! Ногайол X +

<- 4 а о Ф I оса|ЬоЕУЕха т р1еБ/5ес1ю п_2/11 /еха тр 1е_04. Мт I

□ X

& * » О* :

Рис. 11.6. Объекты все больше масштабируются, перемещаются и вращаются

Применение сразу нескольких преобразований

Можно получить весьма странные и удивительные результаты, используя одну или
обе функции ъгапзГоппО и зеътгапзТоппО, но их применение основано на матрицах
преобразования размером 3 х 3, где содержатся различные параметры, на рассмот-
рение которых уйдет слишком много времени, и поэтому оно не вписывается в
формат этой книги. Но заинтересованный читатель сможет найти довольно много
дополнительной информации на сайте Ъ1пуиг1.сот/сапуазЪгапзГоппз.

Заключение

Дело сделано! Теперь вам известно все, что нужно знать об использовании холста
НТМЬ5. Да, есть целый ряд еще не полностью раскрытых более сложных способов
работы с холстом, но основную часть из того, что они позволяют сделать, можно
реализовать (хотя и более пространно) с использованием уже освоенных вами
функций.

Теперь настало время продолжить изучение всей инфраструктуры НТМЬ5, перейдя
в следующей главе к изучению гео локации.
ГЛАВА 12

Применение геолокации

Введение

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

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

Здесь рассматриваются приемы использования 1ауа8спр1 для определения место-
положения любого устройства с поддержкой геолокации, если пользователь разре-
шает это и браузер поддерживает эту функцию. В случае успеха будут предостав-
лены долгота и широта местонахождения пользователя в виде максимально точной,
в соответствии с возможностями браузера, пары координат (обычно на мобильном
устройстве это делается через спутниковый чип (ЗР8).

Структура

В этой главе рассматриваются следующие темы:

♦	Что такое геолокация, предоставляемая (ЗР8 или другими средствами.

♦	Способы проверки, поддерживает ли браузер пользователя геолокацию.

♦	Управление блокировкой пользователей и согласием на предоставление их ме-
стонахождения .

♦	Преобразование местонахождения пользователя в широту и долготу с целью
отображения его на карте.
Цели

Здесь предстоит изучить все тонкости геолокации НТМЕ5, узнать о ее составляю-
щих, об извлечении пользы от ее применения в различных обстоятельствах и даже
освоить способы преодоления любых ошибок, с которыми можно столкнуться при
ее применении. Изучение материалов главы позволит полностью освоить геолока-
цию и получать точные координаты широты и долготы местонахождения пользова-
теля в том случае, если к ним будет открыт доступ.

Что такое 6Р8

Служба спутникового глобального позиционирования ((31оЬа1 Ро8Йюшп§ 8а1е11йе,
ОР8) состоит из нескольких спутников, вращающихся вокруг Земли, положение
которых определено с весьма высокой точностью. Когда устройства с поддержкой
(ЗР8 настраиваются на эти спутники, разница во времени поступления сигналов от
разных спутников позволяет устройству узнать его местоположение с точностью до
нескольких метров.

При этом используется тот факт, что скорость света (и радиоволн) — известная по-
стоянная величина, а время, необходимое сигналу, чтобы добраться от спутника до
устройства (ЗР8, точно указывает на расстояние до спутника.

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

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

Альтернативы применению СР8

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

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

Если нет и такой возможности, в радиусе действия вашего устройства могут быть
точки доступа АУЕП с известным местоположением, а, поскольку все точки доступа
имеют уникальный идентификационный адрес, называемый адресом управления
доступом к среде (Месйа Ассе§8 Соп1го1, МАС), местоположение может быть доста-
точно точно определено в пределах одной или двух улиц.

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

Примечание

Ваш 1Р-адрес обычно используется медиакомпаниями, ограничивающими вос-
произведение своего контента на той или иной территории. Но можно настроить
прокси-серверы, использующие 1Р-адрес пересылки в той стране, которая бло-
кирует свой контент, чтобы получать и передавать контент, минуя блокировку,
непосредственно в используемый вами браузер. Поэтому следует понимать, что
поиск кого-то по 1Р-адресу не дает 100%-ной уверенности правильного опреде-
ления его страны пребывания.

Проверка доступности геолокации

Из предыдущих глав уже известно, что возможности НТМЕ5 иногда настолько
расширены, что к ним нельзя получить доступ с помощью простого НТМЬ, поэто-
му, чтобы воспользоваться ими, не говоря уже об эффективных способах работы с
ними, требуется определенное знание языка 1ауа8спр1.

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

Пример 12.1

1.	< ! ООСТУРЕ Ычп1>

2.	<Ычп1 1апд="еп">

3.	<Ееас1>

4.	<теба сЪагзеб="иГГ-8" />

5.	<Ш1е>ТезГ1пд Гог Сео1осаГ1оп</Г1Г1е>

6.	</Ееас1>

7.	<Ьобу>

8.	<зсг1рЕ>

9.	//	Начало разбора кода примера в	книге

10.	11	(бурео! пачгдабог.део1осаНоп	== ’ипбеИпесГ)

И.	{

12.	а!егб("Извините, геолокация не поддерживается".)

13.	}

14.	е!зе

15.	{

16.	а!егб("Отлично, геолокация поддерживается".)

17.	}

18.	//	Конец разбора кода примера в книге

19.	</зсг!рб>

20.	</Ьос1у>

21.	</Ыт1>

В этом примере холст не используется, поэтому код немного короче примеров из
предыдущих глав и приведен в полном объеме. Далее по главе в примерах будут
показаны только строки, находящиеся между комментариями (здесь они в стро-
ках 9 и 18).

Надеюсь, основная часть кода вопросов не вызывает, остается только объяснить со-
держимое Строк С 10 ПО 17. Здесь ПРОВОДИТСЯ проверка СВОЙСТВа пач1дабог.део1осаб1оп,
которое должно быть у всех браузеров, поддерживающих геолокацию. Если выяс-
нится, что оно не определено, значит, его не существует, равно как и функции гео-
локации. В наше время функция геолокации поддерживается практически всеми
браузерами, но пожертвовав парой дополнительных строк кода, можно предупре-
дить пользователей вашего веб-сайта, запускающих его на устаревшем браузере, о
том, что эта функция на нем недоступна.

Оповещение — информирование пользователя о наличии или отсутствии функции
геолокации в небольшом всплывающем окне с текстом. Оно проводится путем вы-
зова функции а1егг (), приостанавливающей выполнение сценария, пока пользова-
тель не щелкнет на кнопке ок (или, в случае мобильного браузера, не коснется ее
изображения).
Для проверки используется инструкция ио с выражением внутри скобок, вычис-
ление которого в ^гие приводит к выполнению инструкций, заключенных в фигур-
ные скобки. Проверка отсутствия свойства гд^ГдаЪог.деоГосаЪГоп может привести
только к результату ъгие или ГаГзе. Если получен результат ^гие, выполнение кода в
строке 12 приводит к отображению оповещения об отсутствии поддержки геолокации.

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

О ТюСкпд Ьг беоЬсакюп	X +

X С © 1оса1Ьс5Шатр1е^^(:0пг1_2/12/ехатт1рЕе^01,Мт1 О. © ☆	> 0 

.............................. - 

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

Использование консоли разработчика

Для тестирования кода разработчикам лучше воспользоваться не окнами оповеще-
ния, а отправкой сообщений в консоль разработчика 1ауа8спр1. Тогда не будет ни-
каких отвлекающих всплывающих окон, а информацию можно будет просто уви-
деть в консоли. Так, например, вместо показа двух оповещений в примере 12.1 в
ходе разработки результат выполнения следующего кода мог бы выглядеть, как на
рис. 12.2.

(^уреоГ пачГдаГог.деоГосаГтоп == 'шкГеГГпесГ)
{

сопзоГе.Год("Извините, геолокация не поддерживается".)
}
еГзе

{

сопзоГе.Год("Отлично, геолокация поддерживается".)

}

Более подробные сведения о настройке и использовании консоли разработчика
приведены в главе 3 «У18иа1 81ис1ю Собе». Теперь уже можно убедиться и в том,
насколько полезна консоль не только для пошагового просмотра и изучения доку-
ментов и их стилей, но и для получения в ходе разработки сообщений, не мешаю-
щих запуску тестируемого кода.

ОеуТоо!$ - 1оса1Ьо5^Ехатр1е$/5ес1юп_2/1...	—	□ X

Гк б~] Е1етеп15 Соп5о1е Яесогс1ег X	$	•

ПЯ ® 1ор ▼ О Якег	Ф

ОеТаиИ 1еуе1з Т № 15зие5

6геа1, §ео1осаИоп 15 зиррогЧей. еха.тР1е_01а. ЬХпЦ: 16

Рис. 12.2. Сообщение отображается в консоли разработчика

Перенаправление пользователей

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

По всей видимости, лучше было бы направить пользователя на другую веб-
страницу, где для него есть более подходящее содержимое. Это делается простым
указанием нового 1ЖЕ-адреса в настройках местоположения браузера. Соответст-
вующие действия показаны в примере 12.2, где приводится только та часть доку-
мента, которая связана с применением 1ауа8спр1.

Пример 12.2

1.	(^гие == ^гие)

2.	{

3.	№1пс1о№. ГосаПоп = ’ЪГГр: //доод1е.сот’

4.	}

Чтобы обеспечить постоянную работу примера, вместо прежней инструкции про-
верки условия применена новая, которая всегда будет возвращать значение ъгие,
поскольку ^гие всегда равно ^гие. Если же оставить проверку на поддержку геоло-
кации, перенаправление по 1ЖЕ-адресу (в строке 3) можно будет протестировать
только в браузерах без геолокации. Как показано на рис. 12.3, результатом выпол-
нения кода примера станет немедленное перенаправление пользователя на веб-сайт
Сюо§1е.
@ 6оод1е	X +

<- 4 С О А доод1е.сот

АЬоЫ 81оге	Стал I гладе®

Ооод1е

Сосд1е ЗеагсК	Гпп РееПпд Ьиску

ОпПей К!пдс1огп

\ СагЬоп пеи1га1 в!псе 2007

Айуёг1151пд Виате®® Поит ЗеагсЬ шогкз	Ри уасу Тегтэ ЗвЙ!пд5

Рис. 12.3. Пользователь с помощью 1ауа8спр1
был перенаправлен на другой ПКЬ-адрес

Разумеется, на вашем собственном веб-сайте инструкция проверки наличия функ-
ции геолокации в браузере будет настоящей, а СГКЪ-адрес, на который вы отправ-
ляете пользователей браузеров без геолокации, будет созданным заранее по вашему
выбору.

□ X

0 Ыо Сео1асаг1ог

«- -> с о ® I оса IНО51/Ехатр] е 5/5&с1| оп_2/12/по_део,Н 1тI

*

]Чо Сео1осайоп

ЕКЬег уои йауе Ыоскес! а гедиевГ Го ргоу{(1е §ео1осаГ1оп
(1еГа!1$, ог уоиг Ьгонзег (1ое$п’Г $иррог( §ео1осаНоп.

Рис. 12.4. Стандартная заготовка страницы для случаев отсутствия геолокации

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

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

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

Получение сведений о местоположении пользователя

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

Поэтому следует предусмотреть возможность реагирования по двум вариантам.

♦	Если пользователь дает разрешение, вам нужно что-то сделать с возвращенным
местоположением или...

♦	Если в доступе отказано, то пользователя можно было бы отправить по 1ЖЕ-
адресу, заготовленному на случай отсутствия в браузере поддержки геолокации.

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

При вызове сервиса геолокации есть весьма удобный способ перенаправления, пре-
дусматривающий применение двух именованных функций 1ауа8спр1. Первая из
них будет вызываться, если пользователь предоставит доступ, а вторая — если дос-
туп отклонен. Эта функция сервиса называется деъсиггепЪРозДиопО, а программа
для ее использования может выглядеть примерно так, как показано в примере 12.3,
где теперь в строках с 1 по 5 сценарий конкретно разбирается с тем, поддерживает
браузер геолокацию или нет.

Пример 12.3

1.	тГ	(ГуреоГ паухдаДог .део1осаД1оп == ’ипДеПпесГ)

2.	{

3.	сопзоГе.Год(’Геолокация отсутствует’)

4.	мтпскж.ГосаГтоп = ’по_део.ЬГт1’

5.	}

6.	еГзе
7.	{

8	.	пачгдабог. део1осаЫоп. деЬСиггепЬРозгЫоп (дгапкеб, Ьепгеб)

9.

10.	ГипсЫоп Ьепгеб (еггог)

11.	{

12.	змГбсЬ(еггог.собе)

13.	{

14.	сазе	1:	теззаде	=	’В разрешении было отказано'; Ьгеак

15.	сазе	2:	теззаде	=	'Позиционирование недоступно’; Ьгеак

16.	сазе	3:	теззаде	=	'Превьплено допустимое время ожидания'; Ьгеак

17.	сазе	4:	теззаде	=	'Неизвестная ошибка’

18.	}

19.

20.	сопзо!е.1од("Ошибка геолокации: " + теззаде)

21.	игпскж. 1осаЫоп = ’ по_део. Мт1 ’

22.	}

23.

24.	ГипсЫоп	дгапЬеб (розтЫоп)

25.	{

26.	сопзо!е.1од(’Геолокация разрешена’)

27.

28.	// Сюда помещается все, что нужно сделать

29.	}

30.	}

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

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

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

А в строке 8 возникает необходимость знать о тех двух местах, куда должно пере-
даваться управление сценарием в зависимости от решения пользователя заблокиро-
вать или же принять геолокацию, поэтому теперь используются функции, которым
даются имена, позволяющие указать их в этой инструкции.
0 Веяиезйпд косзОоп	X +

<- -> с о © 1оса1Ьо51/Ехатр1е5/5ес11Оп_2/12/ехатр1е_03.Н(т1	1псодп1Ю

	х и^инннми

ЬПр://1оса1Но$! \л/апГ$ 1о	ММШИИЙ|И№МММ|И

9 Кпоуу уоиг 1осаЪоп

А Пол	В1оск

Рис. 12.5. Браузер запрашивает у пользователя разрешение
на раскрытие своего местоположения

Именованные функции

Наличие имен позволяет размещать такие функции практически в любом месте ко-
да, поскольку интерпретатор 1ауа8спр1 всегда сможет их найти. Но, чтобы не ус-
ложнять ситуацию и облегчить чтение кода при его сопровождении, такие функции
лучше размещать рядом с вызывающим их кодом. Поэтому определение функции
аепгеао находится в строке 10, сразу же за строкой ее вызова.

В эту функцию включена новая (для этой книги) конструкция 1ауа8спр1 по имени
зм1Гс± (). Это весьма компактный и понятный способ проверить значение, а затем
выполнить соответствующие ему те или иные действия. В данном случае прове-
ряемое значение представляет собой объект по имени еггог, который был отправлен
функции 1ауа8спр1, чтобы точно сообщить ей о причине ее вызова. Объект ошибки
еггог имеет свойство по имени соае, у которого, как указано в строках с 14 по 17,
может быть значение в диапазоне от 1 до 4, где значение соае равное 1 гласит, что в
разрешении было отказано, 2 — что позиция была недоступна, 3 — что операция
превысила допустимое время ожидания и 4 — что причина ошибки неизвестна.

В конце строк с 14 по 16 стоят ключевые слова Ьгеак (после точки с запятой, разде-
ляющей инструкции), сообщающие 1ауа8спр1, что далее в конструкции з^1ксь для
него нет ничего интересного, и из нее нужно выходить с переходом на строку ниже.
А в строке 17 ключевое слово Ьгеак ставить не нужно, поскольку далее выполнение
сценария может продолжаться только в следующей строке, находящейся ниже всей
конструкции.

И наконец, в строке 20 этой функции на консоль отправляется сообщение об ошиб-
ке, чтобы поспособствовать отладке, и, поскольку больше здесь делать нечего, код
в строке 21 отправляет браузер на 1ЖЬ-адрес по део.ьш!, где, надеюсь, ситуация
может проясниться, предоставив пользователю подсказку о его дальнейших дейст-

виях.
Когда получено разрешение

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

Можно решить эту задачу, обновив код до примера 12.4, в котором показано только
содержимое функции дгап^еа, поскольку остальная часть примера идентична коду
примеру 12.3.

Пример 12.4 (только код функции дгап1ес1)

1.	ГипсЫоп дгап^ес! (розтМоп)

2.	{

3.	сопзо1е. 1од (’ 6ео1осаМоп дгап^ес! ’)

4.

5.	1аГ = роз1Моп. сооЫз. 1аГ1Гис1е

6.	1оп = розаМоп. сооЫз. 1опд1^ис1е

7.	тар = ’Ъ^рз://ш/ш.доод1е.сот/тарз/@"

8.

9.	мтпскж. 1осаМоп = тар + 1аГ +	+ 1оп + ",8г"

10.	}

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

Как уже говорилось, код в строке 3 отправляет сообщение на консоль в целях об-
легчения отладки, но для уже готового кода он будет не нужен. Затем в строках 5 и 6
путем считывания значений из принадлежащих объекту розаМоп свойств
сооЫз. 1атиае и соогйз. 1од11ис1е из него извлекаются данные, которые помещаются
в переменные 1еъ и 1оп. Фактически в этом нет особой необходимости, поскольку
этими свойствами можно воспользоваться непосредственно в строке 9, но лаконич-
ность и разборчивость кода — достойная цель, особенно для новичка. А использо-
вание этих имен временных переменных делает строку 9 короче и понятнее.

Можно также обойтись и без кода в строке 7, поскольку строковое значение, при-
сваиваемое переменной тар, также может быть передано непосредственно в строке 9.
Но теперь, используя эти сокращенные имена переменных при анализе содержимо-
го строки 9, будет гораздо проще дать точное описание всему, что в ней происходит.

И наконец, в строке 9 встретится уже знакомое присваивание значения объекту
ю-пасж. 1оса-Ыоп, поскольку именно это делалось при отправке пользователя на стра-
ницу по део.ьшх. А здесь, по сути, происходит то же самое, но теперь уже пользова-
тель отправляется на сайт Сюо§1е Мар§, а к 1ЖЬ-адресу для карты добавляется (через
запятую) широта и долгота. И последнее значение, 8х, сообщает Сюо§1е Мар§ степень
увеличения масштаба. Чем меньше это число, тем меньше будет увеличение, поэтому
для получения других результатов с числом можно поэкспериментировать.



% 6оод1е Марз	X Ц-

-> С О й доод1е.сопл/тар5/@28.Б26109,77.21229333?	12	#	:

Ма1юпа1 Р;

а три г >

ТО

МогадаЬас!

Ра
1

АтгоЬа

31 МЧ) ^5 [

т1аи

И’

Казйриг
Ф|МН^*'

Огосепез

_^Л]ГЮГ
шэд

Мееги(

За^Ыриг

314Е

46

1еетга1

□кесиопз

<пКа,

243А

глад

6о

д1е Уппдауап

Л

$ 1_ауег8

РНапГ

Род - 13°С
20:39

ЭД'

Бишдгат

Нею Ое1Ь!

0е1Ы • 1пд1а

А№аг
зщцч

Мар (1а1а С2022 11пНед Ктддот Тегтз Рпуасу $епд (еедЬаск 50 кт и

СЫгау^а
ЛЬиПЬили	Иагпаи!

1  41 .

Рис. 12.6. Создание с помощью геолокации локального УКЬ-адреса Ооо§1е Мар§

Н»заг
1^'НН
о

Нап51

НоЫак

Зот'ра:

ВЬп/уап!



Применительно к строковым значениям 1ауа8спр1-оператор + приводит к объеди-
нению строк, так ЧТО, К примеру, ’део’ + ЧосаМоп’ И ’део1осаЪ1оп’ — ЭТО ОДНО И ТО
же. Именно так создается и присваивается полноценная строка ИВЬ-адреса.

Заключение

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

В этой главе рассмотрены способы обхода отсутствия в браузере поддержки геоло-
кации или же блокировки доступа к ней. В следующей главе будут рассмотрены
расширенные функции форм, предлагаемые НТМЬ5, часть из которых может при-
годиться для обеспечения контролируемой пользователем альтернативы примене-
нию гео локации.
ГЛАВА 13

Работа с формами

Введение

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

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

Структура

В этой главе рассматриваются следующие темы:

♦	Изучение всех новых функций форм, добавленных в НТМЬ5.

♦	Освоение работы со средствами выбора даты, времени и цвета.

♦	Освоение приемов включения (и отключения) автозаполнения.

♦	Приобретение навыков использования расширенных функций переопределения
и диапазонов.

Цели

Цель главы — собрать все новые функции форм НТМЬ5 в одном месте и рассмот-
реть каждую из них, даже если какие-то из функций пока что не нашли широкого
применения. Изучив предлагаемый материал, вы станете специалистом по повыше-
нию эффективности использования форм.

Атрибуты формы НТМ15

С 2015 года, когда спецификация НТМЕ5 наконец стабилизировалась и начала
одинаково работать в разных браузерах, все, что ранее было известно как \УсЬ
Рогшз 2.0, было полностью поглощено НТМЬ5 во всех основных версиях браузеров
и на всех платформах: как стационарных, так и мобильных.

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

Для форм появилось множество новых атрибутов и тегов, и здесь предстоит зна-
комство с ними с подробными объяснениями, для чего предназначен каждый из
них и как его использовать. Начнем с новых атрибутов формы, и первым будет
аиЕоГосиз.

Атрибут аи(о(осиз

Атрибут аи^оГосиз может применяться к любому тегу <1при^> для автоматического
попадания его поля в фокус при загрузке страницы. При этом курсор помещается в
поле в готовности к вводу данных или к выбору любого другого типа поля в готов-
ности к изменению. Как происходит активация, показано в примере 13.1. Пример
показан целиком, поскольку в этой главе они отличаются от тех, что были в преды-
дущей. Но после этого примера будут, как видно на рис. 13.1, показываться только
те инструкции, которые заключены в документе в пару тегов <Ьоау>.

Рис. 13.1. Фокус на второе поле ввода был направлен автоматически

Пример 13.1

<! ЭОСТУРЕ Мт1>

2.	<Мт1 1апд="еп">

3.	<Ееас1>
4.	<те^а сЬагзеР="иРР-8" />

5.	<ММе>ТезМпд Рог Сео1осаР1оп</ММе>

6.	</Иеас1>

7.	<Ьос1у>

8.	<Гогт теРкос1=’розР ’ асМоп='туГогт.ркр’>

9.	Зоте РехР <1приР Ъуре=’Рехр’ пате= ’’Ьех’Ы ' ><Ьг>

10.	Моге РехР <1приР Руре=’Рехр’ пате=’РехР2’ аиРоГосиз=’аиРоГосиз’>

11.	<1приР Руре=’зиЬпнЛ ’>

12.	</Гогт>

13.	</Ьос1у>

14.	</ЪРт1>

Это обычный документ НТМЬ5, в котором создана форма с двумя полями ввода:
ъехЪ1 и РехР2. Но из-за указания атрибута аиРо1осиз='аиРоГосиз' фокус получает не
первое поле, что было бы по умолчанию, а второе. Признаками этого служит, как
показано на рис. 13.1, выделение жирными линиями контура поля ввода и наличие
в нем курсора ввода.

Чтобы пример работал, для отправки формы должен также присутствовать РНР-
файл туГогт.рЬр, получающий отправленные значения. Хотя эта книга не про РНР, в
некоторых местах возникают потребности в использовании и этого языка, когда, к
примеру, как и в нынешней ситуации, требуется изучить результат пользователь-
ского ввода. Поэтому код РНР для этого файла показан в примере 13.2.

Пример 13.2

1.	<?ркр

2.	есЬо "РехМ:	. $_РОЗТ ["РехМ"] . ”'<Ьг>";

3.	еско "РехР2:	. $_РОЗТ [”ГехГ2’’] . "’<Ьг>";

4.	?>

Код этого примера просто приводит к отображению значений двух полей, получен-
ных программой. Результат — на рис. 13.2.

0 Ьса№о5№этр1е5/5ес1|0п_2/1 X +

<- -* С О Ф 1ск:аЖс5Х/Е^атр1е5/5ес4шп_2/13/т.укйтп.рЬр

-	□ X

О. & ☆ *	:

Тех и: "

Гех(2: Неге 15 зоте (ехГ

Рис. 13.2. Выполнение РНР-кода приводит к отображению полученных входных данных

Поскольку выделено было только второе поле, именно в него и был введен текст,
поэтому на рисунке ввод содержится только в РехР2, но если бы значения были за-
даны обоим полям, то были бы показаны оба значения.
Есть также сокращенная форма установки атрибута аиЪоГосиз, где вместо строки 10
примера 13.1 используется следующая строка, в которой часть ='аи^оГосиз' опуще-
на, но результат выполнения кода остается таким же:

10.	Моге <1при^ ^уре=’^ех^’ пате=’^ех^2’ аи^оГосиз>

Атрибут аи(осотр1е(е

Этот атрибут может применяться к тегу <1огт> или к любым типам тега <1прщ>:
со1ог, с!аГе, ешаИ, разз^огс!, гапде, зеагсЪ, Ге1, ^ех^ ИЛИ иг1. Допустимый аргумент ДЛЯ
этого атрибута — либо оп (по умолчанию), либо огг.

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

При применении к тегу <1огт> атрибут влияет на все поля, принадлежащие форме, а
при применении к тегу <1при^> он применяется только к данному конкретному по-
лю. Поэтому при создании форм, в которых может содержаться конфиденциальная
информация, автозаполнение для всей формы лучше не разрешать, и применять его
только к входным данным, где запрашивается несекретная информация. Дело в
том, что при доступности компьютера третьим лицам может возникать угроза безо-
пасности, связанная с возможностью их перехода на страницу с формой, где вклю-
чено, к примеру, автозаполнение данных банковского счета, которые могут быть
легко отслежены и скопированы посторонним лицом.

В примере 13.3 показан вариант кода из примера 13.1, где функция автозаполнения
применена ко всей форме.

Пример 13.3

1.	<Гогт асМоп=’туГогт.ркр’ те1±юс1=’розГ’ аи^осотр1е^е=’оп’>

2	.	Зоте ^ех^ <1при^ ^уре=’^ех^’ пате=’ГехГ1’><Ьг>

3.	Моге ^ех^ <1при^ ^уре=’^ех^’ пате=’ГехГ2’>

4.	</Гогт>

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

В этом примере (как и указывалось ранее) отображаются только строки НТМЕ, за-
ключенные в тело документа, остальная же часть документа остается прежней. К
тому же в примере не устанавливается автофокус, поэтому единственное, что за-
служивает внимания, это код аиГосотр1еГе='оп' в строке 1. Если автозаполнение
включено, раскрывающиеся окна со списками ранее введенных данных будут пре-
доставляться обоими полями, объявленными в строках 2 и 3.

Рис. 13.3. Во втором поле предлагается
раскрывающийся список автозаполнения

Чтобы отключить автозаполнение, можно убрать установку атрибута из строки 1
ИЛИ ДОбаВИТЬ К ОДНОМУ ИЛИ НеСКОЛЬКИМ ПОЛЯМ ВВОДа установку аиГосотр1еГе='оГР,
что и будет сделано со вторым полем путем следующего изменения кода в строке 3:
3.	Моге ГехГ <1приГ Гуре=’ГехГ’ пате=’ГехГ2’ аиГосотр1еГе=’оГГ’>

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

Пример 13.4

1.	<Гогт асЫоп=’туГогт.рйр’ теГйос1=’розГ ’ аиГосотр1еГе=’оГГ’>

2.	Зоте Гех1: <1приГ Гуре= ’ ГехГ ’ пате=’ГехГ1 ’ ><Ьг>

3.	Моге Гех11 <1приГ Гуре=’Гех-Ь’ пате= ’ ГехГ2 ’ аиГосотр1е1:е= ’ оп ’ >

4.	</Гогт>

Следует помнить, что автозаполнение включено по умолчанию во всех браузерах,
поэтому, если нужно его отключить, следует предпринять определенные действия,
показанные в строке 1. А затем в строке 3 автозаполнение специально включается
для получения того же результата, что был показан на рис. 13.3. Сокращенного ва-
рианта настройки этого свойства, как для свойства аиГоГосиз, не существует.

Атрибут(огт

Использование этого атрибута позволяет размещать поля ввода в любом месте до-
кумента, при условии указания ГО формы, к которой они применяются. Понять, за-
чем это нужно, поможет знание о возможности использования с этим атрибутом, к
примеру, нового тега <Е1е1азеъ>, предназначенного создания набора (или группы,
или коллекции) полей применительно к той или иной форме. Это может упростить
создание более длинных и сложных форм и сделать их понятнее для других разра-
ботчиков. Но использовать атрибут формы в наборах полей необязательно, это все-
го лишь один из доступных вариантов.

В примере 13.5 показаны три поля ввода, два из которых находятся в наборе полей,
а третье — само по себе.

Пример 13.5

1.	<Гогт 1с1=’туГогт’ ас^1оп=’туГогт2 .рИр' теЙюс1=’розЕ' >

2.	<1приЕ Еуре=’зиЬттЕ’>

3.	</Еогт><Ьг>

4.

5.	<Г1е1с1зеЕ Гогт=’туГогт’>

6.	Зоте ЕехЕ <1приЕ Гогт=’туГогт’ Еуре=’ЕехЕ’ пате=’ГехГ1’><Ьг>

7.	Моге ЕехЕ <1приЕ Гогт=’туГогт’ Еуре=’ЕехЕ’ пате=’ЕехГ2’>

8.	</Г1е1с1зеЕхЬг>

9.

10.	Еуеп Моге <1приЕ Еогт=’туГогт’ -Ьуре= ’ ЕехЕ' пате=’ЕехЕЗ ' >

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

А в самой форме полей ввода нет (хотя при желании они могли бы быть). Результат
загрузки этого примера в браузер показан на рис. 13.4, где видно, что одно из пре-
имуществ размещения двух входных данных в наборе полей — то, что браузер вы-
делил их, а также поместил вокруг них рамку:

© ТЪе Рогтп Апг|Ьше	X +

<- СО® 1оса1ЬоБТ/Екзтр1е5/5ес1юп_2/13/ехатр1е_05.Мгтй О, © ф А

ЗиЬтИ

Зоте 1ехХ Те&Йпд

Моге 1ех1 Неге <з зоте !ех(

Е\’еп Моге ботеХЫпд е1зе егйегес!

Рис. 13.4. Форма, созданная с использованием набора полей и одиночного поля ввода

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

Чтобы форме стало известно, что нужно делать с набором полей ввода и отдельным
полем ввода, нужно не забыть в обоих местах указать в атрибуте Гогт имя формы.
Чтобы подыграть этому примеру, файл туГогт.рЬр был обновлен ДО туГогт2.рЬр с до-
бавлением еще одной строки кода для обработки ввода ^ех^з:

3.	есЬо "^ех^З:	. $_РОЗТ["^ех^З"] . "'<Ьг>";

Результат отправки данных этих полей показан на рис. 13.5.

0 1оса1Ъок1/Ехатр1е5/Зес(юп_2/1 X +

С О ® 1оса1Но51/Ехатр1е5/5ейюп_2/13/туЬгт2.рЬр Ф В ’й’ Я- *

Гех( 1: ’Текйп^

Гех(2: 'Неге коте (ехГ

тех! 3:' 8 от е1Ъ ।	е 1 зе еп I е ге сГ

Рис. 13.5. Данные формы успешно отправлены

Атрибут(огтасйоп

Использование этого атрибута позволяет изменить адресат обработки типов зиЬгтИ
и ттаде тега <1при^> с целью отправки введенных данных на выбранный вами 11КЕ-
или иной адрес, переопределяя тем самым любое ранее указанное для формы на-
значение. Чтобы проиллюстрировать это, у нас как нельзя кстати уже имеются
файлы туГогт.рЬр и туГогт2.рЬр, отображающие соответственно два и три значения.
Итак, в примере 13.6 создается форма, данные которой отправляются в туГогт.рЬр,
но с дополнительной кнопкой отправки данных в туГогт2.рЬр, на которой следует
щелкнуть кнопкой мыши или изображения которой следует коснуться.

Пример 13.6

1.	<Гогт асЫоп='туГогт.ркр' те1±юс1='роз11' >

2.	Зоте ^ех^ <1при^ ^уре='^ех-Ь' пате='1:ехГ1'><Ьг>

3.	Моге ^ех^ <1при^ Гуре='ГехГ' пате='^ех^2'>

4	.	<1при^ Гуре='зиЬтИ:'><Ьг>

5.
6.	Еуеп Моге <1приЕ Еуре='Еех-Ь' пате='ЕехЕЗ'>

7.	<1приЕ Еуре='зиЬт1Е' ГогтасГ1оп='туГогт2.ркр'>

8.	</Гогт>

Результат загрузки в браузер будет иметь вид, показанный на рис. 13.6.

@ 051пд РогтаЛюп	X +

<- С О ® 1оса1Ьо5УЕхатр1е5/5ес1юп_2/13/е)сал1р1е_Об.111т1	ф Л* :

Зоте 1ех1 ТезИпд

Моге (ехг Неге 18 зоте 1ех1	ЗоЬтЦ

Еусп Моге 15оте1Ыпд е|$е еп^егег! | БиЬтК

Рис. 13.6. Форма с двумя кнопками отправки данных

Эта форма очень похожа на ту, что была в примере 13.1, но с добавлением допол-
нительного ввода ЕехЕЗ, заключенного в стандартные теги формы <Гогт>, отправ-
ляющей свои данные в программу туГогт.рЬр с инструкцией отправки в строке 4.
Необычно здесь добавление второй инструкции отправки в строке 7, где вместо
прежней установки данные отправляются в туГогт2.рЬр, поскольку это значение
Присвоено атрибуту ГогтасМоп.

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

Другие переопределения формы

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

1.	<Гогш асМоп=’ргод.ркр ’ теЕИос1='розЕ ’ епсЕуре=’ти1МрагЕ/Гогт-с1аЕа’>

2.	<1приЕ Гуре=’ГИе’>

3.	<1приЕ Еуре=’зиЬтаЕ’>

4.	</Гогт>

Это позволит выложить файл на сервер. Но предположим, что имеется дополни-
тельная кнопка отправки, которой нужно придать иное действие, например отправ-
ку только текстового поля, перенацелив отправку на другую программу, например
на ргод2.рЬр, и задав стандартную кодировку 1ЖЬ. Это можно сделать путем внесе-
ния в предыдущий код таких изменений:

1. <Гогт асЫоп=’ргод.ркр’ теШШ'роз^ ’ епс^уре=’ти1Мраг^/Гогт-с!а'Ьа’>

2.	<1при^	Гуре=’ Ше ’ >
3.	<1при^	^уре=’зиЬпШ ’><Ьг>
4.	<1при^	Гуре=’ГехГ’ пате= ’ Шепате ’ >
5.	<1при^	^уре= ’ зиЬпШ ’ ГогтасМоп= ’ ргод2 . рЪр ’

6.	ГогтепсЪуре= ’ аррИсаМоп/х-ишг-Гогт-игХепсойес! ’ >

7. </Гогт>

Теперь в строках с 4 по 6 заявлен текстовый ввод, названный Шепаше, и этот ввод
принимает только стандартную кодировку формы по щелчку или касанию приме-
нительно ко второй, а не первой кнопке отправки. Код в строке 6 показан с отсту-
пом, чтобы обозначить перенос инструкции, не поместившейся в одной строке. Это
ни на что не влияет, поскольку НТМЬ относится к этому вполне лояльно, позволяя
оставлять для компоновки кода сколько угодно пустых мест (включая разрывы
строк), поэтому и было решено сделать после 'ргод2.рЬр' переход на новую строку.

Этот код не был помещен в пронумерованный пример из-за отсутствия файла, вы-
кладываемого на сервер, а также файла РНР для обработки такого действия. Но те-
перь уже вам должно быть известно, что выкладывание файлов на сервер — стан-
дартная функция НТМЬ еще до появления НТМЬ5, поэтому данные строки кода
иллюстрируют возможность переопределения как типа кодировки, так и адресата
обработки данных формы.

Но это еще не все, поскольку при желании можно с помощью атрибута Гогттеша
изменить и метод формы ввода. Например, в строке 5 можно изменить метод от-
правки с используемого по умолчанию метода роз^, указанного в первой строке ко-
да, на метод де^, который будет действителен только для данной кнопки отправки
данных.

5.	<1при-Ь ^уре= ’ зиЬпйГ ’ ГогшасШоп=’ргод2 .ркр’ ГогттеЙюс1=’де^ ’

По аналогии с переопределением метода отправки и адресата обработки данных, с
помощью атрибута ГоптЛагдеъ можно изменить целевой фрейм или страницу ответа
на отправку данных отдельно взятого ввода.

Атрибут тиШр1е

Только что было показано, как файл выкладывается на сервер. При наличии на сер-
вере программы обработки этого процесса на РНР или на другом языке с помощью
атрибута шиШрГе можно разрешить выложить на сервер сразу несколько файлов:

<1при^ Гуре=’Ше’ пате=’с1осз’ ти1Мр1е=’ти1Мр1е ’ >

Теперь, удерживая нажатой при выборе имен файлов клавишу С1г1, ваши пользова-
тели смогут выгрузить на сервер сразу несколько файлов.
Атрибут поуаПс1а<е

Этот атрибут указывает, что данные формы при их отправке не должны проверять-
ся (обычно так делается при наличии своей собственной программы проверки, ко-
торая, по мнению разработчика, больше соответствует потребностям). Он прини-
мает значения ^гие или 1а1зе, применимые к тегу <Гогт> и ко многим специальным
новым типам тега <1при^>, например Ъе1 и пит. Воспользоваться им можно следую-
щим образом:

<1при^ ^уре=’^ех^’ пате=’Гйе1сГ поуаПс!аГе= ’ Ггие ’ >

Соответствующий атрибут ГогтпоуаПааЪе позволяет переопределить атрибут
поуаиааъе непосредственно для отдельно взятого поля ввода.

Атрибуты мсКЬ и Ье1дМ

Если вместо кнопки по умолчанию в качестве кнопки отправки данных используется
изображение типа 1таде, его ширину и высоту можно, как показано в примере 13.7,
изменить с помощью атрибутов имъь и ЬеадЬ^.

Пример 13.7

1.	<Гогт те1±юс1=’розГ’>

2.	Нате <1при^ ^уре=’’ пате='пате’><Ьг>

3.	<1при^ ^уре=’1таде’ згс=’зиЬпиЛ.рпд’ м1с±И=’214’ Ъе1дЪ^=’24’>

4.	</Гогт>

В этом примере создается форма без 1ЖЕ-адреса для отправки данных (то есть она
отправляет их сама себе, не вызывая никаких действий) с изображением кнопки
отправки, имеющим исходные размеры 220 х 66 пикселей, размер которого был
изменен до 214 х 24 пикселей, чтобы, как показано на рис. 13.7, соответствовать
ширине ввода.

0 Iгладе Iприс Випоп	X +

ООО 1оса1Ьо5ЪгЕхагпр1е5/5ес11оп_2/13/ехатр1е_07Ы:т1 Ф, © ☆ А-

Мадс

Рис. 13.7. Изменение размера изображения кнопки отправки данных.

Конечно, вы будете использовать гораздо более интересные изображения и приме-
нять более изысканные стили, но здесь просто демонстрируется возможность изме-
нения их размера прямо в инструкции ввода данных. Кроме того, при желании
можно воспользоваться кодом С88.
Атрибут и теги <с1а(а1|§(> и <орйоп>

Выпадающие списки — великолепный прием улучшения пользовательского вос-
приятия, который легко может быть реализован и без использования 1ауа8спр1 или
С88, нужно просто поместить элементы списка в тег <ааЪаИзъ> в виде набора тегов
<орМоп>. Затем в теге поля ввода в качестве аргумента его атрибута Нзъ нужно ука-
зать значение атрибута 1а, принадлежащего списку, привязав тем самым список к
полю ввода.

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

Пример 13.8

1.	<1огт те1±юа=’розГ’>

2.	5е1еск уоиг Гауогтке <1прик Гуре=’иг1’ пате=’з!ке' ПзГ=’ Ппкз ’ >

3.	<1прик куре=’зиЬттк’>

4.	</1огт>

5.

6.	<аакаИз‘Ь	16=’11пкз’>

7 .	<орМоп	1аЬе1= ’ Соод1е ’	уа1ие= ’ кккр: / /доод1е. сот'	>

8.	<орМоп	1аЬе1=’Уакоо!’	уа1ие='Ъккр://уакоо.сот’	>

9.	<орМоп	1аЬе1=’В1пд’	уа1ие='Ъккр://Ыпд. сот’	>

10.	<орМоп	1аЬе1=’Азк’	уа1ие='Ъккр://азк. сот’	>

11.	</аака11зк>

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

В строках с 1 по 4 создается стандартная форма с кнопкой отправки, указанной в
строке 3, и стандартным полем ввода, указанным в строке 2, где новое для нас —
запрос типа ввода иг1, а не текст, а также предоставление атрибуту Изъ идентифи-
катора, присвоенного тегу <ааЪаПзъ> под формой в строке 6. Затем в строках с 7 по
10 идет череда тегов <орМоп>, в которых указываются четыре разных имени поис-
ковых систем, назначенных атрибуту 1аЬе1 каждого тега, а соответствующие 11ВЪ-
адреса назначаются в тех же строках атрибуту уа1ие. Включать этот список в тег
<1огт> необязательно, поскольку он идентифицируется по имени.

Полезная особенность такого списка — возможность проигнорировать все предло-
женные варианты И ВВеСТИ СВОЙ собственный, например, Ьккрз://аискаискдо.сот или
адрес альтернативного механизма поиска, т. е. здесь пользователю предлагается
максимальная простота использования наряду с гибкостью выбора. Кроме того,
здесь не нужно использовать тип ввода 11ВЪ, поскольку допускаются все буквенно-
цифровые типы ввода.
Рис. 13.8. Предложение предварительно заполненного выпадающего списка

Атрибуты гшп, тах и §(ер

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

В примере 13.9 у пользователя запрашивается время встречи, которое должно быть
между 14:00 и 17:00, и используется новый тип ввода времени, появившийся в
НТМЬ5.

Пример 13.9

1.	<Гогш теГЪос!=’розГ' >

2.	СЪоозе а тееПпд Пте

3.	<1приГ Гуре=’Г1те’ пате=’тееГ1пд’ уа!ие=’14:00’

4.	т1п=’14:00’ тах=’17:00’>

5.	<1приГ Гуре=’зиЬтгГ’>

6.	</Гогт>

В строке 3 начальное время ввода установлено на 14:00, а потом указан доступный
диапазон. Прокрутить эти числа с выходом за пределы этого диапазона невозмож-
но, но можно выбрать часы и минуты, вызвав щелчком мыши на значке часов сред-
ство выбора времени, и при попытке выбрать время, выходящее за установленное,
будет выдано сообщение, похожее на то, что показано на рис. 13.10 (где запрошено
время 19:07).

@ Огер ООУУП 1.1515	X 4

<- С О © {оса11ю$1/Ь:атр1е$/5есиоп_2/13/ехатр1е_09.йспп1	☆ Л (Л 

СЬоозе а теейп" йте 14: ее О ЗиЬтП

14 I 00

15	01

16	02

17	03

18	04

19	05

20	06

Рис. 13.9. Появление окна выбора времени

© Огор Оошп 11515	X 4

<- С О © 1оса1Ьо51/Еидтр1е$/5естюп_2/13/ехатр1е_09.11Хт1	Р? Й :

СЬоозе а тее1т« й тс	07 ©

ЗиЬппгё

\/а1ие или51 Ье 17 00 ог еагНег.

Рис. 13.10. Пользователю сообщается, что выбранное им время недоступно

Если говорить о выборе времени с определенными интервалами, то поминутный
выбор возможен при указании для атрибута зьер, количество секунд в интервале.
Для 15-минутных интервалов значение будет 15 х 60 или 900, для 30-минутных —
1800 и т. д. А так выглядит код в строке 4, позволяющий вводить время только с
часовым интервалом:

4.	гп1п='14:00’ тах=’17:00’ зЬер=’3600’>

При этом пользователь не сможет изменять количество минут с помощью клавиа-
туры. А при попытке ввода времени, не соответствующего часовому интервалу, с
помощью мыши в средстве выбора времени появится сообщение, показанное на
рис. 13.11.
0 Опор в0ИП ВЕЙ	X +

<- с ф о 1оса1Но517Ехатр1е5/5еиюп_2/13/ехатрае_09агЬи	☆ Й *

СТюозе а теейп§ йте Щ: 57 О

ЗиЬтП

Р1еа5е еп!ег а уаЕУ уа!ие. ТЬе Ьи/о пеагеь!
иа№ уа!иез аге 14 00 апд 15:00.

Рис. 13.11. Запрошенное время не соответствует часовому интервалу,
поэтому ввод отклонен

Другие типы ввода даты и времени

В НТМГ5 есть также и новый тип ввода даты, возвращающий значение в формате
ГГГГ-ММ-ДД, который можно использовать аналогично системе ввода времени.
Кроме того, есть тип ввода месяца, возвращающий значение ГГГГ-ММ, и тип ввода
недели, возвращающий значение ГГГГ-Нпп, где ГГГГ — год, а Нпп — неделя в
формате, к примеру Н23.

Может также быть запрошен ввод даты и времени наряду с типом ввода аа^еМте,
возвращающий значение в формате ГГГГ-ММ-ДДТЧЧ:ММ7, которое, к примеру,
для 2 мая 2027 года в 17 часов 56 минут может принимать следующий вид: 2027-
05-02Т17:567. Кроме того, с помощью свойства ааЪеЪ1те-1оса1 можно запросить ло-
кальное время пользователя, возвращающее значение в формате ГГГГ-ММ-
ДДТЧЧ:ММ без символа 7 на конце (который ставят в случае возвращения данных
при типе ввода ааЪеЪ1те).

Порядок интерпретации и обработки этих возвращаемых значений зависит от про-
граммы, запущенной на внутреннем сервере.

Атрибут райегп

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

Использование наряду с множеством других средств атрибута раъъегп позволяет, к
примеру, не прибегая к использованию кода 1ауа8спр1 и не дожидаясь проверки со
стороны программы на сервере, понять, относятся ли введенные данные к допусти-
мому адресу электронной почты. Этот атрибут можно применить к любому тегу
<1при^>, в котором в качестве значений его атрибута ^уре используется что-либо из
перечня етаП, раззмога, зеагсЬ, Ге1, ИЛИ иг1.

В примере 13.10 показан запрос произвольного текста, состоящего только из букв,
цифр и пробелов.
1.	<Гогт теЕЬос!=’розЕ ’ >

2.	ЕпЕег аЕрЬапитегис ЕехЕ оп!у

3.	<1приЕ Еуре=’ЕехЕ’ пате=’ЕехЕ’ раЕЕегп=’[а-хА-ХО-9 ]+’

4.	Е1Е1е= ’Езе ЕеЕЕегз, питЬегз апс! зрасез оп!у’>

5	.	<1приЕ Еуре=’зиЬт1Е'>

6.	</Гогт>

На рис. 13.12 показана выводимая на экран информация в случае ввода данных, не
соответствующих указанному шаблону.

Рис. 13.12. Восклицательный знак запрещен, поэтому выводится сообщение об ошибке

В шаблоне, используемом в строке 3, указаны буквы а-х и а-2, а также цифры 0-9 и
символ пробела, и все это заключено в квадратные скобки, за которыми следует
знак +, указывающий, что в тексте должен присутствовать как минимум один из
символов, относящихся к типам, указанным в скобках.

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

Так как же все это работает? Дело в том, что здесь используется так называемое
регулярное выражение — краткий способ представления текстовых типов. Сам ме-
ханизм их работы — тема непростая и не вписывается в рамки этой книги. Но отве-
ты на любые вопросы МОЖНО наЙТИ ПО адресу ЬЕЕрз://Е1пуиг1.сош/гед-ехрг.

Кстати, для типов ввода етаП, пит, ъе1 и иг1 атрибут раЕЕегп не понадобится, их про-
верка будет проводиться автоматически.

Атрибут р1асеНо1с1ег

Использование этого атрибута предоставляет замечательные возможности улучше-
ния пользовательского восприятия. Он позволяет помещать инструкцию в серых
тонах, чтобы было понятно, что это не предлагаемый ввод, непосредственно в само
поле ввода, и удалять ее сразу же, как только пользователь начинает вводить дан-
ные. Для этого атрибуту рХасеЬоЫег нужно просто присвоить произвольный текст,
как в примере 13.11, где в поле ввода запрашивается имя пользователя длиной от 5
до 15 символов.

Пример 13.11

1.	<Гогт теНюс1=’розГ’>

2.	СЬоозе а изегпате

3.	<1при^ ^уре=’1:ех^’ пате=’и' р1асеЬо1с!ег=’ Ап у 5-15 сЬагасЬег пате’>

4.	<1при^ Гуре=’зиЬтйГ’>

5.	</Гогт>

Результат выполнения этого примера показан на рис. 13.13.

0 Р1асеЬо1с1ег5	X +

СОФ 1оса1Ьо51/Ехатр1е5/$есТюп_2/13/ехатр1е.11,Ыт1 Ф. 6? Ф ЙК :

СЬоозе а ацетате [|Апу 6-16 сЬагас^ег пате | ЗиЬтП

Рис. 13.13. Подсказка в р1асе1ю1с1ег о том, что должно быть в поле ввода

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

Атрибут гедшгесЯ

Использование атрибута геритгеа, показанное в примере 13.12, позволяет не остав-
лять поле незаполненным при отправке формы.

Пример 13.12

1. <Гогт теНюс1=’розГ’>

2.

СИоозе а изегпате

3.	<1при^ ^уре=’^ех^’ пате= ’ изегпате ’ гери!гес1>

4	.	<1при^ ^уре= ’ зиЬтИ ’ >

5.	</Гогт>

На рис. 13.14 показана подсказка, выводимая на экран при попытке отправки фор-
мы с незаполненным полем:
Рис. 13.14. Пользователю предлагается заполнить поле перед отправкой формы

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

Тип ввода со1ог

Иногда нужно предложить пользователю выбрать цвет, и теперь, как показано на
рис. 13.13, это весьма нетрудно сделать с помощью типа ввода со1ог.

Пример 13.13

1.	<Гогт те1±юс1=’розГ’>

2.	Сйоозе а со!ог

<1приГ Гуре=’со1ог’ пате=’со!ог’>

<1приГ Гуре=’зиЬтгГ’>

5. </Гогт>

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

Пользователи могут даже щелкнуть в правом нижнем углу на значке стрелки вверх
и вниз, чтобы изменить формат ввода на задание оттенка, насыщенности и яркости
(НЬ8), или же на использование шестнадцатеричных значений составляющих цвета.

Цвет, отправляемый с помощью палитры цветов, будет представлен не названием, а
шестнадцатеричной строкой цвета в С88-формате, начинающейся с символа #, на-
пример #8Г9Ь31. Независимо от способа выбора цвета по щелчку пользователя на
палитре или по указанию параметров Н8Ь вместо КСЗВ возвращаемое значение бу-
дет именно в этом шестнадцатеричном формате. Это можно проверить, изменив
тип метода в строке 1 на дег, отправив выбранный цвет и просмотрев ПВЪ-адрес,
возвращаемый в адресную строку браузера, который должен завершаться чем-то
вроде ?со1ог=%238Г9Ь31. Здесь, поскольку это часть 1ЖЬ-адреса, браузер преобразо-
вал предыдущий символ # в объект НТМЬ %23, но фактическое значение, если оно
будет отправлено в программу, будет начинаться с #.

Рис. 13.15. Открытая цветовая палитра

Числа и диапазоны

Работа с числами в НТМЬ5 была существенно улучшена благодаря поддержке чи-
слового типа ввода питЬег. При его указании при проходе над полем указателя мы-
ши справа от поля ввода появляется пара значков со стрелками вверх и вниз, на ко-
торые можно щелкать для уменьшения или увеличения указанного в поле значения.
Пользователь может также вводить свое значение напрямую. В примере 13.14 ил-
люстрируется использование такого поля с начальным значением 18, установлен-
ным по умолчанию.

Пример 13.14

1.	<Гогт те1±юс1= ’ деГ ’ >

2.	Ном о!с1 аге уои?

3.	<1при^ ^уре=’питЬег’ пате='аде’ уазие=’18’>

4.	<1при^ Гуре=’аиЬтИ: ’>

5.	</Гогт>

Результат выполнения примера после однократного щелчка на значке стрелки
вверх показан на рис. 13.16.
© ТЬе 1ЧитЬегАпг|Ьи1е	X +

<- СО® 1оса[Но5^Ехатр1е5/^оп_2/13/ехатр1е_14.НПп| ф ☆ А :

Но™ о И аге у он? 119) ~	С | БиЬгпЛ

Рис. 13.16. Пример использования числового типа ввода

Если нужно запретить пользователю вводить значения, не имеющие никакого
смысла, можно также указать тип ввода диапазона гапде, в результате чего на экра-
не появится изображение ползунка. Этот тип, как показано в пример 13.15, можно
использовать в сочетании с атрибутами пйп, тах и згер, именно это и показано в
строке 3, разбитой надвое аккуратным переносом, поскольку она получилась до-
вольно длинной.

Пример 13.15

1.	<Гогт теНюс1=’розГ’>

2.	Нсж оЫ аге уои?

3.	<1приГ Гуре=’гапде’ пате ='пит’ тгп =’1’

4.	тах =’110'	Vа1ие=’18’	зГер=’1’>

5.	<1приГ Гуре=’зиЬтгГ’>

6.	</Гогт>

Результат загрузки этого примера в браузер показан на рис. 13.17, где можно заме-
тить возникшую проблему:

© Арр1у!пд а Капде	X +

Э С О О 1оса1Ко5</Ехатр1е8/5есНоп_2/13/ехатр1е_15.Ыт1 Ф @ ☆ Л* :

Но™ ок! аге уои?	ЗиЬт|1

Рис. 13.17. Отображение ползунка диапазона

Поняли, в чем проблема? Сам ползунок выглядит великолепно, но на нем отсутст-
вует указание конкретного выбранного значения. Для типа ввода гапде это может
стать серьезной проблемой, но тут весьма кстати имеется довольно хитрый и про-
стой способ исправить это упущение, применив код, показанный в примере 13.16,
где есть дополнительная инструкция 1ауа8спр1, вставленная в элемент ввода в
строке 5, а также дополнительный тег <оигриг> в строке 6.
Пример 13.16

1.	<Гогт теЕНоск’розЕ’>

2.	Ном оИ аге уои?

3.	<1приЕ Еуре=’гапде’ пате =’пит’ тйп =’1’

4.	тах =’110'	Vа1ие=’18’ зЕер=’1’

5.	оп!приЕ= ’ ЕЫз .пехЕЕ1етепЕ31Ы1пд. уа1ие = ЕЫз.уа1ие’>

6.	<оиЕриЕ>18</оиЕриЕ>

7.	<1приЕ Еуре=’зиЬпнЛ'>

8.	</Еогт>

Дело в том, что все НТМЬ-элементы поддерживают присоединение событий, и
здесь было присоединено событие ввода оптприЕ. Благодаря этому инструкция
1ауа8спр1 запускается при каждой выдаче события, возникающего при каждом пе-
ремещении ползунка.

1ауа8спр1 — весьма хитрый язык, в нем используется псевдообъект по имени Шз,
которым представлен текущий элемент. Поэтому при записи в свойство
пехЕЕ1етепЕ31Ы1пд значения псевдообъекта ЕЫз это значение тут же записывает эле-
мент <оиЕриЕ>, следующий сразу же за текущим элементом.

Сперва в <оиЕриЕ> содержится начальное значение 18, чтобы соответствовать значе-
нию по умолчанию, предоставленному в строке 4. Затем при каждом перемещении
ползунка в элемент <оиЕриЕ> копируется ъМз.уаГие (текущее значение в поле ввода).
Решение действительно элегантное, и результат его применения показан на
рис. 13.18.

0 Арр1уьпд э Яапде	X +

<- СО® 1оса[Но57Ёхатр1е5/5ес1101п_2/13/емтр1е_1б.Мт! ф ® ☆ Й :

Нет а И аге уои?	48 ЗиЬгпЛ

Рис. 13.18. Теперь текущее значение
из заданного диапазона отображается на экране

Тип ввода зеагсЬ

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

Заключение

В этой главе была обрисована вся информация о новшествах, появившихся в
НТМЬ5 при использовании форм. Самое приятное, что все эти функции изначально
работают автономно, не требуя никаких дополнительных сценариев 1ауа8спр1, и в
совокупности играют немалую роль в улучшении пользовательского восприятия
при работе с формами.

В следующей главе мы снова немного обратимся к вопросам программирования на
1ауа8спр1 при рассмотрении новых возможностей локального хранения данных в
рамках концепции НТМЬ5.
ГЛАВА 14

Локальное хранилище
и многое другое

Введение

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

Многие из этих функций требуют применения сценариев на 1ауа8спр1, поэтому ос-
новные положения по их использованию сопровождаются ссылками на источники
дополнительной информации, которая может вас заинтересовать.

Структура

В этой главе рассматриваются следующие темы:

♦	Приемы хранения данных на локальном устройстве пользователя.

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

♦	Приемы ускорения выполнения кода с помощью веб-воркеров.

♦	Приемы превращения веб-страниц в автономные веб-приложения.

Цели

Здесь путем изучения целого ряда тонкостей НТМЬ5, управляемых с помощью
1ауа8спр1, устранятся многие пробелы в ваших знаниях, изучался средства упро-
щения понимания веб-документов поисковым роботом. Освоение предлагаемого
материала позволит изучить приемы разгрузки сценариев 1ауа8спр1 с помощью
веб-воркеров и создания своих собственных веб-приложений.
Использование локального хранилища

В былые годы единственным способом хранения данных на компьютере пользова-
теля были сооИе-файлы, ограниченные как по количеству, так и по объему данных
в каждом таком файле, не превышающем 4 Кб. Их также нужно было передавать в
обе стороны при каждой перезагрузке страницы, и, если сервер не использовал
шифрование 8есиге 8оске1з Ьауег (88Ь), то при каждой своей передаче файлы
сооИе пребывали в открытом незашифрованном виде.

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

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

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

Примечание

Возможно, главная причина высокой популярности локальных хранилищ среди
веб-разработчиков заключается в том, что файлы сооИе могут создаваться толь-
ко на веб-сервере и отправляться только на него. Без файлов сооИе не было бы
простого способа сохранить нужное состояние. А локальное хранилище управ-
ляется непосредственно в браузере, что позволяет создавать автономные веб-
приложения, способные в той или иной степени работать вне сети. Кроме того,
файлы сооИе могут иметь размер до 4 Кб, а размер веб-хранилища в большин-
стве браузеров может составлять до 5 Мб.

Хранение и извлечение локальных данных

Для доступа к локальному хранилищу можно воспользоваться методами объекта
1оса13^огаде ПОД названиями зеГ1Геш(), деГ1Гет(), гетоуе1^ет() И с!еаг(). К Примеру,
чтобы сохранить имя пользователя и пароль на локальной системе, можно восполь-
зоваться следующим кодом:

1оса13^огаде. зеПГеш (’ изегпате ’, ’ЭДНоизГоп ’)

1оса13Гогаде. зеГ1Гет( 'раззмогсГ, ’Ьос1удиагс11992 ’)

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

изегпате = 1оса13когаде.дек1кет('изегпате')
раззмогс! = 1оса13когаде.дек1кет(’раззмогсГ)

Если запрошенный ключ не существует, функция деътъешО, как показано на рис. 14.2,
возвращает значение пин.

Примечание

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

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

1оса13когаде. зеПГет (' кеу', ' уа1ие')
1оса13когаде['кеу'] = 'уа1ие'

По аналогии с этим эквивалентны и следующие две инструкции:

уа1ие = 1оса13когаде.дек1кет('кеу')
уа1ие = 1оса13когаде['кеу']

Давайте все полученные только что знания сведем в исполняемый код, приведен-
ный в примере 14.1, где показаны только те инструкции, которые заключены в раз-
дел <зсг1рк>.

Пример 14.1

1.	(куреоГ 1оса13когаде == 'ипс!еГ1пес1')

2.	{

3.	а1егк('Ъоса1 зкогаде ипауаИаЫе.')

4.	}

5.	е1зе

6.	{
7.	1оса131:огаде. зеГ1Гет( ’изегпате’ , ’ЭДНоиз^оп’)

8.	1оса13Гогаде.зеГ1Гет(’раззмогсГ, ’Ьос1удиагс11992 ’)

9.

10.	изегпате = 1оса13Гогаде.деГ1Гет(’изегпате’)

11.	раззмогс! = 1оса13Гогаде.деГ1Гет(’раззмогсГ)

12.

13.	а1ег^("Эа^а ге^гаеуес!: изегпате =	+

14.	изегпате + раззмогс! = ’” + раззшогс! +

15.	}

В строках с 1 по 4 выполняется проверка поддержки браузером локального храни-
лища. Если оно не поддерживается, объект 1оса1з^огаде будет иметь значение
ипаеПпеа, так что проверка особых трудностей не вызывает.

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

Если локальное хранилище поддерживается, то выполняются строки с 5 по 15, при
этом в строках 7 и 8 задается сохранение некоторых данных на локальное устрой-
ство пользователя, а в строках с 10 по 11 задается извлечение этих же данных.
В строке 13 функция а1егъ() задает появление всплывающего окна, показанного на
рис. 14.1, позволяющего показать, что процесс действительно работает.

О Ьоса1 $(огаде	X +

<- X о ® 1оса1Но5:/Ехатр1е5/5есиоп_2/14/ехатр1е О1.Ыт1 Ф	:

гнпечеб: изегпате - АМНоизЮп, раззиюгд - Ьодудиагб 1992' ММНМИиИ

Рис. 14.1. Данные были сохранены в локальном хранилище и извлечены из него

После сохранения эти значения так и останутся в локальном хранилище, пока не
будут удалены из него, в чем можно будет убедиться, закомментировав, как пока-
зано ниже, строки 7 и 8, а затем запустив пример еще раз. Результат должен быть
тем же, что показан на рис. 14.1.

7.	// 1оса131:огаде.зеГ1Гет( ’изегпате', ’ЭДНоиз^оп’)

8.	// 1оса13Гогаде.зеГ1Гет( ’раззмогсГ, ’Ьос1удиагс11992 ’)
Удаление и очистка локальных данных

Чтобы удалить элемент данных из локального хранилища, нужно всего лишь вы-
звать функцию гетоуе1Ъет():

изегпате = 1оса13^огаде.гетоуе1^ет(’изегпате')
раззмогс! = 1оса13^огаде. гетоуе1^ет (’раззмогсГ )

Эта функция служит для извлечения элемента данных и помещения его в перемен-
ную (в данном случае это переменные изегпате и раззмога) с последующим удалени-
ем данных из локального хранилища. Если чтение удаляемых данных не требуется,
можно просто вызвать функцию без присваивания:
1оса13^огаде.гетоуе1^ет(’изегпате’)
1оса13^огаде. гетоуе1^ет ('раззмогсГ)

Можно также, вызвав функцию с1еаг (), очистить все локальное хранилище для те-
кущего домена:

1оса13^огаде.с1еаг()

Давайте так и сделаем, применив код примера 14.2.

Пример 14.2

1.	(^уреоГ 1оса13^огаде == 'шкЗеНпесР)

2.	{

3.	а!ег^('Ъоса1 з^огаде ипауаИаЫе. ’)

4.	}

5.	е1зе

6.	{

7	.	1оса13^огаде. гетсл/еТ^ет (’ изегпате ’)

8.	1оса13^огаде.гетоуе1^ет(’раззжэгсГ )

9.

10.	изегпате = 1оса13Гогаде.деГ1Гет('изегпате’)

11.	раззмогс! = 1оса13Гогаде.деГ1Гет(’раззмогс!’)

12.

13.	а1егГ("ВаГа геГгаеуес!: изегпате = ’" +

14.	изегпате + ’’ ’ , раззмогс! =	+ раззшогс! +

15.	}

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

Разумеется, более широкое использование локального хранилища будет сводиться
к написанию соответствующего кода 1ауа8спр1, но углубление в суть вопроса вы-
ходит за рамки тематики этой книги.
С1еаг)пд1_оса15(огаде	X +

<- -> X О ® 1оса[Но5УЕхатр1е5/5есИо:п_2/14/ехатр1е_02.Мт1 ® ☆ А :

Рис. 14.2. Локальные данные были стерты

Использование взамен этого хранилища сеансов

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

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

Примечание

Поскольку хранилище сеансов настраивается для каждой вкладки, то при откры-
тии пользователем веб-сайта сразу в нескольких вкладках собственное отдель-
ное хранилище сеансов будет у каждой вкладки. Это следует учитывать, если
данные сеанса у некоторых пользователей продолжают теряться в ходе него, по-
скольку это может быть связано с переключениями между вкладками, когда они
меняются местами, и с открытием сайта на новых вкладках. Отследить это мож-
но, применив уникальный токен в виде случайной строки и сохранив его в хра-
нилище сеансов. Считывая эту строку, можно определить, к какому из хранилищ
осуществляется доступ. И опять же, рассматривать соответствующий сценарий
1ауа8спр1 не позволяют рамки тематики этой книги.

Микроданные

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

Микроданные открывают доступ к следующим новым атрибутам тегов: тЕетзсоре,
т^ет^уре, т^етЫ, т^етгеГ и т^етргор. Их использование позволяет четко определять
свойства документа, например книги, предоставляя информационный перечень,
которым компьютер может воспользоваться для распознания, к примеру, ее автора,
издателя, сути содержимого и т. д.

В примере 14.3 показано, насколько легко микроданные можно применить к стан-
дартному НТМЬ-документу.

Пример 14.3

1.	<1ООСТУРЕ Мт1>

2.	<Мт1 1апд="еп">

3.	<Неас1>

4.	<теЕа скагзеЕ="иЕГ-8">

5.	<Е1Е1е>1псогрогаМпд М1сгос1аЕа</Е1Е1е>

6.	</Неас1>

7.	<Ьос1у>

8.	<зесЫоп аЕетзсоре

9.	1ЕетЕуре= ’ НЕЕр: //с!аЕа-УОсаЬи1агу. огд/Регзоп ’ >

10.	<1тд 1Еетргор=’рНоЕо’

11.	зге =’е!оп_тизк.зрд’

12.	а1Е =’Е1оп Мизк’

13.	аИдп=’1еГЕ’

14.	зЕу1е=’тагд1п-г1дкк: Юрх’>

15.

16.	<Н2 1Еетргор=’пате'>Е1оп Мизк</Н2>

17.

18.	<р>

19.	Е1оп Мизк тз а Зоикк АГг1сап-Ьогп Атегтсап

20.	<зрап 1Еетргор=’го!е'>епкгергепеиг</зрап> апс!

21.	<зрап 1Еетргор=’1111е’>Ьиз1пеззтап</зрап>.

22.	Не	Икез ко са11 ЫтзеИ Еке

23.	<зрап 1Еетргор=’п1скпате’>Тескпок1пд</зрап>

24.	оГ	Тез1а, апс! Ыз меЬзРке йз:

25.	<а	1Еетргор=’иг!’

2 6.	НгеГ=’НЕЕрз://мм.Еез1а.сот/еп_6В/е!оп-тизк’>Еез1а.сот</а>.

27.	</р>

28.

29.	<р>Е1оп’з асИгезз а к ЗрасеХ 1з:</р>
30.

31.	<аск!гезз Иетзсоре 1кеткуре='Мкр://Аака^осаЬи1агу.огд/Аск1гезз ’

32.	1кетргор=’асИгезз ’ >

33.	<р>

34.	<зрап 1кетргор=’ зГгееГ-аск1гезз ’ >1 Коскек Коас1</зрап><Ьг>			
35.	<зрап	1кетргор= ’ 1осаПку ’	>На^ккогпе	</зрап><Ьг>
36.	<зрап	1кетргор=’гедаоп’	>СаПГогп1а	</зрап><Ьг>
37.	<зрап	1кетргор= ’ розка!-сос!е ’	>90250	</зрап><Ьг>
38.	<зрап	1кетргор=’соипкгу-пате’	>ПЗА	</зрап>

39.	</р>

40.	</ас!с1гезз>

41.	</зесМоп>

42.	</Ьос1у>

43.	</1гЬт1>

Результат загрузки этого примера в браузер показан на рис. 14.3.

@ 1тсогрогаг!гд М|Сгодага	X +

<- С О ® 1оса1Ко5УЕхатр1е5/5ес1]оп_2/14/ехатр1е_03.Ь1:т1	’Й Л*

Е1оп Ми$к

Е1оп Макк ь а 8оШ11 АЕпсап-Ьот Атепсап епТгергепеаг
ап<1 Ьимпезыпап. Не 11ке$ Го са11111т$е1Г1Ье ТесЬпокт^
оГТеа1а, апс1 Ыз \уеЬ$Це Ь: Геакьсот,

Е1оп’5 агИгезБ аС 5расеХ 15:

/ Носке/ Ноас1

Нахе/коте

Сак/огта

90250

ЦНА

Рис. 14.3. При отображении микроданные, имеющиеся на веб-странице, не видны

В качестве микроданных можно применять множество различных свойств. Их так
много, что для сведений о всем перечне лучше будет посетить сайт Мпуиг!. сот/ьш15та.
Микроданные могут применяться для книг, музыки, телешоу, событий, людей, мест
и многих других типов данных.

В примере 3.4 использован тип микроданных регзоп, обозначающий их отношение к
человеку, и если изучить код, можно заметить тип ркоко для назначения элемента
изображения т^етргор в строке 10, тип го1е для описания еп^гергепеиг (предпринима-
тель) в строке 20, тип иг1 в строке 25, и т. д. и т. п.

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

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

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

Веб-воркеры

Применение 1ауа8спр1 в этом разделе будет еще более насыщенным. Поэтому при
излишней сложности можно смело переходить к изучению следующей главы, по-
священной аудио и видео в НТМЬ5. А текущий раздел будет дожидаться вашего
возвращения к нему, если он когда-либо в будущем вам понадобится.

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

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

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

Чтобы воспользоваться веб-воркерами, нужны два фрагмента кода. Первый, как
показано в примере 14.4 — это веб-документ, содержащий некий код 1ауа8спр1,
который в данном случае - первая часть программы, максимально быстро генери-
рующей простые числа.
Пример 14.4

1.	< ! ООСТТРЕ ЬШ1>

2.	<Мш1 1апд="еп">

3.	<Ъеас1>

4.	Стека с±агзек="иЕЕ-8" />

5.	сММеЖипптпд ЭДеЬмогкегз</Е1Е1е>

6.	</Ееас1>

7.	<Ьос1у>

8.	<р>

9.	Тке Ыдкезк ргате питЬег сИзсоуегес! зо Гаг 1з:

10.	Соикрик	1с1=’гези1к’></оикрик>

11.	<р>

12.	сЬиккоп опс11ск=’могкег.кегтапаке()’>ЗТОР</Ьиккоп>

13.	</р>

14.	</р>

15.

16.	<зсг!рк>

17.	1Е (!м1пскж.Иогкег)

18.	{

19.	а!егк("ЭДеЬ шогкегз пок зиррогкесГ)

20.	}

21.	е!зе

22.	{

23.	жэгкег = пем ЭДогкег(’жэгкег.]з’)

24.

25.	могкег	.оптеззаде	= ЕипсЫоп	(еуепк)

26.	{

27.	с1оситепк.декЕ1етепкВу1сЦ ’гези!к’) ЛппегНТМЪ = еуепк.с!ака

28.	}

29.	}

30.	</зсг!рк>

31.	</Ьос1у>

32.	</Ъкт1>

Сам по себе этот документ НТМЬ5 довольно прост. Но следует отметить наличие в
строке 10 тега <оикрик>, в котором будут отображаться найденные простые числа, и
тега <Ьиккоп> в строке 12, изображающего кнопку, с помощью которой веб-воркер
может быть остановлен, чтобы он не уходил в вечность, а также раздел кода зсгтрк
между строками 17 и 29.

Кнопка зтор для объекта могкег, созданного в разделе зсгарк, просто вызывает функ-
цию РегтРпаРе (), приводящую к немедленному прекращению его выполнения.

В разделе сценария зсгарк в строках с 17 по 20 используется инструкция 1Г(), по-
зволяющая проверить, поддерживаются ли веб-воркеры браузером. Они должны
поддерживаться всеми современными браузерами, но этот код убеждается в этом, и
в противном случае выдает предупреждение.
Затем в разделе е1зе, куда управление передается, если веб-воркеры поддержива-
ются, создается новый объект могкег, для чего вызывается функция ж>гкег (), кото-
рой передается имя файла жэгкег.^з для его загрузки и запуска. Как выглядит код в
файле жэгкег. з з, мы вскоре увидим.

И наконец, событие оптеззаде объекта могкег связывается с использованием безы-
мянной функции, вход в которую происходит при каждом получении объектом
могкег этого документа сообщения из кода документа могкег.^з. Какое бы сообще-
ние ни было получено, оно поступает в свойство ааЪа объекта еуепк в строке 27, где
оно немедленно копируется в элемент <оикрик>, который был создан в строке 10 (так
что теперь стало понятно, для чего он был нужен).

А теперь давайте перейдем к программе жэгкег. 33, код которой показан в примере 14.5.
Файл сохранен в прилагаемом к книге архиве под именами ехатр1е_05.зз и могкег.зз,
поэтому ссылка на могкег. 33 в строке 23 примера 14.4 будет работать.

Пример 14.5

1.	п = 1

2.

3.	зеагсЪ: мЫ1е (кгие)

4.	{

5.	++п

6.

7.	Гог (1 = 2 ; 1 <= Макк.здгк(п) ; ++1)

8.	{

9.	1Г (п % 1 == 0) сопкгпие зеагск

10.	}

11.

12.	розкМеззаде(п)

13.	}

Это короткая и элегантная программа, начинающаяся с инициализации переменной п
значением 1. Затем в строке 3 вводится бесконечный цикл (поскольку значение кгие
всегда равно кгие), который начинает непрерывный поиск простых чисел, увеличи-
вая п при каждым проходе цикла в строке 5, а затем выполняя проверку на простоту
в строках с 7 по 10.

Эта проверка проводится в цикле Гог() в строке 7, перебирающем каждое значение
между 2 и квадратным корнем из п (поскольку нет необходимости искать что-то
большее), выискивая наличие делителей в строке 9. Если имеются какие-либо де-
лители, то п не простое число, поэтому выдается инструкция сопМпие, чтобы снова
пройти цикл зеагсЪ в строке 3, проверяя следующее значение п.

Если у п нет делителей, то п — простое число, поэтому выполнение переходит к
строке 12, где сообщение отправляется обратно в основную часть пары программ
веб-воркера с вызовом функции розъмеззадеО, содержащей в качестве аргумента
только что найденное простое число.
И наконец, в строке 13 код возвращается к бесконечному циклу в строке 3, чтобы
продолжить поиск. В результате все выглядит так, как показано на рис. 14.4, где
кнопка зтор предназначена для быстрой остановки рабочего процесса, поскольку он
находится в бесконечном цикле, и в противном случае его было бы очень непросто
остановить.

Рис. 14.4. Выполнение проверки на принадлежность к простым числам

Автономные веб-приложения

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

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

Если используется веб-сервер, отличный от Арасйе, узнайте из системного руково-
дства, как добавить М1МЕ-ТИП Ъех^сасИе-тап^езЪ для расширений файлов .аррсасЬе,
чтобы сервер отправлял файл манифеста, используя правильный тип. А для пользо-
вателей Арасйе (и вас в том числе, если используется сервер МАМР, настроенный в
главе 3 «У1зиа1 81исйо Собе») есть более легкий путь, заключающийся в создании
файла с именем .ь^ассезз в той же папке, что и файлы с доступом в автономном ре-
жиме, со следующим содержимым:

АсШуре ^ех^/сас±е-тап1Гез^ .аррсаске

Как работают автономные веб-приложения

Рассмотрим порядок работы автономных веб-приложений. Можно начать с файла
манифеста с перечислением всех предлагаемых вами для автономного использова-
ния файлов, содержащий код, похожий на показанный ниже в примере 14.6 и со-
храненный ПОД именем с1оск.аррсаске.

Пример 14.6

1.	САСНЕ МАШЕЕ8Т

2.	# сЕоск.аррсасЬе

3.	с1оск.ккт1

4.	с1оск.сзз

5.	с!оск.]з

В манифесте перечислены три файла: первым указан с1оск.Ькт1, показанный в при-
мере 14.7 (в котором есть ссылка на сЕоск.аррсасЬе), затем указаны файл сценария с
именем сЕоск.^з и файл таблицы стилей с именем сХоск.сзз. А в теле документа
имеется элемент <оикрик>, в котором 1ауа8спр1 впоследствии будет обновлять пока-
зания времени.

Пример 14.7

1.	<!ПОСТЕРЕ Ькт1> <!— с1оск.Ькт1—>

2.	<ккт! тап1кезк='с1оск.аррсаске’>

3.	<кеас!>

4.	Стека	скагзек="икк-8">

5.	<к1к1е>0ГГИпе 1лГеЬ Аррз</к1к1е>

6.	<зсг!рк згс=’с!оск.]з’></зсг!рк>

7.	<Ипк	ге!=’зку!езкеек’ кгек=’сТоск.сзз’>

8.	</Ьеас1>

9.	<Ьос1у>

10.	<р>Тке кипе йз: Соикрик 1с1='с1оск'></оикрик></р>

11.	</Ьос1у>

12.	</ккт!>

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

Пример 14.8

1. оикрик { копк-меХдкк :Ьо1с1; } /* с1оск.сзз */

В примере 14.9 показан 1ауа8спр1-код файла с1оск.]з, устанавливающий с помо-
щью функции зек!пкегуа1() периодический интервал, позволяющий вызывать со-
держащийся в ней код каждые 1000 мс (или один раз в секунду). При каждом вызо-
ве этого кода происходит простое копирование последних данных даты и времени в
свойство тппегнтмъ элемента с1оск, получаемых путем создания нового объекта с
использованием кода пем Эаке ().

Пример 14.9

1.	//	с1оск.^з

2.	зек1пкегуа1 (ГипсМоп ()

3.	{

4.	аоситепк.декЕ1етепкВу1а( ’сГоск’) .аппегНТМЪ = пем Баке()

5.	},	1000)

Теперь имеются все части пазла, с помощью которых можно собрать автономное
веб-приложение, поэтому давайте доведем дело до конца, загрузив файл с1оск.Ькт1
(пример 14.7) в веб-браузер, и получим результат, похожий на тот, что изображен
на рис. 14.5, где показаны полная дата и время, обновляемые каждую секунду.

0 ОЯКпе ХЛ/еЬ Арр$	X 4-

СО® 1оса1Ьо51/Ехатр1е5/5есгюп_2/14/с1оск.П1т1	:

Т11С Пте 18: Моп ЕеЬ 07 2022 18:22:27 6МТ+0000 (Сгееп\У1с11 Меап Типе)

Рис. 14.5. Запущенное автономное веб-приложение

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

♦	Мпуиг!. сот/меЬ-аррз

♦	’Ыпуиг!. сот/меЬ-аррз2

Перетаскивание

В НТМЬ5 с технологией перетаскивания связано семь событий: агадзкагк, агад,
агадоуег, агадепкег, агад1еауе, агор и агадепа. Сама технология предполагает исполь-
зование весьма сложного и требующего глубокого понимания кода 1ауа8спр1, по-
зволяющего решать, что нужно делать в зависимости от каждого действия, рас-
смотрение которого выходит далеко за рамки тематики этой книги. Но если есть
интерес к использованию технологии, более подробную информацию можно найти
ПО адресу капуиг!. сот/агад-агор.
Обмен сообщениями между документами

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

Заключение

Эта глава завершает почти все повествование о новинках и улучшениях, присутст-
вующих в НТМЬ5, за исключением аудио- и видеосоставляющих НТМЬ5, которые,
возможно, представляют собой пару самых важных новых функций. Но лучшее
оставлено напоследок, и подробности о них станут известны при изучении сле-
дующей главы.
ГЛАВА 15

Аудио и видео

Введение

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

И тем не менее, при желании можно улучшить воспроизведение мультимедиа ва-
шими пользователями, прикрепив к аудио и видео функции 1ауа8спр1. Но, если па-
раметры, используемые по умолчанию, вас устраивают, ничего этого делать не
нужно.

Практически все сводится к перетаскиванию нужных файлов форматов МРЗ или
МР4 в соответствующие места на вашем веб-сервере, добавлению пары строк кода
в свой НТМЬ, и к получению в результате этого своего собственного приложения
по типу 8робГу или ТоиТиЪе. Все проще простого.

Структура

В этой главе рассматриваются следующие темы:

♦	Знакомство с кодеками сжатия аудио и видео.

♦	Выбор наиболее подходящих кодеков для ваших медиафайлов.

♦	Приемы точной настройки воспроизведения аудио и видео.

♦	Приемы улучшения условий воспроизведения мультимедиа с помощью 1ауа8спр1.

Цели

Здесь изучение особенностей НТМЬ5 завершается ознакомлением с оставшимися
двумя функциями: аудио и видео. Освоив предлагаемый материал, вы не только
сможете применять приемы добавления мультимедиа на свои веб-страницы, но и
завершите ознакомление со всем разделом книги, посвященным НТМЬ5.
Аудио в НТМ1_5

Бурному развитию интернет-технологий не в малой степени поспособствовало
стремление к поддержке воспроизведения аудио- и видеоматериала. Высокая стои-
мость трафика привела к разработке эффективных алгоритмов сжатия МРЗ-аудио и
МРЕСг-видео, но даже при этом единственным способом загрузки файлов в разум-
ные сроки было резкое снижение их качества.

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

Прогресс в этом деле зависел от разработки веб-стандартов поддержки мультиме-
диа непосредственно в браузере. Разумеется, у разработчиков браузеров М1сго8ой и
Сюо§1е были разные взгляды на эти стандарты, но, когда страсти улеглись, они все
же договорились о подмножестве типов файлов, которые должны воспроизводить-
ся всеми браузерами, и эти решения были введены в спецификацию НТМЕ5.

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

Аудиокодеки

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

Ниже перечислены кодеки, поддерживаемые тегом НТМЕ5 <аисПо> (а также исполь-
зуемые при прикреплении звука к НТМЕ5-видео):

♦	ААС: Абуапсеб АиШо Епсосйп§ — это кодек с запатентованной технологией,
обычно использующий файлы с расширением .аас (шипе-тип: аисИо/аас).

♦	ГЬАС: Егее Ео881е88 Аисйо Собес— бесплатный аудиокодек без потерь качест-
ва, использующий файлы с расширением .Пас (шипе-тип: аисИо/Г1ас).

♦	МРЗ: МРЕСг Аисйо Еауег 3 — кодек, использующий файлы с расширением .трЗ
(тШ1е-ТИП: аисИо/тред).

♦	РСМ: Ри18е Содей МосЫайоп — кодек без потерь качества, использующий фай-
лы С расширением .ыач (тйпе-тип: аисИо/юау ИЛИ аисИо/мауе).
♦	УогЫз:	УогЫз — довольно редко поддерживаемый кодек, использующий

файлы С расширением ,одд (шипе -тип: аисНо/одд ИЛИ аисИо/меЬт).

Эти типы аудио поддерживает большинство операционных систем и браузеров, за
некоторыми исключениями, связанными с 8аГап, для УогЫз, поэтому при отсутст-
вии веских причин для использования УогЫз лучше просто отдать предпочтение
ААС или МРЗ для сжатого звука с потерями, РЬАС для сжатого звука без потерь
или РСМ для несжатого звука. В приводимых здесь примерах используются только
файлы МРЗ, поскольку они прекрасно работают во всех современных браузерах.

Воспроизведение аудио

Чтобы вставить аудио на веб-страницы, можно воспользоваться новым тегом
<аисИо> в сочетании с тегом <зоигсе>, сообщающим браузеру, где взять звук для вос-
произведения. В примере 15.1 показана загрузка файла МРЗ и добавление пользо-
вательских элементов управления.

Пример 15.1

1.	<1ЭОСТУРЕ Мт1>

2.	<Мш1 1апд=’’еп">

3.	<Ееас1>

4.	СгпеЕа скагзеЕ=’’иЕГ-8" />

5.	<Х1Е1е>Р1ау1пд АисПо</ММе>

6.	</Ьеас1>

7.	<Ьос1у>

8.	<аисИо сопЕго!з>

9.	<зоигсе згс='тиз!с.трЗ' Еуре=’аисПо/тред’>

10.	</аис11о>

11.	</Ьос1у>

12.	</1гЬт1>

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

Рис. 15.1. Воспроизведение аудиофайла

В строке 8 показано, что тег <аисИо> создается с видимыми пользовательскими эле-
ментами управления путем добавления к нему атрибута сопЕго1з. Внутри тега нуж-
но просто сообщить браузеру, откуда загрузить файл, в данном случае указан
тизгс.трЗ. Дополнительно также предоставляется М1МЕ-тип аъкНо/тред, но в боль-
шинстве случаев его можно не указывать, поскольку браузер сам вырабатывает
М1МЕ-ТИП.

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

Если нужно, чтобы воспроизведение медиафайла начиналось сразу же после за-
грузки, можно также добавить в код в строке 8 атрибут аикор1ау:

8.	<аисНо сопкго1з аикор1ау>

Можно также зациклить воспроизведение, воспользовавшись атрибутом 1оор:

8.	<аисНо сопкго1з 1оор>

Или же по мере необходимости все эти атрибуты можно указывать в сочетании и в
произвольном порядке. Например, можно скрыть элементы управления, не указав
атрибут соп^го1з управления, но в таком случае пользователям можно дать хотя бы
способ остановки воспроизведения, если звук их начнет раздражать. В примере 15.2
показано, как можно добавить на веб-страницу пару кнопок для воспроизведения и
приостановки звука.

Пример 15.2

1.	< ! ЭОСТУРЕ Мт1>

2.	<Мт1 1апд=”еп">

3.	<Иеас1>

4.	<теРа скагзек="икЕ-8"	/>

5.	<ММе>Р1ау1пд АисНо	Еауа8сг1рк</ММе>

6.	</Иеас1>

7.	<Ьос1у>

8.	<аисИо 1с1=’тиз1с’>

9.	<зоигсе згс=’тиз1с.трЗ' Гуре=’аис11о/тред’>

10.	</аисНо>

11.

12.	<р>

13.	<ЬиРРоп опс11ск=’р1ауаис11о ()’>Р1ау АисИо</Ьиккоп>

14.	<ЬиРРоп опсИск=’раизеаисПо ()’>Раизе АисНо</Ьиккоп>

15.	</р>

16.

17.	<зсг!рк>

18.	ГипсМоп	р1ауаисНо ()

19.	{

20.	с1оситепк.декЕ1етепкВу1с1(’тизас’) .р1ау()

21.	}

22.
23.	ЕипсМоп	раизеаисПо ()

24.	{

25.	с!оситепЕ.деЕЕ1етепЕВу1с1(’тизгс’) .раизе ()

26.	}

27.	</зсг1рЕ>

28.	</Ьос1у>

29.	</Мт1>

В данном случае музыка не настроена на автоматическое воспроизведение
(аивор1ау), поэтому в строке 13 создается кнопка Р1ау АисНо, а в строке 14 — кнопка
Раизе АисНо. Обе кнопки выдают при щелчке на них события, вызывающие либо
функцию р1ауаисНо (), либо функцию раизеаисНо (), определения которых приводятся
в следующем разделе с кодом 1ауа8спр1.

Определения этих двух функций начинаются в строках 18 и 23 соответственно, где
их просто вызывают для элемента аисНо функции р1ау () и раизе (). Результат загруз-
ки этого примера в браузер показан на рис. 15.2.

0 Р1аутд АисГю шНЬ 1ауа8спр1 X +

<- СОФ 1оса1Ко5ЦЕхатр1е5/$ес1юп_2/15/ехатр1е_02.11Гт1	ф Й- :

Р1ау АисНо Раизе Аидю

Рис. 15.2. Теперь воспроизведение управляется с помощью кнопок

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

Видео в НТМЬ5

С видео, как и со звуком, стало понятно, что сжатие — один из основных приори-
тетов для развития Интернета, но здесь пришлось столкнуться с куда более сущест-
венными трудностями.

Для сравнения, используя формат МРЗ, можно уменьшить размер аудиофайла, по-
требляющего 10 Мб данных в минуту, до половины мегабайта или и того меньше
без заметной потери качества. К примеру, файл тизтс.трЗ, используемый в наших
примерах, имеет продолжительность звучания 26 секунд и размер всего в 457 Кб.
А вот видео высокого разрешения будет на порядок больше по размеру.
Но к нашему удовольствию, имеется множество приемов уменьшения данных о
цвете, поскольку наши глаза больше реагируют на контраст, чем на цвет, а также на
разбиение изображения на фрагменты, похожие друг на друга. Представьте себе
облачное небо, и согласитесь, что в нем будет масса частей, похожих друг на друга,
позволяющих применить к его картинке эффективное сжатие. А за счет простой
фиксации изменений между кадрами можно существенно увеличить экономию
данных.

То есть одноминутное видео формата 1080НВ, 30 кадров в секунду, которое обыч-
но имеет размер около 1,3 Гб, можно сжать примерно до 180 МБ или еще меньше,
если разрешено дальнейшее снижение качества. Как ни удивительно, но, посмотрев
телевидение по подписке, например №1Шх, можно убедиться, что результат подоб-
ного сжатия при качественном подходе к делу едва заметен. И все это опять же
достигается с помощью кодеков, основные представители которых рассматривают-
ся в следующем разделе.

Видеокодеки

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

♦	МР4: Формат мультимедийного контейнера МРЕО-4 (гшше-тип: у1аео/тр4).

♦	О§§: Формат открытого контейнера (гште-тип: уЫео/одд).

♦	\УеЬМ: Аудио-видео формат (гшше-тип: уЫео/^еЬт).

Затем в них может содержаться один из следующих видеокодеков:

♦	Н.264 или Н.265: Запатентованные видеокодеки— в Н.265 используется поло-
винный битрейт от Н.264.

♦	ТЬеога: Запатентованный видеокодек.

♦	УР8 или УР9: Кодеки, подобные ТЬеога но с открытым кодом — в УР9 исполь-
зуется половинный битрейт от УР8.

Современные браузеры поддерживают все вышеперечисленное, за исключением
того, что 0(3(3 не полностью поддерживается во всех версиях Ю8 и МасО8. Поэто-
му при отсутствии необходимости использования 0(3(3 стоит придерживаться либо
МР4, либо А^еЪМ. В приводимых здесь примерах используются только файлы МР4,
поскольку их поддерживают все современные браузеры.

Воспроизведение видео

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

1.	< ! ООСТТРЕ Мт1>

2.	<Мш1 1апд=’’еп">

3.	<Ъеас1>

4.	<теЕа с±агзеЕ="иЕР-8" />

5.	<-ЫЕ1е>Р1ау1пд 71с1ео</МЕ1е>

6.	</Ееас1>

7.	<Ьос1у>

8.	<У1с1ео	320 ’ Ее1дМ=’24О’ сопЕго!з>

9.	<зоигсе згс=’Ьиппу.тр4 ’ Еуре=’у!с1ео/тр4 ’ >

10.	</у!с1ео>

11.	</Ьос1у>

12.	</Мт1>

В этом примере в строке 8 используется тег <У1Еео>, где задаются размеры изобра-
жения 320 х 240 пикселей и добавлены пользовательские элементы управления.
Затем в строке 9 указывается имя воспроизводимого видеофайла Ьиппу.тр4 и указы-
вается необязательный тип файла у1аео/тр4. Обычно браузеры сами определяют
М1МЕ-тип, поэтому указывать его необязательно. Результат загрузки кода примера
в браузер показан на рис. 15.3. Как ни удивительно, но благодаря используемому
кодеку все это двухминутное видео имеет размер всего 10 Мб.

Рис. 15.3. Загрузка видео с пользовательскими элементами управления

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

Если нужно получить немедленный запуск медиафайла, можно также добавить в
КОД строки 8 атрибут аиЕор!ау:

8.	<У1с1ео №1с±Ъ=' 320 ’ Ье1дЬЕ='24О’ сопЕго!з аиЬор!ау>

Можно также зациклить видео, указав атрибут 1оор:

8.	<У1Ьео №1с±Ъ=’ 320 ’ Ье1дЬЕ='24О’ сопЕго!з 1оор>

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

Пример 15.4

1.	< ! ЭОСТУРЕ Мт1>

2.	<Мт1 1апд=’’еп">

3.	<Ьеас1>

4.	Стека скагзеЬ="иЬР-8" />

5.	<ЫЫе>Р1ау1пд 71Ьео м1ЕЪ ЕауаЗсг1рЕ</ЫЕ1е>

6.	</ЬеаЬ>

7.	<ЬоЬу>

8.	СуЫео 1Ь=’Ьиппу’ м1ЬЕЪ=' 320 ’ Ъе1дМ=’ 240 ’ >

9.	<зоигсе згс='Ьиппу .тр4 ’ Ьуре=’ У1Ьео/тр4 ’ >

10.	</у1Ьео>

11.

12.	<р>

13.	сЬиЬЬоп опс11ск=’р1ауу1с1ео () ’ >Р1ау 71Ьео</ЬиЕЬоп>

14.	сЬиккоп опс11ск=’раизеу1с1ео ()’>Раизе 71Ьео</ЬиЕЬоп>

15.	</р>

16.

17.	<зсг1рк>

18.	ЕипсЫоп	р1ауу1с1ео()

19.	{

2 0 .	Ьоситепк. деЬЕ1етепЬВу1с1 (’ Ьиппу ’) . р1ау ()

21.	}

22.

23.	ЕипсЫоп	раизеуЫео ()

24.	{

2 5.	Ьоситепк. деЬЕ1етепЬВу1с1 (’ Ьиппу ’) . раизе ()

26.	}

27.	</зсг1рк>

28.	</ЬоЬу>

29.	</Мт1>
Структурно этот пример практически идентичен примеру 15.2, но с видео вместо
аудио. В строках с 8 по 10 загружают видео без отображения пользовательских
элементов управления, а в строках 13 и 14 добавляются кнопки для запуска и при-
остановки воспроизведения видео, а функции, определение которых начинается в
строках 18 и 23, выполняют фактическое воспроизведение и приостановку, вызы-
вая в свою очередь функции р1ау () и раизе () в отношении элемента уЫео. Результат
выполнения этого кода показан на рис. 15.4.

Рис. 15.4. Теперь воспроизведение видеоконтента управляется с помощью кнопок,
связанных с функциями 1ауа$спр1

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

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

Стоит также напомнить, что для предоставления пользователям полноэкранного
режима просмотра не нужен никакой код 1ауа8спр1, поскольку он уже встроен в
программное средство воспроизведения видео. Предоставление пользователям
элементов управления позволяет им, как показано на рис. 15.5, войти в этот режим
по щелчку на соответствующем значке.
Рис. 15.5. Видео в режиме полноэкранного воспроизведения

При желании перевести видео в полноэкранный режим можно также с помощью
простого кода 1ауа8спр1, показанного в примере 15.5, являющего скорректирован-
ной версией кода примера 15.4, но с наличием дополнительной кнопки в строке 15,
на которой пользователь должен щелкнуть, чтобы перейти в полноэкранный ре-
жим, и соответствующей функции 1ауа8спр1, определение которой начинается в
строке 29.

Пример 15.5

1.	< ! РОСТЕРЕ Мт1>

2.	<Мт1 1апд=’’еп">

3.	<Ъеас1>

4.	<теЕа с±агзеЕ="иЕЕ-8" />

5.	<Е^Е1е>^аVаЗс^^рЕ апс! Еи11 Зсгееп</Е1Е1е>

6.	</Ееас1>

7.	<Ьос1у>

8.	<У1с1ео 1с1=’Ьиппу’ М1С±Е=' 320 ’ Ъе1дМ=' 240 ’ >

9.	<зоигсе згс=’Ьиппу.тр4’ Еуре=’У1с1ео/тр4 ’ >

10.	</у1с1ео>

11.

12.	<р>

13.	<ЬиЕЕоп опс11ск=’р1ауу1с1ео ()’>Р1ау У1с1ео</ЬиЕЕоп>

14.	<Ьиккоп опс11ск=’раизеу1с1ео ()’>Раизе У1с1ео</ЬикЕоп>

15.	<Ьиккоп опсИск=’ Ри11у1с1ео () *>Еи11 Зсгееп</Ьи-ЬЕоп>

16.	</р>

17.

18.	<зсг1рк>

19.	ЕипскРоп р1ауу1с1ео()
20.	{

21.	ЬоситепЬ. деЬЕ1етепЬВу1Ь (’ Ьиппу ’) . р!ау ()

22.	}

23.

24.	ГипсЫоп	раизеутЬео ()

25.	{

2 6.	ЬоситепЬ.деЬЕ1етепЬВу1Ь(’Ьиппу’).раизе()

27.	}

28.

29.	ГипсЫоп	Ьи11уйс1ео()

30.	{

31.	ЬоситепЬ.деЬЕ1етепЬВу1Ь( ’Ьиппу’) .гедиезЬЕиНзсгееп ()

32.	}

33.	</зсг1рЬ>

34.	</ЬоЬу>

35.	</ЬЬт1>

Здесь интереснее всего то, что для выполнения задуманного будет вполне доста-
точно вызова для видео в строке 31 функции гедиезЬЕи113сгееп(). Если загрузить эту
версию примера в браузер, результат будет такой же, как на рис. 15.6.

0 ^уа5спр( апд Ги11 Бсгееп X +

<- СО® 1оса1Ьо$1/Ехатр1е5/$ес11оп_2/15/ехатр1е_0Б.Ыт1	ф	:

| Р1ау У|с1ео | [ Раиае У|с1ео | [ Ец11 Зсгееп [

Рис. 15.6. На страницу добавлена кнопка полноэкранного режима «Ги11 Зсгееп»

Странно, что даже если элементы управления в элементе <у1Ьео> не были выбраны,
и пользователи решат войти в полноэкранный режим, им в этом режиме также бу-
дет представлен полный набор элементов управления, и, похоже, изменить такое
поведение не представляется возможным.
Заключение

Ну вот и все! Теперь изучены все нововведения, добавленные в НТМЬ специфика-
цией НТМЬ5, включая высокоэффективные аудио- и видеофункции, которых
раньше очень не хватало. Вы должны гордиться освоением новых знаний и овладе-
нием практическими навыками, позволяющими усовершенствовать ваши собствен-
ные проекты.

А теперь настал черед освоения другой важной части современной веб-разработки,
и в следующей главе, а по сути в следующем разделе этой книги, предстоит изуче-
ние всех нововведений, добавленных в С88 спецификацией С883.
ГЛАВА 16

Введение в С353

Введение

Итак, половина книги уже прочитана, усвоен большой объем новой информации.
Теперь вы уже должны стать мастером работы с различными функциями НТМИ5,
так давайте же сопоставим приобретенные вами знания со всеми новинками С883.

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

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

Структура

В этой главе рассматриваются следующие темы:

♦	Полный обзор всех новых функций, добавленных в С883.

♦	Ответ на вопрос, как и почему С88 находится в стадии разработки.

♦	Введение в курс всех новых, эффективных и доступных инструментов стилизации.

♦	Изучение основ каждого из этих инструментов до их практического освоения.

Цели

Цель главы — дать полное представление о причинах и направлениях непрекра-
щающегося развития С88, и о текущем и будущем состоянии дел и вероятных от-
даленных перспективах. Изучив предлагаемый материал, вы будете точно знать,
какие типы новых вариантов оформления стилей доступны в С883, и подготови-
тесь к изучению всех их особенностей в остальной части этого раздела.
Разработка С883 продолжается

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

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

Итак, существованием как С88, так и С882 отметилась вторая половина первого
десятилетия нового тысячелетия, но даже их уже было недостаточно. К счастью,
уже к началу 2001 года началась работа над С883, продолжавшаяся около 10 лет, и
даже сейчас время официального завершения спецификации С883 еще не настало,
хотя она и превратилась в набор функций, поддерживаемый всеми современными
браузерами.

Бытуют утверждения, что С883 никогда не достигнет финальной стадии и что эта
спецификация, в силу своей модульности позволяющая добавлять в нее все новые и
новые независимые модули, будет находиться в стадии постоянной разработки. Но
вполне вероятно, что в какой-то момент времени та или иная компания выступит за
то, чтобы текущие возможности С883 были зафиксированы, высечены, так сказать,
в камне, а другие разработчики последуют их примеру и согласятся с тем, что бу-
дущие расширения должны уже стать спецификацией С884. И все же, похоже, этот
день еще не близок. Хотя конкретных планов относительно С884 пока нет, автор
ожидает, что в конце концов это произойдет, как и когда-нибудь (что вполне веро-
ятно) появится и НТМЬб. Никто не знает, что это будет, возможно, дело дойдет до
просмотра информации в виртуальной реальности!

Возможно, как только уляжется вся пыль, мы вернемся к простым ссылкам на С88
и НТМЬ, и когда это произойдет, будут иметься в виду все функции, поддерживае-
мые в настоящее время этими двумя технологиями. А тем временем, разработка
С883 все еще находится в развитии, поэтому за время присутствия на магазинных
полках этой книги технология пойдет еще дальше. Но пока в этом разделе книги
раскрывается состояние дел на начало 2020-х годов.

Если есть желание проследить текущее развитие С88, можно быть в курсе проис-
ходящего, обратившись по следующему 1ЖЕ-адресу на \у3.ог§:

Мпуиг!. сот/мЗогдсзз
Новое в С883

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

Знакомство с новинками позволит перейти к изучению следующих глав и, в конеч-
ном итоге, к полноценному освоению всей технологии С883.

Итак, давайте взглянем на сложившуюся картину спецификации С883 в ее нынеш-
нем виде и посмотрим, какие новые функции доступны для использования прямо
сейчас, включая усовершенствованные селекторы атрибутов, фоновые решения,
границы, тени блоков, перетекания, настройки цвета и прозрачности, макеты
столбцов, текст и шрифты, размеры полей, перемещения, преобразования и многое
другое. Не говоря уже о ИехЪох-разметке и сетке С88 Опб.

Селекторы атрибутов

В С883 в селекторы атрибутов за счет использования новых операторов |, ~, Л, <, $
и * внесены три усовершенствования. Как известно, С88 предлагает поддержку
идентификаторов и классов с помощью символов-операторов # (решетка) и . (точ-
ка). В показанном в примере 16.1 разделе <Ьоау> содержатся две строки кода НТМЬ
в строках 13 и 14 с тегом <Ь1> и тегом <р>, с двумя идентификаторами с именами
тп^го и Пгзъ, и классом по имени зЕагЕ.

Пример 16.1

1.	< ! ЭОСТУРЕ Мт1>

2.	<Мт1 1апд=’’еп">

3.	<Ееас1>

4.	<теЕа сЪагзеЕ="иЕГ-8">

5.	<ММе>АЕЕг1ЬиЕе 5е1есЕогз</ММе>

6.	<зЕу!е>

7.	#1пЕго_1	{	со!ог	:	гес1;	}

8.	#Г1гзЕ_рага	{	ГопЕ-метдМ	:	ЬоЫ;	}

9.	.Г1гзЕ_11пе	{	ГопЕ-зЕу1е	:	гЬаПс;	}

10.	</зЕу1е>

11.	</Ееас1>

12.	<Ьос1у>

13.	<Ы 1(1=' 1пЕго_1 ’ >ТЫз 13 а Ъеас11пд</М>

14.	<р 1(1=’ Е1гзЕ_рага'	с1азз=’ Е1гзЕ_Ипе ’ >ЭДе1соте	Ео ту меЬз1Ее</р>

15.	</Ьос1у>

16.	</ЪЕт1>
С88-код, используемый для стилизации этого НТМЬ в строках с 7 по 9, имеет
вполне стандартный вид. Но новые селекторы атрибутов позволяют делать такие
вещи, как замену существующего С88 на следующий, после того как выяснится,
что значение начинается со строкового значения (1пЪго...), заканчивается строковым
значением (...рага) или просто содержит строковое значение (... ъ_1...), в следующем
порядке:

7.

8.

9.

М[1с1 Л= ’1пГго’]
р[1с1	$=	’рага’ ]

р[с1азз *= ’Г_1’	]

СО1ОГ

: гес1;

: ЬоЫ;

Гоп^-з^у1е : ПзаИс;

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

0 АПлЬи1е $е1есЮг5	X +

С О О 1оса1Но51УЕхатр1е5/5есЬоп_3/1€/ехатр1е_01.Н1т1	ф Л Л

ТЫ® к а ЬеасКпд

Же/сате /о ту и'еЬхне

Рис. 16.1. Простая стилизация двух элементов

Как уже упоминалось, можно воспользоваться и другими операторами, но эти три
дадут общее представление о том, как они работают. Дополнительные сведения о
селекторах атрибутов приведены в главе 17 «Селекторы атрибутов С883».

Примечание

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

Фоновые решения

В С883 добавили несколько новых способов создания фона, в том числе возмож-
ность изменять источник фона, указывать, как должны отображаться границы от-
носительно фоновых изображений, области отсечения и использование нескольких
фоновых изображений, как в примере 16.2.
1.	< ! ООСТТРЕ ЬШ1>

2.	<Мт1 1апд="еп">		
3.  4.  5.  6.  7.  8.  9.  10.  11.  12.  13.  14.	<Ьеас1>  <теЕа скагзеЕ="иЕГ-8">  <МЕ1е>Васкдгоипс1з</Ш1е>  <зку!е>  .ЬоЫег {  Гопк-ГатНу	:	’Татез Нем	Котап’;  Еопк-зку1е	:	акаИс;  кехк-аИдп	:	сепкег;  раскНпд	:	60рх;  мМкк	:	250рх;  НеадМ	:	ЗООрх;  Ьаскдгоипс!	:	иг1(’Ы.д1Г’)	кор	1еГЕ	по-гереак,
15.	иг1 (’Ь2 ,дИ’) кор	гадкЕ	по-гереак,
16.	иг1(’ЬЗ.дРЕ’) Ьоккот	1еГЕ	по-гереак,
17.	иг1 (’Ь4 .дИ’) Ьоккот	гадкЕ	по-гереак,
18.  19.  20.  21.  22.  23.  24.  25.  26.  27.  28.  29.  30.  31.  32.  33.  34.  35.	иг1 (’Ьа.дИ’) кор  иг1 (’ЬЬ.дИ’) 1еГЕ  иг! (’ Ьс. дИ ’) гадМ  иг1 (’ЬскдИ’) Ьоккот  </зку!е>  </Ъеас1>  <Ьос1у>  <сепкег>  <сНу с1азз=’Ьогс!ег ’>  <Ы>Сегк1Г1саке оЕ<Ьг>АЕЕепс1апсе</Ы>  <И2>Амагс1ес1 То:</Ь2>  <к 3 >	< / к 3 >  <Ь2>ОаЬе:</Ь2>  <ИЗ>	/	/	</ИЗ>  </сНу>  </сепкег>  </Ьос1у>  </Мт1>		гереак-х, гереак-у, гереак-у, гереак-х }

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

Как показано в строках с 14 по 21, граница состоит из восьми отдельных изобра-
жений, которые органично компонуются друг с другом. Как это работает, наряду
с другими функциями создания фона, будет рассмотрено в главе 18 «Создание
фона».
0 Васкдгоип^Б	X +

4г 4 С О © 1оса1Ьо51/Ехатр1е5/5есиоп_3/16/ехатр1е_02^1:пп1 Ф, Ф Л =У*

Рис. 16.2. Граница, созданная с использованием сразу нескольких изображений

Границы

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

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

Затем части изображения извлекаются одна за другой и помещаются в настоящую
границу (а не во внешнюю часть фона, как в предыдущем примере), в результате
возникает изображение, показанное на рис. 16.4.

Основное усовершенствование, показанное в примере 16.3, заключается в том, что
используется только одно изображение, что упрощает задачу.
Рис. 16.3. Файл Ьогс1ег.рп§

© Вогс1ег1таде	X -|-

С О @ 1оса1Но5Г/Ехатр1е5/5ейюл_3/1б^ёкатр1е_03.Нгт1 Ф.	Л* ;

Ап

1та§е

Вогйег

Рис. 16.4. Изображение Ьогс1ег.рп§ было расширено в границы элемента

Пример 16.3

1.	< ! ЭОСТТРЕ Мт1>

2.	<Мт1 1апд=”еп">

3.	<Иеас1>

4.

<теЕа сйагзеЕ="и^Р-8">
5.	<Ъ1Ъ1е>Вогс1ег 1таде</ММе>	
6.	<з^у1е>	
7.	.ЬогМег {	
8.	Гоп’Ь-ГатНу :	’Татез Мем Вотап’
9.	Ьех^-аИдп :	сеп^ег;
10.	раскПпд	:	ЗЗрх;
11.	м1с±Ъ	:	ЮОрх;
12.	Не1дМ	:	150рх;
13.	Ьогс1ег-м1сШ1 :	102рх;
14.	Ьогс1ег-з^у1е :	с!о^ес1;
15.	Ьогс1ег-1таде :	иг1 (' ЬоЫег. рпд ’)
16.	</з^у1е>	
17.	</Ъеас1>	
18.	<Ьос1у>	
19.	<сеп^ег>	
20.	<сИV с1азз=’Ьогс!ег’>	
21.	<ИЗ>А</ЪЗ>	
22.	<И2>Опе&пЬзр;1таде</Ъ2>	
23.	<ИЗ>Вогс1ег</кЗ>	
24.	</с11у>	
25.	</сеп^ег>	
26.	</Ьос1у>	
27.	</ЪГт1>	

102; }

Этот пример очень похож на пример 16.2, отличаясь от него в основном в разделе
<з^у1е>. Способ получения показанного результата подробно рассматривается в
главе 19 «Построение границ». А теперь посмотрите на строку 15, где загружается
единственный файл ЬоЫег.рпд и назначаются размеры для его применения к грани-
це. Изображение имеет размеры 205 х 205 пикселей, поэтому значение 102 приво-
дит к извлечению четырех углов по 102 х 102 пикселей каждый, а затем верх, низ и
стороны составляются из небольших частей изображения, не используемых углами.
Получается ничуть не сложнее, чем с какой-либо другой инструкцией стилизации
<с11у>. И все же следует понимать, что строка 14 необходима для исправления
«ошибки», из-за которой некоторые браузеры могут не отображать изображения
границ, если для атрибута ЬоЫег-з^уХе установлено значение попе (или же если ши-
рина границы равна 0, что в данном случае не так). Как бы то ни было, если ио ка-
кой-либо другой причине изображение не загрузится, то, по крайней мере, теперь
для отображения есть своего рода резервная граница.

Тени блоков

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

Пример 16.4

1.	< ! ЭОСТУРЕ Мтп1>

2.	<Мт1 1апд=”еп”>

3.	<Иеас1>

4.	<теРа скагзеГ="иГЕ-8">

5.	<Г1Г1е>Вох 5Ъаскжз</МР1е>

6.	<зРу!е>

7.	.Ьох {

8.	мЫГк	:	500рх;

9.	ЪеадМ	:	140рх;

10.	ЬоЫег	:	Юрх зоИс!	#800; }

11.	. зЪаскж1 {

12.	Ьох-зЪаскж : 15рх 15рх Юрх #888; }

13.	</зРу!е>

14.	</Иеас1>

15.	<Ьос1у>

16.	<сепРег>

17.	<сНу с!азз=’Ьох зкаскж1 ’ ></с1гу>

18.	</сепРег>

19.	</Ьос1у>

20.	</ЪШ1>

В строке 12 задается применение тени к элементу <аю>, а в предыдущих инструк-
циях устанавливаются размеры блока и применяется граница. Можно даже в соот-
ветствии с описаниями в главе 20 «Свойства блока и текста» создать тень внутри
элемента. Результат выполнения кода примера показан на рис. 16.5.

0 Вох5Ьа<Зоуу$	X +

<-	0 О © 1оса1Ьо5ЦЕхатр1е5/5есгюп_3/16/ехатр1е_04.Ыт1 |^> ☆	*	;

Рис. 16.5. Элемент с тенью позади него
Столбцы и перетекания

Кроме этого, в главе 20 «Свойства блока и текста» рассматривается применение
нескольких столбцов, показанное в примере 16.5.

Пример 16.5

1.	< ! ООСТУРЕ Нкт1>

2.	<Мш1 1апд="еп">

3.	<Неа6>

4.	<тека скагзек="икк-8">

5.	<к1к1е>Ми1кйр1е Со1итпз</к1к1е>

6.	<зку!е>

7	.	.соХитпз {

8.	кехк-аИдп	:	^изкйку;

9.	копк-захе	:	16рк;

10.	со1итп-соипк	:	3;

11.	со!итп-дар	:	1ет;

12.	со!итп-ги!е	:	1рх зо116 Ыаск; }

13.	</зку!е>

14.	</НеаН>

15.	<ЬоНу>

16.	<61V	с1азз=’со1итпз’>

17.	Иом 13 кке мкпкег ок	оиг сНзсопкепк

18.	Мабе д1ог1оиз зиттег	Ьу	Шз зип ок	Уогк;

19.	Апб а!1 кке с!ои6з ккак	1оиг'6 ироп	оиг	Ъоизе

20.	1п	кке беер Ьозот ок	кке осеап Ьигйеб.

21.	Иом	аге оиг Ьгомз Ьоипб мккк	у1ског1оиз мгеаккз;

22.	Оиг	Ьгиазеб агтз кипд ир Рог	топитепкз;

23.	Оиг	зкегп а!агитз скапдеб ко	теггу тееккпдз,

24.	Оиг	бгеабки! тагскез ко беИдккки! теазигез.

25.	Сгйт^йзадеб маг	Накк зтоокк’6 Ыз мг1пк!еН кгопк;

26.	Апб пом, апзкеаб	ок	тоипккпд Ьагбеб зкеебз

27.	То кгкдкк кке зои!з	ок кеагки! аск/егзагкез,

28.	Не сарегз пктЫу	кп	а 1а6у’з скатЬег

29.	То кке 1азскукоиз р1еазкпд ок а 1ике.

30.	</сНу>

31.	</ЬоНу>

32.	</ккт!>

Результат загрузки кода этого примера в браузер показан на рис. 16.6.

Существуют также различные способы управления перетеканием внутри и снаружи
элемента, но соответствующий пример слишком объемный и его обсуждение будет
приводиться в главе 20 «Свойства блока и текста».
0 Ми1йр1е Со1итп5	X +

С О ® 1оса1Ьо51/Ехатр1е5/5есгюп.З/16/ехатр1е.05.Ыт1 Ф И? ☆ Л :

Ко\у 1$ Ше \У1п(ег оГ оиг
Шзсоп1еп1 Мас1с §1опоиз
зиттег Ьу Ш18 зип оГ Уогк;
Апс1 а11 Ше сШисЬ Ша1 1оигМ
ироп оиг коизе 1п 1Ие с!еер
Ьозот оГ Ше осеап ЬипеШ
Моау аге оиг Ъгоауз Ьоипб \У1Ш

У1с1опоиз итеаШз: Оиг ЬппзеН
агтз ир Гог топитеЫз;
Оиг з!егп а1агитз скап§ес1 1о
теггу теебп§з, Оиг ШеаШи1
тагскез 1о (1еН§ЫШ1
теазигез. Сгпт-У1за§ес1 \уаг
ИаШ зтооШМ 1118 \угтк1ес1

ГгопЦ Апс! поху. тзгеас! о Г
тоипйп§ ЬаМей зТссШ То
Гпу111 Ше 8ои1з оГ ГеагШ!
ас^егзапез, Не сарегз штЫу
т а 1а<йу’з скатЬег То Ше
1азс1У1оиз р1еазт§ оГ а 1и1е.

Рис. 16.6. Текст из шекспировского «Ричарда III», перетекающий по столбцам

Цвета и прозрачность

В С883 предлагается целый ряд новых способов обработки цветовых настроек и
прозрачности, включая выбор между использованием цветов из пространства Кеб,
Огееп, В1ие (КОВ) или цветового пространства Ние, 8а1игайоп, Ьиштапсе (Н8Ь). И
здесь важно понимать, что именно используется, поскольку, к примеру, зеленый
цвет в Н8Ь не совпадает с зеленым цветом в КОВ.

В примере 16.6 в С88 с применением контейнера «Ну> создается цветовой круг и
конические градиенты.

Пример 16.6

1.	< ! ООСТЕРЕ ЬШ1>

2.	<Мт1 1апд=’’еп">

3.	<Иеас1>

4.	<тека скагзек="иГГ-8">

5.	<Г1Г1е>Со1ог Тл41ее1</Г1Г1е>

6.	<зку1е>

7.	. со1ог-1/Шее1 {

8.	мгсШЬ	:	бООрх;

9.	ИегдМ	:	ЗООрх;

10.	ЬоЫег-гасНиз :	50%;

11.	Ьаскдгоипс!	:	сопгс-дгасНепк (геф уе11ом, Ител

12.	адиа, Ыие, тадепГа, геф ;

13.	</зку!е>

14.	</Иеас1>

15.	<Ьос1у>

16.	<сепГег>

17.	<сНу с1азз="со1ог-^кее1"></сНу>

18.	</сепГег>

19.	</Ьос1у>

20.	</ИГт1>
Подробнее цвета Н8Ь и КОВ будут рассматриваться в главе 21 «Цвета и прозрач-
ность», и там же прозрачность будет использоваться с различными вариациями
этого цветового круга, показанного на рис. 16.7.

СЫог	X Ц-

С О © 1оса1Ьо51/Ехатр1е5/5ес1юп_3/16/ехатр1е_0бД11т| ’ЙГ Л ±

Рис. 16.7. Цветовой круг с коническими градиентами

Текстовые эффекты и шрифты

В главе 22 «Текстовые эффекты и шрифты» будут рассматриваться всевозможные
текстовые эффекты, доступные в С883, включая применение теней, изменение раз-
мера, создание контуров и использование веб-шрифтов, к примеру, показанных на
рис. 16.8 бесплатно предоставляемых компанией (Зоо§1е в количестве свыше 1200
семейств.

В примере 16.7 загружается несколько образцов шрифтов (Зоо§1е, которые затем
используются для отображения текста.

Пример 16.7

1.	< ! ЭОСТУРЕ Мт1>

2.	<Мт1 1апд="еп">

3.	<Ъеас1>

4.	<теРа сйагзеР="иРГ-8">

5.	<МЪ1е>ДОеЬ ЕопРз</ММе>

6.	<зРу!е>

7.	.сапГагеП	{	ЕопГ-ЕатПу	:	"СапРагеИ",

8.	.сЬсоЫзапз	{	ГоггЬ-ГатЫу	:	"Вго1с1 Запз”,

9.	.1псопзо1аВа	{	ГопЪ-ГатЫу	:	"1псопзо1аВа"Л

запз-зегаГ; }
запз-зегаГ; }
топозрасе; }
10.

11.

12.

13.

14.

15.

16.

17.

18.

19.

20.

21.

22.

23.

24.

25.

26.

27.

28.

29.

30.

31.

32.

33.

34.

35.

36.

37.

38.

39.

40.

41.

42.

43.

44.

45.

46.

47.

48.

.1оЬзкег	{ Гопк-ГатНу :	: "ЪоЬзкег",	капказу, зегИ;
.поЬНе	{ Гопк-ГатНу :	: "ЫоЬНе",	запз-зегИ;
.гееп!е	{ Гопк-ГатНу :	: "Веепае Веап1е’\	сигзМе, зегИ;
.капдег1пе	{ Гопк-ГатНу :	: "Тапдегапе",	сигзМе, зегИ;
.уапопе	{ Гопк-ГатНу :	: "Уапопе КаМеезакх", запз-зегИ;	
Мт1	{ Гопк-захе :	: 42рк; }	

</зку!е>

<11пк ге1=’ зку1езкеек ’ куре=’кехк/сзз’ Ъгек=

’кгккр: / / копкз.доод!еар!з. сот/ сзз?ГатИу=Сапкаге11 ’ >

<Ипк ге1=’ зку1езкеек ’ куре=’кехк/сзз’ Ъгек=

’кгккр: / / копкз.доод!еар!з. сот/ сзз?Гат11у=Вго16+Запз ’ >

<Ипк ге1=’ зку1езкеек ’ куре=’кехк/сзз’ Ъгек=

’ Мкр: / / копкз. доод!еар!з. сот/ сзз?катИу=1псопзо1ака ’ >

<Ипк ге1=’ зку1езкеек ’ куре=’кехк/сзз’ Ъгек=

’кгккр: / / копкз.доод1еар!з. сот/ сзз?катИу=ЪоЬзкег ’ >

<Ипк ге1=’ зку1езкеек ’ куре=’кехк/сзз’ Ъгек=

’Мкр: / / копкз.доод1еар!з. сот/сзз?кат11у=ЫоЫ1е ’ >

<Ипк ге1=’ зку1езкеек ’ куре=’кехк/сзз’ Ъгек=

’Мкр: / / копкз.доод1еар!з. сот/ сзз?катИу=Вееп1е+Веап1е ’ >

<Ипк ге1=’ зку1езкеек ’ куре=’кехк/сзз’ Ъгек=

’кгккр: / / копкз.доод1еар!з. сот/ сзз?катИу=Тапдег1пе ’ >

<Ипк ге1=’ зку1езкеек ’ куре=’кехк/сзз’ Ъгек=

’кгккр: / / копкз.доод1еар!з. сот/ сзз?Гат11у=Уапопе+Каккеезакх ’ >

</Ьеа6>

<Ьоау>

<6М зку1е=' Г1оак:1екк; тагд!п-г!дМ: 10рх; ’>

<61V с1азз='сапкагеИ' >Сапкаге11</сНу>

<61V с1азз='6го16запз' >Бго16 Запз</61У>

<61V с!азз= ’ 1псопзо1ака ’ >1псопзо1ака</61у>

<61V с1азз='1оЬзкег’

</61У>

<61У>

<61V с!азз=’поЫ1е’

<61V с1азз=’гееп!е’

<61V с1азз=’капдегапе'

<61V с!азз=’уапопе ’

</61У>

</Ьо6у>

</Мт1>

>ЪоЬзкег</6М>

>МоЫ1е</61У>

>Еееп1е Веап1е</61у>

>Тапдег1пе</6М>

>Тапопе КаМеезакх</61у>

Результат загрузки этого примера в браузер будет выглядеть, как на рис. 16.9. Не-
трудно заметить, что в разделе <зку1е> устанавливаются атрибуты семейства шриф-
тов, и им даются имена классов, а затем приведенные ниже теги <Ипк> приводят к
фактической загрузке этих шрифтов с серверов Ооо§1е. Остается только применить
в разделе <Мт1> выбранные классы там, где нужно воспользоваться тем или иным
шрифтом.
/ Вгате ГопТз - См>д1г РогтГз	X +  -3 С О й 1вт5.доод1е,сот		'	-	□	X
		е. й * * <> :
Ц ЬелгеЪ Гопи	- Туре БотйЫпв	4Ор» 	♦	"
ЯаЬаГп Сол^еттБес!		Рорр*П5 1,-р. Й»пя|1 ^Ал₽1Г	г
А1тоз< ЬеГоге ие		А1то8(: ЬеТоге «е
кпею И, ие Кай 1еЛ Же дгоипд.	п е	Ди	кпе\л/ к, \л/е Ьаб
		1еК Ше дгоипс!.
Боипзэ Баль Рго	□ь лай	5Ъ1гит
«ы Р Н*'1’	Л.пт/1ЪМ1* г~' Ьп»	
А1тоь1 ЬеГоге ше	А1то$( Ье(оге же кпеи	Ьегоге не
кпеии й, иие Нас! 1еЙ	К. же Ьай 1еП Же	кьен Н» не
ГИе §гоипс!.  	ЁГ011ПЙ.	(еН Ле ягоике!.

Рис. 16.8. Скромный образец из коллекции бесплатных веб-шрифтов Ооо§1е

0 УУеЬЕопГз	X +

СО® 1оса1Ьо51/Ехатр1е5/5ес1юп_3/16/ехатр1е_07.Ъип1	:

СапСагеН
Ого1с1 8апз
1псопзо1а1:а

1о1м1ег

ЫоЬПе

^Уапуеппе

Уапопе КаЯеезак

Рис. 16.9. Группа используемых шрифтов Ооо§1е

Перемещения и преобразования

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

В примере 16.8 создается элемент <аю>, который окрашивается, обрамляется и за-
полняется текстом. Затем к нему применяется поворот на 45 градусов, вызываемый
инструкцией в строке 13.

Тгап&1огта11Оп5	X Ц-

С О ® 1оса1Ьоз1:/Ехатр1е5/5ес(1оп_ЗЛ&/ехатр1е_08.Ь* 1 11Епп1	;

Рис. 16.10. Применение к элементу 2В-вращения

Пример 16.8

1.	< ! ЭОСТУРЕ Мт1>

2.	<Мт1 1апд="еп">

3.	<Ьеас1>

4.	<теЕа сЪагзеЕ="иЕГ-8">

5.	<ЫЕ1е>ТгапзГогтаЫопз</-ЫЕ1е>

6.	<зЕу!е>

7.	.Ьох {

8.	ГопЕ-захе :	14рЕ;

9.	ю1сГЫ1	:	ЮОрх;

10.	Ье1дМ	:	ЮОрх;

11.	ЬаскдгоипЬ: уеПом;

12.	ЬогЬег	:	брх зоПЬ Ыие;

13.	ЕгапзГогт : такг1х(1Л 1, -1, 1, 0Л 0); }

14.	</зку1е>

15.	</Ьеас1>

16.	<ЬоЬу>

17.	<сепкег>

18.	<ЬгХЬгХЬгХЬг>

19.	<сНV с!азз=’Ьох’>

20.	ТЫз	Ьох Ьаз Ьееп гоЕаЕеЬ с1оскмтзе Ьу 45 Ьедгеез
21.	</сШу>

22.	</сеп^ег>

23.	</Ьос1у>

24.	</ЪГт1>

Результат выполнения кода показан на рис. 16.10.

Как это работает, будет подробно объяснено в главе 23 «Преобразования 2В».
А затем, когда настанет время изучения ЗЭ-преобразований, в главе 24 «ЗВ и ани-
мация» будет добавлено совершенно новое измерение.

ПехЬох-разметка

ИехЪох-разметка, будучи разработанной в 2009 году, и к 2022 году (на момент на-
писания книги) так и остававшаяся кандидатом на включение в С883, получила
весьма широкую реализацию во всех современных браузерах. В наши дни разра-
ботчики браузеров разбираются в полезных вещах, и стремятся предоставить своим
пользователям и разработчикам новые мощные функции.

Интересно, что идея ИехЪох возникла по мотивам реализации в браузере МохШа
ИгеГох пользовательского интерфейса на основе базовых элементов макета, кото-
рые было легче спроектировать, чем пользоваться простым старым НТМЬ. Этот
интерфейс оказался настолько удачным и гибким, что стал также идеальным кан-
дидатом в инструментарий создания веб-страниц.

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

ПехЬох как отдельный модуль

ИехЪох — не какой-нибудь отдельный новый атрибут или функция, это, по сути,
полноценный модуль, содержащий множество свойств и функций. Он предоставля-
ет еще один способ реализации макетов, который порой основан на родительском
элементе или элементе-контейнере, а порой — на дочернем элементе.

С целью поверхностного ознакомления с тем, чего можно добиться с помощью
ИехЪох-разметки, в примере 16.9 показано, как ИехЪох используется для создания
адаптивного макета без использования атрибута Г1оаъ или розтМоп.
1.	<!ЭОСТТРЕ Мт1>	
2.	<Мт1 1апд="еп">	
3.	<Ъеас1>	
4.	<теЕа скагзеЫ"	иЫ-8">
5.	<ЫЫе>Е1ехЬох</ЫЫе>	
6.	<зЕу1е>	
7.	.рагепЕ {	
8.	ЬоЫег	: зоИс! 1рх Ыаск,
9.	раскНпд	: 5рх;
10.	Ьаскдгоипс!	: геф
11.	сНзр1ау	: Е1ех;
12.	Г1ех-мгар	: мгар;
13.	}	
14.	.сЫ1а {	
15.	ЬоЫег	: зоИс! 1рх Ыаск,
16.	раскПпд	: 10рх;
17.	тагдгп	: 2рх;
18.	Ьаскдгоипс!	: уе11ом;
19.	со!ог	: Ыие;
20.	Гопк-зЕсе	: Збрк;
21.	Еопк-мЫдЫ	: ЬоЫ;
22.	}	
23.	</зку1е>	
24.	</Ъеас1>	
25.	<Ьос1у>	
26.	<скЫ с1азз=’’рагепк">	
27.	<сНу с1азз=’сЫ1с!’>Е1ет 1</сПу>	
28.	<сИу с1азз=’сЫ1с!’>Е1ет 2</сЫл>	
29.	<скЫ с1азз=’сЫ1с!’>Е1ет 3</сЫ>	
30.	</<±Ы>	
31.	</Ьос1у>	
32.	</Ыт1>	

В строках с 26 по 30 этого примера содержится элемент-контейнер <а±у> с именем
класса рагепЕ, а внутри него имеются три дополнительных элемента <аы>, каждому
из которых присвоено имя класса сша. В наборе инструкций С88 контейнера клас-
са рагепЕ все до строк 11 и 12 должно быть знакомо, а вот в них для свойства Ызр1ау
указано значение Пех, а для свойства Пех-^гар — значение Пех. Если бы этих строк
не было, результат выполнения примера выглядел бы вполне ожидаемо, как пока-
зано на рис. 16.11.

Но стоит только применить код из строк 11 и 12, для элементов класса сыы все
резко переменится, и теперь, как показано на рис. 16.12, эти <аы>-элементы всплы-
вают рядом друг с другом, а кроме этого, их размеры уменьшены, чтобы соответст-
вовать их содержимому.
Рис. 16.11. Результат выполнения кода примера 16.9
без использования свойств НехЬох

@ НехЬох	X +

<- С О © 1оса1Ьо51/Ехатр1е5/$есПоп_3/16/е)сагт1р1е_09.111т1	

Рис. 16.12. С установкой свойств НехЬох элементы
теперь всплывают рядом друг с другом

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

Нетрудно представить, что НехЬох-разметка предоставляет гораздо больше воз-
можностей, которые будут рассматриваться в главе 25 «НехЬох-разметка». А для
получения дополнительной информации при желании отслеживать продолжение
развития ИехЪох можно обратиться по следующему официальному 1ЖЕ-адресу:
м3.огд/ТК/сзз-Г1ехЬох-1

Рис. 16.13. Уменьшение ширины окна браузера привело
к перемещению последнего элемента на следующую строку

С88 дпс1

Как и ИехЪох, С88 Сгпб представляет собой не просто отдельную функцию или
атрибут, а еще один полноценный модуль С88. Разница между ними в том, что
ИехЪох предназначен в основном для создания одномерных гибких макетов, а мо-
дуль С88 Сгпб, как это можно себе представить, предназначен для работы со столб-
цами и строками в макете в виде сетки. Опять же, как и в случае с ИехЪох, С88
СггИ исключает необходимость использования атрибута Поаг или розШоп.

Модуль С88 ОгИ также находится в стадии разработки, и его первый черновой ва-
риант был создан примерно в 2011 году разработчиками М1сго8ой, работавшими
над 1п1еше1 Ехр1огег. Да, как ни странно, но из 1Е вышло нечто путное — когда-
нибудь это ведь должно было случиться! Но оставим сарказм, поскольку по со-
стоянию на 2017 год эту концепцию всецело поддержали разработчики всех основ-
ных браузеров, внедрив С88 СггМ в свои продукты, исключение составил браузер
Орега Мни, который в настоящее время не поддерживает (и, по всей видимости, не
планирует поддержку) С88 Опс1.
Но чтобы прямо сейчас получить представление о возможностях данной техноло-
гии, посмотрим на код примера 16.10, где начиная со строки 28 внутри родитель-
ского (рагеп^) <аы>-элемента в строках с 29 по 37 создается макет сетки из девяти
дочерних (сьна) <аы>-элементов.

Пример 16.10		
1.	<!ПОСТЕРЕ Мт1>	
2.	<НЬп1 1апд=”еп">	
3.	<Иеас1>	
4.	Стека скагзеЕ="иЫ-8">	
5.	<ЫЫе>СЗЗ 6г1с1</ЫЕ1е>	
6.	СзЕу1е>	
7.	.рагепЕ {	
8.	ЬоЫег	: зоИс! 1рх Ыаск;
9.	расЕПпд	: 5рх;
10.	Ьаскдгоипс!	: геф
11.	сНзрТау	: дгЫ;
12.	дгЫ-дар	: 5рх;
13.	дг1с1-кетр1аке-со1итпз	: аико аико аико;
14.	ЗизЫГу-сопкепк	: зрасе-еуеп1у;
15.	}	
16.	.сЫ1с! {	
17.	ЬоЫег	: зоИс! 1рх Ыаск;
18.	раскПпд	: 10рх;
19.	тагдгп	: 2рх;
20.	Ьаскдгоипс!	: уе11ом;
21.	со!ог	: Ыие;
22.	Гопк-захе	: Збрк;
23.	Гопк-мЫдЫ	: ЬоМ;
24.	}	
25.	</зку1е>	
26.	</Ъеас1>	
27.	<Ьос1у>	
28.	<с11у с1азз=’’рагепк">	
29.	СсИ? с1азз=’сЫ1с!’>Е1ет	1</(Цу>
30.	СсИ? с1азз=’сЫ1с!’>Е1ет	2</сИу>
31.	СсИ? с1азз=’сЫ1с!’>Е1ет	3</сЫ>
32.	<(±Ы с1азз=’сЫ1с!’>Е1ет	4</аы>
33.	<(Ы с1азз=’сЫ1с!’>Е1ет	5</скЫ>
34.	<сНу с1азз=’сЫ1с!’>Е1ет	6</сИу>
35.	<сНу с1азз=’сЫ1с!’>Е1ет	7</сИу>
36.	<сЫ с1азз=’сЫ1с!’>Е1ет	8</41у>
37.	<сНу с1азз=’скИсГ >Е1ет	9</сИу>
38.	</±Ы>	
39.	</Ьос1у>	
40.	</Мт1>	
Дочернему классу сша указано такое же стилевое оформление, как и в предыду-
щем примере, а вот в стиль родительского класса рагеп^ в строках с 11 по 14 теперь
включены инструкции, касающиеся сетки, чтобы у нее, как показано на рис. 16.14,
были промежутки в 5 пикселей и автоматически назначался размер, соответствую-
щий содержимому, и все это было равномерно распределено в отведенном про-
странстве.

0	х +

<- -> С О ® 1оса1Ьо5(/Ехатр1е5/5есЦоп,3/16/екатр1е	☆ Й- ;

Рис. 16.14. Макет, созданный с помощью С88 Опб

© С55 6пс1	X +

С! О © 1оса1Ьо5(/Ехатр1е5/5есйоп_3...	А :

Е1ет 1 Е1ет 2 Е1ет 3

Е1ет 4 Е1ет 5 Е1ет 6

Е1ет 71 Е1ет 81 Е1ет 9

Рис. 16.15. Макет сетки уменьшился пропорционально ширине окна браузера
Кроме того, как и в случае с ИехЪох, макет С88 Опб, в зависимости от выбранных
разнообразных и многочисленных атрибутов, может быть гибким. В данном при-
мере, как показано на рис. 16.15, при изменении ширины окна браузера сетка будет
плавно растягиваться или сжиматься.

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

Заключение

Из всего сказанного в этой главе должно быть понятно, что особо не афишируемая
масштабная разработка технологии С88 не прекращается. В следующих главах бу-
дет уделено внимание каждой из новых разработок и показаны пути их использо-
вания для выстраивания как можно более привлекательных макетов страниц.
ГЛАВА 17

Селекторы атрибутов С883

Введение

Как известно, селекторы в С88 используются для сопоставления с элементами
НТМЬ, подлежащими той или иной стилизации. В С882 уже имеются селекторы
идентификаторов и классов: # и . (точка), а также универсальный селектор *. Есть
также и селекторы-потомки, размещаемые друг за другом, например зрап еш, и до-
черние селекторы, разделяемые символом «больше, чем», например зрап > еш.

Кроме этого, знак «плюс» (+) позволяет выбрать соседние дочерние элементы, на-
пример зрап + еш, есть также и псевдоклассы, проверяющие происходящее, напри-
мер а:Ьоуег, или выделяющие конкретную часть элемента, например р:Г1гзъ-1еЫ:ег.
И наконец, есть селекторы атрибутов, позволяющие углубиться во внутреннее со-
держимое свойств атрибутов, например а[ЬгеГ = ЧпГо.Мт'], и это тот самый тип
селекторов, который появился в С883 в качестве расширения.

Структура

В этой главе рассматриваются следующие темы:

♦	Краткий обзор использования селекторов С882.

♦	Причины разработки новых селекторов атрибутов С883.

♦	Сведения о приемах поиска и сопоставления любых атрибутов, требующих сти-
левого оформления.

♦	Приемы сопоставления с учетом регистра символов или без его учета.

Цели

Цель главы — дать полное представление об использовании селекторов атрибутов
С883 и показать их возможности и способы применения. Изучение предлагаемого
материала позволит досконально разобраться в порядке применения селекторов
атрибутов и вывести стилевое С88-оформление на новый уровень.
Селекторы атрибутов С88

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

♦	[айг]: выбор элементов с именем аъъг.

♦	[айг = уа1ие]: выбор элементов с именем аъъг, чье значение в точности соответ-
ствует уа1ие.

♦	[айг ~= уа1ие]: выбор элементов по любому слову в строковом значении уа1ие,
соответствующему списку слов в аъъг, разделенных пробелами.

♦	[айг |= уа1ие]: выбор элементов по значениям аъъг, точно соответствующим зна-
чению уа1ие или же точно соответствующим значению уа1ие, и сразу же после
них содержащим дефис.

♦	[айг л= уа1ие]: выбор элементов по значениям аъъг, начинающимся со строково-
го значения, содержащегося в уа1ие.

♦	[айг $= уа1ие]: выбор элементов по значениям аъъг, заканчивающимся строко-
вым значением, содержащимся в уа1ие.

♦	[айг *= уа1ие]: выбор элементов по значениям аъъг, имеющим в своем составе
строковое значение, содержащееся в уа1ие.

♦	[айг орегай)г уа!ие 1]: когда 1 (или I) помещается перед закрывающей скобкой,
значение сравнивается без учета регистра, при этом различия между верхним и
нижним регистром символов игнорируются.

♦	[айг орега€ог уа1ие 8]: когда з (или з) помещается перед закрывающей скобкой,
значение сравнивается с учетом регистра, т. е. уа1ие должно точно соответство-
вать строке, и сравниваемые символы должны соответствовать как по нижнему, так
и по верхнему регистру (пока что, похоже, это работает только в РйсГох).

Селектор по имени атрибута

Разобраться в сути первой пары селекторов нетрудно, поскольку с этими селекто-
рами уже, скорее всего, приходилось сталкиваться и, возможно, даже использовать
их в своих проектах С882, как в примере 17.1, где просто выбирается именованный
атрибут, и в данном случае это элемент <1тд> с атрибутом ММе.

Пример 17.1

1.	<1ЭОСТУРЕ №п!>

2.	<Мт1>

3.	<Иеас1>

4.

5.

<‘ЫМе>Нате А^гНои^е Зе1есЬогз</'ЫМе>

<зРу!е>
6.	1тд[ЫЫе] { ЬоЫег : 5рх зоИс! Ыаск; }

7.	</зку!е>

8.	</Ъеас1>

9.	<Ьос1у>

10.	<сепкег>

11.	<1тд згс='сак.рпд’ ЫЫе=’та1п’>

12.	<1тд згс='сак.рпд’>

13.	</сепкег>

14.	</Ьос1у>

15.	</Ыт1>

В строках 11 и 12 задается одно и то же отображение кошачьих глаз, но только в
строке И применяется атрибут Ш1е. Поэтому, как показано на рис. 17.1, С88-
стиль, указанный в строке 6 помещает в рамку только первое изображение, для ко-
торого указан этот атрибут.

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

Селектор по значению атрибута

Давайте продолжим работу с примером, проверив не только наличие атрибута, но и,
как показано в примере 17.2, значение, примененное к атрибуту, где значение та1п у
атрибута Ш1е есть только у одного элемента <1тд>, и именно оно и будет выбрано.

Пример 17.2

1.	< ! ЭОСТУРЕ Ыт1>

2.	<Ыт1>

3.	<Иеас1>

4.	<ЫЫе>Уа1ие АЫЫЬиЕе Зе1ескогз</ЫЫе>

5.	<зЕу!е>

6.	1тд[ИМе = ’та!п’] { ЬоЫег : 5рх зоИс! Ыаск; }

7.	</зку!е>

8.	</Иеас1>

9.	<Ьос1у>

10.	<сепкег>
11.	<1тд	згс=’саЕ.рпд’	ММе='та1п’>

12.	<1тд	згс='саЕ.рпд’	Ш1е='зесопсГ>

13.	<1тд	згс='саЕ.рпд’>

14.	</сепЕег>

15.	</Ьос1у>

16.	</1гЬгп1>

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

© 7а1ие АПпЬиСе 5е1ес1огз X 4-

ОО® 1оса1Ьо$УЕхатр1е8/5ес11ОП_3/17/ехатр1е02.Мл11 ф Л У :

Рис. 17.2. Здесь опять условию выбора соответствует только первое изображение

Селектор по слову из списка

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

Пример 17.3

1.	< ! ЭОСТУРЕ Мт1>

2.	<Мт1>

3.	<Ъеас1>

4.	<ЫЪ1е>ЭДогс1 ЫзЕ Зе1есЕог</-ЫМе>

5.	<зЕу!е>

6.	р[с!азз ~= ’та!п’] { ЕехЕ-с1есогаЕ1оп : ипс!ег11пе; }
7.	</зку!е>

8.	</Иеас1>

9.	<Ьос1у>

10.	<сепкег>

11.	<р с!азз=’ агМс1е татп 1пкго’>ТЫз 1з кйе НгзЪ рагадгарк</р>

12.	<р с1азз='агМс1е 1пкго’>ТЫз 1з кке зесопс! рагадгарЪ</р>

13.	<р с1азз='агМс1е Ьос1у'>ТЫз 1з кке агМс!е Ьос1у</р>

14.	</сепкег>

15.	</Ьос1у>

16.	</ЪШ1>

В строках с 12 по 13 задаются три элемента <р> с различными именами классов,
среди которых встречаются агЪ1с1е и тпкго, но только для первого элемента в строке
12 используется имя класса та1п. Это означает, что инструкция в строке 6 приведет
к изменению только первого из этих трех абзацев, применив к нему, как показано
на рис. 17.3, подчеркивание.

- СО Ф 1осаЗНо5№атр1е5/5@с11оп_3/17/ехагпр1е_03<Ыт1 ☆ А =

Пиз в 1йе Лт&1 рагацгарЬ

Т1115 15 !Ье 5есоп<1 рага§гарЬ

ТН15 15 гИе агНс!е Ьос1у

Рис. 17.3. Соответствие найдено только в первом абзаце,
текст которого и стал подчеркнутым

Строку 6 можно изменить, чтобы указанное в ней условие соблюдал только эле-
мент в строке 14, задав сопоставление со словом Ьоау, или же чтобы условие со-
блюдалось обоими элементами в строках 12 и 13, задав сопоставление со словом
1ПкГО.

Селектор по дефису

Селектор по дефису аналогичен селектору по значению. Для него должно соблю-
даться соответствие всей строке значения атрибута. Но может также соблюдаться
соответствие и строке, за которой следует дефис. Дело в том, что некоторые значе-
ния свойств зависят от применения дефиса (значения используемого языка, напри-
мер еп-из и еп-ик). С помощью этого селектора можно выбрать все значения, начи-
нающиеся с еп-, задав тем самым соответствие указанию на применение английско-
го языка независимо от национальных вариаций. Именно это и задается в примере
17.4 для ограниченного набора языков.
1.	< ! ООСТЕРЕ Мт1>

2.	<Мш1>

3.	<Ъеас1>

4.	<Е1Е1е>Нуркеп Зе1есЕог</Е1Е1е>

5.	<зку1е>

6.	р[1апд	|= ’еп’] { Ропк-ме1дМ : ЬоЫ;	}

7.	</зку1е>

8.	</Ееас1>

9.	<Ьос1у>

10.	<сепкег>

11.	<р	1апд=’еп-из’>Нож1у. Нош’з уоиг с!ау?</р>

12.	<р	1апд=’дг’ >6икеп Тад ипс! уйе! СезипсИоеиМ </р>

13.	<р	1апд=’еп-ик’>Не11о. ЭДоиЫ уои Ике зоте Ееа?</р>

14.	<р	1апд=’1г’ >Вопзоиг. Соттепк а11ег-уоиз?</р>

15.	</сепкег>

16.	</Ьос1у>

17.	</ЪЕт1>

Здесь соответствие селектору, указанному в строке 6, соблюдается только в строках 11
и 13, поскольку только у них в значении имеется еп-. Поэтому, как показано на
рис. 17.4, полужирным шрифтом выделяются только первый и третий абзацы.

Рис. 17.4. Соответствие найдено только в абзацах,
для которых указан английский язык

Селектор по начальным символам

Если нужно найти соответствие только по нескольким символам, которые могут
быть в начале значения свойства, можно воспользоваться селектором по начальным
символам, показанным в примере 17.5, где в строках с 12 по 15 задаются четыре
гиперссылки, а условию, заданному в строке 7, соответствуют только те из них, ко-
торые указывают на локальный сервер (и начинаются с символов /Ноте).
1.	< ! ООСТТРЕ Мт1>

2.	<Мт1>

3.	<Ъеас1>

4.	<МЕ1е>ЗЕагЕ Зе1есЕог</Е1Е1е>

5.	<зЕу!е>

6.	Ьос1у	{ ГопЕ	: 22рЕ Запз-ЗегИ; }

7.	а[ЪгеР Л= ’/Иоте’] { ЕопЕ-ме1дМ : ЬоМ;	}

8.	</зЕу!е>

9.	</Ееас1>

10.	<Ьос1у>

11.	<сепРег>

12.	<а	ИгеГ=’ЪЕЕрз://доод1е.сот’	>Соод1е</а><Ьг>

13.	<а	ЪгеЕ=’/Еоте/раде1’	>Раде 1</ахЬг>

14.	<а ЪгеЕ=’кккрз://ГасеЬоок.сот’>ЕасеЬоок</аХЬг>

15.	<а	кгеЕ=’/коте/'	>Ноте Раде</а><Ьг>

16.	</сепкег>

17.	</Ьос1у>

18.	</ккт1>

В строке 6 задается выделение текста более крупным шрифтом, чтобы он стал за-
метнее, и результат загрузки этого примера в браузер показан на рис. 17.5.

© 5е1ес1ог	X +

С О ® 1оса1Ьо5УЕхатр1е5/5есиоп_3/17/е'Хатр1е_05.Ыгп1 (Е? ф ★	:

6оод1е

Раде 1

ЕасеЬоок

Ноте Раде

Рис. 17.5. Выделение ссылок на локальные страницы

Селектор по конечным символам

Порой может потребоваться найти соответствие конечным символам строкового
значения атрибута, что можно сделать, как в примере 17.6, применив селектор по
конечным символам и добившись выделения только тех ссылок, которые указыва-
ют на домены . огд.
1.	<! ООСТТРЕ Мтп1>

2.	<Мт1>

3.	<Ъеас1>

4.	<к!к1е>Епс1 Зе1есЪог</ИМе>

5.	<зку!е>

6.	Ьос1у	{ Гопк	: 22рк Запз-ЗегИ; }

7	.	а[ЪгеГ $= ’.огд’ ],

8.	[ЪгеГ $= ’.огд/’] { Гопк-меГдкк : ЬоЫ;	}

9.	</зку!е>

10.	</Иеас1>

11.	<Ьос1у>

12.	<сепкег>

13.	<а	ЪгеГ=’Ъккрз://доод1е.сот’	>(Зоод1е</а><Ьг>

14.	<а	ЪгеГ=’Ъккрз://м1к1ресПа.огд’	>Шк1ресПа</аХЬг>

15.	<а	ИгеГ=’кккрз://ГасеЬоок.сот’	>ЕасеЬоок</аХЬг>

16.	<а	ЪгеГ=’Ъккрз://шм. асапп.огд/’ >1сапп</аХЬг>

17.	</сепкег>

18.	</Ьос1у>

19.	</Ъкт1>

Как и в предыдущем примере, в четырех строках с 13 по 16 задаются гиперссылки
на различные веб-ресурсы, а код в строке 6 предназначен просто для придания ото-
бражению повышенной четкости. А вот код в строках 7 и 8 интересен своей новиз-
ной. В строке 7 предназначение оператора $= (селекции по конечным символам) не
вызывает сомнений и приводит к выбору любого строкового значения с окончани-
ем . огд. А вот далее стоит запятая, за которой задается еще одно выражение соот-
ветствия. Тем самым демонстрируется возможность задания сразу нескольких ус-
ловий селекции путем простого разделения выражений запятой и указания через
запятую любого нужно количества таких выражений.

@ Еп^ 5е1ес1ог	X +

<- СО® 1оса1Ьо5Г/Ехатр1б5/5ес(юп_3/17/ехашр1е_рб.Ыт1 й Л :

(Зоод1е

УУ!к|ресНа

ЕасеЬоок

1сапп

Рис. 17.6. Выделение только тех веб-доменов, которые оканчиваются на .ог§ или .ог§/

В данном случае второе выражение было необходимо по той причине, что иногда
копирование гиперссылки выполняется из адресной строки браузера, что часто
приводит к наличию в конце 1ЖЕ-адреса символа /, например .огд/. Это вполне
приемлемо, но, чтобы выбирались и такие гиперссылки, указывается второе вы-
ражение, показанное в строке 8. Результат загрузки этого примера в браузер — на
рис. 17.6.

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

Глобальный селектор

Если просто нужно проверить строку значения на наличие где-либо в ней произ-
вольной последовательности символов, можно, как показано в примере 17.7, вос-
пользоваться глобальным селектором. Здесь в строках с 14 по 17 задаются гипер-
ссылки, в строке 16 задается ссылка на локальную папку с именем рсИз, а в стро-
ке 15 — просто ссылка на локальную папку.

Пример 17.7

1.	< ! ЭОСТТРЕ Мт1>

2.	<Мт1>

3.	<Ъеас1>

4.	<-ЫМе>С1оЬа1 8е1еског</к1к1е>

5.	<зЕу!е>

6.	Ьос1у { Гопк : 16рЕ Агаа!; }

7.	а[ЬгеЕ *= 'рсИ'] {

8.	Ьаскдгоипс! : иг! (’рсИ-асоп.рпд’) по-гереак;

9.	раскПпд-1еЕк : 16рх; }

10.	</зку!е>

11.	</Иеас1>

12.	<Ьос1у>

13.	<и!>

14.	<И><а	ИгеГ=’Ы1Ерз://доод1е.сот'	>Соод1е</ах/И>

15.	<11><а	ЪгеГ='/Ъоте/рсИз/’	>Воситепкз</аХ/И>

16.	<И><а кгеЕ=’кккрз: //ГасеЬоок. сот’>ЕасеЬоок</аХ/И>

17.	<Иха	ИгеГ=’/коте/’	>Ноте Раде</аХ/И>

18.	</и!>

19.	</Ьос1у>

20.	</ккт1>

В строке 6 просто задается увеличение размера текста, а вот в строках с 7 по 9 —
кое-что, выглядящее намного эффектнее. Сначала, если где-либо в любом атрибуте
ЬгеГ элемента <а> обнаруживается последовательность символов реи, то в строках 8
и 9 для такого элемента задается неповторяющееся фоновое изображение в виде
значка, загружаемое из файла раг-1соп.рпд, а затем той строке, где обнаружено та-
кое значение атрибута, задается отступ вправо от значка в 16 пикселей. В конечном
итоге все 1ЖЬ-адреса с символьной последовательностью рс!Г в произвольном месте
получают, как показано на рис. 17.7, небольшой значок, помещаемый слева от них.

0 СЬЬз] 5е1ёс1ог	X +	□	X
0 п	© 1оса1Ьо5УЕхатр!е5/5есЙоп_3/17/ехатр1е_07.Н1т1 &	* :

•	Соод1е

•	‘Роситегйз

•	ЕасеЬоок

•	Ноте Раде

Рис. 17.7. иКЬ-адреса, имеющие отношение к файлам РОГ,
имеют прикрепленный к ним значок

Флажок невосприимчивости к регистру символов

Предыдущий пример, конечно, интересный, но не без потенциальных изъянов.
В нем задается соответствие только для последовательности символов рат, но не рое
или любой другой комбинации, не полностью составленной из символов нижнего
регистра. Давайте представим, что вместо строки 7 из предыдущего примера ис-
пользуется другая строка, в результате чего получается код, показанный в приме-
ре 17.8, где искомое соответствие — строчная последовательность рое с символами
в верхнем регистре.

Пример 17.8 (показана только измененная строка):

7.	а[ЪгеЕ *= ’РРЕ’] {

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

Пример 17.9 (показана только еще раз измененная строка):

а[ЪгеЕ *= ’РОЕ’ 1] {

Результат такого изменения — возврат к виду, показанному на рис. 17.8.

И всего-то перед закрывающей квадратной скобкой был поставлен символ 1 (кото-
рый также можно указывать в верхнем регистре — I), чего оказалось достаточно,
чтобы выключить восприимчивость к регистру символов. Это означает, что будет
найдено соответствие как прежнему строковому значению раг, так и таким вариан-
там, как рм или раг, и все они, в силу невосприимчивости к регистру символов, бу-
дут эквивалентны друг другу.

© Сззе 5епз|Нуе 5е1ес1сг X +

с О © 1оса1Ьо51/Ехвп1р1е5/$есиап_3/17/ехатр1е_0В.111пп1 Ф А :

•	(Зоод1е

•	Роситеп15

•	ЕасеЬоок

•	Ноте Раде

Рис. 17.8. Когда выражение восприимчиво к регистру символов,
соответствий найдено не будет

Флажок восприимчивости к регистру символов

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

Но бывает так, что возникает желание принудительно обеспечить поиск соответст-
вия с учетом регистра символов, и в С88 уровня 4 есть спецификация, предусмат-
ривающая поддержку флажка з (или з), но проведенные автором книги исследова-
ния показали, что на момент написания книги этот флажок поддерживался только
браузером РпеГох.

В примере 17.10 задаются три элемента <с11у>, в двух из которых в значениях атри-
бутов Ш1е используется слово эту, составленное из символов в верхнем регистре, а
в среднем элементе в значении этого атрибута имеется слово сШ/Ыез.

Пример 17.10

1.	< ! РОСТЕРЕ Мтп1>

2.	<Мт1>

3.	<Ъеас1>

4.	<-ЫМе>Еогсес1	Сазе Зепз1Му1^у</ММе>

5.	<зОу!е>

6.	сПу[Г1Г1е *= "В1У" з] { Ьаскдгоипс!: Игле; }

7.	</зСу!е>

8.	</Иеас1>

9.	<Ьос1у>

10.	<сИу Ш1е='ТЫз 13 а 017 е1етепС’>

11.	Е1гзС зесЫоп
12.	</с11у>

13.	<сИу Ш1е='ТЫз	е!етепЕ	сИуЫез	ЕАе	раде’>

14.	А сНуМег

15.	</61у>

16.	<сИу Ш1е='ТЫз	13	апоШэг	Э17	е!етепЕ’>

17.	Е1па1 зесМоп

18.	</с11у>

19.	</Ьос1у>

20.	</ЬШ1>

При включенной невосприимчивости к регистру символов найденное соответствие
017 будет приводить к стилизации всех трех элементов, поскольку последователь-
ности 017 и будут считаться эквивалентными, но (по крайней мере, в браузере
ГпеГох) только два экземпляра с символами в верхнем регистре соответствуют гло-
бальному, чувствительному к регистру символов выражению, заданному в строке 6,
о чем свидетельствует изображение на рис. 17.9, где соответствующие выбору эле-
менты имеют фон цвета лайма.

X

Рогсед Сазе 5еозИм1у

□ X

О ОО 1оса1Ьо5</Г

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

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

Заключение

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

Создание фона

Введение

Создание фона — важное новое дополнение в С883. Возможности новых функций по-
зволяют не привязываться к одному фоновому цвету или изображению и использовать
сразу несколько рисунков и накладывать на них элементы множеством способов.

Атрибут ЬоЫег-Ьох позволяет работать с внешним краем границы, атрибут раскИпд-
Ьох — только до края области отступов, а атрибут соп^еп^-Ьох — только до края об-
ласти содержимого страницы. Кроме этого, на основе их значений можно устано-
вить области отсечения или определить, где следует разместить источник контента.

И наконец, с помощью С88 можно не только выбирать, где размещать содержимое,
но и определять его отношение к фону и порядок взаимодействия с ним. Эта тема,
поскольку в ряде примеров используются литералы шаблонов, очень хорошо под-
ходит к демонстрации приемов размещения кода НТМЬ в 1ауа8спр1-разделе доку-
мента; они позволяют вставлять переменные непосредственно в НТМЬ-код. Благо-
даря этому можно будет понять, как вывести вашу веб-разработку на совершенно
иной уровень.

Структура

В этой главе рассматриваются следующие темы:

♦	Изучение различных типов доступных фонов.

♦	Освоение способов использования для кода НТМЬ литералов шаблонов.

♦	Изменение способа отображения фона в элементе.

♦	Изучение порядка использования градиентов вместо сплошного фона или изо-
бражений.

Цели

В этой главе подробно рассматриваются все новые функции создания фона, дос-
тупные в С883, включая использование изображений и градиентов. Изучив предла-
гаемый материал, вы сможете стилизовать фон любого желаемого элемента множе-
ством интересных способов. Попутно можно будет открыть для себя возможности
применения шаблонов с использованием 1ауа8спр1.

Обрезка и начало фона

В С88 уже имелась поддержка фонов, но только в пределах областей блочной мо-
дели. Теперь же, в С883, она входит с двумя новыми свойствами: Ьаскдгоипа-сПр и
Ьаскдгоипа-огтдтп.

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

♦	Ьогйег-Ьох: относится к внешнему краю границы элемента

♦	рай(Ип§-Ьох: относится к внешнему краю внутреннего отступа элемента

♦	соп1:еп1>Ьох: относится к внешнему краю области содержимого элемента

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

Литералы шаблонов

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

Знакомство с такими началами 1ауа8спр1, как переменные и массивы, уже состоя-
лось. Нетрудно вспомнить, что им можно присваивать числовые или строковые
значения (а также значения многих других типов). В примере 18.1, начиная со
строки 11, двум переменным, пате и ММе, присваиваются, соответственно, строко-
вые значения КоЫп И ЭДеЬ БеуеХорег.

Пример 18.1

1.	<! ЭОСТУРЕ №п1>

2.	<Мт1>

3.	<Иеас1>

4.	<ММе>ЗРг1пд СопсаРепаМоп</ММе>

5.	</Иеас1>

6.	<Ьос1у>

7.	<Ь1>

8.

<оиРриР 1с1=’оиРриР’></оиРриР>
9.  10.  11.  12.  13.  14.  15.  16.  17.  18.  19.	</Ь1>  <зсг!рЕ>  пате	= ’ КоЫп ’  М11е	= ’ИеЬ Эеуе1орег’  зЕгапд = ’Му пате 1з ' + пате  зЕгапд += ’ апс! I ат а ’ + М11е  с!оситепЕ. деЕЕ1етепЕВу1с! (’ оиЕриЕ ’) . аппегНТМЪ = зЕгапд  </зсг1рЕ>  </Ьос1у>  </ЪЕт1>

Затем в строках 13 и 14 с помощью оператора + эти значения переменных объеди-
няются в более длинную строку. В 1ауа8спр1 этот оператор при использовании со
строками приводит к их объединению. В строке 13 сочетанием присваивания и
конкатенации создается первая половина длинной строки. А в строке 14 использу-
ется оператор += , представляющий собой сокращенный способ добавления в конец
предыдущей строки.

Например, вместо использования выражения зЕг1пд1 = зЕг1пд1 + зЕг1пд2 можно вос-
пользоваться более короткой формой записи зЕг1пд1 += зЕг1пд2. Затем полученный
результат вставляется в НТМЬ-элемент <оиЕриЕ>, имеющий идентификатор ои^рив.
Это делается в строке 16 с помощью инструкции, которая уже встречалась в ана-
логичных местах книги. Результат загрузки этого документа в браузер показан на
рис. 18.1.

Рис. 18.1. Объединение и отображение строки средствами 1ауа8спр1

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

Когда строка заключается в обратные апострофы, 1ауа8спр1 получает команду вы-
числить любое содержимое внутри выражения ${...}, и заменить выражение вычис-
ленным результатом. Пример 18.2 — переделка предыдущего примера.
Пример 18.2

1.	< ! ООСТТРЕ Мт1>

2.	<Мт1>

3.	<Ъеас1>

4.	<Е1Е1е>Тетр1аЕе ЫЕега1з</ММе>

5.	</Ееас1>

6.	<Ьос1у>

7.	<Ы>

8.	Соикрик 1с1=’оиЕриЕ’></оиЕриЕ>

9.	</Ь1>

10.	<зсг!рк>

11.	пате = ’КоЫп’

12.	М11е = ’ 1лГеЬ Беуе1орег’

13.

14.	с!оситепЕ.деЕЕ1етепЕВу1с1(’оиЕриЕ’) ЛппегНТМЪ	=

15.	'Му пате 1з ${пате} апс! I ат а ${Ш1е}'

16.	</зсг1рЕ>

17.	</Ьос1у>

18.	</ЪЕт1>

Присмотревшись к строке 15, можно увидеть, что строка, вставляемая в НТМЬ-код
элемента <оиЕриЕ>, заключена в пару одиночных обратных апострофов, а имена двух
переменных, пате и Ш1е, помещены в выражения ${...}, в результате чего отобра-
жаемый результат идентичен показанному на рис. 18.1. Мало того, что это простая
строка, которая не требует пояснений (если уже известно, что такое литералы шаб-
лонов), она делает ненужными строки 13 и 14 предыдущего примера. Короче гово-
ря, получился готовый НТМЬ-шаблон для работы с любыми значениями, которые
могут содержаться в этих переменных.

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

Использование свойства ЬаскдгоипсЯ-сНр

Завершив изучение краткого руководства по шаблонам, давайте расширим свои
познания в создании фона, изучив применение атрибутов Ьаскдгоипа-сИр и
Ьаскдгоипа-ог1д1п. Первый из них указывает, следует ли игнорировать (не показы-
вать) фон, если он появляется либо в области границы, либо в области внутреннего
отступа элемента. Он поддерживает три ранее рассмотренных значения: ЬоЫег-Ьох,
раскИпд-Ьох И сопЕепЕ-Ьох.
Например, следующее указание гласит, что фон должен отображаться во всех час-
тях элемента вплоть до внешнего края его границы:

Ьаскдгоипс1-с11р:Ьогс1ег-Ьох;

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

Ьаскдгоипс1-с11р: раскП пд-Ьох;

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

Ьаскдгоипс1-с11р: сопкехк-Ьох;

Атрибут Ьаскдгоипа-сИр в равной степени применяется как к цветовой настройке
фона, так и к фоновым изображениям.

Использование свойства ЬаскдгоипсЬопдт

Указать смещение от верхнего левого угла элемента фонового изображения можно
как в сочетании со свойством ЬаскдгоипсЬсИр, так и без него. Это делается с помо-
щью атрибута Ьаскдгоипа-огтдтп, в котором также поддерживаются три ранее опи-
санных значения: ЬоЫег-Ьох, расШпд-Ьох И сопкепк-Ьох.

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

Ьаскдгоипс1-ог1д1п: Ьогс1ег-Ьох;

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

Ьаскдгоипс1-ог1д1п: раскПпд-Ьох;

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

Ьаскдгоипс1-ог1д1п: сопкепк-Ьох;

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

Совместное использование обрезки
и начала фона

Разобравшись с тем, как работать с исходными изображениями и обрезать фоновые
изображения, нужно посмотреть, как эти два свойства работают вместе во всех
возможных комбинациях. Всего есть девять комбинаций, составляемых из трех
значений, поддерживаемых при обрезке, и тех же трех значений, поддерживаемых
при задании начала фона.
Все они объединены в примере 18.3, но вместо использования девяти отдельных
НТМЬ-наборов для отображения различных комбинаций, что сделало бы документ
слишком длинным и многословным, в нем для краткости используется массив (ко-
торый, если вспомнить, представляет собой простую последовательность перемен-
ных с доступом по числовому значению индекса) и литералы шаблонов.

Пример 18.3

1.	<ЮОСТУРЕ Ькт1>	
2.  3.  4.	<ккт!>  <Ьеа6>  <к1к1е>Васкдгоип6 СИр	апб Ог1д1п</к1к1е>
5.  6.	<зку!е>  . оик { Ьогбег	:	Зрх зоИб Ыаск;
7.	Ноак	:	1екк;
8.	тагдкп	:	0 20рх 20рх 0; }
9.	.1п { Гопк	:	Ьо16 12рх топозрасе;
10.	Ьогбег	:	4рх боккеб геб;
11.	Ипе-ЬекдЬк :	1.25;
12.	кехк-аИдп :	сепкег;
13.	Ыбкк	:	132рх;
14.	ЬекдЬк	:	132рх; }
15.	.кхк { тагдкп-кор :	75% }
16.	.Ьох { Ьаскдгоипб :	иг1 (’Ьох.зрд’) Ите кор 1екк по-гереак;
17.	со1ог	:	дгееп;
18.	Ьогбег	:	20рх базкеб Ыие;
19.	раскПпд	:	20рх;
20.	НбкЬ	:	140рх;
21.	Ьекдкк	:	140рх; }
22.  23.  24.  25.	</зку!е>  </Ьеаб>  <Ьобу>  <оикрик 16='оикрик’></оикрик>	
26.  27.	<зсг1рк>  аккг = [’Ьогбег-Ьох’,	. 1 раскИпд-Ьох1, 1 сопЬегЛ-Ьох' ]
28.  29.	ког (х = 0 ; х < 3 ;	++х) {
30.	ког (у = 0 ; у < 3	; ++у) {

31.

32.

33.

34.

35.

36.

37.

38.

39.

40.

боситепк. декЕ1етепкВу16 (’ оикрик ’) . тппегНТМЪ +=

<61V с1азз=’оик’>

<61V с1азз=’Ьох’

зку1е=’Ьаскдгоип6-сИр : ${аккг[х]};

Ьаскдгоипб-огкдкп : ${аккг[у]}’>

<61V с1азз=’1п’>

<61V с1азз=’кхк’>

сИр:${аккг [х] }<Ьг>

огкдкп:${аккг[у]}

</6Ы>
41.

42.

43.

</сНу>

</с!1у>

</с!1у>'

44.	}

45.	}

46.	</зсг1р^>

47.	</Ьос1у>

48.

Результат запуска кода этого примера должен выглядеть, как показано на рис. 18.2.

Рис. 18.2. Все девять вариантов обрезки фона и выбора начала координат

Чтобы объяснить происходящее, понадобится девять экземпляров элементов, у ка-
ждого из которых имеется внешняя граница, внутренний отступ и содержимое. За-
тем, чтобы увидеть, как изображения границ (и, конечно же, цветовые установки)
применяются в каждой комбинации, к элементу применяется фоновый цвет, а в фон
загружается файл изображения с именем Ьох.^рд.
В примере, начиная со строки 6, создается набор указаний для элементов класса
оиъ, предписывающих наличие сплошной черной 3-пиксельной границы для каждо-
го из девяти элементов, размещаемых рядом друг с другом, а для их разделения
применяется внешний отступ.

Начиная со строки 9, для класса 1п устанавливается внутренний элемент с красной
пунктирной рамкой толщиной 4 пикселя, задаются размеры и стили для текста,
чтобы при выполнении кода примера в каждом из девяти элементов присутствова-
ло четкое пояснение. Указания для класса ъхъ в строке 15 обеспечивают отображе-
ние текста в нужном месте — на 75% ниже позиции области содержимого.

И в завершение раздела <зку1е> класс Ьох, установки для которого начинаются в
строке 16: это место, где фоновое изображение загружается в верхний левый угол
того места, о котором чуть позже будет объявлено в атрибуте Ьаскдгоипа-огтдтп; для
фона устанавливается цвет лайма, а для текста — зеленый цвет. Одновременно с
этим создается внутренний отступ в 20 пикселей, чтобы можно было видеть, что
происходит внутри него, и назначаются подходящие размеры.

Раздел сценария ^уаЗспр(

Здесь в строках 29 и 30 с использованием переменных циклов х и у, для каждой из
которых задается последовательный перебор значений в диапазоне от 0 до 2, соз-
даются два цикла, причем второй цикл вкладывается в первый. Значения перемен-
ных цикла х и у используются в качестве индексов массива аккг [ ], объявленного в
строке 27, для извлечения содержащихся в нем строковых значений.

Затем в строках с 32 по 43 следует блок НТМЬ-кода, заключенный в символы об-
ратных апострофов. Первый обратный апостроф находится в конце строки 31, а
составляющий ему пару второй — в конце строки 43. Внутри этих обратных апост-
рофов находится стандартный НТМЬ-код плюс четыре экземпляра литералов шаб-
лона. Если посмотреть на выражение ${аккг[х]} в строке 34 и выражение ${аккг[у]}
в строке 35, можно понять, что они просто извлекают значения атрибутов из масси-
ва аккг [ ] для девяти возможных комбинаций при разных значениях х и у.

Значения в переменной у служат для установки Ьаскдгоипа-сПр в ЬоЫег-Ьох в первой
строке отображаемого вывода, в расШпд-Ьох во второй и в сопкепк-Ьох в третьей. Это
делается путем применения значения, полученного из аъъг[], непосредственно из
кода НТМЬ к принадлежащему элементу атрибуту зку1е.

В то же самое время значения в переменной х приводят к установке Ьаскдгоипа-
огадап каждого столбца В ЬоЫег-Ьох ДЛЯ первого, расШпд-Ьох ДЛЯ второго И сопкепк-
Ьох для третьего элемента, и все это повторяется для следующих двух строк. При
каждом проходе этой пары циклов в строке 31 результат просто добавляется к
внутреннему НТМЬ-коду элемента <оикрик>, поэтому отображение результата и по-
является на экране.

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

Код НТМЬ в строках с 37 по 40 для получения визуальной картины примера не иг-
рает абсолютно никакой роли, но он выводит текст, поясняющий, какие значения
атрибутов были применены к каждому элементу, поэтому, чтобы картина с первого
взгляда еще больше прояснилась, был смысл немного усложнить код.

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

ф ОеуТоо1$ - 1оса1Но$^Ехатр1е5/$ес1юп_3/18/ехатр1е-03.1гПт1	—	□ X

Сн б~1 Е!етепГ5 Соп5о!е Кесогйег А 5оигсе$	РеИогтапсе Метогу »	$	;

ЕЙ О (ор ▼ О ГШег _	ОеГаиН 1еуе1$ Т Мо 1$$ие5	$

<сНу с1а55«"оиС">
<сНу с1а55="Ьохм 51у1е="Ьаск8гоипд-с11р : Ьогдег-Ьох;
Ьаск§гоипд-ог1§1п : Ьогс1ег-Ьох">
«Ну с1а«5«"1п*>
«Ну с1а55="1х1”>
с11р:Ьогс!ег-Ьох<Ьг>
ог±е1п:Ьогбег-Ьох
</<Ну>
</Й1У>
</Ыу>
</сНу>
<сНу с1а55=“'ои1'*>
«Ну с1а55-"Ьох" 5*у1е="Ьаскегоипс1-с11р : Ьогйег-Ьох;

Ьасквгоипд-ог1й1п : рад<Нле-Ьохм>
<сНу с1а55="1п">
«Ну с1а55=“1хГ">
с11р:Ьогс1ег-Ьох<Ьг>
ог181п: радсНп^-Ьох
</<Ну>
</сНу>
</(Ну>
с/(Ну>
«Ну с1азь=“ои1“>
<(Ну с1а&5="Ьох" 5Лу1е="Ьаск$гоип(1-сИр : Ьогс1ег-Ьах^
Ьаск^гоипс1-ог1^1п : ссп1:епГ-Ьох“>
<сНу с1а55=“1п">
<41у с1а5ь=‘Тхг">
сНр; Ьог(1ег-Ьох<Ьг>
о гп ; со п!еп4-Ьох
</сНу>
</Лу>
</сНу>
</Лу>
«Ну с1а55="оиг">	Т

Рис. 18.3. Просмотр созданного НТМЬ-кода в консоли

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

Кстати, если хотите увидеть, как выглядит тот самый только что созданный НТМЬ-
код и сколько было сэкономлено на размере документа и отсутствии повторяю-
щихся строк, можете вставить следующую инструкцию непосредственно перед за-
крывающим оператором </зсг1рЕ> в строке 46, а затем просмотреть вывод, открыв
консоль разработчика:

сопзоЕе.1од(боситепЕ.деЕЕ1етепЕВу1с1 (’оикрик’).тппегНТМЪ)

Результат должен выглядеть приблизительно так, как показано на рис. 18.3.

Особо заинтересованные могут скопировать код из консоли и вставить его взамен
элемента <оикрик>, а затем удалить (теперь ненужный) раздел <зсг1рк>, и убедиться,
что результат будет таким же, как показано на рис. 18.2, но достигнут он будет за
счет создания излишне длинного документа из 125 строк по сравнению с 48 стро-
ками, имеющимися в примере 18.3. Прилагаемый бесплатный архив файлов приме-
ров, чтобы не приходилось заниматься набором текста на компьютере, также вклю-
чает альтернативную версию примера.

Размер фона

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

Ьаскдгоипс1-з1хе : ЮОрх

Ьаскдгоипс1-31хе : 130рх 90рх

Первая инструкция установит размеры фона 100 х 100 пикселей, а вторая—130 х
90 пикселей. В примере 18.4 создаются <с11у>-элементы, и в каждый из них загружа-
ется одно и то же фоновое изображение, но при этом используются разные значе-
ния атрибута Ьаскдгоипс1-з1хе.

Пример 18.4		
1.	<!ЭОСТУРЕ Мт1>	
2.	<ккт!>	
3.	<Ъеас1>	
4.	<к!к1е>Васкдгоипс1 51хе</кйк1е>	
5.	<зку!е>	
6.	.Ьаскдгоипс! { Ьаскдгоипс!	: иг! (’ райпкйпд. рпд ’)
7.		дгееп сепкег по-гереак;
8.	со!ог	: мЫке;
9.	и!с1кН	: 150рх;
10.	кетдИк	: 150рх;
11.	Гопк	: ЬоЫ 16рк запз-зегйк;
12.	ЬехЬ-аИдп	:		: сепкег;
13.		ЬогЬег	:	: зоЫЬ Ыаск 2рх;
14.		Г1оаЬ	:	: 1еЫ;
15.		тагдап	:	: 20рх;	}
16.	#Ьох1	{ ЬаскдгоипЬ-захе :	: 100рх;	}
17.	#Ьох2	{ ЬаскдгоипЬ-заге :	: 140рх 70рх; }
18.	#ЬохЗ	{ ЬаскдгоипЬ-захе :	: 50%;	}
19.	#Ьох4	{ ЬаскдгоипЬ-захе :	: 100%;	}
20.	#Ьох5	{ ЬаскдгоипЬ-заге :	: 100% 100%;	}
21.	</зку!е>		

22.	</Иеас1>

23.	<Ьос1у>

24.	<скЫ	с1азз='ЬаскдгоипсГ	1с1=’Ьох1'>Вох	1</сЫл>

25.	<скЫ	Ыазз=’ЬаскдгоипсГ	1с1= ’Ьох2 ' >Вох	2</сИ?>

26.	<скЫ	с1азз='Ьаскдгоипс1’	1с1= ’ ЬохЗ ' >Вох	3</скЫ>

27.	<±Ы	с1азз='ЬаскдгоипсГ

28.	зку1е=Ы1ЫН: ЗООрх’ 1Ь=’Ьох4'>Вох 4</сИу>

2 9.	<сЫ с!аз з=' ЬаскдгоипЬ ’

30.	зку1е=Ы1ЫЬ: 880рх’ 1Ь=’Ьох5’>Вох 5</ЬЫ>

31. </ЬоЬу>

32.	</Ыт1>

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

Для первых двух идентификаторов Ьох1 и Ьох2 в строках 16 и 17 задаются размеры
соответственно 100 х 100 пикселей и 140 х 70 пикселей. Затем в строках 24 и 25 в
разделе <ЬоЬу> задается отображение двух элементов, имеющих эти идентификаторы.
Для остальных трех идентификаторов ЬохЗ, Ьох4 и Ьох5 в строках с 18 по 20 исполь-
зуются процентные значения 50, 10 о, а затем юо на 10 о процентов, а отображение
элементов с этими идентификаторами задается с 26 по 30, где для четвертого и пя-
того блоков непосредственно в НТМЬ задается принудительное изменение ширины
элемента, чтобы проиллюстрировать эти эффекты в элементах неквадратной формы.

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

Но взгляните на четвертый блок, где к атрибуту размера фона применяется только
одно значение 100%, устанавливающее ширину на ширину элемента, и поэтому
высота изображения также была установлена на значение той же ширины (по-
скольку было предоставлено лишь одно значение), и получается, оба измерения
должны иметь одинаковую протяженность. А вот в пятом блоке размер изобра-
жения был полностью изменен в обоих измерениях, поскольку значения 100%
заданы как для ширины, так и для высоты, и они должны изменяться независимо
друг от друга.
0 Васкдгаипй	х +

-> С О О 1о«1Ко51/Еедтр1е&/5ес»юп_3/18/ехэтрк-04.1Ц|1п1	Ц ☆ Ж 01 =

Рис. 18.4. Фоновые изображения при использовании
множества различных значений размеров фона

Использование градиентов

В С88 имеется широкий спектр доступных вариантов цветового оформления, в чем
еще предстоит убедиться при изучении главы 21 «Цвета и прозрачность», а пока
давайте посмотрим на ряд способов их применения к элементам фона. В примере 18.5
приведен отрывок из шекспировской пьесы «Как вам это понравится», для которо-
го используется фоновый линейный градиент, плавно переходящий от синего цвета
вверху к красному цвету внизу.

Пример 18.5

1.	< ! ЭОСТУРЕ Шп1>

2.	<Мт1>

3.	<Ьеас!>

4.	<Е1Е1е>Васкдгоипс! Ыпеаг 6гасПепк</к1к1е>

5.	<зку!е>

6.	.Ьдгоипс! { ЬаскдгоипсЫтаде : Ппеаг-дгасПепк (Ыие, гес!); }

7.	#диоке { со!ог	: мМке;

8.	раскПпд	: Юрх;

9.	Еопк	: Ьо1с! 28рк запз-зегН;	}

10.	</зку1е>

11.	</кеас!>

12.	<Ьос!у>

13.	<с11у с1азз=’Ьдгоипс!’ 1с!='диске’>

14.	АН кке жэг1сГ з а зкаде,

15.	Апс! а!1 кЬе теп апс! мотеп теге!у р!ауегз.
16.	Ткеу Науе Гкетг ехпЛз апс! Гйегг епГгапсез,

17.	Апс!	опе тап 1п	Ыз Мте р!ауз	тапу рагГз,

18.	Н1з	асГз Ьеапд	зеуеп адез.

19.	</скпл>

20.	</Ьос1у>

21.	</ИГт1>

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

0 Васкдгоипс! Глеаг бга^ет X +
СО® 1оса1Ьо5УЕхатр:1е5/5ес11оп_ЗЛ8/екап1.р1е-05.|1ПпГ Н? ф	

АН (Не ууоНсГз а з(аде, Апс1 а11 (Ье теп апс!
\л/отеп теге1у р1ауегз. ТЬеу Ьауе (Ье1г ехИз
апс! (Ье1г еп(гапсез, Апс! опе тап т Ыз (!те
р1ауз тапу раг(з, Н1з ас(з Ьетд зеуеп адез.

Рис. 18.5. Элемент с линейным градиентом фона

В этом примере для элементов с идентификатором диоге в строках с 7 по 9 задается
стиль, пригодный для наложения на темный фон. В строке 6 задается стилевое
оформление класса с именем Ьдгоипа, благодаря которому для текста, указанного в
строках с 13 по 19, создается линейный фон. Путем простого изменения кода стро-
ки 6 этого примера (показан в примере 18.6) направление течения градиента изме-
няется, и он перетекает слева направо.

Пример 18.6 (только настройки Ьдгоипф:

.Ьдгоипс! { Ьаскдгоипс1-1таде: Ппеаг-дгасНепк (ко гадИк, Ыие, гес!); }

0 Уегг!са1Ьлеаг 6 гасНет	х +

<- СО © 1оса1Ьа5К/Ехатр.1е5/5ес1юп_ЗЛ8/ехат.р1е-0б.Ыт1	й Л- 

АП (Ье ууоНсГз а з(аде, Апс! а11 (Ье теп апс1
ууотеп теге1у р!ауегз. ТЬеу Ьауе (Ьек ехКз
апс! (Ье!г еп(гапсез, Апс1 опе тап !п Ыз (1те
р!ауз тапу раг(з, Н1з ас(з Ьетд зеуеп адез.

Рис. 18.6. Градиент переключается на перетекание слева направо
Результат выполнения кода этого примера показан на рис. 18.6.

Используя этот прием, для ъо можно применить любую комбинацию с направле-
ниями потока вверх, вниз, влево и вправо (ъор, Ьоъъот, 1еП и г1дьъ), заставляя гради-
енты течь во всех восьми основных направлениях стрелки компаса, включая диаго-
нальные градиенты. А если понадобится более высокая точность, направление по-
тока градиента вместо инструкции ко г±дм или другой какой-либо инструкции
можно указать в градусах, например 185аед.

Точки остановки цвета

Точки остановки цвета позволяют использовать в градиентах более двух цветов,
как в примере 18.7 (где показаны только настройки Ьдгоипа), задающем радужную
заливку по диагонали под углом 45 градусов).

Пример 18.7 (только настройки Ьдгоипф:

.Ьдгоипс! { Ьаскдгоипс1-1таде: Ппеаг-дгасИепк (45с1ед,
гес1, огапде, уе11ом, дгееп, Ыие, тпсНдо, У1о1ек); }

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

Рис. 18.7. Диагональный линейный радужный градиент

Удаленность точек остановки

цвета и повторения

При желании можно точно указать, насколько далеко вдоль градиента должна распо-
лагаться каждая точка остановки цвета, указав сразу за цветом значение в процентах.
Градиент можно также задать повторяющимся, заменив функцию Ипеаг-дгасПепъ () на
гереаипд-Ипеаг-дгасПепъ (). В примере 18.8 применены оба этих изменения.
Пример 18.8 (только настройки Ьдгоипс!):

.Ьдгоипс! { ЬаскдгоипЬ-ттаде: гереаЫпд-Ыпеаг-дгасИепк (45с!ед,
гес! 5%, огапде 10%, уе11ош 15%, дгееп 20%,
Ыие 25%, тпсИдо 30%, У1о1еЬ 35%) ; }

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

0 Переабпд О|адопа1 бгабНепг X +

4* С О 0 1оса1Ьа5К/Ехатр1е5/5ес1юп_3/18/ехатр1е-0&Мт! Я Е? ф Л1 

Рис. 18.8. Повторяющийся диагональный градиент

Радиальные и конические градиенты

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

В примере 18.9 в отношении разных <Ыу>-элементов применяются оба этих типа
градиентов.

Пример 18.9

1.	<!ООСТУРЕ Мт1>
2.  3.  4.  5.  6.	<Ыт1>  <Ьеас!>  <ЫЫеЖасНа1 апс! Соптс СгаЫепЕз</ЫЫе>  <зЕу1е>  . гасИа! { Ьаскдгоипс!-ттаде:гас1та1-дгас1тепЕ (
7.  8.	гес!, огапде, уеПом, дгееп, Ыие, тпЫдо, у!о1ек); } . соптс { Ьаскдгоипс!-ттаде: соптс-дгаЫепк (
9.  10.  11.  12.  13.	гес!, огапде, уеПом, дгееп, Ыие, тпсНдо, уйо1ек, гес!) ;  .е1ет { Г1оак : 1еЫ;  тагдтп : 10рх;  Ыс!Ы : 400рх;  ЬетдЬЕ : 200рх; }
14.	</з^у1е>

15.	</Ъеа6>

16.	<Ьо6у>

17.	<сНу с1азз=’гасНа!	е1ет’></с!1у>

18.	<61V с1азз='соп1с	е1ет’х/с1гу>

19.	</Ьо6у>

20.	</ЪШ1>

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

0 Кас||а1 апН Соте бгаейепи X +

<- С О Ф 1оса1Ьо51/Ехатр1е5/$есйоп_3/18/ехатр1е-09.Ыт1	ф Л •

Рис. 18.9. Радиальный и конический градиенты, показанные рядом

Здесь задается стилевое оформление двух классов: гасНа! и сопас, а затем стилевое
оформление класса е1ет, используемого в двух элементах <61у>, в одном из которых
отображается радиальный градиент, в другом — конический.

При желании можно также установить точные значения удаленности точек оста-
новки цвета в процентах, а также применить префикс гереаМпд- перед именами
функций гасИиз-дгасИеп^ () и соп1с-дгаб1еп^ о, чтобы задать повторение градиентов.
В главе 21 «Цвета и прозрачность» будет показано, как можно заменить английские
цветовые названия значениями КОВ или Н8Ь и даже включить в эти значения про-
зрачность. Но все эти функции относятся не только к фону, но и к цвету в целом,
поэтому здесь эта тема не получила дальнейшего развития.

Заключение

Существенное расширение функциональных возможностей по заданию фона в
С883 не вызывает сомнений, и теперь какой угодно фон можно добавлять к любо-
му элементу, стилизуя его практически любым способом, который только можно
себе представить, включая использование широкого спектра градиентов. В сле-
дующей главе это исследование будет продолжено в рамках полного обзора спосо-
бов задания границ в С883, где, в частности, в качестве способов задания границ
будут рассматриваться фоновые изображения и градиенты.
ГЛАВА 19

Построение границ

Введение

Отчасти эта глава — продолжение предыдущей, поскольку у границ и фонов С883
много пересечений. И все же стоит поискать, где провести между ними раздели-
тельную черту.

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

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

Структура

В этой главе рассматриваются следующие темы:

♦	Изучение всевозможных типов границ, доступных в С883.

♦	Освоение приемов добавления к элементам разнообразных закругленных границ.

♦	Изучение порядка использования в границах цветовых решений и градиентов.

♦	Изучение приемов использования для границ одного или нескольких изображений.

Цели

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

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

Пример 19.1

1.	<ЮОСТУРЕ ЬЫп1>	
2.	<Мт1>	
3.	<ЬеаЬ>	
4.	<ЫЬ1е>ВогЬег РаЫиз</ЫЬ1е>	
5.	<зЬу!е>	
6.	.Ьох {	
7.		ЮОрх;
8.	ЬеадЬЬ	:	ЮОрх;
9.	Г1оаЬ	:	1еГЬ;
10.	ЬаскдгоипЬ	:	Ите;
11.	раЬЫпд	:	Юрх;
12.	тагдап-гадЬЬ	:	Юрх;
13.	ЬогЬег	:	20рх зоИЬ. #006;
14.	.ЬогЬег1 {	
15.	ЬогЬег-гасНиз	:	50рх;
16.	.ЬогЬег2 {	
17.	ЬогЬег-гаЫиз	:	50рх 50рх 20рх 20рх
18.	.ЬогЬегЗ {	
19.	ЬогЬег-Ьор-1еГЬ-гасИиз	:	25рх;
20.	ЬогЬег-Ьор-гадЬЬ-гаЫиз	:	50рх;
21.	ЬогЬег-ЬоЬЬот-1еГЬ-гаЫиз :	75рх;
22.	ЬогЬег-ЬоЬЬот-гадкЬ-гаЫиз :	ЮОрх;
23.	.ЬогЬег4 {	
24.	ЬогЬег-Ьор-1еГЬ-гасИиз	:	20рх 80рх;
25.	ЬогЬег-Ьор-гадМ-гаЫиз	:	80рх 20рх;
26.	ЬогЬег-ЬоЬЬот-1еГЬ-гаЫиз :	80рх 20рх;
27.	ЬогЬег-ЬоЬЬот-гадЬЬ-гаЫиз :	20рх 80рх;
28.	.ЬогЬег5 {	
29.	ЬогЬег-гасНиз	:	100%;
30.	</зЬу!е>	
31.	</Ьеас1>	
32.	<ЬоЬу>	
33.	<ЬЮ с!азз=’Ьох ЬогЬег1 ’ ></ЬЮ>	
34.	<ЬЮ с!азз=’Ьох ЬогЬег2 ’ ></ЬЮ>	
35.	<Ыу с!азз=’Ьох ЬогЬегЗ ’ ></ЬЮ>	
36.	<с!1У с!азз='Ьох Ьогс1ег4 ’ ></с!1у>

37.	<с11У с!азз=’Ьох Ьогс1ег5 ' ></с!1у>

38.	</Ьос1у>

39.	</НЬп1>

В этом примере основной класс в разделе <з^у1е> называется Ьох, стилевые установ-
ки которого определяются, начиная со строки 7. Здесь устанавливаются размеры
каждого отображаемого элемента, а также цвет фона, внешние и внутренние отсту-
пы и ширина границы, ее стиль и цвет. Элементы также по указанию значения для
свойства Поаъ прижимаются к левой стороне, получая возможность выстроиться в
ряд. Затем определяется стиль для пяти классов, где указываются разные стили гра-
ниц, используемые элементами <Шу>, задаваемыми начиная со строки 33 в разделе
документа <Ьоау>. Результат загрузки этого примера в браузер показан на рис. 19.1.

0 Вогдег Кас111п	X +

С О © 1оса1Ио$ЦЕхатр1е5/5еЛ1Оп,3/19/'ехатр1е‘01.Ыт1 О,	:

□□□□о

Рис. 19.1. Примеры различных стилей границ

Если к свойству ЬоЫег-гасНиз применяется только одно значение (как в классе
ЬоЫег! в строке 14 для первого элемента в примере 19.1), всем углам задается одно
и то же значение, поэтому получается симметричный прямоугольник или квадрат с
границами, закругленными на указанную величину.

Если для ЬоЫег-гасНиз применяется два значения, то первое из них задает форму
верхнего левого и нижнего правого угла, а второе — двух оставшихся углов. Если
применяются три значения, то первое относится к верхнему левому углу, второе —
к верхнему правому и нижнему левому углам, а третье — к нижнему правому углу.
Когда предоставлены все четыре значения (как в классе ЬоЫег2 в строке 16 для вто-
рого элемента в примере 19.1), они применяются к углам по ходу часовой стрелки
от верхнего левого угла к верхнему правому, затем к нижнему правому и, наконец,
к нижнему левому углам.

А теперь еще интереснее: все эти углы можно изменять по отдельности, воспользо-
вавшись следующими свойствами:

♦ Ьогс1ег-^ор-1еГ^-гас11из

♦ ЬоЫег-Гор-гГдкГ-гасГкиз

♦ Ьогс1ег-ЬоГГот-1еГГ-гас11из

♦ Ьогбег-ЬоЪ^от-гтдГгЬ-гасНиз
Эти свойства говорят сами за себя, и их применение можно увидеть в классе ЬоЫегЗ
в строке 18, в результате чего третий элемент отображается так, как показано на
рис. 19.1. Но это еще не все. Для конкретных углов при желании можно указать два
значения, и тогда первое применяется к первой стороне, указанной в имени свойст-
ва, а второе — ко второй именованной стороне.

Например, когда значения задаются для свойства Ьогаег-ЬоЮот-гтдМ-гааЮз, то пер-
вое значение применяется к нижнему краю угла, а второе — к правому краю. Это
можно увидеть в четвертом элементе на рис. 19.1, поскольку именно так заданы
значения для упомянутого свойства класса ЬоЫег4 в строке 23.

И наконец, можно создать целиком круглые или овальные границы, применив к
свойству ЬоЫег-гасНиз максимальное значение, обычно от 50% и выше, чтобы это
точно получилось, как в установках для класса ЬоЫег5, применяемых для создания
показанного на рисунке пятого элемента. Вообще-то значения для любых свойств
границ могут по вашему усмотрению указываться как в пикселях, так и в процентах.
Исчерпывающее объяснение всего разнообразия свойств радиуса границы можно
найти по следующему ИКЬ-адресу: ъ1пуиг1. сош/ь-гаащз

Цвета границ

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

Как уже известно, следующая установка приведет к появлению сплошной синей
границы шириной 10 пикселей:

ЬоЫег : Юрх зоИб. Ыие;

Но вот о том, что можно определить цвет отдельно для каждого из краев границы,
как показано в примере 19.2, вы могли и не знать. В блоке стилей классов, начи-
нающемся в строке 6, в строке 10 задается 20-пиксельная сплошная граница, после
чего в строке 11 ей назначаются четыре цвета.

Пример 19.2

1.	<1ЭОСТУРЕ Мт1>

2.	<Мт1>

3.	<Иеас1>

4.	<Г1Г1е>Вогс1ег Со1огз</РЮ1е>	
5.	<зРу1е>	
6.	.Ьох {	
7.		: 640рх;
8.	ЪеадМ	: ЮОрх;
9.	Ьаскдгоипс!	: суап;
10.	ЬоЫег	: 20рх зоИс1;
11.	Ьогс1ег-со1ог : гес! уе11ом Ыие дгееп; }

12.	</з^у!е>

13.	</Иеас1>

14.	<Ьос1у>

15.	<сНу с!азз=’Ьох’ ></с1гу>

16.	</Ьос1у>

17.	</ЬШ1>

Эти цвета, как показано на рис. 19.2, применяются по направлению движения часо-
вой стрелки, начиная с верхней части границы.

0 Вогйег Со1огз	X +

С О © 1оса1Но51/Ехатр1е5/5еаюп_3/19/ехатр1е-02.Нпп1 И? ☆	>	:

Рис. 19.2. Элемент с четырьмя границами разного цвета

При желании, как и в случаях с Ьогаег-1ор-з5у1е и с подобными этому свойствами,
можно также установить эти цвета по отдельности, воспользовавшись следующими
свойствами, каждое из которых принимает одно значение:
♦ Ьогс1ег-^ор-со1ог
♦ Ьогс1ег-1еГ^-со1ог

♦	Ьогс1ег-г1дЪ^-со1ог

♦	Ьогс1ег-ЬоГГот-со1ог

Полную информацию о параметрах цвета границы, которые теперь доступны в
С883, можно найти по следующему ПВЪ-адресу: ъ1пуиг1.сош/ь-со1ог

Г радиантные границы

При желании создавать многоцветные границы можно вместо изображения вы-
брать градиент. В примере 19.3 в строке 14 задается граница с переходом от оран-
жевого к синему цвету.

Пример 19.3

1.

2.

<!ЭОСТУРЕ Мт1>

<№п1>
3.	<Ьеас1>
4.	<ММе>СгасИеп^ Вогс1ег</-ЫМе>
5.	<зВу!е>
6.	.ЬоЫег {
7.	ГопВ-ГатНу : ’Татез Мем Нотам’;
8.	ГехГ-аИдп : сепВег;
9.	раскНпд	: Юрх;
10.	мЫВЪ	: ЗООрх;
11.	ЬеадЪВ	: 200рх;
12.	ЬоЫег-мтсШо : Юрх;
13.	Ьогс1ег-з^у1е : зоИс!;
14.	Ьогс1ег-1таде : Ипеаг-дгасИепГ (огапде, Ыие) 27 / 35рх;
15.	</зВу1е>
16.	</Иеас1>
17.	<Ьос1у>
18.	<сепВег>
19.	<сГЮ с1азз=’Ьогс1ег ’>
20.	<Ь2>А</Ь2>
21.	<Ы>СгасИеп^</Ы>
22.	<Ь2>Вогс1ег</Ь2>
23.	</сНу>
24.	</сепВег>
25.	</Ьос1у>
26.	</ЬВт1>

Результат загрузки этого примера в браузер показан на рис. 19.3.

Рис. 19.3. Использование градиента для построения границы

Для более выразительного эффекта можно также воспользоваться заданием ради-
альных и повторяющихся градиентов, а также нарезать изображения границ раз-
личными способами. Количество разнообразных эффектов не позволяет уделить
слишком много места их описанию, но при желании проявить творческий подход к
построению границ можно ознакомиться с официальной документацией, где де-
монстрируется множество других примеров, зайдя на веб-страницу по следующему
ИКЬ-адресу: Мпуиг!. сот/сззЗЬогс!егз

Использование нескольких фонов

В главе 16 «Введение в С883» уже был вкратце рассмотрен вопрос об использова-
нии фоновых изображений для создания границы в документе, как показано в при-
мере 19.4.

Пример 19.4

1.	< ! ЭОСТУРЕ НЬп1>

2.

3.

4.

5.

6.

7.

8.

9.

10.

11.

12.

13.

14.

15.

16.

17.

18.

19.

20.

21.

22.

23.

24.

25.

26.

27.

28.

29.

30.

31.

<НЕт1>

<Ьеас1>

<ММе>Ми1Мр1е ВоЫег 1тадез</ММе>

<зку1е>

.ЬоЫег {

ЕоггЬ-ЕатНу

ГопЕ-зЕу1е
ЪехЪ-аИдп
расЕПпд

АеадЬЕ
Ьаскдгоипс!

Т1тез Еем Котап’;

: лЛаИс;

: сепЕег;

: бОрх;

: 250рх;

: ЗООрх;

: иг1(’Ы.дИ’)
иг! (’Ь2 .дИ’)
иг! (’ЬЗ.дИ’)
иг! (’Ь4 .дИ’)
иг! (’Ьа.дИ’)
иг! (’ЬЬ.дИ’)
иг! (’Ьс.дИ’)
иг! (’М.дтР)

Еор

Вор
ЬоЕЕот
ЬоЕЕот

Еор
1еГЕ
гадЬЕ
ЬоЕЕот

1е1Е
гадМ
1еГЕ
гадМ

</зку1е>

</Ьеас1>

<Ьос1у>

<сепкег>

<сПу с1азз=’Ьогс!ег ’>

<Ы>СегМГ1саке оЕ<Ьг>АЕЕепс1апсе</Ь1>

<Ъ2>Амагс1ес1 То:</Ь2>

<ЬЗ>-

<Ь2>ВаЕе:</Ь2>

<ЬЗ>_/_/</ЬЗ>

</сИу>

</ЬЗ>

по-гереаЕ,
по-гереаЕ,
по-гереаЕ,
по-гереаЕ,
гереаЕ-х,
гереаЕ-у,
гереаЕ-у,
гереаЕ-х }
32.	</сеп^ег>

33.	</Ьос1у>

34.	</№п1>

При загрузке кода примера в браузер должна получиться такая же картинка, как на
рис. 19.4.

0 Ми111р1е Вог^ег (тадег	X +

4- О О ® 1оса1Ьо5^Ехатр1«/5еаюп_3/19/ехатр1е-04.1'Пт1 ф

Рис. 19.4. Граница, построенная из восьми изображений

Теперь, после рассмотрения всех основ, необходимых для понимания того, как все
это работает, давайте подробно разберем пример, в котором используются восемь
отдельных изображений, представляющих четыре стороны и четыре угла границы.
Угловые изображения указываются в строках с 13 по 16 для задания соответст-
вующих фигур в левом верхнем, правом верхнем, левом нижнем и правом нижнем
углу любого элемента, использующего этот класс. Для них также устанавливается
режим без повторений.

В строках с 17 по 20 указываются изображения для верхней, левой, правой и ниж-
ней сторон элемента, использующего данный класс, причем верхнее и нижнее изо-
бражения настроены на повторение по горизонтали, а левое и правое — по верти-
кали. Эти повторяющиеся изображения будут сужаться и расширяться, создавая
сплошную сторону границы для любого элемента, но элементы с размерами грани-
цы, не превышающими размера изображения, будут иметь неприглядный вид. Уг-
ловые изображения ы.дИ, Ь2.д1г, ьз.дтг и Ь4.д1г показаны на рис. 19.5.

Рис. 19.5. Четыре угловые изображения

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

Рис. 19.6. Четыре изображения сторон границы

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

Использование одного изображения

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

Затем, используя это изображение, можно воспользоваться инструкциями С883 для
извлечения различных углов и сторон, и их размещения по границе элемента, как
если бы они были отдельными изображениями. Тем самым обмен данными с серве-
ром сокращается в восемь раз, позволяя браузеру выполнять его работу без замет-
ного снижения производительности.
Как ни странно, но работать с одним изображением намного проще, и можно сти-
лизовать по-разному элемент с помощью С88, как показано в примере 19.5 в стро-
ках с 6 по 13, поместив в строку 14 единую инструкцию с именем файла и значени-
ем, позволяющим разбить изображение на восемь компонентов, необходимых для
создания неразрывной и расширяемой границы.

Рис. 19.7. Одно изображение, созданное из восьми изображений,
используемых для построения границы

Пример 19.5

1.	< ! ЭОСТУРЕ Мт1>

2.	<Мт1>

3.	<Ъеас1>

4.	<ММе>31пд1е ВоЫег 1таде</ММе>

5.	<зРу!е>

6.	.ЬоЫег {

7.	ГопГ-ГатИу	:	’Татез Мем Котап’;

8.	ГехГ-аПдп	:	сепРег;

9.	расКИпд	:	ЗЗрх;

10.	м1с1РЪ	:	ЮОрх;

11.	КеадКР	:	150рх;

12.	Ьогс1ег-м1сШо	:	102рх;

13.	Ьогс1ег-зРу1е	:	с1оГГес1;

14.	Ьогс1ег-1таде : иг1 (’ЬоЫег .рпд’) 102; }

15.	</з^у!е>

16.	</Кеас1>

17.	<Ьос1у>

18.	<сеп-Ьег>

19.	<<±Ру	с1азз=’Ьогс1ег	’>

20.	<Ь2>Ап</Ь2>

21.	<Ы>1таде</Ы>
22.	<И2>Вогс1ег</к2>

23.	</с11у>

24.	</сеп^ег>

25.	</Ьос1у>

26.	</Мш1>

Использование всего лишь одного свойства ЬоЫег-ттаде позволяет загрузить изо-
бражение и извлечь его нужные части, а затем разместит их там, где они должны
быть. Выполнение всех этих действий при использовании всего лишь одного зна-
чения 102 выглядит как какое-то волшебство. Это действительно похоже на магию,
поскольку этого значения вполне хватает, чтобы сообщить браузеру о необходимо-
сти построить изображение, показанное на рис. 19.8.

© 5|пд1е ВсгЬег 1таде	X +

СОФ 1вд1Ьо^Ехатр1€5/5есГюпЗЛ9/ехагпр|е^5Ыт1 т2г Л» :

Рис. 19.8. Граница, построенная на основе одного изображения

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

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

0 5!пд1е Вогс1ег 1пладе	X +

С О © 1оса1Ьо51/Ехагпр1е5/5есГ1ОП.З/19/ехатр1е'05а.Ыт1	’У

Рис. 19.9. Другая нарезка изображения

Заключение

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

Свойства блока и текста

Введение

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

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

Структура

В этой главе рассматриваются следующие темы:

♦	Изучение способов добавления к элементам различных теней.

♦	Освоение приемов контроля за каждым аспектом переполнения элемента.

♦	Изучение приемов распределения текста по нескольким колонкам.

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

Цели

Цель главы — дополнить арсенал ваших инструментов тремя высокоэффективны-
ми функциями стилевого оформления. Будут также рассмотрены все подробности
их использования, а также другие функции С88, которые можно комбинировать с
ними для достижения наилучшего эффекта. Изучение материала главы позволит
узнать все необходимое о тенях, о том, как справиться с переполнением текстом и
об использовании нескольких колонок.

Добавление теней

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

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

Пример 20.1

1.	<!ЭОСТУРЕ ЬЬт1>			
2.	<ЬЬт1>			
3.	<ЬеаЬ>			
4.	<ЫЬ1е>Вох	5Иаскжз</ЫЫе>		
5.	<зЬу!е>			
6.	.Ьоха	{ мМЬИ	:	120рх;	
7.		ЬеадЬЬ	:	ЮОрх;	
8.	.ЬохЬ	{ мМЬИ	:	28Орх;	
9.		ЬетдЬЬ	:	10Орх;	
10.	. а11	{ ЬаскдгоипЬ. :	суап;	
11.		Ыоак	:	1еГЬ;	
12.		тагдап	:	Юрх;	
13.		ЬогЬег	:	Юрх зоНЬ геЬ;	
14.	. зЪаскж1	{ Ьох-зкаскж :	-брх -брх Юрх	#888;
15.	. зЪаскж2	{ Ьох-зкаскж :	брх -брх Юрх	#888;
16.	. зЪаскжЗ	{ Ьох-зкаскж :	-брх брх Юрх	#888;
17.	. зЪаскж4	{ Ьох-зкаскж :	брх брх Юрх	#888;
18.	. зЪаскж5	{ Ьох-зкаскж :	-брх -брх Юрх	#888 1пзеЬ;
19.	. зЪаскжб	{ Ьох-зкаскж :	брх -брх Юрх	#888 1пзеЬ;
20.	. зЪаскж7	{ Ьох-зкаскж :	-брх брх Юрх	#888 Юзек;
21.	. зЪаскж8	{ Ьох-зкаскж :	брх брх Юрх	#888 1пзеЬ;
22.	. зЪаскж9	{ Ьох-зкаскж :	Орх Орх 20рх	#000;
23.	. зЪаскжа	{ Ьох-зкаскж :	Орх Орх 2Орх	#000 1пзеЬ;
24.	</зЬу!е>			
25.	</ЬеаЬ>			
26.	<ЬоЬу>			
27.	<сИу с!азз=	’Ьоха а!1 зкаскж1 ’ ></ЬЮ>		
28.	<ЬЮ с!азз=	’Ьоха а!1 зкаЬом2 ’ ></ЬЮ>		
29.	<сИу с!азз=	'Ьоха а!1 зкаЬомЗ ' ></ЬЮ>		
30.	<ЬЮ с!азз=	’Ьоха а!1 зкаскж4 ’ ></ЬЮ>		
31.	<сНу с!азз=	'Ьоха а!1 зкаскж5’></ЬЮ>		
32.	<ЬЮ с!азз=	’Ьоха а!1 зкаЬомб’></ЬЮ>		
33.	<ЬЮ с!азз=	'Ьоха а!1 зкаскж7 ' ></ЬЮ>		
34.	<ЬЮ с!азз=	'Ьоха а!1 зкаскж8 ’ ></ЬЮ>		
35.	<сНу с!азз=	'ЬохЬ а!1 зкаскж9 ’ ></ЬЮ>		
36.	<ЬЮ с!азз=	'ЬохЬ а!1 зкаскжа'></ЬЮ>		
37.	</ЬоЬу>			
38.	</ЬЬт1>			
На рис. 20.1 видно, что к свойству Ьох-зЬаскж применяются значения смещения по
горизонтали и вертикали (со знаками «плюс» и «минус»), за которыми следуют сте-
пень размытия, цвет и указание на вложенность тени.

Рис. 20.1. Разнообразие типов теней

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

Затем задается стилизация десяти классов с целью создания различных типов те-
ней. Для первых четырех классов задается по очереди создание тени в верхнем ле-
вом, верхнем правом, нижнем левом и нижнем правом углах элемента. Для сле-
дующих четырех классов создание теней задается схожим образом, но на этот раз с
размещением внутри элементов. И наконец, для последних двух классов задается
создание теней сначала снаружи, а потом внутри элемента. Затем для отображения
установок для каждого из этих классов используется элементы, указанные в разде-
ле <Ьос1у>.

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

Переполнение элементов

До введения в практику применения С883 остро стояла проблема подстраивания
текста, превышавшего по объему размер элемента. Раньше можно было только
грубо установить для применяемого во всех случаях свойства оуегЫом одно из сле-
дующих значений: мааеп, у1з1Ые, зсгоп или аиьо. Но теперь стало доступным более
тонкое управление подобной ситуацией, поскольку появилась возможность вос-
пользоваться свойствами оуегПо^-х и оуегПон-у и применить те же самые значения
по желанию только к горизонтальному или к вертикальному направлению.

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

Пример 20.2

1.	<ЮОСТУРЕ Мт1>		
2.	<Мт1>		
3.	<ЬеаЬ>		
4.	<ЫЫе>Е1етепЕ	ОуегЕ1ом</Ык1е>	
5.	<зку!е>		
6.	.Ьох	{	Е1оак	: 1еЮ;
7.		ЬаскдгоипЬ	: уе11ом;
8.		тагдтп-гтдЬЬ	: бОрх;
9.		Еопк-згге	: 20рх;
10.		ЬогЬег	: 1рх зоИа #000
11.		мтЬкк	: ЮОрх;
12.		Ьетдкк	: ЮОрх; }
13.	.у1з1Ые-х {	оуегЕ1ом-х	: У1з1Ые; }
14.	.тааеп-х {	оуегЕ1ом-х	: ЫаЬеп; }
15.	.ЗСГО11-Х {	оуегЕ1ом-х	: зсго11; }
16.	.аико-х	{	оуегЕ1ом-х	: аико;	}
17.	.У131Ые-у {	оуегЕ1ом-у	: У1з1Ые; }
18.	.ыааеп-у {	оуегЕ1ом-у	: ЫаЬеп; }
19.	.зсго11-у {	оуегЕ1ом-у	: зсгоП; }
20.	.аико-у	{	оуегЕ1ом-у	: аико;	}
21.	</зку!е>		
22.	</ЬеаЬ>		
23.	<ЬоЬу>		

24.	<ЬЮ с!азз='Ьох У131Ые-х У131Ые-у’>

25.	ЕхЪгаЖаеЭДога ТЪе дитск Ьгомп Гох ^итрз оуег

26.	кке 1аху з!еер!пд Ьод</аЮ>

27.	<Ыу с!азз='Ьох Ыааеп-х У131Ые-у’>

28.	ЕхкгаШЬеЭДогЬ Тке дитск Ьгсжп Еох ^итрз оуег
29.	ГЬе 1агу зХеертпд с1од</с11у>

30.	<сИV с1азз=’Ьох У131Ые-х Ы66еп-у’>

31.	ЕхкгаШбеЭДогб ТИе дитск Ьгсжп Гох ^итрз оуег

32.	кке 1аху зХеертпд 6од</6гу>

33.	<61V с1азз=’Ьох аико-х аико-у’>

34.	ЕхкгаШбеЭДогб Тке дитск Ьгомп Гох ]итрз оуег

35.	кке 1аху зХеертпд 6од</6гу>

36.	</Ьо6у>

37.	</Ькт1>

У первого элемента в строке 24 нет прокрутки, и весь текст показан на странице
вытекающим из него в полном беспорядке. А вот другие элементы, как показано на
рис. 20.2, удерживают внутри себя свой контент различными способами.

0 Е1етеп1 ОуегЛо^	X +

> СО® 1оса1Ьо51/Ехатр1е5/5есгюп_3/20/ехатр1е-02.тгп1 ☆	* У •

Ех(га\Ук1е\У
ТИе яшск
Ьгохуп Гох

]Цтр5 оуег

пттЁтту----

81еерт&
йо§

огс1

Ехй*а\Мск
ТЬе цшск
Ьгохуп Гох
(итрз

Ех1гаХУ1с1еЛЛ

Тйе яиюк
Ьгочуп Гох

Ех1га\У|ск
Тйе цшск
Ьгохуп Гох

Рис. 20.2. Использование различных значений для свойств переполнения

Поэкспериментируйте с кодом примера, переключая классы, применяемые к эле-
ментам <а1у>, чтобы увидеть, каких эффектов еще можно добиться. Иногда можно
будет заметить, что несмотря на установку значения V^з^Ые для свойств оуегПо^-х
или оуегПо^-у, содержимое элемента может и не отображаться за его пределами.
Дело в том, что согласно спецификации \УЗС, некоторые комбинации с аргументом
у1з1Ые невозможны, и если для одного свойства указано значение утзтЫе, а для
другого либо зсго11, либо аико, то по умолчанию значение у1з1Ые будет изменено на
аико.

Макет, составленный из нескольких колонок

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

В примере 20.3 показан отрывок из шекспировского «Ричарда III», разбитый на
пять колонок с промежутком в 1 еш между колонками и их разделителем в один
пиксель.

Пример 20.3

1.	< ! ООСТУРЕ ккт1>

2.	<ккт1>

3.	<кеас!>

4.	<к!к1е>Ми1к1р1е	Со1итпз</к1к1е>

5.	<зку1е>

6.	.со1итпз {

7.	кехк-аИдп	:	^изЫку;

8.	копк-зихе	:	16рк;

9.	со1итп-соипк	:	5;

10.	со1итп-дар	:	1ет;

11.	со1итп-ги1е	:	1рх зоИс! Ыаск; }

12.	</зку1е>

13.	</кеас!>

14.	<Ьос!у>

15.	<41у с1азз=’со1итпз’>

16.	Иом 13 кке мтпкег ок оиг сПзсопкепк

17.	Маке д!ог!оиз зиттег Ьу кЫз зип ок Уогк;

18.	Апс! а!1 кке с1оис!з ккак 1оиг’с! ироп оиг коизе

19.	1п кке с!еер Ьозот ок кке осеап ЬиЫес!.

20.	Иом	аге оиг Ьгомз Ьоипс! мккк	У1ског1оиз мгеаккз;

21.	Оиг	Ьгикзес! агтз кипд ир Гог	топитепкз;

22.	Оиг	зкегп а!агитз скапдес! ко	теггу тееккпдз,

23.	Оиг	с!геас1ки1 тагскез ко ЬеЫдккки! теазигез.

24.	Сг1т-у1задес1 маг	Накк зтоокк'с! Ыз мг1пк1ес! кгопк;

25.	Апс! пом, апзкеас!	ок	тоипЫпд ЬагОеО зкеес!з

26.	То кЫдкк кке зои!з	ок кеагки! аЫегзагкез,

27.	Не сарегз пктЫу	1п	а 1ас!у’з скатЬег

28.	То кке 1азс1и1оиз р1еаз!пд ок а 1ике.

29.	Вик I, ккак ат пок зкарес! ког зрогкЫе кЫскз,

30.	Ног тас!е ко соигк ап атогоиз 1оок1пд-д1азз;

31.	I, ккак ат гис!е1у зкатр’с!, апс! мапк 1оуе'з та^езку

32.	То зкгик Ьекоге а мапкоп атЬЫпд путрк;

33.	I, ккак ат сигкаЫ'с! ок кк!з какг	ргорогЫоп,

34.	Скеакес! ок кеакиге Ьу ЫззетЫкпд	пакиге,

35.	Векогтес!, ипккпкзк’с!, зепк Ьекоге	ту Ыте

36.	1пко кЫз ЬгеакЫпд могЫ, зсагсе	ка1к тас!е	ир,

37.	Апс! ккак зо 1ате1у апс! ипказЫопаЫе
38.

39.

40.

41.

42.

43.

44.

45.

46.

47.

48.

49.

50.

51.

52.

53.

54.

55.

56.

57.

58.

59.

60.

Ткак с!одз Ьагк ак те аз I ка!к Ьу ккет;
I, ап кказ меак рарапд кате ок реасе,
Науе по ЬеИдкк ко разз амау кке кате,
Пп1езз ко зру ту зкаскж 1п кке зип
Апс! Ьезсапк оп тапе омп Ьекогтаку:

Апс! ккегекоге, запое I саппок р^ОVе а 1оуегл
То епкегкаап ккезе Тааг ме11-зрокеп Ьауз,
I ат Ьекегтапес! ко ргоуе а уПЫп
Апс! каке кке 1с11е рТеазигез ок ккезе с!ауз.
РТокз кауе I 1а1с!л 1пс!иск1опз Ьапдегоиз,
Ву Ьгипкеп ргоркескез, НЬеТз апс! с!геатзл
То зек ту Ьгоккег СТагепсе апс! кке капд
1п с!еас!1у каке кке опе адаапзк кке оккег:
Апс! 1Т Капд ЕЬмагс! Ье аз кгие апс! ^изк
Аз I ат зиЬкТе, ТаТзе апс! кгеаскегоиз,
Тказ с!ау зкоиТс! СТагепсе сТозеТу Ье тем’с! ирл
АЬоик а ргоркесу, мкаск зауз ккак ’С’
ОТ ЕЬмагсГз кеагз кке тигЬегег зкаП Ье.

В1уел ккоидккз, с!омп ко ту зоиТ: кеге
СТагепсе сотез.

</сИу>

</Ьос!у>

</кктТ>

Результат загрузки кода в браузер показан на рис. 20.3.

МЫырЕе Со11нпп&	X -)

С •• СО Ф	ё ☆ Д *

Ь’шу к 1:ке и т1сг о Г пи г
(Нясомепг Майе
^1опспя хиттсг Ьу
5И п оГТогк; Апс! а11 1кс
с1оис1> [11Я1 1оиг'с1 ироп
сиг Койке 1п (Не йсср
Ьсхот оГ [Ье осеап
Ьипей. аге сиг
Ъгол-5 Ьоипй ™йк
скюпоик игсаИь; Онг
Ьш|5ес1 агтз Ьил₽ ир
Гаг топитсШк; Оиг
51сп1 а1апип5 сЬап^ей
[с тепу тсе1ш&5< Онг
йгеайГи! тэгсЬез (о
{кИ^НГи! теа&иге^
6пт-чгка^ей и/аг Ка(11

>тоо1|Гй Ь15 ч'ппккй
Ггопи Апй поле. тзгеай
о Г тоипНпц Ьагйсй
йкххЬ То Гг1к']11 1ке
хаи1х оГ ГсагГи!
айчсгкапск, Нс сарега
ттЫу 1п а 1айуЧ
сИатЬег То 1ке
кгастоця ркахше оГ а
1и1е. Вы I. 1ка( ат по1
5|1Лрсй 1’ОГ ЯрпЦ1\гС
[пек я, Ког тайс (о
соип ап атогаих
1сок|п^-;г1а55; к |ка[ ат
гийе1у к1ятр'ск апй
чсап! 1оус’5 та^схТу Та
т( ЬеГогс а шатоп

дтЫ1п^ путрк; I, 1111а]
ат сипак'й оГ Ния Гак
ргоропип. С11са1сй оГ
ГеаТнгс Ьу йкьстЫт^
паплсц ОсГоптихк
илЛпЫГс!, 5сп1 ЬсГогс
ту и те 1то (кк
Ьгеаскт^ ^ог!4, зсагсе
Ьа1Г тайс ир. Апй |]1а(
во 1ате]у апй
ипГаяЫопаЫе Ткаг йо$5
Ьагк а[ тс ах I как Ьу
[Ьст; ’А/Ьу, 1, т (Шх
л'сак рзрт^ Птс оГ
реасе. Пач е по 11е1ш1и:
[с раьх ачау |кс 11 тс,
Ьпкуз Ю кру ту

якагЬи' 1п тке яиц Апй
йсБсапг оп тте сил
ПсГогт11у;	Апй

гксгсГогс, 51псс I саппс!
ргасс а 1оуег« То
сп(ег1ат 1кеке Га] г \^с]|-
зрокеп йауяч I ат
йе1епптес1 ю ргоче а
^|||а1п Ап<1 кап? гкс кке
ркаьиге^ оГ 1кске йауь.

Р1оь Ьаге I 1а{4,
1пс1ис11опх йап^егоихц
Ву йгипкеп ргарЬсс1сх,
I |Ьс 1й а п<1 йгсят 5, То
ке( ту Ьго^сг С1агепсе
Е1пй |Ьс ктк' 1п йсаЛу
касс 1ке опе а^ат^с 1ке

йеЬст: Лий И' Кт^
Ейи?агс1 Ье а® ине апй
]их[ Аз I ат хиЬСс,
Гаке апй Пгеасксгоиз,
ТЫ я йау зкоиМ
С1агепсе с1оке1у Ьс
течс'й ир, АЬош а
ргоркесу, чуЫсЬ ааув
|Ьа1 ЧЭ1 ОГ Ей^апГз
ке!гк 1ке тигйегег ька11
Ье. ОЫе, й)ои$1№,
йоччп [о ту яои1: Ьсгс
Скагспсс сотех.

Рис. 20.3. Растекание текста по нескольким колонкам

Попробуйте загрузить этот пример в браузер настольной системы и посмотрите,
как текст перетекает и переформатируется при изменении размеров окна браузера.
Нетрудно будет убедиться, что этот способ создания колонок обладает высокой
гибкостью и отзывчивостью.
Но при этом можно заметить, что при наличии в строке пары слишком длинных
слов для поддержки формата в этой строке может отображаться чрезмерно большое
количество пробелов. Чтобы исправить ситуацию, можно применить пару допол-
нительных установок С88 для вставки в длинные слова знаков переноса, как в при-
мере 20.4, где в строках И и 12 есть две новых установки для выполнения перено-
сов: слгогсЬЬгеак И куркепз.

Пример 20.4 (только начальный и КеасГраздел):

1.	<1ЭОСТУРЕ Мт1>

2	. <Мт1 1апд= ’ еп' >

3.	<Ъеас1>

4.	<Е1’Ые>Ми1,Ыр1е	Со1итпз</ЫЫе>

5.	<зЕу!е>

6.	.со!итпз {

7.	ЕехЕ-аИдп	:	^изЫТу;

8.	ТопЕ-зтхе	:	16рЕ;

9.	со!итп-соипЕ	:	5;

10.	со1итп-дар	:	1ет;

11.	шогсНэгеак	:	Ьгеак-могс!;

12.	Ъуркепз	:	аико;

13.	со!итп-ги!е	:	1рх 50116.	Ыаск; }

14.	</зку!е>

15.	</Иеас1>

ф Ми1Пр1е Сй!кл-пп5	X -р

& СО® 1оса1Ьо51/Г*зщр1еЕ/^есг1Оп_3/с!О/ехвгпр1е’0^ Птп1	Ц	:

Мои- Н Же «тест о Г
оиг ск яс отел : Ма<к
Лопоиз зиттег Ьу
(1113 кип о Г Тогк;
Апс! а11 скс

ЖаС 1оиг'с1 ирон оиг
Иоизе 1п скс с!сср
Ьояот о Г Же оссап
Ьипед- Ио^ аге оиг
Ьгоигз Ьоит! ин Ж
V^с(о^^ои& итсаЖя;
Оиг Ьгиьсс! аппз
кит; ир Гог топи-
тепСз; Оиг яСсгп
а1агитя скап^ес! Со
тепу тее1т°я, Оиг
сксаЛГи! тагскся со
сккёГиГи! теаяигея,
6п1П-У1ьайе^ \уаг

На (И кттюСк'с! Наз
игткЫ Ггопи Л па
пои. тз(еас! оГ
тоипГт^ Ьапки
з1еес1я То Гг1^Ы (Не
зои!я оГ ГеагГи! ас1-
усгяагкя, Нс сарегя
П1П1Ыу т а 1ас1у'я
скэтЬег То Же 1ая-
сЫоиз ркаят^ оГ а
1Ше, Вт [, Жа( ат
поС зЬарЫ Гог
зрогкуе Спек я» Мог
таек Со соип ап
а то гои я 1ооктц-
^|аяя; к ЖаС ат
гиск1у зсатри, апд
шанс 1оус'я та^еяСу
То ясгис ЬсГоге а

иатоп атЫтц
путрЬ; к Жт ат
сипгкГи оГ Ж1з Гак
ргороМюп, СкеаСей
оГ Геагиге Ьу с!к-
зетЬНп^ паШге,
ОеГогтсД
ипПпкЬМ, нс-п! Ьс-
Гоге ту к те 1то
Жь ЬгеаЖту июгкк
зсагсе На1Г таек ир,
Ап<1 ЖаС зо 1ате1у
апк ипГазкюпаЫе
Тка1 <1о§я Ьагк ас
тс аз I Иа1! Ъу
скет; XVку, к т екк
\усак р1рт^ итс оГ
реасе. Науе по с!е-
Нукс со раза аигау

1ке 11ШС. Отказ [о
яру ту чка<1оп т
скс зип Апй Нсзсапг
он тте о\уп йеГог-
тку: Апс! (НегеГоге,
я тсс 1 саппоС ргоуе
а 1оусг, То с тепа т
(Незе Га!г \Ус11-яро-
кеп <1ауя, I ят ск-
сегттес! со ргоус а
VIПат Ат! как скс
к! к рказигея оГ
Жене с!ауя= Р1оСя
кауе I Ыс1Т тс!ис-
Ноп я с!ап^егои$, В у
йгипкеп ргеркеаез,
НЬек апс! сксатз,
То яс: ту Ьгоскег
Скгспсс апй Же

ктц 1л исаЛу ИиСс
111е опе Д^атз! Ске
оЖег: Апс! |Г Кт&
Е<!ирагй Ье аз Сгис
ат! ]ияс А я ! ат
яиЬНс, Га1яе апс!
ггсасксгоия, ТЬк
с!ау зкоиШ ССагспсс
с1ояе|у Ье теи/<1
ир, АЬот а
ргоркссу, иЖкк
зауз ЖаС 'О' О Г
Е^^ аЫ’я кен-з ске
тшхкгег зкаП Ье.
В Не, Скси^Ш я,
сЗолуп Со ту яои1:
Неге Скгспсс
сотея.

Рис. 20.4. При использовании автоматической расстановки переносов
количество пробелов уменьшается
Чтобы установки сработали, важно, чтобы в элементе <ььт1> был указан язык. Такое
указание добавлено в строку 2 для выбора английского языка (любого из его вари-
антов). Результат внесения этих изменений — гораздо более аккуратное отображе-
ние текста, показанное на рис. 20.4.

Установки на использование свойств могЬ-Ьгеак и куркепз могут применяться не
только в колонках, но и в любом формате текста. Хотя наибольшая польза от них
проявляется именно при создании колонок, поскольку благодаря им текст в колон-
ках становится компактнее.

Для свойства могЬ-Ьгеак поддерживаются значения поппа1, Ьгеак-а11, кеер-а11 И Ьгеак-
моы, которое используется в этом примере. Для свойства куркепз поддерживаются
значения попе, тапиа! и аико, которое также используются в примере.

Но даже при том, что колонки на рис. 20.4 выглядят намного лучше, чем на преды-
дущем рисунке, в них все еще встречаются нежелательные лишние пробелы. Си-
туацию можно исправить вручную, воспользовавшись имеющимся в НТМЬ мягким
переносом &зку;, который можно расставлять в возможных потенциальных местах
переносов длинных слов. Мягкие переносы будут заменяться знаками переноса
только в том случае, если перенос для слова нужно будет применить в конце стро-
ки. В примере 20.5 в текст было добавлено множество таких мягких переносов.

Пример 20.5 (только раздел с текстом):

17.	Секту с1азз='сокитпз ’ >

18.	Мом 13 кке мкпкег ок оиг сИз&зку;соп&зку;кепк

19.	Маке д1ог&зку;иоиз зит&зку;тег Ьу ккйз зип ок Уогк;

20.	Апс! а!1 кке с1оис1з ккак Тоиг’с! ироп оиг коизе

21.	1п кке Ьеер Ьозот ок кке осеап ЬигиесЬ

22.	Мом аге оиг Ьгомз Ьоипк микк уис&зку;ког&зку;иоиз мгеаккз;

23.	Оиг Ьгиизек агтз кипд ир ког топи&зку;тепкз;

24.	Оиг зкегп а1аг&зку;итз скапдес! ко теггу тее&зку;кипдз,

25.	Оиг Ьгеа&зку;с1ки1 тагскез ко ЬеИдкк&зку; ки1 теа&зку; зигез .

26.	Сг1т-у1задес1 маг какк зтоокк’Ь кйз мгипк&зку; 1ес1 кгопк;

27.	Апс! пом, ипзкеак ок	тоипк&зку;ипд ЬагЬеЬ зкееЬз

28.	То кгидкк кке зои1з	ок кеаг&зку;ки1 аск/ег&зку;загиез,

29.	Не сарегз питЫу 1п	а 1аЬу’з скатЬег

30.	То кке 1аз&зку;сиу&зку;иоиз р1еа&зку;зипд ок а 1ике.

31.	Вик I, ккак ат пок зкарес! ког зрогк&зку; йуе кгиекз,

32.	Мог таЬе ко соигк ап атог&зку;оиз 1оок1пд-д1азз;

33.	I, ккак ат гис!е1у зкатр’с!, апс! мапк 1оуе’з та^&зку;езку

34.	То зкгик Ьекоге а мапкоп атЬИпд путрк;

35.	I, ккак ат сиг&зку; каИ ’ Ь. ок ккиз каиг ргор&зку; огкиоп,

36.	СкеакеЬ ок кеа&зку;киге Ьу сИз&зку; зетЬ&зку; Ипд пакиге,

37.	Эеког&зку;тес1, ипкип&зку; йзк’Ь, зепк Ьекоге ту Ыте

38.	1пко кЫз Ьгеа&зку;кЫпд мог1Ь, зсагсе ка1к таЬе ир,

39.	Апс! ккак зо 1ате1у апс! ип&зку;казк&зку;иоп&зку;аЫе

40.	Ткак Ьодз Ьагк ак те аз I ка1к Ьу ккет;
41.	ЭДку, I, 1п Шз меак р!р&зку;1пд кйте ок рейсе,

42.	Науе по Ье&зку; Пдкк ко разз амау кке кате,

43.	Пп1езз ко зру ту зкаскж йп кке зип

44.	Апс! Ьез&зку;сапк оп тапе сжп Ьекогт&зку;1ку:

45.	Апс! ккеге&зку;кого, запое I саппок ргоуе а 1оуег,

46.	То епкег&зку;ка!п ккезе Тайг меИ-зрокеп Ьауз,

47.	I ат с!екег&зку;т1пес1 ко ргоуе а У111а1п

48.	Апс! каке кке 1сПе рТеа&зку;зигез ок ккезе Ьауз.

49.	Р1окз кауе I 1а1Ь, 1пс1ис&зку;к1опз йапдег&зку;оиз,

50.	Ву Ьгипкеп ргорк&зку;ес!ез, НЬекз апс! Ьгеатз,

51.	То зек ту Ьгоккег С1аг&зку;епсе апс! кке кипд

52.	1п ЬеасПу каке кке опе адакпзк кке оккег:

53.	Апс! И Капд Ескгагс! Ье аз кгие апй ^изк

54.	Аз I ат зиЬк!е, ка1зе апс! кгеаск&зку;егоиз,

55.	Тказ Ьау зкоиЫ С1аг&зку;епсе с1озе1у Ье тем’Ь ир,

56.	АЬоик а ргорк&зку;есу, мЫск зауз ккак ’С’

57.	ОТ ЕЬмагсГз кеагз кке тигй&зку;егег зка!1 Ье.

58.	Е1уе, ккоидккз, скжп ко ту зои1: кеге

59.	С1аг&зку;епсе сотез.

60.	</с11у>

Результат этих изменений показан на рис. 20.5.

0 Ми 1Т±р1(г Сй1итп5	X "р

Э С О © 1оса1Ьов1/Ехашр1'е5/5еа]Оп_Э/21)/е'ОЛ1р1₽-05.Ьгт1	€4 Д- * =УГ

Мо’л 15 Же мгттсг оГ
оиг дьсоп(еп: Маск
й1опоиз зиттег Ьу
Пий зип о Г Уогк;
Апс] а1] Же скпнк
Жа( 1оигЧ1 ироп оиг
Ьоизс [п Же деер
Ьсчот о Г (Ье ос сап
ЬипеЖ Мои аге оиг
Ьго^з Ьоип4 адЖк
У1с(опоиз игсаЖз;
Оиг Ьгиьед агтз
Ьип@ ир Гог топи-
тетз; Оиг зссгп
а1агитз сЬап§ед !о
тепу тееНпоз, Оиг
дгеадГи! тагсЬез (о
дск^ЫГи! теазигсз.
<3пт-у|зз^ес1 \*аг

11 лЖ зпюоЖ’с] Н ёй
итпкк\1 ГгопС Апс!
по\у, 1П51еа4 о Г
тоипйт; Ьагдсс!
к(ееск То ГтЖ( Же
зоик о Г ГеагГи!
аЖсгзапез. Нс са-
рсгз ттЫу 1п а
1адуЧ сЬэтЬег То
Же 1азс1Уюи5 р1еа-
зтц о Г а 1и(с. Ви( I,
Ж а! ат по! Жаред
Гог зрогНуе (Нс к я.
Мог таде го соип
ап атотоиз 1оок|п§-
§1азз; к Жа( ат
гиЖНу зтатр’д, ап8
у/ап( 1очеЧ тазехгу
То з1ги! ЬеГоге а

\Уап!оп атЫтд
путрк; 1, [Ни! ат
сигиНГс! о Г Ж1з Гат
ргороИюп, С1ка1сс1
□Г Геа!игс Ьу (Их-
зетЫт& патге,
ОсГогтсЖ ипНп-
пЖ'Ж 5сп! ЬеГогс ту
Нте 1гНо ЖЬ Ьгеа-
Жт$ иогкк зсагое
11 а И таек ир. Апс!
Жа! ко 1ате1у апс]
ипГаЖюпаЫе ТкаХ
<1о^5 Ьагк аг тс аз I
ЬаИ Ьу Жет; ХУЬу,
1, 1п Жк \уеак р!р-
1П8 ите оГ реасе.
Науе по скП^М (о
ракк а\\ау Же и тс.

Нпкзк к) зру ту
Жайом т (Не кип
Апс1 дезсаш оп
П11 пс оигп дсГогт-
1!у: Апс] ЖегеГоге.
ятсе I сапно: ргоуе
а 1оусг, То сп(стт
Жсзс Га п' 1Ус11-зро-
кеп дауя+ I ат
дс(спп1псд 1о ргоус
а уШат Лпд 11а1с
Же ц11е рказигек оГ
Жезе дау з. Р1о:$
кауе I 1а1Ж Ждис-
Нопз дап^сгоиз, Ву
дгипкеп ргорЬеаез.
ПЬек апд дгсатз.
То зс: ту ЬгоЖсг
С1агепсс апд (Нс

кт^ 1п дсасНу На1е
111е опе э^апШ (Не
оЖсг; Аги! 1Г Кти
Ед\\гаг<1 Ьс аз (гис
апд. ]ик( Аз I ат
зиЬ:1е, Га1зе алд
(геаскегоиз. ТЫз
дау зкоиН С1ап:псс
с1озе1у Ье те\у’д
ир, АЬои( а ргорк-
ссу. иЖкк зауз Жа1
’О’ О Г Е д^агд'к
ЬеНз (Не гтпгекгег
зЬа11 Ьс. ЭНс,
(Иои^Ыз, до(о
ту зои1: Неге СIаг-
енсе сотсз.

Рис. 20.5. Результат добавления вручную вариантов переносов длинных слов

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

Хорошо также то, что мягкие переносы &зЬу; работают во всех форматах текста, а
не только в колонках, поэтому, если какую-либо из ваших веб-копий необходимо
будет использовать в другом месте, возможно, в более широких колонках или даже
вообще не в колонках, ей можно будет смело воспользоваться, поскольку добав-
ленные мягкие переносы не будут срабатывать там, где они не нужны.

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

Заключение

Эта глава обогатила ваш инструментарий несколькими новыми функциями оформ-
ления стилей с соответствующим применением свойств блока и текста, что позво-
лит выполнять ручную и автоматическую расстановку переносов в тексте, пере-
форматировать текст в макет с несколькими колонками, добавлять привлекатель-
ные тени и проводить логическую обработку текста при переполнении им размеров
элемента. В следующей главе процесс изучения продолжится рассмотрением всего,
что может дать нам в стилевом оформлении задание цвета и прозрачности.
ГЛАВА 21

Цвета и прозрачность

Введение

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

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

Структура

В этой главе рассматриваются следующие темы:

♦	Порядок использования цветового пространства КСВ.

♦	Способы добавления цвета из цветового пространства Н8Ь.

♦	Приемы использования альфа-прозрачности.

♦	Способы создания комбинаций из различных цветовых типов для достижения
большего эффекта.

Цели

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

Цветовая система КОВ знакома, наверное, всем, кто когда-либо имел дело с С88.
Цвета в ней задаются в формате #ксв или #ккссвв. Например, #ооо — абсолютно чер-
ный цвет, а #ггг — абсолютно белый, #гоо — красный, #ого — зеленый, а #оое —
синий цвет, всего 16x16x16 (или 4096) возможных цветов при использовании
формата задания цвета с одной цифрой на каждый компонент, например #гев для
персикового цвета.

Можно также воспользоваться двузначным форматом задания цвета, позволяющим
поддерживать 256 х 256 х 256 (или более 16 миллионов) возможных цветов, на-
пример #гге5В4 для более конкретного и гораздо более точно заданного оттенка
персикового цвета. И, как уже известно, заглавные буквы в шестнадцатеричных
обозначениях использовать необязательно, потому что комбинация #ЕеЬ также зада-
ет персиковый цвет, как и комбинацией #ЕЕе5Ь4.

Разумеется, когда не нужен точный подбор цветов, можно просто воспользоваться
одним из 147 поддерживаемых названий. Их преимущество заключается в мгно-
венной узнаваемости при первом же просмотре таблиц стилей; например, когда
применяются такие интересные названия, как апМдиемЫЕе (античный белый) или
ИдЬЪзеадгееп (светло-зеленый) И Т. Д.

Но теперь в С883 для установки необходимых значений КОВ можно воспользо-
ваться функцией гдь (), и при этом не ограничиваться использованием шестнадца-
теричных значений, поскольку можно также использовать десятичные числа от О
до 255 или процентные значения от 0 до 100. Например, гдЬ(255, 229, 180) и
гдЬ(Ю0%, 90%, 70%) достаточно точно (и почти что точно для процентных значений)
позволяют задать такой же персиковый цвет, как и при применении комбинации
#ЕЕе5В4.

В примере 21.1, чтобы укоротить слишком длинный документ, для заполнения эле-
мента <оиЕриЕ>, указанного в строке 10, тысячами инструкций <а±у> с целью демон-
страции диапазона различных значений КОВ, примененных к ним с использовани-
ем функции гдЬ(), используется функция шаблонов, впервые упомянутая в главе 18
«Создание фона».

Пример 21.1

1.	< ! ВОСТЕРЕ Мт1>

2.	<Мт1>

3.	<Ъеас1>

4.	<МЕ1е>КСВ Со1огз</ММе>

5.	<зЕу1е>

6.	сНу { ЕеРдЪЕ : 1рх; }

7.	</зЕу1е>

8.	</Ееас1>

9.	<Ьос1у>

10.	<оиЕриЕ 1с1=' оиЕриЕ' ></оиЕриР>
11.	<зсг!рк>

12.	ког (з = 0 ; з < 101 ; з += 10) {

13.	Гог (к = 0 ; к < 101 ; к += 10) {

14.	Гог (1 = 0 ; 1 < 101 ; 1 += 10) {

15.	6оситепк.декЕ1етепкВу1сЦ'оикрик').тппегНТМЪ +=

16.	'Секиу зку1е='Ьаскдгоипс!:гдЬ (${ Л%, ${к}%, ${!}%)'></сПу>\п'

17.	}

18.	}

19.	}

20.	</зсг!рк>

21.	</Ьос1у>

22.	</Ъкт1>

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

В примере начиная со строки 12 в разделе <зсг1рк> задаются три вложенных цикла
1ауа8спр1. Значения переменных этих циклов з, к и 1 увеличиваются в диапазоне от
О до 100 с шагом 10 за каждый проход цикла. В результате в переменной 1 во внут-
реннем цикле постоянно перебираются значения 0, 10, 20 и так далее до 100, а за-
тем все начинается снова, при этом значение переменной к в среднем цикле увели-
чивается на 10, а внутренний цикл запускается снова и снова и так далее, пока
внешний цикл, наконец, не увеличится на 10 после задания 100 элементов <сНу> (и
далее после задания каждых 100 элементов). В итоге во внутреннем цикле пройдет
тысяча итераций, в среднем — сотня, а во внешнем — десять.

Получается, что к функции гдЬ() в строке 16 применяется диапазон значений крас-
ного, зеленого и синего цвета в процентах от 0 до 100 с шагом 10. Код может про-
ходить все циклы с увеличением значений их переменных на единицу, но тогда по-
лучился бы 100 х Ю0 х Ю0 (или миллион) элементов <сИу>, что заняло бы много
времени и, скорее всего, привело бы к сбою работы браузера.

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

Вставка нужных значений происходит в строке 16, где осуществляется доступ к
трем значениям шаблона: ${ л}, $ {к} и ${1}. Текущее значение в переменных при ка-
ждом доступе к этим значениям шаблона заменяется на строку, а затем к каждой
строке добавляется знак %, и функция гдЬ() получает значения в процентах. Теперь
уже известно, что все эти чудеса происходят по той причине, что вместо одинарных
или двойных кавычек для строки используются обратные кавычки, уведомляя тем
самым 1ауа8спр1 о необходимости подстановки значений в шаблон.
0 КЙВСо1ог5	X +

С О © ।оса I НовСЛха ппр1е5/5епюп_3/21/екатр1е>01.НтГ	’ V

Рис. 21.1. Диаграмма КОВ-комбинаций, составленных из цветовых полос

Ниже приведены только первые несколько из 1000 созданных элементов «Цу>, в
которых можно заметить динамику процесса увеличения значений, задаваемую
внешним и средним циклами, для третьих и вторых значений, в то время как пер-
вые значения останутся неизменными до создания 100 элементов <Щу>.

<сНу зку1е="Ьаскдгоипс1: гдЬ (0%, 0%Л 0%) "></сИу>
<сИу зку1е="Ьаскдгоипс1: гдЬ (0%, 0%Л 10%) "></скпл>
<сНу зку1е="Ьаскдгоипс1:гдЬ (0%, 0%, 20%) "></сНу>
<сИу зку1е="Ьаскдгоипс1:гдЬ (0%, 0%, 30%) "></сНу>
<с11у зку1е=’’Ьаскдгоипс1:гдЬ (0%, 0%Л 40%) "></сНу>
<сИу зку1е=’’Ьаскдгоипс1:гдЬ (0%, 0%Л 50%) "х/скп7>
<сНу зку1е="Ьаскдгоипс1:гдЬ (0%, 0%, 60%) "></сНу>
<сИу зку1е=’’Ьаскдгоипс1:гдЬ (0%, 0%Л 70%) "></сНу>
<сИу зку1е=’’Ьаскдгоипс1:гдЬ (0%, 0%Л 80%) "></скп7>
<сИу зку1е="Ьаскдгоипс1:гдЬ (0%, 0%, 90%) "></сНу>
<сИу зку1е="Ьаскдгоипс1:гдЬ (0%, 0%, 100%) "></сИу>
<сИу зку1е="Ьаскдгоипс1:гдЬ (0%, 10%, 0%) "></скпл>
<сИу зку1е="Ьаскдгоипс1: гдЬ (0%, 10%, 10%) "></сНу>
<сИу зку1е="Ьаскдгоипс!:гдЬ (0%, 10%, 20%) "></сИу>
<сНу зку1е="Ьаскдгоипс!:гдЬ (0%, 10%, 30%) "></сНу>
<сИу зку1е=’’Ьаскдгоипс1:гдЬ (0%, 10%, 40%) "></сИу>
<сНу зку1е="Ьаскдгоипс1:гдЬ (0%, 10%, 50%) "></сИу>
<!— екс... —>
При желании увидеть весь вывод, создаваемый этим кодом, можете перед закры-
вающим тегом </зсг1р^> вставить следующую строку, записывающую копию кода
НТМЬ в консоль разработчика:

сопзоЕе. 1од ЩоситепЕ. деЕЕ1етепЕВу1с1 (’ оиВриЕ ’) . тппегНТМЪ)

Использование цветового круга

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

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

© й6ЁСо1огУУЬее1	X +

Э С О О 1оса1Ьо51/Ехатр1е5/5ес1гоп_3/21/ехатр1е-0^.1п|Лт||	;

Рис. 21.2. Цветовой круг, созданный с помощью конического градиента

Пример 21.2

1.	<1ЭОСТЕРЕ Мт1>

2.	<Ъеас1>

3.

<Е1Е1еЖСВ Со1ог Ш1ее1</Е1Е1е>
4.	<зку!е>
5.	#мЪее1 {
6.	Ыс!Ы	: 400рх;
7.	ЪетдЪк	: 400рх;
8.	Ьогс!ег-гас11из : 50%;
9.	Ьаскдгоипс!	: соЫс-дгасИепк (
10.	гес!, уе11ом,
11.	Ыие, тадепка
12.	</зку!е>
13.	</кеас!>
14.	<Ьос!у>
15.	<сепкег>
16.	<сИу 1с1='^кее1'></с11у>
17.	</сепкег>
18.	</Ьос!у>
19.	</Ыт1>

Игле, адиа,
г гес!); }

В этом примере стилевые установки применяются к элементу <аы> с идентифика-
тором ™ьее1, чтобы задать ему ширину и высоту 400 пикселей, радиус границы 50%,
чтобы сделать его круглым, а затем применить последовательность цветов радуги в
виде конического градиента по ходу часовой стрелки, начиная с позиции 12 часов и
продолжая далее по кругу.

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

Кроме того, цветовое пространство на основе голубого, пурпурного и желтого цве-
тов (СМУ), используемое при печати на бумаге (наряду с черным и поэтому назы-
ваемое СМУК), также просматривается в этом цветовом круге соответственно при
180, 300 и 60 градусах, и все их позиции находятся на равном удалении от позиций
цветов КОВ.

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

КСВА-цвета

Использование функций для отображения цветов дает еще одно преимущество: ес-
ли требуется воспользоваться еще и прозрачностью, вместо гдЬ() можно применить
функцию гдЬа(), где буква «а» означает альфа-прозрачность.
Чтобы показать это в работе, код примера 21.3 рисует желтый фон, а затем на него
накладывается градиент синего цвета, прозрачность которого изменяется слева на-
право от полностью непрозрачного до полностью прозрачного.

Пример 21.3

1.	< ! ЭОСТУРЕ Мт1>

2.	<ЬеаЬ>

3.	<ЕИ11е>из1пд КСВА</Е1Е1е>

4.	<зЕу!е>		
5.	#оиЕег 	{ розтЫоп :	ге1акЮе; }
6.	.Ьох	{ розтЫоп :	аЬзо!ике;
7.		м1с±И.	:	100%;
8.		ЬетдЬЕ	:	200рх;	}
9.	#Ьох1	{ ЬаскдгоипЬ :	уе11ом; }
10.	#Ьох2	[ кор	:	ЮОрх;
11.		ЬаскдгоипЬ :	Ипеаг-дгасНепк (ко г!дЬЕ,
12.		гдЬа(0, 0,	255, 1), гдЬа(0, 0, 255, 0)
13.	</зЕу!е>		
14.	</ЬеаЬ>		

15.	<ЬоЬу>

16.	<сНу 1Ь=’оиЕег’>

17.	<сИу	с!азз=’Ьох’	1Ь=’Ьох1	’></с1гу>

18.	<сИу	с!азз=’Ьох’	1Ь=’Ьох2	’></сНу>

19.	</(±Ю>

20. </ЬоЬу>

21.	</1тЬт1>

Как это выглядит при загрузке в браузер, показано на рис. 21.3.

Здесь в качестве контейнера для двух дочерних элементов с идентификаторами Ьох1
и Ьох2 создается элемент с идентификатором оиЕег. А для класса Ьох, который будет
использоваться для элементов с идентификаторами Ьох1 и Ьох2, задается абсолют-
ное позиционирование, позволяющее им накладываться друг на друга. Для элемен-
та Ьох1 указывается сплошной желтый фон, а для Ьох2 с помощью функции гдЬа () со
значениями 0 для красного, 0 для зеленого и 255 для синего компонента задается
сплошной синий цвет. Он применяется к элементу в виде линейного градиента с
альфа-прозрачностью, постепенно меняющейся от полной непрозрачности (со зна-
чением 1) до полной прозрачности (со значением 0). Иными словами, с переходом
от первого ко второму набору значений:
гдЬа(0, 0, 255, 1)
гдЬа(0, 0, 255, 0)

Для элемента с идентификатором Ьох2 задано также свойство ьор со значением 100
пикселей, поэтому он перемещается на половину высоты элемента с идентифика-
тором Ьох1 вниз, чтобы можно было увидеть эффекты, заданные как для Ьох1, так и
для Ьох2, а также результат наложения этой пары элементов друг на друга.
0 ияпд Н6ВА	х +

<- -> С О Ф 1оса1Ьоя1/Ехап1р1е5/5ес1юп_3/21/ехатр1й-03-Ы:т1 I*? ☆ Л :

Рис. 21.3. Наложение сплошного и прозрачного градиентного цвета

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

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

НЗЬ-цвета

А теперь давайте рассмотрим уже упоминавшуюся здесь функцию Ьз1(), предна-
значенную для задания цвета на основе оттенка, насыщенности и яркости. Как ни
странно, чтобы показать цветовой круг со всеми оттенками, насыщенностью и яр-
костью, в примере 21.4 для создания цветового круга Н8Ь, показанного на рис. 21.4,
используются обычные названия цветов и функция гдЬа ():

Пример 21.4

1.

2.

3.

4.

<ЮОСТУРЕ Мт1>

<Ьеас1>

<Г1Г1е>Ап НЗЪ Со1ог ДОЬее1</Г1Г1е>

<з^у!е>
5.	#оиЬег	{ розбЫоп	: ге!аМуе;
6.		^16ЬЬ	: 400рх;
7.		тагдап	: аико;
8.	.мЬее!	{ розбЫоп	: аЬзо!ике;
9.		М16611	: 400рх;
10.		ЬеадМ	: 400рх;
11.		Ьогбег-гаЫиз : 50%;
12.	#мЪее11	{ Ьаскдгоипб	: соп!с-дга61епк(
13.		геб, уе11ом, 11те, адиа,
14.		Ыие, тадепка, геб) ;
15.	#мЪее12	{ Ьаскдгоипб	: гаЫа1-дгаЫепк
16.		гдЬа(255, 255, 255, 1),
17.		гдЬа(255, 255, 255, 0));
18.	</зку!е>	
19.	</Ьеа6>	
20.	<Ьо6у>	
21.	<61V 16=г	оикег’>
22.	<61V с1азз=’мЬее1’ 16=’мЪее11’></61у>	
23.	<61V с1азз=’мЬее1’ 16='мЬее12’></Ыу>	
24.	</61У>	
25.	</Ьо6у>	
26.	</Мт1>	

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

В цветовом пространстве Н8Ь определяется не только используемый цвет (отте-
нок), но также насыщенность (количество этого цвета) и яркость (степень его ярко-
сти). Поэтому, чтобы максимально приблизиться к цветовому кругу Н8Ь, в центре
изображения на рис. 21.4 — уменьшенная насыщенность и цвет, при переходе к
краям происходит их увеличение.

Этот пример не показывает идеальный цветовой круг Н8Ь, но в результате выпол-
нения его кода мы получаем достаточно близкое представление о нем. Это позво-
ляет использовать рисунок, чтобы разобраться в работе функции Ьз1 ().

Первое значение, передаваемое функции (оттенок), — это расстояние от вершины по
ходу цветового круга, на котором может располагаться цвет. Это значение должно
быть указано в градусах, а не в процентах. Второе значение (насыщенность) — это
расстояние от центра цветового круга до края, указанное в процентах. В центре цвета
практически нет, а край представляет 100%-ную насыщенность этого цвета. И по-
следнее (не показанное на цветовом круге Н8Ь) значение (яркость) показывает, на-
сколько ярким должен быть цвет. Это значение выражается в процентах, и значение в
50% считают нейтральным и используют по умолчанию.
@ АпНЯСокагМее!	х +

<- - с О © 1оса1Ьи1/Ехатр1е5/5есйоп_3/21/ехатр1еЧМ,Ы:п11 I# ☆	*	:

Рис. 21.4. Цветовой круг Н8Ь

Теперь, разобравшись в особенностях работы функции Ьз1 (), рассмотрим пример 21.5,
код которого выводит на экран широкий спектр поддерживаемых значений в виде
диаграммы цветовых полос, показанной на рис. 21.5.

Пример 21.5

1.	< ! ЭОСТУРЕ Мт1>

2.	<Мт1>

3.	<Ъеас1>

4.	<Г1Г1е>НЗЕ Со1огз</Г1Г1е>

5.	<зГу!е>

6.	сНу { ИеГдйГ : 1рх; }

7.	</зГу!е>

8.	</Ъеас1>

9.	<Ьос1у>

10.	<оиГриГ 1с1=’оикрик’></оикрик>

11.	<зсг1рГ>

12.	Гог (] = 0 ; э < 360 ; ] += 36) {

13.	Гог (к = 0 ; к < 101 ; к += 10) {

14.	с1оситепк.декЕ1етепГВу1с1('оикриГ') .ГппегНТМЪ +=

15.	'<сПу зку1е=’Ьаскдгоипс1:йз1 ($ {з }, ${к}%, 50%) ’></скпл>\гГ

16.	}

17.	}
18.	</зсг1р-Ь>

19.	</Ьос1у>

20.	</1тЬт1>

0 Н51Со1ог$	X +

<- С О ® 1оса1Но5УЕ>атр1е5/5ес11ОП_3/21/ехатр1е-05.11Гт1	☆ А :

Рис. 21.5. Широкий спектр значений оттенка и насыщенности

В отличие от кода примера 21.1, здесь используются только два цикла, поскольку
значение яркости привязано к 50%: это стандартная величина яркости, и любые
значения ниже него будут намного темнее, вплоть до черного со значением 0%, или
намного светлее, вплоть до белого со значением 100%.

При желании увидеть НТМЬ-код, сгенерированный сценарием, можно непосредст-
венно перед закрывающей инструкцией </зсг1рЕ> вставить показанную ниже стро-
ку, после чего можно будет просмотреть код в консоли разработчика:

сопзо!е. 1од ЩоситепЕ. деЕЕ1етепЕВу1с1 (’ оиЕриЕ ’) . тппегНТМЪ)

Применение прозрачности

И наконец, если нужно просто задать элементу степень прозрачности, не задавая
никаких цветов, можно воспользоваться свойством орастЕу, как в примере 21.6, где
отображаются десять элементов <аы>, и у каждого из них прозрачность меньше,
чем у предыдущего.

Пример 21.6

1.	< ! ЭОСТУРЕ Ыт1>

2.	<Ыт1>

3.	<Ъеас1>

4.	<ЫЫе>0рас1Гу</Ш1е>

5.	<зку!е>

6.	сНу {

7.	Ьаскдгоипс!	:	Ыие;

8.	Еопк	:	ЬоЫ 12рк Мопозрасе;

9.	раскНпд	:	1рх Зрх; }

10.	</зРу1е>

11.	</Иеас1>

12.	<Ьос1у>

13.	<скЫ зку1е='орасЫу: 0.0’>ОрасЫу: 0.0</сЫ>

14.	<41у зку1е=’орас!ку: 0.1’ХЭраЫку: 0.1</с1гу>

15.	<41у зку!е=’орасЫу: 0.2 ’ >ОраЫку: 0.2</сЫл>

16.	<скЫ зку1е='орасЫу: 0 • 3 ’ >ОрасЫу: 0.3</сЫ>

17.	<(Ы зку1е=’ орасЫу: 0.4 ’ >ОраЫку: 0.4</сЫ>

18.	<41у зку!е=’орасЫу: 0.5 ’ >ОраЫку: 0.5</скЫ>

19.	<41у зку1е=* ораЫку: 0.6 ’ >ОраЫку: 0.6</сЫл>

20.	<(Ы зку1е='орасЫу: 0.7 ’ >ОрасЫу: 0.7</сЫ>

21.	<41у зку1е=’ораЫку: 0.8’>ОраЫку: 0.8</скЫ>

22.	<41у зку1е=* орасЫу: 0.9 ’ >ОраЫку: 0.9</сПу>

23.	<41у зку1е=’ орасЫу: 1.0 ’ >ОраЫку: 1.0</сЫл>

24.	</Ьос1у>

25.	</Мт1>

0 ОрзбГу	X +

О О Ф кдса№ю5МЕхатр1е5/5есйоп_3/21/ьехатр(е-06.Ь1т1 ☆	!*	:
На рис. 21.6 можно увидеть результат простого ввода значений от 0 для отсутствия
непрозрачности (полной прозрачности) и до 1 для полной непрозрачности (отсут-
ствия прозрачности), и на этом все.

Заключение

И на этом изучение использования цветов С883 завершается. Теперь можно будет
четко указывать нужные цвета теми способами, которые наиболее полно соответ-
ствуют вашим представлениям о выборе цвета. В следующей главе наступит черед
обратить внимание на текстовые эффекты и веб-шрифты.
ГЛАВА 22

Текстовые эффекты и шрифты

Введение

Когда создавался С883, стилизация текста уже была достаточно развитой, но, чтобы
Интернет мог серьезно конкурировать с возможностями печатных СМИ, предстояло
еще очень многое сделать. В плане развития было представлено множество новых
функций и способов стилизации текста и шрифтов, в частности, касательно примене-
ния теней, наложения текста, разнотипных переносов слов, а также была устранена
зависимость от использования только тех шрифтов, которые предлагались браузера-
ми или операционными системами за счет поддержки веб-шрифтов, ко многим из
которых такие компании, как Соо§1е, теперь открыли бесплатный доступ.

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

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

Структура

В этой главе рассматриваются следующие темы:

♦	Изучение всех тонкостей изменения размеров блока и соотнесения этих разме-
ров с его содержимым.

♦	Изучение способов управления текстом в случаях его выхода и невыхода за гра-
ницы элемента.

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

♦	Получение полного представления о применении теней и использовании веб-
шрифтов.
Цели

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

Задание размеров блока

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

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

По умолчанию для свойства Ьох-з121пд используется значение соп^еп^-Ьох, при этом
С88-размеры ширины и высоты относятся к области содержимого элемента, и лю-
бые отступы и границы игнорируются. Это эквивалентно следующей установке:

Ьох-зтхтпд: соп^еп^-Ьох;

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

Ьох-З121пд: ЬоЫег-Ьох;

При этом любая толщина границы или отступа должна быть сжата внутри указан-
ной области, уменьшая, в силу необходимости, часть содержимого. В примере 22.1
создается пара одинаковых элементов с той лишь разницей, что для свойства Ьох-
зтхтпд одного из них выбрано значение соп^еп^-Ьох, а другого — ЬоЫег-Ьох.

Пример 22.1

1.	<1ЭОСТУРЕ Мт1>

2.	<ЛГш1>

3.	<Ъеас1>

4.	<Г1Г1е>Вох з121пд</ММе>

5.	<з^у!е>

6.	.Ьох { ЕопГ	: Ьо1с1 14р^ зегтГ;

7.	ЬоЫег	: Юрх зоПс! геф
8.  9.	м1с±Ъ	:  ИетдЪ^	:	: 200рх;  : ЮОрх;
10.	раскНпд	:	: 20рх;
11.	тагдап-гадЪ^	:	: 20рх;
12.	Г1оа^	: 1еГЮ*
13.	сПзр1ау	:	: Г1ех;
14.	^зПГу-сопкепк :	: сепкег;
15.	аПдп-Юетз	:	: сеп^ег;
16.	ЪехЪ-аИдп	:	: сеп^ег;
17.	со!ог	:	: Ыие;
18.	Ьаскдгоипс!	:	: Ите;
19.	Ьаскдгоипс1-с11р :	: соп^еп^-Ьох; }
20.	#Ьох1 { Ьох-захапд	:	: соп^еп^-Ьох; }
21.  22.  23.  24.	#Ьох2 { Ьох-захапд	:  </з^у!е>  </Ъеас1>  <Ьос1у>	: Ьогбег-Ьох; }
25.	<сИу с!азз='Ьох’ 1с1=’Ьох1 ’ >ЪЮ1пд 1п а Ьох</сИу>	
26.  27.  28.	<сИу с!азз='Ьох’ 16=' Ьох2 ’ >ЪЮ1пд 1п а Ьох</сИлг>  </Ьо6у>  </ ккт! >	

Для обоих элементов, отнесенных к классу Ьох, заданы цвет и стиль шрифта, 10-пик-
сельная красная граница, а также 20-пиксельный внутренний отступ. Другие уста-
новки С88 элементам с этим классом задают размер 200 х 100 пикселей и гаран-
тию, что элементы будут размещены на одной линии, а содержимое — распола-
гаться по центру. Кроме того, свойство Ьаскдгоипа-сПр для этого класса
устанавливается только на область содержимого соп^еп^-Ьох, поэтому лаймовый
фон в каждом случае точно указывает на границы области.

На рис. 22.1 можно увидеть, что у первого элемента действительно есть 10-пиксель-
ная красная граница, внутри которой 20 пикселей отступа, а затем область содер-
жимого размером 200 х 100 пикселей с текстом.

Рис. 22.1. Задание размеров блока по умолчанию и по границе
А вот второй элемент, включая отступы и границы, точно соответствует размеру
области содержимого первого. Это связано с тем, что для свойства Ьох-з1х1пд второ-
го элемента установлено значение ЬоЫег-Ьох, стало быть, все границы и отступы
должны помещаться по ширине и высоте в заданные 200 х 100 пикселей. В резуль-
тате область содержимого уменьшается до оставшегося пространства, которое в
данном случае составляет 140 х 40 пикселей после вычитания 20 пикселей отступа
и 10 пикселей границы с каждой стороны, что в сумме дает уменьшение на 60 пик-
селей в каждом направлении.

Наиболее полезным это свойство может оказаться в условиях, когда отступы и
(или) границы элементов в макете изменяются независимо. Если заставить эти час-
ти элемента находиться в пределах ширины и высоты, предоставляемых вашим ма-
кетом, установив для свойства Ьох-з1х1пд таких элементов значение ЬоЫег-Ьох, то
эти события могут изменить или, что еще хуже, сломать дизайн макета.

Текстовое переполнение

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

Результат показан на рис. 22.2.

0 Тех( ОуегЛоу/	X +

С О ® 1оса1Ьо51/Ехатр1е5/БесГюп_3/22/ехатр1е_02.Ыт1	•

8йа\у, по 1оо $(ирМ а Гас!, I ри( воо1 оп ууагЬ - полу геад 1Ьа1 Ьаскууаг

81галл, по 1оо зШрМ а Гай, I рп( 8оо€ оп ллагЬ - полу геад Ша1 Ьаск...

Рис. 22.2. Текстовое переполнение, усеченное двумя разными способами

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

Пример 22.2

1.	< ! ЭОСТУРЕ Мт1>

2.	<Мт1>

3.	<Ъеас1>
4.	<к1к!е>Техк 0уегГ1ом</к1к1е>

5.	<зку!е>		
6.	.Ьох	{ Гопк	:	Ьо1а 16рк зегИ;
7.		ЬоЫег	:	2рх зоЫа Ыие;
8.		Ыакк	:	640рх;
9.		раскНпд	:	5рх;
10.		тагдап	:	5рх 0;
11.		Г1оак	:	1еГк;
12.		со1ог	:	уе11ом;
13.		Ьаскдгоипа	:	о11ие;
14.		мЫке-зрасе :	помгар;
15.		оуегГ1ом	:	тсйеп; }
16.	#Ьох1	{ кехк-оуегГ1ом :	сИр;	}
17.	#Ьох2	{ кехк-оуегГ1ом :	еШрзаз; }
18.	</зку!е>		
19.	</Ъеас1>		
20.	<Ьос1у>		
21.	<сИV с!азз='Ьох' 1а='ЬохГ		Г>3кгам, по коо зкирЫ а Гаф
22.	I рик	зоок оп магкз - пом геаа ккак Ьаскмагаз .</сНу>	
23.	<сИу с!азз='Ьох' 1а='Ьох2'		Г>5кгам, по коо зкирЫ а Гаф
24.	I рик	зоок оп магкз - пом геаа ккак ЬаскмаЫз .</сНу>	
25.	</Ьос1у>		
26.	</Икт1>		

Чтобы свойство кехк-оуегПом возымело какой-либо эффект, сначала для свойства
мЫке-зрасе нужно установить значение помгар, а для свойства оуегЫом — ыааеп. Без
установки для свойства мЫке-зрасе значения помгар текст будет просто перетекать
со строки на строку, а без установки для свойства оуегЫом значения мааеп текст,
если ему понадобится, будет выходить за пределы элемента, создавая хаос на стра-
нице.

Перенос длинных слов

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

В примере 22.3 создаются два элемента, в каждом из которых в качестве образа
отображается ОДНО И ТО же длинное СЛОВО АпЫаГзезкаЬИзЬтепкаЫапГзт. Это слово
явно длиннее своих элементов, поэтому получившееся переполнение, как показано
на рис. 22.3, обрабатывается по-разному.
Рис. 22.3. Слишком длинное слово обрабатывается двумя разными способами

Пример 22.3

1.	СЮОСТУРЕ Мт1>
2.	<Ылп1>
3.	<Ьеас1>
4.	<к!к1еЖгарр1пд Уегу Ъопд ЭДогс1з</к1к1е>
5.	<зку!е>
6.	.мгар { ЬоЫег	: 2рх зоИс! оИуе;
7.	Уопк	: ЬоЫ 24рк топозрасе
8.	м1с±Ь.	: ЗООрх;
9.	ЬеадМ	: 150рх;
10.	Ьаскдгоипс! : Ите;
11.	со1ог	: ригр!е;	}
12.	#мгар1 { шогсЬшгар : поила!;	}
13.	#мгар2 { шогсЬшгар : Ьгеак-^огс1; }
14.	</зку!е>
15.	</Ьеас1>
16.	<Ьос1у>
17.	<сНу с1азз='мгар' 1с1='мгар!' >

18.	АпМсИзезкаЬИзЬтепкагтаптзт

19.	13 опе о Г кке 1опдезк могкз

20.	</сИу>

21.	<Ьг>

22.	<сИу с1азз='мгар'	1с1='^гар2'>

23.	АпМсИзезкаЬИзЬтепкагаапазт
24.	13 опе оГ ЕЪе 1опдезЕ иогёз

25.	</<±Ю>

26.	</Ьос1у>

27.	</ЪШ1>

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

Изменение размеров элементов пользователем

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

В примере 22.4 создается четыре разных элемента: два элемента <аю>, элемент
<оикрик> и элемент <каЫе>. В первом из них возможность изменения размеров поль-
зователем не поддерживается, поскольку его свойству гезахе присвоено значение
попе, а вот в других элементах поддерживается, потому что у них этому свойству
присвоено другое значение.

Пример 22.4		
1.	СЮОСТУРЕ Мт1>	
2.	<Мт1>	
3.	<Иеас1>	
4.	<М-Ые>Е1етепЕ Рез1х1пд</ЕЮ1е>	
5.	<зЕу1е>	
6.	.Ьох { ЬоЫег	: 2рх зоИб. ригр1е;
7.	ЕопЕ	: ЬоЫ 12рк Аг1а1;
8.	тагдап-гадМ :	: Юрх;
9.	м1с±Ъ	:	: ЮОрх;
10.	ЪеРдЪЕ	:	: ЮОрх;
11.	Ьаскдгоипс!	: с!агкогапде;
12.	СО1ОГ	: уе11ом;
13.	оуегЕ1ом	: аико;
332	Глава 22
14.	Г1оа^	: 1еГ^;	}
15.	#Ьох1 { гезтге	: попе;	}
16.	#Ьох2 { гезтхе	: !юг1хопГа1; }
17.	#ЬохЗ { гезтхе	: уегМса!; }
18.	#Ьох4 { гезтге	: Ьо^Ь;	}
19.	</з^у!е>
20.	</Иеас!>
21.	<Ьос!у>
22.	<сНу с1азз='Ьох' 1с!='Ьох1'>
23.	Тмаз ЬгИИд, апс! ^Ие зИ^Ну ^оуез сШ. дуге
24.	апс! дттЫе 1п Гке маЬе; а11 т!тзу меге ГЛе
25.	Ьогодоуез, апс! -Ыое тоте гаГЬз ои^дгаЬе.
26.	</сНу>
27.	<сНу с1азз='Ьох' 1с!='Ьох2'>
28.	Тмаз ЬгИИд, апс! ^Ие зИ^Ну Ъоуез сИб дуге
29.	апс! дттЫе 1п ^Ие маЬе; а11 тпгтзу меге ^Не
30.	Ьогодоуез, апс! ^Ие тоте га^Из ои^дгаЬе.
31.	</с11у>
32.	<ои^ри^ с1азз='Ьох' 1с!='ЬохЗ'>
33.	Тмаз ЬгИИд, апс! Гке з1гЫ1у ^оуез сИс! дуге
34.	апс! дттЫе 1п ^Ие маЬе; а11 тТтзу меге “ЬНе
35.	Ьогодоуез, апс! 1сНе тоте га^Ьз ои^дгаЬе.
36.	</ои^ри^>
37.	<^аЫе>
38.	<Ъг>
39.	<Ы с1азз='Ьох' 1с!='Ьох4'>
40.	Тмаз ЬгИИд, апс! ^Ие зШсЬу ^оуез сИс! дуге
41.	апс! дТтЫе 1п !ске маЬе; а11 тттзу меге ЪИе
42.	Ьогодоуез, апс! ЪИе тоте гаМоз ои^дгаЬе.
43.	</1пс1>
44.	</-Ьг>
45.	<АаЫе>
46.	</Ьос!у>
47.	</кГт1>

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

Такой результат достигнут за счет предоставления свойству гезтхе значений попе,
Ьог12опЪа1, уегМса! и Ьоъи для стилевого оформления элементов с идентификатора-
ми, соответственно, Ьох1, Ьох2, ЬохЗ и Ьох4. Если приглядеться к нижним правым уг-
лам элементов со второго по четвертый, то можно заметить там небольшой значок
с двумя диагональными линиями, указывающий пользователю, что размер элемен-
та можно изменять, перетаскивая границы элемента за этот угол.

Рис. 22.4. Четыре возможных параметра изменения размера в действии

Выделение фокуса

Раз уж разговор только что шел об изменении пользователем размера поля ввода,
то лучшего места для рассмотрения свойства 1ауоиЕ-оГ1зеЕ, чем это, пожалуй, не
найти. Использование этого свойства дает возможность увеличить контур, разме-
щаемый вокруг элемента при получении этим элементом фокуса.

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

Пример 22.5

1.	<!ЭОСТУРЕ НЕт1>

2.	<Мш1>

3.	<Ъеас1>

4.	<МЕ1е>0иЕ11пе</к1Е1е>

5.	<зку!е>

6.	Ъкш!	{ ГопЕ	: ЬоЫ 14рЕ Аг1а1; }

7	.	Ъкш! * : Госиз { оиШпе	: с!азЪес1 ЕЫск;

8.	оикИпе-оГГзек : Юрх;	}

9.	</зку!е>

10.	</Иеас1>

11.	<Ьос1у>

12.	<и!>

13.	<рха кгеГ=' помкеге' >А Ипк</ах/р>

14.	<рХ1прик куре='кехк'х/р>
15.	<рха кгеГ=' а1зопоЫеге' >АпоЫег Ипк</ах/р>

16.	</и1>

17.	</Ьос1у>

18.	</Ыт1>

Свойство 1ауоик-о11зек поддерживает все значения размера С88, например Юрх,
о. 2еш и т. д. Результат выполнения кода примера показан на рис. 22.5.

Рис. 22.5. Элемент ввода получил фокус,
после чего его граница сместилась на 10 пикселей

Текстовые тени

В главе 20 «Свойства блока и текста» рассматривались способы создания теней для
элементов. А теперь посмотрим, как с помощью свойства гехЫзЬаскж можно создать
тени только для текста. В примере 22.6 это свойство используется четыре раза в
разных классах, и тени, в соответствии с присваиваемыми свойству значениями
гор-1егг, гор-гтдьг, ЬоХот-1еЫ и Ьоггот-гтдЬг, будут помещаться в левый верхний,
правый верхний, левый нижний и правый нижний угол элемента.

Пример 22.6

1.	<! ЭОСТУРЕ Мт1>

2.	<Мт1>

3.	<Ьеас1>
4.	<ЫЫе>ТехГ 5Ьаскжз</ЫЫе>
5.	<зЕу!е>
6.	. зЬаскж { со!ог	: Ыие;
7.	Гопк	: ЬоЫ 64рк Агиа! ;
8.	#зЬаскж1 { ГехГ-зЬаскж : -5рх -5рх 8рх #555
9.	#зЬаскж2 { ГехГ-зЬаскж : 5рх -5рх 8рх #555
10.	#зЬаскжЗ { ЕехЕ-зЬаскж : -5рх 5рх 8рх #555
11.	#зЬаскж4 { ЕехЕ-зЬас1ом : 5рх 5рх 8рх #555
12.	</зку1е>
13.	</Ьеас1>
14.	<Ьос1у>

15.	<сеп-Ьег>

16.	<зрап	с1азз=’ зЪаскж’	1с1=	’	зЪас1ом1	’	>Ме</зрап>	&пЬзр;

17.	<зрап	с1азз=’ зЪаскж’	1с1=	’	зЪаскж2	’	>апс!</зрап>	&пЬзр;

18.	<зрап	с1азз=’ зЪаскж’	1с1=’	зкаскжЗ	’	>ту</зрап>	&пЬзр;

19.	<зрап	с1азз=' зЪаскж’	1с1=	’	зЪаскж4	’	>зЪаскж</зрап>

20.	</сеп^ег>

21.	</Ьос1у>

22.	</Щт1>

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

0 ТехС ЗНадоик	X 4-

<- -> С О О 1оса1Ьо5Г/Ехатр1е$/5ес11оп.З/22/ехатр1е_06Дгт1	:

Ме апс! ту зЬайош

Рис. 22.6. Набор теней с разным смещением

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

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

Веб-шрифты

И наконец, настал черед еще одной не менее важной темы этой главы. Речь пойдет
о множестве веб-шрифтов, имеющихся в вашем распоряжении. Как бывает с лю-
быми шрифтами, эти шрифты можно покупать поштучно, пакетами или по подпис-
ке для применения на вашем собственном или на другом веб-сервере. Или же мож-
но воспользоваться совершенно бесплатной огромной библиотекой шрифтов дос-
тупной на таких сайтах, как Ооо§1е Гоп18, откуда мы и будем брать шрифты для
текущего раздела.

Например, чтобы импортировать Ооо§1е-шрифт под названием Вапст§ 8спр1,
нужно в разделе <Ьеаа> документа разместить следующую инструкцию:

<Х1пк геХ="зкуХезкеек"

ЪгеР="ЪЕЕрз://Ропкз.доодХеарХз.сот/сзз2?Рат1Ху=Вапс1пд+Зсг1рк">

Тем самым браузер узнает, что ему нужно импортировать таблицу стилей С88 с
указанного адреса. После этого к шрифту можно будет обращаться из кода С88,
возможно, задав для его применения стилевое оформление класса по имени аапсХпд:
.с!апс1пд { РопЕ-РатХХу : "ВапсХпд ЗсгХрЕ", сигзХуе, зегХР; }

Теперь этот класс можно просто указать в любом элементе, задав отображение его
содержимого с использованием этого шрифта:

<зрап сХазз=’(ХапсХпд’>ТИ1з 1з ВапсХпд Зсг1рЕ</зрап>

В примере 22.7 показанные выше инструкции были объединены в один документ с
отрывком из стихотворения Льюиса Кэрролла.

Пример 22.7

1.	<1ВОСТЕРЕ МтХ>

2.	<Мш1>

3.	<Ъеас!>

4.	<Е1ЕХе>ЭДеЬ	ЕопЕз</Е1ЕХе>

5.	<зЕуХе>

6.	#роет	{ ГопВ-зХхе : 24рЕ;	}

7.	.ВапсХпд { РопЕ-РатХХу : "ВапсХпд ЗсгЕрЕ", сигзХуе, зегХР; }

8.	</зЕу!е>

9.	<Х1пк геХ="зкуХезЪеек"

10.	ЪгеР="ЪЕЕрз://Ропкз.доодХеарХз.сот/сзз2?Рат1Ху=Вапс1пд+Зсг1рк">

XX.	</кеас!>

12.	<Ьос!у>

ХЗ.	<с!1у с!азз='с!апс1пд’ 1с!='роет’>

14.	Тмаз ЬгХХХХд, апс! кке зХХШу Еоуез сГксХ дуге апс! дХтЬХе

15.	Хп кке маЬе; аХХ тХтзу меге кке Ьогодоуез, апс! кке тоте

16.	гаккз оикдгаЬе. "Вемаге кке ЗаЬЬегмоск, ту зоп! Тке ]амз

17.	ккак Ыке, кке сХамз ккак сакск! Вемаге кке ЭиЬдиЬ Ыгс!,

18.	апс! зкип кке РгитХоиз Вапс!егзпаЕск! .

19.	</с11у>

20.	</Ьос!у>

21.	</ЪЕтХ>

Отображаемый текст здесь находится в элементе <аху> с идентификатором роет
стихотворения и относится к классу аапсХпд. Для свойства Ропв-зХхе, принадлежаще-
го элементу с идентификатором роет, устанавливается значение 24рв, а для свойства
РопЕ-РатХХу элементов класса аапсХпд указывается семейство шрифтов Вапст§ 8спр1,
и на всякий случай, если шрифт по какой-то причине будет недоступен, указывает-
ся и разумная альтернатива в виде семейства наклонных шрифтов с засечками. За-
грузка самого шрифта задается в строках 9 и 10 посредством таблицы стилей, кото-
рая находится по указанному 1ЖЬ-адресу. Результат выполнения кода этого при-
мера показан на рис. 22.7.

0 РОП15.

□ X



Тшае> кйУйд, апсЕ Уле &1(Еку Е&ееь с1й1 дуАе атЕ дЕтМе сп
Уле. шаке; аА тЕтду меле Уле Еол&д&аел-, ап.сЕ Уле тете

УлаЕ &Ее, Уле сЕамж УлаЕ саЕеЕУ Вешале Еке УаЕздиА

Рис. 22.7. Стихотворение, отображаемое шрифтом Ооо§1е Папст§ 8спр1

Если доступ к шрифту уже имеется и его нужно загрузить, можно воспользоваться
стилевой установкой @ХопЕ-Хасе, указав имя и ЕГКЕ-адрес местонахождения, откуда
браузер должен загрузить шрифт. Принимаются как шрифты ТшеТуре (. ъъг), так и
ОрепТуре (.оъг), а также файлы форматов веб-шрифтов и .жэГГ2. Например,
если уже имеется шрифт, сохраненный как засгатепЪо-ведиХаг.ъъг, можно восполь-
зоваться следующим кодом:
1. @ХопЕ-Хасе {
2.	ЕопЕ-ГатХХу : "ЗасгатепЕо КедиХаг";

3.	зге	: игХ(’ЗасгатепЕо-КедиХаг.ЕЕЕ'); }

Затем, при желании, можно объявить стилевое оформление класса, упростив дос-
туп к шрифту:
.засгатепЕо { ХопЕ-ХатХХу : "ЗасгатепГо КедиХаг"; }

После чего для использования шрифта останется только в коде НТМЬ отнести
нужный элемент к нужному классу:

<зрап сХазз=’засгатепЕо’>ТИХз Хз ЗасгатепЕо КедиХаг</зрап>

Пример 22.8 — переделанная под именно такую локальную загрузку шрифта вер-
сия предыдущего примера.

Пример 22.8

X .	< ! ЭОСТУРЕ МтХ>

2.	<МтХ>

3.	<Ееас1>

4.	<ЕХЕХе>ЪосаХ Еоп^з</Е1ЕХе>
5.	<зку1е>		
6.	#роет	[ ГопВ-згсе :	: 24рВ;
7.	@ГопВ-Гасе 1	[ Гопк-ГатНу :	: "Засгатеп-Ьо Веди1аг”;
8.		зге	:	: иг! (’ЗасгатепГо-Веди1аг.т')
9.	.засгатепГо 	[ ГопГ-ГатПу :	: "ЗасгатепГо Веди1аг”;
10.	</зГу!е>		

11.	</кеас!>

12.	<Ьос!у>

13.	<сНу с!азз=' засгашепко’ 1с!='роет’>

14.	Тмаз ЬгППд, апс! Мое зИ+у коуез сНс! дуге апс! дгтЫе

15.	1п ГЬе маЬе; а!1 пшпзу меге 1+е Ьогодоуез, апс! кке шоте

16.	гаГйз оикдгаЬе. "Вемаге Гйе ВаЬЬегмоск, ту зоп! Тке ]амз

17.	ккак Ыке, Гйе с!амз ГйаГ саГск! Вемаге кке ВиЬ^иЬ Ыгс!Л

18.	апс! зкип кке Ггитгоиз Вапс!егзпаВсЪ! .

19.	</с!1у>

20.	</Ьос!у>

21.	</ЪГт1>

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

© 1лса1 Яоп(:

□ X

X +

<- Э С О ® 1осаН1О5УЕхатр1е5/$ес11Оп_5/22/ехатр1е_08.Мт1	:

бТшчлА/	ажДД^	ДоисА/ АД	сжД^ъг-

АД	млД Т^е> ттигге, ЧхДЁб «хДсрхАбл

бВ<Ш>оЛ>еДКо/	ЬхмА

Сдгс^Ш 6ВелАНАЛ^/Йб, ^Д^аа^ ?млД; ажЛ ДилъД^ье? ^ъалгйхшЛ/

Рис. 22.8. Применение локальной загрузки шрифта

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

Для просмотра имеющихся (на данный момент) 1300+ бесплатных шрифтов, пре-
доставляемых Ооо§1е, и получения доступа к ним, перейдите по следующему ПКИ-
адресу, где их можно загрузить для локального использования. Если же щелкнуть
кнопкой мыши на названии понравившегося шрифта, чтобы выбрать его стиль, а
затем щелкнуть на значке в виде трех квадратов и знака + в правом верхнем углу
веб-страницы (чтобы открыть диалоговое окно выбранного семейства— зеХес^еа
ГатХХу), появятся правила С88, которые можно скопировать и вставить в свой код
ДЛЯ использования ЭТИХ правил: Хоп^з.доодХе.сот

Но если хотите, можете не копировать и вставлять этот код, а просто последовать
инструкциям, изложенным в разделе и скопировать только 1ЖЬ-адрес местополо-
жения таблицы стилей для шрифта, находящейся на сервере Ооо§1е, после чего
воспользоваться этой таблицей точно также, как и в приведенных здесь примерах, и
тогда все получится в наилучшем виде.

Заключение

На этом изучение множества новых текстовых эффектов, блочной модели, теней и
шрифтов, доступных в С883, завершается. На данный момент из вас уже должен
был получиться специалист по использованию шрифтов, способный создавать веб-
проекты, соответствующие всему лучшему, что может предложить мир печати.
В следующей главе предстоит углубленное изучение целого ряда более сложных и
интересных функций С883, таких как применение преобразований для создания
просто поразительных эффектов.
ГЛАВА 23

Двумерные преобразования

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

Веб-разработчикам, стремящимся использовать эти функции, все походило на хож-
дение по минному полю, требующему большого объема условного кода, срабаты-
вавшего в зависимости от сборки браузера и обнаруженной на хосте операционной
системы. Но войны браузеров завершились, и их подавляющее большинство оста-
новилось на варианте, предложенном открытым исходным кодом Сйгошшш, ис-
пользуемым в браузерах Сюо§1е Сйгоше, Мгсгозой Еб§е и Орега. А есть еще и 8аГап
от Арр1е, но он, за исключением некоторых мелочей, вполне сопоставим с другими
браузерами.

Введение

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

Структура

В этой главе рассматриваются следующие темы:

♦	Изучение всех двумерных преобразований, доступных в С883.

♦	Освоение способов комбинирования переходов с преобразованиями.
♦	Применение приемов произвольного масштабирования, вращения и наклонения
объектов.

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

Цели

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

Преобразования

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

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

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

Пример 23.1

1.	< ! ЭОСТУРЕ Мт1>

2.	<Мт1>

3.	<Ъеас1>

4.	<ММе>Тгапз1аМоп апс! Тгапз1Моп</ММе>		
5.	<зРу!е>		
6.	#Ьох	[ розИЮоп :	: аЬзо!иРе;
7.		Рор	!	: 5 Орх;
8.		1еЮ	:	: 5 Орх;
9.		мтс&И	:	: ЮОрх;
10.		ИетдИР	:	: 10Орх;
11.		Ьаскдгоипс! :	: огапде;
12.	ЬоЫег	:	: 5рх зоИс! геб;
13.	кгапз1к!оп :	: а!1 1з еазе-1п-оик;
14.	#х:Иоуег ~ #Ьох { кгапзГогт :	: кгапз1акеХ(100рх	);
15.	#у:Ъоуег ~ #Ьох { ВгапзГогт :	: Ггапз1аГеХ(100рх	);
16.	#Ь:Ъоуег ~ #Ьох { ВгапзГогт :	: Вгапз1аке ( 100рх, ЮОрх);

17.	</зку!е>

18.	</Иеас1>

19.	<Ьос1у>

20.	<Ьиккоп 1с1=' х' >К1дкк</Ьи‘Ькоп>

21.	<Ьи1:Ъоп 1с1='у'>0сжп </Ьиккоп>

22.	СЬиЪЪоп 1с1='Ь'>Вокк. </Ьиккоп>

23.	<сНу 1с1='Ьох' ></с1ги>

24.	</Ьос1у>

25.	</Мт1>

Стилевое оформление элементов с идентификатором Ьох начинается в строке 6, где
свойству розтМоп присваивают значение аЬзо1ике, свойствам кор и 1е^ь — значения
смещений от границ содержащего их элемента, а также присваиваются значения
свойствам Ьеадьв, Ьаскдгоипа и ЬоЫег. Все эти свойства применяются к элемен-
ту, задаваемому в строке 23.

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

А теперь разберемся с магической частью. В строках с 14 по 16 есть три правила,
выполняемые при наведении курсора мыши применительно к элементам с иденти-
фикаторами х, у и ь, в качестве которых выступают три кнопки, задаваемые в стро-
ках с 20 по 22. С помощью оператора - эти правила применяются к родственному
элементу с идентификатором Ьох. В результате наведение курсора мыши на любую
из кнопок приводит к срабатыванию одного из трех правил преобразования, каждое
из которых передает слегка различающиеся значения перемещения по горизонтали
и вертикали в функцию кгапз1аке(), что приводит к перемещению объекта (движе-
нию в его двумерной плоскости), которое будет анимировано согласно ранее уста-
новленному правилу перехода. При загрузке примера в браузер получается резуль-
тат, показанный на рис. 23.1.

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

И все это без малейшего намека на использование 1ауа8спр1. Применение подоб-
ной техники с использованием вместо С88 сценария 1ауа8спр1 потребовало бы
функции для доступа, затем для перемещения объекта, а также для возвращения его
в исходную позицию, и все это требовало бы привязки к событиям прохода указа-
теля мыши над кнопками. Для программиста на 1ауа8спр1 это не составило бы осо-
бого труда, но, если правильно пользоваться установками С883, в этом нет никакой
необходимости!

© Ттап&1а1юп апс! Тгаляйоп х

□

<- -> С О ® 1оса1Ко5^Ехатр1е5/5ес*юп_3/23/ехзтр1е_0111Шп1 ☆ Л ;

| К|дН| ] Роууп | ВоШ

Рис. 23.1. Объект можно перемещать, проводя курсором мыши по кнопкам

Переходы

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

Чтобы настроить переход, нужно установить значения для трех свойств:

ГгапзГПоп-ргорегГу
^гапз1Моп-с1игаМоп
Ггапз1Г1оп-с1е1ау

: свойство;

: время;

: время;

Ъгапзт'Ыоп-’Ыттпд-Гипс'Ыоп : тип;

Для значения свойства перехода ъгапзИзгоп-ргорегЪу следует назначить хотя бы одно
анимируемое свойство (или свойство, подвергаемое переходу), если его значение
изменится. В качестве универсального значения для любых свойств, которые могут
изменяться, можно воспользоваться значением ап. В качестве значения можно ука-
зать или ЬетдМ, или со1ог, или любое другое свойство, подвергаемое измене-
нию, или же указать через запятые список значений для выборочного перехода в
более чем одном свойстве.

Для свойства Ъгапз1ъ1оп-аигаъ1оп следует указать время, обычно всего несколько
секунд или даже меньше для анимации, воспринимаемой пользователем (допуска-
ются значения с плавающей точкой), например Зз, 1.5з или . 75з и т. д. Точно так
можно указать период задержки, в течение которого будет ожидаться запуск пере-
хода. И значения для него могут также выглядеть как Зз, 1.5з или . 75з и т. д.
И наконец, наверное, самая интересная возможность, позволяющая решить, как
должна выглядеть анимация, выбор значения, применяемого к свойству ъгапзИ:1оп-
Мттпд-ГипсМоп из следующего перечня:

•	еазе: Медленное начало, ускорение и медленное завершение.

•	Ппеаг: Переходы с постоянной скоростью.

•	еазе-ш: Медленное начало с быстрым продолжением до завершения.

•	еазе-оиЕ Быстрое начало, продолжение с той же скоростью и медленное за-
вершение.

•	еазе-ш-оиЕ Медленное начало, быстрое продолжение и медленное завершение.
Использование любого из значений со словом еазе, в отличие от линейного (Ппеаг),
более механичного по восприятию перехода, обеспечивает более плавное и естест-
венное восприятие. Если нужно еще больше разнообразить переходы, можно соз-
дать свою собственную динамику переходов, воспользовавшись функцией сиЬе-
ЬеНегО, создающей уникальную кривую, которой иапзШопиРгНпд-ГипсНоп может
воспользоваться для изменения скорости фаз перехода.

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

НапзРНоп-НгНпд-ГипсИоп :	сиЫс-ЬеНег (0.25,	0.1,	0.25,	1);

Ъгапз1’Ыоп-1:1т1пд-Гипс'Ыоп :	сиЫс-ЬеНег (0,	0,	1,	1);

ГгапзЕНоп-НтГпд-ЕипсНоп :	сиЫс-ЬеНег (0.42,	0,	1,	1) ;

Ггапз1Ноп-Нт1пд-Еипс1Ноп :	сиЫс-ЬеНег (0,	0,	0.58,	1);

Ггапз1Ноп-Нт1пд-Еипс1Ноп :	сиЫс-ЬеНег (0.42,	0,	0.58,	1);

Как и следовало ожидать, в С88 предлагается краткая форма указания всех этих
значений свойств с использованием разных имен свойств, и это простое свойство
напзИтоп. Его использование позволяет передать значения имени свойства для пе-

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

^гапзт’Ыоп : а11 .Зз Ппеаг . 2з;

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

Пример 23.2

1.	<1ЭОСТУРЕ №п1>

2.	<Мт1>

3.	<Ъеас!>

4.	<НР1е>Тгапз1аНоп апс! Тгапз1Ноп</НР1е>

6.

7.

<зРу1е>

#Ьох

{ розИНоп	: аЬзо1иРе;

ЬоЫег	: 5рх зоПб гес!;
8.	ЬгапзГЫоп :	: ЬаскдгоипЬ 1з еазе-ип-оик;
9.	кор	:	: 50рх;
10.	1еГк	:	: 50рх;
11.		: ЮОрх;
12.	Ье1дЬЬ	:	: ЮОрх;
13.	ЬаскдгоипЬ :	: огапде; }
14.	#Ь:Ъоуег ~ #Ьох { ЬаскдгоипЬ :	: Ыие; }
15.	#д:Ъоуег ~ #Ьох { ЬаскдгоипЬ :	: дгеу; }
16.	#с:Ьоуег ~ #Ьох { ЬаскдгоипЬ. :	: суап; }
17.	</зку!е>	
18.	</Ьеас1>	
19.	<ЬоЬу>	
20.	<Ьиккоп 1Ь='Ь' >В1ие</Ьиккоп>	
21.	<Ьиккоп 1Ь=' д' >6геу</Ьиккоп>	
22.	<Ьиккоп 1(1='с'>Суап</Ьиккоп>	
23.	<сИ V 1(1= ' Ьох' >< / ЬЫ>	
24.	</ЬоЬу>	
25.	</Ыт1>	

В этом примере перемещение указателя мыши по кнопкам, показанным на рис. 23.2,
согласно указаниям в строках с 14 по 16, приводит к изменению цвета фона блока.

Со1огТгап51Йоп

□ X

- СО ® 1оса111О51/Ехатр1е5/5ей‘юп_3/23/ехатр1е,02.111гп1	☆ Л :

|~ В1ие ~| (Згеу Суап

Рис. 23.2. Изменение цвета блока
при прохождении указателя мыши над кнопками

Можно также заметить, что в строке 8 вместо универсального значения а11 упоми-
нается ТОЛЬКО ЛИШЬ СВОЙСТВО ЬаскдгоипЬ.

В качестве упражнения вам предлагается скомбинировать примеры 23.1 и 23.2,
чтобы увидеть, как будет выглядеть сочетание перехода и перемещения. Полное
описание функций задания характеристик фаз перехода и смягчения его восприятия
можно найти по следующим 1ЖЬ-адресам:

♦	Ыпуиг1.сот/Ьгапз-Ыт1пд

♦	Ыпуиг!. сот/ЬеЫегеазЮд
Перемещения

Сочетание перемещения с переходом демонстрировалось в предыдущей части гла-
вы для создания анимации. А теперь давайте посмотрим на конкретные примеры
использования функции перемещения ^гапз1а^е(). Функция принимает два аргу-
мента: протяженность перемещения объекта по горизонтали и по вертикали. В их
качестве могут использоваться отрицательные, нулевые или положительные значе-
ния любого типа измерения, включая проценты, но чаще всего используются пик-
сели.

Например, следующие две установки используются для перемещения объекта
вправо на 50 пикселей и вниз на 50 пикселей соответственно:

^гапзГогт : ^гапз1а^е(50рх, Орх);

^гапзГогт : ^гапз1а^е( Орх, 50рх);

Если нужно переместить объект в одном измерении, для достижения тех же резуль-
татов можно воспользоваться альтернативными функциями:

^гапзГогт : ^гапз1а^еХ(50рх);
^гапзГогт : ^гапз1а^еХ(50рх);

Ожидаемое вскоре свойство <гап§1а(е

Кроме того, есть потенциально доступное, но поддерживаемое (на момент написа-
ния книги) только браузерами ЕйеГох и 8аГап обычное свойство перемещения
^гапз1а^е, которым можно будет воспользоваться следующим образом:

^гапз1а^е : 50рх Орх;

^гапз1а^е : Орх 50рх;

Или можно указать только одно значение для перемещения по обоим измерениям
на одну и ту же величину:
^гапз1а!:е : 50рх;

И можно также указать три значения для перемещения по трем измерениям:
^гапз1а^е : 50рх Орх 150рх;

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

Масштабирование

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

Пример 23.3

1.	< ! ООСТХРЕ Мт1>

2.	<Мш1>

3.	<Иеас1>

4.	<‘ЫМе>ЗсаИпд</МЕ1е>			
5.	<зку!е>			
6.	#Ьох		{ розЕМоп :	: аЬзо1ике;
7.			ЬоЫег	:	: 5рх зоИс! гес1;
8.			ЕгапзтМоп :	: а!1 1з еазе-1п-оик
9.			Вор	:	: 50рх;
10.			1еРЕ	:	: 50рх;
11.			м1с±Ъ	:	: 10Орх;
12.			Ъе1дЪЕ	:	: 10Орх;
13.			Ьаскдгоипс! :	: огапде;
14.	#Ь:Ъоуег ~	#Ьох	{ ЕгапзРогт :	: зса1еХ(1.5	);
15.	#д:Ъоуег ~	#Ьох	{ ЕгапзРогт :	: зса1еХ(1.5	);
16.	#с:Ъоуег ~	#Ьох	{ ЕгапзРогт :	: зса!е( 1.5, 1.5);
17.	</зЕу!е>			
18.	</Иеас1>			

19.	<Ьос1у>

20.	СЬиЕЕоп	1с1='Ь'>ЗкгеЕсЕ	Х</ЬиЕЕоп>

21.	<ЬиЕЕоп	1с1=' д' >ЗкгексЕ	Х</Ьиккоп>

22.	<ЬиЕЕоп	1с1=' с' >ЗЕгеЕсИ.	ВоЕЕ</ЬиЕЕоп>

23.	<сПу 1с1='Ьох' ></сПу>

24.	</Ьос1у>

25.	</Мт1>

01 БсаНпд	X +

<- С О Ф 1осаИ1О5Г/Ехатр1е5/5еаюп_3/23/ехатр1е_03.111т1	#	:

Рис. 23.3. Указатель мыши находится над третьей кнопкой,
поэтому блок растянут в обоих направлениях
В строках с 14 по 16 используются функции масштабирования, а в строке 8 снова
задается переход в отношении всех свойств. Работу кода можно увидеть, наводя
указатель мыши на различные кнопки. В каком бы состоянии ни был блок, при
прохождении указателя мыши над другой кнопкой технология С88 осуществляет
плавный переход от текущего состояния к новым установкам свойства. Результат
загрузки примера в браузер показан на рис. 23.3.

Вращение

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

В примере 23.4 выполняются три различных типа поворота блока, используемого в
этой главе.

Пример 23.4

1.	< ! ЭОСТУРЕ ЬШ1>

2.	<Мт1>

3.	<Ьеас1>

4.	<-ЫЫе>КоЕаЫоп</ЫЕ1е>

5.	<зЕу!е>			
6.	#Ьох		{ розтЫоп :	: аЬзо!ике;
7.			ЬоЫег	:	: 5рх зоИс! геф
8.			ЕгапзтЫоп :	: а!1 1з еазе-ап-оик;
9.			ЕехЕ-аИдп :	: сепкег;
10.			со!ог	:	: Ыие;
11.			ГопЕ	:	: ЬоЫ 16рк Агйа1;
12.			Еор	:	: 50рх;
13.			1ей	:	: 50рх;
14.			ЫЫЬ	:	: ЮОрх;
15.			Ье1дЫ	:	: ЮОрх;
16.			Ьаскдгоипс! ;	: огапде;	}
17.	#Ь:Ьоуег	~ #Ьох	{ ЕгапзГогт :	: гокаке ( 90с1ед) ; }
18.	#д:Ьоуег	~ #Ьох	{ ЕгапзГогт :	: гокаке (-180с1ед); }
19.	#с:Ьоуег	~ #Ьох	{ ЕгапзГогт :	: гокаке (Ю80с1ед); }
20.	</зЕу!е>			
21.	</Ьеас1>			
22.	<Ьос1у>			
23.	<ЬиЕЕоп тс1=	:'Ы >С1оскЫзе 90</ЬиЕЕоп>		

24.	<ЬиЕЕоп 1с1=' д' Жеуегзе 180 </ЬиЕЕоп>

25.	<ЬиЕЕоп 1с1=' с' >ТЬгее 1оорз </ЬиЕЕоп>

26.	<сНу 1с1='Ьох'>1'ш Зраппапд АгоипсК/сИу>

27.	</Ьос1у>

28.	</Мт1>
В примере в блок помещен цветной полужирный текст, позволяющий четко рас-
смотреть повороты в действии. В строках с 17 по 19 задается поворот на 90 граду-
сов по часовой стрелке, 180 градусов против часовой стрелки и полный трехкрат-
ный поворот, соответственно, при каждом проходе указателя мыши над кнопками
(рис. 23.4).

01	X -|-

О О ® 1оса11чоЛ/Ехатр1е?/5е^юпЗ/23/ехатр^_С4;

| С1сскУ№е 90 | Неуегзе 180 | ТЬгеекзорз

Рис. 23.4. Блок в процессе вращения

Можно, если хотите, указывать значения в радианах. Если вспомнить, то 2 х п
(равное 3,14159...) или 6,28 радиана — это 360 градусов, поэтому фактически рабо-
та будет вестись со значениями, относящимися к числу рт. Например, рт соответст-
вует половине окружности в радианах, что эквивалентно 180 градусам, поэтому
значение з.14гаа вызывает поворот на 180 градусов, а 1.57гаа — поворот на чет-
верть оборота и т. д.

Наклон

Последнее из преобразований, различаемых по именам, — функция наклона зке^о,
с помощью которой можно задавать наклон объекта в горизонтальной или в верти-
кальной плоскости, по часовой или против часовой стрелки. Функция принимает
два аргумента: вертикальный и горизонтальный наклон, и именно в таком порядке.
В качестве альтернативы для наклона в одном из измерений можно воспользовать-
ся любой ИЗ функций зкемХ () ИЛИ зкемХ ().

В примере 23.5 вызываются все три типа наклона, и каждый привязан к кнопке, над
которой проходит указатель мыши.

Пример 23.5

1.	<1ЭОСТХРЕ Мш1>

2.	<Мт1>

3.	<Ъеас1>

4.	<-ЫЕ1е>Зкем</Е1Е1е>
5.	<зку!е>			
6.	#Ьох		{ розЮбоп :	: аЬзо!ике;
7.			Ьогбег	:	: 5рх зоНб. геб;
8.			кгапзЮбоп :	: а!1 1з еазе-1п-оик;
9.			кор	:	: 5 Орх;
10.			1еГк	:	: 5 Орх;
11.			мббкб	:	: ЮОрх;
12.			Ъеадкк	:	: ЮОрх;
13.			Ьаскдгоипб :	: огапде;
14.	#х:Иоуег	~ #Ьох	{ кгапзГогт :	: зкемХ( ЗОбед	)
15.	#у:Иоуег	~ #Ьох	{ кгапзГогт :	: зкемУ(-ЗОбед	)
16.	#Ь:Ъоуег	~ #Ьох	{ кгапзГогт :	: зкем( ЗОбед, -ЗОбед)
17.	</зку!е>			
18.	</беаб>			

19.	<Ьобу>

20.	<Ьиккоп	16='х'>ЗкемХ	30 </Ьиккоп>

21.	<Ьиккоп	16='у'>ЗкешУ	-30</Ьиккоп>

22.	<Ьиккоп	16='Ь'>Зкеш ВокЬ</Ьиккоп>

23.	<61V 66='Ьох'></61у>

24.	</Ьобу>

25.	</Нкт1>

При наклоне прямоугольного элемента одна из сторон перемещается в желаемом
направлении, в результате чего соседние стороны растягиваются в длину, образуя
параллелограмм. Если наклон задается по часовой стрелке в одном направлении и
против часовой стрелки в другом (оба на одинаковую величину), относительные
размеры останутся прежними, но элемент станет больше из-за растянутых сторон.
Поэтому такой вид наклона не подходит для создания вращений, если только со-
путствующее ему увеличение не соответствует вашим намерениям. Результат вы-
полнения примера показан на рис. 23.5.

@ Ькеуу	х +

<- -> С О © |оса1йО5№агт1р1е5/5еЛюп_3/23/ехатр|елО5.Н1лп1	:

Рис. 23.5. Блок был наклонен против часовой стрелки
Использование матриц

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

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

Здесь цель не в том, чтобы научить вас перемножению матриц, для которого в кон-
це раздела приводится ссылка на 1ЖЬ-адрес с дополнительной информацией, а в
том, чтобы просто показать результаты изменения некоторых из этих значений и
продемонстрировать, что при этом получается. В примере 23.6 для проведения экс-
периментов с функцией задается создание шести кнопок.

Пример 23.6

1.	<!ЭОСТУРЕ Мт1>					
2.  3.  4.  5.  6.  7.  8.  9.  10.  11.  12.  13.	<Мт1>  <Ъеаа>  <Г1к1е>Макг1х ТгапзГогтаМопз</Мк1е>  <зку!е>  #Ьох	{ розтМоп	: аЬзо!ике;  Ьогбег	: 5рх зоИс! геф  ГгапзИЮоп : а!1 1з еазе-тп-оиЕ; кор	:	50рх;  1еГк	:	50рх;  : ЮОрх;  ИетдИк	:	ЮОрх;  Ьаскдгоипа : огапде;					
14.	#а:коуег ~ #Ьох { кгапзГогт :	: такг!х(2,	0,	0Л 1,	0,	0);
15.	#Ь:коуег ~ #Ьох { кгапзГогт :	: такг!х(1,	1,	0Л 1,	0,	0);
16.	#с:коуег ~ #Ьох { кгапзкогт :	: такг!х(1,	0,	1, 1г	0,	0);
17.	#а:Ъоуег ~ #Ьох { кгапзГогт :	: такг!х(1,	о,	0Л 2,	0,	0);
18.	#х:Ъоуег ~ #Ьох { кгапзГогт :	: такг!х(1,	о,	0, 1,	50,	0);
19.  20.  21.  22.  23.  24.  25.  26.	#у:Ъоуег ~ #Ьох { кгапзГогт :  </зку!е>  </кеаа>  <Ьос1у>  <Ьиккоп 1с1='а'>А</Ьиккоп>  <Ьиккоп Ы='Ь'>В</Ьиккоп>  СЬиккоп Ы=' с' >С</Ьиккоп>  <Ьиккоп 1с1='сГ>0</Ьиккоп>	: такг1х(1,	о,	0, 1,	0,	50);
27.	сЬиккоп 1с1='х' >Х</Ьиккоп>

28.	<Ьиккоп 1с1='у'>Х</Ьиккоп>

29.	<сНу 1с1='Ьох' ></сИлг>

30.	</Ьос1у>

31.	</ккт1>

В строках с 14 по 19 для аргументов 1 и 4 функции таЪг!х() заданы исходные зна-
чения 1, поскольку первый аргумент задает коэффициент масштабирования по го-
ризонтали, а четвертый — коэффициент масштабирования по вертикали. Результат
выполнения кода примера — на рис. 23.6.

Рис. 23.6. Наведение указателя мыши на кнопку Б приводит к вертикальному
масштабированию путем изменения значения четвертого аргумента

То есть значение 1 для каждого из этих аргументов задает пропорциональный мас-
штаб элемента, за исключением тех случаев, когда указатель мыши проходит над
связанными с ними кнопками, в результате чего значение каждого из них устанав-
ливается равным 2, чтобы удвоить масштаб в конкретном измерении. По сути,
шесть заданных здесь значений представляют собой следующие комбинированные
действия:
такгтх(зса1еХ, зкемХ, зкемХ, зса1еХ, кгапз1акеХ, кгапз1акеХ);

Если провести указателем мыши над кнопками а или э, то можно будет увидеть,
что блок становится вдвое больше по горизонтали или по вертикали. Кнопки вис
связаны со значениями 2 и 3 и, в свою очередь, выполняют наклон по вертикали и
горизонтали. Последние две кнопки перемещают блок по горизонтали и вертикали.
Проведите указателем мыши по всем этим кнопкам и понаблюдайте за тем, что по-
лучается.

Здесь нужно понять, что, составляя из этих значений различные комбинации, мож-
но добиться любой требуемой комбинации масштабирования, наклона, поворота и
перемещения. Если вас это заинтересовало и нужна более подробная информация,
перейдите по следующему ПКЕ-адресу: ьъърз://ипуиг1.сот/сзз-та1:г1х
Заключение

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

ЬетдМ, со1ог, Гопъ-згхе, и не только к ним, что позволяет создавать весьма интерес-
ные эффекты, повышая интерактивность и привлекательность пользовательского
интерфейса. В следующей главе все, что было усвоено в этой, будет перенесено,
выражаясь буквально, в следующее измерение! Мы действительно перейдем на бо-
лее высокий уровень — в мир трехмерных преобразований и переходов, чтобы ва-
ши элементы казались выскакивающими из веб-страницы.
ГЛАВА 24

Трехмерная графика и анимация

Введение

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

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

Структура

В этой главе рассматриваются следующие темы:

♦	Изучение всех особенностей ЗВ-преобразований.

♦	Освоение способов выталкивания элемента из 2В-плоскости.

♦	Изучение способов игры с перспективой для получения зрелищных эффектов.

♦	Освоение способов манипуляции ЗВ-объектами, как будто они у вас в руках.

Цели

Цель главы — раскрыть трехмерные возможности С883 в легком и увлекательном
повествовании. Успешно освоившие предлагаемый материал могут стать классны-
ми ЗВ-специалистами, готовыми создавать что угодно: от простых ЗВ-эффектов до
страниц с эффектами виртуальной реальности.
30-преобразования

Возможности, предоставляемые С88 для ЗВ-преобразований, поистине порази-
тельны. Они позволяют без единой строки кода 1ауа8спр1 полностью анимировать
ЗВ-объекты, а также управлять их перемещением и вращением любым способом,
не ограничивая своих фантазий.

Чтобы красиво проиллюстрировать эти возможности, понадобится пример, превы-
шающий по объему все предыдущие. В примере 24.1 для анимации трехмерного
куба различными способами плавно и незаметно, с результатами, которые поразили
бы воображение первых веб-разработчиков, используются НТМЬ-элементы в ком-
бинации с чистым кодом С883.

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

Пример 24.1

1.	<ЮОСТУРЕ Мт1>		
2.	<Икт1>		
3.	<Ъеас1>		
4.	<к1к1е>ЗБ	Тгапзкогтак1опз</М11е>	
5.	<зку!е>		
6.	#оикег	{ регзрескЮе	:	500рх;
7.		мЫкЪ	:	200рх;
8.		тагдгп	:	Юрх аико;
9.	#сиЬе	{ кгапзкогт-зку1е	:	ргезегуе-Зф
10.		м1с±Ъ	:	100%;
11.		ИетдИк	:	200рх;
12.		со!ог	:	мЫке;
13.		кехк-аИдп	:	сепкег;
14.		Гопк	:	ЬоЫ Юрк Аг1а1;
15.		=Ьгапз1=Ыоп	:	а!1 1з Ипеаг;
16.	. касе	{ розтМоп	:	аЬзокике;
17.		мЫкЪ	:	100%;
18.		ИетдИк	:	100%;
19.	#1екк	{ Ьаскдгоипс!	:	дгееп;
20.		кгапзкогт	:	гокакеУ( -90с1ед)
21.			кгапз!акеХ (ЮОрх) ;
22.	#г1дкк	{ Ьаскдгоипс!	:	огапде;
23.		кгапзкогт	:	гокакеУ (	90с1ед)
24.			кгапз!акеХ (ЮОрх) ;
25.	#ир	{ Ьаскдгоипс!	:	геф
26.		кгапзкогт	:	гокакеХ( 90с1ед)
27.			кгапз!акеХ (ЮОрх) ;
28.	#скжп	{ Ьаскдгоипс!	:	тадепка;
29.		кгапзкогт	:	гокакеХ( -90с1ед)
30.	Вгапз1аЕеХ (ЮОрх) ;
31.	#Ьаск { Ьаскдгоипс!	: йпсПдо;
32.	ВгапзВогт	: гокакеХ ( -180с1ед)
33.	Вгапз1акеХ (ЮОрх) ;
34.	#Ргопк { Ьаскдгоипс!	: Ыие;
35.	ВгапзВогт	: гокакеХ (	0с1ед)
36.	Вгапз1акеХ (ЮОрх) ;
37.	@кеуВгатез зрап
38.	{

39.	ко	{	' ВгапзГогт	:		: гокакеХ(	1кигп)
40.				гокакеХ(	1кигп);
41.	}				
42.	#1:Ъоуег	~ #сиЬе {	ВгапзВогт :	: гокакеХ(	90с1ед) ;
43.	#г:коуег	~ #сиЬе {	ВгапзВогт :	: гокакеХ(	-90с1ед) ;
44.	#и:Ъоуег	~ #сиЬе {	ВгапзВогт :	: гокакеХ(	-90с1ед) ;
45.	#с!:коуег	~ #сиЬе {	ВгапзВогт :	: гокакеХ(	90с1ед) ;
46.	#Ь:коуег	~ #сиЬе {	ВгапзГогт :	: гокакеХ(	180с1ед) ;
47.	#з:коуег	~ #сиЬе {	аЫтаЫоп :	: зрап 6з .	Ппеаг 10;

48.	</зку1е>

49. </Ъеас1>

50.

51.

52.

53.

54.

55.

56.

57.

58.

59.

60.

61.

62.

63.

64.

65.

66.

67.

68.

69.

<Ьос1у>

<сИу 1с1=’оикег’>&пЬзр;

<ЬиЫоп 1с1=’1’> В </ЬиЫоп>

<ЬиЫоп 1с1=’г’> К </ЬиЫоп>

<ЬиПоп 1с1=’и’> В </ЬиЫоп>

<ЬиЫоп 1с1=’сГ> Б </ЬиЫоп>

<ЬиПоп 1с1=’Ь’> В </ЬиВЕоп>

<ЬиВВоп 1с1=’ з ’ >Зр1п</ЬиВВоп>

<ЬгХЬгХЬгХЬг>

<сЫ 1с1=’сиЬе’>

<сИу с1азз=’Васе' 1с1=’1еВВ’> <ЬгХЬгХЬг>ЪЕГТ </сНу>

<сЫ с1азз=’Васе' 1с1=’гадМ ’ хЬгХЬгХЬг>В1СНТ</сИу>

<сНV с!азз=’Васе’ йс!=’ир’> <ЬгхЬгхЬг>ВР </сЫ>
<с11у с!азз=’Васе’ 1с1=’скжп'> <ЬгХЬгХЬг>ВОШ </с!1и>

<сПу с!азз=’Васе’ 1с1=’Ьаск'> <ЬгХЬгХЬг>ВАСК </с!1и>

<сИу с1азз=’Васе’ 1с1=’ВгопВ ’ хЬгХЬгХЬг>ГВОМТ</с11у>

</сНу>

</сНу>

</Ьос1у>

</Мт1>

Кнопки в, в, и, в, в и Зр1п, созданные в строках 52-57 примера, означают «Влево»,
«Вправо», «Вверх», «Вниз», «Назад» и «Вращение». Наведение указателя мыши на
любую из первых пяти кнопок приводит к тому, что в поле зрения поворачивается
выбранная грань. А это же действие в отношении последней кнопки заставляет куб
вращаться, выполняя 10 полных наборов оборотов. Убирание указателя мыши с
кнопок приводит к восстановлению показа лицевой грани. Результат загрузки этого
примера показан на рис. 24.1.

© 30 Т|гапгк)гта?]оп5	X +

С О ® 1оса1Но^/Екап1р|е5/5ес11оп 3/24/ехатр1е_01,Мт1	#	:

Рис. 24.1. Трехмерный куб, вращающийся в трех измерениях

А теперь посмотрим, как собран пример, исследуя способы работы ЗВ-преобразо-
ваний в С88.

Задание перспективы

Когда нужно поднять элемент из 2В-пространства С88, переводя его в третье изме-
рение, используется свойство регзресНуе. Оно позволяет использовать для элемента
ЗВ-преобразования и переходы.

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

В примере 24.1 длина ребер куба составляет 200 пикселей, что, согласно уравнению
Пифагора, означает, что диагонали будут составлять около 283 пикселей, поэтому в
примере для перспективы установлено значение 500 пикселей, чуть меньше двой-
ной протяженности диагонали, но это значение было выбрано после подстройки:
сначала протестировали исходное значение в 850 пикселей, а затем оно постепенно
уменьшалось до оптимального в 500 пикселей.

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

Чтобы проиллюстрировать подобный эксперимент, в примере 24.2 используется
значение 50рх, создающее принудительное трехмерное изображение изнутри объек-
та. Поскольку кнопки больше не видны, в примере 24.2 с целью автоматического
поворота объекта в самый конец документа добавляется еще один блок кода. Те-
перь объект будет вращаться 10 раз сам по себе.

Пример 24.2 (только измененные строки):

6.	#ои^ег { регзресМуе	: 50рх;

70.	<зсг!р^>

71.	с!оситепГ.деГЕ1етепГВу1с1(’сиЬе’) .зГу1е.ап1таГ1оп =

72.	’ зр!п 6з Ппеаг 10’

73.	</зсг!р^>

Рис. 24.2. Вид куба изнутри

Неважно, что строки с 70 по 73 были добавлены после закрывающего тега </ьш1>,
так как браузеры снисходительны, и это просто мелкая добавка, заставляющая
объект вращаться без изменения нумерации строк в примерах. Кроме того, как по-
казано на рис. 24.2, она иллюстрирует способ выполнения команды 1ауа8спр1-
анимации (или другого преобразования) для объекта.

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

Чтобы вращать объект в трех измерениях, можно воспользоваться функцией
гоъаъезао или функциями гоЬаЬехо, гоЪаЬэХ() и гоЬаЬе2(). Трехмерные версии есть
также и у других функций, например у зкем () и кгапз1аы ().

Два способа изменения перспективы

Можно также применительно к свойству РгапзГогт воспользоваться функцией
регзресъгуе о, создающей ЗВ-пространство для текущего элемента:

ЬгапзГогт : регзресЫуе (500);

Когда нужно, чтобы у группы дочерних элементов было собственное трехмерное
пространство, следует поднять родительский элемент именно таким способом, а не
использовать для родительского элемента и всех его дочерних объектов общее
ЗВ-пространство, задаваемое свойством регзреыые. В примере 24.3 создается два
набора дочерних элементов: первый с родительским элементом, использующим
свойство регзресМуе, и второй без него.

Пример 24.3

1.	<1РОСТЕРЕ Мт1>

2.	<Ыт1>

3.	<Иеас1>

4.	<ЫЫе>РегзресЫуе Турез</ЫЫе>

5.	<зку1е>

6.

7.	.оикег	{ ЫЫИ.	:	: 64Орх;
8.		ЬетдЬЬ	:	: 120рх;
9.		ЬаскдгоипЬ :	: суап;
10.		ЬогЬег	:	: 1рх зоИЬ Ыаск;
11.	.регзресЫуе	{ регзресЫуе :	: 20Орх;
12.	.Ьох	{ ЫЫИ.	:	: ЮОрх;
13.		ЪеТдЬк	:	: ЮОрх;
14.		тагдтп	:	: 0 55рх;
15.		Г1оак	:	: 1еЫ;
16.		ЬаскдгоипЬ :	: геЬ;
17.		ЬогЬег	:	: 1рх зоИс! Ыаск;

}

}
18.

19.

20.

21.

</з^у!е>

</Ъеа6>

^гапзГогт : регзресМуе (200рх)

го^а^еХ (456ед) ; }

22.	<Ьо6у>

23.	<сНу с!азз='ои^ег регзресМуе ’ >

24.	<61V	с1азз=’Ьох’></с11у>

25.	<61V	с1азз=’Ьох’></с11у>

26.	<сНу	с1азз=’Ьох*х/с11у>

27.	</сИуХЬг>

28.	<61V с!азз='ои^ег’>

29.	<61V	с!азз=’Ьох’х/с11у>

30.	<61V	с1азз='Ьох’х/с11у>

31.	<61V	с1азз=’Ьох’ х/6гу>

32.	</6гу>

33.	</Ьо6у>

34.	</ЪГт1>

Для каждого из этих наборов из трех блоков используется один и тот же родитель-
ский стиль, задаваемый для класса ои^ег. Но для верхнего набора также использует-
ся стиль, задаваемый для класса регзрес^е. Для класса ои^ег просто задается ши-
рина, высота и граница, а для класса регзресЪгте — свойство регзресМуе со значени-
ем 2оОрх. Результат загрузки кода примера в браузер — на рис. 24.3.

@ Регьр’&с^уе Туреь	X +

<- -> О О © 1оса1Но5УЕхатр1е5/8есГюп_3/24/ехатр1е_03.Ыгп1	Л :

Рис. 24.3. Верхние блоки разделяют родительскую установку

Стилевое оформление класса Ьох задает создание красных блоков 100 х 100 пиксе-
лей, широкий внешний отступ и значение свойства Г1оаъ, позволяющее элементам
этого класса выстраиваться в одну линию рядом друг с другом. Затем в строках 18
И 19 используется СВОЙСТВО ^гапзГогт, для которого вызывается функция
регзресъхуе о с аргументом 200рх, а затем функция го^а^еХО С аргументом 45с1ед.

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

Посмотрите, что получается с тремя верхними блоками, использующими одно и то
же трехмерное пространство, поскольку к их родительскому элементу применяется
свойство регзрес^^е, а вот нижние три блока поворачиваются каждый сам по себе
в своем собственном трехмерном пространстве. Этот эффект проявляется даже при
том, что установки для класса Ьох ящика идентичны для всех блоков, даже включая
ВЫЗОВ функции регзресМуе () С аргументом 200рх.

Задание стиля преобразования

В примере 24.3 есть одна проблема, которая могла ускользнуть от вашего внима-
ния: ЗВ-эффект в нем не совсем правильный. Дело в том, что браузеру нужно со-
общить, что используемое свойство ^гапзГогт-з^у1е не должно быть плоским по
умолчанию, так как работа ведется в ЗВ. Для него должно быть объявлено значение
ргезегуе-за, поэтому в класс ои^ег нужно добавить следующую установку:
^гапзГогт-з^у!е : ргезегуе-3с1;

Показывать это здесь нет никакого смысла, но в прилагаемый бесплатный архив
примеров измененный таким образом файл включен под именем ехатр1е_03а.ьш1.
Результат должен выглядеть так, как показано на рис. 24.4.

Рис. 24.4. Теперь поворот соблюдает особенности трехмерного пространства
Изменение исходной точки преобразования

По умолчанию начало преобразования будет находиться прямо в центре родитель-
ского элемента или текущего элемента, если для родительского элемента не задано
свойство регзресЪЫе. Это включает в себя горизонтальную и вертикальную состав-
ляющую в направлениях X и V и половину пути к зрителю в направлении 7.

Но при желании любое из этих значений можно изменить, воспользовавшись свой-
ством ^гапзГогт-огтдтп, как показано в примере 24.4, где во втором наборе блоков
это свойство установлено для пары направлений X и V равным, соответственно, 0%
и 10%:

Пример 24.4

1.	СЭОСТУРЕ Мт1>	
2.  3.  4.  5.  6.	<Мт1>  <ЬеаЬ>  <ЫЫе>СЬапд1пд 0г1д1п</ЫЫе>  <зЕу!е>  .оиЕег { регзресЕгуе	:	200рх;
7.	ЫЫЪ	:	64Орх;
8.	ЪеРдМ	:	12Орх;
9.	ЬаскдгоипЬ	:	суап ;
10.	ЕгапзГогт-зЕу1е :	ргезегуе-ЗЬ;
11.	ЬогЬег	:	1рх зоНЬ Ыаск;
12.	.Ьох	{ ЫсГЫ	:	10Орх;
13.	ЬетдЫ	:	ЮОрх;
14.	тагдап	:	0 55рх;
15.	Г1оаЕ	:	1еГЬ;
16.	ЬаскдгоипЬ	:	геЬ;
17.	ЬогЬег	:	1рх зоЫЬ. Ыаск;
18.	ЕгапзГогт	:	регзресЫуе (200рх)
19.  20.	. оЫдтп { ЕгапзГогт-ог1д1п :	гокакеХ(45Ьед) 50% 10%; }
21.  22.  23.  24.  25.  26.  27.  28.  29.  30.	</зку1е>  </ЬеаЬ>  <ЬоЬу>  <сЫ с1азз='оикег’>  <скЫ с1азз=’Ьох’х/с11у>  <Ыу с1азз='Ьох’ ><Му>  <сЫ с!азз=’Ьох’х/Ыу>  </скЫхЬг>  <сЫ с1азз='оикег’>  <сЫ с!азз=’Ьох ог1д1п’х/сПу>	
31.	<сЫ с!азз=’Ьох ог1д1п' х/сНу>	
32.	<Ыу с!азз=’Ьох ог1д!п ’ х/Ыу>	
33.	</<±гу>

34.	</Ьос1у>

35.	</№п1>

Код этого примера работает аналогично коду примера 24.3. В данном случае уста-
новки для класса Ьох одинаково распространяются на все блоки, но здесь оба набо-
ра блОКОВ ИСПОЛЬЗуЮТ ОДНИ И те же родительские СВОЙСТВа регзресМуе И ргезегуе-За,
а разница в том, что для второго набора используется другое значение свойства
^гапзГогт-огтдтп, не такое, как для первого. Результат выполнения этого примера
показан на рис. 24.5.

Рис. 24.5. Для нижнего ряда применено другое начало координат

Работа в ЗО-пространстве

Пришло время вернуться к примеру 24.1 и нашему вращающемуся кубу. Теперь,
разобравшись получше с С88 в ЗВ, давайте посмотрим, как был построен куб.
В примере 24.1 можно заметить, что в строке 51 есть элемент с идентификатором
ои'Ьег, охватывающий все остальное. Это контейнер для хранения кнопок и куба.

Внутри контейнера ои^ег находится набор из шести кнопок, под которыми (после
нескольких разделительных тегов <Ьг>) находится еще один контейнер под назва-
нием сиЬе. И наконец, внутри куба находятся шесть его граней, каждая из которых
— в своем собственном элементе <а^>.

По коду НТМЬ не сразу понятно, как устроен куб, поэтому давайте посмотрим на
установки для класса граней Гасе в строке 16. Здесь свойство розаМоп каждого нс-
пользующего этот класс элемента (что делают все грани), устанавливается в значе-
ние аЬзоЮке, а к его свойствам ширины и высоты применяются все 100%:

16.	Юасе { розИЮоп	: аЬзо!ике;

17.	: 100%;

18.	ЬеадМ	: 100%;	}

Эти значения зависят от родительского элемента, называемого сиЬе, ширина кото-
рого равна 2оОрх и задана для элементов с идентификатором оикег в строке 7, а его
высота сделана равной 200рх в установке для элементов с идентификатором сиЬе в
строке 11. Таким образом, каждой грани куба задаются значения для свойств
розЮтоп, И Ьейдкк.

Теперь давайте поочередно посмотрим на каждую грань куба, начиная с той, что в
строке 19 называется 1еГЮ Эту грань, когда смотрим на куб, нужно поместить на
его левую сторону, и обеспечить ее правильный поворот и окраску. Сначала ис-
пользуется зеленый цвет, затем в строке 20 грань поворачивается против часовой
стрелки по оси V, чтобы ее левый край был направлен к браузеру, а правый — к
зрителю. Теперь элемент невидим, поскольку находится сбоку от нас, и, не имея
глубины, ему нечего отображать. Затем в строке 21 она перемещается в нужную
позицию на ЮОрх по измерению 2:

19.

20.

21.

#1еЮ { Ьаскдгоипс!
кгапзГогт

: дгееп;

: гокакеУ ( -90с1ед)
кгапз!акеХ (ЮОрх) ; }

Поскольку грань 1еЮ теперь обращена влево, когда она поднимается на 100 пиксе-
лей по оси 7, это относительно текущего положения элемента и поворота происхо-
дит в восходящем направлении. Следовательно, грань перемещается на 100 пиксе-
лей влево и теперь находится в нужном месте.

Аналогичным образом грань г1д!ю начиная со строки 22 получает окраску, затем
соответствующий поворот также по оси V, но на этот раз по часовой стрелке (с ее
исходной позиции), а затем перемещается на 100 пикселей по ее измерению 7 и так
размещается на правой стороне куба.

Теперь для верхней грани под названием ир начиная со строки 22 задается красный
цвет, и она поворачивается по оси X. Затем путем перемещения по оси 7 на
100 пикселей и с учетом ее текущего поворота эта грань помещается на вершину
куба. Нижняя грань (названная ао^п), начиная со строки 28 окрашивается в пурпур-
ный цвет и поворачивается против часовой стрелки, после чего перемещается вниз
по оси 7, чтобы получилась нижняя сторона куба.

Начиная со строки 31, для задней грани куба (называемой Ьаск) устанавливается
цвет индиго и задается поворот по оси X на 180 градусов. Она перевернулась, а за-
тем задается ее перемещение по оси 7 к задней стороне. И наконец, для передней
стороны (называемой Ггопъ) устанавливается синий цвет и задается поворот на 0
градусов по оси X (что можно было бы и не указывать, так как здесь не совершает-
ся никаких действий, но в примере этот код появляется просто для соответствия
другим установкам граней), а затем задается ее перемещение по оси 7 на 100 пик-
селей по направлению к зрителю — и у нас получается готовый куб!
Управление кубом

Построив куб в трехмерном пространстве, заданном в элементе оикег в строке 6,
можем приступить к управлению фигурой. В примере было решено начиная со
строки 42 воспользоваться применительно к ряду кнопок селектором Ьоуег. С по-
мощью оператора ~ действие этой установки применяется к родственному элементу
сиЬе, который и есть наш ЗЭ-куб.

Для выполнения действий свойство кгапзГогт вызывает функцию гоЪаЪехо или
гоЪаЬэУО, используя значения, противоположные тем, которые были назначены
при размещении различных граней. Например, в строке 20 для грани, названной
1еП, задается поворот против часовой стрелки на 90 градусов по оси V. Следова-
тельно, в строке 42 при наведении указателя мыши на кнопку Ь ко всему кубу при-
меняется поворот по часовой стрелке на 90 градусов. Благодаря этому получается
поворот левой грани куба по направлению к зрителю:

42.	#1:Ъоуег ~ #сиЬе { кгапзГогт : гокакеУ(	90с1ед) ; }

Точно так же преобразования, примененные в строках с 43 по 46, противоположны
(или обратны) тем, которые применялись к любой другой грани. В данном случае
они применяются ко всему кубу, чтобы повернуть его целиком, в результате чего
выбранная грань перемещается под взгляд зрителя. Для показа передней грани пре-
образования не задаются, поскольку увод указателя мыши от кнопок все равно за-
ставит ее повернуться под взгляд зрителя, и в результате стандартных установок
селектора С88 Ьоуег куб возвращается в исходное положение.

Но куб не поворачивается в новые позиции мгновенно, поскольку к нему в строке 15
задается применение свойства Ъгапз1ъ1оп, чем обусловлена плавная анимация в ли-
нейном (Ипеаг) темпе в течение одной секунды.

Особый интерес вызывает код в строке 47, где задается действие при проходе ука-
зателя мыши над кнопкой Зр1п. Здесь к кубу применяется свойство апатаМоп, указы-
вающее ему использовать правила анимации, определенные в зр1п в строке 37, в
течение 6 секунд, причем анимация должна быть линейной и повторяться 10 раз.

Это свойство нами еще не исследовано, поэтому следует пояснить, что правилу
@кеуГгатез в строках с 37 по 41, присваивается имя зр1п, которым можно воспользо-
ваться, и эти правила гласят, что анимация должна вращать выбранный объект
полностью по измерениям X и V на один полный оборот (от 0 градусов до 360 гра-
дусов каждый). Значение 1Ъигп применено здесь, чтобы показать, как им можно
воспользоваться в качестве единицы измерения, эквивалентной 360 градусам.
Таким образом, половина оборота (или о.5кигп) эквивалентна 18оаед и т. д.

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

47.	#з:Ъоуег ~ #сиЬе { апттаМоп : зрап 6з Ипеаг 10; }

ЗО-перемещение

Теперь уже, наверное, сложилось полное понимание того, как работает код приме-
ра 24.1. Поэкспериментируйте с этим кодом, заставляя его делать разные вещи. Это
будет не только интересно, но и в немалой степени поучительно. Как только закон-
чите с экспериментами, переходите к подробному рассмотрению ЗВ-функции, на-
чиная С ^гапзХа^еЗЩ).

При построении куба в примере 24.1 рассматривалось перемещение в 7-измерении,
заданное функцией Ъгапз1аъе2(). Но перемещения можно также задавать в измере-
ниях X и V, применяя для этого функции ^гапз1а^ех() и ^гапз1а^ех(), и сразу в трех
измерениях, используя функцию Ъгапз1аъе3а(), которая принимает три значения и
может использоваться следующим образом:

^гапзГогш : регзрес±гуе (200) ^гапз1а^еЗа(-ЗОрх, Орх, Орх) ;

Здесь К свойству ^гапзГогт применяются функции регзресЪгуе () И Ъгапз1аЪеЗа(), при
этом перемещение в Х-измерении — пример задания отрицательного значения, что
также разрешено.

ЗО-масштабирование

Масштабирование также полностью поддерживается в трех измерениях и реализу-
ется благодаря функциям зса1ех(), зса1ех(), зса1ех() и зса1еЗа(). Первые три функ-
ции принимают одно значение, а третья требует предоставления трех. Значение 1
указывает на отсутствие масштабирования, 2 — на увеличение размера в два раза,
0.5 — уменьшение вдвое и т. д. Значения могут быть как положительными, так и
отрицательными.

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

^гапзГогт : регзресГгуе (200) зса1еЗа (1.2, .5, 1);

ЗО-вращение

В С883 доступно также вращение в трех измерениях, для чего используются функ-
ции гоъаъехо, гоЪаЪехо, гожего и готезао. Для первых трех функций в качестве
значения указывается угол поворота в выражениях вида 45аед, .5^игп или -Юдгаа,
или же с указанием значения в радианах, например б.28гаа и т. д. Для вращения
сразу в трех измерениях необходимо указать три числа и значение угла. Числа
представляют собой по очереди измерения X, V и 7 и должны иметь значения от О
до 1 для каждого измерения.

Один из способов выполнить вращение сразу в нескольких измерениях — создать
следующее правило, предписывающее в данном случае поворот на 60 градусов по
часовой стрелке только в измерении V:

^гапзГогт : регзресМуе (200) го^а^е3с!(0, 1, 0, 60с1ед);

Чтобы проиллюстрировать работу этого кода, изменим только стилевое оформле-
ние класса Гасе в коде примера 24.1, чтобы создать код примера 24.5, где свойство
прозрачности всех граней было установлено всего на 60%, позволяя просвечивать-
ся всему, что находится за кубом. Результат будет выглядеть примерно так, как по-
казано на рис. 24.6.

0 60%Орасйу	X 4-

С О @ 1оса1Ио51/Ехагпр1е5/5ес1юп_3/24/ехатр1е^05.Ыт,	;

Рис. 24.6. Из-за другой настройки прозрачности стали видны задние грани куба

Пример 24.5 (только класс Тасе):

.Гасе { розИзаоп : аЬзоХи^е;

ораст^у : .6;

: 100%;

НетдМ : 100%; }
Видимость обратных сторон граней

Остается собрать последний фрагмент головоломки ЗВ-преобразований С88: что
нам делать с обратными гранями элементов при их повороте. Например, из преды-
дущего раздела известно, что текст, написанный на 2В-элементе, при повороте X-
измерения на 180 градусов будет по-прежнему отображаться, но теперь уже в пере-
вернутом виде, просвечиваясь с другой стороны. Аналогично этому, если повер-
нуть его на 180 градусов по оси V, то он будет просвечиваться зеркально перевер-
нутым.

Но предположим, что при нынешней прозрачности нам не хочется видеть скры-
тые лицевые стороны граней с обратной стороны. При желании эти обратные сто-
роны можно скрыть, изменив настройку свойства ЬаскГасе-ухзгЫПЪу на мааеп, до-
бавив в стилевую установку для класса Гасе еще одну строку, чтобы создать код
примера 24.6.

Пример 24.6 (только класс Тасе):

. Гасе { розГкГоп	: аЬзо!ике;

орастку	:	.6;

ЬаскГасе-уазаЫИ^у :	Ыааеп;

^Гакк.	:	100%;

кеадкк	:	100%;	}

ф 60% Орвину НШеп ВасМас? X +

<- СО® 1оса1Ьо5УЕхатр1е5/5есг1ОП_3/24/ехатр1е_06.Мт|

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

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

Между прочим, уменьшение прозрачности дает возможность увидеть, как выглядел
бы куб, если бы грани вращались без перемещения по оси 7. Результат показан на
рис. 24.8.

0 СиЬе; Мс Тгал51а1юп	X +

<- СО® 1оса11ю$УЕхатр1е5/$ес11ОП_3/24/ех.атр1е_07.111т1	☆ Й

ШЕННЕ®

Рис. 24.8. Вот что произойдет, если «забыть» переместить грани куба

Код, позволяющий увидеть это в браузере, слишком длинный, и приводить его
здесь ради пустой забавы, пожалуй, не стоит, но его можно найти в прилагаемом
бесплатном архиве примеров в файле под именем Ехатр1е_07.ьш1. По сути, это мо-
дификация кода примера 24.1 в сочетании с кодом примера 24.5.

Заключение

Пожалуй, уже понятно, что с помощью технологии С883 можно создавать просто
потрясающие ЗВ-эффекты. Их сочетание с переходами и анимацией действительно
позволяет поднять ваши веб-разработки на совершенно новый уровень. Теперь у
вас есть все, что нужно знать об обработке как двумерной, так и трехмерной графи-
ки. В следующей главе нам предстоит разобраться с просто фантастическим новым
способом создания динамически самонастраиваемых макетов с помощью техноло-
гии ИехЪох.
ГЛАВА 25

Макет ЯехЬох

Введение

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

В качестве примера можно привести веб-сайт для портфолио фотографий, на кото-
ром коллекции изображений должны плотно занять все пространство, как кирпичи
разного размера в ручной кладке. Этого сложно добиться с помощью стандартного
С88 и, как правило, требуется применение сценария 1ауа8спр1. Как раз ИехЪох и
есть идеальное решение для такого проекта.

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

Структура

В этой главе рассматриваются следующие темы:

♦	Изучение концепции модели макета ИехЪох.

♦	Уяснение порядка совместной работы главной и поперечной оси.

♦	Работа с примером интерактивной среды ИехЪох, чтобы опробовать многочис-
ленные функции.

♦	Приобретение навыков переноса, выравнивания и центрирования с помощью
ИехЪох.

Цели

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

Сведения о ПехЬох

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

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

ИехЪох не отдельное свойство или функция, а целый модуль функций. Часть из
них применяется к элементу-контейнеру, а часть — к его дочерним элементам. Для
контейнера используется термин Нех-контейнер, а для дочерних элементов — Нех-
элементы. Принцип работы ИехЪох заключается в гибком управлении потоком
элементов (отсюда и название ИехЪох).

Создание интерактивной среды ПехЬох

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

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

Пример 25.1

1.	<1ЭОСТУРЕ НЕт1>

2.	<Мт1>

3.	<Ъеас1>

4.	<ММе>Е1ехЬох Р1аудгоипс1</Е1Е1е>

5.	<зЕу!е>

6.	Ьос1у { Ьаскдгоипс! : #с!еГ; }

.1аЬе1 { мЫкк	: ИОрх;
8.	ЕехЕ-аИдп		: гадЫ;
9.		ЫоаЕ	: 1еЮ; }
10.	.Ипк	СО1ОГ	: Ыие;
11.		Еехк-ЬесогаЫоп : ипЬегИпе;	
12.		сигзог	: роЮкег; }
13.	#оикег	Ызр1ау	: Ыех;
14.		ЬогЬег	: 1рх зоНЬ Ыаск;
15.		ЬогЬег-гаЫиз	: 5рх;
16.		ЬаскдгоипЬ	: Ипеаг-дгаЫепк (суап, ЬеерзкуЫие);
17.		раЬЫпд	: 5рх;
18.		Ьох-з1х1пд	: ЬогЬег-Ьох;
19.		ЫЫИ.	: 100%;
20.		НеадЬЕ	: 40Орх;
21.		гезахе	: ЬоЕЬ;
22.		ОVе^Ыо^	: ЫЬЬеп; }
23.	.Ьох	Ызр1ау	: Ыех;
24.		ЬаскдгоипЬ	: Ипеаг-дгасИепЕ (уеИо^г, геЬ) ;
25.		аИдп-ткетпз	: сепкег;
26.		ЗизЫЕу-сопкепЕ : сепкег;	
27.		ЬогЬег	: 1рх зоНЬ Ыаск;
28.		ЬогЬег-гасНиз	: 5рх;
29.		Вопк	: Ьо1Ь 2Орк Аг1а1;
30.		гезахе	: Ьокк;
31.		ОVе^Ыо№	: аико;
32.		СО1ОГ	: мЫке; }
33.	#Вох_А 	[ ЫЫк : ЮОрх;	ИетдЫ : ЮОрх; }
34.	#Вох_В 	[ ЫЬЫ : ЗОрх;	ИетдЫ :	8Орх; }
35.	#Вох_С 	[ ЫЫИ. : ЮОрх;	ЬетдЫ : 13Орх; }
36.	#Вох_Б 	[ ЫЫИ. :	5 Орх;	ЬетдЫ :	5Орх; }
37.	#Вох_Е 	[ ЫЫИ. :	7 Орх;	ЬетдЫ : 15Орх; }
38.	#Вох_Е 	[ ЫЫЪ : ЮОрх;	ЬетдЫ : 9Орх; }
39.	#Вох_С 	[ ЫЫЪ : 16Орх;	ЬетдЫ : 18Орх; }
40.	#Вох_Н 	[ ЫЫк :	40рх;	ИетдЫ :	5Орх; }
41.  42.  43.  44.	#Вох_1 -  </зЕу!е>  </Ьеас1>  <ЬоЬу>	[ ЫЫк : 12Орх;	ИетдЫ : 15Орх; }

45.	<оикриЬ 1Ь=’ оиЕриЕ ’ ></оиЕриЕ><Ьг>

46.	<сЫ 1Ь=’оиЕег’>

47.	<±Ы	с!азз=’Ьох’	1с1=’Вох_А’>А</ЬЫ>

48.	<±Ы	с1азз=’Ьох*	1с1=’Вох_В’>В</с11у>

49.	<с11у	с1азз=’Ьох*	1с1=’Вох_С’>С</с11у>

50.	<сЫл	с1азз=’Ьох*	1с1=’Вох_В’>В</с11у>

51.	<сНу	с1азз=’Ьох’	1Ь=’Вох_Е’>Е</с11у>

52.	<Ыу	с1азз=’Ьох’	1Ь=’Вох_Е’>Е</Ыу>

53.	<сЫ	с1азз=’Ьох’	1Ь=’Вох_С’>6</с11у>

54.	<сЫ	с1азз=’Ьох’	1Ь=’Вох_Н’>Н</с5Ы>
374

55.

56.

57.

58.

59.

60.

61.

62.

63.

64.

65.

66.

67.

68.

69.

70.

71.

72.

73.

74.

75.

76.

77.

78.

79.

80.

81.

82.

83.

84.

85.

86.

87.

88.

89.

90.

91.

92.

93.

94.

95.

96.

97.

98.

99.

<с11у с1азз=’Ьох’ 1с1=’Вох_1’>1</с11у>

</Н1и>

<зсгарк>

зеккапдз = [ ’ В1ех-аагескаоп ’ , ’ В1ех-игар’, ’ зизкаВу-сопкепк ’ ,
’аИдп-акетз' , ’ аИдп-сопкепк ’, ’дар’]

уа!иез = [[’гом’, ’гом-геуегзе’, ’со1итп’Л

’со!итп-геуегзе’],

[’помгар’, ’мгар', 'мгар-геуегзе ’ ],

[’поила!’,. ’ В1ех-зкагк ’ , ’В1ех-епа', 'зкагк',
’епс1’Л ’сепкег’,. ’зкгексЪ’,. ’1еВк’Л ’гадЪк’,.

’ зрасе-Ьекмееп', ' зрасе-агоипа ’,
’зрасе-еуеп!у’],

[’погта!’, ’В1ех-зкагк’, ’11ех-епсГЛ 'зкагк',
’епс1’Л ’сепкег’,. ’зкгексЪ’,. ’ЬазеИпе’,
’зе1В-зкагк’, ’зеТВ-епа’ ],

[’поила!’, ’В1ех-зкагк’, ’В1ех-епа’, ’зкагк’,
’епсГ, ’сепкег’, ’зкгексЪ’, ’ЬазеИпе’,

’зрасе-Ьекиееп’, ’ зрасе-агоипсГ , ' зрасе-еуеп!у ’ ],
[’Орх’, ’Юрх’, ’20рх’, ’ЗОрх’, ’40рх’,

’50рх’, ’бОрх’, ’70рх’, ’80рх’, ’90рх’]]

Вог (з = 0 ; з < зеккапдз.1епдкЪ ; ++з) {

1а(’оикрик’).аппегНТМЪ +=

ч<сНу с1азз=’ 1аЬе! ’ >$ {зеккапдз [з ] } : &пЬзр;</скпл>'

Вог (к = 0 ; к < уа!иез[з].1епдкк ; ++к) {

1а(’оикрик’).аппегНТМЪ +=

'<зрап с1азз=’ Ипк’ аа=’ $ {зеккапдз [з ] }$ {уа!иез [3 ] [к] } ’
опс11ск='зек(${д},${к})’>${уа!иезЩ[к]}</зрап>

}

1а('оикрикаппегНТМЪ += ’<Ьг>\п’

}

Випскаоп зек(з, к) {

Вог (х = 0 ; х < Vа1иез[^].1епдкк ; ++х) {

зку!е(зеккапдз[3] + уа!иез[з][х], ’Вопк-меадкк’г ’погта!’)

зку1е (зеккапдз [з ] + уа1иез [3 ] [х], ’со1ог’Л	’Ыие’)

}

зку1е(зеккапдз[3] + уа1иез[3][к], ’Вопк-меадЪк’г ’Ьо1а’)

зку1е(зеккапдз[3] + уа1иез[3][к]г ’со1ог’Л	’геа’)

зку1е(’оикег’г зеккапдз[3], уа1иез[3][к])

}

Випскаоп 1а(уа1) { гекигп аоситепк.декЕ1етепкВу1а(уа1) }

Випскаоп зку1е(оЬз, ргор, уа1) { аН(оЬз).зку1е[ргор] = уа1 }

</зсгарк>

</ЬоНу>

</Ъкт1>
После загрузки в браузер пример должен выглядеть так, как показано на рис. 25.1.

0 ПехЬох Р1аудгоипс1	X +

<- Э С О О 1оса1Ьо5№атр1е5/$есЬоп_3/25/ехагпр1е.01 Ьгт1	О Я

Г1сх-сНгссйоп : гоц ппу-гсусгяс со1итп со1итп-гсусгае

Лех-чтар : поч'гар чшр цтар-геу сгае

]и5(1Гу-соп(епс: погта! Пух-4311 Пух-уш! ЧаП сп<1 сеп(ег ^ггс!с111сП пД11 зрасс-ЬеШ'есп зрасе-агоипс! $расс-сусп1у
аП^п-Истз : поткИ Пех-$1аП Псх-слй >1ап сдс! сетег я1ге!сН Ьаьс1те мНГ-мап ьеИ-спс!

аН^п-сотет : погта.1 Пех-ЯаП Псх-епд Мап еп8 сетсг $сге1сЬ Ьазе1тс звасе-ЬеПУееп храсс-агоит! §оасе-еуеп1у

§ар : Орх Юрх 20рх ЗОрх 4урх 50рх бОох 70рх ХОрх 9Орх

Рис. 25.1. Этот пример позволяет протестировать 158 400
комбинаций свойств ИехЪох

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

Как работает пример

В нем три основных раздела. В разделе <з^у1е> находятся все используемые С88-
установки. Затем имеется код НТМЬ, создающий пустой элемент <ои^ри^>, в кото-
рый будет добавлено несколько интерактивных элементов управления. И, наконец,
код 1ауа8спр1, используемый для заполнения элемента <ои-ьри-ь>, а также для обра-
ботки щелчков кнопкой мыши.

Для использования ИехЪох не нужен код 1ауа8спр1. Здесь этот код применяется
только как средство замены большого объема кода НТМЬ несколькими строками
кода на 1ауа8спр1, генерирующего нужный код НТМЬ буквально на лету, или же
как средство закулисного изменения различных значений свойств С88.
В строках с 6 по 12 в разделе <зку1е> задается фон градиентной заливки, интерак-
тивные ссылки и все различные части, отображаемые над основным дисплеем НехЬох.

Довольно емкий <с11у>-элемент под этим разделом — это йех-контейнер, а дочерние
<с11у>-элементы внутри него — это Нех-элементы, упоминавшиеся в разделе «све-
дения о НехЬох». Родительский контейнер с идентификатором оикег стилизован в
строке 13 со свойством сПзр1ау, имеющим значение Г1ех, с целью настройки модуля
для его дочерних элементов. Здесь также можно было использовать значение
1п11пе-Пех, чтобы выстроить родительский контейнер в одну линию с любыми род-
ственными элементами, не затрагивая при этом его дочерние элементы.

Начиная со строки 23, происходит стилизация каждого из девяти элементов НехЬох
также с использованием для свойства сИзр1ау значения Пех по одной простой при-
чине — центрирование текстовых идентификаторов А-1 как по горизонтали, так и
по вертикали. Дополнительно при этом используется четкое и эффективное приме-
нение НехЬох.

Блоки Нех-элементов создаются в строках с 47 по 55 в разделе <Ьоау>, где им при-
сваиваются идентификаторы, позволяющие коду С88 в строках с 33 по 41 задать
каждому разную ширину и высоту для имитации нашей работы с различными Йех-
элементами разных размеров.

На рис. 25.1 можно увидеть эти элементы, помеченные буквами от А до I. Они в
исходном состоянии расположены вдоль верхней части Яех-контейнера, поскольку
Нех-свойства, кроме тех, что находятся в строке 13, указывают, что для «Ну>-
элемента с идентификатором оикег, являющегося НехЬох-макетом, задается указа-
ние сНзр1ау : Г1ех;.

В строках 58 и 59 раздела <зсг1р^> создается массив с именем зеъипдз [], содержа-
щий шесть различных имен свойств, с которыми будет работать. В строках с 60 по
74 создается соответствующий первому массиву двумерный массив с именем
уа1иез [] [], содержащий значения, доступные для применения к каждому из свойств.
Скобки [] или [] [] после имен массивов указывают на его размерность.

В строках с 76 по 85 содержится пара вложенных циклов для перебора элементов
этих двух массивов и создания из них НТМЬ-кода, с помощью которого отобража-
ется верхняя часть примера. Внешний цикл, начинающийся со строки 76, выполня-
ет последовательный перебор шести имен свойств, используя индексную перемен-
ную с именем з, а внутренний цикл, начинающийся со строки 79, использует для
итерации индексную переменную с именем к, но многие значения свойств связаны
со тем, которое индексируется с помощью > (Имена переменных ], ки 1 очень по-
пулярны среди программистов при использовании в качестве временных индексов
для перебора элементов массивов).

НТМЬ-код, генерируемый этой парой циклов, создает несколько <с11у>-элементов
для перечисления имен свойств, за каждым из которых следует несколько <с11у>-
элементов для их возможных значений. Затем получившийся код НТМЬ сохраняет-
ся в свойстве тппегнтмъ элемента <с11у> с идентификатором оикрик, представляясь
браузеру как бы уже присутствующим на странице кодом НТМЬ. Для создания
этого кода НТМЬ используются литералы шаблонов внутри строк в обратных ка-
вычках.

И наконец, к созданному таким образом НТМЬ-коду ссылок прикрепляются собы-
тия опсИск, запускающие функцию зеЩ) в строке 86. Эта функция принимает пере-
данные ей значения, одно из которых — индекс имени свойства, а другое — значе-
ние применяемого свойства, а затем соответственным образом изменяет стиль
<с11у>-элемента с идентификатором ои^ег (<сПу>-элемент ИехЪох). Одновременно с
этим значение выделяется полужирным шрифтом и красным цветом, а предыдущее
значение этого свойства получает обычный шрифт синего цвета. Это позволяет
сразу увидеть, какие свойства и связанные с ними значения используются в области
ИехЪох в настоящее время.

Две функции в строках 95 и 96, ад и зъу1е(), возвращают, в свою очередь, объект
на основе его идентификатора в сценарий 1ауа8спр1 и применяют значение к свой-
ству объекта.

Если захочется увидеть НТМЬ, созданный всем сценарием, после } в строке 85
можно добавить следующую строку кода:

; сопзо1е. 1од (1с1 (’ ои^ри^') . тппегНТМЪ)

Символ ; служит окончанием предыдущей инструкции, а остальная часть строки
выводит НТМЬ на консоль разработчика, где код приобретает вид, показанный на
рис. 25.2.

^еVТооI5 - 1оса1Ко51/Ехатр1е5/5есЬоп_3/25/ехатр1е_01.Ь1т1	—	□ X

Е1етеЩ$ Соп5о1е Кесогс1ег А 5оигсез МеЬл/огк » Ф •

[0 © Цзр ▼ О Е|Кег	Ое(аи111е7е1з ▼	№ 155ие$ ф

<сНу с1а55=‘,1аЬе1"><:1ех-с11гес11оп :&пЬзр;</сНу> ехатр!е_01.ЫпЦ:85

<зрап с1а55=”Нпк” 1с1=,Т1ех-с11гес1:1опгом”

опсНск="$е1:(0л0)">гом</5рап> <зрап с1а55="Ипк" 1с1='ЧТех-
сИгесИопгои-геуегзе" опс11ск="5е1(0,1)">гон-геуег5е</5рап> <зрап
с1а55="11пк" 1с1='^1ех-с11гес11опсо1итп’’

опс11ск=,,5еГ(0,2)">со1итп</5раг1> <зрап с1а55=”11пк‘' 1й=”Нех-
сНгесПопсо!итп-геуегзе" опсЫск^’ зеГ^зу^соТитп-геуегзе^зраг^ <Ьг>
<СНу с1а55="1аЬе1">Е1ех-1лггар :&пЬзр;</с11У><5рап с1а55="11пк" 1д="-Е1ех-
^гарпомгар” опсИск=г,5еГ(1>0)">пошгар</5рап> <5рап с1а55="11пк"
1й=,Т1ех-ыгаршгар" опс11ск="5е'Е(1Д),,>мгар</5рап> <5рап с1аз5=,,11пк"
1с1=,Т1ех-игаригар-ге7ег5е,‘ опсИск="5еГ(1^2)">игар-геуегзе</зрап> <Ьг>
<с!1У с1аз5=" 1аЬе1">^из^дТу-соп^еп! :&пЬ5р;</сИу><5рап с1а55=,г11пк"
1ск"]и5^Иу-сопГеп1погпла1" опс11ск=“,5еГ(210)*,>погппа1</5рап> <зрап
с1а55="11пк*' 1с1=г,зи51:1Еу-сопГеп-г^1ех-51:аг1" опсИск="5е1:(2,1),г>4=1ех-
51аг1</5рап> <&рап с1а5Б='Т1пк,п Щ="зизЩ^у-сспГепТЕЗех-епсГ
опс11ск-,,БеГ(2>2)">'Нех-епс1</5рап> <5рап с1а&5-"Ппк" 1с1-,’]и511'Ру-
глп^рпГ^ГагТ " ппг 1 т гк='Чр~Ю . 3	г! 1 т пкн________________2

Рис. 25.2. Просмотр в консоли разработчика НТМЬ-кода, созданного в этом примере
Работа с примером

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

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

Чтобы в любой момент сбросить все значения до исходных, просто перезагрузите
документ в браузере, и все настройки будут инициализированы заново. В прила-
гаемом бесплатном архиве файлов примеров также есть документ, сохраненный как
ехатр1е_01а.Ылп1, который идентичен примеру, за исключением того, что в нем все
Нех-элементы инициализированы одинаковыми горизонтальными прямоугольными
размерами (200 х 50 пикселей). Это пригодится при желании проверить, как Нех-
элементы одинакового размера взаимодействуют друг с другом. Если загрузить
этот документ в браузер, он будет иметь вид, показанный на рис. 25.3.

0 ЯехЬох Иаудгаилс!	X +

-? С О О 1оса1Но51/Е)(атр]е5/5есГ10п_3,/25/ехатр1е_01а.Мт1п1	1^ ☆	*

Лсхчйгесйоп : гсну пму-геуеве со1ита со1итд-геуег5е

Лех-м/гар : потар итвр чтар-геусгас

_]из1Ту-соп1еп1: погта! Цех-Мап Лех-епс! ьШп гегйег МгсМ1 кП л^Ь| ^ра^е-ЬсЬУссп зрасс-агоип<1 $рассч?Усп1у.
: П»Л11?1 Пем-кЦцЧ П^-ер*1 ещ! ^П^-Т МГСК11 ^||-<ИаГ1 мИЧйЗ

а1|уп-соп1еп1: иоппа! Гкчмаап Лех-спс! чшп сЫ сетег 51ге1сЬ	ссц ьрасс-агацтД фасс-суеп]у

^ар : Орх =1^ ДШ 40рх 50цх ТОрх

Рис. 25.3. Все Нех-элементы одинаковы, для них задан перенос и центровка
Пех-направление

А теперь давайте рассмотрим эти свойства ИехЪох по отдельности, начиная со
свойства главной оси, Г1ех-а1гесЫоп. Этому свойству присваивается одно из четы-
рех возможных значений:

♦	голу: Нех-элементы позиционируются слева направо

♦	голу-геуегзе: Нех-элементы позиционируются справа налево

♦	со1итп: Нех-элементы позиционируются сверху вниз

♦	со1итп-геуег8е: Нех-элементы позиционируются снизу вверх

На рисунках 25.1 и 25.3 показано, что свойство Г1о™-а1гесЫоп не задано, поэтому и
там, и там применяется значение по умолчанию го™. На рис. 25.4 на трех копиях
экрана показаны все остальные возможные значения в действии.

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

0 НехЬох Р1аудгоипс1	X +

<- с О Ф 1оса1Ьо51/Ехатр1е5/8ес1юп_3/25/ехаглр1е_01 Ьгт1	О >

Г1сх-сНгссйоп : гоц ппу-гсусгае со1итп со1итп-гсусгае

Пех-итар : пои'гар щщэ итар-гсуегм:

]и5(|Гу-соп1сп1: погта! Ясх-5(а11 Ясх-епд ЧаП ьшй сеп1ег ЧГСК11ЬЛ. 5расе-Ье№сся зрасе-агоипс! $расе-суеп1у
аН§п-йспъ : погта! Пех-чап Псх-сгк! чад пи! сетег ЬааЛте ье!Г-ыап ьеН-елс!

аН^п-сотет : погта! Яех-Чаг1 Пех-епд Ча И епи сетег $ггсгс11 ЬаьеПпс $расс-ЬеШееп ноасе-агоипЦ >расе-еуеп!у
§ар : Орх Юрх 20|11 ЗОр* 40|Ж ЮЭД &&& ХОрх 9Орх
0 АехЬох Р1аудгоипд	X 4~

<- СОФ 1оса1Ко5ЪгЕхатр1е5/5еспоп„3/25/ехатр1е_01.Кгт1

Псх-сНгесПоп : гспу гогу-гсуегае со!итп ссИитп-гсУегзе

Псх-игар : по^Тар "тар итап-ГСУсгас

]ияи(у-соп1сп1 : поста! Лех-Мап Лех-епс! Мал <?пс! сеп1ег яге!сЬ 1сП пиЩ, апасе-Ьетееп чрасе-агоипН >расе-е\сп|у
аП^п-нетх : доли?! йОХ-^йЛ ДУхУ^дЦ УШ1 УУД1УГ Ьз^ЙДк' *е1Нд4

а1|уп-соп1сп1: погта! Пех-Мап Пс.\-сп<1 Мап спс! ссп!сг мгс1сЬ ЬахеПпс чраес-ЬеШееп храсс-агоилс! >расс-сксп|\

ЕаР• Ю|Ж 20|>х ЛДе1 5Д|Ж	21*т

0 ПехЬох Р1аудгоипд	X 4“

<“ г С О © 1осв1Ьо5^Ехатр1е5/5есПоп_3/25/ехатр1е_01.Ыт1	1^* ☆	>

Псх-сПгесйоп : гспу готу-гсуега со1итп со1итп-геуегае

Псх-игар : по^гар "тар игар-гух егч*

]имИу-соп1сп1: погта! Пех-Мап Пех-епд мап ссп(ег Мге<сЬ 1еП пе|ц хпасе-Ьетееп храсе-агошм! *>пасс~еуеп!у
а1^п-|1етх : полна! Псх-мап Лсх-еп<! Мап чщЛ селк-г хрукЬ ЬамЯту 5е11-МаП >е1Г-еп4

а1|ел-соп(еп1: погта! Пех-мап Лсх-спс! Мап ии! сеп!ег мгеГсВ Ьа.чс!тс храсе-Ье1\Усеп ьрасс-агошх! нрасс-с\еп!у.

ЙаР : Ддх ЮП1 =Д|Ж	4О|21 ЗОдх	ЙОрх 90рз.
Ф ЯехЬох Р1аудгоигк1	X 4"

<- -> С О 0 1оса1ЬоМ/Ехатр1е5/5есооп_3/25/&хзтр1е01 Ьгпн	•

Псх-сКгссНоп : гоху го\у-гсхсг.чс со!итп ссйитп-гсхсгас

Пех-шгар : пои'гар \щр. итар-гсуег*с

]и$пГу-соп1еп1: погта! Лсх-МаН Псх-ст! Мап ст! сетег мгс!сЬ 1еЛ п^1П $пасе-Ье(\уест1 зпасе-агоипс! $пасе-суеп!у
а11§п-кст$ : погта! Пех-МаЛ Пех-сЫ Мал спс! сетег Мге(сН Ьа?>е1|пе .чеИ-МаЛ м?1Г-егк1

аП^п-сотст : погта! Пех-мал Пех-ет! мал епЛ сетег Мг<яс11 Ьа^еПпе .ърасе-ЬсПУееп япасс-агоиЫ ърасе-е\еп!у

§ар - Урл 10р* 2Уг^ зорх 4Урх 50р^ УУр* 2Ур* УОр*

0 НехЬох Яаудгоилд	X +

<“	" С О О 1оса1Ьо5!/Ехатр1е5/5есГ1оп_3/25/ехагпр1е_01.Ыт1

Пех-сНгесйоп : го" гои-геуегее со!итп ссИитп-геуегау

Псх-игар : притир УУГЯР укгар-гцусгас

]и$иГу<отсп1: полна! Пох-мал Псх-епс! Мап ущ! еепит $<гс<с111еП п§Ь1 кпасе-Ьелкееп $па<а;-агоипи 5пасс-еуеп1у
аК^п-петх : полна! Пех-мап Псх-ет! Мац чщи сспкт н1ге(сЬ ЬамЯ»п< %-Н-МаП >е1Г-сп4

а!|уп-соп(сп(: погта! Псх-мап Псх-епс! Мап ии! сспюг мгскЬ Ьа.че!тс храсс-Ьс1\уееп ьрасс-агоипс! 8расе-е\сп1у
ВаР : УР21 Юр1 =У[Ж ЗОр& ^Ур15УП* УУйХ. ТОрх ЯОрх УУр>к
Наряду с этими значениями свойств есть понятие поперечной оси. Изменить ее
пользователь не может, она — следствие значения свойства Г1о^-а1гесЪ1оп. Если
главная ось — одно из значений строки, то поперечная ось проходит вверх и вниз
по столбцам. Если главная ось — одно из значений столбца, то поперечная ось
проходит слева или справа по строкам.

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

Перенос Лех-элементов

Существует только три способа работы с Дех-элементами с позиции их переноса с
помощью свойства Пех-^гар, а если значение для Пех-^гар не установить, перено-
сы ИехЪох выполнять не будет:

♦	полугар: Это значение по умолчанию, при котором все элементы остаются на
одной линии.

♦	луг ар: С этой настройкой элементы будут переноситься сверху вниз.

♦	лугар-геуегзе: Работает подобно мгар, но переносы выполняются снизу вверх.

На рис. 25.1 и 25.3 показано, как работает значение по^гар, используемое по умол-
чанию, а на рис. 25.5 показана работа значений мгар и мгар-геуегзе, когда объект I
переносится в другое место, позволяя всем Нех-элементам принимать свои перво-
начальные нерастянутые или сжатые значения.

Выравнивание всего содержимого по главной оси

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

♦	погша!: Это значение, используемое по умолчанию, как будто не установлено
никакого выравнивания и исходная позиция — начальный край.

♦	Пех-8€аг1:: Элементы размещаются вплотную друг к другу и выравниваются по
начальному краю контейнера.

♦	Пех-епй: Элементы размещаются вплотную друг к другу и выравниваются по
конечному краю контейнера.

♦	8€аг€: Элементы размещаются вплотную друг к другу и выравниваются по на-
чальному краю главной оси контейнера.
♦	епД: Элементы размещаются вплотную друг к другу и выравниваются по конеч-
ному краю главной оси контейнера.

♦	сеп€ег: Элементы размещаются вплотную друг к другу и выравниваются по цен-
тру главной оси.

♦	1еЙ: Элементы размещаются вплотную друг к другу и выравниваются по на-
чальному краю контейнера.

♦	гщЫ:: Элементы размещаются вплотную друг к другу и выравниваются по ко-
нечному краю контейнера.

♦	зрасе-Ье1луееп: Элементы равномерно распределяются по главной оси вплотную
к краям.

♦	зрасе-агоипс!: Элементы равномерно распределяются по главной оси с неболь-
шими отступами от краев.

♦	зрасе-еуеп1у: Элементы равномерно распределяются по главной оси с полными
отступами от краев.

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

0 ПехЬох Р1аудгоипс1	X +

С О О 1оса1Ьо51/Ехатр1е5/$ес1юп_3/25/ехатр1е_01 ЬГт1	О > У

Лсх-сНгесйоп : гоц ппу-гсусг.чс со!итп со1итп-гсусгае

Пех-игзр : поч'гар к-гар уугар-гсууг^У

]и$НГу*сопГеп(: полна! Пех-Чаг! Гкх-спд 5(ап упД сетег ?цгск11 !еП пДл 5пасе-Ье1\уеет1	$расе-сусп!у.

аИдо-Летв: погта! Пех-81аП Псх-егк! он! сеШег чгекЬ ЬааеНпе 5с1С*1ап *е1Г-епс1

аН§п-сотет : погта! Пех-ЧаП Лех-епд Мап епд деп(ег $1гс1с11 ЬамЖпе >расе-Ье1\уееп ьрасе-агоит! ърасс-еуеп1у
ёаР : Юрх 20рх ЗОр* ±1У|2Х 50рх 6»рх 70рх ХОрх 9Орх
0 АехЬох Р1аудгоипд	X 4~

<- СОФ 1оса1Ко5ЪгЕхатр1е5/5еспоп„3/25/ехатр1е_01.Кгт1

Псх-сНгесНоп : гспу гоху-гсуегае со!итп ссИитп-гсУегзе

Псх-игар : Полгар "тар итап-ГСУсгас

]ияи(у-соп1сп1 : погта! Лех-Мап Лех-епс! Мал <?пс! сеп1ег яге!сЬ 1сП пиЩ, апасе-Ьетееп чрасе-агоипН >расе-е\сп|у
аК^п-нетх : доли?! йОХ-^йЛ ДУхУ^дЦ УШ1 УУД1У1 Ьз^ЙДк' *е1Нд4

а1|уп-соп1сп1: погта! Пех-Мап Пс.\-сп<1 Мап спс! сеп!ег МгскЬ ЬахеПпс чраес-ЬеШееп храсс-агоилс! >расс-сусп|\
ЕаР• Ю|Ж 20|>х ЛДе1 5Д|Ж 2Дп1 21*т

0 ПехЬох Р1аудгоипд	X 4“

<“ г С О © 1осв1Ьо5^Ехатр1е5/5есПоп_3/25/ехатр1е_01.Ыт1	1^* ☆	>

Псх-сПгесйоп : гспу готу-гсуега со1итп со1итп-геуегае

Псх-чгар : по^гар "тар игар-гух егч*

]имИу-соп1сп1: полна! Пех-Мап Пех-епд мап успит Мге<сЬ кП пе|ц хпасе-ЬеШееп храсе-агошм! *>пасс~еуеп1у
а1^п-|1етх : полна! Псх-мап Лсх-еп<! Мап чщЛ устег нрукЬ ЬамЯту 5с11-МаП >е1Г-еп4

а1|8Л-соп(еп1: погта! Лех-мап Лсх-спс! Мап ии! сегПсг мгскЪ Ьа.чс!тс храсе-Ье1\Усеп ьрасс-агошх! нрасе-схепЬ
ЙаР : Ддх ЮП1 =Д|Ж 4О|21 ЗОдх 20рх гЮрх 90рз.
Ф ЯехЬох Р1аудгоигк1	X 4"

<- -> С О 0 1оса1ЬоМ/Ехатр1е5/5есооп_3/25/&хзтр1е01 Ьгпн	•

Псх-сКгссНоп : гочу го\у-гсусг.чс со!итп ссйитп-гсхсгас

Пех-шгар : пои'гар \щр. итар-гсуег*с

]и$пГу-соп1еп1: погта! Лсх-МаЛ Псх-стк! Мап ст! сетег мгс!сЬ 1еЛ п^1П $пасе-Ье(\уест1 зпасе-агоипс! $пасе-суеп!у
а11§п-кст$ : погта! Пех-МаЛ Пех-сЫ Мал спс! сетег Мге1сН Ьа?>е1|пе .чеИ-МаЛ м?1Г-егк1

аП^п-сотст : погта! Пех-мал Пех-ет! мал епЛ сетег Мг<яс11 Ьа^еПпе >расе-ЬеПУсеп япасс-агоиЫ ърасе-е\еп!у

§ар - Урл 10р* 2Уг^ зорх 4Урх 50р^ УУр* 2Ур* УОр*

0 НехЬох Яаудгоилд	X +

<“	" С О О 1оса1Ьо5!/Ехатр1е5/5есГ1оп_3/25/ехагпр1е_01.Ыт1

Пех-сНгесйоп : го" гои-геуегее со!итп ссИитп-геуегау

Псх-игар : притир УУГЯР укгар-гцусгас

]и$иГу<отсп1: полна! Пох-мал Псх-епс! Мап ущ! еепит $<гс<с11 !еЙ п§Ь15пасе-Ье1иееп $па<а;-агоипи 5пасс-еуеп1у
аК^п-петх : полна! Пех-мап Псх-ет! мац чщи сспкт н1ге(сЬ Ьам-Ьп? ->с1Г-маП >е1Г-сп4

а!|уп-соп(сп(: погта! Пех-Мап Пех-епс! Мап ок! сспЮг мгскЪ Ьа.че!тс храес-Ьс1\уесп ьрасс-агоипс! ^расс-счепЬ
ВаР : УР21 Юр1 =У[Ж ЗОр& :Шр*1 $УП* УУйХ. ТОрх ЯОрх УУр>к
0 Р1ехЬох Идудгаил4	X +

-> С О О 1оса111051/Ехатр1е5/5е«10П_3/25/екатр1е_01Мт1

Яех-Шгесйоп : кпу гоуу-гсусгее со1итп сЫитп-геуегее

Псх-итар : пом/гао итар ^гар-псуепге

.]и51Иу-соп1еп1: погта! Пех-5Еап Лсх-епс! кцщ Спс1 оеакг МГ<Д«Я1 кН шЬ1 зрасе-Ьаисеп 5расе-агоипс1 ^расс-сУел!у
а^П-Нетя : п»лп?1 П^-?пЦ	*ЕГУН1	ГСИ-ЙМ1 К1кл^

а! । уп -со п1е гг!: поп па! Псх^ап 11ех-сп<1 яшп сгЛ ссп1ег &1ге!еЬ ЬаьсПгс коасе-ЬеРУсеп н рисс-апшщ! арасе<-усп! у
^ар: Орх Ют Ют Ют Ют Ют Ют Ют Ют

Рис. 25.7. Использование зрасе-значений ЬеЦуееп, агоипс! и еуеп1у (окончание)

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

Выравнивание элементов по поперечной оси

Свойство аИдп-Изетз поддерживает значения, перечисленные чуть ниже. Аналогич-
но ситуации со свойством ЩзНГу-сопЬэпъ, отличить характер эффектов, производи-
мых при использовании одних значений, от тех, что производятся другими, порой
весьма непросто. Зачастую отследить производимые эффекты удается только при
изменении значений других свойств. Итак, это свойство поддерживает следующие
значения:

♦	погта!: Используется по умолчанию и ведет себя как при установке для Йех-
элементов значения з^ге^сь.

♦	Пех-8€агС Края отступов Йех-элементов размещаются на одном уровне с началь-
ным краем поперечной оси.
♦	Пех-епй: Края отступов Нех-элементов размещаются на одном уровне с конеч-
ным краем поперечной оси.

♦	8€аг€: Элементы размещаются вплотную друг к другу на одном уровне с началь-
ным краем контейнера по соответствующей оси.

♦	епД: Элементы размещаются вплотную друг к другу на одном уровне с конеч-
ным краем контейнера по соответствующей оси.

♦	сеп€ег: Элементы размещаются по центру поперечной оси.

♦	8€ге€сЬ: Элементы растягиваются так, что поперечный размер их блоков отсту-
пов выстраивается в одну линию.

♦	Ьа8е1ше: Элементы выравниваются вдоль основной линии их Нех-контейнера.

♦	8еИ-8€аг€: Элементы размещаются вплотную к начальному краю контейнера на
соответствующей оси.

♦	8еИ-еп(1: Элементы размещаются вплотную к начальному краю контейнера на
соответствующей оси.

На рис. 25.8 к Нех-элементам применен набор значений епа, сеп^ег и ЬазеИпе. Чтобы
увидеть различные варианты значений в действии, попробуйте изменить Пех-
сИгесМоп на со1итп-геуегзе, Г1ех-мгар на мгар-геуегзе И аИдп-соп’Ьеп'Ь на епс1, И Сразу
станет заметен целый ряд интересных различий в применении разных значений
аЫдп-Пзетз.

0 ЯехЬох Р1аудгоигк1	X +

С О' Ф 1оса1Ьо51/Ьхатр1е5/8есгюп_3/25/ехатр1е_01 Ьгт!	☆ М У

Псх-сИгссНоп : го\\ гтс-гсусгас соIтип ссйитп-гсусгае

Пех-итар : покугап итар уугар-гс\сг>с

]иМ1Еу-сошет :	погта!	Псх-май Лсх-епЯ >1ап ст! сепЕег 8(гс1сЬ	1сЛ пДи §расе-Ье1\Уссп ^расс-агоипЯ	$пасе-суеп!у

а!1§п-11сп18 :	погта!	Пех-Май Пех-спЯ Май спЯ сетег Мге!с11	ЬамЯтс 5е1Г-Май *е1Г-епс1

а!ц>п-сотст :	погта!	Пех-май Пех-епЯ май епЯ сетег мгсгсЬ	Ьа?>е1те >расе-Ьей\ ееп ьрасе-агоипЯ	$раее-е\еп!у

§ар :	Орх 1()рх ^Орх ЗОрх 40рх 5Орх> 60 рх 70рх ХОрх	90рх
0 ПехЬох Р1аудгоилд	X +

С О О 1оса1Ьо5УЕхатр1е$/5есг1ОпЗ/25/ехагпр1е_01.Мт1	☆ Я

Псх-сКгесНоп : гоуу гоху-геусгее со!итп со1итп-геусг$е

Псх-ххгар : пои гао \угар хУгар-ГСУсгас

]и$иГу-соп(сп1: полна! Пех-ашл Пух-уш! мал ш! сстег 5№е<сЬ 1еЙ зрасс-Ьет’сеп зпасе-агоипс! &пасг~еуея1у

аК§п-|!ст.ч: полна! Дй\:йм1 пЫП ш!	Ьу.^.1цц

аНцп-сотст : погта! Пех-мап Яех-епд *(ал еп! сеп!ег ыгекЬ Ьа.чс!'тс нрасс-ЬсПУссц .чпасс-агоилН 5расе-сУеп1у
йар : ОеХ 1111212012121Ш10(21 ^21 60П120В1 $<2121121101

0 ЯехЬох Р1аудгоипд	X +

<- -> С О О 1оса1Ьо5!/Ехатр1е5/5есЪоп_3/25/ехагпр1е_01.К(т1

Пех-сНгесйоп : гспу гои -гсуегес со1ип1п Ыитп-гсуега;

Псх-игар : притир УУГЯР игап-гцусгас

]и*;иГу-соп1сп1: полна! Гкх-МаП Псх-епд мал ущ! ссп(ег 5№е<сЬ !еЙ п§Ь1 >пасе-Ьел\ееп $пасе-агоип(15пасс-еуеп1у
аК^пчЮт.ч : полна! Цсх-хшп Псх-епс! мац сспк-г нцу1с1> Ьа.м?1те 5еН-МаП >е1Г-сп4

а!|8П-соп(еп1: погта! Пех-мап Псх-спс! ящп ии! ссп1сг мгсГсВ Ьа.чс!тс храес-Ье1\Уссп .чрасс-агоипс! <>расе-с\еп1у.

ВаР : 12121112(21211121212(2110(2150(2150(2120(21 212(2100(21
Выравнивание всего содержимого
по поперечной оси

Мы разобрались С работой свойства аИдп-Изетз, НО есть еще СВОЙСТВО аИдп-сопЬепЬ,
устанавливающее распределение пространства между Нех-элементами и вокруг них
вдоль поперечной оси ИехЪох. Считайте это версией аИдп-лЛетз, используемой на
противоположной оси. Это свойство поддерживает следующие значения:

♦	погта!: Совокупность элементов находится на исходных позициях, как будто
это свойство к ней и не применялось.

♦	Пех-8€аг€: Совокупность элементов с поперечным начальным краем строки
сдвигается в начало контейнера.

♦	Пех-епй: Совокупность элементов с поперечным начальным краем строки сдви-
гается в конец контейнера.

♦	8€аг€: Совокупность элементов с поперечной осью сдвигается в начало контей-
нера.
0 НехЬох Р1аудгоип<1	X +

' С О ® 1оса1Ио5</Ехатр1е5/5ес1юп_3/25/ехалпр1е_01.Ыт1	I*?	:

ПсхчНгесйоп : гоуу гои-гсуегае со!птп со1итп-геусг5е

Псх-игар : лоитгао уугар ктап-геусгас

]и$иГу-соп(сп1: погта! Пех-&1ал Лсх-епс! май угк! сетИег ЯгессЬ кН ГшШ. апасе-Ьешееп япасе-агоипс! 5пасс-еУел!у
аИ^пчЮтж : ПРППа! 1кХ-МйГ! 1кх-СД4 ДДЛ ещ! с^дкт ИккЬ Ьа^-Цпс чсЦ-Май 5С11Чп<1

а1|§л-соп1еп1: погта! Псх-чап Лсх-спс! май ст! ссгЯсг ,ч1гскЬ ЬахсКпс храсс-Ьс1\уссп арасс-апшт! ярасс-суеп|у
&ар : ЮП12Л|Ж	50дх 60цк 70рх 80рх

0 НехЬох Р1аудгоип<1	X +

-СО О 1оса1Ко54/Ехатр1е5/5есПоп_3/25/ехатр1е_01.Ыт1	:

Псх-сИгесйоп : гспу гои-геУегае со1птп со1итп-геуег$е

Псх-итар : поитар \угар итар-гсусгас

]и81|Гу-соп1сп!: полна! 11сх-$1зп Лех-епс! ?ааг! угм! сеп(ег зГгскИ кН 1!ёЬ1 ^пасе-Ьдц^п $пасе-агоип<1 5пасс-еуеп!у
аЛйП-Нстя : п»ППа1 ПЕК-М	2Ш1КД1СГ *!КкЬ Ьам±пс чсЦ-МаП

а1|§п-соп1сп1: погта! Лсх-.ч1ал Лех-спс! мам спс! сспкт нкскЬ ЬаксНпс красе-Ьс1хуссп кпасс-агоипс! ?>расс-суеп!у
ёаР : ЮП12Л|Ж 2ДП15Дцх 60д& 70рх Ж)рх 9О|Э^
0 ЯехЬох Р1аудгоипд	X +

<- С О Ф 1оса1Ьо51/Ьатр1е5/8ес11ОП_3/25/ехап1р1е_01 Ьтт1	•

Псх-ЛгссНоп : гочу пну-гсусгчс со1шпп со1итп-геусгас

Пех-итар : пои'гап чугзр чсгап-гсусгас

]иМ1 Гу-сотет: погта! Пех-Маг! Лсх-«к1 Май сетег $гге1ск 1сЛ ц^|Ц 5оасе-Ье1\уесп >г>аее-агоип<! >расе-еуеп)у
а11§п-Исп18 : погта! Пех-мап Псх-спд Мап ст! сетег Чге!сЬ Ьа&еПпе ье!Г-маП яе!Г-еп<1

аП^п-сотет : погта! Пех-мап Пех-епЦ Мап $ш! сепк-г мпясЬ ЬаьеЦпе ьрасе-ЬсПч ееп ьрас.с-агоипД ^расе-еуеп.1.ч
ёар Орх Юрх 20рх Юрх Юрх Юрх ООрх Юрх Юрх Юрх

0 ЯехЬох Р1аудгоипс1	X +

С О О 1оса1КоМ/Ехатр1е5/5есПоп_3/25/ехатр1е_01.тт!	:

Псх-чИгесйоп : гоуу гочу-геуег&е со!птп со1итп-геуег$е

Псх-ччгар : пои гао чугар чч гап-гсУсгкс

]имйу-соп1ет : полна! Псх-Мап Лсх-егк! Май спс! сеп(ег Мге1с11 кП д§Ь1 Бпасе-Ьешееп апасе-агоипс! 5пасе-еУеп!у
аН^п-истя : ПРПШ11кХ-МйГ! Д?Х-€Ш! МД1 ещ! сцЦсг Мк!уЬ ЬачуЦпс хеЦ-МйЙ

а1|§п-соп1сп1: погта! Пех-мап Лех-ст! мам ст! сспЮг нггсГсЬ ЬдхсКпс ярасс-Ьепуесп кпасс-агоит! ?>расе-суеп!у
иаР: Орх Юрх 20рх Юрх Юрх Юрх ООпх 20рх Юрх Юрх
0 ПехЬох Р1аудгоилд	X +

С О О 1оса1Ьо5УЕхатр1е$/5есг1ОпЗ/25/ехагпр1е_01.Мт1

Псх-сКгесНоп : гоуу гоху-геусгее со!цтп со1итп-геусг$е

Псх-ххгар : пои гао уугап хугар-геусгас

]и$иГу-соп(сп1:	полна! Пех-ман Пух-уп^	мал ш! сеп»ег $№е<сЬ	1еЙ $пасс-Ье|Ц’сеп	апасе-агоипс! 5пасе^уеп|у

аКёП-йст.ч :	П»ппа1 Де&^йД Де^-ед.с1	Мац сщ! сщ1с,[	Ь&сДпд чсЦ^йИ

аНуп-соШеМ :	поппа! Пс.у.чшп Де.\-спс1	щц ии! сеП1еГ	Ьаче!тс ^расс-Ье^уеец	ьрисс-агпиЫ >расе-ехсп)х.

^ар :	Орх Юрд 2ДЦХ 2ДП2к 4О|215Дцх 60рх 70рх	80рх	90рх

ЦТ' в

НИ

Рис. 25.10. Настройка свойства выравнивания элементов
на значения 1ей, сеп1ег и (окончание)

♦	епй: Совокупность элементов с поперечной осью сдвигается в конец контейнера.

♦	сеп1ег: Элементы размещаются вплотную друг к другу в центре контейнера
вдоль поперечной оси.

♦	81ге1сЬ: По необходимости размер любых элементов с автоматически задавае-
мым размером увеличивается в равной степени.

♦	ЬазеПпе: Совокупность элементов выравнивается вдоль основной линии ее Дех-
контейнера.

♦	зрасе-ЬеЬуееп: Элементы равномерно распределяются по поперечной оси
вплотную к краям.

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

♦	зрасе-еуеп1у: Элементы равномерно распределяются по поперечной оси с пол-
ными отступами от краев.

На рис. 25.9 показаны результаты выбора значений з^аг^, сеп^ег и епа. При проведе-
нии экспериментов со свойством аИдп-сопЬэпа можно изменить настройки проме-
жутков, выбрать разные значения свойства аПдп-Изешз и посмотреть, какие резуль-
таты можно получить.
К примеру, на рис. 25.10 показано значение аИдп-сопкепк, установленное на епа, со
значениями зкагк, сепкег и епа свойства аИдп-Изешз. Заметьте, что эти выравнивания
происходят на одном и том же месте, без изменения выравнивания совокупности
элементов.

Другие свойства

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

Есть также и другие свойства, не задействованные в примере. Во-первых, есть
свойство 0'го.ег, С его помощью можно задать желаемый приоритет для каждого
Йех-элемента. По умолчанию значение их свойства оЫег равно 0, чем задается наи-
высший приоритет, но, если некоторые элементы должны появиться на втором
уровне, их свойству оЫег можно присвоить значение 1, а если у других элементов
должен быть еще меньший приоритет, их свойству оЫег можно присвоить 2 и т. д.,
создавая нужную сложность упорядочения.

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

Указываемые значения — пропорции. По умолчанию свойство Ыех-дгсм имеет зна-
чение 0, которое можно увеличивать, используя целые числа или числа с плаваю-
щей точкой, чтобы указать, какая часть оставшегося пространства в йех-
контейнере должна быть назначена элементу.

По умолчанию свойство Г1ех-зЬг1пк имеет значение 1, которое можно изменять, ис-
пользуя целые числа или числа с плавающей точкой, чтобы указать, насколько мо-
жет быть сжат элемент, чтобы в доступном пространстве могли разместиться дру-
гие элементы.

Оба эти свойства работают в сочетании со свойством Г1ех-Ьаз1з, которое определя-
ет размер элемента с позиции пространства, оставляемого им в качестве доступно-
го. Его значение по умолчанию — аико, его можно изменить на любое значение из-
мерения ширины, например Пех-Ьазаз: 120рх и т. д. Или же в качестве значений
Г1ех-Ьаз1з МОЖНО ИСПОЛЬЗОВать СТрОКИ Ш1, тах-сопкепк, тап-сопкепк, Нк-сопкепк ИЛИ
просто сопкепк (для автоматического задания размера на основе содержимого эле-
мента).

Полноценное объяснение порядка работы ИехЪох от его проектировщиков можно
найти по следующему ПКЕ-адресу: к1пуиг1.сот/ЫехЬазтсз
А это ссылка на веб-сайт, где показано, как с помощью ИехЪох создать то, что на-
зывается Святым Граалем макетов: Мпуиг!. сот/ЬдПех

Заключение

На данный момент вы уже узнали обо всех удивительных возможностях, получае-
мых с помощью ИехЪох. Средство позволяет, если вы того пожелаете, создавать
целые макеты, хотя некоторые более крупные макеты могут стать сложными для
управления из-за их одномерности. Поэтому в следующей главе рассматривается
альтернативная технология двумерной компоновки под названием С88 Спб.
ГЛАВА 26

С88 (Зпс1

Введение

Каким бы эффективным ни был ИехЪох, он не отличался абсолютной универсаль-
ностью и завершенностью, на что, возможно, изначально надеялись его разработ-
чики. Да, все в нем легко, гибко и прекрасно работает, но иногда ничто не может
заменить сетку §пс!-макета, и плоскости просто больше не подходят для работы.

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

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

Структура

В этой главе рассматриваются следующие темы:

♦	Изучение концепции С88 Опб и причин создания этой технологии наряду с
ИехЪох.

♦	Работа с интерактивной средой С88 (Зпб, представленной в этой главе.

♦	Изучение всех основных свойств и функций С88 Сгиб.

♦	Приобретение навыков размещения элементов сетки именно там, где они нужны.

Цели

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

В этой главе, как и в ее предшественнице, посвященной ИехЪох, есть только один
весьма объемный пример, но с ним стоит поработать, так как он позволяет протес-
тировать практически неограниченное количество §пс!-макетов С88, не заставляя
самим создавать образцы документов.

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

Разумеется, это не полноценный продукт, а только пример, поэтому работа ограни-
чивается девятью дочерними элементами и максимальной сеткой 9 на 9 ячеек.
И все же этого вполне достаточно для изучения всего необходимого касательно ис-
пользования модуля С88 Опс1.

Чтобы длина документа не превышала 100 строк, в примере 26.1 было опущено не-
сколько строк, которые иначе оставались бы пустыми. Но если захочется поэкспе-
риментировать с кодом, прочитав объяснения порядка его работы, можно будет
взглянуть на файл ехатр1е_01а.Ыт1 в бесплатном прилагаемом к книге архиве фай-
лов примеров, который идентичен приводимому здесь, но содержит больше пробе-
лов, а также выводит создаваемый код НТМЬ в консоль разработчика на тот слу-
чай, если его захочется изучить.

Пример 26.1

1.	<!ЭОСТУРЕ Ыт1:	>	
2.	<Ыт1>		
3.	<Ъеас1>		
4.	<ЫЫе>СЗЗ	СгЫ Р1аудгоипсК/ЫЫе>	
5.	<зку!е>		
6.	Ьос1у {	Ьаскдгоипс!	: #с!еГ; }
7.	тприк {	ЫЫИ.	: ЗЗрх;
8.		тагдтп	: 0 0 5рх;
9.		Гопк	: брк топозрасе; }
10.	.1аЬе1 {	иск!	: ИОрх;
11.		кехк-аИдп	:	: гадЫ;
12.		Г1оак	: 1еЫ; }
13.	. Ипк {	СО1ОГ	: Ыие;
14.		кехк-ЫсогаЫоп :	: ип4ег11пе;
15.		сигзог	: ротпкег; }
16.	#оикег {	сНзр1ау	: дгЫ;
17.		ЬоЫег	: 1рх зоЫс! Ыаск;
18.		ЬоЫег-гасНиз	: 5рх;
19.		Ьаскдгоипс!	: Ыпеаг-дгасНепк (суап, ЫерзкуЫие) ;
20.		раскНпд	: 5рх;
21.		Ьох-з1х1пд	:	: ЬоЫег-Ьох;
22.	ЫсИЫ	: 100%;
23.	ЪеадЬк	: 350рх;
24.	гезтге	: Ьокк;
25.	оуегЫом	: ЫсМеп; }
26.	.Ьох { Ызр!ау	: Ыех;
27.	ЬаскдгоипЬ	: Ыпеаг-дгасИепк (уеЫом, геЬ) ;
28.	аЫдпЫкетз	: сепкег;
29.	ЗизкЫу-сопкепк : сепкег;
30.	ЫЬЫ	: 100%;
31.	ЬеадЬк	: 100%;
32.	ЬогЬег	: 1рх зоЫЬ Ыаск;
33.	ЬогЬег-гаЫиз : 5рх;
34.	копк	: Ьо!Ь 2Орк Апа!;
35.	гезахе	: Ьокк;
36.	оуегЫом	: аико;
37.	со1ог	: Ы!ке; }
38.	</зку!е>
39.	</ЬеаЬ>
40.	<ЬоЬу>
41.	Соикрик !Ь='оикрик’></оикрик>
42.	<зсг!рк>
43.	зекЫпдз = [ ’дгЫ-аико-ЫоЫ , ’ ^изкЫу-сопкепк',
44.	’ аЫдпЫкетз' г ’ аЫдп-сопкепк ’ , ' со1итп-дар',
45.	'гом-дар’, ’со!итпз’, 'гомз’]
46.	уа!иез = [[’гоЫ, ’со!итп’, ’Ьепзе’, ’гом Ьепзе’,
47.	’со!итп Ьепзе’],
48.	[’погта!’, ’зкагк’, ’епсГ, ’сепкег’, ’1е!к',
49.	’гадкк’, 'зрасе-Ьекиееп’, ’зрасе-агоипЬ’,
50.	’зрасе-еVеп1у’],
51.	[’погта!’, ’зкагк’, ’епсГ, ’сепкег’, ’зкгексЬ’
52.	’ЬазеЫпе', ’ зе1!-зкагк’, ’зеЫ-епсГ],
53.	[’погта!’, ’зкагк’, ’епсГ, ’сепкег’, ’зкгексЬ’
54.	’ЬазеЫпе', ' зрасе-ЬеЫееп', ’ зрасе-агоипЬ',
55.	’зрасе-еуеп!у’],
56.	[’Орх’,	’10рх’, ’20рх’, ’ЗОрх’, ’40рх’,
57.	’50рх’, ’бОрх’, ’70рх’, ’80рх’, ’90рх’],
58.	[’Орх’,	’10рх’, ’20рх’, ’ЗОрх’, ’40рх’,
59.	’50рх’, ’бОрх’, ’70рх’, ’80рх’, ’90рх’],
60.	['1','2','3','4','5','б','7','8',’9'],
61.	['1',’2',’З',’4',’5',’б',’7','8','9’]]
62.  63.	соипкз = []; оиЫ = ’’; оик2 = "<Ьг><ЬЫ !Ь= ’оикег’>\п"
64.	ког (] = 0 ; з < зекЫпдз. 1епдкЬ ; ++д)
65.	{
66.	з	= зекЫпдз []]
67.	оик! += ЫЬЫ с!азз=’1аЬе! ’>$ {з} : &пЬзр;</Ыу>\Ы
68.  69.  70.  71.  72.  73.  74.	Гог (к = 0 ; к < уа!иез[^].1епдкк ; ++к) {  V	= уа!иез[]][к]  оик1 += '<зрап с1азз=’Ипк’ 1с1= ’ ${з}${V} ’ ' + чопсИск=’ зек (${д}Л${к}) ’ >$ {у}</зрап>\пч } оик1 += ’<Ьг>’  }
75.  76.  77.  78.  79.  80.  81.  82.  83.  84.  85.  86.  87.  88.  89.  90.  91.  92.  93.  94.  95.  96.  97.  98.  99.	оик1 += "<с11у с!азз= ’ 1аЬе1 ’ >дг1с1-агеа : &пЬзр;</сИу>\п"  Гог ( д = 0 ; д < 9 ; ++д) {  1	= ЗкгГпд.ГготСкагСос1е (65 + })  соипкз|д] = ’аико ’.гереак(] + 1)  оик1	+= 1 + <1прик опскапде="ск (’Вох_$ {1} ’, Шз)">\п'  оик2	+=	'<с[гу с1азз=’Ьох’ 1с1=’Вох_$ {1 }’>${!}</с!гу>\п'  }  1с1 (’оикрик’). ГппегНТМЪ = оик1 + оик2 + ’</сИу>’;  ГипскГоп зек(]Л к) {  з = зеккГпдз^]; V = уа!иез[^][к]  Гог (х = 0 ; х < уа1иез[^].1епдкк ; ++х) { зку!е(з + уа1иез[]][х], ’Гопк-мейдкк’, ’погта!’) зку!е(з + уа1иез [з ] [х], ’со1ог’,	’Ыие')  } зку1е(з + V, ’Гопк-меГдкк', ’Ьо1сГ ) зку1е(з + V, ’со1ог’,	’гесГ)  1Г (V > 0) зку1е (’ оикег ’, ’ дг!с1-кетр1аке-’ + з, соипкз[V - 1]) е!зе	зку1е(’оикег', з, V)  }  ГипскГоп ск(оЬ}1, оЬ^2) { зку1е(оЬ}1,’дгГсЬагеа’ЛоЬ}2.уа1ие) } Гипскаоп йс!(уа1) { гекигп с!оситепк.декЕ1етепкВу1с1(уа1) } Гипскаоп зку1е(оЬ^, ргор, уа1) { йс! (оЬ]) . зку1е [ргор] = уа1 } </зсг1рк>  </Ьос1у>  </Ъкт1>

Чтобы сократить длину документа до 100 строк, не позволяя его распечатке зани-
мать слишком много места в книге, было выбрано применение сценария 1ауа8спр1,
позволяющего создать над областью сетки всю область управления.

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

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

В строке 6 телу документа придается цветной фон, поэтому все теги <1прик>, начи-
ная со строки 7, имеют соответствующий стиль. Все это позже будет применяться
для настроек свойства дгЫ-агеа. Затем в строках с 10 по 15 задаются стили для эле-
ментов с идентификаторами, используемыми в качестве ссылок с прикрепленными
к ним событиями щелчка кнопкой мыши. Начиная со строки 16 задается стилевое
оформление <с11у>-контейнера ои^ег, содержащего дочерние элементы, начинаю-
щееся с установки для свойства сИзр1ау значения дгЫ. Тем самым для этого элемен-
та приводится в действие весь модуль Опб. Можно также воспользоваться значени-
ем 1п11пе-дг1а, помещающим сам контейнер на одну линию с любыми родственны-
ми элементами, но не влияющим на его дочерние элементы. Размер этого
родительского элемента может изменить пользователь.

Стилизация класса, используемого каждым из девяти дочерних элементов, начина-
ется со строки 26. Заметьте, что для свойства сИзр1ау всех этих блоков указано зна-
чение Пех, и сделано это по одной единственной причине — для получения про-
стого способа центрирования текста в области содержимого сетки как по горизон-
тали, так и по вертикали. Размер блоков также может изменять пользователь.

Как работает пример

Сначала в разделе <зсг1р^>, начинающемся в строке 43, происходит заполнение не-
скольких массивов. В массиве зе^1пдз[] содержатся все имена свойств, к которым
мы будем обращаться, а в массиве уа1иез[] [] (двумерном) содержатся все возмож-
ные значения для каждого из свойств. После этого следует пустой массив соипъз[],
который будет заполнен позже, и две переменные, используемые для вывода кода
НТМЬ, который будет создаваться сценарием 1ауа8спр1. Значение переменной оиМ
начинается с пустой строки, а переменной ои-ь2 — с тега <Ьг> и начала нового эле-
мента <сНу>. Эта переменная также будет дополнена, прежде чем чуть позже ее зна-
чение само будет добавлено к значению переменной оиМ.

Затем в строке 64 начинается цикл, предназначенный для достижения сразу не-
скольких целей. Во-первых, он извлекает из массивов всю информацию, помещая
ее в код НТМЬ. Эту информацию можно увидеть в первых восьми строках раздела
в верхней части окна браузера. В этом коде НТМЬ:

♦	Перечисляются различные свойства.

♦	Дается подробное описание возможных значений свойств, на которые можно
щелкать кнопкой мыши, чтобы применить их значения к родительскому <с11у>-
элементу ои^ег.

Созданный код НТМЬ добавляется к значению переменной оиМ. Затем в строке 75
к значению переменной оиМ добавляется дополнительный код НТМЬ, чтобы начать
заключительную строку верхнего раздела, поддерживающую ввод значений дгЫ-
агеа за счет отображения имени свойства.

Начиная со строки 76, задается еще один цикл, в котором массив соипъз[] заполня-
ется строкой аи^о в первом элементе, аи^о во втором, н так до девяти повторяю-
щихся слов в девятом элементе. Эти девять значений поддерживают настройки ме-
жду 1 и 9 столбцами и (или) чуть позже строками (если пользователь щелкнет
кнопкой мыши), назначив одно из значений атрибутам дг1а-^етр1а^е-со1итпз или
дпй-^етрХа^е-го^з. Каждый экземпляр слова аи^о добавляет еще один столбец или
строку.

К значениям переменных оиМ и ои^2 также добавляется код НТМЕ, позволяющий
реагировать на изменение значения тега <1при^> и вызывать в ответ функцию сЬ ().
Кроме того, дочерним §пс1-элементам присваиваются значения ГО, каждому из ко-
торых назначаются буквы от А до I для отображения по центру элементов.

Весь НТМЕ-код, добавленный к значениям этих двух переменных, затем копирует-
ся в свойство гппегнтмъ элемента ои^ег и закрывается тегом </агу>. Если захочется
увидеть весь собранный код НТМЕ, можно перед строкой 83 добавить следующий
код (что уже сделано для вас в файле ехатр1е_01а.ьш1 в бесплатном прилагаемом
архиве примеров):

сопзоХе. 1од (1а (’ ои^ри^ ’) . аппегНТМЪ)

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

В свою очередь, три функции в строках с 94 по 96 применяют значение, введенное
в поле, сформированное одним из тегов <1при^>, к свойству дг1а-агеа, возвращают
объект, просмотрев его идентификатор, и применяют к объекту стилевые на-
стройки.

Работа с примером

Если вы пропустили предыдущее объяснение, ничего страшного — оно предназна-
чено для тех, кто программирует на 1ауа8спр1 и хочет знать, как все это работает.

В этом разделе вы в роли веб-дизайнера или разработчика можете поэксперименти-
ровать с различными §пс!-функциями, загрузив пример в браузер, и получив изо-
бражение, показанное на рис. 26.1.

В модуле С88 Опе! имеется девять основных свойств (некоторые из которых также
используются ИехЪох и другими модулями), а также ряд связанных вспомогатель-
ных СВОЙСТВ. К НИМ ОТНОСЯТСЯ дг1а-аиГо-Ыом, ^зШу-сопГепГ, аИдп-гЪетз, аИдп-
соп^еп^, со1итп-дар, гсж-дар, дг1а-^етр1а^е-со1итпз, дг1а-Гетр1аГе-гомз И дгЫ-агеа.

Некоторые из этих свойств применяются по-разному в зависимости от настроек
других свойств. Например, если для дг1а-аиЪо-Г1о^ установлено значение со1итп, а
не гсж, соответствующие свойства будут применяться по вертикали, а не по гори-
зонтали, и т. д. Теперь давайте подробно рассмотрим некоторые из этих свойств.
0 С55 Спс1 Р1ауд гоипс)	X 4-

<- -> 0 О © 1оса1Ьо51/Ехатр1ев/5еа1Оп_3/2б/ехатр1е^01.Н1т1 I*? ☆	# */ :

§гк1-ашо- По\у : гоуу со1итп с1епас го\кг Неплс сНитпчкпьс

]из6 Гу-сопют : погта! $Гаг1 спс! сеп1ег 1еЯ храсе-Ьспусеп нрасе-апшт! чццсс-сл сп1 у
аН&п-Нет$ : поппа! *шг1 епс! сетег $(ге1сН ЬачсНпс чс|Г-^иш зсИ-сги!

аН^п-сотет : погта! ч!ап епс! согн_ег БСгеТсЬ Ьа^е!тс ^расс-Ьепуесп драсс-агттс! *расе-суеп|у
со1итп-^ар : Орх Юрх 7П|1Х ЮрХ 40}1Х 50рх 60 рх 70рх ЮрЛ Юж

гоху-^ар : Орх Юж Юж Юж 40 Ж 50 Ж 60ж 1Рж Юж ЮЖ

со1итп5 :1 2 3 4 6 7 Я 0

го\У5 : I 23 456789

ёгк!-агеа : А।	: В [	|С1 ]Р|	)Е|	|Р[	]О[	]Н [	]11“

Рис. 26.1. Исходные настройки интерактивной среды С88 Опс1

Задание потока 6г!с!-элементов

Направление потока элементов определяется свойством дг1а-аиЪо-Г1о^, который
поддерживает следующие значения:

♦	голу: Элементы размещаются, заполняя по мере надобности каждую строку —
используется по умолчанию.

♦	со1итп: Элементы размещаются, заполняя по мере надобности каждый столбец.

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

♦	голу йепзе: Элементы размещаются, заполняя каждую строку, а также заполняя
любое ранее оставленное пустое место.

♦	со1итп Депае: Элементы размещаются, заполняя каждый столбец, а также за-
полняя любое ранее оставленное пустое место.
Если значение этому свойству не задано, по умолчанию используется строка с раз-
реженным заполнением пустых мест. Чтобы исследовать плотную упаковку, нужно
оставить в сетке пустые места и посмотреть, как они будут заполняться. На рис. 26.2
показаны девять элементов сетки, со значением со1итп свойства дгЫ-аЩо-Псж.

@ С55 Сг1с1 Р1 ауд гоилс)	X 4-

с С © 1оса11по$Шхатр1м/5шюпЗ/26/ёхатр1к?01Ып4 Ф Л :

: гоку со1птп гску с!епзе сЫнтпчЗспче

]и51И’у-соп(ет : т?гта1. сп4 сетег 1еЙ пЙИ ьрасЫК'йУаеп апасе-агоипд мжх>еуеп1у

: погта! я1ан сп<1 сетег мгс1сН ЬазсПпе $с!Г-51ап ье1Гет1

аН^л-сотет : погта! ^ад ст! сетег 5Сге1сЬ Ьа^еКис ^расс-Ьсиуесп ьрасс-агоишЬ ярасе-еуеп1у

сокнтп-Й*1р : Орх [Орх 20цх ЗОрх 40рх 50рх 60 рх 70рХ Ж)рх 90р\

ит'-^ар : Орх ±0рх Щцх ЮрХ 40рХ Юрх (Юрх 70рХ КОрх 90рх

со1итп5 :1224567Я9

гтУ5 : 123456739

§п4-агеа : А1 : В [ |С|	| В |	1Е |	| Р [	] 6[	|Н[ ]1

Рис. 26.2. Порядок размещения был переключен на режим столбцов

Выравнивание содержимого

Чтобы выровнять содержимое различными способами, можно воспользоваться
свойством Юзиту-сопъепъ аналогично тому, как это делалось в технологии ИехЪох.
Это свойство поддерживает следующие значения:

♦	погта!: Это значение, используемое по умолчанию, как будто не установлено
никакого выравнивания и исходная позиция — начальный край.

♦	8€агЕ Элементы размещаются вплотную друг к другу и выравниваются по на-
чальному краю линейной оси контейнера.
♦	епД: Элементы размещаются вплотную друг к другу и выравниваются по конеч-
ному краю линейной оси контейнера.

♦	сеп€ег: Элементы размещаются вплотную друг к другу и выравниваются по цен-
тру линейной оси.

♦	1еЙ: Элементы размещаются вплотную друг к другу и выравниваются по на-
чальному краю контейнера.

♦	Г1§Ь€: Элементы размещаются вплотную друг к другу и выравниваются по ко-
нечному краю контейнера.

♦	зрасе-Ье^ууееп: Элементы равномерно распределяются по линейной оси вплот-
ную к краям.

♦	зрасе-агоипс!: Элементы равномерно распределяются по линейной оси с не-
большими отступами от краев.

♦	зрасе-еуеп1у: Элементы равномерно распределяются по линейной оси с полны-
ми отступами от краев.

0 С55 Сгк1 Р1аудгоипд	X +

-> С О © ^оса1Ьо5.1УЕхатр1е8/$еа1оп_3/2б/ехатр1е^01.Игт1 ☆ Й- •

^л<1-аи1о-По\у : гои. со1итп дспзс го\у Цспхе аЯитпчкгке

]из(1 Гу-сотеш - поста! Мап сид септес 1еП храсе-Ьспу’оеп ьрасс-агоипд $пасе-еуеп1у,
аН§п-пет$ : поста) *1йГ1 с не! сепкег мге1сЬ Ьэ^еБпе 5е!Г-51аг1 8с)Г-еп<1

аН^л-сотет : погта! *ЛлП сп<1 сел 1ег Ьа^еНпс нрасс-ЬеИУссп чраес-агоипН * расе-счел! у
со кил п -^ар : Орх [Орх 2 Орх ЗОрх 40рх 50 рх 60 рх 7 Орх ЗОрх 90 рх

гоху-^ар : Орх 10рХ 20рх 30]тх 40рХ 50рх 60цх 70рх 80рх 90рх

со!итп$ :1 23456739
0 Сгк1 РЦудгоцпс!	X 4-

С О © 1осэ1Ио51/Екатр<е5/5есГ1оа_3/2б/е*этр1е_01.Н|1(п< ф Л :

$гк1-ашо-Поху : пт со] и пт гкпас гоху депзе со1итп-<1епяс

]ияиГу-со1№п1: п^ппа! &1зп ет! свшрг 1сП ц$;Ш хра^Ьу। ху <?? п ^па-а гор *рас^-сусп|у
аН&п-петя : йогта! май ет! сетег кнеик Ьа&сПпс яс!Г-ман &с1Е-сшД

а11^п-ооп[еп1: попил! ^ап ст1 сетсг >1гс1сН Ьа>е|!ре чрасе-ЬеПУсен >рдсс-аго1пи.1 ьрас1?-еусп1у

сЫитп-зар : Ощ 20|2& 21Ш	21][Й кШ 2ЙВ1 Н2ПЛ

гош-^р : Нцч Я!рх 2Орх 30 рх 40рх 511 рх ЁЙВй 20рХ ЙОрх 21*рх

со1ити5 :12^121г2Н^

генуя =123456784

доГогей : А [	] В.[	| СI	] В Г IИI 1НI IС Г IН ( ~] I Р~

@ С55 бпд Р1аудгоипс1	X +

С О © 1оса1Но5(/Ехатр1е5Лес110п,3/26/ехатр1е_01.Ь1гп1 I*? ☆	&	:

^гк1-аию-По\у : пт со!итп гкчке гоху йепке со1итп"4елхс

]ияйГу-соп(еп1: пуппй! ш! кН ШШ ШКг1*№«Д ЗЖЕ:йК».ШК! Ж.^УЙ11У.

аП§п-11ет8 : погта! я1ап епс1 сетег я1ге1с11 Ьаяс1|'пе $е1Г-я1ап мЯГ-ут!

аН§п-соп1еп1: погта! ьтп ст! сешсг ?>1гс1сЬ Ьа.чс!те >расс-ЬсШссп япасе-агоипс! 5пасосусп1у

со!ипт-^ар : Ощ Ц)рх 20рх ЗОрх 40рх 50рх АОрх 70рх ХОрх 90р2<

го\у-еар : 0р\ Шрх 20рх ЗОрх 40р_х ЭДр_х 60рх 20рх $Ор_х 90рх

со1итпя =123456789

ГОХУ8:12Щ^2Д2	_____ _______ _______ ______ _______ _____________

§п(1-агеа : А Г) В |	| С |	| ВI 1Е |	| Г1	! С1	| НI 111 I
0 С55 6пс1 Р1аудгоипд	X +

0 О' О 1оса1Ьо8УЕхатр1е8/5еспоп_3/26/ехатр1е_01.Ьгт1 ☆ Л :

§пН-аи(о-Поху : голу со!итп 4спяс голу <.1сп.че ео1итп-<1еп$е

]ияНГу-соп1сп1: погтаI ?ЯаП спд сеп1ег |ей	мрасе-ЬеПл ееп арасс-агсптд $расе-ел'еп|у

аП§пч(ет$ : додда! сщ! сегЦег ^с(у,Ь Уа^дс М&Ш Зегерс!

аКёп-сопГепС: цощЫ Мил еп<1 й?ЖС *1&1чЬ кафире ^раре-ЬеАллесд 2>дас<>аго_ипд араее^еуедЯу.

со1итп-§ар : Орх Юдх Ют ЮрА ЮШк ЮрХ кОрх Юрх <^Орх ЮрХ

го\у-еар : Орх ЮрХ Юрх Зорх 40рХ Юрх 60рх 70рХ 8орх 90рх

со1итп8 :1234^6789

голуб : 1224 5 6 7 8 9

ёп<1-агеа: АI IВI	IСI	IО [	1Е1 IР [	1 в (	IН [	11!	]

@ С55 бпд РЬудгоилд	X +

4" О О О 1оса1Ио5(/Ехатр1е5/5есТюл_3/26/ехатр1е_01,Ь1т1 ☆ А*

§пд-аи1о-11олу : гог» со!итп <кп5с гоц белы- €о1итпчкте

]и$йГу-соп(еп1; погта! ущп епс! сетег |ср д§|ц ^расе-ЬсНуусо .чрасс-агоипН $рзсс-еуеп!у
аП§п-йет$ : погта! я1ап ет! сетег МгугсН Ьа^уНпу &е!Г-Мап $с!Г-ет!

а11§п-сотет : пргтя! млн сЫ сетег мгск11 ЬьеЦпе ^расс^ктсеп ьрж&йшмш! йрасемле^у
со1итп-§ар : Йрх Юрх 2Ор^ ЗОЩь. 4ОДХ Ю|2Х 60рх 70р^ Ш)рх 2Л|21

го\у-§ар : Орх Юрх Юрх 30р2<	2Й& ^рх ^рх 90рх

со!итпл :123456789

голуз 11234 5 67 89

§п<1-агеа : А Г 1В |	| С! IОI ) Е |	] Р |	| О |	| Н | I! |	|
0 С55 бпб Р1аудгоипй	X Т

С О © 1оса1Но51/Ехатр1е5/$есгюп.З/26/ехатр1е_01.Ыт1 1Л? ☆	&

дп<Л-аи1о-Поху : гоп со|игпп скчьс гом с!упя’ со!итпчкпхе

]и$Шу-соп(еп1: полнаI Мал спЛ селит 1е1Л пеМ арасс-ЬсКхусп .чрасе-агонпс! чрасс-сусп|у
аПдп-Пепв : погта! у 1а л епс! ссшсг »1гс1сЬ ЬачсПпе $с1Г-?4ал ьс||Ччи1

аНдп-сотеп!: пдгтя! Мап ст! сетер *1ГС1с|) Ьа>с1тс >расс-Ьст сер *расс-агоигк1 ячсе-еусп1х
со1итп-дар : Орх Д)р^ 20рх МШ 4Й2Х 50рх 1>0рА 70рх 80рх 90рх

го\у-дар : Орх 10рх 2урх ЗОрк 40рх 50рх оорх 76рх 80рх 90рс

со!итпя : ± 2 3 4 5 6 7 8 9

гом/8 :12 3 4 5 6 7 8 9

дп4-агея : А Г ] В | IСI IЭ [	| Е1	] Г |	] С |	| НI 111,	|

0 С55 бпб РЬудгоипд	X +

С О © 1о€а1Но$1/Ехатр1е5/5есТюп_3/2б/ехатр1е_01.НГт1 (*? *& Й*

дг»и-аию-Поху : го^ уо|итп <кП^ гоц <кп*х-’ со1цтпчкпхс

]и$йГу-соп1еп1: погта! Мап уп4 сетсг 1еГ1 пкШ $пасс-Ьс№есп $расс-агоип4 коасе-еуеЫу
а!|дп-|1ст5 : погта! Ыял еде! ссгПсг 81гс!сЬ ЬамгИпе 5с1Г-ь1аЛ нсИ-еп<3

аНдп-сотст : погта! мап ст! сстег §1гс1сЬ ЬахсПпс ямсоЬсЬуссп .чпасс-агоипО 5пасс-сусп1у.

со1итп-дар : Орх Д)|Ъ. 2О|2& 4Пй2к 50рх бОрх 20р^ КОрх 90рх

го\у-дар : Орх Ц)рх 20рх Зирх 40рх 50рх 60рх 21’рх $0рх ЯУйХ

со!итпя : 123456789

го\У8 :123456789

дгккагеа : А Г	1В |	| С1	| О (	| Е |	| ЕI	] 6 [	IН |	111	]
На рис. 26.3 показаны три копии экрана, иллюстрирующие эффекты выравнивания
со значениями 1етъ, сепрег и гтдьр, применяемые к §пс!-элементам различных разме-
ров (изменяемых с помощью значков изменения размера в правом нижнем углу ка-
ждого элемента).

Кроме того, как в ИехЪох, расстояние между §пс!-элементами и вокруг них можно
изменять. Были сделаны еще три копии экрана, показанные на рис. 26.4, при раз-
ных промежутках и с множеством §пб-элементов разного размера в сетке 3x3
ячейки.

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

Выравнивание элементов

В §пс!-макете свойство аИдп-лЛетз управляет выравниванием элементов в пределах
их §пс!-области по оси блока. Это свойство поддерживает следующие значения:

♦	погта!: Используется по умолчанию и ведет себя как при установке для §пб-
элементов значения з^ге^сь или з^агр.

♦	8€аг!:: Элементы размещаются вплотную друг к другу на одном уровне с началь-
ным краем контейнера по соответствующей оси.

♦	епД: Элементы размещаются вплотную друг к другу на одном уровне с конеч-
ным краем контейнера по соответствующей оси.

♦	сеп€ег: Элементы размещаются по центру макета.

♦	8€ге€сй: Элементы растягиваются по мере необходимости, чтобы соответство-
вать макету.

♦	Ьа8е1ше: Элементы выравниваются вдоль их основных линий.

♦	8еИ-8€аг€: Элементы размещаются вплотную к начальному краю контейнера на
соответствующей оси.

♦	8еИ-епй: Элементы размещаются вплотную к начальному краю контейнера на
соответствующей оси.

На рис. 26.5 показаны еще три копии экрана, в которых для свойства аИдп-Изетз
заданы значения з^агр, сепрег и епа.

На рис. 26.6 вы можете увидеть три копии экрана, на которых §пс!-элементы более
плотно сгруппированы в начальной, центральной и конечной позициях сетки.

Это свойство также поддерживает 8раст§-значения, определяющие распределение
пустых пространств вокруг элементов. На рис. 26.7 показано размещение элемен-
тов При задании значений зрасгпд-ЬеЪгееп, зрас1пд-агоипс! И зрас!пд-еуеп1у.
0 С55 бгИ Р1аудгоипд	X +

0 О' О 1оса1Ко5УЕхатр1е5/$еаюп_3/26/ехатр1е_01.Ь1т1 ☆ Л :

§пН-аи(о-Лоуу : голу со!итп <1спм? голу <.1сп.чс со1итп-<1еп$е

]шЫу-соп1ст: погта! зтл епд сеп!ег |ей	зрасе-ЬеЛл ееп зрасе-агоипд зрасс-еуепК

аП^п-Петз : додда! зицч сщ1 сегЦе^ ^с(у,Ь М&Ш ^|Г-,9[и1

а11§п-соп1еп1: цощЫ ^ксп еп<1 й?ЖС з1&1чЬ к^Ппе *РЛес4у1ллеса 2>дае<>аго_ипд зрАсе^еуер]у.

со1итп-§ар : 1Урх 2Орл 1УрА 4Урх ^Урх УУрх 2Ур1 УУрл 20йК

голс-еар : Орх 10рх 2УрЛ ЗУРХ 40рх ^У рх кУр^ 2Урх $урх 2Ур&

со1итп8 :ЦЗ 4^6789

0 С55 бпд Р1аудгоипс1

X +

□ X

4г 0 О © 1оса1Но$^Ехатр1е$/5есбоп_3/2б/ехагпр1е_01.Нт1	#	:

^пЛ-аиЮ-Полу : гоц со1итп лкпае голу <1спьс со1итп-<кп5С

]и8йГу-сотеп1: погта| $(ап епс! сетег 1с<1 п^Щ. ьг>асс-Ьс1игееп $пасе-агоит! 5пасс-суеп1у
аП^п-Нстз : погта! {Цац упс! сетсг з!гс1с11 ЬазеПпе $е1Г-магт $с1Г-еп<!

аН§п-соп1ет : ногтя! мал спс! сетсг *1гс1сЬ Ьа&сКпс зпасс-ЬсЛУСсп зрасс-агоит! &г»асе-суспк
со1итп-§ар : 0ц\ ]0р^ 2Ур^ 2Урх 4ЦрХЮрх 60^ 70р2л^Урх 90рх

гоху-^ар : Оцд _10р_х 2Урх 3«РХ 40р_х 50рл 60рх 70рх ХОрх 90рл

со1итпя: 123^5 ^7Я9

голу* 1123 456 7 И9

уг^-агеа : А Г 1 В Г IСI I ОI ) Е |	| ЕI IС [ IНI 111	|

Рис. 26.5. Значения выравнивания $1аг1, сеп1ег и епс1 отображаются вверху,
посередине и внизу (начало)
0 С55 Спс1 Р1аудгоипс1	X 4-

<-	0 О © 1оса1Ьо$1/Ехатр1е8/5есгюп_3/2б/ехатр1е_01.Мт1 I*? ☆ Л :

§пд-аиСо-По\у : гту са1дпш дсг^с олуДаье со1итд-<кп8е

]ия1|1у-соп1сп(: погта! чГаг! спс! ссп1ег 1еЙ ц^Ь! ?»расе-ЬсП\ сеп апасе-агоипс! §пасс-еуеп1у
а1|§п-Пет$ : погта! $гай спс! сепгег $(ге1сЬ ЬазеНпе $с1Г-<4ай 5е1Г-епс!

а11§п-соп1еп1: погта! н1ап спс! сегНег к1ге1ск ЬазеПпе ярасе-Ьеиуееп арасс-агоипс! 8расе-еуеп|у

со1итп-§ар : Орх Юрх 2ПрХ ЗОрх ЮрХ ЗОрХ бОрх 70рХ Ж1ПХ20рх

го\У-сар : Орх. Юрх ЮрХ ЗОрх 40рХ ЮпК 60ру 70{1Х ХОрч 90р&

со!итп8 :123456789

го\У8 : 123 456 7 89

вгкйт : А | В (	| С |	) О |	) Е |	| Р |	16 [	| Н [	111	|

Рис. 26.5. Значения выравнивания 81x111, сепкег и епс1 отображаются вверху,
посередине и внизу (окончание)

0 С55 Спс! Р1аудгоипд	X +

СО® 1оса!Ьо81/Ехатр1е8/5еаюп_3/26/ехатр1е_01.Нгт1	:

§пс!-аи1о-11оху : гоуу со1итп дспяе го\у Оспзс со!итп-(1еп$е

]ияН!у-соп(сп1: пощр! т! сеЩег ]еД п§Ь1 ^раоМхЛиесд ^рассацршк! 8расс-^уеп1х
аП§п-нет8 : погта! згай сп<1 сетег 8(ге(с11 ЬазеПпе $с1Г-я(аП $с1Г-сш!

а!1§п-соп(еп(:: погта! $1аг1 спс! сеп!ег аСгеюк ЬазсНпс ьрасе-ЬеКуесп $расе-агоипс! ярасе-еуеп|у

со!итп-§ар : 0р^ Юрх 2С|22Ь ЗОрх 40р*. 5О|2Х 60|2Х Ю|Ж 90рА

го\у-§ар : Орх Ю12Х 2<ЗрХ ЮРХ 40рх 50рх 60р12Ш Ж>РХ 2ПРХ

со!итп8:12245 6 7 8 9

С О л*-’1	А г»

р НИ1П № у а . > >*» Л-

омкт! ЫГЩ1 шс О| Ш кС ОА КЖкЛОШШ М&кЖЛЙ МШ111

окит-щ^	122нд 21П 2М1 М!Ш ^ЛЗ &Л& 22ЕЯ 2201210

₽ и* ьшийв Апшв2шш&2йвя*и2ш
Лем. 12Л * 6212

п"’ 12Н2&212 _____ ________ _________

ръ^гп * I1 -	* I Г г- И 1

@ С55 6пр Р1аудгоипО	X +

-> С О О 1оса111О5(/Ехатр1е5/5есЪол.З/26/ехатр1е_01.Ь1т1 1^? Ф &	•

уг1<1-аию-По\у : гон со1итп йспьс гоиг скп^с со1итпч!епхс

]и81Йу-€Оп(еп1: погта! Чап еп4 сетег 1еГ( пдШ $расе-Ьс1игееп $рзсе-агоипд *расе-суеп1у

а! 1§п-йст5 : погта! гДаП епд сетег 81гс!сЬ ЬачсКпе $е1Г-81ап не!Г-еп4

а11§п-сотет : по.гтя! мал сЫ сетег &В&11 Ьа^еПпс ^расс-Ьегиесп ^расс^гоипс! лра.се-су,сп]у

соЬтп-^ар : Ощ 10|Ц 20рх ЗОрх 40р\ 50рх 60р^ 70рх ХОрх ОДрХ

го\у-§ар : 0|Ц 10рх 20р_Х ЗОрх 40р_х ЭДрх 60рх 70рх ХОрх 90ру

со!итпя : 123 4 5 6 7 8 9

го\У5 :123 4 5 67 89

4»п<3-агеа : А |	1ВI IС |	| О |	| Е |	| Е |	| С [	| Н {	111	|

Рис. 26.7. Распределение пустого пространства между §пс1-элементами при задании
значений 8раст§-Ье1\уееп, 8раст§-агоипс1 и 8раст§-еуеп1у (начало)
0 С55 бпд Р!аудгоилд	X +

<- СО® 1оса1Ьо$Г/Ехагпр1е5/5есНол.З/26/ехатр1е_01.Ь1т1 |^> ☆	*

$тс1-аШо-По\У ; пт	гоиг <1спм,- со1итп-скп5с

зивШу-сотел!; пудпа! ДЛИ ш! Ш1&Г кН ш 111 Щ'С&М *р.да>аццш4 Ж*Ч’СУй11у.

аК^п-йст» : погта! $1зп еп^< <злИсг «!гс!сН Ьа^сНпе $е1Г-*1ап $с!Гепс!

а11§п-соп(еп1: погшя! Чап спс! сетсг Я1гс1с11 Ьа.чс!тс &расе-Ьс1и-ссп Епасс-агоипс! ьпасс-схсп! у
со1ипт-@ар : Ору ]Ору 2О|2Л4П{2Х2УЦУ70 руЮ|1У 20|2&

гоху-еар : Оцу Юрх 2Орх ЗОру 40рх 50цх 60ру 7Орх КОцх 90ру

со1итп.ч :123 4 5 6 7 8 9

гом/8 :123 4 5 6 7 8 9

|>пд-агеа : А |	] В |	| СI IО ( IЕI IГ |	16 [ IН |	111	|

Рис. 26.7. Распределение пустого пространства между §пс1-элементами при задании
значений 8расш§-ЬеЦуееп, 8раст§-агоипс1 и §раст§-еуеп1у (окончание)

Задание промежутков

Свойства со1итп-дар и гсж-дар позволяют также указывать промежутки между §пс1-
элементами как для столбцов, так и для строк. Для них могут применяться любые
стандартные значения С88-измерений, хотя для простоты в примере используются
только пиксели.

На рис. 26.8 показан эффект отсутствия промежутков, задания промежутка в 30
пикселей между столбцами и промежутка в 30 пикселей между столбцами и стро-
ками. Чтобы лучше проиллюстрировать эти значения, содержимое элементов и са-
ми элементы отцентрированы.

Изменение местоположения и размеров

Теперь настал черед весьма интересной части С88 (Зпб, позволяющей точно ука-
зать, где в §пб-макете должен располагаться каждый §пб-элемент, а также объем
пространства (или количество ячеек сетки), который он должен занимать.
© С55 Спс! Р1аудгоипс1	X +

<- V С О ® 1оса1Ьо5|/Ехатр1е5/5еаюп_3/26/ехатр1е_01.Ыт1 1^ ☆	*	:

§гк1-аи1о-Г1<ж : гсну со1итп 4спьс го\у Оспяс соШтп-Оепне

]шН1у-соп(епг: погта! &Гал спд сегЦег 1еЯ пёк! красе-ЬеПУсеп ьрасе-агоипс! §пасе-еусп1у
аК§п-йет$ : погта! Дад ещ! сеШег мгсгск ЬазсПпе $с1Г-МаП ьеИ-еги!

а11»п-соп(сп1: погта! ч1ап еп<3 сегНсг ,ч(ге1сЬ ЬаяеКпс ьрасе-ЬеПУесп ьрасе-агоит! $расе-еуеп|у

со!итп-§ар : Орх Юрх 20р&ЮРА40рХ50рх212ЦХ90рх

го\м-§ар : Орх Юрх 2Ср$ ЗОрх 40рх 50рх 60рх 7Орх ЯОрх 90рх

со1итп5 :12 3 4^ 6 7 8 9

гомук :1214^б282

дпа-агеа: А| ?В|	|С(	)Р|	|Е|	|Р(	]6[	|Н[	|Г|	]

С55 6пс1 Р1аудгоипй	X +

V С О ® 1<Хэ1КоЯ/ЕхЗП1р1б5/5еййЛ_3/2б/Латр1е_011^п( ☆ А •

у?М-аи1п-1кпу ; пщ схйитп скпяс гену йелм; шкппп-скпас

Зи$иГуч-ип1сп1; поптЫ щц	естпег кй пеЫ Брасе-ЬеЪУвеп кпаеднагпииН драсе^уеЫу

лК^п-Исгпй ; Еишуд] я1ап кта к1гск-|1 Ьам;Нпс яуИ-ШаЛ

ак§п-соп1сп1: 8щгшя1 ЯаП сги! селит *1гс1сЬ КьсЩк 5{?асс-Ьс1исгл зрасс-агоигц! %расе-сусп]у.

со1итп-^ар : Оцх Юрх 20рх ЗОрх 40рх 50рх 60рх ТОрх ХОрх 90рх

го\У-§ар : Орх Юрх 2!>ПХ ЗОрх 40рх 50рХ 6О|2Х 2Срх 80рх 90рх

со!итп.ч 11214 5 6 7 8 9

го\У8:1234^6789	_____ _____________________

дпд-агеа: АГ^ПВГ^ПС! |Р{	)Е|	|Г{	)<31	]Н( II|	|

Рис. 26.8. Различные размеры промежутков в действии (начало)
Рис. 26.8. Различные размеры промежутков в действии (окончание)

Задать соответствующие условия можно с помощью четырех основных свойств: на
какой строке сетки начинается элемент — дгга-гсж-зъагъ, на какой строке сетки за-
канчивается элемент — дгЫ-гсж-епа, на каком столбце сетки начинается элемент —
дг1с1-со1итп-з^аг^ и на каком столбце сетки заканчивается элемент — дгЫ-соХитп-епа.
Как уже можно было догадаться, с ними можно точно указать, где должен распола-
гаться каждый элемент сетки и где должны заканчиваться его ширина и (или) вы-
сота.

Но есть также свойство дгЫ-агеа, которое используется в примере, задающее в
краткой форме область сетки. Оно позволяет указать один или несколько из данных
аргументов в одном правиле, разделив их прямым слэшем. Например, чтобы эле-
мент начинался во второй строке снизу и во втором столбце от начала, и занимал
пространство вплоть до четвертой строки вниз и пятого столбца вдоль включитель-
но, можно задать следующее правило:
дгЫ-агеа : 2 / 2 / 5 / 6;

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

Чтобы проиллюстрировать все это на практике, на рис. 26.9 используется сетка 6 на
5 ячеек, заданием местоположений создается макет с верхним, нижним колонтиту-
лом и двумя боковыми панелями. В основной области внутри сетки есть один ши-
рокий и четыре менее широких элемента.

0 С5$ бпс! Р1аудгоипд	X +	1.1

С О О 1оса1Ьо51/Ехатр!е5/5ес1юп_3/26/ехатр1е_01.Н(т1 ☆ А- :

§П11-аи1о-По\у : го\у со!итп ёегье го\\ с!еп$е со!шппч1епде

|и‘>иЕу-соп1егй : полнаI $СаП еги1 сеп!ег !еП нрасе-Ьеиуееп арасе-агоипс! зрасе-ех еп!у
аПдп-Неп» : полна! Чаг! епс! сеп(ег ?»1гс1сН ЬансНпе аеИ-ЯаН *е!Г-спс!

а11@п-соп1еп1: полна! ЧаП еп<1 сеп(ег мгс1сЬ ЬакеНпе арасе-ЬеПуееп храсе-агоипс! .чрасе-ехеп|у
со!итп-§ар : Оцх ГОрх 2Орх

гои'-дар : Оцх ]Орх 20рх ЗОрх4Д|1\ 50рХ ^рх 2ЙВХ

соЮтп;; : 123456789

гоху$ .'12Л5&2&2

§П(!-агеа : А) ш/м? ] В ) С [ д/т | О	1Е (>/»/«/« ] р !*/«/*/♦ | (3 {] Н [ууу* 11 [ш/*/? ]

Рис. 26.9. Все девять элементов размещены в выбранных местах

Все получилось благодаря эквиваленту следующих правил, позволивших добиться
изображения, показанного на рис. 26.9.

#	Ьоха {	дгЫ-агеа	:	1/1/2/7;	}

#	ЬохЬ {	дгЫ-агеа	:	2/1/5;	}

#	Ьохс {	дгЫ-агеа	:	2/6/5;	}

#	Ьохс1 {	дгЫ-агеа	:	2/2/3/6;	}

#	Ьохе {	дгЫ-агеа	:	3/2/4/4;	}

#	ЬохГ {	дгЫ-агеа	:	3/4/4/6;	}

#	Ьохд {	дгЫ-агеа	:	4/2/5/4;	}

#	ЬохИ {	дгЫ-агеа	:	4/4/5/6;	}

#	Ьох1 {	дгЫ-агеа	:	5/1/6/7;	}
Заметьте, что для элементов 2 и 3, боковых панелей без дополнительной горизон-
тальной протяженности, четвертое значение было опущено. Если захочется доба-
вить правильное значение, для #ЬохЬ им будет 2/1/5/2, поскольку ширина столбца не
должна распространяться на 2-й столбец, а для #Ьохс— 2/б/5/7, поскольку ширина
столбца не должна распространяться на 7-й столбец.

Чаще всего, наверное, придется работать с меньшим количеством §гМ-элементов,
возможно, только с заголовком, нижним колонтитулом, двумя боковыми панелями
и основной областью содержимого. В этом случае в целях тестирования примера
можно в строке 97 перед закрывающим тегом </зсг1рв> просто добавить несколько
строк кода 1ауа8спр1, чтобы на время удалить ненужные элементы. Эти строки
впоследствии всегда можно будет убрать или же, если захочется скрыть еще не-
сколько элементов сетки, придется всего лишь добавить еще несколько строк.

зВу1е(’Вох_Г’, 'сНзрХау', ’попе’)
з^у!е(’Вох_С’, ’сНзрХау’, ’попе')
з11у1е (’Вох_Н’, ’сНзрХау’, 'попе')
з^у!е(’Вох_1’, ’сНзрГау’, 'попе')

0 С55 бпй Р1аудтаи<1с1 (5)	X +

С О © 1оса1Ьо5УЕх,атр1«/5ес1юп_3/2!б/е|'1атр1е'_01Ь,К(гп1	&	:

^г]с1-аиЮ’По\у : гои~ сокипп Нспяе кт Нс-п^е со1шпп-с1спус

]1ЫаГу-соп(сп(: псята! *таг! еЫ сетег кН зрасс-Ьецусеп $расс-агоилс! $расе-суеп1у
уНеп-псшк : поила! эдИ сепкт ага&Ь ЬаясПпс а?1Г-^аП $е!Герс1

а1цт-сот11еп1: поила! Май спс! сетег ЬааеНпе арасе-ЬеРуесп «ьрасс-агоитк! 5раое-еУ1Гп1у

со1ип1п-^ар : ЙШЬ ЛШ 212Ш	211Ш 2Ш&

Г0У^ар ; Орх Л2М	Жек

со!итпз :1234567Я9

го^: 12312$ 222	____________________ _______ _______ _______ _____

цгк-агса ; А В | С П ] ЕI ) РI________________________. ОI Н |	11 [	!

Рис. 26.10. Макет «Святой Грааль», использующий 5 §пс1-элементов

Теперь после загрузки примера в браузер для работы останется только пять элемен-
тов, показанных на рис. 26.10, где применяется ранее рассмотренный макет (часто
называемый из-за своей высокой популярности, но непростой реализуемости маке-
том «Святого Грааля»).

Для вашего удобства в бесплатный прилагаемый архив примеров включена именно
такая модифицированная версия, которая находится в файле ехатр1е_01Ь.Ылп1.

Разумеется, используемый пример — всего лишь интерактивная среда для провер-
ки идей. С его помощью, прежде чем создавать собственные макеты С88 Спб,
можно будет увидеть, что, скорее всего, сработает. Например, чтобы создать макет,
показанный на рис. 26.10, необходимо было вытянуть §пс1-элементы в требуемые
размеры, но на реальном веб-сайте вы, скорее всего, воспользовались бы значения-
ми ДЛЯ атрибутов §пс!-контейнера дг1а-^етр!а^е-со1итпз ИЛИ дпс1-1етр1а±е-го\зз, ПО-
ХОЖИМИ на применяемые для так называемого макета «Святой Грааль»:
дг1д-Ъетр1аЪе-со1итпз : 10% аи^о 10%;
дгМ-ЪетрЮЪе-гсжз : 50рх аи^о ЮОрх;

Получится §пб-макет 3 х 3 с заголовком высотой 50 пикселей и нижним колонти-
тулом высотой 100 пикселей, боковыми панелями между ними по 10% доступного
пространства каждая и областью контента с автоматически задаваемым размером в
оставшемся пространстве. После этого нужно будет решить, какими будут проме-
жутки между столбцами и строками, направление потока, продольное и поперечное
выравнивание и т. д.

Чтобы продолжить путешествие и увидеть, как С88 Опе! работает, по мнению раз-
работчиков этой технологии, можно воспользоваться следующим ГГКГ-адресом, и
зайти на сайт, где очень подробно описывается эта тема: Мпуиг!. сот/сззЗ-дгЫ

Заключение

Ну вот и все! Вы дошли до конца раздела о С883 и всех его фантастических пре-
имуществах. Но путешествие по С88 еще не завершено, поскольку в следующем
разделе состоится знакомство с удивительно мощным языком сценариев препро-
цессора 8১ или 8уп1асбса11у Амюзоше 81у1е 811ее18, который соответствует слову
А\уе8оше (потрясающий) в своем названии, поскольку он действительно потря-
сающий!
ГЛАВА 27

Знакомство с Заве

Введение

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

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

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

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

Структура

В этой главе рассматриваются следующие темы:

♦	Что такое 8а§8, зачем он был разработан, и что он может делать.

♦	Установка и использование 8১ на различных платформах.

♦	Как работают пути к файлам и зачем они используются.

♦	Как 8а88-препроцессинг превращает содержимое файлов в обычный код С88.
Цели

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

Зазз — достойное решение

Первоначально разработанная в 2006 году с использованием языка программирова-
ния КиЪу технология 8уп1асбса11у Амюзоше 81у1е 8йее1:8 (8а88) постоянно развива-
лась, и к настоящему моменту она де-факто стала используемой в повседневной
практике системой предварительной обработки, которая по-прежнему полностью
поддерживается ее командой разработчиков.

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

♦	Полной постоянной совместимостью со всеми версиями С88.

♦	Наличием большего количества функций и возможностей по сравнению с лю-
быми другими языками расширений С88.

♦	Принятием его использования многими ведущими мировыми веб-разработчи-
ками, что превратило 8а88 в отраслевой стандарт. Причем хорошее знание 8а88
существенно увеличивает шансы на получение более выгодной работы в облас-
ти веб-разработки.

Более того, теперь 8а88 сам по себе служит основой для растущего числа платформ
разработки, построенных на основе его технологии, в числе которых Сошра88,
ВоигЪоп и 8и8у. Итак, давайте все же выясним, как работает 8а88, что он делает и
как его использовать.

Сведения о Зазз

Система 8а88 фактически состоит из двух разных синтаксисов. Есть оригинальный
синтаксис 1пбеп1ес1 (похожий на систему шаблонов Наш1) и более новый синтаксис
8С88 (также известный как 8а88у С88), использующий блочное форматирование,
как и сам С88.1пс1еп1:ес18а88 использует расширение имен файлов . зазз, а 8а88у С88 —

. зсзз.

8а88 используется для расширения С88 за счет предоставления ряда функций, при-
сущих традиционным языкам программирования. Это требует навыков создания
сценариев на 8а888спр1, которые затем интерпретируются в блоки правил С88.
В 8а888спр1 предоставляются переменные, вложенности, миксины и наследование,
подробно рассматриваемые в этой и последующих главах.
Для использования систему 8а88 сначала нужно настроить под свои проекты, уста-
новив соответствующее программное обеспечение. Базовая программа работает с
использованием инструкций командной строки, но при желании можно получить и
приложения (как платные, так и бесплатные), предоставляющие более удобный ин-
терфейс. Дополнительную информацию на этот счет можно найти по следующему
ИКЬ-адресу: зазз-1апд. сот/1пз^а11

Различные версии 8১

На данный момент существует три версии 8а88, включая исходную версию КиЪу
8а88, 1лЪ8а88, версию, переписанную на С/С++, и нынешнюю основную, рекомен-
дованную к использованию реализацию Ваг18а88. Ниже приводится краткое описа-
ние этих версий:

♦	КиЬу 8а88 была первоначальной реализацией 8а88, но ее жизнь подошла к концу,
и она больше не поддерживается. И тем не менее, она все еще довольно широко
используется.

♦	1лЪ8а88 — это реализация 8а88 на С/С++, разработанная с прицелом на легкую
интеграцию во множество различных языков. Но по прошествии времени эта
версия стала отставать от Пай 8а88 по функциональным возможностям и со-
вместимости с С88, и поэтому теперь она считается устаревшей, и в новых про-
ектах вместо нее следует использовать Пай 8а88.

♦	Пай 8а88 теперь стала основной реализацией 8а88, т. е. именно она получает но-
вые функции раньше любой другой реализации. Она работает быстро, проста в
установке и компилируется в чистый 1ауа8спр1, что позволяет легко интегриро-
вать получаемый код в современные рабочие процессы веб-разработки.

Установка под Мпс1оуу5

Самый простой способ загрузить и установить 8а88 под А^тс1о\У8 — зайти в его
СйНиЪ-репозиторий по следующему 1ЖЬ-адресу: ъ1пуиг1.сот/деъзазз

Под списком активов будет набор файлов, показанный на рис. 27.1.

Из этих файлов ниже показаны только файлы для А^тс1о\У8 (имена файлов в зави-
симости от номера версии могут отличаться):

•	бай-8а88-1.49.9-уутс1о\У8-1а32.21р

•	с1аг1-8а88-1.49.9-\утс1о\У8-х64.х1р

Теперь нужно загрузить соответствующий файл и воспользоваться стандартными
средствами используемой операционной системы для распаковки его содержимого.
И наконец, в системный путь нужно добавить подпапку ааг^-зазз (или указать дру-
гое имя извлеченной папки).
1 0 Янеазез заи/сйп-из» СиНиЬ х		+			*	-	О X	
<-	СО а дпЬиЬсот					☆	* О 	
	18 йаузадо	□агГ 5аз5 1.49.9						
	О	То тЯаП 5а$51.49.9, гГоилГоай еле оГ те раскадез Ьекл* алй айс тзТаНабоп тягосЬолз	1 и к> уоиг РАТН, ог зее ГЬе 5жз	егеОиГе Гог М				
		СЬапдез						
		ЕтЬесМес! 5а$$						
		• Г<хед а Ьид мПеге 1Ье 1едасу АР1 соиИ стазЬ «Ьеп раззей ал етрГу «трогТег Ш						
		5ее 1Ье Гик сЬапдеЬд Гог сЬалдез т еагНег гекмзез						
		*Д55еи 7						
		© 4ак-ми-1.499-ип«п->азг.Ш42						
		© аял-ми-ыэ.9 1>пих-хбА|мф						
		© 4ап>ми 1499-мзс<я-я64.игдх						
		© йаИнм 149.9 млпоот <а!2лр						
		© вягГьМ5 Ы99 »1гккнг4 хМлр						
		[Ц 5оигс««к1е (ар)						
		□ зрипесойе игда						
		* • » 						

Рис. 27.1. О11НиЬ-репозиторий 8а§8

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

Рассмотрим один из способов добавления названия папки к пути АУшйоууз:

1.	Наберите в поле поиска меню «Пуск» а^уапсеа (Дополнительно).

2.	Из предлагаемых вариантов выберите У1е™ АсК/апсеа ЗузЕеш зеШпдз (Просмотреть
дополнительные параметры системы).

3.	Убедитесь, что в появившемся окне выбрана вкладка дауапсеа (Дополнительно).

4.	Щелкните мышью на кнопке ЕтНгоптепЕ УагааЫез (Переменные среды).

В этом разделе выделите Райт (Путь) в подразделе изег уагааЫез Тог... (Пользова-
тельские переменные для...) и нажмите кнопку есИл (Изменить). На рис. 27.2 пока-
зано ОКНО ЗузЕет РгорегМез (Свойства системы) С КНОПКОЙ ЕпутгоптепЕ УагааЫез
(Переменные среды), и окно переменных среды, показывающее текущий путь и
значения других переменных.

Теперь можно добавить путь, для чего нужно щелкнуть на кнопке Еаю (Редактиро-
вать), а затем на кнопке Ее™ (Создать) и ввести дополнение к пути. Например, если
распакованная папка ааг-ь-зазз помещена в корень диска с, можно ввести с:\аагъ-
зазз, как показано на рис. 27.3, а затем нажать кнопку ок (Готово).
Епу|гоптеп1 УапаЫез

Сотрийг Нат* НагсМагь АЛапоед 5 у«ег> Рпх^фог Ятз(д

Уои тМ Ье юрдеб оп м ап АйплаСгаюг Ю пике тмС а! №ем сНвпдее

РеЛктапсе

'Лама ебкп ргосемог кЬесМпд «мтоху ммр» апб «Ииа1 тетоу

5вВг>да

ЦмгРгаНе»

ОмМср м<№да *«еа П? у» адтп

5ейюдх

ЭаЛ-ир Нвоохегу

5уйет МаНм>. »у«вт 1а*ле апа зеодртд Нолпамп

5ев>ч«

Елмомде УмаЫе»

ОК Сета) АрЫу I

У$ег уапаЫез (и гоЫл.^т2г>

МапаЫе

СпсОпчг

ОпеОпуеСотитег

У«1ис

СЛи«г4\гоЬ«п_хрп2гу\ОпеОггус

СЛОип^оЫп * 1т2г/ОпеОпуе

________________________Сликп\гоЬ«п.ж/гп2гу\АррРа1«\1ос*1\М<ютоН||^ю^омг;Арр5:С:...

ПМР	С:\115«5\гоЬ|п_х}гп2гу\АррО*<в\1осаЛТетр

1МР	а\Цм^гоЬт_Х)Гп2|У1АррО«и\1ос4<\Тетр

Нем-	Севе

ЗуЛет гапаЫе

УапаЫе	УЫие

С смп5рес	С'ЛИОО/б луяетЗЗ'ста.ехе

Опус«О«и	СлЛ|пскл»>$у«ет32\Ог»уеп\ОпуеЮаи

ГШМВЕК_ОЕ_РЯОСЕЭДЯ5 16

05	УИпЛлю.НГ

РЛЬ	С:\Л|Пск^^етЗ^С\Люс*0^С\Л|п4с>*$^5у51«пЗг\ЛЬ«п

РА1НЕХТ	СОМ ЙЬ ВАЬС МОг.УВЯг.УВБЛ-^ЖЖ-М5С

I рябосктев д^смлктивд дмои___________________________________________

№»...	ЁЛгЕ..	ОНеСе

Ок, | С*пес(

Рис. 27.2. Окна Зу81ет Ргорегйез и Епупоптеп! УапаЫез

ЕсН1 егмгоптеп! уапаЫе

%115ЕКРЙОА1Е%\АррОаи\1осаГ,М|СГ050Й\УУ1пбол5Арр5
с:\дагУ$а55 |

Мел

Есй1

Йгол5е.„

Йе1е1е

МсжеЦр

Моуе Оалп

Едл $ех1.„

ОК ‘ Сапсе!

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

В любом случае, чтобы убедиться, что изменение пути активировано, теперь нужно
будет перезагрузить компьютер (или, по крайней мере, выйти из системы и снова
войти в нее). После этого вызовите командную строку или \^тс1о\У8 Ро\уег811е11 и
введите следующую команду:
зазз —уегзаоп

Если все в порядке, будет получен простой ответ, например вот такой (для вер-
сии 1.49.9):

1.49.9

Другие установщики под У\Лпс1оуу8

Если вы используете систему Мобе.)8, 8а88 можно также установить с помощью прт,
введя в командной строке следующую команду:

прт 1пзГа11 -д зазз

Но в данном случае будет установлена реализация 8а88 на чистом 1ауа8спр1, кото-
рая будет работать медленнее, чем другие версии, но будет использовать тот же
интерфейс, поэтому позже при желании будет нетрудно перейти на другую реали-
зацию. Или, если используется диспетчер пакетов С1юсо1а1еу для А^шбо\У8, то Ваг!
8а88 можно установить путем ввода следующей команды:

сЪосо 1пзка11 зазз

Установка под МасОЗ

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

Если НошеЪге\у еще не установлен, нужно открыть окно Тепп1па1. Сделать это мож-
но, щелкнув на значке ъаипсЬраа в эоск и ввести в поле поиска Тепп1па1. Затем нужно
осторожно ввести одной строкой следующую команду, поставив после Гззъ вместо
перевода на новую строку пробел:

гиЬу -е "$(сиг! -ГзЗЪ

Ъккрз: //гам.дтккиЬизегсопкепк.сот/НошеЬгем/апзкаИ/тазкег/ 1пзка11) "

Этот процесс показан на рис. 27.4 (где запрашивается пароль для продолжения
операции зибо).
О • 4 ГОЫптхоп “ зойо * ЬазЬ -с #1/Ьт/Ьазй№121(Л2# йопЧ леей гешгл С..,

1сд1п: Мол Маг 14 11:47:40 оп 11уз00&

1гаЬ1т1кап@ЯоЬ1П5-МасВоок-А1г - & тсЬу -е “$(сиг1 -Тз51 НПрз://ган.дГгНиЬиБвгсо
п!еп1.сот/НотеЬгеи/1П5^а11/та51ег/1П51а11)р

ЫагпГпд: ТИе РиЬу НотеЬгеи хпз^аПэт !з пои йергаса^ей апй Ьаз Ьееп геигИГеп 1п

Ва&Ь. РХеаке нпдгаге 4о ГЬе То11ой!пд оогатапй:

/Ып/ЬазЬ -с 4,3(сит1 -1^51 ^ираШган.дПГшЬизегсог^епг. сот/ногп&Ьген/Хпзса!!/

НЕАйЛптП.вМ1

СЬвскхлд 1рг ЧисКа' вс св в з (кЫеЬ тяу гвциевХ уоиг раяаиагй!).

Раззнотс! ;Щ

Рис. 27.4. Установка МасОЗ НошеЬгеху ожидает ввода пароля

При каждом запросе пароля вашего компьютера вводите его и нажимайте ЕпЕег
(Ввод). Установка НошеЪге\у выполняется средой языка КиЪу, который уже должен
быть на вашем Мас, и в зависимости от скорости интернет-соединения может за-
нять несколько минут. Во время установки, как показано на рис. 27.5, можно будет
заметить несколько запущенных программ и различные инструменты, установлен-
ные для использования с ХСобе:

О • € гоЫг»П1хол — ЬазЬ -с #1/Ып/Ьаз1Ц012\012# № сГоо'Г леей гетит сойеэ

1_ан1 1од1п: Моп Маг 14 11:47:48 рп 11^5080

1гаЫпп1хпп1?ЙсЫп5“МасВопк-А1т - X гшЬу -е "Ксит! ЫЛрз ://ган*д1ЛЬиЬи$егср
пГеп!;. со1р/Но1ПРЬг'вн/1п5^а11/та181ег/1п51а11)"

Шйгп!пд: ТНе йиЬу НотеЬг&и 1п5Га11ег 1е пои 8ергееа1е8 алс1 Каз Реал тбштИгёл гп

ВазН* РХеаге пНдгаХе ХИе ТоНоиХпд соттап^:

/Ь1п/Ьа^Ь -с ''$(сиг1 -ГзЗЬ //теи.дхНюЬизегЕОлХепХ.сат/НотеЬгЕН/тпзХаИ/

НЕА0/1п.вга11.зЬ)«

СЬескХпд Тог ’эи^о’	(нЫсН тоау гедиваХ уаиг раззног^)..-

1Ра 5&ног(1:

ТН1з 5сг1р+ *Ш 1пк1.а11±

/ор^/ЬошеЬген/Ып/ЬГЕИ

/о р1/ЬотеЬг ен/э Ьа г в/до с/К□т в Ьгвн

/ор^/ЬотеЬген/зНагв/тап/тапг/Ьгеи.1

Лор^^птеЬгеи/зПага/г 5Н7н11:в-1*ипсх1оп5/_Ьгвн

/□р^/КотеЬген/е1;с/Ьа5П_сотр1еС1Оп Л/Ьгеи

/орг/НвтеЬгеи

Ргезз ЯЕТЦНН гс согПпсе от а му сПиег кеу аЬсгГ;

I

Рис. 27.5. Готовность к началу установки НошеЬгеху

После выполнения всех необходимых действий введите в терминал для запуска ус-
тановки Зазз следующую команду:

Ьгем 1пзЕа11 зазз/зазз/зазз
Сам процесс установки показан на рис. 27.6 (в данном случае установка уже вы-
полнена, но НошеЬге\у кое-что обновил).

' 1 * *	И гоЫптхоп — -езН — 80x24

казГ 1сд1п: Моп Маг 14 11:45:53 оп ГГузОЭО

:гоЫпп1коп(рКоЬзпз-Мв« я Ьгеи 1пз1э11 вавз/зазз/вазз

Яипгппд Ьген ирйаге “ргехпзШГ.. ♦

НвдеЬгвиг 1я гип впИтеХу Ьу ипраЫ чо1ип1&егв. Р1еаяе сонзЫ&г йопвНпд:

Ы1рк: //дИНиЬ. еоип/НстеЬгеи|/Ьгец|#с1опа1Е1оп5

Аи±й-ирс1а1а4 НотеЬтем!

ирйатей 2 тара (ИотеЬге^/саге агкЗ йаге-Хвпд/йатг),
Квн Еогти1ав

Ьум	^йгггап-1апдиаве-5йгуйг

Црс^аГес! Рогти1ае

Ирс1а1ей 52 ТотмиТае.

ЙаггНгцг $358/8385/5338 1.4? л 15 з!геаС1у хпзГаИей йпс1 ир-ю-йаге.

То ге!пй1а11 1.49.9, гип:

Ьгйи гахпгСаИ аа&а

гоЫпп1хоп(эКоЫп5-Ма сВоок-Ахг - И |

Рис. 27.6. Зазз установлен н (или) обновлен

Затем Мас сообщит, что идет загрузка различных файлов, и после установки ее ус-
пешное завершение можно подтвердить, введя следующую команду:
зазз —уегзтоп

Все в порядке! Будет получен простой ответ, похожий на следующий (для вер-
сии 1.49.9):

1.49.9

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

Установка под Ыпих

В операционной системе 1лпих зайдите в (ЗйНиЬ-репозиторий 8а88 по ВЪ-адресу:
Ъ^-Ьрз: //-Ыпуиг!. сот/де^зазз

Под списком активов будет набор файлов (показанный ранее на рис. 27.1), из кото-
рых здесь перечислены только файлы для 1лпих (имена файлов в зависимости от
номера версии могут быть другими):

• баг1-8а88-1.49.9-1тих-1а32.1аг.§х

• баг1-8а88-1.49.9-1тих-х64.1аг.§х

Теперь нужно загрузить соответствующий файл, и для распаковки его содержимого
воспользоваться стандартными средствами операционной системы. Затем нужно
будет изменить путь, который используется вашей программой командной строки
(например, ВазИ), чтобы включить в него папку ааг^-зазз (или с другим выбранным
вами названием распакованной папки).

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

Это можно делать и на временной основе при планировании запуска 8а88, для чего
вводится команда зеЪег™:

зе^епу РАТН "$РАТН\ :ра1±1_Го_с1агГ-зазз"

Замените строку раи1_ъо_(1аг1:-зазз правильным местом распаковки файлов 8а88. Это
изменение будет действовать в ходе текущего сеанса работы с командной строкой.
Чтобы изменить системный путь на постоянной основе, следует обратиться к доку-
ментации используемого дистрибутива 1лпих.

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

зазз —уегзтоп

Все в порядке! Будет получен простой ответ, похожий на следующий (для вер-
сии 1.49.9):

1.49.9

Альтернативные установки под Ыпих

Альтернативный способ установки 8а88 под 1лпих (хотя и более старой версии) —
применение диспетчера приложений. Например, в НЪипШ можно сначала, чтобы
убедиться, что все обновлено, выполнить следующую команду:

зис!о ар^-де^ ирс!аГе -у

Затем путем ввода следующей команды можно установить КиЪу 8а88 (несколько
отличающийся от Эай 8а88):

зис!о ар^-де^ 1пзГа11 -у зазз

На рис. 27.7 показано применение этих двух команд в оболочке ОЬипШ, работаю-
щей под управлением операционной системы А^тс1о\У8 и поддерживаемой подсис-
темой АДПп(1о\У8 для 1лпих (\^8Ь). Но они будут также хорошо работать и в авто-
номном экземпляре ОЬипШ.

Чтобы убедиться, что все сработало, просто введите следующую команду:
зазз —уегзтоп

При желании можно провести установку с помощью Мос1е.)8. Для этого, если эта
среда еще не установлена в вашей системе 1лпих, нужно ввести следующую команду:
зис!о ар^-де^ 1пзГа11 -у прт
X гоЫп@2ЕНВ00К: /тп1/с/1>5ег$/гоЫп_х]гп2гу	—	□ X

6е1:14 1111р://5есиг11у.иЬип1и.сот/иЬип1и ^осаХ-зесигИу/иптуегзе ашс1б4 с-п--? Ме1ас1а1а [14.0 кВ]

6е±:15 111:1р://5есиг11у.иЬип1и.со(п/иЬип1и ХосаХ-зесигИу/тиШуегзе атс164 Раска§е5 [20.7 кВ]

6е1:16 Ы1р://зесигИу.иЬип!и.сот/иЬип!и ^осаХ-зесигИу/тиШуегзе ТгапзХаИоп-еп [5196 В]

6е1:17 Ы1р://5есигНу.иЬип1и.сот/иЬип1и •ЕосаХ-зесигИу/тиШуегзе атд64 с-п-Г Ме1ас1а1а [500 В]

6е1:18 1111р://агсЫуе.иЬип!и.сот/иЬип1и -Еоса1/ип1Уегзе атс1б4 с-п-€ Ме1ас1а1а [265 кВ]

6е1:19 И11р://агсЫуе. иЬип!и. сот/иЬип!и -ЕосаТ/тиШуегзе атйб4 Раскадез [144 кВ]

6е1:20 НМр://агсЫуе. иЬипХи. сот/иЬипХи -Роса1/ти1117ег5е Тгап51аИоп-еп [104 кВ]

6е±:21 Ы1р://агсЫуе.иЬип1и.сот/иЬип1и -ЕосаХ/тиШуегзе атс164 с-п-€ Ме1ас1а1а [9136 В]

6е1:22 Ы1р://агсМуе. иЬип!и. сот/иЬип!и -Еоса1-ирс1а1е5/та1п атс1б4 Раскадез [1641 кВ]

6е1:23 Ы1р://агсК1уе.иЬип1и.сот/иЬип1и -Роса1-ирс1а1е5/та1п ТгапзХаИоп-еп [312 кВ]

6е1:24 Ы1р://агсЫуе. иЬип!и. сот/иЬип!и -Еоса1-ирс1а1е5/та1п атс1б4 с-п--? МеГас1аГа [14.8 кВ]

6е1:25 Ы1р://агсЫуе.иЬип!и.сот/иЬип!и -Госа1-ир<1а1е5/ге51г1с1ес1 атс1б4 Раскадез [853 кВ]

6е1:2б К11р://агсЫуе. иЬип!и. сот/иЬип!и -Роса1-ирс1а1е5/ге51г1с1ес1 Тгап51а11оп-еп [122 кВ]

6е±:27 ЫХр://агсЫуе.иЬипХи.сот/иЬипХи -Госа1-ирс1а1е5/ип1уег5е атс1б4 Раскадез [910 кВ]

6е1:28 ИХХр://агсЫуе. иЬипХи. сот/иЬипХи ^оса1-ирс1а1е5/ип1уег5е ТгапзХаИоп-еп [202 кВ]

6е1:29 К11р://агсЫуе.иЬип1и.сот/иЬип1и -Еоса1-ирс1а1е5/ип1иег5е атс1б4 с-п--? Ме1ас1а1а [20.2 кВ]

6е1:30 Н11р://агсЫуе.иЬипХи.сот/иЬип1и -Еоса1-ирс1а1е5/ти111уег5е атс1б4 Раскадез [23.8 кВ]

6е1:31 Н11р://агсЬ1уе.иЬип1и.сот/иЬип1и -ЕосаХ-ирдаХгез/тиШуегзе Тгап51аИоп-еп [7312 В]

6е1:32 ЬМр://агсЫуе. иЬипХи. сот/иЬипХи 1оса1-ирс1а1е5/ти11:17ег5е ат(1б4 с-п--Е Ме1ас1а1а [580 В]

6е±:33 К11р://агсЬ1уе.иЬип1и.сот/иЬип1и 1оса1-Ьаскрог15/та1п атс1б4 Раскадез [42.2 кВ]

6е1:34 Ы1р://агсЫуе.иЬип!и.сот/иЬип!и -Еоса1-Ьаскрог1з/та1п Тгапз1аИоп-еп [10.1 кВ]

6е1:35 Ы1р://агсЫуе.иЬипГи.сот/иЬипГи -Роса1-Ьаскрог1з/та1п атс!б4 с-п--Е Ме1ас1а1а [864 В]

6е±:36 Ы1р://агсЫуе.иЬип1и.сот/иЬип1и -Еоса1-Ьаскрог15/ге51г1с1ес1 атс)64 с-п-1 МеХадаХа [116 В]

6е1:37 И11р://агсЫуе.иЬип1и.сот/иЬип1и -ЕосаХ-ЬаскрогЬз/игйуегзе атс1б4 Раскадез [22.7 кВ]

6е1:38 Ы1р://агсЫуе. иЬип!и. сот/иЬип±и -Роса1-Ьаскрог1з/ип1уегзе Тгапз1а11оп-еп [15.4 кВ]

6е±:39 Ы1р://агсЫуе.иЬип!и.сот/иЬип!и -Госа1-Ьаскрог15/ип1уег5е атс!б4 с-п-€ Ме1ас1а1а [804 В]

6е1:40 Ы1р://агсЫуе.иЬип!и.сот/иЬип1и ^осаХ-ЬаскрогГз/тиШуегзе атс!64 с-п-Г Ме1ас1а1:а [116 В]

Ее1сКед 22.1 МВ 1п 2з (10.1 МВ/з)

КеасНпд раскате 11515... Эоле

 । Ги1;'г..к^/яп1:/с/Ц5ег5/гоЫп_х]гп2гу$ 5ис1о ар1-де! 1п51а11 -у 5Э55_______________________________________________

Рис. 27.7. Установка 8а88 в ЛэипШ Ыпих с помощью ар1-§е1

После установки с ее помощью можно будет установить 8а§8, выдав следующую
команду:

зис!о прт тпз^аИ -д зазз

Если с реализацией 8а88 на КиЪу или с использованием Мос1е.]8 для установки Ваг1
8а88 возникнут какие-либо проблемы, можно порекомендовать ручной режим уста-
новки из файла 1аг.§х, имеющегося на ОйНиЪ, с последующей рассмотренной ранее
проверкой работоспособности всех установок и обновлений.

Препроцессинг в С88

Теперь в командной строке всех трех основных операционных систем можно вы-
полнить преобразование 8а88-файлов в рабочие файлы С88, выполнив следующую
команду, в результате которой из одного места берется файл з^у1ез.зсзз, обрабаты-
вается, а затем уже в другом месте в файле з^у1ез.сзз сохраняется результат этой
обработки:

зазз зоигсе/з^у1езЪее^з/з^у1ез. зсзз ЬиНб/з^у1езЪее^з/з^у1ез. сзз

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

После того, как это будет сделано, можно настроить 8а88 на просмотр исходного
файла и автоматическую обработку его после каждого изменения, тем самым будет
сэкономлено время, и нужная работа, словно по волшебству, будет выполнена в
фоновом режиме. Для этого нужно ввести следующую команду:

зазз —ма^сЪ зоигсе/з^у1езкее^з/з^у1ез. зсзз ЬиИс1/зГу1езкееГз/зГу1ез. сзз
Теперь при каждом сохранении новой версии исходного файла вы можете просто
предположить, что версия сборки чуть ли не сразу доступна для тестирования (при
условии, что файл обрабатывается достаточно быстро, что обычно бывает со всеми,
кроме самых больших и сложных файлов Зазз).

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

зазз -ма^ск зоигсе/зГуГезкееГз :ЬиИс1/зГу1ез11ееГз

Теперь при обновлении любого файла в исходной папке он будет обработан и со-
хранен как соответствующий файл с тем же именем, но с расширением .сзз в папке
сборки.

Заключение

Итак, у вас уже сложилось общее представление о Зазз, его различных реализациях,
о том, что он делает и как его использовать на различных платформах. Теперь
можно приступать к самостоятельному применению препроцессора Зазз и глубо-
кому погружению в его использование с переменными, вложенностью, миксинами
и многим другим при изучении последующих глав книги.
ГЛАВА 28

Переменные и потоки выполнения
в Зазе

Введение

Несомненно, С88 вряд ли можно назвать языком программирования, и поэтому на
создание сложных макетов может уйти уйма времени. И тут на помощь приходит
8а§8, для полноценного применения которого нужно освоить ряд приемов про-
граммирования.

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

Структура

В этой главе рассматриваются следующие темы:

♦	Чем переменные С88 отличаются от переменных 8а§8.

♦	Что такое переменная, и как она работает.

♦	Приобретение навыков выверенного применения операторов 8а88.

♦	Освоение способов применения функций управления потоком выполнения ин-
струкций 8а88.

Цели

Изучив материалы главы, вы освоите передовые методы, предлагаемые препроцес-
сором 8а88. Научитесь использовать переменные и циклические структуры и смо-
жете создавать выражения для управления потоком выполнения кода, точно сооб-
разуясь со своими потребностями.
Переменные в 085

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

#е1етепР { —та!п-Ьд-со1ог: суап; }

В этом выражении переменная называется —та1п-Ьд-со1ог и имеет значение суап.
Далее переменную можно будет применять в любых элементах с идентификатором
е1етеп^ (и в их дочерних элементах). Но вне этой области переменная будет проиг-
норирована, поэтому вместо нее используются унаследованные значения. Чтобы у
переменных были глобальные области видимости, позволяющие повсеместно при-
менять их в вашем С88, можно воспользоваться псевдоклассом :гоок:

:гооР { —та!п-Ьд-со1ог: суап; }

Чтобы затем присвоить значение переменной свойству, следует воспользоваться
функцией уаг ():

#шусПу { Ьаскдгоипс1-со1ог: уаг (—та1п-Ьд-со1ог) ; }

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

:гооР {

—с1еГаиЮ-№1сШз : ЮОрх;

—с1еГаи1Р-Ъе1дМ : 80рх;

}

А затем ими можно будет воспользоваться в функции са1с (), применяя их с исполь-
зованием функции уаг () :

#тусПу { м1с±Ъ : са1с (уаг (—с1еГаиЮ-м1с±]с) + 20рх) ; }

Давайте объединим эти выражения в примере 28.1 и посмотрим на результаты их
применения.

Пример 28.1

1.	<1ЭОСТУРЕ Мт1>

2.	<Мт1>

3.	<Ъеас1>

4.	<РЮ1е>СЗЗ 7аг1аЫез</РЮ1е>

5.	<зРу!е>

6.	:гооР	{

7.	—с1еГаиЮ-№1сШз	:	ЮОрх;

8.	—с1еГаи1Р-Ъе1дМ	:	80рх;	}

9.	#±Ю1	{

10.	м1с±Ъ	:	уаг (—с!е1аиЮ-м1с±]з	);

11.	ИетдИР	:	уаг (—с1еГаи1Р-Ъе1дЪР)	;	}

12.	#аЮ2	{
13.	^хаъи	:	са1с(уаг(—аЫаи1ЫЫаЫ )	+ 20рх)
14.  15.	ИетдМ	:  сПу {	са!с (уаг (—аЫаиЫ-кеХдМ)	+ 20рх)
16.	Ьаскдгоипс1-со1ог :	Игле;	
17.	Г1оак	:	1еП;	
18.	тагдтп	:	Юрх;	
19.  20.  21.  22.	ЬоЫег	:  </зку!е>  </кеаа>  <Ьос1у>	1рх зоНа Ыаск;	
23.	<сИу 1с1=’с1гу1 ’>ТЫз 13	скЫ1</скпл>	
24.  25.  26.	<сНу 1а=’ сПу2 ’ >ТЫз 13  </Ьос1у>  </Ыш1>	скЫ2</скЫ>	

В строке 16 примера видно, что изначально у всех элементов <а±у> имеется черная
граница, светло-зеленый фон, внешний отступ в 10 пикселей и свойство свободного
плавания, позволяющее им выстраиваться в ряд. Чуть выше, в строках 7 и 8 доку-
мента, присваиваются значения переменным, а в строках с 9 по 14 для элементов с
идентификаторами сИу1 и аЫ2, которые ниже будут указаны для элементов <аы>,
задаются правила стилевого оформления. И наконец, в разделе документа <Ьоау>,
начиная со строки 22, задается отображение двух элементов.

Результат выполнения кода показан на рис. 28.1, где четко видно, что второй эле-
мент на 20 пикселей шире и глубже первого, что стало результатом добавления
этой величины к каждой из переменных и последующего применения результатов
вычислений к размерам элемента.

@ С55 УапаЫё5	X +

С О © 1оса1:Но51/Ехатр|е5/5ес11оп_4/28/еиатр1е_01.1т1т1 Д Ж У :

Т1Й5 к с11у1 ТИ15 ж \ 2

Рис. 28.1. Второй элемент больше по размерам
в результате применения переменных и функций С88

Используя ряд функций с довольно длинными именами, можно также читать и ус-
танавливать значения этих переменных из сценария 1ауа8спр1. Например, чтобы
получить значение переменной С88, можно вызвать функцию деыотриыазку1е (),
которая вернет соответствующий элемент, и как только он будет получен, можно
будет вызвать в отношении этого элемента функцию де^Ргорег^у7а1ие (), применив
следующую инструкцию:

деРСотриРес!ЗРу1е (аоситепГ.Ьоау) .деРРгорегРу7а1ие (’—с1еГаи1Р-м1с1РЪ’)

Чтобы изменить значение, можно для свойства стиля соответствующего элемента
вызвать функцию зеЪРгорегЪу(), применив следующую инструкцию:

аоситепГ.Ьос1у. зРу1е. зеРРгорегРу (’ —йеГаиХ'Ь-ю.сГЬЪ. ’, ’ 50рх ’)

А если открыть в браузере консоль разработчика и ввести в ней последнюю из этих
двух инструкций, новое значение будет тут же применено, и результат будет таким,
как показано на рис. 28.2 (где окно консоли наплывает на окно браузера):

0 С88УапаЫе5

ф ОеуТоок - 1оса1Но5(/Ехатр1е$/5есГ1оп_4/28/ехат...

□ X

Рис. 28.2. Переменная С88 была обновлена в коде 1ауа8спр1

Переменные в Зазз

Одной из основных причин быстрого роста популярности 8а§8 было то, что в С88
долгое время не поддерживалось применение переменных. Но к нашему удоволь-
ствию, сейчас их уже поддерживают все основные браузеры, за редким исключени-
ем, куда входят Орега Мий и большинство браузеров АпбгоМ до 2022 года — так
что имейте это в виду! Но наряду со всеми другими стимулами к использованию
8১ реализация переменных в С88 остается весьма примитивной и неудобной в
использовании. Поэтому пользователи 8а88 довольно редко работают со встроен-
ными функциями переменных С88, полагаясь в основном на более высокую эф-
фективность работы с самим 8а88.

Переменную в 8а88 можно создать в любой момент, поставив перед ее именем знак
доллара и присвоив ей значение. В ранее рассмотренном примере 28.1 создавалась
переменная с именем — аеГаиГР-^ЫРЬ и, чтобы задать ей глобальную область види-
мости, ее нужно было применять к псевдоклассу :гоор. Если же ей не задана гло-
бальная область видимости, переменная может быть использована только в вы-
бранном элементе и его дочерних элементах. Получается, что переменная С88 в
зависимости от того, где и как она используется, может иметь разные значения!
А вот в Зазз, как только переменная инициализирована, она имеет неизменное зна-
чение везде, где используется, если только это значение не было изменено, но в та-
ком случае далее уже применяется именно это новое значение. Следовательно,
можно начать с переменной $с1еГаиП-мШГ1 со значением ЮОрх, а потом изменить его
на 15 Орх, и новое значение будет применяться только при последующем использо-
вании этой переменной, а при более раннем сохранится прежнее значение ЮОрх.

А переменные С88 в случае их обновления распространяют изменение на все свои
экземпляры, там, где они использовались в пределах своей области видимости. То
есть, когда значение переменной С88 меняется со ЮОрх на 150рх, то для всех приме-
нений в этой области видимости устанавливается новое значение 15 Орх. Подобное
поведение пригодится, например, для анимации и событий наведения указателя
мыши или же для других динамических взаимодействий, и в таком случае всегда
можно воспользоваться как переменными С88, так и переменными Зазз.

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

Переменные С88 и Зазз чувствительны к регистру, т. е. важно придерживаться
точного применения символов верхнего и (или) нижнего регистра. Иными словами,
переменные С88 —техъ-Со1ог и —ъехъ-со1ог отличаются друг от друга, поскольку у
одной из них заглавные начальные буквы в словах, а у другой нет. По аналогичной
причине отличаются друг от друга и Зазз-переменные $тех^-со1ог и $^ех^-со1ог.

Но у Зазз есть одна особенность: он одинаково обрабатывает знаки подчеркивания
(_) и дефисы (-). Их при желании можно поменять местами, и Зазз по-прежнему
будет работать как ни в чем не бывало. Это связано с тем, что Зазз изначально ис-
пользовал символ подчеркивания в качестве предпочтительного разделителя, и
только позже также принял в этом же качестве дефис, чтобы стать более совмести-
мым с С88. В результате в С88 дефис и подчеркивание — разные символы, а в Зазз
они считаются одинаковыми.

Значения переменных,
используемые по умолчанию

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

Но иногда нужен более четкий контроль над тем, когда именно перезаписывать
существующее значение, и поэтому, чтобы помочь защитить ранее назначенные
значения, предоставляется флаг шгаиЦ. Переменные, созданные с его использова-
нием, не могут быть изменены, за исключением случаев, когда им еще не присвое-
но значение или когда их значение равно пи11. Но с библиотеками 8азз может ис-
пользоваться @изе, позволяющее изменить значение переменной с установленным
флагом !ЬеГаиЦ.

Предположим, у вас есть файл библиотеки с именем ЦЬгагу.зсзз (при условии, что
вы используете формат 8С88, а не 8А88, в котором, как вы помните, вместо фи-
гурных скобок, применяемых в 8С88, используются отступы).

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

В примере 28.2 показано, как может выглядеть содержимое, помещаемое вами в
такой библиотечный файл, включая использование флага 1аеГаи1ь.

Пример 28.2

1.	// ЦЬгагу.зсзз

2.	$Ыаск	:	#000 !ЬеГаи1Ь;

3.	$ЬогЬег-гаЫиз	:	0.25гет !ЬеГаи1Ь;

4.	$Ьох-зкаскж	:	0 0.5гет 1гет гдЬа($Ыаск, 0.15) !ЬеГаи1Ь;

5.

6.	соЬе {

7.	ЬогЬег-гаЫиз : $ЬогЬег-гаЫиз;

8.	Ьох-зкаЬом	: $Ьох-зкаскж;

9.	}

А теперь давайте создадим пример 28.3 с кодом файла зку1е.зсзз, который будет
импортировать эту библиотеку:

Пример 28.3

1.	// зЬу1е.зсзз

2.	@изе ’ЦЬгагу’ ШЦ (

3.	$Ыаск	: #222,

4.	$ЬогЬег-гаЫиз : 0.1геш

5.	);

Давайте разберемся, что же происходит с этими двумя файлами. Итак, в
ЦЬгагу.зсзз создается несколько переменных: $Ыаск в строке 2, которой присваива-
ется значение цвета #ооо, а также для нее указывается флаг шгаиЦ. Для двух дру-
гих переменных, $Ьогс1ег-гас11из и $Ьох-зЬаскж также устанавливаются исходные зна-
чения под флагом !аеГаиК. После этого для НТМЬ-элемента соае задается такой
стиль, при котором значения переменных $Ьогс1ег-гас11из и $Ьох-зЬаскж применяются
к его соответствующим свойствам.

В файле з^у1е.зсзз файл библиотеки пьгагу.зсзз импортируется за счет применения
правила @изе, но с переопределением переменных $Ыаск и $Ьогс1ег-гас11из, которым
присваиваются новые значения. Но давайте вспомним, что переменные, объявлен-
ные во встроенном модуле, не могут быть изменены. К примеру, если, как показано
ниже, попытаться переопределить значение Р1, сделав его равным 3, произойдет
сбой:

@изе ’’зазз:такк" аз такк;

такЪ.$ра : 3;

Область видимости переменных

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

Но, переменные, объявленные в блоке в фигурных скобках (или в разделе с отсту-
пом в форматировании 8А88), считаются локальными. Это означает, что их об-
ласть действия применяется только в этом разделе кода. Более того, локальная пе-
ременная может иметь точно такое же имя, как и глобальная, и они не будут ме-
шать друг другу.

В примере 28.4 имеется верхний уровень и два локальных блока правил.

Пример 28.4

1.	$д!оЬа!-Ьд : #000;

2.

3.	.сопкепк {

4.	$1оса1-Гз	:	гЬаИс;

5.	Ьаскдгоипс!	:	$д!оЬа!-Ьд;

6.	Гопк-зку1е	:	$1оса1-Гз;

7.	}

8.

9.	. зЫеЬаг {

10.	Ьаскдгоипс! : $д!оЬа!-Ьд;

11.	Гопк-зку1е : $1оса1-Гз;

12.	}
Здесь, в строке 1, объявлена глобальная переменная с именем $д1оЬа1-Ьд (ее имя
может и не начинаться со слова д1оЬа1-, это просто удобное соглашение, которым
можно воспользоваться, чтобы напомнить себе о том, что происходит). В этой пе-
ременной хранится значение цвета #ооо, предназначенное для использования в ка-
честве фона (отсюда и Ьд в имени переменной).

Ниже находятся два раздела кода, содержащие правила для содержимого (сопкепк) и
боковой панели (зЫеЬаг) веб-страницы. В разделе .сопьэп-ь в строке 4 создается ло-
кальная переменная $1оса1-#з со значением ИзаИс. Очевидно, #з в имени перемен-
ной указывает на то, что она используется для применения в атрибуте Гопъ-зЪу1е, но
не забудьте, что вы можете использовать какое угодно соглашение об именовании
переменных (или же соглашение, установленное вашим работодателем), и его со-
блюдение принесет реальную пользу вам и всем, кто получает доступ к вашему
коду.

Затем в строке 5 свойству Ьаскдгоипа присваивается значение переменной $д1оЬа1-Ьд.
Этот код срабатывает, поскольку переменная имеет глобальную область видимо-
сти. После этого в строке 6 свойству Гоп-ь-зку1е присваивается значение переменной
$1оса1-#з, что также срабатывает, поскольку эта переменная находится в локальной
области видимости.

Но взгляните на раздел .зЫеЬаг, где свойству Ьаскдгоипа в строке 10 вполне законно
присвоено значение глобальной переменной $д1оЬа1-Ьд. Как вы думаете, что про-
изойдет в строке 11? Дело в том, что $1оса1-#з не находится ни в локальной области
видимости, поскольку она не была определена в этом разделе, ни в глобальной об-
ласти видимости, поскольку единственный другой экземпляр этого имени перемен-
ной находится в другом разделе, который имеет свою собственную локальную об-
ласть видимости. Получается, что задание в строке 11 не будет выполнено.

Принудительное задание глобальной видимости

Иногда может понадобиться обновить глобальную переменную из подраздела таб-
лицы стилей, и это можно сделать с помощью флага 1д1оЬа1. Проще говоря, добав-
ление 1д1оЬа1 после присваивания переменной значения позволяет обновить ранее
существовавшую глобальную переменную из раздела кода, который обычно за-
прещает это. Обратите внимание, что создать таким образом новую глобальную
переменную невозможно, но флаг !д1оЬа1 можно применить для обновления гло-
бальной переменной:
.сопкепк {

$д!оЬа!-Ьд : #246 !д!оЬа1;

Ьаскдгоипс! : $д!оЬа!-Ьд;

}

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

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

В Зазз есть четыре основных правила управления потоком:

♦	@И... @е1зе ... И

♦	@еас11... т

♦	@Гог ... &от ... ШгоидйЛо

♦	@\уЫ1е

Чтобы объяснить, как они работают по отдельности или в различных комбинациях,
необходимо уяснить порядок использования операторов Зазз. В их роли выступают
хорошо известные вам символы: +, -, * и /, а также более интересные операторы: ==,
!=,>,< и другие.

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

Зазз-операторы

В Зазз поддерживаются шесть типов операторов:

♦	Равенства: == и ! =

♦	Арифметические: +,	= и %

♦	Сравнения: <, <=, > и >=

♦	Булевы: апс1, ог и по^

♦	Конкатенации: +, - и /

♦	Приоритета: ( и )

Хотя тех, кто никогда не занимался программированием, это может отпугнуть, но
на самом деле все довольно просто. Например, оператор == (двойной знак равенст-
ва) используется для сравнения двух значений, чтобы определить, равны они друг
другу или нет. Двойной знак равенства используется, чтобы его не путали с оди-
нарным знаком равенства, используемым для присвоения значений. Группа символов
!= просто используется для проверки, равны или не равны два значения друг другу.
По арифметическим операторам у вас не должно быть вопросов, за исключением,
может быть, оператора %, который используется для вычисления остатка после де-
ления. Например, 15р^ % бр^ — это 2р^ с остатком Зр^, поэтому получается значение
Зр^ (15/6 равно 2 с остатком з). И здесь можно использовать любые допустимые
значения С88-измерения, а не только числа и различные типы.
Операторы сравнения также должны иметь четкий смысл. Например, выражение 2
< з вычисляется в -ьгие, потому что < — это оператор «меньше, чем». Есть также
оператор <= для «меньше или равно», и их противоположности — > для «больше,
чем» и >= для «больше или равно». Поскольку типы измерений в С88 могут смеши-
ваться и сопоставляться, эти операторы действительно пригодятся, следовательно,
когда результат смешанного вычисления между смешанными типами измерений
с первого взгляда не очевиден (в противном случае можно было бы просто ввести
значение результата), можно взамен воспользоваться таким выражением, как
Ип < 73р^, которое вычисляется в +гие, поскольку в дюйме 72 пункта.

Теперь обратимся к, возможно, менее очевидным операторам, начиная с булевых
операторов апа, ог и по+ (соответственно, «и», «или» и «не»). С их помощью можно
создавать составные выражения типа «если это и это», или, может быть, «если не
это», или если «это или то». Думайте об их использовании точно так же, как это
было бы сказано в обычной речи, поскольку именно так они и работают. Эти опе-
раторы называются булевыми в честь человека, который их изобрел (Джордж
Буль), и представляют значения истинности в логических выражениях.

Остается еще несколько операторов конкатенации и приоритета. Конкатенация
просто означает соединение двух элементов вместе, которые обычно являются
строковыми значениями, но в процессе числовые значения могут присоединяться к
строковым значениям для создания новой строки. Здесь следует проявлять осмот-
рительность, так как оператор + также используется для операции сложения. Сле-
довательно, 1 + 2 равно числу з, а ЫдЬ+ + в1ие в строке задания цвета С88 равно
Значению ЫдЬ+В1ие.

Оператор, обозначаемый знаком минуса (-) при использовании для конкатенации
работает необычным образом в качестве сокращения для таких выражений, как
запз- + зег1г, которые вычисляются в запз-зегИ. Вместо этого для получения точно
такого же результата можно воспользоваться выражением запз - зегИ. Точно так
же для конкатенации можно использовать оператор /, если он помещается перед не
полностью числовым значением, например: / 24р+, что после конкатенации превра-
тится в значение /24р+, как, собственно, и оператор -, использованный таким обра-
зом: - тох, после конкатенации выдаст результат -тох. Но эти последние варианты
использования предназначены для исторической совместимости и не рекомендова-
ны к использованию. И все же вам следует знать о них, чтобы понять уже сущест-
вующий код, который может использовать эти операторы так.

Базз-выражения (Базз-сценарий)

Выражением в 8а88 считается все, что находится в правой части объявления свой-
ства или переменной. Каждое выражение создает значение, и любое допустимое
значение свойства С88 — также выражение 8а88. Выражения 8а88 передаются в
качестве аргументов миксинам и функциям, используются для управления потоком
выполнения инструкций и управляются с помощью арифметики. Синтаксис выра-
жений Зазз называется ЗаззЗспр!.

Мы уже рассмотрели операторы, используемые в Зазз, а также кратко рассмотрели
поддерживаемые типы управления потоком, поэтому теперь давайте рассмотрим
каждый из этих четырех типов по очереди.

@Н... @е1зе

Как и следовало ожидать, тип управления потоком принимает выражение, при
вычислении которого в ^гие выполняет следующую инструкцию, объявление или
присваивание. Если также используется необязательное ключевое слово @е1зе, и,
если выражение не вычисляется в ъгие, то все, что следует за @е1зе, будет выполне-
но. Давайте посмотрим, как это работает, в примере 28.5.

Пример 28.5

1. $Ьогс1-гас1 : Га1зе;

2.

3.	@1Г $Ьогс1-гас1	{

4.	ЬоЫег-гасНиз : Юрх;

5.	}

6.	@е!зе {

7.	ЬоЫег-гасНиз : 0;

8.	}

В строке 1 создается переменная с именем $ЬоЫ-гаа, которой присваивается значе-
ние Га1зе. Затем инструкция в строке 3 проверяет это значение, и, если оно вы-
числяется в ^гие, следующему свойству ЬоЫег-гасНиз присваивается значение Юрх.
Если же $Ьога-гаа не вычисляется в ъгие, выполняется инструкция @е1зе в строке 6,
гарантирующая, что у границ не будут радиуса. В исходном варианте в этом при-
мере не будут отображаться закругленные углы границ из-за того, что $ЬоЫ-гаа
имеет значение Га1зе.

Это очень простой пример выражения, в котором вычисляется значение только од-
ной переменной. Любое значение, равное пин или нулю, рассматривается Зазз как
ложное и поэтому вычисляется в Ю1зе. Любое другое значение считается истинным
и будет вычисляться в ^гие. Это правило распространяется даже на пустые строки,
пустые списки и даже на число 0. Все это считается истинным. А в документах Зазз
действительно используются слова Га1зеу и йпЙзу («фальшивый» и «правдивый»)!

Итак, что это означает на практике? Помимо возможности присваивать перемен-
ным значения -ьгие или Ю1зе, вам придется также работать с любыми значениями,
которые они могут иметь (или не иметь), и они все равно будут вычисляться либо в
^гие, либо в Га1зе. Например, значение 24р^ истинно, так же как и «Апа1 ВоМ».
Единственные одиночные значения переменной, которые будут вычисляться в
Га1зе, — Га1зе И пи!1.

А вот сложные выражения — совсем другое дело, поскольку, как показано в при-
мере 28.6, для получения логического результата либо кгие, либо Га1зе, вычисляется
все выражение.

Пример 28.6

1.	$тагд!п : Юрх;

2.	$расЫпд : Юрх;

3.

4.	$тагд1п + $расЫпд >=	20рх {

5.	Ьогс1ег-со1ог : дгееп;

6.	}

7.	@е!зе	{

8.	ЬоЫег-сЫог : Ыаск;

9.	}

В этом примере есть две переменные с именами $тагд1п и $расШпд, каждой из кото-
рых присвоено значение Юрх. В строке 4 эти два значения складываются, и резуль-
тат проверяется на соответствие выражению «больше или равно 20рх». Если это так,
то свойству Ьогс1ег-со1ог в строке 5 присваивается значение дгееп, в противном слу-
чае в строке 8 ему присваивается значение Ыаск. Конечно же, можно применить
любое другое сравнение, например <= или == и т. д., все зависит от того, что именно
нужно оценить.

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

Пример 28.7

1.	$тагд1п : Юрх;

2.	$расЫпд : Юрх;

3.

4.	@1Г ($тагд!п == Юрх) апс! ($расШпд >= Юрх) {

5.	Ьогс1ег-со1ог : дгееп;

6.	}

7.	@е!зе	{

8.	Ьогс1ег-со1ог : Ыаск;

9.	}

Здесь проводится тест с целью определения, имеется ли у $тагд1п значение, в точ-
ности равное Юрх, а также является ли значение переменной $расШпд большим или
равным Юрх. При одном только условии, что оба эти выражения вычисляются в ыие
(из-за использования ключевого слова апа), свойству Ьогаег-со1ог будет в строке 5
присвоено значение дгееп.

Влияние скобок

Обратите внимание на использование скобок в примере 28.7 для заключения в них
каждого выражения и для того, чтобы и вам, и Зазз было понятно, что и для чего
предназначено.

Используя круглые скобки, можно гарантировать, что их содержимое будет вычис-
лено перед вычислением элементов, находящихся снаружи. Например, круглые
скобки можно использовать для переопределения естественного приоритета опера-
торов. Дело в том, что по соглашению операторы * и / имеют более высокий при-
оритет, чем операторы + и -, поскольку обладают гораздо более сильным эффектом.
Следовательно, выражение со сложением, 2 + з * 5 - 4 вычисляется в 13, а не в 21
(что стало бы верным ответом, если бы в Зазз вычисление велось строго слева на-
право). Но по соглашению в Зазз сначала выполняется умножение з на 5, и только
затем прибавляется 2 и вычитается 4. При желании заставить Зазз вычислять все
строго слева направо, это можно сделать с помощью скобок: (2 + з ) * 5 - 4, и тогда
действительно будет получен результат 21. Обратите внимание, что (2 + 3) * (5-4)
будет уже совершенно другим вычислением, приводящим к ответу 5, потому что
сначала будут вычисляться два выделенных выражения, а потом они будут пере-
множаться.

@е1зе И

Простое выражение ш ... @е1зе как тип управления потоком можно расширять до
бесконечности, добавляя и после любого @е1зе. Как это делается на практике, пока-
зано в примере 28.8.

Пример 28.8

1.	$тагд!п : Юрх;

2.

3.	@1Г $тагд!п == Юрх {

4.	Ьогс1ег-со1ог	:	дгееп;

5.	}

6.	@е!зе	1Г $тагд!п == 15рх {

7.	Ьогс1ег-со1ог	:	Ыие;

8.	}

9.	@е!зе	{

10.	Ьогс1ег-со1ог	:	Ыаск;

И.	}
В этом примере в строке 6 показано использование @е1зе 1Г с целью проверки зна-
чения переменной $тагд1п, отличной от той проверки, что была в строке 3. В дан-
ном случае, если $тагд1п имеет значение 15рх, в строке 7 свойству Ьогаег-со1ог при-
сваивается значение Ыие. И наконец, в строке 9 имеется отдельный оператор @е1зе,
завершающий последовательность, и при необходимости между ними может быть
больше операторов @е1зе и.

@еасЬ... т

Теперь, освоив выражения ... @е1зе, давайте перейдем к чему-либо более слож-
ному с ключевым словом @еась. Чтобы оценить эффективность функции, представь-
те, что вам нужно создать несколько значков разных размеров, но вы не хотите за-
писывать несколько отдельных наборов правил. Из примера 28.9 следует, что 8азз
позволяет легко справиться с этой задачей.

Пример 28.9

1.	$з1хез : 40рхЛ 60рхЛ 80рхЛ ЮОрх;

2.

3.	@еас± $з1хе 1п $з!хез {

4.	.тсоп-#{$з1хе} {

5.	ГопГ-зЮе : $з!хе;

6.	НетдМ	: $з1ге;

7.	: $31ге;

8.	}

9.	}

Конечно же, может возникнуть вопрос: «А это еще что такое?» Расслабьтесь, по-
скольку вам это понравится. Эти 9 строк 8১ превратятся в гораздо большее коли-
чество строк С88. В строке 1 создается переменная по имени $зЮез. Но это особый
тип переменной, называемый списком. Он создается обычным способом, но с до-
бавлением дополнительных значений, разделенных запятыми, чтобы переменная
превратилась в список. В данном случае это набор из четырех значений в диапазоне
ОТ 40рх ДО ЮОрх.

Сила списка демонстрируется начиная со строки 3 с ключевого слова ОеасЬ. Этот
оператор поочередно извлекает каждое значение списка $зЮез при каждом проходе
цикла. Всякий раз в цикле значение, извлеченное из $зЮез, помещается в перемен-
ную $зЮе (обратите внимание, что это слово — единственное число от слова $зЮез,
но на его месте может быть любое выбранное вами имя), а затем в строке 4 доступ
к этому значению осуществляется с помощью выражения #{$зЮе}, который заменя-
ется фактическим значением, а затем добавляется к строке Лсоп-. Так, например,
значение первого элемента списка равно 40рх, и это значение добавляется к Лсоп-, в
результате чего получается . 1соп-40рх.
Затем команда @еась переходит к оставшимся трем значениям в списке, создавая
С88, показанный в примере 28.10.

Пример 28.10

1.	.1соп-40рх {	
2.	Гоп^-згге :	: 4 Орх;
3.	ЪеадЪ^	:	: 4 Орх;
4.	м1с±Ъ	:	: 4 Орх;
5.	}	
6.		
7.	.1соп-60рх {	
8.	Гоп^-захе :	: б Орх;
9.	Ъе1д1Ю	:	: б Орх;
10.	м1с±Ъ	:	: б Орх;
11.	}	
12.		
13.	.1соп-80рх {	
14.	Гоп^-захе :	: 8Орх;
15.	Ъе1д1Ю	:	: 8Орх;
16.	ыЮЪН	:	: 8Орх;
17.	}	
18.		
19.	Лсоп-ЮОрх ]	г
20.	Гоп^-захе :	: ЮОрх;
21.	ЪеадЪ^	:	: ЮОрх;
22.	ю1с1М1	:	: ЮОрх;
23.	}	

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

@Тог... Тгот ... <ЬгоидЬ

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

Давайте рассмотрим случай, когда нужно присвоить значения свойству Гопъ-згхе
различных элементов от ш до Ь5, чтобы заменить их значения по умолчанию,
в диапазоне от 24ри для м до 8ри для Ь2. Один из способов выполнения этой задачи в
8১ показан в примере 28.11:

Пример 28.11

1.	$ИеасПпд-з1ге: 28рИ;

2.

3.	@Гог $1 Ггот 1 ИИгоидИ 5 {

4.	Ы{$1} {

5.	ГопИ-з1ге : $ИеасПпд-з1ге - ($1 * 4);

6.	}

7.	}

Здесь происходит следующее: в строке 1 создается переменная с именем $Ьеас11пд-
з1ге и со значением 28ри. Затем в строке 3 ключевое слово @1ог используется с клю-
чевыми словами Ггош и й1гоидь для последовательного перебора значений от 1 до 5, а
в строке 4 к каждому из этих чисел добавляется буква ь, чтобы составлялись имена
элементов от м и до Ь5.

Затем в строке 5 для каждого из этих элементов устанавливается свойство Гопи-зтхе
путем вычитания значения в $1, умноженного на 4, из значения в $Иеаа1пд-з1хе.
В результате м будет иметь значение свойства Гопи-зтхе, равное 24ри, Ь2 - равное
20ри, и далее до Ь5, у которого свойство Гопи-зтхе будет иметь значение всего 8ри.
Созданный препроцессором код С88 будет выглядеть, как показано в примере 28.12:

Пример 28.12

1.	м {

2.	ГопИ-зтхе : 24рИ;

3.	}

4.

5.	Ь2 {

6.	ГопИ-зтхе : 20рГ;

7.	}

8.

9.	ИЗ {

10.	ГопИ-зтхе : 16рИ;

11.	}

12.

13.	Ь4 {

14.	ГопП-зтге : 12рИ;

15.	}

16.

17.	И5 {

18.	ГопИ-зтхе : 8рИ;

19.	}
@Тог... Тгот ... 1о

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

Вместо этого лучше воспользоваться конструкцией @Гог ... Ггот ... ъо, которая будет
выполнять итерацию от значения Ггот и до значения ъо, но не включая значение ъо.
Эта конструкция отличается от той, что была в предыдущем примере, где исполь-
зовалось ключевое слово й1гоидь и выполнялись итерации до значения й1гоидь
включительно. В примере 28.13 показано, как немного улучшить предыдущий код.

Пример 28.13

1.	$ЪеасИпд-з1хе : 24р^;

2.

3.	@Гог $1 Ггот 5 1зо 0 {

4.	Ы{$1} {

5.	Гоп^-зтхе	: $ЪеасИпд-з1хе;

6.	$ЪеасИпд-з1хе : $ЪеасИпд-з1ге - 4р^;

7.	}

8.	}

В этом примере в сроке 1 свойству $Ьеас11пд-з12е сразу присваивается правильное
значение, а затем цикл @Гог в строке 3 ведет обратный отсчет от 5 до 1, но не до О,
поскольку вместо й1гоидь используется ключевое слово ъо. При каждом проходе
цикла это значение присваивается свойству Гоп^-зтхе элементов от Ь5 до ы, а затем
в строке 6 из значения переменной вычитается 4р^, чтобы при следующем проходе
цикла ее значение было меньше именно на эту величину. Конечный результат ана-
логичен тому, что был при выполнении кода примера 28.12, за исключением того,
что элементы с Ь5 по ш фигурируют здесь в обратном порядке.

Конечно, пример 28.13 также можно превратить в пример 28.14, используя ъьгоидь
вместо ъо, показывая тем самым, что выбор между ключевыми словами и ъьгоидь,
как правило, просто вопрос личных предпочтений, поскольку вы, конечно же, мо-
жете найти способы, заставляющие работать на вас любое ключевое слово.

Пример 28.14

1.	$ЪеасИпд-з1хе : 24р^;

2.

3.	@Гог $1 Ггош 5 ГЪгоидк 1 {

4.	Ы{$1} {

5.	Гоп^-зтхе	: $ЪеасПпд-з1хе;

6.	$ЪеасИпд-з1хе : $ЪеасИпд-з1хе - 4р^;

7.	}

8.	}
@ууИНе

И последний способ управления потоком выполнения и циклами — @^Ы1е. Им сле-
дует пользоваться осмотрительно, поскольку он допускает создание бесконечного
цикла, который никогда не будет остановлен. Дело в том, что при использовании
1Ш1е цикл повторяется до тех пор, пока вычисляемое им выражение имеет значе-
ние ^гие. Если оно никогда не будет вычислено в Га1зе, цикл будет повторяться
вечно. Исходя из этого, лучше будет воспользоваться циклами @еась или @Гог, ведь
их проще использовать, и другим будет легче разобраться в вашем коде. Кроме то-
го, не будет риска бесконечного зацикливания. И хотя бывают случаи, когда при-
менение №1е предпочтительнее, из-за сложности их описание не сочетается с те-
мой книги.

И все же в качестве упражнения для понимания порядка работы цикла, задаваемого
этим ключевым словом, давайте внесем изменения в пример 28.14, чтобы получил-
ся, код, показанный в примере 28.15, где используется цикл

Пример 28.15

1. $ЬеасПпд-з1хе : 24р^;

3.	@мЫ1е $ЪеасПпд-з1хе >= 8р^ {

4.	Ы{$1} {

5.	ГопГ-захе	: $ЪеасНпд-з1ге;

6.	$ЪеасНпд-з1ге : $ЪеасНпд-з1ге - 4р^;

8.	}

Заметьте, что здесь изменилась только строка 3. Теперь при каждом проходе цикла
выполняется только один простой тест. Пока значение $Ьеас11пд-з12е больше или
равно 8р^, цикл продолжается. Но когда значение становится меньше 8р^, цикл за-
вершается. Отчасти этот код может показаться проще, чем при использовании @Гог,
но если забыть или неподобающим образом уменьшить значение в $Ьеас11пд-з17е до
размера менее 8р^, то цикл никогда не завершится. Поэтому применять это ключе-
вое слово нужно с особой осторожностью.

Заключение

На этом весьма подробное введение в использование переменных и управление по-
током выполнения в 8а§8 завершается. Теперь на основании полученных знаний
можно будет в следующей главе перейти к изучению вложенности и наследования.
ГЛАВА 29

Расширенный Зазз

Введение

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

Например, 8а88 предлагает посредством наследования непревзойденную поддержку
совместного использования свойств С88 одного селектора другими. Уже не нужно
многократно повторять наборы правил, поскольку при желании использовать уже
имеющийся в другом месте, можно просто расширить область его действия без на-
бора большого объема кода.

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

Благодаря этим функциям 8а88 все больше, чем когда либо, превращает С88 в язык
программирования. 8а88 допускает простые и логичные конструкции, максимально
упрощающие понимание и отладку кода С88, а также позволяет сделать работу бы-
стрее и приятнее.

Структура

В этой главе рассматриваются следующие темы:

♦	Изучение имеющихся в 8а88 способов, позволяющих создавать вложенные раз-
делы правил.

♦	Осознание разницы между наследованием и использованием примесей.

♦	Изучение возможности загрузки и использования объемных дополнительных
функций в модулях 8а88.
♦ Получение дополнительных сведений о 8а88 и отслеживание хода развития этой
системы.

Цели

Цель главы — заполнить оставшиеся пробелы в знаниях 8а88, чтобы к завершению
изучения материала были усвоены все основные функции и преимущества, предос-
тавляемые им. Усвоив изложенные здесь сведения, вы будете знать, откуда можно
взять дополнительную информацию, если она вам понадобится. Кроме того, завер-
шив работу с книгой, вы станете выпускником мастер-класса по НТМЬ5 и С883.

Вложенность, используемая в Вазе

О концепции вложенности списков уже шла речь во введении. А теперь давайте
посмотрим, как это работает, обратившись к примеру 29.1, представляющему собой
простой документ НТМЬ5 с элементами С88 и НТМЬ.

Пример 29.1

1.	<!ЭОСТУРЕ Мт1>	
2.	<Мт1>	
3.	<Иеас1>	
4.	<‘ЫМе>Нау1даМоп Ызк</к1Ме>	
5.	<зку!е>	
6.	пау и! {	
7.	тагдап	:	: 0;
8.	раскНпд	:	: 0;
9.	Пзк-зку1е	:	: попе;
10.	}	
11.	пау И {	
12.	сНзр1ау	:	: 1пИпе-Ыоск,
13.	}	
14.	пау а {	
15.	сНзр1ау	:	: Ыоск;
16.	раскНпд	:	: Зрх 8рх;
17.	Гопк-метдИк	:	: ЬоЫ;
18.	кехк-с1есогаМоп :	: попе;
19.	}	
20.	пау а:коуег {	
21.	кехк-с!есогак1оп :	: ипс!ег11пе;
22.	}	
23.	</зку!е>	
24.	</Иеас1>	
25.	<Ьос1у>	
26.	<пау>

27.	<и!>

28.	<И><а	кгеГ=’кккрз://доод1е.сот’>(Зоод1е</а></11>

29.	<И><а	кгеГ=’кккрз://т1сгозоГк.сот’>М1сгозоГк</а></11>

30.	<И><а	кгеГ=’кккрз://арр1е.сот’>Арр1е</а></11>

31.	<11Ха	ЬгеГ=’кккрз : //атахоп.сот’>Атахоп</а></11>

32.	</и!>

33.	</пау>

34.	</Ьос1у>

35.	</1гЬт1>

Код примера просто выводит на экран список переходов по ссылкам навигации из
расположенных в ряд четырех элементов, и, когда указатель мыши наводится на
один из них, он становится подчеркнутым, показывая, что на нем можно щелкнуть
мышью. Соответствующий этому замыслу код С88 находится между строками 7 и 22,
а код НТМЕ — между строками 26 и 33.

На рис. 29.1 показана ссылка на Арр1е, подчеркнутая из-за наведения на нее указа-
теля мыши (браузер для удобства пользователя также отобразил внизу слева пункт
назначения ссылки):

Рис. 29.1. Список навигации с одной ссылкой, выделенной подчеркиванием

А теперь давайте посмотрим, как можно сделать раздел С88 максимально самодос-
таточным, воспользовавшись кодом 8а§8, показанным в примере 29.2.

Пример 29.2

1.	пау {	
2.	и! {	
3.	тагдтп	: 0;
4.	раскПпд	: 0;
5.	Пзк-зку1е	: попе;
6.	И {	
7.	сНзр1ау	: апПпе-Ыоск;
8.	а {	
9.	сПзр1ау	: Ыоск;
10.	раскПпд	: Зрх 8рх;
11.	Гопк-меадЬк	: ЬоЫ;
12.	ГехГ-с1есогаГ1оп :	: попе;
13.	}

14.	а:Ноуег	{

15.	-Ьех-Ь-МесогаМоп : ипМегИпе;

16.	}

17.	}

18.	}

19.	}

Заметьте, что теперь в самом начале имеется только одно упоминание об элементе
<пау>, а все элементы, присутствующие внутри него в НТМЬ, теперь также нахо-
дятся в 8а§8. Это вполне логично, поскольку здесь отражается способ размещения
НТМЬ в строках с 26 по 33 примера 29.1. Фактически, здесь воспроизводится даже
вложение элементов <а> в элементы <и>, и все это внутри элемента <пау>.

Разумеется, при желании появления подэлементов в элементе <пау> в произвольном
порядке (а не только в порядке вложенности, показанном в примере 29.1), можно
просто поместить их все в один нижний уровень вложенности. Привлекательность
такого подхода в том, что он полностью зависит от вас и соответствует желаемому
результату.

Вложенные свойства

Конечно, такое количество вложений создает массу удобств и не создает трудно-
стей для понимания, но 8а88 обладает еще большей эффективностью, продвигая
вложенность на более высокий уровень с помощью вложенных свойств. Рассмот-
рим, к примеру, все правила шрифтов и текста (гоп^- и ъехъ-), поддерживаемые
С88, используя разные имена правил. Если вы посмотрите 8а88-код в примере 29.3,
то увидите, как все эти правила могут быть вложены друг в друга, в результате чего
макет становится куда более простым для понимания, чем простой С88.

Пример 29.3

1.	Гоп^: {	
2.	ГатНу	:	: Соигаег Мем,
3.	312е	:	: 16рх;
4.	меадЪ^	:	: ЬоЫ;
5.	}	
6.		
7.	^ех^: {	
8.	аИдп	:	: диз'ЫГу;
9.	^гапзГогт :	: сарИзаИхе;
10.	1пс1еп^	:	: 7рх;
11.	оуегЫом :	: МскАеп;
12.	}	

> топозрасе;
Здесь есть только два основных раздела: один для шрифта, а другой для текста, и в
каждом находятся те части правил, которые обычно появляются после дефиса, но
здесь они сами по себе.

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

Наследование в Зазе

Вы ведь нервничали, когда создавали правила С88, постоянно копируя и вставляя
наборы правил, применяемые не только в одном разделе? Тогда у 8азз есть для вас
отличное решение — использование наследования, позволяющего классам насле-
довать свойства друг друга.

Оно работает с помощью директивы 8азз @ехьепа и является эффективным способом
добавления ясности и простоты в ваш С88. В примере 29.4 показано применение
набора правил для отображения сообщений.

Пример 29.4

1.	.теззадеЬох	{

2.	ЬогЬег	:	2рх ЬазЬеЬ. #000;

3.	ЬогЬег-гасНиз	:	Юрх;

4.	ЬаскдгоипЬ	:	#222;

5.	раскНпд	:	Юрх;

6.	со!ог	:	#скк1;

7.	}

8	.	. 1оддеЫп {

9.	@ехкепЬ .теззадеЬох;

10.	ЬаскдгоипЬ	: Ьагкдгееп;

11.	со1ог	: #ЫЬ;

12.	}

13.	. поЫоддесНп {

14.	@ехкепЬ .теззадеЬох;

15.	ЬаскдгоипЬ	: Ытдгеу;

16.	со1ог	: #ЬаЬ;

17.	}

18.	.ЬаЫодап {

19.	ОехЬепЬ .теззадеЬох;

20.	ЬаскдгоипЬ	: ЬагкгеЬ;

21.	со1ог	: #ГЬЬ;

22.	}
Начиная со строки 1 создаются правила для класса окна сообщений теззадеЬох.
В них задается двухпиксельная пунктирная граница черного цвета с закругленными
углами, темно-серый фон, не совсем белый цвет и внутренний отступ. Далее сле-
дуют правила еще для трех классов (1оддеЫп, поЫоддеЫп и ЬаЫодЮ), в которые рас-
ширяется теззадеЬох, изменяются свойства фона и цвета, но сохраняются при необ-
ходимости все остальные атрибуты.

А теперь давайте посмотрим, как этого же самого можно достичь в простом С88,
код которого показан в примере 29.5, где одновременно задаются правила сразу для
нескольких классов.

Пример 29.5			
1.	.теззадеЬох, . 1оддеЫп, . поЫоддесИп,		.ЬасПодтп {
2.	ЬогЬег	2рх ЬазЬеЬ #000;	
3.	ЬогЬег-гаЫиз	: Юрх;	
4.	ЬаскдгоипЬ	: #222;	
5.	раЬЫпд	: Юрх;	
6.	СО1ОГ	: #скЫ;	
7.	}		
8.	. 1оддеЫп {		
9.	ЬаскдгоипЬ	: Ьагкдгееп;	
10.	со1ог	: #ЬГЬ;	
11.	}		
12.	. поЫоддесИп {		
13.	ЬаскдгоипЬ	: Ытдгеу;	
14.	со1ог	: #ЬаЬ;	
15.	}		
16.	.ЬаЫодап {		
17.	ЬаскдгоипЬ	: ЬагкгеЬ;	
18.	со1ог	: #Гск1;	
19.	}		

Обратите внимание на то, что в строке 1 все имена классов разделены запятыми.
Благодаря этому все правила в фигурных скобках применяются ко всем перечис-
ленным классам. Затем чуть ниже последние три названных класса получают свои
уникальные значения свойств.

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

С точки зрения программиста, разобраться в С88 может непросто, особенно если
правила для класса теззадеЬох находятся на некотором удалении от других классов.
А вот код 8а§8 полностью понятен с первого взгляда, в силу чего менее подвержен
появлению ошибок стиля, допускаемых как вами, так и другими людьми, сопрово-
ждающими код.

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

Использование миксинов

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

А использование @1пс1иае подобно вызову функции (с параметрами или без них),
что похоже на вызов функции 1ауа8спр1.

В примере 29.6 создается миксин по имени Ги11гез, предназначенный для установки
значений свойств юМъь и ЬетдМ любого использующего его объекта равными юо%.
Чуть ниже для элементов Ьоау и р документа эти значения устанавливаются с по-
мощью ключевого слова @1пс1иае, используемого для вызова миксина Ги11гез.

Пример 29.6

1.	@т1х1п ГиНгез {	
2.		100%;
3.	ЪетдЪ^ :	100%;
4.	}	
5.	Ьос1у {	
6.	@1пс1ис1е	ГиНгез;
7.	}	
8.	р {	
9.	@1пс1ис1е	Ги11гез;

10.	}

Здесь можно спросить: а чем это выгоднее использования ключевого слова @ех^епа,
предназначенного для наследования значений свойств? Хороший вопрос, на кото-
рый лучше всего ответить в примере 29.7, где вдобавок ко всему передаются пара-
метры.

Пример 29.7

1.	Оттхтп	Ги11гез($м: 100%, $Ъ: 100%) {

2.	м1с1Ъ11 : $м;

3.	ЪетдЪ^ : $Н;

4.	}

5.	Ьос1у {
6.	@1пс1ис1е Ги11гез(960рх);

7.	}

8.	р {

9.	@1пс1ис1е Ги11гез;

10.	}

Теперь становится очевидной вся эффективность миксинов: в строке 1 примера 29.7
две переменные с именами и $ь (для ширины и высоты) имеют значение 100%,
затем ниже, в строках 2 и 3, значения этих переменных применяются к свойствам
ширины и высоты.

Но самое интересное происходит в строке 6, где вызывается миксин, которому пе-
редается значение 9б0рх. Теперь это значение передается миксину ГиПгез, где он
переписывает исходное заданное ему при определении значение юо%. В силу этого
теперь переменная имеет значение 9б0рх, и поэтому миксин возвращает для свой-
ства ™1с^ь значение 9б0рх, а для свойства ЬетдЬ^ возвращается исходное значение
юо% (поскольку второе значение миксину не передавалось). В строке 9 Ги11гез вы-
зывается без аргументов, и поэтому для свойств и ЬетдЬ^ возвращаются исход-
ные значения юо%.

Следовательно, общее правило гласит: @ех^епа следует использовать для наследова-
ния набора свойств от другой функции, а @1пс1иае — для вызова функции миксина с
возможной передачей аргументов и возвратом значений для их применения к свой-
ствам.

Модули Зазз

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

Прежде чем воспользоваться модулями, следует знать, что до введения модульной
системы все функции были глобально доступны в любой момент, и любые функции
по-прежнему имеют глобальные псевдонимы. Например, можно получить глобаль-
ный доступ К зазз:таЪЬ.$р1.

И все же команда 8а88 не одобряет подобное использование, поскольку планирует
отказаться от этого средства доступа в будущем. Поэтому для загрузки любых
нужных модулей рекомендуется сначала применить команду @изе:

@изе "зазз :таН1";

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

$Ьлгор1 : са1с(шаГЪ.$р! * 2);
Разобравшись с этой особенностью, давайте изучим список доступных модулей:

♦	8а88:таВ1: Набор функций для работы с числами.

♦	8а88:8<тш§: Набор функций для объединения, поиска или разбиения строк.

♦	8а88:со1ог: Набор функций для создания новых цветов на основе уже сущест-
вующих.

♦	8а88:1181: Набор функций, позволяющих получать доступ к спискам и изменять
значения в них.

♦	8а88:тар: Набор функций для поиска значений, связанных с ключом в ассоциа-
тивном массиве.

♦	8а88:8е1ес€ог: Набор функций, обеспечивающих доступ к механизму селекторов
Зазз.

♦	8а88:те€а: Набор функций, раскрывающих детали внутренней работы Зазз.

Подробное описание каждого отдельно взятого модуля и всех его функций достой-
но целой книги, поэтому сейчас настало время отослать вас к исчерпывающей до-
кументации, доступной в Зазз по следующему 1ЖЬ-адресу, где даются подробные
ответы на все возникающие у вас вопросы: Мпуиг1.сот/заззтоаи1ез

Будущие версии

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

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

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

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

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

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

Хотя этого можно и не осознавать, но в этой книге вам действительно удалось ох-
ватить весьма большой объем информации, и очень хорошо, что вы с этим справи-
лись, поскольку теперь вам известно все об установке веб-серверов и таких инст-
рументов программирования, как У18иа1 8Шбю Собе. Состоялось также полное зна-
комство с консолью разработчика, встроенной во все современные браузеры.
Удалось разобраться во всех тонкостях доступа к холсту НТМЕ5, создании на нем
надписей и рисунков, освоить обработку геолокации, расширенную обработку
форм, работу с локальным хранилищем и с другими возможностями, предостав-
ляемыми НТМЕ5, такими как аудио и видео.

Вдобавок ко всему, удалось вполне достаточно разобраться в возможностях С883,
позволяющих создавать высококачественные веб-сайты, начиная с методов созда-
ния фона, использования цвета и прозрачности, добавления текстовых и шрифто-
вых эффектов и многого другого, вплоть до добавления двумерных и даже трех-
мерных преобразований и переходов. Теперь вполне освоенными инструментами
станут самые последние улучшения, появившиеся в С883 — макеты ИехЪох и сет-
ка С88 Сгиб. И чтобы поднять разработку таблиц С88 на новый уровень, теперь вам
можно получить доступ к чрезвычайно мощному набору инструментов и функций
8а§8, повышающему скорость разработки и точность проектирования макетов.

Вот вы и овладели всеми этими инструментами и готовы применить их на практи-
ке. Большое спасибо за чтение книги. Если она помогла вам в веб-разработке и ди-
зайне, оставьте онлайн-отзыв, чтобы о книге могли узнать другие люди. А теперь
идите и создавайте фантастические вещи!
Метаданные

НАЗВАНИЕ КНИГИ: Мастер-класс по НТМЕ5 и С883

ПОДЗАГОЛОВОК: От новичка к эксперту за 29 простых шагов

ИМЯ АВТОРА: Робин Никсон (КоЫп №хоп)

КАТЕГОРИИ: Веб-разработка, Веб-дизайн, Программирование

РЕКЛАМНЫЙ СЛОГАН: Все, о чем нужно знать, чтобы стать мастером веб-
разработки

ОСНОВНЫЕ МОМЕНТЫ:

♦	Изучение или освежение в памяти основ НТМЕ и С88

♦	Освоение лучших инструментов разработки веб-дизайна

♦	Приобретение навыков создания надписей и рисунков на холстах НТМЕ5

♦	Освоение приемов использования геолокации и картографирования для улучше-
ния пользовательского восприятия

♦	Изучение способов вставки аудио- и видеоинформации в веб-страницы и при-
ложения

♦	Приобретение навыков создания усовершенствованных форм ввода информации
с простой обработкой ошибок

♦	Освоение приемов доступа к локальному хранилищу с целью создания веб-стра-
ниц с моментальным откликом

♦	Приобретение навыков создания усовершенствованных макетов с двумерными и
трехмерными преобразованиями и анимацией

♦	Изучение эффективных приемов веб-дизайна с применением С88 Опб

♦	Освоение возможностей, предоставляемых макетом Г1ехЪох

♦	Изучение порядка использования 8а§8, чтобы поднять приемы разработки С88
на следующий уровень

Описание

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

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

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

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

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

Чему вы сможете научиться

♦	Вы получите полноценное представление о текущем уровне технологий и инст-
рументов, предоставляемых как в НТМЕ5, так и в С883.

♦	Вы приобретете навыки, необходимые для создания веб-сайтов, не уступаю-
щих по своим стандартам лучшим доступным в настоящее время в Интернете
образцам.

♦	Вы овладеете приемами, всего лишь несколько лет назад считавшимися особо
трудоемкими и сложными при разработке на 1ауа8спр1, но в настоящее время
вполне доступными и готовыми к простому применению во всех современных
браузерах.

Для кого эта книга

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

♦	Глава 1: Начальные сведения о НТМГ5 и С883

♦	Глава 2: Установка веб-сервера

♦	Глава 3: У18иа1 8Шсйо Собе

♦	Глава 4: Консоль разработчика

♦	Глава 5: Введение в НТМГ5

♦	Глава 6: Использование холста в НТМЬ5

♦	Глава 7: Прямоугольники и заливки

♦	Глава 8: Надписи на холсте

♦	Глава 9: Рисование на холсте

♦	Глава 10: Работа с холстом

♦	Глава 11: Расширенные возможности работы с холстом

♦	Глава 12: Применение геолокации

♦	Глава 13: Работа с формами

♦	Глава 14: Локальное хранилище и многое другое

♦	Глава 15: Аудио и видео

♦	Глава 16: Введение в С883

♦	Глава 17: Селекторы атрибутов С883

♦	Глава 18: Создание фона

♦	Глава 19: Построение границ

♦	Глава 20: Свойства блока и текста

♦	Глава 21: Цвета и прозрачность

♦	Глава 22: Текстовые эффекты и шрифты

♦	Глава 23: Двумерные преобразования

♦	Глава 24: Трехмерная графика и анимация

♦	Глава 25: Макет ИехЪох

♦	Глава 26: С88 Опб

♦	Глава 27: Знакомство с 8а88

♦	Глава 28: Переменные и потоки выполнения в 8а88

♦	Глава 29: Расширенный 8а88
КЛЮЧЕВЫЕ СЛОВА (7):

♦	Веб-разработка

♦	НТМЬ и С88

♦	НТМЕ5 и С883

♦	Геолокация

♦	Веб-аудио и видео

♦	Холсты НТМГ5

♦	2В и ЗВ С88-преобразования

КЛЮЧЕВЫЕ СЛОВА (15):

♦	Веб-разработка

♦	НТМЬ и С88

♦	НТМГ5 и С883

♦	Геолокация

♦	Веб-аудио и видео

♦	Холсты НТМЬ5

♦	2В и ЗВ С88-преобразования

♦	Веб-дизайн

♦	Доступ к локальному хранилищу

♦	Стилевые таблицы 8১

♦	ИехЪох-макет

♦	С88 Опб

♦	Текстовые эффекты С88

♦	Работа с фоном в С88

♦	Работа с формами в С88

Биография автора

Робин Никсон — веб-разработчик и преподаватель, активно занимающийся про-
граммированием с 1980-х годов. Ранее он редактировал компьютерный журнал,
был директором нескольких компаний-разработчиков программного обеспечения, а
в последнее время стал автором ряда самых продаваемых книг о компьютерах и
компьютерных технологиях. Области интересов Робина — фронтенд-разработка с
использованием НТМЬ, С88 и 1ауа8спр1, а также управление серверной частью с
помощью РНР и Му8рЬ. Он также активный исследователь в области искусствен-

ного интеллекта.
СЛОГАНЫ И БРОСКИЕ ФРАЗЫ:

♦	Станьте мастером веб-разработки.

♦	Запустите на взлет свою карьеру веб-разработчика.

♦	Здесь все, что нужно знать о современной веб-разработке.

♦	Создавайте ошеломляющие веб-страницы и приложения.

♦	Существенно расширьте перспективы своего заработка.

♦	Станьте экспертом на ниве веб-дизайна.

♦	Превратите свой веб-дизайн в выдающийся образец творчества.
ИНТЕРНЕТ-МАГАЗИН

внш

Интернет-магазин издательства *БХВ*

Более 30 лет на российском рынке

Книги и наборы по электронике
и робототехнике по издательским ценам

КНИГИ, РОБОТЫ,
ЭЛЕКТРОНИКА

Электронные архивы книг
и компакт-дисков

* Ответы на вопросы читателей

БХВ-Электроника Ь^.ги/е1етеп18

Электронные компоненты
для мейкеров