Заголовок Web-страницы

Оглавление Введение 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-страницу с помощью базового дескриптора , 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 Создание клавиши быстрой навигации по форме с помощью дескриптора 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-формы с помощью дескриптора 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 Задание размеров изображения вдескрипторе 294 Работа с атрибутом alt и браузерами, не воспроизводящими графику. 296 Создание всплывающей подсказки с помощью атрибута title в дескрипторе 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-дескрипторы, такие как <ь> для выделения полужирным, для выделения курсивом и т.д., 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 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-браузеру указание отобразить текст до дескриптора с использованием правил форматирования по умолчанию: <р> Это пример абзаца. Если вы хотите, чтобы браузер отображал текст в абзаце определенным шриф- том и цветом, нужно будет добавить атрибуты, определяющие такие параметры, как цвет, начертание, размер шрифта и т.д., в дескриптор , который ста- вится после дескриптора <р> и перед текстом, внешний вид которого требуется задать. (Мы рассмотрим атрибуты более подробно после того, как в следующих двух разделах вы узнаете немного больше о дескрипторах.) 24 Глава 1. Основы языка HTML HTML-дескрипторы разделов Для организации различных частей HTML-кода, которыми описывается Web- страница, используется набор дескрипторов разделов {section tags). Типы HTML- дескрипторов в каждом разделе определения HTML-страницы имеют конкретное назначение: • . Эти дескрипторы ставятся в начале и в конце HTML-до- кумента. Как таковые, начальный и конечный дескрипторы заклю- чают в себе все прочие HTML-дескрипторы, с помощью которых описыва- ется Web-страница. • . Начальный и конечный дескрипторы заголовка части идут сразу же за начальным дескриптором HTML () и обозначают заголовочную часть Web-страницы. С помощью дескрипторов в заголовоч- ную часть Web-страницы можно включить такую информацию, как фами- лия автора и дата создания страницы. Кроме того, в этот раздел помеща- ются дескрипторы, содержащие описательную информацию страницы, чтобы поисковые системы могли добавлять ссылки на вашу страницу в свои индексы. Из HTML-дескрипторов и информации, помещенной в раз- дел заголовка, браузер посетителя отображает только название Web-страни- цы. Название Web-страницы вставляется в заголовочной части между на- чальным и конечным дескрипторами заголовка ( ), как показано в примере кода ниже перечня дескрипторов разделов. • . Начальный и конечный дескрипторы тела документа рас- полагаются сразу же за разделом заголовка и обозначают тело Web-страни- цы. Раздел тела Web-страницы содержит дескрипторы, сообщающие Web- браузеру, что необходимо вывести на экран и как это будет выглядеть. Приведенный ниже код демонстрирует правильное размещение HTML-деск- рипторов разделов: Заголовок Web-страницы Сюда помещаются текстовое содержимое и дескрипторы тела документа Глава 1. Основы языка HTML 25 новым стандартам, они по-прежнему будут правильно отображать Web-страницы, созданные вами сейчас. Пустые HTML-дескрипторы Наряду с контейнерными дескрипторами (см. раздел "Контейнерные HTML- дескрипторы" выше в этой главе), в языке HTML используются дескрипторы вто- рого типа, называемые пустыми дескрипторами (empty tags). В то время как кон- тейнерные дескрипторы заключают содержимое страницы, такое как строку текста, между начальным и конечным дескрипторами, пустые дескрипторы не требуют соответствующего конечного дескриптора. Пустой дескриптор можно представить себе в виде одиночной команды или оператора вроде "перейти туда- то" или "выполнить то-то". Например, в приведенном ниже HTML-коде исполь- зуется дескриптор перевода строки (<Ьг>), чтобы дать Web-браузеру указание пе- рейти на следующую строку перед тем, как отобразить следующий элемент на странице (в данном примере - вторую строку текста): Пример использования дескриптора перевода строки <р> Этот текст отображается в первой строке
Этот текст отображается во второй строке Создание Web-страницы Создавать текстовые HTML-документы действительно очень просто. Чтобы создать HTML-документ, нужно открыть какой-нибудь текстовый редактор и на- брать HTML-код. После ввода HTML-операторов вы просто сохраняете документ в виде текстового файла с расширением .htm или .html. Например, откройте свой любимый текстовый редактор (годится даже Блокнот из Windows) и введите следующий HTML-код: IIpHMep простого HTML-flOKyMeHTa <р>Привет, МИР! Вот и я! Теперь сохраните свою работу в файле 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. npnMep текста, разбитого на абзацы <р>Текст между двумя дескрипторами абзаца определяет один абзац. Абзацы содержат одно или более предложений <р>Следующий абзац начинается здесь с пустой строки, вставленной между двумя абэацами Глава 1. Основы языка HTML 27 Щк Пример текста, разбитого на абзац Првека. Щид Избранное Qgpenc ^пр hHp//html-webd6sign/Chepter01/Figure0l-Q3htm Текст между двумя дескрипторами абзаца определяет один абзац. Абзацы содержат одно или более предложений Следующий абзац начинается здесь с пустой строки, вставленной между двумя абзацами '• j Рис. 1.3. Дескрипторы абзацев организуют текст в группы, разделенные пустыми строками В языке HTML есть также несколько дескрипторов для форматирования тек- ста, с помощью которых можно изменять внешний вид текста, обычно с целью выделения. Чтобы применить стиль форматирования, поместите начальный деск- риптор форматирования в начало текста, к которому требуется применить этот стиль. Ниже описаны три наиболее часто употребляемых дескриптора формати- рования: • <ь> . Текст, помещенный между дескрипторами выделения полужир- ным, отображается полужирным шрифтом. • . Текст, помещенный между дескрипторами выделения курсивом, отображаетсякурсивом. • . Текст, помещенный между дескрипторами выделения подчерки- ванием, отображается подчеркнутым. Следующий HTML-код выводит текст, выделенный полужирным, курсивом и подчеркиванием (результат можно увидеть на рис. 1.4). 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 пожаловать на сайт страница-приветствие ... Здесь находится отображаемое Энди "Книга о 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-страницы присутствует дескриптор типа документа (). ЦЦЦЦЦЦЦ^ЦЦЦЩ ПРАКТИКУМ Определение типа документа (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 находится в начале документа, до дескриптора . Ниже показан корректный формат типового DTD: • 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, будет следующее: Глава 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 () в верхней части вашего 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- страницы: flOKyMeHT, содержащий KOMMeHTapnn Компания One-of-a-Kind Productions, Inc. Контактная информация 316 333 4444 -- > Хотя Web-браузер не выводит на экран информацию, которую вы поместили между начальным и конечным дескрипторами комментария, посетитель сайта все же может прочесть комментарии, дав Web-браузеру указание отобразить HTML-код Web-страницы. Браузер, в свою очередь, отобразит исходный код (включая комментарии) HTML-документа в отдельном* окне документа. Помимо использования комментариев для предоставления личных данных, комментарии можно использовать и в учебном' процессе — так вам будет проще объяснить своим студентам назначение отдельных HTML-дескрипторов и атри- бутов. Кроме того, с помощью комментариев можно предотвратить вывод на эк- ран внедренных сценариев, когда Web-браузер не поддерживает дескриптор сце- нария, как показано в нижеприведенном фрагменте кода: . . . Здесь находится содержимое Web-страницы, которое должен отобразить браузер . . . Без дескрипторов комментариев, обрамляющих описание 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, при- даст документу менее формальный вид. ШЯШШШШШШ ПРАКТИКУМ Чтобы изменить гарнитуру шрифта, заключите текст между начальным и конеч- ным дескрипторами в виде: . . . Текст Web-страницы, который должен быть выведен указанным шрифтом Атрибут face сообщает Web-браузеру, какую гарнитуру шрифта использовать при выводе текста Web-страницы на экран. Например, начальный дескриптор шрифта дает браузеру указание отображать идущий после дескриптора текст шрифтом Helvetica до тех пор, пока браузер не обнаружит дескриптор : 3TOT текст выводится шрифтом Helvetica Прочитав дескриптор в HTML-коде Web-страницы, браузер вернется к отображению текста страницы своим шрифтом по умолчанию. 48 Глава 1. Основы языка HTML Таким образом, атрибут face дает Web-браузеру указание искать на хосте тот или иной шрифт (в данном примере — Helvetica). Этот шрифт Web-браузер будет использовать для отображения текста, помещенного между начальным и конеч- ным дескрипторами шрифта (). Однако если на компьютере посе- тителя не установлен шрифт, указанный в дескрипторе , Web-браузер бу- дет использовать вместо него свой шрифт по умолчанию. Посетитель сайта может установить шрифт по умолчанию браузера, изменив настройки Web-браузера. Например, чтобы изменить шрифт по умолчанию в Internet Explorer 5, в меню Tools (Сервис) выберите Internet Options (Свойства обо- зревателя). Затем щелкните на кнопке Fonts (Шрифты). Internet Explorer, в свою очередь, выведет на экран диалоговое окно Fonts (Шрифты), в котором можно выб- рать шрифт, используемый браузером для отображения Web-страниц (и исходного HTML-кода) по умолчанию. Шрифт, установленный по умолчанию, говорит Web- браузеру посетителя, какое начертание шрифта использовать, если в Web-доку- менте не указан шрифт или указанного шрифта нет на компьютере посетителя. Кроме указания основного шрифта, атрибут face позволяет выбрать второй, третий и даже четвертый шрифт. Например, вы хотите, чтобы текст вашего доку- мента отображался с использованием шрифта Helvetica. Однако если на компью- тере посетителя нет шрифта Helvetica, вместо него можно использовать шрифт Georgia. В приведенном ниже фрагменте кода показано, как можно указать аль- тернативный шрифт, который будет использован в случае отсутствия основного шрифта на компьютере посетителя: Основным шрифтом является Helvetica. Если на компьютере кет шрифта Helvetica, браузер будет использовать шрифт Georgia. Атрибут face дает Web-браузеру указание отображать текст между начальным и конечным дескрипторами шрифта () шрифтом Helvetica, а если шрифта Helvetica на компьютере нет, использовать вместо него шрифт Georgia. Если на компьютере нет ни основного, ни какого-либо из альтернативных шрифтов, Web-браузер будет использовать свой шрифт по умолчанию. При указании шрифтов записывайте названия шрифтов строчными буквами, поскольку в этом случае система будет искать название шрифта, записанное как строчными, так и заглавными буквами. И наоборот, если вы запишете название шрифта заглавными буквами, а на компьютере посетителя шрифт будет установ- лен строчными буквами, Web-браузер не найдет нужного шрифта. Управление структурой текста с помощью дескрипторов абзаца и перевода строки Когда вы помещаете на Web-странйцу неформатированный текст, число слов, отображаемых браузером на одной строке, определяется шириной окна браузера. Неформатированный текст — это просто текст, введенный в HTML-документ между начальным и конечным дескрипторами тела документа (), как показано в следующем коде: Глава 1. Основы языка HTML 49 npnMep неформатированного TeKCTa Мы помещаем в HTML-документ неформатированный текст. Не имеет значе- ния, как выглядит текст в HTML-документе, поскольку Web-браузеры не воспри- нимают возврат каретки или клавишу Enter как инструменты форматирования. 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-браузер отобразит этот текст в виде трех аб- зацев с пустыми строками между строками текста. В отличие от дескриптора <р>, дескриптор
не имеет конечного дескрип- тора. Обнаружив дескриптор
в HTML-коде Web-страницы, Web-браузер пе- реходит вниз на следующую строку на экране перед тем, как отобразить осталь- ной текст. Таким образом, дать Web-браузеру указание перейти на новую строку перед отображением следующего фрагмента текста можно с помощью либо деск- риптора
, либо дескриптора <р>. Если вы хотите просто перейти на следую- 50 Глава 1. Основы языка HTML щую строку, используйте дескриптор
; если же вы хотите перейти на следу- ющую строку и вставить пустую строку между текущей и следующей строками, вам нужно воспользоваться дескриптором <р>. Текст в приведенном ниже HTML-коде описывает, как работают дескрипторы <р> и
, а также как будет выглядеть этот текст в окне Web-браузера (см. рис. 1.13): IlpMMep форматированного TeKCTa <р>Вставляем в HTML-документ форматированный текст. <р> Расстановка дескрипторов абзаца и перевода строки в HTML-документе <Ьг> определяет обрывы строк в тексте. <р> Дескрипторы абзацев оставляют между строками текста пустую строку, а дескрипторы перевода строки разбивают текст без вставки
дополнительных пустых строк. Дескрипторы форматирования (такие как <р> и
) определяют, где закан- чивается строка текста в окне браузера. Говоря языком редактирования текста, дескриптор <Ьг> вставляет жесткий возврат каретки, а дескриптор <р> — два же- стких возврата каретки. I Web-браузер (как и текстовый процессор) выполняет мягкий возврат каретки для разбиения текста у правого поля на каждой странице. Помните, что в Web-докумен- те правая сторона окна браузера представляет собой правое поле Web-страницы. С помощью дескрипторов форматирования вы можете определить последнее слово в строке, однако Web-браузер все равно будет вставлять мягкие возвраты каретки, что- бы каждая строка текста помещалась по ширине в окно Web-браузера. айл Правка §ид Избранное Сервис Справка - J J Л Л jtl J -> Л Ы • Вставляем в HTML-документ форматированный текст. Расстановка дескрипторов абзаца и перевода строки в HTML-документе определяет обрывы строк в тексте. Дескрипторы абзацев оставляют между строками текста пустую строку, а дескрипторы перевода строки разбивают текст без вставки дополнительных пустых строк. Рис. 1.13. Текст в окне Web-браузера форматируется в зависимости от использования дескрипторов абзаца и перевода строки Глава 1. Основы языка HTML 51 Хотя, как говорилось выше, ширина строки текста определяется шириной окна браузера, существуют случаи, когда браузер не должен разбивать строку тек- ста. В таком случае нужно вставить запрет перевода строки ( ) между сло- вами, которые браузер должен отобразить вместе на одной строке. Например, вам нужно создать подзаголовок для абзаца текста и вы хотите, чтобы заголовок оставался на одной строке. Чтобы заставить браузер вывести слова на одной строке, вставьте запрет перевода строки между словами подзаголовка, как показа- но ниже: IIpHMep использования запрета перевода cTpoKn Послание АвраамаSnbsp;Линкольна <р>Эта страна с ее институтами принадлежит людям, которые ее населяют. <р>Если они устанут от существующего правительства, они могут прибегнуть к своему конституционному праву внести изменения в его состав, или к своему конституционному праву распустить или свергнуть его. ABpaaM Линкольн В данном примере запрет перевода строки, вставленный мтщ словами "Ав- раам" и "Линкольн", не позволяет Web-браузеру разбить имя и фамилию прези- дента на две строки. Если у браузера не хватает места на текущей строке, чтобы отобразить имя и фамилию вместе, браузер отобразит и имя, и фамилию на сле- дующей строке, как показано на рис. 1.14. Если бы в данном примере между именем и фамилией был просто пробел (а не запрет перевода строки), браузер отобразил бы имя на одной строке, а фами- лию — н файл Правке йид Избранное Сараис Справка .&дрес]ф http//Mml-webdesign/Chapter01/Figure01-Rhtm •{ щ Послание Авраама Линкольна Эта страна с ее институтами принадлежит людям, которые ее населяют. Если они устанут от существующего правительства, они могут прибегнуть к своему конституционному праву внести изменения в его состав, или же к своему конституционному праву распустить или свергнуть его. Авраам Линкольн J Рис. 1.14. Запрет перевода строки предотвращает вывод имени и фамилии на двух строках Глава 1. Основы языка HTML Изменение размера текста с помощью дескрипторов уровней заголовков и атрибута size дескриптора шрифта При создании Web-документа без указания размера шрифта Web-браузер ото- бражает текст с использованием своего размера шрифта по умолчанию. Значения по умолчанию, используемые браузерами для размера символов, могут быть раз- личными, однако в среднем составляют 12—14 пунктов, что примерно соответ- ствует размеру шрифта в этой книге. Чтобы вставить в Web-страницу заголовок и контролировать размер его текста, заключите текст заголовка между начальным и конечным дескрипторами уровня за- головка (от <ы>... до
...
). Число после буквы "Ь". в начальном деск- рипторе заголовка определяет относительный размер текста заголовка. Чем меньше число после "h", тем более крупным шрифтом будет выведен заголовок. ; >АКТИ1 Чтобы задать размер текста на странице с помощью дескрипторов заголовков, по- местите текст между начальным и конечным дескрипторами заголовка. Обнаружив конечный дескриптор заголовка в HTML-коде Web-страницы, браузер автомати- чески помещает идущий после дескриптора текст на следующую строку и возвра- щается к использованию своего размера шрифта по умолчанию. Ниже показаны шесть уровней размера заголовков, которые можно определить с помощью началь- ного дескриптора заголовка, как они отображаются в окне браузера: Заголовок 1 Заголовок 2 Заголовок 3 Заголовок 4 Заголовок 5 Заголовок 6 Второй способ изменить размер текста в HTML-документе — это воспользо- ваться атрибутом size в дескрипторе в виде , где л — число от 1 до 7. При использовании атрибута size, чем больше значение, тем больше размер текста — в противоположность дескрипторам заголовка, где с уве- личением л размер букв уменьшается. Чтобы задать текст с использованием атрибута size, поместите текст между начальным и конечным дескрипторами шрифта (). Ниже показан HTML-код дескриптора с атрибутом size, а также как выглядит в окне браузера текст каждого размера: Шрифт размера 2 Шрифт размера 3 Шрифт размера 4 Шрифт размера 5 Шрифт размера 6 Шрифт размера 7 Глава 1. Основы языка HTML . 5 3 И начальный дескриптор заголовка, и атрибут size в дескрипторе по- зволяют установить размер текста; начальный дескриптор заголовка, кроме того, дает Web-браузеру указание вывести текст полужирным. Следует иметь в виду, что разрешение монитора посетителя влияет на размер текста в окне Web-браузера. Текст на мониторе с разрешением 1024x768 пиксе- лей кажется меньше, чем текст такого же "размера" на мониторе с более низким разрешением, например 800x600 пикселей. Более того, на разных платформах текст может также отображаться разными размерами даже при одинаковых разре- шениях. На компьютерах Macintosh, например, текст отображается примерно на два пункта меньше, чем текст, отображаемый при том же разрешении на машине с Intel-архитектурой. В стандарте HTML 4 консорциум W3C не рекомендует применять дескриптор задания шрифта (). Поэтому будущие версии Web-браузеров, соот- ветствующие требованиям стандартов HTML, могут более не поддерживать этот дескриптор. Для управления форматированием текста лучше использовать CSS- таблицы, речь о которых пойдет в главе 4 данной книги. Изменение цвета текста в HTML-документе Без задания цвета текста на странице Web-браузер будет отображать текст цветом, заданным в нем по умолчанию, обычно черным. Если вы хотите изме- нить цвет слова или группы слов, воспользуйтесь атрибутом color в дескрипторе , чтобы сообщить Web-браузеру, какой цвет следует использовать. ПРАКТИКУМ Предположим, например, вы хотите изменить цвет одного предложения в абзаце. Поместите дескриптор с атрибутом вяАягт шищ> <йшй ссо1ог="цве!г"> пе- ред самым началом текста, цвет которого требуется изменить. Атрибут color дает браузеру указание отобразить заданным цветом текст, идущий после дескриптора. Ниже в тексте поместите дескриптор в том месте, где браузер должен бу- дет вернуться к своему цвету шрифта по умолчанию. Например, атрибут color в дескрипторе после первого предложения в следующем HTML-коде дает Web-браузеру указание отобразить второе предложе- ние красным цветом: Изменяем цвет текста в следующем предложении. Вставьте дескриптор задания шрифта с атрибутом color в начале и конце строки. Цвет изменится, а затем вернется к цвету по умолчанию - черному. Затем дескриптор после окончания второго предложения дает Web- браузеру указание прекратить использование красного, и при отображении ос- тального текста Web-страницы браузер снова использует цвет текста, установлен- ный в нем по умолчанию: 54 Глава 1. Основы языка HTML <ЪхЬ1е>Изменение цвета текста <р>Изменяем цвет текста в следующем предложении. -BcTaBbTe дескриптор задания шрифта с атрибутом color в начале и конце строки. Цвет изменится, а затем вернется к цвету по умолчанию - черному. Задать значение атрибута color можно с помощью названия или номера. Как вы видели в предыдущем примере, можно использовать названия цветов, такие, как красный (red), зеленый (green), синий (blue) и т.д. Также можно представ- лять цвета в виде шестнадцатеричных триплетов. Например, шестнадцатеричный триплет, соответствующий красному цвету, выглядит как #FFOOOO. Следовательно, дать указание браузеру отобразить текст красным цветом можно с помощью либо , либо . При задании цвета в виде шестнадцатеричного триплета числа в триплете обозначают количества красной, зеленой и синей составляющих цвета, которые 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-страницу с помощью базового дескриптора Путешествуя по Web-сайтам, нельзя не встретить-страницы, содержащие мно- жество фотографий и рисунков. Графические изображения оказывают существен- ную помощь при объяснении сложных процедур или действий, которые трудно описать с помощью одного лишь текста. Помимо этого, большинство посетите- лей вашего Web-сайта почувствуют себя несколько неуютно, не обнаружив там ничего, кроме текста. Рисунки, там и сям, вставленные в длинное тело докумен- та, дают посетителю передышку в чтении текста и, при правильном использова- нии, облегчают восприятие текста. Предположим, например, вы хотите создать страницу с описанием действий, которые необходимо предпринять для замены картриджа в струйном принтере Epson 1520. Несколько продуманных иллюстра- ций объяснят процедуру лучше, чем добрый десяток абзацев текста. Кроме того, посетители сайта могут изменить шрифт, используемый их брау- зерами по умолчанию для отображения текста Web-страницы, поработав с на- стройками браузера. Следовательно, текст Web-страницы будет выглядеть по-раз- ному у посетителей, у которых в качестве шрифта по умолчанию установлен Arial, и у посетителей, в браузерах которых шрифтом по умолчанию выбрана Helvetica. Хотя это и досадно, вы уже знаете, как предотвратить такую замену шрифта путем задания шрифта, который будет использоваться браузером, не ос- тавляя выбор шрифта браузеру посетителя. Настоящая проблема с выбором шрифта возникает тогда, когда вам нужно использовать специализированный или индивидуальный шрифт - как те, которые применяются, например, для на- писания названия компании в логотипе. Помните, что, если указанного шрифта нет на компьютере посетителя, браузер отобразит текст установленным в нем шрифтом по умолчанию. 56 Глава 1. Основы языка HTML Скажем, например, на вашем сайте имеется логотип, текст на котором набран шрифтом Skia. Если вы наберете логотип на Web-странице как текст, а в систе- ме посетителя шрифт Skia установлен не будет, браузер посетителя заменит его на свой шрифт по умолчанию, тем самым полностью изменив внешний вид ло- готипа. К счастью, точный вид логотипа (или иного текста) можно сохранить, преобразовав текст в графическое изображение (с помощью программы редакти- рования изображений вроде Photoshop). Если вы вставите в Web-страницу "кар- тинку" текста, текст будет выглядеть одинаково во всех Web-браузерах - даже на тех системах, где нет шрифта, использованного во время создания текста. При преобразовании текста в графическое изображение, настройки посетителя, опре- деляющие использование шрифтов, никак не влияют на текст на рисунке, что можно видеть на рис. 1.15. I Торгово-иэдательскийдом ДИАСОФТ J Рис. 1.15. Логотипы с текстом, преобразованные в графические изображения, корректно отображаются в Web-браузере ЩН| ПРАКТИКУМ Дескриптор позволяет поместить на Web-страницу графическое изображение (как преобразованный текст, так и фотографию или рисунок). Типовой дескриптор содержит единственный атрибут src, который сообщает Web-браузеру путь к графическому файлу. Следовательно, ваши дескрипторы вставки изображений будут в большинстве своем иметь вид . Обратите внимание, что значение атрибута src включает в себя как имя графического файла, так и путь к нему. Например, приведенный ниже код содержит указание извлечь и отобразить ри- сунок из файла photo,jpg, хранящегося в папке images на Web-сервере. Чтобы HTML-код был правильным, все дескрипторы должны быть по- мещены между начальным и конечным дескрипторами тела документа ( ), которые охватывают содержимое Web-страницы, выводимое на экран браузером. Приведенный ниже простой HTML-код, будучи обработанным брау- зером, выведет на экран графическое изображение house.jpg: <Ь±Ъ1е>Фотография flOMa Глава 1. Основы языка HTML 57 Наряду со вставкой простого дескриптора изображения в нужное место HTML-документа, вы также можете управлять изображением в окне браузера с помощью нескольких атрибутов: alt. Атрибут alt предоставляет альтернативный текст для браузеров, кото- рые не отображают графику, или браузеров, в которых отображение графи- ки отключено пользователем. Альтернативный текст также используется браузерами в качестве всплывающей подсказки (текст отображается в пря- моугольнике, всплывающем при наведении на изображение курсора мыши) и программами чтения для незрячих. • height и width. Атрибуты width (ширина) и height (высота) определяют размер рисунка в окне браузера. Всегда задавайте атрибуты height и width в своих дескрипторах вставки изображений, чтобы браузер мог отобразить остальное содержимое вашей Web-страницы, пока рисунки будут загружаться. Когда вы задаете в дескрипторе атрибуты height и width, браузер ре- зервирует пространство под рисунки, даже если они загружаются медленно, и текст документа будет обтекать предполагаемую область рисунка. border. Атрибут border (рамка) дает ширину (в пикселях) рамки, которую Web-браузер должен нарисовать вокруг изображения. Если вы используете рисунок в качестве привязки гиперссылки, браузер нарисует вокруг него рамку. Поэтому рамка вокруг рисунка может навести посетителя на мысль, что рисунок является гиперссылкой. Следовательно, значение атрибута border рекомендуется устанавливать равным нулю (0). Работа с графикой, а также анимацией и видеоклипами на Web-страницах подробно рассмотрена в главах 6 и 7. R Изображения - это непременный компонент Web-страниц. Однако Web- страницы с большим количеством графики дольше загружаются и отображаются, чем Web- страницы, содержащие только текст. Будьте осторожны, дабы не перегрузить свои Web-стра- ницы графикой. Картинка может стоить тысячи слов, но, если ваша страница слишком долго загружается, никто не будет ждать, чтобы увидеть, что вы хотели показать. Изменение выравнивания текста и графики Поскольку на большинстве Web-страниц присутствует как текст, так и графи- ческие изображения, выравнивание графики и текста в окне браузера представля- ет собой существенный элемент дизайна Web-страниц. По умолчанию Web-брау- зер размещает объекты HTML-документа в том же порядке, в котором он их находит. Более того, браузер помещает объекты на экран один за другим слева направо и снизу вверх. Предположим, например, вы хотите, чтобы браузер отображал рисунок над строкой текста, которая описывает рисунок. Если вы просто поместите в HTML- документ дескриптор , а затем наберете строку текста, браузер отобразит 58 Глава 1. Основы языка HTML текст рядом с документом (то есть справа от него), а не под рисунком. Помните, Web-браузер отображает элементы HTML-документа на экране один за другим слева направо. Браузер ставит элемент на новой строке слева, только достигнув правого поля текущей строки на странице. В приведенном ниже коде показан порядок расположения графических и тек- стовых элементов. Дескриптор <р> дает браузеру указание отобразить текст, иду- щий после рисунка, на строке под рисунком: <Ь1Ъ1е>Пример размещения текста и графики Покаэанные цветы - это дикорастущие растения равнин Канэаса Дескриптор , помещенный в HTML-документ перед текстом, дает Web- браузеру указание отобразить рисунок перед тем, как отображать текст. Помеще- ние дескриптора <р> между рисунком и текстом заставляет Web-браузер вставить символ перевода строки (то есть перейти на следующую строку на странице) и вставить пустую строку после вывода рисунка и перед выводом текста, который идет после рисунка в HTML-коде Web-страницы. На рис. 1.16 показано, как Web-браузер отобразит рисунок по отношению к тексту в данном примере. Обратите внимание, что правильно вставленный дескриптор <р> выравнивает рисунок и текст по вертикали. Однако вы можете также захотеть, чтобы браузер расположил рисунок и текст по центру между левым и правым полями Web-стра- ницы. Для работы с горизонтальным выравниванием объектов на Web-странице язык HTML предусматривает начальный и конечный дескрипторы выравнивания по центру (). Нужно понимать, что, хотя дескрипторы вырав- нивания по центру все еще используются, эти дескрипторы являются нерекомен- дованными, а значит, существует возможность того, что в будущем браузеры пе- рестанут их поддерживать. Предпочтительнее выравнивать текста и графику с помощью CSS-правил, о чем речь идет в главе 4. 3 Показанные цветы - это дикорастущие растения равнин Канзаса Рис. 1.16. Без выравнивания текст и графика сдвигаются в левую сторону окна браузера Глава 1. Основы языка HTML 59 ПРАКТИКУМ По умолчанию Web-браузер выравнивает первый объект на каждой строке, сдвигая его к левому краю Web-страницы. Для того чтобы изменить выравнивание по умолчанию и, таким образом, изменить горизонтальное положение объекта на строке или группе строк, применяется дескриптор . Начальный и конеч- ный дескрипторы выравнивания по центру () дают Web-брау- зеру указание отцентрировать изображение и текст, заключенные между дескрип- торами, между левым й правым полями Web-страницы, как показано на рис. 1.17: ||НГГР404Нвнайде ;tosoft Internet Explore : ?ейл • ?дрес|?] Зрввка. 0ид ^збрвнное Сервис ?лрввке hfip//html-webdesign/Chepter01/FigureO1-17htm Показанные цветы - это дикорастущие растения равнин Канзаса о Рис. 1.17. Начальный и конечный дескрипторы выравнивания по центру дают Web-браузеру указание отобразить графический и текстовый элементы по центру между левым и правым полями Web-страницы 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-странице символ ©•, нужно поместить б9; в HTML-код Web-страницы. Для часто употребляемых символов процедура упрощена: вместо числа можно вводить соответствующую символу текстовую последовательность. Например, в символьной записи символ © выглядит как &сору;. В приведенном ниже коде показано использование символа зарезервирован- ных прав в HTML-документе. При отображении специального символа запись &#ххх (где ххх — ASCII-значение, соответствующее данному символу) сообщает браузеру, какой специальный символ следует вывести на экран. На рис. 1.18 по- казан результат отображения Web-браузером следующего HTML-кода: <html> <head> <title>npKMep отображения символа зарезервированных npaB <р>Символ зарезервированных прав б9; указывает, что произведение находится под защитой законодательства об авторском праве. 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. В приведенном ниже HTML-коде дескрипторы
дают Web-браузеру указание поместить в окне горизонтальные линии, как показано на рис. 1.19: горизонтальных <Ъл.Ъ1е>Использование
Using ImageReady to Slice an Image

