Эффективный самоучитель по креативному Web-дизайну. 
HTML, XHTML, CSS, JavaScript, PHP, ASP, ActiveX. 
Текст, графика, звук и анимация 

Книга одного из наиболее известных «гуру» в области Wfeb-дизайна, Криса Джамса, 
Эффектив- 
ный самоучитель по креативному Web-дизайн. HTML, XHTML, CSS, JavaScript, PHP, 
ASP, ActiveX. 
Текст, графика, звук и анимация является не просто очередным учебным пособием в 
этой сложной и 
многогранной области, изобилующей множеством разнообразных технологий и приемов.
 Это настоя- 
щая «книга рецептов» для тех, кто желает быстро и эффективно получить 
минимальных набор знаний 
и навыков, дабы немедленно приступить кразработке Web-сайтов профессионального 
качества. Удачно 
подобранные примеры и их решения в реальных ситуациях, простой и точный стиль 
изложения, боль- 
шой объем работающего кода и иллюстраций — вот лишь несколько очевидных 
достоинств книги, 
выгодно отличающих ее от множества ей подобных. В ней приводятся оптимальные 
решения более чем 
300 задач, возникаю щихв повседневной практике, программирования для Web. 
Подробно рассматри- 
ваются такие вопросы, как создание динамических сайтов с использованием HTML, 
JavaScript и 
CSS-стилей, внедрение мультимедиа-элементов в Web-страницы, подготовка 
мультимедиа-содержи- 
мого, создание и использование Java-аплетов и ActiveX-объектов, написание 
серверных сценариев на 
РНР и ASP, создание баз данных для Web и многие другие. Большое внимание 
уделяется вопросам 
производительности и готовности Web-сайтов, а также методике повышения 
безопасности пользова- 
телей и защите критически важной информации. 
Книга рекомендуется, в первую очередь, тем, кто совершает первые шаги в области 
разработки для 
Wfeb, однако принесет несомненную пользу и профессионалам, за плечами которых 
имеется солидный 
опыт создания Web-приложений. 
ББК 32.973.2 
Original edition copyright © 2003 by McGraw-Hill Companies as set forth in 
copyright notice of 
Proprietor's edition. All rights reserved. 
Russian language edition copyright © 2004 by DiaSoft Publishing House. All 
rights reserved. 
Лицензия предоставлена издательством McGraw-Hill/Osborne. 
Все правазарезервированы, включая право на полное или частичное воспроизведение 
в какой бы то ни было форме. 
Материал, изложенный в данной книге, многократно проверен. Но поскольку 
вероятность технических оши- 
бок все равно остается, издательство не может гарантировать абсолютную точность 
и правильность приводимых 
сведений. В связи с этим издательство не несет ответственности за возможные 
ошибки, связанные с использова- 
нием книги. 
Все торговые знаки, упомянутые в настоящем издании, зарегистрированы. Случайное 
неправильное использо- 
вание или пропуск торгового знака или названия его законного владельца не 
должно рассматриваться как 
нарушение прав собственности. 
ISBN 5-93772-128-4 (рус.) © Перевод на русский язык. ООО «ДиаСофтЮП», 2005 
ISBN 0-07-219394-8 (англ.) © McGraw-Hill/Osborne, 2003 
© Оформление. ООО «ДиаСофтЮП», 2005 
Гигиеническое заключение №77.99.6.953.П.438.2.99 от 04.02.1999

Оглавление 
Введение 12 
Глава 1. Основы языка HTML 19 
Роль Web-браузеров и Web-страниц 21 
Контейнернье HTML-дескригтгоры 23 
HTML-дескригтторы разделов 24 
Пустые HTML-дескригтгоры 25 
Создание Web-страницы 25 
Управление форматированием текста 26 
Атрибуты в HTML ; 28 
Работа со шрифтами ; 29 
Назначение одного и того же набора атрибутов множеству элементов страницы 30 
Создание Web-страниц с помощью текстовых редакторов, текстовых процессоров 
и программ компоновки Web-страниц 30 
Работа с относительными и абсолютными адресами файлов 34 
Загрузка и установка персонального Web-сервера 35 
Работа с персональным Web-сервером и публикация Web-страниц 38 
Описание содержимого Web-страницы при помощи заголовка 42 
Идентификация Web-документов с помощью определения типа документа 44 
Вставка комментариев в Web-документы ; 45 
Определение гарнитуры шрифта текста Web-страницы 47 
Управление структурой текста с помощью дескрипторов абзаца и перевода строки 48 

Изменение размера текста с помощью дескрипторов уровней заголовков и атрибута 
size дескриптора шрифта 52 
Изменение цвета текста в HTML-документе 53 
Добавление графики в Web-страницу с помощью базового дескриптора <img> , 55 
Изменение выравнивания текста и графики 57 
Добавление гипертекстовых ссылок 59 
Выделение отдельных букв и слов с помощью дескрипторов форматирования символов 
61 
Использование специальных символов в HTML-документах ,63 
Использование горизонтальных линий для структурирования Web-содержимого 64 
Использование дескрипторов блоков цитирования для управления левым и правым 
отступами текста 66 
Создание упорядоченных и неупорядоченных списков 68 
Создание вложенных списков , 70 
Создание списков определений 71 
Использование дескрипторов предварительно форматированного текста для 
управления 
отображением Web-содержимого 72 
Отображение навигационного меню в фрейме Web-страницы 73 
Одновременный вывод на экран нескольких Web-страниц ' 76 
Глава 2. HTML-таблицы 79 
Понимание HTML-дескрипторов, используемых для создания таблиц 83 
Создание таблиц с ячейками, объединяющими несколько столбцов и несколько строк 
89 
Работа с шириной границы таблиц и ячеек 91 
Работа с цветами границ таблицы и ячеек 93 
Работа с фоновыми изображениями и цветами 95 
Определение значения цветового атрибута 98 
Работа с полями ячеек и расстоянием между ячейками таблицы 100 
Задание размеров таблицы с помощью относительных и абсолютных значений 101 
Задание размеров ячеек с помощью относительных и абсолютных величин 102 
Выравнивание содержимого ячейки по горизонтали и по вертикали 104 
Выравнивание таблицы на Web-странице 105

Оглавление 
Управление шириной и высотой ячейки с помощью вставки прозрачного 
GIF-изображения 107 
Обтекание текстом изображения 109 
Отображение с помощью таблицы галереи миниатюр 110 
Создание маркеров и списков с помощью таблиц и графики 112 
Создание бокового навигационного меню с помощью таблицы 114 
Добавление графики и ссылок в ячейки таблицы 115 
Управление границами на Web-странице с помощью вложенных таблиц 116 
Составление навигационной карты путем помещения фрагментов изображения в 
таблицу 117 
Разрезание графического изображения на фрагменты для вставки в ячейки таблицы с 
целью создания 
быстрозагружаемой Web-графики 118 
Снижение времени, затрачиваемого Web-браузером на рисование таблицы 120 
Имитация фреймовой Web-страницы с помощью таблицы 121 
Привлечение внимания посетителя с помощью цвета фона ячеек 123 
Визуальное выравнивание содержимого Web-страницы с помощью видимых границ 
таблицы 124 
Управление расстоянием между колонками и шириной полей текста на Web-странице 
126 
Глава 3. HTML-формы 128 
Обработка HTML-форм 130 
Дескрипторы и атрибуты, используемые для создания форм 132 
Создание на форме однострочного поля ввода 135 
Создание на форме многострочного поля ввода 136 
Проверка данных текстового элемента перед передачей результатов заполнения 
формы 138 
Создание на форме флажков -. 140 
Создание на форме переключателей 142 
Проверка выбора группы переключателей перед передачей результатов формы 143 
Создание на форме выпадающего списка (меню выбора) 146 
Проверка выбора элемента списка перед передачей результатов формы 148 
Изменение элементов списка выбора на основании введенных посетителем д а н н ы 
х . . . 1 5 0 
Передача всех значений списка выбора на Web-сервер с использованием скрытых 
полей 152 
Создание на форме кнопки Reset 153 
Предотвращение случайной очистки посетителем элементов формы 155 
Создание на форме кнопки Submit 156 
Замена стандартных кнопок Submit и Reset другими графическими изображениями 157 

Отправка результатов формы по электронной почте без использования Щ l-сценария 
159 
Управление расположением элементов и текста формы с помощью HTML-таблиц, 161 
Создание клавиши быстрой навигации по форме с помощью дескриптора <label> 163 
Указание Web-браузеру выполнять функцию проверки данных формы с помощью 
атрибута onClick 165 
Передача значений Wfeb-серверу с помощью скрытых полей 166 
Сокрытие ввода пользователя от просмотра в поле ввода пароля 167 
Вставка на форму кнопки общего типа 168 
Блокирование и разблокирование элементов формы • лету" 169 
Глава 4. Каскадные списки стилей 172 
Разделение содержимого и внешнего вида 175 
Создание списка стилей 176 
Добавление на \Afeb-страницу каскадного списка стилей 180 
Выбор типа шрифта с помощью свойства font-family. 188 
Задание размера текста с помощью свойства font-size 189 
Создание перекрывающегося текста ; 192 
Выравнивание текста на Шэ-странице 194 
Установка полей и высоты строк 196 
Вывод текста в колонках 198 
Работа с границами 201 
Создание абзацного отступа и работа с интервалами между буквами, словами и 
строками 203

Оглавление 
Использование в тексте начальных заглавных букв 205 
Настройка внешнего вида гиперссылок 207 
Создание эффекта отбрасывания тени 209 
Использование графических границ 210 
Расположение фоновых изображений и "водяных знаков" 212 
Плавающие изображения и текст. 215 
Настройка внешнего вида списков 217 
Создание эффектов текста и изображений с помощью фильтров '. 219 
Выравнивание надписей с элементами формы и добавление цветов в форму. 222 
Вывод на странице галереи миниатюр с заголовками 224 
Управление курсором 227 
Расположение элементов Web-страницы по слоям 229 
Передача списка стилей через функцию проверки 231 
Глава 5. XHTML и новые тенденции 234 
Требования ксозданиюкорректныхХНТМЬдокументов 236 
Что еще нужно знать о XHTML? 245 
Преобразование HTMLBXHTMLC помощью HTMLTidy 249 
Выбор правильного значения йОСТУРЕдля Web-страницы 253 
Проверка Web-страницы с помощью функции проверки XHTML 255 
Установка размера текста на XHTML-странице с помощью ключевых слов 259 
Группировка элементов списка выбора XHTML-формы с помощью дескриптора 
<optgroup> 261 
Добавлеия цветов в XHTML-таблицы с помощью правил каскадных списков стилей 263 
Внедрение шрифтов на XHTML-страницу с помощью правил каскадных списков стилей 
265 
Вставка одной XHTML-страницы в другую с помощью внутритекстового фрейма 268 
Одновременное обновление нескольких внутритекстовых фреймов XHTML-страницы 271 
Изменение внешнего вида XHTML-страницы на основе типа целевой системы 274 
Управление печатью XHTML-страницы Web-браузером , 278 
Глава 6. Графика 281 
Понимание роли графики в Web-дизайне 282 
• Создание Web-графики 283 
Понимание форматов файлов изображений 284 
Помещение Web-графики на Web-страницу 286 
Учет скорости доступа в Internet 287 
Соблюдение авторских прав при работе cWeb-графикой 288 
Достижение баланса между текстом и графикой на Web-странице 289 
Вопросы межплатформенной совместимости при создании графических изображений для 
Web-страниц 292 
Задание размеров изображения вдескрипторе <img> 294 
Работа с атрибутом alt и браузерами, не воспроизводящими графику. 296 
Создание всплывающей подсказки с помощью атрибута title в дескрипторе <img> 299 

Сжатие фотографий в JPEG-файл 301 
Сохранение аппликаций и текста в файл формата GIF. 304 
Создание видимости быстрой загрузки рисунков 307 
Работа с форматами файлов PNG-8 и PNG-24 308 
Преобразование графики в Web-изображения с помощью программ редактирования 
изображений 310 
Создание Web-совместимых графических изображений на сканере 311 
Создание цветных горизонтальных линий : 314 
Извлечение быстро загружающегося изображения-"наживки" с помощью атрибута 
lowsrc 315 
Обеспечение правильного представления цветов с помощью Web-безопасной цветовой 
палитры 318 
Создание графических гиперссылок 319 
Создание мозаичного фона из графических изображений 321 
Создание прозрачности в GIF-изображениях 324 
Извлечение полноразмерного изображения после щелчка на пиктограмме 326

Оглавление 
Предварительная загрузка и "фоновое" кэширование изображений 328 
Расширение Web-безопасной цветовой палитры с помощью техники растрирования 331 
Сглаживание краев текста, преобразованного в графический элемент, 
за счет устранения контурных неровностей 333 
Глава 7. Анимация, звук и видео .- 336 
Понимание роли анимации в Web-дизайне 338 
Понятие подключаемого программного модуля '. 338 
Понятие динамического HTML (DHTML) 339 
Работа с GIF-анимацией 341 
Работа с Macromedia Flash 343 
Использование Shockwave 345 
Когда использовать и когда не использовать анимацию 346 
Работа со звуком в Internet 347 
Встраивание видео на Web-страницу • 350 . 
Монтаж видеоролика ' 351 
Использование виртуальных экскурсий 1 354 
Создание GIF-анимации с чистого листа 356 
Управление GIF-анимацией с помощью внутренних параметров 358 
Создание баннера с помощью GIF-анимации 360 
Создание плавных переходов между кадрами GIF-анимации с помощью построения 
промежуточных изображений 363 
Включение в Web-сайт готовой Flash-заставки 365 
Создание Rash-фильма с чистого листа ; 368 
Построение анимации на основе текста с помощью FlaX 371 
Передача потокового аудио и видео 372 
Создание потокового медиа 374 
Создание страницы с Web-камерой 375 
Встраивание видео и аудио в страницу с помощью SMIL 377 
Глава 8. JavaScript 381 
Вставка операторов JavaScript в HTML-код Web-страницы 383 
Сокрытие сценариев от браузеров, не поддерживающих JavaScript 384 
Понятие функций JavaScript 385 
Передача значений в функцию и из функции 387 
Зарезервированные слова JavaScript 388 
Пояснение выполняемой сценарием обработки с помощью комментариев 388 
Объявление переменных в сценарии или функции 389 
Понятие операций JavaScript 390 
Условная и повторяющаяся обработка , 392 
Вставка функций JavaScript в HTML-код Web-страницы 393 
Отображение документа в устаревших браузерах, не поддерживающих сценарии 393 
Хранение множественных значений в одной переменной с помощью массивов 
JavaScript 394 
Принятие сценарием решений и выполнение соответствующей обработки 395 
Принятие решений на основании двух или более условий 397 
Выполнение кода, когда условие не истинно 398 
Повторение операторов определенное число раз 399 
Повторение операторов, пока условие истинно ". 400 
Реагирование на события JavaScript 401 
Выполнение операторов JavaScript в теле Web-страницы ; 403 
Вызов определенной пользователем функции JavaScript 405 
Вызов JavaScript-функции в обработчике события 407 
Что такое обработчики событий JavaScript , 409 
Создание интерактивной навигационной панели с эффектом смены изображения при 
наведении курсора .411

Оглавление 
Использование массивов объектной модели 414 
Обращение к объектам Web-страницы по имени (а не по позиции в массиве) 416 
Использование содержимого объекта документа 417 
Использование массива изображений JavaScript 420 
Использование массива ссылок JavaScript 423 
Изменение цветов Web-страницы с помощью JavaScript , 425 
Сохранение cookie-набора на жестком диске посетителя .427 
Форматирование данных cookie-набора с помощью JavaScript 429 
Извлечение значения cookie-набора из cookie-файла 430 
Удаление cookie-набора из cookie-файла 432 
Экономия времени и усилий с помощью готовых (внешних) сценариев 434 
Создание анимации с помощью события on Load 435 
Отображение самоизменяющихся баннеров с помощью JavaScript 436 
Направление гиперссылок на новые файлы "на лету" ; 438 
Предварительное кэширование файлов для уменьшения времени отображения 
изображений 440 
Создание бегущей строки с помощью JavaScript 442 
Глава 9. Java-аплеты и объекты ActiveX 444 
Как браузер выполняет Java-аплет 446 
Почему выполнение Java-аплетов безопасно 448 
Как браузер выполняет объект ActiveX 449 
Помещение Java-аплета на Web-страницу. ; 451 
Внедрение в Web-страницу объекта ActiveX 458 
Настройка параметров безопасности Java и ActiveX 463 
Создание всплывающего навигационного меню с помощью аплета 464 
Анимация строки текста с помощью аплета 467 
Отображение и печать календаря на любой год с помощью аплета 468 
Отображение с помощью аплета отрывка, случайным образом выбранного из 
текстового файла 469 
Создание с помощью аплета навигационного меню, выполняющегося в отдельном окне 
471 
Прокручивание содержимого файла по вертикали в прямоугольной области на экране 
с помощью аплета 474 
Анимация синусоидальных колебаний изображения с помощью аплета 477 
Редактирование исходного Java-кода для компиляции пользовательского аплета 479 
Добавление в Web-страницу Internet-чата с помощью элемента управления ActiveX 
Microsoft Chat 484 
Использование только объектов ActiveX в internet Explorer 487 
Глава 10. РНР4 490 
История PHP 493 
Загрузка и установка РНР 494 
Начальный и конечный дескрипторы РНР 496 
Синтаксис РНР '. 498 
Переменные 500 
Операции 502 
Условная и циклическая обработка 503 
Передача данных HTML-формы PHP-сценарию. 510 
Использование РНР для обработки и извлечения результатов формы 514 
Использование РНР для отправки сообщения по электронной почте 518 
Определение, принимает ли Web-браузер посетителя cookie-наборы 520 
Использование РНР и дискового файла для организации парольного доступа 
кWeb-сайту 522 
Предотвращение перехода посетителей по ссылкам на сайт. 525 
Использование PHP-сеанса для установки постоянного соединения между посетителем 
и Web-сервером 526 
Создание базы данных MySQL и таблиц 528 
Вывод на Web-странице результатов запроса B6a3yflaHHbixSQLB HTML-таблице 531 
Использование РНР для генерации случайного пароля 533 
Использование РНР и MySQL для организации парольного доступа KWeb-сайту. 535

Оглавление 
Исключение возможности изменения посетителями значений переменных с помощью U R 
L - а р г у м е н т о в : 5 3 8 
Использование РНР и МувСХдля отслеживания положения посетителя наWeb-сайте 539 
Определение IP-адреса посетителя для запросов Web-страницы, переданных через 
прокси-сервер 541 
Предотвращение принятия одним посетителем PHP-идентификатора сеанса другого 
посетителя 543 
Использование функций РНР для создания шаблонов Web-страниц 544 
Использование РНР для внедрения на страницу функциональности выгрузки файла 546 

Глава 11. Активные серверные страницы (ASP) 549 
Что нужно, чтобы создавать и просматривать ASP-страницы 552 
Начальный и конечный дескрипторы ASP 553 
Сокрытие исходного ASP-кода от посетителя Web-сайта 555 
Объекты ASP 557 
Предотвращение вывода браузером устаревших ASP-страниц 558 
Перенаправление Web-браузера на другую страницу 570 
Хранение значений переменных между HTTP-запросами в cookie-наборах 572 
Получение данных из формы с помощью коллекции Form • 575 
Получение данных из формы с помощью коллекции QueryString 578 
Получение информации из коллекции ServerVariables 581 
Использование драйвера МуООВСдля работы с СУБД MySQL 583 
Организация доступа KWeb-сайту по имени пользователя и паролю 586 
Запуск сеанса и работа с переменными сеанса 590 
Выполнение запросов SQL и отображение результатов запроса в HTML-таблице 593 
Отображение рекламных баннеров с помощью Microsoft Banner AcLRotator 597 
Отслеживание показов и посещений в Microsoft Banner Ad Rotator 600 
Обработка ошибоктипа "Код 404: файл не найден" 604 
Глава 12. Безопасность и производительность 609 
Угроза атак со стороны хакеров 610 
Каким образом хакеры перехватывают и изменяют сообщения в сети? 610 
Каким образом хакеры попадают в систему? 614 
Каким образом хакеры блокируют доступ к вашей системе? 617 
Каким образом хакеры атакуют CGI-сценарии? 617 
Каким образом брандмауэры защищают ваш сайт? 619 
Каким образом шифрование защищает передаваемые по сети сообщения? 620 
Загрузкамустановка открытого ключа, цифровой подписи и идентификатора сервера 
623 
Создание защищенной Web-страницы на IIS-сервере 624 
Установка программного брандмауэра 626 
Настройка назначения портов в брандмауэре 628 
Снижение подверженности сайта вирусам 629 
Повышение производительности и уровня безопасности за счет блокировки принтера 
и запрещения совместного использования файлов 633 
Использование клиентских сертификатов для ограничения доступа пользователей 634 

Анализ системных событий для обнаружения вторжений 636 
Использование файловой системы NTFS 639 
Отключение удаленных служб 643 
Анализ уязвимых мест системы 646 
Обработка данных кредитных карточек 646 
Исследование цепочки производительности Web-сайта 648 
Тип сетевого соединения 650 
Скорость работы процессора т. 651 
Создание набора Web-серверов ' 653 
Контроль быстродействия сервера 654 
Предметный указатель 658

Об авторах 
Конрад Кинг (Konrad King) — известный автор множества книг и консультант 
по компьютерным системам, имеющий широкую клиентуру. В прошлом офицер 
военно-воздушных сил Соединенных Штатов, Конрад имел дело как с мейн- 
фреймами, так и со множеством разнообразных сетей на базе ШМ PC. Он пи- 
сал, как самостоятельно, так и в соавторстве со многими известными людьми, 
изрядное число книг, посвященных проектированию и реализации баз данных 
на основе SQL, проектированию Web-приложений, а также программному обес- 
печению Microsoft Office, в том числе FrontPage и PowerPoint. В свободное от 
писательской деятельности время Конрад занимается проектированием, разра- 
боткой и сопровождением Web-сайтов, установкой и поддержкой корпоративных 
сетей и промышленного программного обеспечения, а также разработкой при- 
кладных приложений на Visual C+ + , Visual Basic, DataFlex для множества плат- 
форм баз данных, основанных на SQL. Работая в области компьютерной инжене- 
рии с 1984 года, Конрад обладает обширными знаниями о том, что работает в 
реальной действительности, а что нет. 
Энди Андерсон (Andy Anderson) - художник и дизайнер, который использует 
Photoshop, Illustrator и множество других известных графических пакетов, приме- 

няемых в Web-дизайне. Энди является автором многих трудов в области Web-ди- 
зайна, а также университетским профессором и популярным лектором в Соеди- 
ненных Штатах, Канаде и Западной Европе. В свободное от работы время он 
разрабатывает учебные планы и лекционные материалы для многих корпораций 
и семинаров. Среди клиентов Энди дизайнеры и преподаватели из правитель- 
ственных учреждений США, корпорации Боинг, Диснейленда и множества ком- 
паний из списка Fortune 500. 
Крис Джамса (Kris Jamsa) — популярный автор более чем 90 книг по компью- 
терной инженерии, объем продаж которых значительно превысил один миллион 
копий. Крис получил степень бакалавра компьютерных наук в Академии военно- 
воздушных сил США, степень магистра компьютерных наук в Университете Не- 
вады (Лас-Вегас), степень доктора компьютерных наук в области операционных 
систем в Университете штата Аризона, а также степень магистра бизнес-админи- 
стрирования в Университете штата Сан-Диего. В 1992 году он вместе со своей 
женой основал издательство Jamsa Press, специализирующееся на выпуске лите- 
ратуры компьютерной тематики. После того, как издательство Jamsa Press раз- 
рослось до представительств в 70 странах и до выпуска литературы на 28 языках, 
оно было приобретено одной из крупнейших издательских компаний. В настоя- 
щее время Крис является основателем компании Jamsa Media Group, которая за- 
нимается выпуском высококачественных книг компьютерной тематики. Он также 
является активным аналитиком новых технологий. Крис обитает на своем ранчо 
в Хьюстоне, штат Техас, со своей супругой, тремя собаками и шестью лошадьми. 
В свободное от работы за компьютером время, он занимается верховой ездой на 
одной из своих лошадей по кличке Робин Гуд.

12 Введение 
Введение 
В настоящее время, в соответствии с оценками аналитиков, в Internet исполь- 
зуется более 100 миллионов доменных имен (статистику по Internet можно найти 
по адресу http://www.nua.com/surveys). При всеобщей доступности быстрых 
подключений через цифровые абонентские линии и физические модемы и недо- 
рогом Web-хостинге, предлагаемом многими компаниями, десятки миллионов 
пользователей создают свои персональные Web-сайты. К тому же сейчас, когда 
число онлайновых пользователей оценивается более чем в 500 миллионов чело- 
век (причем это число растет со скоростью приблизительно 7% в месяц), Web- 
разработчикам приходится искать пути использования новых технологий, кото- 
рые могли бы оказать содействие в привлечении и удержании внимания 
пользователей, путешествующих по безбрежным просторам Web. 
Читая главы этой книги, вы узнаете о Web-технологиях и о том, как сразу же 
применить их на своих Web-страницах. В каждой главе описывается, как можно 
быстро индескрипторрировать ту или иную технологию, такую как динамическое 
содержимое, безопасность, доступ к базам данных, а также обработку на стороне 
клиента и на стороне сервера. Сначала вы познакомитесь с принципами техно- 
логии и узнаете, как лучше всего применить ее при разработке собственных Web- 
страниц. Затем вы сможете воспользоваться готовыми решениями, которые мож- 
но просто копировать и вставлять в код своих Web-страниц. И, наконец, вы 
рассмотрите скрытые настройки и технологии, с помощью которых появится 
возможность раскрыть весь потенциал Web-сайта. 
Если ваша цель — создание быстрого, современного, запоминающегося Web- 
сайта, то эта книга поможет вам достичь ее. 
Для кого предназначена эта книга 
Миллионы пользователей и профессиональных Web-разработчиков во Всемир- 
ной Паутине каждый день имеют дело с Web-страницами. Чтобы упростить свою 
работу, многие Web-разработчики полагаются на помощь многочисленных про- 
граммных средств Web-разработки. К сожалению, для того, чтобы использовать 
новые Web-технологии в полном объеме и поддерживать на должном уровне про- 
изводительность Web-сайта, на определенном этапе разработчикам приходится 
закатывать рукава и углубляться в HTML-дескрипторы, атрибуты, правила кас- 
кадных таблиц стилей, язык JavaScript, активные серверные страницы, РНР и 
многое другое. 
Несмотря на огромное количество сайтов в Web, очень сложно будет найти 
Web-разработчика, которому не хотелось бы, чтобы его сайт был быстрее, безо- 
паснее и проще в обслуживании. Кроме того, пользователи, которые посещают 
сайты, желают не только развлечений и актуального содержимого, но также хо- 
тят, чтобы это содержимое быстро загружалось. Большинство пользователей 
предполагают, что сайты, преподносящие себя как безопасные, в действительно- 
сти таковыми являются. Вне зависимости от содержимого, которое вы размести- 
те на Web-сайте, пользователи ожидают качества, скорости и безопасности.

Введение 13 
В этой книге рассматриваются сотни способов, с помощью которых Web-раз- 
работчики смогут повысить производительность своих сайтов, их безопасность и 
качество содержимого, а также упростить их обслуживание. Для того чтобы вы- 
полнять действия, описываемые в этой книге, вам не нужно быть опытным про- 
граммистом или сетевым администратором. Каждый практикум содержит про- 
стые в выполнении пошаговые инструкции, а также решения, которые вы можете 
копировать и вставлять в свои Web-страницы. В главах этой книги вы найдете: 
• Основы языка HTML, которые вам необходимо знать, чтобы создать свой 
первый Web-сайт, и действия, которые вам необходимо будет предпринять, 
чтобы разместить этот сайт в Web. 
• Как с помощью HTML-таблиц организовывать информацию, представлен- 
ную на Web-странице, и упорядочивать текст и графику. 
• Как использовать каскадные таблицы стилей (Cascading Style Sheets), чтобы 
в полной мере управлять форматированием текста внутри Web-страницы и 
упростить ее обновления в будущем. 
• Основные отличия XHTML от HTML, новые возможности XHTML, кото- 
рые можно использовать в коде своих Web-страниц, а также способы "пере- 
вода" своих HTML-страниц на XHTML. 
• Приемы, которые позволят вам эффективнее использовать графику в своих 
Web-страницах и в то же время снизить длительность ожидания загрузки 
изображений. 
• Как создавать динамическое содержимое Web-страницы с помощью РНР и 
активных серверных страниц (Active Server Pages). 
• "Закулисные" операции, путем выполнения которых вы сможете с помо- 
щью параметров HTTP и CGI автоматизировать решения, используя тип 
браузера пользователя, скорость подключения и не только. 
• Методика защиты своего компьютера от хакеров и способы идентифика- 
ции потенциальных слабых мест в защите компьютера, которыми могут 
воспользоваться злоумышленники. 
• Технологии индескрипторрации решений электронной коммерции и обра- 
ботки кредитных карточек в собственном Web-сайте. 
• Многое другое. 
Что необходимо, чтобы пользоваться 
описываемыми приемами 
В этой книге описывается множество способов, с помощью которых вы може- 
те повысить производительность своего Web-сайта, сделать его безопаснее и про- 
ще в обслуживании, а его содержимое — качественнее. В каждой главе вы найде- 
те действия, которые сможете сразу же предпринять на своем Web-сайте. 
Чтобы использовать описанные нами приемы, вам не потребуется какое-то 
сверхмощное программное обеспечение или другие средства создания графики 
художественного качества. Вам просто нужно будет потратить пять-десять минут

14 Введение 
на выполнение пошаговых инструкций практикума. Практикумы помогут вам 
выгрузить из Web (причем совершенно бесплатно) все инструменты, которые вам 
понадобятся. 
Для профессиональных Web-разработчиков и программистов в этой книге рас- 
смотрены методы использования сценариев для доступа ко многим низкоуровне- 
вым операциям. Каждый язык программирования, рассмотренный в этой книге, 
встроен в браузеры, серверы или может быть без особых сложностей выгружен из 
Web. Если вам не приходилось программировать на этих языках, не беспокой- 
тесь: во вводной части каждой из глав изложены азы, необходимые для исполь- 
зования языка. 
Что охватывает эта книга 
Эта книга включает в себя двенадцать глав. В каждой главе описывается от- 
дельная Web-технология, язык программирования или дизайнерский прием. В 
каждой главе вы найдете всестороннее рассмотрение технологии или языка; да- 
лее следуют практикумы, выполнив которые, вы сможете быстро усовершенство- 
вать свои Web-страницы, равно как и улучшить дизайн и повысить производи- 
тельность Web-сайта в целом. 
Глава 1. Основы языка HTML. Для начала, эта глава закладывает фундамент, 
необходимый дизайнерам-новичкам в Web-разработке для использования при- 
емов, которым они будут учиться на протяжении всех остальных глав книги. Ди- 
зайнеры узнают, как создавать HTML-страницы, как отображать страницы из 
файлов, находящихся на их собственных компьютерах и как с помощью Web-сер- 
вера сделать эти страницы доступными для посетителей в Web. 
Глава 2. HTML-таблицы. Внутри Web-страниц HTML-таблицы служат для ди- 
зайнеров мощным средством организации больших объемов данных с целью их 
представления на экране. Многие Web-дизайнеры также используют таблицы, 
чтобы лучше управлять выравниванием текста и графики на странице. Дизайнер 
может, например, использовать таблицы для обтекания изображения текстом. 
Кроме того, на Web-странице может присутствовать таблица пиктограмм, из ко- 
торой пользователи смогут выбирать картинки, соответствующие которым боль- 
шие изображения им хотелось бы выгрузить. 
Глава 3. HTML-формы. Миллионы Web-сайтов взаимодействуют с посетителя- 
ми с помощью форм. Формы могут запрашивать у посетителя разнообразнейшую 
информацию, например, адрес доставки, личные данные или номера кредитных 
карт для совершения покупок. Кроме того, формы дают пользователям возмож- 
ность поиска конкретных товаров, услуг или содержимого на сайте, а, возможно, 
и где угодно в Web. Формы разработчики создают с помощью HTML-дескрипто- 
ров. После отправки пользователем введенной им информации, Web-сервер вы- 
полняет специальную программу (разработчики называют ее сценарием (script)), 
которая обрабатывает и, как правило, сохраняет данные. Из этой4 главы вы узнае- 

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

Введение 15 
Глава 4. Каскадные списки стилей. Внутри Web-страниц разработчики исполь- 
зуют множество HTML-дескрипторов для форматирования текста, графики и 
ссылок. Используя одни лишь HTML-дескрипторы, такие как <ь> для выделения 
полужирным, <i> для выделения курсивом и т.д., Web-разработчик может фор- 
матировать текст Web-страницы в соответствии со своими пожеланиями. К сожа- 
лению, если форматирование впоследствии нужно будет изменить, разработчику 
придется изменять значительное количество дескрипторов. Каскадные списки 
стилей (Cascading Style Sheets) облегчают обслуживание Web-сайтов. С помощью 
каскадных списков стилей Web-разработчики могут присваивать шрифт, цвет, вы- 
равнивание и многие другие атрибуты тексту, отображаемому на Web-странице. 
Если впоследствии разработчику понадобится изменить внешний вид страницы, 
он сможет просто изменить определение стиля, и изменения немедленно отра- 
зятся в тексте, к которому применен данный стиль. Кроме того, Web-дизайне- 
рам, стремящимся к созданию высококлассных сайтов, каскадные списки стилей 
дадут возможность реализовать точное позиционирование и даже наложение тек- 
ста и графики для создания многочисленных эффектов. 
Глава 5. XHTML и новые тенденции. Чтобы быть уверенными в том, что ваши 
Web-страницы будут работать и выглядеть именно так, как вы того хотите, в 
Web-браузерах следующего поколения, вы должны следовать рекомендациям кон- 
сорциума W3C (World Wide Web Consortium). При тщательном соблюдении, 
"правила" стандарта XHTML не позволят вам создать страницы с неправильным 
синтаксисом, недостающими или "фирменными" дескрипторами и недействи- 
тельными атрибутами. Избегая такого "плохого кода", вы обеспечите своим Web- 
страницам корректное представление и работоспособность во всех стандартных 
Web-браузерах. Более того, обеспечив корректность описания Web-страницы (то 
есть соответствие ее стандарту XHTML), вы дадите производителям Web-браузе- 
ров возможность обойтись без кода, разработанного, чтобы "угадывать" замыслы, 
стоящие за неправильно сформированным HTML-кодом. Браузеры, разработан- 
ные для мобильных устройств (сотовых телефонов, карманных органайзеров, бор- 
товых компьютеров для автомобилей и т.д.) должны быть небольшими, посколь- 
ку емкость памяти подобных устройств весьма ограничена. В этой главе 
показано, как запускать приложение HTML Tidy, которое проверяет HTML-код 
вашей Web-страницы, исправляет ошибки, если таковые имеются, и преобразо- 
вывает HTML-код в XHTML-код. Далее в главе вы найдете практикумы, которые 
покажут, как расширить возможности языка разметки путем добавления новых 
дескрипторов и атрибутов, а также практикумы, которые научат вас определять 
тип браузера пользователя, чтобы ваши страницы отображались быстро и пра- 
вильно в браузерах мобильных устройств. 
Глава 6. Графика. На Web-страницах широко используется графика. К сожале- 
нию, многие сайты, предлагающие великолепные иллюстрации, теряют нетерпе- 
ливых посетителей, которые не желают сидеть и ждать в течение длительного 
времени, необходимого для загрузки изображений. В этой главе вы узнаете о 
приемах, таких как кэширование и предварительная загрузка, которые сможете 
использовать в своем коде, а также настройках, с помощью которых появляется

16 Введение 
возможность существенно сократить время загрузки изображений. Кроме того, 
вы узнаете о различных форматах файлов, а также в каких случаях следует ис- 
пользовать тот или иной формат. Кроме того, в главе рассматриваются цветовые 
палитры и методы, которые помогут вам сделать свое содержимое "Web-друже- 
ственным". Наконец, профессионалы в графике узнают о способах, которые уп- 
рощают перенос изображений в Web. 
Глава 7. Анимация, звук и видео. При доступности высокоскоростных подклю- 
чений через модемы для физических линий либо цифровые абонентские линии, 
на многих Web-сайтах для привлечения внимания пользователей используется 
анимация, фоновая музыка и видео. В этой главе вы узнаете, как встраивать в 
свои страницы разнообразную анимацию — от простой анимированной графики 
до профессиональных Flash-анимаций. Кроме того, вы узнаете, как проигрывать 
фоновую музыку во время просмотра ваших страниц посетителями, и как предо- 
ставлять по требованию потоковое видеосодержимое. Наконец, вы узнаете, как 
вести радиовещание (точно так же, как это делают Web-радиостанции) со своего 
Web-сайта. 
Глава 8. JavaScript. JavaScript — это язык программирования, с помощью кото- 
рого Web-дизайнеры могут автоматизировать задачи внутри Web-страницы. Web- 
разработчики помещают операторы JavaScript в HTML-дескрипторы, определяю- 
щие страницу. Операторы JavaScript могут, например, проверять информацию, 
введенную пользователем в форму. (Программа или сценарий могут обеспечивать 
проверку наличия в каждом поле значения, равно как и корректность и содержа- 
тельность значений.) Или же операторы JavaScript могут обеспечивать определен- 
ную обработку в процессе выполнения пользователем операций на странице. На- 
пример, с помощью JavaScript можно выводить на экран окно сообщения, 
содержащее текст помощи, когда посетитель щелкает на гиперссылке "Справка". 
Подобно тому, как браузер отображает содержимое HTML-страницы, он выпол- 
няет и операторы JavaScript. В этой главе вы сначала узнаете, как создавать 
про- 
стые JavaScript-приложения. Затем вы рассмотрите ряд решений, написанных на 
JavaScript, которые сможете скопировать и вставить в свои Web-страницы. 
Глава 9. Java-аплеты и ActiveX-объекты. На протяжении нескольких лет про- 
граммисты использовали язык программирования Java для создания аплетов, ко- 
торые могут выполняться на разнообразных платформах; это значит, что один и 
тот же Java-аплет может работать на компьютерах под управлением операцион- 
ных систем Windows, Linux и Macintosh. Java-аплеты дают программистам воз- 
можность автоматизировать решение тех или иных задач без риска инфицирова- 
ния вирусами компьютеров пользователей, загружающих аплеты. В Web можно 
найти бесчисленное количество "типовых" Java-аплетов, которые можно исполь- 
зовать в коде своих страниц. Из этой главы вы узнаете, как встраивать 
Java-апле- 
ты в HTML-содержимое. Далее в главе рассматривается обеспечение поддержки 
ActiveX-объектов для сайтов, функционирующих на Windows-платформах. В от- 
личие от Java-аплетов, которые не создают угроз безопасности для загружающих 
ИХ пользователей, ActiveX-объекты не накладывают ограничений на операции, 
Которые может выполнять код. Следовательно, вы должны отдавать предпочте-

Введение 17 
ние тем ActiveX-объектам, которые получены с сайтов разработчиков с хорошей 
репутацией и содержат сертификаты подлинности. В главе 9 подробно описаны 
предосторожности, которые следует соблюдать. 
Глава 10. РНР4. РНР — это язык программирования, с помощью которого 
разработчики создают динамическое (изменяющееся) содержимое Web-страниц. 
Используя РНР, например, вы можете персонализировать содержимое своей Web- 
страницы, основываясь на информации, введенной пользователем в форму, или, 
возможно, на информации, полученной из cookie-набора, ранее сохраненного 
вашим сайтом на диске пользователя. Более 1 000 000 сайтов в Web используют 
РНР для достижения целей динамизма. Прежде чем вы сможете пользоваться 
РНР, вам необходимо установить на своем компьютере PHP-процессор. В этой 
главе описываются этапы процедуры установки. Затем вы научитесь создавать 
простые приложения на основе РНР Как уже упоминалось, РНР - это язык 
программирования, и вводная часть главы закладывает фундамент, необходимый 
для создания, тестирования и отладки PHP-программ. Далее в практикумах бу- 
дет представлено несколько основанных на РНР решений, которыми вы сразу же 
сможете воспользоваться в коде своих Web-страниц. 
Глава 11. Активные серверные страницы. Подобно РНР, активные серверные 
страницы (Active Server Pages — ASP) дают Web-разработчикам возможность со- 
здавать содержимое "на лету". Для создания активной серверной страницы (ди- 
намической Web-страницы) вы можете использовать множество языков програм- 
мирования, в том числе VBScript, JScript (версия JavaScript компании Microsoft),
 
PerlScript, Python, Rexx и многие другие. Эта глава закладывает фундамент, 
осно- 
вываясь на котором, вы сможете разрабатывать свои собственные решения, бази- 
рующиеся на активных серверных страницах. Кроме того, в этой главе содержат- 
ся решения для удовлетворения ряда распространенных потребностей 
Web-страниц, таких, как создание и обработка cookie-наборов, обработка форм, 
взаимодействие с базами данных, управление доступом к сайту с помощью имен 
пользователей и паролей, отображение и отслеживание баннеров и т.д. 
Глава 12. Безопасность и производительность. В этом году хакеры и компью- 
терные вирусы обойдутся пользователям и предприятиям в более чем 12 милли- 
ардов долларов! В этой главе вы узнаете, какие меры вы должны немедленно 
принять, дабы более-менее надежно защитить свой сайт. Если вы в настоящее 
время не пользуетесь брандмауэром для защиты своего сайта (или просто своего 
компьютера), вы узнаете, как выгрузить, установить и сконфигурировать сайт. Вы 
также узнаете, как ваш выбор файловой системы (программного обеспечения, с 
помощью которого операционная система сохраняет файлы) может повлиять на 
вашу способность защитить файлы (с помощью механизма разрешений и шиф- 
рования). Кроме того, эта глава описывает действия, которые вы должны пред- 
принять для создания безопасных передач (осуществляющих обмен пакетами "за 
кулисами" с использованием шифрования), и рассказывает, как выполнять тран- 
закции с кредитными карточками. Наконец, в главе рассматриваются методы, с 
помощью которых вы сможете повысить производительность своего сайта.

Введение 
Как читать эту книгу 
Хотя главы этой книги строятся на информации, содержащейся в предыду- 
щих главах, мы сделали структуру этой книги такой, что вы можете обратиться к 
любому практикуму и найти нужную вам информацию. 
Чтобы помочь вам быстро находить требуемую информацию, в начале каждой 
главы помещен перечень конкретных практикумов, содержащихся в главе. Если 
вам нужно больше информации по той или иной теме, в каждой главе содер- 
жится вводный текст, призванный снабдить вас прочным фундаментом в дан- 
ной области. 
ПРАКТИКУМ 
Просматривая страницы этой книги, ищите заголовки практикум , которые вы- 
деляют конкретные действия внутри каждого совета, которые вы сразу же можете 
выполнить, дабы решить стоящую перед вами задачу. 
Коды примеров 
В главах этой книги представлено множество HTML-файлов, активных сервер- 
ных страниц, JavaScript-кода, PHP-решений и это далеко не полный перечень. 
Во многих случаях показанные нами решения можно применять в коде соб- 
ственных Web-страниц. Все файлы этой книги доступны для выгрузки на Web- 
сайте издательства ПО адресу http://www.diasoft.kiev.ua.

Глава 1 
. v: . ... -,;.••.•• 
Основы языка HTML 
В этой главе 
нагрузка и установка персонального web-сервера 
' Управление персональным Web-сервером и публикация Web-страниц 
I Описание содержимого Web-страницы при помощи заголовка 
Идентификация документов с помощью определения типа документа 
I (Document Type Definition) 
Вставка комментариев в Web-документы 
1 Определение гарнитуры шрифта для текста Web-страницы 
I Управление структурой текста с помощью дескрипторов абзаца 
и перевода строки 
Изменение размера текста с помощью дескрипторов уровней заголовков 
I и атрибута size дескриптора шрифта 
I Изменение цвета текста в HTML-документе 
I Добавление графики на Web-страницу с помощью базового дескриптора 
I <img> 
I Изменение выравнивания текста и графики 
• Добавление гипертекстовых ссылок 
I Выделение отдельных букв и слов с помощью дескрипторов 
I форматирования символов 
I Использование специальных символов в HTML-документах 
I Использование горизонтальных линий для структурирования 
Web-содержимого 
I Использование дескрипторов блоков цитирования для управления 
I левым и правым отступами текста 
I Создание упорядоченных и неупорядоченных списков 
I Создание вложенных списков 
' Создание списков определений 
I Использование дескрипторов предварительно форматированного текста 
для управления отображением Web-содержимого 
I Отображение навигационного меню во фрейме Web-страницы 
' Одновременный вывод на экран нескольких Web-страниц

20 Глава 1. Основы языка HTML 
э hзык разметки гипертекста (Hypertext Markup Language), или, как его чаще 
ж Л называют, HTML, — это компьютерный язык, лежащий в основе World Wide 
Web (Всемирной Паутины). Создавая Web-сайт, вы используете HTML для разме- 
щения текста, рисунков, анимации и, возможно, видео- и аудиоклипов на отдель- 
ных Web-страницах, из которых, собственно, и состоит сайт. Помимо этого, язык 
HTML позволяет помещать на страницы гипертекстовые ссылки и интерактивные 
кнопки, которые соединяют ваши Web-страницы с другими страницами того же 
Web-сайта, равно как и с другими Web-сайтами по всему миру. Web-дизайн — это 
исключительно творческий процесс, a HTML — всего лишь один из инструментов 
(точнее, язык описания страниц), используемый при создании Web-страниц. 
HTML — это язык разметки текста, а не язык программирования. Теоретичес- 
ки Web-страницу, созданную с использованием HTML, может просмотреть лю- 
бой, у кого есть компьютер, какой-нибудь Web-браузер и доступ к Internet. На 
самом же деле, способность пользователя видеть все содержимое Web-страницы 
зависит от возможностей его Web-браузера. Web-браузеры (Web browsers) — это 
программы, которые интерпретируют HTML-код Web-страниц и отображают 
текст, рисунки и анимацию на экране компьютера посетителя сайта. Самостоя- 
тельно либо же с помощью других установленных программ, браузеры также вос- 
производят звуковые или видео-файлы, вставленные в страницу с помощью 
HTML-кода. Последние версии двух наиболее популярных Web-браузеров, 
Microsoft Internet Explorer и Netscape Navigator, могут отображать практически 
все из того, что можно поместить на Web-страницу с помощью HTML-дескрип- 
торов. 
Чтобы посетители могли обратиться к Web-страницам вашего Web-сайта, им 
нужно сперва получить доступ в Internet и запустить Web-браузер. После того, 
как Web-сервер отправит Web-страницу компьютеру посетителя, Web-браузер ин- 
терпретирует HTML-код из файла Web-страницы и отображает содержимое фай- 
ла в форме текста и графических изображений в окне браузера. 
Web-серверы и Web-браузеры используют для обмена данными протокол пере- 
дачи гипертекста (HyperText Transport Protocol — HTTP). Помимо всего прочего, 
HTTP-протокол определяет как способ отправки сообщений Web-браузерами и 
серверами, так и структуру самих сообщений; Подробное рассмотрение типов и 
структур HTTP-сообщений выходит за рамки этой книги. Однако для дизайна и 
создания даже самых сложных Web-сайтов вам понадобится только принципи- 
альное понимание потока HTTP-запросов и ответов (между Web-браузером и 
Web-сервером), который показан на рис. 1.1. 
1. Всякий раз, когда вы вводите Web-адрес (например, http:// 
www.NVBizNet.com) в адресной строке своего браузера, последний отправ- 
ляет Web-серверу через Internet HTTP-запрос файла. 
2. Получив HTTP-запрос файла, Web-сервер извлекает запрошенный файл и 
отсылает Web-страницу Web-браузеру. 
3. Web-браузер анализирует файл Web-страницы, чтобы определить, есть ли в 
нем вставленные файлы (такие, как графика, анимация, звук и т.д.), кото- 
рые браузер должен получить с Web-сервера.

Глава 1. Основы языка HTML 21 
Web-сервер 
DEFAULT.HTM 
Web-текст 
и другое 
содержимое 
Рис. 1.1. Обработка запроса Web-содержимого Web-сервером 
4. Web-браузер отправляет Web-серверу несколько HTTP-запросов (по одному 
на каждый нужный браузеру файл). 
5. Получив HTTP-запросы файлов, сервер находит каждый из файлов и отсы- 
лает эти файлы Web-браузеру (по одному файлу на HTTP-запрос). 
6. Web-браузер берет исходные файлы Web-страниц и следует инструкциям, 
предоставляемым HTML-дескрипторами в файле, чтобы скомпоновать 
Web-страницу и содержимое вставленных файлов в завершенный Web-доку- 
мент, который затем отображается на экране. 
Роль Web-браузеров и Web-страниц 
Чтобы отвечать требованиям постоянно меняющейся конъюнктуры рынка и 
сделать Internet доступным для всех, компании Microsoft и Netscape выпустили 
версии своих Web-браузеров для всех имеющихся на рынке компьютерных плат- 
форм и операционных систем. Поскольку для того, чтобы Web-страница отоб- 
разилась на экране, HTML-код должен быть интерпретирован Web-браузером, 
марка и версия браузера, используемого посетителями вашего Web-сайта, опреде- 
ляет, какие возможности HTML будут доступными. То есть, в двух словах, ис- 
пользуемая версия браузера определяет, что будет видеть посетитель на экране. 
Поэтому применение новейших, усовершенствованных возможностей языка 
HTML и способов форматирования страницы на Web-странице не сможет гаран- 
тировать то, что каждый ее посетитель увидит все, что позволяет разместить на 
странице сам язык HTML. 
Разрабатывая Web-страницу, следует помнить о том, что не все посетители 
вашего сайта будут пользоваться последними версиями Internet Explorer или

22 Глава 1. Основы языка HTML 
Netscape Navigator. Отдавайте предпочтение простейшим HTML-дескрипторам, 
работать с которыми вы научитесь в этой главе, для большей части содержимого, 
размещаемого на Web-страницах. Затем воспользуйтесь какими-то более усовер- 
шенствованными возможностями языка HTML, дабы "оживить" свой сайт и вы- 
нудить посетителей заходить на него снова и снова. Комбинируя простейшие и 
усовершенствованные возможности языка HTML на одной и той же странице, 
вы обеспечите всем посетителям доступ к жизненно важной информации, а те 
посетители, в распоряжении которых имеются новейшие браузеры, действитель- 
но запомнят ваш сайт. 
„ Web-страница состоит из набора HTML-инструкций, которые можно ввести в 
файл с помощью любого текстового редактора. Как уже говорилось, Web-браузе- 
ры, подобные Netscape Navigator и Internet Explorer, следуют инструкциям в со- 
зданном вами текстовом документе, чтобы отобразить содержимое Web-страницы 
на экране. (Содержимое (content) страницы — это текст, графика и прочие вещи 
(такие, как видео- и аудиоклипы), которые вы помещаете на Web-страницу с по- 
мощью языка HTML). 
Если вы думаете, что создать документ Web-страницы просто, то вы не оши- 
баетесь. Собственно говоря, создание Web-сайтов началось с простейших по сво- 
ей сути намерений. В первоначальном стандарте языка HTML описывался не- 
сложный, простой в изучении язык, с помощью которого можно было создавать 
содержащие один лишь текст документы, просматривать которые мог каждый, у 
кого был доступ к Internet. Хотя комитет по стандартам HTML, консорциум 
W3C (World Wide Web Consortium), ввел множество новых инструкций (называе- 
мых дескрипторами (tags) и атрибутами (attributes)) в язык HTML, все же даже 
самую "богатую" Web-страницу можно создать, набрав простые HTML-команды в 
документе, подготовленном в текстовом редакторе (подойдет даже Notepad 
(Блокнот) из Windows). На Web-сайте W3C (www.w3.org) можно найти полное 
описание различных Internet-технологий, включая HTTP, HTML, XHTML 
(Extensible Hypertext Markup Language — расширяемый язык разметки гипертек- 
ста), XML (Extensible Markup Language — расширяемый язык разметки), CSS 
(Cascading Style Sheets — каскадные таблицы стилей) и т.д. 
Теперь, когда вы знаете, что такое Web-страница и в общих чертах представ- 
ляете, как она создается, давайте взглянем на HTML-код какой-нибудь Web-стра- 
ницы. Если у вас нет постоянного соединения с Internet, установите подключе- 
ние по коммутируемой линии через вашего Internet-провайдера (поставщика 
услуг Internet). Затем запустите Web-браузер и выведите на экран свою любимую 
Web-страницу, набрав URL-адрес (Uniform Resource Locator — унифицированный 
указатель информационного ресурса, то есть адрес Web-страницы) в адресной 
строке браузера. Например, можно ввести в адресной .строке браузера http:// 
www.osborne.com. Затем просто нажмите ENTER. 
Web-браузер, в свою очередь, отправит Web-серверу HTTP-запрос Web-страни- 
цы, адрес которой был введен. После ответа Web-сервера, т.е. отправки Web-стра- 

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

Глава 1. Основы языка HTML 23 
ницу. После того, как браузер извлечет и отобразит все содержимое страницы, 
выберите View | Source (Вид | В виде HTML), чтобы вывести на экран HTML-код, с 
помощью которого описана страница. (Если вы работаете с Netscape Navigator, 
выберите View | Page Source (Вид | Источник страницы)). Далее Internet Explorer 

отобразит HTML-код Web-страницы в редакторе Блокнот, тогда как Netscape 
Navigator просто выведет HTML-операторы в новом окне. Пусть вас пока не вол- 
нует значение отдельных HTML-операторов — по ходу чтения этой книги вы уз- 
наете о них практически все. Сейчас важно запомнить, что можно просмотреть 
исходный код любой HTM L-страницы. 
Контейнерные HTML-дескрипторы 
В основе своей, Web-страница представляет собой текстовый файл, содержа- 
щий инструкции в форме HTML-кодов (называемых дескрипторами) и атрибу- 
тов. Дескрипторы — это команды, которыми впоследствии будет руководствовать- 
ся Web-браузер, чтобы отформатировать текст и вставить графические 
изображения, которые должны присутствовать на Web-странице. Некоторые, од- 
нако не все, HTML-команды требуют как начального, так и конечного дескрип- 
тора: такие команды называются контейнерными {container) дескрипторами, по- 
скольку инструкция в начальном дескрипторе применяется ко всему, что 
содержится на Web-странице между начальным и конечным дескриптором. 
Каждая HTML-команда (то есть каждый HTML-дескриптор) начинается со 
знака "меньше" (<), вслед за которым идет имя дескриптора и атрибуты (если 
таковые имеются), и заканчивается знаком "больше" (>). Чтобы создать конеч- 
ный дескриптор для начального дескриптора, нужно поместить косую черту (/) 
перед именем дескриптора. Таким образом, начальный дескриптор имеет вид 
<имя_дескриптора [атрибуты]>, а конечный деСКрИПТОр — </имя_дескриптора>. 
Имя дескриптора сообщает Web-браузеру назначение дескриптора; атрибуты 
(если есть), идущие за именем дескриптора, предоставляют Web-браузеру допол- 
нительную информацию, необходимую тому для выполнения инструкций деск- 
риптора. 
Например, приведенный ниже код служит иллюстрацией того, как начальный 
и конечный дескрипторы абзаца (<р> </р>) заключают в себе, или содержат, 
фрагмент текста. В данном примере, дескриптор <р> дает Web-браузеру указание 
отобразить текст до дескриптора </р> с использованием правил форматирования 
по умолчанию: 
<р> Это пример абзаца. </р> 
Если вы хотите, чтобы браузер отображал текст в абзаце определенным шриф- 
том и цветом, нужно будет добавить атрибуты, определяющие такие параметры, 
как цвет, начертание, размер шрифта и т.д., в дескриптор <font>, который ста- 
вится после дескриптора <р> и перед текстом, внешний вид которого требуется 
задать. (Мы рассмотрим атрибуты более подробно после того, как в следующих 
двух разделах вы узнаете немного больше о дескрипторах.)

24 Глава 1. Основы языка HTML 
HTML-дескрипторы разделов 
Для организации различных частей HTML-кода, которыми описывается Web- 
страница, используется набор дескрипторов разделов {section tags). Типы HTML- 
дескрипторов в каждом разделе определения HTML-страницы имеют конкретное 
назначение: 
• <htmi> </htmi>. Эти дескрипторы ставятся в начале и в конце HTML-до- 
кумента. Как таковые, начальный и конечный дескрипторы <htmi> заклю- 
чают в себе все прочие HTML-дескрипторы, с помощью которых описыва- 
ется Web-страница. 
• <head> </head>. Начальный и конечный дескрипторы заголовка части 
идут сразу же за начальным дескриптором HTML (<htmi>) и обозначают 
заголовочную часть Web-страницы. С помощью дескрипторов в заголовоч- 
ную часть Web-страницы можно включить такую информацию, как фами- 
лия автора и дата создания страницы. Кроме того, в этот раздел помеща- 
ются дескрипторы, содержащие описательную информацию страницы, 
чтобы поисковые системы могли добавлять ссылки на вашу страницу в 
свои индексы. Из HTML-дескрипторов и информации, помещенной в раз- 
дел заголовка, браузер посетителя отображает только название Web-страни- 
цы. Название Web-страницы вставляется в заголовочной части между на- 
чальным и конечным дескрипторами заголовка (<titie> </titie>), как 
показано в примере кода ниже перечня дескрипторов разделов. 
• <body> </body>. Начальный и конечный дескрипторы тела документа рас- 
полагаются сразу же за разделом заголовка и обозначают тело Web-страни- 
цы. Раздел тела Web-страницы содержит дескрипторы, сообщающие Web- 
браузеру, что необходимо вывести на экран и как это будет выглядеть. 
Приведенный ниже код демонстрирует правильное размещение HTML-деск- 
рипторов разделов: 
<html> 
<head> 
<title> Заголовок Web-страницы </title> 
</head> 
<body> 
Сюда помещаются текстовое содержимое и дескрипторы тела документа 
</body> 
</html>

Глава 1. Основы языка HTML 25 
новым стандартам, они по-прежнему будут правильно отображать Web-страницы, 
созданные вами сейчас. 
Пустые HTML-дескрипторы 
Наряду с контейнерными дескрипторами (см. раздел "Контейнерные HTML- 
дескрипторы" выше в этой главе), в языке HTML используются дескрипторы вто- 
рого типа, называемые пустыми дескрипторами (empty tags). В то время как кон- 
тейнерные дескрипторы заключают содержимое страницы, такое как строку 
текста, между начальным и конечным дескрипторами, пустые дескрипторы не 
требуют соответствующего конечного дескриптора. Пустой дескриптор можно 
представить себе в виде одиночной команды или оператора вроде "перейти туда- 
то" или "выполнить то-то". Например, в приведенном ниже HTML-коде исполь- 
зуется дескриптор перевода строки (<Ьг>), чтобы дать Web-браузеру указание пе- 
рейти на следующую строку перед тем, как отобразить следующий элемент на 
странице (в данном примере - вторую строку текста): 
<html> 
<head> 
<title> Пример использования дескриптора перевода строки </title> 
</head> 
<body> 
<р> Этот текст отображается в первой строке <br> 
Этот текст отображается во второй строке </р> 
</body> 
</html> 
Создание Web-страницы 
Создавать текстовые HTML-документы действительно очень просто. Чтобы 
создать HTML-документ, нужно открыть какой-нибудь текстовый редактор и на- 
брать HTML-код. После ввода HTML-операторов вы просто сохраняете документ 
в виде текстового файла с расширением .htm или .html. Например, откройте 
свой любимый текстовый редактор (годится даже Блокнот из Windows) и введите 
следующий HTML-код: 
<html> 
<head> 
<title>IIpHMep простого HTML-flOKyMeHTa</title> 
</head> 
<body> 
<р>Привет, МИР! Вот и я!</р> 
</body> 
</html> 
Теперь сохраните свою работу в файле Web-страницы (то есть файле с расши- 
рением .htm или .html) на жестком диске. Поскольку в ходе чтения этой книги 
вы наверняка будете что-то выгружать с Web-сайта Osborne или же набирать в 
текстовом редакторе и сохранять немало Web-страниц, создайте папку (напри- 
мер, c:\HTMLExampies), в которой будет храниться код Web-страниц. Затем со- 
храните введенный код в файле с именем TestPage.htm в созданной папке.

26 Глава 1. Основы языка HTML 
Чтобы произвести "пробный пуск" своей Web-страницы, откройте Web-браузер 
и наберите в адресной строке File://, а затем буквенное обозначение дисково- 
да, путь и имя файла Web-страницы. Например, если вы сохранили Web-страни- 
цу из примера выше под именем TestPage.htm в папке C:\HTMLExampies, набе- 
рите В адресной Строке браузера File://c:/HTMLExamples/TestPage.htm. 
Web-браузер, в свою очередь, отобразит Web-страницу, внешний вид которой по- 
казан на рис. 1.2. Вот, собственно, и все. Теперь вы можете официально считать- 

ся автором Web-страницы! 
Пример простого HTML- документа - Microsoft Internet Explorer 
Правка @ид 
й 
Cjgpene Справка 
;Ддресш] http//html-webdesign/ChapterO1/TestPage.htm 
Привет, МИР! Вот и я! 
J 
Рис. 1.2. Простая Web-страница, отображенная в Internet Explorer 
Управление форматированием текста 
При стандартной подготовке текстовых документов абзац определяется как 
группа предложений. Обычно начало нового абзаца обозначается пустой строкой 
или отступом первого слова. Например, каждый абзац в этой книге начинается с 
отступа первой строки. Отступ первой строки (или пустая строка) — это визуаль- 
ная подсказка, по которой пользователь узнает, что начался другой абзац. 
Когда вы вставляете текст в Web-страницу, дескриптор </р> задает конец тек- 
ста и последующее начало нового абзаца. Дескриптор <р> дает Web-браузеру ука- 
зание перейти на одну строку вниз, вставить пустую строку и затем начать но- 
вый абзац со строки под пустой строкой — для текста, идущего после 
дескриптора </р>. 
В нижеприведенном коде начальный и конечный дескрипторы абзаца 
(<рх/р>) отмечают начало и конец каждого абзаца, как показано на рис. 1.3. 
<html> 
<head> 
<title>npnMep текста, разбитого на абзацы </title> 
</head> 
<body> 
<р>Текст между двумя дескрипторами абзаца определяет один абзац. 
Абзацы содержат одно или более предложений</р> 
<р>Следующий абзац начинается здесь с пустой строки, вставленной 
между двумя абэацами</р> 
</body> 
</html>

Глава 1. Основы языка HTML 27 
Щк Пример текста, разбитого на абзац 
Првека. Щид Избранное Qgpenc ^пр 
hHp//html-webd6sign/Chepter01/Figure0l-Q3htm 
Текст между двумя дескрипторами абзаца определяет один абзац. Абзацы содержат 
одно или 
более предложений 
Следующий абзац начинается здесь с пустой строки, вставленной между двумя 
абзацами 
'• j 
Рис. 1.3. Дескрипторы абзацев организуют текст в группы, разделенные пустыми 
строками 
В языке HTML есть также несколько дескрипторов для форматирования тек- 
ста, с помощью которых можно изменять внешний вид текста, обычно с целью 
выделения. Чтобы применить стиль форматирования, поместите начальный деск- 
риптор форматирования в начало текста, к которому требуется применить этот 
стиль. Ниже описаны три наиболее часто употребляемых дескриптора формати- 
рования: 
• <ь> </ь>. Текст, помещенный между дескрипторами выделения полужир- 
ным, отображается полужирным шрифтом. 
• <i> </i>. Текст, помещенный между дескрипторами выделения курсивом, 
отображаетсякурсивом. 
• <u> </u>. Текст, помещенный между дескрипторами выделения подчерки- 
ванием, отображается подчеркнутым. 
Следующий HTML-код выводит текст, выделенный полужирным, курсивом и 
подчеркиванием (результат можно увидеть на рис. 1.4). 
<html> 
<head> 
<title>OcHOBHbie стили шрифтов</Ъл.-Ые> 
</head> 
<body> 
<Ь>Этот текст выводится полужирным</ЬХЬг> 
<л.>Этот текст выводится курсивом</1ХЬг> 
<и>Этот текст выводится подчеркнутым</иХЬг> 
</body> 
</html> 
• Правка Вио Избра Сервис 
] http//btj (е bde si gn/CbapterD yF\gurs 014 
Этот текст выводятся полужирным 
Этот текст выводится курсивом 
Этот текст выводится подчеркнутым 
"13 
Рис. 1.4. HTML-дескрипторы форматирования позволяют изменить стиль текста

28 Глава 1. Основы языка HTML 
Атрибуты в HTML 
Атрибуты — один или более — вставляются в HTML-дескрипторы для того, 
чтобы предоставить Web-браузеру дополнительную информацию о том, как брау- 
зер должен выполнить инструкцию дескриптора. Например, дескриптор выбора 
шрифта <font> сообщает Web-браузеру, что вы хотите изменить внешний вид 
текста, идущего за дескриптором. Атрибуты color (цвет) и face (гарнитура), 
идущие за именем дескриптора в приведенном ниже коде, сообщают браузеру 
цвет (red — красный) и гарнитуру (Helvetica), которые браузер должен использо- 
вать для изменения внешнего вида шрифта, идущего за дескриптором: 
<р> <font color="red" face="Helvetica"> 
Этот текст - красного цвета, гарнитура - Helvetica. </font> </p> 
Атрибуты, которые вставляются всегда после имени дескриптора в начальных 
либо пустых дескрипторах, состоят из трех компонентов: имени атрибута, за ко- 
торым идет знак равенства (=), вслед за которым в кавычках — двойных ("") или 
одинарных (") — указывается значение атрибута. 
' следует отметить, что Web-браузер игнорирует пробелы с каждой стороны 
знака равенства (=) между атрибутом и значением атрибута в кавычках. Поэтому 
вам будут 
попадаться как Web-документы без пробелов (как показано в HTML-операторе в 
вышеприве- 
денном примере), так и документы с пробелами с одной или обеих сторон знака 
равенства. В 
своих HTML-дескрипторах вы можете использовать ту форму записи, которая вам 
нравится, 
однако будьте последовательны и не перемешивайте стили. 
Web-браузер будет продолжать применять атрибут (или атрибуты), указанный 
в начальном дескрипторе, до тех пор, пока не встретит соответствующий конеч- 
ный дескриптор. В данном примере Web-браузер продолжит отображать текст, 
внешний вид которого будет соответствовать атрибутам color и face в дескрип- 
торе <font>, до тех пор, пока в HTML-коде Web-страницы не встретится деск- 
риптор </font>. На рис. 1.5 показаны компоненты HTML-дескриптора с двумя 
атрибутами. 
HTML-команда и атрибуты заключаются в угловые скобки 
Атрибут 
1 
<font color="red" 
HTML-команда Значение 
face=" 
Атрибут 
1 
comic sans 
Значение 
~~\ 
ms"> 
Имя атрибута Имя атрибута 
Рис. 1.5. Компоненты дескриптора, содержащего два атрибута

Глава 1. Основы языка HTML 29 
Работа со шрифтами 
Если только в HTML-коде Web-страницы не указано противоположное, у по- 
сетителей вашего Web-сайта текст страницы будет отображаться с использовани- 
ем гарнитуры, стиля, цвета и размера символов, установленных по умолчанию. 
Web-браузер посетителя определяет настройки по умолчанию для текста, выво- 
димого им на экран. С помощью начального и конечного дескрипторов шрифта 
(<fontx/font>) вы можете управлять внешним видом текста своей страницы в 
Web-браузере посетителя. Обратите внимание, что дескриптор шрифта является 
нерекомендуемым, то есть будущие версии Web-браузеров, отвечающие требовани- 
ям новейшего стандарта HTML, могут более не поддерживать, и, следовательно, 
игнорировать, дескриптор <font> вместе с его атрибутами. Хотя с помощью ат- 
рибутов в дескрипторе <font> можно влиять на внешнее представление текста, 
того же (и большего) эффекта можно добиться путем создания CSS-правил, ра- 
ботать с которыми вы научитесь в главе 4. 
Чтобы сообщить Web-браузеру, как отображать текст в Web-документе, можно 
использовать следующие атрибуты, помещая их в начальный дескриптор шрифта: 
<font со1ог="цвет">. Атрибут color определяет цвет текста. В качестве 
значений цвета могут использоваться имена (такие как "red" [красный], 
"green" [зеленый], "yellow" [желтый], "blue" [синий] и т.д.) или шест- 
надцатеричные триплеты (например, #FFOOOO, #оовооо, #FFFFOO, #OOOOFF 
и т.д.), задающие количественные значения красной, зеленой и синей со- 
ставляющих, которые Web-браузер должен смешать для получения требуемого 
цвета текста. 
• <font size="##">. Атрибут s i z e определяет размер текста (по отношению 
к размеру базового шрифта) с помощью значений от -7 • 7. Чем меньше 
значение, тем меньше размер шрифта. 
<font .асе="название__шрифта">. Атрибут face определяет название гар- 
• нитуры шрифта (Times New Roman, Helvetica, Arial — вот некоторые из 
примеров шрифтов, имеющихся в большинстве компьютерных систем). Если 
шрифт, определенный атрибутом face, в компьютере посетителя отсутствует, 
Web-браузер игнорирует атрибут face и использует гарнитуру по умолчанию. 
Web-браузер определяет значения по умолчанию для цвета, размера, гарниту- 
ры и начертания. Чтобы вернуться к значениям по умолчанию браузера, пос- 
тавьте дескриптор </font> в конце текста, внешний вид которого вы изменили с 
помощью атрибутов дескриптора <font>. Приведенный ниже код дает Web-брау- 
зеру указание вывести текст красным цветом шрифтом Helvetica, а затем возоб- 
новить вывод текста (идущего после дескриптора </font>) с использованием ха- 
рактеристик текста, установленных в браузере по умолчанию: 
<html> 
<head> 
<title>npMMep изменения цвета шрифта</Ъд.Ъ1е> 
</head>

30 Глава 1. Основы языка HTML 
<body> 
<font color="#ff0000" face="helvetica"> 
<p> Это текст красного цвета, шрифт — Helvetica</p> </font> 
<р>Это обычный текст</р> 
</body> 
</html> 
Назначение одного и того же набора атрибутов 
множеству элементов страницы 
Если вы хотите назначить один и тот же набор атрибутов нескольким смеж- 
ным элементам Web-страницы одновременно, заключите элементы, на которые 
вы хотите повлиять, между начальным и конечным дескрипторами блока 
(<divx/div> — от слова "division" ("раздел")). Например, вам нужно отцентри- 
ровать две строки текста и графическое изображение между левым и правым по- 
лями Web-страницы. Вместо того чтобы добавлять атрибут align (выравнивание) 
в каждый из трех HTML-дескрипторов, поместите дескриптор <div> перед пер- 
вым элементом и дескриптор </div> после окончания последнего элемента, как 
показано в следующем коде: 
<div align="center"> 
<р>Этот текст отцентрирован НАД рисунком.</р> 
<img src="image.jpg"> 
<р>Этот текст отцентрирован ПОД рисунком.</р> 
</div> 
Дескриптор <div> позволяет присвоить один или более атрибутов форматиро- 
вания группе HTML-дескрипторов. Дескриптор </div> дает Web-браузеру указа- 
ние вернуться к использованию значений по умолчанию для атрибутов, указан- 
ных в дескрипторе <div>. 
Создание Web-страниц с помощью текстовых 
редакторов, текстовых процессоров и программ 
компоновки Web-страниц 
Создание "совершенной" Web-страницы требует хорошей техники дизайна и 
досконального понимания HTML-дескрипторов и атрибутов. Если отвлечься от 
понятий "хорошего" и "плохого" дизайна страниц, разработка Web-страницы сво- 
дится к одной задаче — созданию документа (то есть текстового файла), содер- 
жащего HTML-код, необходимый, чтобы заставить браузер вывести на экран то, 
что вам нужно. Хотя в этой главе речь идет о простейшем HTML-коде, неплохо 
будет ознакомиться с программами создания текстовых документов, в которых 
вы будете писать и сохранять HTML-код своих Web-страниц. 
Web-страница — это не более чем текстовый документ, содержащий все тек- 
стовое содержимое и HTML-операторы (дескрипторы и атрибуты), требуемые 
Web-браузеру для отображения на экране информации, которую вы хотите ви- 
деть. Поэтому для того, чтобы сгенерировать Web-страницу, вам не нужны какие- 
то специализированные программы. Вам нужны только общие знания языка

Глава 1. Основы языка HTML 31 
HTML и приложение, позволяющее сохранять текстовые ф^йлы без элементов 
форматирования текста. Создавать HTML-документы можно с помощью про- 
грамм-трех типов: текстовых редакторов, текстовых процессоров и программ ком- 
поновки Web-страниц (подобных Dreamweaver или FrontPage). Всем трем типам 
присущи свои преимущества, а, в ряде случаев, и недостатки. 
Текстовые редакторы 
Текстовый редактор — это простейший (и, пожалуй, самый простой в исполь- 
зовании) из трех типов программ, которые позволяют создавать текстовые доку- 
менты. Текстовый редактор представляет собой приложение без особых изли- 
шеств, с помощью которого можно вводить текст в компьютер и сохранять 
набранную информацию в файле на жестком или гибком диске. На компьютерах 
с операционной системой Windows компания Microsoft поставляет текстовый ре- 
дактор Notepad (Блокнот); на компьютерах Macintosh аналогичный текстовый ре- 
дактор называется SimpleText. 
Обычно в текстовых редакторах нет модуля проверки орфографии или слож- 
ных инструментов форматирования, таких как таблицы стилей и правила оформ- 
ления абзацев. Текстовые редакторы, тем не менее, позволяют набирать инфор- 
мацию на электронном "листе бумаги" и сохранять набранное в файле. 
Основным недостатком использования текстового редактора для создания Web- 
страницы является то, что текстовые редакторы немногим помогают в написании 
дескрипторов, которые соответствовали бы правилам синтаксиса HTML. Вы на- 
бираете HTML-код, а текстовый редактор фиксирует текст. Однако текстовый ре- 
дактор не предупредит вас об орфографической ошибке или ошибке HTML-син- 
таксиса. Преимущество же использования текстового редактора для создания 
Web-страниц состоит в том, что текстовые редакторы побуждают вас быстрее изу- 
чить язык HTML, поскольку они не предоставляют никаких "костылей", на кото- 
рые вы смогли бы опереться. На рис. 1.6 показан HTML-документ, подготовлен- 
ный в редакторе Microsoft Notepad - Блокноте. 
TDOCTVPE html PUBLIC "-//U3C//DTD XHTML 1.Э Transitional//EN" 
'•http://WMW.w3.or9/TR/xhtl1n/DiD/xhtinll-trensitionel.dtd"> 
html xmlns=>-http://uuw.w3.org/1999/xhtiiil"> 
<head> 
<titlo>ripHHep простейшей Ueb-cTpaHH4bK/title> 
</head> 
<body> 
<center> 
<img src="image.jpg" /> 
<р>ГраФическое изображение расположено в верхней части окна браузера, 
при этом оно отцентрировано по горизонтали. Текст расположен ниже рисунка и 
также отцентрирован по горизонтали.</р> 
</center> 
</body> 
</htnl> 
_J 
Рис. 1.6. Создавать HTML-документы можно и в Блокноте

32 Глава 1. Основы языка HTML 
После набора HTML-кода в Блокноте выберите File | Save (Файл | Сохранить) и 
введите имя файла для сохранения вашей Web-страницы на диске. Обязательно 
снабдите имя файла расширением .htm или .html (а не присваиваемым по 
умолчанию .txt). 
Текстовые процессоры 
Из доступных на рынке текстовых процессоров наиболее популярными по 
праву считаются два — Microsoft Word и Corel WordPerfect. Преимущество тексто- 
вых процессоров перед простыми текстовыми редакторами заключается в том, 
что текстовый процессор может проверять орфографию в набираемом вами тек- 
сте. Однако если у вас нет модуля проверки правописания, учитывающего нали- 
чие HTML-кода, вы потратите немало времени, заставляя текстовый процессор 
игнорировать написание HTML-дескрипторов, поскольку большинство имен дес- 
крипторов — это сокращения, а не "полноценные" слова английского языка. 
Если в вашем текстовом процессоре нет модуля проверки орфографии HTML, 
можно обучить приложение новым словам. Например, текстовый процессор бу- 
дет помечать дескриптор изображения <img> как слово с орфографической 
ошибкой. Однако если вы сообщите текстовому процессору, что символьная 
строка <img> является орфографически правильной, текстовый процессор, встре- 
тив в следующий раз эту строку в документе, сочтет ее правильной. Только не 
забудьте убедиться, что ваш HTML-дескриптор — синтаксически правильный пе- 
ред тем, как щелкать на кнопке "Добавить" в окне проверки правописания. 
Таким образом, у текстового процессора есть два преимущества: во-первых, 
текстовый процессор может проверять правописание слов и дескрипторов в 
HTML-коде вашей Web-страницы, и, во-вторых, вам все равно придется быстро 
выучить язык HTML, поскольку вы по-прежнему будете набирать HTML-код. 
При сохранении файла обязательно пользуйтесь функцией "Сохранить как..." 
текстового процессора, чтобысохранитьдокументкак "только текст ".Текстовые 
процессоры делают кое-что не свойственное текстовым редакторам: вставляют в 
документ специальные коды форматирования. Эти внедренные коды могут по- 
влиять на то, как Web-браузер будет интерпретировать документ, или же, в худ- 
шем случае, могут сделать вашу страницу вовсе нечитаемой для браузера или 
даже привести к его "зависанию". Поскольку HTML-документы не требуют вне- 
дренных кодов форматирования текста, дайте процессору указание сохранить 
HTML-файл с использованием опции "только текст". 
Программы компоновки Web-страниц 
Программы компоновки Web-страниц позволяют создавать Web-страницы 
практически таким же образом, как программы компоновки страниц, подобные 
PageMaker и QuarkXPress, позволяют компоновать и печатать бумажные докумен- 
ты. Хотя на рынке имеются десятки программ компоновки Web-страниц, тремя 
наиболее популярными приложениями для создания Web-страниц являются 
GoLive от Adobe, Dreamweaver от Macromedia и FrontPage от Microsoft.

Глава 1. Основы языка HTML 33 
Работая с программой компоновки Web-страниц, такой как GoLive, вы откры- 
ваете новый документ и начинаете набирать текст в пустом окне, а также пере- 
таскивать в него графику. В то время как вы добавляете текст и графику в Web- 
страницу, программа генерирует HTML-код за вас. Преимуществом работы с 
программой компоновки Web-страниц является то, что в процессе создания Web- 
страницы вы видите, как она выглядит в Web-браузере. На рис. 1.7 показана 
Web-страница в процессе разработки в среде Macromedia Dreamweaver. 
Недостаток работы с программами компоновки Web-страниц состоит в том, 
что они выполняют все HTML-кодирование за вас. Хотя это их свойство может 
казаться весьма полезным, у вас не будет возможности научиться работать с язы- 
ком HTML, и, следовательно, вы никогда не выйдете за рамки того, что умеет 
делать программа. Предположим, например, что вы захотите добавить в свою 
Web-страницу определенную функцию, а в программе компоновки нет кнопки, с 
помощью которой можно было бы это сделать. Вот вы и застряли — ведь вы не 
знаете, как самостоятельно написать код для этой функции. Кроме того, про- 
граммы компоновки Web-страниц далеко не совершенны. Иногда они генериру- 
ют дополнительный HTML-код, который вашей Web-странице абсолютно не ну- 
жен. Не зная языка HTML, вы не сможете решить, что из этого кода вам нужно, 
а вполне можно убрать. 
Если вы новичок в Web-дизайне, лучше начать с использования простого тек- 
стового редактора или текстового процессора. Научившись разбираться в языке 
HTML, переходите к программе компоновки Web-страниц, например, 
Dreamweaver или GoLive. Если вы понимаете HTML, использование программы 
компоновки Web-страниц предоставит вам максимум преимуществ: программа 
компоновки Web-страниц налету сгенерирует весь HTML-код, и в то же время 
позволит в любой момент остановиться и изменить код в соответствии с вашими 
пожеланиями. 
Document [Unlitled l ' | • Dn 
File .« Yiew insert Modify Ie*t Commands tfmdow Uefp. 
Добро пожаловать на сайт Энди! 
Г" 
j
[г 
1 
* "|: 
Домой в jj 
Проекты jj 
Информация I; 
Примеры 
Заказать ;: 
Место для бегущей строки 
<ЪоЛ» < > <ltxldximg> © €5 У> @ @ Rii 
Рис. 1.7. Программы компоновки Web-страниц позволяют 
визуально разрабатывать страницы

34 Глава 1. Основы языка HTML 
Работа с относительными и абсолютными 
адресами файлов 
При создании нового Web-сайта вам придется перенести Web-содержимое (то 
есть HTML-документы, графику, анимацию, звук и прочие вспомогательные фай- 
лы) с компьютера, на котором вы работали над сайтом, на целевой Web-сервер. 
Если ваши Web-страницы содержат ссылки на страницы, сохраненные в том же 
или смежных каталогах (подкаталогах или родительском каталоге), вы сможете 
сэкономить немало времени и усилий, используя в ссылках на файлы в HTML- 
дескрипторах относительные адреса. 
Когда посетитель сайта щелкает на гиперссылке, Web-браузер использует ад- 
рес, заданный в атрибуте href гиперссылки, для нахождения файла, который ему 
необходимо извлечь. Указывая местонахождение файла, вы можете использовать 
либо относительный (relative), либо абсолютный (absolute) адрес. Предположим, 
например, что у вас есть графический файл с именем ciock.jpg, который нахо- 
дится в папке Foider__B, и что Foider_B, в свою очередь, находится в папке 
Folder_A (CM. рИС. 1.8). 
Рис. 1.8. Иерархия папок файла clock.jpg 
Относительный адрес состоит из имен папок, которые необходимы браузеру, 
чтобы добраться до файла, начиная с местонахождения Web-страницы с гиперс- 
сылкой, указывающей на внешний файл. Например, если файл ciock. jpg нахо- 
дится в папке Foider_B (как показано на рис. 1.8), а Web-страница, ссылающая- 
ся на ciock.jpg, находится в папке Foider_A, относительным адресом 
ciock.jpg на данной Web-странице будет Foider__B/ciock. jpg. Иными словами, 
текущая папка содержит папку Foider__B, которая, в свою очередь, содержит

Глава 1. Основы языка HTML 35 
файл ciock.jpg. В приведенном ниже дескрипторе <img> использован атрибут 
src (от source — источник) с относительным адресом: 
<img src="Folder_A/clock.jpg"> 
Относительный адрес дает Web-браузеру указание начинать поиск файла внут- 
ри папки, содержащей текущий HTML-документ. Например, пусть HTML-доку- 
мент, содержащий рисунок в дескрипторе <img> в предыдущем примере, нахо- 
дится в папке idx_f oider. Тогда относительный адрес в атрибуте src 
подразумевает, что папка Foider_A находится в папке idx__foider. 
Абсолютные адреса, с другой стороны, указывают местонахождение файла, на- 
чиная с верхнего уровня иерархии папок и двигаясь вниз через все промежуточ- 
ные папки к файлу — безотносительно местонахождению текущего Web-докумен- 
та. Абсолютные адреса всегда начинаются с косой черты (/), что отличает их от 
относительных адресов. 
Предположим, например, что файл ciock.jpg находится на диске D В папке 
Foider__B, которая расположена в рамках папки Foider__A. Чтобы задать абсолют- 
ный адрес, вы должны сообщить браузеру, где искать файл, начиная с диска, на 
котором находится содержащая файл папка. В следующем коде показан абсолют- 
ный адрес файла ciock.jpg из данного примера: 
<img src="/D:/Folder_A/Folder_B/clock.jpg"> 
Использование абсолютных адресов затрудняет перенос файлов Web-сайта с 
локального диска на Web-сервер или с одного Web-сервера на другой. Например, 
для того, чтобы успешно пользоваться относительными адресами, вам нужно все- 
го лишь создать на Web-сервере главную папку для сайта и затем поместить все 
документы и вспомогательные файлы в подпапки внутри главной папки — в точ- 
ности как на вашей машине, на которой разрабатывался сайт. Относительные ад- 
реса будут работать на Web-сервере так же, как и на вашей машине — даже если 
остальная иерархия папок на Web-сервере совершенно не похожа на вашу. И на- 
против, если вы используете абсолютные адреса, Web-сервер должен иметь в точ- 
ности ту же иерархию папок, что и ваша система, чтобы сервер смог находить 
файлы, указанные в гиперссылках на ваших Web-страницах. 
Загрузка и установка персонального Web-сервера 
Как вы уже знаете, Web-страницы, которые вы создаете и сохраняете на ло- 
кальном или сетевом диске, можно отображать с помощью вашего Web-браузера, 
не подключаясь к Internet или Web-серверу. Просто введите путь к .html-файлу 
(файлу Web-страницы) в виде File://<путь__к_файлу_. ььт1>в адресной строке 
Web-браузера. Таким образом, если вы сохраните Web-страницу с именем 
TestPage.htm в корневой папке диска с, вы сможете отобразить страницу в Web- 
браузере, введя File://C:/MyWebs/TestPage.htm. 
Чтобы ваши Web-страницы были доступны другим пользователям через 
Internet, вам нужен Web-сервер. Кроме того, как вы узнаете из глав 10, 11 и 1 
Web-сервер также необходим, если вы хотите запускать на выполнение серверные

Глава 1. Основы языка HTML 
сценарии (программы, которые запускает и выполняет Web-сервер от имени ва- 
шей Web-страницы). Если вы работаете под управлением одной из операцион- 
ных систем Windows (Windows 95, 98, Me, NT или ХР), вы можете установить 
персональный Web-сервер (Personal Web Server — PWS) на своем персональном 
компьютере или сетевой рабочей станции бесплатно. После того, как вы устано- 
вите PWS и подключитесь к Internet, другие пользователи World Wide Web смогут 
просматривать Web-страницы, которые вы опубликуете на своей машине. Поми- 
мо этого, с помощью Web-сервера вы сможете тестировать Web-страницы, кото- 
рые посылают на сервер введенную в формы информацию, и страницы с сервер- 
ными сценариями, реализованными, например, на РНР или Active Server Pages (о 
которых мы расскажем в главах Ш и И). 
ПРАКТИКУМ 
Если у вас есть компакт-диск с дистрибутивом Windows 98, вставьте его в привод 
и 
пропустите описанную ниже процедуру выгрузки; PWS находится в папке 
\Add-Ons\PWS\ на Windows 98 CD. В противном случае вам потребуется устано- 
вить PWS из пакета дополнений Windows NT 4 Option Pack, который можно выгру- 
зить из Web-сайта Microsoft, выполнив следующие действия: 
1. Если у вас нет постоянного соединения с Internet, с помощью модема устано- 
вите соединение по коммутируемой линии через своего Internet-провайдера. 
2. Откройте Web-браузер и наберите в адресной строке следующий URL- 
адрес http://www.microsoft.com/msdownload/ntoptionpack/askwiz.asp; 
затем нажмите ENTER. 
3. На странице Windows NT 4 Option Pack щелкните на гиперссылке Option 1. 
Ваш браузер, в свою очередь, отобразит Web-страницу Download Step 2, где 
вы сможете выбрать операционную систему, для которой вы хотите загру- 
зить программу загрузки пакета NT 4 Option Pack. 
4. На странице Download Step 2 с помощью выпадающего меню выберите 
свою операционную систему. За исключением случаев, когда вы устанавли- 
ваете PWS на рабочей станции NT или NT-сервере, выбирайте опцию 
Windows 95. Для рабочей станции NT выберите NT Workstation, а для NT-сер- 
вера вместо PWS установите Internet Information Server (IIS). Затем щелкните 
на кнопке Next (Далее). Браузер отобразит Web-страницу Download Step 3. 
5. На странице Download Step 3 щелкните на гиперссылке download.exe, нахо- 
дящейся вблизи нижнего правого угла Web-страницы. Windows, в свою 
очередь, выведет на экран диалоговое окно File Download (Загрузка файла). 
6. В диалоговом окне File Download щелкните на переключателе Save This 
Program to Disk (Сохранить программу на диске) и затем на кнопке ОК. 
Windows выведет на экран диалоговое окно Save As (Сохранить как...). 
7. В диалоговом окне Save As в выпадающем списке справа от поля Save In 
(Сохранить в...) выберите папку, в которой вы хотите сохранить файл-про- 
грамму downfoad.exe, например, папку C:\My Download Files; затем щелкните 
на кнопке Save (Сохранить).

Глава 1. Основы языка HTML 37 
8. В среде Windows с помощью Проводника откройте папку, в которой вы со- 
хранили файл download.exe. Запустите приложение на выполнение. Сразу 
же после запуска download.exe выведет на экран лицензионное соглашение 
на пакет дополнений Windows NT 4 Option Pack. 
9. Внимательно прочтите лицензионное соглашение и щелкните на кнопке 
Yes, чтобы продолжить установку. Программа выгрузки, в свою очередь, 
выведет на экран диалоговое окно Download Options (Выбор типа загрузки). 
10. В диалоговом окне Download Options щелкните на переключателе Download 
Only (Только загрузка) и затем на Next. Программа выгрузки выведет на эк- 
ран окно Language and CPU/Operating System Options (Выбор языка и процес- 
сора/операционной системы). 
11. В окне Language and CPU/Operating System выберите язык и процессор/опе- 
рационную систему; затем щелкните на Next. Далее программа выгрузки 
выведет на экран окно Installation Options (Выбор типа установки). 
12. В окне Installation Options щелкните на переключателе Full Installation 
(Пол- 
ная установка) и затем на Next. Программа выгрузки выведет на экран окно 
Save In Folder (Сохранить в папке). 
13. В окне Save In Folder введите папку, в которую программа выгрузки должна 
будет сохранить файлы пакета NT 4 Option Pack (например, 
C:\PWSSetupFiles). Затем щелкните на Next. Программа выгрузки выведет на 
экран диалоговое окно Download Location (Местонахождение сайта загрузки) 
со списком сайтов, из которых можно выгрузить пакет NT 4 Option Pack. 
14. В диалоговом окне Download Location выберите ближайший к вам (геогра- 
фически) сайт для выгрузки (если в списке присутствует более одного сай- 
та). Затем щелкните на Next. Программа выгрузки предоставит вам серти- 
фикат безопасности выбранного сайта. Щелкните на Yes, чтобы принять 
сертификат и завершить загрузку NT 4 Option Pack. 
После выполнения шага 14, программа выгрузки выгрузит пакет NT 4 Option 
Pack из выбранного вами сайта и сохранит его файлы в папке, введенной вами 
при выполнении шага 13. 
Перед тем, как вы сможете запустить PWS, вы должны установить это прило- 
жение на своем компьютере. Вне зависимости от того, выгрузили ли вы NT 4 
Option Pack или пользуетесь компакт-диском дистрибутива Windows 98, выпол- 
ните следующие действия для установки PWS: 
1. Запустите на выполнение программу setup.exe — либо с компакт-диска 
Windows 98 (x:\Add-Ons\Pws\setup.exe, где х — буквенное обозначение 
привода для чтения компакт-дисков) или из папки, имя которой вы ввели 
в шаге 13 вышеописанной процедуры выгрузки. 
2. В первом окне программы установки щелкните на кнопке Next (Далее). 
Программа setup.exe выведет на экран лицензионное соглашение конеч- 
ного пользователя PWS. Внимательно прочтите соглашение и щелкните на 
Accept (Принять) для продолжения установки. Программа установки, в свою

38 Глава 1. Основы языка HTML 
очередь, выведет на экран диалоговое окно Installation Options (Выбор типа 
установки) либо Select Components (Выбор компонентов). (Какое из диалого- 
вых окон откроет программа, значения не имеет и зависит от того, заме- 
няете ли вы более старую версию PWS на новую (переустанавливаете теку- 
щую версию) или устанавливаете Web-сервер впервые.) 
3. В диалоговом окне Installation Options пибо Select Components щелкните на 
кнопке Next для принятия типа установки по умолчанию. 
После завершения шага 3 программа установки произведет установку про- 
граммного обеспечения PWS и предложит перезагрузить компьютер. При пере- 
загрузке компьютера Windows загрузит и запустит PWS. Поэтому, увидев рабочий 
стол Windows, обратите внимание на системную панель справа от панели задач 
Window: на ней появится пиктограмма PWS. Приведенный ниже практикум по- 
кажет, как работать с Web-сервером, и научит вас публиковать свои Web-страни- 
цы в корпоративной локальной сети и/или в среде Internet. 
Работа с персональным Web-сервером 
и публикация Web-страниц 
Установив персональный Web-сервер (PWS), как было описано в предыдущем 
практикуме, вы должны научиться запускать и останавливать Web-сервер и опре- 
делять местонахождение домашнего каталога Web-сервера. Все это делается с по- 
мощью диспетчера PWS (Personal Web Manager), открыть который можно разны- 
ми способами в зависимости от вашей операционной системы. 
Щ ПРАКТИКУМ ЩШШШШ 
Самый простой способ запустить диспетчер PWS — выполнить двойной щелчок на 
пиктограмме программы в системном лотке Windows (справа от строки состояния 
Windows). Или же, в Windows 98, выберите Start | Programs | Microsoft Personal 
Web 
Server (Пуск | Программы | Microsoft Personal Web Server) и затем Personal Web 
Manager. 
После запуска диспетчер PWS выведет на экран главное (Main) окно програм- 
мы, которое содержит имя вашего Web-сервера и домашний каталог сервера, ана- 
логично показанному на рис. 1.9. 
Диспетчер PWS отображает имя вашего Web-сервера синим шрифтом в верх- 
ней части окна. Любой из пользователей, работающих на вашей рабочей стан- 
ции или на другой рабочей станции в вашей локальной сети может с помощью 
имени Web-сервера просматривать Web-страницы на вашем PWS. (Изменить имя 
своего Web-сервера можно, просто поменяв имя своего компьютера на закладке 
Идентификация в диалоговом окне Сеть панели управления.) Главное окно дис- 
петчера PWS показывает также корневую папку PWS — синим шрифтом сразу же 
под именем вашего Web-сервера.

Глава 1. Основы языка HTML 39 
Eropetties Mew 
Mam 
• Щ 
Publish 
Web Site 
, Tour 
~~& 
Advanced 
Help 
Main 
Pubfishing 
V/eb publishing is on. Your home page is available at 
.'cp | Click Stop lo moke the ilems on your site unavailable 
Your home directory UillKU itiiaHflttflJ 
(Та change published directories, dick11Attwar.?ed1'inthelistflnlhe left) 
Monitoring 
Vieai Statistics; 
Requests per Day 
17.09.03 
Visitors1 1 
Requests. 12 
Bytes served: 6594 
n 1 
- Рис. 1.9. Главное окно пакета Personal Web Manager 
Зная имя Web-сервера и домашний каталог, вы готовы к публикации своих 
Web-страниц. Предположим, например, что именем вашего компьютера (и, сле- 
довательно, вашего PWS) является konrad, а домашним каталогом сервера — 
C:\WebShare\wwwroot. ЕСЛИ ВЫ поместите Web-СТранИЦу, например, TestPage.htm, 
в папку C:\webshare\wwwroot на вашем компьютере, вы (и любой пользователь 
рабочей станции, подключенной к вашей локальной сети) сможет вывести Web- 
страницу на экран, набрав в адресной строке браузера http://konrad/ 
TestPage.htm И нажав ENTER. 
Теперь предположим, что вы создали папку в домашнем (корневом) каталоге 
своего Web-сервера, скажем, HTDOCS, а затем поместили в эту папку Web-стра- 
ницу, например TestPage2.htm. Именем пути ДЛЯ TestPage2.htm будет 
c:\WebShare\wwwroot\htdocs\TestPage2.htm. Однако, работая С браузером, ДЛЯ 
отображения этой страницы вы бы набрали в адресной строке браузера следую- 
щий URL-адрес: http: //konrad/htdocs/TestPage2.htm. 
Помимо браузеров на рабочих станциях, подключенных к вашей локальной 
сети, вы можете разрешить доступ к своим Web-страницам и любым другим ком- 
пьютерам через Internet. Для этого вам потребуется подключить ваш компьютер 
к Internet и дать тем, кто захочет зайти на ваши страницы, точный IP-адрес. 
Примите во внимание, что если ваш Internet-провайдер не присвоил вам посто- 
янный IP-адрес (обычно за это взимается небольшая ежемесячная плата), ваше- 
му PWS могут присваиваться разные IP-адреса каждый раз, когда вы подключаете 
свой компьютер (и Web-сервер) к Internet. 
Если ваш Internet-провайдер не присвоил вашему компьютеру статический IP- 
адрес, вы можете узнать свой текущий IP-адрес, запустив утилиту ipconfig.exe. 
ipconfig.exe запускается в командной строке MS-DOS. Чтобы начать сеанс MSDOS, 
выберите Start | Run (Пуск | Выполнить...). Windows, в свою очередь, отобра- 
зит диалоговое окно Run (Запуск программы). В окне Run в поле Open (Открыть:)

40 Глава 1. Основы языка HTML 
наберите command.com. Затем нажмите ENTER или щелкните на кнопке ОК. В 
командной строке MS-DOS наберите ipconfig.exe и нажмите ENTER. Утилита 
ipconfig выведет ваш IP-адрес сразу же перед маской подсети (Subnet Mask), 
как показано на рис. 1.10. 
^J | i ha] QlщШ AJ 
Рис. 1.10. Утилита ipconfig, показывающая IP-адрес компьютера 
(Windows-версию ipconfig.exe можно выполнить, войдя в Start | Run (Пуск 
Выполнить...) и набрав в поле Open (Открыть:) окна Run строку winipcfg.exe.) 
Зная 
IP-адрес компьютера, замените IP-адресом имя Web-сервера, чтобы к Web-стра- 
ницам сервера можно было обращаться через Internet. Например, если IP-адрес 
компьютера — 24.234.31.218, то, чтобы получить доступ к Web-страницам из вы- 
шеприведенного примера из Internet, вам потребуется воспользоваться одним из 
следующих адресов: 
http://24.234.31.218/TestPage.htm 
http://24.234.31.218/HTDocs/TestPage2.htm 
Определив IP-адрес компьютера, вы можете предоставить этот адрес другим 
людям. Однако следует иметь в виду, что, если ваш Internet-провайдер не при- 
своит вашему компьютеру статический, постоянный IP-адрес, IP-адрес будет ме- 
няться всякий раз, когда вы отключаетесь и вновь подключаетесь к Internet. Бо- 
лее того, IP-адрес может измениться (о чем вы не будете знать), даже если у вас 

имеется постоянное подключение к Internet. Если IP-адрес вашего Web-сервера 
изменится, у пользователей, которые будут пытаться просматривать ваши Web- 
страницы с использованием старого IP-адреса, ничего не выйдет — даже несмот- 
ря на то что PWS будет работать, а ваш компьютер будет подключен к Internet. 
Выход один — связаться со своим Internet-провайдером и попросить его при- 
своить вам статический IP-адрес. В настоящее время Internet-провайдер не смо- 
жет присвоить вашему компьютеру статический IP-адрес, если вы подключаетесь 
к Internet через коммутируемое соединение по обычной телефонной линии — 
для этого нужно подключение через ISDN, DSL или модем для физической ли- 
нии. Получив статический IP-адрес, вы должны ввести этот адрес в диалоговое 
окно TCP/IP Properties (Свойства TCP/IP) на своем компьютере. Для этого необ- 
ходимо выполнить следующие действия:

Глава 1. Основы языка HTML 41 
1. Выберите Start | Settings (Пуск | Настройка), затем Control Panel (Панель 
управ- 
ления). Windows, в свою очередь, откроет панель управления. 
2. В окне панели управления выполните двойной щелчок на пиктограмме 
Network (Сеть). Windows откроет диалоговое окно Network (Сеть). 
3. На вкладке Configuration (Конфигурация) диалогового окна Network выберите 
компонент ТСРДР из числа установленных. (Если на вашей машине уста- 
новлена операционная система Windows NT, протокол TCP/IP будет нахо- 
диться на вкладке Protocols (Протоколы) диалогового окна Network.) Затем 
щелкните на кнопке Properties (Свойства). Windows должна открыть диало- 
говое окно ТСРДР Properties (Свойства: TCP/IP). 
4. На вкладке Address (IP-адрес) щелкните на переключателе Specify An IP 
Address (Указать IP-адрес явным образом). Затем введите IP-адрес и маску 
подсети, назначенные вам Internet-провайдером. 
Выполнив шаг 4, щелкните на кнопке ОК в нижней части диалогового окна 
ТСРДР Properties, а затем на кнопке ОК в нижней части диалогового окна Network. 

После этого Windows обновит установки системы и предложит перезагрузить 
компьютер. После перезагрузки компьютера и восстановления подключения к 
Internet PWS будет постоянно доступным по одному и тому же (статическому) 
IP-адресу. 
Имея статический IP-адрес, вы затем сможете приобрести доменное имя — 
либо через своего же Internet-провайдера, либо у регистратора доменных имен, 
например, VeriSign (http://www.NetSoi.com). Приобретя доменное имя, напри- 
мер, MyWebServer.com, попросите своего Internet-провайдера связать доменное 
имя с вашим статическим IP-адресом на сервере доменных имен (Domain Name 
Server — DNS) провайдера. Теперь, когда доменное имя указывает на ваш компь- 
ютер, любой из пользователей Internet сможет просмотреть Web-страницы на ва- 
шем PWS с помощью либо соответствующего IP-адреса (как было показано 
выше), либо обращаясь к Web-серверу с помощью вновь приобретенного домен- 
ного имени, как показано ниже: 
http://www.MyWebserver.com/TestPage.htm 
http://www.MyWebserver.com/HTDocs/TestPage2.htm 
Если вы подключаетесь к Internet по коммутируемой линии или не хотите 
платить за статический IP-адрес и использовать один из своих компьютеров в 
качестве Web-сервера, ваш Internet-провайдер может разместить разработанный 
Web-сайт на собственном сервере. Многие провайдеры предлагают 5—10 Мб (или 
больше) Web-пространства, предоставление которых входит в плату за подключе- 
ние к Internet. Свяжитесь со своим провайдером или регистратором доменных 
имен (например, VeriSign), чтобы узнать о предоставляемых ими услугах хостинга 
Web-сайтов. Если ваш сайт будет размещен на сервере Internet-провайдера или 
другой компании, вы просто скопируете Web-страницы, которые хотите опубли- 
ковать, в иерархию папок Web-сайта на жестком диске компании, предоставив- 
шей хостинг, вместо корневого каталога PWS (и подкаталогов корневого каталога) 
на локальном жестком диске.

42 Глава 1. Основы языка HTML 
Обратите внимание, что после установки PWS Windows автоматически запус- 
кает Web-сервер всякий раз, когда вы перезапускаете компьютер. Чтобы остано- 
вить Web-сервер, щелкните на кнопке Stop под именем Web-сервера в верхней 
части главного окна диспетчера PWS. (После остановки PWS будет находиться в 
состоянии ожидания до тех пор, пока вы не перезапустите Web-сервер вруч- 
ную - даже если вы будете перезапускать компьютер в течение этого промежутка 
времени.) Чтобы перезапустить Web-сервер, щелкните на кпопке Start, которая 
появляется вместо кнопки Stop, щелчком на которой был остановлен Web-сервер. 
(Остановить или приостановить Web-сервер можно также, выбрав в меню 
Properties пункт Stop Service (Остановить) или Pause Service (Приостановить); 
чтобы 
вновь запустить Web-сервер, выберите в меню Properties пункт Start Service (На- 

чать) или Continue Service (Продолжить)). 
Описание содержимого Web-страницы 
при помощи заголовка 
Когда вы путешествуете по просторам Web, ваш браузер отображает название 
каждой Web-страницы, которую вы просматриваете, в строке заголовка браузера 
(горизонтальной полосе у верхней границы окна приложения браузера). Назва- 
ние Web-страницы сообщает "имя" страницы и в нескольких словах описывает ее 
предназначение, как показано на рис. 1.11. 
Название Web-страницы 
. E*» Ed. S 
*(j*m]Ch»p"» 
Баск 
> • 
Ш и 
I 
Ц 
PDF . 1 
Favorites Xooi 
m adobe cmv'ma 
• 
j 
J 
docurr 
b°'.in' 
For~cr< 
Web, 
mj t h . pow. 
en=i«,C i t . z e 
.Id 
Refresh 
r of 
lications 
atiue profeuionali In 
ertnfc and digital video 
topporl 
Adobe 
Com* (M for 
• •, 
J ^i J -Л- 
Search F^wnles Misrwy Mail 
InDesign Щ/Г 
ourfdf why rnore deflQnen^ 
udlo editing application deliver* 
/ith the Acrob»( 6.0 family, ea;ilv _lj 
Рис. 1.11. Название Web-страницы отображается в заголовке окна браузера

Глава 1. Основы языка HTML 43 
ПРАКТИК) 
Чтобы создать заголовок Web-страницы, поместите текст названия между началь- 
ным и конечным дескрипторами заголовка ( < t i t i e x / t i t i e > ) в 
заголовочной ча- 
сти HTML-кода Web-страницы: 
<html> 
<head> 
<title>flo6po пожаловать на сайт 
страница-приветствие </title> 
</head> 
<body> 
... Здесь находится отображаемое 
</body> 
</html> 
Энди "Книга о Photoshop" - 
Web-браузером содержимое ... 
Название каждой Web-страницы должно предоставлять описание содержимого 
Web-страницы, предназначенное для потенциальных посетителей сайта. Всякий 
раз, когда посетитель бросает взгляд на строку заголовка окна приложения, на- 
звание страницы должно напомнить ему о предназначении Web-страницы, в 
данный момент отображаемой браузером. В Web-сайте, состоящем из множества 
страниц, названия страниц играют роль дорожных указателей. ; 
Однако названия не только напоминают посетителям, где именно на вашем 
Web-сайте они находятся. Названия используются также в следующих целях: 
• Web-браузеры используют текст названия, когда посетитель делает закладку 
на странице, то есть когда посетитель добавляет Web-страницу в список 
Избранное в Internet Explorer или в список Закладки в Netscape Navigator. 
Название вроде "Главная страница" не облегчает идентификацию вашей 
Web-страницы среди других закладок на компьютере посетителя. 
• Программы-спайдеры (программы автоматизированного поиска в Internet) 
используют текст названия при добавлении вашей страницы в базы дан- 
ных поисковых систем. Опять-таки, название "Главная страница" не предо- 
ставляет никакой полезной информации. Используйте в своих названиях 
описательные формулировки — слова, которые посетители могут ввести в 
поле поиска поисковой системы, пытаясь найти ваш Web-сайт. 
• Текст названия помогает вам, Web-автору, управлять большими многостра- 
ничными Web-сайтами. Для вас название — это заголовок, идентифициру- 
ющий страницу. Если ваш Web-сайт содержит пятнадцать страниц, назва- 
ния помогут вам быстро найти ту страницу, с которой необходимо работать. 
Например, на сайте агентства по недвижимости названия могут использо- 
ваться для обозначения страниц "Продам дом" или "Сдам в аренду". 
Кроме этих функций, консорциум W3C считает Web-страницу, не имеющую 
названия, недействительной или нелегальной. Термин "нелегальная" ("illegal") не 

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

44 Глава 1. Основы языка HTML 
Идентификация Web-документов с помощью 
определения типа документа 
Один из самых лучших способов научиться тонкостям HTML — это просмат- 
ривать HTML-операторы, используемые в коде Web-страниц, которые встречают- 
ся вам в ваших путешествиях по Web. Чтобы просмотреть исходный HTML-код 
Web-страницы, выберите пункт Source (В виде HTML) в меню View (Вид) вашего 
браузера. (Если вы пользуетесь Netscape Navigator, выберите View | Page Source 
(ВИД | Источник страницы)). Анализируя Web-страницы, вы обнаружите, что во 
многих HTML-документах в начале Web-страницы присутствует дескриптор типа 
документа (<fdoctype>). 
ЦЦЦЦЦЦЦ^ЦЦЦЩ ПРАКТИКУМ 
Определение типа документа (Document lype Definition — DID) идентифицирует 
версию языка HTML, использованную при создании Web-страницы. Эта информа- 
ция важна для Web-браузеров, программ проверки HTML-кода и другого про- 
граммного обеспечения, применяемого для дизайна и компоновки Web-страниц. 
Чтобы проверить существующий HTML-документ, зайдите на сайт http:// 
vaiidator.w3c.org. Программа проверки HTML-кода проверяет организацию и 
синтаксис Web-документа на основании информации, предоставленной в DTD. 
Когда в объявлении указано, что документ соответствует строгой версии HTML 
4.01, программа проверки оценивает Web-страницу исходя из стандарта HTML 
4.01 и генерирует отчет о результатах анализа. 
В будущем знание версии HTML, использованной для создания Web-страни- 
цы, будет помогать Web-браузерам и другим программам отображать Web-страни- 
цы с большей точностью. Собственно говоря, консорциум W3C считает Web- 
страницу, созданную с применением версии HTML 4 недействительной, если 
HTML-документ не начинается с DTD. DTD находится в начале документа, до 
дескриптора <htmi>. Ниже показан корректный формат типового DTD: 
<?doctype html public "названиеверсии" "URL-aMpec"> 
• html. Идентифицирует код как версию языка HTML. 
• public. Идентифицирует язык как общедоступный. 
• название версии. Идентифицирует полное название конкретной версии 
языка HTML. Например, полное название HTML 4.0 — это -//W3C//DTD 
HTML 4.01 Transitional//EN. 
• икь-адрес. Указывает, где в Internet находится общедоступное определение 
HTML-КОДа, например, www.w3.org/TR/html4/loose.dtd. 
Действительным DTD для Web-страницы, описанной с помощью HTML 4.01, 
будет следующее: 
<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN" 
"www.w3.org/TR/html4/loose.dtd">

Глава 1. Основы языка HTML 45 
Опция loose. dtd в вышеприведенном коде объявляет, что документ может 
включать все элементы, разрешенные "строгим" стандартом HTML 4, дополни- 
тельные атрибуты описания представления, а также может включать нерекомен- 
дованные элементы. Напротив, использование в DTD strict.dtdобъявило бы, 
что документ строго соответствует стандарту HTML 4. Строгая версия HTML 
4.01 придает большее значение структуре HTML-документа, нежели представле- 
нию страницы в Web-браузере. Это не значит, что строгая версия HTML 4.01 
преуменьшает значение представления Web-страницы; она просто концентриру- 
ется на структуре кода разметки HTML. Нерекомендованные дескрипторы и эле- 
менты, такие как фреймы и цели ссылок, в строгом HTML не допускаются. Тре- 
тье определение типа документа, frameset.dtd, используется при проверке 
HTML-документов, содержащих фреймы. 
В настоящее время ни Netscape Navigator, ни Internet Explorer не требуют 
включения DTD до начала HTML-кода вашей Web-страницы, то есть перед на- 
чальным дескриптором HTML (<htmi>) в верхней части вашего Web-документа. 
Однако в начало всех страниц, написанных с использованием версии HTML 4.0 
и 1зыше, следует помещать DTD. Таков совет консорциума W3C: то, что сегодня 
является необязательным, в недалеком будущем может стать требованием. По- 
этому будьте во всеоружии и используйте DTD во всех своих Web-страницах уже 
сейчас. (В целях экономии пространства и упрощения кода в примерах, приве- 
денных в этой книге, определения типа документов опущены.) 
Вставка комментариев в Web-документы 
С помощью HTML-комментариев можно напомнить себе и всем тем, кто бу- 
дет в будущем работать над вашими HTML-документами, о чем именно вы дума- 
ли при создании той или иной Web-страницы. С помощью комментариев можно 
дать объяснение определенных фрагментов документа. Кроме того, комментарии 
можно использовать для вставки своей личной информации — фамилии и име- 
ни, адреса, телефона в HTML-код Web-страницы, так что каждый, кто заинтере- 
суется в ваших услугах как Web-дизайнера, будет знать, как с вами связаться. 
Помимо этого, с помощью комментариев можно временно скрыть некоторые 
из HTML-операторов Web-документа от Web-браузера. Предположим, например, 
что вы хотите добавить фрагмент HTML-кода в существующий документ, но не 
хотите, чтобы браузер отображал новое содержимое до тех пор, пока руководство 
не даст соответствующего разрешения. Поставив HTML-дескрипторы коммента- 
риев (<«— -->) до и после утверждений, которые вы хотите скрыть, вы дадите 
Web-браузеру указание игнорировать эти утверждения, пока вы не удалите деск- 
рипторы комментариев. 
ПРАКТИКУМ 
Чтобы создать комментарий, заключите информативный текст (или HTML-опера- 
торы, которые вы хотите закомментировать) между начальным и конечным деск- 
рипторами Комментария, таКИМИ как <!— комментарий -->. 
Ставить начальный дескриптор комментария перед каждой строкой текста 
или HTML-утверждением необязательно; Web-браузер будет игнорировать все,

46 Глава 1. Основы языка HTML 
что он обнаружит после начального дескриптора комментария и- до следующего 
конечного дескриптора комментария. Например, в следующем фрагменте кода 
показаны три строки комментариев, вставленные в заголовочный раздел Web- 
страницы: 
<head> 
<title>flOKyMeHT, содержащий KOMMeHTapnn</title> 
<! -- Автор Энди Андерсон > 
Компания One-of-a-Kind Productions, Inc. 
Контактная информация 316 333 4444 -- > 
</head> 
Хотя Web-браузер не выводит на экран информацию, которую вы поместили 
между начальным и конечным дескрипторами комментария, посетитель сайта 
все же может прочесть комментарии, дав Web-браузеру указание отобразить 
HTML-код Web-страницы. Браузер, в свою очередь, отобразит исходный код 
(включая комментарии) HTML-документа в отдельном* окне документа. 
Помимо использования комментариев для предоставления личных данных, 
комментарии можно использовать и в учебном' процессе — так вам будет проще 
объяснить своим студентам назначение отдельных HTML-дескрипторов и атри- 
бутов. Кроме того, с помощью комментариев можно предотвратить вывод на эк- 
ран внедренных сценариев, когда Web-браузер не поддерживает дескриптор сце- 
нария, как показано в нижеприведенном фрагменте кода: 
<html> 
<head> 
<script language = "JavaScript"> 
. • 
function Displaylt() 
alert("Эта JavaScript-функция отображает 
в окне браузера данный текст!") 
return; 
</script> 
</head> 
<body> 
. . . Здесь находится содержимое Web-страницы, которое должен 
отобразить браузер . . . 
</body> 
</html> 
Без дескрипторов комментариев, обрамляющих описание JavaScript-функции 
в этом примере, Web-браузеры, не поддерживающие дескриптор сценария, могут 
проигнорировать этот дескриптор и вывести на экран JavaScript-код в виде тек- 
ста. И, наоборот, браузеры, которые поддерживают сценарии, будут игнорировать 
HTML-дескрипторы комментария, поскольку в сценариях для обозначения ком- 
ментариев используются /* и */.

Глава 1. Основы языка HTML . 47 
Определение гарнитуры шрифта текста Web-страницы 
При отображении текста Web-страницы Web-браузер будет использовать гар- 
нитуру и размер шрифта, установленные в браузере по умолчанию, если вы не 
определите размер и гарнитуру шрифта в HTML-коде Web-страницы. Управлять 
размером и внешним видом шрифта нужно ввиду того, что то, как выглядит 
текст, задает "общий настрой" страницы. Публикация не сводится к одним лишь 
словам, не меньшее значение имеет и ее подача. Например, дизайнеры исполь- 
зуют гарнитуру и размер, чтобы подчеркнуть важность тех или иных фрагментов 
текста: вот почему заголовки крупнее и зачастую выделены другой гарнитурой 
шрифта, отличной от текста основной части документа. 
Выбранная вами гарнитура шрифта передает настрой и создает атмосферу, в 
которой посетитель читает ваше сообщение. Использование неправильной гар- 
нитуры сбивает посетителя с толку, поскольку содержимое кажется неуместным. 
Например, в ряде исследований (одно из которых проводилось Йельским уни- 
верситетом) было установлено, что шрифты с засечками (serif) передают более 
серьезный тон, чем шрифты без засечек.(sans serif). Следовательно, шрифт вроде 
Helvetica или Times New Roman будет использоваться для официального доку- 
мента, a Comic Sans или Arial подойдет для менее серьезного или неформально- 
го сообщения, как показано в примерах ниже: 
Шрифты с засечками, например, Times New Roman, 
придают тексту официальный Шрифты за- 
сечками следует использовать для передачи серь- 
езного тона документа. 
С другой использование шрифтов 
без засечек, например/ Comic Sans, при- 
даст документу менее формальный вид. 
ШЯШШШШШШ ПРАКТИКУМ 
Чтобы изменить гарнитуру шрифта, заключите текст между начальным и конеч- 
ным дескрипторами в виде: 
<font face="гарнитура"> 
. . . Текст Web-страницы, который должен быть выведен указанным шрифтом 
</font> 
Атрибут face сообщает Web-браузеру, какую гарнитуру шрифта использовать 
при выводе текста Web-страницы на экран. Например, начальный дескриптор 
шрифта <font> дает браузеру указание отображать идущий после дескриптора 
текст шрифтом Helvetica до тех пор, пока браузер не обнаружит дескриптор 
</font>: 
<font face="helvetioa">3TOT текст выводится шрифтом Helvetica</font> 
Прочитав дескриптор </f ont> в HTML-коде Web-страницы, браузер вернется 
к отображению текста страницы своим шрифтом по умолчанию.

48 Глава 1. Основы языка HTML 
Таким образом, атрибут face дает Web-браузеру указание искать на хосте тот 
или иной шрифт (в данном примере — Helvetica). Этот шрифт Web-браузер будет 
использовать для отображения текста, помещенного между начальным и конеч- 
ным дескрипторами шрифта (<fontx/font>). Однако если на компьютере посе- 
тителя не установлен шрифт, указанный в дескрипторе <font>, Web-браузер бу- 
дет использовать вместо него свой шрифт по умолчанию. 
Посетитель сайта может установить шрифт по умолчанию браузера, изменив 
настройки Web-браузера. Например, чтобы изменить шрифт по умолчанию в 
Internet Explorer 5, в меню Tools (Сервис) выберите Internet Options (Свойства 
обо- 
зревателя). Затем щелкните на кнопке Fonts (Шрифты). Internet Explorer, в свою 
очередь, выведет на экран диалоговое окно Fonts (Шрифты), в котором можно выб- 
рать шрифт, используемый браузером для отображения Web-страниц (и исходного 
HTML-кода) по умолчанию. Шрифт, установленный по умолчанию, говорит Web- 
браузеру посетителя, какое начертание шрифта использовать, если в Web-доку- 
менте не указан шрифт или указанного шрифта нет на компьютере посетителя. 
Кроме указания основного шрифта, атрибут face позволяет выбрать второй, 
третий и даже четвертый шрифт. Например, вы хотите, чтобы текст вашего доку- 
мента отображался с использованием шрифта Helvetica. Однако если на компью- 
тере посетителя нет шрифта Helvetica, вместо него можно использовать шрифт 
Georgia. В приведенном ниже фрагменте кода показано, как можно указать аль- 
тернативный шрифт, который будет использован в случае отсутствия основного 
шрифта на компьютере посетителя: 
<font face="helvetica, georgia"> 
Основным шрифтом является Helvetica. Если на компьютере кет шрифта 
Helvetica, браузер будет использовать шрифт Georgia. 
</font> 
Атрибут face дает Web-браузеру указание отображать текст между начальным 
и конечным дескрипторами шрифта (<fontx/font>) шрифтом Helvetica, а если 
шрифта Helvetica на компьютере нет, использовать вместо него шрифт Georgia. 
Если на компьютере нет ни основного, ни какого-либо из альтернативных 
шрифтов, Web-браузер будет использовать свой шрифт по умолчанию. 
При указании шрифтов записывайте названия шрифтов строчными буквами, 
поскольку в этом случае система будет искать название шрифта, записанное как 
строчными, так и заглавными буквами. И наоборот, если вы запишете название 
шрифта заглавными буквами, а на компьютере посетителя шрифт будет установ- 
лен строчными буквами, Web-браузер не найдет нужного шрифта. 
Управление структурой текста с помощью 
дескрипторов абзаца и перевода строки 
Когда вы помещаете на Web-странйцу неформатированный текст, число слов, 
отображаемых браузером на одной строке, определяется шириной окна браузера. 
Неформатированный текст — это просто текст, введенный в HTML-документ 
между начальным и конечным дескрипторами тела документа (<bodyx/body>), 
как показано в следующем коде:

Глава 1. Основы языка HTML 49 
<html> 
<head> 
<title>npnMep неформатированного TeKCTa</title> 
</head> 
<body> 
Мы помещаем в HTML-документ неформатированный текст. Не имеет значе- 
ния, как выглядит текст в HTML-документе, поскольку Web-браузеры не воспри- 
нимают возврат каретки или клавишу Enter как инструменты форматирования. 
</body> 
</html> 
Web-браузеры игнорируют символы возврата каретки и перевода строки, кото- 
рые вставляются в HTML-код Web-страницы нажатием клавиши ENTER для пе- 
рехода на следующую строку при наборе текста. По умолчанию Web-браузеры 
определяют длину каждой строки равной ширине окна браузера, а не числу сим- 
волов на каждой строке HTML-кода Web-страницы. На рис. 1.12 показано, как 
Web-браузер устанавливает длину каждой строки неформатированного текста из 
вышеприведенного отрывка HTML равной ширине окна браузера. 
• Фай/ Орввке 2ип >анное Сервис ©ip 
_ 
- Адрес j g ] httpy/html-webdesign/ChepterCn/FigureGI-i 2.htm 
Ширина окна браузера определяет, где произойдет обрыв строки текста, или 
переход на 
новую строку на странице. Чем шире окно браузера, тем больше текста выводится 
на строке. 
Рис. 1.12. Web-браузеры игнорируют символы возврата каретки и перевода строки 
ПРАКТИКУМ ; : 
Для группировки строк текста в абзацы и определения последнего слова на каж- 
дой строке в языке HTML предусмотрены начальный и конечный дескрипторы аб- 
заца (<рх/р>) и дескриптор <Ьг>. Обнаружив дескриптор <р>, Web-браузер пере- 
ходит на следующую строку на экране, вставляет пустую строку, а затем выводит 
текст, идущий после дескриптора <р>, на следующей строке под пустой строкой. 
Следовательно, чтобы сгруппировать связанные между собой предложения в аб- 
зацные блоки, поместите дескриптор <р> перед первым словом абзаца и дескрип- 
тор </р> после последнего. Например, если HTML-код Web-страницы содержит 
три строки текста, каждая из которых заключена между начальным и конечным 
дескрипторами абзаца (<рх:/р>), Web-браузер отобразит этот текст в виде трех 
аб- 
зацев с пустыми строками между строками текста. 
В отличие от дескриптора <р>, дескриптор <br> не имеет конечного дескрип- 
тора. Обнаружив дескриптор <br> в HTML-коде Web-страницы, Web-браузер пе- 
реходит вниз на следующую строку на экране перед тем, как отобразить осталь- 
ной текст. Таким образом, дать Web-браузеру указание перейти на новую строку 
перед отображением следующего фрагмента текста можно с помощью либо деск- 
риптора <br>, либо дескриптора <р>. Если вы хотите просто перейти на следую-

50 Глава 1. Основы языка HTML 
щую строку, используйте дескриптор <br>; если же вы хотите перейти на следу- 
ющую строку и вставить пустую строку между текущей и следующей строками, 
вам нужно воспользоваться дескриптором <р>. 
Текст в приведенном ниже HTML-коде описывает, как работают дескрипторы 
<р> и <br>, а также как будет выглядеть этот текст в окне Web-браузера (см. 
рис. 1.13): 
<html> 
<head> 
<title>IlpMMep форматированного TeKCTa</title> 
</head> 
<body> 
<р>Вставляем в HTML-документ 
форматированный текст.</р> 
<р> Расстановка дескрипторов абзаца и перевода строки 
в HTML-документе <Ьг> 
определяет обрывы строк в тексте. </р> 
<р> Дескрипторы абзацев оставляют между строками 
текста пустую строку, </р> 
а дескрипторы перевода строки разбивают текст без вставки <br> 
дополнительных пустых строк. 
</body> 
</html> 
Дескрипторы форматирования (такие как <р> и <br>) определяют, где закан- 
чивается строка текста в окне браузера. Говоря языком редактирования текста, 
дескриптор <Ьг> вставляет жесткий возврат каретки, а дескриптор <р> — два же- 
стких возврата каретки. I 
Web-браузер (как и текстовый процессор) выполняет мягкий возврат каретки для 
разбиения текста у правого поля на каждой странице. Помните, что в Web-докумен- 

те правая сторона окна браузера представляет собой правое поле Web-страницы. С 
помощью дескрипторов форматирования вы можете определить последнее слово в 
строке, однако Web-браузер все равно будет вставлять мягкие возвраты каретки, 
что- 
бы каждая строка текста помещалась по ширине в окно Web-браузера. 
айл Правка §ид Избранное Сервис Справка 
- J J Л Л jtl J -> Л Ы • 
Вставляем в HTML-документ форматированный текст. 
Расстановка дескрипторов абзаца и перевода строки в HTML-документе 
определяет обрывы строк в тексте. 
Дескрипторы абзацев оставляют между строками текста пустую строку, 
а дескрипторы перевода строки разбивают текст без вставки 
дополнительных пустых строк. 
Рис. 1.13. Текст в окне Web-браузера форматируется в зависимости от 
использования дескрипторов абзаца и перевода строки

Глава 1. Основы языка HTML 51 
Хотя, как говорилось выше, ширина строки текста определяется шириной 
окна браузера, существуют случаи, когда браузер не должен разбивать строку тек- 

ста. В таком случае нужно вставить запрет перевода строки (&nbsp;) между сло- 
вами, которые браузер должен отобразить вместе на одной строке. Например, 
вам нужно создать подзаголовок для абзаца текста и вы хотите, чтобы заголовок 
оставался на одной строке. Чтобы заставить браузер вывести слова на одной 
строке, вставьте запрет перевода строки между словами подзаголовка, как показа- 

но ниже: 
<html> 
<head> 
<title>IIpHMep использования запрета перевода cTpoKn</title> 
</head> 
<body> 
<font size="7"> Послание АвраамаSnbsp;Линкольна</font> 
<р>Эта страна с ее институтами принадлежит 
людям, которые ее населяют.</р> 
<р>Если они устанут от существующего правительства, они могут 
прибегнуть к своему конституционному праву внести изменения в его 
состав, или к своему конституционному праву распустить или 
свергнуть его.</р> 
<cite>ABpaaM Линкольн</с1Ъе> 
</body> 
</html> 
В данном примере запрет перевода строки, вставленный мтщ словами "Ав- 
раам" и "Линкольн", не позволяет Web-браузеру разбить имя и фамилию прези- 
дента на две строки. Если у браузера не хватает места на текущей строке, чтобы 
отобразить имя и фамилию вместе, браузер отобразит и имя, и фамилию на сле- 
дующей строке, как показано на рис. 1.14. 
Если бы в данном примере между именем и фамилией был просто пробел (а 
не запрет перевода строки), браузер отобразил бы имя на одной строке, а фами- 
лию — н 
файл Правке йид Избранное Сараис Справка 
.&дрес]ф http//Mml-webdesign/Chapter01/Figure01-Rhtm •{ 
щ 
Послание 
Авраама Линкольна 
Эта страна с ее институтами принадлежит людям, которые ее населяют. 
Если они устанут от существующего правительства, они могут прибегнуть к своему 
конституционному праву внести изменения в его состав, или же к своему 
конституционному праву распустить или свергнуть его. 
Авраам Линкольн 
J 
Рис. 1.14. Запрет перевода строки предотвращает вывод имени и фамилии на двух 
строках

Глава 1. Основы языка HTML 
Изменение размера текста с помощью дескрипторов 
уровней заголовков и атрибута size дескриптора шрифта 
При создании Web-документа без указания размера шрифта Web-браузер ото- 
бражает текст с использованием своего размера шрифта по умолчанию. Значения 
по умолчанию, используемые браузерами для размера символов, могут быть раз- 
личными, однако в среднем составляют 12—14 пунктов, что примерно соответ- 
ствует размеру шрифта в этой книге. 
Чтобы вставить в Web-страницу заголовок и контролировать размер его текста, 
заключите текст заголовка между начальным и конечным дескрипторами уровня за- 
головка (от <ы>...</ы> до <h6>...</h6>). Число после буквы "Ь". в начальном 
деск- 
рипторе заголовка определяет относительный размер текста заголовка. Чем меньше 
число после "h", тем более крупным шрифтом будет выведен заголовок. 
; >АКТИ1 
Чтобы задать размер текста на странице с помощью дескрипторов заголовков, по- 
местите текст между начальным и конечным дескрипторами заголовка. Обнаружив 
конечный дескриптор заголовка в HTML-коде Web-страницы, браузер автомати- 
чески помещает идущий после дескриптора текст на следующую строку и возвра- 
щается к использованию своего размера шрифта по умолчанию. Ниже показаны 
шесть уровней размера заголовков, которые можно определить с помощью началь- 
ного дескриптора заголовка, как они отображаются в окне браузера: 
Заголовок 1 
Заголовок 2 
Заголовок 3 
Заголовок 4 
Заголовок 5 
Заголовок 6 
Второй способ изменить размер текста в HTML-документе — это воспользо- 
ваться атрибутом size в дескрипторе <font> в виде <font size="n">, где л — 
число от 1 до 7. При использовании атрибута size, чем больше значение, тем 
больше размер текста — в противоположность дескрипторам заголовка, где с уве- 
личением л размер букв уменьшается. 
Чтобы задать текст с использованием атрибута size, поместите текст между 
начальным и конечным дескрипторами шрифта (<fontx/font>). Ниже показан 
HTML-код дескриптора <font> с атрибутом size, а также как выглядит в окне 
браузера текст каждого размера: 
Шрифт размера 2 
Шрифт размера 3 
Шрифт размера 4 
Шрифт размера 5 
Шрифт размера 6 
Шрифт размера 7

Глава 1. Основы языка HTML . 5 3 
И начальный дескриптор заголовка, и атрибут size в дескрипторе <font> по- 
зволяют установить размер текста; начальный дескриптор заголовка, кроме того, 
дает Web-браузеру указание вывести текст полужирным. 
Следует иметь в виду, что разрешение монитора посетителя влияет на размер 
текста в окне Web-браузера. Текст на мониторе с разрешением 1024x768 пиксе- 
лей кажется меньше, чем текст такого же "размера" на мониторе с более низким 
разрешением, например 800x600 пикселей. Более того, на разных платформах 
текст может также отображаться разными размерами даже при одинаковых разре- 
шениях. На компьютерах Macintosh, например, текст отображается примерно на 
два пункта меньше, чем текст, отображаемый при том же разрешении на машине 
с Intel-архитектурой. 
В стандарте HTML 4 консорциум W3C не рекомендует применять дескриптор 
задания шрифта (<fontx/font>). Поэтому будущие версии Web-браузеров, соот- 
ветствующие требованиям стандартов HTML, могут более не поддерживать этот 
дескриптор. Для управления форматированием текста лучше использовать CSS- 
таблицы, речь о которых пойдет в главе 4 данной книги. 
Изменение цвета текста в HTML-документе 
Без задания цвета текста на странице Web-браузер будет отображать текст 
цветом, заданным в нем по умолчанию, обычно черным. Если вы хотите изме- 
нить цвет слова или группы слов, воспользуйтесь атрибутом color в дескрипторе 
<font>, чтобы сообщить Web-браузеру, какой цвет следует использовать. 
ПРАКТИКУМ 
Предположим, например, вы хотите изменить цвет одного предложения в абзаце. 
Поместите дескриптор <font> с атрибутом вяАягт шищ> <йшй ссо1ог="цве!г"> пе- 
ред самым началом текста, цвет которого требуется изменить. Атрибут color дает 
браузеру указание отобразить заданным цветом текст, идущий после дескриптора. 
Ниже в тексте поместите дескриптор </font> в том месте, где браузер должен бу- 
дет вернуться к своему цвету шрифта по умолчанию. 
Например, атрибут color в дескрипторе <font> после первого предложения в 
следующем HTML-коде дает Web-браузеру указание отобразить второе предложе- 
ние красным цветом: 
Изменяем цвет текста в следующем предложении. 
Вставьте дескриптор задания шрифта с атрибутом 
color в начале и конце строки. Цвет изменится, а 
затем вернется к цвету по умолчанию - черному. 
Затем дескриптор </font> после окончания второго предложения дает Web- 
браузеру указание прекратить использование красного, и при отображении ос- 
тального текста Web-страницы браузер снова использует цвет текста, установлен- 
ный в нем по умолчанию:

54 Глава 1. Основы языка HTML 
<html> 
<head> 
<ЪхЬ1е>Изменение цвета текста</ЬхЪ1е> 
</head> 
<body> 
<р>Изменяем цвет текста в следующем предложении. 
-<font color="red">BcTaBbTe дескриптор задания шрифта с атрибутом 
color в начале и конце строки.</font> 
Цвет изменится, а затем вернется к цвету по умолчанию - черному.</р> 
</body> 
</html> 
Задать значение атрибута color можно с помощью названия или номера. Как 
вы видели в предыдущем примере, можно использовать названия цветов, такие, 
как красный (red), зеленый (green), синий (blue) и т.д. Также можно представ- 
лять цвета в виде шестнадцатеричных триплетов. Например, шестнадцатеричный 
триплет, соответствующий красному цвету, выглядит как #FFOOOO. Следовательно, 
дать указание браузеру отобразить текст красным цветом можно с помощью либо 
<font color="red">, либо <font color="#FF0000">. 
При задании цвета в виде шестнадцатеричного триплета числа в триплете 
обозначают количества красной, зеленой и синей составляющих цвета, которые 
Web-браузер должен смешать для получения требуемого цвета текста. Например, 
черному цвету соответствует шестнадцатеричный триплет #оооооо. Каждое дву- 
значное число в триплете обозначает количество одного из трех основных со- 
ставляющих цвета: красной, зеленой и синей, которые браузер должен взять для 
создания составного цвета. Таким образом, для черного (#оооооо) браузер дол- 
жен смешать "00" красной, "00" зеленой и "00" синей составляющей. И наоборот, 
чтобы создать белый цвет, браузер должен взять максимальные количества крас- 
ной, зеленой и синей составляющих. Отсюда получаем шестнадцатеричный 
триплет белого цвета — #FFFFFF. 
В мире полиграфии выбор цветов, используемых для повышения привлека- 
тельности буклетов и рекламы в журналах, практически неограничен. Видеоадап- 
теры на большинстве компьютеров также способны отображать тысячи, если не 
миллионы цветов. Как на компьютерах Macintosh, так и на Windows-компьюте- 
рах существует кодовая таблица цветов, в соответствии с которой цвета отобра- 
жаются монитором. Если цвет задан с помощью шестнадцатеричного значения, 
Web-браузер обращается к таблице цветов видеоадаптера; если цвет есть в табли- 
це, система правильно отобразит цвет на экране. Если же в таблице цветов пра- 
вильного цвета нет, система создает цвет путем смешивания пикселей существу- 
ющих цветов для получения визуального эквивалента требуемого цвета. 
Много лет назад, когда видеоадаптеры могли отображать максимум 256 цве- 
тов, выбирать цвета было проще (цветов было меньше), однако возможности вы- 
бора цвета были существенно ограничены. Это усложнялось еще и тем, компью- 
терные операционные системы резервировали некоторые из этих цветов для 
своих визуальных интерфейсов (то есть для отображения рабочего стола систе- 
мы). Поскольку операционные системы Windows и Macintosh используют для 
своих визуальных интерфейсов различные наборы цветов (40 цветов), остается

Глава 1. Основы языка HTML 55 
216 цветов (256 — 40 = 216), которые одинаково отображаются в Web-браузерах 
и Windows, и Macintosh. 
Сегодня выбор цветов для создания Web-страниц шире, поскольку видеоадап- 
теры как в компьютерах Macintosh, так и в Windows-компьютерах в состоянии 
отображать миллионы цветов. Тем не менее, цвета по-прежнему создаются как 
комбинации значений красной, зеленой и синей составляющих (триплеты). 
Полный перечень цветов, корректно отображаемых браузерами, в котором при- 
водятся как названия цветов, так и соответствующие значения Шестнадцате- 
рИЧНЫХ ТрИПЛетОВ, МОЖНО наЙТИ ПО адресу http://www.htmlhelp.com/cgi-bin/ 
color.cgi. 
Хотя большинство посетителей оставляют цвет текста по умолчанию в браузе- 
ре черным, некоторые могут выбрать и другой цвет по умолчанию. Поэтому же- 
лательно указывать цвет, который должен использоваться браузером при отобра- 
жении текста вашей Web-страницы, даже если желаемый цвет — черный. Не стоит 
предполагать, что у всех посетителей вашего сайта в браузерах в качестве цвета 
по 
умолчанию установлен именно черный. В главе 4 данной книги вы узнаете, как ус- 
тановить цвет всего текста на странице с помощью нескольких CSS-правил. 
Добавление графики в Web-страницу с помощью 
базового дескриптора <img> 
Путешествуя по Web-сайтам, нельзя не встретить-страницы, содержащие мно- 
жество фотографий и рисунков. Графические изображения оказывают существен- 
ную помощь при объяснении сложных процедур или действий, которые трудно 
описать с помощью одного лишь текста. Помимо этого, большинство посетите- 
лей вашего Web-сайта почувствуют себя несколько неуютно, не обнаружив там 
ничего, кроме текста. Рисунки, там и сям, вставленные в длинное тело докумен- 
та, дают посетителю передышку в чтении текста и, при правильном использова- 
нии, облегчают восприятие текста. Предположим, например, вы хотите создать 
страницу с описанием действий, которые необходимо предпринять для замены 
картриджа в струйном принтере Epson 1520. Несколько продуманных иллюстра- 
ций объяснят процедуру лучше, чем добрый десяток абзацев текста. 
Кроме того, посетители сайта могут изменить шрифт, используемый их брау- 
зерами по умолчанию для отображения текста Web-страницы, поработав с на- 
стройками браузера. Следовательно, текст Web-страницы будет выглядеть по-раз- 
ному у посетителей, у которых в качестве шрифта по умолчанию установлен 
Arial, и у посетителей, в браузерах которых шрифтом по умолчанию выбрана 
Helvetica. Хотя это и досадно, вы уже знаете, как предотвратить такую замену 
шрифта путем задания шрифта, который будет использоваться браузером, не ос- 
тавляя выбор шрифта браузеру посетителя. Настоящая проблема с выбором 
шрифта возникает тогда, когда вам нужно использовать специализированный 
или индивидуальный шрифт - как те, которые применяются, например, для на- 
писания названия компании в логотипе. Помните, что, если указанного шрифта 
нет на компьютере посетителя, браузер отобразит текст установленным в нем 
шрифтом по умолчанию.

56 Глава 1. Основы языка HTML 
Скажем, например, на вашем сайте имеется логотип, текст на котором набран 
шрифтом Skia. Если вы наберете логотип на Web-странице как текст, а в систе- 
ме посетителя шрифт Skia установлен не будет, браузер посетителя заменит его 
на свой шрифт по умолчанию, тем самым полностью изменив внешний вид ло- 
готипа. К счастью, точный вид логотипа (или иного текста) можно сохранить, 
преобразовав текст в графическое изображение (с помощью программы редакти- 
рования изображений вроде Photoshop). Если вы вставите в Web-страницу "кар- 
тинку" текста, текст будет выглядеть одинаково во всех Web-браузерах - даже на 
тех системах, где нет шрифта, использованного во время создания текста. При 
преобразовании текста в графическое изображение, настройки посетителя, опре- 
деляющие использование шрифтов, никак не влияют на текст на рисунке, что 
можно видеть на рис. 1.15. 
I Торгово-иэдательскийдом 
ДИАСОФТ 
J 
Рис. 1.15. Логотипы с текстом, преобразованные в графические изображения, 
корректно отображаются в Web-браузере 
ЩН| ПРАКТИКУМ 
Дескриптор <img> позволяет поместить на Web-страницу графическое изображение 
(как преобразованный текст, так и фотографию или рисунок). Типовой дескриптор 
<img> содержит единственный атрибут src, который сообщает Web-браузеру путь к 
графическому файлу. Следовательно, ваши дескрипторы вставки изображений будут в 

большинстве своем иметь вид <img src="путь/имя__файла">. Обратите внимание, что 

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

сунок из файла photo,jpg, хранящегося в папке images на Web-сервере. 
<img src="images/photo.jpg" width="30Q" height="155"> 
Чтобы HTML-код был правильным, все дескрипторы <img> должны быть по- 
мещены между начальным и конечным дескрипторами тела документа (<body> 
</body>), которые охватывают содержимое Web-страницы, выводимое на экран 
браузером. Приведенный ниже простой HTML-код, будучи обработанным брау- 
зером, выведет на экран графическое изображение house.jpg: 
<html> 
<head> 
<Ь±Ъ1е>Фотография flOMa</title> 
</head> 
<body> 
<centerXimg src="house. jpg" width="400" height="175"X/center> 
</body> 
</html>

Глава 1. Основы языка HTML 57 
Наряду со вставкой простого дескриптора изображения в нужное место 
HTML-документа, вы также можете управлять изображением в окне браузера с 
помощью нескольких атрибутов: 
alt. Атрибут alt предоставляет альтернативный текст для браузеров, кото- 
рые не отображают графику, или браузеров, в которых отображение графи- 
ки отключено пользователем. Альтернативный текст также используется 
браузерами в качестве всплывающей подсказки (текст отображается в пря- 
моугольнике, всплывающем при наведении на изображение курсора мыши) 
и программами чтения для незрячих. 
<img src="images/photo.jpg" alt="Фотография заката во Флориде"> 
• height и width. Атрибуты width (ширина) и height (высота) определяют 
размер рисунка в окне браузера. Всегда задавайте атрибуты height и width 
в своих дескрипторах вставки изображений, чтобы браузер мог отобразить 
остальное содержимое вашей Web-страницы, пока рисунки будут загружаться. 
Когда вы задаете в дескрипторе <img> атрибуты height и width, браузер ре- 
зервирует пространство под рисунки, даже если они загружаются медленно, и 
текст документа будет обтекать предполагаемую область рисунка. 
<img src="images/photo.jpg" width="200" height="55"> 
border. Атрибут border (рамка) дает ширину (в пикселях) рамки, которую 
Web-браузер должен нарисовать вокруг изображения. Если вы используете 
рисунок в качестве привязки гиперссылки, браузер нарисует вокруг него 
рамку. Поэтому рамка вокруг рисунка может навести посетителя на мысль, 
что рисунок является гиперссылкой. Следовательно, значение атрибута 
border рекомендуется устанавливать равным нулю (0). 
<img src="images/photo.jpg" width="200" height="55" border="0"> 
Работа с графикой, а также анимацией и видеоклипами на Web-страницах 
подробно рассмотрена в главах 6 и 7. 
R Изображения - это непременный компонент Web-страниц. Однако Web- 
страницы с большим количеством графики дольше загружаются и отображаются, чем 
Web- 
страницы, содержащие только текст. Будьте осторожны, дабы не перегрузить свои 
Web-стра- 
ницы графикой. Картинка может стоить тысячи слов, но, если ваша страница 
слишком долго 
загружается, никто не будет ждать, чтобы увидеть, что вы хотели показать. 
Изменение выравнивания текста и графики 
Поскольку на большинстве Web-страниц присутствует как текст, так и графи- 
ческие изображения, выравнивание графики и текста в окне браузера представля- 
ет собой существенный элемент дизайна Web-страниц. По умолчанию Web-брау- 
зер размещает объекты HTML-документа в том же порядке, в котором он их 
находит. Более того, браузер помещает объекты на экран один за другим слева 
направо и снизу вверх. 
Предположим, например, вы хотите, чтобы браузер отображал рисунок над 
строкой текста, которая описывает рисунок. Если вы просто поместите в HTML- 
документ дескриптор <img>, а затем наберете строку текста, браузер отобразит

58 Глава 1. Основы языка HTML 
текст рядом с документом (то есть справа от него), а не под рисунком. Помните, 
Web-браузер отображает элементы HTML-документа на экране один за другим 
слева направо. Браузер ставит элемент на новой строке слева, только достигнув 
правого поля текущей строки на странице. 
В приведенном ниже коде показан порядок расположения графических и тек- 
стовых элементов. Дескриптор <р> дает браузеру указание отобразить текст, иду- 
щий после рисунка, на строке под рисунком: 
<html> 
<head> 
<Ь1Ъ1е>Пример размещения текста и графики</Ъ1Ъ1е> 
</head> 
<body> 
<img src="flower. jpg" 
<р>Покаэанные цветы - это дикорастущие растения равнин Канэаса</р> 
</body> 
</html> 
Дескриптор <img>, помещенный в HTML-документ перед текстом, дает Web- 
браузеру указание отобразить рисунок перед тем, как отображать текст. Помеще- 
ние дескриптора <р> между рисунком и текстом заставляет Web-браузер вставить 
символ перевода строки (то есть перейти на следующую строку на странице) и 
вставить пустую строку после вывода рисунка и перед выводом текста, который 
идет после рисунка в HTML-коде Web-страницы. На рис. 1.16 показано, как 
Web-браузер отобразит рисунок по отношению к тексту в данном примере. 
Обратите внимание, что правильно вставленный дескриптор <р> выравнивает 
рисунок и текст по вертикали. Однако вы можете также захотеть, чтобы браузер 
расположил рисунок и текст по центру между левым и правым полями Web-стра- 
ницы. Для работы с горизонтальным выравниванием объектов на Web-странице 
язык HTML предусматривает начальный и конечный дескрипторы выравнивания 
по центру (<centerx/center>). Нужно понимать, что, хотя дескрипторы вырав- 
нивания по центру все еще используются, эти дескрипторы являются нерекомен- 
дованными, а значит, существует возможность того, что в будущем браузеры пе- 
рестанут их поддерживать. Предпочтительнее выравнивать текста и графику с 
помощью CSS-правил, о чем речь идет в главе 4. 
3 
Показанные цветы - это дикорастущие растения равнин Канзаса 
Рис. 1.16. Без выравнивания текст и графика сдвигаются в левую сторону окна 
браузера

Глава 1. Основы языка HTML 59 
ПРАКТИКУМ 
По умолчанию Web-браузер выравнивает первый объект на каждой строке, сдвигая 
его к левому краю Web-страницы. Для того чтобы изменить выравнивание по 
умолчанию и, таким образом, изменить горизонтальное положение объекта на 
строке или группе строк, применяется дескриптор <center>. Начальный и конеч- 
ный дескрипторы выравнивания по центру (<centerx/center>) дают Web-брау- 
зеру указание отцентрировать изображение и текст, заключенные между дескрип- 
торами, между левым й правым полями Web-страницы, как показано на рис. 1.17: 
||НГГР404Нвнайде ;tosoft Internet Explore 
: .ейл 
• .дрес|.]
Зрввка. 0ид ^збрвнное Сервис .лрввке 
hfip//html-webdesign/Chepter01/FigureO1-17htm 
Показанные цветы - это дикорастущие растения равнин Канзаса 
о 
Рис. 1.17. Начальный и конечный дескрипторы выравнивания по центру дают 
Web-браузеру указание отобразить графический и текстовый элементы 
по центру между левым и правым полями Web-страницы 
<html> 
<head> 
<title>IIpMMep размещения текста и графики</Ъ1Ъ1е> • ' 
</head> s 
<body> 
<center><img src="flower.jpg" 
<р>Покаэанные цветы - это дикорастущие растения равнин Канзас,а</р> 
</oenter> 
</body> 
</html> 
Добавление гипертекстовых ссылок 
Web-страницам свойственно определенное преимущество перед бумажными 
документами: Web-страницы, в отличие от документов, могут содержать гипер- 
текстовые ссылки на другие страницы, расположенные либо на том же Web-сай- 
те, либо на других сайтах. Вместо того чтобы переворачивать страницы, как при 
чтении книги, посетители сайта щелкают на гипертекстовых ссылках, чтобы пе- 
рейти со страницы на страницу (или с сайта на сайт). Гипертекстовая ссылка 
{hypertext link) — это одно слово или группа слов, щелкнув на которых, посети- 
тель дает Web-браузеру указание "принести" Web-страницу (или иной файл) из 
конкретного Web-сервера.

60 Глава 1. Основы языка HTML 
Посетитель сайта обычно видит гипертекстовую ссылку как подчеркнутый 
текст. Как правило, Web-браузер использует один цвет (например, синий) для 
отображения гиперссылок на страницы, еще не посещенные пользователем, и 
другой цвет (например, пурпурный) для ссылок на страницы, недавно извлечен- 
ные браузером. 
ПРАКТИКУМ 
Чтобы создать гипертекстовую ссылку, поместите начальный и конечный дескрип- 
торы привязки (<ах/а>) вокруг текста, на котором посетитель должен щелкнуть 
для активизации ссылки. {Гипертекст — это текст между начальным и конечным 
дескрипторами привязки.) Затем установите атрибут href в дескрипторе <а> рав- 
ным пути и имени файла, который должен будет извлечь браузер, когда посети- 
тель щелкнет на ссылке. Например, слова "Щелкните здесь, чтобы перейти на сле- 
дующую страницу." в следующем HTML-операторе — это "гипертекст" в 
гипертекстовой ссылке; браузер подчеркнет его на странице: 
<а href="info.htm"МЦелкните здесь, чтобы перейти на следующую 
страницу.</а> 
Когда посетитель щелкнет на подчеркнутых словах (или где-то между ними), 
Web-браузер загрузит Web-страницу, сохраненную в файле info.htm. Обратите 
внимание, что атрибут href помещается внутри дескриптора <а>, а сам гипер- 
текст — вне дескриптора <а> между начальным и конечным дескрипторами при- 
вязки (<аХ/а>). 
Чтобы создать гиперссылку на Web-страницу, которая расположена на другом 
Web-сайте, наряду с именем файла Web-страницы в атрибут href потребуется вклю- 
чить и URL-адрес сайта. Например, нижеприведенный код создает гипертекстовую 
ссылку на главную страницу (то есть домашнюю страницу) сайта www.anywhere.com: 
<а href="http://www.anywhere.com/index.пЪт1">Щелкните здесь, чтобы 
перейти на Anywhere.com</a> 
Когда посетитель щелкнет внутри надписи "Щелкните здесь, чтобы перейти 
на Anywhere.com" (то есть в какой-либо части текста гиперссылки), Web-браузер 
извлечет (и отобразит) документ главной страницы (index.html) с Web-сайта 
www.anywhere.com. Таким обраЗОМ, В ЭТОМ примере Значение атрибута href 
(href="http://www. anywhere . com/index. html") СОЗДаетгипертекстовую ССЫЛКУ 
между Web-страницей на вашем сайте и документом index.html (главной стра- 
ницей) на Web-сайте www.anywhere.com. Обратите внимание, что можно также 
создать гиперссылку на главную страницу Web-сайта, указав в атрибуте href 
только URL-адрес сайта (без имени файла главной страницы): 
<а href="http://www.anywhere.сот">Щелкните здесь, чтобы перейти на 
Anywhere.com</a> • 
Кроме использования гипертекстовых ссылок для перехода от документа к до- 
кументу и с сайта на сайт, с помощью гипертекстовых ссылок можно позволить 
посетителям выгружать файлы из Web-сайтов. Например, нижеприведенный код 
дает Web-браузеру указание выгрузить архивный файл с изображением 
corvette.zip, когда посетитель щелкнет на каком-либо из слов "Щелкните здесь":

Глава 1. Основы языка HTML 
<а href="http://www.home.com/cars/corvette.zip">Щелкните здесь</а> 
для выгрузки фотографии моего нового корвета. 
Атрибут href дает Web-браузеру указание извлечь фотографию корвета 
(corvette.zip) из папки cars на Web-сайте www.home.com. 
Гипертекстовые ссылки, позволяющие посетителям выгружать файлы и "осу- 
ществлять навигацию" по страницам вашего Web-сайта или переходить на другие 
сайты, добавят к вашим Web-страницам интерактивность и повысят степень дру- 
жественности к пользователю. При создании гипертекстовых ссылок следите, 
чтобы текст, предшествующий гиперссылке или следующий за ней, доходчиво 
объяснял, что именно произойдет, когда пользователь щелкнет на тексте для ак- 
тивизации гиперссылки. 
Кроме того, поскольку у большинства путешественников по Web подчеркну- 
тый текст ассоциируется с гипертекстовыми ссылками, избегайте использования 
начального и конечного дескрипторов подчеркивания (<ux/u>) для выделения 
текста в Web-документах. Чтобы выделить слово или группу слов в Web-докумен- 
те, пользуйтесь такими стилями, как полужирное начертание, курсив или же из- 
меняйте гарнитуру, цвет или размер шрифта. 
Выделение отдельных букв и слов с помощью 
дескрипторов форматирования символов 
Если требуется, чтобы Web-браузер отобразил на Web-странице текст, вы про- 
сто набираете текст, который хотите видеть на экране, между начальным и ко- 
нечным дескрипторами тела документа (<bodyx/body>) в HTML-коде Web-стра- 
ницы. Считывая HTML-документ, Web-браузер выводит на экран весь найденный 
им текст. Чтобы "объяснить" браузеру, как текст должен выглядеть, заключите 
текст между парой дескрипторов форматирования. (В HTML имеются дескрип- 
торы, с помощью которых можно дать браузеру указание применить такие вари- 
анты форматирования, как выделение полужирным, курсив и зачеркивание.) 
Нужно понимать, что Web-браузеры не распознают обычные коды форматирова- 
ния, внедряемые в документы текстовыми процессорами вроде Microsoft Word. 
1РАКТИКУМ 
Предположим, например, вы хотите, чтобы отдельные слова в вашем Web-доку- 
менте были выведены полужирным. Чтобы выделить полужирным букву, слово или 
группу слов, заключите требуемый текст между начальным и конечным дескрипто- 
рами выделения полужирным (<ьх/ь>), как показано в приведенном ниже коде 
(вокруг слова "полужирным"): 
Последнее слово в этом предложении выделено <Ь>полужирным</Ь> 
Дескрипторы форматирования символов - это контейнеры, и, соответственно, 
требуют использования и начального, и конечного дескрипторов. Web-браузер 
применит форматирующую инструкцию ко всему тексту внутри "контейнера", то 
есть ко всему тексту между начальным и конечным дескрипторами форматирова- 
ния. В данном примере начальный и конечный дескрипторы выделения полу-

62 Глава 1. Основы языка HTML 
жирным (<ьх/ь>), в которые заключено слово "полужирным", дают Web-браузе- 
ру указание отобразить это слово полужирным шрифтом — полужирным. Как уже 
говорилось, дескрипторы форматирования символов можно использовать для оп- 
ределения внешнего вида нескольких предложений (или даже абзацев), групп 
слов, отдельных слов или даже одной буквы в слове. Например, при отображе- 
нии браузером текста из приведенного ниже фрагмента HTML-кода, только бук- 
ва "П" в слове "Полужирным" будет выведена полужирным. 
Первая буква последнего слова выделена <Ь>П</Ь>олужирным 
Кроме начального и конечного дескрипторов выделения полужирным 
(<ьх/ь>), для усиления значимости текста на Web-странице применяются сле- 
дующие дескрипторы: 
• <citex/cite>. Дескрипторы цитаты выделяют текст, обычно курсивом. 
• <codex/code>. Дескрипторы кода выводят заключенный в них текст мо- 
ноширинным шрифтом, таким, как Courier, тем самым выделяя его из об- 
щего текста. С помощью дескрипторов кода можно выделять фрагменты 
HTML-кода в учебных документах. 
• <deix/dei>. Дескрипторы удаленного текста помечают текст как удален- 
ный путем зачеркивания текста. Например, с помощью дескрипторов уда- 
ленного текста можно вычеркивать текст в юридических документах. 
• <qx/q>. Дескрипторы цитаты в кавычках ставят кавычки вокруг заключен- 
ного в них текста. 
• <subx/sub>. Дескрипторы нижнего индекса создают нижний индекс, или 
отображают текст немного ниже основного текста. 
• <supx/sup>. Дескрипторы верхнего индекса создают верхний индекс, или 
отображают текст немного выше основного текста. 
• <emx/em>. Дескрипторы акцентирования выделяют текст, отображая зак- 
люченные в них слова курсивом. 
• <strongx/strong>. Дескрипторы усиления выделяют текст, отображая 
заключенные в них слова полужирным курсивом. 
• <ix/i>. Дескрипторы курсива выделяют заключенные в них слова курсивом. 
• <ux/u>. Дескрипторы подчеркивания выделяют заключенные в них слова 
подчеркиванием. Этот дескриптор является нерекомендованным. 
Использовать дескрипторы форматирования можно по отдельности либо в со- 
четании друг с другом. В следующем примере начальный и конечный дескрипто- 
ры выделения полужирным (<ьх/ь>) комбинируются с начальным и конечным 
дескрипторами верхнего индекса (<superx/super>), чтобы выделить на страни- 
це слово "превосходный": 
Дескрипторы форматирования символов - это <зирегХЬ>превосходный</Ь> 
</super> способ привлечь внимание посетителей к Web-странице. 
Хотя дескрипторы форматирования символов визуально изменяют текст в 
окне браузера, более эффективный (и в большей степени отвечающий рекомен- 
дациям W3C) способ задания стилей текста — это применение CSS-правил.

Глава 1. Основы языка HTML 63 
Использование специальных символов 
в HTML-документах 
Поместить обычный текст на Web-страницу несложно: нужно всего лишь со- 
здать HTML-документ и ввести текст между дескрипторами <htmi> документа. 
Web-браузер без труда читает и отображает буквы (A-Z, a-z) и цифры (0-9), кото- 

рые он находит в HTML-документе. Однако существуют некоторые специальные 
символы, которые можно ввести в документ в текстовом редакторе, но которые 
Web-браузер не выведет на Web-страницу. К счастью, язык HTML предусматрива- 
ет текстовую запись, с помощью которой можно дать Web-браузеру указание ото- 
бразить тот или иной из общеупотребительных специальных символов, а также 
позволяет вводить числовые коды, представляющие остальные символы. 
ПРАКТИКУМ 
Скажем, вы создаете Web-страницу и хотите отобразить символ зарезервированных 
прав (©), чтобы указать, что некоторые элементы страницы, а, возможно, и ди- 
зайн страницы в целом защищены законами об авторском праве. Чтобы Web-брау- 
зер отобразил символ зарезервированных прав, нужно ввести определенное число- 
вое значение, обозначающее этот символ. В компьютере каждая буква, цифра и 
символ хранятся в виде уникального числового значения, называемого ASCII-ко- 
дом символа. Чтобы отобразить на Web-странице такой символ, как ©, следует 
ввести уникальное значение этого символа (то есть его ASCII-код) в HTML-код 
Web-страницы. 
Например, числовое значение символа © — 169. Чтобы дать Web-браузеру 
указание отобразить символ, которому соответствует ASCII-код 169, поставьте пе- 

ред значением символа комбинацию амперсант (&) и знака "решетки" (#), а пос- 
ле кода — точку с запятой (;). Таким образом, чтобы заставить Web-браузер ото- 
бразить на Web-странице символ ©•, нужно поместить &#1б9; в HTML-код 
Web-страницы. Для часто употребляемых символов процедура упрощена: вместо 
числа можно вводить соответствующую символу текстовую последовательность. 
Например, в символьной записи символ © выглядит как &сору;. 
В приведенном ниже коде показано использование символа зарезервирован- 
ных прав в HTML-документе. При отображении специального символа запись 
&#ххх (где ххх — ASCII-значение, соответствующее данному символу) сообщает 
браузеру, какой специальный символ следует вывести на экран. На рис. 1.18 по- 
казан результат отображения Web-браузером следующего HTML-кода: 
<html> 
<head> 
<title>npKMep отображения символа зарезервированных npaB</title> 
</head> 
<body> 
<р>Символ зарезервированных прав &#1б9; указывает, что произведение 
находится под защитой законодательства об авторском праве.</р> 
</body> 
</html>

64 Глава 1. Основы языка HTML 
Перечень кодов специальных символов и соответствующих им значений 
можно найти по адресу h t t p : / / w w w . h t m l h e l p . c o m / r e f e r 
e n c e / c h a r s e t / . 
равка Ёин Избрем 
й й -3 ''& JJ -J •am- 
:: &flpec]gjht1p//htmbvebde5ign/CtiBpter01/Figij<b01-18htrn 
Символ зарезервированных прав С указывает, что произведение находится под 
защитой 
законодательства об авторском праве. 
Рис. 1.18. ASCII-значение &#169; в HTML-коде дает Web-браузеру 
указание отобразить в тексте символ © 
Использование горизонтальных линий для 
структурирования Web-содержимого 
При создании Web-страницы немаловажно организовать содержимое страни- 
цы в группы родственной информации. Например, содержимое Web-страницы, 
посвященной торговле транспортными средствами, можно разделить на секции о 
легковых автомобилях, грузовых автомобилях и микроавтобусах. Или же можно 
структурировать страницу, отделив сведения о транспорте, сдающемся напрокат, 
от транспорта, который можно взять в лизинг или приобрести. 
Одним из способов структурирования Web-страницы является использование 
горизонтальных линий для разделения различных типов содержимого. Предпо- 
ложим, например, вы создаете Web-страницу для вывода на экран данных о про- 
веденном исследовании, и хотите отделить результаты исследования от примеча- 
ний. Чтобы создать горизонтальную линию, которая будет отделять текст 
исследовательской работы от примечаний, воспользуйтесь дескриптором <hr>. В 
приведенном ниже HTML-коде дескрипторы <hr> дают Web-браузеру указание 
поместить в окне горизонтальные линии, как показано на рис. 1.19: 
горизонтальных 
<html> 
<head> 
<Ъл.Ъ1е>Использование 
</head> 
<body> 
<center> 
<h2>Using ImageReady to Slice an Image</h2> 
</center> 
<p>When you slice an image . . . остальной текст </р> 
<p>Slicing an image has . . . остальной текст </р>

Глава 1. Основы языка HTML 65 
<p>Treat each individual ... остальной текст </р> 
<p>However, it is just as ... остальной текст </р> 
<p>You can accomplish this ... остальной текст </р> 
<hr width="75%"> 
<hr width="50%"> 
<ЬЗ>Примечания<ЬЗ> 
<cite>1001 Photoshop Tips: Andy Anderson 2001</cite> 
<hr align="left" noshade size="2" wxdfch="25">- 
<cite>Web Design Samp; HTML: Konrad King, Andy Anderson</cite> 
</body> 
</html> 
иа Йэбрвнное Сервис Справке 
. Адрес jey hnpy/html-webdesign/Chepter0t/Figure0H9 htn 
Using ImageReady to Slice an Image 
When you slice an image ... остальной текст 
Slicing an image has ... остальной текст 
Treat each individual... остальной текст 
However, it is just as ... остальной текст 
You can accomplish this ... остальной текст 
Примечания 
1001 Photoshop Tips: Andy Anderson 2001 
Web Design & HTML: Konrad King, Andy Anderson 
; j 
_J 
Рис. 1.19. Web-страница, содержащая основной текст и примечания 
Помимо создания горизонтальной линии с помощью дескриптора <hr>, мож- 
но создавать красивые линии, используя графические изображения. Ниже пока- 
зан пример использования линии-рисунка вместо горизонтальной линии, нари- 
сованной браузером: 
Примечания 
1001 Photoshop Tips: Andy Anderson 2001 • 
Web Design & HTML: %onrad_ King, Andy Anderson 
Определить внешний вид горизонтальной линии можно с помощью следую- 
щих атрибутов: 
• align. Атрибутalign дает Web-браузеру указание выровнять горизонтальную 
линию по правому краю, по левому краю или по центру в окне браузера. 
noshade. Атрибут noshade дает Web-браузеру указание отобразить горизон- 
тальную линию без затенения.

66 Глава 1. Основы языка HTML 
size. Атрибут size (измеряемый в пикселях) определяет толщину гори- 
зонтальной линии. 
• width. Атрибут width определяет длину линии. Ширину горизонтальной 
линии можно указать либо в пикселях, либо в виде процентного отноше- 
ния к ширине окна браузера. Например, если вы установите ширину рав- 
ной 50% (width=M50%"), браузер проведет горизонтальную линию, длина 
которой будет равна половине ширины окна. 
Если поместить горизонтальную линию в ячейку таблицы или позициониро- 
ванную область, браузер будет использовать атрибуты width и align для задания 
длины и горизонтального положения линии относительно вертикальных сторон 
ячейки или позиционированной области (а не относительно ширины всей Web- 
страницы). Ниже показаны примеры дескриптора вставки горизонтальной линии 
с различными вариантами ширины, размера и выравнивания.
Щ Обычная горизонтальная 
линия 
Без затенения 
. : Ширина изменена 
\ По левом краю 
| По центру 
По правому краю 
ш 
Использование дескрипторов блоков цитирования для 
управления левым и правым отступами текста 
В языке HTML не так-то просто управлять расстоянием между текстом и ле- 
вым и правым полями Web-документа. По умолчанию Web-браузер устанавливает 
левое и правое поля страницы (то есть ширину Web-страницы) такими, чтобы 
страница умещалась по ширине в окно браузера. (Альтернативный вариант - 
разрешить части Web-страницы "выходить" за правый край окна браузера и снаб- 
дить окно горизонтальной полосой прокрутки, с помощью которой посетитель 
сможет отобразить содержимое, не попавшее в видимую область окна браузера.) 
Конечно же, авторы Web-страниц понимают, что Web-браузер при необходи- 
мости будет сдвигать текстовое содержимое с одной строки на другую. Поэтому 
при создании страниц разработчики применяют разнообразные средства форма- 
тирования/позиционирования, такие как CSS или помещение текста в ячейки 
HTML-таблиц. Не получив определенных инструкций по форматированию, Web- 
браузер поместит первый символ текста сразу же у левого поля и "завернет" (пе-

Глава 1. Основы языка HTML 67 
рейдет на следующую строку), только дойдя до правого поля Web-страницы. По- 
мните: ширина окна браузера на компьютере посетителя определяется расстоя- 
нием между левым и правым полями Web-страницы. Кроме того, браузер завора- 
чивает текст на следующую строку, достигнув правой границы окна. Дескрипторы 
blockquote форматируют текст, смещая его вправо или увеличивая поля справа 
и слева от блока цитирования. Поэтому использование блоков цитирования вы- 
деляет текст на общем фоне документа, что помогает должным образом органи- 
зовать содержимое на странице. 
ПРАКТИКУМ 
Например, следующий HTML-код описывает Web-страницу с заголовком и двумя 
абзацами текста, к которым применен стиль блоков цитирования (см. рис. 1.20): 
<html> 
<head> 
<title>npnMep использования дескриптора блока цитирования</^хЪ1е> 
</head> 
<body> 
<р>Это обычный текст</р> 
<blockquote>TeKCT в этом абзаце выделен в блок цитирования. 
Обратите внимание, что текст смещается вправо с левой стороны 
страницы и"заворачивается", достигнув правого поля. 
</blockquote> 
<р>Это снова обычный текст; смотрите, что происходит, когда обычный 
текст доходит до поля.</р> 
<blockquote>TeKCT в этом абзаце выделен в блок цитирования. 
Обратите внимание, что текст смещается вправо с левой стороны 
страницы и"заворачивается", достигнув правого поля. 
</blockquote> 
</body> 
</html> 
Файл .Правке .Избранное. • Сйрвис " 
им Л - 
Адрес jg] http.//htmUvebdestgr</aiepter01/Figure01-20htm 
Это обычный текст 
Текст в этом абзаце выделен в блок цитирования. Обратите внимание, 
что текст смещается вправо с левой стороны страницы и 
"заворачивается", достигнув правого поля. 
Это снова обычный текст; смотрите, что происходит, когда обычный текст доходит 
до поля. 
Текст в этом абзаце выделен в блок цитирования. Обратите внимание, 
что текст смещается вправо с левой стороны страницы и 
"заворачивается", достигнув правого поля. 
Рис. 1.20. Web-страница с обычным текстом и текстом, заключенным 
в дескрипторы блоков цитирования

68 Глава 1. Основы языка HTML 
Создание упорядоченных и неупорядоченных списков 
Выше в этой главе мы рассказали о нескольких способах компоновки содер- 
жимого на Web-странице. Упорядоченные и неупорядоченные списки — еще 
один инструмент, с помощью которого можно организовывать взаимосвязанный 
текст в группы маркированных или нумерованных элементов списка. Списки 
очень полезны для представления информации в структурированном виде. В 
упорядоченных (ordered) списках для организации Web-содержимого использует- 
ся алфавитная или числовая система, а в неупорядоченных (unordered) каждый 
элемент списка идентифицируется символом, или маркером. 
ПРАКТИКУМ 
С помощью упорядоченных, или нумерованных, списков создайте пошаговые ин- 
струкции, где имеет значение порядок элементов в списке. Приведенный ниже 
HTML-код описывает упорядоченный список, показанный на рис. 1.21. 
! <.айл Дравка V ЙЙЙ Избранное Сервис Справка 
** * "• ^ з .а; 'а -^ J ^ ^* -*g * 
j АДрэс |«J http //htmbvebdesign/ChapterO'/Figure01-21 htm d 
Загрузка программы 
1. Вставьте компакт-диск в дисковод 
2. Щелкните на пиктограмме "Пуск" 
3. Загрузите программу 
4. Играйте! 
Список покупок 
Хлеб 
Молоко 
Масло 
Чай 
Рис. 1.21. Web-страница с упорядоченным (слева) и неупорядоченным (справа) 
списками 
<html> 
<head> 
< titles-Пример упорядоченного cnnCKa</title> 
</head> 
<body> 
<Ь2>Загрузка программы</Ь2> 
l> 
<И>Вставьте компакт-диск в дисковод</И> 
<И>Щелкните на пиктограмме "Пуск"</1х> 
<И>ЗагруэиФе программу</И> 
<И>Играйте! 
</body> 
</html> 
Как показано в этом примере, чтобы обозначить упорядоченный список в 
HTML-коде Web-страницы, поместите элементы списка между начальным и ко- 
нечным дескрипторами упорядоченного списка (<oix/oi>). Затем, чтобы доба-

Глава 1. Основы языка HTML 69 
вить в список элементы, поместите текст каждого элемента между начальным и 
конечным дескрипторами элемента списка (<iix/ii>). 
По умолчанию Web-браузер отображает перед каждым элементом списка араб- 
скую цифру (1, 2, 3, 4, ...), причем первый элемент получает номер 1. Если вы 
хоти- 
те использовать вместо арабских цифр буквы или римские цифры, поместите в на- 
чальный дескриптор упорядоченного списка атрибут type, как указано ниже: 
• <oi type="i">. Перечисляет элементы с использованием арабских цифр 
(по умолчанию). 
• <oi type="a">. Перечисляет элементы с использованием букв нижнего регистра. 
• <oi type="A">. Перечисляет элементы с использованием букв верхнего регистра. 
• <oi type="in>. Перечисляет элементы с использованием римских цифр 
нижнего регистра. 
• <oi type="i">. Перечисляет элементы с использованием римских цифр 
верхнего регистра. 
Чтобы начать упорядоченный список не с "Г1, ас другой цифры (или же не с 
1Н а другой буквы) поместите в дескриптор <oi> атрибут start со значением, от- 
личным от " 1 " . Например, упорядоченный список, в начале которого стоит сле- 
дующий дескриптор <oi>, будет начинаться с буквы "е", поскольку "е" - пятая 
буква (английского) алфавита: 
<ol type="a" start="5"> 
Аналогично, если вы присвоите атрибуту type значение ^| чтобы указать, 
что браузер должен ставить перед каждым элементом списка арабскую цифру, 
браузер начнет список с элемента под номером 5. 
Неупорядоченные списки позволяют создавать группы текста, в которых порядок 
элементов в списке не имеет значения, — например, список покупок/ Следующий 
HTML-код создает неупорядоченный список, также показанный на рис. 1.21: 
<head> 
<title>npMMep неупорядоченного cnncKa</title> 
</head> 
<body> 
<Ь2>Список покупок</Ь2> 
<11>Молохр</11> 
<li>Macaio</li> 
<1л>Чай</1±> 
</body> 
</html> 
Чтобы обозначить неупорядоченный список в HTML-коде Web-страницы, по- 
местите элементы списка между начальным и конечными дескрипторами неупо- 
рядоченного списка (<uix/ui>). Как и в случае упорядоченного списка, для до- 
бавления элементов в неупорядоченный список следует поместить текст каждого 
элемента между начальным и конечными дескрипторами списка (<iix/ii>).

70 Глава 1. Основы языка HTML 
По умолчанию Web-браузер отобразит в качестве маркера перед каждым эле- 
ментом неупорядоченного списка жирную черную точку (•). Если вы хотите, что- 
бы браузер использовал в качестве маркера другой символ, выберите символ для 
представления маркера с помощью атрибута type, как указано ниже: 
• <ui type="disc">. Маркирует элементы жирными черными точками (по 
умолчанию). 
• <uitype="square">.MapKnpyeT элементы черными контурными квадратика- 
ми. 
• <ui type="circle">. Маркирует элементы черными контурными точками 
(незаполненными окружностями). 
Создание вложенных списков 
Из предыдущего практикума вы узнали, как создавать упорядоченные и не- 
упорядоченные списки. Можно также создавать упорядоченные и неупорядочен- 
ных списки внутри других списков; иными словами, можно создать вложенный 
список (nested list). Вложенный список можно использовать для отображения на- 
бора действий, которые требуется выполнить на том или ином шаге внешнего 
списка, как показано на рис. 1.22. 
• 51^/1 Правка Щид . Избранное Сцрвис .^1рав»са 
i&flpecjiES] http://hlml^vebdesign/ChepterO1/FigureO1-22.htm У| ; 
J 
Загрузка программы 
1. Вставьте компакт-диск в привод компьютера. 
2. Щелкните на пиктограмме "Пуск". 
3. Загрузите программу: 
а. Выполните двойной щелчок на пиктограмме игры. , 
Ь. Введите серийный номер, 
с. Щелкните на кнопке "Готово". 
4. Играйте! 
Рис. 1.22. Web-страница с'упорядоченным вложенным списком 
ПРАКТИКУМ 
Шаг 3 приведенного списка требует более подробного объяснения, нежели просто 
"загрузите программу". Здесь можно воспользоваться вставкой вложенного списка 
для описания действий, которые необходимо выполнить для загрузки программы. 
Следующий HTML-код описывает вставку показанного выше вложенного списка: 
<html> 
<head> 
<ЫЪ1е>Пример упорядоченного вложенного cnnCKa</title> 
</head>

Глава 1. Основы языка HTML 
<body> 
<Ь2>Загруэка программы</Ь2> 
<И>Вставьте компакт-диск в привод компьютера.</li> 
<11>Щелкните на пиктограмме "Пуск" .</li> 
<И>Загрузите программу :</li> ' 
<ol type="a"> 
<11>Выполните двойной щелчок на пиктограмме игры.</11> 
<1л.>Введите серийный номер.</li> 
<1х>Щелкните на кнопке "Готово".</li> 
ш 
<1х>Играйте! 
</body> 
</html> 
В данном примере вложенный список представляет собой упорядоченный 
список, определенный начальным и конечными дескрипторами упорядоченного 
списка (<oix/oi>). Упорядоченный список является вложенным, поскольку на- 
чальный и конечный дескрипторы упорядоченного списка (<olx/oi>) находят- 
ся внутри внешней пары начального и конечного дескрипторов упорядоченного 
списка (<oix/oi>). (Фразы между начальным и конечными дескрипторами эле- 
мента списка (<iix/ii>) выводятся на экран в виде элементов каждого списка 
(и внешнего, и вложенного).) 
Хотя кодирование вложенных списков может показаться сложным, при созда- 
нии вложенного списка вы следуете тем же правилам, что и при создании внеш- 
него списка. Определите вложенный список между парой начального и конечно- 
го дескрипторов упорядоченного списка (<oix/oi>) или между парой 
начального и конечного дескрипторов неупорядоченного списка (<uix/ui>). За- 
тем добавьте элементы во вложенный список, вставляя текст между парами на- 
чальных и конечных дескрипторов элементов списка (<iix/ii>), вставленных 
после определения элемента списка во внешнем списке. Помните, что и упоря- 
доченные, и неупорядоченные списки можно вкладывать во внешний список 
(который может быть упорядоченным или неупорядоченным списком). 
Создание списков определений 
Ранее в этой главе вы узнали, как создавать упорядоченные и неупорядочен- 
ные списки, равно как и вкладывать один список в другой. Помимо элементов, 
организованных в маркированные и нумерованные списки, язык HTML также 
позволяет создавать списки определений. Как следует из названия, список опре- 
делений {definition list) — это список терминов, после каждого из которых 
приво- 
дится его определение. Web-браузер выводит определение на следующей строке 
под определяемым термином с отступом вправо, как показано на рис. 1.23. 
Список определений — это единственный тип списка, в котором индивиду- 
альные элементы списка не идентифицируются начальными и конечными деск- 
рипторами элемента списка (<iix/ii>). Вместо этого для создания списков оп- 
ределений используются два новых дескриптора: 
<dtx/dt>. Начальный и конечный дескрипторы термина обозначают тер- 
мин, описание или определение которого будет дано. (Начальный и ко-

72 Глава 1. Основы языка HTML 
Рис. 1.23. Список 
определений, состоящий 
из двух элементов и их 
описаний 
Основы языка HTML 
Базовые HTML-дескрипторы 
HTML-дескрипторы - это команда!, которыми руководствуется Web-браузер при 
отображении информации в своем окне. HTML-дескрипторы поддерживаются как 
Macintosh-, так и Windows-версиями стандартных приложен и й-браузеров. 
Значение дескриптора title 
Дескриптор title (дескриптор названия) предоставляет описание Web-страницы для 
посетителей Web-сайта. Название Web-страницы отображается в строке заголовка 
окна Web-браузера. 
J 
нечный дескрипторы термина действуют аналогично начальному и конеч- 
ному дескрипторам элемента списка, с помощью которых обозначаются 
индивидуальные элементы в упорядоченных и неупорядоченных списках.) 
<ddx/dd>. Начальный и конечный дескрипторы описания обозначают 
один или более 
Чтобы создать на Web-странице список определений, поместите термины и опре- 
деления между начальным и конечными дескрипторами списка определений 
(<dix/di>). Например, следующий HTML-код создает список определений, со- 
стоящий из двух терминов: 
<html> 
<head> 
<title>IIpKMep списка определений</1:1Ъ1е> 
</head> 
<body> 
<centerXh2>OcHOBbi языка HTML</h2x/center> 
<dtXb>BasoBbie HTML-flecKpHnTopbK/bXdt> 
<dd>HTML-дескрипторы — это команды, которыми руководствуется 
Web-браузер при отображении информации в своем окне. HTML- 
дескрипторы поддерживаются как Macintosh-, так и Windows- 
версиями стандартных приложений-браузеров.</dd> 
<dtXb>3Ha4eHne дескриптора title</b> <dt> 
<dd>flecKpnnTOp title (дескриптор названия) предоставляет описание 
Web-страницы для посетителей Web-сайта. Название Web-страницы 
отображается в строке заголовка окна Web-браузера.</dd> 
</dlX/bodyX/html> 
Использование дескрипторов предварительно 
форматированного текста для управления 
отображением Web-содержимого 
Выше в этой главе вы научились изменять внешний вид текста с помощью 
дескрипторов форматирования. Например, если вы хотите, чтобы браузер ото- 
бразил слово полужирным шрифтом, вы заключаете слово между начальным и

Глава 1. Основы языка HTML 73 
конечными дескрипторами выделения полужирным (<ьх/ь>) в HTML-коде 
Web-страницы. Аналогично, чтобы сдвинуть текст на одну или несколько строк 
вниз, вы вставляете один или несколько дескрипторов <br>. Таким образом, при 
создании Web-страницы вы часто используете один набор HTML-дескрипторов 
для управления внешним видом текста и другой набор дескрипторов для управ- 
ления расположением текста на странице. К сожалению, когда Web-браузер ото- 
бражает текст, он игнорирует множественные пробелы и новые строки, вводимые 
в HTML-документ для задания интервалов или выравнивания содержимого стра- 
ницы (см. рис. 1.24). 
Однако вы можете воспользоваться начальным и конечными дескрипторами 
предварительно форматированного текста (<ргех/рге>), чтобы объединить 
функции форматирования и управления расположением в одном наборе HTML- 
дескрипторов. Начальный и конечный дескрипторы предварительно форматиро- 
ванного текста (<ргех/рге>) дают Web-браузеру указание использовать моно- 
ширинный шрифт и выводить на экран все пробелы и новые строки, 
обнаруженные в этом тексте Web-страницы. (Во избежание появления в окне 
браузера неправильно выровненных абзацев, используйте для выравнивания тек- 
ста пробелы, а не клавишу табуляции, поскольку не все браузеры интерпретиру- 
ют клавишу табуляции одинаково.)
ПРАКТИКУМ 
Предварительно форматированный текст можно использовать для отображения 
такого текста, как листинги программ и рецепты. Например, на рис. 1.25 пока- 
зана Web-страница с предварительно форматированным текстом. 
Обычно предварительно форматированный текст используется тогда, когда вы 
хотите контролировать длину каждой строки и интервалы между словами в стро- 
ке. К сожалению, в предварительно форматированном тексте нельзя использо- 
вать дескрипторы <img> для вставки рисунков или дескрипторы <object> для 
вставки элементов управления ActiveX или Java-аплетов. Хотя начальный и ко- 
нечный дескрипторы предварительно форматированного текста (<ргех/рге>) по- 
зволяют управлять размещением текста, для управления размещением прочих (не- 
текстовых) элементов следует пользоваться HTML-таблицами или CSS-правилами. 
Отображение навигационного меню 
в фрейме Web-страницы 
HTML-фреймы применяются тогда, когда необходимо в одном окне браузера 
отобразить более одной Web-страницы. Поскольку Web-браузер использует для 
каждого фрейма отдельный URL-адрес, он может загружать в каждый из фреймов 
новую Web-страницу без изменения содержимого остальных фреймов. Одно из 
наиболее распространенных применений Web-страниц с фреймами — отображе- 
ние навигационного меню Web-сайта в то время, как посетитель переходит с од- 
ной страницы сайта на другую. Типовое навигационное меню состоит из графи- 
ки в форме кнопок или просто гипертекстовых ссылок для перехода на любую 
страницу Web-сайта. Продуманное навигационное меню проведет пользователя 
по всем закоулкам сайта, подобно дорожной карте.

74 Глава 1. Основы языка HTML 
1 &арес j ^ ] hripj/ш 
.3:- 
•H-webd 
liu J 4 
5ign/Chopt6
J-JS 
rOl/Figu 
j ' . ' •"•'• 
e01-;4Hm 
П 
- 
Когда вы вводите текст в HTML-документ, Web-браузер игнорирует возвраты 
каретки и дополнительные пробелы в документе. Web-браузер отображает 
текст, руководствуясь при переходе со строки на строку шириной своего окна. 
Поиск Слрнвкй 
<IDOCTVPE html PUBLIC "-//U3C//DTD XHTML 1.Q Transitional//EN" 
'•http;//www.u3.or9/TR/xhtmll/DTD/xhtmll-tran8itional.dtd"> 
<htil xmln8="http://uww.w3.or9/1999/xhtml"'> 
<head> 
<title>npMHep текста, отформатированного 6pays«poH</titl«> 
</head> 
<body> 
<font size=--4">Korfla вы вводите текст в HTML-докунент, 
ч Ueb-брауэер 
Ueb-браузер 
отображает 
со строки 
шириной 
своего 
окна.</font> 
</body> 
</html> 
игнорирует возвраты каретки и дополнительные пробелы 
текст, руководствуясь при переходе 
на строку 
Рис. 1.24. Web-браузер игнорирует символы дополнительного форматирования 
(пробелы и возвраты каретки), введенные в тело HTML-документа 
3>айп Древка Ё.-ИД1 Из5овнма& СЩЭЕИС ^правке ' ' = !К%1 
ч- •*"•• J} M ?2 *A Si ~$ -\S~ -Л © * 
.•&flP©sj^jb«p,7html^ebdes1grVChopier0VrigL,re[n-25htm _^J 
При применении дескрипторов предварительно форматированного 
текста Web-Срауэер 
использует разрывы страниц и интервалы, 
введенные в текстовый HTML-документ. 
[ ФФЙЛ •' уродке Пенс* ^прешкй - • • • • 
\ 
\ 
<!DOCTVPE htal PUBLIC "-//U3C//DTD XHTML 1.0 Transitional//EN- - л 
••http://wwn.w3.or9/TR/xhtBl1/DTD/xhtnin -transitional .dtd""> 
<html xmlne="http://www.ыЗ.org/1999/xhtBl"> 
<head> 
<title>npHM»p использования дескрипторов предварительно Форматированного 
текста<ЛШе> Щ 
</head> 
<body> 
<pre> 
При применении дескрипторов предварительно Форматированного 
текста ЫеЬ'брауэер 
\^ использует разрывы страниц и интервалы. 
введенные в текстовый HTML-документ. 
</рге> 
</body> 
</htnl> -^ 
Рис. 1.25. HTML-дескрипторы <рге></рге>управляют разрывами строк в 
Web-документе без 
необходимости применения других дескрипторов форматирования

Глава 1. Основы языка HTML 75 
При разработке навигационного меню важно решить, где оно будет распола- 
гаться на Web-странице. На большинстве Web-сайтов меню находится горизон- 
тально вверху страницы или же вертикально с левой стороны окна приложения. 
Где бы вы ни решили поместить меню, будьте последовательны в своем выборе. 
Если вы поместили меню вертикально слева на главной странице сайта (то есть 
домашней странице), помещайте меню в том же месте на всех остальных страни- 
цах сайта. Постоянство в размещении меню упрощает навигацию по сайту, а 
пользователи, которым удобно работать с вашим сайтом, проведут больше време- 
ни, исследуя его. Для торгового сайта повышение удобства навигации по сайту 
для пользователей означает увеличение объемов продаж, а в случае информаци- 
онного сайта посетители больше из него почерпнут и с большей долей вероят- 
ности обратятся к нему снова за какой-нибудь другой информацией. 
С помощью фреймов можно всегда держать навигационное меню на виду, в то 
время как посетитель будет путешествовать по страницам вашего Web-сайта. 
Предположим, например, вы создаете Web-страницу с двумя фреймами вроде 
той, которая показана на рис. 1.26. 
Файл Правке Qy,a Избранное Сервис Справке 
} http://htmhwebdesign/ChapterO1/Ftgure01-26 him "3 
Налшгапия 
по сайту 
Добро пожаловать на сайт обзора 
товаров 
Щелкните на ссылке в разделе навигации 
по сайгу, чтобы узнать больше о том, кго 
мы такие и чей занимается 
Рис. 1.26. Окно документа содержит два фрейма, в которых отображены 
навигационное меню и информация о сайте 
'АКТИКУМ 
Поместите навигационное меню в узкий, 100-пиксельный прямоугольный фрейм 
в левой части страницы и отображайте новые Web-страницы в большем фрейме 
справа. Поскольку фрейм с навигационной панелью остается на месте в левой части 

окна браузера, в то время как браузер загружает выбранные Web-страницы во фрейм 

справа, посетитель не теряет из виду "дорожную карту" вашего сайта. Приведенный 

ниже код создает Web-страницу с фреймами, показанную на рис. 1.26: 
<html> 
<head> 
<title>flo6po пожаловать на сайт обзора TOBapoB</title> 
</head> 
<frameset cols="100,400,"> 
<frame src="n nav.htm" name="left">

76 Глава 1. Основы языка HTML 
<frame src="h_main.htm" name="right"> 
</frameset> 
</html> 
Как видно из кода этого примера, страница определения фреймов не включает в 
себя HTML-код всех страниц, которые вместе выводятся на экран. Web-страница 
определения фреймов просто дает Web-браузеру указание отображать Web-страницы 
в фреймах, определенных начальным дескриптором* задания фреймов (<frameset>). 
В данном примере страница определения фреймов дает Web-браузеру указа- 
ние отобразить документы n_nav.html и n__main.html (навигационное меню сай- 
та и главную страницу соответственно) внутри двух разных фреймов. Web-браузер 
загружает документ n_nav.html в первый фрейм, ширина которого составляет 
100 пикселей, и документ n__main.html во второй фрейм, ширина которого — 
400 пикселей. HTML-дескрипторы, с помощью которых описаны загруженные в 
фреймы Web-страницы, работают точно так же, как и тогда, когда Web-браузер 
отображает одновременно одну из страниц. Фреймы просто компонуют несколь- 
ко Web-страниц внутри одного окна документа. 
Одновременный вывод на экран нескольких 
Web-страниц 
С помощью фреймов можно одновременно отображать на экране несколько Web- 
страниц. Типовая Web-страница, содержащая фреймы, может иметь два фрейма — 
один фрейм для отображения навигационной панели и второй, в котором отобра- 
жается Web-страница с содержимым, предлагаемым посетителю. Когда посетитель 
щелкает на кнопке или гиперссылке в навигационной панели, Web-браузер заг- 
ружает и отображает Web-страницу во втором фрейме — фрейме содержимого. 
ПРАКТИКУМ 
Чтобы создать Web-страницу с фреймами, вам потребуются как минимум три стра- 
ницы. Во-первых, вам нужны две или больше Web-страниц, которые будут выво- 
диться на экран одновременно. (Если вам нужно отобразить только одну страницу, 
разбивать окно браузера на фреймы не имеет смысла.) Во-вторых, вам потребуется 
страница определения фреймов, которая должна будет сообщить Web-браузеру 
размер и количество фреймов, а также имена Web-страниц, которые будут отобра- 
жены в каждом фрейме. 
Предположим, например, у вас есть страница с навигационной панелью, со- 
храненная в файле с именем n_menu.html. Кроме того, у вас имеется Web-стра- 
ница с информацией о компании, сохраненная в файле с именем opendoc.html. 
С помощью фреймовой страницы, которая описывается приведенным ниже 
HTML-кодом, вы можете отобразить обе страницы (n_menu.html и 
opendoc.html) на экране одновременно: 
<!doctype html public "-//W3C//DTD HTML 4.01 Frameset//EN" 
"http://www.w3.org/TR/html4/frameset.dtd"> 
<html> 
<head> 
<title>IIpHMep документа с фреймами</ь1Ъ1е> 
</head>

Глава 1. Основы языка HTML 77 
<frameset cols="80,400"> 
<frame name="menu" src="n_menu.htm" > 
<frame name="content" src="opendoc.htm"> 
</frameset> 
</html> 
Обратите внимание, что в HTML-документах, содержащих фреймы, началь- 
ный и конечный дескрипторы задания фреймов (<framesetx/frameset>) заме- 
няют начальный и конечный дескрипторы тела документа (<bodyx/body>), при- 
сутствующие в Web-страницах без фреймов. Это связано с тем, что у фреймовой 
страницы нет "тела" или "содержимого" для отображения. Единственное назна- 
чение фреймовой страницы — это разделять окно браузера на рамки (вроде кад- 
ровых рамок) и сообщать Web-браузеру имена путей или URL-адреса Web-стра- 
ниц, которые должны быть отображены в каждом из фреймов. 
В данном примере атрибут сок в дескрипторе <frameset> дает Web-браузеру 
указание нарисовать два фрейма, первый из которых должен иметь ширину 80 
пикселей, а второй — 400 пикселей. Таким образом, атрибут сок сообщает Web- 
браузеру не только количество фреймов, которые тот должен нарисовать (по чис- 
лу столбцов, перечисленных в значении атрибута), но и ширину каждого фрейма 
в пикселях. (Например, если у вас три фрейма, атрибут сок будет иметь три 
значения и выглядеть так: соД.в«"л,л,л"; если у вас четыре фрейма, атрибут 
сок будет иметь четыре значения и выглядеть как со18="л,л,л,л", и т.д.) 
Атрибут src в дескрипторе фрейма <frame> сообщает Web-браузеру имя Web- 
страницы, которая должна быть отображена внутри фрейма, когда браузер перво- 
начально загружает фреймовую страницу. В текущем примере Web-браузер загру- 
зит njnenu.html В Первый фрейм (названный menu) И opendoc.htm ВО ВТОрОЙ 
фрейм (с именем content), как показано на рис. 1.27. 
файл Враека Цид Избранное Сервис Справка 
] hnp//html-webdesign/Chapter0l/FigureG1-27 htm 
Навигация 
nocajfey 
Добро пожаловать на сайт путешествий 
по горным рекам 
Рис. 1.27. ОКНО содержит два фрейма, в каждом фрейме отображается 
отдельный HTML-документ

78 , • Глава 1. Основы языка HTML 
Когда посетитель сайта щелкает на гиперссылке в фрейме меню, атрибут target 
дескриптора <а> сообщает Web-браузеру, в какой фрейм загрузить Web-страницу, на 

которую указывает атрибут href дескриптора <а>. Например, следующая гиперссыл- 
ка дает Web-браузеру указание отобразить документ aboutus.html в фрейме content,
 
когда пользователь щелкнет в каком-то месте ссылки "О нас": 
<а href="aboutus.html" target="content">0 нас</а> 
Таким образом, когда посетитель сайта щелкнет на гипертекстовой ссылке "О 
нас", Web-браузер заменит документ (opendoc.html из предыдущего примера), ото- 
бражаемый в целевом фрейме (content), документом aboutus.html (на который 
указывает атрибут href в данном примере). Если у дескриптора <а> гиперссылки 
нет атрибута target, браузер загрузит документ, на который указывает 
гиперссылка, в 
фрейм, где отображалась Wfeb-страница, гиперссылку которой активизировал 
пользова- 
тель. Например, HTML-код <а href="aboutus.htmlм>о нас</а> заставит Wfeb-браузер 

заменить в фрейме menu документ njnenu.html документом aboutus.html (при усло- 
вии, что "О нас" — гиперссылка в панели меню, отображаемой внутри фрейма menu). 

Аналогично, когда пользователь щелкнет на гиперссылке в панели содержимого 
(content), у гиперссылки либо будет атрибут target, который даст браузеру 
указа- 
ние загрузить связанную страницу в фрейм content, либо вовсе не будет атрибута 
target, — в этом случае браузер все равно загрузит связанную страницу в фрейм 
content. Отображая извлекаемые браузером связанные страницы в меню content, 
вы сможете оставлять навигационное меню (в фрейме menu) на экране постоянно. 
Фреймы в Web-страницах — отличный способ структурирования Web-сайта. 
Однако поскольку фреймовые Web-документы требуют загрузки и отображения 
трех или более Web-страниц, для отображения фреймовой страницы Web-браузе- 
ру требуется больше времени, чем для отображения страницы без фреймов. Бо- 
лее того, не все Web-браузеры поддерживают фреймы. Те из браузеров, которые 
не поддерживают фреймы, не отобразят ни Web-страницы в фреймах, ни фрей- 
мы, определенные страницей задания фреймов. 
Чтобы решить проблему браузеров, не поддерживающих фреймы, включите в 
свой документ задания фреймов начальный и конечный дескрипторы воспроизведе- 
ния документа без фреймов (<noframesx/noframes>), как показано в следующем 
коде: 
<!doctype html public "-//W3C//DTD HTML 4.01 Frameset//EN" 
"http://www.w3.org/TR/html4/frameset.dtd"> 
<htmlXhead> 
<title>flOKyMeHT задания фреймов с дескриптором noframes</title> 
</head> 
<frameset cols="80,400"> 
<frame name="menu" src="n_menu.htm" > 
<frame name="content" src="opendoc.htm"> 
<noframes> 
<a href="main-noframes.html">Щелкните здесь, чтобы просмотреть 
версию этого документа без фреймов.</а> 
</noframes> 
</framesetX/html> 
Если Web-браузер не поддерживает фреймы, в окне браузера появится гиперс- 
сылка, предлагающая пользователю щелкнуть на ней для загрузки версии Web- 
страницы, которая не содержит фреймов.

Глава 2 
HTML-таблицы 
. . ••••••< 
В этой главе 
Создание таблиц с ячейками, объединяющими несколько столбцов 
и несколько строк 
Работа с шириной границы таблиц и ячеек 
Работа с цветами границ таблицы и ячеек 
Работа с фоновыми изображениями и цветами 
Определение значения цветового атрибута 
Работа с полями ячеек и расстоянием между ячейками таблицы 
' Задание размеров таблицы с помощью относительных и абсолютных значений 
Задание размеров ячеек с помощью относительных и абсолютных величин 
I Выравнивание содержимого ячейки по горизонтали и по вертикали 
Выравнивание таблицы на Web-странице 
Управление шириной и высотой ячейки с помощью вставки прозрачного 
GIF-изображения 
' Обтекание текстом изображения 
Отображение с помощью таблицы галереи миниатюр 
Создание маркеров и списков с помощью таблиц и графики 
I Создание бокового навигационного меню с помощью таблицы 
• Добавление графики и ссылок в ячейки таблицы 
Управление границами на Web-странице с помощью вложенных таблиц 
• Составление навигационной карты путем помещения фрагментов 
изображения в таблицу 
Разрезание графического изображения на фрагменты для вставки в ячейки 
таблицы с целью создания быстрозагружаемой Web-графики 
Снижение времени, затрачиваемого Web-браузером на рисование таблицы 
I Имитация фреймовой Web-страницы с помощью таблицы 
Привлечение внимания посетителя с помощью цвета фона ячеек 
Визуальное выравнивание содержимого Web-страницы с помощью видимых 
I границ таблицы 
' Управление расстоянием между колонками и шириной полей текста на 
Web-странице

80 Глава2. HTML-таблицы 
появлением в языке HTML механизма таблиц, в арсенале Web-дизайнеров 
'появились два весьма ценных инструмента - средство для размещения на 
страницах текстовой и числовой информации в табличном формате, а также инст- 
румент для точного позиционирования объектов на Web-странице. Хотя вы и бу- 
дете время от времени использовать таблицы для представления табличных дан- 
ных, истинная ценность таблиц заключается в возможности их применения для 
компоновки страниц. HTML-таблицы позволяют компоновать такие Web-страни- 
цы, создание которых было достаточно сложным, если не вовсе невозможным, до 
введения таблиц с появлением в 1995 году версии HTML 3. Собственно говоря, 
применение таблиц для компоновки страниц стало настолько распространенным, 
что консорциум W3C приложил немало усилий для стандартизации отображения 
таблиц браузерами на различных платформах. Благодаря этому сегодня Web-ди- 
зайнеры могут использовать таблицы и иметь уверенность в том, что их таблицы 
будут работать одинаково и отображать информацию надлежащим образом во всех 
Web-браузерах, за исключением разве что самых старых. 
При работе с таблицами наиболее очевидным кажется их применение для 
отображения текста и числовых данных в форме набора столбцов. Скажем, вы 
хотите вывести на экран список должностных лиц компании вместе с телефон- 
ными номерами каждого из них. Для этого вам нужно создать таблицу с двумя 
столбцами, где отдельные ячейки в левом столбце будут содержать имена и фа- 
милии должностных лиц. Соответствующие ячейки в правом столбце содержат 
номер телефона того или иного должностного лица. Как показано на рис. 2.1, 
объем предоставляемой таблицей информации можно увеличить, добавив третий 
столбец, содержащий адрес электронной почты, а также четвертый, пятый и ше- 
стой столбцы, соответственно, под адрес, город и штат. 
Щ MyComputet'- 
Рис. 2.1. Таблица используется для отображения числовых и текстовых данных в 
табличной форме 
Поскольку ячейки в таблице читаются слева направо, таблица упорядочивает 
данные, помещенные в ячейки, тем самым упрощая их восприятие и представляя 
сложную информацию в дружественном к пользователю формате электронной таблицы. 
Второе (и, пожалуй, наиболее важное) применение таблиц — помещение Web- 
содержимого (то есть текста, чисел, графических изображений и даже пустого 
пространства) в отдельные ячейки таблицы, а затем управление дизайном Web

Глава 2. HTML-таблицы 81 
страницы путем помещения ячеек в организованные строки и столбцы. Соб- 
ственно, многие дизайнеры при создании структурированной Web-страницы на- 
чинают с рисования матрицы строк и столбцов (иными словами, таблицы), соответ- 
ствующей ширине и высоте всей страницы. Затем дизайнер компонует страницу, 
помещая содержимое страницы в ячеистую структуру строк и столбцов таблицы в 
тех местах, где ему хотелось бы видеть каждый элемент (или объект) на странице. 

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

82 Глава2. HTML-таблицы 
Не будет преувеличением сказать, что появление HTML-таблиц полностью 
изменило процесс создания Web-страниц дизайнерами. 
• А Н И Е, Из-за сложности и значительного объема HTML-кода, необходимого для 
со- 
здания больших таблиц компоновки страниц, вы можете прибегнуть к помощи 
программ для 
разработки Web-страниц, таких, как Dreamweaver и GoLive. Эти программы не 
только генери- 
руют хорошо написанный и эффективный HTML-код, но также могут сэкономить вам 
часы ра- 
боты, позволяя "рисовать" с помощью мыши таблицы, которые вы хотите 
впоследствии ви- 
деть на экране. 
Кроме использования таблиц для размещения графики и текста на Web-стра- 
нице, с их помощью можно также группировать навигационные кнопки вверху, 
внизу или по бокам страницы. Использование таблицы для организации навига- 
ционных кнопок в упорядоченную структуру с одинаковым относительным мес- 
торасположением на каждой странице существенно упрощает навигацию по сай- 
ту. Более того, окрашивая группы ячеек в различные фоновые цвета, можно 
создать визуально упорядоченную страницу. 
Предположим, например, вы создаете столбец навигационных кнопок вдоль 
левого края Web-страницы. Используйте один и тот же цвет фона для каждой из 
содержащих навигационные кнопки ячеек таблицы, как показано на рис. 2.3. 
1 Ре .<fi Y«w Fa*1»** 
: Влек 
L» »*««.» 
... пивная «шта 
j ..ф.^,«Р,ь ..... 
• 
:.] Done . 
Ioolt Help 
Stop Priiesh Home 
Bfcb-Ai 11 t K A ! №*««« 
Введите несколько первые букв 
Лекарственные препараты по алфавиту 
4 Н С Д Е Ж Н И Н 
Лекарст венные препараты по признаку: "Ч* 
а ^J 
.• i. " Search • Favorites ' ' •• 
a* it>6ssK» товары 
названия препарата: I 
Купить 1 
производитвпь. «повой1 
П Mi*ri."3s JllfflAWi>tJJ 
Н%й ft nwnnftH
ЯЫ j 
№Й 1 юл 
t . 
ii ш э 
Links ".VjjjjB 
: МЫ '•• 
ентамнны | Щ 
[г-.„ 
о я д-z о-э '^i 
ф Internet 
Рис. 2.3. Web-страница с содержимым, организованным с помощью цветов фона ячеек 
таблицы 
Рис. 2.3. Web-страница с содержимым, организованным с помощью цветов фонаячеек 
таблицы 
Затем, применив контрастный цвет в качестве фона остальных ячеек таблицы, 
вы привлечете взгляд посетителя к группе ячеек, служащих навигационным 
меню сайта, — так посетителю будет легче найти кнопки перехода со страницы 
на страницу. Более того, используя один и тот же цвет фона для ячеек навига- 
ционных кнопок на всех Web-страницах, вы дадите посетителю визуальную под- 
сказку — куда "обращаться за помощью" при поиске интересующих его страниц

Глава 2. HTML-таблицы 83 
на сайте. Вообще говоря, использование цвета фона для группирования ячеек 
таблицы, выполняющих одну и ту же функцию, помогает создать приятный гла- 
зу и дружественный к посетителю Web-сайт. 
Таблицы также представляют собой отличный инструмент для разделения од- 
ного графического изображения на несколько частей для последующего составле- 
ния навигационной карты в Web-браузерах, не поддерживающих навигационные 
карты. Навигационные карты {image maps) — это графические изображения, разде- 
ленные на области, с помощью щелчка на которых пользователь может перехо- 
дить на другие страницы. В зависимости от назначения и общей направленнос- 
ти сайта, навигационную карту можно использовать в качестве единственного 
инструмента навигации. Предположим, например, вы создаете сайт, посвящен- 
ный истории своей семьи. На главную страницу можно поместить большое изоб- 
ражение дерева с ветвями, причем каждая ветвь (генеалогического) дерева будет 
носить имя определенной генеалогической ветви вашего семейства. Разделив 
изображение дерева на три отдельных фрагмента и затем поместив каждый фраг- 
мент в отдельную ячейку таблицы, так, что в каждой ячейке будет находиться 
ветвь дерева, вы сможете превратить каждую ветвь в "горячую область" (hotspot). 

Тогда посетитель сможет, щелкнув на ветви дерева, получить информацию по 
той или иной группе родственников. Хотя посетитель видит дерево с ветвями 
целиком, на самом деле графическое изображение на Web-странице разбито 
на отдельные фрагменты, которые затем вновь собираются в единое целое с 
помощью HTML-таблицы. 
Как это ни странно, большинство Web-дизайнеров, использующих таблицы в 
качестве средства компоновки, не считают само по себе кодирование таблиц са- 
мой сложной частью работы. Сложной задачей они считают визуализацию Web- 
страницы, разбитой в табличный формат со строками и столбцами ячеек. Одна- 
ко если вам захочется создать навигационную карту Соединенных Штатов, вам 
нужно будет всего лишь взглянуть на карту страны, чтобы понять, что разделить 
Соединенные Штаты по ячейкам таблицы не удастся просто потому, что грани- 
цы отдельных штатов не имеют правильной прямоугольной формы. Набросав 
Web-страницу на бумаге и разделив изображения и текст горизонтальными и 
вертикальными линиями, можно быстро убедиться, реализуем ли вообще такой ди- 
зайн. Иными словами, набросок (или раскадровка) покажет, сможете ли вы разде- 
лить объекты на Web-странице на отдельные ячейки блочной структуры HTML-таб- 
ЛЙЦЫ. Всегда анализируйте проект перед тем, как приниматься за написание кода. 
Понимание HTML-дескрипторов, используемых для 
создания таблиц 
HTML-таблицы, используемые для отображения содержимого на Web-страни- 
це, как и те таблицы, которые вы видите в печатных материалах (книгах, журна- 
лах, газетах и т.д.), состоят из столбцов данных, организованных в строки. Не 
уди- 
вительно, что основные HTML-дескрипторы, с помощью которых создаются 
таблицы, сообщают Web-браузеру, какую часть HTML-файла включить в таблицу, и 
группируют отдельные элементы данных в этой части файла в столбцы и строки:

84 Глава 2. HTML-таблицы 
• <tabiex/tabie>. Уведомляет Web-браузер, что с текстом, заключенным 
между начальным и конечным дескрипторами, нужно обращаться как с 
таблицей. 
• <trx/tr> (строка таблицы — table row). Уведомляет Web-браузер, что он 
должен поместить элементы данных и, возможно, заголовки между началь- 
ным и конечным дескрипторами в отдельную новую строку таблицы. 
• <tdx/td> (данные таблицы — table data). Уведомляет Web-браузер, что 
HTML-дескрипторы, атрибуты и текст (если таковой имеется) между началь- 
ным и конечными дескрипторами являются содержимым (иными словами, 
данными), которое Web-браузер должен отобразить в столбце таблицы. 
Например, чтобы Web-браузер отобразил показанную на 
рис. 2.4 простую таблицу, состоящую из трех столбцов и 
двух строк, вам потребуется написать следующий код: 
<table border="l"> 
<trXtd>K/td> 
<td>2</td> 
<td>3</tdX/tr> 
<trXtd>4</td> 
<td>5</td> 
<td>6</tdx/tr> 
</table> 
1.
4 
2J 
51 
J 6 
Рис. 2.4. Простая 
таблица, содержащая 
две строки и три 
колонки
А В 
Как было сказано в перечне перед HTML-кодом табли- 
цы, начальный и конечный дескрипторы таблицы 
(<tabiex/tabie>) в начале и конце кода сообщают Web-браузеру, что HTML- 
код и прочий текст между этими дескрипторами описывает таблицу. (Пока что 
не обращайте внимания на атрибут border; его мы рассмотрим в следующем 
разделе этой главы.) Каждая пара начальных и конечных дескрипторов строки 
(<trx/tr>) дает Web-браузеру указание отобразить содержимое между ними в 
одной и той же новой (горизонтальной) строке таблицы. Тем временем каждая 
пара начальных и конечных дескрипторов данных таблицы 
(<tdx/td>) определяет каждую из ячеек таблицы, а заклю- 
ченное между ними содержимое сообщает Web-браузеру, что 
именно поместить в ячейку. 
Таким образом, чтобы создать показанную на рис. 2.5 таб- 
лицу с двумя столбцами и тремя строками, вам понадобятся 
три набора начальных и конечных дескрипторов строки табли- 
цы (<trx/tr>) и два набора начальных и конечных дескрип- 
торов данных таблицы (<tdx/td>), как показано ниже: 
<table border="l"> 
<trXtd>A</td> 
<td>B</tdX/tr> 
<trXtd>C</td> 
<td>D</tdX/tr> 
<trXtd>E</td> 
<td>F< / t d X / tr > 
</table> 
С D 
Рис. 2.5. Простая 
таблица, 
содержащая три 
строки и две 
колонки

Глава 2. HTML-таблицы 85 
Как и в случае с предыдущим примером, первая строка кода в данном приме- 
ре содержит дескриптор <tabie>, который сообщает Web-браузеру, что весь пос- 
ледующий HTML-код, считываемый браузером до тех пор, пока не встретится 
дескриптор </tabie>, является частью определения HTML-таблицы. 
Вторая строка кода выглядит так: 
<trXtd>A</td> 
Всякий раз, когда браузер считывает внутри определения таблицы дескриптор 
<tr>, он должен перейти на новую строку таблицы, тогда как дескриптор <td>, 
следующий за дескриптором <tr>, дает браузеру указание поместить все считан- 
ное им до дескриптора </tr> в одну ячейку таблицы. Следовательно, в данном 
примере первый дескриптор <td> дает Web-браузеру указание поместить "А" В 
первую слева ячейку в новой строке таблицы, начатой браузером после обработ- 
ки дескриптора <tr>, стоящего перед дескриптором <td>. 
Третья строка кода в HTML-таблице в данном примере выглядит так: 
<td>B</tdX/tr> 
Поскольку перед вторым дескриптором <td> нет дескриптора <tr>, Web-брау- 
зер помещает все, что заключено между второй парой начального и конечного 
дескрипторов данных таблицы (<tdx/td>) (в данном примере "В") во вторую 
(вправо) ячейку первой строки таблицы. (Если бы перед дескриптором </tr> 
имелась третья пара начального и конечного дескрипторов данных таблицы 
(<tdx/td>), Web-браузер поместил бы все, что находилось бы между этими дес- 
крипторами, в третью ячейку (вправо) первой строки таблицы и т.д.) Дескриптор 
</tr> говорит браузеру: "Все. В текущей строке больше ячеек нет", после чего 
браузер ожидает увидеть либо новый дескриптор <tr>, либо дескриптор 
</tabie>. В данном примере структура < t r x t d x / t d x t d x / t d x / t r> 
повторя- 
ется еще два раза (таким образом, отдавая браузеру указание создать еще две 
строки по две ячейки (или столбца) каждая) перед тем, как дескриптор 
</tabie> в последней строке кода просигнализирует об окончании определения 
HTML-таблицы. 
Добавление границ, заголовков столбцов/строк 
и заголовка таблицы 
Если вы хотите воспользоваться HTML-таблицей для отображения табличных 
данных (вместо применения таблицы в качестве инструмента компоновки стра- 
ницы, о чем пойдет речь ниже в этой главе), вам нужно будет нарисовать грани- 
цы вокруг таблицы и каждой из ее ячеек и добавить заголовок (название) табли- 
цы, который будет резюмировать данные, содержащиеся в таблице. Более того, в 
большинстве своем табличные данные включают в себя строку и/или столбец за- 
головков, которые сообщают читателю значение элементов в отдельной строке 
или столбце (либо же отношения между ними). На рис. 2.6, например, показана 
таблица с видимыми границами, заголовками столбцов и заголовком таблицы.

86 Глава 2. HTML-таблицы 
Fife Edit Viem Fsvaites Iooh Help LMu * Ш 
^ . "' • J Ld Ы S4 
BacK : Stop Reffcsh Home Search 
Дескрипторы и атрибуты, используемые дня создали* таБтш 
НТМ^дгсэсрюггор/атрнбут Олнсашк 
<TABLE><TABLE> Начало и когеы опредытеиия таблицы. 
;<TR* Новая строка t таблице. 
;<TD><lTD> Начаш и конец определения элемента данных таблицы. | 
border Ширина (Б пикселях) границ по перкнетру таблицы и ее ячеек.:; ; 
<С АРТЮЫ></САРТЮМ> Начало и конец текста заголовки таблицы. 
<ТН>*<Л*Н> :Начшю н конец текста заголовка столбца/строки табгащы. 
Й~Оопв • - | 4v Computer . , ,,, 
Рис. 2.6. Таблица для отображения информации в табличном формате 
В HTML-дескрипторе определения таблицы предусмотрен атрибут border 
(граница), с помощью которого можно дать Web-браузеру указание отобразить 
границу вокруг таблицы и вокруг каждой из ее ячеек. Кроме того, с помощью 
начального и конечного дескрипторов заголовка таблицы (<captionx/caption>) 
можно задать название (или заголовок) таблицы, а с помощью начального и ко- 
нечного дескрипторов заголовков столбцов/строк (<thx/th>) дать Web-браузеру 
указание отформатировать содержимое ячейки в виде заголовка: 
border. Атрибут дескриптора <tabie>, сообщающий Web-браузеру число 
пикселей — ширину границы, которую браузер должен нарисовать вокруг 
таблицы и каждой ее ячейки. 
• <captionx/caption>. Дает Web-браузеру указание применить к тексту 
между начальным и конечным дескрипторами стиль заголовка (большин- 
ство браузеров используют для этого полужирный шрифт). 
• <thx/th>. Сообщает Web-браузеру, что текст между начальным и конеч- 
ным дескрипторами должен быть отформатирован как текст заголовка 
(большинство браузеров используют для этого полужирный шрифт). 
Дескрипторы заголовков таблиц и столбцов/строк особенно важны для незря- 
чих, поскольку браузеры, разработанные для пользователей с ослабленным зре- 
нием, будут произносить по-иному их, чтобы провести различие между заголов- 
ками таблицы и столбцов/строк и данными таблицы. Кроме того, в дескриптор 
<tabie> можно включить атрибут summary (резюме), чтобы предоставить более 
подробное описание назначения таблицы для посетителей, пользующихся брау- 
зерами на основе речевого или Брайль-интерфемса. 
Чтобы отобразить таблицу с границами, заголовком и заголовками столбцов 
вроде той, которая показана на рис. 2.6, сначала нужно изменить дескриптор 
таблицы <tabie>, включив в него атрибут border, которому присваивается ши- 
рина в пикселях границы таблицы. Например, чтобы нарисовать границы шири- 
ной 1 пиксель (как у таблицы на рис. 2.6), дескриптор <tabie> таблицы должен 
будет выглядеть следующим образом: 
<table border="l">

Глава 2. HTML-таблицы 87 
Затем, чтобы снабдить таблицу названием (заголовком), в определение табли- 
цы сразу же после дескриптора <tabie> нужно вставить начальный и конечный 
дескрипторы заголовка таблицы (<captionx/caption>). Таким образом, первая 
строка кода (с одним лишь дескриптором <tabie>) в предыдущем примере пре- 
вращается в следующие две строки кода, которые дают Web-браузеру указание 
нарисовать таблицу с границами шириной 1 пиксель и заголовком: 
border="l"> 
<сарЪ1оп>Дескрипторы и атрибуты, используемые для создания таблиц 
Примите к сведению, что в новейших спецификациях языка HTML (начиная 
со стандарта HTML 4.01) указано, что элемент caption, если таковой присут- 
ствует, должен следовать сразу же за открывающим дескриптором <tabie>. 
Затем, чтобы поместить вверху каждого столбца таблицы заголовок, вставьте 
начальные и конечные дескрипторы заголовков столбцов/строк таблицы (<th> 
</th>) с текстом заголовков между ними после дескриптора <tr>, начинающего 
строку, в которой должны быть отображены заголовки. Например, чтобы доба- 
вить заголовок над каждым столбцом в таблице из двух столбцов, вам нужно бу- 
дет написать следующий код: 
<table border="l"> 
<сарЪд.оп>Дескрилторы и атрибуты, используемые для создания таблиц 
<trXth>HTML-flecKpnnTop</th> 
<th>OnncaHne</thX/tr> 
Чтобы добавить вместо строки заголовков столбец заголовков, добавьте пару 
(начальный и конечный) дескрипторов заголовка столбца/строки (<thx/th>), 
между которыми заключен текст заголовков, в каждую строку элементов данных, 
обозначенную начальным и конечным дескрипторами строки таблицы (<tr> 
</tr>). Например, приведенный ниже HTML-код с двумя парами — начальным 
и конечным - дескрипторов заголовков столбцов/строк таблицы (<thx/th>) 
после одного дескриптора <tr>, дает Web-браузеру указание создать таблицу с 
двумя заголовками в разных столбцах одной и той же строки: 
<table border="l"> 
<caption>3aronOBKM, расположенные в CTpoi 
<trXth>3aronoBOK 
<Й1>Заголовок 
<trXttti*>a4pdica 1, 
<td>CTpOKa, 1, э 
<trXtd>CTpOKa 2, 
<td>CTpoKa 2, 
</table> 
K/th> 
элемент 
элемент 
элемент 
элемент 
/tr> 
K/td> 
2</tdX/tr> 
K/td> 
2«УуеШХ/1г> 
g 88864= 
п86Я6 Ш? 
6 
3§Ш98Ш1 1 8ЙЙ8 й Ж 16 6Ш§6Й

Глава 2. HTML-таблицы 
На рис. 2.7 две таблицы, полученные из определений таблиц из двух преды- 
дущих примеров, показаны рядом друг с другом, так что можно сравнить вне- 
шний вид таблицы с заголовками в строку с таблицей, заголовки которой распо- 
ложены в столбец:
Е' f l T ' 'У i i: ' " V * If Л 'fiii'i lifiiiiit: i 11 ffil f 'ti'rtV TWIT 11 
"i •' i 7' M иГТ 
Заголэвга в строку 
1 Зиалемк 1 Заголовок 2 
Строка 1, злемект Строга 1, отеимг 
1 -:2 
Строка 2, элемент 'Строка 2, элкмек 
Заголовет в столбец 
Запловвх I ^Строка 1, аимкнт 1 Строка 1,: 
х 2 'Строга 2, эпгкект 1 Строка 2, мвжнт 2 
Рис. 2.7. Заголовки таблиц могут располагаться в строку (слева) или в столбец 
(справа) 
Использование таблицы для компоновки страниц 
При использовании таблицы для вывода табличных данных можно позволить 
данным в таблице диктовать размеры ячеек таблицы и, следовательно, размеры 
самой таблицы. Однако если вы собираетесь использовать HTML-таблицу в каче- 
стве ячеистой "сетки" для позиционирования графических изображений и тек- 
ста в определенных местах на Web-странице, вам потребуется проделать две 
вещи. Во-первых, нужно "скрыть" границы таблицы. Во-вторых, вы должны 
иметь возможность контролировать размеры таблицы и размеры ячеек в таблице. 
Вы уже знаете, как сделать границу таблицы невидимой — просто не вклю- 
чайте в дескриптор <tabie> таблицы атрибут border. Или же, если вы хотите, 
чтобы "невидимость" (иными словами, ширина, равная 0 пикселей) границ таб- 
лицы была задана явным образом, а не "подразумевалась", запишите дескриптор 
<tabie> следующим образом: 
<table border="0"> 
Если ширина и высота ячеек таблицы не указаны, Web-браузер изменяет их 
размеры в соответствии с помещенными в них данными. Браузер установит ши- 
рину каждого столбца равной ширине самого широкого объекта в ячейках столб- 
ца. Аналогично, высоту каждой строки Web-браузер установит в соответствии с 
высотой самого "высокого" объекта в строке. Минимальные высота и ширина 
ячейки, содержащей графическое изображение — это размеры графического изоб-

Глава 2. HTML-таблицы 89 
ражения. Минимальная ширина ячейки с одними лишь текстовыми данными — 
это число символов в самом длинном слове или числе, а минимальная высота — 
высота самого высокого символа. 
Создание таблиц с ячейками, объединяющими 
несколько столбцов и несколько строк 
Ранее в этой главе вы научились создавать ячейки таблицы с помощью 
начальных и конечных дескрипторов заголовков столбцов/строк таблицы 
(<thx/th>) и начальных и конечных дескрипторов данных таблицы (<tdx/ 
td>). Вы также узнали, как задавать атрибуты width (ширина) и height (высота) 
в дескрипторах <th> и <td> для определения размеров ячейки. Если ячейки таб- 
лицы вы определяете без атрибута ceiispan или атрибута гowspan, все ячейки в 
строке будут иметь одинаковую высоту, а все ячейки в столбце будут иметь оди- 
наковую ширину, как ячейки в таблице, показанной на рис. 2.8. 
.dt View Fsvorte* loots
' Stop' Refresh а 
Seaich 
.•Строка 1, столбец! 
;|СтрогаX столбец 1 
; [Строка 3, столбец 1 
Табтпща с одкночншш хче$а&ми 
Стш*еиЭ Сто.п6гц4 
•Строга 1, столбец 3 !Строка 1, столбец 4 |Строга 1, столбец 2 
Строга 2. стогСеа 2 
Ь р о » 3 , столбец 2 
Строю 2, столбец 3 ;Строка 2, столбец 4 
h-3, стопбеи 3 |Строга 3. столбец 4 
| ' "'""""' \ 
Строга 4 столбец 1 Строка 4, столбец 2 L Строга 4. столбец 3 |Строга 4, столбец 
4 
^1 
Рис. 2.8. Таблица, в которой все ячейки в одной и той же строке имеют 
одинаковую высоту, а в одном и том же столбце — одинаковую ширину 
Однако иногда может понадобиться, чтобы ячейки объединяли несколько 
строк и/или несколько столбцов, как три из ячеек на рис. 2.9. В HTML-деск- 
рипторе определения таблицы предусмотрено два атрибута (coispan (объедине- 
ние столбцов) и rowspan (объединение строк)), с помощью которых можно задать 
ширину и/или высоту ячейки как число столбцов и/или строк смежных ячеек. 
Чтобы задать ячейку, объединяющую несколько строк, как, например, вторая 
сверху ячейка в первом столбце на рис. 2.9, укажите атрибут rowspan в дескрип- 
торе <td> или <th> ячейки. Для данного примера, где ячейка объединяет две 
строки, потребовалось бы написать следующий код: 
<td rowspan>="2">CTpoKa 1 и 2, столбец K/td> 
Если бы ячейка объединяла три строки, нужно было бы установить значение 
атрибута rowspan равным "3" и т.д.

90 Глава 2. HTML-таблицы 
Slop Rafre^t 
Cnirfexl 
Строга 1 & 2, столбец 1 
Строга 3, столбец 1 
^Строка 4, столбец 1 
ТвБгаои с о&ьепгаиккнми 
Столбгн: 
"трока 1, столбец 2 
Строга 7, столбец 2 
Строга 3, столбец 1 
Строка 4, столбец 2 .3 
ячейками 
j Столбец 3 | CiMfc«4 
|Строга 1 &. 2. столбец 3 & 4 
^Строка 3, столбец 3 Строка 3, столбец 4 
1
|
.Строга 4, столбец 4 
Рис. 2.9. Таблица, в которой ячейки в одной и той же строке или столбце 
имеют разную высоту и ширину 
Важно помнить, что, если вы установили атрибут rowspan для ячейки равным 
"2", в определении таблицы между следующей парой дескрипторов строки таб- 
лицы (<trxtr>) вы должны набрать на одну пару дескрипторов <tdx/td> 
меньше, поскольку в "следующей" строке на один столбец меньше. Например, 
строка 2 в следующей таблице с тремя строками и двумя столбцами имеет толь- 
ко одну пару начальных и конечных дескрипторов данных таблицы (<tdx/td>), 
поскольку первая ячейка из строки 1 распространяется и на вторую строку: 
<table> 
<trXtd rowspan=2>cTpoKa 1 и 2 , столбец К/1 
<td>CTpoKa 1, столбец 2</tdX/tr> 
<trX!-- ячейка не нужна --> 
<Ьс1>строка 2, столбец 3</tdx/tr> 
<trXtd>CTpoKa 3, столбец K/td> 
<td>CTpoKa 2, столбец 3</tdX/tr> 
</table> 
Аналогично, если вы хотите создать ячейку, объединяющую несколько столб- 
цов, как, например, вторая ячейка слева в нижней строке таблицы на рис. 2.9, 
ука- 
жите в дескрипторе <td> или <th> ячейки атрибут coispan. Для данного примера, 
в котором ячейка объединяет два столбца, определение ячейки запишется так: 
<td cblspan="2">CTpoKa 4, столбец 2 и 3</td> 
Если бы ячейка объединяла три столбца, значение атрибута coispan было бы 
установлено равным "3" и т.д. Помните: если вы задали атрибут coispan для 
ячейки равным "2", между начальным и конечным дескрипторами строки табли- 
цы (<trx/tr>) для текущей строки вы должны набрать на одну пару дескрипто- 
ров <tdx/td> или <thx/th> меньше, поскольку количество ячеек (или столб- 
цов) в строке на одну меньше обычного. Например, в строке 2 в следующей 
таблице с тремя строками, тремя столбцами только две пары начальных и конеч- 
ных дескрипторов данных таблицы (<tdx/td>), поскольку первая ячейка в стро- 
ке обладает шириной двух ячеек:

Глава 2. HTML-таблицы 
<table> 
<trXtd>CTpoKa 
<td>crpoKa 
<td>CTpoKa 
1, 
1, 
1, 
столбец 
столбец 
столбец 
<trXtd со1врап=2>строка ; 
<td>cTpoKa 
<trXtd>c трока 
<td>cтрока 
<td>cтрока 
</table> 
2, 
3, 
3, 
3, 
столбец 
столбец 
столбец 
столбец 
K/td> 
2</td> 
3</tdX/tr> 
2, столбец 1 и 2</td> 
2</tdX/tr> 
K/td> 
2</td> 
3</tdX/tr> 
И, наконец, вы можете создать ячейку, объединяющую и несколько строк, и 
несколько столбцов, как, например, вторая ячейка сверху на правой стороны таб- 
лицы на рис. 2.9, задав в дескрипторе <td> или <th> ячейки оба атрибута — и 
coispan, и rowspan. Для текущего примера, в котором ячейка объединяет две 
строки и два .столбца, определение ячейки запишется так: 
<td rowspan="2" со1зрап="2м>Строка 1 и 2, столбец 3 и 4</td> 
Пожалуй, самый простой способ скомпоновать таблицу с ячейками, объеди- 
няющими несколько столбцов и/или несколько строк — это нарисовать таблицу 
на бумаге, а затем набирать ее определение в текстовом редакторе. Добавив опи- 
сательный текст вроде того, который показан в ячейках таблицы на рис. 2.9, вы 
легко сможете исправить ошибки в определении таблицы. (Одна из таких оши- 
бок, которую легко обнаружить и исправить благодаря нумерации ячеек, — это 
добавление лишних пар дескрипторов <tdx/td> между начальным и конечным 
дескрипторами строки таблицы (<trx/tr>) для строки под той, в которой вы 
создали объединяющую два столбца ячейку.) 
Работа с шириной границы таблиц и ячеек 
Граница {border) - это видимая линия по периметру таблицы и вокруг каждой 
ячейки внутри таблицы. В отличие от фонов таблицы и ячеек, которые являются 
независимыми, границы таблицы и ячеек взаимосвязаны. Как вы узнаете из сле- 
дующего практикума, цвета границы таблицы и границы ячеек можно задать не- 
зависимо. Однако если вы установите ширину границы таблицы равной одному 
или нескольким пикселям, Web-браузер нарисует границу также вокруг каждой 
ячейки таблицы. И, напротив, если вы установите атрибут border таблицы рав- 
ным нулю, Web-браузер не нарисует ни внешней границы таблицы, ни границ 
по периметру каждой из ячеек внутри нее. 
На рис. 2.10 показаны две таблицы. Таблица слева не имеет границ, посколь- 
ку значение атрибута border в ее дескрипторе <tabie> установлено равным "0". 
В то же время таблица справа на рисунке имеет границу шириной в один пик- 
сель по периметру границы и вокруг каждой ее ячейки, поскольку значение ат- 
рибута border в ее дескрипторе <tabie> установлено равным " I й . 
Tafimuaбез границ laomoec 
Заголсиок 1 Заголоюк 2 i Заголовок 1 i Захолоток 2 
Строка 1, элемент 1 Строка 1, элемент 2 Строка 1, элемент 1 ^Строка 1, элемент 
2 ! 
Строка 2, элемент 1 Строка 2, мекект 2 1СтрОК8.2, элемент 1 ^Строка 2, элемент 
2 | 
Рис. 2.10. Таблицы без границ и с границами шириной один пиксель

92 Глава 2. HTML-таблицы 
Примите к сведению, что в стандарте языка HTML граница вокруг таблицы 
называется рамкой (frame), а границы вокруг отдельных ячеек внутри таблицы — 
линейками (rules). Задание атрибутов bordercoior (цвет границы) и/или border в 
дескрипторе <tabie> воздействует и на рамку таблицы, и на линейки ячеек. На- 
пример, задание border="0" подразумевает frame="void" (рамки нет) и 
ruies="none" (линеек нет) — что, в сущности, делает все границы снаружи и 
внутри таблицы невидимыми. Во время рассмотрения каскадных таблиц стилей 
(CSS) в главе 4 вы увидите, что новейшие Web-браузеры позволяют управлять ат- 
рибутами ячеек отдельно от атрибутов таблицы в целом. Вы научитесь создавать 
CSS-правила, позволяющие задавать ширину и цвет рамки таблицы независимо 
от линеек (то есть границ) вокруг ячеек таблицы. 
ПРАКТИКУМ 
Ранее в этой главе вы узнали, как нарисовать границу шириной в 1 пиксель вок- 
руг таблицы и ячеек внутри таблицы, задав атрибут border в дескрипторе 
<tabie> таблицы следующим образом: 
<table border="l"> 
Чтобы увеличить ширину границы таблицы, просто увеличьте число пиксе- 
лей, присвоенное атрибуту border в дескрипторе <tabie> таблицы. Например, 
чтобы нарисовать вокруг таблицы границу шириной 10 пикселей, установите 
значение атрибута border в дескрипторе <tabie> равным "Ю11; результирующая 
таблица показана на рис. 2.11. 
<table border="10"> 
Табпицас границейв 10 пикселей 
\ Заголовок 1 ! Заголовок 2 i Заголовок 3 
. :Строка 1, элемент 1 |Строка 1, элемент 2 [Строка 1, элемент 3 1 
Строка 2, элемент 1 'Строка 2, злемент 2 ртрока 2, элемент 3 | 
Рис. 2.11. Таблица с границами шириной десять пикселей 
Обратите внимание на два интересных эффекта изменения значения атрибута 
border. Во-первых, хотя ширина границы по периметру таблицы увеличивается с 
увеличением значения, присвоенного атрибуту border, ширина каждой из гра- 
ниц вокруг ячеек внутри таблицы в то же время остается равной одному пиксе- 
лю. Вне зависимости от того, насколько широкой вы сделаете границу вокруг 
таблицы, большинство Web-браузеров нарисуют вокруг каждой из ячеек внутри 
таблицы границу шириной в один пиксель — за исключением того случая, когда 
значение атрибута border установлено равным нулю — тогда ни таблица, ни ее 
ячейки не будут иметь границ. Во-вторых, по умолчанию Web-браузеры рисуют 
границы и таблицы, и ячеек с использованием двух цветов, пытаясь придать таб- 
лице (и ее ячейкам) трехмерный вид. При использовании границы по умолча- 
нию — серой — Web-браузер нарисует левую и верхнюю стороны таблицы светло- 
серым, а нижнюю и правую стороны таблицы — темно-серым. Web-браузер также 
использует два цвета — хотя их нелегко различить при их ширине, составляющей 
обычно один пиксель — при рисовании границ вокруг ячеек внутри таблицы. Ле-

Глава 2. HTML-таблицы . 93 
вая сторона и верх каждой ячейки — темно-серые, тогда как низ и правая сторо- 
на ячейки имеют светло-серый цвет. Научиться устанавливать цвета границ таб- 
лицы и ячеек отличными от цветов по умолчанию — серых — вы сможете, озна- 
комившись со следующим практикумом. 
Работа с цветами границ таблицы и ячеек 
Как вы уже знаете, граница (border) — это видимая линия по периметру таб- 
лицы и вокруг каждой из ячеек внутри таблицы. Границы таблицы и ячеек име- 
ют два атрибута, которые вы можете задать — ширина (с которой вы работали в 
ходе предыдущего практикума) и цвет. Чтобы настроить цвета границ ячеек и 
таблицы, вставьте в дескриптор <tabie> таблицы атрибут bordercoior. Напри- 
мер, чтобы Web-браузер нарисовал темно-синюю границу шириной 10 пикселей 
вокруг таблицы и темно-синюю границу шириной один пиксель вокруг каждой 
из ее ячеек, задайте атрибут атрибут bordercoior в дескрипторе <tabie> табли- 
цы следующим образом: 
<table bordercolor="#00008B"> 
К сожалению, задание атрибута bordercoior не приводит к одному и тому 
же эффекту во всех Web-браузерах. При установке атрибута bordercoior равным 
и#оооо8В", например, Netscape Navigator нарисует границы таблицы и ячеек дву- 
мя цветами - две стороны голубым и две стороны темно-синим. Internet Explorer 
же поддерживает два дополнительных атрибута для управления цветами границы: 
bordercoioriight (цвет границы — светлый) и bordercoiordark (цвет грани- 
цы — темный). Если вы установите только значение bordercoior, Internet 
Explorer нарисует границы таблицы и ячеек, используя только один цвет — в 
данном примере темно-синий. (В главе 4, речь в которой пойдет о CSS, вы на- 
учитесь создавать CSS-правила, позволяющие управлять атрибутами рамки (то 
есть границами вокруг таблицы) независимо от атрибутов границ вокруг ячеек.) 
ПРАКТИКУМ 
Если вы хотите, чтобы Internet Explorer использовал два разных цвета при рисо- 
вании границ таблицы, вам нужно либо опустить атрибут bordercoior из деск- 
риптора <tabie> (тогда Web-браузер будет использовать границы по умол- 
чанию — светло-серые/темно-серые), либо задать в дескрипторе <tabie> 
атрибуты bordercoioriight и bordercoiordark. Например, Internet Explorer 
проигнорирует задание bordercoior в нижеприведенном дескрипторе <tabie> и 
будет использовать значения, присвоенные атрибутам bordercoioriight и 
bordercoiordark, нарисовав верхнюю и левую стороны границы таблицы голу- 
бым, а нижнюю и правую стороны границы таблицы — темно-синим: 
<table border="10" bordercolor="#00008B" 
bordercolorlight="#0000FF" bordercolordark="#00008B"> 
Атрибуты bordercolorlight И bordercolordark В вышеприведенном КОДе 
также дают Internet Explorer указание нарисовать верхнюю и левую стороны гра- 
ниц вокруг каждой ячейки голубым, а нижнюю и правую стороны границы — 
темно-синим.

94 Глава 2. 
^ Включив в дескриптор <table>и атрибут bordercolor, и атрибуты 
bordercolorlight и bordercolordark, вы сможете отображать двухцветные грани- 
цы как в Internet Explorer, так и в Netscape Navigator. Internet Explorer будет 
игнорировать 
атрибут bordercolor и использовать значения атрибутов bordercolorlight и 
bordercolordark. Netscape Navigator, в то же время, будет игнорировать атрибуты 

bordercolorlight и bordercolordark и использовать для установки цвета границ 
таб- 
лицы и ячеек значение атрибута bordercolor. 
Если посетители вашего сайта будут пользоваться версией Internet Explorer 5 
и выше или версией Netscape Navigator 6.1 и выше, вы можете указать цвет каж- 
дой стороны таблицы и ее ячеек независимо друг от друга с помощью атрибута 
style. Например, задав атрибут style в дескрипторе <tabie>, как показано 
ниже, вы можете окрасить верхнюю (top) и левую (left) стороны таблицы в тем- 
но-синий, в то же время сделав нижнюю (bottom) и правую (right) стороны таб- 
лицы голубыми: 
<table border="10" style="border-top-color:#0000FF; 
border-left-color:#0000FF; border-bottom-color:#00008B; 
border-right-color:#00008B"> 
Хотя атрибут style в данном примере устанавливает один цвет для верхней и 
левой сторон и другой цвет для нижней и правой сторон, можно установить 
каждое из четырех свойств border-color внутри атрибута style равным своему 
собственному цвету. Чтобы задать один и тот же цвет для всех четырех сторон 
таблицы, установите значение свойства border-color равным желаемому цвету 
следующим образом: 
<table border="10" style="border-color:#006400"> 
Точно так же, как вы вставляете атрибут style в дескриптор <tabie> для ра- 
боты с цветами сторон таблицы, вы можете вставить style в дескриптор <td>, 
чтобы таким же образом управлять цветами сторон ячейки. Например, окрасить 
стороны ячейки в красный, синий, зеленый и пурпурный можно путем задания 
атрибута style в дескрипторе <td>: 
<td style="border-left-color:#FF0000; border-top-color:#0000FF; 
border-right-color:#008 000; border-bottom-color:#FF00FF"> 
Аналогично, чтобы задать один и тот же цвет для всех сторон ячейки, напри- 
мер, красный, используйте свойство border-color следующим образом: 
<td style="border-color:#FF0000"> 
Имейте в виду, что использование свойства border-color для задания одного 
и того же цвета для всех четырех сторон таблицы или всех четырех сторон ячей- 
ки на самом деле дает вам два цвета. Если речь идет о сторонах таблицы, и 
Internet Explorer, и Netscape Navigator нарисуют верхнюю и левую стороны ука- 
занным вами цветом, а нижнюю и правую стороны — более темным тоном того 
же цвета. Аналогично, когда вы задаете с помощью border-color один цвет для 
всех сторон ячейки, оба браузера отобразят нижнюю и правую стороны ячейки 
указанным вами цветом, а верхнюю и левую стороны ячейки — более темным то- 
ном того же цвета.

Глава 2. HTML-таблицы 95 
Работа с фоновыми изображениями и цветами 
Значение, присвоенное атрибуту bordercoior в дескрипторе <tabie>, изме- 
няет цвет границы вокруг таблицы и границ вокруг ячеек - за исключением тех 
ячеек, дескрипторы <td> которых содержат свои собственные атрибуты 
bordercoior. Следовательно, если вы хотите, чтобы Web-браузер нарисовал зеле- 
ную границу вокруг отдельной ячейки в таблице - вне зависимости от цвета гра- 
ниц вокруг других ячеек в таблице или вокруг самой таблицы -добавьте атрибут 
bordercoior в дескриптор <td> ячейки. Например, чтобы дать Web-браузеру 
указание нарисовать зеленую границу вокруг ячейки, дескриптор <td> этой 
ячейки должен выглядеть следующим образом: 
<td bordercolor="#008000"> 
Для Internet Explorer, в частности, можно указать цвета границы ячейки сле- 
дующим образом, чтобы верхняя и левая стороны ячейки были нарисованы зеле- 
ным цветом, а нижняя и правая стороны — светло-зеленым: 
<td bordercolorlight="#00FF00" bordercolordark="#008000"> 
Хотя все Web-браузеры поддерживают использование атрибута 
bordercoior в дескрипторе < t a b l e > , многие их них не поддерживают 
использование ат- 
рибутов bordercoior, b o r d e r c o l o r l i g h t и bordercolordark в 
дескрипторе <td>. В 
связи с этим разрабатывайте свои таблицы в соответствии с предположением, что 
многие 
из посетителей вашего Web-сайта будут видеть границу вокруг каждой ячейки того 
же цвета 
(цветов), что и граница по периметру самой таблицы. 
Поскольку фоновые изображения и цвета — это "атрибуты" таблицы или 
ячейки внутри таблицы, они задаются (в форме атрибута border) как часть 
HTML-дескриптора. (Элементы Web-страниц, такие как таблицы, строки, данные 
и т.д., имеют свои собственные HTML-дескрипторы, тогда как атрибуты всегда 
находятся внутри HTML-дескрипторов.) Поскольку и таблица, и каждая из ее 
ячеек имеют фон, который можно задать независимо, пожалуй, самый простой 
способ понять, как взаимодействуют между собой фон таблицы и фон каждой из 
ее ячеек — это представлять их себе как накладываемые друг на друга. На рис. 
2.12, например, показаны четыре таблицы. Две таблицы в верхней части рисунка 
суть таблица с фоновым цветом и таблица с фоновым изображением. Две табли- 
цы в нижней части рисунка показывают, что произойдет, если дать Web-браузеру 
указание нарисовать некоторые из ячеек таблицы с фоновым цветом или фоно- 
вым изображением. 
Фон таблицы — это прямоугольный объект, лежащий поверх Web-страницы, по- 
добно подложке в кадре. Отдельные объекты данных прямоугольной формы внутри 
таблицы — определенные начальным и конечным дескрипторами данных таблицы 
(<tdx/td>) — называются ячейками (cells). Таблица лежит поверх фона Web-страни- 

цы; каждая из ячеек таблицы представляет собой прямоугольный объект, лежащий 
поверх фона таблицы. Содержимое, помещаемое в ячейку (путем помещения текста 
и/или HTML-дескрипторов между начальным и конечным дескрипторами данных 
таблицы (<tdx/td>) ячейки), в свою очередь, лежит поверх фона ячейки.

96 Глава 2. HTML-таблицы 
Ш Создание таблицы с фоновыми рисунками и цвет 
.« Уях Fjvales look tjdp 
• Back 
j 
Stop Rshesh • Ho Soacch Fevaie» Meter 
Фоновый цвет и фоновый рисунок ячейки га фоновой цвете фоновый цвет н фоновый 
рисунок ячейки на фоновом рисунке 
таблицы 
; $ My Compute 
Рис. 2.12. Таблица с фоновыми цветами и изображениями, накрытая 
ячейками с фоновыми цветами и изображениями 
1РАКТИКУМ ^ЗВЯВВВНВВВНВВВ 
Когда вы указываете цвет фона таблицы, задавая атрибут bgcolor в дескрипторе 
<tabie> таблицы, Web-браузер "закрашивает" присвоенным атрибуту цветом по 
умолчанию прозрачный фон таблицы. Например, в следующем дескрипторе 
<tabie> атрибут bgcolor, установленный равным шестнадцатеричному значению 
"#OOOOFF", дает Web-браузеру указание закрасить фон таблицы голубым цветом: 
<table border="I" bgcolor="#0000FF"> 
Аналогично, если задать в дескрипторе <tabie> атрибут background, Web- 
браузер будет использовать графический файл, присвоенный атрибуту, в качестве 
"обоев" для фона таблицы. Например, в следующем коде атрибут background 
дает Web-браузеру указание "накрыть" фон таблицы рисунком из файла 
picture.gif, который хранится в подпапке images Web-сайта: 
<table border="l" background="images/picture.GIF"> 
Поскольку каждая из ячеек таблицы, как и сама таблица, имеет фон, цвет 
фона или фоновое изображение ячейки задаются в виде атрибута в дескрипторе 
<td> ячейки. Следовательно, независимо от фонового цвета или изображения 
(если таковые имеются), установленного для таблицы, вы можете дать Web-брау- 
зеру указание закрасить фон таблицы определенным цветом, присвоив значение 
этого цвета в виде шестнадцатеричного числа атрибуту bgcolor в дескрипторе 
<td> ячейки. Например, шестнадцатеричное значение и#оооо8В", присвоенное 
атрибуту bgcolor в следующем дескрипторе <td>, дает Web-браузеру указание 
закрасить фон ячейки темно-синим цветом: 
<td bgcolor="#00008B">

Глава 2. HTML-таблицы 97 
Аналогично, если задать в дескрипторе <td> ячейки атрибут background, 
Web-браузер будет использовать файл, присвоенный атрибуту, в качестве "обоев" 
для фона ячейки. Например, в следующем дескрипторе <td> атрибут 
background дает Web-браузеру указание "накрыть" фон ячейки рисунком из 
файла picture.gif, который хранится в подпапке images Web-сайта: 
<td background="images/picture.gif"> 
Хотя синтаксис HTML этому не препятствует, не имеет смысла задавать и 
цвет фона, и фоновое изображение для одной и той же таблицы или ячейки. 
Если же вы зададите и цвет, и изображение, "победу" одержит тот атрибут, ко- 
торый будет стоять в дескрипторе <tabie> последним — примерно так же, как 
при поклейке обоев на окрашенную стену или покраске обоев. То, что наклады- 
вается на фон последним (иными словами, верхний слой), и будет видеть 
пользователь. И напротив, если в дескрипторе <td> ячейки нет ни атрибута 
background, ни атрибута bgcolor, Web-браузер нарисует фон ячейки так, как 
будто это прозрачный лист стекла, лежащий поверх фона таблицы. Следователь- 
но, "сквозь" прозрачный фон ячейки будет виден фон таблицы. 
Подобным образом, поскольку фон таблицы лежит поверх фона Web-страни- 
цы, фоновое изображение или цвет таблицы скрывают цвет или рисунок, ис- 
пользуемый в качестве фона Web-страницы. И наоборот, если в дескрипторе 
<tabie> таблицы не задан ни атрибут background, ни атрибут bgcolor, Web-бра- 
узер нарисует фон таблицы так, как будто это прозрачный лист стекла, лежащий 
поверх фона Web-страницы. Следовательно, "сквозь" прозрачный фон таблицы 
будет виден фон Web-страницы. Кстати, несмотря на то, что это могло бы ока- 
заться довольно-таки оригинальным эффектом, если вы не зададите ни цвета, ни 
изображения для фона Web-страницы, вы не будете видеть "подложку" своего 
монитора. Вместо этого Web-браузер установит белый либо серый фон Web-стра- 
ницы — в зависимости от настроек по умолчанию браузера. 
Хотя браузеры в настоящее время поддерживают атрибут background в деск- 
рипторах <tabie> и <td>, стандарт HTML не разрешает использовать атрибут 
background ни с дескриптором <tabie>, ни с дескриптором <td>. Более того, 
атрибут bgcolor — нерекомендованный с момента появления HTML 4.01 — офи- 
циально объявлен незаконным в стандарте XHTML 1.0. Для задания фонового 
изображения таблицы либо ячейки действующие стандарты HTML (и XHTML) 
требуют применять свойство CSS background-image. Например, чтобы указать 
изображение, которое Web-браузер должен использовать в качестве фона табли- 
цы, в дескриптор <tabie> нужно вставить атрибут style, как показано ниже: 
<table border="l" 
s tyle="background-image:url(images/pi cture. GIF) " > 
Аналогично, чтобы задать фоновое изображение для ячейки, установите зна- 
чение свойства background-image с помощью атрибута style в дескрипторе 
<td> следующим образом: 
<td style="background-image:url(images/picture.GIF)">

9 8 Глава 2. HTML-таблицы 
Свойство CSS background-color позволяет выбрать цвет для фона таблицы 
и/или фона любой ее ячейки. Например, чтобы задать в качестве цвета фона 
таблицы ЦВеТ МОРСКОЙ ВОЛНЫ, НУЖНО уСТаНОВИТЬ СВОЙСТВО background-color В 
дескрипторе <tabie> следующим образом: 
<table border="l style="background-color:#00FFFF"> 
Аналогично, чтобы задать в качестве цвета фона ячейки таблицы темно-си- 
ний, например, необходимо с помощью атрибута style установить значение 
свойства background-color в дескрипторе <td> следующим образом: 
<td style="background-color:#00008B"> 
Определение значения цветового атрибута 
Всякий раз, когда вы используете один из атрибутов выбора цвета, такой как 
bordercolor, bgcolor, bordercolorlight, bordercolordark И Т.Д. В HTML-Деск- 
рипторе для задания цвета элемента, вы указываете нужный вам цвет в виде шес- 
тнадцатеричного числа. Например, чтобы создать таблицу со светло-желтым фо- 
ном, необходимо указать атрибут bgcolor в дескрипторе <tabie> таблицы 
следующим образом: 
<table bgcolor="FFFFEO"> 
Аналогично, чтобы нарисовать темно-синюю границу по периметру таблицы 
и вокруг каждой ячейки в таблице, следует задать атрибут bordercolor в деск- 
рипторе <tabie> таблицы следующим образом: 
<table bordercolor="#00008B" 
Значение атрибута, которое сообщает Web-браузеру, какой цвет использовать 
при рисовании элемента Web-страницы или закрашивании фона называется шес- 
тнадцатершным (по основанию 16) RGB-триплетом (red-green-blue — красный-зе- 
леный-синий). Иными словами, большое шестнадцатеричное число на самом 
деле состоит из трех отдельных шестнадцатеричных значений (отсюда и термин 
"триплет"). Эти значения сообщают браузеру, "сколько" красной, зеленой и си- 
ней составляющих необходимо смешать, чтобы получить цвет, который должен 
использовать браузер, рисуя элемент или закрашивая фон. 
При создании цвета каждая из трех основных цветовых составляющих (крас- 
ная, зеленая, синяя) может иметь значение от 0 до 255 включительно, где 0 обо- 
значает отсутствие, а 255 — максимальное количество. Следовательно, во втором 
примере данного практикума, где атрибут bordercolor в дескрипторе <tabie> 
задает темно-синий цвет границ таблицы, значение bordercolor, равное 
#00008в, дает Web-браузеру указание создать цвет границы путем смешивания О 
красного с 0 зеленого с 139 синего. (Шестнадцатеричное значение 8в равно де- 
сятичному значению 139.) Таким образом, Web-браузер создает заданный вами 
оттенок путем смешивания нулевого количества красного, нулевого количества 
зеленого и чуть больше половины максимального количества синего.

Глава 2. HTML-таблицы 99 
Чтобы определить шестнадцатеричный RGB-триплет цвета, который вы хотите 
ИСПОЛЬЗОВать, зайдите на http://www.htmlhelp.com/cgi-bin/color.cgi ИЛИ 
сверьтесь с меню цветов шрифта или фона своего любимбго редактора изображе- 
ний. Большинство графических программ предоставляют RGB-значения, исполь- 
зуемые для создания цвета, выбранного вами из палитры образцов цветов или 
смешанного в окне Пользовательские цвета (Custom colors) приложения. Или 
же, если вы пользуетесь пакетом Microsoft Office, щелкните на кнопке со спис- 
ком справа от кнопки Font Color (Цвет шрифта) в стандартной панели инструмен- 
тов Microsoft PowerPoint или Microsoft Word. Затем щелкните на кнопке Мою 
Colors (Другие цвета...) внизу раскрывшегося меню. Приложение Office, в свою 
очередь, отобразит диалоговое окно Colors (Цвета), аналогичное показанному на 
рис. 2.13. 
Обычные Спектр 
Цвета: 
U 
Оттенок: Й3 " ' ~ г ] Краевой: [гв'з""-^ 
Нас^ндение: J250 -^-j г&эленый; . ]253 - ^ j 
Новый вТекущий 
• диалогового окна Colors (Цвета) редактора Microsoft Wo Рис. 2.13. Закладка < 
Если содержимое закладки Custom (Спектр) скрыто, щелкните на закладке 
Custom (Спектр) в диалоговом окне Colors. Чтобы "смешать" пользовательский 
цвет, щелкните на нужном цвете на цветовой палитре в верхней части закладки 
Custom, а затем на ползунке насыщенности цвета справа от палитры. Всякий 
раз, когда вы создаете цвет, диалоговое окно покажет вам образец цвета в ниж- 
нем правом углу диалогового окна и RGB-значение цвета в полях Red (Красный), 
Green (Зеленый) и Blue (Синий). Если RGB-значения — десятичные, а не шест- 
надцатиричные, вам потребуется преобразовать каждое из них в шестнадцатерич- 
ный эквивалент. Затем составьте три шестнадцатеричных RGB-значения в один 
шестнадцатеричный триплет вида "#RRGGBB" (где RR, GG и вв - шестнадцатерич- 
ные значения красной, зеленой и синей составляющих смешиваемого цвета). , 
H ЕПе р е ч е н ь шестнадцатеричных триплетов можно просмотреть, зайдя на, 
сайт по адресу http://www.htmlhelp.com/cgi-bin/color.cgi. Кроме того, несколько 

более длинный перечень шестнадцатеричных триплетов и пример соответствующего 
каждо- 
му из них цвета вы найдете по адресу http://www.hypersolutions.org/pages/ 
rgbhex.html.

100 Глава 2. HTML-таблицы 
Работа с полями ячеек и расстоянием между 
ячейками таблицы 
В то время как задание полей ячейки {cellpadding) сообщает Web-браузеру чис- 
ло пикселей интервала, который следует оставить между сторонами ячейки и ее 
содержимым, заданиерасстояния между ячейками {cellspacing) сообщает Web-бра- 
узеру размер интервала, который нужно оставить между ячейками и между гра- 
ницей вокруг таблицы и ее ячейками. На рис. 2.14 показано различие между по- 
лями ячейки и расстоянием между ячейками. 
Светлая граница таблицы 
Расстояние между ячейками 
Содержимое ячейки 
'Темная граница ячейки 
Светлая граница ячейки> 
Темная граница таблицы^ 
Поля ячейки Граница ячейки 
Контур содержимого 
Рис. 2.14. Поля ячейки определяют расстояние между ячейками, а расстояния 
между ячейками — расстояние между границей ячейки и ее содержимым 
Поскольку атрибуты cellspacing и ceiipadding оказывают влияние на все 
ячейки в таблице, оба атрибута устанавливаются в дескрипторе <tabie> табли- 
цы. По умолчанию и cellspacing, и ceiipadding имеют значение больше нуля. 
Например, если вы опустите оба атрибута из дескриптора <tabie>, Internet 
Explorer оставит интервал шириной в два пикселя между каждой ячейкой и меж- 
ду границами таблицы и ее ячеек. Следовательно, в Internet Explorer по умолча- 
нию cellspacing равен двум (2). Аналогично, если ceiipadding не задан, 
Internet Explorer оставит интервал шириной в один пиксель между границей каж- 
дой ячейки и ее содержимым. 
Чтобы увеличить интервалы между ячейками в таблице, установите атрибут 
cellspacing в дескрипторе <tabie> таблицы равным значению больше 1. На- 
пример, установка атрибута cellspacing равным десяти (ю) в следующем коде 
дает Web-браузеру указание оставить интервалы шириной 10 пикселей между 
каждой из ячеек таблицы и между границей таблицы и ее ячейками: 
<table border="l" cellspacing="10">

Глава 2. 
Аналогично, если вы хотите увеличить интервалы между сторонами ячейки и 
ее содержимым, задайте соответствующее значение атрибута ceiipadding. (В 
данном примере Web-браузер по-прежнему оставит интервал шириной только в 
один пиксель между границей ячейки и ее содержимым, поскольку в дескрипто- 
ре <tabie> не указан атрибут ceiipadding.) Чтобы Web-браузер оставил между 
сторонами ячейки (то есть границей вокруг ячейки) и ее содержимым интервалы 
шириной пять пикселей, предыдущий дескриптор <tabie> следует записать так: 
<table border="l" cellspacing="10" cellpadding="5lf> 
ХОТЯ В ЭТОМ Примере дескриптор <table> Содержит И атрибут cellspacing, И 
атрибут ceiipadding, вовсе не обязательно задавать один из них, чтобы задать 
другой. Просто имейте в виду, что большинство Web-браузеров будут использо- 
вать значение по умолчанию — один (i) или два (2) пикселя — для одного или 
обоих атрибутов, если вы явным образом не установите значения атрибута/атри- 
бутов в дескрипторе <tabie>. 
Задание размеров таблицы с помощью относительных 
и абсолютных значений 
Чтобы управлять размерами таблицы, необходимо добавить в дескриптор 
<tabie> таблицы атрибут width (ширина) и/или атрибут height (высота). Раз- 
меры таблицы можно указывать либо в относительных величинах (в виде про- 
центных отношений), либо в абсолютных величинах (как число пикселей). 
ПРАКТИКУМ 
Чтобы, например, нарисовать таблицу на все окно браузера, запишите дескрип- 
тор <tabie> таблицы следующим образом: 
<table width="100%" height="100%"> 
Web-браузер, в свою очередь, изменит размеры таблицы (и ее ячеек) так, что- 
бы таблица заняла все его окно. Иными словами, Web-браузер будет делать таб- 
лицу (и ее ячейки) больше, если посетитель Web-сайта увеличат окно браузера, 
и будет делать таблицу (и ее ячейки) меньше, когда посетитель сайта уменьшит 
размеры окна браузера. 
Если вы не хотите, чтобы Web-браузер изменял размеры таблицы в зависимо- 
сти от размеров окна браузера, задайте высоту и ширину таблицы в виде фикси- 
рованного числа пикселей. Например, чтобы Web-браузер каждый раз рисовал 
таблицу шириной 764 пикселя и высотой 558 пикселей, запишите дескриптор 
<tabie> следующим образом: 
<table width="764" height="558"> 
Опустив знак процента (%) в значении атрибута, вы даете Web-браузеру указа- 
ние использовать значение как число пикселей, а не как процентное отношение. 
При задании размеров таблицы с помощью абсолютных величин (иными слова- 
ми, при задании ширины и высоты таблицы как числа пикселей), Web-браузер 
не будет изменять ни размеры таблицы, ни размеры ее ячеек при изменении

102 Глава 2. HTML-таблицы 
посетителем сайта размеров окна Web-браузера. Например, при разрешении эк- 
рана 800x600 и ширине и высоте таблицы 764x558, если посетитель Web-сайта 
уменьшит высоту окна Web-браузера, на экране будет видна только часть табли- 
цы. Web-браузер, в свою очередь, добавит в окно вертикальную полосу прокрут- 
ки, чтобы посетитель сайта мог прокрутить часть таблицы вне экрана в пределах 
видимой области. (Аналогично, если посетитель уменьшит ширину окна браузе- 
ра, Windows отобразит горизонтальную полосу прокрутки, позволяющую посети- 
телю прокручивать содержимое экрана в горизонтальной плоскости.) И наоборот, 
если посетитель увеличит* разрешение экрана до 1024x768, размер таблицы 
останет- 
ся неизменным, а Web-браузер будет отображать в своем окне пустые места — снизу 

и справа от таблицы. 
Задавая атрибуты width и height в дескрипторе <tabie>, имейте в виду, что 
на самом деле вы устанавливаете только минимальные размеры таблицы. Ее фак- 
тические размеры будут определяться содержимым, которое вы поместите в 
ячейки таблицы. Предположим, например, вы задали таблицу 764x558, с двумя 
строками по две ячейки в каждой. Если в каждую ячейку первой строки вы по- 
местите по рисунку размером 450x350 пикселей, Web-браузер автоматически уве- 
личит ширину таблицы до 900 пикселей для соответствия ширине данных в таб- 
лице — то есть двух рисунков в первой строке. Если затем вы поместите 
графическое изображение размером 450x350 пикселей в одну из ячеек второй 
строки таблицы, Web-браузер увеличит высоту таблицы до 700 пикселей для со- 
ответствия высоте двух рисунков в столбце таблицы. 
Задание размеров ячеек с помощью относительных и 
абсолютных величин 
Помимо (или вместо) указания размеров таблицы путем задания атрибутов 
height и width таблицы в дескрипторе <tabie>, вы можете создать таблицу оп- 
ределенной высоты и ширины за счет указания размеров ячеек таблицы. 
ПРАКТИКУМ 
Например, если вы хотите создать таблицу 800x600 с двумя строками по четыре 
столбца в каждой, вы можете задать каждую ячейку как 200x300 пикселей, запи- 
сав дескриптор <td> для каждой ячейки следующим образом: 
<td width="200" height="300"> 
(Чтобы задать размеры ячейки с данными-заголовками, установите атрибуты 
width и height в дескрипторе <th> ячейки заголовка.) 
"" При определении ширины таблицы путем задания атрибута width в деск- 
рипторе <table> таблицы следите за тем, чтобы ширина ячеек в каждой строке в 
сумме 
была строго равна ширине таблицы во избежание "странного" поведения, 
"проявления" кото- 
рого специфичны для каждого отдельного браузера. Каждый из браузеров по-своему 
обраща- 
ется с неправильно сформированными таблицами. Следовательно, если вы хотите 
контро- 
лировать внешний вид своей таблицы в любом из браузеров, не пишите HTML-код 
таблиц, в 
котором размеры таблицы находятся в противоречии с размерами ее ячеек.

Глава 2. HTML-таблицы 
Вместо.задания размеров ячейки в виде фиксированного числа пикселей, вы 
можете дать Web-браузеру указание рисовать каждую ячейку как процент от об- 
щей ширины и высоты таблицы. Предположим, например, вы хотите, чтобы 
Web-браузер нарисовал таблицу, заполняющую окно браузера и имеющую три 
столбца равной ширины. HTML-код этой таблицы запишется следующим обра- 
зом, как с относительной шириной (заданной значением атрибута width в деск- 
рипторе <tabie>), так и со столбцами относительной ширины (заданной значе- 
нием атрибутов width в дескрипторах <th> и <td>): 
<table width="100%"> 
width="33%" >3аголовок K/th> 
<th width="33%" >3аголовок 
<th width="33%" Заголовок 
width="33%" >Данные столбца K/td> 
<td width="33%" >Данные столбца 2</td> 
<td width="33%" >Данные столбца 
Или, если вы хотите задать таблицу с фиксированной шириной и двумя стол- 
бцами, занимающими 80 процентов ширины таблицы и одним столбцом, зани- 
мающим 20 процентов ее ширины, HTML-код таблицы должен выглядеть следу- 
ющим образом: 
<table width="600"> 
<tie*tth 
< t h 
< t h 
кыжъа. 
< t d 
<td 
</table> 
width= 
width= 
width= 
width=" 
width=" 
width="
M40%" 
"40%" 
"20%M 
"40%" 
"40%" 
"20%" 
>3аголовок K/th> 
>3аголовок 2</th> 
>3аголовок 3</thX/tr> 
>Данные столбца K/td> 
>Данные столбца 2</td> 
>Данные столбца 3</tdX/tr> 
Шшш 1Ы задаёте шираш ятш. таШищы как нредштны© етнешшмя к шмрм= 
не таблицы, шшщт ж тем, чтобы сумма ширин, заданных в щещшшерш <Ш> 
(mim TaseiMi ммшетш) м дескрипторах <Ы> щщ едней §Tgesi т щтшшш& 
100 процентов. Штш же щтш щецентных отношений составит меньше 100 
Wib=§papgp ршщшшжч еетатем ра!немерне м^щу ЁШММ я 
При задании размеров ячейки (или таблицы) вы можете задать ширину без 
задания высоты или наоборот. Однако если вы задаете размеры ячейки как про- 
центные отношения к ширине таблицы, следите за тем, чтобы ширина таблицы 
была задана как число пикселей или как процент от окна Web-браузера путем 
задания атрибута width в дескрипторе <tabie> таблицы. Аналогично, если вы 
задаете высоту ячеек в таблице как процентное отношение к общей высоте таб- 
лицы, обязательно задайте также высоту таблицы. Чтобы задать высоту таблицы, 
установите атрибут height в дескрипторе <tabie> таблицы равным либо числу 
пикселей, либо процентному отношению к высоте окна браузера.

104 Глава 2. 
Выравнивание содержимого ячейки 
по горизонтали и по вертикали 
Если ячейка шире, чем ее содержимое, Web-браузер по умолчанию выровняет 
содержимое в ячейке по левому краю ячейки. 
Чтобы изменить выставляемое по умолчанию горизонтальное (то есть слева на- 
право) выравнивание содержимого ячейки, добавьте в дескриптор <td> ячейки 
атрибут align. Атрибут align может получать три возможных значения: 
• left. Выравнивает содержимое по левому краю ячейки. 
right. Выравнивает содержимое по правому краю ячейки. 
• center. Центрирует содержимое между левым и правым краями ячейки. 
На рис. 2.15 показано, как Internet Explorer отобразит таблицу, определенную 
следующим HTML-кодом, в дескрипторах <td> которой использовано каждое из 
допустимых значений атрибута align: 
<table border="l" width="100%" height="100%"> 
<trXth \»1с1ЪЬ="33%">Выравнивание по центру</ЪЬ> 
<th width="33%">BbipaBHHBaHHe по левому KpasK/th> 
<th width="33%">BupaBHHBaHHe по правому Kpara</thx/tr> 
<trXtd width="33%" align="center">IIo ueHTpy</td> 
<td width="33%" align="left">Cлeвa</td> 
<td width="33%" align="right">CnpaBa</tdX/tr> 
</table> 
Если высота ячейки превышает высоту ее содержимого, Web-браузер по умол- 
чанию отцентрирует содержимое по вертикали между верхним и нижним краем 
ячейки. Чтобы изменить существующее по умолчанию вертикальное (то есть 
сверху вниз) выравнивание содержимого ячейки, добавьте в дескриптор <td> 
ячейки атрибут vaiign. АтрибутУ vaiign может принимать четыре возможных 
значения: 
• top. Отображает содержимое так, что оно начинается у верхнего края 
ячейки. 
• middle. Центрирует содержимое вертикально между верхним и нижним 
краями ячейки. 
• baseline. В Netscape Navigator отображает содержимое так, что оно закан- 
чивается у нижнего края ячейки. В Internet Explorer задание значения 
"baseline" ("по базовой линии") изменяет только вертикальное положе- 
ние текста в ячейке, если ячейка содержит и текст, и изображение. При 
задании значения "baseline" Internet Explorer позиционирует текст так, 
чтобы он заканчивался вровень с нижним краем рисунка. Если в ячейке 
нет рисунка, Internet Explorer игнорирует значение "baseline" атрибута 
vaiign и начинает текстовое содержимое у верхнего края ячейки. 
• bottom. Отображает содержимое так, что оно заканчивается у нижнего 
края ячейки.

Глава 2. HTML-таблицы 105 
На рис. 2.16 показано, как Netscape Navigator отобразит таблицу, определен- 
ную следующим HTML-кодом, где в дескрипторах <td> ячеек таблицы использо- 
вано каждое из возможных значений атрибута vaiign: 
<table border="l" width="100%" height="100%"> 
< t r X t h width="25%">BbipaBHKBaiuie по вертикали - по верхнему краю* 
<th width="25%">BbipaBHMBaHMe по вертикали - по центру</Ъп> 
<th width="25%">BbipaBHHBaHHe по вертикали - по базовой линии 
<th width="25%">BupaBHHBaHHe по вертикали - по нижнему KpaxX/th> 
< t r x t d width="25%" valign="top">BBepxy</td> 
<td width="25%" valign="middle">IIo ueHTpy</td> 
<td width="25%" valign="baseline">IIo базовой nnHrai</td> 
<td width="25%" valign="bottom">C™isy</tdX/tr> 
</table>
Рис. 2.15. Таблица, иллюстрирующая действие трех значений атрибута 
выравнивания по горизонтали 
Выравнивание таблицы на Web-странице 
В предыдущем практикуме этой главы вы научились выравнивать содержимое 
ячейки по левому краю ячейки, по правому краю ячейки или по центру ячейки. 
Пока содержимое ячейки уже ширины самой ячейки, с помощью атрибута align 
в дескрипторе <td> ячейки вы можете позиционировать содержимое ячейки в 
горизонтальной плоскости внутри ячейки. Аналогично, если вы создаете таблицу 
уже ширины Web-страницы, на которой она отображается, вы можете позицио- 
нировать всю таблицу в горизонтальной плоскости на Web-странице с помощью 
атрибута align.

106 Глава 2. HTML-таблицы 
.«J* View Гзи>г*« Joels Help 
Stop Rehesti ' Home. i Search 
• 
Б..РЧГ 
Вырыто 
, 
По и-игру
inKmitfiwvn 
поиекгру 
Вырыюпиок га» ссрттолн 
- МО б и . ЮЙ ЛИНИИ 
По Базовой ЛИШИ 
Вироккп 
• по и 
Смоу 
мж m вертикали : 
«jbone 
Рис. 2.16. Таблица, иллюстрирующая действие четырех значений 
атрибута выравнивания по вертикали 
ПРАКТИКУМ • • • • 
По умолчанию Web-браузер отображает таблицу у левого края Web-страницы. 
Чтобы изменить выравнивание таблицы, заключите определение таблицы между 
начальным и конечным дескрипторами блока (<div></div>). Затем установите 
атрибут align внутри дескриптора <div> равным "left", "right" ИЛИ 
"center" — в зависимости от того, как должна быть выровнена таблица относи- 
тельно левого и правого краев Web-страницы. 
Например, чтобы Web-браузер отобразил таблицу по правому краю Web-стра- 
ницы (вместо левого края по умолчанию), заключите определение таблицы меж- 
ду начальным и конечным дескрипторами блока (<divx/div>). Затем установи- 
те атрибут align внутри дескриптора <div> равным "right", как показано в 
первой строке приведенного ниже HTML-кода: 
<div align="right' 
<table border="l 
* <trXth width=" 
<th width= 
<trxtd width=" 
<td width=' 
<trxtd width=" 
<td width=' 
</table> 
'> 
" width="50%' 
50%" 
"50%" 
50%" 
'50%" 
50%" 
'50%" 
' height="50%"> 
>3аголовок 
_ >3аголовок 
>Строка 
>Строка 
>Строка 
>Строка 
1 - 
1 - 
2 - 
2 -
K/th> 
2</thX/tr> 
столбец K/td> 
столбец 2</tdX/tr> 
столбец l</td> 
столбец 2</tdX/tr> 
Если ваш дескриптор <tabie> будет включать в себя атрибут width, установ- 
ленный равным "Ю0%" или значению в пикселях, которое превышает ширину 
окна браузера в пикселях, Web-браузер будет игнорировать атрибут align внутри 
дескриптора <div> в начальном и конечном дескрипторах блока (<divx/div>) 
вокруг определения таблицы.

Глава 2. HTML-таблицы 1 07 
Управление шириной и высотой ячейки с помощью 
вставки прозрачного GIF-изображения 
Рисуя таблицу, Web-браузер увеличивает размер ячеек (и всей таблицы) так, 
чтобы вместить их содержимое. Предположим, например, вы создаете ячейку с 
дескриптором <td> безматрибутов width или height. Если вы поместите в ячей- 
ку графическое изображение размером 150x100 пикселей, Web-браузер автомати- 
чески нарисует ячейку с шириной 150 пикселей и высотой 100 пикселей так, 
чтобы рисунок в нее помещался. Аналогично, если вы вставите это же изображе- 
ние размером 150x100 пикселей в ячейку, определенную с шириной и высотой, 
равными, например, 50 пикселей, Web-браузер "растянет" ячейку от заданных 
размеров 50x50 пикселей до таких, которые позволят вместить в нее графическое 
изображение. 
Присущим браузеру свойством изменять размер ячеек можно воспользоваться, 
поместив однопиксельное прозрачное GIF-изображение в ячейку и дав Web-бра- 
узеру указание растянуть картинку до нужной высоты и/или ширины. Web-брау- 
зер, в свою очередь, растянет графическое изображение и увеличит размеры 
ячейки до размеров растянутого изображения. Увеличение ячейки до размеров 
прозрачного изображения в ячейке заставит браузер вставить точные интервалы 
между ячейками слева и справа от ячейки с GIF-изображением и/или ячейками, 
находящимися сразу же над и/или под ней. 
Прозрачное GIF-изображение — это "невидимое" графическое изображение, 
которое можно использовать с таблицей или без таковой, чтобы воздействовать 
на положение объектов, размещенных на Web-странице. Посетитель сайта не бу- 
дет видеть прозрачное GIF-изображение на экране компьютера, поскольку Web- 
браузер отображает его так, как будто это лист прозрачного стекла, лежащий по- 
верх фона ячейки (или Web-страницы). Хотя посетитель "видит сквозь" 
прозрачное GIF-изображение, графическое изображение занимает определенное 
пространство в ячейке. В результате этого Web-браузер сделает ячейку достаточно 

большой для того, чтобы его вместить. 
Предположим, например, вы создаете Web-страницу с меню шириной 100 
пикселей вдоль левого края страницы, и хотите отделить меню от остального 
содержимого (справа от него) 20-пиксельным интервалом, подобно тому, как по- 
казано на рис. 2.17. 
ПРАКТИКУМ 
Создать таблицу с тремя столбцами, в которой пустая ячейка шириной 20 пиксе- 
лей (с растянутым прозрачным GIF-изображением) отделяет содержимое левой 
ячейки от содержимого в правой ячейке, можно, написав следующий код: 
<table border="l" width="767" height="554" 
cellspacing="0" cellpadding="O"> 
<trXtd valign="top" width="100">IIyHKTbi Meiuo</td> 
<tdximg height="l" width="20" src="images/spacing.gif"X/td> 
<td valign="top" width="647"> 
Здесь находится содержимое Web-cTpaHin№i</tdX/tr> 
</table>

108 Глава 2. HTML-таблицы 
. 1 •.!»• .tfi View fgvarte» I « * befe . • ' • . [irks Л | Е 
i t : ••.•••*•..•. '.+•"•> - •'.••& Ъ d L > i •••'& iM *$ 
f . Back : • Stop Refresh Hone Sa*eh Favoritet Hitioiy 
.* 
|Эпементы 
Меню 
Содержимое Web-страницы 
' :-Л..- '• .1 ' . 
i f f j b o * '"j Щ Computer 
• 
Рис. 2.17. Web-страница со 100-пиксельной панелью меню вдоль левого края, 
отделенной 
справа 20-пиксельным интервалом от остального содержимого страницы 
В данном примере дескриптор <img>, стоящий после второго дескриптора 
<td> (в третьей строке) дает Web-браузеру указание поместить прозрачное GIF- 
изображение, хранящееся в файле spacing.gif, во вторую ячейку таблицы. Ат- 
рибут width в дескрипторе <img> дает Web-браузеру указание "растянуть" изоб- 
ражение размером 1x1 пиксель так, чтобы его ширина составляла 20 пикселей. 
Причина, по которой вам может понадобиться использовать прозрачное GIF- 
изображение — вместо того, чтобы установить атрибут width в дескрипторе <td> 
ячейки равным требуемому числу пикселей незаполненного пространства и оста- 
вить ячейку пустой — состоит в том, что Web-браузеры по-разному обходятся с 
пустыми ячейками таблиц. Например, хотя Internet Explorer и показывает фоно- 
вый цвет ячейки в пустых ячейках, Netscape Navigator этого не делает, показывая 

вместо него цвет фона таблицы или Web-страницы. Более того, некоторые брау- 
зеры игнорируют атрибут height и/или атрибут width, заданные в дескрипторе 
<td> пустых ячеек, и рисуют пустые ячейки так, что их высота равна всего лишь 
высоте самой высокой непустой ячейки в строке, а ширина не превышает шири- 
ны самой широкой непустой ячейки в столбце. И, наконец, ни Netscape. 
Navigator, ни Internet Explorer не будут рисовать левую и верхнюю границы ячей- 

ки, не имеющей содержимого — даже если атрибут border таблицы имеет значе- 
ние 1 или более. Однако если вы поместите однопиксельное GIF-изображение, 
растянутое до требуемых размеров, в ячейку таблицы, все Web-браузеры будут 
отображать "пустую" ячейку одинаково — с размерами GIF-изображения, задан- 
ным цветом фона ячейки и границами (если таковые заданы) — поскольку, хотя 
ячейка и кажется незаполненной, на самом деле она не пустая.

Глава 2. HTML-таблицы 109 
l^i Вы у з н а е т е , к а к создавать файлы прозрачных GIF-изображений, далее 
в 
этой книге, в главе, посвященной графике. Пока что вы можете пользоваться 
однопиксель- 
ным прозрачным GIF-изображением из файла s p a c i n g . g i f , который можно 
выгрузить из 
раздела материалов для этой книги на сайте издательства. 
Обтекание текстом изображения 
Когда вы обдумываете первоначальный дизайн Web-страницы, вопросом пер- 
востепенной важности является компоновка документа. На Web-странице с удач- 
ным дизайном текст и графика расположены в организованном, легком для вос- 
приятия формате. Более того, организация содержимого страницы помогает 
глазам читателя плавно переходить от графических изображений к связанному с 
ними тексту и обратно. 
Предположим, например, вы создаете Web-страницу, содержащую несколько изоб- 
ражений книг. Для каждого изображения необходим небольшой абзац информа- 
ции, описывающий объект, и его розничная цена. Поместив графические изобра- 
жения, текст описания и цены в таблицу, вы можете дать Web-браузеру указание 
отображать текстовую информацию где угодно возле изображения, как показано 
на рис. 2.18. 
Ctw.H. PoStpr 
фундаментальный алгоритмы на С Анализ/Структуры данныл/Сортировка/Поиск 
Сшк> Роберт 
е алгоритмы на С. Алгоритмы на графах 
:гг'~ 
Пр»йс-л«от- 20 СЮгрн е-н«г*мн'2 
Лрлйс-лжт 174.00руб. •••игиии 
С.АЖ.И. Робарт 
Фундаментальные алгоритмы на С Анализ/Структура 
данных/Сортировка/Поиск^Алгоритмы на графах 
Рис. 2.18. Пример совместного представления рисунков товаров вместе 
с их кратким описанием и ценой 
Следующие HTML-дескрипторы создают таблицу, в которой первый рисунок 
будет отображен в строке 1, столбце 1 с соответствующими ему описанием (ря- 
дом с рисунком) в строке 1, столбце 2 и ценой (под рисунком) в строке 2, стол- 
бце 1. (Строка 3, столбцы 1 и 2 были добавлены для создания дополнительного 
пространства между предметами, описаниями и ценами.) 
<table border="4" cellpadding="0" cellspacing="2"> 
<trXtd width="72" align="center"> 
<img height="32" width="32"

ПО Глава 2. HTML-таблицы 
src="image_l. jpg"X/td> 
<Ъ<1>Вставьте oiracaHMe</tdXtr> 
<trXtd width="72" а1±дп="сепЪег">Вставьте ueHy</td> 
<tdx/tdx/tr> 
<trXtd width="72"</td> 
<tdX/tdX/tr> 
<trxtd width="72" align= "center"> 
<img height="32" width="32" src="image_2.jpg"X/td> 
<td>BcTaBbTe описание</ tdxtr> 
<trxtd width="72" align="center">BcTaBbTe iieHy</td> 
<tdx/tdX/tr> 
<trXtd width="72"</td> 
<td></tdx/tr> 
<trxtd width="72" align="center"> 
<img height="32" width="32" src="image_3.jpg"X/td> 
<td>BcTaebTe onHcaHne</tdXtr> 
<trXtd width="72" аИдп="сепЬег">Вставьте 4eHy</td> 
<tdx/tdx/tr> 
<trxtd width="72"</td> 
<tdx/tdx/tr> 
</table> 
Глава 2. HTML-таблицы 
src="image_l.jpg"X/td> К'Ш 
<td>Bc-raBb!re oinioafflie</tdxtr> 
<trXtd width="72" а1хдп="сепЪег">Вставьте i*eHy</td> 
<tdX/tdX/tr> 
<trXtd width="72"</td> 
<tdx/tdx/tr> 
<trXtd width="72" align="center"> 
<img height="32" width="32" src="image_2 . jpg"X/td> 
<td>BcTaBbTe описание</ tdXtr> 
<trXtd width="72" align="center">BcTaBbTe i*eHy</td> 
<tdX/tdX/tr> 
<trXtd width="72"</td> 
<tdx/tdx/tr> 
<trXtd width="72" align="center"> 
<img height="32n width="32" src="image__3 .jpg"X/td> 
<td>BcTaBbTe on»caHHe</tdXtr> 
<trxtd width="72" align="center">Вставьтеi *eHy</td> 
<tdX/tdX/tr> 
<trXtd width="72"</td> 
<tdX/tdX/tr> 
</table> 
Использование таблицы для управления структурой текста и графики создает 
приятную взгляду Web-страницу. Кроме того, поскольку содержащие большое ко- 
личество текста Web-страницы меньше, чем Web-страницы, изобилующие графи- 
ческими изображениями, использование текста в ячейках описания и цены при- 
водит к созданию документа меньшего, размера, нежели при преобразовании 
текста в графику, и, соответственно, Web-страница быстрее загружается. 
Отображение с помощью таблицы галереи миниатюр 
Отображение графики - неотъемлемая часть World Wide Web. Пусть, напри- 
мер, вы — владелец агентства по недвижимости, и вам нужно показать фотогра- 
фии домов, выставленных на продажу. Вы хотите, чтобы у посетителей сайта 
была возможность выбирать полноразмерное изображение, сначала открыв Web- 
страницу, содержащую миниатюры (уменьшенные изображения) всех выставлен- 
ТТППГТЯЖУ помят; Кпггтя гкасатитаттт, тттрдкяетт^ня минияттяпа>ч

Глава 2. HTML-таблицы 111 
Рис. 2.19. Web-страница с миниатюрами для каждого полноразмерного изображения 
ПРАКТИКУМ 
Чтобы с помощью таблицы отобразить группу изображений-миниатюр, создайте 
таблицу с отдельной ячейкой под каждую миниатюру. Чтобы связать миниатюру 
с соответствующим ей полноразмерным изображением, вставьте дескриптор <а> 
с атрибутом href в каждую ячейку, содержащую изображение-миниатюру. Деск- 
риптор <а> создает ссылку от миниатюры к полноразмерному изображению. На- 
пример, следующий код связывает изображение-миниатюру home_i.jpg с Web- 
страницей, содержащей полноразмерное изображение (page_i.htm): 
<а href="page_l .htm"Ximg src="home__l. jpg"X/a> 
Когда посетитель сайта щелкает на миниатюре, Web-браузер загружает стра- 
ницу, содержащую соответствующее полноразмерное изображение. Дескриптор 
<а> с атрибутом href в приведенном ниже коде связывает миниатюру (заданную 
атрибутом src в дескрипторе <img>) с соответствующим ей полноразмерным изоб- 
ражением и создает Web-страницу, немного похожую на показанную на рис. 2.19: 
<table border="4" cellpadding="O" cellspacing="2" 
width="137" bgcolor="#ffccff"> 
<trXtd align="center" valign="middle"Xa href="page_l .htm"> 
-•<img src="home_l. jpg"X/aX/td> 
<td align="center" valign="middle"Xa href="page_2.htm"> 
<img sro="home_2. jpg"X/aX/td> 
<td align="center" valign="middle"Xa href="page_3.htm"> 
<img src="home_3. jpg"X/aX/td> 
<td align="center" valign= "middle"Xa href="page_4 .htm"> 
<img src="home_4 . jpg"X/aX/tdX/tr> 
</table> 
Как только Web-браузер отобразит страницу с миниатюрами, посетителю ос- 
тается только щелкнуть на выбранной миниатюре, чтобы отобразить полнораз- 
мерное изображение. Например, при щелчке на "миниатюре в верхнем левом углу 
рисунка 2.19 Web-браузер отобразит полноразмерное изображение, которое пока- 
зано на рис. 2.20.

112 Глава 2. HTML-таблицы 
Homes & Apartments 
•-j Homes i:>; 
Maxwell Realty Company 
Location: PhiUdtlphla, PA 
Types Condo 
d Contect 
•bout thi» property. 
rpo« *wi AM efc 
Рис. 2.20. В результате щелчка на миниатюре загружается полноразмерное 
изображение 
Поскольку миниатюра — это уменьшенная версия полноразмерного изображе- 
ния, используйте правила именования, связывающие миниатюры с исходными 
изображениями. Если, например, вы создали и сохранили изображение с име- 
нем home__i.jpg, назовите соответствующую миниатюру home__is.jpg. Создание 
ассоциативных имен файлов помогает быстро идентифицировать файлы, по- 
скольку в стандартном списке файлов имена будут отображаться в алфавитном 
порядке. 
Создание маркеров и списков 
с помощью таблиц и графики 
Web-дизайнеры всегда имели возможность создавать списки с квадратным или 
круглым маркером перед каждым элементом списка. К сожалению, при создании 
стандартного маркированного (или, пользуясь принятым в языке HTML терми- 
ном, неупорядоченного) списка дизайнер может обозначать его элементы только 
маркерами из ограниченного количества символов. Например, следующий код 
сгенерирует маркированный список, приведенный на рис. 2.21. 
<11>Элемент списка K/li> 
<11>Элемент списка 2</1х> 
<И>Элемент списка 3</li>

Глава 2. HTML-таблицы1 
Начальный и конечный дескрипторы неупорядоченного списка (<uix/ui>) 
идентифицируют начало и конец маркированного списка, а дескриптор <ii> оп- 
ределяет элемент списка (см. рис. 2.21). 
Элемент списка 1 
Элемент списка 2 
Элемент списка 3 
Рис. 2.21. Упорядоченный список 
С другой стороны, таблицы позволяют создавать свои собственные маркеры 
за счет вставки графического изображения-маркера в ячейку таблицы. Обычно 
таблица, используемая для создания маркированного списка, содержит два стол- 
бца. Первый столбец содержит в себе графическое изображение, используемое в 
качестве маркера, а второй столбец — текст, описывающий элемент списка. 
Стандартная таблица с двумя столбцами создает список с броскими изображени- 
ями в качестве символов маркеров, как, например, показано на рис. 2.22. 
Акации 
»ы 
Березы 
Рис. 2.22. Неупорядоченный список со специальными маркерами 
ПРАКТИКУМ ШЯШ 
Предположим, например, что вы создаете список, содержащий три элемента, и 
хотите использовать изображение стрелки в качестве маркера для каждого из эле- 
ментов списка. Для создания показанного выше маркированного списка служит 
следующий код: 
<table border="4" cellpadding="O" cellspacing="2" width="137"> 
<trXtdXimg height="32" width="32" src="arrow.gif"X/td> 
<td>3neMeHT списка K/tdX/tr> 
<trXtdXimg height="32" width="32" src="arrow.gif "X/td> , 
<td>3neMeHT списка 2</tdX/tr> 
<trXtdXimg height="32" width="32" src="arrow.gif"X/td> 
<td>3neMeHT списка 3</tdX/tr> 
</table> 
Поскольку ячейки таблицы могут содержать любую графику, поэксперименти- 
руйте, заменяя обычные изображения, используемые для маркеров, чем-нибудь 
неординарным. Например, если вы создаете маркированный список действий, 
необходимых для выращивания роз, замените стандартный символ маркера на 
графическое изображение красной розы.

114 Глава 2. HTML-таблицы 
Создание бокового навигационного меню 
с помощью таблицы 
При разработке многостраничного Web-сайта вам нужно позаботиться о том, 
чтобы посетители могли без затруднений передвигаться со страницы на страни- 
цу вашего сайта. В предыдущем практикуме вы научились создавать маркирован- 
ные списки, используя для этого отдельные ячейки таблицы. С их помощью 
также можно создать отлично организованную навигационную панель. 
ПРАКТИКУМ 
Боковое меню {sidebar) представляет собой простую форму навигационной панели. 
Обычно боковое меню состоит из списка слов, отображаемых с левой стороны на 
Web-странице. Каждое слово на самом деле является ссылкой на другую страницу 
Web-сайта. При использовании таблицы для создания бокового меню каждая 
ячейка таблицы содержит отдельный элемент меню. Приведенный ниже листинг 
создает боковое навигационное меню, показанное на рис. 2.23: 
<table border="0" .cellpadding="O" cellspacing="2" width="96"> 
<trXtdXa href="home .htm">rnaBHaa</aX/tdX/tr> 
<trXtdXa href="samples . htm">06pa3ubi</aX/tdX/tr> 
<trXtdXa href="aboutus.htm">0 Hac</aX/tdX/tr> 
<trXtdXa href="contactus.htm">KoHTaKT</aX/tdX/tr> 
href="purchase.htm">KynnTb</aX/tdX/tr> 
Чтобы быть последовательными, всегда помещайте боковое навигационное 
меню в одном и том же месте на каждой странице сайта. Так посетителям будет 
легче находить систему навигации сайта и пользоваться ею. Чаще всего навига- 
ционное меню помещают в двух областях страницы: в виде боковой панели вер- 
тикально вдоль левого края Web-страницы (как в данном практикуме) или в виде 
горизонтальной панели вверху страницы. 
.fe № 
.Beck' Stop Reftesh Home Search FevotSes . Hiaoij1 
Главная 
Обравиы 
Контакт 
Купить 
~3 
а ро 
Рис. 2.23. Типовое боковое навигационное меню, заключенное в таблицу

Глава 2. HTML-таблицы 
Добавление графики и ссылок в ячейки таблицы 
Каждая ячейка таблицы представляет собой отдельный управляемый элемент, 
в который можно помещать текст, графику или же комбинацию текста и графи- 
ки. Чтобы добавить в таблицу ячейку, вставьте пару - начальный и конечный - 
дескрипторов данных таблицы (<tdx/td>), как показано в приведенном ниже 
коде, между начальным и конечным дескрипторами (<tabiex/tabie>) таблицы: 
<table> 
<tr>
<Ъс1>Сюда помещаются данные ячвйки</Ь6> 
</tr> 
</table> 
ПРАКТИКУМ 
Чтобы поместить в ячейку графическое изображение, вставьте дескриптор <img>, 
как показано ниже, между начальным и конечным дескрипторами данных ячей- 
ки (<tdx/td>): 
<table> 
<tr>
<tdximg src="image.jpg" X/td> 
</tr> 
</table> 
Атрибут src в дескрипторе <img> сообщает Web-браузеру имя файла графи- 
ческого изображения, которое браузер должен отобразить в ячейке таблицы. 
Следовательно, в данном примере Web-браузер отобразит рисунок из файла 
image.jpg. 
Чтобы преобразовать графическое изображение в ячейке таблицы в гиперс- 
сылку, заключите дескриптор <img> между парой — начальным и конечным — 
дескрипторов привязки (<ах/а>). Например, следующий код преобразует рису- 
нок в таблице (из предыдущего примера) в гиперссылку: 
<table> 
<tr>
<tdXa href ="info.htm"Ximg src="image. jpg" X/ax/td> 
</tr> 
</table> 
Обрабатывая HTML-код из данного примера, Web-браузер во время рисова- 
ния таблицы отобразит рисунок из файла image.jpg. Если посетитель сайта за- 
тем щелкнет на рисунке, Web-браузер отобразит содержимое файла, указанного в 
атрибуте href дескрийтора <а>. Следовательно, в данном примере Web-браузер 
отобразит содержимое файла info.htm, когда посетитель щелкнет на рисунке в 
таблице.

Глава 2. HTML-таблицы 
Управление границами на Web-странице 
с помощью вложенных таблиц 
Когда вы срздаете Web-страницу без таблиц, Web-браузер отображает найден- 
ные им в файле элементы Web-страницы один за другим, начиная в верхнем ле- 
вом углу окна браузера. Между первым элементом страницы и левым краем окна 
браузер помещает заданный по умолчанию интервал. К сожалению, не все Web- 
браузеры (и даже не все версии одного и того же Web-браузера) используют по 
умолчанию интервалы одинаковой, из-за чего при разработке Web-страницы воз- 
никает проблема, разрешить которую можно с помощью точного размещения 
графики и текста. 
ПРАКТИКУМ 
Предположим, например, вы создаете Web-страницу, содержащую три графичес- 
ких изображения, требующих установки определенного интервала от левой гра- 
ницы Web-страницы. Чтобы управлять границей сложной Web-страницы, создай- 
те таблицу и вставьте вторую таблицу с тремя графическими элементами в 
ячейку второго столбца первой таблицы. Помещение таблицы в ячейку внутри 
другой таблицы называется вложением (nesting). Когда вы вкладываете одну таб- 
лицу в другую, создается организованная структура, которая позволяет с большей 
точностью управлять размещением элементов на сложной Web-странице. 
В приведенном ниже коде демонстрируется вложение таблицы, содержащей 
три изображения? в ячейку другой таблицы: 
<table border="2" cellpadding="O" cellspacing="O"> 
<trxtd width="30"X/td> 
<td width="32"X/td> 
<td width="30"X/tdX/tr> 
<trXtd width="30"Ximg src="trans .gif" width="30"X/td> 
<td width="32" align="center"> 
<!-- Здесь начинается вложенная таблица . . . —> 
<table border="4" cellpadding="O" cellspacxng="2"> 
<trXtd width="32"Ximg src="image_l. jpg"X/tdX/tr> 
<trXtd width="32"Ximg src="хтаде^2. jpg"x/tdx/tr> 
<trXtd width="32"Xirag src="image_3.jpg"X/tdx/tr> 
</tableX/td> 
<!— Здесь вложенная таблица заканчивается . . . --> 
<td width="30"Ximg src="trans.gif" width="30"> 
</tdX/tr> 
<trxtd width="30"X/t;d> 
<td width="32"X/td> 
<td width="30"X/tdX/tr> 
</table> 
В данном примере второй столбец таблицы содержит вложенную таблицу, а 
первый столбец внешней таблицы имеет фиксированную ширину, равную 30 
пикселям. В результате, когда Web-браузер загружает Web-страницу, первый стол- 
бец таблицы отодвигает вложенную таблицу на 30 пикселей вправо от левого 
края окна браузера, как показано на рис. 2.24.

Глава 2. HTML-таблицы 117 
•3D \Ьпе*,\?П1!2МоЬв «WVHIML>feb_DCTign\?be t*»4mase.\1-2« hi 
ЕЯе .<fi View F&otm look fcjefe 
Stop Refresh Home , . Search 
1 
"3 
Рис. 2.24. Таблица создает границу для графических изображений, 
содержащейся во вложенной таблице 
Составление навигационной карты путем помещения 
фрагментов изображения в таблицу 
Навигационные карты — отличный способ помочь посетителям лучше ориен- 
тироваться в пределах вашего сайта. Навигационная карта похожа на группу кно- 
пок, объединенных в одно изображение. Когда посетитель сайта наводит курсор 
мыши на навигационную карту, внутренний код навигационной карты позволяет 
ему щелкать мышью на определенных областях карты, так называемых "горячих" 
областях. "Горячие" области — это невидимые границы вокруг определенных час- 
тей изображения. Например, на навигационной карте Соединенных Штатов "го- 
рячие" области определяли бы границы каждого штата. Когда посетитель щел- 
кает на штате Канзас, "горячая" область, определяющая Канзас, может, 
например, загрузить Web-страницу с текущими погодными условиями в Канзасе, 
или же может направить посетителя на Web-сайт, посвященный, скажем, исто- 
рии Канзаса. Навигационные карты помогают посетителям наглядно ориентиро- 
ваться в пределах сложного Web-сайта. 
Проблема, связанная с навигационными картами, заключается в том, что пи- 
сать код для/ них достаточно сложно и что не все версии Web-браузеров поддер- 
живают навигационные карты. Преодолеть эту проблему и добиться свойствен- 
ной навигационным картам гибкости можно с помощью механизма таблиц. 
Чтобы ячейки таблицы функционировали как "горячие" области на навигацион- 
ной карте, разделите изображение на прямоугольные фрагменты и поместите 
каждый фрагмент в отдельную ячейку таблицы. Затем добавьте в каждую ячейку 
дескриптор <а> с атрибутом href, который будет сообщать Web-браузеру, какое 
действие необходимо выполнить при щелчке на изображении, помещенном в 
ячейку.

118 Глава 2. HTML-таблицы 
ПРАКТИКУМ 
В приведенном ниже коде, когда посетитель выполняет щелчок на графическом 
изображении home.jpg, Web-браузер соединяется с Web-страницей home.htm и 
открывает ее: 
<а href="home.htm"> <img height="20" width="80" src="home.gif"X/a> 
Правильно разработанные и помещенные в ячейки таблицы с границами ну- 
левой ширины (то есть невидимыми) фрагменты рисунка Web-браузер отобража- 
ет рядом друг с другом, так что посетитель будет видеть их как целостное графи- 

ческое изображение. 
Приведенный ниже код создает навигационную панель, показанную на рис. 
2.25: 
<table border="0' 4 1 - Л 
cellspacing="0": cellpadding- О" 
<tr height="20"> 
<td width="140"Xa href="search.htm"> 
<img src="search_btn_on. jpg" 'height="20" width="140"X/aX/td> 
<td width="140"Xa href="how2use.htm"> 
<img src="how2use_btn_on. jpg" height="20" width="140"X/aX/td> 
<td width="140"Xa href="refs.htm"> 
<img src="refs_btn_on.jpg" height="20" width="140"X/aX/td> 
<td width="140"Xa href="coords .htm"> 
<img src="coords_btn_on. jpg" height="20" width="140"x/aX/td> 
<td width="140"Xa href="guestbook.htm"> 
<img src="guest±>ook_btn_on. jpg" height="20" width="140"x/aX/td> 
</tr> 
</table>
^j$D:\books\ 
; № .* 
; ' Back 
t поиск 
2002Vabe 
View ' Fav 
и заказ 
eiltlVHTML Web DetignV2b 
jrif« Xod* НФ 
J i 
Slop Refie 
1 как ПОАЬЭОМТЬСЯ 1 
" о*(\1тич.л\1 2Ь hi 
h Home i 
справочник 
ii Mi 
h Favorites 
Ш» КООрДИМЛТ).
ilotei 
...H">o<y. • 
i nit (Рва* 
i ^4 Mv Ds 
513 
и
-I 
Рис. 2.25. Таблица с пятью графическими изображениями, которые 
на Web-странице выглядят как единое целое 
Разрезание графического изображения на фрагменты 
для вставки в ячейки таблицы с целью создания 
быстрозагружаемой Web-графики 
В предыдущем практикуме вы научились создавать навигационные карты пу- 
тем компоновки отдельных графических элементов внутри таблицы. Таблицы 
также позволяют составлять графические изображения так, чтобы составная кар- 
тинка выглядела как одно изображение. Разбиение рисунка на фрагменты и по-

Глава 2. HTML-таблицы 
мещение фрагментов в отдельные ячейки таблицы позволяет Web-браузеру извле- 
кать и отображать изображение быстрее, чем если бы изображение было единым 
большим файлом. Экономия скорости зависит от цветов в нарезанных изображе- 
ниях. Из фрагментов, содержащих меньшее число цветов, таких как голубое 
небо, создаются файлы меньшего размера, чем из фрагментов, в которых цветов 
больше. 
ПРАКТИКУМ 
Скажем, к примеру, у вас на Web-странице есть большое графическое изображе- 
ние, и из-за большого размера файла изображения страница загружается черес- 
чур долго. Изображение, о котором идет речь, представляет собой фотографию 
ландшафта, содержащую большие области сплошного голубого неба, и называет- 
ся big_sky.jpg. 
Если вы разделите большое графическое изображение на фрагменты и сохра- 
ните каждый из этих фрагментов на диске в отдельном файле формата JPEG, вы 
сможете воспользоваться взаимосвязью между размерами файла и цветовой насы- 
щенностью изображения. При сохранении графического изображения в формате 
JPEG графическая программа выбирает метод сжатия на основании количества 
цветов, содержащихся в изображении. Однако вне зависимости от примененного 
метода сжатия, чем больше на картинке цветов, тем больше размер создаваемого 
программой JPEG-файла. 
Если вы разделите большое графическое изображение на фрагменты, графи- 
ческая программа сможет выбрать различные методы сжатия для разных частей, 
или порций изображения. Программа сохранит те из порций, которые содержат 
меньше цветов, в меньших JPEG-файлах, а порции, в которых цветов больше, в 
JPEG-файлах большего размера (см. рис. 2.26). Однако при данной картинке с 
переменным количеством цветов в различных частях изображения сумма разме- 
ров нарезанных JPEG-файл ов будет меньше числа байтов, необходимых для-хра- 
нения изображения в одном JPEG-файле. Следовательно, Web-браузер сможет 
загрузить и отобразить все файлы порций быстрее, чем он мог бы загрузить еди- 
ный файл, поскольку браузеру придется извлекать с сервера меньший объем дан- 
ных. Помните: когда вы помещаете порции (фрагменты) картинки в ячейки таб- 
лицы с границами нулевой ширины (невидимыми), таблица удерживает 
фрагменты друг возле друга (без интервалов между ними) так, что они выглядят 
одним большим изображением. 
Когда таблица загружает изображение на Web-страницу, оно загружается быст- 
рее, поскольку браузеру приходится загружать с сервера меньший объем инфор- 
мации. 
Для разрезания изображения требуется какой-нибудь графический редактор, 
например, Adobe ImageReady 3.0. Это единственная имеющаяся в настоящее, вре- 
мя на рынке программа, которая автоматически разрезает фотографическое изоб- 
ражение, оптимизирует каждую порцию в соответствии с цветами в изображении 
и сохраняет нарезанные изображения в отдельной папке.

120 Глава 2. HTML-таблицы 
Исходное изображение = 36.2 Кб 
Порция 1 = 4.2 Кб 
Порция 3 = 8.1 Кб 
ШЕЯ 
Порция 2 = 4.2 Кб 
Порция 4 = 8.2 Кб 
Разрезанное изображение = 24.7 Кб 
Рис. 2.26. Разрезанное изображение на 32 процента меньше исходного 
Снижение времени, затрачиваемого Web-браузером 
на рисование таблицы 
Хотя таблицы — отличное средство для отображения содержимого Web-доку- 
мента и управления им, таблицам, как и любому другому Web-элементу, требует- 
ся время на загрузку. Из предыдущего практикума вы узнали, как ускорить заг- 
рузку графического изображения за счет его разрезания на отдельные фрагменты 
и составления фрагментов в единое целое. Хотя разрезание изображения поло- 
жительно влияет на скорость загрузки, браузеру приходится также создавать и 
загружать таблицу. При создании таблицы чем менее сложной является структура 
таблицы, тем быстрее таблица загружается. 
ПРАКТИКУМ 
Чтобы таблица быстрее загружалась, укажите размеры графических изображений, 
вставляемых в ячейки таблицы. В следующем коде графическое изображение 
image.jpg загружается в ячейку таблицы, которую браузер делает такой же ши- 
рины и высоты, что и изображение: 
<table> 
<tr>
<tdXimg width="58" height="12" 
</tr> 
</table> 
sr c=" image. jpg"X/td> 
Если опустить атрибуты height и width в дескрипторе <img>, браузеру при- 
дется определять размер ячейки по размеру изображения, которое он должен в 
ячейку поместить. В результате этого Web-браузеру потребуется больше времени 
для рисования таблицы на экране, поскольку для определения размеров ячейки 
ему нужно будет загрузить графическое изображение. Если вы в явном виде зада-

Глава 2. HTML-таблицы 
дите размеры всех графических изображений, Web-браузер сможет нарисовать 
таблицу, вывести весь текст в ячейках таблицы, а затем вернуться к загрузке и 
вставке медленно загружающихся изображений в таблицу. Поскольку извлечь 
и отобразить текстовое содержимое браузер сможет быстро, у посетителя сай- 
та будет возможность читать текстовое содержимое таблицы, ожидая, пока 
браузер извлечет и отобразит большие, медленно загружающиеся изображе- 
ния в таблице. 
При указании размеров изображений следите затем, чтобы значения атри- 
бутов height и w i d t h соответствовали фактической ширине и высоте 
изображения, кото- 
рое браузер должен поместить в ячейку. Если указанные вами высота и/или ширина 
отлича- 
ются от размеров изображения, Web-браузер растянет (или сожмет) изображение, 
чтобы 
привести его размеры в соответствие со значениями атрибутов height и w i d t h .
 В резуль- 
тате выведенное на экран изображение может исказиться. 
Имитация фреймовой Web-страницы 
с помощью таблицы 
Web-дизайнеры тратят немало времени на то, чтобы должным образом орга- 
низовать содержимое на Web-странице. На хорошо продуманных Web-страницах 
информация группируется в четко определенные области. Например, на страни- 
цах многих сайтов группа заголовков (или баннер) отображается вдоль верхней 
границы страницы, навигационная панель расположена вдоль одной из сторон 
или вдоль нижнего края, а само содержимое отображается под заголовками и 
либо справа от навигационной панели, либо над ней. 
Web-сайт с хорошо организованными Web-страницами создает удобную среду, 
которая побуждает посетителя зайти на сайт и потратить время на исследование 
его содержимого. Один из способов организации содержимого нагWeb-странице 
— это использование фреймов, которые делят Web-страницу на несколько окон, 
называемых фреймовой структурой (frameset), причем каждое окно способно ото- 
бражать отдельный Web-документ. Типовая фреймовая Web-страница, вроде той, 
которая показана на рис. 2.27, имеет три фрейма. 
Первый фрейм располагается слева направо вдоль верхнего края страницы и 
содержит заголовочную информацию, например, название и адрес компании. 
Второй фрейм содержит навигационную систему и располагается вдоль левой 
стороны страницы, от заголовочного фрейма до нижнего края страницы. Третий 
фрейм содержит организованные области текста и графики. 
Хотя фреймы — отличный инструмент для организации информации на Web- 
странице, им присущи два больших недостатка. Во-первых, фреймы не полнос- 
тью поддерживаются всеми Web-браузерами, а во-вторых, на загрузку фреймовой 
Web-страницы Web-браузеру требуется больше времени, поскольку в каждом 
фрейме страницы браузер должен загрузить и отобразить отдельный Web-доку- 
мент.

122 Глава 2. HTML-таблицы 
Видимая граница определяет фреймы 
Stop fietfech Home Seaich Favorites Huttty ; Mai 
, ., _ _ I ^j^ 
: • . . , - ! ' • : '• • : .' 
• . i.'. . , . • . I 
РИС. 2.27. Типичная Web-страница, разделенная на фреймы 
ПРАКТИКУМ ШШШШШ 
Хотя таблицы не позволяют загружать в одном окне браузера несколько доку- 
ментов, с помощью таблиц можно создать видимость организации, получаемой 
при работе с фреймовыми Web-странцами. Например, приведенный ниже код 
создает таблицу, придающую Web-странице организованный вид фреймовой стра- 
ницы, как показано на рис. 2.28. 
<table border="4" cellpadding="O" cellspacing="2" width="600"> 
<tr height="25"> 
<td height="25" colspan="2" bgcolor="#9900ff"> 
<centerXfont color="white">3T0 ЗАГОЛОВОЧНАЯ ОБЛАСТЬ 
</font></center> 
</tdx/tr> 
<tr height="300"> 
<td width="100" height="300" bgcolor="#cc0000"> 
<centerXfont color="white">3Ta область содержит 
1 </font> 
<pXfont со1ог="\1ЫЪе">навигационный</.опЪХ/р> 
<pXfont color="white">MaccHB</fontX/p> 
</centerX/td> 
<td width="400" height="300" bgcolor="black"> 
<centerXfont color="white">B этой области находится содержимое 
Web-CTpaHnuK</fontX/center> 
</td> 
</tr> 
</table>

Глава 2. HTML-таблицы 123 
.8е .dft У»«м : Favorites Tools 
J
Stop Refresh 
это:;/, 
J 
n! My Compute! 
Рис. 2.28. Web-страница с имитацией фреймовой структуры с помощью таблицы 
Используя различные фоновые цвета для каждого раздела (в данном примере 
красный, синий и черный), можно сделать так, что каждый раздел будет смот- 
реться как независимый - подобно фреймам на фреймовой Web-странице. 
Привлечение внимания посетителя 
с помощью цвета фона ячеек 
В этой главе вы узнали, что основные способы применения таблиц в Web-до- 
кументе включают отображение табличных данных, организацию и размещение 
содержимого в определенных местах, создание навигационных карт и экономию 
времени, затрачиваемого браузером на загрузку графических изображений. Кроме 
того, таблицы можно использовать для привлечения внимания посетителей сай- 
та и, следовательно, для притягивания их взглядов к отдельным областям Web- 
страницы. Цвет — мощное средство, с помощью которого можно завладеть вни- 
манием посетителя, В предыдущем практикуме вы работали с фоновым цветом 
для создания групп ячеек, делящих Web-страницу на области, имеющие различ- 
ное назначение. 
Теперь предположим, что вы создаете документ, содержащий большое количе- 
ство текста, и хотите, чтобы посетитель уделил особое внимание одному опреде- 
ленному абзацу. Создайте таблицу с множеством ячеек и поместите текст Web- 
страницы в одну из ячеек таблицы. Затем окрасьте ячейку слева от "важного" 
абзаца и, может быть, даже поместите в цветную ячейку какой-нибудь описа- 
тельный текст, например, как показано на рис. 2.29.

124 Глава2. HTML-таблицы 
'• " ' • ' - " • • - • •••.•••• • • • ' - г » « . 
Fife .dl View Favorite» X™ • Help 
J
Stop Seach . Favorites: 
Смотри сюда! 
Текст основной части 
документа находится здесь. 
Вся информация, которую 
должна 
отображать ваша Web-страница 
Важная информация, которую 
ваши читатели 
должны увидеть, подсвечена 
ярко-желтым цветом. 
m
Рис. 2.29. Таблица с цветной ячейкой, притягивающей взгляды 
к определенной области Web-страницы 
Приведенный ниже код создает Web-документ, показанный на рис. 2.22: 
<table border="0" cellpadding="O" cellspacing="2" width="317" 
bgcolor="black"> 
<tr> 
<td width="89" height="20"> 
<img src="trans.gif" height="20"</td> 
<td rowspan="3" valign="top"Xfont color="white"> 
Текст основной части документа находится здесь.<br> 
Вся информация, которую должна<Ьг> 
отображать ваша Web-страница.<br> 
Важная информация, которую ваши читатели<Ьг> 
должны увидеть, подсвечена<Ьг> 
ярко-желтым цветом. </f on tX/tdX/tr> 
<tr>
<td width="89" height="20" align="center" bgcolor="yellow"> 
Смотри crafla!</tdx/tr> 
<trXtd width="89"X/tdX/tr> 
</table> 
Изменение цвета фона ячейки таблицы, содержащей слова "Смотри сюда!" на 
желтый (за счет установки атрибута bgcolor в дескрипторе <td> ячейки равным 
''yellow") привлекает внимание посетителя к ячейке и делает акцент на фраг- 
менте текста в смежной ячейке. 
Визуальное выравнивание содержимого Web-страницы 
с помощью видимых границ таблицы 
Выравнивая с помощью таблицы графику и текст, вы создаете организован- 
ную структуру страницы, что помогает глазам посетителя двигаться по документу 
и повышает привлекательность компоновки страницы.

Глава 2, HTML-таблицы 1 2 5 
ПРАКТИКУМ 
Предположим, например, вы хотите создать Web-страницу, содержащую фотогра- 
фии ваших сотрудников вместе с их именами и фамилиями, должностями, зани- 
маемыми в компании, и почтовыми адресами. Чтобы организовать эту информа- 
цию, создайте таблицу, состоящую из одного столбца, как показано на рис. 2.30. 
Строка 1 содержит имя и фамилию сотрудника, строка 2 — фотографию со- 
трудника, строка 3 — должность, занимаемую им/ею в компании; строка 4 — 
его/ее почтовый адрес. Применение таблицы не только помогает организовать 
информацию на Web-странице, но, вдобавок к этому, использование атрибута 
border дает возможность еще более наглядно определить внешнюю границу таб- 
лицы и отделяет таблицу от прочей графики и текста на Web-странице. 
Показанная на рис. 2.30 таблица создается при помощи следующего кода: 
<table border="6" cellpadding="O" cellspacing="2" width="175"> 
<tr>
<td width="175" height="30" align="center"> 
Джеймс Маркин 
</tdx/tr> 
<tr height="90"> 
<td width="175" height="30" align="center" valign="middle"> 
<img height="67" width="92" src="employee_l.jpg"> 
</tdX/tr> 
<tr> . , 
<td width="175" height="30" align="center"> 
Ведущий дизайнер 
</tdX/tr> 
<tr>
<td width="175" height="93" align="center" valign="middle"> 
<font size="4">Riven Productions</font> 
<brXfont size="4">433 Spaeder Street</font> 
<brXfont size="4">Hollywood, CA 23435</font> 
</tdX/tr> 
<table> 
Когда вы отключаете атрибут border (border=M0"), ячейки таблицы сливают- 
ся, так что отдельные ячейки таблицы ЁЫГЛЯДЯТ СПЛОШНЫМ целым. Использова- 
ние атрибута border визуально разделяет информацию на четко определенные 
информационные блоки, что существенно облегчает ее восприятие. 
Джеймс Маркин 
Ведущий дизайнер 
Riven Productions 
433 Syacdei Street 
Hollywood, CA 234*5 
Рис 2.30. Таблица с текстом и графикой

126 Глава 2. HTML-таблицы 
Управление расстоянием между колонками 
и шириной полей текста на Web-странице 
При создании документов с помощью таких программ, как Microsoft Word, 
текстовый процессор позволяет управлять внешними полями по краям каждой 
страницы и расстоянием между колонками текста. К сожалению, язык HTML не 
предоставляет таких же возможностей при размещении текста на Web-странице. 
Однако помещение текстового содержимого в таблицу может в некотором роде 
сымитировать механизм управления внешними полями и расстоянием между ко- 
лонками, который имеется в текстовом процессоре. 
Пусть, например, вы хотите создать Web-страницу, которая, будучи отображе- 
на Web-браузером, напоминала бы созданный в текстовом процессоре документ" с 
двумя колонками текста и соответствующим расстоянием между колонками (см. 
рис. 2.31). 
ПРАКТИКУМ 
В таблице, показанной на рис. 2.31, первый и последний столбцы таблицы оп- 
ределяют размер пространства, отведенного под левое и правое поле. В то же 
время третий столбец определяет размер интервала, который браузер оставит 
между колонками текста. И, наконец, второй и четвертый столбцы содержат в 
себе текст документа. 
Приведенный ниже код сгенерирует таблицу, показанную на рис. 2.31 (обра- 
тите внимание, что таблица фактически содержит пять ячеек): 
<table border="0" cellpadding="O" cellspacing="2" width="600"> 
<!-- Столбец, управляющий левым полем --> 
<tr height="250"> 
<td width="20"> 
<img src="trans.gif" width="20"X/td> 
<td width="200" valign="top"> 
<centerxfont size="5"Xb>CH>fla вставляется эаголовок</Ь> 
</font></center> 
<p> Сюда вставляется текст основной части документа</р> 
<р> Сюда вставляется текст основной части документа</рХ/Ъ6> 
<!—Столбец, управляющий расстоянием между колонками —> 
<td width="15"> 
<img src="trans.gif" width="15"X/td> 
<td width="200" valign="top"> 
<centerXfont size="5"Xb>CKwa вставляется эаголовок</Ь> 
</font></center> 
<P> Сюда вставляется текст основной части документа</р> 
<р> Сюда вставляется текст основной части flOKyMeHrra</pX/td> 
<!-- Столбец, управляющий правым полем --> 
<td width="20"> 
<img src="trans.gif" width="20"X/tdX/tr> 
</table>

Глава 2. HTML-таблицы 127 
Помещение текста в таблицу позволяет организовать текст и управлять его 
отображением в окне браузера, а хорошо организованный текст легче читается и 
воспринимается. Кроме того, не все браузеры корректно отображают пустые 
ячейки таблиц. Следовательно, чтобы таблица всегда отображалась так, как вы 
задумали, вставьте прозрачные GIF-изображения в ячейки полей и промежутка 
между колонками и установите атрибут width в дескрипторе <img> равным тре- 
буемой ширине поля или промежутка между колонками. 
15-пиксельныи проь 
i .fe Edit .»« FavoiW ТоЫ» : Hob " 
": ^ ^) 
{ Back " Stop 
oeiween columns onext. 
Unfortunately, HTML does not give 
you the same control over the 
placement of tert on a Web page that 
Microsoft Word exerts over the 
margui and gutter space in a word 
processing document However, by 
placing text content in a table, you 
can simulate the outside margin and 
gutter control available in a word 
processor. 
Say, for example, you want to create a 
Web page that when displayed by a 
Web browser resembles a twocolumn 
word processor document 
with appropriate gutter spacing 
between the columns of text, as 
. shown in Figure 26 1 
ew\ , 
ежуток между колонками 
ii 4 й м Refresh Home ; Search Favaiites 
between the twc; columns of text. 
Finally, the second and fourth 
columns hold the document text The 
following code will generate the table 
displayed in Figure 26_1. (Notice that 
the table actually contains five cells.) 
Unfortunately, HTML does not give 
you the same control over the 
placement of text on a Web page that 
Microsoft Word exerts over the 
margin and gutter space in a word 
processing document However, by 
placing text content in a table, you 
can simulate the outside margin and 
gutter control available in a word 
processor 
/^\~~A" 
;;u*H| 
J 
History i 
^ MyCoiT^uter 
Щ
•
- 
20-пиксельные столбцы 
Рис. 2.31. Отображение двухколоночного текстового документа с использованием 
таблицы

В этой главе 
I Обработка HTML-форм 
I Дескрипторы и атрибуты, используемые для создания форм 
• Создание на форме однострочного поля ввода 
' Создание на форме многострочного поля ввода 
Проверка данных текстового элемента перед передачей результатов 
заполнения формы 
I Создание на форме флажков 
' Создание на форме переключателей 
I Проверка выбора группы переключателей перед передачей результатов 
I формы 
Создание на форме выпадающего списка (меню выбора) 
I Проверка выбора элемента списка перед передачей результатов формы 
I Изменение элементов списка выбора на основании введенных 
посетителем данных 
I Передача всех значений списка выбора на Web-сервер с использованием 
скрытых полей 
I Создание на форме кнопки Reset 
Предотвращение случайной очистки посетителем элементов формы 
I Создание на форме кнопки Submit 
Замена стандартных кнопок Submit и Reset другими графическими 
I изображениями 
I Отправка результатов формы по электронной почте без использования 
CGI-сценария 
I Управление расположением элементов и текста формы с помощью 
HTML-таблиц 
' Создание клавиши быстрой навигации по форме с помощью дескриптора 
<label> 
Указание Web-браузеру выполнять функцию проверки данных формы с 
помощью атрибута onClick 
I Передача значений Web-серверу с помощью скрытых полей 
I Сокрытие ввода пользователя от просмотра в поле ввода пароля

Глава 3. HTML-формы 129 
Если вы потратили некоторое время на путешествия по Web-сайтам в 
Internet, вам наверняка доводилось заполнять определенное количество Web- 
форм. По сути дела, вы сталкиваетесь с формами (например, поисковыми машина- 
ми или страницами зхода в систему) при каждом посещении Web. Несмотря на то 
что большую часть Web-страниц составляет текст, изображения и гиперссылки, ко- 
торые позволяют получать информацию, практически все Web-сайты имеют, по 
крайней мере, одну форму, которая позволяет передавать данные администратору 
Web-сайта. Форма может быть простым экраном входа в систему, который запра- 
шивает имя пользователя и пароль для получения доступа к сайту, или предос- 
тавлять такие сложные пользовательские интерфейсы, как Hotmail, E*Trade, eBay, 
Yahoo и т.д. Так, например, на рис. 3.1 показана форма настройки учетной запи- 
си пользователя и форма входа в систему на сайте http://www.hotmaii.com. 
С точки зрения дизайнера, формы дают возможность организовать диалог с 
посетителями сайта. Вместо использования текста и изображений для отправки 
информации, формы предоставляют текстовые окна, флажки, переключатели и 
меню выбора, позволяющие извлекать информацию. 
Для обработки откликов (т.е., результатов заполнения формы), получаемых от 
посетителей сайтов, как правило, используется определенный сценарий, выпол- 
няемый на стороне Web-сервера, и, возможно, сценарий, выполняемый браузе- 
ром перед передачей информации, веденной пользователем в форму. Ниже в 
этой главе будет рассмотрена реализация упомянутых сценариев. А пока что сле- 
дует запомнить, что сценарии обработки результатов формы выполняют две фун- 
кции. Во-первых, Web-сервер или (предпочтительно) Web-браузер могут выпол- 
нять сценарий проверки правильности введенных в форму данных, т.е. сценарий, 
который проверяет, что пользователь заполнил все "обязательные" поля и что со- 
Hotmail1 
Registration 
Complete this form to register for a Hotmail account, which is also э 
Microsoft .NET Passport. 
The Hotmail e-mail address and password you create are your .NET Passport 
credentials. You'll need them to access your Hotmail account and to sign in 
where 
you see, the NET Passport sign-in button:
What if I 
Ptoflle Information 
First Name 
Last Name 
Language 
Country/Region ' 
State 
ZIP Code 
Time Zone 
Gender 
Birth D»te 
Occupation 
Г" 
1
| English jj 
| United States 
j [Choose One] j.J 
1| 
Universal Time - GMT _*J 
<" Male <* Female 
| Month .iiJOay^JI 
|{Select an Occupation) 
Bftb 
with jli outgoing t-mjiJ mtttjgas. 
• 
| (.» 1999) 
• 
Экран регистрации на сайте Hotmail 
E-mail 
Addres 
Passwo
•
Ml 
Г Do not re 
future sign-in, 
computer,) 
Don't ha 
1
I
l~ Sign me i 
nember my e- 
(Selectthis wh 
.NET Passport? 
automatically. 
j stgrt in j 
nail address for 
en using a public 
fretQ"* пот. 
Форма ввода сведений о новой учетной 
записи на сайте Hotmail 
Рис. 3.1. Примеры форм из сайта http://www.hotmail.com

130 Глава 3. HTML-формы 
держащиеся в форме данные соответствуют требуемому формату. Во-вторых, Web- 
сервер выполняет сценарий обработки результатов формы, или же сценарий мо- 
жет сохранять результаты в файле и передавать его другой программе для после- 
дующей обработки. (Некоторые программисты называют результаты, 
передаваемыебраузеромWeb-серверу,наборомданныхформы.) 
Несмотря на то что формы могут существенно отличаться по внешнему виду, 
все они имеют несколько общих элементов. Формы состоят из одного или не- 
скольких полей ввода с надписями, флажков, переключателей или выпадающих 
меню, которые используются для ввода информации посетителями сайта. Кроме 
того, все формы содержат кнопку отправки Submit, на которую пользователь на- 
жимает для отправки результатов формы Web-серверу. Большинство форм (осо- 
бенно содержащих большое число полей ввода) также имеют кнопку сброса 
Reset, которая позволяет очистить все ранее введенные данные и начать ввод 
данных с самого начала. Помимо этих основных элементов (полей ввода с над- 
писями и двух специальных кнопок) на форму можно поместить все те же эле- 
менты, которые могут быть помещены непосредственно на Web-страницу (един- 
ственное исключение — форма не может содержать другую форму). Как будет 
рассказано в этой главе, HTML-форма, как и HTML-таблица, представляет собой 
контейнер для помещения объектов Web-страницы. Тем не менее, в отличие от 
HTML-таблицы (которая предназначена для передачи информации посетителю 
сайта), назначение формы состоит в получении отклика от посетителя. 
Обработка HTML-форм 
Самое сложное в понимании процесса обработки HTML-форм состоит в том, 
чтобы понять "что где происходит". При просмотре посетителем Web-страницы, 
не содержащей формы, сервер просто отвечает на запросы браузера о передаче 
Web-страницы и таких отдельных ее элементов, как графика и анимация. Напри- 
мер, при "посещении" Web-сайта браузер посетителя запрашивает Web-страницу 
у сервера. После передачи HTML-страницы сервером браузер обрабатывает 
HTML-операторы и начинает выводить содержимое страницы на экран. Если 
при обработке странице браузер встретит дескриптор, требующий получения от 
сервера дополнительных данных, например, дескриптор <img>, который исполь- 
зуется для описания графики, браузер посылает серверу запрос на передачу тре- 
буемого файла. Как показано на рис. 3.2, сервер и браузер продолжают это взаи- 
модействие типа "запрос/ответ" до тех пор, пока браузер не получит все файлы, 
необходимые для корректного отображения всего содержимого Web-страницы. 
После отправки HTML-документа (включая все запрошенные браузером гра- 
фические изображения, анимацию, звуковые файлы и видеоклипы) работа Web- 
сервера считается выполненной. Вывод на экран содержащегося на Web-странице 
текста и графики, воспроизведение звуковых файлов и видеоклипов возлагается 
на браузер. При щелчке пользователем на гиперссылке, находящейся на Web- 
странице, браузер отправляет серверу следующий запрос на передачу другой 
Web-страницы. В свою очередь, сервер отправляет браузеру запрошенный доку- 
мент (и все дополнительные файлы, необходимые для правильного отображения 
документа).

Глава 3. HTML-формы 131 
Web-сервер ^ 
1) Запрос браузера пользователя к Web-серверу на предмет передачи HTML-страниц 
2) Web-сервер передает запрошенную HTML-страницу браузеру пользователя 
3) Браузер пользователя дополнительно запрашивает Web-сервер для передачи 
графики или данных 
4) Web-сервер передает браузеру пользователя запрошенные данные 
5) Браузер пользователя выводит HTML-страницу на экран 
Рис. 3.2. Взаимодействие типа "запрос/ответ"между Web-браузером и Web-сервером 
При работе с Web-страницей, содержащей форму, браузер и сервер для загруз- • 
ки страницы (с формой) выполняют все те же операции, которые были описаны 
выше. После заполнения посетителем полей формы и нажатия кнопки отправки 
браузер отправляет результаты формы серверу, который должен определенным 
образом обработать полученные результаты. Как правило, результаты формы об- 
рабатываются сервером за счет запуска того или иного сценария. В зависимости 
от назначения, сценарий может, например, записать данные пользователя в базу 
данных, использовать их для начала транзакции или, в случае, если сайт пред- 
ставляет собой такую поисковую машину, как Yahoo, использовать данные 
пользователя для поиска ссылок в базе данных сервера. Как будет описано ниже, 
с помощью HTML-элементов формы ее разработчик может указать программу, 
которая будет запускаться сервером после передачи результатов формы. 
Как правило, при нажатии посетителем кнопки передачи (Submit) браузер за- 
пустит сценарий, который находится в том же HTML-файле, что и форма. Этот 
сценарий проверяет полноту введенных посетителем данных и в некоторых слу- 
чаях может проверять их "правильность". Затем браузер упакует информацию и 
передаст ее Web-серверу, указывает при этом имя приложения, которое сервер 
должен запустить для обработки результатов формы. На рис. 3.3 показана схема 
распределения обязанностей между Web-браузером и Web-сервером при обработ- 
ке результатов форм. 
Опять-таки, аки ранее, после передачи страницы формы браузеру Web-сервер 
занимается своими делами, как это было и с Web-страницей, не содержащей 
формы. Web-браузер отвечает за прием данных от посетителя в поля формы, вы- 
бор с помощью мыши переключателей, флажков и элементов в списках выбора. 
После завершения заполнения формы Web-браузер должен снова связаться с сер- 
вером с целью передачи ему введенной информации для последующей обработ- 
ки. В свою очередь, Web-сервер для обработки полученных результатов формы 
запускает определенный сценарий и передает браузеру сообщение, подтверждаю- 
щее получение результатов и во многих случаях указывающее об успешной или 
неудачной обработке данных.

132 Глава3. HTML-формы 
Данные получены 
Щелкните здесь 
для перехода на следующую форму 
1) Web-сервер передает форму Web-браузеру посетителя 
2) Web-браузер выводит форму на экран, а посетитель заполняет поля формы 
3) Посетитель нажимает кнопку отправки Submit для передачи введенных данных 
Web-серверу 
4) Web-сервер передает данные формы (называемые результатами формы) для 
обработки CGI-сценарию 
5) CGI-сценарий, обрабатывающий результаты формы, может переформатировать 
данные и передать для 
дальнейшей обработки специальной программе 
6) CGI-сценарий создает подтверждающее сообщение и передает его Web-серверу 
7) Web-сервер передает подтверждающее сообщение Web-браузеру посетителя, 
который выводит его на экран 
Рис. 3.3. События обработки HTML-формы и места, где они происходят 
Дескрипторы и атрибуты, используемые 
для создания форм 
Как уже упоминалось выше в этой главе, помимо текстовых полей, переклю- 
чателей и флажков, используемых для запроса данных у посетителя, в форму 
можно помещать кнопки, текст, графические изображения и другие объекты 
Web-страниц. Начальный и конечный HTML-дескрипторы формы (<form> 
</form>) указывают Web-браузеру, какую часть HTML-файла включать в форму. 
Как известно, Web-форма, как и HTML-таблица, представляет собой своего рода 
"контейнер". Начальный и конечный дескрипторы таблицы (<tabiex/tabie>) 
используются для описания содержимого, которое должно быть помещено Web- 
браузером в таблицу. Аналогично, начальный и конечный дескрипторы формы 
(<formx/form>) ограничивают содержимое, которое должно быть помещено 
Web-браузером в форму. Основное различие между формами и таблицами состо- 
ит в том, что браузер в HTML-таблице просто выводит данные на экран, в то 
время как форма не только выводится на экран, но и используется для ввода 
данных в элементы формы и передачи результатов Web-серверу для последующей 
обработки. (Более того, на одной Web-странице можно разместить несколько

Глава 3. HTML-формы 
таблиц и несколько форм; тем не менее, несмотря на то, что можно организовать 
вложенные таблицы, нет никакой возможности внедрить одну форму в другую;) 
Например, в этой главе вы узнаете, как заменить следующие заполнители по- 
лями ввода и кнопками, находящимися между начальным и конечным дескрип- 
торами формы (<formx/form>), для создания формы, которая позволит полу- 
чать от посетителей необходимую вам информацию: 
<form name="ExampleForm" 
action=http ://www. NVBizNet2 . com/__scripts/__pl/FrmScrpt. CGI 
method="POST" Ъз.Ъ1е="Подсказка по заполнению формы" 
enctype="application/x-www-form-urlencoded"> 
<р>Поля ввода формы плюс различные кнопки</р> 
<р>Кнопки RESET и SUMBIT формы</р> 
</form> 
Как показано в примере, дескрипторы <form>, как правило, содержат следую- 
щие атрибуты: 
• action. Унифицированный указатель информационного ресурса (Uniform 
Resource Locator, URL), или Web-адрес, по которому Web-браузер передает 
результаты заполнения формы после нажатия посетителем кнопки Submit. 
Например, для передачи результатов формы (т.е. введенной информации и 
выбранных на форме элементов) в виде сообщения электронной почты 
можно установить значения атрибута action равным текстовой строке, со- 
держащей ключевое слово maiito: и собственно адрес электронной почты. 
Аналогично, для передачи результатов формы программе для дальнейшей 
обработки необходимо установить значение атрибута action равным URL 
сценария, отвечающего за передачу результатов формы требуемой программе. 
• enctype. Задает Web-браузеру метод кодирования, который должен исполь- 
зоваться при передаче данных формы CGI-сценарию на Web-сервере. Как 
правило, значение атрибута encode устанавливается равным "application/ 
x-www-form-urlencoded". 
• id. Используется для задания форме уникального имени, по которому на 
форму можно ссылаться в сценарии. Если имя формы не задано (с помо- 
щью атрибутов id или паше), в сценарии на форму потребуется ссылаться 
по ее номеру. Например, в JavaScript-коде ссылка на первую форму на Web- 
странице будет выглядеть как document, forms [0], на вторую — 
document,forms [ 1], На третью — document.forms [2] И Т.Д. ЕСЛИ же всем 
формам на странице присвоены уникальные идентификаторы, в сценарии 
можно будет ссылаться на формы, используя следующий синтаксис: 
document.formID (ИЛИ ПрОСТО formID). 
• method. Указывает метод, который браузер будет применять для передачи 
данных формы по URL-адресу, указанному в атрибуте action. Атрибут 
method может принимать одно и з двух значений: POST ИЛИ GET. ЕСЛИ ис- 
пользуется GET-метод, Web-браузер передает данные формы Web-серверу в 
конце URL-адреса, указанного в атрибуте action дескриптора <form>. 
Если же установлен POST-метод, данные передаются Web-серверу в виде 
отдельного HTML-сообщения. В соответствии со стандартами HTML метод 
GET должен использоваться, если форма идемпотентна, т.е. когда сцена-

134 Глава 3. HTML-формы 
рий обработки результатов формы не вносит изменений в хранящиеся на 
сервере данные. Например, формы, применяемые для поиска в базах дан- 
ных, будут использовать GET-метод. Если же при обработке результатов 
формы возникают побочные эффекты, в частности, изменение данных, 
хранимых в СУБД, должен использоваться POST-метод. 
Не и с п о л ь з у й т е GET-метод для передачи результатов формы, запрашиваю- 
щей пароль. При использовании GET-метода введенный посетителем пароль будет 
включен 
в URL-адрес и зафиксирован в нескольких местах, включая журнальные файлы 
Web-браузе- 
ра и Web-сервера. 
• name. Текстовая строка, которая может использоваться для ссылки на фор- 
му по имени в сценарии, находящемся на Web-странице. Если имя формы 
не задано (с помощью атрибутов id или name), в сценарии на форму нуж- 
но ссылаться по ее номеру. Например, если каждой форме на Web-страни- 
це присвоено уникальное имя или идентификатор, сценарий может, ссы- 
латься на форму как document, formname (ИЛИ document. formID). 
• onReset. Имя функции (т.е. сценария, содержащегося на Web-странице), 
которую Web-браузер должен запустить при нажатии посетителем кнопки 
Reset. Функция должна возвращать значение True или False. Если возвра- 
щается значение True, Web-браузер удалит введенные в форму данные посети- 
теля и вернет форму в исходное состояние. Если же функция возвращает 
False, Web-браузер не будет возвращать поля формы в исходное состояние. 
• onSubmit. Имя функции (т.е. сценария, содержащегося на Web-странице), 
которую Web-браузер должен запустить при нажатии посетителем кнопки 
Submit. Как правило, функция, указанная в атрибуте onSubmit, использует- 
ся для проверки результатов формы перед их передачей Web-серверу для 
обработки. Если функция возвращает значение False, Web-браузер не бу- 
дет передавать результаты формы серверу. Если же возвращается значение 
True, Web-браузер передает результаты формы Web-серверу для обработки с 
помощью CGI-сценария или другой программы, указанной в атрибуте 
action деСКрИПТОра <form>. 
• target. Имя окна, в котором Web-браузер будет выводить страницу под- 
тверждения передачи результатов формы. 
• title. Текст (например, имя или описание формы), которые Web-браузер 
будет выводить на экран на несколько секунд, когда посетитель переместит 
указатель мыши на форму. 
Первые семь советов, которые будут приведены после этого вводного раздела 
о HTML-формах, расскажут о создании на форме полей ввода текста, флажков, 
переключателей, меню выбора, кнопок сброса Reset и передачи Submit. Несколь- 
ко остальных советов подробно остановятся на назначении атрибутов дескрипто- 
ра <form>. А сейчас самое главное понять, что объекты в форму помещаются пу- 
тем вставки соответствующих им HTML-дескрипторов между начальным и 
конечным дескрипторами формы (<formx/form>). Более того, каждая форма 
должна содержать кнопку передачи данных, при нажатии на которую Web-брау-

Глава 3. HTML-формы 
зер получает команду на передачу результатов формы (т.е. ее данных) по URL- 
адресу, указанному в атрибуте action дескриптора <form> формы. 
Создание на форме однострочного поля ввода 
Если вы хотите, чтобы посетитель сайта ввел короткую строку текста, помес- 
тите на форму дескриптор <input> с атрибутом type, которому присвоено значе- 
ние "text". 
ПРАКТИКУМ 
Например, два дескриптора <input> в следующем коде создают поля для ввода 
имени (First Name) и фамилии (Last Name), как показано на рис. 3.4. 
<form name="ExampleForm"> 
<р>Имя: <input type = "text" name="FirstName" size = "15"> 
Фамилия: <input type = "text" name="LastName" size = "20"X/p> 
<p>[Кнопки RESET и SUMBIT формы]</p> 
</form> 
• Файл Правке йид Избранное Сервис Спри 
АдресJ.] http://htmWi<ebdesign/Chapter03/FigijreO3-O4 htm 
Имя: | Фамилия: | 
[Кнопки RESET и SDMBU формы] 
Рис. З.4. Форма с двумя однострочными полями ввода текста 
Обратите внимание, что текстовые надписи возле каждого однострочного 
поля ввода на форме не входят в состав дескриптора <input>. Каждый дескрип- 
тор <input> однострочного поля ввода текста содержит следующие атрибуты: 
• type. Устанавливаеттип "text", который указывает Web-браузеру, что данный 
элемент формы представляет собой однострочное поле ввода текста. 
• id. Используется для присвоения полю ввода имени. Значение атрибута id 
можно использовать для работы с содержимым поля ввода в сценарии, 
внедренном на Web-страницу. Обратите внимание, что каждый атрибут id, 
используемый на одной и той же странице, должен быть уникальным, т.е. на 
странице не могут находиться два атрибута id с одинаковыми значениями. 
• name. Используется для идентификации поля ввода текста; Значение атри- 
бута name может применяться для ссылки на значение поля ввода в сцена- 
рии, запущенном в среде Web-браузера. Значение атрибута name совместно 
со значением поля ввода текста передается Web-серверу при нажатии посе- 
тителем кнопки Submit. 
• size. Длина поля ввода текста в символах. 
• value. Указывает, что браузер должен поместить в поле ввода текста при 
его начальной визуализации на Web-странице значение, присвоенное атри- 
буту value.

136 Глава 3. HTML-формы 
• maxlength. Максимальное количество символов, которое посетитель может 
ввести в поле ввода. 
• readonly. Если этот атрибут присутствует, поле ввода может получать фо- 
кус, тем не менее, посетитель не сможет менять содержимое поля. 
• disabled. Если этот атрибут присутствует, поле ввода не может получать 
фокус и посетитель не может менять содержимое поля. Более того, при 
передаче результатов формы браузер не передает Web-серверу ни имени 
поля, ни его значения. 
• tabindex. Используется для задания порядка обхода по клавише табуля- 
ции, в соответствии с которым элементы формы получают фокус. Присва- 
ивая атрибуту tabindex элементов формы значения в возрастающем поряд- 
ке, вы имеете возможность указать браузеру, на какой элемент перемещать 
курсор (т.е. фокус) при нажатии клавиши табуляции (TAB). При каждом 
нажатии TAB браузер будет перемещать фокус на элемент, значение атри- 
бута tabindex которого больше текущего на единицу. 
• accesskey. Клавиша, которую посетитель может нажать вместе с клавишей 
ALT (или клавишами COMMAND или CONTROL в Macintosh-системе) 
для перехода (т.е. перемещения фокуса) на поле ввода. 
Дескрипторы <input> в приведенном примере указывают Web-браузеру помес- 
тить на форму с именем "ExampieForm" два однострочных поля ввода текста (с 
именами "FirstName" И "LastName"). Длина ПОЛЯ FirstName составляет 15 СИМ- 
ВОЛОВ, а ПОЛЯ LastName — 20 СИМВОЛОВ. 
При вводе текста в однострочное поле ввода текста посетитель сайта может 
ввести любое количество символов. Тем не менее, Web-браузер будет выводить на 
экран только то количество символов, которое указано в атрибуте size дескрип- 
тора <input>. В приведенном примере, если посетитель введет в первое поле 
имя длиной 20 символов, на экране будут видны только 15 символов, поскольку 
длина поля составляет всего 15 символов. (Если необходимо ограничить количе- 
ство символов, которые посетитель может ввести в поле, задайте максимально 
ВОЗМОЖНОе КОЛИЧеСТВО СИМВОЛОВ В атрибуте maxlength ДеСКрИПТОра <input>.) 
Создание на форме многострочного поля ввода 
Если требуется, чтобы посетитель сайта мог вводить сразу несколько строк 
текста, вставьте между начальным и конечным дескрипторами формы (<form> 
</form>) начальный И конечный дескрипторы текстовой Области (<textarea> 
</textarea>). 
Например, для помещения на форму под полями ввоца имени и фамилии мно- 
гострочного поля ввода, показанного на рис. 3.5, необходимо после дескрипто- 
ров <input> вставить начальный и конечный дескрипторы текстовой области 
(<textareaX/textarea>):

Глава3. HTML-формы 137 
Рис. 3.5. Форма с 
многострочным 
полем ввода 
<.вй(| Правке Ёид Избранное Сервис Справно 
> - •' • . $ $; а м J ~ > - > Ш - ;,,•: .;...v. .. 
Адрес ]**] http //htm l-webdesign/Chep!erO3/Figure 03-0 5.htm 
Имя: | v Фамилия: | 
Сообщение: 
[Кнопки RESET и SUMBIT формы] 
_
1 
О
zi' 
_J 
i 
<form name="ExampleForm"> 
<р>Имя: <input type="text" name="FirstName" size="15" /> 
Фамилия: <input type="text" name="LastName" size="20" /X/p> 
<р>Сообщение: <textarea name="TextMessage" rows="5" cols="60"> 
</textareaX/p> 
<p>[Кнопки RESET и SUMBIT формы]</р> 
</form> 
Как И В Предыдущем Примере, надПИСЬ ВОЗЛе ГОШ ВВОф (текст "Сообще- 
ние:") не является частью дескриптора текстовой области <textarea>. Много- 
строчное поле ввода текста имеет следующие атрибуты: 
• rows. Количество строк, которое браузер должен выводить на экране при 
визуализации многострочного поля ввода текста. 
• cols. Количество символов, которое браузер должен выводить на экране в 
каждой строке при визуализации многострочного поля ввода текста. 
• id. Служит для присвоения полю ввода имени. Значение атрибута id мож- 
но использовать для работы с содержимым поля ввода в сценарии, вне- 
дренном на Web-страницу. 
• name. Используется для идентификации поля ввода. Значение атрибута 
name может применяться для ссылки на значение поля ввода в сценарии, 
запущенном в среде Web-браузера. Значение атрибута name совместно со 
значением поля ввода передается Web-серверу при нажатии посетителем 
кнопки Submit. 
Дескриптор <textarea> в приведенном примере указывает Web-браузеру по- 
местить на форму "ExampieForm" многострочное поле ввода текста с именем 
11техtMessage". Более того, браузер должен выводить на экран поле размером 5 
строк в высоту и 60 символов в ширину. 
При вводе текста в многострочное поле ввода посетитель может ввести любое 
количество символов. Тем не менее, в любой момент времени Web-браузер будет вы- 

водить на экран только то количество символов, которое получается путем умноже- 

ния значения атрибута rows дескриптора <textarea> на значение атрибута cols. 
Таким образом, в приведенном примере Web-браузер будет выводить на экран в 
многострочном поле ввода не более 300 символов (5 строк х 60 символов в строке).


138 Глава 3. HTML-формы 
Значение атрибута rows дескриптора <textarea> определяет высоту поля, а 
значение атрибута cols — его ширину. Тем не менее, сочетание значений атри- 
бутов rows и cols влияет только на отображаемые на экране размеры поля (а, 
следовательно, и на количество одновременно отображаемых на экране символов 
текста). Произведение rows x cols не ограничивает общее число символов, ко- 
торые посетитель может ввести в поле ввода. 
В отличие от элементов, которые используют дескриптор <input> со значением 
атрибута type, установленным для визуализации требуемого элемента, начальный и 
конечный дескрипторы текстовой области (<textareax/textarea>) применяются 
только для визуализации многострочного поля ввода текста. Несмотря на то что вы 

имеете возможность контролировать размеры текстовой области с помощью атрибу- 
тов дескриптора <textarea>, последний не имеет атрибута value, значение которо- 

го может использоваться в качестве начального значения текстовой области, т.е. 
значения по умолчанию. Если необходимо, чтобы Web-браузер визуализировал мно- 
гострочное поле ввода текста с текстом по умолчанию, введите требуемый текст 
между начальным и конечным дескрипторами текстовой области (<textarea> 
</textarea>). Например, если нужно, чтобы введенный посетителем текст начи- 
нался СО СЛОВ "Вниманию отдела по работе с клиентами:", Описание тек- 
стовой области на HTML-странице должно выглядеть следующим образом: 
<р>Сообщение: <textarea name="TextMessage" rows="5" cols="60"> 
Вниманию отдела по работе с клиентами :</textareaX/p> 
Проверка данных текстового элемента перед 
передачей результатов заполнения формы 
Проверка данных однострочного или многострочного поля ввода текста перед 
передачей результатов формы на сервер, как правило, включает проверку данных 
введенных посетителем в поле. Предположим, например, что HTML-код Web- 
страницы содержит следующее описание формы, которая запрашивает у посети- 
теля его имя и адрес электронной почты: 
<form name="ExampleForm" 
action="http://NVBizNet2.com/_scripts/_pl/FrmScrpt.CGI" 
method="POST" enctype="application/x-www-form-urlencoded"> 
Имя: <input type="text" name="FirstName" id="FN" size="15" /Xbr /> 
Фамилия: <input type="text" name="LastName" id="LN" size="20" /Xbr /> 
Адрес E-mail: <input type="text" name="Email" id="EM" size="30" /Xbr /> 
<pXinput type="submit" value="Отправить" /> 
<input type="reset" уа1ие="Очистить" /х/р> 
</form> 
ШНН^ННИК ПРАКТИКУМ ШШ&ШШШЛ 
Дабы убедиться в том, что посетитель ввел данные в поле адреса электронной 
почты, можно вставить JavaScript-сценарий, который будет выполнять "проверку" 
содержимого поля формы. JavaScript-сценарий должен быть помещен между на- 
чальным и конечным дескрипторами сценария (<scriptx/script>). Несмотря 
на то что сценарий можно разместить в любом месте HTML-кода Web-страницы, 
функции проверки данных рекомендуется помещать непосредственно после на-

чального дескриптора <body> кода страницы. (Размещение всех сценариев в од- 
ном месте кода страницы позволяет легко их находить в случае, когда необходи- 
мо посмотреть, что, собственно, делает код страницы.) Таким образом, чтобы 
убедиться, что посетитель ввел данные в поле адреса электронной почты в насто- 
ящем примере, HTML-код Web-страницы должен выглядеть примерно так: 
<htmlxbody> 
<head> 
<script type="text/javascript" language="JavaScript"> 
<!-- 
function ValidateForm(Form) 
{ 
if (Form.Email.value == "") 
{ 
alert("Пожалуйста, введите хоть что-нибудь в поле \"Адрес E-mail\"."); 
Form.Email.focus (); 
return(false); 
} 
else return(true); 
Microsoft Internet Explore 
Пожалуйста, введите хоть что-нибудь в поле "AflpecE-mai!1 
OK 
</script> 
Начальный и конечный дескрипторы комментария (• | и —>), которые заклю- 
чают в себе JavaScript-сценарий, не оказывают влияния на Web-браузеры, которые 
имеют возможность читать и выполнять JavaScript-сценарии. Тем не менее, началь- 

ный и конечный дескрипторы комментария предотвращают вывод на экран кода 
JavaScript-сценария в Web-браузерах, не поддерживающих сценарные языки. 
В первой строке сценария объя- 
вляется функция ValidateForm, И 
таким образом, в дальнейшем на 
нее можно ссылаться по этому 
имени. Вторая и третья строки 
кода проверяют значение поля 
формы с именем Email и в случае, 
если текстовое поле Email при 
выполнении сценария Web-стра- 
ницы окажется пустым, выводят на экран показанное на рис. 3.6 диалоговое 
окно предупреждения. 
Если поле Email не содержит данных, четвертая и пятая строки JavaScript- 
сценария (расположенные после вызова метода a l e r t ( ) ) перемещают фокус на 

поле ввода Email и возвращают значение False HTML-дескриптору, который 
"вызвал" функцию. 
Для того чтобы Web-браузер выполнял функцию vaiidateForm () при нажатии 
посетителем кнопки Submit, в дескриптор <form> формы необходимо добавить 
атрибут onsubmit, который выглядит следующим образом: 
<form name="ExampleForm" 
onSubmit="return ValidateForm(ExampleForm)" 
action="http://NVBizNet2.com/_scripts/_pl/FrmScrpt 
method="POST" enctype="application/x-www-form-urlencoded"> 
Рис. 3.6. Диалоговое окно предупреждения, выводимое 
в случае, если не заполнено поле ввода адреса 
электронной почты

140 Глава 3. HTML-формы 
Не пропустите ключевое слово return, которое находится перед вызовом 
функции vaiidateForm(). В противном случае Web-браузер передаст результаты 
формы Web-серверу, даже если функция vaiidateForm() вернет значение False, 
указывающее на наличие ошибок во введенной на форму информации. 
Если все атрибуты дескриптора введены без ошибок (как в приведенном при- 
мере), атрибут onSubmit заставит Web-браузер после нажатия посетителем кноп- 
ки Submit выполнить JavaScript-сценарий для проверки результатов формы. Если 
функция vaiidateForm() возвращает значение True, Web-браузер передаст ре- 
зультаты формы по URL-адресу, указанному в атрибуте method дескриптора 
<form>. В противном случае, т.е. если JavaScript-сценарий возвращает False, 
Web-браузер вернется к вводу данных формы и поместит курсор на элемент, для 
которого в сценарии вызывался метод focus (). 
Создание на форме флажков 
Если необходимо, чтобы посетитель Web-сайта обладал возможностью выби- 
рать один или несколько элементов из списка путем установки "галочки", распо- 
ложенной возле каждого элемента, поместите на форму дескриптор <input> и 
установите значение его атрибута type равным "checkbox". 
ПРАКТИКУМ 
Например, для вставки на Web-страницу под многострочным полем ввода тек- 
ста семи флажков, как показано на рис. 3.7, поместите после дескриптора 
</textarea> такие дескрипторы <input>: 
<form name="ExampleForm"> 
<р>Имя: <input type="text" name="FirstName" size="15" /> 
Фамилия: <input type="text" name="LastName" size="20" /x/p> 
<р>Сообщение: <textarea name="TextMessage" rows="5" cols="60"> 
</textareax/p> 
<р>Области интересов:<br /> 
Операционные системы: <input type="checkbox" 
name="Win98" 
value="ON" />Windows 98 
<input type="checkbox" name="WinXp" value="ON" />Windows XP 
<input type="checkbox" name="WinNT" value="ON" />Windows NT<br /> 
Оборудование: <input type="checkbox" name="DT" value="ON" /> 
Настольные компьютеры 
<input type="checkbox" name="LT" value="0N" /> 
Портативные компьютеры 
<input type="checkbox" name="PDA" value="ON" />PDA 
<input type="checkbox" name="Prtr" value="ON" />Принтеры 
<input type="checkbox" name="Mon" value="ON" />Мониторы</р> 
<p>[Кнопки RESET и SUMBIT формы]</p> 
</form> 
Как и в случае с другими элементами формы, текстовые надписи перед и/или 
после флажков на форме не являются частью HTML-кода элемента. Дескриптор 
<input> для флажка может содержать следующие атрибуты: 
type. Устанавливает тип "checkbox", который указывает Web-браузеру, что 
данный элемент формы представляет собой флажок.

Глава3. HTML-формы 141 
id. Используется для присвоения флажку уникального имени. Значение 
атрибута id можно использовать для работы с состоянием флажка в сцена- 
рии, внедренном на Web-страницу. 
name. Используется для идентификации флажка. Значение атрибута name 
может применяться для ссылки на состояние флажка в сценарии, выпол- 
няющемся в среде Web-браузера. Более того, Web-браузер будет передавать 
значение атрибута name в качестве части "имя" пары имя/значение при пе- 
редаче результатов формы Web-серверу, если посетитель установит флажок. 
Если посетитель сайта не устанавливает флажок, его имя и значение (т.е. 
значение, присвоенное атрибуту value) серверу передаваться не будут. 
value. Строка, которая будет передаваться Web-серверу в качестве части 
"значение" пары имя/значение. При передаче результатов формы после на- 
жатия кнопки Submit Web-браузер передает серверу пары имя/значение 
только для установленных (т.е. выбранных) флажков. 
checked. ЕСЛИ Значение ЭКЮ атрибута равно True (т.е. checked="true"), 
Web-браузер при визуализации флажка будет отображать "галочку" (т.е. 
флажок считается выбранным или установленным). По умолчанию значе- 
ние атрибута checked устанавливается равным False (т.е. флажок не уста- 
новлен или снят), поэтому при написании HTML-кода для неустановлен- 
ного флажка вам не нужно включать в дескриптор < input > атрибут 
checked="false". 
I 
- э л a -a -li j -> -»ш - 
с|вМр//Ыг" nji03/FigureO3-OG htm 
Имя: Г Фамилия: 
Сообщение: 
Области интересов: 
Операционные системы: Г Windows 98 Г Windows ХР Г Windows NT 
Оборудование: Г Настольные компьютеры Г Портативные компьютеры Г PDA 
Г Принтеры п Мониторы 
[Кнопки RESET и STJMBIT формы] 
Рис. 3.7. Форма с семью флажками под многострочным полем ввода текста 
Е приведенном примере дескрипторы < input > с атрибутом type, установлен- 
ным равным "checkbox", заставляют браузер ПОМеСТИТЬ на форму ExampleForm 
семь флажков. Web-браузер сам отвечает за переключение состояния флажков 
(т.е. при выборе посетителем снятого флажка Web-браузер устанавливает его, по- 
мечая в квадратик флажка "галочку", и наоборот, если посетитель выбирает уста- 
новленный флажок, который уже содержит "галочку", браузер снимает отметку с 
флажка, убирая "галочку").

142 Глава3. HTML-формы 
Создание на форме переключателей 
Если необходимо, чтобы посетитель сайта мог выбирать один элемент из 
списка элементов, создайте список элементов с помощью дескрипторов <input>, 
значения атрибутов type которых равны "radio". 
РАКТИКУ& 
Например, для помещения на нижнюю часть формы, показанной на рис. 3.8, 
переключателей да и нет, необходимо в третью и четвертую строки снизу в при- 
веденном ниже HTML-коде вставить дескрипторы <input>: 
<form name="ExampleForm"> 
<р>Имя: <input type="text" name="FirstName" size = "15" /> 
Фамилия: <input type = "text" name=J'LastName" size = "20" /X/p> 
<р>Сообщение: <textarea name="TextMessage" rows="5" cols="60"> 
</textareaX/p> 
<р>Области интересов : <br /> 
Операционные системы: 
<input type="checkbox" name="Win98" value="ON" />Windows 98 
<input type="checkbox" name="WinXp" value="ON" />Windows XP 
<input type="checkbox" name="WinNT" value~"ON" />Windows NT<br /> 
Оборудование: 
<input type="checkbox" name="DT" value="ON" /Жастольные компьютеры 
<input type=" checkbox" name="LT" value="ON" />Портативные компьютеры 
<input type="checkbox" name="PDA" value="ON" />PDA 
<input type="checkbox" name="Prtr" value="ON" />Принтеры 
<input type="checkbox" name="Mon" value="ON" />Мониторы</р> 
<р>Можем ли мы передавать ваш адрес электронной почты другим 
посетителям? 
<input type= "radio" value="Yes" name=" Share Email" />Да 
<input type="radio" value="No" checked="checked" name="ShareEmail" /> 
Нет</р> 
<p>[Кнопки RESET и SUMBIT формы]</p> 
</form>
• '• Файл .|pasKO &ид Избранное С^реис .прайкв 
j] http.//html-webdes(gn/ChapterO3/Fjgure03-07.ht 
Имя: ! Фамилия: | 
Сообщение: 
Области интересов: 
Операционные системы: Г Windows 98 Г Windows XP Г Windows NT 
Оборудование: Г Настольные компьютеры Г Портативные компьютеры Г PDA 
Г Принтеры Г Мониторы 
Можем ли мы передавать ваш адрес электронной почты другим посетителям? <~ Да « 
Нет 
[Кнопки RESET и SUMBIT формы] 
Рис. 3.8. Форма с переключателями Да и Нет

Глава3.HTML-формы 143 
Как и в случае с другими элементами формы, текстовые надписи перед и/или 
после переключателей на форме не являются частью HTML-кода элемента. Деск- 
риптор <input> для переключателя может содержать следующие атрибуты: 
type. Устанавливает тип "radio", который указывает Web-браузеру, что 
данный элемент формы является переключателем. 
• id. Служит для присвоения переключателю уникального имени. Значение 
атрибута id можно использовать для работы с состоянием переключателя в 
сценарии, внедренном на Web-страницу. 
• name. Используется для идентификации группы переключателей. При пе- 
редаче результатов формы Web-серверу после нажатия посетителем кнопки 
Submit Web-браузер будет передавать имя группы переключателей и значе- 
ние установленного переключателя в виде пары имя/значение. Если посе- 
титель сайта не установил ни один переключатель в группе переключате- 
лей (определяемой именем группы), при передаче результатов формы 
Web-серверу браузер не будет передавать для данной группы пару имя/зна- 
чение. 
• value. Строка, которая будет передаваться Web-серверу в качестве части 
"значение" пары имя/значение, если посетитель установил переключатель. 
Web-браузер при нажатии кнопки Submit передает серверу только значения 
атрибутов name и value (т.е. пару имя/значение) для каждой группы пере- 
ключателей. 
checked. Включая атрибут checked в дескриптор <input> для переключа- 
теля, вы указываете Web-браузеру при визуализации формы (и при нажа- 
тии кнопки Reset) изображать переключатель выбранным. В приведенном 
примере третья с конца строка кода указывает, что в группе переключате- 
лей shareEmaii по умолчанию должен быть установлен переключатель No. 
В приведенном примере дескрипторы <input> со значениями атрибутов type, 
равными "radio", заставляют Web-браузер поместить в нижнюю часть формы 
ExampieForm два переключателя, объединенные в группу ShareEmaii. Браузер га- 
рантирует, что посетитель может выбрать только один из двух переключателей, 
входящих в группу. (Web-браузер считает, что все переключатели с одним и тем 
же значением атрибута name входят в одну группу.) При выборе посетителем пе- 
реключателя в группе Web-браузер выключает переключатель, который был выб- 
ран в группе ранее (если таковой вообще был в группе), и в выбранный посети- 
телем переключатель помещает черную точку, которой обозначается установленный 
в данный момент переключатель. (В отличие от установленного флажка, повторный 
выбор установленного переключателя не снимает с него отметку.) 
Проверка выбора группы переключателей перед 
передачей результатов формы 
Web-браузер позволяет посетителю сайта выбирать только один переключатель 
из группы переключателей с одним и тем же значением атрибута name. Поэтому,

144 Глава 3. HTML-формы 
для проверки выбора переключателя в группе переключателей нет необходимос- 
ти пользоваться JavaScript-сценарием. Тем не менее, Web-браузер не заставляет 
посетителя выбирать хотя бы один переключатель в каждой группе переключате- 
лей. Следовательно, необходимо написать функцию проверки, которая бы прове- 
ряла количество выбранных переключателей в каждой группе, которые посети- 
тель не должен оставлять пустыми. 
Предположим, например, что на форме находятся две группы переключате- 
лей, как показано на рис. 3.9. 
I. • т - г к . У. . • . . . Л •. I. . 1.1 .. И ••••-TTi . . - Г - - . \ГТГ. Д . 
. - Т . 1 . - Г . . 1 Д ~ ^ ^ ]• 
Оравва Вид избранн 
J J g Л Jj J • 
Сервис 
-> В - 
Имя:1 
Фамилия: I 
Адрес E-mail: | 
Сообщение: 
Области интересов: 
Операционные системы: Г Windows 98 Г Windows ХР Г Windows NT 
Оборудование: Г Настольные компьютеры Г Портативные компьютеры Г PDA 
ГПрннтеры ГМоняторы . 
Можем ли мы передавать ваш адрес электронной почты другим посетителям? г Да ff 
Нет 
Можем ли мы связываться с вами для передачи анонсов по новым продуктам, к 
которым 
вы проявили интерес? <~Да г Нет 
Сколько пользователей работает в вашей сети? 
3 р ч 
г 1-5 
г б-10 
г 7-15 
г 16+ 
_J 
Рис. 3.9. Две группы переключателей на форме 
••у ПРАКТИКУМ 
Если всех переключателей в первой группе содержат значение 
MContact_OK", а атрибуты всех переключателей во второй группе — значение 
fluser_count", то для проверки того, что посетитель выбрал по одному переклю- 
чателю из каждой группы можно воспользоваться следующим JavaScript-сценарием: 
<htmlXbodyXhead> 
<script type="text/javascript" language="JavaScript"> 
<!-- 
function ValidateForm(Form) 
{ 
function countSelections(buttonGroup) 
{
for (i = 0; i < buttonGroup. length; i++) 
{ 
if (buttonGroup[i].checked) return (true); 
} 
return (false);

Глава 3. HTML-формы 
if (!countSelections(Form.Contact Ok)) 
{ 
alert("Please select either \"Yes\" or \"No\" from the \"Contact\" 
options. ") ; 
return (false); 
} 
if (!countSelections(Form.User_Count)) 
{ 
alert("Please select one of the \"Oser Count\" options.") ; 
return (false) ; 
} 
//** Другие операторы проверки данных формы ** 
return(true); 
} 
// --> 
</script> 
Обратите внимание, что для каждой группы переключателей установлено 
свойство length, которое используется для выполнения итераций по массиву пе- 
реключателей в группе и проверки значения свойства checked для каждого пере- 
ключателя в группе. Передавая функции countseiections () сначала группу 
Contact_OK, а затем группу user__count, можно использовать один и тот же код 
для проверки наличия выбранного переключателя в каждой из групп, даже не- 
смотря на разное количество переключателей в группах. В каждой группе значе- 
ние свойства checked для выбранного переключателя равно True. Поэтому функ- 
ция countseiections () возвращает True, если в каждой из переданных ей групп 
переключателей есть хотя бы один переключатель, значение свойства checked 
которого равно True. Для группы, в которой посетитель не выбрал какой-нибудь 
переключатель (или другими словами, группы, которую посетитель пропустил), 
ФУНКЦИЯ countSelections() ВОЗВращает False. Функция ValidateFrom() (КОТО- 
рая вызывает функцию countseiections o ) , в свою очередь, возвращает атри- 
буту onSubmit дескриптора <input> значение, возвращаемое функцией 
countSelections (). 
Как уже говорилось в предыдущем совете, для того чтобы Web-браузер имел 
возможность запускать функцию проверки при нажатии посетителем кнопки 
Submit, в дескриптор <form> формы необходимо добавить атрибут onSubmit, ко- 
торый должен выглядеть следующим образом: 
<form narae="ExampleForm" 
onSubmit="return ValidateForm(ExampleForm)" 
action="http://NVBizNet2.com/_scripts/_pl/FrmScrpt.CGI" 
method="POST" 
enctype="application/x-www-form-urlencoded"> 
He пропустите ключевое слово "return", которое находится перед вызовом 
функции vaiidateForm (). В противном случае Web-браузер передаст результаты 
формы Web-серверу, даже если функция vaiidateForm () вернет значение False, 
указывающее на наличие ошибок во введенной на форму информации. Если все 
атрибуты дескриптора введены без ошибок (как в приведенном примере), атри- 
бут onSubmit заставит Web-браузер после нажатия посетителем кнопки Submit 
выполнить JavaScript-сценарий с целью проверки результатов заполнения формы.

146 Глава 3. HTML-формы 
Если функция vaiidateForm() возвращает значение True, Web-браузер передаст 
результаты формы по URL-адресу, указанному в атрибуте method дескриптора 
<form>. В противном случае, Web-браузер вернется к форме ввода данных. 
Создание на форме выпадающего списка (меню выбора) 
Если необходимо, чтобы посетитель сайта мог выбирать один или несколько 
элементов из выпадающего списка элементов, поместите на форму список эле- 
ментов между начальным и конечным дескрипторами <seiectx/seiect>. 
ПРАКТИКУМ 
Например, для организации меню выбора (или выпадающего списка), показан- 
ного в нижней части рис. ЗЛО, вставьте в HTML-код Web-страницы начальный и 
конечный дескрипторы выбора (<seiectx/seiect>) и начальный и конечный 
дескрипторы опций (<optionx/option>), как показано в конце следующего 
кода: 
<form name="ExampleForm"> 
<р>Имя: <input type="text" name="FirstName" id="FN" size="15" /> 
Фамилия: <input type="text" name="LastName" id="LN" size="20" /x/p> 
<р>Адрес E-mail:*<input type="text" name="Email" id="EM" size="30" /X/p> 
<р>Сообщение: <textarea name="TextMessage" rows="5" cols="60"X/ 
textareaX/p> 
<р>Области интересов:<br /> 
Операционные системы: 
<input type="checkbox" name="Win98" value="ON" />Windows 98 
<inputtype="checkbox" name="WinXp" value="ON" />Windows XP 
<input type="checkbox" name="WinNT" value="ON" />Windows NT<br /> 
Оборудование: 
<input type="checkbox" name="DT" value="ON" />Настольные компьютеры 
<input type="checkbox" name="LT" value="ON" />Портативные компьютеры 
<input type="checkbox" name="PDA" value="ON" />PDA 
<input type="checkbox" name="Prtr" value="ON" />Принтеры 
<input type="checkbox" name="Mon" value="ON" />Мониторы</р> 
<р>Можем ли мы передавать ваш адрес электронной почты другим посетителям? 
<input type="radio" value="Yes" name="ShareEmail" />Да 
<input type="radio" value="No" checked="checked" name="ShareEmail" /•> 
Нет</р> 
<р>Выберите максимальный уровень ответственности:<br /> 
<select size="l" name="PurchaseInvolvement"> 
<option value="MPD">Bbi6op решения о noKynxe</option> 
<option value="SV">Bbi6op проиаводителя</орЪ1оп> 
<option value="SP">Bbi6op продукта</орЪ1оп> 
<option уа1ие="ЗК"Х)пределение требований</орЬ1оп> 
<option value="AN">Ou,eHKa потребностей</орЪ1оп> 
</selectX//p> 
<p>[Кнопки RESET и SOMBIT формы]</р> 
</form> 
Как и ранее, текстовая надпись, которая описывает назначение выпадающего 
СПИСКа (В Приведенном Примере "Выберите максимальный уровень ответ- 
ственности" не является частью HTML-кода списка выбора. Дескриптор 
<seiect> выпадающего списка может содержать следующие атрибуты:

Глава3. HTML-формы 147 
I 
Имя:| 
Адрес E-mail: | 
Сообщение: 
Области интересов: 
Операционные системы: Г Windows 98 Г Windows ХР Г Windows NT 
Оборудование: Г Настольные компьютеры Г: Портативные компьютеры Г PDA 
Г Принтеры Г Мониторы 
Можем ли мы передавать ваш адрес электронной почты другим посетителям? г Да Р 
Нет 
Выберите максимальный уровень ответственности: 
Выбор решения о покупке jj 
Выбор производителя 
Выбор продукта 
Определение требований 
Оценка потребностей 
рмы] 
РИС. 3.10. Форма с выпадающим списком (меню выбора) 
• size. Количество пунктов меню (или опций), одновременно видимых на 
экране. В приведенном примере (size="i") в списке до нажатия кнопки 
раскрытия в правой части элемента на экране будет виден всего один 
пункт. Если значение атрибута size превышает единицу, Web-браузер бу- 
дет визуализировать выпадающий список в виде списка элементов (с поло- 
сой прокрутки, если это необходимо), а не в виде выпадающего списка с 
кнопкой раскрытия. 
• id. Используется для присвоения выпадающему списку уникального име- 
ни. Значение атрибута id можно использовать для работы с выбранным в 
списке элементом в рамках внедренного на Web-страницу сценария. 
• name. Используется для идентификации выпадающего списка на форме. 
Значение атрибута name Можно использовать для работы с выбранным в 
списке элементом в среде сценария, выполняемого Web-браузером. Более 
того, Web-браузер будет передавать Web-серверу значение атрибута name в 
качестве части "имя" пары имя/значение для каждого выбранного посети- 
телем элемента списка. 
• multiple. Если в дескрипторе <seiect> выпадающего списка присутствует 
атрибут multiple, Web-браузер позволит посетителю сайта выбирать в 
списке несколько элементов. В противном случае при выборе нового эле- 
мента Web-браузер будет автоматически снимать выделение с предыдущего 
элемента (если таковой существует). 
Для вставки элемента в выпадающий список необходимо поместить текст 
элемента между начальным и конечным дескрипторами опций (<option> 
</option>), которые, в свою очередь, находятся между начальным и конечным 
дескрипторами списка (<seiectx/seiect>). Дескриптор <option> имеет следу- 
ющие атрибуты:

148 Глава 3. 
• value. Строка, которая будет передаваться Web-серверу в качестве части 
"значение" пары имя/значение, если посетитель выбрал элемент выпадаю- 
щего списка (или списка выбора). При нажатии кнопки Submit Web-брау- 
зер передает только значения атрибутов name (выпадающего списка) и 
value (опции), т.е. пару имя/значение для выбранного элемента (или эле- 
ментов) списка. Если дескриптор <option> не содержит атрибута value, 
Web-браузер в качестве части "значение" пары имя/значение передает сер- 
веру текст выбранного элемента (который находится между начальным ко- 
нечным дескрипторами СЩФ1 (<optionX/option>)). 
selected. Указывая атрибут selected в дескрипторе <option>, вы говорите 
Web-браузеру при начальной визуализации формы с выпадающим списком 
и после нажатия кнопки Reset выбирать соответствующий данному деск- 
риптору <option> элемент в качестве элемента по умолчанию. 
Web-браузер выделяет выбранный в выпадающем списке элемент (или элемен- 
ты) путем его (их) подсветки. Если в дескрипторе <seiect> не указан атрибут 
multiple, посетитель может выбирать в списке только один элемент. В таком 
случае при выборе нового элемента Web-браузер будет автоматически снимать 
выделение с ранее выбранного элемента. 
Чтобы разрешить посетителю сайта одновременно выбирать несколько эле- 
ментов выпадающего списка, включите в дескриптор <seiect> списка атрибут 
multiple. Более того, при обеспечении возможности выбора нескольких элемен- 
тов выпадающего списка желательно привести текст, например, "выберите все 
нужные опции" И "для выбора нескольких элементов удерживайте нажатой 
клавишу Ctrl". (Даже если выбор нескольких элементов из списка и разрешен, 
без удержания в нажатом состоянии клавиши Ctrl Web-браузер при выборе ново- 
го элемента будет снимать выделение с ранее выбранного элемента.) 
Если чтобы 
из меню выбора) хотя бы один элемент, включите в качестве первого элемента 
(опции) 
списка пустой элемент. В таком случае, если посетитель не выберет в списке ни 
одного эле- 
мента, результаты формы будут содержать пустое значение в паре имя/значение для 
выпа- 
дающего списка. Если же в начале списка не включить пустой элемент, может 
показаться, 
что результаты формы содержат значение, выбранное посетителем, даже если 
посетитель 
собственно выбора не сделал. Соответствующие подробности описываются в 
следующем 
совете. 
Проверка выбора элемента списка перед передачей 
результатов формы 
Проверка выбора элемента выпадающего списка (меню выбора) практически 
ничем не отличается от аналогичной проверки для группы переключателей (о 
которой говорилось в предыдущем совете). Чтобы указать Web-браузеру, что посе- 
титель может выбирать из меню только один элемент, не указывайте в дескрип- 
торе <seiect> атрибут multiple. Если же необходимо, чтобы посетитель сайта 
имел возможность выбирать в меню одновременно несколько элементов, включи-

Глава.3. HTML-формы ' 149 
те в дескриптор <seiect> атрибут multiple. Как и в случае с группой переклю- 
чателей, существует возможность с помощью браузера ограничивать количество 
выбранных посетителем элементов меню выбора. Фактически необходимо прове- 
рить, что посетитель выбрал хотя бы один элемент. 
Если вы хотите, чтобы посетитель выбрал из списка выбора хотя бы один эле- 
мент, введите в качестве первого элемента списка текст наподобие "— выберите 
один элемент —-" ИЛИ "-— Выберите хотя бы один элемент —-", ЧТО ПО- 
ЗЕОМГ посетителю понять, что он просто обязан сделать выбор. Далее необходи- 
мо гарантировать, что посетитель не выбрал первый элемент списка (поскольку 
он фактически не является опцией). Приведенный ниже JavaScript-сценарий, на- 
пример, гарантирует, что посетитель сайта выбрал, по крайней мере, один эле- 
мент в выпадающем списке (причем не первый элемент, который имеет индекс 
0): 
<html<bodyXhead> 
<script language="JavaScript"> 
<! — 
function ValidateForm(Fortn) 
{ 
II** Другие операторы проверки данных формы ** 
if (Form.Company_Type.options[0].selected) 
{ . 
alert("Первый элемент списка \"Тип компании\" не является 
допустимым выбором. Пожалуйста, выберите любой другой элемент.") ; 
Form.Company_Type.focus(); 
return (false); 
} 
if (Form.Company_Type.selectedlndex < 1) 
{
alert("Пожалуйста, выберите один из элементов в списке \" 
Тип компании\"."); 
Form.Company_Type.focus() ; 
return (false); 
} 
return(true); 
</script> 
Свойство seiectedindex содержит индекс выбранного посетителем элемента 
(элементов) выпадающего списка. Чтобы гарантировать, что посетитель не может 
выбрать первый элемент списка, необходимо проверить, что первый элемент (т.е. 
элемент с индексом 0) не выбран, а затем поверить, выбран ли хотя бы один из 
остальных элементов списка (со значениями индекса 1 и выше). 
Как было показано в двух предыдущих советах, для того чтобы Web-браузер 
запускал функцию проверки результатов формы при нажатии кнопки Submit, в 
дескриптор <form> формы необходимо вставить показанный ниже атрибут 
onSubmit.'

150 Глава 3. HTML-формы 
<form name="ExampleForm" 
onSubmit=" return ValidateForm(ExampleForm) " 
action="http: //NVBizNet2 .com/_scripts/__pl/FrmScrpt .CGI" 
method="POST" 
enctype="application/x-www-form-urlencoded"> 
He пропустите ключевое слово "return", которое находится перед вызовом 
функции vaiidateForm(). В противном случае Web-браузер передаст результаты 
формы Web-серверу, даже если функция vaiidateForm() вернет значение False, 
указывающее на наличие ошибок в результатах формы. Если все атрибуты деск- 
риптора введены без ошибок (как в приведенном примере), атрибут onSubmit за- 
ставит Web-браузер после нажатия посетителем кнопки Submit выполнить 
JavaScript-сценарий с целью проверки результатов заполнения формы. Если фун- 
кция vaiidateForm() возвращает значение'True, Web-браузер передаст результа- 
ты формы по URL-адресу, указанному в атрибуте method дескриптора <form>. В 
противном случае Web-браузер вернется к форме ввода данных и поместит кур- 
сор на элемент формы, указанный в методе focus () в коде JavaScript-сценария. 
Изменение элементов списка выбора на основании 
введенных посетителем данных 
Ранее в этой главе мы говорили о том, что список выбора представляет собой 
меню, из которого посетитель может выбрать один или несколько элементов в 
зависимости от того, присутствует ли атрибут multiple в дескрипторе <seiect> 
списка выбора. (Если атрибут multiple указан, Web-браузер даст посетителю 
возможность выбирать из меню несколько элементов.) Несмотря на то что вы 
должны указать возможность или невозможность выбора в списке нескольких 
элементов в описании списка выбора, содержащиеся в списке элементы можно 
менять в любое время, даже после того как браузер визуализировал этот список. 
Предположим, например, что имеется форма, показанная на рис. 3.11, кото- 
рая предлагает посетителю ввести имена членов его семьи, а затем выбрать имя 
наиболее пожилого из них. 
ПРАКТИКУМ 
В этом примере меню выбора (показанное на рис. 3.11 над кнопками Submit и 
Reset) СОДерЖИТ ТОЛЬКО ОДИН Элемент - "-— Имена членов семьи --" ("-- 
Family Member Names — " ) . Чтобы ДОбаВИТЬ В СПИСОК Выбора НОВЫе Элементы 
(т.е. имена членов семьи), запрограммируем кнопку для вызова JavaScript-функ- 
ции, которая будет вставлять в список новый элемент: 
<input type="button" value="Добавить имя в список" 
onClick="addToList(ExampleForm) "X/p> 
Далее определим функцию addToListo, которую Web-браузер будет вызывать 
при нажатии посетителем кнопки "Добавить имя в список". Для этого вставим 
следующий JavaScript-код после дескриптора <body> в рамках HTML-кода Web- 
страницы. (Имя функции и значение атрибута value кнопки будет зависеть от 
функции, которая должна выполняться в результате нажатия кнопки.)

Глава 3. HTML-формы 151 
<html<bodyXhead> 
<script language="JavaScript"> 
function addToList(Form) 
{
var Nextltem = Form.OldestFamilyMember.length; 
var NewName = Form.MemberNarae.value; 
//Убедиться, что поле ввода имени не оставлено пустым 
if (NewName == "") 
{
alert("Пожалуйста, введите имя!"); 
return; 
} 
//Добавить в список выбора новую опцию 
if (Form.OldestFamilyMember.options[0].value == "PromptText") 
Nextltem = 0; 
//Запятая (,) в строке '", ' , добавляемой к параметру NewName 
//в конструкторе Option(), вставляет запятую-разделитель между 
//элементами списка, заключенными в кавычки 
Form.OldestFamilyMember.options[Nextltem] = 
new Option(NewName, '"'+NewName+'",', 0, 0) ; 
//Очистить содержимое поля ввода имени 
Form.MemberName.value = ""; 
Form.MemberName.focus(); 
return; 
</script>
Файл Орввкв С.рвис. Справке 
барвс j@] h1tpy/htmbvebdesign/Chapter03/Figure03-10 htm 
Пожалуйста, введите имена членов вашей семьи: 
Добавить имя в список 
Выберите в списке имя старейшего члена семьи. 
Можно выбирать несколько имен. 
- Имена членов семьи — 
Отправить Очистить 
Рис. 3.11. Форма, в которой данные, введенные в текстовое поле, 
изменяют содержимое списка выбора

152 Глава 3. HTML-формы 
После проверки ввода пользователем хоть какой-нибудь информации в тек- 
стовое поле имени члена семьи функция addToListo добавляет новый элемент 
в список выбора с использованием следующего синтаксиса: 
ИмяСпискаВыбора. options[ИндексНовогоЭлемента] = 
new Option(ТекстОпции, ЗначениеОпции, SelectedByDefault, 
SelectedWhenAdded) ; 
В нашем примере параметры SelectedByDefault И SelectedWhenAdded В ВЫ- 
зове new Option имеют значения 0. Это значит, что вновь добавленные новые 
элементы списка по умолчанию являются невыбранными, и во время добавления 
нового элемента Web-браузер не выбирает его автоматически. Если же требуется, 
чтобы Web-браузер выбирал каждый елемент после его добавления пользовате- 
лем, установите значение параметра SelectedWhenAdded равным 1. 
Передача всех значений списка выбора на 
Web-сервер с использованием скрытых полей 
В предыдущем практикуме вы посмотрели, как использовать JavaScript-опера- 
тор new для добавления дополнительных опций (то есть элементов) в список вы- 
бора в ответ на введенную посетителем инормацию в текстовом поле формы. Од- 
нако когда посетитель щелкает на кнопке отправки формы, браузер отправляет 
Web-серверу только выбранные элементы списка выбора как часть результатов за- 
полнения формы. Как правило, это как раз то, что мы ожидаем от Web-браузера, 
поскольку список элементов был подготовлен заранее в коде формы. 
В случае, когда вы предлагаете посетителю добавить в список выбора новые 
элементы, необходимо чтобы передавались не только выбранные в списке эле- 
менты, но также и невыбранные. Иначе какой же смысл предлагать посетителю 
вводить что-либо, можно сказать, впустую. 
Предположим, например, вы предлагаете посетителю ввести модели любимых 
автомобилей и затем выбрать в списке ту модель, которой в настоящий момент 
посетитель владеет. Для целей маркетинговых исследований было бы полезно со- 
хранять список предпочитаемых моделей для каждого посетителя сайта, дабы в 
будущем предлагать ему приобрести что-нибудь из введенного ранее списка. 
Аналогично, в предыдущем примере имело бы смысл сохранять весь список чле- 
нов семьи для каждого посетителя. 
Для того чтобы получить значения как выбранных, так и невыбранных эле- 
ментов списка выбора, предоставьте возможность браузеру при помощи своей 
стандартной функциональности добавить список выбранных элементов к резуль- 
татам формы. Затем при помощи JavaScript-функции сохраните значения всех 
элементов списка выбора в скрытом поле до того, как браузер отправит результа- 
ты формы Web-серверу. (Несмотря на то что браузер не отображает на форме 
скрытые поля, после щелчка на кнопке отправки он все равно пересылает имена 
и значения таких полей Web-серверу вместе с остальными данными формы.)

Глава 3. HTML-формы 153 
ПРАКТИКУМ 
Пусть, например, требуется, чтобы Web-браузер отправлял Web-серверу все имена 
членов семьи, добавленные посетителем в список выбора из предыдущего приме- 
ра. Для этого вы должны вставить следующий JavaScript-код между начальным и 
конечным дескрипторами тела (<bodyx/body>) HTML-страницы: 
<script language="JavaScript"> 
// Другие JavaScript-функции 
function prepFormResuits(Form) 
{ 
// Операторы для проверки, заполнены ли поля формы (если необходимо) . 
// Вернуть значение false, если поля не заполнены, 
var itemList = ""; 
for (var i = 0; i < Form.OldestFamilyMember.length; i++) 
{ 
itemList = itemList + 
Form.OldestFamilyMember.options[i].value; 
} 
Form.RelativeNameList.value = itemList; 
return; 
}
// Другие JavaScript-функции 
// —> 
</script> 
Функция prepFromResuito в приведенном примере предполагает, что описа- 
ние функции включает определение следующего скрытого поля, в которое она мо- 
жет поместить значения элементов списка выбора, объединенных в одну строку: 
<input type="hidden" name="RelativeNameList" value=""> 
Кроме того, функция prepFromResuito предполагает, что дескриптор 
<form> формы содержит атрибут onSubmit, который указывает, что функция 
prepFromResuito должна вызываться перед передачей результатов формы брау- 
зеру при нажатии кнопки Submit. (Нам необходимо, чтобы Web-браузер перед 
передачей серверу результатов формы выполнял функцию prepFromResuito, ко- 
торая помещает элементы списка выбора в скрытое поле формы с именем 
RelativeNameList). 
Создание на форме кнопки Reset 
Большинство форм содержат кнопку сброса Reset, которую посетитель может 
нажать для приведения всех элементов формы (текстовых полей ввода, флажков, 
переключателей> выпадающих списков) в исходное состояние. 
ПРАКТИКУМ 
Например, для помещения на форму кнопки Reset (показанной на рис. 3.12 в 
нижнем левом углу формы) необходимо вставить следующий дескриптор <input> 
со значением атрибута type, равным "reset" между начальным и конечным ат- 
рибутами формы (<f ormx/f orm>) в том месте, где эта кнопка должна находиться: 
<input type="reset">

154 Глава 3. HTML-формы 
3>вйл Правка §ид избранное Сйрвис Справка Щ 
tittp//Wml-webdesign/ChepterO3/FigureO3-11 htm 
Имя: I : Фамилия: I 
Адрес E-mail: I 
Сообщение: 
Области интересов: 
Операционные системы: Г Windows 98 Г" Windows XP И Window's NT 
Оборудование: г Настольные компьютеры Г Портативные компьютеры Г PDA 
Г Принтеры Г Мониторы 
Можем ли мы передавать ваш адрес электронной почты другим посетителям? О Да * 
Нет 
Выберите максимальный уровень ответственности: 
| Выбор решения о покупке _*j 
Отправить форму Очистить форму 
РИС. 3.12. Форм передачи и сброса 
Если вы хотите изменить заголовок кнопки Reset, включите в дескриптор 
<input> кнопки Reset соответствующий тест в качестве значения атрибута 
value. Например, ЧТОбЫ назвать КНОПКУ Reset "Очистить форму" ("Clear 
Form"), определите следующий дескриптор <input>: 
<input type="reset" value="Очистить форму"> 
Несмотря на то что при нажатии кнопки Reset Web-браузер возвращает все 
элементы формы в их исходное состояние, он не перемещает курсор (или фо- 
кус) на первый элемент формы. Как результат, после нажатия Reset для нача- 
ла ввода данных посетитель сайта должен сам пролистать содержимое окна 
браузера до начала формы и поместить курсор на ее первый элемент. Если 
содержимое формы занимает несколько Web-страниц, на форму желательно 
поместить текстовое сообщение, указывающее, каким образом посетитель мо- 
жет перейти к началу формы. Кроме того, можно организовать так, чтобы 
курсор при нажатии кнопки Reset перемещался на первый элемент формы ав- 
томатически за счет выполнения Web-браузером сценария onReset. (В следу- 
ющем совете будет показано, каким образом можно вставит атрибут onReset 
в деСКрИПТОр <form> форМЫ ДЛЯ ВЫПОЛНеНИЯ браузером Сценария onReset 
после нажатия кнопки Reset.)

Глава3. HTML-формы 155 
Предотвращение случайной очистки посетителем 
элементов формы 
При нажатии кнопки Reset Web-браузер должен очистить все введенные посе- 
тителем сайта данные и восстановить исходное состояние для всех элементов 
формы. К счастью, Web-браузеры "знают", что они должны делать в ответ на 
щелчок указателем мыши на кнопке Reset формы, поэтому вам не нужно писать 
сценарий, который бы выполнял функцию очистки формы. Тем не менее, если 
форма содержит большое количество элементов, или если посетитель вводит в 
многострочные поля ввода текста большой объем текста, желательно организо- 
вать удобное для пользователя поведение, при котором запрашивается подтверж- 
дение очистки данных формы перед фактической очисткой. 
ПРАКТИКУМ 
Аналогично тому, как атрибут onSubmit заставляет Web-браузер выполнить сце- 
нарий перед выполнением стандартной для кнопки Submit операции по переда- 
че результатов формы Web-серверу, атрибут onReset указывает браузеру выпол- 
нить сценарий перед восстановлением элементов формы в их исходные 
состояния. Например, атрибут onReset в следующем определении формы указы- 
вает браузеру при нажатии посетителем кнопки Reset выполнить JavaScript-функ- 
цию PreResetProc(): 
<form name="ExampleForm" 
onReset="return preResetProc(ExampleForm)" 
onSubmit="return validateForm(ExampleForm)" 
action="http://NVBizNet2.com/_scripts/_pl/FrmScrpt.CGI" 
onreset="clearForm(ExampleForm)" method="POST" 
enctype="application/x-www-form-urlencoded"> 
В свою очередь, JavaScript-функция может выполнять предварительную обра- 
ботку перед восстановлением состояния формы, начиная со стандартной очистки 
всех элементов формы и заканчивая очисткой только определенных элементов. 
Как и атрибут onSubmit, атрибут onReset указывает браузеру вызвать JavaScript- 
функцию. Затем, если функция возвращает значение False, Web-браузер не бу- 
дет выполнять стандартную процедуру очистки формы, выполняемую при нажа- 
тии кнопки Reset. В противном случае, если возвращается значение True, 
выполняется стандартная очистка элементов формы и возврат их в исходное со- 
стояние. 
Так, например", следующий JavaScript-код при использовании его совместно с 
формой из предыдущего примера выведет на экран показанное на рис. 3.13 диа- 
логовое окно подтверждения. 
<html><bodyXhead> 
<script language="JavaScript"> 
<! - - 
function preResetProc(Form) 
{
if (confirm("Bbi уверены, что хотите очистить все поля формы?"))

156 Глава 3. HTML-формы 
II*** Другие операции, выполняемые перед очисткой формы 
//(если таковые имеются) * * * 
Form.Firs tName.focus() ; 
return (true); 
else
Form.FirstName.focus(); 
return (false); 
</script> 
Microsoft Internet Explorer 
•^^J 8ы уверены, что хотит* 
ИПЖИЛ 
1 ОЧИСТИТЬ Ё 
Отмена 
В! 
ее поля срор-мы? 
Рис. 3.13. Диалоговое окно подтверждения очистки всех полей формы 
Если посетитель нажмет кнопку "Cancel" ("Отмена"), метод confirm() и фун- 
кция PreResetProcO вернут значение False, и Web-браузер не будет выполнять 
стандартную процедуру очистки элементов формы. Если же была нажата кнопка 
ОК, метод confirm о и функция PreResetProcO вернут значение True, и Web- 
браузер очистит все элементы формы и вернет их в исходное состояние. 
Создание на форме кнопки Submit 
Заполнение полей формы не имеет смысла, если нет средства, которое бы по- 
зволило посетителям передать введенные ими данные вам или какому-то сервер- 
ному сценарию с целью дальнейшей обработки. При нажатии посетителем сайта 
кнопки Submit Web-браузер передает результаты формы (т.е. пары имя/значение 
для полей ввода текста и переключателей, флажков и списков выбора) Web-серве- 
ру. Web-сервер, в свою очередь, передает результаты формы программе (или сце- 
нарию), указанной в атрибуте action дескриптора <form> формы, о котором 
упоминалось в начале этой главы. 
шПШШШШШШШШШШШ ПРАКТИКУМ 
Для помещения на форму кнопки Submit необходимо в соответствующее место 
HTML-кода между начальным и конечным дескрипторами (<formx/form>) вста- 
вить, следующую строку кода: 
<input type="Submit" value="Отправить" name="Bl"> 
Кнопка Submit имеет следующие атрибуты: 
• value. Текст, который будет выводиться Web-браузером на кнопке Submit в 
качестве ее заголовка. В приведенном примере кнопка Submit будет содер- 
жать надпись "Отправить" (как показано на рис. 3.11). Если атрибут 
value опустить, Web-браузер назовет кнопку Submit в соответствии с уста-

Глава3. HTML-формы 157 
новками, используемыми по умолчанию для каждого типа браузера. (Брау- 
зеры Internet Explorer и Netscape Navigator по умолчанию называют кнопку 
Submit как "Submit Query" ("Передать запрос")). 
•' name. Атрибут name можно использовать для присвоения кнопке Submit 
имени. Если необходимо, чтобы Web-браузер в результаты формы, которые 
он передает Web-серверу, включил пару имя/значение для кнопки Submit, 
установите в дескрипторе <input> кнопки оба атрибута — name и value. 
Если в дескрипторе <form> формы указан атрибут onSubmit, перед передачей 
результатов формы Web-серверу Web-браузер выполнит сценарий, имя которого 
задано в атрибуте onSubmit. Как правило, атрибут onSubmit используется для 
запуска функции проверки данных, введенных в элементах формы. Если резуль- 
таты формы не содержат ошибок, функция возвращает значение True и Web-бра- 
узер передает данные серверу. Если же сценарий обнаруживает, что введенные 
посетителем данные нарушают одно или несколько правил ввода данных форм 
(запрограммированных в функции проверки), сценарий предупреждает посетите- 
ля о наличии ошибки (ошибок) и возвращает значение False. В этом случае 
Web-браузер не будет передавать результаты формы Web-серверу, и посетитель по- 
лучит возможность перед попыткой повторной передачи данных исправить вве- 
денные им данные. (В советах "Проверка данных текстового элемента перед пе- 
редачей результатов формы", "Проверка выбора группы переключателей перед 
передачей результатов формы" и "Предотвращение случайной очистки посетите- 
лем элементов формы" можно найти примеры использования атрибута onSubmit 
• дескрипторе <form> формы для запуска Web-браузером сценария перед переда- 
чей результатов заполнения формы Web-серверу.) 
Замена стандартных кнопок Submit и Reset другими 
графическими изображениями 
Любая форма содержит кнопку Submit, которую посетитель должен нажать 
для передачи результатов формы (т.е. введенных данных и выбранных элементов) 
по URL-адресу, указанному в атрибуте action дескриптора <form>. Большинство 
форм, кроме того, содержат кнопку Reset, которую посетитель может использо- 
вать для удаления введенной им в элементы формы информации и восстановле- 
ния исходного состояния элементов. Когда Web-браузер встречает в HTML-коде 
следующие дескрипторы <input>, он визуализирует показанные на рис. 3.14 
стандартные кнопки Submit и Reset. 
<input 
<input 
type="Submit" value="Отправить"> 
type="Reset" value="Очистить"> 
Рис. 3.14. 
Отправить Очистить 
Стандартные кнопки отправки и очистки
1
формы

158 Глава 3. НТМЬфрг/ы 
ПРАКТИКУМ 
За счет замены дескриптора <input> на гиперссылку вместо стандартных кнопок 
на Web-страницу можно поместить графические изображения. Например, для за- 
мены стандартной кнопки Submit графическим изображением, выполняющим ту 
же функцию, необходимо вместо дескриптора <input> воспользоваться следую- 
щим синтаксисом дескриптора привязки <а>: 
<а href="#" onClick="document. formname. Submit() /return false"> 
<img src="SubmitButtonGraphic.GIF"X/a> 
Таким образом, чтобы использовать графическое изображение, содержащееся 
в файле submit.gif в качестве кнопки Submit на форме, значение атрибута name 
которой равно "ExampieForm", необходимо заменить дескриптор стандартной 
кнопки Submit следующей строкой: 
<а href="#" onClick="document.ExampieForm.Submit()/return false"> 
<img src= "Submit.GIF"X/a> 
Установка значения атрибута href дескриптора <а> гиперссылки равным зна- 
ку "решетка" (#) предотвращает переход Web-браузера к невидимой в данный мо- 
мент части Web-страницы за счет указания гиперссылки на несуществующую (ну- 
левую) закладку. Вряд ли необходимо, чтобы при нажатии гиперссылки 
Web-браузер переходил по действительной ссылке или по URL-адресу графичес- 
кого изображения, используемого в качестве кнопки Submit (которое указывается 
в атрибуте src дескриптора <img> гиперссылки). Web-браузер при нажатии на 
гиперссылку должен выполнить JavaScript-сценарий, заданный в атрибуте 
onclick дескриптора <а> гиперссылки. 
Аналогично, если необходимо заменить стандартную кнопку Reset графичес- 
ким изображением, потребуется вместо дескриптора <input> кнопки в код фор- 
мы поместить следующую гиперссылку: 
<а href="#" onClick="document.formname.Reset()/return false"> 
<img src="ResetButtonGraphic. GIF"X/a> 
Обратите внимание, что гиперссылка для графического изображения кнопки 
Reset указывает Web-браузеру выполнить метод reset о формы (а не метод 
submit (), как это было для кнопки Submit в предыдущем примере). Таким обра- 
зом, если атрибут name формы содержит значение "ExampieForm11, а файл графи- 
ческого изображения для кнопки Reset носит название reset.gif, графическое 
изображение кнопки Reset можно поместить на форму с помощью такого кода: 
<а href="#" onClick="document.ExampieForm.Reset();return false"> 
<img src="Reset.GIF"X/a> 
"" При замене стандартной кнопки Reset графическим изображением с гиперс- 
сылкой, выполняющей ту же самую функцию, Web-браузер перед очисткой элементов 
формы 
будет выполнять JavaScript-функцию, указанную в атрибуте onReset дескриптора 
<form> 
формы. Тем не менее, при замене стандартной кнопки Submit Web-браузер не будет 
выпол- 
нять функцию, указанную в атрибуте onSubmit. В следующем совете будет показано, 
как за- 
ставить браузер выполнять сценарий перед передачей результатов формы 
Web-серверу, 
даже если стандартная кнопка Submit заменена.

Глава 3. HTML-формы 
Отправка результатов формы по электронной почте 
без использования CGI-сценария 
Как уже говорилось выше в этой главе, результаты (заполнения) формы пред- 
ставляют собой пары имя/значение, которые Web-браузер передает по адресу 
(т.е. по URL-адресу), указанному в атрибуте action дескриптора <form> формы, 
при нажатии посетителем кнопки Submit. Каждая пара имя/значение содержит 
имя name элемента формы и его значение value. Наверное, понять, что отправ- 
ляет Web-браузер Web-серверу легче всего, заставив браузер передать результаты 
заполнения формы по электронной почте. 
ПРАКТИКУМ 
Например, атрибут action дескриптора <form> в первой строке следующего кода 
формы заставляет Web-браузер передавать результаты заполнения формы в виде 
Сообщения ЭЛектрОННОЙ ПОЧТЫ ПО адресу Konrad@NVBizNet.com. (Для ТОГО ЧТОбы 
отправить результаты заполнения формы по вашему адресу электронной почты, 
просто замените адрес Konrad@NVBizNet.com на требуемый.) 
<form name="MailToForm" action="mailto:mailbox@smtpServer.com" 
method="POST" title="IlpoBepKa MailTo" enctype="text/plain"> 
<р>Имя: <input type="text" name="FirstName" size="15" /> 
Фамилия: <input type="text" name="LastName" size="20" /Xbr /> 
Адрес E-Mail: <input type="text" name="E-MailAddr" size="20" /x/p> 
<р>Области интересов : <br /> 
. Операционные системы: 
<input type="checkbox" name="Win98" value="0N" />Windows 98 
<input type="checkbox" name="WinXp" value="0N" />Windows XP 
<input type="checkbox" name="WinNT" value="ON" />Windows NT<br /> 
Оборудование: 
<input type="checkbox" name="DT" value="0N" />Настольные компьютеры 
<input type="checkbox" name="LT" value="ON"/>IIopTaTHBHue компьютеры 
<input type="checkbox" name="PDA" value="0N" />PDA 
<input type="checkbox" name="Prtr" value="0N" />Принтеры 
<input type="checkbox" name="Mon" value="0N" />Мониторы</р> 
<р>Можем ли мы передавать ваш адрес электронной почты другим 
посетителям? 
<input type="radio" value="Yes" name="ShareEmail" />Да 
<input type="radio" value="No" checked="checked" 
name="ShareEmail" />Нет</р> 
<pXinput type="Submit" value="Отправить" /> 
<input type="Reset" уа1ие="0чиотить" /х/р> 
</form> 
Если посетитель сайта заполнит форму, сгенерированную приведенным выше 
кодом и указанную на рис. 3.15, а затем нажмет кнопку Submit, Web-браузер 
отправит результаты формы электронной почте по Адресу, указанному после 
mailto: В атрибуте action.

Глава 3. HTML-формы 
sjjjj Передача результатов заполнения формы по электронной почте (с 
использованием Mail 1 и.) 
Файл Правка 8ид Избранное Сервис Оправка 
> -'-'" - "э л з;"ъaj'^ijm - 
^дрес j # ] http//htmUvebdesign/ChapterO3/FigureO3-12 htm 
Имя: I Фамилия: | 
Адрес E-Mail: | 
Области интересов:, 
Операционные системы: Г Windows 98 Г Windows ХР Г Windows NT 
Оборудование: Г Настольные компьютеры Г Портативные компьютеры Г PDA 
Г Принтеры С Мониторы 
Можем ли мы передавать ваш адрес электронной почты другим посетителям? с Да * 
Нет 
Отправить Очистить 
i 
Рис. 3.15. Форма с данными, которые будут отправляться по электронной почте 
Обратите внимание, что результаты формы включают имена элементов формы 
и введенные посетителем значения, разделенные знаками равно (=). Параметр 
"text/plain" в качестве значения атрибута enctype (вторая строка определения 
формы) указывает Web-браузеру, что результаты формы должны передаваться в 
виде открытого текста. Если бы в определение формы в качестве метода кодиро- 
вания было установлено используемое по умолчанию значение application/ 
x-www-form-uriencoded, Web-браузер передавал бы данные в виде одной строки 
с разделяющими запятыми, в которой имена и значения были бы разделены ам- 
персантами (&). Тем не менее, независимо от типа кодирования, важно пони- 
мать, что Web-браузер передает результаты формы в виде пар имя/значение. Ре- 
зультаты заполнения формы включают имена всех полей ввода текста (как 
содержащих данные, так и пустых), но для флажков, переключателей и элемен- 
тов списка выбора Web-браузер передает пары имя/значение только для выбран- 
ных элементов. 
Следует иметь в виду, что использование maiito: в атрибуте action может 
работать не во всех браузерах. Для передачи результатов формы по электронной 
почте в соответствии с описанной выше схемой система посетителя сайта долж- 
на иметь соответствующим образом настроенную почтовую программу. Тем не 
менее, maiito: позволяет легко и быстро протестировать формы, передавая их 
результаты в виде открытого текста по вашему адресу электронной почты. С по- 
мощью maiito: можно передать данные формы (по электронной почте самому 
себе) без участия провайдера услуг Internet и без использования серверных CGI- 
сценариев. В главе 10, посвященной РНР, и главе 11, посвященной ASP, будет 
подробно рассказано об обработке результатов форм на Web-сервере. За счет ис- 
пользования серверных сценариев результаты заполнения формы можно отправ- 
лять по электронной почте (через почтовый сервер SMTP), даже если в системе 
посетителя не установлена почтовая программа.

Глава 3. HTML-формы 
Управление расположением элементов и текста 
формы с помощью HTML-таблиц 
В коде примеров форм, приведенном выше в этой главе, не используются ни- 
какие другие элементы размещения объектов* на форме, кроме дескрипторов аб- 
зацев (<р>) и новых строк (<Ьг>). Тем не менее, в некоторых случаях группу 
флажков или переключателей необходимо расположить вертикально или гори- 
зонтально, что позволяет улучшить внешний вид формы. Аналогично, при со- 
здании формы вопросов и ответов вопросы удобно расположить в левой части 
формы, а ответы на них - в правой части. К счастью, на форме можно исполь- 
зовать таблицы, при этом в ячейки таблицы можно помещать целые формы. 
Предположим, например, что на форме содержится многострочное текстовое 
поле ввода, как показано на рис. 3.16, надпись для которого расположена в ниж- 
нем левом углу поля (такое расположение имеет место по умолчанию при поме- 
щении текста и графики в один абзац). 
Сообщение: 
Рис. 3.16. Надпись перед элементом формы, расположенная 
по умолчанию в левом нижнем углу элемента 
Для переноса надписи "Сообщение:" ("Message:") в верхний левый угол элемен- 
та формы поместите надпись и элемент формы в таблицу с двумя столбцами, 
как показано в приведенном ниже коде: 
м 
<table border="0" cellspacing="O" width="100%" id="TextboxTable" 
cellpadding="O height="63"> 
<tr> 
<td width="10%" valign="top" height="63">Coo6meHHe: </td> 
<td width="90%" height="63"> 
<textarea name="TextMessage" rows="5" cols="60"X/textarea> 
</td> 
</tr> 
</table> 
Разделите текст надписи и элемент формы, поместив их в отдельные ячейки 
таблицы. Таким образом, вы получите возможность независимо выравнивать над- 
пись и поле ввода (элемент формы). Вставьте надпись в левый столбец таблицы, 
а поле - в правый столбец. Затем укажите браузеру на необходимость выравнива- 
ния текста в левом столбце по верхнему краю, установив значение атрибута 
vaiign дескриптора <td> равным "top11. После этого задайте значение атрибута 
height обоих дескрипторов <td> равным высоте многострочного тестового поля 
в пикселях. В результате браузер выведет на экран текстовую надпись возле верх- 

него левого угла текстового поля, как показано на рис. 3.17.

Глава 3. HTML-формы 
Сообщение 
Области интересов: 
Операционные системы: 
Г Windows 98 Г Windows ХР Г Windows NT 
П Windows ME Г: Windows 2000 Г Novell Г Unix Г Другая 
Рис. 3.17. Часть формы с надписью, расположенной в верхнем левом углу 
многое/прочного поля ввода, и неупорядоченными флажками 
Помимо возможности выравнивания надписей и элементов формы, таблица мо- 
жет использоваться для визуальной группировки элементов формы. Предполо- 
жим, например, что необходимо выровнять флажки, находящиеся под много- 
строчным полем ввода на рис. 3.14. Поскольку надпись каждого флажка 
представляет собой одну строку текста, надпись и флажок могут находиться в од- 
ной ячейке таблицы. (Если флажок содержит надпись, состоящую из нескольких 
строк текста, флажок и надпись нужно было бы помещать в отдельные ячейки, 
что позволило бы выравнивать флажок желаемым образом относительно его над- 
писи, как ЭТО было сделано С щЩЖНО "Сообщение:" И МНОГОСТРОЧНЫМ ПОЛем 
ввода в предыдущем практикуме.) Если поместить флажки, приведенные на рис. 
13.17, в многострочную таблицу с несколькими столбцами, код которой находит- 
ся ниже, можно расположить флажки, как показано на рис. 3.18. 
<р>Области интересов:<br /> 
<table border="0" cellpadding="O" cellspacing="0" width="100%" 
id="CheckboxTable"> 
<trXtd width="143" align="left" valign="top">OnepaimoHHbie системы:</Ьо> 
<td width="129" align="left" valign="top"> 
<input type="checkbox" name="OS" value="Win98" />Windows 98</td> 
<td width="129" align="left" valign="top"> 
<input type="checkbox" name="OS" value="WinXP" />Windows XP</td> 
<td width="129" align="left" valign="top"> 
<input type="checkbox" name="OS" value="WinNT" />Windows NT</td> 
<td width="129" align="left" valign="top"> 
<input type="checkbox" name="OS" value="WinME" />Windows ME</td> 
<td width="129" align="left" valign="top"> 
<input type="checkbox" name="OS" value="Win2000" /> 
Windows 2000</td> 
</tr> 
<trXtd width="143" align="left" valign="top">Snbsp;</td> 
<td width="129" align="left" valign="top"> 
<input type="checkbox" name="OS" value="Novell" />Novell</td> 
<td width="129" align="left" valign="top"> 
<input type="checkbox" name="OS" value="Unix" />Unix</td> 
<td width="129" align="left" valign="top"> 
<input type="checkbox" name="OS" value="Other" />Друх>аЖ/Ь6> 
</tr> 
</table>

Глава 3. HTML-формы 163 
Сообщение: 
J 
Области интересов: 
Операционные Г Windows 98 П Windows ХР Г Windows NT Г Windows ME ("Windows 2000 

системы: 
Г Novell Г Unix Г Другая 
Рис. 3.18. Часть формы с выровненными и визуально сгруппированными флажками 
Обратите внимание, что таблицы используются для выравнивания элементов 
формы, но сами остаются невидимыми. При создании формы иногда бывает 
удобно установить значение атрибута border дескриптора <tabie> формы рав- 
ным 1, что позволит увидеть ячейки таблицы. Затем, после выполнения вырав- 
нивания элементов формы "сетку" таблицы можно снова отключить, установив 
значение атрибута border равным о. 
Создание клавиши быстрой навигации по форме 
с помощью дескриптора <label> 
Во введении в начале этой главы и предыдущих советах "надпись" возле эле- 
ментов формы ничем не отличалась от любого другого текста на Web-странице. 
Несмотря на то что вы имеете возможность поместить возле элемента формы 
простой текст, который будет служить надписью для элемента, объясняющей на- 
значение текстового поля, переключателя или флажка, посетитель не может ис- 
пользовать буквы в таких надписях для перемещения по форме, установки "га- 
лочки" флажка или выбора переключателя. Для использования текста для 
навигации по форме и выбора элементов формы, каждая текстовая надпись дол- 
жна быть помещена между начальным и конечным дескрипторами метки 
(<labelX/label>). 
ПРАКТИКУМ 
Например, для создания меток для элементов формы, показанной на рис. 3.19, 
поместите текст надписей полей ввода между начальным и конечным дескрипто- 
рами метки (<labelx/label>): 
<pxlabel for="FN" accesskey="M"Xu>M</u>MH:</label> 
<input type="text" name="FirstName" id="FN" size="15" /Xbr /> 
<label for="LN" ассе8вкеу="Ф"Хи>Ф</и>амилия:</1аЬе1> 
<input type="text" name="LastName" id="LN" size="20" /Xbr /> 
<label for="EM" accesskey="E">Aflpec <u>E</u>-mail:</label> 
<input type="text" name="Email" id="EM" size="30" /Xbr /> 
<table border="0" cellspacing="O" width="563" cellpadding="O"> 
<tr> 
<td width="62" valign="top" height="63"> 
<label accesskey="C" .ог="ТМ"Хи>С</и>ообщение:</1аЬе1> </td> 
<td width="501" height="63"> 
<textarea id="TM" name="TextMessage" rows="5" cols="60">' 
</textareaX/td> 
</tr> 
</table>

164 Глава3. HTML-формы 
<Еайл Ораека 8ид Избранное Cgpenc ^пр 
J hftp.//!itml-webdeaign/Chepter03/FigureO3-1 б.Ыгп 
Имя:| 
Фамилия: I 
Адрес E-mail: 
Сообщение 
Отправить 
ш 
Рис. 3.19. Форма с метками и клавишами быстрого перехода 
С каждым дескриптором <iabei> связаны два очень важных атрибута: 
for. Значение атрибута for дескриптора <iabei> должно соответствовать 
значению атрибута id элемента формы, с которым вы хотите связать дан- 
ную надпись. 
accesskey. Клавиша быстрого доступа, которую посетитель может нажать 
для перехода к полю ввода текста (если метка связана с полем ввода), вы- 
бора переключателя (если метка связана с переключателем) и установки 
или снятия флажка (если метка связана с флажком). Для использования 
клавиши быстрого доступа посетитель должен нажать и удерживать клави- 
шу ALT, а затем нажать клавишу, соответствующую значению атрибута 
accesskey. 
Клавиша, соответствующая значению атрибута accesskey, не обязательно 
должна присутствовать в тексте метки (т.е. в тексте, заключенном между началь- 
ным и конечным дескрипторами метки). Тем не менее, чтобы использовать кла- 
вишу быстрого доступа, посетитель должен ее знать. Поэтому, в качестве значе- 
ния атрибута accesskey используется одна из букв, присутствующая в тексте 
метки, и в самой метке подчеркивается соответствующая буква (или цифра), на 
основе чего посетитель может определить клавишу быстрого доступа. Обратите 
внимание, что в приведенном примере для подчеркивания букв, соответствую- 
щих клавишам быстрого доступа, для каждой метки применяются начальный и 
конечный дескрипторы подчеркивания (<ux/u>). Как результат, использование 
меток для навигации или выбора элементов формы сводится к аналогичным дей- 
ствиям, характерным для Windows-приложений. 
Несмотря на то что метки для элементов формы (определенные с помо- 
щью текста, помещенного между начальными и конечным дескрипторами < l a b el > 
< / l a b e l > ) являются частью стандарта HTML 4, их поддерживают только 
браузеры Internet 
Explorer 4.0 (и выше) и Netscape Navigator 6.0 (и выше). Web-браузеры, не 
поддерживающие 
дескрипторы метки, будут выводить на страницу только текст, соответствующий 
метке. Од- 
нако, посетители, пользующиеся браузерами без поддержки меток, не смогут 
использовать кла- 
виши быстрого доступа для навигации по элементам формы и выделения элементов 
формы.

Глава 3. HTML-формы 1 6 5 
Указание Web-браузеру выполнять функцию проверки 
данных формы с помощью атрибута onClick 
В предыдущих советах этой главы было показано, как использовать атрибут 
onSubmit в дескрипторе <form> для указания Web-браузеру на необходимость вы- 
полнения функции проверки данных перед отправкой результатов формы по ад- 
ресу, заданному в атрибуте action формы. К сожалению, при замене стандарт- 
ной кнопки Submit графическим изображением с гиперссылкой на метод 
submit () формы Web-браузер перед передачей результатов формы не будет вы- 
полнять сценарий, заданный в атрибуте onSubmit. 
ПРАКТИКУМ 
Чтобы браузер выполнял сценарий перед передачей результатов формы при ис- 
пользовании графического изображения в качестве кнопки Submit, установите 
значение атрибута onclick в гипперссылке, прикрепленной к изображению, рав- 
ным имени функции проверки данных формы, а не вызову метода submit () 
формы. Затем, если функция проверки определит, что данные формы не содер- 
жат ошибок, сценарий должен запустить метод submit о). В противном случае, 
при возврате функцией проверки значения False, сценарий должен вернуться к 
вводу данных формы, благодаря чему посетитель получит возможность исправить 
ошибку (ошибки) во введенной им информации. Функция проверки должна выг- 
лядеть следу'ющим образом: 
<script language="JavaScript"> 
function validateAndSubmit(Form) 
{ 
//**** Операторы проверки корректности результатов заполнения **•* 
//**** формы, которые устанавливают значение булевой переменной **** 
//**** "FormReselus_Valid" равным TRUE, если введены корректные **** 
//**** данные, и FALSE в противном случае **** 
if (Form_Result_Valid) 
{ 
From.Submit(); 
} 
else 
{ 
//**** Предупредить посетителя о наличии ошибок **** 
return; 
</script> 
(В операторе if переменная Forin_Resuits_vaiid представляет собой всего 
лишь заполнитель, который указывает, что если результаты формы не содержат 
ошибок, выполняется операция передачи результатов формы, в противном случае 
будет выдано предупреждение посетителю и сценарий вернется к вводу данных 
формы.) Атрибут onclick в гиперссылке, прикрепленной к графическому изоб- 
ражению, используемому в качестве кнопки Submit, в свою очередь, будет содер- 
жать ссылку на функцию проверки данных формы, а не на метод submit():

16 6 Глава 3. HTML-формы 
<а href="#" onClick="validateAndSubmit(ExampleForm)/return false"> 
<img src="SubmitButtonGraphic.GIF"X/a> 
(В этом примере ExampleForm представляет собой имя формы, результаты ко- 
торой посетитель пытается передать, а SubmitButtonGraphic.GIF — имя файла 
графического изображения, используемого вместо стандартной кнопки Submit.) 
При использовании на форме стандартных кнопок (а не графических изобра- 
жений) в описании кнопок также можно использовать атрибут onclick, который 
сначала проверяет правильность введенных данных, а затем передает результаты 
заполнения формы. Просто замените стандартную кнопку Submit (созданную с 
помощью дескриптора <input>, значение атрибута type которого равно 
"submit") кнопкой, созданной с помощью следующего кода: 
<input type="button" value="Отправить" 
onClick=="validateAndSubmit(ExampleForm)" 
Передача значений Web-серверу с помощью 
скрытых полей 
Скрытое (hidden) поле представляет собой элемент формы, который, как и пред- 
полагает его название, не видим для человека, заполняющего форму. Скрытые поля 
можно использовать для передачи Web-серверу дополнительных пар имя/значение 
помимо данных, введенных посетителем сайта. Например, следующий HTML-код 
поиволит к ТОМУ, что Web-6Dav3eo визуализирует (ЬООМУ. показанную на оис. 3.20. 

<form name="ExampleForm" 
action="http://NVBizNet2.com/_scripts/_pl/FrmScrpt.CGI" 
method="POST" 
enctype="application/x-www-form-urlencoded"> 
Имя пользователя: 
<input type="text" name="Osername" id="ON" size="20" /Xbr /> 
Пароль: 
<input type="password" name="Password" id="PW" size="20" /Xbr /> 
<pXinput type="button" value="Отправить" 
onclick="validateAndSubmit(ExampleForm)" /> 
<input type="button" value="Сбросить" 
onclick="ResetForm (ExampleForm) " /X/p> 
<input type="hidden" name="LoginAttempts" value="0" /> 
<input type="hidden" name="LoginDateTime" /> 
<input type="hidden" name="ExampleFor" 
value="HTML & Web Design Tips & Techniques" /> 
</form> 
L 
I I R r r . l ' H O , , i n f . , l l . i , H , ' . , . . . h | . . , ^ . l I I 
) 
Зреека йид Избранное Сервис .п[] 
http //html^vebdesign/ChapterO3/ChptO3PaQe151 .ht "~\ 
Имя пользователя: | 
Пароль: 1 
Отправить Сбросить 
Рис. 3.20. Форма ввода имени пользователя и пароля

Глава3. HTML-формы 167 
Обратите внимание, что в приведенном примере атрибуты type трех полей 
ввода в конце описания формы содержат значения "hidden" и не отображаются 
на экране (как показано на рисунке). Несмотря на то что Web-браузер не визуа- 
лизирует скрытые поля, он передает серверу пары имя/значение для всех полей, 
как видимых, так и скрытых (см. рис. 3.21). 
значение скрытого поля можно задать, соответствующим образом установив ат- 
рибут value в дескрипторе < input >, как показано на примере первого и третьего 

скрытых полей в следующем коде: 
<mput type-hidden" name= LoginAttempts" value- 0"> 
<input type="hidden" name="ExampleFor" 
value="HTML & Web Design Tips & Techniques'^ 
HTML & Web Design Tips & Techniques 
Подтверждение приема Web-сервером результатов 
заполнения формы 
Данные формы в виде пар Имя:3начение 
• Usemame:Konrad 
• I.ugiiiAttempt:2 
• Fassword:King 
• ExampleFonHTML & Web Design Tips & Techniques 
. LoEinDatelimerThu Aug 21 0049:51 PDT 2003 
Рис. 3.21. Результаты заполнения формы, переданные Web-серверу после 
ввода "Konrad" в поле Username и "King" в поле Password 
Рис. 3.21. Результаты заполнения формы, переданные Web-серверу после 
ввода "Konrad" в поле Username и "King"в поле Password 
Независимо от того, были присвоены скрытым полям начальные значения 
или нет, скрытым полям можно присваивать значения в JavaScript-сценариях. 
Например, функция vaiidateAndSubmito, выполняемая в приведенном выше 
примере при нажатии кнопки Submit, включает следующие строки: 
ExampleForm.LoginAttempts.value++; 
ExampleForm. LoginDateTime.value = new Date(); 
Первая строка увеличивает на 1 значение скрытого поля LoginAttempts, a 
вторая записывает в скрытое поле LoginDateTime текущее значение даты и вре- 
мени. 
Сокрытие ввода пользователя от просмотра в поле 
ввода пароля 
Поле ввода пароля представляет собой разновидность однострочного поля 
ввода текста. В отличие от скрытых полей (которые были рассмотрены в преды- 
дущем совете), Web-браузер визуализирует поле ввода пароля. Тем не менее, бра-

168 Глава 3. HTML-формы 
узер не отображает на экране вводимый посетителем текст. Все символы теста 
заменяются символами звездочки (*). Поля ввода пароля используются в том 
случае, когда нежелательно, чтобы посторонний человек мог подсмотреть вводи- 
мый посетителем текст. Как правило, поля ввода пароля используются для ввода 
пароля или других кодов безопасности для входа на Web-сайт или регистрации 
под определенным именем учетной записи на Web-сайте. Некоторые сайты, осо- 
бенно обеспокоенные вопросами безопасности, требуют даже ввода имени 
пользователя или имени учетной записи в поле ввода пароля. 
ПРАКТИКУМ 
Для создания поля ввода пароля необходимо поместить в соответствующее место 
HTML-кода дескриптор <input> следующего вида: 
<input type="password" name="Пароль:" id="PW" size="20"> 
Значение атрибута type указывает, что создается поле ввода пароля, а не 
обычное поле ввода текста (для которого, как вы знаете,, значение атрибута type 

равно "text"). Задавая значение атрибута type равным "password" вы говорите 
Web-браузеру скрывать все символы вводимого в поле текста. (Хотя в приведен- 
ном примере значения атрибутов name, id и size установлены, соответственно, 
равными "Пароль:", "PW" и "20", они могут быть любыми.) 
Несмотря на то что Web-браузер скрывает содержимое поля ввода пароля 
от просмотра за счет замены символов текста звездочками (*), он не кодирует 
содержимое 
поля. Таким образом, при передаче данных, введенных в лоле ввода, по 
незащищенному со- 
единению человек с определенными знаниями может перехватить пароль 
(передаваемый в 
виде открытого текста) и использовать, преследуя какие-то неблаговидные цели. 
В главах 10, 11 и 12 вы узнаете, каким образом можно использовать формы 
входа в систему (содержащие поля имени пользователя и пароля) для регистра- 
ции в онлайновых базах данных. Более того, в главе 12 будет рассказано об элек- 

тронной коммерции и об установке защищенного соединения с Web-сервером, а 
также о шифровании результатов заполнения формы (включая данные полей вво- 
да пароля), что защитит их от просмотра посторонними. А сейчас важно пони- 
мать, что поля ввода пароля позволяют скрывать от просмотра данные, вводимые 
посетителем в однострочное поле ввода текста. 
Вставка на форму кнопки общего типа 
В предыдущих советах вы научились помещать на форму кнопки Submit и 
Reset. Поскольку упомянутые кнопки присутствуют практически на всех формах, 
браузеры, которые поддерживают механизм форм, "знают", что должно происхо- 
дит, когда посетитель нажимает любую из этих двух кнопок. Например, Web-бра- 
узеры, поддерживающие формы, при нажатии кнопки Submit будут передавать 
результаты формы по URL-адресу, указанному в атрибуте action дескриптора 
<form> формы (конечно, если вы не изменили поведение кнопки Submit по 
умолчанию, добавив в дескриптор <form> атрибут onSubmit). Аналогично, при 
нажатии кнопки Reset Web-браузер очищает все данные, введенные в объекты

Глава 3. HTML-формы 
формы, и возвращает их в исходное состояние, если только вы не изменили по- 
ведение кнопки Reset по умолчанию, указав в дескрипторе <form> атрибут 
onReset. 
Для создания на форме кнопки Reset или Submit вставьте дескриптор <input>,' 
значение атрибута type которого равно соответствующему значению (т.е. 
type="reset" для кнопки Reset и type="submit" для кнопки Submit). Помимо со- 
здания кнопок Reset и Submit, дескриптор <input> можно использовать для со- 
здания кнопки третьего типа, функция которой заранее не определена. Как пра- 
вило, кнопки третьего типа применяются для запуска в Web-браузере сценариев. 
ПРАКТИКУМ 
Памятуя о синтаксисе создания кнопок Reset и Submit, для вас не будет сюрп- 
ризом, что для вставки на форму кнопки "общего" типа необходимо вставить в 
соответствующем месте HTML-кода между начальным и конечным дескриптора- 
ми (<formx/form>) следующую строку: 
<input type="button" value="Надпись на кнопке" onClick="scriptName"> 
, Значение "button" атрибута type указывает Web-браузеру на необходимость 
создания на форме кнопки. После рисования кнопки браузер использует текст, 
содержащийся в атрибуте value дескриптора <input> в качестве надписи на 
кнопке. (Необходимо убедиться, чтобы значение, присвоенное атрибуту value, го- 
ворило о назначении кнопки.) При нажатии кнопки посетителем Web-браузер вы- 
полнит сценарий, заданный значением атрибута onclick дескриптора <input>. 
Кнопки такого типа можно использовать для выполнения сценариев, вычис- 
ляющих сумму значений других элементов формы, вывода на экран сообщений, 
загрузки в окно или фрейм новой Web-страницы или вставки в список выбора 
нового элемента. Таким образом, функция кнопки общего назначения ограниче- 
на только вашим воображением и методами используемого вами сценарного языка. 
Блокирование и разблокирование элементов 
формы "на лету" 
Иногда элементы формы могут носить взаимоисключающий характер. Напри- 
мер, если вы зададите посетителю вопрос: "Состоите ли вы в браке?" и в каче- 
стве ответа на этот вопрос посетитель выберет переключатель нет, ему уже не 
нужно будет вводить имя супруга в поле spouse. Аналогично, если на форме на- 
ходится группа флажков, в которой посетитель может выбрать любые устраиваю- 
щие еГО ОПЦИИ, И ИМ был ВЫбраН флаЖОК Наподобие "Ничего" ИЛИ "Ничего 
перечисленного", он уже не должен выбирать другие флажки в группе. Каждый 
элемент формы имеет атрибут disabled, который можно использовать для зап- 
рещения пользователю изменять элемент. 
Некоторые устаревшие браузеры не поддерживают атрибут d i s a b l e d . Та- 
ким образом, проверку правильности ввода в форму данных должна осуществлять 
функция 
проверки, даже если имеется сценарий, который устанавливает атрибут d i s a b l 
e d для со- 
ответствующих полей формы.

170 Глава 3. HTML-формы 
ПРАКТИКУМ 
Предположим, например, что форма, показанная на рис. 3.22, используется для 
запроса у посетителя его семейного положения. За счет выполнения следующей 
JavaScript-функции можно блокировать ввод в поле имени второй половины и 
запретить посетителю изменять его содержимое или даже устанавливать на него 
курсор, т.е. перемещать фокус (при этом само поле затеняется серым цветом). 
function disableSpouseName(Form, status) 
if (status) Form.SpouseName.value = "Введите имя супруга(и)"; 
Form.SpouseName.disabled = status; 
return; 
файл QpesKa §ид Избранное Сервис ^прав 
*• • •»"• Л J а йл j -yj>В" 
Адрес j g ] htip://htm!^vebdesign/ChapterO3/Ftgure03-l В him 
ФИО: I 
Состоите ли вы в браке? с Состою <" Не состою 
Имя супругой). |Введите имя супруга(и) 
Отправить Очистить 1 
Рис. 3.22. Форма с переключателями, которые управляют 
состоянием атрибута disabled поля ввода текста 
Для указания Web-браузеру на необходимость запуска приведенной выше фун- 
кции при выборе переключателя Maritaistatus введите следующий код: 
<р>Состоите ли вы в браке? 
<input type="radio" 
name= "MaritalStatus" value="Married" 
onclick="disableSpouseName(ExampleForm, false)" />Состою 
<input type="radio" name="MaritalStatus" value="Single" 
onclick="disableSpouseName(ExampleForm, true)" />He состокК/р> 
Атрибут onclick дескриптора <input> для переключателя заставляет Web-бра- 
узер ВЫПОЛНИТЬ фуНКЦИЮ disableSpuseName() при выборе ЗЮО переключателя. 
Передавая функции disableSpuseNameо значение False или True, Web-брау- 
зер блокирует или разблокирует поле SpouseName (на рис. 3.22 оно обозначе- 
но как "Имя супруга (и) : " ) . Так, например, если посетитель выберет пере- 
ключатель "Состою в браке", функции disableSpuseName () будет передано 
значение False. Функция, со своей стороны, установит значение атрибута 
disabled элемента SpouseName формы равным False, что сделает элемент актив- 
ным (разблокирует его) и посетитель сможет ввести в поле имя своей половины. 
В противном случае, если посетитель выберет переключатель "Одинок", Web-бра- 
узер Передаст функции disableSpuseName () Значение True И функция установит 
значение атрибута disabled элемента SpouseName формы равным True, что заб- 
локирует поле и не позволит посетителю изменить его содержимое.

Глава 3. HTML-формы 171 
Вы можете заблокировать любой элемент формы, включая кнопки. Например, 
при необходимости начальной блокировки кнопки Submit нужно ввести в код 
страницы следующую строку: 
<input disabled type="Submit" name="Submit" value="Отправить"> 
Затем, для разблокирования кнопки Submit при заполнении посетителем по- 
лей формы вызовите JavaScript-функцию, включающую следующую строку: 
FormName.Submit.disabled=false; 
Кроме того, вы имеете возможность заблокировать любой элемент формы с 
помощью следующей строки JavaScript-кода: 
FormName.ElementName.disabled=true; 
Для разблокирования элемента формы в приведенной выше строке установите 
Значение атрибута disabled равным False. 
Если для изменения состояния атрибута disable элемента формы ис- 
пользуется JavaScript-код, стандартная функция Web-браузера, сбрасывающая 
состояние 
элементов формы, не будет возвращать элемент в его исходное состояние. Поэтому, 
если 
вы заблокировали элемент, который в исходном состоянии был активен, необходимо 
вос- 
пользоваться атрибутом on Reset дескриптора <form> формы и вызвать функцию, 
которая 
при нажатии посетителем кнопки Reset будет возвращать значение атрибута 
disabled эле- 
мента формы в его исходное состояние.

В этой главе 
Применение нескольких правил каскадных списков стилей 
к одному селектору 
Выбор типа шрифта с помощью свойства font-family 
I Задание размера текста с помощью свойства font-size 
Создание перекрывающегося текста 
I Выравнивание текста на Web-странице 
I Установка полей и высоты строк 
Вывод текста в колонках 
Работа с границами 
I Создание абзацного отступа и работа с интервалами между 
буквами, словами и строками 
Использование в тексте начальных заглавных букв 
• Настройка внешнего вида гиперссылок 
I Создание эффекта отбрасывания тени- 
I Использование графических границ 
Расположение фоновых изображений и "водяных знаков" 
I Плавающие изображения и текст 
I Настройка внешнего вида списков 
Создание эффектов текста и изображений с помощью фильтров 
I Выравнивание надписей с элементами формы и добавление 
I цветов в форму 
. Вывод на странице галереи миниатюр с заголовками 
I Управление курсором 
I Расположение элементов Web-страницы по слоям 
I Передача списка стилей через функцию проверки 
X

Глава 4. Каскадные списки стилей 
| д н а из задач, с которой вы постоянно встречаетесь при создании Web-стра- 
ниц, — расположение элементов в требуемых местах страницы. Web-страни- 
ца не имеет внутренней системы координат, по отношению к которой можно 
было бы располагать текст, изображения и другие объекты. В главе 2 книги было 
рассказано об использовании HTML-таблиц для создания ячеек, в которых могут 
располагаться элементы Web-страницы. К сожалению, применение невидимых 
таблиц для обеспечения плавильного расположения элементов за счет добавления 
дополнительных дескрипторов (по крайней мере, по два для каждой строки и 
столбца таблицы) существенно усложняет HTML-код страницы. Более того, скры- 
тые таблицы усложняют процесс работы со страницей. Предположим, например, 
что в определенное место Web-страницы необходимо поместить изображение или 
текст. Чтобы добавить в таблицу новую ячейку в то место, куда должен быть поме- 

щен новый элемент, во многих случаях требуется перекодировать всю или часть 
таблицы. 
Каскадный список стилей {Cascading Style Sheet, CSS), на который иногда ссы- 
лаются как на вложенную таблицу стилей, представляет собой набор специфика- 
ций (называемых правилами), которые позволяют получить полный контроль над 
расположением элементов на Web-странице и внешним видом ее содержимого. 
Правила каскадных списков стилей могут использоваться для выбора цвета фона, 
графических изображений или "водяных знаков", которые будут выводиться под 
содержимым страницы. Кроме того, свойство position каскадных списков сти- 
лей исключает необходимость использования скрытых таблиц для расположения 
элементов страницы и позволяет указывать Web-браузеру, где располагать каждый 
конкретный элемент. И, наконец, правила каскадных списков стилей позволяют 
указывать тип и выбирать размер, цвет и вид текста. Помимо использования 
обычного, полужирного и курсивного начертаний, каскадные списки стилей 
дают возможность создавать затененный текст или текст с другими специальны- 
ми эффектами без преобразования символьных данных в графические изображе- 
ния, загрузка которых производится гораздо медленнее. 
Несмотря на то что каскадный список стилей можно добавить в Web-доку- 
мент несколькими различными способами, наверное, самый простой способ — 
поместить правила списка стилей непосредственно в заголовок Web-страницы, 
как показано на примере следующего кода: 
<html> 
<head> 
<style type="text/css"> 
. . . правила списка стилей ... 
</style> 
</head> 
<body> 
... Содержимое Web-страницы ... 
</body> 
</html> 
Несмотря на длинное название, "каскадный список стилей" представляет со- 
бой всего лишь набор операторов между начальным и конечным дескрипторами 
стиля (<styiex/styie>), расположенными перед началом HTML-кода страни-

174 Глава 4. Каскадные списки стилей 
цы. При считывании HTML-документа браузер применяет правила (т.е. операто- 
ры форматирования и позиционирования), приведенные в списке стилей, к эле- 
ментам Web-страницы, описанным в разделе <body>. На рис. 4.1 показан про- 
стой каскадный список стилей с двумя правилами, которые указывают 
Web-браузеру, каким образом выводить на экран два элемента, описанные в деск- 
рипторе <body> Web-страницы. 
t n i i i n i l M 111 - I.>ICI 
Псща 
IDOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.9 Strict//EN" 
"http://Нин.иЗ.огд/TR/xhtmli/DTD/xhtmli-strict.dtd"> 
html xmlns="http://ими.нЗ.org/1999/xhtml"> 
head> 
<Ш1е>Внедренный каскадный список стипей (CSS)</title> 
<style type="text/css"> 
hi {color:blue; font-size :40px: font-family:Verdana) 
p (color:uhite; background:green; font-family-.heluetica; text-indent 
</style> 
/head) 
body> 
<h1>Текст заголовка уровня 1</h1> 
<p>C использованием касканых списков стилей можно независимо изменять 
внешний вид заголовков и текста на ЫеЬ-странице.</р> 
/body> 
/htnl> 
У , •: > • •• -••: : - I . :±j 
Рис. 4.1. Web-страница с каскадным списком стилей 
Помимо позиционирования элементов страницы и форматирования текста, 
правила каскадных списков стилей позволяют управлять расстоянием между сим- 
волами, словами, строками и абзацами. Более того, правила списков стилей 
дают возможность установить поля Web-страницы, ширину границы вокруг части 
текста или других элементов и управлять выравниванием "плавающего" текста и 
объектов (например, графических изображений), внедренных в текст. Для приме- 
ра на рис. 4.2 показано, каким образом браузер Internet Explorer реализует пра- 

вила каскадного списка стилей, которые выравнивают плавающее изображение 
по левому краю окружающего его текста: 
<head> 
<style type="text/css"> 
<!-- 
р {margin-left:5em; margin-right:5em; text-align:justify} 
img {float:left; border-width:25px; border-color:white} 
--> 
</style> 
</head> 
Обратите внимание, что правила каскадного списка стилей в этом примере 
создают поля между текстом и левой и правой границами Web-страницы и со- 
здают границу белого цвета между текстом и сторонами изображения. 
Когда в конце 1996 года появились каскадные списки стилей, они существен- 
но обогатили и облегчили процесс разработки Web-страниц, предоставляя дизай- 
нерам Web-страниц следующие возможности:

Глава 4. Каскадные списки стилей 175 
Q ров к о .ип Иэбронно 
Дапас|й hnp//himl-webdesJgn/ChaplerOfl/Figura04-02.hijn 
Although you may not think of it as such, text is actually an element on 
the Web page. Normally, you put text in into paragraphs using the start 
and end paragraph tags <pxJp>. The <p> tag is actually a container 
tag because it has a start and an end tag. However, you can also think 
of text as going into a "paragraph" container. As such, I can position 
text where I want it to go on the Web page by positioning the 
paragraph container. Moving the container also moves it contents. 
You might also need to have both an image and 
text on the same page. Usually, the Web browser 
will put an image on the page, and continue any 
text at the lower right-hand corner of the image - 
thus leaving a lot of blank space along the right 
or left-hand side of the image. By "floating" the 
image left or right, you can have the Web 
browser write text all along the side of the 
image as shown here. 
Notice also that the text is indented away from the sides of the Web 
page-yet another thing CSS lets you do easily. 
Рис. 4.2. Web-страница с плавающим рисунком текстом с полями 
• Четкий контроль над расположением, шрифтами, цветами, фоном и други- 
ми типографическими эффектами. 
• Способ изменения внешнего вида и форматирования неограниченного ко- 
личества Web-страниц при изменении всего одного элемента — каскадного 
списка стилей. 
• Возможность создания зрелищных страниц, использующих меньший 
объем кода, что, в свою очередь, позволяет сократить объемы страниц и 
быстрее загружать и отображать их в Web-браузерах. 
Несмотря на довольно-таки холодный прием (в качестве конкурента широко 
используемого в то время динамического HTML —DHTML), каскадные списки 
стилей набирают все большую и большую силу благодаря постоянно углубляю- 
щейся поддержке спецификаций каскадных списков стилей Web-браузерами ком- 
паний Microsoft и Netscape. 
Разделение содержимого и внешнего вида 
Язык HTML (как это первоначально предполагалось) не был предназначен 
для управления внешним видом Web-страниц. Он задумывался в качестве сред- 
ства, которое бы позволило авторам указать элемент, который должен находиться 
на странице, и оставить Web-браузеру решать, каким образом вывести этот эле- 
мент на экран. Если вы помните, язык HTML был разработан для того, чтобы 
каждый человек, имеющий компьютер с Web-браузером и соединением с сетью 
Internet, мог просмотреть любой HTML-документ, независимо от возможностей 
видеокарты или разрешения монитора. 
Тем не менее, с расширением содержимого Web-страниц и включением в них 
многоцветного текста различного типа и размера, графических изображений,

1 76 Глава 4. Каскадные списки стилей 
картинок и анимации, дизайнеры все менее и менее желали, чтобы Web-браузе- 
ры ограничивали внешний вид Web-страниц. Перед разработкой каскадных спис- 
ков стилей для обеспечения правильного расположения элементов на странице 
дизайнерам приходилось использовать HTML-таблицы и вставлять прозрачные 
(разделительные) изображения в формате GIF для создания необходимых полей 
и интервалов между объектами на странице. Кроме того, с помощью HTML-дес- 
крипторов форматирования и атрибутов дескрипторов <font> и <body> Web-ди- 
зайнеры получали определенный контроль над внешним видом текста страницы 
и фоном. 
С другой стороны, каскадные списки стилей для управления содержимым 
Web-страницы позволяют записывать инструкции выравнивания и форматирова- 
ния в раздел заголовка страницы или во внешний по отношению к HTML-коду 
файл. Более того, правила каскадных списков стилей представляют собой про- 
стые текстовые операторы, которые дают возможность управлять положением и 
форматом одного или нескольких элементов без использования таблиц и графи- 
ческих изображений. Таким образом, разделение содержимого страницы и 
средств обеспечения ее внешнего вида позволяет упростить Web-страницы и об- 
легчить их сопровождение и обновление. Представьте себе, например, что необ- 
ходимо изменить тип шрифта, используемого на многих страницах Web-сайта. 
Без применения механизма каскадных списков стилей пришлось бы изменять 
(или добавлять) один или несколько дескрипторов <font> на каждую страницу. 
Поместив указание о выборе типа шрифта в каскадный список стилей, на кото- 
рый ссылаются все странице сайта, для изменения шрифта на всех страницах до- 
статочно будет изменить одно правило списка стилей. 
Создание списка стилей 
Для создания списка стилей напишите одно или несколько правил между на- 
чальным и конечным дескрипторами (<styiex/styie>) в разделе заголовка 
Web-страницы (в разделе <head>). (В этой главе будет рассказано, каким образом 
можно создавать каскадные списки стилей в форме внешних документов.) От- 
кройте свой любимый текстовый редактор (например, Блокнот) и введите следу- 
ющий HTML-код: 
<html> 
<head> 
<Ъ1'Ые>Внедреннь1Й каскадный список стилей (CSS) </title> 
<style type="text/ess"> 
hi {color:blue; font-size :40px; font-family:verdana} 
p {color:white; background: green; font-family-.helvetica; text-indent :2cm} 
</sty!e> 
</head> 
<body> 
<Ы>Текст заголовка уровня 1</Ы> 
<p>C использованием касканых списков стилей можно независимо изменять 
внешний вид заголовков и текста на Web-странице.</р> 
</body> 
</html>

Глава 4. Каскадные списки стилей 
В приведенном примере код между начальным и конечным дескрипторами 
стиля (<styiex/styie>) описывает каскадный список стилей. Пока что давайте 
не будем останавливаться на отдельных элементах списка стилей (называемых 
правилами) — их синтаксис будет рассмотрен чуть ниже. Сохраните набранный 
код Web-страницы в PJTML-файле (например, в файле с именем css_Testi.htm), 
а затем откройте его в Web-браузере. На экране появится страница, показанная 
на рис. 4.3. 
Текст заголовка уровня 1 
С использованием касканых списков стилей можно независимо изменять 
внешнт"! вид заголовков и текста на Web-странице. 
Рис. 4.3. Web-страница с каскадным списком стилей, который форматирует 
текст заголовка и абзаца 
Терминология каскадных списков стилей 
Список стилей содержит одно или несколько правил. Правило (rule) каскад- 
ного списка стилей представляет собой инструкцию для Web-браузера по форма- 
тированию или позиционированию HTML-элемента определенного типа. Спи- 
сок стилей в предыдущем примере содержит два правила. Первое правило 
указывает Web-браузеру, что текст, заключенный между начальным и конечным 
дескрипторами заголовка уровня 1 (<ых/ы>), должен выводится на экран 
шрифтом Verdana синего цвета и размера 40 пикселей: 
hi {colorrblue; font-size:40px; font-family:verdana} 
Первое правило списка стилей заставляет Web-браузер для первой строки тек- 
ста, заключенного между начальным и конечным дескрипторами абзаца (<р> 
</р>), ввести абзацный отступ два сантиметра и вывести его на экран шрифтом 
Helvetica белого цвета на зеленом фоне: 
р {color:white; background:green; font-family:Helvetica; text-indent:2cm} 
Следующее простое правило списка стилей содержит "селектор" (hi), который 
указывает, к какому HTML-элементу должно применятся данное правило, выво- 
дящее элемент на экран синим цветом: 
hi {color:blue} 
Оператор каскадного списка стилей всегда имеет вид селектор {правило}. В 
фигурных скобках может размещаться одно или несколько правил, при этом пра- 
вила разделяются с помощью точки с запятой. Приведенное выше правило ука- 
зывает Web-браузеру выводить текст, который в HTML-коде находится между на- 
чальным и конечным дескрипторами заголовка уровня 1 (<hix/hi>), синим 
цветом. Селектор (в приведенном примере hi) представляет собой HTML-деск- 
риптор, к которому Web-браузер должен примерять правило списка стилей; 
объявление (color:blue) — это инструкция позиционирования или форматирова-

178 Глава 4. Каскадные списки стилей 
ния, которую Web-браузер должен применить. Объявление, как и правило, состо- 
ит из двух частей: свойства (например, color) и значения (blue). 
Как видно из двух правил, содержащихся в приведенном выше примере, 
объявления с помощью скобок за селектором можно объединять в группу - пра- 
вило каскадного списка стилей. При этом отдельные объявления разделяются 
точкой с запятой. Так, например, на рис. 4.4 рассмотрены отдельные составляю- 
щие правила каскадного списка стилей, используемого для вывода на экран стра- 
ницы, показанной на рис. 4.3. 
Свойство Свойство Свойство 
Селектор Значение оНЭЧсНИс Значение 
hi {color:blue; font-size:40px; font-family:verdana} 
Объявление 
Левая фигурная скобка Правило Правая фигурная скобка 
Рис. 4.4. Правило каскадного списка стилей с одном селектором и тремя 
объявлениями 
В качестве селектора можно использовать любой HTML-дескриптор, а одно 
правило может содержать несколько селекторов. Например, чтобы Web-браузер 
применял одно и то же правило к заголовкам уровня 2, тексту абзаца и неупоря- 
доченного списка необходимо написать следующее правило: 
h2, p, ul {color:green; font-family:arial} 
Это правило указывает Web-браузеру выводить на экран заголовки уровня 2, 
текст абзаца и неупорядоченного списка шрифтом Arial зеленого цвета. Обратите 
внимание, что в качестве селектора могут использоваться совершенно любые 
HTML-дескрипторы. Таким образом, правила каскадных списков стилей могут 
применяться к изображениям (селектор img) и таблицам (селектор table). 
Например, запустите свой любимый текстовый редактор и наберите следую- 
щий HTML-код: 
<html> 
<head> 
<title>CSS-npaBt«io, применяемое к таблице</Ъ1Ъ1е> 
<style type="text/css"> 
table {background:green; color:white; font-size:20px; 
position:absolute; left:150px; top:200px} 
</style> 
</head> 
<body> 
<п1>Таблица с текстом белого цвета и фоном зеленого цвета</Ы> 
<table border="5"> 
<tr> 
<td>CTpoica 1, столбец K/td> 
<td>CTpoxa 1, столбец 2</td> 
</tr>

Глава 4. Каскадные списки стилей 179 
<tr> 
<td>CTpoKa 2, 
<Ъс1>Строка 2, 
</tr> 
</table> 
</body> 
</html> 
столбец 
столбец 
K/td> 
2</td> 
Как уже известно из вводной части этой главы, код между начальным и ко- 
нечным дескрипторами <styiex/styie> описывает правила каскадного списка 
стилей. Селектор table указывает браузеру применять правило списка стилей к 
содержащимся на странице таблицам. Поэтому в приведенном примере будет со- 
здана таблица с зеленым фоном и шрифтом белого цвета размером 20 пикселей. 
Более того, Web-браузер поместит таблицу на расстоянии 150 пикселей правее 
левой границы и 200 пикселей ниже верхней границы Web-страницы. Сохраните 
набранный код в HTML-файле (например, css__Test2.htm) и откройте HTML- 
документ в Web-браузере. На экран будет выведена страница, похожая на пока- 
занную на рис. 4.5. 
., Файл Правка Вид Избранное Сервис Справка • 
.^ - JJJI Sii^' З^' 
3 http://htmkv8bdesign/ChapterO4/Figure04-05 htm 
Таблица с текстом белого цвета и фоном 
зеленого цвета 
Строка 1, столбец 1;Строка 1, столбец 2] 
Строка 2. столбец 11 Строка 2, столбец 21 
Рис. 4.5. Web-страница с каскадным списком стилей, форматирующим таблицу 
Наследование 
При добавлении текстовых элементов на Web-страницу часто один элемент 
вставляется в другой. Например, при выделении текста полужирным шрифтом, 
как в случае с текстом "полужирный текст" в приведенном ниже примере, фак- 
тически элемент полужирного шрифта вставляется в элемент абзаца: 
<р>Вы вставляете один элемент в другой всегда, когда помещаете 
текст, находящийся в пределах одного набора контейнерных 
дескрипторов, в другой набор начального и конечного 
дескрипторов. Например, следующий далее 
<Ь>полужирный текст</Ь> представляет собой полужирный 
элемент, вставленный в элемент параграфа.</р> 
При форматировании Web-браузером вставленного элемента сначала он при- 
меняет инструкции форматирования, установленные для внешнего элемента, а 
затем для внутреннего элемента (если соответствующие правила определены).

Глава 4. Каскадные списки стилей 
В терминологии.каскадных списков стилей элемент, содержащийся в другом 
элементе, называется дочерним {child), а внешний элемент — родительским 
(parent). Таким образом, в предыдущем примере текст, окружающий элемент по- 
лужирного текста (<ь>полужирный текст</ь>), является родительским, а сам эле- 
мент "полужирный текст" — дочерним. При включении одного типа элемента 
страницы в другой тип Web-браузер применяет правила каскадного списка роди- 
тельского (т.е. внешнего) элемента стилей и к дочернему (т.е. внутреннему) эле- 

менту. 
Предположим, например, что имеется каскадный список стилей со следую- 
щими правилами: 
р {color:blue} 
Ь {color:red} 
При наличии на Web-странице следующего HTML-кода Web-браузер выведет 
На ЭКран текст "Весь текст" СИНИМ цветом И текст "полужирного начертания 
будет красным -- включая и полужирный курсив" — красным цветом: 
<р>Весь текст <Ь>полужирного начертания будет красным -- включая и 
полужирный <±>курсив</1>.</ЬХ/р> 
Элемент полужирного текста (т.е. текст, заключенный между начальным и ко- 
нечным дескрипторами полужирного текста) является дочерним элементом тек- 
ста абзаца. В свою очередь, элемент курсивного текста — это дочерний элемент 
элемента полужирного текста, поскольку начальный и конечный дескрипторы 
курсивного текста находятся между начальным и конечным дескрипторами полу- 
жирного текста. Так как в приведенном примере список стилей не содержит пра- 
вила для элемента курсивного текста, Web-браузер будет применять к нему как к 
дочернему элементу правило его родительного элемента, т.е. правило для селек- 
тора ь. Таким образом, курсивный текст будет выводиться на экран шрифтом 
красного цвета. 
Если бы каскадный список стилей в приведенном примере содержал правило 
только для элемента абзаца (р), весь текст выводился бы шрифтом синего цвета. 
Во-первых, отношение родительский элемент/дочерний элемент между элемен- 
том абзаца и элементом полужирного текста диктовал бы, чтобы элемент полу- 
жирного текста (дочерний элемент) наследовал правило элемента абзаца (роди- 
тельного элемента) — "выводить текст шрифтом синего цвета". Затем отношение 
родительский элемент/дочерний элемент между элементом полужирного текста 
(родительский элемент) и элементом курсивного текста (дочерний элемент) при- 
вело бы к тому, что элемент курсивного текста наследовал бы правило своего ро- 
дительного элемента — элемента полужирного текста. 
Добавление на Web-страницу каскадного списка стилей 
Чтобы Web-браузер смог применить правила каскадного списка стилей для 
форматирования и позиционирования элементов на Web-странице, правила 
списка стилей должны быть включены в HTML-код страницы. Для вставки сти- 
лей каскадного списка стилей на Web-страницу можно пользоваться четырьмя 
методами:

Глава 4. Каскадные списки стилей 
Внедрить список стилей на страницу. 
• Связать страницу с внешним списком стилей. 
• Импортировать список стилей. 
• Включить стили непосредственно в HTML-дескрипторы. 
При внедрении списка стилей на Web-страницу браузер будет применять оп- 
ределенные в списке правила только к элементам данной страницы. Поэтому, 
если правила списка стилей уникальны для данной конкретной страницы, спи- 
сок можно внедрить в раздел заголовка Web-страницы. Если же правила одного 
и того же списка стилей применяются для двух и большего количества страниц, 
каскадный список стилей лучше сохранить во внешнем файле (предпочтительно 
с расширением .ess) и связывать или импортировать внешний список стилей, 
как будет показано в последующих разделах этой главы. 
Внедрение каскадного списка стилей 
При внедрении каскадного списка стилей его правила вставляются между на- 
чальным и конечным дескрипторами стиля (<styiex/styie>) в разделе заго- 
ловка Web-страницы: 
<head> 
<title>BHenpeHHbiii каскадный список стилей (CSS) </title> 
<style type="text/ess"> 
<!--
hi {oolor:blue; font-size:40px; font-family-.verdana} 
p {color-.white; background:green; font-family:Helvetica; 
text-indent :2cm} 
—>
</style> 
</head> 
Атрибут type дескриптора <styie> указывает Web-браузеру тип приведенного 
списка стилей. 
Как правило, все браузеры, не поддерживающие каскадные списки стилей, 
игнорируют код, содержащийся между начальным и конечным дескрипторами 
стиля, если значение атрибута type установлено равным "text/ess". К сожале- 
нию, некоторые устаревшие браузеры не распознают дескрипторы стиля. Несмотря 
на то что такие браузеры будут игнорировать HTML-дескрипторы, которых они не 
понимают, они будут выводить содержимое списков стилей на страницу в виде тек- 
ста (вместо применения правил списка к элементам страниц). Чтобы предотвратить 
вывод на экран содержимого каскадных списков стилей в старых браузерах, необхо- 

димо заключить правила списков стилей в блок HTML-комментариев (< ! >). 
Web-браузеры, поддерживающие списки стилей, будут игнорировать дескрипторы 
комментариев и применять содержащиеся в списках правила. 
Связывание с внешним списком стилей 
Внешние каскадные списки стилей идеальны для случаев, когда одни и те же 
правила применяются к элементам, находящимся на двух или большем количе- 
стве Web-страниц. Фактически при связывании всех страниц Web-сайта с вне-

1 8 2 Глава 4. Каскадные списки стилей 
шним списком стилей внешний вид всех страниц сайта можно изменить путем 
изменения правил, содержащихся в одном файле. Более того, большинство Web- 
браузеров кэшируют внешние списки стилей, что исключает задержку в выводе 
на экран страниц при загрузке одного и того же файла каскадного списка стилей. 
Как предполагает само имя метода, для связывания HTML-документа с вне- 
шним списком стилей используется дескриптор <iink>. Вместо ввода правил 
списка стилей, в заголовок каждой Web-страницы вводится ссылка на файл спис- 
ка стилей. После этого при изменении в файле списка стилей такого свойства, 
как, например, типа шрифта, его размера или цвета, все изменения будут сразу 
же отражаться на всех Web-страницах. 
Для связывания Web-страницы с внешним каскадным списком стилей необхо- 
димо поместить в заголовок страницы дескриптор <iink> следующего вида: 
<head> 
<title>CBH3bmaHHe с каскадным списком стилей (CSS)</title> 
<link rel=stylesheet href="styles.ess" type="text/css">- 
</head> 
Обратите внимание, что дескриптор <iink> не нужно помещать между на- 
чальным и конечным дескрипторами (<styiex/styie>). В приведенном приме- 
ре дескриптор <iink> указывает Web-браузеру на необходимость использования 
правил каскадного списка стилей, которые содержатся в файле styles.ess. Ат- 
рибут type говорит о том, что в тестовом файле содержатся данные списка сти- 
лей, а атрибут href указывает имя файла и, при необходимости, путь к файлу, 
содержащему объявления каскадного списка стилей. Если Web-браузер не сможет 
найти файл внешнего списка стилей (указанный в атрибуте href дескриптора 
<iink>), для вывода элементов страницы на экран будет использоваться правила, 
установленные в Web-браузере по умолчанию. 
Помимо атрибута type, который может использоваться для предотвращения 
загрузки Web-браузером типов каскадных списков стилей, которые он не поддер- 
живает, можно указать атрибут media, задающий среду, к которой применяются 
содержащиеся в файле правила. Считывая значение атрибута media, Web-браузер 
может выборочно загружать только те файлы каскадных списков стилей, которые 
применимы к данной конкретной среде работы браузера. Например, при зада- 
нии следующего дескриптора <iink> Web-браузер может не загружать файлы 
списков стилей, применимых для "tv" (т.е. телевидения) при выводе на экран 
обычных HTML-документов: 
<link rel=stylesheet href«"WebTv.ess" type="text/css media="tv"> 
Допустимые значения атрибута media перечислены ниже: 
all Для всех устройств. 
aural Для синтезаторов речи. 
braille Для вывода на тактильных устройствах. 
embossed Для принтеров брайлевской печати. 
handheld Для таких малых устройств, как, например, PDA (которые, как правило, 
имеют монохромные дисплеи, поддерживают растровые изображения и 
имеют достаточно ограниченную пропускную способность).

Глава 4. Каскадные списки стилей 
print Для вывода на принтеры. 
projection Для вывода на проекторы. 
screen Для вывода на компьютерный экран без разбивки на страницы 
(по умолчанию). 
tty Для телетайпных устройств (использующих шрифт с фиксирован- 
ным углом наклона). 
tv Для телевизионных экранов. 
Во внешнем файле списка стилей (например, style.ess) правила должны 
определяться следующим образом: 
hi {colorrblue; font-size:40px; font-familyiverdana} 
р {color:white; background:green; font-family:helvetica; 
text-indent:lem} 
body {background:#ADD8E6; color:maroon) 
Обратите внимание на отсутствие во внешнем каскадном списке стилей каких 
бы то ни было HTML-дескрипторов. Во внешнем, файле списка стилей должны 
содержаться только правила. Таким образом, внешний каскадный список стилей 
содержит те же правила, что и внутренний (т.е. внедренный) список. Тем не ме- 
нее, в файле правила списка стилей не заключаются между начальным и конеч- 
ным дескрипторами стиля и не содержат HTML-дескрипторов. 
Импортирование внешнего списка стилей 
Импортирование внешнего каскадного списка стилей напоминает связывание, 
которое было рассмотрено в предыдущем разделе. Разница заключается в том, 
что импортирование можно совмещать с другими методами, в то время как свя- 
зывание может использоваться только само по себе. Например, несмотря на то, 
что заголовок Web-страницы в предыдущем примере может содержать несколько 
дескрипторов <iink> (для связывания с несколькими файлам каскадных списков 
стилей), он не может содержать внедренные правила. Как видно из следующего 
примера, заголовок Web-страницы содержит не только оператор import, но и 
внедренные правила списка стилей для заголовков уровня 2 и основного текста 
страницы: 
<head> 
<tiРеимпортированный каскадный список стилей (CSS) </title> 
<style type="text/ess"> 
@importurl (styles, ess) ; 
h2 {color:purple; font-size:30px; font-family:helvetica} 
body {color:black} 
—-> 
</style> 
</head> 
В приведенном примере оператор @ import указывает Web-браузеру использо- 
вать правила списка стилей, извлекаемые из файла style.ess. Кроме того, до- 
бавляются внедренные правила, которые описаны под оператором @import. 
(Если заголовок страницы содержит и оператор @ import, и внедренные правила,

Глава 4. Каскадные списки стилей 
оператор @ import должен находиться перед внедренными правилами каскадного 
списка стилей.) Если импортированные и внедренные правила списков стилей 
конфликтуют между собой, применяются внедренные правила. Например, файл 
style.ess из приведенного выше примера включает следующее правило: 
body {background:#ADD8E6; color:maroon} 
В этом случае внедренное правило для элемента body заменяет объявление 
цвета текста и Web-браузер выведет на экран текст черного цвета, а не красно- 
коричневого. I 
В отличие от связанных внешних файлов каскадных списков стилей, которые 
браузер может загружать или не загружать на основании значений атрибутов 
type или media дескриптора <iink>, Web-браузер должен загружать все импорти- 
руемые файлы списков стилей. Тем не менее, оператор @import может использо- 
ваться для импорта одновременно нескольких файлов списков стилей и заменять 
их правила правилами, внедренными в заголовок Web-страницы. 
Включение стилей в HTML-дескрипторы 
Правила форматирования каскадных списков стилей можно применять как к 
одной отдельной Web-странице (путем внедрения правил на страницу), так и 
для всех страниц Web-сайта (за счет связывания или импортирования файлов 
списков стилей в HTML-документы). Тем не менее, в некоторых случаях инст- 
рукции форматирования могут применяться только для конкретного элемента 
Web-страницы (например, для одного абзаца или заголовка), что не требует со- 
здания общего правила списка стилей для всех элементов данного типа. 
Предположим, например, что для одного заголовка второго уровня необходи- 
мо ввести абзацный отступ 1.5 дюйма и вывести его шрифтом белого цвета на 
синем фоне. Для задания правила списка стилей, которое будет применяться 
только для одного конкретного дескриптора, в дескрипторе указывается атрибут 
style, определяющий правило форматирования в виде <дескриптор 
style="css-oпpeдeлeния">. Таким образом, для рассматриваемого случая 
HTML-дескриптор <п2> должен выглядеть следующим образом: 
<html> 
<head> 
<title>BcTpoeHHbie cTftn*i</title> 
</head> 
<body> 
<h2 style="text-indent:1.5in; background:blue; color:white"> 
Текст этого заголовка выводится шрифтом белого цвета на синем фоне, 
с отступами в 1.5 дюйма.</h2> 
<h2>A это нормальный дескриптор заголовка.</h2> 
</body> 
</html> 
Как видно из примера, атрибут style используется в HTML-дескрипторе для 
указания правила форматирования для данного конкретного дескриптора. Здесь 
правило форматирования применяется только к заголовку уровня 2, в дескрип- 
тор которого было вставлено правило списка стилей. Таким образом, Web-брау-

Глава 4. Каскадные списки стилей 1 8 5 
зер для всех дескрипторов заголовка уровня 2, за исключением дескриптора с 
правилом форматирования, будет применять форматирование по умолчанию. 
Использование атрибута style для применения заданного стиля форматиро- 
вания для одного HTML-дескриптора представляет собой средство контроля 
форматирования текста дескриптора. Недостатком включения стилей в HTML- 
деркрипторы является необходимость вставки одного и того же кода для всех 
дескрипторов, к которым должен применяться один и тот же стиль форматиро- 
вания. Более того, изменение стиля в одном дескрипторе оказывает влияние 
только на один элемент Web-страницы. Например, если на странице содержатся 
три абзаца со встроенными стилями, для изменения цвета текста во всех трех 
абзацах с черного на зеленый необходимо внести соответствующие изменения в 
дескрипторы <р> каждого абзаца. 
Применение нескольких правил каскадных списков стилей 
к одному селектору 
Правила каскадных списков стилей позволяют легко форматировать текст 
Web-страниц сайта. С помощью списков стилей можно без труда изменить стиль 
любого HTML-дескриптора путем изменения одного правила списков стилей. 
Тем не менее, иногда требуется форматирование одного конкретного элемента 
Web-страницы (например, текста абзаца), которое отличается от форматирования 
такого же элемента в другой части страницы. Если для одного и того же селек- 
тора (в данном случае селектора р) создать несколько правил, Web-браузер будет 
форматировать элемент в соответствии с последним правилом списка стилей. 
Например, второе правило в приведенном ниже наборе правил заменяет дей- 
ствие первого правила: 
<style type="text/ess"> 
р {color:red; font-size:18pt} 
p {color:black; font-size:12pt} 
</style> 
Как результат, текст всех абзацев будет выводиться шрифтом черного цвета 
размером 12 пунктов. 
Для применения к одному элементу Web-страницы нескольких правил спис- 
ков стилей необходимо для каждого правила определить класс с уникальным 
именем. После определения класса его форматирование можно применить к эле- 
менту за счет указания в HTML-дескрипторе элемента атрибута class: 
<р class=MIlMH-Bamero-CSS -Класса" > 
ПРАКТИКУМ 
Предположим, например, что необходимо создать класс для представления важ- 
ного текста и еще один класс — для обычного текста. Для создания двух классов 
правил1 каскадного списка стилей, правила должны вводиться следующим обра- 
зом:

1 8 6 Глава 4. Каскадные списки стилей 
<head> 
<titleX)6i,HBneHMe CSS-KnaccoB</title> 
<style type="text/ess"> 
p.critical {color:red; font-size:18pt; font-weight:bold} 
p.regular {color:black; font-size:12pt} 
--> 
</style> 
</head> 
Класс правил каскадного списка стилей может иметь произвольное имя. Тем 
не менее, между селектором (для HTML-дескриптора) и именем класса в описа- 
нии правил всегда должна находиться точка (.). 
После считывания приведенного выше описания стилей Web-браузер будет 
иметь в своем распоряжении два класса стилей для текста абзаца: p. critical и 
p.regular. Стиль p.critical будет присваивать абзацу полужирный шрифт 
красного цвета размером 18 пунктов, а стиль p.regular — шрифт черного цвета 
размером 12 пунктов. Следующий код служит примером использования классов 
каскадных списков стилей для форматирования текста абзацев на Web-странице: 
<html> 
<head> 
<title>npnMep: использование селекторов roiacca</title> 
<style type="text/css"> 
p.critical {color: red; font-size: 18pt; font-weight-.bold} 
p.normal {color:black; font-size:12 pt} 
—-> 
</style> 
</head> 
<body> 
<p class="critical">TeKCT, выводимый шрифтом красного цвета, размером 
18 пунктов, полужирным начертанием</р> 
<р class="normal">Текст, выводимый шрифтом черного цвета, размером 12 
пунктов</р> 
</body> 
</html> 
Для элементов, параметры форматирования которых не определены в списке 
стилей, Web-браузер будет использовать форматирование по умолчанию. Напри- 
мер, поскольку правила списка стилей в приведенном выше коде не устанавлива- 
ют тип шрифта, скажем, Arial или Helvetica, браузер будет использовать тип 
шрифта по умолчанию. На рис. 4.6 показано, каким образом Web-страница, 
описываемая приведенным выше HTML-кодом, будет выглядеть в Web-браузере. 
Чтобы описания классов каскадных списков стилей были более гибкими, убе- 
рите из описаний селекторы. Например, как определено в списке стилей, вне- 
дренном в заголовок предыдущей Web-страницы, классы правил для важного 
("critical") и обычного ("normal") текста доступны только для дескрипторов 
<р>. Поскольку для обоих классов в правилах указан селектор абзаца (р), прави- 
ла класса "важного" текста нельзя применить, например, для заголовка, как по- 
казано в следующей строке кода:

Глава 4. Каскадные списки стилей 
<hl class="critical">3To критический заголовок</Ы> 
При условии, что классы правил списка стилей определены таким же обра- 
зом, как для Web-страницы, показанной на рис. 4.6, браузер выведет на экран 
заголовок уровня 1 стилем по умолчанию, поскольку для заголовков уровня 1 
класс "critical11 не определен. 
файл Прввко йид Сзрвис Оправка 
•&Врес #] http //html-v/ebdesign/ChapterO"Ч/FigureD4-G6 turn 
Текст, выводимый шрифтом красного цвета, размером 
18 пунктов, полужирным начертанием 
Текст, выводимый шрифтом черного цвета, размером 12 пунктов 
11 
-7} 
J 
Рис. 4.6. Селекторы класса позволяют быстро изменить форматирование текста в 
браузере 
Тем не менее, если в описании класса опустить селектор, как показано приве- 
денном ниже примере кода, имя класса может использоваться для форматирова- 
ния любого дескриптора Web-страницы: 
<head> 
<title>npHMep: использование несвязанных селекторов класса</Ъл.Ъ1е> 
<style type="text/ess"> 
.critical {color:red; font-size:18pt; font-weight:bold} 
.normal {color:black; font-size:12 pt} 
—-> 
</style> 
</head> 
Обратите внимание, что "несвязанное" имя класса в его определении начина- 
ется с точки (.) и не содержит селектора для HTML-дескриптора. Теперь приве- 
денные ниже строки кода приведут к тому, что на экран будут выведены первый 
заголовок уровня 1 шрифтом красного цвета размером 18 пунктов и второй заго- 
ловок шрифтом черного цвета размером 1.2 пунктов: 
<hl class="critical">3TO КРИТИЧЕСКИЙ заголовок уровня K/hl> 
<hl class="normal">3To нормальный заголовок уровня 1</Ы> 
Таким образом, при определении класса каскадного списка стилей без селек- 
тора, его можно будет использовать для форматирования любого элемента Web- 
страницы. Если же класс будет определен с селектором, его форматирование 
можно будет применить только к указанному в определении типу HTML-деск- 
риптора.

Глава 4. Каскадные списки стилей 
Выбор типа шрифта с помощью свойства font-family 
Независимо от типа выбираемого шрифта, будь то Times New Roman, Century 
Schoolbook или Matisse ITC, общий настрой Web-страницы определяется именно 
шрифтом, который Web-браузер использует для вывода на экран содержимого 
страницы. Поэтому не оставляйте за посетителем выбор типа шрифта (за счет 
установки шрифта, используемого браузером по умолчанию), а выберите свой 
шрифт, который, по вашему мнению, будет наилучшим образом соответствовать 
содержимому страницы. К счастью, правила каскадных списков стилей позволя- 
ют очень легко устанавливать тип шрифта, используемого Web-браузером для 
отображения содержимого страниц всего Web-сайта. 
ПРАКТИКУМ 
Для задания используемого Web-браузером типа шрифта добавьте в описание 
правила каскадного списка стилей свойство font-family. Предположим, напри- 
мер, что необходимо создать Web-страницу, на которой браузер будет отображать 
весь текст шрифтом Helvetica. Для описания правила списка стилей, которое 
присваивает тип шрифта Helvetica дескриптору <р>, используется селектор абза- 
ца (р) и свойство font-family, как показано в следующем коде: 
<head> 
<title>Bbi6op семейства шрифтов (то есть начертания)</title> 
<style type="text/ess"> 
р {font-family:helvetica} 
</style> 
</head> 
В приведенном примере правило каскадного списка стилей для селектора аб- 
заца (р) заставляет браузер выводить на экран весть текст, который находится 
после дескриптора <р>, шрифтом Helvetica. Свойство font-family, значение ко- 
торого устанавливается в фигурных скобках ({}), является частью объявления 
стиля каскадного списка стилей и указывает, какой тип шрифта должен исполь- 
зоваться. 
Вместо указания одного типа шрифта можно создавать правила с нескольки- 
ми типами шрифтов. Указывая несколько шрифтов, вы даете Web-браузеру воз- 
можность выбора, если основной указанный в правиле тип шрифта в системе по- 
сетителя не установлен. Следует иметь в виду, что если в системе посетителя не 
установлен шрифт, указанный в правиле каскадного списка стилей, Web-браузер 
будет использовать шрифт по умолчанию. Для снижения вероятности выбора 
шрифта, не установленного на компьютере посетителя (в результате чего содер- 
жимое Web-страницы будет выводиться шрифтом по умолчанию), создайте пра- 
вило списка стилей, с выбором альтернативного второго (например, Times New 
Roman) или даже третьего (возможно, Courier) типа шрифта. (Теоретический 
предел для количества типов шрифтов, указываемых в правилах каскадных спис- 
ков стилей, не установлен.)

Глава 4. Каскадные списки стилей . 189 
Для создания объявления каскадного списка стилей с альтернативными типа- 
ми шрифтов, из списка которых браузер будет иметь возможность выбирать, не- 
обходимо в правиле списка стилей перечислить все требуемые шрифты, как в 
приведенном ниже примере: 
<html> 
<head> 
<title>npHMep изменения начертания шрифта</-ЫЪ
1е> 
<style type="text/ess"> 
р {font-family:Helvetica;"times new roman" ,courier} 
—-> 
</style> 
</head> 
<body> 
<п1>Стандартый заголовок уровня K/hl> 
<p>Web-браузер выводит текст, заключенный между дескрипторами абзаца, 
шрифтом Helvetica. Если этот шрифт по ряду причин не доступен, CSS- 
правило заставляет Web-браузер искать шрифт Times New Roman, а затем 
Courier.</p> 
<р>Бсли все три упомянутых шрифта оказываются недоступными, Web- 
браузер игнорирует данное CSS-правило и использует шрифт, который 
установлен в браузере по умолчанию.</р> 
</body> 
</html> 
Здесь свойство font-family указывает, что браузер должен выводить на экран 
текст, находящийся после дескриптора <р> шрифтом Helvetica. Если шрифт 
Helvetica на компьютере посетителя не установлен, будет использоваться шрифт 
Times New Roman. Если же и Times New Roman отсутствует, браузер попытается 
вывести содержимое Web-страницы шрифтом Courier. В случае если в системе 
посетителя не окажется ни одного перечисленного в свойстве font-family шрифта, 
Web-браузер воспользуется шрифтом, установленным в нем по умолчанию. 
Задание размера текста с помощью свойства font-size 
При установке определенного размера шрифта, как правило, преследуются 
две цели. Во-первых, вы хотите гарантировать, что текст достаточно крупный для 
чтения. Во-вторых, вы хотите иметь возможность изменять размеры текста заго- 
ловков или отдельных фраз или слов с целью их выделения. Поскольку по умол- 
чанию для различных типов браузеров (или даже различных версий одного и 
того же типа браузера) размер шрифта может отличаться, если вы хотите, чтобы 
текст Web-страницы выводился шрифтом определенного размера, его необходимо 
указать в коде Web-страницы. 
Размер шрифта играет особенно важную роль, если на странице содержится 
большой объем текста. Если размер шрифта будет слишком маленьким, посети- 
тель вскоре устанет читать и покинет страницу, так и не прочитав всего ее 
содер- 
жимого. Если же размер шрифта слишком велик, он может отвлекать внимание 
посетителя и, как результат, посетитель может пропустить важную информацию, 
содержащуюся на Web-странице.

190 Глава 4. Каскадные списки стилей 
Свойство font-size каскадных списков стилей позволяет задавать размер вы- 
водимого на странице текста. Более того, написание правил списков стилей, уп- 
равляющих размером шрифта, во внешних списках стилей дает возможность лег- 
ко экспериментировать со значениями свойства font-size для определения 
оптимального размера шрифта. Помните, что изменение одного правила во 
внешнем каскадном списке стилей приводит к изменению размера шрифта на 
всех Web-страницах, связанных с этим списком стилей. 
ПРАКТИКУМ 
В то время как атрибут size дескриптора <font> позволяет выбирать размер 
шрифта только из 14 имеющихся размеров (од 1 до 7 и от -1 до -7), выражае- 
мых в пунктах, пикселях и параметрах em, свойство font-size каскадных спис- 
ков стилей предоставляет в ваше распоряжение неограниченное количество раз- 
меров шрифтов. Специалисты, работающие с печатью, ближе всего знакомы с 
выражением размера шрифта в пунктах. При печати пункт представляет собой 
1 /п дюйма. Следовательно, символ размером 12 пунктов при печати будет иметь 
размер Уб дюйма, а символ размером 72 пунктов — 1 дюйм. К сожалению, на 
мониторе текст одинакового размера в пунктах может быть разного размера, по- 
скольку браузеры могут работать в системах, в которых мониторы имеют различ- 
ное разрешение. 
Для указания размера шрифта в пунктах к численному значению размера в 
свойстве font-size необходимо добавить буквы pt, как показано в следующем 
примере: 
р {font-size:12pt} 
Ь {font-size:18pt} 
После считывания правил списка стилей из этого примера Web-браузер выве- 
ден на экран текст абзаца размером 12 пунктов, а полужирный текст — размером 
18 пунктов. 
Часто Web-дизайнеры устанавливают размеры шрифтов в пикселях, поскольку 
они чаще работают не с бумагой, а с экраном компьютера. На экранах компью- 
теров положение объектов и их размеры, как правило, задаются в пикселях, по- 
этому не удивительно, что Web-дизайнеры для задания размеров шрифтов ис- 
пользуют пиксели. Единственным преимуществом пикселей по сравнению с 
пунктами является то, что независимо от разрешения монитора компьютера 
шрифт одного и того же размера будет выводиться одинаково; это справедливо 
даже для различных аппаратных и программных платформ. Более того, выраже- 
ние размеров графических изображений и шрифтов в пикселях позволяет легко 
сохранять взаимный размер теста и изображений на всех страницах Web-сайта. 
Для указания размера шрифта в пикселях к численному значению размера в 
свойстве font-size необходимо добавить буквы рх, как показано в следующем 
примере: 
body, p {font-size:10рх} 
Обратите внимание, что, как правило, размер читабельного текста должен со- 
ставлять не менее 9 пикселей.

Глава 4. Каскадные списки стилей 
Еще один метод установки размера шрифта — выражение его по отношению 
к размеру родительского элемента в пунктах. Отношения типа родительский эле- 
мент/дочерний элемент устанавливаются путем включения одного Web-элемента 
в другой. Внешний элемент считается родительским, а внутренний — дочерним. 
Например, в следующем HTML-коде элемент цитирования является дочерним 
элементом для элемента абзаца, поскольку он заключен между начальным и ко- 
нечным дескрипторами абзаца: 
<р>Весь текст, заключенный между набором начального и конечного 
дескрипторов параграфа, является частью элемента параграфа. 
<cite>3TOT элемент цитаты представляет собой дочерний элемент 
по отношению к тому элементу параграфа, в рамках начального и 
конечного дескрипторов которого он размещенv</cite> 
Когда мы используем один HTML-элемент внутри другого, внутренний 
элемент является дочерним, а внешний -- родительским.</р> 
Параметр em позволяет устанавливать размер Web-элемента в отношении раз- 
мера его родительского элемента в пунктах. Параметр em представляет собой ши- 
рину буквы "М" текущего шрифта. Поэтому, если в списке стилей установлены 
следующие правила, размер текста цитаты, расположенного внутри текста абзаца, 
будет в 1.5 раза больше, чем размер текста абзаца: 
cite {font-size:1.5em} 
р {font-size:12pt} 
Если применить эти правила для кода приведенного выше примера, Web-бра- 
узер выведет на экран текст абзаца (родительский элемент) размером 12 пунктов, 
а текст цитаты выстой 18 пунктов, т.е. в 1.5 раза больше, чем размер родительс- 

кого элемента. 
На рис. 4.7 показан пример использования следующего списка стилей для 
форматирования четырех текстовых элементов (абзац, полужирный текст, эле- 
мент списка и цитата): 
<head> 
<title>ycTaHOBKa размера текста с использованием пунктов, 
Em и nHKceneii</title> 
<style type="text/ess"> 
р {font-family:helvetica,"times new roman",courier; 
font-size:12pt} 
b {font-size:18pt} 
cite {font-size:1.5em} 
li {font-size:30px} 
</style> 
</head>

192 Глава 4. Каскадные списки стилей 
Ь \^Т 'ТУ-' - II - - в • ' Г ' - 1 II • 
Web-браузер отображает текст этого абзкца с использованием шрифт a Helvetica 12 

ПуНКТОВ, поскольку CSS-правнло для серектора"р" иаэтой странице вьнлядит 
ках: {font-family:helvetica, "times new roman", courier; 
font-size: 12pt} 
Приведенная выше конструкция "12 pt" и ссылка на 
CSS-правило, равно как и этот текст, отображаются 
шрифтом "18 pt", поскольку он заключен в 
дескрипторы полужирного начертания, которые 
управляются следующим CSS-правилом: b {fontsize: 
18ptJ 
Каждый элемент в следующем неупорядоченном списке имеет размер 30 пикселей, 
что определяется CSS-правилом: li {fOnt-SlZe:30px}. 
. Элемент 1 
. Элемент 2 
. Элемент 3 
Весь текст, заключенный между набором начального и конечного дескрипторов 
Рис. 4.7. Текст Web-страницы при установке размера шрифта 
с помощью пунктов, параметров ет и пикселей 
Создание перекрывающегося текста 
С помощью каскадных списков стилей на Web-страницу можно внести некую 
"изюминку", отформатировав и расположив гиперссылки так, как показано на 
рис. 4.8. (Несмотря на отсутствие обычного подчеркивания, все элементы на 
Web-странице представляют собой гиперссылки.) 
$ Л) -3 -У 
Изучение CSS... 
.пецификации CSS 
. j 
Рис. 4.8. Web-страница с перекрывающимся текстом различных типов шрифтов и 
размеров

Глава 4. Каскадные списки стилей 
Операторы позиционирования каскадных списков стилей позволяют создавать 
эффекты наложения элементов Web-страницы (например, текста, изображений и 
ДРУГИХ Объектов). ГиперССЫЛКа "Что нового появилось в каскадных списках 
стилей?" находится "за" четырьмя остальными гиперссылками, поскольку прави- 
ла каскадного списка стилей указали Web-браузеру поместить дополнительный 
текст на место, в котором уже находится другой текст. Если вы для каждой ги- 
перссылки меняется тип шрифта, его размер и цвет, посетитель будет знать, где 
щелкнуть указателем мыши для перехода по каждой ссылке. Кроме того, опреде- 
ление границ гиперссылок можно облегчить за счет изменения вида указателя 
мыши и/или стиля гиперссылки при подводе к ней указателя. (В последующих 
советах этой главы будет показано, каким образом можно изменять внешний вид 
указателя мыши и гиперссылки при ее выделении.) 
Свойство position каскадных списков стилей указывает Web-браузеру место 
расположения элемента на Web-странйце. Значение absolute позволяет распола- 
гать объекты по отношению к левому верхнему углу страницы, в то время как 
значение relative дает возможность указывать положение относительно места, в 
котором данный объект находился бы без задания свойства position. Например, 
если в HTML-коде Web-странице содержится два дескриптора <img>, один после 
другого, Web-браузер выведет на экран второе изображение справа от первого. С 
помощью позиционирования relative между двумя изображениями можно вста- 
вить поле: 
<img sгс="image1.jpg"> 
<img style="position:relative: left:20px" src="image2.jpg"> 
Правило каскадного списка стилей во втором дескрипторе <img> указывает 
браузеру сдвинуть элемент (image2.jpg) на 20 пикселей вправо от его нормаль- 
ного положения. 
Для наложения элементов на Web-странице используется абсолютное (absolute) 
позиционирование. Один элемент можно поместить поверх другого и за счет 
указания отрицательного относительного (relative) положения. Тем не менее, 
применение абсолютного позиционирования элементов на странице позволяет 
достичь того же результата более простыми средствами. Например, следующие 
правила списка стилей при применении их к элементам Web-страницы указыва- 
ют Web-браузеру поместить объект на расстоянии 50 пикселей от верхнего края 
страницы и на расстоянии 10 пикселей от левого края страницы: 
.linkl {position:absolute; top:50px; left:10px} 
В приведенном правиле можно использовать любые единицы измерения рас- 
стояний, допустимые для списков стилей: пункты (pt), дюймы (in), сантиметры 
(cm) и т.д. Например, для задания положения текстового элемента с использова- 
нием единицы измерения расстояния, соответствующем размере шрифта, приме- 
няется единица em:

194 Глава 4. Каскадные списки стилей 
.Iink2 {color:#400040; 
font-size:50px; font-style:italix; 
font-family:Georgia, serif; 
position:absolute; top:2.5€»m; left:2em} 
В приведенном примере указание абсолютного положения top:'2.5em и 
ieft: 2em заставляет Web-браузер поместить элемент на расстоянии 125 пикселей 
от верхнего края страницы и 100 пикселей от левой границы страницы (посколь- 
ку в этом случае значение единицы em составляет 50 пикселей, как указано в 
СВОЙСТВе font-size). 
После написания правил позиционирования объектов необходимо указать 
Web-браузеру применять эти правила для определенных элементов на Web-стра- 
нице. Для позиционирования двух гиперссылок с помощью классов каскадных 
списков стилей, определенных в предыдущих примерах (linki и iink2), вставьте 
на Web-страницу следующий код: 
<рХа class="linkl" 
href=MFigure04-01b.htm">4To нового в области<Ьг> 
каскадных списков стилей?</аХ/р> 
<рХа class="link2" 
href="FigureO4-01c.htm">H3учение CSS... 
Атрибут class указывает Web-браузеру, какие правила каскадного списка сти- 
лей применять к элементу (в приведенном примере к гиперссылке). 
Начальный и конечный дескрипторы абзаца (<рх/р>), содержащиеся в коде 
примера, определяют положение текста только в том случае, когда браузер посе- 
тителя не поддерживает каскадные списки стилей. Если Web-браузер не может 
осуществлять форматирование и позиционирование в соответствии с указанными 
правилами, дескрипторы абзаца вставляют между гиперссылками пустую строку. 
Помещение элементов, позиционируемых с помощью каскадных списков стилей, 
в абзац или разделение их дескрипторами разрыва строки (<br>) не требуется. 
Тем не менее, следует помнить, что если Web-браузер не поддерживает каскад- 
ные списки стилей, позиционируемые элементы без дескрипторов абзаца и раз- 
рыва строки будут находиться рядом друг с другом. 
Выравнивание текста на Web-странице 
Такие текстовые процессоры, как MS Word или WordPerfect, предоставляют 
четыре варианта выравнивания текста абзаца. Как показано на рис. 4.9, текст 
можно выровнять по левому полу, по правому полю, по центру или по ширине 
(т.е. одновременно по левому и по правому полю). 
Три первых варианта выравнивания (по левому краю, по правому краю и по 
центру) не представляют для HTML ничего нового. Атрибут align позволяет 
центрировать текст или выравнивать его по левому или правому краю Web-стра- 
ницы или HTML-таблицы. Тем не менее, атрибут align не имеет значения 
"justify", которое позволило бы форматировать строки текста так, как показа- 
но в четвертом абзаце на рис. 4.9. К счастью, свойство text-align каскадных

Глава 4. Каскадные списки стилей 195 
списков стилей предоставляет опцию "justify" и дает возможность форматиро- 
вать текст, выравнивая его по ширине. 
йл Правки .ид ' фЬрэннав 
•JBLEFT-
JUSTIFIED A word processor such as MS-Word or 
WordPerfect gives you four ways to align paragraph text. 
You can align text such that each line starts at the left-hand 
margin (left-justify), ends at the right-hand margin (rightjustify), 
is centered (center), or ends flush with both the left 
and right-hand margins (full-justified). Left-justified text 
has a jagged right-hand edge. 
RIGHT-JUSTIFIED A word processor such as MS-Word or 
WordPerfect gives you four ways to align paragraph text. 
You can align text such that each line starts at the left-hand 
margin (left-justify), ends at the right-hand margin (rightjustify), 
is centered (center), or ends flush with both the left 
and right-hand margins (full-justified). Right-justified text 
has a jagged left-hand edge. 
CENTERED A word processor such as MS-Word or 
WordPerfect gives you four ways to align paragraph text. 
You can align text such that each line starts at the left-hand 
margin (left-justify), ends at the right-hand margin (rightjustify), 
is centered (center), or ends flush with both the left 
and right-hand margins (full-justified). With centered text, 
both edges are jagged. 
LEFT & RIGHT (i.e. FULL^JUSTIFIED) A word processor 
such as MS-Word or WordPerfect gives you four ways to 
Рис. 4.9. Абзацы текста, выровненные по левому краю, правому краю, по центру и 
по ширине 
Чтобы воспользоваться четырьмя опциями выравнивания каскадных списков сти- 
лей создайте в списке стилей следующие четыре несвязанных правила: 
.left {text-align:left} 
.right {text-align:right} 
.center {text-align:center} 
.justify {text-align:justify} 
Обратите внимание, что не требуется создавать правила для использования 
свойства text-align каскадных списков стилей. Тем не менее, если вы опреде- 
лите приведенные выше классы списков стилей, выравнивание элемента можно 
будет выполнять с помощью задания атрибута с1азз=имякласса в дескрипторе 
элемента страницы, а не атрибута styie=npaBiwioBbipaBi»iBaHH*, который на не- 
сколько символов длиннее. 
После описания классов для выравнивания текста в его элементе-контейнере 
можно воспользоваться атрибутом class. Кроме того, текст можно выравнивать 
на всей Web-странице, во всей таблице или в отдельных ее ячейках или строках, 
а также можно выравнивать текст, используемый в качестве заголовков для эле- 
ментов форм. Например, для выравнивания по ширине всего текста Web-страни- 
цы, необходимо следующим образом установить свойство text-align в дескрип- 
торе <body>: 
<body class="justify">

196 Глава 4. Каскадные списки стилей 
Аналогично, для выравнивания по левому краю отдельных абзацев укажите 
свойство text-align в дескрипторе абзаца <р>: 
<р class="left"> 
Следует иметь в виду, что дочерние элементы, т.е. элементы, заключенные в 
другие элементы, наследуют родительские параметры свойств каскадных списков 
стилей. Таким образом, атрибут class в следующем дескрипторе <body> (роди- 
тельском элементе) будет определять выравнивание текста в абзаце (дочернем 
элементе): 
<body class="justify"> 
<р>Текст параграфа 1 будет выровнен влево и вправо</р> 
<р>Текст параграфа 2 будет выровнен влево и вправо</р> 
<р>Текст параграфа 3 будет выровнен влево и вправо</р> 
<р>Текст параграфа 4 будет выровнен влево и вправо</р> 
</body> 
Тем не менее, в дочернем элементе можно изменить одно или несколько зна- 
чений свойств каскадных списков стилей, передаваемых от родительского эле- 
мента. Например, для изменения выравнивания абзацев из приведенного выше 
примера вставьте атрибуты class или style в начальные дескрипторы элементов, 
выравнивание которых необходимо изменить: 
<body class="justify"> 
<р class="left">TeKCT параграфа 1 будет выровнен влево</р> 
<р>Текст параграфа 2 будет выровнен влево и вправо</р> 
<р class="text-align:right">Текст параграфа 3 будет выровнен вправо</ 
Р> 
<р>Текст параграфа 4 будет выровнен влево и вправо</р> 
</body> 
Установка полей и высоты строк 
При работе с текстом Web-страницы часто бывает необходимо оставить пустое 
место между текстом и левым и правым краем окна браузера. Поля позволяют 
сделать Web-страницы, содержащие больше количество текста, менее устрашаю- 
щими за счет введение пустого пространства, на котором могут отдохнуть глава 
посетителя. Кроме того, поля могут применяться для организации текста в ко- 
лонки или увеличения интервалов между абзацами, как показано на рис. 4.10. 
До появления правил каскадных списков стилей, которые позволяют устанав- 
ливать свойства полей и четко контролировать интервалы вокруг элементов Web- 
страниц, для позиционирования текста использовались HTML-таблицы. Напри- 
мер, для создания полей между текстом и краями Web-страницы текст 
помещался в таблицу с тремя столбцами. Помещая текст в средний столбец, ос- 
тавляя два крайних столбца пустыми и устанавливая необходимую их ширину, 
можно было добиться получения пустых полей между текстом и левым и правым 
краями Web-страницы.

Глава 4. Каскадные списки стилей 197 
Азр*= [ в ] hup //htmhwebdesigrlOiepief04/Ftgurer)'H 0 h1 
LEFT^IUSTIFIED & margin-left:25% A word processor such 
at MS-Word or WordPerfect gives you four ways to align 
paragraph text. You can align text such that each line starts at 
the left-hand margin (left-justify), ends at the right-hand margin 
(right-justify), is centered (center), or ends flush with both the 
left and right-hand margins (full-justified). Left-justified text has 
a jagged right-hand edge. 
RIGHT-JUSTIFIED & margin-right:25% A word processor 
such as MS-Word or WordPerfect gives you four ways to align 
paragraph text. You can align text such that each line starts at 
the left-hand margin (left-justify), ends at the right-hand margin 
(right-justify), is centered (center), or ends flush with both the 
left and right-hand margins (full-justified). Right-justified text 
has a jagged left-hand edge. 
CENTERED & margin-left:10%; margin-nght:10% A word 
processor such as MS-Word or WordPerfect gives you four ways to 
align paragraph text. You can align text such that each line starts at 
the left-hand margin (left-justify), ends at the right-hand margin 
(right-justify), is centered (center), or ends flush with both the left 
and right-hand margins (full-justified). With centered text, both 
edges are jagged. 
J 
Рис. 4.10. Использование полей для разделения текста на отдельные части 
ПРАКТИКУМ 
Свойства полей каскадных списков стилей позволяют четко контролировать пус- 
тое пространство, которое Web-браузер оставляет между элементами и краями 
Web-страницы и между соседними элементами. Вы имеете возможность выбирать 
между четырьмя Свойствами ПОЛеЙ: margin-left, margin-right, margin-top И 
margin-bottom. В имени каждого свойства присутствует название края элемента, 
возле которого будет создаваться поле. Например, для создания поля шириной 
40 пикселей между объектами на странице и левым и правым краями окна брау- 
зера вставьте в список стилей следующее правило: 
body {margin-left:40px; margin-right:4Орх} 
Для управления шириной левого и правого полей между абзацами текста и 
краями Web-страницы заключите абзацы в начальный и конечный дескрипторы 
раздела (<divx/div>), а затем, как показано ниже, примените правило каскад- 
ного списка стилей к дескрипторам <div>: 
<body> 
<р>Брауэер не затрагивает границы этого абзаца.</р> 
<div style="margin-left:10%; margeih-right:10%> 
<р>Браузер ВЫРОВНЯЕТ этот абзац из расчета 10% ширины окна.</р> 
<р>Браузер ВЫРОВНЯЕТ также и этот абзац из расчета 10% ширины окна. 
CSS-праило для дескриптора раздела применяется для обоих абзацев.</р> 
<р>Брауэер не затрагивает границы этого абзаца.</р> 
</body> 
Обратите внимание, что для указания ширины полей можно использовать 
любые единицы, допустимые для каскадных списков стилей (пискелы, пункты, 
em, дюймы, миллиметры, сантиметры и т.д.) В приведенном примере правило

198 Глава 4. Каскадные списки стилей 
каскадного списка стилей в дескрипторе <div> заставляет браузер оставить меж- 
ду текстом абзаца и левым и правым краем Web-страницы поле шириной 10% 
ширины окна браузера. 
Для управления полями над и под элементом используются свойства margintop 
и margin-bottom соответственно. Например, если между абзацами необходи- 
мо вставить поле шириной в две строки, можно следующим образом определить 
селектор абзаца (р): 
р {margin-bottom:2em} 
Для вставки между абзацами поля шириной в 1.5 ширины нормального поля 
между абзацами измените стиль дескриптора абзаца <р>, не прибегая к заданию 
правила списка стилей для селектора абзаца (р). Например, для вставки между 
текущим абзацем и следующим дополнительного пустого поля шириной в пол- 
строки можно воспользоваться следующим правилом: 
<р style="margin-top:I.5em"> 
При необходимости вставки полей между строками в одном абзаце, в отличие 
от полей между абзацами, воспользуйтесь свойством каскадных списков стилей 
line-height. По умолчанию ДЛЯ СВОЙСТВа line-height установлено значение 
lem. Поэтому в следующем примере Web-браузер вставит между строками двух 
отдельных абзацев поле одной и то же ширины: 
<body> 
<р>Это первая строка абзаца 1<Ьг> 
Это вторая строка абзаца 1. </р> 
<р style="line-height: 1ет">Это первая строка абзаца 2<br> 
Это вторая строка абзаца 2 . </р> 
</body> 
Для создания двойного интервала между строками (т.е. фактически для помеще- 
ния между строками пустой строки) одного абзаца в правиле списка стилей устано- 

вите значение свойства line-height равным 2ет, как показано в следующем 
примере: 
<р style=line-height:2em"> 
Вывод текста в колонках 
Свойство width каскадных списков может использоваться для вывода на эк- 
ран текста страницы в виде колонок. Расположение текста в колонках удобно в 
том случае, когда на странице содержится большой объем текста или на одной и 
той же странице содержится разнородная информация. Посетитель будет чув- 
ствовать себя более комфортно, поскольку среда ему покажется знакомой — с 
ней он сталкивался в газетах и журналах. Более того, вертикальные колонки раз- 
деляют страницу на разделы приемлемых размеров. Как результат, посетителю не 
приходиться работать со словами, занимающими все пространство экрана, даже 
если на странице нет графических изображений. И, наконец, приводя для каж- 
дой колонки соответствующий заголовок, вы даете посетителю возможность 
отыскать интересующую его информацию.

Глава 4. Каскадные списки стилей 199 
ПРАКТИКУМ 
Для разбиения Web-страницы на колонки поместите содержимое страницы, ко- 
торое браузер должен выводить в обоих колонках, в элемент раздела (т.е. между 
начальным и конечным дескрипторами <divx/div>). Затем для установки ши- 
рины каждой колонки и типа выравнивания их содержимого можно воспользо- 
ваться классами каскадных списков стилей. Например, для создания трех коло- 
нок, показанных на рис. 4.11, добавьте в описание списка стилей следующие 
определения: 
left {text-align 
border-top-width 
border-color 
border-style 
border-left-width 
border-right-width 
border-bottom-width 
width 
float 
middle {text-align 
border-top-width 
border-color 
border-style 
border-right-width 
border-left-width 
border-bottom-width 
width 
float 
right {text-align 
border-top-width 
border-color 
border-style 
border-right-width 
border-left-width 
border-bottom-width 
width 
float 
justify 
lpx; 
black; 
solid; 
lpx; 
Opx; 
lpx; 
33%; 
left;} 
justify 
lpx; 
black; 
solid; 
lpx; 
lpx; 
lpx; 
33%; 
left;} 
justify 
lpx; 
black; 
solid; 
lpx; 
Opx; 
lpx; 
33%; 
left;} 
атем задайте стиль разделителей, в которых содержится текста страницы: 
<div class="left"> 
<centerXhl>KonoHiea K/hlX/center> 
. . . содержимое колонки 1 . . . 
<div class="middle"> 
<сепЬегХЫЖолонка l</hlx/center> 
. . . содержимое колонки 1 . . . 
<div class="right"> 
<centerXhl>KoflOHKa l</hlx/center> 
. . . содержимое колонки 1 . . .

200 Глава 4. Каскадные списки стилей 
Древке .Ид Избранное Сервис Qnpaei 
-> И 3 U -л -J Л- -> В ' 
http://html-webdesign/ChepterO4/FigureCH-11 htm 
Вывод текста в колонках 
Колонка 1 
vidthYou You can use the CSS 
property to layout a Web page i: 
lewspaper-like columns. A 
lewspaper layout works well when in 
you must provide a lot of text or 
want to present information onfwant 
diverse topics on a single Wei 
page. The visitor feels comfortable page 
because the layout is familiar-mo; 
everyone has read a printed e 
lewspaper or magazine. Moreover, 
vertical columns separate the page 
full of text into manageable chunks. 
As a result, visitor is 
overwhelmed with a screen 
wall-to-wall words-even if there wall 
are no pictures within the columnsare 
.Колонка 2 
dthXou can use the CSS 
iroperty to layout a Web page i 
newspaper-like columns. A 
lewspaper layout works well whei 
you must provide a lot of text 01 
to present information on 
iverse topics on a single Web|diverse 
TTie visitor feels comfortabl 
cause the layout is familiar-mostjb 
veryone has read 
, newspaper or magazine. Moreover, 
vertical columns separate the page 
mil of text into manageable chunks, full 
Vs a result, visitor is noi 
iverwhelmed with a screen of 
l-to-wall words-even if there|wall 
no pictures within the со 
Колонка 3 
can use the CSS width 
in property to layout a Web page in 
lewspaper-like columns. A 
ewspaper layout works well when 
you must provide a lot of text or 
want to present information on 
topics on a single Web 
page. The visitor feels comfortable 
ecause the layout is familiar-most 
has read a printed 
newspaper or magazine. Moreover, 
vertical columns separate the page 
of text into manageable chunks. 
As a result, visitor is not 
overwhelmed with a screen oi 
-to-wall words-even if there 
no pictures within the columns 
printed everyone 
olumnsare 
Рис. 4.11. Web-страница с тремя колонками 
В предыдущем совете было рассмотрено, как использовать четыре свойства 
полей для вставки пустого пространства между элементами и краями страницы. 
Кроме того, каскадные списки стилей имеют свойство padding, которое позво- 
ляет задавать ширину поля между элементом и его контейнером. В приведенном 
примере на странице находятся три контейнера — элементы разделов, в каждом 
из которых содержится текст одной колонки. Для вставки пустого пространства 
(поля) между содержимым колонки (текстом) и левым и правым краями контей- 
нера в каждый из трех классов списков стилей (.left, .middle и .right) помес- 
тите следующие объявления: 
padding-left:Юрх; padding-right:Юрх; 
Свойство padding в приведенных выше объявлениях заставляет Web-браузер 
оставить пустое место шириной 10 пикселей между содержимым колонок и ле- 
вым и правым краями контейнера, как показано на рис. 4.12. 
(ПОМИМО СВОЙСТВ padding-left И padding-right Каскадных СПИСКОВ СТИЛеЙ 
для вставки полей между содержимым и верхним и нижним краем контейнера 
МОЖНО ИСПОЛЬЗОВать СВОЙСТВа padding-top И padding-bottom.)

Глава 4. Каскадные списки стилей 201 
вод тексте в колонках - Microsoft Icilernel Ьхрюгег 
Файл Правке. Вид Избранное . Сервис"..прав*у 
Адрес Ш] http.//Hmhrebdesign/ChepterO4/FigureQ4-12.htm 
Вывод текста в колонках 
Колонка 1 Колонка 2 
You can use the CSS width 
property to layout a Web page 
in newspaper-like columns. A 
newspaper layout works well 
when you must provide a lot of 
text or want to present 
information on diverse topics 
on a single Web page. The 
visitor feels comfortable 
because the layout is familiarmost 
everyone has read a 
printed newspaper or 
magazine. Moreover, vertical 
columns separate the page foil 
of text into manageable chunks. 
As a result, visitor is not 
overwhelmed with a screen of 
You can use the CSS width 
property to layout a Web page 
in newspaper-like columns. A 
newspaper layout works well 
when you must provide a lot of 
text or want to present 
information on diverse topics 
on a single Web page. The 
visitor feels comfortable 
because the layout is familiarmost 
everyone has read a 
printed newspaper or 
magazine. Moreover, vertical 
columns separate the page full 
of text into manageable 
chunks. As a result, visitor is 
not overwhelmed with a 
Колонка 3 
You can use the CSS width 
property to layout a Web page 
in newspaper-like columns. A 
newspaper layout works well 
when you must provide a lot of 
text or want to pre s ent 
information on diverse topics 
on a single Web page. The 
visitor feels comfortable 
because the layout is familiarmost 
everyone has read a 
printed newspaper or 
magazine. Moreover, vertical 
columns separate the page full 
of text into manageable chunks. 
As a result, visitor is not 
overwhelmed with a screen of 
Рис. 4.12. Web-страница после вставки полей между контейнером и его содержимым 
Работа с границами 
Web-дизайнеры используют границы для разделения изображений и окружаю- 
щего его текста, для выделения заголовков и другой важной содержащийся на 
странице информации. Свойства border каскадных списков стилей позволяют 
независимо управлять шириной, стилем и цветом каждой стороны границы вок- 
руг объектов. До появления каскадных списков стилей для создания границ вок- 
руг объектов они вставлялись в HTML-таблицы и устанавливался атрибут border, 
который определял ширину границы. К сожалению, далеко не все браузеры под- 
держивают работу со стилями границ. 
ПРАКТИКУМ 
Каскадные списки стилей позволяют рисовать границы вокруг любого объекта 
или контейнера на Web-странице. Так, для рисования границ вокруг изображе- 
ний, заголовков, абзацев, текста, находящегося между дескрипторами <span> 
</span>, Объектов, НаХОДЯЩИХСЯ Между ДеСКрИПТОрамИ <divX/div>, И Т 
А, например, для создания границы вокруг заголовка уровня 1 необходимо напи- 
сать правило списка стилей следующего вида: 
hi {border : solid Зрх black} 
Первое значение свойства border, "solid", задает стиль линии границы, 
второй, "Зрх", устанавливает ширину границы равной 3 пикселя, а третий, 
"black", устанавливает черный цвет границы. При написании правила списка 
стилей, которое устанавливает значения свойства border, Web-браузер применяет 
одни и те же значения для всех четырех сторон границы.

202 Глава 4. Каскадные списки стилей 
Для независимой работы с каждой страной границы необходимо задавать зна- 
чения СКЖЖ border-style, border-width И border-color (ДЩШгЮ ДГИ каж- 
дой стороны. Например, "сокращенное" правило списка стилей из предыдущего 
примера можно переписать в следующем развёрнутом виде: 
hi {border-top-style 
border-left-style 
border-right-style 
border-bottom-style 
border-top-width 
border-left-width . 
border-right-width 
border-bottom-width 
border-top-color 
border-left-color 
border-right-color 
border-bottom-color 
:solid; 
:solid; 
:solid; 
:solid; 
:3px; 
:3px; 
:3px; 
:3px; 
:black; 
: black; 
:black; 
:black} 
К счастью, синтаксис каскадных списков стилей позволяет сочетать явную 
и неявную (сокращенную) форму установки свойства border. Например, для 
создания непрерывной границы золотистого цвета можно написать следующее 
правило: 
hi {border-style :solid; 
border-color :#FFD700; 
border-top-width :lpx; 
border-left-width :lpx; 
border-right-width :2px; 
border-bottom-width :2px} 
Аналогично, для создания двойной границы синего цвета шириной 0.5 дюй- 
ма можно написать следующее правило: 
hi {border-style :double; 
border-style :double; 
border-width :.5in} 
Обратите внимание, что в предыдущих примерах значения свойства bordercolor 
можно задавать в виде шестнадцатеричных триплетов, а значение свойства 
border-width — в любых единицах, допустимых в каскадных списках стилей 
(дюймы, сантиметры, пункты, пиксели и т.д.). 
На рис. 4.13' показана граница светло-зеленого цвета каждого из девяти воз- 
можных стилей вокруг заголовков уровня 1. (Значение "попе" свойства borderstyle 

указывает Web-браузеру на необходимость игнорирования свойства грани- 
цы, поэтому она не рисуется.) 
Следует иметь в виду, что чтобы увидеть эффект стиля границы, ее ширину 
(т.е. значение свойства border-width) необходимо установить равной, по край- 
ней мере, три пикселя. Например, при выборе стиля "double" Web-браузеру для 
рисования границы необходимо по одному пикселю для линий и один пиксель 
на промежуток между ними.

Глава 4. Каскадные списки стилей 203 
0рее*а Вия избра 
J J] -Д ДА1 J о 
».gn/Ch«|*ntM/Fiei»e<»-l3 
border-style : none 
border-style: dotted 
border-style : dashed 
• . • • ' - 
border-style : double 
• 
[border-style : groove | 
border-style: solid 
border-style : ridge iborder-style : inset 
I border-style : outset | 
РИС. 4.13. Примеры девяти стилей границы каскадных списков стилей 
Создание абзацного отступа и работа с интервалами 
между буквами, словами и строками 
Помимо средств позиционирования объектов, с появлением каскадных спис- 
ков стилей дизайнеры получили столь долгожданный четкий типографический 
контроль над текстом Web-страницы. Таблицы и прозрачные (разделительные) 
изображения в формате GIF и ранее давали определенные средства для позицио- 
нирования элементов на экране. Тем не менее, они не позволяли легко управ- 
лять интервалами между словами и строками текста и не давали возможности 
вводить абзацный отступ в первой строке абзаца. К счастью, правила каскадных 
списков стилей предоставляют дизайнерам все необходимые средства. 
ПРАКТИКУМ 
Например, для создания абзацного отступа для каждого абзаца теста на странице 
необходимо создать правило следующего вщщ: 
р {text-indent:2em} 
Несмотря на то что в приведенном правиле можно использовать любые еди- 
ницы измерения, доступные для каскадных списков стилей (пункты, пиксели, 
дюймы, сантиметры и т.д.), вы обнаружите, что для указания величины абзацно- 
го отступа удобнее всего использовать единицу измерения em. Приведенное 
выше правило устанавливает абзацный отступ для первой строки текста абзаца 
примерно на пять букв, причем такой отступ будет сохраняться даже при умень- 
шении или увеличении размера шрифта. Помните, что размер lem равен теку- 
щему размеру шрифта в пунктах. Таким образом, при изменении размера шриф- 
та изменяется и размер em (а, стало быть, и размер абзацного отступа). При 
указании размера отступа с помощью любой другой единицы измерения (например, 
пикселей или пунктов) при изменении размера шрифта вам придется изменять ве- 
личину отступа для сохранения одного и того же размера отступа в символах.

204 И Глава 4. Каскадные списки стилей 
Из самих названий свойств следует, что свойств letter-spacing позволяет 
установить интервалы между буквами в словах, word-spacing — интервалы между 
словами, a line-height (как вы уже, наверное, догадались) — интервалы между 
строками текста. (Фактически, свойство line-height было бы правильнее на- 
звать line-spacing, но тестовые процессоры используют термин "высота строк", 
поэтому для простоты в каскадных списках стилей используется тот же термин.) 
Как и в случае со свойством text-indent, для задания значений всех выше пе- 
речисленных свойств могут использоваться любые единицы измерения, примене- 
ние которых допускается в каскадных списках стилей. Имейте в виду, что при 
указании интервалов между буквами и между словами браузер добавляет указан- 
ное вами расстояние к тому, которое используется браузером по умолчанию. По- 
этому для добавления интервала в 5 пикселей между буквами в тексте заголовка 
уровня 1 можно написать следующее правило: 
<hl style="letter-spacing: 5рх">П1ирокий интервал между буквами в словах </hl> 
Аналогично, для добавления интервала в 1 пику между словами в цитатах 
можно использовать следующее правило списков стилей: 
cite {word-spacing: lpc} 
Как уже упоминалось, свойство line-height позволяет устанавливать верти- 
кальное расстояние между строками текста. Не хотелось бы усложнять, но обыч- 
ный термин для расстояния между строками — интерлиньяж. Таким образом, 
свойство line-height позволяет контролировать интерлиньяж. Значение свой- 
ства line-height можно задавать одним из трех методов: числом, единицей 
длины, используемой в каскадных списках стилей и в процентах. Web-браузер 
добавляет расстояние, указанное вами в свойстве line-height, перед каждой 
строкой теста. 
При указании значения свойства line-height числом или в процентном от- 
ношении Web-браузер для определения интерлиньяжа будет использовать размер 
шрифта. Таким образом, при использовании на странице следующего правила 
браузер вставит между строками текста, выводимого полужирным шрифтом, рас- 
стояние 25 пунктов: 
Ъ {font-size:10pt; line-height:2.5} 
Браузер умножает значение свойства font-size (10 пунктов) на значение 
свойства line-height (2.5) и получает интерлиньяж, равный 25 пунктов. Анало- 
гично, то же самое правило можно записать с использованием процентов: 
Ь {font-size:10pt; line-height:250%} 
Как и в предыдущем примере, Web-браузер установит значение свойства 
line-height равным 25 пунктов, поскольку 250% от текущего размера шрифта 
(10 пунктов) как раз и составляет 25 пунктов. Обратите внимание, что в правило 
можно не включать объявление свойства font-size. При указании значения 
свойства line-height числом или в процентах браузер для получения интерли- 
ньяжа всегда будет умножать текущий размер шрифта на значение свойства 
line -height.

Глава 4. Каскадные списки стилей 2 0 5 
Для задания интерлиньяжа в единицах измерения длины каскадных списков 
стилей поместите в определение свойства line-height указание используемой 
единицы измерения. Например, для определения класса каскадного списка сти- 
лей, применяемого для создания двойного интервала между строками, нужно до- 
бавить на страницу следующее правило: 
.doube__space {line-height:2em} 
Аналогично, для введения интервала 12 пунктов перед каждой строкой текста в 
абзаце можно воспользоваться следующим внутритекстовым определением стиля: 
<р style="line-height:12pt"> 
Обратите внимание, что если значение свойства line-height меньше исполь- 
зуемого размера шрифта, строки текста будут накладываться друг на друга. На- 
пример, если бы размер шрифта в приведенном выше примере был равен 24 
пункта, строки текста абзаца накладывались бы друг на друга. Точнее говоря, 
буквы каждой строки начинались бы посредине букв предыдущей строки, по- 
скольку интерлиньяж 12 пунктов составляет половину размера шрифта 24 
пункта. 
Использование в тексте начальных заглавных букв 
Издатели часто к первым буквам статей в журналах и главам книг применяют 
специальный стиль, который вносят определенную "изюминку" в текст страни- 
цы. При умеренном использовании изменение внешнего вида первого символа 
нового раздела или главы текста привлекает внимание читателя и увеличивает 
вероятность того, что текст будет прочитан. Кроме того, если страница разбита 
на несколько колонок или содержит большое количество текста, специальный 
стиль можно применять к первому символу каждого абзаца, который начинает 
рассмотрение новой темы, что позволит посетителю определить основное содер- 
жание всей страницы. 
ПРАКТИКУМ 
Для установки начальной заглавной буквы (в текстовом процессоре MS Word та- 
кой стиль называется буквица) задайте ее размер равным от 120% до 150% от 
высоты окружающего ее текста. Таким образом, можно создать следующий класс 
каскадного списка стилей leap: 
<head> 
<style type="text/ess"> 
.icap= {fonr-size=150%} 
— >
</style> 
</head> 
После определения класса его можно использовать в качестве значения атри- 
бута class HTML-дескриптора <span>:

206 Глава 4. Каскадные списки стилей 
<body> 
<pXspan class="icap">T</span>his is an example of . . .</p> 
<pXspan class="icap">T</span>ext in this paragraph ...</p> 
<p style="font-size:2em"Xspan class="icap">K/span>f you had 
used pixels or . . .</p> 
</body> 
На рис. 4.14 приведен пример Web-страницы, в которой класс icap применен 
к первой букве каждого из трех абзацев. 
Помимо увеличения размера шрифта первую букву абзаца можно дополни- 
тельно выделить другим типом шрифта, цветом шрифта или цветом фона. При 
выделении типом шрифта используете шрифт, отличный от шрифта основного 
текста абзаца, например, шрифт Comic, или тот же шрифт, который использует- 
ся в заголовках. Например, правила класса icap из предыдущего примера можно 
расширить следующим образом: 
.icap {font-size: 150%; font-family: "comic sans ms", impact} 
При применении класса icap он приведет к увеличению размера первой бук- 
вы абзаца в 1.5 раза по сравнению с размером шрифта окружающего текста и вы- 
делением ее шрифтом Comic Sans MS. Если шрифт Comic Sans MS не установ- 
лен в системе посетителя, вместо него будет использоваться шрифт Impact. 
(Если же на компьютере посетителя нет и шрифта Impact, будет использоваться 
шрифт по умолчанию; тем не менее, первая буква абзаца будет все равно выде- 
ляться за счет увеличенного размера шрифта.) 
! ;1>8йя Правка Ейд Избранное Сйрвис .превкв 
Адрес j e j httpy/Wmhvebdesign/ChapterO'!/FigureO4-l 4 htm 
Once defined, you can use icap as the class attribute's value in the HTML span 
element to apply the class 
rules as follows: 
Xhis is an example of paragraph text with the first letler of the paragraph 
displayed in the same font, but in a 
different size. In this case the size is 150%, that is 30% larger than it would 
otherwise be. 
Xext in this paragraph is the same size as text in the previous paragraph. 
Notice the next paragraph has a 
larger font. However, the initial cap is still pronounced, because it is 50% 
larger than the other text in the 
paragraph. 
If you had used pixels or points for the initial cap's 
size, you would have had to go back now and make 
an adjustment manually. By using a percentage, as 
the font-size gets larger, so does the size of the initial 
c aP- ^ ... 
Рис. 4.14. Абзацы с начальными заглавными буквами

Глава 4. Каскадные списки стилей 2 0 7 
Настройка внешнего вида гиперссылок 
Если в HTML-коде Web-страницы специальное форматирование для элемента 
привязки (т.е. гиперссылки) не определено, Web-браузеры подчеркивают текст 
гиперссылки и, как правило, используют один цвет (например, синий) для ото- 
бражения непосещенных ссылок и другой (например, пурпурный) для посещен- 
ных ссылок. Каскадные списки стилей дают вам возможность выбора: можно ос- 
тавить определение внешнего вида гиперссылок за Web-браузером посетителя 
или самим установить, как они должны выглядеть. Например, можно написать 
правила каскадного списка стилей, которые будет изменять цвет шрифта, цвет 
фона и даже при желании удалить выделение подчеркиванием. Более того, для 
различных гиперссылок можно применять различные стили. Так, например, для 
гиперссылок, внедренных в другие элементы Web-страниц, цвет фона можно ос- 
тавить без изменения. Тем не менее, для гиперссылок меню навигации можно 
использовать различные цвета фона или внедрить изображения, которые выделят 
эти гиперссылки в рамках всего содержимого страницы. Можно даже создать 
правила списка стилей для создания специального эффекта, который изменяет 
внешний вид ссылки при выделении ее указателем мыши. 
ПРАКТИКУМ 
Для настройки внешнего вида гиперссылок необходимо добавить на страницу пра- 
вила, задающие значения свойств одного, отдельных или всех четырех псевдоклас- 
сов дескрипторов привязки: 
a:link Непосещенная ссылка. 
a:visited Посещенная ссылка. Это означает, что в журнале посещенных 
ссылок Web-браузера содержится элемент, соответствующий адресу 
перехода по ссылке (т.е. URL-адрес, указанный в атрибуте href 
гиперссылки). ' - 
a:hover Указатель мыши посетителя находится над гиперссылкой. 
a:active Указатель мыши посетителя находится над гиперссылкой и посе- 
титель нажимает или отпускает левую кнопку мыши (или правую 
кнопку для мыши, настроенной налевшей). 
Например, для установки темно-зеленого цвета непосещенных и пурпурного 
цвета посещенных гиперссылок поместите на страницу следующие правила кас- 
кадного списка стилей: 
a:link {color:darkgreen} 
a:visited {color:magenta} 
При необходимости удаления выделения гиперссылок подчеркиванием вы 
должны обеспечить другой метод выделения. Например, можно изменить тип 
шрифта ссылок или изменить цвет их фона. Однако, какой бы метод вы не из- 
брали, его нужно применять ко всем классам гиперссылок. Для применения од- 
ного и того же стиля ко всем гиперссылками удалите ссылку на цсевдокласс из 
правила списка стилей, как показано в следующем примере: 
a {text-decoration:none; background-color:yellow}

208 Глава 4. Каскадные списки стилей 
В приведенном примере свойство text-decoration, значение которого равно 
"попе", убирает подчеркивание гиперссылок, а свойство background-color ис- 
пользуется для установки желтого цвета фона гиперссылок. Обратите внимание, 
что Web-браузеры будут применять содержащиеся в этом правиле объявления к 
дескрипторам привязки (а) всех псевдокалассов гиперссылок. Таким образом, 
при использовании приведенного выше правила каждая гиперссылка на Web- 
странице будет иметь желтый цвет фона, а подчеркивание текста гиперссылок 
будет отсутствовать. 
Для создания дополнительных эффектов можно воспользоваться псевдоклас- 
сом "hover" для изменения внешнего вида гиперссылок при подведении к ги- 
перссылками указателя мыши. При создании такого эффекта можно пользовать- 
ся любым типом форматирования. Так, например, при необходимости вывода на 
экран текста гиперссылки шрифтом, размер которого в 1.5 раза больше размера 
текущего шрифта, курсивом и с голубым цветом фона, вставьте на страницу сле- 
дующее правило: 
a:hover {font-size:I.5em; font-style:italic; background-color:cyan} 
И в качестве последнего шага в настройке внешнего вида гиперссылок на 
Web-сайте можно сделать так, чтобы ссылки на страницы этого сайта отличались 
от ссылок на страницы, внешние по отношению к данному сайту. Такой же 
стиль форматирования можно применить для сайтов, имеющих две зоны — для 
всех пользователей и только для зарегистрированных членов. В таком случае вы 
можете помочь обычным посетителям избежать нажатий ссылок, которые выво- 
дят на экран окно ввода пароля для перехода в зону сайта, доступную только 
для зарегистрированных членов. Для организации такого типа форматирования 
необходимо присвоить каждому типу гиперссылок класс списка стилей, который 
будет форматировать ссылки требуемым образом. 
Например, предположим, что необходимо, чтобы все гиперссылки на другие 
Web-сайты (т.е. внешние гиперссылки) выводились светло-зеленым цветом шриф- 
та, пурпурным цветом фона без подчеркивания. Более того, требуется, чтобы 
только внешние ссылки при наведении на них указателя мыши меняли цвет шриф- 
та на белый. Нет проблем. Добавьте на страницу следующие правила списка стилей: 

а.external {color:lightgreen; background-color:purple; 
text-decoration:none} 
a.external:hover {color:white; font-style:bold} 
Затем примените класс external для всех внешних гиперссылок, как показа- 
но в следующем примере: 
<а class="external" href="www.NVBizNet2.com"> 
Ссылка на другой сайт</а> 
X теперь представьте себе, что когда-нибудь вы решите изменить стиль всех 
внешних гиперссылок на сайте или изменить значение свойства hover этих ги- 
перссылок. Не ничего проще. Нужно только изменить значения свойств в одном 
или обоих правилах списка стилей, и стиль всех внешних ссылок на Web-сайте 
будет изменен. В этом-то и заключается мощь каскадных списков стилей.

Глава 4. Каскадные списки стилей 209 
Создание эффекта отбрасывания тени 
Несмотря на то что сеть Internet повидала немало изменений, одно осталось 
неизменным - загрузка и вывод на экран изображений (даже небольшого разме- 
ра) занимает больше времени, чем загрузка и визуализация страницы, содержа- 
щей только текст. Конечно, в этом нет ничего удивительного. Файлы графичес- 
ких изображений занимают больший объем, чем HTML-документы, поэтому для 
их передачи по Internet требуется больше времени. 
При необходимости создания трехмерного эффекта отбрасывания тени тек- 
стом баннера можно предположить, что потребуется преобразовать текст в изоб- 
ражение и только после этого наложить эффект. Тем не менее, графическое изоб- 
ражение текста баннера имеет намного больший размер, даже чем количество 
байт, необходимое для хранения двух копий самого текста. Поэтому для мини- 
мизации времени загрузки для баннеров желательно использовать только текст, а 
не его графическое изображение. Баннер можно создать с помощью операторов 
позиционирования каскадных списков стилей и обычного текста. 
Для создания текстового баннера с эффектом отбрасывания тени текстом (как 
показано на рис. 4.15) необходимо два текстовых элемента — один для текста 
баннера, а второй для его тени. Вставьте в список стилей правило для задания 
стиля и положения элемента баннера и еще одно правило для форматирования 
и позиционирования текста тени. Несмотря на то что текст баннера может быть 
любого цвета, для тени лучше использовать серый или черный цвет. 
ПРАКТИКУМ 
Давайте начнем с создания класса каскадного списка стилей, приведенного ниже, 
который позволяет требуемым образом отформатировать и установить положение 
баннера на Web-странице: 
.banner {position 
top 
left 
font-size 
font-family 
color 
absolute; 
7px; 
lpx; 
lOOpx; 
'arial black' 
red} 
Impact Arial Helvetica Verdana; 
' " • ' • • ' - • • ' - ' • - •• • • - ••^~• . . . — i 
Оравлв В*д Избранное Сервис 
J J -3 4 JU J ->-Ш- 
c j e j hnp //htmbvebdesign/ChaptertM/FigureO4-l 5 htm 
• M щ 1 1 1 mm %^^ 
Web Design 
Рис. 4.15. Текстовый баннер с эффектом отбрасывания тени

210 Глава 4. Каскадные списки стилей 
Затем добавьте на страницу класс отбрасывания тени, который использует тот 
же самый тип шрифта и тот же самый размер, что и класс banner. Как показано 
в следующем примере, для смещения текста тени относительно текста баннера 
задействуются свойства top и left, несколько отличные от соответствующих па- 
раметров класса banner! 
.shadow {position 
top 
left 
font-size 
font-family 
color 
absolute; 
15px; 
7px; 
lOOpx; 
1arial black' Impact Arial Helvetica Verdana; 
gray} 
В приведенном примере Web-браузер поместит класс, отмеченный стилем 
banner, на семь пикселей ниже верхнего края Web-страницы и на один пиксель 
правее ее левого края. Текст, отмеченный стилем shadow, будет расположен на 15 
пикселей ниже его края Web-страницы и на семь пикселей правее ее левого края. 
И, наконец, примените два определенные в списке стилей класса banner и 
shadow к идентичным текстовым элементам, содержащимся в двух контейнерах 
разделителях, как показано ниже: 
<body> 
<div class="banner">HTML & Web Design</div> 
<div class="shadow">HTML & Web Design</div> 
</body> 
Для достижения требуемого эффекта поэкспериментируйте со значениями 
СВОЙСТВ top И left класса shadow. 
Использование графических границ 
Независимо от того, создаете ли вы сайт компании или свой личный, добавь- 
те заметную границу или панель вдоль левого края каждой страницы сайта. По- 
добное форматирование позволяет сделать внешний вид страниц более привле- 
кательным и, как результат, посетитель будет чувствовать себя более "уютно" и 
останется на сайте дольше, особенно это касается страниц, содержащих мало 
графических изображений и много текста. Кроме того, граница служит отличи- 
тельной особенностью вашего сайта, на основе которой посетитель может опре- 
делить, остается ли он на одном и том же сайте или уже перешел на другой 
сайт. Когда граница исчезает или изменяется радикальным образом, посетители 
понимают, что они перешли на другой сайт. И, наконец, на Web-сайтах с не- 
сколькими разделами или отделами для различных разделов желательно исполь- 
зовать несколько отличающиеся границы, что также позволяет пользователям от- 
слеживать свое перемещение по сайту. 
ПРАКТИК 
Каскадные списки стилей позволяют без особых усилий создавать границу Web- 
страниц и изменять ее вид от страницы к странице и время от времени, если 
это будет необходимо. Как правило, граница состоит из маленьких квадратных

Глава 4. Каскадные списки стилей 211 
изображений или элементов мозаичного изображения, которые копируются Web- 
браузером и изображаются в качестве фона Web-страницы. Поэтому не удиви- 
тельно, что для создания границы используется свойство background-image кас- 
кадных списков стилей. Так, например, в центре страницы, показанной на рис. 
4.16, находится элемент мозаичного изображения, которое используется для 
формирования боковой панели, расположенной вдоль левого края страницы. 
.] httpy/htfnl-webdesign/ChapterO^/FigureO4-16 hit zl 
j
J 
Рис. 4.16. Web-страница с элементом мозаичного изображения 
и боковой панелью или границей вдоль левого края страницы 
Рис. 4.16. Web-страница с элементом мозаичного изображения 
и боковой панелью или границей вдоль левого края страницы 
Первый шаг на пути создания границы — рисование или загрузка небольшого 
изображения в формате GIF, которое будет использоваться для формирования 
границы. Для создания вашего собственного элемента мозаичного изображения 
можно воспользоваться таким графическим редактором, как Photoshop. Кроме 
того, можно взять готовое изображение из галереи картинок, поставляемой вмес- 
те с пакетом Microsoft Office, или выгрузить его из таких Web-сайтов, как 
Microsoft Design Gallery Live (http://dgi.microsoft.com). После получения тре- 
буемого изображения сохраните его в каталоге изображений Web-сайта (напри- 
мер, в каталоге images). Далее, вставьте на страницу следующее правило каскад- 
ного списка стилей: 
body {background-image:URL(images/TileFilename.gif); 
background-repeat:repeat-y} 
В приведенном примере свойство background-image указывает относитель- 
ный путь к файлу мозаичного изображения, которое должно выводится браузе- 
ром. Свойство background-repeat указывает Web-браузеру повторять изображе- 
ние в вертикальном направлении. Поскольку свойство background-position не 
было установлено, Web-браузер будет повторять изображение вдоль левого края 
страницы. Обратите внимание, что для замены изображения, используемого в 
качестве элемента мозаичного изображения, замените относительный адрес 
images/TileFilename.gif адресом файла вашего изображения. 
Для обновления Web-сайта, возможно, потребуется периодическая замена сти- 
ля границ страниц. К счастью, каскадные списки стилей делают сопровождение

212 Глава 4. Каскадные списки стилей 
сайта достаточно простой задачей. Создайте или выгрузите откуда-нибудь из 
Internet новое изображение, которое будет использоваться в качестве элемента 
мозаичного изображения и сохраните его в каталоге изображений. Затем замени- 
те путь в скобках после URL В правиле списка стилей таким образом, чтобы он 
указывал на новое изображение. 
Если сайт имеет несколько разделов, и вы хотите, чтобы от раздела к разделу 
вид границы менялся, создайте класс для селектора содержимого страницы (ь) 
для каждого раздела сайта. Таким образом, в списке стилей будут содержаться 
правила следующего вида: 
body.main {background-image:URL(images/TileFileNamel.gif) ; 
background-repeat:repeat-y} 
body.products {background-image:URL(images/TileFileName2.gif); 
background-repeat:repeat-y} 
body.custService {background-image:URL(images/TileFileName3.gif); 
background-repeat:repeat~y} 
body.employmentOps {background-image:URL(images/TileFileName4.gif); 
background-repeat:repeat-y} 
Для изменения вида границы для страниц одного раздела Web-сайта необхо- 
димо всего лишь изменить URL-адрес файла графического изображения, указан- 
ный в, классе соответствующего раздела сайта. Конечно, при создании несколь- 
ких классов селектора содержимого страницы (ь) в дескрипторы <body> 
Web-страниц необходимо ввести ссылку на один из классов. Например, дескрип- 
тор <body> ДЛЯ Web-страниц В разделе "Вакансии" ("Employment Opportunity") 
будет выглядеть следующим образом: 
<body class="employmentOps"> 
Расположение фоновых изображений 
и водяных знаков 
Сейчас лишь немногие Web-сайты ограничиваются страницами с текстом чер- 
ного цвета на белом фоне. Для выделения своих сайтов дизайнеры, как правило, 
используют отличительный цвет фона или вставляют границу или боковую па- 
нель (как было показано в предыдущем совете). Если сплошная заливка фона 
цветом — это не то, что вы хотите для своей Web-страницы, попробуйте восполь- 
зоваться правилами списков стилей для создания текстурного фона, вставки ло- 
готипа компании или "водяных Знаков". 
ПРАКТИКУМ 
Первый шаг на пути создания текстурного фона — рисование или загрузка не- 
большого изображения в формате GIF (файла текстуры), которое будет использо- 
ваться для формирования фона Web-страницы. Для создания вашего собственно- 
го элемента текстуры можно воспользоваться таким графическим редактором, как 
Photoshop. Кроме того, можно взять готовое изображение из галереи картинок, 
поставляемой вместе с пакетом Microsoft Office, или выгрузить его из таких Web- 

сайтов, как Microsoft Design Gallery Live (http://dgi.microsoft.com). После по-

Глава 4. Каскадные списки стилей 213 
лучения требуемого изображения сохраните его в каталоге изображений Web-сай- 
та (например, в каталоге images). Далее, вставьте на страницу следующее прави- 
ло каскадного списка стилей: 
body {background-image:url(images/marbleTile.gif)} 
Web-браузер создаст мозаику (т.е. выведет на экран копии) изображения, со- 
держащегося в файле, адрес которого указывается в скобках после url в правиле 
каскадного списка стилей в объявлении свойства background-image. В приведен- 
ном примере Web-браузер заполнит фон Web-страниц текстурой из файла 
marbieTiie.gif, как показано на рис. 4.17. Для изменения типа текстуры заме- 
ните images/marbleTile.gif относительным путем и именем файла, в котором 
содержится изображение выбранной текстуры. 
J - Г ч . ^ . | I ' l l ' ^ - У Г Т ' ' - - • • ^ • 1 ' ^ - ^ - - < - Т -.ТТ I 
I I - - . M I я= •QDea.ce .йнд Избранное С$реис 
• Ш A -JS : & & ^ : чУЧЛ Ш ' I 
Вместо сплошного цвета фона можно использовать 
графическое изображение (наподобие показанного 
ниже) для создания текстурированного фона. 
Графическое изображение (показанное выше в 
рамке) является источником построения текстуры, 
напоминающей мраморную плитку, на фоне Web- 
страницы. Web-браузер повторяет, то есть, 
выкладывает мозаикой изображение, пока не 
заполнит весь фон. 
Рис. 4.17. Web-страница с текстурным фоном 
"Водяной знак" напоминает текстурный фон в том, что он также представляет 
собой графическое изображение, выводимое позади другого содержимого Web- 
страницы. Тем не менее, "водяной знак" выводится на страницу только один раз 
и не копируется с целью заполнения всего фона Web-страницы. Более того, при 
пролистывании содержимого страницы в окне браузера желательно, чтобы "водя- 
ной знак" оставался на месте. К счастью, каскадные списки стилей предоставля- 
ют свойства фона, которые позволяют расположить на странице одну копию "во- 
дяного знака" и удерживать его на одном месте во время пролистывания 
содержимого страницы. 
В отличие от квадратного изображения размерами 50x50 пикселей, которое 
использовалось для создания текстурного фона, изображение "водяного знака" 
должно иметь большие'размеры. Например, при необходимости использования в 
качестве "водяного знака" логотипа компании изображение логотипа должно 
быть таким, каким оно должно выводиться на странице (см. рис. 4.18).

214 Глава 4. Каскадные списки стилей 
Г f^M'flf'"""""1'"1*'.' 
Файл Правка .3ид 
• • • 
ображениями и водяными знаками - Microsoft Internet Expl 
Qgpenc Сяравка• 
ЙЯрес jiJ] http //htm!^vebdesign;'Chepter04/Fiqure01-l: htm 
Если вы работаете в электрической компании, в качестве логотипа 
можно выбрать электрическую лампочку. 
"Водяной знак11 напоминает текстурный фон в том, что он также 
представляет собой графическое изображение, выводимое позади другого 
содержимого Web-страннцы. Тем HI- менее, "водяной знак" выводится на 
страницу только одни раз н не копируется с целью заполнения всего фона 
Web-страннцы. Более того, при про шамкании содержимого страницы в 
окне браузера желательно, чтобы "водяной знак" оставался на месте. 
CSS имеет свойство background, которое позволяет устанавливать 
"водяные знаки" на фоне Web сран ним. 
РИС. 4.18. Web-страница с логотипом компании (лампочкой) в качестве "водяного 
знака" 
Рис. 4.18. Web-страница слоготипом компании (лампочкой) вкачестве "водяного 
знака" 
Для помещения "водяного знака" в центр фона Web-страницы добавьте в спи- 
сок стилей следующее правило: 
body {background-image:URL(images/LightBulb.gif); 
background-repeat:no-repeat; 
background-position:center; 
background-attachment:fixed} . . , 
Как и в случае с текстурным фоном из предыдущего примера, свойство 
background-image устанавливает имя файла графического изображения, которое 
будет использоваться в качестве "водяного знака". В приведенном выше примере 
Web-браузер будет выводить на экран изображение из файла LightBulb.gif. 
Если вы хотите поместить на страницу другое изображение, замените images/ 
LightBulb.gif относительным адресом и именем файла изображения своего "во- 
дяного знака". Значение no-repeat свойства background-repeat указывает Web- 
браузеру выводить на страницу только одну копию изображения. Свойство 
background-position используется для задания положения изображения на 
странице, а значение fixed свойства background-attachment позволяет удержи- 
вать "водяной знак" во время пролистывания содержимого страницы. 
Как вы, наверное, догадываетесь, "водяной знак" можно размещать не только 
в центре Web-страницы. Синтаксис каскадных списков стилей предоставляет три 
метода указания местоположения "водяного знака": с помощью ключевого слова, 
с использованием единиц длины и процентных значений. Для позиционирова- 
ния "водяного знака" с помощью ключевого слова применяются значения top, 
bottom, left, right и (как было продемонстрировано в примере) center. Таким 
образом, для помещения "водяного знака" (фактически любого графического 
изображения) в нижний левый угол фона Web-страницы необходимо следующим- 
образом установить СВОЙСТВО background-position: 
background-position:bottom right; 
Использование единиц длины для позиционирования "водяного знака" пре- 
доставляет четкий контроль над его положением на странице. Для указания рас- 
стояния "водяного знака" от верхнего левого угла страницы можно воспользо-

Глава 4. Каскадные списки стилей 
ваться любыми единицами длины, имеющимися в каскадных списках стилей. 
Например, для вывода "водяного знака" на экран на расстоянии 70 пикселей от 
левого края и на расстоянии 100 пикселей от верхнего края страницы можно 
ВОСПОЛЬЗОВатЬСЯ СЛедуЮЩИМ Объявлением СВОЙСТВа background-position.* 
background-position:7Орх ЮОрх; 
Обратите внимание, что сначала указывается расстояние от левого, а затем от 
верхнего края страницы. 
Процентные значения, используемые для позиционирования фоновых изоб- 
ражений, аналогичны по своей функции единицам длины. Тем не менее, вместо 
точного задания положения верхнего левого угла изображения, указывается рас- 
стояние между изображениями и краями страницы в процентах от соответствую- 
щих размеров окна Web-браузера. Например, для помещения изображения на 
расстоянии 25% ширины окна от левого края страницы и 50% высоты окна от верх- 
него края страницы объявите свойство background-position следующим образом: 
background-position:25% 50% 
Обратите внимание, что при изменении размера окна браузера положение 
"водяного знака" будет меняться с целью сохранения постоянных процентных 
значений положения изображения на Web-странице. 
Плавающие изображения и текст 
На большинстве Web-страницы присутствуют как текст, так и изображения. 
Несмотря на то что старая поговорка о том, что одна картина может стоить ты- 
сячи слов, справедлива и сейчас, тем не менее, в сети Web изображения пока 
еще не заменили слов. Фактически страница, содержащая только изображения, 
для посетителя ничем не лучше страницы, содержащей только текст. Поэтому 
при создании Web-сайта большая часть работы по расположению элементов на 
странице будет связна с организацией обтекания текста вокруг изображений. В 
прошлом дизайнеры имели в своем распоряжении только атрибут align, кото- 
рый при использовании его с дескриптором <img> заставлял Web-браузер обте- 
кать изображение текстом слева или справа. Теперь появилось свойство float 
каскадных списков стилей, которое позволяет задавать обтекание текстом не 
только 
изображений, но, как показано на рис. 4.19, и других элементов Web-страницы. 
ПРАКТИКУМ 
При применении свойства float каскадных списков стилей к элементу вы изы- 
маете элемент из нормального потока и делаете из него "плавающий" элемент, 
который будет находиться слева или справа от элемента, следующего за ним. 
Предположим, например, что HTML-код Web-страницы содержит дескриптор 
<img>, за которым следует текст абзаца. В "нормальном" режиме Web-браузер по- 
местит на страницу изображение, а затем перед выводом на экран текста перей- 
дет на следующую строку. Чтобы изображение "плавало" слева от текста абзаца 
(как показано на рис. 4.19) задайте в дескрипторе <img> свойство float, как по- 

казано в следующем примере:

216 Глава 4. Каскадные списки стилей 
At the left is a power programmer. You can tell that he is powerful by 
die aura emanating from liis person as he types his programs. During 
business hours programmers appear as mere mortals. However, when 
(he lights go out, and they are left to wort in the dark, their true nature 
comes to the surface. 
Of course, who know? Is this fact or-is this fiction? All we know for sure, is 
that this is 
the second paragraph to the right of an imiige style as "float:!**!*!." 
R e S t y l e d L e v e l - 6 H e a d i n g . This is text that follows the 
level-6 heading 
to the right. Notice that when you float a 
beading right with "float:right", a paragraph element that follows the heading 
within the 
HTML might actually precede the heading on the Web page! 
hakespeare's Sonnets are 154 short poems published together with 
т called "A Lover's Complaint," in 1609. It seems clear, 
however, primarily on stylistic grounds, that many of tbe sonnets 
were written well before that date. For example, most scholars 
bold that sonnet 107 refers to the coronation of James I in 1603). 
Рис. 4.19. Web-страница с плавающим изображением, 
заголовком и символом в контейнере <span> 
<img style="floafc:left" border="0" src="Programmer-gif" 
width="146" height="148"> 
Аналогично, чтобы текст абзаца находился слева от изображения, укажите 
Web-браузеру, что изображение должно "плавать" справа от следующего элемента 
HTML-кода: 
<img style="float:right" border~"0" 
src="images/Shakespeare.gif" widths"110" height="132"> 
Как уже упоминалось, атрибут float можно использовать с любым элементом 
Web-страницы, а не только с изображениями. Например, для изменения стиля 
заголовка 6, чтобы он находился слева от текста абзаца (как показано на рис. 
4.19) вставьте в список стилей страницы следующее правило: 
h6 {float:left} 
Фактически плавающим можно сделать любой контейнер и объект, помещенный 
в контейнер. Предположим, например, что необходимо создать начальную заглав- 
ную букву, скажем, ш, с которой начинается последний абзац на странице, 
показан- 
ной на рис. 4.19. Для этого создадим следующий класс каскадного списка стилей: 
.fancyLetter { font-size:Зет; 
font-style:bold; 
color:yellow; 
background-color :blue; 
border-style:solid; 
border-width:6px; 
border-color:gray; float:left) 
Затем поместим требуемую букву в контейнерный дескриптор <span>: 
<span class="fancyLetter">M</span>eiccnHpoBCKHe <1>Сонеты</1> 
представляют собой 154 котортких поэмы, объединенные в одну поэму под названием.
..

Глава 4. Каскадные списки стилей 217 
Настройка внешнего вида списков 
HTML-код предоставляет возможность использования двух типов списков: 
упорядоченного (нумерованного) и ненумерованного (маркированного). Упорядо- 
ченный список используется в случае, когда важен порядок элементов в списке. 
Например, упорядоченный список применяется для перечисления шагов в такой 
процедуре, как рецепт приготовления какого-нибудь блюда, или в перечислении 
песен-хитов (в порядке количества проданных дисков). Для перечня же ингреди- 
ентов, используемых при приготовлении блюда, или перечня авторов книг будет 
использоваться неупорядоченный список. Оба* типа списков просты по форме: 
маркер элемента списка (число, буква, графическое изображение или символ) за 
которым следует собственно элемент списка. Тем не менее, правила каскадных 
списков стилей позволяют форматировать списки таким образом, чтобы они со- 
ответствовали общей форме всей Web-страницы, на которой они находятся. 
ПРАКТИКУМ 
Для форматирования маркеров элементов списков используется свойство liststyie-
type списков стилей. Допустимые значения свойства перечислены ниже: 
disk 
circle 
square 
decimal 
decimal-leading-zero 
lower-roman 
upper-roman 
lower-greek 
lower-alpha 
lower-latin 
upper-alpha 
upper-latin 
hebrew 
armenian 
georgian 
сjk-ideographic 
hirgana 
katana 
hirgana-iroha 
katana-iroha 
none 
inherit 
Заполненный кружочек. 
Незаполненный кружочек. 
Заполненный черный квадрат. 
1, 2, 3, 4, 5, и т.д. 
01, 02, 03, ..., 98, 99; или 001, 002, ..., 099, 100 и т.д. 
1, 11, 111, IV, V И Т.Д. 
I, II, III, IV, V и т.д. 
Традиционная греческая нумерация (символы для альфа, 
бета, гамма и т.д.). 
а, Ь, с, d, с и т.д. 
а, Ь, с, d, e и т.д. 
А, В, С, D, Е и т.д. 
А, В, С, D, Е и т.д. 
Традиционная еврейская нумерация. 
Традиционная армянская нумерация. 
Грузинская нумерация. 
Простые идеографические символы. 
a, i, u, e, о, ka, ki и т.д. 
А, 1, U, Е, О, KA, KI и т.д. 
i, го, ha, ni, ho, he, to и т.д. 
1, RO, НА, N1, НО, НЕ, ТО и т.д. 
Метка элемента списка отсутствует. 
Используется метка элемента родительского списка. 
Для применения стиля к маркерам элементов списка используется атрибут 
style в начальном дескрипторе списка. Например, для нумерации элементов 
упорядоченного (т.е. нумерованного) списка с помощью римских цифр в верхнем 
регистре используется следующий дескриптор <oi>:

218 Глава 4. Каскадные списки стилей 
<ol style="list-style-type:upper-roman"> 
Аналогично, для маркировки элементов неупорядоченного списка с помощью 
квадратного маркера воспользуйтесь следующим дескриптором <ui>: 
style="list-style-type:square"> 
При работе с неупорядоченными списками для использования в качестве 
маркера не стандартного символа, а графического изображения, можно прибег- 
нуть к услугам свойства list-style-image. Например, следующий дескриптор 
<ui> заставляет браузер в качестве маркера неупорядоченного списка использо- 
вать изображение ИЗ файла FancyDot.gif: 
<ul style="list-style-image:url(images/FancyDot.gif)"> 
И, наконец, свойство list-style-position используется для контроля поло- 
жения маркера элемента списка по отношению к тексту элемента списка. Свой- 
ство list-style-position МОЖеТ принимать СДЮ ИЗ Двух Значений: inside И 
outside. Значение outside используется при необходимости вставки маркеров 
списка вне текста элемента списка. Как показано в первом и третьем списке на 
рис. 4.20, при установке значения свойства list-style-position равным 
outside весь текст элемента списка будет находиться правее маркера* даже если 
текст занимает несколько строк. 
И, наоборот, при установке значения свойства list-style-position равным 
inside, как показано в следующем примере, маркер элемента списка становить- 
ся его частью: 
<ul style="list-style-type:square; list-style-position:inside"> 
t I./-.I.U . • • - . ..
&1й И»йронн 
ih-webdesign/CtioptertM/FigureCH 2 
Numbered List -- Uppercase Roman Numerals -- Default formatting for wrapped 
text. Щ 
I. First Item - This is what happens when Internet Explorer encounters a long 
item 
tn a list that the browser has to wrap onto a second line. As you will see in a 

moment, Internet Explorer's default behavior is "outside" styling of the 
wrapped 
text 
П. Second Item 
Ш. Third Item 
Bulleted List -- Square Bullets ~ list-style-position "INSIDE" 
*• First Item - Ibis is an example of what happens when you set the 
list-siyleposition 
property to "INSIDE". The Internet Explorer displays the wrapped text 
starting under the bullet character vs. under the first character in the 
preceding 
line. 
# Second Item 
* Third Item 
Bulleted List — Graphics Image for List-Item Markers -- list-style-posttion 
"Outside" 
«ft First Item • This is an example of what happens when you set the 
list-styleposition 
property to "OUTSIDE". The Internet Explorer displays the wrapped 
text starting under the first character in the preceding line. This is also 
Internet ft 
Рис. 4.20. Упорядоченный и неупорядоченный списки с длинными 
элементами текста, которые занимают несколько строк

Глава 4. Каскадные списки стилей 219 
Свойство list-style-type во втором списке, показанном на рис. 4.20, уста- 
новлено равным inside. Обратите внимание, что маркеры (графические точки) 
во втором списке выравниваются по первым буквам элементов фрвого и третьего 
списков. Причиной сдвига вправо явилось то, что Web-браузер визуализирует 
маркеры элементов списка внутри (т.е. в качестве части) каждого элемента списка.
 
Несмотря на то что примеры в этом совете показывают, 4to стили списков 
можно задавать в самих дескрипторах списков, тем не менеЬ, рекомендуется 
пользоваться форматированием списков одновременно для всех страниц сайта. 
Вместо индивидуального форматирования каждого неупорядоченного и упорядо- 
ченного списка выберите единственный формат, который будет самым подходя- 
щим для вашего сайта. Затем напишите правила списка стилей, которое будет 
одинаковым образом форматировать все списки. Например, ефи вам нравится, 
как выглядит список при установке значения свойства list-styjie-positionрав- 
ным inside, И, при ЭТОМ ХОТИТе ИСПОЛЬЗОВаТЬ маркеры ИЗ фай|та FancyDot.gif, 
напишите следующее правило: 
ul {list-style:url(images/FancyDot.gif) inside} 
Обратите внимание, что синтаксис каскадных списков стилей позволяет ис- 
пользовать сокращения. Если значения, объявленные в правиле, являются уни- 
кальными для данного конкретного свойства, Web-браузер применяет к свойству 
указанное значение автоматически. Сокращенная форма записи, используемая в 
приведенном выше примере, в развернутом виде может быть Записана следую- 
щим образом: 
ul {list-style-image:url(images/FancyDot.gif) 
list-style-position:inside} 
Создание эффектов текста и изображений 
с помощью фильтров 
При создании эффекта отбрасывания тени с помощью текста вместо исполь- 
зования графических изображений Web-браузер может загружать и выводить на 
экран Web-страницу несколько быстрее. К сожалению, некоторое Web-браузеры 
еще не поддерживают каскадные списки стилей. Как результат, |при использова- 
нии таких средств списков стилей, как абсолютное пози ционирование, некото- 
рые посетители не будут видеть созданных вами эффектов. Фактически, в зави- 
симости от свойств каскадных списков стилей, используемых для создания 
эффекта, отдельные посетители увидят часть Web-страницы в виде перекрываю- 
щегося текста. Другим словами, эффекты на основе каскадных Списков стилей в 
браузерах, не поддерживающих списков, не исчезают бесследно. 
Компания Microsoft расширила каскадные списки стилей зр счет введения 
свойств фильтрации, которые позволяют браузерам Internet Explorer (версии 4 и 
выше) визуализировать эффекты как на основе графики, так и цг основе текста. 
Web-браузеры, которые не могут использовать содержащиеся в кеде фильтры (со- 
держащиеся как в дескрипторе элемента Web-страницы, так и в списке стилей), 
выведут на экран элемент без специального эффекта. Как результат, несмотря на

220 Глава 4. Каскадные списки стилей 
то, что Web-страница будет выглядеть не так, как предполагалось, тем не менее, 
даже посетители с браузерам, не поддерживающими фильтров, смогут просмат- 
ривать ее содержимое. 
ПРАКТИКУМ 
Для создания эффекта с помощью свойства filter 
примените его подобно любому другому стилю кас- 
кадных списков стилей. Например, для создания 
гиперссылки с эффектом свечения, показанной на 
рис. 4.21, можно воспользоваться следующим свой- 
ством стиля в дескрипторе привязки: 
<а style="filter:glow(); width:100%; 
font-size:30pt; text-decoration:none" 
href="http:// 
www. NVBizNet .сот">Свечение</а> 
1 « * И* 
Stop 
4 Ф и л ь т р ы не б у д у т работать (т.'е. не бу- 
дут производить ожидаемого от них эффекта), если не ус- 
тановить свойство width элемента. Для графических 
элементов установите значение свойства width равным 
фактической ширине изображения, а для текстовых эле- 
ментов - равным 100% ширины элемента. 
Hqili 
Рис. 4.21. Web-страница с 
текстом, демонстрирующим 
эффекты различных фильтров Свойство filter может принимать следующие 
значения: 
Позволяет сделать элемент частично или полностью прозрачным. 
Размывает элемент, как если бы он перемещался с большой скоростью. 
Делает прозрачным указанный цвет в элементе. 
Отражает элемент в горизонтальном направлении. 
Отражает элемент в вертикальном направлении. 
Создает эффект свечения за счет добавления сияния вокруг элемента. 
Визуализирует элемент в черно-белых тонах, используя представление 
цветов элемента в шкале серого. 
Визуализирует элемент с обратным цветом и значением яркости. 
Проецирует на элемент источник света. 
Визуализирует элемент с указанным цветом фона и прозрачным цве- 
том переднего плана. 
Визуализирует элемент с тенью. 
Визуализирует элемент, отбрасывающий тень. 
Визуализирует элемент с эффектом волны за счет добавления синусо- 
идального искажения по оси х элемента. 
Визуализирует элемент в черно-белых тонах с обратным цветом и 
значением яркости. 
Синтаксис объявления фильтров, который должен соблюдаться при использо- 
вании их в дескрипторах элементов Web-страницы, показан в таблице 4.1. Не 
следует забывать, что свойство filter будет работать только в том случае, когда 

установлено свойство width элемента.

Глава 4. Каскадные списки стилей 221 
Таблица 
Свойство 
4.1. Свойства, 
Значения 
значения и синтаксис объявления свойства filter 
Синтаксис 
filter:alpha( 
opacity=0, 
f inishopacity=75, 
style=2, 
startx=0, 
starty=0, 
finishx=140, 
finishy=270) 
apha уровень непрозрачности: 0-100 (0 соответствует 
прозрачному состоянию, 100 — полностью непрозрачному) 
уровень finishopacity: 0-100 (0 соответствует 
прозрачному состоянию, 100 — полностью непрозрачному) 
style: 0=однородный, 1=линейный, 
2=радиальный, 3=прямоугольный 
startx: координата х для начала 
градиента непрозрачности 
starty: координата у для начала 
градиента непрозрачности 
finishx: координата х для конца 
градиента непрозрачности 
finishy: координата у для конца 
градиента непрозрачности 
. „__^_ | 
blur add: true=flo6aBHTb размытый объект filter :blur( 
к исходному объекту add=true, 
direction: направление движения, direction=45, 
вызвавшего размытость; 0-315° с шагом 45° strength=5) 
strength:uCToe число,соответствующее "глубине" размытости 
chroma color: цвет, который должен стать 
прозрачным; триплет #rrggbb 
filter:chroma( 
color=#FFFFFF) 
dropshadow color: цвет тени; триплет irrggbb 
offx: горизонтальное смещение тени 
offy: вертикальное смещение тени 
positive: ^ие=создавать тень для непрозрачных 
пикселей, false=arm прозрачных пикселей 
filter: 
dropshadow( 
color=#6699CC, 
offx=5,offy=5, 
positive=true) 
fliph 
flipv 
glow 
gray 
invert 
mask 
shadow 
color: цвет свечения; триплет irrggbb 
strength: интенсивность свечения 0-100 
\
color: цвет маскирования; триплет #rrggbb 
color: цвет тени; триплет #rrggbb 
direction: направление отбрасываемой 
тени: 0-315 градусов с шагом 45 градусов 
filter:fliph 
filter:flipv 
filter:glow( 
color=#6699CC, 
strength=5) 
filter:gray 
filter:invert 
filter:mask( 
color=#FFFFEO) 
filter:shadow( 
color=#ff0000, 
direction=90) 
add: true=дoбaвлять элемент с эффектом к исходному элементу f i l t e r : wave 
( 
freq: целое число волн add=true,freq=l, 
lightstrength: сила света в эффекта волн в % lightstrength=3, 
phase: угловое смешение в процентах от 360 градусов phase=0, 
strength: интенсивность эффекта волн st^ength=5) 
xray filter:xray

222 • Глава 4. Каскадные списки стилей 
Выравнивание надписей с элементами формы и 
добавление цветов в форму 
Как вы уже знаете из главы 3 книги, формы позволяют посетителям переда- 
вать вам данные, осуществлять поиск в базе данных или передавать данные при- 
ложению или сценарию, выполняемому на Web-сервере. Формы, как правило, со- 
держат прямоугольные поля ввода текста, флажки, переключатели и пару кнопок 
(используемые для передачи результатов формы и очистки элементов ввода формы). 
В общем случае, элементы ввода формы от формы к форме выглядят одинаково. 
С помощью правил каскадных списков стилей можно расширить используе- 
мую цветовую гамму и привлечь внимание к форме. Используя бросающийся в 
глаза цвет для пространства, окружающего элементы, вы можете дать посетителю 
возможность с одного взгляда оценить количество полей на форме. Более того, 
применяя правило каскадных списков стилей, которое выделяет надписи возле 
требуемых полей ввода, вы указываете посетителю, какие поля он должен запол- 
нить перед передачей результатов форме на Web-сервер для обработки. Кроме 
того, каскадные списки стилей предоставляют дополнительное средство управления 
положением на Web-странице текстовых надписей, элементов ввода и кнопок. 
ПРАКТИКУМ 
Для присвоения форме цвета фона, который будет выделять ее от другого содер- 
жимого страницы, поместите форму в элемент <div>, как показано в следующем 
примере: 
<div style="width:475px; background-color:#FFFFE0; 
border:limegreen lpx solod; padding:5px"> 
<form> 
. . . Элементы формы . . . 
</form> 
Здесь дескриптор <div> определяет область шириной 475 пикселей, в кото- 
рой находятся элементы формы. Несмотря на то что ширина элемента разделе- 
ния фиксирована (475 пикселей), длина формы (а, следовательно, и длина эле- 
мента разделения) определяется количеством, размерами и расположением 
элементов формы. 
Для расположения элементов на форме и подписей к ним используйте не 
HTML-таблицы, а элементы <div> и <span>. Для форматирования и позициони- 
рования элементов формы, помещенных в контейнеры <div> и <span>, создайте 
в списке стилей три класса: 
div.row {clear:both; padding-top:5px; font-size:12pt} 
div.row {clear:both; padding-top:12px} 
div.row span.label {float:left; width:110px; text-align:right} 
div.row span.element {float:right; width:375px; text-align:left} 
Свойство float в классах style,label и style .element указывает Web-брау- 
зеру, как располагать элементы внутри контейнера. Форматирование и позицио- 
нирование текстовых элементов (т.е. надписей) с помощью класса style.label

Глава 4. Каскадные списки стилей 223 
приводит к их выравниванию по левому краю других находящиеся в контейнере 
объектов. Применение же класса style.element для форматирования и позици- 
онирования элементов формы выравнивает их по правому краю других находя- 
щихся в контейнере объектов. 
Для форматирования и позиционирования дескрипторов <dijv> и <span>, со- 
держащих надписи и элементы ввода формы, используются классы div.row, 
span.label и span.element, определенные в предыдущем примере: 
<body> 
<div style="width:475px; background-color:#FFFFE0;' 
border:limegreen lpx solid; padding:5px"> 
<form> 
<div class="row"> 
<span class="label">Ямя:</врап> 
<span class="element"Xinput type="text" size="30"/ 
<div class="row"> 
<span class="label">Фамилия:</span> 
<span class="element"Xinput type="text" size="30" /x/span> 
<div class="row"> 
<span class="label">Адрес E-Mail:</span> 
<span class="element"Xinput type="text" size="30" /x/span> 
<div class="row"> 
<span class=" label"Жоиментарии: </span> 
<span class="element"Xtextarea cols="40" rows="10"X/textarea> 
</span> 
<p>&nbsp;« 
<div class="row"> 
<br />&nbsp;&nbsp;<input type="submit" 
уа1че="0тправить" />&nbsp;Snbsp; 
<input type="reset" value="Очистить" /> 
</div> 
</form> |—П 
</body> 
В результате будет получения форма, 
показанная на рис. 4.22. 
А теперь давайте предположим, что 
требуется отметить элементы формы, 
которые посетитель должен обязательно 
заполнить до передачи результатов фор- 
мы (т.е. нужно обозначить требуемые 
поля). Для этого создайте класс списка 
стилей, аналогичный показанному здесь 
классу span.reqLabel: 
div.row span.reqLabel 
{float:left; width;114px; 
text-align:right; 
color:red; font-weight:bold; 
background-color:yellow} 
Имя: I 
Фамилия: I 
Адрес Е- |~ 
Mail: 
Комментарии: 
i 
Отправить i Очистить j 
Рис. 4.22. Форма с элементами ввода и 
надписями, полученная с использованием 
классов каскадных списков стилей

224 Глава 4. Каскадные списки стилей 
Затем для каждого требуемого поля задайте в дескрипторе <span> атрибут 
class с указанием класса span.reqLabai. При этом не забудьте указать где-ни- 
будь возле кнопки Submit, что означает красный цвет. 
Кстати, значение 475 пикселей для атрибута width контейнера <div> — это 
не просто произвольное значение. Форма, используемая в качестве примера в 
ЭТОМ СОВете, требует 475 ПИКСелеЙ, При ЭТОМ ЩДМСЪ "Адрес электронной поч- 
ты:" при выводе ее красным полужирным шрифтом (на рисунке не показано) 
упирается в левый край формы, а многострочное поле ввода текста — в правый и 
нижний края формы. Для определения ширины дескрипторов <div>, которая 
требуется для вывода на экран форм, измените классы span,label и 
span.element, как показано ниже, для вывода на экран пунктирной границы 
вокруг каждого элемента раздела: 
div.row span.label {float:left; width;110px; text-align:right; 
border:Ipx dotted} 
div.row span.element {float:right; width;345px; text-align:left; 
border:Ipx dotted} 
Вывод на экран пунктирной границы вокруг каждого элемента раздела позво- 
ляет легко визуально проследить эффект изменения ширины разделителя в 
объявлениях классов span.label и span.element. Уменьшайте ширину каждого 
разделителя до тех пор, пока пунктирная граница не будет находиться непосред- 
ственно вокруг надписи или элемента ввода. 
Затем уменьшайте ширину контейнера формы, пока границы формы не вый- 
дут за границы контейнера, в котором содержатся элементы формы. Перед от- 
правкой готовой Web-страницы на Web-сервер не забудьте удалить объявление 
свойства border В описаниях классов span, label И span.element. 
Вывод на странице галереи миниатюр с заголовками 
Как вы уже знаете, миниатюра представляет собой уменьшенную версию пол- 
норазмерного изображения. Миниатюры для загрузки и вывода на экран требуют 
гораздо меньшего времени по сравнению с полными изображениями. При увели- 
чении размера выводимого на экран изображения увеличивается и размер файла, 
в котором это изображение хранится. А чем больше размер файла, тем больше 
времени требуется браузеру для загрузки и вывода изображения на экран. 
Миниатюры используются вместо полноразмерных изображений в тех случа- 
ях, когда вероятнее всего, посетитель просмотрит только некоторые изображения 
из имеющихся, при этом при просмотре на экран будет выводиться только по 
одному изображению. Несмотря на то что для еще большего сокращения време- 
ни загрузки и отображения Web-страницы можно использовать гиперссылки, ми- 
ниатюры, по крайней мере, позволяют получить определенное представление о 
виде полноразмерного изображения. Предположим, например, что вы создаете 
Web-сайт для риэлтора, у которое есть полноэкранные цифровые фотографии 
каждого продаваемого им дома. Вместо того чтобы заставлять посетителя загру- 
жать каждое полноэкранное изображение на экран, можно вывести миниатюры с 
размерами, в десять раз меньшими размеров реальных фотографий. Таким обра-

Глава 4. Каскадные списки стилей 225 
зом, вам удастся вывести десять фотографий за то же время, что выводится одна 
полноэкранная фотография. Если посетители) понравиться описание одного их 
домов, он может загрузить его полноэкранную фотографию. 
Если для выравнивания миниатюр изображений и надписей к ним использу- 
ется HTML-таблица, браузер не сможет варьировать количество йакетов, выводи- 
мых в одной строке, основываясь исключительно на размере окна браузера. 
Если, например, вы создали таблицу с 10 столбцами, браузер должен будет все- 
гда выводить в одной строке 10 миниатюр, даже если одновременно на экране в 
горизонтальном направлении будет помещаться, скажем, не более 5 миниатюр. 
Как результат, в этом случае посетителю для просмотра всех миниатюр придется 
пролистывать содержимое Web-страницы в горизонтальном направлении. С по- 
мощью каскадных списков стилей вы можете варьировать количество миниатюр, 
выводимых в окне Web-браузера, в зависимости от его ширины.| Таким образом, 
требования к нашей галерее миниатюр достаточно просты. В IjTML-документе 
напишите код, который будет вставлять изображение, за ним Поместите деск- 
риптор <Ьг> и текстовое описание, центрируемое под изображением. 
:.-.. " ПРАКТИКУМ 
Для указания Web-браузеру автоматически определять количество выводимых в 
строке изображений, поместите каждое изображение (и его заголовок) в отдель- 
ный контейнер <div> И выровняйте каждый такой контейнер 1ю левому краю. 
Кроме того, установите стиль элемента абзаца таким образом, чтобы- браузер 
центрировал текст абзаца между левым и правым краем контейнера, как показа- 
но в следующем коде; 
div.fLeft {float:left; padding-left:5рх; padding-right:$px} 
div.fLeft p {text-align:center} 
Первое правило создает класс fLeft, который можно применить к контейне- 
ру <div> для выравнивания контейнера (и его содержимого) по л|евому краю эле- 
мента, расположенного на Web-странице после контейнера <dijv>. Если в окне 
браузера нет места для вывода контейнера на экран в текущей строке, браузер 
перейдет в Строку под текущим контейнером <div> и выровшяет следующий 
контейнер по левому краю Web-страницы. Второе правило указывает браузеру цент- 
рировать текст абзаца между левым и правым краями контейнера <div>, формати- 
рование и позиционирование которого осуществляется с помощью класса fLeft. 
Таким образом, код для вывода на экран переменного количества макетов и 
заголовков к ним в одной строке будет выглядеть следующим образом: 
<body> 
<div class="fLeft"> 
<а href="housel.JPG"> 
<img src="housel_sm.JPG" width="100" height; 
alt="house 1" /> 
<br /x/a> 
<рХЭписание /<br /> 
Заголовок Kbr /> 
finbsp;</p>

226 Глава 4. Каскадные списки стилей 
<div class="fLeft"> 
<a href="house2.JPG"> 
<img src="house2_sm.JPG" width="100" height="100" border="0' 
alt="house 2" /> 
<br /x/a> 
<р>Описание /<br /> 
Заголовок 2<br /> 
Snbsp;</p> 
<div class="fLeft"> 
<a href="house3.JPG"> 
<img src="house3_sm.JPG" width="100" height="100" border= 
alt="house 3" /> 
<br /X/a> 
<р>Описание /<br /> 
Заголовок 3<br /> 
Snbsp;</p> 
<div class="fLeft"> 
<a href="house4.JPG"> 
<img src="house4_sm.JPG" width="100" height="100" border="0" 
alt="house 4" /> 
<br /X/a> 
<р>Описание /<br /> 
Заголовок 4<br /> 
&nbsp;</p> 
</body> 
Для правильной работы код этого примера требует, чтобы каждый заголовок 
макета содержал одно и то же количество строк, а длина каждой строки не пре- 
вышала ширины макета, под которым заголовок находится. Если одна или не- 
сколько строк длиннее миниатюры, Web-браузер, как и раньше, будет центриро- 
вать текст заголовка относительно краев контейнера. Тем не менее, миниатюра 
окажется слева, а не по центру над текстом. Для вставки полей между миниатю- 
рой и левым и правим краями контейнера <div>, как показано на рис. 4.23, 
воспользуйтесь объявлениями padding-left и padding-right в определении 
класса div.fLeft. 
Описание / Описал не / Описание / 
Заголовок 1 Заголовок 2 Заголовок 3 
Описание / 
Заголовок 4 
I 
Рис. 4.23. Миниатюры с полями слева и справа и центрированными заголовками

Глава 4. Каскадные списки стилей 227 
Отцентрируйте изображение в контейнере за счет введения полей между 
изображением и левым и правым краем контейнера <div>. При этом Web-брау- 
зер отцентрирует текст под изображением, конечно, если общая ц|ирина изображе- 
ния и полей с обеих сторон изображения больше, чем длина строкк заголовка. 
Управление курсором 
Помимо управления внешним видом текста на Web-странице, правила каскад- 
ных списков стилей позволяют заставлять Web-браузер выводить на экран указа- 
тель мыши определенного вида. Как правило, вид указателя мы|пи определяется 
автоматически на основании типа содержимого, которое в данный момент вре- 
мени находится под указателем. Например, Web-браузер автоматически заменяет 
указатель мыши по умолчанию (стрелочка) при подводе его к гиперссылке на 
указатель в виде руки. Изменение вида указателя позволяет посетителю понять, 
что под указателем находится не простой текст или изображение. 
Тем не менее, иногда Web-браузер не изменяет вид указателя, даже если на 
Web-странице находится специальный элемент, который посетитель может ис- 
пользовать. Например, в несколько HTML-дескрипторов можно включить атри- 
бут t i t l e . При наличии атрибута t i t l e Web-браузер при наве)цении 
указателя 
мыши на соответствующий элемент Web-страницы выводит на экран короткую 
подсказку. Предположим, например, что HTML-страница содержит следующий 
код:
<acronym title="KHnra HTML & Web Design Tips and Techniques"> 
HWDTT</acronym> предлагает прекрасный набор советов, которые можно 
использовать при исследовании Web-технологий. 
Если посетитель подведет указатель мыши к слову "HWDTT" В предложении 
"HWDTT предлагает прекрасный набор советов, которые можно использо- 
вать при исследовании web-технологий", Web-браузер выведет на экран на не- 
сколько секунд подсказку "Книга ШМЬ & Web Design Tips an<ji Techniques". 
ПРАКТИКУМ 
К сожалению, Web-браузеры не имеют никаких средств для сообщения посетите- 
лю о наличии подсказок, определенных с помощью атрибута titjie. Для предос- 
тавления визуального ориентира наличия на Web-странице скрытых возможнос- 
тей можно воспользоваться свойством cursor каскадных списков стилей, которое 
позволяет вывести на экран указатель мыши в виде указателя справки (как пра- 
вило, знака вопроса) при наведении посетителем указателя мыли на элемент 
Web-страницы. Например, для изменения внешнего вида указателя на знак воп- 
роса при подведении его к элементам, определенным с помощью дескрипторов 
<acronym>, <abbr>, ИЛИ Любым Другим Элементом, ОТМечеННЫМ КЛаССОМ help, 
включите в каскадный список стилей на странице следующий код: 
abbr, acronym, .help {border-bottom: Ipx dotted black; cursor:help} 
Правило списка стилей в данном примере фактически предоставляет два ви- 
зуальных ориентира, как показано на рис. 4.24.

228 Глава 4. Каскадные списки стилей 
L »"'••'-••••"•• .•••ТГТТ.1,••::•.|..:.-, :•. дсказок - Microsoft Internet 
Explore 
: Файл Правке Вид избранное Сервис Отраву а 
бдрее ].] hftp //html-webdestgn/ChapterO4/FiguretH-24 htm 
When a Web page has abbreviations and acronyms, you can give the visitor the 
foil text 
of the abbreviation by using the title attribute. 
However how does the visitor know that the following acronym HTWDTT has a long 
description? Well, if you write some CSS rules that underline abbrevia 
HTML & Web Design Tips & Techniques 
acronyms as well as other text that has a "title" available, you can help 'me 
VIMIUI UUL* \ , 3—' 
Rather than seeing nothing under "TGIF," the reader sees that the acronym has 
help text- 
-because of the underline. By hovering the mouse over the underlined text, the 
visitor 
will be able to see the "title" attribute value as a tool tip. 
This is also true of abbreviations. Everyone knows Mr. is an abbreviation for 
Mister. 
However, just in case, you can provide a tool Tip. 
In addition, you can create your on class of help text. For example, "help" in 
the 
preceding sentence is has a tool tip and is styled to alert the user to the 
tool tip using the 
<span> tag. 
J 
Рис. 4.24. Web-страница с всплывающими подсказками. Элементы, для которых 
определены 
всплывающие подсказки, отмечены пунктирным подчеркиванием 
Рис. 4.24. Web-страницас всплывающими подсказками. Элементы, для которых 
определены 
всплывающие подсказки, отмечены пунктирным подчеркиванием 
За счет подчеркивания текста пунктирной линией (не сплошной) вы отмечае- 
те аббревиатуры, сокращения и справочную информацию, находящиеся на стра- 
нице. (Текст, подчеркнутый черной пунктирной линией, означает, что для него 
имеется дополнительная информация.) Более того, чтобы посетитель не перепу- 
тал подчеркивание, означающее наличие справочной информации, с подчерки- 
ванием, обозначающим гиперссылки, правило указывает, что при наведении ука- 
зателя мыши на аббревиатуры и сокращения, объявленные с использованием 
атрибута t i t l e , Web-браузер должен использовать указатель в виде знака 
вопроса 
(указатель справки). 
А теперь, давайте предположим, что код из предыдущего примера будет пере- 
писан следующим образом: 
Книга <acronym title="HTML & Web Design Tips and Techniques'^ 
HTWDT</acronym> предлагает исключительно полезные советы 
на все случаи использования 
<span class="help" title="tables, forms, CSS, ASP, Graphics"> 
Web-технологий</span> 
В этом случае Web-браузер поместит пунктирное подчеркивание под словами 
"HWDTT" и "Web-технологии", что позволит посетителю понять, что для этих 
слов имеется дополнительная информация. При наведении указателя мыши на 
любой из этих элементов текста Web-браузер изменит внешний вид указателя, 
использующийся по умолчанию, на знак вопроса. Кроме того, если посетитель 
оставит указатель на месте на несколько секунд, на экране появиться всплываю- 
щая подсказка, текст которой определен в атрибуте t i t l e в HTML-коде Web- 
страницы. 
Допустимые значения свойства cursor и описания назначения каждого вида 
указателя мыши перечислены в таблице 4.2.

Глава 4. Каскадные списки стилей 229 
Таблица 4.2. Допустимые значения свойства cursor каскадных списков стилей 
Значение Описание 
свойства cursor 
auto Вид выводимого на экран указателя зависит от контекста. 
crosshair Простой курсор в виде перекрестья. 
default Указатель мыши, используемый Web-браузером по умолчанию. 
hand Указатель в виде руки, который, как правило, выводится на 
экран, когда указатель находится над участком изображения, 
на котором можно щелкнуть, или над гиперссылкой. 
move Указатель в виде стрелок, направленных в четыре стороны, 
который указывает, что элемент можно перемещать. 
e-resize,ne-resize, Указатель мыши, указывающий на возможность изменения 
nw-resize,n-resize, размера элемента. Как правило, такой указатель имеет вид 
se-resize,sw-resize, стрелки, направленной в соответствующую сторону: 
s-resize,w-resize е=восток, стрелка направлена вправо; в=юг, стрелка направ- 
лена вниз; гш=северо-запад, стрелка направлена по диагонали 
влево вверх, и т.д. 
text. Балочный указатель, предназначенный для выбора текста или 
указания места вставки. 
wait Указатель ожидания, как правило, имеет вид песочных часов, 
help Указатель справки, как правило, имеет вид Знака вопроса. 
Расположение элементов Web-страницы по слоям 
При позиционировании элементов на Web-странице вы работаете только с 
двумя размерностями. Например, для помещения формы на расстоянии 75 пик- 
селей от левого края и на расстоянии 50 пикселей от верхнего края страницы 
будет использоваться дескриптор <form> следующего вида: 
<form style="position:absolute; left:75; top:50"> 
Конечно, дескриптор <form> имеет такие дополнительные атрибуты, как 
action и method (для примера приведем всего лишь два атрибута), которые ука- 
зывают Web-браузеру, соответственно, куда передавать результаты заполнения 
формы и каким образом их форматировать перед передачей. Teii не менее, важ- 
но понимать, что правила каскадных списков стилей позволяфт устанавливать 
как абсолютное, так и относительное положение любого элемента-контейнера (а, 
следовательно, и элементов внутри контейнера) для правильного его позициони- 
рования на Web-странице. Аналогично, относительное позиционирование озна- 
чает, что указываемое вами положение элемента приводится относительно того 
положения, которое бы элемент занимал в Web-документе бе(з использования 
свойств позиционирования. 
Фактически при указании положения элемента в двух размерностях Web-брау- 
зер автоматически добавляет третью размерность (глубину). Предположим, на- 
пример, что в HTML-коде страницы содержится следующий код:

230 Глава 4. Каскадные списки стилей 
<h2 style="position:absolute; top:110px; left:75px; 
background-color:yellow; border:solid 2px; font-size:25pt"> 
Текст заголовка уровня-2 text</h2> 
<hl style="position:absolute; top:100px; left:50px; 
background-color:yellow; border*solid 2px; font-size:35pt"> 
Текст заголовка уровня-1 text</hl> 
На страницу будут выведены только заголовки уровня 1. Web-браузер "не за- 
был" поместить на страницу заголовок уровня 2. Как раз наоборот, браузер сна- 
чала помещает на страницу заголовок уровня 2 на расстоянии 100 пикселей от 
верхнего и на расстоянии 50 пикселей от левого края страницы. Затем поверх за- 
головка уровня 2 Web-браузер поместит заголовок уровня 1. Таким образом, ког- 
да стиль каскадного списка стиля заставляет браузер поместить элемент в поло- 
жение, где уже находится другой элемент страницы, браузер помещает новый 
элемент на слой поверх существующего элемента, если, конечно, заранее не уста- 
новить значение параметра z- index. 
Свойство z-index каскадных списков стилей позволяет выбирать слой, в ко- 
торый Web-браузер поместит элемент. При написании HTML-кода можно быстро 
запутаться, если одновременно использовать свойства позиционирования каскад- 
ных списков стилей и свойство z-index, которое контролирует взаимное нало- 
жение элементов страницы. 
Третья размерность, контролируемая с помощью свойства z-index, представляет 
собой указание по размещению элемента страницы по оси, перпендикулярной 
плоскости страницы. Чем меньше значение свойства z-index, тем ближе эле- 
мент к поверхности страницы. И, соответственно, чем больше значение свойства 
z-index, тем дальше находится слой элемента от поверхности страницы. Таким 
образом, если в HTML-код из предыдущего примера добавить следующие объяв- 
ления свойства z-index, Web-браузер будет выводить на экран заголовок уровня 
2 поверх заголовка уровня 1, как показано на рис. 4.25. 
<h2 style="position:absolute; top:110px; left:75px; z—index:2; 
background-color:yellow; border:solid 2px; font-size:25pt"> 
Текст заголовка уровня-2 text</h2> 
<hl style="position:absolute; top:100px; left:50px; z-index:1; 
background-color :yellow; border: solid 2px; font-size : 35pt"> 
Текст заголовка уровня-1 text</hl> 
Значение свойства z-index для первого элемента больше, чем для второго. 
Как результат Web-браузер будет выводить на экран первый элемент (заголовок 
уровня 2) на слое поверх второго элемента (заголовка уровня 1). 
Несмотря на то что значения свойства z-index могут быть отрицатель- 
ными, равными нулю или положительными, используйте только ноль и положительные 
значе- 
ния. Некоторые версии Web-браузеров неправильно позиционируют элементы с 
отрицатель- 
ными значениями свойства z-index (поверх элементов с положительными значениями).
 
Помните, что значение свойства z-index представляет собой относительное 
измерение. 
Таким образом, один элемент страницы можно поместить за другим за счет указания 
мень- 
шего (и не обязательно отрицательного) значения z-index.

Глава 4. Каскадные списки стилей 231 
Файл Правка Дид •Избранное Овраис .правко 
j . ^ '.:-.. Г.-^.^З.Й: :$ JJ ^ - > > Ш * . :;.:.•. 
1 бдрес!^] bftp//h\m\-webdesiqri/Cb&p\erOA/Fiq{}reQ4-25.btm vj! 
' • • • • • • • • -' ••• 
|Текст заголовка уровня-2 text 
уровня-1 text 
'I 
Рис. 4.25. Элемент с большим значением свойства z - i n d e x находится 
поверх элемента с меньшим значением свойства z-index 
Передача списка стилей через функцию проверки 
Передача каскадного списка стилей через функцию проверк*| чем-то напоми- 
нает проверку учителем вашего домашнего задания по каскаднкм спискам сти- 
лей перед получением окончательной оценки. Помимо проверки наличия оши- 
бок (например, неверных свойств или значений свойства), функция проверки 
каскадных списков стилей, находящаяся по адресу http://jigsaw.w3.
org/cssvaiidator/ 
также дает рекомендации по улучшению. Например, если передать 
следующий внешний каскадный список стилей функции проверки каскадных 
списков стилей комитета W3C, вы получите отчет, показанный на рис. 4.26: 
SI» 
Errors 
URI: (il6:J)localhost;C:fioute04-01d.css 
. Line: 0 Context : body 
Parse Error - colorbrown} 
Warnings 
URI : file:A1ocalhost.'C:\Rqure04-01cl.css 
* Line : 0 font-family: You are encouraged to offer a generic family as a last 
alternative 
Valid CSS information 
i hi { 
color : blue; 
font-si2e : 40px; 
font-family : garamond; 
color : white, 
background : green; 
font-family : helvetica; 
text-indent : lcm; 
Рис. 4.26. Отчет о проверке каскадного списка стилей от функции проверки

232 Глава 4. Каскадные списки стилей 
hi {coloriblue; font-size:40px; font-familyigaramond} 
p {color:white; background:green; font-family:helvetica; 
text-indent:lcm} 
body {background:#ADD8E6; color:maroon} 
Раздел "Errors" ("Ошибки") отчета показывает ошибки, которые необходимо 
ИСПравИТЬ, раздел "Warnings" ("Предупреждения") Отмечает Правила, КОТОрЬЮ, 
несмотря на их корректность, можно улучшить, и дает рекомендации по улучше- 
нию; раздел "Valid CSS Informations" ("Корректная CSS-информация") В 
конце отчета показывает, что в каскадном списке стилей было сделано правиль- 
но. 
Использование функции проверки каскадных списков стилей представляет собой 
простой процесс. Имейте в виду, что функция проверки позволяет проверять толь- 
ко внешние (связанные) списки стилей. Поэтому, если список стилей внедрен в 
раздел заголовка Web-страницы, для его проверки список потребуется скопировать 
во внешний файл, который можно будет отправить функции проверки. Для про- 
верки каскадного списка стилей выполните следующие действия: 
1. Если у вас нет постоянного соединения с сетью Internet, установите комму- 
тируемое соединение с помощью своего провайдера услуг Internet. 
2. Откройте Web-браузер, наберите в его адресной строке http:// 
jigsaw.w3.org/css-vaiidator/ и нажмите клавишу Enter. Web-браузер 
отобразит страницу W3C CSS Validation Service. 
3. Для отправки файла списка стилей функции.проверки нажмите гиперссыл- 
ку "Validate Your Cascading Style Sheet Source File By 
Upload" ("Проверьте свой исходный CSS-файл путем его загруз- 
ки"). Web-браузер выведет на Экран страницу "Validator" ("Средство 
проверки"), показанную на рис. 4.27. 
4. В ПОЛе "Upload A CSS Source File" ("Загрузите исходный CSS- 
файл") введите полный путь к внешнему файлу каскадного списка стилей. 
Для выбора файла списка стилей можно воспользоваться кнопкой 
"Browse" ("Просмотр"). 
5. Выберите уровень предупреждений (выпадающий список "Warnings" 
("Предупреждения")), профиль (выпадающий СПИСОК "Profile" ("Про- 
филь"); версия каскадного списка стилей) и значение в выпадающем спис- 
ке Medium (all, aural, Braille, handheld И Т.Д.). ЕСЛИ Проверяется СПИ- 
СОК стилей, предназначенный для использования Web-браузером в 
системах PC или Macintosh, оставьте значения, установленные по умолча- 
нию. 
6. Нажмите КНОПКУ "Submit This CSS File For Validation" ("Передать 
этот csS-файл на проверку"). Web-браузер отправит файл, выбранный 
на шаге 4, и предоставит отчет о проверке, аналогичный представленному 
в начале этого совета (см. рис. 4.26).

Глава 4. Каскадные списки стилей 233 
ack forward Stoo Refresh Home Seatdr Favoiitai ' Hitiwy 
Validator 
W3C CSS Validation Service 
Welcome to the W3C CSS Validation Service! 
Jiesflw 
Validate your cascading style sheet 
Enter the file name of the document you would like validated: 
Upload a CSS source file 
Warnings : |Normal report *] 
Profile : |KSSversion2 
Br 
i| Medium : jail *J 
Submit thie CSS m for validation Reset thie form 
style sheet needs ее. This means yc 
<ф internet 
Рис. 4.27. Страница установки опций функции проверки 
Несмотря на то что вы имеете возможность передавать функции проверки как 
полные списки стилей, так и отдельные правила с помощью нескольких мето- 
дов, старайтесь создавать и отправлять на проверку только внефние файлы спис- 
ков стилей. Во-первых, помещение правил во внешние связанные списки стилей 
в более полной мере задействует мощь списков стилей, которая позволяет при- 
вести к одному виду все страницы одного Web-сайта. Во-втор|ых, при передаче 
файла, содержащего только каскадный список стилей, вам не нужно беспокоится 
о том, что кто-нибудь просмотрит внедренный на страницу серверный сценарий 
и поставит под угрозу безопасность чувствительной информации, содержащейся 
на вашем Web-сайте.

XHTML и 
В этой главе 
I Преобразование HTML в XHTML с помощью HTML Tidy 
Выбор правильного значения OOCTYPE для Web-страницы 
Проверка Web-страницы с помощью функции проверки XHTML 
' Установка размера текста на XHTML-странице с помощью 
ключевых слов 
I Группировка элементов списка выбора XHTML-формы с 
I помощью дескриптора <optgroup> 
• Добавление цветов в XHTML-таблицы с помощью правил 
I каскадных списков стилей 
I Внедрение шрифтов на XHTML-страницу с помощью правил 
I каскадных списков стилей 
Вставка одной XHTML-страницы в другую с помощью 
внутритекстового фрейма 
Одновременное обновление нескольких внутритекстовых 
фреймов XHTML-страницы 
I Изменение внешнего вида XHTML-страницы на основе типа 
I целевой системы 
I Управление печатью XHTML-страницы Web-браузером

Глава 5. XHTML и новые тенденции 2 3 5 
главе 1 книги мы познакомились с языком гипертекстовой разметки 
(Hypertext Markup Language, HTML) и сетью Wbrld Wide Web. Вы узнали, что 
Web-браузеры запрашивают HTML-документы (т.е. Web-страницы) с Web-серверов. 
После получения Web-сервером HTML-запроса на передачу Web-стран цы он пе- 
редает требуемый документ по сети Internet Web-браузеру, который этот документ 
запросил. Web-браузер, в свою очередь, открывает полученный HTML-документ и 
следует содержащимся в файле инструкциям гипертекстовой разметки. Инструк- 
ции гипертекстовой разметки представляют собой HTML-дескрипторы и атрибу- 
ты, которые указывают Web-браузеру, где на экране поместить текст и объекты, и 
каким образом должны выглядеть текст на переднем плане и фон, на котором на- 
ходятся объекты на странице. 
Во время изучения советов этой книги вы создаете Web-стфни цы и, возмож- 
но, говорите себе: "В этом нет ничего сложного!11. И будете правы. Создание 
Web-страницы не требует наличия специального программного обеспечения или 
специальных знаний, все что понадобится — это текстовый редактор и понима- 
ние HTML. По иронии, простота создания Web-страниц явлфтся одной из са- 
мых больших сложностей. Наличие тысяч и тысяч людей, занимающихся разра- 
боткой Web-страниц, не дает возможности заставить всех писать HTML-код 
согласно одним и тем же правилам. Забудьте о том, что можнф заставить тысячу 
или даже сотню людей принять одни и те же правила, если да}ке два производи- 
теля самых популярных Web-браузеров не могут договориться о таких простых 
вещах, как один единственный дескриптор, позволяющий вставлять на страницу 
фоновую музыку. 
Ни компания Netscape, ни компания Microsoft не требуют от программистов 
писать правильный HTML-код (код в соответствии с рекомендациями консорци- 
ума W3C). Более того, браузеры Netscape Navigator и Internet Explorer, как и 
большинство других браузеров, пытаются "угадать", что программист имел в виду, 
когда написал неверный HTML-дескриптор. Как результат, размеры памяти, за- 
нимаемые браузерами, возрастают, поскольку их производителям приходится 
вносить код для обработки многих некорректных методов использования HTML- 
кодов, описывающих Web-страницы. Дополнительный код приводит не только к 
увеличению объемов браузеров, но и к появлению ошибок, которые в некоторых 
случаях даже верный HTML-код от одного браузера к другоЦу отображают по- 
разному. 
Для решения всех перечисленных выше проблем, связан ных с некорректным 
кодированием и слишком "снисходительными" Web-браузе^ами, консорциум 
W3C переписал HTML 4.01 как расширяемый язык разметки (Extensible Markup 
Language, XML). Отсюда и было получено новое имя спецификаци и (XML + 
HTML = XHTML). За счет применения жесткого синтаксиса объявления элемен- 
тов в XML к ранее менее жестким правилам HTML консорциум W3C надеется, 
что производители браузеров заставят программистов писать корректный 
XHTML-код. Так, например, синтаксический анализатор XML-кода ни при каких 
условиях не должен визуализировать неправильно закодированные XML-элемен- 
ты. Распространение XML-браузеров, которые визуализируют только корректно 
написанный XHTML-код, позволит всем программистам привыкнуть к правиль-

236 Глава 5. XHTML и новые тенденции 
ному созданию Web-документов и уменьшить производителям размеры браузеров 
(а, следовательно, и количество ошибок) в их продуктах. 
Несмотря на то что спецификация XHTML носит имя "новых" рекомендаций 
консорциума W3C, она не вносит новых возможностей в существующую специ- 
фикацию HTML 4.01. Фактически роль XHTML заключается в попытке предотв- 
ратить написание программистами некорректного HTML-кода за счет примене- 
ния жестких правил XML к HTML. Если вы ранее сталкивались с XML и 
бросили его из-за сложности создания даже простой XML-страницы, не беспо- 
койтесь. Страницы, совместимые с XHTML 1.0, можно создавать, даже ничего не 
зная о XML. Для написания XHTML-кода используются те же дескрипторы, ат- 
рибуты и каскадные списки стилей, что и в HTML, с которым вы уже знакомы. 
Если же вы обладаете некоторыми знаниями в XM L, вы наверняка поймете роль 
XHTML в будущем сети Internet. 
Помимо внесения некоторых "новых" правил кодирования в HTML (которые 
мы рассмотрим чуть ниже), XHTML является расширяемым (отсюда и буква Xв 
XHTML, от extensible — расширяемый) и модульным. Расширяемый означает, что 
язык XHTML позволяет, как производителям браузеров (в первую очередь), так и 
программистам, расширять HTML за счет добавления новых дескрипторов. Мо- 
дульный предполагает, что производители браузеров смогут уменьшить размеры 
их браузеров за счет исключения кода для XHTML-элементов, которые не требу- 
ются для их платформ. Ожидаемые в скором времени рекомендации консорциу- 
ма W3C четко укажут, какие дескрипторы будут принадлежать к каким поднабо- 
рам (или модулям) XHTML и предоставят формальный механизм добавления 
новых модулей для расширения языка и удаления существующих модулей для 
исключения ненужных элементов. 
Требования к созданию корректных XHTML-документов 
Прежде всего, следует понимать, что XHTML представляет собой версию 
HTML 4, написанную как XML-приложение. Это означает, что консорциум W3C 
изучил каждый HTML-дескриптор и нашел способ его определения с помощью 
XML. Как результат, с точки зрения Web-дизайнера XHTML-код Web-страницы 
выглядит практически так же, как и код Web-страницы, использующей HTML 4. 
В обоих случаях используются одни и те же дескрипторы и атрибуты, но имеет- 
ся и несколько исключений. 
В XHTML-документе пробел и косая черта ("/") служат для закрытия деск- 
рипторов, которые не являются контейнерами, например, дескрипторов <br> и 
<hr>, которые в XHTML выглядят следующим образом: </br> и </hr>. Кроме того, 
в будущем (но еще не сейчас) в XHTML-файле все внедренные сценарии, коммен- 
тарии и списки стилей будут содержаться в разделах CDATA, которые мы рассмот- 
рим, когда перейдем к изучению текущих XHTML-правил создания Web-страниц. 
Первая реакция на XHTML может оказаться приблизительно такой: "Прави- 
ла, правила! Нам не нужны эти чертовы правила!" Конечно, "интеллектуальная 
свобода" и "правила существуют для того, чтобы их нарушать" представляют со- 
бой те выражения, которые определяют сегодняшнее состояние сети Internet.

Глава 5. XHTML и новые тенденции 237 
Сеть Internet и не должна была стать большой библиотекой документов, где каждо- 

му человеку нужно следовать определенным правилам или иЦеть определенные 
средства для просмотра файлов. Вся идея Internet заключалась (и заключается) в 
со- 
здании средств, которые может получить любой человек, имеющий доступ в сеть, 
независимо от операционной системы, Web-браузера или платформы компьютера. 
Новые правила XHTML не имеют ничего общего с ограничением содержимо- 
го Web-страниц. Язык XHTML просто пытается добиться того, чтобы все пользо- 
вались одинаково одними и теми же дескрипторами, что позволит Web-браузе- 
рам визуализировать содержимое страницы без необходимости "угадывать", что 
ее автор имел в виду. С этой точки зрения, правила XHTML дают больше 
средств управления и могут привести к расширению круга посетителей вашего 
сайта. Если все будут работать в соответствии со стандартами, Производители бу- 

дут тратить меньше времени на разработку Web-браузеров, правильно визуализи- 
рующих HTML-страницы, кроме того, браузеры станут меньше, быстрее и позво- 
лят отображать "новые" мультимедийные объекты, которые вы поместили на 
свою Web-страницу. 
Вообще говоря, новые требования XHTML нельзя назват| устрашающими. 
Фактически, при подробно рассмотрении каждого нового правила в оставшейся 
части этой главы вы обнаружите, что некоторые из них вы уже |щвно соблюдаете. 
После обсуждения правил XHTML будет детально изучено описание типа доку- 
мента (Document Type Definition, DTD) — новое понятие и его значение для бу- 
дущих версий XHTML. Тем не менее, если вас больше интересует то, что имеет- 
ся "здесь и сейчас", а не то, что только появится в будущем, лкожно пропустить 
совет "Выбор правильного значения DOCTYPE ДЛЯ Web-страницы!1, который объяс- 
няет, каким образом выбирается правильное описание DTD для Web-страницы. 
Таким образом, если вы соблюдаете следующие правила, вы скоро научитесь 
писать правильный XHTML-код: 
• XHTML-документы должны быть правильно построены. 
• Элементы должны быть вложенными и не должны перекрываться. 
• Все имена элементов и атрибутов должны быть написанщ с использовани- 
ем символов нижнего регистра. 
• Открытые дескрипторы контейнеров должны быть закрыты, а пустые деск- 
рипторы должны иметь терминатор. 
• XHTML-документы должны начинаться с объявления DOCTYPE. 
• Значения всех атрибутов должны заключаться в кавычки. 
• XHTML-документы в разделе заголовка должны содержать элемент 
<title>. 
XHTML-документы должны быть правильно построены 
За исключением Web-страниц с фреймами, правильно построенный XHTML-до- 
кумент должен содержать корневой элемент <htmi>, содержащий два вложенных не 
перекрывающихся раздела ("head" и "body"), как показано в следующем примере: 
<html> 
<head>...</head>

238 Глава 5. XHTML и новые тенденции 
<body>...</body> 
</html> 
Раздел заголовка (между дескрипторами <head> и </head>) должен начинать- 
ся непосредственно после дескриптора <htmi>. Кроме того, раздел заголовка 
должен заканчиваться перед началом раздела тела документа (ограниченного дес- 
крипторами <body> и </body>). XHTML-документы с фреймами также должны 
быть правильно построены. Тем не менее, в них раздел <body> заменяется разде- 
лом <.rameset>, как показано в следующем примере: 
<html> 
<head>...</head> 
<frameset cols="100,400, * "> 
<frame src="FramedPagel.html" name="left"> 
<frame src="FramedPage2.html" name="right"> 
</frameset> 
</html> 
Если вы читали главу 1, то уже знакомы с дескрипторами разделов XHTML- 
документов — они ничем не отличаются от соответствующих дескрипторов 
<htmi>, <head> и <body>, которые были описаны в этой главе. Другими словами, 
дескрипторы разделов используются для организации XHTML-кода Web-страни- 
цы в виде двух контейнеров ("head" и "body", т.е. заголовок и тело страницы), 
которые помещаются в третий контейнер — "html". Каждый контейнер (или раз- 
дел) служит определенной цели, описанной ниже: 
• <htmix/htmi>. Контейнер "html", как и предполагает его имя, заключает 
в себе все XHTML-элементы, атрибуты, сценарии и списки стилей, обра- 
батываемые Web-браузером во время визуализации Web-страницы. Началь- 
ный дескриптор <htmi> должен находиться непосредственно после описа- 
ния DOCTYPE в начале XHTML-файла, а конечный дескриптор </htmi> — в 
самом конце XHTML-файла. 
<headx/head>. Web-браузер загружает содержимое "заголовка" Web-страни- 
цы в память для возможного последующего использования (например, сце- 
нариев и каскадных списков стилей), но не выводит его содержимое на са- 
мой Web-странице. Заголовок Web-страницы начинается с начального 
дескриптора <head> (который находится непосредственно после начально- 
го дескриптора <htmi> в начале XHTML-файла) и заканчивается конечным 
дескриптором </head>. Помимо списков стилей и клиентских сценариев в 
заголовок Web-страницы можно помещать дескрипторы, содержащие, на- 
пример, такую информацию, как имя автора Web-страницы, дату ее созда- 
ния и ключевые слова, которые могут использоваться поисковыми маши- 
нами при индексации Web-страницы для облегчения ее поиска 
посетителями. Кроме того, XHTML требует, чтобы в заголовки всех Web- 
страниц включался элемент <titie>. Из всей информации и HTML-деск- 
рипторов, помещаемых в заголовок Web-страницы, браузер выводит на эк- 
ран только текст, содержащийся между начальным и конечным 
дескрипторами (<titiex/titie>). Как правило, Web-браузер выводит 
этот текст в -строке заголовка окна браузера.

Глава 5. XHTML и новые тенденции 239 
• <bodyx/body>. Контейнер "body" Web-страницы находится непосредствен- 
но после раздела заголовка и содержит все элементы, которые должны вы- 
водится Web-браузером на странице. Начало раздела "body" обозначается 
начальным дескриптором <body>, который должен располагаться непосред- 
ственно после конечного дескриптора раздела заголовка </head>, и закан- 
чивается конечным дескриптором </body>, который находится непосред- 
ственно перед дескриптором </htmi>. 
Следующий код служит примером правильного расположения дескрипторов 
разделов XHTML-документа и содержит минимально необходимый набор деск- 
рипторов корректно построенного XHTML-документа: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"DTD/xhtmll-transitional.dtd"> 
<html> 
<headXtitle>Mon первая корректно составленная XHTML-страница 
</titleX/head> 
<body bgcolor="white"> 
<!-'- Здесь находится содержимое страницы, которое будЦг отображать 
браузер. —-> 
</body> 
</html> 
Обратите внимание, что все имена элементов и атрибутов Должны содержать 
только символы нижнего регистра. В отличие от языка HTML, в котором можно 
было использовать имена, состоящие из символов нижнего регистра, верхнего 
регистра или их комбинации, язык XHTML чувствителен к регистру и требует 
использования имен в нижнем регистре. Тем не менее, несмотря на то, что име- 
на атрибутов должны содержать только символы нижнего регистра, их значения 
могут состоять из символов в любом регистре; основное правило — значение 
каждого атрибута должно заключаться в кавычки. 
Элементы должны быть вложенными и не должны перекрываться 
Большинство Web-браузеров не обращают внимание на наличие перекрываю- 
щихся элементов, созданных с помощью кода, подобного следующему, в котором 
дескриптор <ъ> начинается внутри абзаца, а заканчивается вне его: 
<р>Следующее слово выводится полужирным: <Ь>полужирный</рХ/Ь> 
Формально перекрытие дескрипторов не допускается и в HTML, хотя и вос- 
принимается браузерами. Тем не менее, как уже говорилось, XHTML-документы 
должны быть правильно построены. Поэтому, в один прекрасный день, Web-брау- 
зеры перейдут на стандарты XHTML и не будут делать пред]толожений о том, 
что хотел их сказать автор, когда написал код с неверным синтаксисом языка 
XHTML. Если сейчас вы всегда указываете конечные дескрипторы элементов (и 
раздело©) в порядке, обратном порядку соответствующих начальных дескрипто- 
ров, элементы (и разделы) не будут перекрываться. Таким образом, строку кода 
из предыдущего примера можно переписать следующим образов: 
<р>Следующее слово выводится полужирным: <Ь>полужирный</Ь></р>

240 Глава 5. XHTML и новые тенденции 
Все имена элементов и атрибутов должны быть написаны 
с использованием символов нижнего регистра 
Язык HTML (в отличие от XHTML) не чувствителен к регистру, т.е. в HTML- 
документе дескриптор <BODY> ничем не будет отличаться от дескриптора <body>. 
Как результат, многие авторы, пытаясь сделать текст в своих Web-файлах более 
читабельным, пишут имена всех элементов символами верхнего регистра, за счет 
чего HTML-дескрипторы выделяются на фоне текста Web-страницы и атрибутов, 
представленных символам^ нижнего регистра. Таким образом, обычный HTML- 
документ может выглядеть следующим образом: 
<HTML> 
<НЕАБХТ1ТЬЕ>Заголовок КеЬ-страницы</Т1ТЬЕ></НЕМ)> 
<BODY bgcolor="lightyellow"> 
<Р>Это выводится цветом <1>по умолчанию</1Х/Р> 
<PXF0NT color="red">3TO выводится <В>красным</В> цветом</ГОЫТХ/Р> 
<Р>Это вновь выводится цветом по умолчанию</Р> 
</BODY> 
</HTML> 
К сожалению, несмотря на отличную читабельность, ни один из приведенных 
в этом примере дескрипторов не будет считаться допустимым в XHTML. 
Когда Web-браузер встречает дескриптор в XHTML-документе (да и в HTML- 
документе), он ищет этот дескриптор в определении типа документа (DTD). Как 
будет рассмотрено в описании DTD, приведенном после описания правил 
XHTML, определение DTD содержит список всех элементов (или дескрипторов) 
языка, а также список атрибутов для каждого дескриптора. При неправильном 
написании имени дескриптора (например, <boddy> вместо <body>) браузер не 
найдет соответствующего элемента в определении DTD, проигнорирует его и пе- 
рейдет к следующему дескриптору Web-документа. 
Поскольку язык XHTML чувствителен к регистру, а DTD-определение XHTML 
содержит описание всех элементов в нижнем регистре, все XHTML-дескрипторы 
должны содержать только символы нижнего регистра. В противном случае Web- 
браузер не найдет дескрипторы в DTD-определении и проигнорирует их как 
неопознанные элементы, что в случае дескриптора контейнера приведет к тому, 
что Web-браузер проигнорирует и содержимое дескриптора. Другими словами, 
DTD-определение XHTML содержит описание элемента <tabie>, но не содер- 
жит описания для элемента <TABLE>. Как результат, браузер пропустит таблицу и 
перейдет к следующему элементу. 
Несмотря на то что имена атрибутов также должны содержать только симво- 
лы нижнего регистра, их значения могут состоять из символов в любом регистре. 
Так, например, следующие три строки кода будут считаться эквивалентными: 
<body bgcolor="lightyellow"> 
<body bgcolor="LightYellow"> 
<body bgcolor="LIGHTYELLOW"> 
Открытые дескрипторы контейнеров должны быть закрыты, а пустые дескрип- 
торы должны иметь терминатор.

Глава 5. XHTML и новые тенденции 241 
Элементы Web-страницы, которые имеют и начальный и конечный дескрип- 
торы считаются "контейнерами", поскольку они включают или| содержат текст, 
изображения или объекты, которые Web-браузер выводит на э|фан. Например, 
следующий код представляет собой пример использования начального и конеч- 
ного дескрипторов абзаца (<рх/р>) для вывода на экран текста: 
<р>Это текст, находящийся в пределах контейнера типа "абзаца".</р> 
При вставке контейнера типа "абзаца" (определенного его начальным и ко- 
нечным дескрипторами) в HTML-код Web-страницы Web-браузер выводит на эк- 
ран содержимое контейнера (т.е. текст абзаца). 
Поскольку Web-браузер для каждого нового начального дескриптора абзаца 
вставляет пустую строку (и переходит на начало новой строки), м н о г и е 
авторы 
используют контейнер абзаца (т.е. дескриптор <р>) в качестве маркера абзаца 
для разделения абзацев, как показано в следующем примере: 
Первый абзац.<р> 
Второй абзац.<р> 
Третий абзац. 
Такой формат не является приемлемым в контексте XHTML. В XHTML-доку- 
менте каждый начальный дескриптор контейнера абзаца (<р>) дсрлжен закрывать- 
ся с помощью конечного дескриптора </р>. Требование по закрытию открытых 
контейнеров относится ко всем контейнерным дескрипторам, например, спискам 
(<uix/ui>, <oix/oi>), элементам списка (<iix/ii>), таблицам (<tabie> 
</table>), формам (<formX/form>) И Т.Д. 
Отсутствие конечных дескрипторов для элементов-контейнеЬов (как, напри- 
мер, для трех абзацев в приведенном выше коде) считается син таксически оши- 
бочным и в HTML. (Несмотря на то что браузеры не рассматривают это ошиб- 
кой.) Тем не менее, в отличие от HTML, язык XHTMLj требует, чтобы 
закрывались и элементы, которые не являются контейнерами |(так называемые 
"пустые" элементы). Таким образом, в HTML приведенный в предыдущем приме- 
ре код корректно можно записать в следующем виде: 
Первый раздел текста.<brXbr> 
Второй раздел текста.<brXb r> 
Третий раздел текста. 
Тем не менее, в XHTML даже пустой элемент <br> должен закрываться с по- 
мощью косой черты ("/"), которая отделяется от имени элемента пробелом, как 
показано в следующем примере: 
Первый раздел текста.<br /Xbr /> 
Второй раздел текста.<br /Xbr /> 
Требование по закрытию пустых дескрипторов также относится к дескрипто- 
рам изображений (<img />), фреймов (<frame />), метаданных (<meta />), MI 
ций (<option />), параметров (<param />) И Т.Д. 
Кроме того, терминатор пустых XHTML-дескрипторов может использоваться в 
качестве сокращенной формы закрытия пустых элементов-контейнеров. Напри-

242 Глава 5. XHTML и новые тенденции 
мер, в код XHTML-страницу для запуска Java-аплета MyAppiet. class можно по- 
местить следующий дескриптор <appiet>: 
<applet code="MyAppiet.class" width="200" height="200"X/applet> 
Несмотря на то что дескриптор <appiet> является контейнером, он не содер- 
жит данных, которые будут выводиться на экран Web-браузером, не поддержива- 
ющим аплеты. Для таких браузеров содержимое вставляется между дескриптора- 
ми контейнера (т.е. между начальным дескриптором <appiet> и конечным 
дескриптором </appiet>). Поскольку контейнер <appiet> пуст, конечный деск- 
риптор </appiet> можно заменить терминатором, как показано в следующем 
примере: 
<applet code="MyApplet.class" width="200" height="200" /> 
To же самое справедливо и для других контейнеров. Если контейнер пуст (т.е. 
после начального дескриптора и перед конечным дескриптором контейнера нет 
содержимого, выводимого на экран), контейнер можно закрывать с помощью ко- 
сой черты ("/") в конце начального дескриптора контейнера. 
Значения всех атрибутов должны заключаться в кавычки 
В HTML-документах часто можно найти немало дескрипторов, в которых ав- 
тор присвоил атрибутам числовые значения (а иногда и символьные значения, 
состоящие из одного слова) без использования кавычек. Например, можно 
встретить следующий дескриптор <tabie> в объявлении "невидимой" таблицы 
(т.е. таблицы, ширина границ которой равна нулю): 
<table border=0> 
Несмотря на то что приведенная строка является корректным объявлением в 
HTML, язык XHTML требует, чтобы все значения, как числовые, так и тексто- 
вые, заключались в кавычки. Поэтому, в XHTML объявление "невидимой" табли- 
цы должно выглядеть следующим образом: 
<table border="0"> 
Помимо заключения значений атрибутов в кавычки, язык XHTML требует, 
чтобы все атрибуты содержали значения. В HTML в том случае, когда атрибут 
имеет только одно значение, допускалось использовать сокращение, называемое 
минимизацией атрибута. Оно позволяло опускать значение атрибута и указывать 
только его имя. Например, для вставки на форму флажка используется дескрип- 
тор <±nput>, значение атрибута type которого равно "checkbox", как показано в 
следующем примере: 
<input type="checkbox" name=MWin98" value=ON"> 
При необходимости указания браузеру установить флажок, т.е. нарисовать "га- 
лочку", в HTML нужно было написать следующий дескриптор: 
<input type="checkbox" name="Win98" value=ON" checked>

Глава 5. XHTML и новые тенденции 2 43 
Поскольку атрибут checked имеет только одно допустимое значение 
("checked"), Web-браузер знает, что делать, когда он встречает в дескрипторе 
<input> атрибут checked без значения. Тем не менее, язык XHTML требует, что- 
бы все значения назначались атрибутам в явном виде (и в кавычках), даже если 
существует только одно значение. Таким образом, для приведенного выше при- 
мера для установленного по умолчанию флажка код потребуется переписать в 
следующей форме: 
<input type="checkbox" name="Win98" value=ON" 
XHTML-документы должны начинаться с объявления DOCTYPE 
Для экономии времени при наборе HTML-кода Web-страниЦ авторы, как пра- 
вило, опускают объявление DOCTYPE. В коде каждого \.еЬ-0раузера встроено 
DTD-определение. Оно представляет собой что-то вроде указателя на дороге, ко- 
торое помогает определить браузеру, как должны читаться HTMjL-дескрипторы (а 
теперь уже и XHTML-дескрипторы) и их атрибуты. 
Поскольку DTD-определение встроено в код каждого браузера, ранее не было 
необходимости дополнительно указывать файл, в котором можно найти описа- 
ние HTML-дескрипторов и их атрибутов. Независимо от DTD-рпределения, ука- 
занного в объявлении DOCTYPE, браузер всегда проверял содержимое своего внут- 
реннего DTD-определения, на основании которого он решал, что нужно сделать 
с тем или иным дескриптором или атрибутом. Таким образоЦ, если дизайнеры 
пользовались новыми атрибутами или дескрипторами, имеющимися, например, 
в версии HTML 4.01, браузеры, содержащие DTD-определени^ для HTML вер- 
сии 3.0, игнорировали "новые" дескрипторы и атрибуты; 
Объявление DOCTYPE В языке XHTML стало обязательным элементом, если, 
конечно, дизайнеры не определили собственный DTD-файл, содержащи й описа- 
ния всех используемых в XHTML-документе дескрипторов и атрибутов. Таким 
образом, браузер может загрузить Web-документ, считать содержимое объявления 
DOCTYPE и указать, какое DTD-определение нужно использовать для трактовки 
всех дескрипторов и атрибутов на странице. Если после проверки содержимого 
своего внутреннего кода браузер обнаружит, что встроенное DTD-определение не 
соответствует требованиям Web-страницы, требуемое определение будет выгруже- 
но с URL-адреса, указанного в объявлении DOCTYPE. 
Таким образом, браузеры в будущем будет иметь возможность поддерживать 
самые последние версии XHTML без необходимости выпуска ь|овой версии брау- 
зера. Web-дизайнеры будут использовать объявление DOCTYPE Д|ЛЯ указания DTD- 
определения для версии XHTML, которая использовалась д|ля создания Web- 
страницы. Если DTD-определение, необходимое для правильного отображения 
Web-страницы, уже встроено в код браузера, как и ранее, буДут использоваться 
описания дескрипторов и атрибутов из кода браузера. ECJJH же объявление 
DOCTYPE для правильного отображения содержимого Web-страйицы требует нали- 
чия DTD-определения, отличающегося от внутреннего DTD-ойределения браузе- 
ра, браузер загрузит необходимое определение с адреса, указанного в элементе 
<!DOCTYPE> СТраНИЦЫ.

244 Глава 5. XHTML и новые тенденции 
Правильно построенный XHTML-документ должен начинаться с объявления 
DOCTYPE, как показано н а примере первых двух строк следующего XHTML-кода 
Web-страницы: 
<\DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0 Transitional//ENn 
"http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<headXtitle>3aroflOBOK- Web-ca7paHimbi</titleX/head> 
<body> 
< ! - - Содержимое Web -страницы --> 
</body> 
</html> 
Несмотря на то что в приведенном примере элемент <? DOCTYPE> разбит на 
две строки, его можно поместить в одну строку XHTML-документа. Сколько бы 
строк не занимало объявление DOCTYPE, ОНО ДОЛЖНО находиться непосредственно 
перед дескриптором <htmi> в начале кода Web-страницы. Ниже в этой главе, в 
совете "Выбор правильного значения DOCTYPE ДЛЯ Web-страницы", будет расска- 
зано о написании объявления DOCTYPE, которое указывает корректное DTD-оп- 
ределение для данной страницы. А пока что давайте рассмотрим компоненты 
элемента <»DOCTYPE>, ЧТО ПОЗВОЛИТ вам написать свое собственное объявление 
DOCTYPE, когда это потребуется. 
В приведенном примере элемент <!DOCTYPE> содержит следующие компоненты: 
• html. Указывает, что корневым элементом документа является дескриптор 
<html>. 
• PUBLIC. Указывает, что элемент <»DOCTYPE> содержит формальный общедо- 
ступный идентификатор (formal public identifier, FPI), который приводится 
после ключевого слова PUBLIC. При.создании своего собственного DTD- 
определения ключевое слово PUBLIC ДОЛЖНО заменяться ключевым словом 
SYSTEM, а формальный открытый идентификатор (описанный ниже) дол- 
жен опускаться. 
• "-//W3C//DTD XHTML 1.0 Transitional//EN". Формальный ОбщеДОСТуП- 
ный идентификатор DTD-определения, необходимый для правильного чте- 
ния XHTML-кода Web-CTpaHH4bL Идентификатор FPI указывает конкрет- 
ное DTD-определение, а браузер сравнивает его с идентификатором своего 
внутреннего DTD-определения. Если идентификаторы совпадают, браузер 
использует внутреннее DTD-определение, в противном случае загружается 
DTD-определение, указанное в URL-адресе, который следует за FPI. Обра- 
тите внимание, что идентификатор FPI, если он присутствует, представля- 
ет собой строку, заключенную в кавычки, которая начинается с дефиса (-). 
• "http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd". Web-ад- 
pec, заключенный в кавычки, по которому браузер может выгрузить DTD- 
описание для данного документа, которое определяет и описывает синтак- 
сис для всех элементов и атрибутов, используемых в данном 
XHTML-документе.

Глава 5. XHTML и ноЬыетенденции 245 
XHTML-документы в разделе заголовка должны содержать 
элемент <title> 
Элемент <titie> не является нововведением XHTML. Фактически, несмотря 
на то, что ранее он считался необязательным, элемент <titie> появился еще в 
версии HTML 2.O. При посещении Web-страниц в сети Internet заголовок каждой 
страницы выводится в строке заголовка окна браузера. Заголовок Web-страницы 
присваивает имя и дает краткое описание содержимого и назначения страницы. 
Для создания заголовка Web-страницы поместите текст заголовка между на- 
чальным и конечным дескрипторами заголовка (<titiex/titi4>) в разделе за- 
головка Web-страницы, как показано в следующем примере: 
<html> 
<head> 
<Ъ1Ь1е>Осмысленный заголовок ЯеЬ-с*раницы</;Ь1Ь1е> 
</head> 
<body> 
. . . Содержимое Wc»b-страницы . . . 
</body> 
</html> 
Давайте в заголовке Web-страницы краткое описание ее содержимого. Таким 
образом, когда посетитель посмотрит на заголовок окна браузера, его название 
напомнит ему содержимое и назначение загруженной страницы. 
Помимо напоминания посетителям об открытой странице заголовки пресле- 
дуют следующие цели: 
• Web-браузеры используют заголовки в качестве имен закладок. В частно- 
сти, при выборе в меню Избранное | Добавить в избранное... (в Internet 
Explorer) или Закладки | Добавить закладку (в Netscape Navigator) Web-брау- 
зер переносит текст, содержащийся в элементе <titie> в список Избран- 
ное (для браузера Internet Explorer) или в перечень закладок (для браузера 
Netscape Navigator). 
• Слайдеры (автоматизированные программы поиска в Web) используют 
текст заголовка страницы для включения ее в поисковые машины. 
• Заголовки позволяют посетителям понять, в каком разделе многораздель- 
ного Web-сайта они находятся. Например, на сайте, посвященном Web-ди- 
зайну, все страницы, посвященные языкам разметки, можно объединить в 
раздел "HTML", страницы, посвященные PHP, JavaScript и ASP — в раздел 
"Сценарные языки", а страницы, посвященные анимации, видео и звуку, — 
в раздел "Мультимедиа". Начиная заголовок каждой страницы с названия 
раздела, вы даете посетителю возможность легко отслеживать свое положе- 
ние на сайте и возвращаться на заинтересовавшую его страницу. 
Что еще нужно знать о XHTML? 
Понимание нескольких простых правил, описанных в предыдущем разделе, 
уже дает вам возможность приступить к созданию XHTML-докуйентов. Поэтому, 
следующий раздел, посвященный утилите HTML Tidy, позволяющей конвертиро-

246 Глава 5. XHTML и новые тенденции 
вать существующие HTML-документы в XHTML-документы с помощью всего не- 
скольких щелчков мыши, можно пропустить. Конечно, если вы с самого начала 
привыкли правильно кодировать HTML-документы, новый XHTML-код будет 
мало чем отличаться от старого HTML-кода. Фактически, часто единственным 
отличием HTML- и XHTML-кодов будет то, что ранее незакрытые пустые деск- 
рипторы (не контейнеры) теперь получили терминатор (" /") (как было рассказа- 
но в описании правила "Открытые дескрипторы контейнеров должны быть зак- 
рыты, а пустые дескрипторы должны иметь терминатор" в предыдущем разделе. 
Другими словами, если вы знакомы с HTML, то вы знакомы и с XHTML. 
Вместо повторения описания всех тех дескрипторов и атрибутов, которые уже 
рассматривались в главе 1, представляя их в качестве "нового" материала для 
XHTML, в описании дескрипторов, атрибутов и их использования для создания 
Web-страниц мы будем ссылаться на соответствующий материал главы 1. 
При изучении советов этой главы следует помнить о том, что используемые 
дескрипторы являются частью стандарта HTML 4.01. Тем не менее, многие Web- 
браузеры их не поддерживают. Так, например, несмотря на то, что дескриптор 
<iframe> (описанный в совете "Вставка одной XHTML-страницы в другую с по- 
мощью внутритекстового фрейма") является частью спецификации HTML 4.0 (и 
4.01), большинство браузеров его не поддерживают. Кроме того, каскадные спис- 
ки стилей, которые используются уже на протяжении нескольких лет, более-ме- 
нее нормально поддерживаются только в. версии Internet Explorer 5.5 (и выше) и 
Netscape Navigator 6.1 (и выше). Таким образом, несмотря на то, что "формаль- 
но" приведенные в этой главе советы, применимые не только к XHTML и ис- 
пользующие отдельные элементы сравнительно новые языка HTML и некоторые 
свойства каскадных списков стилей, не будут работать в браузерах устаревших 
версий. Тем не менее, при появлении все большего количества "XHTML-совмес- 
тимых" Web-браузеров большинство (если не все) браузеры будут поддерживать 
методы, описанные в советах этой главы. 
При использовании новых возможностей следует заранее определиться с 
кругом посетителей вашего Web-сайта. Изучите данные сайта http:// 
www.w3schooi.com, который содержит информацию об используемых в сети бра- 
узерах и возможностях аппаратного обеспечения. Например, вы найдете на этом 
сайте (страница http: //www. w3school. com/browsers/browsers_stats . asp) СТа- 
тистические данные по используемым браузерам. После того, как вы определи- 
тесь, какой тип браузера будет применять большая часть потенциальной аудито- 
рии, изучите возможности браузера (как по версии, так и по типу). 
Соответствующие данные МОЖНО наЙТИ ПО адресу http://www.Webreview.com. 
Например, график на странице http://www.webreview.com/browsers/ 
browsers. shtml точно показывает, какие браузеры (версия и платформа) под- 
держивают фреймы, Java-аплеты, JavaScript и многие другие возможности. И, 
само собой разумеется, при создании своего сайта используйте только те эле- 
менты и методы работы с каскадными списками стилей, которые поддерживают- 
ся Web-браузерами, установленными в системах большинства потенциальных по- 
сетителей сайта.

Глава 5. XHTML и новые тенденции 2 47 
Использование раздела CDATA для сокрытия сценариев 
и списков стилей 
При внедрении в HTML-документы списков стилей или сценариев они, как 
правило, "скрываются" от браузеров, не поддерживающих каскадные списки сти- 
лей или сценарии, путем помещения между дескрипторами комментариев. На- 
пример, следующий HTML-код в заголовке страницы содержит внедренный спи- 
сок стилей, а в теле страницы — внедренный сценарий: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN 
"http://www.w3.org/TR/xhtmll/DTD/xhtmll-strict.dtd": 
<html> 
<head> 
<title>BHeflpeHne списков стилей и cxieHapneB</title> 
<style type="text/ess"> 
< ! - ** внедренный список стилей ™ 
body {background-color:lightyellow} 
p {color:blue; font-face:arial; font-weight:bold) 
—-> 
</style> 
</head> 
<body> 
<script type="text/JavaScript"> 
< * - ** внедренный сценарий 
If 5 < 10 
document/write ("<p>5 по-прежнему меньше 10 ! ! ! </p>" ) ; 
—-> 
</script> 
<!-- a ^н просто комментарий —-> 
<р>3десь начинается собственно текст Web-страницы.</р> 
</body> 
</html> 
В настоящее время приведенный код Web-страницы будет ко эректно работать 
в браузерах Netscape Navigator 6.2 и Internet Explorer 6. Болер того, функция 
проверки на сайте консорциума W3C (http://vaiidator.w3.ork) также укажет, 
что страница не содержит ошибок. Тем не менее, будущие версии XHTML-co- 
вместимых браузеров могут выводить эту страницу на экран с ошибками. В соот- 
ветствии со спецификацией XHTML 1.0, синтаксические анализаторы XML (в 
один прекрасный день все самые последние версии Web-браузеров станут син- 
таксическими анализаторами XML) могут удалять содержимое комментариев. Та- 
ким образом, несмотря на поддержку браузерами списков стилей и сценариев 
они могут их "не видеть", поскольку все комментарии будут игнорироваться 
(включая комментарии в элементах <styie>). 
К сожалению, нельзя просто убрать дескрипторы комментариев, окружающих 
описания списков стилей или сценариев, поскольку в этом случае синтаксичес- 
кий анализатор (т.е. Web-браузер) будет обрабатывать такие символы, как "< 
"&", "-—" и "]]>", содержащиеся в списке стилей или сценариЦ как элементы 
языка разметки. Так, например, Web-браузер будет считать знрк меньше (<) в 
приведенном ниже операторе if как начало дескриптора и ожидать, что за зна- 
ком последует имя дескриптора:

248 Глава 5. XHTML и новые тенденции 
If 5 < 10 
document/write ("<р>5 по-прежнему меньше 10! 
Итак, если дескриптор комментария использовать нельзя, но и опустить тоже 
нельзя, что же делать? 
Ответ состоит в следующем — можно использовать либо внешний список сти- 
лей или сценарий, или пометить внедренный список или сценарий в раздел 
ШАГА Аббревиатура ШАГА означает "символьные данные" (от англ. "character 
data"), которые при синтаксическом анализе Web-документа должны рассматри- 
ваться браузером как символьный литерал (т.е. строка текста). Таким образом, 
раздел CDATA по существу не является XHTML-дескриптором (отсюда и возмож- 
ность использования символов верхнего регистра). Раздел CDATA обозначает раз- 
дел или группу операторов, которые будут обрабатываться Web-браузером не так, 
как остальное содержимое XHTML-документа. 
Например, вместо внедрения сценария в заголовок Web-страницы в предыду- 
щем примере можно подготовить правила каскадного списка стилей во внешнем 
файле, скажем, с именем styles.ess, а затем в заголовке Web-страницы указать 
ссылку на внешний файл списка стилей: 
<style> 
<link type="text/ess" rel=stylesheet href="styles.ess" /> 
</style> 
Аналогично, для использования внешнего файла сценария необходимо помес- 
тить текст сценария в файл MyScript..js, а затем заменить элемент <script> на 
такой: 
<script type="text/JavaScript" scr="../scripts/Myscript.js" /> 
Если вы хотите оставить в XHTML-документе внедренные списки стилей или 
сценарии, переместите их в раздел CDATA. Раздел CDATA ничем не усложняет ра- 
боту. Единственная проблема заключается в том, что в настоящее время он под- 
держивается лишь немногими браузерами. Тем не менее, как уже говорилось, 
за торами тот день, когда все Web-браузеры станут синтаксическими анализато- 
рами XML. Поэтому, скоро разделы CDATA будут использоваться вместо дескрип- 
торов комментариев для скрытия списков стилей и сценариев. Именно поэтому 
мы сейчас и рассматриваем раздел CDATA. 
Раздел CDATA начинается так же, как и объявление DOCTYPE — со знака мень- 
ше и восклицательного знака ("<!"), как показано в следующем примере: 
<! [CDATA[If 5 < 10 
document/write ("<р>5 по-прежнему меньше 10 ! ! !</р>") ; ] ] > 
Обратите внимание, что сам раздел CDATA И его содержимое заключается в 
квадратные скобки ("["и "]"). Когда синтаксический анализатор XML встречает 
на XHTML-странице символы "<![DATA", ОН знает, что последующие символы 
вплоть до "] ]>" нужно трактовать как "отмененные".

Глава 5. XHTML и новые тенденции 249 
Преобразование HTML в XHTML с помощью HTML Tidy 
Даже факт, что что-то сделать очень легко, не означает, что все будет сделано 
правильно. Вы убедитесь в справедливости этого изречения, когда в качестве 
Web-дизайнера будете очередной раз исправлять неправильно построенный 
HTML-документ, не соответствующий стандарту W3C. Красота Web заключается 
в том, что Web-страницу может создать любой человек с помощью текстового ре- 
дактора. К сожалению, Web-браузеры (в частности, Netscape Navigator и Internet 
Explorer) позволяют "новоиспеченным" Web-дизайнерам писать у еряшливый код, 
в котором отсутствуют конечные дескрипторы, значения атрибутов приводятся 
без кавычек, таблицы созданы неправильно и т.д. Более того, и Netscape 
Navigator и Internet Explorer только подливают масла в огонь за счет "расшире- 
ния" HTML с помощью собственных дескрипторов. К счастью, XHTML позволит 
навести порядок в "дикой" сети Web, заставляя Web-авторов (и Wfeb-браузеры) со- 

блюдать единый "закон" — стандарт XHTML. 
Если вы, как и большинство Web-дизайнеров, работающих в жестких условиях 
временных ограничений, не желаете тратить свое время на исправление кода дру- 
гих людей, особенно когда за то же время можно создать новый "выдающийся" 
сайт, который принесет вам славу и уважение. Тем не менее, в Случае необходи- 
мости исправления кода и приведения его в соответствии со стандартом XHTML 
неоценимую помощь может оказать утилита HTML Tidy. В отлитие от программ 
проверки правильности HTML-кода (например, программы, доступной по адресу 
http://vaiidator.w3c.org/), HTML Tidy не только указывает на ошибки, но и 
исправляет большинство из них. Например, утилита HTML Tidy исправит ошиб- 
ки, связанные с отсутствием и несоответствием дескрипторов, содержащиеся в 
следующем HTML-коде: 
<л.Хп1>Заголовок уровня 1 выводится курсивом</л.> 
<р>Первый абзац с <Ь>выделенным полужирным важным текстом. 
<р>Второй параграф с дополнительным текстом, выделенным полужирным. 
Утилита HTML Tidy приведет этот код к следующему виду: 
<ЫХ±>Заголовок уровня 1 выводится курсивом</л.Х/Ы> 
<р>Первый абзац с <Ь>выделенным полужирным важным текстом.</ЬХ/р> 
<рХЬ>Второй параграф с дополнительным текстом, выделенным 
полужирным. </ЬХ/р> 
ПРАКТИКУМ 
Перед первым использованием утилиты HTML Tidy ее необходимо выгрузить из 
Internet, выполнив следующие действия: 
1. Если у вас нет постоянного соединения с сетью Internet, уст овите комму- 
тируемое соединение через своего провайдера. 
2. Откройте Web-браузер, наберите в его адресной Строке http:// 
www.w3.org/People/Raggett/tidy/#download И нажмите КШВИШу ENTER. 
На экране Web-браузера появится часть домашней страницы утилиты 
HTML Tidy, которая показана на рис. 5.1.

250 Глава 5. XHTML и новые тенденции 
3. Найдите исполняемый файл утилиты для соответствующей операционной 
системы. На домашней странице HTML Tidy содержатся гиперссылки на 
исполняемые файлы HTML Tidy для операционных систем Windows, 
UnixWare, Linux, OS/2, Solaris, FreeBSD и ряда других. (Кроме того, вы 
имеете возможность выгрузить исходный код утилиты, реализованный на 
языке программирования С, и скомпилировать свой собственный исполня- 
емый файл.) Для операционных систем Windows (95/98/NT/2000/XP) выг- 
рузите утилиту HTML Tidy с внешним интерфейсом Windows, щелкнув на 
гиперссылке TidyGUI. Ваш Web-браузер выведет на экран страницу http:/ 
/perso.wanadoo.fr/ablavier/TidyGUI/. 
4. Пролистайте до раздела "Download and Installation" ("Выгрузка и уста- 
новка"), который находится в конце страницы (или же в адресной стро- 
ке Web-браузера наберите http://perso.wanadoo.fr/ablavier/ 
TidyGUi/#downioad и нажмите клавишу ENTER). 
5. Щелкните на ссылке TidyGui-exe.zip. Web-браузер выведет на экран диа- 
логовое окно загрузки файла. (Вид диалогового окна зависит от типа ис- 
пользуемого Web-браузера и его версии.) 
6. В диалоговом окне выберите опцию, позволяющую выгрузить ZIP-файл и 
сохранить его на жесткий диск. Например, в Internet Explorer 6 в диалого- 
вом окне загрузки файла нажмите на кнопке "Сохранить". В ответ на это 
Web-браузер выведет на экран диалоговое окно "Сохранить как". (Вид диа- 
логового окна зависит от используемого Web-браузера.) 
7. Для выбора каталога, в котором будет сохранен ZIP-файл, воспользуйтесь 
выпадающим списком, находящимся правее поля "Папка". Например, ZIP- 
файл можно записать в каталог C:\webToois. Затем нажмите на кнопке "Со- 
хранить". Web-браузер сохранит файл TidyGUi-exe.zip в указанном каталоге. 
: .fci .i* 
1 -r* 
- • • 
View fjwoiles lool 
tlti /ftdy tourcelotoe net/1 
На Mnsttti 
И* 
Step Йв1г*Л Hone 
LW! "Из 
If you don 1 find a pre-built executable version of Tidy to download for your 
machine/OS in the 
tables below, look at the links on the right side of this page for vert ons of 
Tidy provided by 
various people. 
Documentation and source code are not included You may download 
rtflCtfmf1tffl'flfl and 
separately. 
These binary executable? are automatically built using SourceFortts's compile 
farm, from 
current CVS sources. These are command line programs only. birl1. from the 
sample code 
provided with Tidylib. They include support for Asian Character Encodings. 
UTF-1B Character 
Encodings, and WAJ Accessibility checks. 
Download t.ijj-дг versions of the compile farm executables 
6 September. 2003 caO44e0bc07Bfe0e3G6cel>b1750c95ie 
Б September. 2003 be79c39731O4bf75937bdFie7129e2619 
Б September. 2003 4tebadcbQS75ad261f4dS«7aa38b5eO<J 
6 September, 2003 6ftebd041985c066bdfB9cE;'c10a048f 
6 September, 2003 5e9bcd607760bcDf399aa960d60a2c 
1 June,20ОЭ 27b2ab1D616bcS9e7be7B:Sd6dd47Z13 
6 September. 2003 d3e81649da7dc,1fc7454efi7cfae7!b7 
lually built by various people on an ad hoc basis, an: are generally 
•-•-. by LM Passey 
"•••:•;•:• ".it.--.K< by Marc-Ande Lemburg 
Щ&А'.СОМ -rapper 
uses DPMI 
nOlafHopp 
n Ian Springer 
•-'•->, ""V: • •' ШШ " 
Рис. 5.1. Раздел выгрузки на домашней странице утилиты HTML Tidy

Глава 5. XHTML и новые тенденции 251 
После выполнения шага 7 извлеките из архива файл TidyGUI exe в каталог, в 
котором находится ZIP-архив. Для преобразования HTML- документа в XHTML- 
документ с помощью утилиты TidyGUI выполните следующие действия: 
1. Выберите Пуск | Выполнить. На экране появится диалоговое окно Запуск 
программы. 
2. В поле Открыть диалогового окна Запуск программы введите йуть к исполняе- 
мому файлу TidyGUI. Например, если файл TidyGui.exe находится в катало- 
ге C:\WebTools, наберите C:\WebT6ols\TidyGUI.exe. Нажмите на КНОПКе ОК. 
Утилита запустится и на экране появится окно, показанное на рис. 5.2. 
UJ 
Рис. 5.2. Главное окно утилиты HTML Tidy 
3. По умолчанию утилита TidyGUI будет проверять и исправлять содержимое 
HTML-файла, но не будет изменять тип документа. (Другими словами, 
если на вход утилиты поступает HTML-документ, на выходе вы т а к ж е по- 
лучите HTML-документ.) Для того чтобы утилита TidyGUI треобразовывала 
HTML-документы в XHTML-документы, измените ее настрою [ки, заданные по 
умолчанию, нажав на кнопке Configuration (Настройка). После э т о г о на экране 

появится окно Tidy Configuration (Настройка Tidy), показанное на ри с . 5 3. 
•i*MJj| .teanup 1 XML 
Doctype: jauto 
Encoding 1 payout j flpefetton 
W Add ffdy roeta elemenl Г Enckwel»* in BODY within-; 
1™ Suppress optional end tejjs I Enclose barf in bioc*. 
Mew empty lags: j 
New Ыоск-levet lags: f 
{Space DI comma sepsiatetf its 
wtthfK 
dtaat) 
d 
p>'. 
p>'« ч 
ioad... I Samas.. &ylbe-> Opboaitl 4K* 
Рис. 5.3. Окно настройки утилиты HTML Tidy 
4, Нажмите на кнопке XML и установите флажок Output As XHTML (Вывод в 
виде XHTML). 
5. Нажмите на кнопке Apply (Применить), а затем на кнопке s'gK-ggfgg 81Щ § 
верхнем правом углу диалогового окна Tidy Configurat o n . Окно Tidy 
Configuration закрывается и вы вернетесь к главному окну программы (см. ш а г 
2).

252 Глава 5. XHTML и новые тенденции 
6. В поле Source file (Исходный файл) в верхней части главного окна введите 
путь к HTML-документу, который необходимо преобразовать XHTML-доку- 
мент. Затем нажмите на кнопке Tidy! (Привести в порядок!), которая распо- 
ложена ниже поля Source file. Утилита Tidy GUI в верхней панели главного 
окна выведет общие комментарии и советы относительно кода HTML-до- 
кумента, а в нижней панели — предупреждения о необходимости внесения 
изменений. 
7. Для сохранения полученного XHTML-кода на диске нажмите на кнопке 
Show Output (Показать вывод), расположенной в нижней части главного 
окна TidyGUI. XHTML-код появится в диалоговом окне Tidy Output, как 
показано на рис. 5.4. 
idvGUI - 1.15 H l h August 2000I ЯН 13 I-,i..iv(iui|J« 
Source He: C\ShowMehtm 
1th August 2800) Parsing TAShowMe.Mm11 
;;\ShowMe.b*m: DoCtype givenк -i' 
C:\5howM е.Ыгтс Document content took 
у attribute should be uied to describe 
_ J 
^ line 11 column 7 • Warning: <Ы)1е> lacks "si 
. F Read-only 
IDOCTYPE html PUBLIC "-//W3C//DTD XHTHL 1.0 Transitional//EN 
http://ч«и.v3.ore/TR/xhtwll/DTD/xhtml1-transitlonal.dtd"> " 
:htrnl xmlr[a="http://uwu.w3 . org/1999/ x html "> 
raeta nani-;:-"generator" contenf="HTHL Tidy, see ^ни.шЗ.огд" /> 
text/htmi.; charset-ia 
/head> 
body> 
:center> 
<table border-"l"> 
tr> 
с-Туре" content" 
SB59-l" /> 
С А Г\, Л. . Л - . UTXJIJ 
8. Нажмите на кнопке Save As (Сохранить как), которая расположена в верх- 
нем левом углу диалогового- окна Tidy Output. На экране появится окно 
Save As (Сохранить как), которое позволит сохранить полученный XHTML- 
код в дисковый файл. 
После выполнения шага 8 для закрытия диалогового окна Tidy Output и воз- 
врата в главное окно TidyGUI нажмите кнопку закрытия окна в верхнем правом 
углу окна. Повторите шаги 6-8 для каждого преобразовываемого документа. 
Помимо преобразования HTML-документов в XHTML-документы, утилиту 
TidyGUI (или MS-DOS HTML Tidy) можно использовать для проверки правиль- 
ности HTML-, XHTML- и даже ХМL -документов. При необходимости проверки 
документа и исправления ошибок без изменения типа документа пропустите 
шаги 3—5 в описанной выше процедуре (или снимите отметку с флажка Output 
As XHTML на шаге 4). Без установки флажков на панели XML утилита TidyGUI 
будет генерировать выходной файл того же типа, что и входной. 
Утилита HTML Tidy содержит более 50 опций настройки, позволяющих уп- 
равлять процессом проверки и/или преобразования типа Web-документов. На- 
пример, задав для опции Doctype значение strict, установив флажок outputxhtmi 
и установив опцию clean равной yes, можно добиться того, что утилита 
HTML Tidy (и TidyGUI) будет генерировать XHTML-документ, соответствующий 
"строгому" DTD-определению XHTML 1.0. Атрибут clean указывает, что утилита 
должна заменять презентационные атрибуты и дескрипторы правилами каскад-

Глава 5. XHTML и новые тенденции 2 5 3 
ных списков стилей, как этого требует "строгое" DTD-определение. Подробное 
описание всех опций конфигурации приведено в разделе "Usin;l*A Configuration 
File" ("Использование конфигурационного файла") на домашней странице утили- 
ТЫ HTML Tidy ПО адресу http://www.w3.org/People/Raggett/tlldyttconfig 
Выбор правильного значения DOCTYPE 
для Web-страницы 
Теоретически говоря, любой Web-документ должен начинаться с объявления 
DOCTYPE, которое указывает Web-браузеру на тип содержащегося в файле кода. 
Тем не менее, большинство дизайнеров в коде HTML-страниц опускают такое 
объявление. Это возможно по той причине, что Web-браузеры "предполагают", 
что Web-файл содержит HTML-код (дескрипторы, атрибуты и текстовое содержи- 
мое) и для вывода данные на экран используют содержащиеся в фгйле инструкции. 
В отличие от предыдущих версий HTML, спецификация ХН ML требует обя- 
зательного задания объявления DOCTYPE перед указанием "корневого" 
(т.е. дескриптора <htmi>), как показано в следующем примере: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN1 
"http://www.w3.org/TR/xhtmll/DTD/xhtmll-strict.dtd11 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>XHTML-документ с объявлением DOCTYPE</title> 
</head> 
<body> 
<р>Содержимое Web-страницы.</р> 
</body> 
</html> 
Значение "html", которое в приведенном выше примере следует за ключевым 
словом DOCTYPE, указывает Web-браузеру, что данный файл содержит HTML-код. 
За ключевым словом PUBLIC В объявлении DOCTYPE находится литерал (т.е. стро- 
ка, заключенная в кавычки), называемый "формальным общедоступным иденти- 
фикатором" (formal public identifier, FPI). Формальный общедоступный иденти- 
фикатор идентифицирует DTD-определение Web-документа, которое в данном 
случае соответствует "строгой" версии спецификации W3C XHTML 1.0. Буквы EN 
в конце идентификатора говорят о том, что указанная идентификатором специ- 
фикация разработана на английском языке. И, наконец, объявлен ие DOCTYPE со- 
держит URL-адрес (в кавычках), по которому Web-браузер может получить задан- 
ное DTD-определение (в приведенном примере это http:/jwww.w3c.org/TR/ 
xhtmll/DTD/xhtmll-strict.dtd). 
DTD-определение представляет собой файл, содержащий описание всех пра- 
вил языка разметки и все символьные элементы, которые могут использоваться 
на в HTML-коде Web-страницы. В "языковых" терминах DTD-определение содер- 
жит все специальные символы, слова и синтаксические правила, которые управ- 
ляют методами комбинирования слов в предложения, описывающие Web-страни- 
цу. Указывая, что Web-документ "строго" соответствует, например, стандарту 
XHTML 1.0, вы говорите Web-браузеру, что содержимое Web-страницы находится

254 Глава 5. XHTML и новые тенденции 
в четком соответствии со стандартом, описываемом DTD-определением. Поэтому 
любые дескрипторы и атрибуты, отсутствующие в DTD-определении, будут считать- 
ся текстом. Более того, браузер не будет выводить на экран неправильно 
построен- 
ные элементы (например, абзацы, объявленные без конечного дескриптора </р>). 
ПРАКТИКУМ 
В настоящее время существуют три типа XHTML-документов: Strict, Transitional 
и Frameset. Определение Strict DTD, как показано ниже, используется для Web- 
документов, не содержащих устаревших элементов или атрибутов, и для форма- 
тирования и позиционирования элементов, для которого используются правила 
каскадных списков стилей: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3c.org/TR/xhtmll/DTD/xhtmll-strict.dtd"> 
Файл Web-страницы, содержащий приведенное в этом примере объявление 
DOCTYPE, не может использовать дескрипторы и атрибуты, которые в специфика- 
ции HTML 4.0 отмечены как "DEPRECATED" (то есть, их применение не одоб- 
ряется). Поскольку такие дескрипторы и атрибуты отсутствуют в определении 
Strict DTD версии XHTML 1.0 (http://www.w3c.org/TR/xhtmll/DTD/xhtmlstrict.
dtd), при использовании их в коде Web-страницы они будут игнориро- 
ваться. 
Если в коде Web-страницы содержатся устаревшие дескрипторы и/или атри- 
буты, в объявлении DOCTYPE установите определение Transitional DTD, как пока- 
зано в следующем примере: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//ENM 
"http://www.w3c.org/TR/xhtmll/DTD/xhtmll-transitional.dtd"> 
Если ваш Web-сайт должен поддерживать посетителей, пользующихся устарев- 
шими версиями браузеров, не поддерживающих каскадные списки стилей, необ- 
ходимо отдавать предпочтение определению Transitional DTD, поскольку вы вы- 
нуждены пользоваться устаревшими HTML-дескрипторами и атрибутами 
(например, дескрипторами <center>, <font> И атрибутами align, color, face И 
т.д.), которые управляют внешним видом элементов страниц. 
И, наконец, для Web-страниц, в которых для разделения содержимого окна 
браузера применяются HTML-фреймы, позволяющие одновременно выводить на 
экран несколько Web-страниц, устанавливается определение Frameset DTD, как 
показано в следующем примере: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" 
"http://www.w3c.org/TR/xhtmll/DTD/xhtmll-frameset.dtd"> 
Помимо элементов и атрибутов, имеющих отношение к фреймам, определе- 
ние Frameset DTD содержит атрибуты и элементы, присутствующие в определе- 
нии Transitional DTD. 
Несмотря на то что при указании определений Transitional DTD и Frameset 
DTD вы имеете возможность пользоваться устаревшими дескрипторами, по воз- 
можности этого следует избегать. Консорциум W3C убрал все устаревшие деск-

Глава 5. XHTML и новые тенденции 255 
рипторы из новой версии спецификаций XHTML 1.1 (выход в свет которой ожи- 
дается в скором времени). Таким образом, отказ от использован | устаревших 
дескрипторов сэкономит вам время в будущем. Перечень устаревших деск- 
рипторов МОЖНО наЙТИ ПО адресу http://www.w3c.org/TR/html4/index/ 
eiements.html. На этой странице приведена таблица, содержащая все элементы 
(дескрипторы) спецификации HTML 4.01 (и XHTML 1.0). Обратите внимание, 
что устаревшие дескрипторы отмечены буквой "в" столбце "Depr". От использо- 
вания этих элементов на всех XHTML-страницах рекомендуется отказаться. 
Проверка Web-страницы с помощью функции 
проверки XHTML 
В прошлом браузеры Netscape Navigator и Internet Explorer были очень "вели- 
кодушными" и прощали многие ошибки, связанные с неправильно построенны- 
ми HTML-страницами. Если вы, например, забыли указать дескриптор </body>, 
браузеры все равно правильно визуализировали содержимое Web страницы. Ана- 
логично, если вы забыли заключить значение атрибута в кавычки, браузеры все 
равно использовали его при визуализации. Более того, оба типа Зраузеров могли 
правильно выводить на экран содержимое Web-страницы, в HTML-коде которых 
дескрипторы были вложены некорректно, как показано в следующем примере: 
<рХЬ2ХсепЪег>Пример: <Ь>Некорректное</Ь> сложение .</h2X/center> 
То, что отрывалось первым, закрывать необходимо < 
В приведенном фрагменте кода начальный и конечный дескрипторы центри- 
рования (<centerx/center>) должны заключать в себя начальный и конечный 
дескрипторы заголовка уровня 2 (<h2x/h2>), а дескриптор </р> после слова 
last должен находиться за дескриптором </ь>. 
Возможность "понимания" браузерами кода, построенного не в соответствии 
со стандартом HTML (определенным в спецификации консорциума W3C), не 
проходит незаметно. Приложения браузеров стали большими по размерам, по- 
скольку компаниям Netscape и Microsoft приходится вводить код распознания 
неправильно построенного HTML-кода и обработки дескрипторов, которые каж- 
дая из компаний ввела в качестве собственного "расширения" HTML. Чем боль- 
ше размер браузера, тем медленнее он загружается и выполняется. Кроме того, 
больший объем кода означает большее количество ошибок (приводящих к невер- 
ному поведению браузера или к "зависанию" системы), а использование соб- 
ственных дескрипторов и атрибутов компаний приводит к тому, что Web-страни- 
ца, которая прекрасно выглядит в одном браузере, может плохо выглядеть или 
даже вообще не выводиться в другом браузере. Стандарт XHTML представляет 
собой попытку внести хотя бы частичное решение всех этих проблем Web-дизайна. 
Если указано, что Web-страница полностью соответствует стандарту XHTML, 
Web-браузеры знают, что все используемые на Web-странице дескрипторы, атри- 
буты и правила синтаксргса можно найти в DTD-определении. (Чтобы HTML-код 
Web-страницы полностью соответствовал стандарту XHTML, в начале каждого 
файла Web-документа должно находиться объявление DOCTYPE.) Все, что браузер

:>56 Глава 5. XHTML и новые тенденции 
не найдет в своем внутреннем DTD-определении, будет выводиться на экран в 
зиде простого текста или вообще игнорироваться. Это справедливо в отношении 
неправильно достроенного HTML-кода, приведенного в начале этого совета. 
Если объявление DOCTYPE указывает, что код Web-страницы соответствует, напри- 
мер, описанию Strict DTD для XHTML 1.0, Web-браузер должен придерживаться 
правил, установленных в этом определении и игнорировать HTML-код, синтак- 
сис которого не соблюдает требований определения Strict DTD. В настоящее 
время Netscape Navigator 6 и Internet Explorer 6 визуализируют неправильно по- 
строенный HTML-код даже при установке в объявлении DOCTYPE определения 
Strict DTD для XHTML 1.0. Тем не менее, чтобы гарантировать, что Web-страни- 
цы будут корректно выводиться в Web -браузерах следующего поколения, необхо- 
димо четко соблюдать все рекомендации консорциума W3C. 
ПРАКТИКУМ 
После создания Web-страницы для проверки соответствия ее кода требованиям 
стандарта консорциума W3C следует воспользоваться службой HTML Validation 
по адресу http://vaiidator.w3.org/. Для использования службы проверки кода 
необходимо выполнить такие действия: 
1. Если у вас нет постоянного соединения с сетью Internet, установите комму- 
тируемое соединение с помощью своего провайдера. 
2. Откройте Web-браузер, наберите в его адресной строке http:// 
vaiidator.w3.org/ и нажмите клавишу ENTER. На экране Web-браузера 
появится страница W3C HTML Validation Service, показанная на рис. 5.5. 
.fe .o* ш* rival 
Hcanv ' Se«rft • . Fevoiitet Hirtcy M«i Pint 
* Markup Validation Service 
Welcome to the W3C Markup Validation Service; a free service that checks 
documents like HTML 
and XHTML for conformance to W3C Recommendations and other standards. 
Validate Files 
You can enter a URI in the Address field below, and have» the page validated' 
Address: I Validate ШГ. j 
If you want to upload a file from your computer and have it validated, you can 
use this form. 
Local Fife j 
There is also an 
Extended Rife L&lQfl 
Browae. ila Ft'f j 
available if you wanl to set any advanced options, and a 
if you want to vali date uploaded files with advanced opti ons 
Recent Updates 
These are the most recent major'cnanges to this service. See 
Decembejr ^ , f i 2Q#% 
Maintenance release to fix minor bugs. 
November 26, 2002 
Home Page 
Documentation 
Source Code , 
What's New 
Accesskeys 
Fee&>ack 
About . 
Fsvelets 
X3L 1 0 
CSS Level 2 
CSS Level 1 
WAI Hone 
WAI Overview 
Рис..5.5. Web-страница службы проверки HTML-кода

Глава 5. XHTML и новые тенденции 257 
3. Для проверки правильности HTML-кода Web-страницы, еще не помещен- 
ной на сервер, щелкните на гиперссылке Upload Files (^Загрузить файлы), 
расположенной в нижней части страницы. В окне Web-0pay3epa появится 
страница С формой загруЗКИ файла http://validator.w3.org/fileupioad.
html, которая показана на рис. 5.6. 
• 
"3 
.Befteth Hstay 
Markup Validation Service 
This form allows you to upload files from your computer and have them validated.
 
Validate Uploaded File 
File: 
Encoding: 
Type: 
1
j (detect ai 
j 'detect ai
jtomatic; 
ilomatic; <Hy) r j 
Г Show Source 
Options: г Snow Outline 
Г Validate error pages 
Vaiida» ihittn | 
r Show Parse Tree 
г exclude attributes 
jy Verbose Output 
If your document is on the» Web. you can validate it witJi the same advanced 
options by entering щ, 
udclre:-; instead 
Horne p j g t 
Documentation 
Source Code 
VMJafs Nsw 
Accesskeys 
Heedbaek 
About . 
Sire Vatet 
VVDG 
'aiklator 
CSS 
Lirikj(~he-".ker 
HTM!.. T;CV 
Titfy Online 
XHTML 1.1 
XH-TML 1 0 
HTWL4.CH 
CS* 
WAI Home 
WAI Overview 
WAI Benefits 
Рис. 5.6. Страница загрузки файлов сайта validator.w3.org 
4. В поле File (Файл) в верхней части формы введите полн ш путь к файлу 
XHTML-документа или воспользуйтесь кнопкой Browse (Просмотр) справа 
от поля File для поиска и выбора файла на локальной или сетевом диске. 
5. Нажмите на кнопке Validate This'Document (Проверить этот документ), рас- 
положенной в нижней части формы. 
После выполнения шага 5 браузер отправит выбранную вам* на шаге 4 стра- 
ницу на Web-сайт консорциума W3C. Программа проверки пров рит полученный 
XHTML-документ и передаст Web-браузеру страницу результатов проверки, ана- 
логичную странице, показанной на рис. 5.7. 
Проверьте тип документа, содержащийся в строке Document Туре примерно в 
центре информационного блока в верхней части страницы результатов, чтобы 
убедиться, что вы правильно указали объявление DOCTYPE. Напр 1мер, результаты, 
приведенные на рис. 5.7, указывают, что Web-страница showMe htm была прове- 
рена на соответствие правилам, заложенным в определении Strict DTD.

258 Глава 5. XHTML и новые тенденции 
Fsvoties lock В* 
Ир/ЛчИа1о..«Э01д/сР 
'й • •-•; э '-a a JJ J 
Stop flefiesh Home . Search Favorite; H«*«y M Prini 
Markup Validation Service 
Jump To: fRpsuhsi IQuttnel 
File: C:\ShowMehtrn 
Encoding: iso-8859-1 
Doctype: XHTML I 0 Transitional 
Errors: 5 
Note The Validator XML support has seme li 
This page is not Valid rransitional! 
Below are the results of attempting to parse this document with an SGML parser. 

1. Line S, column IT. there is no attribute "HTTP-EQUIV" (explain ) 
<HETA HTTP-EQUIV-"ContenC-Type" COHTEHT-"t.ext/htrol; charset-lao-8B59-lI t 
2 Line S, column 40. there is no attribute "CONTENT" texnlain \ 
<HETA HTTP-EQTJIV-"Contertt-Type" CCWTENT-"t.ext;/htnil; сЬасэес-1ао-ВВ59-1" 
Home Page 
Documentation 
Source Code 
What's New 
Accesskeys 
Feedback 
About... 
Site Valet 
WDG 
Validator 
CSS Validator 
Link Checker 
HTML T:dy 
Tidy 0|'1кл 
XHTML 1 1 
XHTML I 0 
HTML 4 01 
XSL 1 0 
CSS Level 2 
CSS Level 1 
WAI Home 
-WAI Overview 
WAI Benefits 
Рис. 5.7. Страница результатов службы проверки W3C HTML Validation Service 
Под информационным блоком программа проверки приводит предупрежде- 
ния и ошибки. Обратите внимание, что XHTML-документ создан правильно 
(т.е. в соответствии с требованиями стандарта) только в том случае, когда про- 
грамма проверки не обнаружила ошибок. Таким образом, если на странице были 
обнаружены ошибки, исправьте их и повторно проверьте код Web-страницы с по- 
мощью программы проверки. (Программа проверки не только перечисляет имею- 
щиеся ошибки, но и дает рекомендации по их устранению.) 
Помимо проверки Web-документов, хранящихся в файлах на локальном или 
сетевом диске, служба W3C HTML Validation Service позволяет проверить любую 
Web-страницу, уже находящуюся на Web-сервере. Для такой проверки выполните 
шаги 1 и 2 предыдущей процедуры, а затем вместо шагов 3 и 4 в поле Address 
(Адрес) в средней части страницы службы (см. рис. 5.5) ведите URL-адрес Web- 
страницы, проверку которой необходимо выполнить. В этом случае программа 
проверки извлечет содержимое кода Web-страницы с Web-сервера и выдаст отчет, 
аналогичный показанному на рис. 5.7. 
При разработке новых Web-страниц перед публикацией на сервере проверяйте 
их на соответствие стандарту XHTML. При необходимости проверки на соответ- 
ствие стандарту существующих страниц можно воспользоваться службой провер- 
ки страниц на Web-сервере.

Глава 5. XHTML и новые тенденции 259 
Установка размера текста на XHTML-странице 
с помощью ключевых слов 
При задании размера шрифта на Web-странице вы, как правило, преследуете 
две цели: во-первых, сделать текст достаточно большим для обеспечения его удо- 
бочитаемости и, во-вторых, выделить отдельные слова и выражения, изменяя 
размер шрифта, которым они выводятся на странице. Размер теста имеет осо- 
бенно большое значение в случае, когда на Web-странице содержится большой 
объем текста. Если размер шрифта слишком маленький, посетители могут поки- 
нуть страницу, так и не прочитав ее содержимое. Если же шрифт слишком боль- 
шой, он может отвлекать посетителей, что приведет к тому, что часть содержи- 
мого страницы при чтении может быть пропущено. Концепция изменения 
размера шрифта для выделения используется уже много лет. До появления кас- 
кадных списков стилей (о которых мы говорили в главе 4), для установки разме- 
ра текста на Web-странице использовался атрибут size дескриптора <font>, ко- 
торый позволял устанавливать относительный размер шрифта -т Web-странице. 
Задание значение атрибута size, например, равным семи (7), т.е. максимально 
возможному значению, приводит к тому, что текст становится в более чем 2.5 
раза больше, чем для среднего значения 4. С помощью правил каскадных спис- 
ков стилей размер шрифта текста можно устанавливать с использованием таких 
единиц измерения, как пиксели, пункты, дюймы, сантиметры и т.д. Помимо этих 
единиц измерения списки стилей позволяют устанавливать размер шрифта на осно- 
вании семи ключевых слов, приведенных в столбце "Ключевое слово" таблицы 5.1. 
Таблица 5.1. Ключевые слова для установки размера шрифта 
для браузеров IE 5.5, IE 6.0, NN 4.7 и NN 6.1 
Ключевое 
слово Размер в IE 5.5 
Размер в IE 6 и 
Netscape Navigator 6.1 
Размер в Netscape 
Navigator 4.7 
xx-small 
x-small 
Small 
Medium 
Large 
x-large 
xx-large 
<font size="1"> 
10 пикселей 
<font size="2"> 
13 пикселей 
<font size="3"> 
16 пикселей 
<font size="4"> 
18 пикселей 
<font size="5"> 
23 пикселя 
<font size="6"> 
32 пикселя 
<font size="7"> 
48 пикселей 
9 пикселей 
<font size="1"> 
10 пикселей 
<font size="2"> 
13 пикселей 
<font size="3"> 
16 пикселей 
<font size="4"> 
18 пикселей 
<font size="5"> 
23 пикселя 
<font size="6"> 
32 пикселя 
9 пикселей 
<font 
11 'пикселей 
<font i;ize="2"> 
14 пин селей 
<font size="3"> 
16 пикселей 
<font Size="4"> 
24 пикселя 
<font size="5"> 
36 пикселей 
<font size="6"> 
54 пикселя 
Несмотря на то что это не нововведение XHTML, ключевые с л ова позволяют 
очень легко привести устаревшие HTML-страницы, содержащие установки разме- 
шрифта с помощью атрибута size в устаревшем дескрипторе <font>, В COOT

260 Глава 5. XHTML и новые тенденции 
ветствие с требованиями стандарта XHTML версии Strict DTD. (Хотя требования 
стандарта XHTML версии Transitional DTD и позволяют использовать устаревшие 
дескрипторы, тем не менее, браузеры, которые будут работать с будущими верси- 
ями стандарта XHTML, должны соответствовать требованиям версии Strict DTD, 
которая не допускает использования устаревших дескрипторов.) 
При использовании ключевых слов для задания размера шрифта видимый 
размер определяется типом и версией браузера. Как показано в предыдущей таб- 
лице, браузер Internet Explorer 5 выводит на экран текст с размером шрифта 
"Medium" размером 18 пикселей, в то время как браузеры Internet Explorer 6 и 
Netscape Navigator (версии 5 и 6) — 16 пикселей. На рис. 5.8 приведены размеры 
шрифта текста для каждого из семи ключевых слов при использовании браузера 
Internet Explorer 6. 
Текст small 
Это текст с <font size="2" 
Текст medium 
Это текст с <font 
Текст large 
Это текст с <font size="4"> 
Текст x-large 
Это текст с <font size=H5"> 
Текст xx-large 
Это текст с <font size="6"> 
Текст <font size="7"> 
Рис. 5.8. Размер шрифта текста для каждого ключевого слова 
при просмотре страницы в браузере Internet Explorer 
ПРАКТИКУМ 
Для установки размера шрифта с помощью ключевых слов задайте значение 
свойства font-size в каскадном списке стилей или в дескрипторе текстового 
элемента Web-страницы равным соответствующему ключевому слову. Например, в 
следующем фрагменте кода показано, каким образом можно использовать атри- 
бут style ДЛЯ установки СВОЙСТВа font-size! 
<р style="font-size xx-small">Текст xx-small<br /> 
<span style="font-size: x-small">Текст x-small</spanXbr /> 
<span style="font-size: small">TeKCT smalK/spanXbr /> 
<span style="font-size: medium">TeKCT medium</spanXbr /> 
<span style="font-size: 1агде">Текст large</spanXbr /> 
<span style="font-size: х-1агд€з:">Текст x-large</spanXbr /> 
<span style="font-size: xx-large">Текст хх-1 arge</spanXbr /X/p>

Глава 5. XHTML и новые тенденции 261 
Для установки размера всего текста страницы с помощью ключевого слова до- 
бавьте в раздел заголовка страницы следующее правило списка Ьтилей: 
<!DOCTYPE html PUBLIC "-//W3C//DTD ШЕУЬ 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<1:1Ъ1е>Использование ключевых слов для изменения размера TeiccTa</title> 
<style type="text/ess"> 
body {font-size:large} 
</style> 
</head> 
<body bgcolor="#ADD8E6"> 
<!-- содержимое Web-сраницы --> 
</body> 
</html> 
В дополнение к установке размера шрифта с помощью се^и ключевых слов, 
изменять размер можно и с помощью относительных ключевых слов smaller и 
larger. Как предполагают сами значения этих слов, smaller указывает Web-бра- 
узеру уменьшить размер шрифта текста на одну позицию в шккле размеров клю- 
чевых слов. Аналогично, применение ключевого слова larger приводит к увели- 
чению размера шрифта текста на одну позицию. Таким образом, если 
Web-страница, описанная заголовком, приведенным в предыдущем примере, в 
которой весь основной текст выводится шрифтом с размером large, для выделе- 
ния отдельных слов текста можно воспользоваться HTML-кодом следующего 
вида: 
<р>Для выделения слова его можно 
<span style="font-size:larger">увеличить</врап>. 
<span style="font-size:smaller">Уменьшение</span> 
слова также привлекает внимание посетителей. 
В приведенном примере Web-браузер выведет на экран слово "увеличить" 
шрифтом размером x-iarge (т.е. следующим большим размером в шкале разме- 
ров ключевых слов) а слово "Уменьшение" — шрифтом размером medium (следую- 
щим меньшим размером в шкале). 
Группировка элементов списка выбора XHTMl-формы 
с помощью дескриптора <optgroup> 
Список выбора на XHTML-форме (HTML-форме) предстаиляет собой список 
элементов в пролистываемой области. Список выбора можно использовать вмес- 
то флажков для экономии места на экране, особенно если имеется большое ко- 
личество опций, из которых посетитель может выбирать. (Список выбора, в от- 
личие от флажков, позволяет устанавливать, может ли посетитель выбирать 
одновременно несколько опций или же только одну.) В главе 3, посвященной 
HTML-формам, вы научились создавать списки выбора путем вставки элемента 
<seiect>, подобного приведенному в следующем коде, межд^ начальным и ко- 
нечным ДеСКрИПТОрамИ формы (<formX/form>):

262 Глава 5. XHTML и новые тенденции 
<select size="10" name="AreasOfInterest" multiple="Yes"> 
<option value="Win98">Windows 98</option> 
<option value="WinXP">Windows XP</option> 
<option value="WinNT">Windows NT</option> 
<option value="DT">Hacтoльныe. компыотеры</ор^оп> 
<option value="LT">IlopTaTHBHbie KOMnbK>Tepbi</option> 
<option value="PDA">EDA</option> 
<option value="Prtr">IlpMHTepH</option> 
<option value="Mon">MoHMTopbi</option> 
</select> windows 98 1 
Windows XP 
'Windows NT 
Настольные компьютеры J 
Портативные компьютеры 
PDA 
ПРАКТИКУМ 
Элемент <optgroup> позволяет логически группировать элементы списка выбора. 
Если список выбора содержит большое количество опций 
Операционные системы j 
или если список содержит несколько групп связанных windows эв 
между собой опций (как это было в предыдущем приме- 
ре), дескриптор <optgroup> можно использовать для 
вставки "заголовка" каждой группы элементов списка, как 
показано на следующем рисунке: , 
Группы связанных опций позволяют посетителям быстрее понять и сориенти- 
роваться в длинном списке (возможно разнообразных) опций. Для разделения 
списка выбора на группы поместите дескрипторы <optgroup> между опциями 
списка выбора, как показано в следующем примере: 
<select size="10" name="AreasOfInterest" multiple="Yes"> 
<optgroup label="Операционные системы"> 
<option value=MWin98">Windows 98</option> 
<option value="WinXP">Windows XP</option> 
<option value="WinNT">Windows NT</option> 
<option value= "DT">Настольные KOMnbK>TepbK/option> 
</optgroup> 
<optgroup label="Оборудование"> 
<option уа1ие="ЬТ">Портативные KOMnbiOTepbi</option> 
<option value="PDA">PDA</option> 
<option value= "Prtr">npHHTepbi</option> 
<opt ion value="MonM>MoHHTopbi</option> 
</optgroup> 
</select> 
Обратите внимание, что каждая группа опций описывается начальным и ко- 
нечным дескрипторами группы (<optgroupx/optgroup>). Атрибут label деск- 
риптора <optgroup> позволяет задавать текст, который будет выводиться в каче- 
стве заголовка группы опций. 
На момент написания этой книги организация вложенных групп опция для 
создания подгрупп не допускалась. Тем не менее, спецификация HTML 4.01 ука- 
зывает, что будущие версии HTML (а, следовательно, и XHTML) могут разре- 
шать создание вложенных групп опций для организации многоуровневой иерар- 
хии элементов списков выбора.

Глава 5. XHTML и новые тенденции 263 
Добавления цветов в XHTML-таблицы с помощью 
правил каскадных списков стилей 
Как правило, XHTML таблицы служат двум целям: позиционирование эле- 
ментов на Web-странице и вывод на экран данных в виде таблицы. Как вы узна- 
ли из главы 4, для позиционирования объектов на Web-странице можно пользо- 
ваться правилами каскадных списков стилей. Поэтому, с расширением 
поддержки браузерами каскадных списков стилей, роль таблиц в позиционирова- 
нии элементов страниц уменьшается. Кроме того, списки стилей расширяют 
возможности XHTML-таблиц при выводе в них данных. С Помощью правил 
списков стилей и дескрипторов <thead>, <tfoot> и <tbody> вы имеете возмож- 
ность добавить цвет и отформатировать каждый раздел таблицы ("верхний ко- 
лонтитул", "нижний колонтитул" и "тело таблицы"). 
Обратите внимание, что дескрипторы <thead>, <tfoot> и <tDody> не являют- 
ся нововведением XHTML. В конце концов, как уже говори лось во введении к 
главе, посвященной XHTML, XHTML представляет собой всего лишь язык 
HTML 4.01, переписанный как XML-приложение. Таким образом, все дескрипто- 
ры, используемые в XHTML, можно найти и в HTML 4.01. Teiл не менее, деск- 
рипторы <thead>, <tfoot> и <tbody> рассматриваются здесь, а не в главе 2 (по- 
священной HTML-таблицам), поскольку устаревшие версии Web-браузеров их не 
поддерживают. Например, до версии 6.1 браузер Netscape Navigator не поддержи- 
вал дескрипторов <thead>, <tfoot> и <tbody>. Таким образом, еще одним до- 
полнительным преимуществом перехода от HTML к XHTML является то, что 
браузеры, совместимые с XHTML, будут поддерживать все де< крипторы, имею- 
щиеся в стандарте HTML 4.01 - последней версии "HTML"-стандарта, разрабо- 
танном консорциумом W3C. (Последующие версии спецификаций HTML будут 
называться XHTML 1.0, 1.1 и т.д.). 
ПРАКТИКУМ 
Для создания таблицы с верхним колонтитулом, нижним колон титулом и телом 
таблицы сначала воспользуйтесь стандартными дескрипторами <tr> и <td>, ко- 
торые будут описывать строки и столбцы таблицы. Затем между начальным и ко- 
нечным дескрипторами таблицы (<tabiex/tabie>) поместите дескрипторы 
<thead>, <tfoot> и <tbody>, как показано в следующем примере: 
<table cellspacing="O 
<theadXtrXtd>BepxHHH колонтитул столбца l</tdXtd>BepxHPiur 
колонтитул столбца 2</tdX/trX/thead> 
<tfootXtrXtd>HHHCHHH колонтитул столбца l</tdXtd>HH3KHHH колонтитул 
столбца 2</tdX/trX/tfoot> 
<tbody> 
<trXtd>H4eiiKa в строке 1, столбце K/tdXtd>H4enKa в строке 1, 
столбце 2</tdX/tr> 
<trXtd>H4eiiKa в строке 2 , столбце K/tdXtd>H4eHKa в строке 2 , 
столбце 2</tdX/tr> 
<trXtd>H4enKa в строке 3, столбце K/tdXtd>H4eiiKa в строке 3, 
столбце 2</tdX/tr> 
</tbody> 
</table>

264 Глава 5. XHTML, и новые тенденции 
В этом примере таблица содержит верхний и нижний колонтитулы, состоя- 
щие из одной строки и двух столбцов, и тело таблицы, содержащее три строки и 
два столбца. В колонтитулы таблицы можно помещать произвольное количество 
строк, кроме того, количество строк в колонтитулах может отличаться. Для встав- 

н дополнительной строки в один из колонтитулов поместите дополнительные на- 
чальный и конечный дескрипторы строк (<trx/tr>) в описание соответствующего 
колонтитула. Тем не менее, оба колонтитула должны быть той же ширины, что и 
тело таблицы. Более того, если таблица содержит нижний колонтитул (описанный 
дескрипторами <tfoot> и </tfoot>). его описание должно находиться после 
описания верхнего колонтитула (если он имеется в таблице) непосредственно 
перед дескриптором <tbody>, с которого начинается описание тела таблицы. 
и THEAD. TFOOT и TBODY - Microsoft Internet Explorer Ш 
' .айя Дрйвке • Еид Избранное Cgp 
Адресj^J http.//html-webdesign/ChapterO5/Figute05-05.htm 
HTML & Web Design Tips & 
Techniques 
Ячейкав строке I, столбце 1 
Ячейкав строке 2, столбце 1 
Ячейкав стооке 3. столбце 1 
Ячейкав строке 1, столбце 2 
Ячейкав строке 2, столбце 2 
Ячейкав стооке 3^ столбце 2 
Нижний КОЛОНТИТУЛ столбца 1 Нижний колонтитул столбца 2 
Рис. 5.9. XHTML-таблица с разделами верхнего и нижнего колонтитулов и телом 
таблицы, 
которые отформатированы с помощью правил каскадного списка стилей 
После создания таблицы к каждому из ее разделов можно независимо приме- 
нять правила каскадных списков стилей, как показано на рис. 5.9. 
<style type="text/ess"> 
td {border-style:solid; border-width:lpx Ipx; border-color:black; 
padding-left:lOpx; padding-right:10px} 
thead {color:yellow; background:magenta; font-weight:bold; 
text-align:center} 
tfoot {color:white; background:blue; font-weight:bold; 
text-align:center} 
tbody {text-align:right; background:lightblue} 
</style> 
Несмотря на то что ширина колонтитулов должна соответствовать ширине 
таблицы, количество столбцов в них может отличаться от количества столбцов в 
теле таблицы. Фактически, в большинстве случаев колонтитулы содержат всего 
один столбец и требуемое количество строк независимо от количества столбцов 
в теле таблицы. Если необходимо, чтобы одна ячейка в строке соответствовала 
по ширине нескольким ячейкам в следующей строке, установите значение атри- 
бута eolspan в дескрипторе <td> ячейки равным количеству столбцов, которые 
эта ячейка должна занимать. Например, для создания верхнего и нижнего ко- 
лонтитулов, состоящих из одной строки и двух столбцов, для таблицы определен- 
ной выше в этом совете, замените описание колонтитулов следующими строками:

Глава 5. XHTML и новые тенденции 265 
<theadXtrXtd col зрап="2">Верхний 
<tfootXtrXtd col зрап="2">Нижний 
Помимо рекомендации использовать правила каскадных списков стилей для 
задания формата разделов таблиц спецификация HTML указывает, что Web-брау- 
зеры в будущем получат возможность пролистывать содержимое таблицы, нахо- 
дящееся между неподвижными верхним и нижним колонтитулами. Более того, 
браузеры также смогут визуализировать верхний и нижний колонтитулы соответ- 
ственно над и под телом таблицы, занимающей несколько \УеЬистраниц. К сожа- 
лению, на момент написания книги эти возможности не поддерживалась ни в 
Netscape Navigator, ни в Internet Explorer. 
И в качестве заключения нужно отметить, что не следует путать ячейки заго- 
ловка таблицы (определенные с помощью дескрипторов <th>) с разделом колон- 
титула таблицы. Таблица может одновременно содержать и ячейки заголовка, и 
верхний колонтитул. Например, для создания строки ячеек заголовка таблицы 
под верхним колонтитулом вставьте в тело таблицы дескр 4ПТОРЫ <trXtd> 
</tdx/tr>. (Каждый набор дескрипторов <thx/th> добавляет столбец заголов- 
ка в строку, в которой он указан.) Если строка ячеек заголовка определена как 
первая строка тела таблицы, для создания таблицы с заголовками, находящими- 
ся под верхним колонтитулом, как показано на рис. 5.10, можнс)) воспользоваться 

следующим правилом списка стилей: 
th {text-align:center; background:white} 
f Т""'Г «• 
Правке Щид Избранное Сервис Справка 
Адрес Ш] http //html-webdestgn/Chepter0S/Figure!)5-06 htm 
HTML and Web Design Tips & 
Techniques 
i 
Отработанные часы - 01/09/2005 - 30/09/2003 
Техник 
Секретарь 
Вольный стрелок 
Иногда приходящий 
Шеф отдела 
ВСЕГО 
ПН 
8.5 
4.5 
7.0 
8.0 
9.0 
37.0 
ВТ 
7.5 
6.5 
3.5 
6.5 
4.5 
28.5 
СР 
7.0 
5.5 
4.5 
8.0 
6.0 
31.0 
чт 6.0 
6.5 
9.5 
8.0 
7.0 
37.0 
пт 5.0 
6.5 
8.0 
7.5 
6.5 
33.5 
Итого 
34.0 
29.5 
32.5 
38.0 
33.0 
167.0 
© NVBizNet.com (702V361-0141 
Рис. 5.10. ХНТМ L-таблица с разделом заголовков 
Внедрение шрифтов на XHTML-страницу с помощью 
правил каскадных списков стилей 
При создании XHTML-страниц при описании их внешнего вид^ в Web-браузерах 
все большая и большая роль будет отводиться каскадным спискам стилей. Факти- 
чески, дескриптор <foiit>, долго использовавшийся для задания внешнего вида 
тек- 
ста, считается устаревшим в спецификациях HTML 4.01 и XHTMLj 1.0 и отсутствует

266 Глава 5. XHTML и новые тенденции 
в спецификации XHTML 1.1. К счастью, каскадные списки стилей содержат свой- 
ство font-family, которое можно использовать вместо дескриптора <font> для за- 
дания типа шрифта существующих HTML-страниц и создаваемыхXHTML-страниц. 
Свойство font-family каскадных списков стилей позволяет указывать Web- 
браузеру, каким типом шрифта должен выводится данный конкретный текст. На- 
пример, для вывода на экран заголовка уровня 2 шрифтом Comic Sans MS можно 
воспользоваться следующим правилом списка стилей: 
<headXstyle> 
h2 {font-family: "comic sansms") 
</styleX/head> 
При использовании свойства font-family в списке стилей для выбора типа 
шрифта вы предполагаете, что выбранный вами шрифт присутствует в системе 
посетителя. Если же выбранный шрифт отсутствует, Web-браузер для вывода тек- 
ста на экран будет использовать шрифт по умолчанию (указанный в параметрах 
настройки Web-браузера). Для решения этой проблемы каскадный список стилей 
дает возможность браузеру выгрузить шрифт, используемый для заголовка уровня 
2 с Web-сервера, если тип шрифта, указанный в правиле списка стилей в системе 
посетителя отсутствует. Несмотря на то что такая возможность появилась срав- 
нительно недавно, она позволяет создавать страницы, использующие нестандарт- 
ные (пользовательские) шрифты, которые могут выводиться в Web-браузерах пос- 
ле выгрузки с Web-сервера. Как результат, Web-страницу можно разрабатывать с 
полной уверенностью, что посетители увидят текст, выведенный именно тем 
шрифтом, который вы выбрали (а не шрифтом по умолчанию). 
Следует иметь в виду, что Web-браузер должен загружать внедренные шрифты 
вместе с другими элементами Web-страницы (например, графическими изображе- 
ниями, анимацией и т.д.). Более того, некоторые Web-браузеры требуют, чтобы 
файлы шрифтов имели определенный формат или в противном случае они загру- 
жаться не будут. Так, например, браузер Internet Explorer загружает только 
шриф- 
ты, хранящиеся в файлах в формате EOT (Embedded Object Type). (Получить под- 
робную информацию по формату EOT и выгрузить бесплатно распространяемую 
утилиту для создания и сохранения шрифтов для Internet Explorer можно на 
страни- 
це ПО адресу http://www.microsoft.cora/typography/web/6mbedding/weft2/). Бра- 
узер Netscape Navigator, в свою очередь, позволяет загружать шрифты, хранящие- 
ся в фалах в формате PFR (Portable Font Resource), разработанном компанией 
Bitstream Inc. (Подробную информацию по генерации шрифтов, загружаемых в 
Netscape Navigator, МОЖНО наЙТИ ПО адресу http://devedge.netscape.com/.) 
ПРАКТИКУМ 
Для загрузки шрифта с помощью XHTML-документа укажите соответствующий 
шрифт в объявлении @font-face списка стилей, как показано в следующем 
коде: 
<head><style> 
@font-face {font-family:"new geneva"; 
srciurl(http://www.MyServer/com/fonts/geneva1 ,eot) } 
</styleX/head>

Глава 5. XHTML и новые тенденции 267 
Объявление @font-face заставляет Web-браузер выгрузить фа шрифта, оп- 
ределенный в свойстве font-family (в приведенном примере то шрифт New 
Geneva) по Web-адресу, указанному в свойстве src (http://ww* .MyServer.com/ 
fonts/genevai.eot). Для форматирования теста, использующе о загружаемый 
шрифт, необходимо указать имя шрифта в правиле списка стилей точно так же, 
как и для любого другого шрифта. Например, следующий список стилей говорит 
Web-браузеру использовать шрифт New Geneva для вывода на экран текста абзаца: 
<headXstyle> 
@font-fасе {font-family: "newgeneva" ; 
src:url(http://www.MyServer/com/fonts/geneval.eot)} 
p {font-family: "newgeneva" , c o u r i e r ; 
color:blue} 
</styleX/head> 
В приведенном примере первая строка в списке стилей указывает Web-браузе- 
ру загрузить файл genevai.eot с каталога шрифтов Web-сервера ч а сайте http:// 
www.MyServer.com. Web-браузер загружает указанный файл и присваивает ему 
имя new geneva. Следующий оператор говорит о том, что полученный шрифт 
должен использоваться для форматирования текста абзаца (т.е. текста, который 
следует за дескриптором <р>). Если Web-браузер не может или не будет загру- 
жать файл шрифта (заданный в объявлении @font-face), он будет использовать 
альтернативный шрифт (если таковой указан), содержащийся в определении пра- 
вила каскадного списка стилей (в приведенном примере это шрифт Courier). 
Если недоступен ни основной, ни альтернативный шрифты, дпя вывода текста 
на экран будет использоваться шрифт браузера, установленный по умолчанию. 
Web-браузер сохраняет файлы шрифтов (в приведенном примере это файл 
genevai.eot) в каталоге временных Internet-файлов браузера на компьютере по- 
сетителя. Таким образом, Web-браузеру не нужно загружать факлы шрифтов при 
каждом новом посещении одной и той же Web-страницы. Браузер считывает 
файл шрифта со своей кэш-памяти (с жесткого диска компьютера) и за счет это- 
го при последующих посещениях страница загружается быстрее 
Следует иметь в виду, что нельзя просто скопировать файл в форматах EOT 
и PFR в каталог шрифтов вашего компьютера и начать их использовать при со- 
здании Web-страниц. Шрифты, как и любая другая интеллект альная собствен- 
ность, защищаются авторскими правами. Каждый созданны вами файл EOT 
или PFR (или заказанный у третьего лица) содержит встроенн>ю модель защиты, 
Web-браузеры только выводят на экран загруженный шрифт, ее и на Web-страни- 
це имеется ссылка на него. Поэтому, если, например, для :оздания шрифта 
вы пользуетесь WEFT, можно указать, что данный шрифт мо кет использовать- 
СЯ ТОЛЬКО на Страницах Web-Сайта http://www.YourDomain.сот. ЕСЛИ ДРУГОЙ 
автор Web-сайтов внедрит тот же шрифт для стран и сайта http:// 
www.HisDomain.com, Web-браузер обнаружит, что корневой катал Г СТраНИЦ (http:/ 
/www.HisDomain.com) не соответствует корневому каталогу стр; иц, указанному в 
файле Шрифта (http://www.YourDomain.com). Как результат Web-браузер для 
вывода на экран содержимого страницы будет использовать лрифт по умолча- 
нию (а не шрифт, защищенный авторскими правами).

2 6 8 Глава 5. XHTML и новые тенденции 
Вставка одной XHTML-страницы в другую 
с помощью внутритекстового фрейма 
Для одновременного вывода на экран нескольких Web-страниц используются 
фреймы. В главе 1 было рассказано, каким образом создаются фреймы с помо- 
щью дескрипторов <frame> и <frameset>. При разделении окна Web-браузера на 
несколько частей (т.е. фреймов) с помощью дескриптора <frameset> браузер в 
каждом фрейме может выводить разные Web-страницы. Затем при неподвижных 
фреймах посетитель имеет возможность независимо пролистывать содержимое 
каждой Web-страницы и просматривать их содержимое, которое полностью м 
помещается во фрейме. 
В прошлом фреймы представляли большею проблему для Web-дизайнеров. 
Часть проблемы заключалось в том, что часто авторы просто не знали, каким, об- 
разом правильно написать код фрейма. Тем не менее, даже при правильном на- 
писании кода многие браузеры не поддерживают Web-страницы с фреймами, по- 
этому Web-дизайнерам приходилось создавать два комплекта страниц: с 
фреймами и без фреймов. К счастью, спецификация XHTML представляет собой 
следующий шаг на пути развития HTML, переходя от языка форматирования 
описания и содержимого страницы к структурированному языку разметки (что и 
было исходной целью языка разметки). 
В будущем правила каскадных списков стилей, форматирующие и позициони- 
рующие содержимое Web-страниц, позволят разработчикам Web-браузера сосре- 
доточить свое внимание на обработке более сложных структур (в частности, 
фреймов). Освобождая авторов от необходимости создания двух комплектов стра- 
ниц (с фреймами и без оных) при написании страниц с фреймами, скорее всего, 
XHTML-страницы с фреймами станут более распространенными, чем HTML- 
страницы с фреймами. Кроме того, Web-браузеры, совместимые с XHTML, будут 
поддерживать внутритекстовый дескриптор фреймов (<iframe>), который позво- 
ляет вставлять одну Web-страницу в другую с той же простотой, с какой деск- 
риптор <img> позволяет помещать на страницу изображения. 
При необходимости вывода одной страницы на другой с помощью фреймов 
используется дескриптор <iframe>. Пролистываемый фрейм, создаваемый деск- 
риптором <iframe>, генерирует внутритекстовый фрейм, который находится в 
содержимом страницы подобно другим ее объектам (например, XHTML-табли- 
цам, графическим изображениям, Java-аплетам и т.п.). Как и содержимое внутри 
дескриптора <frame>, посетитель имеет возможность пролистывать содержимое 
внутритекстового дескриптора <iframe> с целью просмотра содержимого, ко- 
торое не помещается внутри границ фрейма. Тем не менее, в отличие от 
фреймов, созданных с помощью дескрипторов <frameset>, фрейм, созданный 
с помощью дескриптора <iframe> остается привязанным к определенному 
месту Web-страницы. Поэтому, в то время как фреймы набора фреймов оста- 
ются неподвижными, внутритекстовые фреймы перемещаются при пролисты- 
вании содержимого документа.

Глава 5. XHTML и новые тенденции 269 
ПРАКТИКУМ 
Для вставки на Web-страницу внутритекстового фрейма вставьте дескриптор 
<iframe> в требуемое место HTML-кода, как показано в следующем примере 
Web-страницы: 
<iframe src="WebPageURL"> 
<!-- альтернативное содержимое для браузеров, которые не поддерживают 
дескриптор <iframe> —-> 
</iframe> 
В приведенном примере замените webPageURL адресом страницы, которая 
должна выводиться во внутритекстовом фрейме. 
Предположим, например, что необходимо имитировать "пролистываемую таб- 
лицу", в которой посетитель будет иметь возможность пролистывать содержимое 
тела таблицы между неподвижными верхним и нижним колонтитулами. В этом 
случае вместо одной таблицы создаются три: первая содержит верхний колонти- 
тул, вторая — нижний колонтитул и третья — тело таблицы. Вставьте верхний и 
нижний колонтитул на Web-страницу как любую другую таблицу, а тело таблицы 
разместите на другой Web-странице, которая будет выводиться на экран между 
таблицами "верхнего колонтитула" и "нижнего колонтитула" на первой странице, 
как показано в следующем коде: 
<body> 
<!-- Содержимое Web-страницы до составной "таблицы" —-> 
<!-- Таблица "верхнего колонтитула" —-> 
<table cellspacing="O" width="525"> 
<trXtd colspan="7" class="header">Отработанные часЦ -- 01/09/2003 - 
3 0/09/2 003</tdX/tr> 
<trXth width="80">&nbsp;</thXth>nH</thXth>BT</t^Xth>CP</th> 
<th>4T</thXth>nT</thXth>HToro</thX/tr> 
</table> 
<!-- Пролистываемая "таблица" во внутритекстовом фрейме —> 
<iframe src="HoursWorked.htm" width="525" height="100" 
scrolling="auto"> 
<p> *** Здесь должна отображаться таблица с данными об 
отработанных часах! *** </р> 
</iframe> 
<!-- Таблица "нижнего колонтитула" —> 
<table cellspacing="0" width="525"> 
<trXtd class = "footer">&copy; NVBizNet.com (702)-361-0141</tdX/tr> 
</table> 
</body> 
В этом примере атрибут src в дескрипторе <iframe> указывает, что Web-брау- 
зер должен выводить Web-страницу HoursWorked.htm во внутритекстовом фрей- 
ме. (Страница HoursWorked.htm представляет собой данные о рабочем времени 
за одну неделю, представленные в форме таблицы.) Атрибуты width и height в 
дескрипторе <iframe> указывают, что ширина фрейма должка составлять 525 
пикселей, а высота — 100 пикселей. И, наконец, задание Значения атрибута 
scrolling равным "auto" говорит о том, что если содержимое Web-страницы, 
выводимой на экран во фрейме, не помещается в этот фрейм] Web-браузер дол- 
жен выводить обе полосы прокрутки, как показано на рис. 5.11

270 Глава 5. XHTML и новые тенденции 
HTML & Web Design Tips & 
Techniques 
Отработанные часы — 01/09 
ПН ВТ СР 
Техник 
Секретарь 
Вольный 
« 
8.5 
4.5 
7.5 7.0 
6.5 1 5.5 
- Д .. ) NVBizNetconi (702 
'2003 - 
чт 
6.0 
6.5 
30/09/2003 
ПТ 
5.0 
6.5 
Итогов] 
34.0 
29.5 
ш \361-Ш1 
_J 
Рис. 5.11. Web-страница, использующая внутритекстовый фрейм 
для создания пролистываемой таблицы 
Как видно из предыдущего примера, внутритесктовый фрейм вставляется на 
Web-страницу практически так же, как графическое изображение, только исполь- 
зуются другие дескрипторы — начальный и конечный дескриптор внутритексто- 
вого фрейма (<iframex/iframe>), а не дескриптор <img>. Внутритекстовые 
фреймы, как и изображения, занимают на Web-странице определенное простран- 
ство. Для точного позиционирования фрейма на странице поместите фрейм в 
ячейку невидимой таблицы (как это вы делали ранее с текстом, графическим 
изображениями и другими объектами в главе 2) или воспользуйтесь правилами 
каскадных списков стилей (которые были рассмотрены в главе 4). 
Вы имеете возможность реализовать поведение, при котором при щелчке по- 
сетителем на гиперссылке Web-страница, выводимая в фрейме, будет изменяться. 
Однако, для этого фрейму необходимо присвоить имя. Для присвоения имени 
внутритекстовому фрейму используется атрибут name дескриптора <iframe>, как 
показано в следующем примере: 
<iframe src="HoursWorked.htm" widt.h="525" height="100" 
scrolling="auto" name="HoursTabIeFrame"> 
<p> * * * Здесь должна отображаться таблица с данными об 
отработанных часах? * * * </р> 
</iframe> 
Атрибут name в приведенном примере присваивает внутритекстовому атрибуту 
имя "HoursTabieFrame". Таким образом, для указания Web-браузеру выводить во 
фрейме страницу, загружаемую в результате щелчка на гиперссылке, необходимо 
установить значение атрибута target ГИПерсСЫЛКИ равным "HoursTabieFrame", 
как показано в следующем примере: 
<а href="HoursWorkedJan02Wkl.html" 
target=" HoursTabieFrame "Отработанные часы за период с 01.09.2003 по 
05.09.2003</а> 
<а href="HoursWorkedJan02Wk2.html" 
target=" HoursTabieFrame "Отработанные часы за период с 08.09.2003 по 
12.09.2003</а>

Глава 5. XHTML и новые тенденции 271 
<а href="HoursWorkedJan02Wk3.html" 
target=="HoursTableFrame"X)Tpa6oTaHHbie часы за период с 15.09.2003 по 
19.09.2003</а> 
<а href="HoursWorkedJan02Wk4.html" 
target="HoursTableFrameMX)Tpa6oTaHHbie часы за период с 22.09.2003 по 
26.09.2003</а> 
<!-- Ссылки на таблицы отработанных часов за другие периоды --> 
При щелчке на любой гиперссылке в этом примере содержимое загружаемой 
Web-СТраНИЦЫ будет ВЫВОДИТЬСЯ ВО ВНуТрИТеКСТОВОМ фрейме "HoursTableFrame". 
Таким образом посетитель сможет просмотреть данные по рабочему времени в 
"пролистываемой таблице" во внутритекстовом фрейме. 
Браузеры Netscape Navigator 6.1 (и выше) и Internet Explo er 5.5 (и выше) 
поддерживают дескриптор <iframe>. Дополнительную информацию по браузе- 
рам, поддерживающим дескриптор внутритекстового фрейма, можно найти по 
адресу http://www.htmlcompendium.org/Menus/Oframefy.htm. Ш ЭКИ странице 
находится список HTML- и XHTML-элементов и браузеров, поддерживающих 
перечисленные дескрипторы и атрибуты. 
Одновременное обновление нескольких 
внутритекстовых фреймов XHTML-страниць 
Фреймы позволяют одновременно выводить на экран две и более Web-стра- 
ниц в одном окне браузера. Например, в главе 1 фреймы использовались для вы- 
вода на одной Web-странице трех страниц: баннера или логотш а в верхней час- 
ти страницы, меню с фреймом в левой части страницы и содер> .имого страницы 
(первоначально это была домашняя страница Web-сайта) во фрейм справа от меню. 
В предыдущем совете был показан пример вставки внутритекс ового фрейма на 
XHTML-страницу. Как и другие видимые на странице объекть внутритекстовые 
фреймы можно позиционировать с помощью правил каскадны списков стилей 
(которые рассматривались в главе 4) или путем помещения внутритекстовых 
фреймов в ячейки таблицы, находящиеся в соответствующих ме :тах страницы. 
Если необходимо, чтобы текст обтекал внутритекстовый фрейм с одной сто- 
роны и снизу, в дескриптор <iframe> необходимо добавить а рибут align, как 
показано в следующем коде: 
<body> 
<!-- Содержимое страницы до внутритектового фрейма —> 
<iframe width="200" height="200" src="RoastPic.htm" 
align= " right "X/if rame> 
<!-- Текстовое содержимое, которое обтекает внутритекстовый фрейм 
слева, поскольку фрейм выровнен вправо --> 
<!-- Остальное содержимое --> 
</body> 
В приведенном примере содержимое Web-страницы, находящееся в одном и 
том же абзаце (контейнере), что и внутритекстовый фрейм, обтекает фрейм слева. 
Задание значения "right" атрибута align дескриптора <if2ame> приводит к

2 7 2 Глава 5. XHTML и новые тенденции 
тому, что фрейм размерами 200x200 пикселей выравнивается по правому краю 
контейнера, который в данном случае представляет собой содержимое Web-стра- 
ницы. Чтобы текст обтекал фрейм справа, установите значение атрибута align 
равным "left". 
Предположим, например, что имеется неупорядоченный список (т.е. список с 
маркерами) названий рецептов и необходимо, чтобы при щелчке посетителем на 
названии рецепта справа от него выводилось изображение "готового" блюда. Для 
создания такой Web-страницы можно написать код следующего вида: 
<body> 
<iframe name="FoodPictureFrame" width=250 height=250 
src="RoastPic.htm" align="right" sorolling="no" 
hspace="0" vspace="0"X/i frame> 
l> 
<liXa href="RoastPic.htm" target="FoodPictureFrame"> 
Тушеное мясо по-американски</аХ/И> 
<liXa href="DuckPic.htm" target="FoodPictureFrame"> 
Тушеная утка с черносливоы</И> 
<liXa href="ChickenPic.htni" target="FoodPictureFrame"> 
Котлеты по-киевски</И> 
<!-- Остальное содержимое страницы --> 
</body> 
Обратите внимание, что каждый элемент в маркированном списке представ- 
ляет собой гиперссылку, атрибут target которой заставляет Web-браузер выво- 
дить на экран в том же внутритекстовом фрейме, "FoodPictureFrame", страницу, 
загружаемую при щелчке на гиперссылке. Таким образом, при каждом щелчке на 
гиперссылке в списке рецептов браузер загружает Web-страницу с фотографией 
готового блюда и выводит страницу во фрейме справа от списка. 
А теперь предположим, что необходимо, чтобы во внутритекстовом фрейме 
под списком рецептов выводились инструкции по приготовлению. (Поместив 
инструкцию во фрейм, вы дадите посетителю возможность пролистывать длинные 
инструкции, оставляя на экране список рецептов и фотографию готового продукта.) 

Инструкции во фрейме под списком рецептов должны содержать описание опера- 
ций, которые необходимо выполнить, чтобы приготовить блюдо, фотография кото- 
рого СОДерЖИТСЯ В ДРУГОМ Внутритекстовом фрейме ("FoodPictureFrame") Справа ОТ 
списка рецептов. Таким образом, при щедчке посетителем на ссылке в списке 
рецептов Web-браузер должен одновременно обновить содержимое двух фреймов: 
фрейма с фотографией блюда и фрейма с описанием рецепта. 
ПРАКТИКУМ 
Для одновременного изменения содержимого обоих фреймов необходимо доба- 
вить в каждый дескриптор <а> короткий JavaScript-код. (Подробное описание 
JavaScript можно найти в главе 8. Тем не менее, вам не потребуется изучать всю 
главу для написания короткого кода для этого совета.) При щелчке на гиперс- 
сылке посетитель вызывает событие onclick гиперссылки. В дескрипторе гипер-

Глава 5. XHTML и новые тенденции 2 73 
ссылки <а> указывается, что при щелчке на ней Web-браузер д0л выполнить 
одно или несколько JavaScript-операторов. Таким образом, для одновременного 
изменения содержимого в двух внутритекстовых фреймах можнф следующим об- 
разом изменить ранее приведенный код: 
<body> 
<iframe name="FoodPictureFrame" width=250 height=250 
src="RoastPic.htm" align="right" scrolling="no" 
hspace="0" vspace="O"X/iframe> 
< u l x l i x a href ="RoastPic.htm" target="FoodPictureFrame" 
onClick="window.RecipeFrame.location='RoastRecipe.htm'"> 
Тушеное мясо по-американски</аХ/И> 
<liXa href="DuckPic.htm" target="FoodPictureFrame" 
\ onClick="window.RecxpeFrame.location='DuckRedipe.htin' " 
Тушеная утка с черносливом</11> 
<liXa href="ChickenPic.htm" target="FoodPictureFrfa 
onClick="window.RecipeFrame.location='ChickenRecipe.htm'"> 
Котлеты по-киевски</Н> 
<div style="position:relative; top:175px"> 
Рецепт:<br> 
<iframe name="RecipeFrame" src="RoastRecipe.htm" 
width="100%" height="100" scrolling="auto"X/iframe> 
</divy 
</body> 
В приведенном примере каждый дескриптор <а> содержит avaScript-onepa- 
тор, который указывает Web-браузеру загрузить Web-страницу во нутритекстовый 
фрейм "RecipeFrame" (описанный в дескрипторе <div> в нижне й части страни- 
цы). Например, при нажатии первой гиперссылки, "тушеное о по-американ- 
ски", генерируется событие onclick, определенное в дескри птфе <а> ЭТОЙ ГИ- 
пересылки. Web-браузер выполняет JavaScript-оператор, связан ый с событием 
onclick, который приводит к загрузке во внутритекстовый фрейм RecipeFrame" 
страницы RoastRecipe.htm. После выполнения JavaScript-оператора браузер заг- 
ружает Web-страницу, заданную в атрибуте href дескриптора (RoastPic.htm) 
во внутритекстовый фрейм, имя которого указано в рибуте target 
("FoodPictureFrame"). 
Таким образом, в приведенном примере загружаются две Web-страницы: пер- 
вая указана в атрибуте гиперссылки, а вторая в JavaScript-onepaT< >ре 
(вызываемом 
по событию onclick дескриптора <а>). Несмотря на то что JavaScript-сценарий в 
приведенном выше коде загружает лишь одну страницу, допус ается загружать 
одновременно несколько страниц, поместив в строку после атрирут* onClick ДО- 
полнительные операторы. При этом выполняемые браузером опфаторы должны 
разделяться точкой с запятой (;), как показано в следующем фрагм нте кода: 
onClick="window.InlineFrameName.location=fWebPageURL' 
window. InlineFrameName .location=' WebPageURL' ; 
window. InlineFrameName .location=' WebPageURL' ; " 
В каЖДОМ ИЗ ЭТИХ трех Операторов InlineFrameName ДОЛЖНО быть заменено 
именем внутритекстового фрейма, в который Web-браузер должен загрузить Web- 
страницу, адрес которой должен быть указан вместо

274 Глава 5. XHTML и новые тенденции 
Изменение внешнего вида XHTML-страницы 
на основе типа целевой системы 
До недавних пор Web-страницы можно было разрабатывать с уверенностью, 
что посетители будут просматривать их содержимое на экранах мониторов, под- 
ключенных к персональным компьютерам. Несмотря на разнообразие разреше- 
ний мониторов, стандартные 15- и 17-дюймовые мониторы предоставляли доста- 
точно пространства для вывода на экран графики и анимации, необходимых для 
придания странице зрелищности и передачи посетителям ее содержимого. Те- 
перь же помимо настольных и переносных компьютеров посетители могут про- 
сматривать Web-страницы на экранах телевизоров, мобильных телефонов, кар- 
манных компьютеров и других устройств. Для вас, как Web-дизайнеров, это 
несколько усложняет работу, поскольку каждый тип устройства отличается физи- 
ческими размерами, формой и методом взаимодействия с устройством при на- 
хождении в сети Web. Поэтому при создании Web-страницы, содержимое кото- 
рой предназначено для просмотра посетителями, пользующимися как 
компьютерами, так и радиоустройствами, нужно изменять внешний вид содер- 
жимого (и, возможно, формат самой страницы) в зависимости от устройства, на 
котором эта страница будет выводиться. 
Например, статья на Web-странице с заголовком размером 36 пунктов и ос- 
новным текстом размером 18 пунктов может вполне нормально смотреться на 
17-дюймовом мониторе компьютера, но при просмотре той же страницы на кар- 
манном компьютере (например, Palm Pilot или Handspring Visor) посетитель смо- 
жет увидеть только заголовок и. несколько предложений текста статьи*. Поскольку 

перелистывание страниц при просмотре отвлекает посетителя, желательно на од- 
ном экране поместить максимально возможный объем информации. Поэтому, 
при просмотре той же Web-страницы на карманном компьютере заголовки и ос- 
новной текст могут, например, выводится шрифтом размером 12 пунктов. Для 
отделения заголовков от обычного текста можно воспользоваться выделением по- 
лужирным шрифтом. 
До появления каскадных списков стилей с их атрибутом media для вывода на 
экран одного и того же содержимого различными стилями приходилось созда- 
вать несколько страниц. Представьте себе, сколько времени и усилий требовалось 
для создания и сопровождения нескольких копий каждой Web-страницы на 
большом сайте новостей, обновление которого выполняется сотни (а, возможно, 
и тысячи раз в день). Не говоря уже о загрузке Web-сервера, которому необходи- 
мо дополнительное время на определение типа используемого посетителем уст- 
ройства для выбора и передаче браузеру нужной Web-страницы. 
ПРАКТИКУМ 
К счастью, каскадные списки стилей позволяют писать правила, которые указы- 
вают браузерам посетителей, каким образом форматировать содержимое страни- 
цы в зависимости от используемого типа устройства. Например, для вывода заго- 
ловков Web-страницы шрифтом размером 36 пунктов, а ее содержимого 
шрифтом размером 18 пунктов на экране монитора настольного компьютера, и

Глава 5. XHTML и новые тенденции 2 7 5 
вывода содержимого той же Web-страницы шрифтом размером 12 пунктов на эк- 
ране карманного компьютера, на Web-странице можно указать следующие списки 
стилей: 
<head> 
<style type="text/css" media="screen"> 
hi {font-size:36pt; text-align:center; font-weight:bold} 
body {font-size:18pt) 
--> 
</style> ' 
<style type="text/ess" media="handheld"> 
<!--
hi {font-size:12pt; font-weight:bold} 
body {font-size:12pt} 
--> 
</style> 
</head> 
Обратите внимание, что каждый из двух списков стилей в приведенном при- 
мере содержит атрибут media. Описание типа устройства, присвоенное атрибуту 
media в первом списке, равно "screen", а во втором — "handheld". Это означает, 
что Web-браузер будет использовать правила первого списка только в случае, 
если браузер выполняется на устройстве (например, компьютере), в котором со- 
держимое страницы будет выводиться на экране монитора ("screen"). Аналогич- 
но, если браузер выполнятся на карманном устройстве (например, PocketPC), он 
знает, что тип его устройства равен "handheld" и к содержимому страницы будут 
применяться правила второго списка стилей. 
К сожалению, браузеры карманных устройств на сегодняшний день не столь 
совершенны, как их аналоги в настойных компьютерах. Так, например, операци- 
онная система Palm OS поддерживает только HTML 3.2, а Web-браузеры мобиль- 
ных телефонов используют язык разметки для карманных устройств (Handheld 
Device Markup Language, HDML), язык разметки для беспроводных систем 
(Wireless Markup Language, WML) или весьма ограниченный порнабор HTML. 
Тем не менее, ожидаемый в скором времени модульный язык ХН FML (XHTML 
1.1), если он будет принят, позволит разработчикам создавать браузеры, поддер- 
живающие поднаборы XHTML, необходимые для вывода на экран содержимого в 
зависимости от типа устройства. Фактически, консорциум W3C выпустил 
XHTML Basic в декабре 200Q гЬда, прекрасно понимания необходимости поддер- 
жки дифференциации содержимого в зависимости от типа используемого уст- 
ройства. Убрав из XHTML дескрипторы, физически не поддерживаемые мобиль- 
ными телефонами, карманными устройствами, пейджерами и компьютерными 
приставками к телевизору, консорциум W3C предоставил разработчикам уменьшен- 
ную версию DTD-определения, которая может быть внедрена в браузеры этих уст- 
ройств. (Чем меньше DTD-определение, тем меньше памяти требуется браузеру и 
меньше системных ресурсов требуется для выполнения приложения браузера.) 
Как правило, карманные устройства не подключаются в сеть Internet напря- 
мую. Карманное устройство подключается к прокси-серверу, который получает 
Web-страницы с Web-сервера и передает их отфильтрованные версии для вывода

276 Глава 5. XHTML и новые тенденции 
на карманное устройство. Прокси-серверы, которые в настоящее время использу- 
ют устаревшие версии HTML, вскоре перейдут на XHTML и станут более "ин- 
теллектуальными". Помимо простой фильтрации и передачи HTML-кода карман- 
ным устройствам (как это они делают сейчас), прокси-серверы будут загружать 
требуемые списки стилей (на основе типа устройства, данные для которого они 
передают) и перед передачей содержимого Web-страницы применять к нему пра- 
вила списков стилей. Таким образом, несмотря на то, что Web-браузер мобиль- 
ного телефона может не поддерживать XHTML или каскадных списков стилей, 
прокси-сервер будет передавать содержимое, совместимое с Web-браузером мо- 
бильного телефона. Включая сейчас описатель типа устройства, вы подготовите 
ваши Web-страницы для вывода на экранах карманных устройств. 
Каскадные списки стилей уровня 1 поддерживают всего два описателя типа: 
"screen" и "print", а каскадные списки стилей уровня 2 — десять типов (см. 
таблицу 5.2), которые указывают тип устройства, ддя которых предназначается 
X HTML-содержи Мое. 
Интересно, что в стандарте каскадных списков стилей уровня 2 говорится, 
что в связи со стремительным развитием технологий список устройств, приве- 
денный в стандарте (и в таблице 5.2), не следует считать исчерпывающим. Тем 
не менее, авторы Web-страниц не должны полагаться на описатели типов уст- 
ройств, которые пока еще не определены в стандарте каскадных списков стилей. 
Из этого следует: регулярно проверяйте последние версии стандарта, поскольку 
перечень поддерживаемых устройств будет постоянно расширяться. 
Таблица 5.2. Описатели типов устройств для каскадных списков стилей уровня 2 
Описатель типа 
устройства Устройства, для которых применяются правила списка стилей 
"all" Для всех устройств. 
"aural" Для синтезаторов речи. 
"Braille" Для вывода на тактильных устройствах. 
"embossed" Для принтеров брайлевской печати. 
"handheld" Для карманных устройств (например, PDA и мобильных телефонов). 
"print" , Для устройств с разбивкой на страницы (например, принтеров) и для 
предварительного просмотра печати на экране. 
"projection" Для вывода на проекторы и устройства печати на слайдах и 
прозрачных 
пленках. 
"screen" Для цветных компьютерных мониторов. 
"tty" Для телетайпных устройст!?. (использующих шрифт с фиксированным углом 
наклона). 
"tv" Для экранов телевизоров (низкое разрешение, цветовая гамма, ограниченная 
возможность пролистывания, возможность воспроизведения звука). 
Несмотря на то что пример в нач;ше этого совета показывает, каким образом 
можно внедрить отдельные списки стилей для каждого типа устройства, для оп- 
ределения правил для нескольких типов устройств в одном списке стилей можно

Глава 5. XHTML и новые тенденции 2 7 7 
воспользоваться правилом @media. Например, можно написать правила для кар- 
манных устройств, принтеров и мониторов компьютеров в одном списке стилей, 
как показано в следующем примере: 
<head> 
<style type="text/ess"> 
Smedia screen, print { 
hi {font-size:36pt; text-align:center; font-weight:bold} 
body {font-size:18pt} } 
Smedia handheld { 
hi {font-size:12pt; font-weight:bold} 
body {font-size:12pt} } 
</style> 
</head> 
Обратите внимание, что каждое правило @media содержит указание типа уст- 
ройства (или устройств, разделенные запятыми), для которого с|>но должно при- 
меняться, после чего в фигурных скобках содержится набор правил. Таким обра- 
зом, в приведенном примере Web-браузеры компьютеров (тип устройств для 
которых равен "screen") будут применять два правила списков стилей из первого 
правила @media, а прокси-серверы для Web-браузеров, работающих в карманных 
устройствах, будут применять два правила списков стилей из второго правила 
@med±a. 
Вместо внедрения списков стилей (особенно списков стиле}|, предназначен- 
ных для определенного типа, устройств) можно воспользоваться ссылкой на фай- 
лы, внешние по отношению к Web-странице. С помощью команды @import, 
синтаксис которой показан в следующем примере, можно уменьшить количество 
загружаемого браузером кода: 
@import | L-адрес списка стилей>) <список типов устрой 
Предположим, например, что в предыдущем' примере i | каскадных 
СПИСКОВ СТИЛеЙ Содержатся В ДВУХ ВНеШНИХ файлах (SmailDisplay.css И 
NormaiDispiay.css) на Web-сервере в каталоге /stylesheets. Если включить 
приведенный ниже код в HTML-код Web-страницы, браузер посетителя загрузит 
файл внешнего списка стилей, в котором содержатся прав | для устройства, 
поддерживаемого браузером: 
@import (/StyleSheets/NormalDisplay.ess) screen, print; 
@import (/StyleSheets/SmallDisplay.ess) handheld; 
Таким образом, прокси-сервер для браузеров, выполняющихся на мобильных 
телефонах, будут загружать файл SmailDisplay.css, в то время как браузеры 
компьютеров будут загружать файл NormaiDispiay.css, поскольку они не под- 
держивают тип "handheld". Обратите внимание, что если карманное устройство 
(например, PDA) позволяет распечатывать содержимое Web-страницы, его про- 
кси-сервер загрузит оба файла списков стилей.

278 Глава • XHTML и новые тенденции 
Управление печатью XHTML-страницы Web-браузером 
Если ваша Web-страница имеет большую длину, и вы предполагаете, что посе- 
титель захочет распечатать страницу, можно воспользоваться правилом каскадно- 
го списка стилей для разбития содержимого Web-страницы при печати на от- 
дельные страницы. Для Web-страницы, просматриваемой на экране, не 
существует практического ограничения по ее длине. Браузер дает посетителю 
возможность пролистывать содержимое страницы без явного ее разделения на 
отдельные страницы. Тем не менее, каждый лист бумаги имеет конечную длину. 
Поэтому после вывода последней печатаемой строки Web-страницы Web-браузер 
должен выдать лист из принтера. 
К сожалению, для длинной страницы Web-браузер может игнорировать физи- 
ческое окончание страницы. Если браузер, например, попытается печатать со- 
держимое Web-страницы на лазерном принтере до самого конца страницы, посе- 
титель не сможет просмотреть содержимое, "напечатанное" за пределами 
допустимой области печати внизу и вверху страницы. Более того, если на Web- 
странице содержатся изображения, одна их часть может выводиться на одной 
странице, а вторая часть — на следующей странице. И, наконец, если посетитель 
пользуется матричным принтером, некоторые строки могут печататься на перфо- 
рации между отдельными страницами и после разделения ленты на страницы 
текст становится нечитабельным. К счастью, для печати страницы желаемым 
вами образом можно воспользоваться правилом каскадных списков стилей. 
ПРАКТИКУМ 
Пусть, например, вы создали длинную Web-страницу и хотите гарантировать, что 
браузеры выводят содержимое страницы на печать по разрывам страниц между 
абзацами и до или после (но не в середине) графических изображений. При не- 
обходимости разбивки содержимого Web-страницы при печати на отдельные 
страницы бумаги можно воспользоваться свойствами каскадных списков стилей 
page-break-after И page-break-before. В таблице 5.3 перечислены ИНСТрук- 
ции, получаемые Web-браузером в зависимости от значения свойств page-breakafter 

И page-break-before. 
Например, следующее правило указывает Web-браузеру вывести лист из прин- 
тера перед печатью каждого заголовка уровня 1: 
,hl {page-break-before: always} 
После внесения приведенного выше правила в каскадный список стилей в 
разделе заголовка Web-страницы его можно будет использовать для управления 
разрывами страниц путем вставки в HTML-код страницы заголовков уровня 1, 
как показано в следующем примере: 
<head> 
<style type="text/css"> 
hi {page-break-before:always} 
</style> 
</head>

Глава 5. XHTML и новые тенденции 279 
<body> 
<hl style="page-break-before:auto"> 
Этот заголовок определяет начало документа</Ы> 
<р>Текст на странице 1...</р> 
<Ы>Этот заголовок начинает новую страницу</Ь1> | 
<р>Текст на странице 2...</р> 
<hl style="page-break~before:'avoid"> 
Перед этим заголовком разрыва страницы нет</Ы> 
<р>Дополнительный текст на странице 2...</р> 
<Ы>Этот заголовок начинает новую страницу</Ы> 
<р>Текст на странице 3. . .</р> 
</body> 
</html> 
Во избежание печати пустых листов в начале документа в приведенном при- 
мере используется внутритекстовое правило списка стилей в | юм заголовке 
уровня В в котором свойству page-break-before присваивается Значение "auto". 
Установка значения "auto" для свойства page-break-before указывает Web-брау- 
зеру не избегать разрыва страницы, но и не вставлять его. Также ty e внима- 
ние, что свойству page-break-after в третьем дескрипторе <ы> присваивается 
значение "avoid". Это указывает, что Web-браузер должен печатать третий заго- 
ловок уровня 1 на той же странице, что. и второй заголовок уровня 1 (если это 
возможно физически). 
Таким Образом, присваивая QOHCIW page-break-before (ИЛИ page-breakafter) 
значения в списке стилей для определенных элементов Wfeb-страницы, 
можно контролировать, будет ли Web-браузер выбрасывать из принтера страницу 
перед печатью данного элемента. 
Таблица 5.3. Значения свойств page-break-before и page-break-after, которые 
исполь- 
зуются для разбивки содержимого на страницы при печати 
Значение page-break-before page-break-after 
auto He вставлять, но и не предотвращать 
разрыв страницы перед элементом. 
, always Вставлять разрыв страницы перед 
элементом. 
avoid Игнорировать значение always 
свойства page-break-before 
и не вставлять разрыв страницы 
перед элементом. 
left Вставлять такое количество разрывов 
страниц, которое необходимо, чтобы 
элемент находился на нечетной странице. 
right Вставлять такое количество разрывов 
страниц, которое необходимо, чтобы 
элемент находился на четной странице. 
Не вставлять, но и не предотвращать 
разрыв страницы после элемента. 
Вставлять разрыв страницы после 
элемента. 
Игнорировать значение always 
свойства page-break-after 
и не вставлять разрыв страницы 
после элемента. 
Вставлять такое количество разрывов 
страниц, которое необходимо, чтобы 
элемент, следующий непосредственно 
за данным элементом, находился на 
нечетной странице. 
Вставлять такое количество разрывов 
страниц, которое необходимо, чтобы 
элемент, следующий непосредственно 
за данным элементом, находился на 
четной странице.

280 Глава 5. XHTML и новые тенденции 
Для получения еще более полного контроля над разбивкой на страницы вы 
имеете возможность подменить существующие правила каскадных списков сти- 
лей и использовать внутритекстовые стили в дескрипторах элементов страницы. 
В некоторых случаях можно применять только внутритекстовые стили в дескрип- 
торах элементов. Например, если необходимо, чтобы графическое изображение 
или XHTML-таблица всегда начиналась с новой страницы (чтобы таблицы или 
изображение не разбивались на две страницы), достаточно будет воспользоваться 
внутритекстовыми стилями, как показано в следующем примере: 
<img style="page-break-before :aLlways"> 
<table style="page-break-befor€i: always "> 
Помните, что помимо управлений разбивкой на страницы, правила каскадных 
списков стилей также можно применять для установки размера и типа шрифта, 
используемого при распечатке содержимого Web-страницы. Таким образом, рас- 
печатка страницы может отличаться от того, как страница выглядит на экране. В 
предыдущем совете "Изменение внешнего вида XHTML-страницы на основе типа 
целевой системы" вы научились создавать правила каскадных списков стилей для 
определенных типов устройств. .Например, для печати содержимого Web-страни- 
цы шрифтом Courier в списке стилей в разделе заголовка Web-страницы необхо- 
димо указать следующее правило @media: 
@media print {body {font-face:courier}} 
Хотя в приведенном примере правило @media применяется ко всему тексту 
страницы, можно также написать правила, которые будут применяться только к 
отдельным элементам.

Глава б 
Графика 
В этой главе 
• Вопросы межплатформенной совместимости при создании графических 
изображений для Web-страниц 
• Задание размеров изображения в дескрипторе <img> 
• Работа с атрибутом alt и браузерами, не воспроизводящими графику 
Создание всплывающей подсказки с помощью атрибута title в 
дескрипторе <img> 
• Сжатие фотографий и JPEG-файлы 
• Сохранение аппликаций и текста в файл формата GIF 
• Создание видимости быстрой загрузки рисунков 
• Работа с форматами файлов PNG-8 и PNG-24 
• Преобразование графики в Web-изображения с помощью программ 
редактирования изображений 
• Создание Web-совместимых графических изображений на сканере 
Создание цветных горизонтальных линий 
• Извлечение быстро загружающегося изображения-"наживки" с помощью 
атрибута lowsrc 
> Обеспечение правильного представления цветов с помощью 
Web-безопасной цветовой палитры 
Создание графических гиперссылок 
• Создание мозаичного фона из графических изображений 
• Создание прозрачности в GIF-изображениях 
• Извлечение полноразмерного изображения после щелчка на пиктограмме 
• Предварительная загрузка и "фоновое" кэширование изображений 
Расширение Web-безопасной цветовой палитры с помощью техники 
растрирования 
• Сглаживание краев текста, преобразованного в графический элемент, 
за счет устранения контурных неровностей 
чИЦ

282 Глава 6. Графика 
ля большинства пользователей Internet Всемирная Паутина всегда была 
Цсредой визуальной. Однако в начала времен графика была чуждой Всемир- 
ной Паутине. Собственно говоря, графические изображения были более чем ред- 
ки — Web-дизайнеры их не использовали. Компьютеры были медленными, соеди- 
нения с Internet были медленными, и лучшим, чего можно было ожидать, 
путешествуя по Internet, был белый текст, медленно появляющийся на зеленом 
или черном фоне монитора. То было темное, тоскливое время для пользователей 
Internet. К счастью, дни эти давно минули. 
Сегодня Web-страницы с изобилием графики, равно как и Internet (электрон- 
ное "шоссе", по которому транспортируется информация) становятся быстрее и 
быстрее. Сравнить скорость, с которой информация движется по Internet в наши 
дни, со скоростью десять лет назад — все равно, что сравнить "Запорожец" с 
"Феррари". Иными словами, сегодняшняя сеть Internet «намного быстрее. Более 
того, компьютеры с установленными на них новейшими браузерами, такими, как 
Internet Explorer и Netscape Navigator, обрабатывают и загружают Web-страницы 
быстрее, чем когда-либо ранее. 
Все это представляет важность потому, что графические файлы больше по раз- 
мерам, нежели текстовые, и на перемещение по Internet к компьютеру посетите- 
ля им требуется больше времени. В те дни, когда стандартным подключением к 
Internet считался модем на 2400 бод, никому не хотелось ждать несколько минут 
(а то и часов), необходимых для загрузки хотя бы одного-единственного графи- 
ческого изображения. Кроме того, выбор приложений для создания графики и 
сжатия ее в файлы небольшого размера был куда меньше. Разработка же аппа- 
ратного и программного обеспечения, необходимого, чтобы сделать графику в 
Internet реальностью, потребовала времени. 
Понимание роли графики в Web-дизайне 
Графику на Web-страницы помещают по тем же причинам, что и картинки в 
буклеты или журналы — чтобы помочь читателям лучше понять то, что вы пыта- 
етесь сказать. Назначение графики — дополнять текст. Например, Web-сайт, раз- 
работанный для "продвижения" крупного университета, например, Университета 
штата Калифорния в Беркли, будет содержать изображения студгородка, аудито- 
рий, и, возможно, фотографии преподавателей и других сотрудников университе- 
та. Посетители сайта не только прочтут о преимуществах учебы в этом универси- 
тете, но смогут также увидеть его корпуса, общежития, спортивные площадки. 
Просмотрев страницы, одна из которых, например, показана на рис. 6.1, посети- 
тели получат полное представление о студенческой жизни в Беркли. 
Один лишь текст не может передать столько же информации, как текст в со- 
четании с несколькими хорошо подобранными изображениями. При использова- 
нии описательного текста, пусть даже и хорошо написанного, вы полагаетесь на 
воображение читателя, в котором создается образ описываемого вами. И, наобо- 
рот, когда для усиления текста вы используете рисунки, ваши читатели видят 
именно то, что вы имели в виду.

Глава 6. Графика 283 
residential.& family.living/. 
new student services 
Welcome to UC Berkeley! 
The Office of Residential and Family Living and New 
Student Services is committed to creating positive 
residential communities through excellence in academic 
integration and personal development opportunties for 
students We provide students with the highest quality 
academic support programs and services, and community 
development opportunties 
* 
UC I iota* Sa&'d: RSSP Moo» 0*plofe RS3P 
j 
Рис. 6.1. Студенческая жизнь в Беркли, в словах и фотографиях 
К сожалению, с иллюстрациями на Web-страницах, как и со всем прочим, 
можно переборщить. На рис. 6.1 несколько удачных изображений вместе тек- 
стом, их описывающим, дают читателю представление о жизни в университете. 
Однако фотографии всех комнат в общежитиях и изображения каждого из корпу- 
сов и всех аудиторий в них - уже избыток информации. Перед тем как добав- 
лять на Web-страницу графику, задайте себе вопрос: какие из изображений луч- 
ше всего проиллюстрируют то, что вы хотите сказать? Если цель Web-сайта — 
привлечь новых студентов, выберите те изображения, которые с наибольшей ве- 
роятностью помогут достичь этой цели. 
Создавая Web-сайт, никогда не забывайте о своей ответственности как дизай- 
нера. Не выплескивайте на своих посетителей слишком много информации н 
одной странице, и не предоставляйте им слишком много альтернат | сразу. Вам 
решать, что и когда увидят ваши посетители. Предоставляя посетителям черес- 
чур большой объем данных за один раз, вы рискуете вызвать "информационную 
перегрузку", что может привести к формированию у ваших посетителей ошибоч- 
ного мнения или совершения ими опрометчивого выбора. (О том, как добиться 
равновесия между Web-изображениями и текстом, вы узнаете в подразделе "Дости- 
жение баланса между текстом и графикой на Web-странице" далее в этой главе.) 
Создание Web-графики 
Включая в свою Web-страницу изображения, вы можете обратиться к несколь- 
ким источникам графики. Можно приобрести компакт-диск с готовыми изобра-

284 Глава 6. Графика 
жениями, или же выгрузить Web-изображения с сайтов, торгующих графикой 
(например, http://photosphere.com ИЛИ http://creative.gettyimages.com). 
Еще один вариант - сделать фотографии с помощью цифрового или пленочного 
фотоаппарата, Затем вы можете сохранить на диске изображения, отснятые циф- 
ровой камерой, или с помощью сканера отсканировать предварительно напеча- 
танные фотографии в файлы на своем компьютере. И, наконец, можно создать 
цифровые аппликации и иллюстрации с помощью дизайнерских приложений, 
таких как Adobe Photoshop или Image Ready. 
За исключением варианта покупки готовой графики, вам понадобятся одна 
или несколько программ, которые помогут вам в обработке и подготовке изобра- 
жений к использованию их в Internet. Графические приложения не только эконо- 
мят время при подготовке изображений, но также дают вам возможность управ- 
лять содержимым изображения. Скажем, у вас есть фотография, на которой вы с 
тремя своими друзьями сняты у Большого Каньона, и вы хотите сконцентриро- 
вать внимание на людях на фотографии, а не на пейзаже. Чтобы это сделать, вы 
можете открыть изображение в Photoshop (или другой программе редактирования 
изображений) и отсечь те области рисунка, которые посетители вашей страницы 
видеть не должны. Усечение рисунка направляет взгляд посетителя именно на 
то, что вы хотите ему показать путем удаления ненужных частей рисунка, как 
показано на рис. 6.2. 
Рис. 6.2. Усечение изображения помогает сфокусировать взгляд смотрящего на 
деталях 
изображения и избежать нежелательного отвлечения внимания 
Понимание форматов файлов изображений 
Когда посетитель извлекает Web-страницу с рисунками, общий размер файлов 
изображений определяет, сколько времени потребуется Web-браузеру на загрузку 
и отображение страницы. Если ваши графические файлы слишком велики, посе- 
титель сайта может потерять терпение и перейти на другой, быстрее загружаю- 
щийся Web-сайт. К счастью, существуют различные схемы сжатия, позволяющие 
уменьшить размеры графических файлов. Некоторые из этих схем используют 
сжатие с потерей данных, другие сжимают информацию без потерь. Схема сжа- 
тия с потерями уменьшает размер графического файла путем удаления цветовых

Глава 6. Графика 
данных. Сжатие же без потерь уменьшает размер файла путем сжатия больших 
блоков одного и того же цвета. Хотя при сжатии с потерями некоторая часть 
цветовой информации действительно теряется, при сжатии без потерь вся цвето- 
вая информация остается в файле — Web-браузер просто разворачивает цветовые 
данные, чтобы восстановить сжатые блоки цвета. 
Последний этап подготовки изображения включает в себя выбор формата 
файла при сохранении рисунка в дисковый файл. Тремя наиболее распростра-, 
ненными форматами Web-графики являются JPEG (формат, использующий схему 
сжатия с потерями, разработанную Объединенной группой экспертов в области 
фотографии (Joint Photographic Experts Group)), GIF (формат обмена графикой 
(Graphic Interchange Format)) и PNG (переносимая сетевая графика (Portable 
Network Graphic)). Форматы GIF и PNG используют для уменьшения размера 
файла схему сжатия без потерь. Чем меньше, размер графического файла, тем бы- 
стрее Wfeb-браузер сможет загрузить его й отобразить на Web-странице. Следова- 
тельно, сжатие графических файлов сокращает длительные периоды ожидания, 
обычно ассоциирующиеся с Web-страницами, на которых присутствуют большие 
изображения. Из трех вышеперечисленных форматов JPEG используется главным 
образом для фотографий, тогда как формат GIF чаще всего применяется для ап- 
пликаций, иллюстраций и рисунков. 
Использование формата JPEG уменьшает размеры файлов изображений, со- 
держащих множество цветов (таких, как фотографии), за счет удаления (сжатие с 
потерями) определенных цветов и затем использования остав шихся цветов по 
схеме растрирования, то есть смешивания пикселей цветов, позволяющей "обма- 
нуть" глаз человека так, что он видит цвета, которых на картинке больше нет. 
Хотя JPEG-изображение может содержать до 16.7 млн. цветов, в процессе сжатия 
большая часть из этих цветов удаляется для достижения значительного уменьше- 
ния размера файла. 
В то время как файл формата JPEG может содержать миллионы цветов, файл 
GIF может вместить в себя только 256. Формат GIF использует схему сжатия, 
называемую технологией сжатия повторяющихся последовательностей символов 
(Run Length Encoding — RLE) для сжатия больших сплошных цветовых блоков 
(вроде тех, которые встречаются в аппликациях). Например, предположим, что 
изображение имеет сплошной блок голубого цвета во всю | ну страницы. 
При сохранении файла схема сжатия GIF фиксирует координаты голубого блока 
и удаляет цветовой блок из файла. Когда Web-браузер открывает сохраненное 
GIF-изображение, с помощью координат и последовательностей он воссоздает 
блок цвета внутри изображения. Благодаря технике записи координат участков 
сплошного цвета GIF-файлы создаются с очень небольшими размерами. По- 
скольку размер изображения, сохраненного в GIF-файле, зависит от количества 
цветов в изображении, графика, содержащая небольшое количество цветов, сжи- 
мается до небольших размеров. 
Формат PNG использует комбинацию схем сжатия GIF и JPEG. Существуют 
две разновидности формата PNG: PNG-8 и PNG-24. Формат PNG-8 может рабо- 
тать только с графикой, содержащей максимум 256 цветов. Следовательно, фор-

286 Глава 6. Графика 
мат PNG-8 весьма сходен с форматом GIF. Кроме того, в PNG-8 используется 
метод сжатия RLE, аналогичный GIF-сжатию. Применение формата PNG-8 к 
аппликациям дает небольшие размеры файлов, близкие к размерам файлов фор- 
мата GIF. Формат PNG-24 может обрабатывать изображения, содержащие милли- 
оны цветов, и применяется для минимизации размеров файлов фотоизображе- 
ний. Однако поскольку формат PNG не удаляет пиксели цвета, как формат 
JPEG, сохранение фотографий с использованием формата PNG-24 зачастую со- 
здает файлы чересчур большого размера, что делает неприемлемым их использо- 
вание на Web-страницах. 
Выбирая формат графического файла, вы должны убедиться, что большинство 
(а лучше все) посетители вашего сайта могут открывать графические файлы, 
включенные в вашу Web-страницу. Хотя почти все Web-браузеры в состоянии 
разворачивать и отображать файлы в форматах GIF и JPEG, этого нельзя сказать 
о PNG-графике. (Web-путешественникам из тех, кто пользуется более старыми 
браузерами, может и не удастся просмотреть изображения в формате PNG.) Сле- 
довательно, перед тем, как выбирать графический формат, убедитесь, что вы зна- 
ете свою аудиторию и возможности Web-браузеров, которыми вероятнее всего бу- 
дут пользоваться ваши посетители. 
Netscape Navigator и Internet Explorer предоставляют ограниченную поддер- 
жку графики в PNG-формате с 1997 года. Однако для полной поддержки формата PNG, 
вклю- 
чая прозрачность изображений, просматривать изображения лучше всего с помощью 
Internet 
Explorer версии 5 и выше и Netscape Navigator версии 6 и выше. 
Помещение Web-графики на Web-страницу 
Для того чтобы поместить изображение на Web-страницу, вам потребуется 
файл графического изображения и HTML-дескриптор <img>. Например, следую- 
щий дескриптор <img> дает Web-браузеру указание загрузить и отобразить гра- 
фический файл image.jpg: 
<img src="image.jpg"> 
Внутри дескриптора <img> атрибут src сообщает Web-браузеру источник гра- 
фического изображения (то есть имя файла), которое браузер должен отобразить. 
Чтобы дескриптор изображения соответствовал XHTML, он должен иметь 
конечный дескриптор, или же его начальный дескриптор должен заканчиваться 
символами 
/ > . Например, <img src="imagel .jpg" /> (между замыкающими / и > пустых 
элемен- 
тов ставится пробел) или <img src="imagel .jpg"> <img/>.) 
Чтобы включить картинки в Web-страницу, создайте для каждой картинки 
дескриптор <img> между начальным и конечным дескрипторами тела документа 
(<bodyx/body>). Web-браузер отобразит изображения на Web-странице в том 
порядке, в котором дескрипторы <img> находятся в HTML-документе. Напри- 
мер, следующий код дает Web-браузеру указание отобразить два графических 
изображения:

Глава 6. Графика 
<html> 
<headXtitle>IIpnMep трех дескрипторов изображения</Ъ1Ъ1еХ/11еас1> 
<body> 
<img src="imagel.jpg" /> 
<img src="image2.jpg" /> 
</body> 
</html> 
В данном примере Web-браузер попытается отобразить изображения слева на- 
право по горизонтали в окне приложения. Если ширина окна браузера недоста- 
точна для того, чтобы вместить горизонтально размещенные изображения, брау- 
зер расположит изображения в окне по вертикали. 
Учет скорости доступа в Internet 
Еще одним важным моментом при включении графики в Wfeb-страницу явля- 
ются временнь/е задержки, вызванные загрузкой файлов изображений. Хотя такие 
варианты подключения к Internet, как цифровые, абонентские линии (Digital 
Subscriber Line — DSL) и модемы для физических линий позволяют пересылать 
большие объемы данных по Internet за короткие промежутки времени, не у всех 
есть доступ к высокоскоростному подключению к Internet. Всякий раз, когда вы 
добавляете на Web-страницу графику, вы увеличиваете время, необходимое для 
полной загрузки страницы и ее содержимого с Web-сервера. 
, Если посетители вашей Web-страницы пользуются медленным — на 28.8 Кбод - 
подключением к Internet, браузеру понадобится от пятнадцати до двадцати се- 
кунд на загрузку 40—50 Кб данных. Для большинства Web-путешественников 
тридцать секунд составляют максимальный промежуток времени, в течение кото- 
рого они согласны ожидать загрузки содержимого страницы. Поэтому нужно сле- 
дить за тем, чтобы размер файла каждой Web-страницы сайта оставался неболь- 
шим — тогда ваши посетители будут дожидаться отображения всей страницы, а 
не щелкать на гиперссылках, чтобы отправиться на какой-нибудь другой сайт. 
Помните, у посетителей вашего сайта терпения не больше, чем у вас, когда вы 
путешествуете по сети. 
Чтобы узнать точный размер файла, выполните щелчок правой кнопкой 
мыши на имени файла картинки и выберите Properties (Свойства) из появивше- 
гося контекстного меню. (На Macintosh щелкните на имени файла, удерживая 
клавишу CONTROL, затем выберите Get Info (Получить информацию)). Размер 
файла в диалоговом окне Properties (На Macintosh — размер файла в скобках в 
диалоговом окне Get Info) дает точное измерение фактического размера графи- 
ческого файла, как показано на рис. 6.3. 
Графика — неотделимая составляющая Internet. Однако если из-за больших 
графических файлов посетители покидают ваш сайт, не дожидаясь загрузки изоб- 
ражений, вряд ли можно сказать, что графика приносит пользу. Помните: 
графика — это средство, а не цель.

288 Глава 6. Графика 
. .Общие 
та 
Т.п. ' 
Палка. 
Размер. 
BaokmarkedTeei 
ACDSeeGIFlmege 
C\WltN)DOWS\Pe5o4ii* ст 
33,1 КБ (101 570 байт). 102 
Имя MS-DOS_ ВООКМА'Ч GIF 
Создан. 
Изменен' 
Открыт; 
Атрибуть 
29 сентября 2 Ш г 
29 сентября 2003 г 
С8сентября 2003 г 
Г" рольке итвиие: 
Р7 .Архивный 
1 «* 1 
В И З 
ОЛ
400 байт занято 
12:19.25 
12:1854 
Г Скрытый 
Г 
Отмена \ . |
• . . : 
In" compUar.gtf Info 
Size. S f on ini i i ,:745 fcytes 
Where; *1ecifite»>i Ht>. Ority ^Hte 
Creatnl: Tue.Auq 15, 2000, 7 Q1 РЦ 
M^tliPd Tue.Ayg 15; 2OO0, 7.01 РП 
version.n/» 
• l«k«« G su 
Операционная система Windows Операционная система Macintosh 
Рис. 6.3. Диалоговое окно "Properties" (Windows, слева) и диалоговое окно "Get 
Info" (Macintosh) 
дают точное измерение размера графического файла 
Соблюдение авторских прав при работе 
с Web-графикой 
Рассмотрение Web-графики не может быть полным без упоминания законода- 
тельства об авторском праве. Хотя законы об авторском праве варьируются от 
страны к стране, если вы - гражданин США, вы должны следовать законам, 
принятым Конгрессом Соединенных Штатов. 
Законодательство США об авторском праве защищает права людей, создаю- 
щих новые продукты (изобретателей) и интеллектуальную собственность, при- 
надлежащую писателям и художникам. Например, текст этой книги подпадает 
под действие стандартного законодательства США об авторском праве, что дела- 
ет незаконным копирование кем-либо информации, содержащейся на этих стра- 
ницах (интеллектуальная собственность), и перепродажу или распространение 
скопированных фрагментов без письменного разрешения издателя. 
Помимо текста, под защиту законодательства США об авторском праве подпада- 
ют графика и произведения искусства, что включает в себя графику и произведения 

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

Глава 6. Графика 289 
об использовании или нет, напишите письмо — электронное или обычное — ав- 
тору перед тем, как использовать изображение. Объясните, что именно вы хоти- 
те делать с рисунками автора и спросите его разрешения на использование ри- 
сунков. Если автор скажет "нет", не используйте рисунки. И, наоборот, если 
автор даст согласие на использование своего материала, постарайтесь получить 
разрешение в письменной форме. Например, отправьте автору письмо с описа- 
нием того, что вы собираетесь делать с изображениями, и оставьте место для 
подписи автора. (Стандартный термин для обозначения документа такого 
типа — расписка в передаче права). При написании расписки в передаче права 
конкретно укажите, как именно вы намереваетесь использовать изображения. Ав- 
тор, вероятнее всего, не подпишет общую расписку, в которой не сказано, что вы 
намереваетесь делать с изображениями. 
Некоторые авторы указывают, сколько раз вы можете использовать их изобра- 
жения или где вы можете публиковать их рисунки. Например, когда вы покупае- 
те аппликации или фотографии у дилера или на коммерческом Web-сайте, вла- 
делец (владельцы) сайта могут разрешить вам использовать изображения так, как 
вы считаете нужным, за определенными исключениями, такими, как запрет ис- 
пользования рисунков на Web-сайтах с порнографическими материалами или ли- 
тературой "групп ненависти" (hate groups). Всегда следует внимательно прочесть 
расписку в передаче права, и, если у вас нет уверенности по какому-либо из ус- 
ловий передачи, попросите у владельца авторского права разъяснений. 
Многие Web-сайты предлагают бесплатные аппликации; однако зачастую они 
ограничивают его использование персональными Web-сайтами, запрещая поме- 
щать рисунки на сайты коммерческой направленности. Если вы используете ап- 
пликации из таких источников, как галерея аппликаций Microsoft Office или с 
таких Web-сайтов, как Microsoft Design Gallery Live (http://dgi.microsoft.com), 

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

290 Глава 6. Графика 
нежели просто вставки графики в страницу в произвольном порядке. Вам нужно 
найти правильное соотношение между информацией, представленной в виде тек- 
ста, и информацией, передаваемой посредством изображений. Однако даже са- 
мые выразительные изображения требуют пояснений. 
Например, большинство энтузиастов спорта мгновенно узнают фотографию 
Андрея Шевченко без какого-либо текста о талантливом футболисте. Однако, до- 
бавив под изображением текстовое поле со словами "Андрея Шевченко из "Ми- 
лана" забивает очередной победный гол", вы превратите изображение в истори- 
ческую фотографию. Текст передает важное историческое событие; вместе с 
фотографией, два этих элемента создают моментальный снимок во времени и ге- 
нерируют более действенное сообщение, чем каждый из них в отдельности. 
Всегда подбирайте фотографии, поддерживающие связанный с ними текст. 
Например, заменить фотографию города Парижа и Эйфелевой башни фотогра- 
фией Шепетовки было бы нелепо. Однако многие Web-дизайнеры вставляют 
изображения на страницы без четкого представления о том, как изображения со- 
относятся с текстом Web-страницы. 
Кроме нахождения равновесия между текстом и графикой, если Web-страница 
содержит более одного изображения, выберите одно из изображений в качестве 
"главной" картинки, которая передает тематику Web-страницы. Поместите "темати- 
ческое" изображение на видном месте Web-страницы. На Web-страницах, содержа- 
щих доминирующие изображения, вроде той, которая показана вверху на рис. 6.4, 
читателям легче сфокусировать взгляд. И, наоборот, на Web-страницах с 
нескольки- 
ми картинками без доминирующего (тематического) изображения (как показано в 
нижней части рис. 6.4) посетители могут почувствовать себя сбитымис толку. 
Цвет — отличное средство для привлечения внимания посетителей. Цветные 
изображения привлекают внимание лучше, чем черно-белые, и, кстати, публика- 
ция цветного изображения на Web-странице обойдется вам ничуть не дороже, 
чем черно-белая картинка. В печатных изданиях дела с использованием цвета 
обстоят совершенно иначе: печать в цвете может стоить на сотни, если не на ты- 
сячи долларов дороже черно-белой печати. 
Привлечь внимание посетителя к определенным картинкам на странице можно с 
помощью одной хитрости: комбинирования цветных изображений с черно-белыми. 
Поместите изображение с доминирующими цветами на страницу, где остальные 
(менее важные) изображения являются черно-белые. Поскольку человека тянет сна- 
чала посмотреть цветную картинку, вы сможете сфокусировать взгляд посетителя на 

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

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

Глава 6. Графика 291 
Фейп Правке Дня Избранное Сервис ^пр 
"У Л 3 A -si :'di -i- J й"» 
Крым — это не только море, но и горы 
Водопад Учан-Су бывает 
таким... . и вот таким 
3>айл Правке Ёмд Избранное Сервис 
Крым -- это не только море, но и 
горы 
Водопад Учан-Су 
бывает таким ... 
. и вот таким 
Рис. 6.4. Web-страницы с доминирующим изображением помогают сфокусировать 
внимание 
посетителей (вверху), тогда как Web-страницам без доминирующего изображения 
не хватает фокуса (внизу)

292 Глава6. Графика 
-• '^«cjaih^/^q^.' 
Обтекание текстом изображений 
<роме того, вставляя 
изображения в Web- 
страннцу, старайтесь 
не размешать их так. 
чтобы текст обтекал их 
с обеих сторон. Вместо 
этого помешайте 
изображения по левому 
или правому краю 
страницы с обтеканием 
текста по 
противоположной 
стороне. 
—-ш 
"•У м!1Г.1|дЧ|ЛА1'.Л.'|||1^" 
изображе: 
середину . 
"трес 
в п еРе З 
трафн 
причиной 
налрхжей 
.d. 
Обтекание текстом изображений 
Кроме того, вставляя изображения в Web- 
страницу, старайтесь не размещать их так, чюбы 
_ текст обтекал их с обеих сторон. Вместо этого 
•л ^^^iL^™^^^^^*"»^^'"»"'""^ • помещайте изображения полевому или правому 
.•'.~JJ"2^^4ii"'™'7."eteTT«1.]^' i краю страницы с обтеканием текст а по 
' противоположной стороне. Помещение 
! ^ | i ^ * » i ^ « ^ ' ^ » ' f c i * » - ' " ***** ; изображения в середину 
колонки текста, как на 
„ ^ , JSkZiZZZuiZZiSZ I рисунке, заставляет взгляд пользователя 
~~н«1*чь1 *"-*taIE^?'^"*M"i. ^ "перескакивать" взад-вперед через графический 
Рис. 6.5. Текст, расположенный по правой стороне страницы, читается легче 
Комбинировать текст и изображения на Web-странице вовсе не сложно. Все, 
что нужно делать, это выбирать выразительные картинки и затем следовать не- 
скольким простым правилам. Всегда подбирайте изображения, имеющие отно- 
шение к тексту. Если текст не подходит к изображению, замените изображение 
либо перепишите текст. Если картинка стоит тысячи слов, то картинка в сочета- 
нии с хорошо написанным текстом может передать огромные объемы информа- 
ции быстро и на небольшом пространстве Web-страницы. 
Вопросы межплатформенной совместимости при 
создании графических изображений для Web-страниц 
После того, как вы включили изображение в Web-страницу, то, как изображе- 
ние будет выглядеть на мониторе посетителя, зависит от множества факторов. 
Один из этих факторов — операционная система, установленная на компьютере 
посетителя. На экране Macintosh одно и то же изображение выглядит несколько 
иначе, чем на экране Windows-компьютера (см. рис. 6.6). 
При отображении картинки Web-браузер считывает и отображает содержимое 
файла графического изображения по одному пикселю за раз. Браузер определяет 
цвет, который он должен отобразить на экране, путем нахождения значения цве- 
та каждого пикселя в системной таблице кодировки цветов (Color Lookup Table 
— CLUT). Таким образом, цвета, отображенные браузером при интерпретации 
содержимого графического файла, определяются таблицей кодировки. К сожале- 
нию, в средах Windows и Macintosh используются различные таблицы кодировки 
цветов; именно поэтому при отображении одного и того же изображения в двух 
этих системах вы замечаете цветовой сдвиг. 
Другая проблема состоит в сдвиге гаммы между мониторами Windows и 
Macintosh. Гамма монитора определяет среднюю точку между светлым и темным. 
У мониторов Macintosh гамма составляет в среднем 1.8, тогда как гамма монито- 
ров Windows — 2.2. Различие в гамме между двумя операционными системами

Глава 6. Графика 293 
Изображение на экране 
Windows-компьютера 
То же изображение на экране 
компьютера Macintosh 
Рис. 6.6. При отображении изображений в шкале серого цвета на платформах 
Windows и 
Macintosh имеет место сдвиг яркости изображения 
приводит к тому, что изображение, созданное на Macintosh и отображенное на 
компьютере, работающем под управлением Windows, будет на 15—20% темнее. 
Другими словами, изображения, созданные в среде Windows, на экране Macintosh 
кажутся на 15—20% светлее. 
ПРАКТИКУМ 
Решение, позволяющее справиться и с проблемой цветового сдвига, и с пробле- 
мой гаммы, заключается в создании одного изображения Для Macintosh и второ- 
го — для Windows-компьютеров. Однако во многих случаях вам неизвестно, кто 
будет просматривать ваши изображения, и какой операционной системой будут 
пользоваться эти люди. Следовательно, просматривайте свои изображения в таб- 
лице цветов и гамме как операционной системы Macintosh, так и операционной 
системы Windows. Так вы сможете заметить потенциальные проблемы и исправить 
их до публикации изображения на Web-сайте. 
Чтобы просмотреть изображение с использованием таблицы цветов и гаммы 
другой операционной системы, у вас есть две альтернативы. Можно приобрести 
и компьютер Macintosh, и Windows-компьютер и затем открывать и просматри- 
вать свои графические изображения в Web-браузерах на обеих системах. Или же 
более практичный метод — воспользоваться программой редактирования изобра- 
жений, позволяющей увидеть, как выглядят изображения на обеих операцион- 
ных системах. Например, Adobe Photoshop версии 5.5 и выше позволяет про- 
сматривать изображения с использованием таблицы цветов и гаммы Windows 
или Macintosh. Просто откройте изображение в Photoshop, выберите в меню View 
Proof Setup (Вид | Настройка цветопробы), а затем Macintosh RGB или Windows 
RGB, в зависимости от среды, в которой вы работаете (см. рис. 6.7).

294 Глава 6. Графика 
Г* Adobe Photoshop 
Pile .dit Jmage Select Filter yiew Window H' 
Г Jew View 
Zoom |n Ctrl*» 
Zoom Qut C*r1+- 
.И on Screen ' CW+0 
&.tua) Rxels Ait*ari*0 
^intSiie 
Рис. 6.7. С помощью опции "Windows RGB", доступной в пункте меню "Proof Setup" 
("Настройка цветопробы"), можно обнаружить все потенциальные проблемы, 
связанные с различиями между платформами 
Если, работая в Photoshop для Windows, вы выберете "Macintosh RGB", изоб- 
ражение на экране "переместится" в таблицу цветов и гамму монитора Macintosh. 
И, наоборот, при выборе Windows RGB в Photoshop для Macintosh, изображение 
на экране "переместится" в таблицу цветов и гамму монитора Windows. 
Если вы обнаружили, что изображение выглядит неудовлетворительно при 
просмотре под управлением ОС Windows или ОС Macintosh, с помощью про- 
граммы редактирования изображений (такой как Photoshop, ImageReady и т.д.) 
настройте цвета и яркость картинки. Продолжайте вносить изменения до тех 
пор, пока картинка не будет выглядеть приемлемо под управлением обеих ОС. 
Задание размеров изображения в дескрипторе <img> 
В начале этой главы вы узнали, что дескриптор <img> дает Web-браузеру ука- 
зание загрузить и отобразить на Web-странице графический файл. Например, в 
приведенном ниже HTML-коде показан дескриптор <img> с атрибутом src, ко- 
торый дает Web-браузеру указание извлечь и отобразить картинку, сохраненную в 
файле landscape. дрд, с шириной 200 пикселей и высотой 80 пикселей: 
<img sгс="landscape.jpg" width=' 200" height="80" />

Глава 6. Графика 295 
ПРАКТИКУМ 
При добавлении атрибутов width (ширина) и height (высота) в дескриптор 
<img> вы должны понимать, как Web-браузер использует заданные вами атрибу- 
ты. Атрибуты width и height определяют размеры графического элемента на эк- 
ране, которые могут отличаться от фактических высоты и ширины картинки в 
графическом файле. Скажем, фактические размеры картинки в iandscape.jpg 
составляют 200 пикселей на 80 пикселей. Тогда дескриптор изображения из пре- 
дыдущего примера, вставленный в HTML Web-страницы, дает Web-браузеру ука- 
зание отобразить изображение на 100% фактического размера картинки (200x80). 
Однако если вы случайно поменяете местами значения атрибутов, так, что атри- 
бут width будет равен 80, а атрибут height - 200, изображение будет искажено, 
что можно видеть на рис. 6.8. 
Хотя изменение атрибутов width и height может показаться удобным спосо- 
бом приведения размера изображения в соответствие с предназначенной для 
него областью в пределах Web-страницы, не следует применять этот подход при 
работе с фотографиями. Атрибуты width и height должны отражать фактические 
размеры изображения в файле. Если фотография слишком велика для того, что- 
бы поместиться в отведенную ей область на странице, откройте файл исходного 
изображения в программе редактирования изображений, например, Photoshop, и 
измените размер изображения так, чтобы оно поместилось на Web-страницу. 
Когда атрибуты width и height соответствуют фактическим размерам изобра- 
жения в графическом файле, Web-браузеру не приходится тратить время на изме- 
нение размеров изображения. Если же браузеру требуется изменить размеры 
изображения, он добавляет пиксели, чтобы увеличить изображение, и удаляет 
пиксели для его уменьшения. К сожалению, если заставить браузер изменять 
размер изображения, вывод изображения, и, следовательно, всей остальной Web- 
страницы на экран займет больше времени. Более того, программы редактирова- 
ния изображений, такие как Photoshop, изменяют размер изображения "каче- 
ственнее", нежели Web-браузер. Это особенно очевидно при использовании 
атрибутов width и height для увеличения размеров рисунка - изображение ста- 
новится зернистым и расплывчатым. 
Рис. 6.8. Если значения атрибутов width и height поменять местами, 
в окне браузера изображение исказится

296 . Глава 6. Графика 
Следовательно, если вам небезразлично качество изображения, задавайте ат- 
рибуты width и height так, чтобы они отражали фактические размеры изобра- 
жения в файле. 
Основная причина использования атрибутов width и height во всех дескрип- 
торах <img> состоит в том, чтобы дать^браузеру возможность точно позициони- 
ровать текст или иное Web-содержимое вокруг картинки. Если опустить атрибу- 
ты width и height, Web-браузер не сможет точно расположить изображения и 
текст на экране до тех пор, пока не загрузит изображения полностью. В резуль- 
тате произойдет одно из двух: 
• Браузер может загрузить и отобразить текст. Затем, после загрузки графи- 
ческих изображений, браузер перезагрузит страницу и расположит текст и 
изображения на своих местах. 
Браузер не отобразит Web-страницу до тех пор, пока не загрузит все гра- 
фические изображения, имеющиеся на странице. В результате ваши посе- 
тители будут видеть лишь пустой экран, ожидая, пока браузер завершит 
извлечение содержимого графических файлов с Web-сервера. 
Поскольку файлы изображений больше и, следовательно, загружаются мед- 
леннее, чем текст Web-страницы, отсутствие указания размеров изображения в 
каждом из дескрипторов <img> зачастую не позволяет браузеру отобразить на эк- 
ране текст. Помните: вам нужно удержать внимание посетителей, пока браузер 
загрузит и выведет на экран изображения. Если посетителю надоест, например, 
смотреть на пустой экран, он может отправиться куда-нибудь еще. Когда же вы 
задаете атрибуты width и height в дескрипторах <img>, браузер резервирует 
пространство под каждую картинку и продолжает загружать и отображать текст, 
ожидая, пока загрузятся изображения В результате этого посетители смогут ви- 
деть и читать текстовое содержимое, дожидаясь, пока браузер закончит загрузку 
и вывод изображений на Web-страницу. Помогая браузеру быстро загрузить тек- 
сту, вы даете посетителю "что-нибудь почитать", пока браузер загружает графику, 

и время, необходимое для загрузки и отображения изображений, пройдет для 
посетителя несравненно быстрее. 
Работа с атрибутом alt и браузерами, 
не воспроизводящими графику 
Атрибут альтернативного текста (alt) — важное дополнение к дескриптору 
<img>. Атрибут alt дает Web-браузеру указание отобразить строку текста перед 
загрузкой графического изображения. Кроме того, Web-браузер продолжит ото- 
бражать альтернативный текст (заданный атрибутом ait), если по какой-либо 
причине ему не удастся загрузить и отобразить изображение. Например, приве- 
денный ниже HTML-код дает Web-браузеру указание отобразить текст, описыва- 
ющий содержимое картинки, которую должен был бы увидеть посетитель, если 
браузер Не СМОЖет Загрузить ИЛИ ОТОбраЗИТЬ imagel.jpg.

Глава 6. Графика 297 
ПРАКТИКУМ 
Использование атрибута alt в дескрипторе <img> показано в следующем примере: 
<html> 
<headXtitle>IIpHMep альтернативного TeiccTa</titleX/head> 
<body> 
<img src="imagel.jpg" width="100" height="50'> 
alt="#OTO Джеймса Эллиотта, основателя InGen, Inc."> 
</body> 
</html> 
Web-браузер отобразит альтернативный текст (в данном примере "Фото 
Джеймса Эллиотта, основателя InGen, Inc."), еСЛИ В браузере посетителя ОТ- 
ключено воспроизведение графики или если посетитель пользуется текстовым 
(невизуальным) браузером. Хотя большинство путешественников по сети сегодня 
пользуются браузерами, способными воспроизводить графику, альтернативный 
текст дает посетителям с текстовыми браузерами представление о том, что же 
должна "сообщать" картинка. 
Если браузер не сможет извлечь и отобразить картинку, альтернативный текст 
останется на экране в "заполнителе" изображения. 
Если посетитель вашего Web-сайта отключил в своем браузере отображение 
графических отображений, везде, где вы вставили в Web-страницу дескриптор 
<img>, браузер нарисует на экране рамку. Затем браузер отобразит альтернатив- 
ный текст в "заполнителе" изображения (то есть в пустой рамке, где в обычных 
условиях было бы изображение), как показано на рис. 6.9. 
Файл Правка Ёио Избранное. Сервис 
cj^ijij ht(p://html-webdesign/Chaptef06/Figure06-10 hln 
• • " : < 
I i*j Вид не крепость Квчи-Квльон 
Рис. 6.9. Альтернативный текст не помещается на площади, отведенной под 
изображение 
Не забудьте добавить атрибуты height и width, которые указывают размеры 
картинки для каждого дескриптора изображения, вставленного в HTML-код Web- 
страницы. В противном случае Web-браузер не сможет нарисовать рамку надле- 
жащего размера на время загрузки или вместо графического изображения. 
("Заполнитель" изображения соответствующих размеров будет удерживать окру-

298 Глава 6. Графика 
жающий текст так, как предусмотрено дизайном Web-стра- 
ницы — даже если браузер по какой-либо причине не ото- 
бразит само изображение.) 
Альтернативный текст должен быть кратким и "по су- 
ществу". Скажем, вы используете изображение вместо сим- 
вола маркера рядом с каждым пунктом неупорядоченного 
(то есть маркированного) списка. Для отображения на эк- рИ( 
ране графического элемента-маркера (из файла red.gif) 
можно было бы написать следующий дескриптор <img>: 
<img src="red.gif" width="10" height="10" alt="KpacHb»i маркер"> 
Альтернативный текст, "Красный маркер", занимает больше места, чем само 
графическое изображение. Более того, поскольку атрибуты width и height дают 
браузеру указание зарезервировать под маркер область 10x10 пикселей, для ото- 
бражения альтернативного текста не хватает места, что можно видеть на рис. 
6.10. 
Таким образом, при отображении мелких графических изображений или при 
отображении несущественной графики (вроде элементов фона и графических го- 
ризонтальных линий), делайте альтернативный текст кратким или используйте 
атрибут ait с пустой строкой, как в конце следующего дескриптора <img>: 
<img src="red.gif" width="10" height="10" alt=""> 
С помощью атрибута ait (с текстом или без него) программы чтения текста 
для незрячих идентифицируют каждое изображение для посетителя с ослаблен- 
ным зрением. Когда посетитель с ослабленным зрением открывает Web-страницу, 
программа чтения текста, например, Jaws, читает посетителю текст тела доку- 
мента и альтернативный текст в каждом дескрипторе изображения. Альтернатив- 
ный текст для графических изображений, в большом количестве присутствующих 
на странице, например, маркеров, должен ограничиваться одним словом, напри- 
мер, маркер, либо оставляться пустым. Когда программа чтения текста обнаружи- 
вает атрибут ait с пустой строкой, она игнорирует изображение и продолжает 
читать текст тела документа, отображенный в окне Web-браузера. 
Консорциум W3C считает использование alt настолько важным, что комитет 
стандартизации сделал его обязательным элементом надлежащим образом сфор- 
мированного дескриптора <img>. Следовательно, пренебрежение атрибутом alt 
во всех дескрипторах <img> не только считается признаком неряшливого коди- 
рования, но и, в соответствии со стандартом W3C, делает ваши дескрипторы 
<img> неправильно сформированными. 
Иногда, как вы видели на предыдущей иллюстрации, "заполнитель" изобра- 
жения слишком мал, чтобы вы могли описать изображение строкой альтернатив- 
ного текста (присвоенной атрибуту alt). Если вам нужно больше места, напри- 
мер, для описания карты, графика или другого сложного изображения, 
воспользуйтесь атрибутом longdesc (длинное описание) в дополнение к атрибу- 
ту alt. Значение атрибута longdesc отправляет пользователя к отдельному 
HTML-файлу, содержащему полное описание изображения. Скажем, вы создаете

Глава 6. Графика 299 
схему организационной структуры предприятия и вставляете схему (из файла 
business.gif) на страницу с помощью следующего дескриптора <img>: 
<img src="business.gif" alt="CxeMa организационной структуры 
предприятия" longdesc="chart.html"> 
HTML-документ (chart.html), указанный в атрибуте longdesc, содержит 
подробное описание (в формате простого текста) всех данных на рисунке 
business.gif. Когда посетители вашего Web-сайта наводят курсор мыши на гра- 
фический элемент, содержащий атрибут longdesc, Web-браузер открывает окно с 
информацией из HTML-файла (в данном примере chart.html). Документ 
chart.html содержит только текст. 
К сожалению, многие Web-браузеры все еще не поддерживают атрибут 
longdesc. Поэтому неплохо бы добавлять на страницы отдельные гиперссылки 
на файлы с текстовыми описаниями (помимо добавления атрибута longdesc в 
деСКриПТО'ры <img>). 
Создание всплывающей подсказки с помощью 
атрибута title в дескрипторе <img> 
С помощью атрибута t i t l e в дескрипторе <img> вы можете описать (словес- 
но) графическое изображение своим посетителям в виде всплывающей подсказ- 
ки. В спецификациях HTML 4.0 сказано, что использование атрибута t i t l e в 
качестве всплывающей подсказки является целесообразным. 
ПРАКТИКУМ 
Чтобы создать подсказку, вставьте атрибут t i t l e в дескриптор изображения 
сле- 
дующим образом: 
<img src="Crimea.jpg" width="200" height="80" 
alt="rcpHb»i Крым" tit1е="Приезжайте в Крыми> 
Когда посетитель на несколько секунд задерживает курсор мыши над изобра- 
жением, браузер отображает текст, присвоенный атрибуту t i t l e , в виде 
всплыва- 
ющей подсказки рядом с курсором мыши. На рис. 6.11 показано, как Internet 
Explorer отображает изображение и описание, заданные в приведенном выше 
дескрипторе <img>. 
Поскольку текст всплывающей подсказки остается на экране только в течение 
нескольких секунд, текст должен быть коротким — иначе посетители вашей стра- 
ницы не успеют его полностью прочесть до того, как он исчезнет. Более того, 
некоторые Web-браузеры некорректно обращаются с длинными строками текста. 
Некоторые браузеры не переносят длинный текст на следующую строку. В других 
браузерах существует максимальная длина всплывающей подсказки, и они уреза- 
ют текст так, чтобы он поместился в поле подсказки. В отличие от атрибута 
alt, атрибут t i t l e — сравнительно новый, и многие Web-браузеры его еще не 
поддерживают. К счастью, атрибут t i t l e работает в Internet Explorer версии 
4 и 
выше, а также полностью поддерживается Netscape Navigator версии 6 и выше.

300 Глава 6. Графика 
Рис. 6.11. Атрибут title отображает текст описания в формате всплывающей 
подсказки в 
Windows и в виде "воздушного шарика"на Macintosh 
Не путайте атрибут t i t l e с начальным и конечным дескрипторами названия 
( < t i t i e x / t i t i e > ) . Атрибут t i t l e определяет текст как 
всплывающую подсказ- 
ку, тогда как начальный и конечный дескрипторы названия вставляются в заго- 
ловочную часть HTML-документа для задания текста, который браузер должен 
отобразить в строке заголовка окна браузера. Например, на рис. 6.12 показаны 
результаты отображения следующего HTML-кода, содержащего и дескриптор 
<titie>, и дескриптор <img> с атрибутом t i t l e в окне браузера: 
<html> 
<head> 
<title>Ha3BaHne Web-CTpaH*njbi</title> 
</head> 
<body> 
<center> 
<img src="Crimea.jpg" 
width="2 00" 
height="80" 
alt="Горный КРЫМ" 
title="Приезжайте в Крым"> 
</center> 
</body> 
</html>

Глава 6. Графика 301 
5oft Internet Expion 
файл Правка Вид Избранное Cgpetic .пр 
] http//hIml-webdesign/Chepter06/Figuie06-H htm 
|Приезжайте в Крым!] 
Рис. 6.12. Web-страница с названием в строке заголовка и всплывающей 
подсказкой, полученной с помощью атрибута title 
Сжатие фотографий в JPEG-файл 
Члены Объединенной группы экспертов в области фотографии (Joint 
Photographic Experts Group) создали формат JPEG (произносится "джей-пег") для 
решения специфических проблем, связанных с отображением изображений в 
Internet. При пересылке фотографических изображений по Internet основная про- 
блема состоит в больших размерах файла каждой фотографии. Размеры несжатых 
графических файлов обычно превышают 1 Мб. 'Поэтому Web-браузерам, подклю- 
ченным к Internet через модем 28.8 Кбод, потребовалось бы несколько минут на 
то, чтобы загрузить и отобразить одну-единственную картинку. Как видите, из- 
влечение страниц, содержащих изображения с большими размерами файлов, 
могло становиться очень и очень проблематичным. 
Формат JPEG разрешает эту проблему, существенно снижая размеры файлов 
фотоизображений. Уменьшение размеров файла достигается путем выборочного 
удаления цветов из изображения и заменой недостающей цветовой информации 
смешиванием оставшихся цветов по шаблону растрирования {ditherpattern). Шаб- 
лон растрирования использует два или более из оставшихся цветов графического 
изображения для получения третьего цвета. Процесс растрирования позволяет 
программе, сохраняющей изображение, сохранить три цвета, используя два пик- 
селя вместо трех, что уменьшает размер файла изображения. Благодаря сокраще- 
нию количества пикселей файлы, сохраненные с использованием формата JPEG, 
имеют намного меньшие размеры. Собственно говоря, размеры файлов JPEG- 
изображений обычно составляют Vioo размера исходного файла.

302 Глава 6. Графика 
Использование сокращения цветности для сохранения файла в формате JPEG 
называется сжатием с потерями (lossy compression), что подразумевает сжатие с 
потерей информации. Помните: при применении схемы сжатия JPEG к фото- 
изображению удаленную информацию восстановить нельзя. Следовательно, все- 
гда нужно делать копию исходного изображения и сохранять копию с новым 
именем файла в формате JPEG. Так у вас будет исходное изображение со всей 
цветовой информацией для использования в будущем и сжатый файл (значи- 
тельно меньшего размера) для ваших Web-страниц. 
Поскольку формат JPEG удаляет пиксели из исходного изображения, схема 
сжатия снижает визуальное качество изображения. Дизайнеры считают потерю 
качества картинки неизбежной реалией Internet и пытаются компенсировать по- 
терю качества скоростью загрузки. Изображение на рис. 6.13 было сохранено с 
30-процентной степенью сжатия (о степенях сжатия будет рассказано подробнее 
в подразделе "Преобразование графики в Web-изображения с помощью программ 
редактирования изображений" далее в этой главе). 
Поскольку формат JPEG удаляет цвета из исходного изображения, следуя оп- 
ределенному набору инструкций, нельзя создать JPEG-изображение с использо- 
ванием Web-безопасной палитры (Web-safe palette). Кроме того, изображения, со- 
храненные в формате JPEG, должны использовать цветовое пространство RGB 
(красный, зеленый, синий), но не шкалы серого (оттенки серого) или CMYK 
(голубой (Cyan), пурпурный (Magenta), желтый (Yellow), черный (blacK)). И, на- 
конец, формат JPEG дает возможность сохранять изображение с использованием 
прогрессивного или непрогрессивного режима. 
Изображение в формате JPEG 
Рис. 6.13. Формат JPEG снижает размер файла и качество изображения

Глава 6. Графика 303 
Прогрессивный режим (progressive mode) загружает файл за три прохода. Этим 
создается видимость расплывчатого изображения, которое медленно становится 
четче по мере загрузки информации. Непрогрессивныйрежим (nonprogressive mode) 
загружает изображение за один проход, сверху донизу. Преимущество прогрес- 
сивного режима заключается не в более быстрой загрузке изображения в итоге, а 
в том, что так у посетителя есть хоть какое-то развлечение вместо того, чтобы 
наблюдать за медленной загрузкой изображения сверху донизу, что можно видеть 
нарис. 6.14. 
Рис. 6.14. ПрогрессивныйметодзагрузкиJPEG-файлапомогаетразвлечь 
посетителя в процессе загрузки изображения

304 Глава 6. Графика 
ПРАКТИКУМ 
Перед тем, как сохранять фотоизображения в формате JPEG, ознакомьтесь с при- 
веденными ниже советами, как сделать размер файла еще меньше: 
• Мягкие полутона (soft tonal qualities). JPEG-изображения сжимаются до 
меньших размеров, когда они содержат мягкие переходы цветов. Повыше- 
ние четкости изображения (sharpening) оказывает обратное действие при 
сжатии изображения с помощью формата JPEG. 
• Дополнительное размывание (additional blurring). Хотя размывание — не луч- 
ший способ при работе с фотоизображениями, применение мягкого раз- 
мывания на фоновых участках перед сохранением файла в формате JPEG 
уменьшает размер файла. 
• Снижение насыщенности (decreased saturation). Хотя и не всегда эффектив- 
ное, снижение насыщенности, или интенсивности, цветов в фотоизображе- 
нии может уменьшить размер файла. 
• Снижение контрастности изображения (reduced image contrast). Снижение 
контрастности изображения (подобно размыванию) обычно уменьшает раз- 
мер файла. 
• Взвешенная оптимизация (weighted optimization). Если у вас есть Photoshop 
6.0, вы можете воспользоваться взвешенной оптимизацией для управления 
сжатием изображения. Взвешенная оптимизация позволяет использовать 
8-битовые альфа-каналы для установки попиксельной оптимизации изоб- 
ражения и плавно изменять установки сжатия на всем графическом изоб- 
ражении. Взвешенная оптимизация позволяет достичь более высокой сте- 
пени сжатия в таких областях изображения, как голубое небо, и меньшего 
сжатия в содержащих мелкие детали областях этого же изображения. 
При публикации фотографий на Web-странице необходимо сохранять равно- 
весие между качеством изображения и временем ожидания, необходимым для 
загрузки изображений с высоким разрешением. Формат JPEG помогает поддер- 
живать такое равновесие. 
Сохранена атликаций и текста в файл формата GIF 
Формат GIF (Graphics Interchange Format — формат графического обмена), как 
уже упоминалось, представляет собой еще один формат, который можно исполь- 
зовать для сжатия графических файлов, предназначенных для публикации в 
Internet. Формат GIF наиболее эффективен при работе с аппликациями, логоти- 
пами и изображениями, содержащими много резких границ и мало цветов, — 
прямой противоположностью тем типам изображений, для которых наилучшее 
сжатие обеспечивает формат JPEG. 
При сохранении цветного графического изображения с помощью формата 
GIF процесс сжатия снижает число битов, разрешенное для описания цвета в 
каждом пикселе в файле, с 24 бит до 8 бит. Следовательно, GIF-сжатие умень- 
шает максимальное количество цветов в файле с 16.7 млн. до 256. (Существует

Глава 6. Графика 305 
только 256 комбинаций для каждого из 8 битов информации, имеющихся для 
описания цвета каждого пикселя в GIF-файле.) Если исходное цветное изобра- 
жение содержит более 256 цветов, формат GIF сохраняет представительную вы- 
борку основных цветовых областей в таблице цветов исходного изображения и 
использует эту выборку для создания GIF-изображения. Поскольку фотографии 
обычно содержат тысячи, если не миллионы цветов, визуальный результат по- 
пытки сохранить фотографию в GIF-файле будет неудовлетворительным (см. рис. 
6.15), равно как и приведет к созданию изображения с огромным размером файла. 
Формат GIF делает файлы изображений меньше как за счет уменьшения чис- 
ла битов для описания каждого цвета в файле, так и за счет сжатия оставшихся 
битов с помощью схемы RLE. RLE — это схема сжатия, наиболее пригодная для 
сжатия больших участков сплошного цвета. Формат GIF идентифицирует боль- 
шие блоки сплошного цвета и фиксирует местоположение этих участков. При 
сохранении файла блоки сплошного цвета удаляются из изображения и заменя- 
ются координатами, или местоположением, исходного цвета. Загружая файл, 
Web-браузер восстанавливает блоки сплошного цвета с помощью ранее зафикси- 
рованных координат. Поскольку аппликации, логотипы и текст содержат боль- 
шие области одного и того же цвета, формат GIF идеально подходит для сжатия 
файлов упомянутых Wnoe изображений. 
Изображения, сохраненные в формате GIF, используют цветовое пространство 
RGB (красный, зеленый, синий) с 256 или меньше цветами, но не CMYK. Кро- 
ме того, GIF дает возможность сохранять изображение с использованием черес- 
строчного или нечересстрочного режима. 
Исходное изображение 
Изображение в формате GIF I 
Рис. 6.15. Формат GIF, будучи применен к фотографии, придает блочный или 
ступенчатый вид 
областям изображения с плавными переходами цветов

306 Глава 6. Графика 
Чересстрочный режим (interlaced mode) загружает файл за три отдельных про- 
хода. Этим создается видимость расплывчатого изображения, которое медленно 
становится четче по мере загрузки информации. Нечересстрочный режим 
(noninterlaced mode) загружает изображение за один проход, сверху донизу. Пре- 
имущество чересстрочного режима заключается не в более быстрой загрузке 
изображения в итоге, а в том, что так у посетителя появляется хоть какое-то 
раз- 
влечение вместо того, чтобы наблюдать за медленной загрузкой изображения 
сверху донизу (см. рис. 6.16). 
Первый проход Второй проход Третий проход 
Рис. 6.16. Чересстрочный метод загрузки GIF-файла помогает развлечь посетителя 
в процессе 
загрузки изображения 
ШШ ПРАКТИКУМ 
Ниже приведены некоторые хитрости и соображения, с помощью которых можно 
получить файл наименьшего возможного размера при сохранении графики в фор- 
мате GIF: 
• Участки сплошного цвета (solid areas of color). GIF-изображения сжимаются 
до меньших размеров, когда изображение содержит большие сплошные 
участки цвета; участки GIF-изображения, содержащие переходы цветов, 
сжимаются хуже. 
• Количество цветов (number of colors). Использование меньшего количества 
цветов дает файл меньшего размера. Количество цветов в изображении оп- 
ределяет размер GIF-изображения. GIF-изображение, содержащее четыре 
цвета, будет сжато до размера, значительно меньшего, нежели GIF-изобра- 
жение, содержащее 20 цветов. Чем меньше цветов, тем меньше размер 
файла и тем быстрее файл загружается. 
• Уменьшение растрирования (reduced dithering). Растрирование — это процесс, 
в ходе которого компьютер использует два цвета для получения третьего. 
Растрирование приводит к созданию файла с большим количеством цветов 
и усложняет для формата GIF сжатие изображения.

Глава 6. Графика 307 
Создание видимости быстрой загрузки рисунков 
Причина использования прогрессивного или чересстрочного режима заключа- 
ется не в сокращении времени, требуемого для загрузки Web-изображения. Ос- 
новной целью здесь является возможность предоставить посетителям вашего 
Web-сайта что-то, на что они могли бы смотреть, ожидая, пока браузер завершит 
загрузку графических изображений. 
С помощью прогрессивного или чересстрочного режима вы даете Web-браузе- 
ру инструкции по загрузке графического файла. При отсутствии обоих этих ре- 
жимов Web-браузер загружает файл сверху донизу. Следовательно, для посетите- 
лей сайта изображения появляются на экране по одной строке развертки (то 
есть, по одному горизонтальному ряду пикселей) за раз. 
При использовании прогрессивного или чересстрочного режима в JPEG- или 
GIF-файле Web-браузер загружает изображение в три прохода. (Некоторые про- 
граммы позволяют выбрать число проходов.) При первом проходе браузер загру- 
жает каждую третью строку развертки, затем следующую треть строк, и завершает 
изображение загрузкой последней трети строк развертки. 
Скажем, например, из-за больших размеров файлов графики на вашем Web- 
сайте изображения загружаются слишком медленно. Если вы не сохранили фай- 
лы с использованием прогрессивного или чересстрочного режима, посетитель ви- 
дит, как на экране появляется рамка и изображение медленно "закрашивает" 
собой рамку сверху донизу. Посетитель понятия не имеет, что представляет со- 
бой изображение, до тех пор, пока браузер не завершит его загрузку. В результа- 

те этого посетителю может стать скучно, и он либо остановит загрузку графики 
браузером, либо, что еще хуже, отправится на другой Web-сайт. 
При использовании прогрессивного или чересстрочного режима браузер быст- 
ро загружает треть изображения. Хотя изображение получается расплывчатым, 
посетители могут получить общее представление о содержимом картинки. Те- 
перь, если они остановят загрузку графики на Web-странице, по крайней мере, 
они будут видеть расплывчатое представление картинки вместо ее половины. 
(Конечно, вы надеетесь, что увиденное полностью, хотя и расплывчатое, изобра- 
жение на Web-странице заинтересует ваших посетителей в достаточной степени, 
чтобы они дождались завершения загрузки картинок.) 
ПРАКТИКУМ 
Чтобы использовать прогрессивный или чересстрочный режимы, нужно открыть 
графический файл в программе редактирования изображений и сохранить его с 
использованием опции Progressive (Прогрессивная развертка) для файлов, сохра- 
няемых в формате JPEG, и опции Interlaced (Чересстрочная развертка) для файлов, 

сохраняемых в формате GIF. Например, если вы работаете с Adobe Photoshop, от- 
кройте изображение в Photoshop и выберите в меню File | Save for Web (Файл | 
Со- 
хранить для Web). Затем отметьте флажок Progressive (Прогрессивная развертка) 
для JPEG-файлов или Interlaced* (Чересстрочная развертка) для GIF-файлов, как 
показано на рис. 6.17.

308 Глава 6. Графика 
Отметьте флажок "Progressive" ("Профессивная развертка") 
— Alph»: *- Hex: ШВ 
Рис. 6.17. Диалоговое окно "Savefor Web"в Photoshop позволяет выбрать 
прогрессивный (JPEG) или 
чересстрочный (GIF) режим при сохранении файла 
Помните, при создании Web-страницы дело вовсе не в кнопках и не в 
HTML-коде. Более того, большинство посетителей вашего Web-сайта никогда не 
будут смотреть на ваш HTML-код. Самое главное, о чем стоит задумываться на 
фазе проектирования, - это как развлечь и проинформировать посетителя. Ис- 
пользование прогрессивного и чересстрочного режима поможет удержать посети- 
телей там, где это необходимо. 
•1Ы41и1-ы.1|Ш-1 Сохраняя картинку как JF'EG- или GIF-файл с помощью программы 
редакти- 
рования изображений, вы можете использовать прогрессивную развертку для формата 
JPEG 
и чересстрочную развертку для формата GIF. Следует понимать, что прогрессивная 
и черес- 
строчная развертки не являются функциями HTML-кода. Напротив, они представляют 
собой 
опции, выбираемые при сохранении графического файла. 
Ra6ora с форматами файлов PNG-8 и PNG-24 
Формат PNG (Portable Network Graphic — переносимая сетевая графика) — 
последнее пополнение в списке форматов файлов изображений. Форматы PNG-8 
и PNG-24 представляют собой два новейших и наиболее универсальных из фор- 
матов, используемых для сжатия графических файлов для Internet. Третий формат 
PNG, PNG-32, дает большую степень контроля над цветом изображения; однако 
наиболее распространенными из форматов PNG являются PNG-8 и PNG-24. 
Для применения в среде Web у PNG фактически свойственны три преимуще- 
ства по сравнению с GIF: 
• Альфа-каналы (alpha channels). Переменная прозрачность.

Глава 6. Графика 309 
• Коррекция гаммы (gammacorrection). Межплатформенное управление ярко- 
стью изображения. 
• Двумерная чересстрочная развертка (two-dimensional interlacing). Метод про- 
грессивного отображения. 
Кроме того, практически во всех случаях PNG сжимает лучше, недели GIF, 
однако различие, как правило, составляет не более 5-25 процентов, — не такой 
уж существенный фактор для того, чтобы Web-дизайнеры переключились с GIF 
на PNG на одном лишь этом основании. 
Выполняя сжатие аналогично формату GIF, формат PNG-8 уменьшает коли- 
чество цветов в исходном изображении до 256. Кроме того, формат PNG-8 ис- 
пользует для уменьшения размера файла RLE-сжатие (как было описано в под- 
разделе "Сохранение аппликаций и текста в файл формата GIF" ранее в этой 
главе). В противоположность ему, формат PNG-24 способен сохранять фотоизоб- 
ражения таким же образом, как и формат JPEG, за одним исключением: формат 
PNG-24 не уменьшает размер файла за счет удаления цветов из изображения. 
Следовательно, он представляет собой метод сжатия файлов без потерь. 
ПРАКТИКУМ 
С помощью формата PNG-8 можно уменьшить размер файла аппликации, логоти- 
па и текста за счет сжатия больших сплошных участков цвета. Как и формат GIF, 
формат PNG использует технику сжатия без потерь. (Помните, что формат JPEG 
производит сжатие с потерями путем удаления некоторой части цветовой инфор- 
мации исходного файла.) Сжатие без потерь означает, что формат PNG-24 умень- 
шает размер файла картинки без потери исходных цветовых данных. Кроме того, 
форматы PNG-8 и PNG-24 используют RLE-сжатие (как и формат GIF) для 
уменьшения размера файла без снижения качества изображения (см. рис. 6.18). 
Исходное изображение (233 Кбайт) 
Изображение в формате PNG (166 Кбайт) 
Рис. 6.18. Формат PNG уменьшает размер файла, не жертвуя при этом качеством 
изображения

310 Глава 6. Графика 
Хотя PNG — отличный файловый формат, с ним связаны две существенных 
проблемы. Во-первых, поскольку формат PNG-24 не удаляет цветовую информа- 
цию из файла, он не может сжимать графические файлы до размеров столь же 
небольших, как и формат JPEG. (Помните, вы пытаетесь уменьшить размер фай- 
ла изображения настолько, насколько это возможно, не слишком много теряя в 
качестве изображения, поскольку Web-браузеры загружают и отображают файлы 
меньших размеров быстрее, чем большие файлы.) Следовательно, на сегодняш- 
ний день JPEG — именно тот формат, который следует использовать при сохра- 
нении графических изображений для использования на Web-страницах. 
Вторая, и, пожалуй, наиболее важная проблема состоит в том, что PNG-8 и 
PNG-24 только недавно получили полную поддержку в наиболее популярных бра- 
узерах — Netscape Navigator 6 и Internet Explorer 5. Хотя более ранние версии 
Explorer и Navigator поддерживали формат PNG, эта поддержка ограничивалась 
отображением графики в формате PNG. Поддержка же переменной прозрачнос- 
ти и двумерной чересстрочной развертки была эпизодической. На момент напи- 
сания этой книги некоторые опросы предполагают, что до 20 процентов посети- 
телей Web не располагают последними версиями Navigator и Explorer, и, 
следовательно, неспособны просматривать изображения в формате PNG. Имейте 
это в виду, работая с форматом PNG. 
Преобразование графики в Web-изображения с 
помощью программ редактирования изображений 
Чтобы сохранять изображения для последующего использования в Internet, вы 
должны пользоваться одним из трех форматов: JPEG, GIF или PNG. По правде 
говоря, форматы файлов Web-изображений на самом деле представляют собой 
схемы сжатия, разработанные для уменьшения размера файла графического изоб- 
ражения. Размер файла — немаловажное соображение при сохранении графичес- 
ких файлов, поскольку чем больше размер файла, тем дольше Web-браузер загру- 
жает и отображает графическое изображение, а посетители вашего сайта ждать не 
любят. 
Следует понимать, что сжатие файла - не функция HTML-кода. Когда вы да- 
ете Web-браузеру указание загрузить и отобразить графический файл с помощью 
дескриптора <img> — вроде того, который показан ниже — дескриптор <img> не 
определяет формат сжатия файла: 
<img src="photo.jpg" width="60" height="150" /> 
В данном примере программа редактирования изображений сжала графичес- 
кое изображение с использованием формата JPEG и затем сохранила сжатую 
картинку в файле с именем photo.jpg. Атрибут src в дескрипторе <img> 
(src=Mphoto.jpg") не делает файл JPEG-сжатым изображением, а всего лишь 
идентифицирует графический файл, ранее сохраненный в формате JPEG.

Глава 6. Графика 
ПРАКТИКУМ 
Чтобы сохранять файлы в форматах JPEG, GIF или же PNG, вам понадобится 
программа редактирования изображений. Из коммерческих программ редактиро- 
вания изображений, имеющихся на рынке, наиболее популярными являются 
две — Adobe Photoshop и Macromedia Fireworks. Помимо коммерческих про- 
грамм, немало программ редактирования изображений можно найти в Internet. 
На таких сайтах, как http://www.shareware.com И http://tucows.com, ВЫ СМО- 
жете найти и выгрузить множество приложений для редактирования изображе- 
ний (причем как условно-бесплатных, так и полностью бесплатных). 
Скажем, у вас есть графическое изображение в цветовом пространстве RGB, и 
вы хотите использовать это изображение на Web-странице, но размер файла 
слишком велик (более 1 Мб). Если вы располагаете программой Photoshop, вы 
можете открыть изображение и выбрать в меню File | Save for Web (Файл | Сохра- 
нить для Web). Photoshop, в свою очередь, выведет на экран диалоговое окно 
Save for Web (Сохранить для Web). 
Все программы редактирования изображений, позволяющие сохранять файлы 
в формате JPEG, позволяют управлять качеством изображения. Качество опреде- 
ляется значением от 0 до 100 процентов (или от 1 до 10). Если вы отметили 100 
процентов, программа редактирования изображений попытается уменьшить раз- 
мер файла изображения, в то же время удаляя минимально возможное количе- 
ство цветовой информации. Понижение процента качества изображения (до зна- 
чения 0) дает программе редактирования изображений указание удалять больше 
и больше цветов для получения меньшего и меньшего файла графического изоб- 
ражения. На рис. 6.19 показано различие между JPEG-изображениями, сохра- 
ненными со значениями качества 100, 60 и 20 процентов. 
Короче говоря, чем ниже выбранный вами процент качества, тем меньше раз- 
мер файла и хуже визуальное качество изображения при отображении его в Web- 
браузере. Вам надлежит соблюдать равновесие между качеством и размером фай- 
ла. В среднем наилучшее соотношение качества и размера для фотоизображений 
достигается при значении качества около 30 процентов. Однако оптимальный 
процент качества зависит от изображения. Всегда старайтесь уменьшить процент 
качества до его минимального значения, не теряя при этом слишком много в ка- 
честве исходного изображения. 
Создание Web-совместимых графических 
изображений на сканере 
В этой главе рассматривается создание и работа с графическими изображени- 
ями, а также подготовка их к публикации на Web-страницах. Однако для подго- 
товки Web-изображений их нужно сначала загрузить в свой компьютер. Одна из 
чаще всего игнорируемых тем в Web-дизайне — это сканирование изображений, 
которые вам хотелось бы использовать на своих Web-страницах. 
Сканер берет фотографию и разделяет изображение на маленькие фрагменты, 
называемые выборками. Число выборок (или пикселей) на линейный дюйм, со-

312 Глава 6. Графика 
Правке .(ид Избранное Сервис ..пра&ка 
Лучшее: сжатие с 100% 
качеством 
Рис. 6.19. Значение качества изображения, сжатого по схеме JPEG, 
определяет визуальное качество изображения 
храняемых сканером, становится разрешением отсканированного изображения. 
Каждый из этих пикселей представляет собой фрагмент (то есть точку) цвета на 
изображении. Следовательно, если вы оптически сканируете изображение с бо- 
лее высоким разрешением, изображение содержит больше пикселей и, следова- 
тельно, больше информации. Проблема состоит в том, что чем выше разрешение 
сканирования, тем больше размер файла. Изображение в пространстве RGB раз- 
мером 5x5, отсканированное с оптическим разрешением 72 spi (samples per inch 
— выборок на дюйм) дает файл размером 380 Кб (число пикселей в сохраненном 
изображении определяет размер файла изображения). Если вы отсканируете эту 
же картинку с оптическим разрешением 300 spi, вы получите изображение с 
большим числом точек (пикселей) и размером файла 6.4 Мб. Проблема в том, 
что хотя картинка выглядит более четкой (благодаря более высокому разреше- 
нию), при 6.4 миллионах байтов файл изображения будет слишком долго загру- 
жаться, если поместить такую картинку на Web-страницу. 
Комитет W3C устанавливает среднее разрешение Web-графики равным 72 ppi 
(72 пикселя на линейный дюйм), что равно числу пикселей в линейном дюйме 
на среднем компьютерном мониторе. Однако это вовсе не означает, что вы дол- 
жны сканировать все изображения, предназначенные для публикации на Web- 
страницах, с разрешением 72 spi. 
ПРАКТИКУМ 
Если изображение, которое вы хотите опубликовать на Web-странице, находится в 
отличном состоянии и имеет именно ту ширину и высоту, которые вам нужны, от- 
сканируйте изображение с разрешением 72 spi и сохраните изображение в файле с 
использованием формата JPEG либо GIF. К сожалению, некоторые из картинок,

Глава 6. Графика 313 
которые вы хотели бы использовать, будут далеко не в отличном состоянии, а их 
размеры могут не совпадать с нужными вам. Если вам попадется изображение, 
требующее восстановления или работы с цветом или если вам нужно изменить ис- 
ходные ширину и высоту фотографии, отсканируйте изображение с более высоким 
оптическим разрешением, а перед сохранением изображения уменьшите разреше- 
ние до 72 spi. 
При сканировании фотографии с более высоким разрешением, у программы 
редактирования изображений, такой как Adobe Photoshop, есть больше информа- 
ции (больше пикселей) для коррекции проблем, связанных с изображением 
(пыли, царапины, участки обесцвечивания). При увеличении размеров отскани- 
рованного изображения вы вынуждаете программу редактирования изображений 
вставлять дополнительные пиксели и окрашивать новые пиксели исходя из сред- 
него значений цветов окружающих пикселей. 
Поскольку в изображениях, отсканированных с более низкими разрешения- 
ми, пикселей немного, при увеличении размеров изображение быстро станет 
расплывчатым. И наоборот, если вы отсканируете фотографию с большим разре- 
шением, файл будет содержать больше информации (пикселей). Следовательно, 
при увеличении размеров изображение будет казаться четче. 
Закончив редактировать изображение, вы можете уменьшить размер графичес- 
кого файла путем сохранения файла со стандартным разрешением W3C — 72 ppi. 
Кроме того, сохраните изображение с использованием файлового формата JPEG 
либо GIF, чтобы сжать данные и уменьшить размер файла. Например, чтобы из- 
менить разрешение графического изображения, выберите в меню Image | Image 
Size (Изображение | Размер изображения), измените разрешение на 72 и щелк- 
ните на кнопке ОК. Окно Image Size показано на рис. 6.20. 
T Пользуйтесь термином spi (samples per inch - выборок на дюйм), говоря о 
разрешении картинки при сканировании изображения. Используйте термин ppi 
(pixels per 
inch - пикселей на дюйм), говоря о разрешении изображения после изменения 
разрешения 
картинки и сохранения файла с помощью программы редактирования изображений. 
• Imaqe Size 
: Pixel Dimensions: 2,4M 
Width: 
Height; 
780 
1071 
Print Stre; 
Wpi; 
HeiQht: 
27.52 
37.78 
Resolution: J72 
P Constrain Proportions 
pixels 
pixels 
cm 
cm 
pixels /inci 
W Resarnple (пзде: | Bicubic .d 
• XI 
Cancel j 
&uto... | 
Рис. 6.20. Диалоговое окно "Image Size"в Photoshop позволяет 
изменить разрешение отсканированного изображения

314 Глава 6. Графика 
Создание цветных горизонтальных линии 
Графика, отображаемая на Web-страницах, выполняет множество функций: 
привлекает внимание посетителей, создает для посетителей визуальную картин- 
ку, поддерживает текст на Web-странице. Однако помимо использования изобра- 
жений для передачи информации, графику можно использовать также для орга- 
низации содержимого на Web-странице. 
Например, можно создать горизонтальные линии, чтобы организовать текст в 
группы изображений на Web-странице, за счет вставки дескрипторов горизон- 
тальной линии (<hr>), как показано в следующем HTML-коде: 
<html> 
<head> 
<title>npHMep с горизонтальными линиями</Ъ±-Ь1е> 
</head> 
<body> 
<р>Эта строка текста отделена от следующей строки горизонтальной линией</р> 
<hr> 
<р>Эта строка текста отделена от текста вверху горизонтальной линией</р> 
</body> 
</html> 
В данном примере дескриптор <hr> создает видимый разрыв между двумя 
строками текста, как показано на рис. 6.21. 
г iii'iiiti
Орвека Оид 
J J$ 
Сервис ^правке 
м J -> 
j http //html-webdesign/ChepterO6/FiqureQ6-21 .htrr 
Эта строка текста отделена от следующей строки горизонтальной линией 
Эта строка текста отделена от текста вверху горизонтальной линией 
J 
Рис. 6.21. Горизонтальная линия разделяет и организует области Web-страницы 
Однако хотя с помощью этих дескрипторов можно разбивать Web-страницы 
на разделы, горизонтальным линиям не хватает "настроения". Чтобы добавить 
изюминку в свои Web-страницы, замените функциональные (хотя и скучные) 
стандартные линейки цветной графикой. 
ПРАКТИКУМ 
Предположим, например, с помощью программы редактирования и создания 
изображений наподобие Photoshop вы создали графический элемент — горизон- 
тальную линию шириной 600 пикселей и высотой 5 пикселей. Сохранив графи- 
ческое изображение в виде маленького GIF-файла (iine.gif) размером всего 
лишь около 645 байт, вы можете использовать изображение горизонтальной ли- 
нии вместо горизонтальных линий в предыдущем коде следующим образом:

Глава 6. Графика 315 
<html> 
<head> 
<title>IlpHMep с горизонтальными линиями</-ЫЪ1е> 
</head> 
<body> 
<р>Эта строка текста отделена от следующей строки горизонтальной линией</р> 
<р align="center"> 
<img src="line.gif" width="600" height»"5"> 
<р>Эта строка текста отделена от текста вверху горизонтальной линией</р> 
</body> 
</html> 
В данном примере начальный и конечный дескрипторы абзаца (<р aiign= 
11 centerпх/р>) центрируют графический файл iine.gif в окне браузера и по- 
мещают цветную горизонтальную линию между двумя строками текста, как пока- 
зано на рис. 6.22. 
пиниями * Microsoft Internet Explorer 
* д>айп Правка Цид Избранное Сервис .прааке 
: Адрес j e ] http//htmKrebdesign/ChapterO6/FigijreO6-2; him 
Эта строка текста отделена от следующей строки горизонтальной линией 
Эта строка текста отделена от текста вверху горизонтальной линией 
J 
Рис. 6.22. Графическое изображение line.gif отделяет две строки текста друг от 
друга 
Внешний вид графических изображений, которые можно использовать в ка- 
честве горизонтальных линий, ограничивается только вашим воображением. Поэтому 
укра- 
шайте свои Web-страницы с помощью цветной графики, которая не только 
организовывает 
материал на Web-странице, но и привлекательно выглядит и к тому же бросается в 
глаза. 
Извлечение быстро загружающегося изображения- 
"наживки" с помощью атрибута lowsrc 
Время, требуемое на загрузку и отображение изображения, включенного в 
Web-страницу, зависит от размера файла картинки и скорости подключения к 
Internet посетителя. Изображениям с большими размерами файлов на загрузку и 
отображение необходимо больше времени, чем маленьким графическим файлам. 
В идеале вам хотелось бы использовать красивые изображения, которые Web-бра- 
узер может быстро загрузить и отобразить. К сожалению, некоторые из изобра- 
жений, которые вы хотели бы использовать, далеко не маленькие и загружаются 
вовсе не быстро. 
Скажем, вы хотите вывести на экран некий пейзаж. Для визуального воздей- 
ствия и качества картинки вам нужно использовать большое изображение - ши- 
риной 600 пикселей и высотой 300 пикселей. Прочитав практикумы в этой гла- 
ве, вы решаете сохранить изображение в файл, воспользовавшись форматом

316 Глава 6. Графика 
JPEG, чтобы сделать размер файла фотографии как можно меньше. Однако, со- 
хранив изображение, вы обнаруживаете, что размер файла изображения все равно 
составляет более 200 Кб. Таким образом, посетителям вашего сайта, подключен- 
ным к Internet на скорости 28.8 Кбод, придется ждать более 30 секунд, чтобы их 
Web-браузеры загрузили и отобразили пейзаж. 
Дабы предоставить посетителям что-либо, на что они могут смотреть, ожидая, 
пока браузер отобразит большое изображение, создайте с помощью программы 
редактирования изображений копию исходного изображения с низким разреше- 
нием. Затем воспользуйтесь атрибутом lowsrc в дескрипторе <img>, чтобы дать 
Web-браузеру указание извлечь и отобразить быстро загружающееся (с меньшим раз- 

мером файла) изображение с низким разрешением перед загрузкой исходного изоб- 
ражения: 
<img src="land.jpg" lowsrc="landlow.jpg" 
width="600" height="300"> 
Графический файл, заданный атрибутом lowsrc (iandiow.jpg) — это копия с 
низким разрешением исходного изображения (iand.jpg). Когда Web-браузер об- 
наруживает дескриптор <img> в данном примере, браузер сначала загружает 
изображение, указанное в атрибуте lowsrc, а затем загружает исходное изобра- 
жение, указанное атрибутом src. 
Поскольку изображение lowsrc (iandiow.jpg) имеет файл меньшего размера, 
чем исходное изображение (iand.jpg), браузер может быстро загрузить и отобра- 
зить iandiow.jpg. Благодаря этому посетители смогут видеть версию пейзажа с 
низким разрешением, пока браузер загружает исходную фотографию с высоким 
разрешением. После извлечения изображения с высоким разрешением браузер 
выводит изображение поверх изображения с низким разрешением, заданного в 
атрибуте lowsrc. Следовательно, посетитель, глядя на изображение с низким 
разрешением, увидит, как оно превратится из расплывчатого в кристально чис- 
тое — как по мановению волшебной палочки. 
ПРАКТИКУМ 
Как было сказано выше, основное назначение атрибута lowsrc — вывод на экран 
изображения с низким разрешением (быстро загружающегося). Однако вместо того, 
чтобы использовать атрибут lowsrc для отображения копии с низким разрешением 
того же изображения, почему бы не сделать все несколько интереснее — не загру- 
зить с помощью одного дескриптора <img> два разных изображения (см. рис. 6.23)? 

В предыдущем примере вы использовали программу редактирования изобра- 
жений для создания копии с низким разрешением исходного изображения (пей- 
зажа). Однако вместо того, чтобы делать копию изображения, попробуйте ис- 
пользовать совершенно иное изображение. Значение атрибута lowsrc можно 
установить равным имени файла любого изображения, а не только копии оригина- 
ла. В приведенном ниже примере показано, как можно воспользоваться дескрипто- 
ром <img> для загрузки изображения со словами "Следующим летом" на время 
ожидания загрузки и отображения браузером картинки в файле photo.jpg: 
<img src="crimea-m.jpg" lowsrc:="nextsummer.jpg" 
width="600" height="300">

Глава 6. Графика 317 
Итак, когда посетитель .извлекает Web-страницу, он видит изображение из 
файла nextsummer.jpg, которое позже заменяется изображением, заданным ат- 
рибутом src, что и можно лицезреть на рис. 6.23. 
При выборе "хорошего" изображения с низким разрешением (быстро загружа- 
ющегося) главное состоит в том, чтобы выбрать картинку, которая привлечет 
внимание посетителя вашего сайта. Тогда посетитель дождется завершения заг- 
рузки большого (медленно загружающегося) изображения, вместо того чтобы, 
потеряв всякое терпение, отправиться на другой сайт. 
Welcome 
to 
Crimea! 
to 
Рис. 6.23. Изображение, указанное в атрибуте lowsrc, загружается первым 
ШИТ

318 Глава 6. Графика 
Обеспечение правильного представления цветов 
с помощью Web-безопасной цветовой палитры 
Одна из наибольших трудностей, с которыми вы столкнетесь при создании ри- 
сунков для Web-страницы, — это использование Web-цветов. Web-безопасная цвето- 
вая палитра (Web-safe color palette) состоит из 216 цветов, которые 
Web-браузеры 
способны правильно воспроизводить как в среде Windows, так и в среде Macintosh. 

Большинство посетителей вашего Web-сайта — не Web-дизайнеры, и многие 
из них работают на старых машинах, видеоадаптеры которых поддерживают мак- 
симум 256 цветов. Вы же можете создать Web-страницы на компьютере с видео- 
адаптером, способным отображать миллионы, если не миллиарды цветов. Следо- 
вательно, вы легко можете создать рисунок, который будет отлично выглядеть на 
вашей машине, но будет казаться зернистым и размытым на машине с меньшей 
способностью к воспроизведению цветов. 
Скажем, например, вы создаете изображение, содержащее тысячи или даже 
миллионы цветов. Поскольку ваш монитор и видеоадаптер способны отображать 
столь огромное число цветов, изображение выглядит великолепно. Однако когда 
посетитель, система которого поддерживает только 256 (или тысячи) цветов, об- 
ращается к вашему Web-сайту, Web-браузер должен преобразовать цвета в вашем 
изображении в меньшее число цветов в цветовой палитре на системе пользовате- 
ля. Следовательно, браузер сдвинет цвета в вашем изображении к ближайшему 
подходящему цвету, доступному в системе посетителя. 
Если при разработке графики для Internet вы используете цвета, не входящие 
в Web-безопасную палитру, могут произойти две вещи. Во-первых, более старые 
мониторы и видеоадаптеры, способные отображать только 256 цветов, сдвинут 
цвета в вашем изображении, вследствие чего рисунок будет выглядеть размытым. 
Во-вторых, некоторые системы будут "растрировать" цвета изображения. Растри- 
рование (dithering) — это процесс, в ходе которого более старая машина начинает 

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

1 ' • 
шшШШш Рис. 6.24. Создание изображения с 
использованием цветов, не входящих в 
Web-безопасную палитру, вызывает 
нежелательное растрирование 
• -^ Web-безопасная цветовая палитра

Глава 6. Графика 319 
ПРАКТИКУМ 
Чтобы рисунок содержал только Web-безопасные цвета, откройте изображение в 
программе редактирования изображений и проиндексируйте цвета изображения. 
Индексируя рисунок, вы даете программе редактирования изображений указание 
сдвинуть цвета к цветам, имеющимся в Web-безопасной палитре. Например, что- 
бы преобразовать цвета изображения в Web-безопасную цветовую палитру с помо- 
щью Adobe Photoshop, выполните следующие действия: 
1. Откройте изображение. 
2. Выберите в меню Image | Mode | Indexed Color (Изображение | Режим | Ин- 
дексированные цвета). 
3. После того, как Photoshop выведет на экран 
диалоговое окно Indexed Color (Индексирован- 
ные цвета), выберите элемент Web в выладаю- 
щем меню Palette (Палитра) и щелкните на 
кнопке ОК, как показано на рис. 6.25. 
GIF-изображения лучше сохранять с помощью 
Photoshop 5.5 и выше, пользуясь опцией Save For 
Web (Сохранить для Web). Чтобы сохранить графи- 
ческое изображение с помощью опции Save For Web, 
откройте изображение в Photoshop и выберите в 
г palette: 
Cpfcrs. 
web 
217 
7 Xransparency 
• options 
: &te, Diffusion » 
J
_1 
feFTOUnt; J75 Ж 
: . . . Г Preserve Exact Colors 
Cancel j 
меню File 
Рис. 6.25. Диалоговое окно 
"Indexed Color" определяет 
цветовое пространство ак- 
тивного документа Photoshop Save for Web (Файл | Сохранить для Web). 
Photoshop откроет диалоговое окно Save For Web, в 
котором вы сможете выбрать, как сохранить файл. Функция Save For Web не 
только позволяет сохранить GIF-изображение в Web-безопасной цветовой палит- 
ре, но также позволяет зафиксировать те или иные цвета и удалить остальные из 
цветовой палитры изображения. 
Хотя компьютеры, выпускаемые в течение последних нескольких лет, имеют 
возможность отображать более 256 цветов, по возможности избегайте создания 
рисунков для Web-страниц в формате GIF с цветами, не входящими в Web-безо- 
пасную цветовую палитру. Так вы уменьшите шансы того, что некоторым из ва- 
ших посетителей придется видеть низкокачественное изображение. Как и все со- 
ставляющие Web-дизайна, использование Web-безопасной цветовой палитры 
зависит от целевой аудитории. Если, проведя исследование, вы обнаружите, что 
ваша целевая аудитория пользуется более старыми аппаратными средствами, 
пользуйтесь Web-безопасной цветовой палитрой. 
Создание графических гиперссылок 
Один из простейших способов обеспечить передвижение посетителей со стра- 
ницы на страницу в пределах вашего сайта — это предусмотреть гипертекстовые 
ссылки на другие страниц на каждой странице сайта. Как было описано в главе 
1, гипертекстовая ссылка создается путем помещения "текста ссылки" (то есть 
текста, на котором посетитель щелкает, чтобы перейти по ссылке на другую

320 Глава 6. Графика 
страницу) между начальным и конечным дескрипторами привязки (<ах/а>) в 
HTML-коде Web-страницы. 
Графические ссылки могут выполнять разнообразные функции. С помощью 
ссылок посетители переходят со страницы на страницу и с сайта на сайт за счет 
простого щелчка на кнопке. Графические ссылки можно также использовать для 
того, чтобы посетители могли выгружать графические изображения и другие фай- 
лы, или же с их помощью можно запускать почтовую программу, чтобы посети- 
тели могли отправлять сообщения. Графика, на которой можно щелкнуть мышью 
(то есть текст, определенный как ссылка) — весьма распространенный элемент 
Web-страниц. Собственно говоря, большинство посетителей вашего Web-сайта 
знают, что именно случится, когда они щелкнут на графической ссылке. Они 
могут не знать, как написать HTML-код для создания ссылки, однако они име- 
ют понятие о том, что произойдет, если они щелкнут на изображении ссылки. 
Создание графических ссылок — самый простой и самый распространенный спо- 
соб сделать Web-страницы интерактивными. 
ПРАКТИКУМ 
Помимо использования в качестве гипертекстовой ссылки текста, можно приме- 
нять для ссылок графические изображения. Скажем, вы хотите сделать так, что- 
бы посетители могли посылать вам электронные сообщения. Для этого можно 
создать гипертекстовую ссылку. Однако вместо того, чтобы помещать текст между 
начальным и конечным дескрипторами привязки (<ах/а>), можно вставить графи- 
ческое изображение, например, рисунок почтового ящика, следующим образом: 
<а href: mailto:andy@andy. com"Ximg src="mailbox.gif" 
border="О" 
width="0" height="20"> 
В данном примере дескриптор <img> заменяет собой текст, использованный в 
качестве гиперссылки в предыдущем примере. Поскольку начальный и конечный 
дескрипторы привязки (<ах/а>) заключают в себе дескриптор <img>, изображе- 
ние, вставленное дескриптором <img> (в данном примере изображение почтово- 
го ящика из файла maiibox.gif) становится ссылкой, на которой посетитель 
может щелкать (см. рис. 6.26). 
Обратите внимание на добавление атрибута border в дескриптор <img>. Ког- 
да вы используете графическое изображение в качестве гипертекстовой ссылки, 
Web-браузер рисует вокруг изображения границу — точно так же, как он прово- 
дит линию под текстом гиперссылки. Чтобы дать Web-браузеру указание не ри- 
совать границу вокруг изображения, установите атрибут border в дескрипторе 
<img> равным.нулю. 
При использовании графического изображения в качестве гиперссылки следи- 
те за тем, чтобы картинка иллюстрировала что случится, когда посетитель щелк- 
нет на изображении. Например, можно использовать почтовый ящик для ссыл- 
ки, отправляющей электронное сообщение, домик для ссылки, возвращающей 
пользователя на домашнюю страницу сайта, или вопросительный знак для ссыл- 
ки, выводящей на экран Web-страницу с онлайновой справкой.

Глава 6. Графика 321 
Файл Орав»'» Вид \. $з6ранн 
S] htip//html-webdesign/Chap 
» Сервис Qnpeev.e 
efO6/FrguteO6-26h(m 
El 
d 
ДляпепиаДйВДследующую страницушелкниге^наэгдй ссьшкеи.-. 
ссылке... 
Для получения 
лкниге на згой 
_J 
Рис. 6.26. Пиктограмма почтового ящика — это ссылка, на которой можно щелкнуть 
мышью 
Кроме того, неплохо бы предоставлять текст описания как часть пиктограм- 
мы. В результате для посетителей вашего Web-сайта назначение пиктограммы бу- 
дет идентифицироваться и текстом, и графикой. 
Создание мозаичного фона из графических 
изображений 
Фон Web-страницы часто представляет собой повторяющийся узор, основан- 
ный на изображении из одного-единственного графического файла. Обычно ис- 
пользуется маленькое прямоугольное изображение, которое браузер затем повто- 
ряет, ставя прямоугольник (или элемент мозаики) друг возле друга снова и 
снова, чтобы заполнить фон всей Web-страницы. Таким образом, графические 
файлы, используемые для фона Web-страниц, создают повторяющийся узор, по- 
хожий на мозаичный пол, где каждый элемент мозаики расположен рядом с дру- 
гим элементом. На HTML-странице ширина и высота графического файла пред- 
ставляет собой размер элемента мозаики. Атрибут background в начальном 
дескрипторе <body> дает Web-браузеру указание заполнить окно браузера эле- 
ментами мозаики. 
ПРАКТИКУМ 
Чтобы создать фон Web-страницы, выберите подходящий файл изображения и 
присвойте имя файла атрибуту background в начальном дескрипторе <body>, как 
показано в пятой строке следующего кода: 
<html> 
<head> 
<title>npnMep фона</Ъл.Ъ1е> 
</head> 
<body background="fleur.gif"> 
<center>3«ro пример мозаичного фона</сепЪег> 
</body> 
</html>

322 Глава 6. Графика 
В данном примере Web-браузер будет использовать изображение из файла 
fieur.gif в качестве узора (или элемента мозаики), который будет повторяться 
в фоне Web-страницы. 
При заполнении фона графическим изображением Web-браузер начинает с 
размещения копии изображения в верхнем левом углу окна. Затем браузер делает 
копии изображения и помещает каждую копию справа от предыдущей. Когда 
браузер доходит до правого края Web-страницы, он переходит на следующую 
строку и создает еще один ряд изображений. Это процесс браузер повторяет до 
тех пор, пока не заполнит весь фон узором. Поскольку браузер загружает графи- 
ческий файл с изображением только однажды, фон заполняется быстро. 
Использование фоновых изображений — отличный способ добавить изюминку 
в Web-страницу, которая в остальном довольно-таки простовата. К сожалению, 
фон Web-страницы при неправильном использовании может превратиться в от- 
влекающий фактор. Например, на многих Web-сайтах в качестве фонового изоб- 
ражения используется логотип компании. Однако если фон содержит яркие сплош- 
ные цвета, посетителю будет нелегко читать текст и просматривать остальное 
содержимое Web-страницы. Следовательно, если вы хотите использовать логотип в 
качестве фона Web-страницы, с помощью программы редактирования изображений 
сначала приглушите цвета логотипа. На рис. 6.27 демонстрируется правильное и 
не- 
правильное использование логотипа в качестве фонового изображения. 
Фоны Web-страниц часто весьма незамысловаты. Однако с помощью простых 
графических изображений можно получить интересные, бросающиеся в глаза фоны. 
Например, можно создать небольшой графический элемент фона, который визуаль- 
но разделяет области с различными типами содержимого на Web-странице. 
Cool 
Treasures, 
GmbH 
Фон с яркими цветами 
«слолсняетчтрние содержимого $ 
IS - ; . ' ;'т 
Фон с приглушенными цветами 
Cool 
Treasures, 
GmbH J 
• • • • • • • • 
Логотип с приглушенными цветами позволяет легко и просто воспннять 
содержимое страницы. 
Рис. 6.27. Фоновый логотип слева слишком яркий, что затрудняет чтение 
информации на Web-странице

Глава 6. Графика 323 
файл Правка .ия избранное Сервис 
] httpy/htrnhvebdesign/ChapterO6/FigureQB-26a him 
5Ёайл . правка Вид Избранное Сервис Справка 
] http//html-webdes)gn/Chapter06/FigufeO6-28b htm 
Рис. 6.28. Создания бросающихся в глаза фонов с помощью специальных графических 
файлов 
На рис. 6.28 показаны две Web-страницы с единственными в своем роде фо- 
новыми изображениями. 
, Графические элементы, показанные в качестве фоновых изображений на рис. 
6.28, были созданы с помощью программы редактирования изображений. Каж- 
дый мозаичный элемент фона, использованный в изображении слева, представ- 
ляет собой графическое изображение высотой 50 и шириной 800 пикселей. 
Изображения такого типа Web-дизайнеры называют спагетти-графикой {spaghetti 
graphics), поскольку они длинные и тонкие. В данном примере первые 200 пик- 
селей изображения серого цвета, а остальные 600 пикселей — белого. Используя 
это изображение для фона Web-страницы, Web-браузер укладывает элементы мо- 
заики (то есть копии графического изображения) один под другим, создавая бес- 
шовный фон, разделяющий Web-страницу на две области. 
l=i Поскольку фоновое изображение имеет ширину 800 пикселей, посетители, 
у которых ширина окна браузера превышает 800 пикселей, будут видеть вторую 
серую поло- 
су по правой стороне окна браузера. 
Аналогично, изображение, использованное для создания фона второй Web- 
страницы на рис. 6.28, имеет высоту 50 и ширину 800 пикселей. Левые 200 пик- 
селей — светло-серого цвета и снабжены эффектом отбрасывания тени. Осталь- 
ные 600 пикселей — более светлого серого цвета. В результате фон приобретает 
трехмерный вид. В данном примере оба графических файла создают два видимых 
раздела на Web-странице. В левой части Web-страницы можно поместить гипер-

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

отображено на фоне не ограничивающего прямоугольника, а чего-то другого. 
Файловый формат GIF поддерживает прозрачность (или маскирование) выб- 
ранных участков графического изображения. В сущности, прозрачность позволя- 
ет тому, что находится "позади" изображения (обычно фон Web-страницы), про- 
свечивать сквозь само GIF-изображение. Эффект прозрачности можно 
использовать для удаления "уродливой белой рамки" вокруг рисунка, как показа- 
но на рис. 6.29. 
1 Пример GIF-изображения с прозрачностью - Microsoft Interne! Explorer 
барес П?| http//htfnl^webdesign/ChaptefO6/FigureD6 29 htm 
Нормальное GIF-иэображенис GJF-язобрагкенне с прозрачностью 
Рис. 6.29. Прозрачность позволяет фону Web-страницы "просвечивать" сквозь 
GIF-изображение 
GIF-изображение может иметь максимум 256 различных цветов. Однако, к 
сожалению, формат GIF поддерживает прозрачность только одного цвета. То 
есть, вы можете отметить только один из восьми битов, используемых для опи- 
сания цвета каждого пикселя в GIF-файле, как прозрачный. В то же время про- 
граммы редактирования изображений, такие как Photoshop, и новые форматы 
Web-файлов, такие как PNG, поддерживают 8-битовую прозрачность, то есть 
способность делать прозрачными один или несколько цветов в файле. 
Создать прозрачность в GIF-изображении можно с помощью программы ре- 
дактирования изображений. Скажем, у вас есть графическое изображение, и вы 
хотите сделать фон изображения прозрачным (как, например, белый фон вокруг 
графического изображения на рис. 6.29). Вы можете открыть графический эле- 
мент в программе редактирования изображений и сделать фон рисунка (то есть

Глава 6. Графика 325 
ту его часть, которую вы хотите сделать прозрачной) одноцветным, причем этот 
цвет не должен нигде больше присутствовать на рисунке. Затем при сохранении 
GIF-изображения дайте программе редактирования изображений указание уста- 
новить бит прозрачности для выбранного вами цвета. В результате часть изобра- 
жения с выбранным вами цветом "исчезнет" из виду, когда Web-браузер отобра- 
зит графический элемент на Web-странице. 
Создать прозрачность несложно с помощью Photoshop 5.5 или выше, выпол- 
нив следующие действия: 
1. Откройте изображение. 
2. Убедитесь, что на участках, которые вы хотите сделать прозрачными, при- 
сутствует "скатертный узор" (говорящий о прозрачности), и выберите в 
меню File | Save for Web (Файл | Сохранить для Web). 
3. Выберите формат GIF и отметьте флажок Transparency (Прозрачность), как 
показано на рис. 6.30. 
Отметьте флажок прозрачности 
\ 
Save For Web 
iE.d Чг-uc \ © 
1004 <#tht 
Web и1*'* 
64ток>г» 
( Color Т 
Origin*! Si» ' " 
Width: 1 lOpkiis 
«right. 132 pixels 
New Sat • 
Width; | l ! 0 
МЙ9М. |i 32 
Рис. 6.30. Функция "Save for Web"позволяет создавать прозрачные области в 
GIF-изобраз 
Следует помнить, что когда вы определяете цвет как прозрачный, все участки 
изображения, содержащие этот цвет, также станут прозрачными. Следовательно, 
цвет, выбранный для фона (прозрачный цвет), должен быть свойственным ис- 
ключительно фону изображения. Кроме того, поскольку формат GIF позволяет 
выбрать для прозрачности только один цвет, края изображения должны быть 
четкими, а не с плавными переходами цвета. Следовательно, графические изоб- 
ражения, содержащие плавные переходы (как плавные переходы изображения с 
тенями), не очень хорошо удаются, будучи сохранены в формате GIF.

326 Глава 6. Графика 
ПРАКТИКУМ 
При создании прозрачного GIF-изображения следует понимать, что прозрач- 
ность — это не функция HTML. Для выбора прозрачного цвета нужно воспользо- 
ваться программой редактирования изображений и сохранить эффект прозрачнос- 
ти в файле изображения. Например, чтобы создать прозрачный GIF-файл в 
приложении Adobe ImageReady, откройте изображение и после этого выберите и 
сотрите те участки, которые должны быть прозрачными при выводе изображения в 
браузере. Хотя выведенный на экран прозрачный пиксель (формально) не имеет 
цвета, превращение одного цвета в прозрачный ограничивает общее число види- 
мых цветов в рисунке 255 цветами (вместо 256). После того, как вы сотрете все 
участки изображения, которые хотите сделать прозрачными, в приложении 
Photoshop выберите в меню File | Save for Web (Файл | Сохранить для Web) и 
сохра- 
ните редактируемое изображение в файл. Когда изображение визуализируется 
Web-браузером, стертые участки изображения будут прозрачными. 
Программы редактирования изображений и создания Web-страниц (подобные 
FrontPage) предоставляют различные методы для создания прозрачности в GIF- 
изображении. Например, FrontPage позволяет выбрать прозрачный цвет путем 
щелчка на цвете в изображении инструментом типа "пипетки11. Photoshop, с дру- 
гой стороны, позволяет создать GIF-изображение с прозрачностью с помощью 
маски канала. Важно понимать, что прозрачность в GIF-изображении создается 
путем выбора одного цвета в программе редактирования изображений, а Web- 
браузер при отображении изображения на Web-странице будет относиться к каж- 
дому пикселю этого цвета как к прозрачному. 
Извлечение полноразмерного изображения 
после щелчка на пиктограмме 
В этой главе практикумы были сосредоточены на помещении графических 
изображений на Web-страницы. Кроме того, вы узнали, что изображения, поме- 
щенные на Web-страницу, должны иметь небольшие размеры файлов, чтобы Web- 
браузер мог быстро загрузить и отобразить эти изображения. Чтобы получить 
требуемый небольшой размер файла изображения, изображения обычно сохраня- 
ются с использованием схем сжатия, характерных, например, для файловых форма- 
тов GIF, JPEG или PNG. Хотя эти форматы уменьшают размер файлов графических 
изображений, это достигается за счет некоторого ухудшения качества изображения. 

Например, формат JPEG может сжать графический файл до 1/т исходного 
размера файла. Хотя сжатое при помощи формата JPEG изображение может выг- 
лядеть неплохо в окне браузера, при распечатке картинка зачастую оказывается 
зернистой. Поскольку формат JPEG уменьшает размер файла путем удаления 
цвета из исходного изображения, изображение в формате JPEG может не содер- 
жать достаточной информации для корректного вывода на печать. Более того, 
Web-графика зачастую сохраняется с разрешением 72 ppi с целью соответствия 
разрешению типового монитора. Однако принтерам требуются более высокие 
разрешения (обычно 300 dpi (dots per inch — точек на дюйм) и выше). По этим 
двум причинам сосредоточьте свои усилия на том, чтобы изображения на Web

Глава6. Графика 327 
странице выглядели как можно лучше на экране, и снабдите посетителя вторым 
изображением (с более высоким разрешением), которое он сможет распечатывать 
на бумаге. 
Скажем, вы хотите предоставить посетителям своего Web-сайта возможность 
загружать и распечатывать графическое изображение. Можно было бы вставить 
полноразмерное изображение на Web-страницу и привести для посетителей ин- 
струкцию - щелкнуть на изображении и выбрать элемент "Сохранить рисунок..." 
в контекстном меню. Однако помещение полноразмерного, с высоким разреше- 
нием изображения на Web-страницу означает, что Web-браузеру придется загру- 
жать картинку с огромным размером файла, что займет немало времени — осо- 
бенно у тех посетителей, которым хотелось бы просто взглянуть на изображение, 
не загружая его и не печатая. 
Более практичный метод предполагает создание миниатюр (то есть неболь- 
ших изображений с низким разрешением) и превращение изображений в ссыл- 
ки, — пример этого показан на рис. 6.31. После того, как посетитель щелкнет на 
миниатюре, атрибут href гиперссылки даст Web-браузеру указание передать 
файл графического изображения на компьютер посетителя. 
ПРАКТИКУМ 
Чтобы создать миниатюру из полноразмерного изображения, откройте изображе- 
ние в программе редактирования изображений и создайте копию с низким раз- 
решением исходного изображения. Скажем, например, у вас есть серия полно- 
размерных изображений ландшафтов, и вам хотелось бы, чтобы посетители 
могли загружать и печатать эти изображения. Откройте файлы изображений (в 
данном примере iandi. t i f и iand2 , tif) в программе редактирования изобра- 
жений (по одному за раз). Создайте и сохраните копию с низким разрешением 
в другой файл (в данном примере iandiwi.jpg и iandiw2.jpg). Затем поместите 
изображения с низким разрешением (то есть миниатюры) на Web-страницу, как 
показано в дескрипторах <img> следующего HTML-кода: 
<html> 
<headXtitle>IIpHMep изображения для загрузки </title> 
</head> 
<body> 
<center> 
<font size="5">14enKHHTe на картинке, чтобы загрузить полноразмерное 
изображение</.опЪХЬг> 
<а href="file:http://www.andy.com/images/landl.tif"> 
<img src="landlwl.jpg" 
border="0" 
width="50" height="25"X/a> 
<br> 
<a href="file:http://www.andy.com/images/land2.tif"> 
<img src="Iandlw2.jpg" 
border="0" 
width="50" height="25"X/a> 
</center> 
</body> 
</html>

328 Глава 6. Графика 
В данном примере атрибуты href указывают на полноразмерные изображения 
(iandi.tif и iand2.tif), находящиеся в папке images на Web-сайте http:// 
www.andy.com. Атрибуты src в дескрипторах изображений дают Web-браузеру 
указание загрузить и отобразить миниатюры изображений большего размера с 
высоким разрешением, как показано на рис. 6.31. 
\3>айп 
J J 
'.• Иэ&рвнное . Сервис 
4JJ -> -* В * 
] http//htmi-webdesign/Chapterfl6/FigureD6-31 htm 
Щелкните на рисунке, чтобы просмотреть его полноразмерную версию 
Крым — это не только море, но и горы 
Водопад Учан-Су бывает 
таким ... ... и вот таким 
Рис. 6.31. Изображения на Web-странице являются гиперссылками 
Рис. 6.31. Изображения на Web-странице являются гиперссылками 
Помещая дескриптор <img> каждой миниатюры между парой дескрипторов 
привязки (<ах/а>), вы превращаете пиктограммы (в данном примере 
iandiwi. jpg и iandiw2. jpg) в гиперссылки. Когда посетитель щелкает на мини- 
атюре, конструкция file: перед URL-адресом в атрибуте href дескриптора <а> 
дает Web-браузеру указание загрузить картинку, а не выводить ее на экран. 
Предварительная загрузка и "фоновое11 
кэширование изображений 
Хотя комитет W3C упорно работает над стандартизацией создания Web-сай- 
тов, при разработке Web-страниц дизайнеры зачастую прибегают к маленьким 
хитростям. В частности, дизайнеры тратят немало времени и усилий на то, что- 
бы Web-страницы, содержащие много графики, быстро загружались. 
Загружая изображения на Web-странице, Web-браузер помещает копию каждо- 
го изображения в кэш изображений на жестком диске посетителя. Когда браузе- 
ру нужно вывести изображение на экран, он сначала проверяет, нет ли этого 
изображения в папке кэша изображений посетителя. Если изображения в папке 
кэша нет, Web-браузер предпринимает попытку загрузить изображение с Web

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

ной, или домашней страницы, и вам хотелось бы, чтобы графика на остальных стра- 

ницах сайта быстро загружалась, когда посетитель перейдет на эти страницы. 
Чтобы 
этого добиться, поместите дескрипторы <img> для графических элементов других 
страниц в нижней части HTML-кода главной страницы, как показано ниже: 
<html> 
<headXtitle>npeflBapM-renbHaH загрузка изображений</Ъд.Ь1е> 
</head> 
<body> 
Сюда вставляется тело Web-документа 
<img src="imagel.jpg" width="l" height="l"> 
<img src="image2.jpg" width="l" heigbt="l"> 
</body> 
</html> 
В данном примере дескрипторы <img> дают Web-браузеру указание загрузить 
два изображения внизу Web-страницы. Однако значения атрибутов width и height 
равны 1, чтобы посетитель на самом деле не видел изображений на экране. Хотя 
эти изображения и не видны на экране, Web-браузер все же загружает изображения 
с Web-сервера и сохраняет копии изображений в папке кэша изображений на жест- 
ком диске посетителя, когда посетитель извлекает главную страницу сайта. 
Как только посетитель покинет главную страницу и перейдет на другую стра- 
ницу Web-сайта, браузер сможет извлечь изображение (изображения) на этой 
странице из кэша изображений на жестком диске. В результате страница загру- 
зится быстро, так как браузеру не придется загружать файлы изображений с 
Web-сервера. Создавая дескрипторы <img> для страницы, на которой вы хотите 
отобразить изображения, используйте в качестве значений атрибутов width и 
height в каждом дескрипторе <img> фактические ширину и высоту изображе- 
ния, как в дескрипторах <img> в следующем HTML-коде: 
<html> 
<headXtitle>IIpHMep обыкновенного Web-flOKyMeHTa</title> 
</head> 
<body> 
Сюда вставляется тело Web-документа 
<img src="imagel.jpg" width="200" height="75"> 
<img src="image2.jpg" width="150" height="80"> 
</body> 
</html>

330 Глава 6. Графика 
Обратите внимание, что дескрипторы <img>, с помощью которых картинки 
помещаются на ту Web-страницу, на которой они должны быть отображены, 
представляют собой стандартные HTML-дескрипторы <img>. Причина же, по ко- 
торой Web-браузер загружает изображения быстрее, заключается в том, что брау- 
зер загружает изображения из папки кэша изображений, а не с Web-сервера. 
Благодаря этому браузер может обратиться к изображениям, отображаемым на 
странице, практически мгновенно. 
Имейте в виду, что даже хотя посетитель не видит скрытые (за счет установки 
атрибутов width и height равными одному пикселю) изображения на Web-стра- 
нице, браузеру все равно приходится загружать изображения вместе со страни- 
цей. Следовательно, для загрузки Web-страницы, которая предварительно загру- 
жает (скрытые) изображения, требуется больше времени, чем для загрузки 
одного лишь видимого содержимого. 
Использование скрытых изображений для предварительной загрузки графики 
в локальный кэш лучше всего работает на Web-сайтах с линейным расположени- 
ем содержимого (то есть на сайтах, где посетители обычно посещают страницы 
одну за другой). Скажем, на первой странице нет никакой графики, а на следу- 
ющей странице серии есть четыре картинки. Время, требуемое на загрузку вто- 
рой страницы, можно сократить вдвое с помощью предварительной загрузки и 
вставки дескрипторов <img>, выводящих изображения на экран в виде однопик- 
сельных точек на первой странице, не содержащей графики. 
Другой способ сократить время загрузки — использовать одни и те же графи- 
ческие изображения на более чем одной Web-странице. Скажем, вы создаете гра- 
фическую навигационную панель, подобную показанной на рис. 6.32. 
поиск н заказ | как п<мьзо»а».С)Гу справочник | наши координаты | .
^госгеиаа^книг.» j 
Рис. 6.32. Графическая навигационная панель 
Вместо того чтобы создавать отдельную навигационную панель для каждой 
страницы, используйте одно и то же графическое изображение на всех страни- 
цах. В результате Web-браузеру придется загружать графическую навигационную 
панель только однажды, поскольку в следующий раз, когда браузеру понадобится 
отобразить это же графическое изображение (то есть навигационную панель), 
браузер сможет взять изображение из кэша изображений на локальном жестком 
диске. Это справедливо также в отношении фоновой графики и всех прочих 
изображений, используемых на Web-сайте. Планируя сложный Web-сайт, органи- 
зовывайте страницы сайта так, чтобы вы могли использовать графические изоб- 
ражения не один раз. Более того, по возможности делайте предварительную заг- 
рузку изображений, скрывая их как однопиксельные графические элементы в 
нижней части страниц, содержащих только текст. Тщательное планирование 
плюс небольшие хитрости могут превратить средний Web-сайт в часто посещае- 
мый сайт с хорошо организованным содержимым и быстро загружающимися 
Web-страницами.

Глава 6. Графика 
Расширение Web-безопасной цветовой палитры 
с помощью техники растрирования 
При создании рисунков для отображения на Web-страницах одной из важней- 
ших забот дизайнера является точное воспроизведение цветов. В идеале требует- 
ся, чтобы цвета, которые ваши посетители видят в изображении, были идентич- 
ны цветам, которые вы использовали при его создании. К сожалению, при 
наличии на рынке сотен различных компьютерных мониторов и видеоадаптеров 
весьма сомнительно, что цвета, которые вы видите на своем мониторе, будут аб- 
солютно совпадать с теми, которые будут видеть ваши посетители. 
Web-безопасная цветовая палитра уменьшает число сдвигов, имеющих место 
при отображении Web-браузерами одного и того же изображения на различных 
мониторах и видеоадаптерах. Тем не менее, следует понимать, что правильное 
воспроизведение — не всегда точное воспроизведение. Мониторы и видеоадапте- 
ры не только отображают множество цветов, но также располагают функциями, 
позволяющими пользователю управлять тем, как выглядят цвета. На большин- 
стве мониторов предусмотрена возможность регулирования яркости и контраст- 
ности, а многие позволяют пользователям регулировать также оттенки цветовой 
гаммы и насыщенность цветов. В результате Web-безопасный оттенок красного 
на различных мониторах, скорее всего, будет представлен немного отличающи- 
мися оттенками красного. 
Следовательно, применение Web-безопасной палитры цветов не гарантирует, 
что цвета, использованные в ваших рисунках, будут выглядеть одинаково на всех 
мониторах; это лишь сводит к минимуму шансы того, что использованные вами 
цвета будут растрированы. Растрирование — это процесс смешивания цветов. 
Когда вы используете цвет, находящийся вне диапазона, воспроизводимого ви- 
деоадаптером посетителя, видеоадаптер делает попытку создать приближенный 
цвет за счет смешивания тех цветов, которые он способен отобразить. 
ПРАКТИКУМ 
Хотя смешивание цветов используется для создания цветов, лежащих за предела- 
ми воспроизводимого видеоадаптером монитора диапазона цветов, оно может 
придать изображению "грязноватый" вид. Если в GIF-изображении присутствуют 
слова, чтение текста, цвет которого получен путем растрирования, может быть 
зат- 
руднено. 
Если же о тексте речь не идет, вы можете использовать растрирование в своих 
интересах, создавая цвета, лежащие вне диапазона безопасной палитры, состоя- 
щей из 216 цветов. Скажем, например, вы хотите создать фон Web-страницы с 
цветом, лежащим вне диапазона 216-цветовой безопасной палитры. Чтобы со- 
здать свой собственный фоновый цвет, создайте с помощью программы редакти- 
рования изображений, такой как Photoshop, изображение в цветовом простран- 
стве RGB с шириной 50 и высотой 50 пикселей. 
Например, чтобы создать фон голубого цвета оттенка более светлого, недели 
тот, который имеется в Web-безопасной цветовой палитре, окрасьте пиксели, 
расположенные в шахматном порядке в матрице фонового изображения 50x50

332 Глава 6. Графика 
пикселей, в более темный оттенок голубого цвета. Затем окрасьте остальные пик- 
сели Web-безопасным, светлым оттенком голубого, как показано на рис. 6.33. 
Наконец, сохраните изображение как файл в формате GIF, дав ему описатель- 
ное имя (в данном примере — biue.gif). 
При использовании этого GIF-изображения в качестве фона Web-страницы 
(см. дескриптор <body> в приведенном ниже HTML-коде), Web-браузер "окра- 
шивает" фон в нужный вам светло-голубой цвет — между более светлым и более 
темным оттенками Web-безопасного голубого: 
<html> 
<headXtitle>IlpHMep Web-страницы с растрированию! цветом</Ьл.Ъ1е> 
</head> 
<body background="blue . gif "> 
Сюда вставляется тело Web-документа 
</body> 
</html> 
При создании уникальных цветов в GIF-изображении хитрость заключается в 
выборе похожих Web-безопасных цветов. При выборе цветов, резко контрастиру- 
ющих друг с другом (например, черный и белый), внутри изображения создается 
видимая грубая текстура. 
Использование заданного шаблона растрирования для генерации новых цве- 
тов, как, например, светло-голубого в данном примере, создает файл изображе- 
ния очень маленького размера, что гарантирует его быструю загрузку. Таким об- 
разом, вы можете использовать новые цвета, созданные с помощью небольших 
файлов изображений, чтобы сделать свою страницу непохожей на другие, не уве- 
личивая при этом время ее загрузки. 
Л В масштабе 100% 
С таким увеличением, 
чтобы были видны 
отдельные пиксели 
• 
Рис. 6.33. Графический файл 50x50 пикселей с расположенными шахматном порядке 
пикселями 
светлого и темного оттенков Web-безопасного голубого цвета

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

узер заменит его своим шрифтом по умолчанию — возможно, Courier или 
Helvetica. (Посетитель может задать в настройках браузера шрифт по умолчанию, 
применяемый в тех случаях, когда текст Web-страницы требует использования 
отсутствующего на компьютере шрифта.) Более того, посетители могут устано- 
вить используемые по умолчанию цвет и размер текста. Один из способов разре- 
шения проблемы представления текста — это преобразование текста в графичес- 
кое изображение, а затем вывод изображения текста на экран с помощью 
дескриптора <img>. 
Хотя преобразование всего Web-документа в графическое изображение не 
было бы практичным, иногда использование изображений текста имеет смысл. 
Предположим, например, вы хотите разместить на Web-странице логотип своей 
компании, который представляет собой комбинацию текста и графики. Все ус- 
ложняется еще и тем, что текст расположен по кривой вокруг логотипа. Не гово- 
ря уже о начертании шрифта, отобразить стандартный Web-текст по кривой (в 
отличие от прямоугольной границы) вокруг изображения попросту невозможно. 
ПРАКТИКУМ 
Чтобы решить эту проблему, отредактируйте логотип в программе редактирования 
изображений, подобной Photoshop, и сделайте текст частью изображения. При 
преобразовании текста в "рисунок" текста нужно решить, применять ли функцию 
устранения контурных неровностей (anti-aliasing). 
Большинство художников-графиков автоматически задают устранение контур- 
ных неровностей, поскольку при использовании этой функции текст, помещае- 
мый на изображение, выглядит "гладким". Функция устранения контурных не- 
ровностей старается скрыть тот факт, что компьютерные мониторы отображают 
изображения с помощью пикселей, форма которых подобна кирпичикам. При пре- 
образовании векторного изображения (текста) в графическое изображение програм- 
ма редактирования изображений преобразует математическую форму текста (то есть 
вектор) в растровую форму (то есть в пиксели) графического изображения.

3 34 Глава 6. Графика 
Если вы включите функцию устранения контурных неровностей при преобра- 
зовании текста в изображение, программа редактирования изображений покроет 
края текста цветами. Добавленные цвета сглаживают "зубчатость", видимость ко- 
торой создается острыми края пикселей по контурам букв, как показано на рис. 
6.34. 
Хотя вам может показаться, что сглаживанием зазубренных краев следует 
пользоваться постоянно, устранение контурных неровностей не всегда хорошо 
отражается на мелком тексте (до 14 пунктов). Размывая контуры каждого симво- 
ла в тексте, сглаживание может сделать мелкие буквы слишком расплывчатыми 
для того, чтобы их можно было читать. При отключении устранения контурных 
неровностей текст резко контрастирует с фоном и поэтому может казаться чита- 
телю слегка "зубчатым". Тем не менее, текст будет легче читаться благодаря от- 
сутствию расплывчатости. 
Приведенный ниже HTML-код создает Web-страницу с двумя GIF-изображе- 
ниями. В первом изображении при преобразовании текста в формат GIF было 
применено устранение контурных неровностей; в случае же второго изображения 
функция устранения контурных неровностей было отключена, как показано на 
рис. 6.35. 
<html> 
<Ьеас1ХЪ1Ъ1е>Устранение контурных неровностей в тексте</Ъ1Ъ1е> 
</head> 
<body> 
<center> 
<img src="antion.gif" width=="500" height="200"> 
<br> 
<img src="antioff.gif" width="500" height="200"> 
</center> 
</body> 
</html> 
Без устранения контурных неровностей 
С устранением контурных неровностей 
Рис. 6.34. Функция устранения контурных неровностей, примененная 
к векторному изображению, придает контурам плавный вид

Глава 6. Графика 
Как видно на рис. 6.35, в случае крупного текста устранение контурных не- 
ровностей приносит пользу. К сожалению, по мере того, как текст становится 
мельче, читать его становится труднее. Обычно текст, размер которого составляет 

меньше 14 пунктов, читается легче при преобразовании в изображение без устра- 
нения контурных неровностей. Применение устранения контурных неровностей 
дает один побочный эффект, который необходимо принимать во внимание: по- 
скольку устранение контурных неровностей покрывает контуры текста дополни- 
тельными цветами, добавление цветов увеличивает размер сохраненного файла. 
Как и со всем прочим в Internet, всегда сочетайте следование правилам и пос- 
ледующий визуальный контроль. При преобразовании текста в графическое 
изображение (то есть в "рисунок" текста), поэкспериментируйте и выберите то 
изображение, которое легче всего читается. 
неровностей - Microsoft Internet Lxptorer 
<Еайл Зрввка Цид ^эбрвнное Сдокис Справка ' • • . 
Назад .:"• • '-, ; Оствмов Обйов^тц ДомйЛ Поиск Иаээлчн . Журнал Почта Печать 
Правка 
Текст без контурных неровностей.. 
Текст без контурных неровностей... 
Текст без контурных неровностей... 
Текст 6e:i контурны* нераш«к:тей.,. 
Текст с контурными неровностями. 
Тексте контурными неровностями... 
Тексте контурными неровностями... 
Тексте контурными неровностями... 
| 
Рис. 6.35. В результате устранения контурных неровностей крупный текст остается 

читабельным; чтение же мелкого текста затрудняется

Глава 7 
ттшшттттая 
Анимация, звук и видео 
В этой главе TW 
•
•
• 
Создание GIF-анимации с чистого листа 
Управление GIF-анимацией с помощью 
внутренних параметров 
Создание баннера с помощью GIF-анимации 
Создание плавных переходов между кадрами 
GIF-анимации с помощью построения 
промежуточных изображений 
Включение в Web-сайт готовой Flash-заставк 
Создание Flash-фильма с чистого листа 
Построение анимации на основе текста с 
помощью FlaX 
Передача потокового аудио и видео 
Создание потокового медиа 
Создание страницы с Web-камерой 
Встраивание видео и аудио в страницу с 
помощью SMIL

Глава 7. Анимация, звук и видео ' 3 3 7 
Сегодня практически невозможно путешествовать по Internet, не встречая 
1 Web-страниц, содержащих какую-то анимацию, звук, видео или комбина- 
цию всего перечисленного. От простых анимированных GIF-изображений до 
Flash-фильмов и даже полноэкранных интерактивных изображений со звуком и 
движением, в анимации, встраиваемой в Web-страницы, заложен огромный потен- 
циал "оживления" вашего дизайна. К сожалению, избыток анимации и звука спо- 
собен вызывать у посетителей раздражение и отвлекать их внимание. Развитие тех- 

нологий в Internet обусловлено стремлением к достижению двух противоположных 
целей: 
В попытках угодить посетителям авторам Web-страниц приходится переда- 
вать через Web все более и более сложные типы содержимого (звук, анима- 
цию и видео). 
• Чтобы добраться до посетителей Web-сайта, размеры файлов содержимого 
должны быть достаточно небольшими для обеспечения быстроты загрузки, 
или же посетители, потеряв терпение, отправятся на другие сайты. 
Посетители требуют все больше и больше информации. Однако, требуя развле- 
чений и информации, они зачастую не желают провести несколько лишних се- 
кунд в ожидании поступления дополнительного содержимого. К счастью, две про- 
тивоположные цели — дизайн и ожидание — стимулируют развитие новых 
технологий, позволяющих вам предоставлять посетителям больше информации 
быстрее, чем когда-либо раньше. 
Работая с анимацией для Web, вы индескрипторрируете одну или несколько 
технологий (Flash, Shockwave, GIF-анимацию или видео- и звуковые приложения) 
в конечную цель - создание Web-страницы, способной крепко притягивать взгляд. 
Создание анимации на Web-странице основывается на способности человеческого 
глаза удерживать изображение (называемой инертностью зрительного восприя- 
тия). Инертность зрительного восприятия подразумевает, что образ изображения 
остается в глазах после того, как изображение исчезает из поля зрения. Напри- 
мер, войдите в комнату, выключите свет, а затем быстро включите-выключите свет. 

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

33 8 Глава 7. Анимация, звук и видео 
Web-страницах все не ограничивается движением по экрану безмолвных объектов. 
Анимация также может включать в себя речь и музыку. 
Например, показанный на экране разряд молнии имеет куда большее воздей- 
ствие, если он сопровождается ударом грома. Кроме того, звук в виде голоса дик- 

тора, фоновой музыки или специальных эффектов вроде "щелчков" интерактивной 
кнопки помогает задать "настрой" страницы, способствует сосредоточению внима- 
ния посетителей и служит развлечением для них. 
Хотя добавление информации и звука способно "добавить искру" в Web-страни- 
цу, казавшуюся бы иначе скучной и унылой, нужна ли эта искра разрабатываемому 
вами Web-сайту, — это вопрос, который вы должны задать себе перед тем, как по- 
грузиться в мир анимации. 
Понимание роли анимации в Web-дизайне 
Основная роль Web-анимации состоит в привлечении внимания посетителей к 
вашему Web-сайту. Однако Web-анимация также может развлекать и информиро- 
вать. Маленькие дети (в особенности те, которые только начинают читать) обожа- 
ют движение, и их внимание всегда сосредоточивается на нем. Следовательно, с 
помощью анимации можно захватить и надолго сосредоточить внимание малень- 
кого ребенка на концепции, которую вы пытаетесь передать. 
Кроме того, на Web-странице можно применить анимацию и звук для описа- 
ния этапов сложной процедуры или процесса. Например, анимированная после- 
довательность (или, может быть, видеоролик), демонстрирующая процедуру про- 
граммирования видеомагнитофона на запись фильма, в сопровождении голоса 
диктора, поясняющего действия, намного эффективнее текстового документа, 
описывающего эту же процедуру. Конкретное предназначение разрабатываемой 
вами Web-страницы в значительной мере будет определять тип анимации и про- 
граммного обеспечения, необходимого для ее создания. Анимация — важная со- 
ставляющая дизайна Web-сайта, и у вас, Web-дизайнера, есть возможность выбрать 
из нескольких методов те, которые помогут вам в достижении конкретных сто- 
ящих перед вами целей. 
Понятие подключаемого программного модуля 
На протяжении этой главы вы будете рассматривать различные типы мультиме- 
дийного содержимого, такие как Flash-анимация, потоковое аудио и видео 
(streaming audio/video), туры по виртуальной реальности (Virtual Reality - VR) 
QuickTime и т.д. В зависимости от формата файла анимации, Web-браузер может 
не обеспечивать встроенную поддержку, с помощью которой воспроизводится ани- 
мация. В таком случае для того, чтобы просмотреть анимацию, вам понадобится 
установить специальное программное обеспечение (называемое подключаемым 
модулем (plug-in)), которое обычно выгружается из Web и устанавливается в брау- 

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

Глава 7. Анимация, звук и видео 3 3 9 
Web-сайта Macromedia. Сегодня же большинство современных браузеров поставля- 
ются с уже установленным модулем воспроизведения Flash. 
Обычно HTML-утверждения, которые помещают анимированный объект на 
страницу, включают в себя также инструкции для Web-браузера, позволяющие 
последнему найти и выгрузить соответствующий подключаемый модуль. Перед 
тем, как выгрузить и установить модуль, браузер выведет на экран диалоговое 
окно 
с сообщением о том, что для отображения страницы требуется программное обес- 
печение, еще не установленное на вашей машине, и укажет, откуда из Web он бу- 
дет выгружать необходимый модуль. Если вы согласитесь выгрузить подключаемый 
модуль, браузер извлечет программу и установит ее. Не разрешив браузеру произ- 
вести загрузку, вы будете просматривать содержимое Страницы за исключением 
анимированного объекта. В среде. Windows большинство подключаемых модулей 
представляют собой элементы управления ActiveX. Объекты ActiveX подробно рас- 
сматриваются в главе 9. 
Понятие динамического HTML (DHTML) 
В начале Web-содержимое было статическим. После того, как браузер завершал 
загрузку графического изображения, картинка оставалось на одном и том же месте 
в окне браузера. Web-дизайнерам показалось, что это накладывает слишком много 
ограничений на творческий процесс, - так начались поиски способа встраивать в 
страницы содержимое, которое изменялось бы даже после загрузки страницы по- 
сетителем. 
Говоря упрощенно, это стало возможным благодаря динамическому HTML 
(Dynamic HTML — DHTML). Внутри Web-страниц дизайнеры зачастую генериру- 
ют DHTML-содержимое, используя язык написания сценариев, такой как 
JavaScript, для обращения к так называемой объектной модели документа 
(Document Object Model — DOM) — базовому объекту программного обеспече- 
ния — внутри Internet-браузера. По сути, DOM позволяет сценарию управлять 
тем, как выглядят все элементы (то есть всех объекты), отображаемые браузером 
на 
Web-странице. В отношении DHTML нужно помнить то, что обработка происхо- 
дит внутри браузера. DHTML использует клиентскую обработку, в противополож- 
ность обработке, выполняемой на сервере. 
В настоящее время почти все посетители пользуются Web-браузерами, позволя- 
ющими клиентским сценариям управлять DOM. Благодаря этому дизайнеры мо- 
гут с помощью сценариев изменять и/или перемещать элементы внутри Web-стра- 
ницы. Например, с помощью DHTML можно изменять цвет текста, когда 
посетитель наводит курсор мыши на слово в гипертекстовой ссылки. Хотя, строго 
говоря, изменение цвета текста — не анимация, ним вызывается изменение экра- 
на, помогающее сосредоточить внимание посетителя. В приведенном ниже 
HTML-файле, DynamicDemo.html, для изменения цвета текста гиперссылки (ука- 
зывающей на сайт, посвященный DHTML) при входе курсора в область ссылки 
(и выходе из нее) используется JavaScript: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd">

340 Глава 7. Анимация, звук и видео 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<<Ы|'Ые>Демонстрация эффекта изменения цвета текста при наведении 
курсора MbniDH</tit:le> 
</head> 
<body bgcolor="#ADD8E6"> 
<hl align="center">HTML &amp; Web Design Tips &amp; Techniques</hl> 
<hr /> 
<p> Наведите курсор мыши на приведенные ниже ссылки, чтобы увидеть 
DHTML-событие Mouseover.<br /> 
Щелкните на любой из ссылок, чтобы посетить сайт, посвященный 
DHTML.<br /> 
<br /X/p> 
<ul> 
<liXa href="http: //www.dhtmlshock,com/" 
onmo\iseover="this . style .colors'red1" 
onmouseout="this.style.color='blue'">DHTML Shock</a> - 
http://www.dhtmlshock.com/</li> 
<li style="list-style: none"X/liXbr /> 
< l iXahref ="http : //www. w3schools . com/dhtml/dhtml__examples . asp" 
onmouseover="this.style.color='green'™ 
onmouseout="this.style.color='blue'">DHTML Examples</a> - 
http://www.w3schools.com/dhtml/dhtml_examples.asp</li> 
<li style="list-style: none"X/liXbr /> 
<liXahref= "http: //www. dynamicdrive . com/" 
onmouseout="this.style.color='blue*">Dynamic Drive</a> - 
http://www.dynamicdrive.com/</li> 
</ul> 
</body> 
</html> 
</body> 
</html> 
В данном случае HTJVlL-утверждения используют события onmouseover и 
onmouseout для задания цвета, присваиваемого браузером ссылке, когда посети- 
тель наводит курсор мыши на текст и когда он убирает курсор со ссылки. Главное, 

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

Глава 7. Анимация, звук и видео 3 41 
содержимого, работающего одинаково во всех браузерах, — достаточно сложная за- 
дача, поэтому создать анимацию этого вида далеко не так просто, как, например, 
GIF-анимацию, речь о которой пойдет ниже. Вообще же самостоятельное кодиро- 
вание анимации — дело довольно трудоемкое и утомительное. К счастью, прило- 
жения с дружественным интерфейсом, подобные Macromedia Dreamweaver, помо- 
гут вам с созданием кода сценариев DHTML. 
Количество типов анимации, которые можно получить с помощью DHTML, 
весьма ограничено, поскольку все, что фактически способен делать DHTML - это 
двигать неподвижные изображения по экрану, а движение неподвижного изобра- 
жения по экрану на самом деле анимацией не является — это просто движение. 
Чтобы включить в Web-страницу более качественную, настоящую анимацию, вос- 
пользуйтесь GIF-, Flash- или Shockwave-анимацией. Чтобы же увидеть, как работа- 

ет DHTML, посетите следующие сайты: 
• http://www.hfe.org/resource/demo2/ 
• http://www.dhtmlcentral.com/ 
• http://www.webcoder.com/ 
Работа с GIF-анимацией 
Анимация с использованием формата графического обмена (GIF — Graphic 
Interchange Format) — наиболее популярная на сегодняшний день форма анимации 
в Internet. Такая популярность вызвана несколькими причинами: 
• GIF-анимацию легко создавать. GIF-анимацию можно создать с помощью 
ряда приложений для создания изображений и Web-дизайна, таких 
как Adobe ImageReady и Macromedia Fireworks. Кроме того, из сайтов 
условно-бесплатных программ (shareware), в числе которых h t t p : / / 
www.shareware.com И http://www.tucows.com, ВЫ МОЖете ВЫГруЗИТЬ уСЛОВ- 
но-бесплатные программы, позволяющие создавать GIF-анимацию на осно- 
ве существующих изображений. Среди популярных условно-бесплатных 
программ можно назвать GIF Builder и (Macintosh) GIF Construction Set 
(Windows). 
• GIF-анимация не требует специального программного обеспечения для браузеров. 
Почти все Web-браузеры воспроизводят GIF-анимацию, что означает, что 
браузеру не нужно специальное программное обеспечение или подключае- 
мый модуль. 
• GIF - это стандартный формат Web-файлов. Все браузеры, поддерживающие 
графические изображения, будут отображать GIF-файлы. В редких случаях, 
когда браузер не поддерживает GIF-анимацию, браузер будет отображать 
статическую версию анимации (обычно первый кадр анимационной после- 
довательности, хранящейся в GIF-файле). 
• GIF-анимация использует потоковые технологии. Начав загрузку GIF-анима- 
ции, Web-браузер отображает кадры по мере их получения. Посетителю не 
приходится дожидаться окончания загрузки файла, чтобы увидеть анима- 
цию.

342 Глава 7. Анимация, звук и видео 
Анимированные GIF-изображения работают так, как традиционная, рисован- 
ная покадровая анимация, которую создает компания Уолта Диснея и ей подоб- 
ные. Каждый GIF-файл содержит определенное число ячеек, где каждая ячейка 
представляет собой часть анимации. При сохранении GIF-файла программа "скла- 
дывает" изображения (то есть ячейки) одно поверх другого и сохраняет их все в 
од- 
ном файле ч Когда Web-браузер открывает файл, он отображает отдельные изобра- 
жения по одному за раз, создавая зрительный образ движения, как показано на 
рис. 7.1. 
Кадр 1 Кадр 2 Кадр 3 
Рис. 7.1. Кадры GIF-анимации 
Кадр 4 
Как мы подробно рассмотрим чуть позже в этой главе, в практикуме "Управле- 
ние GIF-анимацией с помощью внутренних параметров", при сохранении GIF- 
анимации вы задаете те или иные из ряда параметров, которые позволяют регули- 
ровать скорость и продолжительность анимации. Программа, с помощью которой 
вы создаете GIF-анимацию, сохраняет отмеченные опции в GIF-файле, а Web-бра- 
узер интерпретирует выбранные параметры, открывая файл с целью воспроизведе- 
ния анимации. 
Поскольку анимация привлекает внимание, GIF-анимация широко использу- 
ется в маркетинге и рекламе. Всем нам приходится лицезреть на вездесущие рек- 
ламные баннеры, "болтающиеся" вверху практически каждой коммерческой Web- 
страницы, рекламирующие все что угодно, от мягких игрушек до подписки на 
серьезные журналы. 
Еще одна причина широкого распространения GIF-анимации состоит в про- 
стоте ее вставки в HTML-документ. GIF-анимация встраивается в Web-страницы с 
помощью того же дескриптора <img>, который используется для вставки графики 
и иллюстраций, как показано ниже: 
<img src="neon.gif" width="50M height="50" /> 
Атрибут src в данном примере дает Web-браузеру указание загрузить GIF-файл 
neon.gif. Информация, поясняющая браузеру, как построить анимацию GIF-фай- 
ла (скорость, количество циклов), внедрена в сам файл, а не записана в HTML- 
коде. 
Существует множество Web-сайтов, предлагающих бесплатные анимированные 
GIF-изображения, которые вы можете выгрузить и внедрить в собственный Web- 
сайт:

Глава 7. Анимация, звук и видео 343 
Animation Factory 
All Free Original Clipait 
Animation City 
imageif.net 
http://www. animfactory.net/ 
http : //www. free-graphics. com/ 
http : //www. animationcity. net/ 
http://www. imagif.net/ 
Далее в этой главе, в практикуме "Создание GIF-анимации с чистого листа", вы 
создадите свою собственную GIF-анимацию. 
Работа с Macromeda Hash 
Приложение Flash - это средство разработки мультимедиа, созданное корпора- 
цией Macromedia, которое позволяет создавать полноэкранную анимацию со 
встроенным звуком и интерактивностью при очень небольших размерах файла. 
Небольшие размеры файлов Flash обеспечивает за счет использования векторных 
изображений. Векторные изображения меньше, чем традиционные растровые 
изображения, поскольку для описания графики в них вместо пикселей использу- 
ется математический аппарат. При сохранении традиционного растрового изобра- 
жения (GIF или JPEG), файл должен зафиксировать и сохранить внутри графичес- 
кого файла информацию, описывающую каждый пиксель, в результате чего и 
получаются большие файлы. И напротив, когда вы сохраняете векторную графику, 
изображение применяет математические формулы для сохранения информации об 
изображении. Например, предположим, вы рисуете с помощью графической про- 
граммы линию. Если вы сохраняете изображение в растровом (битовом) формате, 
в файле должны будут быть сохранены все пиксели, из которых состоит линия, а 
также все те пиксели, которые составляют фон изображения. Если же вы сохраня- 
ете изображение в. векторном формате (см. рис. 7.2), в файле будет сохранено 
уравнение (такое, как наклон линии), а также начальная и конечная точки линии. 
y=mx+b, наклон=3, начало=1, конец=25 
Векторный формат 
Рис. 7.2. Векторная графика сокращает размеры файлов за счет представления 
изображений с помощью уравнений

344 Глава 7. Анимация, звук и видео 
Поскольку файлы, сохраненные в виде векторов, малы, изображения загружа- 
ются быстрее, нежели традиционные JPEG- или GIF-изображения. Векторные 
изображения, сохраненные для использования в Flash-анимации, определяются 
как файлы SVG-изображений, или масштабируемой векторной графики (Scalable 
Vector Graphics). Размеры SVG-изображений можно изменять (делать их больше 
или меньше) во время воспроизведения анимации без потери качества изображе- 
ния. Это значит, что вы можете создавать файлы сложной Flash-анимации, кото- 
рые быстро загружаются и воспроизводятся на компьютере посетителя. 
Использование Flash вместо традиционной GIF-анимации приводит к ряду 
преимуществ: 
• Flashоперируетнебольшимиразмерамифайловизображений. Меньшиеразме- 
ры файлов векторных изображений означают более быструю загрузку анима- 
ции. 
• Flash пользуется поддержкой браузеров на различных платформах. Не имеет 
значения, пользуетесь ли вы браузером Internet Explorer или Netscape 
Navigator, операционной системой Macintosh или Windows. Подключаемые 
модули, воспроизводящие Flash-анимацию, разработаны для большинства 
Web-браузеров и распространяются совершенно бесплатно. 
• Flash позволяет изменятьразмеры изображений входе анимации. Векторные 
изображения легко масштабируются, благодаря чему ваши изображения бу- 
дут выглядеть великолепно при любых размерах. 
• Flash использует технологию потокового воспроизведения. При загрузке Flash- 
анимации посетителю не приходится ждать, пока файл загрузится полнос- 
тью. Анимация стартует сразу же, как только Web-браузер посетителя полу- 
чит достаточный объем Flash-данных для того, чтобы начать анимацию. 
• Flashобладает интерактивностью. Flash позволяет создавать интерактивные 
меню и навигационные панели, не требуя от вас опыта работы с языками 
программирования. 
• Flashинкапсулируется с JavaScript. Flash полностью совместим сJavaScript. 
Поскольку все браузеры "понимают" язык JavaScript, вы можете создавать 
еще более сложное взаимодействие между страницей и ее посетителями. 
• Flash инкапсулируется со звуком. Flash эффективно работает со звуковыми 
файлами, позволяя в одной и той же анимации объединять движение и зву- 
ковое сопровождение. 
Для разработки Flash-анимации используется приложение Flash компании 
Macromedia (рис. 7.3). На Web-сайте Macromedia доступна для выгрузки пробная 
версия Flash, с помощью которой в течение 30 дней можно создавать свою соб- 
ственную Flash-анимацию.

Глава 7. Анимация, звук и видео 345 
3 f l | 9 10 t5 ' 20 23 30 55 40 « ' Э0 53 60 « TO 75 *0 83 «0 «5 ' 
SJ?
i A 
О D 
Follow the Bouncing Ball 
А1ЁО- B;7- 
MEZ1- 
E«*«!:[ (too* 
t ' • • ' 
•> 
• . . < . . . . . . 
"I 
'1 
Jfcl 
_ J f
t 
1 *l ' 
t Меряя; Пс* 
Я ui Г 
Рис. 7.3. Приложение Flash позволяет разрабатывать и сохранять Web-страницы 
с Flash-анимацией 
Хотя Flash и является популярным средством создания анимации, конкуренты 
все же у него есть. В 1999 году компания Adobe выпустила на рынок продукт под 
названием LiveMotion. Приложение Adobe LiveMotion позволяет создавать полно- 
экранную анимацию с помощью векторной графики, подобной той, которая ис- 
пользуется в Macromedia Flash. 
Существует несколько Web-сайтов, предлагающих бесплатную Flash-анимацию, 
которую вы можете выгрузить и. использовать на своих Web-страницах: 
Extreme Flash 
Flash Kit 
freelayouts.com 
Macromedia 
http : //www. extremeflash . com/ 
http://www. flashkit.com 
http : //www. freelayouts. com/ 
http: //www. macromedia . com 
В практикуме "Создание Flash-анимации с чистого листа" далее в этой главе вы 
создадите свою собственную Flash-анимацию. 
Использование Shockwave 
Flash — не единственный Web-продукт, выпускаемый компанией Macromedia. В 
начале 90-х годов компания Macromedia разработала приложение Director, пред- 
назначенное для использования главным образом при создании интерактивного 
медиа вне Web-среды. Director позволяет дизайнерам встраивать графику, анима- 
цию звук, фильмы QuickTime и интерактивные кнопки в приложение, которое

34 6 Глава 7. Анимация, звук и видео 
пользователи могут запускать на своих компьютерах. Director был и остается ос- 
новной программой разработки такого медиа, как интерактивные компьютерные 
игры и учебные компакт-диски. 
В 1996 году Macromedia расширила возможности Director, представив 
Shockwave. Shockwave позволяет Web-дизайнерам преобразовывать фильмы Director в 

интерактивные документы, которые отображаются в Internet. Shockwave — это по- 
пулярный метод создания анимации для Internet (файлы Shockwave называются 
фильмами). Однако файлам Shockwave недостает компактного размера Flash-ани- 
маций; кроме того, создание Shockwave-фильмов требует обширных познаний в 
области языка программирования, называемого Lingo. 
Чтобы создать фильм Shockwave, вы должны сначала разработать фильм в 
Director с помощью языка программирования Lingo, а затем преобразовать фильм 
Director в фильм Shockwave. При стоимости Director около $1000 и крутизне кри- 
вой обучения, свойственной языку Lingo, Shockwave как средство создания Web- 
анимации не входит в арсенал большинства Web-дизайнеров, в особенности при 
наличии Macromedia Flash и Adobe LiveMotion, которые предоставляют вам прак- 
тически ту же гибкость и интерактивность, но за гораздо более низкую цену, не 
требуя при этом изучения языка программирования. 
Поместить Shockwave-анимацию на Web-страницу можно с помощью дескрип- 
тора <object> либо <embed>. Приведенный ниже HTML-код, например, служит 
иллюстрацией использования дескриптора <embed> для включения фильма 
Shockwave в HTML-файл: 
<embed src="shock.dcr" height="400" width="400" name="shocking" /> 
В данном примере дескриптора <embed> атрибут src определяет имя Shockwave- 
фильма (shock.dcr), который Web-браузер должен воспроизвести, а атрибуты 
width и height задают размеры "экрана" Shockwave-фильма внутри окна браузера. 
Атрибут name обеспечивает возможность передачи данных между формами и дру- 
гими объектами HTML и фильмом (подробнее об этом рассказывается ниже). 
Существует несколько Web-сайтов, предлагающих Shockwave-приложения, кото- 
рые вы можете выгрузить, дабы опробовать Shockwave. Кроме того, с Web-сайта 
Macromedia, http://www.macromedia.com/downloads, МОЖНО выгрузить 30-ДНев- 
ную пробную версию Director Shockwave Studio. Есть также несколько сайтов, 
предлагающих исходные коды Lingo-программ, используемых разработчиками для 
создания приложений: 
Sh0Ckwave. C0m http: //www. Shockwave . com/sw/home 
Shockwave-SOUnd.COm http : //www. Shockwave-sound, com 
Macromedia http://www.macromedia . com 
Когда использовать и когда 
не использовать анимацию 
Как уже упоминалось, анимация привлекает внимание, развлекает и информи- 
рует. Однако сколь бы чудесной ни была анимация, при использовании анимации 
на Web-страницах следует соблюдать и определенную осторожность:

Глава 7. Анимация, звук и видео 3 47 
• Используйте анимацию для привлечения внимания, но только не переборщите. 
Анимация захватывает внимание, но избыток ее может превратиться в про- 
блему. Если вы создаете анимацию для привлечения внимания посетителя, 
воздержитесь от использования более чем одного, возможно, двух анимиро- 
ванных объектов на каждой странице. 
• Используйте анимацию, чтобыподчеркнутьсообщениеWeb-страницы, носле- 
дитезатем,чтобыонадействительноприносилапользу.Старайтесьисполь- 
зовать анимацию, перекликающуюся со статическим содержимым страни- 
цы. Например, вносит ли вращающийся логотип в верхнем левом углу окна 
браузера должный вклад в дизайн и сообщение страницы, или же вы помес- 
тили его туда просто чтобы доказать, что вы это умеете? 
• Не используйте анимацию там, где она отвлекает внимание. Избегайте ис- 
пользования анимации, на Web-страницах, содержащих большие объемы 
текста. Анимация оказывает влияние на концентрацию внимания пользова- 
теля и отвлекает его от чтения текста. Анимация привлекает внимание, од- 
нако избыток анимации мешает посетителю сосредоточиться. 
• Не используйте анимацию ради анимации. Поскольку файлы анимации име- 
ют большие размеры и, следовательно, им требуется больше времени на заг- 
рузку и отображение, используйте анимацию только там, где она действи- 
тельно вносит в страницу весомый вклад. 
Помните: использование анимации - это "палка о двух концах". С одной сто- 
роны, анимация привлекает внимание и удерживает посетителей на вашем Web- 
сайте. С другой стороны, избыток анимации способен отвлечь внимание посети- 
теля сайта от вашего основного сообщения. Добейтесь равновесия между 
анимацией и целью Web-страницы. Спросите себя: дополняет ли анимация то, 
что вы хотите сказать, или же это анимация просто ради анимации? 
Ra6ora со звуком в Internet 
Если вы не верите в то, что звук — составляющая визуального впечатления, по- 
пробуйте посмотреть телевизионное шоу, выключив звук. Хотя для рекламных ро- 
ликов такая практика вполне приемлема, телевидение без звука создает лишь по- 
ловину впечатления (правда, многие сказали бы, что более важную половину). 
Причем внимание посетителя к экрану приковывают не только голоса персона- 
жей: впечатление в целом включает в себя еще и музыкальный фон. Как, напри- 
мер, вы бы узнали, что сейчас должно случиться что-нибудь плохое, без фоновой 
музыки, предупреждающей вас (зрителя) о грядущей опасности? 
Точно так же, как звук, сопровождающий телепередачу, помогает "задать на- 
строй" аудитории, вы можете усилить впечатления посетителей вашего сайта, до- 
бавив к тексту, графике и анимации звук. Продуманный саундтрек поможет вашим 
посетителям получить максимум впечатлений от страницы, задавая тон, способ- 
ствующий "погружению" в содержимое страницы и удерживая их на Web-сайте. 
Однако точно так же, как хороший саундтрек способствует тому, что посетитель 
будет "поглощен" страницей, непродуманный саундтрек в состоянии отпугнуть по-

3 48 Глава 7. Анимация, звук и видео 
сетителей. Например, музыка, постоянно играющая на фоне Web-страницы, отвлека- 
ет внимание, если только она не имеет прямого отношения к содержимому — как, 
скажем, последний компакт-диск Бритни Спирс на посвященном ей Web-сайте. 
Используя на своем Web-сайте музыку, позаботьтесь о получении разре- 
шения артиста или звукозаписывающей компании, которые являются авторами музыки. 
Так 
же, как и для музыки, это справедливо и для речей. Удостоверьтесь, что у вас 
есть право на 
использование материала перед тем, как опубликовать его на Web-сайте. 
Хотя сегодня звук стал в Internet делом привычным, Всемирная Паутина долго 
оставалась безмолвной средой. В 1996 году, когда коммерческие браузеры, такие 
как Netscape Navigator, стали доступнее широкой публике, появился спрос на про- 

фессиональных Web-дизайнеров, обладающих высокой квалификацией в области 
разработки медиа-содержимого. 
Поначалу существующие звуковые форматы позволяли создавать файлы с на- 
столько большими размерами, что на загрузку шестидесятисекундного музыкаль- 
ного фрагмента требовалось несколько минут, а то и часов. Обычно же посетители 
Web-сайта ожидают получить результат в течение нескольких секунд. 1 
В конце 1996 года компания RealNetworks создала первую версию RealAudio. В 
RealAudio была применена "потоковая" технология, позволяющая Web-браузерам 
загружать и проигрывать звуковые файлы прямо на компьютере посетителя. Техно- 
логия потокового воспроизведения позволяет воспроизводить музыку или речь в то 
время, пока браузер продолжает загружать файл. В обычной ситуации Web-браузер 
загружает начало аудиофайла и начинает воспроизведение уже загруженной части 
файла, в то же время продолжая извлечение остальной его части. Таким образом, 
по- 
сетители могут прослушивать длинные аудиофрагменты, не дожидаясь (в течение 
дол- 
гого времени), пока большой аудиофайл будет загружен полностью. 
С RealAudio конкурирует QuickTime компании Apple, который функционирует 
подобно RealAudio. На многих Web-сайтах используются оба формата — и 
RealAudio, и QuickTime — и большинство пользователей уже выгрузили соответ- 
ствующие подключаемые модули. Ниже приводится несколько реком*ендаций по 
использованию звука в Internet: 
• Используйте звук для передачи идей посредством диалогов и дикторской речи. 
• Используйте звук для улучшения навигации по Web-сайту. Например, ис- 
пользуйте звук щелчка в сочетании с кнопкой с эффектом "переката" (то 
есть кнопкой, меняющей свой вид при наведении на нее курсора мыши 
(rollover button)). 
Используйте фоновую музыку (когда это уместно), чтобы задать настрой 
Web-страницы. Например, чтобы задать настрой для Web-сайта, посвящен- 
ного жизни в океане, можно проигрывать шум прибоя, мягко накатывающе- 
гося на берег. 
Используйте звук, чтобы увеличить объем онлайновых продаж аудиозапи- 
сей. Например, предоставьте посетителям возможность прослушать фраг- 
мент новой песни перед тем, как ее купить.

Глава 7. Анимация, звук и видео 3 49 
Использование звука внесло изменения в дизайн и конструкцию Web-сай- 
тов. Например, сейчас на некоторых сайтах ведется радиовещание (называется 
это webcast — созвучно broadcast (вещать, передавать теле- или радиосигналы)). 
Webcast используются для всего чего угодно — от музыки до прямых трансляций 
президентских речей и игр бейсбольной высшей лиги. Время идет, технологии 
развиваются, и Web-дизайнеры все больше и больше понимают, сколь велика роль 
звука вместе с остальным содержимым в создании настроя и удержании внимания 
Web-посетителя. Тысячи сайтов в Web вещают в прямом эфире. В качестве приме- 
ров можно назвать National Public Radio (http://www.npr.com) и MSNBC 
(http://www.msnbc.com). 
1Д 
Приняв решение включить в свой Web-сайт музыку или звуки, снабдите 
сайт кнопкой, которая позволит пользователю быстро выключить музыку или звук. 
Многих 
пользователей раздражает, когда сотрудник за соседним столом не может сразу же 
упра- 
виться с громкостью на своем компьютере. 
Точно так же, как графические файлы сохраняются с применением специфи- 
ческих форматов, подобных JPEG и GIF, аудиофайлы имеют свои собственные 
форматы. Общепринятые форматы звуковых файлов, которые хорошо работают на 
платформе Macintosh, включают в себя AIF, AIFF, SND, AU, МРЗ и MIDI (только 
для музыки). На платформе Windows воспроизводятся форматы WAV, AU, SND, 
МРЗ и MIDI (только для музыки). Как видите, некоторые из форматов (AU, SND, 
МРЗ и MIDI) могут использоваться как в Macintosh, так и в Windows. Помимо 
этих форматов, формат MOV, который используется QuickTime, может применять- 
ся при форматировании музыки для обеих платформ. Кроме того, с помощью 
Windows Media Player (версии которого существуют и для Macintosh, и для PC) 
пользователи могут проигрывать файлы формата Windows Media Format (WMF). 
Для записи звука в Windows можно воспользоваться встроенной программой 
звукозаписи (Sound Recorder) или же установить и пользоваться приложением для 
работы с аудиоданными, таким как Sound Forge. Обе названные программы будут 
записывать звук, используя для этого формат WAV (исконно присущий Windows) и 
дадут вам возможность сохранить файл в нескольких различных форматах. Чтобы 
записать звук, работая на Macintosh, воспользуйтесь встроенной звукозаписываю- 
щей программой или установите приложение для работы с аудиоданными, напри- 
мер, Sound Edit Pro. Обе программы будут записывать звук с использованием AIFF 
(исконно присущий Macintosh) и позволят вам сохранить файл в нескольких раз- 
личных форматах. 
Чтобы преобразовать аудиофайл из одного формата в другой, можно ис- 
пользовать такую программу, как Cool Edit, которая доступна для выгрузки по 
адресу 
http://www.syntrillium.com. 
Существует несколько Web-сайтов, позволяющих бесплатно выгружать аудио- 
фрагменты, которые вы затем сможете встраивать в собственный Web-сайт:

3 5 0 Глава 7. Анимация, звук и видео 
Midi-World http://www. midi-world.net/ 
Al Free Sound Effects http://www.alfreesoundeffects.com/ 
TheFreeSite.COm http: //www. thefreesite . com/Free__Sounds/Free-WAVs/ 
Включение звука в Web-страницу 
Чтобы включить на Web-страницу простой фоновый звук, можно поместить 
дескриптор <bgsound> в заголовочную часть документа, или же сделать это с по- 
мощью дескриптора <embed> в основной части Web-страницы, как показано ниже: 
<head> 
<bgsound src="music.au" /> 
</head> 
<body> 
<embed src="music. au" autostart="true"X/embed> 
</body> 
Эти дескрипторы представляют собой минимальный способ включения звуко- 
вого файла на Web-страницу, созданную на основе HTML. Поскольку дескриптор 
<embed> будет воспроизводиться и в Netscape Navigator, и в Internet Explorer, 
луч- 
ше пользоваться для вставки звуковых файлов в Web-страницы именно им. В при- 
веденных выше примерах файл music.au будет проигран один раз и повторяться 
не будет. Чтобы звук постоянно повторялся, добавьте в дескрипторы <bgsound> и 
<embed> следующие атрибуты (hidden, loop, autostart): 
<head> 
<bgsound src="music.au" hidden="true" loop="true" autostart="true" /> 
</head> 
<embed src="music.au" hidden="true" loop="true" autostart="true"X/embed> 
Для чего-нибудь, помимо простого проигрывания звукового файла, посетите- 
лям вашего сайта понадобится решение на основе подключаемого модуля, напри- 
мер, Flash, QuickTime или RealAudio, как говорилось выше. 
В спецификации HTML сказано, что предпочтительным способом внедрения зву- 
ка в Web-страницу является применение дескриптора <object>. Однако до тех пор, 
пока все основные браузеры не будут поддерживать дескриптор <object>, лучше 
про- 
сто продолжать пользоваться дескриптором <embed>, как было показано выше. 
Встраивание видео на Web-страницу 
Создание видео для воспроизведения на Web-страницах — одна из наиболее 
быстрорастущих областей Web-дизайна. Более того, с появлением новых техноло- 
гий практически каждый может создать свою настольную видеостудию. Если вы 
планируете создавать свое собственное видео, приведенные ниже заметки помогут 
вам получить качественный результат: 
Планируйте. Всегда планируйте видеосъемку заранее. Один из способов это 
сделать — набросать основные разделы видеосъемки с помощью раскадров- 
ки. Раскадровка содержит небольшие описания кадров: где происходит 
съемка, кто снимается в ролике, что необходимо (реквизит, оборудование) и 
какие идеи должен этот фрагмент видеоролика передать зрителю.

Глава 7. Анимация, звук и видео 
• Уменьшите движение камеры. Снимая видеоролик, сводите движения камеры 
к минимуму. Агрессивное движение и "наезды" камеры выглядят не очень 
хорошо, к тому же они плохо транслируются, будучи сжатыми в формат, 
пригодный для Web. Многие программы сжатия видеоданных сокращают 
размер файла путем повторения информации, содержащейся в одном кадре, 
в следующем. Если вы постоянно двигаете камерой, программе сжатия нече- 
го копировать; следовательно, избыточное движение не только сбивает с 
толку зрителя, но и является причиной большего размера файла готового 
ролика. 
• Следите за фоном. Избегайте высококонтрастных или чрезмерно ярких фо- 
нов. Слишком яркие фоны могут вызвать появление в изображении ореолов 
вокруг объектов на переднем плане. Кроме того, видеокамеры могут компен- 
сировать яркий фон, делая объекты на переднем плане излишне темными. ' 
• Не усложняйте фон. При загроможденном заднем плане изображения на пе- 
реднем плане могут сливаться с задним планом. Кроме того, простой зад- 
ний план (вроде однотонных задников) помогает программе сжатия умень- 
шить размер файла готового ролика. 
• Используйте хорошее освещение. Хотя многие видеокамеры позволяютсни- 
мать при низком освещении, сделанная при низком освещении запись выг- 
лядит тусклой, а готовый ролик не очень хорошо транслируется в Internet. 
Пользуйтесь хорошим освещением, чтобы элементы видео были четко раз- 
личимы. 
• Не забывайте о фокусировке. Следите за тем, чтобы видео было хорошо сфо- 
кусировано. При сжатии готового клипа некоторая часть исходного качества 
ролика будет принесена в жертву для создания файла меньшего размера. 
Если исходное изображение было слегка не в фокусе, сжатый Internet-ролик 
от этого только ухудшится. 
Выполнение этих несложных действий при создании видеоролика обеспечит 
вам максимальное качество его готовой Internet-версии. 
Монтаж видеоролика 
После съемки видео вам понадобится программа для видеомонтажа, чтобы со- 
брать отдельные видеофрагменты в готовый ролик. Video Wave от MGI Software — 
недорогое ($99) приложение, позволяющее брать видеофрагменты из нескольких 
файлов и комбинировать их. Вы даже сможете добавлять специальные эффекты, 
такие как субтитры, звуковые эффекты и голос за кадром. Если же брать повыше, 
то такие программы, как Adobe Premiere и iMovie, смогут предоставить вам больше 

возможностей; они включают в себя даже модуль для аудиомонтажа, что можно 
видеть на рис. 7.4. 
Хотя применение видео в Internet постоянно растет, способность Internet быст- 
ро выгружать данные, подобные видеофайлам, (то есть, пропускная способность), 
явно не поспевает за технологией.

352 Глава 7. Анимация, звук и видео 
Рис. 7.4. Такие программы, как Adobe Premiere, позволяют создавать целые 
видеоролики из одного 
или нескольких видеофрагментов и даже добавлять специальные эффекты, титры и 
звук 
На данный момент, если, конечно же, ваши посетители не согласны мириться 
с длительной загрузкой, видеоролики должны быть короткими и использовать не- 
большие зоны просмотра при низком качестве изображения и звука. Однако при 
всем этом видео файлы находят в Internet ряд отличных применений: 
• Используйте видео для рекламы телевизионных шоу и фильмов: в этих от- 
раслях традиционно использовались анонсы (короткие отрывки передач или 
фильмов). 
• Используйте видео, чтобы дать посетителям впечатление о себе. Например, 
короткий видеоролик усилит впечатление от резюме, размещенного в 
Internet. Так потенциальные работодатели получат шанс увидеть то, что они 
покупают. 
• Демонстрационные ролики (product demos) и "обзорные" ролики (walkaround 
video) полезнее стационарных фотографий и помогают потенциаль- 
ным покупателям действительно увидеть товар. Маркетинговые сайты, та- 
кие как http://www.toyota.com, дают покупателям легковых и грузовых 
автомобилей возможность на самом деле обойти автомобиль с помощью 
программ виртуальной реальности, например, программы моделирования 
виртуальной реальности компании Apple (www.appie.com). 
Конечно же, использование какой-либо из этих идей для создания видеороли- 
ка предполагает, что у посетителей вашего Web-сайта установлены подключаемые 
модули, необходимые для выгрузки и просмотра видео. К качестве примеров ус- 
пешного встраивания видео можно посоветовать следующие сайты:

Глава 7. Анимация, звук и видео 353 
MTV 
ESPN 
АМС Theatres 
Warner Brothers 
http://www.mtv.com/ 
http://www.espn.com 
http://www.amctheatres.com 
http://www.warnerbros.com 
Вопросы совместимости видео в Web 
• Если вы планируете вставить в свой Web-сайт видеоролик, имейте в виду, что 
не каждый посетитель сможет просмотреть ваш шедевр. Для просмотра видеоро- 
ликов необходим Web-браузер с подключаемым модулем, дающим возможность 
просмотра видео. И у RealAudio, и у QuickTime есть модули, позволяющие Web- 
браузерам воспроизводить видеоролики. Однако загрузка и установка модуля тре- 
бует времени и определенного терпения со стороны посетителя. Большинство оп- 
росов свидетельствуют, что если посетителям придется перед тем, как просмотреть 

видеоролик, остановиться и выгрузить подключаемый модуль, большинство из 
них попросту покинут сайт. 
Вместо того чтобы вынуждать посетителей выгружать программное обеспече- 
ние, лучше предоставить им возможность предварительного просмотра видеороли- 
ка — например, в виде серии небольших стоп-кадров, и дать возможность выгру- 
зить программное обеспечение, необходимое им для просмотра ролика. Если 
посетитель знает, чего ожидать, он может согласиться затратить некоторое время 
ради возможности просмотреть ваш видеоролик (см. рис. 7.5). 
3 ««com» to Oltt» h».S«i* 
О D' Й й Э В- 
H 
.
••• 
Click on a video clip to view the movie 
SJDffl 
Рис. 7.5. Использование стоп-кадров побуждает пользователей загрузить 
видеоролик

354 Глава 7. Анимация, звук и видео 
Видео: потоковое воспроизведение или выгрузка? 
Вставляя в Web-страницу видеоролик, вы можете выбрать один из двух вариан- 
тов воспроизведения ролика: потоковое воспроизведение или воспроизведение 
после полной выгрузки. Потоковое видео воспроизводится при помощи подклю- 
чаемого модуля браузера, такого как RealAudio или QuickTime; воспроизведение 
начинается до того, как видеофайл будет полностью выгружен. Обычно воспроиз- 
ведение потокового видео начинается тогда, когда выгружена часть файла, доста- 
точная для того, чтобы продолжать воспроизведение в процессе загрузки осталь- 
ной части файла. Одна из проблем, связанных с потоковыми видео, заключается в 
том, что видеофайл должен быть сжат До небольших размеров, чтобы он мог выг- 
ружаться, пока он воспроизводится. Поскольку некоторые виды сжатия видеодан- 
ных применяют технологию сжатия с потерями (сжатие посредством удаления ин- 
формации), видеоизображение ухудшается, что приводит к низкому качеству 
воспроизведения. Кроме того, в то время как браузер (точнее, модуль воспроизве- 

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

циях, имеющих место при Web-дизайне, дополнительные усилия, затраченные на 
то, чтобы предоставить посетителям возможность выбора, помогают создать луч- 
ший и более дружественный к пользователю Web-сайт. 
Один из способов включить видеофайл в Web-страницу — с помощью дескриптора 
<а>, который позволяет посетителю выгрузить видеофайл, как показано ниже: 
<а href="company.avi">Щелкните на видеофрагменте, чтобы посмотреть 
ролик</а> 
Использование виртуальных экскурсий 
Многие Web-сайты предлагают виртуальные экскурсии, позволяющие 
пользователям пройтись по домам, выставленным на продажу, проверить види- 
мость с того или иного места на стадионе, покупая билеты на спортивные со- 
стязания (http://kcchiefs.com/fanfair/v_arrowhead.asp), Прогуляться ПО 
улицам города, например, Ванкувера (http://www.virtuaiiyvancouver.com/),

Глава 7. Анимация, звук и видео 355 
осмотреть достопримечательности, например, Пирамиды (www.pbs.org/wgbh/ 
nova/pyramid/explore/khufuall.html), И еще МНОГО чего. Чтобы ОТПравиТЬСЯ 
в виртуальную экскурсию, вам обычно понадобится подключаемый модуль 
QuickTime VR для браузера, обзавестись которым можно по адресу http:// 
www.appie.com/quicktime. На рис. 7.6, например, показана виртуальная экс- 
курсия по Нью-Йорку, которая позволит вам сравнить различные районы горо- 
да, как они выглядели в 1907 году с тем, как они изменились к 1999 году 
(http://www.pbs.org/wnet/newyork/hidden/contents.html). 
Г -Pte E* • View F^wtas 
Back . :; 
(«) <*H 
NEW YORK 1- / 
| A DOCUMENTARY ИШ j K 
Wm 
^ ^ 
IP'S» 
Trafc 
S 
« _ 
Я . " 
)7 - 
L
Рис.
t j e i p • • ' .' •' • • • • 
oit /hidden/contents html 
i ' j 4 a JJ 
op * Refiesh Home - Search l-evoite^ 
Searcb Pro8F«msAZ TVSuh 
Hidden New York 
... 
When a was DuSt ж the mi of the nineseenih 
«Kt&Hy, О^далаиа С«сй* vss& e&iats^ it) whs 
History' Met 
dales Shop 
•vas 
CCWktsfed ih» outjWrt? ей New Vtn* Qiy. Мс^и, Й8 
SJMCS «лет Sftiadwsy, Селив! PaA We^. ffili 
7.6. Виртуальная экскурсия по 
«*bte 
: f "S 
Нью-Йорку 
•d 
Pfhl 
MeoAen 
..п.., Я 
В i-ton* 
Q 
I 
Чтобы создать виртуальную экскурсию в панораме 360 градусов, разработчики с 
помощью такого инструмента, как Apple QuickTime VR Authoring Studio, "сшивают" 
изображения вместе в форме сферы. В общем случае для создания 360-градусной 
панорамы вам понадобится как минимум шесть фотографий (вид спереди, сзади, 
слева, справа, сверху и снизу). QuickTime VR Authoring Studio включает в себя 
Panorama Stitcher - инструмент, сшивающий изображения в форме сферы. Вели- 
колепные виртуальные экскурсии предлагают следующие Web-сайты: 
The Louvre Museum (Лувр) 
http://www.louver.or.jp/louver/QTVR/anglais/index.htm 
Submarines (Подводные лодки) 
http://www.pbs.org/wgbh/nova/subsecrets/ 
Virtual Earth (Виртуальная Земля) h t t p : //www. virtuaiearth. com 
Apple's Cubic VR Gallery (Кубическая VR-галерея Apple) 
http://www.apple.com/quicktime/products/gallery/

356 Глава 7. Анимация, звук и видео 
В зависимости от продукции или темы, которой посвящен ваш сайт, предос- 
тавление посетителям возможности ознакомиться с содержимым посредством вир- 
туальной экскурсии может оказаться очень эффективным способом преподачи ин- 
формации. 
В заключение хотелось бы сказать, что содержимое было и всегда будет цент- 
ром внимания посетителя Web-сайта, будь то содержимое текстом, неподвижной 
графикой, анимацией, аудио, видео или комбинацией всего перечисленного. Со- 
держимое является причиной, по которой посетитель вошел в Internet, и содержи- 
мое — всегда первое, что ищет на Web-странице посетитель. Качественное содер- 
жимое — наиболее важный аспект Web-дизайна. Не найдя качественного 
содержимого, посетители отправятся на другие сайты в поисках того, что им нуж- 
но. Следовательно, анимация, видео и аудио должны поддерживать содержимое 
Web-сайта, а не просто доказывать, что вы "это умеете". 
Помните, что у Web-пользователей есть цель, и что особым терпением они не 
обладают. Всегда разрабатывайте свои Web-страницы так, чтобы они быстро дава- 
ли ответы, которые ищут посетители. Если вам не удастся сделать именно это — 
предоставить качественное содержимое — все видео, анимация и аудио в мире не 
смогут удержать посетителей на вашем Web-сайте. 
Создание GIF-анимации с чистого листа 
GIF-анимация — наиболее распространенный в Internet вид анимации. GIF- 
анимация состоит из отдельных кадров, или ячеек, каждая из которых представля- 
ет собой один-единственный фрагмент анимации. Хотя GIF-анимации могут со- 
стоять из изображений любого типа, обычно это аппликация, мультипликация 
или текст. / 
Например, для создания анимированного шагающего персонажа обычно требу- 
ется 8—10 отдельных ячеек (четыре-пять ячеек на шаг). Каждая из ячеек представ- 

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

Глава 7. Анимация, звук и видео 357 
ПРАКТИКУМ 
Чтобы создать отдельные ячейки вроде тех, которые были показаны на рис. 7.7, вы 

можете набросать их на бумаге и затем отсканировать, или же вы можете создать 
ячейки с помощью любой из множества программ редактирования изображений, 
например, Photoshop или ImageReady. В данном примере отдельные ячейки были 
созданы путем рисования каждой из них на бумаге и сканирования их в отдельные 
слои в Adobe Photoshop. 
Закончив работу над ячейками анимации, вы должны смонтировать их в про- 
грамме создания GIF-анимации. Несколько условно-бесплатных программ для 
Windows И Macintosh МОЖНО наЙТИ ПО адресам http://www.shareware.com И 
http://tucows.com (и не забудьте, что за условно-бесплатные программы нужно 
платить). GIF Construction Set, например, предлагается за весьма скромную цену 
— 
$20. Другие программы, подобные Adobe ImageReady, имеют больше функций, но 
стоят дороже. ImageReady поставляется вместе с Adobe Photoshop, который стоит 
около $600. На рис. 7.8 показаны отдельные ячейки ходьбы, открытые в Adobe 
Photoshop. 
jElli**~.Erii 
, t t « / a i « » M . ' ~тяж/ю<т,<* ч 
toe» DO OJI O+ Dl 
г; 
w4^^4'a,'." 
One- вж.. !
^ \ 
Int.- 
/ • ' ' 
.'ft 
UMMiBSMV 
I XV 
Л- О MR' 
" * 
г 
Mfpra 
,фяк 
rat» О 
Ояс- 
ДЖ1...ЯГ- <ШЗ 
ш^
L*y«f & 
пг> 
Рис. 7.8. Приложение ImageReady позволяет использовать в анимационной 
последовательности отдельные слои изображения

358 Глава 7. Анимация, звук и видео 
Смонтировав все ячейки в программе создания анимации, сохраните анимаци- 
онную последовательность в файле с расширением .gif. В данном примере файл 
был сохранен какwaiking.gif. Наконец, с помощью дескриптора <img> вставьте 
готовую GIF-анимацию (то есть файл с расширением .gif) в HTML-код Web- 
страницы, как показано ниже: 
<html> 
<head> 
<title>npocTa* GIF-araiMa4HH</ title> 
</head> 
<body> 
<center> 
<img src="walking.gif" alt="Animation" width="50" height="120" /> 
</center> 
</body> 
</html> 
В данном примере атрибут src в дескрипторе изображения дает Web-браузеру 
указание выгрузить файл GIF-анимации с именем waiking.gif. 
Поскольку GIF-анимация поддерживается большинством Web-браузеров, созда- 
ние файла GIF-анимации и вставка его в исходный HTML-документ почти навер- 
няка даст анимацию, которая будет воспроизводиться на Web-страинице. В тех 
редких случаях, когда браузер посетителя не поддерживает GIF-анимацию, посе- 
титель будет видеть неподвижный кадр (обычно первую ячейку анимации). 
Управление GIF-анимацией с помощью внутренних 
параметров 
Когда вы создаете и сохраняете GIF-анимацию, не изменяя параметры анима- 
ции, приложение сохраняет файл с использованием своих предопределенных па- 
раметров. Эти параметры обычно дают Web-браузеру указание отображать новую 
ячейку, или кадр, каждую десятую долю секунды, и постоянно повторять анима- 
ционную последовательность. Например, если вы создаете GIF-анимацию враща- 
ющегося логотипа, логотип будет продолжать вращаться, отображая новый кадр 
анимации каждую десятую долю секунды, в течение всего времени, пока Web-стра- 
ница будет находиться на экране. 
Хотя для некоторых анимаций параметры по умолчанию — именно то, что нуж- 
но, лучше всегда настраивать параметры GIF-анимации при сохранении файла. 
Обратите внимание, что параметры, управляющие воспроизведением GIF-анима- 
ции, сохраняются внутри GIF-файла, а не в виде дескриптора или атрибута в 
HTML-коде Web-страницы: 
<img src="neon.gif" width**"75" height="75" /> 
В данном примере дескриптор <img> заставляет Web-браузер выгрузить файл 
GIF-анимации с именем neon.gif. Параметры, управляющие воспроизведением 
анимации, содержатся в самом файле neon.gif. Выгрузив файл анимации, Web- 
браузер извлекает и исполняет инструкции по воспроизведению, которые он нахо- 
дит в файле.

Глава 7. Анимация, звук и видео 359 
ПРАКТИКУМ 
Предположим, вы хотите создать для своей Web-страницы неоновую вывеску. Для 
этого вам потребуется открыть графический элемент в программе редактирования 
изображений, например, Photoshop, и с помощью этой программы создать два 
GIF-изображения. Первое изображение представляет собой горящую неоновую 
вывеску, а второе — вывеску потухшую. Например, изображение на рис. 7.9 было 
создано в Photoshop и отрыто в ImageReady. 
Рис. 7.9. Две ячейки для анимации неоновой вывески, открытые в ImageReady 
Все программы создания Web-анимации (например, ImageReady) дают возмож- 
ность изменить число кадров, отображаемых в секунду (frames per second — fps; 
кадр/с) и число циклов (то есть число повторений анимации). 
• Число кадров в секунду (кадр/с). В Internet частота смены кадров варьируется 
между 1 и 30 кадрами в секунду. Чтобы анимация не казалась "дерганой", 
для создания плавного движения анимированного GIF-изображения следует 
задавать как минимум 10 кадр/с. Однако в случае неоновой вывески вам, по- 
жалуй, стоит уменьшить число кадров в секунду, чтобы создать эффект "мер- 
цания", свойственный неоновой рекламе. 
• Число циклов. Это число определяет, сколько раз Web-браузер проходит че- 
рез ячейки анимации. В качестве числа циклов может выступать "вечно" (не 
прекращать повторение анимации) или любое число от 1 до 30 000. 
Число кадров в секунду и число циклов анимации зависят от типа анимацион- 
ного эффекта, который вы пытаетесь создать. Например, поскольку неоновая вы- 
веска не движется, как типовая анимация, а просто вспыхивает и гаснет, 
установи-

360 Глава 7. Анимация, звук и видео 
те число кадров в секунду равным одной секунде для изображения горящей вывес- 
ки, и половине секунды для изображения потухшей вывески. Кроме того, назна- 
чение вывески — привлечь внимание к Web-странице, а не раздражать посетителя 
постоянно. Следовательно, число циклов нужно установить равным 5 циклам, как 
показано на рис. 7.10, чтобы спустя некоторое время вывеска перестала мигать. 
ш Set loop Count 
Иау: J5 j times 
Cancel 
Рис. 7.10. Установка числа циклов равным 5 
В некоторых программах создания Web-анимации есть частота смены кадров, 
называемая No Delay (без задержек) или Zero Seconds (ноль секунд). Всегда зада- 

вайте в качестве частоты смены кадров GIF-анимации определенный период в 
виде числа секунд или долей секунды. Отмечая опцию No Delay или Zero Seconds, 
вы даете Web-браузеру указание "пролистывать" кадры анимации как можно быст- 
рее. Следовательно, вы позволяете Web-браузеру и скорости процессора машины 
посетителя определять, как будет выглядеть ваша анимация. В результате у одних 
посетителей анимация будет выглядеть великолепно, а на экранах других она ока- 
жется неразличимым движущимся пятном. 
При сохранении анимации в дисковый файл программа создания GIF-анима- 
ции сохраняет параметры числа циклов и кадров в секунду в файле вместе с графи- 

ческими изображениями, составляющими анимационную последовательность. От- 
крыв изображение, браузер регулирует воспроизведение анимации в соответствии 
с параметрами, заданными во время сохранения файла. 
Когда Web-браузер открывает, например, файл neon.gif, вывеска загорается на 
одну секунду и гаснет на полсекунды. Повторив эту последовательность включе- 
ний/выключений пять раз, браузер останавливает анимацию на последнем кадре 
последовательности. Обратите внимание, что последний кадр в последовательнос- 
ти — это горящая, или "включенная" неоновая вывеска. Следовательно, когда ани- 
мация остановится, она остановится на "включенной" вывеске. 
Создание баннера с помощью GIF-анимации 
Одно из самых быстрых средств привлечения внимания посетителей к вашему 
Web-сайту — это движение. Специалисты в области рекламы это знают, потому-то 
они и создают текстовые и/или графические изображения, называемые баннера- 
ми. На коммерческих Web-сайтах баннеры обычно располагаются в верхней части 
Web-страниц, поскольку это первое место, куда обращается взгляд посетителя пос- 

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

Глава 7. Анимация, звук и видео 361 
Чтобы вставить в Web-страницу баннер, его необходимо создать, например, с 
помощью Flash. Однако для этого необходимо, чтобы в браузере пользователя был 
установлен модуль, воспроизводящий Flash-анимацию. Проще будет создать и со- 
хранить баннер с анимацией в формате GIF. 
ПРАКТИКУМ 
Начните с создания нового файла в программе редактирования изображений, на- 
пример, Photoshop. Ширина баннера должна основываться на ширине Web-стра- 
ницы. Предположим, например, что ширина Web-страницы — 800 пикселей. Тогда 
можно создать отдельные кадры баннера шириной 750 и высотой 75 пикселей. 
"^ Стандартный размер рекламного баннера в Web составляет 468x80 пикселей. 
Поскольку в данном примере ширина Web-страницы составляет 800 пикселей, 
750-пиксельный баннер не будет загромождать левую и правую границы окна бра- 
узера. В данном примере отдельные кадры анимации создают иллюзию огней, 
вспыхивающих и гаснущих по периметру баннера (см. рис. 7.11). 
\ZICI4" I nnr/nn rtnr/ Hnn'c 1 
•••••••••*•••••••••»••! Visit London and Paris 1 • 
50% off all round trip airfares A J 
Обратите внимание на то, что цвета - разные 
Рис. 7.11. Пример баннера в виде GIF-анимации 
Чтобы завершить анимацию, откройте отдельные кадры в программе создания 
GIF-анимации (например, ImageReady или GIF Construction Set) и установите чис- 
ло кадров в секунду и число циклов анимации. В данном примере вам нужно от- 
крыть GIF-изображение в GIF Construction Set, задать частоту смены кадров рав- 
ной 0.5 секунды, а число циклов — бесконечному воспроизведению, как показано 
на рис. 7.12. 
Чтобы поместить анимированный GIF-файл на Web-сайт, используйте HTML- 
код, аналогичный показанному ниже: 
<html> 
<head> 
<title>IIpHMep 6aHHepa</title> 
</head> 
<body> 
<center> 
<img src="banner.gif" width="750" height="75" /> 
</center> 
<!-- **** Остальная часть Web-страницы**** — -> 
</body> 
</html>

362 Глава 7. Анимация, звук и видео 
Рис. 7.12. С помощью программы GIF Construction Set задайте частоту смены 
кадров 
и число циклов для GIF-графики 
В данном примере атрибут src дескриптора <img> дает Web-браузеру указание 
выгрузить файл GIF-анимации (banner.gif), а начальный и конечный дескрипто- 
ры <centerx/center>, заключающие в себе дескриптор <img>, заставляют Web- 
браузер отцентрировать изображение в верхней части страницы. Когда Web-брау- 
зер загружает страницу, анимация создает иллюзию мерцающих огней (каждые 
полсекунды) по краям баннера, и повторяется бесконечно. 
Баннер можно сделать функциональным, превратив его в гиперссылку (ссылку, 
на которой пользователь может щелкать мышью). Например, когда посетители ва- 
шего Web-сайта щелкают на баннере, он перенаправляет их на Web-сайт, на кото- 
ром предлагается товар или услуга, рекламируемые баннером. Чтобы превратить 
баннер из предыдущего примера в гиперссылку, поместите дескриптор <img> в код 
между начальным и конечным дескрипторами привязки (<ах/а>), как показано 
ниже: 
<а href="htttp://www.buyit.com/index.html" 
<img src="banner.gif" width="750" height=M75" border="0" /> 
В данном примере, когда посетитель вашего Web-сайта выполняет щелчок на 
баннере, атрибут href дескриптора <а> дает Web-браузеру указание перейти на 
Wd>CaHT http://www.buyit.com И Загрузить Web-СТраНИЦу index.html. 
Поскольку гиперссылки идентифицируются подчеркиванием (текста) или гра- 
ницей вокруг графического элемента (дизайнеры называют этой чертой {stroke)), 
мы добавили атрибут border с нулевым значением, чтобы браузер не обводил бан- 
нер чертой (по умолчанию черта вокруг графического файла имеет голубой цвет). 
Кроме мерцающих огней, баннер может включать в себя движущийся текст, 
вращающиеся логотипы и даже неподвижные изображения, сочетание которых со-

Глава 7. Анимация, звук и видео 363 
здает иллюзию слайд-шоу. На рис. 7.13 показан пример использования движуще- 
гося текста, где СЛОВа Follow me to the great bargains (За мной - к вы- 
годным сделкам!) движутся слева направо по баннеру. Поскольку движущийся 
текст трудно читается на экране, используйте крупный шрифт, чтобы посетителю 
было проще разобрать слова. 
Star Credit Union 
, Receive the lowest rates on home loans from the professionals 
Follow me to qreat bargains 
Star Credit Union 
|j- Receive the lowest rates on home loans from the professionals 
Follow me to great bargains 
Star Credit Union 
s Receive the lowest rates on home loans from the professionals 
Follow me to gretft bargains 
Star Credit Union 
Receive the lowest rates on home loans from the professionals 
Follow me to great bargains 
Рис. 7.13. GIF-анимация создает иллюзию слов, движущихся от левого края баннера 
к правому 
Создание плавных переходов между кадрами 
GIF-анимации с помощью построения 
промежуточных изображений 
В GIF-анимации иллюзия движения создается за счет пролистывания серии 
неподвижных изображений. Каждое изображение — это отдельная часть всей ани- 
мационной последовательности. Например, чтобы создать GIF-анимацию собаки, 
виляющей хвостом, вам потребуется создать несколько GIF-изображений собаки. 
В каждом изображении хвост собаки находится немного выше или ниже, чем в 
предыдущем изображении последовательности. Когда браузер воспроизводит ани- 
мацию - то есть когда браузер отображает изображения друг за другом в быстрой 
последовательности — посетитель видит иллюзию движения (виляющий хвост). 
В большинстве анимационных последовательностей иллюзия движения дости- 
гается путем резкой смены одного кадра анимации на другой. Однако в некоторых 
случаях вам может понадобиться, чтобы переход от одного кадра анимации к дру- 
гому был плавным, а не резким. 
Предположим, например, вы создаете неоновую вывеску, используя для этого 
два GIF-изображения. Одно изображение - горящая неоновая вывеска, второе — 
потухшая. Отображая изображения быстро одно за другим, вы можете создать ил- 
люзию мерцающей неоновой вывески.

364 Глава 7. Анимация, звук и видео 
ПРАКТИКУМ 
Чтобы неоновая вывеска пульсировала (вместо того, чтобы загораться и гаснуть), 
применяетсятехнологияанимации,называемаяпостроениемпромежуточныхизоб- 
ражений (tweening). Команда Tween (построить промежуточные изображения) по- 
зволяет добавить или модифицировать серию новых кадров между созданными 
вами кадрами. Скажем, например, у вас есть два графических изображения неоно- 
вой вывески. Однако вместо вспыхивающей и гаснущей (мерцающей) вывески вы 
хотите создать иллюзию пульсирующей вывески (медленно вспыхивающей и гас- 
нущей). Чтобы этого добиться, вам нужно создать серию промежуточных кадров, 
создающих иллюзию медленного угасания неоновой вывески. 
1. Откройте оба изображения в программе редактирования Web-графики, на- 
пример, Adobe ImageReady. В данном примере предположим, что кадр с го- 
рящей неоновой вывеской — это кадр 1, а кадр 2 содержит слой с погасшей 
вывеской. 
2. Щелкните на пиктограмме Tween (Построить промежуточные изображения). 
ImageReady откроет диалоговое окно Tween, показанное на рис. 7.14." 
layers: % All Layers 
О selected layer 
Parameters: H Position 
E3 Opecity 
•3 meets 
Iweenwith: i Next f ram* 
frames to лай: 
Рис. 7.14. В диалоговом окне "Tv/een" определяются характеристики 
функции построения промежуточных изображений 
Ниже приводится краткое описание параметров, с помощью которых можно 
управлять построением промежуточных изображений: 
• АИ Layers (Все слои). Отметьте All Layers, чтобы построение промежуточ- 
ных изображений выполнялось с использованием всех слоев изображе- 
ния. 
Selected Layer (Выбранный слой). Отметьте Selected Layer, чтобы исполь- 
зовать в анимации выбранные слои. Поскольку анимация неоновой вы- 
вески содержит два слоя, вместо этого параметра должен быть отмечен 
параметр All Layers. 
• Position (Положение). Отметьте этот параметр, чтобы варьировать анима- 
цию от первой до последней ячейки. Поскольку вы хотите создать иллю- 
зию пульсации, этот параметр должен быть отмечен.

Глава 7. Анимация, звук и видео 365 
• Opacity (Непрозрачность). Если параметр Opacity отмечен, анимация мед- 
ленно доходит до нулевой непрозрачности. 
• Effects (Эффекты). Отметьте этот параметр, чтобы изменять слои эффек- 
тов, примененных к изображению. Поскольку вы не использовали ника- 
ких слоев эффектов, этот параметр отмечать не нужно. 
• Tween With (Промежуточные изображения между данным кадром и...). 
Щелкните на параметре Tween With и выберите Next Frame (Следующий 
кадр), чтобы создать анимацию. 
• Frames to Ml (Добавить кадров). Щелкните на поле ввода Frames to Add и 
введите число кадров, которые должны быть построены между первым и 
последним кадром. В данном примере введите число 8. 
Щелкните на кнопке ОК, чтобы применить к изображению команду Twe.n. 
ImageReady сгенерирует восемь новых кадров — общее число кадров анима- 
ции теперь составляет 10 — как показано на рис. 7.15. 
Рис. 7.15. Результат применения команды Tween в ImageReady 
По сути дела, команда Tween создает серию кадров, медленно превращающую 
изображение в кадре 1 в изображение в кадре 2. При воспроизведении этой ани- 
мации браузером посетитель будет видеть, как неоновая вывеска медленно пульси- 
рует, а не быстро вспыхивает и гаснет. Однако добавление дополнительных кадров 
существенно увеличивает размер GIF-файла, что увеличит и время загрузки. 
Включение в Web-сайт готовой Flash-заставки 
Сегодня многие Web-дизайнеры используют Flash для создания анимирован- 
ных заставок (splash screens), используемых в качестве коротких "вступлений" 
для 
сайтов. Заставку можно рассматривать как десяти- или пятнадцатисекундный рек- 
ламный ролик о том, кто вы, что вы можете предложить, и почему посетителям 
стоит посетить ваш сайт. 
Заставка — это первая страница, загружаемая браузером, и первое впечатление, 
которые вы производите на посетителя, заходящего на ваш сайт. Flash идеально 
подходит для создания заставки, поскольку он создает небольшие, быстро загру- 
жаемые анимационные файлы и может инкапсулировать броскую анимацию и 
звук. 
Применяя Flash для создания заставки, первым делом следует задуматься о 
том, как отобразить на Web-странице готовый Flash-фильм. Помните: работая с 
Flash, вы на самом деле работаете с двумя элементами: HTML-кодом Web-страни- 
цы и Flash-фильмом. Фильм можно отображать как процент от размера окна брау-

366 Глава 7. Анимация, звук и видео 
зера в данный момент, или же можно задать размер, например, 600x800 пикселей. 
Flash-фильмы, благодаря использованию в них векторной графики, не зависят от 
разрешения. Поэтому их можно масштабировать в соответствии с текущими раз- 
мерами окна браузера — без ущерба качеству воспроизводимого фильма. 
Документ Flash состоит из нескольких элементов: временной шкалы (Timeline), 
в которой содержатся текст, изображения, аппликации и видео, сцены (Stage), на 
которой отображается Flash-фильм, и рабочей области (Work Area), продолжаю- 
щейся за пределами сцены и содержащей в себе элементы, которые остаются вне 
видимого кадра фильма (см. рис. 7.16). 
В процессе создания Flash-документа сцена и временная шкала дают Flash-фильму 
указания, где и когда и что появляется. Поскольку Flash поддерживает пути 
анима- 
ции, элементы фильма не только будут появляться на сцене; кроме этого, путь 
аними- 
рует элементы и позволяет направлять и масштабировать их из одной точки в 
другую. 
Например, вы можете поместить логотип в верхний левый угол сцены и с помощью 
пути переместить логотип в середину сцены и одновременно увеличить размер лого- 

типа вдвое. Затем, пять секунд спустя, верните логотип в верхний левый угол 
сцены и 
уменьшите его до первоначального размера. Правильное использование анимации 
может привлечь внимание пользователей к тому, что вы хотите им показать, и 
расска- 
зать о вашей компании занимательно и ярко. Однако не забывайте, что анимация 
может также отвлечь посетителя от сообщения вашего сайта. Используйте анимацию 
там, где она способствует восприятию сообщения. 
* S О !•-] S - 1 B 13 *° M М ЯА 40 *5 SU S5 W 65 
Временная шкала 
эк» 
Сцена 
Рабочая область 
« 3 А Г3 * 
Рис. 7.16. Документ Flash состоит из временной шкалы (Timeline), сцены (Stage) 
и рабочей области (Work Area)

Глава 7. Анимация, звук и видео 3 6 7 
ПРАКТИКУМ 
Формально для отображения Flash-фильма HTML-код использовать не нужно — в 
том смысле, что большинство браузеров просто откроют и воспроизведут Flash- 
фильм, если вы наберете адрес самого файла фильма в адресной строке браузера. 
Однако без HTML-кода, определяющего размеры Flash-фильма, фильм автомати- 
чески примет высоту и ширину окна браузера. В большинстве случаев будет луч- 
ше, если определять размеры фильма будете вы, а не посетитель. Встраивая Flash- 

фильм в HTML-документ, следует принять во внимание различия между 
браузерами Netscape Navigator и Internet Explorer. Основное различие состоит в 
том, для воспроизведения в Internet Explorer (и Netscape Navigator 6) вставка 
Flash- 
фильма производится с помощью дескриптора <object>, а для Netscape Navigator 
версии 4 Flash-фильмы вставляются с помощью дескриптора <embed>. При откры- 
тии приведенного ниже HTML-кода в Internet Explorer браузер игнорирует деск- 
риптор <embed>, подготовленный для Netscape Navigator. Аналогично, если вы от- 
кроете следующий HTML-код в Netscape Navigator, браузер будет игнорировать 
дескриптор <object>, предусмотренный для Internet Explorer: 
<object classid="clsid:D27CDB6E-AE6D-llCF-96B8-444553540000" 
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/ 
swflash.cab#version=5,0,0,0" 
width="80 0" 
height="600" 
<param name="movie" value="splash. swf "> 
<param name="quality" value="high"> 
<param name="bgcolor" value="#ffffff"> 
<embed src="splash.swf" 
quality="high" 
bgcolor="#ffffff" 
width="800" 
height="600" 
type="application/x-Shockwave-flash" 
pluginspage="http://www.macromedia.com/shockwave/download/ 
index.cgi?Pl__Prod__Version=ShockwaveFlash"> 
</embed> 
</object> 
Для того чтобы воспроизвести Flash-фильм, у браузера должно быть специаль- 
ное программное обеспечение — модуль воспроизведения Flash. Вместо того чтобы 
просто не воспроизводить Flash-фильм в случае отсутствия этого модуля в браузе- 

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

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

телю возможность выгрузить и установить модуль. Установив модуль, посетители 
смогут с его помощью просматривать в будущем и другие Flash-анимации. В при- 
веденном выше HTML-коде атрибуты codebase и piuginspage сообщают браузеру 
местонахождение ресурса, откуда посетитель может выгрузить модули для браузе- 
ров Internet Explorer и Netscape Navigator соответственно. Помещая Flash-анима- 

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

368 Глава 7. Анимация, звук и видео 
Атрибуты в приведенном выше HTML-коде выполняют следующие функции: 
• width И height. Ширина (width) И ВЫСОТа (height) Flash-фиЛЬМа МОГут ВЫ- 
ражаться в виде отношения в процентах к ширине и высоте окна браузера 
ИЛИ В ПИКСеЛЯХ (дескрипторы <object> И <embed>). 
• movie. Местонахождение Flash-фильма, который требуется воспроизвести 
(деСКрИПТОр <object>). 
• data. Местонахождение Flash-фильма, который требуется воспроизвести 
(деСКрИПТОр <object>). 
• ciassid. Идентифицирует элемент управления ActiveX, воспроизводящий 
Flash-фильмы (дескриптор <obj€>ct>). 
• codebase. Местонахождение элементов управления ActiveX. Позволяет брау- 
зеру выгрузить проигрыватель при отсутствии последнего (дескриптор 
<object>). 
• src. Идентифицирует местонахождение Flash-фильма (дескриптор 
<embed>). 
• piuginspage. Местонахождение подключаемого модуля Flash. Позволяет 
браузеру выгрузить проигрыватель при отсутствии последнего (дескриптор 
<embed>). 
• quality. Задает качество Flash-фильма; возможные значения — High (высо- 
кое), Medium (среднее), Low (низкое) (дескрипторы <object> И <embed>). 
• bgcolor. Задает фоновый цвет Flash-фильма (не HTML-страницы) (дескрип- 
торы <object>И <embed>). 
• type. Сообщает браузеру, какой подключаемый модуль использовать для 
воспроизведения Flash-фильма. 
Можно использовать и дополнительные параметры, которые определяют, когда 
фильм будет воспроизведен и сколько раз он будет воспроизведен. Приведенный 
выше код дает Web-браузеру указание отобразить и воспроизвести фильм 
splash.swf в заданной области 800 на 600 пикселей. 
Создание Flash-фильма с чистого листа 
Работая с Flash, вы, в известном смысле, становитесь кинорежиссером. Скажем, 
например, Голливудская кинокомпания принимает решение создать новый 
фильм; одним из первых дел компания наймет режиссера. Режиссер, в свою оче- 
редь, работает с актерами, командой звукооператоров, художниками-декораторами 
и операторами для того, чтобы создать фильм. В Flash вы режиссер, а актеры — 
это 
элементы Flash-фильма. В качестве актеров (элементов) может выступать текст, 
ап- 
пликация, фотоизображения, а также звуки и видео.

Глава 7. Анимация, звук и видео 369 
Если у вас нет Flash, можно выгрузить 30-дневную пробную версию программ- 
ного обеспечения из Web-сайта Macromedia (http://www. macromedia. com/ 
downloads). Открыв Flash в первый раз, вы увидите сцену, окруженную рабочей 
областью. В сцену и рабочую область вы будете помещать "кусочки" (элементы) 
анимации. Собственно говоря, воспринимайте сцену как экран, на который "про- 
ецируется" ваш фильм. Когда элементы находятся на сцене, их видно в фильме; 
когда же они находятся в рабочей области, они "за сценой" и, следовательно, не 
видны, как было показано на рис. 7.16. 
Прямо над сценой расположена временная шкала Flash. Каждый элемент Flash- 
фильма имеет временную шкалу, которая сообщает программе, когда элемент по- 
является на сцене и когда он исчезает, то есть покидает сцену. Во временную 
шка- 
лу можно добавлять опорные кадры, чтобы перемещать элемент из одного 
положения на сцене в другое. Например, изображение-аппликация может войти 
на сцену слева, пройти по ней и выйти справа, как показано на рис. 7.17. 
о
Л San* \ 
D? ••••«• г 
„у «»» 1 
®» 
*за 
• * •{ 
•НО 
• * • 
о 
1 • 5 Ц 
1 - • I 
• '• • ) 
i l <к\%\ 
!0
У 
J 
ЦпШеог .. 
15 20 25 30 3 
' > J 
! • U 
7 [12X1 ft» i 05s } 
. . • 
5 40 45 SO 5S **J 
. • • • • • M i k 
Рис. 7.17. Изображение-аппликация входит на сцену слева, проходит по ней и 
выходит справа 
ПО А к"Г1Л kVWI 
Чтобы проиллюстрировать, как сцена и временная шкала используются в Flash 
для генерации движения, создадим простую, состоящую из трех кадров анимацию 
прыгающего мяча: 
New (Файл | Создать)); 1. Начните с открытия в Flash нового документа (File 
назовите его bounce. 
2. Выберите на временной шкале Frame 1 (Кадр 1) (см. предыдущую иллюстра- 
цию). 
3. С помощью инструмента рисования Oval (Овал) из панели инструментов на- 
рисуйте кружок в верхнем правом углу сцены. Нарисовать правильный круг 
можно, удерживая во время рисования клавишу SHIFT (цвет кружка значе- 
ния не имеет). 
4. Выберите на временной шкале Frame 2 (Кадр 2) и добавьте опорный кадр 
(Insert | Keyframe (Вставить | Опорный кадр)). В кадре 2 появится маленькая 
черная точка, указывающая, что кадр является опорным. 
5. С помощью инструмента Move (Переместить) (черная стрелка) из панели 
инструментов перетащите кружок в центральную нижнюю часть сцены. По- 
скольку вы перемещаете опорный кадр в кадр 2, вы на самом деле переме- 
щаете копию мяча. Теперь у вас имеется один мяч в верхнем правом углу и 
один внизу по центру.

370 Глава 7. Анимация, звук и видео 
6. Выберите на временной шкале Frame 3 (Кадр 3) и добавьте опорный кадр 
(Insert | Keyframe (Вставить | Опорный кадр)). В кадре 3 появится маленькая 
черная точка, обозначающая еще один опорный кадр. 
7. Перетащите кружок, находящийся внизу, в верхний правый угол сцены. По- 
скольку вы перемещаете опорный кадр в кадр 3, вы перемещаете копию 
мяча. Теперь у вас имеется три мяча: слева вверху (кадр 1), внизу в центре 
(кадр 2) и вверху справа (кадр 3). 
Чтобы просмотреть отдельные мячи в каждом кадре, щелкните на черных точ- 
ках кадров 1, 2 и 3. При выборе определенного кадра мячи появляются (по одно- 
му) на сцене, как показано на рис. 7.18. 
Рис. 7.18. Готовый документ содержит три кадра с мячом в каждом кадре 
Для предварительного просмотра этой простой анимации выберите в меню 
Window | Toolbars | Controller (Окно | Панели инструментов | Контроллер) в 
Windows- 
версии или Window | Controller (Окно | Контроллер) в Macintosh-версии. 
Откроется 
окно контроллера с элементами управления, похожими на органы управления ви- 
деомагнитофона. Чтобы просмотреть анимацию, щелкните на кнопке Play (Вос- 
произвести) в окне контроллера (стрелка вправо). Если вы хотите увидеть фильм,

Глава 7. Анимация, звук и видео 
воспроизводимый в Flash Player, выберите в меню Control | Test Movie 
(Управление 
Тест фильма). Flash экспортирует фильм в Flash-файл (. swf) и откроет его в 
Flash 
Player. 
Чтобы сохранить фильм для использования в Internet, выберите в меню File | 
Export Movie (Файл | Экспорт фильма). Выберите в качестве формата Flash Player 
и 
дайте файлу имя с расширением .swf. Например, фильм с прыгающим мячом 
можно было бы назвать bounce. swf. 
В этом примере продемонстрирована лишь малая толика возможностей Flash- 
анимации. Можно не только создавать простые фигуры опорных кадров и переме- 
щать их по сцене, но также использовать функции построения промежуточных 
изображений для создания всех кадров между опорньгми кадрами й получения 
плавной анимации. Кроме того, можно добавить больше слоев в палитру времен- 
ной шкалы и добавить другие объекты, такие как текст и изображения, для созда- 
ния более сложной презентации. Flash — средство разработки мультимедиа для 
Internet профессионального качества в полном смысле этого слова. 
Чтобы помочь вам в ваших начинаниях с Flash, несколько сайтов в Internet 
предлагают уроки по Flash: 
Flash Kit http://www.flashkit.com 
Flash Planet http://www.flashplanet.com 
Faap.COm http://www.flaap.com 
Macromedia http://macromedia-flash-5-infocenter.com/ 
Построение анимации на основе текста с помощью FlaX 
Приложение Macromedia Flash — одно из наиболее мощных средств, с помо- 
щью которых дизайнеры могут создавать анимацию для Web. К сожалению, по- 
скольку Flash является столь мощным орудием, разработчику может понадобиться 
немало времени, чтобы научиться использовать Flash для создания анимации про- 
фессионального качества. 
ПРАКТИКУМ 
Пока вы учитесь создавать Flash-анимации, вы можете воспользоваться мощной 
условно-бесплатной программой, называемой FlaX, с помощью которой можно со- 
здавать большое количество высококачественных Flash-анимаций, затрачивая на 
это всего лишь несколько минут. Работая с FlaX, вы просто набираете текстовое 
сообщение, которое хотите анимировать, например, название своей компании или 
рекламный лозунг, а затем выбираете требуемый анимационный эффект (см. рис. 
7.19). 
Создав требуемый эффект, вы можете дать FlaX указание экспортировать ани- 
мацию в Flash-фильм. FlaX — простой и мощный инструмент создания анимации 
профессионального качества. Чтобы выгрузить FlaX, посетите Web-сайт компании 
GoldShell (www. goldshell .com/flax).

372 Глава 7. Анимация, звук и видео 
ИГ* И 
«оо ззоо 
X: 
Fofits 
Styl.i 
|20 «I V. |J0 
JAfiil 
•ШИШ 
is 
Ш 
M 
Jl 
3 i (я 
SO ^ f 
FFFFCC 
h
Di 
r< 
Di 
Г 
Л . 
<iiii>f 
**••
st#rt e 
dj
_ 
— 1 
mpty 
n)t».ck 
-1- fi 
h f« 
r 
- ij * 
' Рис. 7.19. Использование FlaX для создания анимации на основе текста 
Передача потокового аудио и видео 
На AM-, FM- и ХМ-радиоканалах радиостанции передают сигналы всем, кто 
настроил свои приемники на их волну. Аналогичным образом телевизионные 
станции транслируют передачи по воздушным каналам (или по кабелям) на раз- 
личных частотах для своей аудитории. Подобно им, Internet-радио- и телестанции 
передают сигналы по Internet — "настроиться на волну" можно, посетив соответ- 
ствующий Web-сайт с помощью браузера. Во Всемирной Паутине существуют ты- 
сячи Internet-радиостанций, передающих спортивные передачи, новости, музыку и 
даже ток-шоу. Как показано на рис. 7.20, чтобы "настроиться" на 
Internet-радиостан- 
цию, вы просто посещаете Web-страницу сайта с использованием своего браузера. 
Рис. 7.20. Настройка на 1п1егпе!-радиостанцию с помощью браузера

Глава 7. Анимация, звук и видео 373 
Более длинный перечень радиостанций можно найти на Web-сайте справочни- 
ка радиостанций brs (http://web-radio.fm/). На этом сайте можно просмотреть 
списки радиостанций по штатам, странам или по формату (джаз, легкая музыка, 
ретро, спорт, ток-шоу и так далее). 
Чтобы обеспечить свою непревзойденность, некоторые сайты предлагают пото- 
ковое видео, просматривать которое можно в окне на экране, как показано на 
рис. 7.21. Перечень сайтов, транслирующих телепередачи в Web, можно найти по 
адресу http://www.tvradioworld.com, http://www.etown.edu/vl/radio.html И 
http://dmoz.org/Arts/Television/News/. 
Ocean $ц 
Did Entertainment Editor Joe 
siege!enjoyOceanrs7J?f mdout 
Рис. 7.21. Просмотр потокового видео в Web 
Если вам нужно передавать со своего Web-сайта потоковые видео- и аудиодан- 
ные, вам, в сущности, доступны два варианта размещения своего содержимого в 
Web. Первый заключается в размещении и передаче данных с привлечением ком- 
пании, специализирующейся на предоставлении подобных услуг. Обычно подоб- 
ные компании взимают помесячную оплату, размер которой зависит от объема 
данных, который они должны разместить на своем сервере, и помегабайтную оплату 
заданные, передаваемых от вашего имени. Существует несколько компаний, предла- 
гающих услуги по размещению и трансляции потоковых аудио- и видеоданных: 
Bit Streaming Video 
Host Express.com 
Prime Internet Network 
Stream Audio 
http://www.bitstreamingvideo.com/index.html 
http://www.hostexpress.com/real.html 
http://www.primenetwork.net/housing.html 
http://www.s treamaudio.com 
Второй и, пожалуй, более интересный вариант (хотя, вероятно, не столь прак- 
тичный, если вы планируете обеспечивать качественное вещание 24 часа в сутки 7 
дней в неделю) — это размещение своих аудио- и видеоданных на собственном ве- 
щательном сервере. В течение нескольких лет лидером в области потокового ме-

374 Глава 7. Анимация, звук и видео 
^т является компания RealNetworks. RealNetworks предлагает пробный сервер, 
который вы можете загрузить и использовать на своей машине (пробный сервер 
будет работать в течение одного года, однако будет поддерживать только 25 под- 
ключений одновременно). Кроме того, у RealNetworks можно приобрести и пол- 
нофункциональный сервер потокового медиа. • 
ПРАКТИКУМ 
Чтобы выгрузить и опробовать сервер RealNetworks, посетите Web-сайт 
RealNetworks (http://www.reai.com) и следуйте ссылкам, ведущим к "Products 
And Services" ("Продукция и услуги"); затем воспользуйтесь поиском, чтобы найти 

бесплатные продукты ("free products"). После завершения выгрузки запустите про- 

грамму установки, которая установит на вашей машине сервер потокового медиа. 
Чтобы вам было легче освоиться, в дистрибутив сервера включены несколько 
аудио- и видеофрагментов, к которым вы (и другие пользователи) можете подклю- 
чаться со своего сайта. Для обращения к потоковому медиа в URL-адрес обычно 
включается номер порта, например, 8080, как показано ниже: 
http://www.yoursite.com:8080/ramgen/AudioClipName.rm 
"За кулисами" сетевые приложения ссылаются друг на друга с помощью номе- 
ров,' которые программисты называют номерами портов (portnumbers). HTTP-брау- 
зер и сервер, например, обращаются друг к другу как к "приложению, выполняю- 
щемуся на порте 80". Номер порта — это просто значение, которое соответствует 
конкретному приложению. Номер порта 8080 соответствует серверу потокового 
медиа Real Media. При включении в URL номера порта 8080 удаленный сервер 
посылает запросы не на Web-сервер (который находится на порту 80), а, в данном 
случае, на сервер потокового медиа. 
з _ _ _ 
Если ваш сервер защищен брандмауэром, для того, чтобы ваш сайт мог по- 
сылать потоковое медиа (или получать запросы на потоковое медиа), может 
потребоваться 
разрешить сообщениям проходить сквозь брандмауэр к порту 8080. 
Создание потокового медиа 
Установив сервер потокового медиа, вы, скорее всего, захотите создавать свои 
собственные файлы потоковых видео- или аудиоданных. Чтобы создать потоковый 
аудиофайл, пригодный для использования с RealNetworks, можно воспользоваться 
такой программой, как Cool Edit, которую можно выгрузить по адресу http:// 
w w w . s y n t r i l l i u m . c om (СМ. рИС. 7.22). 
ПРАКТИКУМ 
Работая с Cool Edit, вы просто открываете аудиофайл и затем выбираете в меню 
File | Save a Copy As (Файл | Сохранить копию как...), чтобы сохранить файл в 
формате 
.rm (Real Media). Затем, чтобы поместить файл на свой сайт для трансляции, 
можно 
создать ссылку на аудиофрагмент в HTML-файле, как показано ниже; 
<а href="http://www.yoursite.com:80 80/ramgen/AudioClipName.rm"> 
Запуск аудиофрагмента</а>

Глава 7. Анимация, звук и видео 375 
rA; The Micimolt Sound way - Coal E<M Pro Of MO 
File f.dl View Jianjfwm GDMIM Anafcoa favouSf» Options Window Иоф 
• . '••). 
Рис. 7.22. Преобразование типов аудиофайлов с помошью программы Cool Edit 
В Internet можно отыскать несколько программ для преобразования видеофай- 
лов из одного формата в другой, например, из AVI в QuickTime. Сервер потокового 

медиа RealNetworks поддерживает видеоформаты MPEG и QuickTime, а также фор- 
мат Real Video (файлы с расширением .rm). Чтобы поместить в Web-страницу 
потоко- 
вое видео, используется ссылка, аналогичная показанной ниже: 
<а href="http://www.yoursite.com:8080/ramgen/VideoClipName.rmM> 
Запуск потокового видео 
Создание страницы с Web-камерой 
Применение Web-камер для передачи видеоданных в режиме реального време- 
ни в последнее время резко возросло. В прошлом Web-камеры были нацелены на 
парки, национальные монументы, городские пейзажи и т.п. Сегодня агентства но- 
востей нацеливают Web-камеры на городские улицы, чтобы предоставить пользовате- 

лям сиюминутную информацию о состоянии движения, как показано на рис. 7.23. 
Многие компании также нашли способы внедрить Web-камеры в свои Web-сай- 
ты, тем самым снабдив посетителей весьма полезными инструментами. Например, 
многие детские сады сейчас предлагают страницы, позволяющие родителям "заг- 
лядывать к ним" в течение дня. Другой пример: тюрьма округа Марикопа в Аризо- 
не ИСПОЛЬЗует Web-камеру (http://www.crime.com/info/jailcam.html), чтобы 
пользователи могли наблюдать за жизнью заключенных в окружной тюрьме. Боль- 
шой перечень Web-камер можно найти по адресу http://www.ispy.nl.

376 Глава 7. Анимация, звук и видео 
• Е*е . Е* M«« favakm. lad: 
ror <iqs»> SAFETY ; 
в « InfcM 
Рис. 7.23. Использование Web-камеры для слежения за уличным движением 
шшшшшшшшшшшшшш. ПРАКТИКУМ шшвшшшшшшшшшшш 
В создании Web-камеры фактически ничего сложного нет. Для начала потребуется 
выбрать одну из множества различных камер для подключения к своему компью- 
теру; кроме того, существуют разнообразные варианты подключения камеры. В за- 
висимости от типа камеры можно подключить камеру через универсальную после- 
довательную шину (USB), карту TV-адаптера или даже через последовательный 
порт. Чтобы устранить необходимость протягивать кабельную проводку от компь- 
ютера к камере, некоторые компании, напри- 
мер, Х10, чей сайт вы можете посетить по 
адресу http://www.xio.com, предлагают бес- 
проводные камеры, подобные той, которая по- 
казана на рис. 7.24. Такие камеры могут пере- 
давать сигнал на расстояние до 30 метров 
приемнику, подключенному непосредственно к 
компьютеру. 
После подключения камеры к компьютеру 
вам нужно будет установить на свой сервер 
(или домашний компьютер) программное 
обеспечение, способное передавать видеодан- 
ные пользователям, посещающим ваш сайт. 
Существует несколько Web-сайтов, предлагаю- 
щих бесплатное программное обеспечения для 
поддержки Web-камер: 
Рис. 7.24. Использование 
беспроводной Web-камеры для 
создания страницы с Web-камерой

Глава 7. Анимация, звук и видео 377 
Surveyor Corp. ' http://www.webcamresource.com/ 
Dual View http://www.dualview.com/ 
UK Software http://www.msagentsoftware.com/easyfreewebcam/ 
В зависимости от используемого программного обеспечения Web-камеры, дей- 
ствия, которые вам потребуется предпринять для встраивания Web-камеры в 
HTML-страницу, будут различаться. Некоторые программы базируются на Java-an- 
лете, другие — на объекте ActiveX и т.д. 
Встраивание видео и аудио в страницу 
с помощью SMIL 
Путешествуя по Web, многие пользователи широко используют RealPlayer для 
проигрывания файлов потокового аудио и видео. Из практикума "Передача пото- 
кового аудио и видео" вы узнали, как установить сервер RealNetworks для обеспе- 

чения потокового вещания со своего сайта. Многие Web-сайт предлагают ссылки 
на RealAudio- и RealVideo-файлы. Когда пользователь щелкает на ссылке, соответ- 

ствующей объекту Real Media, браузер обычно запускает RealPlayer для воспроиз- 
ведения объекта, как показано на рис. 7.25. 
RealPlayer Backstreet Boys - More Than Thai 1 
file View Favorites Help 
Рис. 7.25. Воспроизведение музыкального видеоклипа с помощью RealPlayer 
Приведенные ниже HTML-утверждения, например, служат иллюстрацией того, 
как можно встроить потоковый видеоклип в Web-страницу: 
<html> 
<head> 
<title> Тест </title> 
</head>

378 Глава 7. Анимация, звук и видео 
<body> 
<hr> 
<а href="http://www.somesite.com:8080/ramgen/real8video.rm"> 
Запуск видео 
</body> 
RealPlayer и сервер обмениваются потоковым медиа через порт 8080. Ссылаясь 
непосредственно на объект Real Media (видео или аудио), вы должны указать в 
URL номер порта 8080. 
Помимо использования HTTP-протокола для отправки запросов порту 8080, 
который обычно соответствует серверу потокового медиа, некоторые URL-адреса 
применя- 
ют для обращения к серверу потокового медиа Real Time Streaming Protocol 
(Протокол переда- 
чи потоков в реальном времени - RSTP) и порт 554 (rstp: //www. somesite.
com:554/ 
folder/filename). Более подробную информацию об RSTP-протокола можно получить, 
просмотрев спецификацию на h t t p : / / r t s p . o r g . 
Сегодня большинство разработчиков считают анимацию на Web-сайте совре- 
менной, если Web-сайт содержит Flash-фильмы, анимированные GIF-изображения 
и потоковое медиа - это верно, если на сайте используются технологии анима- 
ции, о которых рассказывается в данной главе. Однако положение вещей меняет- 
ся. В будущем на многих сайтах сложная анимация будет строиться с помощью 
специального языка разметки, называемого SMIL (произносится "смайл" — "улыб- 
ка"). SMIL — это аббревиатура от Syncronized Multimedia Integration Language 
(язык 
интегрирования синхронных потоков мультимедиа). Как и HTML (хотя SMIL 
больше напоминает XML), SMIL основывается на начальных и конечных дескрип- 
торах. Дескрипторы SMIL помещаются в файлы с расширением .smi или .smi. 
Точно так же, как браузер использует подключаемый модуль (проигрыватель) для 
воспроизведения RealVideo или RealAudio, браузер использует подключаемый мо- 
дуль для обработки SMIL-содержимого, внедренного в Web-страницу. Опять-таки, 
как и в HTML, в SMIL применяется несметное количество дескрипторов. Полную 
спецификацию SMIL можно найти на Web-сайте W3C по адресу http:// 
www.w3.org/AudioVideo/. 
Назначение SMIL — предоставить вам возможность более точной настройки 
мультимедиа-приложений. Данный практикум представляет собой краткий обзор 
простых SMIL-файлов. В Web можно найти множество разнообразных SMIL-фай- 
лов, анализируя которые, вы сможете побольше узнать о каждом из SMIL-деск- 
рипторов и атрибутов. 
Предположим, например, у вас есть видеофайл без звуковой дорожки. Ваш ви- 
деоролик, содержащий несколько различных фрагментов на спортивную тему, на- 
ходится в файле sports.rm. Предположим также, что вы хотите воспроизводить 
аудиофайл Music.rm в качестве фоновой музыки к видеоролику. Приведенный 
ниже SMIL-файл, Demoi. smi, с помощью дескриптора <раг> дает указание проиг- 
рывателю, поддерживающему SMIL-операции, воспроизвести видео и аудио па- 
раллельно:

Глава 7. Анимация, звук и видео 3 7 9 
<body> 
<par> 
<video src="Sports.rm" 
<audio src="Music.rm" 
</par> 
</body> 
Точно так же, как HTML-файл начинается и заканчивается дескрипторами 
<htmi> и </htmi>, SMIL-файл начинается и заканчивается дескрипторами <smii> 
и </smii>. Принимая во внимание предположение, что ваши медиа-файлы назы- 
вались Sports. rm и Music. rm, вы можете протестировать этот SMIL-файл на своем 

компьютере одним из нескольких способов. (Если вы выгрузили какие-нибудь 
файлы RealAudio и RealVideo из Web, вы можете переименовать их в соответствии с 

именами файлов в нашем примере, чтобы протестировать SMIL-прилржение). 
Для начала поместите SMIL-файл и два медиа-файла в одну и ту же папку. За- 
тем с помощью браузера в среде Windows вы можете открыть файл, набрав URL в 
ВИДе file://c:/HMH_nanKtt/Demol.smi. Во-ВТОрЫХ, SMIL-фаЙЛ МОЖНО ОТКРЫТЬ не- 
посредственно в RealPlayer. В-третьих, если вы используете сервер потокового 
ме- 
диа, вы можете поместить файлы на свой сервер и затем с помощью браузера от- 
крыть файл из сервера. 
Помимо дескриптора <раг>, дающего проигрывателю указание воспроизвести 
объекты параллельно, SMIL предусматривает также дескриптор <seq> для после- 
довательного воспроизведения элементов. Приведенные ниже SMIL-операторы, 
например, воспроизведут три аудиофайла, начиная с one.rm, затем Two.rm и за- 
канчивая • Finally. rm! 
<body> 
<seq> 
<audio src="One.rm" /> 
<audio src="Two.rm" /> 
<audio src="Finally.rm" 
</seq> 
</body> 
Подобно HTML, SMIL предоставляет атрибуты, которые можно вставлять в 
дескрипторы для "тонкой настройки". Например, предположим, вы хотите изме- 
нить SMIL-файл из предыдущего примера, Demoi.smi, так, чтобы музыка начина- 
ла играть за пять секунд до начала видеоролика. Это можно сделать с помощью ат- 

рибута begin, как показано ниже, который дает браузеру указание подождать пять 
секунд после начала воспроизведения файла перед тем, как начать воспроизведе- 
ние видео: 
<body> 
<video src="Sports.rm begin="5s" 
<audio src="Music.rm" />

380 Глава 7. Анимация, звук и видео 
</par> 
</body> 
Точно так же, как мультимедиа-приложения синхронизируют звук и видео, не- 
редко может понадобиться синхронизировать отображение изображений и текста. 
Например, вы разрабатываете сайт с функциями караоке, используя для этого 
язык SMIL. Внутри сайта вы можете разместить ссылки на разнообразные песни, 
которые реализуются с помощью SMIL. Внутри SMIL-файлов вы запускаете аудио- 
файл. В процессе воспроизведения аудиофайла анимация отображает текст на эк- 
ране синхронно с музыкой. 
Чтобы отобразить текст в SMIL-файле, нужно поместить в него текст в особом 
формате, называемом RealText (точно также, как аудио- и видеоматериал сохраня- 
ется в форматах RealAudio и RealVideo). Чтобы поместить изображения в SMIL- 
анимацию, изображения потребуется сохранить в формате RealPix. С помощью 
RealPix и SMIL можно постепенно уменьшать или увеличивать контрастность 
изображения, а также размывать и объединять изображения. На Web-сайте 
RealMedia доступен для бесплатной выгрузки набор инструментов для авторов, с 
помощью которого имеется возможность создавать файлы RealText и RealPix. 
При загрузке и установке сервера FLealNetworks программа установки поместит 
на ваш компьютер несколько SMIL-файлов, просмотреть содержимое которых 
можно с помощью редактора, такого как Блокнот из Windows. На рис. 7.26 пока- 
зан проигрыватель RealPlayer, воспроизводящий файл Africa.smi, который на мо- 
мент написания этой книги поставлялся вместе с сервером потокового медиа 
RealNetworks. 
Рис. 7.26. Воспроизведение файла Africa.smi в RealPlayer

Глава 8 
JavaScript 
В этой главе 
Отображение документа в устаревших браузерах, не поддерживающих сценарии 
Хранение множественных значений в одной переменной с помощью массивов 
JavaScript 
Принятие' сценарием решений и выполнение соответствующей обработки 
h Принятие решений на основании двух или более условий 
Выполнение кода, когда условие не истинно 
Повторение операторов определенное число раз 
Повторение операторов, пока условие истинно 
Реагирование на события JavaScript 
• Выполнение операторов JavaScript в теле Web-страницы 
Вызов определенной пользователем функции JavaScript 
Вызов JavaScript-функции в обработчике события 
!• Что такое обработчики событий JavaScript 
Создание интерактивной навигационной панели с эффектом смены изображения 
при наведении курсора 
Использование массивов объектной модели 
Обращение к объектам Web-страницы по имени (а не по позиции в массиве) 
• Использование содержимого объекта документа 
Использование массива изображений JavaScript 
• Использование массива ссылок JavaScript 
Изменение цветов Web-страницы с помощью JavaScript 
Сохранение cookie-набора на жестком диске посетителя 
Форматирование данных cookie-набора с помощью JavaScript 
!•• Извлечение значения cookie-набора из cookie-файла 
Удаление cookie-набора из cookie-файла 
Экономия времени и усилий с помощью готовых (внешних) сценариев 
Создание анимации с помощью события onload 
• Отображение самоизменяющихся баннеров с помощью JavaScript 
Направление гиперссылок на новые файлы "на лету" 
Предварительное кэширование файлов для уменьшения времени отображения 
изображений 
• Создание бегущей строки с помощью JavaScript

382 Глава 8. JavaScript 
I avaScript — это язык написания сценариев, который Web-дизайнеры могут ис- 
ч I пользовать для автоматизации многих задач внутри Web-страницы. До появле- 
ния JavaScript Web-страницы содержали только графику или аудиофайлы, которые 
Web-браузер должен был отображать на экране или воспроизводить через динами- 
ки компьютера. С помощью HTML-дескрипторов можно описывать, как должен 
выглядеть текст; определять такие элементы, как гиперссылки!, таблицы и формы; 
давать Web-браузеру указания отображать содержимое файлов с изображениями, 
фильмами или звуками. Однако язык HTML не предусматривает способа "заста- 
вить" браузер выполнить последовательность инструкций. В результате, без языка 
написания сценариев, подобного JavaScript, Web-страницы не обладают возможно- 
стями обработки и не способны взаимодействовать с посетителями сайта. Напри- 
мер, хотя посетители могут вводить информацию в формы, HTML только позволя- 
ет браузеру отправить данные на Web-сервер, поскольку язык HTML не имеет 
встроенных средств проверки информации, набранной или отмеченной посетите- 
лем в форме, равно как и средств произвести над ней определенные действия. 
Поскольку Web-дизайнеры должны обладать возможностью давать Web-браузе- 
рам указание делать нечто большее, чем простое отображение текста и картинок 
и отправка данных форм обратно на Web-сервер, компания Netscape (в сотрудни- 
честве с Sun Microsystems) разработала язык JavaScript. Хотя JavaScript 
является 
языком написания сценариев в том, что он позволяет задать набор команд, ко- 
торые должен выполнить Web-браузер, с помощью JavaScript нельзя создать вне- 
шнюю программу, работающую независимо от браузера. По существу, JavaScript 
называется языком написания сценариев (scripting language), поскольку он 
позволя- 
ет написать сценарий (script), то есть набор инструкций, которому должен следо- 

вать браузер. Более того, операторы JavaScript, из которых состоит сценарий, 
внедряются в HTML-код Web-страницы. 
Для написания JavaScript-сценария никаких специальных инструментов не 
требуется; можно пользоваться тем же текстовым редактором, с помощью кото- 
рого вы создаете Web-страницы. Кроме того, наиболее популярные Web-браузеры 
(такие как Netscape Navigator и Internet Explorer) снабжены встроенной поддерж- 

кой JavaScript. Благодаря этому посетителям сайта не нужно устанавливать на 
свои компьютеры, никакого дополнительного программного обеспечения; браузер 
в состоянии выполнять JavaScript-сценарии, вставленные в HTML-код Web-стра- 
ницы. Все, что нужно сделать, — это заключить операторы JavaScript между на- 
чальным и конечным дескрипторами сценария (<scriptx/script>), которые 
дают Web-браузеру указание выполнить операторы, а не выводить их на экран. 
Например, операторы JavaScript между начальным и конечным дескрипторами 
сценария (<scriptx/script>) в приведенном ниже HTML-коде отображают на 
Web-странице строку текста и выводят на экран окно сообщения с надписью 
"Привет, МИР!", как показано на рис. 8.1. 
<html> 
<body> 
<hl>HTML & Web Design Tips & Techniques</hl> 
<р>Этот текст набран прямо в Web-странице-<р>

Глава 8. JavaScript 383 
<script language=MJavaScript"> 
document.write("<р>Эта строка текста вставлена " + 
"оператором JavaScript.</p>"); 
alert("Мой первый оператор JavaScript говорит: \"Привет, МИР\"!"); 
// - 
</script> 
<рХ)братите внимание, что Web-браузер выводит на экран окно сообщения 
JavaScript<br> 
и ждет, прежде чем отобразить текст, идущий после сценария,<br> 
внедренного в тело страницы.</р> 
</body> 
</html> 
J J Я A ii J 
ec j . ] http //html-webdesign/Ctmpter08/FigureG8-01 .htm 
HTML & Web Design Tips & Techniques 
Этот текст набран прямо в Web-странице. 
Эта строка текста вставлена оператором JavaScript. 
•\ Мой первый оператор JaveSctiptroeopMT; "Привет, МИР") 
I 
Рис. 8.1. Окно сообщения, выведенное на экран JavaScript-оператором alert 
Вставка операторов JavaScript в HTML-код 
Web-страницы 
Чтобы Web-браузер, отображая страницу, выполнил операторы JavaScript, по- 
местите операторы между начальным и конечным дескрипторами сценария 
(<scriptx/script>), которые должны находиться там, где Web-браузер должен 
выполнить сценарий. Обрабатывая HTML-код предыдущего примера, Web-брау- 
зер отобразит на Web-странице заголовок и состоящий из одной строки абзац. 
Затем дескриптор <script> предупреждает Web-браузер, что последующие утвер- 
ждения представляют собой сценарий. В результате браузер не выводит обнару- 
женный им текст на экран; вместо этого браузер воспринимает текст на каждой 
строке как инструкцию, которую он должен выполнить. Так, в предыдущем при- 
мере браузер считывает document.write, что значит, что он должен выполнить 
метод (функцию) WRITE, связанный с объектом document (то есть текущей Web- 
страницей). Таким образом, браузер "записывает" заключенный в кавычки текст

384 Глава 8. JavaScript 
в скобках на текущую Web-страницу (в предыдущем примере — "Эта строка 
текста вставлена оператором JavaScript."). 
Текст, "написанный" оператором JavaScript, отображается на Web-странице 
между первым и вторым абзацами текста, поскольку в этой точке HTML-кода 
Web-страницы браузер находит вызов функции document. writ;e(). Переходя к 
следующему оператору JavaScript, Web-браузер видит вызов функции вывода окна 
предупреждения alert () и отвечает на него выводом на экран окна сообщения с 
текстом "Мой первый оператор JavaScript говорит: "Привет, МИР!"". 
Поскольку окно сообщения дает браузеру указание ждать, браузер не будет 
считывать и отображать абзац, идущий после сценария, до тех пор, пока посети- 
тель не щелкнет на кнопке "ОК" в нижней части окна сообщения. 
Дескриптор </script> после последней строки сценария сообщает Web-брау- 
зеру, что тот больше не должен интерпретировать считываемый текст как опера- 
торы JavaScript. Следовательно, Web-браузер выведет оставшиеся три строки (в 
последнем абзаце) на экран. Как и всегда, Web-браузер проходит HTML-код 
страницы сверху вниз, слева направо. Следовательно, если вы хотите, чтобы в 
данном примере Web-браузер выполнил еще один набор операторов после выво- 
да на экран последнего абзаца текста, вам потребуется заключить эти дополни- 
тельные операторы между еще одной парой (начальным и конечным) дескрипто- 
ров сценария (<scriptx/script>), размещенных непосредственно перед 
дескриптором </body>. 
Сокрытие сценариев от браузеров, 
не поддерживающих JavaScript 
К сожалению, не все браузеры поддерживают JavaScript. Более того, браузе- 
ры, не поддерживающие JavaScript, не распознают начальный и конечный 
дескрипторы сценария (<scriptx/script>) и, следовательно, игнорируют 
эти дескрипторы. В результате, обнаружив в приведенном ниже HTML-коде 
JavaScript-КОД, такие браузеры выведут текст document.bgColor="lightyellow"; 
document.fgCoior="magenta"; на Web-странице вместо того, чтобы сделать цвет 
фона светло-желтым, а цвет текста документа (то есть цвет текста по умолча- 
нию) — пурпурным: 
<html> 
<body> 
<hl>HTML & Web Design Tips & Techniques</hl> 
<script language="JavaScript"> 
document.bgColor="lightyellow"; 
document.fgColor="magenta"; 
</script> 
</body> 
</html> 
Чтобы браузеры, не поддерживающие JavaScript, не выводили на экран опера- 
торы сценария, заключите операторы сценария между начальным и конечным 
HTML-дескрипторами комментария (<!-- ... -->). Например, сценарий в вы- 
шеприведенном примере нужно "закомментировать" следующим образом:

Глава 8. JavaScript 385 
<script language="JavaScript"> 
document.bgColor="lightyellow"; 
document.fgColor="magenta"; 
/ / -> 
</script> 
Браузеры, не поддерживающие JavaScript, будут игнорировать начальный и 
конечный дескрипторы сценария (<scriptx/script>) и все, что находится 
между начальным и конечным HTML-дескрипторами комментария. И наоборот, 
браузеры с поддержкой JavaScript игнорируют HTML-дескрипторы комментария, 
когда эти дескрипторы находятся между начальным и конечным дескрипторами 
сценария. (Двойная косая черта (//) в строке над дескриптором </script> — 
индикатор комментария JavaScript, используемый для того, чтобы поддерживаю- 
щие JavaScript браузеры не принимали двойной дефис (--), с которого начинает- 
ся конечный HTML-дескриптор комментария, за JavaScript-код.) 
Понятие функций JavaScript 
При написании кода программисты обычно группируют связанные между со- 
бой инструкции (операторы) в функции. Каждая функция имеет уникальное имя 
и должна выполнять одну задачу. Если бы вы, например, писали программу для 
обработки текста, вы бы создали одну функцию с именем speiicheck (проверка ор- 
фографии), которая проверяет документ на наличие орфографических ошибок, вто- 
рую функцию — PrintDocument — которая распечатывает одну или несколько копий 
документа, и третью — FiieOperations — которая открывает или сохраняет файл. 
Помещая операторы JavaScript в Web-документ, вы будете группировать свои 
операторы в функции. Например, вы можете создать одну функцию, с именем 
vaiidateForm, которая проверяет, ввел ли посетитель данные правильного типа 
(числовые или текст) во все обязательные для заполнения поля формы. Затем вы 
можете создать вторую функцию, caicuiateSaiesTax, которая вычисляет общую 
стоимость всех товаров, отмеченных в форме, и умножает сумму на действующую 
в регионе ставку налога с продаж. Приведенные ниже операторы, например, со- 
здают функцию с именем greetvisitor, которая отображает сообщение наподо- 
бие "Добро пожаловать на сайт!" в окне сообщения, как показано на рис. 8.2. 
function greetvisitor () 
{ 
alert ("Добро пожаловать на сайт!"); 
return; 
}
Внутри Web-страницы каждая функция JavaScript должна иметь уникальное 
имя. Определение функции начинается с ключевого слова function, за которым 
следует имя функции и (необязательный) список параметров в скобках. (Как ис- 
пользовать параметры для передачи значений функции, вы узнаете в подразделе 
"Передача значений в функцию и из функции" далее в этой главе.) После имени 
функции и (необязательного) списка параметров вы заключаете между левой и пра- 
вой фигурными скобками ({}) операторы JavaScript, выполняющие задачу функции.

386 Глава 8. JavaScript 
•••-' • 3 J -Л Д-J J -> .* В - 
Адрес je] http /yMmlwbdesign/ChapterOo/FigureOa-G 
HTML & Web Design Tips & Techniques 
«\ Вобропо: 
Рис. 8.2. Окно сообщения, отображенное поверх Web-страницы 
при помощи JavaScript-оператора из функции 
Рис. 8.2. Окно сообщения, отображенное поверх Web-страницы 
при помощи JavaScript-оператора из функции 
Большинство написанных вами операторов JavaScript должны завершаться 
точкой с запятой (;). Поскольку некоторые Web-браузеры игнорируют символы 
возврата каретки и перевода строки, можно получить непредсказуемый результат, 
опустив необязательные точку с запятой в конце оператора JavaScript. Чтобы 
операторы всегда выполнялись надлежащим образом, ставьте точку с запятой (;) 
в конце каждого оператора, вне зависимости от того, записываете ли вы операто- 
ры в сценарии по одному в строке или же записываете в одной и той же строке 
по несколько операторов. 
В конце каждой функции, перед закрывающей правой фигурной скобкой (}), 
ставится ключевое слово return. Оператор return — оператор возврата. Как и 
следует из его названия, он возвращает управление Web-браузером оператору, 
вызвавшему функцию. Чтобы вызвать функцию JavaScript, запишите имя функ- 
ции в выражении или же в виде независимого оператора внутри функции или 
сценария. Например, чтобы браузер, начав загружать Web-страницу, вызвал (то 
есть выполнил) функцию greetvisitor(), вы напишете следующий HTML-код: 
<body> 
<hl>HTML & Web Design Tips & Techniques</hl> 
<script language="JavaScript"> 
greetVisitor(); 
// > 
</script> 
<р>Обратите внимание, что Web-браузер выводит на экран окно сообщения 
JavaScript <br> 
и ждет, прежде чем отображать текст, идущий после сценария, <br> 
внедренного в тело страницы. </р> 
</body>

Глава 8. JavaScript 3 8 7 
Если вы вызываете функцию из тела Web-страницы (как это делается в приве- 
денном выше HTML-коде с помощью оператора greetvisitoro;, заключенного 
между начальным и конечным дескрипторами сценария (<scriptx/script>)), 
браузер прекращает считывать HTML-код Web-страницы и выполняет операторы, 
находящиеся в теле функции. Браузер не возвращается в точку страницы, в кото- 
рой страница вызвала функцию, до тех пор, пока не выполнит оператор return 
или не дойдет до закрывающей фигурной скобки (}) в конце функции. Как вы 
узнаете из практикума "Реагирование на события JavaScript" далее в этой главе, 
вызывать функции JavaScript можно также с помощью обработчиков событий. 
При использовании для вызова функции обработчика события браузер будет 
продолжать загрузку и отображение Web-страницы, в то время как обработчик 
событий вызовет функцию и будет ожидать выполнения компьютером операто- 
ров функции. 
Передача значений в функцию и из функции 
Вызывая функцию JavaScript, вы можете передать в нее значения переменных, 
называемых параметрами {parameters). Список параметров функции находится 
между скобками, стоящими после имени функции в ее объявлении. Например, 
следующий код объявляет функцию с двумя параметрами — Age (возраст) и 
shoesize (размер обуви): 
function сотриtelQ(Age, ShoeSize) 
{
Age = Age * 2 ; 
alert ("Удвоенный возраст = " + Age + "; размер обуви = " + ShoeSize) ; 
return (Age * ShowSize) / 2 ; 
} 
Чтобы передать значения функции computeiQO ("вычислить коэффициент 
умственного развития"), включите в вызов функции параметры, как показано 
ниже: 
IQ = computeIQ(Years01d, 10); 
Вызывая computeiQO, браузер передаст функции значение переменной 
Yearsoid (сколько лет) в параметре Age и число 10 через параметр ShoeSize. 
Короче говоря, браузер присваивает значения параметрам функции по позиции, 
то есть первое значение в вызове функции присваивается первому параметру в 
объявлении, второе значение — второму параметру и т.д. Следовательно, если вы 
присвоите Yearsoid значение 20 и затем вызовете computeiQO, функция выве- 
дет На ЭКраН ОКНО сообщения СО Следующим текстом: "Удвоенный возраст = 
40; размер обуви = Ю". В отличие от функций в предыдущих примерах, 
computeiQO возвращает значение вызывающему ее объекту. Чтобы возвратить 
значение из функции, вставьте значение, которое вы хотите отправить обратно, 
сразу же после ключевого слова return (см. последнюю перед закрывающей фи- 
гурной скобкой (}) строку в данном примере).

38 8 Глава 8. JavaScript 
Зарезервированные слова JavaScript 
Называя функцию или создавая переменные для хранения информации во 
время выполнения Web-браузером операторов в функции или сценарии, вы дол- 
жны выбирать имена функций и переменных такие, чтобы они не конфликтова- 
ли с зарезервированными словами {reserved words) JavaScript, перечень которых 
можно найти в таблице 8.1. Слово function, например, идентифицирует начало 
объявления функции, равно как слово return дает браузеру указание вернуться в 
ту точку, в которой он вызвал функцию. Если вы попытаетесь использовать в ка- 
честве имен функций или переменных зарезервированные слова, Web-браузер, 
обнаружив ненадлежащим образом использованное слово, прекратит выполнение 
сценария или функции. 
Пояснение выполняемой сценарием обработки с 
помощью комментариев 
Создавая сценарии и функции, вы можете вставлять между операторами 
JavaScript примечания для пояснения обработки, которую должен выполнять 
браузер. Такие примечания программисты называют комментариями (comments). 
Вставка в код комментариев не только помогает другим разработчикам понять 
ваш сценарий, но также может помочь вам вспомнить, для чего в сценарии ис- 
пользованы те или иные операторы — особенно после того, как вы не заглядыва- 
ли в сценарий в течение нескольких месяцев. Чтобы поместить в JavaScript-код 
комментарий, поставьте две левые косые черты (//) и наберите свое примечание, 
как показано ниже: 
// Это комментарий 
Обнаружив двойную косую черту, Web-браузер игнорирует весь остальной 
текст на данной строке. Помимо однострочных комментариев, которые начина- 
ются с двойной косой черты (//), JavaScript поддерживает также блочные ком- 
ментарии, которые начинаются с косой черты и звездочки (/*) и заканчиваются 
звездочкой и косой чертой (*/), как показано ниже: 
Таблица 8.1. Зарезервированные слова JavaScript 
abstract 
Boolean 
break 
byte 
case 
catch 
char 
class 
const 
continue 
default 
delete 
do 
double 
else 
extends 
false 
final 
finally 
float 
for 
function 
goto 
if 
implements 
import 
in 
instanceof 
int 
interface 
long 
native 
new 
null 
package 
private 
protected 
public 
return 
short 
static 
super 
switch 
synchronized 
this 
throw 
throws 
transient 
true 
try 
typeof 
var 
void 
while 
with

Глава 8. JavaScript 3 8 9 
/* 
Браузер будет игнорировать весь текст, обнаруженный им после косой 
черты-звездочки, с которых начинается блок комментариев, до тех пор, 
пока не считает звездочку-косую черту, которые завершают 
многострочный комментарий. 
*/ 
Обнаружив блочный комментарий, браузер будет игнорировать весь текст, на- 
ходящийся между /* и */. Разработчики часто превращают в комментарий те 
или иные фрагменты кода, чтобы определить источник ошибок в обработке, вы- 
полняемой сценарием. Предположим, например, что у вас есть Web-страница, в 
которой вы определили следующую функцию JavaScript: 
function visitorSignln(Form) 
{ 
if (Form. f name. value == "") return false; 
if (Form.lname.value == "") return false; 
if (Form.email.value == "") return false; 
• // Загрузить другую Web-страницу 
self.location = "htdocs/Loggedln.htm"; 
return; 
} 
Если функция visitorSignln о по .акой-либо причине не может отобразить 
новую Web-страницу (Loggedln.htm), можно закомментировать три первых опе- 
ратора функции следующим образом: 
function visitorSignln(Form) 
{ 
/* 
if (Form. f name. value == "") return false; 
if <Form- lname. value = =f>") return false; 
if (Form.email.value == "") return false; 
*/
// Загрузить другую Web-страницу 
self.location = "htdocs/Loggedln.htm"; 
return; 
} 
Тогда, еСЛИ браузер ПОСЛе ВЫЗОВа фуНКЦИИ ОТОбраЗИТ Страницу Loggedln.htm, 
вы будете знать, что "проблема" связана с первыми тремя операторами функ- 
ции, поскольку без них функция таки загружает новую страницу. Аналогично, 
если браузеру все равно не удается загрузить новую Web-страницу, ошибка 
возникает "по вине" оператора, который должен загружать страницу (то есть 
self .location). После устранения источника ошибки, не забудьте удалить /* и 
*/ или //, с помощью которых вы превращали один или несколько операторов в 
сценарии или функции в комментарий в процессе тестирования/отладки. 
Объявление переменных в сценарии или функции 
Внутри операторов JavaScript сценарий хранит информацию с помощью пере- 
менных. В отличие от большинства языков программирования, при объявлении 
переменной вам не нужно указывать тип информации, которую вы собираетесь

390 Глава 8. JavaScript 
хранить в этой переменной. Вместо этого JavaScript присваивает тип данных каж- 
дой переменной в зависимости от типа данных, сохраняемых в переменной. Бо- 
лее того, тип данных переменных может изменяться в зависимости от операции, 
в которой переменная используется. Приведенные ниже операторы определяют 
несколько различных переменных: 
var BookTitle, ChapterNumber; 
var Publisher; 
var StringValue = "10", IntValue *== 20; 
var ConcatenatedValue = StringValue + IntValue; //результатом будет "1020" 
var AdditionValue = StringValue + IntValue; // результатом будет 30 
Следовательно, чтобы объявить переменные в сценарии, необходимо указать 
имя переменной (имена переменных) после ключевого слова var (как в первых 
двух строках). Если вы хотите присвоить переменной начальное значение, по- 
ставьте после имени переменной знак операции присваивания (=) и начальное 
значение (как в трех последних строках приведенного выше сценария). JavaScript 
накладывает следующие ограничения на объявления переменных: 
• Имя переменной не может конфликтовать (то есть совпадать) с ключевым 
словом JavaScript. § 
• Имена переменных должны начинаться с буквы либо символа подчеркива- 
ния (_) и могут содержать цифры или буквы после первого символа. 
• Имена переменных не могут включать в себя пробелы или знаки пунктуации. 
Имена и ключевые слова JavaScript (как, например, var) чувствительны к ре- 
гистру, что значит, что var — ключевое слово, a var — нет. Аналогично, 
stringvalue И StringValue — Имена разных переменных. 
Понятие операций JavaScript 
Операции позволяют комбинировать переменные и/или литералы в выраже- 
ния, дающие значения, которые затем можно выводить на экран, сохранять в пе- 
ременных или использовать в других выражениях. Операции JavaScript можно 
сгруппировать в несколько классов, в зависимости от назначения операции. В 
таблице 8.2 приведены арифметические операции JavaScript, которые требуют двух 
переменных, значений или выражений (по одному с каждой стороны от знака опе- 
рации). 
Таблица 8.2. Бинарные арифметические операции JavaScript 
Операция Назначение Пример 
Сложение выражение + выражение 
Вычитание выражение - выражение 
Умножение выражение * выражение 
Деление выражение / выражение 
Остаток выражение % выражение 
(возвращает 
остаток деления)

Глава 8. JavaScript 391 
Хотя первые три операции в таблице 8.3 вы могли бы классифицировать как 
арифметические, они являются унарными операциями, поскольку эти операции 
выполняются только над одним выражением. 
Таблица 
Операция 
++ 
8.3. Унарные операции JavaScript 
Назначение 
Инкремент (прибавление 1) 
Декремент (вычитание 1) 
Отрицание 
Дополнение (Операция НЕ) 
Пример 
переменная ++ или ++переменная 
переменная— или —переменная 
-выражение 
'выражение 
Когда вы помещаете двойной знак плюс (++) или двойной знак минус (—) 
перед переменной (префиксная операция), действие выполняется перед присвое- 
нием значения. И наоборот, если вы поместите знак операции инкремента или 
декремента после переменной (постфиксная операция), действие будет выполне- 
но после присвоения значения. Например: 
i = 10; 
j=9, i=9 
Знак операции дополнения — то есть восклицательный знак (!) — возвращает 
значение, обратное логическому значению (true (истина) или false (ложь)) пе- 
ременной, оставляя значение переменной неизменным. Например: 
Test Result = true; 
document.write(TestResult); // true 
document.write(!TestResult); // false 
Операции сравнения, как следует из их группового названия, позволяют срав- 
нивать одно выражение, переменную или литерал с другим. Обычно операции 
сравнения (приведенные в таблице 8.4) используются в условных операторах (та- 
ких Как if И if-else) И уПраВЛЯЮЩИХ НИЮЖ (таКИХ Как while И for). 
Таблица 8.4. 
Операция 
<
>
<= 
>= 
== 
!= 
?: 
Операции сравнения JavaScript 
Назначение 
Меньше 
Больше 
Меньше или равно 
Больше или равно 
Равно 
Неравно 
Условный (if-else) 
Пример 
выражение 
выражение 
выражение 
выражение 
выражение 
выражение 
(логическое 
< выражение 
> выражение 
<= выражение 
>= выражение 
== выражение 
!= выражение 
выражение)? 
выражение TRUE : выражение FALSE

3 9 2 Глава 8. JavaScript 
Знак условной операции (?:) — это специальный знак операции сравнения, 
применяемый только в операторах присваивания, где этот знак операции функ- 
ционирует как оператор if-eise, с помощью которого принимается решение, 
какое из двух значений присвоить. Например, в приведенном ниже операторе, 
если выражение в скобках равно True (истинно), оператор присваивает перемен- 
ной первое значение после вопросительного знака (?). И наоборот, -если выраже- 
ние равно False (ложно), оператор присваивает значение после двоеточия (:), 
как показано ниже:* 
PassingThisClass = (GPA>=2.0) ? "да" : "нет"; 
Логические операторы позволяют сравнивать два логических (булевых) значе- 
ния. Логические операторы, приведенные в таблице 8.5, обычно применяются 
для сравнивания результатов двух выражений сравнения в условном операторе 
или управляющем цикле. 
Таблица 
Операция 
&& 
II 
8.5. Логические операции 
Назначение 
и
Или 
JavaScript 
Пример 
выражение 
выражение 
&& выражение 
|| выражение 
Условная и повторяющаяся обработка 
Сценарий — это перечень инструкций, которые Web-браузер выполняет для 
решения определенной задачи. Во всех простых сценариях, которые рассматри- 
вались до сих пор, Web-браузер начинает с первого оператора и выполняет каж- 
дый из операторов по порядку до конца сценария или функции. По мере услож- 
нения ваших сценариев у вас может возникнуть потребность в том, чтобы 
браузер выполнял один набор операторов, если условие выполняется, и, возмож- 
но, второй набор операторов, если условие не выполняется. Иными словами, вам 
понадобится, чтобы браузер принимал решения и действовал в соответствии. 
Сценарии, принимающие решения, производят условную обработку. Иными сло- 
вами, в зависимости от результата одного или нескольких условий браузер будет 
выполнять те или иные операторы. 
Чтобы принять решение, сценарий должен выполнить какого-либо рода про- 
верку. Например, один сценарий может проверять, правильный ли пароль ввел 
посетитель, а второй — верное ли количество цифр содержится в введенном по- 
сетителем номере телефона. Выполнять такую проверку сценарий будет с помо- 
щью операций сравнения, перечисленных в таблице 8.4. Операции сравнения 
позволяют сценариям определить, как одно значение "сравнивается" с другим. 
Иными словами, с помощью операций сравнения сценарии могут проверять, 
равно ли одно значение другому, больше ли одно значение другого или меньше 
его. При использовании операторов отношения результатом сравнения будет 
либо true (истина), либо false (ложь) — в том смысле, что два значения либо 
удовлетворяют условию (true), либо нет (false). Практикум, озаглавленный 
"Принятие сценарием решений и выполнение соответствующей обработки", по-

Глава 8. JavaScript 3 9 3 
кажет, как использовать три различные формы операторов if-then-eise, кото- 
рые позволяют Web-браузеру решить, какие из операторов сценария выполнить, 
основываясь на результатах сравнений. 
С принятием решений в сценариях тесно связана возможность повторения 
одного или нескольких операторов определенное число раз или до выполнения 
известного условия. В двух практикумах ниже будет показано, как использовать 
циклы for и while для повторения действий в сценариях и функциях. Оператор 
while дает возможность создать цикл, в котором браузер будет повторно выпол- 
нять набор операторов JavaScript, пока заданное условие остается истинным. В 
то же время оператор for создает цикл, в котором браузер будет выполнять на- 
бор операторов фиксированное число раз или до появления предопределенного 
события (выполнения предопределенного условия). 
Вставка функций JavaScript в HTML-код Web-страницы 
Хотя функции JavaScript можно определять где угодно в HTML-коде страни- 
цы, вставляйте их в конце заголовочного раздела Web-страницы (то есть прямо 
перед дескриптором </head> в начале страницы). Вставка функций JavaScript в 
заголовок Web-страницы гарантирует, что Web-браузер загрузит функции до того, 
как пользователь сможет инициировать событие, дающее браузеру указание вы- 
полнить какую-то из функций. Кроме того, помещая все функции в одно и то 
же место вверху страницы, вы облегчите себе их поиск в случае, если вам пона- 
добится их модифицировать. (У Web-браузера не будет никаких проблем с на- 
хождением функций, которые ему необходимо выполнить, где бы они не находи- 
лись в рамках HTML-файла.) 
Отображение документа в устаревших браузерах, 
не поддерживающих сценарии 
Как вы узнали в начале этой главы, операторы JavaScript внедряется в HTML- 
код Web-страницы между начальным и конечным дескрипторами сценария 
(<scriptx/script>). Браузер выполняет сценарий, когда загружает страницу, 
или когда вы даете ему указание это сделать посредством вызова определенной 
пользователем функции, содержащей операторы .сценария. К сожалению, под- 
держка языком HTML сценариев не зависит от самого языка написания сцена- 
риев. Когда вы включаете в HTML-документ сценарий, у вас нет гарантии того, 
что Web-браузер посетителя будет поддерживать выполнение сценариев. Чтобы 
уведомить пользователя, если его браузер не поддерживает выполнение сценари- 
ев, вставьте начальный и конечный дескрипторы альтернативного воспроизведе- 
ния документа со сценарием (<noscriptx/noscript>) в содержащий сценарий 
HTML-документ. Эти дескрипторы должны находиться где-нибудь в основной 
части Web-страницы (то есть где-либо между начальным и конечным дескрипто- 
рами тела (<bodyx/body>) страницы). Лучше же всего размещать дескриптор 
<noscript> непосредственно после дескриптора </script>.

39 4 Глава 8. JavaScript 
ПРАКТИКУМ 
Введите между начальным и конечным дескрипторами альтернативного воспро- 
изведения документа со сценарием (<noscriptx/noscript>) текст, который вы 
хотите отобразить в случае, если браузер не поддерживает сценарии. Приведен- 
ный ниже HTML-код иллюстрирует использование начального и конечного деск- 
рипторов альтернативного воспроизведения документа со сценарием 
(<noscriptx/noscript>): 
<html> 
<head> 
<body> 
<title>IIpMMep JavaScript</title> 
</head> 
<script language="JavaScript "> 
document.write("Это пример JavaScript-кода!"); 
// - 
</script> 
<noscript>IIoflflep3KKa JavaScript отсутствует... Извините !</noscript> 
</body> 
</html> 
Хотя сценарий в этом примере просто сообщает посетителю, что используемый 
им браузер не поддерживает JavaScript, следует предоставлять какое-нибудь 
допол- 
нительное содержимое. Например, можно объяснить, как включить поддержку 
JavaScript в браузере или дать гиперссылку, по которой посетитель сможет 
загрузить 
браузер с поддержкой JavaScript (например, Netscape Navigator или Internet 
Explorer). 
Интересно, что начальный и конечный дескрипторы альтернативного воспро- 
изведения документа со сценарием (<noscriptx/noscript>) — это нефункцио- 
нальные дескрипторы. Если браузер поддерживает сценарии, он распознает эти 
дескрипторы и игнорирует заключенную между ними информацию. Браузеры, 
которые не распознают дескриптор <script> (то есть браузеры без поддержки 
сценариев), также не распознают начальный и конечный дескрипторы альтерна- 
тивного воспроизведения документа со сценарием (<noscriptx/noscript>). В 
результате такие браузеры игнорируют эти дескрипторы и попросту отображают 
все, что находится между ними, как обычный текст Web-страницы. 
Хранение множественных значений в одной 
переменной с помощью массивов JavaScript 
Массив — это специальная переменная, содержащая множество значений од- 
ного и того же типа данных. Предположим, например, вы занимаетесь реализа- 
цией товаров пяти наименований, и вам нужно отслеживать количество и цену 
каждого наименования товара, имеющегося у вас в наличии. Вы могли бы со- 
здать пять переменных для хранения количества каждого из пяти наименований 
товара, и пять других переменных для хранения их цен, как показано ниже: 
var ItemCountl, ItemCount2, ItemCount3, ItemCount4, ItemCount5; 
var ItemPricel, ItemPrice2, Item]?rice3, ItemPrice4, ItemPrice5;

Глава 8. JavaScript 3 9 5 
Теперь представьте себе, что ваш ассортимент насчитывает 100 наименований 
товаров. Вам придется потратить немало времени на объявление переменных и 
набор имен переменных в функциях, где потребуется обработать все товары сразу 
(например, подсчитать общую стоимость запасов). 
ПРАКТИКУМ 
К счастью, JavaScript предусматривает возможность создания одной переменной, 
могущей содержать в себе любое число значений — массива {array). Например, 
чтобы создать массивы, которые смогут содержать в себе количества и цену каж- 
дого наименования товара из ассортимента в 100 наименований, вам понадобят- 
ся следующие операторы: 
var ItemCount = new Array(100) ; 
var ItemPrice • new Array (100) ; 
Каждый из двух этих массивов, ItemCount и ItemPrice, содержит 100 участ- 
ков памяти, называемых элементами, причем каждый элемент работает как пере- 
менная в том смысле, что каждый элемент может содержать в себе одно значе- 
ние. К каждому из элементов массива вы можете обратиться с помощью индекса 
{index), используя следующий синтаксис: имя_массива [Индекс]. Поскольку от- 
счет элементов в массивах JavaScript начинается с нуля, первый элемент массива 
имеет индекс 0. Следовательно, чтобы сохранить цену и количество товара 1, 
вам нужно будет написать что-то вроде 
ItemCount[0] = 5; 
ItemPrice[0] = 125.50; 
Аналогично, количество и цену товара 100 вы бы сохранили в элементе мас- 
сива с индексом 99 с помощью следующих операторов: 
ItemCount[99] = 10; 
ItemPrice[99] = 89.95; 
Принятие сценарием решений и выполнение 
соответствующей обработки 
Оператор if позволяет сценариям произвести проверку и затем выполнять 
операторы, основываясь на результате проверки. Проверку оператор if обычно 
выполняет с помощью операции сравнения JavaScript. Если результатом провер- 
ки является true, сценарий выполняет операторы, идущие после if. Если же ре- 
зультат проверки - false, сценарий игнорирует (пропускает) следующий опера- 
тор. Формат оператора if выглядит следующим образом: 
if (условие) 
оператор; 
ПРАКТИКУМ 
Обратите внимание, что после if (условие), с которых начинается оператор 
if, точка с запятой не ставится, поскольку оператор if продолжается на следую- 
щей строке. В приведенном ниже сценарии определена функция checkieo, в 
которой оператор if используется для сравнения значения, хранящегося в пере-

3 96 Глава 8. JavaScript 
менной Age (возраст), со значением 18. Если возраст больше или равен 18, сцена- 

рий выдаст посетителю сообщение. В противном же случае, если значение меньше 
18, сценарий просто возвращает управление оператору, вызвавшему функцию: 
function checkl8() 
{ 
var Age = 25; 
if (Age >= 18) 
alert ("Пожалуйста, зарегистрируйтесь в списках избирателей на сайте 
www.VoterRegistration.com"); 
return; 
}
При использовании в сценариях оператора if для условной обработки в не- 
которых случаях ваш сценарий должен будет выполнить только один оператор, 
если условие истинно; в других случаях сценарий должен будет выполнить не- 
сколько операторов. Когда сценарий выполняет только один оператор, следую- 
щий после if, этот оператор является простым: 
if (Age >= 18) 
alert("Пожалуйста, зарегистрируйтесь в списках избирателей на сайте 
www.VoterRegistration.com"); 
Чтобы сценарий выполнял несколько операторов, когда условие истинно, 
операторы потребуется сгруппировать между левой и правой фигурными скобка- 
ми ({ }). Операторы внутри фигурных скобок формируют составной оператор, 
как показано ниже: 
if (Password != "Secret") 
{ 
alert("Неверный пароль"); 
window.location = "htdocs/InvalidPassword.htm" 
Важно не столько помнить термины "простой оператор" и "составной опе- 
ратор", сколько знать, что связанные между собой операторы следует группировать 
внутри 
пары фигурных скобок ({ }). 
В начале данного практикума вы с помощью оператора if определяли, был 
ли возраст посетителя больше или равным 18. Если условие было истинным, 
сценарий выводил на экран сообщение для пользователя. Если условие было 
ложным, то есть возраст посетителя был меньше 18, сценарий не выводил на эк- 
ран никакого сообщения, а просто завершался. В большинстве случаев вам нуж- 
но будет задавать в сценариях один набор операторов, который будет выполнять- 
ся, когда условие истинно, и второй набор, выполняющийся тогда, когда условие 
ложно. Для того, чтобы задать операторы, которые будут выполняться в случае, 
если условие ложно, нужно включить в сценарий оператор else. Формат опера- 
тора else следующий: 
if (условие) 
оператор; 
else 
оператор;

Глава 8. JavaScript 3 9 7 
В приведенном ниже сценарии функция checkieo изменена так, что в ней 
для проверки того, больше или равно ли значение переменной Age восемнадца- 
ти, используется оператор if-eise. Если условие истинно, сценарий выдаст по- 
сетителю сообщение, напоминающее о том, что ему необходимо проголосовать. 
Если условие ложно, сценарий выведет на экран сообщение, советующее посети- 
телю "прилежно учиться и получать хорошие оценки": 
function checkl8() 
{ 
var Age = 15; 
if (Age >= 18) 
alert("He забудьте проголосовать!"); 
else 
alert ("Учись прилежно и получай хорошие оценки!11) ; 
return; 
}
Выше в этом практикуме вы использовали оператор if-eise для выполнения 
одного набора операторов, когда условие истинно, и другого набора операторов, 
если условие ложно. Однако существуют случаи, когда вашему сценарию нужно 
будет проверить несколько связанных между собой условий. Например, предполо- 
жим, вашему сценарию нужно определить телефонный код посетителя. Чтобы это 
сделать, сценарий должен сделать проверку на несколько различных городов. Серия 

операторов if-eise в приведенном ниже операторе представляет собой упрощен- 
ный пример обработки, которую в этом случае может выполнять ваш сценарий: 
if (City — "Нью-Йорк") 
AreaCode = 212; 
else if (City == "Хьюстон") 
AreaCode = 2 81; 
else if (City == "Феникс") 
AreaCode = 602; 
else if (City == "Сиэттл") 
AreaCode = 206; 
else . * 
AreaCode = 0 ; // Программе не известен телефонный код города 
Когда сценарий выполняет первый оператор if, он проверяет, является ли го- 
род Нью-Йорком. Если это так, сценарий присваивает переменной AreaCode 
значение 212. Если город — не Нью-Йорк, сценарий выполняет else if, чтобы 
проверить, является ли город Хьюстоном. Такую обработку сценарий будет вы- 
полнять для каждого города до тех пор, пока не найдет соответствующего города 
или не дойдет до последнего оператора else. Если сценарий не найдет соответ- 
ствующего города, он присвоит переменной AreaCode значение 0. 
Принятие решений на основании двух 
или более условий 
По мере усложнения ваших сценариев, вам иногда будет приходиться прове- 
рять более одного условия за раз. Например, ваш сценарий может проверять, со- 
ставляет ли возраст посетителя больше 20 и меньше 50 лет. Или же вы можете

398 Глава 8. JavaScript 
проверять, есть ли у посетителя собака или кошка. Для выполнения подобных 
действий вы будете пользоваться операцией логического И (&&) и операцией ло- 
гического ИЛИ (||). Если в своем сценарии вы используете операцию логичес- 
кого И или логического ИЛИ для проверки более чем одного условия, каждое 
условие необходимо заключить в скобки, как в приведенном ниже операторе if, 
который с помощью операции логического ИЛИ проверяет, есть ли у посетителя 
собака или кошка: 
if ((у_посетителя__есть__собака) | | (у_посетителя__есть__кошка)) 
Оператор 
Аналогично, в следующем операторе операция логического И используется для 
определения того, находится ли возраст посетителя в промежутке от 20 до 50: 
if ((возраст Н 20) && (возраст <= 50)) 
Оператор 
При использовании операции логического И (&&), для того, чтобы все усло- 
вие считалось истинным, все условия внутри оператора должны быть истинны- 
ми. Если какое-либо из условий ложно, все условие становится ложным. Напри- 
мер, если возраст посетителя не больше или не равен 20, приведенное выше 
условие ложно. Подобным образом, если возраст посетителя больше 50, условие 
ложно. Чтобы условие было истинным, посетителю должно быть 20 лет (или 
старше) и 50 лет (или моложе). 
Чтобы условие с операцией логического ИЛИ считалось истинным, только 
одно условие должно быть истинным. Например, если у посетителя есть собака, 
приведенное выше условие истинно. Если у посетителя есть кошка, условие ис- 
тинно. Точно так же, если у посетителя есть и собака, и кошка, условие истинно. 

Единственный случай, когда условие будет ложно, — если у посетителя нет ни 
соба- 
ки, ни кошки; тогда оба условия ложны и условие в целом считается ложным. 
Выполнение кода, когда условие не истинно 
ПРАКТИКУМ 
Когда в ваших сценариях используется проверка на определенные условия, иног- 
да нужно, чтобы сценарий выполнил определенные операторы, когда условие ис- 
тинно. Подобным образом может понадобиться, чтобы сценарий выполнил на- 
бор операторов, когда условие не истинно. Знак JavaScript-операции НЕ — 
восклицательный знак (!) — позволяет сценарию проверить, является ли условие 
неистиным. Например, приведенный ниже оператор проверяет отсутствие авто- 
мобиля у посетителя: 
if (!Есть__автомобиль) 
Оператор 
Операция НЕ преобразует ложное условие в истинное и истинное условие в 
ложное. Например, предположим, что у посетителя нет автомобиля. Переменная 
Есть_автомобиль будет содержать значение false. Выполняя условце с операци- 
ей НЕ, JavaScript берет текущее значение переменной (false) и применяет опе- 
рацию НЕ. Операция НЕ делает ложное значение истинным. Тогда условие в

Глава8. JavaScript 399 
целом считается истинным, и сценарий выполняет соответствующий оператор. В 
приведенном ниже операторе с помощью операции НЕ проверяется, не равен ли 
парОЛЬ посетителя "Secret"! 
if (Password != "Secret") 
Оператор 
Повторение операторов определенное число раз 
Одним из действий, которые чаще всего будут выполнять ваши сценарии, яв- 
ляется повторение одного или нескольких операторов определенное число раз, 
для чего используется оператор for. При работе с оператором for необходимо 
задать переменную, называемую управляющей переменной (control variable), кото- 
рая подсчитывает, сколько раз сценарий выполнил цикл. Например, в приведенном 
ниже цикле for переменная count используется для подсчета того, сколько раз 
сце- 
нарий выполнил цикл, так, чтобы обработка остановилась на пятой итерации: 
for (Count = 1; Count <= 5; Count + + ) 
Оператор 
РАКТИКУМ 
Оператор for состоит из четырех частей: инициализации, проверяемого условия, 
операторов, которые будут повторяться, и инкремента. Сначала оператор 
Count = 1; присваивает управляющей переменной начальное значение. Эту ини- 
циализацию оператор for выполняет только один раз, когда цикл начинается в 
первый раз. Затем цикл проверяет условие count <= 5;. Если условие истинно, 
цикл for выполняет следующие далее операторы. Если условие ложно, цикл за- 
вершается, и сценарий продолжает выполнение с первого оператора, идущего 
после цикла. Если условие истинно и цикл for выполняет оператор, цикл инк- 
рементирует переменную Count с помощью оператора count++. И, наконец, сце- 
нарий проверяет условие count <= 5;. Если условие по-прежнему истинно, сце- 
нарий выполняет операторы, и процесс инкрементирования и проверки 
переменной count повторяется. Приведенный ниже сценарий создает функцию 
oneToFive(), в которой цикл for служит для вывода на экран значений от 1 до 5: 
function oneToFive() 
{ 
var Count; 
for (Count = 1 ; Count <= 5; Count + + ) 
alert("Count = " +Count) ; 
}
В цикле for ваши возможности не ограничиваются инкрементированием зна- 
чения на 1. Следующий цикл for, например, выводит на экран каждое пятое 
число в интервале от 0 до 25: 
for (Count = 1; Count <= 25; Count += 5) 
a l e r t ("Count = " + Count) ; 
Обратите внимание на оператор, с помощью которого цикл for инкрёменти- 
рует переменную Count: 
Count +=5;

400 Глава 8. JavaScript 
Когда вам нужно добавить значение к текущему значению переменной и за- 
тем присвоить результат этой же переменной, JavaScript позволяет сделать это 
двумя способами. Во-первых, полагая, что сценарий должен добавить к перемен- 
ной count значение 5, можно сделать так: 
Count = Count + 5; 
Во-вторых, JavaScript позволяет добавить значение 5 к переменной count с 
помощью следующей сокращенной записи: 
Count +=5; 
Поскольку так писать проще, программисты обычно используют в циклах та- 
кую сокращенную запись. При использовании цикла for JavaScript не ограничи- 
вает возможности вашего сценария ведением счета в прямом направлении. При- 
веденный ниже цикл for, например, отсчитывает в обратном порядке от 10 до 1: 
for (Count = 1 0 ; Count >= 1; Count---) 
Оператор 
Наконец, JavaScript также не требует использования в качестве управляющих 
переменных цикла for исключительно целых чисел. В приведенном ниже опера- 
торе, например, использовано значение с плавающей точкой, которое цикл ини- 
циализирует значением 0.0 и затем инкрементирует на 0.10: 
for (Value = 0.0; Value <= 1.0; Value +=0.10) 
Оператор 
Повторение операторов, пока условие истинно 
В предыдущем практикуме вы узнали, что JavaScript-цикл for дает возмож- 
ность сценариям повторять один или несколько операторов определенное число 
раз. В ситуациях, когда вашим сценариям нужно выполнять оператор (или опе- 
раторы), пока выполняется определенное условие, но не обязательно определен- 
ное число раз, можно использовать JavaScript-цикл while. В общем случае фор- 
мат цикла while выглядит следующим образом: 
while (Условие); 
оператор; 
Когда сценарий обнаруживает цикл while, он сперва проверяет заданное усло- 
вие. Если условие истинно, сценарий выполняет операторы цикла while. После 
того, как последний оператор цикла выполнен, цикл while снова проверяет ус- 
ловие. Если условие по-прежнему истинно, операторы цикла будут повторены и 
процесс продолжится. Когда условие, наконец, станет ложным, цикл завершит- 
ся, и сценарий продолжит выполнение с первого оператора, идущего после цик- 
ла. В приведенном ниже сценарии цикл while используется для того, чтобы 
предлагать посетителю вводить пароль повторно, пока не будет введен пароль 
"Secret":

Глава 8. JavaScript 401 
function getPassword() 
{ 
var Password = " " ; // Присвоить начальное значение, не равное "Secret" 
while (Password != "Secret") 
Password = prompt ("Пароль", "") ; 
alert ("Bbi вошли! " ) ; 
}
Реагирование на события JavaScript 
В начале этой главы вы узнали, как вызвать (то есть выполнить) функцию 
JavaScript, набрав имя функции в виде оператора в сценарии или в виде части 
выражения. Однако иногда необходимо, чтобы браузер вызывал функцию в ответ 
на событие, которое происходит через некоторое время после загрузки страницы 
браузером. Например, у вас может быть функция "выхода", которую браузер дол- 
жен будет выполнить, когда посетитель щелкнет на гиперссылке, чтобы перейти 
на другую страницу. Подобным образом, вы можете пожелать, чтобы, когда посе- 
титель щелкает на кнопке "Отправить" формы, браузер вызывал функцию про- 
верки формы. 
К счастью, JavaScript предусматривает ряд обработчиков событий {event 
handlers), которые вы можете вставлять в HTML-дескрипторы, чтобы отслеживать 
те или иные события. Когда происходит событие, отслеживающий его обработ- 
чик даст Web-браузеру указание выполнить оператор или функцию, которую вы 
привязали к событию. В таблице 8.6 приводится общий обзор событий 
JavaScript и действий, их инициирующих. 
Если вы хотите, чтобы обработчик события JavaScript дал Web-браузеру указа- 
ние выполнить функцию, объявленную на странице, вы должны привязать функ- 
цию к определенному обработчику, отслеживающему возникновение события. 
Например, если вы хотите поприветствовать посетителя сообщением в диалого- 
вом окне, когда браузер загрузит страницу, вы присваиваете функцию JavaScript 
обработчику события onLoad. Подобным же образом, если вы хотите подсветить 
гиперссылку (текст или графическое изображение), когда посетитель проводит 
над ней курсор мыши, вы присваиваете функции JavaScript обработчикам собы- 
тий onMouseover И onMouseout. 
ПРАКТИКУМ 
Чтобы присвоить событию некоторую JavaScript-функцию, выберите обработчик 
для этого события и примите решение, какой из объектов Web-страницы будет от- 
слеживать ваш обработчик. Затем добавьте обработчик события в HTML-дескрип- 
тор, с помощью которого объект был вставлен в Web-страницу. Предположим, на- 
пример, вы поместили на Web-страницу кнопку с меткой "Щелкни на мне!" с 
помощью следующего кода: 
<form> 
<input type="button" уа1ие="Щелкни на мне!" 
onClick="youClickedIt()"> 
</form>

402 Глава 8. JavaScript 
Таблица 8.6. События JavaScript, инициирующие выполнение оператора или функции 
Событие Применимо к... Происходит, когда... 
события 
Обработчик 
abort изображениям 
blur фреймам, окнам и 
всем элементам форм 
c l i c k флажкам, гиперссылкам, 
"горячим областям" 
навигационных карт, 
кнопкам, кнопкам 
"Отправить", 
кнопкам "Очистить" 
change полям выбора со списком, 
текстовым полям, 
многострочным 
текстовым полям 
e r r o r изображениям, окнам 
focus фреймам, окнам и всем 
элементам форм 
l o a d телу документа 
mouseout областям, гиперссылкам 
mouseover областям, гиперссылкам 
reset 
select 
submit 
unload 
формам 
текстовым полям, 
многострочным 
текстовым полям 
формам 
телу документа 
посетитель преждевременно прекращает onAbort 
загрузку изображения (например, путем 
щелчка на ссылке или щелчка на 
кнопке "Остановить" браузера) 
посетитель снимает фокус ввода onBlur 
с фрейма, элемента формы или окна 
посетитель щелкает на элементе onclick 
формы или гиперссылке 
посетитель изменяет значение onChange 
в элементе формы 
Web-браузер сталкивается с ошибкой onError 
при загрузке документа или изображения 
посетитель перемещает фокус на фрейм, onFocus 
элемент формы или окно 
Web-браузер загружает Web-страницу onLoad 
посетитель убирает курсор мыши onMouseout 
с "горячей области" навигационной 
карты или гиперссылки 
посетитель наводит курсор мыши onMouseover 
на "горячую область" навигационной 
карты или гиперссылку 
посетитель делает щелчок . onReset 
на кнопке "Очистить" формы 
посетитель выделяет поле ввода onSelect 
в форме 
посетитель делает щелчок onSubmit 
на кнопке "Отправить" формы 
посетитель покидает Web-страницу onUnload 
Вставив в дескриптор <input> кнопки обработчик события onclick, вы даете 
обработчику события onclick указание отслеживать кнопку с тем, чтобы "пой- 
мать" щелчок на ней. Когда посетитель щелкнет на кнопке, обработчик события 
даст Web-браузеру указание выполнить функцию youciickedit о. Аналогично, 
если вы хотите, чтобы браузер вызывал функцию, когда посетитель наводит кур- 
сор мыши на гиперссылку, вставьте обработчик события onMouseover в дескрип- 
тор <а> гиперссылки, как показано ниже:

Глава 8. JavaScript 4 03 
<а href="http://www.NVBizNet.com" onMouseover="youAreOnIt()"> 
NVBizNet.com</a> 
Поместив обработчик события onMouseover в дескриптор <а> гиперссылки, 
вы поручаете обработчику события onMouseover давать Web-браузеру указание 
выполнить функцию youAreOnito всякий раз, когда посетитель наводит курсор 
мыши на текст гиперссылки. Говоря короче, вы связываете событие с тем или 
иным объектом на Web-странице, помещая обработчик события в дескриптор 
объекта следующим образом: обработчик__события= "функция о " . Или же, если 
вы хотите вместо вызова функции выполнить один или несколько операторов, 
вставьте в HTML-дескриптор объекта обращение к обработчику события в виде 
обработчик_события="операторы". 
Выполнение операторов JavaScript в теле 
Web-страницы 
Как вы уже знаете, функция JavaScript - это набор операторов, которые вы- 
полняют определенную задачу. Существует два типа функций: функции, создава- 
емые вами, и функции, предоставляемые JavaScript. Тогда как функции, создавае- 
мые вами, носят название функций, определенных пользователем (user-defined 
functions), стандартные функции JavaScript называются встроенными функциями 
(built-in functions). Читая материалы по JavaScript, вы заметите, что 
программис- 
ты (в особенности те из них, которые имеют дело с объектно-ориентированными 
языками программирования) также называют функции методами (methods). 
В объектно-ориентированных языках (таких как JavaScript) функции (методы) 
зачастую соответствуют определенному объекту (например, документу, то есть 
Web-странице, или чему-либо на Web-странице, например, форме, кнопке или 
гиперссылке). Как вы узнаете чуть позже, JavaScript определяет несколько объек- 

тов, которые вы можете использовать в создаваемых вами сценариях. Например, 
JavaScript связывает объект document с вашей Web-страницей. Используя объект 
document, вы можете манипулировать текстом и прочими элементами (объекта- 
ми), содержащимися на Web-странице, с помощью JavaScript-кода. 
ПРАКТИКУМ 
Каждый объект JavaScript будет иметь одну или несколько функций, которые 
можно вызывать для выполнения определенной задачи. Чтобы вызвать функцию 
объекта (то есть вызвать один из методов, связанных с объектом), указывается 
имя объекта, после которого ставится точка (.) и имя метода (функции). Напри- 
мер, чтобы поместить текст на текущую Web-страницу с помощью метода write 
объекта document, вам потребуется включить в свой сценарий оператор 
JavaScript, аналогичный следующему: 
document.write("Сообщение"); 
JavaScript воспринимает текущую Web-страницу как объект document, и его 
метод write (как следует из имени функции) записывает переданный ему текст 
на Web-страницу. Следовательно, чтобы Web-браузер выполнил функцию (то есть

404 Глава 8. JavaScript 
метод), связанную с объектом, вам нужно записать в своем сценарии вызов фун- 
кции в виде имя__об»ьекта.метод (). Приведенный ниже HTML-код, например, 
дважды вызывает метод document.write() (то есть метод write объекта 
document), чтобы отобразить текст "Добро пожаловать на Web-страницу с моим 
первым JavaScript-сценарием.", как показано на рис. 8.3. 
<html> 
<body> 
<hl>HTML & Web Design Tips & Techniques</hl> 
<р>Нижееледующий сценарий вставит в Web-страницу текст.<р> 
<script> 
// Записать на Web-страницу строку текста 
document.write ("<рХЬ>Добро пожаловать на Web-страницу " ) ; 
document.write ("с моим первым JavaScript-сценарием.</ЬХ/р>") ; 
// -> 
</script> 
<р>Если ваш Web-браузер поддерживает JavaScript, прямо перед этим 
текстом вы увидите приветственное сообщение.</р> 
</body> 
</html>
:; 5.айл Ораака Шид : Избранное Сервис .пре 
•{§] http://htrnhwG bde stgn/Chapte rD 8/Fi g и re 08-03 htm 
HTML & Web Design Tips & Techniques 
Нижеследующий сценарий вставит в Web-страницу текст. 
Добро пожаловать на Web страницу с моим первым JavaScript-сценарием. 
Если ваш Web-браузер поддерживает JavaScript, прямо перед этим текстом вы 
увидите 
приветственное сообщение. 
Рис. 8.3. Web-страница с приветственным сообщением, сгенерированным JavaScript 
Обратите внимание, что сценарий в этом примере дважды вызывает метод 
document.write() в связи с накладываемым издательской компанией ограниче- 
ниями на длину печатной строки книги. Когда вы вызываете один и тот же ме- 
т*од для записи текста на Web-страницу, вы можете передать строку практически 
любой длины. По существу, вы могли бы отобразить (и так бы и сделали) второй 
абзац в этом примере с помощью одного вызова метода document.write(). 
Используя метод для вставки текста в Web-страницу document. write о, обя- 
зательно снабжайте текст, который вы хотите отобразить, какими-то HTML-деск- 
рипторами форматирования. Обратите внимание, что текст во втором вызове

Глава 8. JavaScript 4 0 5 
функции document.write () в данном примере не начинается с дескриптора <р>. 
В результате Web-браузер, считав сгенерированный функцией HTML-код, отобра- 
зил вторую строку текста (на той же строке) сразу же после текста, выведенного 
первым вызовом функции. 
Для создания текстовой строки, передаваемой методу document,write о, 
можно также использовать операции манипулирования строками JavaScript. Если 
вам нужно разбить длинную текстовую строку ради форматирования, причем 
так, чтобы браузер в то же время отображал ее в виде одной строки текста, вы 
МОЖете ИСПОЛЬЗОВаТЬ ДЛЯ ЭТОГО НеСКОЛЬКО ВЫЗОВОВ фуНКЦИИ document.wri t e() , 
как показано в примере ранее. Или же вы можете сделать это с помощью конка- 
тенации строк (+) и одного вызова функции, как показано ниже: 
document.write ("<рХЬ>Добро пожаловать на Web-страницу " + 
"с моим первым сценарием JavaScript.</bX/p>") ; 
Вызов определенной пользователем функции 
JavaScript 
Из предыдущего практикума вы узнали, что функции, которые пишете вы, 
называются функциями, определенными пользователем, тогда как стандартные 
функции самого JavaScript называются встроенными функциями (или метода- 
ми). Вы также научились вызывать встроенные функции (например, метод 
document.write()), записывая вызов функции в операторе JavaScript следую- 
щим образом: имя__объекта.метод (). Конструкция document, write (сообщение), 
например, дает Web-браузеру указание вызвать метод (функцию) write объекта 
document И передать ему текстовую Строку сообщение. 
ПРАКТИКУМ 
Встроенные функции JavaScript связаны с тем или иным объектом (например, 
объектом document, или Web-страницей); функции же, определенные пользовате-, 
лем, — нет. Поэтому вместо того, чтобы вызывать определенную пользователем 
ФУНКЦИЮ Путем Обращения К Объекту И фуНКЦИИ В ВИДе имя_рб«ьекта.имя_функ- 
ции(), вы вызываете созданную вами функцию, попросту помещая ее имя в опе- 
ратор или выражение. Например, приведенный ниже HTML-код дает Web-брау- 
зеру указание вызвать определенную пользователем функцию heiioworid после 
того, как он вызовет метод document. write о для вставки строки текста в теку- 
щую Web-страницу: 
<script> 
// Записать строку текста на Web-страницу 
document.write("<р>Чтобы продолжить, щелкните на кнопке ОК.</р>"); 
// Вызвать определенную пользователем функцию JavaScript "helloWorld" 
helloWorld() ; 
// — > 
</script> 
Как вы, наверное, догадались, прежде чем вызывать функцию, определенную 
пользователем, вы должны "определить", или объявить, саму функцию. Програм-

40 6 Глава 8. JavaScript 
мисты. называют оператор, которые определяет имя функции и перечисляет ее 
операторы, объявлением (declaration) функции. В приведенных ниже HTML-ут- 
верждениях показано сначала объявление функции heiioworid(), которое нахо- 
дится между первой парой дескрипторов сценария (<scriptx/script>) внутри 
заголовка Web-страницы. Далее в HTML-коде показан оператор, который соб- 
ственно "вызывает" функцию, — сразу же перед дескриптором </script> в теле 
Web-страницы. (Когда вы "вызываете" функцию, вы даете Web-браузеру указание 
выполнить операторы, которые вы перечислили в определении функции.) 
<html> 
<head> 
<script> <!-- | • 
function helloWorld() 
{
alert("Привет .от моей первой JavaScript-функции!") 
return; 
</script> 
</head> 
<body> 
<hl>Web-страница с JavaScript-функцией</Ы> 
| сценарий выведет на экран окно сообщения.</р> 
<script > 
// Записать строку текста на Web-страницу 
document .write("<pXb> Чтобы продолжить, щелкните ОК" ) ; 
// Вызвать JavaScript-функцию helloWorld 
helloWorld() ; 
// - > 
</script> 
<р>Теперь, когда вы убрали окно сообщения, 
как отобразить его снова?</р> 
<р>Ведь в HTML нет дескриптора цикла, с помощью которого можно было бы 
дать браузеру указание прочитать HTML-код Web-страницы и выполнить 
функцию снова.</р> 
</body> 
</html> 
Как всегда, дескриптор <script> в заголовке Web-страницы сообщает Web- 
браузеру, что последний должен воспринимать все, вплоть до следующего деск- 
риптора </script>, как операторы JavaScript. Однако когда в данном примере 
Web-браузер считывает JavaScript-код в заголовочной части HTML-кода, он загру- 
жает определенную пользователем функцию JavaScript heiioworid() в память, 
но не исполняет операторы этой функции. Такое поведение (невыполнение опе- 
раторов при считывании объявления функции) не имеет никакого отношения к 
тому, что вы объявили функцию в заголовке Web-страницы. Всякий раз, когда 
Web-браузер обнаруживает в сценарии ключевое слово function, он знает, что 
сейчас он будет считывать объявление функции, а не оператор, который он дол- 
жен выполнить немедленно. В результате браузер попросту считывает в память

Глава 8. JavaScript 4 0 7 
имя функции, ее параметры (в скобках после имени) и операторы функции (все, 
что находится между открывающей и закрывающей фигурными скобками ({}), 
которые следуют после списка параметров функции). 
По традиции, браузер не выполняет операторы в JavaScript-функции (такой, 
как функция heiioWorid() в текущем примере), пока вы не дадите ему указание 
это сделать. Как уже говорилось, вы можете вызвать (call) функцию (то есть дать 

Web-браузеру указание выполнить операторы функции), записав имя функции в 
операторе сценария, вставленного между начальным и конечным дескрипторами 
сценария (<scriptx/script>) в разделе тела Web-страницы. Более того, как вы 
узнаете из следующего практикума, вы можете воспользоваться обработчиком со- 
бытия, чтобы дать Web-браузеру указание вызвать функцию на основании собы- 
тия (например, щелчка на гиперссылке в пределах Web-страницы) или элемента 
формы (такого, как поле ввода или кнопка). В соответствии с общим правилом, 
следует помещать все объявления JavaScript-функций между одной парой деск- 
рипторов сценария (<scriptx/script>) в заголовочной части HTML-кода Web- 
страницы (как и продемонстрировано в текущем примере). 
Поскольку браузер загружает содержимое заголовочной части в первую оче- 
редь, помещением всех объявлений функций в заголовок вы обеспечите, что к 
моменту, когда браузер дойдет до той точки в HTML-коде, где вы делаете пер- 
вый вызов функции, они будут считаны в память. Загрузка определенных пользо- 
вателем функций до отображения какой-либо части Web-страницы также дает га- 
рантию того, что все функции, которые вы привязали к обработчикам событий, 
будут доступны браузеру (и не будут неопределенными), когда посетитель начнет 
взаимодействовать с объектами на Web-странице и тем самым инициировать со- 
бытия, побуждая обработчики событий вызывать ваши функции. 
Вызов JavaScript-функции в обработчике события 
В предыдущем практикуме вы научились вызывать (то есть выполнять опера- 
торы) JavaScript-функций путем записи оператора, содержащего имя функции. 
Можно также сделать так, что Web-браузер будет выполнять JavaScript-функцию 
автоматически в ответ на то или иное событие. События, на которые может реа- 
гировать Web-браузер, включают в себя загрузку и выгрузку Web-страницы брау- 
зером, щелчок или наведение курсора мыши на кнопку, гиперссылку или поле 
формы. Обработчик событий — это конструкция, которая добавляется в HTML- 
дескриптор и дает Web-браузеру указание выполнить оператор JavaScript или 
вызвать функцию в ответ на то или иное действие браузера или посетителя. 
ПРАКТИКУМ 
Например, если вы хотите, чтобы Web-браузер "что-нибудь сделал", прежде чем 
выгрузить Web-страницу, добавьте в дескриптор <body> Web-страницы обработчик 
события onunioad. Обработчик события onUnioad в дескрипторе <body> Web- 
страницы, определенный приведенными ниже HTML-утверждениями, будет вы- 
водить на экран окно сообщения, аналогичное показанному на рис. 8.4, всякий 
раз, когда Web-браузер покидает текущую Web-страницу:

408 Глава 8. JavaScript 
<html> 
<body onUnload="alert('Спасибо, что зашли!')"> 
<hl>HTML & Web Design Tips & Techniques</hl> 
<р>Посетите сайт 
<a href="http://www.NVBizNet.com"> 
NVBizNet.com</a>. 
</p> 
</body> Рис. 8.4. Окно сообщения, 
</html> выводимое на экран всякий 
раз, когда Web-браузер 
Web-браузер выполнит это же действие при замене выгружает Web-страницу 
Web-страницы в ответ на щелчок на гиперссылке или 
щелчок на кнопке Назад, Вперед или Обновить браузера. Всякий раз, когда по- 
сетитель дает Web-браузеру указание выгрузить текущую Web-страницу и заме- 
нить ее другой страницей (или даже той же самой страницей), обработчик собы- 
тия onUnioad в данном примере дает Web-браузеру указание вывести на экран 
окно сообщения. Посетитель затем должен будет щелкнуть на кнопке ОК в ниж- 
ней части окна сообщения, прежде чем Web-браузер выгрузит Web-страницу, "ус- 
тупая место" следующей. Кроме выполнения одного или нескольких операторов 
JavaScript, вы можете вызвать с помощью обработчика также определенную 
пользователем или встроенную функцию. Например, обработчик события 
onclick в дескрипторе <а> в приведенных ниже HTML-утверждениях дает Web- 
браузеру указание вызвать определенную пользователем функцию 
youWannaLeave (), когда посетитель щелкнет на тексте дескриптора <а>: 
<html> 
<head> 
<script> 
function youWannaLeave() 
{
alert("Что, уже уходите?") 
return; 
i
i 
II —> 
</script> 
</head> 
<body> 
<hl>HTML & Web Design Tips & Techniques</hl> 
<р>Посетите. сайт <a href="http://www.NVBizNet.com" 
onClick="youWannaLeave()">NVBizNet.com</a>.</p> 
</body> 
</html> 
Таким образом, процедура использования обработчика события для выполне- 
ния оператора или вызова функции включает в себя два шага. Во-первых, иден- 
тифицируйте объект Web-страницы, с которым хотите связать событие. Во-вто- 
рых, вставьте обработчик события, которым вы хотите воспользоваться, в 
HTML-деСКрИПТОр Объекта В ВИДе обработчик_события="оператор" ИЛИ обра- 
ботчик__события="имя__функции()". В первом примере данного практикума, в ко- 
тором событие связано с выгрузкой тела (то есть содержимого) самой Web-стра-

Глава8. JavaScript , 40 9 
ницы, вы помещали обработчик события onUnioad в дескриптор <body>. Анало- 
гично, во втором примере, где событие связано с щелчком на гиперссылке, вы 
вставляли обработчик события onclick в дескриптор <а> гиперссылки. В следу- 
ющем практикуме вы найдете таблицу, в которой приводится перечень всех обработ- 

чиков событий JavaScript и действий посетителя или Web-браузера, которого 
ожида- 
ет тот или иной обработчик. Пока что важно понимать, что обработчики событий 
вставляются в HTML-дескрипторы, и что вы можете использовать обработчики со- 
бытий для выполнения одного или нескольких операторов или вызова функции. 
Что такое обработки оэбыпм JavaScript 
Обработчики событий — это специальные элементы, используемые в HTML- 
дескрипторах для того, чтобы Web-браузер выполнял оператор JavaScript или вы- 
зывал функцию, когда посетитель делает щелчок на элементах страницы или на- 
водит на них курсор мыши. Собственно говоря, JavaScript предусматривает 
обработчик события практически для каждого действия, которое может предпри- 
нять пользователь, взаимодействуя со страницей. Кроме того, JavaScript предус- 
матривает даже такие обработчики событий, как onLoad и onUnioad, которые об- 
рабатывают действия, предпринимаемые на Web-странице самим браузером. Более 
того, с помощью обработчиов событий onResize и onMove вы можете отслеживать 
перемещение или изменение посетителем размеров окна Web-браузера. 
В первом столбце таблицы 8.7 перечислены имена доступных обработчиков 
событий. Во втором столбце дается пояснение действий посетителя, которым 
инициируется каждое из событий; здесь же приведены HTML-дескрипторы, в 
которые можно вставлять данный обработчик события. Чтобы выполнять функ- 
цию или оператор (операторы) JavaScript с помощью обработчика события, выбе- 
рите на Web-странице объект, который будет отслеживаться Web-браузером. За- 
тем вставьте имя обработчика события вместе с оператором (операторами), которые 

Web-браузер должен будет выполнить, или функцией, которую он должен будет выз- 
вать, в дескриптор, с помощью которого вы поместили объект на страницу в виде 
обработчик события="оператор" ИЛИ обработчик события="имя функции ( ) " . 
Таблица 8.7. Обработчики событий JavaScript, обрабатываемые ими события 
и дескрипторы, в которые они вставляются 
Обработчик события Когда происходит 
onAbort Посетитель преждевременно прекращает загрузку изображения 
(например, за счет щелчка на какой-то ссылке или на кнопке 
"Остановить" браузера). 
Дескрипторы: <img> 
onBlur Посетитель перемещает фокус из фрейма, элемента формы или окна. 
Дескрипторы: <body>, <frame>, <frameset>, <ilayer>, <input>, 
<layer>, <select> 
onChange Посетитель изменяет значение в элементе формы, таком как текстовое 
поле, многострочное текстовое поле, или выбирает новый пункт в поле 
списка выбора. 
Дескрипторы: <input>, <select>

410 
Обработчик события Когда происходит 
Глава 8. JavaScript 
onClick 
onDoubleClick 
onDragDrop 
onError 
onFocus 
onKeyDown 
onKeyPress 
опКеуИр 
onload 
onMouseDown 
onMouseOut 
onMouseOver 
onMouseUp 
onHove 
onReset 
onResize 
onSelect 
onSubmit 
onUnload 
Посетитель щелкает на гиперссылке или элементе формы, таком как 
флажок, кнопка, переключатель, кнопка "Отправить", кнопка "Очистить". 
Дескрипторы: <а>, <area>, <body>, <input> 
Посетитель выполняет двойной щелчок на гиперссылке или элементе 
формы, таком как флажок, кнопка, переключатель, кнопка "Отправить", 
кнопка "Очистить". 
Дескрипторы: <а>, <ажеа>, <body>, <input> 
Посетитель перетаскивает объект в окно Web-браузера. 
Дескрипторы: <body>, <frame>, <frameset> 
Web-браузер сталкивается с ошибкой при загрузке изображения или Web- 
страницы. 
Дескрипторы: <body>, <frame>, <frameset>, <img> 
Посетитель перемещает фокус ввода на окно или элемент формы. 
Дескрипторы: <body>, <frame>, <frameset>, <ilayer>, <input>, 
<layer>, <select> 
Посетитель нажимает и отпускает клавишу на клавиатуре. 
Дескрипторы: <body>, <frame>, <frameset>, <img>, <input> 
Посетитель нажимает или удерживает нажатой клавишу на клавиатуре. 
Дескрипторы: <а>, <body>, <frame>, <frameset>, <img>, <input> 
Посетитель отпускает клавишу на элементе формы "многострочное 
текстовое поле". 
Дескрипторы: <а>, <body>, <frame>, <frameset>, <img>, <input> 
Web-браузер завершает загрузку Web-страницы или изображения. 
Дескрипторы: <body>, <frame>, <frameset>, <img>, <layer> 
Посетитель нажимает кнопку мыши. 
Дескрипторы: <а>, <body>, <input> 
Посетитель убирает курсор мыши с "горячей области" навигационной 
карты или гиперссылки. 
Дескрипторы: <а>, <ilayer>, <layer> 
Посетитель наводит курсор мыши на "горячую область" навигационной 
карты или гиперссылку. 
Дескрипторы: <а>, <ilayer>, <layer> 
Посетитель отпускает кнопку мыши. 
Дескрипторы: <а>, <ilayer>, <input> 
Посетитель или сценарий перемещают окно приложения браузера. 
Дескрипторы: <body>, <frame>, <frameset> 
Посетитель делает щелчок на кнопке "Очистить" формы. 
Дескрипторы: <form> 
Посетитель или сценарий изменяют размер окна приложения браузера. 
Дескрипторы: <body>, <frame>, <frameset> 
Посетитель выделяет текст в текстовом поле или многострочном тексто- 
вом поле формы. 
Дескрипторы: <input> 
Посетитель делает щелчок на кнопке "Отправить" формы. 
Дескрипторы: <f orm> 
Перед заменой в браузере одной Web-страницы на другую. 
Дескрипторы: <body>, <frame>, <frameset>

Глава 8. JavaScript 
ПРАКТИКУМ 
Предположим, например, вы хотите, чтобы в результате щелчка посетителем на 
одной из кнопок формы Web-браузер вызывал определенную пользователем фун- 
кцию caicuiateTotais(). Вставьте в определение кнопки обработчик события 
onclick, как показано в последней строке следующего ниже дескриптора 
<input>: 
<form> 
<input type="button" name="CalcTotals" value="Calc" 
onClick="calculateTotals()"> 
</form> 
Теперь, благодаря обработчику события onclick в дескрипторе <input>, Web- 
браузер будет выполнять операторы в функции caicuiateTotais() всякий раз, 
когда посетитель щелкает на кнопке с именем CaicTotais. 
Создание интерактивной навигационной панели с 
эффектом смены изображения при наведении курсора 
В ваших путешествиях по Всемирной Паутине вам наверняка попадались на- 
вигационные панели (или меню), кнопки на которых изменяли внешний вид 
при наведении на них курсора мыши. JavaScript позволяет создавать навигацион- 
ные панели с подобным эффектом смены изображения при наведении курсора. 
Все, что вам понадобится, — это два различных графических изображения для 
каждой кнопки на навигационной панели и обработчики событий 
onMouseOver () и onMouseOut о в дескрипторах <а>, определяющих гиперссылки, 
закрепленные за каждой кнопкой в панели меню. Например, чтобы отобразить 
такое навигационное меню, как показано на рис. 8.5, вам потребуется HTML- 
код, аналогичный приведенному ниже: 
<html> 
<body> 
<table> 
<tr> 
<td width="87" height="34"> 
<a href="Figure08-05.htm"> 
<img border="0" src="YellowChoicel.jpg" width="87" 
height="34" /X/aX/td> 
<td width="87" height="34"> 
<a href="Figure08-05.htm"> 
<img border="0" src="YellowChoice2.jpg" width="87" 
height="34" /X/aX/td> 
<td width="87" height="34"> 
<a href="Figure08-05.htm"> 
<img border="0" src="YellowChoice3.jpg" width="87". 
height="34" /X/aX/td> 
</tr> 
</table> 
</body> 
</html>

412 Глава 8. JavaScript 
Рис. 8.5. 
; Файл Оревка Дид iisSp&HMpe 
:&flp8CJ.] ht1py/html-webdesign/Chepter( 
Choice 1 Choice 2 Choice 
Сервис Справки ^Ш 
6/FigureD8-05 htm _^j; 
3 
i 
Графические "кнопки"на статической навигационной панели 
Вставляя картинку между начальным и конечным дескрипторами гиперссыл- 
ки (<ах/а>), вы можете использовать графическое изображение также, как вы 
использовали бы текстовую гиперссылку. Когда посетитель щелкает где-то внутри 
графического изображения (кнопки) в навигационной панели, браузер извлекает 
Web-страницу, указанную атрибутом href в дескрипторе <а>, предшествующем 
каждой картинке. 
ПРАКТИКУМ 
Чтобы снабдить навигационную панель эффектом смены изображений при наве- 
дении курсора мыши (также называемым эффектом "переката" (rollover)), вам 
нужно, чтобы Web-браузер изменял отображаемое графическое изображение, ког- 
да посетитель сайта проводит курсор над любой из кнопок в меню. Следователь- 
но, вам понадобятся два графических изображения, одно из которых будет ото- 
бражаться, когда курсор мыши находится над кнопкой меню, а второе — когда 
курсор мыши находится в другой области страницы. (Лучше всего, если эти два 
изображения будут приблизительно одного и того же размера.) Затем вам нужно 
будет объявить JavaScript-функцию, подобную следующей, которая будет осуще-. 
ствлять подмену изображений, изменяя свойство src изображения в массиве 
images документа. (Когда вы заменяете одно изображение другим в массиве 
images, Web-браузер автоматически отображает на экране новое изображение 
вместо исходного в своем окне.) 
<script language • "JavaScript"> 
function newImage(Imagelndex, NewButton) 
{
// Сформировать путь и имя файла нового изображения 
NewButton = "images/" + NewButton+".jpg" 
// Заменить существующее изображение новым 
document.images[Imagelndex].src = NewButton 
return; 
</script> 
Первый оператор в функции newimage () использует строку, переданную в па- 
раметре NewButton, для формирования пути и имени файла изображения, кото- 
рое Web-браузер должен вывести на экране. Второй исполняемый оператор фун- 
кции затем заменяет путевое имя текущего изображения в свойстве src массива 
images документа именем (с путем) файла нового изображения, которое браузер 
должен отобразить. (Значение параметра imageindex сообщает функции, какое

Глава 8. JavaScript 413 
из свойств src в массиве заменять.) После того, как вы объявили — 
предпочтитель- 
но в заголовочной части Web-страницы — функцию (такую как newimage (), которая 
производит подмену имен файлов изображений), вам остается только добавить в 
каждый дескриптор <а> События onMouseOver И onMouseOut, как показано НИЖе : 
<table> 
<tr> 
<td width="87" height="34"> 
<a href="Figure08-06.htm" 
onmouseover="newlmage(0,'CyanChoicel')" 
onmouseout="newlmage(0,'YellowChoicel')"> 
<img border="0" src="YellowChoicel.jpg" width="87" 
height=M34" /X/aX/td> 
<tdwidth="87" height="34"> 
<a href="Figure08-06.htm" 
onmouseover="newlmage(1,'CyanChoice2')" 
onmouseout="newlmage(1,'YellowChoice2')"> 
<img border=" 0 " src="YellowChoice2.jpg" width="87" 
height="34" /X/aX/td> 
<td width="87" height="34"Xa href ="Figure08-06 .htm" 
oranouseover=" newlmage(2,'CyanChoice3')" 
onmouseout="newlmage(2,'YellowChoice3')"> 
<img border="0" src=MYellowChoice3.jpg" width="87" 
height="34" /X/aX/td> 
</tr> 
</table> 
Обработчик события onMouseOver дает Web-браузеру указание вызывать функ- 
цию newlmage. () всякий раз, когда посетитель наводит курсор мыши на гиперс- 
сылку, то есть на графический элемент типа "кнопки" на навигационной панели. 
Аналогично, событие onMouseOut дает Web-браузеру указание вызывать функцию 
newlmage () всякий раз, когда посетитель убирает курсор мыши с гиперссылки 
(то есть с графического изображения) на навигационной панели. Просмотрев 
код, вы заметите, что обработчик события onMouseOver передает функции 
newlmage () новое (голубое вместо желтого) изображение, тогда как обработчик 
события onMouseOut передает функции newlmage о исходное (желтое) изображе- 
ние, заданное атрибутом src в дескрипторе <img>. В результате "кнопки" навига- 
ционной панели выгладят так, как показано на рис. 8.5, за исключением одной 
кнопки, на которую посетитель сайта навел хурсор мыши — как выглядит она, мож- 
но увидеть на рис. 8.6. 
<.вй(| Цраека Вид ЦзЬрьнное Сереис ф!рве*а ЩШЛ 
±< - - • J J Й У М 3 ЧЬ' J й Г 
.Uapecjahttp^html^bdeEign/ChopterOEKfogureOB-ObMm .*}• 
HTML & Web Design 
Tips & Techniques 
Choice 1 J Choice Z J Choice 3 j 
Рис. 8.6. Навигационная панель, средняя кнопка на которой демонстрирует 
• ' эффект смены изображения при наведении курсора

Глава 8. JavaScript 
Использование массивов объектной модели 
JavaScript "видит" Web-страницу как набор свойств (properties) и объектов 
(objects), сохраненных в массиве с именем document. Свойства, сохраняемые Web- 
браузером в массиве document, включают в себя цвет текста, фона и гипертекста, 
cookie-наборы, элементы форм, изображения и т.д. Модифицируя значения, со- 
храненные в массиве документа, вы можете изменять не только внешний вид 
Web-страницы, но и отдельные объекты на странице. Например, вы можете счи- 
тать содержимое свойства document.cookies, чтобы определить параметры, ра- 
нее заданные посетителем Web-страницы. Затем вы можете задать значения 
document.bgcolor и document.fgCoior такие, чтобы изменить цвета фона и тек- 
ста Web-страницы (соответственно) на цвета, выбранные посетителем. Изменив 
цвета Web-страницы, вы также наверняка измените цвета текста посещенных и 
непосещенных гиперссылок так, чтобы их цвета не совпадали с цветом фона 
Web-страницы или цветом ее обычного текста (не гиперссылок). Короче говоря, 
элементы массива документа дают возможность изменить содержимое и вне- 
шний вид Web-страницы в зависимости от значений cookie-набора или данных, 
введенных посетителем в Web-браузере. 
ПРАКТИКУМ 
Чтобы задать или просмотреть свойство Web-страницы, начните со слова 
document, поставьте точку и затем укажите имя свойства. Например, приведен- 
ный ниже JavaScript — будучи помещенным после начального дескриптора 
<body> в HTML-код Web-страницы — отобразит название Web-страницы, URL- 
адрес и дату последней модификации: 
<script language> 
document. write ("<Ь>Название Web-страницы: </b>" + 
document.title + "<br>"); 
document.write ("<b>URL/адрес в Web: </b>" + 
document.URL + "<br>"); 
document.write'("<Ь>Дата последнего изменения: </b>" + 
document.lastModified + "<br>"); 
// —> 
</script> 
Кроме свойств, описывающих Web-страницу и то, как она выглядит, массив 
документа также включает в себя массивы, которые, в свою очередь, содержат 
свойства объектов, вставленных в страницу. Объектами Web-страницы, описанны- 
ми своими собственными массивами внутри массива документа, являются гипер- 
ссылки, аплеты, внедренные объекты, формы, фреймы, изображения, ссылки и 
подключаемые модули. Web-браузер помещает информацию о каждом объекте на 
Web-странице в массив, носящий имя данного объекта. Например, браузер поме- 
щает свойства подключаемых модулей в массив document.piugins, свойства ги- 
перссылок — в массив document.links, свойства изображений — в массив 
document.images И Т.Д.

Глава 8. JavaScript 415 
Обращаться к свойства объектов на Web-страницы через массив документа 
можно аналогично тому, как вы обращались к свойствам самой Web-страницы, — 
С ПОМОЩЬЮ записи ВИДа document.тип_объекта[индекс_объекта_данного__ти- 
па].свойство 
Например, для обращения к значению атрибута src (или URL-адрес) 
третьего изображения на Web-странице будет использоваться запись 
document.images [2] .src. (Помните, первый элемент в массиве JavaScript имеет 
индекс 0, поэтому индекс третьего элемента — 2, а не 3.). 
Особый случай в массиве документа представляет элемент формы. Элемент 
форМЫ - ЭТО Не ПРОСТО МаССИВ (как Объекты images, links И plugins), ПОЗВОЛЯ- 
ЮЩИЙ обратиться к каждой или, может быть, нескольким формам на Web-странице; 
элемент document. forms сам по себе является массивом. Следовательно, тогда как 

вы можете обратиться к свойствам формы (таким как ее имя, метод, действие и 
Т.Д.) С ПОУОЩО записи ВИДа document,forms[индекс__фс-рмы] .свойство, К СВОЙ- 
ствам каждого элемента формы вы обращаетесь с помощью записи вида 
document.forms[индекс__формы].elements[индекс_элемента].свойство. 
Web-страница, показанная на рис. 8.7, имеет пять объектов: три графических 
изображения, одну форму и три гиперссылки. Обратите внимание, что две гра- 
фические кнопки | Отправить" и "Очистить") в нижней части страницы в дан- 
ном примере являются на самом деле изображениями-гиперссылками, поэтому 
они учтены и как объекты-изображения, так и как объекты-гиперссылки. 
Отображая объекты на Web-странице, показанной на рис. 8.7, браузер поме- 
щает свойства графического изображения, вставленного при помощи первого 
дескриптора <img> в HTML-код Web- 
страницы, в первый элемент массива 
images документа: document. images [0] . 
Аналогично, браузер сохраняет свойства 
второго обнаруженного им в HTML-коде 
страницы графического элемента (графи- 
ческого элемента кнопки "Отправить") во 
втором элементе массива images докумен- 
та: document. images [ l ] . Далее, браузер со- 
храняет свойства третьего изображения на 
странице (графического элемента кнопки 
"Очистить") в третьем элементе массива 
images документа: document. images [2}. 
(Как и в случае со всеми прочими объекта- 
ми на Web-странице, браузер сохраняет 
свойства каждого объекта в массиве объек- 
тов соответствующего ему типа (в данном 
Случае, images) В ТОМ Порядке, В КОТОрОМ 
он обнаруживает дескрипторы <img> в 
HTML-коде Web-страницы.) 
j Использование JavaScript дпя адресова. 
<.ойл Правке Диа ИзБ 
-3» -h 
Сервис .пр 
] httpy/html«rebdesigri/CtmpterO8/FigureO8-0? htm j j j 
Имя: 
Фамилия: 
E-mail: 
Отпра m I L •К'Л ить 
Переход на сайт 
NVBizNetcom 
Рис. 8.7. Web-страница с пятью 
объектами, к которым можно обратить? 
с помощью JavaScript

Глава 8. JavaScript 
Браузер сохраняет свойства (имя, длину, метод действия и т.д.) первой (и 
единственной) формы на текущей Web-странице в первом элементе массива 
forms документа: document. forms [0]. Как и сама Web-страница, форма обычно 
имеет более одного элемента. (В данном примере форма имеет три элемента: 
три текстовых поля ввода.) Чтобы сохранить свойства элементов формы, Web- 
браузер ДОЛЖен СОЗДаТЬ маССИВ forms Документа как маССИВ маССИВОВ elements. 
Сделав это, Web-браузер сможет сохранить свойства элементов формы из данного 
примера В document, forms [0] . e l e m e n t s [ 0 ] , document, forms [0] . e 
l e m e n t s [ 1 ] И 
document.forms[0].elements[2]. (Браузер сохраняет свойства элементов формы 
В массиве elements массива document. forms В ТОМ ПОрЯДКе, В КОТОРОМ ОНИ ОП- 
ределены в форме.) Наконец, браузер сохраняет свойства трех гиперссылок на 
странице из данного примера в элементах массива links документа: 
document.links[0], document.links[1] И document.links[2] В ТОМ ПОрЯДКе, В 
котором он находит <а> гиперссылок в HTML-коде Web-страницы. (На Web- 
странице есть три гиперссылки — по одной закреплено за каждой из кнопок внизу 
формы, а третья закреплена за текстом "NVBizNet.Com" в нижней части страницы.) 
Обращение к объектам Web-страницы по имени 
(а не по позиции в массиве) 
Из предыдущего практикума вы узнали, как с помощью массива документа 
обращаться к свойствам объектов на Web-странице. Однако для того, чтобы ра- 
ботать со свойствами объекта, вы должны сначала определить позицию (индекс) 
в массиве документа. Чтобы определить индекс, сосчитайте HTML-дескрипторы, 
вставляющие объекты одного и того же типа, пока не дойдете до нужного вам 
объекта. Зная индекс объекта, вы можете обратиться к любому из свойств масси- 
ва С ПОМОЩЬЮ Записи ВИДа document. тип_объекта[индекс_объекта_данного_ 
типа] .свойство. Например, чтобы задать атрибут (или свойство) sre третьего 
изображения на Web-странице, вы можете дать Web-браузеру указание выполнить 
следующий оператор JavaScript: 
document.images[2].srс = "images/NVBizNet.JPG"; 
В массивах JavaScript отсчет элементов начинается с нуля, а это значит, что 
третий элемент массива находится по адресу document. images [2]. Следователь- 
но, вышеприведенный оператор изменит источник (или путь и имя файла) 
изображения, вставленного в Web-страницу третьим дескриптором <img>. (После 
того, как вы измените свойство sre изображения в массиве images документа, 
Web-браузер заменит изображение, отображаемое на Web-странице.) 
Обращение к объектам Web-страницы по номеру становится трудоемким, 
если на странице много объектов одного и того же типа. Предположим, напри- 
мер, вы хотите заменить изображение, расположенное недалеко от конца Web- 
страницы, другой картинкой. Вам придется сначала определить индекс изобра- 
жения, СОСЧИТав ДеСКрИПТОрЫ <img>, Идущие перед ДеСКрИПТОрОМ <img>, 
свойство sre которого требуется изменить. Если у вас на странице двадцать или 
тридцать изображений-миниатюр, считать вы будете долго, в связи с чем возрас- 
тет вероятность того, что вы допустите ошибку.

Глава 8. JavaScript 4 1 7 
ПРАКТИКУМ 
Если же вы дадите объекту Web-страницы имя, вы сможете затем работать 
со свойствами объекта , по имени с помощью записи вида 
document.имя__объекта.свойство. Например, если в HTML-коде Web-страницы 
имеется следующий дескриптор <img>: 
<img name="logo" width="78" height="61" 
src="images/picture.GIF" 
то, не подсчитывая количество дескрипторов <img>, предшествующих тому деск- 
риптору <img>, атрибут src которого вы хотите изменить, вы можете заменить 
изображение на Web-странице другой картинкой, дав Web-браузеру указание вы- 
полнить оператор JavaScript, аналогичный следующему: 
document.logo.src = " images/NVBizNet.JPG"; 
Хотя данный пример показывает только, как использовать имя объекта вместо 
имени массива и значения индекса, то же самое справедливо и для других типов 
объектов. Иными словами, если дескриптор, вставляющий объект на страницу, 
ВКЛЮЧает В Себя атрибут name, ВЫ МОЖете заменить ЗапИСЬ тип_объекта[индекс_ 
объекта_данного_тила] именем объекта и записывать обращение к тому или 
ИНОМУ СВОЙСТВУ Объекта как document.имя_обтьекта.свойство. 
Использование содержимого объекта документа 
Прежде чем визуализировать Web-страницу на экране, Web-браузер создает 
объект document. Считывая HTML-код Web-страницы, браузер сохраняет значе- 
ния атрибутов Web-страницы (таких как цвет фона, цвет текста, название и т.д.) 
в объекте документа. Браузер также добавляет в объект документа массивы, в ко- 
торых он сохраняет свойства форм, гиперссылок, изображений и Java-аплетов, 
вставленных в страницу. 
Один из способов воспользоваться объектом документа — это заполнить эле- 
менты формы за посетителя. Предположим, например, у вас есть Web-страница с 
формой заказа. Вместо того чтобы заставлять клиента вводить имя, адрес и пла- 
тежные данные всякий раз, когда он размещает у вас заказ, сохраните эти значе- 
ния в cookie-наборе на жестком диске посетителя. Тогда можно будет извлекать 
ранее сохраненные значения cookie-набора из свойства document. cookie объекта 
документа и использовать их для заполнения элементов формы внутри массива 
document. forms объекта документа.
ПРАКТИКУМ 
Еще один вариант использования объекта документа — предотвращение захода 
посетителей напрямую на страницу, находящуюся внутри доступной только для 
зарегистрированных пользователей части сайта. Свойство document.referrer 
дает URL-адрес Web-страницы с гиперссылкой, по которой посетитель перешел 
на текущую страницу. Если строка символов, сохраненная в document.referrer, 
пустая или не включает в себя доменное имя вашего сайта, ваш сценарий может 
дать браузеру указание загрузить страницу входа на сайт при помощи оператора, 
аналогичного показанному ниже:

418 Глава 8. JavaScript 
self .location = "http://www.NVBizNet.com/login.htm" 
(Строка document. r e f e r r e r будет пустой, когда посетитель вводит 
URL-адрес 
в адресной строке браузера или щелкает на закладке или пункте избранного.) В 
данном примере Web-браузер отображает вместо запрошенной посетителем Web- 
страницы страницу входа на сайт (iogin.htm). 
Ниже рассматриваются свойства Web-страниц и массивы объектов, доступных 
в созданном браузером объекте document. В конце "каждого описания вы найдете 
формат или пример оператора JavaScript, который можно будет включить в свой 
сценарий, чтобы просмотреть и (в некоторых случаях) изменить значение свой- 
ства Web-страницы. (Свойства массивов объектов images и links объекта 
document рассматриваются в двух следующих практикумах.) 
alinkcoior — это цвет "активной" гиперссылки на Web-странице. Гиперссыл- 
ка "активна" в течение короткого промежутка времени после того, как посетитель 
щелкнул на ней, и прежде, чем браузер проследовал по гиперссылке на другую 
Web-страницу Чтобы задать цвет, которым Web-браузер должен отображать "ак- 
тивную" гиперссылку, определите оператор JavaScript вида document.alinkcoior 
= цвет_активной__ссылки (где цвет_активной__ссылки — шеСТНаДЦатерИЧНЫЙ 
триплет, задающий RGB-значения цвета в форме "#RRGGBB"). 
anchors — это доступный только для чтения массив "именованных" гиперссы- 
лок (то есть объектов гиперссылки), дескрипторы <а> которых включают в себя 
атрибут name. Свойство anchors можно использовать только для того, чтобы по- 
лучить число "именованных" гиперссылок на Web-странице с помощью операто- 
ра JavaScript ВИДа число__якорей = document.anchors.length. 
applets — это массив методов и свойств из всех Java-аплетов, определенных 
между начальным и конечным дескрипторами аплета (<appietx/appiet>) на 
Web-странице. Вы можете получить доступ к любому общедоступному (public) 
свойству и выполнить любой общедоступный метод, определенный в Java-аплете 
на Web-странице, обратившись к открытому свойству аплета с помощью записи 
ВИДа document, applets [индекс__аплета] .свойство И К Общедоступному методу 
аплета С ПОМОЩЬЮ записи ВИДа document. applets [индекс_аплета] .метод(). 
Если дескриптор <appiet> имеет атрибут name, можно пользоваться записями 
вида document.имя__аплета.свойство И document.имя__аплета. метод ( ) . Чтобы 
получить число Java-аплетов на Web-странице, воспользуйтесь оператором 
JavaScript вида число__аплетов = document.applets length. 
bgcolor - это текущий цвет фона Web-страницы. Выможете изменять цвет 
фона Web-страницы с помощью оператора вида document. bgcolor = цвет_ф°на 
(где цвет_фона — шестнадцатеричный триплет, задающий RGB-значения цвета в 
форме "#RRGGBB"). 
cookie (cookie-набор) — это строка длиной до 4 096 (4 Кб) символов, кото- 
рую вы можете сохранить на жестком диске посетителя. (Как создать и сохра- 
нить cookie-набор, вы узнаете в практикуме ниже в этой главе.) Чтобы извлечь 
имя cookie-набора и пары значений в строку, которую можно будет разобрать, 
ВОСПОЛЬЗуЙТеСЬ Оператором ВИДа значение__соок1е = document,cookie.

Глава 8. JavaScript 4 1 9 
domain — это доменное имя Web-сервера, отправившего страницу браузеру. 
Доменное имя Web-сервера можно получить с помощью оператора вида домен- 
ное_имя = document.domain. (Web-браузер использует информацию в свойстве 
domain в качестве имени cookie-файла документа.) 
embeds — массив полей и методов из всех объектов, вставленных в Web-стра- 
ницу с помощью начального и конечного дескрипторов внедренного объекта 
(<embedx/embed>). (Обычно внедряются файлы, для воспроизведения кото- 
рых Web-браузеру требуется подключаемый модуль - например, файлы 
QuickTime (.mov).) Если внедренный объект поддерживает Java, вы можете 
получить доступ к тому или иному из его полей с помощью записи вида 
document.embeds. [индекс_внедренного__обгьекта] .поле (ИЛИ ПО имени В виде 
document.имя_внедренного_объекта.поле, если ДССКрИПТОр <embed> имеет атри- 
бут name.) Выполнить метод объекта% поддерживающего Java, можно с помощью 
записи вида document.embeds.[индекс_внедренного_об1ьекта].метод() (ИЛИ ПО 
ИМеНИ В ВИДе document. имя_внедренного_об'ьекта. метод (), если дескриптор 
<embed> включает в себя атрибут name.) Чтобы получить число внедренных 
объектов на Web-странице, воспользуйтесь оператором JavaScript вида число_ 
внедренных__обгьетов = document. embeds . length. 
f gCoior — это цвет текстового содержимого Web-страницы, не модифициро- 
ванного атрибутом color в дескрипторе <font>. Чтобы изменить цвет текста, 
воспользуйтесь Оператором ВИДа document. f gCoior = цвет_текста (где цвет__тек- 

ста — шестнадцатеричный триплет, задающий RGB-значения цвета в виде 
"#RRGGBB"). 
forms — это массив свойств и методов для всех объектов форм на Web-стра- 
нице. В главе, посвященной HTML-формам (ранее в этой книге), рассматрива- 
ются методы и свойства, имеющиеся для каждого объекта формы и для каждого 
элемента внутри объектов формы. В общем случае, получить доступ к свойству 
формы МОЖНО С ПОМОЩЬЮ записи ВИДа document,forms[индекс_формы] .свойство 
(ИЛИ document.имя_формы.свойство), а К Методу форМЫ — С ПОМОЩЬЮ 
оператора JavaScript вида document.forms[индекс_формы].метод() (или 
document.имя_формы.MeTOf lO). Чтобы работать со свойством элемента формы, ис- 
пользуйте оператор JavaScript вида document, forms [индекс__формы] .
elements[ин- 
декс_элемента].свойство (ИЛИ document.имя__формы. имя__элемента. свойство). 
Аналогично, чтобы выполнить метод элемента формы, обратитесь к мето- 
ду, который вы хотите использовать в операторе JavaScript, с помощью за- 
писи document. forms [инд екс__формы] . elements [ш ;екс_элемента] . метод () 
(ИЛИ document. имя_формы. имя__элемента . метод () ). 
images — это массив свойств изображений, вставленных в Web-страницу с по- 
мощью дескрипторов <img>. Доступные только для чтения свойства изображе- 
ний, КОТОрые МОЖНО ПОЛУЧИТЬ, - ЭТО name, border, complete, height, width, 
vspace и hspace. С помощью JavaScript также можно извлекать и изменять свой- 
ства src и lowsrc изображения. Чтобы получить доступ к свойству изображения, 
СЬ ЗапИСЬЮ ВИДа document, images [индекс__изображения] .свойство 
ИЛИ document.имя__изображения. свойство.

42 0 Глава 8. JavaScript 
lastModified — это доступная только для чтения символьная строка, содержа- 
щая местные дату и время последнего внесения изменений в Web-страницу Чтобы 
получить значение свойства lastModified, воспользуйтесь оператором JavaScript 
ВИДа дата__и_время__последнего__изменения = document. lastModified. 
linkcoior — цвет непосещенных гиперссылок на Web-странице. Чтобы задать 
цвет, который должен использовать Web-браузер, отображая непосещенные ги- 
перссылки, воспользуйтесь оператором JavaScript вида document.linkcoior = 
цвет__непосещенной__ссылки (где цвет__нелосещенной_ссылки — шестнадцатерич- 
ньш триплет, задающий RGB-значения цвета в виде U#RRGGBB"). 
links — это массив, содержащий свойства гиперссылок на Web-странице. К 
свойствам гиперссылок, к которым можно обращаться и модифицировать их че- 
рез массив links, ОТНОСЯТСЯ hash, hostname, host, href, pathname, port, 
protocol, search И frame. Чтобы работать СО СВОЙСТВОМ ТОЙ ИЛИ ИНОЙ ГИПерС- 
СЫЛКИ, ИСПОЛЬЗуЙте Запись ВИДа document,links[индекс__ссылки] .свойство ИЛИ 
document.имя_ссылки.свойство. 
referrer — это доступная только для чтения строка, хранящая Web-адрес 
Web-страницы, содержащей гиперссылку, по которой посетитель попал на теку- 
щую страницу. Например, если посетитель сайта, чтобы попасть на текущую 
страницу, щелкнул на гиперссылке на Web-странице index.htm Web-сайта 
NVBizNet.com, ВЫ МОЖете ПОЛуЧИТЬ ПОЛНЫЙ URL-адрес Web-СТраниЦЫ index.htm 
на Web-Сайте NVBizNet.com С ПОМОЩЬЮ Оператора ВИДа иКЪ_откуда_пришел = 
document, referrer. (Значение document, referrer будет Пустым, если ПОСети- 
тель извлек текущую страницу, набрав URL-адрес в адресной строке браузера, 
или если посетитель выбрал текущую страницу из списка избранного браузера.) 
t i t l e — это доступная только для чтения строка, содержащая название текущей 

Web-страницы, определенное текстом между начальным и конечным дескрипто- 
рами названия ( < t i t i e x / t i t i e > ) . Значение названия Web-страницы 
можно по- 
лучить С ПОМОЩЬЮ Оператора ВИДа название__страницы = document,title. 
u r i — это доступная только для чтения строка, содержащая полный URL-ад- 
рес (то есть Web-адрес) текущей Web-страницы. Значение URL-адреса можно по- 
лучить, С ШУЕЩЮ Оператора ВИДа текущий_иКЬ = document.url. 
viinkCoior — это цвет ранее посещенных гиперссылок на Web-странице. Что- 
бы задать цвет, который должен использовать Web-браузер, отображая ранее 
посещенные гиперссылки, воспользуйтесь оператором JavaScript вида 
document .viinkCoior = цвет_ранее_посещенной_ссылки (где цвет_ранее_посе- 
щенной__ссылки — шестнадцатеричный триплет, задающий RGB-значения цвета в 
виде "#RRGGBB"). 
Использование массива изображений JavaScript 
Web-браузер сохраняет свойства каждого изображения, вставленного в Web- 
страницу, в массиве images. Как вы узнали из предыдущего практикума, массив 
images — это часть объекта документа, в котором Web-браузер хранит все объек- 
ты и свойства текущей Web-страницы. Всякий раз, когда браузер находит в 
HTML-коде Web-страницы дескриптор <img>, он добавляет еще один элемент в 
массив images в объекте документа.

Глава 8. JavaScript 
С помощью массива document. images можно изменить графическое изобра- 
жение, отображаемое на Web-странице. В одном из предыдущих практикумов 
("Создание интерактивной навигационной панели с эффектом смены изображе- 
ния при наведении курсора") вы научились создавать эффект смены изображения 
при наведении курсора, используя массив document. images для подмены одного 
графического элемента другим всякий раз, когда посетитель наводит курсор 
мыши на изображение на странице. С помощью массива document. images мож- 
но также улучшить впечатление, получаемое от вашего сайта посетителями, ко- 
торые подключаются к Internet по коммутируемой линии, предоставив им воз- 
можность выбирать, какие изображения будут отображаться: с высоким 
разрешением (медленно загружающиеся) или их версии с низким разрешением. 
Скажем, например, у вас есть страница с большим количеством изображений. 
Файлы цветных изображений с высоким разрешением обычно велики, а это зна- 
чит, что Web-браузеру может потребоваться слишком много времени на загрузку 
таких изображений через подключение к Internet с низкой пропускной способ- 
ностью (по коммутируемой линии). Следовательно, прежде чем отображать Web- 
страницу с галереей изображений, с помощью элемента формы на предше- 
ствующей странице спросите у посетителя, какую версию изображений он 
предпочитает. (Посетители с высокоскоростными подключениями, скорее все- 
го, выберут изображения с более высоким разрешением.) Затем, отображая 
Web-страницу с изображениями, установите свойство src каждого изображе- 
ния (document. [индекс_изображения] .src) равным URL-адресу изображения С 
высоким разрешением (файлом большого размера) или версии с низким изобра- 
жением — в зависимости от того, что ввел на форме посетитель. 
Использование сценария в Web-браузере для замены отображаемых изображе- 
ний быстрее традиционного метода, требующего серверного сценария для извле- 
чения и обработки данных, введенных посетителем в форму, с последующим ис- 
пользованием обработчика, подобного ASP или РНР, для генерирования новой 
Web-страницы. Подмена изображений в Web-браузере устраняет необходимость 
передачи служебных данных, которая связана с отправкой дополнительных зап- 
росов на Web-сервер, и позволяет сэкономить время, которое понадобилось бы 
Web-серверу на "переделку" страницы. Браузерный сценарий работает со страни- 
цей, уже полученной браузером с Web-сервера — попросту заменяет URL-адреса 
изображений, не затрагивая остальной HTML-код Web-страницы. 
Ниже рассматриваются свойства, сохраняемые браузером в каждом из элемен- 
тов массива images. В конце каждого описания вы найдете формат оператора 
JavaScript, который сможете включить в свой сценарий, чтобы просмотреть (а в 
случае свойств lowsrc и src — изменить) значение свойства изображения. Хотя 
большинство свойств доступны только для чтения, с помощью (обновляемого) 
свойства src вы можете менять изображения на Web-странице "на лету". Напри- 
мер, создавая две версии графического элемента — простую и "подсвеченную" — 
вы можете создать эффект смены изображения при наведении курсора, поручив 
Web-браузеру подменять простой графический элемент "подсвеченным", когда 
посетитель наводит курсор мыши на изображение.

42 2 Глава 8. JavaScript 
border — это доступное только для чтения значение, задающее ширину гра- 
ницы вокруг изображения в пикселях. Получить значение атрибута border, за- 
данное в дескрипторе <img>, можно с помощью оператора JavaScript вида: 
ширина_границы = document.images[индекс__изображения].border ИЛИ 
ширина_границы = document.имя__изображения.border 
complete — это доступное только для чтения логическое значение, которое 
остается false до тех пор, пока браузер jie завершит извлечение файла изобра- 
жения с Web-сервера. Например, с помощью приведенного ниже цикла while 
можно дождаться, пока изображение загрузится с Web-сервера, прежде чем заме- 
нять его на другое изображение на Web-странице: 
while (! document.имя__изображения. complete) 
height — это доступное только для чтения значение, дающее высоту изобра- 
жения в пикселях. Получить высоту картинки можно с помощью оператора 
JavaScript вида: 
высота__изображения = document. images [индекс__изображения] .height ИЛИ 
высота__изображения = document.имя__изображения.height 
hspace — это доступное только для чтения значение, дающее величину в пиксе- 
лях интервала, который Web-браузер должен оставить между картинкой и смежным 
с ней содержимым (или полем Web-страницы) слева и справа от графического изоб- 
ражения. Значение hspace можно получить с помощью оператора JavaScript вида: 
интервал__по__горизонтали = document.images[индекс_изображения].hspace 
ИЛИ интервал_по_горизонтали = document.имя__изображения.hspace 
lowsrc - это путь и имя файла изображения с низким разрешением, которое 
Web-браузер должен загрузить, чтобы пользователю было на что смотреть в ожида- 
нии загрузки браузером основной, с высоким разрешением картинки, заданной ат- 
рибутом src дескриптора <img>. Задать значение lowsrc можно с помощью опера- 
тора JavaScript вида: document, images[индекс__изображения] .lowsrc = путь_к_ 
изображению_с_низким_разрешением ИЛИ document.имя__изображения.lowsrc = 
путь__к_изображению_с_низким_разрешением. 
name — это доступная только для чтения строка, присвоенная графическому 
изображению атрибутом name в дескрипторе <img>. Значение имени изображе- 
ния можно получить с помощью оператора JavaScript вида: 
имя__изображения = document. images [индекс__изображения] .name 
src — это путь и имя файла изображения, которое Web-браузер должен ото- 
бразить на Web-странице. Изменить отображаемое графическое изображение 
можно, задав значение атрибута src с помощью оператора JavaScript вида: 
document. images [индекс_изображения] .src = путь_к__новому__изображению 
ИЛИ document .имя__изображения.src = путь__к__новому__изображению 
vspace — это доступное только для чтения значение, дающее величину в пик- 
селях интервала, который Web-браузер должен вставить между картинкой и 
смежным с ней содержимым сверху и снизу от изображения. Значение vspace 
можно получить с помощью оператора JavaScript вида:

Глава 8. JavaScript 4 2 3 
интервал_по__вертикали = document.images[индекс изображения].vspace 
ИЛИ интервал__по__вертикали = document.имя__изображения.vspace 
width — это доступное только для чтения значение, дающее ширину изобра- 
жения в пикселях. Получить ширину картинки можно с помощью оператора 
JavaScript вида: 
шцрина_изображения = document.images[индекс_изображения].width ИЛИ 
ширина_изображения = document.имя_изображения.width 
Использование массива ссылок JavaScript 
Массив links объекта документа позволяет работать со свойствами гиперссы- 
лок, вставленных в Web-страницу с помощью дескрипторов <а>, и "горячими об- 
ластями" изображений, определенными при помощи дескрипторов <агеа>. И 
Netscape Navigator, и Internet Explorer (версии 4 и выше) позволяют модифици- 
ровать (равно как и отображать) свойства элементов массива ссылок. Следова- 
тельно, вы можете изменять "на лету" Web-страницы (или другие файлы), загру- 
жаемые Web-браузером, когда посетитель щелкает на гиперссылке. Например, вы 
можете создать баннер, написав сценарий, который будет изменять отображае- 
мое на странице изображение, а также URL-адрес Web-страницы, которую извле- 
чет браузер, когда посетитель щелкнет на изображении баннера. Аналогично, 
можно сделать так, что гиперссылки будут "переезжать" в другие области Web- 
страницы (или вообще на другие Web-страницы) в зависимости от времени суток 
или дня недели - без необходимости изменять Web-страницу на сервере, вруч- 
ную либо посредством серверного сценария. 
Считывая HTML-код Web-страницы, браузер заполняет массив links объекта 
документа свойствами всех обнаруженных им дескрипторов <а> (то есть гиперс- 
сылок) и дескрипторов "горячих областей" навигационных карт <агеа> в том по- 
рядке, в котором он их находит. Ниже рассматриваются свойства, сохраняемые 
браузером для каждой гиперссылки в элементах массива ссылок. В конце каждого 
описания вы найдете формат оператора JavaScript, который сможете включить в 
свой сценарий, чтобы просмотреть или изменить значение описанного свойства. 
hash — это часть атрибута href в гиперссылке, которая включает в себя сим- 
вол решетки (#) и имя идентификатора фрагмента после символа решетки. Если 
посетитель щелкает на гиперссылке с идентификатором фрагмента, Web-браузер 
отобразит часть Web-страницы, начинающуюся с дескриптора <а>, атрибут name ко- 
торого установлен равным значению идентификатора фрагмента. Получить имя 
идентификатора фрагмента из атрибута href гиперссылки можно с помощью опера- 
тора ВИДа иде нтификатор_фрагмента = document.links[индекс_ 
Изменить же идентификатор фрагмента (тем самым сделав так, что гиперссылка 
будет указывать на новое место в Web-странице) можно с помощью оператора 
вида document.links[индекс_ссылки].hash = новый_идентификатор_фрагмента. 
host - это часть значения атрибута href гиперссылки, содержащая IP-адрес или 
доменное имя. Для данной гиперссылки значение свойства host отличается от зна- 
чения свойства hostname (которое рассматривается ниже) только тем, что свойство 

host включает в себя номер порта (по умолчанию 80), который Web-браузер должен 
использовать при обмене данными с Web-сервером. Чтобы извлечь из гиперссылки

42 4 Глава 8. JavaScript 
доменное имя (или IP-адрес), включая номер порта, воспользуйтесь операто- 
ром ВИДа имя__хоста__включая__порт = document.links[индекс__ссылки].host ИЛИ 
имя__хоста_включая_порт = document, links [индекс__ссылки] .host. 
hostname — это часть значения атрибута href гиперссылки, содержащая IP-адрес 
или доменное имя. Извлечь из гиперссылки значение имени хоста можно с помо- 
щью Оператора Вида имя__хоста = document, links [индекс_ссылки] .hostname. Вы 
также можете изменить доменное имя (или IP-адрес) в гиперссылке с помощью 
оператора ВИДа document,links [индекс_ссылки].hostname = новре__имя__хоста. 
href — это значение целевого адреса гиперссылки (включая закладку, если тако- 
вая имеется), присвоенного атрибуту href в дескрипторе <а> гиперссылки или 
деск- 
рипторе <агеа>. Целевой адрес гиперссылки можно получить с помощью оператора 
JavaScript ВИДа цель_гиперссылки = document, links [индекс_ссылки] .href. Мож- 
но также изменить цель гиггерссылки, присвоив новое значение свойству href с 
ПОМОЩЬЮ Оператора JavaScript ВИДа document, links[индекс__ссылки] .href = 
новая_цель__гилерссылки. 
pathname — это часть URL-адреса, содержащая имя пути. Например, при данной 
ГИПерССЫЛКе <а href = "http://www.NVBizNet.com/htdocs/clients.htmM>CnMCOK 
клиентов</а>, СВОЙСТВО pathname будет содержать Строку "/ntdocs/ 
ciients.htm11 в Netscape Navigator и "htdocs/ciients.htm" в Internet Explorer. 
Имя пути гиперссылки можно получить с помощью оператора вида имя__пути = 
document,links [индекс ссылки] .pathname. МОЖНО также изменить ИМЯ Пути 
Web-страницы, извлекаемой при щелчке на гиперссылке, ш счет присвоения но- 
вого значения СВОЙСТВУ pathname С ПОМОЩЬЮ оператора ВИДа document.links [ 
индекс_ссылки].pathname = новое__имя_пути. (Присваивая новое имя пути, обя- 
зательно поместите в начало нового имени косую черту (/) — как для Internet 
Explorer, так и для Netscape Navigator.) 
port — это номер порта, через который должен осуществляться обмен данны- 
ми с Web-сервером. Номер порта, если таковой присутствует, следует за домен- 
ным именем или IP-адресом. Например, в гиперссылке со значением атрибута 
href, раВНЫМ "http://www.NVBizNet.com:80/clients .htm", HOMepOM ПОрта ЯВ- 
ляется 80. Получить номер порта можно с помощью оператора вида номер__пор- 
я* = document, links [индекс_ссылки] .port. ГиперССЫЛКа Не Обязательно ДОЛЖ- 
на включать в себя номер порта, поскольку Web-браузер установит номер порта 
равным 80 по умолчанию. Internet Explorer вернет 80, если в гиперссылке не за- 
дан другой номер порта, Netscape Navigator не вернет никакого номера порта, 
если таковой не задан в гиперссылке. 
protocol — это часть цели гиперссылки, содержащая протокол доставки. 
Протокол доставки находится в начале атрибута href гиперссылки перед двой- 
ной косой чертой (//). В качестве протокола, указывающего метод извлечения 
Web-браузером целевой Web-страницы или другого файла, может выступать один 
из перечисленных ниже: 
file — браузер должен извлечь документ с локального компьютера или с 
диска на локальном компьютере или сетевой рабочей станции. 
• ftp — браузер должен извлечь документ с помощью программы FTP-передачи.

Глава 8. JavaScript 42 5 
• gopher — браузер должен извлечь документ, пользуясь протоколом Gopher. 
• http — браузер должен извлечь Web-страницу. 
• maiito — браузер должен запустить почтовую программу по умолчанию и 
создать сообщение для отправки по адресу, заданному в гиперссылке. 
• JavaScript — гиперссылка указывает на файл, содержащий операторы 
JavaScript. 
search — это часть атрибута href гиперссылки, содержащая строку запроса, 
включая вопросительный знак (?) в ее начале. Если в гиперссылке присутствует 
строка запроса, она находится после вопросительного знака. Когда посетитель 
щел- 
кает на тексте или графическом изображении гиперссылки, браузер передает строку 

запроса на обработку CGI-программе на сервере. Значение свойства search ги- 
перссылки можно получить с помощью оператора JavaScript вида строка_поиска 
= document,links[индекс_ссылки] .search. Строку ПОИСКа МОЖНО также ИЗМе- 
нить с помощью оператора вида: 
document.links[индекс_ссылки].search = новая_строка_поиска 
(где новая_строка_поиска — Строка наподобие "?fname=konrad&lname=king"). 
target — это имя окна или фрейма, в котором Web-браузер доджен отобра- 
зить документ, извлеченный после щелчка на тексте или графическом изображе- 
нии гиперссылки. По умолчанию браузер заменит Web-страницу в текущем окне 
новой Web-страницей. Однако если дескриптор <а> гиперссылки включает в 
себя атрибут target, значение которого отлично от "_seif", Web-браузер оста- 
вит исходную Web-страницу на экране и отобразит извлеченную страницу в дру- 
гом окне или фрейме. 
Получить имя целевого фрейма или окна гиперссылки можно с помощью опера- 
тора JavaScript вида имя_фрейма = document, links [индекс_ссылки] .target. Це- 
левое окно или фрейм гиперссылки можно также изменить с помощью операто- 
ра ВИДа document.links[индекс_ссылки].target = новое_имя_фрейма. 
Изменение цветов Web-страницы с помощью JavaScript 
Разрабатывая Web-страницу, вы наверняка захотите задать такую цветовую схе- 
му, чтобы страница выглядела одинаково у всех посетителей, при этом цвета тек- 
ста, фона и гиперссылок не изменялись в зависимости от настроек браузера. К 
сожалению, как бы хорошо ни выглядела цветовая схема на вашей машине, у не- 
которых посетителей могут возникнуть трудности при просмотре вашего содер- 
жимого, если вы используете цвета, отличные от цветов по умолчанию, — чер- 
ный текст на белом или сером фоне. Например, посетители-дальтоники не 
смогут увидеть один или несколько из использованных вами цветов, или может 
случиться так, что заданные вами цвета выходят за рамки возможностей монитора 
посетителя. В чем бы ни заключалась причина проблемы, можно воспользоваться 
функцией JavaScript, чтобы "обойти" проблему-цветов, давая возможность 
посетите- 
лям выбрать ту цветовую схему, которую они находят наиболее привлекательной. 
В таблице 8.8 приведены свойства Web-страницы, которыми можно пользо- 
ваться для изменения цветов, используемых Web-браузером для отображения

426 Глава 8. JavaScript 
текста, фона и гиперссылок Web-страницы. Помните: браузер сохраняет все 
свойства Web-страницы в объекте document по мере считывания HTML-кода 
Web-страницы. Чтобы изменить цветовую схему Web-страницы, вам нужно всего 
лишь изменить значения цветовых свойств объекта document. 
Таблица 8.8. Цветовые свойства объекта документа 
Свойство Описание 
alinkColor 
bgColor 
fgColor 
linkColor 
vlinkColor 
Цвет гиперссылки при щелчке на ней. 
Цвет фона Web-страницы. 
Цвет текста (не гиперссылок) Web-страницы. 
Цвет непосещенных гиперссылок. 
Цвет посещенных гиперссылок. 
Приведенная ниже JavaScript-функция задает цветовую схему Web-страницы в 
зависимости от значения параметра coiorScheme, переданного функции Web- 
браузером. Хотя функция seiectscheme () предусматривает только две цветовых 
схемы, вы можете добавить еще схемы за счет включения дополнительных бло- 
ков операторов else if (...), задающих другие значения для пяти цветовых 
свойств документа: 
<script> 
function selectscheme(ColorScheme) 
if (ColorScheme "1") 
document.alinkColor = "#008080"; 
document.bgColor = "#FFFFE0"; 
document.fgColor = "#A52A2A"; 
document.linkColor = "#008000"; 
document.vlinkColor = "#FF00FF"; 
else if (ColorScheme == "2") 
document.alinkColor = "Ivory"; 
document.bgColor = "Lightblue"; 
document.fgColor = "Magenta"; 
document.linkColor = "Darkred"; 
document.vlinkColor = "SlateGray' 
else if (ColorScheme == "3") 
document.alinkColor = "Red" 
document.bgColor = "White"; 
document.fgColor = "Black"; 
document.linkColor • "Blue"; 
document.vlinkColor — "Magenta"; 
return; 
// Зеленовато-голубой 
// Светло-желтый 
// Коричневый 
// Зеленый 
// Пурпурный 
</script>

Глава 8. JavaScript 427 
После объявления вышеприведенной функции в заголовке Web-страницы вам 
остается только сделать ее доступной для посетителей сайта, вставив кнопку или 
гиперссылку с обработчиком события onclick, который обеспечит вызов этой 
функции. Например, следующий код помещает на Web-страницу две кнопки: 
<form> 
<input type="button" value="Цветовая схема 1" 
onClick="selectScheme(1)"> 
<input type="button" value="Цветовая схема 2" 
o n C l i c k = " s e l e c t S c h e m e ( 2 ) " > 
</form> 
Если посетитель щелкнет на какой-либо из этих кнопок, браузер вызовет 
функцию seiectscheme(), которая, в свою очередь, изменит цвета фона, текста 
и гиперссылок на странице. 
Сохранение cookie-набора на жестком диске посетителя 
cookie-набор - это строка, содержащая до 4 096 (4 Кб) символов, которую 
Web-браузеру можно поручить сохранить на жестком диске посетителя, cookie- 
наборы дают вам возможность сохранить информацию о посетителе сайта, кото- 
рую можно будет извлекать всякий раз, когда посетитель возвращается на сайт — 
пока посетитель пользуется одним и тем же Web-браузером и компьютером. 
Каждый Web-браузер сохраняет все данные cookie-набора в одном файле, кото- 
рый уникален для браузера. Поэтому если один раз вы зашли на сайт с помо- 
щью Internet Explorer, а другой раз - с помощью Netscape Navigator, Netscape 
Navigator не извлечет cookie-набор, ранее сохраненный Internet Explorer. 
Без cookie-наборов у вас нет возможности определить, что происходило во 
время последнего посещения сайта пользователем — или даже был ли посетитель 
вообще когда-либо на вашем сайте. Если вы сохраните cookie-набор на жестком 
диске посетителя, Web-браузер сможет извлекать информацию, сохраненную в 
cookie-файле, во время последующих посещений. По соображениям безопаснос- 
ти, Web-браузер может только записывать данные в cookie-файл и считывать дан- 
ные из него - в отличие от считывания, и записи файлов с информацией част- 
ного характера на вашем жестком диске. Более того, сценарий на Web-странице 
может читать только cookie-наборы, записанные сценариями Web-страниц с того 
же домена (то есть Web-страниц, отправленных с одного и того же Web-сервера). 
ПРАКТИКУМ 
Чтобы определить cookie-набор, то есть добавить cookie-набор в cookie-файл на 
жестком диске посетителя, воспользуйтесь оператором JavaScript следующего вида: 

document.cookie = "имя__соок±е=значение__соок±е 
[; ехр±гез=дата_до__которой_действителен] [ ;doma±n=лмя_домена] 
[;раЫ1=имя__пути] [; secure]" 
Единственные обязательные значения при сохранении cookie-набора - это 
имя cookie-набора и текстовые данные, которые необходимо сохранить. Ниже рас- 
сматриваются необязательные значения, которые можно сохранять в cookie-наборах.

428 Глава 8. JavaScript 
expires — это дата (в формате GMT), до которой действителен cookie-набор. 
После истечения срока действия cookie-набора Web-браузер перестанет предос- 
тавлять его значение какому-либо сценарию и удалит cookie-набор из cookie- 
файла. Если вы не укажете дату, до которой действителен cookie-набор, он будет 
доступен только до тех пор, пока посетитель не закроет Web-браузер. Если вы 
зададите в качестве даты истечения срока действия cookie-набора дату, предше- 
ствующую местной дате и времени, Web-браузер удалит cookie-набор из cookie- 
файла. 
domain — по умолчанию сценарии на Web-страницах с того же домена, что 
и Web-страница, записавшая cookie-набор, могут извлечь значение cookie-на- 
бора. Добавив в cookie-набор значение домена, можно ограничить доступ оп- 
ределенными Web-серверами внутри домена. Например, если сценарий на 
Web-странице из NVBizNet.com записал cookie-набор, сценарии на Web-стра- 
ницах С NVBizNet.com И SQLServer.NVBizNet.com МОГут извлекать данные 
cookie-набор. Если при сохранении cookie-Ha6opf вы установите 
domain="SQLServer.NVBizNet.com", ТОШЮ сценарии на Wfeb-СТраницах, ОТПравлен- 
ных с Web-сайта SQLServer.NVBizNet.com, смогут читать этот cookie-набор. 
path — по умолчанию любая Web-страница из того же пути, что и Web-стра- 
ница, создавшая cookie-набор, может извлечь cookie-набор из cookie-файла. До- 
бавив в cookie-набор имя пути, можно задать путь, из которого должна происхо- 
дить Web-страница, чтобы иметь доступ к cookie-набору. Например, если 
cookie-набор был сохранен сценарием на Web-странице из " /htdocs", Web-стра- 
ницы, Хранящиеся В "/htdocs", "/htdocsabs"* "/htdocs/xyz" И Т.Д. МОГут ИЗ- 
влекать cookie-набор. Если при сохранении cookie-набор вы зададите path=M/ 
htdocs/cookiedocs/", только Web-страницы, сохраненные по пути, который на- 
чинается с "/htdocs/cookiedocs/", смогут читать cookie-набор. Аналогично, 
если вы зададите path="/", сценарий на любой Web-странице Web-сайта Сможет 
извлекать cookie-набор, поскольку для каждой Web-страницы на сайте путь начи- 
нается с "/" (корня сайта). 
secure — если при сохранении cookie-набора вы добавите ключевое слово 
secure, только Web-страницы, отправленные через безопасное (HTTPS) соедине- 
ние, смогут считать значение cookie-набора. 
Приведенные ниже операторы JavaScript добавляют в cookie-файл два cookie- 
набора. Первый cookie-набор (с именем Email) действителен до 14 июля 2003 
года. В то же время второй cookie-набор (с именем pwd) действителен до той же 
даты; однако только браузеры, подключенные к Web-серверу через безопасное 
(HTTPS) соединение, смогут читать этот cookie-набор: 
< scrip t> 
<! -- 
document.cookie = "Email=kki@NVBizNet.com;expires=Sun, 
14 ВМ 20 03 00:00:00 GMT" ; 
document.cookie • "pwd=king;expires=Sun, 
14 Jul 2003 00:00:00 GMT/secure" ; 
// - > 
</script>.

Глава 8. JavaScript 4 2 9 
Форматирование данных cookie-набора 
с помощью JavaScript 
ПРАКТИКУМ 
Из предыдущего практикума вы узнали, как сохранять данные cookie-набор в 
файле на жестком диске посетителя. К сожалению, формат данных cookie-набора 
легко забывается, а вычислять даты в формате GMT, до которых действительны 
cookie-наборы, по меньшей мере, утомительно. Поэтому вы наверняка захотите 
вставить между начальным и конечным дескрипторами сценария (<scriptx/ 
script>) в заголовочной части Web-страницы, которая должна сохранять cookie- 
набор, Следующую фуНКЦИЮ setCookie(): 
function setCookie (CookieName,CookieValue,ExpDate,Domain,Path, 
Security) 
r
i 
var CookieData = CookieName; 
//• Сохранять буквы и цифры как самих себя, но сохранять все 
// символы или пробелы в значении cookie^uadopa как ASCII-коды 
CookieData = CookieData + "=" + escape(CookieValue); 
// Проверить задание значений необязательных параметров 
if (ExpDate.value != "") 
CookieData = CookieData + " ; expires=" + ExpDate.toGMTString() ; 
if (Domain != "") 
CookieData = CookieData + " ; domain=" + Domain; 
if (Path != "") 
CookieData = CookieData + "; path=" + Path; 
if (Security == "secure") 
CookieData = CookieData + "; secure" 
// Вставить cookie-набор в cookie-файл 
document.cookie = CookieData; 
return; 
} 
Функция setcookie о в данном примере принимает имя cookie-набора, зна- 
чение, дату истечения срока действия, домен, путь и ограничения по безопасно- 
сти и помещает их в требуемый формат, прежде чем вставить cookie-набор в 
cookie-файл. 
Включив в код своей Web-страницы функцию setcookie(), вы можете дать 
браузеру указание вызвать функцию с данными cookie-набора, которые вы хотите 
сохранить. Предположим, например, в коде вашей Web-страницы имеется следу- 
ющее определение формы, которая просит пользователя ввести имя, фамилию и 
адрес e-mail: 
<form name="RegistraionForm"> 
<table> 
<tгXtd>HMH:</td> 
<tdxinput type="text" name="fname" size = "20"X/tdX/tr> 
< trXtd><I>ai««iH*: < /td> 
<tdxinput type="text" name="lname" size="20"X/tdX/tr> 
<trXtd>E-mail :

43 0 . ' Глава 8. JavaScript 
<tdxinput type="text" name="email" size="20"X/tdX/tr> 
<trXtdXinput type="button" уа1ие="3арегистрироваться" 
onClick="visitorSignIn (RegistrationForm) "X/tdX/tr> 
</table> 
</form> 
Когда посетитель щелкает на кнопке "Зарегистрироваться" в нижней части 
формы, браузер вызывает функцию visitorsignino, которая, в свою очередь, 
проверяет данные, введенные в форму, и затем обращается к функции 
setCookie(). Чтобы использовать форму, объявите между начальным и конеч- 
ным дескрипторами сценария (<scriptx/script>) в заголовке Web-страницы 
ФУНКЦИЮ visitorSignIn() : 
function visitorSignln(Form) 
if (Form.fname.value == "") return false; 
if (Form.1name.value== "") return false; 
if (Form.email.value== "'") return false; 
// Сгенерировать дату истечения срока действия как год, 
// начиная с сегодняшнего дня 
var ExpDate = new Date () ; 
ExpDate.setTime (ExpDate.getTime() + 
(365 * 24 * 60* 60 * 1000) ) ; 
// Записать cookie-набор, сохраняющий имя, фамилию 
// и адрес e-mail 
setCookie ("FirstName",Form.fname.value,ExpDate,"","","") ; 
setCookie ("LastName",Form,lname.value,ExpDate,"","",""); 
setCookie ("eMailAddr",Form.email.value,ExpDate,"","",""); 
// Загрузить другую Web-страницу 
self.location=nChpt08Page404LoggedIn.htm" 
Первые три оператора функции visitorsignin o дают браузеру указание вер- 
нуться к регистрационной форме, если какое-то из полей формы осталось неза- 
полненным. Три ВЫЗОВа фуНКЦИИ setCookie () ближе К КОНЦу фунКЦИИ 
visitorsignin o сохраняют данные в полях формы в виде трех значений cookie- 
набора в cookie-файле. 
Извлечение значения cookie-набора из cookie-файла 
Как вы узнали в одном из предыдущих практикумов этой главы, Web-браузер 
создает после получения Web-страницы с Web-сервера объект document. Браузер 
сохраняет свойства Web-страницы и свойства объектов, вставленных в страницу, в 
объекте, document. Кроме того, браузер считывает cookie-файл и сохраняет в 
свойстве document. cookie пары имен/значений из cookie-наборов, которые мо- 
гут быть использованы сценариями на Web-странице. Прежде чем вы сможете 
использовать значение cookie-набора, вам потребуется извлечь значение из стро- 
ки всех имеющихся имен и значений cookie-набора в свойстве document.cookie.

Глава 8. JavaScript 43 1 
ПРАКТИКУМ 
Приведенная ниже JavaScript-функция возвращает значение отдельного cookie- 
набора из свойства cookie объекта документа: 
function cookieValue (FirstChar) 
{ 
// Пары "имя/значение" cookie-набора в свойстве document.cookie 
// отделены друг от друга точками с запятой. Найти индекс первой 
// точки с запятой после начала значения cookie-набора, 
var LastChar = document.cookie.indexOf (";", FirstChar); 
if (LastChar ^ -1) 
LastChar = document.cookie.length; 
return unescape(document.cookie.substring(FirstChar, LastChar) ) ; 
i
j 
Функция unescape () в последнем операторе функции cookieValue () преоб- 
разовывает управляющие последовательности в значении cookie-набора в соот- 
ветствующие им ASCII-символы. Вспомните: в предыдущем практикуме при сохра- 
нении значения cookie-набора вы пользовались функцией escape (). В результате 
браузер сохранил "kki@NVBizNet.com" В COOkie-фаЙле каК "kki%40NVBizNet.com". 
Функция unescape () преобразовывает управляющую последовательность "%40" 
обратно в символ @. 
Прежде чем вы сможете вызвать функцию cookieValue о, вы должны узнать, 
где в строке всех пар имен/значений cookie-набора в document. cookie начинает- 
ся значение требуемого cookie-набора. Следующая функция найдет первый сим- 
вол в значении cookie-набора, имя которого вы передадите ей в параметре 
CookieName. Вызвав функцию cookieValue () , функция getCookieValue () вер- 
нет значение cookie-набора, соответствующее имени, которое вы передали ей в 
параметре CookieName: 
function getCookieValue (CookieName) 
{ 
CookieName = CookieName + " = " ; 
var NameLength = CookieName.length; 
var CookieLength = document.cookie.length; 
var FirstChar = 0; 
var LastChar = 0; 
while (FirstChar < CookieLength) 
{
LastChar = FirstChar + NameLength; 
if (document.cookie.substring(FirstChar, LastChar) == CookieName) 
return cookieValue (LastChar); 
// Перейти на 1 символ за пробел между парами "имя/значение" cookie-набора 
FirstChar = document.cookie.indexOf (" "/FirstChar) + 1; 
if (FirstChar == 0) break; 
} 
return null ; 
i
i 
Следовательно, чтобы извлечь значения cookie-набора из свойства 
document.cookie по имени, сначала объявите между начальным и конечным 
дескрипторами сценария (<scriptx/script>) в заголовке Web-страницы функ-

432 Глава 8. JavaScript 
ЦИИ copkieValue() И getCookieValue () . После ЭТОГО ВЫ СМОЖете ВСТавИТЬ СЦе- 
нарий, аналогичный приведенному ниже, в тело Web-страницы, чтобы извлечь и 
отобразить имя, фамилию и адрес e-mail из cookie-набора, которые были сохра- 
нены в предыдущем практикуме (см. рис. 8.8). 
<script> 
<!-- 
document.RegForm.fname.value 
document.RegForm.lname.value 
document.RegForm.email.value 
getCookieValue("FirstName") 
getCookieValue("LastName"); 
getCookieValue("eMailAddr") 
</script> 
1 Файл Правке Вид Избранное Сщрвис • правке • ' : 1 
. •> - -'- • J Л i3 ^ JJ -J -V ai Щ - 
Аарес j f i ] htip;//html^ebdesign/Chepter08/Figure08-08 him 
HTML & Web Design Tips 
& Techniques 
Чтение значений cookie-набора 
, 
Имя: 
Фамилия: 
E-mail: 
Зарегистрироваться 
JKonrad 
[King 
kki@NVBizNet com 
Ij 
Рис. 8.8. Форма с данными, извлеченными из значений cookie-набора, 
который хранится в document.cookie 
Удаление cookie-набора из cookie-файла 
Когда браузер просматривает cookie-файл в поисках cookie-наборов для добав- 
ления в свойство cookie объекта документа текущей Web-страницы, он удаляет 
все cookie-наборы, срок действия которых истек. Помните: когда вы сохраняете 
cookie-набор, вы сохраняете дату истечения срока действия вместе с именем и 
значением cookie-набора. Поскольку каждый cookie-набор увеличивает размер 
cookie-файла и cookie-файл может содержать максимум 200 cookie-наборов на каж- 
дый домен, следует удалять cookie-наборы, которые больше вам не нужны. Посколь- 

ку Web-браузер автоматически удаляет из cookie-файла cookie-наборы с истекшим 
сроком действия, просто установите дату истечения срока действия cookie-набора, 

который вы хотите удалить, равной дате и времени когда-нибудь в прошлом. 
ПРАКТИКУМ 
Объявив приведенную ниже функцию между начальным и конечным дескрипто- 
рами сценария (<scriptx/script>) в HTML-коде своей Web-страницы (пред- 
почтительно в заголовочном разделе), вы сможете вызывать функцию 
deietecookie () всякий раз, когда вам понадобится удалить cookie-набор:

Глава 8. JavaScript 433 
function DeleteCookie (CookieName) 
document.cookie = CookieName 
return; 
+ " = ; e x p i r e s = T h u , 01 J a n 1970 0 0 : 0 0 : 0 1 GMT" 
Функция deieteCookie() "заканчивает" срок действия cookie-набора путем 
установки даты истечения срока действия cookie-набора равной самой ранней 
применимой дате (одной секунде пополуночи 1 января 1970 года). Поскольку 
сейчас правильное местное время на любом компьютере давно "перевалило" за 1 
января 1970 года, вызов deietecookie() приведет к тому, что браузер удалит из 
cookie-файла тот cookie-набор, имя которого вы передадите функции в параметре 
CookieName. Предположим, например, вы ранее сохранили cookie-набор с име- 
нем toDelete. ВШИ ВЫ ВЫПОЛНИТе Оператор deleteCookie("toDelete"); (как 
показано близ окончания следующего примера кода), Web-браузер удалит cookie- 
набор, как показано на рис. 8.9. 
г'нНИГ ript функций для удалений соakie-наборов из cookie-файла - Mi.. 
Файл Правка gna Избранное Сервис 
vebdesign/Cho.pter08/Figure08-09.h!n 
HTML & Web Design Tips & Techniques 
Удаление значений cookie-набора 
сооМе-наборы, имеющиеся до вызова функции deleteCooMeO 
cookie-набор = FirsfName=Konrad; LastName—King; eMaiIAddr=kki@NVBizNetcom; 
toDelete-=CookieValue 
cookie-наборы, имеющиеся ПОСЛЕ вызова функции deleteCooMeO 
cookie-набор = FirsfName=Konrad; LastName=King; eMailAddr=kki@NVBizNetcom 
Рис. 8.9. cookie-наборы до и после изменения даты истечения срока действия 
<html> 
<head> 
<script language="JavaScript"> 
<!-- 
function DeleteCookie (CookieName) 
{ 
document.cookie = CookieName + "=; expires=Thu, 01 Jan 1970 00:00:01 GMT" 
return; 
</script> 
</head> 
<body> 
<hl>HTML & Web Design Tips & Techniques</hl> 
<п2>Удаление cookie-Ha6opa</h2> 
<ЬЗ>соок1е-наборы, имеющиеся до вызова функции deleteCookie()</h3>

43 4 . Глава 8. JavaScript 
<script language="JavaScript"> 
document.write(!<p>cookie = ' + document.cookie+'</p>'); 
deleteCookie("toDelete"); 
document .write (! <h3>cookie-Ha6opbi, имеющиеся ПОСЛЕ вызова функции ' 
'deleteCookie()</h3>'); 
document.write("<p>cookie-набор = " + document.cookie+'</p>'); 
</script> 
</body> 
</html> 
Экономия времени и усилий с помощью 
готовых (внешних) сценариев 
Пополняя новыми "произведениями" свою библиотеку JavaScript, вы, несом- 
ненно, напишете ряд функций и сценариев, которые сможете использовать на 
нескольких Web-страницах. Хорошим примером этого могут послужить функции 
отображения и обслуживания cookie-наборов, которые вы видели в предыдущих 
трех практикумах. Чтобы задавать, извлекать и удалять cookie-наборы, вы можете 
просто копировать и вставлять эти функции между начальным и конечным деск- 
рипторами сценария (<scriptx/script>) каждой Web-страницы, где они вам 
понадобятся. Однако использование атрибута src в дескрипторе <script> для 
подключения внешнего файла сценария может сэкономить вам время, которое в 
ином случае пришлось бы потратить на поиски и копирование кода JavaScript в 
ваши Web-страницы. Более того, давая браузеру указание считывать код, сохра- 
ненный в других файлах, вы уменьшаете "загроможденность" своего HTML-доку- 
мента, что позволит вам сконцентрировать свое внимание на тех дескрипторах, 
которые потребуется изменять, дабы содержимое вашего сайта не отставало от 
велений времени. 
ПРАКТИКУМ 
Чтобы дать Web-браузеру указание подключить функции и сценарии, сохранен- 
ные во внешних файлах, добавьте в начальный дескриптор <script> атрибут src 
В ВИДе <script згс="относительный_путь/имя__файла_сценария">. ПредпОЛО- 
жим, например, вы храните файлы сценариев в папке с именем scripts, a Web- 
страницы — в папке hotdocs — обе находятся в корне вашего Web-сайта. HTML- 
код для включения функций (или сценариев), сохраненных в папке scripts, в 
Web-страницу, сохраненную в папке hotdocs, будет выглядеть примерно так: 
<head> 
<script src=" . ./scripts/GetCookieValue. jsX/script> 
</head> 
Строка ". ./scripts" в примере кода - это относительный путь к файлу сце- 
нария, который должен подключить браузер. В данном случае, HTML сообщает 
браузеру, что тот может найти файл сценария относительно текущей Web-страни- 
цы (сохраненной в папке hotdocs), поднявшись на один уровень вверх в иерар- 
хии папок (в корневую папку Web-сайта) и затем спустившись на один уровень

Глава 8. JavaScript 4 3 5 
вниз в папку scripts. Если бы вам потребовалось включить этот же файл сцена- 
рия в страницу (например, index.htm), .сохраненную в корне Web-сайта, деск- 
риптор <script> выглядел бы следующим образом: 
<head> 
<script src= " scripts/GetCookieValue . jsX/script> 
</head> 
В данном случае путь относительно текущей Web-страницы дает Web-браузеру 
указание начать с текущей цапки (корня Web-сайта) и перейти на один уровень 
вниз в папку scripts. Вы можете включить в HTML-код столько пар дескрипто- 
ров сценария (<scriptx/script>), сколько необходимо для подключения фай- 
лов со сценариями и функциями, которые нужны на Web-странице. Например, 
если вы сохранили функции управления cookie-наборами, о которых узнали в 
трех предыдущих практикумах, в трех файлах, для подключения этих файлов вам 
понадобится HTML-код, подобный следующему: 
<head> 
<script src=" . ./scripts/SetCookie. jsX/script> 
<script src=" . . /scripts/GetCookieValue. jsX/script> 
<script src=" . . /scripts/DeleteCookie . jsX/script> 
</head> 
Обратите внимание, что сценарии, сохраненные во внешних файлах, не име- 
ют начальных и конечных дескрипторов сценария (<scriptx/script>). 
Создание анимации с помощью события onLoad 
Анимация на Web-странице создается путем отображения в быстром темце 
изображений одно за другим. Каждая картинка в анимации, как каждый кадр в 
фильме, слегка отличается от той, которая следует непосредственно перед ней. 
Ваш мозг воспринимает движение (то есть анимацию), когда объекты в одном 
месте на картинке "перемещаются" в другое место при замене Web-браузером те- 
кущего изображения следующим. 
ПРАКТИКУМ 
Добавив в дескриптор <img> событие onLoad, вы можете дать Web-браузеру ука- 
зание заменять изображение, вставленное дескриптором в код страницы, другой 
картинкой всякий раз, когда браузер завершает загрузку изображения. Чтобы 
представить себе, как происходит этот процесс, следует понимать, что Web-брау- 
зер активирует обработчик события onLoad после того, как загрузит (то есть ото- 

бразит) изображение на Web-странице. Следовательно, приведенный ниже деск- 
риптор <img> отобразит картинку из файла Framei.jpg. Затем браузер 
инициирует обработчик события onLoad, который, в свою очередь, вызовет (оп- 
ределенную Пользователем) ФУНКЦИЮ nextlmage (): 
<img name="animation" src="images/Framel.jpg" 
onLoad="nextImage(document.animation,src)"> 
Функция nextimage () создает анимационный эффект. Как вы увидите из 
приведенного ниже кода, всякий раз, когда Web-браузер вызывает nextimage (),

Глава 8. JavaScript 
функция изменяет свойство src изображения с именем animation в массиве 
изображений объекта документа. В результате изменения свойства src Web-брау- 
зер загружает (то есть отображает) другое изображение, что, в свою очередь, 
ини- 
циирует событие onLoad, и процесс повторяется: 
<script> 
function nextlmage(ImageSource) 
{ 
var i = ImageSource.indexOf (M.jpg",0); 
var NextFrame = ImageSource.substring(i-1, i) ; 
if (NextFrame == "1") I И 
document.animation.src = "Frame2.jpg"; 
e l s e if (NextFrame == "2") 
document.animation.src = "Frame3.jpg"; 
e l s e if (NextFrame == "3") 
document.animation.src = "Frame4.jpg"; 
else 
document.animation.src = "Framel.jpg"; 
return; 
} 
/ / — -> 
</script> 
Анимация, отображаемая приведенным выше кодом, состоит из четырех кад- 
ров (то есть четырех разных картинок) и повторяется бесконечно. Чтобы остано- 
вить анимационную последовательность после того, как она будет воспроизведе- 
на один раз, удалите два оператора перед оператором return; функции. Если вы не 

загрузите первое изображение снова после загрузки последнего, браузер вызовет 
nextimage о еще раз после загрузки Frame4.jpg. Однако во время последнего про- 
хода nextlmage 0 не изменяет СКЖЖ) src изображения С Именем animation, ПО- 
скольку ни один из операторов if функции не оказывается истинным. В результате 
анимация останавливается, поскольку Web-браузер больше не инициирует событие 
onLoad, так как функция не дала браузеру указания загрузить другую картинку. 
Отображение самоизменяющихся баннеров 
с помощью JavaScript 
Баннеры присутствуют практически на каждом Web-сайте коммерческой на- 
правленности. Замысел прост: отображение небольшого графического изображе- 
ния, рекламирующего компанию или продукт. Вместо того чтобы заполнять весь 
экран рекламой (и навсегда отпугнуть посетителей от вашего сайта), вы можете 
отображать (неограниченную) последовательность рекламных изображений внут- 
ри небольшой области на экране, заменяя одну картинку другой через заданные 
интервалы времени. Собственно говоря, отображение баннеров во многом похо- 
дит на создание анимации (о которой вы читали в предыдущем практикуме). И 
анимация, и самозаменяющиеся баннеры требуют от ЛУеЬ-браузера отображения 
серии картинок одной за другой. В случае баннера, однако, вам нужно, чтобы 
браузер оставлял каждую картинку на экране в течение 5—10 секунд, чтобы у по- 
сетителя было достаточно времени на просмотр рекламы.

Глава 8. JavaScript 4 3 7 
ПРАКТИКУМ 
Чтобы создать самозаменяющийся (вращающийся) баннер, включите обработчик 
события onLoad, аналогичный приведенному ниже, в дескриптор <body> HTML- 
кода Web-страницы: 
<body onload="rotateBanner('images/Banner1.jpg')"> 
В данном случае обработчик события onLoad дает Web-браузеру указание выз- 
вать определенную пользователем функцию rotateBanner () после того, как бра- 
узер загрузит (отобразит) Web-страницу в окне приложения. Хотя JavaScript-фун- 
кция может заменить изображение, отображаемое на Web-странице, функция не 
может добавить на страницу новое изображение. Поэтому вы должны отобразить 
исходный баннер, вставив дескриптор <img>, аналогичный показанному при- 
мерно в середине следующего HTML-кода, куда-нибудь в тело Web-страницы: 
<hl>HTML & Web Design Tips & Techniques</hl> 
<h2Изменяющийся баннер</п2> 
<table> 
<trXtdXimg name="banner" src=" images/Banner 1. jpg"X/td> 
</tr> 
</table> 
Наконец, объявите между начальным и конечным дескрипторами сценария 
(<scriptx/script>) в заголовочной части HTML-кода Web-страницы функцию 
rotateBanner (), аналогичную показанной ниже: 
function rotateBanner(BannerSrc) 
{
var TimerlD 
// Заменить изображение 
document.banner.src = BannerSrc; 
// Ожидать тайм-аута и вызвать саму себя для замены 
//на следующее изображение 
if (BannerSrc == "Bannerl.jpg") 
TimerlD = setTimeout("rotateBanner('Banner2.jpg')",5000); 
else if (BannerSrc == "Banner2.jpg") 
TimerlD = setTimeout("rotateBanner('ВаппегЗ.jpg')",5000); 
else if (BannerSrc == "Banner3.jpg") 
TimerlD = setTimeout("rotateBanner('Banner4.jpg')",5000); 
else 
TimerlD = setTimeout("rotateBanner('Banner1.jpg')",5000); 
return; 
} 
Каждый раз, КОГДа фуНКЦИЯ rotateBanner () Изменяет СВОЙСТВО src ИЗОб- 
ражения с именем animation в массиве изображений объекта документа, 
Web-браузер выводит на экран новое изображение. Встроенная функция 
setTimeout () создает эффект "изменяющегося" баннера, каждые пять секунд 
рекурСИВНО ВЫЗЫВаЯ фуНКЦИЮ rotateBanner (), ЧТОбы ПОМенЯТЬ баннер На 
Web-странице. Синтаксис вызова функции setTimeout о) может сперва пока- 
заться несколько сбивающим с толку. Тем не менее, идея заключается в том, 
что функция оценивает выражение, переданное в качестве первого параметра,

43 8 Глава 8. JavaScript 
через число миллисекунд, указанное во втором параметре. Таким образом, при син- 

таксисе Timer lD = SetTimeout ("выражение" , задержка__в__миллисекундах), 
первый 
вызов setTimeout o) в данном сценарии дает Web-браузеру указание вызвать фун- 
кцию rotateBanner() через 5 000 миллисекунд (то есть через 5 секунд) и пере- 
дать имя пути "следующего" отображаемого баннера (images/Banner2. jpg). Что- 
бы отображать свои собственные баннеры, просто замените путевые имена в 
этом примере на имена путей своих баннеров и установите задержку в миллисе- 
кундах в каждом вызове функции setTimeouto равной периоду времени, в течение 
которого каждый баннер должен оставаться на экране. Увеличить или уменьшить 
количество баннеров можно, вставив или удалив операторы else if. 
Примите к сведению, что почти все (а, скорее, все) баннеры позволяют посе- 
тителям щелкать на них, чтобы проследовать по гиперссылке на Web-страницу, 
где можно приобрести рекламируемый продукт или заказать услугу. В следующем 
практикуме вы научитесь заменять не только графическое изображение, но и ги- 
перссылку, связанную с баннером. 
Направление гиперссылок на новые файлы "на лету11 
Когда посетитель производит щелчок на тексте гиперссылки или на "горячей 
области" навигационной карты, Web-браузер извлекает Web-страницу (или иной 
файл), заданную атрибутом href в дескрипторе <а> гиперссылки. Обычно вам 
нужно, чтобы Web-браузер извлекал один и тот же файл каждый раз, когда посе- 
титель щелкает на данной гиперссылке. Однако иногда удобным окажется на- 
правлять гиперссылку на новый файл в зависимости от даты или графического 
изображения, находящегося на экране, когда посетитель выполняет щелчок мышью. 
К счастью, массив links в объекте документа имеет три свойства, которые можно 
изменять, дабы направить гиперссылку на новый файл: hash, pathname и href. 
ПРАКТИКУМ 
Свойство hash позволяет изменить все, что находится в гиперссылке справа от 
знака решетки (#). По сути, свойство hash дает возможность изменить имя целе-' 
вой закладки, не меняя при этом файл, который должен извлечь браузер. Пред- 
положим, например, у вас есть следующая гиперссылка, которая указывает на 
Закладку monday на Web-СТранице events.htm: 
<а href="http://www.NVBizNet.com/htdocs/events.htm#monday"> 
События сегодняшнего дня</а> 
Полагая, что это первая гиперссылка на странице, можно определить опера- 
тор document,links[0] .hash= "tuesday";, КОТОРЫЙ Обеспечит изменение цели 
ГИПерССЫЛКИ На "http://www.NVBizNet.com/htdocs/events.htm#tuesday". Сле- 
довательно, если в events.htm есть закладка для каждого дня недели, вы можете 
с помощью одной-единственной гиперссылки добираться до раздела текущего 
дня всякий раз, когда посетитель щелкает на тексте гиперссылки — "События 
сегодняшнего дня". Вам потребуется всего лишь написать сценарий, который с 
помощью метода getDayO объекта даты будет определять день недели и затем

Глава 8. JavaScript 4 3 9 
присваивать текущий день недели свойству hash всякий раз, когда браузер загру- 
жает Web-страницу. 
Свойство pathname позволяет заменить все, что находится в гиперссылке 
между доменным именем и знаком решетки. По сути, свойство pathname дает 
возможность изменить имя пути файла, который браузер должен отобразить, не 
меняя при этом доменное имя или закладку (если таковая имеется). Предполо- 
жим, например, у вас есть следующая гиперссылка, указывающая на файл с име- 
нем Jan.htm В папке /news/2001: 
<а href="http://www.NVBizNet.com/news/2001/Jan.htmtbirthday"> 
Дни рождения в этом месяце</а> 
Полагая, что это вторая гиперссылка на странице, оператор 
document.links[1].pathname = M/news/2001/Feb.htm"; изменит цель ГИПерССЫЛ- 
КИ на "http://www.NVBizNet.com/news/2001/Feb.htm#birthday". (Обратите 
внимание, что ссылка на закладку "birthday" при присвоении не потерялась.) 
Следовательно, сохраняя ежемесячные бюллетени новостей компании в папке 
/news/2001 на Web-сайте, вы сможете использовать одну гиперссылку, чтобы пе- 
реносить раздел "birthday" бюллетеня текущего месяца всякий раз, когда посе- 
титель щелкает на тексте гиперссылки — "Дни рождения в этом месяце". Вам 
потребуется только написать сценарий, который с помощью методов объекта 
даты getYear() и getMonth() будет составлять имя пути на основании года и 
месяца, а затем присваивать новые путь и имя файла свойству pathname всякий 
раз, когда браузер загружает Web-страницу. 
Свойство href позволяет изменить весь URL-адрес гиперссылки. По сути, за- 
дание свойства href в массиве links оказывает тот же эффект, что и задание но- 
вого значения атрибута href в дескрипторе <а> гиперссылки. Предположим, на- 
пример, у вас есть изменяющийся баннер, и вы хотите, чтобы посетители могли 
переходить на Web-сайт той или иной компании, щелкая на соответствующем 
баннере. Сначала свяжите гиперссылку с баннером с помощью HTML-кода, ана- 
логичного показанному ниже: 
<а href="http://www.NVBizNet.com"> 
<img border="0" name="banner" src="images/Banner1 .jpg"X/a> 
Затем обновите функцию, которая подменяет баннеры, добавив операторы, 
присваивающие Web-адрес компании свойству href (такие как в первой группе 
операторов if.. .else в приведенной ниже функции): 
function rotateBanner(BannerSrc) 
{
var TimerlD 
// Заменить изображение 
document.banner.srс = BannerSrc; 
// Обновить гиперссылку баннера на адрес Web-сайта 
// сбответствующей компании 
if (BannerSrc == "Bannerl.jpg") 
document.links[0].href = "http://NVBizNet.com" 
else if (BannerSrc == "Banner2.jpg") 
document.links[0].href = "http://NVBizNet2.com"

440 Глава 8. JavaScript 
else if (BannerSrc == "Banner3.jpg") 
document.links[0]-href = "http://osborne.com" 
si se 
document.links[0].href = "http://mcgrawhill.com" 
// Ожидать тайм-аута и вызвать саму себя для замены 
//на следующее изображение 
if (BannerSrc == "Bannerl.jpg") 
TimerlD = setTimeout("rotateBanner('Banner2.jpg')",5000); 
else if (BannerSrc == "Banner2.jpg") 
TimerlD = setTimeout("rotateBanner('ВаппегЗ.jpg')",5000); 
else if (BannerSrc == "Banner3.jpg") 
TimerlD = setTimeout("rotateBanner('Banner4.jpg')",5000); 
else 
TimerlD = setTimeout("rotateBanner('Bannerl.jpg')",5000) ; 
return; 
i
j 
Предварительное кэширование файлов для 
уменьшения времени отображения изображений 
Предварительное кэширование графических изображений — это прием, с по- 
мощью которого вы даете Web-браузеру указание извлечь картинки с Web-сервера 
в настоящий момент, в предвидении того, что позже вам может понадобиться 
отобразить эти изображения. Поручив браузеру извлечь картинки в фоновом ре- 
жиме (то есть пока посетитель делает на странице что-либо иное), вы можете ус- 
транить проблему задержки загрузки, с которой столкнется пользователь, щелк- 
нув на миниатюре, чтобы увидеть большое изображение. Аналогично, если в 
вашей Web-странице использовано много сценариев, отображающих графические 
изображения для эффектов смены изображения при наведений курсора или ани- 
мации, вам стоит предварительно загружать в кэш еще не отображенные изобра- 
жения. Предварительно загруженное в кэш изображение, будучи востребовано 
браузером, появится на экране мгновенно — без задержки (возможно, достаточно 
продолжительной), связанной с ожиданием отправки изображения браузеру Web- 
сервером. Предположим, например, на вашей Web-странице присутствует восемь 
миниатюр, как показано на рис. 8.10. 
ПРАКТИКУМ 
Предварительно загрузить в кэш изображения, которые браузер будет отображать 
по щелчку посетителя на миниатюре, можно, вставив обработчик события 
onLoad либо в дескриптор <body> Web-страницы, либо в один из дескрипторов 
<img> миниатюр. Например, если вы вставите в дескриптор <img> последней 
миниатюры на рис. 8.10 следующий обработчик события onLoad, Web-браузер 
вызовет определенную пользователем функцию preCache(): 
<td><a href="images/Pix8.jpg"> 
<img onLoad=MpreCache()" boder="0" 
src="images/Pix8_small. jpg"X/aX/td>

Глава 8. JavaScript 441 
*а| Предварительное кэширование изображений на Web-странице - Microsoft 
Internet Explorer 
Файл Правка Цид Избранное Сервис .пра 
Ддрес с] htlp//html-v/ebdesign/Cheplef0S/Figure0B-10 htt 
HTML & Web Design Tips & Techniques 
Предварительное кэширование изображений на Web-странице 
Рис. 8.10. Web-страница с восемью миниатюрами, отображаемая в то время, как 
браузер 
загружает большие изображения v 
Ваша функция precachef), в свою очередь, будет выглядеть следующим образом: 
function preCache() ./ 
{.
var Pictures = new Array () ; 
for (i=l; i<=8; 
Pictures[i] = new Image(); 
Pictures[i].src = "images/Pix" + i + ".jpg"; 
}
return; 
Создав новый массив с именем Pictures, функция с помощью конструктора 
new image о создает новые объекты изображений, в которые затем загружает 
изображения с Web-сервера. Web-браузер не отображает изображения в то время, 
когда функция загружает их с Web-сайта. Тем не менее, браузер сохраняет файлы 
изображений в кэше системы. Когда посетитель щелкает на миниатюре, чтобы 
получить изображение большего размера, извлеченное функцией preCache(), 
браузер может извлечь большую картинку из локального кэша (то есть из памяти 
или с жесткого диска локального компьютера). Таким образом, загрузка больше- 
го изображения, соответствующего каждой миниатюре, в кэш системы позволяет 
браузеру избежать связанной с загрузкой задержки, обычно имеющей место, ког- 
да браузеру приходится извлекать изображение с Web-сервера. В результате соот-

442 " Глава 8. JavaScript 
ветствующее большее изображение появляется на экране незамедлительно после 
щелчка посетителя на миниатюре. Если вы решите использовать предваритель- 
ное кэширование изображений, убедитесь, что Web-браузер загружает картинки, 
вставленные в Web-страницу, до вызова функции preCache(). В конце концов, 
ваша цель — загрузить изображения в кэш системы, чтобы браузер смог быстрее 
отобразить изображения, если посетитель попросит их показать. Заставить посе- 
тителя дожидаться возможности увидеть другие изображения, пока вы загружаете 
массу картинок в кэш системы — это последнее, чего вы хотите добиться, особенно 

если в конечном итоге посетитель не станет просматривать эти картинки вовсе. 
Выбирая, куда поместить обработчик события onLoad, который будет вызы- 
вать функцию precache(), следует понимать, как браузер извлекает и отобража- 
ет содержимое Web-страницы. Браузер сначала выводит текст и отображает фор- 
мы и таблицы, обнаруженные им в HTML-коде. Затем браузер открывает 
несколько одновременных соединений с Web-сервером для загрузки графических 
изображений, помещенных на страницу. Поместив обработчик события onLoad в 
последний дескриптор <img> HTML-кода Web-страницы, вы сможете быть уве- 
ренным в том, что браузер по крайней мере начал загружать все миниатюры, 
прежде чем вызывать функцию предварительного кэширования. Более того, если 
миниатюры не все имеют одинаковые размеры, и есть возможность по-разному 
расположить их на странице, присвойте имя пути файла миниатюры с самым 
большим размером файла атрибуту src последнего дескриптора <img>. Таким 
образом, к тому моменту, когда браузер завершит загрузку последней, самой 
большой миниатюры, и обработчик события onLoad обратится к функции 
preCache(), все миниатюры будут загружены. 
Создание бегущей строки с помощью JavaScript 
Дескриптор <marquee> существует уже достаточно давно. К сожалению, в на- 
стоящий момент этот дескриптор поддерживается только браузером Internet 
Explorer. В результате этого при использовании для отображения бегущей строки 
на 
Web-странице дескриптора <marquee> посетители, пользующиеся Netscape Navigator, 

видят строку с обыкновенным неподвижным текстом. К счастью, в JavaScript есть 
функции для работы с таймером и строками, с помощью которых можно превра- 
тить однострочное текстовое поле в область для отображения бегущей строки. 
ПРАКТИКУМ 
Для создания бегущей строки нужно сперва определить форму с двумя текстовы- 
ми полями — скрытым полем, в котором будет содержаться текст бегущей стро- 
ки, и видимым полем, в котором будет отображаться движущийся текст. Напри- 
мер, приведенный ниже HTML-код создает форму, позволяющую отображать 
бегущую строку, в которой в любой момент времени будут видны до 50 символов: 
<form name="marquee"> 
<input type="hidden" name="marquee__text" 
value="flo6po пожаловать в JavaScript, описанный в этой книге!"> 
<inputtype="text" name="display_area" size="50"> 
</form>

Глава 8. JavaScript . 443 
Если вы хотите отобразить бегущую строку иной длины, измените значение 
атрибута size на максимальное число символов, которые должны быть отобра- 
жены на экране. (Также не забудьте установить значение атрибута value равным 
текстовой строке, которую бегущая строка должна будет прокручивать на экра- 
не.) Затем, чтобы создать эффект бегущей строки, вставьте следующую функцию 
между начальным и конечным дескрипторами сценария (<scriptx/script>) в 
заголовке своей Web-страницы: 
var StartPos = 0; 
function scrollingMarquee() 
{
var i 
var Padding =2 0 ; // количество пробелов между повторениями 
var ScrollingText = document.marquee.marquee_text.value; 
var StringLength = document.marquee.marquee_text.value.length; 
var TimerlD; 
// Интервал -- это количество пробелов между концом 
// бегущего текста и началом следующей копии этого текста 
for(i=l; i<=Padding; i++) ScrollingText += " "; 
ScrollingText += ScrollingText 
document.marquee.display__area. value = 
ScrollingText.substring(StartPos, 
StartPos + StringLength + Padding); 
if (StartPos++== (StringLength + (Padding—1) ) ) StartPos = 0; 
// Ожидать 200 миллисекунд, прежде чем перейти на 1 символ вправо 
TimerlD • setTimeout("scrollingMarquee()",200); 
} 
Помните, на Web-страницу можно поместить сколько угодно форм, поэтому 
вставка на страницу бегущей строки не помешает вам принимать ввод пользова- 
теля в другой форме. Более того, вы можете поместить свою форму или формы в 
таблицу. Тогда с помощью таблицы со скрытыми границами вы сможете помес- 
тить бегущий текст (то есть поле формы с "бегущим" текстом) именно туда, где 
вы хотите видеть его на Web-странице.

ПгеваЭ # 
и сбьеюы АсКиеХ 
В этой главе 
I Создание всплывающего навигационного меню с помощью 
аплета 
• Анимация строки текста с помощью аплета 
• Отображение и печать календаря на любой год с помощью 
аплета 
• Отображение с помощью аплета отрывка, случайным образом 
выбранного из текстового файла 
Создание с помощью аплета навигационного меню, 
выполняющегося в отдельном окне 
Прокручивание содержимого файла по вертикали в 
прямоугольной области на экране с помощью аплета 
Анимация синусоидальных колебаний изображения с помощью 
аплета 
• Редактирование исходного Java-кода для компиляции 
пользовательского аплета 
• Добавление в Web-страницу Internet-чата с помощью 
элемента управления ActiveX Microsoft Chat 
Использование только объектов ActiveX в Internet Explorer

Глава 9. Java-аплеты и объекты ActiveX 4 45 
Из главы 8 вы узнали, как создавать с помощью JavaScript сценарии, 
[которые помещаются в HTML-файлы. Обнаружив JavaScript, Web-браузер 
выполняет соответствующие операторы. Хотя JavaScript предоставляет немало 
возможностей в области создания простых сценариев, JavaScript не предусматри- 
вает средств, с помощью которых программисты могли бы создавать мультиме- 
дийные приложения, оперирующие звуком и графикой, или позволяющих про- 
граммистам взаимодействовать с удаленными данными,— такими как база данных 
предприятия. Для разработки высокопрофессиональных приложений для Web 
многие программисты применяют язык программирования Java. 
В частности, с помощью Java программисты создают Web-приложения, назы- 
ваемые атлетами (applets). С помощью дескриптора <appiet> Web-разработчики 
встраивают Java-аплет в Web-страницу,— примерно так же, как с помощью деск- 
риптора <img> в Web-страницу вставляется графический элемент. Обнаружив в 
коде HTML-страницы дескриптор <appiet>, браузер выгружает с сервера и за- 
пускает на выполнение указанный аплет. Java-аплеты прекрасно подходят для 
использования в Web по следующим причинам: 
• Java-аплеты являются обобщенными, что значит, что один и тот же аплет 
будет запускаться под Windows, Linux, MacOS и не только (обобщенная 
природа Java делает аплеты в большей степени переносимыми, то есть про- 
граммисты могут легко переносить аплет с компьютера одного типа на 
компьютер другого типа с иной операционной системой). 
• Java-аплеты не могут получить доступ к диску или файлам пользователя, 
что значит, что аплет не может поместить на компьютер пользователя ви- 
рус, а также не имеет доступа к информации, сохраненной на диске 
пользователя. 
В этой главе рассматриваются действия, которые вам потребуется выполнять 
для встраивания Java-аплетов в свои Web-страницы. Глава также содержит не- 
сколько готовых к выполнению аплетов, которые вы сразу же сможете использо- 
вать. Java-аплеты — это программы, a Java — мощный язык программирования. 
Эта глава не научит вас программировать на Java, однако покажет, как выгружать 
средства программирования на Java и с их помощью вносить несложные измене- 
ния в Java-программы. Из Web можно выгрузить код множества Java-аплетов. Ап- 
леты зачастую можно персонализировать в соответствии со своими потребностя- 
ми путем внесения нескольких простых изменений в программный код,— 
например, изменить имена файлов, которыми оперирует программа, или текст, 
который программа выводит на экран. В этой главе описывается, как вносить та- 
кие изменения в Java-программу и как затем заново скомпилировать аплет, что- 
бы изменения вступили в силу. 
Помимо использования для реализации Web-приложений языка Java, многие 
сайты поручают выполнение определенных задач объектам ActiveX, которые весь- 
ма подобны программам. С помощью ActiveX, например, Web-сайт может ото- 
бражать биржевую сводку или строку состояния, показывающую процент выпол- 
нения задачи (например, выгрузки файла) Web-браузером. Объекты ActiveX 
отличаются от Java-аплетов в следующих аспектах:

446 Глава 9. Java-аплеты и объекты ActiveX 
• Объекты ActiveX не являются обобщенными. В отличие от Java-аплетов, 
поддерживающих Windows, Linux, Macintosh и не только, объекты ActiveX 
существуют только для платформы Windows. 
• Объекты ActiveX не являются безопасными. В отличие от Java-аплета, ко- 
торый выполняется внутри браузера и не может получить доступ к диску и 
файлам пользователя, объект ActiveX располагается на диске пользователя 
и получает доступ ко всем ресурсам системы. "Злоумышленный" объект 
ActiveX, например, может внедрить вирус, а также может похитить, повре- 
дить либо уничтожить информацию на диске пользователя. 
Принимая во внимание то, что объекты ActiveX поддерживают только плат- 
форму Windows, и что объекты ActiveX не безопасны, вы можете задать логичный 
вопрос - зачем вообще использовать объекты ActiveX? Поскольку объекты 
ActiveX располагаются на компьютере пользователя, они могут взаимодействовать 
с Windows, благодаря чему с помощью этих объектов программисты могут созда- 
вать очень мощные решения. В Internet общепризнанным фактом является то, 
что большинство пользователей путешествуют по Web, работая под управлением 
операционной системы Windows. Поскольку объекты ActiveX не безопасны, сле- 
дует использовать только объекты ActiveX, созданные самостоятельно либо про- 
граммистами, которых вы знаете и которым доверяете, либо выгруженные с зас- 
луживающих доверия Web-сайтов (например, из сайта Microsoft). В этой главе 
описываются действия, которые вам необходимо предпринять, чтобы встроить 
объект ActiveX в код своей Web-страницы. 
Как браузер выполняет Java-аплет 
Java-аплет хранится в файле. На протяжении многих лет программисты* на 
Java помещали Java-аплеты в Web-страницы с помощью дескрипторов <appiet>. 
Как показано ниже, с помощью дескриптора <appiet> можно указать имя файла 
аплета: 
<applet code="Demo.class"> 
</applet> 
Хотя браузеры все еще поддерживают дескриптор <appiet>, в соответствии с 
требованиями комитета W3C для вставки Java-аплетов в Web-страницы следует 
использовать дескриптор <object>, как показано ниже: 
<object code="Demo.class"> 
</object> 
Просматривая HTML-файлы, в которых используются Java-аплеты, вы обнару- 
жите, что дескриптор <appiet> распространен весьма широко. Комитет W3C, 
однако, настоятельно не рекомендует применять дескриптор <appiet> , но реко- 
мендует использовать дескриптор <object>. Теоретически, в будущем браузеры 
могут вообще прекратить поддерживать дескриптор <appiet>. Однако по причи- 
не широкого распространения этого дескриптора в настоящее время, браузеры, 
по всей вероятности, будут продолжать поддерживать его в течение некоторого

Глава 9. Java-аплеты и объекты ActiveX 447 
времени в будущем. Кроме того, пока все браузеры не будут полностью поддер- 
живать дескриптор <object>, вы наверняка столкнетесь с меньшим числом про- 
блем совместимости, если будете пользоваться дескриптором <appiet>, что и 
обсуждается в этой главе. 
Обнаружив дескриптор <appiet>, браузер должен выгрузить аплет с серве- 
ра, — примерно так же, как при обнаружении дескриптора <img> браузер должен 
выгрузить графическое изображение. Файлы Java-аплетов имеют расширение 
.class. В данном случае дескриптор <appiet> дает браузеру указание выгрузить 
файл аплета с именем Demo.class. Загрузив файл аплета, браузер выполняет 
операторы аплета. Рисунок 9.1 иллюстрирует процедуру индентификации, выг- 
рузки и выполнения Java-аплета браузером. 
Запрос 
Web-страницы 
браузером 
HTML, 
изображения, 
Java-аплеты 
Сервер 
Рис. 9.1. Браузер выгружает Java-аплеты с сервера 
Обычно при создании приложений код, который пишет программист, являет- 
ся специфическим для аппаратного обеспечения и платформы операционной си- 
стемы. Например, программист может создать приложение, которое будет вы- 
полняться на процессоре Intel (или совместимом с ним) под управлением 
Windows, или на процессоре Motorola под управлением MacOS. Если програм- 
мисту нужно поддерживать обе среды (Macintosh и Windows), ему придется со- 
здать две отдельные программы. Приложение на базе Windows не будет запус- 
каться на Macintosh и наоборот. 
В противоположность приложениям, созданным с использованием других 
языков программирования, Java-аплеты не связаны платформенными ограниче- 
ниями. Вместо программного кода, специфического для процессора Intel или 
для процессора Motorola, Java-аплеты содержат типовые наборы инструкций, ко- 
торые программисты называют байт-кодом (bytecode). Выгрузив Java-аплет, брау- 
зер преобразовывает типовой байт-код в машинно-зависимый код, который мо- 
жет выполняться процессором пользователя. Иными словами, браузер на 
компьютере, работающем под управлением Windows, преобразует байт-код в 
Intel-специфические инструкции. Аналогично, браузер на Macintosh преобразует 
байт-код в Motorola-специфические инструкции. Благодаря использованию ти- 
пового байт-кода один и тот же Java-аплет может работать на разнообразных 
платформах, как показано на рис. 9.2.

448 Глава 9. Java-аплеты и объекты ActiveX 
Байт-код аплета 
Рабочая станция Windows 
Байт-код аплета 
Рабочая станция Linux 
Байт-код аплета 
Сервер 
Рабочая станция Macintosh 
Рис. 9.2. В Java-аплетах используется обобщенный байт-код, который браузер 
транслирует в машинно-зависимый код, что позволяет одному и тому же 
аплету выполняться на компьютерах различных типов 
Вы можете спросить, почему же тогда всем программистам просто не писать на 
Java приложения, которые могли бы выполняться на всех системах. Проблема типо- 
вого байт-кода заключается в том, что браузеру приходится транслировать про- 
граммный код в машинно-зависимую программу при каждом запуске приложения. 
Эта процедура трансляции увеличивает объем служебных операций, в связи с чем 
возникает задержка перед выполнением программы. Кроме того, машинно-зависи- 
мый код, генерируемый браузером, зачастую менее эффективен, чем инструкции, 
которые тот или иной язык программирования может создать для отдельного про- 
цессора. Таким образом, при параллельном запуске взаимно эквивалентных про- 
грамм на Java и C + + программа на C + + обычно будет выполняться быстрее. 
Кроме 
того, каждый раз, когда пользователь запускает аплет, браузеру приходится 
выгру- 
жать его. В противоположность этому — как вы узнаете далее в этой главе — когда 

Web-сайт использует объект ActiveX, сайту приходится выгружать этот объект 
только 
однажды. После этого объект будет располагаться на диске пользователя, и прило- 

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

телей от вирусов и иных угроз, присутствующих в программах, загружаемых из Web. 

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

Глава 9. Java-аплеты и объекты ActiveX 449 
Java-аплеты не являются автономными исполняемыми программами. Нельзя, 
например, выгрузить Java-аплет и просто запустить его на выполнение под уп- 
равлением Windows или Unix. Вместо этого, аплеты могут выполняться только 
внутри браузера. 
Когда компания Sun Microsystems разрабатывала язык программирования Java, 
его создатели обращали особое внимание, на безопасность и угрозы для систем 
пользователей, проистекающие из запуска программ, выгруженных пользователя- 
ми из Web. В целях устранения таких угроз, как вирусы и хищение информации, 
Java-аплеты не имеют доступа к ресурсам (в частности, файлам), располагаю- 
щимся на диске'пользователя. Как показано На рис. 9.3, Java попросту не предо- 
ставляет программистам средств, необходимых для выполнения операций на 
компьютере пользователя. Более того, Java-аплеты не могут считывать свойства 
системы, загружать файлы библиотек или открывать сетевые подключения к сай- 
там иным, нежели хост, с которого они были выгружены. 
Рис. 9.3. Чтобы решить проблему безопасности, Java-аплеты 
не допускают операций с дисками и файлами 
Как вы уже знаете, Java-аплет выполняется в среде Web-браузера пользователя. 
Специальное программное обеспечение внутри браузера, которое выполняет аплеты, 
программисты называют виртуальной Java-машиной {Java Virtual Machine - JVM). 
Когда браузер обнаруживает в HTML-файле дескриптор <appiet>, браузер, по сути 
дела, передает аплет виртуальной Java-машине, которая, в свою очередь, 
загружает, 
транслирует (байт-код в машинно-зависимый код) и выполняет аплет. 
Модель безопасности, используемую виртуальной Java-машиной для выполнения 
аплетов, программисты часто называют "песочницей" {sandbox). "Песочницу" можно 
представить в себе в виде ограждения, окружающего аплет и не допускающего Java- 

программу в закрытые для общего доступа области в памяти и на жестком диске. 
Как браузер выполняет объект ActiveX 
Объекты ActiveX сходны с Java-аплетами в том, что они дают возможность до- 
бавлять в Web-страницы программы. В Web можно найти тысячи объектов 
ActiveX (называемых программистами также элементами управления ActiveX 
{ActiveXcontrols)), которые выполняют множество разнообразных задач — от ото-

450 Глава 9. Java-аплеты и объекты ActiveX 
бражения сообщения в виде бегущей строки до генерации речевого вывода дан- 
ных на основе текста и реализации распознавания речи в программах и Web- 
страницах. Чтобы найти объекты ActiveX, начните поиск со следующих сайтов: 
• http://activex.microsoft.com/activex/activex/ 
• http://visualbasic.about.com/cs/activexfree/ 
• http://webreference.com/programming/activex.html 
• http://activex.microsoft.com 
• http://zdnet.com/devhead/ 
ActiveX, в отличие от Java, не является языком программирования. Скорее, 
ActiveX - это средство встраивания объектов, написанных на различных языках, 
внутри среды Windows. К сожалению, даже через много лет с момента своего 
первоначального появления, ActiveX по-прежнему работает только в среде 
Windows (то есть не существует объектов ActiveX для Unix или Macintosh), и под- 

держка ActiveX не является стандартной функцией Netscape Navigator. (Microsoft, 

Macromedia и другие крупные компании, выпускающие программное обеспече- 
ние, предоставляют подключаемые модули, позволяющие Netscape Navigator вы- 
полнять объекты ActiveX, но эти подключаемые модули не являются стандарт- 
ным компонентом Netscape Navigator.) 
Как и в случае с Java-аплетами, для того, чтобы использовать объект ActiveX, 
вы помещаете дескриптор в HTML-файл — в том месте, где объект должен будет 
появиться на Web-странице. Для помещения объекта ActiveX на страницу приме- 
няется дескриптор <object>. 
В отличие от Java-аплетов, которые выполняются в среде браузера, объекты 
ActiveX должны размещаться на диске пользователя. Если пользователь заходит 
на Web-страницу, на которой имеется объект ActiveX, и этот объект не установ- 
лен на диске пользователя, Web-сервер предпримет попытку переслать объект на 
компьютер пользователя. Обычно, в зависимости от заданных пользователем па- 
раметров безопасности, Web-браузер выводит на экран диалоговое окно, анало- 
гичное показанному на рис. 9.4, которое предупреждает пользователя, что он со- 
бирается выгрузить объект ActiveX. 
Рис. 9.4. Диалоговое окно, предупреждающее пользователя о том, 
что он собирается выгрузить объект ActiveX

Глава 9. Java-аплеты и объекты ActiveX 45 1 
Браузер предупреждает пользователя об объектах ActiveX ввиду того, что, в от- 
личие от Java-аплетов, модель безопасности которых предотвращает получение 
ими доступа к файлам и диску пользователя, объекты ActiveX не являются безо- 
пасными. Объект ActiveX должен фактически находиться на диске пользователя 
(или, точнее, на Web-страницах, посещаемых пользователем), прежде чем можно 
будет использовать этот объект. Более того, в отличие от Java-аплетов, которые 
выполняются внутри "песочницы", препятствующей их доступу к системным ре- 
сурсам, объекты ActiveX имеют доступ ко всем файлам и ресурсам компьютера. 
После того, как пользователь загрузил объект ActiveX, Web-страница может взаи- 
модействовать с объектом с помощью языка сценариев, такого как VBScript или 
JavaScript. 
Если посетитель слишком доверчив и разрешает выгрузку объекта ActiveX с 
неизвестного Web-сайта, все может просто закончиться установкой программы, 
содержащей вирус либо посылающей приватные данные пользователя (или, мо- 
жет быть, даже все содержимое жесткого диска) лицам, не уполномоченным на 
получение этих данных. Ваша задача как дизайнера — помещать на свои Web- 
страницы только объекты ActiveX, полученные из надежных источников (напри- 
мер, Microsoft, Macromedia или от программистов, которым вы доверяете). 
Создавая объекты ActiveX, программисты используют множество языков про- 
граммирования, например, Visual Basic или Visual C+ + . Эта глава не научит вас 

писать объекты ActiveX, но расскажет, как встраивать готовые объекты ActiveX в 
собстсвенные Web-страницы. 
Помещение Java-аплета на Web-страницу 
Как вы уже знаете, Java-аплет - это программа, которую Web-браузер выпол- 
няет как составляющую содержимого Web-страницы. Для внедрения аплета в 
Web-страницу применяются начальный и конечный дескрипторы аплета 
(<appietx/appiet>). Внутри дескриптора <appiet> с помощью атрибута code 
задается имя файла Java-аплета (с расширением .class или .jarв случае, если 
аплет требует нескольких файлов). Также можно использовать другие атрибуты - 
для задания размеров окна, в котором будет выполняться аплет, а также значе- 
ний, которые вы хотите передать аплету, — например, текстового сообщения, ко- 
торое должен отображать аплет. 
Приведенные ниже дескрипторы, например, внедряют на Web-страницу аплет, 
находящийся В файле appletClassName. class! 
<applet code="appletClassName.class" height="150" width="150"> 
</applet> 
Обнаружив дескриптор <appiet>, браузер должен выгрузить аплет с сервера,— 
примерно так же, как браузер, обнаружив дескриптор <img>, должен выгрузить 
графический элемент. В данном примере браузер ожидает найти файл аплета 
appietciassName.class в той же папке, что и Web-страница, в которую внедрен! 
аплет. Атрибуты height и width дают Web-браузеру указание выделить аплету\ 
область 150 на 150 пикселей (то есть создать экран ввода-вывода Java-программы 
150 пикселей в высоту и 150 пикселей в высоту).

45 2 Глава 9. Java-аплеты и объекты ActiveX 
В качестве первоначального разработчика языка программирования Java, ком- 
пания Sun Microsystems на своем Web-сайте (http://www.java.sun.com) предла- 
гает множество простых Java-аплетов. На рис. 9.5, например, показан Java-аплет, 

с помощью которого можно вывести на Web-странице простые стрелочные часы. 
Чтобы приступить к работе с Java, для начала воспользуйтесь предлагае- 
мым Sun аплетом часов со стрелками, который можно выгрузить либо с Web- 
сайта компании Sun, либо с сайта издателя русскоязычной редакции этой 
КНИГИ, КОТОРЫЙ нахОДИТСЯ ПО адресу http://www.diasoft.kiev.ua. Выгружая 
приложение, вы на самом деле выгрузите zip-файл с именем demo.zip, кото- 
рый содержит в себе .class-файлы аплета (в данном случае Anaiogciock.class, 
CustomParser.class, JavaClock.class И ParamParser.class), В папку на своем 
Web-сайте. Выгрузив zip-файл, вы должны будете его распаковать. Распаковывая 
файл, поместите .class-файлы аплета в папку, в который вы сможете создать 
HTML-документ, который будет содержать аплет. 
Далее, создайте HTML-файл с именем FirstAppiet.html, содержащий в себе 
следующий дескриптор <appiet>, который внедряет аплет часов со стрелками в 
Web-страницу: 
<applet code="JavaClock.class" height="150" width="150"> 
</applet> 
С ПОМОЩЬЮ браузера ОТКрОЙТе фаЙЛ FirstApplet.html. 
Обнаружив дескриптор <appiet>, браузер выгрузит файл 
аплета. После трансляции обобщенного байт-кода аплета 
браузер запустит аплет на выполнение, отобразив показан- 
ные на рис. 9.5 стрелочные часы. 
Хотя аплет стрелочных часов использует четыре вышепере- 
численных .class-файла, в дескрипторе <appiet> вы указы- 
ваете ТОЛЫЮ СД« ИЗ НИХ - JavaClock. class. Когда ВЫ ВНе- LZZZ 
дряете аплет с несколькими .class-файлами, имя класса, тайный компанией 
которое нужно присвоить атрибуту code, вам подскажет до- Sun Microsystems 
кументация аплета. 
Задание месторасположения аплета на Web-странице 
Аплет, подобно графическому изображению, занимает место на вашей Web- 
странице, и месторасположение области просмотра аплета вы задаете (как и в 
случае с графическим изображением), помещая начальный и конечный дескрип- 
торы аплета (<appietx/appiet>) в HTML-код Web-страницы там, где аплет 
должен появиться на странице. Web-браузер сам позаботится о выполнении Java- 
кода, содержащегося в аплете, и отображении результатов в окне просмотра ап- 
лета. Внутри Web-страницы вы обращаетесь с аплетами так же, как и с прочими 
объектами, такими как изображения, текст, анимация и видеоклипы — то есть, в 
общем случае,1 вам необходимо только определить размер области просмотра ап- 
лета и где эта область должна находиться на вашей Web-странице. Например, 
приведенный ниже HTML-код поместит аплет часов со стрелками под текстом в 
верхней части страницы и между двумя изображениями (см. рис. 9.6).

Глава 9. Java-аплеты и объекты ActiveX 453 
т •.i?:n.-.».\ii,iHi-.i.-.i.t ' ч | р ы • • • • • • * * ' - • " • — - 
0 е Ed» Vie 
HTML & Web Design Tips & 
Techniques 
Часы находятся иа странице под этим текстом и мезеду двумя картинками. В 
данном примере месторасположение «спето определяется месторасположением 
внутри HTML-Еода Web-страницы дескрипторов, с помощью которых аплет 
вставляется » страницу, Агавт появляется после содержимого, вставленного в 
HTML-год перед дескрипторами аппета, и перед содержимым, вставленным 
после начального ыхонечного дескрипторов аппет», ; 
flto 
J 
*4 My Compute! 
Рис. 9.6. Аплет, расположенный ниже текста и между двумя изображениями на 
Web-странице 
<html> 
<body bgcolor="#ADD8E60"> 
<hlXcenter>HTML Samp; Web Design Tips Samp; Techniques</centerX/hl> 
<р>Часы находятся на странице под этим текстом и между двумя 
картинками. В данном примере месторасположение аплета определяется 
месторасположением внутри HTML-кода Web-страницы дескрипторов, с 
помощью которых аплет вставляется в страницу. Аплет появляется после 
содержимого, вставленного в HTML-код перед дескрипторами аплета, и 
перед содержимым, вставленным после начального и конечного 
дескрипторов аплета. </р> 
<img src="images/pixl_small.jpg"> 
<applet code="JavaClock.class" height="150" width="150"> 
</applet> 
<img src="images/pix2_small.jpg"> 
</body> 
</html> 
Аналогично, если вы хотите, чтобы текст обтекал аплет, как показано на рис. 
9.7, код должен быть подобен следующему: 
<html> 
<body bgcolor="#ADD8E60"> 
<hlXcenter>HTML Samp; Web Design Tips Samp; Techniques</centerX/hl> 
<hrXimg align="left" src="images/pix2_small.jpg"> 
Этот текст находится справа от первого изображения на странице. Текст 
обтекает изображение справа, поскольку атрибут align дает Web- 
брауэеру указание поместить изображение по левому краю.<пг> 
<pXapplet align="right" code="JavaClock.class" 
height="150" width="150"X/applet> 
Этот текст находится слева от второго "изображения", то есть аплета 
на Web-странице. Хотя в HTML-коде Web-страницы текст следует после 
дескрипторов аплета, он появляется перед (то есть слева от) аплета, 
поскольку атрибут align дает браузеру указание поместить аплет по 
правому краю и расположить текст в одном и том же абзаце с аплетом 
слева от него.</р> 
</body> 
</html>

454 Глава 9. Java-аплеты и объекты ActiveX 
Рис. 9.7. 
' fie .* Хв» Fjvonto I o * Help 
is 
HTML & Web Design Tips & 
Techniques 
Этот текст находится спреи а от первого изображения на 
. сгранице.ТеЕСТобтекаетюображение справа,поскольку 
(Syi aliga двет Web-браузеру указание поместить 
• изображение по пегому краю. This text appears ' 
Этот текст находится слева от второго "изображения", то 
есть шпета,на Web-странице.ХотявНТМ^коде Web- /yi u 1^4 
стрададагтекст шедует после дескрипторов шкета, он /N \ 
появляется перед (то есть слева от) аппета, поскольку • ( w Ч-. 2 \ 
атрибут аЙ§п дает браузеру указанна поместить аппет по j \ 1 
правому краю и располозкить текств одном итомже 1 *^~~^^^ ( 
абзаце с вгшетом слеваотнего. \ j 4 1 
jB] Done Щ, My Compute' 
Web-страница с изображением, выровненным полевому краю, 
и аплетом, выровненным по правому краю 
Внутри Web-страницы можно использовать атрибут align, чтобы указать Web- 
браузеру, где поместить текст относительно и изображения, и аплета. В данном 
примере, aiign=Mieft" в дескрипторе <img> дает браузеру указание поместить 
изображение по левому краю страницы и расположить текст справа от картинки. 
Аналогично, aiign=Mright" в дескрипторе <appiet> дает браузеру указание помес- 
тить аплет по правому краю и расположить текст слева от области просмотра 
аплета. 
Когда необходимо, чтобы аплет - то есть его область просмотра — появлялся 
в определенном месте на Web-странице, вы можете воспользоваться HTML-таб- 
лицей (как это было в практикумах главы 2) или правилами каскадного списка 
стилей (вы проходили это в практикумах главы 4). Например, чтобы располо- 
жить аплет по центру Web-страницы между двумя колонками текста, как показа- 
но на рис. 9.8, можно воспользоваться таблицей с границами нулевой ширины 
(то есть скрытыми), как показано ниже: 
<html> 
<body> 
<hlXcenter>HTML &amp; Web Design Tips &amp; Techniques</centerX/hl> 
<hr> 
<center> 
<table border="0"> 
<trXtd width=M150M> 
Текст в первом столбце таблицы появляется слева от amieTa</td> 
<td width="150"> 
<applet code="JavaClock.class" 
width="150" height ="150"X/appletX/td> 
<td width="150"> 
Текст в третьем (слева) столбце таблицы появляется справа от 
аплета, потому что сам аплет находится во втором столбце, 
который является центральным столбцом таблицы с тремя 
столбцами.</td>

Глава 9. Java-аплеты и объекты ActiveX 455 
</tr> 
</table> 
</center> 
</body> 
</html> 
Не Edit Vie« Favortes Tools Help : 
HTML & Web Design Tips & 
Techniques 
js^~~~~~~~^ Текст» третьем (слева) ' 
' l i l л. столбце таблицы 
/m з\ полыиетсл справа от 
Текствпервом столбце / ^>-*"*^ атаета, потому что сам • 
таблицы появляется слева Е Р ч^- 3 j аплетнаяодатсявогто^ом 
отагшетв -• \ ^N_ J столбце, который является 
\8 / цещрвпьным столбцом 
\. I 5 / таблицы с тремя 
^"^^___^-^ столбцами. 
_J 
^J Done ! j l% My Computer .; 
Рис. 9.8. Web-страница с аплетом, расположенным между колонками текста с 
помощью таблицы 
Проще говоря, обращаться с Java-аплетом вы будете так же, как и с изображе- 
нием, вставляемым в Web-страницу. Как и в случае с изображением, выберите, 
где должна будет находиться прямоугольная зона просмотра аплета, а затем 
вставьте начальный и конечный дескрипторы аплета (<appietx/applet>) в 
HTML-код Web-страницы рядом с прочими объектами или внутри ячейки табли- 
цы, чтобы расположить объект в конкретном месте на странице. 
Передача параметров аплету 
В Web можно найти десятки сайтов с сотнями аплетов, которые вы можете 
использовать на собственных Web-страницах. Некоторые аплеты сопровождаются 
исходным кодом, который можно модифицировать и затем компилировать, дабы 
тем самым персонализировать аплет в соответствии со своими потребностями. 
Однако большинство аплетов позволяют задать начальные значения, называемые 
параметрами {parameters), с помощью которых можно изменить внешний вид и 
выходные данные аплета, не утруждая себя вообще никаким кодированием. 
При выгрузке аплета из Web документация, которую программист предостав- 
ляет вместе с аплетом, должна сообщить вам имя и назначение каждого пара- 
метра, принимаемого аплетом. Чтобы передать аплету значения, вам нужно про- 
сто вставить между начальным и конечным дескрипторами аплета (<appiet> 
</appiet>) дескриптор <param> с именем и значением каждого из параметров, 
которые вы хотите передать: 
<applet code="имя_аллета.class" 
width="ширина_ в__пикселях" height="выеот а__в__лик селях" > 
<param name=" имя__параметра_1" value=M значение_параметра_1"> 
<рагатпате=" имя_параметра__2" value="значение__параметра__2"> 
<рагат пате=" имя_параметра__3" value=" зяачение_параметра_3"> 
</applet>

4 5 6 Глава 9. Java-аплеты и объекты ActiveX 
Чтобы вам было проще понять, как передача значений параметров Java-аплету 
позволяет "персонализировать" обработку, выполняемую аплетом, рассмотрим 
предлагаемый Sun Microsystems аплет NervousText. class, который реализует 
анимацию букв в строке текста, "нервно дергая" их, как показано ниже. Аплет 
NervousText (см. рис. 9.9) можно выгрузить из Web-сайта компании Sun либо 
из сайта издательства русскоязычной редакции этой книги, который находится 
ПО адресу http://www.diasoft.kiev.ua. 
Рис. 9.9. Java-аплет NervousText.class 
Выгрузив и распаковав аплет NervousText, вы можете внедрить его в HTML- 
страницу с помощью следующего дескриптора <appiet>: 
<applet code="NervousText.class" 
width="468" height="50 "X/applet> 
Хотя текст, отображаемый аплетом NervousText, дает интересный анимацион- 
ный эффект, вы наверняка захотите изменить этот текст, прежде чем использо- 
вать аплет для отображения "дергающегося" текста на своих Web-страницах. Без 
параметров вам пришлось бы выгружать исходный Java-файл аплета 
(NervousText. java), редактировать строку текста, анимацию которой выполняет 
аплет (то есть "Hot Java"), а затем компилировать программу в новый . class- 
файл, который затем и будет размещаться на Web-странице. К счастью, аплет 
NervousText позволяет использовать для передачи строки для анимации пара- 
метр, так что вам не придется ничего программировать, чтобы изменить текст, 
отображаемый аплетом. 
Ч т о б ы а п л е т N e r v o u s T e x t . c l a s s ВЫПОЛНИЛ анИМаЦИЮ СТрОКИ 
" I ' m nervous 
until i have my Java.", при внедрении аплета в Web-страницу нужно ука- 
зать И дескриптор <param>: 
<applet codebase="/java" code="NervousText.class" 
width="510" height="50"> 
<param name="text" value="I'm nervous until I have my Java. "> 
</applet> 
После того, как вы загрузите HTML-файл, содержащий задающий параметр 
дескриптор <param>, в свой браузер, аплет будет использовать текст параметра, 
как показано на рис. 9.10. 
Рис. 9.10. Java-аплет NervousText.classс новым текстом, переданным ему в 
параметре 
Если передаваемое вами значение параметра изменяет объем пространства, 
необходимого аплету для отображения своих выходных данных, вы должны соот- 
ветствующим образом увеличить значения атрибутов width и height дескрипто- 
ра <appiet>. В данном примере увеличение длины анимированного текста тре- 
бует увеличения ширины области, отведенной под аплет на Web-странице. Если

Глава 9. Java-аплеты и объекты ActiveX . 4 5 7 
размер заданной вами (с помощью атрибутов width и height дескриптора 
<appiet>) области слишком мал, браузер просто отсечет ту часть выходных дан- 
ных аплета, которая не помещается в область. (Если в документации по аплету 
не указаны размеры его области вывода или если вы передаете значение пара- 
метра, изменяющее выходные данные аплета, вам может понадобиться провести 
несколько экспериментов с различными значениями атрибутов width и height, 
пока вы не найдете удобоваримые размеры.) 
Понятие файлов Java-архивов (.jar) 
Одно из критических замечаний в адрес Java-аплетов связано со временем, 
необходимым Web-браузеру на выгрузку файлов, входящих в состав того или ино- 
го аплета. Каждый раз, когда браузер извлекает Web-страницу с внедренным ап- 
летом, браузер должен извлекать аплет, как и графические изображения, звукб- 
вые файлы и прочие внедренные объекты. Большим и более сложным аплетам 
зачастую требуется несколько файлов классов, каждый из которых браузер дол- 
жен выгрузить, прежде чем он сможет запустить аплет. 
Чтобы уменьшить время, затрачиваемое на загрузку, программисты на Java ча- 
сто сохраняют файлы аплета (файлы классов, графические файлы, звуковые фай- 
лы и т.д.) в файле Java-архива (или .jar). Файл .jar можно представить себе 
как нечто подобное сжатому zip-файлу. Сохраняя файлы аплета в одном .jar- 
файле, программист уменьшает время, необходимое Web-браузеру на то, чтобы 
выгрузить аплет с Web-сервера. 
Чтобы использовать при внедрении объекта .jar-файл, необходимо добавить 
в дескриптор <appiet> атрибут archive, как показано ниже: 
<applet code="JavaClock.class" width="150" height="150" 
archive—1Clock,jar"> 
• </applet> 
В данном случае, обнаружив дескриптор <appiet>, браузер установит HTTP- 
соединение с сервером и запросит файл Java-архива с именем clock,jar. Если 
файла архива не существует, большинство браузеров предпримут попытку извлечь 
вместо него отдельные .class-файлы аплета. Обратите внимание, что имя файла 
архива не обязательно должно совпадать с именем .class-файла аплета. 
Атрибут codeba 
Если вы храните свои .class-файлы в папке, отличной от той, в которой 
хранятся HTML-документы, вы должны указывать в дескрипторе <appiet> атри- 
бут codebase, чтобы сообщить Web-браузеру, где найти .class-файл, заданный 
атрибутом code. Предположим, например, вы храните свои файлы Web-страниц 
в папке HTDOCS Web-сайта, а .class-файлы — в папке с именем classes. Если 
обе папки находятся в корневой папке Web-сайта, для внедрения аплета 
JavaClock. class Вам понадобится СЛедуЮЩИЙ атрибут codebase В Дескрипторе 
<applet>: 
<applet codebase="/Classes" code="JavaClock.class" 
width="150" height="150"> 
</applet>

4 5 8 Глава 9. Java-аплеты и объекты ActiveX 
С помощью атрибута codebase можно также дать браузеру указание внедрить 
в Web-страницу Java-аплет, находящийся на другом Web-сайте. Чтобы внедрить 
удаленный аплет, просто укажите в атрибуте codebase полный URL-адрес папки, 
содержащей .class-файлы аплета. Например, чтобы внедрить в свою Web-стра- 
ницу аплет стрелочных часов, находящийся в папке classes на сайте 
www.NVBizNet.com, следует воспользоваться приведенным ниже атрибутом 
codebase: 
<applet codebase="http://www.nvbiz 
code="JavaClock.class" width="150" height="150"> 
</applet> 
Будьте осторожны, внедряя аплеты, находящиеся на других Web-сайтах. 
Помните, что Web-браузер должен выгрузить все . class-файлы аплета после 
извлечения 
страницы с внедренным аплетом. Если кто-нибудь удалит .class-файлы или 
переместит их в 
другую папку, Web-браузер не сможет извлечь их и, следовательно, не сможет 
отобразить 
аплет на вашей Web-странице. За исключением случаев, когда содержимое на 
удаленном 
сайте вами контролируется, выгрузите .class-файлы аплета в папку на своем 
Web-сайте, 
чтобы аплет был доступен всегда, когда он понадобится. 
Внедрение в Web-страницу объекта ActiveX 
Как и Java-аплет, объект ActiveX предоставляет программный код, который 
Web-браузер должен выполнять как составляющую содержимого вашей Web-стра- 
ницы. Чтобы внедрить в Web-страницу объект ActiveX, вставьте объект так же, 
как вы бы вставили аплет, только вместо дескриптора <appiet> для помещения 
на страницу объекта ActiveX воспользуйтесь начальным и конечным дескрипто- 
рами Объекта (<objectX/object>). 
Предположим, например, вы хотите отобразить на своей странице биржевую 
сводку с финансового Web-сайта Microsoft Network (MSN), который находится по 
адресу http://moneycentrai.msn.com. Для этого вам потребуется вставить в 
HTML-код своей Web-страницы, — в то место, где на Web-странице должна по- 
явиться показанная на рис. 9.11 биржевая сводка, — следующий код: 
<object id="StockTickerM width="100%" height="34" 
type="application/x-oleobject" 
classid=Mclsid:52ADE2 93-85E8-HD2-BB22-00104B0EA2 81" 
codebase="http://fdl.msn.com/public/investor/v7 
/ticker.cab#version=7,1999,1104,1"> 
<param name="ServerRoot" value="http://moneycentral.msn.com" /> 
<param name="NewsTargetM value="_newstop" /> 
<param name="BackgroundColor" valtie=n0x00ADD8E6" /> 
<! -- Следующий дескриптор <embed> позволяет запускать элемент 
управления ActiveX в браузере Netscape Navigator б (и выше) --> 
<embed type="application/x-eskeractivex" id="StockTicker" 
clsid="52ADE2 93-85E8-HD2-BB22-00104B0EA2 81" 
codebase="http://fdl.msn.com/public/investor/v7 
/ticker.cab#version=7,1999,1104,1м 
width="100%" height="34" 
serverroot="http://moneycentral.msn.com"

Глава 9. Java-аплеты и объекты ActiveX 45 9 
BackgroundColor="0x00ADD8E6" 
newstarget="_newstop" value="0x00ADD8E6" /> 
</object> 
'custom") inutt"' "'lied bv Standard t Pool's Coms>ock and delated at feast 20 
minutes 
Щр: investor •—:•-} ; <••••;'•• ' ' . . ,r 
щт^ * I * l_J_j -* Green group pirn praweslieis in serf o>/« wwF name 
Рис. 9.11. Биржевая сводка из http://moneycentral.msn.com 
Просмотрев содержимое дескриптора <object>, вы обнаружите некоторые 
сходные черты с дескриптором <appiet>. Атрибуты в дескрипторе <object> име- 
ют следующее назначение: 
• id. Уникальное имя, которое вы присваиваете объекту, чтобы другие объекты 
на той же Web-странице могли взаимодействовать с объектом, и чтобы вы 
могли работать с объектом (по имени) в сценариях, вставленных в страницу. 
• width, height. Начальные размеры объекта в пикселях. Имейте в виду, 
что объект ActiveX может изменять размер (и месторасположение) своей 
области просмотра. Хотя биржевая сводка в данном примере и Shockwave- 
анимация Macromedia (которую вы будете внедрять в следующем примере) 
сохраняют заданные размеры, всплывающее меню ActiveX, например, будет 
сначала иметь размеры стандартной кнопки, однако увеличится до разме- 
ров, необходимых для отображения всех пунктов меню. 
• type. Необязательный атрибут, идентифицирующий тип внедряемого со- 
держимого. 
• classid. Атрибут, идентифицирующий реализацию объекта: то есть, имя 
исполняемой программы, которую вы хотите выполнить. Длинная строка 
цифр и букв, присвоенная атрибуту classid - это 128-битовое значение, 
называемое глобально уникальным идентификатором (globally unique 
identifier - GUID). Программист, написавший приложение ActiveX, с по- 
мощью специального программного средства (GUIDGEN.EXE) создает уни- 
кальный GUID — что значит, что никакие две программы не могут иметь 
одинаковые GUID-ндентификаторы. 
• codebase. Атрибут, задающий местонахождение, откуда браузер сможет 
(если понадобится) выгрузить программу, заданную атрибутом classid. 
(Если браузер ранее выгрузил и установил объект ActiveX, он будет ис- 
пользовать локальную копию вместо того, чтобы загружать программу за- 
ново.) Если вы опустите атрибут codebase, браузер будет искать реализа- 
цию (то есть объект ActiveX) в той же папке, что и документ, в который 
вы внедрили объект. В данном примере атрибут codebase сообщает брау- 
зеру, что реализация находится внутри . cab-файла. (Программисты поме- 
щают программу, требующую для установки более одного файла, в . cab- 
файл,- так же, как разработчики на Java используют .jar-файлы.) 
• param. Значения, которые должны быть переданы программе ActiveX во 
время выполнения. Обычно параметры содержат настроечную информацию 
и начальные значения переменных программы.

460 Глава • Java-аплеты и объекты ActiveX 
Хотя значения атрибутов classid и codebase кажутся неподдающимися рас- 
шифровке, пусть вас не волнует то, как эти значения генерируются. Програм- 
мист, написавший программу ActiveX или документацию на программу, выгру- 
женную вами из Internet, снабдит вас обоими этими значениями. Ваша же 
главная задача как дизайнера — решить, что должен делать объект ActiveX и где 
он должен находиться на вашей Web-странице. Программисты напишут и ском- 
пилируют программу и сохранят код (то есть реализацию) в папке на Web-серве- 
ре. Почитав документацию (или спросив у программиста), вы просто "вставите" 
предоставленные вам значения атрибутов classid и codebase. 
Как сделать, чтобы объекты ActiveX работали и с Netscape 
Navigator, и с Internet Explorer 
К сожалению, две компании, браузерами которых, по всей вероятности, будут 
пользоваться 95% посетителей вашего сайта, не смогли достичь согласия в воп- 
росе "наилучшего" способа внедрения внешних программ в Web-страницы. В то 
время как в Internet Explorer для повышения функциональных возможностей бра- 
узера используются дескрипторы <object> и объекты ActiveX, в Netscape 
Navigator применяются дескрипторы <embed> и подключаемые модули (которые 
представляют собой внешние вспомогательные программы). 
Результатом — то есть тем, что как раз и заботит вас как дизайнера — стало 
то, что Netscape Navigator не будет запускать объект ActiveX, пока вы не 
устано- 
вите специфический подключаемый модуль. Кроме того, Netscape Navigator тре- 
бует использования для внедрения программы, которую должен выполнить брау- 
зер, дескриптора <object>, а не дескриптора <embed>. Кгсчастью, вы можете 
ВСТавИТЬ Начальный И КОНечНЫЙ десКрИПТОрЫ внедрения (<embedX/embed>) 
внутри начального и конечного дескрипторов объекта (<objectx/object>), и 
каждый из браузеров будет игнорировать дескриптор, предназначенный для дру- 
гого браузера. Подключаемые модули, которые вы должны загрузить и устано- 
вить, будут разными в зависимости от вашей версии Netscape Navigator. 
Подключаемые модули, снабжающие Netscape Navigator поддержкой ActiveX, 
можно найти на нескольких Web-сайтах. В первую очередь стоит посетить 
http://esker.com, откуда вы сможете выгрузить подключаемый модуль, поддер- 
живающий широкий диапазон объектов ActiveX. Кроме того, найти ссылки на 
другие подключаемые модули и пояснения действий, которые вам необходимо 
будет предпринять для установки в зависимости от вашей конкретной версии 
NetScape, МОЖНО на http://mozilla.org. 
Например, для воспроизведения Shockwave-анимации (ants.swf), хранящейся 
в той же папке, что и ваша Web-страница, вы могли бы вставить в страницу — 
там, где должна появиться анимация — следующие строки: 
<object 
classid="clsid:D27CDB6E-AE6D-llcf-96B8-444553540000" 
codebase="http://download.macromedia.com/pub/Shockwave/cabs 
/flash/swflash.cab#version=5,0,30,0" 
width="200" height="200"> 
<param name="movie" value="ants.swf" />

Глава 9. Java-аплеты и объекты ActiveX 
<param name="quality" value="high" /> 
<param name="salign" value="TL" /> 
<embed 
src="ants.swf" quality="high" 
pluginspage="http://www.macromedia.com/Shockwave/download 
/index.cgi?Pl_Prod__Version=ShockwaveFlash" 
type="application/x-shockwave-flash" width="200" 
height="200" salign="TLM /> 
<noembed>Il3BMHMTe, ваш браузер не поддерживает объекты ActiveX и 
подключаемые модули. </поешЬе61> 
</object> 
Обнаружив приведенный выше код, браузер Internet Explorer для выполнения 
Shockwave-анимации (и, если необходимо, выгрузки проигрывателя Shockwave) 
будет использовать атрибуты и параметры, найденные до дескриптора <embed>. 
Браузер Netscape Navigator, с другой стороны, проигнорирует HTML-код до деск- 
риптора <embed> и будет использовать для воспроизведения анимации (и, если 
необходимо, выгрузки подключаемого модуля) код, находящийся между началь- 
ным И KOfettM ДОфИПЩиМИ Внедрения (<embedX/embed>). 
Понятие подписанных объектов 
Поскольку объекты ActiveX могут быть небезопасными, следует выгружать и 
устанавливать объекты ActiveX, полученные только от тех программистов и ком- 
паний, которым вы доверяете. Зачастую программисты, которые разрабатывают 
заслуживающие доверия объекты ActiveX, снабжают их цифровыми подписями, 
проверив которые, пользователи, выгружающие объекты, могут удостовериться в 
подлинности лица или компании, заявляющих, что они разработали данный 
объект (то есть в том, что они являются теми, за кого себя выдают). Кроме того, 

если объект ActiveX содержит действительный сертификат, пользователи могут 
быть уверенными в том, что какой-либо хакер не перехватил и не изменил 
объект в процессе передачи его по Internet. В Windows, например, многие 
пользователи поручают своим браузерам устанавливать и использовать подписан- 
ные объекты автоматически, не спрашивая у пользователя разрешения на уста- 
новку таких объектов. Если же в соответствии с уровнем безопасности, установ- 
ленным на компьютере, браузер, прежде чем загружать и устанавливать объект 
ActiveX, должен запрашивать пользователя, то, когда дескриптор <embed> потре- 
бует объекта ActiveX, еще не установленного на компьютере, браузер выведет ди- 
алоговое окно Security Warning (Предупреждение о безопасности), аналогичное по- 

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

462 Глава 9. Java-аплеты и объекты ActiveX 
Berami I Detab | Certification 
Certificate Inc 
1 his certificate i» iniended to: 
•Ensum software cafne !к*гг; software pufetehtt 
" Reie lo ihe cethlvate issue's s'a!«nen! ioi 
Issued tt> Mtciosoft COI 
Issued by: ч •» ^ 1* » * -J j 
Vislidftom 5/9/9? e« 6ЛО/Зв 
Рис. 9.12. Просмотр подробностей о сертификате объекта 
Чтобы предоставить пользователям максимум возможностей в области конт- 
роля за безопасностью, Windows присваивает элементам управления ActiveX два 
уровня безопасности: безопасный для инициализации (safe to initialize) и 
безопасный 
для написания сценариев (safefor scripting). Указывая, что элемент управления 
бе- 
зопасен для инициализации, программист заявляет, что элемент управления не 
будет вести себя некорректно (что значит, что объект будет работать правильно, 
и сценарий не может привести к отказу кода или выполнению кодом злоумыш- 
ленной операции), вне зависимости от начальных значений, которые могут быть 
присвоены пользователем элементу управления с помощью дескрипторов 
<param>. Если Internet Explorer обнаруживает внутри HTML-страницы элемент 
управления ActiveX, не являющийся безопасным для инициализации, и если 
ДеСКрИПТОр <object> СОДерЖИТ ОДИН ИЛИ неСКОЛЬКО дескрипторов <param> ДЛЯ 
инициализации объекта, Internet Explorer может, в зависимости от установлен- 
ных параметров безопасности, отобразить диалоговое окно, предупреждающее 
вас о потенциальном нарушении безопасности. 
Когда же программист помечает объект управления ActiveX как безопасный 
для сценариев, программист заявляет, что элемент управления будет вести себя 
надлежащим образом, вне зависимости от того, как сценарий будет манипулиро- 
вать элементом управления. Опять-таки, обнаружив внутри HTML-страницы эле- 
мент управления ActiveX, не помеченный как безопасный для сценариев, Internet 
Explorer может, в зависимости от установленных параметров безопасности, ото- 
бразить диалоговое окно с предупреждением о потенциальном нарушении безо- 
пасности.

Глава 9. Java-аплеты и объекты ActiveX 463 
Настройка параметров безопасности Java и ActiveX 
Чтобы не допустить загрузки вашим браузером Java-аплетов и объектов 
ActiveX без вашего ведома и разрешения, Windows позволяет установить парамет- 
ры, диктующие, как браузер должен обращаться с аплетами и объектами. С по- 
мощью параметров безопасности, например, можно дать браузеру указание выг- 
ружать и устанавливать подписанные объекты автоматически, но запрашивать 
вас, прежде чем выгружать неподписанные объекты. Чтобы воспользоваться пара- 
метрами безопасности Windows для контроля за Java-аплетами и объектами 
ActiveX, выполните следующее действия: 
1. Выберите опцию Settings (Настройка) в меню Start (Пуск) и затем Control 
Panel (Панель управления). Windows откроет окно панели управления. 
2. В панели управления сделайте двойной щелчок на пиктограмме Internet 
Options (Свойства обозревателя). Windows выведет на экран диалоговое 
окно Internet Properties (Свойства: Интернет). 
3. В диалоговом окне Internet Properties перейдите на вкладку Security (Безо- 
пасность). Windows отобразит окно Security (Безопасность). 
4. В окне Security щелкните на кнопке Custom Level (Другой...). Windows выве- 
дет на экран диалоговое окно Security Settings (Правила безопасности), по- 
казанное на рис. 9.13. 
5. В диалоговом окне Security Settings с помощью переключателей установите 
требуемые уровни безопасности и щелкните на кнопке ОК, чтобы вернуть- 
ся в диалоговое окно Internet Options. Затем щелкните на кнопке ОК в диа- 
логовом окне Internet Options, чтобы закрыть диалоговое окно. 
Открыть диалоговое окно Internet Options (Свойства обозревателя) можно 
и находясь в самом браузере Internet Explorer, выбрав в меню Tools (Сервис) 
пункт Internet 
Options (Свойства обозревателя). 
^•Праоила безопасности ИЕЛЩ^И 
. : йастрайка: • • • . • _ 
_jj] Элементы ActiveX И модули подключении •*•J 
чЙ Выполнять сценарии элементов ActiveX помеченных к . . • . 
О Отключить 
О Предлагать 
© Разрешит 
[Й Загрузке неп 
© Отключит 
О Преплагв 
О Разрешит 
Щ Загрузкепос 
О Отключит 
© Предлеге 
О Разрешит 
[у] Запуск элеме
одлисанных элементов ActiveX 
гь 
писанных элементов ActiveX 
: J HTOBActiveXn модулей подключения :, 
О Погашенных вдминистоатооом .ZJ 
< l ••• I И 
• Восстановить прежние прввипа 
неурсщень: |Средний _•] Восстановить I 
j . 1 Отнена J 
Рис. 9.13. Настройка безопасности Java и ActiveX в диалоговом окне правил 
безопасности

464 Глава 9. Java-аплеты и объекты ActiveX 
Создание всплывающего навигационного меню 
с помощью аплета 
По мере увеличения количества Web-страниц на вашем сайте необходимо уве- 
личивать и число пунктов в навигационном меню. Как-никак, вы хотите дать 
посетителям возможность "перескакивать" на те или иные страницы, не застав- 
ляя их сперва пролистывать несколько других страниц. К сожалению, увеличение 
количества гипертекстовых ссылок на вашем навигационном меню означает так- 
же увеличение размеров меню, из-за чего часто приходится разбивать содержи- 
мое на две страницы. PopupNavigator. c l a s s — аплет, написанный Бранко 
Димитриевичем (Branco Dimitrijevic) — это решение, позволяющее представить 
навигационную панель в виде иерархического меню. Чтобы сэкономить про- 
странство, аплет появляется на экране в виде кнопки, которая по щелчку на ней 
выводит на экран меню, "всплывающее" над содержимым Web-страницы, как 
можно видеть на рис. 9.14. 
HTML & Web Design Tips & 
Techniques 
Всплывающее навигационное меню 
f ' 'HTML & i-Vafi Design \ 
<patara name="Label" value=nifit1L ь Я Anim 
<paran name="Image" value="down arr 'ABrfn 
<рагеи narae^IraageFosition" valuer" Mew 
:. 9.14. Аплет PopupNavigator после щелчка на нем кнопкой мыши 
Когда пользователь щелкает на кнопке, браузер запускает аплет, который вы- 
водит на экран всплывающее меню. Внутри меню пользователь просто щелкает 
на выбранном пункте. Аплет затем извлекает и отображает HTML-документ, свя- 
/ занный с пунктом, который выбрал посетитель. Web-страница, соответствующая 
пункту меню, может находиться на текущем Web-сайте или же на другом сайте. 
Если посетитель наводит курсор мыши на пункт меню со стрелкой вправо (как 
пункт Аплеты на рис. 9.14), аплет отобразит подменю, состоящее из дополни- 
тельных пунктов. 
ПРАКТИКУМ 
Выгрузить аплет PopupNavigator. class вместе с его исходным кодом можно из 
сайта издателя русскоязычной редакции этой книги. Скопировав архив 
PopupNavigator.zip в папку на своем компьютере, извлеките из него файлы

Глава 9. Java-аплеты и объекты ActiveX 4 6 5 
.class (Java-аплет), .gif (изображение) и .jar (Java-архив). Чтобы использовать 

всплывающее навигационное меню на своей Web-странице, скопируйте все фай- 
лы .gif и либо файл .jar, либо все файлы .class в туже папку, где находится 
Web-страница. Затем вставьте приведенные ниже строки в код страницы, туда, 
где должна будет находиться кнопка всплывающего меню: 
<applet align="center" width="210" height="24" 
code="PopupNavigator/PopupNavigatorApplet.class" 
archive="PopupNavigator.jar"> 
<param name="Label" 
value="HTML & Web Design;Arial;BOLDITALIC;16;RED;200 255 0"> 
<param name="Image" value="down_arrowl .gif "> 
<param name="ImagePosition" value="LEFT;4"> 
<param name="0" value="NVBizNet;http://www.NVBizNet.com"> 
<param name="l" value="Рисунки;ListOfFigures .htm"> 
<param name="2" уа1ие="Аплеты; "> 
<param name="2;0" value="JavaClock;Chpt09Tipl.htm"> 
<param name="2;l" value=" PopupNavigator;ChptO9Tip2.htm"> 
"™ PopupNavigator .j a r - это файл Java-архива, содержащий все . c l a s s - 
файлы аплета в сжатом формате. Для снижения продолжительности загрузки следует 
пользоваться .jar-файлом, если таковой доступен. Аплет будет функционировать 
одинако- 
во вне зависимости оттого, используются .class-файлы или .jar-файл. Для 
подключения 
.jar-файла необходимо добавить в дескриптор < a p p l e t > атрибут archive и 
указать в нем 
имя файла Java-архива. При отсутствии атрибута a r c h i v e начальный 
дескриптор 
<a p p l e t> дает Web-браузеру указание загружать .class-файлы аплета. 
Параметры, используемые для настройки всплывающего меню, описаны 
ниже. 
• label. Разделенная точками с запятыми (;) строка с надписью, которая 
будет помещена на кнопку, и описанием того, как должны выглядеть над- 
пись и сама кнопка. Синтаксис строки значений надписи выглядит так: 
"<надпись>;<шрифт>;<стиль шрифта>;<размер шрифта>;<цвет текста 
надписихцвет кнопки>". Если вы вовсе опустите параметр надписи, ап- 
лет выведет в качестве текста надписи кнопки слово "Navigate". Вы также 
можете использовать значения, установленные в браузере по умолчанию, 
ДЛЯ <шрифта>, <стиля шрифта> И <размера>, ОПУСТИВ ЭТИ Значения ИЗ 
строки значений. Задавая цвет кнопки или текста подписи, используйте 
либо название цвета Netscape Navigator, либо выражайте цвет в виде трип- 
лета десятичных чисел (с пробелами между числами), соответствующих 
RGB-составляющим цвета. Если вы опустите <цвет текста подписи> 
или <цвет кнопки>, аплет выведет черный текст на серой кнопке. 
• image. Имя пути (URL-адрес) изображения, которое должно выводиться 
на кнопке. Если вы хотите, чтобы на кнопке была только текстовая над- 
пись, опустите параметр image. Например, приведенный выше код поме- 
щает на кнопку подпись "HTML & web Design" путем установки значения 
параметра label равным: 
"HTML & Web Design;Arial;BOLDITALIC;16;RED;200 255 0"

4 66 Глава 9. Java-аплеты и объекты ActiveX 
• imageposition. Месторасположение изображения (заданного параметром 
image) относительно краев кнопки. К возможным значениям относятся: 
CENTER Отцентрировать изображение на кнопке. 
- LEFT, RIGHT, TOP, BOTTOM Расположить изображение относительно середи- 
ны левого, правого, верхнего или нижнего края кнопки. Например, 
vaiue="LEFT;4M дает аплету указание расположить изображение на рассто- 
янии 4 пикселей (по направлению к центру кнопки) от левого края кноп- 
ки. 
- ABSOLUTE Расположить изображение в определенной точке координат 
И у) внутри кнопки. Например, vaiue="ABSOLUTE;24,16м дает аплету 
указание расположить изображение в точке координат 24 (х), 16 (у) от- 
носительно верхнего левого угла кнопки. 
• <пункт менк». Дескриптор <param> для каждого пункта меню имеет атри- 
бут name, состоящий из разделенного точками с запятыми (;) набора це- 
лочисленных координат. Атрибут value дескриптора параметра состоит из 
текста пункта, после которого ставится точка с запятой и затем URL-адрес 
Web-страницы, которую аплет должен вывести, когда посетитель выберет 
данный пункт меню. 
ПРАКТИКУМ 
Хотя меню в примере в начале данного практикума имеет только два уровня, мож- 
но создать иерархическое меню, содержащее сколько угодно подменю - что зна- 
чит, что подменю могут иметь подменю, которые, в свою очередь, могут иметь 
подменю, и так далее. Например, чтобы добавить два уровня подменю к пункту 
Рисунки из предыдущего примера, необходимо изменить объявления параметров 
следующим образом: 
<param name="0" value="NVBizNet;http://www.NVBizNet.com"> 
<param name="i" уа1ие="Рисунки;"> 
<param name="2" уа1ие="Аплеты; "> 
<param name="1;0" 
<param name="l;l" value="Глава 2;"> 
<param name="l;0;0" value="Глава 1;Рисунок 1;Figl-l .htm"> 
<param name="l;0;l" value="Глава 1;Рисунок 2;Figl-2.htm"> 
<param name="l;l;0" value=MГлава 2;Рисунок l;Fig2-l.htm"> 
<param name="l;l ; l " value="Глава 2;Рисунок 2;Fig2-2.htm"> 
<param name=M2;0" value="JavaClock;Chpt09Tipl.htm"> 
<param name="2;l" value=" PopupNavigator;ChptO9Tip2.htm"> 
Обратите внимание, что пункты меню, которые, будучи выбранными, раскры- 
вают подменю (например, "Рисунки" и "Аплеты"), имеют только текст меню и 
не имеют URL-адреса. И наоборот, пункты меню, не имеющие подменю (такие 
как "NVBizNet", "Глава 1; Рисунок 1", "Глава 2; Рисунок 2") имеют и текст, 
кото- 
рый браузер должен вывести как пункт (под)меню, и URL-адрес Web-страницы, 
извлечь которую аплет должен поручить браузеру.

Глава 9. Java-аплеты и объекты ActiveX . 46 7 
Анимация строки текста с помощью аплета 
Если вы хотите привлечь внимание посетителя к баннеру или абзацу текста — 
выполните их анимацию. Поскольку символы в строке обычно остаются неиз- 
менными, анимированный текст (то есть текст, который изменяется) привлекает 
внимание: Один из способов реализовать анимацию текста - это создать бегу- 
щую строку, чтобы текст "перебегал" через экран. Другой способ — воспользо- 
ваться таким аплетом, как AnimText.class, который непрерывно изменяет раз- 
мер каждого из символов в неподвижной строке. 
ПРАКТИКУМ 
Аплет AnimText.class вместе с исходным кодом доступен на сайте издателя 
русскоязычной редакции этой книги. Скопировав архив AnimText.zip в папку 
на своем компьютере, извлеките из него AnimText.class. Чтобы использовать 
аплет на своей Web-странице, скопируйте .class-файл аплета (AnimText.class) в 
ту же папку, где находится Web-страница. Затем вставьте показанные ниже строки 
в 
HTML-код страницы, туда, где должен находиться анимированный текст: 
<applet code="AnimText.class" width="575" height="65"> 
<param name="text" value="HTML & Web Design "> 
<param name="font" value="Time sNewRoman"> 
<param name="style" value="PLAIN"> 
<param name= " f gcolor " value= "blue"> 
<param name="bgcolor"value="255:255:255"> 
<param name="type" value="wave"> 
<param name="min" value="14"> 
<param name="max" value="48"> 
<param name="align" value="center"> 
</applet> 
Для определения текста, его внешнего вида и анимационного эффекта служат 
следующие параметры, которые можно передать аплету: 
• text. Строка текста, анимацию которой требуется выполнить. По умолча- 
нию — "Welcome to Java!" ("Добро пожаловать в Java!"). 
• font. Шрифт, который должен использовать аплет. По умолчанию — 
"TimesRoman". 
• style. Стиль шрифта: обычный (plain), полужирный (bold) или курсив 
(italic). По умолчанию -"plain". 
• f gcolor. Цвет текста, выраженный в виде слова либо в форме строки из 
трех разделенных двоеточиями (:) RGB-значений (см. задание параметра 
bgcolor в приведенном выше коде). Возможные словесные значения цве- 
тов — red (краСНЫЙ), blue (СИНИЙ), green (зеленый), yellow (жеЛТЫЙ), 
white (белый), orange (оранжевый), cyan (голубой), magenta (пурпурный) 
И black (черный). По умОЛЧаНИЮ — "black". 
• bgcolor. Фоновый цвет аплета, выраженный либо как слово (см. задание па- 
раметра fgcoior в приведенном выше коде), либо как строка из трех разде- 
ленных двоеточиями (:) RGB-значений. Возможные словесные значения цве- 
тов — те же, что и для fgcoior. По умолчанию — "lightgray" (светлосерый).

46 8 Глава 9. Java-аплеты и объекты ActiveX 
• type. Определяет, будет аплет увеличивать или уменьшать размер всех 
символов в строке текста вместе — blink (мерцание) или независимо — 
wave (волна). Кроме мерцания и волны, вы можете установить атрибут 
type равным random (случайный) и предоставить выбор эффекта (из двух), 
используемого при анимации текста, компьютеру посетителя. По умолча- 
нию — "wave" (волна). 
• max. Максимальный размер символа в пунктах. По умолчанию — "28". 
• min. Минимальный размер символа в пунктах. По умолчанию — "8". 
• align. Можно выровнять текст по левому краю, по правому краю или отцен- 
трировать между краями аплета. По умолчанию — "center" (по центру). 
Если вы хотите использовать анимированный текст в качестве гиперссылки, 
просто поместите аплет (как изображение-гиперссылку) между начальным и ко- 
нечным дескрипторами привязки (<ах/а>). Установите атрибут href в начальном 
дескрипторе якоря равным URL-адресу Web-страницы, которую браузер должен 
будет вывести, когда посетитель выполнит щелчок на анимированном тексте. 
Отображение и печать календаря на любой год 
с помощью аплета 
Когда вы просите пользователей ввести определенную дату (например, при 
бронировании номера в гостинице) или задать временной диапазон (например, 
спрашивая, в течение какого времени пользователь не работал), имеет смысл 
предоставить пользователям возможность обращаться к календарю. Таким обра- 
зом, ваши посетители сочтут аплет calendar.class весьма полезным в случаях, 
когда необходимо посмотреть дату, но печатного календаря под рукой нет. Аплет 
calendar.class, написанный Керри Ньюманом (Kerry Newman), позволяет по- 
сетителям не только просматривать, но также распечатывать копию календаря на 
весь год — любой по выбору посетителя. 
ПРАКТИКУМ 
Аплет calendar.class вместе с исходным кодом доступен на сайте издателя 
русскоязычной редакции этой книги. Внешний вид календаря, который выводит 
упомянутй аплет, показан на рис. 9.15. 
Скопировав архив KNCaiendar.zip в папку на своем компьютере, извлеките 
из него файл calendar.class. Чтобы с помощью аплета вывести на Web-страни- 
це календарь, скопируйте .class-файл в туже папку, где находится Web-страни- 
ца. Затем вставьте показанные ниже строки в HTML-код страницы, туда, где 
должен находиться календарь: 
<applet code=Mcalendar.class" width="780" height="680" 
</applet> 
Изменить внешний вид или размеры календаря с помощью параметров 
нельзя. Однако посетители вашего сайта могут с помощью кнопок "FontColor" 
(цвет шрифта) и "BackColor" (цвет фона) на календаре изменять цвета текста и 
фона.

Глава 9. Java-аплеты и объекты ActiveX 469 
, Be Ц 
| Back 
Su
5 
12 
19 
26 
su
6 
1? 
20 
su 
13 
•X 
Me
i- 
- •'- 
,': С 
4 t 
И , ч
7 
- ^ 
2fi 
Ho 
14 
:(.] Appfel started 
ew Favorite 
FortCdk 
look 
•1 CO 
J 
Tu We1
7 8 
14 IS 
.1 22 
28 2? 
* APRIL 
Tu We 
1 2 
8 9 
IS 16 
.2 23 
Tu We 
15 16 
t b 
3 0 
rii 
10 
1? 
2 4 
111 
I P 
2 4 
m/H\ 
tiw. 
F j 
Fr
a 
- 1 
2J 
2 b 
1 1 
2S 
Help 
rtlTT/Ow 
J
Stop 
J jwj 
Sa
4 
IS 
ал
5 
12 
1? 
.6
с 
12 
1? 
eiiJS 
Re 
-10 
FigueO9-l I 
1 
him
/ft Ho™ 
S« Ibfc 
Sll tfe» 
4 S 
11 12 
18 1? 
Su Mo 
3 4 
10 11 
1? IS 
a. 
FEBROMW •*••* 
4 
** И 
Tu
6 
13 
20 
Tu
я 
12 
И.Л 
12 
2 6 
/,Y 
Я«
7 
21 
H. . 
i J 
•TltTr' SA 
• 6 7 8 
13 14 15 
.0 21 22 
E7-.25 
TU Г1 Sd 
1 2 3 
8 9 10 
IS 16 1? 
22 23 24 
Tb1 Fr Sa 
1 2 
7 В • 9 
14 IE 16 
21 22 :. 
i j •• 
J *asJj. 
Su M 
16 1 
SU И 
1 
15 1 
SU Ы
istory 
* * * 1 
> Ttt 
i> Tu 
2 • 3 
;j io 
i .I 
Mei! 
Ptrtj 
We Tb1 
i.C I ' ; 
FOHE • *< 
We Tli 
S 5 
11-. 12 
15 19 
о Тп 
1 2 
Ё ^ 
We ' Tli 
" 3 - 4 
XXS 1 1 
17 1-8 
гй 2Ь 
F i 
2 1 
Fx 
• 6 
13 
F i
,^ 
1 Й 
IS 
erne! 
lifts
- 
Ял 
15
7 
14 
—
13 
20 
» 
—
1 
: 
—1 
Рис. 9.15. Календарь, отображаемый аплетом calendar.class 
Конечно же, в файл KNCaiendar.zip входит исходный Java-код (файл 
calendar, java). Следовательно, если на вашем компьютере установлен компи- 
лятор Java, например, тот, который входит в состав бесплатного комплекта инст- 
рументальных средств разработчика программного обеспечения на Java, доступ- 
ного на Web-сайте Sun Microsystems, вы всегда сможете изменить аплет так, 
чтобы он принимал параметры, например, начальную дату, требуемые цвета и 
размер шрифта. 
Отображение с помощью аплета отрывка, случайным 
образом выбранного из текстового файла 
Одна из сложных задач, связанных с дизайном Web-сайта, состоит в поддер- 
жании новизны содержимого. Аплет PetQuotes. class позволяет отображать от- 
рывки, взятые из текстового файла, по одному за раз. Случайно выбирая отры- 
вок для отображения, аплет наверняка будет отображать новый отрывок каждый 
раз, когда браузер посетителя извлекает Web-страницу (см. рис. 9.16). 
Аплет PetQuotes.class вместе с исходным кодом доступен на сайте изда- 
теля русскоязычной редакции этой книги. Скопировав архив PetQuotes.zip в 
Папку на CBQM КОМПЬЮТере, ИЗВЛеКИТе ИЗ Него фаЙЛЫ PetQuotes. class И 
PetQuotes.txt. Затем скопируйте Два файла (PetQuotes.class И PetQuotes.txt) В 
папку, где находится код Web-страницы. После этого вставьте показанные ниже 
строки в HTML-код страницы, туда, где должен выводиться отрывок текста:

470 Глава 9. Java-аплеты и объекты ActiveX 
, вертикально прокручивающий содержимое текстового файла- Mic 
Оравке Щид И.зЬрвнное Сервис .лрввке I 
"••* J И $ А ' ^J ^ 
.: -.' •••;• Останов.. Обновить Домой : Поисж Иэбраьн.. Журнал 
HTML & Web Design Tips & 
Techniques 
Вертикально прокручиваемое содержимое 
ASCII-файла 
автор Е. A. Graham, Jr. 
Frames! 
This item uses the FRAME parameter. 
If I had any frames here, it would load my main 
paac m this frame. But I took frames off. 
Рис. 9.16. Цитата, выведенная на экран аплетом PetQuotes.class 
<applet code="РеtQuotes.class" width="410" height="72" 
<param name="font" value="Arial"> 
<param name="font_size" value="24"> 
<param name="color" value="black"> 
<param name="bgcolor" value="white"> 
</applet> 
Для определения внешнего вида текста и цвета фона служат следующие пара- 
метры, которые можно передать аплету: 
• font. Шрифт, который должен использовать аплет. По умолчанию — 
"TimesRoman". 
• font__size. Размер шрифта в пунктах. По умолчанию — "18". 
• color. Цвет текста. Возможные значения — black (черный) , white (бе- 
лый) , lightgray (светло-серый) , gray | рый), darkgray (темно-серый) , 
red (Красный), pink (рОЗОВЫЙ) , orange (оранжевый) , yellow (желтый) , 
green (зеленый) , magenta (пурпурный) , cyan (голубой) И blue (СИНИЙ) . 
По умолчанию — "black" . 
• bgcolor. Цвет фона. Возможные значения — black (черный), white (бе- 
лый) , lightgray (светлО- СерЫЙ), gray (серый) , darkgray (темно-серый) , 
red (краСНЫЙ), pink (рОЗОВЫЙ) , orange (оранжевый) , yellow (желтый), 
green (зеленый) , magenta (пурпурный) , cyan (голубой) И blue (СИНИЙ) . 
По умОЛЧаНИЮ - "white" . 
Чтобы предоставить аплету для отображения свои собственные цитаты, анек- 
доты или иные отрывки текста, отредактируйте соответствующим образом файл 
PetQuotes. txt. В первой строке файла введите число строк текста в файле. За-

Глава 9. Java-аплеты и объекты ActiveX 
тем на второй и последующих строках введите строки текста, которые должны 
будут отображаться. Вводите каждый отрывок и его источник на отдельных стро- 
ках в форме <отрывок текста>| |<источник>. Обратите внимание на символ 
двойной прямой черты (| |) между текстом каждой цитаты или отрывка и источ- 
ником (то есть автором) цитаты или отрывка. Приведенный ниже текст демонст- 
рирует пример содержимого, которое можно поместить в файл PetQuotes.txt: 
з
Некоторые люди вершат во сне великие дела. Другие допоздна не ложатся 
спать и эти дела делают. | | Аноним 
Иногда крик стоит больше, чем диссертация.||Ральф Вальдо Эмерсон 
Я две недели сидела на диете, но все, что мне удалось потерять, - это две 
недели.||Тотти Филдс 
Создание с помощью аплета навигационного меню, 
выполняющегося в отдельном окне 
Создавая Web-сайт, вы стремитесь сделать так, чтобы посетитель сайта легко 
мог переходить с одной страницы на другую или "перескакивать" на конкретную 
страницу Если посетителям приходится проходить через 15 документов, чтобы 
добраться до нужной им страницы, некоторые из них сделают закладку на этой 
странице, но большинство просто-напросто отправятся на другой Web-сайт, на 
котором проще ориентироваться. Чтобы облегчить навигацию по сайту, на каж- 
дую его страницу можно поместить меню, состоящее из ошерссылок. Един- 
ственная проблема, связанная с навигационными меню, состоит в том, что на 
больших сайтах такие меню могут занимать немало места из-за большого коли- 
чества гиперссылок, которые приходится поддерживать. 
К счастью, с помощью аплета MenuAppiet. class можно выводить навигаци- 
онное меню, содержащее до 400 гиперссылок — не жертвуя при этом простран- 
ством на экране в ущерб содержимому Web-сайта. Поскольку аплет отображает 
меню в новом окне, вам потребуется выделять место только для одной кнопки 
на каждой странице сайта, тем самым предоставляя посетителям возможность 
вызывать навигационное меню, когда оно им понадобится (см. рис. 9.17). 
Более того, аплет помогает организовать страницы на вашем сайте, позволяя 
разбивать страницы сайта на 20 категорий с 20 пунктами меню на каждую кате- 
горию. 
ПРАКТИКУМ 
Аплет MenuAppiet.class вместе с исходным кодом доступен на сайте издателя 
русскоязычной редакции этой книги. Скопировав архив MenuAppiet.zip в папку 
СВОем компьютере, извлеките ИЗ Него ДВа .class-файла (MenuAppiet. class И 
LabelButton. class), .ini-фаЙЛ (MenuApplet.ini) И Web-СТраНИЦу меню 
(menu.html). После того, как вы отредактируете содержимое .ini-и .html-фай- 
лов (как это сделать, рассказывается чуть ниже), скопируйте .class-файлы, 
MenuAppiet.ini и menu.html в туже папку, где находятся Web-страницы, в кото- 
рые необходимо вставить кнопки "Site Menu" ("Меню сайта") для вызова аплета 
MenuAppiet.class.

472 Глава 9. Java-аплеты и объекты ActiveX 
- •- 
—i 
« : ! « • • 
; <par 
k ! — t h 
niles Tools Help 
bi;net com/HWDTT/Chapte'Da/Figut-O1 
Stop Retiesh 
HTML & Web 
"Floating" 
* blank" CisplBS the do 
'vindouHeme" Display the do 
" ' . : • • • ' , • • • • :. 
i--Hi 
H4.Wm 31 < ' G o : 
/ 4 • sV * i ,4 : A- >>; 
LOJ <irt JSd **>' -^3 
Home Search Favw*e$ Histoiv Mri 
Design Tips & Techniques 
\Yiiidow Ni)\1gation Menu 
JV ^liltiii JSruxitf'Hiiu 
• 
Site Menu j 
Applet T,«g 
-"ContencSJindosr; 
Test pages : testl 
Others test2 
links 
Anchois in html 
ciment in a new wlndoo 
: " : ф Infernel 
Рис. 9.17. Навигационное меню, открытое в плавающем (новом) окне в результате 
щелчка на кнопке на Web-страниие 
Файл MenuAppiet.ini содержит категории и пункты меню, которые посети- 
тель увидит в выведенном на экран аплетом меню. В этом .ini-файле содержат- 
ся строки двух типов: строки, которые начинаются и заканчиваются знаком 
плюс (+), и строки, которые начинаются с обратной косой черты (\). Строки, 
которые начинаются (и заканчиваются) знаком плюс (+),— это категории меню, 
которые аплет отображает в своем левом столбце, под заголовком "Select" ("Вы- 
берите"). Строки, начинающиеся с обратной косой черты (\), - это пункты 
меню, которые аплет отображает в своем правом столбце, озаглавленном "Go 
То" ("Перейти на ..."). Когда посетитель щелкает на категории в столбце 
"Select", аплет отображает пункты меню в выбранной категории в столбце "Go 
То". Аналогично, когда посетитель щелкает на пункте меню в столбце "Go To", 
аплет дает Web-браузеру указание извлечь и отобразить Web-страницу в окне, 
имя которого передается аплету в параметре targetwindow (он рассматривается 
далее в этой главе). 
Откройте файл .MenuAppiet.ini в текстовом редакторе и замените содержи- 
мое файла на свои собственные категории и пункты меню. Открыв файл в пер- 
вый раз, вы увидите строки, похожие на приведенные ниже: 
+Тестовые страницы+ 
\Тестовая страница 1\ "test_html/testl.html" 
\Тестовая страница 2\ "test_html/test2.html" 
+ССЫЛКИ+ 
\Диасофт\ "http://www.diasoft.kiev.ua" 
\NVBizNet\ "http://www.NVBizNet.com"

Глава 9. Java-аплеты и объекты ActiveX 473 
Чтобы добавить в меню категорию, наберите текст категории между знаками 
ПЛЮС (+), как набраны ЗаПИСИ Категорий +Тестовые страницы* И +Ссылки+ В 
данном примере. Для добавления в категорию пунктов меню наберите текст пун- 
кта меню между символами обратной косой черты, а за ним — в двойных кавыч- 
ках относительный или URL-адрес, который должен будет извлечь браузер. В 
данном примере \Тестовая страница 1\ — пункт меню В категории "Тестовые 
страницы", a "test_htmi/testi .htmi" — относительный адрес Web-страницы, 
которую браузер должен извлечь, когда посетитель щелкнет на пункте меню 
"Тестовая страница 1". Обратите внимание, что каждый пункт меню необхо- 
димо определять внутри категории, при этом каждая категория может содержать 
не больше 20 пунктов меню. 
Заглянув в содержимое Web-страницы меню (menu.html), вы увидите, что она 
содержит код, аналогичный приведенному ниже, который внедряет аплет 
MenuAppiet.class в Web-страницу: 
<applet code="MenuApplet.class" width="222" height="144"> 
<param name="targetWindow" value="LoadHere"> 
<param name="fontType" value="TimesRoman"> 
<param name="fontstyle" value="0"> 
</applet> 
Имейте в виду, что аплет MenuAppiet.class позволяет отображать навигаци- 
онное меню в окне, отличном оттого, в котором отображаются Web-страницы 
сайта. Таким образом, вы внедряете аплет меню в его собственную Web-страницу 
(в данном примере menu.html), а не в HTML-код какой-то из страниц с содер- 
жимым сайта. 
Чтобы персонализировать аплет, откройте Web-страницу меню menu.html в 
текстовом редакторе и установите необходимые значения следующих трех пара- 
метров: 
• targetwindow. Окно, в котором аплет должен будет отображать Web-стра- 
ницу, извлеченную после щелчка на пункте меню. По умолчанию — 
"__self". 
• f ontType. Шрифт, которым аплет должен отображать категории и пункты 
меню. По умолчанию — "Helvetica". 
• fontstyie. Число от 0 до 3, которое определяет' стиль шрифта текста 
меню, о = обычный, 1 = полужирный, 2 = курсив и з = полужирный кур- 
сив. По умолчанию — "О". 
Чтобы посетители смогли получить доступ к меню, вставьте в свои Web-стра- 
ницы, туда, где должна будет находиться кнопка, щелчок на которой приводит к 
открытию навигационного меню, следующее определение формы: 
<form> 
<input type="button" name="NavButton" value="MeHio сайта" 
onClick="window.open('menu.html', 'SiteNavMenu', 
•menubar=no, height=166, width=244•)"> 
</form>

4 74 Глава 9. Java-аплеты и объекты ActiveX 
В данном примере определение формы содержит стандартную кнопку с над- 
писью "Меню сайта". Как только посетитель щелкнет на этой кнопке, Web-бра- 
узер выполнит JavaScript-код, связанный с кнопкой, который откроет Web-стра- 
ницу меню (menu,html) В ННМ (Ж№ С именем SiteNavMenu. Аплет 
MenuAppiet.class (внедренный в Web-страницу memi.html) отобразит затем на- 
вигационное меню В ОКНе SiteNavMenu. 
Последнее, что вам необходимо принять в расчет — это размер окна, в кото- 
ром аплет MenuAppiet.class должен отображать навигационное меню. Чтобы 
вычислить высоту окна, вернитесь к определению меню, которое вы создали в 
MenuAppiet.ini, и определите, чего больше в вашем меню — категорий или пун- 
ктов меню в одной категории. Затем воспользуйтесь формулой 
высота = (л + 1) * 18, 
где п - максимальное число категорий или максимальное число ссылок в одной 
категории (выбрать большее). Чтобы вычислить ширину, воспользуйтесь форму- 
лой
ширина >= 12 + (р * 7) + •* 1) , 
где р — число символов в самом длинном названии категории, a q — число сим- 
волов в самом длинном пункте меню. 
Вычислив высоту и ширину, присвойте полученные значения атрибутам 
height и width в начальном дескрипторе <appiet> HTML-кода Web-страницы 
меню (то есть в файле menu.html). Затем возьмите вычисленные значения высо- 
ты и ширины аплета, добавьте к каждому из них 20 и присвойте полученные 
значения параметрам height и width, которые передаются JavaScript-кодом фун- 
кции window, open, В дескрипторе ВВОДа <input> ДЛЯ КНОПКИ "Меню сайта". 
Дополнительным преимуществом использования аплета является то, что вы 
сможете в любое время вносить изменения в навигационное меню (модифици- 
руя файл MenuAppiet.ini), причем эти изменения, будут мгновенно отражаться 
на всех страницах, в которые была вставлена кнопка "Меню сайта". (В случае 
вставленной в каждую страницу традиционной навигационной панели вам при- 
шлось бы вносить одни и те же изменения в меню многократно — на каждой стра- 
нице сайта.) 
Прокручивание содержимого файла по вертикали в 
прямоугольной области на экране с помощью аплета 
Если вам нужно прокручивать одну строку текста горизонтально на экране, 
браузер Internet Explorer позволяет задать прокручиваемый текст между началь- 
ным И конечным дескрипторами бегущей СТрОКИ (<marquee></marquee>). Чтобы 
получить более гибкое решение, можно написать JavaScript-сценарий, выполняю- 
щий ту же функцию, поскольку браузер Netscape Navigator не поддерживает дес- 
крипторы бегущей строки, но и Netscape Navigator, и Internet Explorer поддержи- 

вают JavaScript. Если, же вы хотите отображать на экране несколько строк текста 

одновременно и прокручивать текст по горизонтали, вам понадобится нечто 
большее, чем простая бегущая строка; вам понадобится аплет NewsScroiier.

Глава 9. Java-аплеты и объекты ActiveX 475 
Аплет NewsScroiier, написанный Е. А. Грэхемом-мл. (Е. A. Graham, Jr.), по- 
зволяет прокручивать текст из ASCII-файла вертикально внутри прямоугольной 
области на Web-странице, как показано на рис. 9.18. 
Фейл Qpaata SHU Уэ&раиное .Сервис .Справка . . . Щ. 
- J J Д. i»ilj^> JB- 
Рис. S 
HTML & Web Design Tips & 
Techniques 
Вертикально прокручиваемое содержимое 
ASCII-файла 
автор Е. A. Graham, Jr. 
This ketr, aits llit FRAME parametei 
1 I) I hac! any fi antes here, it would load my main 
page in tilis frame. But I took Barnes off. 
I Tllis message aba demonsfrates blank lines within 1 
.18. Аплет NewsScroiier, прокручивающий текст вертикально 
в прямоугольной области на Web-странице 
Внутри входного файла, который будет отображаться, аплет позволяет обозна- 
чить одно- и многострочные заголовки, сообщения и гипертекст — причем все 
своими цветами. 
ПРАКТИКУМ 
Аплет NewsScroiier вместе с исходным кодом доступен на сайте издателя рус- 
скоязычной редакции этой книги. Скопировав архив NewsScroiier.zip в папку 
на своем компьютере, извлеките из него файлы Scroller ,jar и News.txt. Затем, 
чтобы использовать аплет на своей Web-странице, скопируйте файл Java-архива 
Scroller,jar и файл новостей News.txt в ту же папку, где находится Web-стра- 
ница. Затем вставьте приведенные ниже строки в HTML-код Web-страницы, туда, 
где должен появляться прокручиваемый текст: 
<applet code="crackers.Scroller.NewsScroiier.class" 
archive="scroller. jar" width="400" height = "150"> 
<param name="DataFile" value="News.txt"> 
<param name="ClickColor" value="#0000FF"> 
<param name="HeadColor" value="#FF0000"> 
<param name="Font" value="Serif"> 
<param name="FontSize" value="18"> 
<param name="MousePause" value=""> 
<param name="TopPause" value="0"> * 
<param name-"Refresh" value="0"> 
<param name="Foreground" value="#000000"> 
<param name="Background" value="#FFFFFF"> 
<param name="Border" value="8"> 
<param name="Picture" value="bg__gif. gif ">

476 Глава 9. Java-аплеты и объекты ActiveX 
<param name="Target" value="__top"> 
<param name="SleepTime" value="30"> 
<param name="ScrollBy" value = "l"> 
</applet> 
Для настройки аплета испольхуются следующие параметры: 
• DataFiie. Относительный или URL-адрес файла с заголовками, гипертек- 
стовыми ссылками и сообщениями, которые необходимо отображать. По 
уМОЛЧаНИЮ - "News.txt". 
• ciickcoior. Цвет (выраженный в виде шестнадцатеричного триплета), с 
использованием которого аплет будет выводить текст гиперссылок из фай- 
ла данных. По умолчанию — "#OOOOFF" (СИНИЙ). 
• HeadCoior. Цвет (выраженный в виде шестнадцатеричного триплета), к с 
использованием которого аплет будет выводить текст заголовков из файла 
данных. По умолчанию — "#FFOOOO" (красный). 
• Font. Шрифт, которым будет отображаться текст, определенный в файле 
данных. По уМОЛЧаНИЮ — "Serif". 
• Fontsize.уРазмер шрифта прокручиваемого текста. По умолчанию — "12". 
• MousePause. Если передан этот параметр, даже со значением пустой стро- 
ки (""), аплет NewScroiier прекратит прокручивать текст, когда посети- 
тель наведет курсор мыши на аплет, и начнет прокручивать текст заново, 
когда посетитель уберет курсор с аплета. Чтобы прокручивание текста не 
прерывалось перемещениями курсора, не используйте параметр 
MousePause. 
• TopPause. Время (в миллисекундах), в течение которого каждый заголовок 
должен задерживаться у верхнего края области просмотра. По умолча- 
нию — "О". 
• Refresh. Время (в минутах), по прошествии которого аплет начинает по- 
вторное чтение файла новостей. По умолчанию — "О" (то есть не повто- 
рять). 
• Foreground. Цвет (выраженный в виде шестнадцатеричного триплета), с 
использованием которого аплет будет выводить текст сообщений из файла 
данных. По умолчанию — "#оооооои (черный). 
• Background. Цвет (выраженный в виде шестнадцатеричного триплета) 
фона аплета. По умолчанию — "#FFFFFFM (белый). 
• Border. Ширина в пикселях границы вокруг аплета. По умолчанию — "0м. 
• Picture. Относительный или URL-адрес файла с графическим изображе- 
нием, которое будет использоваться в качестве фона аплета. 
Target. Окно, в котором айлет дает Web-браузеру указание отобразить 
Web-страницу, извлеченную браузером, когда посетитель щелкает на гипер- 
текстовой ссылке в прокручиваемом тексте. 
• sieepTime. Время ожидания (в миллисекундах) между обновлениями. По 
умолчанию — "30".

Глава 9. Java-аплеты и объекты ActiveX 4 7 7 
• scroiiBy. Число пикселей, на которое аплет прокручивает текст в течение 
каждого цикла обновления. По умолчанию - "1". 
Для того чтобы определить текст, отображаемый аплетом, откройте и моди- 
фицируйте в текстовом редакторе содержимое файла, заданного в параметре 
DataFile (по умолчанию это файл News.txt). Файл новостей состоит из заго- 
ловка, гиперссылки, фрейма, сообщения и метки завершения, которые обознача- 
ются следующими дескрипторами: 
• @HEAD. Указывает, что дальше идут заголовочные данные. Каждый пункт 
новостей начинается со строки ©HEAD • есть заголовка). Заголовочные 
данные могут располагаться на нескольких строках. Следующий за ними 
дескриптор @URL, @MSG или @END прекращает действие дескриптора заголовка. 
• @URL. Указывает, что дальше идут данные гиперссылки. Аплет будет вос- 
принимать весь текст до следующего дескриптора @END как часть гиперс- 
сылки, на которой посетитель может щелкнуть, чтобы загрузить другую 
Web-страницу. 
• @FRAME. Указывает, что дальше идет имя целевого фрейма или целевого 
окна. Дескриптор @FRAME должен находиться после дескриптора @URL, рас- 
положенного на предыдущей строке. 
• @MSG. Указывает, что дальше идут данные сообщения. Чтобы завершить 
сообщение, необходимо поместить дескриптор @END В строку, следующую 
за последней строкой сообщения. 
• @END . Указывает, что строка в файле новостей является завершающей стро- 
кой сообщения. 
Примером того, как определять заголовки, гиперссылки и сообщения для 
отображения аплетом, может послужить содержимое файла News. txt, который 
ВЫ ИЗВЛеКЛИ ИЗ архиваNewsScroller.zip. 
Анимация синусоидальных колебаний изображения с 
помощью аплета 
В предыдущем практикуме было показано, как выполнить анимацию текста с 
помощью аплета, который перемещает текст слева направо (или справа налево) 
по экрану в соответствие с синусоидальным законом. Вместо того, чтобы для со- 
здания анимированного баннера прокручивать текст по синусоиде, можно вос- 
пользоваться аплетом siniogo. class для анимации статического изображения, 
например, логотипа, как показано на рис. 9.19. 
Ш1 
Рис. 9.19. Два представления одного и того желоготипа: слева — статический 
логотип, 
справа — анимированный логотип

47 8 Глава 9. Java-аплеты и объекты ActiveX 
Обратите внимание, что буквы в верхнем логотипе на рис. 9.19 находятся на 
одном уровне. Символы же в нижнем логотипе находятся на неодинаковой высо- 
те, демонстрируя, как аплет выравнивает нижнюю часть логотипа вдоль синусоиды. 
ПРАКТИКУМ 
Аплет siniogo. class вместе с исходным кодом доступен на сайте издателя рус- 
скоязычной редакции этой книги. Скопировав архив sinLogo.zip в папку на 
своем компьютере, извлеките из него файл siniogo.class. Затем, чтобы исполь- 
зовать аплет на своей Web-странице, скопируйте siniogo.class и изображение, 
анимацию которого необходимо выполнить, в ту же папку, где находится код 
Web-страницы. Далее вставьте приведенные ниже строки в HTML-код Web-стра- 
ницы, туда, где должен будет появиться анимированный текст: 
<applet code="Siniogo.class" width="363" height="97"> 
<param name="image_logo" value="Web4.gif"> 
<param name="angle_add" value="1.9"> 
<param name="bg_red" value="0"> 
<param name="bg_green" value="O"> 
<param name="bg_blue" value="0"> 
</applet> 
Для настройки анимационного эффекта, создаваемого аплетом, используются 
следующие параметры: 
• xmage_iogo. Имя и путь GIF- или JPEG-файла, анимацию которого необ- 
ходимо выполнить с помощью аплета. 
• angie_add. Коэффициент, то естьвеличина, на которую аплет смещает ча- 
стицы изображения от базовой синусоиды. Чем выше это значение, тем 
больше будет амплитуда движения вверх-вниз различных частей изображе- 
ния. По умолчанию — "0.5м. 
• bg___red. Значение красной RGB-составляющей цвета фона (заданное в де- 
сятичном виде). 
• bg__green. Значение зеленой RGB-составляющей цвета фона (заданное в 
десятичном виде). 
• Ьд_Ыие. Значение синей RGB-составляющей цвета фона (заданное в де- 
сятичном виде). 
Аплет работает, превращая цвет пикселей в части изображения в цвет фона, в 
то же время превращая цвет пикселей в фоне другой части картинки в цвет 
изображения. Таким образом, самое главное — это задать параметры bg__red, 
bg_green и bg_biue, которые сообщают аплету цвет фона, чтобы аплет смог со- 
здать видимость того, что частички изображения исчезают и вновь появляются 
по синусоидальному закону.

Глава 9. Java-аплеты и объекты ActiveX 4 7 9 
Редактирование исходного Java-кода для компиляции 
пользовательского аплета 
На протяжении этой главы вы настраивали аплеты в соответствии со своими 
потребностями с помощью дескриптора <param>. В Web можно найти сотни го- 
товых аплетов, которые можно свободно выгружать и включать в состав своих 
Web-страниц. Обычно настраивать аплеты можно с помощью дескриптора 
<param>, как это делалось в предыдущих практикумах. Тем не менее, некоторые 
аплеты не принимают параметры настроек. Чтобы персонализировать те аплеты, 
которые не позволяют передавать значения настроек посредством дескриптора 
<param>, вам придется редактировать операторы Java-программы, которые были 
написаны программистом, создавшим аплет. Следовательно, настраивать такие 
аплеты можно только в том случае, если программист дает вам возможность заг- 
рузить файл с исходным кодом. Прежде чем начать корректировать Java-аплеты пу- 
тем редактирования операторов программы, вы должны понимать действия, вы- 
полняемые программистом при создании аплета. 
Разрабатывая программу, программист с помощью языка программирования, 
например, Java, Visual Basic или C+ + , задает инструкции, которые должны быть" 

выполнены компьютером. Инструкции (то есть операторы программы) програм- 
мист помещает в файл, который носит название исходного файла программы (в 
данном случае - аплета). Точно так же, как вы можете с помощью ряда тексто- 
вых редакторов создавать HTML-документы, программисты могут пользоваться 
различными редакторами для создания исходного файла аплета. Подобно тому, 
как для HTML-страниц используются расширения файлов . htm или . html, для 
исходных файлов Java используется расширение .java. 
Ранее в этой главе рассматривался аплет NervousText, который "дергает" на 
экране буквы в текстовом сообщении, так, чтобы буквы казались "нервными". 
Приведенные ниже операторы представляют собой исходный код упрощенной 
версии аплета, которую можно назвать Nervous, java. (Язык программирования 
Java чувствителен к регистру; это значит, что он отличает заглавный и строчный 
варианты одной и той же буквы. Следовательно, создавая исходный файл 
Nervous, java, не забудьте использовать в имени файла заглавную "N".) 
import java.awt.event. * ; 
import java.awt.Graphics; 
import java.awt.Font; 
import java.applet.Applet; 
public class Nervous extends Applet implements Runnable 
ri 
String banner; 
char bannerChars[]; 
Thread runner = null; 
public void init () 
t
banner = "I'm nervous!"; 
int bannerLength = banner.length(); 
bannerChars = new char[bannerLength]; 
banner.getChars(0, banner.length(), bannerChars, 0) ;

48 0 Глава 9. Java-аплеты и объекты ActiveX 
resize(15*(bannerLength + 1), 50); 
setFont(new Font("TimesRoman", Font.BOLD, 36)); 
} 
public void start() 
{ 
runner = new Thread(this); 
runner.start() ; 
} 
public synchronized void stop() 
( 
runner = null ; 
} 
public void run() 
{ 
Thread me = Thread.currentThread(); 
while (runner == me) 
{ 
try { 
Thread.sleep(100); 
} catch (InterruptedException e) { } 
repaint(); 
} ' 
} 
public void paint(Graphics g) 
{ 
for(int i=0 , length = banner . length () ; i < length; i++) 
{ 
int x = (int) (10*Math.random() + 15*i) ; 
int у = (int) (10*Math.random() + 36); 
g.drawChars(bannerChars, i, 1, x, y ) ; 
) 
j 
вовсе не обязательно понимать конкретное предназначение операторов в 
исходном файле Java; цель этого практикума — выгрузить и "ввести в эксплуата- 
цию" комплект инструментальных средств разработчика программного обеспече- 
ния на Java (Java Software Development Kit — SDK) из посвященного Java Web- 
сайта Sun Microsystems. В результате вы сможете скомпилировать свой первый 
Java-аплет. 
Как вы уже знаете, Java-аплет состоит из обобщенного байт-кода (то есть 
файла, заполненного единицами и нулями), который выполняется браузером. 
Чтобы преобразовать операторы, которые находятся в исходном Java-файле, в 
единицы и нули, из которых состоит байт-код, выполняемый Web-браузером, 
программисты применяют специальную программу, называемую компилятором. 
Как доказано на рис. 9.20, компилятор преобразует операторы (называемые ко- 
дом), находящиеся в исходном Java-файле, в байт-код. Исходный Java-файл обыч- 
но имеет расширение . java, а компилятор сохраняет сгенерированный им байт- 
код в файле с расширением .class. (Как вы видели в предыдущих практикумах, 
для внедрения аплета в Web-страницу значение атрибута code внутри дескриптора 
<appiet> устанавливается равным имени файла, содержащего байт-код аплета.)

Глава 9. Java-аплеты и объекты ActiveX 481 
if (Imageloaded) 
I 
Display image(); 
Исходный код Java 
101101110 
110101110 
110111001 
О00Ш01О 
111011011 
111000111 
Компилятор Java Байт-код аплета 
Рис. 9.20. Компилятор Java преобразует операторы исходного кода в байт-код 
Для большинства языков программирования, например, Visual Basic или C+ + , 
программистам приходится приобретать компилятор, цена которого может дос- 
тигать нескольких сотен долларов. Компания Sun Microsystems, однако, предла- 
гает комплект инструментальных средств разработчика программного обеспече- 
ния на Java (SDK), содержащий компилятор Java (наряду с другими 
инструментами программированиями и программами-примерами), совершенно 
бесплатно. Выгрузить Java SDK можно из сайта http://www.java.sun.com. 
Комплект Java SDK достаточно велик (более 30 Мб). Для того чтобы выгру- 
зить SDK, вам понадобится достаточный объем свободного пространства на дис- 
ке, равно как и определенное терпение до завершения выгрузки. Во время выг- 
рузки SDK вы получаете исполняемый файл, который потребуется запустить, 
чтобы установить Java на ваш компьютер. (Для создания Java-аплетов необходи- 
мо, чтобы на вашем компьютере был установлен компилятор Java; для выполне- 
ния Java-аплетов необходим только браузер.) После завершения загрузки вам 
нужно будет запустить программу установки Java SDK. Программа установки 
даст возможность выбрать папку, в которую должны быть помещены файлы SDK. 
Для простоты укажите папку Java в корневом каталоге своего диска (программа 
установки самостоятельно создаст в корневом каталоге эту папку, в которую и бу- 

дет помещать файлы). После завершения установки Java SDK вам потребуется 
выполнить несколько простых служебных действий, прежде чем можно будет ис- 
пользовать компилятор для компиляции своего первого аплета. 
Компилятор Java представляет собой программу режима командной строки, а это 
значит, что вы запускаете компилятор не в окне как таковом, а из командной 
стро- 
ки. Чтобы помочь вам в приведении в работоспособное состояние компилятора под 
управлением различных операционных систем (или их версий), Web-сайт компании 
Sun, посвященный Java, предоставляет набор пошаговых инструкций. Инструкции 
по установке компилятора в среде Windows (Windows 9x, 2000 и ХР) находятся по 
адресу http: //www. Java. sun. com/j2se/l. 3/install-windows .html#Environment. 

Для лучшего понимания процесса установки компилятора в оставшейся части 
этого практикума будет рассмотрены действия, которые необходимо выполнять 
для установки компилятора в среде Windows 9x.

48 2 Глава 9. Java-аплеты и объекты ActiveX 
Сначала в среде Windows необходимо запустить компилятор Java из команд- 
ной строки в окне MS-DOS. Для того чтобы открыть окно MS-DOS, выберите в 
меню Start | Run (Пуск | Выполнить...). На экран будет выведено диалоговое окно 

Run (Запуск программы). В диалоговом окне Run наберите command и нажмите 
ENTER. 
Имя каталога, содержащего инструментальные средства программирования на 
Java, зависит от установленной вами версии SDK. Прежде чем вы сможете ис- 
пользовать компилятор для создания Java-аплетов, вам нужно будет добавить 
имя каталога, содержащего инструментальные средства, в командный путь, опре- 
деленный строкой PATH в файле AUTOEXEC.BAT вашей системы. Чтобы указать 
корневой каталог (содержащий файл AUTOEXEC.BAT), наберите в командной стро- 
ке CD \ и нажмите ENTER: 
С:\Windows>CD \<Enter> 
С:\> 
Имя папки, содержащей инструменты программирования на Java, обычно бу- 
дет начинаться с буквы J. Чтобы найти эту папку, наберите приведенную ниже 
команду DIR и нажмите ENTER; Windows отобразит список каталогов, подобный 
приведенному ниже: 
C:\>DIR \J* /A:D<Enter> 
Том в устройстве С не имеет метки 
Серийный номер тома: 063E-14D9 
Содержимое папки С: \ 
DIASOF-1 <ПАПКА> 10-01-03 1:08р Diasoft Publishing House 
BOOKS <ПАПКА> 11-01-02 8:10a Books for DS P u b l i s h i n g House 
J2SDK1-1 0-B <ПАПКА> 10-01-02 2:15p j2sdkl. 4.0-beta3 
0 файлов О байт 
0 папок 955,04 МБ свободно 
В данном случае инструменты программирования на Java находятся в папке 
J2SDKI~I.O-B. Запишите название каталога, в котором хранятся файлы Java на 
вашем компьютере (если имя содержит пробел, замените пробел точкой). С по- 
мощью Блокнота отредактируйте файл AUTOEXEC.BAT, расположенный в кор- 
невом каталоге: 
С:\>notepad \autoexec.bat<Enter> 
В файле AUTOEXEC.BAT найдите строку PATH. В конце строки поставьте точку 
с запятой, буквенное обозначение текущего диска, двоеточие, косую черту, имя 
каталога Java и строку \BIN, как показано ниже: 
PATH С:\WINDOWS\SYSTEM;C:\J2SK-1.0-B\BIN 
Сохраните содержимое файла и выйдите из редактора. С помощью команды 
EXIT закройте окно MS-DOS и перезагрузите компьютер. 
После перезагрузки компьютера вы готовы к компиляции Java-аплетов. В дан- 
ном случае будет выгружены (ИЛИ набраны) Операторы программы Nervous. Java. 
Выгрузить этот файл вы можете из сайта издателя русскоязычной редакции этой 
КНИГИ, КОТОРЫЙ НахОДИТСЯ ПО адресу http://www.diasoft.kiev.ua. ЕСЛИ же ВЫ

Глава 9. Java-аплеты и объекты ActiveX 4 8 3 
будете набирать операторы, внимательно следите за использованием букв верхне- 
го и нижнего регистра. Поместите файл в папку на диске, которую в данном 
случае можете назвать просто MyJava. Затем снова откройте окно MS-DOS. С 
помощью команды CD выберите каталог, в котором был сохранен файл 
Nervous, java. Например, если вы поместили файл в каталог Myjava, команда со 
будет выглядеть следующим образом: 
\Windows>CHDIR \MyJava<Enter> 
С:\МуJava> 
Чтобы Скомпилировать ИСХОДНЫЙ фаЙЛ Nervous. Java, Выдайте Следующую КО- 
манду javac, находясь в папке с исходным Java-файлом: 
С:\MyJava>javac Nervous.java<Enter> 
УспеШНО СКОМПИЛИрОВаВ Программу, КОМПИЛЯТОР СОЗДаСТ фаЙЛ Nervous.class 
в той же папке, где находится исходный файл аплета. Если вы набирали файл и 
компилятор выдал сообщения об ошибках, отредактируйте файл, внимательно 
сравнивая операторы в нем с текстом, приведенным в данной книге. Набранные 
вами буквы и символы должны в точности соответствовать тем, которые приведе- 
ны в книге. Если же при выполнении программы javac система выдает сообще- 
ние "Bad command or file name" ("Имя команды или файла указано неправиль- 
но"), строка PATH в вашем файле AUTOEXEC.BAT не указывает корректно на файл, 
содержащий инструментальные средства программирования на Java. 
Скомпилировав аплет, создайте следующий HTML-файл, Nerves.html, для 
внедрения вновь созданного аплета в Web-страницу: 
<html> 
<headXtitle>HepBHbiPi TeKCT</titleX/head> 
<body> 
<hr> 
<applet code="Nervous.class" width=375 height=50> 
<param name="text" value="Java Development Kit 1.2"> 
</applet> 
<hr> 
</body> 
</html> 
Откройте в браузере файл Nerves.hmti. Web-браузер загрузит Web-страницу с 
внедренным аплетом, отображающим "дергающийся" текст — "I'm nervous!". 
Затем закройте Web-браузер и откройте в текстовом редакторе файл 
Nervous,java. Найдите следующую строку: 
banner = "I'm nervous!"; 
Замените текст в кавычках на что-нибудь другое, например: 
banner = "Konrad King"; 
Сохраните содержимое файла и выйдите из редактора. Затем выдайте следую- 
щую команду javac в командной строке MS-DOS, чтобы заново скомпилировать 
свой аплет: 
С:\МуJava>javac Nervous.java<Enter>

484 Глава 9. Java-аплеты и объекты ActiveX 
Каждый раз, когда вы вносите изменения в код из Java-файла, вы должны 
компилировать код с помощью компилятора Java (jeCvac), дабы изменения всту- 
пили в силу. В данном случае компилятор Java заменит содержимое 
Nervous, class байт-кодом модифицированного исходного Java-файла 
(Nervous.java), так что в следующий раз, когда вы загрузите Web-страницу — 
Nerves.html — в Web-браузере, внедренный аплет (Nervous.class) будет отобра- 
жать новую строку. Это все по компиляции, изменению и повторной компиля- 
ции Java-аплетов. 
a 
В зависимости от числа символов в тексте, который должен будет ото- 
бразить аплет, вам может понадобиться увеличить ширину аплета, изменив атрибут 
w i d t h 
внутри дескриптора < a p p l e t > , с помощью которого аплет внедряется на 
Web-страницу. 
Добавление в Web-страницу Internet-чата с помощью 
элемента управления ActiveX Microsoft Chat 
В предыдущих практикумах этой главы вы добавляли различные возможности 
на свой Web-сайт с помощью Java-аплетов. В следующих же практикумах описы- 
вается, как использовать на Web-страницах объекты ActiveX. Как было сказано 
выше в этой главе, объект ActiveX отличается от Java-аплета тем, что объект (то 

есть элемент управления) ActiveX необходимо предварительно выгрузить и уста- 
новить на своем компьютере, в отличие от безопасной загрузки и выполнения 
аплетов внутри браузера. Более того, если вы пользуетесь Netscape Navigator, 
вам 
придется выгрузить и установить подключаемый модуль, дающий браузеру под- 
держку того элемента управления ActiveX, который планируется выполнить. 
До появления функции Instant Messaging компании AOL (а теперь и 
Microsoft) и Internet-телефонии, предлагаемой компаниями наподобие 
Net2Phone, люди общались друг с другом через Internet с помощью так называе- 
мого чата Internet Relay Chat (IRC). Даже сегодня, при наличии электронной по- 
чты, пейджеров, сотовых телефонов и невысоких тарифов на междугородные и 
международные переговоры, IRC остается весьма и весьма популярным. Microsoft 
Chat дает вам возможность поместить на свои Web-страницы простейший эле- 
мент управления — чат, показанный на рис. 9.21. 
Подключившись к серверу IRC и либо присоединившись к существующей 
чат-комнате, либо открыв новую, посетитель может набирать сообщения в ниж- 
ней левой панели. Элемент управления затем отображает сообщения, набранные 
пользователем, вместе с сообщениями, набранными другими людьми в той же чат- 
комнате, в реальном времени внутри верхней левой панели элемента управления. (В 

правой панели элемента управления отображается перечень имен людей в комнате.) 
Рис. 9.21. Элемент управления ActiveX IRC Microsoft Chat

Глава 9. Java-аплеты и объекты ActiveX 
ПРАКТИКУМ 
Многие компании обнаружили, что чат-сеансы — это удобный способ организа- 
ции прямого общения между клиентами и службой поддержки. Чат-комнаты осо- 
бенно удобны в случае новых выпусков программных продуктов, когда у несколь- 
ких клиентов возникают одинаковые вопросы по установке и новым функциям. 
Компании могут сэкономить время и деньги, ответив на такие вопросы один раз в 
форуме, чтобы ответы могли прочесть многие клиенты, вместо того, чтобы много- 
кратно отвечать на одни и те же вопросы по телефону клиентам, звонящим на бес- 
платный номер службы поддержки компании. Чтобы использовать на Web-страни- 
це элемент управления Microsoft Chat, вставьте приведенные ниже строки в 
HTML-код Web-страницы, там, где должны будут находиться панели ввода и выво- 
да чата: 
<object id="ChatM 
classid="clsid:D6526FE0-E651-HCF-99CB-00C04FD644 97" 
align="baseline" border="0" width="600" height="200" 
standby="Загрузка элемента управления Microsoft Chat" 
type="application/x-oleobject"> 
<param name="MaxMessageLength" value="2000"> 
<param name="MaxHistoryLength" value="32767"> 
<param name="UIOption" value="4 095"> 
<param name="BackColor" value="255"> 
<!-- Ниже используется подключаемый модуль ActiveX, предоставленный 
esker.com, для вставки элемента управления ActiveX "чат" на Web- 
страницу при отображении в Netscape Navigator версии 6.1 и. выше. —-> 
<embed type="application/x-eskeractivex" 
id="Chat" 
clsid="D652 6FE0-E651-llCF-99CB-00C04FD64497" 
width="600" height="200" 
MaxMessageLength="2000" 
MaxHistoryLength="327 67" 
UIOption="4095" 
BackColor="2 5 5"> 
</embed> 
</object> 
Обратите внимание, что в коде данного примера присутствует дескриптор 
<embed>, загружающий элемент управления Microsoft Chat на Web-страницу, ког- 
да та отображается в Netscape Navigator. Помните, что вы должны установить 
подключаемый модуль, позволяющий Netscape Navigator выполнить элемент уп- 
равления ActiveX, прежде чем браузер Netscape в действительности сможет загру- 
зить и отобразить на Web-странице объект ActiveX. В данном примере дескрип- 
тор <embed> требует установить подключаемый модуль ActiveX np6esk32.dll, 
выгрузить который можно по адресу http://www.esker.com. Значения, присваи- 
ваемые атрибуту type дескриптора <embed>, будут различаться в зависимости н 
подключаемого модуля ActiveX, используемого для вашей версии Netscape 
Navigator. 
Настроить возможности чата можно при помощи следующих параметров: 
• standby. Текст, отображаемый Web-браузером во время загрузки элемента 
управления Microsoft Chat.

486 Глава 9. Java-аплеты и объекты ActiveX 
• MaxMessageLength. Максимальное число символов, которое посетитель 
может набрать в области исходящего сообщения (то есть в нижней левой 
панели), прежде чем щелкнуть на одной из двух кнопок "Send" ("Отпра- 
вить") справа от панели. 
• MaxHistoryLength. Число символов, которому элемент управления позво- 
лит аккумулироваться в области списка (истории) сообщений (то есть в 
верхней левой панели), прежде чем удалять самый старый текст. 
• Backcoior. Число от 0 до 255 включительно, задающее цвет границы меж- 
ду панелями элемента управления. 
Помимо самого элемента управления Microsoft Chat, вам необходимо предос- 
тавить посетителю форму для ввода имени сервера IRC, чат-комнаты, темы чата 
и прозвища ("ника"), под которым посетитель будет известен в комнате. Кроме 
того, посетителю понадобятся кнопки, показанные в нижней части формы на 
рис. 9.22, чтобы войти в существующую или создать новую комнату, управлять 
взаимодействием с другими участниками и, по желанию, очищать область спис- 
ка сообщений. 
Выгрузите из сайта издателя русскоязычной редакции этой книги страницу 
MSChatPage.htm, которая послужит примером полнофункциональной Web-стра- 
ницы с внедренным элементом управления ActiveX Microsoft Chat. He стесняй- 
тесь менять расположение полей и текстовых подписей формы. VBScript-функции, 
вызываемые при щелчках посетителя на кнопках формы, находятся в нижней части 
HTML-кода Web-страницы. (Каждая VBScript-функция обращается к методу (то есть 
функции) элемента управления ActiveX Microsoft Chat для выполнения действия, 
со- 
ответствующего надписи кнопки, с помощью которой была вызвана функция.) 
«||HWl> ГЦ Miciotoll AnlivtX Chal Micioao» IMeinet Exploi 
Favorites .<wfc Help 
HTML and Web Design Tips & Techniques 
MSChat ActiveX Control 
Please entsi tht servti and cbatioom as /Kseiver г\азпе>Ш<тоьтг 
Note- Place a double slash (It, before the semi's nam* and a 
slash (f) end thfishmttfc(#)in&utrt of the chat room's same 
]//chel plenetz net 7000/#HTML&WDTT 
Enter jrowoidotenei 
JNickneme 
Set Room-Topicto- jJHTML & Web Design Tips & Techniques 
J^hat RooniTopic' | • bftfcitlberCounL | 
. Joifs/Sierte-Room Ignore Member j Doniignore Member Ignore Wfoispers ' j 
Clear History j 
SpectatorView j 
KidtPartidpant jjputyour kick comment here 
Рис. 9.22. Форма, позволяющая посетителю вводить информацию для входа 
в чат и отправлять команды клиенту Microsoft Chat

Глава 9. Java-аплеты и объекты ActiveX 487 
Использованиетолько объектов ActiveX 
в Internet Explorer 
Одна из сложностей использования объектов ActiveX на Web-страницах зак- 
лючается в поддержке пользователей, работающих в Netscape. Как вы уже знаете, 
прежде чем Netscape сможет использовать объект ActiveX, должен быть выгружен 
подключаемый модуль, поддерживающий объект. К сожалению, не все подклю- 
чаемые модули поддерживают все объекты ActiveX. Например, элемент управле- 
ния Microsoft Marquee (рамка) позволяет отображать содержимое Web-страницы 
по вертикали, по горизонтали или по диагонали внутри прямоугольной области 
на Web-странице, как показано на рис. 9.23. Элемент управления Microsoft 
Marquee отображает текст, фон и графические изображения, как посетитель ви- 
дел бы их, посетив саму Web-страницу. Таким образом, элемент управления 
Marquee дает возможность прокручивать текст, равно как и графические изобра- 
жения, в виде меняющегося баннера. К сожалению, многие из подключаемых 
модулей для Netscape не поддерживают элемент управления Marquee. 
файл Правка Ёид1 Из&роннде ' Сервис Справка • •'.-.. ; 
Назрд . ;;-.-.; ... Останов . Обноеить : Домой . Поиск Избрани.. Журнал• 
j•ВА^ас |й hfip://html-webdesign/Chapter09/Figure09-20.htm d 
Элемент управления Marquee компании 
Microsoft 
HTML and Web Design Tips & Techniques 
By 
Andy Anderson 
Kris Jamsa 
Konrad King 
Рис. 9.23. Элемент управления Marquee, прокручивающий одну Web-страницу в 
прямоугольной 
области внутри другой страницы 
ПРАКТИКУМ 
Чтобы использовать на Web-странице элемент управления Microsoft Marquee, 
обычно понадобится сначала создать HTML-файл с содержимым, которое вы ^т 
тите прокручивать в рамке. Затем в HTML-файл страницы, внутри которой необ- 
ходимо поместить рамку, помещается приведенный ниже HTML-код, причем в 
то место страницы, где должно находиться прокручиваемое содержимое (замени- 
те URL-адрес в параметре szURL на URL-адрес HTML-страницы, содержимое ко- 
торой требуется прокручивать):

48 8 Глава 9. Java-аплеты и объекты ActiveX 
<object id="Markee" width="64 0" height="260" 
classid="clsid:la4da620-6217-llcf-be62-0080c72edd2d"> 
<param name="szURL" value="http://www.NVBizNet.com/HWDTT 
/Booklnformation.htm"> 
<param name="ScrollDelay" value-"300"> 
<param name="LoopsX" value="-l"> 
<param name="LoopsY" value="-l"> 
<param name="ScrollPixelsX" value="0"> 
<param name="ScrollPixelsY" value="-10"> 
<param name="Whitespace" value="0"> 
<param name="Zoom" value="100"> 
</object> 
Для настройки элемента управления Marquee предназначены следующие пара- 
метры: 
• SZURL. URL-адрес исходной Web-страницы, которая должна отображаться 
в рамке. 
• ScroiiDeiay. Время (в миллисекундах) между обновлениями. 
• Loopsx Сколько раз программа должна прокрутить содержимое по верти- 
кали. Значение -1 обозначает "прокручивать постоянно". 
• LoopsY. Сколько раз программа должна прокрутить содержимое по гори- 
зонтали. Значение -1 обозначает "прокручивать постоянно". 
• scroiiPixeisx. Число пикселей, на которое программа должна сдвигать 
содержимое рамки по горизонтали в каждом цикле обновления. При отри- 
цательном значении содержимое будет прокручиваться справа налево, при 
положительном — слева направо. 
• scroiiPixeisY. Число пикселей, на которое программа должна сдвигать 
содержимое рамки по вертикали в каждом цикле обновления. При отрица- 
тельном значении содержимое будет прокручиваться по направлению 
вверх, при положительном — вниз. 
• whitespace. Размер интервала (в пикселях), который программа должна 
оставлять между последовательными копиями исходной Web-страницы. 
• zoom. Увеличение или уменьшение (в процентах) размера исходной Web- 
страницы внутри рамки. 
ПРАКТИКУМ 
Одно из решений проблемы, связанной с использованием объектов ActiveX, — 
внедрять объекты только для тех пользователей, которые работают в Internet 
Explorer. В вышеприведенном дескрипторе <object>, например, использование 
объекта на странице для браузеров Netscape предотвращается тем, что дескрип- 
тор <embed>, которого требует Netscape, опущен. Вместо того чтобы попросту иг- 
норировать пользователей Netscape, можно сделать так, чтобы ваша Web-страни- 
ца выполняла одну операцию (такую как внедрение объекта ActiveX) для 
пользователей Internet Explorer, и другую (такую как загрузка аналогичного 
Java- 
аплета) для пользователей Netscape.

Глава 9. Java-аплеты и объекты ActiveX 489 
Например, в приведенной ниже активной серверной странице при помощи 
значения HTTP__USER_AGENT определяется информация о браузере пользователя. 
Если строка, возвращенная функцией, содержит буквы MSIE, сценарий знает, что 
посетитель пользуется Microsoft Internet Explorer, и помещает в HTML-файл опе- 
раторы, внедряющие объект ActiveX. Если используется другой браузер (не 
Internet Explorer), сценарий объект не внедряет: 
<%
if instx(l. Request.ServerVariables("HTTP USER AGENT"), "MSIE") > 0 
then 
Response.Write 
Response.Write " 
Response.Write 
value=""http 
Response.Write 
Response.Write 
Response.Write 
Response.Write 
Response.Write 
Response.Write 
Response.Write 
Response.Write 
Response.Write 
else 
Response.Write 
"<object id="Markee" width=" 
classid=' 
"<param 
'"clsid: 
name=" 
"640"" height=""260"">" 
la4da620-6217-llcf-be62-0080c72edd2d"">' 
"szURL"" 
://www.NVBizNet.com/HWDTT/Booklnformation.htm"">" 
"<param 
"<param 
"<param 
"<param 
"<param 
"<param 
"<param 
"<param 
name=" 
name=" 
name=" 
name=" 
name=" 
name=" 
name=" 
name=" 
"</object>" 
"<applet code=' 
archive=""scroller. 
Response.Write 
Response.Write 
Response.Write 
Response.Write 
Response.Write 
Response.Write 
Response.Write 
Response.Wri te 
Response.Write 
Response.Write 
Response.Wri te 
Response.Write 
Response.Write 
Response.Write 
Response.Write 
Response.Write 
end if 
"<param 
"<param 
"<param 
"<param 
"<param 
"<param 
"<param 
"<param 
"<param 
"<param 
"<param 
"<param 
"<param 
"<param 
"<param 
jar"" 
name=" 
name=" 
name=" 
name=" 
name=" 
name=" 
name=" 
name=" 
name=" 
name=" 
name=" 
name=" 
name=" 
name=" 
name=" 
"</applet>" 
"ScrollDelay"" 
"ScrollDelay"" 
"LoopsX"" 
"LoopsY"" 
"ScrollPixelsX 
"ScrollPixelsY 
"Whitespace"" 
"Zoom"" 
value=300>" 
value=300>" 
value=-l>" 
value=-l>" 
"" value=0>" 
"" value=-10>" 
value=0>" 
value=100>" 
'"crackers.Scroller.NewsScroller.class"' 
width=""400"" 
"DataFile"" 
"ClickColor"" 
"HeadColor"" 
"Font"" 
"FontSize"" 
"MousePause"" 
"TopPause"" 
"Refresh"" 
"Foreground"" 
"Background"" 
"Border"" 
"Picture"" 
"Target"" 
"SleepTime"" 
"ScrollBy"" 
height=""150"">" 
value=""News.txt"">" 
value=""#O0O0FF"">" 
value=""#FF0000"">" 
valuer""Serif"">" 
value=""18"">" 
value="""">" 
value=""0"">" 
value=""0"">" 
value=""#000000"">" 
value=""#FFFFFF"">" 
value=""8"">" 
value=""bg gif.gif"">" 
value=""_top"">" 
value=""30"">" 
value=""l"">"

Глава 10 
РНР4 
В этой главе 
• История РНР 
• Загрузка и установка РНР 
• Начальный и конечный дескрипторы РНР 
• Синтаксис РНР 
: Переменные 
• Операции 
• Условная и циклическая обработка 
к- Передача данных HTML-формы РНР-сценарию 
Использование РНР для обработки и извлечения результатов формы 
Использование РНР для отправки сообщения по электронной почте 
Определение, принимает ли Web-браузер посетителя cookie-наборы 
I- Использование РНР и дискового файла для организации парольного 
доступа к Web-сайту 
Предотвращение перехода посетителей по ссылкам на сайт 
Использование PHP-сеанса для установки постоянного соединения 
между посетителем и Web-сервером 
I Создание базы данных MySQL и таблиц 
Вывод на Web-странице результатов запроса в базу данных SQL 
в HTML-таблице 
Использование РНР для генерации случайного пароля 
Использование РНР и MySQL для организации парольного доступа 
к Web-сайту 
Исключение возможности изменения посетителями значений переменных 
с помощью URL-аргументов 
Использование РНР и MySQL для отслеживания положения посетителя 
на Web-сайте 
Определение IP-адреса посетителя для запросов Web-страницы, 
переданных через прокси-сервер 
• Предотвращение принятия одним посетителем РНР-идентификатора 
сеанса другого посетителя 
Использование функций РНР для создания шаблонов Web-страниц 
• Использование РНР для внедрения на страницу функциональности 
выгрузки файла

Глава РНР4 491 
HP — это инструментальное средство, которое позволяет создавать Web- 
страницы "на лету". В прошлом Web-сайты состояли из статических стра- 
ниц, содержащих текст, графические изображения и, возможно, зрелищные (но 
неизменные) мультимедиа-эффекты и анимацию. Сегодня посетители имеют 
дело со страницами, которые позволяют им хранить и осуществлять поиск в 
базах данных и генерировать новое Web-содержимое, основываясь на выпол- 
ненных посетителем запросах и при использовании ресурсов системы посети- 
теля. РНР (первоначально аббревиатура от Personal Home Page - персональная 
домашняя страница) представляет собой гипертекстовый препроцессор, кото- 
рый позволяет генерировать Web-содержимое "на лету". Операторы, предназна- 
ченные для обработки PHP-процессором, хранятся в отдельном файле или 
внедряются в HTML-код Web-страницы. 
На рис. 10.1 показаны операции, выполняемые при загрузке и выводе на эк- 
ран PHP-страницы. При запросе PHP-страницы (т.е. страницы, расширение фай- 
ла которой связано с PHP-процессором; как правило, это расширение .php) 
Web-браузером Web-сервер передает запрос PHP-процессору. Процессор, в свою 
очередь, считывает документ, запрошенный браузером. При построчном прохож- 
дении процессора по файлу выполняются PHP-операторы, содержащиеся между 
начальным (<?php или <?) и конечным (?>) дескрипторами PHP-сценария. Про- 
цессор записывает результаты выполнения PHP-операторов и весь текст, находя- 
щийся вне дескрипторов PHP-сценария, на Web-страницу (виртуальную страницу 
в памяти Web-сервера, которая, в конце концов, будет передана Web-браузеру). 
За счет того, что после передачи Web-серверу запроса Web-браузера на загруз- 
ку Web-страницы с РНР-кодом, PHP-процессор генерирует HTML-код Web-стра- 
ницы, вы получаете возможность генерировать страницы, содержащие HTML- 
код, специфический для используемого посетителем браузера, а также страницы, 
содержимое которых зависит от конкретного посетителя или от времени суток. 
РНР-процессор 
Web-сервер 
Ф 
WebPage.php 
Web-браузер 
1) Web-браузер передает Web-серверу HTTP-запрос на Web-страницу с РНР-кодом. 
2) Web-сервер передает запрос Web-страницы РНР-процессору. 
3) PHP-процессор находит и извлекает Web-страницу. 
4) PHP-процессор выполняет PHP-операторы, содержащиеся на странице 
(т.е. в файле с расширением .php). 
5) PHP-процессор передает новую Web-страницу Web-серверу. 
6) Web-сервер передает созданную РНР-обработчиком страницу Web-браузеру. 
Рис. 10.1. Обработка РНР-страницы

492 Глава 10. РНР4 
Другими словами, технология РНР дает возможность превратить Web-сайт из на- 
бора статических Web-страниц в выполняемое на сервере приложение, интерфейс 
которого представляет собой Web-страницы. 
Предположим, например, что на Web-странице необходимо вывести текущее 
время. Если страница будет статической (использующей стандартный язык 
HTML), потребуется потратить целый рабочий день на обновление страницы 
(один раз в минуту), чтобы при просмотре страницы посетителем на ней отобража- 
лось текущее время. За счет использования оператора РНР, который динамически 
записывает текущее время на Web-страницу после запроса ее посетителем, вы 
заста- 
вите PHP-процессор автоматически обновлять время на странице. После получения 
запроса PHP-процессор на основе Web-страницы, содержащейся в файле, создает 
страницу, в которой находятся не PHP-операторы (т.е. статическое содержимое), 
и помещает в нее время, возвращаемое встроенной функцией РНРdate(). 
В то время как клиентские языки сценариев (например, JavaScript) выполня- 
ются Web-браузером, РНР представляет собой серверный язык, т.е. РНР-сцена- 
рий, внедренный на Web-страницу, выполняется Web-сервером (а не Web-браузе- 
ром). В техническом смысле РНР является межплатформенным серверным 
языком сценариев, что означает: 
• Большинство PHP-кода может выполняться под управлением различных 
операционных систем, в частности, Linux, Mac OS, RISC OS, Unix и 
Windows, без необходимости внесения изменений на Web-сервере. 
PHP-операторы могут внедряться на Web-страницу совместно или отдельно 
от HTML-, XHTML- и XML-дескрипторов, которые используются для оп- 
ределения страницы для Web-браузеров. 
• При запросе Web-браузером страницы с внедренными РНР-операторами, 
Web-сервер передает запрос РНР-процессору. PHP-процессор находит зап- 
рошенный файл, заменяет операторы результатом их выполнения (если ре- 
зультат выполнения имеется) и передает полученную страницу Web- 
серверу. Web-сервер передает данные, полученные от РНР-процессора, 
Web-браузеру посетителя. 
Изящество использования РНР заключается в том, что Web-браузер не рабо- 
тает с РНР-операторами, внедренными на Web-страницу. В отличие от JavaScript, 
VBScript, JScript или других клиентских языков сценариев, при написании РНР- 
сценариев вам не нужно беспокоится о поддержке Web-браузером языка РНР. 
Для создания страницы, использующей РНР, необходимо просто вставить на 
страницу PHP-команды, которые должны выполняться в HTML-коде страницы, 
и присвоить файлу Web-страницы имя с расширением, связанным с РНР-про- 
цессором (например, .php). При запросе Web-браузером файла Web-страницы с 
расширением . php Web-сервер знает, что документ сначала должен быть передан 
на обработку РНР-процессору, а затем результаты, полученные от РНР-процессо- 
ра, передаются Web-браузеру с целью визуализации. PHP-процессор выполняет 
операторы РНР и гарантирует, что переданная Web-серверу Web-страница (кото- 
рая в конечном счете передается Web-браузеру) содержит дескрипторы, поддер- 
живаемые Web-браузером.

Глава 10. РНР4 493 
История PHP 
Изучив достаточно короткую историю РНР, можно понять, каким образом ис- 
токи языка влияют на его современное использование. Когда-то, в 1994 году, 
Расмус Лердорф (Rasmus Lerdorf) написал несколько сценариев на Perl, позволя- 
ющих определять, кто посещает его личную Web-страницу. Со временем все 
большее и большее количество Web-дизайнеров стали интересоваться его сцена- 
риями, и весной 1995 года Лердорф обнародовал их в виде пакета с названием 
Personal Home Package Tools (отсюда и появилось название РНР). Первоначаль- 
ный пакет средств РНР, который Лердорф называл "оболочкой для CGI, напи- 
санной на Perl", содержал в своем составе несколько серверных макросов и про- 
стых утилит, например, счетчик посещений и гостевая книга. 
В связи с растущим интересом к Perl-сценариям, Лердорф переписал свой 
синтаксический анализатор и создал средство обработки результатов HTML- 
форм, которое он назвал интерпретатором форм (Form Interpreter, FI), а также 
ввел поддержку баз данных mSQL. Комбинированный пакет, выпущенный в свет 
в середине 1995 года, получил имя PHP/FI или РНР2. Вскоре после этого Web- 
разработчики начали использовать пакет для решения все более и более слож- 
ных задач. Политика "открытого кода" позволила группе разработчиков под ру- 
ководством Зива Сураски (Zeev Suraski) и Энди Гутманса (Andi Gutmans) в 1997 
года снова переписать PHP-процессор. Созданный ими код стал основой для 
РНРЗ (т.е. РНР версии 3), который был принят более чем 1 000 000 Web-сайтов по- 

мимо других серверных языков сценариев, в частности, активных серверных страниц 

(Active Server Pages, ASP) компании Microsoft и ColdFusion компании Allaire. 
Последняя версия РНР (РНР4, т.е. РНР версии 4) распространяется бесплат- 
но (на многих Web-сайтах, в том числе http://www.PHP.net) и имеет открытый 
кой, т.е. вы при желании можете выгрузить исходный код РНР и посмотреть, что 
делается "за кулисами". Тем не менее, бесплатное распространение и открытость 
исходного кода — это не основная причина того, что РНР в настоящее время ис- 
пользуется на более чем 6 000 000 доменах. РНР стал главным серверным язы- 
ком сценариев для многих Web-серверов по следующим причинам: 
• Язык РНР может выполняться как на платформе Windows NT, так и на 
платформе Unix, что позволяет создавать сложные Web-сайты практически 
для любой платформы. 
• Язык РНР обладает простым и в то же время элегантным объектно-ориен- 
тированным синтаксисом, описанным во многих источниках (как в книгах 
различных авторов, так и в сети Internet). Более того, конструкции языка 
РНР знакомы многим разработчикам, работающим с процедурными или 
объектно-ориентированными языками программирования. Таким образом, 
если вы знаете С, C + +, Java, Pascal или Visual Basic, написание сценариев 
и функций РНР не представит для вас больших трудностей — вам не будет 
казаться, что вы изучаете абсолютно новый язык программирования. 
• Язык РНР оптимизирован для Web-разработчиков, позволяя выполнять 
сложные задачи с помощью вызовов нескольких функций (вставленных в

49 4 Глава 10. РНР4 
HTML-код Web-страницы), что на других языках может быть сделано только 
при глубоких знаниях языка и с помощью достаточно громоздкого кода. 
• ЯзыкРНР очень быстр. В отличие от активных серверных страниц, кото- 
рые приводят к снижению производительности IIS-сервера при одновре- 
менной обработке нескольких сложных ASP-страниц, PHP-страницы могут 
компилироваться, оптимизироваться и кэшироваться в памяти, что позво- 
ляет серверу одновременно обрабатывать большое количество РНР-страниц 
без существенного снижения производительности. 
Загрузка и установка РНР 
Цель этой главы заключается в том, чтобы обучить создавать динамическое 
Web-содержимое. Тем не менее, перед использованием РНР вам понадобится ра- 
ботающий Web-сервер, собственно РНР и (возможно, система управления базами 
данных (СУБД) на основе SQL), например, MySQL. Рассмотрение загрузки и ус- 
тановки Web-сервера, РНР и MySQL на нескольких платформах выходит за рам- 
ки данной книги. Фактически, за вас все эти операции выполняет Internet-про- 
вайдер. Тем не менее, в некоторых случаях для внедрения РНР и MySQL вашим 
провайдером вам, возможно, придется обосновать необходимость установки и 
показать насколько дешево (бесплатно) и легко можно установить необходимые 
приложения. 
Ели вы работаете на платформе Linux или Unix, вашим Web-сервером, скорее 
всего, будет Apache, который ваш Internet-провайдер бесплатно выгрузил с сайта 
компании Apache Software Foundation (http://www.apache.org). Если же вы ра- 
ботаете на платформе Windows (NT/2000/XP), вероятнее всего, вашим сервером 
будет IIS-сервер компании Microsoft. Если провайдер не установил IIS-сервер 
при установке операционной системы Windows, необходимый пакет версии 4.0 
можно выгрузить как часть пакета обновлений NT Option Pack с сайта компании 
Microsoft (http://www.microsoft.com/ntserver/nts/downloads/recommended/ 
NT4OptPk/). (Обратите внимание, что на компакт-дисках большинства операци- 
онных систем Windows, в частности, Windows 2000 Professional, Windows 2000 
Server и Windows XP Professional содержится последняя версия IIS-сервера.) 
После установки программного обеспечения Web-сервера ваш Internet-провай- 
дер может выгрузить и установить РНР. При использовании операционных сис- 
тем Linux и Unix провайдер должен будет не только выгрузить исходный код 
РНР, но и выполнить его компиляцию с помощью компилятора языка ANSI С, 
например, дсс или д++, который доступен для выгрузки на сайте GNU (http:// 
www.gnu.org/gnulist/production/). Последнюю ВерСИЮ РНР МОЖНО наЙТИ на 
сайте http://www.php.net. Рекомендуем выгрузить как исходный код РНР, так и 
документацию, в которой описан процесс установки РНР и настройки его кон- 
фигурации. 
Настройка конфигурации РНР для IIS-сервера под управлением операцион- 
ной системы Windows NT намного проще, чем компиляция и настройка конфи- 
гурации РНР для Web-сервера Apache под управлением операционной системы 
Linux или Unix. Зайдите на Web-сайт РНР (http://www.php.net) и щелкните на

Глава 10. РНР4 495 
ссылке Download. В разделе Win32 Binaries Web-страницы загрузки щелкните 
на ссылке загрузки архивного файла РНР, а затем на ссылке программы установ- 
ки РНР (на момент написания этой книги это были соответственно пакеты РНР 
4.0.6 zip Package и РНР 4.0.6 installer). Сохраните оба файла в одном и 
том же каталоге (например, C:\PHP) Web-сервера. Помните: РНР - это сервер- 
ный язык сценариев. Поэтому он устанавливается и выполняется на сервере. 
Далее разархивируйте сжатый файл РНР (на момент написания книги, 
php-4.o.6-win32.zip) и запустите программу установки РНР IstallShield (на мо- 
мент написания книги, php406-instaiier.zip). После этого программа установ- 
ки предложит ввести путь к каталогу, в котором вы разархивировали файлы РНР- 
процессора, и каталог и версию IIS-сервера (или сервера Personal Web Server), 
для 
которого добавляется поддержка РНР. После выполнения всех перечисленных 
выше операций программа установки для завершения установки предложит пере- 
грузить NT/2000/ХР-сервер. Если в процессе установки возникли проблемы или 
при необходимости ручной установки, распечатайте и изучите содержимое файла 
i n s t a i i . txt, находящегося в каталоге РНР. 
Программа установки РНР в операционной системе Windows устанавлива- 
ет CGI-версию РНР и настраивает Web-сервер для отправки РНР-процессору 
Web-страниц, 
файлы которых имеют расширение .php(а не .htmили .html). PHP4 для операционных 
сис- 
тем Windows имеет две разновидности: исполняемый CGI-файл (php.exe) и несколько 
моду- 
лей серверного интерфейса прикладных программ (Server Application Program 
Interface, SAPI) 
(например, p h p 4 i s a p i . d l l для IIS-сервера). Несмотря на то что 
SAPI-разновидность РНР4 
обеспечивает значительное улучшение производительности по сравнению с 
CGI-версией, 
модули SAPI являются достаточно новыми и (на момент написания книги) считается, 
что они 
не достигли качества конечного продукта. Поэтому перед выполнением установки 
SAPI-вер- 
сии РНР в ручном режиме прочтите файл i n s t a l l . t x t , который можно 
найти в каталоге 
РНР. В нем описаны все возможные ошибки, с которым вы можете столкнуться в 
процессе 
установки. Если вам необходим надежный и готовый к работе Web-сервер, 
установите CGI- 
версию РНР и пользуйтесь ею до тех пор, пока SAPI-версия не будет полностью 
протестиро- 
вана и сертифицирована для использования в качестве основной версии (см. 
Web-сайт 
http: //www.php.net). 
После установки РНР протестируйте ее правильность с помощью следующей 
простой Web-страницы: 
<html> 
<body> 
<?php phpinfo () ;?> 
</body> 
</html> 
Например, сохраните приведенный выше HTML-код на Web-сервере в файле 
с именем test.php (в предположении, что в процессе установки для Web-стра- 
ниц, обрабатываемых PHP-процессором, было выбрано расширение .php). Затем 
с помощью Web-браузера откройте страницу test.php. На экране должны по- 
явиться результаты, подобные показанным на рис. 10.2. 
Если все работает правильно, РНР вернет информацию о текущей версии 
процессора, конфигурации РНР, среде и переменных. Если окно браузера оста- 
лось пустым, или если в окне выводится сообщение об ошибке, установка РНР

496 Глава 10. РНР4 
была выполнена с ошибками или PHP-процессор не может найти запрашивае- 
мую Web-страницу (с расширением .php). Если РНРустановить не удалось, про- 
чтите две последних страницы файла instaii.txt. Там вы найдете информацию 
и о других возможных проблемах. Если в файле instaii.txt нет всей необходимой 
информации, обратитесь к странице поддержки на Web-сайте http://www.php.net. 
phpinfoQ - Microsoft Internet Explorer 
Файл Правке Вия : Избранное Сдраис Qnp 
Адрес j . ] http://html-webdesign/Chepter10/Fig10-02 phpA 
System 
Build Date 
Server API 
Virtual Directory Support 
Configuration File (php.ln!) Path 
PHP API 
PHP Extension 
Zend Extension 
Debug Build 
Thread Safety 
Registered PHP Streams 
Windows 9x HTML&WEBDESIGN -1.10 
May 28 2003 iS:06:0S 
CGI/FastCGi 
enabted 
C:\WlfClOWS\php.ini 
20020918 -: 
2002СИ29 
20021010 
no ;: 
enabted 
php, http, ftp, compress .2ib 
This program makes use of the Zend Scrptjng Language Engine: 
Zend Enghe vl.3.0, Copyright (с) 1998-2СГО Zend Tecrnofogies 
LlL 
Рис. 10.2. Web-страница, возвращаемая PHP-процессором при выполнении 
Web-страницы с вызовом функции phpinfo() 
Начальный и конечный дескрипторы РНР 
При получении PHP-процессором файла для обработки операторы, предназ- 
наченные для обработки процессором, должны быть отделены от операторов, ко- 
торые предназначены для обработки Web-браузером. Язык РНР имеет три на- 
чальных и конечных дескриптора, с помощью которых можно выделить код для 
выполнения РНР-процессором: 
<?php <php операторы> ?> 
<? <php операторы> ?> 
<script language="php"> <php операторы> </script> 
Возможно, вы уже знакомы с третьей парой дескрипторов РНР-кода 
(<scriptx/script>), поскольку они идентичны дескрипторам, используемым 
для выделения клиентских сценариев, внедренных в HTML-код Web-страницы. 
Указав, что в качестве языка сценариев используется РНР (а не, например, 
JavaScript или VBScript), вы говорите, что операторы между начальным и конеч- 
ным дескрипторами должны выполняться РНР-процессором, а не браузером. Та- 
ким образом, любой из начальных дескрипторов РНР (<?php, <? или <script 
ianguage=MphpM>) указывает Р HP-процессору выполнять последующие операторы

Глава10.РНР4 497 
HTML-кода Web-страницы. PHP-процессор будет выполнять все операторы до 
соответствующего конечного дескриптора (?> или </script>). 
Приведенный ниже код использует каждый из наборов начальных и конечных 
дескрипторов РНР для генерации HTML-кода страницы, которая показана на 
рис. 10.3. Обратите внимание, что ни один из начальных дескрипторов РНР 
(<?php, <?) не имеют "закрывающего" знака больше (>), которые присутствуют в 
конце нормальных HTML-дескрипторов. (То есть начальные дескрипторы РНР 
имеют форму <?php, <?, а не <?php>, <?>.) Аналогично, конечный дескриптор 
РНР ?> це имеет "открывающего" знака меньше (<): 
<html> 
<head> 
<Ъ1Ъ1е>Начальный и конечный дескрипторы 
<body bgcolor="#ADD8E6M> 
<centerXhl>HTML &amp; Web Design Tips &amp; Techniques</hlX/center> 
<?php echo "<pXhr/>"; 
echo "Текущая дата: "; ?> 
riDate C'l, F d, Y. ") ; 
<br /Xbr 
<script language="php"> 
echo gmdate("h:i : s A"); 
echo "</p>"; 
</script> ... . 
<hr /> 
PHP-процессор игнорирует заголовочную часть Web-страницы, 
данный текст и дескриптор горизонтальной линейки, находящийся 
выше этого текста. PHP-процессор просто передает все это Web-б] 
для визуализации. 
</body> 
</html> 
Файл Правка Лоис* 
ODOCTVPE html PUBLIC "-//\1Х//[П0 XHTML 1.8 TransitionalZ/EN'1 
"http://uuu.u3.org/TR/xhtnill/DTD/xlltmll-transitional.dtcl"> 
<ht«l xmlns="http://uuu.u3.or9/1933/xhtml"> 
<htnl> 
<head> 
<title>Ha4anbHblfi и конечный дескрипторы PHP</title> 
</head> 
<body bgcolor="l*flDD8EG"> 
<center><hl>HTHL Samp; bleb Design Tips Samp; Techniques</hl></center> 
<p><hr />Текущая дата: 
Wednesday, October 08, 2003.<br /Xbr />Текуцее время: 
94:35:13 PH</p> 
<hr /> 
PHP-процессор игнорирует заголовочную часть ldeb-страницы, 
данный текст и дескриптор горизонтальной пинейки, находящийся 
выше этого текста. PHP-процессор просто передает Dee это ЫеЬ-браузеру 
для визуализации. 
</body> 
</html> 
ш :... ........,,. .. . ........ :.. . . . . . . л 
Рис. 10.3. HTML-код Web-страницы, сгенерированной РНР-процессором

498 Глава 10. РНР4 
Обратите внимание, что Web-страница, передаваемая РНР-процессором 
Web-северу с целью последующей передачи ее браузеру, содержит HTML-деск- 
рипторы и текст, а не опбраторы, предназначенные для выполнения РНР- 
процессором. (Код Web-страницы, полученной Web-браузером от Web-сервера 
можно просмотреть, выбрав в меню Internet Explorer пункт View | Source 
(Вид | В виде HTML) или в меню Netscape Navigator пункт View | Page Source 
(ВИД | HTML-код страницы).) 
Синтаксис РНР 
РНР-сценарии в HTML-коде Web-страницы, приведенном в конце предыду- 
щего раздела, демонстрируют два важных момента. Во-первых, РНР-сценарии 
можно внедрять в HTML-код за счет определения кода сценариев между началь- 
ным и конечным дескрипторами РНР (<?...?> или <?php...?>) или начальным и 
конечным HTML-десКрИПТОраМИ Сценария (<script language="php">...</script>). 
Во-вторых, в РНР-сценарии можно внедрять HTML-дескрипторы. При этом они 
заключаются в кавычки и отмечаются PHP-оператором echo. Оператор echo "вы- 
водит" HTML-дескрипторы в HTML-код Web-страницы, которую РНР-процессор 
передает Web-серверу. Например, следующая строка вставляет в HTML-код Web- 
страницы дескриптор горизонтальной линейки (<hr>): 
<?php echo "<hr>" ; ?> 
Использование терминатора для операторов - точки с запятой (;) 
Независимо от того, внедряется ли сценарий в HTML-код (XHTML- или 
XML-код) самой Web-страницы или находится в отдельном файле, каждый опе- 
ратор в РНР-сценарии (включая последний) должен завершаться символом точ- 
ки с запятой (;). Таким образом, синтаксис PHP-сценария, состоящего из одно- 
го оператора будет выглядеть следующим образом: 
<начальный дескриптор сценарияХРЯР-олерагор>;<конечный дескриптор сценария> 
а синтаксис сценария из нескольких операторов будет иметь следующий вид: 
<начальный дескриптор сценария> <РНР-оператор>; <РНР-оператор>; 
<РНР-оператор>; <послёднийРНР-опвратор>; <конечный дескриптор сценария> 
Как видно из приведенных примеров синтаксиса, в одной строке можно раз- 
мещать несколько PHP-операторов, при этом каждый из них обязательно должен 
завершаться символом точки, с запятой (;). Тем не менее, чтобы код выглядел 
более читабельным, рекомендуется в каждой строке помещать по одному опера- 
тору (как было продемонстрировано в коде из предыдущего раздела). 
Использование управляющего символа обратной косой черты (\) 
Как говорилось в предыдущем разделе, HTML-дескрипторы можно внедрять в 
PHP-сценарий за счет заключения их в кавычки (мм) после PHP-оператора echo. 
Кроме того, оператор echo можно использовать для вывода на страницу текста, 
заключая его в кавычки после самого оператора. Тем не менее, следующий код 
приведет к генерации РНР-процессором сообщения об ошибке: 
<?php echo "<p>PHP - это чистой воды "бомба" !</р>" ; ?>

Глава 10. РНР4 499 
PHP будет считать, что кавычка (") перед буквой б в слове "бомба" говорит 
об окончании текста, который оператор echo должен поместить на страницу, а 
оператора бомба не существует. 
Для включения кавычки (или другого символа, который должен просто встав- 
ляться на страницу, а не интерпретироваться PHP-процессором) в текст, сам по 
себе заключенный в кавычки, перед кавычкой (или символом) следует поставить 
обратную косую черту (\). Например, чтобы на Web-странице выводился текст 
"РНР - это чистой воды "бомба"!", предыдущий оператор потребуется пе- 
реписать в виде: 
<?php echo "<p>PHP - это чистой воды \"бомба\" !</р>"; ?> 
Вставка комментариев в РНР-сценарий 
В РНР существуют три символа, которые позволяют помещать в код коммен- 
тарии: "#", "//" и "/*...*/". Вставка комментариев в PHP-сценарии — это 
весьма полезная привычка. Несмотря на то что комментарии игнорируются 
PHP-процессором, они напоминают вам (и другим людям), почему определен- 
ные фрагменты сценария были написаны именно таким образом, или же говорят 
о назначении сценария в целом. Кроме того, комментарии могут использоваться 
в процессе разработки для обнаружения операторов, вызывающих ошибки РНР- 
процессора. Комментируя отдельные фрагмент кода (т.е. указывая процессору 
игнорировать эти фрагменты как комментарии) можно добиться "устранения" 
ошибки. Затем путем постепенного вывода из комментариев строк кода сцена- 
рия до момента повторного появления ошибки процессора можно определить 
строку, в которой эта ошибка происходит. Это будет последняя строка, выведен- 
ная из комментариев, до появления ошибки. 
Приведенный ниже код представляет собой пример использования каждого 
из трех дескрипторов комментариев для вставки комментариев в РНР-код: 
<html> 
<body bgcolor="#ADD8E6"> 
<hlXcenter>HTML and Web Design Tips & Techniques</centerX/hl> 
Этот сценарий предназначен для вывода на экран текущей системной даты 
<?echo gmDate("l, Fd, Y.") ; 
# Знак "решетки" (#) позволяет вставлять одну строку комментария. 
//То же самое относится и к двойной косой черте (//) . При использовании 
// дескриптора однострочного комментария (// или #) его необходимо 
// помещать в каждую строку комментария. 
/* При необходимости вставки многострочного комментария без помещения 
символов # или / / в каждой строке используется оператор комментария 
языка С /*. После него РНР процессор будет игнорировать все вплоть до 
конечного оператора комментариев */ 
echo "<br>"; 
?> 
</body> 
</html>

500 Глава10.РНР4 
Кстати, оператор gmDate(Mi, F d, Y.") в приведенном выше примере ука- 
зывает процессору вызвать встроенную функцию gmDate(), которая определяет 
текущие дату и время по Гринвичу. Буквы, передаваемые функции в качестве ар- 
гументов, представляют собой строку форматирования, в которой определенные 
специальные символы (в приведенном примере, i, F, d и Y) указывают, какие ча- 
сти даты и времени возвращать. Функция gmDate() возвращает без изменений 
все неспециальные символы (используемые в приведенном примере для пунктуа- 
ции запятая (,) и точка (.)) • На рис. 10.4 приведен HTML-код, генерируемый 
PHP-процессором при выполнении приведенного выше кода. 
Обратите внимание, что в HTML-коде Web-страницы помимо содержимого и 
HTML-дескрипторов находится только HTML-комментарий. РНР-комментарии, 
несмотря на то, что они присутствуют в файле Web-страницы, игнорируются 
PHP-процессором и не передаются Web-серверу в Web-странице, возвращаемой 
серверу после обработки процессором. 
Файл Правка Подск .превко 
<html> 
<body bgcolor="«ADD8E6"> 
<h1Xcenter>HTML and ИеЬ Design Tips & Techniques</centerX/hl> 
t -- 
Этот сценарий предназначен для вывода на экран текущей системной даты 
<hr>Uednecday, October 88, 2003.<hr> 
</body> 
</ht«tl> 
u 
Рис. 10.4. HTML-код Web-страницы, генерируемый PHP-сценарием с комментариями 
Переменные 
PHP накладывает очень мало ограничений на имена используемых перемен- 
ных. Имя переменной в РНР может содержать неограниченное число символов. 
Тем не менее, все имена должны начинаться со знака доллара ($), за которым 
должна следовать буква или символ подчеркивания О- Остальные символы в 
имени могут быть буквами, цифрами или символами подчеркивания. Примене- 
ние других специальных символов, например, +, -, /, *,&,", @ и т.д., не разре- 
шается. Следует иметь в виду, что имена переменных в РНР чувствительны к ре- 
гистру, т.е. две следующих строки кода создают две различных переменных: 
$username = "Konrad King" 
$userName = "Andy Anderson" 
В PHP-сценариях используются четыре основных типа переменных: целочис- 
ленные, с плавающей точкой (которые также называются вещественными или 
двойной точности), строковые и массивы. При использовании в сценарии пере- 
менных они должны быть предварительно объявлены. (Фактически, поскольку в 
языке РНР нет операторов объявления переменных, единственный способ их

Глава10.РНР4 501 
"объявить" (т.е. создать) заключается в присвоении значения новому имени пе- 
ременной или вызов конструктора array о для создания пустого массива.) Во 
время присвоения переменной значения- РНР не только ассоциирует с перемен- 
ной определенное пространство в памяти, но и на основании присвоенного зна- 
чения определяет ее тип данных. Например, следующий сценарий создает пере- 
менную каждого из четырех типов, присваивает им значения и выводит 
значения на экран на Web-странице, показанной на рис. 10.5: 
<html> 
<body bgcolor="#ADD8E6"> 
<centerXhl>HTML &amp; Web Design Tips &amp; Techniques</hlX/center> 
<hr /> 
<?php 
// Создать строковую переменную 
$author___name = "Konrad King" ; 
// Создать целочисленную переменную 
$family__member_count = 3 ; 
// Создать массив 
$pets_names [0] = "Samantha"; 
$pets_names [1] = "Caesar"; 
$pets_names[2] = "Floppy"; 
// Создать переменную для хранения значения с плавающий точкой 
// (т.е. вещественную переменную или переменную двойной точности) 
$years__in_Nevada = 7 . 5 ; 
// Вывести все переменные на Web-страницу 
echo "$author__narne, автор множества книг по компьютерной инженерии, " ; 
echo "проживаем в штате Невада на протяжении $years_in__Nevada лет. "; 
echo "<br />Его семья насчитывает $family_member_count человек, "; 
echo "а кроме того, троих животных с кличками: " ; 
echo "$pets__names [0] , $pets__names [1] и $pets__names [2] ; 
</body> 
</html> 
I Вывод значений PHP-переменных не Web странице - Microsoft Internet Explorer 
Древко Вид |#з6р&ниое С§рвип Оправке 
] httpV/html^webdes!gn/Chapter10/Figure10-05.php4 
HTML & Web Design Tips & 
Techniques 
Konrad King, автор множества книг по компьютерной инженерии, проживает 
в штате Невада на протяжении 7.5 лет. 
Его семья насчитывает 3 человек, а кроме того, троих животных с кличками: 
Samantha, Caesar н Floppy 
Рис. 10.5. Значения РНР-переменных, выведенных на Web-странице

502 Глава 10. РНР4 
Операции 
Основное назначение PHP-операции (PHP operator) заключается в изменении 
значения переменной или работа со значением переменной или литералом. В 
приведенном выше примере в PHP-сценарии была использована операция при- 
сваивания, т.е. знак равно (=), для присвоения начального (строкового, целочис- 

ленного, вещественного) значения каждой переменной, созданной в РНР-сцена- 
рии. В языке РН Р существует четыре основных типа операций: 
• Операции присваивания. Эти операции используются для присвоения значе- 
ния переменной или изменения текущего значения переменой за счет вы- 
полнения арифметических операций иди конкатенации строк. Операции 
присваивания описаны в таблице 10.1. 
Таблица 10.1. Операции присваивания в РНР 
Операция Назначение Пример 
/=
%= 
Присвоение значения 
Сложение значения, которое находится 
после знака равно (=), с текущим 
значением переменной 
Вычитание значения, которое находится 
после знака равно (=), из текущего 
значения переменной 
Деление текущего значения переменной 
на (ненулевое) значение, которое 
находится после знака равно (=) 
Умножение текущего значения переменной 
на значение, которое находится после 
знака равно (=) 
(Остаток от деления) - Деление текущего 
значения переменной на значение, которое 
находится после знака равно (=), и сохра- 
нение в переменной остатка от деления 
(Конкатенация) - Конкатенация строкового 
или числового значения, которое находится 
после знака равно (=), с текущим 
значением строковой переменной 
$уапаЫе=выражение 
$а=5; $Ь=$а+7; $c=6*$d 
$уапаЫе+=выражение 
$а=$а+5; 
то же что и $а+=5 
$уапаЫе-=выражение 
$а=$а-10; 
то же что и $а-=10 
$уапаЫе/=ненулевое_выражение 
$а=$а/10; 
то же что и $а/=10 
$уапаЫе*=выражение 
$а=$а*25; 
то же что и $а*=25 
$уапаЫе%=выражение 
$а=$а%15; 
то же что и $а%=15 
$variable.="cTpoKOBoe значение" 
$уапаЫе.=числовое значение 
$ а = $ а . " b e d " ; 
то же что и $a.="bcd" 
Арифметические операции. Эти операции используются для выполнения 
(как и можно было ожидать) арифметических операций (сложения, вычи- 
тания, умножения и/или деления) в выражении, содержащем две или 
большее количество переменных или чисел. Арифметические операции 
описаны в таблице 10.2.

Глава 10. РНР4 5 03 
Таблица 10.2. Арифметические операции в РНР 
Операция Назначение . Пример 
+ Сложение выражение + выражение 
Вычитание выражение - выражение 
* Умножение выражение * выражение 
/ Деление выражение / выражение 
% Остаток от деления выражение % выражение 
• Операции сравнения. Эти операции используются для выполнения сравне- 
ния одного выражения, переменной или литерала с другим. Как правило, 
операции сравнения встречаются в условных операторах (например, if и ifeise) 
и циклах (while и for). Операции сравнения описаны в таблице 10.3. 
Таблица 10.3. Операции сравнения в РНР 
Операция 
<
>
<= 
>= 
== 
=== 
!= 
Назначение 
Меньше 
Больше 
Меньше или равно 
Больше или равно 
Двойной знак равно - Равно 
Тройной знак равно - Идентично 
Не равно 
Пример 
выражение < выражение 
выражение > выражение 
выражение <= выражение 
выражение >= выражение 
выражение == выражение 
выражение === выражение 
выражение != выражение 
Логические операции. Эти операции используются для выполнения сравне- 
ния двух булевых значений (т.е. значений "истина" и "ложь"). Как прави- 
ло, логические операции применяются для сравнения результатов двух вы- 
ражений в условных операторах и циклах. Логические операции описаны в 
таблице 10.4. 
Таблица 10.3. 
Операция 
&&, and 
II, or 
I 
Логические операции в РНР 
Назначение 
и
Или 
Не 
Пример 
выражение 
выражение 
выражение 
&& выражение 
|| выражение 
Условная и циклическая обработка 
PHP-сценарий представляет собой последовательность инструкций, которые 
должен выполнить PHP-процессор для выполнения определенной задачи. Все 
простые сценарии, рассмотренные до сих пор в этой главе, выполнялись процес- 
сором от первого оператора до последнего в строгом порядке. С усложнением 
сценариев возникает необходимость в выполнении одного набора операторов, 
если определенное условие соблюдается и, возможно, другого набора в против-

5 04 Глава 10. РНР4 
ном случае. Другими словами, возникает необходимость, чтобы процессор при- 
нимал решения и действовал в соответствии с принятыми решениями. При на- 
писании сценариев для принятия процессором решений, вы реализуете условную 
обработку. Другими словами, на основании одного или нескольких условий про- 
цессор будет выполнять определенные операторы. 
Для принятия решений сценарии должны выполнять проверку определенного 
рода. Например, один сценарий может проверять правильность введенного 
посетителем пароля, а второй — верное ли количество цифр ввел посетитель в 
номере телефона. Для выполнения таких проверок сценарий будет использовать 
приведенные выше операции сравнения. Операции сравнения позволяют опреде- 
лить, каким образом одно значение соотносится с другим. Другими словами, с 
помощью операций сравнения PHP-процессор проверяет равно, больше или 
меньше одно значение другого. При выполнении процессором операций сравне- 
ния для сравнения двух значений результат выражается значениями true и 
false, Т.е. Значения соответствуют (true) ИЛИ Не соответствуют (false). 
Тесно связана с процессом принятия решений в сценарии и возможность по- 
вторения выполнения одного или нескольких операторов определенное количе- 
ство раз или до возникновения известного состояния. Оператор while позволяет 
организовать цикл, выполняемый процессором до тех пор, пока определенное 
условие соблюдается. Оператор for дает возможность организовать цикл, в кото- 
ром PHP-процессор выполняет набор операторов определенное число раз. 
Использование оператора if для проверки условия 
Оператор if позволяет использовать операции сравнения РНР для указания 
PHP-процессору на необходимость проверки условия, а затем выполнения опера- 
торов, основываясь на результатах проверки. Если проверка дает true, процессор 
будет выполнять операторы, находящиеся после if. В противном случае, если 
проверка дает false, процессор пропускает операторы после if. Формат опера- 
тора if выглядит следующим образом: 
if (условие) 
оператор; 
Обратите внимание, что в конце строки if (условие), с которой начинается 
оператор if, точка с запятой (;) не ставится, поскольку оператор продолжается 
на следующей строке. 
При использовании оператора if для условной обработки в некоторых случа- 
ях при соблюдении условия выполнятся только один оператор; в других же ситу- 
ациях выполняемых в случае соблюдения условия операторов может быть не- 
сколько. Когда сценарий указывает процессору ВЫПОЛНИТЕ ТОЛЬКО ОДИН оператор, 
следующий за if, используется простой оператор: 
if ($state == "са") 
echo "Был введен код штата Калифорния."; 
Чтобы процессор при соблюдении условия выполнял несколько операторов, их 
необходимо сгруппировать с помощью фигурных скобок ({}). Операторы, заключен- 
ные в скобки, называются составным оператором, пример которого показан ниже:

Глава10. РНР4 505 
if ($username != "Konrad") 
{ 
header("Location: http://NVBizNet.com/htmlwdtt/InvalidUser.htm"); 
exit 
Запоминание терминов "простой оператор" и "составной оператор" не 
является обязательным, тем не менее, важно знать, что связанная группа 
операторов долж- 
на заключаться в фигурные скобки ( { } ) . 
В двух предыдущих примерах процессор использует операторы if для опреде- 
ления необходимости выполнения одного или нескольких операторов. В первом 
примере, если условие соблюдается, процессор помещает на Web-страницу текст. 
Аналогично, во втором примере, если условие соблюдается, т.е. значение пере- 
менной $usemame не равно "Konrad", процессор перенаправляет Web-браузер на 
новую Web-страницу. В обоих примерах, если условие не соблюдается, процессор 
пропускает (т.е. не выполняет) операторы, содержащиеся в блоке if. Тем не ме- 
нее, в большинстве случаев требуется, чтобы при соблюдении условия выполнял- 
ся один блок операторов, а при несоблюдении — другой блок. Операторы, кото- 
рые должны выполнятся в случае, когда условие не соблюдается, указываются в 
сценарии в блоке else. Формат оператора else выглядит следующим образом: 
if (условие) 
оператор; 
else 
оператор; 
В следующем сценарии оператор if-eise используется для проверки значе- 
ния переменной $username. Если значение равно "Konrad", сценарий перенап- 
равляет посетителя на страницу weicome.htm, в противном случае будет открыта 
страница InvalidUser.htm: 
if ($username != "Konrad") 
{ 
header ("Location: Weicome.htm") ; 
exit 
1 
else 
{ 
header("Location: http://NVBizNet.com/htmlwdtt/InvalidUser.htm"); 
exit 
} 
Помимо применения оператора if-eise для выполнения одного набора опе- 
раторов при соблюдении условия и другого набора при несоблюдении условия в 
некоторых случаях возникает необходимость проверки нескольких связанных ус- 
ловий или же многократной проверки одного и того же условия. Например, 
предположим, что сценарий должен определять междугородний телефонный код 
посетителя путем сравнения значения переменной $city с несколькими города- 
ми, телефонные коды которых сценарию известны. Следующий оператор ис- 
пользует последовательные операторы if-eise для иллюстрации упрощенного 
примера выполняемой процессором обработки:

506 Глава 10. РНР4 
if ($city == "New York") 
$areaCode = 212; 
elseif ($city — "Houston") 
$areaCode = 2 81; 
elseif ($city == "Phoenix") 
$areaCode = 602; 
elseif ($city == "Seattle") 
$areaCode = 206; 
else 
$areaCode = "**UNKNOWN**"; 
При выполнении PHP-процессором приведенного выше оператора if сначала 
сценарий проверяет, является ли город посетителя Нью-Йорком (New York). В 
случае положительного результата сравнения переменной $areaCode присваива- 
ется значение 212. Если посетитель живет не в Нью-Йорке, процессор выполня- 
ет следующий оператор if-eise и определяет, является ли местом жительства 
посетителя Хыбстон (Houston). Подобная обработка будет проводиться до тех 
пор, пока PHP-процессор не определит город или дойдет до последнего опера- 
тора else. Если соответствие для города посетителя найдено не будет, перемен- 
ной $areacode будет присвоено значение "**UNKNOWN**" (ТО есть, "НЕИЗВЕСТ- 
НЫЙ"). 
Приведенная в предыдущем примере структура оператора if применяется для 
выполнения оператора (или группы операторов) при проверке на неравенство 
(значение переменной меньше, больше или не равно другому значению) или 
при необходимости проверки значений нескольких связанных между собой пере- 
менных. Для проверки значения одной переменной на равенство числу или 
строке РНР предоставляет более подходящий для этой цели оператор switch. 
Например, следующий оператор switch более очевиден и элегантен, нежели 
операторы if и elseif из предыдущего примера: 
switch ($city) 
{
case "New York" : 
$areaCode • 212; 
break; 
case "Houston": 
$areaCode = 2 81; 
break; 
case "Phoenix": 
$areaCode = 602 ; 
break; 
case "Seattle": 
$areaCode = 206; 
break; 
default: 
$areaCode = "**UNKNOWN**"; 
}
При выполнении оператора switch процессор сравнивает значение выраже- 
ния, следующего после ключевого слова switch с каждым из значений, находя- 
щихся после ключевых слов case. Если ни одно из значений, указанных после

Глава 10. РНР4 50 7 
case, не совпадает со значением выражения после switch, процессор будет вы- 
полнять операторы, соответствующие оператору default. 
Оператор break в предыдущем примере важен по той причине, что он указы- 
вает PHP-процессору прекратить выполнение операторов case и перейти к вы- 
полнению оператора, находящегося непосредственно после switch. Например, 
если бы в операторе case "Houston" был пропущен оператор break, перемен- 
ная $areaCode сначала получила бы значение 281, а затем сравнение бы продол- 
жалось, и ей было бы присвоено значение 602 . 
Тем не менее, в некоторых случаях оператор break может опускаться специ- 
ально. Предположим, например, что одни и те же операторы должны выпол- 
няться для нескольких операторов case, как в случае с первыми тремя операто- 
рами case в следующем примере: 
switch ($city) 
case "He 
case "La 
case 
$areaCode = 7 0 2; 
break; 
case "New York" : 
$areaCode = 212 ; 
break; 
case "Houston": 
$areaCode = 2 81; 
break; 
case "Phoenix": 
$areaCode = 6 02; 
break; 
case "Seattle": 
$areaCode = 206; 
break; 
default: 
$areaCode • "**UNKNOWN**"; 
I 
Поскольку Хендерсон (Henderson), Лас-Вегас (Las Vegas) и Пахрамп (Pahrump) 
имеют один и тот же телефонный код (702), необходимо, чтобы РНР-процессор 
выполнил оператор присваивания-$areaCode = 702 для каждого из этих трех 
городов. 
Использование логических операторов для проверки одного или 
нескольких условий 
С усложнением сценариев вы сталкиваетесь с ситуациями, когда процессор 
должен одновременно выполнять несколько сравнений. Например, сценарий мо- 
жет проверять, находится ли годовой доход посетителя в пределах от $25 000 до 
$75 000, либо же определять, имеет ли посетитель хорошую кредитную историю 
или производит покупку впервые. Для выполнения действий подобного рода 
применяются логические И языка РНР (&& или and), а также ИЛИ

50 8 Глава 10. РНР4 
(I | или or). При использовании в сценарии операций И и ИЛИ для проверки 
нескольких условий, условия помещаются в круглые скобки, как показано на 
примере следующего оператора if, использующего логическую операцию ИЛИ 
для проверки того, является ли посетитель постоянным клиентом ли производит 
покупку впервые: 
if (($hasGoodCredit) j | ($firstTimeHomeBuyer)) 
оператор; 
Аналогично, в следующем примере логическая операция И используется для 
определения того, находится ли годовой доход посетителя в диапазоне между 
$25 000 и $75 000: 
if (($income >=25000) && ($income<=75000) ) 
оператор; 
При использовании в сценарии логической операции И, чтобы результат вы- 
ражения был равен true, все входящие в него выражения должны быть равны 
true. Если хотя бы одно из условий не соблюдается, результатом всего выраже- 
ния будет false. Например, если годовой доход посетителя меньше $25 000, ус- 
ловие в предыдущем операторе if даст в результате false. Аналогично, если до- 
ход посетителя больше $75 000, результат также будет равен false. Чтобы 
условие соблюдалось, годовой доход посетителя должен быть не менее $25 000 и 
не более $75 000. 
Чтобы выражение с логической операцией ИЛИ давало в результате true, в 
выражении должно, соблюдаться хотя бы одно условие. Например, если посети- 
тель имеет хорошую кредитную историю, условие в первом примере будет со- 
блюдаться. Если посетитель покупает дом впервые, условие также соблюдается. 
Более того, условие будет соблюдаться и в случае, если посетитель имеет хоро- 
шую кредитную историю и покупает дом впервые. Единственным случаем, когда 
составное условие соблюдаться не будет, является ситуация, когда оба условия не 

соблюдаются. 
Использование оператора for для повторения операторов 
заданное количество раз 
ОДНОЙ ИЗ наиболее часто встречаемых операций является повторение одного 
или нескольких операторов определенное количество раз. В этом случае приме- 
няется оператор for. Оператор for в языке РНР содержит три выражения и про- 
стой или составной оператор. Этот оператор обладает следующим синтаксисом: 
for (выражение!, выражение2, выражениеЗ) оператор; 
PHP-процессор вычисляет значение первого выражения (выражение1) один 
раз перед началом выполнения цикла. В начале каждой итерации вычисляется 
значение второго выражения (выражение2). Если значение второго выражения 
равно true, PHP-процессор выполняет оператор или группу операторов, находя- 
щихся между фигурными скобками, как в следующем примере:

Глава 10. РНР4 509 
for (выражение!, выражение2, выражение3) 
{
оператор; 
оператор; 
оператор; 
J 
Если же значение второго выражения будет равно false, PHP-процессор за- 
вершит выполнение цикла for. В конце каждой итерации вычисляется значение 
выражения выражениеЗ. 
В цикле for можно использовать любые выражения языка РНР, причем лю- 
бое из трех выражений может быть пустым. Тем не менее, если пустым является 
второе выражение (выражение2 в приведенном выше синтаксисе), РНР-процессор 
будет выполнять цикл бесконечно. Таким образом, следующий цикл for с пус- 
тыми вторым и третьим выражениями будет выполняться до тех пор, пока условный 
оператор break в теле цикла (if $count = ю) не приведет к тому, что выполне- 
ние сценария продолжится с первого оператора, находящегося после цикла for: 
for ($count= 1; ; ) 
I 
echo "Count = $count<br>"; 
if ($count==10) break; 
++$count; 
J 
Рассмотрим еще один пример. Следующий оператор for (с тремя непустыми 
выражениями) выводит на экран первые десять значений, хранящихся в массиве 
$stateNames: 
for ($statelndex= 0; $statelndex <= 9; ++$statelndex) 
echo "\$stateNames[$statelndex] = $stateNames[$statelndex]<br>"; 
Третье выражение увеличивает значение переменной $stateindex после вы- 
полнения очередной итерации цикла for. Пока значение второго выражения 
($stateindex <= 9) равно true, РНР-процессор будет выполнять блок операто- 
ров цикла for. В приведенном примере это единственный оператор echo. 
Использование цикла while для повторения выполнения операторов 
в случае соблюдения условия 
В предыдущем разделе говорилось, что циклы for в языке РНР используются 
для повторения одного или нескольких операторов определенное количество раз. 
Для ситуаций, в которых РНР-процессор должен выполнять операторы до тех 
пор, пока некоторое условие соблюдается, но не обязательно определенное ко- 
личество раз, МОЖНО ИСПОЛЬЗОВатЬ ЦИКЛ while. Формат ЦИКЛа while ВЫГЛЯДИТ 
следующим образом: 
while ($условие) 
I 
оператор; 
оператор;

5 1 0 Глава 10. РНР4 
При выполнении цикла while процессор сначала проверяет условие (содер- 
жащееся в скобках после ключевого слова while). Если условие соблюдается, бу- 
дут выполняться операторы в блоке цикла while (т.е. операторы, находящиеся в 
фигурных скобках ({}) после ключевого слова while). После выполнения после- 
днего оператора цикла процессор снова проверяет условие. Если оно соблюдает- 
ся, блок операторов выполняется снова, после чего снова проверяется условие и т.
д. 
Когда, в конце концов, условие даст false, процессор продолжит выполнение 
сценария с оператора, который находится непосредственно после цикла while. 
Цикл do-while аналогичен циклу while. Он также заставляет процессор вы- 
полнять операторы при соблюдении условия, но вместо проверки условия перед 
выполнением операторов (как в случае с циклом while), цикл do-while прове- 
ряет условие после выполнения операторов. Формат цикла do-while выглядит 
следующим образом: 
do
{ 
оператор; 
оператор; 
} 
while ($условие); 
Поскольку процессор проверяет условие после выполнения операторов тела 
цикла, они будут выполнены по крайней мене один раз, даже если при первой 
проверке условие соблюдаться не будет. 
Передача данных HTML-формы РНР-сценарию 
Если бы язык РНР не давал возможности получать информацию от посетите- 
ля сайта, он бы не добавил практически ничего нового к уже существующему 
стандарту HTML. В конце концов, вывод на экран таких данных, как дата, время 
и количество посетителей, не наделяет Web-страницу особенными динамическим 
свойствами, которые интересуют посетителей сайта. Конечно, значения перечислен- 

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

если вы не дадите посетителю средства, которые позволят ему указать Web-серверу,
 
что он желает увидеть. HTML-формы дают возможность посетителю передавать ин- 
формацию Web-серверу, а PHP-сценарии обрабатывают полученную (от посетителя) 
информацию и на ее основе создают содержимое новой Web-страницы. 
Как вы уже знаете из главы 3, после заполнения текстовых полей формы, ус- 
тановки необходимых переключателей и флажков и нажатия кнопки передачи 
(Submit) Web-браузер передает результаты заполнения формы Web-серверу. Тем не 
менее, Web-сервер "не понимает" данных, переданных ему браузером. Как ре- 
зультат, сервер должен передать данные (т.е. результаты формы) на обработку 
другой программой. В прошлом Web-браузеры передавали результаты форм для 
обработки Perl-сценариям. В настоящее время Web-серверы передают результаты 
форм не только Perl-сценариям, но и Servlet-сценариям, реализованным на Java 
(так называемым "сервлетам"), сценариям Active Server Pages (ASP) и, как вы уз- 

наете из этого практикума, РНР-сценариям.

Глава 10. РНР4 511 
Когда вы рассматривали формы (в главе 3), вы изучили различные атрибуты, 
которые могут использоваться в дескрипторе <form>. Для взаимодействия ре- 
зультатов .заполнения форм с PHP-сценариями важны два атрибута — action и 
method. Установив значение атрибута action в дескрипторе <form> равным URL- 
адресу PHP-сценария, вы заставляете Web-сервер передать результаты формы (от- 
правленные серверу Web-браузером после нажатия посетителем кнопки Submit) 
PHP-сценарию. Атрибут method устанавливает для Web-браузера способ передачи 
Web-серверу результатов заполнения формы. 
Предположим, например, что имеется Web-страница со следующим определе- 
нием формы: 
<form action="http://www.NVBizNet.com/HWDTT/ChapterlO/ 
ChptlOTipOl.php" 
method="GETM> 
Имя: <input type="text" name="firstName" size = "20" /Xbr /> 
Фамилия: <input type="text" name="lastName" size="20" /Xbr /> 
E-Mail: <input type=Mtext" name="emailAddr" size="30" /Xbr /> 
<input type="submit" value= "Отправить" /> 
<input type="reset" value="Очистить" /> 
</form> 
После нажатия посетителем кнопки "Отправить" Web-браузер отправит Web- 
серверу результаты формы с помощью метода GET. Метод GET говорит Web-бра- 
узеру присоединить пары имя/значение (т.е., результаты заполнения формы) в 
конец URL-адреса, по которому Web-сервер передает данные формы (в приведен- 
ном Примере ЭТО http://www.NVBizNet.com/HWDTT/Chptl0Tip01.php), как ЭТО 
можно видеть на рис. 10.6 в адресной строке Web-браузера. 
В приведенном npnMepeWeb-браузер передает пары имя/значение 
"firsName=Konrad", "lastName=King" И "emailAddr=kki@NVBizNet.com". 
Часть имени пары имя/значение взята из атрибута name определения эле- 
мента формы, а часть значения представляет собой данные, введенные в фор- 
му самим посетителем. Таким образом, в приведенном примере для получе- 
ния результата, показанного на рис. 10.6, посетитель ввел "Konrad" в 
элементе С именем firstName, "King" - В Элементе С именем lastName И 
"kki@NVBizNet.com" - В Элементе С именем emailAddr. 
JJ Обработка результатов запои 
! З^вйл • Орввка ^ид Избранное 
^ - • • '3 i) -2 Л-zi J % 
iАдрес |©3 http.//html^ivebdesign/Chopter1
нения формы npf 
. Сервис1 древка 
O/Chptl OTipO! php4?ti
i пимтци PHP 
rsmome-YourySIc 
M< 
•:!!•! 
crosoft Inte 
ame-Arteme
tnet Explorer 
nko&emailAddrrYoui 
о 
yArtej-J 
HTML & Web Design Tips & Techniques 
—7\ 
Вы ввели имя: Youiy 
Вы ввели фамилию: Artemenko 
Вы ввели адрес e-mail; Yonry.ArtemenkoJkiev.ua 
Рис. 10.6. Адресная строка Web-браузера во время передачи результатов 
заполнения формы с помощью метода GET

512 Глава 10. РНР4 
Изучив адресное поле Web-браузера на рис. 10.6, можно увидеть, что метод 
GET привел к тому, что браузер отформатировал результаты формы в виде URL- 
адреса; 
http://www.NVBizNet.com/HWDTT/ 
ChptlOTipOl .php?firstName=Konrad&lastName=King&emailAddr=kki@NVBizNet. com 
В адресной отроке содержатся адрес, указанный в атрибуте action дескрипто- 
ра <form>, знак вопроса (?) и три пары имя/значения: 
f i rs tName--Konrad 
lastName=King 
emailAddr=kki@NVBizNet.com 
Пары имя/значения разделены амперсантами (&). 
Одним из недостатков использования метода GET является слишком откры- 
тая передача результатов формы — посетитель имеет возможность просмотреть 
все результаты в адресной строке Web-браузера. Более того, результаты формы, 
передаваемые в виде части URL-адреса, фиксируются в журнале браузера, в жур- 
нальных файлах Web-сервера и в кэш-памяти прокси-сервера (если он использу- 
ется). Если вы не хотите, чтобы браузер выводил на экран результаты заполне- 
ния формы, передаваемые Web-серверу, и оставлять копии результатов в местах, 
где они могут быть кем-то просмотрены, используйте метод POST, как показано 
в следующем примере: 
<form action="http://www.NVBizNet.com/HWDTT/Chptl0Tip01.php" 
method="POST"> 
После того, как посетитель нажмет кнопку отправки формы, которая исполь- 
зует метод POST, браузер передаст пары имя/значение, представляющие собой 
результаты заполнения формы, Web-серверу в теле HTML-запроса (а не в каче- 
стве части URL-адреса). Как результат, в адресном поле браузера будет выводить- 

ся только URL-адрес, указанный в атрибуте action. Более того, применение ме- 
тода POST позволяет передавать больший объем информации, поскольку для 
количества символов в URL-адресе, которые браузер передает Web-серверу по ме- 
тоду GET, установлен определенный предел. 
Выбор метода передачи результатов формы (POST или GET) в большой степе- 
ни зависит от предпочтений разработчика. Спецификация HTML 4.01 указывает, 
что метод GET следует применять, если приложения, которое будет обрабаты- 
вать результаты формы, использует результаты, но не вносит никаких изменений. 
В противном случае, если приложение, обрабатывающее результаты формы, из- 
меняет существующие данные или записывает результаты формы в файл или базу 
данных, предпочтение должно быть отдано методу POST. Тем не менее, это всего 
лишь общие рекомендации, а не жесткие правила. Поэтому при выборе метода 
передачи данных можно руководствоваться и другими критериями. 
Например, если посетитель может возжелать создать закладку для URL-адре- 
са, полученного после передачи результатов поисковой формы, или если URL- 
адрес содержит данные, которые вы хотите проанализировать позже (с помощью 
анализатора журнальных файлов Web-сервера с целью определения наиболее час-

Глава 10. РНР4 513 
то искомых терминов), применяйте метод GET. Если же результаты формы со- 
держат чувствительную или персональную информацию, либо если результаты 
формы являются частью транзакции, которая должна выполняться только один 
раз (например, покупка акций или перевод денежных средств между банковски- 
ми счетами), используйте метод POST. 
ПРАКТИКУМ 
Независимо от используемого метода передачи результатов формы, РНР-процес- 
сор автоматически создает переменные, названные в соответствии с именами 
элементов формы, и сохраняет введенные посетителем данные в этих перемен- 
ных. Таким образом, в PHP-сценарии к данным посетителя можно обращаться 
за счет использования имен элементов формы с начальным знаком доллара ($). 
Предположим, например, что Web-страница содержит определение формы, 
приведенное в начале этого совета: 
<form action="http://www.NVBizNet.com/HWDTT/Chapterl0/Chptl0Tip01.php" 
method="GET"> 
Имя: <input type="textM name="firstName" size="20" /Xbr /> 
Фамилия: <input type="text" name="lastName" size = "20" /Xbr /> 
E-Mail: <input type="textM name="emailAddr" size="30" /Xbr /> 
<input type= "submit" value="Отправить" /> 
<input type="reset" value="Очистить" /> 
</form> 
Результаты заполнения формы можно использовать в PHP-сценарии, анало- 
гичном приведенному в теле следующей Web-страницы, за счет сохранения стра- 
ницы по URL-адресу, содержащемуся в атрибуте action дескриптора <form>: 
<html> 
<head> 
<title>O6pa6oTKa результатов заполнения формы с помощью PHP</title> 
</head> 
<body bgcolor="#ADD8E6"> 
<centerXhl>HTML &amp; Web Design Tips &amp; Techniques</hlX/center> 
<hr/> 
<?php 
echo "Вы ввели имя: "; 
echo "<b>$firstName</bXbr />" ; 
echo "Вы ввели фамилию: "; 
echo "<b>$lastName</bXbr />" ; 
echo "Вы ввели адрес e-mail: " ; 
echo "<b>$emailAddr</bXbr />" ; 
?> 
</body> 
</html> 
В соответствии со значением атрибута action в определении страницы, в 
данном примере Web-страница должна быть сохранена в файле chptiOTipOi.php 
в каталоге HWDTT Web-сайта NVBizNet.com. 
Обратите внимание, что имена переменных,в PHP-сценарии чувствительны 
к регистру. Таким образом, Web-сервер присвоит значение элемента формы 
firstName переменной $firstName.

514 Глава 10. РНР4 
Тем не менее, как было упомянуто выше в этой главе, переменные 
$firstName и $FirstName будут считаться разными переменными. Следователь- 
но, чтобы воспользоваться значением, введенным в элементе firstName, необхо- 
димо использовать переменную $firstName (в которой регистр символов полно- 
стью соответствует имени элемента формы). 
Использование РНР для обработки и извлечения 
результатов формы 
В предыдущем совете было показано, каким образом данные элементов фор- 
мы можно извлечь в PHP-сценарии. Как вы уже знаете, значение элемента фор- 
мы можно использовать через переменную PHP-сценария, имя которой соответ- 
ствует значению атрибута name элемента формы. Таким образом, РНР-сценарий 
будет использовать переменную $firstName для доступа к значению элемента 
формы, объявленного следующим образом: 
type="text" name="firstName" size="20"> 
Перед использованием РНР для обработки результатов формы необходимо 
проверить, ввел ли посетитель данные во все обязательные поля формы. Часто 
также требуется проверка того, что введенные данные принадлежат к требуемому 
типу и не выходят за пределы допустимого диапазона. В целях достижения бо- 
лее высокой эффективности проверка введенных данных осуществляется Web-бра-k 
узером перед отправкой их Web-серверу. 
Выполнение всех проверок Web-сервером приведет к увеличению нагрузки на 
сервер и необоснованному использованию пропускной способности Internet. По- 
сетитель может забыть ввести данные в нескольких обязательных полях и/или 
ввести данные, которые выходят за пределы диапазонов допустимых значений. 
Проверка результатов формы Web-сервером потребует от посетителя ожидания, 
пока Web-браузер передает неверные данные Web-серверу, причем только для 
того, чтобы получить сообщение о том, что введенные данные содержат ошибку. 
В процессе передачи результатов формы посетитель может отправлять неверные 
данные несколько раз (что опять-таки загружает сеть Internet), и Web-сервер 
дол- 
жен будет проверять корректность результатов одной и той же формы несколько 
раз (а это уже загружает сервер). 
За счет использования внедренных на Web-страницу JavaScript- или VBScript- 
функций для проверки корректности данных Web-браузером вы имеете возмож- 
ность предложить посетителю исправить данные перед передачей Web-серверу 
результатов заполнения формы. Таким образом, проверка корректности результа- 
тов формы Web-браузером позволяет исключить многократную передачу данных 
Web-серверу. JavaScript- или VBScript-функции предупреждают посетителя об 
ошибках в данных (или незаполненных обязательных полях) и заставляет посе- 
тителя перед (однократной) передачей результатов формы Web-серверу исправить 
все имеющиеся ошибки. 
Тем не менее, даже после проверки корректности результатов заполнения 
формы Web-браузером необходимо провести вторую, окончательную проверку

Глава 10.РНР4 515 
Web-сервером. Теоретически говоря, JavaScript- или VBScript-функции, внедрен- 
ные в HTML-код Web-страницы, предотвратят передачу неверных данных. К со- 
жалению, некоторые Web-браузеры не поддерживают языки написания сценари- 
ев, и в целях безопасности некоторые посетители могут отключить поддержку 
сценариев в своих браузерах во избежание выполнения сценариев, внедренных на 
Web-страницах. Поэтому, чтобы убедиться, что обрабатываться будут только "кор- 
ректные данные, они еще раз проверяются на Web-сервере. 
ПРАКТИКУМ 
Для проверки того, что посетитель ввел данные в однострочное или многостроч- 
ное поле ввода текста, используется оператор равенства (==), который сравнивает 

значение элемента формы со строкой нулевой длины, как показано в следующем 
примере: 
if (trim($firstName) == "") 
г1 
echo "<b>** He введена фамилия **</bXbr>"; 
$formResultsValid= false; 
} 
Кроме того, PHP имеет несколько встроенных функций, которые можно ис- 
пользовать для выяснения того, являются ли введенные в поле данные числом 
(is_numeric(), is__reai() и is_integer ()). После проверки, ввел ли посетитель 
в поле ввода текста данные (и, возможно, числовые данные), можно провести 
дополнительные проверки, которые покажут, принадлежат ли введенные данные 
к допустимому диапазону значений. 
В отличие от переключателей, каждый флажок на форме является независи- 
мым объектом и не входит в именованные группы. Чтобы гарантировать, что по- 
сетитель установил хотя бы один из флажков, которые, по вашему мнению, дол- 
жны быть группой, присвойте каждому флажку уникальное имя, как показано в 
следующем коде: 
<input type="checkbox" name="windows" value="Windows">Windows 
<input type="checkbox" name="mac" value="Macintosh">Mac 
<input type="checkbox" name="unix" value="UnixM>Unix 
Поскольку Web-браузер передает серверу пары имя/значения только для уста- 
новленных флажков (т.е. флажков, которые посетитель отметил "галочкой" (или 
крестиком), чтобы гарантировать, что посетитель установил хотя бы один фла- 
жок, в коде можно использовать логические операторы И (&&), как показано 
ниже: 
if ( ( ! isset($windows) ) && (!isset($mac)) && 
( ! isset($unix))) 
{ 
echo "Вы должны выбрать что-нибудь из набора Windows, Mac и Unix<br>" ; 
$formResultsValid= false; 
} 
Встроенная РНР-функция isset() возвращает значение true, если значение 
переменной, передаваемой функции, было установлено. Поскольку браузер пере-

516 Глава 10. РНР4 
дает только значения установленных флажков, переменные флажков, не установ- 
ленных на форме, в PHP-сценарии значений содержать не будут. 
Web-браузер работает с переключателями по группам на основании имени 
группы, присвоенного в атрибуте name дескриптора <iiiput> каждого переключа- 
теля. В то время как каждому флажку на форме присваивается уникальное имя, 
переключатели группируются путем указания одного и того же имени для не- 
скольких переключателей. Например, следующий код создает группу из двух пе- 
реключателей С именем giveOutEmailAddr: 
<input type="radio" value=MYes" name="giveOutEmailAddr">fla 
<input type="radio" value="No" name="giveOutEmailAddr">HeT 
Web-браузер в каждой группе переключателей позволяет устанавливать всего 
один переключатель. Тем не менее, браузер вовсе не требует, чтобы был установ- 
лен хотя бы один переключатель. Поэтому, чтобы гарантировать, что посетитель 
выбрал один переключатель из группы переключателей, в коде используется 
встроенная функция isset(): 
if (!isset($giveOutEmailAddr)) 
{ 
echo "<Ь>Пожалуйста, сообщите, разрешаете ли вы использовать". 
"свой адрес электронной почты</ЬХЬг>" ; 
$formResultsValid = false; 
} 
Web-браузер передает серверу только одну пару имя/значение для (одного) ус- 
тановленного переключателя. При этом используется имя группы. Таким обра- 
зом, если посетитель не установил ни одного переключателя в группе, браузер 
не будет передавать серверу значение для PHP-переменной, соответствующей 
группе переключателей. 
И, наконец, предположим, что список выбора объявлен в HTML-коде страни- 
цы следующим образом: 
<select size="6" name="currentOS[]" multiple> 
<option value="Windows98">Windows 98</option> 
<option value="WindowsME">Windows ME</option> 
<option value="WindowsXP">Windows XP</option> 
<option value="MacOS">Macintosh</option> 
<option value="Unix">Unix</option> 
<option value="Linux"> Linux </option> 
</select> 
Обратите внимание на квадратные скобки ([]), которые находятся за именем 
списка выбора. Если список выбора назвать просто currentos, при выборе не- 
скольких опций PHP-сценарий будет иметь доступ только к одной опции (пос- 
ледней выбранной в списке выбора). Это не важно, если в дескрипторе <seiect> 
не указан атрибут multiple, что означает, что посетитель будет иметь возмож- 
ность выбирать только один элемент в списке. Использование квадратных скобок 
([]) после имени списка выбора позволяет передавать выбранные посетителем 
значения в виде массива.

Глава 10. РНР4 5 1 7 
Чтобы определить, что посетитель выбрал хотя бы один элемент из списка 
выбора, как и в предыдущем случае, будет использоваться встроенная РНР-функ- 
ция isset(): 
if (!isset($currentOS)) 
echo "<Ь>Вы должны выбрать одну или несколько операционных систем,". 
"которые используете в настоящее время. </bXbr>" ; 
$formResultsValid = false; 
Объединяя все фрагменты кода, приведенные в этом совете, в одно целое, по- 
лучаем следующий сценарий проверки корректности результатов формы: 
$formRe suits Valid = true; 
/* 
Операторы, которые выводят имена и значения элементов для элементов, со- 
держащих корректные данные, и выводят имена и "сообщение об ошибке" и ус- 
танавливают значение булевой переменной $formResuitsVaiid равным false 
для элементов, содержащих некорректные данные. 
*/ 
if ($formResultsValid) 
/* 
PHP-код, который обрабатывает результаты формы с помощью пользовательс- 
ких и/или встроенных функций, или сценарий, содержащийся либо здесь, либо 
во внешней РНР-странице. 
У
echo "<hr>"; 
echo "<Ь>Введенная вами информация передана ". 
"на обработку.<Ьг>Спасибо!</Ьг>"; 
//** Если форма содержит некорректные данные, вывести для посетителя 
кнопку "Back" ** 
else 
echo "<form method=POST>" ; 
echo "<input type=\"button\" 
value=\"Исправить введенную информацию\""." 
onClick=\"self.history.back()\">" 
Полный код описания формы и сценария проверки корректности ее результа- 
тов находится в файле chptiOTipO2, который доступен на сайта издателя русско- 
язычной редакции ЭТОЙ КНИГИ ПО адресу http://www.diasoft.kiev.ua.

518 Глава 10. РНР4 
Использование PHP для отправки сообщения 
по электронной почте 
На многих Web-сайтах присутствуют гиперссылки, которые позволяют посети- 
телям отправлять сообщения по электронной почте людям, связанным с конк- 
ретным сайтом (например, Web-мастеру, сотрудникам компании или отделу по 
работе с клиентами, отделу маркетинга, отделу кадров и т.д.). Для создания ги- 
перссылки, которую можно использовать для отправки сообщения по электрон- 
ной почте, установите значение атрибута href дескриптора <а> ссылки равным 
"maiito:", за которым следует адрес электронной почты, по которому Web-брау- 
зер должен отправить сообщение: 
<а href="mailto:kki@NVBizNet.com">Konrad King</a> 
К сожалению, ключевое слово "maiito:11, используемое для отправки сооб- 
щения по электронной почте, работает далеко не во всех случаях. Если посети- 
тель не настроил Web-браузер для запуска почтовой программы или сама почто- 
вая программа настроена неправильно, браузер не сможет отправить электронное 
сообщение. К счастью, РНР содержит встроенную функцию mail о, которую 
можно использовать для указания Web-серверу на необходимость отправки элект- 
ронного сообщения с помощью локального или (для платформ Windows) удален- 
ного SMPT-сервера (т.е. почтового сервера). Таким образом, прибегая к услугам 
сервера, при необходимости отправки сообщения по электронной почте вы уже 
не будете зависеть от наличия в системе посетителя соответствующим образом 
настроенного программного обеспечения. 
ПРАКТИКУМ 
Перед использованием PHP-функции maii o ваш Internet-провайдер должен ус- 
тановить путь к SMTP-серверу (или в случае использования платформы Unix, 
путь к программе sendmaii) в файле php.ini. Например, если Web-сервер ваше- 
го Internet-провайдера работает под управлением операционной системы 
Windows NT, провайдер должен открыть файл php.ini в каталоге winnt, а затем 
установить параметры SMPT И sendmail__from В разделе mail function INI-фаЙ- 
ла, как показано в следующем примере: 
[mail function] 
SMTP = smtp.lvcablemodem.com ; только для Win32 
sendmail_from = kki@NVBizNet.com ; только для Win32 
;Только для Unix. Вы можете также указать аргументы 
; (по умолчанию: 'sendmaii—t -i1 ) . 
;sendmail_path = 
Для отправки сообщения по электронной почте создайте форму, аналогичную 
показанной на рис. 10.7, и установите значение атрибута action в дескрипторе 
<form> формы равным URL-адресу PHP-страницы, сценарий которой отправляет 
результаты формы в виде электронного сообщения. 
PHP-сценарий будет передавать значения, введенные в поля формы, показан- 
ной на рис. 10.7, в качестве параметров функции mail о. Функция maii o, в 
свою очередь, будет передавать значения параметров либо программе Sendmaii 
(в операционной системе Unix), либо SMTP-серверу.

Глава 10. РНР4 519 
ние PHP аля отправки сообщения по эле 
З^айл ОРа вко ВИД Избранное Сервис .пра 
iiTlilnill и. imT-iilhlHl аи 
Aapec j g ] http //html^vebdesign/Chepterl O/Chptl 0Tip03 htm 
HTML & Web Design Tips & Techniques 
Кому:] 
Cc: 
Вес 
От кого 
Ответить 
Тема: 
Сообщение: 
Отправить | Очистить 
J 
Рис. 10.7. Форма, которая позволяет посетителю отправлять сообщения 
по электронной почте с помощью РНР-сценария 
Синтаксис функции maii () имеет следующий вид: 
mail($recipientList, $subject, $message [, $headerList 
[, $parameterList]]); 
Описание параметров функции приведено ниже: 
$recipientList Строка, содержащая список адресов электронной почты, 
разделенных запятыми (,). 
$subject Строка с темой сообщения. 
$message Строка, которая представляет собой тело сообщения. 
$headerList (Необязательный параметр) Строка, которая помещается 
функцией mail () В ЗагОЛОВОК СООбщеНИЯ. Параметры $headerList ДОЛЖНЫ 
отделяться друг от друга сочетанием символов возврат каретки/перевод 
строки (\r\i). 
$parameterList Строка параметров командной строки, которая должна 
быть передана функцией maii o программе sendmaii или SMTP-серверу. 
Таким образом, вызов функции mail о может выглядеть следующим образом: 
mail("kki@NVBizNet.com, konrad@NVBizNet.com", 
"Тестовое приветственное сообщение", 
"Тело сообщения" , 
"From: me\r\nReply-To: secret@xyz.com\r\n". 
"X-Sender: PHP\r\nCc: userID@domain.com");

520 Глава 10. РНР4 
Конечно, сценарий на Web-странице, которой Web-браузер передает результа- 
ты формы (в приведенном примере это chptiOTipO3) передает функции mail о 
в качестве параметров строковые переменные, а не литералы. HTML-код формы, 
показанной на рис. 10.7, и исходный код PHP-сценария, используемого для об- 
работки результатов этой формы, доступен для выгрузки на сайте http:// 
www.diasoft.kiev.ua. 
Определение, принимает ли Web-браузер посетителя 
cookie-наборы 
Cookie-наборы представляют собой небольшие текстовые элементы данных, 
которые Web-сервер может хранить и считывать из cookie-файла, который распо- 
ложен на жестком диске компьютера посетителя. Как вы знаете, протокол HTTP 
не имеет состояния (stateless), т.е. при отправке Web-сервером отклика 
Web-брау- 
зеру в ответ на его запрос сервер не знает, является ли этот запрос первым от 
данного конкретного посетителя. Web-сервер просто передает файлы (Web-стра- 
ницы, графические изображения и т.п.) в ответ на запросы Web-браузера. Ранее 
просмотренные страницы и результаты взаимодействия посетителя с объектами 
Web-страницы (например, выбранные элементы формы) никак не отражаются на 
содержимом новой страницы. 
Тем не менее, если вы разрабатываете сайт с абонентским доступом, в отдель- 
ные разделы которого посетители должны входить с использованием пароля, 
сервер должен иметь возможность отслеживать состояние посетителя, "вошедше- 
го" на сайт, при его переходе от одной страницы к другой. В противном случае 
посетитель должен будет повторно пользоваться паролем при переходе между 
страницами в разделе с ограниченным доступом. Cookie-наборы дают Web-серве- 
ру возможность сохранять состояние посетителя за счет возможности хранения 
следующей информации: 
• Настроек посетителя для сайта и ранее просмотренных им Web-страниц. 
• Ключа, который ассоциирует посетителя с его личными данными, храня- 
щимися в базе данных сайта. 
• Ключа "сеанса", который позволяет посетителю войти на сайт один раз и 
оставаться зарегистрированным на сайте вплоть до момента выхода с сайта 
или закрытия Web-браузера. 
• Товаров, выбранных посетителем на сайте электронной коммерции, что 
позволят показать все выбранные товары на странице заказа, когда посети- 
тель будет готов покинуть сайт и оплатить покупку. 
К сожалению, поскольку некоторые разработчики используют cookie-наборы 
для сбора информации о покупателях без их ведома или, что. еще хуже, переда- 
ют эту информацию третьим лицам, часть посетителей запрещают прием cookie- 
наборов Web-браузерами. Если обработка данных сценарием Web-станиц зависит 
от хранения и считывания cookie-наборов, перед входом посетителя на сайт ис- 
пользуйте PHP-сценарии для проверки того, принимает ли его Web-браузер 
cookie-наборы.

Глава 10. РНР4 5 2 1 
ПРАКТИКУМ 
Для проверки того, принимает ли Web-браузер посетителя cookie-наборы, вставь- 
те следующий PHP-сценарий перед HTML-кодом Web-страницы входа на Web- 
сайт или индексной страницы для записи "тестового" cookie-набора: 
<?
// Создать строку данных для использования в качестве 
// "тестового" cookie-набора 
$today = getDate(); 
$dateString = $today[•month']." ".$today['mday'].", 
$today['year']; 
// Попытаться установить cookie-набор 1 
setCookie("TestCookie", $dateString); 
// Остальная часть индексной страницы или страницы входа в систему 
Если вы передаете РНР-процессору Web-страницы только с расширением 
.рпр, а индексная страница сайта (т.е. его домашняя страница) имеет рас- 
ширение .htm, вставьте содержимое этой страницы после приведенного выше 
сценария в Web-страницу с расширением .рпр, например, в код страницы 
LoginPage.php. Затем в дескриптор <body> домашней страницы (как правило, 
index.htm или defauit.htm) поместите атрибут onload, как показано ниже, ко- 
торый загружает РНР-страницу: 
<body onload="document.location='LoginPage.php'"> 
Далее на PHP-странице, которая загружается в Web-браузер при выходе посе- 
тителя со страницы входа на сайт или индексной страницы, вставьте следующий 
сценарий: 
<? 
// Создать строку данных, с которой будет сравниваться 
// значение cookie-набора 
$today = getDate () ; 
$dateString = $today['month']." ".$today['mday'].", ".$today['year']; 
if (!empty($testCookie)) 
{ 
if ($testCookie == $dateString) 
{ 
// Проверить имя пользователя и пароль и если данные верны 
// перейти на страницу успешного входа на сайт 
header("Location: Loggedln.htm"); 
exit; 
// Если cookie-набор не было установлен, вывести на экран страницу, которая 
// предлагает посетителю разрешить прием cookie-наборов Web-браузером 
header("Location: NeedCookies.htm"); 
exit; 
?> 
Проверку cookie-набора нужно разнести по двум Web-страницам, поскольку 
Web-браузер передает и принимает cookie-набор только в качестве части заголов- 
ка Web-страницы. Таким образом, вызов функции setcookie() в первом РНР-

52 2 Глава 10. РНР4 
сценарии создает cookie-набор, который Web-сервер передает Web-браузеру в за- 
головке страницы входа на сайт или его домашней страницы. Web-браузер в 
свою очередь, сохраняет cookie-набор (в приведенном примере это текущая дата) 
в cookie-файле на жестком диске в компьютере посетителя. При переходе посе- 
тителем между страницами сайта Web-браузер передает все cookie-наборы (в при- 
веденном примере это Testcookie) Web-серверу в качестве части HTML-запроса 
новой страницы. 
При получении Web-сервером запроса на передачу PHP-страницы, сервер пе- 
редает на обработку РНР-процессору HTTP-запрос (Web-страницу) и cookie-на- 
бор. PHP-процессор в свою очередь может получить доступ к значению любого 
cookie-набора с помощью переменной, имя которой соответствует имени cookie- 
набора с предшествующим знаком доллара ($). Таким образом, в приведенном 
примере, в котором функция setcookie() создала cookie-набор с именем 
testcookie, PHP-процессор имеет возможность проверить значение переменной 
$testcopkie и сравнить его со значением текущей даты. Если переменная 
$testcookie не определена или ее значение не соответствует текущей дате, Web- 
браузер не сохранил cookie-набор, созданный функцией setcookie(), что озна- 
чает, что Web-браузер не принимает cookie-наборы. Как результат, РНР-процес- 
сор перенаправляет Web-сервер на Web-страницу NeedCookies.htm, которая 
предлагает посетителю изменить настройки по обработке cookie-наборов и раз- 
решить их прием браузером. В противном случае, если переменная $testcookie 
содержит текущую системную дату, Web-браузер сохранил созданный функцией 
setcookie() cookie-набор, и PHP-процессор загружает страницу, которая позво- 
ляет посетителю получить доступ к содержимому сайта. 
Использование РНР и дискового файла для 
организации парольного доступа к Web-сайту 
При разработке Web-сайта с доступом только для зарегистрированных пользо- 
вателей необходимо обеспечить вход авторизированных пользователей на сайт и 
исключить доступ, неавторизированных посетителей. Для запроса у посетителя 
имени пользователя и пароля можно воспользоваться HTML-формой, показан- 
ной на рис. 10.8, которая будет предоставлять доступ посетителей к ресурсам с 
ограниченным доступом. 
Для простоты установим значение атрибута name первого элемента формы 
равным "usemame", а второго элемента — "password". Для передачи в РНР-сце- 
нарий имени пользователя и пароля, которые посетитель вводит в элементы 
формы, необходимо установить в атрибуте action дескриптора <form> формы 
URL-адрес PHP-страницы, как показано в следующем примере: 
<form method="post" action=HChptl0Tip05.php" name="loginForm" > 
В приведенном примере сценарий аутентификации посетителя находится на 
странице ChptiOTipOS.php. (Форма входа на сайт ChptiOTipOS.php и сценарий 
аутентификации ChptiOTipOS.php доступны для выгрузки на сайте издательства 
русскоязычной редакции этой книги.)

Глава 10. РНР4 523 
вйп Правка .Мд Избранное Сервис Пр 
] http://htm1-webdesign/Chepter10/Chpt1 OTipO5.htm 
HTML & Web Design Tips & 
Techniques 
Вход в область сайта, предназначенную только 
для зарегистрированных пользователей 
Имя i 
пользователя:' 
Пароль: 
'Войти 1 Сбросить 
Рис. 10.8. Форма входа на сайт с полями ввода имени пользователя и пароля 
ПРАКТИКУМ 
После проверки того, что посетитель в поля формы входа на сайт ввел имя 
пользователя и пароль, PHP-сценарий (chptiOTipos.php) при помощи встроен- 
ной функции f open о открывает текстовый файл password.txt, в котором хра- 
нятся допустимые пары имя пользователя/пароль. При изучении сценария вы 
увидите, что для считывания содержимого файла password.txt и поиска в нем 
пары имя пользователя/пароль, соответствующей введенным посетителем дан- 
ным, используется следующий код: 
if ($fp = fopen("с:\\password.txt", "г")) 
while (feof ($fp) - 0) 
// Прочитать из файла паролей одну строку длиной до 1000 символов 
$line = trim(fgets($fp,1000)) ; 
// Каждая строка в файле паролей имеет формат "имя,пароль". 
$userPass = split (",", $line) ; 
// Проверить наличие в файле введенного имени и пароля 
if (($userPass[0] == $username) and ($userPass[1] == $password)) 
header ("Location: ChptlOTip05LoginSuccessful.htm"); 
exit; 
// Введены неверное имя пользователя и/или пароль 
header ("Location: ChptlOTipO5AccessDenied.htm"); 
exit ; 
} 
Если сценарий находит в файле совпадающую пару имя пользователя/пароль, 
PHP-процессор вызывает функцию header о, которая передает браузеру Web

524 Глава 10. РНР4 
страницу, доступную только зарегистрированным членам сайта (в приведенном 
примере этой страница chptiOLoginSuccessfui.htm). В противном случае, если 
процессор в файле паролей не сможет найти введенные имя пользователя и/или 
пароль, он передаст Web-браузеру страницу "некорректного входа на сайт" 
(chptiOAccessDenied.htm) и откажет посетителю в доступе к ресурсам с ограни- 
ченным доступом. 
Чтобы предотвратить возможность просмотра посетителем содержимого файла 
паролей, храните его вне каталогов Web-сайта. (В противном случае посетитель 
сможет просмотреть содержимое файла, набрав в адресной строке браузера URL- 
адрес файла.) Файл паролей можно поместить в любой каталог на жестком диске 
Web-сервера, к которому имеет доступ PHP-сценарий. Более того, для обеспече- 
ния более высокого уровня защищенности в имени файла паролей не используй- 
те слова password или username, а пользуйтесь буквами и цифрами, что снизит 
вероятность угадывания имени файла посетителями. 
При установке в качестве значения атрибута type элемента ввода формы Web- 
браузер при вводе посетителем данных заменяет все символы звездочками (*). Тем 
не ме- 
нее, при передаче Web-браузером данных формы (включая поля ввода пароля) 
фактически 
передается открытый текст в формате ASCII. Таким образом, хакер имеет 
возможность пере- 
хватить и прочитать содержимое HTTP-сообщения, в котором Web-серверу в виде 
открытого 
текста передаются данные формы. 
Для защиты чувствительной информации используется протокол SSL (Secure Sockets 
Layer, 
протокол защищенных сокетов), который позволяет кодировать данные, передаваемые 
меж- 
ду Web-сервером и Web-браузером. SSL-кодирование выполняется вне РНР, т.е. 
SSL-кодиро- 
вание прозрачно для PHP-сценариев. При использовании защищенного соединения 
Web-брау- 
зер кодирует HTTP-запросы (включая запросы PHP-страниц), которые Web-браузер 
передает 
Web-серверу. После получения кодированного запроса Web-сервер декодирует 
сообщение и 
передает (открытый) текст на обработку PHP-сценарию. В свою очередь, 
PHP-процессор нахо- 
дит нужную PHP-страницу, выполняет сценарий и функции, содержащиеся на странице,
 и пе- 
редает сформированную им страницу Web-серверу. Web-сервер помещает страницу в 
тело 
HTTP-отклика, который затем кодируется и передается Web-браузеру. При получении 
НТТР-от- 
клика (т.е. Web-страницы, запрошенной с Web-сервера) Web-браузер декодирует 
сообщение и 
выводит Web-страницу на экран. 
Для установки защищенной обработки запросов (при которой Web-браузер и 
Web-сервёр об- 
мениваются кодированными сообщениями) необходимо обсудить этот вопрос с 
Internet-про- 
вайдером, на сервере которого находится ваш Web-сайт. После того, как провайдер 
получит и 
установит все необходимые ключи и сертификаты, ваш PHP-сценарий изменять 
практически 
не придется. Единственным отличием будет то, что защищенные URL-адреса 
начинаются с 
префикса " h t t p s : / / " вместо стандартного " h t t p : / / " д л я 
незащищенных адресов. Таким 
образом, для использования защищенного соединения при переходе между 
РНР-страницами 
применяется следующий формат: 
header("Location:https://www.NVBizNet.com/LoginScript.php" 
вместо 
header("Location:http://www.NVBizNet.com/LoginScript.php"

Глава 10. РНР4 525 
Предотвращение перехода посетителей 
по ссылкам на сайт 
В предыдущем совете вы узнали, каким образом можно использовать форму 
входа на сайт и текстовый файл для ограничения доступа к Web-сайту за счет 
запроса у посетителей имени пользователя и пароля. К сожалению, при исполь- 
зовании только страницы входа на сайт посетители могут получить доступ к со- 
держимому сайта даже без ввода имени пользователя и пароля за счет обхода 
страницы входа на сайт. 
Предположим, например, что сценарий входа на сайт, проверяющий правиль- 
ность введенной пары имя пользователя/пароль в случае, когда посетитель вво- 
дит верные имя и пароль, передает Web-браузеру страницу LoginSuccess.htm. 
Если для защиты содержимого сайта используется только страница входа на 
сайт, посетитель имеет возможность обойти ее и получить доступ к содержимому 
сайта за счет создания закладки для страницы с ограниченным доступом (на- 
пример, для страницы LoginSuccess.htm) или ввода URL-адреса страницы в ад- 
ресной строке браузера. 
ПРАКТИКУМ 
Для предотвращения возможности извлечения посетителем страниц из области с 
ограниченным доступом (без регистрации на сайте) поместите все содержимое 
сайта, доступное только для зарегистрированных членов сайта, в РНР-страницы, 
т.е. Web-страницы с расширением .php. Затем перед HTML-код ом каждой стра- 
ницы с ограниченным доступом поместите PHP-сценарий, аналогичный пока- 
занному ниже: 
<? 
// Определить URL-адрес Web-страницы с гиперссылкой, 
// которая использовалась для доступа к данной странице 
$fromPage = getEnv ('rHTTP__REFERER") ; 
// Убедиться, что страница со ссылкой содержит URL-адрес, с которого 
// допускается переходить на страницы из раздела с ограниченным доступом 
// Web-сайта 
if ( (substr ($. romPaoe 0' 30) ! ~ 
com/hwdtt/") and 
znet.com/hwdtt/")) 
// Если переход выполняется с недопустимой страницы, вывести сообщение 
// об ошибке или просто передать Web-браузеру вместо запрошенной 
// страницы страницу входа на сайт 
hea der<"Location: http://www.nvbiznet.com/hwdtt/LoginScreen.htm"); 
exit; 
I' 
Затем Web-браузер передает URL-адрес Web-страницы с гиперссылкой, ис- 
пользованной для перехода на данную Web-страницу, в качестве страницы ссыл- 
ки в заголовке HTTP-запроса, передаваемого Web-браузером Web-серверу Если 
посетитель открывает данную страницу со страницы входа на сайт или путем на-

526 Глава 10. РНР4 
жатия на гиперссылку, находящуюся на любой странице в каталоге "/hwdtt" 
Web-сайта NVBizNet.com, функция getenv() вернет строку, которая начинается с 
http://www.NVBizNet.com/hwdtt/ ИЛИ http://NVBizNet.com/hwdtt/. 
Для применения приведенного выше сценария на своих Web-страницах ис- 
пользуйте в операторе if свой адрес сайта и путь к каталогу, в котором находит- 

ся содержимое ограниченного доступа. Кроме того, замените URL-адрес в вызове 
функции header о в предпоследней строке сценария URL-адресом вашей стра- 
ницы входа на сайт. 
Использование PHP-сеанса для установки постоянного 
соединения между посетителем и Web-сервером 
Термин сеанс (session) в отношении World Wide Web представляет собой се- 
рию связанных между собой взаимодействий между посетителем сайта и Web- 
сервером, занимающую определенный и достаточно продолжительный период 
времени. Сеанс может состоять из серии транзакций, производимых посетите- 
лем при переводе денег с одного банковского счета на другой, при оплате с по- 
мощью Web-служб или обновлении пакета акций. В течение сеанса посетитель 
может сделать несколько запросов на выполнение одного и того же или различ- 
ных сценариев, содержащихся на отдельных Web-страницах. Другими словами, 
сеанс начинается, когда посетитель извлекает одну их страниц Web-сайта, и за- 
канчивается, когда посетитель закрывает Web-браузер или переходит на другой 
сайт. 
Один из методов обеспечения долговременного хранения данных, т.е. обеспе- 
чения сохранения переменными их значений от запроса к запросу, — передача 
Web-сервером значений переменных Web-браузеру в виде cookie-наборов. Web- 
браузер, в свою очередь, сохраняет полученные данные в cookie-файле, содержа- 
щемся на жестком диске компьютера посетителя. 
Еще один метод создания переменных длительного хранения предполагает 
запись значений переменных с помощью PHP-процессора в файл сеанса на Web- 
сервере. При установке РНР программа установки запрашивает путь к файлам 
переменных сеансов, т.е. к каталогу, в котором РНР будет создавать файлы сеан- 
сов. Как правило, файлы сеансов РНР находятся в каталоге \PHP\sessiondata на 
том же диске, на котором был установлен сам РНР. Таким образом, если РНР 
установлен на диске D, файлы сеансов РНР будут создаваться в каталоге 
D:\PHP\sessiondata. 
Используя переменные сеансов вместо cookie-наборов, вы исключаете необхо- 
димость передачи значений переменных между Web-сервером и Web-браузером в 
каждом HTTP-запросе. Вместо нескольких значений Web-сервер передает браузе- 
ру только одно "ключевое" значение — идентификатор сеанса — cookie-набор с 
именем PHPSESSID. После этого браузер передает идентификатор сеанса Web-сер- 
веру при передаче каждого HTTP-запроса, а PHP-процессор использует иденти- 
фикатор для определения файла (находящегося на жестком диске сервера), со- 
держащего значения переменных длительного хранения, доступные для 
сценариев, которые посетитель может запустить в данном сеансе.

Глава 10. РНР4 527 
ПРАКТИКУМ 
Для установки сеанса вызовите в PHP-сценарии функцию sessionstartо, ко- 
торая создаст cookie-набор со случайно сгенерированным идентификатором сеан- 
са (PHPSESSID). Web-сервер должен передать Web-браузеру все cookie-наборы 
(включая PHPSESSID) В заголовке Web-страницы. Следовательно, РНР-процессор 
должен вызвать функцию session__start(), которая создает и вставляет cookie- 
набор с идентификатором сеанса в заголовок Web-страницы, до генерации сцена- 
рием другого содержимого страницы. 
Таким образом, если вы планируете использовать переменные длительного 
.хранения (сеансовые переменные), вставьте в начале-сценария входа на сргг или 
в начале первой PHP-страницы, открываемой посетителем при входе на сайт, 
следующий код: 
<?php session_start(); ?> 
Если посетитель уже начал сеанс на Web-сайте и не закрыл Web-браузер, 
вызов функции session_start() продолжит или восстановит сеанс с ранее сге- 
нерированным идентификатором сеанса. В противном случае функция 
session__start() сгенерирует новый случайный идентификатор сеанса и вставит 
его в заголовок Web-страницы в виде cookie-набора с именем PHPSESSID. ЕСЛИ 
посетитель в настройках своего Web-браузера указал, что браузер должен запра- 
шивать посетителя при необходимости приема cookie-набора, при получении 
браузером Web-страницы с cookie-набором (PHPSESSID), содержащим идентифи- 
катор сеанса, Web-браузер на экран выведет диалоговое окно, показанное на рис. 
10.9. 
То provide 9 room personafoed bowsing experience, will you slow 
this Web site to tempofarifci save a smaB Fie [caSed a cookie) on 
you computei? When you exit the Web site, the We is removed 
Г" [n (fie future, do not show this warnrg 
2%<MTJ_ 
Cookie Information- 
Name (PHPSESSID 
nvbanet2.com Domain 
Path 
Expires |End Ы session 
Data 
Secure [NO 
e38f 41 е26153cd186884fc8B66102099 
Рис. 10.9. Диалоговое окно с сообщением Web-браузера 
о приеме cookie-набора при установке нового сеанса

52 8 Глава 10. PHP4 
После вызова функции session_start() для генерации идентификатора 
сеанса и предупреждения PHP-процессора об использовании переменных 
длительного хранения (сеансовых переменных) можно зарегистрировать пере- 
менные, значения которых процессор должен сохранять в файле сеанса. Для 
регистрации переменной необходимо передать имя переменной, заключенной 
в кавычки и без начального знака доллара ($), функции session_register O , 
как показано в следующем коде, регистрирующем четыре сеансовые перемен- 
ные ($s_firstName, $s_lastName, $s_address И $s_phoneNumber): 
<? 
session_register("$s__firstName", "$s__lastName", "$s_address", 
s_phoneNumber") ; 
?> 
После регистрации переменной ее значение, которое должно сохраняться в 
течение сеанса, можно присвоить в любой момент времени. Тем не менее, функ- 
цию session__register() нужно вызывать до передачи PHP-процессором любого 
содержимого (даже одного единственного пробела) в выходную Web-страницу. 
(Вызов функции session_registerо для регистрации сеансовой переменной не 
изменяет и не устанавливает текущее значение этой переменной.) 
Пример сценария установки и использования значений сеансовых перемен- 
ных на Web-страницах сайта можно найти в файле chptiOTipO7.zip, который 
доступен для выгрузки на сайте http://www.diasoft.kiev.ua. Сценарий, содер- 
жащийся в начале PHP-страницы chptiOTipO7.php, вызывает функцию 
sessionjstarto, которая генерирует уникальный идентификатор сеанса. Затем 
ближе к концу сценария входа на сайт в файле chptiOTip07Login.php вызывается 
функция session_register(), которая регистрирует несколько сеансовых перемен- 
ных и присваивает двум из них имя пользователя и пароль, введенные в элементах 
формы (на Странице ChptlOTipO7.php). И, Наконец, СТранИЦЫ ChptlOGetPI.php И 
chptiOGetPi2.php содержат формы, которые позволяют ввести посетителю лич- 
ные данные, выводимые на экран сценарием страницы chptioshowinfo.php. 
Создание базы данных MySQL и таблиц 
В предыдущих советах в этой главе вы научились использовать встроенную 
функцию fopen о для открытия текстового файла, находящегося на жестком 
диске Web-сервера. Кроме того, было рассмотрено, каким образом встроенная 
функция . gets 0 может использоваться для построчного считывания содержи- 
мого файла с целью обнаружения пары имя пользователя/пароль, совпадающей с 
данными, которые посетитель ввел в поля формы входа на сайт. 
А теперь давайте предположим, что имеется текстовый файл, содержащий 
список товаров, продаваемых вашей компанией. С помощью уже полученных 
знаний вы можете написать PHP-сценарий, который для построчного считыва- 
ния списка товаров многократно вызывает функцию fgets(). Затем, после каждого 
очередного считывания, можно вызывать оператор echo или встроенную функцию 
print (). В результате будет создана Web-страница, содержащая список предлагае- 

мых товаров. Таким образом, РНР и текстовые файлы можно использовать для со-

Глава 10. РНР4 52 9 
здания содержимого Web-страницы "на лету". В приведенном примере Web-страни- 
ца с перечнем предлагаемых вашей компанией товаров не существует, пока посети- 
тель не вызовет PHP-страницу со сценарием, генерирующим список товаров. 
База данных SQL, как и текстовый файл, представляет собой всего лишь на- 
бор данных. Тем не менее, в отличие от текстовых файлов, в которых приложе- 
ния хранят данные в виде неструктурированных фрагментов, СУБД управляет 
всеми операциями с данными в базе данных SQL и организует данные опти- 
мальным образом для обеспечения быстрого и легкого доступа к данным и ма- 
нипулирования ими. Как результат, поиск по текстовому файлу, содержащему не- 
сколько тысяч пар имен пользователей и паролей, занимает недопустимо 
длительное время. В то же время СУБД позволяет выполнить поиск такого же 
объема (среди десятков тысяч записей) в течение долей секунды. Аналогично, 
СУБД дает возможность вывести на экран список товаров или одного товара 
(выбранного из длинного списка) гораздо быстрее, чем при использовании тек- 
стового файла со списком товаров. 
РНР содержит встроенные функции, которые позволяют не только считывать, 
но и редактировать данные, хранящиеся в нескольких наиболее популярных ба- 
зах данных, в частности DB2, FrontBase, Informix, InterBase, mSQL, MS SQL 
Server, MySQL, Oracle, ODBC, PostgreSQL и Sybase. Для определения форматов 
баз данных, доступных для использования в ваших PHP-сценариях свяжитесь со 
своим Internet-провайдером или администратором баз данных. Если не установ- 
лена поддержка ни одной СУБД, вас, возможно, заинтересует MySQL. MySQL 
представляет собой многопользовательскую СУБД, которую можно бесплатно 
выгрузить и установить из сайта http://www.MySQL.com. Эта СУБД поставляет 
как для платформы Windows, так и для Unix. 
Независимо от типа используемой СУБД, для хранения таблиц, которыми будут 
пользоваться PHP-сценарии, необходимо создать базу данных. 
Для создания базы данных воспользуйтесь SQL-оператором CREATE 
DATABASE, Предположим, например, что необходимо создать базу данных, в ко- 
торой будут содержаться таблицы данных, используемых в примерах данной кни- 
ги. В качестве имени базы данных можно выбрать аббревиатуру оригинального 
названия книги (HTML & Web Design Tips & Techniques - HWDTT). Таким обра- 
зом, для создания базы данных с таблицами для примеров данной книги необ- 
ходимо выполнить следующий оператор SQL: 
CREATE DATABASE hwdtt; 
Синтаксис оператора CREATE DATABASE ВЫГЛЯДИТ следующим образом: 
CREATE DATABASE <имя базы данных> 
После создания базы данных необходимо создать таблицы, в которых будут 
храниться данные. Подробное рассмотрение нормализации данных (т.е. исполь- 
зования концепции реляционной базы данных для определения того, какие дан- 
ные должны включаться в какие таблицы) выходит за рамки данной книги. Сей-

530 Глава 10. РНР4 
час важно понимать, что SQL-таблица состоит из строк связанных данных, орга- 
низованных в виде столбцов. Каждая строка (иногда, хотя и несколько неточно, 
называемая записью) содержит связанные между собой элементы данных. Напри- 
мер, при необходимости создания базы данных для хранения имен пользовате- 
лей и паролей каждая строка в таблице будет содержать пару имя пользователя/ 
пароль, при этом имя пользователя будет находиться в одном столбце, а его па- 
роль — в другом столбце одной и той же строки. Для создания такой таблицы 
сначала необходимо указать СУБД, какую базу данных использовать, а затем вы- 
полнить следующий оператор SQL: 
USE h w d t t ; 
CREATE TABLE w e b S i t e U s e r s 
(username VARCHAR (20) NOT NULL, 
p a s s w o r d VARCHAR (20) NOT NULL) ; 
Синтаксис оператора CREATE TABLE имеет следующий вид: 
CREATE TABLE <имя таблицы> 
(<имя столбца><ТИП столбца> [<список атрибутов столбца>] , 
<имя последнего столбца> <тип последнего столбца> [<список атрибутов 
последнего столбца>] ) 
Очевидно, что таблица должна содержать данные, которые в нее можно запи- 
сать с помощью SQL-оператора INSERT, например, для вставки имен пользовате- 
лей и паролей в таблицу webSiteUsers можно выполнить следующие операторы 
INSERT: 
INSERT INTO webSiteUsers (username, password) 
VALUES ("Konrad", "abcl25"); 
INSERT INTO webSiteUsers (username, password) 
VALUES ("Gracie","157WXY3"); 
Синтаксис оператора INSERT ВЫГЛЯДИТ следующим образом: 
INSERT INTO <имятаблицы> (<столбец1, столбец2, ..., столбецЫ>) 
VALUES {значение 1, значение2, . . .f значение!*) ; 
Далее, для использования таблицы базы данных из примера этого совета 
СУБД можно передать запрос в виде SQL-оператора SELECT. Например, для счи- 
тывания из таблицы имен пользователей и паролей можно воспользоваться сле- 
дующим оператором: 
SELECT username, password FROM webSiteUsers; 
Для проверки ввода посетителем верного имени пользователя можно восполь- 
зоваться конструкцией WHERE, который указывает СУБД вернуть только те стро- 
ки, в которых имя пользователя и пароль соответствуют данным, введенным по- 
сетителем в элементы формы входа на сайт. Например, если посетитель ввел в 
поле имени пользователя слово Konrad и слово wrongPass в поле ввода пароля, 
запрос будет выглядеть следующим образом: 
SELECT COUNT(*) FROM webSiteUsers 
WHERE username="Konrad" AND password="wrongPass"

Глава 10. РНР4 531 
Если приведенный запрос возвращает значение " 1", введенная посетителем 
пара имя пользователя/пароль является верной. В противном случае, если вве- 
денная посетителем пара в таблице отсутствует (как в приведенном случае), зап- 
рос возвращает значение "0м, которое означает, что в таблице не содержится 
данных для пользователя с указанным именем и паролем. 
В следующем совете будет показано, каким образом данные заносятся в SQL- 
таблицу, и каким образом в PHP-сценариях выполняются запросы на считывание 
SQL-таблиц. 
Вывод на Web-странице результатов запроса в базу 
данных SQL в HTML-таблице 
Для считывания данных из базы данных и вывода их на Web-странице РНР- 
сценарий должен выполнить три операции. Во-первых, сценарий должен устано- 
вить соединение с СУБД с помощью вызова встроенной функции соединения с 
базой данных (например, функции mysqi_connect(), которая позволяет устано- 
вить соединение с СУБД MySQL). Во-вторых, сценарий должен по установлен- 
ному соединению с СУБД отправить запрос с помощью встроенной функции от- 
правки SQL-запроса (например, функции mysqi__query (), которая позволяет 
PHP-сценарию передавать на выполнение СУБД операторы SQL). В-третьих, 
после помещения СУБД результатов запроса в выходной буфер Web-сервера сце- 
нарий должен считать данные из буфера и вывести их на Web-странице. Например, 
при работе с MySQL сценарий может использовать встроенную функцию 
mysqi_fetch_array (), которая считывает строку результатов SQL-запроса (из бу- 
фера СУБД) и помещает значения столбцов строки в массив элементов. Затем, 
сценарий может выполнить оператор echo или вызывать функцию print о для 
вывода значений полей таблицы базы данных (из массива) на Web-страницу. 
ПРАКТИКШ 
Предположим, например, что используется СУБД MySQL и в HTML-таблице на 
Web-странице необходимо вывести данные из SQL-таблицы с именем products, 
содержащейся в базе данных HWDTT. Прежде всего, выполним вызов функции 
mysqi__connect () следующего вида: 
$link = mysql__connect ($db_host, $db_user, $db_pass) ; 
$db__host содержит строку "locaihost" (если сервер MySQL выполняется в 
той же системе, что и Web-сервер) или строку с IP-адресом компьютера, где вы- 
полняется сервер MySQL, с которым необходимо установить соединение. (Для 
получения IP-адреса сервера MySQL свяжитесь с Internet-провайдером.) Осталь- 
ные два параметра, $db_user и $db_pass, представляют собой имя пользова- 
теля и пароль, необходимые функции mysqi_connect() для установки соеди- 
нения с СУБД MySQL. (При работе с СУБД MySQL с параметрами, 
установленными по умолчанию, войти в базу данных можно с именем пользо- 
вателя $db_user="root" И паролем $db_j>ass="",) 
В функции mysqi_connect () PHP-процессор присваивает соединению с 
СУБД идентификатор переменной $iink или возвращает значение false, если

532 Глава 10. РНР4 
попытка установить соединение не удалась. Поскольку время от времени случа- 
ются ошибки, с помощью оператора if проверьте значение переменной $iink, и 
в случае необходимости выведите на экран сообщение об ошибке. Если попытка 
установки соединения завершается успешно, для выбора базы данных с таблица- 
ми, данные которых будут считываться в запросе, можно воспользоваться вызо- 
вом функции, приведенным в следующем примере: 
if (!mysql__select_db($db_name, $link) 
{ 
//Операторы, обрабатывающие случай неудавшейся попытки использования 
//базы данных 
} 
else 
I 
//Обработка после успешной установки соединения и выбора базы данных 
} 
Сервер MySQL, как правило, поддерживает несколько баз данных, поэтому вы 
должны выбрать базу данных, содержащую таблицы, данными которых вы хотите 
пользоваться. В приведенном примере $db__name содержит строку "HWDTT", a 
$iink — идентификатор соединения с базой данных, сгенерированный успеш- 
но выполненной функцией mysqi_connect(). Как и ранее, необходимо про- 
верить данные, возвращаемые PHP-функцией (в данном примере функцией 
mysqi__seiect_db()), чтобы убедиться, что выбор базы данных был выполнен ус- 
пешно. Функция mysqi_seiect_db () возвращает true при успешном выборе 
базы данных и false — в противном случае. 
После успешной установки соединения с СУБД MySQL и выбора базы дан- 
ных для выполнения запроса (или любого другого оператора SQL) вызовите фун- 
кцию mysqi__query (), как показано в следующем примере: 
$result = mysql__query($query, $link); 
В приведенном примере, в котором считывается содержимое таблицы 
products, параметр $query СОДерЖИТ SQL-ОПераТОр SELECT * НШ products 
ORDER BY description. Как и ранее, параметр $iink содержит идентификатор 
соединения с базой данных, возвращенный успешно выполненной функцией 
mysqi_connect (), вызов которой находится в начале сценария. Функция 
mysqi_query () возвращает false (если СУБД по какой-то причине не смогла 
выполнить переданный ей SQL-оператор) или указатель на место, куда СУБД 
поместила результаты выполнения запроса. 
Для считывания результатов запроса (т.е. строк данных, которые запрос 
выбрал из таблицы products) несколько раз вызовите функцию 
mysqi__fetch_arrayо для считывания всех строк результатов запроса и сохране- 
ния их в массиве. Затем выведите данные из массива на Web-страницу. Напри- 
мер, следующий сценарий извлекает количество полей (возвращенных в резуль- 
татах запроса), их имена и типы, и выводит значения столбцов, содержащихся в 
результатах запроса, в виде HTML-таблицы, которую сценарий создает на Web- 
странице:

Глава 10. РНР4 533 
// Определить количество полей, возвращенных в результатах запроса 
$f ields = mysql_num__f ields ($result) ; 
// Начать определение HTML-таблицы 
echo "<centerXtable border='1' cellpadding='5'>" ; 
// Вывести на экран названия столбцов в виде заголовков HTML-таблицы 
echo "<tr>"; 
for ($i = 0 ; $i < $fields; $i++) 
{ 
echo "<th>" . mysql__f ieldjiame($result, $i) . "</th>"; 
$fieldType[$i] =mysql_field__type ($result,$i) ; 
} 
echo "</tr>"; 
// Вывести в HTML-таблице результаты запроса 
while <$array = mysql_fet ch__array ($result) ) 
{ 
echo "<tr>"; 
for ($i = 0; $i < $fields; $i + + ) 
{ 
if ($fieldType[$i] <> "string") 
echo "<td align='right'>"; 
else 
echo "<td align=1left'>" ; 
echo "$array[$i]</td>"; 
) 
echo "</tr>"; 
} 
echo "</tableX/center>" ; 
Полный код PHP-сценария, описанного в этом совете, находится на странице 
chptiOTipO9.php, которую можно выгрузить из сайта издательства русскоязыч- 
ной редакции ЭТОЙ КНИГИ (http://www.diasoft.kiev.ua). Изменяя ИНформа- 
цию о соединении и SQL-запрос, вы имеете возможность использовать этот сце- 
нарий для считывания и вывода на экран в виде HTML-таблицы результатов 
любого запроса. Сценарий выводит на экран названия столбцов, возвращенных 
запросом, в виде заголовков столбцов таблицы, а сами результаты запроса поме- 
щаются в строки таблицы. 
Использование РНР для генерации случайного пароля 
При создании Web-сайта с доступом только для зарегистрированных членов 
сайта необходимо гарантировать, что члены сайта используют пароли, которые 
не могут быть угаданы неавторизированными пользователями. Поскольку люди 
стремятся выбирать легко запоминающиеся пароли, они часто выбирают имена 
своих родственников или друзей, памятные даты, прозвища или фразы, которые 
они часто произносят. К сожалению, такие "памятные" слова, числа или слово- 
сочетания также легко могут быть угаданы человеком, хорошо знакомым с 
пользователем. 
С помощью встроенной PHP-функции mt_rand(), используемой для генера- 
ции пароля, содержащего случайный набор букв и цифр, можно предотвратить 
выбор новыми членами легко угадываемых слов. К сожалению, если пароль 
сложно запомнить, пользователь может его забыть. Поэтому для удовлетворения

534 Глава РНР4 
членов сайта и во избежание частых звонков с просьбой напомнить забытый па- 
роль желательно предоставить онлайновый механизм, с помощью которого 
пользователи могли бы узнавать ранее присвоенные им пароли. Один из часто 
используемых методов — написание программы, которая бы высылала забытые 
пользователями пароли по электронной почте. 
ПРАКТИКУМ 
Чтобы использовать РНР-сценарий для присвоения посетителям случайных паро- 
лей необходимо организовать Web-страницу с формой, аналогичной показанной 
на рис. 10.10, которая позволяет посетителям вводить имя пользователя и адрес 
электронной почты. 
Форма вхопв на свит - Microsoft Internet Expla 
ейп ' Правка 8 ^ Й Избранное Сервис Спо 
\ Апрес ] e j httpV/htmhwebdesign/Chopteri O/ChpN OTipi 0 htn 
HTML & Web Design Tips & Techniques 
Генерация пароля 
Имя j- 
пользователя:? 
E-mail: 
Отправить Очистить 
Система должна убедиться, что вы ввели имя пользователя, которое до сих пор не 
было 
занято. 
Если все же таковое имя будет найдено, вам потребуется ввести имя пользователя 
повторно. 
Если введенное имя пользователя является допустимым, система отправит вам 
пароль по 
введенному вами адресу электронной почты. 
С. 10.10. Web-страница, которая может использоваться будущими членами сайта 
для запроса пароля, автоматически сгенерированного РНР-сценарием 
Как указано в тексте в нижней части страницы, показанной на рис. 10.10, 
после ввода посетителем имени пользователя, не присвоенного другому члену 
сайта, PHP-сценарий сгенерирует пароль длиной от пяти до восьми символов. 
Сценарий случайным образом выбирает не только символы пароля, но и длину 
пароля, что только повышает уровень безопасности. (Пароль гораздо сложнее 
взломать, если хакеру не известна его длина.) 
Для генерации случайных паролей можно воспользоваться следующим РНР- 
сценарием: 
function generatePassword() 
{ 
// Выбрать начальное число для генерации длины пароля 
m t _ s r a n d ( ( d o u b l e ) m i c r o t i m e ( ) * 1 0 0 0 0 0 0 ) ; 
$passwordLength = m t _ r a n d (5, 8) ;

Глава10. РНР4 535 
// Установить диапазон ASCII-символов для случайной генерации символов 
// ASCII-коды 48-57 включительно - символы от 0 до 9 
// ASCII-коды 65-90 включительно - символы от А до Z 
// ASCII-коды 97-122 включительно - символы от а до z 
$lowerBound = 4 8; 
$upperBound = 122; 
// Исключить специальные символы 
$excludeSymbols = 
array И I ',';', f<',' = ',•>••,•?•,, «в1 , ' [• , chr (92) , • ]', I A I , '_' 
, •' •) ; 
// Создать случайный пароль 
$i = 0; 
$password= " " ; 
while ($i < $passwordLength) 
{
mt_srand ((double)microtime() * 1000000); 
$letter = chr(mt__rand ($lowerBound, $upperBound) ) ; 
if (!in__array ($letter, $excludeSymbols) ) 
{
$password .= $letter; 
$i + + ; 
return $password; 
Дале лее вставьте имя пользователя, адрес электронной почты, текущий IP-адрес, 
системное время и (случайно сгенерированный) пароль в таблицу usemames 
базы данных сайта. Затем вызовите встроенную функцию mail о, которая отпра- 
вит пароль по указанному посетителем адресу. 
При входе посетителя на сайт сценарий входа будет выполнять поиск в таб- 
лице usemames введенных имени пользователя и пароля. Если сценарий нахо- 
дит имя пользователя и пароль в таблице базы данных, он "активизирует" учет- 
ную запись члена сайта. В нашем примере (не показанный здесь, но 
содержащийся в PHP-сценарии страницы chptiOTipiOLogin.php), сценарий вхо- 
да на сайт для активации учетной записи сохраняет системное время в столбце 
iast__coiumn записи в таблице имен пользователей. 
Web-страницы с формами и PHP-сценариями, описанными в этом совете, на- 
ходятся в файле chptiOTipio.zip, который можно выгрузить из сайта издатель- 
ства РУССКОЯЗЫЧНОЙ редакции ЖЙ КНИГИ (http://www.diasoft.kiev.ua). 
Использование РНР и MySQL для организации 
парольного доступа к Web-сайту 
В совете "Использование РНР и дискового файла для организации парольного 
доступа к Web-сайту" выше в этой главе вы научились организовывать ограничен- 
ный доступ (т.е. доступ только для зарегистрированных членов) к Web-сайту с 
помощью РНР и текстового файла, который содержит пары имя пользователя/ 
пароль и хранится на жестком диске Web-сервера. К сожалению, помещение 
списка авторизированных пользователей сайта в текстовый файл обладает не- 
сколькими недостатками:

536 / Глава 10. РНР4 
• При каждом добавлении в файл новой пары имя пользователя/пароль уве- 
личивается время входа посетителя на сайт. С увеличением размера файла 
поиск совпадающей пары в файле будет выполняться все дольше и дольше. 
• Удаление и редактирование пар имя пользователя/пароль в текстовом фай- 
ле выполняется вручную, что представляет собой довольно-таки утомитель- 
ный процесс, связанный с потенциальными ошибками. Как результат, 
можно случайно изменить формат записей в файле доступа, что не позво- 
лит сценарию входа на сайт использовать файл для аутентификации посе- 
тителей. 
• Сетевые пользователи (например, системный администратор и другие 
пользователи с привилегированными учетными записями) могут по ошиб- 
ке удалить файл доступа при выполнении очередной "чистки" каталогов с 
целью высвобождения дискового пространства (таким образом, в принципе 
исключив доступ посетителей на сайт). Или эти пользователи могут про- 
сто просмотреть содержимое файла и узнать полный список пользователей 
вашего сайта и их паролей. 
За счет хранения пар имя пользователя/пароль в базе данных SQL вы может 
исключить все описанные выше недостатки. Все пользователи, авторизированные 
для работы с таблицей доступа, работают с ней через СУБД. Поэтому никто не 
сможет изменить формат строк в файле доступа при вставке, удалении или ре- 
дактировании пар имя пользователя/пароль. Более того, вы имеете возможность 
контролировать операции пользователей путем открытия доступа для одних 
пользователей "только для вставки", в то время как для других — для "вставки", 
"удаления", "просмотра" и/или "редактирования". И, кроме того, независимо от 
количества зарегистрированных пользователей (будь их 10 или 10 000) РНР-сце- 
нарию потребуется одно и тоже (незначительное) время на сравнения пары имя 
пользователя/пароль для посетителя сайта. 
ПРАК 
Для использования таблицы MySQL в качестве списка авторизированных посети- 
телей сайта прежде всего необходимо с помощью SQL-оператора CREATE создать 
таблицу, в которой будут храниться имена пользователей и пароли: 
CREATE TABLE siteAccessList 
{username VARCHAR(3 0) PRIMARY KEY 
password VRACHAR( 15) NOT NULL) ; 
Приведенный выше SQL-оператор CREATE создает таблицу базы данных, со- 
держащую два столбца для хранения имен пользователей и паролей. Первый 
столбец, username, может хранить имена пользователей длиной до 30 символов, 
а атрибут PRIMARY KEY указывает, что каждая строка в таблице должна иметь 
уникальное, не пустое (NOT NULL) значение в столбце username. Второй стол- 
бец, password, может содержать непустой пароль длиной до 15 символов. 
Затем выполните SQL-оператор INSERT, аналогичный приведенному в следую- 
щем примере, который вставит в таблицу пары имя пользователя/пароль, ис- 
пользуемые посетителями для получения доступа на сайт:

Глава 10. РНР4 537 
INSERT INTO siteAccessList VALUES ("Konrad", "King"); 
INSERT INTO siteAccessList VALUES ("Sally", "Fields");- 
INSERT INTO siteAccessList VALUES ("Craig", "Berry"); 
(Чтобы незарегистрированные пользователи сайта не могли "угадать" пароли 
членов сайта и таким образом получить несанкционированный доступ к содер- 
жимому Web-сайта, в качестве паролей не следует использовать фамилии, как это 
показано в предыдущем примере.) Каждый из трех операторов INSERT создает 
новую строку в таблице, помещая первый элемент в списке VALUES В первый 
столбец, а второй элемент — во второй столбец таблицы. 
После ввода посетителем его имени пользователя и пароля в поля формы 
входа на сайт и нажатия кнопки "Войти" PHP-сценарий, аналогичный приве- 
денному ниже, устанавливает соединение с базой данных MySQL и определяет, 
присутствует ли введенные пользователем имя и пароль в списке авторизирован- 
ных пользователей и паролей: 
$db_host = "localhost"; 
$db_user = "root"; 
$db_pass = "" ; 
$dbjname = "hwdtt" ; 
// Установить соединение с СУБД MySQL 
$link = mysql__connect($db_host, $db_user, $db_pass; 
// Выбрать базу данных с таблицей siteAccessList 
mysql_select__db ($db__name, $link) ; 
// Сформировать запрос и передать его на выполнение СУБД 
"SELECT username FROM siteAccessList " . 
"WHERE username = \"$username\" ". 
"AND password = \"$password\""; 
mysql__query ($query, $link) ; 
// Определить количество строк в результатах запроса. Если пара 
// имя/пароль присутствует в файле, результаты запроса будут содержать 
/ / в точности 1 строку. В противном случае функция mysql__num_jrows () 
// обнаружит, что запрос вернул ноль (0) строк, 
if (mysql_num_rows($result) == 0) 
header ("Location: ChptlOTipllAccessDenied.php"); 
else 
header ("Location: ChptlOTipllLoginSuccessful.php"); 
?> 
После вызова функции mysqi_connect () для регистрации на сервере MySQL 
сценарий вызывает функцию mysqi_seiect_db(), которая выбирает базу данных, 
Содержащую СПИСОКЧЛеНОВ Сайта (В Приведенном Примере ЭТО SiteAccessList). 
Далее сценарий формирует запрос (т.е. SQL-оператор SELECT), который указыва- 
ет СУБД вернуть строки таблицы, содержащие пару имя пользователя/пароль, 
совпадающие с именем и паролем, введенным посетителем в форме входа на 
сайт. После вызова в сценарии функции mysqqi_queryо, передающей запрос на 
исполнение СУБД, СУБД выполняет запрос и помещает список строк с совпада- 
ющими парами имя пользователя/пароль в выходной буфер. 
Функция mysqi__num_rows() определяет количество строк, возвращаемых 
СУБД в результате выполнения SQL-оператора SELECT, переданного ей функцией

538 Глава 10. РНР4 
mysql__query () . ЕСЛИ фуНКЦИЯ mysqljrmm_rows () В Операторе i f - e l s e 
ВОЗВраща- 
ет значение " 1 " , посетитель имеет право доступа на сайт. В противном случае, 

если функция возвращает значение "0м, сценарий запрещает доступ посетителя 
к содержимому сайта, доступного только для зарегистрированных членов сайта, 
поскольку введенная посетителем пара имя пользователя/пароль отсутствует в 
списке авторизированных пользователей сайта. 
Web-страница с формой входа на сайт и PHP-страница с сценарием входа на 
сайт, описанные в этом совете, находятся в файле chptiOTipii.zip, который 
можно выгрузить из сайта издательства русскоязычной редакции этой книги 
(http ://www. diasoft .kiev. ua). 
Исключение возможности изменения посетителями 
значений переменных с помощью URL-аргументов 
Для передачи результатов заполнения формы PHP-сценарию можно пользо- 
ваться методами GET или POST. Как вы узнали из главы 3, метод POST приво- 
дит к тому, что Web-браузер передает результаты формы Web-серверу в теле 
HTTP-запроса, в то время как метод GET помещает результаты формы в URL-ад- 
рес, по которому Web-сервер должен передать результаты формы. К сожалению, 
возможность передачи значений переменных PHP-сценарию путем присоедине- 
ния пар имя/значение в конец URL-адреса PHP-страницы (как это делает метод 
GET) представляет собой потенциальную угрозу безопасности. Посетители могут 
изменить значения переменных, которые вы не хотите менять. 
Предположим, например, что сайт имеет страницу входа, которая требует от 
посетителя ввода пары имя пользователя/пароль. После ввода корректных значе- 
ний сценарий входа устанавливает PHP-сеанс и присваивает переменной, ска- 
жем, с именем $s_username, имя, которое посетитель ввел для получения досту- 
па к сайту. До входа на сайт переменная $s_usemame не содержит значения (т.е. 
не определена), поэтому для предотвращения несанкционированного доступа в 
разделы сайта, доступные только для членов сайта, можно воспользоваться опе- 
ратором if, аналогичным показанному в следующем примере: 
<?php 
session_start(); 
if (!isset($s_username)) 
{ 
header (" Location: http://www.NVBizNet.com/HWDTT/ 
LoginScreen.htm"); 
exit; 
{ 
?> 
К сожалению, если посетитель введет в адресной строке браузера URL-адрес 
страницы, которая находится в разделе сайта, доступном только для зарегистри- 
рованных членов, как показано ниже, PHP-процессор установит значение пере- 
менной $s_username равным "Konrad": 
http://www.NVBizNet.com/HWDTT/Loggedln.php?s__username=Konrad

Глава 10. РНР4 539 
Поскольку при проверке в начале PHP-страницы переменная $s_usemame бу- 
дет содержать значение, посетитель получит возможность открыть страницу, не- 
смотря на то, что он не регистрировался на сайте. 
ПРАКТИКУМ 
Для исключения возможности установки посетителями значений сеансовых пере- 
менных (а, следовательно, и исключения возможности обхода процесса входа на 
сайт) все результаты формы должны передаваться с помощью метода POST. При 
этом молено с помощью следующего кода проверить, что посетитель сайта не ввел 
дополнительных аргументов в URL-адресе страницы: 
<?php 
if ($HTTP_SERVER_VARS["argcM] != 0) 
{
header("Location: $PHP_SELF"); 
exit; 
За счет передачи результатов заполнения формы в теле HTTP-запроса вы га- 
рантируете, что ни одна PHP-страница не будет принимать аргументы из URL- 
адреса. Поэтому, если PHP-процессор обнаружит в URL-адресе аргументы, про- 
цессор просто заново загрузит эту же страницу, но без аргументов. 
Использование РНР и MySQL для отслеживания 
положения посетителя на Web-сайте 
После создания Web-сайта часто разработчики желают получить информацию 
о посетителях сайта, посещаемых ими страницах и (возможно) LJRL-адреса стра- 
ницы, с помощью гиперссылки на которую посетитель попал на их сайт. Для со- 
здания полного журнала посещений сайта по каждом посетителю обратитесь к 
своему Internet-провайдеру. Большинство коммерческих Web-серверов (включая 
сервер IIS) имеют встроенные возможности по генерации журналов посещений 
сайтов, совместимые с рекомендациями консорциума W3Q. После генерации 
Web-сервером стандартного журнала посещений можно воспользоваться стандарт- 
ными анализаторами журналов (или же разработать собственный анализатор) для 
считывания содержимого файла журнала (в формате ASCII) и вывода на экран 
данных о посещаемости сайта в форме текста и графиков. 
Если провайдер не включит функцию протоколирования посещений сайта 
(из-за дополнительного места, занимаемого файлов журналов, и потребления ре- 
сурсов сервера на их ведение), или если вы хотите отслеживать доступ только к 
определенным страницам сайта, для создания собственных отчетов о посещаемо- 
сти можно воспользоваться таблицей MySQL и набором PHP-сценариев. Предпо- 
ложим, например, что для создания таблицы usageLog в базе данных MySQL 
был выполнен следующий SQL-оператор СЕМГЕ: 
CREATE TABLE UsageLog 
(visitor_IP TEXT, 
page_URL TEXT ,

540 Глава 10. РНР4 
DT_retrieved TIMESTAMP, 
referrer__URL TEXT, 
session_ID TEXT, 
session_views INTEGER) ; 
Цосле этого можно подготовить код, вызывающий показанную ниже пользо- 
вательскую функцию в начале каждой PHP-страницы, для которой необходимо 
отслеживать посещаемость. Эта функция будет добавлять строки в таблицу 
usageLog базы данных MySQL. 
<? 
function recordPageHit($db_host,$db_user,$db_pass,$db_name,$sessionID) 
{
global $REMOTE_ADDR, $HTTP_XJFORWARDED_FOR, $PHP_SELF, $link, $result; 
// Для экономии места используется функция str_jreplace() для удаления из 
// URL строки //"http://". Кроме того, для исключения запроса после "?" в 
// URL используется explode () , если таковой имеется. 
$referer = explode ("?", 
str_replace("http://", "", getenv("HTTP_REFERER"))); 
// Вызвать пользовательскую функцию для установки соединения с СУБД MySQL 
if (connectToDB ($db_host, $db_user, $db__pass, $db__name)) 
{ 
// Вставить только одну строку для каждой страницы в одном сеансе. Если 
// посетитель просматривает страницу несколько раз, отслеживать коли- 
// чество посещений за сеанс в столбце Msession__views" таблицы "usageLog" 
$query = "UPDATE usageLog " . 
"SET session_views = session__views + 1 " . 
"WHERE session__ID '= '$sessionID' ". 
" ANDpage_URL = '$PHP_JSELF' " ; 
$result = executeQuery($query); 
// Проверить присутствует ли оператор UPDATE в строке для страницы. 
// Если нет, вставить в таблицу строку для страницы. Страница будет 
// содержать только одну строку информации за один сеанс, 
if (!mysql_affected_rows($link)) 
{
$query = "INSERT INTO usageLog " . 
"(visitor__IP, page__URL, referer_URL, ". 
"session_ID, session_views) ". 
"VALUES ( ' $REMOTE_ADDR' , '$PHP_SELF' , ". 
" '$referer[0] ' , '$sessionID',1) " ; 
$result = executeQuery($query); 
} 
return; 
Скопируйте исходный PHP-код приведенной выше функции и пользовательс- 
кой функции connectToDB () (служащей для установки соединения с СУБД 
MySQL в начале функции recordPageHit o)) на свой компьютер, выгрузив архив 
chptiOTipi3.zip из сайта издательства русскоязычной редакции этой книги (http: 
//www.diasoft.kiev.ua). Страница chptiOTipi3.php (входящая в состав архива 
chptiOTipi3.zip) содержит операторы, которые необходимо вставить в начало фай- 
лов РНР-СТранИЦ ДЛЯ Организации Сеанса И ВЫЗОВа фуНКЦИИ recordPageHit() .

Глава 10. РНР4 541 
Обратите внимание, что функция recordPageHit() вызывает одну и туже поль- 
зовательскую фуНКЦИЮ (executeQuery(), ВКЛЮЧенНуЮ В арХИВ ChptlOTipl3.zip) 
как для обновления содержимого строки данных в таблице UsageLog, так и для 
вставки новой строки. При работе с СУБД MySQL для передачи на выполнение 
SQL-операторов (например, SELECT, INSERT, UPDATE, CREATE, DROP И Т.Д.) исполь- 
зуется одна и та же встроенная PHP-функция mysqi__query (). (Следует иметь в 
виду, что регистрация посещения каждой страницы Web-сайта при интенсивном 
трафике может привести к снижению производительности Web-сервера. 
Определение IP-адреса посетителя для запросов 
Web-страницы, переданных через прокси-сервер 
В предыдущем совете вы научились создавать таблицы MySQL и использовать 
PHP-сценарии (некоторые из которых представляют собой пользовательские 
функции) для организации журнала посещений страницы за счет добавления в 
SQL-таблицу строк данных. Помимо генерации отчетов по нескольким страни- 
цам и определения того, какие именно страницы просматривает посетитель в те- 
чение сеанса, в некоторых случаях разработчики сайта желают идентифицировать 
посетителя по его IP-адресу. При наличии таблицы UsageLog (созданной в пре- 
дыдущем совете) вы имеете возможность выполнить SQL-запрос, аналогичный 
следующему, который позволяет определить IP-адреса используемые в сеансах с 
сервером за последние 14 дней: 
SELECT vistor_IP 'Visitor IP', session_ID 'Session ID', 
DATE_FORMAT (DT_retrieved, ' %m/%d/%y %T') 'Date & Time ' 
FROM usageLog, 
WHERE (TO_DAYS(NOW() ) - TO_DAYS (DT__retrieved) ) <= 14 
GROUP BY vistor_IP, session_ID; 
Каждый компьютер в сети Internet имеет уникальный IP-адрес. Как правило, 
Internet-провайдер назначает пользователю IP-адрес из "банка" контролируемых 
им адресов. При использовании Web-браузера для передачи Web-серверу HTTP- 
запроса на получение Web-страницы Web-сервер для отправки запрошенной 
страницы пользуется IP-адресом, который браузер передает в заголовке HTTP- 
запроса. Как уже говорилось выше, каждый компьютер в сети Internet (либо на- 
прямую, либо через Internet-провайдера) получает свой собственный уникальный 
IP-адрес. Тем не менее, компьютеры, которые получают доступ к сети через 
один и тот же прокси-сервер, имеют одинаковый IP-адрес (который представляет 
собой IP-адрес прокси-сервера). (Компании, как правило, помещают прокси-сер- 
вер между компьютерами в локальной сети и сетью Internet по соображениям бе- 
зопасности.) 
При получении посетителем доступа к сайту через прокси-сервер компью- 
тер посетителя передает HTTP-запрос на получение Web-страницы прокси-, 
серверу. Прокси-сервер (компьютер во внутренней сети компании, который 
также подключен к Internet) анализирует сообщение, которые внутренний 
пользователь пытается передать в Internet. Если сообщение проходит проверку 
на соответствие "правилам" прокси-сервера, прокси-сервер запоминает IP-адрес

54 2 Глава 10. РНР4 
компьютера, передавшего запрос, заменяет его в поле REMOTE__ADDR заголовка 
запроса своим собственным IP-адресом и передает HTTP-запрос Web-серверу. 
Web-сервер обрабатывает такой запрос точно так же, как и любой другой. 
Web-сервер (или PHP-процессор, если посетитель запросил PHP-страницу), и на- 
ходит запрошенную страницу. Затем он передает страницу обратно по IP-адресу, 
содержащемуся в поле REMOTE_ADDR заголовка HTTP-запроса. Таким образом, 
если между сетевым пользователем и сетью Internet находится прокси-сервер, 
Web-сервер передает Web-страницу прокси-серверу. После получения Web-страни- 
цы прокси-сервером, последний проверяет сообщение на предмет отсутствия ви- 
русов и другого "нелегального" содержимого. Если все проверки завершаются ус- 
пешно, прокси-сервер передает HTTP-отклик по IP-адресу компьютера, 
запросившего эту страницу. 
Что касается посетителя сайта, работа через прокси-сервер ничем не отлича- 
ется от непосредственной работы с сетью Internet, поскольку прокси-сервер, дей- 

ствующий в качестве посредника, прозрачен для посетителя. (Web-посетитель 
направляет Web-серверу запрос на получение Web-страницы, а сервер передает 
запрошенную страницу браузеру.) Тем не менее, с точки зрения \Veb-cepBepa 
PHP-сценарий не имеет возможности определять фактический IP-адрес посети- 
теля из поля REMOTE__ADDR заголовка запроса, поскольку прокси-сервер заменяет 
IP-адрес посетителя своим собственным адресом. 
К i счастью, прокси-сервер отправляет IP-адрес посетителя в поле 
HTTP__X_FORWARDED_FOR. Таким образом, во избежание потери информации об 
IP-адресе посетителей, работающих через прокси-серверы, для определения фак- 
тического IP-адреса посетителя (который можно сохранять, например, в столбце 
visitor_IP таблицы UsageLog) ИСПОЛЬЗуетСЯ Следующий КОД! 
<? 
//Прокси-сервер вставляет данные HTTP__X_FORWARDED__FOR в заголовок 
//сообщения.Если посетитель работает без прокси-сервера, функция getenv() 
// возвращает либо пустое значение, либо NULL 
$visitor_IP = getenv("HTTP_XJFORWARDED_FOR"); 
// Если посетитель работает без прокси-сервера, извлечь IP-адрес из 
// поля REMOTE_ADDR в заголовке запроса 
if ( ($visitor_JCP == null) or ($visitor__IP == "")) 
$ v i s i t o r _ IP = getenv("REMOTE_ADDR"); 
else 
{
// Отформатировать IP-адрес в виде proxy_IP [,] visitor_IP 
list ($proxy_IP, $visitor_IP) = split (' [,] ' , $visitor_IP) ; 
$visitor__IP = ltrim($visitor_IP) ; 
} 
Исходный PHP-код предыдущего сценария и пользовательская функция 
(chptiOTipi4insertо), котоая используется для записи данных посетителя 
(включая реальный IP-адрес), находится в архиве chptiOTipi4.zip, который 
можно выгрузить из сайта издательства русскоязычной редакции этой книги 
(http://www.diasoft.kiev.ua).

Глава 10. РНР4 5 43 
Предотвращение принятия одним посетителем 
PHP-идентификатора сеанса другого посетителя 
При использовании переменных с значениями долговременного хранения (т.е 
переменных, которые сохраняют свои значения при переходе посетителем от од- 
ной странице Web-сайта к другой) для организации (или продолжения) сеанса 
можно воспользоваться либо cookie-набором, либо встроенной функцией 
session__startо. При работе с cookie-наборами Web-браузер сохраняет их в 
cookie-файле на жестком диске компьютера посетителя. Если же вы начинаете 
РНР-сеанс, PHP-процессор сохраняет имена и значения сеансовых переменных в 
файле сеанса на Web-сервере. 
PHP-процессор создает сеансовые файлы в каталоге, который был указан при 
установке РНР. По умолчанию программа установки РНР выбирает в качестве 
пути для записи сеансовых файлов \PHP\sessionData на том же диске, на кото- 
ром установлен РНР. Таким образом, если РНР установлен на диске D, ПО умол- 
чания программа установки в качестве каталога записи файлов сеансов будет ис- 
пользовать путь D:\PHP\sessionData. (Для определения пути к каталогу файлов 
СеанСОВ МОЖНО ВЫЗВатЬ Встроенную РНР-фунКЦИЮ session_save_path().) 
Сеансовый файл носит имя sess_<$PHPSESSiD>. Если PHP-сценарий вызыва- 
ет функцию session_start(), когда переменная $PHPSESSID не определена, она 
помещает в переменную текстовую строку длиной 32 символа и для получения 
имени файла сеанса добавит эту строку к строке sess_. Файл с полученным име- 
нем будет создан в каталоге файлов сеансов. Предположим, например, что функ- 
ция session_start() в сценарии установила значение переменной $PHPSESSID 
равным nd06205502dlbb3a0f2553bac4de763ad". РНР-процеССОр СОЗДаСТ файл Се- 
анса D:\PHP\SessionData\sess_d06205502dlbb3a0f2553bac4de763ad, В КОТОРОМ 
будут хранится сеансовые переменные. (Сеансовые переменные создаются путем 
передачи имен переменных в качестве параметров функции 
session__register().) 
Если PHP-сценарий вызывает функцию session_start(), когда переменная 
$PHPSESSID уже содержит 32-символьное строковое значение, для поиска и от- 
крытия существующего файла сеанса PHP-процессор будет использовать име- 
ющийся идентификатор сеанса (т.е. значение переменной $PHPSESSID). Пред- 
положим, например, что известно, что PHP-процессор при открытии 
страницы www.NVBizNet.com/HWDTT/secret.php присвоил сеансу идентификатор 
Md06205502dibb3a0f2553bac4de763ad". Хакер может перехватить сеанс на дру- 
гом компьютере, открыв ту же самую страницу с использованием URL-адреса 
http://www.NVBizNet.com/HWDTT/ 
secret.php?PHPSESSID=dO 6205502dlbfc3a0f2553bac4de763ad 
Более того, поскольку файл сеанса хранится на Web-сервере, и после того, как 
посетитель перейдет на другой сайт или закроет Web-браузер, сеанс другого посе- 

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

5 44 Глава 10. РНР4 
Чтобы предотвратить использование одном посетителем сеанса другого посе- 
тителя, удалите аргументы идентификации сеанса, содержащиеся в URL-адресе, 
за счет применения следующего сценария на PHP-страницах, использующих се- 
ансы:
if (isset($QUERY_STRING)) 
{ 
// Создать строку, которая начинается с первого вхождения 
// PHPSESSID в аргументах URL-адреса. 
$sessionIDArgument = strstr ($QUER._STRING, "PHPSESSID11 ); 
if ($sessionlDArgument<> "") 
{ 
// Если "PHPSESSID11 действительно является одним из аргументов 
// URL-адреса, сформировать строку, содержащую остальные аргументы 
// URL-адреса, а затем использовать ее для замены "остальных аргументов" 
// в строке sessionlDArgument пустой строкой "". 
$remainingArguments = strchr($sessionlDArgument,"&"); 
// Заменить аргумент идентификации сеанса (PHPSESSID=xxx) строкой "" 
$sessionIDArgument = 
str_replace($remainingArguments,"",$sessionlDArgument); 
$QUERY_STRING = 
str_replace($sessionIDArgument,"",$QUERY_STRING); 
$newURL= $PHP_SELF . "?" . $QUERY_STRING; 
$newURL. = str__replace("?&" , "?" , $newU.L) ; 
// Извлечь текущую PHP-страницу без аргумента PHPSESSID 
//в URL-адресе 
header ("Location: $newURL"); 
Исходный код предыдущего сценария находится в файле 
StripSessionlDFromURL.php архива ChptlOTipl5.zip, КОТОРЫЙ МОЖНО ВЫГруЗИТЬ 
из сайта издательства русскоязычной редакции этой книги (http:// 
www.diasoft.kiev.ua). 
Использование функций РНР для создания 
шаблонов Web-страниц 
При создании Web-сайта, состоящего из большого количества Web-страниц, 
возможно, практически каждая из них будет содержать повторяющееся содержи- 
мое. Например, на корпоративном Web-сайте часто один и тот же верхний ко- 
лонтитул (с названием компании и ее логотипом) будет помещаться в верхней 
части всех страниц и, вполне вероятно, в нижней части каждой страницы будет 
находиться сообщение об авторских правах. Более того, при создании меню на- 
вигации одни и те же гиперссылки будут находиться на многих страницах Web- 
сайта. За счет написания PHP-функции, которая будет генерировать шаблоны (с 
общими колонтитулами страниц, меню навигации и т.п.), используемые на мно- 
гих PHP-страницах сайта, можно сэкономить немало времени. 
Предположим, например, что необходимо, чтобы все страницы сайта содер- 
жали заголовок, имели цвет фона и нижний колонтитул (см. рис. 10.11).

Глава10.РНР4 545 
Файл Правка Ёид йзбрсвиое Сервис Справка 
http//html-webde5ign/Chepterl0yFigufelD-11 pnp4 
HTML & Web Design Tips & Techniques 
Шаблоны PHP 
Здесь начинается содержимое Web-страницы 
Верхний п нижний колонтитулы страниц на сайте -- одни и те же на каждой 
странице. 
Содержимое страниц между колонтитулами меняется от страницы к странице. 
Created by Koiirad King. 
О 2001 — all rights reserved! 
J 
Рис. 10.11. Web-страница, на которой PHP-функция вставила общий верхний 
Можно написать две PHP-функции, которые будет генерировать шаблоны с 
требуемым содержимым на каждой странице сайта. Например, следующая функ- 
ция создаст на странице верхний колонтитул, показанный на рис. 10.11: 
<? 
function startHTML($title, $heading = "") 
{
echo '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd"> 
<html xmlns=Mhttp://www.w3.org/1999/xhtml"Xhead>' ; 
echo " <title>$title</title>"; 
echo '</head> 
<body bgcolor="#ADD8E6"> 
<centerXhl>HTML & Web Design Tips & Techniques</hlX/center> 
<hr>f; 
if ($heading <> "") 
echo n<centerXh2>$heading</h2X/center>"; 
return; 
По аналогии, приведенная ниже функция будет создавать нижний колонтитул: 
<? 
function endHTML() 
{
echo '<hr /> 
Created by <a href="mailto:kki@NVBizNet.com">Konrad King</a>.<br /> 
&copy; 2001 -- all rights reserved!'; 
echo "</body> 
return; 
После сохранения приведенных выше функций в файлах startHTML.php и 
EndHTML.php, для использования шаблонов на Web-странице включите в ее код 
следующие строки:

5 46 Глава 10. РНР4 
include (•incFiles/StartHtml.php'); 
include ('incFiles/EndHTML.php'); 
startHTML("Демонстрация применения шаблонов для колонтитулов", 
"Шаблоны РНР"); 
?> 
*** Здесь находится содержимое, уникальное для каждой страницы *** 
<?
endHTML(); 
?> 
Разумеется, чем сложнее генерируемый РНР-функцией шаблон (и чем больше 
количество страниц, использующих этот шаблон), тем больше времени и усилий 
вы экономите за счет автоматической, а не ручной вставки HTML-кода, генери- 
руемого PHP-функциями. Более того, при необходимости обновления всех стра- 
ниц сайта, например, при изменении номера телефона компании в верхнем ко- 
лонтитуле страниц, или контактной информации в нижнем колонтитуле, будет 
достаточно внести всего-навсего одно изменение. После изменения РНР-функ- 
ции, создающей шаблон верхнего или нижнего колонтитула, при последующем 
открытии посетителем все страницы сайт& будут содержать новые данные. 
Использование РНР для внедрения на страницу 
функциональности выгрузки файла 
При необходимости передачи файлов с одного компьютера на другой через 
Internet, как правило, используется клиентское приложение FTP, с помощью ко- 
торого пользователь имеет возможность зарегистрироваться на FTP-сервере. (FTP 
представляет собой сокращение от File Transfer Protocol (протокол передачи фай- 

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

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

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

выгрузки файлов с бухгалтерскими данными или данными о заработной плате. 
ПРАКТИКУМ 
Для обеспечения возможности выгрузки посетителем файлов (без использования 
внешней клиентской FTP-программы) установите значение атрибута type в деск- 
рипторе <input> равным "file", как показано в следующем фрагменте кода: 
<form action=lfChtl0Tipl7Upload.php" method="POST"> 
enctype="multipart/form-data"> 
Выберите файл: <input type="file" name="uploadFile" size="50"> 
<br> 
<input type="submit" value="3arpy3MTb"> 
</form>

Глава 10. РНР4 547 
Элемент file формы позволяет посетителю ввести в однострочное поле ввода 
текста путь к файлу на локальном или сетевом диске, который должен быть пе- 
редан Web-браузером на Web-сервер. Вместо ввода полного пути к файлу для 
выгрузки посетитель имеет возможность нажать кнопку "Обзор" ("Browse") 
справа от элемента формы и в диалоговом окне "Выбор файла" ("Choose File") 
выбрать файл для загрузки. Как Netscape Navigator (версии 3.0 и выше), так и 
Internet Explorer (версии 4.0 и выше) поддерживают значение "file"для атрибу- 
та type в начальном дескрипторе <input>. 
После нажатия посетителем кнопки отправки формы (которая в приведенном 
примере помечена как "Загрузить") браузер передает файл, указанный в эле- 
менте загрузки файла, на Web-сервер вместе с другими результатами формы. 
PHP-сценарий, адрес которого содержится в атрибуте action дескриптора 
<form> (в приведенном примере это файл chptiOTipi7Upioad.php), сохраняет 
файл в каталоге на Web-сервере. Страница с элементом загрузки файла и РНР- 
сценарий, используемый для сохранения файла на Web-сервере, находятся в ар- 
хиве chptiOTipi7.zip, который можно выгрузить из сайта издательства русско- 
язычной редакции ЭТОЙ КНИГИ (http://www.diasoft.kiev.ua). 
Перед использованием формы выгрузки файла вызовите в РНР-сценарии фун- 
кцию opendir(), необходимую для выбора существующего каталога, в который 
будет сохраняться файл, передаваемый браузером на Web-сервер. (Если каталог 
не будет выбран явным образом, PHP-процессор поместит загружаемый файл в 
тот же каталог, в котором находится Web-страница, с помощью которой файл 
был загружен. Предположим, например, что файлы, передаваемые Web-браузе- 
ром, необходимо сохранять в том же каталоге, в котором находится Web-страни- 
ца загрузки файлов. Следующие PHP-операторы сначала пытаются открыть ката- 
лог загружаемых файлов, и если он не существует, для создания каталога 
вызывается функция mkdir(), а затем повторно вызывается функция opendir(): 
if (!$handle = @opendir("upload")) 
{ 
m k d i r ( " u p l o a d " , 0 6 6 6 ) ; 
$handle = opendir("upload") ; 
} 
(Символ @ перед вызовом функции opendir о подавляет вывод РНР-процес- 
сором предупреждающих сообщений, в частности сообщения "Warning: Folder 
does not exist" ("Предупреждение: каталог не существует").) 
. В функциях opendirо и mkdr о можно указывать как относительные, так и 
абсолютные пути. В приведенном примере для открытия (и, при необходимости, 
создания) подкаталога "upload" в том же каталоге, в котором хранится 
Web-страни- 
ца, выполняемая РНР-процессором, применяется относительная адресация. 
PHP-сценарий работает с содержимым файла, который передается с помощью 
элемента загрузки файлов, равно как и с текстом и числами, содержащимися в 
результатах формы. Независимо от того, работает сценарий с содержимым файла 
или скалярным (т.е. строковым или числовым) значением, он ссылается на дан- 
ные, полученные от элемента формы с помощью переменной, имя которой полу- 
чено за счет помещения знака доллара ($) перед именем элемента формы. В

548 Глава 10. РНР4 
приведенном примере атрибут name элемента загрузки файлов имеет значение 
upioadFiie. Таким образом, PHP-сценарий для ссылки на содержимое файла, 
путь к которому посетитель ввел в элементе upioadFiie формы, будет использо- 
вать Переменную $uploadFile. 
При передаче Web-серверу результатов заполнения формы, содержащей эле- 
менты загрузки файлов, Web-браузер передает в результатах формы не только со- 
держимое файла, но и его имя, тип и размер. PHP-процессор, в свою очередь, 
уавтоматически сохраняет загруженный файл во временном каталоге на Web-серве- 
ре и создает четыре переменных, которые PHP-сценарий может использовать 
при работе с выгруженным файлом. Имена этих четырех переменных образованы 
от имени элемента формы, с помощью которого данный файл был загружен на 
сервер. В приведенном примере элемент загрузки файлов имеет имя upioadFiie. 
Таким образом, PHP-процессор создаст следующие переменные: 
• $upioadFiie Полный путь к содержимому загружаемого файла на Web-сер- 
вере (например, /tmp/php098XM0). Значение Переменной $uploadFile В 
сценарии может использоваться для ссылки на содержимое файла. 
• $upioadFiie__name Имя загружаемого файла на компьютере посетителя. 
• $upioadFiie_type MIME-тип выгружаемого файла, если он известен. 
• $upioadFiie_size Размер файла в байтах. 
Встроенная функция PHP move_upioaded_fiie() позволяет РНР-сценарию 
перемещать файл из одного каталога в другой. Таким образом, в приведенном 
примере для перемещения загруженного Web-браузером файла в каталог, путь к 
которому содержится в переменной $dir, необходимо вызвать функцию 
move_uploaded_file() Следующим образом: 
move_uploaded_file($uploadFile, "$dir/$uploadFile__name"); 
Для вывода посетителю сообщения об успешном или неудачном перемеще- 
нии файла из временного буфера результатов заполнения формы на сервере в 
другой, постоянный каталог, имя которого содержится в переменной $dir, вызо- 
вите функцию move__upioad_fiie() в операторе if, как показано в следующем 
примере: 
if (move_uploaded_f ile ($uploadFile, "$dir/$uploadFile_name") ) 
echo "OK: файл \"$uploadFile_jname\" успешно загружен."; 
else 
echo "ОШИБКА: сбой при загрузке файла \"$uploadFile name\"."; 
При написании сценариев, которые позволяют посетителям загружать 
файлы в каталоги Web-сайта необходимо убедиться, что сценарий не допускает 
загрузку 
файлов с расширениями, используемыми для обозначения файлов, которые Web-сервер 
дол- 
жен передавать на обработку PHP, ASP, Perl или другим процессорам серверных 
сценариев. 
Если этого не сделать, посетитель может нанести непоправимый вред сайту. 
Например, заг- 
рузить на сайт PHP-страницу с именем d e l e t e Fi l es .php, а затем 
запросить этот сцена- 
рий в своем браузере. После этого Web-сервер, получив HTTP-запрос на файл с 
расширением 
.php, передает эту PHP-страницу (со сценарием, который удаляет все файлы на 
сервере) 
PHP-процессору для выполнения и ... длительная головная боль системному 
администратору 
гарантируется.

Глава 11 
Активные серверные страницы (ASP) 
В этой главе 
Управление потоком информации от Web-сервера к 
Web-браузеру с помощью выходного потока HTML 
• Предотвращение вывода браузером устаревших ASP-страниц 
• Перенаправление Web-браузера на другую страницу 
• Хранение значений переменных между HTTP-запросами в cookie- 
наборах 
• Получение данных из формы с помощью коллекции Form 
• Получение данных из формы с помощью коллекции QueryString 
• Получение информации из коллекции ServerVariables 
• Использование драйвера MyODBC для работы с СУБД MySQL 
• Организация доступа к Web-сайту по имени пользователя и 
паролю 
• Запуск сеанса и работа с переменными сеанса 
Выполнение запросов SQL и отображение результатов запроса в 
HTML-таблице 
• Отображение рекламных баннеров с помощью Microsoft Banner 
Ad Rotator 
• Отслеживание показов и посещений Microsoft Banner Ad Rotator 
Обработка ошибок типа "Код 404: файл не найден"

5 5 0 Глава 11. Активные серверные страницы (ASP) 
Ели при создании Web-страницы пользоваться только языком HTML, стра- 
шица получается статической (т.е. неизменяемой). Страницу можно нафар- 
шировать картинками, анимацией и другими мультимедийными эффектами, но 
каждый посетитель, заходя на страницу, будет видеть одно и то же содержимое — 
пока вы вручную не измените его. Для отображения на Web-странице динамичес- 
кого (т/е. постоянно изменяющегося) содержимого нужно нечто большее, чем 
просто HTML. Например, для отображения даже такой простой вещи, как теку- 
щие дата и время, с помощью HTML придется постоянно редактировать Web-стра- 
ницу на протяжении всего дня — и так каждый день! Даже если на домашней стра- 
нице сайта достаточно отображать лишь текущую дату, то каждый раз при 
создании нового сайта в список Web-страниц, которые необходимо редактировать 
в полночь, будет добавляться еще одна строка. 
Активные серверные страницы (Active Server Pages — ASP) позволяют создавать 
динамические Web-страницы, комбинируя HTML-дескрипторы и текст с инст- 
рукциями сценария, написанными на языке, подобном VBScript, JScript (версия 
JavaScript от компании Microsoft), PerlScript, Python или Rexx (и это еще не 
все). 
HTML-дескрипторы и текст обеспечивают статическую (неизменяемую) часть 
страницы, а сценарий генерирует динамическое (т.е. изменяемое) содержимое, 
которое должен вставить Web-сервер. Например, вместо ручного ввода (а затем 
изменения) в Web-странице текущей даты и времени можно сформировать ASP- 
страницу, в которой между ограничителями "<%" и "%>" вставлены следующие 
операторы VBScript (см. седьмую строку кода): 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//ENM> 
<html> 
<body bgcolor="#ADD8E6"> 
<hIXcenter>HTML and Web Design Tips & Techniques</centerX/hl> 
<hr> 
Добро пожаловать, посетитель!<br> 
Текущее время в Киеве: <% = time %>, 
дата: <% = date %>.<br> 
При каждом обновлении (или новой загрузке) Web-страницы время и 
(раз в сутки) дата будут меняться. 
</body> 
</html> 
При запросе Web-браузера ASP-страницы (обычно это файл с расширением 
. asp) сервер находит эту страницу и передает ее обработчику сценариев ASP, ко- 

торый в среде Windows находится в файле asp.dll. Обработчик сценариев про- 
изводит разбор документа и посылает операторы сценария, обнаруженные между 
начальным (<%) и конечным (%>) дескрипторами, на обработку соответствующе- 
му интерпретатору сценариев. Значит, в операционной системе Windows обра- 
ботчик asp.dll передает VBScript-сценарий, включенный в ASP-файл, интерпре- 
татору VBScript, операторы JScript — интерпретатору JScript и т.д. 
В свою очередь, интерпретатор сценария интерпретирует оператор(ы) сцена- 
рия и возвращает результат (если он есть) в виде строки HTML (дескрипторы и 
текст) обработчику сценариев asp.dll. Затем обработчик сценариев вставляет в 
ASP-документ вместо сценария результат его выполнения и передает измененную

Глава 11. Активные серверные страницы (ASP) 551 
страницу Web-серверу И, наконец, сервер пересылает страницу браузеру, который 
запросил ее. Весь этот процесс показан на рис. 11.1. 
Если бы активные серверные страницы позволяли отображать на Web-страни- 
це только изменяющиеся дату и время, то вряд ли стоило бы создавать для этого 
целую технологию. К счастью, использование сценария на стороне сервера, ото- 
бражающего на странице дату и время — это лишь простейший пример того, что 
можно сделать с помощью ASP. Как мы увидим в данной главе, с помощью соот- 
ветствующего сценария можно подстраивать содержимое Web-страницы в зависи- 
мости от того, кто посещает вашу страницу, какой у него браузер, и какие дей- 
ствия он предпринимал во время посещения вашей страницы (или во время 
сеанса). Например, предположим, что вы применяете технологию ASP для уп- 
равления банковскими оплатами, суммами на счетах или счетами кредитных 
карточек. Сценарии, включенные в состав Web-страниц банка, генерируют 
HTML и текст для отображения информации о вашем счете. Если кто-то другой 
войдет на сайт вашего банка, он увидит данные по своему (а не вашему) счету — 
по тому же самому Web-адресу. 
"http://ним.u3.oro,/TR/xhtiil1/0TD/xht«11-I 
l lns="http://HUN.n3.org/1399/xhtir1> 
i й$Р-страницы</Ш1в> 
ody bgcolor:1 •HftDD8EG"> 
<center><h1>HTML Seep: V«b Design Tips Samp: Techniques</h1X/epnte 
h 
Добро пожаловать. пос*титвпь!<Ьг> 
Текучее время в Киеве. <7. • tine 1>. дата: <7. • date 1>.<Ьг> 
При каждом обновлении (или новой загрузив) Web-страницы время и 
(раз в сутки) дата будут меняться. 
</body> имщмишшии^м^мицццтицц 
<1DOCTVPE htBl PUBLIC "-//M3C//DTD XHTML 1.0 Traneitional//EN 
•'http://nuu.H3.org/TR/xhtBl1/DTD/xhtml 1 -transitional .dtd" 
<ht»l х»1пб= "http;//uuu.n3.org/1993/xM-l"> 
(body bgcolor: p4tflDD8EG"> 
enter><hi>HTML Samp: Ueb Design Tips Samp: T»chniquee</h1></center> 
Добро пожапоеать. посетитель!<Ьг> 
Текунее ореня в Киеве: 11:23:57 АН, дата: 83/30/63.<Ьг> 
При каждом обновлении (или новой загрузке) Ueb-страннцы врем 
(раз в сутки) дета будут меняться. 
/body> 
Интерпретатор 
VBScript 
HTML & Web Design Tips & 
Techniques 
Добро пожаловать, 
Текущее времявКн 
При каждом обиоал 
в сутки) дата будут 
етитель! 
: 11:23:57 AM,дата: 09УЗО/03. 
нн (нлн новой загрузке) Web-страинцы время и (раз 
Рис. 11.1. Обработка ASP-страницы

5 5 2 Глава 11. Активные серверные страницы (ASP) 
Кроме отображения динамического и настраиваемого содержимого Web-стра- 
ницы, разработчики могут применять сценарии, вставленные в ASP-страницы, 
для обработки данных, принятых из форм. Например, предположим, что вы вхо- 
дите на сайт своего банка и заполняете форму для пересылки денег с одного 
счета на другой. После щелчка: на кнопке "Готово" ваш браузер пересылает вве- 
денную вами (т.е. принятую из формы) информацию по URL-адресу, указанному в 
атрибуте action дескриптора формы <form>. Если по этому адресу находится ASP- 
страница, сервер передает Web-документ (заданный URL-адресом) и информацию, 
принятую из формы, обработчику ASP-сценариев. Обработчик сценариев передает 
указанные (или выбранные) вами в HTML-форме сумму и номера счетов интерпре- 
татору сценариев, который, в свою очередь, выполняет операторы сценария, кото- 
рые изменяют информацию о вашем счете, хранящуюся в таблицах базы данных. 
Что нужно, чтобы создавать и просматривать 
ASP-страницы 
Для создания ASP-страницы нужен только текстовый редактор наподобие 
Блокнота (Notepad), стандартно присутствующий во всех версиях Windows. Или 
же можно воспользоваться любым из множества средств разработки Web-стра- 
ниц, таким как Visual InterDev или FrontPage компании Microsoft, Hornesite ком- 

пании Allaire, GoLive компании Adobe или Dreamweaver компании Macromedia. 
ASP-страница — это обычный текстовый ASCII-файл, обычно с расширением 
. asp. Поэтому при использовании инструментов разработки Web-сайтов для со- 
здания ASP-страницы редактировать страницу можно либо той же инструмен- 
тальной программой, либо любой другой, либо текстовым редактором (напри- 
мер, Блокнотом). Надо лишь помнить, что для обработки в качестве 
ASP-страницы этот документ должен иметь расширение, связывающее его с ин- 
терпретатором asp.dll (обычно это расширение .asp, поскольку администрато- 
ры сайтов связывают (назначают) файлы с расширением . asp с обрабатывающим 
его Приложением asp.dll). 
Для опубликования ASP-страниц (чтобы ASP-страницы стали доступными в 
Internet или Intranet-сети предприятия) нужен Web-сервер, поддерживающий ASP. 
Поскольку компания Microsoft разработала технологию ASP, то неудивительно, 
что ее Web-сервер — Internet Information Server (MS) — поддерживает ASP. Если 
провайдер, предоставляющий хостинг для вашего сайта, использует Windows NT 
Server 4.0, он, возможно, установил I IS 2.0 (поддерживающий ASP версии 1.0). 
Web-сервер IIS версии 3.0 входит в состав Windows NT 4.0 Service Pack 3, a IIS 
4.0 свободно доступен как часть пакета обновлений Windows NT 4.0 Option Pack. 
(На момент написания этого текста Option Pack 4.0 можно выгрузить из Web- 
сайта КОМПанИИ Microsoft ПО адресу http://www.microsoft.com/NTServer/ 
downloads/recommended/NT40ptPk/default.asp.) И I IS 3, И IIS 4 поставляются 
с библиотекой asp.dll, обеспечивающей поддержку ASP версии 2.0. В состав 
Windows 2000 входит I IS версии 5.0, поддерживающий ASP версии 3.0. 
В дополнение к IIS (версии 2 и выше), поддержку ASP обеспечивает и про- 
дукт Personal Web Server (PWS) компании Microsoft, входящий в состав уже упо-

Глава 11. Активные серверные страницы (ASP) 5 5 3 
мянутого пакета обновлений Windows NT 4.0 Option Pack. (Между, прочим, 
Personal Web Server можно запустить не только под управлением Windows NT 
Workstation, но и под управлением Windows 95 и более новых версий.) Если вы 
разместили свой сайт на Web-сервере без IIS (или PWS), то все равно есть воз- 
можность использовать ASP. Узнайте у провайдера — возможно, он установил 
расширение ASP от компании вроде ChililSoft или Halcyon Software. Если, на- 
пример, установлен ChililSoft, то он позволяет выполнять ASP на Web-серверах 
компаний Apache, Lotus, Netscape и Microsoft, работающих на платформах 
Microsoft, Sun и IBM. 
Для просмотра ASP-страниц нужен Web-браузер. Так как сценарии, находя- 
щиеся в ASP-страницах, выполняются сервером (а не браузером), то годится лю- 
бой Web-браузер. Одно из преимуществ выполнения сценария на стороне серве- 
ра (т.е. когда сценарий выполняется не браузером, а сервером) состоит в том, 
что для написания встроенных сценариев поддержка их языка требуется только 
на Web-сервере. Обработчик сценариев, выполняющийся на сервере, отвечает за 
пересылку сценария в соответствующий интерпретатор и за вставку результата 
выполнения сценария (если он есть) в Web-страницу в виде стандартных HTML- 
дескрипторов и текста, которые может понять и отобразить Web-браузер. 
Начальный и конечный дескрипторы ASP 
Как уже упоминалось, когда браузер запрашивает ASP-страницу, сервер выби- 
рает документ и передает Web-страницу обработчику сценариев asp.dll. Чтобы 
отделить операторы сценария, выполняемые на стороне сервера (которые обра- 
ботчик сценариев передает на обработку интерпретатору сценариев), от операто- 
ров HTML (которые обработчик сценариев возвращает серверу без изменений), 
необходимо заключить операторы сценария, выполняемые на стороне сервера, 
между начальным и конечным дескрипторами ASP: 
<% <Операторы VBScript> %> 
По умолчанию для Web-cej5Bepa IIS языком сценариев является VBScript. По- 
этому если внутри скобок "<%" и "%>" вы вставляете операторы VBScript, которые 
нужно выполнить на Web-сервере IIS, язык сценария можно не указывать. И на- 
оборот, если вы включаете сценарий, написанный на другом языке, необходимо 
указать название языка с помощью команды @language =. Например, для вклю- 
чения в ASP-страницу сценария, написанного на JScript, нужно в самом начале 
сценария, предназначенного для обработки на стороне сервера, вставить следую- 
щую команду @language =: 
<% Slanguage = JScript %> 
<% <Операторы JScript> %> 
Создание простой ASP-страницы 
Чтобы создать ASP-страницу, содержащую несколько операторов, которые 
должны быть обработаны интерпретатором VBScript, запустите свой любимый 
текстовый редактор (например, Блокнот) и наберите следующий код:

554 Глава 11. Активные серверные страницы (ASP) 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> 
<head> 
<"Ы'Ые>Начальный и конечный дескрипторы ASP-сценария 
на стороне cepBepa</title> 
</head> 
<body bgcolor=M#ADD8E6"> 
<hlXcenter>HTML and Web Design Tips & Techniques</centerX/hl> 
<hr> 
<% @language = VBScript %> 
<%
Response.Write "<р>Датаи время на <b>Web-cepBepe</b>: " 
Response.Write(now()) 
</body> 
</html> 
В данном примере обработчик ASP-сценариев переносит в создаваемую им 
Web-страницу первые десять операторов HTML (начиная с объявления DOCTYPE 
и заканчивая дескриптором <hr>). А сценарий на стороне сервера в этом приме- 
ре начинается со следующего оператора в строке 9: 
<% @language = VBScript %> 
Команда @language в этом операторе говорит обработчику сценариев, что 
сценарий (сценарии) внутри Web-страницы содержат операторы VBScript. Поэто- 
му обработчик сценариев передаст операторы, заключенные между начальным и 
конечным дескрипторами сценария (<% ... %>) на обработку интерпретатору 
VBScript. После того как интерпретатор VBScript вернет результат каждого из 
двух вызовов методов Response.write обработчику сценариев, тот добавит воз- 
вращенный текст в HTML-текст страницы. 
Пока не задумывайтесь особо над смыслом различных объектов и методов, 
которые можно применять в ASP-сценариях — мы еще рассмотрим их в данной 
главе. Сейчас достаточно знать, что Response.write — это метод (т.е. вызов фун- 

кции), с помощью которого можно добавлять текст в HTML-код страницы. Пер- 
вый вызов Response. write добавляет строку в кавычках, приведенную в рассмат- 
риваемом примере, а второй вызов возвращает текущие дату и время, которые 
обработчик сценариев передаст в Web-страницу. 
Теперь сохраните свою страницу в файле с расширением .asp (что-нибудь 
вроде ASP__Testi.asp) на Web-cepsepe. 
Далее, откройте этот HTML-документ в Web-браузере, и вы увидите страницу, 
похожую на приведенную на рис. 11.2. 
Обратите внимание, что созданную вами ASP-страницу необходимо получить 
с Web-сервера, поддерживающего ASP (наподобие IIS компании Microsoft). (Если 
Web-сервер не поддерживает ASP-файлы, то он просто перешлет запрошенный 
документ Web-браузеру без изменений, и браузер отобразит операторы VBScript 
как обычное содержимое страницы.) И наоборот, Web-сервер с поддержкой ASP 
передаст запрошенную вами ASP-страницу (ASP_Testi.asp) обработчику сцена- 
риев (также выполняющемуся на Web-сервере).

Глава 11. Активные серверные страницы (ASP) 555 
Фейп Qpsem Вио Избранное Сарвис .лротко Q 
.'•••& J . а ' a ш JJ 
11 . . '••'".• ' •• i» i • Останов... Обновить •. .Домой •] Поиск.: Избрани.,,1 
Журнал -. 
HTML & Web Design Tips & 
Techniques 
Дата и время на Web-сервере: 09/30/03 7:12:58 AM 
: . . . . : ....... . : .. . • • -: J 
Рис. 11.2. Web-страница с содержимым, сгенерированным сценарием, 
содержащимся в ASP-странице 
Обработчик сценариев, в свою очередь, вызовет интерпретатор сценариев для 
выполнения операторов встроенного сценария (сценариев) и создания Web-стра- 
ницы, которую сервер, наконец, отправит для отображения вашему браузеру. На- 
пример, для получения ASP-страницы, подобной только что созданной в преды- 
дущем примере, из Web-сервера NVBizNet.com, введите в адресной строке 
браузера URL-адрес http://www.NVBizNet.com/HWDTT/ASP_Testl.asp. 
Web-страница, которую обработчик ASP-сценариев передает обратно Web-сер- 
веру, содержит на месте VBScript-операторов HTML-дескрипторы и текст, кото- 
рые были посланы на обработку интерпретатору VBScript. Исходный код страни- 
цы, полученный браузером от Web-сервера, можно просмотреть, выбрав пункт 
меню View | Source (Вид | В виде HTML) в Internet Explorer или View 
Source (Вид | HTML-код страницы) в Netscape Navigator. 
Page 
Добавление комментариев в ASP-сценарий 
Добавление комментариев в свои ASP-сценарии - отличная привычка. Ком- 
ментарии игнорируются интерпретатором, но напоминают вам (и рассказывают 
другим), почему вы написали конкретные части сценария именно так, или что 
вы вообще хотите сделать с помощью данного сценария. Кроме того, коммента- 
рии можно использовать при разработке страницы, дабы точно определить, где 
произошла ошибка, вызвавшая некоторое сообщение. Закомментировав фрагмент 
кода (т.е. указав интерпретатору сценария игнорировать эти строки кода как 
"комментарии"), можно заставить ошибку пропасть. Затем, убирая комментарии 
по одному, пока вновь не будет выдано сообщение об ошибке, можно опреде- 
лить, какая строка кода вызвала ошибку — обычно это последняя строка кода из 
"раскомментированных" строк сценария. 
Конкретный символ или последовательность символов, используемые для 
обозначения комментария, зависят от языка, на котором вы пишете встроенный 
сценарий. В VBScript, например, комментарий начинается с одиночной кавычки 
• или "штриха". Штрихом можно пользоваться и для помещения комментария

556 Глава 11. Активные серверные страницы (ASP) 
в конец строки, и для превращения в комментарий всей строки. В любом случае 
интерпретатор сценария будет считать комментарием остаток текста на строке 
справа от символа штриха. 
Например, три строки после начального дескриптора в следующем HTML- 
коде представляют собой комментарии: 
<html> 
<head> 
<title>KoMMeHTapnn в ASP-ci*eHapnn</title> 
</head> 
<body bgcolor=M#ADD8E6"> 
<hlXcenter>HTML and Web Design Tips & Techniques</centerX/hl> 
<% @language = VBScript %> 
<% 
' Нижеследующий код выводит текст на Web-страницу и может 
' так же легко быть написан и с помощью обычного HTML 
(вместо использования метода Response.Write) 
Response.Write "<hr>" ' Вывод горизонтальной линии 
Response.Write "<р>Дата и время на <b>Web-cepBepe</b>: " 
Response.Write (now()) ' Функция now() возвращает текущие дату и время 
%> 
</body> 
</html> 
При обработке встроенного сценария, приведенного в этом примере, интер- 
претатор VBScript игнорирует три строки комментариев. Аналогично, интерпре- 
татор сценариев обрабатывает следующие вызовы метода Response.write для 
того, чтобы добавить в HTML-код Web-страницы дескриптор <hr> и текущие 
дату и время, игнорируя текст комментариев, расположенный в каждом операто- 
ре справа от символа штриха: 
Response.Write "<hr>" Вывод горизонтальной линии 
Response.Write(now()) Функция now() возвращает текущие дату и время 
Сокрытие исходного ASP-кода от посетителя Web-сайта 
Работая в сети, вы наверняка заметили, что HTML-код, описывающий какую- 
либо Web-страницу, можно просмотреть с помощью браузера (например, выбрав 
пункт меню View | Source в Internet Explorer или View | Page Source в Netscape 
Navigator). Необходимо помнить, что просматривая таким образом исходный код 
Web-документа, мы видим лишь HTML-код на стороне клиента — т.е. HTML-код, 
полученный браузером от Web-сервера. 
Просмотр содержимого страницы с помощью браузера не позволяет пользова- 
телю увидеть операторы сценария на стороне сервера, которые включены в ASP- 
страницу, породившую HTML-код. Помните — сервер передает ASP-страницу, 
запрошенную браузером, обработчику сценариев (айр.сш). Обработчик сценари- 
ев выполняет сценарий (посылая сценарий соответствующему интерпретатору 
сценариев) и заменяет операторы сценария сгенерированными им HTML-кодом 
и текстом. Весь этот процесс происходит до пересылки сервером ASP-страницы 
браузеру. Значит, применение сценариев на стороне клиента скрывает текст сце-

Глава 11. Активные серверные страницы (ASP) 5 5 7 
нария от пользователя. Поэтому для просмотра операторов сценария нужен 
текст ASP-страницы, расположенной на Web-сервере, а не то, что представлено в 
Web-браузере. 
Тот факт, что посетитель сайта не может с помощью браузера видеть операто- 
ры ASP-сценария, имеет несколько важных и ценных последствий. Например, 
если вы пишете ASP-страницу, которая обращается за информацией к некоторой 
базе данных, в Web-документе нужно описать детали соединения с ней. Эти де- 
тали, а также и сам запрос, могут содержать конфиденциальную информацию, 
которую вряд ли стоит раскрывать посетителю сайта. К счастью, выполнение 
сценария подключения и запроса к базе на стороне сервера означает, что сервер 
посылает браузеру лишь отформатированные с помощью HTML-дескрипторов 
результаты запроса (а не имя пользователя, пароль и текст SQL-запроса на полу- 
чение информации). Аналогично, если ваша ASP-страница выполняет сценарий, 
содержащий формулы реализации расчетов или определения цены, то выполне- 
ние сценария на Web-сервере и передача браузеру лишь результатов вычислений по- 

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

ют собой атрибуты, описывающие объект или его состояние. Методы (methods) — 
это действия, которые можно совершить над объектами. 
Все ASP-страницы имеют семь встроенных объектов. Поэтому любой сцена- 
рий, включенный в ASP-страницу, может использовать свойства и методы объек- 
тов Application, ASPError, ObjectContext, Request, Response, Server И 
Session. Запоминать названия объектов не обязательно. Нужно лишь помнить, 
что каждому объекту присущ набор свойств, предоставляющих информацию, свя- 
занную с объектом, и группа методов, предоставляющих вашим сценариям функ- 
циональность определенного типа. Объект Session, например, позволяет отсле- 
живать и использовать информацию о посетителе и его или ее действиях на 
страницах сайта во время одного посещения. Объект Request предоставляет дос- 
туп и возможность работы с информацией (такой как данные, принятые из фор- 
мы, строка запроса и cookie-наборы), которую браузер посылает Web-серверу в 
составе HTTP-запроса. В противоположность этому, объект Response позволяет 
создавать Web-страницу в ответ на запрос браузера. 
Когда вы далее в этой главе будете читать советы, вы будете знакомиться со 
свойствами и методами, принадлежащими каждому из встроенных объектов. 
Сейчас мы сосредоточим внимание на объекте Response, чтобы получить общее 
представление, как в сценарии можно применять объекты ASP и их методы.

5 5 8 Глава 11. Активные серверные страницы (ASP) 
Передана шформацм браузеру с помощью метода Response.Write 
Когда Web-сервер получает от браузера HTTP-запрос, он в ответ посылает 
запрошенные данные (т.е. Web-страницу или другой файл), сообщение о пере- 
направлении или сообщение об ошибке. В теле ответного сообщения содержит- 
ся HTML-код, предназначенный для отображения браузером, а в заголовке сооб- 
щения находятся директивы и/или информация о содержимом тела сообщения. 
Например, если сервер получает HTTP-запрос на доступный ему HTML-доку- 
мент, ответ сервера состоит в чтении и пересылке содержимого Web-страницы 
браузеру. Однако отвечая на HTTP-запрос ASP-страницы, сервер вызывает обра- 
ботчик сценариев asp.dll, создавая Web-страницу с помощью методов объекта 
Response. После завершения работы обработчика сценариев сервер читает выход- 
ные данные объекта Response и пересылает их в виде выходного потока HTML- 
кода для отображения браузером. 
Метод write объекта Response можно использовать для вставки текста (как 
содержимого, так и HTML-дескрипторов) в любое место Web-документа или даже 
для создания полной Web-страницы. Для помещения на страницу текста нужно 
просто передать вставляемый текст методу Response.Write как значение перемен- 
ной или в виде строкового литерала (т.е. текста в кавычках) следующим образом: 
<?/о
Response.Write "<htmlXbody>" 
Response.Write _ 
"<р>Методу Write объекта Response можно передавать " & _ 
"в качестве параметров и текст, и HTML-дескрипторы.</р>" 
Response.Write_ 
"<р>Амперсант (&) в VBScript применяется для конкатенации строк, 
"а подчеркивание (__) позволяет разместить один оператор " 
"в нескольких строках.</р>" 
Response.Write "</bodyX/html>" 
%> 
Обратите внимание, что амперсант (&) в VBScript используется как символ 
конкатенации (сцепления) строк, а подчеркивание (_) служит для продолжения 
оператора на следующей строке. Таким образом, в приведенном примере с помо- 
щью символа подчеркивания второй вызов метода Response.Write в целях фор- 
матирования растянут натри строки. Амперсант (&) в конце второй строки сооб- 
щает интерпретатору VBScript, что текст в кавычках во второй и третьей строках 
нужно передать методу Response.Write как одну строку. 
Как отмечено в тексте примера, методу Response.Write можно передавать и 
HTML-дескрипторы для форматирования содержимого Web-страницы, и само 
это содержимое. Поэтому если набрать текст вышеприведенного примера и со- 
хранить его в ASP-файле с именем, скажем, ASP__Test2.asp, то при запросе по- 
сетителем этого документа с Web-сервера обработчик сценариев сгенерирует сле- 
дующий HTML-код: 
<htmlXbody> 
<р>Методу Write объекта Response можно передавать 
в качестве параметров и текст, и HTML-дескрипторы.</р>

Глава 11. Активные серверные страницы (ASP) 5 5 9 
<р>Амперсант (&) в VBScript: применяется для конкатенации строкЛ 
а подчеркивание (__) позволяет разместить один оператор 
в нескольких строках.</р> 
</bodyX/html> 
Вставка в Web-страницу двойной кавычки (") 
Иногда некоторые слова на Web-странице требуется взять в кавычки. Пусть, 
например, нужно заключить в кавычки "Response.write", как сделано в данном 
предложении. Поскольку метод Response.write требует, чтобы строковые лите- 
ралы (т.е. цитируемый текст) были ограничены кавычками, то просто вставить в 
Web-страницу символы двойной кавычки (") вокруг выделяемого текста нельзя. 
Например, следующий код является ошибочным: 
<% 
Response.Write_ 
"Метод "Response.Write" позволяет вставлять в " & _ 
"HTML-код Web-страницы текст и HTML-дескрипторы." 
%> 
Когда интерпретатор VBScript прочитает кавычку ("), следующую за словом 
"Метод", он будет ожидать комбинацию символов возврата каретки и перевода 
строки, завершающую оператор. Вместо этого он обнаружит дополнительный 
текст и выдаст сообщение об ошибке: 
Microsoft VBScript compilation error '800a0401' 
Expected end of statement 
(Ошибка компиляции Microsoft VBScript '800a0401'. 
Должен быть конец оператора.) 
В VBScript есть три способа вывести в Web-страницу двойную кавычку с по- 
мощью метода Response.write: использование пары двойных кавычек, вызов 
функции chr() или передача управляющей HTML-последовательности (&quot;). 
Например, каждый из трех следующих операторов выведет в Web-страницу текст 
"Response.Write" В Кавычках*. 
<html> 
<body> 
<%
Response.Write_ 
"Для отображения кавычек на Web-странице можно использовать " & _ 
"пару двойных кавычек: ""Response.Write"" .<br>" 
Response.Write _ 
"Для отображения кавычек на Web-странице можно использовать " & _ 
"функцию Chr () : " & Chr(34) & "Response .Write" & Chr (34) & " .<br>" 
Response.Write_ 
"Для отображения кавычек на Web-странице можно использовать " & _ 
"управляющую HTML-последовательность: &quot ;Response.Write&quot;." 
%> 
</body> 
</html>

5 6 0 Глава 11. Активные серверные страницы (ASP) 
Если метод Response.write обнаруживает пару двойных кавычек, он считает 
ее одной кавычкой, являющейся частью текста, а не ограничителем строки. Зна- 
чит, первый пример данного раздела можно исправить, переписав его следую- 
щим образом: 
<?/о
Response.Write 
"Метод ""Response.Write"" позволяет вставлять в " & _ 
"HTML-код Web-страницы текст и HTML-дескрипторы." 
%> 
Второй способ отображения на Web-странице двойной кавычки — вставка в 
метод Response.write функции chr(). Ранее в этой главе уже применялась 
вставка функции в метод Response.write: тогда для отображения на Web-стра- 
нице текущих даты и времени (возвращаемых функцией VBScript now о) приме- 
нялся следующий код: 
<?/о
Response.Write (now()) 
%> 
Аналогично тому, как здесь интерпретатор VBScript передает методу 
Response,write значение, возвращаемое функцией now о, можно передать и 
значение, возвращаемое функцией спг(),для вставки символа двойной кавычки. 
Итак, зная, что код ASCII-символа двойной кавычки равен 34, двойные кавычки 
вокруг "Response.write" можно вывести с помощью следующего кода: 
<?/о
Response.Write_ 
"Метод " & chr(34) & "Response.Write" & chr(34) & " позволяет" & _ 
" вставлять в HTML-код Web-страницы текст и HTML-дескрипторы. " 
%> 
Каждый вызов функции chr(34) в этом сценарии возвращает символ двойной 
кавычки. Символ амперсанта (&) указывает интерпретатору VBScript, что он дол- 
жен добавить символ, возвращаемый функцией chr о, к уже построенной интер- 
претатором части строки. В результате интерпретатор VBScript просто передает 
ДВОЙНУЮ кавычку ("), ВОЗВращаемуЮ функцией chr(), методу Response.Write 
как часть длинного строкового литерала. 
Третий способ отображения на Web-странице двойной кавычки (") — вставка 
управляющей HTML-последовательности, которая указывает браузеру, что он 
ДОЛЖеН СОЗДаТЬ ЭТОТ СИМВОЛ. Как уже уПОМИНаЛОСЬ, С ПОМОЩЬЮ Response.Write 
в HTML-код Web-страницы можно вставлять не только текст, но и HTML-деск- 
рипторы, и другую информацию. Хотя "&quot;fl указывает браузеру, чтобы он 
отобразил двойную кавычку, для метода Response.write это просто строка н 
шести символов. Поэтому двойные кавычки вокруг "Response.write" можно вы- 
вести и так, как показано ниже: 
<%
Response.Write_ 
"Метод &quot/Response.Write&quot; позволяет вставлять" &_ 
• в HTML-код Web-страницы текст и HTML-дескрипторы."

Глава 11. Активные серверные страницы (ASP) . 5 6 1 
Сокращение кода с помощью ключевого слова With 
При работе с каким-либо объектом ASP часто бывает нужно многократно ис-. 
пользовать некоторые свойства этого объекта или вызывать его методы. Можно 
облегчить себе жизнь, используя вместо повторения название объекта ключевое 
слово with. Например, для создания Web-страницы, содержащей таблицу, можно 
написать следующий ASP-сценарий: 
<%
Response.Write "<html>" 
Response.Write "<body bgcolor='#ADD8E6'" 
Response .Write "<hlXcenter>" & _ 
"HTML and Web Design Tips & Techniques</centerX/hlXhr>" 
Response.Write "<table align='center1 width='200' border='l'" 
Response. Write M<trXtd>PlMH</tdXtd>KoHpafl</tdX/tr>" 
Response .Write "<trXtd>4>aMJUMKi</tdXtd>KiiHr</tdX/tr>" 
Response. Write "<trXtd>M«roro</tdXtd>234 . 25</tdX/tr>" 
Response.Write "</table>" 
Response.Write "</body>" 
Response.Write "</html>" 
%> 
Вместо постоянных повторений имени объекта лучше воспользоваться ключе- 
вым словом with: 
With Response 
.Write "<html>" 
.Write "<body bgcolor='#ADD8E6'" 
.Write "<hlXcenter>HTML and Web Design Tips & Techniques</centerX/hlXhr>" 
.Write "<table align=•center' width='200' border='1'" 
. Write "<trXtd>HMH</tdXtd>KoHpafl</tdX/tr>" 
. Write n<trXtd>#aMWjiPOT</tdXtd>KMHr</tdX/tr>n 
. Write "<trXtd>MToro</tdXtd>234 .25</tdX/tr>" 
.Write "</table>" 
.Write "</body>" 
.Write "</html>" 
EndWith 
%> 
Хотя в данном примере ключевое слово With применяется только как сокра- 
щение для объекта Response, его можно использовать с любым объектом 
VBScript. 
Использование Response.Write для отображения переменных 
Переменные — это элементы, которые вы создаете для хранения информации 
в коде. Кроме хранения значения, каждая переменная именует^ некоторое место 
в памяти. Чтобы было легче сохранять данные в памяти и выбирать их оттуда, 
языки сценариев позволяют ссылаться на каждое место в памяти с помощью ос- 
мысленного имени. VBScript, например, требует, чтобы имя каждой переменной 
начиналось с буквы латинского алфавита и содержало до 255 букв, символов 
подчеркивания (_) и цифр. Поэтому имя, под которым посетитель зарегистриро-

562 Глава 11. Активные серверные страницы (ASP) 
вался при входе на ваш сайт, можно сохранить в каком-то месте памяти, назвав 
его usemame. Аналогично, чтобы сохранить код товара, который посетитель выб- 
рал для покупки, можно использовать переменную productcode, а переменную 
totaiPurchaseAmount — для хранения общей стоимости всех покупок, произве- 
денных посетителем. 
Для объявления переменной в языке VBScript используется ключевое слово 
Dim (от dimension - измерение), за которым следуют одно или более имен пере- 
менных. В VBScript существует лишь один тип данных (называемый variant {ва- 
риант)), поэтому при объявлении имени переменной не требуется указывать тип 
данных, которые будут храниться в ней. Каждый раз при запоминании в пере- 
менной некоторого значения VBScript решает, в каком виде хранить это значе- 
ние, основываясь на .его типе данных. Поэтому в начале вашего сценария можно 
поместить следующие описания переменных: 
DIM tablestart, tableEnd, tdLeft, tdRight, tdEnd 
DIM trStart, trEnd 
DIM custName (1) ' Создает массив из двух элементов 
DIM totalDue 
За исключением третьего оператора, в котором создается массив (custName) 
для Хранения двух значений, каждая объявленная в этом примере переменная 
может содержать одну строку или число. Поэтому если в вашем сценарии вы на- 
пишете следующий оператор, то значение totalDue будет числовым: 
totalDue = 235.45 
А если в другом месте сценария написать следующий оператор, то значение 
totalDue будет символьной строкой: 
totalDue = "Нет" 
В операторах сценария можно использовать либо только имена переменных, 
либо их комбинацию с числовыми или строковыми литералами. Поэтому все вы- 
зовы метода Response.write в следующем коде верны: 
<?/о
ИМ authors (1) , authprList 
authors (0) = "ЭндиЭндерсон" 
authors (1) = "КонрадКинг" 
authorList = authors (1) + " & + authors(0) 
With Response 
.Write "<htmlXbody>" 
.Write "<р>Авторы — Конрад Кинг & Энди Андерсон</р>" 
.Write "<р>Авторы- Конрад Кинг & " & authors (0) & "</р>" 
.Writeм<р>Авторы— " & authorList & "</p>" 
.Write " </bodyX/html>" 
End With 
(Обратите внимание, что в VBScript первый элемент массива имеет индекс 0, 
а не 1.)

Глава 11. Активные серверные страницы (ASP) 56 3 
В качестве примера применения переменных перепишем код из предыдущего 
раздела, используя вместо строковых литералов переменные: 
<html> 
<body bgcolor='#ADD8E6' 
<hlXcenter>HTML and Web Design Tips & Techniques</centerX/hl> 
<hr> 
<%
DIM tableStart, tableEnd, tdLeft, tdRight, tdEnd 
DIM trStart, trEnd ' Для хранения строковых значений 
DIM custName (1) ' Массив из двух элементов 
DIM totalDue ' Для хранения числового значения 
tableStart = "<table align=fcenter' width='200' border='l'" 
tableEnd = "</table>" 
tdLeft = "<tdwidth='7O' align='left'" 
tdRight = "<tdwidth=' 130 ' align=f left' " 
tdEnd = "</td>" 
trStart = "<tr>" 
trEnd = "</tr>" 
custName(0) = "Конрад" 
custName(1) = "Кинг" 
totalDue =234 .25 
v 
With Response 
.Write tableStart 
.Write trStart 
.Write tdLeft & "Имя" & tdEnd 
.Write tdRight & custName (0) & tdEnd & trEnd 
.Write trStart 
.Write tdLeft & "Фамилия" & tdEnd 
.Write tdRight & custName (1) & tdEnd & trEnd 
.Write trStart 
.Write tdLeft & "Итого" & tdEnd 
.Write tdRight & totalDue & tdEnd & trEnd 
.Write tableEnd 
End With 
%> 
</body> 
</html> 
Вставляя вместо дескрипторов таблицы имена переменных, можно легко обес- 
печить применение стилей к строкам и столбцам таблицы - без обильного кода. 
Пусть, например, требуется изменить выравнивание и фоновый цвет во всех 
ячейках правого столбца таблицы. Форматирование всех ячеек колонки можно 
изменить, не меняя многочисленные дескрипторы <td>, а используя перемен- 
ную (в данном примере tdRight) и изменив лишь один оператор присваивания: 
tdRight = "<td width='130' align='center' color='white1>" 
Конечно, чем больше строк и колонок в таблице, тем больше времени и уси- 
лий можно сэкономить с помощью одного изменения, влияющего на формат ко- 
лонки или строки по всей таблице.

5 6 4 Глава 11. Активные серверные страницы (ASP) 
Управление потоком информации от Web-сервера к Web-браузеру 
с помощью выходного потока HTML 
Хотя ASP-сценарии могут выполнять много функций, основная цель их ис- 
пользования заключается в создании HTML-страниц на стороне сервера и пере- 
сылке их посетителю сайта. Как уже упоминалось ранее в главе, обработчик ASP- 
сценариев использует метод Response.write для вставки текста и дескрипторов 
в HTML-документ, который Web-сервер пересылает браузеру. Выходной поток 
HTML представляет собой очередь (или буфер) для информации, которую сервер 
получает от обработчика ASP-сценариев и отправляет браузеру. 
По большей части интерпретатор ASP-сценариев создает каждую Web-страни- 
цу одним и тем же способом. Сначала он очищает временную память (выходной 
поток HTML), в которой он будет создавать Web-страницу. Затем интерпретатор 
сценариев начинает дописывать туда информацию в том порядке, в котором бра- 
узер ожидает ее получить: сначала данные HTTP-заголовка, затем HTML-деск- 
рипторы и текст, образующие содержимое страницы, отображаемое на экране 
посетителя. Таким образом, выходной поток HTML (т.е. буфер, в котором обра- 
ботчик сценариев создает Web-страницу) вначале пуст. Затем обработчик сцена- 
риев добавляет в него статический HTML-код, находящийся в ASP-документе, и 
информацию, сгенерированную встроенными сценариями. После того как обра- 
ботчик сценариев скопирует статический HTML-код и пропустит через интер- 
претатор сценариев все сценарии, встроенные в ASP-страницу, он извещает сер- 
вер об окончании обработки. Сервер, в свою очередь, пересылает содержимое 
выходного потока HTML браузеру. 
Обычно лучше дождаться окончания всей обработки перед тем как отправ- 
лять содержимое буфера браузеру. Но если ASP-страница содержит сценарий, ко- 
торый выполняется длительное время, можно посылать части результирующей 
страницы или хотя бы сообщение о состоянии, дабы тем самым уведомить посе-" 
тителя, что сценарий обрабатывает его запрос. В противном случае посети- 
тель может подумать, что страница (или, может быть, сервер) "недоступна", 
поскольку сервер не прислал запрошенную страницу. Если не указано обрат- 
ное, Web-сервер пересылает содержимое выходного буфера только после завер- 
шения всей работы обработчиком сценариев. У объекта Response есть одно 
СВОЙСТВО (Response.Buffer) И Три метода (Response.Flush, Response.Clear И 
Response.End), которые можно использовать для управления буферизацией вы- 
ходного потока HTML обработчиком сценариев. 
ПРАКТИКУМ 
Используйте свойство Response. Buffег для указания, должен ли Web-сервер бу- 
феризовать информацию, созданную ASP-страницей. Установка значения этого 
свойства равным True сообщает серверу, что всю выходную информацию нужно 
сохранять до тех пор, пока обработчик сценариев не обработает все сценарии, 
или пока обработчик сценариев не вызовет либо метод Response.Flush, либо 
метод Response.End (о нем пойдет речь чуть ниже). Если же свойство 
Response. Buffer установить равным False, то сервер будет сам управлять пото-

Глава 11. Активные серверные страницы (ASP) 5 6 5 
ком выходных данных, отправляемых браузеру. Тогда он не будет ожидать, когда 
обработчик сценариев завершит обработку, а будет периодически проверять вы- 
ходной буфер и отправлять те данные, которые обработчик сценариев поместил 
в выходной поток HTML. 
Пусть, например, ваша ASP-страница содержит следующий сценарий: 
<?/о 
CONST oConnection = _ 
11 DRIVER={MySQL};SERVER=NVBi zNet;UID=root;PWD=;DATABASE=hwdtt" 
DIM connObj, totalSales 
Response.Buffer = true 
Response.Write_ 
"<!DOCTYPE HTML PUBLIC " "-//W3C//DTD HTML 4 . 0//EN" ">" 
Response .Write "<headXtitle>ynpaBneHMe выходным потоком HTML 
</titleX/headXhtmlXbody>" 
Response.Write 
"<р>Пожалуйста, подождите. Выполняется обработка запроса...</р>" 
Set connObj = server.createobject ("adodb.connection") 
connObj.ConnectionString = oConnection 
connObj.Open 
Set totalSales = connObj.execute 
("SELECT SUM(InvoiceTotal) AS TotalSold FROM invoices") 
Response.Write "Общая сумма продаж: " & totalSales("TotalSold") 
%> 
</body> 
</html> 
Обработчик сценариев заносит в выходной буфер дескрипторы <htmi> и <body>, 
а за НИМИ текст "Пожалуйста, подождите. Выполняется обработка запроса. ..". I 
Web-сервер ничего не отправит браузеру, пока обработчик сценариев не завершит 
выполнение запроса во второй половине сценария. В результате посетитель 
УВИДИТ Сообщение "Пожалуйста,подождите. Выполняется обработка запроса..." 
лишь тогда, когда он получит результаты запроса. Если на обработку запроса 
требуется 30 секунд, посетитель может покинуть страницу, поскольку после щел- 
чка на гиперссылке, который должен вызвать ASP-страницу с данными об объе- 
ме продаж, "ничего не произошло". 
Чтобы Web-броузер Сразу же ОТПравИЛ Сообщение "Пожалуйста, подождите. 
Выполняется обработка запроса. . . " , нужно установить СВОЙСТВО Response .
Buffer 
равным False, как показано ниже: 
CONST oConnection = _ 
"DRIVER={MySQL};SERVER=NVBizNet;UID=root;PWD=;DATABASE=hwdtt" 
DIM connObj, totalSales 
Response.Buffer = false 
Response.Write 
"<!DOCTYPE HTML PUBLIC " "-//W3C//DTD HTML 4.0//EN"">" 
Response.Write " < h e a d X t i t l e > C o n t r o l l i n g the HTML Output 
Stream 
</titleX/headXhtmlXbody>" 
Response.Write _ 
"<р>Пожалуйста, подождите. Выполняется обработка з а п р о с а . . . < / р 
Set connObj = server,createobject ("adodb.connection")

566 Глава 11. Активные серверные страницы (ASP) 
connObj.ConnectionString = oConnection 
connObj.Open 
Set totalSales = connObj.execute 
("SELECT SUM(InvoiceTotal) AS TotalSold FROM invoices") 
Response.Write "Общая сумма продаж: " & totalSales("TotalSold") 
</body> 
</html> 
Обратите внимание, что значение свойства Response. Buffer можно изменять 
лишь тогда, когда выходной буфер пуст. Поэтому оператор, устанавливающий 
Значение Response .Buffer равным False (ИЛИ True) ДОЛЖеН наХОДИТЬСЯ В ASP- 
странице перед любым статическим HTML-кодом (включая и дескрипторы 
<htmi> и <body>) и операторами, помещающими данные в выходной буфер. 
В предыдущем примере обработчик сценариев опять помещает сообщение 
"Пожалуйста, подождите. Выполняется обработка запроса..." В ВЬМДЕИ бу- 
фер. Но на этот раз Web-сервер посылает HTML-дескрипторы и текст этого со- 
общения сразу же, как только сервер обнаруживает их в выходном потоке HTM L. 
После того, как обработчик сценариев выполнит запрос и выдаст сумму всех 
продаж и дескрипторы </body> и </htmi> (в данном случае — через 30 секунд), 
сервер отправит данные для отображения браузеру (см. рис. 11.3). 
Ь-ШИЗ 
I Назад 
http.//hi-nlTvebdes 
Останов. Обновить Домой 
gn/Chapterl VChpti 1 Fig! 103 asp 
n 
Поиск Из 
i l 
зранн . Журнал 
Пожалуйста, подождите. Выполняется обработка запроса... 
Общая сумма продаж: 52095.1 
Рис. 11*3. Результат отображения содержимого небуферизованного выходного потока 
HTML 
Метод Response. Flush сообщает Web-серверу, что содержимое выходного бу- 
фера нужно немедленно послать браузеру; в это время обработчик сценариев бу- 
дет продолжать обработку сценария. Содержимое выходного потока можно сбро- 
сить клиенту (т.е. отправить его содержимое браузеру) в любой момент, когда вы 
захотите показать частичные результаты или сообщения о состоянии, в процессе 
завершения обработки сценария. Вывод промежуточных результатов может успо- 
коить посетителя и удержать его от перехода, чтобы он дождался результатов 
сложного запроса. Для использования метода Response.Flush необходимо про- 
сто вставить в ASP-сценарий следующую строку: 
<% Response.Flush%> 
Пусть, например, ваш сценарий должен выполнить три запроса, каждый из 
которых выполняется 20 секунд. Чтобы за ту минуту, когда генерируется оконча- 
тельный результат, посетитель не подумал, что система зависла, ему можно выда- 
вать промежуточные итоги с помощью кода наподобие следующего:

Глава 11. Активные серверные страницы (ASP) 5 6 7 
CONST oConnection = _ 
11DRIVER={MySQL} ; SERVER=NVBizNet;UID=root ;PWD=; DATABASE=hwdtt" 
DIM connObj 
DIM officelSales, office2Sales, office3Sales 
Response.Buffer = true 
Response.Write 
"<!DOCTYPE HTML PUBLIC " " -//W3C//DTD HTML 4 . 0//EN" ">" '. 
Response.Write "<headxtitle>yправление выходным потоком HTML 
</titleX/headXhtmlXbody>" 
Response.Write 
"<р>Пожалуйста, подождите. Выполняется обработка запроса...</р>" 
1 <Операторы подготовки и выполнения запроса 1> 
Response. Write "Выполнен запрос 1 из 3. Продажи по офису 1 = " &_ 
officelSales & "<br>" 
Response.Flush 
' «Эператоры подготовки и выполнения запроса 2> 
Response. Write "Выполнен запрос 2 из 3. Продажи по офису 2 = " & _ 
office2Sales & "<br>" 
Response.Flush 
' «Эператоры подготовки и выполнения запроса 3> 
Response. Write "Выполнен запрос 3 из 3. Продажи по офису 3 = " &_ 
office3Sales & "<br>" 
Response.Flush 
Response.Write "Общая сумма продаж: " &_ 
(officelSales + office2Sales + office3Sales) 
</body> 
</html> 
Вызывать метод Response. Flush можно только тогда, когда свойство 
Response. Buffer установлено раВНЫМ True. Попытка ВЫЗОВа Response. Flush 
при Response.Buffer, равном False, приведет к ошибке времени выполнения. 
Обратите внимание, что при каждом сбросе выходного буфера HTML происхо- 
дит добавление его содержимого к тому, что уже отображено в окне браузера. 
Поэтому или используйте операторы позиционирования CSS для перезаписи вы- 
веденного содержимого, или между сообщениями о состоянии вставляйте деск- 
рипторы <br>. 
Метод Response.clear стирает из выходного буфера всю информацию, кроме 
HTTP-заголовков ответа. Таким образом, если в вашей ASP-странице содержится 
статический HTML-код, и/или обработчик сценариев что-то вывел в выходной 
поток HTML, можно вызвать метод Response.clear и начать заново с пустой 
Web-страницы. Как и в случае метода Response.Flush, перед этим свойство 
Response. Buffer ДОЛЖНО быть установлено раВНЫМ True, Иначе ВЫЗОВ 
Response.clear вызовет ошибку времени выполнения. 
Метод Response. clear можно использовать и после вывода промежуточных 
результатов, чтобы посетитель сайта увидел окончательный результат на страни- 
це, не содержащей сообщений о состоянии и промежуточных итогов. Например, 
В Предыдущем Примере МОЖНО Заменить Два ПОСЛеДНИХ ВЫЗОВа Response.Write 
на следующий код:

568 Глава 11. Активные серверные страницы (ASP) 
Response.Clear 
Response.Write "<!DOCTYPE HTML PUBLIC""-//W3C//DTD HTML 4.0//EN"">" 
Response. Write "<htmlXbody>" 
Response. Write "Суммы продаж : по офисам и Bcero</titleXbody>" 
Response.Write "Продажи по офису 1: " & officelSales & "<br>" 
Response.Write "Продажи по офису 2: " & office2Sales & "<br>" 
Response.Write "Продажи по офису 3: " & office3Sales & "<br>" 
Response .Write "Общая сумма продаж: " &_ 
(officelSales + office2Sales + office3Sales) 
Если нужно прекратить выполнение сценария и отправить браузеру всю 
накопленную выходную информацию, можно воспользоваться методом 
Response.End. После вызова Response.End обработчик сценариев больше не об- 
рабатывает операторы сценария и не посылает оставшийся статический 
HTML-код, который может встретиться далее в тексте ASP-страницы. Метод 
Response.End можно задействовать для прекращения выполнения сценария, если 
обнаружится, что невозможно выполнить какую-либо часть сложной процедуры. 
Например, предположим, что недоступна база данных второго офиса, и поэтому не- 
возможно вычислить общую сумму продаж. После проверки кода ошибки, который 
вернет оператор открытия базы данных, выполнение сценария можно прекратить, 
вставив в него следующий код: 
• errorOnConnect 
Response.Write "Запрос не выполнен! Данные по офису 2 недоступны." 
Response.Write " </bodyX/html>" 
Response.End \ 
End If 
Обратите внимание, что сценарий выводит дескрипторы </body> и </htmi> в 
выходной поток HTML до вызова метода Response.End. Запомните, что вызов 
Response.End прекращает дальнейшую обработку сценария. Более того, обработ- 
чик сценариев не будет копировать в выходной буфер оставшийся на ASP-стра- 
нице статический HTML-код (наподобие дескрипторов </body> и </htmi>, сле- 
дующих за сценарием). 
Предотвращение вывода браузером устаревших 
ASP-страниц 
Возможно, вы заметили, что при первом заходе на какую-либо Web-страницу 
браузеру на ее получение и отображение требуется больше времени, чем при 
последующих посещениях этой страницы. Причина этой заметной разницы в 
скорости загрузки часто состоит в кэшировании Web-страницы. При первом по- 
сещении Web-страницы ваш браузер должен получить страницу с сервера. Но 
после этого браузер может отобразить ту же самую страницу из кэша браузера, 
который находится на (локальном) жестком диске. Например, на Windows-маши- 
не Internet Explorer кэширует посещаемые вами Web-страницы — вместе с рисун- 
ками, звуком и другими мультимедийными файлами, используемыми на них — 
На жесТКОМ ДИСКе В папке C:\Windows\TemporaryInternet Files. ЕСЛИ рабо- 
тать только со статическими страницами, то кэширование и выборка Web-стра-

Глава 11. Активные серверные страницы (ASP) 5 6 9 
ниц с локальногоч жесткого диска (или с жесткого диска proxy-сервера, если дос- 

туп в Internet осуществляется через него) не вызывает проблем. Однако ASP- 
страницы динамичны по самой своей природе. К сожалению, с точки зрения 
браузера Web-страница, сгенерированная обработчиком сценариев, представляет 
собой обычный статический Web-документ с расширением .asp. Поскольку .asp 
в конце имени файла для браузера не означает ничего особого, он кэширует 
ASP-страницы и выбирает их из кэша. В результате Web-страница, отображаемая 
браузером при повторном посещении страницы, может не совпадать с тем, что 
вы увидели бы, если бы браузер получил страницу не из кэша, а от сервера. 
Свойства Response.Expires И Response.ExpiresAbsolute ПОЗВОЛЯЮТ запре- 
тить браузеру отображать устаревшее содержимое, устанавливая для кэшируемых 
файлов дату и/или время окончания их годности. До истечения этого срока бра- 
узер не запрашивает Web-страницу с сервера, а отображает ее из кэша. Но после 
истечения срока годности копии браузер при посещении этой страницы должен 
выгрузить из Web-сервера ее "свежую" копию. 
ПРАКТИКУМ 
Пусть, например, существует ASP-страница, содержимое которой меняется раз в 
месяц/Если вы вносите изменения 1 января 2003 года, необходимо вставить в сце- 
нарий, генерирующий содержимое ASP-страницы, следующий оператор: 
<% R e s p o n s e . E x p i r e s A b s o l u t e = #01/31/2003# %> 
Установив в сценарии дату (и время) окончания годности страницы на тот 
момент, когда встроенные в страницу сценарии изменят ее содержимое, можно 
предотвратить получение посетителем устаревшей кэшированной информации. 
СиНТаКСИС Оператора установки СВОЙСТВа Response.ExpiresAbsolute ВЫГЛЯ- 
ДИТ так: 
Response.ExpiresAbsolute = #<дата конца> [<время конца>]# 
Таким образом, в предыдущем примере срок действия всех кэшированных ко- 
пий ASP-страницы, измененных 01/01/2003, заканчивается в полночь 31/01/ 
2003. (ЕСЛИ При установке СВОЙСТВа Response.ExpiresAbsolute ОПуСТИТЬ Время, 
то оно считается полночью даты окончания срока годности.) Если нужно, чтобы 
кэшированная страница была годна до 15:15 01/02/2003, потребуется написать 
<% Response.ExpiresAbsolute = #02/01/2003 3:15:00pm# %> 
Установка конкретной даты и/или времени окончания годности требует руч- 
ного редактирования сценария (для изменения срока годности) в начале каждого 
нового периода. Поэтому, видимо, более удобно задавать срок годности кэширо- 
ванной страницы в виде количества минут, а не конкретной даты (и времени). 
Пусть, например, есть ASP-страница, показывающая курс акций, и ваш Web-сер- 
вер получает новые котировки каждые 15 минут. Чтобы кэшированное содержи- 
мое было актуальным, Можно с помощью метода Response.Expires задать коли- 
чество минут до истечения срока годности страницы, используя следующий 
синтаксис: 
Response.Expires = <минуты>

570 Глава 11. Активные серверные страницы (ASP) 
Таким образом, чтобы браузер запрашивал ASP-страницу с Web-сервера, если 
кэшированные данные загружены более 15 минут назад, нужно в сценарий, гене- 
рирующий содержимое ASP-страницы, добавить следующий оператор: 
<% Response .Expires = 15 %> 
И, наконец, чтобы Web-браузеры не отображали устаревшие страницы, необ- 
ходимо еще помнить о тех proxy-серверах, которые не поддерживают дату (и вре- 
мя) конца срока годности. Если посетитель входит в Internet через proxy-сервер, 

то proxy-сервер (как и Web-браузер) сохраняет в кэше на своем локальном жест- 
ком диске копии полученных Web-страниц. Когда браузер запрашивает страницу, 
уже находящуюся в кэше proxy-сервера, тот не выбирает заново эту страницу с 
сервера, а посылает браузеру страницу из кэша. Таким образом, после истечения 
срока годности страницы в кэше браузера он отправляет запрос Web-серверу на 
получение новой страницы. Но если proxy-сервер игнорирует срок годности кэ- 
шированной страницы, то он пошлет браузеру страницу с устаревшим содержи- 
мым из своего кэша. 
Чтобы исключить получение устаревших ASP-страниц от proxy-сервера, следу- 
ет установить СНЖЖ) Response.CashControl равным "Private". ЕСЛИ оставить 
значение свойства Response. CashControl установленным по умолчанию, то есть 
"Public", proxy-сервер сохранит страницу в папке кэша на своем жестком диске. 
Но еСЛИ установить Значение СВОЙСТВа Response.CashControl раВНЫМ "Private", 
то он не будет так поступать. Значит, для обеспечения выборки Web-страницы с 
Web-сервера при каждом обращении к ней нужно до или после оператора уста- 
новки даты и/или времени годности страницы вставить следующий оператор: 
<% Response.CashControl= "Private" %> 
Перенаправление Web-браузера на другую страницу 
Когда пользователи работают в Internet, они часто ставят закладки (т.е. добав- 
ляют их в список избранных сайтов) на страницы, к которым они хотят еще воз- 
вращаться. И хотя повторный вход по URL-адресу обычно не вызывает проблем, 
иногда нужно запретить посетителям входить напрямую в некоторые страницы 
вашего сайта. Предположим, например, что вы хотите, чтобы перед просмотром 
содержимого сайта пользователь сначала ввел пароль или зарегистрировался. 
Если посетитель с помощью закладки входит сразу на страницу с информацией, 
минуя авторизацию, то потребуется найти способ автоматического перенаправле- 
ния этого посетителя на Web-страницу с формой авторизации или регистрации. 
Метод Response.Redirect дает, возможность перенаправить посетителя сайта с 
запрошенной Web-страницы на другую. 
ПРАКТИКУМ 
Кроме перенаправления посетителя на другую страницу для того, чтобы он ввел 
пароль, этим приемом можно пользоваться и для распределения нагрузки между 
несколькими Web-серверами или если ваш сайт сменил адрес. Предположим, на- 
пример, ЧТО у вас работают Два* сервера: NVBizNet.com И NVBizNet.com, И ВЫ ХО-

Глава 11. Активные серверные страницы (ASP) 
тите равномерно распределить нагрузку между ними для увеличения общей про- 
изводительности. Поэтому вы переместили часть сайтов с сервера NVBizNet.com 
на NVBizNet.com. Но посетители могли ранее установить закладки на домашние 
страницы сайтов на первоначальном сервере (NVBizNet.com). Для перенаправле- 
ния посетителей, которые пытаются на сервере NVBizNet.com найти сайты, кото- 
рые находятся уже на NV9izNet.com, нужно в начале ASP-страниц, расположен- 
ных на NVBizNet.com, вставить следующий код: 
<% Response.Redirect "http://www.NVBizNet.com/default.asp" %> 
При ВЫПОЛНеНИИ ИНТерпретаТОрОМ Сценариев Метода Response.Redirect ОН 
действует немедленно. Обработчик сценариев больше не обрабатывает никаких 
операторов на текущей ASP-странице. Вместо этого сервер посылает браузеру со- 
общение с указанием запросить другую Web-страницу. Значит, в нашем примере 
браузер сначала посылает сообщение на NVBizNet.com с запросом некоторой 
ASP-страницы. Но вместо того, чтобы послать браузеру страницу (находящуюся 
теперь на другом сервере), сервер NVBizNet.com посылает сообщение о перенап- 
равлении, согласно которому браузер должен запросить файл default. asp с сер- 
вера NVBizNet.com. После чего браузер запрашивает и отображает домашнюю 
страницу default. asp уже с нового сервера. 
Кроме отсылки посетителя на сайт, находящийся на другом Web-сервере, или 
на другой сайт на том же сервере, метод Response. Redirect можно использо- 
вать и для отсылки посетителя с одной страницы на другую в пределах одного и 
того же сайта. Если новая страница, которую должен получить браузер, нахо- 
дится на том же сайте, то из URL-адреса, указываемого в методе 
Response.Redirect, потребуется убрать "http://" и доменное имя сервера, тог- 
да адрес новой страницы получится относительным. Пусть, например, вы хотите 
запретить посетителям сразу заходить на ASP-страницы, предназначенные толь- 
ко для зарегистрированных пользователей — в обход формы ввода имени и паро- 
ля. Тогда в начало каждой ASP-страницы, которую вы хотите защитить подоб- 
ным образом, необходимо вставить код наподобие следующего: 
<%
DIMreferer, wwwReferer 
wwwReferer = Left(Request.ServerVariables("HTTP_REFERER"), 30) 
referer = Left(Request.ServerVariables("HTTP_REFERER"), 26) 
If ucase (wwwReferer) <> "HTTP://WWW.NVBIZNET.COM/HWDTT/" And _ 
ucase(referer) <> "HTTP://NVBIZNET.COM/HWDTT" Then 
Response.Redirect "/loginScreen.asp" 
End If 
%> 
Если посетитель вводит URL-адрес Web-страницы в адресной строке брау- 
зера или выбирает страницу из списка "Избранное" (или закладок), то 
"HTTP REFERER" в посылаемом браузером HTTP-запросе содержит пустое зна- 
чение. Если же посетитель щелкнул на гиперссылке, браузер посылает серверу 
HTTP-запрос, в котором значение "HTTP_REFERERM равно URL-адресу Web- 
странйцы, содержащей эту гиперссылку. Таким образом, если в предыдущем 
примере посетитель обращается к Web-странице после ввода пароля (в форме

5 72 Глава 11. Активные серверные страницы (ASP) 
авторизации) или в результате щелчка на гиперссылке на любой другой 
странице, находящейся в папке /hwdtt сервера NVBizNet.com, то вызов мето- 
да Request. ServerVariables вернет СТрОКу, начинающуюся С http:// 
www.NVBizNet.com/hwdtt/ ИЛИ http://NVBizNet.com/hwdtt/: 
Request.ServerVariables("HTTP_REFERER") 
Этот оператор возвращает значение MHTTP_REFERER", которое браузер вставля- 
ет в HTTP-запрос, отправляемый Web-серверу. 
Чтобы использовать приведенный выше сценарий на своих Web-страницах, 
подставьте в оператор if адрес и путь к папке, содержащей информацию для за- 
регистрированных пользователей. Кроме того, в предпоследней строке сценария 
URL-адрес, передаваемый методу Response.Redirect, необходимо заменить 
URL-адресом страницы авторизации вашего сайта. 
ПОСКОЛЬКУ метод Response. Redirect ДЛЯ указания, ЧТО браузер ДОЛЖен Обра- 
титься к другой Web-странице, использует заголовок HTTP-сообщения, то этот 
метод может быть вызван сценарием только если выходной буфер HTML пуст 
(или содержит лишь HTTP-заголовок). Если требуется перенаправить браузер на 
другую страницу после того, как сценарий уже сгенерировал часть HTML-кода 
страницы, нужно сначала очистить выходной буфер с помощью метода 
Response.Clear. Затем МОЖНО ВЫЗВаТЬ меТОД Response.Redirect, перенаправля- 
ющий браузер на другую страницу. 
Хранение значений переменных между 
HTTP-запросами в cookie-наборах 
Как уже упоминалось ранее, отношение клиент-сервер между Web-браузером 
и Web-клиентом "не имеет состояния". Сервер не сохраняет информацию о кли- 
енте в промежутках между его запросами. Обычно сервер ждет, когда (любой) 
браузер отправит ему HTTP-запрос. После получения запроса сервер отвечает на 
него, ничего не помня о предыдущих соединениях (если они были) с браузером, 
приславшим запрос. Но если ваш сайт предназначен только для зарегистриро- 
ванных пользователей или для онлайновой торговли, то нужно как-то отслеживать 
посетителя, когда он переходит со страницы на страницу. В противном случае 
посе- 
титель должен будет постоянно регистрироваться, поскольку запрос на Web-страни- 

цу не дает возможности серверу узнать, зарегистрирован ли уже посетитель. 
Cookie-набор - это небольшой текст, который браузер по просьбе сервера за- 
писывает в cookie-файле Web-сайта на компьютере пользователя. Многие пользо- 
ватели считают это посягательством на права личности и отключают в браузере 
возможность сохранять cookie-наборы или, по крайней мере, заставляют браузер 
запрашивать разрешение перед их записью. Однако cookie-набор может содер- 
жать лишь данные, добровольно предоставленные пользователем, или общую ин- 
формацию о его соединении (взятую из HTTP-заголовка запроса Web-страницы). 
Более того, браузер посылает серверу лишь те cookie-наборы, которые сервер 
ранее послал браузеру для записи. Так что если вы посетите сайты 
www.NVBizNet.com и www.yahoo.com, ваш браузер не пошлет серверу сайта

Глава 11. Активные серверные страницы (ASP) 573 
Yahoo.com информацию, сохраненную браузером при посещении сайта 
NVBizNet.com, И наоборот. 
ПРАКТИКУМ 
Используйте для установки значений cookie-переменных коллекцию 
Response. Cookies, а ДЛЯ ИХ выборки — КОЛЛекцИЮ Request.Cookies. Напри- 
мер, чтобы создать cookie-набор на один сеанс — т.е. cookie-набор, который хра- 

нится в системе пользователя лишь до тех пор, пока он не выйдет из Web-брау- 
зера — ваш сценарий должен задать только имя cookie-переменной и ее 
значение, используя следующий синтаксис: 
Response.Cookies("<имяСоок1еПеременной>") = 
"<значениеСоок1еПеременной>" 
Таким образом, чтобы установить значения односеансовых cookie-переменных 
f irstName И lastName соответственно В "Конрад" И "Кинг", В ASP-СЦенариЙ ПО- 
требуется поместить следующий код: 
<%
Response.Cookies("firstName") = "Конрад" 
Response.Cookies("lastName") = "Кинг" 
Если cookie-значение требуется сделать постоянным (т.е. чтобы оно остава- 
лось и после завершения сеанса), нужно присвоить его свойству Expires либо 
конкретную дату, либо промежуток времени. После окончания срока действия 
cookie-переменной браузер при HTTP-запросе серверу больше не будет посылать 
пару имя/значение cookie-переменной. Например, чтобы установить срок годно- 
сти cookie-переменной userName до 5 декабря 2003 года, используйте следую- 
щий оператор: 
<% Response.Cookies("userName").Expires = "December 5, 2003" 
Аналогично для установки срока годности переменной userName в 30 дней, 
начиная с сегодняшнего», можно использовать встроенную функцию Date() язы- 
ка VBScript: 
<% Response.Cookies ("userName") .Expires = Date + 30 %> 
Предположим, например, что ваш сайт содержит форму регистрации посети- 
теля наподобие приведенной на рис. 11.4, в которой текстовые элементы называ- 
ются firstName, lastName, streetAddressl, streetAddress2, city, state, 
zipCode И eMailAddress. 
Вы можете сохранить до даты, заданной в параметре expDate, имя посетите- 
ля, его почтовый адрес и адрес электронной почты, воспользовавшись в сцена- 
рии регистрации на своем сайте вызовом следующей подпрограммы: 
<% 
1 Подпрограмма "StoreCookie" сохраняет значение cookie-переменной 
Sub StoreCookie(cookieName, cookieValue, expDate) 
Response.Cookies(cookieName) = cookieValue 
Response.Cookies(cookieName).Expires = expDate 
end sub

574 Глава 11. Активные'серверные страницы (ASP) 
Сохранить имя, почтовый адрес и адрес e-mail в cookie-файле 
для дальнейшего использования 
.StoreCookie "firstName",Request.Form("firstName"), Date + 30 
StoreCookie "lastName",Request.Form("lastName"), Date + 30 
StoreCookie "streetAddressl",Request.Form("streetAddressl"), 
Date + 30 
StoreCookie "streetAddress2",Request.Form("streetAddress2"), _ 
Date + 30 
StoreCookie "city",Request.Form("city"), Date + 30 
StoreCookie "state",Request.Form("state"), Date + 30 
StoreCookie "zipCode",Request.Form("zipCode"), Date + 30 
StoreCookie "eMailAddress",Request.Form("eMailAddress"), 
Date + 30 
Response.Redirect "Figurell-04Welcome.asp" 
З^айя OP66*0 ЙИЙ избранное Сервис ^правка 
::йдрес|е]М1р//ы 
Остан 
Tikvebdestgn/ChRp 
в... ОС 
а ;; я :•• • j 
ptllFigll(]4asp 
Поиск Избрянн... Журне 
ц
л 
d 
HTML & Web Design Tips & 
Techniques 
Имя: 
Фамилия: 
Адрес 1: 
г Адрес 2: 
Город: 
Адрес E-Mail: 
Сохранить 
• 
Штат: 1 Почтовый код: 1 
Сброс | 
Рис. 11.4. Регистрационная форма, сохраняющая в cookie-файле имя посетителя, 
его почтовый адрес и адрес e-mail 
Если посетитель до истечения срока годности cookie-переменных посещает 
сайт еще раз, то с помощью метода Request.cookies можно загрузить значения 
cookie-переменных в поля ввода регистрационной формы, как показано ниже: 
•<form name="RegistrationForm" action="RegisterVisitor.asp" 
method="POSTM> 
With Response 
.Write"Имя: <input type='text' name='firstName'" &_ 
Msize='4O' value=' " & request.Cookies("firstName") & 
.Write "Фамилия: <input type='text' name='lastName'" & 
"size='40fvalue=' " & request .Cookies("lastName") & 
.Write"Адрес 1: <input type='text' " &_ 
"name='streetAddressl' size=!40' value= ' " &_ , • 
request. Cookies ("streetAddressl") &" fXbr>" 
'Xbr>" 
'Xbr>"

Глава 11. Активные серверные страницы (ASP) 57 5 
.Write "Адрес 2: <input type='text' " & _ 
"name='streetAddress2' size='4O' value='" &_ 
request.Cookies (TlstreetAddress2'T) &" 'Xbr>" 
.Write "Город : < input type= ' text' палпе='city' " &_ 
"size='4O' value='" & request .Cookies ("city") &" 'Xbr>" 
.Write "Штат: < input type='text' name=' state' " &_ 
"size='4 ' value= ' " & request .Cookies (" state") &_ 
"'>&nbsp;&nbsp;M 
.Write "Почтовый код: <input type='text' name='zipCode'" & _ 
"size='10' value=' " & request. Cookies ("zipCode") &"'Xbr>" 
.Write "Адрес E-Mail: <input type='text' " &_ 
Mname='eMailAddress' size='4O' value='" &_ 
request. Cookies ("eMailAddress") & " 'XbrXbr>" 
End With 
<input type="submit" value="Save" /> &nbsp;&nbsp; 
<input type="reset" /> 
</form> 
Чтобы уничтожить cookie-переменную, достаточно присвоить ей пустую стро- 
ку или установить ее свойство Expires равным какой-нибудь дате (или времени) 
в прошлом. Например, любой из нижеследующих операторов уничтожает cookie- 
переменную с именем userName из cookie-файла Web-сайта: 
<% Response.Cookies("userName") = "" %> 
<% Response.Cookies("userName").Expires = Date - 1000 %> 
Получение данных из формы с помощью 
коллекции Form 
Получение данных, введенных в элементы HTML-формы, позволяет ASP-сце- 
нариям настраивать содержимое страницы в соответствие с требованиями и по- 
желаниями посетителей сайта. Конечно, сценарии на стороне сервера и без вве- 
денной пользователем информации могут вставлять динамическую информацию 
вроде текущих даты и времени, котировок акций, информации о погоде и т.д. 
Но текущее время и температура в Киеве вряд ли интересует жителя Бердичева. 
Аналогично, текущий курс акций фирм Microsoft и General Motors мало чем 
пригодится владельцам акций других компаний и вообще не интересен держате- 
лю облигаций. Чтобы быть полезными, сценарии на стороне сервера, генерирую- 
щие содержимое страницы, должны сначала выяснить, о чем бы хотел узнать по- 
сетитель, а потом предоставить ему запрошенную информацию. К счастью, 
Web-сервер может предоставить вашему сценарию данные, введенные в HTML- 
форму, в виде коллекции пар имя/значение в ASP-объекте Request. 
После того как посетитель заполнит текстовые элементы формы, выберет зна- 
чения переключателей и списков выбора и щелкнет на кнопке отправки формы, 
браузер посылает данные, принятые из формы, серверу. Атрибуты action и 
method дескриптора <form> сообщают Web-серверу, куда отправить данные и как 
они "упакованы" браузером. Если в атрибуте action дескриптора <form> указан 
URL-адрес ASP-страницы, то сервер передает страницу, заданную этим атрибу- 
том, обработчику ASP-сценариев. В зависимости от значения атрибута method

57 6 Глава 11. Активные серверные страницы (ASP) 
(GET или POST), сервер заносит данные, принятые из формы, либо в коллек- 
цию QueryString, либо В КОЛЛекЦИЮ Form объекта Request. 
Если атрибут method дескриптора <form> равен GET, браузер добавляет дан- 
ные, принятые из формы, в конец URL-адреса, а сервер помещает их в коллек- 
цию Request.QueryString. АнаЛОГИЧНО, eGM method равен POST, браузер ПОСЫ- 
лает данные, принятые из формы, в теле HTTP-сообщения, а сервер передает их 
Сценарию В КОЛЛекЦИИ Request. Form. 
Предположим, например, что ваша страница содержит следующее определе- 
ние формы: 
<form action="http://www.NVBizNet.com/HWDTT/FormResults.asp" 
method="POST"> 
Имя: <input type="text" name="firstName" size="20"> <br> 
Фамилия: <input type="text" name="lastName" size="20"> <br> 
E-mail: <input type="text" name="eMailAddr" size="30"> <br> 
<input type="submit" value="Отправить"> 
<input type="reset" value="Очистить"> 
</form> 
После щелчка пользователя на кнопке "Отправить" браузер с помощью метода 
POST посылает данные, принятые из формы, Web-серверу. После этого сервер 
выбирает из HTTP-сообщения, посланного браузером, данные, принятые из фор- 
мы, в виде пар имя/значение и заносит их в коллекцию ASP-страницы 
Request.Form. 
ПРАКТИКУМ 
Коллекция ASP-страницы — это массив значений, которые сценарий может вы- 
бирать по числовому индексу или по ключевому слову. Удобно, что сценарий 
для доступа к значению элемента коллекции Request.Form может в качестве 
ключевого слова использовать имя элемента формы. Поэтому для доступа к дан- 
ным, принятым из формы, которая определена в предыдущем примере, можно 
воспользоваться следующим сценарием: 
<html> 
<body> 
<%
DIM firstName, lastName, eMailAddr 
' Получение данных, введенных в форму 
firstName = Request.Form("firstName") 
lastName = Request.Form("lastName") 
eMailAddress = Request.Form("eMailAddr") 
' Отображение введенных данных 
With Response 
.writer"<Ь>Имя: </b>" & firstName & "<br />" 
.write "<Ь>Фамилия: </b>" & lastName & "<br />" 
.write "<b>E-mail: </b>" & eMailAddress & "<br />" 
End With 
, .%> 
</body> 
</html>

Глава 11. Активные серверные страницы (ASP) 5 7 7 
Хотя приведенный сценарий просто получает и затем выводит данные, при- 
нятые из формы, в коллекцию Request.Form, ваш сценарий может делать со 
значениями, введенными в HTML-форму, все, что заблагорассудится. Важно 
лишь знать, что значение элемента формы можно получить из коллекции 
Request.Form. 
Если выбирать данные, полученные из формы, не по ключевому слову, а по 
индексу, можно создать универсальный сценарий подтверждения, отображающий 
имена элементов формы и введенные или выбранные значения. Для выборки ре- 
зультатов по имени нужно при написании сценария знать имена элементов фор- 
мы. Польза создания универсальной страницы подтверждения состоит в том, что 
можно написать один сценарий, который сможет отображать данные, введенные 
в формы с различным количеством элементов и различными их именами. На- 
пример, следующий сценарий можно вставить в ASP-страницу для отображения 
имен и значений элементов, принятых из любой формы, пославшей набор введен- 
ных данных: 
<html> 
<body> 
<%
DIM i 
' Отображение имен элементов и их значений 
With Response 
For i = 1 То Request .Form.Count 
.write "<b>" & Request.Form,Key(i) & " </b>" . Request.Form<i) & '*<br/>" 
Next 
End With 
%> 
</body> 
</html> 
У КОЛЛекЦИИ Request. Form еСТЬ ОДНО СВОЙСТВО (Count) И два Метода (item И 
Key). При добавлении в коллекцию элементов (Item — значение элемента) и их 
ключей (Key — имя ключа) Web-сервер запоминает количество добавленных эле- 
ментов в свойстве count (Count - количество) коллекции. Поэтому в данном 
примере свойство. Request.Form.Count содержит количество пар имя/значение, 
принятых из формы и переданных браузером серверу. Для работы с "именами" 
(Т.е. С "ключами") КОЛЛеКЦИИ НУЖНО ИСПОЛЬЗОВаТЬ МетОД Request. Form.Key, КОТО- 
РЫЙ позволяет выбирать часть "имя" из пар имя/значение коллекции. Аналогично 
для работы со значениями, хранящимися в коллекции, используется метод 
Request.Form. item, выбирающий часть "значение" из пар имя/значение коллек- 
ции. 
Обратите внимание, что исходный код можно слегка сократить, опуская item 
при выборке из коллекции значений элементов формы, как показано ниже: 
Response.Write "<b>" & Request. Form.Key (1) & " </b>" & 
Request .Form.Item(l) & "<br />" 
Response . Write "<b>" & Request. Form. Key (1) & " </b>" &_ 
Request. B^H (1) &"<br/>" 
Оба оператора в данном примере дают один и тот же результат.

5 7 8 Глава 11. Активные серверные страницы (ASP) 
Получение данных из формы с помощью 
коллекции QueryString 
С помощью HTML-форм у посетителя сайта можно запросить некоторую ин- 
формацию. На сайте электронной коммерции посетители выбирают товары, вво- 
дят детали платежа и инструкции по доставке с помощью форм. До выполнения 
покупки посетители с помощью форм могут зарегистрироваться на сайте или ис- 
кать данные о товаре или его установке и пользоваться описаниями продаваемых 
товаров. Некоммерческие сайты также применяют формы, чтобы пользователи 
могли войти в систему и выполнять транзакции (например, переводить деньги 
со счета на счет или покупать акции) или получать информацию (например, ко- 
тировки акций, прогноз погоды или репертуар местных кинотеатров). Короче го- 
воря, с помощью форм посетитель может запросить нужное ему содержимое, ко- 
торое должен ему предоставить ASP-сценарий, выполняющийся на Web-сервере, 
или выполнить требуемый сценарий. 
Чтобы не нарушить конфиденциальность данных, принятых из формы, в дес- 
крипторе <form> следует установить атрибут method равным POST — тогда брау- 
зер отправит эти данные в теле HTTP-сообщения. Метод POST можно использо- 
вать для приема подробностей заказа или имени, адреса и номера телефона 
посетителя. Если же форма содержит очень важные данные, такие как номер 
кредитной карточки, имя пользователя и его пароль или номера счетов, то мож- 
но установить защищенное соединение между браузером и сервером. При ис- 
пользовании метода POST для пересылки данных, принятых из формы, по защи- 
щенному соединению данные передаются через Internet в теле HTTP-сообщения 
в зашифрованном виде. 
И наоборот, если вы хотите записывать данные, принятые из формы, в файле 
протокола на сервере для последующего анализа или же позволить посетителям 
создавать закладки (или список избранных данных), которые можно использо- 
вать в дальнейшем для автозаполнения формы, то атрибут method дескриптора 
<form> следует установить в GET. Если при приеме данных из формы использу- 
ется метод GET, браузер тоже пересылает имя и значение каждого элемента фор- 
мы по URL-адресу, заданному атрибутом action дескриптора <form>. Но вместо 
"упрятывания" данных в теле HTTP-сообщения (как при использовании метода 
POST) в случае применения метода GET браузер добавляет строку пар имя/зна- 
чение в конец URL-адреса, по которому пересылаются данные. 
Пусть, например, у вас создана страница со следующим определением формы: 
<f orm action="http://www.NVBizNet.com/HWDTT/StockQuotes.asp" 
method="GET"> 
<table> 
<trXth colspan=M3">Tpe6yeMbie курсы aicijrai</thx/tr> 
<trXto!Xinput type="text" name="sl" size="6"X/td> 
<tdxinput type="text" name="s2" size="6"X/td> 
<tdxinput type="text" name="s3" size="6"X/td> 
<trxtdxinput type="text" name=ns4" size="6"X/td> 
<tdXinput type="text" name="s5" size="6"X/td> 
<tdxinput type="text" name=ns6" size="6"X/td> 
</table>

Глава 11. Активные серверные страницы (ASP) 5 7 9 
<pXinput type="submit" value="Отправить"> 
<input type="submit" value="Очистить"X/p> 
</form> 
После щелчка посетителя на кнопке "Отправить11 браузер посылает серверу 
данные, введенные в форму, с помощью метода GET. Метод GET указывает брау- 
зеру добавить принятые из формы данные в конец URL-адреса, заданного атри- 
бутом action дескриптора <form>. To есть в данном случае браузер добавит дан- 
ные ИЗ форМЫ К адресу http://NVBizNet.com/HWDTT/StockQuotes.asp, как 
показано в адресной сроке Web-браузера на рис. 11.5. 
ПРАКТИКУМ 
Когда HTTP-сообщение с данными, принятыми из формы, достигает Web-сер- 
вера, он копирует пары имя/значение из URL-адреса в ASP-коллекцию 
Request.QueryString. ASP-КОЛЛеКЦИЯ - ЭТО маССИВ Значений, К КОТОРЫМ СЦена- 
рий может обращаться либо по индексу, либо по имени. Для удобства имена 
элементов формы и есть те "ключевые слова", которые должен использовать 
сценарий для выборки значений элементов по имени из коллекции 
Request.QueryString. ТаКИМ обраЗОМ, ДЛЯ ВЫборКИ даННЫХ, ПОЛучеННЫХ ИЗ фор- 
мы, определенной в предыдущем примере, можно использовать операторы из 
первой половины следующего сценария: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"> 
<html> 
<body> 
<%
DIM symbol (6) , i 
1 Получение данных, введенных в форму 
symbol(l) — Request.QueryString("si") 
symbol(2) = Request.QueryString("s2") 
symbol(3) = Request.QueryString("s3") 
symbol(4) = Request.QueryString{"s4") 
symbol(5) = Request.QueryString("s5") 
symbol(6) = Request.QueryString("s6") 
Отображение введенных данных 
With Response 
For i=l To Request.QueryString.Count 
.Write "<Ь>Обозначение " & i & "</b>: " & symbol (i) & "<br>" 
Next 
End With 
%> 
</body> 
</html> 
В данном примере сценарий сначала выбирает значения элементов формы по 
ИХ именам ИЗ КОЛЛекЦИИ Request. QueryString И Присваивает ЭТИ Значения ЭЛе- 
ментам массива symbol. Затем для отображения всех значений, принятых из 
Web-страницы, вызывается метод Response.write. Разумеется, ваш сценарий бу- 
дет проводить более осмысленную обработку принятых значений. В любом слу- 
чае важно помнить, что вы выбираете значения, принятые из формы с помощью 
метода GET, ИЗ КОЛЛекЦИИ Request.QueryString. Кроме ТОГО, Значения всех 
элементов можно получить по их именам.

580 Глава 11. Активные серверные страницы (ASP) 
[; 3>вйп •. QpaSKB gufl • Избранное Сервис Справке ' 
S . Назад * г •;•• 
| ;ЙДрес|^з desigti/Chepterii/S 
HTML 
Symbol 1: MSFT 
Symbol 2: VTSS 
Symbol 3: INTO 
Symbol 4: HRP 
Symbol 5: GM 
Symbol 6: VC 
Зствнов.. Обновить Домой Поиа< Избрл 
ockQuotest osp?sl •MSFT&s2-WSS&s3=INTU&s4-HRF 
& Web Design Tips 
Techniques 
О 
•ш... Журнал ^ 
& 
Рис. 11.5. Поле адреса Web-браузера с данными, принятыми из формы 
и отправленными с помощью метода GET 
Вообще-то обычно значения элементов формы выбираются по их именам — 
если эти имена осмысленны. Однако в предыдущем примере имена элементов 
формы никак не описывают их значения. Поэтому в данном случае значения 
элементов формы удобнее выбирать из коллекции Request.Querystring не по 
именам, а по их числовым индексам, как показано ниже: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"> 
<html> 
<body> 
<%
DIM s y m b o l ( 6 ) , I 
1 Получение и отображение имен и значений данных, введенных в форму 
With Response 
For i = 1 To Request. Form. Count 
.write "<b>" & Request.QueryString.Key(i) & ": </b>" 6 _ 
Request.QueryString(i) & "<Ьг />•' 
Next 
End With 
%> 
</body> 
</html> 
Как и все ASP-коллекции, коллекция Request.Querystring имеет одно свой- 
СТВО (count) и два метода (item и Key). При добавлении в коллекцию элементов 
(значений и ключевых имен) сервер запоминает количество элементов, добавлен- 
ных в коллекцию, в ее свойстве Count. Поэтому в данном случае сервер заносит 
в свойство Request.Querystring. Count количество пар имя/значение, обнару- 
ЖеННЫХ В форме. МеТОД Request.Querystring.Key ПОЗВОЛЯеТ ПОЛУЧИТЬ ИМЯ 
пары имя/значение, а метод Request.Querystring. item — значение. Обратите 
внимание, что при обращении к элементу коллекции по индексу или ключевому 
значению неявно вызывается метод item. Поэтому в данном примере, где 
11si" — КЛЮЧ (ТО еСТЬ ИМЯ) ПерВОГО Элемента КОЛЛеКЦИИ Request.Querystring, 
следующие операторы полностью эквивалентны:

Глава 11. Активные серверные страницы (ASP) 581 
Response.Write Request.QueryString.Item(l) 
Response.Write Request.QueryString(1) 
Response.Write Request.QueryString.Item("si") 
Response.Write Request.QueryString ("si") 
Обычно, чтобы не загромождать код, при выборке значений элементов из 
коллекции слово item опускается, как во втором и четвертом операторе данного 
примера. 
Получение информации из коллекции ServerVariables 
С каждым запросом Web-страницы браузер отправляет некоторую информа- 
цию о себе и своем соединении с Internet. ASP-сценарий может воспользоваться 
посылаемой браузером информацией для ограничения доступа к сайту по IP-ад- 
ресу, настройки содержимого страницы в зависимости от конкретного браузера, 
отслеживания пути посетителя на данный-сайт, предупреждения пользователей о 
пересылке важных данных по незащищенному соединению и т.д. 
Web-сервер запоминает данные из HTTP-заголовка и другую информацию, по- 
сылаемую браузером, В КОЛЛекЦИИ Request. ServerVariables. Как И Другие AS P- 
КОЛЛеКЦИИ, КОЛЛекЦИЯ Request. ServerVariables СОСТОИТ ИЗ СПИСКа Имен, наЗЫ- 
ваемых ключами, и связанных с ними значений. Для выборки данных из 
коллекции достаточно просто указать ключ, значение которого требуется полу- 
чить. Например, для выборки и отображения IP-адреса посетителя можно ис- 
пользовать ключ REMOTE_ADDR, как показано в следующем коде: 
<% DIM visitorlPAddress 
visitorlPAddress = Request.ServerVariables("REMOTE_ADDR") 
Response.Write _ 
"<р>Спасибо за то, что зашли на наш сайт. Ваш IP-адрес: " & _ 
visitorlPAddress & "<Ьг>Для исключения несанкционированного " & _ 
"использования вашей кредитной карточки мы будем " & _ 
"записывать ваш IP-адрес в каждой проведенной транзакции.</р>" 
1 ... Другие операторы сценария . . .> 
ПРАКТИКУМ 
Как уже было сказано, коллекция Request .servervariabies содержит информа- 
цию, отправляемую браузером серверу в каждом HTTP-запросе: HTTP-заголовки, 
cookie-наборы, IP-адрес пользователя, строка запроса и URL-адреса запрашивае- 
мой и текущей Web-страниц. Для получения списка всех доступных имен и их 
Значений В КОЛЛекЦИИ Request. ServerVariables (СМ. рИС. 11.6) МОЖНО ВОСПОЛЬ- 
зоваться следующим кодом: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"> 
<html> 
<head> 
<Ъ1Ъ1е>Элементы и их значения коллекции Request.ServerVariables 
</title> 
</head>

582 Глава 11. Активные серверные страницы (ASP) 
<body> 
<% DIM itemName 
For Each itemName In Request.ServerVariables 
Response.Write "<b>" & itemName & " = </b>" &_ 
Request. ServerVariables (itemName) & "<br/>" 
Next 
%> 
</body> 
</html> 
На каждой итерации цикла For-Each сценарий помечает в переменную 
itemName ключ (то есть-имя), связанный с каждым значением элементов коллек- 
ции Request.ServerVariables. Затем он и его значение отображаются на стра- 
нице С ПОМОЩЬЮ метода Request.Write. 
ИСПОЛЬЗУЯ коллекцию Request. ServerVariables, МЗЙЮ Некоторые ASP-CTpa- 
ницы сделать доступными только для посетителей с рабочих станций intranet- 
сети компании. Если ваш Internet-провайдер выделил для компании 256 адресов 
в интервале 24.234.31.ооо—24.234.31.255, можно разрешить доступ только 
компьютерам вашей компании, поместив в начало ASP-файла следующий сцена- 
рий:
<% DIM visitorlPAddress 
visitorlPAddress = Request.ServerVariables("REMOTE_ADDR") 
If Left(visitorlPAddress,10) <> "24 . 234.31." Then 
Response.Redirect("/") 
End If 
<Еайп Орввкв Диа Избранное Сервис Справке 
Назад . Останов... Обновить Домой Поиск Избранн... Журнал 
| .npecj.] http//html-webdesign/Chapter11/Figurell-06.osp "r\ 
ALL_HTTP = HTTP ACCEPTimage/gik image/x-xbitmap. image/jpeg unage/pjpeg. 
application/vnd ms- ~ 
excel appicanon/msword, •/• HTTP ACCEPT LANGUAGE™ HTTP CONNECTION Keep-Alive 
HTTP HOST:html-webdesign HTTP USER AGENT:Modla/4.0 (compatible; MSIE 5.5. 
Windows 98) Я 
HTTP COOKIE:ASPSESSIONIDFFFEWIZR=CEKBIOEBDFNBPNPAAOIFACCA 
HTTP_ACCEPT_ENCODlNG:gap, deflate 
ALL_RAW = Accept image/giC image/x-xbitaap, image/jpe^ image/pjpeg 
application/vnd.ms-excel 
application/msword, */• Accept-Language m Connection. Keep-Ahve Host: 
html-webdesign User-A " 
Modlart 0 (compatible. MSIE 5 5. Wmdows 98) Соойе. 
ASPSESSIONIDFFFEWIZR=CEKBIOEBDFNBPNPA 
APPL_MD_PATH = /LM/W3SVC/1/ROOT 
APPL_PHYSICAL_PATH = C:\Inetpub\wwwroot\ 
AUTH PASSWORD = 
AUTH TYPE = 
AUTH USER = 
CERT COOKIE» 
CERT FLAGS» 
CERT ISSUER = 
CERT KEYSIZE = 
CERT SECRETKEYSIZE = 
CERT SERIALNUMBER = 
CERT SERVER ISSUER = 
CERT SERVER SUBJECT= 
CERT SUBJECT» 
CONTENT_LENGTH = 0 
CONTENT TYPE = 
GATEWAY INTERFACE = CGI/1.1 
HTTPS = off 
HTTPS KEYSIZE = 
HTTPS SECRETKEYSIZE = 
HTTPS SERVER ISSUER = 
HTTPS SERVER SUBJECT= 
INSTANCE ID= 1 
INSTANCE META PATH • /LM/W3SVC/1 
Рис. 11.6. Список имен и значений элемен)
AOIFACCA Accept-Encoding. gap. deflate 
i •пов коллекции Request. Server Variables

Глава 11. Активные серверные страницы (ASP) 5 8 3 
VBScript-оператор if-Then в данном примере проверяет, находится ли IP-ад- 
рес посетителя в диапазоне допустимых IP-адресов. Если IP-адрес не является 
одним из 256 адресов, которым разрешен просмотр страницы, вызывается метод 
Response.Redirect, который сообщает Web-браузеру, что нужно загрузить глав- 
ную индексную страницу сайта. 
Использование драйвера MyODBC для работы 
с СУБД MySQL 
Одной из наиболее мощных (и часто используемых) функций ASP-сценариев 
является их возможность получать и отображать данные из базы данных SQL. 
Значительная часть информации, нужной пользователям при посещении Web- 
сайта, хранится в таблицах баз данных. Банки хранят в таблицах балансы счетов, 
данные транзакций и другую финансовую информацию о пользователях. Брокер- 
ские конторы используют таблицы для хранения таких данных, как движение 
ценных бумаг, депозиты и отзывы, денежные переводы и информация о торговых 
компаниях. Магазины принимают заказы, запрашивают наличие товаров и рабо- 
тают со счетами кредитных карточек — и все это с помощью SQL-операторов, ра- 
ботающих с данными таблиц баз данных. На самом деле, если вы (как и посети- 
тели вашего сайта) входите в Internet, чтобы проверить состояние своего счета, 
совершить покупку или проверить состояние какого-то заказа, весьма вероятно, 
что вы прямо или косвенно сталкиваетесь с базой данных SQL. Сценарии на 
стороне сервера незаметно для пользователя выбирают данные из таблиц баз 
данных и генерируют с их помощью видимое содержимое Web-страницы. Кроме 
этого, сценарии обновляют данные в базах данных — если вы введете соответ- 
ствующие инструкции и отправите их на Web-сервер с помощью HTML-форм. 
Прежде чем принимать и обрабатывать запросы и другие SQL-операторы, 
ASP-сценарий должен открыть соединение с системой управления базами дан- 
ных (СУБД). Например, для открытия соединения с СУБД MySQL ASP-сцена- 
рию должен быть доступен драйвер открытого соединения с базой данных 
(ODBC — Open DataBase Connectivity), работающий в качестве посредника. Сце- 
нарий передает ODBC-драйверу строку (с инструкциями по открытию/авториза- 
ции или SQL-операторами). ODBC-драйвер, в свою очередь, преобразует строку 
в формат, понятный СУБД (такой как MySQL), и передает строку с операторами 
открытия базы или выборки данных для обработки СУБД. Затем ODBC-драйвер 
форматирует выходные данные, выданные СУБД (например, результат выполне- 
ния запроса), и передает результат выполнения операторов ASP-сценарию. 
ПРАКТИКУМ 
На момент написания данного текста ODBC-драйвер, посредством которого 
ASP-сценарий должен взаимодействовать с СУБД MySQL, вместе с MySQL не 
поставлялся. Вы можете выгрузить драйвер MyODBC по адресу http:// 
www.MySQL.com/Downioads/. (В разделе API-интерфейсов этой Web-страницы 
щелкните на гиперссылке MyODBC и следуйте инструкциям по загрузке для 
установленной у вас операционной системы.) Выгрузите (архивный) файл

584 Глава 11. Активные серверные страницы (ASP) 
MyODBC.zip с указанного сайта в какую-нибудь папку (типа 
C:\My DownLoad Files) на компьютере, на котором установлена СУБД 
MyODBC. Затем распакуйте архив В папку вроде C:\My Download Files\MyODBC. 
И, наконец, завершите процесс инсталляции, выполнив следующие шаги: 
1. Найдите в папке, в которую вы распаковали архив MyODBC.zip, программу 
Setup.exe. 
2. Запустите программу setup.exe, дважды щелкнув на.ее имени. Вы увидите 
окно программы установки Microsoft ODBC. 
3. Щелкните на кнопке Continue (Продолжить). Появится диалоговое окно 
Install Drivers (Установка драйверов). 
4. Выберите в списке выбора доступных драйверов ODBC MySQL и щелкните 
на кнопке ОК. Появится диалоговое окно Data Sources (Источники данных). 
5. Щелкните на кнопке Close (Закрыть) и затем на ОК в нижней части окна 
программы установки Microsoft ODBC — для завершения работы инсталля- 
ционной программы. 
После щелчка на кнопке Close на пятом шаге программа инсталляции уста- 
новит драйвер MyODBC в вашу систему, и появится окно с сообщением Microsoft 
ODBC Setup Complete (Установка Microsoft ODBC завершена). Щелкните на кноп- 
ке OK, и программа инсталляции завершит свою работу. 
После установки драйвера ODBC для СУБД MySQL (MyODBC) ваши ASP- 
сценарии могут открывать соединение с СУБД с помощью строки соединения со 
следующим синтаксисом: 
DRIVER={MySQL};SERVER=<HMH компьютера-сервера>; 
ию=<имя пользователя:»-; РК0=<пароль>;0АТАВА8Е=<имя базы данных> 
Например, предположим, что ваш Web-сервер находится на компьютере с 
именем NVBizNet, и вы хотите открыть соединение с базой данных hwdtt. (Имя 
базы данных получено из первых букв английского названия книги: HTML & 
Web Design Tips & Techniques.) В таком случае вам необходимо воспользоваться 
следующей строкой открытия соединения: 
DRIVER={MySQL};SERVER=NVBi zNet;UID=root;PWD=;DATABASE=hwdtt 
В данном примере ASP-сценарий открывает базу данных с именем привиле- 
гированного пользователя root и без пароля. После этого для отображения ре- 
зультатов запроса на Web-странице в виде HTML-таблицы в сценарии потребует- 
ся вызвать подпрограмму наподобие следующей: 
<%
Sub SubmitQuery (queryString) 
Const cMySQLConStr = _ 
"DRIVER={MySQL};SERVER=NVBizNet;UID=root;PWD=;DATABASE=hwdtt" 
Dim objMySQLCon, objResultsSet 
Dim field 
1 Создание объекта базы данных 
Set objMySQLCon = Server.CreateObject("ADODB.Connection" )

Глава 11. Активные серверные страницы (ASP) 58 5 
With objMySQLCon 
1 Открытие соединения с СУБД MySQL, прием запроса 
1 и сохранение множества результатов запроса в объекте VBScript 
.Connectionstring = cMySQLConStr 
. Open 
Set objResultsSet = .Execute (queryString) 
1 Отображение запроса на Web-странице 
Response.Write "<centerXpXb>PesynbTaTbi выполнения запроса: </b>" & 
queryString & "</pX/centerXhr>" 
1 Отображение имен столбцов и результатов запроса в HTML-таблице 
Response . Write "<centerXtableborder=' 1' cellpadding=' 5' >" 
1 Отображение имен столбцов SQL-таблицы в строке шапки HTML-таблицы 
Response.Write "<tr>" 
For Each field In objResultsSet.Fields 
Response.Write "<th>" & field.Name & "</th>" 
Next 
Response.Write "</tr>" 
1 Отображение значений результатов запроса в строках HTML-таблицы 
Do While Not objResultsSet.EOF 
Response.Write "<tr>" 
For Each field In objResultsSet.Fields 
Response.Write "<td>" & field & "</td>" 
Next 
Response.Write "</tr>" 
1 Сдвиг указателя записи на следующую строку результататов 
objResultsSet.MoveNext 
Loop 
Response. Write "</tableX/center>" 
End With 
End Sub 
%> 
Как видно из приведенного примера, следующие операторы сценария исполь- 
зуют объект соединения (objMySQLCon) и его метод Open для открытия соедине- 
ния с базой данных MySQL: 
objMySQLCon.ConnectionString = cMySQLConStr 
objMySQLCon.Open 
Далее в сценарии используется оператор Set — для передачи запроса из строки 
queryString В СУБД И пересылки результатов Запроса В Объект objResultsSet: 
Set objResultsSet = objMySQLCon .Execute (queryString) 
В данном примере VBScript сохраняет результаты запроса в коллекции Fields 
объекта набора результатов (или записей) objResultsSet. По существу, результа- 
ты запроса сохраняются в объекте objResultsSet в виде пар ключ/элемент (т.е. 
имя/значение). Программисту доступны и имя элемента (или ключ), и его зна- 
чение. В рассматриваемом примере сценарий сначала вставляет ключи (имена 
столбцов таблицы SQL) в шапку HTML-таблицы. Затем сценарий перебирает 
весь набор результатов по одной строке, отображая значение элемента каждой 
строки результата под соответствующим ему заголовком HTML-таблицы.

586 Глава 11. Активные серверные страницы (ASP) 
Организация доступа к Web-сайту по имени 
пользователя и паролю 
При организации Web-сайта, содержащего информацию только для зарегист- 
рированных пользователей, нужно обеспечить, чтобы страницы сайта с ограни- 
ченным доступом могли увидеть только авторизованные посетители (т.е. существую- 

щие члены). Обычно сайты с ограниченным доступом содержат и общедоступные, и 
защищенные (закрытые) области. Общедоступная область сайта состоит из Web- 
страниц, содержание которых доступно всем посетителям. Но доступ к страницам в 
закрытой (только для зарегистрированных членов) области должен быть разре- 
шен Web-сервером только посетителям со специальными учетными записями. 
ПРАКТИКУМ 
Каждая учетная запись содержит имя пользователя и пароль, которые пользова- 
тель должен ввести, чтобы получить доступ к закрытой информации. Чтобы ав- 
торизованные посетители могли войти на сайт, создайте HTML-форму с предло- 
жением посетителю ввести свое имя и пароль. Например, можно сохранить 
следующее определение формы в Web-странице с именем Login.htm: 
<form action="http://www.NVBizNet.com/HWDTT/authenticate.asp" 
method="POST"> 
Имя: <input type = "text" name="username" size="20"Xbr> 
Пароль: <input type="password" name="password" size="20"XbrXbr> 
<input type="submit" value="Bxofl"> 
<input type="reset" value="Сброс"> 
</form> 
Атрибуту action дескриптора <form> нужно присвоить URL-адрес ASP-стра- 
ницы, содержащей сценарий аутентификации и входа на сайт. В данном приме- 
ре атрибут action задает ASP-страницу authenticate. asp. Таким образом, пос- 
ле того как посетитель введет в форму свои имя и пароль и щелкнет на кнопке 
"Вход", браузер отправит введенные данные сценарию, содержащемуся в тексте 
authenticate.asp. Если введенные имя и пароль совпадают с парой имя/па- 
роль, хранящейся в файле, сценарий позволит посетителю вход на страницу в 
области с ограниченным доступом. 
Пары имя/пароль, описывающие зарегистрированных пользователей сайта, 
можно хранить в обычном файле или в таблице базы данных SQL. ASP-сценарий 
аутентификации посетителя ищет в списке пар имя/пароль запись, совпадаю- 
щую с парой, введенной в HTML-форму на странице регистрации. Если такая 
пара найдена, сценарий отправляет посетителя со страницы регистрации на зак- 
рытую страницу. Если же имя и пароль, введенные в форму, не найдены в списке 
лиц, имеющих доступ к закрытой области, сценарий отказывает в доступе к сай- 
ту и возвращает пользователя на страницу регистрации для совершения новой 
попытки входа. 
Если имена и пароли пользователей хранятся в таблице SQL, то каждая стро- 
ка этой таблицы содержит допустимую комбинацию имя/пароЛь: в одном столб- 
це имя, а в другом — пароль. Для создания такой таблицы сначала нужно сооб-

Глава 11. Активные серверные страницы (ASP) 5 8 7 
щить СУБД SQL, какую базу данных вы хотите использовать и затем выполнить 
SQL-оператор CREATE TABLE: 
USE hwdtt; 
CREATE TABLE siteAccessList( 
username VARCHAR (20) NOT NULL , 
password VARCHAR(20) NOT NULL) ; 
Первый оператор этого примера указывает СУБД, что надо использовать базу 
данных hwdtt. (Имя базы данных получено из первых букв английского назва- 
ния книги: HTML & Web Design Tips & Techniques.) Синтаксис SQL-оператора 
CREATE TABLE выглядит следующим образом: 
CREATE TABLE <имя таблицы>( 
<имя столбца> <тип столбца> [<список атрибутов столбца>] , 
<имя последнего столбца> <тип столбца> [<список атрибутов столбца>]) ; 
Для использования SQL-таблицы ее необходимо наполнить списком имен и 
паролей, которые можно добавлять с помощью SQL-операторов INSERT. Напри- 
мер, для вставки данных в таблицу siteAccessList необходимо выполнить опе- 
ратор INSERT наподобие следующего: 
INSERT INTO siteAccessList VALUES ("Kris", "mfe2275"); 
INSERT INTO siteAccessList VALUES ("Andy", "687fc"); 
Синтаксис SQL-оператора INSERT таков: 
INSERT INTO <имя таблицы> (<столбец 1>, <столбец 2>, . . . , <столбец N>) 
VALUES (Оначение 1>, Оначение 2>, . . . , Оначение N>) ; 
(Как видно из данного примера, если в операторе INSERT заданы значения 
для всех столбцов одной строки таблицы, то сам список столбцов, следующий • 
именем таблицы, можно опустить.) 
Далее, чтобы использовать в нашем примере эту таблицу для входа на сайт, 
ASP-сценарий должен открыть соединение с СУБД и сформировать запрос в 
форме SQL-оператора SELECT. Например, для отображения всех имен и паролей 
в таблице необходимо выполнить такой оператор: 
SELECT username, password FROM siteAccessList; 
Для проверки, ввел ли посетитель правильные имя и пароль, следует добавить 
конструкцию WHERE, которая указывает СУБД возвращать только те строки, в ко- 
торых имя и пароль совпадают со значениями, введенными посетителем в форму 
на странице регистрации. Например, если пользователь ввел в форме имя "Andy" 
и пароль "passl454", запрос должен выглядеть так: 
SELECT COUNT (*) FROM siteAccessList 
WHERE username="Andy" AND password="passl454" ; 
Если запрос вернет " 1 " , это значит, что посетитель ввел верные имя и па- 
роль, поскольку они присутствуют в списке зарегистрированных пользователей 
сайта. Если же посетитель ввел пару имя/пароль, отсутствующую в таблице (как 
в вышеприведенном примере), запрос вернет "0м, что означает, что ни в одной 
учетной записи нет такой комбинации имени и пароля.

5 8 8 Глава 11. Активные серверные страницы (ASP) 
Перед тем как выдать запрос, ASP-сценарий должен установить соединение с 
базой данных, содержащей таблицу с именами и паролями учетных записей. 
Метод server.Createobject в следующем коде создает объект соединения с ба- 
зой данных: 
<% Set objMySQLCon = Server.CreateObject("ADODB.Connection") 
objMySQLCon.Connectionstring = 
"DRIVER={MySQL};SERVER=NVBizNet;UID=root;PWD=;DATABASE=hwdtt" 
objMySQLCon.Open 
%> 
Свойство объекта Connectionstring содержит значения, необходимые сцена- 
рию для регистрации в СУБД. В данном примере метод objMySQLCon.open ис- 
пользует ODBC-драйвер для MySQL, чтобы присоединиться к СУБД MySQL на 
NT-сервере с именем NVBizNet. Соединение регистрируется под именем (UID) 
root, без пароля, и выбирает для использования базу данных hwdtt. 
После установки соединения с СУБД можно выполнить запрос, воспользовав- 
шись методом Execute объекта соединения: 
<%
queryString = / 
"SELECT COUNT (*) Count FROM siteAccessList" & 
" WHERE username = ' " &Request. Form("username") & "' " &_ 
• AND password = '" & Request. Form ("password") & " 
Set objResultsSet = objMySQLCon.Execute(queryString) 
If objResultsSet.Fields("Count") = 1 Then 
Response.Redirect "/hwdtt/MemberWelcome.asp" 
End If 
%> 
В данном примере сценарий использует метод Execute объекта соединения 
(objMySQLCon) для передачи строки с запросом (queryString) СУБД MySQL, ко- 
торая, в свою очередь, выполняет запрос и возвращает строки столбцов, удовлет- 
воряющих критерию поиска (т.е. набор результатов запроса), в объекте 
objResultsSet. 
В нашем примере запрос будет всегда возвращать одну строку результатов, в 
столбце с именем count. (Приведенная в запросе функция count(*) — это агре- 
гатная функция SQL, возвращающая количество строк таблицы, удовлетворяю- 
щих условию (условиям) поиска в конструкции WHERE.) Если СУБД найдет в 
таблице siteAccessList соответствующие имя и пароль, то поле Count будет 
содержать " 1", и сценарий перенаправит браузер на начальную страницу защи- 
щенной области сайта. Если же имя или пароль, введенные в форме регистра- 
ции, неверны, СУБД в поле Count вернет "0м. После этого сценарий перейдет к 
HTML-дескрипторам и тексту (не показанным здесь), которые сообщат посети- 
телю, что ему следует повторить ввод имени и пароля. 
Web-страница, содержащая форму регистрации, и ASP-страница со сценарием 
аутентификации, описанным в данном разделе, находятся в архиве 
chptiiTipO9.zip, который доступен для выгрузки на Web-сайте издательства 
РУССКОЯЗЫЧНОЙ редакции ЭТОЙ КНИГИ (http://www.diasoft.kiev.ua).

Глава 11. Активные серверные страницы (ASP) 
Обратите внимание, что задание атрибута type элемента формы равным 
"password" визуально скрывает текст, вводимый посетителем в этот элемент. 
(Браузер на месте каждого символа, вводимого пользователем, отображает звез- 
дочку.) Но после того как посетитель щелкнет на кнопке "Вход", браузер посы- 
лает все данные, введенные в форму (в том числе и введенный пароль), в виде 
незашифрованного ASCII-текста. В этом случае какой-то злоумышленник сможет 
перехватить тело HTTP-сообщения (в виде обычного текста), в которое браузер 
поместил имя и пароль, посылаемые серверу. 
Чтобы защитить важную информацию (наподобие имен пользователей и их 
паролей), попросите Internet-провайдера, предоставляющего хостинг для вашего 
сайта, установить протокол SSL. Провайдер должен сначала получить сертифи- 
кат безопасности {security certificate) для вашего сайта от специальной уполно- 

моченной фирмы, такой как VerySign Corporation (http://www.verysign.com), 
Thawte Consulting (http://thawte.com) ИЛИ Entrust (http://www.entrust.com). 
После того как провайдер установит на Web-сервере сертификат безопасности 
для вашего сайта, сервер и браузер будут шифровать свои HTTP-сообщения пе- 
ред отправкой их в Internet. Шифрование данных, передаваемых браузером и сер- 
вером, защищает данные, введенные в форму (и остальное содержимое сообще- 
ния), от несанкционированного доступа, поскольку теперь злоумышленник, 
глядя на тело зашифрованного HTTP-сообщения, увидит лишь непонятную ме- 
шанину из букв, цифр и специальных символов. 
SSL-шифрование и дешифрация происходит вне сферы действия ваших 
ASP:c4eHapHeB — в том смысле, что можно использовать тот же самый сцена- 
рий регистрации (или любой другой), работая и по защищенному, и по неза- 
щищенному соединению. Единственное заметное для вас отличие будет в 
том, что ваши защищенные URL-адреса будут начинаться не со стандартного 
(незащищенного) "http://", а с "https://". Таким образом, чтобы при пе- 
ресылке результатов, введенных в форму ASP-сценария, использовать защи- 
щенное соединение, следует указывать адрес наподобие https:// 
www.NVBizNet.com/hwdtt/authenticate.asp ВМеСТО незащищенного http:// 
www.NVBizNet.com/hwdtt/authenticate.asp. 
После получения зашифрованного HTTP-запроса на ASP-страницу сервер де- 
шифрует сообщение и пересылает расшифрованные данные (вроде данных, при- 
нятых из формы) вместе с запросом на Web-страницу обработчику сценариев 
ASP. Обработчик сценариев, в свою очередь, вызывает интерпретатор сценариев 
для выполнения сценария (сценариев), находящихся внутри Web-страницы, и 
возвращает серверу результат, сгенерированный сценарием. После этого сервер 
помещает сгенерированную сценарием страницу в тело HTTP-ответа, который за- 
тем шифруется сервером и отправляется браузеру. Получив HTTP-ответ (т.е. зап- 
рошенную у сервера Web-страницу), браузер дешифрует сообщение и отображает 
страницу.

5 9 0 . Глава 11. Активные серверные страницы (ASP) 
Запуск сеанса и работа с переменными сеанса 
ASP-сеанс — это непрерывный период, в течение которого посетитель взаимо- 
действует с Web-сайтом. Сеанс может состоять из одной или серии транзакций, 
а пользователь за время одного сеанса может получать одну или несколько Web- 
страниц. Например, во время сеанса посетитель может просмотреть прогноз по- 
годы на местном сайте новостей. Или же посетитель может войти на. банковский 
сайт, проверить состояние счетов, оплатить квитанции или перевести деньги со 
счета на счет. Короче говоря, ASP-сеанс начинается, когда посетитель запраши- 
вает с Web-сайта первую ASP-страницу, и завершается, когда посетитель покидает 
сайт, когда сценарий прерывает сеанс, по истечении времени ожидания (таймау- 
та) или (немедленно), если браузер посетителя отказывается записать cookie-пе- 
ременные сеанса. 
Сеансы являются важным инструментом проектирования Web-сайтов, по- 
скольку они позволяют ASP-сценариям пользоваться переменными, сохраняю- 
щими свое состояние (то есть свои значения) во время пребывания посетителя 
на сайте. По мере перемещения посетителя,по страницам сайта переменные се- 
анса можно использовать для отслеживания личных данных посетителя (наподо- 
бие имени, адреса и номера телефона), товаров, откладываемых посетителем в 
онлайновую корзину, выборов, сделанных им на многостраничных формах и т.д. 
Хотя устойчивые переменные можно создать и с помощью cookie-переменных и 
скрытых элементов форм, переменные сеанса позволяют сократить объем дан- 
ных, пересылаемых между сервером и браузером во время каждого HTTP-запроса. 
В начале сеанса сервер посылает браузеру лишь одно "ключевое" значение — 
идентификатор сеанса. Идентификатор сеанса представляет собой cookie-пере- 
менную с именем ASPSESSIONID (ИЛИ ASPSESSJONIDXXXXXXXX В IIS версий 4 и 
выше). Тогда вместо нескольких cookie-значений или скрытых элементов форм 
браузер отправляет серверу с каждым запросом Web-страницы лишь идентифика- 
тор сеанса. Сервер, в свою очередь, использует эту cookie-переменную для опре- 
деления файла (на жестком диске сервера), содержащего значения перманентных 
данных (т.е. переменных сеанса), которые сервер предоставляет сценарию с по- 
мощью ASP-объекта session. Типичная cookie-переменная, содержащая идентифи- 
катор сеанса, похожа на одну из следующих строк (в зависимости от версии IIS): 
ASPSESSIONID=908JIJFAO83UKNOINGUHDNE 
ASPSESSIONIDPPFFFEER=908JIJFAO83UKNOINGUHDNE 
На сервере каждый идентификатор сеанса представляет собой уникальную 
псевдослучайную последовательность букв и цифр, предназначенную для распоз- 
навания посетителя Web-сервером. Таким образом, идентификаторы сеанса по- 
добны идентификационным карточкам, которые Web-сервер выдает каждому по- 
сетителю сайта. Когда браузер запрашивает ASP-страницу, сервер проверяет, 
послал ли браузер идентификатор сеанса (т.е. предъявил ли браузер идентифика- 
ционную карточку посетителя). Если браузер не предъявил карточку, сервер 
вместе с запрошенной ASP-страницей пересылает ему и идентификатор сеанса. 
Если же сервер наряду с запросом на ASP-страницу прислал и идентификатор

Глава 11. Активные серверные страницы (ASP) 
сеанса, сервер использует его для выборки ранее сохраненной во время сеанса 
информации. Сервер предоставляет информацию, доступную через переменные 
Сеанса, В ASP-объекте Session. 
ПРАКТИКУМ 
Таким образом, вашим ASP-сценариям не нужно предпринимать каких-либо спе- 
циальных действий для запуска сеанса: сервер сделает это за вас автоматически. 
Если браузер запрашивает ASP-страницу, не посылая идентификатор сеанса, сер- 
вер начинает новый сеанс и отправляет браузеру его идентификатор. Если брау- 
зер разрешает запись cookie-переменных, он будет возвращать этот идентифика- 
тор во всех последующих запросах на Web-страницы, совершаемых посетителем 
во время сеанса. Когда браузер посылает cookie-переменную ASPSESSIONID (ИЛИ 
ASPSESSIONIDXXXXXXXX), сервер сравнивает ее значение со своим списком. Если 
значение найдено, сервер открывает файл сеанса браузера, хранящийся на жест- 
ком диске сервера, и делает доступными переменные сеанса с помощью объекта 
Session. 
Сервер предоставляет переменные сеанса в виде коллекции в ASP-объекте 
session. Таким образом, каждая переменная сеанса, как и элементы других ASP- 
коллекций, состоит из ключа (т.е. имени) и связанного с ним значения. Для 
созда- 
ния новой переменной сеанса нужно просто присвоить значение новому ключу: 
Session("firstName") = "Конрад" 
Session("lastName") = "Кинг" 
Чтобы изменить значение переменной сеанса, необходимо существующему 
ключу присвоить новое значение. Например, если считать, что имеются две пе- 
ременные сеанса, созданные в предыдущем примере, то следующий код выдаст 
на Web-СТранИЦе "Конрад Кинг теперь Конрад Кингсли": 
Response.Write(Session ("firstName") & " " & Session("lastName") & " теперь " 
Session("lastName") = "Кингсли" 
Response.Write(Session("firstName") & " " & Session("lastName") 
Обратите внимание, что переменные сеанса можно использовать в выражени- 
ях и в качестве параметров функций или методов. Достаточно просто вставить 
нужные имя объекта (наподобие имени коллекции) и ключ (т.е. имя перемен- 
ной сеанса) в выражение или список параметров в вызове функции или метода. 
Имейте в виду, что переменные сеанса занимают во время сеанса память Web- 
сервера. При запросе посетителем Web-страницы сервер читает с диска перемен- 
ные сеанса (и их значения) и запоминает их в объекте session, который нахо- 
дится в оперативной памяти. Поэтому не забывайте во время сеанса уничтожать 
переменные сеанса, которые больше не нужны. Чтобы удалить из коллекции пе- 
ременную сеанса, достаточно присвоить ей значение Empty ("Пусто"): 
Session ("orderTotal") = Empty 
Помните, что присваивание переменной сеанса пустой строки ("") или зна- 
чения Nothing ("Ничего"), вроде таких:

5 9 2 Глава 11. Активные серверные страницы (ASP) 
Session("productCodel") = "" 
Session ("productQtyl") = Nothing 
вовсе не эквивалентно присваиванию значения Empty. 
Элементы с пустым значением — это все равно элементы (пусть и с пустым 
значением), находящиеся в коллекции session. Как это ни парадоксально, в 
языке VBScript Nothing — это непустой объект. Поэтому и пустая строка, и 
Nothing в качестве значений переменных сеанса занимают во время сеанса па- 
мять сервера. Чтобы сервер удалил из коллекции переменную сеанса и освобо- 
дил занимаемую ей память, нужно присвоить ей значение Empty. 
Кроме устойчивых переменных Web-сервер для каждого сеанса создает еще и 
таймер. Когда сервер запускает сеанс, он устанавливает свойство таймера 
Session.Timeout в 20 минут для IIS версии 4 (10 минут для IIS версии 5). Тай- 
мер начинает работать с начального интервала времени по умолчанию и отсчи- 
тывает время до нуля (0). Когда таймер доходит до нуля, сервер завершает ASP- 
сеанс и уничтожает всю связанную с ним информацию. Свойству 
Session.Timeout в любом месте можно присвоить новое значение с помощью 
оператора сценария, например: 
Session.Timeout= 1 
Данный оператор устанавливает тайм-аут сеанса в одну минуту. (Свойству 
Session.Timeout нельзя присвоить время, исчисляемое в долях минуты.) 
Каждый раз, когда обработчик ASP-сценариев получает запрос от браузера, 
связанного с каким-либо сеансом, он заносит в таймер этого сеанса начальное 
значение по умолчанию. Поэтому пока посетитель продолжает запрашивать страни- 
цы, сеанс остается активным. Если посетитель перестает взаимодействовать с Web- 

сайтом, Обработчик Сценариев Не Переустанавливает СКЖЖ) Session. Timeout, И 
после того как оно дойдет до нуля, сервер прекращает этот сеанс. 
Таймер сеанса нужен в основном для того, чтобы сервер не хранил данные се- 
анса вечно и не загромождал зря память и дисковое пространство. Было бы за- 
мечательно, если бы при переходе посетителя на другой Web-сайт или прекраще- 
нии работы в Internet браузер отправлял серверу сообщение об "отключении". К 
сожалению, так не бывает — в силу отсутствия состояния в HTTP-соединениях. 
Конечно, прекращение сеанса посетителя по тайм-ауту может привести к конф- 
ликту, если посетитель "завис" на одной Web-странице и не выдавал запросов в 
течение времени тайм-аута, а затем снова начал работать со страницей. 
Если браузер предъявляет идентификатор сеанса для сеанса, закрытого серве- 
ром, то у сервера уже нет в памяти (и на диске) данных сеанса. Поэтому сервер 
считает такой идентификатор сеанса йеверным. Чтобы избежать лишних затрат 
ресурсов на генерирование нового идентификатора, сервер использует получен- 
ное значение, но создает новый объект session и связывает его с этим иденти- 
фикатором. Поэтому ASP-сценарии должны с помощью функции isEmptyO удо- 
стовериться, что используемые ими переменные сеанса все еще существуют, если 
эти переменные созданы не сценарием. Например, следующий сценарий прове- 
ряет нужные ему переменные сеанса (username и password) и перенаправляет

Глава 11. Активные серверные страницы (ASP) . 5 93 
посетителя на страницу регистрации, если хотя бы одна из этих переменных от- 
сутствует в коллекции переменных сеанса: 
If isEmpty(Session("username")) Then 
Response.Redirect "/hwdtt/Chapter11/TiplOLogin.htm" 
End If 
If isEmpty(Session("password")) Then 
Response.Redirect "/hwdtt/Chapterll/TiplOLogin.htm" 
End If 
Обратите внимание, что если вы переустанавливаете время тайм-аута, после 
которого страница станет недоступной, то стоит в каком-нибудь месте страницы 
известить посетителя об этом. Вряд ли посетителю понравится, что если в сере- 
дине заполнения длинной формы его отвлечет телефонный звонок, то после 
окончания разговора все придется начинать заново. 
Выполнение запросов SQL и отображение результатов 
запроса в HTML-таблице 
Обычная статическая Web-страница содержит текст и графические изображе- 
ния. Если даже добавить в нее пару-тройку анимационных файлов, каждый посе- 
титель увидит одно и то же содержимое, хотя и в привлекательном и, может 
быть, более запоминающемся виде. Дабы быть по-настоящему динамичной, Web- 
страница должна варьировать свое содержимое в зависимости от данных, запро- 
шенных посетителем. Для вас, как автора сайта, эта задача усложняется тем, что 
вы просто не сумеете предвидеть все возможные запросы на данные, которые мо- 
жет ввести посетитель. К счастью, с помощью ASP-сценариев можно сделать-так, 
что посетители будут направлять свои запросы непосредственно к базе данных, а 
метод Response.write отобразит результаты выполнения этих запросов. 
ПРАКТИКУМ 
Чтобы выбрать данные из базы данных SQL и отобразить их в Web-странице, 
сценарию нужны три объекта: объект connection, объект для приема результатов 
запроса и ASP-объект Response. Объект соединения с базой данных можно со- 
здать с помощью метода server.Createobject, как показано в следующем коде: 
<% 
Dim objMySQLCon 
Set objMySQLCon = Server.CreateObject("ADODB.Connection") 
objMySQLCon.Connectionstring = 
"DRIVER={MySQL};SERVER=NVBizNet;UID=root;PWD=;DATABASE=hwdtt" 
objMySQLCon.Open 
Сначала свойству Connectionstring объекта соединения (в данном приме- 
ре - objMySQLCon) присваиваются значения, необходимые для подключения к 
СУБД. Затем с помощью метода open объекта соединения открывается соедине- 
ние с СУБД. В нашем случае объект objMySQLCon использует ODBC-драйвер 
MySQL для открытия соединения с СУБД MySQL на компьютере с именем 
NVBizNet. Сценарий подключается с именем привилегированного пользователя

594 Глава 11. Активные серверные страницы (ASP) 
root, без пароля, и выбирает для использования базу данных hwdtt. После вы- 
полнения метода open объекта соединения сценарий может пересылать в СУБД 
SQL-операторы. 
Хотя можно позволить посетителям вводить запросы через HTML-формы, 
большинство сайтов предлагают посетителю выполнить предопределенные запро- 
сы или хранимые процедуры. Допустим, например, что имеется ASP-страница с 
именем GetorderNumber. asp, содержащая следующий сценарий: 
If Not IsEmpty (Request.Form("Status")) Then 
Dim objMySQLCon, rsOrderDetail 
Set objMySQLCon = Server.CreateObject("ADODB.Connection") 
objMySQLCon.ConnectionString =•_ 
"DRIVER={MySQL};SERVER=NVBizNet;UID=root;PWD=;DATABASE=hwdtt" 
objMySQLCon.Open 
SET rsOrderDetail = objMySQLCon.Execute ( _ 
" SELECT orderNum FROM orders WHERE orderNum = ' " &_ 
Request . Form ("orderNum") & " ' ") 
If Not rsOrderDetail.EOF Then 
Response.Redirect("ChptllTipllShowOrderStatus.asp?OrderNum=" & _ 
Request.Form("orderNum")) 
End If 
End If 
%> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"> 
<html> 
<body bgcolor="#ADD8E6"> 
<!-- Текст Web-страницы и определение формы —-> 
</body> 
</html> 
Обратите внимание, что в данном примере сценарий расположен перед 
HTML-КОДОМ ASP-СТраНИЦЫ GetorderNumber.asp, ПОКазаННОЙ на рис. 11.7. 
файл . Орввка ёид Избранное Сервис Оправка 
•;••.," ^•-••••--•-;;--~- j ^ : -з a a j 
Нйэад ' "" •• Остоной... Обновить Домой Поиск Избрвни... Журнал 
iSpecj^] httpy/html^vebdesJgn/ChQpteril/ChptnTipiiGetOrderNumber.esp 
HTML & Web Design Tips & 
Techniques 
Проверка состояния заказа 
Введите номер заказа и щелкните на кнопке "Состояние". 
Состояние Сброс 
Рис. 11.7. Активная серверная страница с формой для ввода номера заказа

Глава 11. Активные серверные страницы (ASP) » 5 9 5 
Сценарий сначала проверяет элемент status коллекции Form, чтобы узнать, 
щелкнул ли посетитель на кнопке "Состояние" ("status") перед получением 
ASP-страницы. Если посетитель еще не щелкнул на упомянутой кнопке, обработчик 
сценариев ASP отображает форму ввода номера заказа, определенную ниже: 
<form method="post" action="GetOrderNumber.asp" name="OrderNumEntry"> 
<%
If Not IsEmpty (Request.Form("Status")) Then 
Response.Write_ 
"<Ь>Введенный номер заказа не найден. Повторите попытку .</ЬХЬг>" 
Else 
Response.Write _ 
"Введите номер заказа и щелкните на кнопке ""Состояние"".<br>" 
End If 
%>
<input type = " t e x t name="orderNum" size = "20"XbrXbr> 
<input type="submit" name="Status" value="Состояние"> 
<input type="reset" value="Сброс"> 
</form> 
(Обратите внимание, что атрибут action дескриптора <form> указывает брау- 
зеру на необходимость получения Страницы GetOrderNumber.asp - ТОЙ Же ASP- 
страницы, в которой посетитель вводил номер заказа.) 
ЕСЛИ браузер ПОЛУЧИЛ ASP-СТраницу GetOrderNumber. asp ПОСЛе ТОГО как ПО- 
сетитель щелкнул на кнопке "Состояние", элемент item в коллекции 
Request.Form будет не пуст, и обработчик сценариев ASP выполнит данный сцена- 
рий. С целью определения, верен ли введенный номер заказа, сценарий вызывает 
метод Execute объекта Connection для выполнения запроса к SQL-таблице orders: 
SET rsOrderDetail = objMySQLCon.Execute ( 
"SELECT orderNum FROM orders WHERE orderNum = ' " & _ 
Request.Form("orderNum") & " ' " ) 
If Not rsOrderDetail.EOF Then 
Response.Redirect("ChptllTipllShowOrderStatus.asp?OrderNum=" & ._ 
Request.Form("orderNum")) 
End If 
Свойство признака конца файла объекта результатов запроса (в данном при- 
мере — rsOrderDetail.EOF) истинно сразу после выполнения запроса сценарием 
лишь тогда, когда запрос не вернул ни одной строки. В рассматриваемом приме- 
ре, если сразу после выполнения запроса свойство rsOrderDetail.EOF равно 
True, то номер заказа в SQL-таблице orders отсутствует. Если же номер заказа 
присутствует в файле, значение rsOrderDetail.EOF будет равно false, и сцена- 
рий перенаправит браузер на ASP-страницу showorderstatus.asp. (В ней содер- 
жится сценарий, отображающий заголовок, детали заказа и состояние заказа.) 
При каждом вызове метода Execute объекта connection для выполнения 
запроса СУБД возвращает ноль, одну или несколько строк результата запроса. 
В рассматриваемом примере сценарий, находящийся в ASP-странице 
showOrderstatus.asp, создает три переменных, которые предназначены для хра- 
нения результатов трех запросов, выполняемых сценарием: 
DIM rsOrderDetail, rsOrderltems, rsOrderStatus

596 Глава 11. Активные серверные страницы (ASP) 
Объекты, в которых сценарии сохраняют результаты запросов к СУБД, внача- 
ле являются обычными переменными типа variant. Но после присваивания им 
результатов ЗаПрОСОВ, ВОЗВращаемЫХ ВЫЗОВаМИ Метода Connection. Execute, ОНИ 
становятся объектами: 
With objMySQLCon 
Set rsOrderDetail = .Execute(_ 
"SELECT orderDate FROM orders " & 
"WHERE orderNum = ' " & orderNum & " ' ") 
Set rsOrderltems = . Execute(_ 
"SELECT orderlterns .itemNum 'ItemNumber1 , " &_ 
"description Product, units Quantity " & 
"FROMor der I terns, itemMast " & 
"WHERE orderNum = ' " & orderNum & " ' " &_ 
"AND itemMast. itemNum = оrder I terns . itemNum " &_ 
"ORDER BY itemMast.itemNum") 
Set rsOrderStatus = .Execute (_ 
"SELECT Description Stage, dateStarted Started, " &_ 
"dateCompletedCompleted " &_ 
"FROM orderstatus " &_ 
"WHERE orcjerNum = ' " & orderNum & " ' " & _ 
"ORDER BY stepNumber") 
End With 
Преобразование из VBScript-переменной типа variant в объект результатов 
запроса достаточно важно. Будучи объектами, каждый из трех результатов запро- 
са (rsOrderDetail, rsOrderltems И rsOrderStatus) Имеет методы И СВОЙСТВа, 
которые можно использовать при отображении строк и столбцов (полей) резуль- 
тата запроса. 
Например, объект rsOrderinfo содержит лишь одну строку, поскольку запрос 
по номеру заказа возвращает информацию заголовка для одного заказа. Поэтому 
заголовок информации о заказе можно отобразить с помощью метода 
Response.write, выводя на страницу значения полей строки: 
Response.Write "<Ь>Номер заказа: </Ь>" & orderNum & "<br> &_ 
"<Ь>Дата заказа: </b>" & rsOrderDetail.Fields("orderDate") 
В ОТЛИЧИе ОТ rsOrderinfo, объекты rsOrderltems И rsOrderStatus МОГут СО- 
держать в результатах запросов более одной строки. Поэтому для отображения 
всех строк результата запроса этих объектов необходимо использовать цикл 
Dountii: 
With Response 
.Write_ 
"<table border='1' cellpadding='5 ' >" 
' Отображение имен столбцов SQL-таблицы в строке шапки HTML-таблицы 
.Write"<tr>" 
For Each field In objResultsSet.Fields 
.Write"<th>" & field.Name & "</th>" 
Next 
.Write "</tr>" 
1 Отображение значений результатов запроса в строках HTML-таблицы 
Do While Not objResultsSet.EOF

Глава 11. Активные серверные страницы (ASP) 5 9 7 
.Write "<tr>" 
For Each field In objResultsSet.Fields 
If field о "" Then 
.Write "<td>" & field & "</td>" 
Else 
.Write "<td>&nbsp;</td>" 
End If 
Next 
.Write"</tr>" 
1 Сдвиг указателя записи на следующую строку результататов 
objResultsSet.MoveNext 
Loop 
.Write "</table>" 
End With 
В данном примере сценарий многократно вызывает метод Response.write 
(до тех пор, пока свойство rsOrderitems.EOF не станет истинным), чтобы вста- 
вить строки результата запроса (в rsOrderitems) в HTML-таблицу страницы. 
Свойство EOF означает "Конец файла" ("End of File") и становится истинным, 
когда метод rsOrderitems.MoveNext сдвигает указатель строки за последнюю 
строку результата запроса. 
ASP-страница со сценариями, описанными в данном разделе, находится в 
файле chptiiTipii.zip, который можно выгрузить из сайта издательства рус- 
скоязычной редакции ЗЮИ КНИГИ (http://www.diasoft.kiev.ua). 
Отображение рекламных баннеров с помощью 
Microsoft Banner Ad Rotator 
С начала эры Internet разработчики Web-сайтов следуют модели коммерческое 
го телевидения: бесплатное программирование/содержимое, оплачиваемое ком- 
мерческими/баннерными рекламодателями. Если вы создадите Web-сайт, вам на- 
верняка предложат разместить в вашем творении какой-нибудь рекламный 
баннер. В онлайновом магазине рекламные баннеры, скорее всего, будут рекла- 
мировать товары этого магазина и специальные предложения по продажам. Не- 
коммерческие сайты, содержащие информацию или предоставляющие для выг- 
рузки программное обеспечение, графику или другое мультимедиа-содержимое, 
продают место для рекламы третьим лицам. Эти компании, в свою очередь, рек- 
ламируют товары, которые могут захотеть купить посетители. 
Типичный сайт имеет более одного спонсора или же рекламирует несколько 
товаров. Поэтому обычно на Web-странице на одной "доске объявлений" отобра- 
жаются несколько рекламных баннеров. Для этого необходима система ротации 
(то есть смены) рекламных баннеров, которая случайно (или последовательно) 
выбирает и отображает рекламные баннеры, указанные в списке. Вы можете вос- 
пользоваться бесплатным программным приложением Ad Rotator, которое пред- 
лагает компания Microsoft. Если вы устанавливаете Personal Web Server (PWS) или 

Internet Information Server (IIS) версии 4 или 5, то программа установки по 
умол- 
чанию копирует и Ad Rotator.

598 Глава 11. Активные серверные страницы (ASP) 
ПРАКТИКУМ 
Для использования Ad Rotator необходимо создать его файлы расписания и пере- 
направлений. B(paUAepacnucaHmpomamopa{rotatorschedulefile)noTpe6yeTcaTiepe- 
числить графические изображения баннеров, которые должен показывать Ad 
Rotator. Афайл перенаправлений {redirectionfile) — это ASP-страница, содержащая 

сценарий, генерирующий "отклик" баннера, т.е. направление браузера на целевую 
страницу при щелчке посетителя на баннере. Сначала мы обсудим файл расписа- 
ния ротатора, а затем, ближе к концу раздела, — файл перенаправлений. 
Файл расписания имеет следующий формат: 
REDIRECT URL-адрес-файла-перенаправления 
WIDTH ширина-баннера-в-пикселях 
HEIGHT высота-баннера-в-пикселях 
BORDER ширина-рамки-баннера-в-пикселях 
* 
bannerImageURLl 
bannerRedirectionURLl 
bannerImageAltAttributel 
bannerWeightl 
bannerImageURL2 
bannerRedirectionURL2 
bannerImageAltAttribute2 
bannerWeight2 
< . . . описание других баннеров . . . > 
Хоть это и необязательно, назовите свой файл расписания Ad Rotator наподо- 
бие AdRotatorScheduie. asp и сохраните его в папке Web-сайта с именем вроде 
BannerAds. Хотя ни имя файла, ни имя папки, предложенные здесь, не обяза- 
тельно должны быть именно такими, применение осмысленных имен файлов и. 
папок облегчит в дальнейшем их поиск при сопровождении сайта. 
Первые четыре строки файла расписания ротатора содержат информацию, 'от- 
носящуюся ко всем рекламным баннерам, демонстрируемым в области показа. 
Каждая строка начинается с ключевого слова: REDIRECT ("Перенаправить"), WIDTH 
("Ширина"), HEIGHT ("Высота") или BORDER ("Рамка"). Ниже описывается инфор- 
мация, помещаемая после ключевых слов каждой из четырех строк файла: 
• REDIRECT. Далее следует URL-адрес файла перенаправления. Когда посе- 
титель щелкает на баннере, соответствующая ему гиперссылка указывает 
браузеру выбрать файл перенаправления. Файл перенаправления, в свою 
очередь, представляет собой ASP-страницу, содержащую сценарий, кото- 
рый посылает посетителя на целевую Web-страницу баннера. Если, на- 
пример, ваш файл Перенаправления называется Ad Redirect. asp и нахо- 
дится в папке BannerAds на Web-сайте NVBizNet.com, то первая строка 
файла расписания будет такой: REDIRECT http://www.NVBizNet.com/ 
hwdtt/BannerAds/AdRedirect.asp. МОЖНО также указывать ПОЛНЫЙ ВИрТу- 
альный путь файла перенаправления, в нашем примере это /hwdtt/ 
BannerAds/AdRedirect.asp. 
• WIDTH. Далееуказывается ширина баннера впикселях.

Глава 11. Активные серверные страницы (ASP) 5 9 9 
• HEIGHT. Далее указывается высотабаннера в пикселях. 
• BORDER. Далее указывается ширина (в пикселях) рамки, отображаемой бра- 
узером вокруг баннеров. 
За этими четырьмя строками в файле расписания следует строка, содержащая 
одну звездочку (*). Она отделяет глобальную информацию обо всех баннерах от 
групп из четырех строк, описывающих отдельные баннеры. Формат каждой такой 
группы из четырех строк следующий: 
• bannerimageURL. URL-адрес полного виртуального пути изображения, ото- 
бражаемого в виде баннера. Например, для показа изображения баннера с 
Именем SomeBanner.gif, находящегося В папке BannerAds На Сайте 
NVBizNet.com, замените bannerimageURL на http://www.NVBizNet.com/ 
hwdtt/BannerAds/SomeBanner.gif ИЛИ /hwdtt/BannerAds/SomeBanner.gif. 
• bannerRedirectionURL. URL-адрес целевой Web-страницы баннера, то 
есть страницы, на которую попадет посетитель при щелчке на этом баннере. 
• bannerlmageAltAttribute. Атрибут alt дескриптора <img> изображения 
баннера. Браузер отображает текст атрибута a i t при загрузке изображения 
баннера, или если пользователь отключил отображение картинок, или при 
использовании Web-браузера, работающего в текстовом режиме. 
• bannerweight. Насколько долго Ad Rotator должен показывать данный 
баннер по сравнению с другими баннерами, перечисленными в файле рас- 
писания ротатора. Пусть, например, расписание ротации содержит два 
баннера: у одного bannerweight равно 10, а у другого — 5. Тогда Ad 
Rotator будет показывать первый баннер в два раза чаще, нежели второй. 
Рекламный баннер можно отобразить, создав объект Ad Rotator с помощью 
ВЫЗОВа метода Server.CreateObject, И затем ВЫЗВав метод GetAdvertisement 
этого объекта. Например, для отображения баннера в верхней части домашней 
(т.е. заглавной) страницы сайта сохраните приведенный ниже VBScript-сценарий 
в файле index. asp в корневой папке сайта: 
<% Option Explicit 
DIM adRotatorObj 
SET adRotatorObj = Server.CreateObject("MSWC.AdRotator") 
%> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"> 
<html> 
<body> 
< ! -- Показ рекламного баннера --> 
<center> 
<%
Response.Write_ 
adRotatorObj.GetAdvertisement( 
"/hwdtt/Chapterll/BannerAds/AdRotatorSchedule.asp") 
%>
</center> 
<p>*** Содержимое домашней страницы ***</р> 
< /body> 
</html>

6 00 Глава 11. Активные серверные страницы (ASP) 
<!--Уничтожение/удаление объекта Ad Rotator --> 
<% Set adRotatorObj = Nothing %> 
В третьей строке сценария, приведенного в этом примере, для создания 
Объекта Ad Rotator (adRotatorObj) вызывается метод Server.CreateObject. Me- 
тод Response.write примерно в середине ASP-страницы генерирует с помощью 
вызова метода GetAdvertisement вставляемый HTML-код наподобие следующего: 
<а href="http://www/NVBizNet.com/hwdtt/BannerAds/AdRedirect.asp? 
URL=http://www.NVBizNet.com/default.htm& 
image=/BannerAds/NVBizNet.GIF"> 
<img src="/BannerAds/NVBizNet.GIF" 
alt="Обращайтесь на сайт NVBizNet.com за советами по Web-дизайну" 
width="400" height="60" border="l"X/a> 
После щелчка на баннере, расположенном в верхней части Web-страницы, 
браузер обращается к файлу перенаправления ротатора (в данном примере - 
http://NVBizNet.com/hwdtt/BannerAds/AdRedirect.asp). Как уже упоминалось 
ранее в этом разделе, именно сценарий, находящийся в файле перенаправления, 
переключает браузер на целевую страницу баннера. (Ведь цель рекламного бан- 
нера состоит в том, чтобы после щелчка на нем отправить посетителя на Web- 
страницу сайта рекламодателя.) Отправив браузер сначала к файлу перенаправле- 
ния, можно выполнить содержащийся в нем код, который отслеживает 
посещения (как это сделать, рассказывается в следующем совете). 
Обратите внимание, что гиперссылка, сгенерированная ротатором, передает 
сценарию, находящемуся в файле перенаправления, целевой URL-адрес и путь к 
изображению баннера через строку запроса. (В предыдущем примере строка зап- 
роса была такая: "URL=http://www.NVBizNet.com/default.htm&image=/hwdtt/ 
BannerAds/NVBizNet.gif.) Таким образом, файл перенаправления (в предыду- 
щем примере — AdRedirect.asp) должен содержать хотя бы такую строку: 
<% Response.Redirect Request.QueryString("URL") %> 
После того как в предыдущем примере посетитель щелкнет на баннере, брау- 
зер обращается к ASP-странице AdRedirect.asp. Сценарий, содержащийся в 
ней, в свою очередь, извлекает из строки-аргумента запроса Web-адрес целевой 
страницы баннера и отправляет браузер (в рассматриваемом примере) на адрес 
http://www.NVBizNet.com/default.htm. 
Файл расписания, файл перенаправления и ASP-страница со сценарием, ис- 
пользующим для выбора и показа баннера Ad Rotator, доступны для выгрузки на 
сайте http://www.diasoft.kiev.ua. 
Отслеживание показов и посещений 
в Microsoft Banner Ad Rotator 
Чтобы оправдать расходы на разработку и предоставление бесплатного содер- 
жимого сайта, многие Web-сайты продают место под рекламные баннеры компа- 
ниям, предлагающим свои товары или услуги. Кроме заманивания посетителей 
на другие сайты, баннеры часто используются для информирования о товарах

Глава 11. Активные серверные страницы (ASP) 6 0 1 
или специальных предложениях, доступных на том же сайте. Например, на сайте 
Amazon.com (крупный онлайновый магазин, торгующий, в частности, книгами — 
прим, перев.) могут присутствовать баннеры, рекламирующие книги из списка бе- 
стселлеров или новые произведения популярных авторов. Тем не менее, предназ- 
начен ли баннер для продажи товаров, описываемых на сайте, или же для при- 
влечения посетителей на другие торговые сайты, рекламодателей в принципе 
интересуют два показателя: показы и посещения. 
Показы {impressions) — это количество раз, когда посетители видят конкрет- 
ный баннер. Чем больше показов, тем более вероятно, что реклама попадется на 
глаза посетителю, который пожелает приобрести рекламируемый товар. Показы 
зависят и от того, сколько раз ротатор баннеров показывает на Web-странице 
баннерные изображения, и от того, как часто посетители заходят на страницу. 
Например, баннер, расположенный на странице, запрашиваемой 100 раз в час, 
генерирует меньше показов, чем баннер на странице с 1000 посетителями за то 
же время. Чем больше посетителей, которые видят рекламу, и чем чаще ротатор 
показывает баннер, тем выше вероятность, что посетители щелкнут на баннере и 
купят рекламируемый товар. 
Посещения еще более важны, чем показы. Посещение (click-through) возника- 
ет, когда посетитель щелкает на баннере, чтобы перейти на Web-страницу с рек- 
ламируемым товаром или услугой. Вспомните коммерческие телепередачи. Одно 
дело - показать рекламу зрителю, и другое дело (более важное, с точки зрения 
рекламодателя) — убедить зрителя пойти и купить товар. 
Если телевизионным рекламодателям для определения, сколько раз коммер- 
ческая телепрограмма приводит к покупкам, приходится полагаться на марке- 
тинговые исследования, то вы можете отследить реакцию посетителя на баннер 
более точно. С помощью ASP-сценариев можно подсчитывать и хранить в базе 
данных количество демонстраций баннера ротатором (т.е. количество показов) и 
как часто посетители щелкают на баннере для получения дополнительной ин- 
формации (т.е. количество посещений). Рекламодатели пользуются статистикой 
показов и посещений для определения эффективности рекламной кампании. А 
владельцы Web-сайтов используют эту же статистику для определения рекламно- 
го рейтинга: чем больше среднее количество показов и посещений, тем больше 
рекламодателей захотят разместить рекламный баннер на этой Web-странице. 
ПРАКТИКУМ 
Для накопления данных о показах и посещениях для последующего анализа сна- 
чала нужно создать в базе данных SQL-таблицу с помощью приведенных ниже 
SQL-операторов: 
USE hwdtt; 
CREATE TABLE bannerAdStats 
(targetURL VARCHAR(60) NOT NULL, 
imageURL VARCHAR(60) NOT NULL, 
impressionCount INTEGER, 
clickThroughCount INTEGER) ;

6 0 2 Глава 11. Активные серверные страницы (ASP) 
Первый оператор этого примера указывает СУБД, что надо использовать базу 
данных hwdtt. Второй оператор создает SQL-таблицу (bannerAdstats), в кото- 
рой ASP-сценарии будут хранить счетчики показов и посещений. 
Приложение Microsoft Banner Ad Rotator (стандартно поставляемое вместе с 
Personal Web Server (PWS) и Internet Information Server (IIS) версий 4 и 5) 
выбира- 
ет баннер из списка, находящегося в файле "расписания ротатора", и отображает 
его на Web-странице. Для отображения баннера с помощью Ad Rotator в ASP- 
страницу потребуется вставить приблизительно такой сценарий: 
<?/о
SET adRotatorObj - Server.CreateObject("MSWC.AdRotator") 
Response.Write_ 
adRotatorObj.GetAdvertisement(_ 
"/hwdtt/BannerAds/AdRotatorSchedule. asp") 
%> 
Первая строка этого сценария создает объект Ad Rotator (adRotatorObj), а вызов 
метода Response.Write (начинающийся во второй строке сценария) отображает 
баннер, ВОЗВращаемЫЙ В результате ВЫЗОВа Метода adRotatorObj .GetAdvertisement. 

Для подсчета количества показов, то есть сколько раз метод 
GetAdvertisement выбирает конкретный баннер, в начало ASP-страницы, на ко- 
торой отображается этот баннер, необходимо поместить следующую функцию: 
<?/о
Function DisplayRotatorAd(adRotatorObj,rotatorScheduleFile) 
Dim objMySQLCon 
Dim strAdRotatorHTML, intlmageStart, strlmageURL 
1 Указание ротатору, чтобы он сгенерировал HTML-код для отображения баннера 
StrAdRotatorHTML = _ 
adRotatorObj.GetAdvertisement(rotatorScheduleFile). 
' Выделение URL-адреса графического изображения из полученного HTML-кода 
intlmageStart = InStr(l, strAdRotatorHTML, "image=") + б 
strlmageURL = Mid(strAdRotatorHTML, intlmageStart, 
InStr(intlmageStart, strAdRotatorHTML, """") - 
intlmageStart) 
1 Соединение с СУБД и обновление счетчика показов 
Set objMySQLCon = Server.CreateObject("ADODB.Connection") 
With objMySQLCon 
.ConnectionString = 
"DRIVER={MySQL};SERVER=NVBizNet;UID=root;PWD=;DATABASE=hwdttM 
.Open 
.Execute "UPDATE bannerAdstats " & _ 
"SET impressionCount = impressionCount +1 " & _ 
"WHERE imageURL= ' " & strlmageURL & " ' " 
, .Close 
End With 
DisplayRotatorAd = strAdRotatorHTML 
End Function 
%> 
Операторы в первой половине данного сценария вызывают метод ротатора 
GetAdvertisement, чтобы сгенерировать HTML-код отображения баннера в виде 
гиперссылки, расположенной на Web-странице. Сценарий разбирает HTML-код,

Глава 11. Активные серверные страницы (ASP) 6 0 3 
полученный от ротатора, и выбирает из него URL-адрес изображения, использу- 
емого в баннере. Затем операторы во второй половине сценария устанавливают 
соединение с СУБД MySQL и обновляют счетчик показов гв SQL-таблице 
bannerAdStats. 
Обратите внимание, что функция DispiayRotatorAd() возвращает результат 
ВЫЗОВа метода adRotatorObj. GetAdvertisement. ПОЭТОМУ В ПерВОМ Примере СЦе- 
нария этого раздела следует заменить вызов метода GetAdvertisement на вызов 
функции DispiayRotatorAdo , как показано ниже: 
<%
SET adRotatorObj - Server.CreateObject("MSWC.AdRotator") 
Response.Write _ 
DisplayRotatorAd(adRotatorObj, 
"/hwdtt/BannerAds/AdRotatorSchedule.asp") 
%> 
Если вы прочли предыдущий раздел, то должны уже знать, что метод 
GetAdvertisement генерирует HTML-код наподобие следующего: 
<а href="http://www/NVBizNet.сom/hwdtt/BannerAds/AdRedirect.asp? 
URL=http://www.NVBizNet.com/default.htm& 
image=/BannerAds/NVBizNet.GIF"> 
<img src="/BannerAds/NVBizNet.GIF" 
alt="Обращайтесь на сайт NVBizNet.com за советами по Web-дизайну" 
width="400" height="60" border="l"X/a> 
Конкретный HTML-код, сгенерированный в результате вызова метода 
GetAdvertisement в вашем сценарии, будет определяться описаниями баннеров 
в соответствующем файле расписания ротатора. Но в любом случае атрибут href 
созданного дескриптора <а> будет указывать на файл перенаправления Ad 
Rotator. (URL-адрес файла перенаправления указывается после ключевого слова 
REDIRECT в первой строке файла расписания ротатора.) 
После того как посетитель щелкнет на баннере, браузер передает сценарий 
из строки запроса файла перенаправления, задающий целевую страницу баннера и 
путь к файлу рекламного изображения. В рассматриваемом примере целевая 
Страница баннера — http: //www.NVBizNet .com/hwdtt/BannerAds/AdRedirect.asp, 
и файлу перенаправления передается строка запроса: 
"URL=http://www.NVBizNet.com/default.htm &image= 
/hwdtt/BannerAds/NVBizNet.gif" 
Сценарий, содержащийся в файле перенаправления ротатора (в нашем приме- 
ре — AdRedirect.asp), отвечает за перенаправление браузера на целевую страни- 
цу баннера. Значит, в файле перенаправления также можно обновлять статистику 
посещений баннера. Для увеличения счетчика посещений для баннера, на кото- 
ром щелкнул посетитель, используйте в файле перенаправления ротатора при- 
мерно такой код: 
<?/о
Dim objMySQLCon, strlmageURL, strTargetURL 
1 Разбор строки запроса в две переменные 
strlmageURL = Request.QueryString<"image") 
strTargetURL = Request.QueryString("URL")

604 Глава 11. Активные серверные страницы (ASP) 
1 Открытие соединения с СУБД и увеличение счетчика посещений 
Set objMySQLCon = Server.CreateObject("ADODB.Connection") 
With objMySQLCon 
.ConnectionString= _ 
"DRIVER={MySQL};SERVER=NVBizNet;UID=root;PWD=;DATABASE=hwdtt" 
.Open 
.Execute "UPDATE bannerAdStats " & _ 
"SETclickThroughCount = clickThroughCount + 1 " &_ 
"WHERE imageURL = ' " & strlmageURL & " ' " & ._ 
"AND targetURL = ' " & strTargetURL & " ' " 
.Close 
End With 
Response.Redirect Request.QueryString("URL") 
%> 
Данный сценарий выбирает URL-адреса целевой страницы баннера и графи- 
ческого изображения из строки запроса, передаваемой ASP-странице 
(AdRedirect.asp), которая содержит этот сценарий. После обновления таблицы 
bannerAdStats сценарий закрывает соединений с базой данных и затем вызыва- 
ет метод Response.Redirect для перенаправления браузера на целевую страницу 
баннера. 
LjT0Qbl в сценариях, приведенных в данном разделе, SQL-операторы 
UPDATE работали корректно, нужно поместить URL-адреса и изображения баннера, и 
его 
целевой страницы в SQL-таблицу, в которой хранятся счетчики показов и посещений 
(в 
данном случае - bannerAdStats). Поэтому каждый раз при добавлении описания 
баннера в 
файл расписания Ad Rotator выполните в СУБД приведенный ниже оператор INSERT: 
INSERT INTO bannerAdStats VALUES (bannerRedirectionURL, banner ImageURL, 0,0); 
Подставьте вместо bannerAdStats свою таблицу со статистикой по баннерам, 
вместо bannerRedirectionURL — URL-адрес целевой страницы баннера и вместо 
bannerimageURL — URL-адрес графического изображения баннера. 
Описание файла расписания и файла перенаправления Ad Rotator можно най- 
ти в предыдущем разделе. ASP-страница, отображающая баннер, файл расписа- 
ния и файл перенаправления, описанные в данном разделе, доступны для выг- 
рузки на Сайте http://www.diasoft.kiev.ua. 
Обработка ошибок типа "Код 404: файл не найден11 
В заголовок каждого HTTP-сообщения, посылаемого браузеру, Web-сервер 
включает код состояния, показывающий, насколько успешным был запрос брау- 
зера. Коды состояния в диапазоне 200—299 означают, что запрос был успешным, 
а коды в диапазоне 400—499 означают неудачный запрос из-за какой-то ошибки 
в запросе браузера. Например, сервер посылает в HTTP-заголовке код состояния 
200, если запрос GET браузера (т.е. запрос браузера на выборку Web-страницы) 
завершился успешно. И сервер отправляет в HTTP-заголовке код состояния 404 
для указания, что запрос GET браузера завершился неудачно, так как сервер не 
смог найти запрошенную браузером Web-страницу.

Глава 11. Активные серверные страницы (ASP) 605 
Кроме кода состояния 404 сервер обычно посылает совершенно бесполезную 
Web-страницу общего назначения с заголовком "HTTP 404: файл не найден", 
если посетитель ошибся при наборе Web-адреса или щелкнул на гиперссылке, 
указывающей на уже не доступную на Web-сервере страницу. Стандартная стра- 
ница с сообщением об ошибке 404 бесполезна, поскольку не содержит никакой 
дополнительной информации. Текст этой страницы сообщает посетителю, что 
запрошенная Web-страница не существует, но ему не предлагается никакая поис- 
ковая форма или гиперссылки, которые могли бы помочь найти на этом Web- 
сайте другие ресурсы. К счастью, разработчики начали создавать специализиро- 
ванные страницы с сообщением об ошибке 404, более дружественные к 
посетителю. 
Качественная страница с сообщением об ошибке (если таковую страницу вообще 
можно назвать "качественной") должна обладать следующими характеристиками: 
• Страница сообщает, что обнаружена ошибка, в терминах, понятных посе- 
тителю. 
• Б странице содержатся извинения по поводу ошибки — даже если она 
произошла из-за ошибочного набора Web-адреса. 
• Страница содержит ссылки на страницу поиска по сайту и на наиболее 
популярные ресурсы сайта. 
Чтобы увидеть пример таких доступных в Internet страниц специальной обра- 
ботки ошибок, стоит посетить следующие Web-сайты: 
• http://www.microsoft.com/invaiidURL. Карта сайта, выпадающие списки 
гиперссылок на области сайта с описанием продукции, поддержки и об- 
щей информации, и форма поиска. 
http://www.yahoo.com/InvalidURL. ССЫЛКИ на перечень Продукции K0M- 
пании, кнопки, щелкнув на которых, посетитель может попасть в самые 
популярные области сайта (аукционы, служба быстрых сообщений, элект- 
ронная почта и т.д.), а также поисковая форма. 
http://www.4guysfromrolla.com/InvalidURL. Заглавная Страница Сайта, 
ссылки на ресурсы сайта (разбитые по разделам, обозревателям и типу ин- 
формации), ссылки на наиболее посещаемые страницы сайта и даже ссыл- 
ка на Web-страницу, где рассказано, как создать свою собственную страни- 
цу с сообщением об ошибке 404. 
ПРАКТИКУМ 
Чтобы заменить стандартную страницу об ошибке 404, необходимо выполнить две 
вещи: создать специальную страницу с сообщением об ошибке и указать серверу, 
чтобы он отправлял вместо стандартной вашу страницу Например, чтобы отобра- 
зить страницу с сообщением об ошибке 404, похожую на показанную на рис. 11.8, 
можно воспользоваться такой ASP-страницей: 
<% Option Explicit 
Function BadUrl() 
Dim objEMail 
Dim strBadURL

60 6 Глава 11. Активные серверные страницы (ASP) 
If Len(Request.QueryString) > 4 Then 
strBadURL = Right(Request.QueryString, Len(Request.QueryString) -4) 
Else 
strBadURL = "Error 404: выбрана страница обрабоки пользовательской 
ошибки" 
End If 
Set objEMail = Server.CreateObject("CDONTS.NewMail") 
objEmail.To = "kki@NVBizNet.com" 
objEmail.From = "Error404.asp@NVBizNet.com" 
objEmail .Subject = "На сервере NVBizNet.com обнаружена ошибка 404" 
objEmail.Body = _ 
Now () & " : обнаружена ошибка 404 (файл не найден) . 
Запрошена страница: " & strBadURL & _ 
" . Посетитель запросил эту страницу по гиперссылке -- >" & _ 
Request.ServerVariables("HTTP_REFERER") &" . " 
objEMail.Send - fl 
Set objEMail = Nothing 
BadURL = strBadURL 
End Function 
%> 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> 
<html> 
<headXtitle>NVBizNet - страница не HanfleHa</titleX/head> 
<body bgcolor="#ADD8E6"> 
<hlXcenter>HTML and Web Design Tips & Techniques</centerX/hl> 
<hrXcenterXh2>CTpaHH4a не HanfleHa</h2X/centerXbr> 
<%
Response.Write "<рХЬ>Извините, запрошенный вами документ Я & _ 
BadURL & ") не найден на сервере NVBizNet. com. </bXbr>" 
%>
Возможно, вы ввели неверный адрес, либо запрошенная страница 
была перемещена в другое место.</р> 
<р>При обнаружении этого запроса Web-мастеру 
<а title="Послать письмо Web-мастеру" 
href="mailto:kki@NVBizNet.com? 
subject="Kofl 404: страница не найдена на NVBizNet.com"> 
(Конрад Кинг - kki@NVBizNet.com)</a> автоматически было послано 
письмо с извещением, что на сайте отсутствует документ. В ближайшее 
время он исправит ситуацию.</р> 
<р>Надеемся, что одна из следующих ссылок поможет вам найти нужный 
документ или перейти на другую интересную вам ссылку: 
<liXahref ="http: //www.NVBizNet. com">NVBizNet. com</aX/li> 
<liXa href="/"NVBizNet.com (Домашняя страница) </aX/li> 
<liXahref ="http: //NVBizNet. com/HWDTT/HTML&WDTT_TOC . htm"> 
Карта сайта</аХ/И> 
<!-- Ссылки на другие интересные страницы —-> 
</ulX/p> 
<р>Или. . . введите одно или несколько ключевых слов для поиска на 
сайте требуемой страницы:<br> 
<form method="POST" action="/Search/SearchPage.asp"> 
<input type="submit" value="Поиск" name="Search"> 
<input type="text" name="keywords" size="30"> 
</fbrmX/p> 
</body> 
</html>

Глава 11. Активные серверные страницы (ASP) 607 
Нвзан :;V 
"Адрес! ht!p/> 
1 • "" OZT.?B Обнш 
**?&' ^vbirne! со m/b о d L.I Pi L 
нть Лсмай 
a 
Попы Иэбрвш,'.- Журнал • 
•я ы 
-ш . 
Лрвшс. 
^1: 
HTML and Web Design Tips & Techniques 
Страница не найдена 
Извините, запрошенный вами документ ("hflp:/.'www.nvbiznel.com/nadURL") не 
няйден 'ЛЯ сервере 
NVBizNet.com. : 
Возможно, вы Ейелн неверный адрес, либо запрошенная страница была перемещена в 
другое место. 
При обнаружении этого запроса Web-мастеру {Конрад Каш - kki@NVBizNet.com) 
автоматически было 
послано письмо с извещением, что на сайте отсутствует документ. В ближайшее 
время он исправит ситуацию. 
Надеемся, что одна из следующих ссылок поможет вам найти нужный документ или 
перейтн на другую 
интересную вам ссылку: 
• NVBizNet.com 
• NVBizNeg.com I Домашдяя станица) 
Или... введите одно или несколько ключевых слов для поискана сайте требуемой 
страницы: 
Поиск jj " 
Рис. 11.8. Страница со специальным сообщением об ошибке 404 
Функция BadURL(), приведенная в начале этой ASP-страницы, не только вы- 
дает текст посетителю сайта, но и посылает по электронной почте сообщение 
Web-мастеру. Эта функция использует компонент работы с электронной почтой 
CDONTS (поставляемый вместе с Internet Information Server (IIS)) для отправки 
сообщения о происшедшей ошибке, которое содержит запрошенный URL-адрес 
и адрес Web-страницы с гиперссылкой, перенаправившей посетителя на отсут- 
ствующую страницу. Создайте ASP-страницу с кодом из рассматриваемого при- 
мера и сохраните ее в файле с именем наподобие Error404.asp либо в корневой 
папке сайта, либо в одной из вложенных папок. 
Затем измените настройки своего Web-сервера так, чтобы при обнаружении 
ошибки 404 он отправлял браузеру именно вашу ASP-страницу. Например, для 
IIS версии 4 или 5 для этого потребуется выполнить следующие шаги: 
1. Выберите в меню Start | Programs | Microsoft Internet Information Server 
Internet Service Manager. На экране появится консоль управления IIS (IIS 
Management Console). 
2. В правой панели консоли управления IIS щелкните правой кнопкой мыши 
на пиктограмме Default Web Site (Web-сайт по умолчанию), и в контекстном 
меню выберите пункт Properties (Свойства). На экране появится диалоговое 
окно Default Web Site Properties (Свойства: Web-сайт по умолчанию). 
3. Щелкните на вкладке Custom Errors (Специальная обработка ошибок), и вы 
увидите список Web-страниц, отправляемых сервером в ответ на различные 
ошибочные состояния. 
4. Пользуясь полосой вертикальной прокрутки, найдите в списке строку со 
значением 404 в колонке НИР Error (Код ошибки). Затем щелкните на зна- 
чении 404, чтобы выбрать страницу ответа на ошибку с кодом 404.

608 Глава 11. Активные серверные страницы (ASP) 
5. Щелкните на кнопке Edit Properties (Редактировать свойства), в результате 
чего на экране появится диалоговое окно Error Mapping Properties (Свой- 
ства: Отображение ошибок), которое показано на рис. 11.9. 
6. Щелкните на выпадающем списке справа от поля Message Type (Тип сооб- 
щения) и выберите строку URL. Метка поля под Message Type изменится с 
File на URL. 
7. В поле URL введите относительный адрес страницы со специальным сооб- 
щением об ошибке 404, которую теперь должен использовать Web-сервер. 
Например, если вы сохранили страницу извещения об ошибке, созданную 
ранее в этом разделе, в файле Error404.asp в корневом каталоге Web-сай- 
та, ТО введите В ПОЛе URL текст /Error404 .asp. 
8. Щелкните на кнопке ОК в нижней части диалогового окна Error Mapping 
Properties. Система сохранит внесенные изменения, закроет это диалоговое 
окно и вернется в окно Default Web Site Properties. 
9. Щелкните на кнопке OK в нижней части этого диалогового окна. В резуль- 
тате произойдет возврат в окно консоли управления IIS. 
После выполнения девятого шага щелкните на кнопке Close (Закрыть) в пра- 
вом верхнем углу окна консоли управления I IS, чтобы выйти из приложения 
(закрыть его) и вернуться на рабочий стол. 
Default Web Site 
Web Site j Operators | Performance j ISAPI Pitas | Home Ditectory 
Documents Directory Securty | HTTPHeadeis Custom Errors 
- Errot Messages for HTTP Encus- 
Custorn error messages can be a local absolute URL or a pointer to a file. 
HTTP Error 
-
1• 
• 
5 
403;6 
403;7 
403;8 
403;9 
403:10 
403.11 
403.12 
403,14 
Й405 
Я 406 
ш 4П7 
| Type 
File 
Fife 
File 
File 
File 
File 
File 
Default 
•2ШВ File 
File 
File 
Contents 
CAWINNT\help\common\403-6 htm 
C:\WINNT\nelp\common\4037.htm 
CAWINN Т\пф\согатоп\403-8. htm 
CAWINN T ^help\common\403-9. htm 
CAWINNT \helpScommon\4Q3-10.htm 
C:\WINNT\help\common\403-11 .htm 
CAWINNT\help^cDmmon\403-12.htm 
"Forbidden • Directory Listing Denied" 
|«та|И1ни!И1ЯЯЯЯТТО!1Я!11 
CAWINNT\helpWcmrnon\405 htm 
CAWINNT\help\common\406.htm 
n\WINN1Vh«lrArnmmnrA4n7 him 
I 
A 
m 
EdiiPiopertiet " .ettoDetault - j 
OK Cancel Help 
Рис. 11.9. Диалоговое окно "Error Mapping Properties " 
приложения Internet Information Server

Глава 12 
• 
Безопасность и производительность 
- 
•
> 
В этой главе 
Загрузка и установка открытого ключа, цифровой 
подписи и идентификатора сервера 
Создание защищенной Web-страницы на IIS-сервере 
Установка программного брандмауэра 
Настройка назначения портов в брандмауэре 
Снижение подверженности сайта вирусам 
Повышение производительности и уровня 
безопасности за счет блокировки принтера и 
запрещения совместного использования файлов 
Использование клиентских сертификатов для 
ограничения доступа пользователей 
Анализ системных событий для обнаружения 
вторжений 
Использование файловой системы NTFS 
Отключение удаленных служб 
Анализ уязвимых мест системы 
Обработка данных кредитных карточек 
Исследование цепочки производительности 
Web-сайта 
Создание набора Web-серверов 
Контроль быстродействия сервера

Глава 12. Безопасность и производительность 
книге были рассмотрены многие средства, которые можно использовать для 
^создания Web-сайтов профессионального уровня. В этой главе мы сначала ос- 
тановимся на защите вновь разработанного Web-сайта. В частности, будут рас- 
смотрены шаги, которые потребуется предпринять для обеспечения защиты сайта 
от наиболее распространенных атак хакеров, а также выполнение транзакций с по- 
мощью защищенных страниц. Так, например, вы научитесь создавать защищенные 
страницы, при использовании которых браузер и сервер обмениваются зашифро- 
ванными сообщениями с применением протокола защищенных сокетов. Кроме 
того, вы научитесь устанавливать и настраивать параметры брандмауэра, предназ- 
наченного для фильтрации сообщепий, входящих в вашу систему. Далее вы узнае- 
те, как можно использовать аудит и обнаружение вторжений для выявления атак 
хакеров. 
После рассмотрения средств защиты мы перейдем к изучению способов повы- 
шения производительности Web-сайта за счет устранения узких мест, снижаю- 
щих эффективности выполняемых Web-сайтом операций. Вы рассмотрите цепоч- 
ку производительности Web-сервера, которая начинается с соединения сервера с 
сетью Web, проходит через ОЗУ сервера, диски, кэширование и т.д. Другими 
словами, эта глава поможет вам довести свой Web-сайт до настоящего професси- 
онального уровня. 
Угроза атак со стороны хакеров 
После создания и запуска Web-сайта хакеры могут атаковать его различными 
способами: 
• За счет перехвата, просмотра и, возможно, изменения содержимого HTTP- 
сообщений, которыми сервер обменивается с браузерами. 
• За счет получения доступа к файлам на сервере, которые могут содержать 
чувствительную информацию, например, данные о номерах кредитных кар- 
точек клиентов. 
• За счет запуска на сервер тысяч запросов, которые потребляют ресурсы 
сайта и затрудняют возможность отправки отклика другим посетителям. 
• За счет инфицирования вирусами файлов, дисков или входящих на сайт 
сообщений электронной почты. 
• За счет взломаCGI-сценариев и получения доступа к серверу. 
В настоящей главе будут описаны конкретные методы, позволяющие снизить 
риск каждой из выше перечисленных атак. 
Каким образом хакеры перехватывают и изменяют 
сообщения в сети? 
Когда программа передает данные по сети Internet на удаленный компьютер, 
сообщения не просто следуют непосредственно от компьютера-отправителя к 
компьютеру-получателю. Как показано на рис. 12.1, для попадания на удапен- 
ный компьютер сообщение проходит через множество сайтов.

Глава 12. Безопасность и производительность 611 
Рис. 12.1. При прохождении по сети Internet сообщение проходит через множество 
сайтов 
Для более полного понимания процесса перехода сообщения от одной систе- 
мы к другой при его прохождении по сети Internet выполните команду tracert 
(имя этой команды представляет собой сокращение от английских слов trace 
route — отследить маршрут), выводящую список сайтов, через которые сообще- 
ние проходит до попадания на удаленный компьютер. Приведенный ниже лис- 
тинг содержит пример маршрута, пройденного сообщением от компьютера науч- 
ного редактора этой книги до сайта yahoo.com: 
C:\>tracert yahoo.com<Enter> 
Трассировка маршрута к yahoo.com [66.218.71.198] 
с максимальный числом переходов 30: 
sababa.zeos.net [194.153.128.132] 
uma.zeos.net [194.153.128.131] 
dg.zeos.net [194.153.128.253] 
kl72Gl-l.dg.net.ua [213.186.193.3] 
213.179.224.109 
Borderl-Core.ukrtel.net [195.5.5.154] 
195.5.53.54 
bpt-bl-posO-2.telia.net [213.248.69.65] 
ffm-bl-posl3-l.telia.net [213.248.103.1] 
ffm-bb2-posl-0-0.telia.net [213.248.68.17] 
kbn-bb2-pos2-l-0.telia.net [213.248.65.6] 
nyk-bb2-pos5-0-0.telia.net [213.248.64.34] 
nyk-il-pos2-0.telia.net [213.248.82.22] 
so-0-l-O.edgel.NewYorkl.Level3.net 
1
2
3
4
5
6
7
8
9 
10 
11 
12 
13 
14 
15 
151 
151 
192 
151 
206 
192 
178 
165 
193 
178 
481 
316 
302 
700 
[209.; 
631 
M C 
M C 
M C 
M C 
M C 
M C 
M C 
M C 
M C 
M C 
M C 
M C 
M C 
M C 
244. 
M C 
[64.159.4 
123 
123 
178 
124 
178 
179 
179 
178 
247 
165 
233 
316 
302 
549 
160. 
673 
M C 
M C 
M C 
M C 
M C 
M C 
M C 
M C 
M C 
M C 
M C 
M C 
M C 
M C 
161] 
MC 
.149] 
151 
124 
151 
137 
192 
165 
151 
151 
178 
179 
192 
302 
302 
577 
673 
M C 
M C 
M C 
M C 
M C 
M C 
MC 
M C 
M C 
M C 
M C 
M C 
M C 
M C 
M C ge-2-l-0.bbr2.NewYorkl.level3.net

612 Глава 12. Безопасность и производительность 
16 673 мс 1277 мс 796 мс so-0-0-0.mpl.SanJosel.level3.net 
[64.159.1.133] 
17 741 мс 701 мс 727 мс gige9-l.ipcolo3.SanJosel.Level3.net 
[64.159.2.73] 
18 686 мс 673 мс 673 мс unknown.Level3 .net [64.152. 69 . 30] 
19 742 мс 906 мс 1140 мс wl.re.vip.scd.yahoo.com [66.218.71.198] 
Трассировка завершена. 
В приведенном примере для попадания на сайт yahoo.com сообщение про- 
шло через 18 промежуточных сайтов. При каждом попадании сообщения на но- 
вый сайт система, на которой находится этот сайт, проверяет, предназначено ли 
сообщение для нее. В случае положительного результата проверки сетевое про- 
граммное обеспечение передает сообщение соответствующей программе, напри- 
мер, почтовой программе или Web-серверу. Если же сообщение предназначено 
не для этой системы, сетевое программное обеспечение перенаправляет сообще- 
ние другой системе, которая находится ближе всего к компьютеру-получателю. 
В любом месте маршрута следования сообщения хакер, через систему которо- 
го проходит сообщение, может прочитать и изменить содержимое сообщения. 
Предположим, например, что сообщение содержит данные о кредитной карточ- 
ке. При прохождении сообщения через систему хакера хакер имеет возможность 
прочесть и сохранить (то бишь "позаимствовать") данные (см. рис. 12.2). 
В главе 3 при рассмотрении HTML-форм мы говорили, что при отправке по- 
сетителем содержимого формы браузер передает их серверу с помощью протоко- 
ла HTTP. К сожалению, HTTP-протокол предусматривает передачу сообщений в 
виде открытого текста, т.е. хакер без особого труда может просмотреть содержи- 
мое сообщения. Чтобы лучше понять, как хакер перехватывает и просматривает 
пакеты сообщений, выгрузите и установите у себя программу CommView, которая 
ДОСТупна на Странице ПО адресу http://webattack.com/get/commview.shtml. С 
помощью программы CommView вы можете просматривать содержимое различных 
типов сообщений, поступающих в вашу систему. Так, например, на рис. 12.3 
показа- 
но содержимое HTTP-сообщения, просматриваемого с помощью CommView. 
Рис. 12.2. Перехватывая сообщения, хакеры воруют информацию

Глава 12.'Безопасность и производительность 613 
Fte Se«r* View Tools Setbnoj Rule; Heto 
249 
250 
Kl 
25! 
2Я 
ARP StO 
KVUOP 
1РПСР 
iP/'lCP 
IP/ICP 
iP/KP 
IP/IXP 
IP.i'TO» 
1РПСР 
0С-Е0.5::А» <F 00 •: 
№04.5A:2S:M.AA •:-:• 01:00:5t.:0;:3... 
O0:C3:47:lO:B8:DA о 00:E0:52:AD:4F:00 
00:03:47:10:68:0* <« 0O:EO:S2:AD:4F:0O 
00:03:47:10:68 С'A •> 0Q:EO:5Z:A&:4F:0Q 
00:05:47:10:8^:^* => 00 E0:52:AD:4r:00 
tXHvS-4':K>:(r.e0A <«OOtCO:?S2:Al?:4f:00 
00:03:47:IO:Be:DA <- CO:E0:S2:AD:4F:00 
fl/A 
24.234.63. IDS <- 2O4.0.99.21 
^4,гЗ-».Ь3.105 <~ 204.0.99.il 
24.2J4.63.IQS»*.> 204Л.99.2! 
24.234-W.105«>207.17 215.193 
24.M4 63.1СЙ f« 204.0.99,21 
24.^34.61.105 <« 207.17.213.193 
00:CJ,4(:IO:B6-OA <- 0tl:E0:5;:№:4r:00 24.234.63.105 •:- 204.0.99.21 
4387 
4387 
4387 
43Ю 
4387 
4385 
438? 
<« 80 
80 
c - SO 
<• SO 
<.- 8(1 
f i 990 
a o.:o 
о.ого 
o.ooa 
O.OCB 
o.oio 
occo 
o.ooo 
0.070 
0x0G40 34 30 2« 
O*OG5O 70 61 «3 
0x0060 69 78 29 
.i 65 ZF 31 2E-33 2S 31 39 20 28 55 .E 
20 6B 6F 64 5F-70 «5 72 «C 2F 31 2E 32 
(F И 5[ 73 73 4C 21 32 2E 3t 2B 31 20 
OxOGSO 
«Й* ИТТР/1.1 2 
00 ОК..Server: A 
р*с1м/1.3. IS <Vn 
ix> jnod__perl/l. 2 
5 ra>d . » l / 2 . t 1 
Open5Sl./0.9.(л.. 
СкООСО 
0»00D0 Ш С , 
Ш I P 
[*: TCP 
. вша 
V'OfStort: HTTP/I.l 
Qfl PM *T"« 43Outy235peis "Aulo-savne "Oil [RJMW :№ CPU Usage 
Рис. 12.3. Использование программы Сотт View для просмотра содержимого 
HTTP-сообщения 
Хакер для просмотра содержимого сообщений, проходящих через его компь- 
ютер, может использовать программу, аналогичную CommView. Поскольку коли- 
чество "сообщений, проходящих через систему хакера, может быть достаточно 
большим, опытный хакер может написать программу, которая выбирает из сооб- 
щений данные, по формату напоминающие номера кредитных карточек, даты 
истечения срока действия карточек и тому подобные данные. 
Помимо просмотра сообщения, хакер может изменять содержимое перехваты- 
ваемого им сообщения. Например, предположим, что хакер перехватывает сооб- 
щение, содержащее заказ на покупку товара. Хакер имеет возможность, как по- 
казано на рис. 12.4, изменить количество покупаемого товара и адрес его 
доставки. Таким образом, заказанный вами товар получите не вы, а хакер ("при- 
ятная" новость, не правда ли?). 
Для защиты сообщений сайта от перехвата и изменения хакерами можно вос- 
пользоваться шифрованием и защищенными Web-страницами, которые будут 
рассматриваться ниже в этой главе в разделе "Каким образом шифрование защи- 
щает передаваемые по сети сообщения?".

614 Глава 12. Безопасность и производительность 
Отправитель 
Исходное 
сообщение 
Сообщение 
хакера 
Получатель 
Хакер 
Рис. 12.4. Хакеры имеют возможность изменять содержимое перехватываемых ими 
сообщений 
Каким образом хакеры попадают в систему? 
В сети Internet многие системы дают пользователям возможность входить с 
удаленных систем. Так, например, компания может открывать вход в свою кор- 
поративную сеть для коммивояжеров, чтобы они имели возможность просмот- 
реть, создать или обновить данные, или же просто прочитать свою электронную 
почту. Аналогично, система может быть открыта для входа с удаленных компью- 
теров для программистов, Web-разработчиков и других пользователей, которые 
выгружают или загружают файлы. В зависимости от конфигурации системы, 
пользователи, как показано на рис. 12.5, получают удаленный доступ к системе 
через модемное соединение или Internet. Если система открыта для удаленного 
доступа, хакеры получают возможность использовать программы и службы уда- 
ленного доступа для взлома такой системы. 
Действительный 
пользователь 
Хакер 
Рис. 12.5. Удаленный доступ предоставляет пользователям (ихакерам), которые 
физически 
не соединены с сетью, способ получения доступа к ресурсам сети

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

Раньше, когда операционные системы не блокировали учетные записи после 
нескольких неправильных вводов паролей, хакеры могли запускать специальные 
программы, называемые программами проверки паролей, которые многократно 
вводили различные комбинации имени пользователя и пароля. С помощью про- 
грамм проверки паролей хакеры имели возможность буквально за несколько ми- 
нут проверить тысячи комбинаций имени пользователя и пароля. 
Большинство операционных систем хранят данные об учетных записях 
пользователей (включающие имя пользователя и пароль) в файлах. Для исключе- 
ния возможности просмотра пользователями данных о паролях, как правило, 
файл учетных записей шифруется. К сожалению, в сети Internet можно найти не- 
мало программ, которые дешифруют и выводят на экран содержимое файла учет- 
ных записей для операционных систем Unix/Linux, Windows NT и даже Windows 
2000. Самый эффективный метод защиты таких файлов — защита учетных запи- 
сей администраторов системы. 
Как правило, хакер сначала пытается получить доступ к учетным записям ад- 
министраторов системы. Для обеспечения более эффективной защиты учетных 
записей администраторов от хакеров на многих сайтах в качестве имен для таких 
учеТНЫХ записей ИСПОЛЬЗУЮТ Не NetworkAdmin ИЛИ RemoteAdmin, а Менее Знача-

Глава 12. Безопасность и производительность 
щие слова. Это означает, что хакеру будет сложнее получить доступ к ключевым 
учетным записям, что само поjce6e может стать достаточно убедительной причи- 
ной для прекращения хакером попыток взлома сайта. 
Защита учетных записей по умолчанию. 
При первой установке операционной системы или сложного приложения (на- 
пример, системы управления базами данных), программное обеспечение предос- 
тавляет несколько учетных записей по умолчанию, которые можно применять 
для выполнения установки, тестирования и т.д. К сожалению, многие пользоваг 
тели забывают блокировать эти учетные записи после установки приложений. 
Часто хакеры получают доступ к системе именно через такие незаблокированные 
учетные записи. 
Если вы занимаете должность системного администратора, просмотрите спи- 
сок всех учетных записей сайта. Измените пароли для учетных записей, устанав- 
ливаемых по умолчанию, или, что еще лучше, вообще заблокируйте неиспользу- 
емые учетные записи. При просмотре списка учетных записей убедитесь, что вы 
знаете назначение каждой записи. Более того, во многих случаях защищенность 
сайта можно повысить за счет блокирования учетных записей большинства 
пользователей после окончания рабочего дня. 
Социотехнические атаки 
Один из наиболее простых способов получения доступа в систему заключает- 
ся в том, чтобы спросить у пользователя его имя пользователя и пароль. Сетевые 
администраторы называют такие атаки хакеров социотехническими. Часто быва- 
ет, что ничего не подозревающему пользователю звонят, и для получения досту- 
па в систему ведут разговор примерно следующего характера: 
Хакер: Доброе утро. Это Конрад из отдела обработки данных. Сегодня во вто- 
рой половине дня по электронной почте вы получите письмо с сообщением о 
том, что в качестве части проекта повышения защиты сети компании все 
пользователи должны будут изменить свои пароли завтра в 8:30 утра. 
Пользователь: Хорошо. 
Хакер: Для контроля процесса смены пароля мне нужно знать ваше текущее 
имя и пароль. 
Пользователь: Хорошо. 
Хакер: Какое у вас имя пользователя? 
Пользователь: Smith. 
Хакер: Ваш пароль? 
Пользователь: toobusy. 
Хакер: Великолепно, не забудьте завтра сменить свой пароль. 
После того, как хакер узнал имя пользователя и пароль, он может получить 
доступ в систему. Для защиты вашего сайта от атак подобного рода вы должны 
научить пользователей никому не выдавать свои имена и пароли. Скажите им, 
что никто из отдела обработки данных не будет интересоваться паролями, и нико- 
му, даже сотруднику компании, нельзя сообщать свое имя, пользователя и пароль.

Глава 12. Безопасность и производительность 6 1 7 
Каким образом хакеры блокируют доступ 
к вашей системе? 
Если хакер не может получить доступ к вашей системе, он может попытаться 
заблокировать доступ к системе других пользователей за счет проведения атаки 
типа "отказ в обслуживании" ("denial-of-service", "DoS"), которая потребляет 
ре- 
сурсы системы частично (снижая производительность) или полностью (вообще 
блокируя доступ пользователей). Например, несколько лет назад хакеры блоки- 
ровали службу электронной почты Белого дома, бомбардируя адрес электронной 
почты десятками тысяч больших сообщений. Несмотря на то что хакеры не 
смогли проникнуть на сайт Белого дома, тем не менее, их действия привели к 
тому, что сайт не мог оказывать услуги другим пользователям. 
В следующем простом HTML-файле, ReioadForever.html, используется деск- 
риптор <meta>, который приводит к тому, что браузер загружает графическое 
изображение большого объема с сайта www.somevictim.com каждые 30 секунд. 
Запрещая кэширование, HTML-файл заставляет Web-браузер передавать содержи- 
мое запрашиваемой страницы каждые 30 секунд. При обслуживании этого запро- 
са сервер не сможет работать с другими пользователями. Хакер, например, может 
открыть 10 или более окон браузеров, в которые загружается страница 
ReioadForever.html. Чем больше количество окон с открытым файлом, тем 
больше снижается производительности сервера при обслуживании других пользо- 
вателей. 
<html> 
<meta http-equiv="Refresh" content="30" /> 
<img src="http://www.SomeVictim.com/LargeImageFile.jpg" /> 
</html> 
Для защиты сайта от DoS-атаки можно воспользоваться брандмауэром, кото- 
рый отслеживает идентичные или подобные HTTP-запросы. Кроме того, можно 
просмотреть файлы журнала посещения сайта. В советах этой главы будет рас- 
сказано об установке и настройке брандмауэра и о создании и анализе файлов 
системного журнала. 
Каким образом хакеры атакуют CGI-сценарии? 
В главе 3 вы научились создавать HTML-формы, которые посетители могут 
заполнять и передавать приложению, запущенному на Web-сервере. Как правило, 
программисты пишут серверные приложения для обработки результатов заполне- 
ния форм на таких языках программирования, как Perl или РНР. Многие годы 
хакеры считали CGI-сценарии удобным местом для взлома сайтов. Это было 
вызвано тем, что серверные сценарии часто используют доступ к данным, кото- 
рые хранятся на жестком диске. В зависимости от типа выполняемой сценарием 
обработки, хакер может использовать сценарий в своих собственных целях, вы- 
полняя его со значениями, передаваемыми извне процесса передачи данных 
формы. Более того, если хакер может получить доступ к жесткому диску Web- 
сервера, для него открывается возможность замены файла сценария своим соб-

618 Глава 12. Безопасность и производительность 
ственным файлом. И в зависимости от назначения сценария хакера, администра- 
торы сайта могут потрать немало времени на обнаружение изменении. Напри- 
мер, сценарий хакера может просто содержать одну дополнительную строку, ко- 
торая передает по электронной почте на адрес хакера копию данных о 
кредитных карточках. 
Часто читая сообщения об атаках хакеров можно встретить данные об атаках 
переполнения буфера, которые позволяют хакерам взламывать сценарии для по- 
лучения доступа к серверу с возможностью запуска любой установленной на сер- 
вере программы! Так, в главе 3 при создании HTML-форм вы создавали поля 
ввода текста, которые давали возможность посетителям вводить только опреде- 
ленное количество символов. Переполнение буфера возникает тогда, когда 
пользователь (не обязательно хакер) передает большее количество данных, чем 
ожидает получить сценарий. Например, предположим, что HTML-форма позво- 
ляет посетителю вводить адрес, длина которого составляет до 128 символов. Тем 
не менее, вследствие наличия ошибок программирования сценарий предоставля- 
ет место только для 64 символов. Поскольку большинство посетителей в каче- 
стве своего адреса вводят меньше чем 64 символа, сценарий может довольно дол- 
го работать без ошибок. Тем не менее, когда один из посетителей введет адрес, 
длина которого превышает 64 символа, сценарий вызовет ошибку переполнения 
буфера. 
Проблема с переполнением буфера состоит в том, что некоторые языки сце- 
нариев (как правило, скомпилированные программы) вызывают ошибку в про- 
цессоре сценариев (т.е. программе, которая на сервере выполняется содержащие- 
ся в сценарии операторы). В зависимости от операционной системы, на которой 
выполняет программное обеспечение сервера, подобного рода ошибки могут от- 
крыть доступ хакеру к серверу и содержащимся на нем файлам. Для использова- 
ния ошибок переполнения буфера хакер сначала вызывает ошибку процессора 
сценариев. Затем, после.получения доступа к серверу хакер копирует или уделяет 
файлы или запускает программы, находящиеся на сервере. 
Как вы уже знаете, при передаче сообщений по сети Internet хакер может их 
перехватывать и, возможно, изменять их содержимое. Если хакер знает, что сер- 
вер работает под управлением операционной системы и с процессором сценари- 
ев, подверженным ошибкам переполнения буфера, он может перехватить коррек- 
тное сообщение, предназначенной для этого сайта, и изменить содержимое 
сообщения таким образом, что передаваемые данные вызовут ошибку переполне- 
ния буфера. 
За многие годы разработчики операционных систем, процессоров сценариев и 
Web-программисты научились бороться с ошибками переполнения буфера. По- 
этому, большинство приложений после возникновения ошибок переполнения не 
дают возможности хакерам получить доступ к серверу. Подробное описание опасно- 
сти возникновения ошибок переполнения буфера можно найти на Web-сайте груп- 
пы CERT по адресу http://www.cert.org, где приводятся известные уязвимые мес- 
та, вызванные ошибками переполнения (см. рис. 12.6). Кроме того, с помощью 
Web-сайта группы CERT можно найти описание уязвимых мест другого используе- 
мого вами программного обеспечения, в частности, PHP, ActiveX, ASP, IIS и т.д.

Глава 12. Безопасность и производительность 619 
CERT Cooidination Center: Vulneiabililies. Incidents I Fixes - Microsoft 
Internet Expiorei 
Файл Правка Дин 
ф.-Ш 
Сервис (^правка 
Пвиж ^Избранное ^Журнал , ^ 
; Адрес hHp7/www.ce[t.0[g/nav/indeK_red.html _^J ^Переход 
Related 
Software Engineering Institute Home She tode 
АллЛмЬч- incidents & fixes 
vuin erabilities, 
incidents & fixes 
We alert users to potential threats to the security of 
their systems and provide information about how to 
avoid, minimize, or recover from the damage. Because 
users are our primary source of information, we 
encourage you to report any incidents you experience 
on your systems or any vulnerabilities you find. These 
reports will help us inform you and others about 
potential threats and ways to avoid or recover from 
them. 
Current Activity 
Latest Version: 
Search Contact FAO 
| security pra eti ccs 
ch & analysis \ctJncatton 
"Hs« tttijwwy avttptitfwtksi imjxici «f art U'xmv 
of vttktcr&bmty dvtctmjfte what typ^ ot 
ihCCunty niv.fi w4v product: atrxt ttow qoicitfy ,•• 
user should respond. Advisories, wttict* 
фхсПЬе ihc та&аЪгКт mquire 
finmaSmte ecUcet, wWto weft ftps vtf^r fcss 
mare links 
Oct 14 16•A7.0Q EDT 2003 
includes these topics: 
• OHostr TroUn Horse 
• W«32/St 
• W32/W
мп Л Worm 
e inttaftitto554rtcp 
• big.F Worm 
«lohij WtMfn 
aster Worm 
. incident Handling Certiticnt'Ofi ; ' wore ^ 
; The CERT@/CC has created a program to certify 
| individuals in computer security incident handling, 
i This new certification program complements our 
i exisiting incident handling training curriculum. 
f Communicate With Us 
• Report an Incident 
! Automated incident Reporting I Text Vei 
'••>$ Интернет 
Рис. 12.6. Сайт группы CERT помогает в поиске уязвимых мест программного 
обеспечения 
Каким образом брандмауэры защищают ваш сайт? 
Для защиты сети от атак хакеров многие системные администраторы между 
Internet и локальной сетью помещают брандмауэр. Брандмауэр (firewall) фильтрует 

сообщения, попадающие в локальную сеть из сети Internet. He следует путать се- 
тевые сообщения с сообщениями электронной почты. Сетевые сообщения соот- 
ветствуют данным, передаваемым между компьютерами, таким программами, как 
Web-браузеры или программы Internet-чата. 
Брандмауэр может представлять собой специальный аппаратный комплекс 
или выполняемое на компьютере программное обеспечение. На рис. 12.7 пред- 
ставлена схема фильтрации сообщений, поступающих в локальную сеть.

620 Глава 12. Безопасность и производительность 
Рис. 12.7. Брандмауэр фильтрует сообщения, поступающие в локальную сеть 
В приведенном примере брандмауэр пропускает в локальную сеть только 
HTTP-сообщения, переданные от удаленного компьютера. Брандмауэр не про- 
пускает в локальную сеть сообщения таких программ, как чат-программы или 
программы передачи файлов (например, FTP). Описание процесса установки и 
настройки параметров брандмауэра для защиты Web-сайта будет приведено ниже 
в этой главе, в совете "Установка программного брандмауэра". 
Каким образом шифрование защищает передаваемые 
по сети сообщения? 
Как вы уже знаете, хакеры могут перехватывать, просматривать и, возможно, 
изменять содержимое сообщений, передаваемых через Internet. К сожалению, не- 
возможно предотвратить перехват сообщений, которые проходят через компью- 
тер хакера. Тем не менее, за счет шифрования предаваемых сообщений вы не даете 
хакерам возможности просматривать содержащуюся в сообщении информацию и 
изменять ее в соответствии с целями, который поставил перед собой хакер. 
Для организации обмена зашифрованными сообщениями две программы, на- 
пример, браузер и сервер, должны предварительно "договориться" относительно 
используемого алгоритма шифрования. Предположим, например, что браузер и 
сервер шифруют и дешифруют сообщения за счет увеличения или уменьшения 
буквы на одну позицию. Например, буквы ABC при увеличении букв на одну 
позицию будут шифроваться как BCD, а буквы ZYX при уменьшении букв на 
одну позицию будут выглядеть как YXW. После выбора метода шифрования (в 
приведенном примере это увеличение или уменьшение буквы), необходимо дого- 
вориться о количестве позиций увеличений или уменьшения. Количество пози- 
ций можно считать ключом шифрования. Например, браузер и сервер могут 
выбрать метод шифрования, при котором каждая буква в слове увеличивается на 
2 позиции. Таким образом, ABC станет CDE. 
Очевидно, что алгоритм шифрования в Web предусматривает гораздо более 
сложные операции, нежели увеличение или уменьшение позиций букв. Тем не

Глава 12. Безопасность и производительность 
менее, процесс, используемый программами для выбора алгоритма и ключа 
шифрования, аналогичен описанному выше. Когда Web-сервер инициирует защи- 
щенное соединение с Web-сервером, сначала браузер передает список доступных 
алгоритмов шифрования. Web-сервер изучает список и выбирает алгоритм, под- 
держиваемый как сервером, так и браузером, и передает браузеру сообщение, 
указывающее на выбранный алгоритм. Тем не менее, перед тем, как две програм- 
мы смогут обмениваться зашифрованными сообщениями, они должны выбрать 
ключ шифрования. 
Предположим, например, что сервер при отправке сообщения с выбором ал- 
горитма шифрования включает в него ключ, которым будут пользоваться сервер 
и браузер для шифрования и дешифрации сообщений. Поскольку сервер не мо- 
жет начать шифрование сообщений до получения ключа шифрования, сообще- 
ния передаются в открытом, т.е. незашифрованном, виде. Если хакер перехватит 
это сообщение (с выбранным алгоритмом и ключом шифрования), он будет 
знать и алгоритм шифрования, и ключ шифрования, т.е. хакер сможет перехва- 
тывать сообщения и расшифровывать их содержимое. Чтобы исключить возмож- 
ность перехвата хакером алгоритма шифрования и ключа шифрования, сервер 
для шифрования значения ключа, который будет использоваться браузером и 
сервером для шифрования обмена сообщениями, использует специальный ключ 
шифрования — открытый ключ сервера. Это означает, что перед началом защи- 
щенного сеанса между клиентом и сервером Web-сервер должен иметь открытый 
ключ (рассматриваемый в следующем разделе), который сервер должен передать 
Web-браузеру. 
Шифрование с открытым ключом 
Сегодня для передачи зашифрованных сообщений по электронной почте или 
установки защищенного Web-соединения пользователи широко применяют шиф- 
рование с открытым ключом (public key encryption). Для получения зашифрован- 
ных сообщений пользователь получает два специальных ключа: закрытый ключ, 
которым пользуется только данный пользователь, и открытый ключ, которым 
может воспользоваться любой пользователь сети Internet. 
Предположим, например, что вы хотите передать зашифрованное сообщение 
не кому-то там, а самому Джорджу Бушу. Для этого вы должны знать его откры- 
тый ключ, который вы, возможно, получили от господина Буша в его предыду- 
щем сообщении, или узнали на сервере открытых ключей (доступ к которому 
имеют все пользователи). С помощью открытого ключа Джорджа Буша вы шиф- 
руете свои сообщения. При получении сообщения Джордж Буш расшифровывает 
их с помощью своего закрытого ключа. Другими словами, для отправки вам за- 
шифрованного сообщения пользователь шифрует сообщение с помощью вашего 
открытого ключа. После получения сообщения вы можете его расшифровать с 
помощью своего закрытого ключа. 
Уникальность схемы шифрования с открытым ключом заключается в том, что 
ваш открытый ключ может быть известен всем пользователям. Но с его помо- 
щью пользователи могут только шифровать сообщения, которые вы в дальней- 
шем можете расшифровать с использованием своего закрытого ключа.

622 Глава 12. Безопасность и производительность 
Поиск открытого ключа пользователя 
В совете "Загрузка и установка открытого ключа, цифровой подписи и иден- 
тификатора сервера" будет описан процесс загрузки и установки ваших собствен- 
ных ключей шифрования и цифровой подписи. Цифровая подпись представляет 
собой уникальное значение, которое можно прикрепить, например, к сообщени- 
ям электронной почты, для аутентификации вас получателем сообщения (чтобы 
получатель знал, что это именно вы отправили сообщение) и гарантии того, что 
хакер не перехватил сообщение и не изменил его содержимое при прохождении 
сообщения через Internet. 
Как правило, после получения своего открытого ключа пользователь отправ- 
ляет его по электронной почте сотрудникам, друзьям и членам семьи. Кроме 
того, ваш открытый ключ можно опубликовать на кольце для открытых ключей в 
Web. Если пользователь, которому вы не отправляли свой открытый ключ, хочет 
написать вам зашифрованное письмо, он может попытаться найти ваш открытый 
ключ на сервере открытых ключей. На рис. 12.8 показан сервер открытых клю- 
чей Массачусетского технологического института, который можно использоваться 
для поиска открытых ключей пользователей. 
После того, как пользователь найдет ваш открытый ключ, он может его ис- 
пользовать для отправки вам зашифрованных сообщений. 
фвйя Дравка .ид Избранное Сервис .Справка 
ч^Назао ' < .J J •$ jm 
&ttpec jig] http,/7pgpkeys.mil.edu. 11371/ 
_~j Избранное 
j * j ^v* Переход Ссыл 
OpenPGP Public Key Server Commands 
Extract a Key from the Server 
Submit a Key to the Server 
Extracting a Key 
Here is how to extract a key. 
1. Select either the "Index" or "Verbose Index" check box. The "Verbose Index" 
option also displays all signatures on 
displayed keys. 
2. Type ID you want to search for m the "Search String" box. 
3. Press the "Do the search!" key. 
A. The server will return a (verbose) list of keys on the server matching the 
given ID. (The Ш can be any valid argument 
to a pgp -kv(v) command. If you want to look up a key by its hexadecimal КеуГО, 
remember to prefix the ID with 
•Ox" ) 
.] Готово : ф Интернет 
Рис. 12.8. Использование кольца открытых ключей для поиска открытого ключа 
пользователя

Глава 12. Безопасность и производительность 62 3 
Загрузка и установка открытого ключа, цифровой 
подписи и идентификатора сервера 
Перед тем, как отправлять вам зашифрованное сообщение по электронной 
почте, вы должны получить свои открытый и закрытый ключи. Существует не- 
сколько методов получения ключей шифрования. Web-сайт компании VeriSign, 
http://www.verisign.com, ПОЗВОЛЯеТ ВЫГруЗИТЬ Пробный Набор (СО СРОКОМ ДеЙ- 
ствия 60 дней) открытых и закрытых ключей. Кроме того, на этом сайте ключи 
можно приобрести за определенную плату. В инструкциях, полученных от ком- 
пании VeriSign, вы найдете все данные, необходимые для установки и использо- 
вания ключей. Если вы планируете использовать шифрование PGP (Pretty Good 
Privacy), соответствующее программное обеспечение можно бесплатно выгрузить 
из сайта Массачусетского технологического института, по адресу http:// 
web.mit.edu/network/pgp.html. С ПОМОЩЬЮ Вашего ОТКРЫТОГО КЛЮЧа ПОЛЬЗОВа- 
тели смогут шифровать сообщения, которые вы будете расшифровывать с указа- 
нием своего закрытого ключа. Оба приведенных сайта содержат подробные инст- 
рукции по отправке и получению зашифрованных сообщений электронной 
почты. 
Аналогично, перед тем, как Web-сервер сможет выполнять операции в защи- 
щенном режиме вы должны установить цифровой сертификат (который также 
.называется идентификатором сервера), используемый программным обеспечени- 
ем Web-сервера. После установки сертификата и включения возможности обмена 
зашифрованными сообщениями пользователи сайта смогут запрашивать защи- 
щенные страницы, используя префикс защищенного соединения https:// (бук- 
ва s в префиксе означает, что соединение является защищенным). 
Несколько компаний, которые пользователи называют органами сертифика- 
ции, предлагают идентификаторы серверов для использования в сети Internet. 
Как правило, после некоторых исследований вашей компании орган сертифика- 
ции выдает идентификатор сервера, который дает вам право использовать имя 
компании и Web-адрес. Перед выдачей идентификатора сервера орган сертифи- 
кации проводит проверку полномочий компании и ее устава. После проверки 
компании орган сертификации выдает идентификатор сервера, который можно 
использовать для выполнения защищенных транзакций на Web-сайте. В зависи- 
мости от глубины изучения, получение идентификатора сервера может занять 
несколько недель (или больше). 
Как правило, при установке соединения с защищенной Web-страницей иден- 
тификатор сервера сайта (сертификат) можно просмотреть в браузере, как пока- 
зано на рис. 12.9. 
В сети Internet можно найти несколько органов сертификации. Перед приоб- 
ретением идентификатора сервера убедитесь, что тип сертификата совместим с 
программным обеспечением вашего сервера. Большинство сертификатов поддер- 
живают протокол защищенных сокетов (SSL-протокол) — протокол, которым 
пользуются большинство серверов для установки защищенного соединения.

624 Глава 12. Безопасность и производительность 
вник* | ()««ls 
Certificate Information 
This ccrtificetc ы Intended to: 
•Eraijres the identify of л i emcee c 
Issued by: 'ieturft Server Certification Autretrfty 
Valid f r om 7/7/2001 to 7/8/2002 
Рис. 12.9. Просмотр цифрового сертификата сайта в Web-браузере 
ПРАКТИКУМ 
Для начала компания VeriSign предлагает воспользоваться пробным идентифика- 
тором сервера, который можно выгрузить, установить и использовать в течение 
14 дней. С помощью пробного идентификатора сервера можно подготовить про- 
граммное обеспечение для использования постоянного идентификатора сервера, 
выдаваемого органом сертификации. Кроме того, он будет интересен тем, кто 
просто желает больше узнать о создании защищенных Web-сайтов. Компания 
VeriSign приводит инструкции для установки идентификатора сервера с целью 
его использования с конкретным программным обеспечением. Пробный иденти- 
фикатор сервера можно выгрузить из сайта компании VeriSign, который находит- 
ся ПО адресу http://www.verisign.com. 
Создание защищенной Web-страницы на IIS-сервере 
Как было указано в предыдущем совете, при загрузке и установке идентифи- 
катора сервера вы получаете подробные пошаговые инструкции по установке и 
использованию идентификатора на вашем типе сервера. Для более глубокого по- 
нимания процесса установки и использования идентификатора сервера для IIS- 
сервера он описывается в настоящем совете. 
После получения идентификатора сервера от органа сертификации его необхо- 
димо установить на своем сервере, а затем разрешить использование встроенных 
в IIS-сервер возможностей установки защищенных соединений. Для установки 
идентификатора сервера и для его использования на Web-сайте применяется ма-

Глава 12. Безопасность и производительность 62 5 
стер сертификатов Web-сервера. Для запуска мастера сертификатов Web-сервера 
выполните следующие шаги: 
• Выберите в меню Пуск | Настройка | Панель управления. На экран будет 
выведено окно панели управления. 
2. В окне панели управления выполните двойной щелчок на пункте Админис- 
трирование. На экране появится окно Администрирование. 
3. В окне Администрирование выполните двойной щелчок на пункте Диспет- 
чер служб Интернета. 
4. В окне Диспетчер служб Интернета щелкните правой кнопкой мыши на 
Web-сайте, защиту которого вы хотите обеспечить. На экране появится 
контекстное меню. 
5. В контекстном меню выберите пункт Свойства. Диспетчер служб Internet 
выведет на экран диалоговое окно свойств выбранного Web-сайта. 
6. В диалоговом окне свойств выберите вкладку Безопасность каталога. На эк- 
ран будет выведено окно Безопасность каталога. 
7. В разделе Server Communications окна Безопасность каталога щелкните на 
кнопке Сертификат. Диспетчер служб Internet запустит мастер сертифика- 
тов Web-сервера. 
После установки сертификата необходимо сделать доступными возможности 
сервера по использованию защищенного обмена сообщениями, выполнив следу- 
ющие действия: 
1. Выберите в меню Пуск | Настройка | Панель управления. На экран будет 
выведено окно панели управления. 
2. В окне панели управления выполните двойной щелчок на пункте Админис- 
трирование. На экране появится окно Администрирование. 
3. В окне Администрирование выполните двойной щелчок на пункте Диспет- 
. чер служб Интернета. 
4. В окне Диспетчер служб Интернета щелкните правой кнопкой мыши на 
Web-сайте, защиту которого вы хотите обеспечить. На экране появится 
контекстное меню. 
5. В контекстном меню выберите пункт Свойства. Диспетчер служб Internet 
выведет на экран диалоговое окно свойств выбранного Web-сайта. 
6. В диалоговом окне свойств выберите вкладку Дополнительно. На экран бу- 
дет выведено окно Дополнительная настройка веб-узлов. 
7. В диалоговом окне Дополнительная настройка веб-узлов убедитесь, что для 
порта SSL в разделе SSL-удостоверения данного Web-узла присвоено значе- 
ние 443. 
8. Перейдите на вкладку Безопасность каталога. На экране появится содержи- 
мое этой вкладки. 
9. На вкладке Безопасность каталога в разделе Безопасные подключения щел- 
кните на кнопке Изменить. На экране появится диалоговое окно Безопас- 
ные подключения, которое показано на рис. 12.10.

626 Глава 12. Безопасность и производительность 
10. В диалоговом окне Безопасные подключения настройте Web-сервер для 
обязательного использования защищенного канала, установив флажок Ис- 
пользовать защищенный канал (SSL). При желании можно установить фла- 
жок Использовать 128-битное шифрование, который приводит к тому, что 
для защищенного подключения используется 128-битное шифрование. (Не 
все браузеры поддерживают 128-битное шифрование. Если не устанавли- 
вать 128-битное шифрование, по умолчанию сервер будет использовать 40- 
битное.) 
p f ? Require secure channel (SSL)- 
Г Requrre 128-btt encryption 
I* ignore diert^ cetNficsfes 
f* Accept client ceitfcates 
Г Reawe ctert certificates 
.Г mapping 
E№ can be majjped to Wsr*dowj user 
a c c e s s Ibis «Slows access еоЫтЫ lo iesmtfces 
Рис. 12.10. Диалоговое окно "Безопасные подключения " 
Установка программного брандмауэра 
Брандмауэр защищает Web-сайт, находясь между сайтом и остальной сетью 
Internet. Все сетевые сообщения, предназначенные для сайта, должны будут сна- 
чала проходить через брандмауэр. За счет настройки фильтров сообщений бранд- 
мауэра можно контролировать, какие сообщения будут попадать на сайт, а какие 
— отфильтровываться. Брандмауэр может быть аппаратным или программным. В 
сети Web несколько компаний предлагают пробные программные брандмауэры, 
которые можно выгрузить и испытать бесплатно. Как правило, срок действия 
пробного программного брандмауэра составляет 30 дней: 
McAfee http://www. mcafee.com 
Network Ice http://www.networkice.com 
Symantec http://www. Symantec.com 
Tiny Software http://www.tinysoftwarezonelabs.com 
Zone Labs http://www.mcafee.com

Глава 12. Безопасность и производительность 627 
Если вы — администратор профессионального сайта, не использующего бран- 
дмауэр, вам имеет смысл немедленно выгрузить и установить несколько различ- 
ных пробных версий брандмауэров, которые позволят лучше понять необходи- 
мые вам средства и научиться их использовать. Поэкспериментируйте с 
брандмауэрами. Например, брандмауэр можно применять для блокировки входя- 
. щих FTP-пакетов, генерируемых удаленным пользователем с помощью FTP-npo- 
граммы при загрузке файлов на сайт или выгрузке файлов с сайта. Тем не менее, 
если вы заблокируете FTP-пакеты и попытаетесь использовать FTP для установки 
соединения с вашим сайтом, FTP-команда выполняться не будет. 
ПРАКТИКУМ 
Многие системные администраторы устанавливают и используют брандмауэры на 
Web-сайтах, которыми они управляют, но не защищают от хакеров свои домаш- 
ние компьютеры. С недавнего времени многие компании, специализирующиеся 
на разработке программного обеспечения, стали предлагать брандмауэры для до- 
машнего использования. Персональный брандмауэр позволяет закрыть потенци- 
альные "дыры", которыми могут воспользоваться хакеры при посещении вами 
удаленных сайтов. Несколько компаний, предлагающих персональные брандмауэ- 
ры, позволяют запускать программы, которые исследуют уязвимые места вашего 
компьютера. Например, на рис. 12.11 показаны результаты, представленные про- 
граммой Symantec Security Check, которую можно запустить из Web-сайта компа- 
нии Symantec. 
-:-!1«!1f.CvO?.'l 
internet security for the home 
P fwedwcfs 
•mta * v 
Symantec 
Security Check 
Results of Security Risk Scan 
Network Vulnerability Scan 
, NetBIOS Availability Scan 
_l Active Trojan Horse Scan • 
,v4 Anti-Virus Product Scan 
_ Anti-Virus Definition Scan 
^ Browser Privacy Scan 
Recommendation 
:?• c-nc oi m&e man Tc ael pf&tvti о 
rtfUS*S, *t'br\?-. *r:;: pfwecy thru) •. 
men abcwl Symantec'* seMions Try fitly 
Рис. 12.11. Исследование уязвимых мест с использованием Web-сайта компании 
Symantec

628 Глава 12. Безопасность и производительность 
\ Symantec. 
Current Status 
• 
Norton Peisona) FjrewaH ;s i;n:>!ec'-sr.9'yaur 
gysten) 
;* Personal Fire<vali 
OJ 1 Firewa) 
Wo 
mtnjsion att^rr 
,! atiac 
: . • I'lMWMIiligH'ffl 
Norton; 
РИС. 12.12. Использование персонального брандмауэра Norton Personal Firewall 
для защиты домашнего компьютера 
Персональный брандмауэр, например, Norton Personal Firewall, позволяет за- 
щитить вашу систему от Java-аплетов, элементов управления ActiveX и попыток 
программ получить доступ к неиспользуемым портам. Окно брандмауэра Norton 
Personal Firewall показано на рис. 12.12. 
Настройка назначения портов в брандмауэре 
Для обеспечения связи по сети отправляющая программа должна указать ад- 
рес удаленного компьютера-получателя. Кроме того, отправляющая программа 
должна указать приложение на удаленном компьютере, для которого предназна- 
чено отправляемое сообщение. Например, при отправке Web-браузером HTTP- 
запроса Web-серверу, отправляющая программа (в данном случае Web-браузер) 
должна указать IP-адрес удаленного сайта и то, что сообщение предназначается 
для приложения Web-сервера, выполняющегося на этом сайте. 
Сетевые программы идентифицируют удаленные приложения с помощью чис- 
ла, которое программисты называют номером порта. Например, для передачи со- 
общения Web-серверу браузер отправляет сообщение в порт 80 (который соответ- 
ствует HTTP-протоколу). Время от времени в сети Internet можно встретить 
URL-адреса, содержащие порт номер 80, например, www.somesite.com:80/ 
Fiiename.html. В сети Internet различным протоколам соответствуют различные 
номера портов. Программисты называют первые 1024 порта хорошо известными 
портами. В следующем списке приведены номера портов для нескольких попу- 
лярных приложений:

Глава 12. Безопасность и производительность 629 
Порт Приложение 
21 FTP-протокол (протокол передачи файлов) 
23 Telnet-протокол 
25 SMTP-протокол (простой протокол электронной почты) 
HTTP-протокол (протокол передачи гипертекста) 
139 Служба сеансов NetBIOS 
Большинство брандмауэров позволяют контролировать поток входящих в сеть 
сообщений за счет блокирования сообщений для конкретных портов, как пока- 
зано на рис. 12.13. 
Рис. 12.13. Брандмауэры могут фильтровать сообщения по номерам портов 
приложений 
ПРАКТИКУМ 
При настройке параметров брандмауэра вам, возможно, будет удобнее сначала 
заблокировать сообщения для всех портов, а затем открыть доступ только к тем 
портам, которые необходимы. В зависимости от используемого брандмауэра, 
действия, выполняемые для блокирования или открытия портов, будут отличать- 
ся. Например, на рис. 12.14 показан пример фильтрации портов в брандмауэре 
Norton Personal Firewall. 
Internet-программы могут использовать до 65 536 портов. При настройке пор- 
тов в брандмауэре список портов и соответствующих им приложений можно 
наЙТИ на странице http://www.iana.org/assignments/port-numbers. 
Снижение подверженности сайта вирусам 
В 2001 году вирусы нанесли ущерб более 11 миллиардов долларов за счет по- 
терянного времени, повреждений файлов и т.п. Самым опасным стал вирус Code 
Red, который нанес ущерб более 3 миллиардов долларов, что, кстати, еще далеко 
до 10 миллиардов долларов убытков от вируса Love Bug, пик распространенности 
которого попал на 2000 год. Компьютерные вирусы представляют угрозу для всех 
компьютеров, подключенных к Internet.

630 Глава 12. Безопасность и производительность 
f"S Norton Peisonal f newall Advanced OpJrans 
Web 
I HTTPPotiLis; - 
HTTP ports »e used foi browsing Ih» 
w.b, common pot's are btsd below. 
Cfcck Hetp lot more 
Add 
t-fec 
ftemove 
Г Block IGMP Ptolocoi 
P Stealth Slocked Pratt 
P Block Fragmented IP Packet 
OK j Cance Heip 
Рис. 12.14. Использование брандмауэра Norton Personal Firewall для 
фильтрации сообщений по номерам портов приложений 
Другими словами, если у вас есть компьютеры, подключенные к сети (и осо- 
бенно к Internet), ваша локальная сеть и все компьютеры подвержены атакам 
компьютерных вирусов. 
Ранее для заражения компьютера вирусом его пользователь должен был запус- 
тить зараженную программу. До появления сети Internet пользователи, как прави- 
ло, получали зараженные программы через дискеты, передаваемые от одного 
пользователя к другому. С появлением электронных досок объявлений, с кото- 
рых пользователи выгружали программы на свои компьютеры, угроза распростра- 
нения вирусов еще более возросла. Тем не менее, как и ранее, для заражения си- 
стемы пользователь должен был запустить инфицированную программу. 
Сегодня многие программы, например, Microsoft Word, Excel и даже 
PowerPoint, для автоматизации выполнения задач позволяют писать макросы. С 
помощью макроса, например, для Microsoft Excel, пользователь может автомати- 
чески вычислять процентные ставки и месячные выплаты по кредитным обяза- 
тельствам. Аналогично, пользователь может использовать макрос Microsoft Word 
для проверки правописания в документе и автоматической вставки верхнего и 
нижнего колонтитулов перед печатью содержимого документа. Несмотря на то 
что макросы позволяют существенно расширить возможности приложения, они 
являются программами, и злонамеренные пользователи могут их использовать 
для распространения вирусов. Как результат, теперь пользователи могут инфици- 
ровать свои компьютеры путем простого открытия документа Word или Excel, со- 
держащего макровирус.

Глава 12. Безопасность и производительность 631 
ПРАКТИКУМ 
Для снижения риска заражения вирусом локальной сети, в каждой системе в 
рамках сети, как на серверах, так и на персональных компьютерах, должно быть 
установлено антивирусное программное обеспечение. Если для защиты Web-сай- 
та используется брандмауэр (как это и должно быть), он также может обладать 
возможностями по обнаружению вирусов, которые следует задействовать в каче- 
стве первой линии защиты (см. рис. 12.15). 
Электронная почта 
j | Файлы 
Антивирусная защита 
Антивирусная защита 
Рис. 12.15. Для защиты локальной сети на каждом компьютере должно быть 
установлено 
антивирусное программное обеспечение 
Если вы не используете антивирусное программное обеспечение, на несколь- 
ких Web-сайтах можно найти бесплатные пробные программы, которые несложно 
выгрузить и использовать в течение 30-дневного периода: 
AVG 6.0 Anti-Virus http://www.grisoft.com 
NortonAntiVirilS http://www. Symantec. com 
PC-cillin http://www. trendmicro.com 
VimsScan http://www.mcafee.com 
Одним из ключевых моментов в плане снижения угрозы заражения компью- 
терными вирусами является наставление пользователей не запускать программы, 
выгруженные из Internet (во многих компаниях имеются специальные указания 
для сотрудников, которые гласят, что сотрудники не должны устанавливать или 
загружать программы без предварительного письменного разрешения). Вы долж- 
ны привить вашим пользователям понимание того, что они не должны откры- 
вать документ, программу или вложение в сообщение электронной почты, полу- 
ченное от незнакомого пользователя, и не открывать файлов, не прошедших 
проверку на предмет присутствия вирусов.

632 Глава 12. Безопасность и производительность 
После установки антивирусного программного обеспечения очень важно под- 
держивать его в актуальном состоянии. Каждый день хакеры и другие злонаме- 
ренные программисты трудятся над созданием новых вирусов. Таким образом, 
чтобы ваше антивирусное программное обеспечение было эффективным, вы дол- 
жны регулярно (по крайней мере, раз в месяц) обновлять базы данных известных 
вирусов. Как правило, после покупки антивирусного программного обеспечения 
обновление базы данных вирусов можно проводить бесплатно на протяжении не 
менее одного года. После этого, за определенную плату, вы можете подписаться 
на рассылку обновлений баз вирусов. 
В главе 9 вы рассматривали элементы управления ActiveX, которые могут быть 
выгружены из Internet. Для защиты своей локальной сети вы должны сообщить 
всем пользователям о необходимости обращаться с элементами ActiveX как с 
программами, т.е. пользователи не должны выгружать и устанавливать элементы 
управления ActiveX без предварительного разрешения. Более того, пользователи 
должны выгружать и устанавливать только подписанные объекты, содержащие 
цифровые сертификаты, идентифицирующие разработчика и подтверждающие, 
что хакер не перехватил объект и не прикрепил к нему вирус. Кроме того, 
пользователи не должны выгружать и устанавливать объекты ActiveX до проверки 
их с использованием антивирусного программного обеспечения. 
И, наконец, для обеспечения более эффективной защиты вашей системы от 
заражения вирусом вы должны изучать и понимать возможные угрозы зараже- 
ния. На некоторых сайтах можно найти списки наиболее распространенных на 
сегодняшний день вирусов. Одним из самых лучших сайтов, содержащих инфор- 
мацию как о хакерах, так и о вирусах, является сайт группы CERT, http:// 
www.cert.org, внешний вид которого показан на рис. 12.16. 
I .айл Правка S**t Иэйрлммпе Сервис Гпочвка 
): ^Наэап - >?• ^ j ^ '^Поиск _^Игвраиное 
йсрес :SJ http c/M»wce! oig-'cjireN/cune^ectivKy htnVBghoirt 
J Щ - 
• .+-WVrn 
l-E.Wffllffl 
QHosts Trojan Horse 
The CERT/CC.has received reports ol a new Trojan Horse program 
affecting Microsofi Window; systems The QHosts or Qhosts-1 Trojan 
Horse has been reported to alter domain name service (DNS) sellings on 
Windows systems and redirect users from legitimate web sites to those 
specified by the Trujan Horse program The CFRT/CC is tracking this 
activity as CERT#27882 and is interested in receiving reports thereof. 
Relevant artifacts or activity can be sent to u.lli§!lfe)liI3vvith 
"CERTffi7e82" in the subject (me 
The CERT/CC ationgly encourages users !o install anti-virus sofiwate, and 
keep its virus signature files up-to-date 
You may also wish tc visit the ..fi2CS ы ?оця;« рдц| 
Вшш 
Genera/ Tips 
Рис. 12.16. Информация по последним атакам хакеров и вирусам на сайте группы 
CERT

Глава 12. Безопасность и производительность 633 
Повышение производительности и уровня 
безопасности за счет блокировки принтера и 
запрещения совместного использования файлов 
Если в вашей локальной сети используется программное обеспечение 
Windows, клиент сетей Microsoft позволяет открыть файлы и принтеры для со- 
вместного использования другими пользователями. Если, например, выполнить 
двойной щелчок на пиктограмме Мое сетевое окружение (которая находится на 
рабочем столе Windows), программное обеспечение клиента для сетей Microsoft 
приведет список компьютеров, рабочих групп и принтеров, существующих в 
сети. Программное обеспечение клиента для сетей Microsoft работает поверх се- 
тевого программного обеспечения, т.е. в большинстве сетей оно выполняется по- 
верх протокола TCP/IP. 
ПРАКТИКУМ 
Если компьютеры в вашей сети не открывают файлов и принтеров (принтеров, под- 
ключенных к компьютерам пользователей, в отличие от принтеров, подключенных 
непосредственно к сети) совместного использования, необходимо удалить поддержку 

сетей Microsoft из системы каждого пользователя, выполнив следующие действия: 
1. Выберите в меню Пуск | Настройка | Панель управления. В результате от- 
кроется окно панели управления. 
2. В окне панели управления выполните двойной щелчок на пиктограмме 
Сеть. На экране появится диалоговое окно Сеть, показанное на рис. 12.17. 
3. На вкладке Конфигурация диалогового окна Сеть содержится список уста- 
новленных компонентов. Выберите компонент Клиент для сетей Microsoft и 
нажмите кнопку Удалить. 
Конфигурация | Идентификация j Управление доступом ] 
i системе установлены с ледащие компоненты 
^ I пиен! для сетей Microsoft 
Контроллер удаленного доступа 
Добавить... 
Способ входа в сеть: 
] Клиент для сетей Microsoft 
Доступ к Файпам и принтерам . 
Рис. 12.17. Диалоговое окно "Сеть " ( "Network ")

6 34 Глава 12. Безопасность и производительность 
ПРАКТИКУМ 
При использовании модемного соединения вы фактически работаете в сети, кото- 
рая состоит из вашего компьютера и компании, предоставляющей модемную 
связь. Если по какой-либо причине ваша система должна поддерживать программ- 
ное обеспечение "Клиент для сетей Microsoft", отключите совместное использова- 
ние принтеров и файлов. В противном случае вы можете открыть доступ, к своей 
системе хакеру, который ранее проник в компьютерную систему компании, предо- 
ставляющей модемную связь. Для выключения совместного использования прин- 
теров в операционной системе Windows выполните следующие действия: 
1. Выберите в меню Пуск | Настройка | Панель управления. В результате от- 
кроется окно панели управления. 
2. В окне панели управления выполните двойной щелчок на пиктограмме 
Сеть. На экране появится диалоговое окно Сеть, показанное на рис. 12.17. 
3. В диалоговом окне Сеть щелкните на кнопке Доступ к файлам и принте- 
рам. На экране появится диалоговое окно Доступ к файлам и принтерам. 
4. В диалоговом окне Доступ к файлам и принтерам снимите отметку со всех 
флажков и щелкните на кнопке ОК. 
Использование клиентских сертификатов для 
ограничения доступа пользователей 
Для получения доступа к защищенному Web-сайту браузер и сервер для шиф- 
рования HTTP-сообщений, которыми они обмениваются, используют протокол 
защищенных сокетов (SSL-протокол). Для применения SSL-протокола клиенту 
не нужно иметь открытый ключ. В этом случае сервер должен иметь цифровой 
сертификат (который содержит открытый ключ сервера). Это объясняет почему, на- 
пример, вы можете установить соединение с защищенным Web-сайтом несмотря на 
то, что у вас нет открытого ключа. При соединении браузера и защищенного сайта 
браузер и Web-сервер сайта обмениваются сообщениями, содержащими данные о 
поддерживаемых методах шифрования. Затем Web-сервер передает браузеру сообще- 
ние, содержащее открытый ключ сервера. Браузер будет использовать открытый 
ключ сервера для шифрования сообщения, содержащего цифры, которые будут ис- 
пользоваться и браузером, и сервером для генерации ключа сеанса, с помощью ко- 
торого будет щифроваться информационный обмен между сервером и браузером. 
Если Web-сайт содержит приложения, осуществляющие доступ к чувствитель- 
ным данным (например, к информации о человеческих ресурсах или данных по 
продажам), вы, возможно, захотите ограничить круг пользователей, которые мо- 
гут запускать подобные приложения, до тех, кто может идентифицировать себя с 
помощью цифровой подписи (клиентского сертификата). В некоторых случаях мо- 
жет потребоваться, чтобы пользователь, получающий доступ к ресурсам, имел 
серти- 
фикат, причем любой сертификат. В других случаях может потребоваться конкрет- 
ный сертификат, т.е. сертификат будет соответствовать учетной записи 
пользователя, 
созданной в системе. Для обеспечения возможности применения клиентских 
сертификатов в IIS-сервере необходимо сначала присвоить сертификат серверу.

Глава 12. Безопасность и производительность 635 
ПРАКТИКУМ 
Для включения возможности использования клиентских сертификатов в HS-серве- 
ре выполните следующие действия: 
1. Выберите в меню Пуск | Настройка | Панель управления. В результате от- 
кроется окно панели управления. 
2. В окне панели управления выполните двойной щелчок на пиктограмме Ад- 
министрирование. На экране появится окно Администрирование. 
3. В окне администрирование выполните двойной щелчок на пиктограмме 
Диспетчер служб Интернета. В результате откроется окно консоли Internet 
Information Services. 
4. В консоли Internet Information Services щелкните правой кнопкой мыши на 
интересующем вас сайте (или Web-странице). На экране появится контек- 
стное меню. 
5. В контекстном меню выберите пункт Свойства. На экране появится диало- 
говое окно Свойства. 
6. В диалоговом окне Свойства перейдите на вкладку Безопасность каталога. 
На ^ ^ ^ и появится вкладка Безопасность каталога, показанная на рис. 
12.18. 
7. В разделе Безопасные подключения щелкните на кнопке Изменить. На эк- 
ране появится диалоговое окно Безопасные подключения. Установите фла- 
жок Использовать защищенный канал (SSL). Таким образом, для открытия 
страницы пользователь должен будет использовать защищенное соединение. 
Web Site I Opesasou [' Performance j tSAPfFHen j Home Dsectey j Doouewntii 
Deectoty Secunty j HTTP He&tets \ Custom Effort j Serve* Extensions 
г Anonymous access and authentication ccrHiol ' •—"—™~—i 
. z Enable anonymous access ^rtd edit the ' 
% ^ V authentication method* f« ih$ re^ouce. Ed* 
- IP address and domain п&№ 
I
. 
Giant or <terv/ access- fo 9ы resource using 
IP addresses of infers domain fwnes 
-Secure 
Requite аеаяе communicator,? and 
enable cii&nt ceriiftcaies wiw* Uwt 
<e source (5 accessed 
Serve* Ce*ttficate. 
View Certificate. 
Edit.. 
(Ж Help 
РИС. 12.18. Использование параметров безопасных подключений 
IIS-сервера для разрешения применения клиентских сертификатов

636 • Глава 12. Безопасность и производительность 
8. В поле Клиентские сертификаты выберите требуемый вам параметр и щелк- 
ните на кнопке ОК. В таблице 12.1. перечислены краткие описания воз- 
можных параметров. 
Табл. 12.1. Параметры управления использованием клиентских сертификатов в 
US-сервере 
Параметр Назначение 
Принимать клиентские сертификаты Сервер будет принимать, но не будет требовать 
клиентские сертификаты. 
Требовать клиентские сертификаты Перед получением доступа пользователя к 
ресурсам сервер будет требовать клиентские 
сертификаты. 
Игнорировать клиентские сертификаты Сервер будет игнорировать клиентские 
сертификаты. 
Анализ системных событий для обнаружения 
вторжений 
Для атак в сети Internet хакеры могут пользоваться целым рядом методов. Как 
правило, атаки хакеров приводят к тому, что операционная система генерирует 
события. Это позволяет обнаружить атаку и, возможно, отследить хакера. В об- 
щем случае аудит предполагает ведение одного или нескольких журнальных фай- 
лов, которые операционная система применяет для слежения за выполняемыми 
пользователями действиями. Например, в среде Unix различные приложения со- 
здают файлы журналов, которые системные администраторы могут анализировать 
с целью контроля за системными событиями. Использование аудита позволяет 
помочь поймать хакера, который несколько раз пытался войти в вашу систему. В 
Windows 2000 специальная программа — "Просмотр событий" — дает возмож- 
ность администраторам просматривать журналы различного рода системных со- 
бытий (см. рис. 12.19). 
В окне просмотра событий фиксируются три типа событий: приложения, бе- 
зопасность и система. 
ПРАКТИКУМ 
Для вывода на экран окна просмотра событий в Windows 2000 выполните следую- 
щий действия: 
1. Выберите в меню Пуск | Настройка | Панель управления. В результате от- 
кроется панель управления. 
2. В окне панели управления выполните двойной щелчок на пиктограмме Ад- 
министрирование. На экране появится окно Администрирование. 
3. В окне Администрирование выполните двойной щелчок на пиктограмме 
Просмотр событий. На экране появится окно Просмотр событий. 
4. В окне просмотра событий выберите Журнал безопасности. Справа в окне 
просмотра событий появится журнал безопасности (см. рис. 12.20).

Глава 12. Безопасность и производительность 637 
; Aaron view ,;. <?** •* ; (?г); |д ; j f f f 
Tree 
JjJ Evert Viewer (Local) 
j jg AppfcerjonUg 
[ч] Security Log 
( j l SysleniLw? 
i 
System Log 2,551 event(s> 
Type 
'•i) Information 
фщголпмюп 
^Information 
'.^Information 
' . у Inf emotion 
-У information 
'4>Inform*on 
' * ^ Infwfrdtl'jri 
^a/Infonnetion 
S)lnfonMbon 
'4>lnforrr,aton 
Фыстабоп 
^IntOtnvstlOn 
4)int«m*ori 
ф1пГ'огтЯоп 
фмолпйоп 
•^Information 
' ^ Information 
^ ' n f o i matron 
•^Informeoon 
! Date 
12/5/2001 
12/5/2001 
12/5/2001 
12/5/2001 
12/5/2001 
12/5/2001 
12/5/200! 
12/5/2001 
12/5/2001 
12/5/200! 
12/5/200! 
I2/S/2O01 
12/5/200! 
12/S/2001 
!2/5/200x 
12,(5/200! 
12/5/200! 
12/5/200! 
I2JS/2001 
Time 
!0:06:22PM 
10:06:22 PM 
9.06:21 PM 
5:06:2! PM 
8:06:21PM 
в 06:21PM 
7:06:E0PM 
7:06-20 PM 
6:06:20 PM 
6:06:20 PM 
5:06:20 PM 
5:06:20 PM 
4:06:19 PM 
4:06:19 PM 
3:06:19PM 
3:06:14 PM 
2:06:!8PM 
2:06:16 PM 
1:06:18PM 
1:06:18PM 
Source 
NNTPSVC 
MOTSVC 
NNTPSVC 
NNTPSVC 
NNTPSVC 
NNTPSYC 
NNTPSVC 
NNTPSVC 
NNTPSVC 
NNTPSVC 
NNTP5VC 
MJTPSVC 
NNIPSVC 
»ПР5.С 
•4NTP5VC 
NNTPSVC 
mrpsvc 
NNIPSVC 
NNTPSVC 
MMTPSVC 
I Category 
^foг^e 
No^ie 
f>lone 
None 
Nona 
None 
Nonf 
None 
None 
None 
None 
None 
ttone 
None 
None 
None 
None 
None 
Носче 
Nor* • 
Г"
"vent 
(20 
!2! 
•20 
*2! 
'20 
12! 
120 
121 
*20 
41 
»20 
Yl\ 
та 
*21 
120 
121 
120 
121 
120 
121 
Use 
N/A 
N/A 
N/A 
N/A 
N/A 
N/A 
N/A 
N/A 
N/A 
N/A 
N/A 
N,« 
N/A 
N/A 
N/A 
N/A 
N/A 
N/A 
N/A 
N/A 
: 
1 Computer Ы 
«.SERVER! ' 
WtSERvW! 
«SERVER! 
W.SERVER1 
•AlSCRrtR] 
WlSERVEBl 
WISER VER1 
WISERyERl 
VVl SERVER! 
«SERVER! 
VrtSERVtP 1 
VHSERVtRl 
W1.SERVER1 
WLSERVER1 
WISERVEfU 
WLS6RVER1 
WL SERVER! 
WtSERVt.Rl 
WL SERVER! 
WtSERVERl jj 
1 . 
Рис. 12.19. Для контроля системных событий в операционной системе Windows 2000 
администраторы пользуются окном просмотра событий 
ill Ad», »». ;; *> * [«да!®1 an^irj 
Seen»? Log Z4 
jj Secur«y Loa 
Hi Syslw. Log 
./Socoss Aortt 
^Succ^sAutM 
y'5uCt«Si A..1* 
•^/-'vXcess Aufit 
f/ЬюжП AucK 
^/fSrjtcess Audit 
^ S ^ c e s s AoJK 
,/S'jr.tessAiK» 
^Succcvf AucSt 
У Success A u * 
j/Suc«« A.jd» 
j/Suufvs Au* 
v/Socc^s Audrf 
^Success Aud»! 
^* Succors Аисй 
fl/Su::.:eis Audir 
;,/Success Audit
4 evefu(s) 
l2/'!/.'D0! 
i №»JI 
12/5/2001 
12/5/2001 
12jMfr00! 
!2j</2O0l 
12/1/200! 
12/4/2001 
12/4/20C! 
12/4J200: 
12/4/200! 
12/4/2001 
12/4/2001 
1Z/4.'20(J! 
12/4/2001 
12/4/2001 
12/1ЙЮ1 
12/4/2001 
12/4/2001 
12/3.C00! 
1»« 9:42:02 PM 
8:52.32 И1 
6:06:03 AM 
5:37.% AM 
U:37:52 W 
?:i;:S7m 
3:22:56 PM 
7:5"I;5EPM 
4:54.29 PM 
6:1639 PM 
5:27:11 PH 
453:42 PM 
3.55,159 PM 
2:41:S3PM 
9:10:3SAM 
8:O6:.12AM 
7:31:57 AM 
у.'лга AM 
1:55:2.1AM 
11:57:23 PM 
Scxce 
Security 
Security 
Security 
Securtj 
SecuntY 
Securrty 
Security 
Security 
S«utty 
Seojrfy 
Stcwty 
Security 
SecurCy 
5ecur*.y 
Security 
Security 
Security 
Security 
Security 
Security 
Category 
Account Logon 
Account Logon 
Account Logon 
Account Logon 
A-cour* Logon 
A<CQunt Uigor> t 
Account Logon 
Account Logon 
A-xount Logon 
Account Loijon 
Account Logon 
Account Logon 
АССОиПС Looon 
Account Logog 
Account Li>gor! 
Account Lorjon 
Account Logon 
АССОиГ* LOOOIl 
Ac«xr,r U » r . 
Account Logon 
tvetlt- 
68C 
630 
sao 
680 
640 
660 
6M 
6Э0 
680 
(SO 
680 
ЫХ- 
680 
680 
680 
МО 
ЫЮ 
6 » 
690 
CSCSYSTEM 
SYSTEM 
SrSTEW 
SVS1EH 
sranw 
SVStEM 
SVSTWI 
SYSTEM 
SVSUM 
5Y51tM 
SYSTEM 
SYSTEM 
SYSTEM 
SV5TEM 
SVS11M 
•AtSERVCPi 
WL SERVER! 
WISERVBI1 
wlStR'VERl 
WLSEPWR! 
WtSEOVERI 
WLSfRVtl) 1 
MSEBVCR! 
VM.SEP«.R1 
WtSERVePl 
W5ECVIB! 
W15ERVER1 
VW5ERVER1 
WISER VER! 
«.SERVER! 
Рис. 12.20. Просмотр журнала безопасности в окне просмотра событий 
В окне просмотра событий можно просмотреть подробную информацию о 
каждом конкретном событии, выполнив на нем двойной щелчок. В результате на 
экран выводится диалоговое окно Свойства: Событие, содержащее данные о собы- 
тии (см. рис. 12.21). 
Для контроля событий безопасности в операционной системе Windows 2000 
сначала необходимо разрешить ведение журнала безопасности. В зависимости от 
того, используется в вашей системе политика уровня домена или локальная по-

638 Глава 12. Безопасность и производительность 
литика безопасности, действия, которые необходимо выполнить для включения 
ведения журнала безопасности будут отличаться. 
Event Properties 
Event | 
Date 
Time' 
Type: 
Us€f 
Computer: 
12/5/2001 
21:42 
Success 
ii? i КЗ ifti I IBjJi 
WISERVER1 
Description' 
Source 
Categoij": 
Event 10: 
Security 
Account Logon 
680 
w 
Account Used f« Logon by 
MICJ(OSOFT_AUTHENTICATION_PACKAGE_V1. 
Account Name- 
IUSR.WLSERVER1 
WLSERVER1 
•: . f» или: Г • , « * 
Zl 
-3 
OtC ^ Cancel 
Рис. 12.21. Просмотр подробных данных о событии 
ПРАКТИК} 
Для разрешения ведения журнала безопасности в системе, использующей локаль- 
ную политику безопасности, необходимо выполнить следующие действия: 
1. Выберите в меню Пуск | Настройка | Панель управления. В результате от- 
кроется панель управления. 
2. В окне панели управления выполните двойной щелчок на пиктограмме Ад- 
министрирование. На экране появится окно Администрирование. 
3. В окне Администрирование выполните двойной щелчок на пиктограмме Ло- 
кальная политика безопасности. На экране появится диалоговое окно Ло- 
кальные параметры безопасности. 
4. В окне Локальные параметры безопасности выполните двойной щелчок на 
политике, которую вы ходите контролировать. В результате на экран выво- 
дится диалоговое окно Параметр локальной политики безопасности. 
5. В диалоговом окне Параметр локальной политики безопасности для разре- 
шения записи в журнал успешного выполнения операций установите фла- 
жок Успех; для разрешения записи в журнал неудачного выполнения опе- 
раций установите флажок Отказ. 
Используя локальные политики безопасности, можно установить политики, 
коротко описанные в таблице 12.2.

Глава 12. Безопасность и производительность 6 3 9 
Таблица 12.2. Параметры безопасности, которые должны записываться операционной 
системой Windows 2000 в журнал безопасности 
Политика Назначение 
Аудит входа в систему Отслеживает операции входа в систему и выхода 
из системы. 
Аудит управления учетными записями Отслеживает все изменения учетных записей 
пользователей и системы. 
Аудит доступа к службе каталогов Отслеживает использование службы каталогов. 
Аудит событий входа в систему Отслеживает всех пользователей, входящих и 
выходящих в систему данного компьютера. 
Аудит доступа к объектам Отслеживает доступ к каталогам, файлам, реестру 
и принтерам. 
Аудит изменения политики Отслеживает изменения прав учетных записей, 
политик аудита и политики доверительных 
отношений: 
Аудит использования привилегий Отслеживает использования пользователями 
привилегий. 
Аудит отслеживания процессов Отслеживает запуски, прекращения работы 
программ и дублирование дескрипторов процессов. 
Аудит системных событий Отслеживает системные операции, изменяющие 
файлы журналов. 
Использование файловой системы NTFS 
В операционной системе управление файлами и каталогами на жестком диске 
возложено на специальное программное обеспечение — файловую систему (file 
system). При каждом создании, изменении, удалении или переименовании файла 
или каталога вы работаете с файловой системой. Если вы используете сервер, 
функционирующий под управлением операционной системы Windows NT или 
Windows 2000, защищенность сайта можно повысить за счет использования фай- 
ловой системы NT (NT file system, NTFS). 
Файловая система NTFS позволяет каждому файлу и каталогу присвоить ин- 
дивидуальные разрешения. Эти разрешения контролируют, какие пользователи 
могут получить доступ к ресурсам и что пользователи могут делать с этим ресур- 
сом. Так, например, если хакер получит доступ, к серверу, разрешения, назначен- 

ные файлам и каталогам, могут ограничить круг информации, которую хакер мо- 
жет просмотреть. 
ПРАКТИКУМ 
Для определения типа используемой вами операционной системы выполните сле- 
дующие действия: 
1. На рабочем столе Windows выполните двойной щелчок на пиктограмме 
Мой компьютер. На экран выводится окно Мой компьютер, в котором со- 
держатся пиктограммы для всех дисков в системе.

640 Глава 12. Безопасность и производительность 
2. В окне Мой компьютер щелкните правой кнопкой мыши на пиктограмме 
интересующего вас диска. На экране появится контекстное меню. 
3. В контекстном меню выберите пункт Свойства. На экране появится диало- 
говое окно свойств выбранного диска, в котором указан тип файловой сис- 
темы (см. рис. 12.22). 
Apps |u | Piopeities 
Getieai Tods j Haidwae | Shanng| Secuniy| 
. — , Label. 
Type: 
|K 
Local Disk 
File system NTFS 
Щ Used space 
(2 Fiee space 
Capacity: 
3.277.631.488 bytes 
22.952.751.1W byles 
26.230.382.592 bjHe» 
Drive D 
Г~ Cornp*ess drive to wve disk space 
Quota | 
. 
3.05 GB 
21.3GB 
24 4 GB 
Disk Cleanup... j 
fv Alkw Indexing Service to index this disk tot last file seasching 
Cancel 
Рис. 12.22. Использование диалогового окна свойств диска 
для определения типа файловой системы 
Как уже говорилось, с помощью файловой системы NTFS файлам можно на- 
значить индивидуальные разрешения, которые контролируют, какие пользовате- 
ли могут получить доступ к файлу и каким образом. 
ПРАКТИКУМ 
Для назначения разрешений файлу или каталогу в файловой системе NTFS выпол- 
ните следующие действия: 
1. Находясь в Проводнике, щелкните правой кнопкой мыши на файле или 
каталоге, который необходимо защитить. На экран выводится контекстное 
меню. 
2. В контекстном меню выберите пункт Свойства. На экране появится диало- 
говое окно Свойства. 
3. В диалоговом окне Свойства выберите вкладку Безопасность. На экране по- 
явится вкладка Безопасность, показанная на рис. 12.23. 
4. На вкладке Безопасность для добавления пользователей или групп пользо- 
вателей в список разрешений щелкните на кнопке Добавить. На экране 
появится диалоговое окно Выбор: Пользователи или группы.

Глава 12. Безопасность и производительность 641 
5. В диалоговом окне Выбор: Пользователи или группы выберите пользователя 
или группу, которые вы хотите добавить в список. Для добавления нескольких 
пользователей или групп при выборе нажмите и удерживайте клавишу CTRL. 
После выбора всех пользователей и групп щелкните на кнопке ОК. 
6. На вкладке Безопасность выберите настройки безопасности для новых 
пользователей или групп и щелкните на кнопке ОК. 
wlcett.txt Piopedies 
Genets! Seeuriy ) Summary | 
Remove 
Ful Cortiol 
Modify 
Readk Execute 
Read 
Write 
Alow 
El 
В
m
вs 
Deny 
aa
aD
• 
Advanced.. i 
- Ato* inheritable petrwsstoro from parent to ptopagate to this 
object 
Рис. 12.23. Вкладка "Безопасность"диалогового окна "Свойства" 
Еще одно преимущество файловой системы NTFS состоит в том, что она по- 
зволяет шифровать файлы и каталоги на диске. Если хакер получит доступ к 
серверу, он не сможет просмотреть содержимое зашифрованного файла. После 
шифрования файла в NTFS его можно продолжать использовать, как и ранее. 
Файловая система NTFS будет автоматически расшифровывать содержимое за- 
шифрованного файла (или файла в зашифрованном каталоге) при каждом бго от- 
крытии. NTFS шифрует файлы на основе вашего имени пользователя, поэтому 
даже если другой пользователь получит доступ к системе, он не сможет расшиф- 
ровать ваши файлы. 
ПРАКТИКУМ 
Для шифрования файлов в файловой системе NTFS выполните следующие дей- 
ствия: 
1. Находясь в Проводнике, щелкните правой кнопкой мыши на файле или 
каталоге, который требуется зашифровать. На экран выводится контекст- 
ное меню. 
2. В контекстном меню выберите пункт Свойства. На экране появится диало- 
говое окно Свойства.

642 Глава 12. Безопасность и производительность 
3. В диалоговом окне Свойства щелкните на кнопке Другие. На экране появится 
диалоговое окно Дополнительные атрибуты, показанное на рис. 12.24. 
4. В диалоговом окне Дополнительные атрибуты выберите флажок Шифровать 
содержимое для защиты данных и щелкните на кнопке ОК. 
Единственный недостаток шифрования файлов связан с тем, что при каждом 
открытии или сохранении файла файловая система NTFS должна соответственно 
расшифровывать или зашифровывать содержимое файла. Необходимость расшиф- 
ровки и шифрования требует использования ресурсов сервера, что на загружен- 
ном сервере может привести к снижению производительности. Тем не менее, по- 
скольку большинство пользователей не прибегают к быстрому открытию и 
сохранению файлов, они практически не заметят снижение производительности 
за счет использования шифрования. Кроме того, в среде Web существует много 
файлов, содержимое которых вы не будете шифровать (например, HTML-файлы, 
выгружаемые пользователями при посещении Web-сайта). 
Advanced AMnbut&s 
\ I=l«f Choose the options you want for this ffe. 
г Archive and Index attributes - 
P" ffe x, re*iy for «hiving 
f? For fast s%3fchffig, aiow IridexsrtQ Service to index 1Ы« ffe 
• Congress or Encrypt attrfeutes 
Г" Compress contents to ssve disk нж 
J~ Encrypt contents to seojre data 
Рис. 12.24. Использование диалогового окна "Дополнительные атрибуты"для 
шифрования файлов 
И, наконец, для повышения уровня защищенности сайта можно организовать 
слежение за доступом к определенным файлам или каталогам. 
ПРАКТИКУМ 
Файловая система NTFS позволяет включать аудит для отдельных файлов или ка- 
талогов. Для включения аудита необходимо выполнить следующие действия: 
1. Находясь в Проводнике, щелкните правой кнопкой мыши на файле или 
каталоге, для которого требуется установить аудит. На экран выводится 
контекстное меню. 
2. В контекстном меню выберите пункт Свойства. На экране появится диало- 
говое окно Свойства. 
3. В диалоговом окне Свойства выберите вкладку Безопасность. На экране по- 
явится вкладка Безопасность. 
4. На вкладке Безопасность щелкните на кнопке Дополнительно. На экране 
появится диалоговое окно, содержащее текущие параметры доступа к выб- 
ранному файлу или каталогу.

Глава 12. Безопасность и производительность 6 43 
5. В диалоговом окне выберите вкладку Аудит. 
6. На вкладке Аудит щелкните на кнопке Добавить. На экране появится диа- 
логовое окно Выбор: Пользователь или Группа. 
7. В диалоговом окне Выбор: Пользователь или Группа выберите пользовате- 
лей или группы, действия которых вы хотите контролировать. 
После включения аудита файловая система NTFS будет помещать сообщения 
в окно просмотра событий, как описано в совете "Анализ системных событий 
для обнаружения вторжения". 
ПРАКТИКУМ 
Если вы используете файловую систему, отличную от NTFS, ее можно преобразо- 
вать в NTFS, выполнив следующие действия: 
1. С помощью программного обеспечения создания резервных копий выпол- 
ните резервное копирование всего содержимого диска. 
'2. Закройте все выполняемые приложения. 
3. Выберите в меню Пуск | Выполнить. На экране появится диалоговое окно 
Запуск программы. 
4. В диалоговом окне Запуск программы наберите CMD и нажмите клавишу 
ENTER. Откроется окно командной строки. 
5. В окне командной строки запустите следующую команду convert, заменив 
drive: буквой диска, файловую систему которого необходимо преобразо- 
вать в NTFS: 
C:\>convert drive: /fs:ntfs<Enter> 
Отключение удаленных служб 
Многие сайты разрешают удаленный вход в сеть. Если для вашего сайта не 
нужно обеспечивать удаленный вход, вы должны отключить удаленный доступ к 
сайту, что существенно снизит риск использования удаленного доступа для взлб- 
ма системы. В зависимости от операционной системы, действия, направленные 
на отключение удаленных служб, могут отличаться. Например, в среде Unix/ 
Linux необходимо отключить поддержку Telnet и удаленные службы, включая 
удаленный вход в систему (riogin) и удаленную командную оболочку (rsh). Бо- 
лее того, необходимо, как минимум, отключить FTP-операции с анонимными 
пользователями, а если для вашего сайта не требуется обеспечивать возможность 
выгрузки и загрузки файлов, имеет смысл FTP отключить полностью. 
ПРАКТИКУМ 
В Windows 2000 удаленные службы можно отключить, выполнив следующие дей- 
ствия: 
1. Выберите в меню Пуск | Настройка | Панель управления. На экран выводит- 
ся окно панели управления. 
2. В окне панели управления выполните двойной щелчок на пиктограмме Ад- 
министрирование. На экране появится окно Администрирование.

644 Глава 12. Безопасность и производительность 
3. В окне Администрирование выполните двойной щелчок на пиктограмме 
Службы. На экране появится окно Службы, показанное на рис. 12.25. 
Tree) 
^S Services ( U c 4 
Name .' 
Щр NET Framework Support Service 
*|satssvc 
*^A!ertei 
^jAppiiCdtton Management 
*^>Cfip8ook 
%COM» Event System 
^Computer 3rowser 
%Defv/atch 
%DHCPOrenl 
i j j D i s t l t u t ed Link Tracking Client 
*%> Distributed Transaction Coordinator 
^)DNS Orent 
% EPSON Puller Status Anem2 
% Event Log 
^g&^a* Service 
^ inde^mg Service 
*%* interriet Connection Shafing 
*% i^SEC Policy Agent 
% Logic* Disk Manager 
^«S Logic* Disk Manager AdriiirKsliative Service 
Рис. 12.25. Окно "Службы"в on
ОИШН 
к tt m* 
Oescriplion 
PKWidM ptocess itate t. 
Notifies selected usets a 
Provides soKwafe msiaS. 
Supports CiipBook View. 
Provides automate dis^i 
Marttans an up-So-dale fc 
Maries nsiwork conftg 
Sends not^caffons erf ffe 
Co»dinates tfansactions 
RewVes wtd caef'tej D 
Logs event messages KS 
Helps you send and iece 
Piovtdes nelvwjfk addies 
Manages !P security poll 
Logcai Disk Man^fia W 
Admin;$!ra*tve set vice lot
• • 
| Status 
Started 
Staited 
Started 
. Started 
Started 
Started 
Started 
Slarted 
Started 
Started 
Staited 
Stalled 
шшшт 
\ Startup Type 
Manual 
Automatic 
Man«.*aS 
Manual 
Manuel 
Manu^ 
Automatic 
Automatic 
Automatic 
Automatic. 
Manuel 
Automatic 
Automate 
Autonvatsc 
Mafiuat 
Manual 
Manual 
Automatic 
Automatic 
Manual 
Aulnnwhr 
еме Windows 2000 
ГЛоГх 
) Log On As U 
LocatSystem 
LocafSystefn 
LocatSystem 
LocaSjistcm 
Locatey^tem 
LocetSydem 
Loca5ystem 
LocaiSystem 
LocalSystem 
Loca*S ystem 
LocalS yslem 
Locauystem 
LocaSysEem 
LocatSystent 
LocatSystem 
, localSystetn 
LocafSysfem 
LocafSystem 
LocalSystefr, 
LocatSysfem 
i 
4. В окне Службы выполните двойной щелчок на пиктограмме одной из уда- 
ленных служб, например, Диспетчер подключений удаленного доступа. Дол- 
жно появиться диалоговое окно, в котором можно будет установить пара- 
метры выбранной службы. 
5. В появившемся диалоговом окне в выпадающем списке Тип запуска выбе- 
рите Отключено и щелкните на кнопке ОК. 
6. Повторите шаги 4 и 5 для всех удаленных служб. 
В некоторых случаях пользователям действительно бывает необходимо полу- 
чить удаленный доступ к сети. Если у вас есть один или несколько пользовате- 
лей, получающих доступ в сеть с помощью коммутируемого соединения, уровень 
защищенности системы можно повысить за счет использования системы обрат- 
ного дозвона (см. рис. 12.26). 
При использовании системы обратного дозвона удаленный пользователь доз- 
ванивается до системы с помощью модема. В зависимости от применяемого про- 
граммного обеспечения пользователю, возможно, придется всего лишь дозво- 
ниться по определенному номеру или предоставить имя пользователя и пароль 
или цифровой сертификат. Далее система обратного дозвона отключит соедине- 
ние и перезвонит пользователю по заранее определенному номеру, например, по 
телефонному номеру модема в удаленном офисе или дома у пользователя. Таким 
образом, хакер не может получить удаленный доступ к системе из другого места, 
поскольку система обратного дозвона не перезвонит по номеру модема хакера.

Глава 12. Безопасность и производительность 645 
Удаленный 
пользователь 
Шаг 1: Удаленный пользователь дозванивается до системы. 
Удаленный 
пользователь 
Шаг 2: Удаленный пользователь проходит аутентификацию 
и разрывает модемное соединение. 
Удаленный 
пользователь 
Шаг 3: Если удаленный пользователь прошел успешно 
прошел аутентификацию, сервер дозванивается 
до пользователя по заранее определенному номеру. 
Рис. 12.26. Система обратного дозвона повышает уровень защищенности для 
удаленных операций 
за счет открытия доступа только для известных телефонных номеров 
Если вы работаете с Web-сайтом, функционирующим под управлением опера- 
ционной системы Unix, и при этом для сайта необходимо обеспечить удаленный 
доступ, вы должны заблокировать ранее упомянутые команды Unix и заменить 
их такими приложениями как ssh (secure shell, защищенная командная оболоч- 
ка), которые для шифрования информационного обмена между пользователем и 
сайтом используют протокол защищенных сокетов. В сети Web можно найти нема- 
ло реализаций защищенной командной оболочки для широкого круга компьютеров, 
в том числе работающих под управлением операционных систем Linux и Windows. 
ПРАКТИКУМ 
Если сервер работает под управлением операционной системы Unix или Linux, 
вы также должны рассмотреть возможность блокирования команд finger и 
whois, которые могут использоваться хакерами для получения дополнительной 
информации о пользователях системы. Так, например, с помощью команды 
finger хакер может определить, какие пользователи в данный момент времени 
находятся в системе, а затем с помощью команды whois просмотреть данные

Глава 12. Безопасность и производительность 
пользователя, на основании которых попытаться угадать имя пользователя и его 
пароль или просто позвонить ему и спросить имя и пароль (произвести социо- 
техническую атаку). 
Если вы должны поддерживать определенные удаленные службы, уровень 
защищенности сайта можно повысить за счет разрешения выполнения удаленных 
операций 
только в определенное время суток. Например, отключение удаленных служб в 
нерабочее 
время позволяет снизить вероятность взлома системы. 
Анализ уязвимых мест системы 
В сети Web существуют несколько сайтов, которые позволяют проверить ваш 
сайт на наличие часто встречающихся уязвимых мест. Большинство проверок, про- 
водимых такими сайтами, относятся к вопросам функционирования в сети, а не к 
слабым местам операционной системы. К счастью, для выгрузки доступны несколь- 
ко утилит, которые позволяют определять и уязвимые места операционной системы. 
Например, для среды Unix/Linux администраторы часто используют программу 
SATAN (аббревиатура от Security Administrators Tool for Analyzing Networks, 
средство 
администраторов безопасности для анализа сетей). С помощью программы SATAN 
администраторы Unix могут обнаружить такие уязвимые места, как дыры в сетевой 
файловой системе (NFS) или FTP-протоколе, а также возможные области повышен- 
ного риска, вызванные конфигурацией командной оболочки и других служб. 
Многие администраторы Unix/Linux обеспокоены возможность использова- 
ния программы SATAN хакерами для определения уязвимых мест сайта, которые могут 
быть 
использованы хакером для взлома сайта. Для предотвращения возможности 
использования 
утилиты SATAN против сайта, функционирующего под управлением операционной 
системы 
Unix/Linux, установите приложение Courtney или Gabriel, которые обнаруживают 
запуск програм- 
мы SATAN против сайта. Эти приложения можно выгрузить из сайта компании 
Computer Incident 
Advisory Capability no адресу http://ciac.llnl.gov/ciac/ToolsUnixNetMon.html. 
При использовании сервера Windows NT или Windows 2000 можно применять 
такие программы, как LANguard Network Scanner, которую можно выгрузить и 
протестировать (см. рис. 12.27). 
Подробное описание ключевых программ обеспечения безопасности можно 
найти на сайте http://www.insecure.org/toois.htmi, на котором рассматрива- 
ются основные особенности 50 самых популярных программ защиты. 
Обработка данных кредитных карточек 
Ранее в этой главе вы научились создавать защищенные Web-сайты — первый 
шаг, необходимый для работы с кредитными карточками. Далее вы должны со- 
здать счет в банке, который позволит принимать оплаты кредитными карточка- 
ми. В сети Web существует несколько компаний, например, PsiGate, http:// 
www.psigate.com, предлагающие программное обеспечение, которое можно ис- 
пользовать для простого внедрения обработки кредитных карточек на активные 
серверные страницы и в другие технологии создания сценариев. С помощью

Глава 12. Безопасность и производительность 647 
программного обеспечения обработки кредитных карточек создаваемые сценарии 
могут без труда проводить авторизацию и обрабатывать оплату кредитными кар- 
точками. 
^^^Nauali/ Net*!)* Siennel «R (1] ВИЛ! 
ffc Z&t V«w Sc«r. Toot; LANguafij Hftip 
О • 
Рис 
о лЗ\П -а **|вв1 a \Q а 1 
- Ш ^у^1 ^°"'' ^' 
® 135J e^r-зр *> DCE елфощ цжААел | 
© 445(M^iosdiC" • 
Т^ой fg ^4 234.B3.10fi ? 
t>tme iietidin^, ««siting fur resp»rtsps . . . 
';HHP disc«us4'y 
Cura»ut*ity s t r i n g : public 
)o»tj '.ietidiiitj, wdil i ittj for r?*ipor»*ip*i . . . 
ICMP sw#tp . .. U'iNf, *> 
нт».1 *jf*mli jiq , uaj t ing for r^spuГ*ЧРЪ . , . 
POHG from 2JU.23ti.63.ie5 
• ! (я* t.e 1 Lwr (ГН) ••• V/n <K'H) 
- JCMi1 rode in response » 0 -> Windows bnx 
1 Canputer(s) found. 
[ Z t . 23*».63-185] 
f o r t |jr«tjiinj ( waiting 2 ?;PCJ [1/1?] .-- 
PHIL1 
Pint probing ( waiting '?. f,ec) [2/2] . . . 
2 open p o r t ( s ) . 
Rat'hwtriy tfetw№i*S . . . 
Operating Syutcn : Windows 9x/XP 
Operating System : Windows t**/Sf 
Cfipcl<in(| HP- (Uerts . . . 
Checking OHS ftlerts . . . 
Checking Hail filerts . . . ' 
cnecbing Seruicp ftl^fts 
Checking RPC ftlerts . . . - 
Checking Niscelianeus . . . 
Cnpeking Inf ot'nation . . . 
4 
. 12,27, Использование программы LANguard Network Scanner для анализа уязвимых 
мест 
системы на базе операционной системы Windows 
Для приема оплаты кредитными карточками на Web-сайте, как правило, со- 
здается HTML-форма, в которую пользователь вводит данные кредитной карточ- 
ки. За счет помещения формы на страницу, доступ к которой осуществляется по 
защищенному соединению (использующему префикс https:// для запуска за- 
щищенного соединения), вы исключаете возможность перехвата хакером данных 
кредитной карточки при передаче их через Internet. 
Тем не менее, ваша главная задача, как Web-разработчика, заключается в хра- 
нении информации о кредитных карточках после выполнения транзакции. Для 
хранения записей о транзакциях, выполненных с кредитными карточками, дан- 
ные о карточках должны записываться в один или несколько файлов. К сожале- 
нию, если оставить данные о карточках на жестком диске сервера, вы 
подвергаетесь 
риску взлома системы и считывания хакером данных о кредитных карточках. В про- 
шлом хакерам неоднократно удавалось успешно взламывать сайты и считывать фай- 
лы, содержащие данные о кредитных карточках в открытом виде (т.е. файлы не 
были зашифрованы). При записи информации о кредитных карточках вы должны 
четко решить, каким образом вы будете защищать эти данные, причем как от хаке- 
ров, так и от сотрудников своей компании (например, программистов и админист- 
раторов баз данных, которые, вероятно, будет иметь доступ к этим данным).

6 48 Глава 12. Безопасность и производительность 
В идеальном случае данные о кредитных карточках должны удаляться из сер- 
вера как можно быстрее. Чем дольше они остаются на сервере, тем больше риск 
их потери. Независимо от того, где хранятся эти данные, они должны содержать 
в зашифрованном файле. 
Поскольку хранение данных о кредитных карточках может оказаться очень 
сложным процессом, вы, возможно, сочтете более простым решением перело- 
жить выполнение операций с кредитными карточками на большую компанию, 
которая постоянно занимается операциями в области электронной коммерции. 
Исследование цепочки производительности Web-сайта 
В зависимости от того, к кому вы обращаетесь, определение понятия произ- 
водительности Web-сайта будет отличаться. С точки зрения пользователя, посе- 
щающего сайт, производительность представляет собой скорость реагирования - 
период времени, на протяжении которого пользователь должен ожидать получе- 
ния запрошенных результатов. С точки зрения администратора Web-сайта, про- 
изводительность чаще всего является возможностью Web-сайта по приему 
пользователей, т.е. количеству посетителей, которые одновременно или почти 
одновременно посещают сайт, за определенный промежуток времени. При рас- 
смотрении производительности Web-сайта администраторы не учитывают ско- 
рость передачи данных в сети (например, в такой медленной сети, как модемное 
соединение). Несмотря на то что с точки зрения производительности сервера 
кажется вполне обоснованным исключение пользователя из рассмотрения, тем 
не менее, Web-дизайнеры должны в полной мере учитывать влияние большого 
времени загрузки на создаваемые ими страницы. 
Как показано на рис. 12.28, для измерения реальной производительности 
Web-сайта нужно учитывать несколько факторов, сочетание которых представляет 
собой цепочку производительности, влияющую на скорость реагирования сайта с 
точки зрения посетителя. 
Из совета "Контроль производительности сервера" вы узнаете, каким образом 
можно контролировать использование процессора и памяти сервера, которые по- 
зволяют определить достаточность ресурсов сервера для выполнения возложен- 
ных на него задач. Более того, вы научитесь анализировать журнальные файлы 
для определения количества посещений Web-сайта и их частоты. 
Помимо контроля производительности сервера вы имеете возможность с по- 
мощью специальных программ тестирования сравнить производительность своего 
сервера с другими серверами в сети Web. Такие программы тестирования можно 
найти на нескольких Web-сайтах, откуда их можно выгрузить и запустить на сво- 
ем сервере. Программы тестирования имитируют целый ряд операций, что по- 
зволяет оценить следующие возможности сервера: 
Возможность поддержки одновременных соединений. 
• Поддержка соединений с ограниченными скоростями передачи данных. 
• Обработка динамических операций GET, а также статических операций 
GET и POST 
• Поддержка постоянных соединений (HTTP 1.1).

Глава 12. Безопасность и производительность 649 
• Возможность обработки динамической смены рекламных баннеров с ис- 
пользованием cookie-наборов и поисковых таблиц. 
• Скорость доступа к файлам. 
• Поддержка подключений с помощью сокетов. 
• Поддержка защищенных операций, например, транзакций на основе SSL- 
протокола. 
Большинство программ тестирования распространяются в версиях для всех 
основных платформ: Windows 2000, Unix/Linux (Apache) и т.д. Более того, для 
более глубокого понимания обработки, выполняемой программами тестирова- 
ния, пользователи, как правило, имеют возможность выгрузить исходный код 
программ тестирования. Имея исходный код, вы можете откомпилировать его в 
исполняемый файл для использования на платформе своего сервера. 
Скорость работы процессора 
ОЗУ 
Скорость работы диска 
Операционная система 
Тип сетевого соединения 
( КабельноеЛ 
^ — > ^ ^—' 
Прокси-сервер или 
оборудование кэш-памяти 
Рис. 12.28. Цепочка производительности Web-cepeepa

650 Глава 12. Безопасность и производительность 
ПРАКТИКУМ 
Подробные описания программ тестирования производительности Web-серверов 
можно найти на следующих сайтах: 
SpecWeb http://www.specbench.org 
Webstone http://www.mindcraft.com/webstone 
Webbench http://www.zdnet.com/zdbop 
После получения результатов выполнения программы тестирования вы имеете 
возможность подробно проанализировать возможности аппаратного обеспечения 
сервера. В последующих разделах приведены краткие описания основных аспек- 
тов сервера, которые могут рассматриваться при оценке его производительности. 
Тип сетевого соединения 
В сети Web можно обнаружить целый ряд типов соединения сайтов с Internet: 
высокоскоростные соединения Т1, цифровые абонентские линии (DSL) и кабель- 
ные модемные соединения. В зависимости от типа соединения скорость загруз- 
ки пользователем данных с сайта будет отличаться. В таблице 12.3 приведены 
скорости передачи данных по соединениям основных типов. 
Таблица 12.3. 
Тип 
соединения 
ISDL 
HDSL 
SDSL 
ADSL 
RADSL 
VDSL 
Спутниковое 
Кабельное 
T1 
ТЗ 
Скорости передачи данных по соединениям основны 
Описание 
ISDN DSL 
Высокоскоростная DSL 
Симметричная DSL 
Асимметричная DSL 
DSL с адаптируемой скоростью 
передачи 
DSL с очень высокими скоростями 
Спутники телевизионного вещания 
Телевизионный кабель 
Выделенная линия 
Выделенная линия 
, Скорость 
выгрузки данных 
144 Кбит/с 
1.5 Мбит/с 
1.5 Мбит/с 
В зависимости 
от расстояния 
до 9 Мбит/с 
Изменяется 
До 50 Мбит/с 
До 500 Мбит/с 
До 1.5 Мбит/с 
До 1.5 Мбит/с 
До 45 Мбит/с 
1ИП0В 
Скорость 
загрузки данных 
144 Кбит/с 
1.5 Мбит/с 
1.5 Мбит/с 
В зависимости 
от расстояния 
до 384 Кбит/с 
Изменяется 
До 16 Мбит/с 
До 60 Мбит/с 
До 1.5 Мбит/с 
До 1.5 Мбит/с 
До 45 Мбит/с 
ПРАКТИКУМ 
В зависимости от типа соединения в сети Web можно найти различные сайты, 
которые позволяют проверить действительную скорость передачи данных. На- 
пример, если Web-сайт подключается в сеть с помощью модемного соединения, 
посетите сайт http://www.bandwidthplace.com/speedtest И запустите Програм- 
му проверки скорости передачи данных, интерфейс которой показан на рис. 
12.29. Аналогично, если вы пользуетесь соединением DSL, для измерения скоро- 
сти передачи данных посетите сайт http://www.dslreports.com/stets.

Глава 12. Безопасность и производительность 651 
Hf.)D 
Рис. 12.29. Измерение фактической скорости передачи данных по модемному 
соединению 
Скорость работы процессора 
В компьютере процессор является той "рабочей лошадкой", которая выполня- 
ет инструкции операционной системы и программного обеспечения сервера. В 
общем случае, чем выше скорость работы процессора, тем выше будет произво- 
дительность Web-сайта. Скорость работы процессора измеряется в количестве 
циклов в секунду, или герцах. Процессор содержит часы, которые выдают им- 
пульсы определенное количество раз в секунду. При каждой выдаче импульса 
процессор выполняет одну инструкцию. Так, например, в процессоре с частотой 
500 МГц часы выдают импульсы 500 миллионов раз в секунду. Аналогично, часы 
процессора с частотой 2 ГГц выдают 2 миллиарда импульсов в секунду. Как пра- 
вило, большинство пользователей считает, что процессор с тактовой частотой 2 
ГГц в четыре раза быстрее процессора с частотой 500 МГц. К сожалению, это не 
так. Пусть, например, нормальная загрузка процессора составляет 20% (что на

6 5 2 Глава 12. Безопасность и производительность 
самом деле достаточно большая цифра). При замене процессора с частотой 500 
МГц процессором с частотой 2 ГГц вы увидите ускорение работы процессора 
только при его использовании (т.е. в течение 20% всего времени). Таким обра- 
зом, вместо ускорения работы сервера в четыре раза (что было бы справедливо 
при полной загрузке процессора) процессор с частотой 2 ГГц увеличит произво- 
дительность всего на 80%: 
Увеличение производительности = (Загрузка) * (Коэффициент увеличения скорости 
работы) 
= (20%) * (4) = 80% 
Объем ОЗУ сервера также имеет очень большое значение для его производи- 
тельности. Перед тем как процессор сможет приступить к выполнению програм- 
мы программа и ее данные должны быть записаны в ОЗУ. Для повышения про- 
изводительности сервер иметь возможность содержать в ОЗУ все постоянно 
выполняемые программы. В противном случае сервер будет периодически загру- 
жать программы с диска в ОЗУ, что представляет собой достаточно медленный 
процесс (механический диск работает гораздо медленнее, чем электронная па- 
мять ОЗУ). Большинство администраторов скажут, что чем больше объем ОЗУ 
сервера, тем лучше. Тем не менее, чтобы не использовать ОЗУ (и деньги) впус- 
тую, вы должны оценить объем неиспользуемой физической памяти (как будет 
показано в совете "Контроль производительности сервера"). Если объем ОЗУ 
сервера далек от полного использования, добавление дополнительного ОЗУ не 
приведет к увеличению производительности сервера. 
Время доступа к диску 
Поскольку диск является механическим устройством (содержит движущиеся 
детали), он работает намного медленнее, чем электронные компоненты компью- 
тера. Администраторы серверов повышают производительность путем добавления 
в систему ОЗУ, что уменьшает количество дисковых операций. Тем не менее, в 
конце концов, многие серверные приложения все равно должны считывать дан- 
ные с диска или записывать данные на диск. За счет контроля за выполняемыми 
сервером дисковыми операциями вы можете определить, насколько улучшится 
производительность сервера при замене диска более быстрым. Для большинства 
серверов покупка нового, более быстрого диска вполне оправдывает себя. 
Операционная система и серверные приложения 
Операционная система и приложения, выполняемые сервером-, имеют очень 
большое влияние на производительность сервера. В сети Web можно найти нема- 
ло программ тестирования, которые позволяют оценить производительность опе- 
рационной системы при различных загрузках. Тем не менее, в общем случае для 
большинства Web-сайтов все основные операционные системы предлагают более 
чем удовлетворительные показатели производительности. Если вы работаете с 
сайтом, количество посещений которого исчисляется миллионами посетителей в 
сутки, производительность операционной системы будет иметь для него более 
важное значение. Если же вы администрируете небольшой сайт, приоритетом для 
вас должна стать простота работы (т.е. должна использоваться операционная 
систе- 
ма, с которой вы хорошо знакомы), безопасность и, наконец, производительность.

Глава 12. Безопасность и производительность 653 
Прокси-серверы и аппаратное обеспечение кэш-памяти 
В сети Web содержимое многих HTML-страниц не меняется. Для снижения 
нагрузки на сервер на многих сайтах используются прокси-серверы или устрой-' 
ства кэширования, которые помещаются между сервером и сетью Internet, как 
показано на рис. 12.30. В общем случае прокси-сервер или устройство кэширова- 
ния хранит копию статических компонентов, которые могут выдаваться по зап- 
росам пользователей. В зависимости от объема использования на сайте статичес- 
ких страниц такой "внешний интерфейс" сайта может довольно существенно 
снизить загрузку сервера. Более того, многие сайты позволяют прокси-серверам 
выполнять простые активные серверные страницы или PHP-сценарии, результаты 
которых не зависят от данных, хранящихся на сервере. Подробное описание осо- 
бенностей использования на сайте прокси-сервера или устройства кэширования 
СОДерЖИТСЯ ПО адресу http://www.cache.ja.net/servers. 
Internet 
Прокси-сервер Сервер 
Рис. 12.30. Использование прокси-сервера или устройства кэширования 
для снижения загрузки сервера 
Создание набора Web-серверов 
При увеличении Web-трафика сопровождение сайта усложняется. Поскольку 
посетители ожидают, что ваша система будет работать 7 дней в неделю 24 часа в 
сутки, выполнение даже простых операций, например, установки нового про- 
граммного обеспечения и перезапуск системы, может стать достаточно сложной 
задачей. Для упрощения выполнения таких операций на некоторых сайтах ис- 
пользуются наборы Web-серверов, состоящие из двух и большего количества 
идентичных сайтов (которые администраторы называют зеркальными). Как пока- 
зано на рис. 12.31, набор Web-серверов использует один сервер для получения 
входящих сообщений. Этот сервер перенаправляет сообщения (запросы) одному 
из зеркальных сайтов. При необходимости перезапуска системы на зеркальном 
сервере или при выходе из строя одного из зеркальных серверов, интерфейсный 
сервер просто перенаправляет сообщения другим серверам. 
За счет использования наборов Web-серверов загруженный сайт может выпол- 
нять выравнивание загрузки между серверами путем распространения запросов 
по нескольким серверам. При увеличении загрузки сайта администраторы могут 
просто добавить в набор Web-серверов новый зеркальный сервер.

654 Глава 12. Безопасность и производительность 
Несмотря на то что на рисунке 12.31 предполагается, что серверы в наборе 
находятся недалеко друг от друга, фактически они могут находиться в разных 
точках земного шара. Размещая зеркальные серверы в различных регионах, вы 
защищаете свой сайт от таких стихийных бедствий, как пожары или наводнения. 
Кроме того, вы снижаете риск того, что один отказ в сети приведет к невозмож- 
ности посещения сайта пользователями. 
Рис. 12.31. Набор Web-серверов состоит из нескольких идентичных (зеркальных) 
серверов 
Контроль быстродействия сервера 
Большинство сетевых администраторов будут утверждать, что для увеличения 
производительности необходимо в качестве Web-сервера использовать более 
мощный компьютер/Более того, у многих администраторов сложилось твердое 
мнение о минимальной конфигурации Web-сервера, в частности минимальном 
объема ОЗУ, установленного на сервере. Тем не менее, правда заключается в том, 
что производительность сервера должна соответствовать его загрузке. Если на 
сервере работает только сетевое программное обеспечение и количество посеще- 
ний сайта не превышает нескольких сотен (или даже тысяч) в час, вашим требо- 
вания будет соответствовать компьютер даже с посредственными характеристика- 
ми. Чтобы не гадать о достаточности или недостаточности аппаратного 
обеспечения сервера вы должны контролировать производительность сервера. 
ПРАКТИКУМ 
Как правило, двумя первыми показателями недостаточности производитель- 
ности аппаратного обеспечения сервера являются загрузка процессора и объем дос- 

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

Глава 12. Безопасность и производительность 655 
1. Нажмите комбинацию клавиш CTRL+ALT+DEL. На экран выводится диа- 
логовое окно Безопасность Windows. 
2. В диалоговом окне Безопасность Windows щелкните на кнопке Диспетчер 
задач. На экране появится диалоговое окно Диспетчер задач Windows. 
3. В диалоговом окне Диспетчер задач Windows выберите вкладку Быстродей- 
ствие. На вкладке Быстродействие выводится текущая загрузка центрально- 
го процессора и параметры использования физической памяти, как пока- 
зано на рис. 12.32. 
Не Optima Virw H* 
rCI4i l&age НН&ягу - 
ManAw 
СгвСИЯв 
— 
7808 
43 
рРГ1У5КЖ РОПОТУ {K 
ТЫ» 
ftvaWbfc 
| Syrfem С act» 
)—: 
523568 
265332 
335.116 
| Nonp 
Рис. 12.32. Контроль загрузки центрального процессора и параметров 
использования 
физической памяти в операционной системе Windows 2000 
Кроме того, операционная система Windows 2000 позволяет контролировать 
целый ряд дополнительных параметров с помощью окна "Производительность", 
показанного на рис. 12.33. 
Для использования окна Производительность для контроля параметров быст- 
родействия сервера выполните следующие действия: 
1. Выберите в меню Пуск | Настройка | Панель управления. Откроется окно 
панели управления. 
2. В окне панели управления выполните двойной щелчок на пиктограмме Ад- 
министрирование. Откроется окно Администрирование. 
3. В окне Администрирование выполните двойной щелчок на пиктограмме Си- 
стемный монитор. Откроется окно Производительность, показанное на рис. 
, 12.33.

656 Глава 12. Безопасность и производительность 
4. Для контроля значения определенного параметра в окне Производитель- 
ность щелкните на кнопке со знаком " + " , которая находится в панели ин- 
струментов окна. На экране появится диалоговое окно Добавить счетчики, 
показанное на рис. 12.34. 
5. В диалоговом окне Добавить счетчики выберите объект, а затем характерис- 
тики объекта, которые в Windows 2000 носят название счетчиков. Щелк- 
ните на кнопке ОК. 
Console JjfireJaw 
} Consols Boo» 
Щ res Logs and Alert; 
100 
jjjgjg 
l'" " TfflB Аунадо \ 
T Scate Тсоцп>и~Т I 
Minimum! 
Dua&n P 
| Object 1 Coropu» 
Рис. 12.33. Использование окна "Производительность"операционной системы Windows 
2000для 
контроля производительности сервера 
APC B 
OPC BjMCTK/i 
Рис. 12.34. Использование диалогового окна "Добавить счетчики' 
для выбора контролируемых параметров

Глава 12. Безопасность и производительность 6 5 7 
Большинство серверов, кроме того, имеют возможность регистрации дей- 
ствий, выполняемых по запросу браузеров (в частности, запрашиваемых HTML- 
страниц). С помощью журнального файла вы можете контролировать использова- 
ние сайта, получать точные данные по количеству посещений и т.д. Ниже 
приведен пример содержимого файла журнала IIS-сервера: 
152.163.188.195 -[04/Sep/2003:22:ll:34 -0500] 
"GET /bands-upl.gif HTTP/1.0" 200 437 
152.163.188.193 [04/Sep/2003:22:ll:34 -0500] 
"GET /bands-overl.gif HTTP/1.0" 200 437 
152.163.188.227 [04/Sep/2003:22:11:34 -0500] 
"GET /links-overl.gif HTTP/1.0" 200 360 
152.163.188.161 [04/Sep/2003:22:ll:34 -0500] 
"GET/home-over2.gif HTTP/1.0" 200 386 
152.163.188.194 [04/Sep/2003:22:ll:42 -0500] 
"GET /CommercialButtonOver.jpg HTTP/1.0" 200 5889 
152.163.188.197 [04/Sep/2003:22:ll:44 -0500] 
"GET /emailButtonOverl.jpg HTTP/1.0" 200 945 
152.163.188.228 [04/Sep/2003: 22 :12 :02 -0500] 
"GET /gallery2.html HTTP/1.0" 200 16808 
152.163.188.164 [04/Sep/2003:22:12:16 -0500] 
"GET /al2.jpg HTTP/1.0" 200 10273 
152.163.188.195 [04/Sep/2003:22:12:16 -0500] 
"GET /aaronl.jpg HTTP/1.0" 200 16805 
152.163.188.228 [04/Sep/2003:22:13:59 -0500] 
"GET /phone-_.jpg HTTP/1.0" 200 3870 
Если количество посещений сайта достаточно велико, журнальный файл так- 
же будет иметь большой объем. Чем больше объем файла журнала, тем сложнее 
получить полезную информацию путем его простого просмотра. 
ПРАКТИКУМ 
В сети Web можно найти несколько компаний, предлагающих программное обес- 
печение для обработки больших журнальных файлов и извлечения интересующей 
информации: 
SurfStats Log Analyzer http://www. surfstats.com/ 
AWStatS http://awstats . sourceforge . com/ 
WebTrends Log Analyzer http: //www. webtrends. com/products/log/default .htm

Предметный указатель 
Абзацный отступ 203 
Абзац 
с начальной заглавной буквой 208 
Активные серверные страницы (ASP) 
550 
Альфа-канал 308 
Амперсант (&) 558 
Анимация 337, 435 
Flash 338, 345 
Shockwave 346 
на основе текста с помощью FlaX 373 
с использованием формата GIF 358, 341 
управление 358 
Анимированное GIF-изображение 342 
Аплет 445 
Java 445 
помещение на Web-страницу 451 
Арифметические операции JavaScript 390 
бинарные 390 
Атака 616 
социотехническая 616 
типа "отказ в обслуживании" 617 
Атрибут 22, 242 
в HTML 28 
минимизация 242 
Аудио 338 
потоковое 
встраивание в страницу 378 
передача 374 
Б
Байт-код 447 
Баннер 121, 360, 436, 603 
рекламный 603 
с эффектом отбрасывания тени 211 
Бегущая строка 443 
Безопасность 592 
Библиотека JavaScript 434 
Блокнот 31 
Боковое меню (sidebar) 114 
Брандмауэр 619 
программный 626 
Браузер 20, 553 
Быстродействие сервера 654 
В
Взлом 
паролей 615 
системы 615 
Видео 
потоковое 338, 353 
вопросы совместимости в Web 353 
воспроизведение 354 
встраивание в страницу 350, 378 
выгрузка 354 
передача 374 
просмотр в Web 374 
Видеоролик 351 
Виртуальная 
машина Java ,449 
реальность 338 
экскурсия 355 
Вложение таблицы в другую таблицу 116 
Вложенный список (nested list) 70 
Внедрение в Web-страницу объекта 
ActiveX 458 
"Водяные знаки" 
расположение на странице 214 
Время доступа к диску 652 
Вставка 
одной XHTML-страницы в другую 268 
функций JavaScript в HTML-код 393 
Выбор типа шрифта 188 
Выравнивание 
надписей с элементами формы 223 
графики и текста с помощью таблицы 124 
Г
Гиперссылка 59, 208 
графическая 320 
Гипертекст 60 
Гипертекстовая ссылка 59 
Горизонтальная линия 315 
"Горячие" области 117 
Граница 91, 93, 201 
графическая 212 
на Web-странице 116 
создание 212 
таблицы 
видимая 124

Предметный указатель 659 
Графика 282, 287 
баланс между текстом и графикой 289 
извлечение 326 
индексирование 319 
кэширование 329 
назначение 282 
помещение на Web-страницу 286 
предварительная загрузка 329 
прозрачность 325 
создание 283 
спагетти-графика 324 
учет скорости доступа в Internet 287 
форматы файлов 284 
Графическое изображение 118 
разрезание на фрагменты 118 
д
Двойная кавычка (") 559 
Дескриптор 
<!_. _ -> 45, 384 
<%... %> 550, 554 
<?php 496 
<а></а> 60, 115, 320 
<applet></applet> 446, 451 
<b></b> 27, 61 
<bgsound> 350 
<body></body> 24, 48, 153, 239 
<br> 25 
<caption></caption> 86 
<centerX/center> 58 
<dd></dd> 72 
<divX/div> 30, 106, 199, 224 
<dl></dl> 72 
<dt></dt> 71 
<embed> 350 
<fontX/font> 28, 47, 190 • 
<formX/form> 132, 156, 230, 518 
<framesetX/frarneset> 76, 77 
<hlX/hl> 177 
<head></head> 24, 238 
<hr> 64 
<html></html> 24, 238 
<i></i> 27 
<iframe></iframe> 269, 270 
. <img> 35, 55, 115, 217, 294, 420 
<input> 135 
<label></label> 168 
<HX/li> 69, 112 
<link> 182 
<marquee> 443 
<noframes></noframes> 78 
<noscript></noscript> 393 
<object> 446 
<ol></ol> 68, 219 
<optgroup></optgroup> 262, 263 
<option></option> 146, 262 
<p></p> 26, 49 
<par> 380 
<pre></pre> 73 
<scriptX/script> 138, 382 
<seq> 380 
<select></select> 146 
<smil></smil> 380 
<spanX/span> 224 
<style></style> 173, 176 
<superX/super> 62 
<table></table> 84, 115, 132 
<tbody> 263 
<td></td> 84, 115 
<textarea></textarea> 136 
<tfoot> 263 
<th></th> 86 
<thead> 263 
<title></title> 43 
<trX/tr> 84 
<u></u> 27 
<ul></ul> 69, 113, 219 
контейнерный 23 
пустой 25 
разделов 24 
Дешифрация 592 
Динамический HTML (DHTML) 339 
Диспетчер PWS 38 
Добавление 
гипертекстовых ссылок 59 
графики в Web-страницу 55 
графики и ссылок в ячейки таблицы 1 
цветов в форму 223 
Документ 237, 393, 550 
ASP 550 
ХНТМГ 237, 245 
отображение в устаревших браузерах 393 
преобразования HTML-документа в 
XHTML-документ 251 
Драйвер 587 
ODBC 587 
3
Заглавная буква 207 
Заголовок Web-страницы 43 
Загрузка 
графики 1 
рисунков 
быстрая 307

660 Предметный указатель 
файла 306 
нечересстрочный режим 306 
чересстрочный режим 306 
Заливка 214 
сплошная 214 
Запись 536 
Зарезервированные слова 388 
Заставка 
анимированная 365 
Защита учетных записей 
по умолчанию 616 
Звук 347 
форматы звуковых файлов 349 
И
Извлечение полноразмерного 
изображения 326 
Изображение 
анимированное GIF 342 
плавающее 217 
фоновое 323 
расположение 214 
Имитация фреймовой Web-страницы 121 
с помощью таблицы 121 
Индекс 395 
Интервал 
между буквами 203 
между словами 203 
между строками 203 
К
Кавычка 
двойная (") 559 
Камера 377 
Web 377 
Канал 308 
альфа 308 
Карта 83 
навигационная 83, 117 
Каскадный список стилей 173 
добавление на Web-страницу 180 
импортирование внешнего списка 
стилей 183 
связывание с внешним списком 
стилей 181 
Клавиши быстрой навигации 
по форме 163 
Клиент 546 
FTP 546 
Ключ шифрования 621 
Код 486 
Коллекция ServerVariables 581 
Комментарии 45, 388 
Компилятор 486 
Консорциум W3C 275 
Контейнер 238. См. также Раздел 
Контейнерный HTML-дескриптор 23 
Курсор 228 
Кэширование 
графических изображений 329 
предварительное 441 
Л
Линейка 92 
Линия 
горизонтальная 
цветная 314 
Логические операции JavaScript 392 
Логотип 215 
м
Маркированный список 112 
Массив 394 
изображений 420 
Медиа 376 
потоковое 
создание 376 
Меню 114, 464 
боковое навигационное 114 
всплывающее навигационное 464 
выбора 147 
Метка 168 
Метод 403, 557 
Миниатюра ПО, 112, 225 
Минимизация атрибута 242 
Монтаж видеоролика 351 
н
Набор 
cookie 418, 427, 572 
Web-серверов 653 
зеркальный 653 
Навигационная карта 83, 117 
Навигационная панель 331 
графическая 331 
Навигационное меню 114 
Неупорядоченный список 113 
Номер порта 376, 628 
О
Обработка 
HTML-форм 130 
ошибок 608.

Предметный указатель 661 
Обработчик 
событий 401, 409 
сценариев ASP 550 
Обтекание текстом изображения 109 
Объект 414, 461, 557 
ActiveX 449 
внедрение в Web-страницу 458 
использование в Internet Explorer 489 
подписанный 461 
Объявление 178, 406 
Ограничивающий прямоугольник 324 
Оператор 
простой 396, 504 
составной 396, 504 
Операции 502 
JavaScript 392 
логические 392 
сравнения 391 
арифметические 502 
логические 503 
присваивания 502 
сравнения 503 
Операционная система 652 
Определение типа документа (DTD) 240 
Организация миниатюр в таблицу ПО 
Отображение 
графики •§ 
документа в устаревших браузерах 393 
п
Параметры 387, 455 
передача аплету 455 
Передача потокового аудио и видео 374 
Переключатель 142 
Переменная 399 
управляющая 399 
Персональный Web-сервер 35 
Печать XHTML-страницы 
Web-браузером 278 
Пиксель 190 
Подключаемый модуль браузера 354 
QuickTime 354 
RealAudio 354 
Подчеркивание (_) 558 
Поле 
ввода
многострочное 136 
разделение текста на отдельные части 197 
скрытое 1 
Правила 173 
каскадного списка стилей 177 
Преобразование 
HTML-документа в XHTML-документ 251 
типов аудиофайлов 377 
Приложение 
Adobe Premiere 352 
Cool Edit 376 
Director 345 
Flash 343 
ImageReady 357 
Macromedia Flash 373 
Shockwave 346 
Sound Recorder 349 
ssh 645 
выполняемое сервером 652 
Проверка данных формы с помощью 
атрибута onClick 170 
Программа 
SATAN 646 
создания Web-страниц 326 
компоновки Web-страниц 32 
редактирования изображений 326 
Прозрачность в GIF-изображениях 107, 
324 
Прокси-сервер 653 
Протокол 20, 546, 623 
FTP 546 
HTTP 20 
SSL 623 
Публикация Web-страниц 38 
Пункт 190 
Р
Раздел 238 
Разрезание графического изображения 
на фрагменты 118 
Рамка (frame) 92 
Расположение 
фоновых изображений 214 
элементов Web-страницы по слоям 230 
Растрирование 301, 331 
С
Свойство 417, 557 
Сеанс 526, 593 
ASP 593 
Селектор 177 
класса 187 
Сервер 35, 552, 653 
IIS 552 
Web 35 
персональный 35

662 Предметный указатель 
быстродействие 654 
прокси 653 
Серверные приложения 652 
Сертификат безопасности 592 
Сжатие с потерями 302 
Сканер 311 
Скорость 
передачи данных 650 
работы процессора 651 
Скрытое (hidden) поле 171 
Снижение времени на рисование 
таблицы 120 
Содержимое (content) страницы • 
Создание 
Flash-фильма с чистого листа 370 
Web-страницы 25 . 
баннера с помощью GIF-анимации 360 
вложенных списков 70 
графических гиперссылок 320 
маркеров 112 
с помощью таблиц и графики 112 
на форме переключателей 142 
на форме флажков 140 
навигационного меню •• 
с помощью таблицы 114 
перекрывающегося текста 192 
потокового медиа 376 
прозрачности в GIF-изображениях 324 
списка 112 
с помощью таблиц и графики 112 
стилей 176 
страницы с Web-камерой 377 
цветных горизонтальных линий 314 
эффекта отбрасывания тени 210 
Сокрытие ввода пользователя •! 
Составной оператор 396 
Список 112, 218 
вложенный 70 
выпадающий 147. 
маркированный 112 
ненумерованный (маркированный) 218 
неупорядоченный со специальными 
маркерами 1.13 
определений 71 
стилей 173 
каскадный 173 
создание 176 
упорядоченный (нумерованный) 113,218 
Средство встраивания объектов 
ActiveX 450 
Стили 184 
включение в HTML-дескрипторы 184 
Стоп-кадр 353 
Страница 22, 30, 174, 268, 550 
ASP 550 
коллекция 576 
создание 552 
'СТЗрСВШЗЯ JDo 
Web 22, 30 
заголовок 43 
публикация 38 
создание 25 
XHTML 268 
вставка однойXHTML-страницы в 
другую 268 
печать Web-браузером 278 
с всплывающими подсказками 229 
с имитацией фреймовой структуры 123 
с помощью таблицы 123 
с каскадным списком стилей 174, 177, 
179 
с логотипом компании 215 
с миниатюрами 111 
с перекрывающимся текстом 192 
с плавающим изображением 217 
с плавающим рисунком текстом 
с полями 175 
с текстурным фоном 215 
с тремя колонками 200 
Строка 
бегущая 443 
СУБД MySQL 587 
Сценарий 138, 382, 392, 492 
JavaScript 138, 382 
вставка функций JavaScript 
в HTML-код 393 
зарезервированные слова 388 
логические операции 392 
массивы 394 
сокрытие от браузеров, не 
поддерживающ*их JavaScript 384 
функции 385 
РНР 492 
готовый (внешний) 434 
т
Таблица 80, 115, 263 
HTML 80 
XHTML 263 
видимая граница 124 
вложение таблицы в другую таблицу 116 
выравни вание таблицы на Wfeb-страни це 105 
граница (border) 91, 93

Предметный указатель 663 
для отображения миниатюр 110 
добавление графики и ссылок 115 
имитация фреймовой Web-страницы 121 
линейка (rule) 92 
рамка (frame) 92 
с текстом и графикой 125 
с цветной ячейкой .124 
снижение времени на рисование 
таблицы 120 
стилей 
вложенная 173 
фон 
таблицы 95 
ячеек 123 
ячейка (cell) 95 
Текст 26, 73, 192, 333 
выравнивание 194 
использование начальных заглавных 
букв 205 
перекрывающийся 192 
плавающий 217 
сглаживание краев текста 333 
форматирование 26 
предварительное 73 
Текстовый 
процессор 32 • 
редактор 31 
Тени 210 
Технология ASP 552 
Унарные операции JavaScript 391 
Упорядоченный список 113 
Управление 
границами на Web-странице 116 
с помощью вложенных таблиц 116 
курсором 228 
расстоянием между колонками на 
Web-странице 126 
• шириной полей текста на Web- 
странице 126 
Условная обработка 392 
Утилита TidyGUI 251 
Ф
Файл 306, 377, 550 
. .asp 550 
.class 457 
jar 457 
аудио 377 
загрузка 306 
исходный 479 
перенаправлений 601 
расписания ротатора 601 
сжатие 310 
Файловая система NTFS 639 
Фильм 367 
Flash 369 
создание 370 
Фильтры 221 
Флажок 140 
Фон 214, 322 
мозаичный 322 
таблицы 95 
текстурный 214 
ячеек таблицы 123 
Фоновое изображение 323 
Форма 129 
ввода имени пользователя и пароля 171 
набор данных формы 130 
обработка 130 
проверка данных формы 170 
с выпадающим списком (меню выбора) 147 
с двумя однострочными полями ввода 
текста 135 
с клавишами быстрого перехода 169 
с метками 169 
с многострочным полем ввода 136 
с переключателями 142,171 
с флажками 140 
Форматирование текста 26 
Форматы файлов 284 
GIF 285, 304, 341 
JPEG 285, 301 
PNG 285, 310 
PNG-24 308 
PNG-8 308 
SVG 344 
звуковых 349 
Фрейм 76, 121, 271 . 
одновременное обновление нескольких 
фреймов 271 
Фреймовая структура 121 
Функция 403 
disableSpuseNameQ 171 
prepFromResultO 153 
PreResetProcO 156 
validateAndSubmitO 171 
ValidateFormO 150 
встроенная 403 
вызов 407 
определенная пользователем 403

664 Предметный указатель 
X
Хакер 613 
ц
Цвет 123, 223, 290, 425 
добавление цветов в форму 223