DHTML и CSS. Быстрый старт by Иван Иванов

Джейсон Кренфорд Тиге

DHTML И CSS БЫСТРЫЙ СТАРТ

VISUAL QUICKSTART GUIDE

dhtml and css FOR THE WORLD WIDE WEB 2ND EDITION

Jason Cranford Teague

БЫСТРЫЙ СТАРТ

Dhtml и css Джейсон Кренфорд Тиге

Москва, 2003

УДК 004.738.5 ББК 32.973.26-018.2 Т39 Тиге Дж. К. Т39 DHTML и CSS: Пер. с англ. – М.: ДМК Пресс, 2003. – 560 с.: ил. (Быстрый старт). ISBN 5-94074-169-X В книге описывается использование динамического HTML (DHTML) и каскадных таблиц стилей (CSS) для построения сложных интерактивных Web-узлов. Данные технологии не требуют наличия специфического программного обеспечения на компьютерах посетителей сайта и работоспособны в большинстве распространенных браузеров. С помощью этой книги вы научитесь создавать динамически обновляющиеся Web-страницы, включающие различные текстовые и графические эффекты, манипулировать HTML-таблицами, размещать на своем сайте графику и анимацию. Рассматриваются способы применения каскадных таблиц стилей, проблемы реализации поддержки CSS в различных браузерах, использование JavaScript и объектной модели документа (DOM) для манипулирования содержимым страниц без их перезагрузки с сервера. Изложение материала сопровождается множеством примеров, даются советы по планированию структуры сайта и его дизайну. Кроме того, анализируются наиболее распространенные ошибки, допускаемые при программировании. Издание предназначено для разработчиков Web-страниц и всех, кто хотел бы создать собственный динамический Web-сайт. Authorized translation from the English language edition, entitled DHTML AND CSS FOR THE WORLD WIDE WEB: VISUAL QUICKSTART GUIDE, 2nd Edition by TEAGUE, JASON CRANFORD, published by Pearson Education, Inc, publishing as Peachpit Press, Copyright © 2001 TEAGUE, JASON CRANFORD. All rights reserved. No part of this book may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopying, recording or by any infomation storage retrieval system, without permission from Pearson Education, Inc. RUSSIAN language edition published by DMK Press, Copyright © 2003.

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

ISBN 0-201-73084-7 (англ.)

ISBN 5-94074-169-Х (рус.)

Посвящается Джоселин и Дэшиель – без них моя жизнь не была бы такой насыщенной

Благодарности Хочу выразить признательность Таре (Tara), своей супруге и лучшему критику; Ребекке (Rebecca), добившейся того, чтобы каждое предложение имело смысл; Ненси (Nancy), без которой этот проект не начался бы; Кэти (Kathy), нашедшей все ошибки; Конни (Connie), придавшей книге привлекательный вид; Симону (Simon), редактору первого издания; Бену (Ben), чье внимание к техническим деталям неоценимо. Благодарю родителей и Ненси (Nancy) за то, что с их помощью достиг своего сегодняшнего положения, Джонни (Johny) за постоянную поддержку и своих самых больших поклонников, Пэта (Pat) и Реда (Red). Огромное спасибо Чарльзу Доджсону (Charles Dodgson) – Льюису Кэрроллу (Lewis Carroll) – за то, что он написал «Алису в стране чудес», и Джону Тенниелу (John Tenniel) за прекрасные иллюстрации к этой книге. Джуди (Judy), Бойд (Boyd), доктору Г. (Dr. G.) и учителям Америки (The Teachers of America) желаю хорошей работы в дальнейшем. Хочу выразить признательность Набиху (Nabih) из компании Nabih’s Computer Systems за то, что он дважды за время создания этой книги спас жесткий диск моего компьютера. Благодарю Дугласа Адамса (Douglas Adams) за все его книги, а также The The, The Cure, Siouxsie and the Banshees, The Beatles, Blur, Cracker, Danielle Dax, Nine Inch Nails, KMFDM, The Pogues, The Ramones, New Model Army, The Cocteau Twins, The Cranes, The Systers of Mercy, The Smiths, Baubaus, Bad Religion, This Mortal Coil, Dead Can Dance за то, что они не дали мне сойти с ума, когда я работал над книгой.

Содержание Введение ................................................................................................................... 15

Часть I. Глава 1.

Каскадные таблицы стилей .......................................... 23 Введение в CSS ................................................................................ 24 Определение стиля ............................................................................... 26 Каскадные таблицы стилей ................................................................ 27 Версии CSS .............................................................................................. 30 Типы правил CSS ................................................................................... 32 Составляющие CSS-правил ................................................................ 33 Типы HTML-тэгов ................................................................................. 35

Глава 2. Основы CSS ......................................................................................... 37 Добавление CSS в HTML-тэг .............................................................. 38 Добавление CSS на Web-страницу .................................................... 40 Добавление CSS на Web-сайт ............................................................. 43 Переопределение HTML-тэга ............................................................ 49 Определение классов для создания тэгов ....................................... 51 Определение ID для идентификации объекта .............................. 54 Создание inline-тэгов ........................................................................... 56 Создание HTML-тэгов блок-уровня ................................................ 58 Определение тэгов с помощью одинаковых правил ................... 60 Определение тэгов в контексте ......................................................... 62 Значение !important .............................................................................. 64 Наследование родительских свойств .............................................. 66 Управление существующими или наследованными значениями свойств .............................................................................. 68 Определение каскадного порядка .................................................... 70 Настройка CSS для печати .................................................................. 72 Комментарии в CSS .............................................................................. 75 Стратегия создания таблиц стилей ................................................... 76

DHTML и CSS

Глава 3. Управление шрифтом ................................................................... 78 Оформление в Web .............................................................................. 79 Способы представления текста в Web ............................................. 80 Установка шрифта ............................................................................... 81 Загрузка шрифтов ................................................................................ 83 Шрифты в браузере .............................................................................. 85 Размер шрифта ...................................................................................... 87 Курсив ...................................................................................................... 89 Толщина шрифта .................................................................................. 91 Создание minicaps ................................................................................ 92 Определение нескольких значений шрифта одновременно .......... 94

Глава 4.

Управление текстом ...................................................................... 96 Кернинг .................................................................................................... 97 Интервал между словами ................................................................... 98 Межстрочные интервалы .................................................................... 99 Заглавные и строчные буквы ............................................................. 101 Выравнивание текста по правому, левому краю и по центру ............................................................................................. 102 Вертикальное выравнивание текста ................................................. 103 Выделение абзацев в тексте ............................................................... 104 Украшение текста ................................................................................. 106 Управление свойствами пробелов .................................................... 108 Установка разрыва страницы для печати ....................................... 110

Глава 5. Управление списками и указателем мыши ...................... 112 Списки ..................................................................................................... 113 Виды маркеров ...................................................................................... 115 Создание висячих отступов ................................................................ 116 Создание собственных маркеров ...................................................... 117 Форма указателя мыши ....................................................................... 119

Глава 6.

Управление цветами и фоном ................................................. 121 Установка отдельных свойств фона ................................................ 124 Установка цвета на переднем плане ................................................ 129

Глава 7.

Управление рамками и полями ............................................... 130 Что такое элемент ................................................................................ 131 Ширина и высота элемента ................................................................ 133 Поле элемента ....................................................................................... 135 Рамка элемента ...................................................................................... 137 Атрибуты рамки .................................................................................... 139 Внутренний отступ ............................................................................... 141

Содержание Поля и рамки в таблице ...................................................................... 142 Обтекание текстом ............................................................................... 144 Отмена обтекания текстом ................................................................ 146 Отображение элемента на экране ..................................................... 147

Глава 8. Управление позиционированием ........................................... 150 Что такое окно ....................................................................................... 151 Тип позиционирования ........................................................................ 152 Определение положения по отношению к левому верхнему углу ........................................................................................ 156 Определение положения по отношению к правому нижнему углу ......................................................................................... 159 Элементы в порядке стека (3D-позиционирование) ................... 161 Абсолютные элементы, встроенные в относительные ................ 163 Относительные элементы, встроенные в абсолютные ................ 164

Глава 9.

Управление видимостью элемента ...................................... 167 Определение видимости элемента ................................................... 167 Определение видимой части элемента ............................................ 169 Управление невидимой частью .......................................................... 171

Часть II.

Динамический HTML ............................................................. 173

Глава 10. Назначение DHTML ........................................................................ 174 Динамический HTML .......................................................................... 174 Особенности DHTML .......................................................................... 175 Причины использования DHTML ..................................................... 177 Flash и DHTML ....................................................................................... 178 Проблема выбора ................................................................................. 180

Глава 11. Объектная модель документа ................................................. 182 DOM – путеводитель по Web-странице .......................................... 183 Создание объекта .................................................................................. 185 Обработчики событий ......................................................................... 185 Обнаружение события ......................................................................... 188 Функционирование DOM ................................................................... 189 Определение возможностей браузера ............................................. 194 Определение типа DOM ...................................................................... 196 Построение общей DOM .................................................................... 198 Использование общей для браузеров DOM ................................... 201 Netscape 4 и встроенные слои ............................................................ 203

1 0 DHTML и CSS

Глава 12. Среда, в которой вы работаете .............................................. 207 Название и версия браузера ................................................................ 207 Тип операционной системы ............................................................... 210 Размеры экрана ...................................................................................... 212 Количество цветов ............................................................................... 214 Размеры окна браузера ........................................................................ 216 Размеры клиентской области окна ................................................... 217 Адрес и название страницы ................................................................ 219 Положение прокрутки страницы ..................................................... 220 Размеры объекта ................................................................................... 222 Левая и верхняя позиции объекта ..................................................... 224 Правая и нижняя позиции объекта ................................................... 226 Z-индекс объекта .................................................................................. 228 Состояние видимости объекта .......................................................... 230 Видимая область объекта ................................................................... 232

Глава 13. Основы динамических технологий ........................................ 236 Отображение и сокрытие объектов ................................................. 236 Перемещение объектов ....................................................................... 239 Перемещение объекта на заданное расстояние ............................ 241 Перемещение объектов в 3D ............................................................. 243 Прокрутка Web-страницы ................................................................. 246 Видимая область объекта ................................................................... 248

Глава 14. Развитые динамические технологии .................................. 250 Повторный запуск функции .............................................................. 250 Передача события в функцию ........................................................... 253 Глобальный обработчик событий ..................................................... 254 Анимационные объекты ..................................................................... 256 Нахождение положения указателя мыши ...................................... 259 Идентификация объекта на экране .................................................. 261 Управление содержанием во фреймах ............................................ 263 Позиционирование окна браузера .................................................... 266 Новое окно браузера ............................................................................ 268 Размеры окна ......................................................................................... 272

Глава 15. Динамические технологии CSS .............................................. 275 Изменение определения ...................................................................... 276 CSS-класс объекта ................................................................................ 278 Добавление нового правила ............................................................... 280 Отмена таблицы стилей ...................................................................... 281

Глава 16. Слои Netscape ................................................................................... 283 Что такое слой Netscape ...................................................................... 284 Создание слоя ........................................................................................ 285

Содержание 1 1 Импорт внешнего содержимого с помощью слоев Netscape ................................................................................................... 288 Доступ к слоям с помощью JavaScript ............................................. 290 Изменение слоев с помощью JavaScript .......................................... 293 Отображение содержимого слоев в браузерах, которые их не поддерживают ............................................................ 295

Глава 17. Internet Explorer для Windows .................................................. 297 Перетекание объектов ......................................................................... 298 Смена страниц ....................................................................................... 299 Эффект размытого изображения ...................................................... 301 Эффект волны ....................................................................................... 302

Часть III.

Использование инструментов для создания DHTML и CSS ............................................ 303

Глава 18. Знакомство с GoLive ...................................................................... 304 Интерфейс GoLive ................................................................................ 305 Внедрение CSS ........................................................................................ 308 Создание слоя ........................................................................................ 313 Создание DHTML-анимации ............................................................. 315

Глава 19. Введение в Dreamweaver ........................................................... 317 Интерфейс Dreamweaver .................................................................... 318 Внедрение CSS ........................................................................................ 321 CSS-редактор ......................................................................................... 323 Создание дополнительного слоя ....................................................... 325 Создание анимации .............................................................................. 327

Часть IV.

Динамические Web-сайты ............................................... 331

Глава 20. Понятие о динамических Web-сайтах ................................. 332 Отличительные черты динамического Web-сайта ....................... 333 Что такое гипертекст ........................................................................... 335 Динамический дизайн .......................................................................... 336 Размещение объектов на Web-странице ......................................... 337 Навигация: рекомендации и запреты ............................................... 340

Глава 21. Создание динамического Web-сайта ................................. 344 Шаг 1. Проектирование ....................................................................... 345 Шаг 2. Разработка .................................................................................. 348 Шаг 3. Реализация ................................................................................. 352

1 2 DHTML и CSS

Глава 22. Разметка Web-страницы ............................................................ 355 Устранение ошибки в Netscape CSS ................................................. 356 CSS и операционная система .............................................................. 358 Заголовки ................................................................................................ 361 Фиксированный заголовок ................................................................. 362 Боковое меню ........................................................................................ 364 Верхние и нижние колонтитулы ....................................................... 366 Границы фреймов ................................................................................. 369 Открытие и закрытие фреймов ......................................................... 371 Размещение страниц во фреймах ..................................................... 376 Отображение страницы на экране и при выводе на печать .................................................................................................. 379

Глава 23. Импорт внешнего содержимого ............................................ 381 Тэги <ilayer> и <iframe> ..................................................................... 382 Включения на стороне сервера .......................................................... 384 Внешний файл JavaScript ..................................................................... 385 Изучение работы других сайтов ....................................................... 387

Глава 24. Навигация Web-сайта .................................................................. 389 Определение стилей ссылок .............................................................. 390 Определение различных стилей для ссылок ................................. 393 Выпадающее меню ............................................................................... 395 Выдвижное меню .................................................................................. 400 Панель управления сайтом ................................................................. 403 Раскрывающееся меню ........................................................................ 407 Уточняющее меню ............................................................................... 410 Навигация для браузеров, не поддерживающих DHTML и CSS ......................................................................................................... 415 Дополнительные возможности .......................................................... 416

Глава 25. Средства управления ................................................................... 419 Полоса прокрутки ................................................................................ 420 Создание кнопки Back ......................................................................... 426 Организация слайд-шоу ...................................................................... 427 Всплывающий гипертекст .................................................................. 431 Использование формы ввода для создания динамических эффектов .................................................................... 434 Контекстная форма .............................................................................. 436 Перемещаемые объекты ..................................................................... 439 Свопинг изображений .......................................................................... 442 «Умное» меню ........................................................................................ 447

Содержание 1 3

Глава 26. Специальные эффекты ............................................................... 451 Буквица ................................................................................................... 452 Простая тень .......................................................................................... 454 Объемная тень ....................................................................................... 455 Фединг HTML-текста ........................................................................... 459 Отслеживание указателя мыши ........................................................ 463 Движущиеся объекты .......................................................................... 467 Прозрачная графика в формате PNG .............................................. 470 Создание часов ...................................................................................... 474

Глава 27. Мультимедиа ..................................................................................... 476 Использование звука в Web ................................................................ 477 Анимация в формате GIF .................................................................... 478 Назначение GIF-анимации .................................................................. 482 Flash-анимация ...................................................................................... 484 Видео в Internet ...................................................................................... 490 Добавление Java-апплетов .................................................................. 492

Глава 28. Отладка кода ..................................................................................... 494 Обнаружение ошибок CSS .................................................................. 495 Проверка CSS-правила ......................................................................... 497 Определение ошибок в коде JavaScript ........................................... 499 Различия между браузерами .............................................................. 502

Глава 29. Будущее динамического Internet ........................................... 504 Необходимость стандартов ............................................................... 505 Extensible Markup Language ................................................................ 507 Extensible Hypertext Markup Language ............................................. 509 Преобразование HTML в XHTML ..................................................... 510 Synchronized Multimedia Integration Language ............................... 512 Масштабируемая векторная графика ............................................. 513 CSS третьего уровня ............................................................................. 514

Приложения .................................................................................................................. 515 Приложение 1. Браузеры, поддерживающие DHTML и CSS ....... 516 Internet Explorer ......................................................................... 517 Netscape Navigator .................................................................... 518 Другие браузеры ....................................................................... 519

Приложение 2. Краткая справка о CSS .................................................... 520 Краткая справка ........................................................................ 521

1 4 DHTML и CSS

Приложение 3. Краткая справка о DHTML ............................................. 529 Служебные слова ...................................................................... 532

Приложение 4. Шрифты, поддерживаемые браузером ................. 534 Приложение 5. Дополнительные инструменты .................................. 539 Программное обеспечение .................................................... 539 В режиме реального времени ................................................ 542

Приложение 6. Дополнительные источники ......................................... 545 Web-сайты: технология и стандарты ................................... 545 Web-сайты: дизайн и теория .................................................. 549 Примеры Web-сайтов .............................................................. 551 Книги, журналы и другие публикации ................................ 552

Предметный указатель ....................................................................................... 554

введение Раньше создание Web-страниц было несложным делом. Вы написали несколько тегов, вставили несколько картинок, и страница готова. Теперь, с появлением потокового видео, JavaScript, CGI, Shockwave, Flash и Java создание Web-страниц может показаться трудной задачей для любого, кто не хочет стать программистом. Динамический HTML (Dynamyc HTML – DHTML) и каскадные таблицы стилей (Сascading Style Sheets – CSS) – технологии, позволяющие Web-дизайнеру добавлять новые элементы на страницу так же легко и быстро, как при помощи старого доброго HTML. При использовании DHTML не нужно задумываться о том, что у посетителя могут отсутствовать какие-либо дополнительные модули (Plug-in), или полагаться на сложные языки программирования (за исключением, быть может, JavaScript). В большей своей части DHTML похож на HTML и не требует специального программного обеспечения.

1 6 Введение

Содержание книги С того времени, как самые популярные браузеры Netscape Navigator и Internet Explorer начали поддерживать DHTML и CSS, Internet значительно изменился. Войны браузеров, взрыв dot-com (и последующее падение), огромный рост популярности Глобальной сети привели к сильному изменению технологий, которые обычно служили для создания Web-страниц. Но DHTML и CSS остаются теми двумя стандартами, которые применяются для создания лучших сайтов. В книге показан оптимальный путь использования DHTML и CSS, который позволит наиболее широкому кругу посетителей Всемирной сети видеть ваш сайт во всей красе. Книга разбита на четыре части: в первой части детально описывается, как задействовать CSS для управления содержательным наполнением Webстраницы, показываются конкретные способы управления различными внешними видами Web-страницы; во второй части рассказывается об использовании объектной модели документа (Document Object Model – DOM) совместно с CSS и JavaScript для создания основных функций, обеспечивающих работу динамических (меняющих свои атрибуты) элементов страницы. Показано, как создать DOM, позволяющую запускать эти функции при помощи коротких программных кодов во многих браузерах; в третьей части описывается способ создания DHTML и CSS посредством двух наиболее популярных программ для редактирования Web-страниц – Adobe

GoLive и Macromedia Dreamweaver. Хотя для создания Web-сайтов при помощи DHTML и CSS и не обязательно применять эти программы, они все же могут значительно упростить вашу работу;

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

Читательская аудитория Если вы сразу обратили внимание на эту книгу, то вы, вероятно, уже хорошо знакомы с особенностями Всемирной паутины (World Wide Web). Для изучения представленного здесь материала нужно хоть немного знать HTML (HyperТext Markup Language – язык разметки гипертекста). Необязательно быть экспертом в данной области, но необходимо представлять, чем отличается тэг <p> от тэга <br>. При чтении некоторых глав вам также потребуется знание JavaScript. Таким образом, чем больше вы знаете о HTML и JavaScript, тем более полезной для вас будет книга.

Значения и единицы Для определения различных элементов вам понадобятся разные значения. В зависимости от элемента эти значения принимают различную форму. Некоторые из них просты и понятны, например числа, но другие требуют специальных единиц измерения.

Значения и единицы Каждый является Web-дизайнером В будущем каждый сможет стать Web-дизайнером. По мере того как растет Wеb, все большее количество людей используют эту среду для того, чтобы сообщить о себе миру в какой бы то ни было форме. Это может быть и кинолюбитель, восхваляющий какой-нибудь фильм, и многонациональная корпорация, рекламирующая свои продукты. Но все – и отдельные люди, и компании – считают Web способом рассказать о себе. Как пользователь, работающий с текстовым процессором, является в некотором смысле издателем, так с ростом популярности Internet каждый, кто не только пассивно просматривает страницы, является Web-дизайнером и должен знать, как они разрабатываются. Изучение DHTML и CSS – ваш следующий шаг в Web-дизайне.

Выражения в угловых скобках (<>) представляют собой возможные значения (табл. 1). Слова, написанные ìîíîøèðèííûì øðèôòîì, являются литералами и должны быть напечатаны соответствующим образом. Длина Размерности длин можно разделить на две части: относительные длины, которые зависят от типа компьютера (табл. 2); абсолютные длины, которые одинаковы для любого типа компьютера и программного обеспечения (табл. 3).

Для наилучшего взаимодействия операционной системы и браузера при описании размера шрифтов рекомендуется использовать пикселы. Цвет Цвет на экране можно описать по-разному (табл. 4), но в основном это лишь различные способы объяснения компьютеру, сколько нужно взять красного, зеленого и синего, чтобы получить нужный цвет. Проценты Размерность многих элементов в этой книге – проценты. Процентные значения зависят от используемого элемента. URL URL (Uniform Resource Locator) – это уни-

кальный адрес какого-либо объекта в Web. Это может быть HTML-документ, графическое изображение, CSS-файл, файл JavaScript, аудио- или видеофайл, CGIскрипт или другие файлы. URL может быть локальным, то есть просто описывающим

1 8 Введение Таблица 1. Набор возможных значений Тип величины

Описание

Пример

Целое

1, 2, 3

Измерение расстояния или размера

1in

<color>

Цвет

red

Пропорция

35%

<URL>

Абсолютный или относительный путь к Internet-файлу

http://www.mySite.net/bob/ graphics/image1.gif

Таблица 2. Относительные длины Обозначение

Тип единицы

Описание

Пример

Em dash

Ширина буквы «М» для данного шрифта

3em

x-height

Высота маленькой буквы «х» для данного шрифта

5ex

Pixel

Базируется на разрешении монитора

125px

Таблица 3. Абсолютные длины Обозначение

Тип единицы

Описание

Пример

Пункты

Обычно используется для обозначения размера шрифта. 1 pt = 1/72 дюйма

12pt

Пики

Обычно применяется 3pc для описания размера шрифта. 1 pc ~ 12 pt

Миллиметры

25mm

Сантиметры

5.1cm

Дюймы

1 дюйм = 2,54 см

2.25in

Таблица 4. Цвет Обозначение

Описание

Пример

#RRGGBB

Шестнадцатеричный код красного, зеленого, синего цвета (00–99, AA–FF)

#CC33FF #C3F

rgb

Численные значения, соответствующие красному, зеленому, синему (#R, #G, #B) цвету (0–255)

rgb(204,51,255)

rgb(R%,G%,B%)

Процентное содержание красного, зеленого, синего цветов от 100% каждого цвета (0–100%)

rgb(81%,18%,100%)

name

Название цвета

Purple

Значения и единицы местоположение ресурса, относящегося к текущему документу, или глобальным, то есть описывающим абсолютное местоположение ресурса в Internet. Глобальный URL начинается с http://. Ссылки также используются в примерах программного кода, приведенных в книге. Для обозначения ссылок, которые могут указывать на любой URL, применяется знак решетки (#):

DHTML. В этом случае будет использоваться встроенная функция JavaScript void(): <a ->href="javascript: void('')">Link</a>. В таком написании функция определяет ссылку, которая никуда не ведет. Некоторые цвета всегда отображаются определенным образом на любом мониторе. Они называются цветами, которые сохраняет браузер. Их легко запомнить, потому что их числовые значения не меняются. В шестнадцатеричной системе можно использовать комбинации 00, 33, 66, 99, CC или FF. В качестве численных значений применяются 0, 51, 102, 153, 204, 255, а в качестве процентных – 0, 20, 40, 60, 80, 100.

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

Таблица 5.7. Возможные свойства значения cursor Свойство CSS

Тип значения

Литерал (набирается как в примере)

Значение

Совместимость

IE4, N6, CSS2

<url>

CSS2

auto

IE4, N6, CSS2

none

IE4, N6, CSS2

Возможные значения свойства

Версия CSS, в которой добавлено это свойство

Версия Netscape Navigator, начиная с которой поддерживается это свойство

Версия Internet Explorer, начиная с которой поддерживается это свойство

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

2 0 Введение

Принятые обозначения В большинстве случаев текст, таблицы, рисунки, листинги не будут требовать дополнительных объяснений. Но все же необходимо ознакомиться с некоторыми обозначениями, которые помогут вам в освоении представленного материала. CSS-таблицы. Каждый раздел первой части, в котором описываются CSS-свойства, включает в себя таблицу, позволяющую быстро найти различные значения, которые используются как в данном свойстве, так и в браузерах и CSS-слоях, с которыми совместимы эти значения (рис. 1). В колонке совместимости отображена самая ранняя версия браузера (Netscape и Internet Explorer), где поддерживается представленное значение. В табл. 5 перечислены аббревиатуры. Листинги. В книге применяется несколько методов представления листингов. Это сделано для того, чтобы их можно было легко отличить от самого текста. Вот как выглядит код: <style> p { font-size: 12pt; } </style>

Все программные коды в книге набраны строчными буквами (см. «Код – заглавные или строчные буквы?»). К тому же в листингах всегда используются прямые кавычки (" или '), а не фигурные (“ ” или ’): программный код с фигурными кавычками просто не будет работать. Важные места в листингах, обсуждаемые на конкретной странице, выделены полужирным шрифтом. Когда вы набираете строку кода на компьютере, она может быть сколь угодно длинной, в то время как в книге, к сожалению, строка иногда просто не помещается

Таблица 5. Сокращенные названия браузеров Аббревиатура

Тип

браузера

IE3

Internet Explorer 3

IE4

Internet Explorer 4

IE5

Internet Explorer 5

IE6

Internet Explorer 6

Netscape 4

Netscape 6

Код – заглавные или строчные буквы? В этой книге все HTML-коды, свойства, значения пишутся строчными буквами. HTML-код может содержать как заглавные, так и строчные буквы, но стандарт XHTML требует, чтобы все коды писались строчными буквами (см. раздел «Extensible Hypertext Markup Language» в главе 29). Скорее всего, XHTML станет в будущем языком разметки Web-страниц. И чтобы уже сейчас начать переход к XHTML, в книге все программные коды написаны строчными буквами.

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

Web-сайт, посвященный книге

на странице. В таком случае ставится стрелка (– >), показывающая, что строка продолжается, например:

вам при выборе наиболее подходящей программы.

.title {font: bold 28pt/26pt times, –> serif; color: #FFF; background-color: –> #000; background-image: url(bg_ –> title.gif); }

Web-сайт, посвященный книге

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

Программное обеспечение DHTML, как и HTML, не требует какоголибо специального или дорогого программного обеспечения. Код DHTML – просто текст, и его можно редактировать с помощью обычной программы, например SimpleText (Mac OS) или NotePad (Windows). Но что действительно нужно для того, чтобы запускать код DHTML, – это браузер версии 4.0 или более поздней. В приложении 5 приведен список весьма полезных (а в большинстве случаев – бесплатных) программ, которые пригодятся при создании Web-сайтов. Несколько программ значительно упрощают работу с DHTML и CSS благодаря автоматизации многих часто повторяющихся задач Web-дизайна, решение которых весьма утомительно из-за набора большого количества кода. Я рекомендую использовать Adobe GoLive и Macromedia Dreamweaver. Третья часть книги поможет

Скорее всего, вы часто будете использовать примеры кода из этой книги, однако будьте внимательны: простое перепечатывание может привести к ошибкам. Некоторые книги продаются с CD, который содержит все необходимые листинги. Но как вы думаете, кто платит за такой диск? Конечно, вы. Купив эту книгу, вы получите доступ к огромному ресурсу знаний, который когда-либо существовал, – к Internet. И именно там вы сможете найти примеры из этой книги. Сайт www.webbedenvironments.com/dhtml/ для Visual QuickStart Guide (рис. 2) поддерживается автором данной книги. Здесь вы найдете примеры листингов, а также любые важные обновления и исправления. Представлены и статьи о Web, написанные автором этой книги. Некоторые из приведенных программных кодов не работают без дополнительных файлов, которые использовались для их создания. Но не волнуйтесь – на сайте вы найдете различные примеры, которые можно посмотреть в режиме on-line и сравнить результаты. Если у вас есть вопросы по DHTML, вы вправе задать их мне, отправив электронной почтой по адресу: vqs-dhtml@webbedenvironments.com. Обязательно посетите сайты издательств «Peachpit Press» (www.peachpit.com/vqs/ DHTML) и «ДМК Пресс» (www.dmkpress.ru).

2 2 Введение

Рис. 2. Web-сайт для Visual QuickStart Guide доступен 24 часа в сутки

Создан с использованием DHTML. На сайте www.webbedenvironments.com/dhtml/builtwith/ размещен список браузеров, поддерживающих DHTML. Вы можете задействовать эмблему «Создан с использованием DHTML»(Built with DHTML) как ссылку на этот сайт с вашей DHTML-страницы, чтобы помочь посетителям выбрать правильный браузер.

Рис. 3. Создан с использованием DHTML. Применяйте эту эмблему как ссылку на сайт, на котором размещен список браузеров, поддерживающих DHTML

○ ○ ○ ○ ○ ○

○

Каскадные таблицы стилей

○

Часть I ГЛАВА 1 ГЛАВА 2 ГЛАВА 3 ГЛАВА 4 ГЛАВА 5 ГЛАВА 6 ГЛАВА 7 ГЛАВА 8 ГЛАВА 9

◆ ◆ ◆ ◆ ◆ ◆ ◆ ◆ ◆

Введение в CSS ....................................................... 24 Основы CSS ............................................................. 37 Управление шрифтом ............................................. 78 Управление текстом ................................................ 96 Управление списками и указателем мыши ............ 112 Управление цветами и фоном ................................ 121 Управление рамками и полями .............................. 130 Управление позиционированием ........................... 150 Управление видимостью элемента ......................... 167

Введение в CSS HTML не является мечтой дизайнера, ставшей явью. Он неточен, непредсказуем и непостоянен, когда дело касается представления различных типов информации. Язык HTML не предназначался для работы со сложными графическими изображениями и мультимедиа. В действительности он никогда не был чем-то большим, нежели универсальным языком разметки текста, распространенным в Internet, и имел весьма ограниченные возможности. HTML – язык разметки, созданный, чтобы определять структуру документа для размещения его в Web. Это значит, что HTML предназначен не для работы со стилями, а для организации страницы. Со временем в HTML было добавлено много новых тэгов и технологий, позволяющих лучше контролировать структуру и вид документа. Появились таблицы, фреймы, инструменты выравнивания текста, язык JavaScript. Но страница не состоит из одного текста, дизайнерам приходится использовать различную графику. HTML – не самая лучшая система. Когда Web-разработчики стали требовать от World Wide Web Consortium добавления возможностей управления внешним видом Web-страниц, W3C, чтобы заполнить дыры в HTML, представил каскадные таблицы стилей (CSS) – рис. 1.1.

Рис. 1.1. Логотип CSS

Вы, наверное, подумали: «Вот здорово, только я выучил HTML, и все поменялось!» Не волнуйтесь, CSS так же просто изучать, как и HTML. На самом деле с CSS иногда даже проще работать, потому что здесь не вводятся новые тэги, а используются уже существующие.

Введение в CSS

Рис. 1.2. Домашняя страничка World Wide Web Consortium: www.w3.org

Рассмотрим, например, тэг <bold>. В HTML его функция проста: он делает шрифт полужирным. В таблице стилей вы можете переопределить этот тэг так, что он будет не просто выделять текст, а отображать его определенным шрифтом, заглавными буквами, чтобы подчеркнуть значимость написанного. Можно даже сделать так, что тэг <bold> не будет выделять текст полужирным шрифтом. Прочитав эту главу, вы узнаете, как функционируют каскадные таблицы стилей, познакомитесь с основами их построения. Далее вы научитесь применять отдельные свойства таблиц.

Что такое World Wide Web Consortium? World Wide Web Consortium (W3C) – организация, устанавливающая стандарты, которые используются создателями браузеров (рис. 1.2). Эта организация была создана в 1994 году. Ее цель можно сформулировать так: добиться развития Всемирной паутины с помощью разработки обычных протоколов, которые обеспечат эволюцию Web и взаимодействие в нем. В W3C входит более 400 организаций всего мира – поставщики технического и программного обеспечения, компании-поставщики контента (содержания), корпоративные пользователи, исследовательские лаборатории, органы управления и правительства разных стран. Согласно информации, опубликованной на сайте W3C, Консорциум ставит перед собой три задачи: универсальный доступ. «Нужно сделать Internet доступным для всех, создавая тех-

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

зволит каждому пользователю применять ресурсы Web наилучшим образом»; доверие. «Нужно управлять развитием Internet осторожно, при помощи законов,

коммерческих и социальных изданий, которые возникают при использовании этой технологии».

2 6 Введение в CSS

Определение стиля В настоящее время многие текстовые процессоры позволяют обрабатывать текст не только последовательно, то есть слово за словом, но и путем изменения всего документа с помощью стилей. В стиле (Style) собраны различные свойства текста, например шрифт и размер, которые можно использовать для похожих частей текста, скажем заголовков. Таким группам свойств дается обычное имя. Допустим, вы хотите, чтобы все заголовки разделов в документе были напечатаны полужирным курсивом, шрифтом Times размером 14 пунктов. Вы можете присвоить все эти свойства стилю «Заголовок раздела» (рис. 1.3). Каждый раз, когда вы вводите заголовок раздела, вам нужно воспользоваться данным стилем, и все описанные свойства сразу же применятся к тексту. А если потом вы решите поменять размер шрифта с 14 на 18 пунктов, достаточно внести изменения в описание стиля «Заголовок раздела». Текстовый процессор изменит все части текста, помеченные этим стилем в документе.

Рис. 1.3. Стили, которые применяются к заголовку раздела в тэге текстового процессора

Рис. 1.4. Применение стилей к HTML-тэгу

Каскадные таблицы стилей

Рис. 1.5. Использование CSS на HTML-странице для добавления картинки на задний план. Текст при этом форматируется, смещается вправо и вниз

Рис. 1.6. Тот же код представлен без использования CSS. На странице, в отличие от рис. 1.5, отсутствует форматирование

Каскадные таблицы стилей (Cascading Style Sheets – CSS) позволяют устанавливать стили за один раз, та же функция присутствует в большинстве текстовых процессоров. Вы можете создать каскадную таблицу стилей в главном документе, и ее действие распространится на все HTMLтэги на одной странице или на всем сайте. Несмотря на то что CSS работает с HTML, это не HTML. Более того, CSS представляет собой отдельный код, который расширяет возможности HTML, позволяя переопределять уже существующие HTMLтэги (рис. 1.4 и 1.5). Например, тэг, устанавливающий границы абзаца, <p>...</p>, в основном служит для выделения пространства между абзацами. Однако, используя CSS, несложно поменять природу этого тэга так, что текст внутри него будет выделяться полужирным курсивом, шрифтом Times размером 14 пунктов (рис. 1.6). Как и при работе со стилями текстового процессора, вы можете поменять определение тэга <p> и, следовательно, вид всех абзацев на Web-сайте. В табл. 1.1 перечислены некоторые свойства тегов, которые можно изменять с помощью CSS, а также главы, в которых об этом рассказывается.

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

Рис. 1.7. Логотип W3C

Таблица 1.1. Свойства, которые можно изменять с помощью CSS Свойство

Объект управления

Описание в книге

Шрифт (font)

Форма и размер букв, жирный или курсив

Глава 3

Текст (text)

Кернинг, интервал между строками, выравнивание, регистр

Глава 4

Список и указатель мыши (list&mouse color)

Маркеры, отступ

Глава 5

Фон (background)

Задний план страницы или элемента

Глава 6

Рамка, поле (border&margins)

Рамки, поля, внутренний отступ ширина, высота

Глава 7

Позиционирование (positioning)

Точное положение на экране

Глава 8

Видимость (visibility)

Видимость на экране элемента или какой-либо его части

Глава 9

Кому принадлежат авторские права на CSS? 12 января 1999 года корпорация Microsoft получила патент № 5860073. Этот патент, озаглавленный «Таблицы стилей для систем публикации», определяет «использование таблиц стилей в электронных системах публикации». Звучит знакомо? Изобретатели, перечисленные в данном патенте, создали систему, с помощью которой «текст или другой элемент, например графическое изображение, появляются на экране». При этом применяются таблицы стилей, определенные как «сведения о формате, например шрифты и табуляция». Описанный патент частично совпадает, по-видимому, с понятиями, сформулированными в спецификациях W3C для CSS (рис. 1.7) и в языке XSL, разработка которого ведется по крайней мере с 1994 года.

Каскадные таблицы стилей

Кому принадлежат авторские права на CSS? (окончание) Это означает, что корпорация Microsoft теперь может утверждать, что ключевые понятия, лежащие в основе технологии Web-браузера, являются ее интеллектуальной собственностью. Теоретически, если вы хотите использовать эти или любые другие основанные на них технологии, вам нужно подписать лицензионное соглашение с Microsoft. Представьте себе картину: все сайты, разработанные с помощью CSS, DHTML, XSL, должны быть сертифицированы Microsoft. Однако этого может и не произойти. Корпорация Microsoft сообщила, что подпишет «свободное и взаимно обязывающее» соглашение с каждым, кто захочет применять «ее» технологию. Было добавлено, что еще не ясно, понадобится ли лицензия. Краткий анализ патента показывает, что в нем есть две ошибки, о которых уже заявили W3C и Web Standards Project (www.webstandards.org): существование прецедента. Таблицы стилей были предложены лабораторией CERN

одновременно с появлением первых Web-браузеров в 1994 году. На самом деле о таблицах стилей знают еще с 60-х годов, тогда их использовали в типографиях. В лучшем случае в Microsoft не изобрели, а просто сформулировали это понятие; собственное лицензирование W3C гарантирует, что разработанные под их эгидой

стандарты являются доступными и на них не накладываются отчисления владельцу патента. Так как W3C первым предложил понятие таблиц стилей, его лицензия должна быть прецедентом. Представители Microsoft есть в комиссии, создавшей эти стандарты, и в лицензии Microsoft имеются ссылки на документы, выпущенные W3C и касающиеся CSS. Поэтому маловероятно, что данный патент выдержит тщательную проверку. Джордж Олсен (George Olsen) из Web Standards Project выражает сомнение, будет ли такой патент выпущен, «поскольку существует ряд похожих технологий, которые появились раньше технологии Microsoft, включая первоначальное предложение CSS». Также предполагается, что любая организация, которая имеет представителей в W3C, в том числе и Microsoft, должна подробно рассказывать о текущих и будущих патентах, которые могут затронуть рассматриваемые стандарты W3C. В данном случае это не было сделано. В W3C узнали о патенте 4 февраля 1999 года, когда информация о нем появилась в печати. Какое это имеет к вам отношение? Возможно, никакого. W3C опубликовал CSS как открытый стандарт, джинн уже выпущен из бутылки. Пока не было ни одного случая, чтобы Microsoft запретила кому-нибудь использовать CSS для создания сайта. Все же цель данного открытого стандарта – позволить заинтересованным лицам вносить свой вклад в общее дело, причем это не должно касаться только одной компании. Будем надеяться, что патент не навредит будущим CSS-разработкам.

3 0 Введение в CSS

Версии CSS Под руководством W3C (на рис 1.8 представлена домашняя страница организации) CSS развивались на протяжении нескольких лет. Последняя версия получила название CSS Level 2 или CSS2 – CSS второго уровня. Большинство современных браузеров поддерживают поздние версии CSS, более старые браузеры – комбинацию ранних версий CSS. В приложении 2 указывается, какие браузеры совместимы с определенными CSS-свойствами. Ниже приводятся основные сведения об уровнях CSS: CSS первого уровня (CSS Level 1 или CSS1). Первая официальная версия CSS была выпущена W3C в 1996 году. Она включает в себя основные возможности, такие как форматирование текста, выбор шрифта, установка полей. Netscape 4 и Internet Explorer 3/4 поддерживают этот уровень; позиционирование в CSS (CSS-P). Webдизайнерам нужен был специальный инструмент, чтобы точно располагать элементы на экране. Версия CSS1 уже вышла, а CSS2 еще не появилась, и W3С предложил временное решение – позиционирование в CSS. Этот стандарт представлял собой некое предложение, которое заинтересованные стороны могли бы обсуждать некоторое время, прежде чем оно получит официальный статус. Netscape и Microsoft спешно включили предварительные варианты в браузеры четвертой версии. Поддерживают ли Netscape и Microsoft CSS-P? Можно сказать, что это так. Несмотря на то что основные характеристики присутствуют в браузерах обеих фирмпроизводителей, некоторые моменты все же были упущены;

Рис. 1.8. Домашняя страничка CSS (www.w3.org/Style/CSS/)

CSS второго уровня (CSS Level 2 или CSS2). Эта версия CSS вышла в 1998 году. Второй уровень включает в себя все свойства двух предыдущих версий, особое внимание уделяется международному доступу и возможности определения медиа-особенностей CSS. Internet Explorer 5 и Netscape 6 поддерживают CSS2;

Версии CSS

Рис. 1.9. Домашняя страница HTML

Каскадные таблицы стилей не являются единственными таблицами стилей, доступными в Internet. Netscape 4 также поддерживает таблицы стилей JavaScript. Однако CSS используются чаще, и они одобрены W3C.

CSS третьего уровня (CSS Level 3 или CSS3). Эта версия еще находится в стадии разработки. Но даже после ее выпуска браузеры только через несколько лет начнут ее поддерживать. Самым важным отличием CSS3 от остальных версий, несомненно, станет масштабируемая векторная графика (Scalable Vector Graphics – SVG). Этот формат позволит добавлять формы (линии, круги, сплайны и т.д.) в векторном, а не в растровом представлении, то есть все преимущества векторной графики будут доступны в Web. О векторном и растровом представлении подробно рассказано в главе 3, раздел «Оформление в Web». Версия CSS3 более подробно описывается в главе 29.

CSS и HTML 4.01 В декабре 1999 года W3C выпустил последнюю версию языка разметки гипертекста – HTML 4.01. Эта версия включает в себя технологию таблиц стилей (до этого она поддерживалась как отдельный стандарт) как часть спецификации HTML (рис. 1.9). Сказанное не означает, что CSS и HTML – одно и то же. Но теперь HTML полагается на возможности CSS. Многие из HTML-тэгов, предназначенных для описания внешнего вида страниц, должны выйти из употребления, если это не противоречит новым стандартам HTML. W3C называет такую ситуацию «протестом». И хотя подобные тэги все еще работают, они скоро будут вытеснены CSS. W3C считает, что нужно использовать таблицы стилей, чтобы освободить HTML от задач представления. Это можно понять так: «Перестаньте просить новых тэгов для представления выходной информации. Применяйте вместо них таблицы стилей». Возможно, это неплохая идея: теперь каждый может работать с HTML-тэгами независимо от того, является он Web-дизайнером или нет, и переопределять их по своему усмотрению. Более подробную информацию об HTML можно найти на сайте www.w3.org/MarkUp/.

3 2 Введение в CSS

Типы правил CSS Каскадные таблицы стилей очень просто использовать. Для них не требуются модули расширения (plugins) или сложное программное обеспечение. CSS – всего лишь правила, которые определяют, как должен выглядеть HTML и как он должен реагировать на действия пользователя. Вы можете установить правила преобразования HTML или создать общие правила и применять их к тэгам по своему усмотрению. Существует три типа CSS-правил:

«Определение классов для создания тэгов» в главе 2). Пример: .myClass { font: bold 12pt times; } правила ID могут так же, как и классы,

применяться к любым HTML-тэгам. Однако селекторы ID обычно применяются к определенному HTML-тэгу на странице один раз – для использования в функции JavaScript (см. раздел «Определение ID для идентификации объекта» в главе 2). Пример: #object1 {position: absolute; top: 10px;}

HTML-селектор – текстовая часть HTML-

тэга. Например, h3 – селектор тэга <h3>. В правилах каскадных таблиц стилей селектор используется для переопределения результата действия тэга (см. раздел «Переопределение HTML-тэга» в главе 2). Пример: p { font: bold 12pt times; } класс представляет собой «свободное» правило, которое можно применять к любому HTML-тэгу. Классу разрешается дать любое имя (см. приложение 3). Так как класс применим ко множеству тэгов, он является самой гибкой разновидностью селектора (см. раздел

Не путайте селектор HTML-тэга с его атрибутами. В следующем примере img – селектор, а scr – атрибут. <img scr="picture.gif"> Хотя тэг <p>, выделяющий абзац, часто используется без закрывающего тэга </ p>, при определении в CSS закрывающий тэг обязательно нужно включать. CSS-правила будут применяться в общем случае только к тэгам, имеющим и закрывающий, и открывающий тэги. Но есть несколько исключений, например тэг <img>.

Составляющие CSS-правил

Составляющие CSS-правил Все правила, независимо от их местоположения и типа, состоят из трех частей: селекторы представляют собой буквенные или численные символы, которые определяют правило. Селектор может быть селектором HTML-тэга, классом или ID; свойства описывают вводимый элемент. Существует несколько десятков свойств, каждое из которых отвечает за некий аспект оформления страницы и присутствующие на ней эффекты; значения определяют природу свойства. Значение может представлять собой ключевое слово, например «yes» или «no», число или проценты. Тип используемого значения зависит только от свойства, которому оно приписывается.

Рис. 1.10. Основной синтаксис CSS-правила

Различие тэгов и селекторов HTML-селектор – текстовая часть HTML-тэга, которая сообщает браузеру о типе тэга. Когда вы определяете HTML-селектор, используя CSS, вы в действительности переопределяете HTML-тэг. Несмотря на схожесть, тэг и селектор – два разных элемента. Если вы напишете в CSS-правиле полный HTML-тэг, то есть скобки и буквы, тэг работать не будет. Поэтому данные понятия важно разделять.

Кроме селектора, CSS-правило содержит свойства и значения, которые в совокупности называются определением. На рис. 1.10 представлен синтаксис правила.

3 4 Введение в CSS Несмотря на то что после последнего определения в списке не нужно ставить точку с запятой, как показывает опыт, ее все же лучше поставить, чтобы избежать неприятностей в будущем. Если вы решите добавить что-либо в определение и забудете поставить точку с запятой, вы можете полностью испортить правило. И не только одно конкретное определение, но и все другие определения в этом правиле перестанут работать (см. раздел «Обнаружение ошибок CSS» в главе 28). Хотя Netscape версии 4 и выше и Internet Explorer версии 3 и выше поддерживают CSS, ни один из этих браузеров не позволяет работать со всеми возможностями CSS, а число этих возможностей зависит от версии браузера. Поддерживается ли то или иное свойство в данной версии браузера, можно узнать в приложении 2.

Размещение CSS-правил Правила можно установить в трех местах: в HTML-тэге внутри документа, что-

бы изменить один тэг в документе. Такие правила часто называют inline-правилами (см. раздел «Добавление CSS в HTML-тэг» в главе 2); в заголовке документа для примене-

ния ко всей странице. Такие правила называют встроенными (см. раздел «Добавление CSS на Web-страницу» в главе 2); во внешнем документе, который

связан с вашим или импортирован. В этом случае правила используются для всего сайта. Такие правила называются внешними (см. раздел «Добавление CSS на Web-сайт» в главе 2). Положение правила в документе и в других правилах определяет их общее влияние на документ (см. раздел «Определение каскадного порядка» в главе 2).

Типы HTML-тэгов Таблица 1.2. Селекторы для тэгов блок-уровня Селектор

Использование в HTML

blockquote

Тип кавычек

center

Выравнивание текста по центру

Описание определения

dfn

Определенный терм

dir

Список директорий

div

Логическое деление

Список определений

Терм определения

h1-7

Уровни заголовков 1–7

Элемент списка

Упорядоченный список

Абзац

table

Таблица

Данные таблицы

Заголовок таблицы

Строка таблицы

Неупорядоченный список

Типы HTML-тэгов Не каждое определение CSS подходит HTML-тэгу. Это полностью зависит от природы тэга. В большинстве случаев легко понять, какое свойство можно применять к данному тэгу, а какое – нет. Вам же не придет в голову применить свойство, связанное с выделением абзацев, к такому тэгу, как <b>. В приложении 2 рассказывается, какие свойства можно использовать с определенными типами тэгов.

Как записывать тэги: заглавными или строчными буквами? HTML-тэг не является зависимым от регистра. Браузер не делает различий между тэгами, написанными заглавными и строчными буквами. Многие предпочитают писать тэги заглавными буквами, выделяя их из основного текста. Я причислял себя к таким людям, пока не появился XHTML (см. раздел «XHTML» в главе 29). Важной особенностью этого языка является то, что он различает заглавные и строчные буквы, и все селекторы нужно писать строчными. Поэтому я начал использовать строчные буквы, чтобы быть готовым к возможным изменениям в HTML.

3 6 Введение в CSS Кроме тэга <body>, существует три основных типа HTML-тэгов: тэги блок-уровня (block-level tags) выделяют элемент пустой строкой снизу и сверху. Селекторы тэгов этого типа перечислены в табл. 1.2; inline-тэги не вставляют пустые строки между элементами. Селекторы тэгов этого типа перечислены в табл. 1.3; замененные тэги (replaced tags) имеют установленный или вычисляемый размер. Селекторы тэгов этого типа перечислены в табл. 1.4.

Netscape 4 не распознает CSS, которые применены напрямую к тэгам, перечисленным в табл. 1.4.

Таблица 1.3. Селекторы для inline-тэгов Селектор

Использование в HTML

Ссылка

Выделение жирным шрифтом

big

Текст большего размера

cite

Короткая цитата

code

Шрифт кода

Выделение

font

Вид шрифта

Курсив

pre

Переформатированный текст

span

Локализованное форматирование стиля

strike

Зачеркивание

strong

Усиленный шрифт

sub

Подпись снизу

sup

Подпись сверху

Рукописный шрифт

Подчеркнутый текст

Таблица 1.4. Селекторы для замененных тэгов Селектор

Использование в HTML

img

Изображение

input

Поле ввода

object

Объект

select

Выпадающий список

textarea

Многострочное поле ввода

основы css

Рис. 2.1. Использование CSS на HTML-странице для добавления картинки на задний план, при этом текст форматируется, смещается вправо и вниз

Рис. 2.2. Тот же самый код без использования CSS. Страница просматривается, но форматирование отсутствует

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

3 8 Основы CSS

Добавление CSS в HTML-тэг Хотя CSS обычно не применяется для изменения вида каждого тэга в отдельности, вы можете задавать стили для конкретных тэгов. Это особенно полезно, если вы хотите обойти другие установленные на странице стили. На рис. 2.3 показан общий синтаксис добавления стиля непосредственно в HTMLтэг, а на рис. 2.4 представлен результат.

Рис. 2.3. Общий синтаксис определения стилей непосредственно в HTML-тэге

Установка стилей для отдельного HTML-тэга 1. <h1style= Напишите слово style= в HTML-тэге, который вы хотите определить (листинг 2.1). 2. "font: small-caps bolditalic 2.5em ->'minion web', 'Georgia, 'Times New ->Roman',Times,serif;color:red;" В кавычках напишите определение стиля в формате property: value, поставьте точку с запятой, чтобы отделить разные определения друг от друга. Убедитесь, что вы закрыли кавычки. 3. >Alice'sAdventuresinWonderland</h1> После закрывающего тэга напишите тот текст, к которому нужно применить стиль. Затем закройте парный тэг, если это необходимо.

Рис. 2.4. Стили размещены непосредственно в тэге

Добавление CSS в HTML-тэг Листинг 2.1. С помощью атрибутов стиля каждый тэг определяет форматирование текста внутри него

<html> <body style="background:white ->url(alice23.gif) no-repeat; ->font-family:arial, ->helvetica,geneva,sans-serif; word ->spacing: 1px; position: relative; ->top:185px; left:165px; ->width:480px"> <br> <h1 style="font:small-caps bold ->italic 2.5em 'minion web', ->'Georgia', 'Times New roman', Times, ->serif">Alice's ->Adventures in Wonderland</h1> <h2 style="font: bold 1.5em 'minion ->web Georgia', 'Times New Roman', ->Times, serif">Lewis Carroll</h2> <p style="style: italic; font->family:monospace;">THE ->MILLENIUM FULCRUM EDITION 3.0</p> <h3>CHAPTER 1 <br>Down the Rabbit-Hole</h3> <p><span style="font: 300%/100% serif; ->color: #999999; margin-right: ->-3px">A</span> lice was beginning ->to get very tired of sitting by her ->sister on the bank...</p> <p>So she was considering in her own ->mind...</p> <p>There was nothing so<i>very</i> remarkable in that...</p> </body> </html>

Netscape поддерживает использование стилей в тэгах, но ошибка в Netscape 4 может привести к тому, что любые стили после тэга, в котором содержится непосредственно примененный стиль, будут игнорироваться. Когда вы ничего не выигрываете от изменения глобального определения стилей, очень удобно использовать CSS в отдельном тэге для перекрытия глобального определения (см. раздел «Определение каскадного порядка» в конце главы). В данном примере также показано, как определять тэг <body>, но будьте осторожны: это может привести к большим проблемам (см. ниже раздел «Управление существующими или наследованными значениями свойств»). Нужно отметить, что и Netscape, и Internet Explorer игнорируют многие, особенно позиционные, свойства внутри тэга. Чтобы не возникало проблем с браузером, рекомендую заключать список определений в двойные кавычки, а любые значения в этом списке, например названия шрифтов, состоящие из нескольких слов, – в одинарные. Помните, что знак равенства используется для того, чтобы приписать стилю атрибут, а при определении CSS нужно всегда ставить двоеточие. Обычные стили можно также применить ко всей странице (см. следующий раздел) и к нескольким Web-страницам (см. раздел «Добавление CSS на Web-сайт» этой главы).

4 0 Основы CSS

Добавление CSS на Web-страницу В основном CSS используются для определения стиля всего документа. Для этого нужно включить правила стиля в заголовок документа, который находится внутри содержания стиля (рис. 2.5). Если добавить стиль таким способом, то результат будет идентичен результату добавления стилей непосредственно в тэг (рис. 2.6). Однако этот метод позволяет легко поменять стили всего документа из одного места.

Рис. 2.5. Общий синтаксис стиля CSS, расположенного в тэге <head> HTML-документа

Рис. 2.6. Этот рисунок совпадает с рис. 2.4, но здесь СSS помещены в тэге <head>, а не в каждом отдельном тэге

Добавление CSS на Web-страницу Листинг 2.2. Результат работы этого кода (рис. 2.6) может показаться тем же самым, что и результат, получившийся на странице с рис. 2.4. Правила стиля собраны в теге <head> и распространяются на все тэги документа

<html> <head> <style type="text/css"> body { bacground: white ->url(alice23.gif) no-repeat; ->word-spacing: 1px; } #content { position: relative; top: 190px; left: 165px; width: 480px; font-family: ->arial,helvetica,geneva, ->sans serif; } h1 { font:small-caps bold italic ->2.5em 'minion web', 'Georgia', ->'Times New Roman', Times, serif; color: red;} h2 { font: bold 1.5em 'minion web', ->'Georgia', 'Times ->New Roman', Times, serif; font-size: 1.5em } .dropcap { font: 300%/100% serif; color: #999999; margin-right: -3px; } </style> </head> <body> <div id="content"> <br>

Установка стиля для тэгов в HTML-документе 1. <styletype="text/css> Напишите открывающий тэг <style> в тэге <head> вашего документа, задайте тип как "text/css". Это означает, что все последующие стили будут CSS-стилями (листинг 2.2). 2. h1 { Для определения правила введите селектор нужного тэга и открывающую фигурную скобку за ним. Селектор может принадлежать к одному из следующих типов: – селектор HTML-тэга (например, h1; см. «Переопределение HTML-тэга»); – селектор класса (например, myClass; см. «Определение классов для создания тэгов»); – ID-селектор (например, #object; см. «Определение ID для идентификации объекта»); – группа селекторов, разделенных запятой, то есть список определений (например, h1, h2, myClass; см. «Определение тэгов с помощью одинаковых правил»); – группа селекторов, разделенных пробелами, то есть контекстуальные определения (например, h1 myclass object; см. «Определение тэгов в контексте»). 3. font:small-caps bolditalic 2.5em ->'minion web','Georgia','TimesNew ->Roman',Times,serif; color:red; Напишите определения, которые нужно присвоить этому правилу в виде property: value и разделите различные определения в списке точкой с запятой. 4. Закройте правило фигурной скобкой (}).

4 2 Основы CSS 5. Повторите шаги 2–4 для всех селекторов, которые требуется определить. 6. Закройте тэг стиля, напечатав </style>. На первый взгляд кажется, что включать type="text/css" необязательно, так как браузер должен уметь определять тип стиля. Однако стоит записывать эту часть кода, чтобы браузеры, не поддерживающие данный тип стиля, могли проигнорировать его. Кроме того, любой человек может прочитать код и узнать, какой используется стиль. Рекомендуется применять тэг комментариев <!-...->, чтобы спрятать CSS от браузеров, их не распознающих. Иначе эти браузеры покажут таблицу стилей не в лучшем виде. Стили можно также применять непосредственно к одному тэгу (см. «Добавление CSS в HTML-тэг») или к нескольким Web-страницам (см. «Добавление CSS на Web-сайт»).

Форматирование CSS CSS допускается форматировать различными способами. Определения можно располагать на одной строке, а можно после точки с запятой начинать новую строку. Это не окажет влияние на функционирование CSS, если следовать общему синтаксису: Selector {property1: value; property2: ->value; property3: value;}

Разнообразие в написании в большинстве случаев полезно. Если отделять определения CSS пробелами, их легче будет отыскать. Кроме того, это помогает находить ошибки. Во многих программах HTML-редактирования, таких как Adobe GoLive, можно устанавливать вид форматирования CSS.

Листинг 2.2 (окончание)

<h1>Alice's Adventures in ->Wonderland</h1> <h2>Lewis Carroll</h2> <p style="style: italic; ->font-family: monospace;"> ->THE MILLENIUM FULSCREEN ->EDITION 3.0</p> <h3>CHAPTER 1 <br>Down the Rabbit-Hole</h3> <p><span class="dropcap">A</span> ->lice was beginning to ->get very tired of sitting by her ->sister on the bank...</p> <p>So she was considering in her ->own mind...</p> <p>There was nothing so <i>very -></i> remarkablein that...</p> </div> </body> </html>

Добавление CSS на Web-сайт

Добавление CSS на Web-сайт Преимущество CSS заключается в том, что их допустимо использовать не только в одном документе, но и на всем сайте в целом. Внешние таблицы стилей можно применить к сотне HTML-документов, и для этого не потребуется никакого дополнительного программного кода. Создание внешнего CSS-файла состоит из двух этапов. Сначала в текстовом файле устанавливаются правила. Затем он импортируется или связывается с HTML-документом при помощи операции @import и/или тэга <link> соответственно (рис. 2.7). Связанные или импортированные CSS-файлы работают так же, как если бы тот же код помещался в файле, в который они импортированы или с которым связаны.

Рис. 2.7. Внешние CSS-файлы разрешается не только использовать во множественных HTML-документах, как в случае с CSS2, их можно также импортировать (но не связывать) в другой CSS-файл, как в случае с CSS3

4 4 Основы CSS

Создание внешнего CSS-файла 1. Создайте новый файл с помощью текстового процессора или любой другой программы, которая позволяет создавать текстовые файлы. Например, можно использовать Notepad или SimpleText (листинг 2.3). Во внешнем CSS-файле нельзя применять тэг <style>, иначе такая таблица не будет функционировать во многих браузерах. 2. h1 { Добавьте на страницу правило CSS, написав селектор для определяемого тэга и открывающую фигурную скобку. Селектор может принадлежать к одному из следующих типов: – селектор HTML-тэга (например, h1; см. «Переопределение HTML-тэга»); – селектор класса (например, myClass; см. «Определение классов для создания тэгов»); – ID-селектор (например, #object; см. «Определение ID для идентификации объекта»); – группа селекторов, разделенных запятой, то есть список определений (например, h1,h2,myClass; см. «Определение тэгов с помощью одинаковых правил»); – группа селекторов, разделенных пробелами, то есть контекстуальные определения (например, h1 myclass object; см. «Определение тэгов в контексте»). Заметьте, что в данном случае тэг <style> не используется. Если бы он присутствовал в коде, HTML-документ не стал бы работать.

Листинг 2.3. Внешний CSS-файл filename.css содержит определения, которые будут использоваться для создания макета страницы в листинге 2.4 и 2.5

h1 { font: italic small-caps bold 2.5em ->'minion web', 'Georgia', ->'Times New Roman', Times, serif; color: red; } h2 { font: bold 1.5em 'minion web', ->'Georgia', 'Times New Roman',Times, ->serif; }

Добавление CSS на Web-сайт Листинг 2.4. Внешний CSS-файл filename2.css содержит дополнительные определения, которые служат для создания макета страницы в листинге 2.4 и 2.5. Вы можете назвать эти файлы любым именем, filename здесь приводится в качестве примера

body { bacground: white url(alice23.gif) ->no-repeat; word-spacing: 1px; } #content { font-family:arial,helvetica, ->geneva,sans-serif; position: relative; top: 190px; left: 165px; width: 480px; } .dropcap { font: 300%/100% serif; color: #999999; margin-right: -3px; }

Рис. 2.8. Общий синтаксис ссылки на внешнюю таблицу стилей

3. font:small-capsbolditalic 2.5em ->'minionweb','Georgia','TimesNew ->Roman',Times,serif;color:red;} Напишите определения, которые нужно присвоить правилу в виде property:value, и поставьте точку с запятой, чтобы разделить различные определения в списке. 4. Закройте правило фигурной скобкой (}). 5. Повторите шаги 2–4 для всех селекторов, которые требуется задать. 6. Сохраните документ как filename.css, где filename представляет собой имя файла, которое вы можете выбрать по своему усмотрению, а .css – расширение, указывающее тип файла. Допускается создавать множество CSS-файлов и ссылаться на них в дальнейшем (листинг 2.4). 7. Присоедините этот файл к HTML-файлу, используя тэг <link>, или импортируйте его в HTML-файл или другой CSSфайл посредством операции @import. Внешние файлы таблиц стилей можно соединять с любыми HTML-файлами при помощи тэга <link>. Если ввести стили непосредственно в заголовке документа, то эффект будет таким же, как и при использовании внешнего CSS-файла. На рис. 2.8 представлен общий синтаксис ссылки на таблицы стилей, а на рис. 2.9 – ее результат.

4 6 Основы CSS

Создание ссылки на внешний CSS-файл 1. <link> Внутри тэга <head>...</head> в HTMLдокументе откройте тэг <link>, а после него введите пробел (листинг 2.5). 2. rel="stylesheet" Эта запись сообщает браузеру, что далее встретится ссылка на таблицу стилей. Рис. 2.9. Эта страница выглядит так же, как и на рис. 2.6 и 2.4. Но в данном случае используются внешние CSS-файлы

Листинг 2.5. Большинство примененных в этом документе стилей определены во внешних CSS-файлах filename.css и filename2.css, представленных в листингах 2.3 и 2.4. Исключение составляет тэг <body>, который задается локально. Он помещает на задний план картинку (рис. 2.9)

<html> <head> <link rel="stylesheet" href="filename.css"> <link rel="stylesheet" href="filename2.css"> <style media="screen" type="text/css"> body { background: white url(alice23.gif) no-repeat;} </style> </head> <body> <div id="content"> <br> <h1>Alice's Adventures in Wonderland</h1> <h2>Lewis Carroll</h2> <p style="style: italic; font-family: monospace;">THE MILLENNIUM ->FULSCREEN EDITION 3.0</p> <h3>CHAPTER 1 <br>Down the rabbit-Hole</h3> <p><span class="dropcap">A</span> lice was beginning to get very tired of sitting ->by her sister on the bank...</p> <p>So she was considering in her own mind...</p> <p>There was nothing so <i>very</i> remarkablein that...</p> </div> </body> </html>

Добавление CSS на Web-сайт

Рис. 2.10. Общий синтаксис импортирования внешней таблицы стилей

Рис. 2.11. Для создания этой страницы используются те же CSS-файлы, что и для страницы на рис. 2.9, но в данном случае файлы импортированы, а в тэге <body> определено другое изображение

3. href="filename.css" Укажите путь, глобальный или локальный, к тому CSS-файлу, на который требуется создать ссылку. Здесь filename – полный путь и имя (включая расширение) вашего CSS-документа. 4. > Закройте тэг <link> с помощью закрывающей угловой скобки. 5. <linkrel="stylesheet"href= ->"filename2.css"> Повторите шаги 1–5 столько раз, сколько таблиц стилей вам понадобится. 6. <styletype="text/css">...</style> Используя тэг <style>, добавьте в заголовок любые стили. Тэг <style> можно расположить и перед тэгом <link>. Импортировать внешнюю таблицу стилей в документ допустимо при помощи директивы @import. Этот метод не поддерживается Netscape 4, но удобен для добавления внешних CSS-файлов как в HTML-документ, так и в другие CSS-файлы, если вы пользуетесь Internet Explorer и Netscape 6. На рис. 2.10 представлен общий синтаксис для директивы @import, а на рис. 2.11 – результат импортирования таблицы стилей.

4 8 Основы CSS

Импортирование внешнего CSS-файла 1. <styletype="text/css"> В заголовке HTML-документа откройте тэг <style> (листинг 2.6). 2. @importurl(filename.css); Импортируйте CSS-файл. Имя файла – это URL используемого CSS-документа. URL может быть глобальным и начинаться с http:// или локальным, указывающим на файл, который находится на том же компьютере. 3. @importurl(filename2.css); Повторите шаг 3 для всех внешних CSSдокументов, которые требуется импортировать. 4. body{background:white ->url(alice40.gif)no-repeat;} Здесь вы можете добавлять дополнительные CSS-правила, если это необходимо (см. предыдущий раздел). 5. </style> Закройте тэг стиля.

Листинг 2.6. Для импортирования CSS-файла в HTML-документ используется операция @import вместо тэга <link>. Конечный результат тот же, хотя операция импорта не поддерживается Netscape 4

<html> <head> <style media="screen" type="text/css"> @import url(filename.css); @import url(filename2.css); body { background: white ccurl(alice40.gif) no-repeat; } </style> </head> <body> <div id="content"> <br> <h2>CHAPTER 11<br> Who Stole the Tarts?</h2> <p><span class="dropcap">T</span> ->he King and Queen of Hearts were ->seated on there throne...</p> </div> </body> </html>

Тэг <link> можно поместить непосредственно во внешней таблице стилей. Тогда импортированный файл будет включен в документ как часть внешнего CSS-файла.

CSS-файл не должен содержать HTML-тэги (даже тэг <style>) или другую информацию, кроме комментариев и импортированных стилей.

Поскольку Netscape 4 не поддерживает операцию импорта, предпочтительней использовать тэг <link>. Однако директива @import вполне применима для Netscape 6.

При работе с CSS-файлами необязательно использовать расширение .css. Вы можете назвать файл просто filename, на его функционировании отсутствие расширения не отразится. Но все же лучше добавлять расширения, чтобы избежать путаницы.

Вы можете назвать внешний CSS-файл любым именем, однако рекомендуется, чтобы оно имело отношение к стилям, описанным в файле. Например, имя navigation.css скажет о содержании файла больше, чем css1.css.

Если при работе с Netscape 4 документ перезагружается из кэша, то таблицы стилей могут исчезнуть. Об этой проблеме рассказано в разделе «Исправление ошибки в Netscape CSS » главы 22.

Переопределение HTML-тэга

Рис. 2.12. Общий синтаксис для определения стилей в HTML-тэге

Рис. 2.13. Некоторые HTML-тэги были переопределены. Тэг <p> теперь применяет к тексту следующий стиль: серый цвет, шрифт Verdana, размер 12 пунктов, полуторный интервал между строками. Кроме того, картинки выравниваются по правому краю, то есть изменился тэг <img>, а тэг <i> придает шрифту полужирное начертание

У многих HTML-тэгов уже есть встроенные определения, например у тэга <bold>. Его встроенное свойство эквивалентно font-weight:bold. На рис. 2.12 представлен общий синтаксис полного CSS-правила с использованием HTML-селектора. Добавляя определения в b – селектор тэга <b>, – вы можете изменять действие этого парного тэга на его содержимое (рис. 2.13). HTML-селекторы можно определять внутри тэга <style>...</style> в заголовке документа (см. раздел «Добавление CSS на Web-страницу» ранее в этой главе) или во внешнем CSS-файле, который потом импортируется или связывается с HTML-документом (см. раздел «Добавление CSS на Web-сайт»).

Определение HTML-селектора 1. p{ Начните с HTML-селектора, свойства которого требуется определить, и добавьте открывающую круглую скобку, чтобы открыть правило (листинг 2.7). 2. color:#666666 font-size: 12px; line-height: 18px; font-family: Verdana, Arial, Helvetica, ->Geneva, sans-serif; Напишите определения свойств. Допускается добавлять столько определений, сколько потребуется, однако эти свойства должны работать с рассматриваемым HTML-тэгом. Например, нельзя использовать текстовый отступ для описания тэга <bold>. В приложении 2 сказано, какие свойства можно использовать для переопределения конкретных тэгов.

5 0 Основы CSS 3. } Список определений должен завершаться закрывающей фигурной скобкой. Если ее не поставить, можно испортить всю работу. Переопределение тэга автоматически переносится на все аналогичные тэги, которые встретятся в дальнейшем. Синтаксис слегка отличается от синтаксиса для переопределения отдельного HTMLтэга в документе (см. раздел «Добавление CSS в HTML-тэг»). Переопределение тэга не влияет на его первоначальные свойства. Следовательно, тэг <b> независимо от внесенных изменений будет придавать шрифту полужирное начертание (см. «Управление существующими или наследованными значениями свойств»). Таким способом можно переопределить и тэг <body>. Теоретически он действует как тэг блок-уровня (см. раздел «Типы HTMLтэгов» в главе 1), однако Internet Explorer для Windows не распознает позиционирование в данном тэге. Если вы хотите позиционировать все объекты на странице, нужно делать это на уровне CSS (см. раздел «Создание HTMLтэгов блок-уровня» ниже).

Листинг 2.7. Обычно тэг <p> просто оставляет пустые строки между абзацами. После добавления нескольких стилей этот тэг меняет цвет текста, шрифт, которым он набран, и размер шрифта, по-прежнему оставляя пустые строки (рис. 2.13)

<html> <head> <style type="text/css"> p{ color: #666666 font-size: 12px; line-height: 18px; font-family: Verdana, Arial, ->Helvetica, Geneva, sans-serif; } img { float: right; } i { font-weight: bold; } </style> </head> <body> <div align="left"> <h3>CHAPTER 5<br> Advice from a Caterpillar</h3> </div> <p><img scr="alice15.gif" width="200" ->height="264" border="0">The ->Caterpillar and Alice looked at ->each other for some time in ->silence: at last the Caterpillar ->toot the hookah out of his mouth, ->and adrressed her in a languid, ->sleepy voice.</p> <p>'Who are <i>you</i>?' said the ->Caterpillar.</p> </body> </html>

Определение классов для создания тэгов

Рис. 2.14. Общий синтаксис CSS-класса

Рис. 2.15. Общий синтаксис зависимого класса. Определения для этой версии copy будут работать только в том случае, если их применить к тэгу <blockquote>

Рис. 2.16. Класс copy применен ко всем тэгам <p>. Текст печатается шрифтом Trebuchet MS 12 пунктов с полуторным интервалом между строками. Тэг <blockquote> распознает copy как зависимый класс, текст печатается полужирным шрифтом Book Antiqua 14 пунктов, высота строки меньше, текст выровнен по центру

Использование селектора класса позволяет устанавливать независимые стили, которые потом можно применять к любому HTMLтэгу. На рис. 2.14 и 2.15 представлен общий синтаксис CSS-правила класса. HTML-селектор отличается от класса тем, что он автоматически определяет конкретный тип тэга, а классу дается уникальное имя, которое потом указывается в HTMLтэге или тэгах, используемых с атрибутом стиля (рис. 2.16). Правила класса можно определять внутри тэга <style>...</style> в заголовке документа (см. раздел «Добавление CSS на Web-страницу» ранее в этой главе) или во внешнем CSS-файле, который затем импортируется в HTML-документ или связывается с ним при помощи ссылки (см. выше раздел «Добавление CSS на Webсайт»).

5 2 Основы CSS

Определение селектора класса 1. .copy{ Введите имя класса с предваряющей его точкой (.), затем откройте определение с помощью фигурной скобки ({). Имя класса может быть любым, но оно должно содержать только буквы и цифры. Поскольку класс copy независимый, его можно использовать с любым HTML-тэгом, однако установленные для класса свойства должны поддерживаться типом применяемого тэга (листинг 2.8). 2. font-size:12px; line-height: 150%; font-family: “Trebuchet MS”, Arial, ->Helvetica, Geneva, sans-serif; Напишите определения этого класса и убедитесь, что они разделены точкой с запятой. 3. } Завершите правило закрывающей фигурной скобкой. Класс, не определенный внутри HTMLтэга документа, не будет работать.

Листинг 2.8. Стиль класса можно устанавливать и применять с любым HTML-тэгом, как в случае с copy, либо только с одним тэгом, как в случае с blockquote.copy

<html> <head> <style type="text/css"> .copy { font-size: 12px; line-height: 150%; font-family: "Trebuchet MS", Arial, ->Helvetica, Geneva,sans-serif; } blockquote.copy { font-weight: bold; font-size: 14px; line-height: 16px; font-family: "Book Antiqua", "Times ->New Roman", Georgia, Times, serif; text-align: center; } </style> </head> <body> <p class="copy">Alice glanced rather ->anxiously at the cook...</p> <p class="copy">'Oh, don't bother ->ME,'...</p> <blockquote class="copy"> <p> 'Speak roughly to your little boy, <br> And beat him when he sneezes:<br> He only does it to annoy,<br> Because he knows it teases.'<br><br> CHORUS</p> </blockquote> </body> </html>

Определение классов для создания тэгов

Применение класса к HTML-тэгу Зависимые классы Если класс непосредственно связан с HTML-тегом, такой класс называют зависимым. Это означает, что данный класс можно использовать только вместе с данным HTML-тэгом. На рис. 2.15 представлен синтаксис зависимого класса. Зачем привязывать класс к одному конкретному тэгу? С помощью зависимого класса можно добавлять существующие определения класса, которые будут работать только в том случае, если класс находится в конкретном тэге. Например, вы хотите, чтобы класс copy в общем случае придавал шрифту требуемый размер, но если этот класс находится внутри тэга <blockquote>, можно сделать так, что кроме увеличения размера он будет придавать тексту полужирное начертание.

1. <p class="copy">...</p> Добавьте class="classname" в тэг, к которому вы хотите применить класс. Заметьте, что хотя при определении класса внутри <style>...</style> вы и пишете точку, она не используется при ссылке на имя класса в тэге. Внутри HTML-тэга можно сочетать класс с ID или inline-правилами (см. разделы «Добавление CSS в HTML-тэг» и «Определение ID для идентификации объекта»). В качестве имени класса нельзя использовать зарезервированные слова JavaScript. Эти слова перечислены в приложении 3. Для создания собственных HTML-тэгов удобны классы с тэгами <div> и <span> (см. разделы «Создание inline-тэгов» и «Создание HTML-тэгов блок-уровня» этой главы).

5 4 Основы CSS

Определение ID для идентификации объекта Как и селектор класса, ID-селектор можно использовать для создания уникальных, независимых от конкретного HTML-тэга стилей. Таким образом, их легко приписать любому применяемому тэгу. На рис. 2.17 представлен общий синтаксис ID. ID – основное понятие динамического HTML (DHTML). С помощью ID функция JavaScript определяет уникальный объект на экране. Это означает, что в отличие от класса ID обычно используется на странице один раз и определяет один элемент как объект. Этим объектом затем можно управлять с помощью JavaScript (рис. 2.18). ID допускается определять внутри тэга <style>...</style> в заголовке документа (см. раздел «Добавление CSS на Webстраницу» ранее в этой главе) или во внешнем CSS-файле, который затем импортируется в HTML-документ или связывается с ним при помощи ссылки (см. выше раздел «Добавление CSS на Webсайт»). Чтобы определить ID, нужно выполнить следующие действия: 1. #area1{ ID-правила всегда начинаются со знака решетки (#), затем вводится имя ID. В качестве имени можно использовать любой набор букв и цифр (листинг 2.9). 2. color:red; margin-left:9em;position: ->relative; Через точку с запятой напишите определения этого класса.

Рис. 2.17. Общий синтаксис ID

Рис. 2.18. В результате установки левого поля слой area1 сдвинут вправо, а текст обтекает слой image1

ID можно использовать с любым типом свойств, но ID-селектор лучше всего применять при описании уникального объекта на экране. 3. } Закройте правило с помощью фигурной скобки (}). ID, не определенный внутри HTML-тэга документа, не будет работать.

Определение ID для идентификации объекта Листинг 2.9. ID area1 определяет границы изменяемой области в HTML-документе (рис. 2.18)

<html> <head> <style type="text/css"> #area1 { color: red; margin-left: 9em; position: relative; } #image1 {float: left; } </style> </head> <body> <p>'Well!' thought Alice to ->herself, 'after such a fall ->as this I shall think nothing of ->tumbling down stairs!...</p> <p id="area1"><img id="image1" ->scr="alice06.gif" ->width="163" height="200" ->border="0">Down, down, down. ->Would the fall <i>never</i> ->come to an end!...</p> <p>Presently she began again. 'I ->wonder if I shall fall right -><i>through</i> the earth!...</p> </body> </html>

Применение ID к HTML-тэгу 1. <p id="area1">...</p> Добавьте id="idName" в выбранный HTML-тэг, как показано в листинге 2.9. Как объяснялось ранее в этой главе, величина ID-атрибута является именем созданного вами ID-селектора. Заметьте, что хотя при определении ID вы и вводите символ решетки (#), она не используется при ссылке на ID в HTML-тэге. Внутри HTML-тэга можно сочетать ID с inline-правилами или правилами класса (см. разделы «Добавление CSS в HTMLтэг» и «Определение ID для идентификации объекта»). В качестве имени ID нельзя использовать зарезервированные слова JavaScript. Эти слова перечислены в приложении 3. Разница между ID и классами станет более очевидной после того, как вы познакомитесь с CSS-позиционированием и сами создадите CSS-слои с помощью ID. ID используются для того, чтобы присвоить каждому элементу на экране уникальное имя и идентификатор. Поэтому ID применяется в документе только один раз для элемента, который становится объектом, управляемым с помощью JavaScript.

5 6 Основы CSS

Создание inline-тэгов Вы уже узнали, как изменить HTML-тэги при работе с CSS. Почти все HTML-тэги содержат свойства, которые вы либо принимаете, либо переопределяете (см. раздел «Управление существующими или наследованными значениями свойств»). Например, тэг <b> функционирует так, как если бы имелось правило "font-weight: bold". Что делать, если вы хотите создать свой тэг? Нельзя создать собственный HTMLтэг за одну секунду, но все же для приближения к этой цели удобны тэги <span> или <div>, классы или ID. У тэга <span> нет наследованных свойств. Он своего рода чистый лист для создания вашего inline-тэга (рис. 2.19). В следующем примере установлены два стиля (листинг 2.10). Первый стиль – это класс, с помощью которого особо оформляется первая строка. Второй стиль делает фон позади текста розовым, тем самым как бы подсвечиваются смысловые выделения (рис. 2.19). CSS допустимо определять внутри тэга <style>...</style> в заголовке документа (см. раздел «Добавление CSS на Web-страницу») или во внешнем CSS-файле, который затем импортируется в HTML-документ либо связывается с ним (см. раздел «Добавление CSS на Web-сайт»).

Рис. 2.19. Первая строка текста особым образом выделена, а важные части помечены другим цветом

Листинг 2.10. Чтобы создать inline-тэг, нужно определить класс или ID и применить их к тэгу <span>. В примере ID используется для придания соответствующего вида первой строке, а класс – для подсветки отдельных частей текста

<html> <head> <style type="text/css"> #firstline { color: red; font: italic bold 14px/100% "Book ->Antiqua", "Times New Roman", Georgia, ->Times, serif; } span.highlight {background-color: ->#ffcccc; } </style> </head>

Создание inline-тэгов Листинг 2.10 (окончание)

<body> <h3>CHAPTER 4<br> The Rabbit Sends in a Little Bill</h3> <p><span id="firstline">It was the White ->Rabbit</span>,trotting slowly back ->again, and looking anxiously about as ->it went, as if it had lost something; ->and she heard it muttering to itself ->'The Duchess! The Duchess! Oh my dear ->paws! Oh my fur and whiskers! She'll ->get me executed, as sure as ferrets ->are ferrets! Where <i>can</i> I have ->dropped them, I wonder?' Alice guesses ->in a moment that it was looking for -><span class="highlight">the fan and the ->pair of white kid gloves</span>, and ->she very good naturedly began hunting ->about for them, ->but<span class="highlight"> ->they were nowhere to be seen</span>->everything seemed to have changed since ->her swim in the pool, and the great ->hall, with the glass table and the ->little door, had vanished completely. -></p> </body> </html>

Создание inline-тэга 1. #firstline{...} span.highlight{... } Создайте ID-правило стиля или правило стиля для класса (см. разделы «Определение классов для создания тэгов» и «Определение ID для идентификации объекта»). 2. <span id="firstline">...</span> <span id="highlight">...</span> В HTML добавьте ID-атрибут и/или атрибут класса в тэг <span> (см. раздел «Переопределение HTML-тэга»). Помните, что CSS-правила можно поместить как в заголовке документа, так и во внешнем файле, который потом импортируется в документ или связывается с ним. Заметьте, что в примере перед селектором класса стоит HTML-селектор span. Это ограничивает применение класса: данные определения действуют, только если класс используется в этом тэге. ID будет относиться к конкретному типу тэга, если его описать с помощью CSS2. К сожалению, Netscape 4 не поддерживает эту возможность и игнорирует ID.

5 8 Основы CSS

Создание HTML-тэгов блок-уровня В предыдущем разделе рассказывалось, как создавать с нуля собственные тэги, которые затем можно поместить в другие, то есть сформировать inline-тэги. Но иногда требуется создать блок, который отделялся бы от остального содержания документа (рис. 2.20). Единственное наследованное свойство тэга <div> заключается в том, что он оставляет промежуток до и после своего содержимого. Поэтому его удобно использовать для создания тэга, похожего на абзац, не прибегая к помощи тэга <p>. В следующем примере установлены два стиля (листинг 2.11). Первый стиль – это ID, с помощью которого определяется вид и местоположение на странице блока с названием. Второй стиль задает вид и положение блока остального текста страницы. CSS допустимо определять внутри тэга <style>...</style> в заголовке документа (см. раздел «Добавление CSS на Webстраницу») или во внешнем CSS-файле, который затем импортируется в HTMLдокумент либо связывается с ним (см. раздел «Добавление CSS на Web-сайт»).

Рис. 2.20. Название страницы написано красным цветом на черном фоне и помещено в блок, а содержание страницы находится в блоке с серым фоном

Листинг 2.11. Чтобы создать тэг блок-уровня, нужно сначала создать тэг класса или ID-тэг, которые применяются в тэге <div>. В этом примере ID используется для форматирования названия страницы, а класс – для изменения остального текста (рис. 2.20)

<html> <head> <style type="text/css"> #title9 { color: red; background-color: black; layer-background-color: #000000; padding: 5px; font: 1.45em Arial, Helvetica, Geneva, ->sans-serif; position: absolute; top: 10px; left:10px; width:200px; }

Создание HTML-тэгов блок-уровня

Листинг 2.11 (окончание)

Создание тэга блок-уровня

div.content { color: black; backcolor-color: #cccccc; layer-background-color: #cccccc; padding: 10px; font: 12px/14px "Book Antiqua", "Times ->New Roman", Georgia, Times, serif; position: absolute; top: 10px; left: 220px; width: 350px; } </head>

1. #title9{...} div.content {...} Создайте ID-правило стиля или правило стиля для класса (см. разделы «Определение классов для создания тэгов» и «Определение ID для идентификации объекта»). 2. <divid="title9">...</div> <div class="content">...</div> В HTML добавьте ID-атрибут и/или атрибут класса в тэг <div> (см. раздел «Переопределение HTML-тэга»).

<body> <div id="title9"> <h3>CHAPTER 9<br> The Mock Turtle's Story</h3> </div> <div class="content"> <p>'You can't think how glad I am to see ->you again, you dear old thing!' said ->the Duchess, as she tucked her arm ->affectionately into Alice's, and they ->walked off together.</p> </div> </body> </html>

Помните, что CSS-правила можно поместить как в заголовке документа, так и во внешнем файле, который потом импортируется в документ или связывается с ним. Теоретически вместо тэга <div> можно использовать тэг <p>. Но обычно документ разбит на множество абзацев, а далеко не все браузеры способны применять позиционные стили к тэгу <p>. Прежде чем применять CSS и JavaScript для создания документов с динамическими эффектами, нужно хорошо ознакомиться с этими инструментами. DHTML основывается на слоях, созданных с помощью атрибута id внутри тэга <div>. Получающимися в результате объектами можно управлять посредством JavaScript.

6 0 Основы CSS

Определение тэгов с помощью одинаковых правил Если требуется, чтобы несколько селекторов имели одинаковое определение, запишите эти селекторы через запятую. Общий синтаксис для группы определений представлен на рис. 2.21. В списке можно определить качества, а затем добавить правила для каждого HTMLтэга отдельно (рис. 2.22). CSS допустимо определять внутри тэга <style>...</style> в заголовке документа (см. раздел «Добавление CSS на Web-страницу») или во внешнем CSS-файле, который затем импортируется в HTML-документ либо связывается с ним (см. раздел «Добавление CSS на Web-сайт»).

Рис. 2.21. Общий синтаксис для списка селекторов с одним и тем же определением

Рис. 2.22. Заголовки и абзацы напечатаны одним и тем же шрифтом и имеют одинаковые поля

Определение тэгов с помощью одинаковых правил Листинг 2.12. Определив для нескольких селекторов одно и то же правило, вы уменьшите время загрузки страницы (рис. 2.22)

<html> <head> <style type="text/css"> h1,h2,h3,p { font-family: "Book Antiqua", "Times ->New roman", Georgia, Times, serif; margin-left: 10px; font-variant: small-caps; } h1,h2,.dropcap { font-size: 1.5em; line-height: 100%; color: red; } h3 { margin-top: 25px; border-top: 2px solid black; } p { font variant: normal; } </style> </head> <body> <h1>Alice's Adventures in Wonderland -></h1> <h2>Lewis Carroll</h2> <h3>CHAPTER 1<br> Down the Rabbit-Hole</h3> <p><span class="dropcap">A</span> lice ->was beginning to get very tired of ->sitting by her sister on the bank...</p> </body> </html>

Создание группы определений 1. h1,h2,h3,p{...} Напишите несколько HTML-селекторов через запятую (листинг 2.12). Таким образом, у них будет одно и то же определение. 2. h3{...} При необходимости определение каждого селектора можно поменять. Если вы хотите перекрыть набор определений в группе правил, убедитесь, что в CSS эти правила идут после группы правил (см. раздел «Определение каскадного порядка»). В списке можно также определять ID и классы: h1,h2,.dropcap{...}.

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

6 2 Основы CSS

Определение тэгов в контексте Если один тэг окружен другими, такая комбинация называется набором тэгов. Здесь внешний тэг называется родительским (parent), а внутренний – дочерним (child). Чтобы создать правило для тэга, являющегося ребенком, можно использовать CSS. На рис. 2.23 представлен общий синтаксис для контекстуальных селекторов. В примере (листинг 2.13) тэг <link> переопределен таким образом, что он функционирует по-разному в зависимости от того, где находится, – в тэге <p> или в тэге <div> (рис. 2.24).

Рис. 2.23. Общий синтаксис контекстуального правила

Рис. 2.24. Во всех ссылках используется тэг <a>. Но на странице представлены два разных стиля, которые появляются в зависимости от расположения тэга <link>

Листинг 2.13. Контекстные CSS позволяют устанавливать стили HTML-тэгов в зависимости от их родительских характеристик. В этом примере для тэга <link> созданы два стиля. Один используется внутри абзаца, другой – если ссылка находится внутри тэга <div> с menu class

<html> <head> <style type="text/css"> p a:link { color: red; text-decoration: underline; }

Определение тэгов в контексте

Листинг 2.13 (окончание)

Создание контекстуального селектора

div.menu a:link { color: #900; font-weight: bold; text-decoration: none; }

1. pa:link{...} div.menu a:link{...} Введите HTML-селектор родительского тэга, затем нажмите клавишу пробела. Вы можете написать столько HTMLселекторов, сколько потребуется. Но именно последний селектор будет обладать всеми стилями, перечисленными в правиле. 2. <divclass="menu"><ahref="#">...</a> -><p><a href="#">...</a></p> Ссылка выделяется ярко-красным цветом только в том случае, если она находится внутри абзаца. Ссылка отмечается малиновым цветом и не подчеркивается, если она располагается в тэге <div> с указанным классом menu.

div.menu { font: bold 16px "Trebuchet ->MS", Arial, Helvetica, Geneva, ->sans-serif; } p { font: 12px "Book Antiqua", "Times ->New Roman", Georgia, Times, serif; } </style> </head> <body> <div class="menu"> <a href="#">&lt; Previous Chapter</a> | -><a href="#">Next Chapter &gt</a> </div> <hr> <h3>CHAPTER 8<br> The Queen's Croquet-Ground</h3> <p>A large rose-tree stood near the ->entrance of the garden: the roses ->growing on it were white, but there ->were three gardeners at it, busily ->painting them red/ Alice thought ->this <a href="#">a very curious thing -></a>, and she went nearer to watch ->them, and just as she came up to them ->she heard one of them say, 'Look out ->now, Five! Don't go splashing paint ->over me like that!'</p> </body> </html>

Как и в случае с группой селекторов, в список контекстуальных селекторов наряду с HTML-селекторами допускается включать селекторы классов (зависимых или независимых) и/или ID-селекторы.

6 4 Основы CSS

Значение !important Значение !important служит для того, чтобы присвоить определению максимальный приоритет в каскадном порядке (см. раздел «Определение каскадного порядка»). На рис. 2.25 показано, как использовать это значение. В примере (листинг 2.14) тэг <p> переопределен, а определениям размера шрифта (font-size) и типа шрифта (font-family) присваивается значение !important. Также определен класс copy, который применяется к тэгу <p>, причем определению типа шрифта присвоен максимальный приоритет. В результате текст печатается шрифтом, размер которого зависит от правила тэга <p>, а тип – от правила класса copy (рис. 2.26). CSS допустимо определять внутри тэга <style>...</style> в заголовке документа (см. раздел «Добавление CSS на Web-страницу») или во внешнем CSS-файле, который затем импортируется в HTML-документ либо связывается с ним (см. раздел «Добавление CSS на Web-сайт»).

Присвоение значения !important 1. p{ Откройте CSS-правило с помощью селектора и фигурной скобки ({). Можно использовать HTML-селектор класса или ID.

Рис. 2.25. Общий синтаксис использования значения !important

Рис. 2.26. Из-за того что в тэге <p> размеру шрифта присваивается максимальный приоритет, предыдущее правило, определяющее размер шрифта в классе copy, перекрывается, и шрифт увеличивается до 16 пунктов вместо 10. Несмотря на то что и в тэге <p>, и в классе copy типу шрифта присваивается максимальный приоритет, определение класса имеет преимущество перед определением тэга (см. раздел «Определение каскадного порядка»), и текст печатается шрифтом Times, а не Arial

Значение !important Листинг 2.14. При выборе определений, которые нужно применить к HTML-документу, предпочтение отдается тем из них, которые помечены !important. В данном примере установлено два правила. В первом определяется размер, тип, цвет шрифта в тэге <p>. Во втором определяется класс copy, который затем используется в тэге <p>. Этот класс также меняет размер, тип и цвет шрифта. Правила класса должны перекрывать правила тэга, но все происходит как раз наоборот, потому что применяется значение !important

<html> <head> <style type="text/css"> p{ font-size: 16px !important; font-family: arial, helvetica, geneva, ->sans-serif !important; color: black; }

2. font-size:16px!important; Введите определение стиля, затем пробел и !important. Поставьте точку с запятой, чтобы закрыть правило. 3. font-family: arial, helvetica, geneva, sans-serif!important;color:black;} Добавьте в это определение любые нужные вам правила, которым также можно присвоить максимальный приоритет. Закройте правило с помощью фигурной скобки (}). 4. p.copy{...} Добавьте другие правила и присвойте их определениям максимальный приоритет, если это необходимо. Netscape 4 не поддерживает !important.

p.copy { font-size: 10px; font-family: "Times New Roman", Georgia, ->serif !important; color: red; }

Новички часто пишут в определении !important после точки с запятой. Это может привести к тому, что браузер проигнорирует определение, а возможно, и все правило.

</style> </head> <body> <h3>CHAPTER 10<br> The Lobster Quadrille</h3> <p class="copy">The Mock Turtle sighed ->deeply, and drew the back of one flapper ->across his eyes...</p> </body> </html>

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

6 6 Основы CSS

Наследование родительских свойств У всех HTML-тэгов, которыми можно управлять с помощью CSS, кроме тэга <body>, есть родитель, то есть тэг-контейнер, который его окружает. HTML-тэги обычно обладают теми же свойствами, что и их тэги-родители. Это так называемое наследование стилей. Например, набор цветов, описанный в тэге <body>, используется во всех тэгах, находящихся внутри него (листинг 2.15, рис. 2.27 и 2.28).

Рис. 2.27. Тэг <body> установлен для стиля шрифта Times. Это наследуется тэгом <b>, который назначает шрифту красный (red) цвет и полужирное (bold) начертание. Тэг <i> наследует все эти стили и добавляет свой стиль – курсив (italic)

Листинг 2.15. Тэг <body> устанавливает стиль шрифта и цвет фона. Стиль шрифта наследуется тэгом <p>, так как тэг <body> является его родителем, но <p> меняет цвет фона. Тэг <i> наследует стили <body>, но также определяет собственный цвет фона (рис. 2.28)

<html> <head> <style type="text/css"> body {font: 16pt/20pt times, serif; color: red; background-color: #999999;} p {background-color: #cccccc;} i {background-color: #ffffff;} </style> </head>

Наследование родительских свойств

Некоторые свойства не наследуются тэгами, например поля (margins), ширина (width), границы (border). Вам не составит труда выяснить, какое свойство наследуется, а какое – нет. В приложении 2 перечислены все существующие свойства, и для каждого из них указано, может ли это свойство наследоваться.

Рис. 2.28. Как тэг <p>, так и тэг <i> наследуют цвет и тип шрифта от тэга <body>. Но светлосерый цвет фона, установленный в тэге <p>, перекрывает цвет, заданный в <body>. А белый цвет фона, указанный в тэге <i>, отменяет светло-серый

Листинг 2.15 (окончание)

<body> <p>She waited for some time without hearing anything more: at last came a rumbling ->of little cartwheels, and the sound of a good many voices all talking together: she ->made out the words:<i> 'Where's the other ladder&–Why, I hadn't to bring but one; ->Bill's got the other–Bill! Fetch it here,lad!–Here, put 'em up at this corner–No, ->tie 'em together first–they don't reach half high enough yet–Oh! They'll do well ->enough; don't be particular–Here, Bill! Catch hold of his rope–Will the roof bear?– ->Mind that loose slate–Oh,it's coming down! Heads below!'</i> (a loud crash)–'Now, ->who did that?–It was Bill, I fancy–Who's to go down the chimney?–Nay, I shan't! You ->do it!–That I won't, then! Bill's to go down–Here, Bill! The master says you're to ->go down the chimney!'</p> </body> </html>

6 8 Основы CSS

Управление существующими или наследованными значениями свойств Если переопределить селектор, он не потеряет наследованные свойства. Тэг, переопределенный с помощью CSS, также сохраняет свои свойства. Все они действуют до тех пор, пока не поменяются существующие специфические свойства, которые задают вид страницы (рис. 2.29). С помощью CSS можно переопределить тэг <b> таким образом, чтобы он увеличил размер шрифта и выделил текст курсивом: b{font-size:larger;font-style:italic;} Текст будет оформляться полужирным начертанием, хотя это и не предусмотрено в CSS-определении. Однако можно сделать так, что тэг <b> не станет делать текст полужирным. Для этого нужно изменить свойство ширины шрифта (font-weight): p ->b{font-weght:normal;} Когда тэг <b> находится внутри абзаца, его обычное действие не учитывается (листинг 2.16).

Рис. 2.29. По странному стечению обстоятельств светлый шрифт превратился в полужирный и наоборот

Управление существующими или наследованными значениями свойств 6 9 Листинг 2.16. Тэг <p> придает шрифту полужирное начертание только при том условии, что текст не находится внутри тэга <b>. В этом случае присущее тэгу <b> свойство делать шрифт полужирным и то же свойство, наследованное им от тэга <p>, перекрываются

<html> <head> <style type="text/css"> p { font-weight: bold; } p b { font-weight: normal; } .nobold { font-weight: normal; } </style> </head> <body> <h3>CHAPTER 7<br> A Mad Tea-Party</h3> <p>There was a table set out under a tree ->in frontt of the house, and the March ->Hare and the Hatter were having tea at ->it: a<b>Dormoise was sitting between ->them, fast asleep, and the other two ->were using it as a cushion, resting ->there elbows on it, and talking over ->its head.</b> 'Very uncomfortable for ->the Dormouse,' thought Alice; 'only, ->as it's asleep, I suppose it doesn't ->mind.'</p> <p>The table was a large one, but the ->three were all crowded togetherat one ->cornerof it: "No room!' they cried ->outwhen they saw Alice coming. 'There's -><i>plenty</i> of room!' said Alice ->indignantly, and she sat down in a ->large arm chair at one end of the ->table.</p> <p class="nobold">'Have some wine" the ->March Hare saidin an encouriging ->tone.</p> </body> </html>

Наследованные свойства (см. предыдущий раздел) можно отменить. Для этого нужно просто удалить свойство из списка определений тэга-потомка, списка стилей заголовка или конкретного тэга. Например, в листинге 2.16 класс .nobold можно применить к тэгу <p>, и определение начертания шрифта (в примере это полужирный шрифт) перекроется. При использовании Netscape вы не сможете удалить существующие значения. Их разрешается переопределить, но не перекрыть. Если вы установите в тэге <b> обычное начертание шрифта, Netscape все равно отобразит текст полужирным.

7 0 Основы CSS

Определение каскадного порядка Таблицы стилей внутри одной Web-страницы могут быть связанными, импортированными, встроенными и даже inline-таблицами. Во многих браузерах пользователи могут создавать собственные таблицы стилей и задействовать их поверх ваших. Естественно, что при применении двух или более таблиц стилей одновременно появится проблема выбора определения, которое имеет больший приоритет. Какое важнее? Разгадка кроется в самом названии каскадных таблиц стилей. Каскадный порядок в подобных ситуациях определяется по следующим правилам: существование атрибута !important. Определению присваивается максимальный приоритет, если этот атрибут в нем присутствует (см. раздел «Значение !important»). Многие браузеры позволяют пользователю создавать собственные таблицы стилей. Теоретически, если и автор страницы, и посетитель включили в определение значение !important, то преимущество получит определение автора. Однако все браузеры, протестированные мною, отдают предпочтение стилям пользователя; источник правил. Таблица стилей автора страницы должна перекрывать таблицу стилей пользователя, если последний не включил атрибут !important. На самом деле браузеры скорее отдадут предпочтение таблицам стилей пользователя, а не Web-дизайнера;

Листинг 2.17. Файл global.css. В этой версии на сайте используется CSS, которая определяется по умолчанию, а для тэга <h3> назначается правило

h3 { color: blue; }

Листинг 2.18. HTML-файл index.html связан с внешним файлом global.css. Цвет текста определяется в <h3>, но перекрывается в тэге <style>. Цвет, установленный в <h3>, перекрывает все другие определения цвета (рис. 2.30)

<html> <head> <link rel="stylesheet" href="global.css"> <style type="text/css"> h3 { color: lime; } </style> </head> <body> <h3 style="color: red">CHAPTER 10<br> The Lobster Quadrille</h3> <p>The Mock Turtle sighed ->deeply...</p> </body> </html>

Определение каскадного порядка

специфичность. Чем специфичней правило, тем выше его каскадный приоритет. Значит, чем больше в правиле HTML-селекторов, ID-селекторов или селекторов класса, тем оно важнее. При определении приоритета ID-селекторы получают 100 очков, классы – 10, а HTML-селекторы – всего одно очко. Следовательно, селекторы OL OL OL.cool приобретают вес 13 (то есть 1+1+1+10), а вес P равен единице. Такая установка приоритета может показаться странной, но она позволяет присвоить больший вес контекстным и ID-правилам и гарантирует их использование; последний выигрывает. CSS считает более приоритетным последнее из перечисленных правил. Это особенно полезно, если вы включаете определение в строку, чтобы перекрыть установки стилей, перечисленные в заголовке;

Рис. 2.30. Текст внутри тэга <h3> должен сначала отображаться синим, а затем лимонным цветом. Но цвет данного текста – красный, так как именно он был определен последним

существующие или наследованные свойства. Любые стили либо являются наследованными, либо присущи тэгу с самого начала. И те, и другие применяются на практике. Воспользовавшись этими правилами в листингах 2.17 и 2.18, мы получаем результат, представленный на рис. 2.30.

7 2 Основы CSS

Настройка CSS для печати При упоминании Web-страницы многие представляют, как она выглядит на экране (рис. 2.31). Но рано или поздно вам понадобится распечатать несколько страниц (рис. 2.32). Элементы, которые хорошо смотрятся на экране, не всегда выглядят так же на бумаге.

Настройка таблицы стилей для конкретной среды 1. Создайте две внешние таблицы стилей. Одна будет использоваться на экране компьютера, а другая – относиться к принтеру (см. раздел «Добавление CSS на Web-сайт»). В примере (листинг 2.19) текст на экране отображается белым цветом на черном фоне. Это, безусловно, выглядит хорошо. Но если вы захотите распечатать эту страницу, результат вам не понравится, к тому же значительно пострадает картридж принтера. Версия для печати (листинг 2.20) содержит, наоборот, черный текст на белом фоне (бумаги).

Рис. 2.31. То, что вы видите на экране, не похоже...

Рис. 2.32. ...на то, что распечатал принтер

Настройка CSS для печати Листинг 2.19. Таблица стилей screen.css определяет вид HTML-страницы, описанной в листинге 2.21, на экране

body { color:white; font-family: arial, helvetica, geneva, ->sans-serif; background: black url(alice23.gif) ->nî-repeat; word-spacing: 1px; position: relative; top: 200px; left: 165px; width: 480px; }

2. <linkrel="stylesheet"href="print.css" ->media="print"> В заголовке HTML-документа напишите тэг <link>, который ссылается на версию CSS для печати и присваивает свойству media значение "print" (листинг 2.21). 3. <linkrel="stylesheet"href="screen.css" ->media="screen"> Сразу после тэга <link> для печатной версии введите тот же тэг для версии на экране и присвойте media="screen".

h1,h2 { font:small-caps bold italic 2.5em ->'minion web Georgia','Times New ->Roman', Times, serif; } h2 { font-style: normal; font-variant: normal; font-size: 1.5em; } .dropCap { font: 300%/100% serif; color: #999999; }

Листинг 2.20. Таблица стилей print.css определяет вид HTML-страницы, описанной в листинге 2.21, после печати

body { color: black; font-size: 10pt; line-weight: 12pt; font-family: "Book Antiqua", "Times ->New Roman", Georgia, Times, serif; background: white no-repeat; text-align: justify; position: relative; top: 10px; left: 40px; width: 575px; }

Листинг 2.20 (окончание)

h1,h2 { color: black; font: italic small-caps bold ->2.5em "minion web", "Georgia", ->"Times New Roman", Times, serif; } h2 { color: black; font-style: normal; font-variant; font-size: 1.5em; } .dropCap { color: #999999; font: 300%/100% serif; }

7 4 Основы CSS К сожалению, Netscape 4 не поддерживает CSS, основанные на использовании различных сред (media-based CSS). Можно установить ссылку на Web-страницу, содержащую версию для печати, и применить другой CSS-файл, в котором эта версия описывается (см. «Отображение страницы на экране и при выводе на печать» в главе 22). Не забывайте о каскадном порядке стилей. Важно учитывать порядок, в котором CSSфайлы добавляются в документ. Если браузер не распознает значение свойства media, он использует обе таблицы стилей. Доступные в настоящее время типы сред, такие как устная (речь), Брайль (рельефные специальные шрифты для слепых), проекция изображения, не поддерживаются существующими версиями браузеров. Листинг 2.21. Таким образом, страница index.html ссылается на два различных CSS-файла. Один используется при выводе страницы на экран, другой – для печати. На рис. 2.31 представлен результат на экране компьютера, а на рис. 2.32 – та же страница после печати

<html> <head> <link rel="stylesheet" href="print.css" media="print"> <link rel="stylesheet" href="screen.css" media="screen"> </head> <body> <br> <h1>Alice's Adventures in Wonderland</h1> <h2>Lewis Carroll</h2> <p style="font-family: monospace;">THE MILLENIUM FULSCREEN EDITION 3.0</p> <h3>CHAPTER 1 <br>Down the Rabbit-Hole</h3> <p><span class="dropCap">A</span>lice was beginning to get ->very tired of sitting by her sister on the bank...</p> <p>So she was considering in her own mind...</P. <p>There was nothing so <i>very</i> remarkable in that...</p> </body> </html>

Комментарии в CSS Листинг 2.22. Чтобы добавить полезные замечания, можно использовать комментарии. Это никак не повлияет на работу программы

// Óñòàíàâëèâàåò îáùèé âèä òýãîâ code. code { font-family: monaco,courier,monospace; font-size: 10pt; line-height: 12pt; margin-left: 2em; } /*Óñòàíàâëèâàåò êîíêðåòíûé âèä òýãà: selector=HTML-òýãè, rule=CSS-ïðàâèëî, îïðåäåëÿþùåå âèä ñòðàíèöû, comment=êîììåíòàðèè â ýòîé CSS.*/ code.selector { color: #009900;} code.rule { color: #990099;} code.comment { color: #cc0000;}

Комментарии нельзя представлять в форме вложений.

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

Вставка в таблицу стилей однострочного комментария 1. // Начните комментарий с двух слэшей (//). 2. Óñòàíàâëèâàåòîáùèéâèäòýãîâcode. Введите комментарий. В этом формате можно использовать буквы, цифры, любые символы, но нельзя переходить на следующую строку.

Вставка в таблицу стилей многострочного комментария Двойной слэш проще заметить при быстром просмотре документа. Следовательно, комментарии длиной в одну строку проще найти. К двойному можно добавить сколько угодно слэшей: //////Êîììåíòàðèé!

1. /* Начните комментарий со слэша (/) и звездочки (*). 2. tag=HTML-òýãè. Введите комментарий. Здесь можно использовать любые буквы, цифры, символы, а также переходить на другую строку (клавиша Enter или Return). 3. */ Закройте комментарий, написав звездочку и слэш.

7 6 Основы CSS

Стратегия создания таблиц стилей При создании сайта с помощью CSS необходимо учитывать следующее: стили лучше помещать во внешние таблицы стилей всегда, когда это возможно (см. раздел «Добавление CSS на Web-сайт»); достоинством CSS является то, что их легко поместить в одном конкретном месте и оттуда менять весь сайт (рис. 2.33); на верхнем уровне сайта можно определить таблицу global.css, которая по умолчанию будет применяться ко всему сайту. Это очень удобно, если, например, необходимо, чтобы все заголовки первого уровня имели один и тот же шрифт и размер (рис. 2.34); с помощью таблицы стилей section.css улучшают стили на подуровнях. Таким образом, каждый раздел можно менять или добавлять в глобальную таблицу стилей. Например, вы установили тип и размер шрифта в глобальной таблице стилей для заголовков первого уровня, но хотите поменять цвет заголовков в разделе. С помощью таблицы section.css допустимо установить цвет для каждого раздела в отдельности;

Рис. 2.33. Обычная структура связанного файла, которая позволяет различным HTML-страницам применять глобальную CSS и прикреплять стили к конкретным разделам с помощью section.css. Заметьте, что оба раздела используют один файл section.css, а не два разных – section1.css и section2.css. Это позволяет перемещать HTML-файлы из раздела в раздел, не меняя URL, служащий для связывания с документом или при импортировании

Стратегия создания таблиц стилей

для различных целей лучше использовать разные файлы CSS. Если вы разместите все CSS в одном файле, он будет огромным и его загрузка займет гораздо больше времени, чем загрузка отдельных файлов. Лучше разбить CSS на несколько файлов и импортировать их на каждую страницу только при необходимости; следует располагать стили в тэге <head> после JavaScript. Несмотря на то что тэг <style>...</style> можно поместить в любой части заголовка документа, лучше отвести для него определенное место: так его будет проще найти. Я обычно помещаю его в конце. Но где бы вы ни написали этот тэг, будьте последовательны, не меняйте его местоположение от файла к файлу; лучше не использовать стили в тэгах без особой на то причины. Достоинством CSS является то, что стили можно применять сразу к нескольким тэгам и менять сразу на всем сайте. Если определить стиль непосредственно в тэге, этот плюс исчезнет.

Рис. 2.34. На диаграмме показано, как различные HTML-файлы можно связать с соответствующими CSS-файлами. Файл global.css связан со всеми тремя файлами, а с каждым конкретным связан section.css

управление шрифтом

Рис. 3.1. На сайте www.typographic.rsub.com можно многое узнать об оформлении

Рис. 3.2. Сайт www.studiomotiv.com/counterspace оформлен при помощи Flash. Здесь также представлена информация о различных эффектах

Оформление – один из самых мощных способов донести идеи создателя сайта до посетителя. Правильно оформленный текст (заголовки, смысловые выделения, подбор цветов) позволяет читателю не только получить эстетическое удовольствие, но и быстрее разобраться в содержании сайта. Шрифт – неотъемлемая часть любого документа. Такие эффекты, как курсивное или полужирное начертание, позволяют дизайнерам выделить важные места в документе и обратить на них внимание посетителя (рис. 3.1 и 3.2). На Web-страницах с помощью CSS можно не просто менять тип шрифта или придавать ему полужирное или курсивное начертание, как в случае с HTML-тэгами. Таблицы стилей позволяют задавать общий тип шрифта, устанавливать различную толщину букв, тип курсива и размер шрифта, используя стандартные обозначения, заимствованные из области книгопечатания.

Оформление в Web

Оформление в Web Семейство шрифтов (font family) – это набор шрифтов с похожими характеристиками. В Web существует пять основных типов шрифта (рис. 3.3): Serif. На концах линий, составляющих буквы, есть маленькие черточки (засечки). Засечки – наследие тех времен, когда для письма использовались перья. Такое написание позволяло выделять отдельные буквы. Этот тип шрифта подходит для представления текстов большего кегля или для текстов, набранных маленьким кеглем и предназначенных для распечатки. На экране буквы будут неясными, если размер шрифта маленький; Sans-serif. Буквы данного семейства шрифтов не имеют засечек. И хотя символы sans-serif менее отчетливы, они больше подходят для текстов, отображаемых на экране и набранных шрифтом меньшего размера; Monospace. Все символы этого типа шрифта одинаковы по ширине. Например, в других шрифтах строчная буква «l» занимает в строке гораздо меньше места, чем заглавная «M». Но в моноширинном шрифте увеличивается межсимвольный интервал справа и слева от этой буквы (стоит отметить, что данный интервал является частью буквы и неотделим от нее), и, таким образом, она занимает столько же места, сколько и буква M. Шрифт этого типа идеально подходит для текстов, в которых важна каждая буква (при этом не обязательно быстро их читать), например для программного кода, опечатки в котором могут привести к серьезным ошибкам;

Рис. 3.3. Некоторые типы шрифта

Cursive. Курсив имитирует письмо от руки, его лучше всего использовать для украшения текста или смысловых выделений. Большие же объемы текста, набранные курсивом, сложно читать; Fantasy. Шрифты, служащие для украшения и не входящие ни в одну из перечисленных категорий, называются шрифтами fantasy. Они весьма декоративны, а шрифт Dingbats представляет собой простые картинки или иконки. Как и курсив, их лучше всего использовать в качестве украшений. Однако не следует увлекаться шрифтами fantasy, даже если вы хотите усилить впечатление, производимое вашей страницей на посетителя.

80 Управление шрифтом

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

текст. Это значит, что вы можете использовать любой шрифт независимо от того, есть ли он на компьютере посетителя страницы. Но и у такого формата есть свои недостатки. Графический файл имеет большой размер и медленнее загружается, а текст сложно редактировать. Изображение с фиксированными размерами может просто не поместиться на экране посетителя; векторный текст. Этот формат сочетает в себе лучшие свойства предыдущих. Векторный текст легко редактировать, он «подстраивается» под размеры экрана, что делает его похожим на HTMLтекст. Здесь, как и в графическом формате, можно применять спецэффекты (правда, есть небольшие ограничения) и использовать любой шрифт. В настоящее время поместить векторный текст на сайт позволяет только Macromedia Flash. W3C разрабатывает новые стандарты, с помощью которых Web-дизайнеры смогут работать с векторным текстом (и графикой) так же просто, как и с HTML-текстом. Ожидается появление нового формата – масштабируемой векторной графики (SVG). В настоящее время этот формат является стандартом W3C, его рекламирует главный разработчик SVG, Adobe Systems Inc. Несмотря на то что SVG позволяет, подобно Flash, использовать встроенную в HTML-документ векторную графику, для представления на экране данный формат использует специальный модуль расширения браузера (plug-in). Так как модуль расширения для отображения Flash распространяется уже три года, сами можете догадаться, что предпочтут пользователи.

Установка шрифта

Установка шрифта Удобочитаемость текста в значительной степени зависит от применяемого типа шрифта. Некоторые шрифты воспринимаются лучше при чтении с экрана, другие – когда текст напечатан на бумаге. Выбирая определенный шрифт, вы можете повлиять на восприятие посетителем вашей страницы. В примере (листинг 3.1 и рис. 3.4) заголовок первого уровня набран шрифтом Times.

Определение типа шрифта Рис. 3.4. Шрифт, определенный для заголовка, подзаголовка и текста, перекрывает настройки браузера, использующиеся по умолчанию

1. font-family: Введите название свойства и поставьте двоеточие. 2. times Укажите название шрифта, который будете использовать.

Листинг 3.1. В определении можно описывать любое количество шрифтов. Нужно лишь отделять названия шрифтов друг от друга запятыми и заключать в кавычки названия, состоящие из нескольких слов

<html> <head> <style type="text/css"> h1 {font-family: times, "Times New Roman", palatino, serif;} h3 {font-family: "Courier New", Courier, Monaco, monospace;} .copy {font-family: Arial, Helvetica, Geneva, sans serif; } </style> </head> <body> <hr> <h1>ALICE'S ADVENTURES IN WONDERLAND </h1> <h3>Lewis Carroll</h3> <hr> <h3>CHAPTER 1<br> Down the Rabbit-Hole</h3> <p class="copy">Alice was beginning...</p> <p class="copy">So she was considering...</p> <p class="copy">There was nothing...</p> </body> </html>

82 Управление шрифтом 3. ,"TimesNewRoman",palatino Вы можете написать несколько типов шрифтов через запятую. 4. ,serif; После последней запятой укажите семейство шрифтов, к которому относится используемый шрифт. В табл. 3.1 перечислены значения, общие для всех типов шрифтов. Хотя данные значения применять необязательно, не стоит о них забывать. Из всех перечисленных в списке шрифтов браузер выбирает первый. Если этот тип шрифта ему не доступен, браузер просматривает список далее до тех пор, пока не найдет шрифт, имеющийся на компьютере пользователя. Если в списке нет подходящего шрифта, используется шрифт, установленный в браузере посетителя по умолчанию. Если вы определите семейство шрифта, браузер найдет максимально похожий шрифт, даже когда конкретные шрифты из списка не доступны (например, при определении семейства serif будет использоваться шрифт без засечек). Далее в разделе «Шрифты в браузере» перечислены шрифты, которые обычно доступны в браузерах.

Таблица 3.1. Значения типов шрифтов Значение

Совместимость

<family-name>

IE3, N4, CSS1

<generic-family>

IE3, N4, CSS1

Serif

IE3, N4, CSS1

sans-serif

IE3*, N4, CSS1

cursive

IE4, N4, CSS1

fantasy

IE4, N4, CSS1

monospace

IE4, N4, CSS1

* IE4 для MacOS.

CSS или тэг <font> Обычно шрифт устанавливается с помощью тэга <font> (например, <font face="arial,helvetica">...</font>). Вероятно, этот способ скоро выйдет из употребления; так как в последних версиях HTML, соответствующих стандартам W3C, тэг <font> отсутствует, его рекомендуется заменять CSS. Основные проблемы, возникающие при использовании тэга <font>, заключаются в следующем:

Названия шрифтов, состоящие из нескольких слов, нужно заключать в кавычки (например, "New York").

Теоретически Internet Explorer и Netscape позволяют загружать на компьютер посетителя конкретный шрифт, который затем определяется с помощью свойства family-name. Более подробно об этом рассказано в следующем разделе.

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

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

Загрузка шрифтов Листинг 3.2. При использовании директивы @font-face определяется название и местоположение шрифта, который будет загружаться на компьютер пользователя

<html> <head> <style type="text/css"> @font-face {font-family: Garamond; ->src: url(Garamond.eot); } h2 {font-family: Garamond, "Times ->New Roman", Georgia, Times, ->serif; } </style> </head> <body> <h2>Chapter 8<br>The Queen's Croquet->Ground</h2> <p class="copy">A large rose-tree...</p> </body> <html>

Рис. 3.5. Текст набран шрифтом Garamond, который не был установлен на компьютере пользователя и поэтому был загружен так же, как и картинки

Загрузка шрифтов Несомненным достоинством Internet является загрузка шрифтов. Вместо того чтобы рассчитывать на ограниченное количество шрифтов браузера или создавать графические изображения с использованием нужного шрифта, можно автоматически загрузить шрифт на компьютер пользователя. CSS второго уровня предоставляет такую возможность. В рассматриваемом примере (листинг 3.2 и рис. 3.5) загружается шрифт Garamond, который затем применяется в заголовке второго уровня.

Загрузка требуемого шрифта 1. @font-face{ Напишите @font-face. 2. font-family:Garamond; Введите font-family и название шрифта. 3. scr:url(Garamond.eot);} Укажите путь к файлу, содержащему шрифт. 4. h2 {font-family: Garamond, "Times New Roman",Georgia,Times,serif;} Создайте ссылку на шрифт, описанный в шаге 2. Рекомендуется включать в список другие альтернативные шрифты на случай, если нужный шрифт не загрузится.

84 Управление шрифтом Невозможно загрузить файл шрифтов старого формата. Шрифты нужно специальным образом обрабатывать, и этот процесс протекает по-разному в Internet Explorer и Netscape. Протестировав Netscape 4, я пришел к выводу, что если файл со шрифтом не загрузился, то браузер игнорирует остальные шрифты в списке и использует тот шрифт, который установлен в нем по умолчанию.

Где же шрифты? Часто при загрузке шрифтов возникают следующие проблемы:

многие шрифты не являются бесплатными. Создатели шрифтов обеспокоены тем, что они не получают компенсации за распространение их шрифтов в Web. Это значит, что посетители загружают шрифты, а потом пользуются ими совершенно бесплатно; шрифты Windows и Mac несовместимы между собой. Для каждой из платформ нужно включать отдельную версию; файлы со шрифтами бывают большими, и их загрузка может занять некоторое время.

Netscape и Internet Explorer предложили решение перечисленных проблем. Шрифт нельзя загрузить, как графическое изображение. Необходимо сначала обработать его для Web. К сожалению, Microsoft и Netscape предложили несовместимые друг с другом, сложные системы для создания подобных шрифтов. При работе с Internet Explorer вам придется перевести шрифты в формат EOT. Для этого служит программа WEFT (www.microsoft.com/typography/web/embedding/ weft2/), которая работает только под Windows. А при использовании Netscape вам потребуется перевести шрифты в формат TrueDoc (www.truedoc.com), для чего придется купить программу, выпущенную Bitstream Inc. По утверждениям представителей Bitstream, этот формат работает, хотя и нестабильно, как в Netscape, так и в Internet Explorer. Итак, придется использовать шрифты браузера до тех пор, пока не будут созданы шрифты, совместимые со всеми браузерами и платформами, и при этом их загрузка не займет много времени.

Шрифты в браузере Таблица 3.2. Шрифты в системе Mac Название шрифта

Поддерживаемые стили

Apple Chancery* Capitals* Charcoal Chicago Courier

Полужирный, полужирный курсив, курсив

Gadget* Geneva Helvetica

Полужирный, полужирный курсив, курсив

Hoefler Text*

Полужирный, полужирный курсив, курсив

Monaco New York Palatino

Полужирный, полужирный курсив, курсив

Sand* Skia* Symbol Techno* Textile* Times

Полужирный, полужирный курсив, курсив

* Для MacOS 8.5 и выше.

Шрифты в браузере В настоящее время в Internet используется всего два шрифта: Helvetica и Times. Такая ситуация вполне объяснима: эти шрифты или их варианты установлены на каждом компьютере. Безусловно, указанные шрифты весьма удобны. Но ведь существуют и другие. Однако в Web применяется Times для шрифтов serif и Helvetica/Arial для шрифтов sans-serif, и все страницы выглядят одинаково. Чем же можно их заменить? Все зависит от компьютера посетителя вашего сайта. На компьютерах Mac и Windows изначально присутствуют определенные стандартные шрифты. Также несколько обычных шрифтов включено в Internet Explorer, который имеется почти на всех компьютерах. Шрифты, установленные в браузерах по умолчанию, представлены в табл. 3.2–3.4. Итак, в действительности браузер располагает не только шрифтами Helvetica и Times, но и множеством других. Все они перечислены в приложении 4; там же показано, как они выглядят.

86 Управление шрифтом Таблица 3.3. Шрифты в системе Windows Название шрифта

Поддерживаемые стили

Abadi MT Condensed Light*

Таблица 3.4. Шрифты в Internet Explorer (Windows/Mac) Название шрифта

Поддерживаемые стили

Andale Mono

Arial Black*

Полужирный, полужирный курсив, курсив

Arial Black Comic Sans MS

Полужирный

Book Antiqua*

Полужирный, полужирный курсив, курсив

Georgia*

Полужирный, полужирный курсив, курсив

Calisto MT*

Полужирный, курсив

Centure Gothic*

Полужирный, полужирный курсив, курсив

Impact Minion Web*

Полужирный, курсив

Trebuchet MS*

Полужирный, полужирный курсив, курсив

Copperplate Gothic Bold

Verdana

Полужирный, полужирный курсив, курсив

Copperplate Gothic Light

Webdings*

Comic Sans MS*

Courier New

Полужирный

Полужирный, полужирный курсив, курсив

* Для IE5 и IE6.

Lucid Console* Lucida Handwriting Italic* Lucida Sans Unicode*

Курсив

New Gothic MT*

Полужирный, курсив

OCR A Extended* Symbol Tahoma*

Полужирный

Times New Roman

Полужирный, полужирный курсив, курсив

Verdana*

Полужирный, полужирный курсив, курсив

Webdings* Wingdings * Для Windows 98 и выше.

Internet Explorer устанавливает эти шрифты, поэтому они могут быть недоступны пользователям Netscape. Но поскольку на многих компьютерах изначально имеется IE, весьма вероятно, что данные шрифты на компьютере присутствуют.

Размер шрифта

Размер шрифта Рис. 3.6. Размеры шрифта

Листинг 3.3. Размер шрифта устанавливается в классе copy. Текст, заключенный в тэг <blockquote>, печатается с отступом 2em. Размер заголовка третьего уровня больше, чем размер основного текста, установленный браузером по умолчанию

<html> <head> <style type="text/css"> .copy { font-size: 12px; } blockquote { font-size: 2em; } h3 {font-size: large; } </style> </head> <body> <h3>CHAPTER 2<br> The Pool of Tears</h3> <p class="copy">"Curiouser and ->curiouser!'...<p> <blockquote> ALICE'S RIGHT FOOT, ESQ.<br> HEARTHRUG,<br> NEAR THE FENDER,<br> (WITH ALICE'S LOVE). </blockquote> </body> </html>

В HTML есть семь различных размеров шрифта, но все они связаны с размером, установленным по умолчанию посетителем страницы. С помощью CSS можно изменять размер текста на экране несколькими способами, включая традиционное изменение размера в точках, проценты, абсолютный размер и даже размер, зависящий от окружающего текста. На рис. 3.6 показано, как выглядит на экране текст разного размера. В рассматриваемом примере (листинг 3.3 и рис. 3.7) используется класс copy, в котором определяется шрифт размером 12 пунктов. Этим шрифтом затем печатается весь текст документа.

Рис. 3.7. Шрифт определенного размера помогает выделить текст. Размер заголовков обычно больше, чем размер текста, но к некоторым из них нужно привлечь особое внимание

88 Управление шрифтом

Определение размера шрифта 1. font-size: Введите font-size и поставьте двоеточие. 2. 12px; Укажите размер шрифта одним из следующих способов: – в единицах длины (измеряется в пунктах); – используя абсолютное выражение, например xx-small, x-small, small, medium, large, x-large, xx-large; – smaller или larger описывает размер по отношению к размеру родительского элемента (см. раздел «Наследование родительских свойств» в главе 2); – в процентах, определяющих размер шрифта пропорционально размеру шрифта родительского элемента (например, 75%). В табл. 3.5 перечислены возможные значения размера шрифта и браузеры, работающие с этими значениями. Максимальный размер шрифта зависит от компьютера пользователя. Однако лучше не устанавливать размер больше, чем 50 пунктов. Не старайтесь использовать в HTML шрифты только маленького размера. CSS позволяет создавать заголовки, состоящие из больших букв, и это не повлияет на скорость загрузки текста.

Таблица 3.5. Возможные значения свойства font-size Значение

Совместимость

IE4, N4, CSS1

IE4, N4, CSS1

smaller

IE4, N4, CSS1

larger

IE4, N4, CSS1

xx-small

IE4, N4, CSS1

x-small

IE4, N4, CSS1

small

IE4, N4, CSS1

medium

IE4, N4, CSS1

large

IE4, N4, CSS1

x-large

IE4, N4, CSS1

xx-large

IE4, N4, CSS1

Пикселы и пункты Аббревиатура pt обозначает пункт. Это один из способов указания размера шрифта. Обычно используется шрифт 12pt, который удобен для большинства читателей. Как правило, размер шрифта определяется с помощью pt. Но размер пунктов зависит от используемой операционной системы. Например, в Windows текст размером 12pt выглядит большим, чем тот же текст в Mac. Я использую pt для определения размера шрифта в тех случаях, когда создаю версию для печати. Гораздо лучше измерять шрифт в пикселах (px). Пикселы не всегда надежны, но результат их использования более точен. Между пикселами и пунктами не существует взаимно однозначного соответствия, но можно считать, что размер 12px примерно совпадает с 12pt.

Курсив

Курсив Рис. 3.8. Курсивное и наклонное начертание Листинг 3.4. Текст внутри тэга <blockquote> и текст в классе booktitle выделяются курсивом, а текст внутри тэга <i> остается обычным

<html> <head> <style type="text/css"> .booktitle, blockquote p { font-style: ->italic; } i { font-style: normal; } </style> </head> <body> <h1>An excert from <span ->class="booktitle">Alice in ->Wonderland</span></h1> <p><i>How doth the little–</i>&quot;' and ->she crossed her hands on her lap...</p> <blockquote> <p>'How doth the little crocodile</p> <p>Improve his shining tail,</p> </blockquote> </body> </html>

Рис. 3.9. Название книги и цитата выделены курсивом

Часто путают два типа стилей – курсив (italic) и наклонный (oblique). Курсивом называется более декоративный тип шрифта с наклоном вправо. Наклонный шрифт представляет собой обычный шрифт, без каких-либо стилизованных «рукописных» украшений, с небольшим наклоном (рис. 3.8). С помощью элемента font-style можно выделить текст курсивом, сделать шрифт наклонным или оставить его начертание обычным (normal). Если установлен курсив, но данный тип шрифта не имеет такого свойства, текст автоматически становится наклонным. В приведенном примере (листинг 3.4 и рис. 3.9) курсив определяется в классе booktitle, поэтому данным начертанием выделяется весь текст документа. В то же время тэг <i> оставляет текст, размещенный внутри него, обычным.

90 Управление шрифтом

Установка стиля шрифта в HTML-тэге 1. font-style: Введите имя свойства font-style и поставьте двоеточие. 2. italic; Чтобы определить стиль шрифта в свойстве font-style, используйте следующие значения (табл. 3.6): – italic. Текст выделяется курсивом; – oblique. Текст наклоняется вправо; – normal. Этот атрибут отменяет все другие.

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

Таблица 3.6. Возможные значения свойства font-style Значение

Совместимость

normal

IE4, N4, CSS1

italic

IE4, N4, CSS1

oblique

IE4, N6, CSS1

Толщина шрифта

Толщина шрифта Рис. 3.10. Разница между обычным и полужирным шрифтом очевидна

В стандартном HTML шрифт может быть либо полужирным, либо обычным. CSS позволяет установить несколько уровней «жирности» шрифта, используя способность многих шрифтов иметь различную толщину (рис. 3.10). В рассматриваемом примере (листинг 3.5 и рис. 3.11) создается класс bolder, который делает линии шрифта толще.

Рис. 3.11. Весь текст, кроме текста внутри тэга <i>, выделен полужирным шрифтом Листинг 3.5. Класс bolder используется для выделения текста полужирным шрифтом. Тэг <i> внутри абзаца оставляет начертание обычным

<html> <head> <style type="text/css"> .bolder { font-weight: bolder; } p i { font-weight: normal; } </style> </head> <body> <b>More from <i>Alice in Wonderland</i></b> <p><span class="bolder">'I wish I hadn't cried so much!'...</span></p> <p><span class="bolder">Just then she heard<i>something</i> ->splashing about in the pool a little way off...</span></p> <p><span class="bolder">'Would it be of any use,now,'</span></p> <p><span class="bolder">'Perhaps it doesn't understand English,'</span></p> <p><span class="bolder">'Not like cats!'</span></p> </body> </html>

92 Управление шрифтом

Выделение текста полужирным шрифтом 1. font-weight: Введите свойство font-weight и поставьте двоеточие. 2. bolder; Укажите толщину шрифта в свойстве font-weight при помощи следующих значений (табл. 3.7): – bold. Текст выделяется полужирным; – bolder или lighter. Увеличивается толщина шрифта по сравнению с родительским элементом; – значение от 100 до 900 с шагом 100 увеличивает толщину шрифта, основываясь на разных доступных версиях шрифта; – normal. Этот атрибут перекрывает все другие.

Таблица 3.7. Возможные значения свойства font-weight Значение

Совместимость

normal

IE4, N4, CSS1

bold

IE3, N4, CSS1

lighter

IE3, N6, CSS1

bolder

IE3, N6, CSS1

100-900

IE4*, N4*, CSS1

* Зависит от доступной толщины шрифта.

Рис. 3.12. Все буквы заглавные, но первая – больше остальных

Не увлекайтесь использованием свойства font-weight для выделения важных мест в тексте. Вы не добьетесь нужного эффекта, если весь текст будет выделен полужирным.

Численные значения толщины шрифта.

Создание minicaps Minicaps применяется для выделения заголовков. С помощью minicap строчные буквы переводятся в заглавные, размер которых меньше, чем у обычных прописных букв (рис. 3.12). В приведенном ниже примере (листинг 3.6 и рис. 3.13) тэг <h2> используется для выделения названия книги с помощью minicaps.

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

от 100 до 300. Применяется соседнее доступное значение толщины; 400 и 500 взаимозаменяемы; от 600 до 900. Используется соседнее доступное значение толщины.

Создание minicaps Листинг 3.6. Тэг заголовка второго уровня отображает текст маленькими заглавными буквами (small caps)

<html> <head> <style type="text/css"> h2 { font-variant: small-caps; } </style> </head. <body> <h2>Chapter 3<br> A Caucus-Race and a Long Tale</h2> <p>They were indeed a queer-looking ->party...</p> <p>The first question of course was, ->how to get dry again...</p> <p>At last the Mouse...</p> <p>'Ahem!' said the Mouse...</p> <p>'Ugh!' said the Lory, with a ->shiver.</p> <p>'I beg your pardon!'...</p> <p>'Not I!' said the Lory hastily.</p> </body> </html>

Создание правила для minicaps 1. font-variant: Введите свойство font-variant и поставьте двоеточие. 2. small-caps; Укажите значение свойства font-variant, выбрав его из следующих величин (табл. 3.8): – small-caps. Строчные буквы преобразуются в заглавные, размер которых меньше, чем размер обычных прописных букв; – normal. Этот атрибут перекрывает все остальные наследованные значения font-variant. Minicaps лучше всего подходит для заголовков или подобных элементов страницы. Текст меньшего размера, набранный с помощью этого стиля, трудно читать.

Таблица 3.8. Возможные значения свойства font-variant Рис. 3.13. Созданный с помощью minicaps заголовок выглядит элегантно и отличается от остального текста

Значение

Совместимость

normal

IE4, N6, CSS1

small-caps

IE4, N6, CSS1

94 Управление шрифтом

Определение нескольких значений шрифта одновременно

Листинг 3.7. Различные стили для тэга <h1> и класса copy устанавливаются одновременно, а в тэге <h3> используется стиль caption

Свойства шрифта можно определять независимо, но лучше записать все элементы шрифта в одном определении, используя свойство font. В рассматриваемом примере (листинг 3.7 и рис. 3.14) определяется заголовок первого уровня и класс copy, который затем применяется к абзацам в тексте. С помощью специального стиля описывается тэг заголовка третьего уровня (см. раздел «Использование стилей посетителя»).

<html> <head> <style type="text/css"> h1 { font: italic small-caps bold 26px/ ->32px "minion web","Times New Roman", ->Times, serif; } h3 { font: caption; } .copy {font: 10px/20px Arial, Helvetica, ->Geneva, sans-serif;} </style> </head. <body> <hr> <h1>Alice's Adventures in<br> Wonderland<h1> <h3>Lewis Carroll</h3> <hr> <h3>Chapter 1<br> Down the Rabbit-Hole</h3> <p class="copy">Alice was beginning... -></p> <p class="copy>So she was ->considering...</p> <p class="copy">There was nothing so -><i>very</i>...</p> </body> </html>

Рис. 3.14. Все свойства шрифта (а также высоту строки) допускается устанавливать в одном определении. Можно также указать для страницы использование стилей, заданных посетителем

Определение нескольких значений шрифта одновременно Таблица 3.9. Возможные значения свойства font Значение

Совместимость

<font-family>

IE4, N4, CSS1

<font-style>

IE4, N4, CSS1

<font-variant>

IE4, N4, CSS1

<font-weight>

IE4, N4, CSS1

<font-size>

IE4, N4, CSS1

<font-height>

IE4, N4, CSS1

<visitor-style>

IE5, N6, CSS1

Использование стилей посетителя Было бы удобно, если бы стили шрифта, которые использует посетитель страницы, совпадали с вашими стилями. Этого можно добиться при работе с Internet Explorer 5/6 и Netscape 6, определив стиль шрифта с помощью ключевых слов (например, font: icon;):

Caption используется для написания текста на кнопках; Icon применяется для текста на иконках; Menu выводится в выплывающих меню и списках меню; Message-box применяется в диалоговых окнах; Small-Caption удобен для подписей под элементами управления; Status-bar задействуется в строке состояния.

Определение в правиле нескольких атрибутов 1. font: Введите свойство font и поставьте двоеточие. Затем укажите значения в следующем порядке (табл. 3.9). 2. italic Укажите значение font-style и нажмите клавишу пробела (см. раздел «Курсив»). 3. small-caps Определите значение font-variant и нажмите клавишу пробела (см. раздел «Создание minicaps»). 4. bold Укажите значение font-weight и нажмите клавишу пробела (см. раздел «Толщина шрифта»). 5. 26px Введите значение font-size (см. раздел «Размер шрифта»). 6. /32px Напишите прямой слэш (/), значение line-height и нажмите клавишу пробела (см. раздел «Межстрочные интервалы» в главе 4). 7. "minion web", "Times New Roman", Times, serif Укажите значение font-family (см. раздел «Установка шрифта»). Если вы не хотите определять какой-либо атрибут, просто не включайте его в список. Вместо него браузер воспользуется значением, установленным по умолчанию. Определение атрибутов шрифта помогает сэкономить время. WYSIWYG-программы, такие как GoLive и Dreamweaver, обычно используют отдельные атрибуты по умолчанию.

управление текстом

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

Кернинг Листинг 4.1. В слове «stretching» буквы разделены пробелами

<html> <head> <style type="text/css"> .stretch { letter-spacing: 2em; } </style> </head> <body> An enormous puppy was looking down at ->her with large round eyes, and feebly -><span class="stretch">stretching -></span>out one paw, trying to touch ->her. 'Poor little thing!' said Alice, ->in a coaxing tone, and she tried hard ->to whistle to it; but she was terribly ->frightened all the time at the thought ->that it might be hungry, in which case ->it would be very likely to eat her up ->in spite of all her coaxing. </body> </html>

Рис. 4.1. Результат применения класса stretch Таблица 4.1. Возможные значения свойства letter-spacing Значение

Совместимость

normal

IE4*, N6, CSS1

IE4*, N6, CSS1

* Только в Mac OS, в Windows недоступно.

Кернинг Понятие кернинг используется для определения расстояния между буквами в слове. Увеличение этого расстояния повышает читабельность текста. С другой стороны, слишком большое расстояние между буквами в слове мешает воспринимать текст, так как слова становится труднее отличить друг от друга. В приведенном ниже примере (листинг 4.1 и рис. 4.1) увеличено расстояние между буквами в слове «stretching» (вытягивание).

Определение кернинга 1. letter-spacing: Напишите letter-spacing в списке CSSопределений и поставьте двоеточие. 2. 2em; Укажите значение свойства letter-spacing (табл. 4.1): – длину, например 2em. Таким образом устанавливается постоянная величина межсимвольного интервала; – normal. Этот атрибут перекрывает все другие наследованные атрибуты. Положительное значение letter-spacing увеличивает обычное расстояние между буквами, а отрицательное – уменьшает. Значение, равное нулю, не изменяет расстояние между буквами, но при его использовании исчезает выравнивание текста (см. раздел «Выравнивание текста по правому, левому краю и по центру» далее в этой главе).

98 Управление текстом

Интервал между словами Подобно кернингу, интервалы между словами (word spacing) могут как улучшать, так и ухудшать восприятие текста. Текст, в котором между словами небольшие пробелы, легче читать. Однако если пробелы слишком велики, чтение значительно затрудняется. В рассматриваемом примере (листинг 4.2 и рис. 4.2) некоторые слова стоят слишком близко друг к другу, а другие разделены большими пробелами.

Рис. 4.2. Интервалы между словами слегка увеличены, чтобы облегчить восприятие текста. Но слова в нижней части экрана сдвинуты друг к другу, что мешает чтению

Листинг 4.2. Чтобы разделить слова (и буквы) пробелами, следует определить класс. В тэге <p> используется отрицательное значение, поэтому текст сжимается. В тэге <p> класса copy, наоборот, вводится положительное значение, что перекрывает предыдущие установки

<html> <head> <style type="text/css"> .title { word-spacing: 8px; letter-spacing: 4px; } p { word-spacing: -8px; } p.copy { word-spacing: 4px; letter-spacing: 1px; } </style> </head> <body> Yet more<span class"title>Alice in ->Wonderland</span> <p>'We indeed!' cried the Mouse, who ->was trembling down to the end of his ->tail. 'As if I would talk on such a ->subject! Our family always <i>hated -></i> cats: nasty,low, vulgar things! ->Don't let me hear the name ->again!'</p> <p class="copy">'I won't indeed!' said ->Alice...</p> <p>So she called softly after it...</p> <p>It was high time to go...</p> </body> </html>

Межстрочные интервалы Таблица 4.2. Возможные значения свойства word-spacing Значение

Совместимость

normal

IE4*, N6, CSS1

IE4*, N6, CSS1

* Только в MacOS, в Windows недоступно.

Листинг 4.3. В тексте, расположенном внутри класса copy, двойной интервал между строками, а внутри тэга <cite> – интервал меньше обычного

<html> <head> <style class="text/css"> .copy { line-height: 2; font-size: 12px; } p.cite { line-height: 14px; font-size: 12px; } </style> </head> <body> <p class="copy">After a time she heard ->a little pattering of...</p> <p><cite>Alice took up the fan and ->gloves...</cite></p> <p class="copy">"I'm sure I'm not ->Ada...</p> </body> </html>

Определение интервалов между словами 1. word-spacing: В списке CSS-определений напишите word-spacing и поставьте двоеточие. 2. 8px; Укажите величину интервала между словами. Для этого можно использовать следующие значения (табл. 4.2): – длину, определяющую величину интервала между словами (например, 8px); – normal. Этот атрибут перекрывает все наследованные значения. Положительное значение word-spacing увеличивает обычное расстояние между словами, а отрицательное – уменьшает. Значение, равное нулю, не изменяет расстояние между словами, но при его использовании исчезает выравнивание текста (см. раздел «Выравнивание текста по правому, левому краю и по центру»).

Межстрочные интервалы Каждый, кто хоть раз в жизни писал курсовую работу, знает, что обычно в текстах такого рода используется двойной интервал между строками. Это позволяет лучше воспринимать текст, а также записывать комментарии. Межстрочный интервал (leading) легко изменить при помощи свойства line-height. В приведенном примере (листинг 4.3 и рис. 4.3) класс copy увеличивает междустрочный интервал в два раза, при этом высота строки цитаты немного больше размера шрифта.

100 Управление текстом

Определение интервала между строками 1. line-height: В списке CSS-определений введите название свойства и поставьте двоеточие. 2. Укажите значение высоты строки. Можно использовать следующие значения (табл. 4.3): – число, на которое нужно умножить размер шрифта, чтобы получить величину интервала (например, 2 для двойного интервала); – длину, например 24px. Независимо от размера шрифта интервал для каждой строки текста устанавливается с помощью этой единицы. Так, если размер шрифта равен 12px, а высота строки – 24px, интервал между строками будет двойным; – проценты. Высота строки пропорциональна размеру шрифта; – normal. Этот атрибут перекрывает все наследованные значения межстрочного интервала.

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

Таблица 4.3. Возможные значения свойства line-height Значение

Совместимость

normal

IE3, N4, CSS1

IE4, N4, CSS1

IE3, N4, CSS1

IE3, N4, CSS1

Увеличение межстрочного интервала улучшает восприятие текста, особенно если текст занимает весь экран. Для большинства текстов подходит полуторный или двойной интервал. Чтобы получить двойной интервал, нужно присвоить свойству line-height значение 2 или 200%, тройной – 3 или 300%. Чтобы уменьшить расстояние между строками, можно использовать отрицательные значения. Такой текст займет меньше места, но, вероятно, не понравится читателям.

Высоту строки допустимо определить в свойстве font (см. раздел «Определение нескольких значений шрифта одновременно» в главе 3).

Заглавные и строчные буквы 101 Листинг 4.4. Использование класса позволяет писать слова с заглавной буквы

<html> <head> <style="text/css"> .name { text-transform: capitalize; } h2 { text-transform: uppercase; } </style> </head> <body> <h2>Dramatis Personae</h2> <p class="name">alice</p> <p class="name">the rabbit</p> <p class="name">the queen of ->hearts</p> <p class="name">cheshire cat</p> <p class="name">the mad hatter</p> <p class="name">the march hare</p> <p class="name">the dormouse</p> </body> </html>

Рис. 4.4. Несмотря на то что слова в HTML набраны строчными буквами, на экране они начинаются с прописных Таблица 4.4. Возможные значения свойства text-transform Значение

Совместимость

capitalize

IE4, N4, CSS1

uppercase

IE4, N4, CSS1

lowercase

IE4, N4, CSS1

none

IE4, N4, CSS1

Заглавные и строчные буквы При работе с динамическим текстом нельзя заранее угадать, в каком виде он появится на экране, какими буквами будет набран – заглавными или строчными. Но с помощью свойства text-transform это упущение можно исправить. В рассматриваемом примере (листинг 4.4) имена героев набраны строчными буквами, однако на экране (рис. 4.4) они начинаются, как и положено, с заглавной буквы.

Определение регистра 1. text-transform: В списке CSS-определений напишите text-transform и поставьте двоеточие. 2. capitalize Чтобы определить вид текста, введите одно из следующих значений (табл. 4.4): – capitalize преобразует первую букву слова в заглавную; – uppercase меняет все буквы на заглавные; – lowercase понижает регистр всех букв в слове; – none перекрывает все наследованные значения этого свойства и оставляет текст без изменений. Если вы хотите, чтобы определенная часть текста была написана заглавными буквами, лучше так ее и напечатать, поскольку старые версии браузеров могут не поддерживать перечисленные свойства. Свойство text-transform удобно для форматирования динамического текста. Например, с помощью text-transform все названия при выводе содержимого базы данных, набранные заглавными буквами, можно сделать более понятными на экране.

102 Управление текстом

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

Установка выравнивания текста 1. text-align: В списке CSS-определений напишите название свойства и поставьте двоеточие (листинг 4.5). 2. left; Установите один из стилей выравнивания (табл. 4.5): – left– по левому краю; – right– по правому краю; – center– по центру; – justify– по ширине. Выровненный по ширине текст может не очень удачно выглядеть на экране. Это происходит из-за того, что в коротких строках увеличивается расстояние между словами, ведь все строки должны быть одной длины. К тому же до сих пор не ясно, улучшается или ухудшается восприятие текста, выровненного по ширине. Таблица 4.5. Возможные значения свойства text-align Значение

Совместимость

left

IE3, N4, CSS1

right

IE3, N4, CSS1

center

IE3, N4, CSS1

justify

IE3, N4, CSS1

Рис. 4.5. Выравнивание текста по левому краю, по правому краю, по центру и по ширине Листинг 4.5. Для каждого типа выравнивания определен свой класс <html> <head> <style type="text/css"> .left { text-align: left; } .justify { text-align: justify; } .center { text-align: center; } .right { text-align: right; } </style> </head> <body> <h2 class="left">Left</h2> <p class="left"<i>'You are old, Father ->William...</i></p> <hr> <h2 class="right">Right</h2> <p class="right"><i>'In my youth... -></i></p> <hr> <h2 class="center">Center</h2> <p class="center"><i>'You are old,' ->said the youth...</i></p> <hr> <h2 class="justify">Justified</h2> <p class="justify">Hardly knowing what ->she did...</p> </body> </html>

Вертикальное выравнивание текста 103

Вертикальное выравнивание текста С помощью свойства vertical-align можно определить положение элемента в строке по отношению к окружающему тексту, то есть поместить его выше или ниже базовой линии строки. Данное свойство работает только в inline-селекторах, тэгах, которые не окружены пробелами. Например, тэги <a>, <img>, <b>, <i>. На рис. 4.6 представлены разные типы вертикального выравнивания.

Установка вертикального выравнивания Рис. 4.6. Выравнивать текст по отношению к базовой линии строки можно разными способами

Листинг 4.6. Для каждого типа вертикального выравнивания определен свой класс

<html> <head> <style type="text/css"> .superscript { vertical-align: super; font-size: 12px; } .baseline { vertical-align: baseline; font-size: 12px; } .subscript { vertical-align: sub; font-size: 12px; } .top { vertical-align: top; font-size: 12px; } .middle { font-size: 12px; vertical-align: middle; } .bottom { vertical-align: bottom; font-size: 12px; }

1. vertical-align: В списке CSS-определений напишите название свойства и поставьте двоеточие (листинг 4.6). 2. super; Установите один из стилей вертикального выравнивания (табл. 4.6): – super оформляет текст верхним индексом; – sub оформляет текст нижним индексом; – baseline помещает текст на базовой линии строки (обычное положение); – относительное значение из табл. 4.7 выравнивает текст по отношению к родительскому элементу. Например, чтобы выровнять верхнюю часть текста по отношению к верхней части родительского элемента, введите top-text; – процентное значение поднимает или опускает элемент пропорционально размеру шрифта его родительского элемента (например, 25%).

104 Управление текстом Верхние и нижние индексы используются в научных текстах. Например, они понадобятся для того, чтобы записать теорему Пифагора: a2 + b2 = c2 – или химическую формулу, скажем формулу молекулы воды: H2O. Верхние индексы также применяются в сносках, с помощью которых добавляется ссылка на важные замечания в конце страницы или на другой Web-странице. Таблица 4.6. Возможные значения свойства vertical-align Значение

Совместимость

Super

IE4, N6, CSS1

Sub

IE4, N6, CSS1

Baseline

IE4, N6, CSS1

IE5*, N6, CSS1

IE5**, N6, CSS1

* IE5.5 и IE6 в Windows.

** Только в MacOS, в Windows недоступно.

Выделение абзацев в тексте Internet предоставляет различные возможности выделения абзацев в тексте. Самый известный способ начать новый абзац – красная строка. Однако раньше выделять абзацы таким образом было невозможно, потому что браузеры преобразовывали несколько пробелов в один. Абзацы же отделялись друг от друга пустой строкой. Теперь дополнительные пробелы в начале строки добавляют с помощью свойства text-indent (рис. 4.7).

Листинг 4.6 (окончание)

.texttop { vertical-align: texttop; font-size: 12px; } .textbottom { vertical-align: text-bottom; font-size: 12px; } .normal { font-weight: bold; font-size: 24px; } </style> </head> <body> <p class="normal">Alice <span class= ->"baseline">Baseline</span></p> <p class="normal">Alice <span class= ->"superscript">Superscript</span></p> <p class="normal">Alice <span class= ->"subscript">Subscript</span></p> <p class="normal">Alice <span class= ->"top">Top</span></p> <p class="normal">Alice <span class= ->"middle">Middle</span></p> <p class="normal">Alice <span class= ->"bottom">Bottom</span></p> <p class="normal">Alice <span class= ->"texttop">Text-Top</span></p> <p class="normal">Alice <span class= ->"textbottom">Text-Bottom</span></p> </body> </html>

Таблица 4.7. Определение позиции элемента по отношению к родительскому элементу Значение

Тип выравнивания

top

Над самым высоким элементом в строке

middle

В середине строки родительского элемента

bottom

На уровне нижней части строки

text-top

Над строкой родительского элемента

text-bottom

Под строкой родительского элемента

Выделение абзацев в тексте 105

Установка отступа первой строки

Рис. 4.7. Абзацы выглядят лучше, когда они выделяются Листинг 4.7. В классе copy устанавливается отступ, равный 10% от ширины экрана. Чем шире экран, тем больше отступ

<html> <head> <style type="text/css"> p.copy { text-indent: 10%; } </style> </head> <body> <h3>CHAPTER 4<br> The Rabbit Sends in a Little Bill -></h3> <br> <p class="copy">'But then,' thought ->Alice...</p> <p class="copy">'Oh, you foolish ->Alice!'...</p> <p class="copy">And so she went ->on...</p> <p class="copy">'Mary Ann! Mary ->Ann!'...</p> <p class="copy">Presently the Rabbit ->came up to the door...</p> <p class="copy">'<i>That</i> you ->won't' thought Alice...</p> <p class="copy">Next came an angry ->voice...</p> </body> </html>

1. text-indent: В списке CSS-определений напишите название свойства и поставьте двоеточие (листинг 4.7). 2. 10%; Чтобы указать величину отступа, введите одно из следующих значений (табл. 4.8): – длину, например 2em. Такой отступ хорошо выглядит на экране; – процентное значение, определяющее длину отступа пропорционально ширине абзаца (например, 10%). Вы можете обнулить значение поля абзаца. Тогда между абзацами не будет пустой строки, которая обычно появляется при использовании тэга <p>. Обычно отступы применяются при отображении текста на бумаге, поэтому их лучше устанавливать только в версиях страницы, предназначенных для печати (см. раздел «Отображение страницы на экране и при выводе на печать» в главе 22).

Таблица 4.8. Возможные значения свойства text-indent Значение

Совместимость

IE3, N4, CSS1

IE3, N4, CSS1

106 Управление текстом

Украшение текста С помощью свойства text-decoration можно декорировать текст четырьмя различными способами. Эти украшения используются для привлечения внимания читателя к важным фрагментам текста (рис. 4.8).

Добавление в текст декоративного элемента 1. text-decoration: В списке CSS-определений напишите название свойства и поставьте двоеточие (листинг 4.8). Рис. 4.8. На рисунке представлены разные способы украшения текста, однако самым полезным из них является подчеркивание. Чтобы выделить текст, который будет удален, можно использовать зачеркивание

Листинг 4.8. Важные фрагменты текста подчеркнуты, если они не находятся внутри тэга <em>. В противном случае текст перечеркнут, и над ним проходит линия, так как эти свойства наследуются от тэга <p>

<html> <head> <style type="text/css"> em { text-decoration: underline; } p em { text-decoration: line-through; } p {text-decoration: overline; } </style> </head> <body> <em>CHAPTER 4<br> The Rabbit Sends in a Little Bill</em> <p>It was the White Rabbit, trotting slowly back again, and looking anxiously about ->as it went, as if it had lost something; and she heard it muttering to itself<em> ->'The Duchess! Oh my dear paws! Oh my fur and whiskers! She'll get me executed, ->as sure as ferrets are ferrets! Where <i>can</i> I have dropped them, I wonder?' -></em>Alice guessed in a moment...</p> </body> </html>

Украшение текста 107 Таблица 4.9. Возможные значения свойства text-decoration Значение

Совместимость

none

IE4, N4, CSS1

underline

IE3, N4, CSS1

overline

IE4, N6, CSS1

line-through

IE3, N4, CSS1

blink

IE4, N4, CSS1

2. underline; Чтобы указать стиль украшения, используйте следующие значения (табл. 4.9): – underline помещает линию под текстом; – overline располагает линию над текстом; – line-through перечеркивает текст; – blink делает текст мигающим; – none снимает все установленные ранее декоративные стили. В список определений можно включить несколько декоративных стилей при условии, что первый в списке не none. Стили нужно разделить пробелами: underline overline underline blink. Многим посетителям, особенно тем, кто находится на сайте долго, не нравится мигающий текст. Поэтому не стоит увлекаться стилем blink. Зачеркивание удобно в online-каталогах: старая цена товара зачеркивается, а новая остается без изменений. Если назначить свойству text-decoration значение none, то во многих браузерах может исчезнуть подчеркивание ссылок. Многие посетители находят ссылки в остальном тексте именно по подчеркиванию. Однако я считаю, что выделение ссылок таким образом загромождает страницу, к тому же ссылки можно отметить и другими способами. Тем не менее посетители предпочитают традиционное подчеркивание.

108 Управление текстом

Управление свойствами пробелов Как упоминалось в разделе «Выделение абзацев в тексте», многие браузеры раньше заменяли несколько пробелов одним, если не использовался тэг <pre>, указывающий браузеру, что текст уже отформатирован. С помощью CSS можно как запрещать, так и разрешать объединение пробелов. Также допускается указывать, когда текст должен прерываться пробелом, а когда – нет (сравните с HTML-тэгом <nobr>). В данном примере (листинг 4.9 и рис. 4.9) текст с пробелами выглядит не слишком красиво. Однако они исчезнут, если не определить атрибут white-space (рис. 4.10).

Листинг 4.9. В тэг <p> добавлено свойство white-space: pre, в результате все пробелы отображаются на экране. Но если используется класс .collapse, пробелы между символами исчезают

<html> <head> <style type="text/css"> p { white-space: pre; } .collapse {white-space: normal;} </style> </head> <body> <p>A L I C E 'S RIGH TFOOT, ES Q.</p> <p class="collapse">H E ->A R T H R UG , </p> <p>(WI T H ->A L I C E ' ->S L O V E). <img scr="alice08.gif" width="200" ->height="131"> </p> </body> </html>

Рис. 4.9. Использование пробелов позволяет отображать текст именно так, как вы хотите. Заметьте, что пробелы вытеснили картинку

Управление свойствами пробелов 109

Установка свойств пробелов в селекторе

Рис. 4.10. Пробелы исчезают, если стиль не определен

1. white-space: В списке CSS-определений напишите название свойства и поставьте двоеточие (листинг 4.9). 2. pre Чтобы определить способ управления пробелами в тексте, введите одно из следующих значений (табл. 4.10): – pre сохраняет несколько пробелов; – nowrap не прерывает строку до тех пор, пока не доходит до тэга <br>; – normal позволяет браузеру определять, как управлять пробелами. Обычно при этом несколько пробелов преобразуются в один.

Таблица 4.10. Возможные значения свойства white-space Значение

Совместимость

normal

IE5*, N4, CSS1

pre

IE5*, N4, CSS1

nowrap

IE5*, N6, CSS1

* IE5.5 и IE6 для Windows.

Если в тэге определено значение nowrap, то строка не прерывается независимо от ширины экрана. Чтобы прочитать текст, пользователю придется подвинуть страницу, а это не всем нравится. Значение nowrap удобно в таблицах, если требуется, чтобы строка в ячейке не прерывалась.

110 Управление текстом

Установка разрыва страницы для печати Когда вам потребуется распечатать Webстраницу, вы можете столкнуться со следующей проблемой. Нельзя точно сказать, где закончится страница. Web-страница обычно состоит из нескольких печатных страниц. Может случиться так, что заголовок раздела окажется в конце страницы, а текст – в начале следующей. Такая проблема решается добавлением в HTML-тэг определенного программного кода (см. раздел «Добавление CSS в HTML-тэг» в главе 2). В рассматриваемом примере (рис. 4.11) новая глава начинается со второй страницы. Когда вы распечатываете Web-страницу, заголовок может попасть в любое место печатного листа. Но если добавить разрыв страницы в тэг <h3> (листинг 4.10), легко добиться того, что заголовок при печати окажется на новой странице (рис. 4.12).

Рис. 4.11. На экране за одним разделом сразу идет следующий

Листинг 4.10. В тэге <h3> определен разрыв страницы при печати

<html> <body> <p>Once more she found herself in the ->long hall...</p> <hr> <h3 style="page-break-before: ->always;">CHAPTER 8<br> The Queen's Croquet-Ground</h3> <p>A large rose-tree stood near...</p> </body> </html>

Установка разрыва страницы для печати 111

Установка разрыва страницы

Рис. 4.12. При печати каждый раздел начинается с новой страницы

Таблица 4.11. Возможные значения свойства page-break-before Значение

Совместимость

always

IE4, N6, CSS2

auto

IE4, N6, CSS2

1. style=" Это CSS-свойство функционирует только в составе атрибута style в HTML-тэге. 2. page-break-before: В списке CSS-определений напишите название свойства и поставьте двоеточие (листинг 4.10). 3. always; Чтобы определить способ управления разрывами страницы, введите одно из следующих значений (табл. 4.11): – always помещает разрыв страницы перед элементом; – auto позволяет браузеру определить положение разрыва страницы. 4. " Добавьте другие стили и закройте атрибут style с помощью кавычек ("). Помните, что если этот атрибут включить в CSS-правило, он не будет работать: его нужно вводить непосредственно в тэг с атрибутом style. То же самое относится и к свойству page-break-after, но разрыв страницы помещается после тэга. О том, как правильно устанавливать разрыв страницы, рассказывается в разделе «Отображение страницы на экране и при выводе на печать» в главе 22.

Управление списками и указателем мыши

HTML позволяет автоматически устанавливать нумерованные и маркированные списки. Вы задаете список, а остальные действия выполняет браузер. При добавлении пункта его вид автоматически определяется, и он отображается на экране маркированным или нумерованным в зависимости от вида предыдущего элемента. Однако в HTML ограничен выбор вида списка. В CSS представлено гораздо больше вариантов. Допускается менять вид маркера, который используется для обозначения пункта списка (буква, цифра или точка), или создавать собственные маркеры и списки с висячими отступами. Но Netscape 4 и Internet Explorer 4 не поддерживают многие из этих свойств. Даже если какое-либо из них и доступно в Netscape 4, вы все равно не сможете использовать любой HTML-тэг, поскольку разрешается лишь переопределять тэг <li>. В этой главе рассказывается, как с помощью CSS придать спискам нужный вам вид, а также описывается, как различными способами менять форму указателя мыши.

Списки 113 Листинг 5.1. Все параметры списка определяются одновременно

<html> <head> <style type="text/css"> li {list-style: url(bullet1.gif) ->circle inside; } </style> </head> <body> <h3>Places to go</h3> <ul> <li>london <li>paris <li>tokyo <li>new york <li>slippery creek </ul> </body> </html>

Рис. 5.1. Определяйте списки с помощью CSS

Списки С помощью свойства list-style можно описать все параметры списка в одной строке. Допустимо использовать свойства list-style-type, list-style-position и list-style-image. В данном примере (листинг 5.1) приведен список городов, которые я хотел бы когда-нибудь посетить. В нем применяются необычные маркеры (рис. 5.1).

Определение в селекторе нескольких параметров списка 1. li{ Установите селектор элемента списка, который нужно переопределить. Из-за ограничений Netscape 4 лучше использовать тэг <li>. 2. list-style: Введите свойство list-style и поставьте двоеточие. Укажите значения свойства list-style (табл. 5.1). 3. circle Задайте значение свойства list-styletype (табл. 5.2) и нажмите клавишу пробела. Если вы не хотите использовать маркеры, установите значение none (см. следующий раздел). 4. inside Введите значение свойства list-styleposition и нажмите клавишу пробела. Допустимы следующие значения: – inside. Строки выравниваются по маркеру; – outside. Строки выравниваются по первой букве в первой строке текста. Дополнительную информацию вы найдете далее, в разделе «Создание висячих отступов».

114 Управление списками и указателем мыши 5. url(bullet1.gif) Впишите свойство list-style-image. Чтобы использовать собственный маркер, сначала нужно создать его графическое изображение (рис. 5.2), а затем указать путь к нему. Путь может быть либо полным Web-адресом, либо локальным именем файла (см. далее раздел «Создание собственных маркеров»). 6. ;} Закройте определение с помощью точки с запятой. Затем запишите в этом правиле другие определения. Закройте правило фигурной скобкой (}). Все значения, указанные в предыдущем примере, различны. Чтобы обеспечить работу правила, необязательно включать каждое из них в определение. Недостающие значения будут присвоены по умолчанию. Например, определение list-style: inside; будет работать. Если посетитель отключил отображение графики в браузере или графический маркер по какой-либо причине не загружается, используется свойство list-styletype, установленное по умолчанию.

Таблица 5.1. Значения свойства list-style Значение

Совместимость

<list-style-type>

IE4, N4, CSS1

<list-style-position> IE4, N6, CSS1 <list-style-image>

IE4, N6, CSS1

Таблица 5.2. Маркеры list-style Название

Вид (зависит от системы)

disc

circle

{

square

decimal

upper-roman

lower-roman

upper-alpha

lower-alpha

Рис. 5.2. Маркер-стрелка

Виды маркеров 115 Листинг 5.2. Создаются два класса: в одном в качестве маркера используется закрашенный кружок, в другом – квадрат

<html> <head> <style type="text/css"> li.grocery {list-style-type: disc;} li.computer {list-style-type: ->square;} </style> </head> <body> <h3>Shopping list</h3> <ul> <li class="grocery">Butter <li class="grocery">Milk <li class="grocery">Cereal <li class="computer">5GB Hard Drive <li class="grocery">Orange Juice <li class="grocery">Cat Food <li class="computer">64MB RAM <li class="grocery">Soup </ul> </body> </html>

Рис. 5.3. Пункты, относящиеся к компьютеру, помечены другим маркером Таблица 5.3. Значения свойства list-style-type Значение

Совместимость

IE4, N4, CSS1

none

IE4, N4, CSS1

Виды маркеров С помощью свойства list-style можно изменять вид маркера, который используется в списке. Маркером может быть закрашенный кружок (disc), пустой кружок (circle), квадрат (square), а также буквы, цифры и точки. В данном примере (листинг 5.2) определен список покупок. Для различных типов элементов применяются разные виды маркеров (рис. 5.3).

Определение вида маркера 1. li.grocery{ Запишите селектор, который следует определить. В данном примере объявляется класс grocery, относящийся к тэгу <li>. Важно помнить, что в Netscape с помощью этих свойств можно менять только этот тэг. 2. list-style-type: Введите свойство list-style-type и поставьте двоеточие. Задайте значения свойства list-style-type, используя перечисленные в табл. 5.3. 3. disc Укажите название маркера (табл. 5.2). Если вы не хотите применять маркеры, установите значение none. 4. ;} Закройте определение с помощью фигурной скобки (}). В Netscape 4 свойство list-style-type можно использовать только с тэгом <li>. Это противоречит стандарту CSS, в котором говорится, что для создания списка подходит любой тэг, если в нем есть определение display.

116 Управление списками и указателем мыши

Создание висячих отступов Часто текст в элементе маркированного списка занимает несколько строк. С помощью свойства list-style-position можно определить положение текста по отношению к маркеру. Если текст выравнивается по первой букве первой строки, такой отступ называется висячим. В рассматриваемом примере (листинг 5.3) устанавливается два вида отступа: висячий и тот, в котором текст выравнивается по маркеру (рис. 5.4).

Установка отступа в списке 1. li.inside{ Введите селектор. В этом примере создается независимый класс inside. Если он используется в тэге <li>, то текст выравнивается по маркеру. 2. list-style-position: Укажите свойство list-style-position и поставьте двоеточие. 3. inside Чтобы определить вид отступа, введите одно из следующих ключевых слов (табл. 5.4): – inside. Строки выравниваются по маркеру; – outside. Строки выравниваются по первой букве в первой строке текста. 4. ;} Закройте определение с помощью точки с запятой и фигурной скобки (}).

Листинг 5.3. Висячий отступ используется по умолчанию. Выровнять текст по маркеру позволяет класс inside

<html> <head> <style type="text/css"> li {list-style-position: ->outside; width="200px"} li.inside { list-style-position: ->inside;} </style> </head> <body> <ul> <li>'A knot!' said Alice, always ->ready to make herself useful, and ->looking anxiously about her. 'Oh, ->do let me help to undo it!' <li class="inside">'I shall do ->nothing of the sort,' said the ->Mouse, getting up and walking ->away. 'You insult me by talking ->such nonsense!' <li>'I didn't mean it!' pleaded poor ->Alice. 'But you're so easily ->offended, you know!' <li>The Mouse only growled in reply. </ul> </body> </html>

Маркированные списки с висячим отступом (outside) обычно выглядят лучше, чем списки без отступа (inside).

Рис. 5.4. Два вида отступа

Создание собственных маркеров 117 Таблица 5.4. Возможные значения свойства list-style-position Значение

Совместимость

inside outside

IE4, N6, CSS1 IE4, N6, CSS1

Листинг 5.4. Вместо обычного маркера в этом списке используется графическое изображение

<html> <head> <style type="text/css"> li {list-type-image: ->url(bullet1.gif); ->margin-left: 20px;} </style> </head> <body> <h2>Things to do</h2> <ul> <li>write book <li>make examples <li>edit book <li>take holidays in bahammas <li>drink pina colladas </ul> </body> </html>

Создание собственных маркеров Маркеры, поддерживаемые браузерами по умолчанию, можно использовать неограниченно (см. выше раздел «Виды маркеров»). В качестве маркеров также применяют графические изображения в формате GIF, JPEG и PNG, если браузер поддерживает такую возможность. В данном примере (листинг 5.4) приводится список дел, которые нужно выполнить в ближайшее время (рис. 5.5), а маркером служит созданная ранее стрелка (рис. 5.2).

Определение собственного маркера 1. li{ Введите селектор списка. 2. list-style-image: Укажите свойство list-style-image и поставьте двоеточие. 3. url(bullet1.gif); Чтобы маркировать список созданным вами графическим объектом, нужно указать в браузере путь к нему. Путь может быть либо полным Web-адресом, либо локальным именем файла. В этом примере bullet1.gif представляет собой локальный файл.

118 Управление списками и указателем мыши Если вы не хотите добавлять свой маркер, укажите значение none. В этом случае браузер проигнорирует все наследованные маркеры (табл. 5.5). 4. ;} Закройте определение с помощью точки с запятой. Затем впишите в правило другие определения и завершите его фигурной скобкой (}). Netscape 4 не поддерживает свойство list-style-image. Поэтому рекомендуется включать в определение также и liststyle-type на тот случай, если нельзя будет использовать картинку. Применение графических маркеров улучшает вид страницы, но увеличивает время ее загрузки. Учтите, что графические маркеры иногда занимают больше места, чем обычные. При использовании высоких изображений пространство между отдельными маркерами увеличивается. Если же применяются широкие изображения, текст сдвигается вправо.

Рис. 5.5. Не ограничивайтесь использованием имеющихся в браузере маркеров – создавайте новые с помощью CSS

Таблица 5.5. Возможные значения свойства list-style-image Значение

Совместимость

<url>

IE4, N6, CSS1

none

IE4, N6, CSS1

Форма указателя мыши 119 Листинг 5.5. Для определения формы указателя используется класс help, так как ссылка относится к слову «help». Указатель, находящийся над картинкой, определяется как move. Для других элементов страницы используется указатель, который обычно появляется в левом верхнем углу экрана при изменении размеров окна

<html> <head> <style type="text/css"> .help {cursor: help;} body {cursor: nw-resize;} img {cursor: move;} </style> </head> <body> <h3>CHAPTER 8<br> The Queen's Croquet-Ground</h3> <p><img src="alice30.gif" width="200" ->height="272" border="0" align="left"> ->A large rose-tree stood near the ->entrance of the garden...</p> <p>'I couldn't <a class="help" ->href="#">help</a> it,' said Five, in ->a sulky tone; 'Seven jogged my ->elbow."</p> </body> </html>

Рис. 5.6. Указатель имеет форму стрелки, но все же отличается от обычного

Форма указателя мыши Обычно форма указателя мыши устанавливается браузером, при этом указатель меняется в зависимости от того, в каком месте страницы он находится. Например, указатель, наведенный на текст, становится текстовым курсором. Если же страница недоступна, указатель приобретает форму песочных часов, таким образом подавая сигнал посетителю, что нужно подождать. Однако не всегда следует рассчитывать на браузер, иногда необходимо самим описывать формы указателя. В приведенном примере (листинг 5.5) определяются различные формы указателя. Выбор формы зависит от элемента страницы, над которым находится указатель (рис. 5.6, 5.7 и 5.8).

Рис. 5.7. При наведении на ссылку указатель превращается в знак вопроса

120 Управление списками и указателем мыши

Определение формы указателя мыши 1. cursor: В списке CSS-определений напишите слово cursor и поставьте двоеточие. 2. help Укажите одно из названий формы указателя (табл. 5.6) или установите значение auto, если вы хотите оставить выбор формы указателя за браузером (табл. 5.7). Стандарты CSS позволяют создавать указатель мыши с помощью Web-графики: cursor: url(myPointer.gif); К сожалению, ни один браузер не поддерживает данную функцию. Менять форму указателя мыши – интересное занятие, но протестировав эту возможность на своем сайте, я пришел к выводу, что не всем посетителям это нравится. Многие присылают сообщения по электронной почте с просьбой вернуть обычный указатель. Пользователи уже привыкли к традиционным указателям и знают, что обозначает та или иная форма. Изменение этих стандартов может запутать людей.

Рис. 5.8. Когда указатель мыши находится над картинкой, он становится указателем изменения размера. Эта возможность пригодится нам в будущем (см. главу 25)

Таблица 5.6. Формы указателя Название

Вид (зависит от системы)

crosshair hand* pointer move n-resize ne-resize e-resize se-resize

Таблица 5.7. Возможные значения свойства cursor

s-resize sw-resize w-resize

Значение

Совместимость

nw-resize

IE4, N6, CSS2

text

<url>

CSS2

wait

auto

IE4, N6, CSS2

help

none

IE4, N6, CSS2

* Только в IE, совпадает с pointer.

I ?

управление цветами и фоном

В HTML всегда существовала возможность менять цвет фона и графики. Однако изменить фон всей Web-страницы было очень сложно. Допускалось менять фон в ячейках таблицы, но и эта функция была ограничена. CSS позволяет работать с цветом фона и графикой в каждом отдельном элементе страницы, что значительно разнообразит дизайн Web-страницы. В действительности эта возможность – наиболее важная из всех предлагаемых CSS.

Рис. 6.1. Справа появляется фон страницы (растущая Алиса). У заголовка есть свой фон: твердая текстура присутствует только слева, остальная часть выделяется серым цветом

Фон Чтобы определить цвет фона или поместить картинку на задний план, используется свойство background. Изменить цвет фона можно как на всей странице, так и позади отдельного элемента. Таким же образом добавляется картинка (рис. 6.1 и листинг 6.1).

122 Управление цветами и фоном

Установка фона 1. background: Введите свойство background и поставьте двоеточие. Укажите значения свойства background (табл. 6.1). 2. white Задайте цвет фона и нажмите клавишу пробела. Это значение может быть названием цвета, шестнадцатеричным кодом или RGB. Если вы введете значение transparent, то браузер выберет цвет, установленный по умолчанию. 3. url(alice05.gif) Укажите URL картинки, которую требуется поместить на заднем плане, и нажмите клавишу пробела. Путь к файлу с этим изображением (GIF, JPEG или PNG) может быть как полным Web-адресом, так и локальным именем файла. Вместо URL можно указать значение none. В этом случае на заднем плане не будет картинки. 4. no-repeat Запишите ключевое слово, которое определяет повторяемость фона, и нажмите клавишу пробела. Значения ключевого слова: – repeat. Браузер размножит графическое изображение, заполнив весь фон элемента; – repeat-x. Изображение повторяется вдоль горизонтальной линии, исходящей из вершины элемента (ось Х); – repeat-y. Изображение дублируется вдоль вертикальной линии, проходящей по левой стороне элемента (ось Y); – no-repeat. Изображение появится только один раз.

Листинг 6.1. Внутри тэга <body> устанавливается цвет фона страницы. Картинка зафиксирована справа и не повторяется. В тэге <h3> определяется фон заголовка, рисунок которого повторяется сверху вниз на левой стороне элемента

<html> <head> <style type="text/css"> body {background: white url ->(alice05.gif) no-repeat fixed ->right top;} h3 { background: #999999 url ->(background_rough.gif) ->repeat-y left top; color: white; width: 60%; padding: 20px; } p {width: 60%;} </style> </head> <body> <h3>CHAPTER 2<BR> The Pool of Tears</h3> <p>'Curiouser and curiouser!' cried ->Alice...</p> <p>And went on planning...</p> <p>Oh dear, what nonsense I'm ->talking!'</p> <p>Just then her head struck...</p> <p>Poor Alice!...</p> <p>'You ought to be ashamed of ->yourself...</p> <p>After a time she heard a little ->pattering...</p> </body> </html> Таблица 6.1. Возможные значения свойства background Значение

Совместимость

<background-color>

IE4, N4, CSS1

<background-image>

IE4, N4, CSS1

<background-repeat>

IE4, N4, CSS1

<background-attachment>

IE4, N6, CSS1

<background-position>

IE4, N6, CSS1

Фон 123

Рис. 6.2. Текст переместился, а изображение на заднем плане осталось на месте

Что нужно знать о фоне Netscape и Internet Explorer по-разному повторяют фон элемента. В Internet Explorer фон распространяется по всему экрану, в Netscape – только до конечной точки элемента. Чтобы решить эту проблему, установите ширину элемента в пикселах или процентах. Тогда оба браузера будут ориентироваться на соответствующую ширину элемента (см. раздел «Ширина и высота элемента» в главе 7).

5. fixed Введите ключевое слово, которое определяет поведение фона при прокрутке страницы, и нажмите клавишу пробела. Ключевое слово может быть следующим: – fixed. Браузер не будет перемещать фон вместе с остальными элементами (рис. 6.2); – scroll. Фон передвинется вместе с элементом. 6. righttop; Чтобы определить место по отношению к левому верхнему углу элемента, где должен появиться фон, укажите две величины, разделенные пробелом. Они могут принимать следующие значения: – длина, например –10px. Значение может быть как положительным, так и отрицательным. Первое число – это расстояние от элемента до левого края его родительского элемента. Второе число задает расстояние от верхнего края элемента; – проценты, например 25%. Первое число определяет горизонтальную пропорцию по отношению к размеру родительского элемента, второе – вертикальную. Возможность помещать фоновую графику независимо от текста – мощный инструмент, который используется в дизайне Web-страницы. Благодаря ему не нужно создавать новые изображения каждый раз, когда меняется текст. Комбинируя возможности HTML-текста и графики, вы получите потрясающие результаты. Атрибут background позволяет определять все свойства фона сразу. В следующем разделе рассказывается, как установить каждый атрибут отдельно.

124 Управление цветами и фоном

Установка отдельных свойств фона Атрибут background позволяет устанавливать все свойства фона сразу (см. предыдущий раздел), однако можно определить каждое свойство отдельно.

Цвет фона С цветом фона HTML-страницы можно было работать еще в первых Web-браузерах. CSS позволяет устанавливать цвет фона не только всей страницы, но и отдельного элемента (листинг 6.2 и рис. 6.3). Рис. 6.3. Все элементы страницы имеют свой цвет фона. Картинка помещена на розовом фоне. Этот цвет виден там, где изображение прозрачно

Листинг 6.2. Цвет фона страницы – серый. Однако другие CSS-определения (<img>, <h3>, <p>, использующие класс copy и highlight) меняют его

<html> <head> <style type="text/css"> body {background-color: #cccccc;} img {background-color: #ff9999;} h3 {position: relative; background-color: #ff9999; layer-background-color: ->#ff9999; padding: 10px;} p.copy {position: relative; background-color:rbg(100%, 100%, 100%); ->layer-background-color: rbg(100%, 100%, 100%); padding: 10px;} .highlight {background-color: black; color: white;} </style> </head> <body> <h3>CHAPTER 6<br> Pig and Pepper</h3> <p class="copy">For a minute or two she stood looking at the house, and ->wondering...</p> <img scr="alice21.gif" width="300" height="248" border="0"> </body> </html>

Установка отдельных свойств фона 125 Таблица 6.2. Возможные значения свойства background-color Значение

Совместимость

<color>

IE4, N4, CSS1

transparent

IE4, N4, CSS1

Определение фона элемента 1. background-color: Напишите название свойства и поставьте двоеточие. 2. #cccccc Укажите цвет фона (табл. 6.2). Эта величина может быть названием цвета, шестнадцатеричным кодом или RGB. Если вы хотите использовать цвет, установленный браузером по умолчанию, введите значение transparent. По умолчанию фону элемента присваивается значение none. Таким образом, если для элемента не установить конкретный цвет фона или не поместить картинку на задний план, то в качестве фона будет использоваться фон родительского элемента.

Рис. 6.4. Несмотря на установку цвета фона, между элементом и его рамкой (вверху) появляется белый отступ. Чтобы закрасить отступ, используется свойство layerbackground-color, но цвет выходит за рамку элемента (внизу)

Цвет фона в Netscape При установке цвета фона в Netscape возникает ошибка. Между элементом и его рамкой появляется белый отступ (рис. 6.4). Проблему легко решить, добавив атрибут layer-background-color: black;. При помощи этого кода, если задано точное положение элемента, отступ также окрашивается цветом фона (см. раздел «Определение положения элемента» в главе 8). Однако и при использовании данного кода возможны ошибки. Цвет иногда выходит за рамку элемента, что выглядит довольно странно (рис. 6.4). Скорее всего, с этим недостатком придется смириться.

126 Управление цветами и фоном

Изображение на заднем плане С помощью CSS можно не только поместить изображение на задний план элемента или сделать фоном страницы, но и определить его положение на экране, а также то, каким образом картинка будет повторяться (листинг 6.3 и рис. 6.5).

Рис. 6.5. Изображение, помещенное на задний план, появляется слева, а текст сдвигается вправо Листинг 6.3. В этом примере изображение, которое помещается на задний план, определяется в тэге <body>. Изображение фиксируется при помощи отрицательных величин, оно не повторяется, но может двигаться вверх и влево. В тэге <h3> определяется повторяющееся изображение на заднем плане заголовка. Расстояние между текстом и картинкой равно 200px, поэтому текст не накладывается на картинку

<html> <head> <style type="text/css"> body { background-image: url(alice05.gif); background-repeat: no-reapeat; background-attachment: fixed; background-position: -10px –5px: } h3 { background-image: url(background_rough.gif); background-repeat: repeat-x; background-position: -20px –2px; margin-left: 200px; padding: 10px; } .copy {margin-left: 200px;} </style> </head> <body> <h3>CHAPTER 2<br> The Pool of Tears</h3> <p>'Curiouser and curiouser!' cried Alice...</p> </body> </html>

Установка отдельных свойств фона 127 Таблица 6.3. Возможные значения свойства background-image Значение

Совместимость

<url>

IE4, N4, CSS1

none

IE4, N4, CSS1

Таблица 6.4. Возможные значения свойства background-repeat Значение

Совместимость

repeat

IE4, N4, CSS1

repeat-x

IE4, N4, CSS1

repeat-y

IE4, N4, CSS1

no-repeat

IE4, N4, CSS1

Таблица 6.5. Возможные значения свойства background-attachment Значение

Совместимость

scroll

IE4, N6, CSS1

fixed

IE4, N6, CSS1

Рис. 6.6. Текст переместился, а изображение на заднем плане осталось на месте

Определение положения картинки на заднем плане 1. background-image:url(alice05.gif); Напишите название свойства backgroundimage и укажите URL, определяющий путь к файлу с картинкой (GIF, JPEG, PNG). Путь может быть как полным Web-адресом, так и локальным именем файла. Если вы не хотите использовать графическое изображение, вместо URL введите значение none (табл. 6.3). 2. background-repeat:no-repeat; Укажите свойство background-repeat и поставьте двоеточие. Чтобы определить повторяемость фона, задайте одно из следующих ключевых слов (табл. 6.4): – repeat. Браузер размножит графическое изображение, заполнив весь фон элемента; – repeat-x. Изображение повторяется вдоль горизонтальной линии, проходящей по вершине элемента; – repeat-y. Изображение дублируется вдоль вертикальной линии, проходящей по левой стороне элемента; – no-repeat. Изображение появится только один раз. 3. background-attachment:fixed; Введите атрибут background-attachment и поставьте двоеточие. Чтобы определить положение фона при прокрутке страницы, выберите одно из следующих ключевых слов (табл. 6.5): – fixed. Браузер не будет перемещать фон вместе с остальными элементами (рис. 6.6); – scroll. Фон переместится вместе с элементом.

128 Управление цветами и фоном 4. background-position:-10px–5px; Напишите название свойства backgroundposition и поставьте двоеточие. Чтобы определить место по отношению к левому верхнему углу элемента, где должен появиться фон, введите две величины, разделенные пробелом. Они могут принимать следующие значения (табл. 6.6): – длина, например –10px. Значение может быть как положительным, так и отрицательным. Первое число – это расстояние от элемента до левого края его родительского элемента. Второе число задает расстояние от верхнего края элемента; – проценты, например 25%. Первое число определяет горизонтальную пропорцию по отношению к размеру родительского элемента, второе – вертикальную; – ключевое слово (см. раздел «Позиционирование с помощью ключевых слов»). Иногда повторяющийся фон может появляться в неожиданных местах или распространяться не в том направлении. С помощью CSS-свойства background-repeat фоном можно управлять. Проценты и длину допустимо использовать в определении background-position одновременно, однако их нельзя применять вместе с ключевыми словами. Пространство на заднем плане, на котором нет картинки, заполняется цветом фона (см. раздел «Установка отдельных свойств фона»).

Таблица 6.6. Возможные значения свойства values Значение

Совместимость

IE4, N6, CSS2

IE4, N6, CSS2

top

IE4, N6, CSS2

center

IE4, N6, CSS2

bottom

IE4, N6, CSS2

left

IE4, N6, CSS2

right

IE4, N6, CSS2

Позиционирование с помощью ключевых слов Определять положение графического изображения можно с помощью ключевых слов, например background: center top;. Для определения положения картинки на экране используются следующие ключевые слова:

left, center, right задают горизонтальное положение; top, center, bottom указывают вертикальное положение.

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

Установка цвета на переднем плане 129

Установка цвета на переднем плане С помощью свойства color определяется цвет элемента (листинг 6.4). Первоначальное назначение этого свойства – менять цвет текста. Но в Internet Explorer и Netscape 6 оно также используется в формах (рис. 6.7).

Рис. 6.7. Заголовок текста напечатан красным цветом. Этим цветом выделен также текст в форме Листинг 6.4. Тэг <h2> окрашивает текст в красный цвет

<html> <head> <style type="text/css"> h2 { color: red; } form { color: #990000; } input { color: rgb(100%, 0%, 0%); } .copy { color: rgb(102,102,102); } </style> </head> <body. <h2>CHAPTER 5<br> Advice from a Caterpillar</h2> <p class="copy">The Caterpillar and ->Alice looked at each other...</p> <p class="copy">'Who are you?' said ->the Caterpillar...</p> <p class="copy">This was not an ->encouraging opening for a ->conversation...</p> <form name="FormName" action="#" ->method="get">Enter your advice here: <input type="text" ->name="textfieldName" ->size="48"><br> <input type="submit" name="advice" ->value="Give Advice"> </form> </body> </html>

Определение цвета на переднем плане 1. color: В списке CSS-определений напишите название свойства color и поставьте двоеточие. 2. red; Укажите цвет элемента (табл. 6.7). Это значение может быть названием цвета, шестнадцатеричным кодом или RGB (см. раздел «Значения и единицы» во введении). Если вы определите цвет у нескольких элементов, он будет меняться неожиданно. Самый простой пример – определение цвета в тэге <body>. Internet Explorer 4/5/6 и Netscape 6 изменит цвет всех элементов в данном тэге. Следите за тем, какой тэг вы переопределяете и как это может повлиять на другие тэги (см. раздел «Наследование родительских свойств» в главе 2). С помощью свойства color можно установить цвет рамки, но его легко заменить цветом, установленным с помощью свойства border-color (см. раздел «Атрибуты рамки» в главе 7).

Таблица 6.7. Возможные значения свойства color Значение

Совместимость

<color>

IE3, N4, CSS1

управление рамками и полями

Из физики известно, что все тела состоят из атомов, а каждый атом обладает рядом характеристик. Атомы образуют молекулы, свойства которых отличаются от свойств атомов. Так и Web-страница состоит из HTMLтэгов. У каждого тэга есть свои возможности. Тэги разрешается комбинировать, создавая Web-страницу. В итоге она представляет собой объект, гораздо больший, чем ее составляющие. Каждый тэг представляет собой самостоятельный элемент на экране, независимо от того, является он отдельным тэгом или определен внутри других. И этим тэгом можно управлять с помощью CSS. Чтобы описать все эффекты, применяемые к HTML-элементам, рассмотрим его как объект, имеющий несколько свойств: поля, рамки, внутренний отступ, ширину и высоту. CSS позволяет работать со всеми этими свойствами. В данной главе рассказывается, как управлять элементом и его свойствами.

Что такое элемент 131

Что такое элемент Термин «элемент» относится к различным частям HTML-документа, которые определяются с помощью тэгов-контейнеров. Например, <p>Alice</p> представляет собой HTML-элемент. Выражение <div><p><b> Alice<imgscr="alice11.gif"></b></p></div> также является HTML-элементом. В первом примере элемент создан с помощью одного тэга. Во втором он представляет собой набор вложенных тэгов, каждый из которых, в свою очередь, является отдельным элементом. Помните, что вложенные тэги называются тэгами-потомками по отношению к тем тэгам, внутри которых они находятся. Последние называются тэгами-родителями (см. раздел «Наследование родительских свойств» в главе 2). В следующих разделах подробно описываются составляющие элемента.

Рис. 7.1. У элемента есть поле, рамка, расстояние от рамки до основного содержимого. Можно задать ширину и высоту элемента или оставить определение этих величин за браузером. Начальная точка элемента всегда находится в левом верхнем углу

132 Управление рамками и полями

Составляющие элемента У HTML-элемента есть четыре стороны: левая, правая, верхняя и нижняя (рис. 7.1). Они являются составляющими элемента, и к ним можно применять CSS-свойства. У каждой стороны элемента есть следующие свойства: ширина и высота (width, height) – длины сторон элемента. Ширина относится к верхней и нижней части, а высота – к левой и правой стороне. Длина параллельных сторон (левая/правая и верхняя/нижняя) одинакова. Если вы не определите ширину и высоту элемента, это сделает браузер (см. следующий раздел); поле (margin) – пространство между рамкой и элементом и другими элементами окна (см. раздел «Поле элемента»); рамка (border) – линия, очерченная вокруг элемента. Рамка остается невидимой до тех пор, пока не определен ее цвет, ширина и стиль, например сплошная или пунктирная линия (см. раздел «Рамка элемента»); внутренний отступ (padding) представляет собой пространство между рамкой и содержимым элемента (см. раздел «Внутренний отступ»).

Элементы могут располагаться друг вокруг друга, а также встраиваться (см. раздел «Обтекание текстом»).

Тэги или контейнеры? Как вы, наверное, заметили, термин «HTML-тэг» часто используется не только в этой книге, но и в Internet. В HTML-тэге содержатся необходимые «инструкции» для браузера, определяющие его действия (например, тэг <blockquote>). У многих тэгов есть закрывающие тэги, которые начинаются со слэша (/). Например, тэг </blockquote> является закрывающим для тэга <blockquote>. Появление закрывающего тэга означает, что действие основного прекращается. Такие тэги называются контейнерами. Но часто тэгом является весь контейнер.

Содержимое элемента В центре элемента находится его содержимое (content). К этой области применяются все остальные CSS-свойства (шрифт, текст, цвет, фон и списки). Заметьте, что свойство «фон» относится и к заполненной части элемента. Содержимое включает в себя текст, списки, формы и изображения.

Ширина и высота элемента 133

Ширина и высота элемента С помощью свойств width и height можно определить ширину и высоту замененных элементов и элементов блок-уровня (см. раздел «Типы HTML-тэгов» в главе 1). Обычно браузер автоматически определяет ширину и высоту элемента. По умолчанию ширина совпадает с максимально допустимой, а высота может быть сколь угодно большой. Однако можно использовать CSS, чтобы установить оба эти свойства (листинг 7.1 и рис. 7.2).

Определение ширины элемента Рис. 7.2. Установлены ширина и высота изображения (которое выглядит неестественно сжатым) и текста. Форма элемента согласуется с шириной и высотой, а для текста, по-видимому, определена лишь ширина. Если вы не зададите свойство overflow, высота будет проигнорирована (см. раздел «Определение свойства overflow» в главе 9)

1. width: В списке CSS-определений напишите название свойства width и поставьте двоеточие.

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

<html> <head> <style type="text/css"> textarea {width: 225px; height: 100px;} .copy {width: 225px; height: 100px;} img {width: 5cm; height: 12cm} </style> </head> <body> <form action="#" method="get"> <textarea align="left" name="content" cols="40" rows="4">Alice remained looking ->thoughtfully at the mushroom... </textarea> </form> <img scr="alice11.gif" border="0" align="left"> <p class="copy"> Alice remained looking thoughtfully at the mushroom...</p> </body> </html>

134 Управление рамками и полями 2. 225px; Чтобы указать ширину элемента, используйте следующие значения (табл. 7.1): – длину; – процентную величину, которая определяет ширину элемента по отношению к ширине родительского элемента; – auto. Ширина элемента задается браузером. Обычно это максимальная длина, на которую можно растянуть элемент, чтобы он не вышел за края окна или родительского элемента.

Таблица 7.1. Возможные значения свойства width Значение

Совместимость

IE4, N4, CSS1

IE4, N4, CSS1

auto

IE4, N4, CSS1

Таблица 7.2. Возможные значения свойства height Значение

Совместимость

IE4, N6, CSS1

IE4, N6, CSS1

auto

IE4, N6, CSS1

Определение высоты элемента 1. height: Напишите название свойства height и поставьте двоеточие. 2. 100px; Чтобы указать высоту элемента, используйте следующие значения (табл. 7.2): – длину; – процентную величину, которая определяет высоту элемента по отношению к высоте родительского элемента; – auto. Высота элемента задается браузером. Она может быть сколь угодно большой в зависимости от размеров содержимого элемента. С помощью свойств width и height изменяют размер изображения (GIF или JPEG), определенный в тэге <img>. Скорее всего, изображение сильно исказится, но иногда таким образом можно добиться неплохого результата. При помощи свойств width и height поддерживается размер форм и кнопок.

Вы можете установить свойство height для любого элемента, но оно будет использоваться только в замененных тэгах (см. раздел «Типы HTML-тэгов» в главе 1). Другие тэги проигнорируют это свойство, если только вы не определите поведение перекрываемого содержимого элемента (см. раздел «Определение свойства overflow» в главе 9). Internet Explorer и Netscape понимают величину auto width по-разному. Internet Explorer растягивает элемент до границы с его родительским элементом, а Netscape – на ширину содержимого. При определении ширины элемента в Netscape 4 возникают ошибки. Если содержимое элемента не заполняет все пространство, то независимо от установленной ширины Netscape использует величину auto.

Поле элемента 135 Листинг 7.2. Поля можно устанавливать как в одном определении, так и в разных. В этом примере каждое поле указывается отдельно. В определение можно внести и стороны элемента

<html> <head> <style type="text/css"> p.paragraphtwo {margin: 5em;} h2 {margin: 1em;} p.copy { margin-top: 5em; margin-bottom: 10%; margin-left: 8em; margin-right: 200px; } </style> </head> <body> <h2>CHAPTER 7<br> A Mad Tea-Party</h2> <p class="copy">There was a table set ->out under a tree in front of the ->house...</p> <p class="paragraphtwo">The table was a large one...</p> </body> </html>

Поле элемента С помощью свойства margin определяется пространство между элементом и соседними элементами в окне. Для этого необходимо указать от одной до четырех величин (листинг 7.2), которые соответствуют всем сторонам элемента одновременно (парам «левая/правая» и «верхняя/нижняя») или каждой стороне в отдельности (рис. 7.3).

Определение полей элемента 1. margin: В списке определений напишите название свойства margin и поставьте двоеточие. 2. 5em; Чтобы указать размер поля, воспользуйтесь следующими значениями (табл. 7.3): – длиной; – процентной величиной, которая определяет поле по отношению к ширине родительского элемента; – auto. Размер поля задается браузером.

Таблица 7.3. Возможные значения свойства margin

Рис. 7.3. Поля первого текстового блока определены по отношению к рабочей области экрана

Значение

Совместимость

IE3, N4, CSS1

IE3, N4, CSS1

auto

IE3, N4, CSS1

136 Управление рамками и полями Поле с каждой стороны можно указать независимо от других (см. раздел «Поле с одной стороны»). Следует осторожно определять отрицательные поля вокруг ссылки. Если поле какого-либо элемента заходит на ссылку, она не будет работать. Поля также можно установить в тэге <body>. Таким образом задается расстояние между вложенными элементами и верхней и левой частями окна браузера. В Netscape 4 для верхнего и нижнего полей можно устанавливать только отрицательные значения. При определении полей с помощью процентных величин нельзя забывать о том, что результат зависит также и от размера окна пользователя. То, что хорошо смотрится при разрешении 640×480, может выглядеть плохо на экране большего размера. В Netscape 4 возникает ошибка: все элементы с полями работают как тэги блокуровня (см. «Типы HTML-тэгов» в главе 1).

Отрицательные поля Отрицательные поля можно использовать для получения интересных результатов, например перекрывания частей текста. Однако этот метод не всегда хорош, так как различные браузеры работают с ним по-разному. margin: -5em; Чтобы получить эффект перекрывания текста, лучше всего воспользоваться CSSпозиционированием (см. главу 8).

Поле с одной стороны Если вы хотите определить несколько полей, можно указать от одного до четырех значений, разделив их пробелами: margin: 5em auto 5em 25% одно значение задает поле для всех четырех сторон; два значения устанавливают верхнее/ нижнее и левое/правое поле; три значения определяют верхнее, левое и правое/нижнее поле соответственно; четыре значения задают каждое поле индивидуально: верхнее, правое, нижнее, левое.

Можно указать поле только для одной стороны, не задумываясь о других трех. Это особенно полезно при использовании inline-стиля, который заменяет все определенные ранее поля. Чтобы установить поле для стороны, введите расположение стороны и величину поля: margin-top: 5em; margin-bottom: 10%; margin-left: 8em; margin-right: 200px; В Internet Explorer 4 и Netscape 4 свойствам margin-left и margin-right нельзя присвоить величину auto.

Рамка элемента 137 Листинг 7.3. Все атрибуты рамки для четырех сторон можно указать в одном определении или отдельно

<html> <head> <style type="text/css"> p{ width: 230px; border: 20px double #990000; padding: 5px; } .frame { width: 230px; border-top: 1mm dotted #990000; border-bottom: 3px dashed #990000; border-left: 3pt solid #990000; border-right: 2pc inset #990000; } </style> </head> <body> <div class="frame"><img ->scr="alice14.gif"></div> <p>This time Alice waited patiently ->until it chose to speak again...</p> </body> </html>

Рамка элемента С помощью свойства border можно одновременно определить все атрибуты рамки для четырех сторон элемента (листинг 7.3). Свойство border используется для установки ширины, стиля и/или цвета рамки (рис. 7.4). Допустимо также задать рамку для каждой стороны в отдельности (см. раздел «Рамка с одной стороны»).

Рамка с одной стороны Свойства рамки можно установить отдельно для каждой стороны: border-top: 1mm dotted #990000; border-bottom: 3px dashed #990000; border-left: 3pt solid #990000; border-right: 2pc inset #990000; Этот метод больше всего подходит для замены значений, установленных в свойстве border. К сожалению, Netscape 4 не поддерживает эти свойства. Для каждого стиля нужно определять свойства отдельно (см. следующий раздел).

Рис. 7.4. Картинка окружена рамкой, стороны которой различны. Текст обведен двойной рамкой

138 Управление рамками и полями

Установка рамки 1. border: В списке CSS-определений напишите название свойства border и поставьте двоеточие. 2. 20px Укажите значение свойства border-width и нажмите клавишу пробела. В качестве значения могут использоваться следующие величины (табл. 7.4): – длина. Если длина равна 0, то рамка не появится; – ключевое слово relative-size, например thin, medium, thick. 3. double Укажите стиль рамки. В табл. 7.5 перечислены все доступные стили. Если вы не хотите, чтобы у элемента была рамка, введите значение none. 4. #990000; Укажите цвет рамки. Эта величина может быть названием цвета, шестнадцатеричным кодом или RGB. Многие браузеры поддерживают свойство border, но не работают с остальными свойствами, определяющими вид рамки. В Netscape 4 возникает ошибка: все элементы, у которых есть рамка, работают как тэги блок-уровня (см. раздел «Типы HTML-тэгов» в главе 1).

Таблица 7.4. Возможные значения свойства border Значение

Совместимость

<border-width>

IE4, N4, CSS1

<border-style>

IE4, N4, CSS1

<border-color>

IE4, N4, CSS1

Таблица 7.5. Возможные значения свойства border-style Значение

Вид

Совместимость

None

IE4, N4, CSS1

Dotted

IE4*, N6, CSS1

Dashed

IE4*, N6, CSS1

Solid

IE4, N4, CSS1

Double

IE4, N4, CSS1

Groove

IE4, N4, CSS1

Ridge

IE4, N4, CSS1

Inset

IE4, N4, CSS1

Outset

IE4, N4, CSS1

* IE5.5 и IE6 для Windows.

Атрибуты рамки 139 Листинг 7.4. Все атрибуты рамки для четырех сторон можно указать в одном определении или отдельно

<html> <head> <style type="text/css"> .frame { border-style: inset; border-color: #ff0000; border-width: 10px; } p.frame { border-style: inset; border-color: red; border-top-width: 1px; border-bottom-width: 2px; border-left-width: 4px; border-right-width: 8px; padding: 5px; } </style> </head> <body> <div class="frame"> <img scr="alice06.gif" width="200" ->height="2445"> </div> <p class="frame">Alice was not a bit ->hurt? and she jumped up on to her ->feet in a moment...</p> </body> </html>

Атрибуты рамки Атрибуты рамки (стиль, цвет и ширина) определяются при помощи свойства border (см. предыдущий раздел). Однако каждый из этих атрибутов можно указать отдельно для элемента (листинг 7.4 и рис. 7.5) и даже для одной стороны (рис. 7.6).

Определение вида рамки 1. border-style:inset; Напишите название свойства borderstyle и укажите его величину (табл. 7.5). Если вы не хотите, чтобы у элемента была рамка, введите значение none. 2. border-color:#ff0000; Укажите цвет рамки (табл. 7.6). Это значение может быть названием цвета, шестнадцатеричным кодом или RGB (см. раздел «Значения и единицы» во введении).

Таблица 7.6. Возможные значения свойства border-color Значение

Совместимость

<color>

IE4, N4, CSS1

Рис. 7.5. Атрибуты рамки разные, но их общий вид совпадает

140 Управление рамками и полями 3. border-width:10px; Напишите название свойства borderwidth и укажите его значение (табл. 7.7): – длину. Если ширина равна 0, то рамка не появится; – ключевое слово thin, medium, thick. Необязательно включать в определение все атрибуты рамки. Если вы не введете какое-либо значение, оно будет установлено по умолчанию (см. приложение 2). В Netscape 4 возникает ошибка: все элементы с рамкой функционируют как тэги блокуровня (см. раздел «Типы HTML-тэгов» в главе 1). Таблица 7.7. Возможные значения свойства border-width Значение

Совместимость

thin

IE4, N4, CSS1

medium

IE4, N4, CSS1

thick

IE4, N4, CSS1

IE4, N4, CSS1

Рис. 7.6. На самом деле рамка выглядит весьма красиво, но это трудно оценить на черно-белом рисунке

Определение вида рамки для одной стороны Допускается устанавливать разные атрибуты рамки для сторон элемента. С помощью CSS можно определять вид рамки последовательно: border-style: ridge double dotted dashed; border-width: 20px 15px 10px 5px; border-color: red green blue purple; Чтобы задать свойства рамки отдельно для каждой стороны, нужно написать от одного до четырех значений (табл. 7.6): одно значение устанавливает ширину рамки для всех четырех сторон; два значения указывают ширину рамки для верхней/нижней и левой/правой сторон; три значения определяют ширину рамки для верхней, левой и правой/нижней стороны соответственно; четыре величины описывают ширину рамки для каждой стороны отдельно: верхней, правой, нижней, левой.

Внутренний отступ 141

Внутренний отступ Может показаться, что внутренний отступ (padding) и определение полей приводят к одному и тому же результату – появляется свободное пространство вокруг содержимого элемента. Разница же заключается в том, что внутренний отступ располагается между содержимым элемента и рамкой, а не между различными элементами на экране (листинг 7.5 и рис. 7.7).

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

Листинг 7.5. В зависимости от того, с какой стороны требуется пустое пространство, можно использовать одно, два, три или четыре значения

<html> <head> <style type="text/css"> .chpttitle { padding: 10% 1cm 10px 5em; border: dashed silver 1px; } img { padding-top: 25px; } </style> </head> <body> <h3 class="chpttitle">CHAPTER 4<br> The Rabbit Sends in a Little Bill</h3> <p> <img scr="alice12.gif" width="200" height="287" border="0" align="right">It was the ->White Rabbit...</p> <p>Very soon the Rabbit noticed Alice...</p> <p>'He tookme for his housemaid,'...</p> </body> </html>

142 Управление рамками и полями

Установка внутреннего отступа 1. padding; Напишите название свойства padding и поставьте двоеточие. 2. 10%1cm 10px5em; Укажите значение свойства (табл. 7.8): – длину; – процентную величину, которая определяет внутренний отступ по отношению к ширине родительского элемента. Одно значение устанавливает внутренний отступ со всех сторон; два – с верхней/ нижней и с левой/правой сторон; четыре – для каждой стороны отдельно.

Поля и рамки в таблице Таблицы давно стали главной составляющей Web-дизайна. Для управления страницами они используются практически на всех Web-сайтах, хотя изначально предназначались только для представления табличных данных. Но без таблиц Internet никогда бы не стал той средой мультимедиа, которую выбирают миллионы пользователей во всем мире. Сейчас это трудно представить, но многие были недовольны тем, что Netscape ввел таблицы в Navigator 1, так как таблицы не входили в HTML-стандарты W3C. С тех пор каждый Web-дизайнер использует таблицы, чтобы не помещать на странице объемные тексты и графику. Применение CSS в таблицах весьма удобно: все обычные атрибуты можно установить один раз и затем менять их в одном месте, а не в каждом из тэгов <table>, <tr>, <td> отдельно.

Таблица 7.8. Возможные значения свойства padding Значение

Совместимость

IE4, N4, CSS1

IE4, N4, CSS1

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

Внутренний отступ 143 Листинг 7.6. С помощью CSS можно значительно упростить работу с таблицами

<html> <head> <style type="text/css"> table { border: 2px solid red; font: 75px "arial black"; } td { width: 150px; border: 8px inset red; align: center; text-align: center; } td.lightBG { background-color: #cccccc; } td.darkBG { background-color: #666666; } </style> </head> <body> <table> <tr> <td class="darkBG">X</td> <td class="lightBG">O</td> <td class="darkBG">X</td> </tr> <tr> <td class="lightBG">X</td> <td class="darkBG">X</td> <td class="lightBG">O</td> </tr> <tr> <td class="darkBG">O</td> <td class="lightBG">O</td> <td class="darkBG"><br></td> </tr> </table> </body> </html>

С помощью CSS значительно упрощается работа с таблицами. В листинге 7.6 показано, как задать в таблице CSS-атрибуты рамки (рис. 7.8). Несмотря на то что для определения таблицы можно использовать CSS, остаются в силе все ограничения, существующие в браузерах по отношению к таблицам. В Netscape 4 нельзя определять ширину, высоту и рамку таблицы с помощью CSS. Однако можно менять фон, а также применять к содержимому ячеек другие CSSсвойства. Для этого нужно определить тэги <table>, <tr>, <td>.

Рис. 7.8. Таблицей управляют с помощью CSS, работать с которым проще, чем с громоздкими атрибутами тэгов

144 Управление рамками и полями

Обтекание текстом Когда в HTML, в самом начале его развития, была добавлена возможность располагать текст вокруг изображения (wrapping), дизайнерам это нововведение чрезвычайно понравилось. Но в CSS данное свойство усовершенствовано: текст может обтекать не только графические изображения, но и другой текст, а также таблицы (рис. 7.9). Для этого используется свойство float (листинг 7.7).

Рис. 7.9. Текст располагается вокруг картинки

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

<html> <body> <style type="text/css"> img { float: right; } </style> </head> <body> <h2>CHAPTER 7<br> A Mad Tea-Party</h2> <p class="copy">There was a table set out...</p> <img scr="alice25.gif" width="288" height="219" border="0"> <p>The table was a large one...</p> <p>'Have some wine,' the March Hare said in an encouraging tone.</p> <p>Alice looked all round the table...</p> <p>'There isn't any,' said the March Hare.</p> <p>'Then it wasn't very civil of you to offer it,' said Alice angrily.</p> <p>'It wasn't very civil or you to sit down without being invited,' said the ->March Hare.</p> </body> </html>

Обтекание текстом 145 Таблица 7.9. Возможные значения свойства float Значение

Совместимость

left

IE4, N4, CSS1

right

IE4, N4, CSS1

none

IE4, N4, CSS1

Определение обтекания в селекторе 1. float: Напишите название свойства float и поставьте двоеточие (табл. 7.9). 2. right Введите ключевое слово, определяющее, по какой стороне экрана выравнивается элемент: – right. Элемент выравнивается по правой стороне, причем остальные элементы обтекают его слева; – left. Элемент выравнивается по левой стороне, причем остальные элементы обтекают его справа; – none. По умолчанию устанавливается такое же выравнивание, как и в родительском элементе. В этом примере float применяется к картинке, это приводит к тому же результату, что и использование align в тэге <img>. Свойство float можно применять не только к тэгу <img>, но и к любому другому. Например, можно задать обтекание текста другим текстом.

146 Управление рамками и полями

Отмена обтекания текстом Иногда необходимо прервать действие свойства float (рис. 7.10). Как и атрибут clear в HTML-тэге <br>, CSS-свойство clear определяет, когда нужно отменить обтекание элемента текстом.

Запрет обтекания текстом 1. clear: Напишите название свойства clear и поставьте двоеточие (листинг 7.8).

Рис. 7.10. Текст, который был определен с помощью класса nowrap, не обтекает картинку, а начинается после нее Листинг 7.8. Текст, который был определен с помощью класса nowrap, не обтекает картинку, а начинается после нее

<html> <head> <style type="text/css"> img {float: right; } .nowrap { clear: right; } </style> </head> <body> <h2>CHAPTER 7<BR> a Mad Tea-Party</h2> <p>There was a table set out...</p> <img scr="alice25.gif" width="288" height="219" border="0"> <p>The table was a large one...</p> <p class="nowrap">'Have some wine,' the March Hare said >in an encouraging ->tone.</p> <p class="nowrap">Alice looked all round the table...</p> <p class="nowrap">'There isn't any,' said the March Hare.</p> <p class="nowrap">'Then it wasn't very civil of you to offer it,' said Alice ->angrily.</p> <p>'It wasn't very civil or you to sit down without being invited,' said the ->March Hare.</p> </body> </html>

Отображение элемента на экране 147 Таблица 7.10. Возможные значения свойства clear Значение

Совместимость

left

IE4, N4, CSS1

right

IE4, N4, CSS1

both

IE4, N4, CSS1

none

IE4, N4, CSS1

2. left Выберите сторону или стороны элемента, по отношению к которым требуется отменить обтекание. Задайте значение left, right или both (табл. 7.10). Чтобы перекрыть другие свойства clear, введите значение none. 3. <pclass="nowrap">...</p> Теперь, в каком бы тэге вы не применили этот класс, текст не будет обтекать другие тэги, независимо от того, какое свойство float было установлено. Рекомендуется определять заголовки и названия так, чтобы они не располагались вокруг других объектов.

Отображение элемента на экране С помощью свойства display можно определить, будет строка разрываться до или после элемента, как элемент расположится по отношению к другим, станет ли он частью списка (листинг 7.9. и рис. 7.11) или вообще не будет отображаться на экране.

Рис. 7.11. Чтобы было легче проследить путь королевской процессии, этапы ее передвижения записаны в виде нумерованного списка

148 Управление рамками и полями

Определение отображения на экране 1. display: В списке CSS-определений напишите название свойства display и поставьте двоеточие. 2. list-item Введите ключевое слово, определяющее вид элемента на экране (табл. 7.11):

Таблица 7.11. Возможные значения свойства display Значение

Совместимость

list-item

IE5*, N4, CSS1

Block

IE4, N4, CSS1

Inline

IE5, N4, CSS1

None

IE4, N4, CSS1

* Только в MacOS.

– list-item. На первой строке помещается маркер списка, отступ сверху и снизу. Элемент становится частью списка; – block. Тэг определяется как тэг блокуровня, устанавливается разрыв строки над и под элементом; Листинг 7.9. Свойство display можно использовать для разных целей. В этом примере с его помощью абзацы преобразуются в элементы нумерованного списка, где описываются члены процессии

<html> <head> <style type="text/css"> .list { display: list-item; } img { display: none; } </style> </head> <body> <img scr="alice29.gif" width="200" height="236" border="0" align="right"> <ol> <p class="list">First came ten soldiers carring clubs...</p> <p class="list">next the ten courtiers...</p> <p class="list">After this came the royal children...</p> <p class="list">Next came the guests...</p> <p class="list">Then followed the Knave of Hearts...</p> <p class="list">last of all this grand prossesion, came THE KING AND QUEEN OF ->HEARTS.</p> </ol> </body> </html>

Отображение элемента на экране 149 Предварительная загрузка изображений Если на вашем сайте есть графические изображения больших размеров, для ускорения их загрузки можно использовать свойство display. Допустим, на первой странице сайта размещено мало изображений, но их много на второй. В этом случае можно включить в первую страницу тэг <img> из второй и установить display: none. Изображения загрузятся на первой странице, но они не будут отображаться на экране. При появлении в браузере второй страницы эти изображения загрузятся из кэш-памяти, что гораздо быстрее. Однако не переусердствуйте с размещением на первой странице дополнительных изображений, иначе может случиться так, что на второй странице появятся лишь частично загруженные картинки. Используйте только те изображения, которые должны появиться на странице в первую очередь. Тогда создастся впечатление, что страница загружается быстро, хотя на ней много графических объектов.

– inline. Тэг определяется как inlineтэг, разрыв строки исчезает; – none. Элемент не отображается в браузерах, поддерживающих CSS. 3. <ol><pclass="list">...</p> Добавьте класс в тэг. В этом примере в тэг <p>, который находится внутри тэга <ol>, введен класс list. Таким образом, каждый абзац становится элементом нумерованного списка. Браузер, поддерживающий CSS, проигнорирует все элементы, которым присвоено значение none. Однако задавать это значение нужно осторожно. Несмотря на то что none не является наследуемым значением, при его использовании с экрана исчезает не только сам элемент, но и его потомки. Не следует путать свойство display и visibility (см. раздел «Определение видимости элемента» в главе 9). Свойство visibility оставляет пространство для элемента, а display: none; полностью убирает элемент с экрана, хотя он продолжает загружаться. С помощью JavaScript можно создавать простые выпадающие меню, изменяя значение свойства display. Если вы зададите значение inline, меню появится, а если none – исчезнет (см. главу 24).

управление позиционированием

Многие пользователи жалуются на слишком низкую скорость соединений с Internet. Некоторые говорят в шутку, что WWW означает World Wide Wait – всемирное ожидание. Одной из причин невысокой скорости загрузки является использование графики для создания текста, который располагался бы на странице в запланированных дизайнером местах. На скорость загрузки страницы влияет также применение таблиц для распределения элементов в окне браузера или для размещения изображений, состоящих из нескольких отдельных картинок. Для загрузки таблицы требуется больше времени, чем для загрузки текста, при форматировании которого не использовались таблицы. Чем больше таблиц, тем медленнее загружается страница. CSS позволяет более точно позиционировать элемент и, следовательно, значительно ускорить загрузку страницы. Вы уже знаете, как с помощью CSS создавать поля и рамки (глава 7). Кроме того, посредством CSS можно размещать элементы в любом выбранном вами месте страницы (абсолютное положение) или задавать местоположение относительно других элементов на экране (относительное положение).

Что такое окно 151 В этой главе рассказывается, как с помощью CSS позиционировать элементы на странице и располагать их друг над другом.

вид той или иной части окна. Чтобы понять, как осуществляется позиционирование, необходимо усвоить следующее: как и у всех элементов, содержащихся в окне, у окна браузера есть ширина, высота, а также верхняя и нижняя части, правая и левая стороны (см. раздел «Что такое элемент» в главе 7). Окно можно рассматривать как главный элемент Web-дизайна, являющийся родительским по отношению ко всем остальным элементам; у окна браузера есть два значения ширины и два значения высоты. Ширина и высота окна браузера включает в себя все элементы управления. Ширина и высота действительной, или клиентской, части окна (live browser window) охватывает

Что такое окно Web-страницы отображаются в окне браузера (browser window). Можно открывать несколько окон, менять их размер, перемещать по экрану и даже преобразовывать в более маленькие окна, называемые фреймами (frames). Все, что вы хотите продемонстрировать посетителю вашей страницы, так или иначе отображается в окне браузера (рис. 8.1). В главе 12 подробно рассказывается о том, из чего состоит окно и окружающее его пространство, от каких значений зависит

Рис. 8.1. Окно браузера. Координаты верхнего левого угла элемента на сером фоне составляют (190px,130px)

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

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

Тип позиционирования Объявляя атрибуты в селекторе HTMLтэга в CSS, вы определяете содержимое тэга как уникальный объект в окне (см. раздел «Что такое элемент» в главе 7), которым затем можно управлять с помощью CSS-позиционирования. Положение элемента может быть статическим, относительным, абсолютным или фиксированным, но в большинстве браузеров доступны лишь три первых варианта (листинг 8.1). Браузер размещает элемент в окне, используя определенный тип его положения (рис. 8.2).

Рис. 8.2. Позиционирование элементов в окне. Заметьте, что элементы, находящиеся внутри элемента с относительным положением, размещены относительно родительского элемента. Таким образом достигается эффект «лестницы»

Тип позиционирования 153 Листинг 8.1. В настоящее время существует три способа расположения элемента в окне: статический, относительный и абсолютный. В некоторых браузерах можно установить фиксированное положение элемента

<html> <head> <style type="text/css"> .stat {position: static; font: bold 28pt ->courier; color:#cccccc;} .abs {position: absolute; top: 25px; ->left: 375px; width: 100px; font: bold ->35pt helvetica; color: #666666;} .rel {position: relative; top: 70px; ->left: 25px; font: bold 12 pt times; ->color: #000000;} </style> </head> <body> <div class="stat">'Oh my years and ->whiskers, how late it's getting!' -></div> <div class="abs">'Oh my years and ->whiskers, how late it's getting!' -></div> <div class="srel">'Oh my years and -><span class="rel">whis<span ->class="rel>kers</span></span>, ->how late it's getting!'</div> </body> </html>

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

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

Абсолютное позиционирование С помощью абсолютного позиционирования создается независимый, существующий автономно от остальных частей документа элемент, в который можно помещать любое HTML-содержимое. Определенный таким образом элемент находится в точно заданной точке окна, то есть указываются его координаты по осям X и Y. Началом координат считается левый верхний угол окна или расположенного в нем элемента (координаты этой точки 0,0). При движении элемента вправо увеличивается значение x, а при движении вниз – значение y.

154 Управление позиционированием

Фиксированное позиционирование В настоящее время фиксированное позиционирование не поддерживается многими браузерами, например Netscape 4/6 и Internet Explorer для Windows. Internet Explorer 5 для Mac поддерживает данный вид позиционирования, но и в этом браузере возникают ошибки. Результат применения фиксированного позиционирования практически совпадает с результатом применения абсолютного. Элемент находится в определенном положении, он не зависит от других элементов страницы. Разница же заключается в том, что при прокрутке страницы фиксированные элементы остаются на своем месте.

Определение положения элемента 1. position: Напишите в HTML-тэге название свойства position в определении правила или в атрибуте style. 2. relative; Укажите значение свойства (табл. 8.1): – static. Статическое позиционирование; положение элемента нельзя изменить с помощью атрибутов top и left или с помощью JavaScript; – relative. Элемент располагается относительно родительского, положение элемента по отношению к обычному можно изменять посредством атрибутов top и left или с помощью JavaScript;

Таблица 8.1. Возможные значения свойства position Значение

Совместимость

static

IE4, N4, CSS2

relative

IE4, N4, CSS2

absolute

IE4, N4, CSS2

fixed

IE5*, CSS2

* Недоступно в Windows.

Фиксированное позиционирование Фиксированное позиционирование было введено в CSS второго уровня. Это весьма перспективное направление, особенно в области разработки фиксированных меню, всегда доступных посетителю страницы. Однако при использовании данного вида позиционирования возникает несколько проблем:

Netscape и Internet Explorer для Windows не поддерживают значение fixed. Несмотря на то что нельзя определить два типа позиционирования для одного элемента, возможно создание двух разных таблиц стилей для каждого браузера (см. раздел «CSS и операционная система» в главе 22); Internet Explorer 5 для Mac поддерживает значение fixed, однако и здесь возникает ошибка. При прокрутке страницы ссылки в фиксированном элементе не стоят на месте, то есть графика и текст ссылки остаются неподвижными, а невидимая область, которая отвечает за работу ссылки, перемещается.

Тип позиционирования 155 – absolute. Положение элемента в его родительском не зависит от других элементов. Если элемент не вложен в другой, то его положение определяется по отношению к телу документа; – fixed. Положение элемента в его родительском не зависит от других элементов, как и в предыдущем случае. Но в отличие от элемента с абсолютным положением, фиксированный элемент остается на своем месте при прокрутке страницы. (Помните, что значение fixed не поддерживается многими браузерами). 3. top:70px; После того как тип позиционирования установлен, можно задать действительное положение элемента (см. разделы «Определение положения по отношению к левому верхнему углу» и «Определение положения по отношению к правому нижнему углу»). Элементы можно располагать в порядке стека (stacking order – см. раздел «Элементы в порядке стека (3D-позиционирование)»), определять их видимость (visibility – см. раздел «Определение видимости элемента» в главе 9), отсекать конкретные части (clipping – см. «Определение видимой части элемента» в главе 9). В Internet Explorer нельзя управлять положением элемента, если он находится в тэге <body>. Если вы хотите определить положение тела Web-страницы, заключите ее содержимое в тэг <div> и применяйте позиционирование к нему (см. раздел «Относительные элементы, встроенные в абсолютные»).

Если элемент уже размещен в окне, его можно передвигать, скрывать или отображать на экране с помощью JavaScript или других языков (об этом подробно рассказывается в части 2). Netscape Mac/Windows и Internet Explorer для Windows не поддерживают значение fixed. Более того, в Internet Explorer для Mac возникает грубая ошибка, из-за которой в окне нельзя создать меню (см. раздел «Фиксированное позиционирование»). Если браузер не распознает атрибут fixed, то по умолчанию выбирается статический тип позиционирования. Если вы имеете представление о слоях Netscape (см. раздел «Слои Netscape» в главе 16), то вам должно быть знакомо и позиционирование. Однако в общем DHTML-браузере для создания слоев используется CSS, а не тэг <layer> (см. раздел «Создание объекта» в главе 11).

156 Управление позиционированием

Определение положения по отношению к левому верхнему углу Наряду с полями, которые задаются как часть свойств элемента (см. раздел «Поле элемента» в главе 7), позиционированному элементу можно присваивать значения top и left (листинг 8.2). Они используются для указания положения элемента по отношению к левой и верхней сторонам родительского элемента или по отношению к обычному положению (рис. 8.3–8.5).

Определение верхнего и левого поля 1. position:absolute; Чтобы установить положение элемента с помощью свойств top и left, нужно включить в то же правило свойство position. 2. left: В списке CSS-определений или в атрибуте style в HTML-тэге напишите название свойства left и поставьте двоеточие. 3. 9em; Укажите расстояние, на которое вы хотите переместить элемент вправо, используя следующие значения (табл. 8.2): – длину. Определяется расстояние от левого края элемента до левого края окна или родительского элемента; – проценты, например 55%. Перемещение задается относительно ширины родительского элемента; – auto. Расстояние вычисляется браузером, если элемент является абсолютным. Иначе left приравнивается к нулю.

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

<html> <head> <style type="text/css"> #object1 { position: absolute; top: 125px; left: 12em; border: silver solid 2px; } .changeplace { position: relative; top: 1cm; left: 1cm; background-color: #ffcccc; } </style> </head> <body> <div id="object1"> <img scr="alice27.gif" width="250" ->height="225" border="0" ->align="left"> <p>'I want a<span class= ->"changeplace"> clean cup</span>,' ->interrupted the Hatter: 'let's all ->move one place on.'</p> <p>He moved on as he spoke, and the ->Dormouse followed him...</p> <p>Alice didn't wish to offend the ->Dormouse again...</p> <p>'You can draw water out of a ->water-well...</p> </div> </body> </html> Таблица 8.2. Возможные значения свойств top и left Значение

Совместимость

IE4, N4, CSS2

IE4, N4, CSS2

auto

IE4, N4, CSS2

Определение положения по отношению к левому верхнему углу 157 4. top: В списке CSS-определений или в атрибуте style в HTML-тэге напишите название свойства top. 5. 125px; Укажите расстояние, на которое вы хотите переместить элемент вниз, используя следующие значения (табл. 8.2):

Рис. 8.3. Положение элемента определяется как абсолютное по отношению к левому верхнему углу окна, а фраза «clean cup» переместилась из своего обычного положения вниз и вправо

– длину. Определяется расстояние от верхнего края элемента до верхнего края окна или родительского элемента; – проценты, например 55%. Перемещение задается относительно ширины окна или родительского элемента; – auto. Если элемент является абсолютным, то значение перемещения вычисляется браузером. Иначе top приравнивается к нулю.

Рис. 8.4. На этом рисунке показано изначальное положение элементов

158 Управление позиционированием Необязательно включать в правило сразу оба определения left и top. Чтобы перемещать элемент вверх или вправо, можно использовать отрицательные значения. Если элемент имеет относительное положение, то при применении свойств left и top его поля не меняются. Следовательно, определение левых и верхних полей может привести к тому, что содержимое элемента выйдет за рамки своего обычного положения и закроет какой-либо другой элемент. Несмотря на то что свойства left и top не наследуются, вложенные элементы переместятся вместе с родительским.

Рис. 8.5. Положение элемента определяется как абсолютное по отношению к правому нижнему углу окна, а фраза «clean cup» переместилась из своего обычного положения вверх и влево

Рис. 8.6. На этом рисунке показано изначальное положение элементов

Определение положения по отношению к правому нижнему углу 159 Листинг 8.3. После того как выбран тип позиционирования, можно определить расстояние от начала координат до правой и нижней стороны элемента. Началом координат для элемента в этом случае считается правый нижний угол окна, правый нижний угол его родительского элемента или его собственный правый нижний угол

<html> <head> <style type="text/css"> #object1 { position: absolute; bottom: 125px; right: 12em; border: silver solid 2px; } .changeplace { position: relative; bottom: 1cm; right: 1cm; background-color: #ffcccc; } </style> </head> <body> <div id="object1"> <img scr="alice27.gif" width="250" ->height="225" border="0" ->align="left"> <p>'I want a<span ->class="changeplace"> clean ->cup</span>,' interrupted the ->Hatter: 'let's all move ->one place on.'</p> <p>He moved on as he spoke, and the ->Dormouse followed him...</p> <p>Alice didn't wish to offend the ->Dormouse again...</p> <p>'You can draw water out of a ->water-well...</p> </div> </body> </html>

Определение положения по отношению к правому нижнему углу Наряду с позиционированием верхней и левой стороны элемента можно позиционировать правую и нижнюю стороны (листинг 8.3). CSS второго уровня позволяет размещать элемент относительно его нижнего и правого края или родительского элемента (рис. 8.5 и 8.6). В настоящее время эти атрибуты доступны лишь в Netscape 6 и Internet Explorer 5/6.

Определение нижнего и правого поля 1. position:absolute; Чтобы определить положение элемента с помощью свойств bottom и right, нужно включить в то же правило свойство position. 2. right: Введите название свойства right и поставьте двоеточие. 3. 12em; Укажите расстояние, на которое вы хотите переместить элемент влево, используя следующие значения (табл. 8.3): – длину. Определяется расстояние от левого края элемента до правого края окна или родительского элемента; – проценты, например 55%. Перемещение задается относительно ширины родительского элемента; – auto. Значение перемещения вычисляется браузером, если элемент является абсолютным. Иначе right приравнивается к нулю.

160 Управление позиционированием 4. bottom: Введите название свойства bottom и поставьте двоеточие. 5. 125px; Укажите расстояние, на которое вы хотите поднять элемент, используя следующие значения (табл. 8.3): – длину. Определяется расстояние от нижнего края элемента до нижнего края окна или родительского элемента; – проценты, например 55%. Перемещение указывается относительно ширины окна или родительского элемента; – auto. Значение перемещения вычисляется браузером, если элемент является абсолютным. Иначе bottom приравнивается к нулю. Netscape и Internet Explorer версий 4 не поддерживают свойства bottom и right. Свойства left и right можно комбинировать с bottom и top. Каков будет результат, если для одного элемента установить значения top/left и bottom/right? Это зависит от браузера. В Internet Explorer по умолчанию используются свойства top и left. Допустим, определено свойство bottom, а высота элемента больше высоты станицы. Обычно нижняя часть элемента «уходит» за край страницы, и ее можно увидеть, прокрутив страницу вниз. Но если не видна верхняя часть элемента, таким образом ее увидеть не удастся. Поэтому использовать свойство bottom нужно осторожно.

Таблица 8.3. Возможные значения свойства bottom и right Значение

Совместимость

IE5, N6, CSS2

IE5, N6, CSS2

auto

IE5, N6, CSS2

Элементы в порядке стека (3D-позиционирование) 161 Листинг 8.4. Каждый элемент расположен чуть ниже предыдущего. Свойство z-index используется для того, чтобы поместить элемент с номером 1 над элементом с номером 2 и т.д.

<html> <head> <style type="text/css"> #element1 { position: absolute; z-index: 3; top: 175px; left: 255px; } #element2 { position: absolute; z-index: 2; top: 100px; left: 170px; } #element3 { position: absolute; z-index: 1; top: 65px; left: 85px; } #element4 { position: absolute; z-index: 0; top: 5px; left: 5px; } </style> </head> <body> <span id="element1"> <img scr="alice22.gif" width="100" ->height="147"><br clear="all"> Element 1 </span> <span id="element2"> <img scr="alice32.gif" width="140" ->height="201"><br clear="all"> Element 2 </span> <span id="element3"> <img scr="alice15.gif" width="150" ->height="198"><br clear="all"> Element 3 </span>

Элементы в порядке стека (3D-позиционирование) Несмотря на то что экран представляет собой двухмерное пространство, позиционированным элементам можно задать и третью размерность, то есть расположить их по отношению друг к другу в порядке стека. Позиционируемым элементам в порядке их появления автоматически присваивается номер: 0, 1, 2, 3, ... Номер выбирается по отношению к родительскому элементу и другим его потомкам. Такая система называется z-индекс. Номер z-индекса элемента определяет его 3D-отношение к другим элементам окна. Если элементы накладываются друг на друга, то на переднем плане появляется тот, чей номер больше. Обычный порядок элементов на странице можно изменить (листинг 8.4), определив свойство z–index (рис. 8.7 и 8.8).

Листинг 8.4 (окончание)

<span id="element4"> <img scr="alice29.gif" width="200" ->height="236"><br clear="all"> Element 4 </span> </body> </html>

162 Управление позиционированием

Определение z-индекса элемента 1. position:absolute; Чтобы установить уровень элемента в окне, нужно задать значение свойства position (см. раздел «Тип позиционирования»). 2. z-index: В том же списке определений напишите название свойства z-index и поставьте двоеточие. 3. 3; Укажите целое число. На этом шаге определяется z-индекс элемента по отношению к его соседям. 0 означает, что элемент будет находиться на том же уровне (табл. 8.4). Если вы хотите, чтобы z-индекс был выведен браузером, задайте значение auto. 4. top:5px;left:5px; Установите положение элемента.

Рис. 8.7. Результат использования z-индекса. Несмотря на то что элемент 1 должен находиться внизу, он появляется на переднем плане, так как его z-индекс равен 3

Использование отрицательного z-индекса приводит к тому, что элемент помещается на заданное количество уровней вниз от родительского элемента, а не вверх. С помощью JavaScript можно изменить порядок элементов в стеке (см. раздел «Перемещение объектов в 3D» в главе 13).

Рис. 8.8. Та же самая страница, что и на рис. 8.7, но здесь не применялось свойство z-index. Элементы появляются в обычном порядке стека. Элемент 1 теперь находится внизу, так как его обычный z-индекс равен 0 Таблица 8.4. Возможные значения свойства z-index Значение

Совместимость

IE4, N4, CSS2

auto

IE4, N4, CSS2

Абсолютные элементы, встроенные в относительные 163

Абсолютные элементы, встроенные в относительные Теперь вы знаете, как определять точное (абсолютное) положение элемента в окне. Элемент с абсолютным положением можно встроить в относительный элемент (листинг 8.5). При этом началом координат для абсолютного элемента считается левый верхний угол относительного элемента, а не окна (рис. 8.9). Рис. 8.9. Фон является абсолютным элементом, который встроен в относительный. Поэтому он не появляется в верхней части страницы, а сдвигается вниз на 75 пикселов вместе с родительским (относительным) элементом Листинг 8.5. В этом примере создаются два класса, один для относительного позиционирования, другой – для абсолютного. Тэг <div>, используемый относительным классом, встроен в абсолютный класс. Таким образом, абсолютный элемент является фоном для относительного и перемещается вместе с ним. Чтобы текст появлялся над абсолютным элементом, в тэге <p> определяется z-индекс

<html> <head> <style type="text/css"> .relElement { position: relative; top: 75px; } .absElement { position: absolute; z-index: 0; top: 0px; left: 0px; font-size: 36pt; color: #cccccc; } p{ position: relative; z-index: 100; } </style>

Определение абсолютного элемента внутри относительного 1. .relElement{...} Создайте относительно позиционированный класс. В примере элементы этого класса находятся на расстоянии 75px от верхней стороны окна. 2. .absElement{...} Создайте абсолютно позиционированный класс. Элементы данного класса появятся в левом верхнем углу родительского элемента, текст будет большого размера и серого цвета. 3. p{...} В примере относительный элемент появится над абсолютным, причем его z-индекс настолько велик, что этот элемент будет располагаться и над всеми остальными элементами на странице. 4. <divclass="relElement"> <divclass="absElement">...</div></div> Теперь в теле документа поместите абсолютные элементы в тэг с помощью класса relElement. Название книги имеет абсолютное положение по отношению к своему родительскому элементу, а не к окну.

164 Управление позиционированием Если вы хотите определить положение одного или нескольких абсолютных элементов по отношению друг к другу, а не к окну или другим элементам, то лучше всего использовать описанный выше метод комбинирования абсолютных и относительных элементов. Например, он очень удобен для создания тени (см. раздел «Простая тень» в главе 26).

Относительные элементы, встроенные в абсолютные Несомненное достоинство каскадных таблиц стилей – возможность точного позиционирования элемента в окне. Когда элемент с абсолютным положением встраивается в относительный элемент, началом координат считается левый верхний угол родительского элемента. Аналогично, когда относительный элемент встраивается в абсолютный (листинг 8.6), первый перемещается вместе с ним (рис. 8.10).

Листинг 8.5 (окончание)

</head> <body> <div class="relElement"> <div class="absElement"> Alice in Wonderland <br><img scr="alice03.gif" ->width="300" height="284" ->border="0"> </div> <p>Alice opened the door and found ->that it led into a small ->passage...</p> <p>There seemed to be no use in ->waiting by the little door...</p> <p>It was all very well to say ->'Drink me,'...</p> <p>However, this bottle was -><i>not</i> marked 'poison,'...</p> </div> </body> </html>

Определение относительного элемента внутри абсолютного 1. .absElement{...} Создайте абсолютно позиционированный класс. В данном примере элементы этого класса находятся на расстоянии 100px от левой стороны окна и окружены тонкой непрерывной границей слева. 2. .relElement{...} Создайте относительно позиционированный класс. Элементы этого класса появятся справа, текст будет выделен полужирным, заполнение пробелами – 1em, ширина элемента равна 215px.

Рис. 8.10. Относительный элемент имеет абсолютное положение в окне. Этот способ позволяет точно позиционировать элемент

Относительные элементы, встроенные в абсолютные 165 Листинг 8.6. В этом примере создаются два класса, один для абсолютного позиционирования, другой – для относительного. Относительный класс затем применяется в тэге <p>, который встроен в тэг <div>, использующий абсолютный класс. Таким образом, все содержимое страницы передвигается вправо. Заметьте, что строка из тэгов <br> находится вне абсолютного элемента. Это позволяет избежать ошибки в Internet Explorer, из-за которой не появляется полоса прокрутки

<html> <head> <style type="text/css"> .absElement { position: absolute; left: 100px; border-style: none none none solid; border-width: 0px 0px 0px 1px; border-color: #000000; padding: 10px; } .relElement { position: relative; float: right; font-weight: bold; padding: 1em; width: 275px; } </style> </head> <body> <div class="absElement"> <p class="relElement"> <img scr="alice37.gif" width="100" height="136" ->align="right">One of the jurors ->had a pencil that squeaked...</p> <p>The King and Queen of Hearts were seated on their throne when they ->arrived...</p> </div> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> -><br><br><br><br><br><br><br><br><br>><br><br><br><br><br><br><br><br><br><br><br> -><br><br><br><br><br><br><br><br><br><br><br><br><br> </body> </html>

166 Управление позиционированием 3. <divclass="absElement"> <divclass="relElement">...</div></div> Теперь в теле документа поместите тэг <div> с абсолютным классом. Затем внутри тэга <div> введите относительный класс. Если большинство элементов являются абсолютно позиционированными, то при первой загрузке страницы Internet Explorer не зарегистрирует высоту элемента. В результате, даже если элемент не поместится на странице, полоса прокрутки не появится и посетитель будет вынужден использовать стрелки на клавиатуре для просмотра страницы. Полоса прокрутки отобразится, если пользователь изменит размер страницы. Чтобы полоса наверняка появилась, поместите тэги <br> в конце документа.

управление видимостью элемента

Динамический HTML позволяет отображать и скрывать элементы или их части, а CSS – устанавливать их видимость (visibility). Но сначала нужно научится менять видимость элемента с помощью JavaScript (см. главу 13), иначе управление видимостью не принесет ощутимого результата.

Определение видимости элемента Рис. 9.1. В этой версии свойство visibility не определяется. Это значит, что по умолчанию устанавливается значение visible

Рис. 9.2. На этом рисунке представлен результат применения кода. Свойству visibility присвоено значение hidden, а на месте элемента появляется пустое пространство

C помощью свойства visibility определяется видимость элемента при первом просмотре страницы. Если этому свойству присвоено значение hidden, то элемент не виден на экране, но занимает в документе определенное место. На экране область, занимаемая таким элементом, выглядит пустой (рис. 9.1 и 9.2).

168 Управление видимостью элемента

Установка видимости элемента 1. position:relative; Установите абсолютное или относительное положение элемента с помощью свойства position (листинг 9.1). 2. visibility: В CSS-определении элемента укажите название свойства visibility и поставьте двоеточие (табл. 9.1). 3. hidden Введите одно из ключевых слов, задающих видимость элемента на экране: – hidden. Элемент становится невидимым, хотя первоначально отображался; – visible. Элемент виден на экране; – inherit. Элемент наследует видимость своего родительского элемента. На первый взгляд кажется, что свойства visibility и display похожи, но на самом деле они кардинально отличаются друг от друга. Если свойству display присвоена величина none, то элемент удаляется из документа и пространство для него не выделяется. В CSS2 для свойства visibility определяется только три значения. Но в Netscape 4 добавлены еще два: show и hide. Netscape 4 распознает значения CSS2, но переводит их на свой язык, а это может создать проблемы, если вы хотите выяснить состояние видимости объекта с помощью JavaScript (см. раздел «Состояние видимости объекта» в главе 12). Кроме того, эти значения не поддерживаются Netscape 6. Для определения видимости отдельного элемента, если ее значение visible, рекомендуется указывать элемент с помощью его ID.

Листинг 9.1. Для класса hide определяется свойство visibility, элемент становится невидимым

<html> <head> <style type="text/css"> .hide { position: relative; visibility: hidden; } </style> </head> <body> <span class="hide"> <img scr="alice24.gif" width="350" ->height="238" align="right"> </span> <p>'I thought it would,' said the ->Cat, and vanished again.</p> <p>Alice waited a little, half ->expecting to see it again...</p> </body> </html>

Таблица 9.1. Возможные значения свойства visibility Значение

Совместимость

hide

N4*

hidden

IE4, N4, CSS2

show

N4*

visible

IE4, N4, CSS2

inherit

IE4, N4, CSS2

* Только N4, в N6 недоступно.

Определение видимой части элемента 169

Определение видимой части элемента Определяя ширину и высоту элемента, вы управляете его размерами (см. главу 7), а обрезая элемент (clipping), определяете, какая его часть будет видна на экране. Оставшаяся часть не удаляется, она просто становится невидимой и занимает на экране определенное место, которое отображается как пустое пространство (рис. 9.3).

Определение видимой части элемента Рис. 9.3. Из всего изображения мы видим только голову Чеширского кота. Король, Королева и Джек невидимы

Листинг 9.2. Видимая область определяется в классе clipInHalf, который затем применяется к элементу в HTML-коде

<html> <head> <style type="text/css"> .clipInHalf { position: absolute; clip: rect(15 350 195 50); top: 0px; left: 0px; } </style> </head> <body> <div class="clipInHalf"> <img scr="alice31.gif" width="379" ->height="480" align="left"> </div> </body> </html>

1. position:absolute; Установите абсолютное или относительное положение элемента (листинг 9.2). 2. clip: Введите название свойства clip и поставьте двоеточие. 3. rect(15 35019550) Чтобы определить форму видимой области, напишите rect (прямоугольник), откройте круглые скобки, укажите четыре значения, разделенных пробелами, и закройте скобки. Числа задают длину верхней, правой, нижней и левой сторон видимой области. Эти значения представляют собой расстояние от начала элемента (левого верхнего угла), а не от какой-либо стороны (рис. 9.4). Каждое значение может быть числом, которое переводится в пикселы, или auto, тогда размер видимой области определяется браузером (обычно 100%).

170 Управление видимостью элемента В табл. 9.2 перечислены эти значения и браузеры, которые их поддерживают. Границы и заполнение пробелами «вырезаются» вместе с элементом. В Netscape при определении видимой области возникают ошибки сразу в нескольких тэгах, включая и тэг <img>. Поэтому в таких случаях лучше всего использовать тэги <div> и <span>.

Таблица 9.2. Возможные значения свойства clip Значение

Совместимость

rect(<topLength>, <rightLengt>, <bottomLength>, <leftLength>)

IE4, N4, CSS2

auto

IE4, N4, CSS2

В настоящее время видимые области элемента могут иметь только форму прямоугольника, но в дальнейшем в CSS будут доступны и другие формы.

Рис. 9.4. Видимая область определяется с помощью четырех значений, которые указывают расстояние до верхней, правой, нижней и левой сторон элемента

Управление невидимой частью 171

Управление невидимой частью Иногда не все содержимое элемента отображается на экране. Это происходит в том случае, когда выделяется видимая область элемента, у которой ширина и/или высота меньше, чем необходимая для элемента область. С помощью свойства overflow можно определить, каким образом будет работать браузер с этой не поместившейся на экране частью элемента (рис. 9.5). Рис. 9.5. Чтобы увидеть не поместившееся на экране изображение, можно использовать полосу прокрутки

Определение свойства overflow

Листинг 9.3. В классе illustration определяется ширина и высота, равные 200px, свойству overflow (часть элемента, которая не будет видна в этой области) присваивается значение auto. Полоса прокрутки будет располагаться там, где это необходимо для просмотра не поместившейся на экране части элемента. Класс затем применяется к элементу в HTML-коде

1. width:200px;height:200px; Укажите ширину и/или высоту области, ограничивающей элемент (листинг 9.3). Также можно установить видимую область элемента с помощью значений, указанных в табл. 9.3 (см. раздел «Определение видимости элемента»). 2. overflow: Введите название свойства overflow и поставьте двоеточие. 3. auto; Укажите одно из ключевых слов, задающих работу браузера с невидимой частью (табл. 9.3):

<html> <head> <style type="text/css"> .illustration { width: 200px; height: 200px; overflow: auto; float: right; margin: 5px; } </style> </head> <body> <div class="illustration"> <img> scr="alice35.gif" width="401" ->height="480"> </div>

– scroll. Рядом с видимой областью элемента помещается полоса прокрутки. Таким образом посетитель Таблица 9.3. Возможные значения свойства overflow Значение

Совместимость

scroll

IE4, N6, CSS2

hidden

IE4, N6, CSS2

visible

IE4, N6, CSS2

inherit

IE4, N6, CSS2

172 Управление видимостью элемента сможет увидеть не поместившуюся на экране часть элемента; – hidden. Оставшаяся часть элемента скрывается, а полоса прокрутки не появляется; – visible. Оставшаяся часть элемента отображается на экране. Это ключевое слово сообщает браузеру, что нужно проигнорировать определенную ранее видимую область; – auto. Это значение позволяет браузеру понять, как обращаться с оставшейся частью элемента. Если свойство overflow не определено, многие браузеры проигнорируют свойство, установленное для элемента height. Свойство overflow также используется для описания того, что делать с видимой частью элемента, когда она становится невидимой.

Листинг 9.3 (окончание)

<h3>CHAPTER 9<br>The Mock Turtle's ->Story</h3> <p>'You can't think how glad...</p> <p>Alice was very glad to find her... -></p> <p>'When <i>I'm</i> a Duchess,' she ->said to herself...</p> <p>She quite forgotten the Duchess by ->this time...</p> </body> </html>

○ ○ ○ ○ ○ ○

○

Динамический HTML

○

Часть II ГЛАВА 10 ◆ ГЛАВА 11 ◆ ГЛАВА 12 ◆ ГЛАВА 13 ◆ ГЛАВА 14 ◆ ГЛАВА 15 ◆ ГЛАВА 16 ◆ ГЛАВА 17 ◆

Назначение DHTML .................................................. 174 Объек тная мо дель документа ................................. 182 Объектная модель Среда, в которой вы работаете ............................... 207 Основы динамических технологий ......................... 236 Развитые динамические технологии ....................... 250 Динамические технологии CSS .............................. 275 Слои Netscape ......................................................... 283 Internet Explorer для Windows ................................. 297

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

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

Каким бы мощным инструментом ни являлись каскадные таблицы стилей, они по сути своей не динамичны. CSS позволяют определять, как будет выглядеть документ при первой его загрузке, но не более. Свойства Web-страниц, созданных с помощью CSS, можно менять динамически посредством языка JavaScript. Динамические возможности Netscape и Internet Explorer различны, что приводит к взаимной несовместимости браузеров. Однако у них все же есть общие функции, позволяющие использовать те преимущества, которые дает DHTML. В этой главе рассказывается о назначении и составляющих DHTML.

Динамический HTML На самом деле языка DHTML нет, по крайней мере его существование не похоже на существование HTML и JavaScript, которые представляют собой определенные технологии для Internet. Динамический HTML – это коммерческий термин, придуманный Netscape и Microsoft для описания ряда технологий, которые были введены в четвертой версии Web-браузеров и предназначались для расширения их динамических возможностей.

Особенности DHTML 175

Рис. 10.1. Положения Netscape

Эти технологии были созданы или добавлены для того, чтобы обойти те ограничения, которые, как полагали, существовали при разработке Web-страниц при помощи HTML. Internet хорошо взаимодействовал как с текстом, так и с графикой, но люди, привыкшие к мультимедиа, ждали большего. Созданная на основе DHTML страница может изменяться, не обращаясь к серверу за дополнительными данными. Программисты называют такой код клиентским, или кодом на стороне клиента (client-side code).

Особенности DHTML

Рис. 10.2. Положения Microsoft

Рис. 10.3. На пересечении версий Netscape и Microsoft схематически представлен общий DHTML, включающий CSS, JavaScript и DOM

К сожалению, представления Microsoft (рис. 10.1) и Netscape (рис. 10.2) о технологиях DHTML различны. Однако стандарты названных компаний имеют общие черты (рис. 10.3), именно они и обсуждаются в этой книге. Почему? Потому что Web основывается на простом соображении: вид Web-документов не должен зависеть от используемого программного обеспечения. Чтобы идти в ногу со временем, в новые браузеры приходилось включать технологии, которые не поддерживались официальными (старыми) версиями. Однако при работе с этими технологиями необходимо помнить один важный принцип: каждый пользователь должен иметь доступ к информации независимо от того, какой двоичный код применяется в его программном обеспечении.

176 Назначение DHTML

DHTML в Netscape Стараясь сделать Web-страницы более динамическими, Netscape разработала несколько новых технологий. К сожалению, они никогда не станут стандартами, так как практически не отличаются от CSS, которые одобрены W3C. В качестве альтернативы CSS в Netscape были введены таблицы стилей JavaScript (JSS). Как и в CSS, с помощью JSS можно определять функционирование HTML-тэга, но в JSS применяется синтаксис JavaScript. Netscape 4 – единственный браузер, который совместим с JSS. Эта устаревшая технология не поддерживается последней версией Netscape (N6), поэтому я не рекомендую использовать JSS. Netscape также ввела слои (layers), которые являются прототипом CSS-позиционирования. С помощью слоев, как и с помощью CSS-позиционирования, можно управлять положением и видимостью элементов на экране. Но, как и в случае с JSS, они поддерживаются только в Netscape 4, а в Netscape 6 вместо них уже используется CSS-позиционирование, поэтому не рекомендуется включать в Web-страницы слои Netscape.

DHTML в Microsoft Многое в версии Microsoft, например технология ActiveX, основано на запатентованном этой корпорацией программном обеспечении. ActiveX принадлежит Microsoft, и маловероятно, что она войдет в область пересечения, показанную на рис. 10.3. Я не советую использовать эту технологию. С помощью визуальных фильтров к тексту и графике документа можно создавать различные эффекты. Если вы когда-либо имели дело с фильтрами Photoshop, принцип работы визуальных фильтров будет вам понятен. Однако эти фильтры не являются стандартными, многие браузеры их не

поддерживают, в том числе и Internet Explorer, поэтому их также не стоит использовать.

Общий DHTML Что же представляет собой DHTML, поддерживаемый и Netscape, и Internet Explorer? К счастью, DHTML включает в себя гораздо больше возможностей, чем было описано в предыдущем разделе. В настоящее время многие браузеры позволяют работать со следующими технологиями: каскадные таблицы стилей (CSS). С помощью CSS определяются свойства элемента на странице. Более старые версии браузеров (Netscape 4 и Internet Explorer 4) поддерживают CSS первого уровня и CSS-позиционирование, браузеры последнего поколения (Netscape 6 и Internet Explorer 6) – CSS второго уровня; JavaScript. С помощью JavaScript создаются простые программные коды, которые управляют функционированием объектов Web-страницы. В Netscape и Internet Explorer не всегда применяются одинаковые программные коды JavaScript, однако они имеют много общего, что позволяет использовать их, несмотря на несовместимость этих браузеров;

объектная модель документа (DOM). Во всех браузерах, поддерживающих DHTML, есть какая-либо версия DOM, с помощью которой можно получить доступ к любому объекту в окне браузера. Однако W3C до сих пор не стандартизировал DOM. Чтобы страницы, созданные на основе DHTML, правильно отображались во всех браузерах, DHTML должен работать с DOM, поддерживаемой Netscape 4 и Internet Explorer 4.

Причины использования DHTML 177

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

Преимущества DHTML Конечно же, у DHTML есть множество достоинств, иначе никто бы не пользовался им. Но тем не менее потребовалось несколько лет, чтобы осознать все плюсы применения этой технологии. Ниже перечислены некоторые из преимуществ DHTML: DHTML поддерживает большинство браузеров – Netscape 4/6 и Internet Explorer 4/5/6, которые используются основной частью посетителей. Такие браузеры, как Opera и iCab, частично поддерживают DHTML; небольшой размер файлов. Как и HTML, DHTML создается с помощью текстовых файлов, размеры которых меньше, чем у графических. Текстовые файлы загружаются быстрее, чем Flash и Java; не требуется модулей расширения (plugin). Если браузер поддерживает HTML, CSS, JavaScript и DOM, то он поддерживает и DHTML; DHTML просто изучить. Если вы знаете HTML и JavaScript, вы легко освоите и DHTML; быстрота разработки. Многое из того, что Web-дизайнеры создают с помощью графики и JavaScript, можно гораздо быстрее сделать, используя DHTML;

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

отсутствие Java-программирования. Хотя DHTML выполняет в основном те же функции, что и Java, для работы с ним вам не придется в полной мере изучать этот язык (однако знание основ JavaScript все же потребуется).

Недостатки DHTML Но не все так просто. Чтобы использовать DHTML, нужно знать как его сильные, так и слабые стороны :

несовместимость браузера и операционной системы. Страницы, созданные при помощи CSS, JavaScript и DOM, выглядят по-разному в разных браузерах, но иногда и в одинаковых, работающих в разных операционных системах. В этой книге представлены различные решения подобных вопросов, однако некоторых проблем все-таки не избежать (см. раздел «Различия между браузерами» в главе 28);

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

ошибки в браузерах. Во многих браузерах возникают ошибки, приводящие к тому, что DHTML перестает работать,

178 Назначение DHTML но затем его работа внезапно возобновляется. Одним из примеров может служить ошибка, возникающая в Netscape и относящаяся к изменениям размера страницы. Если вы изменяете размер окна в Netscape, а в это время на экране отображается страница, использующая CSS (см. раздел «Добавление CSS на Web-сайт» в главе 2), то при перерисовывании страницы таблица стилей не будет применяться до тех пор, пока страницу не перезагрузят (см. раздел «Исправление ошибки в Netscape CSS» в главе 22). Далеко не все ошибки можно исправить или обойти.

Flash и DHTML Macromedia Flash и DHTML появились почти одновременно около четырех лет назад. И с тех пор при добавлении элементов интерактивности на сайт Web-дизайнерам приходится делать выбор: Macromedia Flash или DHTML. DHTML позволяет работать с интерактивностью при помощи HTML, CSS и Java-Script. Flash представляет собой некоторый объект, встраиваемый в HTML-страницу, и является отдельной Internet-технологией (см. раздел «Что такое Flash»). Далее рассказывается о достоинствах и недостатках главного конкурента DHTML – это поможет вам выбрать наиболее подходящую технологию.

Что такое Flash В 1997 году компания Macromedia приобрела программу FutureSplash Animator, добавила в нее интерактивные функции и возможность написания сценариев, переименовала программу в Flash и предложила ее как способ создания динамической графики для Internet. До этого момента графика в Web оставляла желать лучшего. Единственным способом добавить движение в окно браузера были анимационные картинки в формате GIF или PNG. Ситуация изменилась с появлением Flash, позволившего Web-дизайнерам управлять видом и функционированием элементов страницы. Важно помнить, что Flash одновременно является и программой (Flash, Macromedia Inc.), и файловым форматом (расширение .swf, произносится «свиф»). Файловый формат в настоящее время считается открытым. Корпорация Adobe Systems Inc. разработала программу для создания движущихся картинок Flash – LiveMotion.

Flash и DHTML 179

Преимущества Flash

Недостатки Flash

Flash становится все более популярным среди дизайнеров, и этому есть несколько причин:

Наряду с преимуществами, у Flash есть и недостатки:

платформенная независимость. Страницы, созданные при помощи Flash, выглядят примерно одинаково и в Internet Explorer 5 под Mac, и в Netscape 4 под Windows. В отличие от HTML, JavaScript и CSS, которые разрабатывались различными компаниями, производящими браузеры, Flash создан в одной корпорации. Таким образом, не существует взаимной несовместимости браузеров и операционных систем; повсеместность. По словам представителей компании Macromedia, у 95% пользователей Web установлена какая-либо из версий проигрывателя Flash. Возможно, эти цифры завышены, но вероятность того, что посетители вашего Webсайта смогут увидеть его Flash-содержимое, велика; привлекательность. Flash предоставляет дизайнерам огромное количество инструментов. К тому же многие из дизайнерских наград получены за разработку Web-сайтов с использованием Flash; небольшой размер. Если Flash-файлы созданы правильно, они не занимают много места и достаточно быстро загружаются.

Flash трудно изучать и создавать с его помощью Web-страницы. Программные коды HTML, CSS и JavaScript можно записывать в простом текстовом редакторе, но чтобы создавать Flash-файлы, необходимо купить и изучить Macromedia Flash или Adobe LiveMotion. Обе эти программы сложны; несовместимость. У многих пользователей имеется проигрыватель Flash, но не самой последней версии. Таким образом, не все смогут посмотреть графику Flash. Чтобы увидеть ваш сайт, пользователю придется загрузить последнюю версию Flash. То же верно и в отношении браузеров, но обычно посетители Web не любят загружать различные модули расширения; неправильное использование. С помощью Flash создают более гибкий интерфейс, чем с помощью HTML. Но стандартный Web-интерфейс на основе Flash может только запутать пользователя; долгая загрузка. Очень трудно уменьшить размер графических файлов Flash. Многие дизайнеры забывают о небольшой скорости модемной связи с Internet и о том, что загрузка больших файлов займет некоторое время.

180 Назначение DHTML

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

программное обеспечение посетителей. Поддерживают ли их браузеры DHTML, установлена ли у них текущая версия Flash plug-in, возможна ли несовместимость с plug-in? Первое правило Webдизайна: «Знай своих посетителей»;

денежные вложения. Затраты на DHTML не превосходят затрат на HTML. Flash

Рис. 10.4. Выбирая между Flash и DHTML, нужно иметь в виду следующие факторы: доступные технологии, стоимость, уровень мультимедиа, содержание сайта, необходимое для создания сайта время

Проблема выбора 181 Удобство и простота Главный специалист по Web-usability Якоб Ниелсен (Jakob Nielsen) активно выступает против Flash. В своей статье «Flash плох в 99%» (www.useit.com/ alertbox/20001029.html) он рассказывает о том, что Web-дизайнеры со стажем ломают традиции, а это может запутать пользователя. В ответ на эти заявления Macromedia создала сайт (www.macromedia.com/go/ usability), на котором находятся статьи об удобстве использования Flash.

же требует покупки программного обеспечения (Flash или LiveMotion). Цена этих программ достигает нескольких сотен долларов без учета стоимости обучения; использование на сайте эффектов мультимедиа. Для создания и представления мультимедийного содержания больше подходит Flash, а не DHTML; текстовое содержание сайта. Для представления большого количества текстов больше подходит DHTML и HTML. Несмотря на большие успехи Flash в использовании технологий печати страниц, он все же не может заменить HTML; время, отпущенное на разработку сайта. Как правило, сайт на основе DHTML создается быстрее, но это зависит от того, какую технологию вы знаете лучше; предполагаемая аудитория. Если посетители хотят увидеть фейерверки, то вам понадобится Flash. Если же требуется простой сайт, выбирайте DHTML.

объектная модель документа

Рис. 11.1. Определение объектной модели документа на сайте W3C (www.w3.org/DOM)

С помощью объектной модели документа (Document Object Model – DOM) можно динамически менять Web-страницу, используя язык написания сценариев. DOM ставит в соответствие каждому элементу, определенному с помощью атрибута ID, то есть объекту, функцию JavaScript. Таким образом, вы вправе менять любое свойство, которым можно управлять с помощью CSS. К сожалению, в браузерах Netscape 4 и Internet Explorer 4 используются разные технологии DOM. Но в последних версиях этих браузеров применяется DOM, описанная в стандартах W3C (рис. 11.1). В этой главе описывается, как работают наследованные и стандартизированные DOM, как создать модель, совместимую с любым браузером, который поддерживает DHTML. Вы также познакомитесь с обработчиками событий, которые используются для запуска события с помощью DOM.

DOM – путеводитель по Web-странице 183 Какой атрибут лучше использовать: name или id? Чтобы идентифицировать картинку и использовать ее вместе с DOM в браузере, можно применить атрибут name: <imgname="button1"scr= ->"button_off.png"> Другие элементы нужно идентифицировать с помощью атрибута id: <divid="layer1"></div> Теоретически id полезен и для идентификации картинки. Этот метод работает в Netscape, но Internet Explorer распознает только те картинки, которые определены с помощью атрибута

DOM – путеводитель по Web-странице Написав письмо, вы указываете на конверте страну, город, улицу, номер дома адресата и, конечно, его имя. Примерно так выглядел бы этот процесс в JavaScript: usa.newyork.sesameST.123.ernie. Затем сообщение отсылается получателю. Почтальон прочитает адрес и найдет на карте точное местоположение адресата. В Нью-Йорке на улице Сезам в доме № 123 живет только один Эрни, поэтому вы можете быть уверены, что письмо дойдет до адресата. Если вы хотите послать письмо кому-то, чей адрес совпадает с адресом Эрни, вам нужно лишь изменить имя: usa.newyork.sesameST.123.bert. Эти два адреса очень похожи, но все же они уникальны. DOM – это своеобразный адрес, определяющий местоположение объекта на HTMLстранице. Используя такой адрес, можно послать сообщение объекту с помощью JavaScript. Каждый элемент в окне или, по крайней мере, элемент внутри HTML-тэга легко идентифицировать с помощью атрибутов name или id, при этом элементу присваивается уникальный адрес, из простого элемента он превращается в объект. DOM описывает путь, который начинается в окне и проходит через различные объекты на Web-странице. В примере описана объектная модель документа для картинки button1: window.document.images.button1. В данном случае DOM – адрес картинки, которая находится в документе в текущем окне и называется button1. Если вы хотите получить доступ к картинке button2, воспользуйтесь DOM: window.document.images.button2.

184 Объектная модель документа Например, для того, чтобы функция JavaScript послала объекту сообщение о том, какую картинку он должен отобразить (scr) или какой CSS-стиль использовать (style), следует указать путь: window.document.images.button1.scr= ->"button_on.gif" Этот метод неплохо работает при доступе к картинкам. К сожалению, Netscape 4 и Internet Explorer 4 имеют разные карты объектов, определенных с помощью CSS. В этих браузерах существуют различные форматы создания адресов элементов на Web-странице, что можно сравнить с двумя системами улиц, которые используются для достижения одного адресата. Недавно W3C выпустил стандарт DOM, которого придерживаются как Netscape 6, так и Internet Explorer 5/6. Свойства Web-страниц, созданных с помощью CSS, можно изменять даже в тот момент, когда они находятся на экране, то есть динамически, используя язык написания сценариев и DOM (табл. 11.1). Многие в качестве языка написания сценариев применяют JavaScript, так как этот язык максимально доступен. Однако на CSS можно влиять и с помощью других языков, которые поддерживает ваш браузер. Например, в Internet Explorer используется язык VBScript. Когда вы посылаете письмо адресату, находящемуся в вашей же стране, необязательно указывать ее название. Так же происходит при определении окна, на которое вы хотите ссылаться с помощью DOM. Предполагается, что это будет окно, в котором находится код. Таким образом, DOM начинается с document.

Таблица 11.1. Возможности, предоставляемые DOM Возможность

Совместимость

Изменение CSS-свойств элемента, когда он находится на экране

IE4, N6

Изменение z-индекса элементов

IE4, N4

Возможность скрывать IE4, N4 элементы или показывать их на экране Управление положением IE4, N4 элементов в зависимости от установок пользователя Перемещение элементов на экране

IE4, N4

Перемещение элементов на экране посетителем

IE4, N4

Изменение видимой области элемента

IE5, N4

CSS-слои Часто объекты, которые используют ID, называются слоями. Это может привести к путанице, так как термин «слой» предназначен для описания похожей технологии в Netscape (см. главу 16). HTML-тэг легко превратить в CSS-слой, добавив атрибут ID. Тот же результат достигается в Netscape при использовании тэга <layer>. Термин «слой», по-видимому, относится к CSS-объектам. Слои Netscape скоро уйдут в прошлое, так как последняя версия Netscape (6) их не поддерживает. Чтобы избежать путаницы, в этой книге под слоями понимаются CSSслои. Если же возникнет необходимость ссылаться на слои Netscape, они так и будут называться.

Создание текста 185

Создание объекта Объект – это HTML-элемент (см. раздел «Что такое элемент» в главе 7), который определен с помощью ID (или, если это картинка, с помощью атрибута name). У HTMLэлемента есть уникальный адрес в окне браузера, который позволяет обращаться к нему с помощью DOM. Определяя HTML-элемент (рис. 11.2) как объект, вы получаете возможность менять любые его свойства, по крайней мере те, что позволит вам изменить браузер.

Определение объекта Рис. 11.2. С помощью JavaScript и DOM можно динамически воздействовать на слои

Листинг 11.1. CSS-слой устанавливается с помощью определения тэга с ID, положение которого может быть абсолютным или относительным

<html> <head> <style type="text/css"> #object1 { position: absolute; top: 100px; left: 150px; visibility: visible; width: 210px; } </style> </head> <body> <div id="object1"> <h3>This is Object 1</h3> <img scr="alice04.gif" width="200" ->height="298" border="0"> </div> </body> </html>

1. #object1{position:absolute;} Добавьте ID-правило в CSS, установите абсолютное или относительное положение элемента (см. «Определение ID для идентификации объекта» в главе 2). Вы можете ввести и другие определения, но сначала нужно задать этот слой как CSS-слой (листинг 11.1). 2. <divid="object1">...</div> Примените ID к HTML-тэгу. Для слоев с абсолютным положением лучше использовать тэг <div>, а с относительным – тэг <span> (см. разделы «Создание inline-тэгов» и «Создание HTML-тэгов блок-уровня» в главе 2).

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

186 Объектная модель документа События происходят, когда браузер выполняет какое-либо действие, например загружает новый документ (load) или покидает Web-страницу (unload). Обработчик события (event handler), синтаксис которого – название события с предшествующим ему словом «on» (onload), позволяет определять действия, связанные с каким-либо событием (рис. 11.3). В табл. 11.2 перечислены обработчики событий, которые используются чаще всего. Посетите сайт www.webbedenvironments.com/ dhtml/eventhandlers/, чтобы увидеть все эти события на одной странице. Она создана мной, чтобы продемонстрировать работу обработчиков событий (рис. 11.4).

Рис. 11.3. Синтаксис обработчика события

Рис. 11.4. На сайте www.webbedenvironments.com/ dhtml/eventhandlers/ представлены все примеры событий, которые обсуждаются в этой главе Таблица 11.2. Обработчики событий Событие

Когда происходит

На что влияет

onLoad

После загрузки объекта

Документы и картинки

onUnload

При выгрузке объекта

Документы и картинки

onFocus

При получении элементом фокуса

Документы и формы

onBlur

При потере элементом фокуса

Документы и формы

onMouseOver

Указатель мыши проходит над областью

Ссылки и области картинок

onMouseOut

Указатель мыши выходит из области

Все*

onClick

При щелчке мышью на области

Все*

onMouseDown

Кнопка мыши нажата

Все*

onMouseUp

Кнопка мыши отпущена

Все*

onMouseMove

Мышь двигается

Документ

onKeyDown

Клавиша на клавиатуре нажата

Формы

onKeyUp

Клавиша на клавиатуре отпущена

Формы

onKeyPress

Клавиша нажата и сразу же отпущена

Формы

onResize**

Изменяются размеры окна браузера или фрейма

Документ

onMove***

Окно браузера перемещается

Документ

* Картинки и области картинок только в Netscape 4. ** Не поддерживается в IE4. *** Не поддерживается в IE4/5 и Netscape 6.

Обработчики событий 187

Обработчики событий и DOM Размещение обработчиков событий Во многих примерах данной книги обработчики событий находятся в тэгах <body>, <form> или <a>. Это сделано изза взаимной совместимости браузеров, так как только в этих тэгах в Netscape 4 можно создать событие. В Netscape 6 и Internet Explorer 4/5/6 события разрешается создавать в любом элементе окна браузера. Таким образом, любой обработчик событий можно разместить с помощью соответствующего ему тэга. Например, тэг <p> используется для создания события onmouseover. Этот недостаток Netscape 4 приводит к большим ограничениям общего DHTML. Когда данный браузер выйдет из употребления, DHTML будет употребляться в Web повсеместно.

Большинство изменений стилей объекта, которые производятся с помощью DOM, должны начинаться с запуска обработчика событий. Но иногда JavaScript начинает работать только после того, как событие произойдет. Я потерял много времени, пытаясь выяснить, почему не функционирует JavaScript, пока не понял, что просто забыл запустить сценарий из события. Это не значит, что нельзя запустить JavaScript, если в этот момент не происходит никакого события. Многие функции JavaScript динамически работают со страницей или с окном, и для этого не требуется никакого события. Может показаться, что атрибут href действует как обработчик события onClick, но это не так. Если запустить DHTML-код из данного события, он, возможно, не будет выполняться. Если вы хотите, чтобы при возникновении одного события выполнялось много задач, добавьте через точку с запятой дополнительные действия JavaScript, заключив их в кавычки: onClick="action1;action2; action3" Обработчик событий может выполнять функции JavaScript, но код JavaScript следует включать непосредственно в кавычки. На первый взгляд кажется, что onClick и onMouseUp выполняют одну и ту же функцию. Событие click происходит после того, как кнопка мыши нажата и отпущена. События mouseDown и mouseUp разбивают его на два отдельных события, с каждым из которых ассоциируется свое действие.

188 Объектная модель документа

Обнаружение события Обработчик события связывает действие, происходящее в окне браузера, с функцией JavaScript, которая, в свою очередь, вызывает реакцию, или ответное действие, в окне браузера. В примере, когда посетитель проводит мышью по изображению ромба (рис. 11.5), ромб превращается в треугольник (рис. 11.6).

Связывание обработчика с событием 1. <ahref="#" Напишите тэг, в который требуется добавить обработчик события. Обычно это тэг <a> или один из тэгов форм (листинг 11.2). 2. onmouseover= Введите в этот тэг название нужного события (табл. 11.2) и поставьте знак равенства. 3. "document.images.button1.scr= ->'b_on.gif';" Поставьте открывающую кавычку, потом – код JavaScript, который будет выполняться, когда произойдет событие, и закройте кавычки. Код JavaScript может быть любым, в том числе включать вызов функций. Если вы хотите, чтобы в одном обработчике событий выполнялось несколько строк JavaScript, разделите их точкой с запятой, но не используйте клавишу Enter. 4. Повторив шаги 2 и 3, вы можете добавить столько обработчиков событий, сколько потребуется. 5. > Напишите закрывающую угловую скобку, чтобы завершить тэг шага 1.

Рис. 11.5. Первоначальное состояние рисунка

Рис. 11.6. Рисунок, на который наведен указатель мыши

Листинг 11.2. Когда посетитель проводит указателем мыши по области ссылки с картинкой b_off.gif, эта картинка заменяется другой (b_on.gif)

<html> <body> <a href="#" onmouseover= ->"document.images.button1.scr= ->'b_on.gif'"> <img scr="b_off.gif" name="button1" ->border="0"> </a> </body> </html>

6. <imgscr="button_off.gif"name= ->"button1"> Добавьте картинку, текст или любое другое HTML-содержимое, с которого должно начаться событие. 7. </a> Введите закрывающий тэг ссылки или формы.

Обнаружение события 189

Функционирование DOM Если вы использовали на HTML-странице какой-либо язык написания сценариев, то наверняка видели, как работает DOM. В DOM описывается путь от функции JavaScript к элементу на экране, и в ответ на действие, произошедшее в окне браузера, возникает событие (рис. 11.7).

Установка DOM В следующей DOM описан путь от текущего документа до картинок, которые в нем находятся, и источника картинки button1: document.images.button1.scr. Эту DOM можно использовать вместе с обработчиком событий, например onmouseover, чтобы изменить источник картинки, который служит для определения местоположения button1. В результате при наведении указателя мыши браузер заменяет одну

Рис. 11.7. Процесс начинается с действия пользователя (mouseover) и заканчивается реакцией браузера. Браузер распознает событие, запускает функцию и использует DOM, чтобы заменить изображение

190 Объектная модель документа картинку другой. Динамическая подмена картинок (image swapping или rollover) часто применяется в Web. Однако изменение CSS-свойств объекта немного отличается от изменения источника изображения. В обоих случаях используется объектная модель документа, но DOM для стилей меняется в зависимости от браузера. В следующих разделах описаны три вида DOM, которые служат для изменения CSSстилей (табл. 11.3):

Таблица 11.3. Браузеры, поддерживающие DHTML Браузер Netscape Internet Explorer

Opera

Версия

DOM

Layer

All

Netscape Layer DOM применяется только в Netscape 4; Internet Explorer All DOM поддерживается в Internet Explorer 4 и доступна в Internet Explorer 5/6; W3C ID DOM используется в Netscape 6 и Internet Explorer 5/6.

Netscape Layer DOM Netscape Layer DOM (рис. 11.8) позволяет писать сценарии для управления элементами, созданными посредством тэга <layer> (см. главу 16) и CSS-позиционирования. Эта DOM разрешает изменять положение, видимость элемента, вырезать его части. Изменения, произведенные в данных свойствах с помощью слоев или CSS-позиционирования, сразу же отображаются на экране. В листинге 11.3 и на рис. 11.9 показано, как работает Layer DOM. Netscape, в отличие от Internet Explorer, не предоставляет доступа к CSS-свойствам, кроме управления позиционированием. Таким образом, в Netscape 4 нельзя изменять шрифт, текст, вид списка, указатель мыши, цвет, фон, границу или поле объекта после загрузки страницы. Это можно сделать, только перезагрузив страницу.

Рис. 11.8. Netscape Layer DOM для доступа к CSS

Поток объектов Объекты JavaScript связаны между собой иерархически, причем на верхней ступени находится окно, а на нижней – свойство. Эта иерархия поможет вам определить порядок, в котором нужно помещать объекты в DOM. В приложении 3 представлен полный список потока объектов.

Функционирование DOM 191 Листинг 11.3. Функция JavaScript использует Netscape Layer DOM, которая описывает путь к определенному положению элемента и затем изменяет это положение

<html> <head> <script> function NAVmoveElement (objectID) { document.layers[objectID].left = 120; document.layers[objectID].top = 200; } </script> <style type="text/css"> #object1 { position: absolute; top: 10px; left: 10px; visibility: visible; } </style> </head> <body> <div id="object1"> <a href="#" onmouseOver= ->"NAVmoveElement('object1')"> This script will run in Netscape 4 ->and compatible browsers only.<br> <img scr="alice04.gif" width="200" ->height="298" border="0"> </a> </div> </body> </html>

Netscape Layer DOM не работает в Netscape 6. Когда в Netscape планировалось создание браузера нового поколения (под кодовым названием Mozilla), было решено, что он должен отвечать всем стандартам. К сожалению, это означало, что игнорируются все технологии, которые никогда не станут стандартами, включая тэг <layer> и Layer DOM. Во многих случаях можно обойтись без тэга <layer>. Но если вы хотите, чтобы ваш код работал в Netscape 4, то вам придется использовать Layer DOM и смириться с многочисленными ограничениями, возникающими при этом. При непосредственном обращении к встроенным объектам в Netscape 4 возникают ошибки (см. раздел «Netscape 4 и встроенные слои»).

Рис. 11.9. В результате работы функции картинка перемещается по экрану. Но не забывайте, что эта функция поддерживается только Netscape 4

192 Объектная модель документа

Internet Explorer All DOM Internet Explorer All DOM (рис. 11.10) позволяет писать сценарии, с помощью которых можно получить доступ к любому элементу на экране, по крайней мере к тем из них, которые распознает Internet Explorer. Эти элементы включают в себя CSS-свойства, созданные для управления их видом, положением и видимостью на экране. Все изменения сразу же отображаются. Таким образом, изменения указателя мыши, шрифта, цвета, фона, положения, видимости объекта, а также изменения, произведенные в тексте, списке, границе или поле, немедленно появляются на экране. В листинге 11.4 и на рис. 11.11 показано, как работает Internet Explorer DOM.

Рис. 11.11. В результате работы функции картинка перемещается по экрану. Эта функция поддерживается только Internet Explorer 4 и более поздними его версиями

Рис. 11.10. Internet Explorer All DOM для доступа к CSS

Листинг 11.4. Функция JavaScript использует Internet Explorer All DOM, которая описывает путь к определенному положению элемента и затем изменяет это положение

<html> <head> <script> function IEmoveElement () { document.all('object1').style.left = 120; document.all('object1').style.top = 200; } </script> <style type="text/css"> #object1 { position: absolute; top: 50px; left: 10px; visibility: visible; } </style> </head> <body> <div id="object1"> <a href="#" ->onmouseOver="IEmoveElement()"> This script will run in Internet ->Explorer 4, 5, 6 and compatible ->browsers only.<br> <img scr="alice04.gif" width="200" ->height="298" border="0"> </a> </div> </body> </html>

Функционирование DOM 193

W3C ID DOM

Рис. 11.12. W3C DOM для доступа к CSS

Листинг 11.4. Функция JavaScript использует W3C DOM, которая описывает путь к определенному положению элемента и затем изменяет это положение

<html> <head> <script> function W3CmoveElement () { document.getElementById('object1'). ->style.left = 120; document.getElementById('object1'). ->style.top = 60; } </script> <style type="text/css"> #object1 { position: absolute; top: 10px; left: 10px; visibility: visible; } </style> </head> <body> <div id="object1"> <a href="#" ->onmouseOver="W3CmoveElement()"> This script will run in any browser ->that uses the W3C's standard -><br>for DOM, including Internet ->Explorer 5, 6 and Netscape 6.<br> <img scr="alice04.gif" width="200" ->height="298" border="0"> </a> </div> </body> </html>

В W3C понимали, что необходимо связать языки написания сценариев с объектами Web-страницы, поэтому началась усердная работа по созданию наилучшего метода. К сожалению, производители браузеров не могли ждать и выпустили свои DOM до того, как появился единый стандарт. Но в конце концов W3C представил стандартизированную DOM (рис. 11.12), и производители воспользовались этим предложением. W3C ID DOM, или стандартизированная DOM, позволяет писать сценарии, с помощью которых можно получить доступ к элементу на экране. Эти элементы включают в себя CSS-свойства, созданные для управления их видом, положением и видимостью на экране. Таким образом, изменения указателя мыши, шрифта, цвета, фона, положения или видимости объекта, а также изменения, произведенные в тексте, списке, границе или поле, немедленно отображаются. В листинге 11.5 и на рис. 11.13 показано, как работает стандартизированная DOM.

Рис. 11.13. В результате работы функции картинка перемещается по экрану. Функция поддерживается только Internet Explorer 5/6 и Netscape 6 или более поздними версиями браузеров

194 Объектная модель документа

Определение возможностей браузера Лучший способ определить, есть ли у браузера, в котором работает ваш сценарий, возможности для выполнения конкретной работы, – это спросить у него самого. Узнать, обладает ли браузер необходимыми вам характеристиками, гораздо проще, чем кажется. Для этого нужно всего лишь дописать одну строчку в каждой функции. В большинстве случаев используется метод определения возможностей браузера, а не метод определения браузера (см. раздел «Название и версия браузера» в главе 12). Допустим, текущая версия браузера не позволяет запускать ваш сценарий. Не исключено, что вскоре появится новая версия, которая разрешит это сделать. Метод определения характеристик дает возможность любому браузеру, в котором способен работать сценарий, запускать его (рис. 11.14 и 11.15).

Рис. 11.14. Этот браузер может менять картинки

Рис. 11.15. Во многих старых браузерах, таких как Internet Explorer 3, не предусмотрена возможность изменения картинок. На экране отображается соответствующее сообщение

Определение возможностей браузера 195 Листинг 11.6. В этом примере проверяется, доступен ли объект document.images в браузере

<html> <body> <script language="Javascript"> if (document.images) { document.writeln("Yes, I can change ->images."); } else { document.writeln("Sorry. I can't ->change images."); } </script> </body> </html>

Доступ браузера к какой-либо возможности JavaScript 1. if(document.images) Внутри контейнера JavaScript напишите условие, как показано в листинге 11.6. В скобках после if введите DOM для требуемой функции JavaScript. В этом примере проверяется, может ли браузер работать с графическими изображениями. 2. {document.writeln("Yes, I can change images.");} В фигурных скобках поместите код JavaScript, который будет выполняться, если данная возможность поддерживается браузером. 3. else {document.writeln("Sorry. I can't changeimages.");} Можно добавить ветвь else, определив код, который будет выполняться, если проверяемая возможность JavaScript недоступна.

196 Объектная модель документа

Определение типа DOM С помощью метода определения возможностей браузера можно узнать, какой тип DOM используется в этом браузере (рис. 11.16–11.18).

Установление типа DOM 1. varisID=0; Создайте четыре переменные (isID, isALL, isLayers, isDHTML) и присвойте им значение 0 (false). В первых трех переменных запоминается тип DOM как определенный, а в четвертой запоминается, присутствует ли DOM и поддерживает ли браузер DHTML (листинг 11.7). 2. if (document.getElementByID) {isID=1; isDHTML=1;} Определите каждую DOM и присвойте соответствующей переменной значение 1 (true), если эта модель работает в браузере. Если обнаружена одна DOM, существование других не проверяется. Это позволяет вам использовать наилучшую из всех моделей, которые доступны в браузере. 3. if(isID){...} Описанные выше значения служат для того, чтобы привязать страницу к доступной DOM. Для обнаружения Layer DOM в Netscape 4 можно использовать метод определения возможностей, но если вы поместите JavaScript во внешний файл, возникнет ошибка, из-за которой применение этого метода станет нереальным (см. раздел «Использование общей для браузеров DOM»).

Рис. 11.16. DHTML-браузер использует Netscape Layer DOM

Рис. 11.17. DHTML-браузер использует Internet Explorer All DOM

Рис. 11.18. DHTML-браузер использует W3C ID DOM

Определение типа DOM 197 Листинг 11.7. С помощью этого кода выясняется, какая DOM применяется в браузере. Соответствующей переменной присваивается значение 1 (true). Если обнаружена какая-либо DOM, то переменной isDHTML также присваивается значение true

<html> <head> <script> var isDHTML = 0; var isLayers = 0; var isAll = 0; var isID = 0; if (document.getElementByID) {isID=1; isDHTML=1;} else { if (document.layers) {isLayers=1; isDHTML=1;} else { if (document.all) {isAll=1; isDHTML=1;} }} </script> </head> <body> <script> if (isDHTML) {document.write('This is a DHTML capable browser using ');} if (isID) {document.write('The World Wide Web Consortium\'s "ID" DOM.');} else { if (isLayers) {document.write('Netscape\'s "Layer" DOM.');} else { if (isAll) {document.write('Internet Explorer\'s "all" DOM.');} else {document.write('This is not a DHTML capable browser...so what are you waiting for?');} }} </script> </body> </html>

198 Объектная модель документа

Построение общей DOM Информация, возвращаемая при определении типа DOM в браузере, позволяет создать DOM для каждого объекта Web-страницы, отображаемой браузером. Основная идея – включить методы определения всех трех типов DOM в функцию findDOM(), в которой для задания типа DOM применяется оператор if. DHTML-функция использует затем findDOM, чтобы построить DOM для каждого объекта и получить доступ к его свойствам (рис. 11.19).

Создание общей DOM

Рис. 11.19. В первом предупреждении показан ID объекта, во втором – расстояние от объекта до верхней стороны экрана в пикселах

1. varisDHTML=0; Скопируйте код JavaScript из предыдущего раздела (листинг 11.8).

Листинг 11.8. Чтобы установить тип DOM, используется метод определения возможностей браузера. Затем с помощью функции указывается DOM для конкретного объекта

<html> <head> <script> var isDHTML = 0; var isLayers = 0; var isAll = 0; var isID = 0; if (document.getElementByID) {isID=1; isDHTML=1;} else { if (document.all) {isAll=1; isDHTML=1;} else { browserVersion = parseInt(navigator.appVersion); if ((navigator.appName.index0f('Netscape') !=-1) && (browserVersion == 4)) ->{isLayers = 1; isDHTML = 1;} }} function findDOM(objectID,withStyle) { if (withStyle == 1) { if (isID) { return (document.getElementById(objectID).style); }

Построение общей DOM 199 Листинг 11.8 (окончание)

else { if (isAll) {return ->(document.all ->[objectID].style); } else { if (isLayers) {return ->(document.layers [objectID]); } };} } else { if (isID) { return (document. ->getElementsById (objectID));} else { if (isAll) { return -> (documnet.layers[objectID]);} };} } } function whoAmI(objectID) { domStyle = findDOM(objectID,1) dom = findDOM(objectID,0); if (domStyle.pixelTop != null) ->{ alert(domStyle.pixelTop); } else { alert(domStyle.top); } alert(dom.id); } </script> <style type="text/css"> #object1 { position: absolute; visibility: show; top: 10px; left: 10px; } </style> </head> <body onLoad="whoAmI('object1')"> <div id="object1"> This is an Object<br> <img scr="alice14.gif" ->width="407" height="480" ->border="0"> </div> </body> </html>

2. functionfindDOM(objectID,withStyle) ->{...} Добавьте в код JavaScript функцию findDOM. Ее аргументом является ID требуемого объекта, а результатом – DOM в используемом браузере. Затем с помощью данной функции можно изменять стиль объекта (if withStyle=1) или другие его свойства (if withStyle=0). 3. if(isID){return(document. ->getElementById(objectID).style);} Каждый тип DOM проверяется для того, чтобы выяснить, какой из них используется в этом браузере. Если isID=1 (true), то условие выполняется и для определения положения объекта на Web-странице применяется W3C ID DOM. Итак, различные DOM переведены на один общий язык. Теперь можно задействовать его для управления элементами на экране с помощью функций JavaScript.

200 Объектная модель документа

Получение доступа к общей DOM 1. functionwhoAmI(objectID){...} В код JavaScript введите функцию, которая вызывает функцию findDOM(). В этом примере определены две переменные. Переменная domStyle запоминает DOM со стилем: domStyle=findDOM(objectID,1). Переменная dom запоминает DOM без стиля: dom=findDOM(objectID,0). Эти переменные нужны для того, чтобы определить ID объекта и его положение по отношению к верхней стороне экрана (см. раздел «Верхняя и левая позиции объекта» в главе 12). 2. <bodyonLoad="whoAmI('object1')"> Чтобы запустить функцию, определенную на шаге 1, используется обработчик событий. Помните, что все DHTMLфункции запускаются с помощью такого обработчика. Переменную dom можно назвать как угодно. Я предпочитаю использовать domStyle в тех случаях, когда нужно получить доступ к стилям объекта, и dom – если требуется доступ к любому другому свойству объекта.

Результаты могут быть различными В разных браузерах результаты, показанные в предупреждениях, различны. Например, в Internet Explorer 5 для Windows в обоих предупреждениях будет написано [object]. Многие браузеры отобразят переменную, которая применяется при доступе к рассматриваемому объекту, а не настоящую величину. Однако не стоит волноваться, так как в этой переменной содержится та же информация.

Использование общей для браузеров DOM 201 Листинг 11.9. Файл findDOM.js можно импортировать в любой HTML-документ, чтобы создавать DHTML-функции. Не забывайте об этом файле, он будет использоваться в книге и далее

Использование общей для браузеров DOM Во многих динамических функциях, представленных в этой книге, используется общая для браузеров DOM, которая была описана в предыдущем разделе. Чтобы не переписывать этот код каждый раз, когда он потребуется, можно поместить его во внешний текстовый файл, а затем импортировать файл в HTML-страницу (см. раздел «Внешний файл JavaScript» в главе 23).

Применение общей DOM на Web-странице 1. findDOM.js Откройте новый текстовый файл и запишите в него код для общей DOM, описанный в листинге 11.8 (см. раздел «Построение общей DOM», где объясняется работа этого кода). Сохраните файл как findDOM.js. Далее в книге он упоминается под названием «функция findDOM» (листинг 11.9). 2. index.html Создайте новую HTML-страницу и сохраните ее в той же папке, что и файл findDOM.js (листинг 11.10). 3. <scriptscr="findDOM.js"></script> В тэге <head> добавьте ссылку на внешний файл, описанный на шаге 1. 4. functionmoveObject(objectID){...} В коде JavaScript определите динамическую функцию, которая в качестве переменной использует ID объекта.

202 Объектная модель документа 5. domStyle=findDOM(objectID,1); В функции, которая была создана на шаге 4, вызовите функцию findDOM() и передайте ей значение objectID. Добавьте 1, если требуется получить доступ к стилям объекта, или 0, если необходим доступ к любому другому свойству. В этом коде величина DOM (включая стиль) хранится в переменной domStyle. 6. domStyle.left=120;domStyle.top=200; Написав переменную domStyle, точку и затем атрибут стиля, вы можете получить доступ к любому стилю объекта. В этом примере изменяются положения top и left объекта. 7. onload="moveObject('object1') Не забудьте запустить функцию из события. В этом примере функция moveObject вызывается сразу после загрузки страницы в окне браузера (рис. 11.20). Переменную dom можно назвать как угодно. Я предпочитаю использовать domStyle в тех случаях, когда нужно получить доступ к стилям объекта, и dom – если нужно получить доступ к любому другому свойству объекта.

Рис. 11.20. Перемещение изображения Алисы

Листинг 11.10. В файл index.html импортируется файл findDOM.js. Функция findDOM используется в этом коде, чтобы создать DOM, с помощью которой перемещается изображение Алисы, то есть изменяется его верхнее и левое положения

<html> <head> <script scr="findDOM.js"></script> <script> function moveObject (objectID) { domStyle=findDOM(objectID,1); domStyle.left=120; domStyle.top=200; } </script> <style type="text/css"> #object1 { position: absolute; visibility: show; top: 10px; left: 10px; } </style> </head> <body onLoad="moveObject('object1')"> <div id="object1"> This script will run in any Netscape 4 ->and above, Internet Explorer 4 and ->above, or W3C compatible browsers.<br> <img scr="alice04.gif" width="200" ->height="298" border="0"> </div> </body> </html>

Netscape 4 и встроенные слои 203

Netscape 4 и встроенные слои Рис. 11.21. Чтобы получить доступ к CSS-уровню в этом коде...

Рис. 11.22. ...нужно использовать следующую DOM в Netscape 4

При получении доступа к слоям, встроенным в другие (Netscape- или CSS-слои), недостаточно знать ID конечного уровня, к которому нужно обращаться. В Netscape 4 необходимо включать ID всех объектов. Допустим, объект object2 встроен в объект object1 (рис. 11.21). С помощью DOM Internet Explorer 4/5 и Netscape 6 могут обращаться непосредственно к object2. Однако в Netscape 4 в путь DOM нужно также включить и object1. Чтобы избежать этой ошибки, вам нужно воспользоваться специальной версией findDOM (см. раздел «Использование общей для браузеров DOM»), переписанной для Netscape 4 (рис. 11.22).

Как обнаружить слои Netscape 4 Вы заметите, что в коде findDOM, описанном в этом разделе, для обнаружения Netscape Layer DOM используется метод определения браузера (см. раздел «Название и версия браузера» в главе 12), а не метод определения его возможностей (см. ранее «Определение типа DOM»). Теоретически метод определения возможностей браузера должен устанавливать, используется ли в браузере Layer DOM. Возникающая в Netscape 4 ошибка приводит к тому, что этот метод перестает работать, но только в том случае, если он был импортирован из внешнего JavaScript-файла, а документ первым загружается на страницу в новом окне браузера. Если код для определения возможностей браузера находится непосредственно в HTML-странице, то он действует всегда, как и в том случае, когда внешний файл загружается не первым. Таким образом, чтобы пользоваться внешним файлом для создания и обнаружения Netscape DOM, нужно прибегать к методу определения браузера (который работает всегда).

204 Объектная модель документа

Установка встроенной DOM в Netscape 4 1. findDOMNested.js Откройте новый текстовый файл и запишите код общей DOM, указанный в листинге 11.11. Этот код практически совпадает с кодом функции findDOM из предыдущего раздела. Он также позволяет обращаться к объекту, встроенному в другой объект, в Netscape 4. Листинг 11.11. С помощью этой версии кода findDOM (findDOMNested.js) Netscape распознает встроенные CSS-слои

Netscape 4 и встроенные слои 205 Листинг 11.11 (окончание)

else { if (isLayers) if (objectID1) {return ->(document.layers[objectID1]. ->layers[objectID2]);} else { return ->(document.layers[objectID2]); } } };} }

Рис. 11.23. При нажатии на ссылку или картинку появляется ID объекта

Чтобы добавить и другие встроенные уровни, просто напишите дополнительные операторы if: if (objectID1) {return ->(document.layers[objectID1]. ->layers [objectID2]. ->layers[objectI3]);} if (objectID2) {return ->(document.layers[objectID2]. ->layers[objectID3]);} else { return (document.layers ->[objectID3]); }

Эта версия функции findDOM() позволяет включать два ID уровня. Идентификатор objectID1 является родительским по отношению к objectID2, который применяется в Netscape 4 для построения DOM. Однако в Internet Explorer 4/5/6 и Netscape 6 можно использовать только objectID2. Сохраните файл как findDOMNested.js. Далее в книге этот файл упоминается под названием «листинг findDOMNested». 2. index.html Создайте новую HTML-страницу и сохраните ее в той же папке, что и файл findDOM.js (листинг 11.12). 3. functionwhoAmI(objectID1,objectID2){...} Создайте функцию, которая вызывает исправленную функцию findDOM(). Ей нужно передать два ID объектов. 4. onClick="whoAmI('object1','object2');" Запустите функцию, описанную в шаге 3, с помощью обработчика событий и передайте ей ID объекта и его родительского элемента. 5. onClick="whoAmI('','object2');" Если объект не является встроенным, при вызове функции место первого объекта можно оставить пустым (даже не нажимать клавишу пробела) – рис. 11.23. Версию findDOM() со встроенными объектами рекомендуется использовать только в том случае, когда действительно необходимо встраивать CSS-слои.

206 Объектная модель документа Листинг 11.12. В этом примере object2 встроен в object1, что делает его труднодоступным для Netscape 4. Поэтому приходится немного изменить функцию findDOM()

<html> <head> <script scr="findDOMNested.js"></script> <script> function whoAmI(objectID1,objectID2) { domStyle=findDOM(objectID1,objectID2,0); alert(dom,id); } </script> <style type="text/css"> #object1 { position: relative; visibility: show;} #object2 { position: relative; visibility: show; float: right;} </style> </head> <body> <div id="object1"> <a href="#" onClick="whoAmI('','object2');">'We indeed!' cried the Mouse, who was ->trembling down to the end of his tail</a> <div id="object2"> <a href="#" onClick="whoAmI('object1','object2');"> <img scr="alice14.gif" width="200" height="236" border="0"> </a> </div> <p>'As if I would talk...</p> <p>'I won't indeed!'...</p> <p>So she called softly...</p> <p>It was high time to go...</p> </div> </body> </html>

среда, в которой вы работаете

Рис. 12.1. Этот код работает в Internet Explorer 5.5 под Windows. Обозначение браузера состоит из (compatible; MSIE 5.5; Windows 95). Но оказывается, что это Internet Explorer 4, и в нем можно запускать более старые версии кода JavaScript

«Познай себя, прежде чем изменять мир». Возможно, это старая поговорка, а может быть, я придумал ее сам, но данное высказывание как нельзя лучше подходит для DHTML. Чтобы использовать многие функции, описанные в последующих главах, необходимо твердо знать, где какие тэги находятся, каковы их размеры и какие действия они выполняют. В первой части данной главы рассказывается о том, что можно узнать, обращаясь непосредственно к браузеру, например размер экрана или окна браузера (DOM в таком случае не используется). Во второй описывается, какие свойства объектов, которые вы собираетесь изменять, например положение, высоту, ширину, определяются с помощью DOM.

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

208 Среда, в которой вы работаете ра, в котором будет отображаться Webстраница (рис. 12.1–12.3). Первоначально информация приходит в виде двух больших объектов программы (листинг 12.1). В первом из них содержится название браузера (navigator.appName). Во втором – версия браузера, информация о его совместимости и используемая операционная система (navigator.appVersion). Сведения о названии и версии полезны, но они занимают много места в коде. Чтобы получить необходимые данные, можно применять эти программы, но затем их лучше хранить в переменных, которые потребуются в дальнейшем.

Рис. 12.2. Этот код работает в Netscape 6 для Mac. Заметьте, что браузер выдает себя за Netscape 5

Определение типа и версии браузера 1. varisNS=0; Создайте три переменные (isIE, isNS, isOtherBrowser) на JavaScript. В них будет запоминаться информация о том, в каком браузере работает код. Сначала этим переменным присваивается значение 0 (false). При нахождении типа браузера соответствующей переменной присваивается значение 1 (true). 2. if (navigator.appName.index0f ->('Netscape')!=-1) {isNS=1;} Проверьте название браузера для того, чтобы переопределить переменные из шага 1. В этом коде в appName проводится поиск слов «Netscape» и «Microsoft Internet Explorer». Если браузер не относится ни к Netscape, ни к Internet Explorer, то переменной isOtherBrowser присваивается значение 1. 3. parseInt(navigator.appVersion);

Рис. 12.3. Код, определяющий браузер, работает в Opera 5, а на экране написано Internet Explorer. Многие коды JavaScript «узнают» только Internet Explorer и Netscape, а другие браузеры исключаются. Браузеры Opera воспринимаются как Internet Explorer. Таким образом, код будет функционировать и в Opera

Название и версия браузера 209 Листинг 12.1. Сначала на странице появляется полное описание браузера. Затем эта информация используется для определения названия и номера версии браузера, и на экран выводится правильное сообщение

<html> <head> <body> <script> document.write('<b>This browser\'s ->designation is:</b>'); document.write(navigator.appName + ' '); document.write(navigator.appVersion); var isNS = 0; var isIE= = 0; var isOtherBrowser = 0; if (navigator.appName.index0f('Netscape') ->!=-1) {isNS = 1;} else { if (navigator.appName.index0f ->('Microsoft Internet ->Explorer') !=-1) {isIE = 1;} else {isOtherBrowser = 1;} } browserVersion = parseInt ->(navigator.appVersion); document.write('<br><br>'); if (isNS) {document.write('This Browser ->is compatible with Netscape version ');} else { if (isIE) {document.write('This ->Browser is compatible with Internet ->Explorer version ');} else { if (isOtherBrowser) {document.write ->('I do not recognize this browser ->type. Version = ');} }} document.write(browserVersion +'.'); </script> </body> </html>

Номер версии браузера присваивается переменной browserVersion. 4. if (isNS) {...} Теперь в переменных, определенных на шагах 1–3, хранится информация об имени и версии браузера. Конечно, количество браузеров не ограничивается двумя. Но большинство браузеров определяются как Netscape или Internet Explorer в зависимости от того, с каким из них они совместимы в большей степени. Так происходит с браузером Opera. Он не исключается, хотя Web-сайты, способные определять тип браузера, можно просмат-

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

210 Среда, в которой вы работаете ривать только в конкретных браузерах.

Тип операционной системы В объекте версии приложения (appVersion) находится информация не только о номере версии браузера (см. предыдущий раздел), но и о типе операционной системы, которую браузер использует для просмотра страницы (рис. 12.4 и 12.5). Эта информация может быть весьма полезной, особенно если нужно преодолеть проблемы, связанные с типом операционной системы (например, несоответствие в размере шрифта).

Рис. 12.4. Код работает в Windows 95

Определение вида операционной системы 1. varisMac=0; Создайте три переменные (isMac, isWin, isOtherOS) на JavaScript. В них будет запоминаться информация о типе операционной системы, используемой браузером. Сначала этим переменным присваивается значение 0 (false). При нахождении типа операционной системы соответствующей переменной присваивается значение 1 (true) – листинг 12.2. 2. i f (navigator.appVersion.index0f('Mac') !=-1){isMac=1;} Проверьте название операционной системы для того, чтобы переопределить переменные из шага 1. В этом коде производится поиск слов «Mac» и «Win». Если ОС не относится к перечисленным типам, присвойте переменной isOtherOS значение 1. 3. if (isMac) {...}

Рис. 12.5. Тот же код работает в Mас

Тип операционной системы 211 Теперь переменные, определенные на шаге 1 и 2, можно использовать для выбора кода для конкретной ОС. Чаще всего метод определения операционной системы служит для преодоления различий в размере шрифта и цвете между Mac и Windows (см. раздел «CSS и операционная система» в главе 22). Конечно, операционных систем гораздо

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

<html> <head> <body> <script> document.write('<b>This browser\'s designation is:</b>'); document.write(navigator.appName + ' '); document.write(navigator.appVersion); var isMac = 0; var isWin= = 0; var isOtherOS = 0; if (navigator.appName.index0f('Mac') !=-1) {isMac = 1;} else { if (navigator.appName.index0f('Win') !=-1) {isWin = 1;} else {isOtherOS = 1;} } document.write('<br><br>'); if (isMac) {document.write('This Browser is running in the Mac OS ');} else { if (isWin) {document.write('This Browser is running in the Microsoft ->Windows OS ');} else { if (isOtherOS) {document.write('RESISTANCE IS FUTILE...YOU WILL BE ->ASSIMULATED');} }} </script> </body> </html>

212 Среда, в которой вы работаете больше, и их количество не ограничивается названными типами. Приобретает популярность ОС Linux, но ее использует всего 1% посетителей сайтов.

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

Рис. 12.8. Код отображает полные размеры экрана и размеры действительной области моего компьютера

Рис. 12.6. Размеры экрана в Windows. В действительную область включено все, кроме панели задач. В Windows панель может появляться на любой стороне экрана по желанию пользователя

Рис. 12.7. Размеры экрана в Mac. В действительную область включено все, кроме верхней полосы меню; длины правой и левой сторон этой области приблизительно равны шести пикселам. В ОС Mac полоса меню всегда располагается сверху

Размеры экрана 213 Листинг 12.3. Определяются и полные, и действительные размеры окна; эти значения присваиваются переменным, с помощью которых они выводятся на экран

жаться страница, и сколько места на самом деле будет доступно. Поэтому лучше определить размер экрана заранее (рис. 12.8).

<html> <body> <script> var screenHeight=screen.height;

Определение размеров экрана

var screenWidth=screen.width; var liveScreenHeight=screen.availHeight; var liveScreenWidth=screen.availWidth; document.writeln('Your total screen ->height is ' + screenHeight + 'px -><br><br>'); document.writeln('Your total screen width ->is ' + screenWidth + 'px <br><br>'); document.writeln('Your live screen height ->is ' + liveScreenHeight + 'px -><br><br>'); document.writeln('Your live screen width ->is ' + liveScreenWidth + 'px -><br><br>'); </script> </body> </html>

1. varscreenHeight=screen.height; Создайте переменные screenHeight и screenWidth на JavaScript и присвойте им значения screen.height и screen.width соответственно. В этих переменных будет храниться полная высота и ширина экрана в пикселах (листинг 12.3). 2. v a r liveScreenHeight=screen.availHeight; В сценарий JavaScript добавьте переменные liveScreenHeight и l i v e S c r e e n W i d t h и присвойте им значения screen.availHeight и screen.availWidth соответственно. В этих переменных будет хра-

214 Среда, в которой вы работаете ниться действительная (доступная) высота и ширина экрана в пикселах. Последние отличаются от полной высоты и ширины тем, что в них входит только область, где отображается окно, и не включаются полосы меню, которые добавляются операционной системой.

Количество цветов Раньше цвет был тем свойством, которое дизайнер использовал с крайней осторожностью. Все компьютеры по-разному воспроизводят цвета. На профессиональном компьютере вы создадите прекрасную Webстраницу, разноцветную, с отбрасываемыми тенями, со сглаженным шрифтом и трехмерными кнопками (рис. 12.9). Но на компьютерах большинства посетителей эта страница будет выглядеть как цветная фотография, которую оставили на солнце (рис. 12.10). Проблема заключается в том, что некоторые компьютеры поддерживают миллионы цветов, в то время как другие – лишь несколько тысяч, сотен или даже меньше. Таким образом, полезно иметь представление о том, сколько цветов есть на компьютере человека, который просматривает ваш сайт. Однако в последние годы

Рис. 12.9. Изображение на основе 32-битной палитры

Рис. 12.10. То же изображение в 8-битной графике. Исчезли плавные переходы между цветами

Рис. 12.11. Код отображает цветовой диапазон монитора, в данном случае 32-битный

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

Определение количества цветов Рис. 12.12. Код отображает цветовой диапазон монитора, в данном случае 8-битный Листинг 12.4. Функция findColors возвращает одно из значений, перечисленных в табл. 12.1, в зависимости от количества доступных цветов на компьютере пользователя

<html> <body> <script> function findColors() { return (screen.colorDepth); } document.write('Your screen is currently ->using ' + findColors() + 'bit color.'); </script> </body> </html>

Таблица 12.1. Значения свойства colorDepth Количество битов

Количество цветов

256

65536

16,7 млн

1. screen.colorDepth

216 Среда, в которой вы работаете Значение, определяющее количество цветов на компьютере пользователя, содержится в свойстве colorDepth объекта screen (листинг 12.4). В результате работы этого кода возвращается значение глубины цвета – количество бит на пискел (табл. 12.1).

Размеры окна браузера В Netscape можно определить текущую высоту и ширину браузера. (Данный код не работает в Internet Explorer). Это полная ширина и высота окна браузера в пикселах, включая все элементы управлен и я в видимой области (рис. 12.13).

Выяснение размеров окна браузера 1. window.outerHeight Создайте функцию, которая возвращает внешнюю высоту окна. Это значение измеряется в пикселах (листинг 12.5). 2. window.outerWidth

Листинг 12.5. Функции findBrowserHeight и findBrowserWidth возвращают размеры окна браузера в пикселах

<html> <head> <script> function findBrowserHeight() { if (window.outerHeight != null) return window.outerHeight; return null; }

Рис. 12.13. Код отображает размеры окна браузера в Netscape

Листинг 12.5 (окончание)

Размеры клиентской области окна 217 Создайте функцию, которая возвращает внешнюю ширину окна. Данное значение также измеряется в пикселах. В Internet Explorer нельзя определить общие размеры окна браузера.

Размеры клиентской области окна браузера можно задать как в Internet Explorer, так и в Netscape (см. следующий раздел).

Рис. 12.14. После щелчка по картинке появляется сообщение, в котором указаны размеры клиентской области окна браузера

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

Определение размеров Листинг 12.6. Функции findLivePageHeight() и findLivePageWidth() возвращают размеры клиентской области окна браузера

<html> <head> <script> function findLivePageHeight () { if (window.innerHeight != null) return window.innerHeight; if (document.body.clientHeight != null) return document.body.clientHeight; return null; } function findLivePageWidth () { if (window.innerWidth != null) return window.innerWidth; if (document.body.clientWidth != null) return document.body.clientWidth; return null; }

218 Среда, в которой вы работаете

клиентской области 1. functionfindLivePageHeight() {...} В сценарий JavaScript добавьте функцию findLivePageHeight, использующую метод определения возможностей браузера. Таким образом указывается, как браузер определяет высоту клиентской области окна, функция возвращает это значение. В Netscape используется значение window.innerHeight, а в

Листинг 12.6 (окончание)

</script> </head> <body> <script> function pageDim() { livePageHeight = findLivePageHeight (); livePageWidth = findLivePageWidth (); alert ('Visible Page Width: is ' + ->livePageWidth + 'px; Visible Page ->Height: ' + livePageHeight + 'px'); } </script> Click here to find the windows live ->dimensions and the Webpage's total ->size. <br> <a href="#" onClick="pageDim()"> <img scr="alice17.gif" width="640" ->height="480" border="0"> </a> </body> </html>

Какой размер экрана лучше использовать? Стандартное разрешение экрана, на которое ориентируются Web-дизайнеры, – 800×600. Но все сайты должны поддерживать размер 640×480, даже если в этом случае понадобится горизонтальная полоса прокрутки. Хотя данный размер используется менее чем 13% посетителей Web-сайтов и по сообщениям StatMarket (www.statmarket.com) эта цифра уменьшается, нужно, чтобы любой сайт можно было просматривать и на маленьких экранах. Значимую информацию и элементы дизайна следует размещать так, чтобы их было видно без вертикальной прокрутки. Важные элементы пользовательского интерфейса должны отображаться на экране 800×600 без горизонтальной прокрутки. Помните, что размер 800×600 – максимально доступный. На самом деле на экране такого размера клиентская область, в которой отображается сайт, занимает гораздо меньше места. Максимальный ее размер может быть разным. Это зависит от разрешения монитора, типа ОС, браузера и действительных размеров окна браузера, которые устанавливает пользователь.

Адрес и название страницы 219

Рис. 12.15. Название страницы и ее URL

Листинг 12.7. Переменные pageURI и pageTitle определяются и затем отображаются на странице. URI также используется для создания ссылки на нее. Ссылка срабатывает, когда пользователь щелкает мышью по названию

<html> <body> <script> var pageURI = self.location; var pageTitle = document.title; document.writeln('The location of the ->page titled <i><a href="' + pageURI + ->'">' + pageTitle + '</a></i> is:<br>'); document.writeln(pageURI); </script> </body> </html>

Internet Explorer – document.body.clientHeight (листинг 12.6). 2. function findLivePageWidth() {...} В сценарий JavaScript добавьте функцию findLivePageWidth, использующую метод определения возможностей браузера. В ней выясняется, как браузер хранит ширину клиентской области окна, и функция возвращает это значение. В Netscape ширина клиентской области окна браузера находится в свойстве window.innerWidth, а в Internet Explorer – в document.body.clientWidth.

Адрес и название страницы URL Web-страницы представляет собой ее уникальный адрес в Web. Название – это обозначение, которое вы присваиваете странице и которое находится внутри тэга <title> в заголовке документа. Эту информацию можно легко отобразить на Web-странице (рис. 12.15).

220 Среда, в которой вы работаете

Определение адреса и названия страницы 1. varpageURI=self.location; В сценарий JavaScript добавьте переменную pageURI и присвойте ей значение self.location, которое является адресом вашей Web-страницы (листинг 12.7). 2. varpageTitle=document.title; В код JavaScript добавьте переменную pageTitle и присвойте ей значение document.title, которое является названием вашего документа, то есть содержимым тэга <title>. Теперь эти переменные можно использовать для различных целей. В частности, написать их на странице, как в данном примере. Адрес страницы применяется как обратная ссылка.

URI или URL? Для хранения информации о местоположении страницы применялась переменная pageURI, а не pageURL. URL расшифровывается как Universal Resource Locator, а URI – как Universal Resource Identifier. Чем же они отличаются? В действительности, немногим. Но W3C по какимто причинам решил, что URL, используемый чаще, представляет собой особый термин, и вместо него было решено применять URI. Замечу, что это абсолютно ни на что не влияет. Но стоит ли включать URI вместо URL? Только если вы хотите запутать

В Netscape 4 для Mac при определении названия страницы возникают ошибки: вместо названия страницы возвращается название файла или DOM.

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

Рис. 12.16. Предупреждение указывает, на сколько пикселов переместилась страница

Положение прокрутки страницы 221 жимым страницы. К счастью, у браузера можно узнать, насколько была передвинута страница, то есть определить положение прокрутки (scrolling position) – рис. 12.16.

Определение положения прокрутки

В сценарий JavaScript добавьте функцию findScrollLeft(), использующую метод определения возможностей браузера. Таким образом устанавливается, как браузер выясняет положение прокрутки по горизонтали. В Netscape применяется значение window.pageXOffset, а

1. function findScrollLeft() {...}

Листинг 12.8. Функции findScrollLeft() и findScrollRight() определяют положение прокрутки страницы. Такие функции применяют в Web-странице по-разному: непосредственно отобразить результат работы функции (как в данном примере) или присвоить эти значения переменным, которые можно будет использовать и изменять в дальнейшем

<html> <head> <script> function findScrollLeft() { if (window.pageXOffset != null) return window.pageXOffset; if (document.body.scrollHeight != null) return document.body.scrollLeft; return (null); } function findScrollTop() { if (window.pageYOffset != null) return window.pageYOffset; if (document.body.scrollWidth != null) return document.body.scrollTop; return (null); } </script> </head> <body> Scroll the window and then click the image to find your current scroll position.<br> <a href="javascript:alert ('Scrolled From Top: '+ findScrollTop() + 'px; Scrolled ->From Left: ' + findScrollLeft() + 'px');"> <img scr="alice16.gif" width="640" height="477" border="0"> </a> </body> </html>

222 Среда, в которой вы работаете в Internet Explorer – document.body.scrollLeft(листинг 12.8). 2. function findScrollTop() {...} В сценарий JavaScript добавьте функцию findScrollTop(), использующую метод определения возможностей браузера. Таким образом устанавливается, как браузер выясняет положение прокрутки по вертикали. В Netscape применяется значение window.pageYOffset, а в Internet Explorer – document.body.scrollTop. Netscape 4 (Wiindows) и Netscape 6 (все ОС) ведут себя непонятным образом, когда прокрутке фрейма присвоено значение no. Полоса прокрутки исчезает, при этом весь фрейм также нельзя прокручивать, даже если используется показанный выше код JavaScript.

Размеры объекта Информацию о среде, описываемую ранее в этой главе, например размер экрана, мы узнавали от браузера, задавая ему вопросы. Далее мы будем получать сведения от самих объектов, находящихся в окне браузера, задавая вопросы им. Чтобы выяснить размеры объекта, его положение, видимость, 3D-позицию, нужно воспользоваться общей DOM. У каждого объекта есть ширина и высота, которые и определяют его размеры (см. раздел «Что такое элемент» в главе 7). Если размеры объекта известны (рис. 12.17), то его легко перемещать и позиционировать таким образом, чтобы он не выходил за края экрана. Это особенно важно при создании полосы прокрутки (см. раздел «Полоса прокрутки» в главе 25).

Рис. 12.17. В предупреждении указаны размеры объекта. В данном случае внутри объекта находится изображение

Листинг 12.9. Функции findWidth() и findHeight() определяют размеры отдельного объекта на странице. Их можно применять в Web-странице по-разному: непосредственно отобразить результат работы функции (как в данном примере) или присвоить эти значения переменным, которые можно будет использовать и изменять в дальнейшем

<html> <head> <script scr="findDOM.js"></script> <script> function findWidth(objectID) { var dom = findDOM(objectID,0); if (dom.offsetWidth) return dom.offsetWidth; if (dom.clip.width) return dom.clip.width; return (null); } function findHeight(objectID) { var dom = findDOM(objectID,0);

Размеры объекта 223 Листинг 12.9 (окончание)

if (dom.offsetHeight) return dom.offsetHeight; if (dom.clip.height) return dom.clip.height; return (null); } </script> <style type="text/css"> #object1 { position: absolute; top: 50px; width: 402px; left: 100px; border: 2px gray solid; visibility: visible; } </style> </head> <body> <script> function showDim(objectID) { widthObj = findWidth(objectID); heightObj = findHeight(objectID); alert('Width: ' + widthObj + 'px; ->Height: ' + heightObj + 'px' ); } </script> Click me to find my Width and ->Height!<br><br> <div id="object1"> <a href="#" ->onClick="showDim('object1')"> <img scr="alice20.gif" ->width="398" height="480" ->border="0"> </a> </div> </body> </html>

Выяснение ширины и высоты объекта 1. <script scr="findDOM.js"></script> В любую функцию JavaScript, которая непосредственно обращается к объекту на экране, нужно включить код findDOM. Добавьте внешний текстовый файл и затем импортируйте его на ту страницу, где он будет применяться (см. раздел «Использование общей для браузеров DOM» в главе 11 и листинг 12.9). 2. function findWidth(objectID) {...} В сценарий JavaScript добавьте функцию findWidth(). При обращении к объекту она задействует его ID, который передается в функцию как переменная objectID. Таким образом создается DOM (см. раздел «Построение общей DOM» в главе 11). Затем в этой функции применяется метод определения возможностей браузера. Так можно установить, как браузер выясняет ширину объекта. В Netscape 4 используется значение clip.width, а в Netscape 6 и Internet Explorer 4/5/6 – offsetWidth. 3. function findHeight(objectID) {...} В сценарий JavaScript добавьте функцию findHeight(). Она задействует ID объекта, к которому обращается. ID передается в функцию как переменная objectID. Таким образом создается DOM (см. раздел «Построение общей DOM» в главе 11). Затем в этой функции применяется метод определения возможностей браузера. Так устанавливается, как браузер выясняет высоту объекта. В Netscape 4 используется значение clip.height, а в Netscape 6 и Internet Explorer 4/5/6 – offsetHeight. 4. #object1 {...}

224 Среда, в которой вы работаете С помощью значений position, left и top установите ID объектов. 5. function showDim(objectID) {...} Добавьте функцию JavaScript, в которой используются функции, определенные на шаге 2 и 3. В этом примере функция showDim() просто присваивает значения, возвращаемые функциями findWidth() и fingHeight(), переменным и затем отображает их значения в предупреждении. 6. onClick="showDim('object1')" Чтобы запустить функцию, созданную на шаге 5, добавьте обработчик событий и передайте ему ID объекта, к которому хотите обратиться. Протестировав этот код на разных браузерах, вы заметите, что размеры объекта в них немного отличаются. Это происходит из-за того, что в одних браузерах (например, Internet Explorer) учитывается ширина и высота элемента вместе с границей, а в других (Netscape 4) граница не включается.

Левая и верхняя позиции объекта В основном DHTML используется для перемещения объектов на странице (см. раздел «Перемещение объекта на заданное расстояние» в главе 13). Но прежде чем передвинуть объект, необходимо выяснить его текущее положение (рис. 12.18). Верхнее и левое положение элемента можно установить с помощью CSS (см. раздел «Определение положения по отнош е н и ю к левому верхнему углу» в главе 8). Затем,

Рис. 12.18. В предупреждении указаны левая и верхняя позиции объекта

Листинг 12.10. Функции findLeft() и findRight() определяют положение отдельного объекта на странице. Их можно применять в Webстранице по-разному: непосредственно отобразить результат работы функции (как в данном примере) или присвоить эти значения переменным, которые можно будет использовать и изменять в дальнейшем

<html> <head> <script scr="findDOM.js"></script> <script> function findLeft(objectID) { var domStyle = findDOM(objectID,1); var dom = findDOM(objectID,0); if (domStyle.left) return domStyle.left; if (domStyle.pixelLeft) return domStyle.pixelLeft; if (domStyle.offsetLeft) return domStyle.offsetLeft; return (null); }

Левая и верхняя позиции объекта 225 Листинг 12.10 (окончание)

чтобы определить эту позицию, можно использовать JavaScript (листинг 12.10).

Определение левого и верхнего положения объекта 1. <script scr="findDOM.js"></script> В любую функцию JavaScript, которая непосредственно обращается к объекту на экране, нужно включать код findDOM. Это можно сделать, добавив внешний текстовый файл и затем импортировав его на ту страницу, где он будет применяться (см. раздел «Использование общей для браузеров DOM» в главе 11). 2. function findLeft(objectID) {...} В JavaScript следует добавить функцию findLeft(). При обращении к объекту она задействует его ID, который пер е д а е т с я в функцию как переменная objectID. Таким образом создается DOM. В этой функции применяется метод определения возможностей браузера. Так устанавливается, как браузер выясняет левое положение объекта. Затем функция возвращает это значение. В Netscape 4 используется значение left, а в Netscape 6 и Internet Explorer 4/5/6 – offsetLeft и pixelLeft соответственно. 3. function findTop(objectID) {...} В сценарий JavaScript добавьте функцию findTop(). Она задействует ID о б ъ е к т а , к которому обращается. ID передается в функцию как переменная objectID. Таким образом создается DOM (см. раздел «Построение общей DOM» в главе 1 1 ) . В этой функции применяется метод

226 Среда, в которой вы работаете определения возможностей браузера. Так устанавливается, как браузер выясняет верхнее положение объекта. Затем функция возвращает это значен и е . В Netscape 4 используется значение top, а в Netscape 6 и Internet Explorer 4/5/6 – offsetTop и pixelTop соответственно. 4. #object1 {...} Создайте ID правило и опишите в нем положение объекта с помощью свойств position, left и top. 5. function showPos(objectID) {...} Создайте функцию JavaScript, в которой используются функции, определенные на шаге 2 и 3. В этом примере функция showPos() просто присваивает значения, возвращаемые функциями findLeft() и findTop(), переменным и затем отображает эти значения в предупреждении. 6. onClick="showPos('object1')" Чтобы запустить функцию, созданную на шаге 5, добавьте обработчик событий и передайте ему ID объекта, к которому хотите обратиться. Вы можете заметить небольшое несоответствие между положением объекта в Internet Explorer и Netscape 4 и положением объекта в Netscape 6. В последнем случае положение задается по отношению к внутренней стороне рамки объекта, другие же браузеры определяют положение объекта по отношению к внешней стороне рамки.

Правая и нижняя позиции объекта С помощью JavaScript можно определить также правое и нижнее положение объекта (рис. 12.19). Однако этого нельзя добиться за один шаг. Сначала находится левое и верхнее положение элемента, его

Рис. 12.19. В предупреждении указаны нижняя и правая позиции объекта Листинг 12.11. Функции findRight() и findBottom() определяют положение отдельного объекта на странице. Их можно применять в Webстранице по-разному: непосредственно отобразить результат работы функции (как в данном примере) или присвоить эти значения переменным, которые можно будет использовать и изменять в дальнейшем

<html> <head> <script scr="findDOM.js"></script> <script> function findRight(objectID) { var domStyle = findDOM(objectID,1); var dom = findDOM(objectID,0); if (dom.left) return (domStyle.left + ->domStyle.clip.width); if (domStyle.pixelLeft) return (domStyle.pixelLeft + ->dom.offsetWidth); if (dom.offsetLeft) return (domStyle.offsetLeft + ->dom.offsetWidth); return (null); }

Правая и нижняя позиции объекта 227 Листинг 12.11 (окончание)

ширина и высота, затем соответствующие величины складываются (листинг 12.11).

Определение правого и нижнего положения объекта 1. <script scr="findDOM.js"></script> В любую функцию JavaScript, которая непосредственно обращается к объекту на экране, следует включить код findDOM. Это можно сделать, добавив внешний текстовый файл и затем импортировав его на ту страницу, где он будет применяться (см. раздел «Использование общей для браузеров DOM» в главе 11). 2. function findRight(objectID) {...} В сценарий JavaScript добавьте функцию findRight(). При обращении к объекту она задействует его ID, который передается в функцию как переменная objectID. Таким образом создается DOM. В данной функции применяется метод определения возможностей браузера. Это позволяет установить, как браузер выясняет левое положение объекта и его ширину. Затем функция возвращает сумму указанных величин (см. разделы «Размеры объекта» и «Определение левого и верхнего положения объекта»). 3. function findBottom(objectID) {...} В сценарий JavaScript добавьте функцию findBottom(). Она задействует ID объекта, к которому обращается. ID

228 Среда, в которой вы работаете передается в функцию как переменная objectID. Таким образом создается DOM. В этой функции применяется метод определения возможностей браузера. Устанавливается, как браузер выясняет верхнее положение объекта и его высоту. Затем функция возвращает сумму этих значений. 4. #object1 {...} С помощью значений position, left и top установите ID объектов. 5. function showPos(objectID) {...} Создайте функцию JavaScript, в которой используются функции, определенные на шаге 2 и 3. В этом примере функция showPos() просто присваивает значения, возвращаемые функциями findRight() и findBottom(), переменным и затем отображает эти значения в предупреждении. 6. onClick="showPos('object1')" Чтобы запустить функцию, созданную на шаге 5, добавьте обработчик событий и передайте ему ID объекта, к которому хотите обратиться. Вы можете заметить небольшое несоответствие между найденными значениями в Internet Explorer и Netscape 4 и аналогичными величинами Netscape 6. В последнем случае положение объекта задается по отношению к внутренней стороне рамки объекта, другие же браузеры определяют эти значения по отношению к внешней стороне рамки.

Z-индекс объекта CSS-атрибут z-index позволяет размещать позиционированные элементы в порядке стека в 3D (см. раздел «Элементы в поряд-

Рис. 12.20. В предупреждении указан номер слоя, на котором находится объект Листинг 12.12. Функция findLayer() определяет z-индекс отдельного объекта на странице

<html> <head> <script scr="findDOM.js"></script> <script> function setLayer(objectID,layerNum) { var domStyle = findDOM(objectID,1); domStyle.zIndex = layerNum; } function findLayer(objectID) { var domStyle = findDOM(objectID,1); if (domStyle.zIndex != null) return domStyle.zIndex; return (null); } </script> <style type="text/css"> #object1 { position: absolute; z-index: ->3; top: 175px; left:255px } #object2 { position: absolute; z-index: ->2; top: 100px; left:170px }

Z-индекс объекта 229 Листинг 12.12 (окончание)

#object3 { position: absolute; z-index: ->1; top: 65px; left: 85px } #object4 { position: absolute; z-index: ->0; top: 5px; left:5px } </style> </head> <body onLoad="setLayer('object1',3); ->setLayer('object2',2); ->setLayer('object3',1); ->setLayer('object4',0);"> <script> function whichLayer(objectID) { layerNum = findLayer(objectID); alert('Layer: ' + layerNum ); } </script> <div id="object1"> <a href="#" ->onClick="whichLayer('object1')"> <img scr="alice22.gif" ->width="100" height="147" ->border="0"></a><br clear="all"> </div> <div id="object2"> <a href="#" ->onClick="whichLayer('object2')"> <img scr="alice32.gif" ->width="140" height="201" ->border="0"></a><br clear="all"> </div> <div id="object3"> <a href="#" ->onClick="whichLayer('object3')"> <img scr="alice15.gif" ->width="150" height="198" ->border="0"></a><br clear="all"> </div> <div id="object4"> <a href="#" ->onClick="whichLayer('object4')"> <img scr="alice29.gif" ->width="200" height="236" ->border="0"></a><br clear="all"> </div> </body> </html>

ке стека (3D-позиционирование)» в главе 8 ) . С помощью JavaScript можно определить z-индекс отдельного объекта на экране (рис. 12.20). Однако если z-индекс не установлен динамически, Internet Explorer 4/5/6 и Netscape 6 его не распознают. Чтобы избежать этой ошибки, для определения z-индекса объекта при первой загрузке страницы приходится использовать JavaScript (листинг 12.12).

Определение z-индекса объекта 1. <script scr="findDOM.js"></script> В любую функцию JavaScript, которая непосредственно обращается к объекту на экране, нужно включить код findDOM. Для этого добавьте внешний текстовый файл и затем импортируйте его на ту страницу, где он будет использоваться.

230 Среда, в которой вы работаете 2. function setLayer(objectID,layerNum) {...} В сценарий JavaScript добавьте функцию setLayer().Она устанавливает zиндекс объектов при первой загрузке станицы. Это позволяет обойти ограничения Internet Explorer 4/5/6 и Netscape 6. 3. functionfindLayer(objectID) {...} В код JavaScript добавьте функцию findLayer(). Она применяет ID объекта, к которому обращается. ID передается в функцию как переменная objectID. Таким образом создается DOM (см. раздел «Построение общей DOM» в главе 11). Затем функция использует ID для доступа к свойству z-index и возвращает это значение. 4. #object1 {...} Создайте ID правило и опишите положение объекта с помощью свойств position, type и z-index. 5. onLoad="..." Чтобы инициализировать z-индекс нужных объектов, используйте в тэге <body> функцию setLayer(). 6. function whichLayer(objectID) {...} Создайте функцию JavaScript, в которой применяются функции, определенные на шаге 2 и 3. В этом примере функция whichLayer() просто присваивает значения, возвращаемые функцией findLayer(), переменным и затем отображает их значения в предупреждении. 7. onClick="whichLayer('object1')" Чтобы запустить функцию, созданную на шаге 6, добавьте обработчик событий и передайте ему ID объекта, к которому хотите обратиться.

Рис. 12.21. Сколько времени мы будем видеть Чеширского кота?

Листинг 12.13. Функция findVisibility() определяет текущее состояние видимости отдельного объекта на странице, которое может иметь значение visible или hidden

<html> <head> <script scr="findDOM.js"></script> <script> function setVisibility(objectID,state) { var dom = findDOM(objectID,1); domvisibility.zIndex = state; } function findVisibility(objectID) { var dom = findDOM(objectID,1); if (dom.visibility == 'show') || ->(dom.visibility == 'visible')) {return 'visible';} return 'hidden'; } </script> <style type="text/css">

Состояние видимости объекта 231 Листинг 12.13 (окончание)

#object1 { position: relative; top: 5px; left: 5px width: 640px; visibility: visible; } </style> </head> <body onLoad="setVisibility ->('object1','visible');"> <script> function showVisibility(objectID) { var thisVis = findVisibility(objectID); alert('Visibility Status: ' + thisVis ); } </script> <br><br> <a href="#" onClick=" ->showVisibility('object1')"> Where is the Cheshire cat? </a> <div id="object1"> <img scr="alice24.gif" width="640" ->height="435" border="0"> </div> </body> </html>

Состояние видимости объекта У всех элементов с установленным положением есть также состояние видимости – hidden или visible (см. раздел «Определение видимости элемента» в главе 9). По умолчанию это состояние указывается как visible (рис. 12.21), но его можно поменять с помощью JavaScript (см. раздел «Отображение и сокрытие объектов» в главе 13). К сожалению, в Netscape 6 и Internet Explorer 4/5/6 нельзя получить доступ к состоянию видимости, которое изначально установлено в CSS. Это можно сделать, только если состояние определено динамически (листинг 12.13).

Выяснение состояния видимости объекта 1. <script scr="findDOM.js"></script> В любую функцию JavaScript, которая непосредственно обращается к объекту на экране, нужно включить код findDOM. Для этого добавьте внешний текстовый файл и затем импортируйте его на ту страницу, где он будет использоваться. 2. f u n c t i o n setVisibility(objectID,state){...} В сценарий JavaScript добавьте функцию setVisibility(). Она устанавливает начальную видимость объектов при первой загрузке станицы. Это позволяет обойти ограничения Internet Explorer 4/5/6 и Netscape 6.

232 Среда, в которой вы работаете 3. function findVisibility(objectID) {...} В JavaScript добавьте функцию findVisibility(), которая применяет ID объекта, к которому обращается. ID пер е д а е т с я в функцию как переменная objectID. Таким образом создается DOM. Затем функция использует этот ID для доступа к текущему свойству видимости, установленному для объекта. В зависимости от полученного значения функция возвращает либо visible, либо hidden. 4. #object1 {...} С помощью значений position, type и visibility установите ID объектов. 5. onLoad="..." Чтобы инициализировать видимость нужных объектов, используйте в тэге <body> функцию setVisibility(). 6. function ShowVisibility(objectID) {...} Создайте функцию JavaScript, в которой применяются функции, определенные на шаге 3. В этом примере функция ShowVisibility() просто присваивает значения, возвращаемые функцией findVisibility(), переменным и затем отображает их значения в предупреждении. 7. onClick=" ShowVisibility ('object1')" Чтобы запустить функцию, созданную на шаге 6, добавьте обработчик событий и передайте ему ID объекта, к которому хотите обратиться. Если свойству visibility присвоено значение visible, то Netscape 4 распознает это свойство, хотя он хранит это значение как show, что является эквивалентом зна-

Рис. 12.22. В предупреждении указано положение верхнего края вырезанной области

Листинг 12.14. Функции findClipTop(), findClipRight(), findClipBottom(), findClipLeft(), findClipWidth() и findClipHeight() определяют отсекаемую область и границы отдельного объекта на странице

<html> <head> <script scr="findDOM.js"></script> <script> function setClip(objectID, clipTop, ->ClipRight, clipBottom,clipLeft) { var dom = findDOM(objectID,1); if (dom.clip.left) { dom.clip.top = clipTop; dom.clip.right = clipRight; dom.clip.bottom = clipBottom; dom.clip.left = clipLeft; } dom.clip = 'rect(' + clipTop + ' ' + ->clipRight + ' ' + clipBottom + ' ' ->+ clipLeft +')'; } function findClipTop(objectID) { var dom = findDOM(objectID,1);

Видимая область объекта 233 Листинг 12.14 (продолжение)

if (dom.clip.top) return dom.clip.top; if (dom.clip !=null) { var clip = findClipArray(dom.clip); return (clip[0]); } return (null); } function findClipRight(objectID) { var dom = findDOM(objectID,1); if (dom.clip.right) return dom.clip.right; if (dom.clip !=null) { var clip = findClipArray(dom.clip); return (clip[1]); } return (null); } function findClipBottom(objectID) { var dom = findDOM(objectID,1); if (dom.clip.Bottom) return dom.clip.Bottom; if (dom.clip !=null) { var clip = findClipArray(dom.clip); return (clip[2]); } return (null); } function findClipLeft(objectID) { var dom = findDOM(objectID,1); if (dom.clip.Left) return dom.clip.left; if (dom.clip !=null) { var clip = findClipArray(dom.clip); return (clip[3]); } return (null); } function findClipWidth(objectID) { var dom = findDOM(objectID,1); if (dom.clip.width) return dom.clip.width;

чения visible. Таким образом, при определении состояния видимости объекта нужно также искать и значение show, чтобы код работал во всех браузерах.

Видимая область объекта Зная высоту и ширину элемента, можно определить максимальную область, которую он занимает на экране (см. раздел «Размеры объекта»). Когда какая-либо часть элемента отсекается (см. раздел «Определение видимой части элемента» в главе 9), максимальная область сокращается, и на экране отображается лишь часть видимой области. С помощью JavaScript можно выяснить не только ширину и высоту видимой области, но и координаты верхнего, нижнего, левого и правого края отсекаемой части (рис. 12.22). Как и в случае с другими CSS-свойствами видимости, в Netscape 6 и Internet Explorer возникают трудности при чтении значений, связанных с отсекаемой частью, если они не установлены динамически. В листинге 12.14 и в разделе «Видимая область объекта» главы 13 показано, как избежать этих проблем и получить возможность менять отсекаемую часть объекта.

Обнаружение видимой области и границ объекта 1. <script scr="findDOM.js"></script> В любую функцию JavaScript, которая непосредственно обращается к объекту на экране, нужно включить код findDOM. Для этого добавьте внешний текстовый файл и затем импортируйте его на ту страницу, где он будет использоваться. 2. functionsetClip(objectID,state){...}

234 Среда, в которой вы работаете В сценарий JavaScript добавьте функцию setClip(), которая устанавливает начальную отсекаемую область объектов при первой загрузке станицы. Это позволяет обойти ограничения Internet Explorer 4/5/6 и Netscape 6. 3. function findClipArray(str){...} В сценарий JavaScript добавьте функцию findClipArray(). Она используется Internet Explorer, который хранит размеры отсекаемой области в символьном виде, а не в виде чисел. Функция переводит строку символов в масЛистинг 12.14 (продолжение) сив чисел, каждое число в массиве соответствует одному из размеров отсеобласти. ifкаемой (dom.clip !=null) { 4. function findClipTop(objectID) {...} var clip = findClipArray(dom.clip); return функции (clip[1] –findClipTop(), clip[3]); Добавьте } findClipRight(), findClipBottom(), return (null); } findClipLeft(). Все они выполняют о д н и и те же действия на разных сторонах function findClipHeight(objectID) { объекта ID объекта, к коvar dom и= используют findDOM(objectID,1); if (dom.clip.height) торому обращаются. ID передается в returnкак dom.clip.height; функцию переменная objectID. Таif (dom.clip { DOM. Затем ким образом !=null) создается var clip = findClipArray(dom.clip); функция использует DOM, чтобы поreturn (clip[2] – clip[0]); лучить размер отсекаемой области. Для } этого в (null); Netscape применяются свойства return clip.top, clip.left, clip.bottom, } clip.right. С помощью findClipArray() функции определяют function findClipArray(clipStr) { var clip = new Array(); отсекаемую область, затем они получаvarдоступ i; ют к массиву, используя 0, 1, 2, clipStr.index0f('('); 3i =для верхней, левой, нижней parseInt(clipStr.substring(i + 1, clipStr.length), 10); иclip[0] правой=сторон соответственно. i = clipStr.index0f('', i + 1); 5. function {...} + 1, clipStr.length), 10); clip[1] findClipWidth(objectID) = parseInt(clipStr.substring(i i = clipStr.index0f('', i + 1); В сценарий JavaScript добавьте функции clip[2] = parseInt(clipStr.substring(i findClipWidth() и findClipHeight(). + 1, clipStr.length), 10); i = clipStr.index0f('', i +они 1); задейПри обращении к объекту clip[3] = parseInt(clipStr.substring(i +1, clipStr.length), 10); ствуют его ID, который передается в return clip; функцию как переменная objectID. Та} ким образом создается DOM. Затем с помощью DOM функция получает высоту и ширину видимой области. Для

Видимая область объекта 235 Листинг 12.14 (окончание)

</script> <style type="text/css"> #object1 { position: absolute; top: 60px; left: 0px overflow: hidden; clip: rect(15 350 195 50); } </style> </head> <body onLoad="setClip('object1',15,350,195,50);"> <br><br>Clip Dimension || <a href="#" onClick="alert('Click on Top: ' + findClipTop('object1') + 'px')"> Top</a> | <a href="#" onClick="alert('Click on Left: ' + findClipLeft('object1') + 'px')"> Left</a> | <a href="#" onClick="alert('Click on Bottom: ' + findClipBottom('object1') + 'px')"> Bottom</a> | <a href="#" onClick="alert('Click on Right: ' + findClipRight('object1') + 'px')"> Right</a> | <a href="#" onClick="alert('Click on Width: ' + findClipWidth('object1') + 'px')"> Width</a> | <a href="#" onClick="alert('Click on Height: ' + findClipHeight('object1') + 'px')"> Height </a> <div id="object1"> <img scr="alice31.gif" width="379" height="480" border="0"> </div> </body> </html>

основы динамических технологий Почти весь DHTML основан на нескольких приемах, с помощью которых можно скрывать и снова отображать объекты, перемещать и изменять их. В большинстве случаев эти технологии основаны на изменении свойств позиционирования в CSS, то есть единственных общих для всех браузеров CSS-свойств, которые разрешается менять. В Netscape 4 невозможно получить доступ к каким-либо другим CSSсвойствам. В Netscape 6 и Internet Explorer 4 допустимо менять любые CSS-свойства (см. главу 15), но из-за Netscape 4 в DHTML, общем для браузеров, появляются ограничения. Однако, возможно, с выходом Netscape 6 предыдущая версия, Netscape 4, уйдет в прошлое.

Отображение и сокрытие объектов С помощью свойств, определяющих видимость элемента, можно указать, будет он виден на экране (visible) или нет (hidden) – см. раздел «Определение видимости элемента» в главе 9. С помощью JavaScript определяется не только текущее состояние видимости (см. раздел «Cостояние видимости объекта» в главе 12), но и предыдущее и последующее (листинг 13.1, рис. 13.1 и 13.2)

Отображение и сокрытие объектов 237 Листинг 13.1. Функции setVisibility() и toggleVisibility() изменяют состояние видимости отдельного объекта в окне браузера

<html> <head> <script scr="findDOM.js"></script> <script> function setVisibility(objectID,state) { var dom = findDOM(objectID,1); dom.visibility = state; } function toggleVisibility(objectID) { var dom = findDOM(objectID,1); state = dom.visibility; if (state == 'hidden' || state == ->'hide') dom.visibility = 'visible'; else { if (state == 'visible' || state == ->'show') dom.visibility = 'hidden'; else dom.visibility = 'visible'; } } </script> <style type="text/css"> #cheshireCat { position: absolute; top: 70px; left: 0px visibility: visible; } </style> </head> <body onLoad="setVisibility ->('cheshireCat','visible');"> <a href="javascript:void('')" ->onClick="setVisibility ->('cheshirecat', 'hidden');"> Hide the Cat</a> | <a href="javascript:void('')" ->onClick="setVisibility ->('cheshirecat', 'visible');"> Show the Cat</a> | <a href="javascript:void('')" ->onClick="toggleVisibility ->('cheshirecat');">

Изменение состояния видимости объекта 1. <script scr="findDOM.js"></script> В любую функцию JavaScript, которая непосредственно обращается к объекту на экране, следует включить код findDOM. Для этого добавьте внешний текстовый файл и затем импортируйте его на ту страницу, где он будет применяться (см. раздел «Использование общей для браузеров DOM» в главе 11). 2. f u n c t i o n setVisibility(objectID,state){...} В сценарий JavaScript добавьте функцию setVisibility(). При обращении к объекту она задействует его ID, который передается в функцию как переменная objectID. Таким образом создается DOM. Затем функция применяет этот ID для доступа к текущему свойству видимости, установленному для этого объекта, и изменяет его в зависимости от того состояния, которое вы определили при запуске функции из обработчика событий (см. шаг 6). 3. function toggleVisibility(objectID) {...} В сценарий JavaScript добавьте функцию toggleVisibility(). При обращении к объекту она использует его ID, Листинг 13.1 (окончание)

Change the Cat's Visibility?</a> <div id="cheshireCat"> <img scr="alice24.gif" width="640" ->height="435" border="0"> </div> </body> </html>

238 Основы динамических технологий который передается в функцию как переменная objectID. Таким образом создается DOM. Затем функция проверяет текущее состояние видимости и изменяет его на противоположное. 4. #cheshireCat{...} С помощью значений position, type и visibility установите ID объектов. 5. onLoad="..." Чтобы инициализировать видимость нужных объектов, используйте в тэге <body> функцию setVisibility(). Чтобы функция toggleVisibility() работала соответствующим образом, нужно установить начальную видимость. 6. onClick="setVisibility ('object1')" Чтобы запустить функцию, созданную на шаге 2, добавьте обработчик событий и передайте ему ID объекта, к которому хотите обратиться. 7. onClick="setVisibility ->('cheshireCat','hidden');" Чтобы запустить функцию, созданную на шаге 2, добавьте обработчик событий и передайте ему ID объекта, к которому вы хотите обратиться, и состояние видимости, которое требуется присвоить объекту. 8. <divid="cheshireCat">...</div> Установите CSS-слои. Заметьте, что в качестве возможных значений состояния определяются не только значения visible или hidden, но и значения show или hide. Netscape 4 принимает стандартные значения visible или hidden, но он записывает их как show или hide,

Рис. 13.1. До того момента, как посетитель нажмет на ссылку, кот остается на экране

Рис. 13.2. После того как посетитель нажал на ссылку, Чеширский кот исчез

и такими они остаются на выходе. Возможность установки состояния видимость важна для создания выпадающих меню (см. главу 24), показа слайдов (см. главу 25) и для уменьшения четкости HTMLтекста (см. главу 26).

Перемещение объектов 239 Листинг 13.2. Функция moveObject() меняет положение отдельного объекта в окне браузера

<html> <head> <script scr="findDOM.js"></script> <script> function moveObjectTo(objectID,x,y) { var domStyle = findDOM(objectID,1); ->domStyle.left = x; domStyle.top = y; } </script> <style type="text/css"> #madHatter { position: absolute; top: 30px; left: 30px; } </style> </head> <body> <a href="javascript:void('')" ->onMouseOver="moveObjectTo ->('madHatter',200,200);" onMouseOut="moveObjectTo ->('madHatter',30,30);"> ->I want a fresh cup...</a> <div id="madHatter"> <img scr="alice39.gif" width="200" ->height="163" border="0"> </div> </body> </html>

Перемещение объектов Объект можно располагать на экране, используя CSS (см. раздел «Определение положения по отношению к левому верхнему углу» в главе 8), затем с помощью JavaScript легко выяснить положение объекта (см. раздел «Левая и верхняя позиции объекта» в главе 12). Но чтобы страница стала действительно динамической, нужно также уметь перемещать объекты по экрану, меняя их положение (листинг 13.2 и рис. 13.3).

Изменение положения объекта 1. <script scr="findDOM.js"></script> В любую функцию JavaScript, которая непосредственно обращается к объекту на экране, необходимо включить код findDOM. Для этого добавьте внешний текстовый файл и затем импортируйте его на ту страницу, где он будет использоваться. 2. function moveObjectTo(objectID,x,y) {...} В сценарий JavaScript добавьте функцию moveObjectTo(). При обращении к объекту она применяет его ID, который передается в функцию как переменная objectID. Таким образом создается DOM. Затем функция использует значения x и y для того, чтобы изменить свойства left и top. 3. #madHatter{...} С помощью значений position, top и left установите ID объектов.

240 Основы динамических технологий 4. onMouseOver="moveObjectTo ('madHatter',200,200);" Чтобы запустить функцию, созданную на шаге 2, добавьте обработчик событий и передайте ему ID объекта, к которому вы хотите обратиться, и его новые координаты. 5. <divid="madHatter">...</div> Установите CSS-слои. Заметьте, что для определения левого и верхнего положения объекта использовались свойства top и left. Однако в каждом браузере есть свое ключевое слово, которое служит для нахождения значений этих свойств. В Netscape 4 – top и left, в Netscape 6 – offsetLeft и offsetTop, в Internet Explorer 4/5 – pixelTop и pixelLeft. Значения свойств top и left можно устанавливать и с помощью указанных ключевых свойств, но лучше придерживаться обычных top и left. Перемещение объектов подробно обсуждается в части 4 этой книги, где будет показано, как создавать всплывающие меню (см. главу 24), собственные полосы прокрутки (см. главу 25) и плавающие объекты (см. главу 26).

Рис. 13.3. Болванщик ищет новую чашку чая

Перемещение объекта на заданное расстояние 241 Листинг 13.3. Функция moveObjectBy() меняет положение отдельного объекта в окне браузера на определенную величину каждый раз, когда указатель мыши наводится на ссылку

<html> <head> <script scr="findDOM.js"></script> <script> function moveObjectBy(objectID,deltaX, ->deltaY) { var domStyle = findDOM(objectID,1); var dom = findDOM(objectID,0); if (domStyle.pixelLeft) { domStyle.pixelLeft += delataX; domStyle.pixelTop += delataY; } else { if (dom.offsetLeft !=null) { var plusLeft = dom.offsetLeft; var plusTop = dom.offsetTop; domStyle.left=deltaX + plusLeft; domStyle.top=deltaY + plusTop; } else dom.moveBy(deltaX,deltaY); } } </script> <style type="text/css"> #madHatter { position: absolute; top: 30px; left: 30px; } </style> </head> <body> <a href="javascript:void('')" ->onMouseOver="moveObjectBy ->('madHatter',75,100);" ->onMouseOut="moveObjectBy ->('madHatter',-25,-55);"> I want a ->fresh cup... </a> <div id="madHatter"> <img scr="alice39.gif" width="200" ->height="163" border="0"> </div> </body> </html>

Перемещение объекта на заданное расстояние Уметь перемещать объект из одной точки в другую весьма полезно, но необходимо точно знать место, куда требуется переместить объект. Часто же нужно просто передвинуть объект на заданное расстояние (листинг 13.3 и рис. 13.4).

Перемещение объекта 1. <script scr="findDOM.js"></script> В любую функцию JavaScript, которая непосредственно обращается к объекту на экране, необходимо включить код findDOM. Для этого добавьте внешний текстовый файл и затем импортируйте его на ту страницу, где он будет использоваться. 2. functionmoveObjectBy ->(objectID,deltaX,deltaY){...} В сценарий JavaScript добавьте функцию moveObjectBy(). При обращении к объекту она применяет его ID, который передается в функцию как переменная objectID. Таким образом создается DOM. Затем функция заменяет значения свойств left и top на значения deltaX и deltaY. В Internet Explorer устанавливаются значения p i x e l T o p и pixelLeft. В Netscape 6 задаются положения top и left, но их нужно добавить и в текущее положение объекта. В Netscape 4 положения не определяются непосредственно, а используется встроенная функция moveBy(). 3. #madHatter{...}

242 Основы динамических технологий С помощью значений position, top и left установите ID объектов. 4. onMouseOver="moveObjectBy ->('madHatter',75,100);" Чтобы запустить функцию, созданную на шаге 2, добавьте обработчик событий и передайте ему ID объекта, к которому вы хотите обратиться, и количество пикселов, на которое нужно переместить объект. С помощью положительных значений объект передвигается вниз и вправо, а с помощью отрицательных – вверх и влево. 5. <divid="madHatter">...</div> Установите CSS-слои. В Netscape 6 лучше не добавлять приращение непосредственно к свойствам left и top. В Internet Explorer 4/5/6 для добавления значений delta к текущей позиции объекта можно использовать +=, в Netscape 4 – функцию moveBy(), но в Netscape 6 придется вычислять текущее положение объекта и добавлять значения delta, а затем присваивать полученные значения свойствам left и top. Для установления позиции элемента проще использовать свойства top и left, но если вы хотите переместить объект на определенное расстояние, придется использовать pixelLeft и pixelTop. Иначе Internet Explorer перепутает эти значения, и объект

Рис. 13.4. Болванщик передвигается с места на место в поисках новой чашки чая

Перемещение объектов в 3D 243 будет выступать за границы экрана.

Перемещение объектов в 3D Все позиционированные элементы можно разместить в порядке стека (см. раздел «Элементы в порядке стека (3D-позиционирование)» в главе 8), а чтобы выяснить порядок элементов и затем менять его, используется JavaScript в z-индексе (см. раздел «Z-индекс объекта» в главе 12) – листинг 13.4, рис. 13.5 и 13.6.

Определение 3D-позиции объекта

Рис. 13.5. Порядок объектов при первой загрузке страницы

Рис. 13.6. Изображения королевы и Алисы теперь находятся на переднем плане

1. <script scr="findDOM.js"></script> В любую функцию JavaScript, которая непосредственно обращается к объекту на экране, следует включить код findDOM. Для этого добавьте внешний текстовый файл и затем импортируйте его на ту страницу, где он будет использоваться. 2. var prevObjectID=null; var prevLayer=0; В JavaScript инициализируйте две переменные: – prevObjectID. В ней хранится ID предыдущего выбранного объекта; – prevLayer. В ней хранится z-индекс предыдущего выбранного объекта. 3. functionsetLayer(objectID,layerNum) {...} В сценарий JavaScript добавьте функцию setLayer(), которая присваивает свойству z-index номер указанного уровня. 4. function findLayer(objectID) {...} В код JavaScript добавьте функцию findLayer(). При обращении к объекту она применяет его ID, который передается в функцию как переменная

244 Основы динамических технологий objectID. Таким образом создается DOM. Затем функция использует ID для того, чтобы получить доступ к свойству z-index, и возвращает это значение. 5. functionswapLayer(objectID) {...} В сценарий JavaScript добавьте функцию swapLayer(). Она уменьшает z-индекс предыдущего выбранного уровня (если таковой есть) и перемещает выбранный слой вверх. 6. #object{...}

Листинг 13.4. В результате совместной работы функций swapLayer(), setLayer() и findLayer() объект перемещается на верхний уровень стека

<html> <head> <script scr="findDOM.js"></script> <script> var prevObjectID = null; var prevLayer = 0; function setLayer(objectID,layerNum) { var dom = findDOM(objectID,1); var dom.zIndex = layerNum; } function findLayer(objectID) { var dom = findDOM(objectID,1); if (dom.zIndex != null) return dom.zIndex; return (null); } function swapLayer(objectID) { if (prevObjectID !=null) setLayer(prevObjectID,prevLayer) prevLayer = findLayer(objectID); prevObjectID = objectID; setLayer(objectID,1000); } </script> <style type="text/css"> #object1 { position: absolute; border: gray solid 2px; z-index: 3; top: 175px; ->left: 255px } #object2 { position: absolute; border: gray solid 2px; z-index: 2; top: 100px; ->left: 170px } #object3 { position: absolute; border: gray solid 2px; z-index: 1; top: 65px; ->left: 85px }

Перемещение объектов в 3D 245 С помощью значений position и zindex установите ID объектов.

7. onLoad="..." Чтобы инициализировать z-индекс всех нужных объектов, в тэге <body> используйте функцию setLayer(). 8. <divid="object1">...</div> Установите CSS-слои.

9. onClick="swapLayer('object1')" Чтобы запустить функцию swapLayer(), добавьте в слой обработчик событий. Определение z-индексов в тэге <body> с помощью обработчика событий onLoad может показаться скучным занятием, если вы уже установили z-индекс в CSS. Но Internet Explorer 5/6 и Netscape 6 распо-

Листинг 13.4 (окончание)

#object4 { position: absolute; border: gray solid 2px; z-index: 0; top: 5px; left:5px } </style> </head> <body onLoad="setLayer('object1',3); setLayer('object2',2); setLayer('object3',1); ->setLayer('object4',0);"> <div id="object1"> <a href="javascript:void('')" onClick="swapLayer('object1');"> <img scr="alice22.gif" width="100" height="147" border="0"></a> -><br clear="all"> </div> <div id="object2"> <a href=" javascript:void('')" onClick="swapLayer('object2');"> <img scr="alice32.gif" width="140" height="201" border="0"></a> -><br clear="all"> </div> <div id="object3"> <a href=" javascript:void('')" onClick="swapLayer('object3');"> <img scr="alice15.gif" width="150" height="198" border="0"></a> -><br clear="all"> </div> <div id="object4"> <a href=" javascript:void('')" onClick="swapLayer('object4');"> <img scr="alice29.gif" width="200" height="236" border="0"></a> -><br clear="all"> </div> </body> </html>

246 Основы динамических технологий знают z-индекс только в том случае, если он установлен с помощью JavaScript. Возможность установления и переопределения z-индекса оказывается важной при создании теней (см. главу 26).

Прокрутка Web-страницы Обычно считается, что пользователь прокручивает страницу с помощью встроенных полос прокрутки, которые находятся справа и снизу в окне или фрейме. Вы уже знаете, как определить положение прокрутки Web-страницы с помощью JavaScript (см. раздел «Положение прокрутки страницы» в главе 12). Используя простой прием JavaScript, можно установить горизонтальную или вертикальную прокрутку страницы (листинг 13.5, рис. 13.7 и 13.8).

Рис. 13.7. С помощью элементов управления Down и Over страница прокручивается таким образом, что мы можем видеть разные ее части

Добавление прокрутки Web-страницы 1. varisIE=0; Чтобы выяснить, совместим ли браузер с Internet Explorer, используйте метод определения браузера. 2. function scrollPageTo(x,y) {...} В сценарий JavaScript добавьте функцию scrollPageTo(). Если браузер совместим с Internet Explorer, то функция применяет свойства scrollLeft и scrollRight, чтобы прокрутить страницу в точку с координатами (x,y). В противном случае используется встроенная в Netscape функция scrollTo(). 3. #overHere{...} С помощью значений position, left и top установите ID объектов. В этом примере определено два объекта: один в са-

Рис. 13.8. Прокрутив страницу, посетитель видит, как поет Болванщик. Чтобы вернуться к начальному положению, можно нажать Back. Ползунок на нижней полосе прокрутки переместился влево

Прокрутка Web-страницы 247 Листинг 13.5. Функция scrollPageTo() передвигает Web-страницу по вертикали и/или горизонтали в зависимости от желания пользователя

<html> <head> <script> var isIE = 0; if (navigator.appName.index0f('Microsoft ->Internet Explorer') !=-1) {isIE = 1;} function scrollPageTo(x,y) { if (isIE) { document.body.scrollLeft = x; document.body.scrollTop = y; return; } else { scrollTo(x,y); return; } } </script> <style type="text/css"> #overHere { position: absolute; top: 10px; left: 2000px; width: 1000px; z-index: 100; visibility: visible; } #downHere { position: absolute; top: 2000px; left: 10px; height: 1000px; z-index: 100; visibility: visible; } </style> </head> <body> <a href="javascript:scrollPageTo ->(0,1990)">v Down</a> |<a href= ->"javascript:scrollPageTo(1990,0)" ->Over &gt; <br style="clear:both"> -><img scr="alice25.gif" width="300" ->height="228" border="0"></a> <div id="downHere">

мой нижней части страницы, другой – справа. Теперь можно применить функцию scrollPageTo(). 4. <ahref="javascript:scrollPageTo ->(0,1990)">...</a> Чтобы запустить функцию scrollPageTo(), определите ссылку и передайте функции координаты того места, куда требуется прокрутить страницу. Помните, что нет необходимости применять обработчик событий, чтобы запустить эту функцию, так как она не обращается к DOM. В этом примере страница прокручивается после того, как пользователь совершит какое-либо действие. Используя другой обработчик событий (например, onLoad), можно сделать так, что страница будет прокручиваться и без непосредственной команды пользователя. Однако при этом нужно быть осторожным: если страница вдруг начнет перемещаться из стороны в сторону, это может запутать или даже заставит волноваться посетителя вашего сайта. Листинг 13.5 (окончание)

<a href="javascript:scrollPageTo ->(0,0)">^ Back to Top</a> <p><a href="javascript:scrollPageTo ->(0,0)"><img scr="alice27.gif" ->width="200" height="180" ->border="0"></a></p> </div> <div id="overHere"> <a href="javascript:scrollPageTo ->(0,0)">&gt; Back to Left</a><br ->style="clear:both"> <p><img scr="alice26.gif" width="179" ->height="200" border="0"></p> </div> <br clear="all"> </body> </html>

248 Основы динамических технологий В Netscape 4 (Windows) и Netscape 6 (все версии) есть особенность, из-за которой описанный метод не работает во фрейме со скрытыми полосами прокрутки (scrolling="no"). В этом случае не только убираются с экрана полосы прокрутки, но и весь фрейм невозможно прокручивать даже с помощью JavaScript.

Видимая область объекта Устанавливая размеры отсекаемой области, мы определяем ту часть объекта, которая будет видна на экране (см. раздел «Определение видимой части элемента» в главе 9). Если с объектом не производить

Рис. 13.9. Чтобы узнать, почему улыбается Чеширский кот, проведите указателем мыши над ссылкой

Рис. 13.10. Чеширский кот смеется над тем, что Король не может приказать палачам отрубить голову, у которой нет туловища. И это очень злит Королеву

Видимая область объекта 249 Листинг 13.6. Функция setClip() перерисовывает границы отсекаемой области объекта

<html> <head> <script scr="findDOM.js"></script> <script> function setClip(objectID,clipTop, ->clipRight,clipBottom,clipLeft) { var dom = findDOM(objectID,1); if (dom.clip.left) { dom.clip.top = clipTop; dom.clip.right = clipRight; dom.clip.bottom = clipBottom; dom.clip.left = clipLeft; } else { dom.clip = 'rect(' + clipTop ' ' + ->clipRight + ' ' + clipBottom + ' ->' + clipLeft +')'; } } </script> <style type="text/css"> #cheshireCat { position: absolute; top: 60px; left: 0px; overflow: hidden; clip: rect(15 350 195 50); } </style> </head> <body> <a href="javascript:void('')" ->onMouseOver="setClip('cheshireCat', ->35,320,400,70);" onMouseOut="setClip ->('cheshireCat',15,350,195,50);"> What is the Cheshire Cat smiling ->about? </a> <div id="cheshireCat"> <img scr="alice31.gif" width="379" ->height="480" border="0"> </div> </body> </html>

никаких действий, он остается видимым. Но, отсекая какую-либо часть объекта, мы устанавливаем степень его видимости на экране. Для определения отсекаемой области используется JavaScript (см. раздел «Видимая область объекта» в главе 12). К тому же с помощью DHTML можно легко изменять отсекаемую область (листинг 13.6, рис. 13.9 и 13.10).

Изменение видимой области объекта 1. <script scr="findDOM.js"></script> В любую функцию JavaScript, которая непосредственно обращается к объекту на экране, следует добавить код findDOM. Для этого создайте внешний текстовый файл и затем импортируйте его на ту страницу, где он будет использоваться. 2. functionsetClip(objectID,clipTop, ->clipRight,clipBottom,clipLeft) {...} В сценарий JavaScript добавьте функцию setClip(). При обращении к объекту она использует его ID, который п е р е д а е т с я в функцию как переменная objectID. Таким образом создается DOM. Затем функция заменяет отсекаемую область. В Netscape 4 и 6 это делается с помощью свойств отсекаемой области top, right, bottom и left, а в Internet Explorer 4/5 свойство clip применяется непосредственно. 3. #cheshireCat {...} Установите ID объектов и добавьте начальную отсекаемую область. 4. <divid="cheshireCat">...</div> Установите CSS-слои. 5. onMouseOver="setClip ->('cheshireCat',35,320,400,70)"

Развитые динамические технологии Помимо основных описанных здесь приемов существуют и другие методы, с помощью которых создается динамический интерфейс Web-сайта. В некоторых из них используется объектная модель документа (DOM), описанная в главе 11, в других – специальные приемы на JavaScript, позволяющие лучше управлять сайтом.

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

Рис. 14.1. Щелкните по картинке, чтобы остановить ее мигание

Повторный запуск функции 251 Листинг 14.1. В функции setUpAnnoyingFlash() инициализируются переменные, которые затем используются в функции annoyingFlash(). Последняя вызывается снова и снова, изображение появляется и исчезает с интервалом в одну секунду до тех пор, пока пользователь не щелкнет по картинке

<html> <head> <script scr="findDOM.js"></script> <script> theDelay = 1000; var domStyle = null; var state = null; var toStop = 0; function setUpAnnoyingFlash ->(objectID,onOffon) { if (onOffon == 1) { toStop = 1; domStyle = findDOM(objectID,1); domStyle.visibility = 'visible'; state = 'visible'; annoyingFlash(); } else toStop = 0; } function annoyingFlash() { if (toStop == 1) { if (state == 'hidden' || state == ->'hide') domStyle.visibility = 'visible'; else { if (state == 'visible' || state ->== 'show') domStyle.visibility = 'hidden'; else domStyle.visibility = 'visible'; } state = domStyle.visibility; setTimeout ('annoyingFlash()', ->theDelay); } else { domStyle.visibility = 'visible'; return; } } </script>

Создание рекурсивной функции 1. theDelay=1000; Инициализируйте глобальные переменные: – theDelay устанавливает промежуток времени (в миллисекундах) между двумя запусками функции. Значение, равное 1000 мс, соответствует задержке в одну секунду; – domStyle записывает DOM; – state сохраняет текущее состояние видимости объекта, на которое действует функция; – toStop. Если эта переменная равна 1, то функция перезапускается, чего не происходит, если переменной присваивается значение 0. 2. functionsetUpAnnoyingFlash(objectID, ->onOffon){...} В сценарий JavaScript добавьте функцию setUpAnnoyingFlash(). Если переменная onOffon равна 1, переменной toStop присваивается значение 1 (функция перезапускается). При обращении к объекту эта функция использует его ID, который передается в функцию как переменная objectID. Таким образом создается DOM (см. раздел «Построение общей DOM» в главе 11). Затем вызывается функция annoyingFlash(). Если переменная onOffon равна 0, переменной toStop присваивается значение 0 и функция annoyingFlash() не вызывается. 3. functionannoyingFlash(){...} В JavaScript добавьте функцию annoyingFlash(). Она вызывается функцией setUpAnnoyingFlash() на шаге 2. Если переменная toStop равна 1, то состояние видимости изменяется: объект отображается на экране, если был невидим, и наоборот. Затем функция перезапускается

252 Развитые динамические технологии при помощи метода setTimeOut(). Функция annoyingFlash() вызывается до тех пор, пока переменная toStop не становится равной 0. В этом случае свойству visibility присваивается значение visible, и функция больше не вызывается. 4. #cheshireCat{...} Установите ID объектов с помощью определения position и visibility. 5. onLoad="setUpAnnoyingFlash ->('cheshireCat',1);" Чтобы вызвать функцию, созданную на шаге 2, добавьте обработчик событий и передайте ему ID того объекта, который будет появляться и исчезать на экране. Также добавьте 1, если хотите, чтобы объект мерцал, и 0 – в противном случае. 6. <divid="cheshireCat">..</div> Установите CSS-слои.

Листинг 14.1 (окончание)

Зачем использовать метод setTimeOut()? Заметьте, что остановить мигание картинки, щелкнув по ней, можно, только если ее состояние – visible. Ссылка появляется на странице лишь в том случае, если изображение видимое.

Если вы перезапускаете функцию с помощью метода setTimeOut(), то у вас может возникнуть вопрос: «Почему бы просто не вызвать функцию рекурсивно?» Этого не стоит делать по двум причинам: при рекурсивном запуске функции в Netscape 4 возникает ошибка, которая приводит к сбою в работе всего браузера; с помощью setTimeOut() легко управлять интервалом между запусками функции. Это весьма удобно в том случае, если требуется, чтобы функция была вызвана повторно через определенное время.

Передача события в функцию 253

Передача события в функцию Все события, происходящие в окне браузера (см. раздел «Обнаружение события» в главе 11), генерируют соответствующую информацию: какое событие произошло, в какой части окна и каким образом (рис. 14.2). Эти сведения можно передать непосредственно в функцию JavaScript. Таким образом, функция получит доступ к объекту, не создавая общую DOM (листинг 14.2). Как и в случае со всеми остальными возможностями Web-дизайна, Internet Explorer и Netscape по-разному осуществляют передачу события. Однако эти методы легко комбинируются.

Передача события в функцию JavaScript Рис. 14.2. После того как вы нажмете на изображение саламандры, появится предупреждение о том, что обнаружен объект [object]

Листинг 14.2. Функция passItOn() получает событие и затем отображает результат в предупреждении, где указывается тип события

<html> <head> <script> function passItOn(evt) { if (evt) { alert (evt); return; } } </script> </head>

1. functionpassItOn(evt){...} В сценарий JavaScript добавьте функцию passItOn(). Ей передается переменная evt, затем на экране отображается диалоговое окно с предупреждением. Переменная evt представляет собой DOM для объекта, в котором произошло событие. В Internet Explorer она генерируется автоматически, а в Netscape создается с помощью свойства event. 2. onClick="passItOn(event)" Для запуска функции добавьте один или несколько обработчиков событий. Чтобы получить доступ к свойству event в Netscape, нужно передать функции значение event. Почему нельзя всегда использовать переменную evt вместо создания общей DOM? Мой опыт показывает, что эта переменная в разных браузерах ведет себя непредсказуемо, особенно если вы пытаетесь получить доступ к CSS-стилям (см. ниже).

254 Развитые динамические технологии

Глобальный обработчик событий Для каждого объекта на Web-странице существует событие (см. раздел «Обработчики событий» в главе 11). Но иногда нужно установить результат некоторого события, не имеющего отношения к объекту. Это можно сделать как в Internet Explorer, так и в Netscape (рис. 14.3 и листинг 14.3).

Создание глобального обработчика событий 1. <scriptscr="findDOM.js"></script> Мы не будем использовать код findDOM.js для создания общей DOM, но воспользуемся этим файлом, чтобы обнаружить DHTML-браузер (см. раздел «Использование общей для браузеров DOM» в главе 11). 2. varisNS=0; В сценарий JavaScript добавьте метод определения браузера (см. раздел «Название и версия браузера» в главе 12). 3. functiondefaultEvents(){...} В код JavaScript добавьте функцию defaultEvents(). Эта функция создает глобальный обработчик событий, который будет использоваться в Netscape. Затем определяются функции, которые начнут выполняться, если где-либо в окне браузера произойдет событие. Обработчики событий перечислены в разделе «Обработчики событий» в главе 11. Вы можете выбрать любой из них. 4. functionerrorOn(){...}

Листинг 14.2 (окончание)

<body> <div id="object1"> <a href="javascript:void('')" ->onClick="passItOn(event)"> <img scr="alice13.gif" width= ->"174" height="480" border="0"> </a> </div> </body> </html>

Рис. 14.3. Не нажимайте на картинку! Я вас предупредил

Глобальный обработчик событий 255 В сценарий JavaScript добавьте функции, которые будут вызываться, когда встретятся события, описанные в функции из шага 2. В этом примере функции errorOn() и validate() запускаются в тот момент, когда в окне браузера происходят события onClick и onMouseOut. 5. onLoad="defaultEvents()"

Чтобы запустить функцию, созданную на шаге 3, добавьте в тэг <body> обработчик событий.

Листинг 14.3. Функция defaultEvents() определяет глобальные события, которые срабатывают независимо от того, где и когда они произошли

<html> <head> <script scr="findDOM.js"></script> <script> var isNS = 0; var isIE = 0; if (navigator.appName.index0f('Netscape') != -1) {isNS = 1;} else { if (navigator.appName.index0f('Microsoft Internet Explorer') != -1) {isIE = 1;} } function defaultEvents() { if (isNS) { document.captureEvents(Event.CLICK || Event.MOUSEOUT) } if (isDHTML) { document.onClick = ErrorOn; document.onMouseOut = validate; } } function ErrorOn(){ alert('Please do not click here again'); } function validate(){ alert('Where do you think you are going?'); } </script> </head> <body onLoad="defaultEvents()"> <img scr="alice34.gif" width="409" height="480" border="0"></a> </div> </body> </html>

256 Развитые динамические технологии

Анимационные объекты Когда говорят о динамических технологиях, обычно представляют себе объекты, не просто перемещающиеся из точки в точку (см. раздел «Перемещение объекта на заданное расстояние» в главе 13), а плавно передвигающиеся по экрану (рис. 14.4). Используя рекурсивную функцию (см. раздел «Повторный запуск функции»), можно заставить позиционированный объект (см. раздел «Тип позиционирования» в главе 8) плавно передвигаться по экрану (листинг 14.4).

Рис. 14.4. Болванщик быстро передвигается по экрану

Листинг 14.4. Функция startAnimate() выясняет начальное левое верхнее положение объекта, устанавливает DOM и запускает рекурсивную функцию animateObject(). Она изменяет положение объекта шаг за шагом до тех пор, пока он не достигнет конечной точки

<html> <head> <script scr="findDOM.js"></script> <script> var animaeDelay = 5; var domStyle; var fX = null; var fY = null; function findLeft(objectID) { var domStyle = findDOM(objectID,1); var dom = findDOM(objectID,0); if (domStyle.left) return domStyle.left; if (domStyle.pixelLeft) return domStyle.pixelLeft; if (domStyle.offsetLeft) return domStyle.offsetLeft; return (null); }

Анимационные объекты 257 Листинг 14.4 (продолжение)

Создание анимационного объекта 1. animaeDelay=5; Инициализируйте глобальные переменные: – animaeDelay устанавливает промежуток времени между рекурсивными запусками функции. Чем больше число, тем медленнее объект скользит по экрану. Однако в этом случае достигается не самый лучший анимационный эффект; – domStyle записывает DOM; – fX сохраняет конечное левое положение объекта; – fY записывает конечное верхнее положение объекта. 2. functionfindLeft(objectID){...} В сценарий JavaScript добавьте функции findLeft() и findTop() (см. раздел «Левая и верхняя позиции объекта» в главе 12). 3. functionstartAnimate(objectID,x,y) ->{...} В код JavaScript добавьте функцию startAnimate(), в которой запоминается конечное положение объекта (fX,fY) и вычисляется его текущее положение (cX,cY). При обращении к объекту функция использует его ID, который передается в нее как переменная objectID. Таким образом создается DOM. Затем эта функция вызывает функцию animateObject() и передает ей текущие координаты объекта (cX,cY).

258 Развитые динамические технологии 4. functionanimateObject(cX,cY){...} В сценарий JavaScript добавьте функцию animateObject(), которая вызывается из функции startAnimate(), определенной на шаге 3. Она уменьшает или увеличивает на единицу значения координат текущего положения объекта (в зависимости от того, больше или меньше эти величины значений координат конечного положения) и устанавливает новое положение. Затем функция перезапускается, и все начинается сначала (сложение/вычитание, перемещение, сложение/вычитание, перемещение и т.д.). Она работает до тех пор, пока текущие координаты (cX,cY) не становятся равными координатам конечного положения (fX,fY), которые были определены на шаге 2. 5. #madHatter{...} Установите ID объектов с помощью значений position, top и left. 6. onLoad="startAnimate ->('madHatter',200,200)" Чтобы вызвать функцию, созданную на шаге 3, добавьте обработчик событий и передайте ему ID объекта, который будет перемещаться по экрану, и координаты его конечного положения. 7. <divid="madHatter">...</div> Установите CSS-слои.

Листинг 14.4 (окончание)

Нахождение положения указателя мыши 259

Нахождение положения указателя мыши

Рис. 14.5. Когда посетитель щелкает мышью в окне браузера, появляются координаты указателя мыши

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

Определение положения указателя мыши в окне браузера 1. functionfindXCoord(evt){...} В сценарий JavaScript добавьте функции findXCoord() и findYCoord(). Когда происходит событие, они возвращают координаты указателя мыши (в пикселах). Метод (в Internet Explorer используются x и y, а в Netscape – pageX и pageY) задается с помощью способа определения возможностей браузера (листинг 14.5).

Листинг 14.5. Когда в окне браузера происходит событие, функции findXCoord() и findYCoord() выясняют координаты указателя мыши

<html> <head> <script> function findXCoord(evt) { if (evt.x) return evt.x; if (evt.pageX) return evt.pageX; }

260 Развитые динамические технологии 2. onClick="alert('Left=' ->+findXCoord(event)+'pxTop=' ->+findYCoord(event))+'px'"> Чтобы вызвать функцию, описанную на шаге 2, добавьте обработчик событий. Область, в которой функция производит поиск координат указателя мыши, зависит от местоположения обработчика событий. Если он находится в тэге <body>, то координаты указателя можно определить в любом месте экрана. Если он содержится в тэге <a>, то координаты указателя устанавливаются только внутри области ссылки. В Netscape 4 событие onClick можно генерировать только в тэге <a>. Поэтому в примере этот браузер игнорирует onClick в тэге <body> и показывает координаты указателя мыши только в том случае, если пользователь щелкнет по картинке.

Листинг 14.5 (окончание)

function findYCoord(evt) { if (evt.y) return evt.y; if (evt.pageY) return evt.pageY; } </script> </head> <body onClick="alert('Left = ' + ->findXCoord(event) + 'px Top = ' + ->findYCoord(event)) + 'px'"> <div id="object1"> <a href="javascript:void('')" ->onClick="alert('Left = ' + ->findXCoord(event) + 'px Top = ' + ->findYCoord(event)) + 'px'"> <img scr="alice13.gif" ->width="174" height="480" ->border="0"> </a> </div> </body> </html>

Идентификация объекта на экране 261

Идентификация объекта на экране

Рис. 14.6. Можно выбрать любое изображение Алисы

Ранее в разделе «Передача события в функцию» было показано, как использовать значение evt для нахождения объекта, с которым связано начало события. DHTML позволяет задействовать браузер для определения ID объекта, в котором произошло событие (рис. 14.6). Эта задача очень просто решается в Internet Explorer и Netscape 6, так как имя объекта является частью события (листинг 14.6). Решение этой задачи в Netscape 4 займет больше времени. Чтобы функция заработала, придется воспользоваться слоями (см. главу 16).

Листинг 14.6. Функция findObject() находит ID или имя объекта, в котором произошло запустившее ее событие

<html> <head> <script> var name = null; function findObject(evt) { if (document.layers) { var testObj; var xPos = evt.pageX; var yPos = evt.pageY; for (var i = document.layers.length – 1; i >= 0; i–) { testObj = document.layers[i] if ((xPos > testObj.left) && (xPos < testObj.left + testObj.clip.width) && (yPos > testObj.top) && (yPos < testObj.top + testObj.clip.height)) { objectID = testObj.name; alert('You clicked' + objectID + '.'); return; } } } else { objectID = evt.target.name; alert('You clicked' + objectID + '.'); return; }

262 Развитые динамические технологии

Определение элемента, в котором произошло событие 1. functionfindObject(evt){...} В сценарии JavaScript добавьте функцию findObject() в заголовок документа. В этом сценарии определяются CSS-элементы, в которых произошло событие. Затем на экран выводится сообщение, с указанием найденного элемента. Функция состоит из двух частей. Одна используется в Netscape 4, другая – в Internet Explorer и Netscape 6: – if (document.layers) {...}. Если код работает в Netscape 4, то функция определяет положение указателя мыши и затем проверяет каждый слой в массиве слоев (в списке слоев, которые находятся в окне), определяя, какой из них находится под указателем; – else {...}. Если код работает в Internet Explorer, выясняется имя нужного объекта, то есть имя элемента, в котором произошло событие. 2. #alice1{...} Задайте CSS-элементы с помощью свойств стиля. В этом примере определяются три картинки (alice1, alice2 и alice3), и у каждой из них есть уникальный ID. 3. onClick="findObject(event)" Чтобы вызвать функцию, созданную на шаге 1, добавьте обработчик событий и передайте ему параметр события для Netscape 4. Заметьте, что имя объекта определяется в тэге <image>, а ID – в тэге <div>. Netscape использует ID действительной картинки, а Internet Explorer – ее имя. Чтобы код работал во всех браузерах, лучше включать в него как имя объекта, так и его ID.

Листинг 14.6 (окончание)

return; } </script> <style type="text/css"> #alice1 { position: absolute; top: 5px; left: 5px; visibility: visible } #alice2 { position: absolute; top: 150px; left: 200px; visibility: visible } #alice3 { position: absolute; top: 5px; left: 300px; visibility: visible } </style> </head> <body> <div id="alice1"> <a href="javascript:void('')" ->onClick="findObject(event)"> <img scr="alice04.gif" ->width="301" height="448" ->border="0" name="alice1"> </a> </div> <div id="alice2"> <a href="javascript:void('')" ->onClick="findObject(event)"> <img scr="alice22.gif" ->width="329" height="482" ->border="0" name="alice2"> </a> </div> <div id="alice3"> <a href="javascript:void('')" ->onClick="findObject(event)"> <img scr="alice30.gif" ->width="353" height="480" ->border="0" name="alice3"> </a> </div> </body> </html>

Управление содержанием во фреймах 263

Управление содержанием во фреймах

Рис. 14.7. Кролик может быть в разных фреймах, но DOM находит его и заставляет бежать

Листинг 14.7. Эта версия сценария для общей DOM, findDOMFrame.js, позволяет передавать функции имя фрейма. Затем функция создает DOM для объекта в определенном фрейме

Чтобы управлять объектами в одном фрейме, можно использовать JavaScript (рис. 14.7). Трудности возникают, когда вы создаете общую для браузеров DOM, которой требуется найти путь к элементу другого фрейма. Это похоже на добавление кода страны в адрес (см. раздел «DOM – путеводитель по Web-странице» в главе 11). Вам нужно создать еще одну версию findDOM.js, которая называется findDOMFrame.js. Функция не обращается к объекту в том же самом документе, а ищет объект в документе другого фрейма. Это означает, что функции необходимо передать не только имя объекта, который следует изменить, но и имя фрейма, в котором данный объект находится.

Управление элементами в других фреймах 1. findDOMFrame.js Создайте новую версию внешнего файла findDOM, содержащую вариацию функции findDOM(): findDOMFrame(objectID,frameName, ->withStyle). Эта версия позволяет передавать функции имя фрейма, которое включено в общую DOM, созданную для обращения к объекту в конкретном фрейме (листинг 14.7). Используйте этот код вместо кода, созданного в разделе «Использование общей для браузеров DOM» в главе 11.

264 Развитые динамические технологии 2. index.html Создайте документ с фреймами, убедитесь, что фреймы с динамическим содержанием имеют названия (рис. 14.8). Названия будут использоваться в DOM, созданной на шаге 1 (листинг 14.8). 3. content.html Теперь создайте HTML-документ, содержащий объекты, которые требуется контролировать из другого фрейма, и включите туда позиционированные объекты, которыми позволяет управлять JavaScript, и их ID (листинг 14.9). 4. controls.html Создайте HTML-документ, управляющий элементом второго фрейма. Необходимо импортировать код findDOMFrame.js, созданный на шаге 1, и добавить DHTML-функцию, которую вы хотите использовать. Функцию следует слегка изменить, чтобы ей можно было передавать имя фрейма, которое наряду с objectID и withStyle создает DOM (листинг 14.10). В этом примере показано, как перемещать объекты из фрейма во фрейм. Однако вы можете применять любую функцию, управляющую содержанием фреймов. Окно также представляет собой фрейм. С помощью описанного метода устанавливают связи между двумя открытыми окнами, если у них есть имена.

Листинг 14.7 (окончание)

Управление содержанием во фреймах 265

Рис. 14.8. Набор фреймов устанавливается из index.html Листинг 14.8. В этом примере (index.html) создан документ с двумя фреймами, которые называются content и controls. Источники этих фреймов – content.html и controls.html соответственно

<html> <frameset rows="*,50"> <frame scr="content.html" name= ->"topframe" noresize scrolling="no"> <frame scr="controls.html" name= ->"bottomframe" noresize scrolling="no"> </frameset> </html>

Листинг 14.10. В controls.html применяется видоизмененная функция moveObject() (см. раздел «Перемещение объекта на заданное расстояние» в главе 13). Разница заключается в том, что в функцию передается не только ID перемещаемого объекта, но и название его фрейма. Затем, чтобы определить местоположение объекта в окне браузера, функция moveObject() использует функцию findDOMFrame(), которая была импортирована из файла findDOMFrame.js

<html> <head> <script scr="findDOMFrame.js"></script> <script> function moveObject(objectID, ->frameName,x,y) { var domStyle = findDOMFrame(objectID, ->frameName,1); if (domStyle.pixelLeft) { domStyle.pixelLeft = x; domStyle.pixelTop = y; } else { domStyle.left = x; domStyle.top = y; }

Листинг 14.9. Создан объект whiteRabbit, которым можно управлять из текущего или любого другого фрейма с помощью его DOM

}

<html> <head> <style type="text/css"> #whiteRabbit { position: absolute; top: ->125px; left: 350px } </style> </head> <body> <div id="whiteRabbit"> <img scr="alice02.gif" width="200" ->height="300" border="0"> </div> </body> </html>

<a href="#"onMouseOver="moveObject ->('whiteRabbit','topFrame,10,10);" ->onMouseOut="moveObject('whiteRabbit', ->'topFrame,350,125);"> -> Run Rabbit, run! </a> </body> </html>

</script> </head> <body>

266 Развитые динамические технологии

Позиционирование окна браузера При создании интерфейса пользователя в Web желательно позиционировать окно браузера на экране посетителя (рис. 14.9). Это особенно важно, если на вашем сайте будет открываться много окон и вам нужно установить начальное положение окна так, чтобы окна не закрывали друг друга (см. следующий раздел). При этом вы сможете перемещать окно из его начального положения на заданное расстояние (листинг 14.11).

Определение положения окна на экране 1. moveTo(10,15) В сценарий JavaScript добавьте функцию moveTo(x,y). Эта встроенная функция JavaScript сообщает браузеру, что нужно переместить его левый верхний угол в точку с указанными координатами (x,y) по отношению к левому верхнему углу действительной области экрана (см. раздел «Размеры экрана» в главе 12 и рис. 14.10).

Рис. 14.9. Начальное положение окна браузера на экране

Листинг 14.11. Окно браузера перемещается в конкретное место на экране или на определенное расстояние с помощью функций JavaScript moveTo(x,y) и moveBy(x,y)

<html> <head> <b>Window Controls</b> || <a href="javascript:moveTo(10,15)"> Move to 10,15 </a> | <a href="javascript:moveBy(10,15)"> Move by 10,15<br><br> <img scr="alice42.gif" width="360" ->height="480" border="0"> </a> </body> </html>

Позиционирование окна браузера 267 2. moveBy(10,15) В сценарий JavaScript добавьте moveBy(dx,dy). Эта встроенная функция JavaScript перемещает окно браузера на указанное расстояние (dx,dy) по осям Х и Y (рис. 14.11).

Рис. 14.10. Окно переместилось в точку с координатами (10,15)

Рис. 14.11. Окно переместилось на 10 пикселов вправо и на 15 пикселов вниз

Описанный метод больше всего подходит для перемещения окна, которое было открыто в первый раз. Это можно сделать, поместив moveTo() или moveBy() в обработчик события onLoad в тэге <body> (см. следующий раздел).

268 Развитые динамические технологии

Новое окно браузера Часто в Web используется такой прием, как открытие нового окна браузера (рис. 14.12). Окна используются в разных целях: содержат элементы навигационного управления, рекламу и другие данные, дополняющие информацию в главном окне. При работе с всплывающими окнами применяются следующие функции: openWindow() открывает новое окно и помещает его на передний план; closeWindow() закрывает окно; toggleWindow() как открывает, так и закрывает окна. Если окно закрыто, функция его откроет и поместит на передний план. Если окно открыто, функция закроет его.

Открытие и закрытие нового окна браузера 1. index.html Создайте новый файл и сохраните его как index.html. В нем будут содержаться элементы управления, которые используются при открытии и закрытии всплывающего окна (листинг 14.12). 2. varnewWindow=null; Инициализируйте переменную newWindow, которая является указателем на объект, соответствующий всплывающему окну. Значение null означает, что окно не создано. 3. functionopenWindow(contentURL, ->windowName,windowWidth, ->windowHeight){...} В сценарий JavaScript добавьте функцию openWindow(), которая открывает

Рис. 14.12. Экран с всплывающим окном

Листинг 14.12. Функции openWindow(), closeWindow() и toggleWindow() открывают и закрывают всплывающее окно

<html> <head> <script> var newWindow = null; function openWindow(contentURL, ->windowName,windowWidth,windowHeight) { widthHeight = 'height=' + windowHeight + ->',width=' + windowWidth; newWindow = window.open(contentURL, ->windowName,widthHeight); newWindow.focus() } function closeWindow() { if (newWindow != null) { newWindow.close(); newWindow = null; } } function toggleWindow(contentURL, ->windowName,windowWidth,windowHeight { if (newWindow == null) { widthHeight = 'HEIGHT=' + ->windowHeight + ',WIDTH=' ->+ windowWidth; newWindow = window.open ->(contentURL,windowName, ->widthHeight);

Новое окно браузера 269 Листинг 14.12 (окончание)

newWindow.focus() } else { newWindow.close(); newWindow = null; } } </script> </head> <body onUnLoad="closeWindow()"> <b>Window Open Controls</b> <a href="javascript:openWindow ->('newWindow.html', ->'myNewWindow',150,50)"> Open</a> | <a href="javascript:closeWindow()"> Close</a> | <a href="javascript:toggleWindow ->('newWindow.html', ->'myNewWindow',150,50)"> Toggle</a> </body> </html>

новое окно, используя следующие параметры: – contentURL является именем HTMLфайла, который нужно поместить в новое окно; – windowName представляет собой имя нового окна; – windowWidthи windowHeight определяют ширину и высоту нового окна. Метод newWindow.focus() помещает окно на передний план. 4. functioncloseWindow(){...} В сценарий JavaScript добавьте функцию closeWindow(), которая проверяет, открыто ли окно. Если окно открыто, функция закрывает его и присваивает переменной newWindow значение null. 5. functiontoggleWindow(contentURL, ->windowName,windowWidth, ->windowHeight){...} В код JavaScript добавьте функцию toggleWindow(). Она представляет собой комбинацию функций, описанных на шаге 3 и 4, однако открывает окно только в том случае, если переменной newWindow присваивается значение null (закрыто). В противном случае она закрывает окно. 6. onUnLoad="closeWindow()" Вы можете добавить обработчик события onUnLoad, чтобы новое окно закрывалось, когда закрывается расположенная в нем страница. Этот обработчик событий препятствует возникновению нового окна, когда пользователь уходит с родительской страницы. 7. openWindow('newWindow.html', ->'myNewWindow',150,50) В код HTML добавьте вызов функции openWindow(). Он может быть частью обработчика события (см. шаг 6) или частью сценария JavaScript в описании ссылки.

270 Развитые динамические технологии

Определение содержания всплывающего окна 1. newWindow.html Создайте новый файл и сохраните его как newWindow.html. Он будет загружаться во всплывающем окне (листинг 14.13). Как и в любой Web-странице, в этом документе можно помещать любую информацию. 2. functioncloseWindow(){...} В сценарии JavaScript добавьте функцию closeWindow() в только что созданный файл. Если ее запустить, всплывающее окно закроется. 3. onUnLoad="opener.newWindow=null;" В тэг <body> добавьте обработчик событий onUnLoad, который присваивает переменной newWindow значение null, когда окно закрыто. Эта переменная сообщает открывающему окну, что всплывающее окно закрывается. 4. onLoad="window.moveTo(100,100)" Чтобы при первом открытии переместить окно в заданную позицию на экране, в тэг <body> добавьте обработчик событий onLoad (см. раздел «Позиционирование окна браузера»). 5. <ahref="javascript: ->closeWindow()">...</a> Для вызова функции closeWindow() определите ссылку, чтобы пользователь мог закрыть окно.

Листинг 14.13. Файл newWindow.html – это Web-страница, которая появляется во всплывающем окне

<html> <head> <script> function closeWindow() { self.close(); } </script> </head> <body onLoad="window.moveTo(100,100)" ->onUnLoad="opener.newWindow = null;"> New Window<br> <a href="javascript: ->closeWindow()">Close Window</a> </body> </html>

Новое окно браузера 271 Обычно предпочтение отдается именно функции toggleWindow(). Но иногда полезно использовать и две другие, так как в некоторых случаях необходимо точно знать, открыто окно или нет.

Проблемы, возникающие при использовании всплывающих окон Многие разработчики сайтов, применяющие всплывающие окна, недовольны их поведением. Допустим, вы поместили во всплывающее окно форму, в которую пользователь вводит информацию, а затем эти сведения задействуются в главном окне. Что произойдет, если пользователь не ввел данные и не закрыл окно, но вернулся на главную страницу? Система ожидает информацию, которая, вероятно, никогда не поступит. Посетитель в это время вносит на страницу другие изменения, затем возвращается к всплывающему окну и вводит нужные данные. Подобные действия запутывают систему. Решить эту проблему просто. Если открытое всплывающее окно может привести к ошибке, добавьте в тэг <body> документа код onblur="self.close();" Тогда окно закроется, как только посетитель покинет его. Окно легко снова открыть с главной страницы, однако посетитель не сможет вернуться к нему напрямую.

При создании страниц с фреймами я предпочитаю применять пункт 4 приведенного выше списка. Событие onUnLoad помещается в тэг <frameset>. Когда посетитель покидает сайт и страница закрывается, всплывающее окно исчезает. Если вам потребуется открыть несколько окон, в сценарии может возникнуть ошибка, поскольку нельзя каждый раз пользоваться переменной newWindow. Вместо этого для каждого окна придется добавлять отдельную функцию (openWindow1(), openWindow2() и т.д.) и использовать новое имя (newWindow1, newWindow2 и т.д.)1.

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

272 Развитые динамические технологии

Размеры окна При открытии нового окна в Netscape можно установить его начальные размеры (см. предыдущий раздел). После этого размеры окна допускается менять динамически (листинг 14.14). В данном разделе рассматривается работа только с браузерами Netscape; Internet Explorer не поддерживает названную возможность. На рис. 14.13 окно находится в начальном положении, то есть до применения кода, описанного ниже.

Рис. 14.13. Начальные размеры окна браузера

Листинг 14.14. Функции changeWindowSize(), magnifyWindow() и fillScreen() управляют размерами окна браузера

<html> <head> <script> function changeWindowSize(windowWidth,windowHeight) { if (window.outerWidth) { resizeTo(windowWidth,windowHeight); } } function magnifyWindowSize(dwindowWidth,dwindowHeight) { if (window.outerWidth) { resizeBy(dwindowWidth,dwindowHeight); } } function fillScreen() { if (window.outerWidth) { windowWidth = screen.width; windowHeight = screen.height; moveTo(0,0) resizeTo(windowWidth,windowHeight); } } </script> </head. <body> Window Size || <a href="javascript:changeWindowSize(300,300);">

Размеры окна 273 Листинг 14.14 (окончание)

Resize to 300 by 300</a> | <a href=javascript: ->magnifyWindow(30,30);"> Increase</a> | <a href=javascript: ->magnifyWindow(-30,-30);"> Decrease</a> | <a href=javascript:fillScreen();"> Fill Screen</a> <br><br><img scr="alice04.gif" ->width="301" height="448" border="0"> </body> </html>

Рис. 14.14. Размеры окна изменились. Текущий размер – 300×300 пикселов

Рис. 14.15. Ширину и высоту окна увеличили на 30 пикселов

Изменение размеров окна 1. functionchangeWindowSize ->(windowWidth,windowHeight){...} В сценарий JavaScript добавьте функцию changeWindowSize(). Сначала она использует метод определения возможностей, чтобы установить, реально ли выяснить внешнюю ширину окна браузера. Если ей это удается, значит, браузер принадлежит к типу Netscape (см. раздел «Размеры окна браузера» в главе 12). Затем функция применяет метод resizeTo() для того, чтобы поменять размеры окна на windowWidth и windowHeight (рис. 14.14). 2. functionmagnifyWindow ->(dwindowWidth,dwindowHeight){...} В код JavaScript добавьте функцию magnifyWindowSize(). Сначала она использует метод определения возможностей, чтобы установить, реально ли выяснить внешнюю ширину окна браузера. Если ей это удается, значит, браузер принадлежит к типу Netscape. Затем функция применяет метод resizeBy() для того, чтобы вычесть из размеров окна или добавить к ним значения dwindowWidthи dwindowHeight(рис. 14.15). 3. functionfillScreen(){...} В код JavaScript добавьте функцию fillScreen(). Сначала она использует метод определения возможностей, чтобы установить, реально ли выяснить внешнюю ширину окна браузера. Если ей это удается, значит, браузер принадлежит к типу Netscape. Затем функция находит ширину и высоту действительной области экрана, перемещает верхний левый угол окна в верхний левый угол экрана и изменяет размеры окна до размеров действительной области экрана (рис. 14.16).

274 Развитые динамические технологии 4. changeWindowSize(300,300) В функцию, которую вы хотите использовать, добавьте вызов функции changeWindowSize() и передайте ей соответствующие параметры. Функцию легко вызвать из обработчика событий или же его можно включить в атрибут href ссылки.

Рис. 14.16. Окно браузера заполняет весь экран

Динамические технологии CSS

15 Использование объектной модели документа (DOM) для Internet Explorer 4/5/6 и Netscape 6 приводит к интересным результатам, когда динамический HTML создается с помощью CSS. В отличие от Netscape 4, в котором можно корректировать лишь CSS-свойства позиционирования, Internet Explorer 4/5/6 и Netscape 6 распознают изменения в любых доступных им CSS-свойствах (см. приложение 2). В результате нетрудно динамически управлять CSS в окне браузера, модифицируя стили. Такие изменения немедленно отображаются на экране – это и есть динамические CSS. В данной главе показано, как динамически добавлять и отменять CSS-правила и определения, таблицы стилей будут при этом рассматриваться как объекты.

Изменение определения Рис. 15.1. До того как указатель мыши пройдет над фразой «Eat Me», размер шрифта останется маленьким

Используя CSS, определения (рис. 15.1) можно устанавливать, а с помощью JavaScript – изменять (рис. 15.2). Допустимо изменять или добавлять любое CSS-свойство, указанное для какого-либо объекта на экране. По крайней мере, такая функция существует и в Internet Explorer, и в Netscape 6 (листинг 15.1).

276 Динамические технологии CSS

Как изменить определения 1. <scriptscr="findDOM.js"></script> В любую функцию JavaScript, которая непосредственно обращается к объекту на экране, нужно добавить код findDOM. Для этого создайте внешний текстовый файл и затем импортируйте его на ту страницу, где он будет применяться (см. «Использование общей для браузеров DOM» в главе 11). 2. functionchangeStyle(objectID, ->styleName,newVal){...} В сценарий JavaScript добавьте функцию changeStyle(). При обращении к объекту она использует его ID, который передается в функцию как переменная objectID. Таким образом создается DOM (см. «Построение общей DOM» в главе 11). Затем функция при помощи DOM заменяет стиль, который она получила как styleName, на новое значение (newVal). 3. #object1{...} Установите ID объектов с помощью CSS-свойств, которые вы хотите изменить. 4. <divid="object1">...</div> Установите CSS-слои. 5. onClick="changeStyle('object1', ->'fontSize,'18px')" Чтобы запустить функцию, созданную на шаге 2, добавьте обработчик событий. Передайте функции ID объекта, к которому вы хотите обратиться, свойство стиля, которое требуется изменить, и новое значение.

Рис. 15.2. После того как указатель мыши прошел над фразой «Eat Me», размер шрифта увеличился с 4 до 18 пикселов

Листинг 15.1. Функция changeStyle() изменяет стили в определении конкретного объекта в окне браузера или добавляет их в это определение. Если посетитель наведет указатель мыши на фразы «Eat Me» и «Drink Me», размер текста увеличится или уменьшится

<html> <head> <script scr="findDOM.js"></script> <script> function changeStyle(objectID,stylename, ->newVal) { var dom = findDOM(objectID,1);

Изменение определения 277 Листинг 15.1 (окончание)

dom [styleName] = newVal; } </script> <style type="text/css"> #object1 { font-size: 4px; position: relative; width: 300px; } #eatMe { font-size: 18px; position: relative; margin-right: 20px; } #drinkMe { font-size: 4px; position: relative; margin-left: 20px; } </style> </head> <body> <span id="eatMe" onmouseover= ->"changeStyle('object1','fontSize', ->'18px'); changeStyle('drinkMe', ->'fontSize','18px'); ->this.style.fontsize = '4px';"> Eat Me</span> | <span id="drinkMe" onmouseover= ->"changeStyle('object1','fontSize', ->'4px'); changeStyle('eatMe', ->'fontSize','18px'); ->this.style.fontsize = '4px';"> Drink Me</span> <div id="object1">'Curiouser and ->curiouser!' cried Alice...</div> </body> </html>

Заметьте, что обработчик событий находится в тэге <div>. Это сделано из-за того, что описанный код работает только в Internet Explorer 4/5/6 и Netscape 6. Не забывайте, что Netscape 4 в настоящее время является единственным браузером, который не поддерживает события для всех объектов на странице. Имена стилей в CSS состоят из двух или более слов, разделенных дефисом (fontsize). Чтобы использовать имена в динамических CSS, нужно перевести их в имена стилей JavaScript (fontSize).

Имена в JavaScript Имена объектов в JavaScript обладают некоторыми особенностями. Здесь нельзя использовать точки, дефисы, пробелы или другие разделители. Вместо этого сложные слова записываются следующим образом: все буквы должны быть строчными, кроме первой буквы слов, стоящих за первым словом. CSS-свойство font-size преобразуется в fontSize. Я рекомендую придерживаться этих правил при присвоении имен функциям и переменным JavaScript, а также CSS-классам и ID. Это значительно облегчит вашу работу.

278 Динамические технологии CSS

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

Изменение CSS-класса объекта 1. <scriptscr="findDOM.js"></script> В любую функцию JavaScript, которая непосредственно обращается к объекту на экране, нужно включить код findDOM. Для этого создайте внешний текстовый файл и затем импортируйте его на ту страницу, где он будет использоваться. 2. functionsetClass(objectID,newClass) ->{...} В сценарий JavaScript добавьте функцию setClass(). При обращении к объекту она использует его ID, который передается в функцию как переменная objectID. Таким образом создается DOM. Затем функция с помощью DOM изменяет имя класса, применяемого к объекту, на новое (newClass). 3. #object1{...} Установите ID слоев с помощью любых стилей по вашему желанию. 4. .copyTiny{...} Определите классы, которые будут применяться к объектам.

Рис. 15.3. До того как указатель мыши пройдет над фразой «Drink Me», текст будет отображаться черным цветом, а его размер останется небольшим, так как используется класс copyTiny

Рис. 15.4. После того как указатель мыши прошел над фразой «Drink Me», шрифт стал красным, его размер увеличился, так как класс переименовали в copyHuge

CSS-класс объекта 279 Листинг 15.2. Функция setClass() переопределяет CSS-класс конкретного объекта в окне браузера

<html> <head> <script scr="findDOM.js"></script> <script> function setClass(objectID,newClass) { var dom = findDOM(objectID,0); dom.className = newClass; } </script> <style type="text/css"> #object1 { position: relative; } #eatMe { position: relative; margin-right: 20px; } #drinkMe { position: relative; margin-left: 20px; } .copyTiny { font-size: 4px; position: relative; color: black; width: 300px; } .copyHuge { font-size: 24px; position: relative; color: red; width: 600px; } .tiny { font-size: 4px; position: relative; color: black; } .huge { font-size: 18px; position: relative; color: black; } </style> </head> <body> <span class="huge" id="eatMe" ->onmouseover="setClass('object1', ->'copyHuge'); setClass('drinkMe', ->'huge'); this.className = 'tiny';">

5. onmouseover="setClass('object1', ->'copyHuge');" Чтобы вызвать функцию, созданную на шаге 2, добавьте обработчик событий. Передайте функции ID объекта, к которому вы хотите обратиться, и название стиля, который требуется применить к объекту. 6. <divid="object1">...</div> Установите CSS-слои.

Листинг 15.2 (окончание)

Eat Me</span> | <span class="tiny" id="drinkMe" ->onmouseover="setClass('object1', ->'copyTiny'); setClass('eatMe', ->'huge'); this.className = 'tiny';"> Drink Me</span> <div id="object1" class="copyTiny"> ->'Curiouser and curiouser!' cried ->Alice...</div> </body> </html>

280 Динамические технологии CSS

Добавление нового правила В данном разделе описывается работа только с Internet Explorer. Умение изменять классы вам очень пригодится в дальнейшем (см. предыдущий раздел). Но что делать, если требуется добавить правило, которое в данный момент не существует, или заменить имеющееся (рис. 15.5 и 15.6)? Сначала следует добавить в тэг <style> ID, с помощью которого он становится доступным из сценария (листинг 15.3). Затем для доступа к таблице стилей можно использовать JavaScript. 1. functionaddARule(selector,definition) ->{...} В сценарий JavaScript добавьте функцию addARule(). Она привносит в таблицу стилей, которая будет определена на шаге 2, новое правило. С этой целью используется имя селектора, для которого добавляется правило (см. «Типы HTML-тэгов» в главе 1), и определения, которые вы хотите применить к данному селектору. 2. <styleid="myStyles">...</style> В заголовок документа добавьте тэг <style>, даже если вы не устанавливаете начальные правила, и присвойте ему ID, который функция из шага 1 будет использовать при обращении к таблице стилей.

Рис. 15.5. До того как пользователь щелкнет по ссылке, в окне используются значения, установленные на странице по умолчанию (черный текст на белом фоне)

Рис. 15.6. После щелчка по ссылке вступает в действие набор правил, установленный для тэга <body> (белый текст на красном фоне)

Листинг 15.3. Функция addARule() добавляет новое CSS-правило в таблицу стилей myStyles

<html> <head> <script> function addARule(selector,definition) { document.styleSheets.myStyles.addRule ->(selector,definition); } </script> <style id="myStyles"> h1 { font-size: 24pt;} body { color: gray; }

Отмена таблицы стилей 281 Листинг 15.3 (окончание)

</style> </head> <body> <h1> <a href="javascript:void('');" ->onClick="addARule('body', ->'background-color:red; ->color:white');"> Click Me</a> </h1> <p>Down, down, down. Would the fall -><i>never</i> come to an end!.../p> </body> </html>

3. onClick="addARule('body','background->color:red;color:white');" Чтобы вызвать функцию addARule(), созданную на шаге 1, добавьте обработчик событий. Передайте функции название селектора, в который требуется добавить правило, и определения, которые необходимо приписать этому правилу.

Отмена таблицы стилей Ниже рассматривается работа только с Internet Explorer. Здесь рассказывается, как отменить CSS-правило – не изменить или добавить, а удалить и вернуться к значениям, установленным в браузере по умолчанию (рис. 15.7 и 15.8). Как и при добавлении правила (см. предыдущий раздел), вы можете получить доступ к стилю, у которого есть ID. Но здесь вы не добавляете правило, а исключаете его (листинг 15.4). Иногда посетители хотят видеть текст без стилей. Это их выбор, у каждого свой вкус. В Internet Explorer можно отменять отдельные стили, а затем включать их снова. Данная функция не работает в Netscape 6.

Отключение таблицы стилей

Рис. 15.7. До того как посетитель щелкнет по ссылке, размер шрифта останется большим, цвет – светлым. Такой текст трудно читать

1. <styleid="strangeStyle">...</style> В заголовке документа установите таблицу стилей. Присвойте тэгу <style> ID и имя. В этом примере таблица стилей называется strangeStyle.

282 Динамические технологии CSS 2. onClick="document.styleSheets. ->strangeStyle.disabled=true;" Укажите обработчик событий, в котором свойству disabled таблицы стилей, определенной на шаге 1, присваивается значение true. Если вы присвоите свойству disabled значение false, а не true, таблица стилей станет активной.

Листинг 15.4. Когда посетитель щелкает по слову «here», свойству disabled таблицы стилей strangeStyle присваивается значение true. Оно отменяет действие таблицы стилей, а все элементы на экране, использующие ее, принимают первоначальный вид. Для элемента также установлено свойство display, которому присваивается значение none. В данном свойстве находится обработчик событий onClick. Элемент исчезает вместе со стилем, и это не запутает посетителя сайта, так как стиль уже отменен

<html> <head> <style id="strangeStyle"> .bizzaro { color: #eeeeee; font: italic 100px fantasy; } </style> </head> <body> <span class="bizzaro">'What a curious ->feeling!'</span><br> <span id="styleOff">If you can not read ->the above, click –&gt; <span onClick= ->"document.styleSheets.strangeStyle. ->disabled=true; document.all.styleOff. ->style.display='none';">here</span> ->&lt;– </span> </body> </html>

Рис. 15.8. После щелчка по ссылке стиль текста определяет браузер (по умолчанию это шрифт черного цвета размером 12 пунктов)

Слои Netscape

16 С помощью слоев Netscape в окне браузера создаются независимые объекты, которые можно позиционировать, скрывать или отображать, помещать в стек или изменять их положение. Чем же слои Netscape отличаются от слоев CSS? В основном их функции похожи, но само устройство слоев различно. Слой Netscape представляет собой еще один объект на экране, но метод его создания немного отличается от метода создания объекта (см. раздел «Создание объекта» в главе 11). Важным отличием слоев Netscape является то, что они поддерживаются только одним браузером, Netscape 4. Компания Netscape обещала, что последующие версии браузеров будут работать со слоями, но этого не произошло. Netscape 6 (выпущенный после Netscape 4) не поддерживает слои Netscape. Но поскольку слои используются в Netscape 4, их приходится включать в некоторые версии общего для браузеров DHTML вместе с технологиями, которые характерны для Internet Explorer. В этой главе рассказывается, как применять тэги <layer> и <ilayer>, как добавлять внешнее содержимое и при необходимости менять его.

284 Слои Netscape

Что такое слой Netscape Слой Netscape – это независимая часть Web-содержимого внутри HTML-документа, которая определяется с помощью одной из двух пар тэгов: <layer>. Его эквивалент в CSS – <div style="position:absolute;">; <ilayer>. Его эквивалент в CSS – <span style="position:relative">.

На Web-странице разрешается помещать сколько угодно слоев Netscape. Каждый слой имеет собственные свойства, которыми вы можете управлять динамически с помощью JavaScript. В общем, все, что применимо к CSS-слоям, применимо и к слоям Netscape. Как и CSSслои, слои Netscape допустимо помещать в стек и менять местами, делать невидимыми (с помощью hide) или видимыми (используя значение show), а также определять изображения на заднем плане и цвет фона. Большим преимуществом слоев является то, что с их помощью можно добавлять содержимое из внешнего URL и динамически модифицировать его. Такого же результата добиваются и с помощью CSS, используя <ilayer> в Netscape и <iframe> в Internet Explorer (см. раздел «Тэги ilayer и iframe» в главе 23). Другим преимуществом слоев Netscape является то, что с ними разрешается использовать обработчики событий JavaScript, что невозможно сделать в Netscape 4 с помощью CSS-слоев (см. раздел «Обработчики событий» в главе 11). В Internet Explorer и в Netscape 6 обработчики событий, связанные с указателем мыши, допустимо помещать в любой HTML-тэг. Однако в Netscape 4 их можно запускать только в тэгах <a> или <layer>.

Слои Netscape в сравнении с CSS-слоями Разница между слоями Netscape и CSS, стандартизированными W3C, заключается в позиционировании элементов на экране. Компания Netscape, придерживаясь тенденции, которая появилась с выпуском первого браузера Netscape, добавляла новые тэги в надежде расширить возможности HTML. В свою очередь W3C пытался сохранить HTML как чистый язык разметки текста, добавляя новые свойства в стандарт таблиц стилей. Создатели как Netscape, так и Internet Explorer обещали придерживаться стандартов W3C в новых версиях браузеров. Так, CSS-слои становятся будущим динамического содержания Web.

Что такое слой Netscape 285 Таблица 16.1. Тэги <layer> Тэг

Действие тэга

В Netscape 4 создается дискретная область HTML-кода, которую можно разместить в любом месте страницы и определить с помощью атрибутов слоя

В Netscape 4 создается дискретная область HTML-кода, которую можно позиционировать относительно окружающих ее элементов и определить с помощью атрибутов слоя

<nolayer>... Содержимое, предназначенное </nolayer> для браузеров, которые не поддерживают слои, скрывается от браузеров, их поддерживающих

Рис. 16.1. Пять слоев в окне браузера Netscape 4

Создание слоя В отличие от CSS-слоев, слои Netscape (рис. 16.1) требуют использования одного из двух HTML-тэгов (расширения HTML в Netscape), которые определяют, будет ли содержимое слоя свободно позиционироваться на экране (табл. 16.1). Слои, позиционированные абсолютно, задействуют тэги <layer>...</layer> (сравните с position: absolute). В относительных слоях применяются тэги <ilayer>...</ilayer> (сравните с position:relative). Как и у многих HTML-тэгов, у тэга <layer> есть большой набор атрибутов, которые управляют его видом и поведением (табл. 16.2).

286 Слои Netscape В основном атрибуты слоев совпадают с теми, что используются в CSS. Но есть несколько исключений:

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

scr. Используя данный атрибут, можно определять внешний файл, который затем включается в документ (см. следующий раздел); above и below. Эти атрибуты задают в свойстве z-index трехмерное позиционирование слоев.

Таблица 16.2. Атрибуты тэга <layer> в Netscape Атрибут

Значения

Действие

Определение слоя для использования в JavaScript

name

Идентичен ID. Предпочтительнее использовать ID

left

Горизонтальное положение по отношению к родительскому элементу

top

Вертикальное положение по отношению к родительскому элементу

pageX*

Горизонтальное положение; всегда по отношению к окну

pageY*

Вертикальное положение; всегда по отношению к окну

z-index

Порядок уровня в стеке по отношению к другим

above*

Имя слоя, который находится над текущим

below*

Имя слоя, который находится под текущим

width

Длина по горизонтали

<percentage> height

Длина по вертикали

<percentage> clip

<length,length>

Видимая область

visibility

show

Состояние видимости

hide inherit bgcolor

<color>

Цвет фона слоя

background-color

<color>

Аналогично предыдущему

background

<url>

Фоновое изображение (в формате GIF или JPEG)

background-image

<url>

Аналогично предыдущему

scr*

<url>

URL внешнего содержимого, которое нужно загрузить в слой

* Нет эквивалентов в CSS.

Создание слоя 287 Листинг 16.1. Пять слоев определяют пять положений

<html> <body> <layer top="150" left="300" ->bgcolor="#666666"> <h2>Layer 1</h2> </layer> <layer top="-5" left="-5" ->bgcolor="#CCCCCC"> <h2>Layer 2</h2> <layer top="100" left="100" ->bgcolor="#999999"> <h2>Layer 3</h2> </layer> </layer> <layer top="150" left="85" ->bgcolor="#666666"> <h2>Layer 4</h2> <ilayer top="0" left="100" ->bgcolor="#CCCCCC"> <h2>Layer 5</h2> </ilayer> </layer> </body> </html>

Определение слоя 1. <layertop="150"left="300" ->bgcolor="#666666"> В HTML-документе создайте слой с помощью тэга <layer> или <ilayer>. В табл. 16.2 перечислены атрибуты, которые можно добавить в тэг, а также действия, которые эти атрибуты производят со слоем (листинг 16.1). 2. <h2>Layer1</h2> В тэг <layer> поместите содержимое слоя. Оно ничем не отличается от обычного содержимого HTML-документа. 3. </layer> Закройте тэг с помощью соответствующего ему закрывающего тэга (</layer> или </ilayer>). Inline-тэг <ilayer> определяется так же, как и тэг <layer>, описанный в этом разделе.

288 Слои Netscape

Импорт внешнего содержимого с помощью слоев Netscape

Листинг 16.2. Файл layer1.html включает в себя внешнее содержимое, которое используется в файле index.html. Заметьте, что в нем нет тэгов <html>, <head> и <body>

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

<h2>Layer 1</h2> <img scr="alice26.gif" width="134" ->height="150">

Добавление содержимого в слой 1. layer1.html Создайте внешний файл, который будет импортироваться в файл index.html. В нем может содержаться любой стандартный код HTML, который обычно находится внутри тэга <body> в HTMLдокументе, но в нем не должно быть тэгов <html>, <head> и <body> (листинг 16.2). 2. index.html Создайте HTML-файл, куда будет импортироваться файл, созданный на шаге 1, и сохраните его как index.html. Действия, описанные в шагах 3 и 4, выполняются с этим файлом (листинг 16.3). 3. <layerid="layer1"scr="layer1.html" ->bgcolor="#CCCCCC"> Откройте тэг <layer>. В тэге слоя из шага 1 напишите атрибуты, которые вы хотите использовать для определения слоя. В данном примере в слой загружается внешний документ. Слой определяется с помощью имени (layer1) и цвета фона.

Листинг 16.3. В файле index.html содержится четыре слоя Netscape. В первый слой импортируется содержимое из файла layer1.html

<html> <body> <layer id="layer1" scr="layer1.html" ->bgcolor="#CCCCCC"> </layer> <layer id="layer2" above="layer1" ->width="100" height="100" top="125" ->left="125" bgcolor="#666666"> <h2>Layer 2</h2> </layer> <layer id="layer3" top="10" left="350" ->bgcolor="#CCCCCC"> <h2>Layer 3</h2> <layer id="layer4" pagey="125" ->pagex="250" bgcolor="#666666" ->width="100" height="100"> <h2>Layer 4</h2> </layer> </layer> </body> </html>

Импорт внешнего содержимого с помощью слоев Netscape 289 4. </layer> Закройте тэг <layer>. Если вы определяете внешний источник для слоя с помощью атрибута SCR, вы не сможете добавить никакое другое содержимое внутри контейнера уровня. В результате первый слой втягивает в себя внешний файл с Болванщиком. Из-за того что во втором слое установлен атрибут above, первый слой находится над вторым, хотя первый слой был определен раньше (рис. 16.2). Четвертый слой встроен в третий, но он имеет абсолютное положение по отношению ко всему документу, а не к третьему слою, так как позиционировался с помощью pageX и pageY.

Рис. 16.2. Определены четыре слоя. В первый слой из внешнего файла импортируется изображение Болванщика

290 Слои Netscape

Доступ к слоям с помощью JavaScript Наряду с атрибутами слоя, тэг <layer> может включать в себя обработчики событий onMouseOver, onMouseOut, onFocus, onBlur и onLoad. Их добавляют к слою, чтобы получить доступ к функциям JavaScript (см. раздел «Обработчики событий» в главе 11), так как Netscape 4 не позволяет сделать это непосредственно с помощью CSS-слоев (рис. 16.3 и 16.4). В табл. 16.3 представлены все свойства объектов слоя, а также указано, может ли пользователь менять эти свойства.

Рис. 16.3. При первой загрузке страницы на экране видны все три слоя

Получение доступа к слоям 1. functiontoggleLayerViz(objectID, ->state){...} В сценарий JavaScript добавьте функцию, которая будет менять одно или несколько свойств слоя Netscape (листинг 16.4). Для этого получите доступ к слою, используя его ID в массиве слоев: document.layers[objectID].visibility= ->state; В данном примере изменяется свойство visibility, но подобным образом можно получить доступ к любому свойству. 2. <layerid="layer1"...> Создайте слой с помощью атрибута id. Чтобы запустить функцию, созданную на шаге 1, добавьте обработчик событий в тэг <layer>: onmouseover="toggleLayerViz('layer2', ->'hide')" Когда указатель мыши проходит над слоем, обработчик вызывает функцию toggleLayerViz() и передает ей ID того слоя, состояние которого требуется поменять.

Рис. 16.4. Когда посетитель проводит указателем мыши над вторым слоем, третий исчезает

Доступ к слоям с помощью JavaScript 291 Таблица 16.3. Свойства объектов слоя Netscape Свойство

Возможность его изменения с помощью JavaScript

Действие

document

Нет

Каждый слой можно рассматривать как независимый документ, который используется для доступа к картинкам, апплетам, встроенным элементам, ссылкам и встроенным слоям

name

Нет

Слою присваивается ID или имя

left

Да

Горизонтальное положение элемента. Для тэга <layer> оно абсолютное по отношению к странице и относительное по отношению к окружающим слоям. Для тэга <ilayer> элемент относительно позиционирован в документе или в окружающих его слоях

top

Да

Вертикальное положение элемента. Для тэга <layer> оно абсолютное по отношению к странице и относительное по отношению к окружающим слоям. Для тэга <ilayer> элемент относительно позиционирован в документе или в окружающих его слоях

pageX

Да

Горизонтальное положение элемента по отношению к документу независимо от типа слоя

pageY

Да

Вертикальное положение элемента по отношению к документу независимо от типа слоя

z-index

Да

Положение слоя в стеке по отношению к слоям, имеющим тот же родительский элемент

visibility

Да

Видимость слоя на экране

clip.width

Да

Горизонтальная видимая область слоя

clip.height

Да

Вертикальная видимая область слоя

bgcolor

Да

Цвет фона, на котором находится содержимое слоя

backgroundcolor

Да

Картинка, на фоне которой находится содержимое слоя

siblingAbove

Нет

Имя или ID слоя, который имеет тот же родительский элемент, что и данный слой, и в стеке находится над данным слоем

siblingBelow

Нет

Имя или ID слоя, который имеет тот же родительский элемент, что и данный слой, и в стеке находится под данным слоем

above

Нет

Имя или ID слоя в z-index, который в стеке находится над данным слоем

below

Нет

Имя или ID слоя в z-index, который в стеке находится под данным слоем

parentLayer

Нет

Имя родительского элемента слоя. По умолчанию, если нет родительского элемента, это имя окна

scr

Да

URL внешнего содержания для слоя

292 Слои Netscape Допустимо изменять источник файла (scr) для слоя. Таким образом, вы получаете возможность динамически управлять выбором отображаемого внешнего HTML-файла (см. главу 23). В CSS такой функции нет.

Листинг 16.4. В окне создано три слоя, в каждом из которых используется обработчик событий onmouseover для сокрытия последующего слоя и onmouseout для отображения предыдущего

Независимо от того, позиционируете вы содержимое с помощью слоев Netscape или CSS-слоев, Netscape 4 для доступа к элементам использует DOM слоя. С помощью CSSслоев Navigator 4 обращается с различными ID как со слоями, к которым можно получить доступ через соответствующую DOM (см. раздел «DOM – путеводитель по Webстранице» в главе 11).

<html> <head> <script language="JavaScript"> function toggleLayerViz(objectID,state){ ->document.layers[objectID].visibility= ->state;} } </script> </head> <body> <layer id="layer1" bgcolor="#CCCCCC" ->width="100" height="100" ->top="10" left="10" onmouseover= ->"toggleLayerViz('layer2','hide');" ->onmouseout="toggleLayerViz('layer3', ->'show');" visibility="show"> <center><h2>Layer 1</h2></center> </layer>

В массиве слоев Netscape, как и во всех массивах, первый слой всегда имеет номер 0. Так, третий слой, определенный в документе, на самом деле является вторым (0, 1, 2) в любом массиве. В отличие от большинства элементов, которым можно приписать обработчик событий, из событий, находящихся в слоях, можно вызывать только функции и методы JavaScript. В кавычках после обработчика событий JavaScript помещать нельзя. Заметьте, что в функции toggleLayerViz() использовалась переменная objectID, а не layerID. На самом деле при некоторых ограничениях переменную можно называть любым именем. Слой представляет собой еще один объект на экране.

<layer id="layer2" bgcolor="#999999" ->width="100" height="100" top="10" ->left="200" onmouseover= ->"toggleLayerViz('layer3','hide');" ->onmouseout="toggleLayerViz ->('layer1','show');" visibility="show"> <center><h2>Layer 2</h2></center> </layer> <layer id="layer3" bgcolor="#666666" ->width="100" height="100" top="200" ->left="100" onmouseover= ->"toggleLayerViz('layer1','hide');" ->onmouseout="toggleLayerViz('layer2', ->'show');" visibility="show"> <center><h2>Layer 3</h2></center> </layer> </body> </html>

Изменение слоев с помощью JavaScript 293

Изменение слоев с помощью JavaScript Кроме объекта layer, позволяющего менять различные свойства, существует несколько методов, с помощью которых можно выполнять различные задачи в слое (рис. 16.5). Данные методы перечислены в табл. 16.4. Метод – это стандартная функция JavaScript, которая выполняет простые задачи, например перемещение уровня по экрану, гораздо быстрее, позволяя сэкономить время. Рис. 16.5. Перемещая указатель мыши над слоем, мы постепенно открываем изображение Чеширского кота. Если провести мышью в обратном направлении, кот исчезнет

Таблица 16.4. Методы объекта layer в Netscape Метод

Действие

moveBy(x,y)

Перемещает слой из текущего положения вправо на x пикселов и вниз на y пикселов

moveTo(x,y)

Перемещает слой внутри содержащего его слоя или внутри документа в точку с координатами (x,y)

moveToAbsolute(x,y)

Перемещает слой внутри документа в точку с координатами (x,y)

resizeBy(x,y)

Изменяет текущий размер слоя на x пикселов вправо и на y пикселов вниз

resizeTo(x,y)

Ширине слоя присваивает значение x пикселов, а высоте – y пикселов

moveAbove(layer)

Помещает данный слой над определенным слоем

moveBelow(layer)

Помещает данный слой под определенным слоем

load(URL,width)

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

294 Слои Netscape

Увеличение размеров слоя 1. functionclipLayer(objectID,x,y){...} Определите функцию, использующую объект layer, и метод, который хотите применить к уровню (листинг 16.5). В этом примере для изменения размера layer1 служит метод resizeTo: document.layers[objectID].resizeTo(x,y) Похожим образом можно задействовать любой метод из табл. 16.4. 2. <layerid="cheshireCat"> Создайте слой с указанием атрибута id. Чтобы вызвать функцию, созданную на шаге 1, добавьте обработчик событий в тэг <layer>: onmouseover="clipLayer('cheshireCat', ->400,271)" Передайте функции ID слоя и параметры применяемого метода.

К сожалению, Netscape 6 не поддерживает описанные методы, в противном случае можно было бы сэкономить много времени.

Листинг 16.5. Функция clipLayer() изменяет размеры слоя. При первой загрузке страницы размер видимой области слоя составляет 200×175 пикселов. Когда указатель мыши проходит над видимой частью слоя, размер изображения увеличивается до 400×271 пикселов. Когда указатель мыши выходит за пределы слоя, размер становится прежним – 200×175

<html> <head> <script language="Javascript"> function clipLayer(objectID,x,y){ ->document.layers[objectID]. ->resizeTo(x,y);} } </script> </head> <body> <layer id="cheshireCat" clip="200,175" ->onmouseover="clipLayer('cheshireCat', ->400,271)" onmouseout="clipLayer ->('cheshireCat',200,175)" top="0" ->left="0" visibility="show"> <img scr="alice24.gif" width="400" ->height="271"> </layer> </body> </html>

Отображение содержимого слоев в браузерах, которые их не поддерживают 295

Отображение содержимого слоев в браузерах, которые их не поддерживают Как тэг <noframes> позволяет отображать содержимое фрейма в браузерах, которые не распознают фреймы, так и тэг <nolayers> служит для отображения содержимого слоев в браузерах, которые их не поддерживают (рис. 16.6 и 16.7). Рис. 16.6. Страница отображается в Netscape 4, в слой импортируется внешний файл

Добавление содержимого в тэг <nonlayer> 1. <ilayerid="special"top="10"height= ->"10"scr="daily_special.html"> -></ilayer> Добавьте содержимое слоя Netscape, которое вы хотите отобразить на Webстранице. В этом примере (листинг 16.6) импортируется внешний файл daily_ special.html (листинг 16.7) – см. раздел «Импорт внешнего содержимого с помощью слоев Netscape». 2. <nolayer>

Рис. 16.7. Netscape 6 не поддерживает тэг <ilayer>, но в нем доступна ссылка

296 Слои Netscape С помощью тэга <nolayer> в документе откройте область, не содержащую слоев. 3. <ahref="daily_special.html">TheDaily ->Specialsareavailablehere!</a> Добавьте содержимое, которое вы хотите отобразить в браузерах, не поддерживающих слои Netscape. В этом примере добавлена ссылка на файл, который импортируется на шаге 1. 4. </nolayer> Закройте тэг <nolayer>.

Листинг 16.6. В тэге <ilayer> импортируется внешний файл daily_special.html, также в этот тэг включена ссылка на страницу, помещающаяся в тэге <nolayer>

<html> <body> <h1>Mad Tea-Party Menu</h1> <h3>DAILY SPECIAL</h3> <p> <ilayer id="special" top="10" ->height="10" scr="daily_special.html"> </ilayer> <nolayer> <a href="daily_special.html">The Daily ->Specials are available here!</a> </nolayer> </body> </html>

Листинг 16.7. При использовании браузера Netscape 4 код импортируется в слой в файле index.html. В противном случае добавляется ссылка на страницу, в тэг <nolayers> помещается обратная ссылка на меню

<nolayers> <a href="index.html">&lt;&lt;Return to ->Menu</a> </nolayers> <!-HTML CONTENT GOES HERE ->

Internet Explorer для Windows

Internet Explorer для Windows имеет ряд встроенных специальных возможностей, которые позволяют оживить Web-страницу. Например, использование фильтров при переходе от объекта к объекту или от страницы к странице поможет украсить страницу. Специальные эффекты, которые рассматриваются в этой главе, поддерживаются только Internet Explorer 4/5/6 для Windows. Их следует применять осторожно, поскольку эти эффекты не поддерживаются браузерами Netscape (а также версиями Internet Explorer для Macintosh или Unix). Рассматриваемые возможности основаны на технологии ActiveX, все права на использование которой принадлежат Microsoft. В отличие от JavaScript или каких-либо других Web-технологий, ActiveX – нестандартизированная технология. Она до сих пор не поддерживается другими браузерами (кроме вышеупомянутого Internet Explorer для Windows). Таким образом, вы можете применять эти эффекты при создании Web-страниц, если посетителями вашего сайта будут преимущественно пользователи Windows-версии Internet Explorer.

298 Internet Explorer для Windows

Перетекание объектов Безусловно, наиболее популярным способом перехода от элемента к элементу является перетекание одного объекта в другой (фединг). В Internet Explorer для Windows вы можете взять два изображения (или два любых других элемента на экране), которые будут сменять друг друга. Когда первое изображение медленно исчезает, «растворяясь» в другом, второе постепенно проявляется (рис. 17.1).

Определение перетекания элементов 1. function fadeElement(){…} Используя JavaScript, определите функцию fadeElement() в заголовке документа. Она применяет фильтр blendTrans для смены изображений image1 из файлов alice04.gif и alice05.gif (листинг 17.1). 2. <img id="alice" src="alice04.gif" Выберите изображение, которое появляется первым при загрузке вашей Webстраницы. 3. style="filter:blendTrans(duration=3)" ->onclick="fadeElement()"> В атрибут style изображения image1 добавьте вызов фильтра blendTrans Internet Explorer и установите длительность 3 с. Фильтр активизируется при щелчке по изображению, после чего вызывается функция fadeElement().

Рис. 17.1. Перетекание одного изображения в другое

Листинг 17.1. Функция fadeElement() вызывает фединг изображений из файлов alice04.gif и alice05.gif

<html> <head> <script> var isFade = 0; function fadeElement() { if (document.all && isFade == 0) { isFade = 1; alice.filters.blendTrans.Apply(); alice.src = "alice05.gif"; alice.filters.blendTrans.Play(); } } </script> </head>

Смена страниц 299 Листинг 17.1 (окончание)

<body> This fade will only work in Internet ->Explorer 4 and above for Windows. <img id="alice" src = "alice04.gif» ->style="filter:blendTrans ->(duration=3)" onclick= ->"fadeElement()"><br> </body> </html>

Смена страниц Когда посетитель переходит с одной Webстраницы на другую, ему приходится ждать, пока исчезнет первая картинка, а новая медленно проявится. Фильтры RevalTrans() позволяют переходить от одной страницы к другой, создав некоторое подобие анимации (рис. 17.2). В табл. 17.1 перечислены использующиеся для таких переходов фильтры.

Таблица 17.1. Фильтры преобразования в Internet Explorer

Рис. 17.2. Страница показывается в тот момент, когда изображение с королем и королевой еще не заняло место предыдущего изображения

Преобразование

Значение

BoxIn

BoxOut

CircleIn

CircleOut

WipeUp

WipeDown

WipeRight

WipeLeft

VerticalBlinds

HorizontalBlinds

CheckerboardAcross

ChekerboardDown

RandomDissolve

SplitVerticalIn

SplitVerticalOut

SplitHorizontalIn

SplitHorzontalOut

StripsLeftDown

StripsLeftUp

StripsRightDown

StripsRightUp

RandomBarsHorizontal

RandomBarsVertical

Random

300 Internet Explorer для Windows

Установка перехода между страницами

Листинг 17.2. В данном примере тег <meta> используется для активизации фильтров перехода в случаях, когда документ открыт и закрыт

1. <meta http-equiv="Page-Enter" Поместите тег <meta> в заголовке документа (листинг 17.2). Для события PageEnter установите атрибут http-equiv. 2. content="RevalTrans(Duration=20, ->Transition=3)> Сначала введите атрибут content для тега <meta>, чтобы активизировать фильтр RevealTrans(), установив длительность 2 с. Затем укажите вид перехода из таблицы. В этом примере описывается эффект сужающейся окружности. 3. <meta http-equiv="Page-Exit" content= ->"RevalTrans(Duration=20, ->Transition=3)> Чтобы запустить фильтр в случае, если посетитель покидает Web-страницу, введите еще один тег <meta> для события Page-Exit. В данном примере описывается фильтр расширяющейся окружности.

<html> <head> <meta HTTP=EQUIV="Page-Enter" ->CONTENT="RevealTrans(Duration=20, ->Transition=3)"> <meta HTTP=EQUIV="Page-Exit" ->CONTENT="RevealTrans(Duration=20, ->Transition=3)"> </head> <body style="background-color:red"> This transition will only work in -> Internet Explorer 4 and above for ->Windows. <center> <a href="page2.html"> <img src = "alice01.gif" ->height="90%"> <br> Next Picture -&gt; </a> </center> </body> </html>

Эффект размытого изображения 301

Эффект размытого изображения Эффект размытого изображения (или текста) помогает создать впечатление, что изображение (текст) движется (рис. 17.3).

Создание эффекта размытого изображения

Рис. 17.3. Изображение грифона размыто по горизонтали Листинг 17.3. Функция blurOn() медленно размывает изображение по горизонтали

<html> <head> <script> function blurOn(currStrength, ->currDirection) { if (document.all && currStrength < 360) { currStrength += 1; currDirection += 1; document.all.blurMe.style.filter = ->"blur(strength= " + currStrength ->+ ", " + currDirection +")"; setTimeout("blurOn(" + currstrength ->+ ", " + currDirection + ")",100); } } </script> </head> <body onLoad="blurOn(15,15)"> The blur will only work in Internet ->Explorer 4 and above for Windows. <img id="blurMe" src="alice33.gif" ->height="95%" style="FILTER:blur ->(strength=0, direction=5)"> </body> </html>

1. function blurOn(currStrength, currDirection){…} При помощи JavaScript добавьте функцию blurOn() в заголовок вашего документа. Данная функция рекурсивно применяет размывание к изображению blurMe. Это происходит до тех пор, пока значение strength не достигнет 360. Данный атрибут (strength) определяет степень размытости изображения (листинг 17.3). 2. <body on load="blurOn(15, 15)"> Добавьте обработчик событий onLoad, который вызовет функцию blurOn. 3. <img id="blurMe" src="alice33.gif" ->height="95%" style="FILTER: ->blur(strength=0, direction=5)"> В теле документа укажите, для какого изображения следует использовать эффект размытости. Для тэга <img> определите атрибут style. Присвойте переменным strength и direction начальное значение 0.

302 Internet Explorer для Windows

Эффект волны Фильтр «волнистых» изображений позволяет добавить эффект волны. Применив этот фильтр, вы увидите, что изображение ведет себя подобно флагу, развевающемуся на ветру (рис. 17.4).

Создание эффекта волны 1. <img src="alice08.gif" height="90%" Определите изображение в вашем документе (листинг 17.4). 2. style="FILTER:wawe(freq=3, ->strength=6)"> Установите свойство style для изображения, используя «волновой» фильтр с частотой 3 (этот атрибут задает количество «гребней волны»). Присвойте атрибуту strength значение 6 (размер «волны»).

Рис. 17.4. Пока Алиса переплывает с одного края экрана на другой, по изображению перекатываются волны

Листинг 17.4. В данном примере «волновой» фильтр используется для изображения alice08.gif

<html> <body> The wave will only work in Internet ->Explorer 4 and above for Windows. <img src="alice08.gif" height="90%" ->style="FILTER:wave(freq=3, ->strength=6)"> </body> </html>

○ ○ ○ ○ ○

○

Использование инструментов для создания DHTML и CSS

○

Часть III ГЛАВА 18 ◆ Знакомство с GoLive ............................................... 304 ГЛАВА 19 ◆ Введение в Dreamweaver .......................................... 317

Знакомство с golive

GoLive представляет собой пакет программ, предназначенный для создания HTML-страниц. В нем соединены редактор HTML-кода и WYSIWYG-редактор (What You See Is What You Get – что ты видишь, то и получаешь). Данный пакет был создан компанией GoLive и первоначально назывался CyberStudio. Затем права на пакет GoLive были приобретены компанией Adobe Systems Inc., которая и направила все усилия на разработку, вероятно, одного из самых ярких и успешных продуктов для создания Web-приложений. В течение многих лет пакет GoLive совершенствовался, изменялся, присоединяя различные технологии. На сегодняшний день он включает в себя такие инструменты, как язык описания сценариев JavaScript, CSS и HTML. Тем не менее, совмещая в себе все перечисленные инструменты, пакет GoLive имеет простой и понятный интерфейс. Тэги удобно расположены и могут быть изменены из различных палитр. Все модификации, которые вы вносите, сразу отображаются на экране. Таким образом, вы можете контролировать рабочий процесс. В этой главе рассказывается, как создавать в GoLive DHTML и CSS, а также добавлять стили и анимировать сложные объекты.

Интерфейс GoLive 305

Интерфейс GoLive Хотя программа GoLive изначально создавалась не Adobe, тем не менее в ее последних версиях воплотились все преимущества продуктов этой компании. Компания Adobe внесла туда множество новых функциональных возможностей, сумев при этом сохранить хорошую организацию и простоту интерфейса. Интерфейс GoLive, построенный по принципу WYSIWYG, позволяет даже новичкам создавать собственные Web-страницы. Но этот программный пакет также включает в себя достаточно мощные инструменты

редактирования кода (для HTML, JavaScript и CSS), полезные для профессионалов. Интерфейс можно логически разделить на пять областей: окно документа (document window), панель инструментов (toolbar), узел управления (site controls) и другие инструменты (рис. 18.1).

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

Рис. 18.1. Интерфейс GoLive включает в себя окно документа, панель инструментов, узел управления и различные палитры

306 Знакомство с GoLive кнопке в верхней части окна. Ниже перечислены все режимы работы в окне GoLive: Layout Mode (Режим разметки страницы) очень похож на аналогичный режим текстового редактора. Он позволяет работать непосредственно со страницей, а не с HTML-тэгами, и наблюдать, как она изменяется (рис. 18.2); Frame Mode (Фреймовый режим) предназначен для размещения и редактирования фреймов на странице; Source Mode (Просмотр исходного кода) позволяет редактировать код HTML, CSS и JavaScript (рис. 18.3); Outline Mode (Режим структуры) очень полезен для просмотра структуры Webстраницы (рис. 18.4); Preview Mode (Режим предварительного просмотра) позволяет увидеть страницу такой, какой она будет при запуске из браузера.

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

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

Рис. 18.3. Окно документа в режиме просмотра исходного кода. Режим позволяет редактировать код Web-страницы, включая CSS и JavaScript

Интерфейс GoLive 307

Палитры Более дюжины различных палитр предоставляют доступ к огромнейшему количеству свойств и функций. Вы можете отображать и скрывать палитры из меню Windows. Далее перечислены наиболее важные палитры для CSS и DHTML: Objects (Объекты). Эти палитры обеспечивают доступ к бессчетному количеству HTML-тэгов и тэгов других объектов, которые вы можете использовать при создании своей Web-страницы; Color (Цвет). Данная палитра позволяет выбирать цвета переднего плана и фона; Inspector (Инспектор). Эта палитра предназначена для определения атрибутов выделенного объекта. Inspector – контекстно-зависимая палитра, и ее свойства зависят от типа выделенного объекта; Source Сode (Просмотр исходного кода). Данная палитра позволяет читать и изменять исходный код в режиме разметки страницы.

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

Рис. 18.5. Панель инструментов изменяет набор кнопок в зависимости от элементов, выделенных в окне документа. На рисунке показан вид панели при выделении текста

Рис. 18.6. Здесь представлен вид панели при выделении слоя. Определенные элементы (например, выделение документа, предварительный просмотр и вызов справки) остаются не активизированными

308 Знакомство с GoLive

Узел управления В GoLive включены великолепные инструменты управления страницей и FTPклиент. Различные опции позволяют не только управлять сайтом, но и выборочно загружать файлы, которые были недавно изменены.

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

Рис. 18.7. Кнопка CSS открывает окно стилей страницы

Рис. 18.8. В окне стилей отображаются все доступные для данной Web-страницы стили

Внедрение CSS Первая часть этой книги посвящена таблицам стилей. GoLive содержит ряд инструментов, которые помогают добавлять CSS и управлять видом страницы или целого Web-сайта (см. разделы «Добавление CSS на Web-страницу» и «Добавление CSS на Web-сайт» в главе 2).

Внедрение CSS в Web-страницу 1. Откройте новый или существующий HTML-файл, выбрав в меню пункты File ⇒ New (Файл ⇒ Создать) или File ⇒ Open (Файл ⇒ Открыть).

2. В режиме разметки страницы (см. предыдущий раздел) нажмите на кнопку CSS в верхнем правом углу окна документа (рис. 18.7), чтобы получить доступ к окну стилей страницы (рис. 18.8). 3. На панели инструментов (рис. 18.9) щелкните по кнопке выбора типа CSS, который вы хотите использовать: HTML, класс или ID (см. главу 1). Новый элемент стиля появляется в окне стилей страницы.

Рис. 18.9. Если окно стилей страницы открыто, можно при помощи панели инструментов добавлять стили, присоединять внешние файлы или копировать выделенные стили

Внедрение CSS 309 4. В палитре Inspector установите те свойства CSS, которые вы будете использовать (см. ниже раздел «Таблицы стилей в палитре Inspector»). 5. После определения всех необходимых свойств и правил CSS вернитесь в окно документа. 6. Если потребуется указать какие-либо классы, перейдите в режим разметки страницы и воспользуйтесь таблицей стилей палитры Inspector (рис. 18.10). 7. Можно также установить и внешние CSS-файлы, а затем связать их с Webстраницей при помощи GoLive. Рис. 18.10. При выделении какого-либо элемента в режиме разметки страницы активизируется палитра Inspector, которая позволяет получить доступ к стилям класса

Рис. 18.11. Окно внешней таблицы стилей похоже на окно стилей страницы (рис. 18.9). Окно остается пустым, пока не введена какая-либо информация

Рис. 18.12. Сохранение внешней таблицы стилей

Связывание внешнего файла и Web-страницы 1. Для загрузки нужного файла выберите в меню пункты File ⇒ New Special ⇒ Style Sheet Document (Файл ⇒ Новый специальный ⇒ Таблица стилей документа) – рис. 18.11. 2. При помощи панели инструментов выберите CSS-стиль: HTML, класс или ID. Новый элемент стиля появится в окне стилей страницы. 3. При помощи палитры Inspector установите свойства CSS. 4. Сохраните файл (рис. 18.12). 5. Откройте существующий или создайте новый HTML-документ. 6. В режиме разметки страницы в окне документа нажмите на кнопку CSS. 7. На панели инструментов щелкните по кнопке CSS, чтобы добавить связь с внешним файлом. Пустая ссылка на внешний файл появится в окне стилей страницы.

310 Знакомство с GoLive 8. Выделив в окне стилей страницы пустую ссылку на внешний файл, при помощи палитры Inspector введите в нее URL внешнего файла (рис. 18.13). 9. Повторите шаги 1–8 для присоединения всех необходимых внешних файлов. В более ранних версиях GoLive существовала проблема с прописными буквами. Хотя программа воспринимала прописные буквы в названиях классов и ID, она заменяла все прописные буквы в CSS строчными. Тем не менее при создании стилей GoLive использовала нужный регистр. Во многих браузерах это приводило к возникновению ошибок.

Таблицы стилей в палитре Inspector Когда вы добавляете CSS на Web-страницу или редактируете таблицы стилей, в палитре Inspector появляются восемь закладок, которые позволяют получить доступ к управлению следующими атрибутами элемента: Overview (Обзор). Полностью отображает отредактированный CSS, но не дает возможности изменять определения (рис. 18.14); Font Controls (Шрифт). Позволяет настраивать свойства шрифта (рис. 18.15); Text Controls (Форматирование текста). Содержит редактор свойств текста (рис. 18.16); Block (Border and Margin) Controls (Инструмент разметки страницы). Предназначен для управления атрибутами, описывающими внутренние отступы и поля элементов (рис. 18.17); Position Controls (Позиционирование). Управляет положением элемента на странице (рис. 18.18);

Рис. 18.13. Если выбрана ссылка на внешнюю таблицу стилей, вы можете ввести ее URL при помощи палитры Inspector

Рис. 18.14. Закладка Overview

Внедрение CSS 311

Рис. 18.15. Закладка Font Controls

Рис. 18.17. Закладка Block (Border and Margin) Controls

Рис. 18.16. Закладка Text Controls

Рис. 18.18. Закладка Position Controls

312 Знакомство с GoLive Border Controls (Управление рамкой). Позволяет настраивать вид рамки элемента (рис. 18.19); Background Controls (Управление фоном). Управляет атрибутами фона элемента (рис. 18.20); List and Other Controls (Элемент управления списками). Настраивает вид списков и других элементов Web-страницы (рис. 18.21). Стоит отметить, что на данной закладке можно устанавливать даже те CSS-свойства, которые GoLive не поддерживает напрямую.

Рис. 18.20. Закладка Background Controls

Рис. 18.19. Закладка Border Controls

Рис. 18.21. Закладка List and Other Controls

Создание слоя 313

Создание слоя Ранее было показано, как определить CSSслой, превратив обычный элемент в объект (см. раздел «Создание объекта» в главе 11). GoLive рассматривает CSS-слои как плавающие блоки, но тем не менее эти два понятия идентичны. Рис. 18.22. Кнопка Floating Block, позволяющая добавлять новые слои, располагается в палитре Object

Рис. 18.23. Вы можете выделить весь слой, щелкнув мышью по одной из его границ

Рис. 18.24. Если слой выделен, легко изменять его ширину или высоту при помощи одного из манипуляторов

Добавление CSS-слоя на Web-страницу 1. В режиме разметки страницы в окне документа дважды щелкните по кнопке Floating Block (Плавающий блок) в палитре Object (Объект) – рис. 18.22. Теперь этот слой появится в окне документа как пронумерованный прямоугольник. Числа расположены в порядке создания слоев. 2. Переместите курсор к любому краю слоя таким образом, чтобы стрелка сменилась изображением руки (рис. 18.23). Затем нажмите кнопку мыши, чтобы выделить или перетащить объект в любое место на экране. 3. Для изменения размера выделенного блока, перетащите один из манипуляторов, расположенных в каком-либо из его углов (рис. 18.24).

314 Знакомство с GoLive

Изменение свойств CSS-слоя 1. Выделив слой в режиме разметки страницы, при помощи палитры Inspector настройте необходимые свойства (рис. 18.25). Палитра Inspector включает и элементы управления анимацией (см. следующий раздел). 2. Введите имя слоя, которое будет использоваться как уникальный ID в CSS. 3. Укажите координаты верхнего левого угла слоя (см. раздел «Определение положения по отношению к левому верхнему углу» в главе 8). 4. Задайте высоту и ширину слоя (см. раздел «Ширина и высота элемента» в главе 7). 5. Впишите глубину слоя для объектов с z-индексом (см. главу 8). 6. Определите, будет ли слой видимым (см. «Определение видимости элемента» в главе 9). 7. Установите фоновое изображение или цвет (см. главу 6). Помните, что CSS-слой – это объект, которому присвоен уникальный ID с определенным типом расположения. CSS-слой обычно заключается в тэги <div> или <span>. По умолчанию положение слоя задано в абсолютных координатах. Но вы можете задать положение и в относительных координатах с помощью палитры Inspector.

Рис. 18.25. При выделении слоя в режиме разметки страницы палитра Inspector позволяет изменять свойства слоя

Создание DHTML-анимации 315

Создание DHTML-анимации

Рис. 18.26. Буквы начинают перемещаться по экрану, придерживаясь заданной траектории, и образуют имя ALICE

Ранее был затронут вопрос создания обычной поточечной анимации (см. раздел «Анимационные объекты» в главе 14). Данный способ очень эффективен для перемещения простого объекта по прямой, но более сложные способы анимации лучше создавать при помощи программ, подобных GoLive. Дело в том, что вычисления, необходимые для создания сложной анимации, достаточно громоздки и их трудно добавлять в код самостоятельно. В следующем примере вводится пять новых слоев, каждый из которых содержит по одной букве из слова Alice (рис. 18.26). После запуска анимации буквы, перемещаясь по странице, должны составить имя ALICE.

Создание анимации в GoLive

Рис. 18.27. Первый слой в положении инициализации

Рис. 18.28. Кнопка Timeline открывает окно редактора временной шкалы

1. Установите CSS-слой (см. раздел «Создание слоя») и поместите в него какоелибо содержимое (рис. 18.27). 2. Выделив слой, нажмите на кнопку Timeline (Временная шкала) в верхнем правом углу окна документа, между кнопками CSS и JavaScript (рис. 18.28). Откроется окно редактора Timeline Editor (рис. 18.29).

Рис. 18.29. При первом вызове редактора окно пусто

316 Знакомство с GoLive 3. Не снимая выделения со слоя, в режиме разметки страницы в палитре Inspector выберите кривую линию из ниспадающего меню Animation (Анимация). Затем нажмите на кнопку Record (Запись) – рис. 18.30. 4. Переместите объект по произвольной траектории (рис. 18.31). В окне редактора временной шкалы вы увидите прямоугольник, в котором будет указана каждая точка траектории движения (рис. 18.32). Эти точки называются опорными кадрами. 5. Повторите шаги 1–4 для каждого слоя анимации.

Рис. 18.31. По окончании движения слоя траектория остается видимой

Когда страница загружена в Web-браузер, слои должны перемещаться заданным образом (рис. 18.33).

Рис. 18.32. Окно редактора временной шкалы после того, как добавлены все пять букв

Рис. 18.30. Выделив слой, вы можете при помощи палитры Inspector задать траекторию его движения

Рис. 18.33. Изображение появляется только после того, как буквы образовали слово ALICE

Введение в Dreamweaver

19 Изначально программа Dreamweaver предназначалась для разработки DHTML и включала в себя достаточно много различных инструментов. Распространено мнение, что WYSIWYG-редакторы, созданные сторонними компаниями, представляют программы, наиболее полно отвечающие всем требованиям и удобные для редактирования HTML. И до последнего времени это мнение было весьма обоснованным. Однако не так давно появился новый конкурент в области, практически всецело занятой WYSIWYG, – Dreamweaver 4. Новый продукт содержит набор инструментов и утилит, таких как FTP и инструменты управления Web-страницей. Dreamweaver позволяет создавать шаблоны, содержание которых совершенно не зависит от их реализации. Компания Macromedia как разработчик Flash поместила в Dreamweaver несколько инструментов, которые позволяют добавлять Flash-текст и кнопки, даже если Flash у вас не установлен (см. раздел «Flash и DHTML» в главе 10). В этой главе рассказывается, как настроить CSS, используя инструменты Dreamweaver, а также как создавать анимацию сложных объектов.

318 Введение в Dreamweaver

Интерфейс Dreamweaver

Окно документа

Macromedia усердно работала над превращением Dreamweaver из DHTML-генератора в полноценную программу для разработки Web-приложений. И усилия увенчались успехом: компания достигла впечатляющих результатов. Если ранние выпуски ее программного обеспечения были неудачными по причине отсутствия совместимости с WYSIWYG-редакторами, то уже в последних версиях выпускаемых программ этот недостаток был устранен. В программе Dreamweaver используется несложный режим разметки страницы, который позволяет добавлять, двигать и удалять объекты непосредственно на странице, в то время как редактор генерирует соответствующий HTML-код (рис. 19.1). Но вы также можете и сами редактировать HTML-код.

Окно документа предназначено для создания Web-страниц и работы с кодом. Используя кнопки, расположенные в верхней части окна, нетрудно переключаться между следующими режимами отображения документа: Layout view (Режим разметки страницы). Работа в этом режиме сходна с работой в текстовом редакторе. Вы можете просмотреть страницу в том виде, в каком она будет выведена в окне браузера, а также позиционировать и изменять элементы (рис. 19.2); Source view (Просмотр исходного кода). Данный режим позволяет напрямую работать с HTML-тэгами Web-страницы (рис. 19.3);

Рис. 19.1. Интерфейс Dreamweaver включает окно документа, панель свойств, блок управления сайтом и различные палитры

Интерфейс Dreamweaver 319

Source and Layout view (Совмещенный режим разметки страницы и исходного кода). В этом режиме окно документа разделено на две части, что позволяет одновременно работать и с кодом, и со страницей в режиме разметки. Изменения, которые вы вносите в одно из полей, отображаются и в другом.

Панель свойств

Рис. 19.2. Окно Dreamweaver в режиме разметки страницы. Этот режим позволяет добавлять новые элементы и менять положение существующих, как в текстовом процессоре

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

Палитры Рис. 19.3. Окно Dreamweaver в режиме просмотра исходного кода. Вы можете напрямую редактировать исходный код (HTML, JavaScript и CSS)

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

Objects (Объекты). Эта палитра обеспечивает быстрый доступ к огромному количеству HTML-тэгов и объектов,

320 Введение в Dreamweaver которые вы можете добавить на Webстраницу; Reference (Справка). Здесь представлено несколько Web-справочников для быстрого знакомства с программой; CSS Styles (CSS-стили). Данная палитра обеспечивает доступ ко всем классам и стилям, включая связывающие классы и внешние таблицы стилей. Кроме того, она позволяет вызвать Мастер, который проведет вас через весь процесс создания и настройки стилей; Layers (Слои). По мере ввода новых CSS-слоев усложняется процесс управления ими. Эта палитра выводит список всех слоев; таким образом, вы можете выбрать требуемый слой из списка, а также изменить при необходимости его имя.

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

Прочие инструменты Dreamweaver предоставляет все необходимые инструменты, которые должны быть обязательно в каждом полноценном пакете для разработки Web-приложений: инструменты проверки орфографии, проверки кода, проверки связей и т.д. Кроме того, Dreamweaver может импортировать различные форматы в HTML.

Рис. 19.4. Панель свойств изменяет набор отображаемых опций в зависимости от того, какой элемент выделен в окне документа. На рисунке показана панель при выделении текста

Рис. 19.5. На рисунке показана панель свойств при выделении слоя

Внедрение CSS 321

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

Внедрение CSS в Web-страницу

Рис. 19.6. Палитра CSS Styles отображает все доступные в текущем документе классы (на этом рисунке нет доступных классов)

Рис. 19.7. Диалоговое окно New Style позволяет выбрать тип добавляемого стиля, а так же указать место его размещения – во внешнем файле или нет

1. Создайте новый или откройте уже существующий HTML-файл, выбрав в меню пункты File ⇒ New (Файл ⇒ Создать) или File ⇒ Open (Файл ⇒ Открыть). 2. В палитре стилей CSS щелкните по кнопке New Style (Создать стиль) – рис. 19.6. Если палитра не открыта, выберите пункты Window ⇒ CSS styles (Окно ⇒ CSS-стили). Откроется диалоговое окно New Style (Создать стиль) – рис. 19.7. 3. Выберите типы CSS-селектора, которые будете использовать (см. главу 2). Если вы хотите добавить класс, отметьте пункт меню Make Custom Style (class) – Cоздать собственный класс. Для присвоения ID задайте опцию Redefine HTML Тag (Переопределить HTML-тэг) или Use CSS Selector (Использовать CSS-селектор). 4. Нажмите на кнопку This Document Only (Только этот документ), чтобы включить созданный вами стиль в тэг <style>, затем щелкните по кнопке OK.

322 Введение в Dreamweaver 5. В окне определения стиля выставьте только те определители CSS, которые будете использовать (см. раздел «CSSредактор»). Вы можете в любой момент щелкнуть по кнопке Apply (Применить), чтобы войти в окно документа и посмотреть, какие изменения внесены. 6. После определения CSS-правила нажмите на кнопку OK, чтобы вернуться в окно документа. 7. Если вы настраиваете какой-либо класс, используйте палитру CSS Style, чтобы установить класс для выделенного объекта в окне документа (рис. 19.8). Процесс добавления новых внешних таблиц стилей схож с добавлением стиля к странице. Dreamweaver автоматически настраивает и проверяет связи.

Рис. 19.8. Было добавлено два стиля. Первый – bodycolor – встроен в саму страницу, а второй – sidecolor – располагается во внешнем файле (на иконке, отмечающей этот стиль, присутствует звено цепочки)

Присоединение внешнего CSS-файла 1. Создайте новый или откройте уже существующий HTML-файл. 2. В палитре CSS Styles нажмите на кнопку New Style (Создать стиль). Откроется диалоговое окно. 3. Выберите типы CSS-селектора. Для присвоения ID укажите опцию Redefine HTML Тag (Переопределить HTML-тэг) или Use CSS Selector (Использовать CSS-селектор). 4. Удостоверьтесь, что выделена кнопка, находящаяся рядом с пунктом Next Style Sheet File (Следующий файл с таблицами стилей). 5. Настройте те опции CSS, которые вы будете использовать. С помощью кнопки Apply вы можете в любой момент войти в окно документа и посмотреть, какие изменения внесены.

6. После определения CSS-правил нажмите на кнопку OK, чтобы вернуться в окно документа. 7. При настройке класса используйте палитру CSS Style, чтобы установить класс для выделенного объекта в окне документа. Dreamweaver не позволяет добавлять классы, таким образом, имеются только стандартные классы. Однако допускается добавлять правила классов непосредственно в окне редакторе кода.

CSS-редактор 323

CSS-редактор При добавлении или создании правил CSS Dreamweaver требует использования CSSредактора для ввода значений каждого правила. CSS-редактор состоит из следующих страниц (чтобы переключаться между страницами, выберите соответствующее название из списка в левой части окна): Type (Тип). На этой странице устанавливаются атрибуты шрифта (рис. 19.9); Background (Фон). Здесь настраиваются свойства фона элемента (рис. 19.10); Block (Блок). Отсюда можно задать свойства абзацев (рис. 19.11); Box (Поля и внутренние отступы). Эта страница предназначена для указания полей элемента и внутренних отступов (рис. 19.12);

Рис. 19.9. Страница Type

Рис. 19.10. Страница Background

Рис. 19.11. Страница Block

Рис. 19.12. Страница Box

324 Введение в Dreamweaver Border (Рамка). Здесь настраивается вид рамки элемента (рис. 19.13); List (Список). С этой страницы вы можете установить вид списков (рис. 19.14); Positioning (Положение). Элементы управления данной страницы позволяют определить положение объекта (рис. 19.15); Extensions (Дополнительно). На этой странице расположены элементы управления настройкой дополнительных свойств, зависящих от типа браузера, под который оптимизируется страница, – например, cursor и т.п. (рис. 19.16).

Рис. 19.14. Страница List

Рис. 19.15. Страница Positioning

Рис. 19.13. Страница Border

Рис. 19.16. Страница Extensions

Создание дополнительного слоя 325

Создание дополнительного слоя Вы создаете CSS-слой, присваивая объекту ID и определяя его местоположение на странице (абсолютное или относительное) при помощи тэга <div> (см. раздел «Создание объекта» в главе 11). Dreamweaver обеспечивает простой доступ к управлению слоями. Рис. 19.17. Перетаскивая пиктограмму Draw Layer из палитры Objects в окно документа, вы добавляете слой к Web-странице

Рис. 19.18. Чтобы выделить слой, щелкните по любой из его границ

Рис. 19.19. Вы можете изменять ширину и/или высоту слоя, перемещая маркер на нужной стороне

Добавление слоя на Web-страницу 1. Находясь в режиме разметки страницы в окне документа (или в режиме просмотра исходного кода и разметки страницы), перетащите пиктограмму Draw Layer (Добавить слой) из палитры Objects в окно документа (рис. 19.17). Добавленный слой появится в окне документа в виде прямоугольника. 2. Переместите указатель мыши к любому краю слоя таким образом, чтобы курсор превратился в руку (рис. 19.18). Вы можете щелчком мыши выделить этот слой или передвинуть его в любое место экрана. 3. Чтобы изменить размер выделенного слоя (прямоугольника), перетащите один из маркеров, находящихся в углах выделенной области (рис. 19.19).

326 Введение в Dreamweaver

Изменение свойств CSS-слоя 1. Выделив слой в окне документа, используйте панель свойств для доступа к его свойствам (рис. 19.20). 2. Введите имя этого слоя. Оно будет использоваться аналогично ID CSS-объекта. 3. Укажите координаты левого верхнего угла слоя (см. раздел «Определение положения по отношению к левому верхнему углу» в главе 8). 4. Задайте высоту и ширину слоя (см. раздел «Ширина и высота элемента» в главе 7). 5. Введите z-индекс слоя (см. раздел «Элементы в порядке стека (3D-позиционирование)» в главе 8). 6. Установите видимость данного слоя (см. раздел «Определение видимости элемента» в главе 9). 7. Укажите цвет фона или фоновое изображение (см. главу 6). 8. Определите тип тэга, используемого слоем. Обычно применяется <div> или <span>, но допустимы и Netscape-тэг (для Netscape 4) <layer> или <ilayer> (см. главу 16). По умолчанию он соответствует <div>, что более предпочтительно.

9. Установите левый, верхний, правый и нижний края отсекаемой области, если это возможно. Затем укажите, каким образом должна обрабатываться невидимая часть (см. разделы «Определение видимой части элемента» и «Управление невидимой частью» в главе 9). Dreamweaver располагает все CSS-слои в тэге <div>, предпочитая это расстановке ID в тэге <style>. Я считаю наиболее удобным способом определение ID в тэге <style> или добавление его из внешнего файла, но метод, используемый Dreamweaver, также имеет право на жизнь.

Рис. 19.20. Панель свойств обеспечивает доступ к свойствам слоя, контролируемым CSS

Создание анимации 327

Создание анимации

Рис. 19.21. Когда документ загружается на Web-страницу, буквы начинают перемещаться по заданным траекториям и составляют имя ALICE

Ранее было показано, как создавать простые поточечные анимации (см. раздел «Анимационные объекты» в главе 14). Имитацию движения объекта по кривой или аналогичную анимацию нескольких слоев удобнее задать при помощи программ, подобных Dreamweaver. Представьте, что вам необходимо отобразить каждый пиксел изображения в отдельности, определив для каждого положение и цвет. Не так уж и весело, правда? И в данном случае на помощь приходят редакторы изображений, которые берут львиную долю рутинной работы на себя. То же самое касается и DHTMLанимации. Вы можете создавать анимацию вручную, но это достаточно трудоемко, а кроме того, велика вероятность допустить ошибку. К тому же возникает множество проблем при необходимости быстрого обновления. В рассматриваемом далее примере вводится пять слоев, каждый из которых содержит одну букву (рис. 19.21). Буквы, перемещаясь по экрану в течение нескольких секунд, составят имя ALICE.

Создание анимации при помощи Dreamweaver Рис. 19.22. Первый слой в исходном положении

Рис. 19.23. Так выглядит окно Timelines после первой загрузки (до анимации объектов)

1. Создайте CSS-слой (см. раздел «Создание дополнительного слоя») и введите требуемое содержимое (рис. 19.22). 2. Выберите пункты Window ⇒ Timelines (Окно ⇒ Временные шкалы). Откроется окно Timelines (рис. 19.23).

328 Введение в Dreamweaver 3. Выделив в окне документа созданный на шаге 1 слой, выберите из ниспадающего меню (оно расположено в правом верхнем углу) пункт Record Path of Layer (Записать путь слоя) – рис. 19.24. 4. Передвиньте объекты по произвольной траектории (рис. 19.25). В окне Timelines вы увидите кружки, обозначающие каждую точку движения (рис. 19.26). Эти точки называются опорными кадрами. 5. Повторите шаги 1–4 для всех слоев, которые требуется включить в анимацию. 6. Проверьте, отмечен ли пункт Autoplay (Автовоспроизведение) в окне Timelines, позволяющий запустить созданную анимацию при загрузке в окно браузера. При загрузке этой страницы в DHTML-совместимый Web-браузер слои должны перемещаться указанным образом.

Рис. 19.24. Для записи анимации выберите пункт Record Path of Layer из ниспадающего меню

Рис. 19.25. Dreamweaver отобразил точками траекторию движения слоя

Создание анимации 329 Можно использовать опорные кадры для изменения видимости объекта и его z-индекса. В приведенном примере изображение Алисы появляется только после того, как буквы составят ее имя (рис. 19.27). Чтобы добиться этого, пометьте кадры, по достижении которых программа отобразит данный слой на экране или скроет его. Затем снимите флажок Visible в свойствах объекта. Объект будет невидимым, пока вы не выберете другой кадр и не установите этот флажок.

Рис. 19.26. Теперь окно Timelines включает все пять слоев

Рис. 19.27. Изображение появляется только после того, как все буквы заняли заданное положение

330 Введение в Dreamweaver Окно Timelines Web-дизайнеры долгое время работали с временными шкалами, чтобы создавать и контролировать анимацию. Большинство коммерческих программ для создания анимации используют эту технологию, и в Dreamweaver также применяется именно этот способ. Окно Timelines позволяет не только перемещать объекты по экрану, но и указывать, когда именно надо начать движение или сколько для этого потребуется времени. Работа в окне Timelines на первый взгляд может показаться сложной, но на самом деле все достаточно просто. Окно состоит из следующих частей: Playback controls (Управление воспроизведением). При помощи данного инструмента можно переместиться в любой момент времени воспроизведения анимации; Keyframe editing (Редактирование опорных кадров). Инструмент позволяет управлять позиционированием и видимостью объектов в любой момент; FPS controls (Управление FPS). Устанавливая частоту кадров (их число в секунду), вы можете изменять качество воспроизведения; Autoplay and looping controls (Управление автовоспроизведением и повторением). Вы можете запустить созданную анимацию сразу по загрузке страницы и при желании повторять ее бесконечное количество раз.

○ ○ ○ ○ ○

○

Динамические Web-сайты

○

Часть IV ГЛАВА 20 ◆ ГЛАВА 21 ◆ ГЛАВА 22 ◆ ГЛАВА 23 ◆ ГЛАВА 24 ◆ ГЛАВА 25 ◆ ГЛАВА 26 ◆ ГЛАВА 27 ◆ ГЛАВА 28 ◆ ГЛАВА 29 ◆

Понятие о динамических Web-сайтах ..................... 332 Создание динамического Web-сайта ...................... 344 Разметка Web-страницы ......................................... 355 Импорт внешнего содержимого ............................. 381 Навигация Web-сайта .............................................. 389 Средства управления ............................................... 419 Специальные эффек ты ........................................... 451 эффекты Му ль тиме диа ........................................................... 476 Муль льтиме тимедиа Отладка кода ........................................................... 494 Буд ущее динамического Internet ............................ 504

Понятие о динамических Web сайтах

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

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

Рис. 20.1. Первая модель представляет линейные пути от A к B, а далее к C и D. Это типичная линейная модель. По такому принципу вы просматриваете кинофильм: от начала и до конца. Динамическая модель (снизу) позволяет переходить от одной точки к другой, минуя промежуточные, находить альтернативные варианты решения поставленной задачи (d) и находить новую информацию (4)

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

Отличительные черты динамического Web-сайта Термин «динамика» может означать многое, его значения в большой степени зависят от сферы и времени применения данного слова. Под этим термином понимают как анимацию, так и системы мультимедиа. Всемирная сеть представляет, по сути, высоко динамичную среду, в основе функционирования которой лежит использование гипертекста, помогающего разработчикам Web-приложений связывать информацию и создавать более понятное человеку окружение. Применяя CSS, JavaScript и Document Object Model (DOM), можно создавать динамические Web-сайты.

334 Понятие о динамических Web-сайтах На сегодняшний день большинство сайтов статичны. Загрузив однажды подобную страницу, вы едва заметите какие-либо изменения. DHTML позволяет Web-разработчикам преобразовывать их творения и создавать интерактивные страницы, которые быстро реагируют на действия посетителя. Динамические Web-страницы должны удовлетворять как минимум следующим критериям (рис. 20.2): интерактивность. Web-сайт быстро реагирует на действия посетителя; синхронность. Web-сайт объединяет поиск информации и возможность обращения к различным источникам с минимальным временем поиска разделов, необходимых пользователю;

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

Рис. 20.2. Что же означает термин «динамический»? Вот несколько вариантов ответа

Что такое гипертекст 335

Что такое гипертекст

Рис. 20.3. Сайт, посвященный астрономической картине дня, поможет вам понять отличия гипертекста от навигации. Ссылки в основном тексте дают доступ к более подробной информации о встреченном термине (это гипертекст), а навигационные ссылки открывают другую страницу сайта

Рис. 20.4. Щелкнув по ссылке гипертекста, вы переходите на страницу, которая дает полную информацию о термине «regolith»

Многие путают гипертекст с навигационными ссылками. Действительно, здесь не так уж сложно ошибиться. В Web как гипертекст, так и навигационные ссылки определяются при помощи одного и того же HTML-кода – <a>…</a>. Навигационные ссылки используются для последовательного перемещения из раздела в раздел. А гипертекст позволяет посетителю после щелчка по слову, фразе или изображению на Web-странице получить более подробные сведения по интересующему предмету. Благодаря гипертексту простая страница теоретически может содержать бесконечный объем информации (рис. 20.3 и 20.4). На практике, конечно, нельзя объять необъятное, но все же нетрудно включить достаточно данных, которые способен просмотреть посетитель. Авторы, подготавливающие содержание сайта, указывают, в каких случаях необходимы гипертекстовые ссылки. При создании сайта Web-разработчик преследует две цели: помочь посетителям как можно быстрее найти нужные сведения и позволить просматривать, определять и обсуждать информацию при помощи гипертекста. Internet является не только огромнейшей базой знаний или средством интеллектуального и эмоционального развития, таким как книга, когда автор через произведение доносит людям свои чувства, эмоции и переживания. Internet представляет собой еще и средство непосредственного общения людей: возможность осуществлять интерактивную переписку, принимать участие в различных форумах, происходящих в режиме реального времени, и т.д. Используя Глобальную сеть, многие люди общаются друг с другом, обмениваются опытом.

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

Динамический дизайн Возможно, люди заходят на ваш Web-сайт не для того, чтобы полюбоваться на навороченные спецэффекты, а чтобы найти там определенные сведения. Цель любого сайта – помочь посетителю удовлетворить потребность в информации. Но надо помнить, что правильно разработанный динамический сайт всегда лучше статического. Вот несколько принципов, которых следует придерживаться при создании динамического сайта:

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

отображайте только важную информацию. Информация становится знанием лишь в том случае, когда понятна ее важность. Более того, необязательные сведения могут отвлекать, а большой объем данных, скорее всего, запутает посетителя вашей страницы. Используйте DHTML, чтобы при необходимости отображать и скрывать важную информацию; делайте изменения заметными. Зачастую мы не замечаем изменений, происходящих вокруг нас. Изменения в содержании Web-страницы должны происходить немедленно по запросу посетителя и быть заметными; помогайте определить местоположение и направление. Существует главным образом один недостаток, касающийся всей сети, – в ней легко заблудиться. По сравнению с окружающим нас миром, в котором можно хотя бы оглянуться, чтобы определить, откуда мы пришли и куда направляемся, многие Web-сайты кажутся лабиринтами. Используйте DHTML, чтобы помочь посетителям сориентироваться в виртуальном пространстве; не будьте диктатором, предоставьте свободу выбора. Главная цель любого сайта – позволить посетителям свободно перемещаться по его содержимому. Направьте посетителей к нужной им информации, однако позвольте им добираться теми путями, которые они изберут. Ссылки, которые вы включаете в Web-страницу, важны так же, как размещенные на ней текст и графические объекты.

Динамический дизайн 337

Размещение объектов на Web-странице

Рис. 20.5. Так выглядит страница, при создании которой использовался стиль размещения Unrestrained

Рис. 20.6. Сайт Wired News использует стиль размещения Unrestrained: содержимое занимает все окно браузера

Вы можете свободно изменять размер активного окна, разрешение экрана, размер шрифтов, однако необходимо тщательно продумать, как будет выглядеть ваша страница, прежде чем приступить к действиям. Например, вам известно, что сайт будет располагаться в окне браузера, но будут ли размеры окна достаточными, чтобы вместить всю запланированную информацию? Перед тем как начинать реализацию проекта, каждый Web-разработчик должен тщательно продумать, какой из четырех основных стилей размещения объектов будет использоваться. Стили состоят из двух основных частей. Первая часть – область содержания, которая включает навигацию, заголовки, графику и текст – другими словами, все, интересующее посетителя. Другой составляющей любого стиля является «заполнитель». Независимо от того, пуст «заполнитель» или нет, он предназначен только для заполнения пустого пространства в окне браузера. Если вы хотите сделать страницу действительно привлекательной, очень важно найти золотую середину между размерами областей содержания и «заполнителя». Ниже перечислены четыре основных стиля организации страницы, в которых соблюдается этот баланс:

Unrestrained (Неограниченный). Содержание в окне располагается по горизонтали слева направо и по вертикали сверху вниз, таким образом, окно браузера задействуется полностью (рис. 20.5). Этот дизайн исключает необходимость в «заполнителе». Но широкие колонки текста – характерный признак стиля Unrestrained – не всегда легко читать. Новостной сайт Wired (рис. 20.6) использует стиль Unrestrained, позволяя

338 Понятие о динамических Web-сайтах содержимому в центральной колонке занимать все свободное пространство; Fixed width (Фиксированная ширина). Содержание помещается в столбце фиксированной ширины. Ограничение может быть слева, справа или с обеих сторон (рис. 20.7). На сайте Salon (www.salon.com) содержимое страницы ограничивается по ширине, располагаясь в центре окна браузера. Размер колонки составляет 736 пикселов (близко к размеру, который может отобразить дисплей 800 пикселов без скроллинга, если окно занимает весь экран), а белые полосы заполняют незанятое пространство слева и справа (рис. 20.8); Fixed height (Фиксированная высота). Содержание размещается в полосе фиксированной высоты. Ограничение может быть сверху, снизу и/или с обеих сторон (рис. 20.9). Поэтому содержимое такой Web-страницы располагается по горизонтали. Подобный дизайн применяется достаточно редко, так как обычно целесообразнее максимально увеличить высоту информационной области. Я использовал этот способ для того, чтобы создать небольшой сайт для фотографий со дня рождения моей дочери – www.webbedenvironments.com/ jocelynstory (рис. 20.10);

Рис. 20.7. Стиль размещения Fixed

Рис. 20.8. На сайте Salon используется стиль размещения Fixed width: вся информация располагается в центральной колонке

Рис. 20.9. Стиль размещения Fixed height

Размещение объектов на Web-странице 339

Fixed size (Фиксированный размер). Как высота, так и ширина области отображения содержания ограничены (рис. 20.11). Вы можете задать такое расположение двумя способами. Первый заключается в ограничении области при помощи фреймов извне. На Web-сайте Portishead (www.portishead.co.uk) используется именно этот способ (рис. 20.12). Другой метод – открыть в браузере новое окно фиксированного размера (см. раздел «Новое окно браузера» в главе 14).

Рис. 20.10. Я использовал стиль Fixed height для сайта дочери, чтобы создать атмосферу кино

Рис. 20.11. Стиль размещения Fixed size

Рис. 20.12. Web-сайт Portishead применяет стиль Fixed size. Это помогает контролировать область экрана, в которой будет отображаться содержимое, но использование такого стиля приводит к тому, что страница отображается одинаково и не зависит от размера окна браузера и установленного разрешения монитора

340 Понятие о динамических Web-сайтах

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

Рекомендации Некоторые из приведенных правил могут показаться очевидными, но когда вы находитесь на средней стадии выполнения проекта, очень легко забыть даже самые простые из них. реализуйте навигацию последовательно. После определения общей структуры навигации вашего сайта не вносите никаких кардинальных изменений на отдельные страницы. Если главное окно навигации находится на экране слева, не нужно перемещать его вправо, в область текстового окна. Если вы расположили вспомогательную навигацию снизу, не следует располагать в этой области баннеры. Но, как и в любом правиле, здесь существует ряд исключений. Навигационная система главной страницы сайта отличается от систем остальных страниц, как обложка журнала отличается от его содержимого; помогите посетителю ориентироваться на сайте. Создание общего пути поможет

указать посетителям дорогу к исходной странице. Самый простой способ – поставить на страницах метки (обычно начиная с главной), чтобы посетители могли определить свое местонахождение: Home > Forest > More forest > Witch’s house. Этот путь отражает логическую последовательность событий, и каждый заголовок представляет собой ссылку, помогающую вернуться назад. Подобно тому, как Тезей вышел из лабиринта Минотавра, посетители вашего сайта смогут вернуться к началу своего путешествия; предупреждайте, если навигация неосуществима. Очень полезно уметь ориентироваться в Сети. Посетители, уже знакомые с вашим сайтом, могут не понять некоторые из тех терминов, которыми вы описываете навигацию. Недовольство пользователей Сети часто вызвано тем, что во время поиска необходимой информации их направляют по неверному пути. Кроме того, им приходится ждать загрузки ненужных страниц. Добавьте к терминам однодва поясняющих предложения, чтобы подсказать посетителям, что они найдут среди приведенных ссылок. Если у вас на экране нет места для отображения подобной информации, используйте DHTML (см. раздел «Всплывающий гипертекст» в главе 25); предоставьте посетителю свободу действий. На сегодняшний день программное обеспечение позволяет пользователям перемещать по экрану палитры управления, добавлять инструменты и настраивать интерфейс. Web ограничивает пользовательский контроль над интерфейсом, однако желательно включить в сайт некоторые полезные возможности. В маленьком

Навигация: рекомендации и запреты 341 окне управления следует поместить карту сайта. С ее помощью посетители будут быстро перемещаться по сайту (см. раздел «Панель управления сайтом» в главе 24). Некоторые посетители привыкли использовать навигационные ссылки на главной странице, другим нравится свободно перемещаться по страницам. Необходимо предоставить посетителю право выбора; не создавайте тупиков на карте страницы. Недавно я читал статью в одном популярном Internet-журнале для архитекторов. Дочитав ее до конца, я обнаружил, что могу свободно перелистывать страницы статьи, но не в состоянии вернуться обратно на главную страницу сайта или попасть в какуюлибо другую его часть. Нет ничего, что вызвало бы большее раздражение, чем тупик в конце страницы. Между прочим, подобные варианты планирования сайтов встречаются достаточно часто. Например, когда при заполнении какой-либо анкеты вы вводите всю информацию и нажимаете Submit (Подтвердить), появляется страница, где красуется благодарственная надпись и ничего более. Нередко такие страницы не содержат даже стандартной навигации.

Запреты Теперь, когда вы узнали о рекомендациях, я расскажу о том, чего следует избегать при проектировании системы навигации:

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

посетитель вообще не пользуется. Рассмотрим банковский сайт, который предоставляет ряд услуг частным вкладчикам, предпринимателям и корпорациям. На первой странице перечислены все три опции, эта же страница является и отправной точкой в диалоге с посетителем, будь это частное лицо, бизнесмен или представитель компании. Но ссылки на все три категории остаются на экране и при загрузке следующих страниц. Возможно ли, что частный вкладчик вдруг заинтересуется услугами, предоставляемыми компаниям, и перейдет в другой раздел? Маловероятно. Да и очень трудно представить себе, при каком условии это может случиться. Но даже если подобный интерес возникнет, почему бы не вернуться на главную страницу и не начать все оттуда? размещайте навигационные элементы таким образом, чтобы они всегда были доступными. Представьте, что вы набираете письмо в текстовом редакторе. Когда вы доходите до конца области печати, она автоматически увеличивается, и написанный текст смещается вверх, скрывая строку меню. И каждый раз, когда вам необходим доступ к меню, приходится перемещаться к началу письма, чтобы строка меню опять появилась. Подобный процесс не очень-то приятен, однако большинство Web-дизайнеров разрабатывают сайты именно таким образом. Один из способов решения этой проблемы заключается в размещении на странице ссылки Return to top (В начало). Но есть и более изящные выходы из описанной ситуации. Я предпочитаю располагать навигационные элементы во фреймах таким образом, что при прокрутке страницы

342 Понятие о динамических Web-сайтах они остаются на одном месте и ими всегда можно воспользоваться. Посетителям не приходится нескончаемо долго искать необходимую страницу и тратить свое драгоценное время. Конечно, важно уменьшить размер этих фреймов, чтобы увеличить место для содержимого Web-страницы (см. раздел «Открытие и закрытие фреймов» в главе 22); не путайте типы навигации. Не все типы навигаций создаются одинаковым способом. Web-страницы могут совмещать различные типы, применение какого-либо из них зависит от множества факторов. Посетители используют основную навигацию для перемещения между наиболее важными узлами сайта. Визуализация – наиболее удобный способ различать типы навигаций (см. раздел «Установка сложных ссылок» в главе 24); не полагайтесь на навигацию, встроенную в браузер. Многие посетители являются заложниками встроенных в браузеры навигационных систем. Они удобны, а результат от нажатия кнопок Back (Назад) и Forward (Вперед) вполне предсказуем. Но некоторые люди не умеют пользоваться этой функцией и не смогут добраться до нужного места на сайте, если вы не предоставите им необходимых ссылок. Делайте все, чтобы посетители без труда находили выход с любой страницы вашего сайта. Никогда не заводите их в тупик. Наоборот, создавайте ссылку, которая возвращала бы посетителя на ту страницу, с которой он пришел (см. раздел «Создание кнопки Back» в главе 25). не размещайте одни и те же ссылки на каждой странице. Одна из наиболее распространенных ошибок, допускае-

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

Навигация: рекомендации и запреты 343 Иголка в стоге сена Особенность, отличающая Всемирную сеть от других средств информации, заключается в возможности связывать фрагменты данных таким образом, чтобы указать на их взаимосвязь. Это гипертекст, который и отличает Internet от книг, телевидения, кинематографа и телефонии. Так почему же часто создается впечатление, что большинство Web-страниц и сайтов копируют перечисленные информационные средства? Некоторые разработчики используют индекс-подобные меню, которые не дают посетителю никакого представления о их местонахождении на сайте. Страницы, страницы информации… Читателю приходится перелопачивать весь этот объем, чтобы найти действительно необходимые сведения. Экраны, заполненные графикой, баннерами и различными кнопками… Для их загрузки, наверное, потребуется целая вечность! Еще хуже выглядят страницы, на которых всевозможные ссылки, позволяющие перейти к любому месту сайта, заполняют практически весь экран. В результате поиск нужной ссылки превращается в поиск иголки в стоге сена. Единственный довод, который можно привести в пользу подобных страниц, – это уменьшение времени ожидания. Ведь для того, чтобы изменить содержание Webстраницы, необходимо загрузить еще одну, и, таким образом, посетителю приходиться ждать, ждать и ждать… А ведь время – деньги. Поэтому, чтобы позаботиться о материальном благосостоянии посетителя и не заставлять его терять время, многие Web-дизайнеры размещают все содержание на одной странице. DHTML все меняет. Он позволяет показывать и прятать объекты динамически, формируя содержание Web-страницы в зависимости от нужд посетителей. Различное содержание может быть загружено на одной странице; вы способны отображать то, что нужно, без ожидания загрузки новых страниц.

Создание динамического Web сайта

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

21 Прежде, чем разрабатывать какой бы то ни было Web-сайт, следует тщательно продумать его устройство, его план. Этот план поможет вам определить структуру сайта, а затем, отталкиваясь от нее, расположить графику, текст и код. Большие Web-сайты, созданные без проектирования, с большой вероятностью будут неработоспособны, как наверняка развалился бы небоскреб, построенный без необходимых расчетов. Но даже если вы создаете относительно небольшой Webсайт, хорошее проектирование, несомненно, поможет сэкономить время. Если вы решили сделать сайт динамическим, предварительное проектирование становится еще более необходимым. Динамическое содержание влечет за собой появление дополнительных опций, что повышает вероятность сбоев. Поэтому простая предусмотрительность не помешает. В данной главе вы узнаете о стадиях создания динамических Web-сайтов (рис. 21.1).

Шаг 1. Проектирование 345

Шаг 1.. Проектирование

Сбор и сортировка информации

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

Этот шаг кажется вполне очевидным, однако вы были бы удивлены, узнав, разработчики скольких сайтов никогда не задавались вопросом, для чего нужен их сайт (рис. 21.2). А какова цель создания вашего сайта? Вам необходимо классифицировать всю информацию и продумать систему навигации; решить, каким образом разделить данные на различные разделы Web-сайта, как назвать эти разделы, каким образом их лучше преподнести. Это первоочередные задачи при разработке плана сайта.

Пользователь или посетитель Большинство Web-дизайнеров называют посетителей своего сайта пользователями. Я никогда не был поклонником этого термина. Во-первых, слово «пользователь» имеет какой-то негативный оттенок, а я ни в коем случае не хочу относиться так к людям, которые посещают мой сайт. Во-вторых, «пользователь» (или «user») звучит так, как если бы специалист по маркетингу решил описать рабочих и служащих, используя термин «человеческий ресурс». Я считаю, что термин «пользователь» принижает достоинство людей, для которых я разрабатываю сайт. Вместо этого я предпочитаю использовать термин «посетитель». Данные термины отличаются только написанием, но не стоит забывать, что язык – очень мощное средство, которое формирует наши взгляды. Я предпочитаю думать о себе как о хозяине, принимающем гостей или посетителей, а не как о поставщике для пользователей. Всегда помните, что посетитель – это человек, для которого вы делаете сайт. Создаете вы личный сайт или многомиллионное Web-приложение, вы должны помнить о посетителях всегда, начиная от стадии обдумывания сайта и вплоть до непосредственной его разработки. Но DHTML решает и эту проблему. С его помощью легко отображать и изменять объекты динамически, то есть отбирать содержимое Web-страницы согласно запросам посетителя, загружать различную информацию и затем обновлять ее, не затрачивая ценное время посетителя на загрузку другой Web-страницы.

346 Создание динамического Web-сайта Например: текст введения; образец раздела; примеры кодов.

Рис. 21.2. Соберите информацию для сайта

Определение читательской аудитории Тематика вашего сайта полностью определяет его аудиторию (рис. 21.3). Этот фактор является наиболее важным при прогнозировании запросов посетителей. Чем точнее вы опишете содержание сайта, тем точнее сможете представить его аудиторию. Кроме того, содержание поможет правильно оформить страницы. Например, посетители сайта компьютерного магазина, вероятно, будут удивлены, увидев на заднем плане цветы, – они этого не ожидают. После того как вы определили предполагаемый контингент посетителей, продумайте следующие вопросы: какие функции и в каких случаях будет использовать посетитель; какой браузер и сопутствующее программное обеспечение применит посетитель вашего сайта; что полезного для себя почерпнет посетитель из вашего сайта. Простой сайт, точнее Web-страница, может иметь множество различных назначений. Придумайте различные сценарии для нескольких потенциальных посетителей, которых будет интересовать совершенно различная информация вашего сайта. Определите, каким образом посетители могли бы добираться до своей цели, и, используя эту информацию, как можно лучше продумайте навигационную систему сайта.

Рис. 21.3. Определите читательскую аудиторию вашего сайта

Например: профессиональные Web-разработчики; разработчики-новички; менеджеры Web-проекта.

Формулировка целей Теперь, когда вы знаете, кто будет посещать ваш островок во Всемирной сети, пора, наконец, твердо решить, чего же хотите вы (рис. 21.4). Какую цель вы преследуете, сказав свое слово в безумном Internet-мире? Некоторые Web-сайты подстраиваются под желания своих посетителей, другие могут преследовать самые эгоистичные цели. Но тем не менее вы обязаны знать, чего хотите добиться, проделывая всю эту огромную работу. Например: предусмотреть место под просмотр примеров; предусмотреть место под загрузку кода; предусмотреть модернизацию и корректировку.

Шаг 1. Проектирование 347

Предоставляемые функции и интерактивность Рис. 21.4. Сформулируйте свои цели

Рис. 21.5. Продумайте предоставляемые функции и интерактивность

Теперь пора определить набор функций и возможностей, которые вы будете использовать, чтобы достичь поставленной цели (рис. 21.5). Нужны ли этому сайту видео и звуковое сопровождение? А как насчет DHTML? Желаете интерактивную навигацию, сэр? А не применить ли CGI? Может быть, Java? Вспомогательные базы данных? Flash? Ищите самый простой способ, чтобы выполнить работу. Например: навигация: ниспадающее меню; спецэффекты: текст с федингом;

Рис. 21.6. Определите стиль оформления

управление: всплывающий гипертекст.

Стиль оформления Определите, какой стиль оформления в полной мере соответствует тематике сайта и вашим запросам, продумайте набор предоставляемых функций. И, конечно, не забывайте о своих посетителях, попробуйте представить их ожидания. Решите, какую цветовую гамму, какие шрифты и графику вы будете использовать (рис. 21.6). Например: разметка: ограниченная высота; цвет: пурпурный, серебряный, зеленый и красный; шрифты: Arial, Arial Black, Trebuchet MS.

Рис. 21.7. Схема позволяет логически построить сайт, наиболее важные разделы располагаются на верхнем уровне, более детальные – под ними

348 Создание динамического Web-сайта

Шаг 2.. Разработка

Схема сайта

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

Схема рассматривает сайт как линейный объект, у которого каждый раздел сайта располагается в верхушке схемы, а каждая Web-страница соответствует своей категории (рис. 21.7). Схема сайта отражает его файловую структуру. Хотя существует одно «но»: поскольку схема отображает линейную модель, она может приводить к ошибкам при проектировании Web-сайтов, у которых есть ссылки между разделами.

Создание плана сайта План сайта позволяет вашим клиентам и коллегам (художникам, программистам, менеджерам проекта и т.д.) понять его структуру и наметить общие пути разработки (рис. 21.8).

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

Шаг 2. Разработка 349 Блок-схемы показывают, каким образом работают и взаимодействуют друг с другом различные страницы сайта. Как правило, страницы изображают прямоугольниками, а ссылки – линиями, но вы также можете добавлять и другие условные обозначения: внешние связи, Java-приложения и др. Преимущество блок-схем над простыми схемами заключается в том, что разработчик способен более точно описать характер связей между страницами.

Первый эскиз сайта Выберите стиль разметки Web-страницы (см. раздел «Размещение объектов на Webстранице» в главе 20). Затем на листе бумаги или в графическом редакторе набросайте структуру Web-страницы (рис. 21.9). Не нужно подробно вырисовывать схему каждой создаваемой страницы, просто пометьте, где и какие элементы вы хотите разместить.

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

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

Рис. 21.9. Эскиз сайта позволяет определить, как будут располагаться и взаимодействовать различные элементы

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

Внешний вид определяет первое впечатление В графических редакторах, таких как Photoshop, создание модели сайта основано

на использовании его эскиза (рис. 21.11). Программы, подобные Photoshop и Macromedia Fireworks, позволяют создавать интерактивные графические изображения и подготавливать их для размещения в Web. На этой стадии разработки сайта вы можете свободно экспериментировать с дизайном – еще не поздно все исправить!

Рис. 21.10. Раскадровка очень эффективна для планирования задач, которые сможет выполнять посетитель. В данном примере посетитель хочет посмотреть пример кода. Раскадровка показывает, какие ссылки будут активизированы и как выглядит экран в каждом случае

Шаг 2. Разработка 351

Рис. 21.11. Общий вид Web-сайта и первое впечатление при его загрузке во многом зависят от оформления. Оформление сайтов обычно проводится в графическом редакторе Photoshop. Такие элементы, как текстовые ссылки, должны создаваться при помощи HTML-текста, окончательная отладка – при помощи CSS. В данном примере тип оформления используется временно, в окончательной версии все будет выглядеть иначе

Сетка расположения В вашем распоряжении есть еще один замечательный инструмент – Сетка расположения (Layout grid). Содержание Web-страницы помещается в особые прямоугольные области. Если вы разработали четкую схему сайта, то можете свободно создавать множество различных вариантов разметок в пределах одного стиля (одной темы). Если вы правильно используете эту функцию, она автоматически определяет, где в содержании страницы применяется особый тип текста, и помогает выяснить последовательность появления Web-страниц. Сетка разбивает страницу на области по типу содержания: заголовки, иллюстрации, текст, номера страниц и т.д. Вы можете создавать схему разбиения для любого типа разметки Web-страниц. У каждого формата есть свои достоинства и недостатки, зависящие от размера окна браузера. Например, текстовые колонки при использовании стиля Unrestrained настолько широки, что их неудобно читать. Результатом ограничения ширины может стать появление достаточно больших промежутков между словами, а ограничение высоты неудобно для посетителей, обладающих компьютерами с широкоформатными мониторами.

352 Создание динамического Web-сайта

Шаг 3.. Реализация Теперь все становиться на свои места, трещины заделаны, шпаклевка наложена – осталось наклеить обои. Подготовительная работа окончена, и настало время действительно заняться созданием своего сайта. Перед тем как приступить к последней стадии, еще раз просмотрите информацию, касающуюся сайта (аудитория, цели, содержание и функции). Теперь все, что было подготовлено с таким огромным трудом, окупится с лихвой (а может быть, и нет)!

Подготовка содержания

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

Соберите всю информацию, которую требуется разместить на сайте: текст, видео, анимацию и звук. Тщательно все проверьте и подготовьте к опубликованию, например запишите текст в формате Word (рис. 21.12) или поместите в файлах тэги (<p>, <br>, <h1>).

Подготовка кода Если вы используете код из этой книги (будь то JavaScript, CSS или DHTML), его необходимо изменить под ваш сайт (рис. 21.13).

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

Рис. 21.13. Перед тем как перейти непосредственно к созданию Web-сайта, протестируйте и отладьте написанный вами код

Шаг 3. Реализация 353 Теперь, когда у вас есть действующий прототип Web-страницы, удалите со страниц все лишнее. Так вы получите шаблон сайта. Вы можете его использовать, чтобы доработать оставшуюся часть страниц в таких программах, как Dreamweaver или GoLive.

Компоновка страниц

Рис. 21.14. Произведите компоновку элементов

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

Тестирование сайта Перед тем как выпустить ваше произведение, протестируйте его. Даже малейшие ошибки, если они не были исправлены на стадии отладки, могут привести к большим проблемам. Вам следует тестировать свои сайты в различных браузерах и операционных системах (рис. 21.15).

Рис. 21.15. Результат моей усердной работы (www.webbedenvironments.com/dhtml)

354 Создание динамического Web-сайта Разметка: CSS или таблицы? До того как появились таблицы, Web-разметка представляла собой широкие страницы текста, занимавшие весь экран. У разработчиков не было возможности какимлибо образом разбить колонку. Web-дизайнеры пытались изменить такое расположение, размещая текст в две колонки и более. С появлением таблиц Web-разработчики получили возможность создавать эскиз разметки, содержащий большое число колонок. Хотя не предполагалось, что таблицы будут выполнять большую часть работы по разметке Web-страниц, на протяжении достаточно большого промежутка времени у них не было достойной альтернативы. Но с появлением CSS ситуация радикально изменилась – CSS позволяют создавать великолепные разметки Web-страниц без помощи таблиц. Но, к сожалению, не все так просто. С возникновением CSS у Web-дизайнеров появился широкий спектр возможностей для размещения объектов на странице. Однако эта технология потерпела неудачу при создании разметок с уплотненной компоновкой. Компоновка информации на Web-странице при помощи CSS – новый способ, и многие дизайнеры до сих пор экспериментируют с его функциями. Мне удалось избежать использования таблиц в проекте своего Web-сайта. Правда, пришлось довольствоваться относительно простым вариантом разметки, в котором всего лишь один ряд и две колонки (слева – навигация, справа – содержание) и еще несколько других элементов. Если вы проводите разметку большого объема страниц, используя CSS и не применяя таблицы, пришлите мне, пожалуйста, URL вашего сайта. Я с удовольствием его проверю!

Разметка Web страницы

22 Существует много различных способов использования CSS и DHTML. Но пока данные средства создания Web-приложений являются относительно новыми, и разработчики все еще открывают новые горизонты их возможностей. Это обусловлено, вероятно, еще и тем, что некоторые разработчики, которые изначально были увлечены невероятными возможностями CSS при создании динамического HTML, игнорировали чрезвычайную полезность каскадных таблиц стилей при разметке Webстраниц. Спеша поэкспериментировать с динамическими возможностями CSS, многие Webдизайнеры не заметили, что с помощью CSS легко решить одну из основных проблем разработки – выполнение разметки Web-страниц. В этой главе содержится множество полезных рекомендаций по работе с CSS, а также описываются приемы использования DHTML при разметке страницы.

356 Разметка Web-страницы

Устранение ошибки в Netscape CSS Рассмотрим наиболее часто упоминаемую ошибку Netscape в реализации CSS. Когда посетители изменяют размеры окна браузера, все CSS-форматирование, созданное с использованием внешнего CSS-файла (который импортировался при помощи тэга <link>), внезапно исчезает, будто присоединенная таблица стилей никогда ранее не существовала. Однако, если посетитель перезагрузит эту страницу, форматирование вновь появится (рис. 22.1 и 22.2). Такая ошибка вполне могла бы отбить у посетителей желание заходить на ваш сайт, особенно если они и не подозревают, что нужно просто перезагрузить страницу. Как проверить, что страница была перезагружена после того, как изменился ее размер? Все очень просто; за этим проследит браузер, если вы, конечно, скажете ему об этом (листинг 22.1).

Рис. 22.1. Так должна выглядеть страница в Netscape

Перезагрузка страницы после изменения ее размеров 1. if(document.layers){…} В тэге <script> в заголовке <head> вашей HTML-страницы введите код, который определяет, использует ли браузер DOM слоя (см. раздел «Определение возможностей браузера» в главе 11). В случае утвердительного ответа программный код выведет текущие значения высоты (innerHeight) и ширины (innerWidth) видимой области страницы (см. раздел «Видимая область объекта» в главе 12).

Рис. 22.2. Так будет выглядеть страница при изменении размеров, если не исправить ошибку реализации CSS. Для отображения страницы используются установки браузера по умолчанию

Устранение ошибки в Netscape CSS 357 Листинг 22.1. Если данный браузер использует слои (то есть Netscape 4), JavaScript записывает значения (ширину и высоту) для инициализации активного окна. Изменение размера окна определяется при помощи данного кода: сравниваются размеры до и после изменения, затем страница обновляется и форматирование восстанавливается

<html> <head> <script> if (document.layers) { origWidth = innerWidth; origHeight = innerHeight; } function reloadPage() { if (innerWidth != origWidth || ->innerHeight != origHeight) location.reload(); } if (document.layers) onresize = ->reloadPage; </script> <link rel="stylesheet" ->href="styles.css"> </head> <body> <h1>Designing With Cascading Style ->Sheets</h1> <p class="copy">Whenever you type in a ->section title...</p> <p class="copy">A previous article ->looked at a ...</p> <div class="code"> selector {property: value;}<BR> </div> <p class="copy">Where the -><I>selector</I> is the keyword ->part of an HTML...</p> </body> </html>

2. function reloadPage(){…} Добавьте функцию reloadPage() в код. При загрузке страницы она сравнивает текущие значения ширины и высоты окна со значениями, определенными на шаге 1. 3. onresize = reloadPage; Присвойте событию onresize значение функции reloadPage. Если посетитель изменяет размеры окна, в котором отображается страница, то браузер перезагружает ее, восстанавливая форматирование CSS. Лучше написать этот код в отдельном файле с расширением .js, а затем присоединить его к каждой странице сайта, применяющего CSS (см. раздел «Внешний файл JavaScript» в главе 23).

358 Разметка Web-страницы

CSS и операционная система Между операционными системами MacOS и Windows существует ряд несоответствий, которые зачастую создают излишние проблемы Web-дизайнерам, использующим CSS при создании сайтов. Это касается цветовой палитры и размеров шрифтов. На самом деле проблема заключена не в CSS, а в том, как операционные системы определяют размеры шрифтов и цвета. Не вдаваясь в технические подробности и не углубляясь в историю, отмечу, что основная проблема заключается в том, что в Windows шрифт отображается более крупным, а цвета – более темными, чем в Mac. Дизайн, разработанный для Mac, может выглядеть идеально, но при загрузке в Windows вместо превосходного дизайна на экране появятся гигантские шрифты и темные цвета. Используя JavaScript и CSS-файлы, ориентированные на каждую ОС, вы можете добиться правильного отображения шрифтов и цветовой гаммы в операционной системе посетителей вашего сайта (рис. 22.3–22.5).

Определение CSS для операционной системы посетителя 1. default.css Создайте внешний CSS-файл, который содержит стили, используемые на Webсайте, и сохраните его под именем default.css (листинг 22.2). Этот файл напрямую присоединяется к каждой Webстранице (см. шаг 3).

Рис. 22.3. Так выглядит страница, загруженная при помощи Internet Explorer 5 для Windows

Рис. 22.4. Та же самая страница при загрузке из Internet Explorer 5 для Mac (без корректировки) – шрифт мельче и слишком бледный

CSS и операционная система 359

Рис. 22.5. Та же самая страница, загруженная при помощи Internet Explorer 5 для Mac, но уже подкорректированная. Увеличился размер шрифта, цвет стал более темным

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

.copy { color: #cc3; font: 20px/32px "Times New Roman", ->Georgia, Times, serif; width: 500px } body { background-color: #fff }

Листинг 22.3. Стили в файле mac.css дублируют аналогичные из файла default.css

.copy { color: #bb2; font: 23px/35px; width: 600px }

2. mac.css Создайте второй файл и сохраните его под именем mac.css (листинг 22.3). Эта версия дополняет файл default.css и адаптирует CSS вашего сайта для пользователей Mac. Нет необходимости вводить повторно все определения в default.css. 3. <link href="default.css" rel= ->"styleSheet" type="text/css"> В тэге <head> HTML-документа (в примере используется файл index.html, см. листинг 22.4) привяжите версию таблицы стилей, которая применяется по умолчанию. 4. if((navigator.appVersion.indexOf ->('Mac')!=1)){…} После тэга <link> напишите строку JavaScript, чтобы определить операционную систему, в которой работает браузер. Если это Mac, то тэг <link> для Mac уже добавлен к странице при помощи JavaScript. Этот второй стиль изменяет установки таким образом, чтобы они больше подходили под операционную систему Mac. Хотя класс copy в Mac-версии CSS не содержит гарнитуры шрифта, текст по-прежнему отображается как Times. Так почему же определение класса copy в файле default.css сменяется определением из mac.css? Термин «каскадный» в понятии «каскадные таблицы стилей» означает возможность перекрывать определения, даже если они взяты из разных источников.

360 Разметка Web-страницы Операционные системы – это не единственная проблема при создании CSS. Браузеры, даже работающие в одной ОС, имеют различную интерпретацию размера шрифта и позиционирования элементов. Вы можете использовать технологию, подобную описанной выше для различных операционных систем, чтобы устанавливать тип браузера (см. раздел «Название и версия браузера» в главе 12) и соответственно изменять таблицы стилей. Описанный прием использования JavaScript удобен для достижения различных результатов. Если потребовалось предоставить посетителю возможность выбирать таблицу стилей для вашего сайта, вы должны ввести некоторую переменную, чтобы определить, какая таблица стилей загружена. Приведенный код дает как посетителю, так и разработчику значительно больший контроль над отображением страницы, и, таким образом, Web-дизайнерам нет необходимости создавать отдельные страницы для каждой из версий.

Листинг 22.4. JavaScript определяет, используется ли на компьютере MacOS; случае положительного ответа загружаются другие CSS-стили, помогающие осуществить коррекцию

<html> <head> <link href="default.css" ->rel="styleSheet" type="text/css"> <script language="JavaScript"> if ((navigator.appVersion.indexOf("Mac") ->!= -1)) { document.write('<link href="mac.css" ->rel="styleSheet" type="text/css">'); } </script> </head> <body> <p class="copy">Down, down, down... -></p> <p class="copy">Presently she began ->again...</p> </body> </html>

Заголовки 361

Заголовки Рис. 22.6. Изображение, на фоне которого будет помещен заголовок Листинг 22.5. Способ добавления фонового изображения в заголовок документа вполне очевиден, тем не менее появляющиеся при этом возможности практически безграничны

<html> <head> <style type="text/css"> h3.offset { color: #000000; font-weight: bold; font-size: 14px; font-family: Verdana, Arial, ->Helvetica, sans-serif; background-color: #ccc; padding: 3px; border: solid 1pt #000000; position: relative; width: 440px; } h3.graphic { background: black url ->(background_headline.gif) no-repeat; font: bold 16px helvetica,sans-serif; color: white; width: 400px; padding:10px; } p{ font: normal 10pt/14pt times,serif; left-margin: 25px; width: 400; } </style> </head> <body> <h3 class="offset">CHAPTER VII<br> A Mad Tea-Party</h3> <p>The table was a large one...</p> <h3 class="graphic">CHAPTER VII<br> A Mad Tea-Party</h3> <p>There was a table set out under a ->tree in front of the house...</p> </body> </html>

Одна из проблем разработчика – это заголовки, созданные при помощи графики. Всякий раз приходится создавать новый графический объект для каждого заголовка. Используя свойство CSS для определения фона, вы можете получить огромное количество различных фонов для заголовков без необходимости каждый раз работать над новым графическим объектом. Кроме того, это не повлечет за собой увеличения времени загрузки сайта.

Создание заголовков при помощи фона 1. background_headline.gif При помощи графического редактора создайте фоновое изображение и сохраните его. Назовите файл background_headline.gif (рис. 22.6). 2. h3.graphic{…} Определите в CSS для тэга <h3> (листинг 22.5) ассоциированный класс graphic (см. раздел «Определение классов для создания тэгов» в главе 2). Добавьте атрибут фона и укажите созданный вами на шаге 1 файл (см. раздел «Установка отдельных свойств фона» в главе 6). Можно не называть класс, созданный на шаге 2, graphic. Назовите его так, как вам больше нравится. 3. <h3 class="graphic"> ->CHAPTER VII<br>A Mad Tea-Party</h3> Фоновый рисунок всегда будет появляться при использовании заголовков 3-го уровня, пока вы определяете в коде атрибут class и присваиваете ему класс, созданный вами на шаге 2 (рис. 22.7).

362 Разметка Web-страницы Таким же образом можно определять и другие уровни заголовков, использовать как одинаковые, так и различные фоновые изображения (см. раздел «Определение тэгов с помощью одинаковых правил» в главе 2). Экспериментируйте, пробуя различные фоновые рисунки. Одно из фоновых изображений, которые я использовал на своем Web-сайте, представляет собой полоску спектра: цвет плавно изменяется справа налево, постепенно переходя в цвет основного фона (рис. 22.8).

Фиксированный заголовок Один из принципов Web-дизайна – помогать посетителям ориентироваться на сайте. Посетитель всегда должен знать, на какой странице находится. К сожалению, чтобы просмотреть Web-страницу полностью, ее необходимо прокрутить, поэтому такая важная информация, как, например, заголовок, может попросту скрыться с глаз посетителя по мере прокрутки страницы. Используя CSS, нетрудно зафиксировать заголовок в верхней части Web-страницы, помогая посетителю определить местонахождение на сайте (рис. 22.9). Однако следует помнить, что Internet Explorer 4 (Mac и Windows), Internet Explorer 5 (Windows) и Netscape 4/6 (Mac и Windows) не поддерживают фиксированное расположение объектов. Единственным совместимым браузером является Internet Explorer 5 (Mac).

Рис. 22.7. Два примера заголовков. Поэкспериментируйте с графикой и рамками для получения различных эффектов

Рис. 22.8. Заголовки about the site и Reading the Code представляют собой обычный текст, расположенный на фоновом рисунке

Рис. 22.9. Заголовок остается фиксированным в верхней части Web-страницы, хотя текст уже переместился вверх

Фиксированный заголовок 363 Листинг 22.6. Для неподвижного заголовка устанавливается ID, который затем добавляется в тэг <div>

<html> <head> <style type="text/css"> #header { color: red; font-weight: bold; font-size: 16px; font-family: "Times New Roman", ->Georgia, Times, serif; background-color: #aaa; padding: 5px; position: fixed; z-index: 1000; top: 0px; left: 0px; width: 110%; visibility: visible; } </style> </head> <body> <div id="header"> <i>Alice In Wonderland</i> By Lewis ->Carrol </div> <br> <p>'I'm sure those are not the right ->words,...</p> <p><img src="alice08.gif" width="200" ->height="131" border="0" ->align="right"> As she said this she looked down at ->her hands...</p> <p>'That <i>was</i> a narrow ->escape!...</p> <p>As she said these words her foot ->slipped...</p> </body> </html>

Фиксация заголовка 1. #header { При помощи класса или ID откройте список определений. В приведенном примере создается ID с именем header (листинг 22.6). 2. position: fixed; Атрибуту position присвойте значение fixed. 3. color: red; Добавьте любые другие определения, которые хотите использовать для создания заголовка. В примере заголовок красного цвета отображается на сером фоне. 4. } Закройте список определений фигурной скобкой. 5. <div id="header"> <i>AliceInWonderLand -></i>By Lewis Carrol</div> Добавьте ID к нужному элементу. В данном случае тэг <div> служит для выделения заголовка страницы.

Помните, что этот метод работает не во всех браузерах. Браузеры, которые не поддерживают фиксированные заголовки, рассматривают такой заголовок как статический элемент, поэтому он исчезает вместе с текстом при прокрутке страницы. Неплохо расположить ссылку в фиксированном заголовке, но ошибка в Internet Explorer 5 делает это абсолютно бесполезным (см. раздел «Фиксированное позиционирование» в главе 8).

364 Разметка Web-страницы

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

Рис. 22.10. Данное фоновое изображение используется для того, чтобы создать боковое меню шириной 160 пикселов

Создание бокового меню 1. background_side.gif Создайте изображение – полосу, ширину которой определите соответственно ширине бокового меню. 2. body{ background: #cccccc ->url(background_side.gif) repeat-y;} Настройте селектор body в документе, чтобы можно было использовать графический объект, созданный на шаге 1, но задайте его повтор только в направлении оси Y (см. раздел «Установка отдельных свойств фона» в главе 6). Допустимо также установить цвет фона для всей Web-страницы (см. листинг 22.7). 3. Применяйте таблицы или CSS, чтобы поместить содержание бокового меню в колонке слева, а правую часть страницы освободить для других элементов. В приведенном примере созданы две колонки, расположение которых задано в абсолютных координатах; в левой колонке будет располагаться боковое меню, а правая предназначена для содержания.

Рис. 22.11. Боковое меню располагается в колонке в левой части окна, а фоновый цвет применяется для остальной части страницы

Поэкспериментируйте с различной графикой и эффектами. Попробуйте расположить графические объекты в верхней части страницы (repeat-x), чтобы создать верхнее меню, а не боковое. Ваши возможности безграничны!

Боковое меню 365 Листинг 22.7. В этом примере создается боковое меню при помощи фонового изображения. Страница разделяется на две колонки

<html> <head> <style type="text/css"> body { background: #cccccc url(background_side.gif) repeat-y; } #sidebar { position: absolute; top: 10px; left: 30px; width: 150px; } #content { position: absolute; top: 10px; left: 175px } </style> </head> <body> <div id="sidebar"> <h3>Menu</h3> <img src="b_book.gif" width="69" height="81"><br>Book<br> <img src="b_portrait.gif" width="69" height="81"><br>Portrait<br> <img src="b_portfolio.gif" width="72" height="79"><br>Portfolio<br> <img src="b_painting.gif" width="69" height="81"><br>Painting<br> <img src="b_letter.gif" width="72" height="79"><br>Letter<br> <img src="b_hammer.gif" width="72" height="81"> <br>Tools </div> <div id="content"> <H3>My Conversation with Alice</H3> <p>'I've been to a day-school, too,' said Alice; 'you needn't be so proud as all ->that.'</p> <p>'With extras?' asked the Mock Turtle a little anxiously.</p> <p>'Yes,' said Alice, 'we learned French and music.'</p> <p>'And washing?' said the Mock Turtle.</p> <p>'Certainly not!' said Alice indignantly. </p> </div> </body> </html>

366 Разметка Web-страницы

Верхние и нижние колонтитулы Одна из проблем, возникающих при разработке больших Web-сайтов, заключается в невозможности изменить стиль дизайна, если вы уже начали использовать какой-то определенный. На моем Web-сайте количество статей приближается к сотне, столько их скопилось за годы моей работы. Поскольку я не гуру баз данных, то хранятся они в виде статических HTML-страниц. Но я всегда стремился к лучшему и старался сделать свои сайты привлекательными. Например, верхние и нижние колонтитулы я не размещаю непосредственно на страницах, а использую JavaScript, чтобы «вписать» их в страницы. Переменные JavaScript позволяют в каждом новом случае отображать заголовок, дату и другую информацию, касающуюся статьи (см. раздел «Внешний файл JavaScript» в главе 23).

Установка верхнего и нижнего колонтитула 1. header.js Создайте внешний файл JavaScript и сохраните его под именем header.js. Он будет импортирован в начало файла index.html (см. шаг 4). Введите строку document.writeln(…), чтобы указать HTML для верхних колонтитулов страницы. Кроме того, код в этом файле будет использовать переменные (index.html), чтобы каждый раз обновлять заголовки, подзаголовки, дату и т.д. (листинг 22.8).

Листинг 22.8. Чтобы создать верхний колонтитул документа, код JavaScript необходимо импортировать в начало файла index.html

document.writeln ("<h1>") document.writeln (title) document.writeln ("</h1>") document.writeln ("<h3>") document.writeln (subTitle) document.writeln ("</h3>") document.writeln ("<i>") document.writeln (teaser) document.writeln ("</i><br><br> <span ->style="font: 10pt arial">') document.writeln (dDate + " " + mDate + ->" " + yDate) document.writeln ("</span>")

Верхние и нижние колонтитулы 367 Листинг 22.9. Этот код помещается в конец файла index.html, чтобы создать нижний колонтитул документа

document.writeln('<br><hr><br clear= ->"all">') document.writeln('<span class= ->"copyright">') document.writeln('<b>Title:</b> ' + ->self.document.title) document.writeln('</br>') document.writeln('<b>URL:</b> <a href=" ->' + self.location + '">' + ->self.location + '</a>' ) document.writeln('</br>') document.writeln('<a href="../aux/ ->copyright.html"> Copyright &copy;</a> 1998-2000 <A HREF= ->"mailto:jason@webbedenvironments.com"> ->Jason Cranford Teague</A>. All rights ->reserved.' ); document.writeln('</span></br>')

Листинг 22.10. Приведенный код размещает на странице верхний и нижний колонтитулы. Он использует ряд переменных JavaScript для колонтитулов. В этих переменных содержится информация о название статьи, подзаголовках, дате и т.д.

<html> <head> <script> title = 'The Begining of the End'; subTitle= 'Why I went to the Store'; teaser = 'The day started like any other, but little did I know that it would soon turn into the worst day of my life!' dDate = '01' mDate = 'January' yDate = '2001' </script>

2. footer.js Создайте внешний файл JavaScript и сохраните его под именем footer.js. Он будет импортирован в конец файла index.html (см. шаг 4). Введите строку document.writeln(…), чтобы описать HTML для нижних колонтитулов страницы. В приведенном примере нижний колонтитул отображает название страницы, заключенное между тэгом <title> (title – это не переменная JavaScript) и URL страницы. В колонтитуле представлена также ссылка на страницу оригинала и ссылка, после активизации которой будет запущен почтовый клиент (листинг 22.9). 3. title='The Beginning of the End'; В тэге <script> в заголовке <head> документа, для которого требуется создать колонтитулы, определите следующие переменные: title, subTitle, teaser, dDate, mDate и yDate. JavaScript будет использовать их при отображении верхнего колонтитула (листинг 22.10). 4. <script src="header.js"></script> В тэге <body> HTML-страницы определите тэг <script>, который будет содержать ссылки на источники URL для верхнего и нижнего колонтитулов (рис. 22.12).

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

Листинг 22.10 (окончание)

Рис. 22.12. Web-страница с динамическими элементами – верхним и нижним колонтитулами. Поскольку вы непосредственно не создавали код для колонтитулов, разметка страницы, информация о которой хранится в файле JavaScript, осталась прежней. Кроме того, вы не вносили никаких изменений, которые могли бы повлиять на HTML страницы, где используется разметка определенного типа

Границы фреймов 369

Границы фреймов Одна из проблем с фреймами заключается в том, что границы, устанавливаемые HTML между ними, выглядят как-то неуклюже (рис. 22.13). Однако при задании фона вы можете использовать любой вид границ (рис. 22.14). Хотя эти границы могут быть размещены только по левому краю или по верху отдельного фрейма, они очень полезны, если необходимо показать четкую границу между фреймами. Рис. 22.13. Фреймы с границами, установленными по умолчанию

Рис. 22.14. Применение CSS: границы между фреймами отмечены орнаментом

Рис. 22.15. Изображения, применяемые для создания границ фреймов. Вы можете использовать на своем сайте любые изображения

Создание границы фрейма 1. border.gif Создайте изображение для границы фрейма. В приведенном примере я использую фрагмент орнамента, который сохранен в файле border.gif (рис. 22.15). Вы можете взять любые другие изображения для создания таких границ. 2. index.html Создайте документ фрейма, обязательно проверив, что границы фреймов, расставляемые по умолчанию, отключены: border="0" framespacing="0" frameborder="no" Сохраните эти настройки в файле index.html. 3. right_frame.html Укажите фоновое свойство в тэге <body> HTML-документа (листинги 22.12 и 22.13), чтобы поместить изображение границы, созданное на шаге 1, в качестве фона выбранного фрейма (см. рис. 22.14). Задайте повтор этого изображения как по вертикали (repeat-y), так и по горизонтали (repeat-x) – см. раздел «Установка фона» в главе 6).

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

Листинг 22.11. Документ с описанием фреймов

<html> <frameset rows="*,40" border="0" ->framespacing="0" frameborder="no"> <frameset cols="*,150" border="0" ->framespacing="0" frameborder="no"> <frame src="center_frame.html" ->name="center" noresize> <frame src="right_frame.html" ->name="right" noresize> </frameset> <frame src="bottom_frame.html" name= ->"bottom" noresize scrolling="no"> </frameset> </html>

Листинг 22.12. Фрейм с вертикальными границами

<html> <head> <style type="text/css"> body { background: white url(border.gif) ->repeat-y } </style> </head> <body> <h4>Table Of Contents</h4> <hr width="90%" align="left"> <p><a href="#">Chapter I</a></p> </body> </html>

Листинг 22.13. Фрейм с горизонтальными границами

<html> <head> <style type="text/css"> body { background: silver url(border.gif) ->repeat-x 0px 0; } </style> </head> <body> <h3>Chapter V - Advice from a ->Caterpillar</h3> </body> </html>

Открытие и закрытие фреймов 371

Открытие и закрытие фреймов

Рис. 22.16. Меню закрыто

Существенный недостаток использования фреймов на Web-странице состоит в том, что их нельзя изменять. Все пространство, которое они занимают на Web-странице, – всевозможные меню, заголовки и т.п. – жестко привязано к экрану. Это может быть удобным, если у вашего компьютера достаточно большой монитор, однако совсем не подходит менее удачливым посетителям – обладателям меньших мониторов. Далее я расскажу о разработанной мною технологии, которая применяет вложенные фреймы и JavaScript при открытии и закрытии меню во фрейме (рис. 22.16 и 22.17). Когда меню закрыто, область, отведенная под отображение содержания, расширяется; таким образом, становится больше свободного места, которое можно эффективно использовать.

Создание скрытых фреймов

Рис. 22.17. Меню открыто

Рис. 22.18. Файл настроек фрейма index.html

1. index.html Определите структуру фреймовой страницы. В приведенном примере устанавливается два фрейма: header и content (листинг 22.14). Фрейм header – статический (не меняет свой исходный код), содержит файл header.html, в котором находится большая часть JavaScriptкода, необходимого для создания скрытого фрейма.

372 Разметка Web-страницы 2. nomenu_frames.html Создайте фреймовую структуру (тэг <frameset>), состоящую из двух колонок, и сохраните их в файле nomenu_frames.html (листинг 22.15). Первый фрейм (control) содержит файл control.html, второй (content2) – файл content.html. 3. menu_frames.html Создайте фреймовую структуру, содержащую три колонки, и сохраните ее в файле menu_frames.html (листинг 22.16). Два вторых фрейма в этой настройке аналогичны фреймам из nomenu_frames.html. Ширина первого фрейма составляет 150 пикселов, он отображает файл menu.html.

Листинг 22.15. Структура фреймов, которая будет загружена во фрейм содержания index.html, когда меню закрыто

<html> <frameset cols="25,*" border="0" ->framespacing="0" frameborder="no"> <frame name="control" ->src="control.html" marginwidth="0" ->marginheight="0" scrolling="no" ->frameborder="no" noresize> <frame name="content2" ->src="content.html" marginwidth="10" ->marginheight="10" scrolling="auto" ->frameborder="no"> </frameset> </html>

Листинг 22.14. Файл настроек фрейма используется для создания разметки Web-страницы

<html> <frameset rows="35,*" border="0" ->framespacing="0" frameborder="no"> <frame name="header" src="header.html" ->scrolling="no" frameborder="no" ->noresize marginHeight="2px" ->marginWidth="2px"> <frame name="content" ->src="nomenu_frames.html" ->marginwidth="10" marginheight="10" ->frameborder="no"> </frameset> </html>

Рис. 22.19. Структура фреймов nomenu_frames.html, которая будет загружена во фрейм content файла index.html при закрытии меню

Рис. 22.20. Cтруктура фреймов menu_frameset.html, которая будет загружен во фрейм content файла index.html, когда меню открыто

Открытие и закрытие фреймов 373 Листинг 22.16. Структура фреймов загружена во фрейм содержания в файл index.html, когда меню открыто

<html> <frameset cols="100,25,*" border="0" ->framespacing="0" frameborder="no"> <frame name="menu" src="menu.html" ->marginwidth="10" marginheight="10" ->scrolling="no" frameborder="no" ->noresize> <frame name="control" src="control.html" ->marginwidth="0" marginheight="0" ->scrolling="no" frameborder="no" ->noresize> <frame name="content2" ->src="content.html" marginwidth="10" ->marginheight="10" scrolling="auto" ->frameborder="no"> </frameset> </html>

4. header.html Создайте HTML-файл, который будет использоваться во фрейме header, созданном на шаге 1, и сохраните его под именем header.html (листинг 22.17). Функция menuToggle() является основой этой страницы. Она вызывается, когда посетитель щелкает по ссылке Menu в control.html. Сначала функция определяет, какой HTML-документ загружен во фрейм content2 и сохраняет URL в переменной contentSRC. Затем она проверяет, отображается ли меню, и переходит в зависимости от этого к файлу nomenu_frames.html либо menu_frames.html. В переменной frameState записывается текущее состояние меню: 0 (закрыто) или 1 (открыто).

Листинг 22.17. HTML-документ, использующийся во фрейме header файла index.html. Он содержит функцию menuToggle(), которая при запуске открывает (или закрывает) фреймовое меню Листинг 22.17 (окончание) <html> <head> <script language="JavaScript"> var frameState = 0; var contentSRC = null; function menuToggle() { if (frameState == 0) { contentSRC = parent.content. ->content2.location.href; top.content.location = ->'menu_frames.html'; frameState = 1; return; } else { contentSRC = parent.content. ->content2.location.href; top.content.location = ->'nomenu_frames.html';

frameState = 0; return; } } </script> <style type="text/css"> h2 { color: gray; font-weight: bold; font-size: 24px; font-family: "Trebuchet ->MS", Arial, Helvetica, Geneva, ->sans-serif; } body { background-color: #333; } </style> </head> <body> <h2>webbedENVIRONMENTS</h2> </body> </html>

374 Разметка Web-страницы 5. menu.html Создайте HTML-файл, который будет отображаться, когда меню открыто, и сохраните его под именем menu.html (листинг 22.18). В этом примере использованы HTML-ссылки, но вы можете поместить любое содержание. Для всех ссылок следует указывать, что открывать их надо во фрейме content2. 6. control.html Создайте HTML-файл, который будет применяться во фрейме control, и сохраните его как control.html (листинг 22.19). Файл содержит ссылку, при щелчке по которой запускается функция menuToggle(), созданная на шаге 4.

Листинг 22.19. HTML-документ, используемый для контроля фреймов из файлов menu_frames.html и nomenu_frames.html. Он содержит ссылку, которая вызывает функцию menuToggle() из header.html

<html> <head> <body> <div id="tabs"> <a href="javascript:top.header. ->menuToggle();"> <img src="images/tabMenu.gif" ->width="20" height="100" ->border="0"> </a> </div> </body> </html>

Листинг 22.18. HTML-документ, который содержит отображаемое меню из файла menu_frames.html. Он может включать в себя любое HTML-содержание

<html> <head> <style type="text/css"> body { color: gray; font: bold 12px/24px ->"Trebuchet MS", Arial, Helvetica, ->Geneva, sans-serif; background-color: ->black } a:link { color: white; text-decoration: ->none; } a:hover { color: white; text-decoration: ->underline } a:active { color: silver; text->decoration: underline } a:visited { color: white; ->text-decoration: none } </style> </head> <body> <a href="home.html" ->target="content2">Home</a><br> <a href="page1.html" ->target="content2">Page 1</a><br> <a href="page2.html" ->target="content2">Page 2</a><br> <a href="page3.html" ->target="content2">Page 3</a><br> </body> </html>

Открытие и закрытие фреймов 375 Листинг 22.20. Файл инициализации, который загружается во фрейм content2 из файлов menu_frames.html и nomenu_frames.html. Код JavaScript, содержащийся в этом файле, определяет URL страницы, отображавшейся перед изменением меню (полученный URL записывается в переменную contentSRC из файла header.html), и перезагружает страницу в данный фрейм

<html> <head> <script language="JavaScript"> var contentSRC; function replaceContent() { contentSRC = top.header.contentSRC; if (contentSRC == null) {self.location ->= "home.html";} else {self.location = contentSRC;} } </script> </head> <body onload="replaceContent();"> </body> </html>

Листинг 22.21. Типичная страница содержания сайта

<html> <head> <style media="screen" type="text/css"> body { background-color: white } h2 { color: silver; font-weight: bold; ->font-size: 36px; font-family: ->"Trebuchet MS", Arial, Helvetica, ->Geneva, sans-serif; } </style> </head> <body> <h2>Home</h2> </body> </html>

7. content.html Создайте HTML-страницу, которая содержит код, представленный в листинге 22.20. Этот документ – промежуточный этап и никогда не остается долго на экране. Он определяет, какой документ находится во фрейме content2, присваивая переменной header адрес того фрейма, который его загрузил (contetSCR). После этого он обновляет документ. Если ранее ничего не было загружено (например, при первом открытии Webсайта), запускается home.html. 8. home.html Создайте страницы вашего сайта (листинг 22.21). Они будут содержаться во фрейме content2.

Этот метод позволяет посетителю сайта открывать и закрывать меню навигации.

Нет необходимости использовать меню в скрытом фрейме. Однажды для одной организации я создавал сеть intranet, которая была построена именно на описанном выше методе. Из-за наличия ограничений для обеспечения надлежащего уровня безопасности как в Internet Explorer, так и в Netscape, вы не сможете открыть или закрыть меню, пока фрейм content2 содержит документ с сервера – за исключением тех страниц, которые связаны с вашим Web-сайтом. Таким образом, вы не вправе одновременно пользоваться файлами с разных серверов.

376 Разметка Web-страницы

Размещение страниц во фреймах Представьте, что вы читаете книгу. Вы заканчиваете поздно ночью и оставляете закладку на последней прочитанной странице. Следующим вечером вы берете книгу и хотите продолжить чтение. Но закладка каким-то мистическим образом исчезла с того места, где вы ее оставили, и оказалась лежащей рядом с книжкой. Какая неприятность! Ох, уж эти барабашки! И теперь вам приходится листать книгу в поисках страницы, на которой остановились. Если вы создаете Web-сайт, используя фреймы, такая же оказия может приключиться и с вашими посетителями. Они помещают закладку на какой-нибудь странице вашего сайта, которую они долго искали и наконец нашли, а затем обнаруживают, что закладка находится на первой странице! Сказанное касается не только Web-сайтов, содержащих фреймы. Что, если вы хотите направить посетителей к какой-нибудь особенной странице по электронной почте или с другого сайта? Конечно, вы можете дать им URL этой страницы, но если вы адресуете их на страницу непосредственно, без помощи фреймов, вы предлагаете им книгу, в которой выдраны последние страницы или нет корешка. Допустимо создавать различные контейнеры с описанием структуры фреймов для каждой страницы, но это очень хлопотно и неразумно. Существует более легкий путь решения проблемы. Вы не вправе изменить работу фреймов, поскольку по некоторым причинам производители браузеров игнорировали поддержку такой возможности. Однако есть и обходной путь (рис. 22.21 и 22.22).

Рис. 22.21. Страница загружается на «пустой» экран, но практически стразу же…

Рис. 22.22. …экран мигает, и страница, которую вы только что видели, предстает пред вами в новом виде – с использованием фреймов

Размещение страниц во фреймах 377 Листинг 22.22. Небольшой внешний файл, содержащий код JavaScript, проверяет, находятся ли во фреймах помещенные в них страницы

myPage = self.location; thisPage = top.location; if (thisPage == myPage) { contentSRC = escape(myPage); frameURL = "index.html?" + contentSRC; top.location.href = frameURL; }

Листинг 22.23. Настройки фрейма не закодированы непосредственно в HTML, но они сохраняются в коде JavaScript, чтобы вы могли добавлять переменные в HTML

<html> <script language="JavaScript"> contentSRC = (location.search. ->substring(1)) ? location.search. ->substring(1) : "defaultContent.html"; contentSRC = unescape(contentSRC); var writeFrame = ""; writeFrame += '<FRAMESET COLS= ->"*,575,*" BORDER="0" ->FRAMESPACING="0" FRAMEBORDER="NO">'; writeFrame += '<FRAME SRC= ->"filler.html">'; writeFrame += '<FRAMESET ROWS= ->"50,*,50">'; writeFrame += '<FRAME SRC= ->"filler.html">'; writeFrame += '<FRAME SRC="' + ->( contentSRC ) + '" NAME="content" ->NORESIZE>'; writeFrame += '<FRAME SRC= ->"filler.html">'; writeFrame += '</FRAMESET>'; writeFrame += '<FRAME SRC= ->"filler.html">'; writeFrame += '</FRAMESET>'; document.write(writeFrame); </script> </html>

Автоматическое размещение HTML-страницы 1. framed.js Создайте внешний файл JavaScript (см. раздел «Внешний файл JavaScript» в главе 23) и сохраните его под именем framed.js (листинг 22.22). Добавьте код, определяющий, загружен ли документ во фрейм (сравнивая URL документа с URL целого окна). Если документ размещен во фрейме, то адреса различны и никаких действий не выполняется. Если адреса одинаковы (документ не помещен во фрейм), программа соединяет URL фрейма (в данном случае index.html) c URL документа (myPage), ставя между ними знак вопроса (?). Выполнение функции завершается переходом на сгенерированный адрес. 2. index.html При помощи JavaScript создайте документ с описанием структуры фреймов, чтобы ввести HTML-код для страницы, и сохраните его как index.html (листинг 22.23). Этот код извлекает URL страницы, которая помещается во фрейм content из URL текущей загруженной страницы. Если знак вопроса (?) появляется в полном адресе страницы, программа использует расположенный за ним код в качестве адреса фрейма с содержанием для URL фрейма content, сохраненного в переменной contentSRC. В противном случае применяется URL, установленный по умолчанию (в данном примере defaultContent.html), в который вы можете ввести любой адрес.

378 Разметка Web-страницы 3. content.html Создайте страницы Web-сайта (листинги 22.24 и 22.25). В тэге <head> всех документов, которые следует динамически разместить во фрейме content, определите загрузку внешнего файла JavaScript, созданного на шаге 1: <script src="framed.js"></script>

Если вы хотите направить посетителя на определенную страницу вашего сайта, отошлите ему URL документа, созданного на шаге 2 (index.html). Любая HTML-страница будет размещаться во фрейме автоматически, так как вы импортировали в нее файл framed.js (см. шаг 3). Если посетитель переходит к одной из таких страниц по ссылке и оставляет на ней закладку, впоследствии он сможет быстро вернуться к ней. В Netscape для Windows и Internet Explorer Windows/Mac закладка на страницах во фреймах помещается следующим образом: нужно щелкнуть по интересующей странице и, удерживая кнопку мыши нажатой (Mac) или дважды щелкнув ею (Windows), выбрать необходимую опцию из всплывающего меню. Когда посетитель, поместив закладку на фреймовой странице, которая была создана описанным выше способом, возвращается к этой странице, она автоматически загружается во фрейм. Данный метод не позволяет избавиться от всех проблем, возникающих при размещении закладок на фреймовых страницах. Но пока производители браузеров не приложат все усилия для совместного разрешения этих проблем, он поможет сделать ваши сайты, использующие технологию размещения во фреймах, более удобными.

Листинг 22.24. Эта страница загружается в том случае, если URL не включает знака вопроса (?). Она содержит ссылку на файл frames.js, которая при необходимости помещает страницу во фрейм

<html> <head> <script src="framed.js"></script> <link rel="stylesheet" ->href="default.css"> </head> <body> <h2>Page 1</h2> </body> </html>

Листинг 22.25. Эта страница содержит ссылку с кодом из файла frames.js

<html> <head> <script src="framed.js"></script> <link rel="stylesheet" ->href="default.css"> </head> <body> <h2>Page 2</h2> </body> </html>

Отображение страницы на экране и при выводе на печать 379

Отображение страницы на экране и при выводе на печать Я никогда не видел офис, в котором не было бы бумажных документов, а увидев, очень удивился бы. Однако самым большим обещанием, сопровождающим продвижение компьютерных технологий, является обещание избавить вашу жизнь от бумаги – мол, не будет больше заваленных кабинетов и погубленных деревьев. Однако это всего лишь утопия. Наверное, мы полетим к другим галактикам раньше, чем избавимся от бумаги. С появлением лазерных и струйных принтеров мир оказался погребенным под грудами прекрасно отпечатанных листов. Даже Internet сыграл в этом свою роль: многие люди распечатывают Web-страницы, если они целиком не помещаются на экране. Однако Internet предназначен для отображения информации на экране компьютера, а не для печати. Графика, оптимизированная под Web, на распечатке выглядит ужасно, так как хорошо просматривается пиксельная структура в виде прямоугольных элементов. Однако для улучшения внешнего вида отпечатанных страниц все же можно кое-что сделать. Это требует немного дополнительных усилий, зато посетители вашего сайта будут вам очень благодарны. Ниже перечислены советы, следуя которым вы можете значительно улучшить внешний вид ваших Web-страниц при выводе на печать:

используйте CSS. Каскадные таблицы стилей – будущее разметки Web. CSS позволяет создавать документы, выглядящие так же, как и распечатанные из какого-нибудь текстового процессора;

указывайте способы отображения документа. CSS позволяет определять таблицы стилей для различных способов отображения документов – на экране или на бумаге (см. раздел «Настройка CSS для печати» в главе 2); используйте разрывы страниц, чтобы заголовки не отделялись от текста. Хотя не всеми браузерами поддерживаются знаки разрыва страниц (см. раздел «Установка разрыва страницы для печати» в главе 4), они, скорее всего, станут универсальным стандартом в будущем; отделяйте содержимое страницы от средств навигации при помощи фреймов. Старайтесь размещать содержимое в отдельном фрейме: в таком случае вы можете расположить средства навигации в других фреймах. Это позволит посетителям вашего сайта распечатывать только нужную им информацию (см. раздел «Открытие и закрытие фреймов»). избегайте использования фонового цвета или рисунков, а так же светлого цвета текста. Хотя цветной фон или фоновая графика могут сделать страничку симпатичной, они мешают при чтении текста после вывода на печать. Некоторые браузеры позволяют печатать документы без фона и фоновой графики, однако светлый текст при этом плохо виден на белой бумаге; не применяйте прозрачные цвета в графике. Это рекомендация особенно актуальна в том случае, если графика располагается поверх цветного фона или поверх другой картинки. Прозрачные области картинок при распечатке обычно окрашены в белый цвет вне зависимости от того, какой цвет фона находится под ними. Это не так страшно,

380 Разметка Web-страницы когда картинка располагается на белом фоне, однако результат просто ужасен, если фон темный; избегайте использования текста в графике. Текст, реализованный в виде картинки, выглядит на экране гладким, а на распечатке – состоящим из квадратов. Напротив, обычный текст может быть угловатым на экране, но печатается сглаженным на большинстве современных принтеров. Старайтесь применять обычный текст; создавайте специальные версии страниц, предназначенные для распечатки. Предпочтительнее создать отдельный документ для печати, чем заставлять посетителей вашего сайта следовать по ссылкам и распечатывать каждую страницу отдельно. Одним из лучших способов хранить информацию для печати в более или менее универсальном формате является Adobe Acrobat. Документы в этом формате не только содержат необходимую информацию, но и сохраняют форматирование, шрифты, графику. За более подробной информацией обращайтесь на сайт Adobe (http:/ /www.adobe.com).

импорт внешнего содержимого

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

382 Импорт внешнего содержимого

Тэги <ilayer> и <iframe> Самый простой способ (по крайней мере, в Netscape 4) разместить в HTML-документе данные, хранящиеся во внешних источниках, – воспользоваться тэгом <ilayer>. Когда вы указываете для него источник, он импортирует HTML-файл и применяет его так, как если бы внешняя информация являлась частью самого файла (рис. 23.1). К сожалению, этот тэг доступен только при работе с Netscape 4, а значит, стоит задуматься о других способах импортирования внешних данных, например для браузеров Internet Explorer или Netscape 6. Тэг <iframe> также может размещать внешние данные в HTML-документе. Однако в данном случае подобная информация рассматривается как отдельная часть, а не составляющая документа, поэтому она по-другому взаимодействует с объектами HTML (рис. 23.2). Кроме того, необходимо предусмотреть ограничения для тех посетителей, которые не используют браузер, поддерживающий слои Netscape.

Рис. 23.1. При помощи тэга <ilayer> Netscape 4 импортирует внешнюю информацию

Импорт информации из внешних источников при помощи тэгов <iframe> и <ilayer> 1. <ilayer></ilayer> В тэге <body> HTML-документа (листинг 23.1) определите тэг <ilayer> (см. раздел «Импорт внешнего содержимого с помощью слоев Netscape» в главе 16). 2. <nolayer>…</nolayer> Введите тэг <nolayer>. Он скрывает в себе код от Netscape 4 (см. раздел «Отображение содержимого слоев в браузерах, которые их не поддерживают» в главе 16).

Рис. 23.2. Netscape 6 поддерживает тэг <iframe>. Однако Web-страница в обоих браузерах выглядит одинаково

Тэги <ilayer> и <iframe> 383 Листинг 23.1. Файл HTML использует тэги <iframe> и <ilayer> в зависимости от типа браузера (Netscape или Internet Explorer) для импорта внешнего содержимого

<html> <body> <ilayer id="htNAV" ->src="external.html"></ilayer> <nolayer> <iframe id="htIE" src= ->"external.html" frameborder="0" ->marginheight="0" marginwidth="0" ->width="100%" height="100%"> <a href="external.html">External ->Content</a> </iframe> </nolayer> </body> </html>

Листинг 23.2. Внешнее содержимое импортируется в файл index.html

<div style="text-align:center"> <h1>Alice In Wonderland</h1> <h3>Chapter 2</h3> <img src="alice36.gif" width="360" ->height="480" border="0"> </div>

3. <ifarme>…</iframe> В тэге <nolayer> укажите тэг <iframe> и установите для него импорт внешнего содержимого. 4. <a href="external.html"> External ->Content</a> В тэге <iframe> укажите ссылку на файл external.html, используемый для браузеров, которые не поддерживают тэги <iframe>и <ilayer>. 5. external.html Создайте новый HTML-файл и сохраните его под именем external.html (листинг 23.2). Он не содержит обычных открытых и закрытых тэгов <html> (они находятся в главном документе), зато используется тэг <body>; кроме того, вы можете добавить любые другие тэги.

Тэг <iframe> работает так же, как и независимый фрейм, поэтому вам необходимо установить все ссылки в файле external.html на тэг <top> или фрейм, в котором будет отображаться содержимое. В любом случае все эти ссылки следует указать в тэге <iframe>. Однажды я использовал описанный выше метод при создании Web-сайта. В нижней части страницы, содержащей интересную статью, я расположил список рекомендуемых для прочтения статей. Я создал 14 внешних файлов, включающих эти статьи, каждая из которых имела свое название. Файлы были импортированы в документ при помощи тэгов <ilayer> и <iframe>. Когда я размещал новую статью на своем сайте, я просто добавил ссылку на файл, содержащий ее в основном документе. И каков же результат? Все статьи сайта, которые ссылались на статью из нового файла, автоматически обновились.

384 Импорт внешнего содержимого

Включения на стороне сервера Самый простой способ импортировать внешние файлы – использовать включение на стороне сервера (server-side include). Это не HTML-тэг, а тэг, указывающий серверу, какой именно файл нужно добавить. Реализация данного метода зависит от того, воспринимается ли данный тэг вашим сервером, однако большинство серверов его поддерживают.

Добавление включения на страницу 1. <!–#includevirtual="external.html"–> Добавьте этот тэг в любом месте тэга <body> вашего HTML-документа и укажите импортируемый файл external.html (листинг 23.3). 2. <!–#echovar="DATE_LOCAL"–> <!–#echovar="DATE_GMT"–> Другой полезный серверный тэг – это #echo, при помощи которого сервер выдает информацию о дате, местном времени или времени по Гринвичу (GMT). 3. external.html Создайте новый HTML-файл и сохраните его под именем external.html. Он не содержит обычного тэга <html> (который содержится в основном документе), в этот файл включены тэги <body>, а также другие тэги, которые могут присутствовать в обычном HTML-документе (листинг 23.4). Результат показан на рис. 23.3.

Листинг 23.3. Тэг включения на стороне сервера позволяет использовать внешние данные, но только при условии, что страница загружается с Web-сервера

<html> <body> <!–– #include virtual= ->"external.html" ––> <br><br> <!–– #echo var="DATE_LOCAL" ––> <br><br> <!–– #echo var="DATE_GMT" ––> <br><br> </body> </html>

Листинг 23.4. Внешнее содержимое, импортированное в HTML-документ. Код, описывающий содержимое, может быть любого HTML-стандарта, но не должен включать тэги <html> или <body>

<div style="text-align:center"> <h1>Alice In Wonderland</h1> <h3>Chapter 1</h3> <img src="alice28.gif" width="358" ->height="481" border="0"> </div>

Внешний файл JavaScript 385 Недостаток этого метода состоит в том, что внешнее содержимое не появится на экране до тех пор, пока не загрузится с сервера. При попытке просмотреть файл с жесткого диска вы ровным счетом ничего не увидите. С помощью описанного метода вы можете добавить часы, которые показывали бы посетителям точное время.

Внешний файл JavaScript

Рис. 23.3. Внешнее содержимое было импортировано правильно

Листинг 23.5. Вы можете расположить тэг <script> в любом месте HTML-документа, но чтобы добавить внешнее содержимое, вам необходимо поместить его в тэге <body>. Это позволяет создавать HTML-страницы при помощи JavaScript

Используя тэг <script>, можно присоединить внешний файл к HTML-документу при помощи JavaScript-кода. Так же допускается применять файл JavaScript для описания HTML-кода вашей Web-страницы. Преимущество использования этого метода заключается в том, что посредством JavaScript легко «привязать» к странице какое-либо содержимое (см. раздел «Верхние и нижние колонтитулы» в главе 22).

Импорт внешнего файла JavaScript в HTML-документ 1. <scriptsrc="external.js"></script> Импортировать внешний файл JavaScript несложно. Определите атрибут src тэга <script> и ничего не располагайте внутри самого тэга (листинг 23.5). Этот метод позволяет поместить внешний код JavaScript в HTML-файл. Если JavaScript добавляет на страницу HTML-тэги, то они также будут помещены в ту часть основного документа, к которой «привязывается» файл JavaScript.

386 Импорт внешнего содержимого 2. external.js Создайте внешний файл JavaScript и сохраните его как external.js (листинг 23.6). Он может содержать любой код на JavaScript, но чтобы импортировать его содержимое в HTML-документ, необходим код, описывающий HTML-тэги. Каждая строка HTML-кода добавляется в документ при помощи оператора document.write. Результат добавления внешнего кода представлен на рис. 23.4.

Листинг 23.6. Внешний файл JavaScript может содержать любой код (написанный на JavaScript), но если вы хотите включить HTML-содержимое, используйте оператор document.write для каждой строки HTML-кода

document.writeln('<div style= ->"text-align:center">'); document.writeln('<h1>Alice In ->Wonderland</h1>'); document.writeln('<h3>Chapter 3</h3>');

Недостаток описанного метода заключается в том, что приходится помещать каждую строку HTML-кода в JavaScript. Это достаточно трудоемкая работа; кроме того, в результате увеличивается объем файла и затрудняется отладка. Сказанное касается большинства программ WYSIWYG. Если вы помещаете какое-либо содержание в тэг <script>, оно не воспринимается программой. Помните, что содержимое, созданное при помощи JavaScript, должно заключаться в одинарные кавычки ('). Если при описании на JavaScript возникает необходимость использовать в тексте одинарную кавычку, то перед ней ставиться обратный слэш (\). То есть код document.write ('How's it going?'); работать не будет. Правильное написание включает слэш: document.write('How\'s it going?');.

Рис. 23.4. Импортированный файл JavaScript создает заголовок, под которым помещает изображение

Изучение работы других сайтов 387

Изучение работы других сайтов

Рис. 23.5. Страница, внешний код которой требуется просмотреть. Абсолютный URL указан в адресной строке

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

Просмотр исходного кода страницы

Рис. 23.6. Меню View в браузере Internet Explorer 5 для Windows

Рис. 23.7. Меню View в браузере Netscape 6 для Windows

1. Откройте Web-страницу, код которой требуется проанализировать (рис. 23.5). 2. Просмотрите исходный код. В различных браузерах доступ к нему осуществляется по-разному. Но в большинстве случаев достаточно выбрать опцию View Source (Просмотр исходного кода) или просто Source (Исходный код) в меню View (Просмотр) – рис. 23.6 и 23.7. 3. В исходном коде найдите ссылку на внешний источник, код которого нужно просмотреть (рис. 23.8). Вам, возможно, придется проделать ряд операций, чтобы добраться до этого кода, но в тэге <head> документа вы обязательно обнаружите тэги <script> (для JavaScript) или <link> (для CSS). 4. Соедините URL и внешнее содержимое. Тэг <script> имеет атрибут src для URL, в то время как тэг <link> использует href. Если URL – абсолютный путь (начинается с http://), используйте путь, описанный на шаге 5. В противном случае выберите текущий URL (в адресной строке браузера), но добавьте к нему относительный путь. Удалите последний

388 Импорт внешнего содержимого уровень URL текущей страницы, а также «../» в относительном URL. Удалите дополнительный уровень из URL текущей страницы. Затем добавьте оставшуюся часть URL страницы к относительному пути, не используя «../» (рис. 23.9). 5. Откройте URL внешнего содержимого, который вы определили на шаге 4 (рис. 23.10). Разные браузеры применяют различные методы реализации тех или иных возможностей, но обычно в меню File (Файл) следует выбрать опцию Open Location (Открыть адрес). Некоторые браузеры открывают код в окне, другие требуют, чтобы файл, находящийся по данному URL, был переписан на диск (рис. 23.11), а затем открыт в таких программах, как Notepad или SimpleText (рис. 23.12).

Рис. 23.9. Код, позволяющий определить абсолютный URL внешнего содержимого

Рис. 23.10. URL внешнего кода написан в адресной строке браузера

Рис. 23.11. Некоторые браузеры требуют обязательной записи файла на диск, не позволяя просматривать код непосредственно в своем окне

Рис. 23.8. Исходный код Web-страницы. Многие из ссылок на внешние файлы используют относительные пути

Рис. 23.12. Внешний код найден

Навигация Web сайта

24 Без навигации не может существовать ни один сайт. С ее помощью ваш сайт находят посетители. Существует множество навигационных элементов, помогающих перемещаться от страницы к странице: главное меню с различными подменю, вспомогательные меню, всевозможные карты (путеводители), гипертекстовые ссылки и т.п. Хорошо спланированная система навигации позволяет посетителям быстро находить нужную информацию. Бессистемное использование навигации может оттолкнуть посетителей от вашего сайта: люди попросту заблудятся на нем, не сумев найти интересующие их данные, после чего вряд ли захотят вернуться на ваш сайт. Прочитав эту главу, вы узнаете о наиболее продуктивных способах создания динамической навигации, которые позволяют улучшить гибкость сайта, а также существенно расширить диапазон содержащейся на нем полезной информации.

390 Навигация Web-сайта

Определение стилей ссылок Большинство браузеров позволяют установить стиль ссылок в тэге <body> (например, цвет, зависящий от состояния ссылки). Используя CSS, вы можете задавать не только цвет, но и другие свойства ссылок. Хотя ссылка определяется в тэге (<a>), переопределить ее специфичные атрибуты невозможно. Чтобы задать соответствующие свойства ссылки, необходимо применять псевдоклассы, связанные с каждым из этих свойств (листинг 24.1).

Листинг 24.1. Здесь определяется четыре ссылки. Установка одной или нескольких из этих ссылок повлияет на все тэги <a>, расположенные на странице

<html> <head> <style type="text/css"> a:link { color: #cc0000; font-weight: bold; } a:active { color: #990000; background-color: #ff0000; text-decoration: none; } a:visited { color: #990000; text-decoration: none; font-weight: normal; }

Не совсем класс Браузеры, поддерживающие CSS, автоматически распознают определенные специальные классы – псевдоклассы (pseudo-class). Псевдоклассы, по сути, являются тэгами, имеющими набор определенных уникальных атрибутов. Атрибуты допускается задавать независимо от других свойств. В тэге <a>, например, можно указать несколько типов состояний ссылки: active (активная), visited (посещенная), hover (указанная) и link (состояние по умолчанию). Вы можете определять псевдоклассы так же, как HTML-селекторы.

a:hover { text-decoration: none; color: #ff0000; cursor: nw-resize; } </style> </head> <body> <h3>CHAPTER XI<br> Who Stole the Tarts?</h3> <p><a href="index.html">The King</a> ->and <a href="#">Queen of Hearts</a> ->were seated on their throne when they ->arrived, with a great crowd ->assembled...</p> </body> </html>

Определение стилей ссылок 391

Отображение ссылки в зависимости от ее состояния Рис. 24.1. Стиль гипертекстовой ссылки

Рис. 24.2. Гипертекстовая ссылка, которая только что была активизирована

Рис. 24.3. Гипертекстовая ссылка, которой посетитель уже воспользовался

Рис. 24.4. Гипертекстовая ссылка, на которую указывает курсор мыши

1. a:link{…} Псевдокласс link позволяет определять вид гипертекстовой ссылки, которая еще не была выделена (рис. 24.1). 2. a:active{…} С помощью псевдокласса active устанавливается вид активизированной ссылки (рис. 24.2). 3. a:visited{…} Данный псевдокласс (visited) задает отображение уже посещенной ссылки (рис. 24.3). 4. a:hover{…} Псевдокласс hover описывает вид ссылки, если посетитель указывает на нее курсором мыши (рис. 24.4).

Псевдоклассы hover и visited не поддерживаются Netscape 4. Порядок определения стилей ссылки может повлиять на ее отображение в некоторых браузерах. Так, например, в Internet Explorer 5 для Windows, размещая hover до visited, вы не сможете добиться выполнения псевдокласса hover, если посетитель воспользовался данной ссылкой. Классы выполняются в том же порядке, в каком размещены в коде, поэтому псевдокласс active определяется до hover.

392 Навигация Web-сайта Наследуются все состояния, определяющие стили ссылки. Например, шрифт, который используется при отображении ссылки, должен наследоваться состояниями active, visited и hover. Но между браузерами существует ряд несоответствий. Чтобы избежать связанных с этим неприятностей, определяйте все атрибуты для каждого стиля ссылки. Всемирная паутина – это среда гипертекста, поэтому очень важно, чтобы пользователи могли ориентироваться во всем разнообразии текстовой информации и ссылок. Нельзя рассчитывать на то, что все посетители активизируют опцию подчеркивания ссылок, поэтому необходимо установить отображение ссылки для всех документов, входящих в вашу Web-страницу.

Хотя CSS позволяет задавать не только цвет ссылки, я советую быть осторожным при изменении других атрибутов с помощью псевдокласса hover. Например, модификация типа шрифта, его размера и других свойств часто приводит к тому, что на экране шрифт выглядит бóльшим, чем вы его задали, а текст выходит за границы отведенного для него слоя. Приходится обновлять всю страницу, что может вызвать недовольство посетителей сайта.

Выбор цветов ссылки В большинстве браузеров для обозначения ссылок по умолчанию используются синий, красный или пурпурный цвета (например, синий – для непосещенной ссылки, а красный – для посещенной). Проблема, возникающая при таком разделении ссылок, заключается в том, что посетитель способен забыть, какой цвет в том или ином случае используется. Выбирайте цвета таким образом, чтобы ссылка отличалась от остального текста на экране и чтобы посетитель мог легко определять ее состояние (visited, hover, active или link). Однако ссылки не должны бросаться в глаза и отвлекать посетителя от чтения. Я рекомендую устанавливать для ссылок контрастные цвета по отношению к цвету фона и текста. Для посещенных ссылок задавайте более яркий или, наоборот, более темный оттенок выбранного цвета (в зависимости от того, яркий или темный цвет фона). Неактивизированные ссылки должны отличаться от посещенных более ярким цветом. При разработке страницы с белым фоном и текстом черного цвета я, возможно, применял бы красный цвет для непосещенных ссылок (#ff0000), а розовый – для посещенных. Яркий цвет выделяется на общем фоне, а светлый привлекает меньше внимания, но все-таки делет ссылку отличимой.

Определение различных стилей для ссылок 393

Определение различных стилей для ссылок Рис. 24.5. Стиль для ссылок меню. На экране эти ссылки должны быть красными

Рис. 24.6. Стиль для ссылки в тексте. На экране эти ссылки должны быть зелеными

Листинг 24.2. В приведенном коде добавляется два стиля ссылок. Первый из них определяет класс menu, а второй задает отображение ссылок, заключенных в тэге <p>

<html> <head> <style media="screen" type="text/css"> a.menu:link { color: #cc0000; font-weight: bold; text-decoration: none; } a.menu:active { color: #666666; font-weight: bold; text-decoration: none; } a.menu:visited { color: #cc0000; font-weight: bold; text-decoration: none; } a.menu:hover { text-decoration: none;

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

Установка сложных ссылок 1. a.menu:link{…} Вы можете установить стили ссылок как часть класса, если расположите разделитель (.) и имя класса до двоеточия (:). В приведенном примере (листинг 24.2) стили ссылки задаются для класса menu, который является классом тэга <a> ссылки (см. раздел «Определение классов для создания тэгов» в главе 2). Или для определения сложных ссылок вы можете воспользоваться следующим способом: 2. pa:link{…} Вы также можете установить стиль ссылки неявно. Ссылка будет отображаться

Еще одно состояние ссылки Хотя четыре состояния ссылки, используемые в CSS, чрезвычайно полезны, было бы неплохо добавить к этому стандартному набору пятое состояние – current. Данный атрибут позволил бы управлять стилем отображения ссылки, если она указывает на отображаемую страницу (URL Web-страницы, например такой же, как и href). Применяя это состояние, Web-разработчики с помощью CSS могли бы определять, на какой странице находится посетитель, не добавляя программный код на каждую страницу.

394 Навигация Web-сайта заданным образом, если ее родителем является определенный тэг. В рассматриваемом примере отображение тэга ссылки (<a>) установлено, если она находится внутри тэга <p> (см. раздел «Определение тэгов в контексте» в главе 2). Определение нескольких цветов ссылки позволяет посетителю отличать типы ссылок. В приведенном примере ссылки меню и ссылки, находящиеся в тексте, различны по внешнему виду. Может быть, вы захотите, чтобы ссылки, ведущие на другие сайты, отличались от всех остальных.

Оформление текста: подчеркивать или нет Подчеркивание – самый распространенный способ выделения ссылок. Довольно часто разработчики используют один цвет как для текста, так и для ссылок, предполагая, что посетители легко распознают подчеркнутые ссылки среди остального текста. Но как посетитель сможет отличить ссылки, если отключит опцию подчеркивания? Кроме того, при подчеркивании ссылок возникает еще одна проблема. Если на вашей странице много ссылок, оформленных таким образом, страница превращается в какое-то подобие азбуки Морзе с бесконечным набором точек и тире. Текст становится трудно читать. CSS позволяет отключать опцию подчеркивания ссылок независимо от пользователя. Я рекомендую использовать эту возможность, а также применять цвета для выделения гипертекстовых ссылок. А подчеркивание можно задать для состояния hover. При наведении на ссылку указателя мыши посетителю ясно видны ее изменения.

Листинг 24.2 (окончание)

color: #ff0000; cursor: move; } p a:link { color: #00cc00; font-weight: bold; } p a:active { color: #666666; text-decoration: none; } p a:visited { color: #00cc00; text-decoration: none; font-weight: normal; } p a:hover { text-decoration: none; color: #00ff00; cursor: nw-resize; } </style> </head> <body> <h3> <a class="menu" href= ->"#">&lt;Previous Chapter</a> | <a class="menu" href="#">Next ->Chapter &gt;</a> </h3> <h3>CHAPTER XI<br> Who Stole the Tarts? </h3> <p><a href="index.html">The King</a> ->and <a href="#">Queen of Hearts</a> ->were seated on their throne when they ->arrived, with a great crowd ->assembled about them...</p> </body> </html>

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

Выпадающее меню 395

Выпадающее меню

Рис. 24.7. Заголовки меню

Выпадающее меню (drop-down menu) – это наиболее любимый Web-дизайнерами и часто используемый GUI-элемент (Graphical User Interface – графический пользовательский интерфейс). Заголовок меню отображается в верхней части окна, при щелчке по заголовку раскрывается список предоставляемых опций. Например, в меню File (Файл) вы можете найти опции Save (Сохранить), Close (Закрыть) и Print (Печать). Таким образом вы можете достигнуть некоторых полезных эффектов (рис. 24.7 и 24.8).

Добавление выпадающего меню на страницу

Рис. 24.8. После наведения мыши на заголовок Листинг 24.3. Функция popMenu() отображает меню. Функция delayHide() не дает ему закрыться прежде, чем будет выбрана одна из предоставляемых опций

<html> <head> <script src="findDOM.js"></script> <script> var menuTop = 45; var menuLeft = 400; var domSMenu = null; var oldDomSMenu = null; var t = 0; var lDelay = 3; var lCount = 0; var pause = 100;

1. <scriptsrc="findDOM.js"></script> В большинство функций JavaScript, при помощи которых изображения размещаются на экране, необходимо включить код findDOM (см. раздел «Использование общей для браузеров DOM» в главе 11). Для этого поместите код во внешнем текстовом файле, который затем следует импортировать на ту страницу, где код будет применяться (листинг 24.3). 2. varmenuTop=45; Инициализируйте переменные, которые осуществляют контроль и запись различных величин: – menuTop записывает положение верхней границы выпадающего меню (позже будет переопределена); – menuLeft сохраняет положение левой границы выпадающего меню (позже будет переопределена); – domSMenu записывает DOM для данного меню; – oldDomSMenu сохраняет DOM для последнего открытого меню;

396 Навигация Web-сайта – t определяет, будет меню закрыто (1) или нет (2); – lDelay указывает время, в течение которого меню должно оставаться открытым; – lCount определяет, как долго меню оставалось открытым до закрытия. Когда lCount = lDelay, меню закрывается. Вам наверняка захочется изменить переменную lDelay. Она определяет время, в течение которого меню остается открытым, если посетитель не выбрал ни одну из появившихся опций. Чем больше значение lDelay, тем дольше меню остается на экране. 3. functionpopMenu(menuNum){…} Введите, используя JavaScript, функцию popMenu(). Сначала она закрывает другие открытые меню, потом вычисляет положение левой и нижней границ заголовка, чтобы правильно расположить выпадающее меню, и затем отображает его на экране. 4. functiondelayHide(){…} Введите функцию delayHide(), используя JavaScript. Она скрывает видимое меню после небольшой задержки, задаваемой переменной lDelay. 5. .menuStyle{…} Создайте класс стиля для меню, который определяет внешний вид меню и заголовка. 6. #menuHead1{…} Каждому заголовку меню присвойте ID, который должен быть задан в относительных координатах. 7. #menu2{…} Присвойте ID каждому меню. Они определяют отдельные меню и должны быть заданы абсолютными координатами.

Листинг 24.3 (продолжение)

Выпадающее меню 397 Листинг 24.3 (продолжение)

oldDomSMenu.zIndex = '0'; oldDomSMenu = null; lCount = 0; return false; } if (t == 2) { lCount = 0; ->return false; } if (t == 1) { lCount = lCount + 1; if (lDelay <= lCount) { t = 0; } if (lDelay >= lCount) { setTimeout ->('delayHide(' + t + ')',pause); } } } </script> <style type="text/css"> body { color: white; font-family: ->"Trebuchet MS", Arial, Helvetica, Geneva, ->sans-serif; background-color: #333; } #content { margin-top: 35px; } .menuStyle { color: #000000; font-size: ->12px; font-family: "Trebuchet MS", ->Verdana, Arial, Helvetica, sans-serif; ->background-color: #ccc; padding: 5px; ->width: 100%; border: solid 1px #000000; } #menuHead { background-color: #ccc; ->position: absolute; z-index: 50; top: ->0px; left: 0px; } #menuHead1, #menuHead2, #menuHead3 { ->position: relative; } #menu1,#menu2,#menu3 { position: ->absolute; z-index: 100; visibility: ->hidden; width: 150px; } a.menulink:link { font-weight: bold; ->text-decoration: none; } a.menulink:visited { font-weight: bold; ->text-decoration: none; } a:menulink:active { color: #666; ->font-family: "Trebuchet MS", Verdana, ->Arial, Helvetica, sans-serif; ->text-decoration: underline; } a.menulink:hover { color: #900; ->font-family: "Trebuchet MS", Verdana, ->Arial, Helvetica, sans-serif; ->font-weight: bold; text-decoration: ->none; cursor: ne-resize; }

8. a.menuLink:link{…} Создайте стиль ссылок для всех меню. Этот пункт необязателен, но я рекомендую его выполнить, чтобы сделать меню более привлекательным. 9. <divid="menuHead" ->class="menuStyle">…</div> Создайте CSS-слой для заголовков меню. Ссылки на все заголовки меню, создаваемые на шаге 10, будут размещаться в этом слое. 10. <aid="menuHead1"class="menuLink" ->href="#"onMouseOver= ->"popMenu(1)"onMouseOut="t=1; ->delayHide()">Menu1</a>| Для каждого заголовка меню создайте ссылку. По своей сути заголовки меню являются ссылками, которые вызывают функцию popMenu() при событии onMouseOver и функцию delayHide при событии onMouseOut. 11. <divid="menu1"class="menuStyle">… -></div> Добавьте CSS-слой для каждого меню. Меню можно назвать слоем, содержащим HTML-ссылки. Их вы создадите на следующем шаге. 12. <aclass="menuLink"onMouseOut="t=1; ->delayHide()"onMouseOver="t=2;" ->onClick="t=0;delayHide();" ->href="#">Option1.1</a><br> Добавьте ссылки на каждый пункт создаваемого меню. Меню открывается при наведении указателя мыши на заголовок меню. Если убрать указатель со ссылки, меню через некоторое время закроется. Как только указатель опять будет наведен на ссылку, меню снова отобразится на экране.

398 Навигация Web-сайта Вы можете открывать меню другим способом, если расположите заголовки не по горизонтали, а вертикально; выпадающие меню при этом находятся не слева и снизу, а справа и сверху. Этот код является одним из моих любимых. Я использую его при создании меню своего Web-сайта (рис. 24.9). Большинство операционных систем открывает меню только при щелчке по его заголовку. Вы можете изменить событие, вызывающее данную функцию, на onClick.

Рис. 24.9. Такое меню используется на сайте webbedENVIRONMENTS

Листинг 24.3 (продолжение)

</style> </head> <body> <div id="menuHead" class="menuStyle"> <b> <a id="menuHead1" class="menuLink" href="#" onMouseOut="t = 1; delayHide()" ->onMouseOver="popMenu(1)">Menu 1</a> | <a id="menuHead2" class="menuLink" href="#" onMouseOut="t = 1; delayHide()" ->onMouseOver="popMenu(2)">Menu 2</a> | <a id="menuHead3" class="menuLink" href="#" onMouseOut="t = 1; delayHide()" ->onMouseOver="popMenu(3)">Menu 3</a> | </b> </div> <div id="menu1" class="menuStyle"> <b> <a class="menuLink" onMouseOut="t = 1; delayHide()" onMouseOver="t = 2;" ->onClick="t = 0; delayHide();" href="#">Option 1.1</a><br> <a class="menuLink" onMouseOut="t = 1; delayHide()" onMouseOver="t = 2;" ->onClick="t = 0; delayHide();" href="#">Option 1.2</a><br> <a class="menuLink" onMouseOut="t = 1; delayHide()" onMouseOver="t = 2;" ->onClick="t = 0; delayHide();" href="#">Option 1.3</a><br> </b> </div> <div id="menu2" class="menuStyle"> <b> <a class="menuLink" onMouseOut="t = 1; delayHide()" onMouseOver="t = 2;" ->onClick="t = 0; delayHide();" href="#">Option 2.1</a><br> <a class="menuLink" onMouseOut="t = 1; delayHide()" onMouseOver="t = 2;" ->onClick="t = 0; delayHide();" href="#">Option 2.2</a><br> <a class="menuLink" onMouseOut="t = 1; delayHide()" onMouseOver="t = 2;" ->onClick="t = 0; delayHide();" href="#">Option 2.3</a><br>

Выпадающее меню 399 Листинг 24.3 (окончание)

<a class="menuLink" onMouseOut="t = 1; delayHide()" onMouseOver="t = 2;" ->onClick="t = 0; delayHide();" href="#">Option 2.4</a><br> </b> </div> <div id="menu3" class="menuStyle"> <b> <a class="menuLink" onMouseOut="t = 1; delayHide()" onMouseOver="t = 2;" ->onClick="t = 0; delayHide();" href="#">Option 3.1</a><br> <a class="menuLink" onMouseOut="t = 1; delayHide()" onMouseOver="t = 2;" ->onClick="t = 0; delayHide();" href="#">Option 3.2</a><br> <a class="menuLink" onMouseOut="t = 1; delayHide()" onMouseOver="t = 2;" ->onClick="t = 0; delayHide();" href="#">Option 3.3</a><br> <a class="menuLink" onMouseOut="t = 1; delayHide()" onMouseOver="t = 2;" ->onClick="t = 0; delayHide();" href="#">Option 3.4</a><br> <a class="menuLink" onMouseOut="t = 1; delayHide()" onMouseOver="t = 2;" ->onClick="t = 0; delayHide();" href="#">Option 3.5</a><br> <a class="menuLink" onMouseOut="t = 1; delayHide()" onMouseOver="t = 2;" ->onClick="t = 0; delayHide();" href="#">Option 3.6</a><br> </b> </div> <div id="content"> <p>Et quid erat, quod me delectabat, nisi amare et amari?</p> </div> </body> </html>

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

400 Навигация Web-сайта

Выдвижное меню Вы устали от сайтов с древней навигацией, элементы которой расположены в левой или правой части страницы? Меню вашего Web-сайта занимают все больше и больше ценного места? Страницы загромождены ссылками, которые посетители применяют только для перемещения в какую-нибудь особую часть страницы и не используют при изучении содержимого? Если вы ответили «Да!» хотя бы на один из этих вопросов, я могу предложить очень простое решение: позвольте посетителям вызывать или скрывать меню по мере необходимости, то есть создайте выдвижное меню (sliding menu) – рис. 24.10–24.12.

Рис. 24.10. На экране отображается только закладка меню

Создание выдвижного меню 1. <script src="findDOM.js"></script> В любую функцию JavaScript, которая непосредственно размещает объект на странице, необходимо включить код findDOM. Для этого поместите его во внешнем текстовом файле, а затем присоедините файл к странице, на которой код будет использоваться (листинг 24.4). 2. var open=0; Инициализируйте следующие переменные: – open записывает, открыто или закрыто меню; – slideDelay содержит информацию о времени, которое понадобится для открытия меню. Чем больше значение, хранящееся в этой переменной, тем медленнее открывается («выдвигается») меню, однако при этом движение не будет плавным; – domStyle сохраняет DOM для меню. 3. function setMenu(objectID){…} Добавьте функцию setMenu() в код JavaScript. Она устанавливает начальную (cX)

Рис. 24.11. После щелчка по закладке меню выдвигается

Рис. 24.12. Теперь меню отображено полностью

Выдвижное меню 401 Листинг 24.4. Функция setMenu() инициализирует данные, а затем вызывает функцию slideMenu(), выдвигающую меню

<html> <head> <script src="findDOM.js"></script> <script language="JavaScript"> var open = 0; var slideDelay = 0; var domStyle = null; function setMenu (objectID) { if (isDHTML){ domStyle = findDOM(objectID,1); if (open) { fX = -80; cX = 0; ->open = 0; } else { fX = 0; cX = -80; open = 1; } slideMenu(cX,fX); } } function slideMenu (cX,fX) { if (cX != fX) { if (cX > fX) { cX -= 2; } else { cX += 2; } domStyle.left = cX; setTimeout('slideMenu(' + cX + ',' ->+ fX + ')', slideDelay); } return; } </script> <style type="text/css"> body { margin-left: 30px; } #mainMenu { left: -80px; top: 0px; } .menu{ position:absolute; } a:link { color: red; font: bold 12px ->"Trebuchet MS", Arial, Helvetica, ->Geneva, sans-serif;} </style> </head> <body> <span id="mainMenu" class="menu"> <table border="0" cellpadding="5" ->cellspacing="0" frame width="100" ->bgcolor="#999999"> <tr>

и конечную (fX) точки выдвигающегося меню в зависимости от его текущего состояния (открыто или закрыто). Первая переменная (cX) определяет текущее положение левой границы меню и изменяется в диапазоне от –80 до 0. Нижняя граница этого диапазона зависит от разности между шириной меню и закладки. Например, когда cX=–80, первые 80 пикселов меню скрыты, отображается только закладка меню шириной около 20 пикселов. Значит, меню закрыто. Когда cX=0, левый край меню совпадает с левым краем окна – меню открыто. Эта функция также присваивает переменной open значение 0 (закрыто), если меню было открыто, и значение 1 (открыто), если оно было закрыто. Кроме того, данная функция вызывает функцию slideMenu(). 4. function slideMenu(cX,fX){…} Используя JavaScript, опишите функцию slideMenu(). Она сначала проверяет, совпадает ли текущее положение cX с конечным fX. Если ответ положительный, то выполнение прекращается. Если эти значения не совпадают, функция прибавляет или вычитает два пиксела из значения, хранящегося в cX, в зависимости от того, открывается или закрывается меню. Она также присваивает переменной, контролирующей левый край меню, новое значение положения. Затем функция продолжает выполнение, но уже с новым значением cX. Она выполняется циклически до тех пор, пока значение cX не станет равным fX (меню как бы выдвигается из края окна). 5. .menu{…} #mainMenu{…} В тэге <head> документа установите таблицу стилей, содержащую один главный класс, который имеет все свойства меню

402 Навигация Web-сайта (.menu), и каждому создаваемому меню присвойте ID. В приведенном примере определяется простое меню (mainMenu). Заметьте, что левая граница в .menu, которая затем изменится при запуске функции slideMenu(), инициализирована значением –80. Такая установка не скрывает меню, закладка остается видимой. 6. <span id="mainMenu" ->class="menu">…</span> В тэге <body> страницы создайте меню. В рассматриваемом примере меню создано при помощи таблицы, контролирующей слой. Один из элементов <td> содержит ссылку, которая при щелчке запускает функцию setMenu(), заставляя меню выдвигаться.

Вы можете создать столько меню, сколько потребуется, при этом каждое меню должно располагаться в собственном тэге <span>, а также иметь собственный ID. Удостоверьтесь, что меню не перекрывают друг друга. В тэге <span> допускается помещать любое содержание: графику, гипертекстовые ссылки, формы и т.д. Как меню отображается в браузерах, не поддерживающих DHTML? Это зависит от того, каким образом вы его создаете. В приведенном примере меню будет появляться у левой границы страницы. Если бы вы размещали меню в таблице с каким-либо содержанием в правой части окна, оно выглядело бы как обыкновенное боковое меню (нединамическое).

Листинг 24.4 (окончание)

<td bgcolor="#cccccc" width="80" align="right"><a href="#">Option 1</a></td> -><td rowspan="6" width="10"> <div align="left"> <a href="javascript:setMenu("mainMenu")"><img src="menuTab.gif" width="15" ->height="100" border="0"> </a> </div> </td> </tr><tr> <td width="80" align="right"><a href="#">Option 2</a></td> </tr><tr> <td bgcolor="#cccccc" width="80" align="right"><a href="#">Option 3</a></td> </tr><tr> <td width="80" align="right"><a href="#">Option 4</a></td> </tr><tr> <td bgcolor="#cccccc" width="80" align="right"><a href="#">Option 5</a></td> </tr><tr> <td width="80" align="right"><a href="#">Option 6</a></td> </tr></table> </span> <p>Et quid erat, quod me delectabat, nisi amare et amari?</p> </body> </html>

Панель управления сайтом 403

Панель управления сайтом

Рис. 24.13. Ссылки в окне управления браузером

Листинг 24.5. Функция openRemote() открывает дополнительное окно

<html> <head> <script> var remote = null; window.name = "content"; function openRemote(contentURL, ->windowName,x,y) { widthHeight = "height=" + y + ", ->width=" + x; remote = window.open(contentURL, ->windowName,widthHeight); remote.focus(); } </script> <style type="text/css"> h1 { color: silver; font-size: 36px; ->font-family: Palatino, "Times New ->Roman", Georgia, Times, serif; } </style> </head> <body onLoad="openRemote('remote.html', ->'remote',150,300)"> <b><a href="javascript:openRemote ->('remote.html','remote',150,300)"> Open Remote Control </a> <h1>Home</h1> </body> </html>

Вы можете упростить поиск необходимой информации и сделать свой сайт более привлекательным, создав панель управления (remote control). В Internet панель управления представляет собой небольшое окно браузера, в котором расположены ссылки. С их помощью посетитель может изменять содержимое в главном окне браузера (рис. 24.13). Для создания панели управления откройте в браузере новое окно (см. раздел «Новое окно браузера» в главе 14) и расположите в нем HTML-файл, содержащий ссылки, в атрибутах которых указывается, что новые страницы надо открывать в главном окне браузера.

Создание панели управления сайтом 1. var remote=null; На Web-странице, которая будет содержать панель управления, инициализируйте переменную remote значением null. Это означает, что при загрузке страницы панель управления закрыта (листинг 24.5). 2. window.name="content" Чтобы содержимое отображалось в главном окне, ему нужно присвоить имя, например content. 3. function openRemote(contentURL, ->windowName,x,y){…} Создайте, используя JavaScript, функцию openRemote(). Она открывает новое окно браузера, ширина которого равна x, а высота – y. Этому окну присвойте имя windowName. Исходный код – contentURL. Чтобы окно панели управления всегда появлялось поверх остальных окон, введите в сценарий функцию focus.

404 Навигация Web-сайта 4. openRemote('remote.html','remote', ->150,300) Функция, которая открывает окно панели управления (шаг 3), вызывается при помощи ссылки или обработчика событий. Для ее вызова необходимо ввести исходный файл, имя окна и его размеры. 5. remote.html Исходный файл для панели управления может содержать любой требуемый код. Я рекомендую применять фреймовую структуру с инструментами управления, расположенными в верхнем фрейме, и узким фреймом в нижней части страницы, содержащим ссылку, которая закрывает окно с панелью управления (листинг 24.6). В приведенном примере используется событие onLoad, чтобы вызвать новое окно с панелью управления. Функция сообщает главному окну о закрытии фрейма, присваивая переменной remote значение null. 6. controls.html Все ссылки, находящиеся в окне панели управления, должны указывать на содержимое главного окна (в данном примере content), допустим target="content" (листинг 24.7). 7. close.html Файл close.html содержит простую функцию closeWindow(), которая закрывает окно, если посетитель щелкнул по ссылке (листинг 24.8).

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

<html> <frameset rows="*,20" border="0" ->framespacing="0" frameborder="no" ->onLoad="window.moveTo(100,100);" ->onUnload="opener.remote = null;"> <frame src="controls.html" ->name="controls" noresize> <frame src="close.html" name="close" ->noresize scrolling="no" ->marginHeight="0" marginWidth="0"> </frameset> </html>

Листинг 24.7. Файл controls.html содержит правила обработки событий. Используя ссылки, посетитель может изменять содержимое главной страницы

<html> <body> <h2>Menu </h2> <p><a href="index.html" ->target="content">Home</a></p> <p><a href="page1.html" ->target="content">Page 1</a></p> <p><a href="page2.html" ->target="content">Page 2</a></p> <p><a href="page3.html" ->target="content">Page 3</a></p> </body> </html>

Панель управления сайтом 405 Листинг 24.8. Функция closeWindow() позволяет посетителям скрывать панель управления

<html> <head> <script> function closeWindow() ->{ top.self.close(); } </script> <style type="text/css"> body { background-color: #366; } a:Link { color: #6ff; font-size: 12px ->"Courier New", Courier, Monaco, ->monospace; text-decoration: none; } </style> </head> <body> <div style="align: center"> <a href="javascript: ->closeWindow();">&lt;Close&gt;</a> </div> </body> </html>

Панель управления может содержать все, что вы закладываете в обычный документ. Но помните, что все элементы окна управления должны соответствовать габаритам, заданным в функции openRemote(). Если вы хотите, чтобы ссылки из окна панели управления появлялись в главном окне, направьте их на фрейм содержимого. В отличие от стандартного окна окно панели управления не отображает меню, навигацию браузера – стрелки Back (Назад) и Forward (Далее), текущий URL и т.п., то есть все находящееся вокруг стандартного окна. В верхнем правом углу окна управления находится стандартная кнопка Close (Закрыть), позволяющая посетителю закрыть это окно в любой момент. Чтобы открыть окно панели управления, необходимо вызвать функцию openRemote(). Вы можете сделать это несколькими способами, например запуская ее автоматически при загрузке главного окна браузера (событие onLoad). Еще один хороший способ – разместить в главном окне ссылку, позволяющую заново открывать это окно, если оно было закрыто, или помещать его поверх всех открытых окон. Заметьте, что функция openRemote() использует функцию focus, которая размещает окно панели управления поверх остальных открытых окон. Если бы в коде не было функции focus, то открытое окно панели управления находилось бы за другими окнами. Вызов функции openRemote() загрузил бы его заново, но не переместил на первый план. Таким образом, посетитель просто не увидел бы окно на экране.

406 Навигация Web-сайта

Рекомендации, полезные при создании панели управления сайтом Универсальная панель управления – это чрезвычайно полезный инструмент. Ниже перечислены возможности, которые следует учитывать при создании пульта управления: обзор Web. Вы вправе разместить в окне панели управления любимую страницу своего Web-сайта. Таким образом, посетители смогут путешествовать по Internet, но в то же время будут иметь быстрый доступ к вашему сайту. Вы оцените все преимущества данного метода, посетив сайт Communication Arts www.commarts.com/interactive/ ia home.html (рис. 24.14); информационное окно. Многие сайты используют окно панели управления для размещения различной информации о новых специальных предложениях и т.п. К сожалению, некоторые сайты, например Netscape (www.netscape.com), применяют этот метод для размещения рекламы, которая обычно только раздражает посетителей (рис. 24.15); панель управления. Вы можете повысить функциональность Web-сайта, создав панель управления. Так, на сайте академического журнала «Kairos» (рис. 24.16) используется подобная панель, состоящая из двух фреймов. Левый фрейм содержит ссылки, правый отображает информацию о журнале, ссылки поисковой машины и пр.

Рис. 24.14. На сайте Communication Arts окно панели управления используется для отображения путеводителя по лучшим сайтам

Рис. 24.15. На сайте Netscape окно панели управления используется для показа рекламы

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

Раскрывающееся меню 407

Раскрывающееся меню

Рис. 24.17. Список опций меню располагается слева, а содержание – справа

Любой, кто когда-либо использовал GUI (для Mac, Windows или UNIX), видел, как появляются и исчезают меню в окне. Щелчок по директории открывает список находящихся в ней файлов. В это время другие файлы и папки автоматически сдвигаются вниз, чтобы можно было просмотреть содержание выбранного каталога. В Windows нужно щелкнуть по значкам «плюс» и «минус», в Mac – по треугольникам. Подобного эффекта можно добиться и в Internet при помощи свойства display (рис. 24.17 и 24.18).

Создание раскрывающегося меню

Рис. 24.18. Подменю Menu1 и Menu3 содержат ссылки на информацию, отображающуюся справа

1. <script src="findDOM.js"></script> В любую JavaScript-функцию которая размещает объект на экране, необходимо включить код findDOM. Для этого поместите его во внешнем текстовом файле и импортируйте файл на страницу, на которой код будет использоваться (листинг 24.9). 2. function toggleClamShellMenu ->(objectID){…} С помощью JavaScript определите функцию toggleClamShellMenu(). При запуске в браузере, поддерживающем ID или DOM, через переменную objectID она присваивает объекту ID для создания DOM (см. главу 11). Затем функция присваивает свойству display объекта значение none, если его первоначальное значение было block, и block, если первоначальное значение было none. На экране создается впечатление, что меню как бы отодвигает все, что находится под ним. Если же браузер не поддерживает ID или DOM, функция отображает меню со всеми предоставляемыми опциями при щелчке по нему.

408 Навигация Web-сайта 3. #menu{…} Создайте правило ID для каждого раскрывающегося меню, присваивая свойству display значение none (см. раздел «Отображение элемента на экране» в главе 7). Таким образом, меню не появляются на экране при первой загрузке страницы. 4. toggleClamShellMenu('menu1') Установите для каждого меню ссылки, которые будут вызывать функцию, созданную на шаге 2. Ей должно передается ID меню, которое необходимо отобразить.

5. <span id="menu">…</span> Используйте тэг <span> для создания меню и присвоения ему ID. 6. menu1.html Если вы хотите, чтобы данная функция была совместима с Netscape 4, создайте дублирующий вариант каждой опции меню. Его будут использовать браузеры, не поддерживающие свойство display.

Листинг 24.9. Функция toggleClamShellMenu() отображает или скрывает подменю

<html> <head> <script src="findDOM.js"></script> <script> function toggleClamShellMenu(objectID) { if (isAll || isID) { domStyle = findDOM(objectID,1); if (domStyle.display =='block') domStyle.display='none'; else domStyle.display='block'; } else { destination = objectID + '.html'; self.location = destination; } return; } </script> <style type="text/css"> .menuHead { color: blue; font-weight: bold; font-size: 14px; font-family: ->"Trebuchet MS", Arial, Helvetica, Geneva, sans-serif; text-decoration: none } .menuOption { color: blue; font-size: 12px; font-family: "Trebuchet MS", Arial, ->Helvetica, Geneva, sans-serif; margin-left: 10px; } #menu1,#menu2,#menu3 { display: none; } body { font-family: "Trebuchet MS", Arial, Helvetica, Geneva, sans-serif; ->background-color: silver; } </style> </head>

Раскрывающееся меню 409 В подобных меню можно размещать любые элементы, в том числе графику, списки и т.п. А как это оформить наилучшим образом – решать вам.

В версии Internet Explorer для Mac при использовании CSS в функциях возникают некоторые проблемы. Поэтому описанный метод в этом браузере может не работать. Раскрывающиеся меню не поддерживаются и Netscape 4. Более того, поскольку свойство display первоначально содержит значение none, меню не появляется. Поэтому следует предусмотреть дубликат. Если нет необходимости поддерживать Netscape 4, вы можете не создавать соответствующую часть функции.

Листинг 24.9 (окончание)

<body> <hr width="90" align="left"> <a class="menuHead" href="javascript:toggleClamShellMenu("menu1");"><b>&gt; ->Menu 1 </b></a> <span id="menu1"> <a class="menuOption" href="option1.html" target="content">Option 1</a><br> <a class="menuOption" href="option2.html" target="content">Option 2</a><br> <a class="menuOption" href="option3.html" target="content">Option 3</a><br> <a class="menuOption" href="option4.html" target="content">Option 4</a><br> </span><br> <hr width="90" align="left"> <a class="menuHead" href="javascript:toggleClamShellMenu("menu2");"><b>&gt; ->Menu 2</b></a> <span id="menu2"> <a class="menuOption" href="option1.html" target="content">Option 1</a><br> <a class="menuOption" href="option2.html" target="content">Option 2</a><br> <a class="menuOption" href="option3.html" target="content">Option 3</a><br> <a class="menuOption" href="option4.html" target="content">Option 4</a><br> </span><br> <hr width="90" align="left"> <a class="menuHead" href="javascript:toggleClamShellMenu("menu3");"><b>&gt; ->Menu 3</b></a> <span id="menu3"> <a class="menuOption" href="option1.html" target="content">Option 1</a><br> <a class="menuOption" href="option2.html" target="content">Option 2</a><br> <a class="menuOption" href="option3.html" target="content">Option 3</a><br> <a class="menuOption" href="option4.html" target="content">Option 4</a><br> </span> </body> </html>

410 Навигация Web-сайта

Уточняющее меню В разделе «Навигация: рекомендации и запреты» главы 20 упоминалось о том, как полезно создавать уточняющие меню (breadcrumb menu). Посетитель сайта, выбирая какую-либо ссылку, видит, куда он направляется и откуда пришел. Такой подход позволяет посетителям указывать опции из нескольких меню, чтобы достичь желаемого результата. Если посетитель изменит свои первоначальные намерения, проходя через каскады меню, он всегда может обратиться к другой опции из предыдущего меню (рис. 24.19–24.23).

Рис. 24.19. Сначала появляется основное меню

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

Рис. 24.21. Меню второго уровня

Рис. 24.22. Меню третьего уровня

Рис. 24.23. В любой момент посетитель может выбрать любую опцию из предыдущего меню

Уточняющее меню 411

Создание уточняющего меню 1. <script src="findDOM.js"></script> В любую функцию JavaScript, которая размещает объект на странице, добавьте код findDOM. Для этого поместите данный код во внешнем файле и импортируйте его на страницу, которая будет использовать данный код (листинг 24.10). 2. var domLevel1=null; Для каждого из уровней меню инициализируйте переменные domLevel#.

3. function showMenu(level1,level2, ->level3){…} Определите функцию showMenu(), используя JavaScript. Она сначала скрывает меню, имеющие более низкий уровень, чем выбранное, а затем отображает заданное меню в зависимости от его уровня. 4. .menu{…} Введите класс menu, который будет связан со всеми меню. Кроме того, он определяет все меню в абсолютных координатах: 75 пикселов от верха страницы и 115 пикселов в ширину.

Листинг 24.10. При выборе какой-либо опции функция showMenu() открывает следующий уровень меню

<html> <head> <script src="findDOM.js"></script> <script> var domLevel1 = null; var domLevel2 = null; var domLevel3 = null; function showMenu(level1,level2,level3) { if (domLevel1 != null){ if (level2 == null) { domLevel1.visibility = 'hidden'; } if (domLevel2 != null){ if (level3 == null) { domLevel2.visibility = 'hidden'; } if (domLevel3 != null) { domLevel3.visibility = 'hidden'; } } } if (level2 == null) { objectID = 'menu' + level1; domLevel2 = null; } else { if (level3 == null) { objectID = 'menu' + level1 + '–' + level2; ->domLevel3 = null; } else { objectID = 'menu' + level1 + '–' + level2 + '–' + level3 } } var domStyle = findDOM(objectID,1); domStyle.visibility = 'visible'; if (level2 == null) { domLevel1 = domStyle; } else { if (level3 == null) { domLevel2 = domStyle; } else { domLevel3 = domStyle; } } } </script>

412 Навигация Web-сайта 5. #menuMain{…} Для главного меню укажите ID. Задайте положение его левого края равным 5 пикселам, убедитесь, что оно видимо при инициализации. 6. #menu1, #menu2, #menu3{…} Для каждого меню, расположенного на странице, установите ID. Все меню одного уровня должны иметь одинаковое значение положения левого края – 125 пикселов от положения меню предыдущего уровня.

7. <div id="enuMain" class="menu">…</div> Определите главное меню как CSS-слой (см. раздел «Создание объекта» в главе 11). Все ссылки, которые будут созданы на шаге 8, будут находиться в этом слое. 8. <a href="javascript:showMenu ->(1,null,null);">Option1></a> Для каждой опции меню установите ссылку. Если ссылка указывает на новую страницу, задействуйте ее URL для атрибута href. Если ссылка открывает меню другого уровня, воспользуйтесь функцией showMenu(), передавая ей номер меню, которое следует отобразить на первом уровне.

Листинг 24.10 (продолжение)

Уточняющее меню 413 9. <div id="menu" class="menu">…</div> Определите меню первого уровня как CSS-слои, применяя для каждого меню отдельный слой. Все ссылки, созданные на шаге 10, будут находиться в этих слоях. 10. <a href="javascript:showMenu ->(1,1,null);">Option1.1></a> Как было сделано на шаге 8, для каждой опции меню установите ссылки. Однако теперь необходимо передавать функции showMenu() значение уровня (1 или 2).

11. <div id="menu1-1" class="menu"> Определите меню второго уровня как CSS-слои, используя для каждого меню отдельный слой. Все ссылки, созданные на шаге 12, будут находиться в этих слоях. 12. <a href="javascript:showMenu ->(1,1,1);">Option1.1.1></a> Для каждой опции меню создайте ссылки. Теперь необходимо передавать функции showMenu() значение уровня 1, 2 или 3.

Листинг 24.10 (продолжение)

<div id="menu1" class="menu"> <h3>Menu 1</h3> <a href="javascript:showMenu(1,1,null);">Option 1.1 ></a><br><br> <a href="javascript:showMenu(1,2,null);">Option 1.2 ></a><br><br> <a href="javascript:showMenu(1,3,null);">Option 1.3 ></a> </div> <div id="menu2" class="menu"> <h3>Menu 2</h3> <a href="javascript:showMenu(2,1,null);">Option 2.1 ></a><br><br> <a href="javascript:showMenu(2,2,null);">Option 2.2 ></a><br><br> <a href="#">Option 2.3</a> </div> <div id="menu3" class="menu"> <h3>Menu 3</h3> <a href="javascript:showMenu(3,1,null);">Option 3.1 ></a><br><br> <a href="#">Option 3.2</a><br><br> <a href="#">Option 3.3</a> </div> <div id="menu1–1" class="menu"> <h3>Menu 1.1</h3> <a href="javascript:showMenu(1,1,1);">Option 1.1.1 ></a><br><br> <a href="#">Option 1.1.2</a><br><br> <a href="#">Option 1.1.3</a> </div> <div id="menu1–2" class="menu"> <h3>Menu 1.2</h3> <a href="#">Option 1.2.1</a><br><br> <a href="javascript:showMenu(1,2,2);">Option 1.2.2 ></a><br><br> <a href="#">Option 1.2.3</a> </div>

414 Навигация Web-сайта 13. <div id="menu1-1-1" class="menu"> Определите меню третьего уровня как CSS-слои, используя для каждого меню отдельный слой. Все ссылки, созданные на шаге 14, будут находиться в этих слоях. 14. <a href="#">Option1.1.1.1</a> Установите ссылки для каждой опции меню. Поскольку уточняющее меню не содержит пятого уровня, ссылки должны указывать на определенные URL. В приведенном примере уточняющее меню содержит четыре уровня, однако вы можете установить любое произвольное их количество.

Листинг 24.10 (продолжение)

<div id="menu1–3" class="menu"> <h3>Menu 1.3</h3> <a href="#">Option 1.3.1 -></a><br><br> <a href="#">Option 1.3.2 -></a><br><br> <a href="javascript:showMenu(1,3,3); ->">Option 1.3.3 ></a> </div> <div id="menu2–1" class="menu"> <h3>Menu 2.1</h3> <a href="#">Option 2.1.1 -></a><br><br> <a href="#">Option 2.1.2 -></a><br><br> <a href="#">Option 2.1.3</a> </div> <div id="menu2–2" class="menu"> <h3>Menu 2.2</h3> <a href="#">Option 2.2.1 -></a><br><br> <a href="javascript:showMenu(2,2,2); ->">Option 2.2.2 ></a><br><br> <a href="#">Option 2.2.3</a> </div>

Листинг 24.10 (окончание)

<div id="menu3–1" class="menu"> <h3>Menu 3.1</h3> <a href="#">Option 3.1.1 -></a><br><br> <a href="#">Option 3.1.2 -></a><br><br> <a href="#">Option 3.1.3</a> </div> <div id="menu1–1–1" class="menu"> <h3>Menu 1.1.1</h3> <a href="#">Option 1.1.1.1 -></a><br><br> <a href="#">Option 1.1.1.2 -></a><br><br> <a href="#">Option 1.1.1.3</a> </div> <div id="menu1–2–2" class="menu"> <h3>Menu 1.2.2</h3> <a href="#">Option 1.2.2.1 -></a><br><br> <a href="#">Option 1.2.2.2 -></a><br><br> <a href="#">Option 1.2.2.3</a> </div> <div id="menu1–3–3" class="menu"> <h3>Menu 1.3.3</h3> <a href="#">Option 1.3.3.1 -></a><br><br> <a href="#">Option 1.3.3.2 -></a><br><br> <a href="#">Option 1.3.3.3</a> </div> <div id="menu2–2–2" class="menu"> <h3>Menu 2.2.2</h3> <a href="#">Option 2.2.2.1 -></a><br><br> <a href="#">Option 2.2.2.2 -></a><br><br> <a href="#">Option 2.2.2.3</a> </div> </body> </html>

Навигация для браузеров, не поддерживающих DHTML и CSS 415

Навигация для браузеров, не поддерживающих DHTML и CSS

Рис. 24.24. Отображение страницы в браузере Internet Explorer, поддерживающем JavaScript

Сегодня практически все посетители Webсайтов используют браузеры, поддерживающие JavaScript. Однако еще есть браузеры, не имеющие данной функции, кроме того, некоторые пользователи отключают поддержку JavaScript в браузерах. Ваша задача в данном случае состоит в том, чтобы обеспечить таких посетителей хотя бы основным набором навигационных средств и сделать доступной ту часть своего сайта, которую вы определили как динамическую (рис. 24.24 и 24.25).

Использование тэга <noscript>

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

1. <noscript>…</noscript> В тэге <noscript> находится информация, которая скрыта от браузерах, поддерживающих JavaScript (листинг 24.11). Браузеры, не поддерживающие JavaScript, игнорируют тэг <noscript> и отображают все, что содержится в нем. Таким образом, если вы хотите добавить содержимое, которое отображалось бы в браузерах, не поддерживающих JavaScript, разместите его в тэге <noscript>.

Листинг 24.11. В тэге <noscript> содержится информация, которая отображается браузером, не поддерживающим JavaScript

Листинг 24.11 (продолжение)

<html> <head> <script language="JavaScript"> aNum=0; pageTitle='Providing Navigation for NonDynamic Browsers' </script> </head>

<body> <noscript> <a href="menu.html"> Main Menu </a> <h1>Webbed Environments</h1><br> <h2>Providing Navigation for ->Non-Dynamic Browsers</h2> </noscript>

416 Навигация Web-сайта Используйте тэг <noscript> при импорте внешнего содержимого, созданного с помощью JavaScript (см. раздел «Внешний файл JavaScript» в главе 23). Таким образом, вы открываете доступ к этой информации для всех посетителей вашего сайта.

Дополнительные возможности Если задуматься, то и компьютер, и браузер вовсе не так разумны, как кажется на первый взгляд. Они выполняют только то, что мы им говорим. Браузер не имеет ни малейшего понятия, какая информация содержится на загружаемой им странице. Метаданные позволяют заполнить некоторые бланки, содержащие сведения об авторском праве, ключевых словах и описаниях. В тэге <meta>, который включен в тэг <head>, хранится описание типа страницы. Некоторые из этих тэгов будут использоваться непосредственно браузерами, если посетитель захочет просмотреть информацию о HTML-файле. Однако с метаданными наиболее часто работают поисковые машины, разбивая с их помощью Web-сайты на определенные категории. Взаимосвязь между ссылками помогает браузеру определить положение текущей страницы Web-сайта относительно других (рис. 24.26). Действие этой взаимосвязи аналогично работе тэга <link>, который применяется при импорте таблиц стилей (см. раздел «Добавление CSS на Web-сайт» в главе 2). Браузер с помощью такой информации устанавливает дополнительную навигацию помимо существующей на Web-странице.

Листинг 24.11 (окончание)

Рис. 24.26. Управление ссылками iCab позволяет осуществлять навигацию на Web-сайте, не используя расположенные на странице ссылки. На странице представлены ссылки home (первая страница), start of site (начало сайта), previous page (предыдущая страница), next page (следующая страница), end of site (конец сайта), index (индекс), help (помощь), copyright (авторские права) и contact information (контактная информация)

Дополнительные возможности 417 Таблица 24.1. Возможные атрибуты тега <link>

Установка тэга <link>

Значение атрибута rel

Описание (на что ссылается)

home

Главная страница (home page)

start

Первая страница сайта

Следующая страница сайта

Предыдущая страница сайта

contents

Содержание или карта сайта

Установка тэга <meta>

index

Содержание или карта сайта

glossary

Глоссарий

help

Страница помощи

chapter

Начало главы

section

Начало раздела

subsection

Начало подраздела

appendix

Приложения

1. <meta name="Author" content= ->"Jason Cranford Teague"> В тэге <head> поместите тэг <meta>, в котором укажите соответствующую информацию: автор, авторские права, ключевое слово, описание (табл. 24.2). Введенное вами имя определяет тип информации.

Информация об авторских правах

made

О странице

1. <link rel="home" href="index.html"> В тэге <head> вашего документа определите тэг <link>. Величине rel (от англ. relationship – отношение) присвойте одно из значений из табл. 24.1, используя кавычки, затем укажите, к какой ссылке относится href (листинг 24.12).

Листинг 24.12. Тэги <meta> и <link> содержат информацию о содержимом страницы и ее положении относительно других страниц сайта

<html> <head> <meta name="Author" content="Jason Cranford Teague"> <meta name="copyright" content="1998-2000 Jason Cranford Teague"> <meta name="keywords" content="Jason Cranford Teague,Webbed Environments, CSS, ->DHTML, JavaScript,HTML,Search Engines, Information Architecture,World Wide Web, ->Web Art,GIF,JPEG,PNG, Macromedia Flash"> <meta name="description" content="In the Future Everyone will be a Web Designer."> <link rel="home" href="index.html"> <link rel="index" href="index.html"> <link rel="first" href="index.html"> <link rel="last" href="copyright.html"> <link rel="next" href="siteMap.html"> <link rel="prev" href="index.html"> <link rel="glossary" href="glossary.html"> <link rel="chapter" href="index.html"> <link rel="section" href="index.html">

418 Навигация Web-сайта Большинство браузеров, к сожалению, не поддерживают тэг <link>. Стоит ли включать его в Web-страницу? Может быть, и нет. Однако это очень изящное решение для сайта, и в будущем вы наверняка захотите включить этот тэг в его состав. Помните, что указанные тэги могут связать со страницей любую информацию. Webполиция не явится к вам ночью и не будет барабанить в дверь, если вы свяжете ссылку home с файлом help.html, но вашим посетителям это вряд ли понравится. Вопреки всеобщему убеждению не все поисковые машины используют тэги <meta>, а те, которые используют, вообще рассматривают их как дополнительное описание содержимого страницы. Их не рекомендуется включать в Web-страницу без особой необходимости. Не слишком-то полагайтесь на них, если хотите продвинуть вашу разработку к вершинам хит-парада поисковиков. Как уже было отмечено, необходимо всегда включать два тэга <meta> в тэг <head> вашего документа для того, чтобы попасть в поле зрения поисковой машины. Тэг <description> включает в себя одно-два предложения. Он сообщает поисковой машине о том, какая информация находится на странице. В свою очередь поисковая машина использует содержимое этого тэга для описания вашей страницы при распечатке результатов поиска. Более важным по сравнению с тэгом <description> является тэг <keywords>. Он представляет собой набор самых важных, ключевых слов на странице.

Листинг 24.12 (окончание)

Таблица 24.2. Допустимые метатэги Возможные значения метатега

Располагаемая информация

author

Автор страницы

Информация об авторских правах

keywords

Список ключевых слов, относящихся к теме страницы

description

Краткое описание страницы

25 Средства управления Используя только HTML, вы ограничиваете право посетителей контролировать происходящее на экране. Они могут воспользоваться полосой прокрутки, но у них нет никаких инструментов, чтобы каким-либо образом изменять содержимое Web-страницы. Динамический Web-сайт позволяет посетителям непрерывно взаимодействовать со станицами. Вы должны предусмотреть средства управления, которые обеспечили бы интерактивную работу Web-сайта. В данной главе описываются интерактивные функции, предоставляющие посетителю средства управления Web-страницей.

420 Средства управления

Полоса прокрутки Польза, получаемая от GUI (Graphical User Interface – графический пользовательский интерфейс) без полосы прокрутки, точно такая же, как и от машины без руля. Полоса прокрутки (scrollbar) позволяет размещать бесконечное количество информации на ограниченном пространстве страницы. Операционные системы задают определенный вид полосы прокрутки, и это несколько стесняет дизайнеров при разработке интерфейса Web-приложения. В главе 13 (раздел «Прокрутка Web-страницы») рассказывалось, как данный элемент добавляется на страницу. Вы также можете использовать DHTML для прокрутки (скроллинга) отдельных слоев в окне или фрейме (рис. 25.1 и 25.2).

Создание полосы прокрутки 1. index.html Создайте файл с фреймовой структурой и сохраните его под именем index.html (листинг 25.1). Создайте два фреймаколонки. Первая колонка – фрейм, в который загружается код из файла scrollBar.html. Здесь будет располагаться полоса прокрутки. Во второй фрейм будет загружен файл content.html. 2. scrollBar.html Создайте HTML-файл и сохраните его под именем scrollBar.html (листинг 25.2). Он будет содержать элементы управления полосой прокрутки. Далее вы будете постоянно возвращаться к этому файлу (см. шаги 3–14).

Рис. 25.1. Средства управления позволяют посетителю перемещаться по странице

Рис. 25.2. Я использовал эту технологию при создании Web-сайта, разработанного для фильма «The Sandman» (www.sandmanfilm.com)

Полоса прокрутки 421 Листинг 25.1. Этот код устанавливает два фрейма-колонки: узкая колонка слева предназначена для полосы прокрутки, а содержание занимает все оставшееся место на экране

<html> </head> <frameset cols="35,*" border="0" ->framespacing="0" frameborder="NO"> <frame src="scrollBar.html" ->name="scrollBar" scrolling="NO" ->noresize marginheight="0" ->marginwidth="0"> <frame src="content.html" ->name="content" scrolling="NO" ->noresize> </frameset> </html>

Листинг 25.2. Весь сценарий JavaScript, контролирующий содержимое страницы, помещается в файле scrollBar.html. Функция scroll() осуществляет прокрутку слоя scrollArea во фрейме содержимого, а функции URT() и URB() перемещают в начало и конец страницы соответственно

<html> <head> <script src="findDOMFrame.js"> -></script> <script language="JavaScript"> var scrolling = 0; var yT = 5; var lT = 5; var yI = 5; var yH = 0; var domStyle; var dom; if (document.images){ imag = new Array(); imag[0] = "up_off.gif"; imag[1] = "up_on.gif"; imag[2] = "down_off.gif"; imag[3] = "down_on.gif";

3. <script src="findDOMFrame.js"></script> В любую функцию, написанную на JavaScript, которая непосредственно размещает объект на экране, необходимо добавить код findDOM. Поскольку ваша страница разбита на фреймы, следует использовать фреймовую версию этого кода (см. раздел «Управление содержанием во фреймах» в главе 14). 4. var scrolling=0; В тэге <script> в файле scrollBar.html инициализируйте следующие переменные: – scrolling определяет, прокручивается ли в данный момент слой; – yT записывает текущее положение верхней границы прокручиваемого слоя; – lT устанавливает первоначальное положение верхней границы слоя; – yI определяет величину инкремента для скроллинга слоя. Вы можете изменять эту величину: чем больше значение, тем быстрее прокручивается слой, а чем меньше, тем медленнее осуществляется прокрутка; – yH определяет высоту слоя; – domStyle записывает общую объектную модель документа (DOM) для прокручиваемого слоя, чтобы получить доступ к свойствам стиля; – dom сохраняет общую DOM для прокручиваемого слоя, чтобы получить доступ к прочим свойствам.

422 Средства управления 5. function startScroll(objected, ->frameName,direction){…} Определите, используя JavaScript, функцию startScroll(). Она присваивает переменной scrolling значение 1 (начать прокрутку), определяет текущее положение верхней границы слоя (yT), высоту слоя (–25, оставить нижнюю границу), а затем вызывает функцию scroll(). 6. function scroll(direction){…} Посредством JavaScript создайте функцию scroll(). Она перемещает слой вверх или вниз в зависимости от значения переменной direction (1 – вверх, 0 – вниз), а также учитывая значение инкремента. Функция выполняется до тех пор, пока значение переменной scrolling равно 1. 7. function stopScroll(){…} С помощью JavaScript запишите функцию stopScroll(). Она присваивает переменной scrolling значение 0 (прекратить прокрутку). 8. function URB(objected,frameName){…} Введите, используя JavaScript, функцию URB(). Она совмещает нижнюю границу слоя с нижней границей окна. 9. function URT(objected,frameName){…} Определите функцию URT() при помощи JavaScript. Она совмещает верхнюю границу слоя с верхней границей окна. 10. tartScroll('scrollArea','content',1); return false; Средства управления необходимо определять как ссылки с обработчикам и событий. Чтобы добавить событие «прокрутка вверх», вызовите функцию startScroll() в обработчике событий onMouseDown. Передайте функции ID объекта, к которому необходимо применить скроллинг, имя фрейма,

Листинг 25.2 (продолжение)

imag[4] = "top_off.gif"; imag[5] = "top_on.gif"; imag[6] = "bottom_off.gif"; imag[7] = "bottom_on.gif"; im = new Array(); for (var i = 0; i < imag.length; i++) { im[i] = new Image(); im[i].src = imag[i]; } } function startScroll(objectID, ->frameName,direction) { domStyle = findDOMFrame(objectID, ->frameName,1); dom = findDOMFrame(objectID, ->frameName,0); scrolling = 1; yT = domStyle.top; if (document.getElementById) { pxLoc = yT.indexOf("px"); if (pxLoc >= 1) yT = yT.substring ->(0,pxLoc); } if (window.innerHeight != null) yH = window.innerHeight - 25; else yH = document.body.clientHeight - 25; if (dom.offsetHeight != null) yH = yH - dom.offsetHeight; else yH = yH - dom.clip.height; scroll(direction); } function scroll(direction) { if (scrolling == 1) { if ((direction == 1) && (yT <= lT)) { yT = (yT/1) + yI; if (yT > lT) yT = lT; domStyle.top = yT; } else { if ((direction == 0) && (yT >= yH))

Полоса прокрутки 423 Листинг 25.2 (продолжение)

{ yT -= yI; if (yT < yH) yT = yH; domStyle.top = yT; } } if (document.getElementById) { yT = domStyle.top; pxLoc = yT.indexOf('px'); if (pxLoc >= 1) yT = ->yT.substring(0,pxLoc); } code2run = 'scroll('+ direction + ')'; setTimeout(code2run,0); } return false; } function stopScroll() { scrolling = 0; return false; } function URB(objectID,frameName) { domStyle = findDOMFrame(objectID, ->frameName,1); dom = findDOMFrame(objectID, ->frameName,0); if (window.innerHeight != null) yH = window.innerHeight - 25; else yH = document.body.clientHeight - 25; if (dom.offsetHeight != null) yH = yH - dom.offsetHeight; else yH = yH - dom.clip.height; domStyle.top = yH; } function URT(objectID,frameName) { domStyle = findDOMFrame(objectID, ->frameName,1); domStyle.top = lT; } function toggle(imgName,num){

содержащего этот объект, и присвойте значение 1 (вверх). 11. startScroll('scrollArea','content',0) Вызовите функцию startScroll() в обработчике событий onMouseDown соответствующей ссылки. Передайте в функцию ID объекта, к которому необходимо применить скроллинг, и имя фрейма, содержащего этот объект. 12. stopScroll() Чтобы остановить прокрутку слоя, используйте функцию stopScroll(), вызываемую в обработчике события onMouseUp. 13. URT('scrollArea','content') Чтобы переместиться к верхней границе слоя, вызовите функцию URT() и передайте ей ID объекта и имя фрейма, содержащего этот объект. 14. URB('scrollArea','content') Чтобы переместиться к нижней границе слоя, вызовите функцию URB() и передайте ей ID объекта и имя фрейма, содержащего этот объект. 15. content.html Создайте HTML-файл и сохраните его под именем content.html (листинг 25.3). Он будет содержать прокручиваемый слой. Следующие два шага (16 и 17) выполняются в этом файле. 16. #scrollArea{…} В файле content.html установите ID – scrollArea. Он должен быть задан в абсолютных координатах. 17. <span id="scrollArea">…</span> Определите слой scrollArea в тэге <div> или <span> (см. раздел «Создание объекта» в главе 11).

424 Средства управления Листинг 25.2 (окончание)

if (document.images && imgName){ imgName.src = im[num].src; } return false; } </script> <style type="text/css"> body { background: white url(bg_scroll.gif) repeat-y 33px 30px; margin-left: 3px; } </style> </head> <body> <table border="0" cellpadding="0" cellspacing="0" width="25" height="100%"> <tr> <td align="center" valign="top"> <a href="javascript:void('');" onmouseover="window.status='Up'; return true;" ->onmousedown="toggle(up,1); startScroll('scrollArea','content',1); return ->false;" onmouseup="stopScroll(); toggle(up,0);"><img height="25" width="25" ->src="up_off.gif" border="0" vspace="5" name="up"></a> <a href="javascript:void('');" onmouseover="window.status='Return To Top'; return ->true;" onmousedown="toggle(top,5); URT('scrollArea','content'); return false;" ->onmouseup="toggle(top,4);"><img height="25" width="25" src="top_off.gif" ->border="0" vspace="5" name="top"> </a> </td></tr> <tr><td align="center" valign="bottom"> <a href="javascript:void('');" onmouseover="window.status='Go To Bottom'; return ->true;" onmousedown="toggle(bottom,7); URB('scrollArea','content'); return ->false;" onmouseup="toggle(bottom,6);"><img height="25" width="25" ->src="bottom_off.gif" border="0" vspace="5" name="bottom"> </a> <a href="javascript:void('');" onmouseover="window.status='Down'; return true;" ->onmousedown="toggle(down,3); startScroll('scrollArea','content',0); return ->false;" onmouseup="stopScroll(); toggle(down,2);"><img height="25" width="25" ->src="down_off.gif" border="0" vspace="5" name="down"></a> </td></tr></table> </body> </html>

Полоса прокрутки 425 Листинг 25.3. Во фрейме содержания расположен слой scrollArea, который будет прокручиваться с помощью функций, находящихся во фрейме с полосой прокрутки

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

<html> <head> <style type="text/css"> #scrollArea { position: absolute; top: 5px; left: 15px; } body { color: black; font-size: 12px; line-height: 14px; font-family: "Times New Roman", ->Georgia, Times, serif; background: white url(bg_content.gif) } </style> </head> <body> <span id="scrollArea"> <h2>Scroll Bar Example</h2> <h3>By Jason Cranford Teagues</h3> <p>Et quid erat, quod me delectabat, ->nisi amare et amari? </span> </body> </html>

Используйте команду return false в обработчике событий для элементов управления прокруткой, чтобы не допустить отображения всплывающего меню в MacOS. Средства управления прокруткой можно размещать в одном HTML-файле со слоем (content.html). Но сначала нужно удалить все ссылки на frameName и использовать внешний файл findDOM.js вместо findDOMFrame.js.

426 Средства управления

Создание кнопки Back При создании Web-приложения, возможно, потребуется отключить средства управления, имеющиеся в браузере, чтобы запретить посетителю перелистывать страницы сайта во время какой-либо важной процедуры. Однако лишение свободы выбора может вызвать недовольство посетителя. Поэтому вам необходим сценарий, который помог бы вернуть кнопку Back (а также и Next) обратно в интерфейс (рис. 25.3 и 25.4).

Рис. 25.3. Щелчок по кнопке Back на странице 2…

Создание кнопок Back и Next 1. history.go(–1) Добавьте метод go() объекта history и передайте значение –1, чтобы вернуться на один уровень назад в списке посещенных страниц браузера (листинг 25.4). 2. history.go(1) Используйте данную строку, чтобы продвинуться на один уровень истории браузера вперед. Хотя элемент истории допускается использовать для перемещения вверх и вниз по списку истории браузера, нельзя получить непосредственный доступ к URL или определить, содержит список следующий или предыдущий элементы. Это значительно ограничивает возможности Web-дизайнера по динамическому отображению кнопок Back и Next.

Рис. 25.4. …возвращает посетителя на предыдущую посещенную страницу Листинг 25.4. Чтобы создать кнопку Back, используйте JavaScript, позволяющий получить доступ к объекту истории

Создание кнопки Back 427

Организация слайд-шоу

Рис. 25.5. Элементы управления слайд-шоу позволяют перемещаться вперед и назад в определенном порядке

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

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

428 Средства управления

Создание слайд-шоу 1. <script src="findDOMNested.js"> -></script> В любую JavaScript-функцию, непосредственно размещающую объект на экране, введите код findDOM (листинг 25.5). Так как в нем используются вложенные слои, необходимо применять особый вариант кода findDOM, работающий в Netscape 4 (см. раздел «Netscape 4 и встроенные слои» в главе 11). 2. slideT=new Array(); Создайте два новых массива. Первый массив, sideT[], записывает количество отображаемых слайдов, а второй, slideC[], сохраняет текущий отображаемый слайд. 3. slideT[0]=5; Для каждого слайд-шоу инициализируйте массив slideT[] и запишите в него количество слайдов. 4. slideC[0]=1; Для каждого слайд-шоу инициализируйте массив slideC[] со значением 1 (первый слайд). 5. function nextSlide(setNum){…} Создайте с помощью JavaScript функцию nextSlide(). Она скрывает текущий отображаемый слайд и показывает следующий за ним. Если текущий слайд – последний, функция снова выводит на экран первый слайд. 6. function previousSlide(setNum){…} Используя JavaScript, определите функцию previousSlide(). Она скрывает текущий слайд и отображает предыдущий. Если отображаемый слайд – первый в серии, то следующим на экране появится последний слайд.

Листинг 25.5. Код слайд-шоу позволяет прокручивать слайды вперед и назад

<html> <head> <script src="findDOMNested.js"> -></script> <script> slideT = new Array(); slideC = new Array(); slideT[0] = 5; slideC[0] = 1; slideT[1] = 3; slideC[1] = 1; function nextSlide(setNum) { var objectID1 = 'slideSet' + setNum; var objectID2 = 'slide' + setNum + ->slideC[setNum]; var domStyle = findDOM(objectID1, ->objectID2,1); domStyle.visibility = 'hidden'; if (slideT[setNum] == slideC[setNum]) ->slideC[setNum] = 1; else slideC[setNum]++; var objectID1 = 'slideSet' + setNum; var objectID2 = 'slide' + setNum + ->slideC[setNum]; var domStyle = findDOM(objectID1, ->objectID2,1); domStyle.visibility = 'visible'; } function previousSlide(setNum) { var objectID1 = 'slideSet' + setNum; var objectID2 = 'slide' + setNum + ->slideC[setNum]; var domStyle = findDOM(objectID1, ->objectID2,1); domStyle.visibility = 'hidden'; if (slideC[setNum] == 1) ->slideC[setNum] = slideT[setNum]; else slideC[setNum]–; var objectID1 = 'slideSet' + setNum; var objectID2 = 'slide' + setNum + ->slideC[setNum];

Организация слайд-шоу 429 Листинг 25.5 (продолжение)

7. #slideSet0,#slideSet1{…} Каждому ряду слайдов присвойте ID и имя slideSet#. Этот слой будет содержать все слайды, задавая для относительной последовательности слайдов абсолютное положение. 8. .slides{…} Определите класс слайдов – slides. Он устанавливает общий стиль для всех слайдов и должен иметь абсолютное положение. 9. #slide01,#slide11{…} Присвойте слайдам ID, называя каждый slide##. Слайды пронумерованы следующим образом: первая цифра определяет принадлежность к соответствующему ряду слайдов, вторая описывает его порядковый номер в этом ряду. Таким образом, slide01 – первый слайд в нулевом ряду. 10. <div id="slideSet0">…</div> Введите CSS-слой и определите его при помощи ID slideSet#. 11. <div class="slides" id="slide01"> ->…</div> Используя ID slide##, для каждого слайда установите слой, вложенный в слой, который создан на шаге 10. Поместите в этом слое содержимое слайда. 12. onClick="previousSlide(0)" Введите ссылку, вызывающую функцию previousSlide() для соответствующего ряда. 13. onClick="nextSlide(0)" Определите ссылку, которая будет вызывать функцию nextSlide() для соответствующего ряда.

Слайд-шоу, созданное при помощи DHTML, может содержать не только изображения, но и любой HTML-код.

430 Средства управления Листинг 25.5 (окончание)

<img src="0016s.gif" width="100" ->height="67" border="0"></div> <div class="slides" id="slide03"> <h3>Slide 3</h3> <img src="0021s.gif" width="100" height="67" border="0"></div> <div class="slides" id="slide04"> <h3>Slide 4</h3> <img src="0022s.gif" width="100" height="67" border="0"></div> <div class="slides" id="slide05"> <h3>Slide 5</h3> <img src="0023s.gif" width="100" height="67" border="0"></div> <div class="controls"> <a href="javascript: void('');" onclick="previousSlide(0);"> <img src="back.gif" width="10" height="10" border="0"></a> <a href="javascript: void('');" onclick="nextSlide(0);"> <img src="next.gif" width="10" height="10" border="0"></a> </div> </div> <script> ////// Òðåáóåòñÿ äîïîëíèòåëüíûé ðàçäåëèòåëü äëÿ îòäåëåíèÿ ñëàéä-øîó â Netscape 4 if (isLayers) { document.write ("<br><br><br><br><br><br><br><br><br><br><br>") } </script> <h1>Slide Set 1</h1> <div id="slideSet1"> <div class="slides" id="slide11"> <h3>Slide 1</h3> <img src="0007s.gif" width="67" height="100" border="0"></div> <div class="slides" id="slide12"> <h3>Slide 2</h3> <img src="0012s.gif" width="67" height="100" border="0"></div> <div class="slides" id="slide13"> <h3>Slide 3</h3> <img src="0014s.gif" width="67" height="100" border="0"></div> <div class="controls"> <a href="javascript: void('');" onclick="previousSlide(1);"> -><img src="back.gif" width="10" height="10" border="0"></a> -><a href="javascript: void('');" onclick="nextSlide(1);"><img src="next.gif" ->width="10" height="10" border="0"></a> </div> </div> </body> </html>

Всплывающий гипертекст 431

Всплывающий гипертекст Гипертекст предоставляет посетителям доступ к дополнительной информации. Но для получения доступа необходимо щелкнуть по ссылке, которая откроет новый документ. Это может иногда действовать на нервы, не говоря уже о низкой скорости соединения. А если информация – текст или изображения – просто появлялась бы под ссылкой, на которую указывает курсор? Такой механизм действительно являлся бы гипертекстом (рис. 25.6 и 25.7). Рис. 25.6. Когда посетитель наводит указатель на ссылку…

Рис. 25.7. … под ней появляется текст

Создание всплывающего гипертекста 1. <script src="findDOM.js"></script> В любую JavaScript-функцию, которая непосредственно размещает объект на экране, поместите код findDOM. Для этого запишите его во внешнем текстовом файле, а затем импортируйте файл на ту страницу, где код будет использоваться (листинг 25.6). 2. function findLivePageWidth(){…} Определите функцию findLivePageWidth(), используя JavaScript (см. раздел «Размеры клиентской области окна» в главе 12). 3. function popUp(evt,objected){…} Используя JavaScript, введите функцию popUp(). Она проверяет ширину окна браузера, а затем, в зависимости от значения переменной objectID, создает основу DOM для отображаемого объекта гипертекста. Затем функция скрывает объект (если он видим) или размещает его под соответствующей ссылкой (выравнивая объект, если он находится очень близко к краю экрана), а затем отображает.

432 Средства управления 4. .hypertext{…} В CSS определите класс hypertext. Он будет базовым для всех гипертекстовых объектов, а также определит их внешний вид. 5. #ht1,#ht2{…} Каждому всплывающему объекту гипертекста присвойте ID – ht#. Определите каждый ID в абсолютных координатах, как скрытый и имеющий z-индекс, который размещает данный объект поверх остальных. При необходимости положение этих объектов будет изменено. 6. <span id="ht1" class="hypertext">…</span> Для каждого всплывающего объекта гипертекста создайте слой в соответствии с настройками класса hypertext и ID, присвоенным на шаге 5. При желании вы можете разместить любое содержание в тэге <span>. 7. <a href="#" onMouseOver="popUp ->(event,'ht1');" onMouseOut= ->'popUp(event,'ht1');">…</a> Определите ссылку, которая будет вызывать появление гипертекста при наведении указателя мыши на какойлибо текст или другой элемент страницы. В ссылку включите обработчики событий onMouseOver и onMouseOut, которые будут вызывать функцию popUp(). Передайте в функцию событие и ID всплывающего объекта (см. раздел «Передача события в функцию» в главе 14).

Листинг 25.6. Код всплывающего гипертекста использует информацию обработчика событий для размещения гипертекста под ссылкой

<html> <head> <script src="findDOM.js"></script> <script> function findLivePageWidth() { if (window.innerWidth != null) return window.innerWidth; if (document.body.clientWidth != null) return document.body.clientWidth; return (null); } function popUp(evt,objectID) { if (isDHTML) { var livePageWidth = ->findLivePageWidth(); domStyle = findDOM(objectID,1); dom = findDOM(objectID,0); state = domStyle.visibility; if (dom.offsetWidth) elemWidth = ->dom.offsetWidth; else { if (dom.clip.width) ->elemWidth = dom.clip.width; } if (state == 'visible' || state == ->'show') { domStyle.visibility = ->'hidden'; } else { if (evt.pageY) { topVal = evt.pageY + 4; leftVal = evt.pageX ->(elemWidth / 2); } else { if (evt.y) { topVal = evt.y + 4 + ->document.body. ->scrollTop; leftVal = evt.x ->(elemWidth / 2) + ->document.body. ->scrollLeft; } }

Всплывающий гипертекст 433 Листинг 25.6 (продолжение)

if(leftVal < 2) { leftVal = 2; } else { if ((leftVal + elemWidth) > ->livePageWidth) { leftVal = ->leftVal - (elemWidth / 2);} } domStyle.top = topVal; // ->Ïîçèöèÿ ýëåìåíòà ñâåðõó domStyle.left = leftVal; // ->Ïîçèöèÿ ýëåìåíòà ñëåâà domStyle.visibility = 'visible'; // Ñäåëàòü ýëåìåíò âèäèìûì } } } </script> <style type="text/css"> #ht1,#ht2 { position: absolute; z-index: 100; top: 0px; left: 10px; visibility: hidden; } .hyperText { color: #333333; font: 10px/12px "Trebuchet MS", Arial, ->Helvetica, Geneva, sans-serif; background-color: #cccccc; padding: 5px; border: solid 2px #ff6666; width: 250px; layer-background-color: #CCCCCC } </style> </head> <body> <span id="ht1" class="hyperText"> Too much information is as bad as too ->little. All too often designers treat ->the Web like a hose through which to ->force information. </span> <span id="ht2" class="hyperText"> Hypertext allows you to include ->&quot;meta-textual&quot; ->information for readers who want ->to know more.

Заметьте, что ссылки, связанные с всплывающим текстом, никуда не приводят (на самом деле они связаны с верхней частью страницы). Можно связать их с документами, которые уточняют и дополняют информацию, отображаемую во всплывающем гипертексте. Допустимо использовать простую функцию, которая не возвращает никакого значения, но делает ссылки не реагирующими на щелчок мышью. Вы можете поместить во всплывающем объекте подсказку, которая объясняет значение каждой ссылки в навигации, или включить гипертекст в изображение карты вашего сайта. Эта технология становится просто необходимой, если у вашего сайта есть большое графическое представление (карта сайта), где имеются области, требующие пояснения. Листинг 25.6 (окончание)

</span> <p>A webbed environment is a Web site ->that does not frustrate the user ->with long download times, or confuse ->them with <a href="#" ->ONMOUSEOUT="popUp(event,'ht1');" ->onmouseover="popUp(event,'ht1');"> millions of navigation points at once </a> . Instead, a successful webbed ->environment will appear to have ->smooth transitions as content ->changes and provide easy to use ->features, <a href="#" ->onmouseout="popUp(event,'ht2');" onmouseover="popUp(event,'ht2');"> hypertext </a> , and navigation that is convenient ->but not overwhelming. </p> </body> </html>

434 Средства управления

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

Получение запроса посетителя при помощи формы 1. <script src="findDOM.js"></script> В любую функцию JavaScript, которая непосредственно размещает объект на странице, добавьте код findDOM. Для этого поместите его во внешнем файле и импортируйте файл на страницу, на которой будет использоваться код (листинг 25.7). 2. function moveObjectTo(objectID,x,y){…} Добавьте в ваш документ, используя JavaScript, функцию moveObjectTo(). Она передвигает элемент из текущего положения в новое (см. раздел «Перемещение объектов» в главе 13). Перемещение происходит с учетом значений xVal и yVal, полученных при помощи формы.

Листинг 25.7. Введите координаты для перемещения фотографии кота по экрану

<html> <head> <script src="findDOM.js"></script> <script language="JavaScript"> var theForm = null; function moveObjectTo(objectID,formNum) { x = document.forms[formNum].xVal.value; y = document.forms[formNum].yVal.value; var domStyle = findDOM(objectID,1); if (domStyle.pixelLeft != null) { domStyle.pixelLeft = x; domStyle.pixelTop= y; } else { domStyle.left = x; domStyle.top= y; } } </script> </head> <body> <div id="object1" style="position: ->absolute; top: 60px; left: 60px; ->visibility: visible"> <img src="coco.jpg" width="138" ->height="168" border="0"> <h2>meep</h2> </div> <form action="#" name="form1" ->method="get"> x:<input type="TEXT" name="xVal" ->size="3"><br> y:<input type="TEXT" name="yVal" ->size="3"><br> <input type="button" value="Move" ->onclick="moveObjectTo ->("object1",0)"> </form> </body> </html>

Использование формы ввода для создания динамических эффектов 435

Рис. 25.8. Фотография кота переместилась в новое положение, определенное пользователем

3. <div id="object1" style="position: ->absolute; top: 60px; left: 60px; ->visibility: visible">…</div> Создайте CSS-слой, положение которого задано при помощи свойств top и left. 4. <form action="#" name="form1" ->method="get">…</form> Создайте простую форму и присвойте ей имя. 5. <input type="TEXT" name="xVal" size=3> Добавьте поля ввода, которые позволяют посетителям указывать координаты x и y точки, в которую они хотят передвинуть объект. 6. <input type="button" value="Move" ->onClick="moveObjectTo('object1',0)> Поместите на форму кнопку, вызывающую функцию moveObjectTo(). Передайте в функцию ID объекта, который требуется переместить, и номер формы, созданной вами на шаге 5. Нажимая на эту кнопку, можно передвинуть объект в новое положение, определяемое введенными координатами (рис. 25.8).

436 Средства управления

Контекстная форма Формы используются для ввода информации на Web-страницу. Эти данные отсылаются на сервер и обрабатываются. Однако часто создатели форм не знают, какие сведения может ввести посетитель. Если я регистрирую какую-либо программу (рис. 25.9), я могу делать это либо от своего имени (рис. 25.10), либо от имени своей компании (рис. 25.11). Эти две возможности требуют создания различных форм. Традиционный подход к решению данной задачи – поместить на странице ссылки для вызова каждой из форм, расположенных на одной странице или на разных. Однако, используя DHTML, можно разместить обе формы на одной странице, отображая ту или иную в зависимости от данных, введенных посетителем.

Рис. 25.10. Форма «Personal»

Рис. 25.11. Форма «Business»

Рис. 25.9. Так выглядит страница при первой загрузке

Контекстная форма 437 Листинг 25.8. Данный код определяет функционирование кнопки, которая позволяет посетителю выбрать форму «Рersonal» или «Business»

<html> <head> <script src="findDOMNested.js"> -></script> <script language="JavaScript"> var oldDom = null; function swapForm(objectID){ dom = findDOM('formStack',objectID,1); if (oldDom) oldDom.visibility = ->'hidden'; dom.visibility = 'visible'; oldDom = dom; oldObjectID = objectID; } </script> <style type="text/css"> #formStack { position: relative; width: 300px; visibility: visible } #personal,#business { padding: 5px; ->border: solid 1px gray; position: ->absolute; top: 0px; left: 0px; ->visibility: hidden } </style> </head> <body> <form name="myForm" method="get"> <input type="radio" ->onclick="swapForm('personal');" ->name="context">Personal <input ->type="radio" onclick= ->"swapForm('business');" ->name="context">Business </form> <div id="formStack"> <div id="personal"> <form name="personalForm" ->action="submit.html" method="get"> Name <input type="text" name="name" ->size="24"><br><br>

Создание контекстной формы 1. <script src="findDOMNested.js"> -></script> В любую JavaScript-функцию, которая непосредственно располагает объект на экране, включите код findDOM (листинг 25.8). Для этого поместите его во внешнем текстовом файле, а затем импортируйте файл на нужную страницу. Поскольку в таком коде используются вложенные слои, необходимо предусмотреть и дублирующий вариант кода для Netscape 4 (см. раздел «Netscape 4 и встроенные слои» в главе 11). 2. var oldDom=null; Присвойте переменной oldDom значение null. Это позволит функции swapForm() при первом запуске не вызывать ошибку. 3. function swapForm(ibjectID){…} Определите функцию swapForm(), используя JavaScript. Она скрывает текущую отображаемую форму, а затем показывает форму, выбранную посетителем. 4. #formStack{…} Стеку форм присвойте ID, который представляет собой объект с относительными координатами, содержащий стек расположенных абсолютно форм. 5. #personal, #business{…} Установите ID для всех форм, делая их скрытыми и расположенными абсолютно. Все формы имеют одинаковое определение, поэтому их можно включить в общий список (см. раздел «Определение тэгов с помощью одинаковых правил» в главе 2).

438 Средства управления 6. <input type="radio" onclick="swapForm ->('personal')" name="context"> В тэге <body> вашего документа опишите форму, которая позволит пользователю выбрать нужное направление, и в ней для каждой формы из стека введите тэг <input>. Для каждой кнопки формы укажите обработчик событий onClick, который вызывает функцию swapForm() и передает ей имя открываемой формы. 7. <div id="formstack">…</div> Определите для стека форм новый слой. Он будет содержать вложенные слои, а также позволит размещать формы на странице. 8. <div id="personal">…</div> Внутрь слоя, определенного вами на шаге 7, введите отдельный слой для каждой из используемых форм. 9. <form name="personalForm" action= ->"submit.html" method="get">…</form> В слое, созданном на шаге 8, поместите код формы. Она располагается на странице отдельно от других форм и включает кнопки Submit (Подтвердить) и Clear (Очистить). Эта версия контекстной формы достаточно проста, единственный минус – ограничение Netscape 4. Хорошо было бы использовать лишь одну кнопку Submit и создавать несколько различных форм, заключенных в одну большую. Однако Netscape 4 не позволяет внедрять CSS и таблицы в тэг <form>.

Листинг 25.8 (окончание)

Age<input type="text" name="age" ->size="3"><br><br> SS# <input type="password" ->name="ss#" size="7"><br><br> <input type="submit" ->name="submitPeronal" ->value="Submit Peronal"> <input ->type="reset" name="clearPersonal" ->value="Clear"> </form> </div> <div id="business"> <form name="businessForm" ->action="submit.html" method="get"> Company <input type="text" ->name="company" size="24"><br><br> Location<input type="text" ->name="location" size="24"><br><br> Tax # <input type="password" ->name="tax#" size="7"><br><br> <input type="submit" ->name="submitBusiness" ->value="Submit Business"> -><input type="reset" ->name="clearBusiness" ->value="Clear"> </form> </div> </div> </body> </html>

Перемещаемые объекты 439

Перемещаемые объекты Еще одна характерная черта графического интерфейса – это возможность передвигать экранные объекты: например, перетаскивать окна, файлы по экрану, а затем помещать их в какой-либо другой объект. В качестве примера рассмотрим создание приложения, составляющего поэтические строчки из слов, разбросанных по экрану: слова нужно перемещать таким образом, чтобы в результате получилась строчка из какого-либо стихотворения (рис. 25.12). Рис. 25.12. А вы можете привести в порядок это хаотическое собрание слов?

Листинг 25.9. Щелкните по элементу и перетащите его. Эти три функции позволяют посетителю передвигать объекты по экрану

<html> <head> <script language="JavaScript" ->src="findDOM.js"></script> <script language="JavaScript"> var domStyle = null; function pickIt(evt) { if (isLayers) { var testObject; var xPos = evt.pageX; var yPos = evt.pageY; for (var i = document.layers. ->length - 1; i >= 0; i–) { testObject = document.layers[i] if ((xPos > testObject.left) && ->(xPos < testObject.left + ->testObject.clip.width) && (yPos > testObject.top) && (yPos < testObject.top + ->testObject.clip.height)) { domStyle = testObject; }

Создание перемещаемого элемента 1. <script src="findDOM.js"></script> В любую JavaScript-функцию, которая непосредственно располагает объект на странице, внедрите код findDOM (листинг 25.9). Для этого поместите его во внешнем текстовом файле, а затем импортируйте этот файл на нужную страницу. 2. var domStyle=null; Введите переменную domStyle для записи стиля объектной модели документа (DOM). 3. function pickIt(evt){…} При помощи JavaScript задайте функцию pickIt(). Она очень похожа на функцию findObject() (см. раздел «Идентификация объекта на экране» в главе 14) и устанавливает ID объекта, на который указывает посетитель (вне зависимости от типа браузера). Если посетитель выбирает один из объектов, содержащих в ID слово chip, функция присваивает значение 100 z-индексу этого объекта. Поэтому объект располагается поверх остальных на странице. В противном случае функция не выполняет никаких действий.

440 Средства управления 4. function dragIt(evt){…} Напишите с помощью JavaScript функцию dragIt(), которая будет вызываться каждый раз, когда посетитель перемещает курсор мыши. Она не выполняет никаких действий до тех пор, пока посетитель не щелкнет по объекту, содержащему слово chip. После этого функция перемещает выбранный объект вслед за курсором мыши. 5. function dropIt(){…} Посредством JavaScript определите функцию dropIt(). Она вызывается каждый раз, когда пользователь отпускает клавишу мыши; переопределяет переменную domStyle значением null и устанавливает z-индекс элемента в нуль. 6. function defaultEvents(){…} Используя JavaScript, добавьте в сценарий функцию defaultEvents(). Она вызывается при помощи обработчика события onLoad в тэге <body> документа. Эта функция устанавливает, какую функцию следует запустить при наступлении определенного события (onMouseDown, onMouseMove и onMouseUp) в окне браузера (см. раздел «Глобальный обработчик событий» в главе 14). 7. .chip{…} Установите стиль класса для описания внешнего вида создаваемого средства. Определите все объекты, содержащие слово chip, в абсолютных координатах и с z-индексом, равным нулю. 8. #chip1{…} Для каждого элемента, содержащего слово chip, определите уникальный ID и присвойте начальные координаты левого верхнего угла.

Листинг 25.9 (продолжение)

} } else { objectID = event.srcElement.id; if (objectID.indexOf('chip') != ->-1){ domStyle = findDOM(objectID,1); } } if (domStyle) { domStyle.zIndex = 100; return false; } else { domStyle = null; return; } } function dragIt(evt) { if (domStyle) { if (isLayers) { domStyle.left = evt.pageX; domStyle.top = evt.pageY; } else { domStyle.left = window.event.x; domStyle.top = window.event.y; } } } function dropIt() { if (domStyle) { domStyle.zIndex = 0; domStyle = null; } } function defaultEvents() { if (isLayers) { //Óñòàíàâëèâàåò ãëîáàëüíûé îáðàáîò÷èê ->ñîáûòèé â Navigator 4.

Перемещаемые объекты 441 Листинг 25.9 (окончание)

9. onLoad="defaultEvents()" В тэге <body> введите обработчик событий onLoad для вызова функции defaultEvent(). 10. <span id="chip1" class="chip"> ->One</span> Создайте необходимое количество слоев (один слой для каждого chip-элемента) и каждому из них присвойте уникальный ID. В Internet Explorer 4 возникает проблема, связанная с отображением объектов во время их перемещения по экрану. Кроме того, нельзя использовать данную функцию при загрузке страницы из браузера Netscape 6.

442 Средства управления

Свопинг изображений Язык описания сценариев JavaScript широко распространен во Всемирной паутине. Он позволяет создавать действительно динамические Internet-приложения. Так, например, когда посетитель Web-страницы наводит указатель на гипертекстовую ссылку (рис. 25.13), ее отображение меняется (рис. 25.14). Передвиньте указатель на другой элемент страницы, и ссылка примет первоначальный вид.

Создание свопинга изображений 1. o1_off.gif Создайте для каждого из следующих состояний кнопки графическое представление (рис. 25.15): – off используется, когда кнопка не выбрана; – rdy применяется, когда на кнопку наведен указатель мыши; – on используется, когда кнопка выбрана. В зависимости от событий, происходящих в данный момент на экране, для кнопки применяется разное графическое отображение. 2. imag=newArray(); Имена необходимых файлов хранятся в массиве imag (листинг 25.10). Каждое изображение в этом массиве имеет свой уникальный номер, начинающийся с 0, а не с 1. Посредством номера вы можете ссылаться на изображение из массива. 3. im=newArray(); Чтобы загрузить какое-либо изображение в окно браузера, используйте массив im[]. Вызываемая функция с помощью

Рис. 25.13. Когда посетитель помещает указатель мыши над надписью Option 1…

Рис. 25.14. …она изменяется

Рис. 25.15. Три состояния надписи: off, rdy (ready) и on

Свопинг изображений 443 Листинг 25.10. Этот код изменяет изображение в зависимости от события, происходящего во фрейме содержания

<html> <head> <script language="JavaScript"> var o1,o2,o3; if (document.images){ imag = new Array(); imag[0] = "media/o1_off.gif"; imag[1] = "media/o1_rdy.gif"; imag[2] = "media/o2_off.gif"; imag[3] = "media/o2_rdy.gif"; imag[4] = "media/o3_off.gif"; imag[5] = "media/o3_rdy.gif"; im = new Array(); for (var i = 0; i < imag.length; i++) { im[i] = new Image(); im[i].src = imag[i]; } } function toggleImage(imgName,num){ if (document.images && imgName){ imgName.src = im[num].src; } return; } </script> <style type="text/css"> body { background: white url(media/bg.gif); margin-top: 10px } </style> <base target="content"> </head> <body marginHeight="0" topmargin="0"> <a href="option1.html" ->onmouseover="toggleImage(o1,1);" ->onmouseout="toggleImage(o1,0);"> <img height="45" width="100" ->src="media/o1_off.gif" border="0" ->name="o1"> </a>

массива im[] изменяет объекты, то есть осуществляет их свопинг. Вы можете добавлять любое количество изображений в массив imag[], но каждое из них должно иметь уникальный номер. В рассматриваемом примере загружается шесть изображений, и для каждого из них применяются версии off и rdy. 4. function toggleImage(imgName,num){…} С помощью JavaScript напишите функцию toggleImage(). Она достаточно проста. Сначала она определяет, может ли браузер осуществлять свопинг изображений (document.images) и существует ли такое изображение (imgName), затем изменяет источник изображения imgName на изображение из массива в зависимости от значения, содержащегося в переменной num.

Листинг 25.10 (окончание)

<a href="option2.html" ->onmouseout="toggleImage(o2,2);" ->onmouseover="toggleImage(o2,3);"> <img height="45" width="100" src= ->"media/o2_off.gif" border="0"> </a> <img height="45" width="100" ->src="media/o2_off.gif" border="0" ->name="o2"> <a href="option3.html" onmouseout= ->"toggleImage(parent.content. ->document.o3,4);" onmouseover= ->"toggleImage(parent.content. ->document.o3,5);"> <img height="45" width="100" src= ->"media/o3_off.gif" border="0"> </a> </body> </html>

444 Средства управления

Изменение изображения 1. <img height="45" width="100" ->src="media/o1_off.gif" border="0" ->name="o1"> Определите изображение и присвойте ему уникальное имя. 2. onmouseover="toggle(o1,1);" В ссылку, созданную для объекта (см. шаг 1), добавьте обработчик событий onmouseover, который будет вызывать функцию toggleImage(). Укажите название изображения, которое требуется изменить, а также номер заменяющего изображения (из массива img[]). 3. onmouseout="toggle(o1,1);" В ссылку, которая вызывает функцию toggleImage(), включите обработчик событий onmouseout. Укажите название изображения, которое требуется изменить, а также номер изображения (из массива img[]), сменяющего текущее. Изображению в приведенном коде было присвоено имя o1. Каждому изображению, которое будет изменяться, необходимо назначить уникальное имя. Когда посетитель наводит на изображение указатель мыши (onmouseover), вызывается функция toggleImage(), в которую передается имя изменяемого изображения – o1 (imgName), а также 1 (1 определяет, что надо отобразить rdy-версию кнопки, хранящуюся в массиве img[]). Когда указатель перемещается за границы области, в которой находится изображение (onmouseout), функция toggleImage() вызывается снова, чтобы опять изменить изображение o1. Оно замещается изображением, хранящимся в imag[0] (off-версией).

Рис. 25.16. Когда посетитель указывает мышью на кнопку Option 2, изменяется следующая за ней кнопка

Свопинг изображений 445 Нет ни одного правила, согласно которому изображение может изменяться только при наведении на него указателя мыши (рис. 25.16). Вы можете использовать обработчик событий onmouseover, который будет изменять совершенно другое изображение на экране. Все зависит от того, какое имя вы передаете при вызове функции toggleImage().

Изменение соседнего изображения

Рис. 25.17. При наведении указателя на кнопку Option 3 изменяется кнопка с таким же названием, находящаяся в соседнем фрейме

1. <img height="45" width="100" ->src="media/o2_off.gif" border="0"> Определите изображение и ссылку на него. 2. onmouseover="toggle(o2,3);" В ссылку, созданную для объекта (см. шаг 1), добавьте обработчик событий onmouseover, который будет вызывать функцию toggleImage(). Укажите название изображения, которое требуется изменить, а также номер заменяющего изображения (из массива img[]). 3. <img height="45" width="100" ->src="media/o2_off.gif" border="0" ->name="o2"> Определите изображение, которое необходимо заменить, и присвойте ему уникальное имя. Вы можете изменять не только те изображения, на которые указывает курсор мыши, но и те, которые находятся в других фреймах (рис. 25.17).

446 Средства управления

Изменение изображения, находящегося в другом фрейме 1. <frameset> Определите фреймы документа, каждому из фреймов присвойте уникальное имя (листинг 25.11). 2. <img height="45" width="100" ->src="media/o3_off.gif" border="0"> В файле menu.html определите изображение и создайте ссылку на него (листинг 25.12). 3. ommouseover="toggle(parent.content. ->document.o3,4);" К созданной на шаге 1 ссылке добавьте обработчик событий onmouseover для вызова функции toggleImage(). Передайте в эту функцию имя изменяемого изображения, а также номер заменяющего изображения (из массива imag[]). Имя изображения должно содержать путь к графическому объекту o3, которое находится во фрейме content. Если изображение не существует, никаких действий не выполняется. 4. <img height="45" width="100" ->src="media/o3_off.gif" border="0" ->name="o3"> В файле option1.html определите изображение, которое будет изменяться при использовании ранее созданной ссылки, и присвойте ему имя.

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

Листинг 25.11. Данный код описывает два фрейма: в верхнем находится меню, а в нижнем – содержимое

<html> <frameset rows="55,*" border="0" ->framespacing="0" frameborder="NO"> <frame src="menu.html" name="menu" ->scrolling="NO" noresize ->marginHeight="0px" ->marginWidth="0px"> <frame src="option1.html" ->name="content" noresize> </frameset> </html>

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

<html> <head> <style type="text/css"> body { background: white; } </style> </head> <body> <h2>Option 1</h2> <img height="45" width="100" ->src="media/o3_off.gif" border="0" ->name="o3"> </body> </html>

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

«Умное» меню 447

«Умное» меню

Рис. 25.18. При загрузке файла option1.html в меню поступает информация о том, что следует выделить кнопку Option 1 Листинг 25.13. Объект меню содержит элементы главной навигации сайта, а также код JavaScript, позволяющий изменять изображения и определять нужную кнопку при показе соответствующей информации

<html> <head> <script language="JavaScript"> var o1,o2,o3; var optionCurrent; var option; var nowLoaded = 0; if (document.images){ imag = new Array(); imag[0] = "media/o1_off.gif"; imag[1] = "media/o1_rdy.gif"; imag[2] = "media/o1_on.gif"; imag[3] = "media/o2_off.gif"; imag[4] = "media/o2_rdy.gif"; imag[5] = "media/o2_on.gif"; imag[6] = "media/o3_off.gif"; imag[7] = "media/o3_rdy.gif"; imag[8] = "media/o3_on.gif"; im = new Array(); for (var i = 0; i < imag.length; i++)

В этом разделе рассказывается, как перемещаться между двумя изображениями в зависимости от того, где находится указатель мыши. Но прежде необходимо составить код, позволяющий выводить на экран то или иное изображение при загрузке соответствующей страницы. Другими словами, загружающаяся во фрейм страница сообщает меню название раздела, а «умное» меню (smart menu) автоматически обновляется с учетом полученной информации (рис. 25.18). Эта технология предназначена в основном для сайтов, на которых для создания интерфейса используются фреймы.

Создание «умного» меню 1. o1_off.gif Создайте графическое представление для следующих состояний кнопки (листинг 25.13): – off используется, когда кнопка не выбрана; – rdy применяется при наведении указателя мыши на кнопку; – on используется, когда кнопка выбрана. В зависимости от событий, происходящих в данный момент на экране, для кнопки применяется разное графическое отображение. 2. index.html Создайте новый документ с фреймами (листинг 25.14), в котором один фрейм предназначен для меню (ему присваивается имя menu), а второй фрейм – для отображения информации (content).

448 Средства управления 3. menu.html Создайте новый HTML-файл и сохраните его под именем menu.html. Действия, выполняемые на шагах 4–10, будут относиться к этому файлу. 4. var nowLoaded=0; Введите глобальные переменные, а переменную nowLoaded инициализируйте нулем (false). Страницы, отображающие какую-либо информацию, проверяют значение этой переменной, чтобы установить, было ли загружено соответствующее меню. 5. imag=newArray(); Имена используемых файлов хранятся в массиве imag. Каждое изображение имеет в нем уникальный номер, начинающийся с 0, а не с 1. С его помощью вы можете ссылаться на изображение из массива. 6. im=newArray(); Чтобы загрузить какое-либо изображение в окно браузера, применяйте массив im[]. Вызываемая функция при помощи массива im[] изменяет объекты, то есть осуществляет их свопинг. Вы можете добавлять любое количество изображений в массив imag[], но каждое из них должно иметь уникальный номер. 7. function toggleImage(imgName,num){…} Напишите на JavaScript функцию toggleImage(). Она похожа на одноименную функцию из раздела «Свопинг изображений». Но в этом примере функция определяет, активно ли изображение, которое необходимо заменить. Если получен утвердительный ответ, то функция не выполняет никаких действий.

Листинг 25.13 (продолжение)

{ im[i] = new Image(); im[i].src = imag[i]; } } function toggleImage(imgName,num){ if (document.images){ if (optionCurrent == imgName.name) { Õreturn;} imgName.src = im[num].src; } return; } function setButtons() { if (document.images) { option = parent.content.option; optionCurrent = 'o' + option; if (option == 1) ->{ document.o1.src = im[2].src } else { document.o1.src = im[0].src } if (option == 2) ->{ document.o2.src = im[5].src } else { document.o2.src = im[3].src } if (option == 3) ->{ document.o3.src = im[8].src } else { document.o3.src = im[6].src } } } </script> <style type="text/css"> body { background: white url(media/ ->bg.gif); margin-top: 10px; } </style> <base target="content"> </head> <body onload="setButtons(); nowLoaded = ->1;" marginHeight="0" topmargin="0"> <a href="option1.html" ->onmouseover="toggleImage(o1,1);" ->onmouseout="toggleImage(o1,0);" ->onclick="toggleImage(o1,0);"> <img height="45" width="100" ->src="media/o1_off.gif" ->border="0" name="o1"> </a>

«Умное» меню 449 Листинг 25.13 (окончание)

<a href="option2.html" ->onclick="toggleImage(o2,3);" ->onmouseout="toggleImage(o2,3);" ->onmouseover="toggleImage(o2,4);"> <img height="45" width="100" ->src="media/o2_off.gif" ->border="0" name="o2"> </a> <a href="option3.html" ->onclick="toggleImage(o3,6);" ->onmouseout="toggleImage(o3,6);" ->onmouseover="toggleImage(o3,7);"> <img height="45" width="100" ->src="media/o3_off.gif" ->border="0" name="o3"> </a> </body> </html>

Листинг 25.14. В данном примере создаются два фрейма: узкий – для меню в верхней части экрана, широкий – для отображения основной информации

<html> <frameset rows="55,*" border="0" ->framespacing="0" frameborder="NO"> <frame src="menu.html" name="menu" ->scrolling="NO" noresize ->marginheight="0"> <frame src="option1.html" ->name="content" noresize> </frameset> </html>

8. function setButtons(){…} Напишите на JavaScript функцию setButtons(). Она активизирует кнопку из меню, соответствующую отображаемой информации во фрейме содержания. Она также определяет значение переменной option, которая находится в загруженном во фрейм документе. В зависимости от этого значения функция активизирует соответствующую кнопку меню и отключает остальные. 9. onmouseover="toggle(o1,1);" ->onmouseout="toggle(o1,0);" ->onclick="toggle(o1,0);" Создайте ссылки меню и изображения, используя для каждой ссылки обработчики событий onmouseover, onmouseout и onclick. Помните, что каждому изображению необходимо присвоить имя. 10. onload="setButtons(); nowLoaded=1;" В тэге <body> документа укажите обработчик событий onload, который будет вызывать функцию setButtons() и присваивать переменной onLoad значение 1 (true). 11. option1.html Создайте необходимое количество страниц для отображения какой-либо информации (листинг 25.15). Все страницы должны содержать код, записанный на шагах 12–15. 12. function doNothing(){…} Во все страницы, размещающие содержание сайта, добавьте функцию doNothing(). Сама по себе она не выполняет никаких действий. Однако при выгрузке страницы эта функция помогает предупредить ошибку, возникающую в некоторых версиях Internet Explorer. Она предотвращает повторный вызов кода JavaScript, когда страница загружается из кэша.

450 Средства управления 13. var option=3 На каждой странице с содержимым создайте переменную option. Ее значение отвечает за опцию меню, с которой связана конкретная страница. 14. if (top.menu.nowLoaded) ->{top.menu.setButtons();} Используя JavaScript, составьте код, который будет проверять, загружено ли меню, а затем вызывать функцию setButtons во фрейме menu. 15. onunload="doNothing();" В тэге <body> вашего документа укажите обработчик событий onunload, который будет вызывать функцию doNothing(). Это позволяет определенным версиям Internet Explorer заново вызывать функции JavaScript, если страница загружается из кэша. Казалось бы, легко изменить текущее состояние опции меню на on при наступлении события onclick. А если посетители заходят на страницу, не задействуя соответствующую опцию? Может быть, они воспользовались путеводителем по сайту или ссылкой, расположенной на другой странице, а не в меню, или, что еще вероятнее, кнопкой Back стандартной навигации браузера. В этих случаях обработчик событий onclick не будет вызван, следовательно, отображение опции не изменится. Использование рассмотренной выше техники позволяет убедиться в том, что для показываемого содержания всегда выбирается нужная картинка в меню.

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

<html> <head> <script language="JavaScript"> function doNothing() {} var option = 1; if (top.menu.nowLoaded) { ->top.menu.setButtons(); } </script> <style type="text/css"> body { background: white; } </style> </head> <body onunload="doNothing();"> <h2>Option 1</h2> </body> </html>

Специальные эффекты

26 Зачем создавать скучные Web-страницы, которые просто занимают место на экране в ожидании, что посетитель щелкнет наконец по какой-нибудь кнопке? В этой главе рассказывается о некоторых забавных эффектах, которые вы способны создать, используя CSS и DHTML. Некоторые из этих эффектов вполне можно отнести к разряду дурацких Internetшуточек, но они помогут превратить вашу пустынную страницу в висячие сады Семирамиды. Однако я хочу предостеречь вас: сайт, перенасыщенный эффектами, может быстро надоесть посетителю.

452 Специальные эффекты

Буквица Буквица – это традиционный стиль оформления начальной буквы первого предложения нового раздела или новой главы книги. Средневековые монахи применяли буквицы для украшения манускриптов, а вы можете добавить их на страницы своего сайта (рис. 26.1). Чтобы вставить в текст буквицу, следует увеличить размер первой буквы абзаца и сдвинуть несколько первых строк вправо.

Вставка буквицы при помощи тэга <span> 1. p { font: normal 12px/14px helvetica, ->arial, sans-serif; } Определите тэг абзаца, который вы хотите украсить буквицей (листинг 26.1). В рассматриваемом примере используется шрифт Helvetica размером 10 пунктов и междустрочным интервалом 12 пунктов. (Если необходима помощь при выборе размера шрифта, обратитесь к главе 3.) 2. .dropcap {font: bold 300% times, serif; ->color: red; float: left;} Определите класс, который устанавливает следующие свойства шрифта: полужирный (bold), размер – в три раза больше основного текста. Остальной текст будет обтекать справа «усиленный» элемент (см. раздел «Обтекание текстом» в главе 7).

Рис. 26.1. Буквица

Буквица 453 Листинг 26.1. Буквица помогает посетителю определить первый абзац на странице

<html> <head> <style type="text/css"> p {font: 12px/14px helvetica,arial,sans->serif;} .dropcap { font: bold 300% times,serif; color: red; float: left; } </style> </head> <body> <h3>CHAPTER VI<br> Pig and Pepper</h3> <p><span class="dropcap">F</span>or a ->minute or two she stood looking at ->the house, and wondering what to do ->next, when suddenly a footman in ->livery came runningout of the wood ->(she considered him to be a footman ->because he was in livery: otherwise, ->judging by his face only, she would ->have called him a fish)–and rapped ->loudly at the door with his ->knuckles. </p> </body> </html>

3. <p> <span class="dropcap">F</span> ->or a minute or two …</p> Чтобы для создания буквицы использовать класс dropcap, в HTML-документ нужно включить тэг <span>. В данном примере буквица размером 30 пунктов расположена на одном уровне с первой строкой. В Internet Explorer выравнивание буквицы и основного текста происходит не по верхней части, а по нижней (то есть буквы находятся на одной линии). Поэтому буквы, для отображения которых использовался стиль dropcap, являются не совсем буквицами.

Псевдоэлемент Более легкий способ создания буквиц – использование псевдоэлементов (pseudoelement) первых букв. Псевдоэлемент – это специфичная, уникальная часть элемента, отображением которого можно управлять независимо от остальной его части. Допустимо применять псевдоэлементы первых букв для создания стиля отображения начальной буквы первой строки текста. p:first-letter {font: bold 300% times, serif; float: left;} Здесь описан псевдоэлемент first-letter, который позволяет задавать отображение первой буквы. К сожалению, ни Netscape 4, ни Internet Explorer 4 не поддерживают псевдоэлементы. Поэтому использовать их можно только на свой страх и риск.

454 Специальные эффекты

Простая тень Еще один распространенный эффект на Web-сайтах – создание тени объекта. Тень от текста (особенно от больших заголовков) четко выделяется на странице (рис. 26.2). До появления CSS единственным способом создания теней в Internet было использование графического формата; теперь уже нет необходимости переводить текст в графику.

Создание тени при помощи CSS 1. #title {…} В списке правил CSS (листинг 26.2) создайте три ID и назовите их title, text и shadow. Первые два должны быть заданы в относительных координатах, а последний – в абсолютных. Положение верхнего левого угла этих ID нужно чуть сместить относительно друг

Рис. 26.2. Эффект тени

Листинг 26.2. Слои текста и его тени расположены в слое заголовка

<html> <head> <style media="screen" type="text/css"> #title { font: bold 75px "Hoefler Text", serif, "Times New Roman", Georgia, Times; ->position: relative; top: 5px; left: 5px; } #text { position: relative; top: 0px; left: 0px; color: #000000; z-index:2; } #shadow { position: absolute; top: 4px; left: 4px; color: #999999; z-index:1; } </style> </head> <body> <div id="title"> <span ID="text">Alice in Wonderland</span> <span ID="shadow">Alice in Wonderland</span> </div> <p>Down, down, down. Would the fall <i>never</i> come to an end! 'I wonder how many ->miles I've fallen by this time?'</p> </body> </html>

Простая тень 455

Рис. 26.3. Так выглядит эффект тени при просмотре страницы из браузера, не поддерживающего CSS

друга (см. раздел «Абсолютные элементы, встроенные в относительные» в главе 8). 2. <div id="title">…</div> Создайте слой заголовка. Он содержит слои переднего плана (text) и фона (shadow) и позволяет сгруппировать эти элементы в один. 3. <span id="text">…</span> В слое title определите слой text для текста, который будет отображаться поверх тени. 4. <span id="shadow">…</span> Затем введите слой shadow – слой тени, который должен содержать такой же текст, что и слой text.

Браузеры, не поддерживающие CSS, вместо текста с тенью отображают простой текст, зато два раза подряд (рис. 26.3). Обязательно поэкспериментируйте с различными цветами для тени и шрифтами для основного текста и текста-тени. С помощью СSS и JavaScript можно создавать постепенно исчезающие тени (см. следующий раздел).

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

456 Специальные эффекты

Создание объемной тени 1. varshadowLength=10; В сценарии JavaScript инициализируйте следующие переменные (листинг 26.3): – shadowLength определяет количество повторений текста. Можно изменять значение этой переменной. Чем больше значение, хранящееся в ней, тем длиннее будет тень от текста; – offsetLeft задает величину смещения текста. Допускается изменять значение, хранящееся в этой переменной, однако если вы хотите получить более ровную и реалистичную тень, лучше присвоить ей значение 1; – oL записывает положение левого края каждого повтора текста. (Текст, для которого создается тень, повторяется, с каждым разом смещаясь влево. Он окрашен в цвет, выбранный для тени; таким образом, повторив текст несколько раз, можно получить достаточно реалистичную тень.) Начальное значение данной переменной должно быть нулем; – oT сохраняет координаты верхней границы текста. Переменная определяет положение левой границы каждого повтора текста и должна быть инициализирована нулем; – bgR, bgG, bgB. Объявите переменные для управления красным (bgR), зеленым (bgG) и синим (bgB) цветами фона. Вы можете изменять значения этих переменных, но они должны находиться в диапазоне от 0 до 255 (см. раздел «Значения и единицы» во введении); – shR, shG, shB. Задайте переменные для красного, зеленого и синего цветов тени. Диапазон значений – от 0 до 255;

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

<html> <head> <script language="JavaScript"> var shadowLength = 10; var offsetLeft = 1; var offsetTop = 1; oL = 0; oT = 0; var bgR = 255; var bgG = 255; var bgB = 255; var shR = 0; var shG = 0; var shB = 0; var fgR = 255; var fgG = 0; var fgB = 0; var cR = shR; var cG = shG; var cB = shB; zC = shadowLength; var iR = Math.round((Math.abs(bgR ->shR))/shadowLength); var iG = Math.round((Math.abs(bgG ->shG))/shadowLength); var iB = Math.round((Math.abs(bgB ->shB))/shadowLength); function colourShift () { if ( cR >= bgR ) { cR -= iR; } else { cR += iR; } if ( cG >= bgG ) { cG -= iG; } else { cG += iG; } if ( cB >= bgB ) { cB -= iB; } else { cB += iB; } } function writeLayer(layerPrefix,message) { document.writeln ('<div id="title">')

Объемная тень 457 Листинг 26.3 (продолжение)

– fgR, fgG, fgB. Определите переменные для красного, зеленого и синего цветов основного текста, для которого создается тень. Диапазон значений – от 0 до 255; – cR, cG, cB записывают значения красного, зеленого и синего цветов для текущего слоя. Начальные значения этих переменных равны соответствующим значениям переменных цвета тени, однако с каждым повтором текста данные величины приближаются к цвету фона; – zC сохраняет значение z-индекса для каждого слоя. Эти переменные должны быть инициализированы тем же значением, что и shadowLength; – iR, iG, iB записывают величину инкремента для красного, зеленого и синего цветов соответственно. 2. function colorShift(){…} Напишите, используя JavaScript, функцию colorShoft(). Она изменяет переменные, контролирующие красный, зеленый и синий цвета текущего слоя. 3. function writeLayer(layerPrefix, ->message){…} С помощью JavaScript определите функцию writeLayer(). Получая имя слоя и текст, который необходимо в него записать, она создает слой для каждого повтора. 4. function writeCSS(layerPrefix){…} Введите JavaScript-функцию writeCSS(). Получая имя каждого слоя, она создает для него CSS, содержащий тень. При этом каждый раз после создания нового слоя вызывается функция colorShift() для изменения цвета тени.

458 Специальные эффекты 5. document.writeln('<style type= ->"text/css">'); Введите код JavaScript, который вписывает CSS в тэг <body> документа, используя переменные, объявленные на шаге 1 для определения цвета фона страницы. 6. writeCSS('shadow'); Добавьте вызов функции writeCSS(), передавая в нее имя слоя, в котором создается элемент тени. 7. #title{…} Определите правило для CSS. На данном шаге создается элемент тени, заданный в относительных координатах. 8. writeLayer('shadow', 'Alice In ->Wonderland'); В теле документа вызовите функцию writeLayer(), передайте в нее имена слоев тени и текст, который там необходимо отобразить. Данный метод используется только в том случае, если для фона выбран сплошной цвет, иначе тень будет выглядеть неестественно.

Листинг 26.3 (окончание)

document.writeln ('body {') document.writeln ('background-color: ->rgb(' + bgR + ',' + bgG + ',' + ->bgB + ');') document.writeln (' }') writeCSS('shadow') document.writeln ('</style>') </script> <style type="text/css"> #title { font: bold 75px "Hoefler Text", ->serif, "Times New Roman", Georgia, ->Times; position: relative; top: 5px; ->left: 5px } </style> </head> <body> <script language="JavaScript"> writeLayer('shadow','Alice in Wonder ->Land'); </script> <p>Down, down, down. Would the fall -><i>never</i> come to an end! 'I ->wonder how many miles I've fallen by ->this time?'</p> </body> </html>

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

Рис. 26.5. Объемная тень, для создания которой переменной offsetLeft присваивается значение 5

Фединг HTML-текста 459

Фединг HTML-текста Используя принцип формирования объемной тени, можно создать исчезающий и постепенно появляющийся на экране HTMLтекст. При этом вам не придется использовать анимированные файлы GIF (рис. 26.6– 26.8). Однако следует учесть, что данный метод вызывает ошибки при просмотре страницы в Netscape 4 для Windows.

Создание текста с федингом Рис. 26.6. На экране видна только ссылка. Посетитель наводит на нее указатель мыши…

Рис. 26.7. …и текст начинает постепенно появляться

Рис. 26.8. В конце концов текст становится виден отчетливо

1. <script src="findDOM.js"></script> В любой функции JavaScript, которая непосредственно располагает объект на экране, необходимо поместить код findDOM (см. раздел «Использование общей для браузеров DOM» в главе 11). Для этого запишите его во внешнем текстовом файле, а затем импортируйте файл на нужную страницу (листинг 26.4). 2. var domTop; В коде JavaScript инициализируйте следующие переменные: – domTop записывает объектную модель документа (DOM) для отображаемого слоя; – domNew сохраняет DOM нового отображаемого слоя; – layerAlpha записывает номер текущего слоя; – layerOmega определяет максимальное число слоев. Эта переменная контролирует количество повторов слоев при создании фединга текста. Таким образом, чем больше значение, хранящееся в этой переменной, тем более ровной (и более медленной) будет «проявка» текста; – layerCurent сохраняет имя (ID) текущего отображаемого слоя;

460 Специальные эффекты – layerNumberUp записывает номер текущего отображаемого слоя, если функция fadeText() отображает текст; – layerNumberDown определяет номер текущего отображаемого слоя, если функция fadeText() скрывает текст; – delay устанавливает величину задержки между рекурсивными запусками функции (см. раздел «Повторный запуск функции» в главе 14). Это значение можно изменять. Чем больше величина, хранящаяся в данной переменной, тем медленнее осуществляется фединг; – fgR, fgG, fgB. Определите переменные для красного, зеленого и синего цветов основного текста. Допускается изменять значения этих переменных, но они должны находиться в диапазоне от 0 до 255; – cR, cG, cB записывают значения красного, зеленого и синего цветов для текущего слоя. Начальные значения этих переменных равны соответствующим значениям переменных цвета тени, однако с каждым повтором текста данные величины приближаются к цвету фона; – iR, iG, iB определяют величину инкремента для красного, зеленого и синего цветов. 3. function fadeText(layerPrefix, ->direction){…} Используя JavaScript, введите функцию fadeText(). Определяя направление фединга (0 – «проявка» текста, 1 – обратное действие), она изменяет нужным образом переменные и вызывает функцию fadeUp()или fadeDown() в зависимости от значения переменной direction.

Листинг 26.4. Как и объемная тень, текст с федингом состоит также из нескольких слоев. Каждый слой отображается один раз <html> <head> <script src="findDOM.js"></script> <script language="JavaScript"> var domTop; var domNew; var layerAlpha = 1; var layerOmega = 60; var layerCurrent =null; var layerNumberUp = null; var layerNumberDown = null; var delay = 75; var bgR = 255; var bgG = 255; var bgB = 255; var fgR = 0; var fgG = 0; var fgB = 0; var cR = bgR; var cG = bgG; var cB = bgB; var iR = Math.round((Math.abs(bgR -> fgR))/layerOmega); var iG = Math.round((Math.abs(bgG ->fgG))/layerOmega); var iB = Math.round((Math.abs(bgB ->fgB))/layerOmega); function fadeText(layerPrefix,direction) { if (layerCurrent == null) { if (direction == 0 ) { layerCurrent = layerPrefix + ->layerAlpha; layerNumberUp = layerAlpha; fadeUp(layerPrefix); } else { layerCurrent = layerPrefix + ->layerOmega; layerNumberDown = layerOmega; fadeDown(layerPrefix); } } else { if (direction == 0 ) {

Фединг HTML-текста 461 Листинг 26.4 (продолжение)

layerNumberUp = layerNumberDown + 1; layerNumberDown = layerAlpha; fadeUp(layerPrefix); } else { layerNumberDown = layerNumberUp - 1; layerNumberUp = layerOmega; fadeDown(layerPrefix); } } } function fadeUp(layerPrefix) { layerPrevious = layerCurrent; layerCurrent = layerPrefix + ->layerNumberUp; domTop = findDOM(layerPrevious,1); domNew = findDOM(layerCurrent,1); domTop.visibility = 'hidden'; domNew.visibility = 'visible'; domTop.zIndex = '0'; domNew.zIndex = '100'; layerNumberUp++; if (layerNumberUp <= layerOmega) { code2run = 'fadeUp("' + layerPrefix ->+ '")'; setTimeout(code2run,delay); } } function fadeDown(layerPrefix) { layerPrevious = layerCurrent; layerCurrent = layerPrefix + ->ÕlayerNumberDown; domTop = findDOM(layerPrevious,1); domNew = findDOM(layerCurrent,1); domTop.visibility = 'hidden'; domNew.visibility = 'visible'; domTop.zIndex = '0'; domNew.zIndex = '100'; layerNumberDown–; if (layerNumberDown >= layerAlpha) { code2run = 'fadeDown("' + ->layerPrefix + '")'; setTimeout(code2run,delay); } }

4. function fadeUp(layerPrefix){…} Используя JavaScript, определите функцию fadeUp(). Она создает серию слоев, отображая и скрывая каждый по очереди. Таким образом текст постепенно проявляется на экране. 5. function fadeDown(layerPrefix){…} При помощи JavaScript задайте функцию fadeDown(). Она создает серию слоев, отображая и скрывая каждый по очереди. Текст на экране постепенно растворяется. 6. function colorShift(){…} Опишите, используя JavaScript, функцию colorShoft(). Она изменяет переменные, контролирующие красный, зеленый и синий цвета текущего слоя, которые применяются в CSS. 7. function writeLayer(layerPrefix, ->message){…} Введите функцию JavaScript writeLayer(). Получая имя каждого слоя (layerPrefix) и текст, который необходимо в него записать, она создает слой для каждого повтора. 8. function writeCSS(layerPrefix){…} Поместите в сценарий JavaScript функцию writeCSS(). Получая имя каждого слоя (layerPrefix), она создает CSS для каждого слоя, содержащего тень, при этом каждый раз после создания нового слоя вызывается функция colorShift() для изменения цвета текста. 9. document.writeln('<style type= ->"text/css">'); Введите код JavaScript, который вписывает CSS в тэг <body> документа, используя переменные, объявленные на шаге 1 для определения цвета фона страницы.

462 Специальные эффекты 10. writeCSS('shadow'); Добавьте вызов функции writeCSS(), передавая в нее имя слоя, которое вы применили при создании ID. 11. #title{…} Укажите ID для используемого CSS. В этом пункте создается элемент фединга, заданный в относительных координатах. 12. onmoseover="fadeText('f',0)" Вызовите функцию fadeText(), передавая в нее имя (ID) объекта, для которого создается фединг, а также направление фединга (определяется переменной direction). 13. <div id="title">…</div> Установите CSS-слой и назовите его title. Введите код JavaScript, начиная с шага 10. 14. writeLayer('à', 'DHTML Rules'); В теле документа вызовите функцию writeLayer(), передайте в нее имя слоя, которое вы использовали при создании ID, и текст, для которого применяется фединг.

Поскольку текст в приведенном примере не является прозрачным, этот метод не даст хорошего результата при использовании неоднородного фона страницы.

Листинг 26.4 (продолжение)

Отслеживание указателя мыши 463 Листинг 26.4 (окончание)

document.writeln ('position: absolute;') document.writeln ('visibility: hidden;') document.writeln ('top: -12px;') document.writeln ('left: -3px;') document.writeln ('}') writeCSS('f') document.writeln ('</style>') </script> <style type="text/css"> #title { font: bold 75px "Hoefler Text", ->serif, "Times New Roman", Georgia, ->Times; position: relative; top: 5px; ->left: 5px } </style> </head> <body> <h2><a href="#" ->onmouseover="fadeText('f',0);" ->onmouseout="fadeText('f',1);">Fade -></a></h2> <div id="title"> <script language="JavaScript"> writeLayer('f','DHTML Rules.'); </script> </div> </body> </html>

Отслеживание указателя мыши Как и полоса прокрутки (см. раздел «Полоса прокрутки» в главе 25), указатель мыши является неотъемлемой частью пользовательского интерфейса. К сожалению, немногие браузеры позволяют управлять отображением курсора, что ограничивает фантазию Web-дизайнера (см. раздел «Форма указателя мыши» в главе 5). Однако, используя DHTML, несложно создать слой, который позволяет отслеживать перемещение указателя мыши. В браузерах, где можно установить состояние указателя в none, допускается заменить указатель мыши собственным вариантом (рис. 26.9).

Рис. 26.9. Эффект прожектора. Черный текст находится на черном фоне. Белое пятно перемещается под текстом, но поверх фона. У посетителя создается впечатление, что, управляя мышью, он освещает текст прожектором

464 Специальные эффекты

Создание объекта, отслеживающего перемещение указателя мыши 1. <script src="findDOM.js"></script> В любой функции JavaScript, которая непосредственно располагает объект на экране, поместите код findDOM. Для этого запишите данный код во внешнем текстовом файле, а затем импортируйте файл на нужную страницу (листинг 26.5). 2. var evt=null; Инициализируйте следующие переменные: – evt. Присвойте переменной события значение null; – isNS. Введите переменную, которая будет содержать информацию об используемом браузере: 1 – Netscape, 0 – другой тип браузера. 3. if (navigator, appName.indexOf ->('Netscape') != –1) {isNs=1;} Укажите браузер, в котором отображается страница, – Netscape или другой тип (см. раздел «Название и версия браузера» в главе 12). Присвойте переменной isNS значение 1, если браузер совместим с Netscape. 4. function defaultEvents(evt){…} Используя JavaScript, введите функцию defaultEvents(). Она устанавливает глобальный обработчик событий (см. раздел «Глобальный обработчик событий» в главе 14). При любом перемещении указателя вызывается функция followMe().

Листинг 26.5. Глобальный обработчик событий позволяет отслеживать перемещения указателя и связывать с ними позиционирование графического объекта

<html> <head> <script language="javascript" ->src="findDOM.js"></script> <script language="javascript"> var evt = null; var isNS = 0; if (navigator.appName.indexOf ->('Netscape') != -1) {isNS = 1;} function defaultEvents(evt) { if (isNS) { document.captureEvents ->(Event.MOUSEMOVE); } if (isDHTML){ document.onmousemove = followMe; } } function followMe(evt) { if (isNS) event = evt; domStyle = findDOM('spotLight',1); if (event.pageX != null) { domStyle.left = event.pageX - 150; domStyle.top = event.pageY - 150; return; } else { domStyle.left = event.x - 150; domStyle.top = event.y - 150; return; } } </script> <style media="screen" type="text/css"> #spotLight { position: absolute; top: 20px; left: 20px;

Отслеживание указателя мыши 465 Листинг 26.5 (окончание)

z-index: 0; } #content { font: bold 50px fantasy; position: absolute; top: 100px; left: 100px; z-index: 100; } body { background-color: black; color : black; cursor: none; } </style> </head> <body onload="defaultEvents(event);"> <span id="spotLight"> <img src="spotLight.gif" ->width="300" height="300"> </span> <div id="content">Are you afraid of ->the dark?</div> </body> </html>

5. function followMe(evt){…} В сценарий JavaScript введите функцию followMe(). Она перемещает особый объект (в рассматриваемом примере объект spotlight) вслед за указателем мыши, отставание при этом составляет 150 пикселов. Так как объект представляет собой изображение размером 300×300 пикселов, указатель появляется в его середине. 6. #spotlight{…} Присвойте объекту, который будет отслеживать перемещения курсора, ID в абсолютных координатах. Начальные значения координат верхней и левой границ объекта не имеют принципиального значения, поскольку они будут изменяться при перемещении указателя. 7. onload="defaultEvents(event);" При загрузке страницы необходимо обрабатывать различные события, для этого в тэге <body> документа укажите обработчик событий onload, который будет вызывать функцию defaultEvent(). 8. <span id="spotlight">…</span> Определите слой, который будет перемещаться вместе с указателем. В рассматриваемом примере в нем находится графический объект, но допускается использовать HTML-текст, GIF-анимацию, то есть все, что можно расположить в CSS-слое.

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

Одновременно с этой технологией допускается использовать и какие-либо другие, чтобы добиться еще более интересных эффектов. Можно работать со слоями, имеющими различные z-индексы (см. раздел «Элементы в порядке стека (3D-позиционирование)» в главе 8), чтобы создавать Web-страницы в виде головоломки (рис. 26.10), или использовать PNG-графику (см. раздел «Прозрачная графика в формате PNG»), чтобы отображать курсор в виде прицела (рис. 26.11).

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

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

Движущиеся объекты 467

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

Создание движущихся объектов 1. <script src="findDOM.js"></script> В любой функции JavaScript, которая непосредственно располагает объект на экране, поместите код findDOM. Для этого запишите его во внешнем текстовом файле, а затем импортируйте файл на нужную страницу (листинг 26.6). 2. var tall=200; Инициализируйте следующие переменные: – tall задает высоту области, в которой будет перемещаться объект. Объект способен передвигаться на достаточно большие расстояния влево и вправо от положения Xpos. Допускается изменять значение этой переменной. Чем больше хранящееся в ней число, тем дальше от центра (вверх и вниз) может смещаться объект; – wide определяет ширину области перемещений объекта. Объект способен передвигаться на достаточно большие расстояния от положения, определяемого Ypos. Допускается изменять значение этой переменной. Чем больше хранящееся в ней число, тем дальше от центра (влево и вправо) может смещаться объект;

Рис. 26.12. Буквы перемещаются по странице, пока посетитель не покинет ее

468 Специальные эффекты – step задает величину инкремента для переменной nextStep. Допускается изменять значение этой переменной. Чем меньше хранящееся в ней число, тем медленнее будет перемещаться объект; – delay контролирует продолжительность паузы между запусками функции в цикле (см. раздел «Повторный запуск функции» в главе 14). Допускается изменять значение этой переменной; чем больше хранящееся в ней число, тем медленнее будет перемещаться объект; – nextStep контролирует текущую скорость объекта; – numObjects определяет число плавающих объектов. Присвойте этой переменной значение, равное числу объектов; – Xpos устанавливает расстояние от левой границы страницы. Объект будет перемещаться относительно данной точки. Допускается изменять значение этой переменной; – Ypos записывает расстояние от верхней границы страницы. Объект будет перемещаться относительно данной точки. Допускается изменять значение этой переменной. 3. function objectsFloat(){…} Введите, используя JavaScript, функцию objectsFloat(). Она изменяет положение каждого из объектов, используя определенную формулу, которая задает их траекторию и тип вращения относительно точки Xpos/Ypos. Пока посетитель не покинет страницу, эта функция рекурсивно вызывается.

Листинг 26.6. Плавающие объекты кружатся по эллиптическим орбитам вокруг центра

<html> <head> <script src="findDOM.js"></script> <script language=JavaScript> var tall = 200; var wide = 200; var step = .25; var delay = 50; var nextStep = 0; var numObjects = 6; var Xpos = 200; var Ypos = 200 function objectsFloat() { for (var xx = 1 ; xx < (numObjects + 1) ; ->xx++ ) { var objectID = 'object' + xx; domStyle = findDOM(objectID,1) domStyle.top = Ypos + ->Math.cos((20*Math.sin(nextStep/ ->(30+xx)))+xx*70) * tall * ->(Math.sin(10+nextStep/10)+0.2) * ->Math.cos((nextStep+ xx*55)/10); domStyle.left = pos + ->Math.sin((20*Math.sin(nextStep/30)) ->+xx*70) * wide * ->(Math.sin(10+nextStep/(10+xx))+0.2) * ->Math.cos((nextStep+ xx*55)/10); } nextStep += step; setTimeout('objectsFloat()', delay) ; } </script> </head> <body onload="objectsFloat();"> <div id="object1" style="position: ->absolute; left: 300; top: 140; ->visibility: visible; font: 136px ->times; color:#000000;">D</div> <div id="object2" style="position: ->absolute; left: 690; top: 240; ->visibility: visible; font: 136px ->times; color:#333333;">H</div>

Движущиеся объекты 469 Листинг 26.6 (окончание)

<div id="object3" style="position: ->absolute; left: 400; top: 340; ->visibility: visible;font: 136px times; ->color:#666666;">T</div> <div id="object4" style="position: ->absolute; left: 400; top: 340; ->visibility: visible;font: 136px ->times; color:#999999;">M</div> <div id="object5" style="position: ->absolute; left: 400; top: 340; ->visibility: visible;font: 136px ->times; color:#CCCCCC;">L</div> <div id="object6" style="position: ->absolute; left: 400; top: 340; ->visibility: visible;font: 136px ->times; color:#FFFFFF;">!</div> </body> </html>

4. onload="objectsFloat();" В тэге <body> вашей Web-страницы укажите обработчик событий onload, который будет вызывать функцию objectsFloat(). 5. <div id="object1" style="position: ->absolute; left: 300; top: 140; ->visibility: visible; font: ->136px times; color:#000000;">…</div> Используя тэг <div>, установите CSSслои для перемещаемых объектов, присвойте им ID и укажите необходимые атрибуты стилей (см. раздел «Добавление CSS в HTML-тэг» в главе 2). Стиль определяет объект в абсолютных координатах и задает начальное положение верхнего левого угла. Кроме того, он может содержать любые другие определения.

В рассматриваемом примере плавающие объекты начинают перемещение при помощи обработчика событий onload, но допустимо использовать любой другой обработчик. Вы можете помещать в CSS-слой любой объект, но помните, что чем он больше, тем хуже будет качество анимации. В данном примере определения каждого из шести слоев находятся в тэге <div>. Но есть и другие варианты: можно создать шесть различных ID в тэге <style> или использовать внешний CSS-файл (см. разделы «Добавление CSS на Web-страницу» и «Добавление CSS на Web-сайт» в главе 2).

470 Специальные эффекты

Прозрачная графика в формате PNG Наиболее перспективным форматом для графических объектов, пришедшим на смену GIF, можно назвать PNG (Portable Network Graphics – портируемая сетевая графика). Он является стандартизированным, непатентованным, кроме того, он поддерживается WЗС и имеет ряд преимуществ по сравнению с GIF. Основное достоинство PNG состоит в том, что этот формат позволяет создавать прозрачные изображения. В формате GIF подобного эффекта добиться нельзя (рис. 26.13). В данном разделе рассказывается, как создавать PNG-графику при помощи Adobe Photoshop или Macromedia Fireworks.

Создание PNG-графики при помощи Photoshop 1. Откройте новый документ в режиме RGB, 72dpi и установите прозрачный фон (рис. 26.14). Задайте размер изображения. 2. Создайте изображение. Изображение может отбрасывать тени (допускается использовать и другие эффекты). У слоев может быть различный уровень прозрачности (рис. 26.15). Обрежьте ненужные области созданного изображения или примените инструмент Ножницы, чтобы получить изображение нужного размера. 3. Выполните команду File ⇒ Save for Web (Файл ⇒ Сохранить для Web) Откроется диалоговое окно сохранения. 4. Из ниспадающего меню Settings (Установки) выберите пункт PNG-24, включите флажок Transparency (Прозрачность), затем нажмите OK (рис. 26.16). Откроется диалоговое окно Save Optimized As (Сохранить оптимизированный как…).

Рис. 26.13. Оба изображения одинаковы, но первое было сохранено в формате GIF, а второе – в формате PNG. Заметьте, что изображение в GIF-формате целиком закрывает текст, даже в прозрачной области, в то время как через изображение в формате PNG вы можете свободно видеть текст

Рис. 26.14. Диалоговое окно Photoshop. Создается новое изображение: 72dpi, RGB, прозрачный фон

Прозрачная графика в формате PNG 471 5. Введите название изображения. 6. Выберите папку, в которой следует сохранить изображение (рис. 26.17).

Создание PNG-графики при помощи Fireworks 1. Откройте новый документ в режиме RGB, 72dpi и установите прозрачный фон (рис. 26.18). Задайте размер изображения.

Рис. 26.15. Изображение в Photoshop: два пересекающихся круга, прозрачность области пересечения 25%. Круги отбрасывают небольшую тень

Рис. 26.17. Диалоговое окно Save Optimized As в Photoshop

Рис. 26.16. Диалоговое окно сохранения для Web. Формат изображение необходимо установить на PNG-24

Рис. 26.18. Диалоговое окно Fireworks. Создается новое изображение: 72dpi, RGB, прозрачный фон

472 Специальные эффекты 2. Создайте изображение. Изображение может отбрасывать тени (допускается использовать и другие эффекты). У слоев может быть различный уровень прозрачности (рис. 26.19). Обрежьте ненужные области созданного изображения или примените Ножницы, чтобы получить изображение нужного размера. 3. На панели управления отметьте опцию Optimize (Document), установите формат изображения PNG-24 (рис. 26.20). Если вы не можете найти данный пункт на панели управления, выберите Window ⇒ Optimize (Окно ⇒ Оптимизировать). 4. Выполните команду File ⇒ Export Preview (Файл ⇒ Экспортный предварительный просмотр). Откроется диалоговое окно (рис. 26.21).

Рис. 26.20. Диалоговое окно Optimize в Fireworks. Необходимо установить формат изображения PNG-24

Рис. 26.21. Диалоговое окно Export Preview (Предварительный просмотр) в Fireworks. Если вы забыли установить формат изображения PNG-24, можно сделать это в данном окне

Рис. 26.19. Изображение в Fireworks: два пересекающихся круга, прозрачность области пересечения 25%. Круги также отбрасывают небольшую тень

Прозрачная графика в формате PNG 473 5. Убедитесь, что для изображения задан формат PNG-24, затем нажмите кнопку Export (Экспортировать). 6. Введите имя изображения. 7. Укажите папку, в которой следует сохранить изображение (рис. 26.22).

Добавление графики в формате PNG на страницу

Рис. 26.22. Диалоговое окно Export в Fireworks

Листинг 26.7. Данный код показывает изображение в формате PNG, помещенное в CSS-слое. Этот слой расположен поверх текста

<html> <head> <style type="text/css"> body { color: black; font-size: 14px; ->line-height: 16px; font-family: Times, ->"Times New Roman", Georgia, serif; ->background-color: white; } #overlay { position: absolute; top: ->25px; left: 25px; visibility: visible; } </style> </head> <body> <div id="overlay"> <img src="image1.gif" width="164" ->height="116" border="0" alt="Two ->Circles"> <img src="image1.png" width="164" ->height="116" border="0" alt="Two ->Circles"> </div> <p>Quamquam mihi semper frequens ->conspectus vester multo ->iucundissimus, hic autem locus ad ->agendum amplissimus...</p> </body> </html>

1. <img src="image1.png" width="164" ->height="116" border="0" ->alt="TwoCircles"> Введите тэг <img> и, используя URL созданного вами изображения в формате PNG, определите файл с изображением как источник данных тега (листинг 26.7). Поскольку формат PNG – графический, вы вполне можете использовать тэг <img>. Некоторые браузеры не поддерживают данный формат, поэтому в этот тэг рекомендуется включать атрибут alt.

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

474 Специальные эффекты

Создание часов Если вы разрабатываете Web-сайт, где пользователи должны вводить информацию, связанную со временем, или просто хотите напоминать посетителям о том, как долго они находятся на сайте, вы можете включить в код сайта сценарий, отображающий часы. Часы показывают время, которое берется с компьютера посетителя (рис. 26.23). Данная функция не работает в Netscape 6.

Добавление часов на страницу 1. function countThis(){…} При помощи JavaScript определите функцию countThis(). Она получает информацию о времени из компьютера пользователя, преобразует эти данные из внутреннего формата представления в двенадцатичасовой и записывает их в CSS-слой counter. Эта функция вызывается рекурсивно до тех пор, пока посетитель не покинет страницу (листинг 26.8). 2. #clock{…} Создайте ID и назовите его clock. Он определяет слой, где будет отображаться время. Задайте положение слоя на странице, его высоту и ширину в зависимости от размера шрифта, который вы выбрали в clockStyle (см. шаг 3). 3. .clockStyle{…} Создайте класс clockStyle и укажите в нем стиль отображения часов. Часы могут быть большими или маленькими – это зависит от размера шрифта.

Рис. 26.23. Часы отображают время часового пояса, в котором находится пользователь

Создание часов 475 Листинг 26.8. Данный код рекурсивно записывается в слой, при этом каждую секунду отображаемое время обновляется

<html> <head> <script> function countThis(){ if (!document.layers&&!document.all) ->return; var Digital=new Date(); var hours=Digital.getHours(); var minutes=Digital.getMinutes(); var seconds=Digital.getSeconds(); var dn="am" if (hours>12){ dn="pm" hours=hours-12 } if (hours==0) hours=12; if (minutes<=9) minutes="0"+minutes; if (seconds<=9) seconds="0"+seconds; countDown='<span class= ->"clockStyle">'+hours+':'+minutes+': ->'+seconds+' '+dn+'</span>'; if (document.layers){ document.layers.clock. ->document.write(countDown); document.layers.clock.document.close(); } else if (document.all) ->clock.innerHTML=countDown; setTimeout('countThis()',1000); } </script> <style type="text/css"> #clock {position: absolute; top: 10px; ->left: 10px; height: 20px; width: 200px; ->z-index: 201; } .clockStyle { font: bold 25px ->helvetica,arial; } </style> </head> <body onLoad="countThis()"> <div id="clock"></div> </body> </html>

4. onLoad="countThis();" В тэге <body> вашего документа введите обработчик событий onload, который будет вызывать функцию countThis(). Данный шаг запускает часы. 5. <div id="clock"></div> Создайте слой для часов. Для этого в тэге <div> укажите для атрибута ID значение clock. Описанный способ создания часов сильно отличается от создания кода времени, отсчитываемого сервером, или от гринвичского времени (GMT), о которых рассказывалось в главе 23, раздел «Включения на стороне сервера». Эти часы показывают (и обновляют каждую секунду) местное время, которое берется с компьютера пользователя. Таким образом, если посетитель неправильно установил время на своем компьютере, ваши часы также будут показывать неверное время.

мультимедиа С тех самых пор, как Всемирная паутина стала одним из главных средств массовой информации, ее создатели обещали, что очень скоро можно будет работать с мультимедийными данными так, как будто они находятся на CD-ROM. Время идет, а обещание все еще не выполнено. На сегодняшний день не существует способа передачи мультимедийных данных, способного конкурировать с CR-ROM, даже несмотря на то, что при помощи Macromedia Flash можно добиться впечатляющих эффектов. С увеличением объема передаваемой информации все чаще стали применяться озвучивание и анимация изображений – мультимедиа. Файлы мультимедиа могут существенно замедлять работу приложения, поскольку требуется много времени для перемещения и обработки таких объектов, даже при достаточно высокой скорости некоторых видов Internet-соединений. Кроме того, их применение не приносит таких хороших результатов, как использование телевидения, CD и DVD. Но все-таки мультимедиа может предложить качественно более высокий уровень создания интерактивных Web-приложений. Остается лишь увеличить пропускную способность Internet-соединений.

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

Использование звука в Web 477

Использование звука в Web

Рис. 27.1. Хотя нет ни малейшего видимого намека на то, что эта страница использует звуковое сопровождение, здесь есть аудиофайл, имитирующий звук ветра на другой планете Листинг 27.1. Звуковой файл находится на странице, но управление аудиоэффектом скрыто от пользователей. Требуется несколько тэгов для включения звукового файла на страницу, но только одновременное использование тэгов <object> и <embed> позволяет добиться максимальной совместимости с различными браузерами

<html> <head> <style type="text/css"> body { background-image: ->url(mars1_pathfinder.jpg); } </style> </head> <body> <h1>Welcome to my world...</h1> <object width="100" height="100"> <param name="hidden" value="true"> <param name="loop" value="true"> <param name="autostart" value="true"> <param name="src" ->value="ambiant.wav"> <embed src="ambiant.wav" width= ->"100" height="100" autostart= ->"true" loop="true" hidden="true"> </object> </body> </html>

В браузерах Internet Explorer и Netscape имеются встроенные средства воспроизведения звука, что позволяет использовать на Web-странице различные аудиофайлы. Можно создать звуковое фоновое сопровождение (рис. 27.1), управляемое посетителями. В этом разделе рассказывается, как размещать звуковые файлы на Web-странице, работая одновременно с тэгами <object> и <embed>. Хотя тэг <embed> наиболее универсален при использовании его в любых браузерах, тэг <object> является стандартным и в будущем станет применяться гораздо чаще. Одновременная работа двух этих тэгов позволит добиться максимальной совместимости с любыми версиями браузеров (листинг 27.1).

Добавление звуковых файлов на страницу 1. ambiant.wav Сначала необходимо создать звуковой файл (рис. 27.2). Формат файла может быть любым: WAVE (.wav), MIDI (.mid), AU (.au) или QuickTime (.mov). 2. <object> В тэге <body> вашего HTML-документа определите тэг <object>, открывающий контейнер объекта. 3. <param name="hidden" value="true"> Внутри контейнера определите характеристики объекта, используя тэг <param>. В табл. 27.1 перечислены наиболее важные параметры и переменные для создания звука.

478 Мультимедиа 4. <embed src="ambiant.wav" ->autostart="true" ->loop="true" hidden="true"> В контейнере объекта введите тэг <embed>, определите его атрибуты тем же самым образом, как было сделано на шаге 3. 5. </object> Закройте контейнер объекта.

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

Анимация в формате GIF Когда в детстве у меня появился первый блокнот, первое, что я сделал (был 1977 год), – это постарался создать мультфильм о сражении X-wing и TIE fighter1. Я сначала рисовал одну картинку, затем на следующей странице другую, но уже немного смещенную, чтобы создать впечатление, что она двигается. И так далее на нескольких десятках страниц… Затем, быстро пролистывая страницы, я видел результат своего творчества: истребитель X-wing уничтожал TIE fighter.

Истребители из фильма «Звездные войны». – Прим. ред.

Рис. 27.2. Визуальное представление звукового файла в программе редактирования звуковых файлов

Таблица 27.1. Параметры воспроизведения звука Имя Возможные Функция значения src

<url>

Обозначение пути к звуковому файлу

hidden

true, false

Отображение панели управления на экране

loop

true, false

Повтор воспроизведения

autostart

true, false

Воспроизведение с момента загрузки страницы

pluginpage <url>

Путь к модулю расширения для воспроизведения звука

Анимация в формате GIF 479

Рис. 27.3. Диалоговое окно New Document (Создать документ). Убедитесь, что установлено разрешение 72dpi

Формат GIF (Graphic Interchange Format – формат обмена графикой) позволяет получать аналогичный тип анимации. Хотя средства, инструменты и метод ее создания радикально изменился с 1977 года, но идея, лежащая в основе, осталась той же. Вы создаете изображение в одном слое, затем еще одно – в следующем, но уже с небольшими отличиями, и т.д. Когда одно изображение быстро сменяется другим, создается ощущение, что объект движется. Существует множество различных инструментов для создания анимации в формате GIF. Наиболее удобные встроенные средства имеются в Adobe ImageReady и Macromedia Fireworks.

Создание GIF-анимации в Macromedia Fireworks

Рис. 27.4. При выборе типа изображения укажите опцию Animated GIF

Рис. 27.5. Первый кадр создаваемой анимации: мяч находится внизу

1. Откройте новый документ необходимого размера с разрешением 72dpi (рис. 27.3). Как и при создании любой графики, большой объект увеличивает размер файла, следовательно, возрастает время загрузки. 2. В палитре Optimize (Оптимизировать) выберите опцию Animated GIF (Анимированный GIF) из выпадающего меню (рис. 27.4). 3. В первом кадре создайте изображение (рис. 27.5). 4. Создайте остальные кадры, затем поместите в каждый кадр то же изображение, скопировав его из первого кадра (рис. 27.6). Используя палитру Frame (Кадр), выберите циклический или однократный показ анимационного ролика. 5. Затем выберите пункты File ⇒ Export (Файл ⇒ Экспортировать). Откроется диалоговое окно Export (Экспорт).

480 Мультимедиа 6. Введите имя изображения (убедитесь, что используется расширение .gif), выберите папку, в которой оно будет храниться, и нажмите кнопку Save (Сохранить).

Создание GIF-анимации в ImageReady 1. Создайте новый документ необходимого размера с разрешением 72dpi (рис. 27.7). Как и при создании любой графики, большой объект увеличивает размер файла, следовательно, возрастает время загрузки. 2. В первом кадре создайте изображение (рис. 27.8). 3. Создайте остальные кадры, затем поместите в каждый кадр то же изображение, скопировав его из первого кадра (рис. 27.9). Используя палитру Frame (Кадр), выберите циклический или однократный показ анимационного ролика.

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

Рис. 27.7. Диалоговое окно New Document (Создать документ). Убедитесь, что установлено разрешение 72dpi

Рис. 27.8. Первый кадр создаваемой анимации: мяч находится внизу

Анимация в формате GIF 481 4. Затем выберите пункты File ⇒ Save Optimized (Файл ⇒ Сохранить оптимизированный). Откроется диалоговое окно Save Optimized. 5. Введите имя изображения (убедитесь, что используется расширение .gif), выберите папку, в которой оно будет храниться, и нажмите кнопку Save (Сохранить).

Рис. 27.9. В последнем кадре мяч находится у левого края изображения, обернувшись против часовой стрелки Листинг 27.2. В данном коде ссылка <img> на файл GIF-анимации идентична ссылке <img> на любой файл формата GIF

<html> <body> <img src="redBall.gif" width="50" ->height="50" border="0"> </body> </html>

Добавление анимации на Web-страницу 1. <img src="redBall.gif" width="50" height="50" border="0"> Анимационный файл в формате GIF помещается на страницу так же, как и любое изображение в формате GIF (листинг 27.2 и рис. 27.10).

Если у вас нет ни ImageReady, ни Fireworks, воспользуйтесь средствами для создания GIF-анимации, имеющимися в Internet. Для Mac я рекомендую GIFBuilder, а для Windows – GIF Construction Set (см. приложение 5); эти программы имеются на сайте www.download.com. Помните, что хотя GIF-анимация может занимать то же самое место, что и обычный статический GIF-файл, каждый фрейм GIFанимации является полноценным изображением.

Рис. 27.10. Мяч сначала находится снизу, потом перемещается вправо, наверх, а затем влево. Далее ролик повторяется

482 Мультимедиа

Назначение GIF-анимации Анимация в формате GIF существует не так давно, но уже приобрела популярность и довольно часто встречается на самых разных Web-сайтах. И хотя не всегда такие изображения используются правильно (иногда они создают неприятные глазу помехи), это все же не означает, что GIF-анимация не может сделать страницы более информативными, динамичными и привлекательными для посетителей. Необходимо только тщательно продумать ее применение, чтобы добиться желаемого эффекта. Я разместил несколько примеров GIF-анимации на сайте www.webbedenviroments.com/ dhtml/gifanimate. Там вы сможете просмотреть анимационные ролики. JavaScript-визуализация. Обычно JavaScript служит для того, чтобы отображать изменение кнопок и ссылок, например при наведении на них указателя (рис. 27.11). Этот метод позволяет визуализировать события, происходящие на экране (см. раздел «Свопинг изображений» в главе 25). Так как изображения находятся в формате GIF, вы можете использовать их для создания таких «откликов» на действия посетителей.

Я создал два графических изображения кнопки: одно для неактивного состояния, а другое – для активного. В Netscape 4 возникает ошибка, которая дает о себе знать, если на одной странице присутствует слишком много анимированных GIF-файлов.

Фон. Долгое время формат Animated GIF нельзя было использовать в качестве фона; по крайней мере, ролик не прокручивался. Посетитель видел либо первый, либо последний кадры (это зависело от браузера). Теперь браузеры поддерживают фон в формате Animated GIF (рис. 27.12). Фоновая анимация может отвлекать посетителя от содержания Web-страницы, поэтому, применяя ее, не переусердствуйте. Иллюстрации. Одно из наиболее очевидных применений GIF-анимации – иллюстрировать какой-либо процесс (рис. 27.13). Например, для отображения пошаговых действий, таких как установка в компьютер модуля памяти, крайне трудно использовать статические изображения. При помощи анимации GIF можно более четко иллюстрировать очередность действий.

Рис. 27.11. Данный пример работает как JavaScript-визуализация, но изображение – это файл в формате Animated GIF

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

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

Рис. 27.12. Каждый кадр содержит «визуальный шум», который при использовании его в качестве фона создает иллюзию просмотра телевизора

Рис. 27.13. Здесь дается подробное описание действий, необходимых для установки чипа памяти в слот

484 Мультимедиа

Рис. 27.14. Вот несколько фотографий, которые я сделал в Англии

Flash-анимация Изначально Flash создавался, как альтернатива GIF для анимации в Web. Он предоставляет гораздо больше возможностей, чем сейчас предлагает GIF. И по сей день Flash является великолепным средством для создания несложной анимации. Допустимо использовать его для этих целей вместе с DHTML. На рис. 27.15 показан движущийся логотип, созданный при помощи Flash-анимации. Это солнечное затмение. Луна медленно перемещается по экрану и затем заслоняет Солнце.

Flash-анимация 485

Создание Flash-анимации 1. Создайте изображение в формате Flash или импортируйте векторный графический объект из любой другой программы, выбрав пункты File ⇒ Import in Flash (Файл ⇒ Импортировать в Flash) – рис. 27.16. 2. В диалоговом окне Import (Импортировать) убедитесь, что вы сохранили слои, хранящиеся в созданном вами файле, затем нажмите OK (рис. 27.17). Все слои должны присутствовать на временной шкале (рис. 27.18). Рис. 27.15. Солнечное затмение, созданное при помощи Flash-анимации

Рис. 27.16. Средства для рисования во Flash несколько сложны. Я создал логотип в другой программе, работающей с векторной графикой. Каждый фрейм анимации содержится в отдельном слое

Рис. 27.17. Используя диалоговое окно Import, вы можете сохранять слои, созданные в другой программе (в данном случае FreeHand), при работе над Flash-анимацией

486 Мультимедиа 3. Чтобы определить продолжительность анимации, укажите кадры для каждой точки временной шкалы, затем выберите пункты Insert ⇒ Keyframe (Вставить ⇒ Опорный кадр) – рис. 27.19. На этом шаге устанавливается конечная точка анимации.

4. Чтобы создать анимацию объекта, выберите первый кадр в слое, который содержит нужный объект, и переместите его в начальное положение (рис. 27.20). Если кадр не является текущим опорным, выберите пункты Insert ⇒ Keyframe.

Рис. 27.18. Файл был импортирован из FreeHand с сохранением всех использованных слоев

Flash-анимация 487

Рис. 27.19. Flash-анимация создается из неподвижных кадров, которые при проигрывании в определенной последовательности дают имитацию движения. Во Flash устанавливаются опорные кадры, чтобы определить начальную и конечную точки воспроизведения. На рисунке продолжительность воспроизведения составляет 2,5 с. В качестве опорных определены первые кадры всех трех используемых слоев, а последним является тридцатый кадр (2,4 с)

5. Выделите кадры, находящиеся между начальным и конечным кадрами анимации, затем откройте палитру Frame (Кадр) и выберите пункт Motion (Движение) из ниспадающего меню Tweening (рис. 27.21). Flash вычисляет кратчайшее расстояние между начальным и конечным положениями объекта и дополняет файл недостающими кадрами.

Рис. 27.20. Я хотел, чтобы Луна начинала движение от правого нижнего угла, поэтому начальное положение анимации установлено в первом кадре слоя Луны. Щелкнув по данному слою, я устанавливаю начальное положение Луны

488 Мультимедиа 6. Чтобы просмотреть созданный анимационный ролик, выберите пункты Control ⇒ Play (Управление ⇒ Воспроизведение). Можно сохранить Flash-файл и отредактировать его позже. Чтобы создать на его основе Web-анимацию, необходимо конвертировать файл в формате Flash в формат Shockwave (.swf). 7. Выберите пункты File ⇒ Export Movie (Файл ⇒ Экспортировать анимацию), на экране появится диалоговое окно. Введите имя файла (убедитесь, что используется расширение .swf), затем щелкните по кнопке Save (Сохранить). 8. Нажмите OK. Теперь осталось разместить созданную анимацию на Web-странице.

Добавление Flash-анимации на Web-страницу 1. <object> В тэге <body> HTML-документа укажите тэг <object>, открывающий контейнер объекта (листинг 27.3). 2. <param name="movie" value="logo.swf"> В контейнере определите параметры объекта, используя тэг <pàram>. В табл. 27.2 перечислены параметры и значения, необходимые для настройки анимации. 3. <embed> Поместите в контейнер тэг <embed>, определите его атрибуты (см. шаг 2). 4. </object> Закройте контейнер объекта.

Рис. 27.21. Палитра Frame позволяет задать построение промежуточных изображений. Таким образом вы можете получить недостающие фреймы, которые находятся между двумя опорными

Таблица 27.2. Важные параметры Flash-анимации Имя Возможные атрибута значения

Функция

movie

<url>

Обозначение пути к файлу .swf

quality

best high auto high auto low low

Качество воспроизведения анимации

loop

true false

Повтор анимации

play

true false

Запуск анимации сразу после загрузки страницы

pluginpage

<url>

Обозначение пути к странице, содержащей проигрыватель Flash

Flash-анимация 489 Может показаться, что дублирование тэгов излишне, однако одновременное использование тэгов <object> и <embed> позволяет достичь максимальной совместимости. Большинство браузеров поддерживают тэг <embed>, однако тэг <object> также является стандартизированным и наверняка будет применяться в следующих поколениях браузеров.

Не только файлы GIF-анимации имеют небольшой размер, существуют анимации, подобные GIF, размер которых гораздо меньше (например, 51 Kб для GIF против 5 Kб альтернативного формата). Flash-анимацию можно использовать для тех же целей, что и GIF-анимацию (см. раздел «Назначение GIF-анимации»).

Размеры Flash-анимации автоматически подгоняются под размеры окна браузера. Я установил атрибуты width и height равными 95%, поэтому анимация занимает всю свободную область в окне. Если же задать 100%, окно браузера «обрежет» края анимации.

Листинг 27.3. Файл формата Shockwave (.swf), созданный во Flash, внедряется в Web-страницу. Анимация занимает все свободное место в окне

<html> <head> <style type="text/css"> body { background-color: black } </style> </head> <body> <div align="center"> <object codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/ ->swflash.cab#version=4,0,2,0" width="400" height="400" align="middle" ->name="MoonshadowNM"> <param name="loop" value="false"> <param name="movie" value="logo.swf"> <param name="quality" value="best"> <param name="play" value="true"> <embed src="logo.swf" type="application/x-shockwave-flash" width="400" ->height="400" pluginspage="http://www.macromedia.com/shockwave/download/ ->index.cgi?P1_Prod_Version=ShockwaveFlash" quality="best" play="true" ->align="middle" name="MoonshadowNM" loop="false"> </object> </div> </body> </html>

490 Мультимедиа

Видео в Internet С середины 90-х годов во Всемирной сети появилось видео. Качество и скорость видеороликов с тех пор значительно улучшились, но все же видео в Сети не сравнить со спутниковым или кабельным телевидением. Но Internet обладает рядом достоинств, которых нет ни у какого другого средства связи. Например, не нужно покупать телепередатчик для трансляции своего видеосигнала (рис. 27.22). В Web существуют различные форматы для передачи изображения: RealMedia, Windows Media и MPEG. Далее рассказывается, как использовать формат QuickTime.

Использование видео в формате QuickTime 1. JocelyWeb.mov Сначала необходимо создать видеоролик в формате QuickTime. Существует множество предназначенных для этого программ; я, например, всегда использую iMovie от Apple (рис. 27.23). 2. <object> В тэге <body> HTML-документа укажите тэг <object>, открывающий контейнер объекта (листинг 27.4). 3. <param name="src" value=" ->JocelyWeb.mov"> В контейнере определите параметры объекта, используя тэг <param>. В табл. 27.3 перечислены параметры и значения, применяемые для настройки видео в формате QuickTime. 4. <embed> Напишите в контейнере тэг <embed> и определите его атрибуты (см. шаг 3). 5. </object> Закройте контейнер объекта.

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

Видео в Internet 491 Может показаться, что дублирование тэгов излишне, однако одновременное использование тэгов <object> и <embed> позволяет достичь максимальной совместимости. Большинство браузеров поддерживают тэг <embed>, однако тэг <object> также является стандартизированным и наверняка будет применяться в следующих поколениях браузеров. Можно размещать текст вокруг видео (или любого тэга <object>), определяя свойство float в тэгах <object> и <embed> (см. раздел «Обтекание текстом» в главе 7). Рис. 27.23. Программа iMovie позволяет быстро и легко создавать видео в формате QuickTime для Mac

Листинг 27.4. Видео в формате QuickTime помещается на Web-страницу. Текст располагается справа от видео

<html> <head> <style type="text/css"> body { color: #9c6; font-size: 24px; font-family: "Times New Roman", Georgia, Times, ->serif; background-color: #600; text-align: center } </style> </head> <body> <object style="float: left" width="240" height="180"> <param name="loop" value="true"> <param name="playeveryframe" value="true"> <param name="cache" value="true"> <param name="controller" value="false"> <param name="autoplay" value="true"> <param name="src" value="JocelynWeb.mov"> <embed style="float: left" src="JocelynWeb.mov" width="240" height="180" ->autoplay="true" controller="false" cache="true" type="video/quicktime" ->playeveryframe="true" loop="true"> </object> <p>A Day in the Life...<br> Jocelyn Cranford Teague</p> </body> </html>

492 Мультимедиа В одном файле с видео можно разместить и звуковое сопровождение, но это увеличит размер файла. Если вы хотите больше узнать о создании видео в программе iMovie, прочитайте книгу Скотта Смита (Scott Smith) «Making iMovies».

Таблица 27.3. Важные параметры для настройки видео в формате QuickTime Имя атрибута

Возможные значения

Функция

src

<url>

Обозначение пути к воспроизводимому файлу в формате QuickTime

cache

true, false

Сохранение фильма в кэш-памяти компьютера посетителя для ускорения просмотра

loop

true, false

Повтор воспроизведения

autoplay

true, false

Запуск сразу после загрузки страницы

playeveryframe

true, false

Показ всех кадров без исключения (может замедлять воспроизведение)

volume

от 0 до 100

Управление громкостью

pluginpage

<url>

Обозначение пути к странице, содержащей проигрыватель QuickTime

Добавление Java-апплетов Язык программирования Java позволяет включать небольшие программы (или апплеты) в Web-страницу. В данной книге не рассматривается вопрос о том, как их создавать, но их нетрудно найти в Internet и поместить на свои Web-страницы. Язык Java – великолепное средство, при помощи которого можно добавить на Web-сайт самые разнообразные элементы, например эти замечательные часы (рис. 27.24). Рис. 27.24. Часы, созданные при помощи Java, отсчитывают время

Добавление Java-апплетов 493 Листинг 27.5. Тэг <applet> только показывает наличие Java-апплета в коде. Настоящий Java-апплет находится в импортируемом файле класса

<html> <head> <style type="text/css"> body { color: #9f3; font-weight: bold; ->font-size: 24px; font-family: Arial, ->Helvetica, Geneva, sans-serif; ->background-color: #000; text-align: ->center } </style> </head> <body> <applet code="BillsClock.class" ->width="300" height="300" ->codebase="bills_clock" ->alt="Clock"></applet> <p>Greenwich Mean Time</p> </body> </html>

Добавление Java-апплета на Web-страницу 1. BillsClock.class Сначала создайте апплет или найдите его в Internet. 2. <applet> В тэге вашего HTML-документа напишите тэг <applet> (листинг 27.5) и укажите в нем атрибут code, который содержит URL апплета JavaScript, а также свойства width, height и codebase. Вы можете найти бесплатные Java-апплеты на различных сайтах в Web. Часы, которые изображены на рис. 27.24, я отыскал на сайте Freeware Java (www.freewarejava.com), они созданы Вильямом Джайлом (William Giel). Работа Java-апплета на компьютере посетителя зависит от нескольких факторов, в том числе от уровня поддержки языка Java используемой операционной системой.

Различие между Java и JavaScript Язык программирования Java разработан компанией Sun Microsystems. Он используется для создания программных продуктов, не требующих наличия Web-браузера. Кроме того, Java применяется для написания апплетов (небольших приложений), которые можно включать в Web-страницу. Язык описания сценариев JavaScript разработан Netscape Communications Corp. Он предназначен для управления HTML на Web-странице и создавался для использования в браузерах. Языки сценариев и языки программирования могут выполнять сходные задачи. Языки сценариев, как правило, легче выучить, но возможности их применения существенно ограничены.

отладка кода

28 Если для создания Web-страниц вы используете CSS и DHTML, рано или поздно в программах начнут возникать ошибки. Подобных проблем не избежать, так же как смерти и налогов. Я протестировал код, приведенный в этой книге, в различных браузерах и операционных системах, и надеюсь, что в нем нет ошибок. Но вам придется изменять код, выбирая другие переменные, значения, URL и стили. Вы можете совмещать код из различных примеров или создавать собственные функции. Так или иначе это приведет к возникновению ошибок. В данной главе описаны наиболее общие ошибки, возникающие в кодах, рассказано, как быстрее их обнаружить и устранить. Надеюсь, что смогу удержать вас от попытки разнести монитор, если что-то не будет получаться.

Обнаружение ошибок CSS 495

Обнаружение ошибок CSS Вы аккуратно определяете правила таблицы стилей, запускаете браузер и… не видите никаких результатов! Не беспокойтесь, такое случается с каждым.

Проверка кода Существует множество различных вариантов ответа на вопрос, почему программа не работает. Большинство ошибок, приводящих к тому, что определенные вами CCSправила не функционируют, очень легко вычислить. На рис. 28.1 показаны наиболее часто встречающиеся ошибки.

Чтобы отыскать ошибку в определении CCS-правил, необходимо проверить следующее: все ли определенные вами свойства поддерживаются вашим браузером и операционной системой. Многие свойства не поддерживаются Internet Explorer и/или Netscape, что зависит от используемой операционной системы. В приложении 2 указана совместимость тех или иных свойств с браузером и ОС; нет ли в применяемом вами селекторе опечаток. Если вы не поставили в начале определения класса или ID открывающий знак или знак #, правило не будет работать. Помимо этого, следует избегать подчеркивания в именах ID или классах, так как Netscape 4 не воспринимает подчеркивание;

Рис. 28.1. На рисунке представлено несколько самых распространенных ошибок, возникающих при использовании CSS

496 Отладка кода указанные значения используются с соответствующими свойствами. Применение неверных значений может привести к ошибке или непредсказуемым результатам; не пропустили ли вы точку с запятой. Если вы не поставили в конце определения точку с запятой, CCS-правило не будет работать; все определения были начаты и закончены фигурной скобкой. Чаще всего пропускают именно фигурную скобку; все многострочные тэги комментариев были закрыты. Если тэг не закрыт, то оставшаяся часть CSS-кода рассматривается как комментарий (см. раздел «Комментарии в CSS» в главе 2); HTML-тэги в документе введены правильно. Тэг абзаца всегда закрывается при помощи </p>, только таким образом можно добиться корректной работы CSS (см. раздел «Типы HTML-тэгов» в главе 1); в тэге <style> не должно быть опечаток, если все правила находятся в заголовке. Опечатки в тэге <style> означают, что не установлены какие-либо определения (см. раздел «Добавление CSS на Webстраницу» в главе 2); при ссылке на таблицу стилей или ее импорте указан верный файл. Проверьте заданный вами путь к файлу. Помните, что нельзя включать тэг <style> во внешний CSS-файл (см. раздел «Добавление CSS на Web-сайт» в главе 2); нет повторяющихся или даже противоречащих друг другу правил для одного и того же тэга. Проверьте каскадный порядок (см. раздел «Определение каскадного порядка» в главе 2).

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

Проверка CSS-правила 497

Проверка CSS-правила Хотя и Dreamweaver, и GoLive проверяют CSS-код, W3С создал сайт, который называется CSS Validator. Он позволяет проверять CSS-код на наличие ошибок и соответствие стандартам W3C (рис. 28.2).

Использование CSS Validator от W3C

Рис. 28.2. Домашняя страница сайта CSS Validator

Рис. 28.3. Я использую CSS Validator, чтобы проверить файл в режиме online

Рис. 28.4. Я указал URL внешнего файла CSS, используемого на своем сайте

1. Зайдите на сайт jigsaw.w3.org/css-validator/. 2. Определите метод, при помощи которого вы будете проверять CSS-код (рис. 28.3). Разрешается указать URL (при помощи URI), поместить CSS-код непосредственно в форму (в текстовую область) или загрузить ваши файлы (при помощи ссылки upload). В данном примере используется URL. 3. Введите URL Web-сайта или таблицы стилей (рис. 28.4). Я рекомендую указывать URL таблицы стилей. 4. Задайте способ отображения предупреждений, а также метод проверки (обычно CSS2), затем нажмите кнопку Submit This URI for Validation (Подтвердить проверку по этому URI). Проверка займет несколько секунд. Вы получите полный отчет об ошибках и других возможных проблемах в CSS-коде (рис. 28.5).

498 Отладка кода Любой Web-дизайнер способен показать, что лежит в основе его сайта, поэтому вы вправе использовать значок CSS (рис. 28.6). Однако только те страницы, которые прошли подтверждение при помощи CSS Validator, могут содержать значок Valid CSS (рис. 28.7).

Рис. 28.6. Скажите громко и с гордостью: «Сделано с использованием CSS!»

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

Рис. 28.5. Сообщение об ошибках в CSS

Определение ошибок в коде JavaScript 499

Определение ошибок в коде JavaScript

Рис. 28.8. Наберите javascript: в адресной строке

Хотя JavaScript – не настоящий язык программирования, как, например, Java (см. раздел «Различие между Java и JavaScript» в главе 27), он также требует умения логически мыслить и правильно строить последовательность событий. Вот тут-то и могут возникнуть ошибки. Вам не нужно просматривать код JavaScript и искать в нем ошибки, в отличие от работы с CSS-правилом. Большинство браузеров выдают сообщения, в которых указываются ошибки, допущенные вами при написании кода JavaScript.

Поиск ошибок в коде JavaScript в Netscape 4 напишите javascript: в адресной строке браузера (рис. 28.8). На экране появится окно, в котором отображаются сообщения о любых ошибках в коде JavaScript (рис. 28.9); в Netscape 6 выберите пункт Tasks ⇒ Tools ⇒ JavaScript Console (Задания ⇒ Инструменты ⇒ Консоль JavaScript). Откроется окно, где выводятся сообщения о любых ошибках в коде JavaScript (рис. 28.10); в Internet Explorer сообщения об ошибках в коде JavaScript отображаются по мере их появления, если, конечно, вы не отключили соответствующую опцию (рис. 28.11). После того как ошибка найдена, вы можете исправить ее и проверить код заново.

Рис. 28.9. Экран с сообщениями об ошибках в Netscape 4

Рис. 28.10. Экран с сообщениями об ошибках в Netscape 6

500 Отладка кода

Проверка кода Ниже перечислены наиболее часто встречающиеся ошибки: пропуск фигурной скобки ({}) при написании блоков команд. Если не хватает одной из скобок, появится сообщение об ошибке; пропуск кавычек (''). В данном случае также будет выводиться сообщение об ошибке; ссылки на переменные и объекты, не описанные и не инициализированные в коде. Эта ошибка называется проблемой синхронизации. Если в одном фрейме есть ссылка на несуществующий объект или объект, который еще не загрузился, то при обработке кода возникнет ошибка. Единственным способом найти ее является проверка существования переменной или объекта, на который указывает ссылка. Это можно сделать, поместив в код следующую строку: if(document.nextFrame.value1) ->{document.nextFrame.value1=x}

Рис. 28.11. Сообщение об ошибке в Internet Explorer

Рис. 28.12. Наиболее часто встречающиеся ошибки в JavaScript

Определение ошибок в коде JavaScript 501 использование зарезервированных слов как имен переменных. Некоторые слова, например new, имеют в JavaScript специальное значение и их нельзя применять для обозначения переменной. Такое слово используется только в сочетании с другими словами, например newObject. Список всех зарезервированных слов приведен в приложении 3; одинаковые имена переменных. Опечатка в названии переменной может привести к непредсказуемым результатам. JavaScript также различает и регистр букв, поэтому случайное изменение регистра хотя бы одной буквы провоцирует возникновение ошибок; неправильный порядок и неполный состав передаваемых при вызове функции параметров. Программа на JavaScript в этом случае либо не выполняется, либо ведет себя непредсказуемо. Вы не поверите, но я потратил на отладку кода много часов, пока не обнаружил, что при вызове функции указал неправильный порядок переменных; пропуск круглых скобок, в которые заключаются аргументы при использовании оператора if. Лично я всегда забываю о скобках. Запомните, что структура оператора условия выглядит следующим образом: if(argument)doThis; загрузка другого кода. Иногда программа по каким-то причинам не запускается. Наилучший способ определения такого типа ошибки – размещение маркеров alert в ключевых местах кода. Они покажут, какая часть кода запускается, а какая – нет. Поместите следующую строку в ту часть кода, которая, как предполагается, работает неправильно: alert('Got Here');. Если эта часть кода запускается, должно появиться указанное сообщение;

некорректные значения переменных. Иногда переменным присваиваются иные значения, чем те, которые вы ожидаете. Разместите маркер alert сразу же после той части кода, где переменной присваивается какое-либо другое значение: alert('myVariable='+myVariable); нарушение логической связи. Ну, здесь все ясно. Удостоверьтесь, что все написанное вами имеет логический смысл. Если в коде программы нарушена логическая связь, не ждите желаемого, все будет не так (если вообще будет). Пройдите через весь ваш код так, как если бы вы были компьютером. Проконтролируйте, что всем переменным присваиваются корректные значения и в указанное время вызываются нужные функции.

При написании кода на JavaScript и HTML можно использовать как двойные кавычки (""), так и одинарные (''), но я рекомендую применять одинарные для JavaScript, а двойные – для HTML. Такое разграничение поможет избежать многих проблем. Лично я делаю гораздо меньше ошибок, придерживаясь этого правила. В JavaScript существует общепринятая система обозначения переменных. Вы можете взять несколько слов, обозначающих объект, с которым связана переменная, и записать их подряд. При этом первое слово начинается с маленькой буквы, а следующие – с большой. Так, например, new object превращается в newObject и т.п.

502 Отладка кода

Различия между браузерами HTML, CSS, JavaScript и объектная модель документа (DOM) – все это интерпретированные языки. Каждый браузер может с легкостью распознать их, устанавливая соответствующие правила, которые помогают правильно отображать на экране действия, определяемые кодом. К сожалению, эти правила в той или иной степени варьируются при переходе от браузера к браузеру. Мой друг экспериментировал с CSS на своем Web-сайте. Параметр line-height (отвечающий за высоту строки) он задал как normal во всех правилах (см. главу 4). Эта установка выглядела хорошо при работе в Internet Explorer 5 для Windows, а в версии для Mac строки заголовка почему-то налезали одна на другую. Очевидно, что при создании Internet Explorer для Windows программисты Microsoft решили, что при указании normal браузер должен использовать установленный размер шрифта для каждой конкретной точки страницы. А разработчики Mac-версии при определении параметра normal указали, что высота строки будет соответствовать какому-то значению размера шрифта по умолчанию. Таким образом, в Windows параметр line-height будет иметь то же значение, что и высота текста, например 36 пикселов, а в Mac – установленное по умолчанию, то есть 12 пикселов; в результате строчки частично перекрывают друг друга (рис. 28.13). Я часто сталкиваюсь с такими проблемами. Многие из них на самом деле не являются ошибками в программном обеспечении: дело в небольших отличиях в интерпретации кода HTML, CSS или JavaScript различными браузерами. Это похоже на омонимы в обычном языке, то есть слова,

Рис. 28.13. В Internet Explorer 5 для Windows заголовок выглядит нормально, поскольку параметр высоты строки определен как normal. Однако в версии для Mac строки заголовка частично перекрывают друг друга

Различия между браузерами 503 Брюки или нижнее белье? Когда я был студентом и жил в Лондоне, я часто посещал один из местных пабов (один из шести по пути к квартире) на берегу Темзы. Однажды я разговаривал со своим другом, а рядом стоял пьяный регбист и постоянно что-то проливал на меня. После того как это произошло несколько раз, я встал и начал кричать на него: «Эй, ты что? Хочешь постирать мои брюки?» К сожалению, я забыл, что в Британии, в отличие от Америки, слово «pants» (брюки), которое я сказал, означает нижнее белье. Регбист и его шестеро друзей позже попытались искупать меня в Темзе. Не делайте таких ошибок. Язык может убить!

одинаковые по звучанию и написанию, но различные по смыслу. Подобные разночтения не приводят к катастрофическим последствиям, но нервы потреплют изрядно. Устранить различия в интерпретации строк кода невозможно, только если вы сами создадите какой-нибудь браузер, который все люди мира установят на свои компьютеры. Попробуйте поставить заплатки на «взаимные недопонимания» браузеров: скорректируйте код. Мой друг поступил следующим образом: он выкинул строку line-height: normal из кода, и программа стала работать просто замечательно; подгоните код под операционную систему и/или браузер (см. раздел «CSS и операционная система» в главе 22); создайте страницу каким-нибудь другим способом. Например, в Netscape 6 возникают проблемы с отображением фона и границ во вложенных CSS-слоях. Если необходимы именно вложенные слои, придется отказаться от определенного вами цвета границ; оставьте как есть. Для решения некоторых проблем не стоит прилагать и малейшего усилия. Если проблема незначительная, например в одном браузере после тэга <h1> ставится еще несколько разделителей страницы, а в другом – нет, то не стоит тратить драгоценное время на исправление этого недостатка, займитесь лучше чем-нибудь более интересным.

Будущее динамического Internet Предположим, вы делаете какую-то работу – например, решили построить яхту, о которой долго мечтали. И друг любезно предложил свою помощь. Он измеряет первую доску и говорит, что следующую надо сделать длиной 350,3 см. Вы смотрите на свою рулетку и видите, что по ней все измеряется в дюймах, а не в сантиметрах. Что же делать? Нет ничего проще: надо разделить число сантиметров на 2,54, и вы получите ту же самую длину, но выраженную в дюймах. В результате длина доски составит что-то около 138 дюймов. Обрежьте доску, и дерзайте дальше! Все эти дюймы, ярды, футы являлись стандартами долгое время. Проблема использования такой системы измерения заключается в том, что в одной миле, например, не целое число ярдов и т.п. Зато в метрической системе все просто: в одном метре сто сантиметров (см. раздел «Все из-за несоблюдения стандартов»). Стандарты – великая мысль человечества. Если бы мы не пытались улучшать наши стандарты, то до сих пор перепрыгивали бы с дерева на дерево, пытаясь выяснить, кому достался самый хороший банан.

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

Необходимость стандартов 505

Необходимость стандартов

Рис. 29.1. Web-сайт королевской обсерватории в Гринвиче (The Royal Observatory Greenwich), www.rog.nmm.ac.uk

Нулевой (гринвичский) меридиан – стандарт, помогающий нам определять с высокой точностью наше положение на Земле (рис. 29.1). Этот стандарт может использоваться везде, он универсален и понятен. Он помогает морякам бороздить моря и океаны, а летчикам ориентироваться в воздушном пространстве. С тех пор как был принят данный стандарт, нам открылся мир путешествий, ставший куда более доступным и безопасным. Идея стандартов лежит и в основе Всемирной сети: необходимо обеспечить передачу информации на любой компьютер, в любую точку планеты, и данные должны отображаться так, как это было задумано автором. На самой заре Internet существовал только один вид HTML. Не возникало никаких проблем совместимости: поклонники Сети путешествовали при помощи браузера Mosaic, первого графического браузера, который соответствовал всем существовавшим тогда стандартам. С появлением Netscape возникли и различные дополнения к HTML. Они работали только в браузерах Netscape, и все, кто не был его счастливым обладателем, находились вне игры. Хотя дополнения Netscape игнорировали стандарты W3C, большинство из них, или, по крайней мере, некоторые версии впоследствии стали частью этого самого стандарта. Говорят, что с тех пор Всемирная сеть стала приходить в упадок. Internet – это одно из самых замечательных изобретений человечества, способствующих общению, со времен, когда люди, живущие в одной деревне, собирались

506 Будущее динамического Internet вечером у костра и рассказывали друг другу разные истории. Проблема заключается в том, что если не будет стандартов в такой «мировой деревне», как Web, то не каждый сможет «заглянуть на огонек». При создании Web-сайта допустимо использовать любые оригинальные методики – JavaScript, Flash, QuickTime, VBScript, слои, – но далеко не все посетители увидят результат вашего творчества, и таким образом, вы не пускаете на свой огонек многих одиноких жителей большой «мировой деревни». Я провел 80% всего времени, потраченного на написание программ, пытаясь отладить код таким образом, чтобы он работал как в Internet Explorer, так и в Netscape. И так создаются почти все Web-проекты: большая часть времени отводится на отладку кода, чтобы добиться одинаковой работы приложения в различных браузерах. Если бы производители браузеров придерживались единого стандарта, подобной проблемы бы не возникало. Web-дизайнеру необходимо знать стандарты Всемирной сети, по возможности всегда ими руководствоваться и требовать их соблюдения от разработчиков браузеров. Например, группа The Web Standards Project (www.webstandards.org) занимается установлением стандартов, следит, чтобы все разработчики браузеров придерживались существующих правил, в создании которых они также участвуют (рис. 29.2). Присоединяйтесь!

Рис. 29.2. Сайт компании The Web Standards Project, следящей за соблюдением стандартов в Web

Все из-за несоблюдения стандартов Из-за несоблюдения стандартов часто возникают проблемы. В качестве примера рассмотрим причины потери космического зонда Martian Climat Orbiter. Компания, которая производила зонд, использовала британскую систему мер, в то время как NASA – метрическую (научный стандарт). В результате расстояние, которое, как предполагалось, зонд пройдет до Марса, было рассчитано неточно, и он просто разбился о поверхность планеты. Вот еще один пример: 22 октября 1707 года четыре корабля Королевского флота неправильно определили свое положение и разбились у побережья Сицилии, и все из-за несоблюдения стандартов.

Extensible Markup Language 507

Extensible Markup Language

Рис. 29.3. Сайт W3C, посвященный XML (www.w3.org/XML)

Рис. 29.4. Страница, посвященная XSL (www.w3.org/Style/XSL)

SGML (Standard Generalized Markup Language – стандартный обобщенный язык разметки) – это, можно сказать, дедушка большинства языков разметок, используемых как для печати, так и для Internet. SGML – международный стандарт, применяемый для определения структуры и внешнего вида документа. SGML служил для создания различных типов документов в самых разных областях, например в физике, бухгалтерии, химии и т.д. HTML представляет собой Web-версию этого языка, однако по сравнению с SGML у него есть ряд недостатков. Прежде всего, HTML не позволяет информировать браузер о типе отображаемых данных, кроме как в тэге <meta> (см. главу 24). XML (Extensible Мarkup Language – расширяемый язык разметки) – это другая разновидность SGML (рис. 29.3). В отличие от HTML данный язык позволяет Web-дизайнерам определять не только структуру страницы, но и типы отображаемой информации. Страница, созданная с его помощью, работает подобно базе данных, что значительно упрощает поиск необходимых сведений. Поэтому можно с уверенностью сказать, что XML – это величайшее достижение Web-технологий со времен появления HTML. Язык XSL (Extensible Style Language – расширяемый язык стилей) – рис. 29.4, конвертирует документы XML в другие типы документов (например, в HTML для использования в Web). Однако XSL не является аналогом CSS.

Принципы работы XML Язык XML во многом схож с HTML и CSS. Он состоит из тэгов, которые определяют, каким образом браузер должен работать

508 Будущее динамического Internet с документом. Автор документа пишет тэги, чтобы разбить документ на области. Затем создается файл определения типов документа (DTD-файл), в котором указывается, какие имена используются для тэгов, какой тип информации содержит каждый введенный автором тэг, в каком контексте применяется тот или иной тэг. Предположим, у вас есть список: Doctor, John Smith, UNIT. На первый взгляд кажется, что каждый элемент списка имеет определенное значение: Doctor – доктор, ученая степень, John Smith – Джон Смит, имя и фамилия. Но что же такое UNIT? Кроме того, первые два элемента списка могут использоваться и в совершенно другом смысле. Для компьютера эти слова – всего лишь набор букв и цифр, не имеющий никакого значения. Но с помощью XML допустимо определить каждый из этих элементов и указать документу, где находится соответствующий DTD-файл (листинг 29.1). Затем необходимо создать сам DTD-файл (листинг 29.2). Вы также можете задать способы отображения каждого тэга. С точки зрения графики и дизайна XML кажется бесполезным. Конечно, разрешается определять собственные тэги, однако при помощи CSS сделать это намного проще. Но XML был разработан как основа для создания стандартов графики и мультимедиа, находящихся на стадии предложения. Один из этих стандартов – SVG, который мы обсудим позже в этой главе (см. раздел «Масштабируемая векторная графика»). На сегодняшний день XML требует отдельной программы синтаксического анализа (небольшого приложения, которое помогает браузеру определить вид обработки кода XML). Подобные программы были включены в Internet Explorer 4/5, но их не было в составе Netscape 4.

Листинг 29.1. В DTD указано, что identity состоит из name и organization; name – из real и alias, а real и alias, organization являются буквенными символами и цифрами

<!ELEMENT identity (name,organization) > <!ELEMENT name (real,alias) > <!ELEMENT real (#PCDATA) > <!ELEMENT alias(#PCDATA) >

Листинг 29.2. Данный код связывает идентификатор человека с данными real, name, alias и organization. Здесь также содержится ссылка на DTD-файл identity.dtd, который используется для определения тэгов

<?xml version="1.0" ?> <!DOCTYPE identity SYSTEM "identity.dtd"> <identity> <name> <real>Doctor</real> <alias>John Smith</alias> </name> <organization>UNIT</organization> </identity>

XML, CSS и DOM В главе 11 рассказывалось, как получить доступ к объектной модели документа (DOM). Далее было показано, как при помощи DOM изменять HTML-объекты на Web-странице. Но DОМ применима не только к HTML, ее удобно использовать на страницах, созданных при помощи XML. То же самое можно сказать и о работе CSS с XML. В действительности CSS является неотъемлемой частью этого языка разметки.

Extensible Hypertext Markup Language 509

Extensible Hypertext Markup Language

Рис. 29.5. Сайт, посвященный XHTML (www.w3.org/TR/xtml1/)

С помощью языков XML и XSL в Web можно добиться очень неплохих результатов, например сделать содержимое страниц независимым от разметки. Вместо того чтобы тщательно прорабатывать все детали на каждой странице, можно управлять разметкой сайта из одного файла. Но как заставить Web-дизайнеров отказаться от привычного HTML и перейти к более сложному XML? Ответ прост: применить XHTML (Extensible Hypertext Markup Language – расширяемый язык разметки гипертекста). XHTML представляет собой гибрид недавно усовершенствованного стандарта HTML 4.01 (www.w3.org/TR/html40/) и XML. Многие надеются, что XHTML – самый легкий путь перехода от HTML к XML (рис. 29.5). XHTML использует определения типов документа (DTD), характерные для XMS, и те же тэги, что и HTML DTD. И наконец, на Web-страницах, созданных при помощи XHTML, можно размещать и XML-код, причем браузер будет прекрасно понимать его даже в том случае, если не поддерживает XML.

Обоснование перехода от HTML к XML Если стандарты настолько схожи, зачем переходить от HTML к XML? Вот доводы, приводимые W3C:

буква «X» в XHTML означает extensible (расширяемый). То есть новые возможности легче добавлять в XHTML, нежели в HTML. Принцип работы тэгов определяется в DTD-файле, а не самим браузером, поэтому XHTML

510 Будущее динамического Internet обладает более высокой степенью совместимости. Следовательно, XHTML может быть улучшены в следующих поколениях браузеров; W3C заявляет, что уже к нынешнему году 75% трафика в Web будет приходиться на новые типы платформ, такие как телевизионные Internet-приставки, Palm Pilot, и телефоны. Если сложно создать HTML для нескольких браузеров, представьте, что будет, если надо создать такой код для десятков различных устройств. Определенно требуется стандартизованный язык. Кроме того, так как данные устройства имеют небольшие габариты, необходимо использовать как можно более компактный код, и в этом случае идеальным выходом является XHTML. Консорциум W3C надеется, что если Webразработчики обратятся к XHTML, то они начнут использовать все достоинства XML, не отказываясь от столь любимого HTML. На самом деле, если вы знаете HTML, можно сказать, что вы знаете и XHTML. Главное, что следует помнить, – каким образом можно (или нельзя) задействовать тэги. В XHTML существует гораздо больше ограничений, чем в HTML, однако все эти ограничения идут на пользу, они помогают создавать более эффективный и легкий для понимания код.

Преобразование HTML в XHTML Итак, в чем же различие между HTML и XHTML? XHTML более строг, чем HTML. Он не дает нарушать правила написания кода или обходиться без них. XHTML поддерживает те же тэги, что и HTML, так что перевести ваши страницы с HTML на XHTML будет довольно легко. Достаточно помнить несколько простых правил: не использовать перекрывающиеся тэги. Для многих браузеров не существенен порядок открытия и закрытия тэгов. Следующий код всегда работает правильно: <p> Bad <b>Nesting</p></b> Однако в XTHML верный порядок расположения открывающих и закрывающих тэгов будет таким: <p> Bad <b>Nesting</b></p> тэги и их атрибуты печатаются строчными буквами. XML является языком, чувствительным к регистру символов. <li> и <LI> – это различные тэги. Записывайте все тэги и атрибуты строчными символами; всегда используйте закрывающий тэг. Очень часто разработчики Web-страниц ставят единственный тэг <p> для того, чтобы разделить абзацы. В XHTML вы обязательно должны применить закрывающий тэг, например: <p>Your text</p>

Преобразование HTML в XHTML 511 ставьте пробел и слэш в пустых тэгах. Предыдущее правило необязательно для тэгов, которые не содержат значимой части, то есть пустых (например, <br> и <li>). Для корректной обработки таких тэгов браузером необязательно ставить закрывающий тэг, достаточно просто дополнить открывающий пробелом и слэшем – сделать его «самозакрытым», например: <br /> не создавайте вложенных ссылок. Следующий код работать не будет: <a href="this.html>This<a href= ->"that.html">That</a></a> Правильный порядок:

<a href="this.html>This</a><a href= ->"that.html">That</a> указывайте как атрибут id, так и name. Если вы планируете искать и изменять элементы на экране, задавайте них атрибуты id и name, например: <div id="object1" name="object1"> … </div> заключайте значения атрибутов в кавычки. Если какой-нибудь тэг имеет атрибуты, значения последних должны быть заключены в кавычки, например: Неправильно:

<imgsrc=myImage.gif/> Правильно: <imgsrc="myImage.gif"/>

кодируйте знак амперсанда (&) в значениях атрибутов специальным выражением. Амперсанд (&) должен быть заменен специальным выражением – &amp;. Неправильно: <img src="bill&ted.gif" /> Правильно: <img src="bill&amp;ted.gif" />

не используйте HTML-комментарий в тэгах-контейнерах сценариев и стилей. Один из приемов, описанных в данной книге, – постановка HTML-комментария сразу после тэга <script> и <style>. Это необходимо, чтобы спрятать код от устаревших браузеров, не поддерживающих его. В XHTML так делать нельзя. Неправильно: <style> <!– p{font: times;} // –> </style> Правильно: <style> p{font: times;} </style>

Скорее всего, будущее Web – за XHTML и CSS. Однако, пока производители браузеров медленно адаптируют свои творения к новым стандартам, консорциум W3C сделал XHTML обратно совместимым с HTML.

512 Будущее динамического Internet

Synchronized Multimedia Integration Language SMIL (Synchronized Multimedia Integration Language – язык интеграции синхронизированной мультимедиа) предназначен для создания мультимедиа в Web (рис. 29.6). Подобно тому, как HTML работает с текстом и изображениями, SMIL использует тэги для определения файлов мультимедиа – аудио, видео, текст, статическая графика (извините, пока не умеем передавать запахи) – и их положения на странице. Что еще более важно, SMIL позволяет описывать поведение объектов мультимедиа при помощи тех же самых инструментов, что Dreamweaver и GoLive (см. главы 18 и 19) для создания DHTML-анимации. Язык SMIL основан на XML – языке, разработанном на базе HTML. Но не надо думать, что SMIL – это HTML либо какое-то его дополнение или расширение. SMIL и HTML представляют собой два совершенно разных языка, в них используются различные тэги. В лучшем случае HTML и SMIL можно считать двоюродными братьями. HTML прекрасно подходит для работы с текстом и статическими объектами, однако он не предназначен для создания мультимедиа, даже если вы применяете и DHTML, и JavaScript. Здесь необходим именно SMIL, предоставляющий систему описательных тэгов специально для работы с таким типом данных, включая разметку, формат, хронологию и т.д. SMIL позволяет разработчикам управлять разметкой мультимедиа в документе при помощи CSS. Как и HTML, CSS определяет отдельные элементы на странице, которые при необходимости можно позиционировать, перемещать, отображать, скрывать и т.п. Это очень похоже на работу JavaScript и DHTML.

Рис. 29.6. Страница, посвященная SMIL (www.w3.org/AudioVideo)

Главное отличие состоит в способе создания кода SMIL. В CSS все размещалось в тэге <style>, а в SMIL для этих целей служит тэг <layout>. Он определяет отдельные области экрана, для управления которыми используется SMIL. Помимо перемещения объектов может потребоваться синхронизировать отдельные элементы на временной шкале. Если вам когда-либо доводилось работать с программами для создания мультимедиа, такими как Macromedia Director и Macromedia Flash, либо у вас есть опыт работы на телевидении или в области производства фильмов, вы, наверное, знаете принципы использования временной шкалы. Она определяет, каким образом будет осуществляться совместная работа различных мультимедийных компонентов. В SMIL включены несколько тэгов, которые позволяют Web-дизайнерам указывать, когда, где и как будет отображаться мультимедиа. Вы можете устанавливать время запуска или остановки клипов мультимедиа циклического запуска, а также их циклическое воспроизведение. Вы можете синхронизировать запуск нескольких клипов при помощи тэгов, подобных тэгам HTML.

Масштабируемая векторная графика 513 Нет необходимости пользоваться сложными языками (например, JavaScript) или дорогим программным обеспечением. Другое препятствие на пути высококачественного мультимедиа в Web – пропускная способность сетей. В то время как посетитель, использующий соединение через линии T1, не испытывает трудностей с загрузкой видео в формате QuickTime, посетитель, имеющий модем 14,4 Кбит/с, просто не сможет открыть страницу. Рис. 29.7. Страница, посвященная SVG (www.w3.org/graphics/SVG)

Каково же будущее SMIL? Консорциум W3C рекомендует этот язык как стандарт, и, вероятнее всего, он будет принят всеми участниками World Wide Web.

Масштабируемая векторная графика

Рис. 29.8. Код SVG, сгенерированный в Adobe GoLive

Рис. 29.9. Результат выполнения кода, показанного на рис. 29.8. Предварительный просмотр в GoLive

Масштабируемая векторная графика (Scalable Vector Graphics – SVG) представляет собой один из методов создания векторной графики в Web (рис. 29.7). SVG позволяет избежать утомительного рисования каждой точки изображения, он описывает сразу две точки, а затем соединяет их отрезком или частью кривой (с этим вы уже встречались во Flash). В отличие от Flash, который использует редактор для создания файлов изображений и скрывает большую часть кода, SVG работает с разновидностью XML (рис. 29.8). Более важным является то, что SVG-графика описывается при помощи DOM и, таким образом, обладает всеми возможностями DHTML, рассмотренными в этой книге (рис. 29.9). Формат SVG рекомендован только W3C, и хотя Adobe предлагает SVG-расширение для браузеров, пока нет ни одного браузера, поддерживающего данный формат. В принципе SMIL и SVG готовы нанести удар по Flash.

514 Будущее динамического Internet

CSS третьего уровня В настоящее время специалисты W3C работают над следующей версией каскадной таблицы стилей CSS – CSS3 (рис. 29.10). В этой версии будут устранены многие недочеты CSS2 (www.w3.org/TR/css3-roadmap). Данный стандарт находится все еще на стадии предложения, но уже сейчас многие новшества CSS3 позволяют добиваться поразительных результатов: колонки. Наиболее впечатляющая возможность CSS3 – создание гибких колонок для разметки страницы. Как упоминалось в главе 21, CSS не в состоянии заменить таблицы для разметки страницы на несколько колонок. Но в CSS3 эта недоработка будет исправлена; шрифты Web. Хотя в CSS2 существует возможность загружать шрифты (см. раздел «Загрузка шрифтов» в главе 3), ее пока достаточно трудно использовать. W3C намерен устранить данную проблему; профили цветов. Общая проблема всех графических объектов – различная яркость отображения на компьютерах разных типов. CSS3 позволит разработчикам Web-приложений решить эту задачу, создавая описания цветов; пользовательский интерфейс. В CSS3 появится больше указателей, состояний форм, способов настройки цветовой гаммы посетителем (см. раздел «Использование стилей посетителя» в главе 3); поведение. CSS3 позволяет применять CSS не только для определения стилей отображения, но также и для указания поведения объектов. Это значительно упрощает динамическое управление сайтом.

Рис. 29.10. Будущее Web-дизайна: CSS третьего уровня

Стандарты теряют всякий смысл, если их не поддерживают браузеры. Помните, что у вас есть право голоса. На сайте The Web Standards Project (www.webstandards.org) вы найдете более детальную информацию о том, как можно помочь в нелегкой борьбе за выпуск программного обеспечения, поддерживающего существующие стандарты.

○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○

○

приложения ПРИЛОЖЕНИЕ 1 ПРИЛОЖЕНИЕ 2 ПРИЛОЖЕНИЕ 3 ПРИЛОЖЕНИЕ 4 ПРИЛОЖЕНИЕ 5 ПРИЛОЖЕНИЕ 6

◆ ◆ ◆ ◆ ◆ ◆

Браузеры, поддерживающие DHTML и CSS ... 516 Краткая справка о CSS ................................. 520 Краткая справка о DHTML ............................ 529 Шрифты, поддерживаемые браузером ....... 534 Дополнительные инструменты .................... 539 Дополнительные источники ......................... 545

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

Если браузер совместим с DHTML и CSS, он должен поддерживать и следующие технологии: HTML. На HTML основан DHTML. Предпочтительна поддержка последней версии HTML 4 (версии 4.01); JavaScript. Если считать HTML основой, фундаментом DHTML, то JavaScript можно назвать его угловым камнем; CSS первого уровня. CSS поддерживает необходимые функции контроля формата Web-страницы, а также дает возможность определять элементы в качестве объектов; CSS-позиционирование или CSS второго уровня. Для перемещения и изменения объектов браузер должен поддерживать создание элементов управления, при этом следует применять либо более ранний стандарт CSS-P, который затем вошел в CSS2, либо сам CSS2; DOM. Браузер должен поддерживать объектную модель документа. Предпочтительно использование стандартной версии W3C (см. главу 11). В этом приложении рассматриваются браузеры, которые удовлетворяют или будут удовлетворять перечисленным требованиям.

Браузеры, поддерживающие DHTML и CSS 517

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

Internet Explorer 4 За последние два года применение Internet Explorer 4 значительно сократилось, так как большинство пользователей перешли на Internet Explorer 5 и 6, которые больше соответствуют стандартам. 4-я версия была первым конкурентоспособным Web-браузером от компании Microsoft. Несмотря на дебаты по поводу включения браузера в операционную систему Windows, Internet Explorer – именно тот браузер, который отнял у Netscape часть аудитории. В Internet Explorer 4 реализованы многие стандарты W3C. Хотя браузер не был идеальным, он стал первым, где DHTML пытались построить на базе этих стандартов. Internet Explorer 4 поддерживает HTML, CSS1 (частично), CSS-P (частично), JavaScript и объектную модель документа (DOM) Internet Explorer.

Internet Explorer (Windows) Internet Explorer 5 был включен в операционную систему Windows и теперь занимает главенствующее положение на рынке Web-браузеров.

Есть некоторое сомнение, что 5-я версия по сравнению с 4-й была большим шагом в сторону принятия стандартов. Но реализация CSS и DOM в Internet Explorer 5 представлена на более качественном уровне. Таким образом, включив браузер в операционную систему, компания Microsoft разделила пользователей Internet Explorer для Windows и пользователей других браузеров, даже Internet Explorer для Macintosh (о нем будет рассказано далее). В действительности Microsoft не совсем честно реализовала некоторые из наиболее важных стандартов, таких как W3C DOM и HTML 4, чем вызвала гнев большинства разработчиков, например команды проекта Web-стандартов (Web Standards Project – www.webstandards.org/wfw/ieah.html). Хотя Internet Explorer 5.5 (а позже и версии 6) улучшил реализацию стандартов по сравнению с 5-й версией, он основан на таких технологиях, как VBScript и ActiveX. У Internet Explorer большое будущее. Internet Explorer 5 для Windows поддерживает HTML 4 (частично), CSS1 (частично), CSS2 (частично), XML (частично), JavaScript, PNG (частично) и W3C DOM (частично).

Internet Explorer 5 (Macintosh) Несмотря на то что Internet Explorer 5 для Windows и для Macintosh были разработаны Microsoft, у них не так много общего. Обе версии – Web-браузеры, и обе называются Microsoft Internet Explorer 5. Но на этом их сходство заканчивается. Internet Explorer 5 для Macintosh отличается от версии для Windows так же кардинально, как MacOS отличается от Windows.

518 Приложение 1 Первое, что вы видите при запуске Internet Explorer, – указатель на то, что интерфейс соответствует Macintosh. Браузер не только имеет новый графический пользовательский интерфейс, но и обладает всеми преимуществами Macintosh. В отличие от более ранних версий, которые были всего лишь перенесены с платформы Windows, Internet Explorer 5 полностью переписан для Macintosh. С точки зрения разработчика, Internet Explorer 5 для Macintosh является важным шагом вперед не потому, что в нем представлены новые технологии (как в Netscape появились фреймы и JavaScript), а потому, что он полностью соответствует требованиям системы. Internet Explorer 5 для Macintosh поддерживает HTML 4, CSS1, CSS2 (частично), XML, JavaScript, PNG и W3C DOM.

Netscape Navigator Хотя компания, создавшая этот замечательный, инновационный программный продукт, была поглощена компанией America Online, Netscape всегда останется в памяти пользователей, как и браузер, который сделал Сеть настолько популярной. 3-я версия Web-браузера уже была переименована в Navigator. Но я называю его просто Netscape – по имени создавшей его компании.

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

не существовали, либо только начинали появляться. Netscape 4 внес в создание сайтов свою «изюминку» – DHTML, основанный на тэге <layer> (см. главу 16). Этот метод так и не стал популярным, и впоследствии Netscape отдала предпочтение развитию стандартов, устанавливаемых W3C. Netscape 4 поддерживает HTML, CSS1 (частично), CSS-P (частично), JavaScript и Netscape Layers DOM.

Netscape 6 Netscape 6 (именно 6, а не 5) был создан на базе движка Gecko, разработанного в соответствии с последними стандартами Web. Для Web-дизайнеров, мучительно пытающихся создать сайты для несовместимых Web-браузеров, это явилось настоящей находкой. Gecko – замечательный инструмент, компактный, удивительно быстрый и наиболее соответствующий стандартам. Его создатели должны гордиться своей работой. Но интерфейс браузера переполнен различными меню, кнопками и опциями, расположенными без четкой иерархии. Многие меню в нижней части экрана не более чем ссылки на Web-страницы Netscape. Я не смог найти способ изменить эти ссылки для удовлетворения потребностей пользователей. Хотя возможность создания собственного бокового меню – шаг в правильном направлении, она, кажется, существует исключительно для того, чтобы пользователи заходили на сайты Netscape и ее компаньонов, а не для обеспечения удобного и настраиваемого интерфейса.

Браузеры, поддерживающие DHTML и CSS 519 Netscape 6 поддерживает HTML 4, CSS1, CSS2 (частично), XML, JavaScript, PNG (частично) и W3C DOM.

Opera 5 поддерживает HTML 4, CSS1, CSS2 (частично), JavaScaipt, XML и W3C DOM (частично).

iCab (Mac)

Другие браузеры Верите вы или нет, но существуют и другие браузеры, кроме Netscape и Internet Explorer. Хотя при построении DHTML-составляющей Web-сайта в первую очередь стоит подумать именно об этих браузерах и вспомнить о двух конкурентах: Opera (Mac/Windows) и iCab (Mac).

Opera (Mac/Windows) Компания Opera Software (www.opera.com) поставила перед собой цель – создать браузер, полностью соответствующий стандартам. В 5-й версии компания Opera наиболее близко подошла в своей цели. Хотя и этот браузер несовершенен, Opera считает, что стандарты W3C являются не просто пожеланиями, а руководством к действию. К тому же браузер Opera достаточно компактен (нужно загрузить всего лишь 2 Мб без Java), страницы загружаются поразительно быстро, уровень безопасности высок. Хотя изначально Opera предназначался только для Windows, компания добавила поддержку некоторых других платформ (включая EPOC, Linux и MacOS), он также может работать на любой версии BeOS. На сегодняшний день версия для Macintosh все еще тестируется; кажется, некоторые стандарты либо пропущены, либо не полностью реализованы.

Браузер iCab (www.icab.de) так же, как и Opera, компактен: загружается всего лишь 900 Kб. Он обладает хорошей скоростью, страницы появляются сразу после щелчка по ссылке. У iCab гораздо больше опций, чем у всех браузеров, которые я когда-либо видел. Его создатели четко придерживались стандартов, дословно следуя рекомендациям W3C. Он предоставляет пользователю самые разнообразные возможности (или, по крайней мере, будет предоставлять, когда закончится его тестирование). На сегодняшний день браузер находится на стадии разработки, кроме того, ему не хватает определенных ключевых возможностей, таких как CSS и полная поддержка JavaScript. Какая же крупная корпорация трудится над созданием этого великолепного браузера? На самом деле iCab придумал немецкий программист Александр Клаус (Alexander Clauss) и несколько его друзей. Хотя браузер полностью соответствует стандартам W3C, скорее всего, вы не будете ежедневно пользоваться бета-версией iCab, так как она не полностью поддерживает JavaScript, CSS или DHTML. Но в будущем планируется включить в браузер не только эти возможности, но и многие другие. iCab поддерживает HTML 4 и JavaScript (частично), в следующих версиях предполагается добавить CSS1 и CSS2.

Краткая справка о CSS

2 В главах 3–9 говорится о свойствах, которые можно использовать с CSS. В данном приложении они представлены более четко. Также предлагается информация о связях свойств и HTML-тэгах, по отношению к которым это свойство может быть применено: табл. П2.1 описывает управление шрифтом (см. главу 3); табл. П2.2 представляет форматирование текста (см. главу 4); табл. П2.3 содержит сведения об управлении списком и курсором (см. главу 5); табл. П2.4 описывает управление цветом и фоном (см. главу 6); табл. П2.5 содержит информацию об управлении разметкой страницы (см. главу 7); табл. П2.6 описывает регулирование положения (см. главу 8); табл. П2.7 представляет управление видимостью (см. главу 9); табл. П2.8 содержит описание псевдоэлементов и псевдоклассов (см. главы 24 и 26);

Краткая справка о CSS 521 Легенда для Macintosh и Windows; ни для одной, ни для другой системы; W только для Windows; M только для Macintosh; P некоторые проблемы; Все свойство можно применять ко всем тэгам HTML; Разметка свойство может быть использовано только для тэгов, относящихся к разметке страницы; Линейный свойство можно применить только к inline-тэгам; Выделение полужирным показывает, каково значение свойства по умолчанию.

Краткая справка Далее помещена информация о том, как определенное свойство можно применить к различным тэгам HTML. Каждое свойство описывается таким образом: с каким тэгом его используют, связано ли оно с дочерними элементами, какими браузерами и операционными системами оно поддерживается. Свойства, которые помечены значком P в столбце, относящемся к браузеру, частично реализованы в одной или обеих операционных системах. Я бы не рекомендовал их использовать. Не забывайте, что у каждого браузера есть несколько версий, причем порядковый номер у них может совпадать. Например, не существует Netscape 4, а есть несколько версий (4.06, 4.5 и 4.7), не сильно отличающихся друг от друга. В этом приложении представлена только проверенная информация, но если вы все-таки захотите протестировать CSS-возможности своего браузера, попробуйте применить специально предназначенный для этого инструмент от W3C, который вы найдете на сайте http:// www.w3.org/Style/CSS/Test/.

522 Приложение 2 Таблица П2.1. Управление шрифтом Наименование

Значение

Применимо к

Унаследованное

font-family

<family-name> serif sans-serif cursive fantasy monospace

Все

Да

font-style

normal italic oblique

Все

Да

font-variant

normal small-caps

Все

Да

font-weight

normal bold bolder lighter 100-900*

Все

Да

<length> <percentage> smaller larger XX-small X-small small medium large X-large XX-large

Все

<font-style> <font-variant> <font-weight> <font-size>/ <lineheight> <font-family>

Все

font-size

font

IE4 IE5

M M

Да P P P P P P P P P Да

* Требует наличия на компьютере пользователя специальных шрифтов.

P P

Краткая справка о CSS 523 Таблица П2.2. Форматирование текста Наименование

Значение

Применимо к

Унаследованное

word-spacing

normal <length>

Все

Да

letter-spacing

normal <length>

Все

Да

vertical-align

baseline <percentage> sub super top text-top middle bottom text-bottom

Линейный

Нет

normal <number> <length> <percentage>

Все

text-decoration

none underline overline line-though blink

Все

Нет

text-transform

none capitalize uppercase lowrcase

Все

Да

text-aling

left right center justify

Разметка

Да

text-indent

Разметка

Да

white-space

normal pre nowrap

Разметка

Да

line-height

IE4 IE5 М М

М М

М*

М** М** М** М** М** Да P P

* Только для MacOS, в Windows недоступно. ** IE5.5 для Windows.

** * **

524 Приложение 2 Таблица П2.3. Управление списком и курсором Наименование

Значение

Применимо к

Унаследованное

list-style-tipe

disk circle square decimal lower-roman upper-roman lower-alpha upper-alpha

Все*

Да

list-style-image

none url(<url>)

Все*

Да

Все*

Да

<list-style-type> Все* <list-style->position> <list-style-image> auto Все crosshair hand** pointer move n-resize ne-resize e-resize se-resize s-resize sw-resize w-resize nw-resize text wait help

Да

list-style-position outside inside list-style

cursor

IE4 IE5

Да

* В Netscape и IE относится лишь к тэгу <list>. По стандарту CSS может применяться только к тэгу, имеющему в своем описании атрибут display со значением _list_item (display: _list_item). ** Только в IE. Аналогично значению pointer.

Краткая справка о CSS 525 Таблица П2.4. Управление цветом и фоном Наименование

Значение

Применимо к

Унаследованное

color

<color>

Все

Да

background-color

transparent <color>

Все

Нет

background-image

none url (<url>)

Все

Нет

background-repeat

repeat repeat-x repeat-y no-repeat

Все

Нет

backgroundattachment

scroll fixed

Все

Нет

background-position

<percentage> <length> top center bottom left center right

Разметка

Нет

background

<background->color> <background->image> <background->repeat> <background->attachment> <background->position>

Все

Нет

P P

IE4 IE5

526 Приложение 2 Таблица П2.5. Управление разметкой страницы Наименование

Применимо к

Унаследованное

margin-top, -right, <length> -bottom, -left <percentage> auto margin <length> <percentage> auto

Значение

Все

Нет

P P P

IE4 IE5 P P P

Все

Нет

padding-top, -right <length> -bottom, -left <percentage>

Все

Нет

P P

padding

Все

Нет

P P

border-color

<color>

Все

Нет

border-style

none dotted dashed solid double groove ridge inset outset

Все

Нет М М

margin-top, -right, medium -bottom, -left <length> thin thick

Все

Нет

P P P P

medium <length> thin thick

Все

Нет

P P P P

margin-top, -right, <border-width> -bottom, -left <border-style> <color>

Все

Нет

P P P

border

<border-width> <border-style> <öâåò>

Все

Нет

P P

P P P

width

auto <length> <percentage>

Разметка

Нет

P P P

height

auto <length>

Разметка

Нет

float

none left right

Все

Нет

border-width

P P P P

P P

* *

Краткая справка о CSS 527 Таблица П2.5. Управление разметкой страницы (окончание) Наименование

Значение

Применимо к

Унаследованное

clear

none left right both

Все

Нет

block inline list-item none

Все

display

P P Нет

IE4 IE5 М М

P W М

* Только IE5.5 для Windows.

Таблица П2.6. Регулирование размещения Наименование

Значение

Применимо к

Унаследованное

position

static absolute relative fixed

Все

Нет

left

auto <length> <percentage>

Все**

Нет

top

auto <length> <percentage>

Все**

Нет

bottom

auto <length> <percentage>

Все**

Нет

right

auto <length> <percentage>

Все**

Нет

z-index

auto number

Все

Нет

IE4 IE5

* Только в MacOS, в Windows недоступно. ** Атрибут position должен иметь значение absolute или relative.

528 Приложение 2 Таблица П2.7. Управление видимостью Наименование

Значение

Применимо к

Унаследованное

clip

auto <shape>

Все*

Нет

overflow

visible hidden scroll auto

Все*

Нет

visibility

inherit visible hidden hide show

Все

Да**

IE4 IE5

* Атрибут position должен иметь значение absolute или relative. ** Когда атрибут visibility имеет значение inherit.

Таблица П2.8. Псевдоклассы и псевдоэлементы Наименование

Значение

Применимо к

Унаследованное

:link

–

Якорь

Да

:active

–

Якорь

Да

:visited

–

Якорь

Да

:hover

–

Все

Да

:first-line

–

Разметка

Нет

:first-letter

–

Разметка

Нет

* Только IE5.5 для Windows.

Краткая справка о DHTML

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

530 Приложение 3 Таблица П3.1. Основные обработчики событий Имя

Когда происходит событие

Применимо к

onLoad

После начала загрузки объекта

Документы и изображения

onUnload

После окончания загрузки объекта

Документы и изображения

onFocus

Когда элемент выделен

Документы и формы

onBlur

Когда выделение с объекта снято

Документы и формы

onMouseOver

Когда указатель мыши находится над областью

Все*

onMouseOut

Указатель мыши больше не находится над областью

Все*

onCliuck

При щелчке мышью по области

Все*

onMouseDown

Пока кнопка мыши нажата

Все*

onMouseUp

Когда кнопка мыши отпущена

Все*

onMouseMove

Во время движения курсора

Документ

onKeyDown

Пока клавиша на клавиатуре нажата

Документы и формы

onKeyUp

Когда клавиша на клавиатуре отпущена

Документы и формы

onKeyPress

Когда клавиша нажата и сразу отпущена

Документы и формы

onResize**

При изменении размера окна браузера или кадра

Документ

OnMove***

Во время перемещения окна браузера

Документ

* Доступно только для ссылок и изображений в Netscape 4. ** Не поддерживается в IE4. *** Не поддерживается в IE4/5 и Netscape 6.

Таблица П3.2. Свойства системы Параметры поиска

Имя

Значение

Совместимость

Операционная система

navigator.appVersion

IE3, N2

Ширина экрана (всего)

screen.width

IE4, N4

Высота экрана (всего)

screem.height

IE4, N4

Ширина экрана (текущая)

screen.availWidth

IE4, N4

Высота экрана (текущая)

screen.availHeight

IE4, N4

Количество цветов

screen.colorDepth

IE4, N4

Таблица П3.3. Свойства браузера Параметры поиска

Имя

Значение

Совместимость

Имя браузера

navigator.appName

IE3, N2

Версия браузера

parselnt(navigator.appVersion)

IE3, N2

Ширина окна браузера

window.outerWidth

Высота окна браузера

window.outerHeight

Краткая справка о DHTML 531 Таблица П3.4. Параметры страницы Параметры поиска

Имя

Значение

Совместимость IE3, N2

Ссылка

self.location

Заголовок

document.title

IE3, N2*

Ширина видимой части

window.innerWidth document.body.clientWidth

N4 IE4

Высота видимой части

window.innerHeight document.body.clientHeight

N4 IE4

Положение документа при прокрутке влево

window.pageXOffset document.body.scrollLeft

N4 IE4

Положение документа при прокрутке вверх

window.pagtYOffset document.body.scrollTop

N4 IE4

* Ошибка в Netscape 4 для MacOS: вместо заголовка возвращает имя файла.

Таблица П3.5. Параметры объекта Параметры поиска

Имя

Значение

Совместимость

Widht

offsetWidth width

IE4, N6 N4

Height

offsetHeight height

IE4, N6 N4

Left Position

offsetLeft pixelLeft left

N6 IE4 N4

Top Position

offsetTop pixelTop top

N6 IE4 N4

Z-index

zindex

Visibility

visible hidden show hide

Clip

clip[]

IE4, N4 IE4, N4 IE4, N4 N4 (только) N4 (только)

<array>

Clip Top

clip.top

<pixel>

N4*

Clip Left

clip.left

<pixel>

N4*

Clip Bottom

clip.bottom

<pixel>

N4*

Clip Right

clip.right

<pixel>

N4*

Clip Width

clip.width

<pixel>

N4*

Clip Height

clip.height

<pixel>

N4*

* Хотя в IE можно обрабатывать величины ограничений, здесь необходимо обрабатывать массив (см. главу 12).

532 Приложение 3

Служебные слова При создании класса CSS, ID CSS или имен переменных JavaScript не забывайте, что у браузера есть слова, зарезервированные для определенных целей. Я не рекомендую их использовать. Допустимо применять служебные слова в сочетаниях слов. Например, new и label – не совсем удачные имена для переменных, а newLabel – отличный вариант.

Служебные слова JavaScript и Java Ниже приводятся служебные слова языка JavaScript или Java, в любом случае лучше их не употреблять.

abstract boolean break byte case catch char class comment const continue debugger default delete do double else enum export extends false final

finally float for function goto if implements import in instanceOf int interface label 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

Краткая справка о DHTML 533

Другие слова, которых следует избегать Хотя официально эти слова не входят в список служебных слов, они применяются в JavaScript. Их использование может приводить к ошибкам. Не забывайте, что Netscape чувствителен к регистру, поэтому слово, начинающееся с заглавной буквы, и слово, написанное прописными буквами, означают совсем не одно и то же. Например, history и History имеют разные значения. alert Anchor Area arguments Array assign blur Boolean Button callee caller capture Checkbox clearInterval clearTimeout close closed confirm constructor Date defaultStatus document Document Element escape eval

event evt FileUpLoad find focus Form Frame frames Function getClass Hidden Events history History home Image Infinity innerHeight innerWidth isFinite isNaN java JavaArray JavaClass JavaObject JavaPackage

lenght Link location Location locationbar Math menubar MimeType moveBy moveTo name hide navigate navigator Navigator netscape Number Object onBlur onError onFocus onLoad onUnload open opener Option

outerHeight outerWidth Packages pageXoffset pageYoffset parent parseFloat parseInt Password personalbar Plugin NaN prompt prototype Radio ref RegExp releaseEvents Reset resizeBy resizeTo routeEvent scroll scrollBars scrollBy scrollTo

Select self setInterval setTimeout status statusbar stop String Sub,it sun taint print Text Textarea toolbar top toString unescape untaint unwatch valueOf watch window Windows

Шрифты, поддерживаемые браузером

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

Шрифты, поддерживаемые браузером 535 Таблица П4.1. Microsoft Internet Explorer (MacOS и Windows) Название

Плотность и стили

Семейство

Пример

Arial Black

Моноширинный

Sans-serif

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890

Comic Sans MS

Полужирный

Cursive

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890

Sans-serif

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890

Serif

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890

Trebuchet MS* Полужирный, курсив, полужирный курсив

Sans-serif

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890

Verdana

Sans-serif

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890

Fantasy

$%&'()*,-+./01234567 89:;<=DLMEFGHIJKNOPQRS TUVWXYZ[\]

Impact

Minion Web*

Webdings**

Полужирный, курсив

Полужирный, курсив, полужирный курсив

* Как в IE5. ** Также поддерживаются шрифты: Andale, Georgia.

536 Приложение 4 Таблица П4.2. Операционная система MacOS Название

Плотность и стили

Семейство

Пример

Sans-serif

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890

Monospace

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890

Sans-serif

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890

Sans-serif

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890

Monaco

Monospace

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890

New York

Serif

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890

Serif

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890

Symbol

Fantasy

ΑΒΧΔΕΦΓΗΙϑΚΛΜΝΟΠΘΡΣΤΥ ςΩΞΨΖαβχιϕδεφγηκλμνοπθρστυϖωξψζ 1234567890

Techno

Serif

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890

Serif

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890

Chicago

Courier

Полужирный, курсив, полужирный курсив

Geneva

Helvetica

Palatino

Times*

Полужирный, курсив, полужирный курсив

* Также поддерживаются: шрифт Charcoal; только в MacOS 8.5: шрифты Apple Chancery, Capitals, Gadget, Hoefler Text, Sand, Skia и Textile.

Шрифты, поддерживаемые браузером 537 Таблица П4.3. Операционная система Windows Название

Плотность и стили

Семейство

Пример

Abadi MT Condensed Light*

Sans-serif

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890

Arial

Sans-serif

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890

Sans-serif

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890

Полужирный, курсив, полужирный курсив

Arial Black*

Book Antiqua*

Полужирный, курсив,

Serif

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890

Calisto MT*

Полужирный, курсив

Serif

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890

Century Gothic* Полужирный, курсив, полужирный курсив

Sans-serif

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890

Comic Sans MS*

Cursive

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890

Copperplate Gothis Bold

Serif

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890

Copperplate Gothis Light

Serif

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890

Monospace

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890

Lucida Console*

Monospace

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890

Lucida Handwriting Italic*

Cursive

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890

Lucida Sans Unicode*

Курсив

Sans-serif

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890

News Gothic MT*

Полужирный, курсив

Sans-serif

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890

Monospace

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890

Courier New

OCR A Extended*

Полужирный

Полужирный, курсив, полужирный курсив

538 Приложение 4 Таблица П4.3. Операционная система Windows (окончание) Название

Плотность и стили

Symbol

Семейство Пример Fantasy

ΑΒΧΔΕΦΓΗΙϑΚΛΜΝΟΠΘΡΣΤΥςΩΞΨΖ αβχδεφγηιϕκλμνοπθρστυϖωξψζ 1234567890

Tahoma*

Полужирный

Sans-serif

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890

Times New Roman

Полужирный, курсив, полужирный курсив

Serif

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890

Verdana*

Полужирный, курсив, полужирный курсив

Sans-serif

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890

Webdings*

Fantasy

$%&'()*+,-./01234567 89:;<=DELMFGHIJKNOPQRS TUVWXYZ[\]

Wingdings

Fantasy

☺ ⌧

* Как в Windows 98.

Дополнительные инструменты

При создании сайтов я использую не только профессиональные приложения, такие как FreeHand, Photoshop, Dreamweaver и GoLive, но также и небольшие программы, которые намного упрощают работу. Некоторые программы являются бесплатными или условно бесплатными, другие представляют собой Web-сайты. Далее вы найдете список моих самых любимых программ.

Рис. П5.1. Программа Screen Ruler

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

Screen Ruler (Mac/Win) www.kagi.com/microsoft Некоторые идеи настолько очевидны, просты и полезны, что каждый раз, используя их в своей работе, вы задаетесь одним и тем же вопросом: «Почему я сам до этого не додумался?» Таким изобретением является и программа Screen Ruler (рис. П5.1). Она помещает на экран линейку, которой вы

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

Pixel Spy (Mac) и Color Picker (Win) shakti.cc.trincoll.edu/~bhorling/pixelspy/ chuting.uhome.net/colorpk.zip Как и Screen Ruler, программы Pixel Spy (рис. П5.2) и Color Picker (рис. П5.3) представляют несомненный интерес для Webдизайнеров. При щелчке по какому-либо изображению программы указывают цвет выбранного пиксела в форматах Hex (шестнадцатеричное представление), RGB, CMYK и др. Они также находят наиболее близкий оттенок цвета из тех цветов, которые поддерживает браузер, таким образом, позволяя точно определять соответствия цветов в окне браузера или между программами.

Рис. П5.2. Программа Pixel Spy

Палитры цветов, поддерживаемых браузером (Mac/Win) www.lynda.com/files/CLUTS www.visibone.com/swatches Линда Винман (Lynda Wynman), автор популярной концепции цветов, поддерживаемых браузером, разместила на указанном сайте копии палитр цвета, которые применяются в наиболее известных графических программах, таких как Photoshop, FreeHand, Paint Shop Pro и Illustrator. Я рекомендую воспользоваться коллекцией образцов, имеющихся на сайте Visibone, где они представлены в дружественном пользователю формате (рис. П5.4).

Рис. П5.3. Программа Color Picker

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

Дополнительные инструменты 541

GIFBuilder (Mac) и GIF Construction Set (Win)

Рис. П5.4. Таблица цветов CLUT от Visibone в Photoshop

homepage.nac.com/piguet/gif.html www.mindworkshop.com/alchemy/gifcon.html В настоящее время рынок программного обеспечения переполнен сложными программами для создания анимированных GIF-файлов. Однако нельзя оставить без внимания такие инструменты, как GIFBuilder (рис. П5.5) и GIF Constructor (рис. П5.6), которые позволяют быстро и легко создавать анимацию непосредственно в программе Photoshop. Одной из малоизвестных возможностей GIFBuilder является обработка файла Photoshop, включающего слои, и преобразование каждого слоя в отдельный кадр. Указанные программы распространяются в Сети совершенно бесплатно.

Рис. П5.5. Программа GIFBuilder

Рис. П5.6. Набор GIF Constructor

542 Приложение 5

GraphicConverter (Mac) и Lview Pro (Win) www.lemkesoft.de/us_gcabout.html www.lview.com Хотя GraphicConverter (рис. П5.7) не такая сложная программа, как Photoshop (с точки зрения редактирования изображения), она помогала мне открывать файлы в таких форматах и кодировке, перед которыми пасовали самые сложные программы. К тому же GraphicConverter легко может преобразовать любое число графических файлов из одного формата в другой.

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

Рис. П5.7. Программа GraphicConverter

Webmaster’s Color Lab www.visibone.com/colorlab Данный инструмент, созданный компанией Visibone, позволяет быстро определить палитру цветов для Web-сайта (рис. П5.8). Цвета располагаются рядом, и дизайнер способен оценить то или иное цветовое сочетание. Один кадр содержит цветное кольцо, в котором вы найдете все цвета, поддерживаемые браузером. Если щелкнуть по какому-либо цвету, его образец появится в соседнем кадре. Допустимо указывать любые понравившиеся вам цвета – их образцы отобразятся рядом с первым. Webmaster’s Color Lab позволяет поместить в образце все ранее выбранные цвета; таким образом, вы легко можете их сравнить.

Рис. П5.8. Инструмент Webmaster’s Color Lab

Дополнительные инструменты 543

ColorMix

Рис. П5.9. Программа ColorMix

www.colormix.com/ Программа ColorMix (рис. П5.9) комбинирует два или три цвета из 216 цветов, поддерживаемых браузером, позволяя создавать тысячи новых цветов. Точки разных цветов помещается рядом, и зрительно эти цвета смешиваются (например, подобное размещение синего и желтого цветов позволяет получить зеленый). Правда, созданный таким образом цвет не будет настолько четким, как изначальный, а некоторые сочетания выглядят просто некрасиво. Но все-таки данный инструмент значительно расширит цветовую палитру вашего Webсайта.

Тестовый пакет CSS1

Рис. П5.10. Тестовый пакет CSS1 от W3C

www.w3.org/Style/CSS/Test Чтобы узнать, какие возможности CSS поддерживает ваш браузер, запустите его через тестовый пакет W3C для CSS1 (рис. П5.10). В этом пакете учитываются все свойства CSS. Он особенно полезен в том случае, когда вам необходимо убедиться, что тип CSS, который вы планируете использовать, действительно будет правильно функционировать. Но это следует сделать до того, как вы столкнетесь со всеми остальными проблемами, возникающими при создании Web-сайта.

544 Приложение 5

Web Site Garage websitegarage.netscape.com Инструмент Web Site Garage позволяет полностью настроить сайт (рис. П5.11). Предоставьте ему ссылку на ваш сайт, и вскоре перед вами появится бесплатный отчет о совместимости браузера, времени загрузки, «мертвых» ссылках, грамматике и HTML. Каждый параметр будет оцениваться по шкале от «отлично» до «неудовлетворительно». Внося каждый месяц определенную плату, вы сможете получить доступ к ряду сетевых приложений, которые помогут оптимизировать Web-сайт, раскрыть весь его потенциал. Я протестировал свой сайт с помощью Web Site Garage и получил общую оценку «хорошо». В следующем месяце я надеюсь получить «отлично».

Рис. П5.11. Инструмент Web Site Garage

Radio Free Underground www.stitch.com/studio Этот сайт не предоставляет никаких дизайнерских инструментов, но мне, например, всегда лучше работается, когда играет приятная музыка. Здесь поможет Radio Free (рис. П5.12). Вы выбираете какой-либо стиль (классику, техно, 80-е годы и т.д.), и на сайте для вас делают подборку из 40 или 50 музыкальных произведений, которые вы можете незамедлительно прослушать. Каждый раз, заходя на сайт, вы получаете новую подборку.

Рис. П5.12. Сайт Radio Free Undereground

Дополнительные источники

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

Web-сайты: технология и стандарты В книге я постарался рассказать обо всех аспектах Web-разработки, однако еще многое осталось за кадром. На нижеперечисленных сайтах вы сможете найти дополнительные сведения о DHTML и CSS.

546 Приложение 6

W3С-консорциум www.w3.org На данном сайте вы найдете подробную информацию обо всех Web-стандартах. Нужны ли вам сведения о последних изменениях в объектной модели документа или рекомендации по CSS первого уровня, этот сайт – единственный, куда стоит обратиться и в первом, и во втором случае (рис. П6.1).

BuildingTheWeb.com

Рис. П6.1. Сайт W3С-консорциум

www.buildingtheWeb.com Здесь вы найдете все необходимые ресурсы. Помимо большого количества ссылок, BuildingTheWeb.com содержит списки самых важных тем. У каждой ссылки есть описание содержания сайта, что значительно упрощает поиск (рис. П6.2).

Помощь по HTML от Web Design Group www.htmlhelp.com Посетив данный сайт, я сам впервые узнал, что такое CSS. С тех пор как я решил связать свою работу со спецификациями W3C, именно на этом сайте я нашел наиболее полную информацию о HTML. Возможно, он оформлен не столь привлекательно, как остальные Web-сайты, однако только здесь вы получите самые подробные и понятные объяснения Web-стандартов (рис. П6.3).

Рис. П6.2. Сайт BuildingTheWeb.com

Рис. П6.3. Помощь по HTML

Дополнительные приложения 547

Проект Web-стандартов www.webstandards.org Эта группа не устанавливает какие-либо стандарты, в ее функции входит контроль за соблюдением стандартов производителями браузеров. Группа также проводит кампанию по усовершенствованию браузеров, чтобы помочь разработчикам как можно ближе подвести свои проекты к стандартам (рис. П6.4). Рис. П6.4. Проект Web-стандартов

WebReview www.webreview.com На сайте WebReview вы найдете статьи профессионалов Web-дизайна на самые разнообразные темы, примечания по дизайну и редакционные статьи. Если вы следите за последними изменениями в индустрии дизайна, обязательно посещайте этот сайт (рис. П6.5).

WebReference Рис. П6.5. Сайт WebReview.com

www.webreference.com На сайте WebReference в основном содержится информация об интерфейсе Webсайтов, приводятся статьи о практическом использовании DHTML, CSS и других технологий (рис. П6.6).

Apple Developer Connection – Internet-разработчик

Рис. П6.6. Сайт WebReference.com

developer.apple.com/internet Сайт Apple Developer Connection более интересен для дизайнеров, работающих на Macintosh, однако здесь вы сможете найти информацию, полезную для любого Webразработчика (рис. П6.7).

548 Приложение 6

Dynamic Drive www.dynamicdrive.com Данный сайт целиком посвящен DHTML. Если вы ищете информацию о новациях в этой области, сайт Dinamic Drive – как раз то, что вам нужно (рис. П6.8).

Часто задаваемые вопросы о DHTML www.faqts.com/knowledge_base/index.phtml/ fid/128 Этот сайт – один из моих любимых ресурсов. Если у вас есть вопрос о DHTML, CSS или JavaScript, щелкните по указанной ссылке. Скорее всего, такой вопрос уже обсуждался на данном сайте и вы найдете подробный ответ и разъяснения профессионалов (рис. П6.9).

Рис. П6.7. Apple Developer Connection – Internet-разработчик

DHTML для Всемирной паутины www.webbedenvironments.com/dhtml На сайте поддержки данной книги содержатся все коды, приведенные ранее, работу которых допустимо просмотреть в режиме реального времени. Для экономии времени можете загрузить программы непосредственно с сайта, чтобы не переписывать их с книги. Кроме того, на этом сайте я буду размещать дополнения и исправления (рис. П6.10).

Рис. П6.8. Сайт Dynamic Drive

Рис. П6.9. Часто задаваемые вопросы о DHTML

Дополнительные приложения 549

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

GlassDog

Рис. П6.10. Сайт поддержки книги

www.glassdog.com/design-o-rama На этом сайте вы найдете много полезной и интересной информации о Web-дизайне. Сведения изложены хорошим профессиональным языком с соблюдением соответствующей терминологии, материал подобран таким образом, чтобы осветить все аспекты рассматриваемой темы (рис. П6.11).

Скотт Макклауд

Рис. П6.11. Сайт Glass Dog

Рис. П6.12. Web-комиксы от Скотта МакКлауда

www.scottmccloud.com Скотт Макклауд (Scott McCloud) вошел в индустрию Internet совершенно неожиданным образом. Книга этого известного создателя комиксов – «Понимание комиксов» (Understanding Comics) – стала классикой Web-дизайна в середине 90-х годов. На сайте основное внимание уделено Webкомиксам, однако оригинальные авторские решения будут интересны и чрезвычайно полезны любому дизайнеру (рис. П6.12).

550 Приложение 6

Центр Argus по архитектуре информации argus-acia.com Большую часть посетителей Всемирной сети представляют пользователи приложений, функционирующих в режиме реального времени. Разработка подобных приложений требует не только знания основ графического дизайна. Необходимо понимать, как создать простой и удобный пользовательский интерфейс, как правильно организовать информацию и продумать архитектуру будущего сайта. На сайте argusacia.com вы найдете великолепные статьи, в которых освещаются эти и многие другие темы (рис. П6.13).

Рис. П6.13. Центр Argus по архитектуре информации

Useit.com www.useit.com Как и на предыдущем сайте, здесь содержатся статьи, которые помогают улучшить Web-сайты с точки зрения простоты и удобства использования. Лично я не всегда согласен с выводами, представленными авторами сайта, однако многие их идеи, безусловно, интересны и весьма оригинальны (рис. П6.14).

Рис. П6.14. Сайт Useit.com

Web Page Design для дизайнеров www.wpdfd.com Создатель сайта, Джо Джиллеспай (Joe Gillespie), разместил на нем огромное количество статей, которые помогут дизайнерам переносить информацию из печатного варианта в Web. Даже ветераны сетевых войн найдут здесь много полезных сведений (рис. П6.15). Рис. П6.15. Сайт Web Page Design для дизайнеров

Дополнительные приложения 551

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

Splatterpunk

Рис. П6.16. Сайт Splatterpunk

www.splatterpunk.com Сайт разработан компанией Adobe. Здесь содержится информация о возможностях предоставляемого этой компанией программного обеспечения, включая GoLive. Здесь вы найдете кое-что интересное и об DHTML (рис. П6.16).

Sandman Film www.sandmanfilm.org При создании этого сайта я активно использовал возможности DHTML. Здесь представлен эффект киноленты, когда кадры прокручиваются по горизонтали в зависимости от того, какой раздел вы выбираете в меню, расположенном в нижней части страницы (рис. П6.17). Рис. П6.17. Сайт The Sandman

Coma2 www.coma2.com На сайте Coma2 содержится коллекция работ мастеров в сфере мультимедиа. Здесь представлены инновационные методы использования DHTML. К тому же сайты, на которые ссылаются авторы, также применяют DHTML (рис. П6.18).

Рис. П6.18. Сайт Coma2

552 Приложение 6

Kaliber 10000 www.k10k.com Kaliber 10000, который больше известен как K10K, – популярный сайт, куда Web-дизайнеры заходят в поисках самых современных идей. Здесь вы можете узнать о новых методах интеграции DHTML в интерфейс своего сайта (рис. П6.19).

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

Визуальное представление Печатное слово играет в нашей жизни немалую роль, но удивительно, насколько лучше информация воспринимается не со словесных объяснений, а с визуально представленного материала. Как говорится, лучше один раз увидеть, чем сто раз услышать. В книге Эдварда Тюфта «Визуальное представление: изображения и количество, очевидность и изложение» (Edward Tufte «Visual Explanations: Images and Quantities, Evidence and Narrative»; издательство Graphics Press) рассматривается сложность передачи информации посредством визуальных элементов, а также говорится о важной роли, которую играет зрительное восприятие в нашей жизни.

Понимание комиксов Ранее я уже упоминал великолепный сайт Скотта Макклауда, стоит рассказать и о его книге «Понимание комиксов» («Understanding Comics»; издательство Kitchen Sink

Рис. П6.19. Сайт Kaliber 10000

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

Невидимый компьютер «Люди не хотят пользоваться компьютером, они хотят, чтобы их проблемы решались». Такое справедливое замечание сделал Дональд А. Норман в своей книге «Невидимый компьютер: почему хорошие товары могут не пользоваться спросом. Персональный компьютер слишком сложен, будущее – за информационными устройствами» (Donald A. Norman «Invisible Computer: Why Good Products Can Fail. the Personal Computer is So Complex and Information Appliances Are the Solution»; издательство MIT Press). Это прекрасная книга о философии создания продуктов, которые распространяются с помощью компьютеров.

Дополнительные приложения 553

Create Online

Рис. П6.20. Web-сайт Create Online

www.createonline.co.uk Этот журнал выходит раз в месяц. В нем вы найдете множество подробных руководств, написанных профессионалами, а также статьи, рассматривающие целый ряд вопросов, которые могут быть интересны Web-разработчику. Хотя журнал Create Online издается в Великобритании, я находил его во многих книжных магазинах США (рис. П6.20).

Visibone HTML и CSS Card www.visibone.com/html Visibone HTML и CSS Card – отличный документ для каждого пишущего Internet-программы. На четырех страницах содержится практически все, что нужно знать о тэгах HTML и свойствах CSS, включая атрибуты, значения, совместимость браузеров, ошибки в программах и специальные символы. Этот документ необходимо иметь под рукой любому Web-дизайнеру (рис. П6.21). Рис. П6.21. Web-сайт Visibone HTML и CSS Card

предметный указатель А

Абзац 104

Динамический HTML. См. DHTML Динамический дизайн навигация запреты 341 рекомендации 340 принципы 336 размещение объектов 337

Б Блок плавающий 306 Браузер возможности 194 сохраняемые цвета 17 Будущее Internet 504 CSS3 514 SMIL 512 SVG 513 XHTML 509 переход от HTML 510 XML 507 CSS и DOM 508

З Заголовки с фоном 361 фиксированные 362

Видимость 167 Внутренний отступ 142 Вывод на печать 379 Выравнивание вертикальное 103 текста 102 стиль 102

Изображение на заднем плане 126 Импорт внешнего содержимого 381 включение на стороне сервера 384 внешний файл JavaScript 385 тэги <ilayer> и <iframe> 382 Индекс 103 Интервал между словами 98 межстрочный 99

Гипертекст 335 Графика векторная, масштабируемая 80

Кадр опорный 316 Кернинг 97

Предметный указатель 555 Класс зависимый 53 правила 51 селектор 52 Колонтитул 366 Комментарий 75

М Меню боковое 364 выдвижное 400 выпадающее 395 раскрывающееся 407 «умное» 447 уточняющее 410 Метаинформация 417 Мультимедиа 476 Flash-анимация 484 добавление на страницу 488 создание 485 GIF-анимация 478 вставка на страницу 481 назначение 482 в ImageReady 480 в Macromedia Fireworks 479 Java-апплеты 492 видео 490 звук 477

Н Навигация на сайте 340, 389 для браузеров без DHTML и CSS 415 дополнительная 416 общий стиль ссылок 390 панель управления 403 сложный стиль ссылок 393

О Обработчик событий, глобальный 254 Обтекание текстом 144

Объекты анимационные 256 перетаскивание 439 Объектная модель документа 182 Окно браузера 151 новое 268 перемещение 266 Определение CSS для ОС посетителя 358 группа 61 изменение 275 Отладка кода 494 CSS ошибки 495 проверка 497 JavaScript ошибки 499 проверка 500 различия между браузерами 502

П Панель управления 403 Печать Web-страницы 72 Поддержка браузера DHTML 516 iCab 519 Internet Explorer 517 Netscape Navigator 518 Opera 519 Позиционирование абсолютное 153 относительное 153 статическое 153 фиксированное 154 Полоса прокрутки 420 Порядок стека 161 Псевдокласс 390 Псевдоэлемент 453

Р Размер клиентской области окна 217 объекта 222

556 DHTML и CSS окна браузера 216, 272 экрана 212

С Свойства наследованные 69 правила 33 Свопинг изображений 442 элемента 442 в другом фрейме 446 соседнего 445 Селектор контекстуальный 63 правила 33 Сетка расположения 351 Слайд-шоу 427 Слои Netscape 283 встроенные 203 доступ из JavaScript 290, 293 импорт внешнего содержимого 288 создание 287 Событие обнаружение 188 обработчик 186 Создание сайта 344 проектирование 345 определение целей сайта 346 определение читательской аудитории 346 предоставляемые функции 347 сбор и сортировка информации 345 стиль оформления 347 разработка 348 первый эскиз 349 план сайта 348 раскадровка 349 схема сайта 348 реализация 352 компоновка страниц 353 подготовка кода 352 подготовка содержания 352 создание шаблона 352 тестирование 353

Специальные эффекты буквица 452 движущиеся объекты 467 прозрачная графика 470 добавление на страницу 473 создание в Fireworks 472 создание в Photoshop 470 тень объемная 455 простая 454 указатель мыши 463 фединг текста 459 часы 474 Список 113 маркер 115, 117 висячий отступ 116 Средства управления 419 всплывающий гипертекст 431 кнопки Back и Next 426 полоса прокрутки 420 слайд-шоу 427 Ссылка навигационная 335 Стиль 26 каскадный порядок 70 наследование 66 тэга 38 Страница прокрутка 220 просмотр кода 387 разрыв 111

Т Таблица стилей изменение 281 каскадная 27 Текст HTML 80 векторный 80 выравнивание вертикальное 103 горизонтальное 102 графический 80 динамический 101 украшения 106

Предметный указатель 557 findClipRight 233 findClipTop 233 findDOM 199, 201 findHeight 223 findLayer 228, 243 findLivePageHeight 217 findLivePageWidth 218 findObject 262 findRight 226 findScrollLeft 220 findScrollTop 221 findTop 225 findVisibility 231 findXCoord 259 findYCoord 259 fullScreen 273 magnifyWindowSize 273 moveObjectBy 241 moveObjectTo 239 openWindow 268 passItOn 253 scrollPageTo 246 setClass 278 setClip 232, 249 setLayer 228, 243 setUpAnnouingFlash 251 setVisibility 230, 237 swapLayer 244 toggleVisibility 237 toggleWindow 269 рекурсивная 250

Тэги inline 36, 56 link 45 блок-уровня 36, 58 дочерний 62 замененные 36 набор 62 переопределение 50 родительский 62

У Указатель мыши 119 Устранение ошибки в Netscape CSS 356

Ф Фон фоновая картинка 121 цвет 121, 125 Форма ввода 434 для создания динамических эффектов 434 контекстная 437 Фрейм границы 369 динамическое содержание 263 открытие и закрытие 371 размещение страниц 376 Функции addRule 280 animateObject 258 annouingFlash 251 blurOn 301 changeStyle 276 changeWindowSize 273 clipLayer 294 closeWindow 269 defaultEvents 254 errorOn 255 fadeElement 298 findBottom 226 findClipArray 233 findClipBottom 233 findClipLeft 233

Ц Цвета сохраняемые браузером 18 фона 124

Ш Шрифт 78 загрузка 83 размер 87 семейство 79 тип 79 Cursive 79 Fantasy 79

558 DHTML и CSS Monospace 79 Sans-serif 79 Serif 79 толщина 91 установленный по умолчанию 85

Э Элемент 131 внутренний отступ 132 поле 132 положение 152 рамка 132 вид 139 содержимое 132 стороны 132 Эффекты Internet Explorer перетекание объектов 298 переход между страницами 299 размытие изображения 301 эффект волны 302

С CSS 27 ID-правило 32 версии 30 добавление на Web-страницу 40 класс 32 правила 32 форматирование 42 CSS-файл, внешний 43 CSS3 514

D DHTML 174 в Microsoft 176 в Nescape 176 недостатки 177 общий 176 преимущества 177

DOM 182 Internet Explorer All 192 Netscape Layer 190 W3C ID 193 общая для браузеров 201 Dreamweaver 317

F Flash 178 недостатки 179 преимущества 179

G GoLive 304

I ID 54

L Layout grid 351

M Minicaps 92

S SGML 507 Sidebar 364 SMIL 512 SVG 513 URL 19 глобальный 19 локальный 19 Word spacing 98 W3C 25 WYSIWYG 304 XHTML 509 XML 507 CSS и DOM 508 Z-индекс 161

Джейсон Кренфорд Тиге

DHTML и CSS Главный редактор

Мовчан Д. А.

dm@dmk-press.ru

Перевод с английского Научный редактор Выпускающий редактор Верстка Графика и дизайн

Талачева М. И. Нилов М. В. Левицкая Т. В. Лапшова М. А. Шаклунов А. К.

Подписано в печать 10.04.2003. Формат 70×100 1/16 . Гарнитура «Миниатюра». Печать офсетная. Усл. печ. л. 45,5. Тираж 1000 экз. Зак. № Издательство «ДМК Пресс» Web-сайт издательства: www.dmk-press.ru Internet-магазин: www.alians-kniga.ru Отпечатано на ордена Трудового Красного Знамени ГУП Чеховский полиграфический комбинат Министерства Российской Федерации по делам печати, телерадиовещания и средств массовых коммуникаций 142300, г. Чехов Московской области Тел. (272) 71-336, факс (272) 62-536