When you slice an image . . . остальной текст
Slicing an image has . . . остальной текст Глава 1. Основы языка HTML 65
Treat each individual ... остальной текст
However, it is just as ... остальной текст
You can accomplish this ... остальной текст

<ЬЗ>Примечания<ЬЗ> 1001 Photoshop Tips: Andy Anderson 2001
- Web Design Samp; HTML: Konrad King, Andy Anderson иа Йэбрвнное Сервис Справке . Адрес 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-страница, содержащая основной текст и примечания Помимо создания горизонтальной линии с помощью дескриптора
, мож- но создавать красивые линии, используя графические изображения. Ниже пока- зан пример использования линии-рисунка вместо горизонтальной линии, нари- сованной браузером: Примечания 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): 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 <Ь2>Загрузка программы l> <И>Вставьте компакт-диск в дисковод <И>Щелкните на пиктограмме "Пуск" <И>ЗагруэиФе программу <И>Играйте! Как показано в этом примере, чтобы обозначить упорядоченный список в HTML-коде Web-страницы, поместите элементы списка между начальным и ко- нечным дескрипторами упорядоченного списка (). Затем, чтобы доба- Глава 1. Основы языка HTML 69 вить в список элементы, поместите текст каждого элемента между начальным и конечным дескрипторами элемента списка (). По умолчанию Web-браузер отображает перед каждым элементом списка араб- скую цифру (1, 2, 3, 4, ...), причем первый элемент получает номер 1. Если вы хоти- те использовать вместо арабских цифр буквы или римские цифры, поместите в на- чальный дескриптор упорядоченного списка атрибут type, как указано ниже: • . Перечисляет элементы с использованием арабских цифр (по умолчанию). • . Перечисляет элементы с использованием букв нижнего регистра. • . Перечисляет элементы с использованием букв верхнего регистра. • . Перечисляет элементы с использованием римских цифр верхнего регистра. Чтобы начать упорядоченный список не с "Г1, ас другой цифры (или же не с 1Н а другой буквы) поместите в дескриптор атрибут start со значением, от- личным от " 1 " . Например, упорядоченный список, в начале которого стоит сле- дующий дескриптор , будет начинаться с буквы "е", поскольку "е" - пятая буква (английского) алфавита:
Аналогично, если вы присвоите атрибуту type значение ^| чтобы указать, что браузер должен ставить перед каждым элементом списка арабскую цифру, браузер начнет список с элемента под номером 5. Неупорядоченные списки позволяют создавать группы текста, в которых порядок элементов в списке не имеет значения, — например, список покупок/ Следующий HTML-код создает неупорядоченный список, также показанный на рис. 1.21: npMMep неупорядоченного cnncKa <Ь2>Список покупок <11>Молохр
Macaio
<1л>Чай Чтобы обозначить неупорядоченный список в HTML-коде Web-страницы, по- местите элементы списка между начальным и конечными дескрипторами неупо- рядоченного списка (). Как и в случае упорядоченного списка, для до- бавления элементов в неупорядоченный список следует поместить текст каждого элемента между начальным и конечными дескрипторами списка (). 70 Глава 1. Основы языка HTML По умолчанию Web-браузер отобразит в качестве маркера перед каждым эле- ментом неупорядоченного списка жирную черную точку (•). Если вы хотите, что- бы браузер использовал в качестве маркера другой символ, выберите символ для представления маркера с помощью атрибута type, как указано ниже: • . Маркирует элементы жирными черными точками (по умолчанию). • .MapKnpyeT элементы черными контурными квадратика- ми. • . Маркирует элементы черными контурными точками (незаполненными окружностями). Создание вложенных списков Из предыдущего практикума вы узнали, как создавать упорядоченные и не- упорядоченные списки. Можно также создавать упорядоченные и неупорядочен- ных списки внутри других списков; иными словами, можно создать вложенный список (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-код описывает вставку показанного выше вложенного списка: <ЫЪ1е>Пример упорядоченного вложенного cnnCKa Глава 1. Основы языка HTML <Ь2>Загруэка программы <И>Вставьте компакт-диск в привод компьютера. <11>Щелкните на пиктограмме "Пуск" . <И>Загрузите программу : '
<11>Выполните двойной щелчок на пиктограмме игры. <1л.>Введите серийный номер. <1х>Щелкните на кнопке "Готово". ш <1х>Играйте! В данном примере вложенный список представляет собой упорядоченный список, определенный начальным и конечными дескрипторами упорядоченного списка (). Упорядоченный список является вложенным, поскольку на- чальный и конечный дескрипторы упорядоченного списка () находят- ся внутри внешней пары начального и конечного дескрипторов упорядоченного списка (). (Фразы между начальным и конечными дескрипторами эле- мента списка () выводятся на экран в виде элементов каждого списка (и внешнего, и вложенного).) Хотя кодирование вложенных списков может показаться сложным, при созда- нии вложенного списка вы следуете тем же правилам, что и при создании внеш- него списка. Определите вложенный список между парой начального и конечно- го дескрипторов упорядоченного списка () или между парой начального и конечного дескрипторов неупорядоченного списка (). За- тем добавьте элементы во вложенный список, вставляя текст между парами на- чальных и конечных дескрипторов элементов списка (), вставленных после определения элемента списка во внешнем списке. Помните, что и упоря- доченные, и неупорядоченные списки можно вкладывать во внешний список (который может быть упорядоченным или неупорядоченным списком). Создание списков определений Ранее в этой главе вы узнали, как создавать упорядоченные и неупорядочен- ные списки, равно как и вкладывать один список в другой. Помимо элементов, организованных в маркированные и нумерованные списки, язык HTML также позволяет создавать списки определений. Как следует из названия, список опре- делений {definition list) — это список терминов, после каждого из которых приво- дится его определение. Web-браузер выводит определение на следующей строке под определяемым термином с отступом вправо, как показано на рис. 1.23. Список определений — это единственный тип списка, в котором индивиду- альные элементы списка не идентифицируются начальными и конечными деск- рипторами элемента списка (). Вместо этого для создания списков оп- ределений используются два новых дескриптора: . Начальный и конечный дескрипторы термина обозначают тер- мин, описание или определение которого будет дано. (Начальный и ко- 72 Глава 1. Основы языка HTML Рис. 1.23. Список определений, состоящий из двух элементов и их описаний Основы языка HTML Базовые HTML-дескрипторы HTML-дескрипторы - это команда!, которыми руководствуется Web-браузер при отображении информации в своем окне. HTML-дескрипторы поддерживаются как Macintosh-, так и Windows-версиями стандартных приложен и й-браузеров. Значение дескриптора title Дескриптор title (дескриптор названия) предоставляет описание Web-страницы для посетителей Web-сайта. Название Web-страницы отображается в строке заголовка окна Web-браузера. J нечный дескрипторы термина действуют аналогично начальному и конеч- ному дескрипторам элемента списка, с помощью которых обозначаются индивидуальные элементы в упорядоченных и неупорядоченных списках.) . Начальный и конечный дескрипторы описания обозначают один или более Чтобы создать на Web-странице список определений, поместите термины и опре- деления между начальным и конечными дескрипторами списка определений (). Например, следующий HTML-код создает список определений, со- стоящий из двух терминов: 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 76 Глава 1. Основы языка HTML Как видно из кода этого примера, страница определения фреймов не включает в себя HTML-код всех страниц, которые вместе выводятся на экран. Web-страница определения фреймов просто дает Web-браузеру указание отображать Web-страницы в фреймах, определенных начальным дескриптором* задания фреймов (). В данном примере страница определения фреймов дает 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) на экране одновременно: 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 Если 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 Ре ?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-таблицы • . Уведомляет Web-браузер, что с текстом, заключенным между начальным и конечным дескрипторами, нужно обращаться как с таблицей. • (строка таблицы — table row). Уведомляет Web-браузер, что он должен поместить элементы данных и, возможно, заголовки между началь- ным и конечным дескрипторами в отдельную новую строку таблицы. • (данные таблицы — table data). Уведомляет Web-браузер, что HTML-дескрипторы, атрибуты и текст (если таковой имеется) между началь- ным и конечными дескрипторами являются содержимым (иными словами, данными), которое Web-браузер должен отобразить в столбце таблицы. Например, чтобы Web-браузер отобразил показанную на рис. 2.4 простую таблицу, состоящую из трех столбцов и двух строк, вам потребуется написать следующий код: K/td>

2 3 4 5 6
1. 4 2J 51 J 6 Рис. 2.4. Простая таблица, содержащая две строки и три колонки А В Как было сказано в перечне перед HTML-кодом табли- цы, начальный и конечный дескрипторы таблицы () в начале и конце кода сообщают Web-браузеру, что HTML- код и прочий текст между этими дескрипторами описывает таблицу. (Пока что не обращайте внимания на атрибут border; его мы рассмотрим в следующем разделе этой главы.) Каждая пара начальных и конечных дескрипторов строки () дает Web-браузеру указание отобразить содержимое между ними в одной и той же новой (горизонтальной) строке таблицы. Тем временем каждая пара начальных и конечных дескрипторов данных таблицы () определяет каждую из ячеек таблицы, а заклю- ченное между ними содержимое сообщает Web-браузеру, что именно поместить в ячейку. Таким образом, чтобы создать показанную на рис. 2.5 таб- лицу с двумя столбцами и тремя строками, вам понадобятся три набора начальных и конечных дескрипторов строки табли- цы () и два набора начальных и конечных дескрип- торов данных таблицы (), как показано ниже: A

B C D E F< / t d X / tr >
С D Рис. 2.5. Простая таблица, содержащая три строки и две колонки Глава 2. HTML-таблицы 85 Как и в случае с предыдущим примером, первая строка кода в данном приме- ре содержит дескриптор , который сообщает Web-браузеру, что весь пос- ледующий HTML-код, считываемый браузером до тех пор, пока не встретится дескриптор , является частью определения HTML-таблицы. Вторая строка кода выглядит так: A Всякий раз, когда браузер считывает внутри определения таблицы дескриптор , он должен перейти на новую строку таблицы, тогда как дескриптор , следующий за дескриптором , дает браузеру указание поместить все считан- ное им до дескриптора в одну ячейку таблицы. Следовательно, в данном примере первый дескриптор дает Web-браузеру указание поместить "А" В первую слева ячейку в новой строке таблицы, начатой браузером после обработ- ки дескриптора , стоящего перед дескриптором . Третья строка кода в HTML-таблице в данном примере выглядит так: B Поскольку перед вторым дескриптором нет дескриптора , Web-брау- зер помещает все, что заключено между второй парой начального и конечного дескрипторов данных таблицы () (в данном примере "В") во вторую (вправо) ячейку первой строки таблицы. (Если бы перед дескриптором имелась третья пара начального и конечного дескрипторов данных таблицы (), Web-браузер поместил бы все, что находилось бы между этими дес- крипторами, в третью ячейку (вправо) первой строки таблицы и т.д.) Дескриптор говорит браузеру: "Все. В текущей строке больше ячеек нет", после чего браузер ожидает увидеть либо новый дескриптор , либо дескриптор . В данном примере структура < t r x t d x / t d x t d x / t d x / t r> повторя- ется еще два раза (таким образом, отдавая браузеру указание создать еще две строки по две ячейки (или столбца) каждая) перед тем, как дескриптор в последней строке кода просигнализирует об окончании определения HTML-таблицы. Добавление границ, заголовков столбцов/строк и заголовка таблицы Если вы хотите воспользоваться HTML-таблицей для отображения табличных данных (вместо применения таблицы в качестве инструмента компоновки стра- ницы, о чем пойдет речь ниже в этой главе), вам нужно будет нарисовать грани- цы вокруг таблицы и каждой из ее ячеек и добавить заголовок (название) табли- цы, который будет резюмировать данные, содержащиеся в таблице. Более того, в большинстве своем табличные данные включают в себя строку и/или столбец за- головков, которые сообщают читателю значение элементов в отдельной строке или столбце (либо же отношения между ними). На рис. 2.6, например, показана таблица с видимыми границами, заголовками столбцов и заголовком таблицы. 86 Глава 2. HTML-таблицы Fife Edit Viem Fsvaites Iooh Help LMu * Ш ^ . "' • J Ld Ы S4 BacK : Stop Reffcsh Home Search Дескрипторы и атрибуты, используемые дня создали* таБтш НТМ^дгсэсрюггор/атрнбут Олнсашк
Начало и когеы опредытеиия таблицы. ; Начаш и конец определения элемента данных таблицы. | border Ширина (Б пикселях) границ по перкнетру таблицы и ее ячеек.:; ; <С АРТЮЫ> Начало и конец текста заголовки таблицы. <ТН>*<Л*Н> :Начшю н конец текста заголовка столбца/строки табгащы. Й~Оопв • - | 4v Computer . , ,,, Рис. 2.6. Таблица для отображения информации в табличном формате В HTML-дескрипторе определения таблицы предусмотрен атрибут border (граница), с помощью которого можно дать Web-браузеру указание отобразить границу вокруг таблицы и вокруг каждой из ее ячеек. Кроме того, с помощью начального и конечного дескрипторов заголовка таблицы () можно задать название (или заголовок) таблицы, а с помощью начального и ко- нечного дескрипторов заголовков столбцов/строк () дать Web-браузеру указание отформатировать содержимое ячейки в виде заголовка: border. Атрибут дескриптора , сообщающий Web-браузеру число пикселей — ширину границы, которую браузер должен нарисовать вокруг таблицы и каждой ее ячейки. • . Дает Web-браузеру указание применить к тексту между начальным и конечным дескрипторами стиль заголовка (большин- ство браузеров используют для этого полужирный шрифт). • . Сообщает Web-браузеру, что текст между начальным и конеч- ным дескрипторами должен быть отформатирован как текст заголовка (большинство браузеров используют для этого полужирный шрифт). Дескрипторы заголовков таблиц и столбцов/строк особенно важны для незря- чих, поскольку браузеры, разработанные для пользователей с ослабленным зре- нием, будут произносить по-иному их, чтобы провести различие между заголов- ками таблицы и столбцов/строк и данными таблицы. Кроме того, в дескриптор можно включить атрибут summary (резюме), чтобы предоставить более подробное описание назначения таблицы для посетителей, пользующихся брау- зерами на основе речевого или Брайль-интерфемса. Чтобы отобразить таблицу с границами, заголовком и заголовками столбцов вроде той, которая показана на рис. 2.6, сначала нужно изменить дескриптор таблицы , включив в него атрибут border, которому присваивается ши- рина в пикселях границы таблицы. Например, чтобы нарисовать границы шири- ной 1 пиксель (как у таблицы на рис. 2.6), дескриптор таблицы должен будет выглядеть следующим образом:
Глава 2. HTML-таблицы 87 Затем, чтобы снабдить таблицу названием (заголовком), в определение табли- цы сразу же после дескриптора нужно вставить начальный и конечный дескрипторы заголовка таблицы (). Таким образом, первая строка кода (с одним лишь дескриптором ) в предыдущем примере пре- вращается в следующие две строки кода, которые дают Web-браузеру указание нарисовать таблицу с границами шириной 1 пиксель и заголовком: border="l"> <сарЪ1оп>Дескрипторы и атрибуты, используемые для создания таблиц Примите к сведению, что в новейших спецификациях языка HTML (начиная со стандарта HTML 4.01) указано, что элемент caption, если таковой присут- ствует, должен следовать сразу же за открывающим дескриптором . Затем, чтобы поместить вверху каждого столбца таблицы заголовок, вставьте начальные и конечные дескрипторы заголовков столбцов/строк таблицы () с текстом заголовков между ними после дескриптора , начинающего строку, в которой должны быть отображены заголовки. Например, чтобы доба- вить заголовок над каждым столбцом в таблице из двух столбцов, вам нужно бу- дет написать следующий код:

<сарЪд.оп>Дескрилторы и атрибуты, используемые для создания таблиц HTML-flecKpnnTop ). Например, приведенный ниже HTML-код с двумя парами — начальным и конечным - дескрипторов заголовков столбцов/строк таблицы () после одного дескриптора , дает Web-браузеру указание создать таблицу с двумя заголовками в разных столбцах одной и той же строки:
OnncaHne Чтобы добавить вместо строки заголовков столбец заголовков, добавьте пару (начальный и конечный) дескрипторов заголовка столбца/строки (), между которыми заключен текст заголовков, в каждую строку элементов данных, обозначенную начальным и конечным дескрипторами строки таблицы (

3aronOBKM, расположенные в CTpoi 3aronoBOK <Й1>Заголовок a4pdica 1,
CTpOKa, 1, э CTpOKa 2, CTpoKa 2,
K/th> элемент элемент элемент элемент /tr> K/td> 2 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-странице, вам потребуется проделать две вещи. Во-первых, нужно "скрыть" границы таблицы. Во-вторых, вы должны иметь возможность контролировать размеры таблицы и размеры ячеек в таблице. Вы уже знаете, как сделать границу таблицы невидимой — просто не вклю- чайте в дескриптор таблицы атрибут border. Или же, если вы хотите, чтобы "невидимость" (иными словами, ширина, равная 0 пикселей) границ таб- лицы была задана явным образом, а не "подразумевалась", запишите дескриптор следующим образом: Если ширина и высота ячеек таблицы не указаны, Web-браузер изменяет их размеры в соответствии с помещенными в них данными. Браузер установит ши- рину каждого столбца равной ширине самого широкого объекта в ячейках столб- ца. Аналогично, высоту каждой строки Web-браузер установит в соответствии с высотой самого "высокого" объекта в строке. Минимальные высота и ширина ячейки, содержащей графическое изображение — это размеры графического изоб- Глава 2. HTML-таблицы 89 ражения. Минимальная ширина ячейки с одними лишь текстовыми данными — это число символов в самом длинном слове или числе, а минимальная высота — высота самого высокого символа. Создание таблиц с ячейками, объединяющими несколько столбцов и несколько строк Ранее в этой главе вы научились создавать ячейки таблицы с помощью начальных и конечных дескрипторов заголовков столбцов/строк таблицы () и начальных и конечных дескрипторов данных таблицы (). Вы также узнали, как задавать атрибуты width (ширина) и height (высота) в дескрипторах Если бы ячейка объединяла три столбца, значение атрибута coispan было бы установлено равным "3" и т.д. Помните: если вы задали атрибут coispan для ячейки равным "2", между начальным и конечным дескрипторами строки табли- цы () для текущей строки вы должны набрать на одну пару дескрипто- ров или меньше, поскольку количество ячеек (или столб- цов) в строке на одну меньше обычного. Например, в строке 2 в следующей таблице с тремя строками, тремя столбцами только две пары начальных и конеч- ных дескрипторов данных таблицы (), поскольку первая ячейка в стро- ке обладает шириной двух ячеек: Глава 2. HTML-таблицы
и для определения размеров ячейки. Если ячейки таб- лицы вы определяете без атрибута ceiispan или атрибута гowspan, все ячейки в строке будут иметь одинаковую высоту, а все ячейки в столбце будут иметь оди- наковую ширину, как ячейки в таблице, показанной на рис. 2.8. ?dt View Fsvorte* loots ' Stop' Refresh а Seaich .•Строка 1, столбец! ;|СтрогаX столбец 1 ; [Строка 3, столбец 1 Табтпща с одкночншш хче$а&ми Стш*еиЭ Сто.п6гц4 •Строга 1, столбец 3 !Строка 1, |Строга 1, столбец 2 столбец 4 Строга 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 в дескрип- торе или ячейки. Для данного примера, где ячейка объединяет две строки, потребовалось бы написать следующий код: ="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", в определении таблицы между следующей парой дескрипторов строки таб- лицы () вы должны набрать на одну пару дескрипторов меньше, поскольку в "следующей" строке на один столбец меньше. Например, строка 2 в следующей таблице с тремя строками и двумя столбцами имеет толь- ко одну пару начальных и конечных дескрипторов данных таблицы (), поскольку первая ячейка из строки 1 распространяется и на вторую строку: cTpoKa 1 и 2 , столбец К/1

CTpoKa 1, столбец 2 <Ьс1>строка 2, столбец 3 CTpoKa 3, столбец K/td> CTpoKa 2, столбец 3
Аналогично, если вы хотите создать ячейку, объединяющую несколько столб- цов, как, например, вторая ячейка слева в нижней строке таблицы на рис. 2.9, ука- жите в дескрипторе или ячейки атрибут coispan. Для данного примера, в котором ячейка объединяет два столбца, определение ячейки запишется так: CTpoKa 4, столбец 2 и 3
CTpoKa

crpoKa CTpoKa 1, 1, 1, столбец столбец столбец строка ; cTpoKa c трока cтрока cтрока
2, 3, 3, 3, столбец столбец столбец столбец K/td> 2 3 2, столбец 1 и 2 2 K/td> 2 3 И, наконец, вы можете создать ячейку, объединяющую и несколько строк, и несколько столбцов, как, например, вторая ячейка сверху на правой стороны таб- лицы на рис. 2.9, задав в дескрипторе или ячейки оба атрибута — и coispan, и rowspan. Для текущего примера, в котором ячейка объединяет две строки и два .столбца, определение ячейки запишется так: установлено равным " 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 в дескрипторе воздействует и на рамку таблицы, и на линейки ячеек. На- пример, задание border="0" подразумевает frame="void" (рамки нет) и ruies="none" (линеек нет) — что, в сущности, делает все границы снаружи и внутри таблицы невидимыми. Во время рассмотрения каскадных таблиц стилей (CSS) в главе 4 вы увидите, что новейшие Web-браузеры позволяют управлять ат- рибутами ячеек отдельно от атрибутов таблицы в целом. Вы научитесь создавать CSS-правила, позволяющие задавать ширину и цвет рамки таблицы независимо от линеек (то есть границ) вокруг ячеек таблицы. ПРАКТИКУМ Ранее в этой главе вы узнали, как нарисовать границу шириной в 1 пиксель вок- руг таблицы и ячеек внутри таблицы, задав атрибут border в дескрипторе таблицы следующим образом: Чтобы увеличить ширину границы таблицы, просто увеличьте число пиксе- лей, присвоенное атрибуту border в дескрипторе таблицы. Например, чтобы нарисовать вокруг таблицы границу шириной 10 пикселей, установите значение атрибута border в дескрипторе равным "Ю11; результирующая таблица показана на рис. 2.11.
Табпицас границейв 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) — это видимая линия по периметру таб- лицы и вокруг каждой из ячеек внутри таблицы. Границы таблицы и ячеек име- ют два атрибута, которые вы можете задать — ширина (с которой вы работали в ходе предыдущего практикума) и цвет. Чтобы настроить цвета границ ячеек и таблицы, вставьте в дескриптор таблицы атрибут bordercoior. Напри- мер, чтобы Web-браузер нарисовал темно-синюю границу шириной 10 пикселей вокруг таблицы и темно-синюю границу шириной один пиксель вокруг каждой из ее ячеек, задайте атрибут атрибут bordercoior в дескрипторе табли- цы следующим образом:
К сожалению, задание атрибута bordercoior не приводит к одному и тому же эффекту во всех Web-браузерах. При установке атрибута bordercoior равным и#оооо8В", например, Netscape Navigator нарисует границы таблицы и ячеек дву- мя цветами - две стороны голубым и две стороны темно-синим. Internet Explorer же поддерживает два дополнительных атрибута для управления цветами границы: bordercoioriight (цвет границы — светлый) и bordercoiordark (цвет грани- цы — темный). Если вы установите только значение bordercoior, Internet Explorer нарисует границы таблицы и ячеек, используя только один цвет — в данном примере темно-синий. (В главе 4, речь в которой пойдет о CSS, вы на- учитесь создавать CSS-правила, позволяющие управлять атрибутами рамки (то есть границами вокруг таблицы) независимо от атрибутов границ вокруг ячеек.) ПРАКТИКУМ Если вы хотите, чтобы Internet Explorer использовал два разных цвета при рисо- вании границ таблицы, вам нужно либо опустить атрибут bordercoior из деск- риптора (тогда Web-браузер будет использовать границы по умол- чанию — светло-серые/темно-серые), либо задать в дескрипторе атрибуты bordercoioriight и bordercoiordark. Например, Internet Explorer проигнорирует задание bordercoior в нижеприведенном дескрипторе и будет использовать значения, присвоенные атрибутам bordercoioriight и bordercoiordark, нарисовав верхнюю и левую стороны границы таблицы голу- бым, а нижнюю и правую стороны границы таблицы — темно-синим:
Атрибуты bordercolorlight И bordercolordark В вышеприведенном КОДе также дают Internet Explorer указание нарисовать верхнюю и левую стороны гра- ниц вокруг каждой ячейки голубым, а нижнюю и правую стороны границы — темно-синим. 94 Глава 2. ^ Включив в дескриптор
и атрибут 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 в дескрипторе , как показано ниже, вы можете окрасить верхнюю (top) и левую (left) стороны таблицы в тем- но-синий, в то же время сделав нижнюю (bottom) и правую (right) стороны таб- лицы голубыми:
Хотя атрибут style в данном примере устанавливает один цвет для верхней и левой сторон и другой цвет для нижней и правой сторон, можно установить каждое из четырех свойств border-color внутри атрибута style равным своему собственному цвету. Чтобы задать один и тот же цвет для всех четырех сторон таблицы, установите значение свойства border-color равным желаемому цвету следующим образом:
Точно так же, как вы вставляете атрибут style в дескриптор для ра- боты с цветами сторон таблицы, вы можете вставить style в дескриптор
, чтобы таким же образом управлять цветами сторон ячейки. Например, окрасить стороны ячейки в красный, синий, зеленый и пурпурный можно путем задания атрибута style в дескрипторе : Аналогично, чтобы задать один и тот же цвет для всех сторон ячейки, напри- мер, красный, используйте свойство border-color следующим образом: Имейте в виду, что использование свойства border-color для задания одного и того же цвета для всех четырех сторон таблицы или всех четырех сторон ячей- ки на самом деле дает вам два цвета. Если речь идет о сторонах таблицы, и Internet Explorer, и Netscape Navigator нарисуют верхнюю и левую стороны ука- занным вами цветом, а нижнюю и правую стороны — более темным тоном того же цвета. Аналогично, когда вы задаете с помощью border-color один цвет для всех сторон ячейки, оба браузера отобразят нижнюю и правую стороны ячейки указанным вами цветом, а верхнюю и левую стороны ячейки — более темным то- ном того же цвета. Глава 2. HTML-таблицы 95 Работа с фоновыми изображениями и цветами Значение, присвоенное атрибуту bordercoior в дескрипторе , изме- няет цвет границы вокруг таблицы и границ вокруг ячеек - за исключением тех ячеек, дескрипторы которых содержат свои собственные атрибуты bordercoior. Следовательно, если вы хотите, чтобы Web-браузер нарисовал зеле- ную границу вокруг отдельной ячейки в таблице - вне зависимости от цвета гра- ниц вокруг других ячеек в таблице или вокруг самой таблицы -добавьте атрибут bordercoior в дескриптор ячейки. Например, чтобы дать Web-браузеру указание нарисовать зеленую границу вокруг ячейки, дескриптор этой ячейки должен выглядеть следующим образом: Для Internet Explorer, в частности, можно указать цвета границы ячейки сле- дующим образом, чтобы верхняя и левая стороны ячейки были нарисованы зеле- ным цветом, а нижняя и правая стороны — светло-зеленым: Хотя все 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 в дескрипторе . В связи с этим разрабатывайте свои таблицы в соответствии с предположением, что многие из посетителей вашего Web-сайта будут видеть границу вокруг каждой ячейки того же цвета (цветов), что и граница по периметру самой таблицы. Поскольку фоновые изображения и цвета — это "атрибуты" таблицы или ячейки внутри таблицы, они задаются (в форме атрибута border) как часть HTML-дескриптора. (Элементы Web-страниц, такие как таблицы, строки, данные и т.д., имеют свои собственные HTML-дескрипторы, тогда как атрибуты всегда находятся внутри HTML-дескрипторов.) Поскольку и таблица, и каждая из ее ячеек имеют фон, который можно задать независимо, пожалуй, самый простой способ понять, как взаимодействуют между собой фон таблицы и фон каждой из ее ячеек — это представлять их себе как накладываемые друг на друга. На рис. 2.12, например, показаны четыре таблицы. Две таблицы в верхней части рисунка суть таблица с фоновым цветом и таблица с фоновым изображением. Две табли- цы в нижней части рисунка показывают, что произойдет, если дать Web-браузеру указание нарисовать некоторые из ячеек таблицы с фоновым цветом или фоно- вым изображением. Фон таблицы — это прямоугольный объект, лежащий поверх Web-страницы, по- добно подложке в кадре. Отдельные объекты данных прямоугольной формы внутри таблицы — определенные начальным и конечным дескрипторами данных таблицы () — называются ячейками (cells). Таблица лежит поверх фона Web-страни- цы; каждая из ячеек таблицы представляет собой прямоугольный объект, лежащий поверх фона таблицы. Содержимое, помещаемое в ячейку (путем помещения текста и/или HTML-дескрипторов между начальным и конечным дескрипторами данных таблицы () ячейки), в свою очередь, лежит поверх фона ячейки. 96 Глава 2. HTML-таблицы Ш Создание таблицы с фоновыми рисунками и цвет ?« Уях Fjvales look tjdp • Back j Stop Rshesh • Ho Soacch Fevaie» Meter Фоновый цвет и фоновый рисунок ячейки га фоновой цвете фоновый цвет н фоновый рисунок ячейки на фоновом рисунке таблицы ; $ My Compute Рис. 2.12. Таблица с фоновыми цветами и изображениями, накрытая ячейками с фоновыми цветами и изображениями 1РАКТИКУМ ^ЗВЯВВВНВВВНВВВ Когда вы указываете цвет фона таблицы, задавая атрибут bgcolor в дескрипторе таблицы, Web-браузер "закрашивает" присвоенным атрибуту цветом по умолчанию прозрачный фон таблицы. Например, в следующем дескрипторе атрибут bgcolor, установленный равным шестнадцатеричному значению "#OOOOFF", дает Web-браузеру указание закрасить фон таблицы голубым цветом: Аналогично, если задать в дескрипторе атрибут background, Web- браузер будет использовать графический файл, присвоенный атрибуту, в качестве "обоев" для фона таблицы. Например, в следующем коде атрибут background дает Web-браузеру указание "накрыть" фон таблицы рисунком из файла picture.gif, который хранится в подпапке images Web-сайта:
Поскольку каждая из ячеек таблицы, как и сама таблица, имеет фон, цвет фона или фоновое изображение ячейки задаются в виде атрибута в дескрипторе
ячейки. Следовательно, независимо от фонового цвета или изображения (если таковые имеются), установленного для таблицы, вы можете дать Web-брау- зеру указание закрасить фон таблицы определенным цветом, присвоив значение этого цвета в виде шестнадцатеричного числа атрибуту bgcolor в дескрипторе ячейки. Например, шестнадцатеричное значение и#оооо8В", присвоенное атрибуту bgcolor в следующем дескрипторе , дает Web-браузеру указание закрасить фон ячейки темно-синим цветом: Глава 2. HTML-таблицы 97 Аналогично, если задать в дескрипторе ячейки атрибут background, Web-браузер будет использовать файл, присвоенный атрибуту, в качестве "обоев" для фона ячейки. Например, в следующем дескрипторе атрибут background дает Web-браузеру указание "накрыть" фон ячейки рисунком из файла picture.gif, который хранится в подпапке images Web-сайта: Хотя синтаксис HTML этому не препятствует, не имеет смысла задавать и цвет фона, и фоновое изображение для одной и той же таблицы или ячейки. Если же вы зададите и цвет, и изображение, "победу" одержит тот атрибут, ко- торый будет стоять в дескрипторе последним — примерно так же, как при поклейке обоев на окрашенную стену или покраске обоев. То, что наклады- вается на фон последним (иными словами, верхний слой), и будет видеть пользователь. И напротив, если в дескрипторе ячейки нет ни атрибута background, ни атрибута bgcolor, Web-браузер нарисует фон ячейки так, как будто это прозрачный лист стекла, лежащий поверх фона таблицы. Следователь- но, "сквозь" прозрачный фон ячейки будет виден фон таблицы. Подобным образом, поскольку фон таблицы лежит поверх фона Web-страни- цы, фоновое изображение или цвет таблицы скрывают цвет или рисунок, ис- пользуемый в качестве фона Web-страницы. И наоборот, если в дескрипторе таблицы не задан ни атрибут background, ни атрибут bgcolor, Web-бра- узер нарисует фон таблицы так, как будто это прозрачный лист стекла, лежащий поверх фона Web-страницы. Следовательно, "сквозь" прозрачный фон таблицы будет виден фон Web-страницы. Кстати, несмотря на то, что это могло бы ока- заться довольно-таки оригинальным эффектом, если вы не зададите ни цвета, ни изображения для фона Web-страницы, вы не будете видеть "подложку" своего монитора. Вместо этого Web-браузер установит белый либо серый фон Web-стра- ницы — в зависимости от настроек по умолчанию браузера. Хотя браузеры в настоящее время поддерживают атрибут background в деск- рипторах и , стандарт HTML не разрешает использовать атрибут background ни с дескриптором , ни с дескриптором . Более того, атрибут bgcolor — нерекомендованный с момента появления HTML 4.01 — офи- циально объявлен незаконным в стандарте XHTML 1.0. Для задания фонового изображения таблицы либо ячейки действующие стандарты HTML (и XHTML) требуют применять свойство CSS background-image. Например, чтобы указать изображение, которое Web-браузер должен использовать в качестве фона табли- цы, в дескриптор нужно вставить атрибут style, как показано ниже: Аналогично, чтобы задать фоновое изображение для ячейки, установите зна- чение свойства background-image с помощью атрибута style в дескрипторе
следующим образом: 9 8 Глава 2. HTML-таблицы Свойство CSS background-color позволяет выбрать цвет для фона таблицы и/или фона любой ее ячейки. Например, чтобы задать в качестве цвета фона таблицы ЦВеТ МОРСКОЙ ВОЛНЫ, НУЖНО уСТаНОВИТЬ СВОЙСТВО background-color В дескрипторе следующим образом: Аналогично, чтобы задать в качестве цвета фона ячейки таблицы темно-си- ний, например, необходимо с помощью атрибута style установить значение свойства background-color в дескрипторе
следующим образом: Определение значения цветового атрибута Всякий раз, когда вы используете один из атрибутов выбора цвета, такой как bordercolor, bgcolor, bordercolorlight, bordercolordark И Т.Д. В HTML-Деск- рипторе для задания цвета элемента, вы указываете нужный вам цвет в виде шес- тнадцатеричного числа. Например, чтобы создать таблицу со светло-желтым фо- ном, необходимо указать атрибут bgcolor в дескрипторе таблицы следующим образом: Аналогично, чтобы нарисовать темно-синюю границу по периметру таблицы и вокруг каждой ячейки в таблице, следует задать атрибут bordercolor в деск- рипторе таблицы следующим образом:
задает темно-синий цвет границ таблицы, значение 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 Новый вТекущий Рис. 2.13. Закладка < • диалогового окна Colors (Цвета) редактора Microsoft Wo Если содержимое закладки 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 оказывают влияние на все ячейки в таблице, оба атрибута устанавливаются в дескрипторе табли- цы. По умолчанию и cellspacing, и ceiipadding имеют значение больше нуля. Например, если вы опустите оба атрибута из дескриптора , Internet Explorer оставит интервал шириной в два пикселя между каждой ячейкой и меж- ду границами таблицы и ее ячеек. Следовательно, в Internet Explorer по умолча- нию cellspacing равен двум (2). Аналогично, если ceiipadding не задан, Internet Explorer оставит интервал шириной в один пиксель между границей каж- дой ячейки и ее содержимым. Чтобы увеличить интервалы между ячейками в таблице, установите атрибут cellspacing в дескрипторе таблицы равным значению больше 1. На- пример, установка атрибута cellspacing равным десяти (ю) в следующем коде дает Web-браузеру указание оставить интервалы шириной 10 пикселей между каждой из ячеек таблицы и между границей таблицы и ее ячейками:
Глава 2. Аналогично, если вы хотите увеличить интервалы между сторонами ячейки и ее содержимым, задайте соответствующее значение атрибута ceiipadding. (В данном примере Web-браузер по-прежнему оставит интервал шириной только в один пиксель между границей ячейки и ее содержимым, поскольку в дескрипто- ре не указан атрибут ceiipadding.) Чтобы Web-браузер оставил между сторонами ячейки (то есть границей вокруг ячейки) и ее содержимым интервалы шириной пять пикселей, предыдущий дескриптор следует записать так:
Web-браузер, в свою очередь, изменит размеры таблицы (и ее ячеек) так, что- бы таблица заняла все его окно. Иными словами, Web-браузер будет делать таб- лицу (и ее ячейки) больше, если посетитель Web-сайта увеличат окно браузера, и будет делать таблицу (и ее ячейки) меньше, когда посетитель сайта уменьшит размеры окна браузера. Если вы не хотите, чтобы Web-браузер изменял размеры таблицы в зависимо- сти от размеров окна браузера, задайте высоту и ширину таблицы в виде фикси- рованного числа пикселей. Например, чтобы Web-браузер каждый раз рисовал таблицу шириной 764 пикселя и высотой 558 пикселей, запишите дескриптор следующим образом:
Опустив знак процента (%) в значении атрибута, вы даете Web-браузеру указа- ние использовать значение как число пикселей, а не как процентное отношение. При задании размеров таблицы с помощью абсолютных величин (иными слова- ми, при задании ширины и высоты таблицы как числа пикселей), Web-браузер не будет изменять ни размеры таблицы, ни размеры ее ячеек при изменении 102 Глава 2. HTML-таблицы посетителем сайта размеров окна Web-браузера. Например, при разрешении эк- рана 800x600 и ширине и высоте таблицы 764x558, если посетитель Web-сайта уменьшит высоту окна Web-браузера, на экране будет видна только часть табли- цы. Web-браузер, в свою очередь, добавит в окно вертикальную полосу прокрут- ки, чтобы посетитель сайта мог прокрутить часть таблицы вне экрана в пределах видимой области. (Аналогично, если посетитель уменьшит ширину окна браузе- ра, Windows отобразит горизонтальную полосу прокрутки, позволяющую посети- телю прокручивать содержимое экрана в горизонтальной плоскости.) И наоборот, если посетитель увеличит* разрешение экрана до 1024x768, размер таблицы останет- ся неизменным, а Web-браузер будет отображать в своем окне пустые места — снизу и справа от таблицы. Задавая атрибуты width и height в дескрипторе , имейте в виду, что на самом деле вы устанавливаете только минимальные размеры таблицы. Ее фак- тические размеры будут определяться содержимым, которое вы поместите в ячейки таблицы. Предположим, например, вы задали таблицу 764x558, с двумя строками по две ячейки в каждой. Если в каждую ячейку первой строки вы по- местите по рисунку размером 450x350 пикселей, Web-браузер автоматически уве- личит ширину таблицы до 900 пикселей для соответствия ширине данных в таб- лице — то есть двух рисунков в первой строке. Если затем вы поместите графическое изображение размером 450x350 пикселей в одну из ячеек второй строки таблицы, Web-браузер увеличит высоту таблицы до 700 пикселей для со- ответствия высоте двух рисунков в столбце таблицы. Задание размеров ячеек с помощью относительных и абсолютных величин Помимо (или вместо) указания размеров таблицы путем задания атрибутов height и width таблицы в дескрипторе , вы можете создать таблицу оп- ределенной высоты и ширины за счет указания размеров ячеек таблицы. ПРАКТИКУМ Например, если вы хотите создать таблицу 800x600 с двумя строками по четыре столбца в каждой, вы можете задать каждую ячейку как 200x300 пикселей, запи- сав дескриптор
для каждой ячейки следующим образом: (Чтобы задать размеры ячейки с данными-заголовками, установите атрибуты width и height в дескрипторе ячейки заголовка.) "" При определении ширины таблицы путем задания атрибута width в деск- рипторе таблицы следите за тем, чтобы ширина ячеек в каждой строке в сумме была строго равна ширине таблицы во избежание "странного" поведения, "проявления" кото- рого специфичны для каждого отдельного браузера. Каждый из браузеров по-своему обраща- ется с неправильно сформированными таблицами. Следовательно, если вы хотите контро- лировать внешний вид своей таблицы в любом из браузеров, не пишите HTML-код таблиц, в котором размеры таблицы находятся в противоречии с размерами ее ячеек. Глава 2. HTML-таблицы Вместо.задания размеров ячейки в виде фиксированного числа пикселей, вы можете дать Web-браузеру указание рисовать каждую ячейку как процент от об- щей ширины и высоты таблицы. Предположим, например, вы хотите, чтобы Web-браузер нарисовал таблицу, заполняющую окно браузера и имеющую три столбца равной ширины. HTML-код этой таблицы запишется следующим обра- зом, как с относительной шириной (заданной значением атрибута width в деск- рипторе ), так и со столбцами относительной ширины (заданной значе- нием атрибутов width в дескрипторах
и ): width="33%" >3аголовок K/th>
3аголовок Данные столбца K/td> Данные столбца 2 Данные столбца Или, если вы хотите задать таблицу с фиксированной шириной и двумя стол- бцами, занимающими 80 процентов ширины таблицы и одним столбцом, зани- мающим 20 процентов ее ширины, HTML-код таблицы должен выглядеть следу- ющим образом: width= width= width= width=" width=" width=" M40%" "40%" "20%M "40%" "40%" "20%" >3аголовок K/th> >3аголовок 2 >3аголовок 3 >Данные столбца K/td> >Данные столбца 2 >Данные столбца 3 Шшш 1Ы задаёте шираш ятш. таШищы как нредштны© етнешшмя к шмрм= не таблицы, шшщт ж тем, чтобы сумма ширин, заданных в щещшшерш <Ш> (mim TaseiMi ммшетш) м дескрипторах <Ы> щщ едней §Tgesi т щтшшш& 100 процентов. Штш же щтш щецентных отношений составит меньше 100 Wib=§papgp ршщшшжч еетатем ра!немерне м^щу ЁШММ я При задании размеров ячейки (или таблицы) вы можете задать ширину без задания высоты или наоборот. Однако если вы задаете размеры ячейки как про- центные отношения к ширине таблицы, следите за тем, чтобы ширина таблицы была задана как число пикселей или как процент от окна Web-браузера путем задания атрибута width в дескрипторе таблицы. Аналогично, если вы задаете высоту ячеек в таблице как процентное отношение к общей высоте таб- лицы, обязательно задайте также высоту таблицы. Чтобы задать высоту таблицы, установите атрибут height в дескрипторе таблицы равным либо числу пикселей, либо процентному отношению к высоте окна браузера. 104 Глава 2. Выравнивание содержимого ячейки по горизонтали и по вертикали Если ячейка шире, чем ее содержимое, Web-браузер по умолчанию выровняет содержимое в ячейке по левому краю ячейки. Чтобы изменить выставляемое по умолчанию горизонтальное (то есть слева на- право) выравнивание содержимого ячейки, добавьте в дескриптор столбец 2 Если ваш дескриптор будет включать в себя атрибут width, установ- ленный равным "Ю0%" или значению в пикселях, которое превышает ширину окна браузера в пикселях, Web-браузер будет игнорировать атрибут align внутри дескриптора
в начальном и конечном дескрипторах блока () вокруг определения таблицы. Глава 2. HTML-таблицы 1 07 Управление шириной и высотой ячейки с помощью вставки прозрачного GIF-изображения Рисуя таблицу, Web-браузер увеличивает размер ячеек (и всей таблицы) так, чтобы вместить их содержимое. Предположим, например, вы создаете ячейку с дескриптором

ячейки атрибут align. Атрибут align может получать три возможных значения: • left. Выравнивает содержимое по левому краю ячейки. right. Выравнивает содержимое по правому краю ячейки. • center. Центрирует содержимое между левым и правым краями ячейки. На рис. 2.15 показано, как Internet Explorer отобразит таблицу, определенную следующим HTML-кодом, в дескрипторах которой использовано каждое из допустимых значений атрибута align: Выравнивание по центру

BbipaBHHBaHHe по левому KpasK/th> BupaBHHBaHHe по правому Kpara IIo ueHTpy Cлeвa CnpaBa
Если высота ячейки превышает высоту ее содержимого, Web-браузер по умол- чанию отцентрирует содержимое по вертикали между верхним и нижним краем ячейки. Чтобы изменить существующее по умолчанию вертикальное (то есть сверху вниз) выравнивание содержимого ячейки, добавьте в дескриптор ячейки атрибут 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-кодом, где в дескрипторах ячеек таблицы использо- вано каждое из возможных значений атрибута vaiign: < t r X t h width="25%">BbipaBHKBaiuie по вертикали - по верхнему краю*
BbipaBHMBaHMe по вертикали - по центру BbipaBHHBaHHe по вертикали - по базовой линии BupaBHHBaHHe по вертикали - по нижнему KpaxX/th> < t r x t d width="25%" valign="top">BBepxy IIo ueHTpy IIo базовой nnHrai C™isy
Рис. 2.15. Таблица, иллюстрирующая действие трех значений атрибута выравнивания по горизонтали Выравнивание таблицы на Web-странице В предыдущем практикуме этой главы вы научились выравнивать содержимое ячейки по левому краю ячейки, по правому краю ячейки или по центру ячейки. Пока содержимое ячейки уже ширины самой ячейки, с помощью атрибута align в дескрипторе ячейки вы можете позиционировать содержимое ячейки в горизонтальной плоскости внутри ячейки. Аналогично, если вы создаете таблицу уже ширины Web-страницы, на которой она отображается, вы можете позицио- нировать всю таблицу в горизонтальной плоскости на Web-странице с помощью атрибута align. 106 Глава 2. HTML-таблицы ?«J* View Гзи>г*« Joels Help Stop Rehesti ' Home. i Search • Б..РЧГ Вырыто , По и-игру inKmitfiwvn поиекгру Вырыюпиок га» ссрттолн - МО б и . ЮЙ ЛИНИИ По Базовой ЛИШИ Вироккп • по и Смоу мж m вертикали : «jbone Рис. 2.16. Таблица, иллюстрирующая действие четырех значений атрибута выравнивания по вертикали ПРАКТИКУМ • • • • По умолчанию Web-браузер отображает таблицу у левого края Web-страницы. Чтобы изменить выравнивание таблицы, заключите определение таблицы между начальным и конечным дескрипторами блока (
). Затем установите атрибут align внутри дескриптора
равным "left", "right" ИЛИ "center" — в зависимости от того, как должна быть выровнена таблица относи- тельно левого и правого краев Web-страницы. Например, чтобы Web-браузер отобразил таблицу по правому краю Web-стра- ницы (вместо левого края по умолчанию), заключите определение таблицы меж- ду начальным и конечным дескрипторами блока (). Затем установи- те атрибут align внутри дескриптора
равным "right", как показано в первой строке приведенного ниже HTML-кода:
'> " width="50%' 50%" "50%" 50%" '50%" 50%" '50%" ' height="50%"> >3аголовок _ >3аголовок >Строка >Строка >Строка >Строка 1 - 1 - 2 - 2 - K/th> 2 столбец K/td> столбец 2 столбец l
безматрибутов 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-изображением) отделяет содержимое левой ячейки от содержимого в правой ячейке, можно, написав следующий код: IIyHKTbi Meiuo

Здесь находится содержимое Web-cTpaHin№i
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-пиксельным интервалом от остального содержимого страницы В данном примере дескриптор , стоящий после второго дескриптора (в третьей строке) дает Web-браузеру указание поместить прозрачное GIF- изображение, хранящееся в файле spacing.gif, во вторую ячейку таблицы. Ат- рибут width в дескрипторе дает Web-браузеру указание "растянуть" изоб- ражение размером 1x1 пиксель так, чтобы его ширина составляла 20 пикселей. Причина, по которой вам может понадобиться использовать прозрачное GIF- изображение — вместо того, чтобы установить атрибут width в дескрипторе ячейки равным требуемому числу пикселей незаполненного пространства и оста- вить ячейку пустой — состоит в том, что Web-браузеры по-разному обходятся с пустыми ячейками таблиц. Например, хотя Internet Explorer и показывает фоно- вый цвет ячейки в пустых ячейках, Netscape Navigator этого не делает, показывая вместо него цвет фона таблицы или Web-страницы. Более того, некоторые брау- зеры игнорируют атрибут height и/или атрибут width, заданные в дескрипторе пустых ячеек, и рисуют пустые ячейки так, что их высота равна всего лишь высоте самой высокой непустой ячейки в строке, а ширина не превышает шири- ны самой широкой непустой ячейки в столбце. И, наконец, ни 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 были добавлены для создания дополнительного пространства между предметами, описаниями и ценами.) <Ъ<1>Вставьте oiracaHMe Вставьте ueHy

BcTaBbTe описание BcTaBbTe iieHy BcTaebTe onHcaHne Вставьте 4eHy
Глава 2. HTML-таблицы src="image_l.jpg"X/td> К'Ш Bc-raBb!re oinioafflie Вставьте i*eHy BcTaBbTe описание BcTaBbTe i*eHy BcTaBbTe on»caHHe Вставьтеi *eHy
Использование таблицы для управления структурой текста и графики создает приятную взгляду 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 в дескрипторе ) с соответствующим ей полноразмерным изоб- ражением и создает Web-страницу, немного похожую на показанную на рис. 2.19: -•

Как только 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 <И>Элемент списка 3 Глава 2. HTML-таблицы1 Начальный и конечный дескрипторы неупорядоченного списка () идентифицируют начало и конец маркированного списка, а дескриптор оп- ределяет элемент списка (см. рис. 2.21). Элемент списка 1 Элемент списка 2 Элемент списка 3 Рис. 2.21. Упорядоченный список С другой стороны, таблицы позволяют создавать свои собственные маркеры за счет вставки графического изображения-маркера в ячейку таблицы. Обычно таблица, используемая для создания маркированного списка, содержит два стол- бца. Первый столбец содержит в себе графическое изображение, используемое в качестве маркера, а второй столбец — текст, описывающий элемент списка. Стандартная таблица с двумя столбцами создает список с броскими изображени- ями в качестве символов маркеров, как, например, показано на рис. 2.22. Акации »ы Березы Рис. 2.22. Неупорядоченный список со специальными маркерами ПРАКТИКУМ ШЯШ Предположим, например, что вы создаете список, содержащий три элемента, и хотите использовать изображение стрелки в качестве маркера для каждого из эле- ментов списка. Для создания показанного выше маркированного списка служит следующий код:

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

<Ъс1>Сюда помещаются данные ячвйки

ПРАКТИКУМ Чтобы поместить в ячейку графическое изображение, вставьте дескриптор , как показано ниже, между начальным и конечным дескрипторами данных ячей- ки ():

Атрибут src в дескрипторе сообщает Web-браузеру имя файла графи- ческого изображения, которое браузер должен отобразить в ячейке таблицы. Следовательно, в данном примере Web-браузер отобразит рисунок из файла image.jpg. Чтобы преобразовать графическое изображение в ячейке таблицы в гиперс- сылку, заключите дескриптор между парой — начальным и конечным — дескрипторов привязки (<ах/а>). Например, следующий код преобразует рису- нок в таблице (из предыдущего примера) в гиперссылку:

Обрабатывая HTML-код из данного примера, Web-браузер во время рисова- ния таблицы отобразит рисунок из файла image.jpg. Если посетитель сайта за- тем щелкнет на рисунке, Web-браузер отобразит содержимое файла, указанного в атрибуте href дескрийтора <а>. Следовательно, в данном примере Web-браузер отобразит содержимое файла info.htm, когда посетитель щелкнет на рисунке в таблице. Глава 2. HTML-таблицы Управление границами на Web-странице с помощью вложенных таблиц Когда вы срздаете Web-страницу без таблиц, Web-браузер отображает найден- ные им в файле элементы Web-страницы один за другим, начиная в верхнем ле- вом углу окна браузера. Между первым элементом страницы и левым краем окна браузер помещает заданный по умолчанию интервал. К сожалению, не все Web- браузеры (и даже не все версии одного и того же Web-браузера) используют по умолчанию интервалы одинаковой, из-за чего при разработке Web-страницы воз- никает проблема, разрешить которую можно с помощью точного размещения графики и текста. ПРАКТИКУМ Предположим, например, вы создаете Web-страницу, содержащую три графичес- ких изображения, требующих установки определенного интервала от левой гра- ницы Web-страницы. Чтобы управлять границей сложной Web-страницы, создай- те таблицу и вставьте вторую таблицу с тремя графическими элементами в ячейку второго столбца первой таблицы. Помещение таблицы в ячейку внутри другой таблицы называется вложением (nesting). Когда вы вкладываете одну таб- лицу в другую, создается организованная структура, которая позволяет с большей точностью управлять размещением элементов на сложной Web-странице. В приведенном ниже коде демонстрируется вложение таблицы, содержащей три изображения? в ячейку другой таблицы:

В данном примере второй столбец таблицы содержит вложенную таблицу, а первый столбец внешней таблицы имеет фиксированную ширину, равную 30 пикселям. В результате, когда Web-браузер загружает Web-страницу, первый стол- бец таблицы отодвигает вложенную таблицу на 30 пикселей вправо от левого края окна браузера, как показано на рис. 2.24. Глава 2. HTML-таблицы 117 •3D \Ьпе*,\?П1!2МоЬв «WVHIML>feb_DCTign\?be t*»4mase.\1-2« hi ЕЯе ? с атрибутом href, который будет сообщать Web-браузеру, какое действие необходимо выполнить при щелчке на изображении, помещенном в ячейку. 118 Глава 2. HTML-таблицы ПРАКТИКУМ В приведенном ниже коде, когда посетитель выполняет щелчок на графическом изображении home.jpg, Web-браузер соединяется с Web-страницей home.htm и открывает ее: <а href="home.htm"> Правильно разработанные и помещенные в ячейки таблицы с границами ну- левой ширины (то есть невидимыми) фрагменты рисунка Web-браузер отобража- ет рядом друг с другом, так что посетитель будет видеть их как целостное графи- ческое изображение. Приведенный ниже код создает навигационную панель, показанную на рис. 2.25:

^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

sr c=" image. jpg"X/td> Если опустить атрибуты height и width в дескрипторе , браузеру при- дется определять размер ячейки по размеру изображения, которое он должен в ячейку поместить. В результате этого 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.

3T0 ЗАГОЛОВОЧНАЯ ОБЛАСТЬ
3Ta область содержит 1 навигационный MaccHB B этой области находится содержимое Web-CTpaHnuK

Глава 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:

Текст основной части документа находится здесь.
Вся информация, которую должна<Ьг> отображать ваша Web-страница.
Важная информация, которую ваши читатели<Ьг> должны увидеть, подсвечена<Ьг> ярко-желтым цветом.
Смотри crafla!
Изменение цвета фона ячейки таблицы, содержащей слова "Смотри сюда!" на желтый (за счет установки атрибута bgcolor в дескрипторе ячейки равным ''yellow") привлекает внимание посетителя к ячейке и делает акцент на фраг- менте текста в смежной ячейке. Визуальное выравнивание содержимого Web-страницы с помощью видимых границ таблицы Выравнивая с помощью таблицы графику и текст, вы создаете организован- ную структуру страницы, что помогает глазам посетителя двигаться по документу и повышает привлекательность компоновки страницы. Глава 2, HTML-таблицы 1 2 5 ПРАКТИКУМ Предположим, например, вы хотите создать Web-страницу, содержащую фотогра- фии ваших сотрудников вместе с их именами и фамилиями, должностями, зани- маемыми в компании, и почтовыми адресами. Чтобы организовать эту информа- цию, создайте таблицу, состоящую из одного столбца, как показано на рис. 2.30. Строка 1 содержит имя и фамилию сотрудника, строка 2 — фотографию со- трудника, строка 3 — должность, занимаемую им/ею в компании; строка 4 — его/ее почтовый адрес. Применение таблицы не только помогает организовать информацию на Web-странице, но, вдобавок к этому, использование атрибута border дает возможность еще более наглядно определить внешнюю границу таб- лицы и отделяет таблицу от прочей графики и текста на Web-странице. Показанная на рис. 2.30 таблица создается при помощи следующего кода: . ,

Джеймс Маркин

Ведущий дизайнер
Riven Productions 433 Spaeder Street Hollywood, CA 23435 Когда вы отключаете атрибут 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 (обра- тите внимание, что таблица фактически содержит пять ячеек):

CH>fla вставляется эаголовок
Сюда вставляется текст основной части документа <р> Сюда вставляется текст основной части документа
CKwa вставляется эаголовок
Сюда вставляется текст основной части документа <р> Сюда вставляется текст основной части flOKyMeHrra

Глава 2. HTML-таблицы 127 Помещение текста в таблицу позволяет организовать текст и управлять его отображением в окне браузера, а хорошо организованный текст легче читается и воспринимается. Кроме того, не все браузеры корректно отображают пустые ячейки таблиц. Следовательно, чтобы таблица всегда отображалась так, как вы задумали, вставьте прозрачные GIF-изображения в ячейки полей и промежутка между колонками и установите атрибут width в дескрипторе равным тре- буемой ширине поля или промежутка между колонками. 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-таблиц ' Создание клавиши быстрой навигации по форме с помощью дескриптора Указание 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-операторы и начинает выводить содержимое страницы на экран. Если при обработке странице браузер встретит дескриптор, требующий получения от сервера дополнительных данных, например, дескриптор , который исполь- зуется для описания графики, браузер посылает серверу запрос на передачу тре- буемого файла. Как показано на рис. 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-дескрипторы формы (

) указывают Web-браузеру, какую часть HTML-файла включать в форму. Как известно, Web-форма, как и HTML-таблица, представляет собой своего рода "контейнер". Начальный и конечный дескрипторы таблицы () используются для описания содержимого, которое должно быть помещено Web- браузером в таблицу. Аналогично, начальный и конечный дескрипторы формы () ограничивают содержимое, которое должно быть помещено Web-браузером в форму. Основное различие между формами и таблицами состо- ит в том, что браузер в HTML-таблице просто выводит данные на экран, в то время как форма не только выводится на экран, но и используется для ввода данных в элементы формы и передачи результатов Web-серверу для последующей обработки. (Более того, на одной Web-странице можно разместить несколько Глава 3. HTML-формы таблиц и несколько форм; тем не менее, несмотря на то, что можно организовать вложенные таблицы, нет никакой возможности внедрить одну форму в другую;) Например, в этой главе вы узнаете, как заменить следующие заполнители по- лями ввода и кнопками, находящимися между начальным и конечным дескрип- торами формы (), для создания формы, которая позволит полу- чать от посетителей необходимую вам информацию:
<р>Поля ввода формы плюс различные кнопки <р>Кнопки RESET и SUMBIT формы
Как показано в примере, дескрипторы
, как правило, содержат следую- щие атрибуты: • 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 дескриптора . Если же установлен 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 деСКрИПТОра . • target. Имя окна, в котором Web-браузер будет выводить страницу под- тверждения передачи результатов формы. • title. Текст (например, имя или описание формы), которые Web-браузер будет выводить на экран на несколько секунд, когда посетитель переместит указатель мыши на форму. Первые семь советов, которые будут приведены после этого вводного раздела о HTML-формах, расскажут о создании на форме полей ввода текста, флажков, переключателей, меню выбора, кнопок сброса Reset и передачи Submit. Несколь- ко остальных советов подробно остановятся на назначении атрибутов дескрипто- ра . А сейчас самое главное понять, что объекты в форму помещаются пу- тем вставки соответствующих им HTML-дескрипторов между начальным и конечным дескрипторами формы (). Более того, каждая форма должна содержать кнопку передачи данных, при нажатии на которую Web-брау- Глава 3. HTML-формы зер получает команду на передачу результатов формы (т.е. ее данных) по URL- адресу, указанному в атрибуте action дескриптора формы. Создание на форме однострочного поля ввода Если вы хотите, чтобы посетитель сайта ввел короткую строку текста, помес- тите на форму дескриптор с атрибутом type, которому присвоено значе- ние "text". ПРАКТИКУМ Например, два дескриптора в следующем коде создают поля для ввода имени (First Name) и фамилии (Last Name), как показано на рис. 3.4. <р>Имя: Фамилия:
[Кнопки RESET и SUMBIT формы]
• Файл Правке йид Избранное Сервис Спри АдресJ?] http://htmWi. Каждый дескрип- тор однострочного поля ввода текста содержит следующие атрибуты: • 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-системе) для перехода (т.е. перемещения фокуса) на поле ввода. Дескрипторы в приведенном примере указывают Web-браузеру помес- тить на форму с именем "ExampieForm" два однострочных поля ввода текста (с именами "FirstName" И "LastName"). Длина ПОЛЯ FirstName составляет 15 СИМ- ВОЛОВ, а ПОЛЯ LastName — 20 СИМВОЛОВ. При вводе текста в однострочное поле ввода текста посетитель сайта может ввести любое количество символов. Тем не менее, Web-браузер будет выводить на экран только то количество символов, которое указано в атрибуте size дескрип- тора . В приведенном примере, если посетитель введет в первое поле имя длиной 20 символов, на экране будут видны только 15 символов, поскольку длина поля составляет всего 15 символов. (Если необходимо ограничить количе- ство символов, которые посетитель может ввести в поле, задайте максимально ВОЗМОЖНОе КОЛИЧеСТВО СИМВОЛОВ В атрибуте maxlength ДеСКрИПТОра .) Создание на форме многострочного поля ввода Если требуется, чтобы посетитель сайта мог вводить сразу несколько строк текста, вставьте между начальным и конечным дескрипторами формы (

) начальный И конечный дескрипторы текстовой Области (). Например, для помещения на форму под полями ввоца имени и фамилии мно- гострочного поля ввода, показанного на рис. 3.5, необходимо после дескрипто- ров вставить начальный и конечный дескрипторы текстовой области (): Глава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
<р>Имя: Фамилия: <р>Сообщение: </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> ). Например, если нужно, чтобы введенный посетителем текст начи- нался СО СЛОВ "Вниманию отдела по работе с клиентами:", Описание тек- стовой области на HTML-странице должно выглядеть следующим образом: <р>Сообщение: Вниманию отдела по работе с клиентами :</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">  </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">  </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">  </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 You can use the CSS vidthYou 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 can use the CSS dthXou 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> « <div class="row"> <br /> <input type="submit" уа1че="0тправить" /> 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 /> </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>  </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">  При щелчке на любой гиперссылке в этом примере содержимое загружаемой 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>   </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">  </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 & Web Design Tips & 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> ). Например, сценарий в вы- шеприведенном примере нужно "закомментировать" следующим образом: Глава 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>  <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">  <center> <% Response.Write_ adRotatorObj.GetAdvertisement( "/hwdtt/Chapterll/BannerAds/AdRotatorSchedule.asp") %> </center> <p>*** Содержимое домашней страницы ***</р> < /body> </html> 6 00 Глава 11. Активные серверные страницы (ASP)  <% 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-сайтов все основные операционные системы предлагают более чем удовлетворительные показатели производительности. Если вы работаете с сайтом, количество посещений которого исчисляется миллионами посетителей в сутки, производительность операционной системы будет иметь для него более важное значение. Если же вы администрируете небольшой сайт, приоритетом для вас должна стать простота работы (т.е. должна использоваться операционная систе- ма, с которой вы хорошо знакомы), безопасность и, наконец, производительность.